:root{
  /* terminal neon theme */
  --bg:#050807;
  --bg2:#030504;
  --panel:#07110c;
  --panel2:#06160f;
  --glass: rgba(0, 255, 130, .06);
  --line: rgba(0, 255, 130, .16);

  --text:#e8fff1;
  --muted: rgba(232, 255, 241, .68);

  --neon:#00ff7a;
  --neon2:#00d45f;
  --neon3:#7dffb8;

  --warn:#ffd36a;
  --bad:#ff4d6d;

  --shadow: 0 18px 50px rgba(0,0,0,.62);
  --shadow2: 0 14px 32px rgba(0,0,0,.55);

  --radius:18px;
  --radius2:22px;

  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

html, body {
  width: 100%;
  min-height: 100%;
  height: auto;              /* важно: не фиксируем высоту, а даём расти */
  background: #050807;       /* страховка: если body не отрисует градиенты */
}

body {
  margin: 0;
  overflow-x: hidden;
  overscroll-behavior-y: none;     /* убирает серый bounce на многих устройствах */
  -webkit-overflow-scrolling: touch;
  background-color: #050807;       /* страховка */
}

/* Фиксированный слой-фон, который всегда закрывает весь экран */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;               /* за всем контентом */
  pointer-events: none;

  /* Дублируем твой неоновый фон сюда, чтобы он был "всегда" */
  background:
    radial-gradient(900px 420px at 70% -10%, rgba(0,255,122,.12), transparent 55%),
    radial-gradient(900px 520px at 10% 10%, rgba(0,255,122,.08), transparent 58%),
    linear-gradient(180deg, rgba(0,255,122,.06), transparent 40%),
    linear-gradient(90deg, rgba(0,255,122,.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0,255,122,.04) 1px, transparent 1px),
    linear-gradient(180deg, #030504, #050807);
  background-size: auto, auto, auto, 56px 56px, 56px 56px, auto;
  background-position: center, center, center, 0 0, 0 0, 0 0;
}

/* если хочешь оставить scanlines/vignette — перенеси их на ::after,
   но следи чтобы z-index был тоже отрицательный */
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index: -1;
  background:
    repeating-linear-gradient(180deg,
      rgba(0,0,0,0) 0px,
      rgba(0,0,0,0) 6px,
      rgba(0,0,0,.18) 7px
    ),
    radial-gradient(closest-side, rgba(0,255,122,.10), transparent 70%);
  opacity:.35;
  mix-blend-mode: multiply;
}


*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: var(--sans);
  color: var(--text);
  overflow-x:hidden;

  /* terminal grid + subtle glow */
  background:
    radial-gradient(900px 420px at 70% -10%, rgba(0,255,122,.12), transparent 55%),
    radial-gradient(900px 520px at 10% 10%, rgba(0,255,122,.08), transparent 58%),
    linear-gradient(180deg, rgba(0,255,122,.06), transparent 40%),
    linear-gradient(90deg, rgba(0,255,122,.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0,255,122,.04) 1px, transparent 1px),
    linear-gradient(180deg, var(--bg2), var(--bg));
  background-size:
    auto,
    auto,
    auto,
    56px 56px,
    56px 56px,
    auto;
  background-position:
    center,
    center,
    center,
    0 0,
    0 0,
    0 0;
}

/* subtle scanlines */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(0,0,0,0) 0px,
      rgba(0,0,0,0) 6px,
      rgba(0,0,0,.18) 7px
    );
  opacity:.25;
  mix-blend-mode: multiply;
  z-index: 0;
}

/* top neon vignette */
body::after{
  content:"";
  position:fixed; inset:-20% -20%;
  pointer-events:none;
  background: radial-gradient(closest-side, rgba(0,255,122,.10), transparent 70%);
  filter: blur(14px);
  opacity:.5;
  z-index:0;
}

/* selection */
::selection{background: rgba(0,255,122,.22); color: var(--text)}

