/* QuickFire XI — style.css
 *
 * Palette, type and the mark come from ../shared/xi-tokens.css and are not
 * restated here. Nothing in this file names a colour: every value is a token,
 * so the game follows the family into dark mode without a second palette.
 *
 * THE ONE THING THIS GAME NEEDS THAT THE OTHERS DO NOT.
 * A question is four buttons and one of them is right, so the verdict has to
 * read instantly and cannot rest on hue alone — a third of the men who will
 * play this cannot be relied on to tell the green from the red. Right FILLS;
 * wrong keeps the paper and goes to a dashed edge. Different weight, different
 * edge, different fill: three carriers before colour is counted.
 *
 * ON THE GREEN. --pitch means "you got something right" and is spent on the
 * kick-off button and the goal state, nowhere else. The gold is the clock's:
 * the match minute and what the question is currently worth. That pairing is
 * already the family's — the word search's .clock is --xi-ink too.
 */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.45 var(--body)}
button,input,textarea{font:inherit}
button{touch-action:manipulation;cursor:pointer}
h1,h2{font-family:var(--disp);letter-spacing:.01em;margin:0}
:focus-visible{outline:2px solid var(--pitch);outline-offset:2px}

.app{max-width:560px;margin:0 auto;padding:14px 16px 24px}

.screen{display:flex;flex-direction:column}
.screen[hidden]{display:none}

.eyebrow{font-family:var(--disp);font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;font-size:12px;color:var(--pitch);margin:0 0 4px}
.tiny{font-size:12px;color:var(--ink-faint);margin:10px 0 0}
.legal{font-size:11px;color:var(--ink-faint);margin:22px 0 0;line-height:1.5}

/* ---- pre-match --------------------------------------------------------- */

.prematch{display:grid;place-items:center;padding:22px 0}
.pmCard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;max-width:460px;width:100%;text-align:center}
.pmCard h1{font-size:44px;line-height:1;margin:2px 0 10px;text-transform:uppercase}
.pmDate{font-family:var(--disp);font-weight:600;font-size:19px;color:var(--ink-soft);
  text-transform:uppercase;letter-spacing:.05em;margin:0 0 12px}
.pmLede{color:var(--ink-soft);margin:0 0 18px}

.kick{width:100%;min-height:var(--tap);border:0;border-radius:10px;background:var(--pitch);
  color:#fff;font-family:var(--disp);font-weight:700;font-size:19px;text-transform:uppercase;
  letter-spacing:.06em;padding:11px}
.kick:hover{background:var(--pitch-deep)}
.kick:disabled{opacity:.55;cursor:default}

/* A second way in, offered without competing with the kick-off. */
.mode{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:10px;min-height:var(--tap);padding:11px 13px;text-align:left;
  background:var(--tint);border:1px solid var(--line);border-radius:10px;color:var(--ink)}
.mode:hover{background:var(--card);border-color:var(--ink-faint)}
.mode strong{font-family:var(--disp);text-transform:uppercase;letter-spacing:.04em;font-size:15px}
.mode span{font-size:12px;color:var(--ink-soft)}
.mode[hidden]{display:none}

.challengeNote{margin:0 0 14px;padding:10px 12px;border:1px dashed var(--line);
  border-radius:10px;font-size:13px;line-height:1.5;color:var(--ink-soft);text-align:left}
.challengeNote[hidden]{display:none}

/* ---- the match clock --------------------------------------------------- */

/* The strip is the 0'-90' of the question, with the half-time notch where you
   would expect it. Amber while the value is worth having, danger past the hour. */
.strip{position:relative;height:4px;background:var(--tint-strong);border-radius:2px;
  overflow:hidden;margin-bottom:12px}
.stripFill{position:absolute;inset:0 auto 0 0;width:0;background:var(--xi-ink);
  transition:width .22s linear,background-color .4s ease}
.stripFill.late{background:var(--danger)}
.notch{position:absolute;top:0;bottom:0;width:1px;background:var(--paper);opacity:.9}
.notch.half{width:2px}

.matchHead{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-bottom:6px}
.progress{font-family:var(--disp);font-weight:600;font-size:15px;color:var(--ink-soft);
  text-transform:uppercase;letter-spacing:.06em}
.clock{font-family:var(--disp);font-weight:700;font-size:38px;line-height:1;
  color:var(--xi-ink);min-width:66px;text-align:right}
.clock .prime{font-size:.5em;vertical-align:super;opacity:.75}

/* ---- the question ------------------------------------------------------ */

.clue{font-family:var(--disp);font-weight:600;font-size:24px;line-height:1.2;
  margin:14px 0 4px}
/* ---- the four, which are the board now --------------------------------- */

