/* === Reel Area === */
#reel-area {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 15px;
    position: relative;
}

/* === Reel Grid === */
#reel-grid {
    display: flex;
    gap: 4px;
    margin: auto;
    background:
        url('data:image/svg+xml;utf8,<svg viewBox="0 0 520 300" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice"><defs><radialGradient id="cg" cx="40%25" cy="30%25"><stop offset="0%25" style="stop-color:%23ffffff;stop-opacity:0.18" /><stop offset="100%25" style="stop-color:%23B8DCFF;stop-opacity:0.03" /></radialGradient><radialGradient id="bb" cx="35%25" cy="35%25"><stop offset="0%25" style="stop-color:%23ffffff;stop-opacity:0.22" /><stop offset="70%25" style="stop-color:%2366E6FF;stop-opacity:0.1" /><stop offset="100%25" style="stop-color:%2300D4FF;stop-opacity:0.03" /></radialGradient></defs><rect width="520" height="300" fill="none" /><!-- cloud 1 top-left --><g opacity="0.5" transform="translate(50, 40)"><circle cx="0" cy="0" r="35" fill="url(%23cg)" /><circle cx="25" cy="-8" r="28" fill="url(%23cg)" /><circle cx="45" cy="5" r="32" fill="url(%23cg)" /><circle cx="65" cy="-5" r="26" fill="url(%23cg)" /><path d="M -35,0 Q -20,-20 0,-25 Q 20,-22 45,-28 Q 70,-32 65,-5 Q 75,10 45,20 Q 20,25 0,20 Q -20,22 -35,0" stroke="%23ffffff" stroke-width="0.6" fill="none" opacity="0.15"/></g><!-- cloud 2 top-right --><g opacity="0.4" transform="translate(400, 55)"><circle cx="0" cy="0" r="30" fill="url(%23cg)" /><circle cx="25" cy="-6" r="24" fill="url(%23cg)" /><circle cx="45" cy="3" r="28" fill="url(%23cg)" /><path d="M -30,0 Q -12,-16 0,-20 Q 18,-18 45,-24 Q 55,-22 45,12 Q 22,18 0,15 Q -18,17 -30,0" stroke="%23ffffff" stroke-width="0.5" fill="none" opacity="0.12"/></g><!-- cloud 3 bottom --><g opacity="0.45" transform="translate(230, 230)"><circle cx="0" cy="0" r="32" fill="url(%23cg)" /><circle cx="28" cy="-6" r="26" fill="url(%23cg)" /><circle cx="52" cy="3" r="30" fill="url(%23cg)" /><circle cx="75" cy="-4" r="24" fill="url(%23cg)" /><path d="M -32,0 Q -15,-18 0,-22 Q 24,-20 52,-26 Q 78,-30 75,-3 Q 82,10 52,18 Q 24,22 0,18 Q -18,20 -32,0" stroke="%23ffffff" stroke-width="0.5" fill="none" opacity="0.12"/></g><!-- bubble 1 --><g opacity="0.5" transform="translate(85, 130)"><circle cx="0" cy="0" r="20" fill="url(%23bb)" /><circle cx="0" cy="0" r="20" stroke="%23ffffff" stroke-width="0.8" fill="none" opacity="0.2"/><circle cx="-5" cy="-5" r="3" fill="%23ffffff" opacity="0.35"/><circle cx="4" cy="3" r="1.5" fill="%23ffffff" opacity="0.2"/></g><!-- bubble 2 --><g opacity="0.45" transform="translate(450, 160)"><circle cx="0" cy="0" r="18" fill="url(%23bb)" /><circle cx="0" cy="0" r="18" stroke="%23ffffff" stroke-width="0.8" fill="none" opacity="0.2"/><circle cx="-4" cy="-4" r="2.5" fill="%23ffffff" opacity="0.3"/><circle cx="3" cy="2" r="1" fill="%23ffffff" opacity="0.2"/></g><!-- bubble 3 --><g opacity="0.4" transform="translate(260, 90)"><circle cx="0" cy="0" r="15" fill="url(%23bb)" /><circle cx="0" cy="0" r="15" stroke="%23ffffff" stroke-width="0.7" fill="none" opacity="0.18"/><circle cx="-3" cy="-3" r="2" fill="%23ffffff" opacity="0.3"/></g><!-- bubble 4 --><g opacity="0.35" transform="translate(140, 260)"><circle cx="0" cy="0" r="14" fill="url(%23bb)" /><circle cx="0" cy="0" r="14" stroke="%23ffffff" stroke-width="0.6" fill="none" opacity="0.15"/></g><!-- bubble 5 --><g opacity="0.38" transform="translate(400, 260)"><circle cx="0" cy="0" r="16" fill="url(%23bb)" /><circle cx="0" cy="0" r="16" stroke="%23ffffff" stroke-width="0.7" fill="none" opacity="0.15"/></g><!-- wave lines --><path d="M 0,150 Q 130,130 260,150 T 520,150" stroke="%23ffffff" stroke-width="0.8" fill="none" opacity="0.08" /><path d="M 0,170 Q 130,190 260,170 T 520,170" stroke="%23ffffff" stroke-width="0.6" fill="none" opacity="0.06" /><!-- sparkle dots --><circle cx="170" cy="50" r="1.8" fill="%23ffffff" opacity="0.2" /><circle cx="360" cy="200" r="1.3" fill="%23ffffff" opacity="0.18" /><circle cx="110" cy="220" r="1.5" fill="%2366E6FF" opacity="0.15" /><circle cx="430" cy="90" r="1.2" fill="%23ffffff" opacity="0.15" /><circle cx="300" cy="270" r="1" fill="%2366E6FF" opacity="0.12" /></svg>'),
        var(--reel-bg);
    background-size: cover;
    background-position: center;
    background-attachment: local;
    border: 3px solid var(--reel-border);
    border-radius: var(--border-radius);
    padding: 4px;
    box-shadow: var(--shadow-gold), inset 0 0 30px rgba(0, 0, 0, 0.5);
    position: relative;
}

/* === Reel Viewport === */
.reel-viewport {
    width: 100px;
    height: 300px; /* 3 rows * 100px */
    overflow: hidden;
    position: relative;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.3) 0%,
        transparent 15%,
        transparent 85%,
        rgba(0, 0, 0, 0.3) 100%
    );
    border-radius: 4px;
}

/* === Reel Strip === */
.reel-strip {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: none;
    will-change: transform;
}

/* === Symbol Cell === */
.symbol {
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    position: relative;
    border-radius: 4px;
}

.symbol img {
    width: 82%;
    height: 82%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

.symbol::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    width: 80%;
    height: 1px;
    background: rgba(0, 153, 255, 0.1);
}

/* === Symbol States === */
.symbol.winning {
    animation: symbolWin 0.5s ease-in-out infinite alternate;
    z-index: 10;
}

.symbol.dimmed {
    opacity: 0.3;
    filter: grayscale(0.8);
}

/* === Win Line Canvas Overlay === */
#winline-canvas {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 20;
}

/* === Reel Separator Lines === */
.reel-viewport + .reel-viewport {
    border-left: 1px solid rgba(0, 153, 255, 0.15);
}

/* Row separator lines (horizontal) */
#reel-grid::before,
#reel-grid::after {
    content: '';
    position: absolute;
    left: 4px;
    right: 4px;
    height: 1px;
    background: rgba(0, 153, 255, 0.15);
    z-index: 5;
    pointer-events: none;
}

#reel-grid::before {
    top: calc(4px + 100px);
}

#reel-grid::after {
    top: calc(4px + 200px);
}