* { margin: 0; padding: 0; box-sizing: border-box; }

[hidden] { display: none !important; }

/* Fluid root size so every rem-based clamp() below scales smoothly with
   viewport width instead of jumping at breakpoints. px+vw only (no rem)
   to avoid any ambiguity resolving rem against the root's own font-size. */
html { font-size: clamp(15px, 14px + 0.35vw, 19px); }

body {
  background: #000;
  color: #fff;
  font-family: system-ui, -apple-system, sans-serif;
  height: 100dvh;
  overflow: hidden;
}

#start-screen {
  min-height: 100dvh;
  height: 100dvh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.8rem, 4vw, 3rem);
  text-align: center;
  padding: clamp(2rem, 5vh, 4rem) clamp(1.2rem, 4vw, 3rem) clamp(2rem, 4vh, 3rem);
}

/* ---- Hero ---- */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.4rem, 1vw, 0.7rem);
  max-width: min(90vw, 40rem);
}

.hero .eyebrow {
  font-size: clamp(0.75rem, 1vw, 0.9rem);
  letter-spacing: 0.25rem;
  text-transform: uppercase;
  color: #e0312f;
  font-weight: 700;
}

.hero h1 {
  font-size: clamp(2.8rem, 3rem + 3vw, 5.5rem);
  letter-spacing: 0.3rem;
  line-height: 1;
  background: linear-gradient(120deg, #ff9d00, #e0312f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero .tagline {
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.5rem);
  color: #ddd;
  font-weight: 600;
  letter-spacing: 0.02rem;
}

.hero .explainer-quote {
  font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.2rem);
  color: #ddd;
  font-style: italic;
  line-height: 1.5;
  max-width: 36rem;
}
.hero .explainer-sub {
  font-size: clamp(0.8rem, 0.72rem + 0.3vw, 0.95rem);
  color: #888;
  line-height: 1.5;
  max-width: 32rem;
}

.section-heading {
  font-size: clamp(1.1rem, 0.95rem + 0.9vw, 1.6rem);
  font-weight: 700;
  letter-spacing: 0.06rem;
  color: #fff;
}
.section-subhead {
  font-size: clamp(0.8rem, 0.72rem + 0.3vw, 0.95rem);
  color: #888;
  margin-top: -0.6rem;
}

/* ---- Scene grid: the main event. Cinematic, streaming-style tiles that
   genuinely use the available width instead of capping out at a fixed
   pixel size - auto-fit/minmax handles 1 column on a phone up to 5+ on
   an ultrawide, with clamp() scaling the minimum tile size in between. */