/* THE TYPING BOARD IS GONE. Everything between the clue and the feedback used
   to be a row of letter cells, a transparent input to raise the phone keyboard,
   and the gold chips the clock filled in. None of it survives four options —
   there is nothing to type and nothing to reveal — so it is deleted rather than
   left unreferenced. A stylesheet that still describes a board the markup has
   not got is a map of a building that has been pulled down.

   ONE COLUMN, NOT A GRID OF TWO. Answers here are club and player names of very
   uneven length; a two-up grid sets the button width by the longest and wraps
   the rest, so the four stop being scannable at exactly the moment the clock is
   running. Full width reads top to bottom in one movement. */
.options{display:flex;flex-direction:column;gap:9px;margin:18px 0 12px}

.option{width:100%;min-height:var(--tap);padding:13px 15px;text-align:left;
  background:var(--paper);border:1.5px solid var(--line);border-radius:11px;
  color:var(--ink);font-family:var(--disp);font-weight:600;
  font-size:clamp(16px,4.4vw,19px);line-height:1.25;
  transition:border-color .12s ease,background .12s ease}
.option:hover:not(:disabled){border-color:var(--ink-faint)}
.option:active:not(:disabled){transform:translateY(1px)}
.option:disabled{cursor:default}

/* What was pressed, before the server has said. The clock is running while
   this request is in flight, so the press has to acknowledge itself. */
.option.chosen{border-color:var(--ink-soft)}

/* THE VERDICT, which arrives from the server rather than from this page.
   Colour is not the only carrier: right fills, wrong keeps the paper and goes
   to a dashed edge, so the two differ in weight as well as in hue. */
.option.right{background:var(--ok);border-color:var(--ok);color:var(--paper)}
.option.wrong{border-style:dashed;border-color:var(--danger);color:var(--danger)}
.option:disabled:not(.right):not(.wrong){opacity:.45}

/* ---- boards that have been --------------------------------------------- */

.archiveList{display:flex;flex-direction:column;gap:7px;margin:14px 0 18px;
  max-height:52vh;overflow-y:auto}

.archiveItem{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  min-height:var(--tap);padding:10px 13px;
  border:1px solid var(--line);border-radius:10px;
  color:var(--ink);text-decoration:none;
  font-family:var(--disp);font-size:15px}
.archiveItem span{color:var(--ink-soft);font-size:13px;letter-spacing:.06em}
.archiveItem:hover{border-color:var(--ink-faint)}
.archiveItem.current{border-color:var(--pitch);border-width:1.5px}

/* ---- feedback ---------------------------------------------------------- */

.feedback{min-height:1.5em;margin:0 0 14px;font-family:var(--disp);font-weight:600;
  font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)}
.feedback.goal{color:var(--ok)}
.feedback.miss{color:var(--xi-ink)}
.feedback.fulltime{color:var(--danger)}
.feedback.sub{color:var(--ink)}

/* ---- controls ---------------------------------------------------------- */

.subBtn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:10px;min-height:var(--tap);padding:10px 13px;
  background:none;border:1px dashed var(--line);border-radius:10px;color:var(--ink-soft);
  font-family:var(--disp);font-size:14px;text-transform:uppercase;letter-spacing:.08em}
.subBtn:not(:disabled):hover{color:var(--ink);border-color:var(--ink-faint);background:var(--tint)}
.subBtn:disabled{opacity:.45;cursor:default}
.subCost{color:var(--xi-ink)}
.subBtn:disabled .subCost{color:var(--ink-faint)}

/* Score and the value of the question, paired — the family's existing shape. */
.scoreCluster{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:14px}
.scoreBox{background:var(--pitch-deep);color:#fff;border-radius:10px;padding:6px 12px;
  display:flex;align-items:baseline;gap:6px}
.scoreBox .label{font-size:11px;letter-spacing:.09em;text-transform:uppercase;opacity:.75}
.scoreVal{font-family:var(--disp);font-weight:700;font-size:24px}
.worthBox{display:flex;align-items:baseline;gap:6px;color:var(--ink-soft)}
.worthBox .label{font-size:11px;letter-spacing:.09em;text-transform:uppercase}
.worthVal{font-family:var(--disp);font-weight:700;font-size:24px;color:var(--xi-ink)}
.worthVal.low{color:var(--danger)}

/* ---- full time --------------------------------------------------------- */

/* The rest of Full Time is the family's panel (shared/xi-fulltime.css). */

.btn{min-height:var(--tap);padding:9px 14px;border:1px solid var(--line);border-radius:10px;
  background:var(--card);color:var(--ink);font-weight:600;font-size:14px}
.btn:hover{border-color:var(--ink-faint)}
.btn.quiet{border-color:transparent;background:none;color:var(--ink-soft);margin-top:16px}

/* ---- THE LOCKED SCREEN ---------------------------------------------------

   The owner's ruling, 24 Sep 2026: while playing, the page is the screen and
   nothing scrolls, at every size, with the elements scaling up rather than
   sitting small in a scrolling page. body.locked is set by game.js checkRoom()
   during a round and at Full Time, and taken off when the question cannot fit
   (large text, a very short screen) -- then every rule here stands down.

   The column is the viewport under the bar: the strip and the clock, then the
   clue taking whatever height is left, then the four, the sub and the score.
   Sizes are in units of the play screen (cqw, cqh), so a tablet or a monitor
   gets bigger type and bigger buttons rather than more empty paper. The
   column stops at 860px: past that a line of clue is too long to read in one
   movement, and the four stop being scannable. */
