/* 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; }

.modal ul,
.modal ol,
p {
  font-size: .75em;
}
/* ---------- Header ---------- */
.top {
  --top-pad: max(16px, 2.2em);
  width: 100%; max-width: 80em; margin: 0 auto; display: flex; align-items: center; gap: 1em;
  padding: max(10px, 0.7em) var(--top-pad);
}
.logo { display: flex; align-items: center; gap: 0.5em; border: 0; background: none; padding: 0.2em; border-radius: 0.6em; }
/* The header's only brand: the Sofa Show badge (assets/sofa-show-logo.webp, 330 px for sharp screens), shown 160 x 160 px. */
:root { --logo: 160px; }
.mark { display: block; width: var(--logo); height: var(--logo); flex: none; object-fit: contain; }
/* The game (pages with data-screen): the header sticks to the top across the full width, its content kept in the
   page's 80em column by the side padding. At the top of the page it has no ground of its own; once the title screen
   scrolls (body.scrolled, game.js) it takes the page's ground and a soft shadow on its lower edge, so the content
   passes under it. The badge hangs below it at full size and shrinks to the header's height when scrolled and on
   every other screen, where the header stays and the screen scrolls below it. */
body[data-screen] .top {
  position: sticky; top: 0; z-index: 20; max-width: none; transition: background 0.25s, box-shadow 0.25s;
  padding-left: max(var(--top-pad), (100% - 80em) / 2 + var(--top-pad)); padding-right: max(var(--top-pad), (100% - 80em) / 2 + var(--top-pad));
}
body[data-screen].scrolled .top { background: var(--bg); box-shadow: 0 6px 16px -10px var(--shadow); }
body[data-screen] .logo { position: relative; flex: none; width: var(--logo); height: var(--icon); padding: 0; transition: width 0.25s; }
body[data-screen] .mark { position: absolute; top: 0; left: 0; transition: width 0.25s, height 0.25s; }
body[data-screen].scrolled .logo, body[data-screen]:not([data-screen="home"]) .logo { width: var(--icon); }
body[data-screen].scrolled .mark, body[data-screen]:not([data-screen="home"]) .mark { width: var(--icon); height: var(--icon); }
/* Section links jump below the sticky header, not under it. */
html { scroll-padding-top: 5em; }
.word { font-weight: 800; font-size: 1.2em; letter-spacing: -0.03em; }
.word b { color: var(--accent); font-weight: 800; }
/* 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; }

/* Score, pot, progress and shields always show in full: only the first tile, the player's name, gives way (ellipsis). */
.hud-item {
  display: flex; align-items: center; flex: none; 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:first-child { flex: 0 1 auto; overflow: hidden; }
.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; }
.hud-item:first-child b { overflow: hidden; text-overflow: ellipsis; }
/* Up to 30 progress dots: at most 15 in a row, the rest wrap below (never more rows on a narrow screen). */
.dots { display: flex; flex-wrap: wrap; gap: 0.22em; padding-top: 0.15em; width: max-content; max-width: 13.7em; }
.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, border-color 0.2s;
}
/* Hover, for a mouse only (a remote or a touch would leave it stuck on): a key with an under-shadow goes half down,
   its shadow shrinks to 1px in its own colour; plain ones also take a brand edge. A press then goes all the way down
   (the :active rules close the block, with the same selectors, so they win). Picked controls (pressed, checked) keep
   their look. Flat controls fade their background in. */
