/* ==========================================================================
   MicroStory — playmicrostory.com

   1970s–1980s CRT / cathode-ray tube terminal aesthetic.
   Phosphor green on deep black. Monospace only.

   Sections
     1. Tokens & reset
     2. CRT overlays (scanlines, vignette, flicker)
     3. Layout, topbar, footer
     4. Typography & shared blocks
     5. Buttons & forms
     6. Screen: intro
     7. Screen: prompt & write
     8. Stories (shared card used by feed, seeding, bracket, champion)
     9. Screen: reaction hour
    10. Screen: seeding
    11. Screen: bracket
    12. Screen: results
    13. Utility, waiting states, responsive, motion
   ========================================================================== */

/* ------------------------------- 1. Tokens ------------------------------- */

:root {
  /* Deep CRT blacks */
  --crt-bg:        #050805;
  --crt-panel:     #0a120a;
  --crt-panel-hi:  #0f1a0f;
  --crt-sunk:      #061006;

  /* Phosphor greens (P1 family) */
  --ink:           #33ff66;
  --ink-soft:      #2acc52;
  --ink-mute:      #1a8033;
  --ink-dim:       #0f4d1f;

  /* Classic multi-phosphor accents (not web rainbow) */
  --hot:           #ffbf00;   /* P3 amber — heat */
  --hot-bg:        rgba(255, 191, 0, 0.12);
  --cold:          #33e0ff;   /* cool cyan phosphor */
  --cold-bg:       rgba(51, 224, 255, 0.10);
  --neutral:       #2acc52;   /* mid phosphor */
  --neutral-bg:    rgba(42, 204, 82, 0.10);

  /* Champion / bye — soft amber highlight */
  --gold:          #e8c84a;
  --gold-bg:       rgba(232, 200, 74, 0.12);

  --rule:          rgba(51, 255, 102, 0.22);
  --rule-strong:   rgba(51, 255, 102, 0.45);

  --glow:          0 0 6px rgba(51, 255, 102, 0.55),
                   0 0 14px rgba(51, 255, 102, 0.25);
  --glow-strong:   0 0 8px rgba(51, 255, 102, 0.7),
                   0 0 22px rgba(51, 255, 102, 0.35);

  --font-display: "VT323", "Share Tech Mono", "IBM Plex Mono", ui-monospace, monospace;
  --font-ui:      "Share Tech Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-mono:    "IBM Plex Mono", "Share Tech Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --wrap: 46rem;
  --radius: 2px;
  --shadow: 0 0 0 1px var(--rule), 0 0 24px rgba(51, 255, 102, 0.06);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--crt-bg);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--crt-bg);
  /* Soft radial falloff so the center reads brighter than the edges. */
  background-image:
    radial-gradient(ellipse 85% 70% at 50% 40%, #0c160c 0%, var(--crt-bg) 72%);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-shadow: var(--glow);
  position: relative;
  isolation: isolate;
}

[hidden] { display: none !important; }

/* --------------------- 2. CRT overlays (scan / vignette) ----------------- */

/* Scan lines — kept light so copy stays readable. */
body.crt::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    rgba(0, 0, 0, 0.18) 2px,
    rgba(0, 0, 0, 0.18) 3px
  );
  opacity: 0.55;
}

/* Vignette + slight curvature feel via edge darkening. */
body.crt::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1001;
  pointer-events: none;
  background:
    radial-gradient(ellipse 78% 72% at 50% 45%, transparent 48%, rgba(0, 0, 0, 0.55) 100%);
  box-shadow: inset 0 0 80px 20px rgba(0, 0, 0, 0.45);
  /* Tasteful phosphor flicker — opacity only, low amplitude. */
  animation: crt-flicker 4.5s ease-in-out infinite;
}

@keyframes crt-flicker {
  0%, 92%, 100% { opacity: 1; }
  93%           { opacity: 0.92; }
  94%           { opacity: 1; }
  96%           { opacity: 0.88; }
  97%           { opacity: 1; }
}