/* nicer scrollbar */
::-webkit-scrollbar{height:10px; width:10px}
::-webkit-scrollbar-thumb{
  background: rgba(0,255,122,.22);
  border: 1px solid rgba(0,255,122,.28);
  border-radius: 999px;
}
::-webkit-scrollbar-track{background: rgba(0,0,0,.22)}

/* =========================================
   Boot / loading
========================================= */
.hidden{display:none !important}

.boot{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:22px;
  z-index:50;
}
.boot-card{
  width:min(560px, 92vw);
  border-radius: 26px;
  padding: 24px 22px 20px;
  text-align:center;

  background: linear-gradient(180deg, rgba(0,255,122,.08), rgba(0,0,0,.30));
  border: 1px solid rgba(0,255,122,.22);
  box-shadow:
    0 0 0 1px rgba(0,255,122,.08) inset,
    0 0 42px rgba(0,255,122,.12),
    var(--shadow);
  backdrop-filter: blur(10px);
}

.boot-title{
  font-family: var(--mono);
  letter-spacing:.22em;
  font-weight: 900;
  font-size: 14px;
  text-transform: uppercase;
  color: rgba(232,255,241,.92);
}
.boot-sub{
  margin-top:10px;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .18em;
  font-family: var(--mono);
}

.boot-bar{
  height: 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(0,255,122,.18);
  overflow:hidden;
  margin: 18px 0 10px;
}
.boot-bar__fill{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, rgba(0,255,122,1), rgba(0,212,95,.55), rgba(125,255,184,.9));
  box-shadow: 0 0 24px rgba(0,255,122,.35);
  transition: width .18s ease;
}

.boot-pct{
  font-weight: 900;
  font-family: var(--mono);
  letter-spacing:.06em;
}
.boot-hint{
  margin-top: 12px;
  color: rgba(232,255,241,.70);
  font-size: 12px;
  font-family: var(--mono);
}

/* =========================================
   App layout
========================================= */
.app{
  position:relative;
  z-index: 1;
  min-height:100%;
  padding: 18px 18px 28px;
  max-width: 1200px;
  margin: 0 auto;
}

.topbar{
  display:flex;
  gap: 14px;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 16px;
}

.brand{
  display:flex;
  align-items:center;
  gap: 12px;
}
.brand__logo{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;

  font-family: var(--mono);
  font-weight: 950;
  color: rgba(232,255,241,.92);

  background:
    radial-gradient(22px 22px at 30% 30%, rgba(0,255,122,.25), transparent 60%),
    linear-gradient(180deg, rgba(0,255,122,.10), rgba(0,0,0,.30));
  border: 1px solid rgba(0,255,122,.22);

  box-shadow:
    0 0 0 1px rgba(0,255,122,.08) inset,
    0 0 26px rgba(0,255,122,.14),
    var(--shadow2);
}
.brand__name{
  font-weight: 950;
  letter-spacing:.04em;
}
.brand__tag{
  color: var(--muted);
  font-size: 12px;
  font-family: var(--mono);
}

.userbox{display:flex; flex-direction:column; gap:8px; align-items:flex-end}
.userbox__row{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}

.pill{
  display:flex; gap:8px; align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(0,255,122,.18);
  box-shadow: 0 0 0 1px rgba(0,255,122,.06) inset;
}
.pill__label{
  color: var(--muted);
  font-size: 12px;
  font-family: var(--mono);
  letter-spacing:.06em;
  text-transform: uppercase;
}
.pill__value{
  font-weight: 900;
  font-family: var(--mono);
  letter-spacing:.02em;
}

/* badge exists for JS, but you hide it in HTML */
.badge{
  font-size:12px;
  font-family: var(--mono);
  letter-spacing:.08em;
  color: rgba(232,255,241,.80);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,255,122,.18);
  background: rgba(0,0,0,.24);
}
.badge.good{border-color: rgba(0,255,122,.30); background: rgba(0,255,122,.08)}
.badge.warn{border-color: rgba(255,211,106,.22); background: rgba(255,211,106,.08)}
.badge.bad{border-color: rgba(255,77,109,.22); background: rgba(255,77,109,.08)}

