:root {
  --blue: #0b1d8f;
  --blue-dark: #060f52;
  --gold: #ffcc33;
  --text: #fff;
  --muted: #9aa3d6;
  --panel: #101a5c;
}

@font-face {
  font-family: "Anton";
  src: url("fonts/Anton-Regular.ttf") format("truetype");
  font-display: block;
}

* { box-sizing: border-box; }

/* Show text (board, prompts, scores) uses the condensed display font. Anton has only one
   weight, so bold is turned off to stop the browser faking a smeared bold version. */
.topbar h1, .display-title, .cell, .modal-head, .modal-body, .team .score,
.team-label, .team input.team-name, .stage-ask-hint {
  font-family: "Anton", "Oswald", "Arial Narrow", sans-serif;
  font-weight: normal !important;
  font-synthesis: none;
  letter-spacing: 0.02em;
}
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, sans-serif;
  background: #02061f;
  color: var(--text);
  min-height: 100vh;
}

button, .button-like {
  font: inherit;
  font-weight: 600;
  padding: 0.5em 1em;
  border-radius: 6px;
  border: 2px solid var(--gold);
  background: var(--gold);
  color: #1a1a1a;
  cursor: pointer;
}
button.ghost, .button-like.ghost { background: transparent; color: var(--gold); }
button:hover, .button-like:hover { filter: brightness(1.1); }

input, textarea {
  font: inherit;
  padding: 0.4em 0.6em;
  border-radius: 6px;
  border: 1px solid #3a4590;
  background: #0a1240;
  color: var(--text);
  width: 100%;
}