/* -------------------------- 3. Layout & chrome --------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem clamp(1rem, 4vw, 2rem);
  background: rgba(5, 8, 5, 0.92);
  border-bottom: 1px solid var(--rule);
}

.wordmark {
  font-family: var(--font-display);
  font-size: 1.85rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-decoration: none;
  line-height: 1;
  text-shadow: var(--glow-strong);
  text-transform: uppercase;
}
.wordmark span { font-style: normal; color: var(--hot); text-shadow: 0 0 8px rgba(255, 191, 0, 0.5); }
.wordmark::after {
  content: "█";
  display: inline-block;
  margin-left: 0.12em;
  font-size: 0.72em;
  vertical-align: baseline;
  color: var(--ink);
  animation: cursor-blink 1.05s step-end infinite;
  text-shadow: var(--glow);
}

@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

.top-clock {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem 0.75rem;
  min-width: 0;
  flex: 1 1 auto;
}
.top-clock[hidden] { display: none; }
.top-clock-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  white-space: nowrap;
}
.top-clock-time {
  font-family: var(--font-display);
  font-size: 1.65rem;
  line-height: 1;
  color: var(--ink);
  text-shadow: var(--glow);
  letter-spacing: 0.04em;
  white-space: nowrap;
  min-width: 4.5ch;
}
.top-clock.is-urgent .top-clock-time {
  color: var(--hot);
  text-shadow: 0 0 8px rgba(255, 191, 0, 0.55);
}
.top-clock.is-closed .top-clock-time {
  color: var(--ink-mute);
  text-shadow: none;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.identity {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}

.identity-handle {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

.reroll {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  background: none;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.15rem 0.5rem;
  cursor: pointer;
  text-shadow: none;
}
.reroll:hover { color: var(--hot); border-color: var(--hot); }

/* Prominent CRT sign-in — not the tiny redraw chip. */
.signin-btn {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bg);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  padding: 0.28rem 0.7rem;
  cursor: pointer;
  text-shadow: none;
  box-shadow: 0 0 10px rgba(51, 255, 102, 0.35);
  flex: none;
}
.signin-btn:hover {
  background: transparent;
  color: var(--ink);
  box-shadow: 0 0 14px rgba(51, 255, 102, 0.55);
}
.signin-btn[hidden] { display: none !important; }

.identity-signed {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  text-shadow: var(--glow);
  white-space: nowrap;
}

/* ------------------- The three parts of the day (nav) -------------------- */

/* Always on screen, so nobody has to guess whether they are here to write,
   to react, or to vote — or when the part they want opens. */
.phasenav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  border-bottom: 1px solid var(--rule);
  position: relative;
  z-index: 2;
}

.phasenav-tab {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.7rem clamp(0.6rem, 2vw, 1.1rem);
  background: rgba(5, 8, 5, 0.9);
  border: none;
  border-top: 2px solid transparent;
  color: var(--ink-mute);
  font-family: var(--font-mono);
  text-align: left;
  cursor: pointer;
  text-shadow: none;
}
.phasenav-tab:hover { background: var(--crt-panel); }

.phasenav-n {
  flex: none;
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--ink-dim);
}

.phasenav-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.phasenav-name {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  line-height: 1.35;
}

.phasenav-state {
  font-size: 0.68rem;
  line-height: 1.4;
  color: var(--ink-mute);
}

/* Open right now — the one place a player should be looking. */
.phasenav-tab.is-open {
  border-top-color: var(--ink);
  background: rgba(51, 255, 102, 0.07);
}
.phasenav-tab.is-open .phasenav-n,
.phasenav-tab.is-open .phasenav-name {
  color: var(--ink);
  text-shadow: var(--glow);
}
.phasenav-tab.is-open .phasenav-state { color: var(--ink-soft); }

.phasenav-tab.is-done { border-top-color: var(--gold); }
.phasenav-tab.is-done .phasenav-name { color: var(--gold); }

.phasenav-tab.is-locked .phasenav-name,
.phasenav-tab.is-shut .phasenav-name { color: var(--ink-dim); }

/* Where the player actually is. */
.phasenav-tab.is-current {
  background: var(--crt-panel-hi);
  border-top-color: var(--hot);
}
.phasenav-tab.is-current .phasenav-name {
  color: var(--hot);
  text-shadow: 0 0 8px rgba(255, 191, 0, 0.4);
}

.closed-status {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--hot);
  border: 1px solid var(--rule-strong);
  border-left: 3px solid var(--hot);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  margin: 0 0 1rem;
  background: rgba(0, 0, 0, 0.3);
}