.scene-section, .gallery-section {
  width: 100%;
  max-width: min(90vw, 160rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

#scene-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(16rem, 9rem + 15vw, 27rem), 1fr));
  gap: clamp(1.2rem, 2vw, 2rem);
  width: 100%;
}

.scene-card {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: clamp(10px, 1vw, 16px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.15);
  cursor: pointer;
  background: #111;
  padding: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.scene-card:hover, .scene-card:focus-visible {
  transform: scale(1.035);
  border-color: rgba(255, 157, 0, 0.6);
  box-shadow: 0 0.6rem 2.2rem rgba(224, 49, 47, 0.35);
}
.scene-card:active { transform: scale(0.98); }

.scene-card img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The action IS the card - always visible, not a hover-only reveal, so a
   visitor never has to wonder whether clicking does anything. */
.scene-play-icon {
  position: absolute;
  inset: 0;
  margin: auto;
  width: clamp(2.6rem, 3vw, 3.6rem);
  height: clamp(2.6rem, 3vw, 3.6rem);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.85);
  opacity: 0.9;
  transform: scale(0.92);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.scene-play-icon::before {
  content: "";
  position: absolute;
  top: 50%; left: 54%;
  width: 0; height: 0;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 0.5rem 0 0.5rem 0.85rem;
  border-color: transparent transparent transparent #fff;
}
.scene-card:hover .scene-play-icon,
.scene-card:focus-visible .scene-play-icon,
.scene-card:active .scene-play-icon {
  opacity: 1;
  transform: scale(1);
}
.scene-start-badge {
  position: absolute;
  top: clamp(0.5rem, 1vw, 0.8rem);
  right: clamp(0.5rem, 1vw, 0.8rem);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(224, 49, 47, 0.85);
  color: #fff;
  font-size: clamp(0.65rem, 0.6vw + 0.5rem, 0.78rem);
  font-weight: 700;
  letter-spacing: 0.04rem;
}

.scene-card-unavailable {
  cursor: default;
  filter: grayscale(0.85);
  opacity: 0.55;
}
.scene-card-unavailable:hover, .scene-card-unavailable:focus-visible {
  transform: none;
  border-color: rgba(255,255,255,0.15);
  box-shadow: none;
}
.scene-card-unavailable .scene-play-icon { display: none; }
.scene-start-badge-disabled {
  background: rgba(60, 60, 60, 0.85);
}

.scene-info {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(0.7rem, 1.4vw, 1.1rem) clamp(0.8rem, 1.6vw, 1.2rem);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: linear-gradient(transparent, rgba(0,0,0,0.9) 65%);
  text-align: left;
  pointer-events: none;
}
.scene-info .scene-label {
  color: #fff;
  font-weight: 700;
  font-size: clamp(0.95rem, 0.8rem + 0.5vw, 1.25rem);
  letter-spacing: 0.02rem;
}
.scene-info .scene-movie {
  color: #aaa;
  font-size: clamp(0.75rem, 0.6vw + 0.55rem, 0.9rem);
  font-style: italic;
}

/* ---- Gallery: free, view-only replays of past runs. Visually similar to
   the scene grid (same cinematic tile language) but a badge marks it as
   "watch" rather than "start", and cards are noticeably smaller since
   this is secondary to the primary START YOUR MOVIE action above it. ---- */

#gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(12rem, 7rem + 12vw, 20rem), 1fr));
  gap: clamp(1rem, 1.6vw, 1.6rem);
  width: 100%;
}
#gallery-grid:empty::after {
  content: "No runs to watch yet - be the first.";
  color: #666;
  font-size: 0.85rem;
  grid-column: 1 / -1;
}
.gallery-card {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: clamp(8px, 0.8vw, 12px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  cursor: pointer;
  background: #111;
  padding: 0;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.gallery-card:hover, .gallery-card:focus-visible { transform: scale(1.03); border-color: rgba(255,157,0,0.5); }
.gallery-card img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.85; }
.gallery-watch-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: rgba(20,20,20,0.75);
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03rem;
}
.gallery-card-info {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0.6rem 0.7rem;
  background: linear-gradient(transparent, rgba(0,0,0,0.9) 65%);
  text-align: left;
  pointer-events: none;
}
.gallery-card-info .gallery-card-movie {
  color: #fff;
  font-weight: 700;
  font-size: 0.82rem;
}
#gallery-view-all {
  background: none;
  border: 1px solid #3a3a3a;
  color: #999;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  cursor: pointer;
}
#gallery-view-all:hover { color: #fff; border-color: #666; }

/* ---- Gallery replay mode inside the player ---- */

#gallery-badge {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 10;
  padding: 0.3rem 0.7rem;
  background: rgba(20,20,20,0.6);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06rem;
  color: rgba(255,255,255,0.7);
  pointer-events: none;
}
#gallery-end-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: rgba(0,0,0,0.9);
  text-align: center;
  padding: 1.5rem;
}
.gallery-end-heading {
  font-size: clamp(1.3rem, 1rem + 1.5vw, 2rem);
  font-weight: 700;
  background: linear-gradient(120deg, #ff9d00, #e0312f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gallery-end-sub { color: #999; font-size: 0.9rem; }
#gallery-start-own-button {
  font-size: 1.05rem;
  padding: 0.8rem 1.8rem;
  background: #e0312f;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
}

/* ---- Secondary utility area: deliberately quiet, never competes with
   the scene grid above it. ---- */

.secondary-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  opacity: 0.75;
}

.utility-row {
  display: flex;
  gap: 0.6rem;
}

#config-toggle, #history-toggle {
  background: none;
  border: 1px solid #3a3a3a;
  color: #777;
  font-size: 0.78rem;
  padding: 0.35rem 0.9rem;
  border-radius: 6px;
  cursor: pointer;
}

#config-panel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: #ccc;
  font-size: 0.85rem;
}
#config-panel label { display: flex; justify-content: space-between; gap: 1rem; width: 20rem; max-width: 80vw; }
#config-panel input { width: 5rem; background: #222; color: #fff; border: 1px solid #555; border-radius: 4px; padding: 0.2rem; }

