/* Plus Jakarta Sans (variable 400-800, OFL) in fonts/ here, so the folder can be uploaded on its own. */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/jakarta-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/jakarta-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Green, red and orange belong to answer states only; decoration uses mint, peach and lavender tints. */
:root {
  --bg: #FFF7EC; --glow1: #FFE2C4; --glow2: #FFF0D8;
  --surface: #FFFDF9; --surface2: #FFF4E6; --line: #F1E0CC; --line2: #E3C8AC;
  --text: #251A2E; --muted: #66596E; --accent: #C4511C;
  --brand: #FFBE45; --brand-edge: #E0951A; --brand-ink: #3A2300;
  --lock: #FF8A2A; --lock-edge: #CF640A; --lock-ink: #2E1300;
  --good: #2FB36B; --good-edge: #1C8049; --good-ink: #03210E;
  --bad: #D63339; --bad-edge: #A01D22; --bad-ink: #FFFFFF;
  --veto: #7A4DE8; --veto-edge: #5529C0;
  --mint: #E2F5EC; --mint-edge: #9ED8BD; --mint-ink: #146446;
  --peach: #FFEBD6; --peach-edge: #F3C495; --peach-ink: #9C3F0C;
  --lav: #EEE8FC; --lav-edge: #CBBBF2; --lav-ink: #5132A8;
  --sun: #FFF3C4; --sun-ink: #7A5600;
  --focus: #1D63E0; --shadow: rgb(120 70 20 / 0.16); --scrim: rgb(50 30 20 / 0.45);
  --av-s: 85%; --av-bg: 89%; --av-fg: 30%;
  --r: 1.1em;
  --icon: max(44px, 2.3em);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15111D; --glow1: #2B1A22; --glow2: #1D1830;
    --surface: #211B2D; --surface2: #2A2339; --line: #382E49; --line2: #4D4161;
    --text: #F7F0E8; --muted: #BDB2C8; --accent: #FF9F66;
    --brand-edge: #B97710;
    --mint: #15332A; --mint-edge: #2C6B53; --mint-ink: #8FE3BE;
    --peach: #3A2618; --peach-edge: #7A4A22; --peach-ink: #FFBA8C;
    --lav: #2A2244; --lav-edge: #4D3F80; --lav-ink: #C9B8FF;
    --sun: #3A3015; --sun-ink: #FFD866;
    --focus: #8AB4FF; --shadow: rgb(0 0 0 / 0.5); --scrim: rgb(0 0 0 / 0.6);
    --av-s: 40%; --av-bg: 27%; --av-fg: 80%;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #15111D; --glow1: #2B1A22; --glow2: #1D1830;
  --surface: #211B2D; --surface2: #2A2339; --line: #382E49; --line2: #4D4161;
  --text: #F7F0E8; --muted: #BDB2C8; --accent: #FF9F66;
  --brand-edge: #B97710;
  --mint: #15332A; --mint-edge: #2C6B53; --mint-ink: #8FE3BE;
  --peach: #3A2618; --peach-edge: #7A4A22; --peach-ink: #FFBA8C;
  --lav: #2A2244; --lav-edge: #4D3F80; --lav-ink: #C9B8FF;
  --sun: #3A3015; --sun-ink: #FFD866;
  --focus: #8AB4FF; --shadow: rgb(0 0 0 / 0.5); --scrim: rgb(0 0 0 / 0.6);
  --av-s: 40%; --av-bg: 27%; --av-fg: 80%;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  /* Sized by the shorter fit of width and height, so a 4K TV shows the same layout as 1080p, only sharper. */
  font: 500 clamp(15px, min(1.25vw, 2.2vh), 48px)/1.45 "Plus Jakarta Sans", system-ui, sans-serif;  color: var(--text);
  background: radial-gradient(60em 40em at 100% 100%, var(--glow1), transparent 70%),
    radial-gradient(50em 30em at 0 0, var(--glow2), transparent 70%) var(--bg);
  background-attachment: fixed;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin: 0; }
