:root{
  --gold:#e8b84a; --gold2:#ffe7a0; --gold3:#9a6a14;
  --deep:#1a0510; --velvet:#3a0a1e; --plum:#5a1240; --ink:#12030a;
  --ui:'Lilita One', 'Arial Black', Impact, sans-serif;
  --deco:'Cinzel Decorative', Georgia, serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{touch-action:manipulation;background:var(--ink);color:#fff;font-family:var(--ui);-webkit-tap-highlight-color:transparent}
button{touch-action:manipulation;font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
button:disabled{cursor:default}

#game{position:relative;width:100%;height:100vh;height:100svh;overflow:hidden;
  background:radial-gradient(ellipse at 50% 35%, #6b1748 0%, #3a0a1e 45%, #14030b 100%)}
#stage{position:absolute;left:0;top:0;transform-origin:0 0;user-select:none;-webkit-user-select:none}
#stage.P{width:1080px;height:1980px}
#stage.L{width:1920px;height:1100px}
#stage > *{position:absolute}
#bgpat{inset:0;opacity:.13;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23e8b84a' stroke-width='2'%3E%3Crect x='35' y='35' width='50' height='50'/%3E%3Crect x='35' y='35' width='50' height='50' transform='rotate(45 60 60)'/%3E%3Ccircle cx='60' cy='60' r='12'/%3E%3Cpath d='M0 0L25 25M120 0L95 25M0 120L25 95M120 120L95 95'/%3E%3C/g%3E%3C/svg%3E");
  background-size:120px 120px}

/* ---------- LOGO / HERO ---------- */
#logo{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;filter:drop-shadow(0 6px 0 #4a0c24) drop-shadow(0 0 30px rgba(232,184,74,.35))}
#logo .lg1{font-family:var(--deco);font-weight:900;line-height:1;letter-spacing:4px;
  background:linear-gradient(180deg,#fff6cf 0%,#ffd86b 40%,#c98a1c 70%,#ffe08a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:3px #5a1a08}
#logo .lg2{font-family:var(--ui);color:#fff;letter-spacing:10px;text-shadow:0 0 18px #ff4fa8,0 4px 0 #6b1748}
#hero{transform-origin:50% 80%}
#hero img{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 0 30px rgba(255,79,168,.45))}

#status{display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;
  text-shadow:0 3px 0 #4a0c24,0 0 14px rgba(255,200,90,.7);letter-spacing:2px}
#status .g{color:var(--gold2)}

/* ---------- BOARD ---------- */
#frame{padding:10px;border-radius:22px;background:linear-gradient(180deg,#ffe08a,#c98a1c 40%,#7a4a0a 60%,#ffd86b);
  box-shadow:0 0 0 4px #3a0a1e,0 18px 50px rgba(0,0,0,.6),0 0 60px rgba(232,184,74,.25)}
#board{position:relative;width:100%;height:100%;overflow:hidden;border-radius:14px;
  background:
   repeating-linear-gradient(90deg,transparent 0 calc(20% - 2px),rgba(232,184,74,.18) calc(20% - 2px) 20%),
   radial-gradient(ellipse at 50% 30%,#5a1240 0%,#2e0718 80%)}
.cell{position:absolute;width:20%;height:25%;padding:3.5%}
.cell img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;filter:drop-shadow(0 6px 6px rgba(0,0,0,.45))}
.cell.kc,.cell.kb{padding:1.2%;z-index:2}
.cell.kc img,.cell.kb img{border-radius:12%;box-shadow:0 0 0 3px var(--gold),0 0 16px rgba(232,184,74,.7)}
.cell.kb img{box-shadow:0 0 0 3px #ff5fb5,0 0 18px rgba(255,95,181,.8)}
.cell .mx{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font-size:56px;color:#fff;
  -webkit-text-stroke:3px #2a0518;text-shadow:0 4px 0 #2a0518,0 0 12px #fff}
.L .cell .mx{font-size:52px}
.cell.hit::before{content:'';position:absolute;inset:3%;border-radius:6%;
  background:radial-gradient(circle,rgba(120,240,255,.28),rgba(120,240,255,0) 72%);
  box-shadow:inset 0 0 0 4px #7ff3ff,inset 0 0 18px rgba(127,243,255,.8),0 0 18px #2fd8ff;
  animation:pulse .45s ease-in-out infinite alternate}
.cell.hit img{animation:wob .45s ease-in-out infinite alternate}
.cell.land img{animation:landPop .5s ease-out}
@keyframes pulse{from{opacity:.6}to{opacity:1}}
@keyframes wob{from{transform:scale(1)}to{transform:scale(1.1)}}
@keyframes landPop{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
.spark{position:absolute;width:14px;height:14px;border-radius:3px;pointer-events:none}

/* ---------- MESSAGE ---------- */
#msg{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;line-height:1.05;
  text-shadow:0 4px 0 #4a0c24,0 0 16px rgba(0,0,0,.6);letter-spacing:1px}
#msg.win{color:var(--gold2);text-shadow:0 4px 0 #6b3a00,0 0 20px rgba(255,200,90,.9)}

/* ---------- BUY BOXES ---------- */
.buy{display:flex;align-items:center;gap:16px;padding:14px;border-radius:18px;text-align:center;
  background:linear-gradient(160deg,#5e4bd6 0%,#3a2a9c 55%,#251a6e 100%);
  box-shadow:inset 0 0 0 5px var(--gold),inset 0 0 0 9px #3a0a1e,0 10px 24px rgba(0,0,0,.5);transition:transform .1s,filter .2s}
.buy.super{background:linear-gradient(160deg,#d0359a 0%,#8e1a73 55%,#560e48 100%);box-shadow:inset 0 0 0 5px #ff9fd8,inset 0 0 0 9px #3a0a1e,0 10px 24px rgba(0,0,0,.5)}
.buy:active:not(:disabled){transform:scale(.97)}
.buy:disabled{filter:grayscale(.7) brightness(.6)}
.buy img{height:100%;aspect-ratio:1;border-radius:14px;box-shadow:0 0 0 3px var(--gold)}
.buy .bt{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px}
.buy b{font-weight:400;line-height:1.05;color:#fff;text-shadow:0 3px 0 #1a0a40}
.buy i{font-style:normal;color:var(--gold2);text-shadow:0 3px 0 #3a1a00}

#multBox{border-radius:18px;background:linear-gradient(180deg,#2a0618,#14030b);
  box-shadow:inset 0 0 0 5px var(--gold),inset 0 0 0 9px #3a0a1e,0 10px 24px rgba(0,0,0,.5);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center}
#multBox .mbL{font-size:28px;color:var(--gold);letter-spacing:2px}
#multVal{font-size:64px;color:#fff;text-shadow:0 0 18px #ff4fa8}
#fsWin{font-size:38px;color:var(--gold2)}
#multBox.flash{animation:flash .35s ease-in-out 3}
@keyframes flash{50%{filter:brightness(2)}}

/* ---------- CONTROLS ---------- */
#btnSpin{border-radius:50%;background:radial-gradient(circle at 50% 35%,#ffe9a8,#e8b84a 45%,#9a6a14 100%);
  box-shadow:0 0 0 8px rgba(0,0,0,.35),0 12px 30px rgba(0,0,0,.6),0 0 40px rgba(232,184,74,.5);transition:transform .1s,filter .2s}
#btnSpin svg{width:62%;height:62%;fill:#3a0a1e;stroke:#3a0a1e;stroke-width:12;stroke-linecap:round}
#btnSpin svg path{fill:none}
#btnSpin:active:not(:disabled){transform:scale(.95)}
#btnSpin{display:flex;align-items:center;justify-content:center}
#btnSpin.busy svg{display:none}
#btnSpin.busy::after{content:'';width:30%;height:30%;background:#3a0a1e;border-radius:14%}
#btnSpin:disabled:not(.busy){filter:grayscale(.6) brightness(.7)}
@keyframes rot{to{transform:rotate(360deg)}}
.rb{border-radius:50%;background:rgba(20,3,11,.75);box-shadow:inset 0 0 0 4px var(--gold);font-size:72px;line-height:1;color:#fff}
.rb:disabled{opacity:.4}

#bar{display:flex;align-items:center;gap:16px}
.sb{height:100%;min-width:100px;padding:0 18px;border-radius:40px;background:rgba(20,3,11,.75);box-shadow:inset 0 0 0 3px rgba(232,184,74,.7);font-size:30px;color:#fff}
.sb.on{background:var(--gold);color:var(--deep)}
.sb.off{opacity:.45}
#btnInfo{font-family:Georgia,serif;font-style:italic;font-weight:bold;font-size:44px;min-width:90px}
#money{flex:1;display:flex;justify-content:center;gap:40px;font-size:42px;white-space:nowrap}
#money em{font-style:normal;color:var(--gold)}
#money b{font-weight:400}

#disc{text-align:center;color:#d9b8a0;font-family:Arial,sans-serif;font-size:22px;opacity:.85}

/* ---------- PORTRAIT 1080×1980 ---------- */
.P #logo{left:20px;top:40px;width:540px;height:330px}
.P #logo .lg1{font-size:128px}
.P #logo .lg2{font-size:46px;margin-top:6px}
.P #hero{left:560px;top:20px;width:500px;height:400px}
.P #status{left:20px;top:385px;width:1040px;height:70px;font-size:46px}
.P #frame{left:30px;top:465px;width:1020px;height:820px}
.P #msg{left:20px;top:1290px;width:1040px;height:106px;font-size:56px}
.P #m2{font-size:30px}
.P #buyFs{left:40px;top:1400px;width:490px;height:170px}
.P #buySuper{left:550px;top:1400px;width:490px;height:170px}
.P .buy b{font-size:36px}.P .buy i{font-size:36px}
.P #multBox{display:none}
.P #btnMinus{left:225px;top:1625px;width:140px;height:140px}
.P #btnSpin{left:430px;top:1595px;width:220px;height:220px}
.P #btnPlus{left:715px;top:1625px;width:140px;height:140px}
.P #bar{left:20px;top:1835px;width:1040px;height:80px}
.P #money{font-size:36px;gap:28px}
.P #disc{left:0;top:1935px;width:1080px}

/* ---------- LANDSCAPE 1920×1100 ---------- */
.L #buyFs,.L #buySuper{flex-direction:column;justify-content:center;gap:10px}
.L #buyFs{left:70px;top:100px;width:360px;height:262px}
.L #buySuper{left:70px;top:385px;width:360px;height:262px}
.L .buy img{height:92px}
.L .buy b{font-size:36px}.L .buy i{font-size:38px}
.L #multBox{left:70px;top:660px;width:360px;height:250px}
.L #status{left:470px;top:22px;width:980px;height:70px;font-size:44px}
.L #frame{left:470px;top:100px;width:980px;height:788px}
.L #msg{left:470px;top:893px;width:980px;height:86px;font-size:48px}
.L #m2{font-size:26px}
.L #logo{left:1480px;top:30px;width:420px;height:250px}
.L #logo .lg1{font-size:104px}
.L #logo .lg2{font-size:40px}
.L #hero{left:1490px;top:270px;width:400px;height:350px}
.L #btnSpin{left:1590px;top:610px;width:200px;height:200px}
.L #btnMinus{left:1480px;top:665px;width:96px;height:96px;font-size:56px}
.L #btnPlus{left:1804px;top:665px;width:96px;height:96px;font-size:56px}
.L #bar{left:70px;top:985px;width:1830px;height:72px}
.L #disc{left:0;top:1066px;width:1920px}

/* free spins look */
#stage.fs #frame{background:linear-gradient(180deg,#bff7ff,#22d3c5 40%,#0b6b70 60%,#9ff0ff)}
#stage.sup #frame{background:linear-gradient(180deg,#ffd0ef,#ff5fb5 40%,#8e1a73 60%,#ffc0e6)}

/* ---------- OVERLAY / MODAL ---------- */
#ov{inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:rgba(10,2,6,.78);cursor:pointer;animation:fadeIn .25s}
#ov[hidden],#modal[hidden]{display:none}
.ovIn{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;animation:zoomIn .4s cubic-bezier(.2,1.6,.4,1)}
#ovImg{width:300px;height:300px;border-radius:30px;box-shadow:0 0 0 6px var(--gold),0 0 60px rgba(255,79,168,.7);margin-bottom:10px}
#ovTitle{font-size:84px;color:var(--gold2);text-shadow:0 6px 0 #6b3a00,0 0 30px rgba(255,200,90,.8);letter-spacing:3px}
#ovBig{font-size:170px;line-height:1;color:#fff;-webkit-text-stroke:5px #6b1748;text-shadow:0 8px 0 #3a0a1e,0 0 40px #ff4fa8;animation:beat .6s ease-in-out infinite alternate}
#ovSub{font-size:60px;color:#fff;text-shadow:0 4px 0 #3a0a1e}
#ovTap{margin-top:30px;font-size:34px;color:#fff;opacity:.7;animation:blink 1.2s infinite}
@keyframes beat{to{transform:scale(1.06)}}
@keyframes blink{50%{opacity:.25}}
@keyframes fadeIn{from{opacity:0}}
@keyframes zoomIn{from{transform:scale(.4);opacity:0}}

#modal{inset:0;z-index:30;display:flex;align-items:center;justify-content:center;background:rgba(10,2,6,.8)}
.mIn{width:min(92%,980px);max-height:88%;display:flex;flex-direction:column;border-radius:26px;background:linear-gradient(180deg,#3a0a1e,#1a0510);
  box-shadow:inset 0 0 0 5px var(--gold),0 20px 60px #000;padding:40px}
#mBody{overflow-y:auto;font-family:Arial,sans-serif;font-size:30px;line-height:1.4;color:#f3e3d3}
#mBody h3{font-family:var(--ui);font-weight:400;font-size:52px;color:var(--gold2);margin:10px 0 18px;text-align:center}
#mBody h4{font-family:var(--ui);font-weight:400;font-size:38px;color:var(--gold);margin:26px 0 10px}
#mBody p{margin-bottom:12px}
.pt{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.pt div{display:flex;align-items:center;gap:14px;background:rgba(0,0,0,.25);border-radius:14px;padding:10px}
.pt img{width:96px;height:96px;object-fit:contain}
.pt span{font-size:26px;line-height:1.35}
.pt b{color:var(--gold2)}
.mBtns{display:flex;gap:20px;justify-content:center;margin-top:28px}
.mBtns button{font-size:40px;padding:18px 50px;border-radius:50px;background:var(--gold);color:var(--deep)}
.mBtns button.no{background:rgba(255,255,255,.12);color:#fff}

#scrollHint{position:absolute;left:0;right:0;bottom:2px;text-align:center;font-family:Arial,sans-serif;font-size:11px;color:#c9a;opacity:.6;pointer-events:none}

/* ---------- BELOW THE GAME ---------- */
#below{max-width:1100px;margin:0 auto;padding:40px 18px 30px;font-family:Arial,sans-serif;color:#e8d6c6}
#below h2{font-family:var(--ui);font-weight:400;color:var(--gold);text-align:center;margin-bottom:20px;font-size:28px}
.slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.slot{min-height:250px;border:2px dashed rgba(232,184,74,.35);border-radius:14px;display:flex;align-items:center;justify-content:center;color:rgba(232,184,74,.6);text-align:center;padding:16px}
footer{margin-top:30px;text-align:center;font-size:13px;opacity:.75;line-height:1.6}

/* fictional currency sign */
svg.cur{display:inline-block;width:.78em;height:.78em;margin-right:.12em;vertical-align:-.06em;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
#ovBig svg.cur{stroke-width:3.2}
/* bigger car (wide image) */
.cell.s5 img{width:136%;height:136%;margin:-18%}
.pt img[src*="sym5"]{transform:scale(1.3)}

/* message detail line: "9× [symbol] PAYS 0.80" */
#m2{color:#fff;text-shadow:0 2px 0 #3a0a1e;display:flex;gap:28px;justify-content:center;flex-wrap:wrap}
#m2:empty{display:none}
#m2 .gp{display:inline-flex;align-items:center;gap:6px}
#m2 .gp img{height:1.5em;width:1.5em;object-fit:contain}
/* tumble win banner above the grid */
#status.tumble #statusTxt{display:inline-flex;align-items:center;gap:18px;padding:2px 34px;border-radius:40px;
  background:linear-gradient(180deg,rgba(90,18,64,.9),rgba(30,5,16,.9));box-shadow:0 0 0 3px var(--gold),0 0 26px rgba(255,210,100,.75)}
#status.tumble .tw{color:var(--gold2);font-size:.8em;letter-spacing:2px}
#status.tumble b{font-weight:400;color:#fff}
#status.pop #statusTxt{animation:tpop .5s ease-out}
@keyframes tpop{0%{transform:scale(.7);filter:brightness(2.2)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
/* explosion + floating amount */
.flare{position:absolute;width:20%;height:25%;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,rgba(255,250,210,1) 0%,rgba(255,200,80,.85) 30%,rgba(255,120,40,.35) 55%,rgba(255,120,40,0) 70%)}
.spark{border-radius:50%!important;box-shadow:0 0 8px currentColor}
.famt{position:absolute;z-index:5;pointer-events:none;white-space:nowrap;font-size:64px;color:#fff;
  -webkit-text-stroke:3px #6b3a00;text-shadow:0 4px 0 #3a1a00,0 0 18px rgba(255,210,100,.9)}
.L .famt{font-size:58px}

/* multiplier orb: bomb drop + electricity */
.cell.pending{visibility:hidden}
.bomb{position:absolute;z-index:15;pointer-events:none}
.bomb img{width:100%;height:100%;object-fit:contain;padding:7%}
#flash{inset:0;pointer-events:none;opacity:0;z-index:14;background:radial-gradient(ellipse at 50% 45%,rgba(220,240,255,.9),rgba(160,200,255,.25) 60%,rgba(0,0,0,0) 80%)}
.flare.boom{z-index:4;background:radial-gradient(circle,rgba(255,255,255,1) 0%,rgba(190,230,255,.9) 25%,rgba(140,120,255,.45) 50%,rgba(140,120,255,0) 70%)}
.cell .zap{position:absolute;left:-12%;top:-12%;width:124%;height:124%;pointer-events:none;z-index:2;overflow:visible;
  filter:drop-shadow(0 0 3px var(--zc,#9ff)) drop-shadow(0 0 9px var(--zc,#9ff))}
.cell .zap polyline{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cell .zap polyline.rg{stroke-width:1.1;opacity:.85}
.cell.landed img{animation:orbGlow 1.2s ease-in-out infinite alternate}
@keyframes orbGlow{from{filter:drop-shadow(0 0 6px var(--zc,#9ff)) brightness(1)}to{filter:drop-shadow(0 0 18px var(--zc,#9ff)) brightness(1.25)}}
.cell.landed .mx{z-index:3}
.orb-pink{--zc:#ff6fd0}.orb-blue{--zc:#4fc3ff}.orb-green{--zc:#5dff7a}.orb-red{--zc:#ff5a3c}.orb-purple{--zc:#c070ff}


/* very rare huge orbs (×200–×3000) */
.cell.huge .mx{color:#ffe7a0;font-size:48px;-webkit-text-stroke:3px #5a2a00;text-shadow:0 4px 0 #3a1a00,0 0 18px #ffd86b}
.cell.huge{--zc:#ffd86b}

/* ================= FREE SPINS LOOK (fire theme + panel) ================= */
#fsBg{inset:0;opacity:0;pointer-events:none;transition:opacity .8s;
  background:
    radial-gradient(ellipse 70% 40% at 30% 8%,rgba(255,120,110,.45),rgba(255,120,110,0) 70%),
    radial-gradient(ellipse 60% 35% at 75% 12%,rgba(255,90,80,.4),rgba(255,90,80,0) 70%),
    radial-gradient(ellipse 120% 60% at 50% 100%,#e8323a 0%,#a0101c 40%,rgba(90,6,14,0) 78%),
    linear-gradient(180deg,#d42a2a 0%,#a3121c 30%,#6e0814 62%,#33030a 100%)}
#stage.fsOn #fsBg{opacity:1}
@keyframes fireFlick{from{filter:brightness(1) saturate(1)}to{filter:brightness(1.12) saturate(1.15)}}
#stage.fsOn #bgpat{opacity:.08}
body.fsOn #game{background:linear-gradient(180deg,#d42a2a 0%,#a3121c 30%,#6e0814 62%,#33030a 100%)}
#stage.fsOn #frame{background:linear-gradient(180deg,#ffe08a,#c98a1c 40%,#7a4a0a 60%,#ffd86b)}
#stage.fsOn #board{background:repeating-linear-gradient(90deg,transparent 0 calc(20% - 2px),rgba(255,190,90,.16) calc(20% - 2px) 20%),radial-gradient(ellipse at 50% 30%,#7a1020 0%,#3c0612 80%)}
#stage.fsOn .buy,#stage.fsOn #btnSpin,#stage.fsOn #btnMinus,#stage.fsOn #btnPlus,#stage.fsOn #multBox{display:none}

#fsPanel{display:none;pointer-events:none}
#stage.fsOn #fsPanel{display:block}
#fsPanel > *{position:absolute}
#fsLeft{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-radius:14px;
  background:linear-gradient(180deg,#b3160e,#6e0a07);box-shadow:inset 0 0 0 5px var(--gold),inset 0 0 0 9px #4a0606,0 10px 24px rgba(0,0,0,.5)}
#fsLeft b{font-weight:400;font-size:96px;line-height:1;color:#fff;text-shadow:0 5px 0 #4a0606}
#fsLeft span{font-size:34px;line-height:1.05;color:#fff;text-shadow:0 3px 0 #4a0606}
#emblem{display:flex;flex-direction:column;align-items:center}
#emblem .emT{font-size:46px;line-height:.95;text-align:center;color:#fff3c4;-webkit-text-stroke:2px #7a2a00;paint-order:stroke fill;
  text-shadow:0 4px 0 #6b2a00,0 0 18px rgba(255,190,60,.9);transform:rotate(-4deg)}
#emZap polyline{fill:none;stroke:#fff;stroke-width:2.2;stroke-linejoin:round;vector-effect:non-scaling-stroke}

/* portrait panel: where the buy boxes and spin button are */
.P #fsLeft{left:70px;top:1470px;width:330px;height:220px}
.P #emblem{left:450px;top:1400px;width:580px;height:420px}
/* landscape panel: left column */
.L #fsLeft{left:90px;top:110px;width:320px;height:200px}
.L #emblem{left:40px;top:340px;width:420px;height:580px}
.L .L 
/* flying multiplier values */
.flyx{position:absolute;z-index:16;pointer-events:none;font-size:64px;color:#fff;-webkit-text-stroke:3px #5a2a00;paint-order:stroke fill;
  text-shadow:0 0 18px #ffd86b,0 4px 0 #3a1a00;white-space:nowrap}
.flyx.big{font-size:84px;color:#ffe7a0}

/* coin shower on big wins */
.coin{position:absolute;top:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 35% 30%,#fff6cf 0%,#ffd25e 30%,#e09a1a 65%,#8a5508 100%);box-shadow:inset 0 0 0 4px rgba(122,67,0,.6)}
#stage.fsOn #money{background:rgba(40,4,4,.6);border-radius:40px;padding:6px 26px}
#stage.fsOn #disc{color:#fff;opacity:.9;text-shadow:0 2px 3px rgba(0,0,0,.8)}
#stage.fsOn #status,#stage.fsOn #msg{text-shadow:0 4px 0 #5a0706,0 0 14px rgba(0,0,0,.6)}
.P 
.P #emblem{top:1390px}
/* bigger sunglasses (wide image) */
.cell.s3 img{width:136%;height:136%;margin:-18%}
.pt img[src*="sym3"]{transform:scale(1.3)}

/* golden ring flash on the TUMBLE WIN banner when the multiplier is applied */
#status .bring{position:absolute;left:50%;top:50%;width:520px;height:90px;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 6px #ffe08a,0 0 30px 10px rgba(255,210,100,.8),inset 0 0 20px rgba(255,230,150,.8)}

/* animated Scatter clip (Free Spins trigger) — sits exactly over the Scatter picture */
.cell .clip{opacity:0;transition:opacity .15s;position:absolute;left:1.2%;top:1.2%;width:97.6%;height:97.6%;object-fit:cover;border-radius:12%;z-index:3;
  box-shadow:0 0 0 3px var(--gold),0 0 22px rgba(232,184,74,.9)}
.cell .clip.on{opacity:1}
.cell .clip::-webkit-media-controls,.cell .clip::-webkit-media-controls-start-playback-button,
.cell .clip::-webkit-media-controls-overlay-play-button,.cell .clip::-webkit-media-controls-panel{display:none!important;-webkit-appearance:none}

/* animated Bombardier, top right */
#hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;opacity:0;transition:opacity .3s;
  -webkit-mask-image:radial-gradient(ellipse 50% 55% at 50% 52%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 50% 55% at 50% 52%,#000 62%,transparent 100%);
  filter:drop-shadow(0 0 30px rgba(255,79,168,.45))}
#hero video.on{opacity:1}
#hero video.on ~ img,#hero:has(video.on) img{opacity:0}
#hero video::-webkit-media-controls,#hero video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
.cell.kb .clip{box-shadow:0 0 0 3px #ff5fb5,0 0 22px rgba(255,95,181,.9)}

/* ---- luxury watch picture: the Total Multiplier shows on its blue dial ---- */
#emblem .watch{position:relative;width:330px;height:330px;margin-top:4px}
#emblem .watch img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(0,0,0,.6))}
#emBadge.dial{position:absolute;left:49.6%;top:50%;width:44%;height:44%;transform:translate(-50%,-50%);border-radius:50%;
  display:flex;align-items:center;justify-content:center}
#emV{font-size:64px;line-height:1;color:#fff;font-family:var(--ui);-webkit-text-stroke:2px #061a5a;paint-order:stroke fill;
  text-shadow:0 0 16px rgba(160,210,255,.95),0 3px 0 #061a5a}
#emZap{position:absolute;left:-20%;top:0;width:140%;height:100%;overflow:visible;z-index:2;pointer-events:none;
  filter:drop-shadow(0 0 6px #9ff) drop-shadow(0 0 14px #6cf)}
.P #emblem{top:1388px}
.P #emblem .watch{width:330px;height:330px}
.L #emblem .watch{width:380px;height:380px}
.L #emV{font-size:72px}

/* dial screen colour = orb colour of that value; yellow number with black outline */
#emBadge.dial{width:49%;height:49%;background:var(--dial,#1a3cc8);
  background-image:repeating-conic-gradient(from 0deg,rgba(255,255,255,.10) 0deg 6deg,rgba(0,0,0,.10) 6deg 12deg),
    radial-gradient(circle at 50% 50%,var(--dial2,#5a8cff) 0%,var(--dial,#1a3cc8) 55%,var(--dial3,#08124a) 100%);
  box-shadow:inset 0 0 18px rgba(0,0,0,.65);transition:background .3s}
#emV{color:#ffe23a!important;-webkit-text-stroke:4px #000;paint-order:stroke fill;text-shadow:0 3px 0 #000,0 0 14px rgba(255,226,58,.6)}
#emBadge.oc-pink{--dial2:#ff9ee0;--dial:#e23aa8;--dial3:#5a0a40}
#emBadge.oc-blue{--dial2:#7fd4ff;--dial:#1f7fe0;--dial3:#06265a}
#emBadge.oc-green{--dial2:#8dff9e;--dial:#1fae3c;--dial3:#063a14}
#emBadge.oc-red{--dial2:#ff9a7a;--dial:#e0321e;--dial3:#4a0806}
#emBadge.oc-purple{--dial2:#d9a2ff;--dial:#8a2ee0;--dial3:#2a0650}
#emBadge.oc-gold{--dial2:#fff2a0;--dial:#e0a81e;--dial3:#5a3a04}

/* gold diamond plaque for "FREE SPINS LEFT" */
#fsLeft{background:url(img/plaque.webp) center/100% 100% no-repeat !important;box-shadow:none !important;border-radius:0;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.55));gap:2px}
#fsLeft b{color:#7a0a0a;text-shadow:0 2px 0 rgba(255,244,190,.8),0 0 10px rgba(255,240,170,.6)}
#fsLeft span{color:#7a0a0a;text-shadow:0 2px 0 rgba(255,244,190,.8)}
.P #fsLeft{left:50px;top:1460px;width:370px;height:238px}
.P #fsLeft b{font-size:92px}.P #fsLeft span{font-size:32px}
.L #fsLeft{left:80px;top:100px;width:340px;height:219px}
.L #fsLeft b{font-size:84px}.L #fsLeft span{font-size:30px}

/* sparkles (orbs + watch) */
.spkHost{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:visible}
.spk{position:absolute;display:block;pointer-events:none;
  background:radial-gradient(circle,#fff 0%,#fff 18%,var(--sc,#ffe7a0) 40%,rgba(255,231,160,0) 70%);
  clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);
  filter:drop-shadow(0 0 6px var(--sc,#ffe7a0))}
.cell .spk{--sc:var(--zc,#ffe7a0)}
#emZap{display:none}

/* luxury casino pattern on the specials background */

#stage.fsOn #fsBg::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 85% 70% at 50% 45%,rgba(0,0,0,0) 55%,rgba(30,0,4,.55) 100%)}

/* black watch dial, yellow number */
#emBadge.dial{background:radial-gradient(circle at 50% 42%,#2a2a2a 0%,#0d0d0d 60%,#000 100%) !important;
  box-shadow:inset 0 0 0 2px rgba(232,184,74,.55),inset 0 0 18px rgba(0,0,0,.9)}
/* performance: lighter effects */
.spk{filter:none !important}
.cell.landed img{animation:none !important;filter:drop-shadow(0 0 10px var(--zc,#9ff))}

/* dial is now in the watch picture: no drawn background */
#emBadge.dial{background:none !important;box-shadow:none !important}
/* black text on the gold "FREE SPINS LEFT" plaque */
#fsLeft b,#fsLeft span{color:#000 !important;text-shadow:0 2px 0 rgba(255,244,190,.7) !important}

/* steady counters: fixed-width digits so the number doesn't jump while counting */
.amt,#credit,#bet,#ovBig,#m1{font-variant-numeric:tabular-nums}
#ovBig{animation:none !important}

/* pattern removed from the specials background */
#stage.fsOn #bgpat{display:none}

/* special intro video over the grid, with the Free Spins message on top */
#intro{position:absolute;inset:0;z-index:20;background:#000;overflow:hidden;border-radius:14px}
#intro .introVid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#intro .introTxt{position:absolute;left:0;right:0;bottom:6%;display:flex;flex-direction:column;align-items:center;text-align:center;pointer-events:none}
#intro .t1{font-size:64px;color:#ffe7a0;-webkit-text-stroke:3px #000;paint-order:stroke fill;text-shadow:0 4px 0 #000}
#intro .t2{font-size:150px;line-height:1;color:#fff;-webkit-text-stroke:5px #000;paint-order:stroke fill;text-shadow:0 6px 0 #000,0 0 30px rgba(255,200,90,.8)}
#intro .t3{font-size:56px;color:#fff;-webkit-text-stroke:3px #000;paint-order:stroke fill;text-shadow:0 4px 0 #000}
#intro .t4{font-size:36px;color:#ffd0ef;-webkit-text-stroke:2px #000;paint-order:stroke fill}
#intro .t5{margin-top:14px;font-size:34px;color:#fff;-webkit-text-stroke:2px #000;paint-order:stroke fill;animation:blink 1.2s infinite}
#intro{cursor:pointer}

/* boxed game on wide screens: room around it for banners */
body.boxed{background:radial-gradient(ellipse at 50% 0%,#3a0a1e 0%,#14030b 60%) fixed}
body.boxed #game{margin:24px auto 0;border-radius:14px 14px 0 0;box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 0 2px rgba(232,184,74,.35)}
#gameBar{display:none}
body.boxed #gameBar{display:flex;align-items:center;justify-content:space-between;margin:0 auto;padding:8px 16px;
  background:#0c0206;border-radius:0 0 14px 14px;font-family:Arial,sans-serif;font-size:14px;color:#d9b8a0;
  box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 0 2px rgba(232,184,74,.35)}
#btnFull{font-family:Arial,sans-serif;font-size:14px;color:#fff;padding:4px 10px;border-radius:6px}
#btnFull:hover{background:rgba(255,255,255,.1)}
body.full #game{margin:0;border-radius:0}

/* 18+ age gate */
#ageGate{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  background:rgba(8,1,4,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:16px}
#ageGate[hidden]{display:none}
html.gated,html.gated body{overflow:hidden}
.agBox{width:min(430px,100%);border-radius:16px;overflow:hidden;box-shadow:0 20px 60px #000,0 0 0 3px #e8b84a;font-family:Arial,sans-serif;text-align:center}
.agTop{padding:30px 22px 26px;background:linear-gradient(160deg,#d42a2a,#7a0a14);color:#fff}
.agTop b{display:block;font-family:'Cinzel Decorative',Georgia,serif;font-size:30px;letter-spacing:3px;color:#ffe08a;text-shadow:0 3px 0 #4a0606}
.agTop span{display:block;margin-top:8px;font-family:'Lilita One',Arial,sans-serif;font-size:24px;line-height:1.15}
.agBody{padding:24px 26px 22px;background:#fff;color:#1a0a10}
.agBody p{font-size:17px;line-height:1.4;margin-bottom:18px}
#agYes{display:block;width:100%;padding:14px;border-radius:40px;background:linear-gradient(180deg,#ffd86b,#e09a1a);color:#3a0a00;
  font-family:'Lilita One',Arial,sans-serif;font-size:20px;box-shadow:0 4px 0 #9a6a14}
#agYes:active{transform:translateY(2px);box-shadow:0 2px 0 #9a6a14}
.agNo{display:block;margin:16px auto 0;font-size:16px;font-weight:bold;color:#b0182a !important}
.agBody small{display:block;margin-top:16px;font-size:12px;color:#7a6a70}
#agSorry{margin-top:10px;font-size:14px;color:#b0182a;font-weight:bold}

/* REFILL COINS button */
#btnRefill{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;border-radius:24px;
  background:linear-gradient(180deg,#5dff8a,#1fae3c 55%,#0a6a22);color:#fff;text-shadow:0 3px 0 #064a16;
  box-shadow:inset 0 0 0 4px #e8b84a,inset 0 0 0 7px #0a4a1a,0 8px 18px rgba(0,0,0,.5);transition:transform .1s,filter .2s}
#btnRefill:active:not(:disabled){transform:scale(.96)}
#btnRefill:disabled{filter:grayscale(.85) brightness(.55)}
.P #btnRefill{left:30px;top:1615px;width:170px;height:160px;font-size:34px;gap:4px}
.L #btnRefill{left:1500px;top:840px;width:380px;height:90px;flex-direction:row;gap:12px;font-size:38px}
#stage.fsOn #btnRefill{display:none}
#gameBar a,footer a{color:#e8b84a;text-decoration:none}
#gameBar a:hover,footer a:hover{text-decoration:underline}

/* sponsor card on the refill screen */
.spCard{position:relative;margin:10px auto 0;max-width:640px;padding:30px 26px 26px;border-radius:18px;text-align:center;
  background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 2px rgba(232,184,74,.5)}
.spCard .spTag{position:absolute;left:16px;top:10px;font-size:20px;color:#b9a27a;letter-spacing:1px}
.spCard img{max-width:100%;max-height:260px;border-radius:12px;margin:10px auto 14px;display:block}
.spCard b{display:block;font-family:var(--ui);font-weight:400;font-size:40px;color:#fff}
.spCard p{font-size:28px;margin:8px 0 18px !important}
.spCta{display:inline-block;padding:16px 46px;border-radius:50px;background:linear-gradient(180deg,#5dff8a,#1fae3c);color:#fff;
  font-family:var(--ui);font-size:36px;text-decoration:none;text-shadow:0 2px 0 #064a16;box-shadow:inset 0 0 0 3px #e8b84a}
.P #logo .lg1{font-size:118px}
.L #logo .lg1{font-size:92px}

/* Balkan Royale logo picture */
#logo img{width:100%;height:100%;object-fit:contain}
#logo{filter:drop-shadow(0 8px 14px rgba(0,0,0,.55)) !important}
.P #logo{left:10px;top:18px;width:550px;height:350px}
.L #logo{left:1460px;top:20px;width:450px;height:290px}

/* speaker sound button */
#btnSound{display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#ffe08a,#c98a1c);box-shadow:inset 0 0 0 3px #7a4a08,0 4px 10px rgba(0,0,0,.5)}
#btnSound svg{width:48px;height:48px;fill:none;stroke:#3a0a1e;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#btnSound .spkr{fill:#3a0a1e}
#btnSound .mute{display:none;stroke:#b0182a;stroke-width:2.8}
#btnSound.off{opacity:1 !important;background:linear-gradient(180deg,#8a7a70,#4a3a34)}
#btnSound.off .wv{display:none}
#btnSound.off .mute{display:inline}
.P #btnSound{min-width:120px}
#btnSound svg{width:66px;height:66px}
.P #btnSound{min-width:140px}
.L #btnSound{min-width:130px}