.auth-panel {
  position: sticky;
  top: 3.1rem;
  z-index: 19;
  border-bottom: 1px solid var(--rule);
  background: rgba(5, 12, 6, 0.97);
  padding: 1rem clamp(1rem, 4vw, 2rem) 1.15rem;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

.auth-panel[hidden] { display: none !important; }

.auth-panel-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 0.35rem;
  text-shadow: var(--glow);
}

.auth-panel-note {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-mute);
  margin: 0 0 0.85rem;
  max-width: 36rem;
}

.auth-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin: 0 0 0.35rem;
}

.auth-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  max-width: 36rem;
}

.auth-row input[type="email"],
.auth-row input[type="text"] {
  flex: 1 1 14rem;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.55rem 0.7rem;
  outline: none;
}

.auth-row input[type="email"]:focus,
.auth-row input[type="text"]:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px rgba(51, 255, 102, 0.25);
}

.handle-at {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--ink-mute);
  flex: none;
}

.auth-status {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--ink-soft);
  min-height: 1.2em;
  margin: 0.65rem 0 0;
  max-width: 36rem;
}

.auth-status.is-error { color: var(--hot); }

.auth-demo {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0.55rem 0 0;
  max-width: 36rem;
  word-break: break-all;
}

.auth-demo a {
  color: var(--hot);
  text-shadow: 0 0 8px rgba(255, 191, 0, 0.35);
}

.auth-close {
  margin-top: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.auth-close:hover { color: var(--ink); }

.identity-score {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.identity-score-label {
  font-size: 0.68rem;
  color: var(--ink-mute);
  margin-left: 0.2rem;
  text-transform: uppercase;
}

#app {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(1.75rem, 5vw, 3.5rem) clamp(1rem, 4vw, 2rem) 4rem;
  position: relative;
  z-index: 1;
}

.screen { display: none; }
.screen.is-active { display: block; animation: rise 0.32s ease both; }

@keyframes rise {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.sitefoot {
  border-top: 1px solid var(--rule);
  padding: 1.5rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  position: relative;
  z-index: 1;
}
.sitefoot .dot { margin: 0 0.5rem; }

.feedback-widget {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.65rem;
  max-width: min(22rem, calc(100vw - 1.6rem));
}
.feedback-widget[hidden] { display: none; }
.feedback-tab {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--crt-panel);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.55rem 0.9rem;
  cursor: pointer;
  box-shadow: var(--glow);
}
.feedback-tab:hover {
  color: var(--hot);
  border-color: var(--hot);
}
.feedback-panel {
  width: 22rem;
  max-width: 100%;
  padding: 1rem 1.05rem 1.1rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: rgba(5, 8, 5, 0.96);
  box-shadow: var(--shadow), var(--glow);
}
.feedback-panel[hidden] { display: none; }
.feedback-title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  margin: 0 0 0.35rem;
  color: var(--ink);
  text-shadow: var(--glow);
}
.feedback-note {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink-soft);
  margin: 0 0 0.75rem;
  line-height: 1.4;
}
.feedback-panel textarea {
  width: 100%;
  resize: vertical;
  min-height: 6rem;
}
.feedback-panel .actions { margin-top: 0.85rem; }

/* Missed-window free play — bottom of page, never competes with open writing */
.free-play {
  position: relative;
  z-index: 1;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 1.75rem 1.25rem 0.5rem;
  border-top: 1px dashed var(--rule);
}
.free-play[hidden] { display: none; }
.free-play-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  margin: 0 0 0.4rem;
}
.free-play-title {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 400;
  margin: 0 0 0.65rem;
  color: var(--ink);
  text-shadow: var(--glow);
}
.free-play-warn,
.free-play-next {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 0.65rem;
  max-width: 36rem;
}
.free-play-next-after { margin-top: 0.85rem; }
.free-play-warn strong {
  color: var(--hot);
  text-shadow: 0 0 6px rgba(255, 191, 0, 0.35);
}
.free-play-actions { margin: 1rem 0 0.5rem; }
.free-play-actions[hidden] { display: none; }
.free-play-again {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
  margin-top: 1rem;
}
.free-play-panel {
  margin-top: 1.25rem;
  padding: 1.1rem 1.15rem;
  border: 1px solid var(--rule);
  background: var(--crt-panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.free-play-panel[hidden] { display: none; }
#freePlayWrite[hidden] { display: none; }
.free-play-prompt-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  margin: 0 0 0.45rem;
}
.free-play-prompt {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.35;
  color: var(--ink);
  text-shadow: var(--glow);
}
.free-play-assign {
  margin-bottom: 1rem;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.free-play-assign .assign-line {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--ink);
  margin: 0.35rem 0;
}
.free-play-assign .story-line {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin: 0.35rem 0;
  color: var(--ink);
}
.free-play-assign .line-n,
.free-play-result .line-n {
  opacity: 0.55;
  margin-right: 0.25rem;
}
.free-play-assign .line-by,
.free-play-result .line-by {
  opacity: 0.55;
  font-size: 0.9em;
}
.free-play-write-actions {
  flex-wrap: wrap;
}
.free-play-result {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--rule-strong);
}
.free-play-result[hidden] { display: none; }
.free-play-result .story-line {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin: 0.35rem 0;
  color: var(--ink);
}

