/* Ganja Gold — scene styles from the studio build (Wind Game Soft), WGP1 integration 02.11.2026:
   no provider loader / intro / PlayUI copy; one 1920x1080 scene laid out above the WIND GAME PlayUI bar (game.js layout()),
   overlays in their own full-screen layer, portrait reel column for phones, server notice panel. Fonts: fonts/fonts.css. */
:root{--k:1;--ks:.5;--g1:#b6ff3b;--g2:#4fd61b;--pur:#2a0b45;--ink:#1a0628}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#12041f;color:#fff;font-family:'Roboto Condensed',Arial,sans-serif;-webkit-user-select:none;user-select:none;-webkit-text-size-adjust:100%}
img{-webkit-user-drag:none;user-select:none}
#viewport{position:fixed;inset:0;overflow:hidden;background:#12041f;touch-action:manipulation}
#viewport::before{content:"";position:absolute;inset:-60px;background:url(img/bg.webp) center/cover no-repeat;filter:blur(24px) brightness(.55)}
#stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;overflow:visible;z-index:1}
#cam{position:absolute;inset:0;transform-origin:var(--cx,970px) var(--cy,442px);transition:transform .7s cubic-bezier(.3,.7,.25,1)}
#cam.zoom{transform:scale(1.08);transition:transform 1.1s cubic-bezier(.45,0,.25,1)}
#machine{position:absolute;left:0;top:0;width:1920px;height:1080px}
#bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#wind{position:absolute;left:-700px;top:-300px;width:3320px;height:1680px;pointer-events:none}
#logo{position:absolute;left:135px;top:-20px;width:385px;filter:drop-shadow(0 10px 18px rgba(0,0,0,.5));transform-origin:50% 0;animation:logoSwing 5s ease-in-out infinite;z-index:3}
@keyframes logoSwing{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
/* ---------- side box: everything sits inside the dark window of the frame ---------- */
.side{position:absolute;left:40px;top:330px;width:410px;height:370px;background:url(img/panel.webp) center/100% 100% no-repeat;filter:drop-shadow(0 12px 20px rgba(0,0,0,.55))}
.side-in{position:absolute;left:14%;right:14%;top:20%;bottom:19%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;overflow:hidden}
.side-in[hidden]{display:none}
.side-t{font:400 27px/1.05 'Dela Gothic One';color:var(--g1);-webkit-text-stroke:2px var(--ink);paint-order:stroke;text-shadow:0 3px 0 #2d7a0e}
.side-x{height:50px;filter:drop-shadow(0 3px 5px rgba(0,0,0,.5));animation:sideX 2.6s ease-in-out infinite}
@keyframes sideX{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.side-s{display:flex;align-items:center;gap:6px;font:400 15px/1.35 'Dela Gothic One';color:#e9dcff;text-align:left;-webkit-text-stroke:1px var(--ink);paint-order:stroke}
.side-s b{font-weight:400;color:var(--g1)}
.side-fs{position:relative;width:54px;height:54px;flex:none;animation:bob 3s ease-in-out infinite}
.side-fs img{position:absolute;width:100%;left:0;top:0}
.side-fs img.f,.side-fs img.s{width:auto;height:46%;top:42%}
.side-fs img.f{left:18%;transform:rotate(-9deg)}.side-fs img.s{left:47%;top:44%;transform:rotate(-9deg)}
.side-l{font:400 22px 'Dela Gothic One';letter-spacing:.06em;color:#f3eaff;-webkit-text-stroke:2px var(--ink);paint-order:stroke;text-shadow:0 3px 0 #5e1f9a}
.side-l.sm{font-size:17px;margin-top:4px;color:#d9c6ff}
.side-n{display:flex;justify-content:center;max-width:100%}
.side-n .num{--nh:66px}
.side-n.w .num{--nh:40px}
.side-n.pop .num{animation:pop .5s cubic-bezier(.3,1.6,.5,1)}

/* ---------- reels ---------- */
#reelBack{position:absolute;left:540px;top:80px;width:860px;height:725px;background:#3a1060}
#grid{position:absolute;left:562px;top:102px;width:816px;height:680px;overflow:hidden}
#frame{position:absolute;left:460px;top:18px;width:1000px;pointer-events:none;filter:drop-shadow(0 18px 24px rgba(0,0,0,.55))}
.tile{position:absolute;width:132px;height:132px;border-radius:12px;overflow:hidden;background:radial-gradient(90% 90% at 50% 40%,#3c1661 0%,#2b0d48 70%,#230a3c 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.05),inset 0 -3px 6px rgba(0,0,0,.35);transition:box-shadow .3s,background .3s}
.tile.mk{box-shadow:inset 0 0 0 3px rgba(182,255,59,.32),inset 0 0 22px rgba(120,255,60,.2)}
.tile.mx{background:radial-gradient(90% 90% at 50% 45%,#4a2a5e 0%,#2e1240 75%)}
.tile.h1{box-shadow:inset 0 0 0 3px rgba(182,255,59,.45),inset 0 0 28px rgba(120,255,60,.3)}
.tile.h2{box-shadow:inset 0 0 0 3px rgba(255,214,64,.5),inset 0 0 32px rgba(255,190,40,.35)}
.tile.h3{box-shadow:inset 0 0 0 3px rgba(255,90,200,.55),inset 0 0 36px rgba(255,60,180,.4)}
/* multiplier tag: sprite, dim, BEHIND the symbol */
.tile .mt{position:absolute;left:50%;top:50%;width:118px;height:auto;max-height:70px;object-fit:contain;transform:translate(-50%,-50%);opacity:.55;pointer-events:none}
.tile .mt.pop{animation:spotPop .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes spotPop{0%{transform:translate(-50%,-50%) scale(1.35);opacity:1;filter:brightness(1.8)}100%{transform:translate(-50%,-50%) scale(1);opacity:.55}}

.sym{position:absolute;left:0;top:0;width:136px;height:136px;will-change:transform;z-index:2}
.sym .bob{position:absolute;inset:4px;animation:bob 3.2s ease-in-out var(--d,0s) infinite}
.sym img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* gloss: barely visible */
.sym .shine{position:absolute;inset:0;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;
  background:linear-gradient(115deg,transparent 44%,rgba(255,255,255,.16) 50%,transparent 56%) no-repeat;background-size:260% 100%;background-position:160% 0;
  mix-blend-mode:screen;animation:shine 9s ease-in-out var(--d2,0s) infinite}
@keyframes shine{0%,78%{background-position:160% 0}96%,100%{background-position:-60% 0}}
/* all idle motion is small and smooth */
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.sym.lt .bob{animation:hop 3.4s ease-in-out var(--d,0s) infinite;transform-origin:50% 92%}
@keyframes hop{0%,55%,100%{transform:translateY(0) scale(1,1)}64%{transform:translateY(0) scale(1.02,.98)}74%{transform:translateY(-3px) scale(.99,1.015)}84%{transform:translateY(0) scale(1.01,.99)}92%{transform:none}}
.sym.s-leaf .bob{animation:sway 3.6s ease-in-out var(--d,0s) infinite;transform-origin:50% 88%}
.sym.s-leaf .bob img{animation:rustle 1.7s ease-in-out var(--d,0s) infinite;transform-origin:50% 80%}
@keyframes sway{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
@keyframes rustle{0%,100%{transform:skewX(0) scale(1,1)}25%{transform:skewX(1.2deg) scale(1.01,.995)}50%{transform:skewX(-.6deg) scale(.995,1.008)}75%{transform:skewX(.8deg) scale(1.006,.997)}}
.sym.s-chain .bob{animation:swing 3.2s ease-in-out var(--d,0s) infinite;transform-origin:50% 6%}
@keyframes swing{0%,100%{transform:rotate(-2.2deg)}50%{transform:rotate(2.2deg)}}
.sym.s-cash .bob{animation:cash 3.4s ease-in-out var(--d,0s) infinite}
@keyframes cash{0%,62%,100%{transform:none}68%{transform:rotate(-1.4deg) scale(1.01)}74%{transform:rotate(1.4deg) scale(1.01)}80%{transform:rotate(-.6deg)}86%{transform:none}}
.sym.s-bong .bob{animation:wob 3.2s ease-in-out var(--d,0s) infinite;transform-origin:50% 95%}
@keyframes wob{0%,100%{transform:scale(1,1)}25%{transform:scale(1.012,.99)}50%{transform:scale(.993,1.01) translateY(-1px)}75%{transform:scale(1.006,.995)}}
.sym .bub{position:absolute;left:40%;top:62%;width:7px;height:7px;border-radius:50%;background:rgba(255,220,255,.6);box-shadow:0 0 5px #e7a6ff;animation:bub 2.8s ease-in infinite;opacity:0}
.sym .bub+.bub{left:52%;animation-delay:1.4s;width:5px;height:5px}
@keyframes bub{0%{transform:translateY(0);opacity:0}20%{opacity:.7}100%{transform:translateY(-26px);opacity:0}}
/* powder bag: a soft shake now and then */
.sym.s-powder .bob{animation:shake 3.8s ease-in-out var(--d,0s) infinite;transform-origin:50% 90%}
@keyframes shake{0%,70%,100%{transform:none}73%{transform:rotate(-1.3deg) translateX(-1px)}76%{transform:rotate(1.3deg) translateX(1px)}79%{transform:rotate(-.8deg)}82%{transform:rotate(.5deg)}85%{transform:none}}
.sym .dust{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;opacity:0;box-shadow:0 0 4px #fff;animation:dust 3.8s ease-out var(--d,0s) infinite}
.sym .dust:nth-of-type(2){left:46%!important;animation-delay:calc(var(--d,0s) + .12s)}
.sym .dust:nth-of-type(3){left:62%!important;animation-delay:calc(var(--d,0s) + .24s)}
@keyframes dust{0%,72%{opacity:0;transform:none}76%{opacity:.8}92%{opacity:0;transform:translateY(-10px)}100%{opacity:0}}
/* weed bag: buds wobble inside, specks drift */
.sym.s-weed .bob{animation:bagSway 4s ease-in-out var(--d,0s) infinite;transform-origin:50% 92%}
@keyframes bagSway{0%,100%{transform:rotate(-.9deg)}50%{transform:rotate(.9deg) translateY(-1px)}}
.sym .spk{position:absolute;width:4px;height:4px;border-radius:50%;background:#c9ff6a;box-shadow:0 0 3px #9dff2f;opacity:.75;animation:spk 2.6s ease-in-out infinite}
@keyframes spk{0%,100%{transform:translate(0,0)}33%{transform:translate(3px,-4px)}66%{transform:translate(-3px,-2px)}}
/* TNT: fuse sparkle */
.sym.s-tnt .bob{animation:tnt 1.6s ease-in-out infinite;transform-origin:50% 90%}
@keyframes tnt{0%,100%{transform:none}50%{transform:scale(1.015,.99)}}
.sym .spark{position:absolute;left:66%;top:2%;width:30%;height:30%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,200,.95),rgba(255,170,30,.5) 40%,rgba(255,120,0,0) 70%);mix-blend-mode:screen;animation:spark .35s steps(2) infinite}
@keyframes spark{0%{opacity:.6;transform:scale(.85) rotate(0)}100%{opacity:1;transform:scale(1.15) rotate(45deg)}}
.sym.s-tnt.lit .bob{animation:tntShake .09s linear infinite}
@keyframes tntShake{0%{transform:translate(-2px,1px) rotate(-2deg)}50%{transform:translate(2px,-1px) rotate(2deg)}100%{transform:translate(-1px,0)}}
.blast{position:absolute;width:408px;height:408px;pointer-events:none;border-radius:50%;z-index:6;
  background:radial-gradient(circle,rgba(255,255,220,1) 0%,rgba(255,200,60,.9) 22%,rgba(255,90,20,.6) 45%,rgba(140,30,160,0) 70%);mix-blend-mode:screen;animation:blast .6s ease-out forwards}
@keyframes blast{0%{transform:scale(.2);opacity:1}60%{opacity:.9}100%{transform:scale(1.25);opacity:0}}
#machine.quake{animation:quake .45s linear}
@keyframes quake{0%,100%{transform:none}20%{transform:translate(-9px,5px)}40%{transform:translate(8px,-6px)}60%{transform:translate(-5px,3px)}80%{transform:translate(3px,0)}}
/* joint: smouldering ember + looping smoke */
.sym.s-joint .bob{animation:bob 3.6s ease-in-out var(--d,0s) infinite}
.sym .ember{position:absolute;left:4%;top:61%;width:26%;height:26%;border-radius:50%;background:radial-gradient(circle,rgba(255,230,120,.9) 0%,rgba(255,120,20,.6) 35%,rgba(255,60,0,0) 70%);mix-blend-mode:screen;animation:ember 1.8s ease-in-out infinite}
@keyframes ember{0%,100%{opacity:.5;transform:scale(.9)}50%{opacity:.95;transform:scale(1.08)}}
.sym .smk{position:absolute;left:8%;top:52%;width:22%;height:22%;border-radius:50%;background:radial-gradient(circle,rgba(235,225,255,.45) 0%,rgba(220,210,255,0) 70%);filter:blur(2px);animation:smoke 4.2s linear infinite;opacity:0}
.sym .smk:nth-of-type(2){animation-delay:1.4s}.sym .smk:nth-of-type(3){animation-delay:2.8s}
@keyframes smoke{0%{transform:translate(0,0) scale(.5);opacity:0}15%{opacity:.7}50%{transform:translate(-10px,-36px) scale(1.25)}100%{transform:translate(5px,-80px) scale(2);opacity:0}}
/* scatter: F and S written over the bottle, gently floating in turn */
.sym.s-fs .f,.sym.s-fs .s{position:absolute;width:auto;height:46%;inset:auto;filter:drop-shadow(0 3px 2px rgba(0,0,0,.45));transform-origin:50% 85%}
.sym.s-fs .f{left:18%;top:42%;animation:fsF 2.8s ease-in-out infinite}
.sym.s-fs .s{left:47%;top:44%;animation:fsS 2.8s ease-in-out infinite}
@keyframes fsF{0%,100%{transform:translateY(0) rotate(-9deg)}25%{transform:translateY(-4px) rotate(-7deg) scale(1.03)}50%{transform:translateY(0) rotate(-9deg)}}
@keyframes fsS{0%,50%,100%{transform:translateY(0) rotate(-9deg)}75%{transform:translateY(-4px) rotate(-11deg) scale(1.03)}}
.sym.s-fs .bob{animation:bottle 4s ease-in-out infinite;transform-origin:50% 95%}
@keyframes bottle{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg) translateY(-1px)}}
.sym.s-fs.land .bob{animation:land .8s cubic-bezier(.33,1.4,.5,1)}
@keyframes land{0%{transform:scale(1.18,.84)}40%{transform:scale(.96,1.06) translateY(-8px)}100%{transform:none}}
/* trigger: F swells, then S swells, then F settles, then S settles — smooth */
.sym.s-fs.trig .f{animation:fsBigF 2.2s cubic-bezier(.45,0,.55,1) 2}
.sym.s-fs.trig .s{animation:fsBigS 2.2s cubic-bezier(.45,0,.55,1) 2}
.sym.s-fs.trig .bob{animation:trigGlow 1.1s ease-in-out infinite alternate}
@keyframes trigGlow{from{filter:drop-shadow(0 0 6px #c35bff)}to{filter:drop-shadow(0 0 16px #c35bff) drop-shadow(0 0 26px rgba(182,255,59,.7))}}
@keyframes fsBigF{0%{transform:rotate(-9deg) scale(1)}22%{transform:translateY(-10px) rotate(-12deg) scale(1.55)}55%{transform:translateY(-10px) rotate(-7deg) scale(1.55)}78%,100%{transform:rotate(-9deg) scale(1)}}
@keyframes fsBigS{0%,22%{transform:rotate(-9deg) scale(1)}44%{transform:translateY(-10px) rotate(-6deg) scale(1.55)}78%{transform:translateY(-10px) rotate(-11deg) scale(1.55)}100%{transform:rotate(-9deg) scale(1)}}

.sym.win .bob{animation:winPulse .5s ease-in-out infinite alternate;filter:drop-shadow(0 0 10px #b6ff3b) drop-shadow(0 0 22px rgba(182,255,59,.7))}
@keyframes winPulse{from{transform:scale(1)}to{transform:scale(1.12)}}
.sym.boom{animation:boom .32s ease-in forwards}
@keyframes boom{0%{transform:var(--t) scale(1.12);opacity:1;filter:brightness(1.6)}100%{transform:var(--t) scale(1.6);opacity:0;filter:brightness(3) blur(3px)}}
.puff{position:absolute;width:136px;height:136px;pointer-events:none;border-radius:50%;background:radial-gradient(circle,rgba(220,255,160,.9) 0%,rgba(140,255,60,.35) 40%,rgba(120,255,60,0) 70%);animation:puff .45s ease-out forwards}
@keyframes puff{0%{transform:scale(.3);opacity:1}100%{transform:scale(1.5);opacity:0}}
.clw{position:absolute;transform:translate(-50%,-50%);font:400 34px 'Dela Gothic One';color:#fff;-webkit-text-stroke:3px #1a0628;paint-order:stroke;text-shadow:0 3px 0 #2d7a0e;white-space:nowrap;pointer-events:none;animation:clw 1.1s ease-out forwards;z-index:5}
.clw em{font-style:normal;color:#ffd84a}
@keyframes clw{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}80%{opacity:1;transform:translate(-50%,-80%) scale(1)}100%{opacity:0;transform:translate(-50%,-100%)}}

/* ---------- win amount (sprite digits) ---------- */
.num{display:flex;align-items:flex-end;justify-content:center;gap:0;filter:drop-shadow(0 6px 10px rgba(0,0,0,.55))}
.num img{height:var(--nh,90px);margin:0 -.02em}
.num img.c{height:calc(var(--nh,90px)*.44);margin:0 .02em .04em}
.num .sp{width:calc(var(--nh,90px)*.3)}
.num .cur{font:400 calc(var(--nh,90px)*.62) 'Dela Gothic One','Roboto Condensed',Arial,sans-serif;color:var(--g1);-webkit-text-stroke:calc(var(--nh,90px)*.05) #1a0628;paint-order:stroke;margin-left:.15em;line-height:1;padding-bottom:.08em}
#reelWin{position:absolute;left:562px;top:102px;width:816px;height:680px;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:6}
#reelWin .num{--nh:110px;opacity:0}
#reelWin .num.show{animation:rw 1.3s ease-out forwards}
@keyframes rw{0%{opacity:0;transform:scale(.4)}14%{opacity:1;transform:scale(1.12)}24%{transform:scale(1)}78%{opacity:1}100%{opacity:0;transform:scale(1.05) translateY(-14px)}}
#winLine{position:absolute;left:560px;top:880px;width:820px;height:56px;display:flex;align-items:center;justify-content:center}
#winLbl{font:400 32px 'Dela Gothic One';letter-spacing:.04em;color:#f3eaff;-webkit-text-stroke:2px #1a0628;paint-order:stroke;text-shadow:0 3px 0 #5e1f9a,0 0 18px rgba(170,90,255,.6);white-space:nowrap}
#winLbl b{font-weight:400;color:var(--g1);text-shadow:0 3px 0 #2d7a0e,0 0 18px rgba(182,255,59,.55)}
#winLbl.bump{animation:pop .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:scale(1.25)}100%{transform:scale(1)}}

/* ---------- character (above everything in the scene) ---------- */
/* ---------- character (above everything in the scene) ---------- */
#boss{position:absolute;left:1352px;top:328px;width:600px;height:698px;z-index:20;pointer-events:none;transform-origin:50% 100%}
#boss canvas{width:100%;height:100%;filter:drop-shadow(0 16px 18px rgba(0,0,0,.55))}
#boss.hype{animation:hype .9s cubic-bezier(.3,1.5,.5,1) 2}
@keyframes hype{0%,100%{transform:none}30%{transform:translateY(-36px) scale(1.04,.97)}55%{transform:translateY(0) scale(1.05,.94)}75%{transform:scale(.98,1.03)}}

/* ---------- overlays: full-screen layer above the PlayUI bar; .ovs = the 1920x1080 art box scaled by --ks ---------- */
#top{position:fixed;inset:0;z-index:100;pointer-events:none;overflow:hidden}
.ovs{position:absolute;left:50%;top:50%;width:1920px;height:1080px;transform:translate(-50%,-50%) scale(var(--ks));pointer-events:none}
#rainBox{z-index:5}
#rain{position:absolute;left:-700px;top:-300px;width:3320px;height:1680px;pointer-events:none}
.ov{position:absolute;inset:0;pointer-events:auto;cursor:pointer}
.ov[hidden]{display:none}
#bigwin{transition:opacity .55s;background:radial-gradient(circle at 50% 45%,rgba(60,10,90,.55),rgba(5,0,10,.85))}
#bigwin.fade{opacity:0}
.bw-title{position:absolute;left:50%;top:250px;width:1080px;transform:translateX(-50%);filter:drop-shadow(0 14px 22px rgba(0,0,0,.6))}
.bw-title.in{animation:bwIn .8s cubic-bezier(.25,1.6,.45,1)}
.bw-title.loop{animation:bwLoop 1.6s ease-in-out infinite}
@keyframes bwIn{0%{transform:translateX(-50%) scale(.1) rotate(-10deg);opacity:0}100%{transform:translateX(-50%) scale(1);opacity:1}}
@keyframes bwLoop{0%,100%{transform:translateX(-50%) scale(1) rotate(-1.5deg)}50%{transform:translateX(-50%) scale(1.05) rotate(1.5deg)}}
.bw-num{position:absolute;left:0;right:0;top:640px;display:flex;justify-content:center}
.bw-num .num{--nh:150px}
.bw-tap{position:absolute;left:0;right:0;bottom:90px;text-align:center;font:400 34px 'Dela Gothic One';color:#f6e7d0;-webkit-text-stroke:2px #1a0628;paint-order:stroke;opacity:.8}

#popup{background:rgba(15,2,25,.45);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:background .6s,backdrop-filter .6s}
.pp-box{position:absolute;left:50%;top:175px;width:1180px;height:650px;transform:translateX(-50%)}
.pp-panel{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 22px 40px rgba(0,0,0,.6))}
.pp-title{position:absolute;left:50%;top:-140px;width:560px;transform:translateX(-50%);filter:drop-shadow(0 10px 16px rgba(0,0,0,.55));animation:ppT 2.4s ease-in-out infinite}
.pp-title.wide{width:640px;top:-178px}
@keyframes ppT{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.04) rotate(-1deg)}}
.pp-in{position:absolute;inset:150px 120px 110px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;text-align:center}
.pp-big{font:400 54px/1.1 'Dela Gothic One';color:var(--g1);-webkit-text-stroke:3px #1a0628;paint-order:stroke;text-shadow:0 5px 0 #2d7a0e,0 0 24px rgba(182,255,59,.45)}
.pp-big b{font-weight:400;color:#ffd84a;text-shadow:0 5px 0 #a2620a}
.pp-txt{font:700 30px/1.3 'Roboto Condensed';color:#eadcff;text-shadow:0 2px 4px rgba(0,0,0,.8);max-width:820px}
.pp-txt b{color:#ffd84a}
.pp-in .num{--nh:140px}
.pp-tap{position:absolute;left:0;right:0;bottom:70px;text-align:center;font:400 44px 'Dela Gothic One';color:#f6e7d0;-webkit-text-stroke:3px #1a0628;paint-order:stroke;text-shadow:0 4px 0 #5e1f9a;animation:tap 1.6s ease-in-out infinite}
@keyframes tap{0%,100%{opacity:.65;transform:scale(.97)}50%{opacity:1;transform:scale(1.02)}}
#popup.in .pp-box{animation:ppIn .7s cubic-bezier(.25,1.5,.45,1)}
@keyframes ppIn{0%{transform:translateX(-50%) scale(.3);opacity:0}100%{transform:translateX(-50%) scale(1);opacity:1}}
#popup.out .pp-box,#popup.out .pp-tap{transition:transform .45s ease-in,opacity .45s;transform:translateX(-50%) scale(.6);opacity:0}
#popup.out .pp-tap{transform:none}
#popup.out{background:rgba(15,2,25,0);backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}

#banner{display:flex;align-items:center;justify-content:center;pointer-events:none;cursor:default}
#banner .ban{font:400 86px 'Dela Gothic One';color:var(--g1);-webkit-text-stroke:4px #1a0628;paint-order:stroke;text-shadow:0 7px 0 #2d7a0e,0 0 40px rgba(182,255,59,.6);animation:ban 1.8s cubic-bezier(.25,1.4,.45,1) forwards;white-space:nowrap}
@keyframes ban{0%{transform:scale(.2);opacity:0}20%{transform:scale(1.08);opacity:1}30%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:scale(1.1)}}
#banner .ovs{display:flex;align-items:center;justify-content:center}

/* iris: a black ring that closes to the centre and opens again */
#iris{position:fixed;inset:0;z-index:300;pointer-events:none;overflow:hidden;display:none}
#iris.on{display:block;pointer-events:auto}
#iris i{position:absolute;left:50%;top:50%;width:var(--r,300vmax);height:var(--r,300vmax);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 300vmax #000}

/* ---------- Total Win: the game's own background, no frame ---------- */
#total{background:#12041f url(img/bg.webp) center/cover;transition:opacity .5s}
#total.fade{opacity:0}
.tw-word{position:absolute;left:50%;top:210px;width:1200px;height:287px;transform:translateX(-50%)}
.tw-word img{position:absolute;left:0;top:0;width:100%;opacity:0;filter:drop-shadow(0 12px 18px rgba(0,0,0,.55))}
.tw-word img.in{animation:twIn .9s cubic-bezier(.22,1.5,.4,1) .2s both,twFloat 3s ease-in-out 1.1s infinite}
@keyframes twIn{0%{opacity:0;transform:scale(.15) rotate(-8deg)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes twFloat{0%,100%{transform:translateY(0) scale(1);opacity:1}50%{transform:translateY(-12px) scale(1.035);opacity:1}}
.tw-num{position:absolute;left:0;right:0;top:560px;display:flex;justify-content:center}
.tw-num .num{--nh:170px}
.tw-num.pop .num{animation:pop .5s cubic-bezier(.3,1.6,.5,1)}
.tw-sub{position:absolute;left:0;right:0;top:770px;text-align:center;font:400 34px 'Dela Gothic One';color:#f3eaff;-webkit-text-stroke:2px #1a0628;paint-order:stroke;text-shadow:0 3px 0 #5e1f9a}
#total .pp-tap{opacity:0;animation:none}
#total.ready .pp-tap{animation:tap 1.6s ease-in-out infinite}

/* ---------- bonus-buy card pictures (WIND GAME PlayUI cards) ---------- */
.gg-ci{position:relative;width:210px;height:118px;isolation:isolate;z-index:0;margin:0 auto}
.gg-ci img{position:absolute}
.gg-ci .b{position:absolute;width:84px;height:84px;top:22px}
.gg-ci .b img{position:absolute;left:0;top:0;width:100%}
.gg-ci .b img.f,.gg-ci .b img.s{width:auto;height:46%;top:42%;transform:rotate(-9deg)}
.gg-ci .b img.f{left:18%}.gg-ci .b img.s{left:47%;top:44%}
.gg-ci .b1{left:6px;transform:rotate(-14deg)}.gg-ci .b2{left:63px;top:10px;width:90px;height:90px;z-index:1}.gg-ci .b3{left:122px;transform:rotate(14deg)}
.gg-ci .b4{left:150px;top:30px;width:66px;height:66px;transform:rotate(20deg)}
.gg-ci .x{left:50%;bottom:-6px;height:48px;transform:translateX(-50%);z-index:3;filter:drop-shadow(0 3px 4px #000)}
.gg-ci .t{left:-6px;top:36px;width:74px;z-index:2;transform:rotate(-10deg)}
.gg-ci .gb{left:50%;bottom:-8px;width:150px;transform:translateX(-50%);z-index:3}
.gg-ci .chance{position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);z-index:3;font:400 34px 'Dela Gothic One';color:#b6ff3b;-webkit-text-stroke:3px #1a0628;paint-order:stroke;white-space:nowrap}
.pu-ic .gg-ci,.pu-fi .gg-ci{transform:scale(.3);transform-origin:0 0}
.pu-cards{align-items:stretch!important}
.pu-card{display:flex!important;flex-direction:column!important}
.pu-card p{flex:1 1 auto}
.pu-card .pu-buy{margin-top:auto!important}

/* ---------- WGP1 (02.11.2026): portrait reel column, server notices, privacy ---------- */
body.gg-portrait #boss{display:none}
body.gg-portrait #logo{left:1000px;top:-6px;width:450px}
body.gg-portrait #sideBox{left:450px;top:22px;transform:scale(.7);transform-origin:0 0}
body.gg-portrait #machine{top:300px}
.gg-net{position:fixed;z-index:1200;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,calc(100vw - 32px));box-sizing:border-box;padding:20px;background:#1d1028f5;border:1px solid #5a3577;border-radius:18px;box-shadow:0 12px 50px #000b;color:#f6f0fa;font:400 15px/1.5 Arimo,Arial,sans-serif;display:flex;flex-wrap:wrap;gap:10px}
.gg-net[hidden],.gg-net [hidden]{display:none!important}
.gg-net p{flex:1 1 100%;margin:0 0 4px}
.gg-net button,.gg-net a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border:0;padding:10px 16px;border-radius:12px;background:#ed174d;color:#fff;font:700 15px Arimo,Arial,sans-serif;text-decoration:none;cursor:pointer}
.gg-net #netCancel,.gg-net #netClose{background:#2a1838;box-shadow:inset 0 0 0 1px #5a3577}
html.wgp-hide-rub #reelWin,html.wgp-hide-rub #winLbl b,html.wgp-hide-rub #fsWin,html.wgp-hide-rub #bwNum,html.wgp-hide-rub #twNum,html.wgp-hide-rub .clw,html.wgp-hide-rub .pp-in .num{visibility:hidden!important}
@media (prefers-reduced-motion:reduce){#logo,.pp-title,.tw-word img.in,.bw-title.loop{animation:none}}
/* phones in portrait: the overlay art box is narrow, so its texts get larger */
body.gg-portrait .pp-in{inset:120px 80px 80px;gap:14px}
body.gg-portrait .pp-big{font-size:62px}
body.gg-portrait .pp-txt{font-size:40px;max-width:980px}
body.gg-portrait .pp-tap,body.gg-portrait .bw-tap{font-size:54px}
body.gg-portrait .tw-sub{font-size:50px}
/* streamer privacy (WGPlay applyPrivacy -> html.wgp-hide-x): the scene's own x-values are hidden too */
html.wgp-hide-x .clw em,html.wgp-hide-x .tile .mt,html.wgp-hide-x .side-x,html.wgp-hide-x .gg-ci .x{visibility:hidden!important}