.main{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 16px;
}
@media (max-width: 960px){
  .main{grid-template-columns:1fr}
  .userbox{align-items:flex-start}
  .topbar{flex-direction:column; align-items:flex-start}
}

/* =========================================
   Slot card / machine
========================================= */
.slot-card{
  border-radius: var(--radius2);
  overflow:hidden;

  background:
    radial-gradient(700px 260px at 30% -20%, rgba(0,255,122,.14), transparent 55%),
    linear-gradient(180deg, rgba(0,255,122,.06), rgba(0,0,0,.34));
  border: 1px solid rgba(0,255,122,.22);
  box-shadow:
    0 0 0 1px rgba(0,255,122,.06) inset,
    0 0 46px rgba(0,255,122,.10),
    var(--shadow);
}

.slot-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,255,122,.14);
  background: rgba(0,0,0,.28);
}
.slot-head__title{
  font-weight: 950;
  letter-spacing: .22em;
  font-family: var(--mono);
  text-transform: uppercase;
}

.machine{
  position:relative;
  padding: 18px 16px 16px;
  background:
    radial-gradient(900px 420px at 40% -10%, rgba(0,255,122,.12), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.34));
  contain: layout paint style; /* mobile perf */
}

.machine__shine{
  position:absolute; inset:-140px -80px auto -80px;
  height: 240px;
  background: radial-gradient(closest-side, rgba(232,255,241,.08), transparent 72%);
  pointer-events:none;
  filter: blur(2px);
  opacity:.55;
}

.reels{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 14px;
  border-radius: 18px;

  background: rgba(0,0,0,.36);
  border: 1px solid rgba(0,255,122,.18);

  box-shadow:
    0 0 0 1px rgba(0,255,122,.05) inset,
    0 0 26px rgba(0,255,122,.10);
}

.reel{
  position:relative;
  overflow:hidden;
  border-radius: 16px;

  background:
    radial-gradient(26px 26px at 30% 30%, rgba(0,255,122,.14), transparent 60%),
    linear-gradient(180deg, rgba(0,255,122,.06), rgba(0,0,0,.36));
  border: 1px solid rgba(0,255,122,.22);

  box-shadow: 0 0 0 1px rgba(0,255,122,.06) inset;
}

.reel__window{
  height:130px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}

.reel__window::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(closest-side, rgba(0,255,122,.10), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,0) 30%, rgba(0,0,0,.30));
  opacity:.65;
}

.reel__strip{
  position:absolute;
  left:0; right:0; top:0;
  display:flex;
  flex-direction:column;
  will-change: transform;
  transform: translate3d(0,0,0);
}

.cell{
  height:130px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 62px;
  text-shadow: 0 14px 24px rgba(0,0,0,.62);
  filter: saturate(1.06) contrast(1.05);
}

.payline{
  height: 2px;
  margin: 14px 6px 6px;
  opacity: .55;
  background: linear-gradient(90deg, transparent, rgba(0,255,122,.75), transparent);
  box-shadow: 0 0 16px rgba(0,255,122,.25);
}

/* =========================================
   Controls
========================================= */
.controls{
  margin-top: 10px;
  display:flex;
  gap: 12px;
  align-items:stretch;
  justify-content:space-between;
  flex-wrap:wrap;
}

.betbox{
  flex: 1 1 320px;
  border-radius: 18px;
  padding: 12px;

  background: rgba(0,0,0,.30);
  border: 1px solid rgba(0,255,122,.18);
  box-shadow: 0 0 0 1px rgba(0,255,122,.05) inset;
}

.betbox__label{
  color: var(--muted);
  font-size: 12px;
  letter-spacing:.22em;
  text-transform: uppercase;
  font-family: var(--mono);
}

.betbox__ctrl{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-top: 8px;
}

.betbox__value{
  font-weight: 950;
  font-size: 18px;
  font-family: var(--mono);
  letter-spacing:.04em;
}

.muted{color: var(--muted)}

