/* Lightning Round — style.css. Forked from football/quickfire/css/style.css.
 *
 * Palette, type and the mark come from /shared/xi-tokens.css; every value
 * here is a token, so the game follows the family into dark mode.
 *
 * Right FILLS; wrong keeps the paper and goes to a dashed edge — QuickFire's
 * rule, so the verdict never rests on hue alone.
 */

*{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}

/* ---- 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;margin:0 auto}
.pmCard h1{font-size:44px;line-height:1;margin:2px 0 12px;text-transform:uppercase}
.pmQuote{font-style:italic;color:var(--ink-soft);margin:0 0 14px;font-size:14px}
.pmQuote span{display:block;font-style:normal;font-size:12px;color:var(--ink-faint);margin-top:2px}
.pmLede{color:var(--ink-soft);margin:0 0 18px}
.todayDone{margin:0 0 14px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--tint);font-family:var(--disp);font-weight:600;font-size:16px;
  text-transform:uppercase;letter-spacing:.04em}
.todayDone[hidden]{display:none}

.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}
.kick[hidden]{display:none}

.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:disabled{opacity:.55;cursor:default}
.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}
/* The archive is a link dressed as the second way in. */
a.mode{text-decoration:none;box-sizing:border-box}

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

/* Sixty seconds draining from full. Gold while there is time, danger in the
   last ten. */
.timer{position:relative;height:6px;background:var(--tint-strong);border-radius:3px;
  overflow:hidden;margin:4px 0 12px}
.timerFill{position:absolute;inset:0 auto 0 0;width:100%;background:var(--xi-ink)}
.timerFill.late{background:var(--danger)}
.timer.hit{animation:hit .35s ease}
@keyframes hit{0%{transform:translateX(0)}30%{transform:translateX(-4px)}60%{transform:translateX(3px)}100%{transform:translateX(0)}}

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

.clue{font-family:var(--disp);font-weight:600;font-size:24px;line-height:1.2;margin:14px 0 4px}

/* TWO BY TWO, A B over C D (the owner, 29 Sep 2026). Every cell the same
   height, so a long answer wraps in its own cell and the grid stays square to
   the eye; the text is centred so a short answer does not sit in a corner. */
.options{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:9px;margin:18px 0 12px}
.option{width:100%;min-height:var(--tap);padding:13px 12px;text-align:center;
  overflow-wrap:anywhere;hyphens:auto;
  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}
.option.chosen{border-color:var(--ink-soft)}
/* RIGHT FILLS GREEN, WRONG FILLS RED (the owner, 29 Sep 2026: "Highlight in
   amber or red if wrong / Highlight the correct option in green"), in the
   family's own tokens. Not on hue alone: each carries its mark, a tick or a
   cross, so the two differ for a player who cannot tell the colours apart. */
.option.right{background:var(--ok);border-color:var(--ok);color:var(--paper)}
.option.wrong{background:var(--danger);border-color:var(--danger);color:var(--paper)}
.option.right::after{content:" ✓"}
.option.wrong::after{content:" ✕"}
.option:disabled:not(.right):not(.wrong){opacity:.45}

/* THE LOOK AFTER A MISS, filling 0 to 100% across it. Always in the layout,
   only drawn when on, so the screen does not jump when it appears. */
.lookBar{height:6px;border-radius:3px;background:var(--tint-strong);overflow:hidden;
  margin:0 0 10px;visibility:hidden}
.lookBar.on{visibility:visible}
.lookFill{height:100%;width:0;background:var(--danger)}
.lookBar.on .lookFill{animation:lookFill var(--look,1000ms) linear forwards}
@keyframes lookFill{from{width:0}to{width:100%}}

/* THE COST, AT THE CLOCK: placed under the bar's clock by game.js. */
#screenGame{position:relative}
.penalty{position:absolute;left:0;top:0;z-index:5;pointer-events:none;opacity:0;
  font-family:var(--disp);font-weight:700;font-size:30px;line-height:1;color:var(--paper);
  background:var(--danger);border-radius:8px;padding:4px 10px}
.penalty.show{animation:penaltyPop 1.2s ease-out forwards}
@keyframes penaltyPop{0%{opacity:0;transform:scale(.6)}15%{opacity:1;transform:scale(1.15)}
  30%{transform:scale(1)}75%{opacity:1}100%{opacity:0;transform:translateY(6px)}}

.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.good{color:var(--ok)}
.feedback.miss{color:var(--danger)}

/* ---- the result: the family's panel (shared/xi-fulltime.css) ----------- */

/* Reporting a question, folded under the panel so the four blocks stay four. */
.lrReport{max-width:460px;margin:14px auto 0;width:100%;text-align:left;
  border:1px solid var(--line);border-radius:10px;background:var(--card);padding:10px 14px}
.lrReport 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}
.lrReportNote{margin:4px 0 10px;font-size:13px;color:var(--ink-soft)}
.lrReport ol{margin:0;padding:0 0 0 18px}
.lrReport li{margin:0 0 12px}
.lrReportClue{margin:0 0 6px;font-size:14px;line-height:1.4}
.lrReportBtns{display:flex;flex-wrap:wrap;gap:6px}
.lrReportBtns .btn{min-height:var(--tap);padding:6px 10px;font-size:13px}  /* the family's tap floor (was 36px) */
.lrSource{margin:8px 0 0;font-size:13px;color:var(--ink-soft)}
.lrSourceName{margin:0 0 4px;font-weight:600}
.lrSourceName a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.lrSourceText{margin:0;padding:6px 10px;border-left:3px solid var(--line);font-style:italic;line-height:1.45;overflow-wrap:anywhere}
.lrReportSaid{margin:6px 0 0;font-size:13px;color:var(--ink-soft)}

.ftActions{display:flex;flex-direction:column;max-width:460px;margin:0 auto;width:100%}

.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.quiet{border-color:transparent;background:none;color:var(--ink-soft);margin-top:10px}

/* ---- the locked screen (QuickFire's) ------------------------------------

   While playing, the page is the screen and nothing scrolls; game.js
   checkRoom() takes body.locked off when the question cannot fit. */
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}
/* NOT overflow:hidden: the family bar is wider than the column by design
   (shared/xi-matchbar.css) and would be clipped. body.locked already stops
   the page scrolling. */
body.locked #screenGame{overflow:visible;container-type:size}
body.locked #screenGame>:not(.clue){flex:none}
body.locked .timer{height:max(6px,.9cqh);margin-bottom:1.4cqh}
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(15px,min(4.2cqw,3.2cqh),30px);
  min-height:max(var(--tap),12cqh);padding:1cqh 10px;border-radius:12px}
body.locked .lookBar{height:max(6px,.8cqh);margin:0 0 1cqh}
body.locked .feedback{margin:0 0 .8cqh;font-size:clamp(14px,2.2cqh,22px)}

@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)}
.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}