/* ==========================================================================
   STACK — Anti-Gravity Crash UI
   Inherits tokens from style.css. No raw hex values here — only CSS vars
   and their rgba() derivatives for alpha steps.
   ========================================================================== */

/* ─────────────────────────── History chips ──────────────────────────────── */

.history {
  display: flex; gap: 6px; padding: 2px 0 14px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.history::-webkit-scrollbar { display: none; }

.history__item {
  flex: 0 0 auto; padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--surface);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--ink-dim);
  font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px var(--line);
  animation: agFloat 4s ease-in-out infinite;
  /* stagger each chip */
  transition: box-shadow .16s var(--ease);
}
.history__item:nth-child(even) { animation-delay: .5s; }
.history__item--high {
  color: var(--cta);
  box-shadow: inset 0 0 0 1px rgba(0, 231, 1, .40), 0 0 14px rgba(0, 231, 1, .15);
}
.history__item--low {
  color: var(--alert);
  box-shadow: inset 0 0 0 1px rgba(255, 42, 109, .40), 0 0 10px rgba(255, 42, 109, .10);
}

/* ─────────────────────────── Stage (main graph) ─────────────────────────── */

.stage {
  position: relative; flex: 1 1 auto; min-height: 220px;
  border-radius: var(--r-lg); overflow: hidden;
  background: #0F212E;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  /* 3D tilt driven by JS on the crash page */
  --tilt-x: 0deg; --tilt-y: 0deg;
  transform: perspective(800px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateZ(0);
  transition: transform .08s linear;
}

.stage__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.stage__readout {
  position: absolute; inset: 0; z-index: 2;
  display: grid; align-content: center; justify-items: center; gap: 3px;
  text-align: center; pointer-events: none;
}

/* ── Multiplier: green going up, red on bust (Stake Crash colors) ── */
.stage__mult {
  margin: 0;
  font-size: clamp(48px, 14vw, 72px); font-weight: 800; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--cta);
  transition: color .2s var(--ease);
}
.stage--bust .stage__mult {
  color: var(--alert);
  animation: bustPulse .6s var(--ease) infinite alternate;
}
@keyframes bustPulse {
  from { opacity: 1; }
  to   { opacity: .70; }
}

/* Kinetic roll: apply via JS when text content changes */
.stage__mult.kinetic { animation: numberRoll .18s var(--ease) both; }

.stage__state {
  margin: 0; font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-dim);
}

/* ── Bust overlay ── */
.stage__bust {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: grid; justify-items: center; gap: 1px; padding-top: 12px;
  animation: bustIn .22s var(--ease) both;
}
.stage__bust-label {
  font-size: 11px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--alert);
}
.stage__bust-value {
  font-size: 22px; font-weight: 800; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
@keyframes bustIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ── Bust: stage flashes Stake red ── */
@keyframes stageFlash {
  0%   { background: rgba(233, 17, 60, .08); }
  100% { background: #0F212E; }
}
.stage--bust { animation: stageFlash 1.4s var(--ease) forwards; }

/* ─────────────────────── Bet controls (Stake solid card) ────────────────── */

.betcard {
  padding: 16px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.betrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.betrow__label {
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-muted);
}
.betrow__controls { display: flex; align-items: center; gap: 6px; }

.betstep {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 18px; font-weight: 700;
  border: 1px solid var(--border);
  transition: background-color .1s var(--ease), transform .1s var(--ease);
}
.betstep:active { background: var(--border); transform: scale(.96); }
.betstep:hover  { background: var(--border); }
.betstep--wide {
  width: auto; padding: 0 12px; height: 40px;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim);
}

.betinput {
  width: 106px; padding: 10px 12px; text-align: center;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
  transition: border-color .14s var(--ease);
}
.betinput:focus { outline: none; border-color: var(--cta); }
.betinput--auto { width: 92px; }
.betinput::placeholder { color: var(--ink-muted); font-weight: 500; }

.betrow--auto { margin-top: 12px; }

.betquick { display: flex; gap: 6px; margin-top: 10px; }
.betquick__btn {
  flex: 1 1 0; padding: 10px 0; border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--ink-dim);
  font-size: 12px; font-weight: 600;
  border: 1px solid var(--border);
  transition: background-color .1s var(--ease), color .1s var(--ease);
}
.betquick__btn:active { background: var(--border); }
.betquick__btn:hover  { background: var(--border); color: var(--ink); }

.betcard__hint { margin: 10px 0 0; font-size: 12px; font-weight: 500; color: var(--ink-dim); }

