/* =====================================================================
   smallbox.scene.css — полноэкранная сцена открытия
   ---------------------------------------------------------------------
   Цвет редкости приходит из JS одной переменной --sbs-rc, всё остальное
   от неё производно. Добавить редкость = добавить блок в case.json.
   ===================================================================== */

body.sbs-lock { overflow: hidden !important; }

/* ТЕНЬ ТЕКСТА — НЕ СМЕЩЁННАЯ КОПИЯ, А СПЛОШНАЯ ВЫДАВКА.

   Одиночный text-shadow «0 0.155em 0» рисует силуэт глифа, сдвинутый
   вниз на 0.155em. Там, где буква по вертикали ТОЛЩЕ сдвига, копия
   перекрывается с самой буквой и всё выглядит слитно. А там, где
   тоньше — кончики лучей «x», низ «3», хвост «7» — между буквой и
   копией открывается фон, и тень отваливается отдельной фигурой. На
   референсе такого нет: под глифом сплошная тёмная плита.

   Поэтому тень набирается стопкой из 10 копий с шагом 0.0155em: каждая
   следующая перекрывает предыдущую, и объединение получается сплошным
   на всю глубину. Итоговая глубина та же 0.155em.

   Цвет ОБЯЗАН быть непрозрачным и тем же, что у обводки: полупрозрачные
   копии складывались бы друг с другом и давали полосы, а разный цвет
   отделял бы тень от контура — на референсе они сливаются в одну массу.

   em считается от кегля ЭЛЕМЕНТА, который использует переменную,
   поэтому одно объявление обслуживает и мелкий счётчик, и крупные числа
   наград. Подстановка в var() продублирована запасным значением: без
   этого файла (сцена без слоя Mega Box) свойство просто стало бы
   невалидным и тень пропала бы совсем. */
.sbs-root{
  position:fixed; inset:0; z-index:99999;
  --sbs-rc:#B8C4D9; --sbs-zoom:1; --sbs-shx:0px; --sbs-shy:0px;
  --mbx-ink:#150a22;
  --mbx-extrude:
    0 0.0155em 0 var(--mbx-ink), 0 0.031em  0 var(--mbx-ink),
    0 0.0465em 0 var(--mbx-ink), 0 0.062em  0 var(--mbx-ink),
    0 0.0775em 0 var(--mbx-ink), 0 0.093em  0 var(--mbx-ink),
    0 0.1085em 0 var(--mbx-ink), 0 0.124em  0 var(--mbx-ink),
    0 0.1395em 0 var(--mbx-ink), 0 0.155em  0 var(--mbx-ink);
  opacity:0; transition:opacity 260ms ease;
  cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent;
  /* Единственное место на сайте, где двойной тап НЕ приближает.
     Причина не в запрете зума (страница снова масштабируется целиком —
     см. meta viewport в main.html), а в задержке: пока браузер ждёт
     второе касание, click доходит до сцены на треть секунды позже, а
     она меряет темп нажатий и по частым тапам ускоряет показ наград
     (_fastTapMs в js/smallbox.scene.js). manipulation, а не none:
     прокрутка и щипок внутри сцены остаются. */
  touch-action:manipulation;
  font-family:inherit; color:#fff; overflow:hidden;
}
.sbs-root.is-on{ opacity:1; }

/* =====================================================================
   РЕЖИМ ДОЛИ ЭКРАНА — .sbs-root.is-pane
   ---------------------------------------------------------------------
   Открытие 2 и 4 ящиков сразу показывает столько же сцен рядом. Каждая
   живёт в своей доле (js/multibox.open.js), и уменьшает её НЕ пересчёт
   вёрстки, а один масштаб на весь корень.

   Почему именно так. Вся сцена набрана долями ЭКРАНА (vmin, vw, vh — в
   css/megabox.scene.css их больше сотни), и эти доли считаются от окна
   браузера, а не от родителя. Ужать сцену, просто сделав ей коробку
   поменьше, невозможно: содержимое осталось бы прежнего размера и
   вылезло бы за долю. Поэтому корню задаётся коробка РАЗМЕРОМ С ДОЛЮ,
   ПОДЕЛЁННУЮ НА МАСШТАБ (--pane-w/--pane-h), и она вся сжимается в долю
   через scale(--pane-k). Масштаб контроллер берёт как
   min(ширина доли/ширина окна, высота доли/высота окна) — при нём
   содержимое, помещавшееся в окно, гарантированно помещается и в долю,
   а коробка корня после сжатия закрывает долю ровно, без полей.

   Побочная выгода: transform делает корень точкой отсчёта для
   position:fixed внутри него (экраны очков силы, бонусов и итога в
   css/megabox.scene.css заданы именно так). Без него они считали бы
   проценты от окна и вылезали бы из своей доли на весь экран.
   ===================================================================== */