.i { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
kbd { font: inherit; font-size: 0.7em; font-weight: 700; opacity: 0.7; border: 1px solid currentColor; border-radius: 0.35em; padding: 0 0.35em; }

/* ---------- Header ---------- */
.top {
  width: 100%; max-width: 80em; margin: 0 auto; display: flex; align-items: center; gap: 1em;
  padding: max(10px, 0.7em) max(16px, 2.2em);
}
.logo { display: flex; align-items: center; gap: 0.5em; border: 0; background: none; padding: 0.2em; border-radius: 0.6em; }
.mark {
  width: 1.9em; height: 1.9em; display: grid; place-items: center; border-radius: 0.55em; font-weight: 800; font-size: 1.05em;
  background: var(--brand); color: var(--brand-ink); border: 2px solid var(--brand-edge); box-shadow: 0 2px 0 var(--brand-edge);
}
.word { font-weight: 800; font-size: 1.2em; letter-spacing: -0.03em; }
.word b { color: var(--accent); font-weight: 800; }
.word small { display: block; font-size: 0.5em; font-weight: 600; letter-spacing: 0; color: var(--muted); text-align: left; }
body[data-screen="game"] .word small { display: none; }
/* Section menu of the title screen: links in a pill bar, "O grze" opens a panel (hover, click or Enter). */
.nav { flex: 1; display: flex; justify-content: center; }
.nav-bar { display: flex; align-items: center; gap: 0.2em; padding: 0.3em; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 2px 0 var(--line); }
.nav-link {
  display: inline-flex; align-items: center; gap: 0.35em; padding: 0.45em 0.9em; border: 0; border-radius: 99px; background: none;
  color: var(--text); text-decoration: none; font-weight: 700; font-size: 0.85em; white-space: nowrap;
}
.nav-link:hover, .drop.open > .nav-link { background: var(--surface2); }
.nav-link[aria-current="true"] { background: var(--peach); color: var(--peach-ink); }
.nav-link .chev { width: 1em; height: 1em; transition: transform 0.2s; }
.drop.open .chev { transform: rotate(180deg); }
.nav-link .count { padding: 0.05em 0.5em; border-radius: 99px; background: var(--brand); color: var(--brand-ink); font-size: 0.8em; font-weight: 800; }
.drop { position: relative; }
/* The panel hangs from a transparent bridge, so the pointer can travel to it without closing it. */
.drop-panel { display: none; position: absolute; z-index: 8; top: 100%; left: 50%; width: 22em; margin-left: -11em; padding-top: 0.6em; }
.drop.open .drop-panel { display: block; }
@media (hover: hover) { .drop:hover .drop-panel { display: block; } .drop:hover .chev { transform: rotate(180deg); } }
.drop-panel > div { display: grid; gap: 0.2em; padding: 0.5em; border-radius: 1.1em; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 18px 40px -16px var(--shadow); animation: open 0.2s; }
.sec-link { display: flex; align-items: center; gap: 0.8em; padding: 0.6em 0.7em; border: 0; border-radius: 0.8em; background: none; color: var(--text); text-decoration: none; text-align: left; }
.sec-link:hover { background: var(--surface2); }
.sec-link b { display: block; font-weight: 800; font-size: 0.95em; }
.sec-link small { display: block; color: var(--muted); font-size: 0.8em; }
#menu { display: none; }
.sheet { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6em; margin-top: 0.8em; }
.sheet .sec-link { flex-direction: column; align-items: flex-start; gap: 0.5em; padding: 0.9em; border: 1px solid var(--line); background: var(--surface2); }
.hud { flex: 1; display: none; justify-content: center; gap: 0.5em; min-width: 0; }
.tools { display: flex; align-items: center; gap: 0.5em; margin-left: auto; }
.icon {
  width: var(--icon); height: var(--icon); display: grid; place-items: center; flex: none; padding: 0;
  border: 1.5px solid var(--line2); border-radius: 0.75em; background: var(--surface); color: var(--text);
  box-shadow: 0 2px 0 var(--line);
}
.icon .i { width: 45%; height: 45%; }
/* The sound button shows its state: music off, then all off. */
#mute[data-mode="1"] { background: var(--peach); border-color: var(--peach-edge); color: var(--peach-ink); }
#mute[data-mode="2"] { background: var(--surface2); color: var(--muted); border-style: dashed; }
.toast {
  position: fixed; z-index: 11; top: max(64px, 4.2em); left: 0; right: 0; width: max-content; max-width: calc(100% - 32px); margin: 0 auto;
  padding: 0.5em 1em; border-radius: 99px; background: var(--text); color: var(--bg); font-weight: 700; font-size: 0.85em;
  box-shadow: 0 10px 24px -12px var(--shadow); animation: open 0.2s;
}
body:not([data-screen="home"]) .nav { display: none; }
body[data-screen="game"] .hud { display: flex; }

.hud-item {
  display: flex; align-items: center; gap: 0.5em; padding: 0.35em 0.8em; min-width: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 0.8em; box-shadow: 0 2px 0 var(--line);
}
.hud-item > div { min-width: 0; }
.hud-item small { display: block; font-size: 0.68em; color: var(--muted); font-weight: 600; white-space: nowrap; }
.hud-item b { display: block; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dots { display: flex; gap: 0.22em; padding-top: 0.15em; }
.dots i { width: 0.7em; height: 0.7em; border-radius: 50%; border: 2px solid var(--line2); }
.dots .done { background: var(--good); border-color: var(--good-edge); }
.dots .miss { background: var(--bad); border-color: var(--bad-edge); }
.dots .now { border-color: var(--lock); box-shadow: 0 0 0 2px var(--peach); }
.shields { display: flex; gap: 0.15em; color: var(--lav-ink); padding-top: 0.1em; }
.shields .i { width: 1em; height: 1em; fill: currentColor; }
.shields .lost { fill: none; opacity: 0.4; }

/* ---------- Shared pieces ---------- */
.screen { flex: 1; width: 100%; max-width: 80em; margin: 0 auto; padding: 0.6em max(16px, 2.2em) 2.5em; }
.screen > h1 { font-size: 2.7em; font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; margin: 0.3em 0 0.25em; }
h1 em, h2 em { font-style: normal; color: var(--accent); }
.lead { color: var(--muted); max-width: 38em; }
.screen > .lead { margin-bottom: 1.4em; }
.small { color: var(--muted); font-size: 0.85em; }
.badge {
  display: inline-flex; align-items: center; gap: 0.45em; padding: 0.35em 0.8em; border-radius: 0.6em;
  font-size: 0.7em; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--peach-ink); background: var(--peach); border: 1px solid var(--peach-edge);
}
.chip {
  display: inline-flex; align-items: center; gap: 0.35em; padding: 0.25em 0.65em; border-radius: 0.5em;
  font-size: 0.72em; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
}
.chip.mint, .tag.mint { background: var(--mint); color: var(--mint-ink); border: 1px solid var(--mint-edge); }
.chip.peach, .tag.peach { background: var(--peach); color: var(--peach-ink); border: 1px solid var(--peach-edge); }
.chip.lav { background: var(--lav); color: var(--lav-ink); border: 1px solid var(--lav-edge); }
.chips { display: flex; flex-wrap: wrap; gap: 0.4em; margin-top: 0.8em; }
.ico { width: 2.2em; height: 2.2em; display: grid; place-items: center; flex: none; border-radius: 0.7em; background: var(--surface); }
.ico.mint { background: var(--mint); color: var(--mint-ink); }
.ico.peach { background: var(--peach); color: var(--peach-ink); }
.ico.lav { background: var(--lav); color: var(--lav-ink); }
.ico.sun { background: var(--sun); color: var(--sun-ink); }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.2em;
  box-shadow: 0 3px 0 var(--line), 0 14px 30px -20px var(--shadow);
}
.card h2 { font-size: 1.25em; font-weight: 800; letter-spacing: -0.02em; }
.card h3 { display: flex; align-items: center; gap: 0.45em; font-size: 1em; font-weight: 800; margin-bottom: 0.5em; }
.card p { color: var(--muted); }
.card.lav { background: var(--lav); border-color: var(--lav-edge); box-shadow: 0 3px 0 var(--lav-edge); }
.card.lav p { color: var(--text); }
.card-head { display: flex; gap: 0.8em; align-items: center; margin-bottom: 0.9em; }
.card-head small { color: var(--muted); font-size: 0.8em; }
.split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1.2em; align-items: start; }
.side { display: flex; flex-direction: column; gap: 1em; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: max(44px, 2.6em);
  padding: 0.55em 1.1em; border: 1.5px solid var(--line2); border-radius: 0.8em; background: var(--surface);
  color: var(--text); font-weight: 700; text-decoration: none; text-align: center;
  box-shadow: 0 3px 0 var(--line2); transition: transform 0.1s, box-shadow 0.1s, background 0.2s;
}
.btn:active:not(:disabled), .ans:active:not(:disabled), .life:active:not(:disabled), .mode:active { transform: translateY(2px); box-shadow: none; }
.btn.primary { background: var(--brand); border-color: var(--brand-edge); color: var(--brand-ink); box-shadow: 0 3px 0 var(--brand-edge); }
/* A disabled main button still says what to do next, so it stays readable as an outline. */
.btn:disabled { cursor: default; background: transparent; border-style: dashed; color: var(--muted); box-shadow: none; }
.btn.lg { font-size: 1.1em; padding: 0.7em 1.5em; }
.btn.veto { background: var(--veto); border-color: var(--veto-edge); color: #fff; box-shadow: 0 3px 0 var(--veto-edge); font-size: 1.1em; animation: popin 0.4s; }
.btn.veto:disabled { background: var(--lav); color: var(--lav-ink); border-color: var(--lav-edge); animation: none; }
.btn[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
@keyframes popin { from { transform: scale(0.6); opacity: 0; } 70% { transform: scale(1.06); } }

/* ---------- Title screen ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 3em; align-items: center; padding: 2em 0 2.5em; }
.hero h1 { font-size: 3em; font-weight: 800; letter-spacing: -0.04em; line-height: 1.04; margin: 0.4em 0 0.35em; }
.hero h1 em { display: block; }
.cta { display: flex; flex-wrap: wrap; gap: 0.7em; margin: 1.3em 0 1em; }
.tags { display: flex; flex-wrap: wrap; gap: 1.2em; padding: 0; margin: 0; list-style: none; color: var(--muted); font-size: 0.8em; font-weight: 600; }
.tags li::before { content: "• "; color: var(--accent); }
.carousel {
  position: relative; aspect-ratio: 16 / 9; border-radius: 1.5em; overflow: hidden;
  border: 0.4em solid var(--surface); box-shadow: 0 6px 0 var(--line), 0 24px 50px -24px var(--shadow); background: var(--surface2);
}
/* A slide fades in while it slowly settles from a slight zoom; the one leaving fades out on top of it. */
.carousel img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08);
  transition: opacity 1.2s ease-in-out, transform 3.2s cubic-bezier(0.2, 0.6, 0.3, 1);
}
.carousel img.on { opacity: 1; transform: scale(1); }
.caption {
  position: absolute; left: 0.8em; bottom: 0.8em; display: flex; align-items: center; gap: 0.4em; padding: 0.4em 0.8em;
  border-radius: 0.7em; background: var(--surface); font-size: 0.8em; font-weight: 700;
}
.caption .i { color: var(--bad); }
.carousel .next { position: absolute; top: 0.7em; right: 0.7em; border-radius: 50%; opacity: 0.9; }
/* Engines without aspect-ratio would collapse the stacked slides to nothing. */
@supports not (aspect-ratio: 1 / 1) {
  .carousel { height: 0; padding-top: 56.25%; }
}
.pager { position: absolute; right: 0.9em; bottom: 0.9em; display: flex; gap: 0.4em; }
.pager button { width: 0.8em; height: 0.8em; min-width: 0; padding: 0; border-radius: 99px; border: 0; background: #fffa; transition: width 0.3s; }
.pager button[aria-current="true"] { width: 2em; background: var(--brand); }
/* Home sections: generous room between them, an eyebrow, a big title. */
.head { margin: 4.5em 0 1.4em; scroll-margin-top: 1em; }
.eyebrow { display: block; margin-bottom: 0.5em; color: var(--accent); font-size: 0.75em; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.head h2 { font-size: 2.1em; font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; }
.head p { color: var(--muted); margin-top: 0.4em; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1em; padding: 0; margin: 1em 0 0; list-style: none; }
.stats li { padding: 1.1em 1.3em; border-radius: var(--r); border: 1.5px solid var(--edge); background: var(--fill); box-shadow: 0 4px 0 var(--edge); }
.stats b { display: block; font-size: 2.4em; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--ink); }
.stats small { color: var(--text); font-weight: 700; font-size: 0.85em; }
.stats .sun, .age.sun { --fill: var(--sun); --edge: var(--sun-edge, var(--brand-edge)); --ink: var(--sun-ink); }
.stats .mint, .age.mint { --fill: var(--mint); --edge: var(--mint-edge); --ink: var(--mint-ink); }
.stats .lav, .age.lav { --fill: var(--lav); --edge: var(--lav-edge); --ink: var(--lav-ink); }
.stats .peach, .age.peach { --fill: var(--peach); --edge: var(--peach-edge); --ink: var(--peach-ink); }
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2em; padding: 0; margin: 0; list-style: none; }
.features.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.features li { padding: 1.5em; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 3px 0 var(--line), 0 18px 36px -26px var(--shadow); }
.features .ico { width: 3em; height: 3em; border-radius: 0.9em; margin-bottom: 0.9em; }
.features .ico .i { width: 1.4em; height: 1.4em; }
.features b { display: block; font-size: 1.15em; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.3em; }
.features p { color: var(--muted); font-size: 0.92em; }
.ages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2em; }
.age { padding: 1.6em; border-radius: var(--r); border: 2px solid var(--edge); background: var(--fill); box-shadow: 0 5px 0 var(--edge); }
.age small { display: inline-block; padding: 0.2em 0.7em; border-radius: 99px; background: var(--surface); color: var(--ink); font-weight: 800; font-size: 0.8em; }
.age b { display: block; margin: 0.5em 0 0.3em; font-size: 1.5em; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.age p { color: var(--text); }
.cloud { display: flex; flex-wrap: wrap; gap: 0.6em; padding: 0; margin: 0; list-style: none; }
.cloud li { padding: 0.5em 1em; border-radius: 99px; background: var(--surface); border: 1.5px solid var(--line2); box-shadow: 0 2px 0 var(--line2); font-weight: 700; }
.cloud li small { margin-left: 0.4em; color: var(--muted); font-weight: 600; }
#home .modes .mode { padding-top: 1.4em; padding-bottom: 1.4em; }
#home .mode b { font-size: 1.4em; }
#home .mode small { font-size: 0.95em; max-width: 30em; }
.mode .chip { position: absolute; top: 1.2em; right: 1.2em; }
.final {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5em; flex-wrap: wrap; margin-top: 4.5em; padding: 2.2em 2.4em;
  border-radius: 1.6em; background: var(--brand); color: var(--brand-ink); border: 2px solid var(--brand-edge); box-shadow: 0 6px 0 var(--brand-edge);
}
.final h2 { font-size: 2em; font-weight: 800; letter-spacing: -0.035em; }
.final ul { display: flex; flex-wrap: wrap; gap: 0.4em 1.4em; padding: 0; margin: 0.6em 0 0; list-style: none; font-weight: 700; }
.final li::before { content: "✓ "; }
.foot {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5em 3em; margin-top: 3.5em; padding: 2em 0 0;
  border-top: 1px solid var(--line2);
}
.foot .word { font-size: 1.4em; }
.foot p { color: var(--muted); font-size: 0.9em; margin-top: 0.4em; }
.beta {
  display: inline-block; margin-left: 0.6em; padding: 0.15em 0.6em; border-radius: 99px; vertical-align: 0.3em;
  background: var(--lav); color: var(--lav-ink); border: 1px solid var(--lav-edge); font-size: 0.75em; font-weight: 800;
}
.foot-mail b { font-weight: 800; }
.foot-mail .btn { margin-top: 0.8em; }
.foot .foot-copy { grid-column: 1 / -1; margin: 0; padding-top: 1.2em; border-top: 1px dashed var(--line2); font-size: 0.8em; }
.final .btn { background: var(--text); color: var(--bg); border-color: var(--text); box-shadow: 0 3px 0 rgb(0 0 0 / 0.35); }
.modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1em; }
.mode {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0.4em; padding: 1.1em 3.6em 1.1em 1.1em;
  border-radius: var(--r); border: 2px solid var(--edge); background: var(--fill); text-align: left; color: var(--text);
  box-shadow: 0 4px 0 var(--edge); transition: transform 0.1s;
}
.mode.mint { --fill: var(--mint); --edge: var(--mint-edge); --ink: var(--mint-ink); }
.mode.peach { --fill: var(--peach); --edge: var(--peach-edge); --ink: var(--peach-ink); }
.mode .ico { background: var(--surface); color: var(--ink); margin-bottom: 0.3em; }
.mode b { font-size: 1.1em; font-weight: 800; }
.mode small { color: var(--muted); font-size: 0.85em; }
.mode .go { position: absolute; right: 1em; bottom: 1em; width: 2em; height: 2em; display: grid; place-items: center; border-radius: 50%; background: var(--surface); color: var(--ink); }
/* In setup the cards choose a mode (radio), they do not navigate. */
.mode[role="radio"] .go { border: 2px solid var(--edge); }
.mode[role="radio"] .go .i { opacity: 0; }
.mode[aria-checked="true"] { border-color: var(--ink); box-shadow: 0 4px 0 var(--ink); }
.mode[aria-checked="true"] .go { background: var(--ink); border-color: var(--ink); color: var(--fill); }
.mode[aria-checked="true"] .go .i { opacity: 1; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2em; padding: 0; margin: 0; list-style: none; }
.steps li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.4em; box-shadow: 0 3px 0 var(--line); }
.steps b { font-weight: 800; font-size: 1.1em; }
.steps small { color: var(--muted); font-size: 0.9em; display: block; margin-top: 0.3em; }
.steps { counter-reset: step; margin-bottom: 1em; }
.steps li { counter-increment: step; }
.steps li::before {
  content: counter(step); display: grid; place-items: center; width: 1.8em; height: 1.8em; margin-bottom: 0.5em;
  border-radius: 0.55em; background: var(--brand); color: var(--brand-ink); font-weight: 800;
}