.betbox__quick{
  display:flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap:wrap;
}

.chip{
  cursor:pointer;
  border: 1px solid rgba(0,255,122,.18);
  background: rgba(0,0,0,.34);
  color: var(--text);
  padding: 7px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-family: var(--mono);
  letter-spacing:.04em;

  transition: transform .12s ease, background .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.chip:hover{
  transform: translateY(-1px);
  background: rgba(0,255,122,.08);
  border-color: rgba(0,255,122,.28);
  box-shadow: 0 0 18px rgba(0,255,122,.14);
}
.chip:active{transform: translateY(0) scale(.98)}
.chip:disabled{opacity:.55; cursor:not-allowed}

.spinbox{
  flex: 0 1 220px;
  display:flex;
  flex-direction:column;
  gap: 10px;
  justify-content:space-between;
}

.spin-btn{
  cursor:pointer;
  border:none;
  border-radius: 18px;
  padding: 14px 14px;
  font-weight: 1000;
  letter-spacing: .22em;
  font-family: var(--mono);
  text-transform: uppercase;

  color: #04110a;
  background: linear-gradient(90deg, rgba(0,255,122,1), rgba(0,212,95,.85));
  position:relative;
  overflow:hidden;

  box-shadow:
    0 18px 36px rgba(0,0,0,.55),
    0 0 32px rgba(0,255,122,.18);
}

.spin-btn__glow{
  position:absolute;
  inset:-40% -20%;
  background: radial-gradient(circle at 30% 40%, rgba(255,255,255,.38), transparent 55%);
  transform: rotate(10deg);
  opacity:.9;
  pointer-events:none;
}

.spin-btn::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent);
  transform: translateX(-120%);
  animation: sheen 2.2s ease-in-out infinite;
  opacity:.65;
  pointer-events:none;
}

@keyframes sheen{
  0%{transform: translateX(-120%)}
  40%{transform: translateX(-120%)}
  100%{transform: translateX(120%)}
}

.spin-btn:hover{filter: brightness(1.02)}
.spin-btn:active{transform: translateY(1px)}
.spin-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  filter:saturate(.7);
  box-shadow: 0 12px 24px rgba(0,0,0,.45);
}

