/* ============================================================
   The Glitching Tower — base styles
   Adopts the Void & Sigil design tokens from the Wizards Tower
   design system (vendored inline so no external CDN is required
   beyond the Google Fonts import below).
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  color-scheme: dark;

  /* Void (backgrounds, surfaces) */
  --void-1000: #07061a;
  --void-900:  #0d0a26;
  --void-800:  #14102e;
  --void-700:  #1f1742;
  --void-600:  #2b1f5c;

  /* Arcane (primary) */
  --arcane-300: #c4b5fd;
  --arcane-400: #a78bfa;
  --arcane-500: #8b5cf6;
  --arcane-600: #7c3aed;
  --arcane-700: #6d28d9;

  /* Aether (secondary) */
  --aether-300: #67e8f9;
  --aether-400: #22d3ee;
  --aether-500: #06b6d4;

  /* Ember (gold accent) */
  --ember-400: #fcd34d;
  --ember-500: #fbbf24;

  /* Bloom (magenta accent) */
  --bloom-400: #f472b6;
  --bloom-500: #ec4899;

  --fg-1: #f5f3ff;
  --fg-2: #d6d1f0;
  --fg-3: #948cc4;
  --fg-4: #5a47a8;

  --hair-1: 1px solid rgba(167, 139, 250, 0.25);
  --hair-2: 1px solid rgba(167, 139, 250, 0.45);
  --hair-strong: 1px solid rgba(252, 211, 77, 0.6);

  --glow-arcane: 0 0 12px rgba(167, 139, 250, 0.55), 0 0 32px rgba(124, 58, 237, 0.35);
  --glow-aether: 0 0 12px rgba(34, 211, 238, 0.55), 0 0 32px rgba(8, 145, 178, 0.35);
  --glow-ember:  0 0 10px rgba(251, 191, 36, 0.55), 0 0 28px rgba(217, 119, 6, 0.35);

  --etch-soft:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 0 1px rgba(167, 139, 250, 0.15),
    0 1px 0 rgba(0, 0, 0, 0.5);

  --font-display: "Cinzel", "Trajan Pro", Georgia, serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ls-display: 0.08em;
  --ls-eyebrow: 0.24em;

  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

  --ease-snap: cubic-bezier(0.2, 0.9, 0.25, 1.2);
  --ease-out:  cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-1: 90ms; --dur-2: 180ms; --dur-3: 320ms;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--void-900);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

body:has(#app) { overflow: hidden; }

#app {
  position: fixed;
  inset: 0;
}

#stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: manipulation;
}

/* ─── HUD ──────────────────────────────────────────────────────────────────── */

#golf-panel {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  right: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: rgba(7, 6, 26, 0.78);
  border: var(--hair-2);
  border-radius: var(--r-3);
  box-shadow: var(--etch-soft);
  backdrop-filter: blur(8px);
  z-index: 5;
}
#golf-panel.collapsed {
  left: auto;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
}
#golf-expand {
  min-height: 44px;
  padding: 0 var(--sp-4);
  font: 700 16px var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--ember-400);
  background: rgba(7, 6, 26, 0.78);
  border: var(--hair-2);
  border-radius: var(--r-3);
  box-shadow: var(--etch-soft);
  backdrop-filter: blur(8px);
  cursor: pointer;
}
.gc-grid {
  display: grid;
  gap: 2px;
}
.gc-cell {
  min-height: 17px;
  padding: 1px 0;
  text-align: center;
  font: 11px var(--font-mono);
  color: var(--fg-2);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 3px;
}
.gc-head { background: transparent; color: var(--fg-3); font-size: 10px; }
.gc-round { background: transparent; color: var(--fg-3); }
.gc-round.now { color: var(--ember-400); }
.gc-cell.now { box-shadow: 0 0 0 1px var(--ember-400) inset; color: var(--ember-400); }
.gc-total { color: var(--ember-400); font-weight: 700; background: rgba(251, 191, 36, 0.08); }

#debug-overlay {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  max-width: min(70vw, 420px);
  padding: var(--sp-2) var(--sp-3);
  background: rgba(7, 6, 26, 0.82);
  border: var(--hair-1);
  border-radius: var(--r-2);
  color: var(--aether-300);
  font: 12px/1.4 var(--font-mono);
  white-space: pre-wrap;
  pointer-events: none;
  user-select: none;
  box-shadow: var(--etch-soft);
  backdrop-filter: blur(8px);
  z-index: 6;
}
#debug-overlay[hidden] { display: none; }

#export-bar {
  position: absolute;
  bottom: var(--sp-2);
  right: var(--sp-2);
  display: flex;
  gap: 2px;
  z-index: 5;
}