.icon, .cat, .pill, .life, .stepper button { transition: transform 0.15s, box-shadow 0.15s, background 0.2s, border-color 0.2s; }
.nav-link, .sec-link, .remove, .guide-tabs button, .link { transition: background 0.2s, color 0.2s; }
@media (hover: hover) {
  .btn:not(:disabled):not([aria-pressed="true"]):hover, .icon:hover, .mode:not([aria-checked="true"]):hover, .cat:not([aria-pressed="true"]):hover,
  .ans:not(:disabled):not(.sel):hover, .life:not(:disabled):hover, .pill:hover, .stepper button:not([aria-current]):hover { transform: translateY(1px); }
  .btn:not(:disabled):not(.primary):not(.veto):not(.danger):not(.brand):not([aria-pressed="true"]):hover, .icon:hover, .cat:not([aria-pressed="true"]):hover,
  .ans:not(:disabled):not(.sel):hover, .stepper button:not([aria-current]):hover { border-color: var(--brand); box-shadow: 0 1px 0 var(--brand); }
  .btn.brand:not(:disabled):hover { box-shadow: 0 1px 0 var(--b-edge); }
  .btn.primary:not(:disabled):hover { box-shadow: 0 1px 0 var(--brand-edge); }
  .btn.veto:not(:disabled):hover { box-shadow: 0 1px 0 var(--veto-edge); }
  .btn.danger:not(:disabled):hover { box-shadow: 0 1px 0 var(--bad-edge); }
  .mode:not([aria-checked="true"]):hover, .life:not(:disabled):hover, .pill:hover { box-shadow: 0 1px 0 var(--edge); }
  /* Their own colours: the dark button on the yellow banner, the flat presets of the first step. */
  #home .final .btn:hover { border-color: var(--text); box-shadow: 0 1px 0 rgb(0 0 0 / 0.35); }
  #setup .preset .btn:hover { transform: none; box-shadow: none; background: var(--surface2); }
  .link:hover { color: var(--accent); }
  .pager button:hover { background: #fff; }

  .btn:not(:disabled):not([aria-pressed="true"]):active, .icon:active, .mode:not([aria-checked="true"]):active, .cat:not([aria-pressed="true"]):active,
  .ans:not(:disabled):not(.sel):active, .life:not(:disabled):active, .pill:active, .stepper button:not([aria-current]):active { transform: translateY(2px); }
  .btn:not(:disabled):not(.primary):not(.veto):not(.danger):not(.brand):not([aria-pressed="true"]):active, .icon:active, .cat:not([aria-pressed="true"]):active,
  .ans:not(:disabled):not(.sel):active, .stepper button:not([aria-current]):active, .btn.primary:not(:disabled):active, .btn.veto:not(:disabled):active,
  .btn.brand:not(:disabled):active,
  .btn.danger:not(:disabled):active, .mode:not([aria-checked="true"]):active, .life:not(:disabled):active, .pill:active, #home .final .btn:active { box-shadow: none; }
  #setup .preset .btn:active { transform: none; }
}
.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; }
.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); }
.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, background 0.2s; }
.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; }
/* Title screen: the number with its two-line label beside it; the whole tile leads to its section and goes half down on hover. */
#home .stats li { padding: 0; transition: transform 0.2s ease, box-shadow 0.2s ease; }
#home .stats a { display: flex; align-items: center; gap: 0.7em; height: 100%; padding: 1.1em 1.3em; border-radius: inherit; color: inherit; text-decoration: none; }
#home .stats b { flex: none; transition: transform 0.2s ease; }
#home .stats small { line-height: 1.25; }
/* Separate rules: an engine without :focus-within drops a rule that names it, and a touch leaves no hover behind.
   The focus look only for a remote or keys (.remote): a clicked tile keeps the focus after its jump. */