/* ──────────────────────── Play buttons ──────────────────────────────────── */

.plays { display: grid; gap: 8px; margin-top: 12px; }

.play {
  display: grid; justify-items: center; gap: 2px;
  width: 100%; min-height: 58px;
  padding: 10px 16px; border-radius: var(--r-md);
  font-weight: 700;
  position: relative; overflow: hidden;
  transition: transform .1s var(--ease), opacity .14s var(--ease);
}
/* Ripple on play buttons */
.play::after {
  content: '';
  position: absolute; inset: 0; margin: auto;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .25);
  transform: scale(0); opacity: 0;
  pointer-events: none;
}
.play--ripple::after { animation: ripple .55s var(--ease) forwards; }
.play:active { transform: scale(.95); }
.play[disabled] { opacity: .45; pointer-events: none; }
.play__text { font-size: 17px; }
.play__sub  { font-size: 12px; font-weight: 700; opacity: .85; font-variant-numeric: tabular-nums; }

/* ── Bet: neon green floating pill ── */
.play--bet, .play--cash {
  background: var(--cta); color: var(--ink-cta);
  box-shadow:
    0 0 28px rgba(0, 231, 1, .40),
    0 10px 30px rgba(0, 231, 1, .20);
}
.play--bet:hover:not(:active), .play--cash:hover:not(:active) {
  box-shadow:
    0 0 44px rgba(0, 231, 1, .65),
    0 14px 36px rgba(0, 231, 1, .30);
}
/* ── Cash out: brighter, more urgent glow ── */
.play--cash {
  box-shadow:
    0 0 36px rgba(0, 231, 1, .55),
    0 10px 34px rgba(0, 231, 1, .32);
}

.play--queued {
  background: var(--veil);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--border-cyan), 0 0 18px rgba(0, 217, 255, .12);
}
.play--lost {
  background: var(--veil); color: var(--ink-dim);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* ──────────────────────── Win: floating particles overlay ───────────────── */

/* Particles inserted by JS on win. Each floats upward with trailing glow. */
.win-particle {
  position: fixed;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cta);
  box-shadow: 0 0 8px 2px rgba(0, 231, 1, .60);
  pointer-events: none;
  z-index: 100;
  animation: winFloat 2.2s ease-out forwards;
}
@keyframes winFloat {
  0%   { transform: translateY(0)   scale(1);    opacity: 1; }
  60%  { transform: translateY(-120px) scale(.8); opacity: .8; }
  100% { transform: translateY(-220px) scale(.3); opacity: 0; }
}

/* ─────────────────────────── Fairness line ──────────────────────────────── */

.fineprint#fairness {
  margin: 8px 0 0;
  font-size: 11px; color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  text-align: center;
}

/* ─────────────────────── Short viewports ────────────────────────────────── */

@media (max-height: 720px) {
  .stage { min-height: 160px; }
  .stage__mult { font-size: clamp(36px, 11vw, 50px); }
  .betcard { padding: 12px; }
  .play { min-height: 56px; }
}

/* ─────────────────────── Desktop 2-Column Layout ────────────────────────── */

/* Tablet (640px - 1023px) - Stacked but with more space */
@media (min-width: 640px) and (max-width: 1023px) {
  .crash-layout { 
    display: flex; 
    flex-direction: column-reverse; 
    gap: 16px; 
  }
  .stage { min-height: 320px; }
  .betcard { padding: 20px; }
}

/* Desktop (≥1024px) - 2-column layout */
@media (min-width: 1024px) {
  .crash-layout {
    display: flex; gap: 20px;
    align-items: stretch;
  }
  .crash-layout__sidebar {
    flex: 0 0 320px;
    display: flex; flex-direction: column; gap: 14px;
  }
  .crash-layout__main {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
  }
  .stage { min-height: 480px; height: 100%; flex: 1; }
  .betcard { flex: 1; }
}

/* Mobile (≤639px) - Stacked, stage on top */
@media (max-width: 639px) {
  .crash-layout { 
    display: flex; 
    flex-direction: column-reverse; 
    gap: 12px; 
  }
  .stage { min-height: 280px; }
  .betcard { padding: 14px; }
  .plays { gap: 6px; }
  .play { min-height: 52px; }
}

/* ─────────────────────── Reduced motion ─────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .stage__bust  { animation: none; }
  .stage        { animation: none; transform: none !important; }
  .betcard      { animation: none; }
  .play         { animation: none; }
  .history__item { animation: none; }
  .win-particle { animation: none; }
}