/* ---------- Setup ---------- */
.stepper { display: flex; flex-wrap: wrap; gap: 0.5em; padding: 0; margin: 0.3em 0 0; list-style: none; }
.stepper button {
  display: inline-flex; align-items: center; gap: 0.5em; min-height: max(40px, 2.2em); padding: 0.25em 0.9em 0.25em 0.3em;
  border: 1.5px solid var(--line2); border-radius: 99px; background: var(--surface); color: var(--muted); font-size: 0.85em; font-weight: 700;
}
.stepper span { width: 1.8em; height: 1.8em; display: grid; place-items: center; border-radius: 50%; background: var(--surface2); font-weight: 800; }
.stepper .i { width: 1em; height: 1em; }
.stepper [aria-current="step"] { color: var(--text); border-color: var(--brand-edge); box-shadow: 0 2px 0 var(--brand-edge); }
.stepper [aria-current="step"] span { background: var(--brand); color: var(--brand-ink); }
.stepper .done span { background: var(--good); color: #fff; }
.crew-card { max-width: 46em; }
.cats-head { display: flex; align-items: center; gap: 0.9em; margin-bottom: 1.1em; }
.cats-head > div { flex: 1; }
.cats-head p { font-size: 0.85em; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15em, 1fr)); gap: 0.5em; }
.cat {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6em; min-height: max(44px, 2.4em); padding: 0.4em 0.9em;
  border: 1.5px solid var(--line2); border-radius: 0.8em; background: var(--surface); box-shadow: 0 2px 0 var(--line2);
  color: var(--text); font-weight: 700; font-size: 0.85em; text-align: left;
}
.cat small { color: var(--muted); font-weight: 600; }
.cat[aria-pressed="true"], .cats-head .btn[aria-pressed="true"] { background: var(--mint); border-color: var(--mint-edge); color: var(--mint-ink); box-shadow: 0 2px 0 var(--mint-edge); }
.cat[aria-pressed="true"] small { color: inherit; }
.wiz-nav { display: flex; flex-wrap: wrap; gap: 0.8em; margin-top: 1.4em; }
.wiz-nav .primary { margin-left: auto; }
#setup .status { margin-top: 1.2em; }
#summary ul { display: flex; flex-direction: column; gap: 0.4em; padding: 0; margin: 1em 0 0; list-style: none; }
#summary li { display: flex; align-items: center; gap: 0.6em; font-weight: 700; min-width: 0; }
#summary li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#summary li small { margin-left: auto; color: var(--muted); font-size: 0.8em; white-space: nowrap; }
.player { display: flex; align-items: center; gap: 0.6em; padding: 0.45em 0.5em; margin-bottom: 0.5em; border: 1px solid var(--line); border-radius: 0.9em; background: var(--surface); }
.player input {
  flex: 1; min-width: 0; min-height: max(40px, 2.2em); padding: 0.3em 0.6em; border: 1.5px solid transparent; border-radius: 0.6em;
  background: transparent; font-weight: 700;
}
.player input:hover, .player input:focus { border-color: var(--line2); background: var(--surface2); }
.pill {
  flex: none; display: inline-flex; align-items: center; gap: 0.45em; min-height: max(40px, 2.2em); padding: 0.2em 0.7em 0.2em 0.9em;
  border-radius: 99px; font-size: 0.8em; font-weight: 800; white-space: nowrap;
  border: 1.5px solid var(--edge); background: var(--fill); color: var(--ink); box-shadow: 0 2px 0 var(--edge);
}
.pill .i { width: 1em; height: 1em; opacity: 0.75; }
.pill.kids_younger { --fill: var(--mint); --edge: var(--mint-edge); --ink: var(--mint-ink); }
.pill.kids_older { --fill: var(--lav); --edge: var(--lav-edge); --ink: var(--lav-ink); }
.pill.adults { --fill: var(--peach); --edge: var(--peach-edge); --ink: var(--peach-ink); }
.remove { width: max(40px, 2.2em); height: max(40px, 2.2em); display: grid; place-items: center; flex: none; padding: 0; border: 0; border-radius: 0.6em; background: none; color: var(--muted); }
.remove:hover:not(:disabled) { background: var(--surface2); color: var(--bad); }
.remove:disabled { opacity: 0.3; cursor: default; }
.av {
  width: 2em; height: 2em; display: grid; place-items: center; flex: none; border-radius: 0.6em; font-weight: 800;
  background: hsl(var(--h) var(--av-s) var(--av-bg)); color: hsl(var(--h) 60% var(--av-fg));
}
.av.xl { width: 3.4em; height: 3.4em; font-size: 1.4em; border-radius: 0.7em; }
.opts { display: flex; gap: 0.8em; align-items: flex-start; }
.opts + .opts { margin-top: 1.1em; padding-top: 1.1em; border-top: 1px solid var(--line); }
.opts > div { flex: 1; }
.opts h3 { margin-bottom: 0.1em; }
.opts p { font-size: 0.8em; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5em; margin-top: 0.6em; }
.seg .btn[aria-pressed="true"] { background: var(--brand); color: var(--brand-ink); border-color: var(--brand-edge); box-shadow: 0 3px 0 var(--brand-edge); }
.fixed { display: inline-block; margin-top: 0.6em; padding: 0.4em 0.9em; border-radius: 0.6em; background: var(--surface2); font-weight: 800; }
.seg.three { grid-template-columns: repeat(3, 1fr); }
.dialog .seg + .small { margin-top: 0.5em; }
.status { font-size: 0.85em; color: var(--muted); }
.status.alert { color: var(--bad-ink); background: var(--bad); padding: 0.6em 0.9em; border-radius: 0.7em; font-weight: 700; }