.remote #home .stats li:focus-within { transform: translateY(2px); box-shadow: 0 2px 0 var(--edge); }
@media (hover: hover) {
  #home .stats li:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--edge); }
  #home .stats li:hover b { transform: scale(1.08); }
  #home .stats li:active { transform: translateY(4px); box-shadow: none; }
}
.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; }
/* The title beside its icon, the text under both. */
.features li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 0.9em; 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; }
.features .ico .i { width: 1.4em; height: 1.4em; }
.features b { display: block; font-size: 1.15em; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.features p { grid-column: 1 / -1; margin-top: 0.8em; color: var(--muted); font-size: 0.8em; }
.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); }
/* Filled from baza/index.json: how many questions wait for this age group. */
.age-n { display: block; margin-top: 0.8em; font-weight: 800; color: var(--ink); }
.age-n:empty { display: none; }
.head .base-date { font-size: 0.85em; font-weight: 700; }
.features.duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Categories: two columns of cards, a tinted theme icon before the name, the question count in a bubble on the corner. */
.cloud { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1em 1.2em; padding: 0.6em 0 0; margin: 0; list-style: none; }
.cloud li {
  position: relative; display: flex; align-items: center; gap: 0.9em; padding: 0.7em 1em 0.7em 0.7em;
  border-radius: 1.1em; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 3px 0 var(--line); font-weight: 700;
}
.cloud .ico { width: 2.5em; height: 2.5em; border-radius: 0.8em; }
.cloud .ico .i { width: 1.25em; height: 1.25em; }
.cloud li small {
  position: absolute; top: -0.7em; right: 1em; padding: 0.15em 0.65em; border-radius: 99px; white-space: nowrap;
  background: var(--brand); color: var(--brand-ink); border: 1.5px solid var(--brand-edge); font-size: 0.72em; font-weight: 800;
}
#home .modes .mode { padding-top: 1.4em; padding-bottom: 1.4em; }
#home .mode b { font-size: 1.4em; }
#home .mode small { font-size: 0.8em; 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(3, 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.15s, box-shadow 0.15s;
}
.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.lav { --fill: var(--lav); --edge: var(--lav-edge); --ink: var(--lav-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. Icon beside the text, so four cards stay short. */
.mode[role="radio"] { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 1em; row-gap: 0.2em; }
.mode[role="radio"] .ico { grid-row: span 2; margin-bottom: 0; }
.mode[role="radio"] small { font-size: 0.75em; }
.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 ---------- */
/* Room under the steps: on a phone it collapses with the title's own margin (about 37px), in the TV grid it adds to it. */
.stepper { display: flex; flex-wrap: wrap; gap: 0.5em; padding: 0; margin: 0.3em 0 2.5em; 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; min-width: 0; }
/* The description in one line, whole after "Pokaż więcej". */
.cats-head .info { display: flex; align-items: baseline; gap: 0.5em; font-size: 0.75em; }
.cats-head .info span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cats-head .info.open { display: block; }
.cats-head .info.open span { white-space: normal; }
.link { flex: none; padding: 0; border: 0; background: none; color: var(--brand-edge); font-weight: 800; text-decoration: underline; text-underline-offset: 0.2em; }
/* Category tiles as on the title screen: icon, the name over the full width, the count in a bubble on the corner. */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15em, 1fr)); gap: 1em 0.7em; }
#cats .cat-grid { padding-top: 0.9em; }
/* A group's name over its tiles, across the whole grid. */
.cat-group { grid-column: 1 / -1; margin: 0.5em 0 0; color: var(--muted); font-size: 0.75em; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.cat-group:first-child { margin-top: 0; }
.cat {
  position: relative; display: flex; align-items: center; gap: 0.7em; min-height: max(44px, 2.4em); padding: 0.45em 0.9em 0.45em 0.45em;
  border: 1.5px solid var(--line2); border-radius: 0.9em; background: var(--surface); box-shadow: 0 2px 0 var(--line2);
  color: var(--text); font-weight: 700; font-size: 0.77em; text-align: left;
}
.cat .ico { width: 2em; height: 2em; border-radius: 0.6em; }
.cat .ico .i { width: 1.1em; height: 1.1em; }
.cat small {
  position: absolute; top: -0.8em; right: 0.9em; padding: 0.1em 0.6em; border-radius: 99px; white-space: nowrap; line-height: 1.3;
  background: var(--brand); color: var(--brand-ink); border: 1.5px solid var(--brand-edge); font-size: 0.72em; font-weight: 800;
}
.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"] .ico { background: var(--surface); }
.wiz-nav { display: flex; flex-wrap: wrap; gap: 0.8em; margin-top: 1.4em; }
#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); }
/* Teams: a neutral pill with the team's colour dot, so it never looks like an age group. */
.t0 { --tc: var(--brand); }
.t1 { --tc: var(--good); }
.pill.team { --fill: var(--surface2); --edge: var(--line2); --ink: var(--text); }
.pill.team::before, .chip.team::before, .team-row .dot { content: ""; width: 0.75em; height: 0.75em; flex: none; border-radius: 50%; background: var(--tc); }
.chip.team { background: var(--surface2); color: var(--text); border: 1px solid var(--line2); }
.team-names { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5em; margin-bottom: 0.6em; }
.team-names .field { margin: 0; border-left: 0.5em solid var(--tc); }
.field {
  width: 100%; min-height: max(44px, 2.4em); margin-top: 0.8em; padding: 0.35em 0.8em; border: 1.5px solid var(--line2);
  border-radius: 0.7em; background: var(--surface2); font-weight: 700;
}
.field:focus { border-color: var(--brand-edge); }
.rank li.team-row { background: var(--surface2); font-size: 1.05em; }
.rank li.team-row .dot { width: 1em; height: 1em; margin: 0 0.35em; }
/* Categories for everybody or one player at a time. */
.cat-tabs { display: flex; flex-wrap: wrap; gap: 0.4em; margin-bottom: 1em; }
.cat-tabs .btn { min-height: max(40px, 2.2em); padding: 0.2em 0.8em 0.2em 0.3em; font-size: 0.85em; }
.cat-tabs .btn .i { margin-left: 0.4em; }
.cat-tabs .av { width: 1.7em; height: 1.7em; font-size: 0.85em; }
.cat-tabs .btn[aria-pressed="true"] { background: var(--brand); color: var(--brand-ink); border-color: var(--brand-edge); box-shadow: 0 3px 0 var(--brand-edge); }
/* Family presets on the first step. */
.presets h3 { display: flex; align-items: center; gap: 0.45em; margin: 1.2em 0 0.6em; font-size: 1em; font-weight: 800; }
.preset-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(16em, 1fr)); gap: 0.5em; }
.preset { display: flex; align-items: center; gap: 0.3em; padding: 0.3em; border: 1px solid var(--line); border-radius: 0.9em; background: var(--surface); }
.preset .btn { flex: 1; min-width: 0; flex-direction: column; align-items: flex-start; gap: 0; border: 0; box-shadow: none; background: none; text-align: left; }
.preset .btn b, .preset .btn small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preset .btn small { color: var(--muted); font-size: 0.8em; font-weight: 600; }
#summary > .btn { margin-top: 1em; }
.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); }
.seg.three { grid-template-columns: repeat(3, 1fr); }
.dialog .seg + .small { margin-top: 0.5em; }
.status { font-size: 0.85em; color: var(--muted); }
/* Messages as classic alert boxes: red for an error or a warning, green for a step done, lilac for a plain note. */
.status.alert, .status.ok, .status.info { color: var(--text); padding: 0.6em 0.9em; border: 1.5px solid; border-left-width: 0.35em; border-radius: 0.7em; font-weight: 700; }
.status.alert { background: rgb(214 51 57 / 0.1); border-color: var(--bad); }
.status.ok { background: rgb(47 179 107 / 0.12); border-color: var(--good); }
.status.info { background: var(--lav); border-color: var(--lav-edge); }

/* ---------- 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 ---------- */
/* Outside the title screen the page itself never scrolls (a TV remote's pointer could not reach what is below):
   each screen fits the window, in full screen too, and scrolls inside its own boxes. */