/* --------------------------- 4. Typography ------------------------------- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
  margin: 0 0 1rem;
}
.eyebrow::before {
  content: "> ";
  color: var(--ink-soft);
}

.day-agenda {
  list-style: none;
  margin: -0.35rem 0 1.15rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--rule);
  background: rgba(51, 255, 102, 0.04);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.day-agenda li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  margin: 0.15rem 0;
}
.day-agenda-label {
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  min-width: 11.5rem;
}
.day-agenda-label::before {
  content: "· ";
  color: var(--ink);
}

.freeplay-teaser {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 0 0 1.25rem;
  line-height: 1.45;
}
.freeplay-teaser[hidden] { display: none !important; }
.freeplay-teaser a {
  color: var(--hot);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-shadow: 0 0 8px rgba(255, 191, 0, 0.35);
}
.freeplay-teaser a:hover {
  color: var(--ink);
}

/* --------------------------- Free Play screen -------------------------- */

.freeplay-modes {
  display: flex;
  gap: 0.5rem;
  margin: 1.25rem 0 1rem;
}

.freeplay-mode {
  flex: 1;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--rule);
  background: rgba(5, 8, 5, 0.65);
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  cursor: pointer;
}

.freeplay-mode.is-active {
  border-color: var(--hot);
  color: var(--ink);
  background: var(--crt-panel);
}

.freeplay-prompt-pick {
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid var(--rule);
  background: rgba(5, 8, 5, 0.55);
}

.freeplay-prompt-pick[hidden] { display: none; }

.freeplay-prompt-actions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 0.75rem;
}

.freeplay-prompt-actions textarea {
  width: 100%;
  min-height: 3.5rem;
  resize: vertical;
}

.freeplay-prompt-modes {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
}

.freeplay-prompt-modes .freeplay-prompt-mode {
  width: 100%;
  text-align: center;
}

.freeplay-prompt-panel[hidden] { display: none; }

.freeplay-pool-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0.35rem 0 0.15rem;
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--muted);
  cursor: pointer;
}

.freeplay-pool-checkbox input {
  margin: 0.15rem 0 0;
  flex-shrink: 0;
}

.linkish {
  border: none;
  background: none;
  padding: 0;
  color: var(--hot);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.linkish:hover { color: var(--ink); }

.collab-or {
  margin: 0.75rem 0 0.35rem;
  text-align: center;
  color: var(--ink-dim);
  font-size: 0.82rem;
}

.collab-actions,
.collab-share-actions,
.collab-room-actions {
  margin-top: 1rem;
}

.collab-join-row {
  margin-top: 0.5rem;
}

.collab-room-head {
  margin: 0.5rem 0;
  font-family: var(--font-mono);
}

.collab-round {
  color: var(--ink-dim);
  margin-left: 0.5rem;
}

.collab-members {
  color: var(--ink-soft);
  font-size: 0.88rem;
}

.collab-share-label {
  margin: 1rem 0 0.25rem;
  font-size: 0.82rem;
  color: var(--ink-dim);
}

.collab-share-url {
  word-break: break-all;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.phasenav-tab-freeplay.is-open .phasenav-n,
.phasenav-tab-freeplay.is-open .phasenav-name {
  color: var(--ink);
}

.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.15rem, 6.5vw, 3.45rem);
  line-height: 1.08;
  letter-spacing: 0.02em;
  margin: 0 0 1.25rem;
  text-shadow: var(--glow-strong);
  text-transform: uppercase;
}
.display em {
  font-style: normal;
  color: var(--hot);
  text-shadow: 0 0 10px rgba(255, 191, 0, 0.45);
}

