/* =============================================================================
   PCC Parable Slot Machine
   Rig geometry is in units of the cabinet height (H). Cabinet art is 941×1672,
   so cabinet width = 0.5628H. The lever overhangs on the right to 0.6875H.
   Every child is positioned in % of its box so the whole rig scales as one.
   ========================================================================== */

/* ── Menu entry ── */
#slotMenuBtn{
    display:flex;align-items:center;gap:12px;flex-shrink:0;
    margin:12px 14px 4px;padding:12px 14px;
    background:linear-gradient(180deg,#5a0012,#2c0009);
    border:1px solid rgba(255,190,70,.55);border-radius:6px;
    box-shadow:0 0 14px rgba(255,160,40,.18),inset 0 1px 0 rgba(255,230,160,.25);
    color:#ffd98a;font:700 13px Georgia,'Times New Roman',serif;letter-spacing:.04em;
    cursor:pointer;text-align:left;
    transition:box-shadow .2s,transform .1s;
}
#slotMenuBtn:hover{box-shadow:0 0 22px rgba(255,170,50,.38),inset 0 1px 0 rgba(255,230,160,.3);}
#slotMenuBtn:active{transform:scale(.98);}
#slotMenuBtn .slotMenuIcon{
    flex-shrink:0;width:30px;height:30px;border-radius:50%;
    background:url('/assets/img/slot/button.webp') center/cover no-repeat;
    box-shadow:0 0 8px rgba(255,190,70,.5);
}
#slotMenuBtn small{display:block;font:400 10px Arial,sans-serif;letter-spacing:.14em;
    text-transform:uppercase;color:rgba(255,170,80,.6);margin-top:3px;}

/* ── Overlay ── */
#slotOverlay{
    position:fixed;inset:0;z-index:10050;
    display:flex;align-items:center;justify-content:center;
    background:radial-gradient(ellipse at 50% 45%,rgba(60,6,14,.92),rgba(4,0,2,.97) 70%);
    opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s;
    -webkit-tap-highlight-color:transparent;
    overflow:hidden;
}
#slotOverlay.open{opacity:1;visibility:visible;transition:opacity .35s ease;}
#slotClose{
    position:absolute;top:14px;right:14px;z-index:5;
    width:42px;height:42px;border-radius:50%;
    background:rgba(20,0,4,.7);border:1px solid rgba(255,190,70,.45);
    color:#ffd98a;font:400 20px/1 Arial,sans-serif;cursor:pointer;
}
#slotClose:hover{background:rgba(90,0,18,.8);}

/* Share (upper left) */
#slotShare{
    position:absolute;top:14px;left:14px;z-index:5;height:42px;padding:0 16px 0 13px;
    display:flex;align-items:center;gap:8px;border-radius:999px;cursor:pointer;
    background:rgba(20,0,4,.7);border:1px solid rgba(255,190,70,.45);
    color:#ffd98a;font:700 11px Arial,sans-serif;letter-spacing:.22em;text-transform:uppercase;
}
#slotShare svg{width:16px;height:16px;flex-shrink:0;}
#slotShare:hover{background:rgba(90,0,18,.8);}
#slotShare:focus-visible,#slotClose:focus-visible{outline:2px solid #ffd98a;outline-offset:3px;}
#slotShareMenu{
    position:absolute;top:62px;left:14px;z-index:6;min-width:190px;
    display:none;flex-direction:column;padding:6px;border-radius:10px;
    background:linear-gradient(180deg,#2a0610,#140206);border:1px solid rgba(255,190,70,.45);
    box-shadow:0 10px 30px rgba(0,0,0,.6);
}
#slotShareMenu.open{display:flex;}
#slotShareMenu a,#slotShareMenu button{
    display:block;text-align:left;padding:11px 14px;border-radius:6px;border:none;background:none;cursor:pointer;
    color:#ffe2a6;font:700 14px Georgia,'Times New Roman',serif;text-decoration:none;
}
#slotShareMenu a:hover,#slotShareMenu button:hover,#slotShareMenu a:focus-visible,#slotShareMenu button:focus-visible{background:rgba(255,120,40,.14);outline:none;}

/* Rig: H = min(94vh, 96vw / 0.6875) */
.slotRig{
    --H:min(94vh, calc(96vw / 0.6875));
    position:relative;height:var(--H);width:calc(var(--H) * 0.6875);
    transform:scale(.92);opacity:0;transition:transform .45s cubic-bezier(.2,1.3,.4,1),opacity .3s;
    /* nudge right so the cabinet itself (not cabinet+lever) sits centred */
    margin-left:calc(var(--H) * 0.1247);
}
@supports (height:100dvh){ .slotRig{ --H:min(94dvh, calc(96vw / 0.6875)); } }
@media (max-aspect-ratio: 3/4){ .slotRig{ margin-left:0; } }
#slotOverlay.open .slotRig{transform:scale(1);opacity:1;}

