/* ===== SpiderGift · рулетка кейса, апгрейд, дабл ===== */

/* --------------------------- РУЛЕТКА КЕЙСА --------------------------- */
.roulette-wrap {
  position: relative;
  /* во всю ширину экрана: сцена центрирует своих детей, поэтому ширину
     задаём явно, а не растягиванием грид-ячейки (иначе съезжает арт кейса) */
  width: calc(100% + var(--pad) * 2);
  margin: 18px calc(var(--pad) * -1);
  padding: 0;
}
.roulette {
  position: relative;
  height: 158px;
  overflow: hidden;
  background: #14141b;
  border-top: 1px solid var(--stroke);
  border-bottom: 1px solid var(--stroke);
  /* края гасим мягко и узко — широкий градиент съедал яркость половины ленты */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.roulette-track {
  display: flex;
  gap: 10px;
  height: 100%;
  align-items: center;
  padding: 0 4px;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
.rl-item {
  position: relative;
  flex: 0 0 auto;
  width: 118px;
  height: 130px;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, #262633, #1b1b25);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 22px -6px var(--rar, transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  overflow: hidden;
}
.rl-item::after {
  content: '';
  position: absolute;
  inset: auto -30% -50% -30%;
  height: 110px;
  background: radial-gradient(ellipse at center, var(--rar), transparent 70%);
  filter: blur(18px);
  opacity: .9;
}
.rl-item img, .rl-item .fallback {
  position: relative;
  width: 68px; height: 68px;
  object-fit: cover;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 38px;
}
.rl-item .rl-price {
  position: relative;
  font-size: 12px;
  font-weight: 700;
  color: #cfe0ff;
}
.rl-item.hit { border-color: var(--stroke-strong); }
.rl-item.is-stars { --rar: rgba(255, 176, 32, .6); }
.rl-price.stars { color: var(--gold); }

.roulette-pointer {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.12));
  box-shadow: 0 0 16px 3px rgba(255,255,255,.5);
  z-index: 3;
  pointer-events: none;
}
/* одна стрелка сверху — она и указывает на выпавший предмет */
.roulette-pointer::before {
  content: '';
  position: absolute;
  top: -2px; left: 50%;
  transform: translateX(-50%);
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 14px solid #fff;
  filter: drop-shadow(0 3px 9px rgba(255,255,255,.6));
}
/* один раз «клюёт» по предмету, когда лента остановилась */
.roulette-pointer.hit::before { animation: pointer-hit .62s var(--ease-spring) 1; }
@keyframes pointer-hit {
  0%   { transform: translateX(-50%) translateY(-14px) scale(1.35); }
  55%  { transform: translateX(-50%) translateY(5px) scale(1.05); }
  100% { transform: translateX(-50%) translateY(0) scale(1); }
}

/* вертикальные барабаны для мульти-открытия */
.reels {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
  width: 100%;
  height: 300px;
  margin: 18px 0;
}
.reel {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: #14141b;
  border: 1px solid var(--stroke);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
}
.reel-track {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px;
  will-change: transform;
}
.reel .rl-item { width: 100%; height: 92px; }
.reel .rl-item img, .reel .rl-item .fallback { width: 48px; height: 48px; font-size: 26px; }
.reel .rl-price { font-size: 11px; }
.reels-line {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, #fff, transparent);
  box-shadow: 0 0 14px 2px rgba(255,255,255,.45);
  z-index: 3;
  pointer-events: none;
}
/* стрелка слева от барабанов — тот же смысл, что и у одиночной ленты */
.reels-line::before {
  content: '';
  position: absolute;
  left: -4px; top: 50%;
  transform: translateY(-50%);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid #fff;
  filter: drop-shadow(0 0 8px rgba(255,255,255,.6));
}
.reels-line.hit::before { animation: reels-hit .62s var(--ease-spring) 1; }
@keyframes reels-hit {
  0%   { transform: translateY(-50%) translateX(-12px) scale(1.3); }
  55%  { transform: translateY(-50%) translateX(4px) scale(1.05); }
  100% { transform: translateY(-50%) translateX(0) scale(1); }
}