.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: 0.03em;
  margin: 0 0 0.6rem;
  text-transform: uppercase;
  text-shadow: var(--glow);
}

.lede {
  font-size: 1.02rem;
  color: var(--ink-soft);
  max-width: 34rem;
  margin: 0 0 1.75rem;
}

.fineprint {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--ink-mute);
  max-width: 30rem;
  margin: 1.5rem 0 0;
}

.error {
  color: var(--hot);
  font-size: 0.88rem;
  min-height: 1.3em;
  margin: 0.5rem 0 0;
  text-shadow: 0 0 8px rgba(255, 191, 0, 0.4);
}
.error.is-good {
  color: var(--ink);
  text-shadow: var(--glow);
}
.error.is-bad { color: var(--hot); }

/* --------------------------- 5. Buttons & forms -------------------------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-top: 1.75rem;
}

.btn {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.6rem 1.1rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  text-shadow: none;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--ink);
  color: var(--crt-bg);
  border-color: var(--ink);
  box-shadow: 0 0 12px rgba(51, 255, 102, 0.35);
}
.btn-primary:hover {
  background: #66ff99;
  border-color: #66ff99;
  box-shadow: 0 0 18px rgba(51, 255, 102, 0.5);
}

.btn-lg { padding: 0.8rem 1.5rem; font-size: 0.95rem; }

.btn-quiet {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--rule-strong);
  text-shadow: var(--glow);
}
.btn-quiet:hover {
  border-color: var(--ink);
  color: var(--ink);
  box-shadow: 0 0 10px rgba(51, 255, 102, 0.25);
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

textarea {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--crt-sunk);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  resize: vertical;
  text-shadow: var(--glow);
  caret-color: var(--ink);
}
textarea::placeholder { color: var(--ink-mute); opacity: 0.8; }
textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink), 0 0 16px rgba(51, 255, 102, 0.25);
}

/* One visible focus treatment for everything keyboard-reachable. */
a:focus-visible,
button:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(51, 255, 102, 0.4);
}

/* ----------------------------- 6. Intro --------------------------------- */

.how {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}
.how li {
  display: flex;
  gap: 0.9rem;
  align-items: baseline;
}
.how-n {
  flex: none;
  width: 1.6rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink);
  border-top: 2px solid var(--ink);
  padding-top: 0.35rem;
  text-shadow: var(--glow);
}
.how strong {
  display: block;
  font-size: 0.98rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
}
.how p {
  margin: 0.1rem 0 0;
  font-size: 0.9rem;
  color: var(--ink-mute);
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 0.5rem;
}
.stat {
  flex: 1 1 7rem;
  background: var(--crt-panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
}
.stat-n {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 0.02em;
  text-shadow: var(--glow);
}
.stat-l {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  margin-top: 0.3rem;
}

/* Persistent signed-in widget — sits after main, not inside a .screen. */
.submit-prompt {
  position: relative;
  z-index: 1;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 1.25rem clamp(1rem, 4vw, 2rem) 1.75rem;
  border-top: 1px solid var(--rule);
}
.submit-prompt[hidden] { display: none; }
.submit-prompt summary {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  cursor: pointer;
}
.submit-prompt summary:hover { color: var(--ink); }
.submit-note {
  font-size: 0.85rem;
  color: var(--ink-mute);
  max-width: 32rem;
  margin: 0.85rem 0;
}
.submit-prompt textarea { font-size: 1rem; }
.submit-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 0.7rem;
  flex-wrap: wrap;
}
.submit-status {
  font-size: 0.82rem;
  color: var(--ink-mute);
}
.submit-status.is-good { color: var(--ink); }
.submit-status.is-bad { color: var(--hot); }

/* ------------------------- 7. Prompt & write ----------------------------- */

.prompt-card {
  margin: 0 0 0.85rem;
  padding: clamp(1.4rem, 4vw, 2.2rem);
  background: var(--crt-panel);
  border: 1px solid var(--rule-strong);
  border-left: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow), inset 0 0 30px rgba(51, 255, 102, 0.04);
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 4.5vw, 2.35rem);
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-shadow: var(--glow-strong);
}