/* ---- top bar ---- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
  background: var(--blue-dark);
  border-bottom: 3px solid var(--gold);
  flex-wrap: wrap;
}
.topbar h1 {
  margin: 0;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 1.6rem;
}
.topbar nav { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.sound-control { display: inline-flex; align-items: center; gap: 0.4rem; }
.sound-control button { white-space: nowrap; min-width: 8.5em; }
.sound-control input[type="range"] { width: 7rem; padding: 0; accent-color: var(--gold); }
.tab { background: transparent; color: var(--gold); }
.tab.active { background: var(--gold); color: #1a1a1a; }

.view { padding: 1.5rem; }

/* ---- board ---- */
.intro-host { padding: 3rem 1.5rem; text-align: center; border: 2px dashed #2a3590; border-radius: 8px; color: var(--muted); }
.intro-host-title { font-size: 1.4rem; font-weight: 800; color: var(--text); margin-bottom: 0.4rem; }
.intro-host p { margin: 0; }
.intro-host b { color: var(--gold); }
.board {
  display: grid;
  gap: 6px;
  background: #000;
  padding: 6px;
  border-radius: 8px;
}
.cell {
  background: var(--blue);
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.5rem;
  border-radius: 4px;
  font-weight: 800;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 #000;
}
.cell.header {
  font-size: clamp(1.1rem, calc(2.1 * var(--vw, 1vw)), 1.75rem);
  border-bottom: 4px solid #000;
  /* The gold ring of the category introductions (.cat-card), inside the board's black grid lines,
     to set the categories apart from the squares below. */
  box-shadow: inset 0 0 0 4px var(--gold);
}
.cell.value {
  font-size: clamp(1.5rem, calc(3.5 * var(--vw, 1vw)), 3rem);
  color: var(--gold);
  cursor: pointer;
  border: none;
  transition: transform 0.1s;
}
.cell.value:hover:not(.used) { transform: scale(1.03); background: #1530c0; }
.cell.value.used { color: transparent; text-shadow: none; cursor: default; background: #071259; }
.cell.value.empty { color: #4a5498; }

/* ---- scoreboard ---- */
.scoreboard {
  margin-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}
.teams { display: flex; gap: 1rem; flex-wrap: wrap; }
.team {
  background: var(--panel);
  border: 2px solid #2a3590;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  min-width: 170px;
  text-align: center;
}
.team .host-team-name {
  font-family: "Anton", "Oswald", "Arial Narrow", sans-serif;
  font-size: 1.15rem;
  overflow-wrap: anywhere;
}
.team .score {
  font-size: 2rem;
  font-weight: 800;
  color: var(--gold);
  margin: 0.25rem 0;
}
.team .score.negative { color: #ff6b6b; }
.team .controls { display: flex; gap: 0.3rem; justify-content: center; }
.team .controls button { padding: 0.2em 0.6em; }
.team .controls .amount { width: 5.5rem; padding: 0.2em 0.4em; text-align: center; }
.board-actions { display: flex; gap: 0.5rem; }

/* ---- modal ---- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 10;
}
.modal-card {
  background: var(--blue);
  border: 4px solid var(--gold);
  border-radius: 12px;
  width: min(1000px, 100%);
  max-height: 95vh;
  overflow: auto;
  padding: 2rem;
  box-shadow: 0 0 60px rgba(255, 204, 51, 0.3);
}
.modal-head {
  display: flex;
  justify-content: space-between;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--gold);
  font-size: 1.3rem;
  margin-bottom: 1.5rem;
}
.modal-body {
  font-size: clamp(1.4rem, calc(3 * var(--vw, 1vw)), 2.4rem);
  line-height: 1.8;
  text-align: center;
  font-weight: 700;
  text-shadow: 2px 2px 0 #000;
}
.modal-body .blank-input {
  display: inline-block;
  width: auto;
  min-width: 6em;
  font-size: 0.7em;
  font-weight: 700;
  text-align: center;
  background: #fff;
  color: #000;
  border: 3px solid var(--gold);
  vertical-align: middle;
  text-shadow: none;
}
.modal-body .blank-input::placeholder { color: #888; font-style: italic; }
.modal-body .filled {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.modal-body .filled.unfilled { color: #9aa3d6; font-style: italic; }
/* "Prompt by …" in the bottom right corner of a revealed scene, for prompts sent in through the form.
   On the host it's the last line of the pop-up's text; on the audience screen it sits in the
   pop-up's padding, so it never takes room from the scene. */
.prompt-credit {
  margin-top: 0.6em;
  font-size: 0.45em;
  line-height: 1.3;
  text-align: right;
  color: var(--gold);
  letter-spacing: 0.06em;
  text-shadow: 1px 1px 0 #000;
}
.stage-credit {
  position: absolute;
  right: 1.75rem;
  bottom: 0.9rem;
  margin: 0;
  font-family: "Anton", "Oswald", "Arial Narrow", sans-serif;
  font-size: clamp(1rem, calc(1.8 * var(--vw, 1vw)), 1.6rem);
}
.prompt-credit::before { content: "★ "; }
/* How many improvisers, in the bottom left corner of the audience pop-up (the credit takes the right). */
.stage-cast {
  position: absolute;
  left: 1.75rem;
  bottom: 0.9rem;
  font-family: "Anton", "Oswald", "Arial Narrow", sans-serif;
  font-size: clamp(1rem, calc(1.8 * var(--vw, 1vw)), 1.6rem);
  line-height: 1.3;
  text-shadow: 1px 1px 0 #000;
}
.modal-awards {
  margin-top: 1.5rem;
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}
.modal-awards { flex-direction: column; }
.award-row { display: flex; gap: 0.5rem; justify-content: center; align-items: center; flex-wrap: wrap; }
.award-row span { color: var(--muted); margin-right: 0.5rem; min-width: 8.5em; text-align: right; }
.modal-awards button.fail, button.ghost.danger { color: #ff6b6b; border-color: #ff6b6b; }
.modal-awards button.awarded { background: #3ccf6e; border-color: #3ccf6e; }
.modal-foot {
  margin-top: 2rem;
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---- editor ---- */
.editor-settings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  background: var(--panel);
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}
.editor-settings label { display: flex; flex-direction: column; gap: 0.3rem; font-weight: 600; }
.editor-buttons { grid-column: 1 / -1; display: flex; gap: 0.5rem; flex-wrap: wrap; }
select {
  font: inherit;
  padding: 0.45em 0.6em;
  border-radius: 6px;
  border: 1px solid #3a4590;
  background: #0a1240;
  color: var(--text);
}
.help { grid-column: 1 / -1; margin: 0; color: var(--muted); line-height: 1.6; }
.help code { background: #0a1240; padding: 0.1em 0.4em; border-radius: 4px; color: var(--text); }

/* Categories share the full width (auto-fit stretches them; they wrap when there isn't room). */
.editor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.cat-editor {
  background: var(--panel);
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.cat-editor .cat-head { display: flex; gap: 0.5rem; align-items: center; }
.cat-editor .cat-head input { font-weight: 700; text-transform: uppercase; }
.cat-editor .cat-head button { padding: 0.2em 0.7em; }
.cat-grip { flex-shrink: 0; cursor: grab; color: var(--muted); font-size: 1.3rem; line-height: 1; padding: 0.2rem 0.1rem; user-select: none; }
.cat-grip:hover { color: var(--gold); }
.cat-editor.dragging { opacity: 0.35; }
.cat-editor.drop-before { box-shadow: -6px 0 0 var(--gold); }
.cat-editor.drop-after { box-shadow: 6px 0 0 var(--gold); }
.prompt-editor label { font-weight: 700; color: var(--gold); font-size: 0.9rem; }
.prompt-editor textarea { resize: vertical; min-height: 4.5em; margin-top: 0.25rem; }
.blanks { font-size: 0.8rem; color: var(--muted); margin-top: 0.2rem; min-height: 1em; }
.blanks .chip {
  display: inline-block;
  background: #2a3590;
  color: var(--text);
  border-radius: 999px;
  padding: 0 0.6em;
  margin: 0.1em 0.2em 0 0;
}
.blanks .warn { color: #ffb86b; }

/* ---- audience display ---- */
body.display {
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  gap: 1rem;
  overflow: hidden;
}
.display-title {
  margin: 0;
  text-align: center;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(1.5rem, calc(4 * var(--vw, 1vw)), 3.5rem);
  text-shadow: 3px 3px 0 #000;
}
body.display .board { flex: 1; min-height: 0; }
body.display .cell { min-height: 0; }
body.display .cell.header {
  font-size: clamp(1.3rem, calc(2.9 * var(--vw, 1vw)), 2.7rem);
  line-height: 1.1;
  min-height: clamp(4.5rem, 14vh, 9rem); /* room around the name, not just its height */
  padding: 0.75rem 1rem;
}
body.display .cell.value { font-size: clamp(1.8rem, calc(5 * var(--vw, 1vw)), 4.5rem); cursor: default; }
/* Scoreboard spans the full width; teams share it evenly, name on the left, score on the right. */
.display-teams { flex-wrap: nowrap; gap: 6px; }
.display-teams .team {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 2rem;
  border-radius: 8px;
}
.team-label {
  font-size: clamp(1.4rem, calc(2.8 * var(--vw, 1vw)), 2.6rem);
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.display-teams .score { font-size: clamp(2rem, calc(4.2 * var(--vw, 1vw)), 4rem); margin: 0; line-height: 1.1; }
/* Score changes: a floating "+250" / "−75" over the score and a glow around the team's box. */
.display-teams .team { position: relative; }
.score-delta {
  position: absolute;
  bottom: 85%;
  right: 2rem;
  font-family: "Anton", "Oswald", "Arial Narrow", sans-serif;
  font-size: clamp(2rem, calc(4.5 * var(--vw, 1vw)), 4rem);
  text-shadow: 3px 3px 0 #000;
  pointer-events: none;
  animation: float-up 1.9s ease-out forwards;
}
.display-teams .team:first-child .score-delta { right: auto; left: 2rem; }
.score-delta.up { color: #3ccf6e; }
.score-delta.down { color: #ff6b6b; }
@keyframes float-up {
  0% { opacity: 0; transform: translateY(30px) scale(0.7); }
  15% { opacity: 1; transform: translateY(0) scale(1.15); }
  100% { opacity: 0; transform: translateY(-90px) scale(1); }
}
.display-teams .team.gain { animation: glow-gain 1.6s ease-out; }
.display-teams .team.loss { animation: glow-loss 1.6s ease-out; }
@keyframes glow-gain {
  0% { border-color: #3ccf6e; box-shadow: 0 0 0 0 rgba(60, 207, 110, 0.9), inset 0 0 40px rgba(60, 207, 110, 0.5); }
  100% { box-shadow: 0 0 0 22px rgba(60, 207, 110, 0), inset 0 0 0 rgba(60, 207, 110, 0); }
}
@keyframes glow-loss {
  0% { border-color: #ff6b6b; box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.9), inset 0 0 40px rgba(255, 107, 107, 0.4); }
  100% { box-shadow: 0 0 0 22px rgba(255, 107, 107, 0), inset 0 0 0 rgba(255, 107, 107, 0); }
}
/* Mirror the first team so scores sit on the outer edges and names meet in the middle. */
.display-teams .team:first-child { flex-direction: row-reverse; }
.corner-buttons { position: fixed; top: 0.75rem; right: 0.75rem; display: flex; gap: 0.5rem; z-index: 20; }
.corner-buttons button { opacity: 0.4; }
.corner-buttons button:hover { opacity: 1; }
#sound.needs-click { opacity: 1; animation: wobble 0.6s ease-in-out infinite alternate; }
/* Audience screen (display.js): the corner buttons and pointer hide while the mouse is still, except a
   sound button waiting for its click and a remote screen that's lost its connection. */
.corner-buttons > * { transition: opacity 0.4s; }
body.display:not(.awake) { cursor: none; }
body.display:not(.awake) .corner-buttons > * { opacity: 0; pointer-events: none; }
body.display:not(.awake) .corner-buttons > #sound.needs-click,
body.display:not(.awake) .corner-buttons > .remote-status:is(.connecting, .reconnecting, .not-found, .offline) {
  opacity: 1;
  pointer-events: auto;
}

/* The audience pop-up is one fixed-size box whatever it shows; display.js shrinks text to fit. */
.stage .modal-card {
  width: min(1400px, 92vw);
  height: min(760px, 80vh);
  max-height: none;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative; /* for the "Prompt by" corner */
}
.stage .modal-body {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#stage-content { width: 100%; }
/* Everything on the audience screen is in capitals, whatever case it was typed in. */
body.display, body.display * { text-transform: uppercase; }
/* The audience screen's text sizes follow --vw: 1vw on a TV-shaped screen (16:9) or a taller one, so a
   projector or TV is unchanged, but limited by the height on anything wider (a phone held sideways), so
   nothing is cut off at the bottom. The host page doesn't set it, so its sizes stay plain vw. */
body.display { --vw: min(1vw, calc(100vh * 16 / 9 / 100)); }
.stage .modal-head { font-size: clamp(1.3rem, calc(2.5 * var(--vw, 1vw)), 2.2rem); }
.stage .modal-body { font-size: clamp(2rem, calc(4.5 * var(--vw, 1vw)), 4rem); line-height: 1.6; }
.blank {
  display: inline-block;
  min-width: 4em;
  padding: 0 0.3em;
  border-bottom: 0.12em solid var(--gold);
  color: var(--muted);
  font-size: 0.6em;
  font-style: italic;
  font-weight: 600;
  text-shadow: none;
  vertical-align: baseline;
}
.stage-wait { text-transform: uppercase; padding: 2rem 0; }
.stage-wait-value { color: var(--gold); font-size: 2.5em; line-height: 1.2; }
/* How many improvisers the scene is for (castLabel in common.js) */
.modal-head { align-items: center; gap: 1rem; }
.cast-note { color: #fff; letter-spacing: 0.04em; white-space: nowrap; }
.cast-note:empty { display: none; }
.cast-icons { filter: grayscale(1) brightness(3); letter-spacing: -0.15em; margin-right: 0.15em; }
.stage-ask { margin-top: 1.5rem; }
.stage-ask-label { color: var(--muted); font-size: 0.6em; font-style: italic; }
.stage-ask-hint {
  display: inline-block;
  margin: 0.3em 0.25em 0;
  padding: 0.1em 0.7em;
  border: 0.08em solid var(--gold);
  border-radius: 999px;
  background: var(--blue-dark);
  font-size: 0.8em;
  text-transform: uppercase;
}
/* ---- ALL PLAY ---- */
.cell.value { position: relative; }
.cell.value.allplay-marker::after {
  content: "★";
  position: absolute;
  top: 4px;
  right: 8px;
  font-size: 1rem;
  color: #ff7ad9;
  text-shadow: none;
}
.cell.value.media-marker::after {
  content: "🎬";
  position: absolute;
  top: 4px;
  right: 8px;
  font-size: 0.9rem;
  text-shadow: none;
}
.cell.value.used::after { display: none; }
.allplay-splash {
  font-size: 2.4em;
  font-weight: 900;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  animation: wobble 0.8s ease-in-out infinite alternate;
}
@keyframes wobble {
  from { transform: rotate(-3deg) scale(1); }
  to { transform: rotate(3deg) scale(1.08); }
}
.allplay-sub { font-size: 0.5em; color: var(--muted); }
.allplay-label { color: #ff7ad9; text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.6em; }
.allplay-game { font-size: 1.6em; color: var(--gold); text-transform: uppercase; line-height: 1.3; }
.allplay-game.spinning { color: var(--text); opacity: 0.8; }
.allplay-desc {
  font-size: 0.55em;
  font-weight: 600;
  max-width: 40em;
  margin: 0.6em auto 0;
  line-height: 1.4;
}
.editor-settings h2 { margin: 0; color: var(--gold); font-size: 1.2rem; text-transform: uppercase; }
.editor-settings .full { grid-column: 1 / -1; }
.editor-settings textarea { resize: vertical; }

.pop { animation: pop 0.35s ease-out; }
@keyframes pop {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ---- host: show clock and scene timer ---- */
.title-block { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
/* Past the show length (SHOW_LENGTH_MS): red, as a cue to wrap up. */
.show-clock.overtime { color: #ff4d4d; }
.show-clock {
  color: var(--muted);
  font-family: "Anton", "Oswald", "Arial Narrow", sans-serif;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.timer-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 2px solid #2a3590;
  border-radius: 8px;
  background: var(--panel);
}
.timer-display {
  text-align: center;
  font-family: "Anton", "Oswald", "Arial Narrow", sans-serif;
  font-size: 3rem;
  line-height: 1.1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.timer-card.running { border-color: var(--gold); }
.timer-card.over { border-color: #ff6b6b; }
.timer-card.over .timer-display { color: #ff6b6b; animation: fade 1s ease-in-out infinite; }
.timer-buttons { display: flex; gap: 0.35rem; flex-wrap: wrap; justify-content: center; }
.timer-buttons button { padding: 0.3em 0.7em; }
.timer-buttons #timer-toggle { min-width: 6.5em; }
.timer-options { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; color: var(--muted); }
.timer-options label { display: flex; align-items: center; gap: 0.5rem; }
.timer-options select { padding: 0.2em 0.4em; }
.timer-options input[type="checkbox"] { width: auto; accent-color: var(--gold); }
/* Show length: when time's up, plus a button to call it early. */
.show-length-card { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
#force-time-up { font-size: 0.85rem; padding: 0.3em 0.8em; }
#force-time-up:disabled { opacity: 0.4; cursor: default; }
#force-time-up.armed { background: #ff6b6b; color: #1a1a1a; border-color: #ff6b6b; }

/* SCENE! button: ends the scene. Pulses in the last 15 seconds as a cue to wrap up. */
button.buzz {
  background: #e74c3c;
  border-color: #e74c3c;
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.timer-card .buzz { width: 100%; font-size: 1.3rem; padding: 0.55em; }
.timer-card.wrap-up .buzz, button.buzz.wrap-up { animation: buzz-pulse 0.8s ease-out infinite; }
@keyframes buzz-pulse {
  from { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.9); }
  to { box-shadow: 0 0 0 12px rgba(231, 76, 60, 0); }
}

/* Audience: the full-screen SCENE! when the host ends a scene. */
.scene-splash {
  position: fixed;
  inset: 0;
  z-index: 31; /* above everything, including round announcements */
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, #d6352a 0%, #6b0f0f 75%);
}
.scene-splash-text {
  font-family: "Anton", "Oswald", "Arial Narrow", sans-serif;
  font-size: clamp(5rem, calc(20 * var(--vw, 1vw)), 18rem);
  line-height: 1;
  color: #fff;
  text-shadow: 8px 8px 0 #000;
  letter-spacing: 0.02em;
}
.scene-splash-text.pop { animation: scene-slam 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
@keyframes scene-slam {
  0% { transform: scale(2.6); opacity: 0; }
  60% { transform: scale(0.94); opacity: 1; }
  100% { transform: scale(1); }
}

/* The audience's countdown: a pill at the top of the screen during scenes. */
.audience-timer {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12; /* above the prompt pop-up, below round announcements */
  padding: 0.1em 0.7em;
  border: 4px solid var(--gold);
  border-radius: 999px;
  background: var(--blue-dark);
  color: var(--gold);
  font-family: "Anton", "Oswald", "Arial Narrow", sans-serif;
  font-size: clamp(2rem, calc(4.5 * var(--vw, 1vw)), 3.5rem);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  text-shadow: 2px 2px 0 #000;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
}
.audience-timer.paused { opacity: 0.6; }
.audience-timer.over { color: #fff; background: #c0392b; border-color: #ff6b6b; animation: fade 1s ease-in-out infinite; }

/* "Edit prompts" lights up while the editor is open. */
.topbar .tab.active { background: var(--gold); color: #1a1a1a; }

/* The bar across the top of the editor: the show, its health check, and the way back.
   It stays in view while scrolling. */
.editor-bar {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  padding: 0.75rem 1.25rem;
  border: 2px solid var(--gold);
  border-left-width: 8px;
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  font-size: 1.05rem;
}
.editor-bar-text { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.editing-teams { color: var(--muted); }
.editor-health { font-size: 0.95rem; font-weight: 600; }
.editor-health.ok { color: #3ccf6e; }
.editor-health.todo { color: #ffb86b; }
.editor-bar-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.editor-bar-actions button { font-size: 1rem; padding: 0.55em 1.1em; }
.timer-defaults { display: flex; flex-direction: column; gap: 0.35rem; margin: -0.25rem 0 1rem; font-size: 0.85rem; color: var(--muted); }
.timer-defaults .linklike { align-self: flex-start; font-size: 0.85rem; }
.timer-defaults .ok { color: #3ccf6e; }
.bar-save-state { font-size: 0.9rem; font-weight: 600; white-space: nowrap; }
.bar-save-state.saved { color: #3ccf6e; }
.bar-save-state.unsaved { color: #ffb86b; }

/* The editor reuses the Manage Shows look (numbered sections, prompt boxes). */
#view-editor label, #view-library .prompt-form label { display: flex; flex-direction: column; gap: 0.3rem; font-weight: 600; }
#view-editor .cat-editor { background: #0a1240; }
#view-editor .cat-editor input.cat-name { text-transform: none; font-weight: 700; }
/* Each prompt (a board square or a Final scene) sits on its own tile, so it's clear where one ends and the next begins. */
#view-editor .b-prompt.tile {
  background: var(--panel);
  border: 1px solid #2a3590;
  border-left: 4px solid var(--gold);
  border-radius: 6px;
  padding: 0.55rem 0.7rem 0.45rem;
}
#view-editor .b-prompt.tile label { font-weight: 800; }
#view-editor .b-prompt.tile { display: flex; flex-direction: column; box-sizing: border-box; }
#view-editor .b-prompt.tile .tile-text, #view-editor .b-prompt.tile .tile-empty { flex: 1; }
#view-editor .b-prompt.tile[draggable="true"] { cursor: grab; }
#view-editor .b-prompt.tile.editing { border-color: var(--gold); }
#view-editor .b-prompt.tile.empty { background: transparent; border-style: dashed; border-left-style: solid; border-left-color: #2a3590; }
#view-editor .b-prompt.tile.dragging { opacity: 0.35; }
#view-editor .b-prompt.tile.drop-here { outline: 2px dashed var(--gold); outline-offset: 2px; background: #1a2470; }
.tile-head { display: flex; align-items: center; gap: 0.4rem; }
.tile-head label { flex: 1; }
.tile-head .edit, .tile-head .remove { font-size: 0.85rem; }
.tile-head button { white-space: nowrap; flex-shrink: 0; }
.tile-head label { min-width: 0; }
.tile-head .ap-toggle { color: var(--muted); font-size: 0.95rem; text-decoration: none; }
.tile-head .ap-toggle:hover { color: var(--gold); }
.tile-head .ap-toggle.on { color: var(--gold); }
.ap-badge { align-self: flex-start; margin-top: 0.3rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; color: #1a1a1a; background: var(--gold); border-radius: 999px; padding: 0.05em 0.6em; }
#view-editor .b-prompt.tile.allplay { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.tile-head .remove { color: var(--muted); }
.tile-head .remove[data-confirm] { color: #ff6b6b; }
.drag-grip { color: var(--muted); font-size: 1rem; line-height: 1; }
.tile-text { margin-top: 0.3rem; line-height: 1.5; }
.tile-text .chip { display: inline-block; background: #2a3590; border-radius: 999px; padding: 0 0.55em; color: var(--gold); }
.tile-empty { color: var(--muted); font-style: italic; margin: 0.3rem 0; }
.tile-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.tile-actions button { padding: 0.3em 0.7em; font-size: 0.85rem; }

/* The library picker for an empty square. */
.connect-card.pick-card { width: min(44rem, 100%); text-align: left; display: flex; flex-direction: column; max-height: 90vh; }
.pick-card h2 { margin-bottom: 0.2rem; }
.pick-sub { color: var(--muted); margin: 0 0 0.75rem; }
.pick-filters { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.75rem; }
.pick-filters input[type="search"] { flex: 1; min-width: 12rem; }
.pick-filters label { color: var(--muted); font-size: 0.9rem; white-space: nowrap; }
.pick-filters label { display: flex; align-items: center; gap: 0.35rem; }
.pick-filters label[hidden] { display: none; }
.pick-filters input[type="checkbox"] { width: auto; margin: 0; }
.pick-list { overflow-y: auto; display: flex; flex-direction: column; gap: 0.5rem; min-height: 6rem; }
.pick-item { display: flex; gap: 0.75rem; align-items: center; padding: 0.6rem 0.8rem; background: #0a1240; border: 1px solid #2a3590; border-radius: 8px; }
.pick-item.used { opacity: 0.7; }
.pick-text { flex: 1; min-width: 0; }
#view-editor .editor-buttons { margin-bottom: 0.6rem; }
.secondary-actions button, .secondary-actions .button-like { font-size: 0.9rem; padding: 0.35em 0.8em; }
.prompt-label { color: var(--gold); font-size: 0.9rem; }

/* Round tabs in the editor, each saying what it holds and whether anything needs fixing. */
.edit-round-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.6rem; margin-bottom: 1rem; }
/* Name and what it holds on the left, "✓ ready" / "⚠ 2 to fix" on the right. */
.edit-round-tab {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.75rem;
  row-gap: 0;
  padding: 0.4rem 0.9rem;
  text-align: left;
  background: #0a1240;
  color: var(--text);
  border: 2px solid #2a3590;
  font-weight: 400;
}
.edit-round-tab b { font-size: 1.05rem; }
.edit-round-tab small { color: var(--muted); }
.edit-round-tab .tab-status { grid-column: 2; grid-row: 1 / span 2; font-size: 0.85rem; font-weight: 700; white-space: nowrap; }
.edit-round-tab.ok .tab-status { color: #3ccf6e; }
.edit-round-tab.todo .tab-status { color: #ffb86b; }
.edit-round-tab:hover { border-color: var(--gold); filter: none; }
.edit-round-tab.active { border-color: var(--gold); background: #16247a; box-shadow: inset 0 -4px 0 var(--gold); }

/* A dashed "+ add" bar (the ALL PLAY games list's "Add your own game"). */
.add-category-tile {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin: -0.5rem 0 0.75rem;
  padding: 0.7rem;
  background: transparent;
  color: var(--gold);
  border: 2px dashed #3a4590;
  font-size: 1.05rem;
}
.add-category-tile b { font-size: 1.6rem; line-height: 1; }
.add-category-tile:hover { border-color: var(--gold); filter: none; }

/* Folded-away settings ("Round settings", "More: game name"). */
.more-settings { margin-top: 0.5rem; }
.more-settings summary { cursor: pointer; color: var(--gold); font-weight: 700; padding: 0.3rem 0; }
.more-settings[open] summary { margin-bottom: 0.6rem; }

/* On wide screens the prompt pop-up covers only the board, so the sidebar (timer, scores,
   audience preview) stays visible during scenes. */
@media (min-width: 1101px) {
  #modal { right: calc(clamp(330px, 26vw, 480px) + 2.25rem); }
}

/* ---- host: top bar groups ---- */
.nav-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid #2a3590;
  border-radius: 8px;
}
.nav-label {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-right: 0.2rem;
}
/* Preparing shows: kept out of the way of the run controls, and quieter, since it isn't needed on the night. */
.nav-prep { border-style: dashed; opacity: 0.75; }
.nav-prep:hover, .nav-prep:focus-within, .nav-prep:has(.tab.active) { opacity: 1; }
/* "▶ Run the show" is only the way back from the prep pages, so it's hidden on the run page itself. */
.topbar .tab[data-view="board"].active { display: none; }
.nav-prep[hidden] { display: none; }
.nav-prep .tab { font-size: 0.85rem; padding: 0.3rem 0.6rem; }
.help-button { width: 2.4rem; height: 2.4rem; padding: 0; border-radius: 50%; font-size: 1.1rem; }

/* ---- host: progress through the show ---- */
.progress {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.progress-step { flex: 1 1 10rem; position: relative; display: flex; }
.progress-step button {
  width: 100%;
  min-height: 3.4rem; /* every step the same height, with or without a second line */
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  text-align: left;
  background: var(--panel);
  color: var(--text);
  border: 2px solid #2a3590;
  font-weight: 400;
}
.progress-step button:hover { border-color: var(--gold); filter: none; }
.progress-num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: #2a3590;
  font-weight: 800;
}
.progress-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.progress-text b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.progress-text small { color: var(--muted); }
.progress-step.current button { border-color: var(--gold); background: #16247a; cursor: default; }
.progress-step.current .progress-num { background: var(--gold); color: #1a1a1a; }
.progress-step.done .progress-num { background: #3ccf6e; color: #04210f; }
.progress-step.done .progress-text b { color: var(--muted); }

/* ---- host: what to do next ---- */
.guide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: 0.9rem 1.25rem;
  border: 2px solid var(--gold);
  border-left-width: 8px;
  border-radius: 10px;
  background: var(--panel);
}
.guide-text { flex: 1 1 28rem; display: flex; flex-direction: column; gap: 0.3rem; }
.guide-title { color: var(--gold); font-size: 1.3rem; font-weight: 800; }
.guide-detail { line-height: 1.45; }
.guide-checks { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.2rem; }
.guide-check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.15em 0.7em;
  border-radius: 999px;
  border: 1px solid;
  font-size: 0.85rem;
  font-weight: 600;
}
.guide-check.ok { color: #3ccf6e; border-color: #3ccf6e55; }
.guide-check.todo { color: #ffb86b; border-color: #ffb86b; }
.guide:not(.ready) .guide-check.ok { opacity: 0.6; }
.guide-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
button.big { font-size: 1.2rem; padding: 0.7em 1.4em; }
button.linklike {
  padding: 0;
  border: none;
  background: none;
  color: var(--gold);
  font-size: inherit;
  text-decoration: underline;
}

/* ---- host: board on the left, sidebar (preview, scores, reset) on the right ---- */
.board-view:not([hidden]) {
  display: grid;
  /* The sidebar grows with the screen (about a quarter of it) so the scores never get cramped. */
  grid-template-columns: minmax(0, 1fr) clamp(330px, 26vw, 480px);
  gap: 1.25rem;
  align-items: start;
}
.board-main { min-width: 0; }
.board-side { display: flex; flex-direction: column; gap: 0.6rem; }
.side-label, .preview-label { color: var(--muted); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.side-label { margin-top: 0.4rem; }
.board-side .teams { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.board-side .team { min-width: 0; padding: 0.75rem 0.5rem; }
.board-side .team .score { font-size: 2.4rem; }
.board-side .team .controls { flex-wrap: wrap; justify-content: center; }
.board-side .team .controls .amount { width: 4.5rem; }
.board-side #reset-board { align-self: flex-end; margin-top: 0.4rem; }
/* A slightly more compact board on the host, so everything fits on screen. */
.board-view .cell { min-height: 72px; }
@media (max-width: 1100px) {
  .board-view:not([hidden]) { grid-template-columns: minmax(0, 1fr); }
}

/* ---- host: live miniature of the audience screen ---- */
.preview-box { display: flex; flex-direction: column; gap: 0.3rem; }
.preview-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 2px solid #2a3590;
  border-radius: 6px;
  background: #02061f;
}
/* The audience page is laid out at 1600x900 and shrunk to fit (app.js sets --preview-scale). */
.preview-frame iframe {
  width: 1600px;
  height: 900px;
  border: 0;
  transform: scale(var(--preview-scale, 0.2));
  transform-origin: 0 0;
  pointer-events: none;
}
body.preview .corner-buttons { display: none; }


/* ---- host: how to run a show ---- */
.connect-card.help-card { width: min(44rem, 100%); text-align: left; }
.help-card h2 { text-align: center; }
.help-card h3 { margin: 1.1rem 0 0.4rem; color: var(--gold); font-size: 1rem; text-transform: uppercase; letter-spacing: 0.06em; }
.help-card ol, .help-card ul { margin: 0; padding-left: 1.4rem; line-height: 1.55; }
.help-card li { margin-bottom: 0.3rem; }
.connect-card.help-card p { color: var(--text); }
.help-card .connect-buttons { margin-top: 1.25rem; }

/* ---- remote screens (remote.js) ---- */
.remote-status {
  align-self: center;
  padding: 0.3em 0.8em;
  border-radius: 999px;
  border: 1px solid #3a4590;
  background: var(--blue-dark);
  color: var(--muted);
  font-size: 0.85rem;
  white-space: nowrap;
}
.remote-status.connected { color: #3ccf6e; border-color: #3ccf6e; }
.remote-status.reconnecting, .remote-status.connecting { color: var(--gold); border-color: var(--gold); }
.remote-status.not-found, .remote-status.offline { color: #ff6b6b; border-color: #ff6b6b; }

.join-panel, .connect-panel {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.8);
}
.join-card, .connect-card {
  width: min(34rem, 100%);
  max-height: 95vh;
  overflow: auto;
  padding: 2rem;
  border: 3px solid var(--gold);
  border-radius: 12px;
  background: var(--panel);
  text-align: center;
}
.join-card h2, .connect-card h2 { margin: 0 0 0.5rem; color: var(--gold); }
.join-card p, .connect-card p { color: var(--muted); line-height: 1.5; }
#join-code {
  margin: 0.5rem 0 1rem;
  font-family: "Anton", "Oswald", "Arial Narrow", sans-serif;
  font-size: 2.5rem;
  letter-spacing: 0.3em;
  text-align: center;
  text-transform: uppercase;
}
.join-buttons, .connect-buttons { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
.join-message { min-height: 1.5em; color: var(--gold) !important; }

.room-code {
  margin: 0.25rem 0 0.75rem;
  font-family: "Anton", "Oswald", "Arial Narrow", sans-serif;
  font-size: clamp(3rem, calc(10 * var(--vw, 1vw)), 4.5rem);
  letter-spacing: 0.25em;
  color: var(--gold);
  text-shadow: 3px 3px 0 #000;
}
.room-qr { width: 12rem; margin: 0 auto 0.75rem; background: #fff; border-radius: 8px; padding: 0.4rem; }
.room-qr svg { display: block; width: 100%; height: auto; }
.room-link { word-break: break-all; font-size: 0.9rem; }
.room-link a { color: var(--gold); }
.room-status { font-weight: 700; }

/* ---- Show editor sections (numbered steps, prompt boxes, game list) ---- */
a.button-like { text-decoration: none; display: inline-block; }
.builder-step { background: var(--panel); border-radius: 10px; padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; }
.builder-step h2 {
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  color: var(--gold);
  font-size: 1.35rem;
}
.builder-step h2 small { color: var(--muted); font-weight: 400; font-size: 0.95rem; }
.builder-step summary { cursor: pointer; color: var(--gold); font-weight: 700; font-size: 1.1rem; }
.builder-step[open] summary { margin-bottom: 1rem; }
.step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--gold);
  color: #1a1a1a;
  font-weight: 800;
}
.b-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.field-hint { color: var(--muted); font-size: 0.8rem; font-weight: 400; }

.save-message { margin: 0.25rem 0 0.75rem; padding: 0.6rem 0.9rem; border-left: 4px solid #3ccf6e; background: #0a1240; line-height: 1.5; word-break: break-word; }
.save-message .todo { color: #ffb86b; }
.save-message .conflict-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
/* Merging a teammate's save: the things you both changed, mine or theirs for each */
.merge-list { display: flex; flex-direction: column; gap: 0.6rem; margin: 0.6rem 0; }
.merge-item { padding: 0.5rem 0.75rem; background: #050b33; border-radius: 6px; }
.merge-what { color: var(--gold); font-weight: 700; margin-bottom: 0.25rem; }
#view-editor .merge-item label { flex-direction: row; align-items: baseline; gap: 0.5rem; font-weight: 400; cursor: pointer; }
.merge-item input { width: auto; accent-color: var(--gold); }

/* Team shows (team.js): who's signed in, above the show list */
.team-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: 1rem;
  padding: 0.55rem 0.9rem;
  border-left: 4px solid var(--gold);
  background: #0a1240;
  line-height: 1.5;
}

/* Step 1: three panels side by side (stacked on narrow screens) */
.show-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.show-panel { display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem 1.1rem; background: #0a1240; border-radius: 8px; }
.show-panel h3 { margin: 0; color: var(--muted); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }
.show-panel select { width: 100%; }
.panel-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.panel-buttons .push { margin-left: auto; }
/* Buttons in equal columns, e.g. Start fresh or use a file */
.panel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.panel-grid > * { display: flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap; }
/* One column when the panel is too narrow for two buttons side by side */
.show-panel { container-type: inline-size; }
@container (max-width: 420px) { .panel-grid { grid-template-columns: 1fr; } }
.panel-field { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; color: var(--muted); }
.panel-field input { width: 100%; }
.panel-status { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
.panel-status b { color: var(--text); }
.show-panel .linklike { align-self: flex-start; font-size: 0.85rem; }
.inbox-by { color: var(--muted); }

/* Submitted prompts (from the Google Form): one card per prompt with a "Put it in" square picker. */
.inbox-show-used { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--muted); font-size: 0.9rem; }
.inbox-show-used input { width: auto; accent-color: var(--gold); }
.inbox-count { color: var(--muted); font-size: 0.9rem; margin-left: auto; }
.inbox-list { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 0.75rem; }
.inbox-item { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.75rem 1rem; background: #0a1240; border-radius: 8px; }
.inbox-item.used { opacity: 0.6; }
.inbox-prompt { font-size: 1.05rem; line-height: 1.5; }
.inbox-prompt .chip { display: inline-block; background: #2a3590; border-radius: 999px; padding: 0 0.6em; color: var(--gold); }
.inbox-meta { color: var(--muted); font-size: 0.85rem; }
.inbox-notes { color: var(--muted); font-size: 0.9rem; font-style: italic; }
.inbox-used { color: #3ccf6e; font-size: 0.85rem; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.inbox-used .unuse { font-size: 0.8rem; padding: 0.2em 0.7em; }
.inbox-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.2rem; }
.inbox-actions label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--muted); flex: 1 1 22rem; }
.inbox-actions select { flex: 1; min-width: 0; }
.inbox-actions .use { padding: 0.35em 1em; }
.inbox-actions .delete { padding: 0.35em 0.7em; }
/* ---- the Prompt library page ---- */
.library-target { font-size: 0.95rem; color: var(--muted); }
.library-target b { color: var(--text); }
.library-target .linklike { margin-left: 0.4rem; font-size: 0.9rem; }
.prompt-form { border: 2px solid var(--gold); }
.prompt-form h2 { margin: 0 0 0.75rem; color: var(--gold); }
.prompt-form .b-prompt { margin-bottom: 1rem; }
.prompt-form-notes { margin-bottom: 1rem; }
.prompt-form-notes textarea { resize: vertical; }
.library-tools { padding: 1rem 1.25rem; }
.library-filters { display: grid; grid-template-columns: minmax(14rem, 2fr) repeat(3, minmax(9rem, 1fr)); gap: 0.6rem; }
@media (max-width: 800px) { .library-filters { grid-template-columns: 1fr 1fr; } .library-filters input { grid-column: 1 / -1; } }
.library-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.75rem; }
.library-actions .button-like, .library-actions button { font-size: 0.9rem; padding: 0.4em 0.9em; }
.library-tools .save-message { margin: 0.75rem 0 0; }
.library-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr)); gap: 0.75rem; }
.library-list .inbox-item { background: var(--panel); border: 1px solid #2a3590; }
.library-empty { padding: 1.5rem; text-align: center; }
.inbox-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.inbox-tools { display: flex; align-items: center; gap: 0.6rem; }
.inbox-tools .linklike { font-size: 0.85rem; }
.inbox-tools .delete { padding: 0.15em 0.6em; font-size: 0.85rem; }
.source-badge { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.15em 0.6em; border-radius: 999px; }
.source-badge.form { background: #1d3a7a; color: #9cc3ff; }
.source-badge.written { background: #4a3a0a; color: var(--gold); }
.source-badge.show { background: #2c1f55; color: #c7b3ff; }
.from-show-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.from-show-row select { flex: 1 1 22rem; min-width: 0; }
.inbox-actions { margin-top: auto; padding-top: 0.3rem; }
.inbox-actions label { flex-direction: row; align-items: center; font-weight: 400; }
/* The square menu fits the card however long the squares' prompts are; Use stays beside it. */
.library-list .inbox-actions { flex-wrap: nowrap; }
.library-list .inbox-actions label { flex: 1 1 auto; min-width: 0; }
.library-list .inbox-actions select { width: 100%; min-width: 0; text-overflow: ellipsis; }

/* ALL PLAY game list: one card per game with its own name and description boxes. */
.game-list { display: flex; flex-direction: column; gap: 0.6rem; }
.game-row {
  display: grid;
  grid-template-columns: 2rem minmax(10rem, 16rem) minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: start;
  padding: 0.6rem;
  background: #0a1240;
  border-radius: 8px;
}
.game-num { align-self: start; padding-top: 0.45rem; text-align: center; color: var(--gold); font-weight: 700; font-size: 1.1rem; }
.game-row .game-name { font-weight: 700; }
.game-row .game-desc { resize: none; overflow: hidden; min-height: 2.3rem; }
.game-delete { padding: 0.35em 0.7em; background: transparent; color: var(--muted); border: 1px solid #3a4590; }
.game-delete:hover { color: #fff; background: #b3261e; border-color: #b3261e; filter: none; }
.game-list .add-category-tile { margin: 0.2rem 0 0; }
/* In the half-width column: number, name and ✕ on one line, the description under them. */
.game-columns .game-row { grid-template-columns: 2rem minmax(0, 1fr) auto; }
.game-columns .game-row .game-desc { grid-column: 2 / 4; grid-row: 2; }
.game-columns .game-row .game-delete { grid-column: 3; grid-row: 1; }

/* Section ④: the show's games beside the game library. */
.game-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; margin-bottom: 1rem; }
@media (max-width: 1100px) { .game-columns { grid-template-columns: minmax(0, 1fr); } }
/* Side by side, the library stays in view (below the editor's top bar) while the show's list scrolls. */
@media (min-width: 1101px) {
  .game-columns > .game-column:last-child { position: sticky; top: 7rem; align-self: start; }
  .game-columns .game-library { max-height: max(18rem, calc(100vh - 17rem)); }
}
.game-column > .help { margin: 0 0 0.6rem; }
.game-heading { margin: 0 0 0.3rem; color: var(--gold); font-size: 1.1rem; }
.game-heading span { color: var(--muted); font-weight: 400; font-size: 0.9rem; }
.library-tools { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.6rem; }
.chip-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.type-chip { padding: 0.25em 0.8em; font-size: 0.85rem; border-radius: 999px; background: transparent; color: var(--gold); border: 1px solid #3a4590; }
.type-chip.active { background: var(--gold); color: #1a1a1a; border-color: var(--gold); }
.game-library {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 34rem;
  overflow-y: auto;
  padding-right: 0.3rem;
}
.lib-divider { margin: 0.6rem 0 0.1rem; color: var(--muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.lib-divider:first-child { margin-top: 0; }
.lib-game {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  text-align: left;
  font-weight: 400;
  background: #0a1240;
  color: var(--text);
  border: 2px solid transparent;
  border-radius: 8px;
}
.lib-game:hover { border-color: #3a4590; filter: none; }
.lib-game.on { border-color: var(--gold); background: #1a2470; }
/* The + and ✓ are drawn with CSS so they sit exactly in the middle of the circle whatever the font. */
.lib-mark {
  flex: none;
  position: relative;
  width: 1.6rem;
  height: 1.6rem;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid #3a4590;
}
.lib-mark::before, .lib-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.7rem;
  height: 2px;
  border-radius: 1px;
  background: var(--gold);
  transform: translate(-50%, -50%);
}
.lib-mark::after { transform: translate(-50%, -50%) rotate(90deg); }
.lib-game.on .lib-mark { background: var(--gold); border-color: var(--gold); }
/* ✓: an L shape (bottom and right borders) turned 45°. */
.lib-game.on .lib-mark::before {
  width: 0.32rem;
  height: 0.62rem;
  background: none;
  border: solid #1a1a1a;
  border-width: 0 2.5px 2.5px 0;
  border-radius: 0;
  transform: translate(-50%, -62%) rotate(45deg);
}
.lib-game.on .lib-mark::after { display: none; }
.lib-text { display: flex; flex-direction: column; gap: 0.1rem; line-height: 1.35; }
.lib-text b { color: var(--text); }
.lib-text span { color: var(--muted); font-size: 0.88rem; }
.b-howto {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--gold);
  background: #0a1240;
  line-height: 1.7;
}
.b-howto code { background: var(--blue-dark); padding: 0.1em 0.4em; border-radius: 4px; }
.b-prompt label { color: var(--gold); font-size: 0.9rem; }
.prompt-row { display: flex; gap: 0.4rem; align-items: flex-start; margin-top: 0.25rem; }
.prompt-row textarea { flex: 1; resize: none; min-height: 3.2em; overflow: hidden; }
.b-check { font-size: 0.85rem; color: var(--muted); min-height: 1.3em; margin-top: 0.25rem; }
.b-check .ok { color: #3ccf6e; font-weight: 800; }
.b-check .chip { display: inline-block; background: #2a3590; color: var(--text); border-radius: 999px; padding: 0 0.6em; }
.b-check .warn { color: #ffb86b; }
.b-credit { font-size: 0.85rem; color: var(--gold); margin-top: 0.15rem; }
.b-credit .linklike { font-size: 0.8rem; margin-left: 0.5rem; }
.b-final-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ---- rounds ---- */
.round-tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.round-tab { background: transparent; color: var(--gold); }
.round-tab.active { background: var(--gold); color: #1a1a1a; }

.round-splash {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: radial-gradient(circle, #1530c0 0%, var(--blue-dark) 70%);
}
.round-splash-text {
  font-family: "Anton", "Oswald", "Arial Narrow", sans-serif;
  font-size: clamp(3rem, calc(11 * var(--vw, 1vw)), 10rem);
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 6px 6px 0 #000;
  letter-spacing: 0.02em;
}

/* ---- category introductions (audience) ---- */
/* Each category on a big board-blue card, like the board's own category headers. */
.cat-splash { flex-direction: column; gap: clamp(1rem, 3vh, 2.5rem); }
.cat-splash-count {
  font-family: "Anton", "Oswald", "Arial Narrow", sans-serif;
  color: var(--gold);
  font-size: clamp(1.1rem, calc(2.4 * var(--vw, 1vw)), 2.2rem);
  letter-spacing: 0.35em;
  margin-right: -0.35em; /* letter-spacing adds space after the last letter too */
  text-transform: uppercase;
  text-shadow: 3px 3px 0 #000;
}
.cat-card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(90vw, 70rem);
  min-height: 40vh;
  padding: 2rem 3rem;
  background: var(--blue, #0a1a8c);
  border: 6px solid #000;
  box-shadow: 0 0 0 4px var(--gold), 0 20px 60px rgba(0, 0, 0, 0.6);
}
.cat-splash-name {
  font-family: "Anton", "Oswald", "Arial Narrow", sans-serif;
  font-size: clamp(3rem, calc(9 * var(--vw, 1vw)), 9rem);
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 6px 6px 0 #000;
  overflow-wrap: break-word;
}
.cat-dots { display: flex; gap: 0.8rem; }
.cat-dots span { width: 0.9rem; height: 0.9rem; border-radius: 50%; border: 2px solid var(--gold); }
.cat-dots span.on { background: var(--gold); }

/* ---- intro (audience) ---- */
.intro {
  position: fixed;
  inset: 0;
  z-index: 15; /* above the board, below the sound/full-screen buttons */
  /* Three bands: empty top, the title group in the exact middle, the matchup below. Equal top and
     bottom bands keep the title centered whatever the matchup holds. */
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  padding: 2rem 2rem 3vh;
  text-align: center;
  background: radial-gradient(circle at 50% 50%, #1530c0 0%, var(--blue-dark) 55%, #02061f 100%);
  font-family: "Anton", "Oswald", "Arial Narrow", sans-serif;
}
.intro-main { grid-row: 2; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.intro-bottom {
  grid-row: 3;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: clamp(2rem, 9vh, 6rem);
}
.intro-matchup { display: flex; flex-direction: column; align-items: center; gap: 1rem; width: 100%; }
/* letter-spacing adds space after the last letter too; take it back so the words are truly centered */
.intro-matchup-label span { margin-right: -0.4em; }
/* "TONIGHT'S CONTEST" between two thin gold lines */
.intro-matchup-label {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--gold);
  font-size: clamp(1rem, calc(1.8 * var(--vw, 1vw)), 1.6rem);
  letter-spacing: 0.4em;
  text-shadow: 2px 2px 0 #000;
}
.intro-matchup-label::before, .intro-matchup-label::after {
  content: "";
  width: clamp(2rem, 8vw, 7rem);
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.intro-matchup-label::after { background: linear-gradient(90deg, var(--gold), transparent); }
.intro-kicker { color: var(--muted); text-transform: uppercase; letter-spacing: 0.35em; font-size: clamp(1.2rem, calc(2.5 * var(--vw, 1vw)), 2.2rem); }
.intro-title {
  font-size: clamp(4rem, calc(14 * var(--vw, 1vw)), 13rem);
  line-height: 1;
  color: var(--gold);
  text-transform: uppercase;
  text-shadow: 6px 6px 0 #000;
  animation: breathe 3s ease-in-out infinite;
}
.intro-subtitle {
  font-size: clamp(1.3rem, calc(3 * var(--vw, 1vw)), 2.8rem);
  letter-spacing: 0.3em;
  text-shadow: 3px 3px 0 #000;
}
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
/* Names hug the VS and the whole line is centered. display.js (centerIntroVs) adds a little space beside
   the shorter name to pull the VS toward the middle; with very uneven names the VS drifts a bit. */
.intro-teams {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 0.8em;
  line-height: 1;
  font-size: clamp(1.6rem, calc(3.5 * var(--vw, 1vw)), 3rem);
  text-transform: uppercase;
  text-shadow: 3px 3px 0 #000;
}
.intro-teams .vs { color: var(--gold); font-size: 0.7em; }
.intro-teams > span { white-space: nowrap; }
/* A long name wrapped by display.js: break between words only, with lines evened out. */
.intro-teams > span.wrapped {
  white-space: normal;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  text-wrap: balance;
  text-align: center;
  line-height: 1.05;
}
.intro-soon { color: var(--muted); font-size: clamp(1rem, calc(2 * var(--vw, 1vw)), 1.6rem); animation: fade 2.4s ease-in-out infinite; }
@keyframes fade {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}
.intro-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border: 2px solid var(--gold);
  border-radius: 8px;
  background: var(--panel);
  font-weight: 600;
}

/* ---- Final Jeopardy: audience ---- */
.final-view { flex: 1; min-height: 0; display: flex; }
.final-card {
  position: relative; /* for the winner's light rays */
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  background: var(--blue);
  border: 6px solid #000;
  border-radius: 8px;
  text-align: center;
  font-family: "Anton", "Oswald", "Arial Narrow", sans-serif;
  text-shadow: 3px 3px 0 #000;
  overflow: hidden;
}
.final-label { color: var(--gold); text-transform: uppercase; letter-spacing: 0.08em; font-size: clamp(1.4rem, calc(3 * var(--vw, 1vw)), 2.6rem); }
.final-category { text-transform: uppercase; font-size: clamp(3rem, calc(9 * var(--vw, 1vw)), 8rem); line-height: 1; }
.final-category.small { font-size: clamp(2rem, calc(5 * var(--vw, 1vw)), 4.5rem); }
.final-note { color: var(--muted); font-size: clamp(1.2rem, calc(2.4 * var(--vw, 1vw)), 2rem); text-shadow: none; }
.final-card .stage-ask { font-size: clamp(2rem, calc(4.5 * var(--vw, 1vw)), 4rem); margin-top: 0; }
.final-card .blank {
  display: inline-block;
  padding: 0 0.3em;
  border-bottom: 0.12em solid var(--gold);
  color: var(--muted);
  font-size: 0.7em;
  font-style: italic;
  text-shadow: none;
}

.final-scenes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; width: 100%; }
.final-scene {
  background: var(--blue-dark);
  border: 3px solid var(--gold);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.final-scene-label { color: var(--gold); text-transform: uppercase; letter-spacing: 0.06em; font-size: clamp(1.2rem, calc(2.4 * var(--vw, 1vw)), 2.2rem); }
.final-scene-text { font-size: clamp(1.4rem, calc(3 * var(--vw, 1vw)), 2.8rem); line-height: 1.35; }
.final-scene-text .filled { color: var(--gold); text-decoration: underline; text-underline-offset: 0.15em; }
/* The Final's scenes one at a time: big on the audience screen, one card in the host's step */
.final-scene.solo { width: min(100%, 72rem); padding: 1.75rem 2.25rem; gap: 1rem; }
.final-scene.solo .final-scene-text { font-size: clamp(2rem, calc(4.6 * var(--vw, 1vw)), 4.2rem); line-height: 1.3; }
.final-scenes.single { grid-template-columns: 1fr; }
.winner-name { text-transform: uppercase; font-size: clamp(3rem, calc(10 * var(--vw, 1vw)), 9rem); line-height: 1; color: var(--gold); }
.winner-score { font-size: clamp(2rem, calc(5 * var(--vw, 1vw)), 4.5rem); }

/* One winner: slowly turning gold rays behind a trophy, and the name glowing. With .celebrate (the moment
   the host reveals the winner) "And the winner is…" pulses through a drumroll, then on --reveal (the
   drumroll's crash in sounds/winner.wav; WINNER_REVEAL_MS in display.js) the trophy drops, the name
   lands and the rays come up; display.js counts the score up and drops confetti to match. A tie gets
   none of this. */
.winner-card > :not(.winner-rays) { position: relative; z-index: 1; }
.winner-rays {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 180vmax;
  height: 180vmax;
  margin: -90vmax 0 0 -90vmax;
  background: repeating-conic-gradient(rgba(255, 204, 0, 0.12) 0deg 9deg, transparent 9deg 18deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 45%);
  mask-image: radial-gradient(circle, #000 0%, transparent 45%);
  animation: rays-turn 60s linear infinite;
  pointer-events: none;
}
.winner-trophy {
  font-size: clamp(3rem, calc(9 * var(--vw, 1vw)), 8rem);
  line-height: 1;
  text-shadow: none;
  filter: drop-shadow(0 0.08em 0 #000) drop-shadow(0 0 0.4em rgba(255, 204, 0, 0.5));
}
.winner-card .winner-name { text-shadow: 4px 4px 0 #000, 0 0 0.35em rgba(255, 204, 0, 0.45); }
.celebrate { --reveal: 3s; }
.celebrate .winner-label { animation: winner-rise 0.5s ease-out both, suspense 0.5s ease-in-out 0.5s 5; }
.celebrate .winner-rays { animation: winner-fade 0.8s ease-out var(--reveal) both, rays-turn 60s linear infinite; }
.celebrate .winner-trophy { animation: trophy-drop 0.9s cubic-bezier(0.3, 1.6, 0.5, 1) var(--reveal) both; }
.celebrate .winner-name {
  animation: name-zoom 0.8s cubic-bezier(0.2, 1.5, 0.4, 1) calc(var(--reveal) + 0.15s) both,
    name-glow 1.4s ease-in-out calc(var(--reveal) + 1s) 4;
}
.celebrate .winner-score { animation: winner-rise 0.5s ease-out calc(var(--reveal) + 0.8s) both; }
@keyframes suspense { 50% { transform: scale(1.06); color: #fff; } }
@keyframes winner-fade { from { opacity: 0; } }
@keyframes rays-turn { to { transform: rotate(360deg); } }
@keyframes winner-rise { from { opacity: 0; transform: translateY(0.6em); } }
@keyframes trophy-drop {
  from { opacity: 0; transform: translateY(-1.2em) scale(0.4) rotate(-20deg); }
  to { opacity: 1; transform: none; }
}
@keyframes name-zoom { from { opacity: 0; transform: scale(0.3); } }
@keyframes name-glow {
  50% { text-shadow: 4px 4px 0 #000, 0 0 0.6em rgba(255, 204, 0, 0.95), 0 0 1.2em rgba(255, 204, 0, 0.6); }
}

/* Confetti over the whole audience screen (display.js launchConfetti) */
.confetti { position: fixed; inset: 0; z-index: 30; overflow: hidden; pointer-events: none; }
.confetti i {
  position: absolute;
  top: -5vh;
  opacity: 0;
  animation-name: confetti-fall;
  animation-timing-function: cubic-bezier(0.3, 0.1, 0.6, 1);
  animation-fill-mode: both;
}
@keyframes confetti-fall {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--drift), 110vh) rotate(var(--spin)); }
}
@media (prefers-reduced-motion: reduce) {
  .winner-rays, .celebrate .winner-name { animation: none; }
}
.outro-thanks { text-transform: uppercase; font-size: clamp(3rem, calc(8 * var(--vw, 1vw)), 7.5rem); line-height: 1; color: var(--gold); }
.outro-body { display: flex; flex-direction: column; align-items: center; gap: clamp(1rem, 2.5vh, 2rem); }
.outro-qr {
  width: min(32vh, 32vw); /* leaves room for the text and the names below it */
  height: auto;
  image-rendering: pixelated; /* keep the modules sharp when scaled up */
  background: #fff;
  padding: 0.6rem;
  border: 6px solid #000;
  border-radius: 8px;
}
.outro-text { display: flex; flex-direction: column; gap: 0.5rem; }
/* Prompt writers' names scrolling right to left along the bottom of the thank-you screen. */
.ticker { width: 100%; display: flex; align-items: stretch; border: 4px solid var(--gold); background: #000; }
.ticker-label {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0.3em 0.8em;
  background: var(--gold);
  color: #000;
  text-shadow: none;
  text-transform: uppercase;
  font-size: clamp(1rem, calc(2 * var(--vw, 1vw)), 1.8rem);
}
.ticker-window { flex: 1; min-width: 0; overflow: hidden; }
.ticker-track { display: flex; width: max-content; animation: ticker linear infinite; }
.ticker-copy { display: flex; }
.ticker-name {
  padding: 0.25em 0;
  white-space: nowrap;
  text-transform: uppercase;
  font-size: clamp(1.4rem, calc(3 * var(--vw, 1vw)), 2.8rem);
}
/* The same space either side of each star, so every name sits exactly halfway between two. */
.ticker-name::after { content: "★"; color: var(--gold); margin: 0 1.5em; }
.ticker-name.invite { color: var(--gold); } /* "Your name here": no prompt writers tonight */
@keyframes ticker { to { transform: translateX(-50%); } }
.outro-cta { text-transform: uppercase; font-size: clamp(1.8rem, calc(4 * var(--vw, 1vw)), 3.6rem); line-height: 1.1; }

/* ---- Final Jeopardy: host ---- */
.final-host {
  background: var(--panel);
  border: 3px solid var(--gold);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.final-host-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-family: "Anton", "Oswald", "Arial Narrow", sans-serif;
  font-size: 1.6rem;
  text-transform: uppercase;
  color: var(--gold);
}
/* The Final's four steps, top to bottom, each card holding its own controls. */
.final-flow { display: flex; flex-direction: column; gap: 0.75rem; }
.final-step { border: 2px solid #2a3590; border-radius: 8px; padding: 0.75rem 1rem; background: #0a1240; }
.final-step.current { border-color: var(--gold); background: #16247a; }
.final-step.upcoming { opacity: 0.55; }
.final-step-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; font-size: 1.1rem; }
.final-step-num {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 1.8rem; height: 1.8rem; border-radius: 50%;
  background: #2a3590; color: var(--text); font-weight: 800; font-size: 0.95rem;
}
.final-step.current .final-step-num { background: var(--gold); color: #1a1a1a; }
.final-step.done .final-step-num { background: #3ccf6e; color: #04210f; }
.final-step-state { color: var(--gold); font-size: 0.85rem; }
.final-goto { margin-left: auto; font-size: 0.8rem; padding: 0.25em 0.7em; }
.final-step-body { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.75rem; }
/* Earlier steps fold down to their heading; the controls stay reachable through "Go back". */
.final-step.done .final-step-body { display: none; }
.final-next { align-self: flex-start; }
.final-category-line { font-size: 1.1rem; }
.final-category-line b { color: var(--gold); text-transform: uppercase; }
.final-wagers { display: flex; flex-direction: column; gap: 0.5rem; }
.final-wager { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.final-team-name { font-weight: 700; min-width: 9rem; }
.final-team-score { color: var(--gold); font-weight: 800; min-width: 4.5rem; }
.final-wager input { width: 8rem; font-size: 1.1rem; }
.final-wager small { color: var(--muted); }
.final-word { display: flex; flex-direction: column; gap: 0.3rem; font-weight: 600; max-width: 30rem; }
.final-word input { font-size: 1.3rem; }
.final-host .final-scene-text { font-size: 1.2rem; }
.final-host .final-scene-label { font-size: 1.1rem; }
.final-host .final-scene { display: flex; flex-direction: column; gap: 0.6rem; }
.final-host .final-scene.won { border-color: #3ccf6e; }
.final-host .final-scene.lost { border-color: #ff6b6b; }
.final-scene-result { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: auto; font-size: 0.95rem; }
.final-scene-result span { margin-right: auto; color: var(--muted); }
.final-scene-result span b { color: var(--gold); }
.final-scene-result button { padding: 0.35em 0.8em; }
.final-scene-result button.awarded { background: #3ccf6e; border-color: #3ccf6e; color: #04210f; }
button.lost { background: #ff6b6b; border-color: #ff6b6b; }
.final-standings { display: flex; flex-direction: column; gap: 0.4rem; max-width: 26rem; }
.final-standing { display: flex; justify-content: space-between; padding: 0.4rem 0.75rem; border-radius: 6px; background: #0e1a6a; font-weight: 700; }
.final-standing b { color: var(--gold); }
.final-standing.top { outline: 2px solid var(--gold); }

@media (max-width: 700px) {
  .final-scenes { grid-template-columns: 1fr; }
  .b-final-grid { grid-template-columns: 1fr; }
  .editor-settings { grid-template-columns: 1fr; }
  .view { padding: 0.75rem; }
  .cell { min-height: 60px; }
}

/* ---- the run page: tonight's show (app.js renderRunShow) ---- */
.run-show { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-bottom: 1rem; padding: 0.6rem 1rem;
  background: var(--panel); border-radius: 10px; border-left: 6px solid #3ccf6e; }
.run-show.ready { border-left-color: var(--gold); }
.run-show-text { flex: 1 1 20rem; min-width: 0; }
.run-show-label { color: var(--muted); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; margin-right: 0.6rem; }
.run-show-from { color: var(--muted); font-size: 0.9rem; }
.run-load { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.run-load select { flex: 1 1 22rem; min-width: 0; }
.run-load-note { flex-basis: 100%; margin: 0; color: var(--muted); font-size: 0.9rem; }
.run-load-note .linklike, .run-load-note button { margin-left: 0.4rem; }

/* ---- Smaller screens: tablets and phones ----
   The game is laid out for a computer; these only apply below 1100px, so a laptop or desktop is unchanged.
   Good enough for a demo on a tablet or phone. */
.side-timer, .side-scores { display: contents; } /* the sidebar's groups don't affect the desktop layout */
@media (max-width: 1100px) {
  .side-timer, .side-scores { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
  .side-preview { min-width: 0; }
  .side-scores #reset-board { align-self: flex-end; }
}
/* Tablets: the preview and scores on the left, the timer on the right, instead of one long column. */
@media (min-width: 601px) and (max-width: 1100px) {
  .board-side {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "preview timer" "scores timer";
    gap: 1rem 1.25rem;
    align-items: start;
  }
  .side-preview { grid-area: preview; }
  .side-timer { grid-area: timer; }
  .side-scores { grid-area: scores; }
}
@media (max-width: 800px) {
  .library-filters > * { min-width: 0; }
}
/* Phones */
@media (max-width: 600px) {
  /* Top bar: one compact block of buttons. */
  .topbar { padding: 0.6rem 0.75rem; gap: 0.5rem; }
  .topbar h1 { font-size: 1.3rem; }
  .topbar nav { gap: 0.35rem; }
  .nav-group { border: none; padding: 0; gap: 0.35rem; }
  .nav-label { display: none; }
  .topbar nav button, .topbar nav .tab { font-size: 0.85rem; padding: 0.4em 0.7em; }
  .sound-control button { min-width: 0; }
  .sound-control input[type="range"] { width: 4.5rem; }
  .help-button { width: 2rem; height: 2rem; font-size: 0.95rem; }
  /* Run page: what the host needs most comes first. */
  .side-timer { order: 1; }
  .side-scores { order: 2; }
  .side-preview { order: 3; }
  /* The prompt pop-up */
  .modal-card { padding: 1.1rem; }
  .modal-head { flex-wrap: wrap; gap: 0.25rem 0.75rem; font-size: 1rem; margin-bottom: 1rem; }
  /* Editor and library: a slimmer bar that stays at the top. "Run the show" in the top bar does what the
     bar's way-back button does. */
  .editor-bar { padding: 0.5rem 0.75rem; gap: 0.5rem; font-size: 0.95rem; }
  .editor-bar-actions { gap: 0.4rem; }
  .editor-bar-actions button { font-size: 0.9rem; padding: 0.45em 0.8em; }
  .editor-bar-actions [data-view="board"] { display: none; }
  .editor-health { font-size: 0.85rem; }
  .library-filters { grid-template-columns: 1fr; }
}

/* Signed out on the team site: Edit shows and the prompt library show only the sign-in panel. */
.view.locked > :not(.signin-gate) { display: none !important; }
.signin-gate {
  max-width: 34rem;
  margin: 3rem auto;
  padding: 2rem;
  text-align: center;
  background: var(--panel);
  border: 2px solid var(--gold);
  border-radius: 12px;
}
.signin-gate h2 { margin: 0 0 0.5rem; color: var(--gold); }
.signin-gate p { margin: 0 0 1.25rem; }
.signin-gate .help { margin: 1rem 0 0; }

/* Audience screen on a short screen (a phone held sideways): the Final's screens tighten up so nothing is
   cut off at the top or bottom. Projectors and TVs are much taller, so they never get these. */
@media (max-height: 560px) {
  /* Intro: tighter spacing and smaller minimum sizes, so the matchup and "about to begin" fit below. */
  body.display .intro { padding: 0.75rem 1rem 0.5rem; }
  body.display .intro-main { gap: 0.35rem; }
  body.display .intro-bottom { padding-top: 0.75rem; gap: 0.5rem; }
  body.display .intro-matchup { gap: 0.4rem; }
  body.display .intro-kicker { font-size: clamp(0.85rem, calc(2.5 * var(--vw, 1vw)), 2.2rem); }
  body.display .intro-title { font-size: clamp(2.6rem, calc(14 * var(--vw, 1vw)), 13rem); text-shadow: 4px 4px 0 #000; }
  body.display .intro-subtitle { font-size: clamp(0.95rem, calc(3 * var(--vw, 1vw)), 2.8rem); }
  body.display .intro-matchup-label { font-size: clamp(0.75rem, calc(1.8 * var(--vw, 1vw)), 1.6rem); }
  body.display .intro-teams { font-size: clamp(1.15rem, calc(3.5 * var(--vw, 1vw)), 3rem); }
  body.display .intro-soon { font-size: clamp(0.75rem, calc(2 * var(--vw, 1vw)), 1.6rem); }
  body.display .final-card { padding: 0.75rem 1rem; gap: 0.5rem; }
  body.display .final-label { font-size: clamp(0.95rem, calc(3 * var(--vw, 1vw)), 2.6rem); }
  body.display .final-category { font-size: clamp(1.8rem, calc(9 * var(--vw, 1vw)), 8rem); }
  body.display .final-category.small { font-size: clamp(1.3rem, calc(5 * var(--vw, 1vw)), 4.5rem); }
  body.display .final-note { font-size: clamp(0.85rem, calc(2.4 * var(--vw, 1vw)), 2rem); }
  body.display .final-card .stage-ask { font-size: clamp(1.3rem, calc(4.5 * var(--vw, 1vw)), 4rem); }
  body.display .winner-trophy { font-size: clamp(1.8rem, calc(9 * var(--vw, 1vw)), 8rem); }
  body.display .winner-name { font-size: clamp(1.8rem, calc(10 * var(--vw, 1vw)), 9rem); }
  body.display .winner-score { font-size: clamp(1.3rem, calc(5 * var(--vw, 1vw)), 4.5rem); }
  body.display .final-scene.solo { padding: 0.75rem 1.25rem; gap: 0.4rem; }
  body.display .final-scene-label { font-size: clamp(0.85rem, calc(2.4 * var(--vw, 1vw)), 2.2rem); }
  body.display .final-scene.solo .final-scene-text { font-size: clamp(1.2rem, calc(4.6 * var(--vw, 1vw)), 4.2rem); }
  /* Thank you: the QR code beside the text instead of above it. */
  body.display .outro-thanks { font-size: clamp(1.6rem, calc(7 * var(--vw, 1vw)), 7.5rem); }
  body.display .outro-body { flex-direction: row; gap: 1.25rem; }
  body.display .outro-text { text-align: left; gap: 0.3rem; }
  body.display .outro-cta { font-size: clamp(1.1rem, calc(4 * var(--vw, 1vw)), 3.6rem); }
  body.display .outro-qr { width: min(40vh, 32vw); padding: 0.35rem; border-width: 4px; }
  body.display .ticker { border-width: 3px; }
  body.display .ticker-label { font-size: clamp(0.8rem, calc(2 * var(--vw, 1vw)), 1.8rem); }
  body.display .ticker-name { font-size: clamp(1rem, calc(3 * var(--vw, 1vw)), 2.8rem); }
}

/* ---- media squares: a picture or video, with optional text ---- */
/* Editor tile */
.tile-head .media-toggle { font-size: 0.95rem; text-decoration: none; filter: grayscale(1) opacity(0.6); }
.tile-head .media-toggle:hover, .tile-head .media-toggle.on { filter: none; }
.tile-head .media-toggle:disabled { filter: none; font-size: 0.75rem; color: var(--muted); }
#view-editor .b-prompt.tile.media { border-color: #7ad9ff; box-shadow: inset 0 0 0 1px #7ad9ff; }
.tile-media { margin-top: 0.4rem; border-radius: 6px; overflow: hidden; background: #000; }
.tile-media-file { display: block; width: 100%; max-height: 9rem; object-fit: contain; }
.tile-media-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.3rem 0.5rem; margin-top: 0.3rem; }
.tile-media-bar > * { white-space: nowrap; }
.media-badge { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; color: #04122e; background: #7ad9ff; border-radius: 999px; padding: 0.05em 0.6em; }
.tile-media-bar .remove-media { font-size: 0.8rem; color: var(--muted); }
.tile-media-note { font-size: 0.8rem; color: var(--muted); margin-top: 0.2rem; }
.tile-media-bar .remove-media[data-confirm] { color: #ff6b6b; }
/* Host prompt pop-up */
.modal-media { display: flex; justify-content: center; margin-bottom: 0.75rem; }
.modal-media .host-media { max-width: 100%; max-height: 40vh; border-radius: 8px; background: #000; box-shadow: 0 0 0 3px #000; }
.media-note { font-size: 0.95rem; color: var(--muted); text-shadow: none; font-weight: 600; margin-bottom: 0.5rem; }
.media-controls { display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.media-controls button { font-size: 0.95rem; }
/* Audience screen: the picture or video as big as it fits, its text underneath */
.stage-media { display: flex; justify-content: center; min-height: 0; }
/* Scaled to a set height (so a small picture still fills the screen), narrower if it's very wide. */
.stage-media-file { height: 52vh; width: auto; max-width: 100%; border-radius: 10px; border: 4px solid #000; background: #000; object-fit: contain; }
.stage-media.solo .stage-media-file { height: 62vh; }
.stage-media-text { margin-top: 0.6em; font-size: 0.8em; line-height: 1.35; }
@media (max-height: 560px) {
  body.display .stage-media-file { height: 44vh; }
  body.display .stage-media.solo .stage-media-file { height: 56vh; }
}
/* Shown: the picture or video fills the whole audience screen, on black, nothing else on top. */
.stage.media-full { background: #000; padding: 0; }
.stage.media-full .modal-card {
  width: 100vw;
  height: 100vh;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #000;
}
.stage.media-full .modal-head, .stage.media-full #stage-cast, .stage.media-full #stage-credit { display: none !important; }
.stage.media-full #stage-content, .stage.media-full .stage-media { width: 100%; height: 100%; }
.stage.media-full .stage-media-file,
body.display .stage.media-full .stage-media.solo .stage-media-file {
  width: 100%;
  height: 100%;
  max-width: none;
  border: 0;
  border-radius: 0;
  object-fit: contain;
}
/* Its optional text, under the picture or video (which shrinks to make room). */
.stage.media-full .stage-media { flex-direction: column; align-items: center; }
.stage.media-full .stage-media-file { flex: 1; min-height: 0; }
.stage-media-caption {
  flex-shrink: 0; width: 100%; box-sizing: border-box; padding: 0.35em 1em 0.45em; text-align: center;
  color: #fff; background: #000; font-size: clamp(1.4rem, 5.5vh, 4rem); line-height: 1.2; font-weight: 800;
}
.media-done-caption { margin-top: 0.5em; font-size: 0.6em; line-height: 1.3; }
.modal-media-caption { text-align: center; font-size: 1.15rem; font-weight: 700; margin: -0.25rem 0 0.75rem; }
.tile-caption { margin-top: 0.3rem; line-height: 1.4; font-style: italic; }
.tile-caption .chip, .modal-media-caption .chip { display: inline-block; background: #2a3590; border-radius: 999px; padding: 0 0.55em; color: var(--gold); font-style: normal; }
.tile-caption-edit { margin-top: 0.35rem; }
.tile-caption-edit textarea { width: 100%; box-sizing: border-box; resize: vertical; }
.tile-media-bar .caption-edit { font-size: 0.8rem; margin-left: auto; }
/* A media square's picture or video as a clue, beside "Give us …" while the audience is asked. */
.stage-clue { display: flex; align-items: center; justify-content: center; gap: 1.5em; width: 100%; }
.stage-clue-media { flex: 0 1 55%; min-width: 0; display: flex; justify-content: center; }
.clue-media-file { max-width: 100%; max-height: 58vh; border-radius: 10px; border: 4px solid #000; background: #000; object-fit: contain; }
.stage-clue .stage-wait { flex: 1 1 0; min-width: 0; padding: 0; }
#view-editor .b-prompt.tile label.tile-clue { display: flex; flex-direction: row; align-items: center; gap: 0.4rem; margin-top: 0.35rem; font-size: 0.85rem; font-weight: 600; color: var(--text, #fff); text-transform: none; letter-spacing: 0; cursor: pointer; }
#view-editor .b-prompt.tile label.tile-clue input { width: auto; margin: 0; flex: none; }
/* A video that has finished: a still card instead of its last frame. */
.media-done { margin-top: 0.4em; color: var(--gold); font-size: 1.1em; text-transform: uppercase; }

/* Step 1: this show (name, saving) and the other shows (open, new, delete), as two compact rows. */
.show-bar { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.75rem; padding: 0.8rem 1rem; background: #0a1240; border-radius: 8px; }
.show-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem; }
.show-row + .show-row-note + .show-row { margin-top: 0.35rem; padding-top: 0.75rem; border-top: 1px solid #2a3590; }
.show-row-label { flex: 0 0 7.5rem; color: var(--muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.show-row input, .show-row select { flex: 1 1 16rem; min-width: 0; width: auto; }
.show-row .push { margin-left: auto; }
.show-row-note { margin: 0 0 0 8.1rem; color: var(--muted); font-size: 0.85rem; line-height: 1.4; }
.show-row .show-row-note { margin: 0; flex: 1 1 16rem; }
@media (max-width: 600px) {
  .show-row-label { flex-basis: 100%; }
  .show-row-note { margin-left: 0; }
}
/* Round settings: one point value per row. */
.value-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 1rem; }
.value-fields > span { flex-basis: 100%; font-weight: 600; }
.value-fields label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.9rem; color: var(--muted); }
.value-fields input { width: 7rem; }

/* ---- "How it works" (audience): animated slides between the intro and the first round ---- */
.explain {
  position: fixed;
  inset: 0;
  z-index: 15; /* like the intro: above the board, below the corner buttons */
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  justify-items: center;
  gap: 1.5vh;
  padding: 4vh 4vw 3vh;
  text-align: center;
  background: radial-gradient(circle at 50% 45%, #1530c0 0%, var(--blue-dark) 55%, #02061f 100%);
  font-family: "Anton", "Oswald", "Arial Narrow", sans-serif;
  text-transform: uppercase;
  overflow: hidden;
}
.ex-head-label { color: var(--muted); letter-spacing: 0.4em; margin-right: -0.4em; font-size: clamp(0.9rem, calc(1.8 * var(--vw, 1vw)), 1.6rem); }
.ex-title { margin: 0; color: var(--gold); font-weight: 400; line-height: 1.05; font-size: clamp(2.4rem, calc(7.5 * var(--vw, 1vw)), 7rem); text-shadow: 5px 5px 0 #000; }
.ex-body { align-self: center; width: min(1300px, 100%); display: flex; flex-direction: column; align-items: center; gap: 4vh;
  font-size: clamp(1.1rem, calc(2.6 * var(--vw, 1vw)), 2.4rem); text-shadow: 3px 3px 0 #000; }
.ex-line { color: #fff; font-size: 1em; letter-spacing: 0.04em; }
.ex-dots { display: flex; gap: 0.8rem; }
.ex-dots span { width: 0.9rem; height: 0.9rem; border-radius: 50%; border: 2px solid var(--gold); }
.ex-dots span.on { background: var(--gold); transform: scale(1.25); }
.ex-dots span.done { background: rgba(255, 204, 51, 0.45); }

/* 1. teams */
.ex-teams { display: flex; align-items: center; justify-content: center; gap: 3vw; width: 100%; }
.ex-team { flex: 0 1 34vw; background: var(--panel); border: 4px solid var(--gold); border-radius: 14px; padding: 2.5vh 2vw; }
.ex-team-name { font-size: 1.5em; line-height: 1.1; color: #fff; }
.ex-team-score { font-size: 2.2em; color: var(--gold); }
.ex-vs { font-size: 2em; color: var(--gold); }
/* 2. pick a square */
.ex-pick { display: flex; align-items: center; justify-content: center; gap: 4vw; flex-wrap: wrap; }
.ex-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 6px; background: #000; border-radius: 8px; width: min(36vw, 560px); }
.ex-cell { background: var(--blue); color: var(--gold); padding: 1.2vh 0; font-size: 1.1em; }
.ex-head { color: #fff; border: 2px solid var(--gold); }
.ex-chosen { animation: ex-choose 2.4s ease-in-out 1s infinite; }
@keyframes ex-choose { 0%, 100% { box-shadow: none; transform: none; } 30%, 70% { box-shadow: 0 0 0 4px #fff, 0 0 30px var(--gold); transform: scale(1.12); background: #1f3be0; } }
.ex-rows { display: flex; flex-direction: column; gap: 1.6vh; align-items: flex-start; text-transform: none; font-family: inherit; }
.ex-row { display: flex; align-items: center; gap: 0.6em; text-transform: uppercase; }
.ex-row b { color: var(--gold); font-weight: 400; min-width: 3.2em; text-align: right; }
/* 3. fill in the blanks */
.ex-ask { color: var(--muted); font-size: 1.4em; }
.ex-chip { display: inline-block; padding: 0.1em 0.6em; border: 4px solid var(--gold); border-radius: 999px; background: var(--blue-dark); color: #fff; }
.ex-prompt { color: #fff; font-size: 1.5em; line-height: 1.4; }
.ex-blank { display: inline-block; min-width: 5em; border-bottom: 0.12em solid var(--gold); text-align: center; }
.ex-word { color: var(--gold); display: inline-block; animation: ex-drop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) 2.4s both; }
@keyframes ex-drop { from { opacity: 0; transform: translateY(-1.2em) scale(0.6); } }
/* 4. play the scene */
.ex-scene-bell { font-size: 3.2em; color: #fff; background: #e74c3c; border: 5px solid #fff; border-radius: 16px; padding: 0 0.5em; transform: rotate(-3deg); }
.ex-results { display: flex; gap: 3vw; }
.ex-result { min-width: 24vw; border-radius: 14px; padding: 1.5vh 2vw; border: 4px solid; background: var(--panel); }
.ex-result b { display: block; font-weight: 400; font-size: 2.4em; }
.ex-result.good { border-color: #3ccf6e; } .ex-result.good b { color: #3ccf6e; }
.ex-result.bad { border-color: #ff6b6b; } .ex-result.bad b { color: #ff6b6b; }
/* 5. the Final */
.ex-final { display: flex; gap: 2vw; flex-wrap: wrap; justify-content: center; }
.ex-final-step { display: flex; align-items: center; gap: 0.5em; background: var(--panel); border: 3px solid var(--gold); border-radius: 12px; padding: 1.2vh 1.4vw; color: #fff; }
.ex-final-step span { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--gold); color: #000; text-shadow: none; }
.ex-trophy { font-size: 2.6em; color: var(--gold); }

/* The entrances: each piece arrives on its own beat (--d), once per slide */
.ex-rise { animation: ex-rise 0.6s ease-out var(--d, 0s) both; }
.ex-pop { animation: ex-pop 0.55s cubic-bezier(0.2, 1.6, 0.4, 1) var(--d, 0.3s) both; }
.ex-in-left { animation: ex-in-left 0.6s ease-out var(--d, 0.2s) both; }
.ex-in-right { animation: ex-in-right 0.6s ease-out var(--d, 0.2s) both; }
@keyframes ex-rise { from { opacity: 0; transform: translateY(1.2em); } }
@keyframes ex-pop { from { opacity: 0; transform: scale(0.3); } }
@keyframes ex-in-left { from { opacity: 0; transform: translateX(-30vw); } }
@keyframes ex-in-right { from { opacity: 0; transform: translateX(30vw); } }
@media (prefers-reduced-motion: reduce) {
  .ex-rise, .ex-pop, .ex-in-left, .ex-in-right, .ex-word, .ex-chosen { animation: none; }
}
@media (max-height: 560px) {
  body.display .explain { padding: 2vh 3vw 1.5vh; gap: 1vh; }
  body.display .ex-title { font-size: clamp(1.6rem, calc(7.5 * var(--vw, 1vw)), 7rem); }
  body.display .ex-body { font-size: clamp(0.8rem, calc(2.6 * var(--vw, 1vw)), 2.4rem); gap: 2vh; }
}

/* Not the live site (preview build or local copy): a striped banner on the host page, and a corner tag. */
.env-banner {
  padding: 0.35rem 1rem; text-align: center; font-size: 0.9rem; color: #111;
  background: repeating-linear-gradient(-45deg, #ffb020 0 14px, #ffc451 14px 28px);
}
.env-banner b { text-transform: uppercase; letter-spacing: 0.08em; }
.env-banner.local { background: repeating-linear-gradient(-45deg, #9ad0ff 0 14px, #b8ddff 14px 28px); }
.env-tag {
  position: fixed; left: 0.6rem; bottom: 0.6rem; z-index: 2000; pointer-events: none;
  padding: 0.15rem 0.6rem; border-radius: 999px; font-weight: 800; font-size: 0.75rem; letter-spacing: 0.12em;
  color: #111; background: #ffb020; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); opacity: 0.9;
}
.env-tag.local { background: #9ad0ff; }