/* ---------- Turn ---------- */
/* "Pass the device": the avatar beside the name, everything the player needs in one card. */
.last { display: inline-block; margin: 0.6em 0 1.2em; padding: 0.5em 1em; border-radius: 0.8em; background: var(--surface); border: 1px solid var(--line); font-weight: 700; }
.turn-split.solo { grid-template-columns: minmax(0, 1fr); }
.seat { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.8em; align-items: center; padding: 2.2em; }
.seat .av.xl { width: 3.4em; height: 3.4em; font-size: 2em; border-radius: 0.6em; box-shadow: 0 6px 0 rgb(0 0 0 / 0.08); align-self: start; }
.seat .who { font-size: 3em; font-weight: 800; letter-spacing: -0.04em; line-height: 1.02; margin: 0.1em 0 0.4em; }
.who em { display: block; font-style: normal; color: var(--accent); }
.seat .chips { margin: 0 0 0.9em; }
.seat p { font-size: 1em; }
.seat .btn { width: 100%; margin-top: 1.1em; font-size: 1.3em; }
.chip.kids_younger { background: var(--mint); color: var(--mint-ink); border: 1px solid var(--mint-edge); }
.chip.kids_older { background: var(--lav); color: var(--lav-ink); border: 1px solid var(--lav-edge); }
.chip.adults { background: var(--peach); color: var(--peach-ink); border: 1px solid var(--peach-edge); }