/* результат */
.prize-sheet { text-align: center; }
.prize-art {
  position: relative;
  width: 168px; height: 168px;
  margin: 8px auto 14px;
  display: grid;
  place-items: center;
}
.prize-art img, .prize-art .fallback {
  position: relative;
  z-index: 2;
  width: 140px; height: 140px;
  border-radius: 24px;
  object-fit: cover;
  display: grid;
  place-items: center;
  font-size: 76px;
  filter: drop-shadow(0 12px 32px rgba(0,0,0,.6));
}
.prize-halo {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--rar), transparent 68%);
  filter: blur(26px);
  opacity: .9;
}
.prize-name { font-size: 23px; font-weight: 800; }
.prize-price {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  padding: 8px 16px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  font-weight: 700;
}
.prize-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.prize-price.stars { color: var(--gold); }
.prize-multi { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 10px; margin: 14px 0 4px; }

/* --------------------------- АПГРЕЙД --------------------------- */
.up-stage {
  position: relative;
  display: grid;
  place-items: center;
  margin: 10px 0 18px;
}
.up-dial {
  position: relative;
  width: min(300px, 78vw);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  /* сектор выигрыша обязан начинаться с 12 часов: стрелка стоит там же
     и крутится по часовой, иначе зона и результат расходятся на четверть круга */
  background:
    radial-gradient(circle at 50% 50%, rgba(17,14,26,.98) 58%, transparent 59%),
    conic-gradient(from 0deg,
      var(--win, #3ddc97) 0 calc(var(--chance, 10) * 1%),
      rgba(181,137,255,.08) calc(var(--chance, 10) * 1%) 100%);
  filter: drop-shadow(0 0 28px rgba(69,214,127,.22));
  transition: background .45s var(--ease-out);
}
.up-dial::after {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 1px solid var(--stroke);
}
.up-needle {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  will-change: transform;
  transform: rotate(0deg);
  z-index: 3;
  pointer-events: none;
}
.up-needle::before {
  content: '';
  position: absolute;
  top: -6px; left: 50%;
  width: 4px; height: 34px;
  transform: translateX(-50%);
  border-radius: 4px;
  background: linear-gradient(180deg, #fff, rgba(255,255,255,.25));
  box-shadow: 0 0 14px 3px rgba(255,255,255,.65);
}
.up-center { position: relative; z-index: 2; text-align: center; }
.up-chance { font-size: 40px; font-weight: 800; letter-spacing: -.03em; }
.up-chance small { font-size: 20px; opacity: .6; }
.up-label { font-size: 13px; color: var(--text-mute); font-weight: 600; }

.up-pair { display: grid; grid-template-columns: 1fr 44px 1fr; align-items: center; gap: 8px; margin-bottom: 8px; }
.up-slot {
  min-height: 132px;
  border-radius: var(--r-md);
  border: 1px dashed var(--stroke-strong);
  background: var(--surface);
  display: grid;
  place-items: center;
  padding: 12px;
  text-align: center;
  transition: border-color .25s, background .25s;
}
.up-slot.filled { border-style: solid; }
/* несколько предметов в ставке — вместо превью картинка подарка */
.up-slot img.slot-prize { object-fit: contain; border-radius: 0; margin: 0 auto 4px; }
.up-slot .ph { color: var(--text-mute); font-size: 13px; font-weight: 600; }
.up-slot img, .up-slot .fallback {
  width: 64px; height: 64px;
  border-radius: 14px;
  object-fit: cover;
  display: grid;
  place-items: center;
  font-size: 34px;
  margin-bottom: 6px;
}
.up-arrow { display: grid; place-items: center; font-size: 22px; color: var(--text-mute); }
.up-multi { text-align: center; font-size: 13px; color: var(--text-dim); margin-top: 4px; }
/* итог броска: число и порог — видно, почему выиграл или нет */
.up-roll { min-height: 18px; margin: -8px 0 14px; text-align: center; font-size: 12.5px; color: var(--text-mute); }
.up-roll b { color: #fff; font-weight: 700; }

/* --------------------------- ДАБЛ --------------------------- */
/* Колесо — бусины на паутинной нити; сверху свисает паук-указатель */
.dbl-wheel {
  position: relative;
  height: 104px;
  margin: 6px calc(var(--pad) * -1) 14px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(124, 61, 255, .16), transparent 62%),
    #0c0a13;
  border-top: 1px solid var(--stroke);
  border-bottom: 1px solid var(--stroke);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
/* нить, на которой «висят» сектора */
.dbl-thread {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--silk) 12%, var(--silk) 88%, transparent);
  z-index: 0;
}
.dbl-track {
  position: relative;
  display: flex;
  gap: 8px;
  height: 100%;
  align-items: center;
  padding: 0 4px;
  will-change: transform;
  z-index: 1;
}
.dbl-cell {
  flex: 0 0 auto;
  width: 64px; height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 21px;
  font-weight: 700;
  color: #fff;
  position: relative;
}
/* блик сверху — бусина, а не плоский кружок */
.dbl-cell::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.22), transparent 58%);
}
.dbl-cell.red {
  background: radial-gradient(circle at 38% 30%, #ff6b85, #c31138 78%);
  box-shadow: 0 0 20px rgba(255, 77, 109, .34), inset 0 0 0 1px rgba(255,255,255,.1);
}
.dbl-cell.black {
  background: radial-gradient(circle at 38% 30%, #2a2438, #120f1c 78%);
  box-shadow: 0 0 16px rgba(0,0,0,.6), inset 0 0 0 1px rgba(181,137,255,.16);
}
.dbl-cell.green {
  background: radial-gradient(circle at 38% 30%, #6ef0b4, #12a069 78%);
  box-shadow: 0 0 22px rgba(61, 220, 151, .4), inset 0 0 0 1px rgba(255,255,255,.12);
}
/* указатель: паук спускается на нити ровно над выпавшим сектором */
.dbl-pointer {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--accent-soft) 0 34px, transparent 34px);
  z-index: 3;
  pointer-events: none;
}
.dbl-spider {
  position: absolute;
  top: 26px; left: 50%;
  width: 28px; height: 28px;
  transform: translateX(-50%);
  object-fit: contain;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 10px rgba(181, 137, 255, .7));
  animation: dbl-dangle 3.4s ease-in-out infinite;
}
@keyframes dbl-dangle {
  0%, 100% { transform: translateX(-50%) rotate(-5deg); }
  50%      { transform: translateX(-50%) rotate(5deg); }
}
.dbl-timer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.dbl-bar { height: 4px; border-radius: 4px; background: var(--surface-2); overflow: hidden; margin-bottom: 14px; }
.dbl-bar span { display: block; height: 100%; background: linear-gradient(90deg, #4d9dff, #a45cff); transition: width .2s linear; }

.dbl-bets { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.dbl-btn {
  position: relative;
  padding: 13px 8px 11px;
  border-radius: var(--r-md);
  border: 1px solid var(--tone-line, var(--stroke));
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  overflow: hidden;
  transition: transform .16s var(--ease-spring), border-color .2s;
}
/* свечение цвета живёт внутри карточки, а не заливает её целиком */
.dbl-btn::before {
  content: '';
  position: absolute;
  inset: auto -30% -70% -30%;
  height: 90px;
  background: radial-gradient(ellipse at center, var(--tone-glow), transparent 70%);
  filter: blur(16px);
}
.dbl-btn .dbl-mult {
  position: relative;
  font-family: 'Geologica', 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--tone-text);
  line-height: 1;
}
.dbl-btn .dbl-name { position: relative; font-size: 11.5px; font-weight: 600; color: var(--text-dim); }
.dbl-btn .dbl-pool-val {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.dbl-btn:active { transform: scale(.96); }
.dbl-btn.red   { --tone-text: #ff8098; --tone-glow: rgba(255,77,109,.5);  --tone-line: rgba(255,77,109,.28); }
.dbl-btn.green { --tone-text: #6ef0b4; --tone-glow: rgba(61,220,151,.45); --tone-line: rgba(61,220,151,.28); }
.dbl-btn.black { --tone-text: #c9c2e6; --tone-glow: rgba(181,137,255,.3); --tone-line: rgba(181,137,255,.22); }
.dbl-btn.win   { animation: flash-win .8s ease-out; border-color: #fff; }

.dbl-history { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.dbl-history::-webkit-scrollbar { display: none; }
.dbl-hcell {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
}
.dbl-hcell.red { background: #d4173c; }
.dbl-hcell.black { background: #22222c; }
.dbl-hcell.green { background: #18a85e; }

.dbl-pool { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 4px; }
.dbl-pool div {
  padding: 8px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--stroke);
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
}
.dbl-pool small { display: block; color: var(--text-mute); font-weight: 600; font-size: 10.5px; }

.bet-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 14px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--stroke);
  margin-bottom: 10px;
}
.bet-input input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  color: #fff;
  font: 700 17px/1 'Inter', sans-serif;
  padding: 12px 0;
}
.bet-input input::-webkit-outer-spin-button,
.bet-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bet-quick { display: flex; gap: 6px; }
.bet-quick button {
  padding: 8px 10px;
  border-radius: var(--r-xs);
  background: var(--surface-2);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
}

/* --------------------------- КРАШ --------------------------- */
.crash-stage {
  position: relative;
  height: 258px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 20% 100%, rgba(47,107,255,.22), transparent 60%),
    linear-gradient(180deg, #0b0b12, #11111a);
  border: 1px solid var(--stroke);
  transition: background .4s;
}
.crash-stage.crashed {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255,59,92,.28), transparent 65%),
    linear-gradient(180deg, #1a0b10, #12080d);
}
/* Фон в полёте: пока паук бежит, мимо проносится сам мир. Два слоя уходят
   назад с разной скоростью (дальний медленнее — так видно глубину), а темп
   задаёт crash.js переменной --rush-dur: чем выше множитель, тем быстрее. */
.crash-bg {
  position: absolute;
  inset: -12% -22%;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
}
.crash-stage.flying .crash-bg { opacity: 1; }
.crash-bg span {
  position: absolute;
  inset: 0;
  will-change: transform;
  animation: bg-drift linear infinite;
}
.crash-bg .far {
  background-image: radial-gradient(rgba(180, 150, 255, .28) 1px, transparent 1.4px);
  background-size: 48px 48px;
  animation-duration: calc(var(--rush-dur, 7s) * 2.4);
}
.crash-bg .near {
  background-image: repeating-linear-gradient(115deg,
    rgba(150, 190, 255, .13) 0 2px, transparent 2px 96px);
  background-size: 96px 96px;
  animation-duration: var(--rush-dur, 7s);
}
@keyframes bg-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-48px, 48px, 0); }
}
.crash-bg .near { animation-name: bg-drift-near; }
@keyframes bg-drift-near {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-96px, 96px, 0); }
}
.crash-stage.crashed .crash-bg { opacity: .25; }

/* искры взлёта: летят назад мимо паука по всему фону */
.crash-rush { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.crash-rush i {
  position: absolute;
  width: var(--len, 22px); height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(190, 165, 255, .95));
  animation: rush-fly linear forwards;
}
@keyframes rush-fly {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(22deg) scaleX(.5); }
  18%  { opacity: var(--alpha, .6); }
  100% { opacity: 0;
         transform: translate3d(var(--dx, -160px), var(--dy, 70px), 0) rotate(22deg) scaleX(1); }
}
.crash-stage.crashed .crash-rush i { background: linear-gradient(90deg, transparent, rgba(255, 110, 140, .9)); }
@media (prefers-reduced-motion: reduce) {
  .crash-bg, .crash-rush { display: none; }
}