/* Only the game's own screens (data-screen): the legal pages have none and scroll as a plain page. */
body[data-screen]:not([data-screen="home"]) { height: 100vh; height: 100dvh; overflow: hidden; }
body[data-screen]:not([data-screen="home"]) .screen { min-height: 0; overflow-y: auto; }
.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, transform 0.15s, box-shadow 0.15s;
}
.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(3, 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 .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; }
.quick { display: flex; gap: 0.4em; margin-left: auto; }
/* A fixed width: the main button's text changes with the state, and the letters next to it must not move. */
.quick:not([hidden]) + #main { margin-left: 0; width: 14em; }
.quick .btn { min-width: 2.8em; padding-left: 0.6em; padding-right: 0.6em; font-size: 1.05em; font-weight: 800; }
.quick .btn[aria-pressed="true"] { background: var(--brand); border-color: var(--brand-edge); color: var(--brand-ink); box-shadow: 0 3px 0 var(--brand-edge); }

/* 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: 100; 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; }
/* The corner cross of the sign-in dialogs (account.js CROSS): first in the dialog, floated right so the title wraps
   beside it, sticky so it stays in sight while the dialog scrolls, above the dialog's scroll fades. */
.dialog > .x { position: sticky; top: 0; z-index: 2; float: right; margin: -0.5em -0.5em 0 0.5em; --icon: max(40px, 2.1em); }
.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; }

/* ---------- Account, family and statistics (account.js) ---------- */
/* A profile photo covers the initial, which still shows if the photo cannot load. */
.av { position: relative; overflow: hidden; }
.av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#account { overflow: hidden; }
#account .av { width: 100%; height: 100%; border-radius: 0; font-size: 1.05em; }
/* Not needed while playing, and the game header needs its room. */
body[data-screen="turn"] #account, body[data-screen="game"] #account { display: none; }
/* Phones fit four icons beside the logo, and up to 900px the title screen's section bar leaves no room for one more:
   there, outside a game, the account takes the sound button's place (the sound stays in the settings). */