.prompt-credit {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink-mute);
  margin: 0 0 1.75rem;
}

/* The prompt goes only to whoever writes line 1. Everyone else gets this. */
.prompt-sealed {
  margin: 0 0 1.5rem;
  padding: clamp(1.1rem, 3.5vw, 1.6rem);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.3);
}
.prompt-sealed[hidden] { display: none !important; }
.prompt-sealed-title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3.5vw, 1.7rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 0.4rem;
  text-shadow: none;
}
.prompt-sealed-title::before {
  content: "▓▒░ ";
  color: var(--ink-dim);
}
.prompt-sealed-note {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 34rem;
}

.prompt-open-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--hot);
  margin: 0 0 0.5rem;
  text-shadow: 0 0 8px rgba(255, 191, 0, 0.35);
}
.prompt-open-label[hidden] { display: none !important; }

/* Writing countdown — phosphor clock, front and center on write screens */
.phase-clock {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.55rem 1rem;
  margin: 0 0 1.25rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--rule-strong);
  background: rgba(0, 0, 0, 0.35);
  border-radius: var(--radius);
  box-shadow: var(--glow);
  max-width: 28rem;
}
.phase-clock[hidden] { display: none; }
.phase-clock-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
}
.phase-clock-time {
  font-family: var(--font-display);
  font-size: 2.35rem;
  line-height: 1;
  color: var(--ink);
  text-shadow: var(--glow-strong);
  letter-spacing: 0.04em;
  min-width: 5.5ch;
}
.phase-clock-sub {
  flex: 1 1 100%;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.phase-clock.is-urgent {
  border-color: var(--hot);
  box-shadow: 0 0 8px rgba(255, 191, 0, 0.35);
}
.phase-clock.is-urgent .phase-clock-time {
  color: var(--hot);
  text-shadow: 0 0 8px rgba(255, 191, 0, 0.55);
}
.phase-clock.is-closed .phase-clock-time {
  color: var(--ink-mute);
  text-shadow: none;
}

.assignment {
  background: var(--crt-panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem;
  margin-bottom: 1.75rem;
  box-shadow: var(--shadow);
}
.assign-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  margin: 0 0 0.6rem;
}
.assign-line {
  font-family: var(--font-display);
  font-size: 1.45rem;
  line-height: 1.35;
  margin: 0;
  text-shadow: var(--glow);
}
.assign-blind {
  font-size: 0.9rem;
  color: var(--ink-mute);
  margin: 0.75rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--rule-strong);
}

.write-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  margin-bottom: 0.5rem;
}

.write-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-mute);
}
.counter.is-close { color: var(--hot); }

/* ------------------------------ 8. Stories ------------------------------- */

.story {
  background: var(--crt-panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
}

.story-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
}

.story-tag {
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.1rem 0.5rem;
}
.story-tag.is-mine { color: var(--hot); border-color: var(--hot); }
.story-tag.is-partial { color: var(--gold); border-color: var(--gold); }

.story-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
.story-line {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
}
.line-n {
  flex: none;
  width: 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-mute);
  padding-top: 0.15rem;
}
.line-body { min-width: 0; }
.line-text {
  font-family: var(--font-display);
  font-size: 1.28rem;
  line-height: 1.35;
  margin: 0;
  overflow-wrap: anywhere;
  text-shadow: var(--glow);
}
.line-by {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--ink-mute);
}

.story-unfinished {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--gold);
  margin: 0.7rem 0 0;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--rule-strong);
}

/* --------------------------- 9. Reaction hour ---------------------------- */

.react-bar {
  position: sticky;
  top: 3.4rem;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--crt-sunk);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.6rem 0.9rem;
  margin-bottom: 1.25rem;
}
.react-left {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.react-left strong { font-size: 1rem; color: var(--ink); }
.react-hint {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--ink-mute);
}

.feed { display: grid; gap: 1rem; }

.feed .story.is-mine {
  border-style: dashed;
  background: var(--crt-sunk);
}

.react-picker {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0.9rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--rule);
}

