/* Παρά 5 Κουίζ.

   One look, night, in every setting: the show's poster is the only loud thing on screen and everything else steps
   back for it. No cards, no shadows, no stripes. Three ideas carry the design:

   1. The home screen and a challenge link are a title page, like a show's page on a TV app: the poster at the top,
      the logo over where it fades out, one button under the thumb.
   2. In the game the question is the content. It sits on the page, not in a box, and the clock is the rule drawn
      above it: a line that runs out, with the seconds at its end. «Στο παρά πέντε» is the last five seconds.
   3. One accent, the lit-window yellow, means "the thing to do next". Green and red only ever mean right and
      wrong, and always come with a tick or a cross.

   Type is the system's, sized in rem from the phone's own text size (Dynamic Type on an iPhone), with three
   weights: 400, 600, 700. The display face is kept for numbers and the few words set like a title. */

@font-face {
  font-family: "P5 Display"; font-weight: 900; font-display: swap;
  src: url(/fonts/fira-xc-900-greek.woff2) format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "P5 Display"; font-weight: 900; font-display: swap;
  src: url(/fonts/fira-xc-900-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC;
}

:root {
  color-scheme: dark;
  --display: "P5 Display", "Arial Narrow", system-ui, sans-serif;

  --night: #06130a;                       /* the page */
  --raised: #0e2313;                      /* sheets, above the page */
  --fill: rgb(255 255 255 / .075);        /* something you can tap */
  --fill-2: rgb(255 255 255 / .14);       /* the same, pressed or chosen */
  --hairline: rgb(255 255 255 / .12);
  --label: #f4f7f1;
  --label-2: rgb(244 247 241 / .72);
  --label-3: rgb(244 247 241 / .54);
  --yellow: #f6c935;                      /* the lit windows: what to do next */
  --yellow-ink: #1a1400;
  --right: #4ade80;
  --wrong: #ff7a6e;

  /* The iPhone's text styles, as steps from its body size (17px by default). */
  --caption: .76rem;   /* 13 */
  --foot: .88rem;      /* 15 */
  --body: 1rem;        /* 17 */
  --title3: 1.18rem;   /* 20 */
  --title2: 1.3rem;    /* 22 */
  --title1: 1.65rem;   /* 28 */

  --gutter: 20px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; overflow-x: clip; }
/* An iPhone's own text size, larger text included. Elsewhere the browser's default stands. */
@supports (font: -apple-system-body) { html { font: -apple-system-body; } }
body {
  margin: 0; min-height: 100dvh; overflow-x: clip; overflow-wrap: break-word;
  font-family: system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  font-size: var(--body); line-height: 1.32; font-weight: 400;
  color: var(--label); background: var(--night);
  -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased;
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
[hidden] { display: none !important; }
h1, h2, p, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
.ico, button > svg { width: 22px; height: 22px; fill: currentColor; flex: none; }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.view { max-width: 520px; margin: 0 auto; }
.view.enter { animation: enter .32s var(--ease) both; }
@keyframes enter { from { opacity: 0; } }

.muted { color: var(--label-2); }
.small { font-size: var(--foot); }
.num { font-variant-numeric: tabular-nums; }

/* --- buttons: one primary per screen --- */

.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 54px; padding: 8px 24px; border-radius: 999px;
  font-size: 1.06rem; font-weight: 600; text-align: center; line-height: 1.15;
  transition: transform .12s, background .2s, color .2s, opacity .2s;
}
.btn:active:not(:disabled) { transform: scale(.975); }
.btn.primary { background: var(--yellow); color: var(--yellow-ink); }
.btn.tonal { background: var(--fill-2); color: var(--label); }
.btn.plain { min-height: 44px; padding: 6px 16px; color: var(--label-2); font-weight: 600; font-size: var(--body); }
.btn.danger { background: var(--wrong); color: #2a0703; }
.btn:disabled { background: var(--fill); color: var(--label-2); cursor: default; }
.btn svg { width: 20px; height: 20px; }
/* A button that says two things: what it does, and what you'd be going back to. */
.btn small { display: block; font-size: var(--caption); font-weight: 600; opacity: .72; margin-top: 2px; }
.btn.stack { flex-direction: column; gap: 0; min-height: 60px; }

.glyph {
  width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; flex: none;
  color: var(--label-2); transition: background .15s, transform .12s;
}
.glyph:active { background: var(--fill-2); transform: scale(.94); }
/* Where the layout makes something smaller than 44px, its target stays 44px. */
.glyph, .lifeline, .link { position: relative; }
.glyph::after, .lifeline::after, .link::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }

.field {
  width: 100%; min-height: 50px; padding: 12px 16px; border: 0; border-radius: 14px; outline: none;
  background: var(--fill); font-size: max(16px, var(--body)); /* 16px at least, or an iPhone zooms the page in */
}
.field::placeholder { color: var(--label-3); }
.field:focus { box-shadow: 0 0 0 2px var(--yellow); }

/* ===================== the title page: home, and a challenge link ===================== */

/* The poster takes whatever height the words leave and fades into the night; the words start where it has faded,
   so type never sits on a face, a hand or a shoe. One screen, no scrolling, and the button lands under the thumb. */
.page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.page-art { position: relative; flex: 1 1 0; min-height: 30dvh; overflow: hidden; pointer-events: none; background: #0e2715; }
.page-art img { position: absolute; inset: env(safe-area-inset-top, 0px) 0 0; display: block; width: 100%; height: calc(100% - env(safe-area-inset-top, 0px)); object-fit: cover; object-position: 50% 0; }
.page-art::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgb(6 19 10 / .5) 0, transparent 16%),
    linear-gradient(to bottom, transparent 50%, rgb(6 19 10 / .9) 86%, var(--night) 100%);
}
.page.over .page-art img { object-position: 50% 24%; }
.page-body {
  position: relative; flex: none; margin-top: -36px;
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 14px;
  padding: 0 var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
}
.page-body > .btn { width: min(100%, 360px); }
.logo { display: block; width: auto; max-width: min(84%, 340px); height: auto; max-height: 16dvh; filter: drop-shadow(0 6px 18px rgb(0 0 0 / .55)); }
.logo.small { max-height: 9dvh; }
.lockup { display: grid; justify-items: center; gap: 0; }
.lockup-word { margin-top: -2px; font: 900 1.25rem/1 var(--display); text-transform: uppercase; letter-spacing: .3em; margin-right: -.3em; }
.page-line { max-width: 30ch; color: var(--label-2); text-wrap: balance; }
/* Someone who has played: their record takes the pitch's place, and a tap opens their best games. */
.record { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 4px 8px 4px 14px; border-radius: 999px; color: var(--label-2); }
.record svg { width: 18px; height: 18px; color: var(--label-3); }
.record b { color: var(--label); font-weight: 700; font-variant-numeric: tabular-nums; }
.record:active { background: var(--fill); }
.fine { font-size: var(--caption); color: var(--label-3); text-wrap: balance; }
/* The line under the button and the second button of a saved game take the same room, so the logo and the
   yellow button stand in the same place either way. */