@media (max-width: 900px) {
  .acc body[data-screen="home"] #mute { display: none; }
}
@media (max-width: 760px) {
  .acc body:not([data-screen="turn"]):not([data-screen="game"]) #mute { display: none; }
}
.crew-btns { display: flex; flex-wrap: wrap; gap: 0.5em; }
.foot-links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.4em 1.4em; margin: 0; }
.foot-links a, .check a, .dialog .small a { color: var(--accent); font-weight: 700; }
.dialog .lbl { display: block; margin-top: 0.9em; font-weight: 700; font-size: 0.85em; }
.dialog .lbl + .field { margin-top: 0.3em; }
.dialog .status { margin-top: 0.8em; }
.check { display: flex; align-items: flex-start; gap: 0.6em; margin-top: 0.8em; font-size: 0.9em; cursor: pointer; }
.check input { flex: none; width: 1.3em; height: 1.3em; margin: 0.1em 0 0; accent-color: var(--brand-edge); }
.oauth { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5em; margin-top: 1em; }
.btn.sm { min-height: max(40px, 2.2em); margin-top: 0.5em; padding: 0.3em 0.8em; font-size: 0.85em; }
.btn.danger { background: var(--bad); border-color: var(--bad-edge); color: var(--bad-ink); box-shadow: 0 3px 0 var(--bad-edge); }
.ages-seg .btn { flex-direction: column; gap: 0; font-size: 0.85em; line-height: 1.2; }
.ages-seg small { font-size: 0.85em; opacity: 0.8; }
.who-row { display: flex; align-items: center; gap: 0.8em; min-width: 0; }
.who-row > span:last-child { min-width: 0; }
.who-row b, .who-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-row small { color: var(--muted); font-size: 0.8em; }
.av.lg { width: 3.4em; height: 3.4em; font-size: 1.3em; border-radius: 0.7em; }
.fam { display: grid; gap: 0.4em; padding: 0; margin: 0.9em 0 0; list-style: none; }
.fam li { display: flex; align-items: center; gap: 0.5em; padding: 0.35em 0.4em 0.35em 0.5em; border: 1px solid var(--line); border-radius: 0.9em; }
.fam .who-row { flex: 1; }
.pick .btn .who-row { text-align: left; }
.photo-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5em 1em; margin-top: 0.6em; }
.photo-row .btn { margin: 0; }
/* Statistics: the screen scrolls as a whole; bars are plain CSS. */
#stats > h1 em { display: inline; }
.st-top { display: flex; align-items: center; gap: 1em; margin-top: 0.4em; }
#stats .stats { grid-template-columns: repeat(auto-fit, minmax(9em, 1fr)); margin-top: 1.2em; }
#stats .stats b.sm { font-size: 1.5em; line-height: 1.3; }
#stats h2 { font-size: 1.3em; font-weight: 800; margin: 1.6em 0 0.7em; }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17em, 1fr)); gap: 0.8em; }
.st-card { display: flex; flex-direction: column; gap: 0.8em; text-align: left; color: var(--text); font: inherit; }
.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5em, 1fr)); gap: 0.4em; }
.kv > span { padding: 0.35em 0.6em; border-radius: 0.7em; background: var(--surface2); }
.kv small { display: block; color: var(--muted); font-size: 0.75em; font-weight: 700; }
.kv b { font-weight: 800; }
.st-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(22em, 1fr)); gap: 1em; align-items: start; margin-top: 1.2em; }
.st-cols h3 + .small { margin: -0.3em 0 0.7em; }
.st-cols h3:not(:first-child) { margin-top: 1.3em; }
.st-who { margin-top: 0.8em; }
.st-who h1 { font-size: 2.2em; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.bars { display: grid; gap: 0.5em; padding: 0; margin: 0; list-style: none; }
.bars li { display: grid; grid-template-columns: minmax(0, 10em) minmax(3em, 1fr) auto; align-items: center; gap: 0.6em; font-size: 0.9em; font-weight: 700; }
.bars li > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* .meter is the Brainstorm bar; correct answers fill it green. */
.bars .meter i { border-radius: inherit; background: var(--good); }
.bars small { color: var(--muted); font-weight: 700; white-space: nowrap; }
.games { display: grid; gap: 0.5em; padding: 0; margin: 0; list-style: none; }
.games li { padding: 0.6em 0.9em; border-radius: 0.9em; background: var(--surface); border: 1px solid var(--line); }
.games li > small { display: block; color: var(--muted); font-size: 0.8em; font-weight: 700; }
.games li > span { display: flex; flex-wrap: wrap; gap: 0.2em 1.2em; font-weight: 700; }
.games .me { color: var(--accent); }
.empty { margin-top: 1.2em; }
.empty .btn { margin-top: 1em; }
@media (max-width: 760px) {
  .oauth { grid-template-columns: minmax(0, 1fr); }
  .st-cols { grid-template-columns: minmax(0, 1fr); }
  .bars li { grid-template-columns: minmax(0, 7em) minmax(2em, 1fr) auto; }
}

/* 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, .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* TV and wide screens, in a window or full screen. A 1080p TV browser often reports 960 x 540 (scaled 2x), so the
   type follows the screen down to 10px here: the layout keeps its proportions instead of overflowing. Phones keep 15px. */
@media (orientation: landscape) and (min-width: 761px) and (min-height: 440px) {
  body { font-size: clamp(10px, min(1.25vw, 2.2vh), 48px); }
  /* The setup fills the window under the header (body is 100dvh, the screen takes the rest), centred in its height:
     steps, title, hint and buttons on the left, the step's content on the right, where longer lists scroll in their
     own box. */
  #setup {
    padding-bottom: max(16px, 1.5em); display: grid; column-gap: 2.5em;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: 1fr auto auto auto auto auto 1fr;
  }
  /* At least 700px tall on a 1080p screen (29.5em at its 23.76px type), scaling with the type like the rest, so a TV that
     reports 960 x 540 still fits without scrolling; below that the screen scrolls in its own box. */
  #setup::before { content: ""; grid-area: 1 / 1 / -1 / 2; min-height: calc(29.5em - 0.6em - max(16px, 1.5em)); }
  #setup > * { grid-column: 1; }
  /* "Twoja kolej" centred in its height too; the spacers shrink to nothing when the content is taller. */
  #turn:not([hidden]) { display: flex; flex-direction: column; padding-bottom: max(16px, 1.5em); }
  #turn::before, #turn::after { content: ""; flex: 1 1 0; }
  #turn .last { align-self: flex-start; }
  #stepper { grid-row: 2; }
  #setupTitle { grid-row: 3; }
  #setupLead { grid-row: 4; }
  #status { grid-row: 5; }
  .wiz-nav { grid-row: 6; }
  /* The main button is a long target for a remote's pointer; "Wstecz" stays compact beside it. */
  .wiz-nav .primary { min-width: 15em; }
  /* The padding keeps the focus ring inside the scroll box. */
  #setup > .wiz {
    grid-column: 2; grid-row: 1 / -1; align-self: center; max-height: 100%; 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; }
  .crew-btns, .cat-tabs, .cats-head { flex: none; }
  .crew-btns { margin-top: 0.4em; }
  #setup .modes { grid-template-columns: minmax(0, 1fr); }
}
/* Scrollbars in the theme on every screen, shown for as long as a box has more content: phones and tablets too, where the
   browser's own overlay bars appear only while scrolling. A custom bar is never an overlay, so overflow stays auto
   (no empty track on boxes that fit). A quiet thumb that lights up under the pointer; 8px wide on touch screens. */
:root { --sb: max(10px, 0.6em); }
::-webkit-scrollbar { width: var(--sb); height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line2) padding-box; border: 1px solid transparent; border-radius: 99px; }
/* Sideways strips (the guide's tabs on phones) get a thin bar: a hint, not a second row. */
::-webkit-scrollbar-thumb:horizontal { border-width: 1px; }
::-webkit-scrollbar-thumb:hover { background-color: var(--brand); }
@supports not selector(::-webkit-scrollbar) {
  :root { scrollbar-color: var(--line2) transparent; }
  * { scrollbar-width: thin; }
}
/* TVs and monitors: a slimmer thumb in a track wide enough for a TV remote's pointer, with small arrows at both ends. */
@media (orientation: landscape) and (min-width: 761px) and (min-height: 440px) {
  ::-webkit-scrollbar-thumb { border-width: 3px; }
  ::-webkit-scrollbar-button:single-button:vertical { height: max(12px, 0.7em); background: center / 70% no-repeat; }
  ::-webkit-scrollbar-button:single-button:vertical:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 6.5 5 3.5l3 3' fill='none' stroke='%23998BAE' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
  ::-webkit-scrollbar-button:single-button:vertical:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5 5 6.5l3-3' fill='none' stroke='%23998BAE' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
}
/* More above or below (data-more, set in game.js): that edge of the box fades out, so the content melts into whatever
   is behind the box (the page, or the card it sits in). The second mask layer keeps the scrollbar strip unfaded.
   Focus scrolling (scrollIntoView) stops a fade's height from the edge, so a focused control never lands in it. */