/* Burst sits behind everything, centred on the reel window */
.slotBurst{
    position:absolute;left:40.93%;top:48.6%;width:150%;aspect-ratio:1;
    transform:translate(-50%,-50%) scale(.2);opacity:0;pointer-events:none;
    background:url('/assets/img/slot/burst.webp') center/contain no-repeat;
    -webkit-mask-image:radial-gradient(circle,#000 38%,transparent 68%);
            mask-image:radial-gradient(circle,#000 38%,transparent 68%);
    z-index:0;
}
.slotRig.win .slotBurst{animation:slotBurst 3.2s ease-out forwards;}
@keyframes slotBurst{
    0%  {opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(0deg);}
    12% {opacity:1;transform:translate(-50%,-50%) scale(1.05) rotate(12deg);}
    100%{opacity:.55;transform:translate(-50%,-50%) scale(.95) rotate(60deg);}
}

/* Lever — behind the cabinet so the mounting plate tucks under its edge */
.slotLever{
    position:absolute;left:76.28%;top:11.7%;width:23.72%;height:62%;
    z-index:1;cursor:grab;touch-action:none;
}
.slotLever img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;user-select:none;-webkit-user-drag:none;}
.slotLever .lvDown{opacity:0;}
.slotLever.pulled .lvUp{opacity:0;}
.slotLever.pulled .lvDown{opacity:1;}
.slotLever:focus-visible{outline:2px solid #ffd98a;outline-offset:4px;}
.slotLever.disabled{cursor:default;}

/* Cabinet box */
.slotCab{position:absolute;left:0;top:0;width:81.86%;height:100%;z-index:2;}
.slotCab > .cabArt{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;user-select:none;}

/* Reel bed + reels (under the art) */
.reelBed{
    position:absolute;left:12.6%;top:32.9%;width:74.7%;height:31.5%;z-index:1;
    background:linear-gradient(180deg,#07030a,#1b0a12 50%,#07030a);
}
.reel{
    position:absolute;top:32.9%;height:31.5%;overflow:hidden;z-index:2;
    background:#0b0508;
}
.reel.r0{left:12.9%;width:24.0%;}
.reel.r1{left:37.9%;width:24.2%;}
.reel.r2{left:63.2%;width:24.0%;}
.reelStrip{position:absolute;left:0;top:0;width:100%;will-change:transform;}
.reelStrip.blur{filter:blur(2.5px) brightness(1.08);}
.tile{
    position:relative;width:100%;background-repeat:no-repeat;background-color:#120a0e;
    box-shadow:inset 0 -2px 0 rgba(0,0,0,.55),inset 0 2px 0 rgba(255,255,255,.04);
}
/* Curved-glass shading over the reels */
.reelShade{
    position:absolute;left:12.6%;top:32.9%;width:74.7%;height:31.5%;z-index:2;pointer-events:none;
    background:linear-gradient(180deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.6) 12%,rgba(0,0,0,.08) 17%,
                                      rgba(0,0,0,0) 30%,rgba(0,0,0,0) 70%,
                                      rgba(0,0,0,.08) 83%,rgba(0,0,0,.6) 88%,rgba(0,0,0,.88) 100%);
}
.reelFlash{
    position:absolute;left:12.6%;top:32.9%;width:74.7%;height:31.5%;z-index:2;pointer-events:none;
    background:radial-gradient(ellipse at center,rgba(255,245,210,.9),rgba(255,200,80,.25) 60%,transparent 80%);
    opacity:0;
}
.slotRig.win .reelFlash{animation:reelFlash .9s ease-out;}
@keyframes reelFlash{0%{opacity:0}15%{opacity:1}100%{opacity:0}}

/* Payline: gold band + arrows (arrows sit on the frame, above the art) */
.payline{
    position:absolute;left:12.9%;width:74.3%;z-index:2;pointer-events:none;
    border-top:2px solid rgba(255,215,120,.0);border-bottom:2px solid rgba(255,215,120,.0);
    transition:border-color .3s,box-shadow .3s;
}
.slotRig.win .payline{
    border-color:rgba(255,215,120,.95);
    box-shadow:0 0 18px rgba(255,200,80,.7),inset 0 0 18px rgba(255,200,80,.35);
    animation:payPulse 1.1s ease-in-out infinite;
}
@keyframes payPulse{50%{box-shadow:0 0 6px rgba(255,200,80,.3),inset 0 0 6px rgba(255,200,80,.15);}}
.payArrow{
    position:absolute;z-index:4;width:0;height:0;pointer-events:none;top:48.6%;transform:translateY(-50%);
    border-top:calc(var(--H) * 0.013) solid transparent;border-bottom:calc(var(--H) * 0.013) solid transparent;
    filter:drop-shadow(0 0 4px rgba(255,200,80,.9));
}
.payArrow.left{left:10.6%;border-left:calc(var(--H) * 0.016) solid #ffd98a;}
.payArrow.right{right:10.6%;border-right:calc(var(--H) * 0.016) solid #ffd98a;}

/* Bulb lights — laid over the art's own bulbs */
.bulb{
    position:absolute;z-index:4;width:4.6%;aspect-ratio:1;border-radius:50%;
    transform:translate(-50%,-50%);pointer-events:none;
    background:radial-gradient(circle,rgba(40,12,0,.82) 0 34%,rgba(40,12,0,.35) 46%,transparent 58%);
    transition:background .08s linear;
}
.bulb.on{
    background:radial-gradient(circle,rgba(255,255,235,.95) 0 16%,rgba(255,215,110,.55) 32%,rgba(255,170,40,.18) 50%,transparent 66%);
    mix-blend-mode:screen;
}

/* Marquee text */
.marquee{
    position:absolute;left:12%;top:15.6%;width:76%;height:8.9%;z-index:4;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;pointer-events:none;overflow:hidden;padding:0 3%;box-sizing:border-box;
}
.mqBrand{
    font-family:Impact,'Arial Black',Arial,sans-serif;letter-spacing:.12em;
    font-size:calc(var(--H) * 0.034);line-height:1;
    background:linear-gradient(180deg,#fff6d0,#ffd05a 45%,#c07a10 55%,#ffe39a);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    filter:drop-shadow(0 0 6px rgba(255,190,60,.55));
}
.mqSub{
    margin-top:calc(var(--H) * 0.007);
    font:700 calc(var(--H) * 0.0145) Arial,sans-serif;letter-spacing:.3em;text-transform:uppercase;
    color:rgba(255,215,140,.85);
}
.mqTitle{
    font:700 calc(var(--H) * 0.0235) Georgia,'Times New Roman',serif;line-height:1.04;
    color:#fff1c4;text-shadow:0 0 10px rgba(255,190,60,.8),0 0 2px rgba(0,0,0,.9);
    display:flex;flex-direction:column;align-items:center;margin-top:calc(var(--H) * 0.004);
}
.mqLine{display:block;white-space:nowrap;}
.slotRig.win .mqTitle{animation:mqFlash .45s steps(2) 4;}
@keyframes mqFlash{50%{color:#ffd05a;text-shadow:0 0 18px rgba(255,220,120,1);}}

/* SPIN button on the lower navy panel */
.spinBtn{
    position:absolute;left:50%;top:78.1%;width:15.5%;aspect-ratio:1;z-index:6;
    transform:translate(-50%,-50%);border:none;padding:0;border-radius:50%;cursor:pointer;
    background:url('/assets/img/slot/button.webp') center/contain no-repeat;
    filter:drop-shadow(0 0 8px rgba(255,190,60,.55));
    transition:transform .08s,filter .2s;
    font-family:Impact,'Arial Black',Arial,sans-serif;font-size:calc(var(--H) * 0.02);
    letter-spacing:.08em;color:#ffe7a8;line-height:1;text-shadow:0 1px 0 #3a0008,0 0 8px rgba(255,190,60,.7);
}
.spinBtn:hover{filter:drop-shadow(0 0 14px rgba(255,200,80,.85));}
.spinBtn:active,.spinBtn.pressed{transform:translate(-50%,-50%) scale(.9);filter:drop-shadow(0 0 4px rgba(255,190,60,.4)) brightness(.85);}
.spinBtn:disabled{cursor:default;filter:grayscale(.3) brightness(.7);}
.spinBtn.play{animation:playGlow 1.2s ease-in-out infinite;border-radius:50%;}
.spinBtn .pbIcon{display:block;font-size:.75em;margin-bottom:.12em;}
@keyframes playGlow{50%{filter:drop-shadow(0 0 18px rgba(255,215,100,1)) brightness(1.12);}}
.spinBtn:focus-visible{outline:2px solid #ffd98a;outline-offset:3px;}

/* Coin payout — coins sit inside the tray, behind its front lip */
.coinLayer{position:absolute;inset:0;z-index:4;pointer-events:none;}
.coin{
    position:absolute;aspect-ratio:1;will-change:transform,opacity;
    background:url('/assets/img/slot/coins.webp') 0 0/1000% 400% no-repeat;
}
.trayLip{
    position:absolute;left:26.14%;top:87.08%;width:47.82%;height:3.59%;
    z-index:5;pointer-events:none;user-select:none;
}

/* Sound toggle in the left side panel */
.soundBtn{
    position:absolute;left:16.2%;top:81.5%;width:7%;aspect-ratio:1;z-index:4;
    transform:translate(-50%,-50%);border-radius:50%;cursor:pointer;
    background:rgba(8,14,40,.6);border:1px solid rgba(255,200,90,.55);
    color:#ffd98a;font-size:calc(var(--H) * 0.018);line-height:1;padding:0;
}
.soundBtn:focus-visible{outline:2px solid #ffd98a;outline-offset:2px;}

.slotHint{
    position:absolute;left:40.93%;bottom:-0.2%;transform:translate(-50%,100%);
    font:400 calc(var(--H) * 0.012) Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;
    color:rgba(255,190,110,.45);white-space:nowrap;pointer-events:none;
}

@media (prefers-reduced-motion: reduce){
    .slotRig,.slotBurst{transition:none;}
    .slotRig.win .slotBurst{animation-duration:.01s;}
    .reelStrip.blur{filter:none;}
}