.ghost-btn{
  cursor:pointer;
  border: 1px solid rgba(0,255,122,.18);
  background: rgba(0,0,0,.30);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 16px;
  font-weight: 900;
  font-family: var(--mono);
  letter-spacing:.06em;

  transition: background .12s ease, transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.ghost-btn:hover{
  background: rgba(0,255,122,.06);
  border-color: rgba(0,255,122,.26);
  box-shadow: 0 0 18px rgba(0,255,122,.12);
}
.ghost-btn:active{transform: translateY(1px)}
.ghost-btn:disabled{opacity:.55; cursor:not-allowed}

.mini-btn{
  cursor:pointer;
  width: 38px;
  height: 34px;
  border-radius: 14px;

  border: 1px solid rgba(0,255,122,.18);
  background: rgba(0,0,0,.34);
  color: var(--text);

  font-size: 18px;
  font-weight: 950;
  font-family: var(--mono);

  transition: transform .12s ease, background .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.mini-btn:hover{
  background: rgba(0,255,122,.07);
  border-color: rgba(0,255,122,.26);
  box-shadow: 0 0 16px rgba(0,255,122,.12);
}
.mini-btn:active{transform: translateY(1px)}
.mini-btn:disabled{opacity:.55; cursor:not-allowed}

/* =========================================
   Status
========================================= */
.status{
  margin-top: 12px;
  padding: 12px;
  border-radius: 16px;

  background: rgba(0,0,0,.32);
  border: 1px solid rgba(0,255,122,.16);
  box-shadow: 0 0 0 1px rgba(0,255,122,.04) inset;
}

.status__title{
  font-weight: 950;
  font-family: var(--mono);
  letter-spacing:.06em;
}
.status__text{
  color: rgba(232,255,241,.78);
  font-size: 13px;
  margin-top: 4px;
  line-height: 1.35;
  font-family: var(--mono);
}

/* combos exist but hidden by your index.html */
.combos{
  padding:14px 16px 16px;
  border-top: 1px solid rgba(0,255,122,.14);
  background: rgba(0,0,0,.22);
}
.combos__title{
  font-size:12px;
  letter-spacing:.22em;
  color: var(--muted);
  text-transform:uppercase;
  margin-bottom:10px;
  font-family: var(--mono);
}
.comboList{display:grid; grid-template-columns:1fr 1fr; gap:8px}
@media (max-width: 560px){ .comboList{grid-template-columns:1fr} }
.combo{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding: 9px 10px;
  border-radius: 16px;
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(0,255,122,.14);
}
.combo__left{display:flex; align-items:center; gap:10px}
.combo__sym{font-size:22px}
.combo__name{font-weight:900; font-family: var(--mono)}
.combo__mult{color:rgba(232,255,241,.85); font-weight:950; font-family: var(--mono)}
.combo__tag{color:var(--muted); font-size:12px; font-family: var(--mono)}

/* =========================================
   Side panels
========================================= */
.panel{
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(0,255,122,.18);
  border-radius: var(--radius2);
  box-shadow:
    0 0 0 1px rgba(0,255,122,.05) inset,
    var(--shadow2);
  padding: 14px 14px 16px;
  margin-bottom: 16px;
}

.panel__title{
  font-weight: 950;
  letter-spacing: .18em;
  margin-bottom: 8px;
  font-family: var(--mono);
  text-transform: uppercase;
}
.panel__text{
  color: rgba(232,255,241,.80);
  line-height: 1.45;
  font-size: 13px;
  font-family: var(--mono);
}

/* symbols/session elements exist but hidden */
.symbols{display:flex; flex-wrap:wrap; gap:10px}
.sym{
  display:flex; align-items:center; gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(0,255,122,.14);
}
.sym__ico{font-size:18px}
.sym__w{color:var(--muted); font-size:12px; font-family: var(--mono)}
.mono{font-family: var(--mono)}

/* =========================================
   Modal (exists but hidden by index.html)
========================================= */
.modal{position:fixed; inset:0; z-index:60}
.modal__backdrop{position:absolute; inset:0; background: rgba(0,0,0,.72)}
.modal__card{
  position:relative;
  width:min(640px, 92vw);
  margin: 7vh auto 0;
  border-radius: 24px;
  overflow:hidden;

  background: linear-gradient(180deg, rgba(0,255,122,.08), rgba(0,0,0,.34));
  border: 1px solid rgba(0,255,122,.22);
  box-shadow: var(--shadow);
}
.modal__head{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 16px;
  border-bottom:1px solid rgba(0,255,122,.14);
}
.modal__title{
  font-weight: 1000;
  letter-spacing: .18em;
  font-family: var(--mono);
  text-transform: uppercase;
}
.xbtn{
  border: 1px solid rgba(0,255,122,.18);
  background: rgba(0,0,0,.30);
  color: var(--text);
  width: 36px; height: 34px;
  border-radius: 14px;
  cursor:pointer;
}
.modal__body{padding:14px 16px 6px}
.modal__note{
  color: rgba(232,255,241,.78);
  font-size: 13px;
  margin-bottom:10px;
  line-height:1.35;
  font-family: var(--mono);
}
.modal__foot{padding:12px 16px 16px; display:flex; justify-content:flex-end}

/* =========================================
   Toast
========================================= */
.toast{
  position:fixed;
  left:50%;
  bottom: 20px;
  transform: translateX(-50%);
  padding: 10px 12px;
  border-radius: 999px;

  background: rgba(0,0,0,.58);
  border: 1px solid rgba(0,255,122,.18);
  box-shadow:
    0 0 0 1px rgba(0,255,122,.05) inset,
    var(--shadow2);
  color: rgba(232,255,241,.92);
  font-weight: 900;
  font-family: var(--mono);
  z-index:70;
}

/* =========================================
   Win / Lose animations (lighter for mobile)
========================================= */
.flash{ animation: flash 560ms ease-in-out 1; }
@keyframes flash{
  0%{ filter: brightness(1) saturate(1); }
  25%{ filter: brightness(1.18) saturate(1.25); }
  100%{ filter: brightness(1) saturate(1); }
}

.shake{ animation: shake 420ms ease-in-out 1; }
@keyframes shake{
  0%,100%{ transform:translate3d(0,0,0) }
  20%{ transform:translate3d(-5px,0,0) }
  40%{ transform:translate3d(5px,0,0) }
  60%{ transform:translate3d(-3px,0,0) }
  80%{ transform:translate3d(3px,0,0) }
}

/* =========================================
   FX layer (GPU-friendly)
========================================= */
.fx-layer{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:80;
  overflow:hidden;
  contain: paint; /* mobile perf */
}

.fx-piece{
  position:absolute;
  left:0;
  top:-40px;
  font-size: 26px;

  will-change: transform, opacity;
  transform: translate3d(0,0,0);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.50));

  opacity:0;
  animation: fxFall var(--dur, 1200ms) linear forwards;
}