/* Пыль из-под лап: паук торопится, и частицы отлетают назад по ходу движения.
   Каждую частицу создаёт crash.js в точке, где паук сейчас; направление, длина
   и срок жизни приходят переменными, дальше всё доигрывает CSS. */
.crash-dust {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.crash-dust i {
  position: absolute;
  width: var(--w, 3px); height: 3px;
  margin: -1.5px 0 0 -1.5px;
  border-radius: 2px;
  background: var(--accent-soft, #b589ff);
  box-shadow: 0 0 6px rgba(181, 137, 255, .85);
  animation: dust-fly .5s ease-out forwards;
}
@keyframes dust-fly {
  0%   { opacity: .95; transform: translate(0, 0) rotate(var(--rot, 0deg)) scale(var(--s, 1)); }
  100% { opacity: 0;
         transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--rot, 0deg))
                    scale(calc(var(--s, 1) * .4)); }
}
/* на срыве разлёт окрашивается в красный вместе со всей сценой */
.crash-stage.crashed .crash-dust i {
  background: #ff5f7a;
  box-shadow: 0 0 7px rgba(255, 77, 109, .9);
}
@media (prefers-reduced-motion: reduce) {
  .crash-dust { display: none; }
}
.crash-stars { position: absolute; inset: 0; pointer-events: none; }
.crash-stars i {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  opacity: .5;
  animation: twinkle 6s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: .15; transform: scale(.7); }
  50%      { opacity: .7; transform: scale(1); }
}
.crash-chart { position: absolute; inset: 0; width: 100%; height: 100%; }
/* нить паутины, а не инверсионный след */
#crash-line { filter: drop-shadow(0 0 8px rgba(181, 137, 255, .75)); }
.crash-stage.crashed #crash-line { stroke: #ff4d6d; filter: drop-shadow(0 0 12px rgba(255,77,109,.7)); }

