/* From the owner's design (design/desktopscreens.png and design/mobile.png): Amaranth for Questions,
   Fraunces light italic (was Cormorant Garamond until 2026-11-03) for Guesses, navy / purple stripes around a blue and a white panel. */
:root {
  --navy: #00004e;
  --purple: #320a58;
  --blue: #034b78;
  --paper: #FBFBFE; /* owner, 2026-11-03 (was white) */
  --ink: #111111;
  --field: #eff4f7;
  --field-edge: #abc9da;
  --hint: #718fa3;
  --drained: rgba(255, 255, 255, .14); /* the used part of the timer, over the blue panel */
  /* What each colour is for, so dark mode can change them in one place. */
  --stage: var(--blue);        /* the blue panel (desktop) */
  --stripe: var(--purple);     /* the purple stripes at the edges */
  --accent: var(--blue);       /* blue text on paper: Questions on phones, Results Questions, the logo on phones */
  --on-field: var(--blue);     /* text on --field: buttons, tabs, your row on the leaderboard */
  --input: #fff;               /* the box Guesses are typed in */
  --surface: #fff;             /* the note behind the ?, the menu */
  --tab-open: var(--field);    /* the open band tab (owner, 2026-11-03: the old unselected colour) */
  --tab-closed: #dde8ef;       /* unselected band tabs, a little darker than --field */
  --tab-line: var(--field-edge); /* the lines under the tabs */
  --focus: #8fb4cb;
  --chevron: var(--purple);    /* the › before the Player's Answer */
  --date: var(--purple);       /* the set's date above the Results: dark purple (owner, 2026-11-05) */
  --text-soft: #555;           /* Qualifiers */
  --text-muted: #6b6b6b;       /* Your Guesses, citations */
  --text-faint: #8d8d8d;       /* the (n) after the Answer */
  --wrong-0: #8d8d8d;          /* wrong Guesses, fading with age */
  --wrong-1: #b4b4b4;
  --wrong-2: #cdcdcd;
  --wrong-3: #dddddd;
  --line: #edf1f4;             /* lines between answers */
  --line-phone: #e3ebf0;       /* lines between leaderboard rows on phones */
  --switch-on: #b0c8ff;
  --score: #c2bcff;            /* "Pencilled score" on the blue panel: the timer's light purple (owner, 2026-11-03) */
  --score-phone: var(--accent); /* on phones it sits on paper, where light blue would be unreadable */
  --time-full-stage: #eff4f7;  /* the timer's starting colour on the blue panel */
  --time-full-paper: #cfe0ea;  /* the same on phones, on paper */
  --shadow: rgba(0, 0, 0, .18);
  --lozenge-shadow: rgba(3, 75, 120, .25);
  --paper-shadow: rgba(3, 75, 120, .22); /* the paper panel's inner shadow, tinted with --blue (owner, 2026-11-03) */
  --board-box-phone: var(--field); /* the leaderboard box on phones, on paper */
  --board-me-phone: #fff;      /* your own row in it */
  color-scheme: light;
  --question: 'Amaranth', system-ui, sans-serif;
  --guess: 'Fraunces', Georgia, serif;
  --sans: 'Open Sans', system-ui, sans-serif; /* points, Your Guesses, answer names and citations (owner, 2026-11-03) */
}

/* Dark mode: DRAFT by Claude from the Twuft palette (design/palette.svg), blues first, for the owner
   to adjust. theme.js sets data-theme from the device setting or the Player's choice in the menu.
   The greys (marked *) aren't in the palette: they are blues dimmed towards the paper. */
:root[data-theme="dark"] {
  --navy: #00004e;
  --blue: #034b78;
  --paper: #02254c;
  --ink: #fbfbfe;
  --field: #034b78;
  --field-edge: #3661c6;
  --hint: #7fa9c6;             /* * */
  --stage: #00313d;            /* * a darker teal, not in the palette (owner, 2026-11-03) */
  --stripe: #034b78;
  --accent: #aadafb;           /* #8dcef9 a quarter of the way to white (owner, 2026-11-03) */
  --on-field: #c8f1ff;         /* #b6ecff, the same */
  --input: #02254c;
  --surface: #034b78;
  --tab-open: var(--field);
  --tab-closed: #023b60;       /* * a little darker than --field */
  --navy-soft: #14143b;        /* * --navy at half the saturation: the nickname box and the radio buttons (owner, 2026-11-03) */
  --tab-line: #03436c;         /* * the lines under the tabs: between --tab-open and --tab-closed (owner, 2026-11-03) */
  --focus: #5dc4f0;
  --chevron: #a9f3ce;          /* mint (owner, 2026-11-03) */
  --date: #c2bcff;             /* * the date above the Results: dark purple can't be read on the dark page, so the timer's light purple (Claude, 2026-11-05) */
  --text-soft: #c4d6fd;        /* #b0c8fc, the same */
  --text-muted: #9db8cf;       /* * */
  --text-faint: #7891a8;       /* * */
  --wrong-0: #7891a8;          /* * */
  --wrong-1: #5e7792;          /* * */
  --wrong-2: #48627f;          /* * */
  --wrong-3: #37516f;          /* * */
  --line: #0e3a66;             /* * */
  --line-phone: #0e3a66;       /* * */
  --switch-on: #b0c8ff;
  --score: #d9baff;            /* * the light purple (#c2bcff) made lighter and more saturated, so a little more violet (owner, 2026-11-03) */
  --score-phone: var(--score); /* on dark paper too */
  --time-full-stage: #5dc4f0;
  --time-full-paper: #5dc4f0;
  --shadow: rgba(0, 0, 0, .45);
  --lozenge-shadow: rgba(0, 0, 0, .45);
  --paper-shadow: rgba(0, 0, 40, .45);
  --board-box-phone: rgba(0, 0, 0, .25); /* the leaderboard box on phones */
  --board-me-phone: var(--field);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--paper); color: var(--ink); font-family: var(--question); }