.screen, .wiz, #players, .cat-grid, .stage, .guide-body, .dialog { scroll-padding-block: 2.75em; }
[data-more="down"], [data-more="up"], [data-more="both"] {
  --fade: 2.75em; --keep: linear-gradient(to left, #000 var(--sb), transparent 0);
  -webkit-mask-image: var(--mask), var(--keep); mask-image: var(--mask), var(--keep);
}
[data-more="down"] { --mask: linear-gradient(#000 calc(100% - var(--fade)), transparent); }
[data-more="up"] { --mask: linear-gradient(transparent, #000 var(--fade)); }
[data-more="both"] { --mask: linear-gradient(transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent); }
/* The dialog card paints its own background, which a mask would fade too: there the fade is a strip in the card's
   colour laid over the content, held at the visible edge (sticky). Needs .dialog in SCROLLERS (game.js). */
.dialog[data-more] { -webkit-mask-image: none; mask-image: none; }
.dialog[data-more="down"]::after, .dialog[data-more="both"]::after, .dialog[data-more="up"]::before, .dialog[data-more="both"]::before {
  content: ""; display: block; position: sticky; z-index: 1; height: 3.5em; margin: 0 -1.4em; pointer-events: none;
}
.dialog[data-more="down"]::after, .dialog[data-more="both"]::after { bottom: -1.4em; margin-top: -3.5em; background: linear-gradient(transparent, var(--surface) 85%); }
.dialog[data-more="up"]::before, .dialog[data-more="both"]::before { top: -1.4em; margin-bottom: -3.5em; background: linear-gradient(var(--surface) 15%, transparent); }
/* Up to 860px the title screen's section bar does not fit beside the logo and the tools (15px type in portrait, 828px
   wide): the sections move to the menu button's sheet. */
@media (max-width: 860px) {
  .nav { display: none; }
  body[data-screen="home"] #menu { display: grid; }
}
/* The game header has no room for the HUD beside the logo and the tools on portrait tablets and on phones (upright or
   sideways): there the HUD takes its own full-width row under them. TVs and desktops keep the single row. */
@media (max-width: 760px), (orientation: portrait) and (max-width: 1100px), (orientation: landscape) and (max-height: 439px) {
  body[data-screen="game"] .top { flex-wrap: wrap; row-gap: 0.6em; }
  .hud { order: 3; flex-basis: 100%; }
}
@media (max-width: 760px) {
  .top { --top-pad: 16px; flex-wrap: wrap; gap: 0.6em; padding-left: 16px; padding-right: 16px; }
  /* 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; }
  /* Two rows: the name (taking what is left), score and pot above, progress and shields below. The progress tile is at
     least half the row wide, so it always starts the second row, whatever the scores. */
  .hud { flex-wrap: wrap; gap: 0.4em; }
  .hud-item { padding: 0.3em 0.6em; }
  .hud-item:first-child { flex: 1 1 0; min-width: 4em; }
  .hud-item.prog { flex: 1 0 auto; min-width: 50%; }
  .hud-item.prog + .hud-item { flex-grow: 1; }
  .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; }
  /* A smaller badge, and the one-column hero starts below the part of it that hangs under the header. */
  :root { --logo: 96px; }
  #home .hero { padding-top: calc(var(--logo) - var(--icon)); }
  .steps, .features, .features.duo, .ages, .cloud { grid-template-columns: minmax(0, 1fr); }
  .head { margin-top: 3em; }
  .features li { padding: 1.1em; }
  .head h2, .final h2 { font-size: 1.6em; }
  .stats b { font-size: 1.9em; }
  /* Two tiles a row: the label goes under the number, not beside it in a narrow strip. */
  #home .stats a { flex-direction: column; align-items: flex-start; gap: 0.35em; padding: 0.9em 1em; }
  .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; }
  .quick { display: none; }
  .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; }
}
/* Phones held sideways: the question and answers come first, the rest scrolls. Below 440px, so a TV in a browser
   window (960 x 460 with the address bar) keeps its labels and the TV layout. */
@media (max-height: 439px) 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; }
}
/* Questions per turn: 3, 6, 9, 12 or "Własna", which shows a compact stepper by 3 under it, on the right: Down on a
   remote goes from "Własna" to +, Left from + to −. */
.seg.qty { grid-template-columns: repeat(4, 1fr) 1.8fr; }
.seg.qty .btn { padding-left: 0.3em; padding-right: 0.3em; }
.qty-step { display: flex; justify-content: flex-end; align-items: center; gap: 0.4em; margin-top: 0.6em; }
.qty-step .btn { min-width: 3em; padding: 0.3em 0.6em; font-size: 1.15em; }
.qty-step output { min-width: 5.5em; text-align: center; font-weight: 800; }
/* Level change (first question of the medium and the hard third): a glowing badge over a darkened screen with a light
   sweep, 1.9 s (LEVEL_UP_MS in game.js). Clicks pass through; the game waits meanwhile. */