/* паук ползёт по нити: шаг уже внутри spider-crawl.webp, CSS только качает
   корпус. До старта паука не показываем — в ожидании раунда на сцене король */
.spider {
  position: absolute;
  top: 0; left: 0;
  width: 80px; height: 80px;
  will-change: transform;
  z-index: 3;
  opacity: 0;
  /* паук почти чёрный, на тёмной сцене его держит подсветка по контуру */
  filter: drop-shadow(0 0 3px rgba(181, 137, 255, .7))
          drop-shadow(0 0 16px rgba(124, 61, 255, .5));
  transition: opacity .2s ease;
}
.spider.flying, .spider.boom { opacity: 1; }
.spider-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
}
.spider.flying { animation: crawl-bob .26s ease-in-out infinite alternate; }
@keyframes crawl-bob {
  from { margin-top: -1px; }
  to   { margin-top: 1px; }
}
.spider.boom { animation: spider-fall .6s ease-in forwards; }
@keyframes spider-fall {
  0%   { opacity: 1; }
  100% { opacity: 0; transform-origin: center; filter: blur(5px) brightness(.4); }
}

/* паук-король в ожидании раунда */
.crash-wait {
  position: absolute;
  left: 50%; top: 52%;
  transform: translate(-50%, -50%);
  z-index: 4;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s;
  pointer-events: none;
}
.crash-stage.waiting .crash-wait { opacity: 1; visibility: visible; }
.crash-wait .king-img {
  display: block;
  width: 272px; height: 272px;
  object-fit: contain;
  filter: drop-shadow(0 10px 30px rgba(124, 61, 255, .55));
  animation: king-idle 2.6s ease-in-out infinite;
}
/* висит на нити и чуть покачивается */
@keyframes king-idle {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-9px) rotate(3deg); }
}
.crash-wait::before {
  content: '';
  position: absolute;
  left: 50%; bottom: 100%;
  width: 1px; height: 44px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(181, 137, 255, .55));
}
/* во время отсчёта множитель всегда 1.00× — прячем его, чтобы не спорил с пауком,
   а подпись со стартом уводим под него */