@keyframes fxFall{
  0%{
    opacity:0;
    transform: translate3d(var(--x, 0px), -40px, 0) rotate(0deg);
  }
  10%{ opacity:1; }
  100%{
    opacity:0;
    transform: translate3d(var(--x, 0px), calc(100vh + 80px), 0) rotate(var(--rot, 540deg));
  }
}

/* =========================================
   JACKPOT overlay (neon)
========================================= */
.jackpot{
  position:fixed;
  inset:0;
  z-index:90;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
}
.jackpot__backdrop{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 50% 30%, rgba(0,255,122,.16), rgba(0,0,0,.78));
  backdrop-filter: blur(6px);
}

.jackpot__card{
  position:relative;
  width: min(720px, 94vw);
  border-radius: 26px;
  padding: 22px 18px 18px;
  text-align:center;
  overflow:hidden;

  background: linear-gradient(180deg, rgba(0,255,122,.10), rgba(0,0,0,.34));
  border: 1px solid rgba(0,255,122,.24);

  box-shadow:
    0 0 0 1px rgba(0,255,122,.07) inset,
    0 0 46px rgba(0,255,122,.14),
    0 26px 90px rgba(0,0,0,.70);

  transform: translate3d(0,10px,0) scale(.98);
  opacity:0;
  animation: jackpotIn 420ms cubic-bezier(.2,.9,.2,1) forwards;
}

@keyframes jackpotIn{
  to { transform: translate3d(0,0,0) scale(1); opacity:1; }
}

.jackpot__title{
  font-weight: 1000;
  letter-spacing: .28em;
  font-size: 13px;
  color: rgba(232,255,241,.86);
  text-transform: uppercase;
  font-family: var(--mono);
}

.jackpot__amount{
  margin-top: 12px;
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap: 10px;
  user-select:none;
}

.jackpot__plus{
  font-weight: 1000;
  font-size: 26px;
  opacity:.92;
  font-family: var(--mono);
}

.jackpot__num{
  font-weight: 1000;
  font-size: 58px;
  line-height: 1;
  letter-spacing: .02em;
  font-family: var(--mono);

  color: transparent;
  background: linear-gradient(90deg, rgba(0,255,122,1), rgba(125,255,184,1));
  -webkit-background-clip: text;
  background-clip: text;

  text-shadow: 0 0 18px rgba(0,255,122,.24);
  animation: jackpotPulse 950ms ease-in-out infinite;
}

.jackpot__cur{
  font-weight: 950;
  letter-spacing: .16em;
  opacity:.85;
  font-family: var(--mono);
}

.jackpot__hint{
  margin-top: 8px;
  color: rgba(232,255,241,.74);
  font-size: 13px;
  font-family: var(--mono);
}

@keyframes jackpotPulse{
  0%,100%{ transform: scale(1); filter: saturate(1); }
  50%{ transform: scale(1.035); filter: saturate(1.25); }
}

