/* Layout: scenă fixă 1920×1080 scalată pe ecran (landscape), bară de sus cu nivel și credit,
   5 role pe coloane de pânză roșie, bară de jos din lemn cu butoane și START pe cocoașa din dreapta */
@font-face{font-family:"Bangers";src:url("assets/font/bangers-latin-400-normal.woff2") format("woff2");font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bangers";src:url("assets/font/bangers-latin-ext-400-normal.woff2") format("woff2");font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --sea:#04142b; --wood:#3b1d08; --gold:#ffcc33; --gold-dim:#a8781c; --cream:#fff4d6; --ink:#140a02;
  --red:#d7141b; --navy:#0b2350;
  --display:"Bangers","Trebuchet MS",Impact,sans-serif;
  color-scheme:dark;
}
html,body{height:100%;margin:0}
body{background:var(--sea);color:var(--cream);font-family:var(--display);overflow:hidden;
  -webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;touch-action:manipulation}
#viewport{position:fixed;inset:0;overflow:hidden;background:radial-gradient(ellipse at center,#0a2b55,var(--sea) 70%)}
#stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;overflow:hidden}
.abs{position:absolute}
[hidden]{display:none!important}
button{font-family:var(--display);border:0;background:none;padding:0;cursor:pointer;color:inherit}
button:focus-visible{outline:6px solid var(--gold);outline-offset:4px;border-radius:12px}
button:disabled{cursor:default}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* bara de sus: sticlă închisă cu margine aurie */
.topbar{background:linear-gradient(180deg,rgba(44,20,6,.97),rgba(16,6,2,.97));border-bottom:4px solid #c9952e;
  box-shadow:0 6px 0 rgba(0,0,0,.45),0 14px 30px rgba(0,0,0,.5),inset 0 2px 0 rgba(255,220,140,.25)}