.react-emojis {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.react-emoji {
  width: 2.15rem;
  height: 2.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  line-height: 1;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 0;
}
.react-emoji:hover:not(:disabled) {
  border-color: var(--ink);
  box-shadow: 0 0 10px rgba(51, 255, 102, 0.35);
}
.react-emoji.is-chosen {
  border-color: var(--ink);
  background: rgba(51, 255, 102, 0.12);
  box-shadow: 0 0 12px rgba(51, 255, 102, 0.4);
}
.react-emoji:disabled { opacity: 0.35; cursor: not-allowed; }

.react-custom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.react-custom-input {
  width: 4.5rem;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  text-align: center;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.35rem 0.4rem;
  outline: none;
}
.react-custom-input:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px rgba(51, 255, 102, 0.25);
}

.react-chosen {
  margin: 0.65rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink);
  text-shadow: var(--glow);
}

.schedule-note {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: -0.35rem 0 1.1rem;
  max-width: 38rem;
}

.come-back {
  border: 1px solid var(--rule-strong);
  background: rgba(0, 0, 0, 0.28);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin: 1rem 0 1.25rem;
  max-width: 38rem;
}
.come-back p {
  margin: 0 0 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.come-back p:last-child { margin-bottom: 0; }
.come-back strong { color: var(--ink); text-shadow: var(--glow); }

.remind-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
  margin-top: 0.75rem;
}
.remind-status {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-mute);
}

.react-note {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ink-mute);
  margin: 0.9rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--rule);
}

/* ------------------------------ 10. Seeding ------------------------------- */

.seed-list {
  list-style: none;
  counter-reset: seed;
  margin: 0 0 0.5rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.seed-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: var(--crt-panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
}
.seed-row.is-out { opacity: 0.45; }

.seed-num {
  flex: none;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--ink);
  color: var(--crt-bg);
  border-radius: var(--radius);
  text-shadow: none;
  box-shadow: 0 0 8px rgba(51, 255, 102, 0.4);
}
.seed-row.is-out .seed-num {
  background: var(--ink-dim);
  color: var(--ink-mute);
  box-shadow: none;
}

.seed-body { flex: 1; min-width: 0; }
.seed-line {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.3;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.seed-meta {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ink-mute);
  margin-top: 0.2rem;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.seed-total {
  flex: none;
  text-align: right;
  font-family: var(--font-mono);
}
.seed-total b {
  display: block;
  font-size: 1.15rem;
  line-height: 1;
}
.seed-total span {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}

/* ------------------------------ 11. Bracket ------------------------------ */

.byes {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--gold);
  background: var(--gold-bg);
  border: 1px solid rgba(232, 200, 74, 0.4);
  border-radius: var(--radius);
  padding: 0.6rem 0.85rem;
  margin-bottom: 1.25rem;
}
.byes:empty { display: none; }

.matchups { display: grid; gap: 1.5rem; }

.matchup {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--crt-panel);
  overflow: hidden;
}

.matchup-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.9rem;
  background: var(--crt-sunk);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
}
.matchup-status.is-done { color: var(--ink); }

.sides {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.side {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--crt-panel);
  border: none;
  border-right: 1px solid var(--rule);
  padding: 0.95rem 1rem 1.1rem;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
  text-shadow: var(--glow);
}
.side:last-child { border-right: none; }
.side:hover:not(:disabled) { background: var(--crt-panel-hi); }
.side:disabled { cursor: default; }

.side-seed {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  text-shadow: none;
}

.side-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}
.side-lines li {
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.side-authors {
  display: block;
  margin-top: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  color: var(--ink-mute);
  overflow-wrap: anywhere;
  text-shadow: none;
}

.side.is-picked {
  background: var(--hot-bg);
  box-shadow: inset 0 0 0 2px var(--hot);
}
.side.is-winner {
  background: var(--gold-bg);
  box-shadow: inset 0 0 0 2px var(--gold);
}
.side.is-loser { opacity: 0.4; }

.side-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius);
  text-shadow: none;
}
.side.is-picked .side-badge {
  background: var(--hot);
  color: var(--crt-bg);
}
.side.is-winner .side-badge {
  background: var(--gold);
  color: var(--crt-bg);
}

.votebar {
  display: flex;
  height: 6px;
  background: var(--crt-sunk);
  border-top: 1px solid var(--rule);
}
.votebar-a { background: var(--hot); box-shadow: 0 0 6px rgba(255, 191, 0, 0.5); }
.votebar-b { background: var(--cold); box-shadow: 0 0 6px rgba(51, 224, 255, 0.4); }

