/* ============================================================
   STAKEBOX — демо открытия бокса
   ============================================================ */
:root{
  --bg:#06090E;
  --panel:#0E131B;
  --line:rgba(133,150,190,.15);
  --line-2:rgba(158,175,215,.30);
  --pur:#8B5CF6; --pur-lt:#BA7FF3;
  --lime:#CBFF4D; --gold:#FFC53D;
  --tx:#F2F5FA; --tx-2:#98A0BC; --tx-3:#6E7793;
  --c:#BA7FF3;                       /* цвет текущего тира / редкости */
  --ease:cubic-bezier(.22,.68,.32,1);
  --f:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --f-m:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden}
body{
  margin:0;min-height:100%;background:var(--bg);color:var(--tx);font:500 14px/1.5 var(--f);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;            /* аура шире сцены — обрезаем, а не даём горизонтальный скролл */
  overflow-y:auto;              /* на низких экранах содержимое должно прокручиваться */
}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:8px}
[hidden]{display:none!important}

/* ---------- фон ---------- */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden}
.bg img{width:106%;height:100%;object-fit:cover;opacity:.5;filter:saturate(.85)}
.bg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(54% 44% at 50% 46%,color-mix(in srgb,var(--c) 13%,transparent),transparent 68%),
    radial-gradient(120% 90% at 50% 120%,rgba(6,9,14,.2),rgba(6,9,14,.96) 70%),
    linear-gradient(180deg,rgba(6,9,14,.86),rgba(6,9,14,.34) 40%,rgba(6,9,14,.9));
  transition:background .8s var(--ease);
}
#fx{position:fixed;inset:0;z-index:6;pointer-events:none;transition:opacity .45s var(--ease)}

/* ---------- шапка ---------- */
.top{
  position:fixed;inset:0 0 auto;z-index:8;display:flex;align-items:center;gap:16px;
  padding:16px 26px;
}
.back{display:flex;align-items:center;gap:9px;padding:9px 15px;border-radius:11px;
  border:1px solid var(--line);color:var(--tx-2);font-size:13px;transition:background .25s,color .25s,border-color .25s}