#export-bar button {
  min-height: 36px;
  padding: 0 var(--sp-2);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  background: rgba(20, 16, 46, 0.8);
  color: var(--fg-2);
  border: var(--hair-1);
  border-radius: var(--r-2);
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: transform var(--dur-1) var(--ease-snap), box-shadow var(--dur-2) var(--ease-out), color var(--dur-2);
}
#export-bar button:hover {
  color: var(--fg-1);
  transform: translateY(-1px);
  box-shadow: var(--etch-soft), 0 0 0 1px rgba(167, 139, 250, 0.45) inset;
}
#export-bar button:active { transform: scale(0.97); }
#export-bar button:focus-visible { outline: 2px solid var(--aether-400); outline-offset: 2px; }
#reset-btn { color: rgba(251, 113, 133, 0.7); }
#reset-btn:hover { color: #fb7185; }

/* First-use hint toast */
#hint-toast {
  position: absolute;
  left: 50%;
  bottom: 76px;
  transform: translateX(-50%);
  max-width: min(86vw, 420px);
  padding: var(--sp-3) var(--sp-4);
  font-size: 16px;
  color: var(--fg-1);
  text-align: left;
  background: rgba(7, 6, 26, 0.88);
  border: var(--hair-2);
  border-radius: var(--r-3);
  box-shadow: var(--etch-soft), var(--glow-arcane);
  backdrop-filter: blur(8px);
  z-index: 7;
  pointer-events: none;
  animation: hint-in var(--dur-3) var(--ease-out) both;
}
#hint-toast[hidden] { display: none; }
#hint-toast.hint-out { animation: hint-out 800ms var(--ease-out) both; }
@keyframes hint-in  { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes hint-out { from { opacity: 1; } to { opacity: 0; } }

/* Persistent "delivered" banner: visible for the whole DELIVERY_DONE wait so
   the enforced pause never reads as a freeze. Taps fall through to the stage
   (pointer-events none); sits below the golf panel, screens and popups so
   the menu can cover it. */
#delivered-banner {
  position: absolute;
  left: 50%;
  bottom: 76px;
  transform: translateX(-50%);
  max-width: min(86vw, 420px);
  padding: var(--sp-3) var(--sp-4);
  font-size: 16px;
  color: var(--fg-1);
  text-align: center;
  background: rgba(7, 6, 26, 0.88);
  border: var(--hair-2);
  border-radius: var(--r-3);
  box-shadow: var(--etch-soft), var(--glow-arcane);
  backdrop-filter: blur(8px);
  z-index: 4;
  pointer-events: none;
  animation: hint-in var(--dur-3) var(--ease-out) both;
}
#delivered-banner[hidden] { display: none; }
#delivered-banner .tap-cue {
  display: block;
  margin-top: 2px;
  color: var(--fg-3);
  animation: tap-cue-pulse 1.6s ease-in-out infinite;
}
@keyframes tap-cue-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* ─── Per-round decay (subtle: colour shift + scanlines, never tap-disrupting) */

#stage { transition: filter 800ms var(--ease-out); }
body[data-round="1"] #stage { filter: none; }
body[data-round="2"] #stage { filter: hue-rotate(8deg) saturate(0.9); }
body[data-round="3"] #stage { filter: hue-rotate(-15deg) saturate(0.7) contrast(1.08); }

/* The 3D renderer does its own per-round decay, in the scene: `fx.round_fog`
   moves the fog colour and density and dims the hemisphere fill. A CSS filter
   on top would be both a double treatment and a full-screen composite of a
   WebGL canvas every frame, which is a real cost on the phones this deploys
   to. The 2D build keeps the filter — it is a canvas-2D renderer with no
   equivalent, and `?view=2d` must not change. */
body[data-view="3d"] #stage { filter: none !important; }

#app::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: repeating-linear-gradient(
    0deg,
    rgba(34, 211, 238, 0) 0,
    rgba(34, 211, 238, 0) 2px,
    rgba(34, 211, 238, var(--scanline-alpha, 0)) 2px,
    rgba(34, 211, 238, var(--scanline-alpha, 0)) 3px
  );
  opacity: 0.5;
}
body[data-round="1"] { --scanline-alpha: 0; }
body[data-round="2"] { --scanline-alpha: 0.05; }
body[data-round="3"] { --scanline-alpha: 0.12; }

/* ─── Screen overlays ───────────────────────────────────────────────────────── */

#screens .screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* No justify-content here: .screen-body's auto margins centre it when it
     fits and keep the top reachable when it overflows and scrolls. */
  padding: var(--sp-6) var(--sp-5);
  background: rgba(7, 6, 26, 0.92);
  backdrop-filter: blur(10px);
  z-index: 8;
  text-align: center;
  animation: screen-in 480ms var(--ease-out) both;
  overflow-y: auto;
}
#screens .screen[hidden] { display: none; }

@keyframes screen-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.screen-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  width: 100%; /* never wider than the screen's padded area on small viewports */
  max-width: 420px;
  margin: auto 0;
}

.screen h1 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0;
  line-height: 1.1;
}

/* Instruction/story copy reads left-aligned; the fixed width keeps every
   paragraph's left edge on one line even though the flex column centers
   blocks. Titles and CTAs stay centered via .screen. */