.rbtn{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 30%,#3a2a52,#140a24 70%);box-shadow:0 0 0 3px #c9952e,0 6px 12px rgba(0,0,0,.6),inset 0 2px 0 rgba(255,255,255,.18);transition:transform .08s,filter .35s}
.rbtn svg{width:44px;height:44px;fill:none;stroke:#ffe27a;stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round}
.rbtn svg .dot,.rbtn svg .fillp{fill:#ffe27a}
.rbtn svg .x{display:none;stroke:#ff5a5a}
.rbtn.muted svg .w{display:none}
.rbtn.muted svg .x{display:inline}
.rbtn:active{transform:scale(.92)}
.level{display:flex;align-items:center;gap:16px}
.lvlStar{position:relative;width:88px;height:88px;flex:none;filter:drop-shadow(0 4px 6px rgba(0,0,0,.6))}
.lvlStar svg{width:88px;height:88px;fill:url(#none);fill:#ffc928;stroke:#7a4b00;stroke-width:4;stroke-linejoin:round}
.lvlStar b{position:absolute;inset:0;display:grid;place-items:center;padding-top:8px;font-weight:400;font-size:38px;color:#3a1a00;text-shadow:0 2px 0 #fff3b0}
.lvlMain{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.lvlTitle{font-size:30px;color:var(--gold);text-shadow:0 3px 0 var(--ink);letter-spacing:1px;white-space:nowrap}
.lvlBar{position:relative;height:36px;border-radius:18px;background:linear-gradient(#0b0402,#2a1408);box-shadow:inset 0 3px 6px rgba(0,0,0,.8),0 0 0 3px #8a6420;overflow:hidden}
.lvlBar .fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:18px;background:linear-gradient(#ecff7a,#9fd413 55%,#5f9a08);box-shadow:inset 0 -4px 0 rgba(0,0,0,.2);transition:width .6s}
.lvlBar .lvlTxt{position:absolute;inset:0;display:grid;place-items:center;font-size:24px;color:#fff;text-shadow:0 2px 0 #000;white-space:nowrap;font-variant-numeric:tabular-nums}
.credit{display:grid;grid-template-columns:72px 1fr;grid-template-rows:auto 1fr;align-items:center;column-gap:14px;padding:4px 22px 4px 8px;box-sizing:border-box;border-radius:40px;
  background:linear-gradient(#0b0402,#24110a);box-shadow:inset 0 3px 8px rgba(0,0,0,.8),0 0 0 3px #c9952e}
.credit .coin{grid-row:1/3;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:40px;color:#8a4f00;
  background:radial-gradient(circle at 35% 30%,#fff6b0,#ffc928 50%,#b36b00);box-shadow:0 0 0 3px #8a4f00,0 0 16px rgba(255,201,40,.6)}
.credit .lbl{font-size:22px;color:#e8c77a;letter-spacing:2px;text-align:right}
.credit b{font-weight:400;font-size:52px;line-height:1;text-align:right;white-space:nowrap;color:var(--gold);text-shadow:0 3px 0 var(--ink),0 0 18px rgba(255,204,51,.35);font-variant-numeric:tabular-nums}

/* role moderne: o ramă aurie comună, fiecare rolă ca un cilindru întunecat */
.reelFrame{border-radius:30px;background:linear-gradient(#c9952e,#7a5214);padding:0;
  box-shadow:0 0 0 4px #3a2405,0 0 0 7px #f0c75a,0 20px 50px rgba(0,0,0,.65),0 0 60px rgba(255,190,60,.25)}
.reelFrame::before{content:"";position:absolute;inset:10px;border-radius:22px;background:#12060a}
.msg{display:none!important}
.reel{position:absolute;width:292px;height:752px}
.reel .win{position:absolute;left:0;top:10px;width:292px;height:732px;overflow:hidden;border-radius:12px;
  background:radial-gradient(ellipse 85% 60% at 50% 50%,#6a1a28,#3a0c16 60%,#1a0509)}
.reel .win::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(rgba(0,0,0,.6),transparent 16%,transparent 84%,rgba(0,0,0,.6)),linear-gradient(90deg,rgba(0,0,0,.35),transparent 12%,transparent 88%,rgba(0,0,0,.35))}
.reel .cell{position:absolute;left:38px;top:14px;width:216px;height:216px;will-change:transform}
.reel.spin .cell{filter:blur(1.6px) brightness(1.05)}
.reel .cell.hit{animation:hit .55s ease-in-out infinite alternate;filter:drop-shadow(0 0 16px #fff6a0)}
@keyframes hit{from{scale:1}to{scale:1.12}}
.reel .cell.dim{opacity:.35}
.reel .frame{position:absolute;box-sizing:border-box;width:276px;height:232px;z-index:3;border:6px solid;border-radius:18px;pointer-events:none;box-shadow:0 0 18px currentColor, inset 0 0 18px currentColor}
.reel.bounce .win{animation:bounce .22s ease-out}
@keyframes bounce{0%{transform:translateY(-18px)}60%{transform:translateY(8px)}100%{transform:translateY(0)}}
.reel .holdTag{position:absolute;left:50%;bottom:16px;z-index:4;translate:-50% 0;font-size:40px;padding:4px 22px;border-radius:14px;
  background:var(--gold);color:var(--ink);box-shadow:0 4px 0 #6b4a0c;display:none}
.reel.held .holdTag{display:block}
.reel.held .win{box-shadow:inset 0 0 0 6px var(--gold)}
.reel.holdable{cursor:pointer}
.reel.holdable:not(.held) .win{box-shadow:inset 0 0 0 3px rgba(255,204,51,.45)}

.marker{position:absolute;width:56px;height:42px;border-radius:10px;display:grid;place-items:center;font-size:30px;color:var(--ink);
  border:3px solid rgba(0,0,0,.45);opacity:.28;transition:opacity .2s}
.marker.on{opacity:1}
.marker.flash{animation:mk .4s steps(2) infinite}
@keyframes mk{50%{filter:brightness(1.8)}}
#lines{position:absolute;left:0;top:0;pointer-events:none}
#lines polyline{fill:none;stroke-width:12;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(0,0,0,.8))}

.banner{position:absolute;left:146px;width:1492px;margin:0;text-align:center;text-shadow:0 3px 0 var(--ink),0 0 10px rgba(0,0,0,.8)}
.msg{top:848px;font-size:38px;color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg.big{color:var(--gold);font-size:50px}
#fsBanner{top:128px;font-size:38px;color:var(--gold);z-index:2}
#fsBanner span{background:rgba(5,15,35,.75);padding:4px 26px;border-radius:14px;border:2px solid var(--gold-dim)}

/* bara de jos: panou de comenzi modern */
.hud{display:flex;gap:16px;padding:12px 16px;box-sizing:border-box;border-radius:34px;
  background:linear-gradient(180deg,rgba(38,16,4,.92),rgba(14,5,1,.96));
  border:3px solid transparent;background-clip:padding-box;
  box-shadow:0 0 0 3px #b8862a,0 0 0 6px rgba(0,0,0,.55),inset 0 2px 0 rgba(255,220,140,.25),inset 0 -10px 24px rgba(0,0,0,.6),0 14px 30px rgba(0,0,0,.6)}
.ctl{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:24px;min-width:0;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 40%),linear-gradient(#1c0d05,#0b0402);
  box-shadow:inset 0 0 0 2px rgba(255,204,51,.28),inset 0 6px 14px rgba(0,0,0,.6);transition:filter .35s,opacity .35s}
.ctl .lab{font-size:26px;letter-spacing:2px;color:#e8c77a;text-shadow:0 2px 0 #000}
.step{width:300px;flex:none}
.step .row{display:flex;align-items:center;gap:10px}
.step b{width:100px;text-align:center;font-weight:400;font-size:72px;line-height:1;color:#fff;text-shadow:0 3px 0 #7a4b00,0 0 18px rgba(255,204,51,.45);font-variant-numeric:tabular-nums}
.rb{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 30%,#ffe9a0,#f3b21c 55%,#a8650a);
  box-shadow:0 6px 0 #5c3404,0 8px 16px rgba(0,0,0,.6),inset 0 2px 0 rgba(255,255,255,.7);transition:transform .08s,filter .2s}
.rb svg{width:40px;height:40px;fill:none;stroke:#3a1a00;stroke-width:4.5;stroke-linecap:round}
.rb:active:not(:disabled){transform:translateY(4px);box-shadow:0 2px 0 #5c3404,inset 0 2px 0 rgba(255,255,255,.7)}
.rb:disabled{filter:grayscale(1) brightness(.55);cursor:default}
.slot{width:240px;flex:none;background:none;box-shadow:none}
.maxb,.dbl{position:absolute;inset:4px 0;border-radius:26px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:transform .08s,filter .2s}
.maxb{background:radial-gradient(ellipse at 50% 20%,#b9ff7a,#3fbf2a 50%,#17701a);box-shadow:0 8px 0 #0d4610,0 10px 20px rgba(0,0,0,.6),inset 0 3px 0 rgba(255,255,255,.55),inset 0 0 0 3px rgba(255,255,255,.18)}
.maxb span{font-size:64px;line-height:.9;color:#fff;text-shadow:0 4px 0 #0d4610}
.maxb small{font-size:26px;color:#eaffd8;letter-spacing:1px}
.maxb small i{font-style:normal}
.maxb:active:not(:disabled){transform:translateY(5px);box-shadow:0 3px 0 #0d4610,inset 0 3px 0 rgba(255,255,255,.55)}
.maxb:disabled{filter:grayscale(.85) brightness(.55)}
.dbl{background:linear-gradient(135deg,#ff3b3b 0,#c40f17 48%,#151515 52%,#3a3a3a 100%);border:4px solid var(--gold);box-sizing:border-box;
  box-shadow:0 8px 0 #4a2a06,0 10px 20px rgba(0,0,0,.6),inset 0 3px 0 rgba(255,255,255,.4)}
.dbl span{font-size:58px;line-height:.9;color:#fff;text-shadow:0 4px 0 #000}
.dbl small{font-size:22px;color:#ffe9b0;letter-spacing:2px}
.dbl:active{transform:translateY(5px)}
.disp{width:190px;flex:none}
.disp b{font-weight:400;font-size:60px;line-height:1;color:var(--gold);text-shadow:0 3px 0 #000;font-variant-numeric:tabular-nums}
.disp.win{width:250px}
.disp.win b{font-size:66px}
.box.win.on{box-shadow:inset 0 0 0 3px var(--gold),0 0 28px rgba(255,204,51,.6)}

.autob{width:124px;height:124px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;z-index:3;
  background:radial-gradient(circle at 50% 30%,#3c2a5e,#160b28 70%);box-shadow:0 0 0 4px #b8862a,0 0 0 7px rgba(0,0,0,.5),0 8px 18px rgba(0,0,0,.6),inset 0 3px 0 rgba(255,255,255,.2);transition:filter .3s}
.autob svg{width:52px;height:52px;fill:none;stroke:#ffe27a;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.autob span{font-size:28px;color:#ffe27a;letter-spacing:1px;margin-top:-2px}
.autob.on{background:radial-gradient(circle at 50% 30%,#6cff8c,#139a33 65%,#0b5a25);box-shadow:0 0 0 4px #c8ffcf,0 0 30px rgba(80,255,120,.8)}
.autob.on svg{stroke:#fff;animation:rot 1.4s linear infinite}
.autob.on span{color:#fff}
.autob:active:not(:disabled){transform:scale(.94)}
.autob:disabled{filter:grayscale(1) brightness(.5)}
@keyframes rot{to{transform:rotate(360deg)}}

/* START mare, rotund, metalic */
.start{width:300px;height:300px;border-radius:50%;z-index:3}
.start .rim{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 200deg,#fff2b8,#d9951a,#fff6c8,#a8650a,#ffe27a,#c47e12,#fff2b8);
  box-shadow:0 14px 30px rgba(0,0,0,.65),inset 0 0 0 4px rgba(90,50,0,.55),0 0 0 5px rgba(0,0,0,.45)}
.start .disc{position:absolute;inset:9%;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;overflow:hidden;
  background:radial-gradient(circle at 50% 32%,#ff6a3a,#e01b1b 45%,#8e0b22 80%,#5a0618);
  box-shadow:inset 0 -14px 30px rgba(0,0,0,.45),inset 0 0 0 5px rgba(255,255,255,.12);pointer-events:none}
.start .disc::before{content:"";position:absolute;left:14%;right:14%;top:5%;height:40%;border-radius:50%;background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,0));z-index:1}
.start .disc::after{content:"";position:absolute;inset:-20%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.5) 50%,transparent 60%);transform:translateX(-120%);animation:shine 3.2s ease-in-out infinite;z-index:2}
@keyframes shine{0%,55%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
.start .spinIco{position:relative;z-index:3;width:84px;height:84px;fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 3px 0 rgba(60,0,0,.8))}
.start.busy .spinIco{animation:rot .6s linear infinite}
.start .disc #startTxt{position:relative;z-index:3;font-size:44px;line-height:1;color:#fff;text-shadow:0 4px 0 #4a0000;letter-spacing:2px}
.start.collect .disc{background:radial-gradient(circle at 50% 32%,#fff1a0,#f2b21c 45%,#b06a05 80%,#6b3a00)}
.start.collect .disc #startTxt{font-size:34px;color:#3a1a00;text-shadow:0 2px 0 #fff3b0}
.start.collect .spinIco{stroke:#3a1a00;filter:none}
.start.auto .disc{background:radial-gradient(circle at 50% 32%,#8dff9e,#22b247 45%,#0e6a2a 80%,#073d18)}
.start:not(:disabled){animation:breath 2.4s ease-in-out infinite}
@keyframes breath{50%{filter:drop-shadow(0 0 26px rgba(255,120,60,.8))}}
.start:active:not(:disabled){transform:scale(.95)}
.start:disabled{filter:grayscale(.6) brightness(.7)}
.start .ring{position:absolute;inset:-8px;width:316px;height:316px;transform:rotate(-90deg);pointer-events:none}
.start .ring circle{fill:none;stroke:#7dff8f;stroke-width:4;stroke-dasharray:295.3;stroke-dashoffset:295.3;opacity:0}
.start.charging .ring circle{opacity:1;transition:stroke-dashoffset var(--hold,3s) linear;stroke-dashoffset:0}

/* mod câștig: importante luminate, restul estompat */
.rbtn,.marker,.level,.credit,.autob{transition:filter .35s,opacity .35s}
#stage.winmode .step,#stage.winmode .disp:not(.win),#stage.winmode .autob,#stage.winmode .rbtn,#stage.winmode .level{filter:brightness(.38) saturate(.5)}
#stage.winmode .marker:not(.flash){opacity:.12}
#stage.winmode #btnDouble{animation:dblWin .7s ease-in-out infinite alternate;z-index:3}
@keyframes dblWin{from{transform:scale(1);box-shadow:0 8px 0 #4a2a06,0 0 20px var(--gold)}to{transform:scale(1.06);box-shadow:0 8px 0 #4a2a06,0 0 60px var(--gold),0 0 120px rgba(255,80,60,.6)}}
#stage.winmode #btnStart{animation:colWin .7s ease-in-out infinite alternate}
@keyframes colWin{from{transform:scale(1);filter:drop-shadow(0 0 14px rgba(255,210,74,.7))}to{transform:scale(1.06);filter:drop-shadow(0 0 46px rgba(255,210,74,1))}}
#stage.winmode .box.win{animation:boxWin .7s ease-in-out infinite alternate}
@keyframes boxWin{to{box-shadow:inset 0 0 0 3px #fff3b0,0 0 50px rgba(255,204,51,.9);transform:scale(1.04)}}

/* bule în fundal */
#bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none}
#bubbles i{position:absolute;bottom:-120px;border-radius:50%;border:2px solid rgba(160,220,255,.45);background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.55),rgba(120,200,255,.08) 45%,transparent 70%);animation:rise linear infinite}
@keyframes rise{0%{transform:translate(0,0)}25%{transform:translate(18px,-300px)}50%{transform:translate(-14px,-620px)}75%{transform:translate(16px,-940px)}100%{transform:translate(0,-1260px);opacity:.2}}
#fx{position:absolute;left:0;top:0;width:1920px;height:1080px;pointer-events:none;z-index:25}

/* intrare role și simboluri */
.reel.windup .win{animation:windup .16s ease-out}
@keyframes windup{50%{transform:translateY(-26px)}}
.reel.tease .win{box-shadow:inset 0 0 0 6px #ffd84a,0 0 60px #ffcc33;animation:tease .3s ease-in-out infinite alternate}
@keyframes tease{to{box-shadow:inset 0 0 0 6px #fff3a0,0 0 100px #ffcc33}}
.reel .cell.land{animation:land .5s ease-out}
@keyframes land{0%{scale:1.35;filter:brightness(2) drop-shadow(0 0 30px #fff)}100%{scale:1}}
.reel .cell.hit{animation:hit2 .9s ease-in-out infinite;filter:drop-shadow(0 0 18px #fff6a0) brightness(1.15)}
@keyframes hit2{0%,100%{scale:1;rotate:0deg}25%{scale:1.14;rotate:-4deg}50%{scale:1.08;rotate:3deg}75%{scale:1.14;rotate:-2deg}}
#lines polyline.draw{animation:draw .45s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* sărbătoare câștig mare / rotiri gratuite */
.celebrate{position:absolute;inset:0;z-index:15;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:radial-gradient(circle at 50% 50%,rgba(40,10,0,.55),rgba(0,0,0,.85) 70%);cursor:pointer;overflow:hidden}
.celebrate .rays{position:absolute;left:50%;top:50%;width:2600px;height:2600px;margin:-1300px 0 0 -1300px;
  background:repeating-conic-gradient(from 0deg,rgba(255,210,74,.22) 0 8deg,transparent 8deg 18deg);animation:spinr 14s linear infinite;
  -webkit-mask:radial-gradient(circle,#000 0,transparent 60%);mask:radial-gradient(circle,#000 0,transparent 60%)}
@keyframes spinr{to{transform:rotate(360deg)}}
.bwTitle{position:relative;font-size:150px;line-height:1;color:var(--gold);letter-spacing:4px;
  text-shadow:0 8px 0 #7a3c00,0 14px 0 #3a1a00,0 0 60px rgba(255,180,40,.9);animation:zoomIn .6s cubic-bezier(.2,1.6,.4,1) both}
.bwAmt{position:relative;font-size:190px;line-height:1;color:#fff;text-shadow:0 8px 0 #b36b00,0 0 50px rgba(255,220,120,.9);font-variant-numeric:tabular-nums;animation:zoomIn .6s .15s cubic-bezier(.2,1.6,.4,1) both}
.bwSub{position:relative;font-size:30px;color:var(--cream);opacity:.8;margin-top:20px}
@keyframes zoomIn{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}
.celebrate.mega .bwTitle{color:#ff5af0;text-shadow:0 8px 0 #6a0060,0 0 70px rgba(255,90,240,.9)}
.celebrate.super .bwTitle{color:#5af0ff;text-shadow:0 8px 0 #004a6a,0 0 70px rgba(90,240,255,.9)}
.celebrate .bwAmt.pop{animation:popAmt .4s ease-out}
@keyframes popAmt{50%{transform:scale(1.15)}}

/* ferestre peste joc */
.overlay{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:rgba(2,8,20,.78);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.overlay[hidden]{display:none!important}
.panel{background:linear-gradient(180deg,#123a73,#071a3a);border:6px solid var(--gold);border-radius:32px;box-shadow:0 30px 90px rgba(0,0,0,.7),0 0 40px rgba(255,204,51,.25);
  padding:36px 44px;animation:pop .25s ease-out}
@keyframes pop{from{scale:.9;opacity:.3}to{scale:1;opacity:1}}
.panel h2{margin:0;font-weight:400;font-size:64px;color:var(--gold);text-shadow:0 4px 0 var(--ink);text-align:center}
.tbtn{font-size:38px;padding:16px 34px;border-radius:18px;background:var(--cream);color:var(--ink);box-shadow:0 7px 0 #8d7d58}
.tbtn.gold{background:linear-gradient(#ffe27a,#f0a90f);box-shadow:0 7px 0 #7a4b00}
.tbtn:active:not(:disabled){transform:translateY(4px);box-shadow:0 3px 0 #7a4b00}
.tbtn:disabled{opacity:.4}

/* dublaj pe tot ecranul — stil modern: sticlă, lumină, carte mare în centru */
.gfull{background:#070314;backdrop-filter:none;-webkit-backdrop-filter:none;place-items:stretch;overflow:hidden}
.gbg{position:absolute;inset:0;background:url("assets/img/bg.webp") center/cover;filter:blur(18px) brightness(.35) saturate(1.3);transform:scale(1.1)}
.gbg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 50% 45%,rgba(120,40,200,.35),rgba(10,4,30,.2) 50%,rgba(0,0,0,.85) 100%)}
.gglow{position:absolute;left:50%;top:44%;width:1800px;height:1800px;margin:-900px 0 0 -900px;
  background:repeating-conic-gradient(from 0deg,rgba(255,215,120,.10) 0 6deg,transparent 6deg 18deg);animation:spinr 40s linear infinite;
  -webkit-mask:radial-gradient(circle,#000 0,transparent 55%);mask:radial-gradient(circle,#000 0,transparent 55%)}
.gwrap{position:relative;display:grid;grid-template-columns:440px 1fr 440px;grid-template-rows:auto 1fr;gap:0 60px;padding:26px 70px 46px;box-sizing:border-box;width:1920px;height:1080px;animation:gin .35s ease-out}
@keyframes gin{from{opacity:0;scale:1.04}to{opacity:1;scale:1}}
.ghead{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:6px}
.ghead h2{margin:0;font-weight:400;font-size:104px;line-height:1;letter-spacing:6px;
  background:linear-gradient(#fff6c8,#ffd24a 45%,#e08a0c 55%,#ffd86a);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 5px 0 #4a2600) drop-shadow(0 0 30px rgba(255,190,60,.45))}
.gsub{margin:0;padding:6px 26px;border-radius:30px;font-size:28px;color:#e9dcff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14)}
.gcol{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;min-width:0}
.glab{font-size:24px;letter-spacing:3px;color:#b9a6e8}
.glass,.pyr div,.gbox,.gtray{background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.16);
  box-shadow:0 10px 30px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.18);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.pyr{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
.pyr div{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 22px 0 14px;border-radius:40px;box-sizing:border-box;
  font-size:30px;color:#b9a6e8;font-variant-numeric:tabular-nums;transition:all .3s}
.pyr div span{min-width:76px;height:52px;border-radius:26px;display:grid;place-items:center;background:rgba(0,0,0,.35);color:#e9dcff;font-size:28px}
.pyr div b{font-weight:400;color:#fff;font-size:40px}
.pyr div.done{opacity:.55}
.pyr div.done b{color:#ffd24a}
.pyr div.cur{background:linear-gradient(90deg,#ffe27a,#f0a90f);border-color:#fff3b0;box-shadow:0 0 34px rgba(255,190,60,.55)}
.pyr div.cur span{background:rgba(90,45,0,.25);color:#3a1a00}
.pyr div.cur b{color:#3a1a00}
.pyr div.next{border-color:rgba(90,240,255,.8);box-shadow:0 0 22px rgba(90,240,255,.35),inset 0 1px 0 rgba(255,255,255,.18)}
.pyr div.next b{color:#8ff4ff}
.gmid{justify-content:flex-start;gap:20px;padding-top:6px}
.gcardbox{position:relative;width:330px;height:470px;border-radius:22px;transition:box-shadow .3s;
  box-shadow:0 30px 60px rgba(0,0,0,.7),0 0 0 2px rgba(255,255,255,.25),0 0 70px rgba(170,110,255,.45)}
.gcardbox::after{content:"";position:absolute;left:10%;right:10%;bottom:-40px;height:40px;border-radius:50%;background:radial-gradient(ellipse,rgba(170,110,255,.55),transparent 70%);filter:blur(6px)}
.gcardbox img{position:absolute;inset:0;width:330px;height:470px;border-radius:22px}
.gcardbox .gback.b{opacity:0}
.gcardbox.flash .gback.b{animation:rb .22s steps(1) infinite}
@keyframes rb{50%{opacity:1}}
.gface.flip{animation:flip .4s cubic-bezier(.2,1.4,.4,1)}
@keyframes flip{from{transform:rotateY(90deg) scale(1.15)}to{transform:rotateY(0) scale(1)}}
.gcardbox.won{box-shadow:0 30px 60px rgba(0,0,0,.7),0 0 0 3px #8dff9e,0 0 90px rgba(80,255,120,.8)}
.gcardbox.lost{box-shadow:0 30px 60px rgba(0,0,0,.7),0 0 0 3px #ff6a6a,0 0 90px rgba(255,40,40,.8);animation:shake .4s}
@keyframes shake{25%{transform:translateX(-14px)}50%{transform:translateX(12px)}75%{transform:translateX(-8px)}}
.gtray{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 26px 14px;border-radius:24px;margin-top:22px}
.ghist{display:flex;gap:12px;height:118px;align-items:center;min-width:470px;justify-content:center}
.ghist img{width:82px;height:117px;border-radius:8px;box-shadow:0 6px 14px rgba(0,0,0,.6)}
.ghist img:first-child{animation:histIn .45s cubic-bezier(.2,1.4,.4,1)}
.ghist img:not(:first-child){opacity:.75}
@keyframes histIn{from{transform:translateY(-50px) scale(1.4);opacity:0}}
.gchoice{display:flex;gap:44px;margin-top:6px}
.cbtn{width:300px;height:116px;border-radius:60px;display:flex;align-items:center;justify-content:center;gap:22px;transition:transform .1s,filter .2s}
.cbtn i{font-style:normal;font-family:"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols2",serif;font-size:64px;line-height:1}
.cbtn.red{background:linear-gradient(180deg,#ff5a5a,#d6111b 55%,#8e0710);box-shadow:0 9px 0 #5a0309,0 16px 30px rgba(0,0,0,.55),inset 0 2px 0 rgba(255,255,255,.55),inset 0 0 0 2px rgba(255,255,255,.18)}
.cbtn.red i{color:#fff;text-shadow:0 3px 0 #6a0208}
.cbtn.black{background:linear-gradient(180deg,#5a5a66,#1d1d24 55%,#08080c);box-shadow:0 9px 0 #000,0 16px 30px rgba(0,0,0,.55),inset 0 2px 0 rgba(255,255,255,.35),inset 0 0 0 2px rgba(255,255,255,.14)}
.cbtn.black i{color:#fff;text-shadow:0 3px 0 #000}
.cbtn:hover:not(:disabled){filter:brightness(1.12)}
.cbtn:active:not(:disabled){transform:translateY(6px)}
.cbtn:disabled{opacity:.35;filter:grayscale(.4)}
.gright{gap:20px}
.gbox{width:100%;box-sizing:border-box;padding:16px 18px;border-radius:26px;text-align:center}
.gbox span{display:block;font-size:24px;letter-spacing:3px;color:#b9a6e8}
.gbox b{display:block;font-weight:400;font-size:76px;line-height:1.05;color:#fff;font-variant-numeric:tabular-nums}
.gbox.hi{border-color:rgba(90,240,255,.6);box-shadow:0 0 30px rgba(90,240,255,.25),inset 0 1px 0 rgba(255,255,255,.18)}
.gbox.hi b{color:#8ff4ff}
.gmsg{margin:0;min-height:96px;display:grid;place-items:center;font-size:42px;line-height:1.1;color:#ffd24a;text-align:center;text-shadow:0 3px 0 #000}
.gbtn{width:100%;height:96px;border-radius:50px;font-size:42px;letter-spacing:1px;transition:transform .1s,filter .2s}
.gbtn.ghost{color:#fff;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.35)}
.gbtn.gold{color:#3a1a00;background:linear-gradient(180deg,#fff1a0,#ffc928 50%,#e08a0c);box-shadow:0 8px 0 #7a4b00,0 14px 26px rgba(0,0,0,.5),inset 0 2px 0 rgba(255,255,255,.7)}
.gbtn:active:not(:disabled){transform:translateY(5px)}
.gbtn:disabled{opacity:.35}

.ipanel{width:1500px;display:flex;flex-direction:column;align-items:center;gap:18px}
.isub{margin:0;font-size:28px;color:var(--cream)}
.paygrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 26px;width:100%}
.pay{display:flex;align-items:center;gap:16px;background:rgba(0,0,0,.25);border-radius:16px;padding:6px 14px}
.pay img{width:110px;height:110px}
.pay ul{list-style:none;margin:0;padding:0;font-size:28px;color:var(--cream);font-variant-numeric:tabular-nums}
.pay ul b{font-weight:400;color:var(--gold)}
.pay small{display:block;font-size:20px;color:#9fb6e6}
.linegrid{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.linegrid svg{width:118px;height:76px;background:rgba(0,0,0,.35);border-radius:10px}
.rules{margin:0;font-family:"Trebuchet MS",Arial,sans-serif;font-size:24px;line-height:1.4;color:#d8e2f6;max-width:1300px;text-align:center}
.mpanel{width:820px;display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.mpanel p{margin:0;font-size:40px;color:var(--cream)}

#rotate{display:none;position:fixed;left:0;right:0;bottom:calc(10px + env(safe-area-inset-bottom,0px));text-align:center;font-family:"Trebuchet MS",Arial,sans-serif;font-size:14px;color:var(--cream);opacity:.8;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (orientation:portrait) and (max-width:700px){#rotate{display:block}}
@media (prefers-reduced-motion:reduce){.reel .cell.hit,.dbl,.pyr div.next,.marker.flash,.panel,.start,.start .disc::after,#bubbles i,.celebrate .rays,.cbtn,#stage.winmode #btnDouble,#stage.winmode #btnStart,#stage.winmode .box.win,.autob.on svg,.start.busy .spinIco{animation:none!important}.gcardbox.flash .gback.b{animation-duration:.8s}}

/* dublaj: treptele câștigate rămân galbene */
.pyr div.done{opacity:1;background:linear-gradient(90deg,#ffe27a,#f0a90f);border-color:#fff3b0;box-shadow:0 0 14px rgba(255,190,60,.35)}
.pyr div.done span{background:rgba(90,45,0,.25);color:#3a1a00}
.pyr div.done b{color:#3a1a00}
.pyr div.cur{background:linear-gradient(90deg,#fff3a0,#ffc21a);box-shadow:0 0 0 3px #fff6c8,0 0 40px rgba(255,200,60,.85)}