.back:hover{color:#fff;border-color:var(--line-2);background:rgba(150,165,205,.07)}
.top__logo{display:flex;align-items:center;gap:10px;margin-left:auto}
.top__logo b{font-weight:800;font-size:14px;letter-spacing:.15em}
/* ---------- переключатель языка ---------- */
.lang{display:flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px;background:rgba(150,165,205,.05)}
.lang button{padding:5px 11px;border:0;border-radius:999px;background:none;
  color:var(--tx-3);font:700 10.5px/1 var(--f-m);letter-spacing:.08em;
  transition:color .22s,background .22s}
.lang button:hover{color:var(--tx-2)}
.lang button.is-on{color:#0d1204;background:linear-gradient(135deg,#DBFF6A,#A9E62F)}
@media (max-width:360px){
  .lang button{padding:5px 8px;font-size:10px}
}
.tag{padding:3px 9px;border-radius:999px;border:1px solid rgba(255,197,61,.4);
  background:rgba(255,197,61,.10);color:#FFD873;font:700 9px/1 var(--f-m);letter-spacing:.14em;text-transform:uppercase}
.snd{width:36px;height:36px;display:grid;place-items:center;padding:0;border-radius:10px;
  border:1px solid var(--line);background:none;color:var(--tx-3)}
.snd svg{width:18px;height:18px}
.snd:hover{color:var(--tx);border-color:var(--line-2)}
.snd.on{color:var(--lime);border-color:rgba(203,255,77,.45)}

/* ---------- раскладка ---------- */
/* Строки назначены явно: баннер режима появляется только при заходе из
   кабинета, а от числа детей в потоке зависело бы, кому достанется 1fr. */
.wrap{
  position:relative;z-index:5;min-height:100dvh;
  display:grid;grid-template-rows:auto auto 1fr auto;gap:10px;
  padding:74px 26px 24px;
}
.mode{grid-row:1}
.tiers{grid-row:2}
.stage{grid-row:3}
.foot{grid-row:4}

/* ---------- выбор уровня ---------- */
.tiers{display:flex;align-items:center;gap:8px;justify-content:center;flex-wrap:wrap}
.tier{
  display:flex;align-items:center;gap:9px;padding:8px 15px;border-radius:999px;
  border:1px solid var(--line);background:rgba(14,19,27,.6);backdrop-filter:blur(6px);
  font:700 11.5px/1 var(--f-m);letter-spacing:.1em;color:var(--tx-3);
  transition:color .3s,border-color .3s,background .3s,transform .3s var(--ease);
}
.tier i{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 9px currentColor}
.tier:hover{color:var(--tx);transform:translateY(-1px)}
.tier.on{color:#fff;border-color:color-mix(in srgb,var(--tc) 60%,transparent);
  background:color-mix(in srgb,var(--tc) 14%,transparent);
  box-shadow:0 0 22px color-mix(in srgb,var(--tc) 30%,transparent)}
.tier.on i{color:var(--tc)}

/* ---------- сцена ---------- */
.stage{position:relative;display:grid;place-items:center;min-height:0}
.stage__in{position:relative;width:min(460px,72vmin);aspect-ratio:1;display:grid;place-items:center}

/* было вращение размытого конического градиента — это перерисовка большого
   размытого слоя каждый кадр. Статичный радиальный даёт тот же объём бесплатно. */
.aura{
  position:absolute;width:118%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--c) 30%,transparent) 30%,transparent 68%);
  filter:blur(26px);opacity:.5;
  transition:background .6s var(--ease);
}
.halo{
  position:absolute;width:76%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--c) 42%,transparent),transparent 66%);
  filter:blur(18px);animation:breathe 4.2s var(--ease) infinite;
}
@keyframes breathe{0%,100%{opacity:.5}50%{opacity:.95}}
.floor{
  position:absolute;bottom:6%;width:62%;height:9%;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--c) 50%,transparent),transparent 70%);
  filter:blur(13px);opacity:.75;
}

.ring{
  position:absolute;width:40%;aspect-ratio:1;border-radius:50%;
  border:2px solid color-mix(in srgb,var(--c) 75%,transparent);opacity:0;pointer-events:none;
}
.is-burst .ring{animation:wave 1.15s cubic-bezier(.16,.8,.3,1) forwards}
.is-burst .ring:nth-child(2){animation-delay:.09s}
.is-burst .ring:nth-child(3){animation-delay:.19s}
@keyframes wave{0%{opacity:.9;scale:.35}70%{opacity:.28}100%{opacity:0;scale:2.9}}

.beam{
  position:absolute;bottom:42%;width:34%;height:0;transform-origin:50% 100%;
  background:linear-gradient(0deg,color-mix(in srgb,var(--c) 85%,transparent),transparent 78%);
  filter:blur(7px);opacity:0;clip-path:polygon(38% 100%,62% 100%,100% 0,0 0);
}
.is-burst .beam{animation:beam 2.6s var(--ease) forwards}
@keyframes beam{0%{height:0;opacity:0}14%{height:150%;opacity:.95}100%{height:140%;opacity:0}}

.box,.lid,.boxo{
  position:absolute;width:74%;will-change:transform,opacity;
  filter:hue-rotate(var(--hue,0deg)) saturate(var(--sat,1));
  transition:filter .5s var(--ease);
}
.box{animation:float 5.2s var(--ease) infinite}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -2.4%}}
.lid{width:80%;opacity:0;pointer-events:none;z-index:3}
.boxo{opacity:0;pointer-events:none;width:76%}