.rank { list-style: none; margin: 0; padding: 0; }
.rank li { display: grid; grid-template-columns: 1.7em auto minmax(0, 1fr) auto; align-items: center; gap: 0.55em; padding: 0.35em 0.45em; border-radius: 0.7em; }
.rank li + li { margin-top: 0.15em; }
.rank em { font-style: normal; font-weight: 800; font-size: 0.85em; text-align: center; border-radius: 0.45em; background: var(--surface2); }
.rank span:not(.av) { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank b { font-weight: 800; white-space: nowrap; }
.rank li.on { background: var(--peach); }
.rank li.on em { background: var(--brand); color: var(--brand-ink); }
.rank .av { width: 1.7em; height: 1.7em; font-size: 0.85em; }

/* ---------- Game: scrollable stage, controls pinned to the bottom ---------- */
body[data-screen="game"] { height: 100vh; height: 100dvh; overflow: hidden; }
.screen.game { min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 0.8em; padding-bottom: max(10px, 0.8em); }
.stage { overflow-y: auto; min-height: 0; margin: 0 -0.5em; padding: 0 0.5em 0.4em; display: flex; flex-direction: column; }
/* Auto margins center the board and still let it scroll from the top when it is taller than the stage. */
.play { margin: auto 0; }
.qcard { padding: 1.3em 1.4em; }
.qtags { display: flex; align-items: center; gap: 0.5em; }
.tag { display: inline-flex; padding: 0.2em 0.7em; border-radius: 0.5em; font-size: 0.7em; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }
.value { margin-left: auto; font-weight: 800; color: var(--muted); font-size: 0.85em; }
.qcard .question { font-size: 1.7em; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; margin: 0.4em 0 0.6em; }
/* Sizes by length (set in renderGame): over 90 and over 140 characters for the question, 45 and 80 for the longest answer. */
.qcard .question[data-size="l"] { font-size: 1.45em; }
.qcard .question[data-size="xl"] { font-size: 1.25em; }
.answers[data-size="l"] .ans { font-size: 1.02em; }
.answers[data-size="xl"] .ans { font-size: 0.9em; }
.timer { display: flex; align-items: center; gap: 0.6em; margin-top: 0.8em; color: var(--mint-ink); }
.timer .track { flex: 1; height: 0.6em; border-radius: 99px; background: var(--surface2); overflow: hidden; }
.timer i { display: block; height: 100%; border-radius: inherit; background: var(--good); transition: width 1s linear, background 0.3s; }
.timer b { min-width: 3em; text-align: right; font-weight: 800; }
.timer.low { color: var(--bad); }
.timer.low i { background: var(--bad); }
.timer.paused { opacity: 0.5; }
.answers { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6em; }
.ans {
  position: relative; display: flex; align-items: center; gap: 0.6em; min-height: 2.8em; padding: 0.35em 0.6em;
  font-size: 1.15em; font-weight: 700; text-align: left; color: var(--text); background: var(--surface);
  border: 2px solid var(--line2); border-radius: 0.7em; box-shadow: 0 3px 0 var(--line2);
  transition: background 0.25s, border-color 0.25s, opacity 0.3s;
}
.ans b { width: 1.7em; height: 1.7em; display: grid; place-items: center; flex: none; border-radius: 0.45em; background: var(--peach); color: var(--peach-ink); font-size: 0.85em; }
.ans span { flex: 1; }
.ans i { position: absolute; right: 0.6em; top: -0.75em; font-style: normal; font-size: 0.55em; font-weight: 800; padding: 0.15em 0.6em; border-radius: 0.45em; background: var(--veto); color: #fff; }
.ans i:empty { display: none; }
.ans:disabled { cursor: default; }
.ans.sel { background: var(--lock); border-color: var(--lock-edge); color: var(--lock-ink); box-shadow: 0 3px 0 var(--lock-edge); }
.ans.sel b, .ans.good b, .ans.bad b { background: rgb(255 255 255 / 0.35); color: inherit; }
.ans.rev { animation: suspense 0.3s infinite alternate; }
.ans.good { background: var(--good); border-color: var(--good-edge); color: var(--good-ink); box-shadow: 0 3px 0 var(--good-edge); animation: pop 0.5s; }
.ans.bad { background: var(--bad); border-color: var(--bad-edge); color: var(--bad-ink); box-shadow: 0 3px 0 var(--bad-edge); }
/* Not by colour alone: a tick and a cross for colour-blind players. */
.ans.good::after, .ans.bad::after { font-size: 1.3em; line-height: 1; }
.ans.good::after { content: "✓"; }
.ans.bad::after { content: "✗"; }
.ans.dim { opacity: 0.45; }
.ans.gone { opacity: 0.35; border-style: dashed; box-shadow: none; }
.ans.gone span { text-decoration: line-through; }
@keyframes pop { 50% { transform: scale(1.03); } }
@keyframes suspense { to { box-shadow: 0 0 0 0.3em var(--peach-edge); } }

.say { display: flex; gap: 0.6em; align-items: flex-start; margin-top: 0.9em; padding: 0.65em 0.9em; border-radius: 0.8em; font-weight: 600; border: 1px solid; }
.say .i { margin-top: 0.15em; }
.say.info { background: var(--lav); border-color: var(--lav-edge); color: var(--lav-ink); }
.say.lock { background: var(--peach); border-color: var(--peach-edge); color: var(--peach-ink); }
.say.good { background: var(--mint); border-color: var(--mint-edge); color: var(--mint-ink); }
.say.shield { background: var(--lav); border-color: var(--lav-edge); color: var(--lav-ink); }
.say.bad { background: var(--bad); border-color: var(--bad-edge); color: var(--bad-ink); }
/* The fun fact is read aloud to the room, so it sits under the answers in large type. */
.fact { display: flex; gap: 0.7em; margin-top: 0.6em; padding: 0.8em 1em; border-radius: 0.8em; background: var(--sun); color: var(--text); font-size: 1.15em; animation: open 0.4s; }
.fact .i { color: var(--sun-ink); margin-top: 0.15em; }
.fact p { color: inherit; }
.fact small { display: block; font-size: 0.65em; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sun-ink); }
@keyframes open { from { opacity: 0; transform: translateY(-8px); } }

/* Lifelines sit in their own tray, as coloured pills: they must not look like a fifth answer. */
.tray { display: flex; align-items: center; gap: 0.8em; margin-top: 0.9em; padding: 0.55em 0.6em 0.55em 1em; border: 2px dashed var(--line2); border-radius: 1.4em; }
.tray-label { flex: none; font-size: 0.7em; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.lifelines { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5em; }
.life {
  position: relative; display: flex; align-items: center; gap: 0.5em; min-height: max(44px, 2.5em); padding: 0.3em 0.7em 0.3em 0.35em;
  border: 1.5px solid var(--edge); border-radius: 99px; background: var(--fill); box-shadow: 0 3px 0 var(--edge);
  font-weight: 700; font-size: 0.85em; text-align: left; color: var(--ink);
}
.life.mint { --fill: var(--mint); --edge: var(--mint-edge); --ink: var(--mint-ink); }
.life.peach { --fill: var(--peach); --edge: var(--peach-edge); --ink: var(--peach-ink); }
.life.lav { --fill: var(--lav); --edge: var(--lav-edge); --ink: var(--lav-ink); }
.life.sun { --fill: var(--sun); --edge: var(--brand-edge); --ink: var(--sun-ink); }
.life .ico { width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--surface); color: var(--ink); }
.life .txt { flex: 1; line-height: 1.2; }
.life small { display: none; font-size: 0.75em; color: inherit; }
.life:disabled { cursor: default; opacity: 0.6; }
.life.used { opacity: 0.45; box-shadow: none; border-style: dashed; }
.life.used .lbl { text-decoration: line-through; }
.life.used small { display: block; }
.life.used kbd { display: none; }

/* The points of this turn are the stake of the game: a gold tile in the header, a pop when they grow. */
.hud-item.pot { position: relative; background: var(--sun); border: 2px solid var(--brand-edge); box-shadow: 0 3px 0 var(--brand-edge); color: var(--sun-ink); }
.hud-item.pot small { color: var(--sun-ink); }
.hud-item.pot b { font-size: 1.15em; }
.hud-item.pot.gain b { animation: pop 0.6s 2; }
.plus {
  position: absolute; top: -0.9em; right: -0.4em; padding: 0.1em 0.5em; border-radius: 99px; background: var(--good); color: var(--good-ink);
  font-size: 0.8em; font-weight: 800; animation: rise 1.6s forwards;
}
@keyframes rise { 0% { opacity: 0; transform: translateY(0.6em); } 20%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-0.8em); } }
.hud-item.flash { animation: flash 1.2s; }
@keyframes flash { 0%, 60% { background: var(--good); border-color: var(--good-edge); } }
#cash:not(:disabled) { background: var(--sun); border-color: var(--brand-edge); color: var(--sun-ink); box-shadow: 0 3px 0 var(--brand-edge); }