/* The family's top bar stands in for the strip, the count, the clock and
   the score boxes (shared/xi-matchbar.css). */
#screenGame>.strip,#screenGame>.matchHead,#screenGame>.scoreCluster{display:none}
body.locked{height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column}
body.locked>*{flex:none}
body.locked>footer{display:none}
body.locked>.app{flex:1 1 auto;min-height:0;width:100%;max-width:860px;
  display:flex;flex-direction:column;padding:10px 16px 12px}
body.locked .app>.screen:not([hidden]){flex:1 1 auto;min-height:0}

body.locked #screenGame{overflow:hidden;container-type:size}
/* Everything but the clue keeps its own height. Not `>*` with the clue
   set apart below: an id outranks the clue's class, so the clue was held at
   its own height too and the spare height fell to the bottom of the screen as
   dead space (a quarter of a 412x839 phone, seen on the Play build). */
body.locked #screenGame>:not(.clue){flex:none}
body.locked .strip{height:max(4px,.6cqh);margin-bottom:1.4cqh}
body.locked .progress{font-size:clamp(14px,2.3cqh,22px)}
body.locked .clock{font-size:clamp(30px,6cqh,64px);min-width:0}
/* The clue has the room that is left, centred in it, and game.js shrinks it
   until it fits there: never cut off. */
body.locked .clue{flex:1 1 auto;min-height:0;overflow:hidden;display:flex;align-items:center;
  margin:1cqh 0;font-size:clamp(20px,min(8.4cqw,5.6cqh),56px)}
body.locked .options{gap:max(8px,1.2cqh);margin:0 0 1.2cqh}
body.locked .option{font-size:clamp(16px,min(4.8cqw,3.4cqh),32px);
  min-height:max(var(--tap),9.5cqh);padding:1cqh 16px;border-radius:12px}
body.locked .feedback{margin:0 0 .8cqh;font-size:clamp(14px,2.2cqh,22px)}
body.locked .subBtn{margin-top:0;min-height:max(var(--tap),6.5cqh);font-size:clamp(13px,2cqh,19px)}
body.locked .scoreCluster{margin-top:1.2cqh}
body.locked .scoreVal,body.locked .worthVal{font-size:clamp(22px,3.6cqh,40px)}

/* Full Time: the bar stays, and the result scrolls inside its own panel. */
body.locked #screenResults{overflow-y:auto;overscroll-behavior:contain}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---- how to play ------------------------------------------------------- */
.how{max-width:560px;margin:0 auto;padding:8px 16px 40px;color:var(--ink-soft);font-size:14.5px;line-height:1.55}
.how h2{font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 10px;padding-top:18px;border-top:1px solid var(--line)}
.how p{margin:0 0 10px}
.how b{color:var(--ink)}
/* On a locked play screen the section is out of the way, and as the bar's
   target it opens over the game: a panel the height of the screen that
   scrolls in itself, with the way back at the top. The same as every locked
   game's, so the bar's link does one thing everywhere. */
.how-back{display:none}
body.locked .how{display:none}
body.locked #how:target{display:block!important;position:fixed;inset:0;z-index:60;margin:0;max-width:none;
  overflow:auto;overscroll-behavior:contain;background:var(--paper);padding:14px 16px 40px;box-sizing:border-box}
body.locked #how:target .how-back{display:inline-flex;align-items:center;min-height:var(--tap,44px);padding:0 16px;
  margin:0 0 10px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);
  font-family:var(--disp);font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}

/* ---- reporting a question (the owner, 2 Oct 2026) ------------------------
   Folded under Full Time, one row per question played, in Lightning Round's
   card (friends/lightning: .lrReport) so the family reports one way. Every
   control at the tap floor: as first shipped the summary was 24px and the
   buttons bare text, seen in a browser the same night. */
.qfReport { max-width: 460px; margin: 14px auto 0; width: 100%; text-align: left; font-size: 14px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card); padding: 4px 14px; }
.qfReport summary { cursor: pointer; font-family: var(--disp); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; font-size: 14px; color: var(--ink-soft); min-height: var(--tap);
  display: flex; align-items: center; }
.qfReport ol { list-style: none; margin: 4px 0 10px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.qfReportClue { margin: 0 0 6px; color: var(--ink); line-height: 1.4; }
.qfReportBtns { display: flex; flex-wrap: wrap; gap: 6px; }
.qfReportBtns .btn { font-size: 13px; min-height: var(--tap); padding: 6px 12px; }
.qfReportSaid { margin: 6px 0 0; font-size: 13px; color: var(--ink-soft); }