.page-body > .fine, .page-body > .btn.second { min-height: 44px; display: grid; place-items: center; }
.page-body > .btn.stack { min-height: 54px; }
.page-nav { display: flex; justify-content: space-between; width: 100%; margin-top: 2px; border-top: 1px solid var(--hairline); }
.page-nav button { flex: 1 1 auto; min-height: 50px; padding: 4px 6px; font-size: var(--foot); font-weight: 600; color: var(--label-2); white-space: nowrap; }
.page-nav button:active { color: var(--label); }

/* A challenge: who is asking, and the number to beat. */
.kicker { font-size: var(--foot); font-weight: 700; color: var(--label-2); }
.page h1, .dare { font-size: var(--title1); font-weight: 700; line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; }
.byline { margin-bottom: -8px; font-size: var(--title2); font-weight: 700; }
.to-beat { display: grid; justify-items: center; }
.page .big-number { font: 900 clamp(4rem, 24vw, 6.2rem)/.92 var(--display); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.to-beat span { color: var(--label-2); }
.versus { display: flex; justify-content: center; gap: 8px 28px; flex-wrap: wrap; color: var(--label-2); }
.versus b { display: block; font: 900 2.3rem/1 var(--display); color: var(--label); font-variant-numeric: tabular-nums; }
.versus .won b { color: var(--yellow); }

/* ===================== the game ===================== */

/* A column the height of the screen: what you read is at the top, what you tap is at the bottom, and any room
   to spare falls between the question and its answers. */
.game {
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; gap: 14px;
  padding: calc(4px + env(safe-area-inset-top, 0px)) var(--gutter) 0;
}
.game > * { min-width: 0; }

/* The top: leave, your lives, the sound. */
.hud { display: flex; align-items: center; justify-content: space-between; margin: 0 -10px; }
.lives { display: flex; gap: 6px; }
.lives svg { width: 22px; height: 22px; }
.lives .on { color: var(--wrong); }
.lives .off { color: var(--fill-2); }
.lives .lost { animation: lost .5s var(--ease); }
@keyframes lost { 30% { transform: scale(1.5); color: var(--wrong); } }

/* The whole game on one line: three stages, a mark for each question. White is right, red is wrong. */
.track { display: flex; gap: 10px; margin-top: -6px; }
.track span { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; }
.track i { height: 4px; border-radius: 2px; background: var(--fill-2); transition: background .3s; }
.track i.ok { background: var(--label); }
/* Wrong is red and half as wide: a shape as well as a colour. */
.track i.bad { background: var(--wrong); transform: scaleX(.5); }
.track i.now { background: var(--yellow); }

.status { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 1.6rem; margin-top: -4px; }
.where, .banner { min-width: 0; font-size: var(--foot); color: var(--label-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.banner { color: var(--yellow); font-weight: 700; animation: rise .4s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
.score { position: relative; flex: none; white-space: nowrap; }
.score strong { font: 900 1.55rem/1 var(--display); font-variant-numeric: tabular-nums; }
.score small { margin-left: 5px; font-size: var(--foot); font-weight: 400; color: var(--label-2); }
.score .of-target { margin-left: 4px; font-size: var(--foot); font-weight: 600; color: var(--label-3); }
.score.ahead strong { color: var(--yellow); }
/* What an answer earned appears beside the points it joins, not over the marks above. */
.gain { position: absolute; right: calc(100% + 10px); bottom: 0; font-size: var(--foot); font-weight: 700; color: var(--right); opacity: 0; pointer-events: none; }
.gain.show { animation: gain 1.2s var(--ease); }
@keyframes gain { 0% { opacity: 0; transform: translateX(-8px); } 20% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateX(8px); } }

/* The question, under its clock. */
/* The clock keeps its place; the question stands in the middle of whatever room is left above the answers. */
.q { flex: 1 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 12px; padding-top: 6px; }
.q-body { align-self: center; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding-bottom: 8px; }
.clock { display: flex; align-items: center; gap: 12px; }
.clock-line { position: relative; flex: 1; height: 4px; border-radius: 2px; background: var(--fill-2); overflow: hidden; }
.clock-line i { --left: 100%; position: absolute; inset: 0 auto 0 0; width: var(--left); border-radius: 2px; background: var(--label); transition: width .1s linear, background .3s; }
.clock b { min-width: 2ch; text-align: right; font: 900 1.9rem/1 var(--display); font-variant-numeric: tabular-nums; transition: color .3s; }
/* Στο παρά πέντε. */
.clock.low i { background: var(--wrong); }
.clock.low b { color: var(--wrong); animation: beat 1s steps(1) infinite; }
@keyframes beat { 50% { transform: scale(1.12); } }
.game.answered .clock { opacity: .4; }
.q-ask { font-weight: 600; color: var(--label-2); }
.q-text { white-space: pre-line; font-size: var(--title2); line-height: 1.24; font-weight: 600; letter-spacing: -.01em; text-wrap: pretty; }
.q-text.short { font-size: var(--title1); line-height: 1.16; }
.q-text.long { font-size: var(--title3); }
.q.swap .q-body, .q.swap ~ .answers .answer { animation: rise .34s var(--ease) both; }
.q.swap ~ .answers .answer:nth-child(2) { animation-delay: .03s; }
.q.swap ~ .answers .answer:nth-child(3) { animation-delay: .06s; }
.q.swap ~ .answers .answer:nth-child(4) { animation-delay: .09s; }

.answers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.answer {
  display: flex; align-items: center; gap: 12px; min-height: 3.5rem; padding: 10px 16px 10px 14px;
  border-radius: 16px; background: var(--fill); text-align: left;
  box-shadow: inset 0 0 0 2px transparent; transition: transform .12s, background .2s, box-shadow .2s, opacity .3s;
}
.answer .key { width: 1.5rem; flex: none; display: grid; place-items: center; font-size: var(--foot); font-weight: 700; color: var(--label-3); transition: color .2s; }
.answer .key svg { width: 22px; height: 22px; }
.answer .txt { flex: 1; min-width: 0; font-weight: 600; line-height: 1.22; }
.answer:active:not(:disabled) { transform: scale(.985); background: var(--fill-2); }
.answer:disabled { cursor: default; }
.answer.selected { background: var(--fill-2); box-shadow: inset 0 0 0 2px var(--yellow); }
.answer.selected .key { color: var(--yellow); }
.answer.removed { opacity: .42; }
.answer.removed .txt { text-decoration: line-through; }
.answer.correct { background: rgb(74 222 128 / .14); box-shadow: inset 0 0 0 2px var(--right); }
.answer.correct .key { color: var(--right); }
.answer.wrong { background: rgb(255 122 110 / .13); box-shadow: inset 0 0 0 2px var(--wrong); animation: shake .35s; }
.answer.wrong .key { color: var(--wrong); }
.answer.dim { opacity: .58; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* One slot between the question and its answers: the helps while you answer, what happened once you have. It
   keeps its room either way, so nothing moves when one gives way to the other. The helps sit by the question they
   work on, out of the thumb's way between the answers and the button: each can be used once and not taken back. */
.under { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; min-height: 44px; }
.under > * { grid-area: 1 / 1; min-width: 0; }
.game.answered .lifelines, .game:not(.answered) .verdict-slot { visibility: hidden; }
.lifelines { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lifelines-label { min-width: 0; font-size: var(--foot); line-height: 1.15; color: var(--label-2); text-wrap: balance; }
.lifelines-set { display: flex; gap: 8px; flex: none; }
.lifeline {
  min-width: 48px; height: 44px; padding: 0 10px; border-radius: 999px; display: grid; place-items: center;
  background: var(--fill); font-weight: 700; font-variant-numeric: tabular-nums; transition: opacity .2s, transform .12s, background .2s;
}
.lifeline:active:not(:disabled) { transform: scale(.94); background: var(--fill-2); }
.lifeline:disabled { color: var(--label-3); cursor: default; }
.lifeline.used { background: none; box-shadow: inset 0 0 0 1px var(--hairline); text-decoration: line-through; }

.verdict-slot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.verdict { display: flex; align-items: center; gap: 8px; min-width: 0; animation: rise .3s var(--ease); }
.verdict svg { width: 22px; height: 22px; }
.verdict.ok svg { color: var(--right); }
.verdict.bad svg { color: var(--wrong); }
.verdict p { min-width: 0; line-height: 1.2; }
.verdict strong { font-weight: 700; }
.verdict span { color: var(--label-2); }
.report-btn { flex: none; padding: 6px 2px 6px 10px; font-size: var(--foot); font-weight: 400; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--label-3); }
.report-btn.done { text-decoration: none; color: var(--label-2); }
.report-btn.done svg { color: var(--right); }

/* The one thing to do next stays at the bottom of the screen, whatever the phone's height and Safari's bars. */
.game-foot {
  position: sticky; bottom: 0; z-index: 5; display: flex; gap: 10px; align-items: stretch;
  margin: 0 calc(-1 * var(--gutter)); padding: 12px var(--gutter) calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to bottom, transparent, var(--night) 12px);
}
.game-foot .btn { flex: 1; }
.game-foot .btn.hold { flex: none; padding: 8px 20px; }
/* The next question comes by itself: the button fills up as the seconds pass. */
.btn.next.auto { position: relative; overflow: hidden; isolation: isolate; }
.btn.next.auto::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(0 0 0 / .16);
  transform-origin: 0 50%; animation: auto-next var(--auto, 3s) linear var(--auto-at, 0s) both;
}
@keyframes auto-next { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* In a challenge: the score to beat and how far off it you are, on tall screens. Short ones show it by your score. */
.target { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: -8px; font-size: var(--foot); color: var(--label-2); }
.target b { color: var(--label); font-variant-numeric: tabular-nums; }
.target.ahead .target-gap { color: var(--yellow); font-weight: 700; }
.of-target { display: none; }

/* A stage begins: its number, its name, its pace. The clock starts when you say so. */
.game.intro-on .q, .game.intro-on .answers, .game.intro-on .under, .game.intro-on .game-foot, .game.intro-on .status, .game.intro-on .target { display: none; }
.intro { flex: 1; display: flex; flex-direction: column; gap: 14px; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); animation: rise .45s var(--ease); }
.intro-main { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: center; text-align: center; gap: 8px; }
.intro-number { font: 900 clamp(7rem, 40vw, 10.5rem)/.82 var(--display); }
.intro h2 { margin-top: -2px; font: 900 var(--title1)/1.05 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.intro-pace { margin-top: 6px; font-size: var(--title3); font-weight: 600; line-height: 1.3; }
.intro-note { max-width: 30ch; color: var(--label-2); text-wrap: balance; }

/* ===================== the result ===================== */

.page.result .page-art { flex: 0 0 auto; height: min(30dvh, 300px); min-height: 0; }
.page.result .page-body { gap: 10px; }
.result-title { font-size: var(--foot); font-weight: 700; color: var(--label-2); }
.result-sub { color: var(--label-2); }
.result-extra b { color: var(--yellow); font-weight: 700; }
.result-extra, .result-note { max-width: 32ch; font-size: var(--foot); color: var(--label-2); text-wrap: balance; }
.result-actions { width: min(100%, 360px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 10px; }
/* What else there is: plain rows, the way a settings list reads. */
.rows { width: 100%; margin-top: 8px; border-top: 1px solid var(--hairline); text-align: left; }
.rows #r-board { display: contents; }
.rows button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 2px; border-bottom: 1px solid var(--hairline); font-weight: 600; text-align: left; }
.rows span { flex: 1; min-width: 0; }
.rows small { flex: none; max-width: 55%; font-size: var(--foot); font-weight: 400; color: var(--label-2); text-align: right; }
.rows svg { width: 18px; height: 18px; color: var(--label-3); }
.rows button:active { background: var(--fill); }
.rows .done svg { color: var(--yellow); }

/* ===================== sheets ===================== */

.sheet {
  position: fixed; width: 100%; max-width: 520px; max-height: 88dvh; margin: auto auto 0; padding: 0; border: 0; overflow: hidden;
  border-radius: 28px 28px 0 0; background: var(--raised); color: var(--label);
}
.sheet[open] { display: flex; flex-direction: column; animation: sheet-in .34s var(--ease); }
.sheet.closing { animation: sheet-out .2s ease-in forwards; }
.sheet::backdrop { background: rgb(2 8 4 / .62); }
.sheet.closing::backdrop { opacity: 0; transition: opacity .2s; }
@keyframes sheet-in { from { transform: translateY(100%); } }
@keyframes sheet-out { to { transform: translateY(100%); } }
/* The grabber is a real handle: drag the sheet down by its top to put it away. */
.sheet-grip { flex: none; display: grid; place-items: center; height: 24px; margin: -4px 0 0; touch-action: none; cursor: grab; }
.sheet-grip::before { content: ""; width: 36px; height: 5px; border-radius: 3px; background: var(--fill-2); }
.sheet .sheet-close { position: absolute; top: 10px; right: 10px; z-index: 2; background: var(--fill); width: 36px; height: 36px; }
.sheet-close svg { width: 18px; height: 18px; }
.sheet-head, .sheet-body > h2:first-child, .credits-title { padding-right: 44px; }
.sheet-body {
  display: flex; flex-direction: column; gap: 14px; overflow: hidden auto; overscroll-behavior: contain;
  padding: 8px var(--gutter) calc(20px + env(safe-area-inset-bottom, 0px));
}
.sheet-head { display: grid; gap: 4px; }
.sheet-head h2, .sheet h2 { font-size: var(--title2); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.sheet-head h2, .sheet-head p { text-wrap: balance; }
.sheet-head p { color: var(--label-2); }
/* A sheet's own button stays in view however long the sheet is. */
.sheet .stay { position: sticky; bottom: calc(-20px - env(safe-area-inset-bottom, 0px)); z-index: 1; margin: 0 calc(-1 * var(--gutter)) calc(-20px - env(safe-area-inset-bottom, 0px)); padding: 12px var(--gutter) calc(18px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to bottom, transparent, var(--raised) 12px); display: grid; gap: 8px; }
.sheet-items { display: grid; border-top: 1px solid var(--hairline); }
.sheet-item { display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 8px 2px; border-bottom: 1px solid var(--hairline); text-align: left; font-weight: 600; }
.sheet-item svg { color: var(--label-2); }
.sheet-item span { flex: 1; min-width: 0; }
.sheet-item small { color: var(--label-2); font-weight: 400; font-size: var(--foot); }
.sheet-item:active { background: var(--fill); }
.sheet-item[aria-pressed="true"] svg { color: var(--yellow); }
.sheet-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.sheet-actions .btn { flex: 1 1 140px; }
.sheet .fine { text-align: center; }

/* The rules: four facts and one line. */
.rules-list { display: grid; gap: 14px; }
.rules-list li { display: grid; grid-template-columns: 3.3rem minmax(0, 1fr); align-items: baseline; }
.rules-list b:first-child { font: 900 var(--title1)/1 var(--display); font-variant-numeric: tabular-nums; }
.rules-list strong { font-weight: 700; }
.rules-list span { color: var(--label-2); }

/* Your best games, and the week's leaderboard. */
.score-list { display: grid; border-top: 1px solid var(--hairline); }
.score-list li { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: baseline; gap: 2px 10px; padding: 12px 2px; border-bottom: 1px solid var(--hairline); }
.rank { font-size: var(--foot); font-weight: 700; color: var(--label-3); font-variant-numeric: tabular-nums; }
.score-list li:first-child .rank, .score-list li.mine .rank { color: var(--yellow); }
.score-main { min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score-pts { font-weight: 700; font-variant-numeric: tabular-nums; }
.score-meta { grid-column: 2 / -1; font-size: var(--foot); color: var(--label-2); }
.score-list li.mine .score-main { color: var(--yellow); }
.board-me { font-weight: 600; }

/* What you answered. */
.recap { display: grid; border-top: 1px solid var(--hairline); }
.recap-row { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.recap-mark svg { width: 22px; height: 22px; }
.recap-row.ok .recap-mark { color: var(--right); }
.recap-row.bad .recap-mark { color: var(--wrong); }
.recap-body { display: grid; gap: 4px; min-width: 0; justify-items: start; }
.recap-q { font-weight: 600; white-space: pre-line; }
.recap-a { color: var(--label-2); }
.recap-a b { color: var(--label); font-weight: 600; }
.link { min-height: 32px; font-size: var(--foot); font-weight: 600; color: var(--label-2); text-decoration: underline; text-underline-offset: 3px; }
.nb { white-space: nowrap; }
.recap-row { grid-template-columns: 26px minmax(0, 1fr) 44px; }
.recap-row .glyph { align-self: start; margin: -8px -8px 0 0; color: var(--label-3); }
.recap-row .glyph svg { width: 18px; height: 18px; }
.recap-row .glyph.done { color: var(--right); }
.recap .reported { font-size: var(--foot); color: var(--label-3); }

/* Reporting a question. */
.report-form, .name-form { display: grid; gap: 14px; }
.report-reasons { border: 0; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--hairline); }
.reason { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 8px 2px; border-bottom: 1px solid var(--hairline); font-weight: 600; cursor: pointer; }
/* A ring that fills with the yellow when it's the one chosen: clearly empty, not greyed out. */
.reason input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--label-3); transition: box-shadow .15s; }
.reason input:checked { box-shadow: inset 0 0 0 7px var(--yellow); }
.note-field, .name-field { display: grid; gap: 8px; font-weight: 600; }
.note-field small, .name-field small { font-weight: 400; color: var(--label-2); }
.note-field textarea { resize: none; line-height: 1.3; }
.note-count { justify-self: end; font-size: var(--caption); font-variant-numeric: tabular-nums; }
.steps { display: grid; gap: 12px; padding-left: 1.4rem; list-style: decimal; }
.steps svg { width: 20px; height: 20px; vertical-align: -4px; color: var(--yellow); }

/* Credits. */
.credits { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.credits-title { font: 900 var(--title1)/1 var(--display); text-transform: uppercase; letter-spacing: .04em; }
.credits dl { display: grid; gap: 12px; }
.credits dt { font-size: var(--foot); color: var(--label-2); }
.credits dd { font-weight: 600; }
.credits .memory { padding-top: 16px; border-top: 1px solid var(--hairline); color: var(--label-2); }
.credits .memory b { color: var(--label); font-weight: 600; }
.team-note { font-size: var(--foot); color: var(--label-3); }

/* ===================== moments ===================== */

/* Before a first game: a dedication, the way a film opens with one. It passes by itself. */
.dedication {
  position: fixed; inset: 0; z-index: 80; display: grid; grid-template-columns: minmax(0, 1fr); place-content: center; justify-items: center; gap: 18px;
  padding: 32px; text-align: center; background: var(--night); animation: enter .6s ease both;
}
.dedication.leaving { animation: leave .5s ease forwards; }
@keyframes leave { to { opacity: 0; } }
.dedication p { max-width: 26ch; text-wrap: balance; }
.dedication .thanks { font-size: var(--title2); font-weight: 600; line-height: 1.25; animation: rise .9s .25s var(--ease) both; }
.dedication .thanks { color: var(--label-2); }
.dedication .thanks b { font-weight: 700; color: var(--label); }
.dedication .memory { color: var(--label-2); animation: rise .9s .9s var(--ease) both; }
.dedication .thanks b { white-space: nowrap; }
.dedication .btn { position: absolute; left: var(--gutter); right: var(--gutter); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); max-width: 360px; margin: 0 auto; animation: enter .6s 1.4s ease both; }

/* At the top, where a phone's own notices arrive, and clear of the buttons, which are all at the bottom. */
.toast {
  position: fixed; z-index: 90; left: 50%; top: calc(12px + env(safe-area-inset-top, 0px)); transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 40px); padding: 12px 18px; border-radius: 16px;
  background: #f4f7f1; color: #10180f; font-size: var(--foot); font-weight: 600; text-align: center;
}
.toast.show { animation: toast-in .3s var(--ease); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -10px); } }

