/* Ракетка (crash): вид #crash. Все селекторы — под #stage-crash или с префиксом crash-. */

#stage-crash { display: block; min-height: 0; margin-bottom: 0; padding: 0; border: 0; background: none; }
#stage-crash [hidden] { display: none !important; }

/* ----- раскладка: десктоп — сцена слева, панель и игроки справа ----- */
#stage-crash .crash-root {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 16px; align-items: start;
}
#stage-crash .crash-main,
#stage-crash .crash-side { min-width: 0; }

/* ----- сцена ----- */
#stage-crash .crash-scene {
  position: relative; height: 440px; overflow: hidden;
  border-radius: 12px; border: 1px solid var(--border); background: #0C0E10;
}
#stage-crash .crash-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#stage-crash .crash-tag {
  position: absolute; left: 14px; top: 12px; z-index: 2;
  font: 800 12px/1 var(--font-h); letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-2); padding: 7px 10px; border-radius: 6px; background: rgba(0, 0, 0, .35);
}
#stage-crash .crash-center {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  z-index: 2; text-align: center; pointer-events: none; padding: 0 12px;
}
#stage-crash .crash-count-txt { font: 800 clamp(22px, 3.6vw, 30px)/1.2 var(--font-h); font-variant-numeric: tabular-nums; }
#stage-crash .crash-bar {
  width: min(320px, 70%); height: 10px; margin: 14px auto 0;
  background: var(--raised); border-radius: 4px; overflow: hidden;
}
#stage-crash .crash-bar i { display: block; height: 100%; width: 0; background: var(--green); }
#stage-crash .crash-mult-pre { display: block; font: 800 clamp(15px, 2.4vw, 20px)/1.2 var(--font-h); color: var(--red-ink); }
#stage-crash .crash-mult-num {
  display: block; font: 900 clamp(52px, 10vw, 112px)/1 var(--font-h); color: #FFFFFF;
  font-variant-numeric: tabular-nums; text-shadow: 0 6px 0 rgba(0, 0, 0, .4);
}
#stage-crash .crash-mult.is-boom .crash-mult-num { color: var(--red); }
#stage-crash .crash-text { font: 800 clamp(20px, 3vw, 26px)/1.25 var(--font-h); color: var(--text-2); }

#stage-crash .crash-pilot { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; will-change: transform; }
#stage-crash .crash-pilot svg { width: 100%; height: 100%; display: block; }

#stage-crash .crash-boom { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
#stage-crash .crash-blk {
  position: absolute; animation: crashBlk .8s cubic-bezier(.2, .7, .3, 1) forwards;
}
#stage-crash .crash-flash {
  position: absolute; width: 140px; height: 140px; margin: -70px 0 0 -70px; border-radius: 0;
  background: radial-gradient(circle, #FFF3B0 0%, #F5C518 25%, #F74B4B 50%, transparent 70%);
  animation: crashFlash .5s ease-out forwards;
}
@keyframes crashBlk {
  from { transform: translate(0, 0) scale(1); opacity: 1; }
  to   { transform: translate(var(--dx), var(--dy)) scale(.2) rotate(90deg); opacity: 0; }
}
@keyframes crashFlash {
  from { transform: scale(.2); opacity: 1; }
  to   { transform: scale(1.6); opacity: 0; }
}

/* ----- история точек ----- */
#stage-crash .crash-hist {
  display: flex; gap: 6px; margin-top: 12px; padding-bottom: 2px;
  overflow-x: auto; scrollbar-width: none;
}
#stage-crash .crash-hist::-webkit-scrollbar { display: none; }
#stage-crash .crash-pill {
  flex: none; font: 800 13px/1 var(--font-h); font-variant-numeric: tabular-nums;
  padding: 7px 9px; border-radius: 6px; background: var(--surface);
  border: 1px solid var(--border); color: var(--text-2);
}
#stage-crash .crash-pill.is-low   { color: var(--red-ink); }
#stage-crash .crash-pill.is-green { color: var(--green-ink); }
#stage-crash .crash-pill.is-gold  { color: var(--gold); border-color: rgba(245, 197, 24, .45); }

/* ----- панель ставки ----- */
#stage-crash .crash-panel { margin-bottom: 16px; }
#stage-crash .crash-panel .stake-row { align-items: flex-end; }
#stage-crash .crash-panel .quick button { height: 44px; min-width: 48px; }
#stage-crash .crash-panel input { min-height: 44px; }
#stage-crash .crash-auto { margin-top: 14px; }
#stage-crash .crash-act { min-height: 48px; font-size: 17px; margin-top: 16px; }
#stage-crash .crash-act.crash-gold { background: var(--gold); color: #241A00; }
#stage-crash .crash-act.crash-gold:hover:not(:disabled) { background: #FFD35C; }
#stage-crash .crash-msg { font-size: 14px; margin-top: 12px; min-height: 1.4em; }
#stage-crash .crash-panel .err { margin-top: 12px; }

/* ----- игроки раунда ----- */
#stage-crash .crash-plcount { font-size: 14px; color: var(--text-2); margin-top: 3px; }
#stage-crash .crash-list {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 6px;
  max-height: 420px; overflow-y: auto;
}
#stage-crash .crash-pl {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 7px 9px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
}
#stage-crash .crash-pl.is-me { border-color: var(--blue); }
#stage-crash .crash-pl-av { display: block; width: 28px; height: 28px; border-radius: 6px; overflow: hidden; }
#stage-crash .crash-pl-av svg { width: 100%; height: 100%; display: block; }
#stage-crash .crash-pl-info { min-width: 0; display: grid; }
#stage-crash .crash-pl-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#stage-crash .crash-pl-bet { font-size: 13px; color: var(--text-3); }
#stage-crash .crash-pl-res { font: 800 14px/1.2 var(--font-h); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
#stage-crash .crash-pl-res.plus { color: var(--green-ink); }
#stage-crash .crash-pl-res.minus { color: var(--red-ink); }
#stage-crash .crash-pl-empty { font-size: 14px; padding: 8px 2px; list-style: none; }

/* ----- узкий экран: сцена сверху, потом панель, потом игроки ----- */
@media (max-width: 860px) {
  #stage-crash .crash-root { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #stage-crash .crash-scene { height: 240px; }
  #stage-crash .crash-mult-num { font-size: clamp(44px, 14vw, 64px); }
  #stage-crash .crash-list { max-height: none; }
}

@media (prefers-reduced-motion: reduce) {
  #stage-crash .crash-blk,
  #stage-crash .crash-flash { animation: none; display: none; }
}