.bar {
  display: flex; align-items: center; gap: 0.6em; padding: 0.6em; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 3px 0 var(--line), 0 14px 30px -20px var(--shadow);
}
.bar .btn { font-size: 0.9em; }
.bar .btn.veto { font-size: 1em; }
#main { margin-left: auto; min-width: 12em; font-size: 1.05em; }

/* Raised tension: the edges darken and the question pulses. */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 4; opacity: 0; transition: opacity 0.8s;
  background: radial-gradient(ellipse at center, transparent 40%, rgb(20 8 0 / 0.75) 100%);
}
body.tension::after { opacity: 1; }
body.tension .question { animation: beat 0.9s infinite; }
@keyframes beat { 0%, 30%, 100% { transform: scale(1); } 12% { transform: scale(1.015); } }

/* ---------- End ---------- */
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8em; margin: 1em 0; align-items: end; }
.place { display: flex; flex-direction: column; gap: 0.2em; padding: 1em; border-radius: var(--r); background: var(--mint); border: 1px solid var(--mint-edge); box-shadow: 0 4px 0 var(--mint-edge); min-width: 0; }
.place .i { width: 1.4em; height: 1.4em; }
.place small { font-weight: 700; color: var(--muted); }
.place b { font-size: 1.4em; font-weight: 800; letter-spacing: -0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.place.win { background: var(--brand); border-color: var(--brand-edge); box-shadow: 0 4px 0 var(--brand-edge); color: var(--brand-ink); padding: 1.4em 1em; animation: pop 0.6s 0.2s; }
.place.win small { color: inherit; }
.place.win b { font-size: 1.8em; }

/* ---------- Dialogs ---------- */
.modal { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 16px; background: var(--scrim); }
.dialog { width: min(32em, 100%); max-height: 100%; overflow: auto; padding: 1.4em; animation: open 0.25s; }
.dialog h2 { font-size: 1.45em; margin-bottom: 0.4em; }
.dialog h3 { margin: 1em 0 0.5em; }
.dialog > p { margin-bottom: 0.4em; }
.dialog .quote { color: var(--text); font-weight: 700; padding: 0.6em 0.8em; border-radius: 0.7em; background: var(--surface2); }
.pick { display: flex; flex-wrap: wrap; gap: 0.5em; }
.pick .btn { flex: 1 1 8em; }
.pick .btn[aria-pressed="true"], .vans .btn[aria-pressed="true"] { background: var(--veto); color: #fff; border-color: var(--veto-edge); box-shadow: 0 3px 0 var(--veto-edge); }
.vans { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5em; }
.vans .btn { justify-content: flex-start; text-align: left; }
.vans b { color: var(--accent); }
.vans .btn[aria-pressed="true"] b { color: inherit; }
/* Guide: tabs on the left, the chosen topic scrolls on its own; the dialog keeps one height between tabs. */
.dialog.guide { width: min(60em, 100%); height: min(42em, 100%); display: flex; flex-direction: column; }
.dialog.guide h2 { display: flex; align-items: center; gap: 0.45em; }
.guide-wrap { flex: 1; min-height: 0; display: grid; grid-template-columns: 15em minmax(0, 1fr); gap: 1.2em; }
.guide-tabs { display: flex; flex-direction: column; gap: 0.3em; overflow-y: auto; }
.guide-tabs button {
  display: flex; align-items: center; gap: 0.6em; min-height: max(44px, 2.4em); padding: 0.35em 0.6em; border: 1.5px solid transparent;
  border-radius: 0.8em; background: none; color: var(--text); font-weight: 700; font-size: 0.9em; text-align: left;
}
.guide-tabs button:hover { background: var(--surface2); }
.guide-tabs [aria-selected="true"] { background: var(--surface2); border-color: var(--line2); box-shadow: 0 2px 0 var(--line2); }
.guide-tabs .ico { width: 1.9em; height: 1.9em; border-radius: 0.6em; }
.guide-body { overflow-y: auto; padding: 0.2em 0.6em 0.6em 0; animation: open 0.2s; }
.guide-body h3 { margin: 1.1em 0 0.4em; font-size: 1.05em; }
.guide-body h3:first-child { margin-top: 0; }
.guide-body p, .guide-body li { color: var(--text); line-height: 1.5; }
.guide-body ol, .guide-body ul { margin: 0; padding-left: 1.3em; display: grid; gap: 0.45em; }
.guide-body .keys { list-style: none; padding: 0; }
/* Shown on touch screens too: here the keys are the content, not a hint. */
.guide-body kbd { display: inline-block; font-size: 0.8em; opacity: 1; padding: 0.05em 0.45em; margin-right: 0.2em; }
.guide-body a { color: var(--accent); font-weight: 700; }
.more { margin-top: 1.2em; }
.actions { display: flex; gap: 0.6em; justify-content: flex-end; margin-top: 1.2em; flex-wrap: wrap; }
.actions .btn { flex: 0 1 auto; }
.dialog .say { margin-top: 1em; }
.count { font-size: 4em; font-weight: 800; color: var(--accent); text-align: center; line-height: 1.1; margin: 0.2em 0; }
.meter { height: 0.6em; border-radius: 99px; background: var(--surface2); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--brand); transition: width 1s linear; }

/* TV remote / gamepad focus: thick and offset, visible from the couch.
   Two rules: an engine without :focus-visible drops a whole rule that names it. */
:focus { outline: none; }
.remote :focus { outline: 4px solid var(--focus); outline-offset: 3px; }
:focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; }