button { font: inherit; cursor: pointer; }
/* Scroll bars: thin, a rounded --field-edge bar with no track (Firefox and Chrome use the first rule;
   Safari and older Chrome the ::-webkit ones). */
* { scrollbar-width: thin; scrollbar-color: var(--field-edge) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--field-edge); border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--focus); }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Desktop: stripes | blue stage | white side | stripes ---------- */
.frame {
  display: grid;
  grid-template-columns: 60fr 130fr 770fr 724fr 76fr 160fr;
  min-height: 100vh;
  background:
    linear-gradient(to right,
      var(--navy) 0 3.125%, var(--stripe) 3.125% 9.9%, transparent 9.9% 87.7%,
      var(--navy) 87.7% 91.67%, var(--stripe) 91.67% 100%);
}
.stage { grid-column: 3; background: var(--stage); color: #fff; display: flex; flex-direction: column; padding: 0 6% 3.5vw; }
.side { grid-column: 4; background: var(--paper); box-shadow: inset 0 0 28px var(--paper-shadow); display: flex; flex-direction: column; justify-content: flex-end; padding: 3vw 2% 3.5vw 1.2%; min-width: 0; }

.logo { display: flex; justify-content: center; padding-top: 2.6vw; color: #fff; }
.logo svg { width: clamp(90px, 8.2vw, 170px); height: auto; }
/* Settings (menu.js): dark mode and Feedback. On phones the lozenge opens them; on PCs the gear at the bottom left, where the lozenge is on phones. */
.logo { position: relative; }
.menu-button { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; border-radius: 8px; }
.menu-button:disabled { cursor: default; } /* on PCs the logo is only a logo */
.settings-button { display: none; position: fixed; left: 12px; bottom: 12px; z-index: 1000; width: 40px; height: 40px; border-radius: 50%; padding: 0;
  border: 2px solid var(--field-edge); background: var(--surface); color: var(--on-field); font-size: 22px; line-height: 1; box-shadow: 0 2px 8px var(--shadow); }
.menu { position: absolute; z-index: 1000; display: flex; flex-direction: column; gap: .8em;
  min-width: 11em; padding: .8em 1em; background: var(--surface); color: var(--ink); border: 2px solid var(--field-edge); border-radius: 6px;
  box-shadow: 0 4px 14px var(--shadow); font-family: var(--question); font-size: 17px; text-align: left; }
.menu a { color: var(--accent); font-weight: 700; }
.menu .switch .slider { background: var(--field); }
.menu .switch { justify-content: space-between; gap: 1.2em; } /* "Dark mode", then the toggle on its right (owner, 2026-11-03) */
.menu .switch input:focus-visible ~ .slider { outline-color: var(--focus); } /* white would vanish on the menu */
.menu a.disabled { color: var(--text-faint); cursor: default; } /* Feedback, while a Question is open */
.menu a.disabled::after { content: ' (between Questions)'; font-weight: 400; font-size: .85em; }

/* Feedback (feedback.js): placeholder styling, matching the menu, until the owner designs it. */
.feedback { width: min(32em, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 1.2em 1.4em; box-sizing: border-box;
  background: var(--surface); color: var(--ink); border: 2px solid var(--field-edge); border-radius: 6px;
  box-shadow: 0 6px 24px var(--shadow); font-family: var(--sans); font-size: 16px; }
.feedback::backdrop { background: rgba(0, 0, 40, .45); }
.feedback h2 { font-family: var(--question); font-weight: 400; color: var(--accent); margin: 0 0 .6em; font-size: 1.6em; }
.feedback fieldset { border: 0; padding: 0; margin: 0 0 1em; display: flex; flex-direction: column; gap: .35em; }
.feedback legend { font-weight: 600; margin-bottom: .4em; padding: 0; }
.fb-field { display: flex; flex-direction: column; gap: .3em; margin-bottom: 1em; font-weight: 600; }
.fb-optional, .fb-hint, .fb-count { font-weight: 400; color: var(--text-muted); font-size: .88em; }
.fb-count { align-self: flex-end; }
.feedback select, .feedback textarea, .feedback input[type="email"] { font: inherit; font-weight: 400; color: var(--ink); background: var(--input);
  border: 2px solid var(--field-edge); border-radius: 4px; padding: .4em .5em; width: 100%; box-sizing: border-box; }
.feedback textarea { resize: vertical; min-height: 7em; }
.feedback :is(select, textarea, input):focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.fb-msg { min-height: 1.3em; margin: 0 0 .6em; color: var(--accent); }
.fb-msg:empty { min-height: 0; margin: 0; }
.fb-buttons { display: flex; justify-content: flex-end; gap: .6em; }
.fb-buttons button { font-weight: 700; padding: .35em 1em; border-radius: 4px; border: 2px solid var(--field-edge); background: var(--field); color: var(--on-field); }
.fb-buttons button:disabled { opacity: .5; cursor: default; }
/* Dark mode: the panel takes the fields' colour and the fields the panel's, with no outlines (owner, 2026-11-03). */
:root[data-theme="dark"] .feedback { background: var(--input); border: 0; }
:root[data-theme="dark"] .feedback :is(select, textarea, input[type="email"], .fb-buttons button) { border-color: transparent; }
/* Dark mode: the radio buttons are dark navy, with an --accent dot when chosen (owner, 2026-11-03). */
:root[data-theme="dark"] .feedback input[type="radio"] { appearance: none; width: 1.1em; height: 1.1em; margin: 0 .35em 0 0; vertical-align: -.15em;
  border-radius: 50%; background: var(--navy-soft); cursor: pointer; }
:root[data-theme="dark"] .feedback input[type="radio"]:checked { background: radial-gradient(circle, var(--accent) 0 38%, var(--navy-soft) 42%); }
:root[data-theme="dark"] .feedback input[type="radio"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
:root[data-theme="dark"] .feedback :is(select, textarea, input[type="email"]) { background: var(--surface); border-color: transparent; }
.stage-body { margin-top: auto; }

/* The design sets text with a slight slant (Affinity: scale 1.03, skew about 2°). */
#question, .history .q, .result h3 { transform: skewX(-2deg); }
#question { font-weight: 400; font-size: clamp(28px, 3.1vw, 64px); line-height: 1.22; margin: 0 0 .7em; overflow-wrap: anywhere; }
.place { margin: 0 0 .4em; opacity: .7; font-size: clamp(14px, 1vw, 20px); }

/* The answer box: a light frame around a white field. */
.entry { position: relative; isolation: isolate; background: var(--drained); border: 3px solid var(--field-edge); border-radius: 6px; padding: clamp(10px, 1.1vw, 22px); }
.field { display: flex; align-items: baseline; gap: .35em; background: var(--input); border: 3px solid var(--field-edge); border-radius: 4px; padding: .1em .5em; font-family: var(--guess); font-style: italic; font-weight: 300; font-size: clamp(22px, 2.3vw, 46px); color: var(--ink); }
.field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; color: var(--ink); padding: .05em 0; }
.field input::placeholder { color: var(--hint); }
.field:focus-within { border-color: var(--focus); }
.field input:disabled { color: var(--hint); }

/* Placeholder until the design has a timer: a thin bar along the top of the answer box. */
/* The timer: the light blue of the answer box's frame is the time left, shrinking towards the left;
   the part already used shows --drained. The white field sits on top. */
.timebar { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: 3px; }
/* Its colour moves from --time-full through the stops in game.js (timeColour) as time runs out. */
.timebar { --time-full: var(--time-full-stage); }
.timebar span { display: block; height: 100%; width: 100%; background: var(--time-full); transform-origin: left; transition: transform .2s linear, background-color .2s linear; }

.meta { min-height: 1.4em; margin: .8em 0 0; font-size: clamp(14px, 1vw, 20px); }
#timer { font-variant-numeric: tabular-nums; opacity: .8; }
/* Skip sits at the right edge, away from where Done and Next appear, so it's harder to tap by accident
   (owner, 2026-11-05). */
.controls { display: flex; flex-wrap: wrap; align-items: center; }
.controls #skip { margin-left: auto; margin-right: 0; }
.controls button, #start button, #mode-choice button {
  margin: .9em .5em 0 0; padding: .35em 1.2em; border-radius: 6px; border: 3px solid var(--field-edge);
  background: var(--field); color: var(--on-field); font-weight: 700; font-size: clamp(16px, 1.2vw, 24px);
}
#start p, #score p, #status { font-size: clamp(18px, 1.5vw, 30px); line-height: 1.35; }
#score a { color: inherit; }
/* The tiny ? beside "Pencilled" / "Inked": hover or focus shows the note, a tap pins it (game.js). */
/* The score: bigger, centred, in its own colour (owner, 2026-11-03). */
#score .total-line { position: relative; margin-bottom: .15em; text-align: center; font-size: clamp(24px, 2vw, 40px); color: var(--score); }
#score .total-line .tip-text { font-size: clamp(13px, 1.05vw, 21px); text-align: left; } /* the note keeps its size */
.tip-button { font: inherit; font-size: .6em; font-weight: 700; line-height: 1; width: 1.5em; height: 1.5em; padding: 0; margin-left: .45em;
  vertical-align: .3em; border-radius: 50%; border: 2px solid var(--field-edge); background: var(--field); color: var(--on-field); }
.tip-text { display: none; position: absolute; left: 0; top: 100%; z-index: 5; margin-top: .3em; width: min(22em, 100%);
  padding: .55em .75em; border-radius: 6px; border: 2px solid var(--field-edge); background: var(--surface); color: var(--ink);
  font-size: .7em; font-weight: 400; line-height: 1.35; box-shadow: 0 4px 14px var(--shadow); }
.tip-button:focus-visible + .tip-text, .tip-open .tip-text { display: block; }
@media (hover: hover) { .tip:hover .tip-text { display: block; } } /* phones keep :hover after a tap */

/* Share button: placeholder styling, matching the other buttons, until the owner designs it. */
#score .share { margin: 0; text-align: center; font-size: clamp(13px, .9vw, 17px); } /* smaller and centred (owner, 2026-11-03) */
#share { padding: .25em 1em; border-radius: 6px; border: 2px solid var(--field-edge); background: var(--field); color: var(--on-field); font-weight: 700; }
#share-msg { margin-left: .5em; opacity: .85; }
:root[data-theme="dark"] #share { border-color: transparent; } /* no outline in dark mode (owner, 2026-11-03) */
/* The Share button's wiggle (owner, 2026-11-05, like the chevron's): a small tilt and swell every few seconds,
   until the Player has shared once (.share-found, remembered in the browser); never on reduced-motion devices.
   To tune: the 2s is how often; the angles are how far it tilts; scale is how much it swells; the % steps after
   82% are how quick it is. The 1s delay lets the Results arrive first. */
#share { display: inline-block; }
@keyframes share-wiggle {
  0%, 82%, 100% { rotate: 0deg; scale: 1; }
  85% { rotate: -6deg; scale: 1.08; }
  89% { rotate: 5deg; scale: 1.08; }
  93% { rotate: -3deg; scale: 1.04; }
  97% { rotate: 1deg; scale: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  :root:not(.share-found) #share { animation: share-wiggle 2s ease-in-out 1s infinite; }
}

/* ---------- Guess log: Fraunces italic, "> " before each; wrong ones struck through and fading with age ---------- */
.log, .history { list-style: none; margin: 0; padding: 0; }
.log { display: flex; flex-direction: column; gap: .5em; font-family: var(--guess); font-style: italic; font-weight: 300; font-size: clamp(20px, 2vw, 42px); line-height: 1.15; }
/* The ">" is never crossed out: an inline-block doesn't take its line's strike-through. */
.log li::before, .history .answer::before { content: '>'; display: inline-block; font-size: .62em; margin-right: .45em; text-decoration: none; }
.offer p::before { content: none; }
.log li { color: var(--ink); overflow-wrap: anywhere; }
.log li.sent { color: var(--hint); }
.log li.wrong { text-decoration: line-through; text-decoration-thickness: 1.5px; color: var(--wrong-0); }
.log li.wrong[data-age="1"] { color: var(--wrong-1); }
.log li.wrong[data-age="2"] { color: var(--wrong-2); }
.log li.wrong[data-age="3"] { color: var(--wrong-3); }
.log button.pick { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-align: left; }
/* Both correct Answers are black, as in the design; the one that counts gets a thin blue underline (an addition). */
.log li.right { color: var(--ink); }
.log li.right.selected button.pick { text-decoration: underline; text-decoration-color: var(--field-edge); text-decoration-thickness: 2px; text-underline-offset: .18em; }
.log button.pick:disabled { cursor: default; }

/* "Did you mean …?" sits just above the answer box, in the Question's colour. */
.offer { font-family: var(--guess); font-style: italic; font-size: clamp(20px, 1.9vw, 38px); margin: -.2em 0 .45em; color: inherit; }
.offer p { margin: 0; }
.offer button { font: inherit; font-weight: 400; color: var(--on-field); background: var(--field); border: 2px solid var(--field-edge); border-radius: 4px; padding: 0 .35em; margin: 0 .1em; }

/* Earlier Questions in this set (shown on phones, as in the mobile design). */
.history { display: none; }
.history li { margin-top: 1.1em; }
.history .q { color: var(--accent); font-family: var(--question); font-weight: 400; line-height: 1.25; }
.history .answer { font-family: var(--guess); font-style: italic; font-weight: 300; margin-left: .4em; }

/* Leaderboard in the blue panel of the Results screen (blue text on phones). */
.board { margin-top: 2.8em; font-size: clamp(15px, 1.05vw, 20px); }
/* The title and list sit in a dark box (owner, 2026-11-03); none while the board isn't shown. */
.board-box { margin-top: .5em; padding: .6em .8em; border-radius: 8px; background: rgba(0, 0, 0, .25); }
.board-box:has(#board-title[hidden]) { display: none; }
.board-box .board-title { margin-top: 0; }
.switch { display: inline-flex; align-items: center; gap: .6em; cursor: pointer; font-weight: 700; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .slider { position: relative; width: 2.6em; height: 1.4em; border-radius: 1em; background: rgba(255, 255, 255, .25); border: 2px solid var(--field-edge); transition: background .15s; }
.switch .slider::after { content: ''; position: absolute; top: .12em; left: .14em; width: 1em; height: 1em; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch input:checked ~ .slider { background: var(--switch-on); }
.switch input:checked ~ .slider::after { transform: translateX(1.15em); background: var(--blue); }
.switch input:focus-visible ~ .slider { outline: 2px solid #fff; outline-offset: 2px; }
.board-name { display: flex; gap: .4em; margin-top: .7em; }
.board-name input { flex: 1; min-width: 0; font: inherit; padding: .3em .5em; border-radius: 4px; border: 2px solid var(--field-edge); color: var(--ink); }
.board-name button { font: inherit; font-weight: 700; padding: .3em .9em; border-radius: 4px; border: 2px solid var(--field-edge); background: var(--field); color: var(--on-field); }
:root[data-theme="dark"] .board-name input { background: var(--navy-soft); } /* dark navy (owner, 2026-11-03) */
/* Its focus ring at half opacity, so it blends in (owner, 2026-11-03). */
:root[data-theme="dark"] .board-name input:focus-visible { outline: 2px solid color-mix(in srgb, var(--focus) 50%, transparent); outline-offset: 0; }
/* No outlines in dark mode on the nickname box, Save and the ? by the score (owner, 2026-11-03). */
/* Also the note behind the ? and the toggles (dark mode, leaderboard), the Settings menu, the band tabs,
   the gear, the Guess box and its frame, "Did you mean" and the Start, mode, Skip, Done and Next buttons. */
:root[data-theme="dark"] :is(.board-name input, .board-name button, .tip-button, .tip-text, .switch .slider, .menu, .tabs button,
  .settings-button, .entry, .field, .offer button, .controls button, #start button, #mode-choice button) { border-color: transparent; }
.board-msg { min-height: 1em; margin: .15em 0 0; opacity: .85; line-height: 1.3; }
.board-msg:empty { display: none; } /* no blank line held for it, so the gap is the same with or without a message */
#score .board-msg { font-size: inherit; } /* same size as the names on the board */
.board-title { font-size: 1.15em; font-weight: 700; margin: .17em 0 .3em; } /* close under the name entry (owner, 2026-11-03; was .9em, then .35em) */
.board-list { list-style: none; margin: 0; padding: 0; }
.board-list li { display: grid; grid-template-columns: 2.2em 1fr auto; align-items: baseline; padding: .28em .4em; border-bottom: 1px solid rgba(255, 255, 255, .18); }
.board-list .rank { opacity: .75; font-variant-numeric: tabular-nums; }
.board-list .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-list .pts { font-weight: 700; font-variant-numeric: tabular-nums; }
.board-list li.me { background: var(--field); color: var(--on-field); border-radius: 4px; border-bottom-color: transparent; }
.board-list li.gap { display: block; text-align: center; opacity: .7; border: 0; }

/* Results (placeholder until designed): the mobile list style, with sources. */
#results { width: 100%; }
.result { margin-bottom: 2.2em; } /* more space between Questions (owner, 2026-11-03; was 1.4em) */
.result h3 { color: var(--accent); font-weight: 400; font-size: clamp(18px, 1.5vw, 30px); line-height: 1.25; margin: 0 0 .06em; }
/* The Player's Answer: Fraunces 500, upright, wonky, optical size (owner, 2026-11-03); the › keeps 700, not wonky. */
.result .mine { display: block; font-family: var(--guess); font-style: normal; font-weight: 500; font-variation-settings: 'WONK' 1; font-optical-sizing: auto; font-size: clamp(18px, 1.4vw, 28px); /* a bit smaller (owner, 2026-11-03): was clamp(20px, 1.6vw, 32px) */ margin: -.2em 0 .2em .4em; /* about a third less space above (owner, 2026-11-03) */
  background: none; border: 0; padding: 0; color: var(--ink); text-align: left; }
/* The ">" turns down while the rest is open, and points right when folded away. */
.result .mine::before { content: '›'; display: inline-block; position: relative; top: .07em; font-family: var(--guess); font-size: calc(1.7 * clamp(20px, 1.6vw, 32px)); /* the size it had before the Answer was made smaller */ line-height: .6; font-weight: 700; font-variation-settings: 'WONK' 0; color: var(--chevron); margin-right: .3em; transition: transform .15s; transform: rotate(90deg); }
.result .mine[aria-expanded="false"]::before { transform: none; }
/* The wiggle (owner, 2026-11-05): a folded chevron gives a quick turn towards "open" and back every few
   seconds, to tempt a tap; the rows go one after another (WIGGLE_STAGGER in results-view.js). It stops for
   good once the Player has opened any chevron (.chevron-found, remembered in the browser), and never runs
   on devices set to reduce motion. To tune: the 4.2s is how often; the keyframe angles are how far it turns
   (positive turns towards "open"); the % steps after 82% are how quick the wiggle is. */
@keyframes chevron-wiggle {
  0%, 82%, 100% { rotate: 0deg; translate: 0 0; }
  85% { rotate: 28deg; translate: .06em 0; }
  89% { rotate: -12deg; translate: 0 0; }
  93% { rotate: 16deg; translate: .03em 0; }
  97% { rotate: -4deg; translate: 0 0; }
}
@media (prefers-reduced-motion: no-preference) {
  :root:not(.chevron-found) .result .mine[aria-expanded="false"]::before { animation: chevron-wiggle 2s ease-in-out var(--wiggle-at, 0s) infinite; }
}
.result .qualifier { font-family: var(--guess); font-style: italic; font-weight: 200; font-variation-settings: 'WONK' 1; font-optical-sizing: auto; color: var(--text-soft); font-size: clamp(17px, 1.25vw, 24px); margin: 0 0 .12em .1em; }
.result .mine .points { font-family: var(--sans); font-weight: 500; font-size: clamp(15px, calc(.6vw + 2px), 16px); color: var(--text-faint); }
.result .guesses { font-family: var(--sans); font-weight: 400; color: var(--text-muted); font-size: clamp(14px, .8vw, 17px); margin: .1em 0 .4em .6em; }

/* All answers: one tab per band, each answer with its citation on the right. */
.all-answers { margin: .4em 0 0 .4em; font-size: clamp(14px, 1vw, 19px); }
.all-title { margin: 0 0 .3em; color: var(--accent); }
/* Tabs sit on lines; when they wrap to a second row, each row gets its own line (fixed row height). */
.tabs { --row: 2.1em; display: flex; flex-wrap: wrap; column-gap: .25em; row-gap: 0;
  background: repeating-linear-gradient(to bottom, transparent 0 calc(var(--row) - 2px), var(--tab-line) calc(var(--row) - 2px) var(--row)); }
.tabs button { font: inherit; line-height: 1; color: var(--on-field); background: var(--tab-closed); border: 2px solid var(--field-edge); border-bottom: 0;
  border-radius: 6px 6px 0 0; padding: 0 .7em; margin: .25em 0 2px; height: calc(var(--row) - .25em - 2px); }
/* Unselected tabs stop on their row's line; the open tab runs over it, joining its panel. */
.tabs button[aria-selected="true"] { background: var(--tab-open); font-weight: 700; height: calc(var(--row) - .25em); margin-bottom: 0; }
/* The open tab's page: same colour as the open tab, lines between answers in the closed-tab colour. */
.band-list { list-style: none; margin: 0; padding: .35em .9em .5em; background: var(--tab-open); border-radius: 0 0 6px 6px; }
.band-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; padding: .35em 0; border-bottom: 1px solid var(--tab-closed); }
.band-list li:last-child { border-bottom: 0; }
.band-list .answer-name { font-family: var(--sans); font-weight: 300; font-size: clamp(16px, 1vw, 21px); }
.band-list .citation { overflow-wrap: anywhere; font-family: var(--sans); font-stretch: 75%; font-weight: 400; color: var(--text-muted); font-size: max(14px, calc(.7em + 2px)); text-align: right; }
.band-list li.mine-answer .answer-name { font-weight: 600; }
/* Why a cheeky answer is Out of the Jot, under the answer. Placeholder look. */
.band-list .cheeky-why { display: block; font-weight: 500; font-size: .72em; color: var(--text-muted); margin-top: .2em; } /* smaller, medium weight, dimmer (owner, 2026-11-04) */
/* Links in citations (refs-panel.js); a dotted underline marks the ones with a panel. Placeholder look. */
.citation a.ref { color: inherit; text-decoration: underline; text-decoration-color: var(--field-edge); text-underline-offset: 2px; }
.citation a.ref[data-key] { text-decoration-style: dotted; text-decoration-thickness: 2px; }
.citation a.ref:hover { color: var(--on-field); }
.ref-panel { position: fixed; z-index: 50; max-height: min(45vh, 360px); display: flex; flex-direction: column;
  background: var(--surface); color: var(--ink); border: 1px solid var(--field-edge); border-radius: 8px;
  box-shadow: 0 4px 16px var(--shadow); font-family: var(--sans); font-size: 15px; line-height: 1.45; }
.ref-title { margin: 0; padding: .55em .9em .35em; font-weight: 600; color: var(--accent); }
.ref-body { overflow-y: auto; padding: 0 .9em; }
.ref-body p { margin: 0 0 .5em; }
.ref-body sup { color: var(--text-muted); font-size: .7em; }
.ref-body.ref-verse p { white-space: pre-line; }
.ref-more { display: block; padding: .4em .9em .6em; border-top: 1px solid var(--line); color: var(--on-field); font-size: .9em; }

/* ---------- Phones: purple and navy edges around one white column ---------- */
@media (max-width: 820px) {
  .frame {
    display: block;
    padding: 0 4.8vw 0 4.4vw;
    background: linear-gradient(to right, var(--stripe) 0 4.4%, var(--paper) 4.4% 95.2%, var(--navy) 95.2% 100%);
  }
  .stage { background: none; color: var(--accent); padding: 0 8% 0 11%; }
  .side { padding: 0 8% 3em 11%; justify-content: flex-start; box-shadow: none; } /* the inner shadow is for the PC panel only */
  /* The logo in the owner's lozenge (design/lozenge.svg, 2026-11-03), fixed at the bottom left. */
  .logo { position: fixed; left: 8px; bottom: max(8px, env(safe-area-inset-bottom)); z-index: 50; width: 72px; height: 66px; padding: 0;
    display: flex; align-items: center; justify-content: center; color: var(--accent);
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-1.5 -1.5 96 88'><path d='M38.902,0.522c24.626,1.624 63.692,43.445 50,62c-10.769,14.592 -67.942,31.292 -83.5,14.934c-15.091,-15.866 6.972,-78.685 33.5,-76.934Z' fill='white' stroke='%23abc9da' stroke-width='2.67' stroke-linejoin='round'/></svg>") center / contain no-repeat;
    filter: drop-shadow(0 2px 4px var(--lozenge-shadow)); } /* outline as the tabs: 2px of --field-edge (2.67 in the viewBox at this size) */
  .logo svg { display: block; width: 33px; margin: 0 3px 5px 0; position: relative; top: 6px; } /* placed by the owner, 2026-11-03 */
  .menu-button { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 40%; }
  .menu { bottom: calc(100% + 10px); left: 0; }
  /* The lozenge in dark mode: paper fill, no outline (owner, 2026-11-03). */
  :root[data-theme="dark"] .logo { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-1.5 -1.5 96 88'><path d='M38.902,0.522c24.626,1.624 63.692,43.445 50,62c-10.769,14.592 -67.942,31.292 -83.5,14.934c-15.091,-15.866 6.972,-78.685 33.5,-76.934Z' fill='%2302254c'/></svg>"); }
  .stage-body { margin-top: 7vw; }
  .side { padding-bottom: 6em; } /* room so the last lines aren't hidden under the lozenge */
  #question { font-size: max(21px, 5.6vw); margin-bottom: .55em; }
  .place { color: var(--hint); opacity: 1; }
  .entry { margin: 0 -3%; padding: 2.2vw; }
  /* On white, the time left is a deeper light blue so it shows against the used part. */
  .frame { --drained: var(--paper); }
  .timebar { --time-full: var(--time-full-paper); }
  .field { font-size: max(20px, 4.6vw); }
  .meta { color: var(--hint); }
  .log { flex-direction: column-reverse; justify-content: flex-end; gap: .3em; font-size: max(19px, 4.4vw); margin-top: .9em; }
  .log li { margin-left: .5em; }
  .offer { font-size: max(18px, 4vw); }
  /* Once the time is up, the accepted Guesses move to the top of the log. */
  .time-up .log li.right { order: 1; }
  .history { display: block; margin-top: 2.2em; font-size: max(15px, 3.6vw); }
  .history .answer { font-size: 1.05em; }
  .controls button, #start button, #mode-choice button { font-size: 17px; }
  #start p, #score p, #status { font-size: 19px; }
  #score .total-line { font-size: 25px; color: var(--score-phone); }
  .result h3 { font-size: max(16px, 3.6vw); }
  .board { font-size: 17px; margin-bottom: 2.4em; } /* room before the Results list (owner, 2026-11-03) */
  /* On paper: a light box for the title and list (owner, 2026-11-03), with your own row in white on it. */
  .board-box { padding: .6em .7em; background: var(--board-box-phone); }
  .board-box .board-list li.me { background: var(--board-me-phone); }
  .switch .slider { background: var(--field); }
  .board-list li { border-bottom-color: var(--line-phone); }
  .band-list li { flex-wrap: wrap; }
  .band-list .citation { margin-left: auto; }
}

/* Desktop: "Did you mean" sits under the newest Guess; Results fill the white panel from the top. */
@media (min-width: 821px) {
  /* Settings open from the gear at the bottom left, just above it. */
  .settings-button { display: block; }
  .mute-button { bottom: 60px; } /* above the gear; the same colours as the gear (--on-field) */
  .mute-button svg { display: block; width: 20px; height: 20px; margin: auto; }
  .menu { position: fixed; left: 60px; bottom: 12px; } /* beside the gear, so it doesn't cover the mute */
  /* One screen tall: the Question and answer box stay in view, and old Guesses slide out of sight
     at the top of the white panel. Correct Guesses gather at the bottom, so they never disappear. */
  .frame { height: 100vh; min-height: 0; }
  /* Dark mode: the medium blue stripes (grid columns 2 and 6) get the paper's inner shadow (owner, 2026-11-03). */
  :root[data-theme="dark"] .frame::before, :root[data-theme="dark"] .frame::after { content: ''; grid-row: 1; box-shadow: inset 0 0 28px var(--paper-shadow); pointer-events: none; }
  :root[data-theme="dark"] .frame::before { grid-column: 2; }
  :root[data-theme="dark"] .frame::after { grid-column: 6; }
  .stage, .side { grid-row: 1; } /* keep the panels on the same row as the stripes */
  .stage, .side { overflow: hidden; }
  .side { padding: 3vw 4.5vw 3.5vw 3vw; }
  .log { flex-shrink: 0; }
  .log li.right { order: 1; }
  /* On the wide screen the Guesses tilt upwards, as if written by hand. */
  .log li { transform: rotate(-4deg); transform-origin: left bottom; } /* owner, 2026-11-03: was -2.5deg */
  .showing-results .side { justify-content: flex-start; overflow-y: auto; padding-left: 3vw; padding-right: 3vw; }
  /* The blue panel scrolls too when it holds more than fits (a long leaderboard, Earlier days). */
  .showing-results .stage { overflow-y: auto; }
  /* Results: the white panel takes half the width; the blue one narrows to the logo and score. */
  .showing-results .frame { grid-template-columns: 60fr 130fr 534fr 960fr 76fr 160fr; }
  .showing-results .stage { padding-left: 8%; padding-right: 8%; }
  .result .mine { font-size: clamp(15px, calc(1.4vw - 3px), 25px); } /* 3px smaller on PCs (owner, 2026-11-03) */
  .result .mine::before { font-size: calc(1.7 * clamp(20px, 1.6vw, 32px) - 4px); } /* 4px smaller on PCs (owner, 2026-11-03) */
  /* The score and Share hang just below the logo instead of sitting at the bottom (owner, 2026-11-03). */
  .showing-results .stage-body { margin-top: 2.5vw; }
  /* Motion B (motion.js): the panels glide to their Results widths. */
  .glide .frame { transition: grid-template-columns .45s cubic-bezier(.4, 0, .2, 1); }
  .glide .stage, .glide .side { transition: padding .45s cubic-bezier(.4, 0, .2, 1); }
}

/* The leaderboard fades in when it loads, instead of popping in. */
.board:not([hidden]) { animation: board-in .3s ease; }
@keyframes board-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .board:not([hidden]) { animation: none; } }

/* ---------- How to play (about.html): placeholder look, from the game's colours, for the owner ---------- */
.about { font-family: var(--sans); line-height: 1.55; }
.about-page { max-width: 40rem; margin: 0 auto; padding: 2.5rem 16px 3rem; }
.about-page h1, .about-page h2 { font-family: var(--question); color: var(--accent); }
.about-page h1 { font-size: 2rem; margin: 0 0 .6rem; }
.about-page h2 { font-size: 1.3rem; margin: 1.8rem 0 .4rem; }
/* Subheadings on the Privacy page (owner, 2026-11-05; placeholder look). */
.about-page h3 { font-family: var(--question); font-size: 1.05rem; margin: 1.2rem 0 .2rem; }
.about-page h3 + p { margin-top: 0; }
.about-page ul { padding-left: 1.2em; }
.about-page li { margin: .35em 0; }
.about-page a { color: var(--accent); font-weight: 600; }
.about-lead { font-size: 1.1rem; }
.about-play { margin-top: 2rem; font-family: var(--question); font-size: 1.2rem; text-align: center; } /* centred (owner, 2026-11-05) */
/* The small logo at the top of the About and Privacy pages (owner, 2026-11-05); links back to the game. */
.page-logo { display: block; width: 56px; margin: 0 auto 1.4rem; color: var(--accent); }
.page-logo svg { display: block; width: 100%; height: auto; }
/* Settings on those pages: on PCs the gear opens them and the lozenge's logo is hidden (the small logo is at
   the top); on phones the lozenge sits at the bottom left as on the game page, so leave room for it. */
@media (min-width: 821px) { .about .logo { padding: 0; } .about .logo svg { display: none; } }
@media (max-width: 820px) { .about-page { padding-bottom: 6rem; } }

/* Yesterday's Questions (owner, 2026-11-04): a button on the start screen, and on Results a footer
   that floats at the bottom of the list, matching the paper and fading into it. Placeholder look. */
.yesterday-button { display: inline-block; padding: .3em 1em; border-radius: 6px; border: 2px solid var(--field-edge);
  background: var(--field); color: var(--on-field); font-family: var(--sans); font-weight: 600; text-decoration: none; }
.yesterday-button:hover { border-color: var(--focus); }
/* On the start screen it sits in a <p>, which would make it larger than Start; keep it smaller (owner, 2026-11-04). */
#start .yesterday-button { font-size: clamp(13px, .95vw, 19px); }
@media (max-width: 820px) { #start .yesterday-button { font-size: 14px; } }
/* Start is bigger than the other buttons (owner, 2026-11-04). */
#start #start-button { font-size: clamp(20px, 1.6vw, 32px); padding: .4em 1.6em; }
@media (max-width: 820px) { #start #start-button { font-size: 21px; } }
:root[data-theme="dark"] .yesterday-button { border-color: transparent; }
.results-footer { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: center; margin-top: 1em;
  padding: 2.4em 0 .9em; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--paper) 60%); }
.results-footer .yesterday-button { pointer-events: auto; }
@media (max-width: 820px) {
  .results-footer { justify-content: flex-end; } /* clear of the lozenge at the bottom left */
}

/* The Yesterday page (yesterday.html), laid out as the Results screen. Placeholder look. */
.day-title { font-size: clamp(22px, 1.9vw, 38px); margin: 0 0 .5em; }
.yesterday-page #day p, .yesterday-page .earlier { font-size: clamp(16px, 1.2vw, 24px); line-height: 1.35; }
.yesterday-page #day .total-line { text-align: center; font-size: clamp(24px, 2vw, 40px); color: var(--score); margin: 0 0 .3em; }
.day-note { opacity: .9; }
.yesterday-page .board { margin-top: 1.6em; }
.earlier { margin-top: 2em; }
.earlier select { display: block; margin-top: .3em; font: inherit; font-family: var(--sans); padding: .25em .4em; border-radius: 4px;
  border: 2px solid var(--field-edge); background: var(--input); color: var(--ink); max-width: 100%; }
/* Dark mode: the outline in the lightest blue, --on-field (owner, 2026-11-04). */
:root[data-theme="dark"] .earlier select { border-color: var(--on-field); }
:root[data-theme="dark"] .earlier select:focus-visible { outline: 2px solid var(--on-field); outline-offset: 2px; }
.day-optional { opacity: .75; font-size: .85em; }
@media (max-width: 820px) {
  .day-title { font-size: 24px; }
  .yesterday-page #day p, .yesterday-page .earlier { font-size: 18px; }
  .yesterday-page #day .total-line { font-size: 25px; color: var(--score-phone); }
}
@media (min-width: 821px) {
  /* Reach down over the panel's bottom padding, so nothing shows below the footer. */
  .results-footer { bottom: -3.5vw; padding-bottom: .9em; margin-bottom: -3.5vw; } /* the button near the bottom edge (owner, 2026-11-04) */
}

/* The footer links in Settings (owner, 2026-11-04, to try the feel): a thin line, then smaller links. */
.menu-rule { width: 100%; margin: .1em 0; border: 0; border-top: 1px solid var(--line); }
.menu a.menu-small { font-size: .85em; font-weight: 400; color: var(--text-muted); }

/* ---------- Waiting for the server (loading.js; owner, 2026-11-04): a circle running round a rounded box,
   masked by it. The loading screen: the logo and an empty answer box with text in it. ---------- */
:root { --bead-play: #fff; --bead-play-ring: var(--navy); --bead-edge: var(--accent); } /* PLACEHOLDER colours */
:root[data-theme="dark"] { --bead-play: #fff; --bead-play-ring: var(--paper); }
.bead-track { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.bead-frame { z-index: -1; border-radius: 3px; } /* in the answer box: over the timer bar, under the field */
.bead-edge { z-index: 3; }
.bead { fill: var(--bead-edge); }
.bead-frame .bead { fill: var(--bead-play); stroke: var(--bead-play-ring); stroke-width: 1.5; } /* round the timer, seen on both its parts */
.loading .bead-frame .bead { fill: var(--time-full); stroke: none; }
.loading { position: fixed; inset: 0; z-index: 1000; /* over the mute and gear; the debug 🐞, added later, stays on top */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(28px, 3vw, 56px); background: var(--stage); color: #fff; opacity: 0; transition: opacity .2s ease; }
.loading.on { opacity: 1; }
.loading-logo { width: clamp(90px, 8.2vw, 170px); height: auto; }
.loading-entry { width: min(560px, 80vw); --time-full: var(--time-full-stage); }
/* The loading text in the box: the placeholder's colour, in the Guess font (owner to style). */
.loading-text { flex: 1; padding: .05em 0; color: var(--hint); }
@media (max-width: 820px) {
  .loading { background: var(--paper); color: var(--accent); --drained: var(--paper); }
  .loading-logo { width: 96px; }
  .loading-entry { width: 84vw; padding: 2.2vw; --time-full: var(--time-full-paper); }
}

/* Contests on the Results screen (contest.js): the wrong Guess is the button. PLACEHOLDER look for the owner. */
.contest-guess { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline dotted; text-underline-offset: 3px; }
.contest-guess:hover, .contest-guess:focus-visible { color: var(--accent); }
.guesses .contested { font-style: italic; }
.contest-panel .ref-body { padding-bottom: .8em; }
.contest-go { font-weight: 700; padding: .3em 1.1em; border-radius: 4px; border: 2px solid var(--field-edge); background: var(--field); color: var(--on-field); }
.contest-msg:empty { display: none; }

/* "How to play" below Start (owner, 2026-11-04). PLACEHOLDER look: a plain link in the panel's text colour. */
.start-howto { margin: .14em 0 0; } /* a fifth of the gap it had below Start (owner, 2026-11-04) */
.start-howto a { color: inherit; font-size: clamp(17px, 1.3vw, 26px); text-underline-offset: 3px; } /* bigger (owner, 2026-11-04) */
@media (max-width: 820px) { .start-howto a { font-size: 18px; } }

/* "Your Contest … was approved" (decision 43). PLACEHOLDER look. */
.news { margin: 0 0 1em; padding: .6em .8em; border-radius: 6px; background: var(--drained); font-size: clamp(15px, 1.1vw, 22px); line-height: 1.35; }
@media (max-width: 820px) { .news { background: var(--field); color: var(--on-field); } }

/* "Test mode" right below the logo, on the start screen during test days (owner, 2026-11-05): big, in the wonky Fraunces. */
.test-mode { margin: 0 0 .25em; text-align: center; font-family: var(--guess); font-weight: 400; font-variation-settings: 'WONK' 1; font-optical-sizing: auto; font-size: clamp(80px, 9vw, 144px); line-height: 1.05; }
.test-mode[hidden], .stage:has(#start[hidden]) .test-mode { display: none; } /* start screen only */

/* The set's date above the Results (owner, 2026-11-04): Fraunces with its wonky letters, as the Player's Answer. */
.results-date { margin: 0 0 .6em; text-align: center; font-family: var(--guess); font-weight: 500; font-variation-settings: 'WONK' 1; font-optical-sizing: auto;
  font-size: clamp(20px, 1.7vw, 34px); color: var(--date); transform: skewX(-2deg); }
@media (max-width: 820px) { .results-date { font-size: max(19px, 4.6vw); } }