/* chrome-dynos web — self-contained styling. No external fonts or CDNs.
   Restrained palette: warm paper background, ink foreground, a single amber
   accent, plus metal tones for the podium. Real type scale via a modular
   ratio; system font stack so nothing is fetched. */

:root {
  /* palette */
  --paper: #f4f1ea;
  --paper-2: #ece7dc;
  --ink: #1c1a17;
  --ink-soft: #55504a;
  --ink-faint: #8b857c;
  --line: #d9d2c5;
  --accent: #c8791b;
  --accent-ink: #7a4708;
  --you: #2f6f4f;
  --you-wash: #e2efe7;
  --gold: #d8a531;
  --gold-deep: #a97c14;
  --silver: #a9adb5;
  --silver-deep: #7d818a;
  --bronze: #b07444;
  --bronze-deep: #8a5730;
  --danger: #b23a2e;

  /* type scale (1.25 ratio, 16px base) */
  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-md: 1.25rem;
  --t-lg: 1.563rem;
  --t-xl: 1.953rem;
  --t-2xl: 2.441rem;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 8px 30px rgba(28, 26, 23, 0.18);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(1200px 800px at 50% -10%, var(--paper) 0%, var(--paper-2) 100%);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

/* ---- stage / canvas ---- */
/* The game fills all available screen space: the stage is the whole viewport
   and the canvas wrapper covers it edge to edge. The Bevy camera's AutoMin
   scaling adapts the view to whatever aspect ratio the viewport has. */
.stage {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
}

.canvas-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff;
  overflow: hidden;
}

#dynos-canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
  /* Keyboard-only game: hide the pointer over the canvas (i.e. during play).
     Overlays sit on top with their own default cursor, so the mouse reappears
     on the boot / game-over screens where there are buttons to click. */
  cursor: none;
}

/* ---- overlays ---- */
.overlay {
  position: absolute;
  inset: 0;
  background: rgba(28, 26, 23, 0.32);
  backdrop-filter: blur(3px);
  z-index: 10;
}
.overlay--center {
  display: grid;
  place-items: center;
}
.overlay--scroll {
  display: block;
  overflow-y: auto;
  padding: clamp(0.75rem, 3vw, 2rem);
}
/* The `.overlay--*` modifiers set `display`, which (author origin) would
   override the UA `[hidden] { display: none }` rule and leave the overlay
   permanently visible. This higher-specificity rule lets `hidden` win, so
   hiding an overlay (boot / game-over) actually hides it. */
.overlay[hidden] {
  display: none;
}

/* ---- boot card ---- */
.boot-card {
  text-align: center;
  color: var(--paper);
  padding: 2rem;
}
.boot-title {
  margin: 0;
  font-size: var(--t-2xl);
  letter-spacing: -0.02em;
  font-weight: 800;
}
.boot-sub {
  margin: 0.25rem 0 1.25rem;
  color: rgba(244, 241, 234, 0.75);
  font-size: var(--t-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.boot-status {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--t-sm);
  color: rgba(244, 241, 234, 0.9);
}

/* ---- game-over card ---- */
.over-card {
  max-width: 720px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(1.25rem, 3vw, 2rem);
}

.over-head {
  margin: 0;
  font-size: var(--t-xl);
  letter-spacing: -0.01em;
}
.over-score {
  margin: 0.25rem 0 1.25rem;
  color: var(--ink-soft);
  font-size: var(--t-md);
}
.over-score strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ---- name form ---- */
.name-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.name-label {
  font-size: var(--t-sm);
  color: var(--ink-soft);
}
.name-input {
  font-family: var(--mono);
  font-size: var(--t-md);
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.name-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.name-form {
  margin-bottom: 1.5rem;
}
.submit-error {
  margin: 0.25rem 0 0;
  color: var(--danger);
  font-size: var(--t-sm);
}
.submit-error[hidden] {
  display: none;
}

/* ---- buttons ---- */
.btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0.6rem 1.1rem;
  font-size: var(--t-base);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition:
    transform 0.05s ease,
    background 0.15s ease;
}
.btn:active {
  transform: translateY(1px);
}
.btn--primary {
  background: var(--accent);
  color: #fff;
}
.btn--primary:hover {
  background: var(--accent-ink);
}
.btn--primary:disabled {
  opacity: 0.55;
  cursor: default;
}
.btn--ghost {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--line);
}
.btn--ghost:hover {
  background: var(--paper-2);
}

