/* «جاوبها!» — the design system (v4, 2026-10-21). build.mjs joins src/sj/styles/*.css in name
   order into public/sj/sj.css.
   Flat white panels on a light grey stage, 1px lines, one corner radius, almost no shadows.
   Colour comes from the categories and the players/teams as flat fills; the red of the «!» is
   kept for the one main action and the clock. The system font first (SF Arabic on Apple
   devices), start-aligned, on a fixed scale.
   Two layouts:
   - phone (< 600px wide, or shorter than 360px): one scrolling page, the scoreboard docked at
     the bottom;
   - presentation (iPad, laptop, TV): nothing scrolls except long lists; everything scales with
     --u like a slide, so a 1080p TV reads from the sofa (body text >= 29pt, ~60pt margins). */
:root {
  color-scheme: light;
  --bg: #f1f2f4; --surface: #ffffff; --sunk: #e9ebee; --line: #dcdfe4; --line-2: #c3c8cf;
  --ink: #16181b; --ink-2: #4a4f57; --ink-3: #737983;
  --red: #e0312b; --red-2: #c0241f;            /* the «!»: the main action and the clock */
  --focus: #0a66d9;
  --good: #188a48; --good-bg: #e3f3e9; --bad: #cf2a2a; --bad-bg: #fbe6e6; --gold: #b98200; --gold-bg: #fff4d6;
  --green: var(--good);                         /* older names some helpers still pass */
  --blue: #1d62d6;
  --p1: #df5a0d; --p2: #1d62d6; --p3: #c2185b; --p4: #8a3eb6;   /* players and teams, by seat (no green: green is "right") */
  --sf: -apple-system, BlinkMacSystemFont, 'SF Arabic', 'SF Pro Display', system-ui, 'Segoe UI', 'Noto Kufi Arabic', sans-serif;
  --logo: 'Aref Ruqaa', 'Amiri', serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;
  --hatch: repeating-linear-gradient(135deg, #c3c8cf 0 2px, transparent 2px 6px);
  --ease: cubic-bezier(.2, .8, .25, 1);
  /* the scale unit: phones ~4px; the presentation sets it from the screen */
  --u: clamp(3.5px, 1.06vw, 4.6px);
  --r: max(10px, calc(1.2 * var(--u)));       /* the one radius */
  --r-s: max(6px, calc(.7 * var(--u)));       /* marks and small squares */
  --gut-r: max(16px, env(safe-area-inset-right, 0px));
  --gut-l: max(16px, env(safe-area-inset-left, 0px));
  --kb: 0px; --vvt: 0px;
}
@media (min-width: 600px) and (min-height: 360px) {
  :root {
    --u: min(1vh, .6vw); --u: min(1dvh, .6vw);
    --gut-r: max(calc(5.5 * var(--u)), env(safe-area-inset-right, 0px));
    --gut-l: max(calc(5.5 * var(--u)), env(safe-area-inset-left, 0px));
  }
}
@media (min-width: 600px) and (min-height: 360px) and (orientation: portrait) {
  :root { --u: min(.8vw, .56vh); --u: min(.8vw, .56dvh); }
}

/* The page: header, the screen, the scoreboard dock; the shared parts every screen uses
   (buttons, fields, panels, segmented choices, sheets, the menu, toasts, chat, pause). */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; overflow-x: clip;
  font: 500 17px/1.45 var(--sf); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--focus); }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