.screen p {
  font-size: 16px;
  line-height: 1.55;
  width: 100%;
  max-width: 40ch;
  text-align: left;
  color: var(--fg-2);
  margin: 0;
}
.screen .muted { color: var(--fg-3); font-size: 16px; }

.rule-list {
  list-style: none;
  padding: 0;
  margin: var(--sp-2) 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  text-align: left;
  width: 100%;
  max-width: 40ch;
  font-size: 16px;
  line-height: 1.5;
  color: var(--fg-2);
}
.rule-list strong { color: var(--ember-400); }

.fatal-detail {
  max-width: min(86vw, 520px);
  max-height: 40vh;
  overflow: auto;
  text-align: left;
  font: 12px/1.5 var(--font-mono);
  color: #fb7185;
  background: var(--void-1000);
  border: 1px solid rgba(251, 113, 133, 0.4);
  border-radius: var(--r-2);
  padding: var(--sp-3);
}

button.cta {
  min-height: 48px;
  min-width: 44px;
  padding: 0 var(--sp-6);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  background: var(--arcane-600);
  color: var(--fg-1);
  border: var(--hair-2);
  border-radius: var(--r-2);
  cursor: pointer;
  box-shadow: var(--etch-soft), var(--glow-arcane);
  transition: transform var(--dur-1) var(--ease-snap), box-shadow var(--dur-2) var(--ease-out);
  margin-top: var(--sp-3);
}
button.cta:hover:not(:disabled) { transform: translateY(-1px); }
button.cta:active:not(:disabled) { transform: scale(0.97); }
button.cta:focus-visible { outline: 2px solid var(--aether-400); outline-offset: 2px; }
button.cta:disabled { opacity: 0.4; cursor: default; box-shadow: var(--etch-soft); }

button.ghost {
  min-height: 44px;
  padding: 0 var(--sp-4);
  font-family: var(--font-body);
  font-size: 16px;
  background: transparent;
  color: var(--fg-3);
  border: var(--hair-1);
  border-radius: var(--r-2);
  cursor: pointer;
  transition: color var(--dur-2);
}
button.ghost:hover { color: var(--fg-2); }

.consent-line { font-size: 16px; max-width: 38ch; }

/* ─── Round-check popup (modal over the canvas) ─────────────────────────────── */

#popup-roundcheck {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(7, 6, 26, 0.6);
  backdrop-filter: blur(4px);
  z-index: 7;
  animation: screen-in 320ms var(--ease-out) both;
}
#popup-roundcheck[hidden] { display: none; }
.popup-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  max-width: min(86vw, 360px);
  padding: var(--sp-5);
  text-align: center;
  background: var(--void-800);
  border: var(--hair-2);
  border-radius: var(--r-3);
  box-shadow: var(--etch-soft), var(--glow-arcane);
}
.popup-card p { margin: 0; width: 100%; font-size: 17px; line-height: 1.5; text-align: left; color: var(--fg-1); }

/* ─── Self-report ───────────────────────────────────────────────────────────── */

/* .screen prefix: must outrank the left-aligned `.screen p` story-copy rule. */
.screen p.sr-kicker {
  width: auto;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}
.sr-dots { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.sr-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: var(--hair-2);
  background: transparent;
}
.sr-dots span.done { background: var(--fg-3); }
.sr-dots span.active { background: var(--aether-400); border-color: var(--aether-400); }
/* A full-sentence question, not a display heading: body alignment rules
   apply. Width matches .choice-col so question and answers share an edge. */
h1.sr-question {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.4;
  width: 100%;
  max-width: 420px;
  text-align: left;
}
.sr-footer { display: flex; gap: var(--sp-3); margin-top: var(--sp-2); }
.choice-col { display: flex; flex-direction: column; gap: var(--sp-2); width: 100%; max-width: 420px; }
button.choice {
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  font-size: 16px;
  text-align: left;
  background: var(--void-900);
  color: var(--fg-2);
  border: var(--hair-1);
  border-radius: var(--r-2);
  cursor: pointer;
  transition: border-color var(--dur-2), color var(--dur-2);
}
.likert-row {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  justify-content: center;
}
.likert-row .muted { font-size: 13px; }
button.likert {
  width: 44px;
  height: 44px;
  font: 700 16px var(--font-mono);
  background: var(--void-900);
  color: var(--fg-2);
  border: var(--hair-1);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color var(--dur-2), color var(--dur-2);
}
button.choice:hover, button.likert:hover { color: var(--fg-1); }
button.choice.selected, button.likert.selected {
  border-color: var(--aether-400);
  color: var(--fg-1);
  box-shadow: 0 0 0 1px var(--aether-400) inset;
}

/* ─── Share card ────────────────────────────────────────────────────────────── */

#share-canvas {
  width: min(76vw, 320px);
  height: auto;
  border-radius: var(--r-3);
  border: var(--hair-2);
  box-shadow: var(--etch-soft), var(--glow-arcane);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}