.crash-stage.waiting .crash-mult { opacity: 0; transform: scale(.9); }
.crash-mult { transition: opacity .3s, transform .3s; }
.crash-stage.waiting .crash-center { transform: translateY(74px); }
.crash-center { transition: transform .35s var(--ease-out); }
.crash-stage.waiting .crash-status { font-size: 15px; color: var(--text); }

.crash-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  pointer-events: none;
  z-index: 2;
}
.crash-mult {
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -.03em;
  text-shadow: 0 6px 30px rgba(0,0,0,.6);
  transition: color .3s;
}
.crash-mult.warm { color: #ffd66b; }
.crash-mult.hot { color: #ff8c4b; text-shadow: 0 0 26px rgba(255,140,75,.6); }
.crash-mult.boom { color: #ff5670; animation: shake .45s; }
.crash-status { font-size: 13px; font-weight: 700; color: var(--text-dim); margin-top: 2px; }

/* minmax(0,1fr) обязателен: иначе неявная колонка растягивается под
   max-content инпутов с кнопками и вся страница едет вбок */
.crash-controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.crash-hcell {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: var(--r-xs);
  font-size: 12px;
  font-weight: 800;
  background: var(--surface-2);
}
.crash-hcell.red { color: #ff8195; }
/* от 1.50× — синим: видно, где раунд уже дал забрать с плюсом */
.crash-hcell.blue { color: #6fb2ff; background: rgba(77, 157, 255, .13); }
.crash-hcell.green { color: #6ee7a0; }
.crash-hcell.gold { color: #ffcf5c; background: rgba(255,201,60,.14); }

/* тумблер автовывода */
.auto-row { gap: 10px; }
.auto-row .auto-label { font-size: 13.5px; font-weight: 700; color: var(--text-mute); transition: color .2s; }
.auto-row.on .auto-label { color: var(--text); }
.auto-row .auto-x { font-size: 13px; color: var(--text-mute); padding-right: 12px; }
.auto-row input[type="number"]:disabled { color: var(--text-mute); }
.switch { display: inline-flex; flex: 0 0 auto; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  display: block;
  width: 42px; height: 24px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  box-shadow: inset 0 0 0 1px var(--stroke);
  transition: background .22s;
}
.switch-knob {
  display: block;
  width: 18px; height: 18px;
  margin: 3px;
  border-radius: 50%;
  background: var(--text-mute);
  transition: transform .22s var(--ease-spring), background .22s;
}
.switch input:checked + .switch-track { background: rgba(124, 61, 255, .45); }
.switch input:checked + .switch-track .switch-knob {
  transform: translateX(18px);
  background: var(--accent-soft);
}
.switch input:focus-visible + .switch-track { outline: 2px solid var(--accent-soft); outline-offset: 2px; }

/* --------------------------- ПЛИНКО --------------------------- */
.plinko-wrap { margin: 6px 0 14px; }
.plinko-board {
  position: relative;
  padding: 26px 10px 0;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #14141c, #0e0e14);
  border: 1px solid var(--stroke);
  overflow: hidden;
}
.plinko-chute {
  width: 34px; height: 22px;
  margin: 0 auto 8px;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, #4a4a5c, #23232e);
  box-shadow: inset 0 -4px 8px rgba(0,0,0,.45);
}
/* колышки и шарики рисует физика на canvas — так они всегда совпадают */
.plinko-canvas {
  display: block;
  width: 100%;
  height: 258px;
}

.plinko-slots {
  display: grid;
  grid-template-columns: repeat(var(--slots, 9), 1fr);
  gap: 3px;
  padding: 8px 0 10px;
}
.p-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 1px 5px;
  border-radius: 8px;
  background: var(--surface-2);
  transition: transform .2s var(--ease-spring), box-shadow .3s;
}
.p-slot-gift { width: 100%; aspect-ratio: 1; border-radius: 6px; overflow: hidden; display: grid; place-items: center; }
.p-slot-gift img { width: 100%; height: 100%; object-fit: cover; }
.p-slot-gift .fallback { font-size: 15px; }
.p-slot-mult { font-size: 11px; font-weight: 800; line-height: 1; }
.p-slot.hot  { background: linear-gradient(180deg, rgba(255,59,92,.35), rgba(255,59,92,.12)); }
.p-slot.hot .p-slot-mult { color: #ff8195; }
.p-slot.warm { background: linear-gradient(180deg, rgba(255,176,32,.28), rgba(255,176,32,.1)); }
.p-slot.warm .p-slot-mult { color: #ffcf5c; }
.p-slot.mid  { background: linear-gradient(180deg, rgba(69,214,127,.24), rgba(69,214,127,.08)); }
.p-slot.mid .p-slot-mult { color: #7ee8a8; }
.p-slot.cold .p-slot-mult { color: var(--text-mute); }
.p-slot.hit {
  transform: translateY(-6px) scale(1.06);
  box-shadow: 0 0 0 2px #fff, 0 10px 24px rgba(255,255,255,.22);
}

.plinko-bar { display: flex; align-items: center; gap: 10px; }
.plinko-hist {
  width: 46px; height: 46px;
  justify-content: center;
  border-radius: 16px;
  font-size: 18px;
  flex: 0 0 auto;
}