.jackpot.hide{ animation: jackpotOut 420ms ease forwards; }
@keyframes jackpotOut{
  to { opacity:0; transform: translate3d(0,8px,0) scale(.98); }
}

/* =========================================
   Accessibility / mobile performance
========================================= */
@media (prefers-reduced-motion: reduce){
  *{animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important;}
  .spin-btn::after{display:none !important;}
}

/* === FULLSCREEN BACKGROUND FIX (iOS/Telegram WebView) === */
html, body {
  min-height: 100%;
  height: auto;
  background: #050807; /* страховка */
}

/* фиксируем "серый overscroll" */
body {
  background: transparent !important; /* фон будет в фикс-слое ниже */
  overscroll-behavior-y: none;
}

/* прибитый ко всему экрану фон (не обрывается при скролле/растяжении) */
#bg-fixed {
  position: fixed;
  inset: 0;
  z-index: -999;
  pointer-events: none;

  background:
    radial-gradient(900px 420px at 70% -10%, rgba(0,255,122,.12), transparent 55%),
    radial-gradient(900px 520px at 10% 10%, rgba(0,255,122,.08), transparent 58%),
    linear-gradient(180deg, rgba(0,255,122,.06), transparent 40%),
    linear-gradient(90deg, rgba(0,255,122,.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0,255,122,.04) 1px, transparent 1px),
    linear-gradient(180deg, #030504, #050807);
  background-size: auto, auto, auto, 56px 56px, 56px 56px, auto;
  background-position: center, center, center, 0 0, 0 0, 0 0;
}

/* делаем страницу реально "на весь экран" + safe-area снизу */
.app {
  min-height: 100vh;
  padding-bottom: calc(28px + env(safe-area-inset-bottom));
}

/* =========================================
   How it works → Combinations block
========================================= */
.howPayout{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,255,122,14);
}

.howPayout__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.howPayout__title{
  font-family: var(--mono);
  font-weight: 950;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 12px;
}

.howPayout__note{
  font-family: var(--mono);
  color: rgba(232,255,241,70);
  font-size: 12px;
  white-space: nowrap;
}

.howPayout__grid{
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.howRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 16px;
  background: rgba(0,0,0,26);
  border: 1px solid rgba(0,255,122,14);
  box-shadow: 0 0 0 1px rgba(0,255,122,05) inset;
}

.howRow__left{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}

.howRow__sym{
  display:flex;
  align-items:center;
  gap: 4px;
  font-size: 18px;
  line-height: 1;
}

.howRow__chips{
  display:flex;
  align-items:center;
  gap: 6px;
  flex-wrap:wrap;
}

.hchip{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid rgba(0,255,122,14);
  background: rgba(0,0,0,22);
  font-family: var(--mono);
  font-weight: 900;
  font-size: 12px;
  color: rgba(232,255,241,90);
}

.hchip__k{
  color: rgba(232,255,241,65);
  font-weight: 800;
}

.hchip__v{
  font-weight: 1000;
  letter-spacing: .02em;
}

.howRow__tag{
  font-family: var(--mono);
  color: rgba(232,255,241,65);
  font-size: 12px;
  margin-left:auto;
  white-space: nowrap;
}

.howRow.is-jackpot{
  border-color: rgba(0,255,122,26);
  background: rgba(0,255,122,08);
  box-shadow:
    0 0 0 1px rgba(0,255,122,10) inset,
    0 0 26px rgba(0,255,122,18),
    var(--shadow2);
}

.howRow.is-jackpot .howRow__tag{
  color: rgba(232,255,241,92);
  font-weight: 950;
}

.howPayout__foot{
  display:flex;
  align-items:center;
  gap: 8px;
  margin-top: 10px;
  font-family: var(--mono);
  color: rgba(232,255,241,65);
  font-size: 12px;
}

.howPayout__dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(0,255,122,75);
  box-shadow: 0 0 18px rgba(0,255,122,25);
}