/* Touch screens have no keyboard shortcuts to show. */
@media (hover: none) {
  kbd { display: none; }
}
@media (max-width: 1100px) {
  .steps, .features, .features.four, .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* TV and wide screens: the setup fits the screen, with no page scroll a remote's pointer cannot reach.
   Steps, title, hint and buttons on the left; the step's content on the right, longer lists scroll in their own box. */
@media (min-width: 1101px) and (orientation: landscape) {
  body[data-screen="setup"] { height: 100vh; height: 100dvh; overflow: hidden; }
  #setup {
    min-height: 0; padding-bottom: max(16px, 1.5em); display: grid; column-gap: 2.5em; align-content: start;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto auto auto minmax(0, 1fr);
  }
  #setup > * { grid-column: 1; }
  /* The padding keeps the focus ring inside the scroll box. */
  #setup > .wiz { grid-column: 2; grid-row: 1 / -1; min-height: 0; display: flex; flex-direction: column; gap: 1em; overflow-y: auto; padding: 8px; margin: -8px; }
  #setup .crew-card, #cats { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; }
  #players, .cat-grid { min-height: 0; overflow-y: auto; padding: 8px; margin: -8px; }
  .player:last-child { margin-bottom: 0; }
  #add { flex: none; align-self: flex-start; margin-top: 0.4em; }
  #setup .modes { grid-template-columns: minmax(0, 1fr); }
}
/* Scroll boxes in the theme, with a thumb wide enough for a remote's pointer. */
#setup .wiz::-webkit-scrollbar, #players::-webkit-scrollbar, .cat-grid::-webkit-scrollbar { width: max(12px, 0.6em); }
#setup .wiz::-webkit-scrollbar-track, #players::-webkit-scrollbar-track, .cat-grid::-webkit-scrollbar-track { background: var(--surface2); border-radius: 99px; }
#setup .wiz::-webkit-scrollbar-thumb, #players::-webkit-scrollbar-thumb, .cat-grid::-webkit-scrollbar-thumb { background: var(--brand) padding-box; border: 3px solid transparent; border-radius: 99px; }
@supports not selector(::-webkit-scrollbar) {
  #setup .wiz, #players, .cat-grid { scrollbar-color: var(--brand) var(--surface2); }
}
@media (max-width: 760px) {
  .top { flex-wrap: wrap; gap: 0.6em; padding-left: 16px; padding-right: 16px; }
  .nav { display: none; }
  body[data-screen="home"] #menu { display: grid; }
  /* On the phone's title screen the guide is a tile in the menu: five icons do not fit beside the logo. */
  body[data-screen="home"] #help { display: none; }
  .guide-wrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 0.8em; }
  .guide-tabs { flex-direction: row; overflow-x: auto; overflow-y: hidden; padding-bottom: 0.3em; }
  .guide-tabs button { flex: none; }
  .hud { order: 3; flex-basis: 100%; justify-content: flex-start; overflow-x: auto; gap: 0.4em; }
  .hud-item { padding: 0.3em 0.6em; }
  .hud .av { display: none; }
  .screen { padding-left: 16px; padding-right: 16px; }
  .screen > h1, .hero h1 { font-size: 2.1em; }
  .hero, .split, .play, .modes { grid-template-columns: minmax(0, 1fr); }
  .hero { gap: 1.5em; }
  .steps, .features, .features.four, .ages { grid-template-columns: minmax(0, 1fr); }
  .head { margin-top: 3em; }
  .features li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.9em; padding: 1.1em; }
  .features .ico { grid-row: span 2; margin: 0; }
  .head h2, .final h2 { font-size: 1.6em; }
  .stats b { font-size: 1.9em; }
  .final { padding: 1.5em; }
  .final .btn { flex: 1; }
  .foot { grid-template-columns: minmax(0, 1fr); }
  .foot-mail .btn { width: 100%; }
  .seat { grid-template-columns: minmax(0, 1fr); gap: 1em; padding: 1.4em; }
  .seat .av.xl { width: 3em; height: 3em; }
  .seat .who { font-size: 2.1em; }
  .qcard { padding: 1em; }
  .qcard .question { font-size: 1.35em; }
  .qcard .question[data-size="l"] { font-size: 1.2em; }
  .qcard .question[data-size="xl"] { font-size: 1.08em; }
  .answers { grid-template-columns: minmax(0, 1fr); }
  .ans { font-size: 1.1em; min-height: 2.6em; }
  .lifelines { gap: 0.4em; }
  .tray { flex-direction: column; align-items: stretch; gap: 0.4em; padding: 0.5em; }
  .life { flex-direction: column; gap: 0.25em; padding: 0.4em 0.2em; font-size: 0.72em; text-align: center; border-radius: 1em; }
  .life kbd { display: none; }
  .bar { display: grid; grid-template-columns: 1fr 1fr; }
  #main { grid-column: 1 / -1; margin-left: 0; min-width: 0; }
  .podium { grid-template-columns: minmax(0, 1fr); }
  .vans { grid-template-columns: minmax(0, 1fr); }
  .wiz-nav .btn { flex: 1; }
  .cats-head { flex-wrap: wrap; }
  .cats-head .btn { width: 100%; }
  /* The group pill takes a second line, so a long group name does not squeeze the player's name away. */
  .player { flex-wrap: wrap; }
  .player input { flex-basis: 60%; }
  .player .pill { order: 1; margin-left: calc(2em + 0.6em); }
  .stepper button { padding-right: 0.7em; }
}
/* Narrow phones: the header keeps one row; a phone browser has little use for full screen. */
@media (max-width: 420px) {
  #full { display: none; }
  .tools { gap: 0.3em; }
}
@media (max-width: 380px) {
  .logo .mark { display: none; }
}
/* Phones held sideways: the question and answers come first, the rest scrolls. */
@media (max-height: 500px) and (orientation: landscape) {
  .top { padding-top: 6px; padding-bottom: 6px; }
  .hud-item small { display: none; }
  .qcard .question { font-size: 1.25em; margin: 0.3em 0 0.4em; }
  .qcard .question[data-size="l"] { font-size: 1.1em; }
  .qcard .question[data-size="xl"] { font-size: 1em; }
  .ans { font-size: 1em; min-height: 2.2em; }
  .life .txt { display: none; }
  .life { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::after { animation: none !important; transition: none !important; }
}