.empty { min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 24px; text-align: center; }

/* Screens change into one another instead of cutting (where the browser can). */
@view-transition { navigation: none; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; animation-timing-function: var(--ease); }

/* ===================== fitting the screen ===================== */

/* Shorter phones, and Safari with its bars showing: the same screen, a little tighter. A long question's own
   text steps down in app.js, never below the body size; past that the page scrolls under the pinned button. */
@media (max-height: 760px) {
  .game { gap: 11px; }
  .q { gap: 10px; padding-top: 2px; }
  .answers { gap: 7px; }
  .answer { min-height: 3.15rem; padding: 8px 14px 8px 12px; }
  .game-foot { padding-top: 10px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .page-body { gap: 12px; }
}
@media (max-height: 640px) {
  .game { gap: 8px; }
  .hud .glyph { width: 40px; height: 40px; }
  .q-text { font-size: var(--title3); line-height: 1.22; }
  .q-text.short { font-size: var(--title2); }
  .q-text.long { font-size: 1.06rem; }
  .clock b { font-size: 1.6rem; }
  .answers { gap: 6px; }
  .answer { min-height: 2.85rem; padding: 6px 12px 6px 10px; border-radius: 14px; }
  .under { min-height: 40px; }
  .game-foot .btn { min-height: 48px; }
  .game-foot { padding-top: 8px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .page-body { gap: 9px; }
  .page-body > .btn { min-height: 50px; }
  .page-nav button { min-height: 44px; }
  .intro-number { font-size: 6rem; }
  .page .big-number { font-size: 3.7rem; }
  .page.result .page-body { gap: 8px; }
}
/* A question that still doesn't fit (long lines of dialogue, long answers) gets the tighter layout whatever the
   screen's height: app.js sets this, for that question only. */
.game.tight { gap: 8px; }
.game.tight .q { gap: 8px; padding-top: 0; }
.game.tight .q-body { padding-bottom: 0; gap: 6px; }
.game.tight .q-text { font-size: var(--title3); line-height: 1.2; }
.game.tight .q-text.long { font-size: 1.06rem; }
.game.tight .answers { gap: 6px; }
.game.tight .answer { min-height: 2.75rem; padding: 6px 12px 6px 10px; border-radius: 14px; }
.game.tight .answer .txt { line-height: 1.18; }
.game.tight .under { min-height: 40px; }
.game.tight .game-foot { padding-top: 8px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
.game.tight .game-foot .btn { min-height: 48px; }

/* In a challenge on a short screen the score to beat sits by your own. */
@media (max-height: 700px) {
  .game .target { display: none; }
  .of-target { display: inline; }
}
@media (max-width: 340px) {
  :root { --gutter: 14px; }
  .page-nav button { font-size: var(--caption); }
  .lifelines-label { display: none; }
  .lifelines { justify-content: center; }
}

/* A phone held sideways: the poster beside the words, the question beside the answers. */
@media (orientation: landscape) and (max-height: 540px) {
  .view { max-width: none; }
  .page { flex-direction: row; align-items: center; }
  .page-art, .page.result .page-art { flex: 1 1 0; align-self: stretch; height: auto; min-height: 100dvh; }
  .page-art::after { background: linear-gradient(to right, transparent 55%, var(--night) 100%); }
  .page-body { flex: 1 1 0; margin: 0; padding: 12px max(var(--gutter), env(safe-area-inset-right, 0px)) 12px var(--gutter); gap: 8px; }
  .logo { max-height: 26dvh; }
  .game {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: auto auto auto 1fr auto; column-gap: 22px; row-gap: 6px;
    padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
  }
  .hud, .track, .status, .target, .intro { grid-column: 1 / -1; }
  .q { grid-column: 1; grid-row: 4 / span 2; }
  .answers, .under, .game-foot { grid-column: 2; }
  .answers { gap: 6px; }
  .answer { min-height: 2.7rem; padding: 5px 12px; }
  .game-foot { position: static; margin: 0; padding: 4px 0 calc(8px + env(safe-area-inset-bottom, 0px)); background: none; }
  .game-foot .btn { min-height: 44px; }
  .game { min-height: 100dvh; }
  .intro { padding: 0 0 8px; gap: 6px; }
  .intro-main { gap: 2px; }
  .intro-number { font-size: 3.2rem; }
  .intro h2 { font-size: var(--title2); }
  .intro-pace { margin-top: 0; font-size: var(--body); }
  .intro-note { display: none; }
  .intro .btn { min-height: 44px; }
  .q { padding-top: 0; }
  .under { min-height: 44px; }
}

/* Tablets and desktops: the same phone-sized column, centred, and sheets as dialogs. */
@media (min-width: 720px) and (min-height: 541px) {
  .sheet { margin: auto; border-radius: 28px; max-height: min(84dvh, 760px); }
  .sheet[open] { animation: dialog-in .24s var(--ease); }
  .sheet.closing { animation: dialog-out .16s ease-in forwards; }
  .sheet-grip { display: none; }
  .sheet-body { padding-top: 26px; padding-bottom: 24px; }
  .game { padding-top: 24px; }
}
@keyframes dialog-in { from { opacity: 0; transform: scale(.96) translateY(8px); } }
@keyframes dialog-out { to { opacity: 0; transform: scale(.97); } }

@media (prefers-reduced-motion: reduce) {
  /* No transitions at all (not very short ones: a transition of any length makes a change land a frame late, and
     the layout is measured straight after it). */
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
  .btn.next.auto::before { animation-duration: var(--auto, 3s) !important; }
}
/* More contrast, when the phone asks for it. */
@media (prefers-contrast: more) {
  :root { --label-2: rgb(244 247 241 / .9); --label-3: rgb(244 247 241 / .78); --fill: rgb(255 255 255 / .12); --fill-2: rgb(255 255 255 / .22); --hairline: rgb(255 255 255 / .34); }
  .answer { box-shadow: inset 0 0 0 1px var(--hairline); }
}