.is-charge .box{animation:shake .5s linear infinite}
@keyframes shake{
  0%,100%{translate:0 0;rotate:0deg}
  20%{translate:-.7% .3%;rotate:-.7deg}
  45%{translate:.8% -.4%;rotate:.8deg}
  70%{translate:-.5% .5%;rotate:-.5deg}
}
.is-charge .halo{animation:charge .9s var(--ease) forwards}
@keyframes charge{0%{opacity:.5;scale:1}100%{opacity:1;scale:1.45}}
.is-burst .box{opacity:0;transition:opacity .12s}
.is-burst .boxo{opacity:1;transition:opacity .2s .1s}
.is-reel .boxo{opacity:.35;filter:hue-rotate(var(--hue,0deg)) saturate(var(--sat,1)) blur(2px)}
.is-burst .lid{opacity:1;animation:lid 1.15s cubic-bezier(.1,.9,.25,1) forwards}
@keyframes lid{
  0%  {opacity:1;translate:0 -4%;  rotate:0deg;  scale:1}
  38% {opacity:1;translate:12% -104%;rotate:-40deg;scale:1.1}
  100%{opacity:0;translate:32% -196%;rotate:-86deg;scale:1.12}
}

/* ---------- прокрут вариантов ---------- */
.reel{
  position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:5;
  width:min(940px,92vw);pointer-events:none;
  opacity:0;scale:.92;filter:blur(6px);
  transition:opacity .45s var(--ease),scale .45s var(--ease),filter .45s var(--ease);
}
.is-reel .reel{opacity:1;scale:1;filter:none}
.reel__view{
  position:relative;height:138px;overflow:hidden;border-radius:18px;
  border:1px solid var(--line-2);background:rgba(8,11,17,.82);backdrop-filter:blur(10px);
  box-shadow:0 26px 70px rgba(0,0,0,.6);
}
/* Две ленты: пока видна одна, вторая втихую собирается под следующий прокрут —
   иначе 56 ячеек с инлайновым SVG создавались бы в момент клика и роняли первые кадры. */