/* ---- results ---- */
.results-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.placement {
  margin: 0 0 1rem;
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--you);
}
.placement[hidden] {
  display: none;
}

/* Your-run panel: sits below the leaderboard, set off by a divider. */
.you-panel {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

/* little keycap in the "Play again ⎵Space" button */
.kbd {
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 700;
  padding: 0.05rem 0.35rem;
  margin-left: 0.35rem;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

/* ---- podium ---- */
.podium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: clamp(0.5rem, 2vw, 1rem);
  margin-bottom: 1.5rem;
}
.podium-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.podium-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  margin-bottom: 0.5rem;
  text-align: center;
}
.podium-medal {
  font-size: var(--t-xl);
  line-height: 1;
}
.podium-name {
  font-family: var(--mono);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.podium-score {
  font-variant-numeric: tabular-nums;
  font-size: var(--t-sm);
  color: var(--ink-soft);
}
.podium-block {
  width: 100%;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 800;
  font-size: var(--t-lg);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.25);
}
.podium-rank {
  font-variant-numeric: tabular-nums;
}
.podium-slot--gold .podium-block {
  height: 128px;
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
}
.podium-slot--silver .podium-block {
  height: 92px;
  background: linear-gradient(180deg, var(--silver), var(--silver-deep));
}
.podium-slot--bronze .podium-block {
  height: 68px;
  background: linear-gradient(180deg, var(--bronze), var(--bronze-deep));
}
.podium-slot--empty .podium-block {
  height: 44px;
  background: var(--paper-2);
  box-shadow: none;
}
.podium-slot.is-you .podium-figure .podium-name {
  color: var(--you);
}
.podium-slot.is-you .podium-block {
  outline: 2px solid var(--you);
  outline-offset: -2px;
}

/* ---- ranked list ---- */
.rank-list {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #fff;
}
.rank-row {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.85rem;
  border-top: 1px solid var(--line);
  font-size: var(--t-sm);
}
.rank-row:first-child {
  border-top: none;
}
.rank-row.is-you {
  background: var(--you-wash);
  font-weight: 700;
}
.rank-num {
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
}
.rank-row.is-you .rank-num {
  color: var(--you);
}
.rank-name {
  font-family: var(--mono);
  letter-spacing: 0.03em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rank-score {
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}
.rank-gap {
  text-align: center;
  color: var(--ink-faint);
  padding: 0.15rem 0;
  border-top: 1px solid var(--line);
  letter-spacing: 0.2em;
}

/* ---- watch link ---- */
.watch-link {
  font-size: var(--t-xs);
  color: var(--accent-ink);
  text-decoration: none;
  white-space: nowrap;
  font-weight: 600;
}
.watch-link:hover {
  text-decoration: underline;
}
.podium-figure .watch-link {
  margin-top: 0.15rem;
}

/* Full-width action row: Submit / Play again / Cancel share the width at a
   2 : 2 : 1 ratio, with the two primary actions bigger. */
.results-actions {
  display: flex;
  gap: 0.75rem;
}
.results-actions .btn {
  flex: 2 1 0; /* Submit + Play again */
  min-width: 0;
  padding: 0.85rem 1rem;
  font-size: var(--t-md);
  text-align: center;
}
.results-actions .btn--ghost {
  flex-grow: 1; /* Cancel */
}

/* ---- autoplay badge ---- */
.auto-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 20;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  box-shadow: var(--shadow);
}

/* ---- replay badge / controls (shared by replay.html) ---- */
.replay-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 20;
  background: var(--accent);
  color: #fff;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  box-shadow: var(--shadow);
}
.replay-controls {
  position: absolute;
  bottom: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  gap: 0.5rem;
}

@media (max-width: 520px) {
  .rank-row {
    grid-template-columns: 2.5rem 1fr auto;
  }
  .rank-row .watch-link {
    grid-column: 2 / -1;
    text-align: right;
  }
}