.vote-counts {
  display: flex;
  justify-content: space-between;
  padding: 0.45rem 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ink-mute);
  border-top: 1px solid var(--rule);
}

.matchup-bye {
  padding: 0.9rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--gold);
}

/* ------------------------------ 12. Results ------------------------------ */

.champion {
  background: var(--crt-panel);
  border: 1px solid var(--gold);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: clamp(1.3rem, 4vw, 2rem);
  margin-bottom: 2.5rem;
  box-shadow: 0 0 0 1px rgba(232, 200, 74, 0.2), 0 0 28px rgba(232, 200, 74, 0.12);
}
.champ-crown {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold);
  margin: 0 0 1rem;
  text-shadow: 0 0 8px rgba(232, 200, 74, 0.45);
}
.champ-story {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3.6vw, 1.75rem);
  line-height: 1.35;
  margin: 0;
  text-shadow: var(--glow-strong);
}
.champ-story p { margin: 0 0 0.6rem; }
.champ-by {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-mute);
  margin: 1.1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
}

.scorecard {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--crt-panel);
  margin-bottom: 1.25rem;
  overflow: hidden;
}
.score-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.92rem;
}
.score-row:last-child { border-bottom: none; }
.score-label { color: var(--ink-soft); }
.score-pts {
  font-family: var(--font-mono);
  font-weight: 600;
  white-space: nowrap;
}
.score-row.is-zero .score-pts { color: var(--ink-mute); }
.score-row.is-total {
  background: var(--ink);
  color: var(--crt-bg);
  font-weight: 600;
  text-shadow: none;
}
.score-row.is-total .score-label { color: var(--crt-bg); }
.score-row.is-empty { color: var(--ink-mute); font-style: italic; }

/* ------------------- 13. Utility, waiting, responsive -------------------- */

/* Live mode only: shown while waiting on a cron-driven phase change. */
.hold {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--crt-sunk);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  margin-bottom: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--ink-soft);
}
.hold-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 8px rgba(51, 255, 102, 0.7);
  animation: pulse 1.4s ease-in-out infinite;
  flex: none;
}
@keyframes pulse {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50%      { opacity: 1;    transform: scale(1.15); }
}

.empty {
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-align: center;
  color: var(--ink-mute);
  font-size: 0.92rem;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 34rem) {
  body { font-size: 16px; }

  .topbar {
    padding: 0.6rem 1rem;
    flex-wrap: wrap;
    gap: 0.55rem;
  }
  .topbar-right {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.55rem;
    width: 100%;
  }
  .top-clock {
    order: 3;
    flex: 1 1 100%;
    justify-content: flex-start;
    padding-top: 0.15rem;
    border-top: 1px dashed var(--rule);
  }
  .identity {
    flex-wrap: wrap;
    max-width: 100%;
  }
  .signin-btn {
    font-size: 0.78rem;
    padding: 0.35rem 0.85rem;
  }
  /* Three tabs across a phone is unreadable; stack them into a checklist. */
  .phasenav { grid-template-columns: 1fr; }
  .phasenav-tab {
    align-items: baseline;
    border-top: none;
    border-left: 2px solid transparent;
    padding: 0.55rem 1rem;
  }
  .phasenav-body { flex-direction: row; flex-wrap: wrap; gap: 0 0.6rem; }
  .phasenav-tab.is-open { border-left-color: var(--ink); }
  .phasenav-tab.is-done { border-left-color: var(--gold); }
  .phasenav-tab.is-current { border-left-color: var(--hot); }

  .react-hint { display: none; }
  .react-bar { top: auto; position: static; }
  .feedback-widget {
    right: 0.75rem;
    bottom: 0.75rem;
  }

  /* Side-by-side matchups get unreadable on a phone; stack them. */
  .sides { grid-template-columns: 1fr; }
  .side { border-right: none; border-bottom: 1px solid var(--rule); }
  .side:last-child { border-bottom: none; }

  .stat { flex-basis: 100%; }
  .seed-row { gap: 0.6rem; }

  /* Slightly lighter scan overlay on small screens for readability. */
  body.crt::before { opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  body.crt::after { animation: none; opacity: 1; }
  .wordmark::after { animation: none; opacity: 1; }
}