/* styles.css is what the crash page adds to the shared theme
   (web/sdk/theme.css, docs/design/ui.md): the curve's stage with the phase
   banner and the big multiplier, the auto cash-out field, the Cash out
   button and the round's bet list. The header, the bet panel, the toast,
   the history and the layout are the theme's; colours, durations and radii
   are its tokens. The canvas paints in the same tokens (app.js inkFrom). */

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-16);
  line-height: var(--lh);
}

h1,
h2 {
  margin: 0;
}

.side h2 {
  font-size: var(--fs-14);
  color: var(--muted);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.app > header .balance {
  margin-left: auto;
}

/* ---- curve ------------------------------------------------------------ */

.board {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.curve-stage {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.curve-canvas {
  display: block;
  width: 100%;
  height: auto;
}

.banner {
  position: absolute;
  top: var(--space-3);
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-size: var(--fs-14);
  color: var(--muted);
}

.big {
  position: absolute;
  top: 38%;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-size: var(--fs-32);
  font-weight: 700;
  pointer-events: none;
}

.curve-stage[data-phase="running"] .big {
  color: var(--accent);
}

.curve-stage[data-phase="crashed"] .big,
.curve-stage[data-phase="crashed"] .banner {
  color: var(--lose);
}

/* The crash flash: one red pulse of the stage's border. app.js does not add
   the class under prefers-reduced-motion, and the rule below is the second
   guard. */
.curve-stage.flash {
  animation: crash-flash var(--dur-slow) var(--ease) 1;
}

@keyframes crash-flash {
  0% {
    border-color: var(--lose);
    box-shadow: 0 0 0 4px var(--lose);
  }
  100% {
    border-color: var(--line);
    box-shadow: var(--shadow);
  }
}

@media (prefers-reduced-motion: reduce) {
  .curve-stage.flash {
    animation: none;
  }
}

.link {
  margin: 0;
  font-size: var(--fs-12);
  font-family: var(--font-mono);
  overflow-wrap: anywhere;
}

/* ---- side ------------------------------------------------------------- */

.choice {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.cashout {
  width: 100%;
  margin: var(--space-3) 0;
  font-size: var(--fs-20);
}

.bets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
  font-size: var(--fs-14);
}

.bets .own {
  color: var(--accent);
  font-weight: 600;
}

@media (max-width: 767px) {
  .big {
    font-size: var(--fs-24);
  }
}