/* 🍒 Extra Super 7 - mobil slot ekranı */
#sfScreen{position:fixed; inset:0; z-index:8900; display:none;
  flex-direction:column; overflow-y:auto;
  padding:10px 10px calc(14px + env(safe-area-inset-bottom,0px));
  background:#191447}
#sfScreen.on{display:flex}
.sftop{display:flex; align-items:center; gap:8px; margin-bottom:8px}
.sfback{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
  color:#e8eaed; border-radius:12px; padding:9px 13px; font-size:14px;
  font-weight:700; cursor:pointer}
.sftitle{flex:1; font-size:16px; font-weight:900;
  background:linear-gradient(135deg,#ff5a5f,#f2b722);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.sfbal{font-size:13.5px; font-weight:800; color:#f2b722; white-space:nowrap;
  background:rgba(242,183,34,.1); border:1px solid rgba(242,183,34,.3);
  border-radius:12px; padding:8px 11px}
.sfframe{border:2px solid rgba(124,92,255,.7); border-radius:14px;
  padding:5px; background:#170a2e; position:relative; overflow:hidden;
  box-shadow:0 0 26px rgba(124,92,255,.3), inset 0 0 22px rgba(0,0,0,.55)}
/* 🛢 Meyvələr slotcase silindrinin İÇİNDƏ dönür: baraban şəkli qridin
   ALTINDA uzanır (::before), xanalar şəffafdır - simvollar üstündə. */
.sfgrid{display:grid; grid-template-columns:repeat(5,1fr);
  grid-template-rows:repeat(3,1fr); grid-auto-flow:column; gap:0;
  position:relative; z-index:1}
.sfcell{aspect-ratio:3/3.6; position:relative; border-radius:0;
  overflow:hidden; border:0; background:transparent; z-index:1}
.sfsym{position:absolute; inset:0}
.sfres{position:absolute; inset:0; z-index:1; display:flex;
  align-items:center; justify-content:center}
.sfcell.hit{border-color:#f2b722;
  animation:sfhit .55s ease infinite alternate; z-index:3}
@keyframes sfhit{from{box-shadow:0 0 5px rgba(242,183,34,.45)}
  to{box-shadow:0 0 16px rgba(242,183,34,.9)}}
/* — simvollar — */
.fs{display:flex; align-items:center; justify-content:center;
  width:100%; height:100%}
.fs.emo{font-size:clamp(24px,7.5vw,38px);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.fs.sev{font-size:clamp(30px,9.5vw,46px); font-weight:900; font-style:italic;
  color:#ff2e2e;
  text-shadow:0 0 14px rgba(255,46,46,.85), 0 2px 0 #7c0b0b,
    0 -1px 0 #ffb3b3}
.fs.bar{flex-direction:column; gap:2px}
.fs.bar i{font-style:normal; font-weight:900;
  font-size:clamp(8.5px,2.7vw,12px); letter-spacing:.5px; line-height:1;
  padding:2px 7px; border-radius:5px; color:#fff;
  background:linear-gradient(180deg,#5fa0e8,#1c4a85);
  box-shadow:0 1px 2px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.4)}
.fs.bar.b i{background:linear-gradient(180deg,#ef6a9e,#a0195c)}
.fs.sc{flex-direction:column; width:auto; height:auto; padding:3px 7px;
  border:2px solid #ffdf8e; border-radius:10px;
  background:linear-gradient(160deg,#3b1d6e,#8f1d3c);
  box-shadow:0 0 12px rgba(242,183,34,.6)}
.fs.sc i{font-style:normal; font-weight:900; line-height:1.25;
  font-size:clamp(7px,2.2vw,9.5px); letter-spacing:.5px; color:#ffd968;
  text-shadow:0 1px 2px rgba(0,0,0,.7)}
/* — status + panel + idarəetmə — */
.sfstatus{min-height:22px; text-align:center; font-size:14px;
  font-weight:800; color:#ffd968; margin:8px 0 6px}
.sfpanel{display:flex; gap:6px}
.sfpbox{flex:1; background:rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.1); border-radius:10px;
  padding:6px 8px; text-align:center}
.sfpbox span{font-size:10px; color:#9aa0ab; letter-spacing:1px;
  font-weight:800}
.sfpbox b{display:block; font-size:15px; color:#fff;
  font-variant-numeric:tabular-nums}
.sfpbox.win b{color:#4cc38a}
.sfsteppers{display:flex; gap:6px; margin-top:8px}
.sfstep{flex:1; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1); border-radius:12px;
  padding:6px 8px; text-align:center}
.sfstep span{font-size:10px; color:#9aa0ab; font-weight:800;
  letter-spacing:1px}
.sfstep div{display:flex; align-items:center; gap:6px;
  justify-content:center; margin-top:3px}
.sfstep button{width:36px; height:30px; border-radius:8px; border:0;
  background:rgba(255,255,255,.1); color:#fff; font-size:18px;
  font-weight:800; cursor:pointer}
.sfstep button:disabled{opacity:.4}
.sfstep b{min-width:46px; font-size:15px; color:#fff;
  font-variant-numeric:tabular-nums}
.sfctrl{display:flex; align-items:center; gap:10px; margin-top:12px;
  justify-content:center}
.sfstart{width:92px; height:92px; border-radius:50%; cursor:pointer;
  border:3px solid #b6ffce; color:#04150c; font-size:16px; font-weight:900;
  background:radial-gradient(circle at 35% 30%, #7dffa9, #23c05c 60%,
    #0d7a36);
  box-shadow:0 0 26px rgba(76,195,138,.5),
    inset 0 3px 8px rgba(255,255,255,.5)}
.sfstart:disabled{opacity:.55}
.sfside{flex:0 0 76px; height:60px; border-radius:14px; cursor:pointer;
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06);
  color:#e8eaed; font-size:12px; font-weight:800; line-height:1.35}
.sfside.on{border-color:#4cc38a; color:#4cc38a;
  background:rgba(76,195,138,.1)}
.sfside:disabled{opacity:.45}
.sffschip{margin:8px auto 0; padding:5px 15px; border-radius:99px;
  border:1.5px solid #f2b722; color:#f2b722; font-weight:800;
  font-size:13px; width:max-content; background:rgba(242,183,34,.1)}
#sfBanner{position:fixed; inset:0; z-index:9400; display:none;
  align-items:center; justify-content:center; text-align:center;
  padding:20px; pointer-events:none; font-weight:900;
  font-size:clamp(24px,8vw,40px); color:#ffd968;
  background:rgba(10,4,16,.62);
  text-shadow:0 0 24px rgba(242,183,34,.85), 0 3px 10px rgba(0,0,0,.6)}
#sfBanner.on{display:flex; animation:sfpop .4s cubic-bezier(.2,1.6,.4,1)}
@keyframes sfpop{from{transform:scale(.5); opacity:0}
  to{transform:scale(1); opacity:1}}
/* — Gamble — */
#sfgOv{position:fixed; inset:0; z-index:9450; display:none;
  align-items:center; justify-content:center; background:rgba(0,0,0,.66);
  padding:20px}
#sfgOv.on{display:flex}
.sfgbox{background:linear-gradient(160deg,#241247,#160b30);
  border:2px solid #f2b722; border-radius:20px; padding:20px; width:100%;
  max-width:340px; text-align:center;
  box-shadow:0 0 34px rgba(242,183,34,.4)}
.sfgres{min-height:26px; font-weight:800; color:#ffd968; margin:6px 0}
.sfgtake{width:100%; border:0; border-radius:14px; padding:13px;
  font-weight:800; font-size:15px; cursor:pointer;
  background:linear-gradient(135deg,#f2b722,#e08a1e); color:#2a1c00}

/* ============ v2: xətt cızma, cekpot, antic, dim ============ */
.sfwrap{position:relative}
#sfSvg{position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:4}
.sfbadge{position:absolute; z-index:5; display:none; padding:2px 9px;
  border-radius:6px; background:#0d0510; border:2px solid #fff;
  font-weight:900; font-size:12px; color:#fff;
  font-variant-numeric:tabular-nums}
.sfcell.sfdim .fs{opacity:.26; filter:saturate(.4) brightness(.55);
  transition:opacity .15s}
.sfcell.sfglow .fs{animation:sfwpulse .5s ease-in-out infinite alternate}
@keyframes sfwpulse{
  from{transform:scale(1); filter:drop-shadow(0 0 4px rgba(255,255,180,.4))}
  to{transform:scale(1.12);
     filter:drop-shadow(0 0 14px rgba(255,255,180,.95))}}
.sfcell.sfantic{border-color:#ffdf8e;
  animation:sfanticK .4s ease-in-out infinite alternate; z-index:3}
@keyframes sfanticK{from{box-shadow:0 0 6px rgba(242,183,34,.4)}
  to{box-shadow:0 0 22px rgba(255,223,142,.95)}}
.sfjp{display:flex; align-items:center; justify-content:center; gap:8px;
  margin:0 0 8px; padding:7px 10px; border-radius:12px;
  border:1.5px solid rgba(229,72,77,.5);
  background:linear-gradient(180deg,rgba(229,72,77,.16),rgba(229,72,77,.05))}
.sfjp span{font-size:11px; font-weight:900; letter-spacing:1.5px;
  color:#ff9297}
.sfjp b{font-size:17px; font-weight:900; color:#ffd968;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 10px rgba(242,183,34,.5)}
.sfpbox i{display:block; font-style:normal; font-size:10px;
  color:#9aa0ab; margin-top:1px}
.sfstart.stop{background:radial-gradient(circle at 35% 30%, #ff9d4d,
  #e5484d 60%, #a31d24); border-color:#ffc4c4; color:#fff}
.sfstart.take{animation:sftakeP .8s ease-in-out infinite alternate}
@keyframes sftakeP{from{box-shadow:0 0 14px rgba(76,195,138,.4)}
  to{box-shadow:0 0 34px rgba(76,195,138,.95)}}

/* ============ v3: Gamble kart animasiyası ============ */
.sfcardwrap{display:flex; justify-content:center; margin:4px 0 8px;
  perspective:600px}
.sfcard{width:74px; height:104px; border-radius:12px; display:flex;
  align-items:center; justify-content:center; font-size:44px;
  font-weight:900; color:#fff; border:2.5px solid #ffdf8e;
  background:linear-gradient(160deg,#3b1d6e,#241247);
  box-shadow:0 4px 14px rgba(0,0,0,.5); will-change:transform}
.sfcard.back{color:#ffd968; font-size:34px}
.sfcard.flip{animation:sfflip .45s linear infinite}
@keyframes sfflip{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
.sfcard.show{animation:sfreveal .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes sfreveal{from{transform:rotateY(90deg) scale(.8)}
  to{transform:rotateY(0) scale(1)}}
.sfcard.red{background:linear-gradient(160deg,#a41425,#5c0a14);
  border-color:#ff8a8a; color:#ff5a5f}
.sfcard.black{background:linear-gradient(160deg,#2a2b33,#0d0e12);
  border-color:#c0c0c8; color:#e8eaed}

/* ============ v4: START halqası ============ */
.sfstartwrap{position:relative; display:flex}
.sfring{position:absolute; inset:-7px; border-radius:50%;
  pointer-events:none; border:3px solid transparent;
  border-top-color:rgba(125,255,169,.9);
  border-right-color:rgba(125,255,169,.22);
  animation:sfringR 2.2s linear infinite; will-change:transform}
@keyframes sfringR{to{transform:rotate(360deg)}}

/* ============ v5: yan xətt çipləri + info pəncərəsi ============ */
.sfframerow{display:flex; align-items:stretch; gap:3px}
.sfframerow .sfframe{flex:1; min-width:0}
.sfchips{display:flex; flex-direction:column; justify-content:space-between;
  padding:6px 0; gap:2px; width:17px}
.sfchip{display:flex; align-items:center; justify-content:center;
  flex:1; min-height:0; border-radius:4px; font-size:8.5px;
  font-weight:900; font-style:normal; color:#0d0510; opacity:.92;
  transition:opacity .2s, transform .15s}
.sfchip.off{opacity:.12}
.sfchip.on{transform:scale(1.4); box-shadow:0 0 9px rgba(255,255,255,.8);
  z-index:2}
.sfiBtn{width:34px; height:34px; border-radius:50%; flex-shrink:0;
  border:1px solid rgba(138,180,248,.4); background:rgba(138,180,248,.1);
  color:#8ab4f8; font-weight:900; font-size:16px; cursor:pointer;
  font-style:italic; font-family:Georgia,serif}
#sfiOv{position:fixed; inset:0; z-index:9460; display:none;
  align-items:center; justify-content:center; background:rgba(0,0,0,.7);
  padding:16px}
#sfiOv.on{display:flex}
.sfibox{background:linear-gradient(160deg,#241247,#160b30);
  border:2px solid #f2b722; border-radius:20px; padding:16px;
  width:100%; max-width:380px; max-height:82vh; overflow-y:auto;
  box-shadow:0 0 34px rgba(242,183,34,.35)}
.sfit{font-weight:900; color:#ffd968; font-size:17px; text-align:center;
  margin-bottom:8px}
.sfirow{display:flex; align-items:center; gap:8px; padding:7px 4px;
  border-bottom:1px solid rgba(255,255,255,.07)}
.sfisym{width:44px; height:44px; flex-shrink:0; display:flex;
  align-items:center; justify-content:center}
.sfisym .fs{width:44px; height:44px}
.sfisym .fs.sev{font-size:28px}
.sfisym .fs.emo{font-size:26px}
.sfisym .fs.bar i{font-size:8px; padding:1.5px 5px}
.sfiname{flex:1; font-size:12.5px; font-weight:700; color:#cfd3da}
.sfipays{display:flex; flex-direction:column; gap:1px; text-align:right}
.sfipays i{font-style:normal; font-size:11px; color:#9aa0ab}
.sfipays b{color:#ffd968; font-variant-numeric:tabular-nums}
.sfinote{font-size:12.5px; color:#cfd3da; line-height:1.6; padding:9px 4px;
  border-bottom:1px solid rgba(255,255,255,.07)}

/* ============ v6: vizual cilalanma ============ */
/* — Meyvələr: canlı doyğunluq + hər meyvəyə öz rəngli halosu — */
.fs.emo{font-size:clamp(27px,8.2vw,42px);
  filter:saturate(1.25) drop-shadow(0 3px 5px rgba(0,0,0,.7))}
.fs.emo.wm{filter:saturate(1.3) drop-shadow(0 3px 5px rgba(0,0,0,.6))
  drop-shadow(0 0 11px rgba(96,220,130,.5))}
.fs.emo.gr{filter:saturate(1.3) drop-shadow(0 3px 5px rgba(0,0,0,.6))
  drop-shadow(0 0 11px rgba(148,110,255,.5))}
.fs.emo.pl{filter:saturate(1.3) drop-shadow(0 3px 5px rgba(0,0,0,.6))
  drop-shadow(0 0 11px rgba(150,120,255,.45))}
.fs.emo.or{filter:saturate(1.35) drop-shadow(0 3px 5px rgba(0,0,0,.6))
  drop-shadow(0 0 11px rgba(255,160,60,.55))}
.fs.emo.le{filter:saturate(1.3) drop-shadow(0 3px 5px rgba(0,0,0,.6))
  drop-shadow(0 0 11px rgba(255,220,80,.5))}
.fs.emo.ch{filter:saturate(1.35) drop-shadow(0 3px 5px rgba(0,0,0,.6))
  drop-shadow(0 0 11px rgba(255,80,110,.55))}
/* — «7»: qızıl konturlu premium — */
.fs.sev{font-size:clamp(32px,10vw,50px);
  -webkit-text-stroke:1px #ffd968;
  text-shadow:0 0 16px rgba(255,60,60,.9), 0 3px 0 #6e0808,
    0 -1px 0 #ffc9c9, 0 0 30px rgba(255,120,60,.4)}
/* — Çiplər: tünd-metalik bevel — */
.sfchip{border-radius:5px; color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.8);
  border:1px solid rgba(0,0,0,.55);
  background-image:linear-gradient(180deg, rgba(255,255,255,.3) 0%,
    rgba(255,255,255,.05) 45%, rgba(0,0,0,.35) 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.4),
    inset 0 -1px 2px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.5)}
/* — Çərçivə: neon divarlar + künc daş-qaşları — */
.sfframe{border:2px solid #ff3d6e; border-radius:18px; padding:8px;
  position:relative;
  background:linear-gradient(180deg,#1b0a22,#0c040f);
  box-shadow:0 0 0 1.5px rgba(255,223,142,.4) inset,
    0 0 26px rgba(255,61,110,.35), 0 0 60px rgba(124,92,255,.12),
    inset 0 0 28px rgba(0,0,0,.7)}
.sfframe::before{content:""; position:absolute; inset:-4px;
  border-radius:21px; pointer-events:none;
  background:
    radial-gradient(circle at 12px 12px, #ffdf8e 3px,
      rgba(255,61,110,.6) 5px, transparent 7px)
      left top / 24px 24px no-repeat,
    radial-gradient(circle at 12px 12px, #ffdf8e 3px,
      rgba(255,61,110,.6) 5px, transparent 7px)
      right top / 24px 24px no-repeat,
    radial-gradient(circle at 12px 12px, #ffdf8e 3px,
      rgba(255,61,110,.6) 5px, transparent 7px)
      left bottom / 24px 24px no-repeat,
    radial-gradient(circle at 12px 12px, #ffdf8e 3px,
      rgba(255,61,110,.6) 5px, transparent 7px)
      right bottom / 24px 24px no-repeat}
.sfcell{border-color:rgba(255,61,110,.25);
  background:linear-gradient(180deg,#1c0c24,#0e0513)}
/* — Cekpot lövhəsi: qızıl brilyantlı, işıq zolaqlı — */
.sfjp{position:relative; overflow:hidden; gap:7px;
  border:1.5px solid rgba(242,183,34,.55);
  background:linear-gradient(180deg,#241028,#160a18);
  box-shadow:0 0 18px rgba(242,183,34,.18),
    inset 0 1px 2px rgba(255,255,255,.12)}
.sfjp::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 42%,
    rgba(255,255,255,.18) 50%, transparent 58%);
  animation:sfshineJp 3.6s linear infinite}
@keyframes sfshineJp{from{transform:translateX(-70%)}
  to{transform:translateX(70%)}}
.sfjpgem{width:20px; height:20px; flex-shrink:0;
  filter:drop-shadow(0 0 6px rgba(255,217,104,.8));
  animation:sfgemP 1.8s ease-in-out infinite alternate}
@keyframes sfgemP{from{transform:scale(1)}to{transform:scale(1.15)}}
.sfjp .sfjpt{font-size:13px; font-weight:900; letter-spacing:2.5px;
  background:linear-gradient(180deg,#fff3c4,#f2b722 60%,#c9820a);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.sfjp b{font-size:18px}

/* v7: yuxarı depozit/çıxarış düymələri */
.sfiBtn.sfdep{color:#4cc38a; border-color:rgba(76,195,138,.4);
  background:rgba(76,195,138,.1); font-style:normal; font-family:inherit;
  font-size:14px}
.sfiBtn.sfwd{color:#ff9297; border-color:rgba(229,72,77,.4);
  background:rgba(229,72,77,.1); font-style:normal; font-family:inherit;
  font-size:14px}


/* ============ v8: professional yuxarı panel + sol-aşağı info ============ */
.sfmoney{display:flex; align-items:center; gap:5px; padding:8px 11px;
  border-radius:12px; font-size:12.5px; font-weight:800; cursor:pointer;
  border:1px solid; flex-shrink:0;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.14),
    0 2px 6px rgba(0,0,0,.35)}
.sfmoney svg{width:15px; height:15px; display:block}
.sfmoney.dep{color:#7ee2a8; border-color:rgba(76,195,138,.5);
  background:linear-gradient(180deg, rgba(76,195,138,.2),
    rgba(76,195,138,.05))}
.sfmoney.wd{color:#ff9aa0; border-color:rgba(229,72,77,.5);
  background:linear-gradient(180deg, rgba(229,72,77,.18),
    rgba(229,72,77,.05))}
.sfmoney:active{transform:scale(.95)}
.sftitle{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  min-width:0}
/* idarəetmə cərgəsi: info solda, qalanlar bərabər paylanır */
.sfctrl{justify-content:space-between; padding:0 4px}
.sfinfo2{width:44px; height:44px; border-radius:50%; flex-shrink:0;
  border:1px solid rgba(138,180,248,.4); background:rgba(138,180,248,.08);
  color:#8ab4f8; font-weight:900; font-size:16px; font-style:italic;
  font-family:Georgia,serif; cursor:pointer; align-self:flex-end}
.sfinfo2:active{transform:scale(.93)}


/* v9: səs düyməsi */
.sfmutebtn{width:36px; height:36px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  border:1px solid rgba(242,183,34,.4); background:rgba(242,183,34,.08);
  color:#f2b722; padding:7px}
.sfmutebtn svg{width:100%; height:100%; display:block}
.sfmutebtn.offm{color:#8a8f9c; border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.05)}
.sfmutebtn:active{transform:scale(.93)}


/* v10: başlıq ayrıca sətirdə, START mərkəzdə */
.sftitlerow{text-align:center; font-size:19px; font-weight:900;
  margin:0 0 7px; letter-spacing:.5px;
  background:linear-gradient(135deg,#ff5a5f,#f2b722);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.sfinfo2.intop{width:36px; height:36px; align-self:center; font-size:15px}
/* idarəetmə cərgəsi yenidən mərkəzdə */
.sfctrl{justify-content:center; gap:14px; padding:0}


/* ============ v11: vektor simvollar + premium BAR/SC ============ */
.fs.emo svg,.fs.sev svg{width:90%; height:90%; display:block}
.fs.sev{-webkit-text-stroke:0; text-shadow:none;
  filter:drop-shadow(0 0 10px rgba(255,60,60,.7))
    drop-shadow(0 3px 4px rgba(0,0,0,.55))}
/* BAR: metalik plitələr */
.fs.bar i{font-size:clamp(9px,2.9vw,13px); padding:2.5px 8px;
  border-radius:6px; border:1px solid rgba(255,255,255,.35);
  letter-spacing:1px; transform:skewX(-4deg);
  background:linear-gradient(180deg,#8ec2ff 0%,#2e6fd4 45%,#123c86 100%);
  box-shadow:0 2px 3px rgba(0,0,0,.55),
    inset 0 1px 1px rgba(255,255,255,.6), inset 0 -2px 3px rgba(0,0,0,.35);
  text-shadow:0 1px 2px rgba(0,0,0,.7)}
.fs.bar.b i{background:linear-gradient(180deg,#ff9ec6 0%,#d4367e 45%,
  #7c1145 100%)}
/* EXTRA SUPER 7 nişanı: premium lövhə + işıq süzülməsi */
.fs.sc{position:relative; overflow:hidden; padding:4px 9px;
  border:2px solid #ffd968; border-radius:11px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.18),
      transparent 45%),
    linear-gradient(150deg,#4a1f8f 0%,#7c1d5c 55%,#a3132f 100%);
  box-shadow:0 0 14px rgba(242,183,34,.65),
    inset 0 0 0 1.5px rgba(255,255,255,.22),
    inset 0 2px 5px rgba(0,0,0,.45)}
.fs.sc::after{content:""; position:absolute; inset:-30%;
  background:linear-gradient(115deg, transparent 42%,
    rgba(255,255,255,.35) 50%, transparent 58%);
  animation:sfscShine 2.8s linear infinite; pointer-events:none}
@keyframes sfscShine{from{transform:translateX(-60%)}
  to{transform:translateX(60%)}}
.fs.sc i{color:transparent; text-shadow:none;
  background:linear-gradient(180deg,#fff3c4,#f2b722 65%,#cf8b0e);
  -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.8))}
.fs.sc i:nth-child(3){font-size:clamp(11px,3.6vw,15px); line-height:1;
  background:linear-gradient(180deg,#ff9d9d,#e6202f 60%,#8f0d18);
  -webkit-background-clip:text; background-clip:text}


/* ============ v12: 3D kənarlar ============ */
/* BAR plitələri: alt kənar (ləj) - 3D çip effekti */
.fs.bar i{box-shadow:0 3px 0 #0c2a5e, 0 5px 5px rgba(0,0,0,.5),
  inset 0 1px 1px rgba(255,255,255,.6), inset 0 -2px 3px rgba(0,0,0,.35)}
.fs.bar.b i{box-shadow:0 3px 0 #4d0a2c, 0 5px 5px rgba(0,0,0,.5),
  inset 0 1px 1px rgba(255,255,255,.6), inset 0 -2px 3px rgba(0,0,0,.35)}
/* EXTRA SUPER 7 nişanı: alt kənar + dərin kölgə */
.fs.sc{box-shadow:0 3px 0 #3a1428, 0 6px 10px rgba(0,0,0,.45),
  0 0 14px rgba(242,183,34,.6),
  inset 0 0 0 1.5px rgba(255,255,255,.22),
  inset 0 2px 5px rgba(0,0,0,.45)}


/* ============ v13: 7 geri - mətn əsaslı, qızıl konturlu ============ */
.fs.sev{font-size:clamp(32px,10vw,50px); font-weight:900; font-style:italic;
  color:#ff2222; -webkit-text-stroke:1px #ffd968;
  text-shadow:0 0 16px rgba(255,60,60,.9), 0 3px 0 #6e0808,
    0 -1px 0 #ffc9c9, 0 0 30px rgba(255,120,60,.4);
  filter:none}


/* ============ v14: yüngül lent tokenləri ============ */
.sfrt{width:64%; height:64%; border-radius:50%; display:flex;
  align-items:center; justify-content:center;
  box-shadow:inset 0 -3px 5px rgba(0,0,0,.35),
    inset 0 2px 3px rgba(255,255,255,.4), 0 2px 4px rgba(0,0,0,.4)}
.sfrt.bar{width:74%; height:34%; border-radius:7px; font-size:11px;
  font-weight:900; font-style:normal; color:#fff; letter-spacing:1px;
  background:linear-gradient(180deg,#8ec2ff,#2e6fd4 60%,#123c86);
  text-shadow:0 1px 2px rgba(0,0,0,.6)}
.sfrt.sev{background:none; box-shadow:none; border-radius:0;
  font-size:clamp(26px,8vw,40px); font-weight:900; font-style:italic;
  color:#ff2222; -webkit-text-stroke:1px #ffd968;
  text-shadow:0 2px 3px rgba(0,0,0,.5)}


/* ============ v15: canlı animasiya paketi ============ */

/* — 1. Hissəcik qatı (sikkə/qığılcım partlayışı) — */
#sfFx{position:fixed; inset:0; z-index:9480; pointer-events:none;
  overflow:hidden; contain:strict}
.sfp{position:absolute; width:13px; height:13px; border-radius:50%;
  will-change:transform,opacity; opacity:0;
  animation:sfpFly var(--d,1.15s) cubic-bezier(.12,.72,.35,1) forwards}
@keyframes sfpFly{
  0%{transform:translate(0,0) scale(.35) rotate(0); opacity:0}
  10%{opacity:1}
  70%{opacity:1}
  100%{transform:translate(var(--x),var(--y)) scale(var(--s,1))
       rotate(var(--r,180deg)); opacity:0}}
.sfp.coin{background:radial-gradient(circle at 34% 28%,#fff6d0,
  #f2b722 55%,#a8760a);
  box-shadow:0 0 9px rgba(255,217,104,.85), inset 0 -2px 3px rgba(0,0,0,.3)}
.sfp.spark{width:7px; height:7px;
  background:radial-gradient(circle,#fff 20%,#ff9d4d 60%,transparent 75%);
  box-shadow:0 0 11px rgba(255,157,77,.9)}
.sfp.star{width:9px; height:9px; border-radius:2px;
  background:radial-gradient(circle,#fff,#8ab4f8 65%,transparent);
  box-shadow:0 0 10px rgba(138,180,248,.9)}

/* — 3. Dayanma zərbəsi: yalnız sıxılma —
   ⚠ Əvvəl burada ::after ilə ağ örtük (işıq çaxması) vardı: 42% ağ + 9px
   künc radiusu. Xana isə künclüsüz və demək olar qara olduğu üçün bu,
   "çaxma" yox, hər meyvənin arxasında 0.3 saniyəlik BOZ QUTU kimi
   görünürdü. Lent artıq həqiqi yavaşlama ilə oturduğuna görə əlavə işıq
   lazım deyil - fiziki sıxılma zərbəni özü çatdırır. */
.sfcell.impact{animation:sfimp .28s cubic-bezier(.3,1.35,.5,1)}
@keyframes sfimp{
  0%{transform:scale(1.03,1.09)}
  45%{transform:scale(1.03,.93)}
  100%{transform:scale(1,1)}}
.sfframe.shake{animation:sfshk .26s ease-in-out}
@keyframes sfshk{
  0%,100%{transform:translateY(0)}
  30%{transform:translateY(3px)}
  65%{transform:translateY(-2px)}}

/* — 4. Qazanan simvol: qızıl halqa + döyünmə — */
.sfcell.sfglow{border-color:#ffd968; z-index:4}
/* ⚠ Burada ikinci qızıl halqa (::before) vardı: SVG-nin çəkdiyi uduş
   kvadratı ilə üst-üstə düşür, üstəlik inset işığı xananın arxasını
   ağardırdı. Kontur artıq yalnız SVG qatındadır (v28). */
.sfcell.sfglow .fs{animation:sfwpulse .5s ease-in-out infinite alternate,
  sfwpop .32s cubic-bezier(.25,1.5,.45,1)}
@keyframes sfwpop{from{transform:scale(.72)} to{transform:scale(1)}}

/* — 5. Antisipasiya: 5-ci çarxa projektor — */
.sfframerow.antic .sfcell:not(.sfantic){filter:brightness(.5) saturate(.6)}
.sfcell.sfantic{border-color:#ffdf8e; z-index:5}
.sfframerow.antic .sfframe{box-shadow:0 0 0 1.5px rgba(255,223,142,.8) inset,
  0 0 34px rgba(242,183,34,.6), inset 0 0 28px rgba(0,0,0,.7);
  animation:sfanticFr .5s ease-in-out infinite alternate}
@keyframes sfanticFr{from{border-color:#ff3d6e} to{border-color:#ffd968}}

/* — 6. BÖYÜK UDUŞ ekranı — */
#sfBig{position:fixed; inset:0; z-index:9490; display:none;
  align-items:center; justify-content:center; pointer-events:none;
  background:radial-gradient(circle at 50% 45%, rgba(60,20,80,.72),
    rgba(6,3,10,.9) 70%)}
#sfBig.on{display:flex; animation:sfbgFade .3s ease-out}
@keyframes sfbgFade{from{opacity:0} to{opacity:1}}
.sfbgRays{position:absolute; width:180vmax; height:180vmax;
  border-radius:50%; opacity:.32;
  background:repeating-conic-gradient(from 0deg,
    rgba(255,217,104,.55) 0deg 6deg, transparent 6deg 18deg);
  animation:sfrayR 14s linear infinite;
  -webkit-mask-image:radial-gradient(circle,#000 12%,transparent 62%);
  mask-image:radial-gradient(circle,#000 12%,transparent 62%)}
@keyframes sfrayR{to{transform:rotate(360deg)}}
.sfbgIn{position:relative; text-align:center; padding:0 18px;
  animation:sfbgIn .5s cubic-bezier(.2,1.55,.35,1)}
@keyframes sfbgIn{from{transform:scale(.5); opacity:0}
  to{transform:scale(1); opacity:1}}
.sfbgT{font-size:clamp(22px,7.5vw,34px); font-weight:900; letter-spacing:2px;
  background:linear-gradient(180deg,#fff6d0,#f2b722 55%,#c9820a);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.7))}
.sfbgV{font-size:clamp(40px,14vw,68px); font-weight:900; color:#fff;
  line-height:1.1; margin:6px 0 2px; font-variant-numeric:tabular-nums;
  text-shadow:0 0 24px rgba(255,217,104,.9), 0 4px 0 #7a4a06,
    0 6px 14px rgba(0,0,0,.7)}
.sfbgS{font-size:clamp(13px,4vw,17px); font-weight:800; color:#ffd968;
  letter-spacing:1px; opacity:.9}
.sfbgIn.mega .sfbgT{background:linear-gradient(180deg,#ffd0f0,#ff5ab4 55%,
  #a3126a); -webkit-background-clip:text; background-clip:text}
.sfbgIn.mega .sfbgV{text-shadow:0 0 26px rgba(255,90,180,.9),
  0 4px 0 #6b0a44, 0 6px 14px rgba(0,0,0,.7)}
.sfbgIn.epic .sfbgT{background:linear-gradient(180deg,#d8fff0,#2ae0c0 55%,
  #0b7a68); -webkit-background-clip:text; background-clip:text}
.sfbgIn.epic .sfbgV{text-shadow:0 0 28px rgba(42,224,192,.9),
  0 4px 0 #06584c, 0 6px 14px rgba(0,0,0,.7)}

/* — 7. Frispin giriş/çıxış ekranı — */
#sfFso{position:fixed; inset:0; z-index:9492; display:none;
  align-items:center; justify-content:center; pointer-events:none;
  background:radial-gradient(circle at 50% 45%, rgba(90,25,60,.8),
    rgba(8,3,12,.94) 72%)}
#sfFso.on{display:flex; animation:sfbgFade .28s ease-out}
.sffsIn{position:relative; text-align:center; padding:0 18px;
  animation:sffsIn .55s cubic-bezier(.2,1.5,.35,1)}
@keyframes sffsIn{from{transform:scale(.4) rotate(-8deg); opacity:0}
  to{transform:scale(1) rotate(0); opacity:1}}
.sffsBig{font-size:clamp(56px,20vw,96px); font-weight:900; line-height:1;
  font-style:italic; color:#fff;
  text-shadow:0 0 30px rgba(255,90,140,.95), 0 5px 0 #6b0a2c,
    0 8px 18px rgba(0,0,0,.75)}
.sffsT{font-size:clamp(20px,7vw,32px); font-weight:900; letter-spacing:4px;
  margin-top:2px;
  background:linear-gradient(180deg,#fff6d0,#f2b722 55%,#c9820a);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.7))}
.sffsM{margin-top:9px; display:inline-block; padding:5px 18px;
  border-radius:99px; font-size:clamp(15px,5vw,21px); font-weight:900;
  color:#241247; background:linear-gradient(180deg,#fff3c4,#f2b722);
  box-shadow:0 3px 0 #a8760a, 0 6px 14px rgba(0,0,0,.5)}
.sffsSub{margin-top:10px; font-size:clamp(12px,3.8vw,15px);
  font-weight:800; color:#cfd3da}

/* — 8. Uduş lövhəsi sayğacı — */
.sfpbox.win b{transition:color .2s}
.sfpbox.win.count b{color:#ffd968; text-shadow:0 0 10px rgba(255,217,104,.7)}
.sfpbox b{font-variant-numeric:tabular-nums}

/* — 9. Cekpot lövhəsi: uduş anında alovlanma — */
.sfjp.hit{animation:sfjpHit .5s ease-in-out 5 alternate}
@keyframes sfjpHit{from{box-shadow:0 0 18px rgba(242,183,34,.2)}
  to{box-shadow:0 0 34px rgba(242,183,34,.95),
     inset 0 0 18px rgba(242,183,34,.4)}}

/* — 10. Hərəkət azaldılması istəyi — */
@media (prefers-reduced-motion: reduce){
  .sfbgRays,.sfp{animation-duration:.01ms !important}
  .sfcell.impact,.sfframe.shake{animation:none}
}

/* — v15 cilalama — */
/* yerə düşən scatter antisipasiya zamanı tam parlaq qalır */
.sfframerow.antic .sfcell:not(.sfantic):not(.sfsc){
  filter:brightness(.45) saturate(.55)}
.sfframerow.antic .sfcell.sfsc{border-color:#ffd968; z-index:5;
  box-shadow:0 0 14px rgba(255,217,104,.75)}
/* frispin yekunu: uzun məbləğ ekrana sığsın */
.sffsBig.sum{font-size:clamp(34px,11.5vw,60px); white-space:nowrap}
/* böyük uduş şüaları: daha yumşaq, mətnin arxasında toplanır */
.sfbgRays{width:130vmax; height:130vmax; opacity:.2;
  -webkit-mask-image:radial-gradient(circle,#000 4%,
    rgba(0,0,0,.55) 22%,transparent 46%);
  mask-image:radial-gradient(circle,#000 4%,
    rgba(0,0,0,.55) 22%,transparent 46%)}
/* Logo EKRANIN LAP YUXARISINDA dayanır (mərkəzləmə onu aşağı salırdı).
   Artıq şaquli boşluq idarəetmə cərgəsinin üstünə toplanır - çarxlar
   yuxarıda, START aşağıda. Alçaq ekranda auto-margin sıfıra düşür. */
.sfpanel{margin-top:auto}
.sfctrl{padding-top:14px}


/* ============ v16: PNG simvol dəsti ============ */
/* Simvollar static/img/sf/*.png — 256×256, şəffaf fonlu.
   Kölgə/parıltı burada verilir ki, uduş animasiyaları (glow/dim/pop)
   şəkillərə də tətbiq olunsun. */
.fs.png{width:100%; height:100%; padding:2%; box-sizing:border-box}
.fs.png img,.fs.png canvas{width:100%; height:100%; object-fit:contain; display:block;
  -webkit-user-drag:none; user-select:none; pointer-events:none;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.6))}
/* «7» və scatter bir az iri dursun - onlar əsas simvollardır */
.fs.png.p-sev,.fs.png.p-sc{padding:0}
.fs.png.p-sc img,.fs.png.p-sc canvas{filter:drop-shadow(0 3px 5px rgba(0,0,0,.55))
  drop-shadow(0 0 10px rgba(242,183,34,.55))}
.fs.png.p-sev img,.fs.png.p-sev canvas{filter:drop-shadow(0 3px 5px rgba(0,0,0,.55))
  drop-shadow(0 0 10px rgba(255,60,60,.5))}
/* BAR plitələri enli olduğu üçün şaquli boşluq artıq */
.fs.png.p-b,.fs.png.p-bb{padding:4% 2%}

/* uduş cədvəlində (ⓘ) kiçik variant */
.sfisym .fs.png{padding:0}
.sfisym .fs.png img,.sfisym .fs.png canvas{filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
/* cədvəl mətnində sətir içi simvol ikonu */
.sfico{width:21px; height:21px; object-fit:contain; display:inline-block;
  vertical-align:-5px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}

/* oyunun logosu (başlıq sətri əvəzinə) */
/* Mərkəzləmə FLEX ilə edilir: `margin:0 auto` avto-enli şəkildə bəzi
   WebView-larda (Telegram) sıfıra düşür və logo sola qaçırdı.
   Ölçü də ENƏ əsaslanır - `vh` Telegram mini-app-da etibarsızdır
   (WebView hündürlüyü dinamik dəyişir, logo kiçilib qalırdı). */
.sftitlerow.logo{display:flex; align-items:center; justify-content:center;
  width:100%; background:none; filter:none; font-size:0; line-height:0;
  margin:0 0 6px; padding:0; letter-spacing:0}
.sftitlerow.logo img,.sftitlerow.logo canvas{display:block; flex:0 0 auto;
  width:min(88%, 360px); height:auto; max-width:88%;
  -webkit-user-drag:none; user-select:none;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.55))}

/* Alçaq ekran / Telegram-ın yarımçıq pəncərəsi: hər şey kadra sığsın.
   Logo əlavə hündürlük tutduğu üçün START aşağı düşürdü. */
@media (max-height: 730px){
  .sftitlerow.logo{margin-bottom:4px}
  .sftitlerow.logo img,.sftitlerow.logo canvas{width:min(42%, 160px)}
  .sfstatus{min-height:17px; font-size:13px}
  .sfsteppers{margin-top:5px}
  .sfctrl{padding-top:6px; gap:10px}
  .sfstart{width:78px; height:78px; font-size:15px}
  .sfside{flex:0 0 66px; height:52px; font-size:11px}
  .sfjp{padding:5px 10px}
  .sfjp b{font-size:16px}
}
@media (max-height: 600px){
  .sftitlerow.logo img,.sftitlerow.logo canvas{width:min(32%, 120px)}
  .sfstart{width:68px; height:68px}
  .sfside{height:46px}
  .sfpbox{padding:4px 4px}
  .sfstep div{padding:3px 4px}
  .sfstep button{height:26px}
  /* ən böyük qənaət: xanalar bir az alçalır */
  .sfcell{aspect-ratio:3/3.15}
  .sfframe{padding:5px}
  .sfchip{font-size:9px}
  .sfstatus{min-height:14px; font-size:12px}
  .sfjp{padding:3px 8px}
  .sfctrl{padding-top:2px}
}
/* dar ekranda "‹ Geri" iki sətrə düşürdü */
.sfback{white-space:nowrap}


/* ============ v17: gamble kartları + şəkilli düymələr ============ */
/* — Kart artıq <img>-dir: rəng/naxış şəklin özündədir — */
.sfcard{width:clamp(80px, 25vw, 108px); height:auto; aspect-ratio:156/230;
  border:0; padding:0; border-radius:9px; overflow:hidden;
  background:none; box-shadow:none; object-fit:contain; display:block;
  -webkit-user-drag:none; user-select:none;
  filter:drop-shadow(0 6px 13px rgba(0,0,0,.65))}
.sfcard.back,.sfcard.red,.sfcard.black{background:none; box-shadow:none;
  color:transparent; font-size:0}
/* tam dövr .56s - arxa şəkli 140/420ms-də (profil anında) dəyişir */
.sfcard.flip{animation:sfflip .56s linear infinite}
.sfcard.show{animation:sfreveal .42s cubic-bezier(.2,1.4,.4,1)}

/* — GAMBLE / AUTO: şəkil düymələr — */
.sfside.btnimg{background:none; border:0; box-shadow:none; padding:0;
  display:flex; align-items:center; justify-content:center}
.sfside.btnimg b{display:none}
.sfside.btnimg img,.sfside.btnimg canvas{width:100%; height:100%; object-fit:contain; display:block;
  pointer-events:none; -webkit-user-drag:none;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.55))}
#sfAuto.btnimg{flex:0 0 74px; height:74px}
#sfGamble.btnimg{flex:0 0 100px; height:58px}
.sfside.btnimg:disabled{opacity:.42; filter:grayscale(.65)}
.sfside.btnimg:active{transform:scale(.93)}
/* AUTO aktivdirsə - yaşıl işıq (çərçivə yoxdur, ona görə parıltı ilə) */
.sfside.btnimg.on img{filter:drop-shadow(0 0 11px rgba(76,195,138,.95))
  drop-shadow(0 3px 7px rgba(0,0,0,.55))}
.sfside.btnimg.on{animation:sfautoP 1.1s ease-in-out infinite alternate}
@keyframes sfautoP{from{transform:scale(1)} to{transform:scale(1.05)}}

/* alçaq ekranlarda düymələr kiçilir */
@media (max-height: 730px){
  #sfAuto.btnimg{flex:0 0 62px; height:62px}
  #sfGamble.btnimg{flex:0 0 86px; height:50px}
  .sfcard{width:clamp(72px, 22vw, 94px)}
}
@media (max-height: 600px){
  #sfAuto.btnimg{flex:0 0 54px; height:54px}
  #sfGamble.btnimg{flex:0 0 74px; height:44px}
}


/* ============ v18: avtospin sayı seçimi ============ */
.sfauto{display:none; gap:5px; margin-top:8px}
.sfauto.on{display:flex; animation:sfapIn .18s ease-out}
@keyframes sfapIn{from{opacity:0; transform:translateY(6px)}
  to{opacity:1; transform:translateY(0)}}
.sfauto button{flex:1; padding:10px 0; border-radius:11px; cursor:pointer;
  border:1.5px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05);
  color:#fff; font-size:13px; font-weight:800}
.sfauto button:active{transform:scale(.94)}
.sfauto button.stop{border-color:rgba(229,72,77,.55); color:#ff9297}
/* AUTO düyməsində qalan spin sayı nişanı */
.sfside.btnimg{position:relative}
.sfautoN{position:absolute; right:-4px; top:-4px; z-index:2;
  display:none; align-items:center; justify-content:center;
  min-width:24px; height:22px; padding:0 6px; border-radius:99px;
  font-style:normal; font-size:12px; font-weight:900; color:#08240f;
  background:linear-gradient(180deg,#8af0b4,#4cc38a);
  border:1.5px solid #0d3a1e;
  box-shadow:0 2px 5px rgba(0,0,0,.5), 0 0 9px rgba(76,195,138,.6)}


/* ============ v19-fix: scrollbar rəqs dövrəsi (web/desktop) ============ */
/* Məzmun sərhəddə olanda klassik scrollbar çıxıb-itərək eni dəyişirdi;
   en dəyişəndə vw-yə bağlı ölçülər də dəyişib məzmunu yenidən sığdırır/
   daşırırdı - ekran fasiləsiz böyüyüb-kiçilirdi. scrollbar-gutter yeri
   həmişə saxlayır - en sabit qalır, dövrə qırılır. */
/* Oyun ekranında scrollbar TAM gizlədilir: animasiyalar (çip scale,
   parıltılar) daşmanı px səviyyəsində dəyişəndə çubuq görünüb-itirdi -
   "yanıb-sönmə". Sürüşmə funksiyası qalır (barmaq/təkər), sadəcə çubuq
   çəkilmir - heç bir en/hündürlük dəyişməsi mümkün deyil. */
#sfScreen{overflow-x:hidden; scrollbar-width:none; -ms-overflow-style:none}
#sfScreen::-webkit-scrollbar{display:none; width:0; height:0}


/* ============ v21: PEŞƏKAR KABİNET GÖRÜNÜŞÜ ============ */
/* İstinad: klassik kazino slotu - ayrı xanalar yox, FASİLƏSİZ sütunlar;
   sütunlar arasında metalik keçid rayları; yuxarı-aşağıda qaçan LED
   nöqtə zolaqları; çarxın üst/alt kənarında dərinlik kölgəsi. */

/* — Xanalar sütunlara birləşir — */
.sfgrid{gap:0; position:relative; border-radius:10px; overflow:hidden;
  background:#0d0713}
.sfcell{border:none; border-radius:0;
  background:linear-gradient(90deg,#0b0511 0%,#120a1a 12%,#140b1d 50%,
    #120a1a 88%,#0b0511 100%)}

/* — Sütunlararası metalik raylar (20/40/60/80%) + reel dərinliyi — */
.sfgrid::after{content:""; position:absolute; inset:0; z-index:2;
  pointer-events:none;
  background:
    /* parlaq mərkəz xətləri */
    linear-gradient(90deg,
      transparent 0, transparent calc(20% - 1px),
      rgba(210,170,255,.55) calc(20% - 1px), rgba(210,170,255,.55) calc(20% + 1px),
      transparent calc(20% + 1px), transparent calc(40% - 1px),
      rgba(210,170,255,.55) calc(40% - 1px), rgba(210,170,255,.55) calc(40% + 1px),
      transparent calc(40% + 1px), transparent calc(60% - 1px),
      rgba(210,170,255,.55) calc(60% - 1px), rgba(210,170,255,.55) calc(60% + 1px),
      transparent calc(60% + 1px), transparent calc(80% - 1px),
      rgba(210,170,255,.55) calc(80% - 1px), rgba(210,170,255,.55) calc(80% + 1px),
      transparent calc(80% + 1px)),
    /* rayların tünd gövdəsi */
    linear-gradient(90deg,
      transparent 0, transparent calc(20% - 4px),
      #05030a calc(20% - 4px), #05030a calc(20% + 4px),
      transparent calc(20% + 4px), transparent calc(40% - 4px),
      #05030a calc(40% - 4px), #05030a calc(40% + 4px),
      transparent calc(40% + 4px), transparent calc(60% - 4px),
      #05030a calc(60% - 4px), #05030a calc(60% + 4px),
      transparent calc(60% + 4px), transparent calc(80% - 4px),
      #05030a calc(80% - 4px), #05030a calc(80% + 4px),
      transparent calc(80% + 4px))}
/* çarxın üst/alt kənarında dərinlik kölgəsi (real reel effekti) */
.sfgrid::before{content:""; position:absolute; inset:0; z-index:2;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.5), transparent 10%,
    transparent 90%, rgba(0,0,0,.5))}

/* — Kabinet çərçivəsi: LED zolaqlar üçün üst/alt boşluq — */
.sfframe{border-radius:15px; padding:15px 8px; border:1px solid #120818;
  background:linear-gradient(180deg,#301941 0%,#1a0d24 16%,#150a1e 84%,
    #301941 100%);
  box-shadow:0 0 0 2px #08040e, 0 0 0 3.5px rgba(255,80,130,.5),
    0 0 26px rgba(255,61,110,.32), 0 0 60px rgba(124,92,255,.12),
    inset 0 0 24px rgba(0,0,0,.6)}
/* — Qaçan LED nöqtə zolaqları (künc daş-qaşları əvəz edir) — */
.sfframe::before,.sfframe::after{content:""; position:absolute;
  left:12px; right:12px; height:7px; pointer-events:none; inset-inline:12px;
  background:
    radial-gradient(circle 2px at 5px 50%, #ffd45e 55%,
      rgba(255,212,94,.25) 75%, transparent 100%) 0 0/18px 100% repeat-x,
    radial-gradient(circle 2px at 5px 50%, #ff4d7e 55%,
      rgba(255,77,126,.25) 75%, transparent 100%) 9px 0/18px 100% repeat-x;
  animation:sfled 1.1s linear infinite}
.sfframe::before{top:4px}
.sfframe::after{bottom:4px}
@keyframes sfled{to{background-position:18px 0, 27px 0}}

/* — zərbə effekti yalnız şaquli olsun (sütun tikişləri açılmasın) — */
@keyframes sfimp{
  0%{transform:scaleY(1.08)}
  45%{transform:scaleY(.94)}
  100%{transform:scaleY(1)}}



/* alçaq ekranlar: LED zolaqlı çərçivə boşluğu azalır */
@media (max-height: 730px){
  .sfframe{padding:13px 7px}
}
@media (max-height: 600px){
  .sfframe{padding:9px 5px}
  .sfframe::before{top:1px; height:6px}
  .sfframe::after{bottom:1px; height:6px}
  .sfcell{aspect-ratio:3/2.95}
}


/* ============ v22: PEŞƏKAR İDARƏETMƏ DİZAYNI ============ */

/* — 1. Yan xətt çipləri: şüşə-gem + metalik ray — */
.sfchips{flex:0 0 auto; width:auto; box-sizing:border-box;
  padding:6px 3px; border-radius:8px;
  background:linear-gradient(90deg,#2b3040 0%,#171b26 30%,#10131c 70%,
    #060810 100%);
  border:1px solid #060810;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.14),
    inset 0 -1px 2px rgba(0,0,0,.6), 0 2px 5px rgba(0,0,0,.5)}
.sfchips:last-child{
  background:linear-gradient(270deg,#2b3040 0%,#171b26 30%,#10131c 70%,
    #060810 100%)}
.sfchip{width:25px; height:23px; box-sizing:border-box;
  border-radius:5px; font-size:11.5px;
  font-weight:900; color:#fff; position:relative; overflow:hidden;
  border:1px solid rgba(0,0,0,.75);
  text-shadow:0 1px 1px rgba(0,0,0,.95);
  background-image:
    radial-gradient(130% 90% at 50% -18%, rgba(255,255,255,.85) 0%,
      rgba(255,255,255,.32) 40%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,.15) 0%,
      rgba(255,255,255,0) 45%, rgba(0,0,0,.28) 60%, rgba(0,0,0,.5) 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.65),
    inset 0 -2px 3px rgba(0,0,0,.55),
    inset 1px 0 1px rgba(255,255,255,.18),
    inset -1px 0 2px rgba(0,0,0,.3),
    0 2px 3px rgba(0,0,0,.65)}
.sfchip.off{opacity:.16; filter:grayscale(.4)}
.sfchip.on{transform:scale(1.32);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.7),
    inset 0 -2px 3px rgba(0,0,0,.55),
    0 0 10px rgba(255,255,255,.85), 0 2px 4px rgba(0,0,0,.6)}

/* — 2. Yuxarı düymələr: polad-şüşə dəst (Geri, i, səs) — */
.sfback,.sfinfo2.intop,.sfmutebtn{
  border:1px solid #0a0d15; color:#dbe6ff; cursor:pointer;
  background:
    radial-gradient(120% 85% at 50% -15%, rgba(255,255,255,.4) 0%,
      rgba(255,255,255,.08) 45%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg,#4b5773 0%,#242c40 48%,#141a29 52%,#1b2234 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.4),
    inset 0 -2px 3px rgba(0,0,0,.55), 0 2px 5px rgba(0,0,0,.55),
    0 0 0 1px rgba(120,150,220,.14);
  text-shadow:0 1px 1px rgba(0,0,0,.8)}
.sfback{border-radius:12px; padding:9px 15px; font-weight:800;
  font-size:14px; white-space:nowrap}
.sfback:active,.sfinfo2.intop:active,.sfmutebtn:active{
  transform:scale(.94);
  background:
    linear-gradient(180deg,#1b2234 0%,#141a29 50%,#242c40 100%);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.6)}
.sfinfo2.intop{font-style:italic; font-family:Georgia,serif;
  font-weight:900; color:#9fc2ff}
.sfmutebtn{color:#ffd968; padding:8px}
.sfmutebtn.offm{color:#77809a;
  background:linear-gradient(180deg,#2a3040 0%,#181d2a 50%,#10141f 100%)}

/* — 3. LINES / BET-LINE: metalik panel + LCD + xrom düymələr — */
.sfsteppers{gap:8px}
.sfstep{border-radius:11px; padding:7px 8px 8px; border:1px solid #05070c;
  background:linear-gradient(180deg,#3d4557 0%,#232936 12%,#181d28 85%,
    #2b3140 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.22),
    inset 0 -1px 2px rgba(0,0,0,.5), 0 3px 7px rgba(0,0,0,.45)}
.sfstep span{color:#c6cfdf; font-size:10px; letter-spacing:1.6px;
  text-shadow:0 -1px 0 rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.08)}
.sfstep div{margin-top:5px; gap:7px; background:none; padding:0}
/* dəyər: LCD göstərici */
.sfstep b{min-width:52px; padding:5px 8px; border-radius:7px;
  background:linear-gradient(180deg,#03040a,#0a0d16);
  border:1px solid #000; color:#7dffb0; font-size:16px;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 7px rgba(125,255,176,.55);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.85),
    inset 0 -1px 1px rgba(255,255,255,.06), 0 1px 0 rgba(255,255,255,.1)}
/* +/- : xrom düymələr */
.sfstep button{width:38px; height:32px; border-radius:8px;
  border:1px solid #10141d; color:#141a26; font-size:19px; font-weight:900;
  background:
    radial-gradient(120% 80% at 50% -12%, rgba(255,255,255,.9) 0%,
      rgba(255,255,255,.25) 48%, rgba(255,255,255,0) 65%),
    linear-gradient(180deg,#eef2f8 0%,#b6bfcd 46%,#8b95a6 54%,#a9b2c1 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.9),
    inset 0 -2px 3px rgba(0,0,0,.3), 0 2px 4px rgba(0,0,0,.55);
  text-shadow:0 1px 0 rgba(255,255,255,.5)}
.sfstep button:active{transform:translateY(1px);
  background:linear-gradient(180deg,#9aa3b2 0%,#b6bfcd 100%);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.4)}
.sfstep button:disabled{opacity:.45; filter:grayscale(.3)}

/* — CREDIT/WIN/BET lövhələri: eyni ailədən yüngül metalik haşiyə — */
.sfpbox{border:1px solid #05070c; border-radius:11px;
  background:linear-gradient(180deg,#1c212c 0%,#12151e 15%,#0c0f16 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.12),
    inset 0 -1px 2px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4)}
.sfpbox span{letter-spacing:1.6px;
  text-shadow:0 -1px 0 rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.06)}

/* alçaq ekran uyğunluğu (yeni ölçülər üçün yenidən) */
@media (max-height: 730px){
  .sfstep button{width:34px; height:28px; font-size:17px}
  .sfstep b{font-size:14.5px; padding:4px 7px}
}
@media (max-height: 600px){
  .sfstep button{width:30px; height:25px; font-size:15px}
  .sfstep b{font-size:13px; min-width:44px}
  .sfchip{width:21px; height:19px; font-size:9.5px}
  .sfchips{padding:4px 2px}
}


/* ============ v23: popover panel, metalik START, scatter şousu ============ */

/* — 1. Avtospin paneli: axını itələmir, AUTO-nun üstündə YUXARI açılır — */
/* z-index:70 - panel LINES/BET stepper sırasının ÜSTÜNDƏ qalsın (klik uddurmasın) */
.sfctrl{position:relative; z-index:70}
/* ⚠ .sfctrl overflow:hidden (v29.1 halqa fix-i) paneli kəsirdi və
   kliklər alttakı stepper-lərə düşürdü ("auto işləmir" bagı).
   Panel FIXED-dir - ctrl-un kəsməsindən azaddır. Desktop çərçivəsində
   transform valideyni fixed-i ekran qutusuna bağlayır - yenə düzgündür. */
.sfauto{position:fixed; left:12px; right:12px;
  bottom:calc(170px + env(safe-area-inset-bottom,0px));
  z-index:9200; margin:0; padding:9px; border-radius:13px;
  border:1px solid #05070c;
  background:linear-gradient(180deg,#3d4557 0%,#232936 14%,#171c26 86%,
    #2b3140 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.22),
    inset 0 -1px 2px rgba(0,0,0,.5), 0 8px 22px rgba(0,0,0,.65)}
.sfauto.on{animation:sfapUp .2s cubic-bezier(.2,1.2,.4,1)}
@keyframes sfapUp{from{opacity:0; transform:translateY(14px) scale(.97)}
  to{opacity:1; transform:translateY(0) scale(1)}}
/* AUTO düyməsinə işarə oxu */
.sfauto::after{content:""; position:absolute; right:34px; top:100%;
  border:8px solid transparent; border-top-color:#171c26}
/* panel düymələri: SELECT LINE üslubunda polad-şüşə */
.sfauto button{border-radius:9px; border:1px solid #0a0d15; color:#dbe6ff;
  font-size:13.5px; font-weight:900; padding:11px 0;
  text-shadow:0 1px 1px rgba(0,0,0,.8);
  background:
    radial-gradient(120% 85% at 50% -15%, rgba(255,255,255,.4) 0%,
      rgba(255,255,255,.07) 45%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg,#4b5773 0%,#242c40 48%,#141a29 52%,#1b2234 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.4),
    inset 0 -2px 3px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.5)}
.sfauto button:active{transform:translateY(1px);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.6)}
.sfauto button.stop{color:#ff9d94;
  background:
    radial-gradient(120% 85% at 50% -15%, rgba(255,255,255,.35) 0%,
      rgba(255,255,255,.06) 45%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg,#6e3440 0%,#40202a 48%,#2a1219 52%,#341a21 100%)}

/* — 2. AUTO aktivkən mərkəz STOP diski (halqa dizaynı qalır) — */
.sfside.btnimg.stopmode::after{content:"STOP"; position:absolute;
  inset:19%; z-index:1; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:900; letter-spacing:.5px; color:#fff;
  text-shadow:0 1px 1px rgba(0,0,0,.75);
  background:radial-gradient(circle at 35% 28%, #ff8f7e 0%,
    #d63a2c 52%, #7e150c 100%);
  border:1px solid #4a0d07;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.55),
    inset 0 -3px 5px rgba(0,0,0,.45), 0 0 11px rgba(255,70,50,.75)}
.sfside.btnimg.stopmode{animation:none}
.sfside.btnimg.stopmode img{filter:drop-shadow(0 0 10px rgba(255,80,60,.8))
  drop-shadow(0 3px 7px rgba(0,0,0,.55))}

/* — 3. ⭐ Scatter şousu: çərçivə + LED-lər çılğınlaşır, sütunlar yanır — */
.sfframe.scwin{animation:sfscFrame .4s linear infinite}
@keyframes sfscFrame{
  0%,100%{box-shadow:0 0 0 2px #08040e, 0 0 0 3.5px rgba(255,200,80,.95),
    0 0 34px rgba(255,180,60,.75), inset 0 0 24px rgba(0,0,0,.6)}
  50%{box-shadow:0 0 0 2px #08040e, 0 0 0 3.5px rgba(255,80,130,.95),
    0 0 40px rgba(255,61,110,.85), inset 0 0 24px rgba(0,0,0,.6)}}
.sfframe.scwin::before,.sfframe.scwin::after{
  animation-duration:.22s; filter:brightness(1.7) saturate(1.3)}
/* scatter düşən sütun bütövlükdə işıqlanır */
.sfcell.sfcolHit{animation:sfcolP .45s ease-in-out infinite alternate}
@keyframes sfcolP{
  from{background-color:rgba(255,170,60,.05)}
  to{background-color:rgba(255,170,60,.22)}}
/* scatter xanasının öz qızıl çərçivəsi (istinaddakı narıncı qutular) */
.sfcell.sfscStar{z-index:4}
.sfcell.sfscStar::before{content:""; position:absolute; inset:3px;
  z-index:3; border-radius:10px; pointer-events:none;
  border:3px solid #ffb347;
  box-shadow:0 0 14px rgba(255,179,71,.95),
    inset 0 0 12px rgba(255,179,71,.45);
  animation:sfscStarP .3s linear infinite alternate}
@keyframes sfscStarP{from{border-color:#ffb347}to{border-color:#fff1c4}}
.sfcell.sfscStar .fs{animation:sfwpulse .4s ease-in-out infinite alternate}

/* — 4. START: metalik xrom halqa + şüşəli yaşıl günbəz — */
.sfstart{color:#06371c; font-weight:900;
  text-shadow:0 1px 0 rgba(255,255,255,.45);
  border:2px solid #2b323e;
  background:
    radial-gradient(120% 85% at 50% -18%, rgba(255,255,255,.9) 0%,
      rgba(255,255,255,.2) 42%, rgba(255,255,255,0) 60%),
    radial-gradient(circle at 50% 118%, rgba(6,60,30,.9), transparent 55%),
    radial-gradient(circle at 38% 32%, #c8ffdd 0%, #57dd92 45%,
      #1fa35d 76%, #0b5c30 100%);
  box-shadow:0 0 0 3px #b7c1cf, 0 0 0 5px #6b7585, 0 0 0 7px #10141c,
    inset 0 2px 3px rgba(255,255,255,.65),
    inset 0 -7px 12px rgba(0,25,10,.5),
    0 6px 16px rgba(0,0,0,.6), 0 0 22px rgba(60,220,130,.35)}
.sfstart.stop{border-color:#3e2b2b;
  background:
    radial-gradient(120% 85% at 50% -18%, rgba(255,255,255,.85) 0%,
      rgba(255,255,255,.18) 42%, rgba(255,255,255,0) 60%),
    radial-gradient(circle at 50% 118%, rgba(70,15,8,.9), transparent 55%),
    radial-gradient(circle at 38% 32%, #ffd2b8 0%, #ff8a4d 45%,
      #d4491d 76%, #7c1e08 100%);
  color:#4a1505;
  box-shadow:0 0 0 3px #b7c1cf, 0 0 0 5px #6b7585, 0 0 0 7px #10141c,
    inset 0 2px 3px rgba(255,255,255,.6),
    inset 0 -7px 12px rgba(40,8,2,.5),
    0 6px 16px rgba(0,0,0,.6), 0 0 22px rgba(255,120,60,.4)}
.sfstartwrap .sfring{inset:-10px}

/* — 5. Depozit / Çıxarış: polad-şüşə ailəsinə uyğun — */
.sfmoney{border-radius:12px; border:1px solid #0a0d15;
  text-shadow:0 1px 1px rgba(0,0,0,.75);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.35),
    inset 0 -2px 3px rgba(0,0,0,.5), 0 2px 5px rgba(0,0,0,.55)}
.sfmoney.dep{color:#93f2b8;
  background:
    radial-gradient(120% 85% at 50% -15%, rgba(255,255,255,.38) 0%,
      rgba(255,255,255,.06) 45%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg,#2f6247 0%,#183c2a 48%,#0e2a1c 52%,#153525 100%)}
.sfmoney.wd{color:#ff9ba1;
  background:
    radial-gradient(120% 85% at 50% -15%, rgba(255,255,255,.35) 0%,
      rgba(255,255,255,.06) 45%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg,#663039 0%,#3c1a22 48%,#2a1016 52%,#371a20 100%)}

/* alçaq ekranda panel oxu AUTO-ya uyğun qalsın */
@media (max-height: 730px){
  .sfauto::after{right:28px}
}


/* ============ v24: səhnə fonu, qızıl JACKPOT, metalik status ============ */

/* — 1. Arxa fon: professional slot səhnəsi —
   qat-qat: LED-nöqtə divarı + yan qırmızı projektorlar + yuxarı bənövşəyi
   parıltı + döşəmə işığı + dərin baza qradiyenti */
#sfScreen{background:
  radial-gradient(circle at 1.2px 1.2px, rgba(255,130,170,.055) 1.1px,
    transparent 1.7px) 0 0/13px 13px,
  radial-gradient(46% 34% at -4% 60%, rgba(214,32,58,.30), transparent 72%),
  radial-gradient(46% 34% at 104% 60%, rgba(214,32,58,.30), transparent 72%),
  radial-gradient(75% 34% at 50% -4%, rgba(126,62,214,.32), transparent 72%),
  radial-gradient(64% 22% at 50% 104%, rgba(255,64,96,.22), transparent 72%),
  linear-gradient(180deg,#2c0d18 0%,#190a15 36%,#0c060f 100%)}

/* — 2. JACKPOT: qızıl-metal korpus + LCD rəqəm pəncərəsi — */
.sfjp{gap:9px; padding:8px 14px; border-radius:13px;
  border:1px solid #050308;
  background:
    radial-gradient(120% 80% at 50% -15%, rgba(255,235,170,.30) 0%,
      rgba(255,235,170,.05) 45%, rgba(255,235,170,0) 62%),
    linear-gradient(180deg,#57400f 0%,#2c1f06 44%,#1a1203 56%,#33250a 100%);
  box-shadow:inset 0 1px 1px rgba(255,225,130,.4),
    inset 0 -2px 3px rgba(0,0,0,.65), 0 0 0 2px #0a0703,
    0 0 20px rgba(242,183,34,.28), 0 3px 9px rgba(0,0,0,.55)}
.sfjp .sfjpt{font-size:13.5px; letter-spacing:3px;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.8))}
/* köhnə qara pill ləğv - rəqəm jackpot barının pəncərəsindədir */
.sfjpgem{width:21px; height:21px}

/* — 3. Status sətri: metalik plaket — */
.sfstatus{width:max-content; max-width:94%; margin:8px auto 0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  height:31px; line-height:19px; box-sizing:border-box;
  min-height:0; padding:6px 18px; border-radius:10px;
  border:1px solid #0a0d15; font-size:13.5px; font-weight:800;
  letter-spacing:.4px; color:#ffd968;
  text-shadow:0 1px 1px rgba(0,0,0,.85);
  background:
    radial-gradient(120% 85% at 50% -15%, rgba(255,255,255,.22) 0%,
      rgba(255,255,255,.04) 45%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg,#3a4254 0%,#202633 48%,
      #12161f 52%,#1a1f2b 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.25),
    inset 0 -2px 3px rgba(0,0,0,.5), 0 2px 5px rgba(0,0,0,.5)}
/* boş qalanda plaket görünməsin */
.sfstatus:empty{visibility:hidden}

@media (max-height: 730px){
  .sfjp{padding:6px 11px}
  .sfjp b{font-size:15px; padding:2px 9px}
  .sfstatus{padding:4px 13px; font-size:12.5px; height:27px}
}


/* ============ v25: YAĞ KİMİ FIRLANMA ============ */
/* dayanma anında xananın öz kompozisiya qatı qalsın (flaş olmasın) */
.sfcell{transform:translateZ(0)}


/* ============ v27: rAF SÜTUN ÇARXLARI ============ */
/* Lent artıq CSS animasiyası ilə yox, JS-in tək rAF dövrəsi ilə sürüşür
   (animation-duration dəyişdirmək lenti SIÇRADIRDI - antisipasiyada
   5-ci sütunun "yox olub birdən gəlməsi" bundan idi).
   Şəbəkə: 7 token, 3-ü pəncərədə, 4-ü buferdə. Lentin başlanğıcı
   pəncərədən 3 token yuxarıdadır (top:-100%). */
/* xanaların z-index-i lentin üstünə ÇIXA BİLMƏSİN deyə şəbəkə öz
   yığın kontekstini yaradır */
.sfgrid{z-index:0}
.sfreel{position:absolute; top:0; bottom:0; width:20%; z-index:6;
  overflow:hidden; display:none; pointer-events:none;
  contain:strict}
.sfreel.on{display:block}
/* metalik raylar və dərinlik kölgəsi lentin də ÜSTÜNDƏ qalır */
.sfgrid::before,.sfgrid::after{z-index:7}
.sfband{position:absolute; left:0; right:0; top:-100%;
  height:233.3333%; will-change:transform;
  transform:translate3d(0,0,0); backface-visibility:hidden}
.sfbtok{height:calc(100%/7); display:flex; align-items:center;
  justify-content:center}
.sfbtok .fs{width:100%; height:100%}
/* 🔦 antisipasiya işığı LENTİN ÖZÜNDƏDİR - simvolları örtmür */
.sfreel.antic::after{content:""; position:absolute; inset:0; z-index:3;
  pointer-events:none;
  box-shadow:inset 0 0 0 2px rgba(255,223,142,.8),
             inset 0 0 26px rgba(255,223,142,.5);
  animation:sfanticR .45s ease-in-out infinite alternate}
@keyframes sfanticR{
  from{box-shadow:inset 0 0 0 2px rgba(255,223,142,.45),
                 inset 0 0 14px rgba(255,223,142,.28)}
  to{box-shadow:inset 0 0 0 2px rgba(255,223,142,.95),
               inset 0 0 30px rgba(255,223,142,.6)}}

/* ============ ⚡ YÜNGÜL REJİM (zəif telefonlar) ============ */
/* Ən bahalı işlər söndürülür: hər simvolun drop-shadow filtri, box-shadow
   ilə yanıb-sönmələr, LED zolaqları, fon şüaları. Oyun eyni qalır. */
#sfScreen.lite .fs.png img,#sfScreen.lite .fs.png canvas{filter:none}
#sfScreen.lite .sfframe::before,
#sfScreen.lite .sfframe::after{animation:none}
#sfScreen.lite .sfreel.antic::after{animation:none}
#sfScreen.lite .sfcell.sfantic{animation:none;
  box-shadow:0 0 14px rgba(255,223,142,.75)}
#sfScreen.lite .sfcell.hit{animation:none;
  box-shadow:0 0 13px rgba(242,183,34,.8)}
#sfScreen.lite .sfcell.sfglow .fs{animation:sfwpulseL .5s ease-in-out
  infinite alternate}
@keyframes sfwpulseL{from{transform:scale(1)} to{transform:scale(1.1)}}
#sfScreen.lite .sfframerow.antic .sfcell:not(.sfantic){
  filter:none; opacity:.42}
#sfScreen.lite .sfbgRays{display:none}
#sfScreen.lite .sfjp.hit{animation:none}
#sfScreen.lite .sfframe.scwin,
#sfScreen.lite .sfcell.sfcolHit{animation:none}
#sfScreen.lite .sfp{box-shadow:none}
#sfScreen.lite .sfisym .fs.png img,
#sfScreen.lite .sfisym .fs.png canvas,
#sfScreen.lite .sfico{filter:none}


/* ============ v28: UDUŞ NİŞANI (istinad kabinet üslubu) ============ */
/* Məbləğ artıq sol kənarda qara qutu deyil - ilk qazanan simvolun
   üstündə incə qızılı lövhəciyidir. */
.sfbadge{padding:1px 8px; border-radius:4px; border-width:1px;
  background:rgba(8,4,12,.82); color:#ffe9a8; font-size:11.5px;
  font-weight:900; letter-spacing:.5px; line-height:1.5;
  box-shadow:0 1px 6px rgba(0,0,0,.7)}
@media (max-height: 600px){ .sfbadge{font-size:10px; padding:0 6px} }


/* ============ v28: GAMBLE SƏHNƏSİ (kabinet üslubu) ============ */
/* İstinad: klassik Novomatic gamble ekranı - tünd bordo mahud fon,
   yuxarıda məbləğ/uduş göstəriciləri, ortada fasiləsiz dönən kart,
   sağda öncəki kartlar, aşağıda xromlu QIRMIZI / QARA oval düymələr. */
#sfgOv{padding:0; background:rgba(4,1,3,.9);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px)}
#sfgOv .sfgbox{
  position:relative; width:100%; height:100%; max-width:none;
  border:0; border-radius:0; overflow:hidden; text-align:center;
  box-shadow:none;
  display:flex; flex-direction:column; align-items:center;
  justify-content:space-evenly;
  gap:clamp(6px, 1.6vh, 14px);
  padding:calc(14px + env(safe-area-inset-top,0px)) 14px
          calc(16px + env(safe-area-inset-bottom,0px));
  background:
    radial-gradient(95% 55% at 50% -8%, rgba(226,52,68,.30), transparent 60%),
    radial-gradient(120% 70% at 50% 108%, rgba(150,14,32,.32), transparent 62%),
    linear-gradient(180deg,#330a13 0%,#1b0509 52%,#0b0205 100%)}
/* mahud naxışı + kənar qaralması */
#sfgOv .sfgbox::before{content:""; position:absolute; inset:0;
  pointer-events:none; opacity:.5;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.018) 0 2px,
      transparent 2px 9px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.10) 0 2px,
      transparent 2px 9px),
    radial-gradient(100% 75% at 50% 45%, transparent 45%, rgba(0,0,0,.65))}
#sfgOv .sfgbox > *{position:relative; z-index:1}

/* — başlıq — */
.sfgt2{font-size:clamp(13px,3.6vw,16px); font-weight:900; letter-spacing:6px;
  color:#e7c05f; text-transform:uppercase;
  text-shadow:0 2px 10px rgba(0,0,0,.8), 0 0 18px rgba(231,192,95,.35)}

/* — məbləğ / uduş göstəriciləri — */
.sfgstats{display:flex; gap:clamp(18px,7vw,52px); align-items:flex-start}
.sfgst{display:flex; flex-direction:column; align-items:center; gap:2px;
  min-width:96px}
.sfgst b{font-size:clamp(26px,8.5vw,40px); font-weight:900; line-height:1;
  color:#ffd54a; font-variant-numeric:tabular-nums;
  text-shadow:0 3px 0 rgba(0,0,0,.55), 0 0 22px rgba(255,213,74,.35)}
.sfgst.win b{color:#6fe08f; text-shadow:0 3px 0 rgba(0,0,0,.55),
  0 0 22px rgba(111,224,143,.35)}
.sfgst span{font-size:9.5px; font-weight:800; letter-spacing:1.6px;
  color:#b9a6a9; text-transform:uppercase}
.sfgst b i{font-style:normal; font-size:.45em; margin-left:3px;
  opacity:.75; vertical-align:.35em}
#sfgOv.won .sfgst.win b{animation:sfgPop .45s cubic-bezier(.2,1.6,.4,1) 2}
@keyframes sfgPop{50%{transform:scale(1.18)}}

/* — səhnə: kart ortada, öncəkilər sağda — */
.sfgstage{display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; width:100%; gap:6px}
.sfgside{display:flex; flex-direction:column; align-items:center; gap:5px;
  min-width:0}
.sfgprevw{opacity:1}
.sfgprevw span{font-size:8.5px; font-weight:800; letter-spacing:1.2px;
  color:#9b8b8e; text-transform:uppercase; white-space:nowrap}
/* 🃏 Öncəki kartlar: sağa-yuxarı pilləkən yelpik (istinaddakı kimi).
   ⚠ flex uşaqları standart olaraq SIXILIR - dar yerdə kartlar bir-birinin
   içinə girib boz ləkəyə çevrilirdi. flex:0 0 auto bunun qarşısını alır. */
.sfgprev{display:flex; justify-content:center; align-items:flex-end;
  min-height:34px; padding-top:24px}
.sfgprev img,.sfgprev canvas{flex:0 0 auto;
  width:clamp(23px, 6.4vw, 30px); height:auto; aspect-ratio:156/230;
  border-radius:3px; object-fit:contain; display:block;
  margin-left:-9px; box-shadow:-2px 2px 7px rgba(0,0,0,.8);
  -webkit-user-drag:none}
.sfgprev img:first-child{margin-left:0}
/* pilləkən: soldakı ən yuxarıda, sağdakı (ən yeni) ən aşağıda və üstdə */
.sfgprev img:nth-child(1){transform:translateY(-24px)}
.sfgprev img:nth-child(2){transform:translateY(-18px)}
.sfgprev img:nth-child(3){transform:translateY(-12px)}
.sfgprev img:nth-child(4){transform:translateY(-6px)}
.sfgprev img:nth-child(5){transform:translateY(0)}
/* boş yerlər: sönük arxa üz - yelpik həmişə 5 kartlı görünür */
.sfgprev img.e{opacity:.34; filter:grayscale(.95) brightness(.8)}
/* uduzanda rəqəmlər sönür */
#sfgOv.lost .sfgst b{color:#8f8083; text-shadow:none; filter:saturate(.2)}

/* — kart — */
#sfgOv .sfcardwrap{margin:0; perspective:900px}
#sfgOv .sfcard{width:clamp(104px, 34vw, 152px);
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.75))
         drop-shadow(0 0 20px rgba(255,120,90,.14))}
#sfgOv.won .sfcard{filter:drop-shadow(0 14px 26px rgba(0,0,0,.75))
  drop-shadow(0 0 26px rgba(111,224,143,.7))}
#sfgOv.lost .sfcard{filter:drop-shadow(0 14px 26px rgba(0,0,0,.75))
  grayscale(.55) brightness(.75)}

/* — nəticə sətri — */
#sfgOv .sfgres{min-height:20px; margin:0; font-size:clamp(12px,3.4vw,14px);
  font-weight:800; letter-spacing:.6px; color:#e0cfa0}
#sfgOv.won .sfgres{color:#6fe08f}
#sfgOv.lost .sfgres{color:#ff8a8f}

/* — QIRMIZI / QARA: xrom halqalı oval düymələr — */
.sfgpick{display:flex; gap:clamp(12px,5vw,34px); width:100%;
  justify-content:center; align-items:center}
.sfgbtn{position:relative; flex:1 1 0; max-width:172px;
  height:clamp(56px,15.5vw,76px); border:0; padding:0; cursor:pointer;
  border-radius:50%; overflow:hidden; isolation:isolate;
  display:flex; align-items:center; justify-content:center;
  transition:transform .12s, filter .12s;
  box-shadow:0 0 0 2px #e8ecf1, 0 0 0 4px #6f757e, 0 0 0 5px #23262b,
    0 10px 22px rgba(0,0,0,.65)}
.sfgbtn.red{background:
  radial-gradient(120% 150% at 50% -12%, rgba(255,255,255,.42), transparent 58%),
  linear-gradient(180deg,#e0212c 0%,#9c111b 46%,#61070f 100%)}
.sfgbtn.black{background:
  radial-gradient(120% 150% at 50% -12%, rgba(255,255,255,.30), transparent 58%),
  linear-gradient(180deg,#3a3d44 0%,#191b1f 46%,#08090b 100%)}
/* ortadakı xrom zolaq */
.sfgbtn i{position:absolute; left:-4%; right:-4%; top:50%; height:36%;
  transform:translateY(-50%); z-index:1;
  background:linear-gradient(180deg,#fbfcfd 0%,#dfe3e8 38%,#9298a1 50%,
    #6d737c 53%,#c9ced5 72%,#f2f4f7 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.55), 0 -1px 2px rgba(0,0,0,.5),
    0 2px 4px rgba(0,0,0,.45)}
.sfgbtn b{position:relative; z-index:2;
  font-size:clamp(12px,3.6vw,15px); font-weight:900; letter-spacing:2.4px;
  text-shadow:0 1px 0 rgba(255,255,255,.5)}
.sfgbtn.red b{color:#a3101c}
.sfgbtn.black b{color:#16181c}
.sfgbtn:active:not(:disabled){transform:translateY(2px) scale(.985)}
.sfgbtn:disabled{filter:grayscale(.55) brightness(.62); cursor:default}

/* — GÖTÜR — */
#sfgOv .sfgtake{width:min(100%, 360px); border:1px solid rgba(255,213,74,.55);
  border-radius:10px; padding:12px 14px; letter-spacing:2px;
  font-size:clamp(12px,3.4vw,14px); font-weight:900; text-transform:uppercase;
  color:#ffe9a8; background:
    linear-gradient(180deg, rgba(255,213,74,.18), rgba(255,213,74,.05));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 6px 16px rgba(0,0,0,.5)}
#sfgOv .sfgtake em{font-style:normal; color:#fff; margin-left:6px}
#sfgOv .sfgtake:active{transform:translateY(1px)}

/* alçaq ekranlarda yığcamlaşır */
@media (max-height: 660px){
  .sfgt2{letter-spacing:4px}
  #sfgOv .sfcard{width:clamp(88px, 27vw, 118px)}
  .sfgst b{font-size:clamp(22px,7vw,30px)}
  #sfgOv .sfgbox{gap:8px}
}
/* yüngül rejim: kölgə/parıltı yükü azalır */
#sfScreen.lite #sfgOv .sfgbox::before{display:none}
#sfScreen.lite #sfgOv .sfcard{filter:drop-shadow(0 8px 14px rgba(0,0,0,.7))}
#sfScreen.lite .sfgbtn{box-shadow:0 0 0 2px #e8ecf1, 0 0 0 4px #6f757e}


/* ============ 🔥 HOT SEVENS TEMASI (qırmızı-qızıl) ============ */
/* Klon baza üslubunun (bənövşəyi ES7) üstündən yalnız rənglər dəyişir. */
#sfScreen{background:
  radial-gradient(80% 50% at 80% 5%, rgba(255,106,0,.20) 0%, transparent 60%),
  radial-gradient(70% 45% at 15% 30%, rgba(229,40,40,.16) 0%, transparent 55%),
  radial-gradient(130% 90% at 50% 0%, #35070a 0%, #100202 75%)}
.sftitle{background:linear-gradient(135deg,#ffd25e,#ff5a2a);
  -webkit-background-clip:text; background-clip:text}
.sfframe{border-color:#2a0d05;
  background:linear-gradient(180deg,#4a1206 0%,#240803 16%,#1c0603 84%,
    #4a1206 100%);
  box-shadow:0 0 0 2px #120301, 0 0 0 3.5px rgba(255,140,40,.55),
    0 0 26px rgba(255,106,0,.35), 0 0 60px rgba(255,60,30,.12),
    inset 0 0 24px rgba(0,0,0,.6)}
/* case pəncərələri şəffafdır - altda tünd reel fonu */
.sfgrid{background:linear-gradient(180deg,#221a4e 0%,#151038 50%,#221a4e 100%)}
/* xanalar ŞƏFFAF - meyvələr slotcase barabanının üstündə görünür */
.sfcell{background:none}
/* sütunlararası raylar: qızılı */
.sfgrid::after{background:
  linear-gradient(90deg,
    transparent 0, transparent calc(20% - 1px),
    rgba(255,200,110,.6) calc(20% - 1px), rgba(255,200,110,.6) calc(20% + 1px),
    transparent calc(20% + 1px), transparent calc(40% - 1px),
    rgba(255,200,110,.6) calc(40% - 1px), rgba(255,200,110,.6) calc(40% + 1px),
    transparent calc(40% + 1px), transparent calc(60% - 1px),
    rgba(255,200,110,.6) calc(60% - 1px), rgba(255,200,110,.6) calc(60% + 1px),
    transparent calc(60% + 1px), transparent calc(80% - 1px),
    rgba(255,200,110,.6) calc(80% - 1px), rgba(255,200,110,.6) calc(80% + 1px),
    transparent calc(80% + 1px)),
  linear-gradient(90deg,
    transparent 0, transparent calc(20% - 4px),
    #0a0201 calc(20% - 4px), #0a0201 calc(20% + 4px),
    transparent calc(20% + 4px), transparent calc(40% - 4px),
    #0a0201 calc(40% - 4px), #0a0201 calc(40% + 4px),
    transparent calc(40% + 4px), transparent calc(60% - 4px),
    #0a0201 calc(60% - 4px), #0a0201 calc(60% + 4px),
    transparent calc(60% + 4px), transparent calc(80% - 4px),
    #0a0201 calc(80% - 4px), #0a0201 calc(80% + 4px),
    transparent calc(80% + 4px))}
.sfjp{border-color:rgba(255,140,40,.55);
  background:linear-gradient(180deg,rgba(255,106,0,.18),rgba(255,106,0,.05))}
.sfjp span{color:#ffb37a}
#sfgOv .sfgbox{background:
  radial-gradient(95% 55% at 50% -8%, rgba(255,120,40,.28), transparent 60%),
  radial-gradient(120% 70% at 50% 108%, rgba(170,40,10,.30), transparent 62%),
  linear-gradient(180deg,#3a0e05 0%,#1d0603 52%,#0c0201 100%)}
.sfcell.spin::before{
  background:linear-gradient(180deg,rgba(16,4,2,.95),transparent)}
.sfcell.spin::after{
  background:linear-gradient(0deg,rgba(16,4,2,.95),transparent)}
.sfreel::before{
  background:linear-gradient(180deg, rgba(16,4,2,.9), transparent)}
.sfreel::after{
  background:linear-gradient(0deg, rgba(16,4,2,.9), transparent)}


/* ============ 🔥 NEON ÇƏRÇİVƏ (rar-dakı "slot case" şəkli) ============ */
/* Şəkil çarxların ÜSTÜNDƏ overlay-dır: sütun araları şəkildəki neon
   borulardır, CSS rayları söndürülür. z-index 8 - lentlərdən (6) və
   raylardan (7) yuxarı; şəklin daxili sahəsi şəffafdır, simvollar görünür. */
/* neon case ŞƏFFAF pəncərəli overlay-dır - reellərin ÜSTÜNDƏ durur,
   meyvələr pəncərələrdən görünür */
.sfwrap::after{display:none}
.sfcasecv{position:absolute; left:-2.1%; top:-2.6%;
  width:104.2%; height:105.2%; pointer-events:none; z-index:8}
.sfwrap .sfgrid{position:relative; z-index:1}
.sfgrid::after{display:none}          /* CSS metalik rayları əvəz olundu */
/* 🧹 KÖHNƏ KABİNET TAM SİLİNİR: neon case çərçivənin özüdür.
   Bənövşəyi korpus, qırmızı halqa, LED nöqtə zolaqları - hamısı gedir;
   yalnız yüngül kənar parıltısı qalır. */
.sfframe{border:0; border-radius:0; padding:10px 6px; background:none;
  box-shadow:none}
.sfframe::before,.sfframe::after{display:none}   /* LED zolaqları */
@media (max-height: 730px){ .sfframe{padding:8px 5px} }
@media (max-height: 600px){ .sfframe{padding:6px 4px} }
/* case bir az gen açılır ki, boruların yeri köhnə çərçivənin yerini tutsun */
.sfwrap::after{inset:-3.4% -2.8%;
  filter:drop-shadow(0 0 18px rgba(255,90,20,.35))}


/* ============ v29: TAM EN - xətt çipləri gizlədilir ============ */
/* Sağ-soldakı xətt nömrələri (çiplər) yığışdırılır, çarx qutusu ekranın
   tam eninə açılır (ekran kənarında 4px nəfəslik qalır). */
.sfchips{display:none}
.sfframerow{margin:0 -6px}
#sfScreen{overflow-x:hidden}


/* ============ 💰 JACKPOT BAR (istifadəçinin şəkli) ============ */
/* Rəqəm şəkildəki tünd pəncərənin içində göstərilir
   (pəncərə: x 47.5%-87%, y 19%-82% - ölçülüb). */
.sfjp{position:relative; display:block; border:0; background:none;
  box-shadow:none; padding:0; margin:0 auto 8px;
  width:min(100%, 430px); aspect-ratio:1100/147}
.sfjpcv{position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none}
.sfjp .sfjpgem,.sfjp .sfjpt{display:none}
.sfjp b{position:absolute; left:45%; right:9%; top:12%; bottom:12%;
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(13px, 4vw, 19px); font-weight:900; color:#ffd968;
  font-variant-numeric:tabular-nums; letter-spacing:.5px;
  text-shadow:0 0 12px rgba(242,183,34,.6), 0 2px 2px rgba(0,0,0,.8)}
.sfjp.hit{animation:sfjpHit2 .5s ease-in-out 5 alternate}
@keyframes sfjpHit2{from{filter:brightness(1)}
  to{filter:brightness(1.55) drop-shadow(0 0 14px rgba(255,180,60,.8))}}

/* ============ 📐 SIĞMA (v29.1): tam endə xanalar alçalır ============ */
/* Çiplər gedəndən sonra xanalar enləndi - hündürlük artdı, status yazısı
   panelin altında qalırdı. Xana nisbəti alçaldılır, status sıxılmır. */
.sfstatus{flex-shrink:0}
.sfcell{aspect-ratio:3/3.1}
.sftitlerow.logo{margin-bottom:4px}
.sfjp{margin-bottom:6px}
@media (max-height: 860px){
  .sfcell{aspect-ratio:3/2.9}
  .sftitlerow.logo img{width:min(56%, 230px)}
  .sftitlerow.logo{margin-bottom:2px} }
@media (max-height: 780px){ .sfcell{aspect-ratio:3/2.74} }
@media (max-height: 700px){ .sfcell{aspect-ratio:3/2.56}
  .sftitlerow.logo img{width:min(46%, 190px)} }
@media (max-height: 620px){ .sfcell{aspect-ratio:3/2.38} }

/* halqa dekorativdir - ekranı AŞAĞI uzadıb sürüşmə yaratmasın
   (scrollHeight-ə absolut element də sayılır) */
.sfctrl{overflow:hidden; padding-bottom:12px}

/* 🧱 SON SÖZ: istifadəçinin divar kağızı BÜTÜN ekranın fonudur
   (yuxarıdakı köhnə radial-qradiyent fonları üstələyir) */
#sfScreen{background:#191447}
/* divar kağızı canvas-dan çəkilir (paketdən) - CSS url yoxdur */
.sfbgcv{position:fixed; inset:0; z-index:-1; pointer-events:none}


/* ==== v75.23: gamble həyəcan səsi anında GAMBLE düyməsi közərir ==== */
.sfside.btnimg.gmbhot, .sfside.btnimg.gmbhot:disabled{
  opacity:1; filter:none}
.sfside.btnimg.gmbhot img{
  animation:sfgmbP .7s ease-in-out infinite alternate}
@keyframes sfgmbP{
  from{filter:drop-shadow(0 0 4px rgba(255,190,60,.35))
    drop-shadow(0 3px 7px rgba(0,0,0,.55)); transform:scale(1)}
  to{filter:drop-shadow(0 0 15px rgba(255,205,75,.95))
    drop-shadow(0 3px 7px rgba(0,0,0,.55)); transform:scale(1.045)}}

/* v75.52: LINES önizləməsi - xətlər çarx lentlərinin (z6) və şüşə
   qatlarının (z7) ÜSTÜNDƏ çəkilsin ki, orijinal kabinetdəki kimi parlaq
   görünsün; uduş xətləri üçün adi z4 qalır */
.sfwrap.lp #sfSvg{z-index:9}   /* case (::after z8) da altda qalsın */

/* v75.55: yan nömrə nişanları YENİDƏN gizli (videoda yoxdur) - v29 qaydası qalır */

/* 🎛 v75.55: SELECT LINE paneli (Hot Sevens kabinet videosu) - çarx
   pəncərəsinin altından sürüşüb çıxır, pəncərənin ~80%-ni tutur */
.sflp{position:absolute; left:3%; right:3%; bottom:0; height:80%;
  z-index:12; border-radius:9px 9px 0 0; overflow:hidden;
  background:linear-gradient(180deg, rgba(58,66,84,.96) 0%, rgba(24,28,40,.97) 12%,
    rgba(16,19,30,.97) 100%);
  border:1px solid rgba(150,170,210,.45); border-bottom:0;
  box-shadow:0 -6px 24px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.18);
  /* v75.58: bağlı panel GÖRÜNMƏZ olmalıdır - əvvəl translateY(102%) ilə
     çərçivənin altına sürüşürdü və overflow kəsmədiyi üçün (case parıltısı
     üçün overflow:visible) CREDIT panelinin üstündə asılı qalırdı (Samsung-da
     bildirildi, əslində hər yerdə). İndi: yüngül sürüşmə + solma +
     visibility:hidden (keçid bitəndən sonra). */
  transform:translateY(8%); opacity:0; visibility:hidden;
  transition:transform .24s cubic-bezier(.2,.8,.3,1), opacity .2s ease,
    visibility 0s linear .24s;
  pointer-events:none; display:flex; flex-direction:column}
.sflp.on{transform:translateY(0); opacity:1; visibility:visible; pointer-events:auto;
  transition:transform .24s cubic-bezier(.2,.8,.3,1), opacity .2s ease, visibility 0s}
.sflp-h{flex:0 0 auto; text-align:center; padding:6px 0 5px;
  font-size:13px; font-weight:900; font-style:italic; letter-spacing:.06em;
  color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.9);
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.02));
  border-bottom:1px solid rgba(120,170,255,.55)}
.sflp-g{flex:1; display:flex; flex-wrap:wrap; justify-content:center;
  align-content:space-evenly; gap:5px 4%; padding:4px 3%}
.sflp-g button{width:10.2%; aspect-ratio:1.05; min-height:0; padding:0;
  border-radius:5px; border:1px solid rgba(160,190,230,.5);
  background:linear-gradient(180deg,#3b4a63 0%,#1e2738 45%,#151b28 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 3px rgba(0,0,0,.55),
    0 1px 2px rgba(0,0,0,.6);
  color:#9fd0ff; font-size:13px; font-weight:800; font-family:inherit;
  text-shadow:0 1px 1px rgba(0,0,0,.8); cursor:pointer}
.sflp-g button.on{background:linear-gradient(180deg,#f4f8ff 0%,#c9dcf2 55%,#9fbbe0 100%);
  color:#1c5cc0; text-shadow:0 1px 0 rgba(255,255,255,.7);
  border-color:#e8f2ff; box-shadow:0 0 8px rgba(160,200,255,.7)}
@media (max-height: 730px){ .sflp-g button{font-size:12px} .sflp-h{font-size:12px; padding:5px 0 4px} }

/* v75.77: aşağı hissə (idarə bloku tərəfi) Hot Sevens/Rich Fruits kimi
   tünd qaraya keçir - ekran fonunun üstündə, məzmunun altında */
#sfScreen::after{content:""; position:absolute; left:0; right:0; bottom:0;
  height:58%; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%,
    rgba(0,0,0,.45) 28%, rgba(0,0,0,.82) 58%, rgba(3,1,2,.96) 100%)}