#history-panel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: min(90vw, 30rem);
}
.history-note { font-size: 0.75rem; color: #777; }
#history-list { display: flex; flex-direction: column; gap: 0.4rem; max-height: 12rem; overflow-y: auto; }
.history-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: #161616;
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  text-align: left;
  font-size: 0.75rem;
  color: #bbb;
}
.history-item img { width: 3.2rem; height: 1.8rem; object-fit: cover; border-radius: 4px; background: #000; }
.history-item .history-meta { display: flex; flex-direction: column; gap: 0.1rem; }
.history-item .history-status { text-transform: uppercase; font-size: 0.65rem; color: #e0312f; }

/* ---- Footer credit: subtle, secondary ---- */

.site-footer { opacity: 0.55; }
.site-footer a {
  color: #999;
  font-size: 0.78rem;
  text-decoration: none;
}
.site-footer a:hover { color: #ccc; text-decoration: underline; }

#player { position: fixed; inset: 0; background: #000; }

.player-actions {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 10;
  display: flex;
  gap: 0.5rem;
}

#home-button, #pause-button, #stop-button {
  background: rgba(20,20,20,0.75);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 6px;
  padding: 0.4rem 0.9rem;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.05rem;
  cursor: pointer;
}
#stop-button:active { background: #e0312f; }
#pause-button:active { background: #444; }
#home-button:active { background: #444; }

#live-indicator {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  background: rgba(20,20,20,0.6);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08rem;
  color: rgba(255,255,255,0.75);
  pointer-events: none;
}
.live-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #e0312f;
  animation: live-pulse 1.6s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Testing-info toggle: tiny, tucked under the live-indicator, well clear
   of the top-center timeline strip. Off by default - this is a debug
   aid, not part of the experience. */
#hud-toggle {
  position: absolute;
  top: 2.6rem;
  left: 0.6rem;
  z-index: 10;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: rgba(20,20,20,0.55);
  color: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.25);
  font-size: 0.75rem;
  font-style: italic;
  font-family: Georgia, serif;
  cursor: pointer;
  line-height: 1;
}
#hud-toggle:hover, #hud-toggle.active { color: #fff; border-color: rgba(255,255,255,0.5); }

/* ---- Persistent timeline strip: restrained by design - small nodes,
   no labels shown inline (label is a title/hover tooltip), never blocks
   the video. Sits centered at the very top, between the two corner
   controls. ---- */

#timeline-strip {
  position: absolute;
  top: 0.6rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  max-width: min(78vw, 64rem);
  overflow-x: auto;
  padding: 0.3rem;
  pointer-events: none;
}
/* On phone there isn't enough width for a centered strip and the
   right-aligned Home/Pause/Stop row to share the same top line without
   overlapping - the strip was drifting under the buttons regardless of
   its own size. Drop it below the button row instead of relying on
   horizontal room that doesn't exist. */
@media (max-width: 699px) {
  #timeline-strip { top: 3.2rem; }
}
#timeline-strip:empty { display: none; }
/* Deliberately readable at a glance - big enough to see what happened
   without hovering, clicking, or opening Pause. Not interactive. Two
   thumbnails per node (early + continuation frame) read as a side-by-side
   before/after pair.
   Sizing note: previous attempts scaled phone size off viewport width
   (vw), which is exactly why it kept landing wrong each round - vw gives
   no direct control over whether the rendered image is actually legible.
   Fixed on phone instead: 9.3rem (~149px) per thumbnail is a size chosen
   to keep recognisable detail in a 16:9 frame, independent of the exact
   phone model. Wider screens still scale with vw since there's real
   spare width to use there, up to roughly a homepage seed card's size. */
.timeline-node {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  width: 18.8rem;
}
@media (min-width: 700px) {
  .timeline-node { width: clamp(28rem, 12rem + 26vw, 50rem); }
}
.timeline-node-thumbs { display: flex; flex-direction: row; gap: 0.2rem; width: 100%; }
.timeline-node-thumb {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 16 / 9;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.35);
  opacity: 0.85;
  background: rgba(255,255,255,0.06);
}
.timeline-node-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.timeline-node.current .timeline-node-thumb { border-color: #e0312f; opacity: 1; }
.timeline-node-label {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.85);
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Pause: freezes playback/fuse and expands the strip into a full
   recap. Simple by design - history only, no branching navigation. ---- */

#pause-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(224,49,47,0.16), transparent 55%),
    radial-gradient(ellipse at 75% 80%, rgba(255,157,0,0.13), transparent 55%),
    rgba(0,0,0,0.88);
  background-size: 200% 200%, 200% 200%, 100% 100%;
  animation: pause-glow-drift 12s ease-in-out infinite;
}
@keyframes pause-glow-drift {
  0%, 100% { background-position: 0% 0%, 100% 100%, 0 0; }
  50% { background-position: 30% 20%, 70% 80%, 0 0; }
}
#pause-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  max-width: min(90vw, 60rem);
}
.pause-heading {
  font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  font-weight: 700;
  background: linear-gradient(120deg, #ff9d00, #e0312f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 0.08rem;
}
#pause-timeline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  max-height: 55vh;
  overflow-y: auto;
  padding: 0.5rem;
}
.pause-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 15rem;
}
.pause-node-thumbs { display: flex; gap: 0.3rem; width: 100%; }
.pause-node-thumbs .timeline-node-thumb {
  border-radius: 6px;
  border-color: rgba(255,255,255,0.3);
}
.pause-node .pause-node-label {
  font-size: 0.78rem;
  color: #ccc;
  text-align: center;
  line-height: 1.3;
}
.pause-node.current .timeline-node-thumb {
  border-color: #e0312f;
  animation: pause-current-glow 2s ease-in-out infinite;
}
@keyframes pause-current-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(224,49,47,0); }
  50% { box-shadow: 0 0 0.9rem rgba(224,49,47,0.55); }
}
.pause-node-arrow {
  align-self: center;
  color: rgba(255,255,255,0.35);
  font-size: 1.2rem;
}
.pause-actions {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  justify-content: center;
}
.pause-actions button {
  font-size: 0.9rem;
  padding: 0.7rem 1.4rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
}
#resume-button { background: #e0312f; color: #fff; border: none; }
#restart-movie-button, #choose-another-button {
  background: none;
  color: #ccc;
  border: 1px solid rgba(255,255,255,0.4);
}