.sbs-root.is-pane{
  position:absolute; left:0; top:0; right:auto; bottom:auto;
  width:var(--pane-w,100vw); height:var(--pane-h,100vh);
  transform:scale(var(--pane-k,1)); transform-origin:0 0;
  z-index:1;   /* внутри своей доли; общий слой поднимает контроллер */
}

/* ---------- слои фона ---------- */
.sbs-bg{
  position:absolute; inset:0;
  background:radial-gradient(circle at 50% 42%,#241d4d 0%,#14102e 55%,#08061a 100%);
  background-size:cover; background-position:center;
}
.sbs-rays{
  position:absolute; inset:-45%;
  background-image:conic-gradient(from 0deg,
    rgba(255,255,255,.10) 0 4%, transparent 4% 12%);
  background-size:cover;
  opacity:0; transition:opacity 420ms ease, transform 900ms ease;
  animation:sbsSpin 22s linear infinite;
  mix-blend-mode:screen; pointer-events:none;
  filter:drop-shadow(0 0 40px var(--sbs-rc));
}
.sbs-rays.is-on{ opacity:.5; }
.sbs-rays.is-converge{ opacity:.85; transform:scale(.55); animation-duration:5s; }
@keyframes sbsSpin{ to{ transform:rotate(360deg); } }

.sbs-fx{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

.sbs-flash{
  position:absolute; inset:0; background:#fff; opacity:0;
  pointer-events:none; mix-blend-mode:screen;
}
.sbs-vignette{
  position:absolute; inset:0; pointer-events:none; opacity:.3;
  transition:opacity 400ms ease;
  background:radial-gradient(ellipse at center,transparent 38%,rgba(0,0,0,.86) 100%);
  box-shadow:inset 0 0 220px var(--sbs-rc);
}

/* ---------- камера ---------- */
.sbs-camera{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  transform:translate(var(--sbs-shx),var(--sbs-shy)) scale(var(--sbs-zoom));
  transition:transform 320ms cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.sbs-stagearea{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:min(78vw,660px); height:min(78vh,660px);
}

/* ---------- коробка ---------- */
.sbs-box{
  position:relative; width:100%; height:100%;
  --sbs-shakeamp:0px; --sbs-shakerot:0deg; --sbs-lidspin:900deg;
}
.sbs-box::before{
  content:''; position:absolute; left:50%; top:52%; transform:translate(-50%,-50%);
  width:80%; height:80%; border-radius:50%;
  background:radial-gradient(circle,var(--sbs-rc) 0%,transparent 68%);
  opacity:.28; filter:blur(34px);
}
.sbs-box img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; filter:drop-shadow(0 24px 40px rgba(0,0,0,.55));
}
.sbs-box-lid{ z-index:2; }

.sbs-box.is-enter{ animation:sbsEnter 720ms cubic-bezier(.16,1.1,.3,1) both; }
@keyframes sbsEnter{
  0%  { transform:translate3d(0,-120vh,0) scale(.55) rotate(-16deg); opacity:0; }
  62% { opacity:1; }
  78% { transform:translate3d(0,4%,0) scale(1.06,.9) rotate(2deg); }
  90% { transform:translate3d(0,-3%,0) scale(.97,1.04) rotate(-1deg); }
  100%{ transform:translate3d(0,0,0) scale(1) rotate(0); opacity:1; }
}
.sbs-box.is-landed{ animation:none; }

.sbs-box.is-shaking{ animation:sbsShake 90ms linear infinite; }
@keyframes sbsShake{
  0%  { transform:translate(0,0) rotate(0); }
  25% { transform:translate(calc(var(--sbs-shakeamp) * -1),2px) rotate(calc(var(--sbs-shakerot) * -1)); }
  50% { transform:translate(var(--sbs-shakeamp),-2px) rotate(var(--sbs-shakerot)); }
  75% { transform:translate(calc(var(--sbs-shakeamp) * -.6),1px) rotate(calc(var(--sbs-shakerot) * -.6)); }
  100%{ transform:translate(0,0) rotate(0); }
}

/* Крышка улетает — дуга вверх с вращением. */
.sbs-box-lid.is-launch{
  animation:sbsLid 900ms cubic-bezier(.2,.7,.4,1) forwards;
}
@keyframes sbsLid{
  0%  { transform:translate3d(0,0,0) rotate(0) scale(1); opacity:1; }
  55% { transform:translate3d(6%,-58%,0) rotate(calc(var(--sbs-lidspin) * .6)) scale(1.04); opacity:1; }
  100%{ transform:translate3d(14%,-135%,0) rotate(var(--sbs-lidspin)) scale(.72); opacity:0; }
}
.sbs-box.is-gone{ animation:sbsBoxOut 300ms ease-in forwards; }
@keyframes sbsBoxOut{ to{ transform:scale(1.5); opacity:0; } }

/* ---------- карточка награды ---------- */
.sbs-card{
  position:relative; display:flex; flex-direction:column; align-items:center;
  gap:10px; text-align:center; opacity:0; transform:scale(.6) translateY(30px);
}
.sbs-card.is-buildup{
  opacity:1; transform:scale(.25); filter:brightness(.25) saturate(.4);
  animation:sbsBuild 1100ms ease-in forwards;
}
@keyframes sbsBuild{
  0%  { transform:scale(.25) rotate(-6deg); filter:brightness(.2) saturate(.3); }
  100%{ transform:scale(.9) rotate(0);      filter:brightness(1) saturate(1); }
}
.sbs-card.is-in{ animation:sbsCardIn 300ms cubic-bezier(.2,1.6,.36,1) forwards; }
@keyframes sbsCardIn{ to{ opacity:1; transform:scale(1) translateY(0); } }

.sbs-artwrap{ position:relative; width:min(42vh,320px); height:min(42vh,320px); }
.sbs-artwrap::before{
  content:''; position:absolute; inset:-18%;
  background:radial-gradient(circle,var(--sbs-glow) 0%,transparent 66%);
  filter:blur(18px); animation:sbsPulse 1.8s ease-in-out infinite;
}
@keyframes sbsPulse{ 50%{ transform:scale(1.08); opacity:.8; } }
.sbs-art,.sbs-frame{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
}
.sbs-art{ filter:drop-shadow(0 10px 26px rgba(0,0,0,.6)); z-index:1; }
.sbs-frame{ z-index:2; }

.sbs-tier{
  font-size:clamp(12px,1.6vw,16px); letter-spacing:.42em; text-transform:uppercase;
  font-weight:800; color:var(--sbs-rc); text-shadow:0 0 22px var(--sbs-glow);
  padding-left:.42em;
}
.sbs-amount{
  font-size:clamp(48px,9vw,110px); font-weight:900; line-height:1;
  text-shadow:0 0 40px var(--sbs-glow),0 6px 0 rgba(0,0,0,.35);
  font-variant-numeric:tabular-nums;
}
.sbs-sub{
  font-size:clamp(15px,2.2vw,24px); font-weight:700; opacity:.92;
  display:flex; flex-direction:column; gap:4px;
}
.sbs-sub b{ color:var(--sbs-rc); font-size:1.3em; text-shadow:0 0 20px var(--sbs-glow); }

.sbs-card.is-rainbow .sbs-tier,
.sbs-card.is-rainbow .sbs-amount{ animation:sbsHue 2.2s linear infinite; }
@keyframes sbsHue{ to{ filter:hue-rotate(360deg); } }

/* ---------- сводка ---------- */
.sbs-summary{
  min-width:min(88vw,460px); padding:30px 34px; border-radius:22px;
  background:rgba(10,8,26,.88); border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(14px); box-shadow:0 30px 90px rgba(0,0,0,.6);
  opacity:0; transform:translateY(22px); transition:all 320ms cubic-bezier(.2,1,.36,1);
}
.sbs-summary.is-in{ opacity:1; transform:translateY(0); }
.sbs-sum-h{
  font-size:12px; letter-spacing:.34em; text-transform:uppercase;
  opacity:.55; margin-bottom:14px;
}
.sbs-sum-list{ list-style:none; margin:0 0 16px; padding:0; display:grid; gap:9px; }
.sbs-sum-list li{
  display:flex; align-items:center; gap:10px; font-size:16px;
  padding:9px 13px; border-radius:11px; background:rgba(255,255,255,.05);
  border-left:3px solid var(--li,#B8C4D9);
}
.sbs-sum-list .sbs-r-rare{--li:#22D3EE} .sbs-sum-list .sbs-r-super_rare{--li:#60A5FA}
.sbs-sum-list .sbs-r-epic{--li:#A855F7} .sbs-sum-list .sbs-r-mythic{--li:#F43F5E}
.sbs-sum-list .sbs-r-legendary{--li:#FBBF24}
.sbs-sum-t{
  padding-top:14px; border-top:1px solid rgba(255,255,255,.12);
  font-size:15px; opacity:.9;
}
.sbs-sum-t b{ color:#FFD84D; font-size:1.25em; }
.sbs-btn{
  margin-top:18px; width:100%; padding:15px; border:0; border-radius:14px;
  font-size:16px; font-weight:800; cursor:pointer; color:#0f0c22;
  background:linear-gradient(180deg,#FFE47A,#F5B518);
  box-shadow:0 8px 24px rgba(245,181,24,.4);
}
.sbs-btn:active{ transform:translateY(2px); }

/* ---------- HUD ---------- */
.sbs-hud{ position:absolute; inset:0; pointer-events:none; }
.sbs-close{
  position:absolute; top:18px; right:18px; width:44px; height:44px;
  border-radius:50%; border:1px solid rgba(255,255,255,.2);
  background:rgba(0,0,0,.4); color:#fff; font-size:18px; cursor:pointer;
  pointer-events:auto; backdrop-filter:blur(8px);
}
.sbs-close:hover{ background:rgba(0,0,0,.65); }
.sbs-hint{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  font-size:13px; letter-spacing:.22em; text-transform:uppercase;
  opacity:0; transition:opacity 300ms ease;
}
.sbs-hint.is-on{ opacity:.5; animation:sbsBlink 1.9s ease-in-out infinite; }
@keyframes sbsBlink{ 50%{ opacity:.16; } }

/* ---------- мобильные ---------- */
@media (max-width:640px){
  .sbs-stagearea{ width:88vw; height:52vh; }
  .sbs-artwrap{ width:min(36vh,240px); height:min(36vh,240px); }
  .sbs-summary{ padding:24px 20px; }
}

/* ---------- доступность ---------- */
@media (prefers-reduced-motion:reduce){
  .sbs-box,.sbs-box-lid,.sbs-card,.sbs-rays,.sbs-artwrap::before{
    animation:none !important; }
  .sbs-card{ opacity:1; transform:none; }
  .sbs-camera{ transition:none; }
}

/* =====================================================================
   Ценник награды
   ===================================================================== */
.sbs-price{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:14px; padding:9px 18px 9px 10px; border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));
  border:1px solid var(--sbs-rc);
  box-shadow:0 0 26px var(--sbs-glow), inset 0 1px 0 rgba(255,255,255,.22);
  backdrop-filter:blur(8px);
  font-weight:900; font-size:clamp(16px,2.4vw,26px);
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
  color:#FFE9A8; text-shadow:0 2px 8px rgba(0,0,0,.5);
  animation:sbsPriceIn 340ms cubic-bezier(.2,1.6,.36,1) 160ms both;
}
.sbs-price img{
  width:1.35em; height:1.35em; object-fit:contain;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.55));
}
@keyframes sbsPriceIn{
  from{ opacity:0; transform:translateY(12px) scale(.82); }
  to  { opacity:1; transform:translateY(0) scale(1); }
}

/* компактный ценник в сводке */
.sbs-sum-list li{ justify-content:space-between; }
.sbs-sum-list li > span{ flex:1; }
.sbs-sum-list .sbs-price{
  margin:0; padding:4px 11px 4px 6px; font-size:14px;
  background:rgba(0,0,0,.3); border-color:rgba(255,255,255,.16);
  box-shadow:none; animation:none; flex:0 0 auto;
}
.sbs-sum-list .sbs-price img{ width:1.15em; height:1.15em; }

/* =====================================================================
   Портрет бойца рядом с очками силы
   ===================================================================== */
.sbs-portrait{
  position:absolute; right:-14%; bottom:-8%;
  width:52%; height:52%; object-fit:contain; z-index:3;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.65));
  animation:sbsPortraitIn 380ms cubic-bezier(.2,1.5,.36,1) 120ms both;
}
@keyframes sbsPortraitIn{
  from{ opacity:0; transform:translateX(26px) scale(.7) rotate(8deg); }
  to  { opacity:1; transform:translateX(0) scale(1) rotate(0); }
}
@media (max-width:640px){
  .sbs-portrait{ right:-8%; bottom:-4%; width:46%; height:46%; }
}
@media (prefers-reduced-motion:reduce){
  .sbs-price,.sbs-portrait{ animation:none !important; opacity:1; transform:none; }
}

/* =====================================================================
   Счётчик оставшихся наград
   ---------------------------------------------------------------------
   Оригинал держал его в ПРАВОМ нижнем углу (.is-right, ставится из
   манифеста: scene.counter.position). Класс .is-special — мигание
   «следующая награда — боец или звёздная сила».
   ===================================================================== */
/* Число в квадрате. Набрано ровно так же, как число награды («x 228»,
   .mbx-amount в megabox.scene.css): тот же шрифт, та же обводка
   0.1em и та же тень 0 0.155em. Все три величины заданы в em, поэтому
   при любом кегле цифра выглядит той же по пропорциям, что и крупное
   число на экране награды, — просто меньше.

   Размер квадрата и кегль подписи рядом с ним подобраны по референсу
   (скрин магазина): там квадрат ЗАМЕТНО крупнее подписи — соотношение
   высоты квадрата к высоте прописных букв подписи около 3.2:1. На
   прежних 46 px квадрат/clamp(14px,2.2vmin,22px) подпись это
   соотношение на обычном окне падало до ~2.4:1 (подпись у самого
   потолка clamp'а почти догоняла квадрат по высоте) — отсюда и жалоба
   «квадрат недостаточно больше текста». Дальше оба элемента ещё раз
   увеличены на 25% по отдельному запросу: 56→70 px квадрат,
   29→36 px цифра (соотношение 3.2:1 то же самое, масштаб общий). */
.sbs-counter{
  position:absolute; left:20px; bottom:20px;
  width:70px; height:70px; border-radius:15px;
  display:flex; align-items:center; justify-content:center;
  background:#E01E1E; color:#fff;
  font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif;
  font-size:36px; font-weight:800; line-height:1;
  letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
  --so-c:#150a22;
  text-shadow:var(--so),var(--mbx-extrude, 0 0.155em 0 #150a22);
  box-shadow:0 9px 28px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.28);
  pointer-events:none; z-index:3;
}
.sbs-counter[hidden]{ display:none; }

/* Подпись «Осталось предметов:» слева от квадрата-счётчика (референс).
   Оформление то же, что у числа награды («x 228», .mbx-amount): шрифт,
   обводка 0.1em, тень 0 0.155em и трекинг 0.01em. Заголовки экранов
   («МОНЕТЫ», «ОЧКИ СИЛЫ») набраны иначе — там чистая белая заливка без
   обводки; служебная подпись лежит прямо на фоне и без контура «плывёт».

   Кегль по-прежнему тянется через vmin (подпись должна ужиматься на
   узком окне); границы clamp'а подняты вместе с квадратом на 25 %
   (16→20 px низ, 20→25 px потолок), а затем ещё на 10 % отдельным
   запросом, только у подписи, без квадрата (20→22 px, 25→27.5 px).

   Раньше подпись стояла по центру квадрата (align-items:center у обоих
   —высота контейнера одна и та же, 70px, и оба bottom:20px, поэтому
   центр совпадал с центром). По отдельному запросу текст теперь сидит
   по НИЗУ: align-items:flex-end — низ строки садится на ту же линию,
   что и низ квадрата, а сверху над подписью остаётся пустое место
   (квадрат-то выше). */
.sbs-counter-label{
  position:absolute; bottom:20px; height:70px;
  display:flex; align-items:flex-end;
  font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif;
  font-weight:800; text-transform:uppercase;
  font-size:clamp(22px,2.75vmin,27.5px); letter-spacing:.01em;
  word-spacing:.16em;
  color:#fff;
  --so-c:#150a22;
  text-shadow:var(--so),var(--mbx-extrude, 0 0.155em 0 #150a22);
  white-space:nowrap; pointer-events:none; z-index:3;
}
.sbs-counter-label[hidden]{ display:none; }
/* счётчик справа → подпись сразу слева от него; счётчик слева → справа.
   88px = 20 (отступ квадрата) + 56 (его прежняя ширина) + 12 (зазор);
   с квадратом 70px отступ пересчитан на 102px, зазор тот же. */
.sbs-counter-label.is-right{ right:102px; left:auto; }
.sbs-counter-label:not(.is-right){ left:102px; right:auto; }
@media (max-width:640px){
  .sbs-counter-label{ bottom:14px; height:60px; }
  .sbs-counter-label.is-right{ right:82px; }
  .sbs-counter-label:not(.is-right){ left:82px; }
}
.sbs-counter.is-tick{ animation:sbsTick 260ms cubic-bezier(.2,1.6,.36,1); }
@keyframes sbsTick{
  0%  { transform:scale(1); }
  45% { transform:scale(1.28); }
  100%{ transform:scale(1); }
}
@media (max-width:640px){
  .sbs-counter{ left:14px; bottom:14px; width:60px; height:60px; font-size:31px; }
}

/* =====================================================================
   Сводка: строки с выбором «продать / в инвентарь»
   ===================================================================== */
.sbs-summary{ max-height:86vh; overflow-y:auto; }

.sbs-row{
  display:flex; align-items:center; gap:11px;
  padding:9px 11px; border-radius:12px;
  background:rgba(255,255,255,.05);
  border-left:3px solid var(--li,#B8C4D9);
  transition:background 180ms ease, opacity 180ms ease;
}
.sbs-row.sbs-r-rare{--li:#22D3EE} .sbs-row.sbs-r-super_rare{--li:#60A5FA}
.sbs-row.sbs-r-epic{--li:#A855F7} .sbs-row.sbs-r-mythic{--li:#F43F5E}
.sbs-row.sbs-r-legendary{--li:#FBBF24}
.sbs-row.is-fixed{ --li:#7C8AA5; opacity:.85; }
.sbs-row.is-sell{ background:rgba(224,30,30,.14); }

.sbs-row-ico{ width:34px; height:34px; object-fit:contain; flex:0 0 auto; }
.sbs-row-n{ flex:1; font-size:15px; font-weight:600; text-align:left; }

.sbs-tog{
  flex:0 0 auto; padding:7px 13px; border-radius:9px; cursor:pointer;
  font-size:12px; font-weight:800; letter-spacing:.03em;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08); color:#fff;
  transition:all 160ms ease; min-width:104px;
}
.sbs-tog:hover{ background:rgba(255,255,255,.16); }
.sbs-row.is-sell .sbs-tog{
  border-color:#E01E1E; background:rgba(224,30,30,.28); color:#FFD9D9;
}

.sbs-bulk{ display:flex; gap:10px; margin-top:14px; }
.sbs-btn-2{ flex:1; margin-top:0; padding:12px; font-size:14px; }
.sbs-btn-sell{
  background:linear-gradient(180deg,#FF6B6B,#E01E1E); color:#fff;
  box-shadow:0 8px 24px rgba(224,30,30,.38);
}
.sbs-sum-t small{ opacity:.5; font-weight:400; }

/* =====================================================================
   Коробка из ОДНОЙ картинки (нет отдельных box_lid / box_open)
   Раскрытие играется на самом спрайте: рывок вверх, вспышка, разлёт.
   ===================================================================== */
.sbs-box.is-single .sbs-box-body{
  animation:sbsSinglePop 520ms cubic-bezier(.2,1.3,.4,1) forwards;
  transform-origin:50% 62%;
}
@keyframes sbsSinglePop{
  0%  { transform:scale(1) translateY(0) rotate(0);
        filter:brightness(1); }
  22% { transform:scale(1.14,.88) translateY(3%) rotate(0);
        filter:brightness(1.5); }
  48% { transform:scale(.94,1.16) translateY(-7%) rotate(-2deg);
        filter:brightness(2.6); }
  100%{ transform:scale(1.7) translateY(-14%) rotate(3deg);
        filter:brightness(4); opacity:0; }
}
.sbs-box.is-single.is-gone{ animation:none; }
.sbs-box.is-single.is-gone .sbs-box-body{ opacity:0; }

@media (prefers-reduced-motion:reduce){
  .sbs-box.is-single .sbs-box-body{ animation:none; opacity:0; }
}

/* =====================================================================
   Ценная награда: пропуск заблокирован
   ---------------------------------------------------------------------
   Курсор перестаёт быть «кликабельным», чтобы игрок не решил, что
   интерфейс завис. Крестик остаётся рабочим — запирать в полноэкранном
   режиме нельзя.
   ===================================================================== */
.sbs-root.is-locked{ cursor:default; }
.sbs-root.is-locked .sbs-hint{ opacity:0 !important; animation:none; }

/* Звёздная сила — отдельный тир, золото между обычным и редким */
.sbs-r-star_power .sbs-tier{ color:#F5D142; }
.sbs-sum-list .sbs-r-star_power,
.sbs-row.sbs-r-star_power{ --li:#F5D142; }

/* =====================================================================
   БОНУСНАЯ (ЖЁЛТАЯ) СЕКЦИЯ
   ---------------------------------------------------------------------
   Показывается после того, как доиграна вся основная (красная) секция.
   ===================================================================== */

/* Плашка редкости на бонусной карточке. */
.sbs-tier.sbs-tier-bonus{
  color:#3A2400;
  background:linear-gradient(180deg,#FFE083,#F5A524);
  border-radius:999px; padding:4px 16px;
  letter-spacing:.14em;
}

/* Счётчик в бонусной секции — жёлтый вместо красного. */
.sbs-counter.is-bonus{
  box-shadow:0 9px 0 rgba(120,70,0,.55), 0 0 40px rgba(245,165,36,.55);
}

/* Строка бонуса в итоговой сводке. */
.sbs-row.is-bonusrow .sbs-row-n{ color:#F5C542; }


/* Заголовок бонусной секции в быстром открытии. */
.sbs-sum-sec{
  margin:10px 0 4px; padding:4px 0;
  font-family:'Unbounded',system-ui,sans-serif; font-weight:900;
  font-size:12px; letter-spacing:.18em; color:#F5A524;
  border-top:1px solid rgba(245,165,36,.35);
  list-style:none;
}


/* Счётчик справа — как в оригинале. */
.sbs-counter.is-right{ left:auto; right:20px; }
@media (max-width:640px){
  .sbs-counter.is-right{ left:auto; right:14px; }
}

/* Мигание: СЛЕДУЮЩАЯ награда — новый боец или звёздная сила.
   В оригинале этот сигнал подавала коробочка рядом со счётчиком; здесь
   мигает сам квадрат. Пока следующая награда особая — мигание не гаснет,
   поэтому два бойца подряд подсвечиваются оба. */
.sbs-counter{ --sbs-hot:#FF2A2A; }
/* Плавное, аккуратное мерцание: медленное «дыхание» с мягким ореолом,
   без резких скачков размера и яркости. ease-in-out даёт ровный,
   спокойный ход туда-обратно. */
.sbs-counter.is-special{ animation:sbsFlash 2400ms ease-in-out infinite; }
@keyframes sbsFlash{
  0%,100%{
    transform:scale(1);
    box-shadow:0 6px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.3),
               0 0 10px 1px var(--sbs-hot);
    filter:brightness(1.03);
  }
  50%{
    transform:scale(1.07);
    box-shadow:0 6px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.42),
               0 0 24px 7px var(--sbs-hot);
    filter:brightness(1.28) saturate(1.18);
  }
}
/* ВАЖНО: тик числа (sbsTick) и смена секции (sbsSwitch) — одноразовые.
   Классы is-tick / is-switch НЕ снимаются после проигрыша, поэтому если
   бы они ЗАМЕНЯЛИ пульсацию, свечение гасло бы после первого тика (ровно
   этот баг и был). Теперь пульсация sbsFlash идёт ПАРАЛЛЕЛЬНО: она в
   списке первой, одноразовая анимация — последней и потому «выигрывает»
   transform на своё время, а после завершения пульс сам возвращается. */
.sbs-counter.is-special.is-tick{
  animation:sbsFlash 2400ms ease-in-out infinite,
            sbsTick 260ms cubic-bezier(.2,1.6,.36,1);
}
@media (prefers-reduced-motion:reduce){
  .sbs-counter.is-special{
    animation:none;
    box-shadow:0 6px 18px rgba(0,0,0,.45), 0 0 20px 6px var(--sbs-hot);
  }
}

/* Смена секции: красный квадрат становится жёлтым. Вспышка, чтобы момент
   «наград больше нет… а нет, есть» не проскочил незамеченным. */
.sbs-counter.is-switch{ animation:sbsSwitch 520ms cubic-bezier(.2,1.4,.36,1); }
@keyframes sbsSwitch{
  0%  { transform:scale(1)    rotate(0deg);   filter:brightness(1); }
  30% { transform:scale(1.45) rotate(-9deg);  filter:brightness(2.1);
        box-shadow:0 6px 18px rgba(0,0,0,.45), 0 0 36px 12px rgba(255,200,60,.85); }
  60% { transform:scale(1.12) rotate(4deg);   filter:brightness(1.3); }
  100%{ transform:scale(1)    rotate(0deg);   filter:brightness(1); }
}
/* Смена секции + тик (без свечения): одноразовая вспышка перехода. */
.sbs-counter.is-switch.is-tick{ animation:sbsSwitch 520ms cubic-bezier(.2,1.4,.36,1); }
/* Смена секции + свечение: вспышка перехода поверх непрерывной пульсации,
   чтобы после перехода квадрат продолжал пульсировать (а не гас). */
.sbs-counter.is-switch.is-special,
.sbs-counter.is-switch.is-special.is-tick{
  animation:sbsFlash 2400ms ease-in-out infinite,
            sbsSwitch 520ms cubic-bezier(.2,1.4,.36,1);
}
@media (prefers-reduced-motion:reduce){ .sbs-counter.is-switch{ animation:none; } }

/* =====================================================================
   БЫСТРЫЙ РЕЖИМ — .sbs-root.is-fast

   Включается сам, когда игрок жмёт часто (два быстрых касания подряд),
   и гаснет, стоит ему сделать паузу. Логика сцены при этом та же:
   одно касание — одно действие, ни одна награда не пропускается. Здесь
   только визуальные длительности: карточка обязана успеть появиться
   ДО следующего касания, иначе быстрый игрок видит пустой экран.

   Тайминги JS сжимаются множителем scene.fastForward в case.json,
   эти правила — их пара для CSS-анимаций.
   ===================================================================== */
.sbs-root.is-fast .sbs-card.is-in      { animation-duration:120ms; }
.sbs-root.is-fast .sbs-card.is-buildup { animation-duration:380ms; }
.sbs-root.is-fast .sbs-box.is-enter    { animation-duration:260ms; }
.sbs-root.is-fast .sbs-box.is-gone     { animation-duration:120ms; }
.sbs-root.is-fast .sbs-box-lid.is-launch { animation-duration:340ms; }
.sbs-root.is-fast .sbs-box.is-single .sbs-box-body { animation-duration:200ms; }
.sbs-root.is-fast .sbs-price,
.sbs-root.is-fast .sbs-portrait        { animation-duration:140ms; animation-delay:0ms; }
.sbs-root.is-fast .sbs-counter.is-tick { animation-duration:120ms; }
.sbs-root.is-fast .sbs-counter.is-switch { animation-duration:200ms; }
/* ВАЖНО: когда .is-special тоже висит на счётчике, элемент играет ДВЕ
   анимации разом (sbsFlash + sbsTick/sbsSwitch — см. выше). Одиночное
   значение animation-duration в правилах выше применяется СРАЗУ КО
   ВСЕМ анимациям в списке, поэтому оно случайно сжимало и плавную
   пульсацию sbsFlash до 120/200мс в быстром режиме — свечение казалось
   «незамедлившимся», хотя её собственная длительность не менялась.
   Список через запятую разводит длительности по анимациям в том же
   порядке, что и в animation-name: пульсация остаётся в своём темпе,
   ускоряется только одноразовый тик/переход. */
.sbs-root.is-fast .sbs-counter.is-special.is-tick { animation-duration:2400ms, 120ms; }
.sbs-root.is-fast .sbs-counter.is-switch.is-special,
.sbs-root.is-fast .sbs-counter.is-switch.is-special.is-tick { animation-duration:2400ms, 200ms; }
.sbs-root.is-fast .sbs-summary         { transition-duration:140ms; }
/* Вспышка кадра гасится быстрее — иначе кадры наслаиваются друг на друга. */
.sbs-root.is-fast .sbs-flash           { transition-duration:160ms !important; }