.reel__track{
  position:absolute;top:50%;left:0;display:flex;gap:12px;translate:0 -50%;
  will-change:transform;opacity:0;pointer-events:none;
}
.reel__track.is-live{opacity:1}
.reel__cell{
  flex:none;width:86px;height:86px;border-radius:16px;display:grid;place-items:center;
  border:1px solid color-mix(in srgb,var(--rc) 40%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--rc) 14%,transparent),rgba(16,21,31,.92));
  transition:box-shadow .3s,scale .3s var(--ease);
}
.reel__cell svg{width:50px;height:50px}
.reel__cell.hit{scale:1.08;box-shadow:0 0 0 2px var(--rc),0 0 30px color-mix(in srgb,var(--rc) 60%,transparent)}
.reel__mark{
  position:absolute;left:50%;top:50%;translate:-50% -50%;width:108px;height:124px;
  border-radius:18px;border:2px solid var(--c);pointer-events:none;
  box-shadow:0 0 24px color-mix(in srgb,var(--c) 55%,transparent),inset 0 0 20px color-mix(in srgb,var(--c) 20%,transparent);
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.reel__mark::before,.reel__mark::after{content:"";position:absolute;left:50%;translate:-50% 0;
  border-left:8px solid transparent;border-right:8px solid transparent}
.reel__mark::before{top:-12px;border-top:10px solid var(--c)}
.reel__mark::after{bottom:-12px;border-bottom:10px solid var(--c)}
.reel__fade{position:absolute;top:0;bottom:0;width:96px;pointer-events:none}
.reel__fade--l{left:0;background:linear-gradient(90deg,rgba(8,11,17,.97),transparent)}
.reel__fade--r{right:0;background:linear-gradient(270deg,rgba(8,11,17,.97),transparent)}

/* ---------- ячейка: полоса редкости снизу и градиент от неё вверх ---------- */
.reel__cell{
  position:relative;flex:none;width:96px;height:112px;border-radius:12px;overflow:hidden;
  display:grid;grid-template-rows:1fr auto auto;justify-items:center;align-items:center;
  gap:2px;padding:10px 6px 9px;
  background:
    linear-gradient(0deg,
      color-mix(in srgb,var(--rc) 46%,transparent) 0%,
      color-mix(in srgb,var(--rc) 14%,transparent) 38%,
      rgba(16,21,31,.94) 78%);
  border:1px solid color-mix(in srgb,var(--rc) 26%,transparent);
  transition:box-shadow .3s,scale .3s var(--ease);
}
.reel__cell::after{                       /* та самая полоска снизу */
  content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:var(--rc);box-shadow:0 0 12px color-mix(in srgb,var(--rc) 70%,transparent);
}
.reel__ico{display:grid;place-items:center}
.reel__ico svg{width:46px;height:46px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.7))}
.reel__name{font-size:10.5px;font-weight:700;color:#E7ECF5;text-shadow:0 1px 4px rgba(0,0,0,.9);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reel__amt{font:700 10px/1 var(--f-m);color:#D8F3B6;text-shadow:0 1px 4px rgba(0,0,0,.9)}
.reel__cell.hit{scale:1.1;box-shadow:0 0 0 2px var(--rc),0 0 34px color-mix(in srgb,var(--rc) 70%,transparent)}

/* ---------- итог под лентой ---------- */
.res{
  position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:5;
  margin-top:clamp(92px,13vh,116px);
  display:grid;justify-items:center;gap:5px;text-align:center;pointer-events:none;
  opacity:0;translate:-50% calc(-50% + 12px);
  transition:opacity .5s var(--ease),translate .5s var(--ease);
}
.is-res .res{opacity:1;translate:-50% -50%}
.res__rar{font:700 10px/1 var(--f-m);letter-spacing:.22em;text-transform:uppercase;color:var(--c);font-style:normal}
.res__name{font-size:16px;font-weight:800;letter-spacing:-.01em}
.res__amt{font:800 30px/1 var(--f);color:#FFE9B5;text-shadow:0 0 26px rgba(255,190,60,.5)}

/* ---------- низ ---------- */
.foot{display:grid;justify-items:center;gap:11px}
.go{
  display:inline-flex;align-items:center;gap:11px;padding:15px 34px;border:0;border-radius:14px;
  background:linear-gradient(135deg,#DBFF6A,#A9E62F);color:#0d1204;font-size:15px;font-weight:800;
  box-shadow:0 12px 36px rgba(180,240,60,.3);
  transition:transform .25s var(--ease),box-shadow .3s,opacity .3s;
}
.go svg{width:19px;height:19px}
.go:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 18px 48px rgba(180,240,60,.44)}
.go:disabled{opacity:.42;cursor:default;box-shadow:none;transform:none}
.hint{color:var(--tx-3);font-size:11.5px;text-align:center;max-width:420px}

/* ---------- история ---------- */
.drops{
  position:fixed;right:22px;bottom:22px;z-index:7;
  width:200px;display:grid;gap:6px;
}
.drops__t{font:600 9.5px/1 var(--f-m);letter-spacing:.18em;text-transform:uppercase;color:var(--tx-3);margin-bottom:3px}
.drop{
  display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:10px;
  padding:9px 11px;border-radius:11px;border:1px solid var(--line);background:rgba(12,16,23,.72);
  backdrop-filter:blur(8px);animation:dropIn .5s var(--ease);
}
@keyframes dropIn{from{opacity:0;translate:14px 0}to{opacity:1;translate:0 0}}
.drop svg{width:26px;height:26px}
.drop b{font-size:12px;font-weight:700}
.drop em{display:block;font:600 8.5px/1.3 var(--f-m);letter-spacing:.12em;text-transform:uppercase;color:var(--dc);font-style:normal}
.drop span{font:700 12px/1 var(--f-m);color:#D8F3B6}
.drops__empty{color:var(--tx-3);font-size:11.5px;padding:10px 2px}

/* ---------- вспышка экрана ---------- */
.flash{position:fixed;inset:0;z-index:9;pointer-events:none;opacity:0;background:#fff}
.flash.go{animation:flash .5s ease-out}
@keyframes flash{0%{opacity:0}8%{opacity:.82}100%{opacity:0}}

/* ---------- адаптив ---------- */
@media (max-width:900px){
  .reel__view{height:124px}
  .reel__cell{width:84px;height:100px}
  .reel__ico svg{width:38px;height:38px}
  .reel__mark{width:95px;height:112px}
  .res{margin-top:clamp(80px,12vh,100px)}
  .res__amt{font-size:25px}
  .reel__fade{width:60px}
  .drops{position:static;width:100%;max-width:420px;margin:0 auto;
    grid-auto-flow:row;max-height:132px;overflow:hidden}
  .wrap{grid-template-rows:auto 1fr auto auto;padding:70px 16px 18px;gap:8px}
  .stage__in{width:min(360px,74vmin)}
  .prize{padding:18px 22px 16px}
  .prize__ico{width:66px;height:66px}
  .prize__amt{font-size:23px}
}
@media (max-width:560px){
  .reel__view{height:112px}
  .reel__cell{width:72px;height:90px;padding:8px 4px 8px}
  .reel__ico svg{width:32px;height:32px}
  .reel__name{font-size:9.5px}
  .reel__amt{font-size:9px}
  .reel__mark{width:82px;height:100px}
  .res__amt{font-size:22px}
  .reel__fade{width:40px}
  .top{padding:12px 16px;gap:10px}
  /* имя бренда помещается — раньше от него оставалась одинокая плашка «демо» */
  .top__logo{gap:8px}
  .top__logo b{font-size:12.5px;letter-spacing:.1em}
  .tier{padding:7px 12px;font-size:10.5px;gap:7px}
  .go{width:100%;justify-content:center;padding:14px 20px}
  .drops{max-height:96px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .prize{opacity:1;scale:1;translate:0 0}
}

/* ---------- режим страницы ---------- */
.mode{
  margin:0 auto 14px;padding:8px 18px;max-width:max-content;
  border:1px solid color-mix(in srgb,var(--c) 42%,transparent);border-radius:999px;
  background:color-mix(in srgb,var(--c) 10%,transparent);
  color:#fff;font:700 11px/1.3 var(--f-m);letter-spacing:.1em;text-transform:uppercase;text-align:center;
}
.mode.is-warn{border-color:rgba(255,197,61,.42);background:rgba(255,197,61,.1);color:#FFD873}
.tier[disabled]{cursor:default;opacity:1}
.tier[disabled]:hover{transform:none}
.res__note{
  display:block;margin-top:9px;color:#8BFFC8;font:700 12.5px/1.3 var(--f-m);
  letter-spacing:.04em;
}

/* На самых узких экранах плашка «демо» уступает место названию. */
@media (max-width:360px){
  .top__logo .tag{display:none}
  .mode{font-size:10px;padding:7px 14px}
}

/* ============================================================
   Доводка мобильной раскладки (10.2026)
   ============================================================ */
/* Пустая лента выпадений не нужна: на телефоне она стояла над выбором
   уровня и сдвигала сцену вниз, на десктопе висела одинокой подписью. */
.drops:has(.drops__empty:not([hidden])){display:none}
.drop{grid-template-columns:30px minmax(0,1fr) auto}
.drops{width:220px}

@media (max-width:900px){
  /* Строка уровней раньше получала 1fr: при переносе DIAMOND уезжал
     на сотню пикселей вниз. Теперь растягивается только сцена,
     а лента выпадений встаёт под кнопку. */
  .wrap{grid-template-rows:auto auto 1fr auto auto}
  .tiers{align-content:start}
  .drops{grid-row:5;margin-top:10px}
}
@media (max-width:560px){
  /* «На главную» переносилась на две строки и выталкивала логотип за край —
     оставляем стрелку, подпись остаётся для экранных читалок */
  .back{font-size:0;gap:0;padding:9px}
  .back svg{width:18px;height:18px}
  .tiers{gap:6px}
  .tier{padding:7px 10px;font-size:10px;letter-spacing:.06em;gap:6px}
}

/* Итог под лентой: блок центровался по вертикали и при длинной сумме
   (награды теперь с 6 знаками) рос вверх — прямо на ленту. Привязываем
   его верхним краем под ленту, сумму держим в одну строку. */
.res{width:max-content;max-width:calc(100vw - 32px);margin-top:92px;translate:-50% 12px}
.is-res .res{translate:-50% 0}
.res__amt{white-space:nowrap}
@media (max-width:900px){ .res{margin-top:80px} }
@media (max-width:560px){ .res{margin-top:72px} .res__amt{font-size:21px} }