.levelup {
  position: fixed; inset: 0; z-index: 9; display: grid; place-items: center; padding: 16px; overflow: hidden; pointer-events: none;
  background: radial-gradient(ellipse at center, rgb(20 8 0 / 0.45) 0%, rgb(20 8 0 / 0.88) 100%); animation: lvl-fade 1.9s ease both;
}
.levelup::before {
  content: ""; position: absolute; inset: -50% -30%; animation: lvl-sweep 1.1s 0.25s ease-in-out both;
  background: linear-gradient(105deg, transparent 42%, rgb(255 255 255 / 0.3) 50%, transparent 58%);
}
.levelup > div { position: relative; text-align: center; animation: lvl-pop 1.9s ease both; }
.levelup b {
  display: inline-block; padding: 0.45em 1.1em; border-radius: 99px; font-size: min(2em, 7.5vw); font-weight: 800;
  background: var(--brand); color: var(--brand-ink); border: 3px solid var(--brand-edge); animation: lvl-glow 0.5s 0.35s 3 alternate;
  box-shadow: 0 0 0 0.2em rgb(255 190 69 / 0.35), 0 0 1.5em 0.3em rgb(255 190 69 / 0.6);
}
.levelup.l3 b { background: var(--bad); color: var(--bad-ink); border-color: var(--bad-edge); box-shadow: 0 0 0 0.2em rgb(214 51 57 / 0.35), 0 0 1.5em 0.3em rgb(214 51 57 / 0.6); }
.levelup p { margin-top: 0.7em; color: #fff; font-size: min(1.3em, 5vw); font-weight: 800; text-shadow: 0 2px 10px rgb(0 0 0 / 0.6); }
@keyframes lvl-fade { 0% { opacity: 0; } 12%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes lvl-pop { 0% { opacity: 0; transform: scale(0.6); } 18% { opacity: 1; transform: scale(1.08); } 28%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(1.04); } }
@keyframes lvl-sweep { from { transform: translateX(-60%); } to { transform: translateX(60%); } }
@keyframes lvl-glow { to { box-shadow: 0 0 0 0.35em rgb(255 255 255 / 0.25), 0 0 2.6em 0.8em rgb(255 190 69 / 0.8); } }
@media (prefers-reduced-motion: reduce) {
  .levelup::before { display: none; }
}
/* Account: TV login by phone, favourite categories, connected devices, rankings (account.js). */
.dialog.wide { width: min(48em, 100%); }
.tv-login { width: 100%; justify-content: flex-start; gap: 0.8em; margin-top: 0.9em; padding: 0.7em 1em; text-align: left; }
.tv-login .i { width: 1.6em; height: 1.6em; }
.tv-login b, .tv-login small { display: block; }
.tv-login b { font-size: 1.1em; }
.tv-login small { color: inherit; opacity: 0.8; font-size: 0.8em; font-weight: 600; }
/* Sign-in buttons in their owners' colours: the game's lilac for the phone, Google's white button with its
   four-colour G, Facebook's blue. --b-edge is the under-shadow, kept in the button's own colour on hover. */
.btn.brand { --b-edge: var(--line2); border-color: var(--b-edge); box-shadow: 0 3px 0 var(--b-edge); }
.btn.tv-login { --b-edge: var(--lav-edge); background: var(--lav); color: var(--lav-ink); }
.btn.google { --b-edge: #c7c7c7; background: #fff; color: #1f1f1f; }
.btn.fb { --b-edge: #0c5bc4; background: #1877f2; color: #fff; }
/* A sign-in in progress (act() disables its button): faded, flat, not pressable-looking. */
.btn.brand:disabled { opacity: 0.55; box-shadow: none; }
.btn .brand-logo { width: 1.4em; height: 1.4em; flex: none; }
.dialog > .or { display: flex; align-items: center; gap: 0.8em; margin: 1.1em 0 0.2em; color: var(--muted); font-size: 0.8em; font-weight: 700; }
.dialog > .or::before, .dialog > .or::after { content: ""; flex: 1; border-top: 1px solid var(--line2); }
.tv-pair { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.4em; align-items: center; margin-top: 0.6em; }
/* The QR keeps its own white ground in the dark theme too: phone cameras read dark modules on light. */
.qr { display: block; width: 13em; height: 13em; padding: 0.5em; border-radius: 0.8em; background: #fff; }
.tv-steps { display: grid; gap: 0.4em; margin: 0; padding-left: 1.2em; }
.dialog .big-code { margin: 0.3em 0 0.1em; font-size: 2.6em; font-weight: 800; letter-spacing: 0.08em; line-height: 1.2; color: var(--accent); }
.dialog .big-code.gone { text-decoration: line-through; opacity: 0.45; }
.dialog > .big-code { text-align: center; }
.tv-info { margin: 0.8em 0; }
.tv-info > span:first-child b { white-space: nowrap; }
.fav-btn { width: 100%; justify-content: flex-start; }
.fav-btn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-all[aria-pressed="true"] { background: var(--mint); border-color: var(--mint-edge); color: var(--mint-ink); box-shadow: 0 2px 0 var(--mint-edge); }
.fav-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5em 1em; }
.fav-head span { color: var(--muted); font-weight: 700; }
.fav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15em, 1fr)); gap: 1em 0.7em; margin-top: 1.2em; }
/* Long lines (devices, favourite categories) shorten with an ellipsis instead of widening the dialog. */
.fam { grid-template-columns: minmax(0, 1fr); }
.devices li.here { border-color: var(--peach-edge); background: var(--peach); }
.devices .btn, .fam li > .btn { flex: none; }
#ranks > h1 em { display: inline; }
.rk-bar { display: flex; flex-wrap: wrap; gap: 0.6em 1.2em; margin-top: 1em; }
.rk-bar .seg { margin: 0; width: min(20em, 100%); }
.rk-groups, .rk-acts { display: flex; flex-wrap: wrap; gap: 0.5em; }
.rk-groups { margin-top: 1em; }
.rk-groups [data-rk] { flex-direction: column; gap: 0; line-height: 1.25; }
.rk-groups small { font-size: 0.75em; font-weight: 600; opacity: 0.8; }
.rk-groups [aria-pressed="true"] { background: var(--brand); color: var(--brand-ink); border-color: var(--brand-edge); box-shadow: 0 3px 0 var(--brand-edge); }
.rk-group { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8em; margin-top: 1em; }
.rk-info { margin-top: 1em; }
.rk-info p + p { margin-top: 0.6em; color: var(--text); }
.rk-info .btn { margin-top: 0.8em; }
.empty .rk-acts { margin-top: 1em; }
.empty .rk-acts .btn { margin-top: 0; }
.rk-note { margin-top: 1em; }
.lb-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(20em, 1fr)); gap: 1em; align-items: start; margin-top: 1em; }
.lb { display: grid; gap: 0.2em; padding: 0; margin: 0.7em 0 0; list-style: none; }
.lb li { display: grid; grid-template-columns: 2em minmax(0, 1fr) auto; align-items: center; gap: 0.6em; padding: 0.35em 0.5em; border-radius: 0.7em; }
.lb em { font-style: normal; font-weight: 800; text-align: center; border-radius: 0.45em; background: var(--surface2); }
.lb span b, .lb small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb span b { font-weight: 800; }
.lb small { color: var(--muted); font-size: 0.8em; }
.lb > li > b { font-weight: 800; white-space: nowrap; }
.lb li.me { background: var(--peach); }
.lb li.me em { background: var(--brand); color: var(--brand-ink); }
@media (max-width: 760px) {
  .tv-pair { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .tv-info { grid-template-columns: minmax(0, 1fr); }
  .rk-bar .seg { width: 100%; }
  .lb-cols { grid-template-columns: minmax(0, 1fr); }
}
/* Death match (fourth mode card, HUD series and earned shields), category sets and "Wszystkie oprócz..." in the setup. */
.mode.sun { --fill: var(--sun); --edge: var(--brand-edge); --ink: var(--sun-ink); }
@media (min-width: 761px) {
  .modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.hud-item.dm-shields { position: relative; }
.hud-item.dm-shields .shields { align-items: center; }
.hud-item.dm-shields .shields b { margin-left: 0.25em; font-size: 0.9em; color: var(--text); }
.hud-item.dm-shields.gain .shields { animation: pop 0.6s 2; }
.rank li b small { display: block; color: var(--muted); font-size: 0.75em; font-weight: 700; text-align: right; }
.cat-tabs .btn span small { display: block; font-size: 0.75em; font-weight: 600; opacity: 0.8; line-height: 1.1; }
.cat-tabs .btn span { text-align: left; line-height: 1.2; }
.cat-modes { display: flex; flex-wrap: wrap; gap: 0.5em; margin: -0.4em 0 0.8em; }
.cat-modes .btn { font-size: 0.85em; padding-left: 0.9em; padding-right: 0.9em; }
.cat-modes .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-modes [data-catsets] .i:last-child { margin: 0 -0.2em 0 0.1em; opacity: 0.7; }
/* The sets' list in its dialog: one row per set with its categories under the name. */
.set-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(17em, 1fr)); gap: 0.5em; margin-top: 0.8em; }
.set-list .sec-link { border: 1.5px solid var(--line); background: var(--surface2); }
.set-list .sec-link[aria-pressed="true"] { background: var(--mint); border-color: var(--mint-edge); color: var(--mint-ink); }
.set-list .sec-link[aria-pressed="true"] small { color: inherit; }
.cat-modes [data-catmode][aria-pressed="true"] { background: var(--peach); border-color: var(--peach-edge); color: var(--peach-ink); box-shadow: 0 2px 0 var(--peach-edge); }
/* In exclusion mode a pressed tile is a category left out. */
.cat-grid.except .cat[aria-pressed="true"] { background: var(--peach); border-color: var(--peach-edge); color: var(--peach-ink); box-shadow: 0 2px 0 var(--peach-edge); }
.cat-grid.except .cat[aria-pressed="true"] span:not(.ico) { text-decoration: line-through; }
.cat-grid.except .cat[aria-pressed="true"] .ico { background: var(--surface); }
@media (orientation: landscape) and (min-width: 761px) and (min-height: 440px) {
  .cat-modes { flex: none; }
}
@media (max-width: 760px) {
  .cat-modes .btn { flex: 1 1 12em; }
}