::selection { background: #cfe0fb; }
kbd { display: inline-block; min-width: 1.8em; padding: 0 .45em; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; background: var(--surface); font: 700 .85em/1.6 var(--sf); color: var(--ink-2); text-align: center; }

/* ---------- header: the menu where Arabic readers start, where the game is, the name ---------- */
.bar {
  position: relative; z-index: 6; flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: calc(2 * var(--u));
  min-height: calc(max(60px, calc(9 * var(--u))) + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) var(--gut-r) 0 var(--gut-l);
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.tools { justify-self: start; display: flex; align-items: center; gap: calc(1 * var(--u)); }
.progress { justify-self: center; font: 700 max(13px, calc(2.6 * var(--u)))/1.3 var(--sf); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.progress:empty { visibility: hidden; }
.brand { justify-self: end; margin: 0; font: 700 max(26px, calc(5 * var(--u)))/1 var(--logo); font-kerning: none; color: var(--ink); white-space: nowrap; padding-top: .1em; }
.brand b { color: var(--red); font-weight: 700; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; color: var(--ink); background: var(--surface); font: 700 15px/1 var(--sf); white-space: nowrap;
}
.icon-btn.square { width: 44px; padding: 0; }
.icon-btn .i { font-size: 18px; }
.icon-btn:hover { background: var(--bg); }
.icon-btn.off .i-sound { --i: var(--i-sound-off); }
.icon-btn.menu-btn { border-color: var(--ink); }

/* ---------- the screen ---------- */
#screen { position: relative; flex: 1 0 auto; display: flex; flex-direction: column; min-width: 0; padding: calc(3 * var(--u)) var(--gut-r) calc(4 * var(--u)) var(--gut-l); }
#screen > * { min-width: 0; }
.center { display: grid; justify-items: start; align-content: start; gap: calc(2.4 * var(--u)); }
.stack { display: grid; gap: calc(2 * var(--u)); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: calc(1.4 * var(--u)); }
.grow { flex: 1; }
.muted { color: var(--ink-3); font-weight: 600; }
.muted.small, small.muted { font-size: max(14px, calc(2.6 * var(--u))); }
.body-text { margin: 0; max-width: 60ch; color: var(--ink-2); }
.marquee h1, .title { margin: 0; font: 800 max(28px, calc(7 * var(--u)))/1.2 var(--sf); color: var(--ink); text-wrap: balance; }
.tagline, .dek { margin: 0; max-width: 46ch; font: 500 max(17px, calc(3.6 * var(--u)))/1.45 var(--sf); color: var(--ink-2); }
h2 { margin: 0; font: 800 max(19px, calc(4 * var(--u)))/1.3 var(--sf); }
h3 { margin: 0; font: 800 max(16px, calc(3.2 * var(--u)))/1.3 var(--sf); }

/* what to do now, in words, at the start of the screen */
.cue { display: flex; align-items: center; gap: calc(1.6 * var(--u)); margin: 0 0 calc(2.4 * var(--u)); font: 800 max(19px, calc(4.4 * var(--u)))/1.3 var(--sf); color: var(--ink); }
.cue .em { width: max(26px, calc(5.4 * var(--u))); font-size: max(13px, calc(2.6 * var(--u))); }
.cue.mine { color: var(--red); }
.cue.bad { color: var(--bad); }
.cue.good { color: var(--good); }

/* ---------- a player's or team's mark: their colour, the first letter of the name ---------- */
.em {
  display: inline-grid; place-items: center; flex: none; width: 1.9em; aspect-ratio: 1; border-radius: var(--r-s);
  color: #fff; background: var(--pc, var(--ink-3)); font: 800 1em/1 var(--sf); text-align: center;
}
.em.big { width: max(44px, calc(9 * var(--u))); font-size: max(20px, calc(4.2 * var(--u))); }
.em.ghost { background: var(--sunk); color: var(--ink-3); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(1.2 * var(--u)); min-height: 48px; padding: 0 max(18px, calc(3 * var(--u)));
  border: 1px solid var(--line-2); border-radius: var(--r); cursor: pointer; text-decoration: none; white-space: nowrap; text-align: center;
  font: 700 max(16px, calc(2.9 * var(--u)))/1.2 var(--sf); color: var(--ink); background: var(--surface);
  transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--bg); }
.btn:active { transform: translateY(1px); }
.btn:disabled { cursor: default; opacity: .4; transform: none; }
.btn.gold, .btn.primary { color: #fff; background: var(--red); border-color: var(--red); }
.btn.gold:hover, .btn.primary:hover { background: var(--red-2); border-color: var(--red-2); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--focus); }
.btn.ghost:hover { background: rgba(10, 102, 217, .06); }
.btn.small { min-height: 44px; padding: 0 max(14px, calc(2.2 * var(--u))); font-size: max(15px, calc(2.6 * var(--u))); }
.btn.big { min-height: max(56px, calc(8.2 * var(--u))); padding: 0 max(26px, calc(5 * var(--u))); font-size: max(18px, calc(3.3 * var(--u))); }
.btn.danger { color: var(--bad); border-color: var(--bad); background: var(--surface); }
.btn.wide { width: 100%; }
.btn .i { font-size: 1.1em; }
.link { display: inline-flex; align-items: center; gap: calc(1 * var(--u)); min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--focus); text-decoration: none; font: 700 max(15px, calc(2.8 * var(--u)))/1.3 var(--sf); }
.link:hover { text-decoration: underline; }
.link .i { font-size: 1.05em; }

/* ---------- fields, panels, choices ---------- */
.field {
  width: 100%; min-height: 48px; padding: 0 calc(1.8 * var(--u)); border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--surface); color: var(--ink); font: 700 max(17px, calc(3.4 * var(--u)))/1.3 var(--sf);
}
.field:focus { outline: 3px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
.field.code { direction: ltr; text-align: center; letter-spacing: .2em; font-size: max(26px, calc(6 * var(--u))); font-variant-numeric: tabular-nums; }
textarea.field { min-height: 96px; padding-block: calc(1.4 * var(--u)); resize: vertical; font-weight: 600; }
.panel { width: 100%; max-width: 640px; padding: calc(3 * var(--u)) calc(3.2 * var(--u)); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.panel.center { justify-items: start; }
.panel > h2 + * { margin-top: calc(1.4 * var(--u)); }
.seg { display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.seg button { flex: 1 1 auto; min-height: 44px; padding: 0 calc(2.2 * var(--u)); border: 0; cursor: pointer; background: transparent; color: var(--ink-2); font: 700 max(15px, calc(2.7 * var(--u)))/1.25 var(--sf); }
.seg button + button { box-shadow: inset -1px 0 0 var(--line); }
.seg button.on { background: var(--ink); color: #fff; box-shadow: none; }
details.settings { width: 100%; max-width: 640px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
details.settings > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: calc(1.4 * var(--u)); min-height: 52px; padding: calc(1 * var(--u)) calc(2.4 * var(--u)); cursor: pointer; list-style: none; font: 700 max(16px, calc(3 * var(--u)))/1.3 var(--sf); }
details.settings > summary::-webkit-details-marker { display: none; }
details.settings > summary::after { content: ''; grid-column: 2; grid-row: 1 / span 2; width: .55em; height: .55em; border-inline-start: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(-45deg); }
details.settings[open] > summary::after { transform: rotate(135deg); }
details.settings > summary small { grid-column: 1; color: var(--ink-3); font-weight: 600; font-size: .85em; }
.sum-title { display: inline-flex; align-items: center; gap: calc(1 * var(--u)); }
details.settings[open] { padding-bottom: calc(2 * var(--u)); }
details.settings > :not(summary) { margin-inline: calc(2.4 * var(--u)); }
details.settings .muted { display: block; margin-top: calc(2 * var(--u)); margin-bottom: calc(.8 * var(--u)); }
.tabs { display: flex; width: 100%; max-width: 640px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs button { flex: none; min-height: 48px; padding: 0 calc(2.4 * var(--u)); border: 0; border-bottom: 3px solid transparent; background: none; cursor: pointer; color: var(--ink-2); font: 700 max(15px, calc(2.8 * var(--u)))/1 var(--sf); }
.tabs button.on { color: var(--ink); border-bottom-color: var(--red); }
.chip, .note-chip, .good-chip, .bad-chip, .badge-chip {
  display: inline-flex; align-items: center; gap: calc(.8 * var(--u)); min-height: 30px; padding: 0 calc(1.4 * var(--u)); border-radius: 6px;
  background: var(--sunk); color: var(--ink-2); font: 700 max(14px, calc(2.5 * var(--u)))/1.5 var(--sf);
}
.good-chip { background: var(--good-bg); color: var(--good); }
.bad-chip { background: var(--bad-bg); color: var(--bad); }
.note-chip { background: var(--gold-bg); color: #7a5200; }
.badges { display: flex; flex-wrap: wrap; gap: calc(1 * var(--u)); }

/* ---------- the scoreboard dock: one segment per player or team ---------- */
.dock { position: sticky; bottom: 0; z-index: 5; flex: none; background: var(--surface); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); }
.dock:empty { display: none; }
.dock-act { display: flex; justify-content: center; gap: calc(1.4 * var(--u)); padding: calc(1.6 * var(--u)) var(--gut-r) calc(.4 * var(--u)) var(--gut-l); }
.dock-act .btn.gold, .dock-act .btn.primary { flex: 1; max-width: 440px; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding-inline: env(safe-area-inset-right, 0px) env(safe-area-inset-left, 0px); }
.plq {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "m w" "s s"; column-gap: calc(1.4 * var(--u)); row-gap: calc(.3 * var(--u)); align-items: center;
  min-width: 0; padding: calc(1.8 * var(--u)) calc(2.2 * var(--u)); border: 0; text-align: start; color: inherit; background: transparent; transition: background .25s;
}
.plq + .plq { box-shadow: inset -1px 0 0 var(--line); }
.plq .em { grid-area: m; width: max(22px, calc(4.8 * var(--u))); font-size: max(11px, calc(2.3 * var(--u))); }
.plq .who { grid-area: w; display: flex; align-items: center; gap: calc(.9 * var(--u)); min-width: 0; }
.plq .nm { min-width: 0; font: 700 max(13px, calc(3 * var(--u)))/1.3 var(--sf); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plq .tag { flex: none; padding: 0 calc(1 * var(--u)); border-radius: 5px; background: var(--sunk); color: var(--ink-2); font: 700 max(10px, calc(2 * var(--u)))/1.7 var(--sf); white-space: nowrap; }
.plq .sc { grid-area: s; font: 800 max(22px, calc(5.4 * var(--u)))/1.05 var(--sf); color: var(--ink); font-variant-numeric: tabular-nums; }
.plq .sc:empty { display: none; }
.plq .crown { flex: none; color: var(--gold); }
.plq .flame { flex: none; color: var(--red); font: 800 max(11px, calc(2 * var(--u)))/1 var(--sf); }
.plq.turn { background: var(--pc); }
.plq.turn .nm, .plq.turn .sc, .plq.turn .flame { color: #fff; }
.plq.turn .em { background: #fff; color: var(--pc); }
.plq.turn .tag { background: rgba(255, 255, 255, .24); color: #fff; }
.plq.turn .crown { color: #fff; }
.plq.away .nm::after { content: ' · ' attr(data-away); color: var(--ink-3); font-weight: 600; }
.plq.away .em { opacity: .45; }
.plq.done .em { position: relative; }
.plq.done .em::after { content: '✓'; position: absolute; bottom: -.35em; left: -.35em; display: grid; place-items: center; width: 1em; height: 1em; border-radius: 4px; background: var(--ink-2); color: #fff; font: 800 .6em/1 var(--sf); box-shadow: 0 0 0 2px var(--surface); }
.plq.empty .nm { color: var(--ink-3); }
.plq.empty .em { background: var(--sunk); }
.plq.hit { animation: hit 1.4s var(--ease); }
.plq.hit-minus { animation: hit-minus 1.4s var(--ease); }
button.plq { cursor: pointer; }
.rail.award button.plq:hover, .rail.award button.plq:focus-visible { background: var(--good-bg); outline: none; }
.rail.award .plq .tag { background: var(--good); color: #fff; }
.rail:has(> :nth-child(4)) .plq .em { display: none; }
.rail:has(> :nth-child(4)) .plq { grid-template-areas: "w w" "s s"; }

/* ---------- sheets and dialogs ---------- */
#modal { position: fixed; inset: 0; z-index: 30; display: none; }
#modal.on { display: block; }
.modal-back { position: absolute; inset: 0; top: var(--vvt); bottom: var(--kb); display: grid; place-items: center; padding: calc(16px + env(safe-area-inset-top, 0px)) var(--gut-r) calc(16px + env(safe-area-inset-bottom, 0px)) var(--gut-l); background: rgba(16, 18, 22, .36); overflow-y: auto; animation: fade .15s both; }
.modal-back > .panel { max-width: 560px; max-height: 100%; overflow-y: auto; padding: calc(3.4 * var(--u)); animation: rise .2s var(--ease) both; }
.modal-back.sheet { align-items: end; padding-bottom: 0; }
.modal-back.sheet > .panel { border-radius: 14px 14px 0 0; padding-bottom: calc(calc(3.4 * var(--u)) + env(safe-area-inset-bottom, 0px)); animation: up .24s var(--ease) both; }
.modal-back .panel > h2 { margin-bottom: calc(1.6 * var(--u)); }
.modal-back .panel.center > .btn { justify-self: stretch; }
.modal-back .panel.center > .btn.ghost, .modal-back .panel.center > .btn.small { justify-self: start; }
@media (min-width: 600px) and (min-height: 360px) {
  .modal-back.sheet { align-items: center; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .modal-back.sheet > .panel { border-radius: var(--r); width: min(92vw, calc(96 * var(--u))); max-width: 640px; }
}
.menu-list { display: grid; width: 100%; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-bottom: calc(1.6 * var(--u)); }
.menu-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: calc(2.2 * var(--u)); width: 100%; min-height: 56px; padding: 10px 16px; border: 0; background: var(--surface); cursor: pointer; text-align: start; color: var(--ink); text-decoration: none; }
.menu-row + .menu-row { border-top: 1px solid var(--line); }
.menu-row:hover { background: var(--bg); }
.menu-row > .i { font-size: 20px; color: var(--ink-2); }
.mr-body { display: grid; min-width: 0; }
.mr-body b { font: 700 max(16px, calc(3.1 * var(--u)))/1.35 var(--sf); }
.mr-body small { font: 500 max(14px, calc(2.7 * var(--u)))/1.3 var(--sf); color: var(--ink-3); }
.mr-tag { padding: 0 calc(1 * var(--u)); border-radius: 5px; background: var(--good-bg); color: var(--good); font: 700 13px/1.8 var(--sf); }
.menu-row.danger b, .menu-row.danger > .i { color: var(--bad); }
.steps { margin: 0 0 calc(1.6 * var(--u)); padding: 0; list-style: none; display: grid; gap: calc(1.8 * var(--u)); counter-reset: s; }
.steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(1.8 * var(--u)); align-items: center; font: 600 max(16px, calc(3.2 * var(--u)))/1.45 var(--sf); }
.steps li::before { counter-increment: s; content: counter(s, arabic-indic); display: grid; place-items: center; width: max(32px, calc(6 * var(--u))); aspect-ratio: 1; border-radius: var(--r-s); background: var(--ink); color: #fff; font: 800 max(15px, calc(2.8 * var(--u)))/1 var(--sf); }
.credits { display: grid; gap: calc(1 * var(--u)); max-height: 50vh; overflow-y: auto; font: 500 14px/1.5 var(--sf); color: var(--ink-2); }
.credits p { margin: 0; }
.profile .field { margin-bottom: calc(.4 * var(--u)); }

/* ---------- toasts, the network bar, the pause card, the quick-hide notes ---------- */
#toasts { position: fixed; z-index: 45; top: calc(12px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); display: grid; gap: 8px; justify-items: center; width: min(92vw, 560px); pointer-events: none; }
.toast { max-width: 100%; padding: calc(1.2 * var(--u)) calc(3 * var(--u)); border-radius: 10px; background: var(--ink); color: #fff; font: 700 max(15px, calc(2.9 * var(--u)))/1.5 var(--sf); text-align: center; animation: toast 2.9s var(--ease) forwards; }
.netbar { position: fixed; z-index: 46; top: env(safe-area-inset-top, 0px); inset-inline: 0; padding: 8px var(--gut-r) 8px var(--gut-l); background: var(--gold-bg); color: #7a5200; text-align: center; font: 700 15px/1.4 var(--sf); border-bottom: 1px solid #f0d78f; }
.pause { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: var(--gut-r); background: rgba(16, 18, 22, .4); }
.pcard { display: grid; gap: 6px; min-width: min(90vw, 360px); padding: calc(3.4 * var(--u)); border-radius: var(--r); background: var(--surface); text-align: center; }
.pcard b { font: 800 max(22px, calc(4.6 * var(--u)))/1.3 var(--sf); }
.pcard span { color: var(--ink-2); font-weight: 600; }
.notes { position: fixed; inset: 0; z-index: 100; padding: calc(28px + env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) 24px max(24px, env(safe-area-inset-left, 0px)); background: #fff; color: #222; font: 400 17px/1.7 Georgia, 'Times New Roman', serif; overflow-y: auto; }
.notes .ntitle { display: block; margin: 0 0 4px; padding: 0; border: 0; background: none; font: 700 22px/1.4 Georgia, serif; color: #111; cursor: default; }
.notes .nmeta { color: #666; font-size: 14px; margin-bottom: 18px; }
.notes .nlist { padding-inline-start: 22px; }

/* ---------- chat: the button, the latest line, the sheet (side panel on a wide screen) ---------- */
/* the chat is a button in the header (it never covers the game); the latest line peeks out under it */
.chat-btn { position: relative; }
.chat-btn .badge { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: var(--red); color: #fff; font: 800 12px/22px var(--sf); text-align: center; }
.chat-btn .badge:empty { display: none; }
.peek-line { position: absolute; z-index: 24; right: var(--gut-r); bottom: calc(100% + 8px); pointer-events: none; max-width: min(70vw, 420px); padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font: 600 15px/1.4 var(--sf); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 2px 8px rgba(16, 24, 40, .08); }
.chat { position: fixed; z-index: 25; inset-inline: 0; bottom: var(--kb); display: none; flex-direction: column; height: min(52dvh, 460px); border-top: 1px solid var(--line); border-radius: 14px 14px 0 0; background: var(--surface); box-shadow: 0 -8px 30px rgba(16, 24, 40, .14); padding-bottom: env(safe-area-inset-bottom, 0px); }
.chat.open { display: flex; }
.chat-head { display: flex; align-items: center; gap: 8px; padding: 8px var(--gut-r) 8px var(--gut-l); border-bottom: 1px solid var(--line); font: 800 17px/1.3 var(--sf); }
.msgs { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 10px var(--gut-r) 10px var(--gut-l); }
.bubble { --pc: var(--ink-2); align-self: flex-start; max-width: 82%; padding: 7px 12px; border-radius: 12px; background: var(--sunk); font: 600 16px/1.45 var(--sf); overflow-wrap: anywhere; }
.bubble b { display: block; color: var(--pc); font-size: 13px; }
.bubble.mine { align-self: flex-end; background: #dfeafc; }
.bubble.react { background: none; font-size: 26px; padding: 0 4px; }
.reacts { display: flex; gap: 4px; overflow-x: auto; padding: 6px var(--gut-r) 6px var(--gut-l); border-top: 1px solid var(--line); scrollbar-width: none; }
.reacts button { flex: none; min-width: 44px; height: 44px; padding: 0 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; font: 700 18px/1 var(--sf); }
.compose { display: flex; gap: 8px; padding: 8px var(--gut-r) 8px var(--gut-l); border-top: 1px solid var(--line); }
.compose input { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 10px; font: 600 16px/1.3 var(--sf); }
body.chat-open .peek-line { display: none; }
/* while a clock runs the line stays away (the badge on the chat button keeps count) */
body:is([data-phase=question],[data-phase=steal],[data-phase=knowme],[data-phase=final],[data-phase=wager],[data-phase=lightning],[data-phase=guess]) .peek-line { display: none; }
@media (min-width: 900px) {
  .chat { inset-inline: auto 0; inset-inline-end: auto; left: 0; right: auto; top: 0; bottom: 0; width: 340px; height: auto; border-top: 0; border-right: 1px solid var(--line); border-radius: 0; }
  body.chat-open { padding-left: 340px; }
}
/* a reaction someone sent, big for a moment */
.sticker { position: fixed; z-index: 60; top: 18%; font: 800 56px/1 var(--sf); pointer-events: none; animation: sticker 1.7s var(--ease) forwards; }
.sticker.word { font-size: 30px; padding: 6px 14px; border-radius: 12px; background: var(--ink); color: #fff; }

/* ---------- the presentation: nothing scrolls but the screen itself ---------- */
@media (min-width: 600px) and (min-height: 360px) {
  html, body { height: 100%; overflow: hidden; }
  body { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
  #screen { overflow-x: hidden; overflow-y: auto; padding-top: calc(3.4 * var(--u)); padding-bottom: calc(3 * var(--u)); }
  .dock { position: relative; }
  .rail { padding-inline: var(--gut-r) var(--gut-l); }
  .plq { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "m w s"; padding: calc(2 * var(--u)) calc(2.6 * var(--u)); column-gap: calc(2 * var(--u)); }
  .rail:has(> :nth-child(4)) .plq { grid-template-areas: "m w s"; }
  .rail:has(> :nth-child(4)) .plq .em { display: grid; }
  .plq .em { width: calc(6.2 * var(--u)); font-size: calc(2.9 * var(--u)); }
  .plq .nm { font-size: calc(3.1 * var(--u)); }
  .plq .tag { font-size: calc(2.1 * var(--u)); }
  .plq .sc { font-size: calc(6.2 * var(--u)); justify-self: end; }
  .dock-act { display: none; }
  .icon-btn { height: max(44px, calc(6 * var(--u))); min-width: max(44px, calc(6 * var(--u))); padding: 0 calc(1.8 * var(--u)); font-size: max(15px, calc(2.4 * var(--u))); }
  .icon-btn.square { width: max(44px, calc(6 * var(--u))); padding: 0; }
  .icon-btn .i { font-size: max(18px, calc(2.8 * var(--u))); }
}
@media (min-width: 600px) and (min-height: 360px) and (orientation: portrait) {
  .plq, .rail:has(> :nth-child(4)) .plq { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "m w" "s s"; }
  .plq .sc { justify-self: start; font-size: calc(5.6 * var(--u)); }
}
/* phones: the step the game is at goes into the screen's own words */
@media (max-width: 599px), (max-height: 359px) {
  .bar { grid-template-columns: auto minmax(0, 1fr); }
  .progress { display: none; }
  .plq .tag { display: none; }
}
@media (max-width: 359px) {
  .plq { padding: calc(1.6 * var(--u)) calc(1.4 * var(--u)); grid-template-areas: "w w" "s s"; }
  .plq .em { display: none; }
  .tools .icon-btn:not(.square) span:not(.i) { display: none; }
}
/* awarding points: each team's segment is a button with its colour along the top */
.rail.award .plq { cursor: pointer; box-shadow: inset 0 4px 0 var(--pc); }
.rail.award .plq + .plq { box-shadow: inset 0 4px 0 var(--pc), inset 1px 0 0 var(--line); }
/* a phone: whatever scrolls into view (a tapped field, the next tile) stays clear of the scoreboard */
@media (max-width: 599px), (max-height: 359px) {
  html { scroll-padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px)); }
}
/* lobby seats have no score yet: the tag drops under the name instead of cutting it */
.plq:has(> .sc:empty) .who { flex-wrap: wrap; row-gap: calc(.3 * var(--u)); }
/* awarding on one device: the points each team would get, where its score is */
.rail.award .plq .sc { color: var(--good); }
.muted.bad { color: var(--bad); }
@media (min-width: 600px) and (min-height: 360px) {
  .plq.turn .tag { display: none; }   /* the filled segment already says whose turn; the name keeps the room */
}
@media (max-width: 599px), (max-height: 359px) {
  .full-btn { display: none; }   /* full screen is in the menu on a phone */
}

@media (min-width: 600px) and (min-height: 360px) {
  .peek-line { max-width: min(60vw, calc(120 * var(--u))); padding: calc(1.2 * var(--u)) calc(2 * var(--u)); font-size: max(15px, calc(2.8 * var(--u))); }
}

/* ---------- «الثيمات»: the other looks, in the menu on the front page ---------- */
.themes { display: grid; gap: calc(1 * var(--u)); width: 100%; margin-bottom: calc(1.6 * var(--u)); }
.themes-label { font: 700 max(16px, calc(2.8 * var(--u)))/1.4 var(--sf); color: var(--ink-2); }
.theme-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.theme { display: grid; align-content: center; justify-items: center; gap: 2px; min-height: 56px; padding: 8px 6px; color: var(--ink); text-align: center; text-decoration: none; }
.theme:nth-child(even) { border-inline-start: 1px solid var(--line); }
.theme:nth-child(n+3) { border-top: 1px solid var(--line); }
.theme b { font: 700 max(15px, calc(2.9 * var(--u)))/1.35 var(--sf); }
.theme small { font: 500 15px/1.3 var(--sf); color: var(--ink-2); }
.theme.on { background: var(--bg); }
a.theme b { color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }
a.theme:hover { background: var(--bg); }

/* The front page, loading, the lobbies (a phone's, the TV's join screen, the one-device teams). */

/* ---------- home: the name, then the three ways to play as one list ---------- */
body[data-mode=home] .brand { visibility: hidden; }
.home { flex: 1; display: grid; gap: calc(6 * var(--u)); align-content: start; padding-block: calc(3 * var(--u)) calc(4 * var(--u)); }
.home > * { min-width: 0; }
.hero { display: grid; justify-items: start; gap: calc(1.4 * var(--u)); }
.wordmark { margin: 0; padding-bottom: .25em; font: 700 max(64px, calc(19 * var(--u)))/.95 var(--logo); font-kerning: none; color: var(--ink); }
.wordmark b { color: var(--red); font-weight: 700; }
.home .tagline { font-size: max(19px, calc(4.4 * var(--u))); font-weight: 600; }
.choices { display: grid; width: 100%; max-width: 640px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.choice {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: calc(3 * var(--u)); align-items: center;
  width: 100%; padding: calc(3 * var(--u)) calc(3.4 * var(--u)); border: 0; cursor: pointer; text-align: start; color: var(--ink); background: transparent;
}
.choice + .choice { border-top: 1px solid var(--line); }
.choice:hover, .choice:focus-visible { background: var(--bg); }
.choice:focus-visible { outline-offset: -3px; }
.choice .ci { grid-row: 1 / 3; display: grid; place-items: center; width: max(46px, calc(10 * var(--u))); aspect-ratio: 1; border-radius: var(--r); font-size: max(22px, calc(5 * var(--u))); color: #fff; background: var(--cc, var(--ink)); }
.choice b { font: 800 max(18px, calc(4.2 * var(--u)))/1.35 var(--sf); }
.choice small { font: 500 max(15px, calc(3.4 * var(--u)))/1.4 var(--sf); color: var(--ink-2); }
.choice .go { grid-row: 1 / 3; grid-column: 3; font-size: max(18px, calc(4 * var(--u))); color: var(--ink-3); }
.choice.primary .ci { background: var(--red); }
.links { display: flex; flex-wrap: wrap; gap: calc(.6 * var(--u)) calc(4 * var(--u)); }

/* ---------- loading ---------- */
.loading { flex: 1; display: grid; align-content: center; justify-items: start; gap: calc(2.4 * var(--u)); }
.loading-lines { display: grid; gap: 12px; width: min(220px, 60%); }
.loading-lines i { display: block; height: 10px; border-radius: 5px; background: var(--sunk); animation: breathe 1.4s ease-in-out infinite; }
.loading-lines i:nth-child(2) { width: 80%; animation-delay: .15s; }
.loading-lines i:nth-child(3) { width: 55%; animation-delay: .3s; }

/* ---------- lobbies ---------- */
.lobby { flex: 1; display: grid; gap: calc(3.4 * var(--u)); align-content: start; justify-items: start; padding-block: calc(1 * var(--u)) calc(4 * var(--u)); }
.lobby > * { min-width: 0; max-width: 100%; }
.code-card { display: grid; gap: calc(1.4 * var(--u)); padding: calc(3 * var(--u)) calc(3.6 * var(--u)); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); justify-items: start; }
.code-card .lbl, .final-cat .lbl, .minis .lbl { font: 700 max(14px, calc(2.8 * var(--u)))/1.4 var(--sf); color: var(--ink-3); }
.code { direction: ltr; font: 800 max(58px, calc(15 * var(--u)))/1 var(--sf); letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--ink); }
.chips:empty { display: none; }
.chip.on::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--good); }
.chip.on { background: var(--good-bg); color: var(--good); }
.lobby .start { display: grid; gap: calc(2 * var(--u)); justify-items: start; width: 100%; }
.lobby .start .btn.big { min-width: min(100%, 320px); }
.lobby .wait { font-weight: 700; color: var(--ink); }
/* a phone in a room: one centred column, the code, start and the settings the same width */
.lobby.room { width: min(100%, 560px); margin-inline: auto; justify-items: stretch; }
.lobby.room .start { justify-items: stretch; }
.lobby.room .start .btn.big { width: 100%; }
.cup-vs { display: grid; gap: 2px; }
.cup-vs small { font: 700 max(13px, calc(2.6 * var(--u)))/1.4 var(--sf); color: var(--ink-3); }
.cup-vs b { font: 800 max(16px, calc(3.2 * var(--u)))/1.4 var(--sf); overflow-wrap: anywhere; }

/* the TV: how to come in from a phone, and the code big with its QR */
.tv-join { display: grid; gap: calc(3.4 * var(--u)); justify-items: start; }
.tv-join .cue { margin: 0; }
.join-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: calc(2.2 * var(--u)); counter-reset: s; }
.join-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(2.2 * var(--u)); align-items: center; font: 700 max(18px, calc(3.8 * var(--u)))/1.4 var(--sf); color: var(--ink); }
.join-steps li::before { counter-increment: s; content: counter(s, arabic-indic); display: grid; place-items: center; width: max(34px, calc(6.4 * var(--u))); aspect-ratio: 1; border-radius: var(--r-s); background: var(--ink); color: #fff; font: 800 max(15px, calc(3 * var(--u)))/1 var(--sf); }
/* two ways in, side by side, not numbered steps: whoever scans is in already */
.join-steps.ways li { grid-template-columns: minmax(0, 1fr); padding-inline-start: calc(2.2 * var(--u)); border-inline-start: 4px solid var(--ink); }
.join-steps.ways li::before { content: none; }
.join-steps .url { direction: ltr; unicode-bidi: isolate; font-weight: 800; color: var(--focus); }
.qr { width: max(150px, calc(28 * var(--u))); aspect-ratio: 1; padding: calc(1.6 * var(--u)); border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.qr canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }

/* one device: the teams, the settings, start */
.lobby.host .title { margin-bottom: calc(-1.4 * var(--u)); }
.teams-wrap { display: grid; gap: calc(2 * var(--u)); justify-items: start; width: 100%; }
.teams-edit { display: grid; width: min(100%, 560px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.team-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: calc(2 * var(--u)); padding: calc(1.4 * var(--u)) calc(1.6 * var(--u)) calc(1.4 * var(--u)) calc(2.2 * var(--u)); }
.team-row + .team-row { border-top: 1px solid var(--line); }
.team-row > .em { width: max(36px, calc(7 * var(--u))); font-size: max(16px, calc(3.4 * var(--u))); }
.team-row .field { min-height: 46px; background: var(--bg); border-color: var(--line); }
.team-row .icon-btn { border-color: transparent; color: var(--ink-3); background: transparent; }
.lobby.host .settings { max-width: 560px; }
.row.go { gap: calc(2 * var(--u)); }

@media (min-width: 600px) and (min-height: 360px) {
  /* home: the name on one side, the ways to play on the other */
  .home { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; align-content: center; gap: calc(8 * var(--u)); padding: 0 0 calc(4 * var(--u)); min-height: 100%; }
  .wordmark { font-size: calc(18 * var(--u)); }
  .home .tagline { font-size: calc(3.8 * var(--u)); }
  .choices { max-width: none; }
  .choice { padding: calc(2.8 * var(--u)) calc(3.2 * var(--u)); }
  .choice .ci { width: calc(8.6 * var(--u)); font-size: calc(4.2 * var(--u)); }
  .choice b { font-size: calc(3.5 * var(--u)); }
  .choice small { font-size: calc(2.8 * var(--u)); }
  .choice .go { font-size: calc(3.4 * var(--u)); }
  .links { grid-column: 1 / -1; }
  .link { font-size: max(15px, calc(2.6 * var(--u))); }

  .lobby { gap: calc(3.4 * var(--u)); align-content: center; min-height: 100%; }
  .code { font-size: calc(12 * var(--u)); }
  .lobby .dek { font-size: calc(3.2 * var(--u)); }
  .lobby.tv { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: calc(8 * var(--u)); justify-items: stretch; align-items: center; }
  .lobby.tv .code-card { grid-template-columns: auto auto; column-gap: calc(5 * var(--u)); align-items: center; padding: calc(4 * var(--u)) calc(5 * var(--u)); justify-self: start; }
  .lobby.tv .code-card .lbl { grid-column: 1 / -1; }
  .lobby.tv .code { font-size: calc(14 * var(--u)); }
  .join-steps li { font-size: calc(3.4 * var(--u)); }
  .join-steps li::before { width: calc(6 * var(--u)); font-size: calc(2.8 * var(--u)); }
  .lobby.host { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "title teams" "dek teams" "set teams" "go teams"; align-content: center; align-items: center; column-gap: calc(8 * var(--u)); row-gap: calc(2.6 * var(--u)); }
  .lobby.host > .title { grid-area: title; align-self: end; margin: 0; }
  .lobby.host > .dek { grid-area: dek; }
  .lobby.host > .settings { grid-area: set; }
  .lobby.host > .go { grid-area: go; align-self: start; }
  .lobby.host > .teams-wrap { grid-area: teams; }
  .teams-edit { width: min(100%, calc(84 * var(--u))); }
  .team-row .field { font-size: calc(3 * var(--u)); min-height: max(44px, calc(6.4 * var(--u))); }
}
@media (min-width: 600px) and (min-height: 360px) and (orientation: portrait) {
  .home { grid-template-columns: none; gap: calc(5 * var(--u)); align-content: start; padding-top: calc(4 * var(--u)); min-height: 0; }
  .lobby.tv { grid-template-columns: none; }
  .lobby.host { grid-template-columns: none; grid-template-areas: "title" "dek" "teams" "set" "go"; }
}

/* Choosing the six categories, and the board. */

/* ---------- the draft: a lineup of six, the groups, the tiles ---------- */
.draft { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(2.4 * var(--u)); padding-block: 0 calc(3 * var(--u)); }
.draft > *, .boardwrap > * { min-width: 0; }
.draft > .cue, .boardwrap > .cue { margin: 0; }
.draft-top { display: grid; gap: calc(1.6 * var(--u)); }
.lineup { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.slot {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: calc(.8 * var(--u)); min-width: 0; min-height: max(64px, calc(14 * var(--u)));
  padding: calc(1.4 * var(--u)) calc(1.6 * var(--u)); color: var(--ink-3); box-shadow: inset -1px -1px 0 var(--line);
}
.slot .num { font: 800 max(16px, calc(3.4 * var(--u)))/1 var(--sf); font-variant-numeric: tabular-nums; color: var(--line-2); }
.slot .snm { max-width: 100%; font: 700 max(13px, calc(2.7 * var(--u)))/1.25 var(--sf); white-space: normal; text-wrap: balance; }
.slot.next { color: var(--red); box-shadow: inset 0 0 0 2px var(--red); }
.slot.next .em { width: max(20px, calc(4.4 * var(--u))); font-size: max(10px, calc(2.1 * var(--u))); }
.slot.full { color: #fff; background: var(--cc); }
.slot.full .sic { font-size: max(18px, calc(4 * var(--u))); }
.slot.full .em { position: absolute; top: calc(1.2 * var(--u)); inset-inline-end: calc(1.2 * var(--u)); width: max(20px, calc(4.4 * var(--u))); font-size: max(10px, calc(2.1 * var(--u))); background: #fff; color: var(--pc); }
.draft-acts { display: flex; flex-wrap: wrap; align-items: center; gap: calc(1.4 * var(--u)); }
.pills { display: flex; width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.pills::-webkit-scrollbar { display: none; }
.pill { flex: none; min-height: 44px; padding: 0 calc(2.6 * var(--u)); border: 0; cursor: pointer; font: 700 max(15px, calc(3 * var(--u)))/1 var(--sf); color: var(--ink-2); background: transparent; white-space: nowrap; }
.pill + .pill { box-shadow: inset -1px 0 0 var(--line); }
.pill.on { color: #fff; background: var(--ink); box-shadow: none; }
.cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(1.4 * var(--u)); }
.tile-cat {
  position: relative; display: grid; align-content: space-between; justify-items: start; gap: calc(1.6 * var(--u)); min-width: 0; min-height: max(100px, calc(23 * var(--u)));
  padding: calc(2.2 * var(--u)) calc(2.4 * var(--u)); border: 0; border-radius: var(--r); cursor: pointer; text-align: start; color: #fff; background: var(--cc);
  transition: transform .2s var(--ease);
}
.tile-cat .cic { font-size: max(24px, calc(5.4 * var(--u))); }
.tile-cat .nm { max-width: 100%; font: 800 max(16px, calc(3.6 * var(--u)))/1.25 var(--sf); text-wrap: balance; overflow-wrap: anywhere; }
.tile-cat .by { display: none; }
.tile-cat:not(:disabled):hover, .tile-cat:not(:disabled):focus-visible { transform: translateY(calc(-.4 * var(--u))); outline: 3px solid var(--ink); outline-offset: 2px; }
.tile-cat:disabled { cursor: default; }
/* someone else's turn: the tiles lie flat and the next slot isn't in «your turn» red */
.draft.wait .tile-cat:not(.taken) { opacity: .7; box-shadow: none; transform: translateY(var(--edge)); }
.draft.wait .slot.next { color: var(--ink-2); box-shadow: inset 0 0 0 2px var(--line-2); }
.tile-cat.taken { color: var(--ink-3); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.tile-cat.taken .cic { color: var(--cc); opacity: .6; }
.tile-cat.taken .by { display: inline-flex; align-items: center; gap: calc(1 * var(--u)); max-width: 100%; font: 700 max(12px, calc(2.4 * var(--u)))/1.3 var(--sf); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-cat.taken .by .em { width: max(18px, calc(3.8 * var(--u))); font-size: max(10px, calc(1.9 * var(--u))); }
.tile-cat.spin { z-index: 1; outline: 4px solid var(--ink); outline-offset: 2px; transform: scale(1.03); }
.glyph { display: inline-grid; place-items: center; width: 1.15em; height: 1.15em; font: 800 1em/1 var(--sf); }
/* a category's small square (the question's header, lists) */
.cico { display: inline-grid; place-items: center; flex: none; width: max(28px, calc(6 * var(--u))); aspect-ratio: 1; border-radius: var(--r-s); color: #fff; font-size: max(16px, calc(3.4 * var(--u))); background: var(--cc, var(--ink)); }

/* ---------- the board: per category its name block and three values ---------- */
.boardwrap { display: grid; gap: calc(2 * var(--u)); padding-bottom: calc(3 * var(--u)); }
.board { display: grid; gap: calc(1.6 * var(--u)); }
.board-meta { display: flex; justify-content: space-between; align-items: center; gap: calc(2 * var(--u)); font: 700 max(14px, calc(2.8 * var(--u)))/1.4 var(--sf); color: var(--ink-3); white-space: nowrap; }
.col { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: calc(1 * var(--u)); }
.cat-name {
  display: flex; align-items: center; gap: calc(1.2 * var(--u)); min-width: 0; min-height: max(56px, calc(13 * var(--u))); padding: calc(1 * var(--u)) calc(1.6 * var(--u));
  border-radius: var(--r); background: var(--cc); color: #fff; font: 800 max(14px, calc(3.3 * var(--u)))/1.2 var(--sf); text-wrap: balance; overflow-wrap: break-word;
}
.cat-name .cico { width: auto; background: none; font-size: max(18px, calc(4 * var(--u))); }
.val {
  position: relative; display: grid; place-items: center; min-width: 0; min-height: max(56px, calc(13 * var(--u))); padding: 0; border: 1px solid var(--line); border-radius: var(--r); cursor: default;
  color: inherit; background: var(--surface); transition: transform .15s var(--ease), border-color .15s;
}
.val .v { position: relative; font: 800 max(20px, calc(5.6 * var(--u)))/1 var(--sf); color: var(--cd, var(--ink)); font-variant-numeric: tabular-nums; padding-bottom: calc(1.6 * var(--u)); }
.studs { position: absolute; bottom: max(7px, calc(1.5 * var(--u))); display: flex; gap: max(4px, calc(.8 * var(--u))); }
.stud { width: max(8px, calc(1.6 * var(--u))); aspect-ratio: 1; border-radius: 2px; box-shadow: inset 0 0 0 1.5px var(--cc, var(--line-2)); }
.stud.off { box-shadow: inset 0 0 0 1px var(--line-2); background: var(--hatch); }
.stud.won { background: var(--pc); box-shadow: none; }
.board.live .val:not(.used) { cursor: pointer; }
.board.live .val:not(.used):hover, .board.live .val:not(.used):focus-visible { z-index: 1; transform: scale(1.03); border-color: var(--cc); outline: 3px solid var(--cc); outline-offset: 0; }
.val.used { background: var(--sunk); border-color: transparent; }
.val:disabled { color: inherit; }
.val.used .v { position: absolute; top: max(6px, calc(1.2 * var(--u))); inset-inline-start: max(8px, calc(1.4 * var(--u))); padding: 0; font-size: max(11px, calc(2.4 * var(--u))); color: var(--ink-3); }
.val.used .studs { position: static; gap: max(6px, calc(1.2 * var(--u))); }
.val.used .stud { width: max(20px, calc(4.6 * var(--u))); border-radius: max(5px, calc(.6 * var(--u))); }
.val.used .stud.won { display: grid; place-items: center; color: #fff; font: 800 max(10px, calc(2.2 * var(--u)))/1 var(--sf); }
.val.used .stud.won::before { content: attr(data-l); }
.stud.new { animation: stud .5s var(--ease) both; }
.gold-mark { position: absolute; top: max(5px, calc(1 * var(--u))); inset-inline-end: max(6px, calc(1.2 * var(--u))); font-size: max(12px, calc(2.4 * var(--u))); color: var(--gold); }
.game-clock { display: inline-flex; align-items: center; gap: 6px; padding: 0 calc(1.2 * var(--u)); border-radius: 6px; background: var(--sunk); color: var(--ink-2); font: 800 max(14px, calc(2.6 * var(--u)))/1.8 var(--sf); font-variant-numeric: tabular-nums; }
.game-clock.hurry { background: var(--red); color: #fff; }

/* one device: under the board, the quick games and the host's links */
.party-board { display: grid; gap: calc(2 * var(--u)); }
.host-row { display: flex; flex-wrap: wrap; align-items: center; gap: calc(1 * var(--u)) calc(3 * var(--u)); }
.minis { display: flex; flex-wrap: wrap; align-items: center; gap: calc(1.2 * var(--u)); }

@media (min-width: 600px) and (min-height: 360px) {
  /* the draft: the lineup and the dice on top, the tiles fill the rest and scroll */
  .draft { height: 100%; grid-template-rows: auto auto auto minmax(0, 1fr); gap: calc(2 * var(--u)); padding-block: 0 calc(.4 * var(--u)); }
  .draft-top { grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: calc(3 * var(--u)); }
  .lineup { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .slot { min-height: calc(11 * var(--u)); }
  .slot .snm { font-size: calc(2.4 * var(--u)); }
  .slot .num { font-size: calc(3.2 * var(--u)); }
  .slot.full .sic { font-size: calc(3.6 * var(--u)); }
  .draft-acts { flex-direction: column; align-items: stretch; justify-content: center; }
  .pill { min-height: max(44px, calc(5.4 * var(--u))); font-size: calc(2.5 * var(--u)); padding: 0 calc(2.4 * var(--u)); }
  .cats { min-height: 0; overflow-y: auto; grid-template-columns: repeat(auto-fill, minmax(calc(27 * var(--u)), 1fr)); grid-auto-rows: max-content; align-content: start; gap: calc(1.4 * var(--u)); padding: calc(.6 * var(--u)) calc(.6 * var(--u)) calc(3 * var(--u)); scrollbar-width: none; }
  .cats::-webkit-scrollbar { display: none; }
  .tile-cat { min-height: calc(17 * var(--u)); padding: calc(1.8 * var(--u)) calc(2.2 * var(--u)); gap: calc(1 * var(--u)); }
  .tile-cat .cic { font-size: calc(4.2 * var(--u)); }
  .tile-cat .nm { font-size: calc(2.7 * var(--u)); line-height: 1.2; }
  .tile-cat.taken .by { font-size: calc(2.1 * var(--u)); }

  /* the board: six columns, the category over its three values */
  .boardwrap { height: 100%; grid-template-rows: auto minmax(0, 1fr); gap: calc(2.4 * var(--u)); padding-bottom: calc(1.6 * var(--u)); }
  .board { height: 100%; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); gap: calc(1.2 * var(--u)); }
  .board-meta { position: absolute; top: calc(3.4 * var(--u)); inset-inline-end: var(--gut-l); font-size: calc(2.4 * var(--u)); }
  .board-meta > span:first-child { display: none; }
  .col { grid-template-columns: none; grid-template-rows: calc(10 * var(--u)) repeat(3, minmax(0, 1fr)); gap: calc(1.2 * var(--u)); }
  .cat-name { min-height: 0; padding: calc(1.2 * var(--u)) calc(1.6 * var(--u)); font-size: calc(2.7 * var(--u)); }
  .cat-name .cico { font-size: calc(3.6 * var(--u)); }
  .val { min-height: 0; }
  .val .v { font-size: calc(7 * var(--u)); }
  .stud { width: calc(1.7 * var(--u)); }
  .val.used .stud { width: calc(5.2 * var(--u)); }
  .val.used .stud.won { font-size: calc(2.4 * var(--u)); }
  .val.used .v { font-size: calc(2.4 * var(--u)); }
  .gold-mark { font-size: calc(2.6 * var(--u)); }
  .party-board { height: 100%; grid-template-rows: minmax(0, 1fr) auto; gap: calc(1.4 * var(--u)); }
  .party-board .boardwrap { padding-bottom: 0; }
  .host-row .btn.small { min-height: max(44px, calc(5.4 * var(--u))); font-size: calc(2.4 * var(--u)); }
  .host-row .link { font-size: calc(2.4 * var(--u)); min-height: max(44px, calc(5.4 * var(--u))); }
  .minis .lbl { font-size: calc(2.4 * var(--u)); }
}
@media (min-width: 600px) and (min-height: 360px) and (orientation: portrait) {
  .board { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .col { grid-template-rows: calc(9 * var(--u)) repeat(3, minmax(0, 1fr)); }
  .draft-top { grid-template-columns: none; }
  .draft-acts { flex-direction: row; }
  .cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 359px) {
  .col { grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); }
  .cat-name .cico { display: none; }
}

/* a value with one question has no squares: its number sits in the middle */
.val:not(.used):not(:has(.stud)) .v { padding-bottom: 0; }
/* the TV while someone picks on their phone: the six slots, big */
@media (min-width: 600px) and (min-height: 360px) {
  .draft.watch { grid-template-rows: auto minmax(0, 1fr); }
  .draft.watch .lineup { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .draft.watch .slot { min-height: calc(24 * var(--u)); padding: calc(2.4 * var(--u)); }
  .draft.watch .slot .snm { font-size: calc(4 * var(--u)); }
  .draft.watch .slot .num { font-size: calc(5 * var(--u)); }
  .draft.watch .slot.full .sic { font-size: calc(6 * var(--u)); }
  .draft.watch .slot .em { width: calc(6 * var(--u)); font-size: calc(2.8 * var(--u)); }
}
@media (min-width: 600px) and (min-height: 360px) and (orientation: portrait) {
  .draft.watch .slot { min-height: calc(16 * var(--u)); }
}

/* A question: the header (category, value, clock), the question, a picture beside it on a big
   screen, four answers, then the lifelines or the reveal. */
.q { display: grid; gap: calc(2.8 * var(--u)); padding-block: 0 calc(3 * var(--u)); animation: fade .18s ease-out both; }
.q > * { min-width: 0; }
.qmeta { display: flex; align-items: center; gap: calc(1.6 * var(--u)); min-width: 0; }
.qmeta .cico { width: max(40px, calc(8 * var(--u))); font-size: max(20px, calc(4.4 * var(--u))); border-radius: var(--r); }
.qmeta .cico.final { background: var(--ink); }
.qwho { min-width: 0; }
.qcat { min-width: 0; font: 800 max(17px, calc(3.8 * var(--u)))/1.25 var(--sf); color: var(--ink); overflow-wrap: anywhere; }
.diff { font: 600 max(13px, calc(2.6 * var(--u)))/1.4 var(--sf); color: var(--ink-3); }
.q.golden .diff { color: var(--gold); font-weight: 800; }
.coin { display: grid; place-items: center; flex: none; min-width: max(58px, calc(12 * var(--u))); height: max(40px, calc(8 * var(--u))); padding: 0 calc(1.6 * var(--u)); border: 2px solid var(--cc, var(--ink)); border-radius: var(--r); font: 800 max(17px, calc(3.8 * var(--u)))/1 var(--sf); color: var(--cd, var(--ink)); background: var(--surface); font-variant-numeric: tabular-nums; }
.coin.golden { border-color: var(--gold); color: var(--gold); background: var(--gold-bg); }
/* the clock: the seconds, and a thin line under them that runs down */
.timer { position: relative; display: grid; place-items: center; flex: none; margin-inline-start: auto; min-width: max(58px, calc(11 * var(--u))); height: max(48px, calc(9 * var(--u))); padding: 0 calc(1.4 * var(--u)); border: 2px solid var(--line-2); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.timer .num { font: 800 max(22px, calc(5 * var(--u)))/1 var(--sf); color: var(--ink); font-variant-numeric: tabular-nums; }
.clock-bar { position: absolute; inset-inline: 0; bottom: 0; height: max(3px, calc(.6 * var(--u))); background: var(--sunk); }
.clock-bar i { display: block; height: 100%; background: var(--ink-3); transform-origin: right; }
.timer.hurry { border-color: var(--red); }
.timer.hurry .num { color: var(--red); }
.timer.hurry .clock-bar i { background: var(--red); }
.timer.off { visibility: hidden; }
.powers { display: flex; flex-wrap: wrap; gap: calc(1.2 * var(--u)); }
.powers:empty { display: none; }
.power { display: inline-flex; align-items: center; gap: calc(.8 * var(--u)); padding: 0 calc(1.4 * var(--u)); border-radius: 6px; background: var(--gold-bg); color: #7a5200; font: 700 max(13px, calc(2.6 * var(--u)))/1.8 var(--sf); }
.qbody { display: grid; gap: calc(2 * var(--u)); align-content: start; min-height: 0; }
.qbody .cue { margin: 0; font-size: max(17px, calc(3 * var(--u))); color: var(--ink); }
.qbody .cue.mine { color: var(--red); }
.qbody .cue.bad { color: var(--bad); }
.qbody .cue .em { width: max(24px, calc(4.8 * var(--u))); font-size: max(12px, calc(2.4 * var(--u))); }
.qtext { margin: 0; max-width: 34em; font: 700 max(23px, calc(6.2 * var(--u)))/1.4 var(--sf); color: var(--ink); text-wrap: pretty; overflow-wrap: anywhere; }
.qlabel { display: block; margin-bottom: calc(.8 * var(--u)); font: 700 max(14px, calc(2.8 * var(--u)))/1.4 var(--sf); color: var(--ink-3); }
.blank { display: inline-block; min-width: 4.5em; margin-inline: .2em; border-bottom: .1em solid var(--ink-3); color: var(--ink); }
.blank.filled { border-color: var(--good); color: var(--good); }
/* the picture, emoji or code */
.media { position: relative; display: grid; place-items: center; min-height: 0; overflow: hidden; }
.photo { position: relative; display: flex; flex-direction: column; margin: 0; min-height: 0; width: min(100%, 520px); border-radius: var(--r); overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.photo .clip { flex: 1; min-height: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo img.zoom { animation: zoomout 8s cubic-bezier(.3, 0, .2, 1) both; }
.photo figcaption { padding: calc(.8 * var(--u)) calc(1.4 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 600 max(11px, calc(1.8 * var(--u)))/1.3 var(--sf); color: var(--ink-3); background: var(--surface); border-top: 1px solid var(--line); }
.emoji-q { font-size: max(48px, calc(14 * var(--u))); line-height: 1.2; }
.code-q { margin: 0; max-width: 100%; direction: ltr; text-align: left; padding: calc(2 * var(--u)) calc(2.6 * var(--u)); border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); font: 600 max(14px, calc(3 * var(--u)))/1.55 var(--mono); color: var(--ink); overflow-x: auto; white-space: pre; }
/* the four answers */
.answers { display: grid; gap: calc(1.2 * var(--u)); }
.ans {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: calc(2.2 * var(--u));
  min-height: max(58px, calc(13 * var(--u))); padding: calc(1.2 * var(--u)) calc(1.8 * var(--u)); border: 1px solid var(--line-2); border-radius: var(--r); text-align: start; cursor: default;
  font: 700 max(18px, calc(4.4 * var(--u)))/1.3 var(--sf); color: var(--ink); background: var(--surface);
  transition: opacity .25s, background .25s, border-color .25s, color .25s;
}
.ans .l { display: grid; place-items: center; width: max(34px, calc(7.2 * var(--u))); aspect-ratio: 1; border-radius: var(--r-s); font: 800 max(15px, calc(3.2 * var(--u)))/1 var(--sf); color: var(--ink); background: var(--sunk); }
.ans .t { min-width: 0; overflow-wrap: break-word; }
.ans .pins { display: flex; gap: calc(.6 * var(--u)); }
.ans .pins:empty { display: none; }
.ans .pins .em { width: max(24px, calc(5 * var(--u))); font-size: max(11px, calc(2.4 * var(--u))); animation: pop .2s var(--ease) both; }
.ans:disabled { color: var(--ink); }
.answers.live .ans:not(:disabled) { cursor: pointer; }
.answers.live .ans:not(:disabled):hover, .answers.live .ans:not(:disabled):focus-visible { border-color: var(--ink); outline: 2px solid var(--ink); outline-offset: -1px; }
.answers.live .ans:not(:disabled):active { background: var(--bg); }
.ans.mine { border-color: var(--focus); outline: 2px solid var(--focus); outline-offset: -1px; }
.ans.out { opacity: .4; background: var(--sunk); border-color: transparent; }
.ans.out .t { text-decoration: line-through; text-decoration-thickness: .08em; }
.ans.dim { opacity: .45; }
.ans.wrong { color: var(--bad); border-color: var(--bad); outline: 1px solid var(--bad); outline-offset: -1px; opacity: 1; }
.ans.wrong .l { background: var(--bad); color: #fff; }
.ans.wrong .t { text-decoration: line-through; text-decoration-thickness: .08em; }
.ans.right { color: #fff; background: var(--good); border-color: var(--good); opacity: 1; }
.ans.right .l { background: rgba(255, 255, 255, .2); color: #fff; }
.ans.right .pins .em { box-shadow: 0 0 0 2px var(--good), 0 0 0 3px #fff; }
.seal { display: grid; place-items: center; font-size: max(22px, calc(5 * var(--u))); color: #fff; }
.their-answer { position: absolute; top: calc(-1.4 * var(--u)); inset-inline-end: calc(2 * var(--u)); padding: 0 calc(1 * var(--u)); border-radius: 5px; background: var(--ink); color: #fff; font: 700 max(11px, calc(2.2 * var(--u)))/1.7 var(--sf); }
/* under the answers: the lifelines, or what happened */
.foot { display: grid; gap: calc(1.6 * var(--u)); align-content: start; }
.foot > :empty:not(.timer) { display: none; }
.verdict { margin: 0; font: 800 max(19px, calc(4.4 * var(--u)))/1.35 var(--sf); color: var(--ink); }
.verdict.good { color: var(--good); }
.verdict.bad { color: var(--bad); }
.extras { display: flex; flex-wrap: wrap; gap: calc(1 * var(--u)); }
.extras:empty { display: none; }
.bonus { display: inline-flex; align-items: center; padding: 0 calc(1.2 * var(--u)); border-radius: 6px; background: var(--good-bg); color: var(--good); font: 700 max(13px, calc(2.6 * var(--u)))/1.8 var(--sf); animation: pop .22s var(--ease) both; }
.bonus.bad { background: var(--bad-bg); color: var(--bad); }
.fact { margin: 0; max-width: 46em; font: 500 max(16px, calc(3.4 * var(--u)))/1.5 var(--sf); color: var(--ink-2); }
.fact-label { display: inline-block; margin-inline-end: calc(1.2 * var(--u)); padding: 0 calc(1 * var(--u)); border-radius: 5px; background: var(--sunk); color: var(--ink-3); font: 700 .75em/1.8 var(--sf); vertical-align: .1em; }
.fact-box:empty { display: none; }
.after { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(2 * var(--u)); }
.after:empty { display: none; }
.report { color: var(--ink-3); font-size: max(14px, calc(2.4 * var(--u))); }
.report[hidden] { display: none; }
.next-bar { height: 3px; border-radius: 2px; background: var(--sunk); overflow: hidden; }
.next-bar:empty { display: none; }
.next-bar i { display: block; height: 100%; background: var(--ink-3); transform-origin: right; animation: drain linear forwards; }
/* the lifelines: folded behind one button on a phone */
.lifewrap { display: grid; gap: calc(1.2 * var(--u)); justify-items: start; }
.lifebar { display: flex; flex-wrap: wrap; gap: calc(1 * var(--u)); }
.life { display: inline-flex; align-items: center; gap: calc(.9 * var(--u)); min-height: 44px; padding: 0 calc(2 * var(--u)); border: 1px solid var(--line-2); border-radius: var(--r); cursor: pointer; font: 700 max(14px, calc(2.6 * var(--u)))/1 var(--sf); color: var(--ink); background: var(--surface); }
.life:hover:not(:disabled) { background: var(--bg); }
.life:disabled { cursor: default; opacity: .4; }
.life.spent { text-decoration: line-through; }
/* the host's bar on one device: lifelines, the keys, the reveal */
.hostbar { display: flex; flex-wrap: wrap; align-items: center; gap: calc(1.6 * var(--u)) calc(2.4 * var(--u)); }
.hostbar .grow { flex: 1; }
.hostbar .cue { margin: 0; font-size: max(16px, calc(3.2 * var(--u))); color: var(--ink-2); }
.keys { font: 600 max(12px, calc(2.1 * var(--u)))/1.4 var(--sf); color: var(--ink-3); }
/* the final question's «who got it right» toggles */
.award { display: grid; gap: calc(1.6 * var(--u)); }
.award .cue { margin: 0; }
.award-teams { display: flex; flex-wrap: wrap; gap: calc(1.2 * var(--u)); }
.award-btn { gap: calc(1.2 * var(--u)); }
.award-teams .award-btn b { font-variant-numeric: tabular-nums; color: var(--ink-3); }
.award-teams .award-btn.on { color: #fff; background: var(--pc); border-color: var(--pc); }
.award-teams .award-btn.on b { color: #fff; }
.award-teams .award-btn.on .em { background: #fff; color: var(--pc); }

/* a phone: the host's reveal rides above the scores instead */
@media (max-width: 599px), (max-height: 359px) {
  .hostbar .reveal-btn, .hostbar .nobody-btn, .hostbar .keys { display: none; }
}
@media (min-width: 600px) and (min-height: 360px) {
  /* one screen; the answers two by two */
  .q { height: 100%; grid-template-areas: "meta" "body" "ans" "foot"; grid-template-rows: auto minmax(min-content, 1fr) auto auto;   /* the question's row is never shorter than its words */ gap: calc(2.4 * var(--u)); padding-block: 0 calc(1.6 * var(--u)); }
  .q > .qmeta { grid-area: meta; } .q > .qbody { grid-area: body; } .q > .media { grid-area: media; } .q > .answers { grid-area: ans; } .q > .foot { grid-area: foot; }
  .q.has-media { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "meta meta" "body media" "ans media" "foot foot"; grid-template-rows: auto minmax(min-content, 1fr) auto auto; column-gap: calc(5 * var(--u)); }
  .q.has-media .ans { min-height: calc(7.8 * var(--u)); }
  .q.has-media .qtext { font-size: calc(4.4 * var(--u)); }
  .qmeta .cico { width: calc(7.4 * var(--u)); font-size: calc(4 * var(--u)); }
  .qcat { font-size: calc(3.4 * var(--u)); }
  .diff { font-size: calc(2.4 * var(--u)); }
  .coin { height: calc(7.4 * var(--u)); min-width: calc(11 * var(--u)); font-size: calc(3.4 * var(--u)); }
  .timer { height: calc(7.4 * var(--u)); min-width: calc(10 * var(--u)); }
  .timer .num { font-size: calc(4.4 * var(--u)); }
  .qbody { align-content: center; }
  .qbody .cue { font-size: calc(3 * var(--u)); }
  .qtext { font-size: calc(5.6 * var(--u)); }
  .media { height: 100%; contain: size; }   /* the picture or code fits what's left; it never sizes the rows */
  .photo { width: auto; height: 100%; max-width: 100%; }
  .photo .clip { aspect-ratio: auto; }
  .emoji-q { font-size: calc(12 * var(--u)); }
  .answers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(1.4 * var(--u)) calc(1.8 * var(--u)); }
  .ans { min-height: calc(10 * var(--u)); padding: calc(1.2 * var(--u)) calc(1.8 * var(--u)); font-size: calc(3.6 * var(--u)); gap: calc(2 * var(--u)); }
  .answers.long .ans { min-height: calc(7.6 * var(--u)); font-size: calc(3.2 * var(--u)); }
  .ans .l { width: calc(6 * var(--u)); font-size: calc(2.8 * var(--u)); }
  .ans .pins .em { width: calc(4.4 * var(--u)); font-size: calc(2.1 * var(--u)); }
  .seal { font-size: calc(4.4 * var(--u)); }
  .verdict { font-size: calc(3.6 * var(--u)); }
  .fact { font-size: calc(2.9 * var(--u)); }
  .foot { gap: calc(1.4 * var(--u)); min-height: calc(8 * var(--u)); }
  .report { font-size: calc(2.2 * var(--u)); }
  .life { min-height: max(44px, calc(5.6 * var(--u))); font-size: calc(2.4 * var(--u)); }
  .hostbar .cue { font-size: calc(3 * var(--u)); }
  .power { font-size: calc(2.2 * var(--u)); }
  .bonus { font-size: calc(2.4 * var(--u)); }
}
@media (min-width: 600px) and (min-height: 360px) and (orientation: portrait) {
  .q.has-media { grid-template-columns: none; grid-template-areas: "meta" "body" "media" "ans" "foot"; grid-template-rows: auto auto minmax(0, 1fr) auto auto; }
  .answers { grid-template-columns: none; }
  .ans { min-height: calc(9 * var(--u)); font-size: calc(4 * var(--u)); }
}
/* the reveal: what made up the points, small after the shout */
.verdict .why { font-size: .6em; }
/* one device's final reveal: only the right answer stays, full width */
.q.final-reveal .ans.dim { display: none; }   /* one device's final reveal: only the right answer stays */
@media (min-width: 600px) and (min-height: 360px) {
  .q.final-reveal .answers { grid-template-columns: none; }
  /* beside a picture: tighter answers, and who picked them on a line of their own, so no word breaks */
  .q.has-media .ans { font-size: calc(3.2 * var(--u)); gap: calc(1.4 * var(--u)); padding-inline: calc(1.4 * var(--u)); }
  .q.has-media .ans .pins { grid-column: 2 / -1; grid-row: 2; justify-content: flex-start; }
}
/* a phone: a picture question keeps all four answers above the scoreboard */
@media (max-width: 599px) {
  .photo { width: auto; max-width: 100%; }
  .photo .clip { aspect-ratio: auto; }
  .photo img { width: auto; max-width: 100%; height: min(22dvh, 200px); object-fit: contain; }
}
/* who picked an answer: their names, in their colours */
.ans .pins { flex-wrap: wrap; justify-content: flex-end; }
.ans .pins .who-tag { max-width: 7em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 calc(1 * var(--u)); border-radius: 5px; background: var(--pc); color: #fff; font: 700 max(12px, calc(2.4 * var(--u)))/1.8 var(--sf); animation: pop .2s var(--ease) both; }
.ans .pins .who-tag.more { background: var(--ink); }
.ans.right .pins .who-tag { box-shadow: 0 0 0 2px #fff; }
@media (max-width: 599px), (max-height: 359px) {
  .award > .btn.gold { display: none; }   /* a phone: «احسبوا النتيجة» rides above the scores */
}
.bonus.none { background: var(--sunk); color: var(--ink-2); }
/* the TV final reveal: what each bet did is what the room wants to read */
@media (min-width: 600px) and (min-height: 360px) { .tv-mode .q .extras .bonus { font-size: calc(3.2 * var(--u)); } }

/* The final bet, the standings, the winner, the dare, the round's details. */

/* ---------- the final: the category, the bet ---------- */
.final { display: grid; gap: calc(2.6 * var(--u)); justify-items: start; align-content: start; padding-block: calc(1 * var(--u)) calc(4 * var(--u)); }
.final > * { min-width: 0; max-width: 100%; }
.final-cat { display: grid; gap: 2px; }
.final-cat b { font: 800 max(24px, calc(6 * var(--u)))/1.25 var(--sf); color: var(--ink); }
.panel.wager { display: grid; gap: calc(2 * var(--u)); justify-items: start; }
.wager-amt { font: 800 max(52px, calc(12 * var(--u)))/1 var(--sf); color: var(--ink); font-variant-numeric: tabular-nums; }
input[type=range] { width: 100%; height: 44px; margin: 0; accent-color: var(--red); cursor: pointer; }
.bets-panel { display: grid; gap: 0; }
.bets-panel h3 { margin-bottom: calc(1 * var(--u)); }
.bet-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "e n a" "r r r"; align-items: center; gap: calc(1.2 * var(--u)) calc(2 * var(--u)); padding: calc(1.8 * var(--u)) 0; }
.bet-row + .bet-row { border-top: 1px solid var(--line); }
.bet-row > .em { grid-area: e; width: max(30px, calc(6 * var(--u))); font-size: max(14px, calc(2.8 * var(--u))); }
.bet-row .nm { grid-area: n; font: 800 max(16px, calc(3.2 * var(--u)))/1.3 var(--sf); overflow-wrap: anywhere; }
.bet-amt { grid-area: a; font: 800 max(26px, calc(6 * var(--u)))/1 var(--sf); color: var(--pc); font-variant-numeric: tabular-nums; }
.bet-row .row { grid-area: r; gap: calc(1 * var(--u)); }

/* ---------- the standings and the table under the winner ---------- */
.standings { flex: 1; display: grid; gap: calc(3 * var(--u)); align-content: start; justify-items: start; padding-block: calc(1 * var(--u)) calc(4 * var(--u)); }
.ranks { display: grid; width: min(100%, 1000px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.rk { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "n e nm sc" "n e meter meter"; align-items: center; column-gap: calc(2.4 * var(--u)); row-gap: calc(1 * var(--u)); padding: calc(2.2 * var(--u)) calc(3 * var(--u)); }
.rk + .rk { border-top: 1px solid var(--line); }
.rk .n { grid-area: n; min-width: 1.2em; font: 800 max(20px, calc(5 * var(--u)))/1 var(--sf); color: var(--ink-3); text-align: center; font-variant-numeric: tabular-nums; }
.rk > .em { grid-area: e; width: max(36px, calc(8 * var(--u))); font-size: max(16px, calc(3.6 * var(--u))); }
.rk .nm { grid-area: nm; min-width: 0; font: 800 max(17px, calc(3.8 * var(--u)))/1.3 var(--sf); color: var(--ink); overflow-wrap: anywhere; }
.rk .sc { grid-area: sc; font: 800 max(22px, calc(6 * var(--u)))/1 var(--sf); color: var(--ink); font-variant-numeric: tabular-nums; }
.rk .meter { grid-area: meter; height: max(6px, calc(1.2 * var(--u))); border-radius: 3px; background: var(--sunk); overflow: hidden; }
.rk .meter i { display: block; height: 100%; width: calc(var(--p) * 100%); background: var(--pc); transform-origin: right; animation: grow .7s .1s var(--ease) both; }
.rk.first .n { color: var(--gold); }

/* ---------- the end: the winner's banner in their colour ---------- */
.end { flex: 1; display: grid; gap: calc(3 * var(--u)); align-content: start; padding-block: calc(1 * var(--u)) calc(4 * var(--u)); }
.end > * { min-width: 0; }
.winboard { display: grid; gap: calc(2 * var(--u)); }
.banner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "e k s" "e n s" "e f s"; align-items: center; column-gap: calc(3 * var(--u)); padding: calc(3.4 * var(--u)) calc(4 * var(--u)); border-radius: var(--r); background: var(--pc); color: #fff; animation: rise .4s var(--ease) both; }
.banner > .em { grid-area: e; width: max(56px, calc(13 * var(--u))); font-size: max(26px, calc(6 * var(--u))); background: #fff; color: var(--pc); }
.banner .k { grid-area: k; display: flex; align-items: center; gap: calc(1 * var(--u)); font: 700 max(15px, calc(3.4 * var(--u)))/1.3 var(--sf); opacity: .9; }
.banner b { grid-area: n; min-width: 0; padding-bottom: .12em; font: 700 max(44px, calc(13 * var(--u)))/1.1 var(--logo); font-kerning: none; overflow-wrap: anywhere; }
.banner .s { grid-area: s; text-align: end; font: 800 max(28px, calc(8 * var(--u)))/1 var(--sf); font-variant-numeric: tabular-nums; }
.banner .s small { display: block; font: 700 max(13px, calc(2.6 * var(--u)))/1.4 var(--sf); opacity: .85; }
.banner.tie { grid-template-areas: "k s" "n s" "f s"; grid-template-columns: minmax(0, 1fr) auto; background: var(--gold-bg); color: #7a5200; }
.winboard .ranks { width: 100%; }
.row.acts { gap: calc(1.4 * var(--u)); }
.tvnote { margin: 0; font: 600 max(15px, calc(3 * var(--u)))/1.4 var(--sf); color: var(--ink-2); }

/* ---------- «حكم الأخير»: a wheel of everyone's colours ---------- */
.dare { display: grid; justify-items: start; gap: calc(1.4 * var(--u)); }
.wheel { position: relative; width: min(220px, 60vw); aspect-ratio: 1; margin: calc(3 * var(--u)) 0 calc(1 * var(--u)); }
.wheel::after { content: ''; position: absolute; top: -14px; left: 50%; translate: -50% 0; border: 10px solid transparent; border-top: 14px solid var(--ink); border-bottom: 0; }
.wheel-disc { position: absolute; inset: 0; border-radius: 50%; background: var(--wheel); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.dare-text { display: grid; gap: 4px; }
.dare-text b { font: 800 max(20px, calc(4.4 * var(--u)))/1.4 var(--sf); color: var(--ink); }

/* ---------- the round's details, folded ---------- */
.round-details { width: 100%; padding: 0; }
.round-details > summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 calc(2.4 * var(--u)); cursor: pointer; list-style: none; font: 700 max(16px, calc(3 * var(--u)))/1.3 var(--sf); }
.round-details > summary::-webkit-details-marker { display: none; }
.round-details > summary::after { content: ''; width: .55em; height: .55em; border-inline-start: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(-45deg); }
.round-details[open] > summary::after { transform: rotate(135deg); }
.round-details > :not(summary) { margin: 0 calc(2.4 * var(--u)) calc(2 * var(--u)); }
.round-details .sub { display: grid; gap: calc(1 * var(--u)); padding-top: calc(2 * var(--u)); border-top: 1px solid var(--line); }
.round-details .answer-line { margin: 0; font-weight: 800; color: var(--good); }
.badge-row { display: flex; flex-wrap: wrap; align-items: center; gap: calc(1.2 * var(--u)); font-weight: 700; }
.badge-chip { background: var(--gold-bg); color: #7a5200; }
.hl-line { margin: 0; font-weight: 600; color: var(--ink-2); }

@media (min-width: 600px) and (min-height: 360px) {
  .final { flex: none; align-content: center; min-height: 100%; }
  .final-cat b { font-size: calc(5.4 * var(--u)); }
  .panel.wager { width: min(100%, calc(100 * var(--u))); }
  .bets-panel { width: min(100%, calc(130 * var(--u))); max-width: none; }
  .bet-row { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "e n a r"; }
  .standings { padding-block: 0 calc(2 * var(--u)); gap: calc(2.8 * var(--u)); align-content: center; min-height: 100%; grid-auto-rows: max-content; }
  .ranks { width: min(100%, calc(130 * var(--u))); }
  .rk { padding: calc(2 * var(--u)) calc(3 * var(--u)); }
  .rk .n { font-size: calc(4.6 * var(--u)); }
  .rk > .em { width: calc(6.6 * var(--u)); font-size: calc(3 * var(--u)); }
  .rk .nm { font-size: calc(3.4 * var(--u)); }
  .rk .sc { font-size: calc(5.4 * var(--u)); }
  .rk .meter { height: calc(1.2 * var(--u)); }
  .end { gap: calc(2.8 * var(--u)); padding-block: 0 calc(2 * var(--u)); }
  .banner { padding: calc(3.4 * var(--u)) calc(5 * var(--u)); }
  .banner > .em { width: calc(12 * var(--u)); font-size: calc(5.4 * var(--u)); }
  .banner .k { font-size: calc(3 * var(--u)); }
  .banner b { font-size: calc(12 * var(--u)); }
  .banner .s { font-size: calc(7.6 * var(--u)); }
  .banner .s small { font-size: calc(2.4 * var(--u)); }
  .end .ranks { width: 100%; }
  .tvnote { font-size: calc(3 * var(--u)); }
}
@media (min-width: 600px) and (min-height: 360px) and (orientation: portrait) {
  .banner { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "e k" "e n" "e f" "s s"; }
  .banner .s { text-align: start; }
}
@media (max-width: 599px), (max-height: 359px) {
  .banner { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "e k" "e n" "e f" "s s"; padding: calc(3 * var(--u)); }
  .banner.tie { grid-template-areas: "k" "n" "f" "s"; grid-template-columns: minmax(0, 1fr); }
  .banner .s { text-align: start; margin-top: calc(1.4 * var(--u)); }
  .row.acts .btn.big { flex: 1 1 100%; }
}
/* the lightning round's result, on the bet screen */
.flash-result { display: grid; gap: calc(1.2 * var(--u)); max-width: 760px; }
.flash-result .rk { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "e nm sc" "e note note"; }
.flash-result .rk > .em { grid-area: e; }
.flash-result .meter-note { grid-area: note; font: 600 max(14px, calc(2.6 * var(--u)))/1.4 var(--sf); color: var(--ink-3); }

/* what the last question did, on the winner's banner and each row */
.banner .fin { grid-area: f; display: grid; font: 700 max(14px, calc(2.6 * var(--u)))/1.3 var(--sf); opacity: .9; }
.rk .nm .fin { display: block; font: 700 max(14px, calc(2.6 * var(--u)))/1.3 var(--sf); white-space: nowrap; }
.rk .fin.good { color: var(--good); }
.rk .fin.bad { color: var(--bad); }
.final-answer { margin: 0; font: 700 max(16px, calc(3 * var(--u)))/1.4 var(--sf); color: var(--good); }
/* the tournament's line, under the buttons */
.cup-line { margin: 0; font: 600 max(16px, calc(3 * var(--u)))/1.4 var(--sf); color: var(--ink-2); }
.cup-line b { font-weight: 800; color: var(--ink); }
.end > .panel { max-width: none; }
/* one device, a team with nothing to bet */
.bet-row > .muted { grid-area: r; margin: 0; }
@media (min-width: 600px) and (min-height: 360px) and (orientation: landscape) {
  /* the bet beside the lightning result (or the teams' bets), nothing under the scoreboard */
  .final.split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); column-gap: calc(5 * var(--u)); }
  .final.split > * { grid-column: 1; }
  .final.split > .flash-result, .final.split > .bets-panel { grid-column: 2; grid-row: 1 / span 6; align-self: center; width: 100%; }
  .final.split { align-content: start; row-gap: calc(1.6 * var(--u)); }
  .final.split > .dek { grid-column: 2; grid-row: 1; }
  .final.split > .flash-result { grid-row: 2 / span 5; }
  .final.split .wager-amt { font-size: calc(8 * var(--u)); }
  .final.split .bet-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "e n a" "r r r"; }
  /* the end on a TV (or one device on a laptop) with four players: tighter, so nothing falls off the bottom */
  body:is(.tv-mode, .party-mode) .end.results:has(> .dare) { padding-bottom: 0; }
  body:is(.tv-mode, .party-mode) .end.results:has(> .dare) > :not(.dare) { margin-bottom: calc(1.6 * var(--u)); }
  body:is(.tv-mode, .party-mode) .end.results:has(> .dare) .banner b { font-size: calc(9 * var(--u)); }
  body:is(.tv-mode, .party-mode) .end.results:has(> .dare) .rk { padding-block: calc(1.2 * var(--u)); }
  body:is(.tv-mode, .party-mode) .end.results:has(> .dare) .rk .nm .fin { display: inline; margin-inline-start: calc(2 * var(--u)); }
  /* the end on a big screen: the dare beside the table, so the room sees it land */
  .end.results:has(> .dare) { grid-template-columns: minmax(0, 1fr) calc(64 * var(--u)); grid-template-rows: repeat(7, auto) 1fr; row-gap: 0; align-items: start; }
  .end.results:has(> .dare) > :not(.dare) { grid-column: 1; margin: 0 0 calc(2.8 * var(--u)); }
  .end.results > .dare { grid-column: 2; grid-row: 1 / -1; max-width: none; }
  .wheel { width: calc(40 * var(--u)); }
  .dare-text .muted { font-size: calc(3 * var(--u)); }
}
@media (max-width: 599px), (max-height: 359px) {
  .final .row.go { display: none; }   /* a phone: «اعرض السؤال الأخير» rides above the scores */
}

.bet-row .nm { overflow-wrap: normal; }
.panel.wager > .lbl { font: 700 max(14px, calc(2.8 * var(--u)))/1.4 var(--sf); color: var(--ink-3); margin-top: calc(-1.4 * var(--u)); }
.final > .lbl { margin: 0; font: 700 max(15px, calc(2.8 * var(--u)))/1.4 var(--sf); color: var(--ink-3); }

/* The rounds after the board: the lightning round (true or false against the clock) and
   «كم تتوقع؟» (everyone slides to a number, then the number line). The header is the
   question's (.qmeta, .cico, .timer in 40-question.css) with the round's mark in ink.
   What you shout (the statement, numbers, names) is in the game's display face, and what you
   press stands on a solid edge, like the rest of the game (92-game.css); both fall back to
   the plain look without it. .tv is a TV watching the room: no inputs, the clock and
   everyone's progress big. */
.rnd { display: grid; gap: calc(2.6 * var(--u)); align-content: start; padding-block: 0 calc(3 * var(--u)); animation: fade .18s ease-out both; }
.rnd > * { min-width: 0; }
.rnd > .cue, .rnd .cue { margin: 0; }
.rnd-head .cico { background: var(--ink); }

/* ---------- the lightning round: where I am, the statement, «صح» and «غلط» ---------- */
.lt-prog { display: flex; align-items: center; gap: calc(1.8 * var(--u)); min-height: 28px; }
.lt-n { flex: none; min-width: 3.4em; font: 800 max(15px, calc(3 * var(--u)))/1 var(--display, var(--sf)); color: var(--ink-2); font-variant-numeric: tabular-nums; }
/* one square per statement: the one on screen dark, sent ones grey, then green or red */
.lt-trail { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: max(3px, calc(.6 * var(--u))); }
.lt-trail i { height: max(8px, calc(1.4 * var(--u))); border-radius: 2px; background: var(--sunk); }
.lt-trail i.c { background: var(--ink); }
.lt-trail i.a { background: var(--line-2); }
.lt-trail i.r { background: var(--good); animation: pop .2s var(--ease) both; }
.lt-trail i.w { background: var(--bad); animation: pop .2s var(--ease) both; }
/* the last answer, right or wrong, for a moment */
.lt-say { flex: none; display: inline-flex; align-items: center; gap: calc(.6 * var(--u)); min-width: 4.2em; font: 800 max(15px, calc(3 * var(--u)))/1 var(--display, var(--sf)); opacity: 0; }
.lt-say.good { color: var(--good); }
.lt-say.bad { color: var(--bad); }
.lt-say.on { animation: toast 1.3s var(--ease) forwards; }
body.calm .lt-say.on { animation: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .lt-say.on { animation: none; opacity: 1; } }

.lt-card { display: grid; gap: calc(2.4 * var(--u)); align-content: center; padding: calc(3.2 * var(--u)) calc(3.4 * var(--u)); border: 2px solid var(--line); border-radius: var(--r); background: var(--surface); }
.lt-card.next > * { animation: fade .2s ease-out both; }
.lt-card.hit-good { animation: hit .9s var(--ease); }
.lt-card.hit-bad { animation: hit-minus .9s var(--ease); }
.lt-q { margin: 0; font: 800 max(20px, calc(4.8 * var(--u)))/1.4 var(--display, var(--sf)); color: var(--ink); text-wrap: pretty; overflow-wrap: anywhere; }
.lt-is { display: flex; flex-wrap: wrap; align-items: center; gap: calc(1 * var(--u)) calc(1.6 * var(--u)); font: 700 max(15px, calc(3 * var(--u)))/1.4 var(--sf); color: var(--ink-3); }
.lt-claim { max-width: 100%; padding: calc(.8 * var(--u)) calc(1.8 * var(--u)); border-radius: var(--r-s); background: var(--sunk); font: 800 max(21px, calc(5 * var(--u)))/1.35 var(--display, var(--sf)); color: var(--ink); overflow-wrap: anywhere; }

.lt-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(1.6 * var(--u)); }
.lt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(1.4 * var(--u)); min-height: max(80px, calc(15 * var(--u))); padding: 0 calc(2 * var(--u));
  border: 0; border-radius: var(--r); cursor: pointer; color: #fff; font: 800 max(24px, calc(5.4 * var(--u)))/1 var(--display, var(--sf)); touch-action: manipulation;
  --key: #0f5e30; box-shadow: 0 var(--edge, 0px) 0 var(--key); margin-bottom: var(--edge, 0px); transition: transform .08s, box-shadow .08s;
}
.lt-btn.yes { background: var(--good); }
.lt-btn.no { background: var(--bad); --key: #9e1f1f; }
.lt-btn:active:not(:disabled) { transform: translateY(var(--edge, 1px)); box-shadow: 0 0 0 var(--key); }
.lt-btn:disabled { cursor: default; opacity: .4; }
.lt-btn .i { font-size: 1.05em; }

/* through all of them: my tally while the others finish */
.lt-done { display: grid; gap: calc(2.4 * var(--u)); align-content: start; padding: calc(3 * var(--u)) calc(3.2 * var(--u)); border: 2px solid var(--line); border-radius: var(--r); background: var(--surface); }
.lt-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.lt-stat { display: grid; gap: calc(.6 * var(--u)); padding-top: calc(2.2 * var(--u)); }
.lt-stat + .lt-stat { padding-inline-start: calc(2 * var(--u)); box-shadow: inset -1px 0 0 var(--line); }
.lt-stat b { font: 800 max(30px, calc(7 * var(--u)))/1 var(--display, var(--sf)); color: var(--ink); font-variant-numeric: tabular-nums; }
.lt-stat span { font: 700 max(13px, calc(2.6 * var(--u)))/1.3 var(--sf); color: var(--ink-3); }
.lt-stat.good b { color: var(--good); }
.lt-stat.bad b { color: var(--bad); }

/* how far everyone has got: mark, name, a bar in their colour, the count */
.lt-side { display: grid; gap: calc(1.2 * var(--u)); align-content: start; }
.lt-lbl { font: 700 max(14px, calc(2.8 * var(--u)))/1.3 var(--sf); color: var(--ink-3); }
.lt-board { display: grid; border: 2px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.lt-row { --pc: var(--p1); display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.2fr) auto; align-items: center; column-gap: calc(1.8 * var(--u)); min-height: 52px; padding: calc(1.2 * var(--u)) calc(2.2 * var(--u)); }
.lt-row + .lt-row { border-top: 1px solid var(--line); }
.lt-row .em { width: max(28px, calc(5.4 * var(--u))); font-size: max(13px, calc(2.6 * var(--u))); }
.lt-row .nm { min-width: 0; font: 800 max(15px, calc(3 * var(--u)))/1.3 var(--display, var(--sf)); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-row .meter { height: max(6px, calc(1.2 * var(--u))); border-radius: 3px; background: var(--sunk); overflow: hidden; }
.lt-row .meter i { display: block; height: 100%; background: var(--pc); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.lt-row .n { display: inline-flex; align-items: center; justify-content: flex-end; gap: calc(.6 * var(--u)); min-width: 3.6em; font: 800 max(15px, calc(3 * var(--u)))/1 var(--display, var(--sf)); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lt-row .n .i { display: none; }
.lt-row.done .n { color: var(--good); }
.lt-row.done .n .i { display: inline-block; }

/* ---------- «كم تتوقع؟»: the slider, the wait ---------- */
.gs-form { display: grid; gap: calc(2.2 * var(--u)); align-content: start; padding: calc(3 * var(--u)) calc(3.2 * var(--u)); border: 2px solid var(--line); border-radius: var(--r); background: var(--surface); }
.gs-read { display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(.6 * var(--u)) calc(1.6 * var(--u)); }
.gs-num { font: 800 max(52px, calc(12 * var(--u)))/1 var(--display, var(--sf)); color: var(--ink); font-variant-numeric: tabular-nums; }
.gs-unit { font: 700 max(18px, calc(4 * var(--u)))/1.2 var(--display, var(--sf)); color: var(--ink-2); }
.gs-ends { display: flex; justify-content: space-between; margin-top: calc(-1.6 * var(--u)); font: 700 max(13px, calc(2.6 * var(--u)))/1.2 var(--sf); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.gs-nudge { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(1 * var(--u)); }
.gs-nudge .btn { padding: 0 4px; font-variant-numeric: tabular-nums; }
.gs-form > .btn.gold { width: 100%; }
.gs-range { margin: 0; font: 700 max(15px, calc(3 * var(--u)))/1.4 var(--sf); color: var(--ink-3); }
.gs-rule { margin: 0; font: 600 max(14px, calc(2.7 * var(--u)))/1.4 var(--sf); color: var(--ink-3); }
.gs-qbox { display: grid; gap: calc(1.4 * var(--u)); align-content: center; }
.gs-wait { display: grid; gap: calc(2.4 * var(--u)); align-content: start; }
.gs-mine, .gs-ans { display: grid; gap: calc(.8 * var(--u)); }
.gs-mine { padding: calc(2.6 * var(--u)) calc(3.2 * var(--u)); border: 2px solid var(--line); border-radius: var(--r); background: var(--surface); }
.gs-mine .lbl, .gs-ans .lbl { font: 700 max(14px, calc(2.8 * var(--u)))/1.3 var(--sf); color: var(--ink-3); }
.gs-ans .gs-num { color: var(--good); }

/* who has locked a guess in: a tick on their mark */
.gs-who { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: calc(1.2 * var(--u)); }
.gs-w { --pc: var(--p1); display: flex; align-items: center; gap: calc(1.4 * var(--u)); min-width: 0; min-height: 52px; padding: calc(1 * var(--u)) calc(1.8 * var(--u)); border: 2px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink-3); }
.gs-w .em { width: max(28px, calc(5.4 * var(--u))); font-size: max(13px, calc(2.6 * var(--u))); opacity: .4; }
.gs-w .nm { flex: 1; min-width: 0; font: 800 max(15px, calc(3 * var(--u)))/1.3 var(--display, var(--sf)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-w .ok { display: grid; place-items: center; flex: none; width: max(24px, calc(4.6 * var(--u))); aspect-ratio: 1; border-radius: var(--r-s); background: var(--sunk); color: transparent; font-size: max(14px, calc(2.8 * var(--u))); }
.gs-w.in { color: var(--ink); }
.gs-w.in .em { opacity: 1; }
.gs-w.in .ok { background: var(--ink-2); color: #fff; animation: pop .2s var(--ease) both; }

/* ---------- the reveal: the number line ---------- */
/* It runs like the slider in right-to-left (the smallest number on the right), so a
   position x (0 → 1 from min to max) sits at (1 − x) of the width from the left. */
.gl {
  --pin: max(28px, calc(5.6 * var(--u)));
  --step: calc(var(--pin) + max(4px, calc(.8 * var(--u))));
  --lab: max(30px, calc(5.6 * var(--u)));
  --top: max(28px, calc(5 * var(--u)));   /* room for the answer's tick above the highest mark */
  position: relative; height: calc(var(--top) + var(--lvls, 1) * var(--step) + max(14px, calc(2.6 * var(--u))) + var(--lab)); margin-inline: calc(var(--pin) / 2);
}
.gl-track { position: absolute; inset-inline: calc(var(--pin) / -2); bottom: calc(var(--lab) - max(2px, calc(.4 * var(--u)))); height: max(4px, calc(.8 * var(--u))); border-radius: 2px; background: var(--line-2); }
.gl-end { position: absolute; bottom: 0; font: 700 max(13px, calc(2.6 * var(--u)))/1.6 var(--sf); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gl-end.min { right: calc(var(--pin) / -2); }
.gl-end.max { left: calc(var(--pin) / -2); }
.gl-truth { position: absolute; z-index: 1; top: 0; bottom: 0; left: calc((1 - var(--x)) * 100%); translate: -50% 0; display: flex; flex-direction: column; align-items: center; }
.gl-truth i { flex: 1; width: max(4px, calc(.6 * var(--u))); background: var(--good); }
.gl-truth .tick { display: grid; place-items: center; width: max(22px, calc(4 * var(--u))); aspect-ratio: 1; border-radius: 50%; background: var(--good); color: #fff; font-size: max(13px, calc(2.4 * var(--u))); }
.gl-truth b { padding: 0 calc(1.2 * var(--u)); border-radius: var(--r-s); background: var(--good); color: #fff; font: 800 max(15px, calc(3 * var(--u)))/1.7 var(--display, var(--sf)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gl-pin { position: absolute; z-index: 2; bottom: var(--lab); left: calc((1 - var(--x)) * 100%); translate: -50% 0; display: flex; flex-direction: column; align-items: center; animation: pop .25s var(--ease) both; }
.gl-pin .em { width: var(--pin); font-size: calc(var(--pin) * .46); box-shadow: 0 0 0 2px var(--bg); }
.gl-pin i { width: 2px; height: calc(var(--lvl) * var(--step) + max(12px, calc(2.2 * var(--u)))); background: var(--pc); }
body.calm .gl-pin { animation: none; }   /* no marks dropping in one by one */

/* the guesses, closest first; the winner filled in their colour */
.gs-res { display: grid; gap: calc(1.4 * var(--u)); align-content: start; }
.gs-table { display: grid; border: 2px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.gs-row { --pc: var(--p1); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "e n v" "e d p"; align-items: center; column-gap: calc(2 * var(--u)); row-gap: 2px; padding: calc(1.6 * var(--u)) calc(2.4 * var(--u)); }
.gs-row + .gs-row { border-top: 1px solid var(--line); }
.gs-row > .em { grid-area: e; width: max(34px, calc(7 * var(--u))); font-size: max(15px, calc(3.2 * var(--u))); }
.gs-row .nm { grid-area: n; min-width: 0; font: 800 max(16px, calc(3.4 * var(--u)))/1.3 var(--display, var(--sf)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-row .v { grid-area: v; justify-self: end; font: 800 max(20px, calc(4.6 * var(--u)))/1.15 var(--display, var(--sf)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gs-row .v small { margin-inline-start: .3em; font: 700 .6em/1 var(--sf); color: var(--ink-3); }
.gs-row .d { grid-area: d; font: 600 max(14px, calc(2.8 * var(--u)))/1.3 var(--sf); color: var(--ink-3); }
.gs-row .pts { grid-area: p; justify-self: end; font: 800 max(15px, calc(3.2 * var(--u)))/1.3 var(--display, var(--sf)); font-variant-numeric: tabular-nums; }
.gs-row.none .v { font-size: max(14px, calc(2.8 * var(--u))); font-weight: 700; color: var(--ink-3); }
.gs-row.won { background: var(--pc); color: #fff; }
.gs-row.won > .em { background: #fff; color: var(--pc); }
.gs-row.won .d, .gs-row.won .v small { color: rgba(255, 255, 255, .85); }
.gs-row.won + .gs-row.won { border-top-color: rgba(255, 255, 255, .3); }
.gs.reveal .gs-q { font-size: max(18px, calc(4 * var(--u))); }
.gs.reveal .next-bar { margin-top: calc(-.6 * var(--u)); }

/* ---------- the presentation: one slide each ---------- */
@media (min-width: 600px) and (min-height: 360px) {
  .rnd { height: 100%; gap: calc(2.4 * var(--u)); padding-block: 0 calc(1.6 * var(--u)); }
  .rnd-head .diff { font-size: calc(2.8 * var(--u)); }
  .rnd.tv .rnd-head .cico { width: calc(9 * var(--u)); font-size: calc(5 * var(--u)); }
  .rnd.tv .rnd-head .qcat { font-size: calc(4.4 * var(--u)); }
  .rnd.tv .rnd-head .diff { font-size: calc(3 * var(--u)); }
  .rnd.tv .timer { width: calc(14 * var(--u)); min-width: calc(14 * var(--u)); }   /* a ring (92-game.css) or a box, just bigger */
  .rnd.tv .timer .num { font-size: calc(6.4 * var(--u)); }
  .rnd .cue { font-size: calc(3.6 * var(--u)); }

  /* a player's lightning round: the statement and the buttons, the others beside them */
  .lt:not(.tv) { grid-template-columns: minmax(0, 1fr) calc(50 * var(--u)); grid-template-areas: "head head" "prog side" "card side" "btns side"; grid-template-rows: auto auto minmax(0, 1fr) auto; column-gap: calc(4 * var(--u)); }
  .lt:not(.tv) > .rnd-head { grid-area: head; }
  .lt-prog { grid-area: prog; }
  .lt-card, .lt-done { grid-area: card; }
  .lt-btns { grid-area: btns; }
  .lt-side { grid-area: side; }
  .lt-n, .lt-say { font-size: calc(2.8 * var(--u)); }
  .lt-trail i { height: calc(1.4 * var(--u)); }
  .lt-card { padding: calc(3.4 * var(--u)) calc(4 * var(--u)); gap: calc(2.8 * var(--u)); }
  .lt-q { font-size: calc(4.6 * var(--u)); }
  .lt-is { font-size: calc(3 * var(--u)); }
  .lt-claim { font-size: calc(5 * var(--u)); }
  .lt-btn { min-height: calc(13 * var(--u)); font-size: calc(5 * var(--u)); }
  .lt-done { align-content: center; padding: calc(4 * var(--u)); }
  .lt-stat b { font-size: calc(9 * var(--u)); }
  .lt-stat span { font-size: calc(2.6 * var(--u)); }
  .lt-lbl { font-size: calc(2.6 * var(--u)); }
  .lt-row { min-height: calc(8.4 * var(--u)); padding: calc(1.2 * var(--u)) calc(2.2 * var(--u)); grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "e n c" "e m m"; row-gap: calc(.8 * var(--u)); }
  .lt-row .em { grid-area: e; width: calc(5.4 * var(--u)); font-size: calc(2.6 * var(--u)); }
  .lt-row .nm { grid-area: n; font-size: calc(2.8 * var(--u)); }
  .lt-row .meter { grid-area: m; height: calc(1 * var(--u)); }
  .lt-row .n { grid-area: c; font-size: calc(2.8 * var(--u)); }

  /* the TV: everyone's progress, big */
  .lt.tv { grid-template-rows: auto auto minmax(0, 1fr); }
  .lt.tv .lt-board { align-content: start; gap: calc(1.4 * var(--u)); border: 0; background: none; overflow: visible; }
  .lt.tv .lt-row { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.5fr) auto; grid-template-areas: none; column-gap: calc(3 * var(--u)); min-height: calc(11 * var(--u)); padding: calc(1.6 * var(--u)) calc(3 * var(--u)); border: 2px solid var(--line); border-radius: var(--r); background: var(--surface); }
  .lt.tv .lt-row + .lt-row { border-top: 2px solid var(--line); }
  .lt.tv .lt-row > * { grid-area: auto; }
  .lt.tv .lt-row .em { width: calc(7.4 * var(--u)); font-size: calc(3.6 * var(--u)); }
  .lt.tv .lt-row .nm { font-size: calc(4.2 * var(--u)); }
  .lt.tv .lt-row .meter { height: calc(2 * var(--u)); border-radius: calc(.5 * var(--u)); }
  .lt.tv .lt-row .n { min-width: 4.4em; font-size: calc(4.6 * var(--u)); }

  /* «كم تتوقع؟»: the question beside the slider */
  .gs:not(.reveal):not(.tv) { grid-template-columns: minmax(0, 1fr) minmax(0, calc(84 * var(--u))); grid-template-areas: "head head" "q form"; grid-template-rows: auto minmax(0, 1fr); column-gap: calc(5 * var(--u)); }
  .gs:not(.tv) > .rnd-head, .gs.reveal > .rnd-head { grid-area: head; }
  .gs:not(.reveal):not(.tv) > .gs-qbox { grid-area: q; align-self: center; }   /* the question and how to win */
  .gs-form, .gs-wait { grid-area: form; align-self: center; }
  .gs-form { padding: calc(3.4 * var(--u)) calc(4 * var(--u)); gap: calc(2.4 * var(--u)); }
  .gs-num { font-size: calc(11 * var(--u)); }
  .gs-unit { font-size: calc(3.6 * var(--u)); }
  .gs-ends { font-size: calc(2.4 * var(--u)); }
  .gs-range { font-size: calc(3 * var(--u)); }
  .gs-nudge .btn { min-height: max(44px, calc(6.4 * var(--u))); font-size: calc(2.8 * var(--u)); }
  .gs-mine { padding: calc(3 * var(--u)) calc(4 * var(--u)); }
  .gs-mine .lbl, .gs-ans .lbl { font-size: calc(2.6 * var(--u)); }
  .gs-who { grid-template-columns: repeat(auto-fill, minmax(calc(34 * var(--u)), 1fr)); }
  .gs-w { min-height: calc(8 * var(--u)); }
  .gs-w .em { width: calc(5.4 * var(--u)); font-size: calc(2.6 * var(--u)); }
  .gs-w .nm { font-size: calc(2.8 * var(--u)); }
  .gs-w .ok { width: calc(4.4 * var(--u)); font-size: calc(2.6 * var(--u)); }

  /* the TV while everyone guesses: the question big, who is in */
  .gs.tv:not(.reveal) { grid-template-rows: auto minmax(0, 1fr) auto auto; }
  .gs.tv .gs-q { font-size: calc(6.4 * var(--u)); }
  .gs.tv .gs-range { font-size: calc(3.6 * var(--u)); color: var(--ink-2); }
  .gs.tv .gs-rule { font-size: calc(3 * var(--u)); }
  .gs-rule { font-size: calc(2.6 * var(--u)); }
  /* who is in, on the TV (body.tv-mode): readable from the sofa wherever it shows (the guess round, the final's bets and answer) */
  .tv-mode .gs-who { grid-template-columns: repeat(auto-fit, minmax(calc(40 * var(--u)), 1fr)); gap: calc(1.6 * var(--u)); }
  .tv-mode .gs-w { min-height: calc(11 * var(--u)); padding: calc(1.4 * var(--u)) calc(2.6 * var(--u)); gap: calc(2 * var(--u)); }
  .tv-mode .gs-w .em { width: calc(7.4 * var(--u)); font-size: calc(3.6 * var(--u)); }
  .tv-mode .gs-w .nm { font-size: calc(4 * var(--u)); }
  .tv-mode .gs-w .ok { width: calc(6 * var(--u)); font-size: calc(3.6 * var(--u)); }

  /* the reveal: the answer over the line on one side, the table of guesses on the other */
  .gs.reveal { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-areas: "head head" "q q" "ans res" "line res" "fact fact" "next next"; grid-template-rows: none; column-gap: calc(6 * var(--u)); }
  .gs.reveal > .gs-q { grid-area: q; font-size: calc(3.8 * var(--u)); }
  .gs.reveal > .gs-ans { grid-area: ans; align-self: start; }
  .gs.reveal > .gl { grid-area: line; align-self: end; }
  .gs.reveal > .gs-res { grid-area: res; }
  .gs.reveal > .fact { grid-area: fact; }
  .gs.reveal > .next-bar { grid-area: next; }
  .gl { --pin: calc(5.8 * var(--u)); --lab: calc(5.4 * var(--u)); }
  .gl-end { font-size: calc(2.6 * var(--u)); }
  .gl-truth b { font-size: calc(3 * var(--u)); }
  .gl-truth .tick { width: calc(4 * var(--u)); font-size: calc(2.4 * var(--u)); }
  .gs-row { row-gap: 0; padding: calc(1 * var(--u)) calc(2.6 * var(--u)); }
  .gs-row .nm, .gs-row .d { line-height: 1.2; }
  .gs-row > .em { width: calc(6.4 * var(--u)); font-size: calc(3 * var(--u)); }
  .gs-row .nm { font-size: calc(3.2 * var(--u)); }
  .gs-row .v { font-size: calc(4.4 * var(--u)); }
  .gs-row .d { font-size: calc(2.6 * var(--u)); }
  .gs-row .pts { font-size: calc(3.4 * var(--u)); }
  .gs-row.none .v { font-size: calc(2.8 * var(--u)); }
}
@media (min-width: 600px) and (min-height: 360px) and (orientation: portrait) {
  .lt:not(.tv) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "prog" "card" "btns" "side"; grid-template-rows: none; gap: calc(3 * var(--u)); }
  .lt-card { padding-block: calc(5 * var(--u)); }
  .lt-q { font-size: calc(5.4 * var(--u)); }
  .lt-claim { font-size: calc(6 * var(--u)); }
  .gs:not(.reveal):not(.tv) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "q" "form"; grid-template-rows: auto auto minmax(0, 1fr); }
  .gs-form, .gs-wait { align-self: start; }
  .gs.reveal { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "q" "ans" "line" "res" "fact" "next"; }
}
@media (max-width: 359px) {
  .lt-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .lt-row .meter { display: none; }
  .gs-nudge .btn { font-size: 14px; }
}
/* a claim in Latin letters («Hello, World!») keeps its own direction, with the «؟» after it */
.lt-claim { unicode-bidi: plaintext; }
/* the TV's who-is-in list on the bet and the last question: compact, two or four across */
@media (min-width: 600px) and (min-height: 360px) {
  .tv-mode .final .gs-who { grid-template-columns: minmax(0, 1fr); gap: calc(1 * var(--u)); width: 100%; }
  .tv-mode .final .gs-w .em { width: calc(6 * var(--u)); font-size: calc(3 * var(--u)); }
  .tv-mode .q .gs-who { grid-template-columns: repeat(auto-fit, minmax(calc(26 * var(--u)), 1fr)); gap: calc(1.2 * var(--u)); }
  .tv-mode :is(.final, .q) .gs-w { min-height: calc(8 * var(--u)); padding: calc(1 * var(--u)) calc(2 * var(--u)); }
}

/* The one-device quick games under the board («تحدي الثلاثين», «وصّفها», «كم تتوقع؟»), in a
   sheet: which team plays, the topic or the word big, the clock, the hit and skip buttons, the
   points to add. The guess game's answer uses the round's number line and table (70-rounds.css).
   Names, words and numbers in the game's display face; the team buttons stand on an edge like
   every key (92-game.css), and fall back to the plain look without it. */
.mini { display: grid; gap: calc(2.4 * var(--u)); }
.mini-head { display: grid; gap: calc(.6 * var(--u)); }
.modal-back .panel.mini h2 { margin: 0; }
.mini-dek { margin: 0; font: 500 max(15px, calc(3 * var(--u)))/1.45 var(--sf); color: var(--ink-2); }
.mini.playing .mini-dek { display: none; }
.mini-body { display: grid; gap: calc(2.2 * var(--u)); }
.mini-body > * { min-width: 0; }
.mini-lbl { margin: 0 0 calc(-1.2 * var(--u)); font: 700 max(14px, calc(2.8 * var(--u)))/1.3 var(--sf); color: var(--ink-3); }

/* which team plays: their mark and name; the chosen one filled in its colour */
.mini-teams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(1.2 * var(--u)); }
.mini-team {
  --pc: var(--p1);
  display: flex; align-items: center; gap: calc(1.4 * var(--u)); min-width: 0; min-height: max(52px, calc(9 * var(--u))); padding: 0 calc(1.8 * var(--u));
  border: 2px solid var(--ink-edge, var(--line-2)); border-radius: var(--r); cursor: pointer; text-align: start; color: var(--ink); background: var(--surface); font: 800 max(16px, calc(3.2 * var(--u)))/1.25 var(--display, var(--sf));
  box-shadow: 0 var(--edge, 0px) 0 var(--ink-edge, transparent); margin-bottom: var(--edge, 0px); transition: transform .08s, box-shadow .08s, background-color .15s;
}
.mini-team .em { width: max(28px, calc(5.4 * var(--u))); font-size: max(13px, calc(2.6 * var(--u))); }
.mini-team .nm { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-team:hover { background: var(--bg); }
.mini-team:active { transform: translateY(var(--edge, 1px)); box-shadow: 0 0 0 transparent; }
.mini-team.on { color: #fff; background: var(--pc); border-color: var(--pc); box-shadow: 0 var(--edge, 0px) 0 color-mix(in srgb, var(--pc) 70%, #000); }
.mini-team.on .em { background: #fff; color: var(--pc); }

/* the topic or the word */
.mini-topic { display: grid; gap: calc(1.2 * var(--u)); justify-items: start; padding: calc(2.2 * var(--u)) calc(2.6 * var(--u)) calc(1 * var(--u)); border-radius: var(--r); background: var(--sunk); }
.mini-topic .mini-lbl { margin: 0; }
.mini-word { margin: 0; max-width: 100%; font: 800 max(24px, calc(5.6 * var(--u)))/1.25 var(--display, var(--sf)); color: var(--ink); overflow-wrap: anywhere; text-wrap: balance; }
.mini-word.big { font-size: max(34px, calc(9 * var(--u))); padding-block: calc(1 * var(--u)); }
.mini-word.next { animation: fade .18s ease-out both; }
.mini-note { margin: 0; padding: calc(1.8 * var(--u)) calc(2.2 * var(--u)); border-radius: var(--r); background: var(--gold-bg); color: #7a5200; font: 600 max(15px, calc(3 * var(--u)))/1.5 var(--sf); }
.mini-acts { display: flex; flex-wrap: wrap; align-items: center; gap: calc(1.2 * var(--u)); }
.mini-acts .btn.gold { flex: 1 1 60%; }

/* playing: the team, the quit and the clock on top (the quit away from the big buttons), the word, the count, the big buttons */
.mini-top { display: flex; align-items: center; gap: calc(2 * var(--u)); }
.mini-top > .btn { padding-inline: max(8px, calc(1.4 * var(--u))); }   /* a word with no frame: little padding, so the team's name keeps the room on a small phone */
.mini-who { --pc: var(--p1); flex: 1; display: flex; align-items: center; gap: calc(1.4 * var(--u)); min-width: 0; font: 800 max(18px, calc(3.8 * var(--u)))/1.3 var(--display, var(--sf)); color: var(--ink); }
.mini-who b { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-who .em { width: max(34px, calc(7 * var(--u))); font-size: max(15px, calc(3.2 * var(--u))); }
.timer.mini-clock { width: max(80px, calc(16 * var(--u))); min-width: max(80px, calc(16 * var(--u))); }   /* a ring (92-game.css) or a box, just bigger */
.timer.mini-clock .num { font-size: max(30px, calc(6 * var(--u))); }
.mini-count { margin: 0; font: 800 max(19px, calc(4.2 * var(--u)))/1.3 var(--display, var(--sf)); color: var(--good); font-variant-numeric: tabular-nums; }
.mini-count.bump { animation: pop .2s var(--ease) both; }
.mini-hits { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: calc(1.2 * var(--u)); }
.mini-hits .btn { min-height: max(76px, calc(14 * var(--u))); font-size: max(21px, calc(4.8 * var(--u))); touch-action: manipulation; }
/* «صح» is green wherever it is pressed (the lightning round's too) */
.mini-hits .btn.yes { color: #fff; background: var(--good); border-color: var(--good); box-shadow: 0 var(--edge, 0px) 0 #0f5e30; }
.mini-hits .btn.yes:hover { background: #157a40; }

/* time's up: the team's line, filled in its colour when it scored */
.mini-result { --pc: var(--p1); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "e n p" "e c p"; align-items: center; column-gap: calc(2.2 * var(--u)); row-gap: 2px; padding: calc(2.2 * var(--u)) calc(2.6 * var(--u)); border: 2px solid var(--line); border-radius: var(--r); background: var(--surface); }
.mini-result > .em { grid-area: e; width: max(44px, calc(9 * var(--u))); font-size: max(20px, calc(4.2 * var(--u))); }
.mini-result .nm { grid-area: n; min-width: 0; font: 800 max(18px, calc(4 * var(--u)))/1.3 var(--display, var(--sf)); overflow-wrap: anywhere; }
.mini-result .n { grid-area: c; font: 700 max(15px, calc(3 * var(--u)))/1.3 var(--sf); color: var(--ink-2); }
.mini-result .pts { grid-area: p; font: 800 max(28px, calc(7 * var(--u)))/1 var(--display, var(--sf)); font-variant-numeric: tabular-nums; }
.mini-result.won { color: #fff; background: var(--pc); border-color: var(--pc); }
.mini-result.won > .em { background: #fff; color: var(--pc); }
.mini-result.won .n { color: rgba(255, 255, 255, .85); }

/* «كم تتوقع؟»: one number per team */
.mini-q { margin: 0; font: 800 max(19px, calc(4.2 * var(--u)))/1.4 var(--display, var(--sf)); color: var(--ink); text-wrap: pretty; }
.mini-q + .gs-range { margin-top: calc(-1.4 * var(--u)); }
.mini-rows { display: grid; gap: calc(1 * var(--u)); }
.mini-row { --pc: var(--p1); display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: calc(1.4 * var(--u)); }
.mini-row .em { width: max(32px, calc(6.4 * var(--u))); font-size: max(15px, calc(3 * var(--u))); }
.mini-row .nm { min-width: 0; font: 800 max(16px, calc(3.2 * var(--u)))/1.3 var(--display, var(--sf)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-input { min-height: max(48px, calc(8 * var(--u))); font-variant-numeric: tabular-nums; }
.mini .gs-num { font-size: max(44px, calc(10 * var(--u))); }

@media (min-width: 600px) and (min-height: 360px) {
  /* on a big screen the sheet is wide enough to read across the room */
  .modal-back > .panel.mini { width: min(100%, calc(118 * var(--u))); max-width: none; padding: calc(4 * var(--u)) calc(4.4 * var(--u)); }
  .mini-teams { grid-template-columns: repeat(auto-fit, minmax(calc(26 * var(--u)), 1fr)); }
  .mini-dek { font-size: calc(3 * var(--u)); }
  .mini-lbl { font-size: calc(2.6 * var(--u)); }
  .mini-team { min-height: calc(9 * var(--u)); font-size: calc(3 * var(--u)); }
  .mini-team .em { width: calc(5.4 * var(--u)); font-size: calc(2.6 * var(--u)); }
  .mini-word { font-size: calc(5.6 * var(--u)); }
  .mini-word.big { font-size: calc(10 * var(--u)); }
  .mini-note { font-size: calc(2.8 * var(--u)); }
  .mini-who { font-size: calc(4 * var(--u)); }
  .mini-who .em { width: calc(7 * var(--u)); font-size: calc(3.2 * var(--u)); }
  .timer.mini-clock { width: calc(15 * var(--u)); min-width: calc(15 * var(--u)); }
  .timer.mini-clock .num { font-size: calc(6 * var(--u)); }
  .mini-count { font-size: calc(4.2 * var(--u)); }
  .mini-hits .btn { min-height: calc(13 * var(--u)); font-size: calc(4.6 * var(--u)); }
  .mini-result .nm { font-size: calc(4 * var(--u)); }
  .mini-result .n { font-size: calc(3 * var(--u)); }
  .mini-result .pts { font-size: calc(7 * var(--u)); }
  .mini-q { font-size: calc(4.2 * var(--u)); }
  .mini-row .nm { font-size: calc(3.2 * var(--u)); }
  .mini-input { min-height: calc(8 * var(--u)); font-size: calc(3.4 * var(--u)); }
  .mini .gs-num { font-size: calc(10 * var(--u)); }
  /* the guess game's answer: the number and the line on one side, the teams on the other */
  .mini-guess.shown .mini-body { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "q q" "ans res" "line res" "fact fact" "acts acts"; column-gap: calc(5 * var(--u)); }
  .mini-guess.shown .mini-q { grid-area: q; }
  .mini-guess.shown .gs-ans { grid-area: ans; align-self: start; }
  .mini-guess.shown .gl { grid-area: line; align-self: end; }
  .mini-guess.shown .gs-res { grid-area: res; }
  .mini-guess.shown .fact { grid-area: fact; }
  .mini-guess.shown .mini-acts { grid-area: acts; }
}
@media (min-width: 600px) and (min-height: 360px) and (orientation: portrait) {
  .mini-guess.shown .mini-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "q" "ans" "line" "res" "fact" "acts"; }
}
@media (max-width: 359px) {
  .mini-teams { grid-template-columns: minmax(0, 1fr); }
  .mini-row { grid-template-columns: auto minmax(0, 1fr); }
  .mini-row .mini-input { grid-column: 1 / -1; }
}

/* «الشلة»: making or joining a group, and its page: who is in it, play and invite, then the
   four tabs (the record, the daily challenge, «عن بعض», the badges). A phone and a portrait
   iPad read it as one column; a landscape screen puts the group on one side and the tabs on
   the other. The daily question itself is the question screen (40-question.css). */

/* ---------- the intro: what a group is, make one or join one ---------- */
.gp-intro { flex: 1; display: grid; gap: calc(2.4 * var(--u)); justify-items: start; align-content: start; padding-block: calc(2 * var(--u)) calc(4 * var(--u)); }
.gp-intro > * { max-width: 100%; }
.gp-intro .btn.big { margin-top: calc(1.4 * var(--u)); min-width: min(100%, 320px); }

/* ---------- the page ---------- */
.group-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(2.8 * var(--u)); align-content: start; padding-block: calc(1 * var(--u)) calc(4 * var(--u)); }
.gp-side, .gp-main { display: contents; }
.group-page > *, .gp-side > *, .gp-main > * { min-width: 0; }
/* one column: who, (the invite while alone), play, the tabs and their page, (the invite), the options */
.gp-head { order: 1; }
.gp-invite { order: 6; }
.gp-invite.first { order: 2; }
.gp-play { order: 3; }
.group-page .tabs { order: 4; max-width: none; }
.gp-body { order: 5; }
.gp-foot { order: 7; }

.gp-head { display: grid; gap: calc(1.6 * var(--u)); }
.gp-members { display: flex; flex-wrap: wrap; gap: calc(1 * var(--u)) calc(2.6 * var(--u)); margin: 0; padding: 0; list-style: none; }
.gp-members li { display: inline-flex; align-items: center; gap: calc(1 * var(--u)); min-width: 0; font: 700 max(15px, calc(3 * var(--u)))/1.3 var(--sf); color: var(--ink-2); overflow-wrap: anywhere; }
.gp-members .em { width: max(26px, calc(5 * var(--u))); font-size: max(13px, calc(2.5 * var(--u))); }
.gp-play { justify-self: start; min-width: min(100%, 320px); }

/* the code to give friends, big, with the ways to send it */
.gp-invite { display: grid; gap: calc(1 * var(--u)); justify-items: start; }
.gp-invite .lbl, .ab-form .lbl { margin-top: calc(.6 * var(--u)); font: 700 max(14px, calc(2.8 * var(--u)))/1.4 var(--sf); color: var(--ink-3); }
.gp-code { display: flex; gap: .3em; direction: ltr; font: 800 max(34px, calc(8.4 * var(--u)))/1.1 var(--sf); letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.gp-invite .row { margin-top: calc(1 * var(--u)); gap: calc(1.4 * var(--u)) calc(3.4 * var(--u)); }

.group-page .tabs button { flex: 1 0 auto; padding: 0 calc(1.8 * var(--u)); }
.gp-body { display: grid; gap: calc(2.4 * var(--u)); align-content: start; }
.group-page .panel { max-width: none; }
.gp-foot { display: grid; gap: calc(1.4 * var(--u)); justify-items: start; }
.gp-options .row { gap: calc(1.4 * var(--u)); }
.gp-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: calc(.4 * var(--u)) calc(2 * var(--u)); margin-bottom: calc(.6 * var(--u)); }
.gp-empty { display: flex; align-items: center; gap: calc(2 * var(--u)); }
.gp-empty .i { font-size: max(24px, calc(5 * var(--u))); color: var(--ink-3); }
.gp-empty p { margin: 0; font: 600 max(16px, calc(3.2 * var(--u)))/1.45 var(--sf); color: var(--ink-2); }

/* ---------- the record: two members at the two ends, their wins, a strip in their colours ---------- */
.gp-vs { display: grid; padding-block: calc(.6 * var(--u)); }
.vs { display: grid; gap: calc(1.4 * var(--u)); padding-block: calc(2.2 * var(--u)); }
.vs + .vs { border-top: 1px solid var(--line); }
.vs-top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: calc(1.6 * var(--u)); }
.vs-p { display: flex; align-items: center; gap: calc(1.2 * var(--u)); min-width: 0; }
.vs-p.b { justify-content: flex-end; }
.vs-p b { min-width: 0; font: 700 max(15px, calc(3.2 * var(--u)))/1.3 var(--sf); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-p .em { width: max(28px, calc(6 * var(--u))); font-size: max(14px, calc(2.8 * var(--u))); }
.vs-sc { display: flex; align-items: center; gap: calc(1.4 * var(--u)); font-variant-numeric: tabular-nums; }
.vs-sc b { font: 800 max(26px, calc(6.4 * var(--u)))/1 var(--sf); }
.vs-sc .a { color: var(--a); }
.vs-sc .b { color: var(--b); }
.vs-dash { font: 700 max(18px, calc(4 * var(--u)))/1 var(--sf); color: var(--line-2); }
.vs-bar { display: flex; gap: 2px; height: max(6px, calc(1.2 * var(--u))); border-radius: 3px; overflow: hidden; background: var(--sunk); }
.vs-bar i { flex: 1 1 0; min-width: 4px; }
.vs-bar .a, .vs-last .a { background: var(--a); }
.vs-bar .b, .vs-last .b { background: var(--b); }
.vs-bar .t, .vs-last .t { background: var(--hatch); box-shadow: inset 0 0 0 1px var(--line-2); }
.vs-meta { display: flex; flex-wrap: wrap; align-items: center; gap: calc(.8 * var(--u)) calc(2.8 * var(--u)); font: 600 max(13px, calc(2.6 * var(--u)))/1.4 var(--sf); color: var(--ink-3); }
.vs-last { display: inline-flex; align-items: center; gap: calc(1.2 * var(--u)); }
.vs-last .sq { display: inline-flex; gap: max(3px, calc(.6 * var(--u))); }
.vs-last i { width: max(10px, calc(2 * var(--u))); aspect-ratio: 1; border-radius: 3px; }
.vs-streak { color: var(--pc); font-weight: 700; }

/* each member's best and worst category */
.gp-cats { display: grid; }
.cs { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: calc(1.4 * var(--u)); row-gap: calc(1.2 * var(--u)); padding-block: calc(1.8 * var(--u)); }
.cs + .cs { border-top: 1px solid var(--line); }
.cs > .em { width: max(28px, calc(6 * var(--u))); font-size: max(14px, calc(2.8 * var(--u))); }
.cs-nm { min-width: 0; font: 700 max(15px, calc(3.2 * var(--u)))/1.3 var(--sf); overflow-wrap: anywhere; }
.cs-cell { grid-column: 1 / -1; display: grid; grid-template-columns: max(76px, calc(16 * var(--u))) minmax(0, 1fr); align-items: center; gap: calc(1.4 * var(--u)); }
.cs-cell small { font: 700 max(13px, calc(2.5 * var(--u)))/1.3 var(--sf); }
.cs-cell.best small { color: var(--good); }
.cs-cell.worst small { color: var(--bad); }
.cs-cat { display: flex; align-items: center; gap: calc(1.2 * var(--u)); min-width: 0; }
.cs-cat .cico { width: max(26px, calc(5 * var(--u))); font-size: max(14px, calc(2.8 * var(--u))); }
.cs-cat b { min-width: 0; font: 600 max(15px, calc(3 * var(--u)))/1.3 var(--sf); color: var(--ink); overflow-wrap: anywhere; }

/* the last games: the date, then everyone by score, the winner in full ink */
.gp-games { display: grid; }
.gm { display: grid; grid-template-columns: max(72px, calc(15 * var(--u))) minmax(0, 1fr); align-items: center; gap: calc(1.6 * var(--u)); padding-block: calc(1.5 * var(--u)); }
.gm + .gm { border-top: 1px solid var(--line); }
.gm-date { font: 600 max(13px, calc(2.6 * var(--u)))/1.3 var(--sf); color: var(--ink-3); white-space: nowrap; }
.gm-ps { display: flex; flex-wrap: wrap; gap: calc(.8 * var(--u)) calc(2.8 * var(--u)); min-width: 0; }
.gm-p { display: inline-flex; align-items: center; gap: calc(.9 * var(--u)); min-width: 0; font: 600 max(14px, calc(2.8 * var(--u)))/1.3 var(--sf); color: var(--ink-3); }
.gm-p .em { width: max(22px, calc(4.6 * var(--u))); font-size: max(11px, calc(2.2 * var(--u))); }
.gm-nm { max-width: 8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-p b { font-weight: 700; font-variant-numeric: tabular-nums; }
.gm-p.won { color: var(--ink); }
.gm-p.won b, .gm-p.won .gm-nm { font-weight: 800; }

/* ---------- the daily challenge: six steps, then the score and everyone's ---------- */
.gp-daily { display: grid; gap: calc(1.8 * var(--u)); justify-items: start; }
.gp-daily > * { max-width: 100%; }
.gp-daily .btn.big { margin-top: calc(.6 * var(--u)); min-width: min(100%, 300px); }
.dsteps { display: flex; gap: max(6px, calc(1 * var(--u))); margin-block: calc(.4 * var(--u)); }
.dsteps i { width: max(28px, calc(6 * var(--u))); height: max(8px, calc(1.4 * var(--u))); border-radius: 3px; background: var(--sunk); }
.dsteps i.on { background: var(--ink); }
.dsteps i.next { background: var(--surface); box-shadow: inset 0 0 0 2px var(--red); }
.dline { margin: 0; font: 700 max(16px, calc(3.2 * var(--u)))/1.4 var(--sf); color: var(--ink-2); }
.dline.good { color: var(--good); }
.dscore { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: calc(.4 * var(--u)) calc(1.2 * var(--u)); }
.dscore small { font: 700 max(14px, calc(2.8 * var(--u)))/1.4 var(--sf); color: var(--ink-3); }
.dscore > small:first-child { grid-column: 1 / -1; }   /* «نتيجتك» over the number, «نقطة» beside it */
.dscore b { font: 800 max(48px, calc(11 * var(--u)))/1 var(--sf); font-variant-numeric: tabular-nums; color: var(--ink); }
.dres-list { display: grid; width: 100%; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.dres { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "e n s" "e r s"; align-items: center; column-gap: calc(1.6 * var(--u)); padding: calc(1.4 * var(--u)) calc(2 * var(--u)); }
.dres + .dres { border-top: 1px solid var(--line); }
.dres > .em { grid-area: e; width: max(30px, calc(6 * var(--u))); font-size: max(14px, calc(2.8 * var(--u))); }
.dres-nm { grid-area: n; min-width: 0; font: 700 max(15px, calc(3.2 * var(--u)))/1.3 var(--sf); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dres-right { grid-area: r; font: 600 max(13px, calc(2.5 * var(--u)))/1.4 var(--sf); color: var(--ink-3); }
.dres-sc { grid-area: s; font: 800 max(22px, calc(5 * var(--u)))/1 var(--sf); font-variant-numeric: tabular-nums; }
.dres.wait > .em { opacity: .45; }

/* ---------- «عن بعض»: how far your set is, a new question, yours, everyone's ---------- */
.ab-head { display: grid; gap: calc(1.6 * var(--u)); }
.ab-status { display: flex; align-items: center; gap: calc(1 * var(--u)); margin: 0; font: 700 max(15px, calc(3 * var(--u)))/1.4 var(--sf); color: #7a5200; }
.ab-status.ok { color: var(--good); }
.ab-meter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.ab-cell { display: grid; gap: calc(.4 * var(--u)); min-width: 0; padding: calc(1.4 * var(--u)) calc(1.8 * var(--u)); }
.ab-cell + .ab-cell { border-inline-start: 1px solid var(--line); }
.ab-cell small { font: 700 max(13px, calc(2.5 * var(--u)))/1.3 var(--sf); color: var(--ink-3); }
.ab-cell b { display: inline-flex; align-items: center; gap: calc(.8 * var(--u)); font: 800 max(16px, calc(3.4 * var(--u)))/1.2 var(--sf); color: var(--ink); }
.ab-cell.ok { background: var(--good-bg); }
.ab-cell.ok b, .ab-cell.ok small { color: var(--good); }
.ab-form { display: grid; gap: calc(1.6 * var(--u)); }
.ab-form, .ab-mine { scroll-margin-top: calc(1.6 * var(--u)); }   /* where a save or a delete lands the page */
.ab-form > .btn { justify-self: start; }
.ab-form .muted.small { margin: calc(.4 * var(--u)) 0 0; }
textarea.field.ab-q { min-height: max(76px, calc(15 * var(--u))); }
.ab-choices { display: grid; gap: calc(1 * var(--u)); }
.ab-choice { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: calc(.8 * var(--u)); }
.ab-choice.on .field { border-color: var(--good); }
/* the right answer's radio: a circle that fills green with a tick */
.radio { display: grid; place-items: center; width: max(44px, calc(7 * var(--u))); height: max(48px, calc(7 * var(--u))); padding: 0; border: 0; background: none; cursor: pointer; color: #fff; }
.radio::before { content: ''; grid-area: 1 / 1; width: max(28px, calc(5.2 * var(--u))); aspect-ratio: 1; border: 2px solid var(--line-2); border-radius: 50%; background: var(--surface); transition: background-color .15s, border-color .15s; }
.radio .i { grid-area: 1 / 1; font-size: max(16px, calc(3 * var(--u))); opacity: 0; }
.radio[aria-checked=true]::before { border-color: var(--good); background: var(--good); }
.radio[aria-checked=true] .i { opacity: 1; }
.radio:hover::before { border-color: var(--ink-3); }
.radio[aria-checked=true]:hover::before { border-color: var(--good); }
.ab-mine, .ab-counts { display: grid; }
.ab-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: calc(1.6 * var(--u)); padding-block: calc(1.4 * var(--u)); }
.ab-row + .ab-row { border-top: 1px solid var(--line); }
.ab-tier { display: grid; place-items: center; min-width: max(46px, calc(9 * var(--u))); height: max(32px, calc(6 * var(--u))); padding: 0 calc(1 * var(--u)); border: 1px solid var(--line-2); border-radius: var(--r-s); font: 800 max(14px, calc(2.8 * var(--u)))/1 var(--sf); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.ab-txt { display: grid; gap: 2px; min-width: 0; }
.ab-txt b { font: 700 max(15px, calc(3 * var(--u)))/1.4 var(--sf); overflow-wrap: anywhere; }
.ab-txt small { display: flex; align-items: center; gap: calc(.6 * var(--u)); font: 700 max(13px, calc(2.6 * var(--u)))/1.4 var(--sf); color: var(--good); overflow-wrap: anywhere; }
.btn.ab-del { color: var(--bad); }
.btn.ab-del:hover { background: var(--bad-bg); }
.ab-mem { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: calc(1.4 * var(--u)); padding-block: calc(1.4 * var(--u)); }
.ab-mem + .ab-mem { border-top: 1px solid var(--line); }
.ab-mem > .em { width: max(28px, calc(6 * var(--u))); font-size: max(14px, calc(2.8 * var(--u))); }
.ab-mem > b { min-width: 0; font: 700 max(15px, calc(3.2 * var(--u)))/1.3 var(--sf); overflow-wrap: anywhere; }
.ab-left { font: 700 max(14px, calc(2.8 * var(--u)))/1.3 var(--sf); color: var(--ink-3); white-space: nowrap; }
.ab-mem.ready .ab-left { color: var(--good); }

/* ---------- the badges: a row per member ---------- */
.gp-badges { display: grid; }
.bd { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: calc(1.4 * var(--u)); row-gap: calc(1.2 * var(--u)); padding-block: calc(1.8 * var(--u)); }
.bd + .bd { border-top: 1px solid var(--line); }
.bd > .em { width: max(28px, calc(6 * var(--u))); font-size: max(14px, calc(2.8 * var(--u))); }
.bd-nm { min-width: 0; font: 700 max(15px, calc(3.2 * var(--u)))/1.3 var(--sf); overflow-wrap: anywhere; }
.bd > .badges, .bd > .muted { grid-column: 1 / -1; }
.bd .badge-chip b { font-variant-numeric: tabular-nums; }
/* what each badge is for, folded under the members */
.bd-how { margin-top: calc(1.4 * var(--u)); }
.bd-legend { margin: calc(.6 * var(--u)) 0 0; padding: 0; list-style: none; display: grid; gap: calc(1.4 * var(--u)); font: 600 max(15px, calc(2.8 * var(--u)))/1.45 var(--sf); color: var(--ink-3); }
.bd-legend li { display: grid; }   /* the badge's name, its meaning under it */
.bd-legend b { color: var(--ink); font-weight: 800; }

/* ---------- the daily question: the question screen; under it the verdict with its bonus ---------- */
.dq-say { display: flex; flex-wrap: wrap; align-items: center; gap: calc(1 * var(--u)) calc(2.4 * var(--u)); }

/* the words read like the rest of the game: names and numbers in its display face, when it has one */
.gp-members li, .gp-code, .vs-p b, .vs-sc b, .cs-nm, .dscore b, .dres-nm, .dres-sc, .ab-cell b, .ab-tier, .ab-mem > b, .bd-nm, .gm-p b { font-family: var(--display, var(--sf)); }
.gp-body .body-text { font-size: max(16px, calc(3.2 * var(--u))); line-height: 1.5; }

/* ---------- the presentation ---------- */
@media (min-width: 600px) and (min-height: 360px) {
  .gp-intro { align-content: center; min-height: 100%; padding-block: 0 calc(4 * var(--u)); gap: calc(2.6 * var(--u)); }
  .gp-intro .dek { font-size: calc(3.6 * var(--u)); }
  .group-page { gap: calc(2.6 * var(--u)); padding-block: 0 calc(2 * var(--u)); }
  .gp-members li { font-size: calc(2.9 * var(--u)); }
  .gp-members .em { width: calc(4.8 * var(--u)); font-size: calc(2.3 * var(--u)); }
  .gp-invite .lbl, .ab-form .lbl { font-size: calc(2.4 * var(--u)); }
  .gp-code { font-size: calc(7.4 * var(--u)); }
  .group-page .tabs button { min-height: max(48px, calc(7 * var(--u))); font-size: calc(2.8 * var(--u)); padding: 0 calc(2.6 * var(--u)); }
  .gp-empty .i { font-size: calc(4.4 * var(--u)); }
  .gp-empty p { font-size: calc(3 * var(--u)); }
  .gp-body .body-text { font-size: calc(2.9 * var(--u)); }
  .vs-top { gap: calc(2.4 * var(--u)); }
  .vs-p b { font-size: calc(3.2 * var(--u)); }
  .vs-p .em { width: calc(5.6 * var(--u)); font-size: calc(2.7 * var(--u)); }
  .vs-sc b { font-size: calc(6 * var(--u)); }
  .vs-dash { font-size: calc(3.6 * var(--u)); }
  .vs-bar { height: calc(1.2 * var(--u)); }
  .vs-meta { font-size: calc(2.4 * var(--u)); }
  .vs-last i { width: calc(2 * var(--u)); }
  .cs > .em, .bd > .em, .ab-mem > .em { width: calc(5.6 * var(--u)); font-size: calc(2.7 * var(--u)); }
  .cs-nm, .bd-nm, .ab-mem > b, .dres-nm { font-size: calc(3 * var(--u)); }
  .cs-cell small, .ab-cell small, .dres-right { font-size: calc(2.4 * var(--u)); }
  .cs-cat .cico { width: calc(4.8 * var(--u)); font-size: calc(2.6 * var(--u)); }
  .cs-cat b { font-size: calc(2.8 * var(--u)); }
  .cs-cell { grid-template-columns: calc(15 * var(--u)) minmax(0, 1fr); }
  .gm { grid-template-columns: calc(13 * var(--u)) minmax(0, 1fr); }
  .gm-date { font-size: calc(2.4 * var(--u)); }
  .gm-p { font-size: calc(2.7 * var(--u)); }
  .gm-p .em { width: calc(4.4 * var(--u)); font-size: calc(2.1 * var(--u)); }
  .dsteps i { width: calc(6 * var(--u)); height: calc(1.3 * var(--u)); }
  .dline { font-size: calc(3 * var(--u)); }
  .dscore small { font-size: calc(2.6 * var(--u)); }
  .dscore b { font-size: calc(10 * var(--u)); }
  .dres > .em { width: calc(5.6 * var(--u)); font-size: calc(2.7 * var(--u)); }
  .dres-sc { font-size: calc(4.4 * var(--u)); }
  .ab-status { font-size: calc(2.8 * var(--u)); }
  .ab-cell b { font-size: calc(3.2 * var(--u)); }
  .ab-tier { min-width: calc(9 * var(--u)); height: calc(5.6 * var(--u)); font-size: calc(2.6 * var(--u)); }
  .ab-txt b { font-size: calc(2.9 * var(--u)); }
  .ab-txt small { font-size: calc(2.5 * var(--u)); }
  .ab-left { font-size: calc(2.6 * var(--u)); }
  .radio .i { font-size: calc(2.8 * var(--u)); }
  .gp-options .btn.small, .gp-foot > .btn.small { font-size: calc(2.4 * var(--u)); min-height: max(44px, calc(5.6 * var(--u))); }
  details.settings.gp-options > summary { min-height: max(52px, calc(7 * var(--u))); font-size: calc(2.7 * var(--u)); }
  .ab-form .field { min-height: max(48px, calc(7.4 * var(--u))); font-size: calc(3 * var(--u)); }
  textarea.field.ab-q { min-height: calc(15 * var(--u)); }
  /* the daily reveal stays one screen: what happened and the fact on one side, next on the other */
  .daily-q .foot { grid-template-columns: minmax(0, 1fr) auto; column-gap: calc(5 * var(--u)); align-items: center; }
  .daily-q .foot > :not(.after) { grid-column: 1; }
  .daily-q .foot > .after { grid-column: 2; grid-row: 1 / span 2; flex-direction: column; align-items: flex-end; gap: calc(.6 * var(--u)); }
}
/* landscape: the group on one side (it stays put), the tabs on the other */
@media (min-width: 600px) and (min-height: 360px) and (orientation: landscape) {
  .group-page { grid-template-columns: minmax(0, 36fr) minmax(0, 64fr); column-gap: calc(6 * var(--u)); align-items: start; }
  .gp-side { position: sticky; top: 0; display: grid; gap: calc(2.6 * var(--u)); align-content: start; }
  .gp-main { display: grid; gap: calc(2.4 * var(--u)); align-content: start; }
  .gp-play { justify-self: stretch; }
  .gp-side .panel { padding: calc(2.6 * var(--u)) calc(2.8 * var(--u)); }
  /* the categories on one line: who, the best, the worst */
  .cs { grid-template-columns: auto minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr); column-gap: calc(2 * var(--u)); }
  .cs-cell { grid-column: auto; grid-template-columns: none; gap: calc(.6 * var(--u)); }
  .bd { grid-template-columns: auto minmax(0, .6fr) minmax(0, 2fr); column-gap: calc(2 * var(--u)); }
  .bd > .badges, .bd > .muted { grid-column: auto; }
}
@media (max-width: 359px) {
  .group-page .tabs button { padding: 0 calc(1.2 * var(--u)); font-size: 14px; }
  .vs-p .em { display: none; }
  .gm { grid-template-columns: minmax(0, 1fr); gap: calc(.6 * var(--u)); }
  .cs-cell { grid-template-columns: minmax(0, 1fr); gap: calc(.6 * var(--u)); }
}
.dscore b.zero { grid-column: 1 / -1; font-size: max(30px, calc(7 * var(--u))); }

/* «آخر الأسئلة» and a played question in full with its report form, both as sheets. The
   question reads like the question screen after the reveal (40-question.css): the right
   answer filled green with a tick, the viewer's wrong pick outlined red; then the report. */

.modal-back > .panel.rv-panel { display: grid; gap: calc(2.4 * var(--u)); align-content: start; }
.rv-panel:focus { outline: none; }
.rv-acts { gap: calc(1 * var(--u)); }

/* ---------- the question ---------- */
.rv-q { display: grid; gap: calc(1.8 * var(--u)); }
.rv-q > * { min-width: 0; }
.rv-q .qmeta .cico { width: max(36px, calc(7 * var(--u))); font-size: max(18px, calc(3.8 * var(--u))); }
.rv-q .qcat { font-size: max(16px, calc(3.4 * var(--u))); }
.rv-q .coin { min-width: max(52px, calc(10 * var(--u))); height: max(36px, calc(7 * var(--u))); font-size: max(15px, calc(3.2 * var(--u))); }
.rv-text { margin: 0; font: 700 max(19px, calc(4.4 * var(--u)))/1.45 var(--sf); color: var(--ink); text-wrap: pretty; overflow-wrap: anywhere; }
.rv-media { justify-self: start; max-width: 100%; }
.rv-q .photo { width: min(100%, 360px); }
.rv-q .photo .clip { aspect-ratio: 4 / 3; }
.rv-q .emoji-q { font-size: max(40px, calc(9 * var(--u))); }
.rv-q .code-q { font-size: max(13px, calc(2.6 * var(--u))); }
.rv-answers { display: grid; gap: calc(1 * var(--u)); margin: 0; padding: 0; list-style: none; }
.rv-ans {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: calc(1.6 * var(--u)); row-gap: calc(.6 * var(--u));
  min-height: max(52px, calc(9 * var(--u))); padding: calc(1 * var(--u)) calc(1.4 * var(--u)); border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--surface); font: 700 max(16px, calc(3.4 * var(--u)))/1.35 var(--sf); color: var(--ink-2);
}
.rv-ans .l { display: grid; place-items: center; width: max(30px, calc(6 * var(--u))); aspect-ratio: 1; border-radius: var(--r-s); background: var(--sunk); color: var(--ink); font: 800 max(14px, calc(2.8 * var(--u)))/1 var(--sf); }
.rv-ans:has(.tags) .l { grid-row: span 2; }
.rv-ans .t { min-width: 0; overflow-wrap: anywhere; }
.rv-ans .tags { grid-column: 2; display: flex; flex-wrap: wrap; gap: calc(.6 * var(--u)); }
.rv-ans .tag { display: inline-flex; align-items: center; gap: calc(.5 * var(--u)); padding: 0 calc(1 * var(--u)); border-radius: 5px; background: var(--sunk); color: var(--ink-2); font: 700 max(12px, calc(2.3 * var(--u)))/1.8 var(--sf); white-space: nowrap; }
.rv-ans.right { color: #fff; background: var(--good); border-color: var(--good); }
.rv-ans.right .l, .rv-ans.right .tag { background: rgba(255, 255, 255, .2); color: #fff; }
.rv-ans.wrong { color: var(--bad); border-color: var(--bad); outline: 1px solid var(--bad); outline-offset: -1px; }
.rv-ans.wrong .l { background: var(--bad); color: #fff; }
.rv-ans.wrong .tag { background: var(--bad-bg); color: var(--bad); }
.rv-q .fact { font-size: max(15px, calc(3 * var(--u))); }

/* ---------- the report: what's wrong (one of the reasons), a few words, send ---------- */
.rv-form { display: grid; gap: calc(1.4 * var(--u)); padding-top: calc(2.4 * var(--u)); border-top: 1px solid var(--line); }
.rv-form h3 { margin-bottom: calc(.4 * var(--u)); }
/* the reasons as one set of toggles, wrapping into full rows */
.rv-reasons { display: flex; flex-wrap: wrap; gap: 1px; border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; background: var(--line); }
.rv-reason { flex: 1 1 auto; min-height: 48px; padding: calc(1 * var(--u)) calc(2 * var(--u)); border: 0; cursor: pointer; background: var(--surface); color: var(--ink-2); font: 700 max(15px, calc(2.7 * var(--u)))/1.3 var(--sf); transition: background-color .15s, color .15s; }
.rv-reason:hover { background: var(--bg); }
.rv-reason:focus-visible { outline-offset: -3px; }
.rv-reason[aria-pressed=true] { background: var(--ink); color: #fff; }
.rv-label { margin-top: calc(.8 * var(--u)); font: 700 max(15px, calc(2.8 * var(--u)))/1.4 var(--sf); color: var(--ink); }
.rv-hint { margin: 0; }
.rv-send { display: flex; margin-top: calc(.6 * var(--u)); }
.rv-done { display: flex; align-items: center; gap: calc(1 * var(--u)); margin: 0; padding: calc(1.4 * var(--u)) calc(2 * var(--u)); border-radius: var(--r); background: var(--good-bg); color: var(--good); font: 700 max(15px, calc(2.9 * var(--u)))/1.4 var(--sf); }

/* the question, its answers and the reasons in the game's display face, when it has one */
.rv-text, .rv-ans, .rv-reason, .rv-done { font-family: var(--display, var(--sf)); }

/* ---------- the list: rows like the menu's, newest first ---------- */
.modal-back > .panel.rv-played { display: flex; flex-direction: column; gap: calc(1.4 * var(--u)); overflow: hidden; }
.rv-played > h2 { margin: 0; }
.rv-played > p { margin: 0; }
.rv-played .rv-list { flex: 0 1 auto; min-height: 0; margin: 0; overflow-y: auto; overscroll-behavior: contain; grid-auto-rows: max-content; align-content: start; }   /* rows as tall as their words: a height-capped grid would squeeze them to the rows' min-height */
.rv-item { column-gap: calc(1.8 * var(--u)); }
.rv-item .cico { width: max(32px, calc(6 * var(--u))); font-size: max(17px, calc(3.2 * var(--u))); }
.rv-item .mr-body { gap: 2px; }
.rv-item .mr-body b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; overflow-wrap: anywhere; }
.rv-item .mr-body small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--good); }
.rv-item .mr-body small .i { margin-inline-end: calc(.6 * var(--u)); }
.rv-flag { color: var(--ink-3); font-size: max(18px, calc(3 * var(--u))); }

@media (min-width: 600px) and (min-height: 360px) {
  .modal-back.sheet > .panel.rv-panel { width: min(92vw, calc(124 * var(--u))); max-width: none; padding: calc(3.6 * var(--u)) calc(4.4 * var(--u)); }
  .modal-back.sheet > .panel.rv-played { width: min(92vw, calc(110 * var(--u))); }
  .rv-q .qmeta .cico { width: calc(6.6 * var(--u)); font-size: calc(3.6 * var(--u)); }
  .rv-q .qcat { font-size: calc(3.2 * var(--u)); }
  .rv-q .coin { min-width: calc(10 * var(--u)); height: calc(6.6 * var(--u)); font-size: calc(3 * var(--u)); }
  .rv-text { font-size: calc(4 * var(--u)); }
  .rv-q .photo { width: min(100%, calc(44 * var(--u))); }
  .rv-q .emoji-q { font-size: calc(9 * var(--u)); }
  .rv-q .code-q { font-size: calc(2.4 * var(--u)); }
  /* the answers two by two, as on the question screen; the labels at the row's end */
  .rv-answers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(1.2 * var(--u)) calc(1.6 * var(--u)); }
  .rv-ans { grid-template-columns: auto minmax(0, 1fr) auto; min-height: calc(8.6 * var(--u)); font-size: calc(3 * var(--u)); }
  .rv-ans:has(.tags) .l { grid-row: auto; }
  .rv-ans .tags { grid-column: auto; flex-direction: column; align-items: flex-end; }
  .rv-ans .l { width: calc(5.4 * var(--u)); font-size: calc(2.6 * var(--u)); }
  .rv-ans .tag { font-size: calc(2.1 * var(--u)); }
  .rv-q .fact { font-size: calc(2.8 * var(--u)); }
  .rv-reason { min-height: max(48px, calc(6.4 * var(--u))); font-size: calc(2.6 * var(--u)); }
  .rv-label { font-size: calc(2.7 * var(--u)); }
  .rv-done { font-size: calc(2.8 * var(--u)); }
  .rv-item { min-height: max(56px, calc(10 * var(--u))); padding: calc(1.4 * var(--u)) calc(2.4 * var(--u)); }
  .rv-item .cico { width: calc(5.6 * var(--u)); font-size: calc(3 * var(--u)); }
  .rv-flag { font-size: calc(2.8 * var(--u)); }
}
@media (min-width: 600px) and (min-height: 360px) and (orientation: portrait) {
  .rv-answers { grid-template-columns: none; }
}

/* The drawn line icons: one mask each, in the text colour. The helper icons keep this exact
   one-line form (test/sj-client.test.js looks for ".i-<kind>{--i:url("). */
.i{display:inline-block;flex-shrink:0;width:1.15em;height:1.15em;vertical-align:-.2em;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.i-menu{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E")}
.i-sound{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5h3.5L12 6v12l-4.5-3.5H4z M15.5 9.5a3.5 3.5 0 0 1 0 5 M18 7a7 7 0 0 1 0 10'/%3E%3C/svg%3E")}
.i-sound-off{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5h3.5L12 6v12l-4.5-3.5H4z M16 10l4 4 M20 10l-4 4'/%3E%3C/svg%3E")}
.i-full{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5 M20 9V4h-5 M4 15v5h5 M20 15v5h-5'/%3E%3C/svg%3E")}
.i-hide{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18 M10.5 6.2c.5-.1 1-.2 1.5-.2 5 0 9 6 9 6a16 16 0 0 1-2.6 3.2 M6.6 7.4C4.4 8.9 3 12 3 12s4 6 9 6c1.6 0 3-.4 4.2-1.1 M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E")}
.i-class{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 15.5V11a5.5 5.5 0 0 0-8.6-4.6 M6.5 10.5v5L4.5 18h12 M10 21h4 M3 3l18 18'/%3E%3C/svg%3E")}
.i-list{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11 M9 12h11 M9 18h11 M4.5 6h.01 M4.5 12h.01 M4.5 18h.01'/%3E%3C/svg%3E")}
.i-help{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z M9.6 9.4a2.5 2.5 0 1 1 3.4 2.4c-.6.3-1 .8-1 1.5v.4 M12 16.8h.01'/%3E%3C/svg%3E")}
.i-lock{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 11h12v9H6z M8.5 11V8a3.5 3.5 0 0 1 7 0v3'/%3E%3C/svg%3E")}
.i-photo{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v14H4z M4 15.5l4.5-4.5 4 4 2.5-2.5 5 5 M15.5 9h.01'/%3E%3C/svg%3E")}
.i-grid{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h6.5v6.5H4z M13.5 4H20v6.5h-6.5z M4 13.5h6.5V20H4z M13.5 13.5H20V20h-6.5z'/%3E%3C/svg%3E")}
.i-talk{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5h14a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8l-4 3.5V17H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z M8 10h8 M8 13h5'/%3E%3C/svg%3E")}
.i-exit{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h5v16h-5 M10 8l-4 4 4 4 M6 12h9'/%3E%3C/svg%3E")}
.i-home{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11l8-7 8 7 M6.5 9v11h11V9'/%3E%3C/svg%3E")}
.i-chat{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H10l-5 4v-4H4z'/%3E%3C/svg%3E")}
.i-share{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3 M7.5 7.5L12 3l4.5 4.5 M5 12v8h14v-8'/%3E%3C/svg%3E")}
.i-crown{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8l4.5 4 4-6 4 6 4.5-4-2 10.5h-13z'/%3E%3C/svg%3E")}
.i-star{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l2.6 5.4 5.9.8-4.3 4.1 1 5.8L12 16.8l-5.2 2.8 1-5.8-4.3-4.1 5.9-.8z'/%3E%3C/svg%3E")}
.i-flag{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 21V4 M6 4h11.5l-2.5 4 2.5 4H6'/%3E%3C/svg%3E")}
.i-fifty{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 7a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z M8.5 17a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z M8 8.6L20 18 M8 15.4L20 6'/%3E%3C/svg%3E")}
.i-second{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12.5l3 3 6.5-7 M10.5 15.5l1.5 1.5 9.5-10'/%3E%3C/svg%3E")}
.i-swap{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 8H8a4 4 0 0 0-4 4 M17 5l3 3-3 3 M4 16h12a4 4 0 0 0 4-4 M7 19l-3-3 3-3'/%3E%3C/svg%3E")}
.i-double{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5l6 6 M10 8.5l-6 6 M13.5 9a2.75 2.75 0 1 1 5 1.6L13.5 16H19'/%3E%3C/svg%3E")}
.i-pit{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17.5c0 1.6 4 2.8 9 2.8s9-1.2 9-2.8-4-2.8-9-2.8-9 1.2-9 2.8z M12 3.5v8 M8.5 8.5L12 12l3.5-3.5'/%3E%3C/svg%3E")}
.i-bulb{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 18h5 M10.5 21h3 M12 3a6 6 0 0 0-3.6 10.8c.7.6 1.1 1.3 1.1 2.2h5c0-.9.4-1.6 1.1-2.2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E")}
.i-close{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12 M18 6L6 18'/%3E%3C/svg%3E")}
.i-check{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E")}
.i-plus{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14 M5 12h14'/%3E%3C/svg%3E")}
.i-trash{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16 M9.5 7V4h5v3 M6 7l1 13h10l1-13'/%3E%3C/svg%3E")}
.i-tv{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5h18V18H3z M8 21h8 M9 2.5L12 5.5l3-3'/%3E%3C/svg%3E")}
.i-people{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z M2.5 20a6.5 6.5 0 0 1 13 0 M16 4.5a3.5 3.5 0 0 1 0 6.5 M18 14a6 6 0 0 1 3.5 6'/%3E%3C/svg%3E")}
.i-phones{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6.5h7v14h-7z M13.5 17.5V3.5h7v14z M7 17.5h.01 M17 14.5h.01'/%3E%3C/svg%3E")}
.i-hash{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 4l-2 16 M16.5 4l-2 16 M4.5 9h16 M3.5 15h16'/%3E%3C/svg%3E")}
.i-sliders{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h8 M16 7h4 M4 17h3 M11 17h9 M14 5v4 M9 15v4'/%3E%3C/svg%3E")}
.i-undo{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5L4 10l5 5 M4 10h10a5 5 0 0 1 0 10h-4'/%3E%3C/svg%3E")}
.i-dice{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5h14v14H5z M9 9h.01 M15 15h.01 M12 12h.01 M15 9h.01 M9 15h.01'/%3E%3C/svg%3E")}
.i-clock{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z M12 7.5V12l3 2'/%3E%3C/svg%3E")}
.i-eye{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'/%3E%3C/svg%3E")}
.i-heart{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7.5-4.6-7.5-10A4.3 4.3 0 0 1 12 7.4 4.3 4.3 0 0 1 19.5 10c0 5.4-7.5 10-7.5 10z'/%3E%3C/svg%3E")}
.i-bolt{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3L5 13.5h6L10 21l8-10.5h-6z'/%3E%3C/svg%3E")}
.i-target{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z M12 16.5a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9z M12 12h.01'/%3E%3C/svg%3E")}
.i-wheel{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z M12 3v18 M3 12h18 M5.6 5.6l12.8 12.8 M18.4 5.6L5.6 18.4'/%3E%3C/svg%3E")}
.i-timer{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21a8 8 0 1 0 0-16 8 8 0 0 0 0 16z M12 9v4.5 M9.5 2.5h5'/%3E%3C/svg%3E")}
.i-talk{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h12v9H8.5L4 17.5z M19 9h1v9l-3-2.5h-5'/%3E%3C/svg%3E")}
:root{--i-sound-off:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5h3.5L12 6v12l-4.5-3.5H4z M16 10l4 4 M20 10l-4 4'/%3E%3C/svg%3E")}

/* each category's own icon (src/sj/client/cats.js maps the ids) */
.i-c-scroll{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h11a2 2 0 0 1 2 2v1h-4 M7 4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2V7 M7 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2 M11 9h4 M11 12h4 M11 15h3'/%3E%3C/svg%3E")}
.i-c-pin{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z M12 12a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z'/%3E%3C/svg%3E")}
.i-c-bowl{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11h18a9 9 0 0 1-18 0z M8 7.5c0-1.5 1-1.5 1-3 M12 7.5c0-1.5 1-1.5 1-3 M16 7.5c0-1.5 1-1.5 1-3'/%3E%3C/svg%3E")}
.i-c-quote{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 18c2.6-1 3.8-3.2 3.8-6.4V6H3.5v5.5h4.3 M14.5 18c2.6-1 3.8-3.2 3.8-6.4V6H14v5.5h4.3'/%3E%3C/svg%3E")}
.i-c-cup{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10h12v3a6 6 0 0 1-12 0z M17 11h1.5a2.5 2.5 0 0 1 0 5H16 M9 3.5c0 1.5 1 1.5 1 3 M13 3.5c0 1.5 1 1.5 1 3'/%3E%3C/svg%3E")}
.i-c-masks{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h9v6a4.5 4.5 0 0 1-9 0z M5.5 7.5h.01 M9.5 7.5h.01 M5.5 11c.8.8 2.2.8 3 0 M14 9h7v6a4.5 4.5 0 0 1-8.2 2.6 M16.5 12h.01 M19 12h.01'/%3E%3C/svg%3E")}
.i-c-bag{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 13H6z M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E")}
.i-c-cassette{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18v12H3z M6 18l2-3h8l2 3 M8.5 12a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z M15.5 12a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z M10 10.5h4'/%3E%3C/svg%3E")}
.i-c-anchor{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z M12 8v13 M5 13a7 7 0 0 0 14 0 M3 13h4 M17 13h4 M9 11h6'/%3E%3C/svg%3E")}
.i-c-cap{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9l10-5 10 5-10 5z M6 11v5c3 2 9 2 12 0v-5 M22 9v6'/%3E%3C/svg%3E")}
.i-c-chip{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10H7z M10 3v4 M14 3v4 M10 17v4 M14 17v4 M3 10h4 M3 14h4 M17 10h4 M17 14h4 M10 10h4v4h-4z'/%3E%3C/svg%3E")}
.i-c-sparkle{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 3l2 5.5 5.5 2-5.5 2L11 18l-2-5.5-5.5-2L9 8.5z M18.5 14.5l.8 2 2 .8-2 .8-.8 2-.8-2-2-.8 2-.8z'/%3E%3C/svg%3E")}
.i-c-flow{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h7v5H3z M14 15h7v5h-7z M6.5 9v3.5h11V15'/%3E%3C/svg%3E")}
.i-c-shield{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z M9 12l2 2 4-4'/%3E%3C/svg%3E")}
.i-c-wifi{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9a15 15 0 0 1 20 0 M5 12.5a10 10 0 0 1 14 0 M8.5 16a5 5 0 0 1 7 0 M12 19.5h.01'/%3E%3C/svg%3E")}
.i-c-nodes{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4z M5 21a2 2 0 1 0 0-4 2 2 0 0 0 0 4z M19 21a2 2 0 1 0 0-4 2 2 0 0 0 0 4z M12 7v5 M12 12l-5.5 5.5 M12 12l5.5 5.5'/%3E%3C/svg%3E")}
.i-c-code{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7l-5 5 5 5 M16 7l5 5-5 5 M14 4l-4 16'/%3E%3C/svg%3E")}
.i-c-floppy{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h11l3 3v15H5z M8 3v5h7V3 M8 14h8v7H8z'/%3E%3C/svg%3E")}
.i-c-gamepad{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8h10a4 4 0 0 1 4 4l.5 4a2.5 2.5 0 0 1-4.4 1.8L15.5 16h-7l-1.6 1.8A2.5 2.5 0 0 1 2.5 16L3 12a4 4 0 0 1 4-4z M7.5 10.5v3 M6 12h3 M15.5 11.5h.01 M17.5 13h.01'/%3E%3C/svg%3E")}
.i-c-paw{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20c-3 0-5-1.5-5-3.5 0-2.4 2.3-4.5 5-4.5s5 2.1 5 4.5c0 2-2 3.5-5 3.5z M5.5 11.5a1.6 2 0 1 0 0-4 1.6 2 0 0 0 0 4z M9.5 8a1.6 2 0 1 0 0-4 1.6 2 0 0 0 0 4z M14.5 8a1.6 2 0 1 0 0-4 1.6 2 0 0 0 0 4z M18.5 11.5a1.6 2 0 1 0 0-4 1.6 2 0 0 0 0 4z'/%3E%3C/svg%3E")}
.i-c-columns{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18 M4 8h16 M12 3l8 5H4z M6 8v13 M10 8v13 M14 8v13 M18 8v13'/%3E%3C/svg%3E")}
.i-c-globe{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z M3 12h18 M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z'/%3E%3C/svg%3E")}
.i-c-city{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18 M5 21V9h5v12 M10 21V4h6v17 M16 21v-9h4v9 M7 12h1 M7 15h1 M12.5 7h1 M12.5 10h1 M12.5 13h1 M17.5 15h1'/%3E%3C/svg%3E")}
.i-c-flag{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4 M5 4c2.5-1.5 5-1.5 7 0s4.5 1.5 7 0v9c-2.5 1.5-5 1.5-7 0s-4.5-1.5-7 0'/%3E%3C/svg%3E")}
.i-c-bulb{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6 M10 21h4 M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0 0 12 3z'/%3E%3C/svg%3E")}
.i-c-openbook{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h6a3 3 0 0 1 3 3v12a2.5 2.5 0 0 0-2.5-2.5H3z M21 5h-6a3 3 0 0 0-3 3v12a2.5 2.5 0 0 1 2.5-2.5H21z'/%3E%3C/svg%3E")}
.i-c-moon{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5z'/%3E%3C/svg%3E")}
.i-c-pencil{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l1-5L16 4l4 4L9 19z M14 6l4 4'/%3E%3C/svg%3E")}
.i-c-compass{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z M15.5 8.5l-2 5-5 2 2-5z'/%3E%3C/svg%3E")}
.i-c-star{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l2.6 5.4 5.9.8-4.3 4.1 1 5.8L12 16.8l-5.2 2.8 1-5.8-4.3-4.1 5.9-.8z'/%3E%3C/svg%3E")}
.i-c-film{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v14H4z M8 5v14 M16 5v14 M4 9h4 M4 15h4 M16 9h4 M16 15h4'/%3E%3C/svg%3E")}
.i-c-clapper{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h16v11H4z M4 9l1.5-4.5L20 4l-.5 5 M8.5 4.3L7 9 M13.5 4.2L12 9'/%3E%3C/svg%3E")}
.i-c-smile{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z M8.5 14c1.8 2 5.2 2 7 0 M9 9.5h.01 M15 9.5h.01'/%3E%3C/svg%3E")}
.i-c-note{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l11-2v13 M9 18a3 3 0 1 1-6 0 3 3 0 0 1 6 0z M20 16a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3C/svg%3E")}
.i-c-question{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.6.3-1 .9-1 1.6V14 M12 17.3h.01'/%3E%3C/svg%3E")}
.i-c-rocket{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c3 2 4.5 5.5 4.5 9.5L14 17h-4l-2.5-4.5C7.5 8.5 9 5 12 3z M12 10.5h.01 M9.5 17l-1.5 4 M14.5 17l1.5 4'/%3E%3C/svg%3E")}
.i-c-tv{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h18v11H3z M8 21h8 M8.5 3l3.5 3.5L15.5 3'/%3E%3C/svg%3E")}
.i-c-lipstick{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 21h7v-8h-7z M9.5 13V8.5l5-3.5v8 M8.5 17h7'/%3E%3C/svg%3E")}
.i-c-chef{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 14h10v6H7z M7 14a4 4 0 0 1-1-7.9A4 4 0 0 1 12 4a4 4 0 0 1 6 2.1A4 4 0 0 1 17 14 M7 17h10'/%3E%3C/svg%3E")}
.i-c-castle{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V9l2 1V7h2v3l2-1V5l2-2 2 2v4l2 1V7h2v3l2-1v12z M10 21v-4a2 2 0 0 1 4 0v4'/%3E%3C/svg%3E")}
.i-c-hanger{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7a2 2 0 1 1 2-2c0 1-2 1.5-2 3 M12 8l-9 7.5c-.8.7-.3 2 .8 2h16.4c1.1 0 1.6-1.3.8-2z'/%3E%3C/svg%3E")}
.i-c-heart{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z'/%3E%3C/svg%3E")}
.i-c-pulse{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l2-5 4 10 2-5h6'/%3E%3C/svg%3E")}
.i-c-car{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 16v-4l2-5h12l2 5v4z M4 16v2h3v-2 M17 16v2h3v-2 M4 12h16 M7.5 14h.01 M16.5 14h.01'/%3E%3C/svg%3E")}
.i-c-ball{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z M12 7.5l4 2.9-1.5 4.7h-5L8 10.4z M12 7.5V3.2 M16 10.4l4.3-1.4 M14.5 15.1l2.7 3.7 M9.5 15.1l-2.7 3.7 M8 10.4L3.7 9'/%3E%3C/svg%3E")}
.i-c-phone{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 2.5h10v19H7z M11 18.5h2'/%3E%3C/svg%3E")}
.i-c-medal{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21a6 6 0 1 0 0-12 6 6 0 0 0 0 12z M8.5 3h7l-2 6h-3z M12 13v4'/%3E%3C/svg%3E")}
.i-c-flask{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6 M10 3v6l-5 9a2 2 0 0 0 1.8 3h10.4a2 2 0 0 0 1.8-3l-5-9V3 M7 15h10'/%3E%3C/svg%3E")}
.i-c-atom{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c2.8 0 5 4 5 9s-2.2 9-5 9-5-4-5-9 2.2-9 5-9z M4.2 7.5c1.4-2.4 6-1.6 10.3.9s7.1 6.2 5.7 8.6-6 1.6-10.3-.9-7.1-6.2-5.7-8.6z M12 12h.01'/%3E%3C/svg%3E")}
.i-c-sigma{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 4H6l6 8-6 8h12'/%3E%3C/svg%3E")}
.i-c-puzzle{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h3.2a2.3 2.3 0 1 1 4.6 0H16v3.2a2.3 2.3 0 1 1 0 4.6V19H5v-3.2a2.3 2.3 0 1 0 0-4.6z'/%3E%3C/svg%3E")}
.i-c-trophy{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4h8v5a4 4 0 0 1-8 0z M8 6H5a3 3 0 0 0 3 4 M16 6h3a3 3 0 0 1-3 4 M12 13v4 M8.5 20h7 M10 17h4'/%3E%3C/svg%3E")}
.i-c-talk{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H10l-5 4v-4H4z M8 9h8 M8 12h5'/%3E%3C/svg%3E")}
.i-chev{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E")}
.i-crownf{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8l4.5 4 4-6 4 6 4.5-4-2 10.5h-13z'/%3E%3C/svg%3E")}

/* The game layer: what makes «جاوبها!» feel like a game rather than slides. A rounded heavy
   display face for everything you shout (titles, values, scores, answers); keys you press —
   a solid darker edge under each that sinks when tapped (no gradients, no glow); the board's
   categories as columns of colour; each answer its own colour; a ring for the clock; the
   moment of a right or wrong answer said big. */
:root {
  --display: 'Baloo Bhaijaan 2', var(--sf);
  --edge: 5px;                                  /* how far a key stands up */
  --r: max(14px, calc(1.8 * var(--u)));
  --r-s: max(8px, calc(1 * var(--u)));
  --ink-edge: #c9ced6;                           /* the edge under a white key */
  --red-edge: #a8211c;
  --a1: #e0312b; --a2: #1d62d6; --a3: #e39b00; --a4: #168650;   /* the four answers */
}
@media (min-width: 600px) and (min-height: 360px) { :root { --edge: max(5px, calc(.8 * var(--u))); } }

/* ---------- type: the display face for what matters ---------- */
.title, .marquee h1, h2, .cue, .choice b, .code, .tile-cat .nm, .cat-name, .val .v, .qcat, .coin, .timer .num,
.qtext, .ans, .verdict, .plq .nm, .plq .sc, .btn, .pill, .seg button, .tabs button, .life, .slot .snm, .banner .k, .rk .nm, .rk .sc,
.wager-amt, .bet-amt, .final-cat b, .em, .menu-row b, .join-steps li, .toast, .icon-btn, .link, .tag, .power, .bonus {
  font-family: var(--display);
}
.qtext { font-weight: 800; line-height: 1.35; }
.cue { font-weight: 800; }
.em { font-weight: 800; border-radius: 50%; }   /* every player and team is a round token */

/* ---------- keys: buttons stand up on a solid edge and sink when pressed ---------- */
.btn {
  border-width: 2px; border-color: var(--ink-edge); border-radius: var(--r);
  box-shadow: 0 var(--edge) 0 var(--ink-edge); margin-bottom: var(--edge);
  font-weight: 800; transition: transform .08s, box-shadow .08s, background-color .15s;
}
.btn:active:not(:disabled) { transform: translateY(var(--edge)); box-shadow: 0 0 0 var(--ink-edge); }
.btn.gold, .btn.primary { border-color: var(--red); box-shadow: 0 var(--edge) 0 var(--red-edge); }
.btn.gold:active:not(:disabled), .btn.primary:active:not(:disabled) { box-shadow: 0 0 0 var(--red-edge); }
.btn.ghost { box-shadow: none; margin-bottom: 0; border-color: transparent; }
.btn.danger { border-color: var(--bad); box-shadow: 0 var(--edge) 0 #9e1f1f; }
.btn:disabled { box-shadow: 0 var(--edge) 0 var(--ink-edge); }
.icon-btn { border-width: 2px; border-radius: var(--r-s); box-shadow: 0 3px 0 var(--line); }
.icon-btn:active { transform: translateY(3px); box-shadow: none; }
.icon-btn.menu-btn { border-color: var(--line-2); box-shadow: 0 3px 0 var(--line-2); }

/* ---------- home: the three ways in as big cards you press ---------- */
.choices { background: none; border: 0; overflow: visible; gap: calc(2 * var(--u)); }
.choice { border-radius: var(--r); background: var(--surface); border: 2px solid var(--line); box-shadow: 0 var(--edge) 0 var(--ink-edge); transition: transform .08s, box-shadow .08s; }
.choice + .choice { border-top: 2px solid var(--line); }
.choice:hover { background: var(--surface); border-color: var(--line-2); }
.choice:active { transform: translateY(var(--edge)); box-shadow: 0 0 0 var(--ink-edge); }
.choice.primary { background: var(--red); border-color: var(--red); box-shadow: 0 var(--edge) 0 var(--red-edge); color: #fff; }
.choice.primary small, .choice.primary .go { color: rgba(255, 255, 255, .88); }
.choice.primary .ci { background: #fff; color: var(--red); }
.choice .ci { border-radius: 50%; }
.choice b { font-weight: 800; }
.wordmark { font-size: max(72px, calc(21 * var(--u))); }

/* ---------- the draft: tiles with their icon on a white sticker, standing on an edge ---------- */
.tile-cat { box-shadow: 0 var(--edge) 0 var(--cd); margin-bottom: var(--edge); transition: transform .1s, box-shadow .1s; }
.tile-cat:not(:disabled):active { transform: translateY(var(--edge)); box-shadow: 0 0 0 var(--cd); }
.tile-cat .cic { display: grid; place-items: center; width: 1.9em; aspect-ratio: 1; border-radius: 50%; background: #fff; color: var(--cc); font-size: max(22px, calc(4.6 * var(--u))); }
.tile-cat .nm { font-weight: 800; line-height: 1.2; }
.tile-cat.taken { box-shadow: 0 var(--edge) 0 var(--line); }
.tile-cat.taken .cic { background: var(--bg); }
.tile-cat.spin { outline-color: var(--ink); transform: translateY(calc(-1 * var(--u))) scale(1.04); }
.lineup { border: 2px solid var(--line); border-radius: var(--r); }
.slot.full .sic { display: grid; place-items: center; width: 1.8em; aspect-ratio: 1; border-radius: 50%; background: #fff; color: var(--cc); }
.slot .snm { font-weight: 800; }
.pills { border: 2px solid var(--line); border-radius: var(--r); }
.pill { font-weight: 800; }

/* ---------- the board: each category a column of its colour, values as white keys ---------- */
.col { padding: calc(1 * var(--u)); border-radius: var(--r); background: var(--cc); box-shadow: 0 var(--edge) 0 var(--cd); margin-bottom: var(--edge); }
.cat-name { min-height: 0; padding: calc(.6 * var(--u)) calc(1 * var(--u)); background: none; font-weight: 800; }
.cat-name .cico { display: grid; place-items: center; width: 1.7em; aspect-ratio: 1; border-radius: 50%; background: #fff; color: var(--cc); }
.val { box-shadow: 0 var(--edge) 0 rgba(0, 0, 0, .22); }
.val .v { font-weight: 800; letter-spacing: 0; }
.board.live .val:not(.used):hover, .board.live .val:not(.used):focus-visible { transform: translateY(-2px); outline: 3px solid #fff; outline-offset: 2px; border-color: transparent; }
.board.live .val:not(.used):active { transform: translateY(var(--edge)); box-shadow: 0 0 0 rgba(0, 0, 0, .22); }
.val.used { background: rgba(255, 255, 255, .22); box-shadow: none; transform: translateY(var(--edge)); }
.val.used .v { color: rgba(255, 255, 255, .8); font-weight: 800; }
.val.used .stud { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7); }
.val.used .stud.off { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .7) 0 2px, transparent 2px 6px); }
.val.used .stud.won { box-shadow: 0 0 0 2px #fff; }
.stud { box-shadow: inset 0 0 0 2px var(--cc); border-radius: 50%; }
.stud.won { border-radius: var(--r-s); }
.gold-mark { color: var(--gold); }
.val.used .gold-mark { display: grid; place-items: center; width: 1.7em; aspect-ratio: 1; border-radius: 50%; background: #fff; color: var(--gold); }

/* ---------- the question ---------- */
.qmeta .cico, .cico { border-radius: 50%; }
.coin { border-width: 3px; border-radius: 999px; box-shadow: 0 3px 0 var(--cd, var(--ink)); font-weight: 800; }
.coin.golden { box-shadow: 0 3px 0 #8a6100; }
/* the clock: a ring that runs down around the seconds */
.timer { border: 0; background: none; padding: 0; min-width: 0; width: max(56px, calc(10 * var(--u))); height: auto; aspect-ratio: 1; overflow: visible; }
.timer .ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg) scaleY(-1); }
.timer .ring circle { fill: #fff; stroke: var(--sunk); stroke-width: 4; }
.timer .ring .run { fill: none; stroke: var(--cc, var(--ink)); stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset .2s linear; }
.timer .num { position: relative; z-index: 1; font-weight: 800; }
.timer.hurry .ring .run { stroke: var(--red); }
.timer.hurry { animation: tick 1s ease-in-out infinite; }
/* each answer has its colour on its letter; pressed like a key */
.ans { border: 2px solid var(--line); box-shadow: 0 var(--edge) 0 var(--ink-edge); margin-bottom: var(--edge); font-weight: 700; transition: transform .08s, box-shadow .08s, opacity .25s, background .25s, color .25s; }
.ans .l { border-radius: 50%; color: #fff; font-weight: 800; background: var(--al, var(--a1)); }
.ans[data-i="1"] { --al: var(--a2); } .ans[data-i="2"] { --al: var(--a3); } .ans[data-i="3"] { --al: var(--a4); }
.answers.live .ans:not(:disabled):hover, .answers.live .ans:not(:disabled):focus-visible { border-color: var(--al, var(--a1)); outline: 0; }
.answers.live .ans:not(:disabled):active { transform: translateY(var(--edge)); box-shadow: 0 0 0 var(--ink-edge); background: var(--surface); }
.ans.mine { border-color: var(--ink); outline: 3px solid var(--ink); outline-offset: 0; transform: translateY(calc(var(--edge) / 2)); box-shadow: 0 calc(var(--edge) / 2) 0 var(--ink-edge); }
.ans.out { box-shadow: none; transform: translateY(var(--edge)); }
.ans.out .l, .ans.dim .l { background: var(--line-2); }
.ans.wrong { box-shadow: 0 var(--edge) 0 #f0b8b8; outline: 0; border-color: var(--bad); background: var(--bad-bg); animation: shake .35s ease-in-out; }
.ans.wrong .l { background: var(--bad); }
.ans.right { box-shadow: 0 var(--edge) 0 #0f5e30; border-color: var(--good); animation: bounce .45s var(--ease); }
.ans.right .l { background: #fff; color: var(--good); }
.verdict { font-weight: 800; font-size: max(24px, calc(5 * var(--u))); animation: pop .3s var(--ease) both; }
.bonus { font-weight: 800; }
.power { font-weight: 800; }
.life { border-width: 2px; border-radius: var(--r); box-shadow: 0 3px 0 var(--line-2); font-weight: 800; }
.life:active:not(:disabled) { transform: translateY(3px); box-shadow: none; }

/* ---------- the scoreboard: every team in its colour, the one playing stands up ---------- */
.dock { border-top: 0; background: var(--bg); padding-top: calc(1 * var(--u)); }
.rail { gap: calc(1 * var(--u)); padding-inline: var(--gut-r) var(--gut-l); padding-bottom: calc(1.2 * var(--u)); }
.plq { border-radius: var(--r); background: var(--surface); border: 2px solid var(--line); box-shadow: 0 var(--edge) 0 var(--ink-edge); transition: transform .2s var(--ease), background .25s; }
.plq + .plq { box-shadow: 0 var(--edge) 0 var(--ink-edge); }
.plq .em { border-radius: 50%; }
.plq .sc { font-weight: 800; }
.plq .nm { font-weight: 800; color: var(--ink); }
.plq.turn { border-color: var(--pc); box-shadow: 0 var(--edge) 0 color-mix(in srgb, var(--pc) 70%, #000); transform: translateY(calc(-.6 * var(--u))); }
.plq.empty { background: transparent; border-style: dashed; box-shadow: none; }
.rail.award .plq, .rail.award .plq + .plq { border-color: var(--pc); box-shadow: 0 var(--edge) 0 var(--pc); }
.rail.award button.plq:active { transform: translateY(var(--edge)); box-shadow: 0 0 0 var(--pc); }
.plq.hit { animation: hit 1.4s var(--ease), jump .5s var(--ease); }

/* ---------- the rest picks up the same keys ---------- */
.panel, .code-card, .ranks, .teams-edit, details.settings, .menu-list { border-width: 2px; }
.code { font-weight: 800; letter-spacing: .04em; }
.banner { box-shadow: 0 var(--edge) 0 color-mix(in srgb, var(--pc) 70%, #000); }
.banner b { font-family: var(--logo); }
.seg { border-width: 2px; }
.seg button { font-weight: 800; }

@media (min-width: 600px) and (min-height: 360px) {
  .col { padding: calc(1 * var(--u)); gap: calc(1.2 * var(--u)); }
  .cat-name { font-size: calc(2.8 * var(--u)); line-height: 1.15; }
  .rail { padding-top: 0; }
  .timer { width: calc(9.4 * var(--u)); }
  .verdict { font-size: calc(4.6 * var(--u)); }
  .choices { grid-template-columns: none; }
}
@media (max-width: 599px), (max-height: 359px) {
  .col { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); align-items: center; }
  .plq { padding: calc(1.4 * var(--u)) calc(1.8 * var(--u)); }
}

@keyframes tick { 50% { transform: scale(1.08); } }
@keyframes bounce { 0% { transform: scale(1); } 40% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@keyframes jump { 40% { transform: translateY(calc(-1.6 * var(--u))); } }

/* ---------- the moments ---------- */
/* a game's board fills like a show: its values pop on in a random order */
.board.deal .val { animation: pop .38s var(--ease) both; animation-delay: var(--d, 0ms); }
/* a beat of suspense before the answer shows */
.q.suspense .ans { opacity: .55; transform: translateY(var(--edge)); box-shadow: none; }
.q.suspense .reveal-btn { pointer-events: none; opacity: .7; }
/* the points jump out of the team's score */
.plq .plus { position: absolute; top: 0; inset-inline-end: calc(2 * var(--u)); z-index: 2; padding: 0 .55em; border-radius: 999px; background: var(--good); color: #fff; font: 800 max(15px, calc(3 * var(--u)))/1.6 var(--display); pointer-events: none; animation: plus-up 1.4s var(--ease) forwards; }
.plq .plus.minus { background: var(--bad); }
.plq.hit-minus { animation: hit-minus 1.4s var(--ease), shake .35s ease-in-out; }
/* the viewer's own turn: said in red, big enough to see across the room */
.cue.mine { width: fit-content; max-width: 100%; padding: calc(1 * var(--u)) calc(2.4 * var(--u)); border-radius: var(--r); background: var(--red); color: #fff; box-shadow: 0 var(--edge) 0 var(--red-edge); margin-bottom: calc(var(--edge) + 1.4 * var(--u)); }
.qbody .cue.mine { color: #fff; }
.cue.mine .em { background: #fff; color: var(--pc, var(--red)); }
/* the host's shout on a reveal */
.verdict b { font-size: 1.3em; margin-inline-end: .2em; }
.verdict span { color: var(--ink); }
/* the end: from the bottom of the table up, the winner last */
.winboard .rk { animation: rise .45s var(--ease) both; animation-delay: calc(var(--k, 0) * 550ms + 200ms); }
.winboard .rk .meter i { animation-delay: calc(var(--k, 0) * 550ms + 450ms); }
.banner { animation: win-in .55s var(--ease) both; animation-delay: calc(var(--k, 0) * 550ms + 300ms); }
/* the board's values, big */
.val .v { font-size: max(26px, calc(6.4 * var(--u))); }
/* each answer's letter also has its own shape, not only its colour */
.ans[data-i="1"] .l { border-radius: var(--r-s); }
.ans[data-i="2"] .l { border-radius: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.ans[data-i="3"] .l { border-radius: 0; clip-path: polygon(25% 7%, 75% 7%, 100% 50%, 75% 93%, 25% 93%, 0 50%); }
@media (min-width: 600px) and (min-height: 360px) {
  .val .v { font-size: calc(8.6 * var(--u)); }
  .val.used .v { font-size: calc(2.4 * var(--u)); }
}
@keyframes plus-up { 0% { opacity: 0; transform: translateY(6px) scale(.8); } 15% { opacity: 1; transform: translateY(-70%) scale(1.1); } 80% { opacity: 1; transform: translateY(-95%) scale(1); } 100% { opacity: 0; transform: translateY(-120%); } }
@keyframes win-in { 0% { opacity: 0; transform: scale(.86); } 60% { opacity: 1; transform: scale(1.03); } 100% { transform: none; } }
@media (max-width: 359px) {
  .cat-name .cico { display: none; }   /* a narrow phone: the name gets the whole block */
  .cat-name { font-size: 14px; padding-inline: 6px; }
}
/* the review sheet's answers carry the same colours and shapes as in the game */
.rv-ans .l { border-radius: 50%; color: #fff; background: var(--a1); font-family: var(--display); }
.rv-ans:nth-child(2) .l { background: var(--a2); border-radius: var(--r-s); }
.rv-ans:nth-child(3) .l { background: var(--a3); border-radius: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.rv-ans:nth-child(4) .l { background: var(--a4); border-radius: 0; clip-path: polygon(25% 7%, 75% 7%, 100% 50%, 75% 93%, 25% 93%, 0 50%); }
@media (min-width: 600px) and (min-height: 360px) {
  .field { min-height: max(48px, calc(7.4 * var(--u))); }
  .card-preview { width: min(100%, calc(48 * var(--u))); }
}
/* not your turn: the keys lie flat, so nothing looks tappable that isn't */
body[data-mode=room]:not(.tv-mode) .answers:not(.live) .ans:not(.right):not(.wrong):not(.mine) { box-shadow: none; transform: translateY(var(--edge)); }
body:not(.tv-mode) .board:not(.live) .val:not(.used) { box-shadow: none; transform: translateY(var(--edge)); }
@media (min-width: 600px) and (min-height: 360px) {
  .btn { min-height: max(48px, calc(7.4 * var(--u))); }
  .btn.small { min-height: max(44px, calc(6.4 * var(--u))); }
}

/* Motion: short and functional (an answer revealed, a score counting, a tile flying to its
   slot). «وضع المحاضرة» and the phone's reduce-motion setting (body.calm) keep it all still. */
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes up { from { transform: translateY(100%); } }
@keyframes grow { from { transform: scaleX(0); } }
@keyframes pop { from { opacity: 0; transform: scale(.6); } }
@keyframes stud { 0% { transform: scale(1.8); } 60% { transform: scale(.9); } }
@keyframes hit { 0%, 40% { background: var(--good-bg); } }
@keyframes hit-minus { 0%, 40% { background: var(--bad-bg); } }
@keyframes toast { 0% { opacity: 0; transform: translateY(-6px); } 8%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes drain { to { transform: scaleX(0); } }
@keyframes zoomout { from { transform: scale(2.8); } to { transform: scale(1); } }
@keyframes breathe { 50% { opacity: .5; } }
@keyframes sticker { 0% { opacity: 0; transform: scale(.7); } 12% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
/* a turn that just passed to someone: their segment fills in */
.plq.turn { animation: fade .3s ease-out; }
.seg button, .tabs button, .pill, .btn, .life, .icon-btn, .menu-row, .choice { transition: background-color .15s, border-color .15s, color .15s; }

body.calm *, body.calm *::before, body.calm *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
body.calm .sticker { display: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
/* a toast that only fades would end invisible when motion is off: it just shows, and goes */
body.calm .toast { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .toast { animation: none !important; } }