#stopped-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: rgba(0,0,0,0.85);
}

.stopped-reinforcement {
  font-size: 0.85rem;
  color: #999;
  max-width: 22rem;
  text-align: center;
}

#player video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#choice-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: env(safe-area-inset-bottom, 0);
  padding: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  background: linear-gradient(transparent, rgba(0,0,0,0.75) 40%);
}

#fuse-track {
  position: relative;
  height: 10px;
  border-radius: 5px;
  background: rgba(255,255,255,0.15);
  overflow: visible;
}

#fuse-burn {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, #ff9d00, #ff3c00);
  transform-origin: left center;
}

#fuse-spark {
  position: absolute;
  top: 50%;
  width: 26px;
  height: 26px;
  margin-left: -13px;
  margin-top: -13px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #ffd34d 35%, #ff5d00 70%, transparent 75%);
  filter: drop-shadow(0 0 10px #ff9d00);
  animation: sparkle 0.12s infinite alternate;
}

@keyframes sparkle {
  from { transform: scale(0.85) rotate(0deg); }
  to { transform: scale(1.25) rotate(18deg); }
}

.choice-heading {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  text-align: center;
}

#choice-buttons { display: flex; gap: 0.6rem; }

.choice-button {
  flex: 1;
  min-height: 3.6rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05rem;
  color: #fff;
  background: rgba(20, 20, 20, 0.85);
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 10px;
  cursor: pointer;
  padding: 0.4rem;
}
.choice-button:active { background: #e0312f; }
.choice-button.chosen { background: #e0312f; border-color: #fff; }

#hold-indicator {
  position: absolute;
  left: 50%;
  bottom: clamp(1.2rem, 4vh, 2.4rem);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  text-align: center;
  max-width: min(90vw, 32rem);
}
#hold-choice {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.03rem;
  color: #fff;
}
#hold-hype {
  font-size: 0.95rem;
  color: #ffd48a;
  font-style: italic;
}
#hold-hype:empty { display: none; }

/* Indeterminate (we don't know completion time, unlike the fuse) but
   same warm palette as the fuse burn, so waiting for the next scene reads
   as part of the same visual language rather than a dead frozen screen. */
#gen-track {
  position: relative;
  width: 12rem;
  max-width: 60vw;
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.15);
  overflow: hidden;
}
#gen-sweep {
  position: absolute;
  top: 0; bottom: 0;
  width: 45%;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, #ff9d00, #ff3c00, transparent);
  animation: gen-sweep-move 1.5s ease-in-out infinite;
  filter: drop-shadow(0 0 6px #ff9d00);
}
@keyframes gen-sweep-move {
  0% { left: -45%; }
  100% { left: 100%; }
}

#hold-headline {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05rem;
  color: #fff;
  text-transform: uppercase;
  animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse { 50% { opacity: 0.4; } }

#error-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: rgba(0,0,0,0.85);
  text-align: center;
  padding: 1rem;
}

#restart-button, #new-run-button {
  font-size: 1.1rem;
  padding: 0.8rem 2rem;
  background: #e0312f;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

#hud {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  font-size: 0.66rem;
  line-height: 1.35;
  color: rgba(255,255,255,0.8);
  font-family: monospace;
  white-space: pre;
  pointer-events: none;
  background: rgba(0,0,0,0.55);
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  max-width: 80vw;
  max-height: 90vh;
  overflow-y: auto;
}