/* لعيبة (La3eeba) — the game-show stage. A TV quiz set three metres away, and a 360px phone.
   Deep-blue stage under light rays, gold numerals, a lit edge around whoever is playing.
   Logical properties only (RTL). Western digits everywhere. No letter-spacing on Arabic. */

@font-face {
  font-family: 'Cairo';
  src: url('/fonts/Cairo-Variable.woff2') format('woff2');
  font-weight: 500 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  /* stage */
  --stage-0: #040a2a;
  --stage-1: #0a1a56;
  --stage-2: #15318a;
  --panel: #0c1c5a;
  --panel-2: #122a78;
  --panel-3: #1a3690;
  --line: #2c4aa3;
  --line-soft: rgba(120, 150, 255, 0.22);
  /* ink */
  --text: #f5f7ff;
  --muted: #c3cdf0;
  /* gold */
  --gold: #ffc93c;
  --gold-hi: #ffe7a3;
  --gold-deep: #b37a12;
  --gold-ink: #2a1800;
  --gold-glow: rgba(255, 190, 50, 0.55);
  /* teams, tuned for the blue stage (both > 7:1 on --stage-1) */
  --team-a: #ff9a4d;
  --team-a-ink: #2a1000;
  --team-a-glow: rgba(255, 140, 60, 0.55);
  --team-b: #34e0cf;
  --team-b-ink: #00211e;
  --team-b-glow: rgba(40, 220, 200, 0.5);
  --danger: #ff8a8a;
  --ok: #7be39a;
  --focus: #ffe7a3;
  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 18px 50px rgba(0, 4, 24, 0.6);
  --pad: clamp(12px, 1.6vw, 28px);
  --font: 'Cairo', 'Noto Naskh Arabic', 'Noto Sans Arabic', 'Segoe UI', 'Geeza Pro', 'Tahoma', sans-serif;
}

* { box-sizing: border-box; }
html {
  background: var(--stage-0); color-scheme: dark;
  /* A fast double tap must not zoom the page mid-game (the zoom is screen-shared too); no grey flash on tap. */
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
body {
  position: relative;
  isolation: isolate;
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font);
  font-size: clamp(18px, 1.15vw + 12px, 24px);
  font-weight: 500;
  line-height: 1.65;
  color: var(--text);
  background: var(--stage-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* The set: a lit centre, soft rays fanning down from the rig, a vignette at the edges. */
body::before,
body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; }
body::before {
  background:
    radial-gradient(90% 60% at 50% -8%, rgba(90, 140, 255, 0.5), transparent 62%),
    radial-gradient(140% 110% at 50% 35%, var(--stage-1) 0%, #07134a 45%, var(--stage-0) 80%);
}
body::after {
  background:
    repeating-conic-gradient(from 160deg at 50% -25%, rgba(170, 200, 255, 0.07) 0deg 3deg, transparent 3deg 10deg),
    radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0, 2, 16, 0.6) 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0.9) 100%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0.9) 100%);
}
h1, h2, h3 { line-height: 1.35; margin: 0; }
p { margin: 0; }
a { color: var(--gold-hi); text-underline-offset: 0.2em; }
button { font: inherit; color: inherit; }
img, canvas { display: block; max-inline-size: 100%; }
.num { unicode-bidi: isolate; font-variant-numeric: tabular-nums; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 8px; }
.visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* the live region sits at the end of <body>: pinned to the top so its 1px never adds a scroll to a full-height screen */
#live { inset-block-start: 0; inset-inline-start: 0; }
.skip-link { position: absolute; inset-block-start: -100px; inset-inline-start: 8px; background: var(--gold); color: var(--gold-ink); padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip-link:focus { inset-block-start: 8px; }

.app { position: relative; z-index: 1; inline-size: 100%; max-inline-size: 1840px; margin-inline: auto; padding: var(--pad); }
.screen { display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 26px); min-block-size: calc(100dvh - 2 * var(--pad)); }
.hint { color: var(--muted); font-size: max(18px, 0.9em); }
.section-title { font-weight: 900; font-size: clamp(1.25rem, 1.6vw, 1.7rem); color: var(--text); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45em;
  min-block-size: 2.9em; padding: 0.5em 1.2em; border-radius: var(--radius-sm);
  border: 2px solid transparent; background: var(--panel-3); color: var(--text);
  font-weight: 800; font-size: 1em; line-height: 1.3; cursor: pointer; text-decoration: none;
  transition: transform 120ms ease, background-color 120ms ease, box-shadow 160ms ease, opacity 120ms ease;
}
.btn:active { transform: scale(0.98); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.btn-primary {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 45%, #f0a91c);
  color: var(--gold-ink); border-color: #ffe08a;
  box-shadow: 0 6px 0 var(--gold-deep), 0 10px 30px rgba(255, 180, 40, 0.3);
}
.btn-primary:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--gold-deep), 0 6px 20px rgba(255, 180, 40, 0.25); }
.btn-primary[disabled], .btn-primary[aria-disabled="true"] { box-shadow: none; }
.btn-secondary { background: var(--panel-2); border-color: var(--line); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--muted); }
.btn-big { font-size: 1.2em; padding-inline: 1.6em; font-weight: 900; }
/* Hover only where a pointer can hover: touch browsers keep :hover on whatever was tapped last. */
@media (hover: hover) {
  .btn:hover { background: #2443a8; }
  .btn-primary:hover { background: linear-gradient(180deg, #fff1c4, #ffd45e 45%, #f7b52a); }
  .btn-ghost:hover { background: rgba(40, 70, 170, 0.35); color: var(--text); }
  .btn-undo:hover { background: var(--gold-hi); }
  .cat-card:hover { transform: translateY(-3px); border-color: rgba(255, 231, 163, 0.55); }
  .cat-card:hover .cover { transform: scale(1.04); }
  .tile:hover:not(.is-spent) {
    transform: translateY(-3px); border-color: var(--gold);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 0 2px rgba(255, 201, 60, 0.4), 0 0 36px rgba(255, 190, 50, 0.35), 0 12px 24px rgba(0, 4, 24, 0.5);
  }
  .tile:hover:not(.is-spent) .tile-value { color: var(--gold-hi); }
  .award-a:hover, .award-b:hover, .award-none:hover { background: var(--panel-2); }
  .awards.has-chosen .btn-award:not(.is-chosen):hover { opacity: 1; }
}

/* Busy: something is on its way. A dimmed control with a spinner; the spinner is a ring, so it still reads when frozen. */
.spinner {
  display: inline-block; inline-size: 1.1em; block-size: 1.1em; vertical-align: -0.15em; border-radius: 50%;
  border: 3px solid rgba(255, 231, 163, 0.28); border-block-start-color: var(--gold-hi);
  animation: spin 900ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn[aria-busy="true"], .tile[aria-busy="true"] { opacity: 0.7; cursor: progress; pointer-events: none; }
.btn[aria-busy="true"]::before, .tile[aria-busy="true"]::before {
  content: ''; position: absolute; inset-block-start: 8px; inset-inline-start: 10px; inline-size: 18px; block-size: 18px; border-radius: 50%;
  border: 3px solid rgba(255, 231, 163, 0.28); border-block-start-color: var(--gold-hi); animation: spin 900ms linear infinite;
}
.btn[aria-busy="true"] { position: relative; }
/* The branded boot screen (index.html): shown until the question bank has arrived. */
.boot { align-items: center; justify-content: center; text-align: center; gap: 6px; }
.boot-hint { display: inline-flex; align-items: center; gap: 10px; }

/* Keyboard hints (keys.js): only where a host is likely at a keyboard (wide screen, mouse-like pointer: an iPad
   with touch only never shows them). A key cap on the button. */
.key-hint { display: none; }
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .key-hint {
    display: inline-block; flex: none; min-inline-size: 1.7em; padding: 0 0.4em; margin-inline-start: 0.5em; text-align: center;
    border: 1.5px solid currentColor; border-radius: 6px; opacity: 0.8; direction: ltr;
    font: 800 14px/1.55 var(--font); letter-spacing: 0.02em;
  }
  .btn-award .key-hint { position: absolute; inset-block-end: 5px; inset-inline-end: 7px; margin: 0; }
  .btn-lifeline.is-spent .key-hint, .btn-lifeline.is-na .key-hint, .lifeline-group:not(.is-active) .key-hint { display: none; }
}

/* ---------- category covers (setup cards + board headers) ---------- */
.cover {
  position: absolute; inset: 0; overflow: hidden; display: grid; place-items: center;
  background:
    radial-gradient(70% 90% at var(--art-x, 50%) 0%, rgba(255, 255, 255, 0.22), transparent 60%),
    linear-gradient(var(--art-angle, 160deg), var(--art-1), var(--art-2));
}
/* Group tints for the no-photo fallback. Each card also gets its own light angle (--art-*). */
.art-general { --art-1: #3b4fd8; --art-2: #1a1f73; }
.art-sports { --art-1: #1c9a5c; --art-2: #0b3a3a; }
.art-girls { --art-1: #d04a98; --art-2: #4a1a6e; }
.art-guys { --art-1: #3b6fb0; --art-2: #1b2437; }
.art-entertainment { --art-1: #9a45e0; --art-2: #2c1670; }
.art-egypt { --art-1: #e09a2e; --art-2: #6e2412; }
.art-other { --art-1: #3d57b8; --art-2: #141e5c; }
.cover::after {
  /* the readable scrim under the name, whether photo or gradient */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(3, 8, 36, 0.94) 0%, rgba(3, 8, 36, 0.7) 32%, rgba(3, 8, 36, 0) 68%);
}
.cover-img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; max-inline-size: none; object-fit: cover; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.cover-emoji {
  position: relative; z-index: 1; font-size: 2.6em; line-height: 1; margin-block-end: 18%;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
}
.cover.has-photo .cover-emoji {
  position: absolute; inset-block-start: 10px; inset-inline-end: 10px; margin: 0; font-size: 1.2em;
  inline-size: 1.9em; block-size: 1.9em; display: grid; place-items: center; border-radius: 999px;
  background: rgba(3, 8, 36, 0.7); border: 1px solid var(--line-soft);
}

/* ---------- setup ---------- */
.hero { text-align: center; padding-block: clamp(4px, 1vw, 12px) 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.logo {
  font-size: clamp(3rem, 4.6vw, 5.2rem); font-weight: 1000; line-height: 1.1; letter-spacing: 0.02em; color: var(--gold);
  background: linear-gradient(180deg, #fff3c9 10%, var(--gold) 55%, #e89a12 95%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 0 var(--gold-deep)) drop-shadow(0 0 30px rgba(255, 190, 50, 0.35));
}
.tagline { color: var(--muted); font-size: max(18px, clamp(1rem, 1.2vw, 1.3rem)); }

.teams-setup { border: 0; margin: 0; padding: 0; min-inline-size: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.team-inputs { display: grid; grid-template-columns: minmax(0, 560px) auto minmax(0, 560px); justify-content: center; inline-size: 100%; gap: clamp(10px, 1.4vw, 22px); align-items: end; }
.versus { font-weight: 900; font-size: 1.3em; color: var(--gold); padding-block-end: 0.5em; }
.team-input { display: flex; flex-direction: column; gap: 6px; min-inline-size: 0; }
.team-input-label { font-weight: 800; }
.team-a .team-input-label { color: var(--team-a); }
.team-b .team-input-label { color: var(--team-b); }
.team-input input {
  font: inherit; font-weight: 900; font-size: 1.3em; padding: 0.45em 0.9em; border-radius: var(--radius-sm);
  border: 2px solid var(--line); background: rgba(4, 10, 42, 0.7); color: var(--text); inline-size: 100%; min-inline-size: 0;
}
.team-input input::placeholder { color: #9aa8d8; opacity: 1; }
.team-a input { border-color: var(--team-a); box-shadow: 0 0 24px -6px var(--team-a-glow), inset 0 -3px 0 var(--team-a); }
.team-b input { border-color: var(--team-b); box-shadow: 0 0 24px -6px var(--team-b-glow), inset 0 -3px 0 var(--team-b); }
.team-input input:focus-visible { outline-offset: 2px; }

.cats-setup { display: flex; flex-direction: column; gap: clamp(12px, 1.4vw, 20px); min-inline-size: 0; }
.cats-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.btn-reset-history { min-block-size: 44px; font-size: max(18px, 0.85em); }
/* One even grid in group order: the group is a label on each card, so all 23 read as one board. */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 208px), 1fr)); gap: clamp(10px, 1vw, 16px); }
.cat-card {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 4 / 3; padding: 10px 12px; border-radius: var(--radius); cursor: pointer; text-align: start;
  background: var(--panel); border: 2px solid var(--line-soft); color: var(--text);
  box-shadow: 0 10px 26px rgba(0, 4, 24, 0.45);
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 160ms ease, opacity 140ms ease;
}
.cat-card .cover { z-index: -1; transition: transform 300ms ease; }
.cat-card.is-selected {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(255, 201, 60, 0.35), 0 0 34px rgba(255, 190, 50, 0.4), 0 10px 26px rgba(0, 4, 24, 0.45);
}
/* Full: the art recedes, the name stays readable (AA) so the host can still find a swap. */
.cat-card.is-full .cover { filter: saturate(0.35) brightness(0.8); }
.cat-card.is-full { border-color: rgba(120, 150, 255, 0.14); box-shadow: none; }
.cat-text { position: relative; display: flex; flex-direction: column; min-inline-size: 0; }
.cat-group-label {
  font-size: max(16px, 0.74em); font-weight: 800; line-height: 1.3; color: var(--gold-hi); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}
.cat-name { position: relative; font-weight: 900; font-size: max(18px, 0.92em); line-height: 1.3; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); overflow-wrap: anywhere; }
/* The pick-order badge sits where a long name would run: make room for it while the card is picked. */
@media (min-width: 721px) { .cat-card.is-selected .cat-text { padding-inline-start: 2.5em; } }
.cat-order {
  position: absolute; inset-block-start: 10px; inset-inline-start: 10px; z-index: 2;
  min-inline-size: 1.9em; block-size: 1.9em; padding-inline: 0.3em; display: grid; place-items: center;
  border-radius: 999px; font-weight: 1000; font-size: max(18px, 0.95em); line-height: 1;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: var(--gold-ink);
  box-shadow: 0 0 0 3px rgba(4, 10, 42, 0.6), 0 0 18px var(--gold-glow);
}

.setup-bar {
  position: sticky; inset-block-end: 0; z-index: 5;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 18px;
  margin-inline: calc(-1 * var(--pad)); padding: 14px var(--pad);
  background: linear-gradient(to top, rgba(4, 10, 42, 0.98) 60%, rgba(4, 10, 42, 0.85));
  border-block-start: 2px solid rgba(255, 201, 60, 0.35);
  box-shadow: 0 -14px 40px rgba(0, 2, 16, 0.55);
}
.counter {
  display: inline-flex; align-items: center; justify-content: center; min-inline-size: 3.2em;
  padding: 0.1em 0.7em; border-radius: 999px; font-weight: 1000; font-size: 1.35em;
  color: var(--gold); background: rgba(255, 201, 60, 0.1); border: 2px solid rgba(255, 201, 60, 0.45);
}
.setup-hint { min-inline-size: 0; }
.setup-actions { display: flex; gap: 12px; flex-wrap: nowrap; justify-content: center; }
.site-footer { margin-block-start: auto; text-align: center; color: var(--muted); font-size: max(18px, 0.9em); padding-block: 4px; }
/* A link that stands on its own (footers, the «back» lines of the static pages) is a tap target: 44px tall. */
.board-footer a, .site-footer a, .nav-links a, .standalone-note a { display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: 8px; }
.nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
@media (max-width: 1100px) {
  .setup-hint-extra { display: none; }
}
/* Phones, and any short landscape screen: one row for «counter · قرعة · ابدأ اللعب» (start the widest) under a
   one-line hint. A short landscape screen drops the hint too: the bar must never cover the cards it serves. */
@media (max-width: 720px), (max-height: 500px) {
  .setup-bar {
    grid-template-columns: auto minmax(0, 0.8fr) minmax(0, 1.5fr);
    grid-template-areas: 'hint hint hint' 'counter shuffle start';
    padding-block: 8px; gap: 6px 10px;
  }
  .setup-bar .counter { grid-area: counter; font-size: 1.15em; }
  .setup-bar .setup-hint { grid-area: hint; font-size: 18px; line-height: 1.4; }
  .setup-bar .setup-actions { display: contents; }
  .setup-bar [data-action="shuffle"] { grid-area: shuffle; }
  .setup-bar [data-action="start"] { grid-area: start; padding-inline: 0.8em; }
}
@media (max-height: 500px) {
  .setup-bar { grid-template-areas: 'counter shuffle start'; padding-block: 6px; }
  .setup-bar .setup-hint { display: none; }
}

/* ---------- board ---------- */
.board-screen { gap: clamp(12px, 1.3vw, 22px); }
.scoreboard { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(10px, 1.4vw, 24px); align-items: stretch; }
.team-card {
  --tc: var(--line); --tc-glow: transparent;
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: clamp(10px, 1.2vw, 18px) clamp(12px, 1.4vw, 22px) clamp(14px, 1.4vw, 22px);
  border-radius: var(--radius); min-inline-size: 0;
  background: linear-gradient(180deg, rgba(26, 54, 144, 0.9), rgba(10, 24, 80, 0.95));
  border: 2px solid color-mix(in srgb, var(--tc) 45%, transparent);
  box-shadow: var(--shadow);
  transition: border-color 220ms ease, box-shadow 220ms ease;
}
.team-card.team-a { --tc: var(--team-a); --tc-glow: var(--team-a-glow); }
.team-card.team-b { --tc: var(--team-b); --tc-glow: var(--team-b-glow); }
/* The lit stage edge: the active team's plate glows and a floor light burns under it. */
.team-card.is-turn {
  border-color: var(--tc);
  box-shadow: 0 0 0 2px var(--tc), 0 0 46px -4px var(--tc-glow), inset 0 0 40px -18px var(--tc-glow), var(--shadow);
}
.team-card.is-turn::after {
  content: ''; position: absolute; inset-inline: 12%; inset-block-end: -9px; block-size: 6px; border-radius: 999px;
  background: var(--tc); box-shadow: 0 0 18px 4px var(--tc-glow);
}
.team-name { font-weight: 900; font-size: clamp(1.15rem, 1.6vw, 1.75rem); line-height: 1.3; overflow-wrap: anywhere; text-align: center; color: var(--tc); }
.score-box { position: relative; display: grid; place-items: center; }
.team-score { font-weight: 1000; font-size: clamp(2.4rem, 4.2vw, 4.8rem); line-height: 1.1; color: var(--text); text-shadow: 0 0 26px var(--tc-glow); }
.score-box.is-counting > :not(.score-tick),
.award-score-box.is-counting > :not(.score-tick) { visibility: hidden; }
.score-tick { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; font: inherit; font-weight: 1000; font-variant-numeric: tabular-nums; }
.score-box > .score-tick { font-size: clamp(2.4rem, 4.2vw, 4.8rem); line-height: 1.1; color: var(--gold-hi); text-shadow: 0 0 26px var(--gold-glow); }
.lifeline-chips { list-style: none; margin: 4px 0 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
/* The host's manual score correction (± 50): big pills in the team's colour, legible through a screen share. */
.score-adjust { display: flex; gap: 8px; justify-content: center; margin-block: 4px 2px; }
.btn-adjust {
  min-inline-size: 64px; min-block-size: 44px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  border: 2px solid color-mix(in srgb, var(--tc) 60%, transparent); background: rgba(4, 10, 42, 0.55);
  color: var(--text); font: inherit; font-weight: 900; font-size: max(18px, clamp(1rem, 1.1vw, 1.25rem));
  direction: ltr; unicode-bidi: isolate; touch-action: manipulation;
}
@media (hover: hover) { .btn-adjust:hover { background: color-mix(in srgb, var(--tc) 28%, rgba(4, 10, 42, 0.6)); } }
.btn-adjust:active { transform: scale(0.95); }
.btn-adjust:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 2px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 1px 12px; border-radius: 999px;
  background: rgba(4, 10, 42, 0.55); border: 1px solid var(--line-soft); font-size: max(18px, 0.78em); font-weight: 700; color: var(--text);
}
.chip.is-spent { color: var(--muted); opacity: 0.8; }
.chip.is-spent > [aria-hidden] { filter: grayscale(1); opacity: 0.7; }
.chip.is-spent::after { content: '✗'; color: var(--danger); font-weight: 900; line-height: 1; }
.team-card.is-pulsing { animation: plate-pulse 400ms ease-out; }
@keyframes plate-pulse {
  0% { transform: scale(1); }
  25% { transform: scale(1.05); box-shadow: 0 0 0 4px var(--tc), 0 0 80px 10px var(--tc-glow), var(--shadow); }
  100% { transform: scale(1); }
}

.turn-indicator {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; min-inline-size: 0;
  padding: clamp(10px, 1.2vw, 18px); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(4, 10, 42, 0.85), rgba(10, 24, 80, 0.8));
  border-block: 2px solid rgba(255, 201, 60, 0.55);
}
.turn-indicator.team-a { --tc: var(--team-a); --tc-glow: var(--team-a-glow); }
.turn-indicator.team-b { --tc: var(--team-b); --tc-glow: var(--team-b-glow); }
.turn-brand {
  font-size: max(18px, clamp(1rem, 1.1vw, 1.25rem)); font-weight: 1000; line-height: 1.2; color: var(--gold);
  text-shadow: 0 2px 0 var(--gold-deep), 0 0 18px var(--gold-glow); opacity: 0.95;
}
.turn-label { font-size: max(18px, clamp(1.05rem, 1.2vw, 1.3rem)); font-weight: 800; color: var(--gold-hi); }
.turn-team { font-size: clamp(1.5rem, 2.6vw, 3rem); font-weight: 1000; line-height: 1.2; overflow-wrap: anywhere; color: var(--tc); text-shadow: 0 0 24px var(--tc-glow); }
.btn-turn { margin-block-start: 4px; background: rgba(4, 10, 42, 0.6); border-color: var(--line); font-size: max(18px, clamp(1rem, 1.1vw, 1.2rem)); min-block-size: 2.5em; }

.board-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(8px, 0.9vw, 16px); flex: 1; }
.col { display: flex; flex-direction: column; gap: clamp(8px, 0.9vw, 14px); min-inline-size: 0; }
.col-title {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; text-align: center;
  block-size: clamp(84px, 12vh, 140px); padding: 8px 10px; border-radius: var(--radius-sm);
  border: 2px solid rgba(255, 201, 60, 0.4); box-shadow: 0 8px 22px rgba(0, 4, 24, 0.5);
  font-size: max(18px, clamp(1.1rem, 1.5vw, 2rem)); font-weight: 900; line-height: 1.3;
}
.col-title {
  border-block-end: 4px solid var(--gold);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 22px rgba(0, 4, 24, 0.5), 0 6px 18px -6px var(--gold-glow);
}
.col-title .cover { z-index: -1; font-size: 0.75em; }
.col-title .cover::after { background: linear-gradient(to top, rgba(3, 8, 36, 0.82) 0%, rgba(3, 8, 36, 0.35) 38%, rgba(3, 8, 36, 0) 60%); }
.col-title .cover-emoji { font-size: 3.3em; margin-block-end: 28%; }
.col-name { position: relative; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); overflow-wrap: anywhere; }
.col-tiles { display: flex; flex-direction: column; gap: clamp(8px, 0.9vw, 14px); flex: 1; }
.tile {
  position: relative; flex: 1; min-block-size: clamp(56px, 9vh, 124px); border-radius: var(--radius-sm); cursor: pointer;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(120, 160, 255, 0.35), transparent 60%),
    linear-gradient(180deg, #1c3aa0, #0e2170 70%, #0a1a5c);
  border: 2px solid rgba(255, 201, 60, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -6px 14px rgba(0, 4, 30, 0.45), 0 8px 18px rgba(0, 4, 24, 0.45);
  color: var(--gold); font-weight: 1000; font-size: clamp(1.6rem, 3.6vw, 4.6rem); display: grid; place-items: center;
  transition: transform 140ms ease, box-shadow 180ms ease, border-color 140ms ease, opacity 160ms ease;
}
.tile-value { line-height: 1; letter-spacing: 0.04em; text-shadow: 0 2px 0 #7a4a00, 0 0 18px var(--gold-glow), 0 0 42px rgba(255, 170, 30, 0.35); }
.tile:focus-visible:not(.is-spent) {
  transform: translateY(-3px); border-color: var(--gold);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 0 2px rgba(255, 201, 60, 0.4), 0 0 36px rgba(255, 190, 50, 0.35), 0 12px 24px rgba(0, 4, 24, 0.5);
}
.tile.is-spent {
  cursor: default; background: rgba(6, 14, 52, 0.75); border-color: rgba(120, 150, 255, 0.14);
  box-shadow: inset 0 0 20px rgba(0, 2, 16, 0.5); color: #5d6ea8;
}
.tile.is-spent .tile-value { opacity: 0.4; text-shadow: none; }
/* A spent tile keeps the colour of whoever won it («محدش» stays grey): the board reads as the game's history. */
.tile.is-spent.won-a { --won: var(--team-a); }
.tile.is-spent.won-b { --won: var(--team-b); }
.tile.is-spent.won-a, .tile.is-spent.won-b {
  background: linear-gradient(180deg, color-mix(in srgb, var(--won) 36%, #071456), color-mix(in srgb, var(--won) 20%, #050e40));
  border-color: color-mix(in srgb, var(--won) 75%, transparent);
  box-shadow: inset 0 0 22px color-mix(in srgb, var(--won) 25%, transparent);
  color: var(--won);
}
.tile.is-spent.won-a .tile-value, .tile.is-spent.won-b .tile-value { opacity: 0.9; }
.tile.is-spent.won-a .tile-mark, .tile.is-spent.won-b .tile-mark { color: var(--won); background: rgba(4, 10, 42, 0.55); border-color: color-mix(in srgb, var(--won) 70%, transparent); }
.tile.is-spent.won-none { background: rgba(60, 76, 140, 0.4); border-color: rgba(160, 175, 230, 0.35); color: #aab6e6; }
.tile.is-spent.won-none .tile-value { opacity: 0.65; }
.tile.is-spent.won-none .tile-mark { color: var(--muted); background: none; border-color: rgba(195, 205, 240, 0.35); }
.tile-mark {
  position: absolute; inset-block-start: 8px; inset-inline-end: 10px; font-size: max(18px, 0.5em); line-height: 1;
  inline-size: 1.6em; block-size: 1.6em; display: grid; place-items: center; border-radius: 999px;
  color: var(--ok); background: rgba(123, 227, 154, 0.12); border: 1px solid rgba(123, 227, 154, 0.45);
}
.board-footer { display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; color: var(--muted); font-size: max(18px, 0.9em); }
.board-footer .btn { min-block-size: 2.4em; }
.progress { font-weight: 800; }

/* «تراجع» after a question closes by itself (toast.js). Over everything, centred at the bottom, big enough to hit. */
.undo-toast {
  position: fixed; z-index: 70; inset-inline: 0; margin-inline: auto; inset-block-end: max(16px, env(safe-area-inset-bottom));
  inline-size: fit-content; max-inline-size: calc(100vw - 24px);
  display: flex; align-items: center; gap: 14px; padding: 8px 10px 8px 22px; border-radius: 999px;
  background: #06103e; border: 2px solid var(--gold); box-shadow: 0 0 0 4px rgba(4, 10, 42, 0.7), 0 14px 40px rgba(0, 2, 16, 0.7);
}
.undo-text { font-weight: 800; font-size: max(18px, 1rem); line-height: 1.4; min-inline-size: 0; overflow-wrap: anywhere; }
.undo-name { color: var(--gold-hi); font-weight: 900; }
.btn-undo {
  flex: none; min-block-size: 44px; padding: 0.15em 1.1em; font-size: max(18px, 1rem); font-weight: 900;
  background: var(--gold); color: var(--gold-ink); border-color: var(--gold-hi);
}

/* While «تراجع» is up it sits where the board footer is: keep that row clear instead of cutting it in half. */
@media (min-width: 721px) { body.has-undo-toast .board-footer { visibility: hidden; } }
@media (max-width: 720px) { body.has-undo-toast .app { padding-block-end: 96px; } }

/* ---------- question modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: var(--pad);
  background: radial-gradient(100% 80% at 50% 30%, rgba(8, 20, 80, 0.8), rgba(2, 5, 22, 0.94));
}
.modal-backdrop.is-entering { animation: backdrop-in 200ms ease both; }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
.modal {
  position: relative; inline-size: min(100%, 1760px); max-block-size: calc(100dvh - 2 * var(--pad)); overflow: auto;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(80, 130, 255, 0.28), transparent 70%),
    linear-gradient(180deg, #0f2272, #081650 60%, #06103e);
  border: 2px solid rgba(255, 201, 60, 0.5); border-radius: var(--radius);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 0 80px rgba(60, 110, 255, 0.25), var(--shadow);
  display: flex; flex-direction: column; transform-origin: 50% 50%;
}
.modal:focus { outline: none; box-shadow: 0 0 0 3px var(--focus), 0 0 80px rgba(60, 110, 255, 0.25), var(--shadow); }
/* During the tile flip the photo is already in place under the tile face: it stays hidden until its covered
   layout is applied (.media-img is visibility:hidden until .is-laid-out), so it never shows uncovered. */
.modal.is-flipping { overflow: hidden; }
.flip-face {
  position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(120, 160, 255, 0.35), transparent 60%),
    linear-gradient(180deg, #1c3aa0, #0e2170 70%, #0a1a5c);
  color: var(--gold); font-weight: 1000; font-size: clamp(3rem, 12vw, 14rem);
}
.flip-face .tile-value { text-shadow: 0 4px 0 #7a4a00, 0 0 40px var(--gold-glow); }

.q-header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; flex: none;
  padding: clamp(10px, 1.1vw, 18px) clamp(14px, 1.6vw, 28px); border-block-end: 1px solid var(--line-soft);
}
.q-title { display: flex; align-items: center; gap: 12px; font-size: clamp(1.15rem, 1.5vw, 1.7rem); font-weight: 900; min-inline-size: 0; }
.q-cat { overflow-wrap: anywhere; }
.q-title .cat-emoji { font-size: 1.3em; line-height: 1; }
.q-points {
  flex: none; padding: 0.05em 0.75em; border-radius: 999px; font-weight: 1000;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: var(--gold-ink); box-shadow: 0 0 20px var(--gold-glow);
  line-height: 1.3;
}
/* The stakes are read from across a room: on every screen from 900px up the points pill is at least 1.4rem
   (the full-size TV block below makes it larger still). */
@media (min-width: 900px) { .q-points { font-size: max(1.4rem, 1.25em); } }
.q-turn {
  --tc: var(--line); --tc-glow: transparent;
  display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; border-radius: 999px; padding: 4px 16px;
  font-weight: 800; font-size: max(18px, clamp(1rem, 1.1vw, 1.25rem)); border: 2px solid var(--tc);
  background: rgba(4, 10, 42, 0.6); box-shadow: 0 0 22px -4px var(--tc-glow);
}
.q-turn.team-a { --tc: var(--team-a); --tc-glow: var(--team-a-glow); }
.q-turn.team-b { --tc: var(--team-b); --tc-glow: var(--team-b-glow); }
.q-turn strong { color: var(--tc); font-weight: 1000; }

.q-stage { display: flex; flex-direction: column; gap: clamp(12px, 1.4vw, 24px); padding: clamp(12px, 1.4vw, 24px) clamp(14px, 1.6vw, 28px); }
.q-media-col { display: grid; place-items: center; min-inline-size: 0; }
.q-media { inline-size: 100%; }
.q-side { display: flex; flex-direction: column; gap: clamp(12px, 1.2vw, 20px); min-inline-size: 0; }
.q-content { display: flex; flex-direction: column; gap: clamp(10px, 1.1vw, 18px); min-inline-size: 0; }
.q-content.has-more { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); }
.q-stem { font-size: clamp(1.9rem, 2.4vw, 2.9rem); font-weight: 900; line-height: 1.55; text-wrap: balance; }
.no-media .q-stem { text-align: center; margin-inline: auto; max-inline-size: 28ch; font-size: clamp(2rem, 3.2vw, 4rem); }
.no-media .q-stem.is-long { max-inline-size: 36ch; font-size: clamp(1.8rem, 2.5vw, 3.1rem); line-height: 1.5; }
.is-revealed .q-stem { font-size: max(18px, clamp(1.1rem, 1.35vw, 1.6rem)); font-weight: 700; color: var(--muted); line-height: 1.6; }
.no-media.is-revealed .q-stem { max-inline-size: 48ch; }

.q-lifeline-output { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; }
.no-media .q-lifeline-output { justify-content: center; }
.ll-out { display: flex; align-items: center; gap: 12px; padding: 8px 18px; border-radius: var(--radius-sm); background: rgba(4, 10, 42, 0.6); border: 2px solid var(--line-soft); }
.ll-out-label { color: var(--muted); font-weight: 800; }
.ll-letter { border-color: rgba(255, 201, 60, 0.5); }
.ll-letter-glyph { font-size: clamp(2.4rem, 3.6vw, 4.2rem); font-weight: 1000; color: var(--gold); line-height: 1.1; text-shadow: 0 0 22px var(--gold-glow); }
.ll-choices { list-style: none; margin: 0; padding: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; inline-size: 100%; counter-reset: choice; }
.no-media .ll-choices { max-inline-size: 1000px; margin-inline: auto; }
.ll-choices li {
  background: linear-gradient(180deg, #1a3690, #102670); border: 2px solid rgba(255, 201, 60, 0.3); border-radius: var(--radius-sm);
  padding: 10px 14px; font-weight: 900; font-size: max(18px, clamp(1.1rem, 1.5vw, 1.6rem)); text-align: center; line-height: 1.35;
}
.ll-timer { border-color: rgba(52, 224, 207, 0.5); }
.ll-timer-n { font-size: clamp(2.4rem, 3.6vw, 4.2rem); font-weight: 1000; color: var(--team-b); line-height: 1.1; min-inline-size: 2ch; text-align: center; }
.ll-timer.is-done { border-color: var(--danger); }
.ll-timer-done { color: var(--danger); font-size: 1.3em; font-weight: 1000; }
.ll-timer-unit { color: var(--muted); }

.q-controls {
  display: flex; flex-direction: column; gap: 12px; flex: none;
  padding: clamp(12px, 1.1vw, 18px); border-radius: var(--radius-sm);
  background: rgba(3, 8, 36, 0.55); border: 1px solid var(--line-soft);
}
.lifelines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.lifeline-group {
  display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: var(--radius-sm);
  border: 2px dashed var(--line-soft); opacity: 0.55; min-inline-size: 0;
}
.lifeline-group.is-active { opacity: 1; border-style: solid; }
.lifeline-group:not(.is-active) .lifeline-owner::after { content: ' · ينتظر دوره'; font-weight: 700; color: var(--muted); }
.lifeline-group.team-a.is-active { border-color: var(--team-a); box-shadow: 0 0 22px -8px var(--team-a-glow); }
.lifeline-group.team-b.is-active { border-color: var(--team-b); box-shadow: 0 0 22px -8px var(--team-b-glow); }
.lifeline-owner { font-weight: 900; font-size: max(18px, 0.85em); overflow-wrap: anywhere; }
.lifeline-group.team-a .lifeline-owner { color: var(--team-a); }
.lifeline-group.team-b .lifeline-owner { color: var(--team-b); }
.lifeline-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-lifeline { font-size: max(18px, 0.85em); min-block-size: 2.5em; padding-inline: 0.8em; flex: 1 1 auto; }
.ll-icon { line-height: 1; }
/* Offered for most questions, but not this one (the answer is one character or a number). */
.btn-lifeline.is-na { opacity: 0.6; border-style: dashed; background: transparent; cursor: not-allowed; }
.btn-lifeline.is-na .ll-label { font-size: 0.85em; line-height: 1.25; text-align: center; }
/* Spent: a dimmed icon, not struck-through text (its name stays in the accessible label). */
.btn-lifeline.is-spent { flex: 0 0 auto; padding-inline: 0.7em; background: transparent; border-color: var(--line-soft); }
.btn-lifeline.is-spent .ll-label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.btn-lifeline.is-spent .ll-icon { filter: grayscale(1); opacity: 0.6; }
/* The waiting team: one quiet line — its name and which icons it still holds. */
.lifeline-group:not(.is-active) { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px 12px; padding-block: 4px; border-style: dashed; opacity: 1; }
.lifeline-group:not(.is-active) .lifeline-owner { color: var(--muted); }
.lifeline-group:not(.is-active) .lifeline-owner bdi { color: var(--text); }
.lifeline-group:not(.is-active) .lifeline-buttons { gap: 4px; flex-wrap: nowrap; }
.lifeline-group:not(.is-active) .btn-lifeline {
  flex: 0 0 auto; min-block-size: 0; padding: 0 0.45em; background: transparent; border: 0; opacity: 0.7; cursor: default; box-shadow: none;
}
.lifeline-group:not(.is-active) .ll-label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lifeline-group:not(.is-active) .btn-lifeline.is-spent { opacity: 0.35; }
.lifeline-group:not(.is-active) .btn-lifeline.is-spent .ll-icon { opacity: 1; }
.q-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; align-items: center; }
.q-actions-sub { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; align-items: center; flex-basis: 100%; }
.q-actions-sub .btn { font-size: max(18px, 0.85em); min-block-size: 2.5em; }
/* The call to action: its own centred row, bigger than everything around it. */
.btn-reveal { font-size: 1.5em; min-inline-size: min(100%, 11em); padding-inline: 1.4em; }
.is-revealed .q-actions [data-bench="close"] { order: 2; }

.award-bar { display: flex; flex-direction: column; gap: 8px; }
.award-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 18px; }
.award-title { text-align: center; font-weight: 1000; font-size: max(18px, 1.15em); line-height: 1.3; color: var(--gold-hi); text-shadow: 0 0 22px var(--gold-glow); }
.awards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1fr); gap: 10px; }
.btn-award {
  --tc: var(--line); --tc-glow: transparent;
  position: relative; flex-direction: column; gap: 0; line-height: 1.25; min-block-size: 3.6em; padding: 0.4em 0.6em;
  border-width: 3px; font-size: max(18px, clamp(1rem, 1.25vw, 1.4rem)); min-inline-size: 0;
}
.award-name {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font-weight: 900; overflow-wrap: anywhere; max-inline-size: 100%; line-height: 1.25;
  unicode-bidi: plaintext; /* a Latin name clamps at its own end, not its start */
}
.award-mark { margin-inline-end: 0.3em; }
@media (min-width: 1600px) { .award-name { -webkit-line-clamp: 3; } } /* a TV has the room: long team names keep their end */
.award-score-box { position: relative; display: grid; place-items: center; font-weight: 1000; font-size: 1.3em; line-height: 1.15; }
.award-score-box > .score-tick { font-size: inherit; line-height: inherit; }
.award-turn-tag { font-size: max(18px, 0.7em); font-weight: 700; opacity: 0.9; }
/* Unchosen: a neutral panel with only a team-coloured edge — nothing looks pre-selected. */
.award-a, .award-b { background: var(--panel); color: var(--text); border-color: var(--tc); }
.award-a { --tc: var(--team-a); --tc-glow: var(--team-a-glow); }
.award-b { --tc: var(--team-b); --tc-glow: var(--team-b-glow); }
.award-a .award-name, .award-b .award-name { color: var(--tc); }
.award-none { background: var(--panel); border-color: var(--line); }
.btn-award:not(.is-chosen) .award-mark { display: none; }
.btn-award.is-chosen .award-name, .btn-award.is-chosen .award-score-box { color: inherit; }
/* Once chosen, the result is decisive: the other two step back (still readable, still changeable). */
.awards.has-chosen .btn-award:not(.is-chosen) { background: transparent; border-color: var(--line-soft); color: var(--muted); opacity: 0.8; }
.awards.has-chosen .btn-award:not(.is-chosen) .award-name { color: var(--muted); }
.btn-award.is-chosen.award-a { background: var(--team-a); color: var(--team-a-ink); box-shadow: 0 0 36px var(--team-a-glow); }
.btn-award.is-chosen.award-b { background: var(--team-b); color: var(--team-b-ink); box-shadow: 0 0 36px var(--team-b-glow); }
.btn-award.is-chosen.award-none { background: var(--text); color: var(--stage-1); }
.btn-award.is-chosen:focus-visible { outline-color: var(--text); }
.btn-award.is-pulsing { animation: award-pulse 400ms ease-out; }
@keyframes award-pulse {
  0% { transform: scale(1); }
  30% { transform: scale(1.06); box-shadow: 0 0 0 4px var(--tc), 0 0 70px 8px var(--tc-glow); }
  100% { transform: scale(1); }
}
.award-status { text-align: center; font-weight: 800; color: var(--ok); line-height: 1.4; }
.btn.is-locked { border-style: dashed; box-shadow: none; }

.q-answer-block { display: flex; flex-direction: column; gap: 6px; }
.no-media .q-answer-block { align-items: center; text-align: center; }
.answer-label { color: var(--gold-hi); font-weight: 800; }
.answer {
  font-size: clamp(2.3rem, 3.4vw, 4.4rem); font-weight: 1000; line-height: 1.3; color: var(--gold); margin-block-end: 0.3em;
  text-shadow: 0 3px 0 #7a4a00, 0 0 34px var(--gold-glow);
  animation: answer-in 350ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes answer-in { from { opacity: 0; transform: translateY(0.3em) scale(0.96); } to { opacity: 1; transform: none; } }
/* Set by fx.settleAnswer when the host taps/keys through the entrance (or on a re-render that is not the reveal). */
.q-answer-block.is-settled .answer, .q-answer-block.is-settled .answer-sub { animation: none; }
.answer:focus { outline: none; }
/* English-first answers (countries, flags, brands, science terms): Latin headline, Arabic beneath. */
.answer-en { margin-block-end: 0; }
.answer-en.is-long { font-size: clamp(1.7rem, 2.3vw, 3rem); line-height: 1.25; }
.answer-sub {
  font-size: clamp(1.4rem, 2vw, 2.4rem); font-weight: 800; line-height: 1.3; color: var(--gold-hi); margin-block-end: 0.3em;
  animation: answer-in 350ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.explanation {
  font-size: max(18px, clamp(1.05rem, 1.3vw, 1.5rem)); font-weight: 600; line-height: 1.7; max-inline-size: 60ch;
  margin-block-start: 0.25em; padding-block-start: 0.55em;
  border-block-start: 2px solid transparent;
  border-image: linear-gradient(to left, rgba(255, 201, 60, 0.6), transparent 70%) 1;
}
.no-media .explanation { border-image: linear-gradient(to left, transparent, rgba(255, 201, 60, 0.6), transparent) 1; }
.no-media .explanation { max-inline-size: 52ch; }
.answer-label { font-size: max(18px, 0.9em); }
.also { color: var(--muted); font-size: max(18px, 0.9em); display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.no-media .also { justify-content: center; }
.also-label { font-weight: 800; }
.also-item { padding: 0 0.6em; border-radius: 999px; border: 1px solid var(--line); background: rgba(4, 10, 42, 0.5); color: var(--text); }

/* TV / laptop: the question is a full stage. Media ≈60% at the inline-end, the stem, lifelines,
   answer and award bar beside it at the inline-start (the right, in RTL). The controls never
   scroll away: only the text above them does, if it must. */
@media (min-width: 900px) and (min-aspect-ratio: 5/4), (max-height: 500px) and (orientation: landscape) {
  .modal { overflow: hidden; }
  .question-modal.has-media:not(.is-standalone) { block-size: calc(100dvh - 2 * var(--pad)); }
  .question-modal.no-media:not(.is-standalone) { inline-size: min(100%, 1400px); }
  .question-modal:not(.is-standalone) .q-stage { flex: 1 1 auto; min-block-size: 0; }
  .question-modal.has-media:not(.is-standalone) .q-stage {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: minmax(0, 1fr);
    grid-template-areas: 'side media';
  }
  .question-modal.has-media:not(.is-standalone) .q-media-col { grid-area: media; container-type: size; min-block-size: 0; }
  .question-modal.has-media:not(.is-standalone) .q-media { inline-size: min(100cqi, 160cqb); }
  .question-modal:not(.is-standalone) .q-side { grid-area: side; min-block-size: 0; flex: 1 1 auto; }
  .question-modal:not(.is-standalone) .q-content { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; padding-inline-end: 4px; }
  /* The column scrolls; its children never shrink to fit it (a clamped stem would otherwise collapse to nothing). */
  .question-modal:not(.is-standalone) .q-content > * { flex-shrink: 0; }
  /* safe vertical centring: centred when it fits, top-aligned (and scrollable) when it does not */
  .question-modal:not(.is-standalone) .q-content > :first-child { margin-block-start: auto; }
  .question-modal:not(.is-standalone) .q-content > :last-child { margin-block-end: auto; }
  .has-media .lifelines { grid-template-columns: 1fr; }
  .no-media .q-controls { inline-size: min(100%, 1100px); margin-inline: auto; }
  /* «رجوع للوحة» is the exit, not the show: the awards are the big buttons, and the dialog closes itself after one */
  .is-revealed .q-actions .btn-big { font-size: 1.05em; min-block-size: 2.6em; }
  .btn-reveal { font-size: 1.35em; }
}

/* A full-size TV (1080p and up): the stakes and the verdict are read from the sofa. The room
   comes from the text column's spare top padding. */
@media (min-width: 1200px) and (min-aspect-ratio: 5/4) and (min-height: 861px) {
  .q-title { font-size: 1.6rem; }
  .q-title .cat-emoji { font-size: 1.5em; }
  .q-points {
    font-size: clamp(1.6rem, 2.4vw, 2.8rem); padding: 0 0.6em;
    box-shadow: 0 0 0 2px rgba(255, 231, 163, 0.6), 0 0 34px var(--gold-glow);
  }
  .q-points .num { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); letter-spacing: 0.04em; }
  .q-turn { font-size: 1.4rem; padding: 6px 20px; }
  .q-turn strong { text-shadow: 0 0 18px var(--tc-glow); }
  .award-title { font-size: 2rem; }
  .awards { gap: 14px; }
  .question-modal.has-media:not(.is-standalone) .q-stage { grid-template-columns: minmax(0, 9fr) minmax(0, 11fr); }
  .btn-award { min-block-size: 3.9em; font-size: clamp(1.3rem, 1.8vw, 2.2rem); border-width: 4px; padding-block: 0.25em; }
  .award-name { font-size: 0.9em; }
  .award-score-box { font-size: 1.7em; line-height: 1.1; }
  .award-status { font-size: 1.15em; }
  .award-turn-tag { font-size: max(18px, 0.6em); }
  /* The longest questions must still fit beside the photo: the stem gives way to the four
     choices, and in reveal the dimmed question and answer tighten so «يُقبل أيضًا» stays whole. */
  .q-content:has(.ll-choices) .q-stem { font-size: clamp(1.6rem, 2vw, 2.4rem); line-height: 1.45; }
  .is-revealed .q-stem { line-height: 1.45; }
  .is-revealed .answer { margin-block-end: 0.15em; }
  .is-revealed .explanation { line-height: 1.6; }
}

/* Short landscape screens (720p TVs, 768px laptops): give the text column half the stage and
   tighten the controls so the answer and explanation keep their room above the award bar. */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) and (max-height: 860px) {
  .question-modal.has-media:not(.is-standalone) .q-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding-block: 12px; }
  .q-header { padding-block: 8px; }
  .q-controls { gap: 8px; padding: 10px; }
  .award-bar { gap: 6px; }
  .btn-award { min-block-size: 3em; padding-block: 0.25em; }
  .q-actions { flex-wrap: nowrap; }
  .q-actions .btn-big { font-size: 1.05em; padding-inline: 1.1em; }
  .is-revealed .q-stem { line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .answer { font-size: clamp(2rem, 3vw, 3rem); }
  .explanation { line-height: 1.5; }
  .also { font-size: 18px; gap: 4px 6px; }
  /* Lifeline results must fit on a 720p set: the waiting team shrinks to its name, the active
     team's three buttons share one row, and the stem gives way once a result is showing. */
  .lifeline-group:not(.is-active) .lifeline-buttons { display: none; }
  .has-media .lifeline-buttons { flex-wrap: nowrap; }
  .btn-lifeline { flex: 1 1 0; padding-inline: 0.4em; min-inline-size: 0; }
  .btn-lifeline.is-spent { flex: 0 0 auto; }
  .q-content:has(.q-lifeline-output) .q-stem { font-size: clamp(1.3rem, 1.8vw, 2rem); line-height: 1.4; }
  .q-lifeline-output { gap: 8px; }
  .ll-out { padding: 4px 14px; }
  .ll-letter-glyph, .ll-timer-n { font-size: clamp(1.8rem, 2.6vw, 2.6rem); }
  .ll-choices { padding: 6px; gap: 6px; }
  .ll-choices li { padding: 4px 10px; font-size: max(18px, 1.2rem); }
  .btn-reveal { font-size: 1.25em; }
  .q-actions { gap: 8px; }
  .q-actions-sub { gap: 8px; }
  /* what the answer screen can do without: its label (the gold headline says it), the «returning…» note (the
     dialog closes itself), and the waiting team's line once a lifeline result is on screen */
  .is-revealed .answer-label { display: none; }
  .btn-reveal { white-space: nowrap; flex: 0 0 auto; }
  .q-actions-sub { flex: 1 1 auto; flex-basis: auto; }
  .question-modal:has(.q-lifeline-output) .lifeline-group:not(.is-active) { display: none; }
}

/* Reveal: the answer is the point now. On a laptop or iPad (under 1000px tall) the picture steps back to a 40% column
   (it stays 16:10: masks and crops are fractions of the frame) and the text gets the rest; a full-size TV has room
   for both. Same selector weight as the layout rules above, so it wins. */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) and (max-height: 1000px) {
  .question-modal.has-media.is-revealed:not(.is-standalone) .q-stage { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}
@media (min-width: 900px) and (min-aspect-ratio: 5/4) and (min-height: 1001px) {
  .question-modal.has-media.is-revealed:not(.is-standalone) .q-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* The chosen button (team colour, score counting up) already says who got the points, and the dialog leaves by itself
   in 1.2 s: on a laptop or a TV the written line would only push the explanation out of the text column (a long team
   name wraps it to two lines). Still announced to screen readers; the «تراجع» strip repeats it in words. */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .is-revealed .award-status { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  /* the dialog closes itself 1.2 s after an award: its «returning…» note would only wrap the status onto a second line
     and push the answer's text out of view */
  /* a lifeline result must sit under the question without scrolling it away: tighter blocks, smaller numerals */
  .q-content:has(.q-lifeline-output) .q-stem { font-size: clamp(1.5rem, 2vw, 2.3rem); line-height: 1.4; }
  .ll-out { padding: 6px 14px; }
  .ll-letter-glyph, .ll-timer-n { font-size: clamp(2rem, 3vw, 3.4rem); }
  .ll-choices { padding: 4px; gap: 8px; }
  .ll-choices li { padding: 4px 12px; line-height: 1.3; }
  .q-content:has(.q-lifeline-output) { gap: 8px; }
  .q-content:has(.q-lifeline-output) .q-stem-en { margin-block-start: 0; }
  .no-media .q-content:has(.q-lifeline-output) .q-stem { max-inline-size: 46ch; }
}

/* The board on a laptop or an iPad on its side (under ~960px tall): the whole board and its scores in one screen,
   no scrolling mid-game. The scoreboard gives up its row of lifeline names (icons say the same) and some height. */
@media (min-width: 900px) and (max-height: 960px) {
  .scoreboard .chip-label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .scoreboard .chip { padding: 0 10px; }
  .scoreboard .lifeline-chips { flex-wrap: nowrap; margin-block-start: 0; }
  .scoreboard .chip.is-spent { text-decoration: none; }
  .team-card { padding-block: 6px 10px; }
  .team-score, .score-box > .score-tick { font-size: clamp(2.2rem, 5.4vh, 3.4rem); }
  .turn-brand { display: none; }
  .turn-team { font-size: clamp(1.4rem, 3.4vh, 2.4rem); }
  .col-title { block-size: clamp(60px, 9vh, 96px); }
  .tile { min-block-size: clamp(48px, 7.5vh, 124px); }
  .board-screen { gap: 10px; }
}

/* ---------- covered media (§5) ---------- */
.media-frame {
  /* A physical-coordinate island: image geometry is left/top, not inline-start. */
  direction: ltr;
  position: relative; inline-size: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-sm);
  background: #030822; border: 2px solid rgba(255, 201, 60, 0.35); container-type: inline-size; isolation: isolate;
  box-shadow: 0 0 60px rgba(40, 90, 255, 0.2), 0 16px 40px rgba(0, 2, 16, 0.6);
}
/* iOS: a long press on a photo opens a preview and Save menu showing the WHOLE file, which would give away a
   cropped, zoomed, masked or spotlit question to everyone watching the share. Nothing in the frame takes
   pointer events (the retry control is a separate button), and nothing can be selected or called out. */
.media-frame, .media-frame img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.media-frame img { pointer-events: none; -webkit-user-drag: none; }
/* A frame whose photo has not arrived yet shows a spinner on its dark ground (slow Wi-Fi), never an empty box. */
.media-frame:not(.is-laid-out)::after {
  content: ''; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 44px; block-size: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  border: 5px solid rgba(255, 231, 163, 0.25); border-block-start-color: var(--gold-hi); animation: spin 900ms linear infinite; z-index: 1; pointer-events: none;
}
.media-frame:has(.media-error)::after { display: none; }
.media-img {
  /* Layout box = the contain-fitted, centred image (the revealed state), set in px by obscure.js.
     The covered state is a transform of that box, so reveal is a single transition.
     No transition outside reveal: the covered view must be the FIRST frame painted — animating
     into it would flash the whole photo (the answer) every time a question opens. */
  position: absolute; left: 0; top: 0; inline-size: 100%; block-size: 100%; transform-origin: 0 0;
  visibility: hidden;
  transition: none;
}
.media-frame.is-revealing .media-img { transition: transform 450ms cubic-bezier(0.2, 0.7, 0.2, 1), filter 450ms ease; }
.media-frame.is-laid-out .media-img { visibility: visible; }
.media-frame.is-covered .media-img { transform: var(--cover-transform, none); filter: blur(var(--blur-px, 0px)); }
/* A neutral redaction: gold is for points and answers, not for what is hidden. */
.media-mask {
  position: absolute; opacity: 1; transition: opacity 350ms ease;
  background: repeating-linear-gradient(45deg, #0a1440 0 10px, #12205a 10px 20px); border: 1px solid rgba(255, 255, 255, 0.15);
}
.media-frame:not(.is-covered) .media-mask { opacity: 0; pointer-events: none; }
.media-veil { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 3px rgba(255, 201, 60, 0.35); border-radius: inherit; }
.media-frame:not(.is-covered) .media-veil { box-shadow: none; }
/* Spotlight / plain: covered = the revealed contain layout (no transform). Spotlight blurs the base
   from the first paint; the sharp .media-clear copies (clip-path set by obscure.js) are never blurred.
   Reveal melts only the base blur, then obscure.js drops the clear layers. */
.media-frame.method-spotlight.is-covered .media-img,
.media-frame.method-plain.is-covered .media-img { transform: none; }
.media-frame.method-plain.is-covered .media-img,
.media-frame.is-covered .media-img.media-clear { filter: none; }
.media-frame.method-spotlight.is-revealing .media-img { transition: filter 450ms ease; }
/* Letterbox backdrop: only in contain-fitted views (obscure.js never renders it behind a covered crop). */
.media-backdrop {
  /* Oversized (past the global img cap) so the blur's transparent fringe falls outside the frame. */
  position: absolute; inset: -25%; inline-size: 150%; block-size: 150%; max-inline-size: none; object-fit: cover;
  filter: blur(max(40px, 4cqi)) brightness(0.45) saturate(1.15); pointer-events: none; user-select: none;
}
.media-backdrop.is-entering { animation: media-backdrop-in 450ms ease both; }
@keyframes media-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
/* Text question reveal: the answer photo is stacked over the covered teaser and fades in (obscure.fadeIn),
   then the teaser is removed. Without a teaser it simply fades in over the empty stage. */
.q-media { position: relative; }
.media-frame.is-stacked { position: absolute; inset: 0; }
.media-frame.is-reveal-photo.is-entering { opacity: 0; }
.media-frame.is-reveal-photo.is-fading-in { transition: opacity 350ms ease; }

/* ---------- game over ---------- */
.gameover-screen { align-items: center; justify-content: center; text-align: center; gap: clamp(16px, 2vw, 32px); }
/* Centre the finale in the room; the footer link keeps to the bottom edge. */
.gameover-screen > .gameover-title { margin-block-start: auto; }
.gameover-screen > .setup-actions { margin-block-end: auto; }
.gameover-screen > .site-footer { margin-block-start: 0; }
.gameover-title { font-size: max(18px, clamp(1.4rem, 2vw, 2.2rem)); font-weight: 900; color: var(--muted); }
.winner-line {
  font-size: clamp(2.2rem, 4.6vw, 5rem); font-weight: 1000; line-height: 1.25; color: var(--gold);
  text-shadow: 0 4px 0 #7a4a00, 0 0 50px var(--gold-glow); overflow-wrap: anywhere;
}
.winner-line.result-tie { color: var(--team-b); text-shadow: 0 0 40px var(--team-b-glow); }
.final-scores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 40px); inline-size: min(100%, 1300px); align-items: center; }
.final-scores:not(.is-tie) { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.final-scores:not(.is-tie):has(.team-b.is-winner) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
.final-scores .team-card { padding-block: clamp(18px, 2vw, 34px); }
.team-card.is-winner {
  border-color: var(--gold); transform: translateY(-14px);
  box-shadow: 0 0 0 3px var(--gold), 0 0 90px rgba(255, 190, 50, 0.45), inset 0 0 60px -20px var(--gold-glow), var(--shadow);
}
.team-card.is-winner::after {
  content: ''; position: absolute; inset-inline: 10%; inset-block-end: -12px; block-size: 7px; border-radius: 999px;
  background: var(--gold); box-shadow: 0 0 24px 6px var(--gold-glow);
}
.team-card.is-winner { padding-block: clamp(26px, 3vw, 50px); }
.team-card.is-winner .team-name { font-size: clamp(1.4rem, 2.2vw, 2.4rem); }
.team-card.is-winner .team-score { font-size: clamp(4rem, 9vw, 10rem); line-height: 1.05; color: var(--gold-hi); }
.team-card.is-loser { opacity: 0.8; transform: scale(0.9); }
.team-card.is-loser .team-score { font-size: clamp(2.2rem, 3.6vw, 4rem); }
.crown { font-size: clamp(2rem, 3vw, 3.2rem); line-height: 1; margin-block-end: 4px; filter: drop-shadow(0 0 16px var(--gold-glow)); }
.team-card.is-crowned { animation: crowned 400ms cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes crowned { 0% { transform: translateY(20px) scale(0.92); } 45% { transform: translateY(-22px) scale(1.04); } 100% { transform: translateY(-14px); } }
.confetti { position: fixed; inset: 0; inline-size: 100vw; block-size: 100vh; max-inline-size: none; pointer-events: none; z-index: 0; }

/* ---------- standalone / attributions ---------- */
.standalone-note { color: var(--muted); text-align: center; }
.modal.is-standalone { inline-size: min(100%, 1200px); margin-inline: auto; max-block-size: none; overflow: visible; }
.is-standalone .q-media { max-inline-size: min(100%, 60vh * 1.6); margin-inline: auto; }
.is-standalone .q-stem { text-align: center; }
.attributions-screen { max-inline-size: 1100px; margin-inline: auto; }
.attr-header { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.attr-header h1 { font-size: clamp(2rem, 3.4vw, 3.4rem); font-weight: 1000; color: var(--gold); text-shadow: 0 3px 0 #7a4a00, 0 0 30px var(--gold-glow); }
.attr-count { font-weight: 800; color: var(--gold-hi); }
.attr-section { font-size: max(18px, 1.3em); font-weight: 900; color: var(--gold-hi); margin-block-start: 10px; display: flex; align-items: center; gap: 14px; }
.attr-section::after { content: ''; flex: 1; block-size: 2px; background: linear-gradient(to left, rgba(255, 201, 60, 0.5), transparent); }
.attr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.attr-row {
  /* 4,000+ rows: only the ones near the screen are laid out and painted (and so decoded), which keeps iOS well within its memory */
  content-visibility: auto; contain-intrinsic-size: auto 110px;
  display: flex; gap: 14px; align-items: flex-start; padding: 10px 14px; border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(22, 46, 130, 0.75), rgba(10, 24, 80, 0.8)); border: 1px solid var(--line-soft);
}
.attr-thumb { inline-size: 120px; block-size: 75px; object-fit: cover; border-radius: 8px; flex: none; background: var(--stage-0); border: 1px solid var(--line-soft); }
.attr-text { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; font-size: max(18px, 0.85em); }
.attr-title { font-weight: 800; overflow-wrap: anywhere; }
.attr-meta { color: var(--muted); overflow-wrap: anywhere; }
.attr-label { font-weight: 800; color: var(--text); }
/* touch screens: the source and licence links are tap targets (44px), not just text */
@media (pointer: coarse), (max-width: 720px) {
  .attr-title, .attr-meta a { display: inline-flex; align-items: center; min-block-size: 44px; }
  .attr-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0 6px; }
}
/* Latin values (author, modification note) sit as a block under their label, left-aligned. */
/* fit-content keeps a short value under its label (the start side); a long one wraps left-aligned. */
.attr-value[dir="ltr"], .attr-value:dir(ltr) { display: block; inline-size: fit-content; max-inline-size: 100%; text-align: left; }

/* ---------- stacked layouts: phones, iPad portrait, any narrow window ---------- */
/* Short landscape screens (a phone on its side) are NOT here: they get their own side-by-side layout at the end. */
@media (max-width: 899px) and (min-height: 501px), (max-aspect-ratio: 5/4) and (min-height: 501px) {
  .modal-backdrop { padding: 8px; }
  .modal { max-block-size: calc(100dvh - 16px); }
  .q-stem, .no-media .q-stem { font-size: 2rem; text-align: start; margin-inline: 0; }
  .no-media .q-stem { text-align: center; margin-inline: auto; }
  .is-revealed .q-stem, .no-media.is-revealed .q-stem { font-size: max(18px, 1rem); }
  .q-media { max-inline-size: min(100%, 52svh * 1.6); margin-inline: auto; }
  /* the picture steps back once the answer is up: a tablet's tall screen must not spend it all on the photo */
  .is-revealed .q-media { max-inline-size: min(100%, 30svh * 1.6); }
  /* a lifeline result needs room under the question: the picture gives some back */
  .question-modal:has(.q-lifeline-output) .q-media { max-inline-size: min(100%, 30svh * 1.6); }
  .q-stage { --sp: clamp(12px, 1.6vw, 28px); --sp-block: clamp(12px, 1.4vw, 24px); padding: var(--sp-block) var(--sp); }

  /* Question: the controls flow in the dialog, but «اكشف الإجابة» rides along the bottom edge. */
  .question-modal:not(.is-revealed) .q-controls { display: contents; }
  .question-modal:not(.is-revealed) .q-actions { display: contents; }
  .question-modal:not(.is-revealed) .lifelines { grid-template-columns: 1fr; padding: 8px; border-radius: var(--radius-sm); background: rgba(3, 8, 36, 0.55); border: 1px solid var(--line-soft); }
  .question-modal:not(.is-revealed) .btn-reveal {
    position: sticky; inset-block-end: 8px; z-index: 3; inline-size: 100%; font-size: 1.3em;
    box-shadow: 0 6px 0 var(--gold-deep), 0 0 0 8px #06103e, 0 -14px 26px 8px rgba(0, 2, 16, 0.7);
  }
  .question-modal:not(.is-revealed) .q-actions-sub { justify-content: center; }
  /* The waiting team is only a caption here; its buttons are inert anyway. */
  .lifeline-group:not(.is-active) .lifeline-buttons { display: none; }
  /* Reveal: the verdict bar and close stay docked at the bottom while the answer scrolls. */
  .is-revealed .q-controls {
    position: sticky; inset-block-end: 0; z-index: 3; gap: 8px; margin-inline: calc(-1 * var(--sp)); margin-block-end: calc(-1 * var(--sp-block));
    padding-block-end: 12px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: #06103e; box-shadow: 0 -12px 24px rgba(0, 2, 16, 0.6);
  }
  .is-revealed .award-status { font-size: 18px; line-height: 1.4; }
  .is-revealed .q-actions { flex-wrap: nowrap; }
  .is-revealed .q-actions .btn { flex: 1 1 0; min-inline-size: 0; padding-inline: 0.5em; font-size: 1.05em; }
}
@media (max-width: 720px) {
  .ll-choices { grid-template-columns: 1fr; }
  .team-inputs { grid-template-columns: 1fr; gap: 10px; }
  .versus { display: none; }
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cat-card { aspect-ratio: 1 / 1; padding: 10px; border-radius: var(--radius-sm); }
  .cover-emoji { font-size: 2.3em; margin-block-end: 30%; }
  .cat-name { font-size: 18px; line-height: 1.35; }
  .cat-group-label { font-size: 16px; }

  /* A compact score strip that stays on screen, so the plate pulse after an award is seen. */
  html { scroll-padding-block-start: 150px; }
  .scoreboard {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr) minmax(0, 0.9fr); gap: 6px; align-items: stretch;
    position: sticky; inset-block-start: 0; z-index: 4;
    margin-inline: calc(-1 * var(--pad)); padding: 6px var(--pad) 10px;
    background: rgba(4, 10, 42, 0.96); box-shadow: 0 10px 24px rgba(0, 2, 16, 0.55);
  }
  .scoreboard .lifeline-chips { display: none; }
  .turn-brand { display: none; }
  /* one strip: score A · whose turn (and the button) · score B */
  .turn-indicator { gap: 0; padding: 4px 6px; border-radius: var(--radius-sm); }
  .turn-label { font-size: 16px; line-height: 1.2; }
  .turn-team { font-size: 1.15rem; line-height: 1.2; }
  .btn-turn { margin: 0; min-block-size: 44px; padding: 0 0.4em; font-size: 16px; white-space: nowrap; }
  .team-card { padding: 4px 8px 6px; }
  .team-card.is-turn::after { inset-block-end: -6px; block-size: 4px; }
  .team-name { font-size: 18px; }
  .team-score { font-size: 1.8rem; }
  .score-box > .score-tick { font-size: 1.8rem; }
  .chip { padding: 0 8px; }
  .chip-label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .lifeline-chips { gap: 6px; }
  .score-adjust { gap: 4px; margin-block: 2px 0; }
  .btn-adjust { min-inline-size: 44px; padding: 0 6px; font-size: 16px; }

  .board-grid { grid-template-columns: 1fr; gap: 12px; }
  .col { gap: 6px; }
  .col-title { block-size: auto; min-block-size: 58px; align-items: center; justify-content: flex-start; padding: 8px 12px; text-align: start; }
  .col-title .cover { font-size: 0.8em; }
  .col-title .cover .cover-emoji, .col-title .cover.has-photo .cover-emoji { margin: 0; position: absolute; inset-inline-end: 12px; inset-block-start: 50%; translate: 0 -50%; font-size: 1.4em; background: none; border: 0; inline-size: auto; block-size: auto; }
  .col-title .cover::after { background: linear-gradient(to left, rgba(3, 8, 36, 0.9) 0%, rgba(3, 8, 36, 0.55) 60%, rgba(3, 8, 36, 0.2)); }
  .col-name { padding-inline-end: 2.2em; }
  .col-tiles { flex-direction: row; gap: 6px; }
  .tile { min-block-size: 56px; font-size: 1.3rem; min-inline-size: 0; }
  .tile-mark { inset-block-start: 1px; inset-inline-end: 2px; font-size: 15px; inline-size: 1.2em; block-size: 1.2em; border: 0; background: none; }

  .q-header { padding: 10px 12px; }
  .q-stage { padding: 12px; }
  .q-controls { padding: 10px; }
  .lifelines { grid-template-columns: 1fr; }
  .lifeline-group { padding: 6px 8px; }
  .lifeline-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .btn-lifeline { flex-direction: column; gap: 0; padding: 0.3em 0.25em; min-block-size: 3.4em; line-height: 1.2; font-size: 18px; }
  /* One row of three: the verdict and «رجوع للوحة» fit on a phone screen together. */
  .awards { grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr) minmax(0, 1fr); gap: 6px; }
  .btn-award { flex-direction: column; justify-content: center; min-block-size: 3.4em; padding: 0.2em 0.3em; font-size: 18px; }
  .award-turn-tag { display: none; }
  .award-title { font-size: 1.15em; }
  .award-bar { gap: 4px; }
  .q-actions .btn { flex: 1 1 auto; }
  .q-actions { gap: 8px; }
  .q-actions-sub { gap: 8px; flex-wrap: nowrap; }
  .q-actions-sub .btn { padding-inline: 0.6em; min-inline-size: 0; }
  .final-scores, .final-scores:not(.is-tie), .final-scores:not(.is-tie):has(.team-b.is-winner) { grid-template-columns: 1fr; gap: 26px; }
  .team-card.is-loser { transform: none; }
  .team-card.is-winner .team-score { font-size: 4rem; }
  .team-card.is-winner { transform: none; }
  @keyframes crowned { 0% { transform: scale(0.92); } 45% { transform: scale(1.04); } 100% { transform: none; } }
  .attr-row { flex-direction: column; }
  .attr-thumb { inline-size: 144px; block-size: 90px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; scroll-behavior: auto !important; }
  .answer, .answer-sub { animation: none; }
  /* a 1ms infinite spin would strobe: the ring just sits there */
  .spinner, .btn[aria-busy="true"]::before, .tile[aria-busy="true"]::before, .media-frame:not(.is-laid-out)::after { animation: none; }
}

/* ---------- category completion (setup cards) ---------- */
/* Bottom corner opposite the name (the emoji owns the top corner, the pick order the other). */
.cat-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cat-progress {
  flex: none; padding: 0.1em 0.55em; border-radius: 999px; font-weight: 900; font-size: max(17px, 0.95em); line-height: 1.35;
  background: rgba(4, 10, 42, 0.8); color: var(--gold-hi); border: 1px solid rgba(255, 201, 60, 0.45);
}
.cat-progress-bar {
  position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 2; block-size: 5px;
  background: rgba(4, 10, 42, 0.6);
}
.cat-progress-bar::after {
  content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: var(--pct, 0%);
  background: linear-gradient(to left, var(--gold-hi), var(--gold));
}

/* Recovery controls stay visible over the covered media and work with keyboard focus. */
.media-error { position: absolute; inset: 0; z-index: 10; display: grid; place-content: center; padding: 1rem; text-align: center; background: #040a2a; direction: rtl; }
.storage-notice { padding: .75rem 1rem; margin: 0; text-align: center; color: #fff; background: #463000; }
.privacy-screen { max-width: 50rem; margin-inline: auto; }

/* ---------- English translation lines (question + choices) ---------- */
/* One step down from the Arabic, but never small: a shared screen is compressed to ~60%, so from 900px wide
   nothing a viewer must read is under 20px. The line is dir=ltr, so it is aligned to the Arabic's edge
   explicitly (the right) rather than to its own "start". */
.q-stem-en {
  display: block; margin-block-start: 0.35em; font-size: max(17px, clamp(1rem, 1.2vw, 1.45rem)); font-weight: 700;
  line-height: 1.45; color: var(--muted); text-wrap: balance; unicode-bidi: isolate; text-align: right;
}
.no-media .q-stem-en { text-align: center; margin-inline: auto; max-inline-size: 48ch; }
.is-revealed .q-stem-en { font-size: max(17px, clamp(0.95rem, 1.05vw, 1.2rem)); }
.ll-choices li .choice-ar { display: block; }
.ll-choices li .choice-en { display: block; margin-block-start: 0.15em; font-size: max(16px, 0.75em); font-weight: 700; color: var(--muted); unicode-bidi: isolate; }
@media (min-width: 900px) {
  .q-stem-en { font-size: max(20px, clamp(1.15rem, 1.4vw, 1.6rem)); }
  .is-revealed .q-stem-en { font-size: max(18px, clamp(1rem, 1.1vw, 1.25rem)); }
  .explanation { font-size: max(20px, clamp(1.05rem, 1.3vw, 1.5rem)); font-weight: 600; }
}

/* ---------- a phone on its side (short landscape) ---------- */
/* No scrolling to reach the buttons: picture and text side by side, the controls docked under the text,
   one slim header, a one-strip scoreboard. Placed last so it wins over the phone and narrow blocks. */
@media (max-height: 500px) and (orientation: landscape) {
  .modal-backdrop { padding: 6px; }
  .question-modal:not(.is-standalone) { block-size: calc(100dvh - 12px); max-block-size: calc(100dvh - 12px); }
  .question-modal.no-media:not(.is-standalone) { inline-size: min(100%, 900px); }
  .q-header { flex-wrap: nowrap; padding: 4px 12px; gap: 8px; }
  .q-title { font-size: 1.15rem; gap: 8px; }
  .q-points { font-size: 1.15rem; }
  .q-turn { font-size: 18px; padding: 0 12px; }
  .q-stage { padding: 8px 12px; gap: 12px; }
  /* Picture and text side by side; the controls are ONE bar under both (the text gets the height, not the buttons).
     The picture is as big as the height allows (16:10, never more than about half the width). */
  .question-modal:not(.is-standalone) .q-side { display: contents; }
  .question-modal.has-media:not(.is-standalone) .q-stage {
    grid-template-columns: minmax(0, 1fr) minmax(0, min(52%, calc(1.6 * (100dvh - 168px)))); grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: 'side media' 'ctrl ctrl'; gap: 8px 12px;
  }
  .question-modal:not(.is-standalone) .q-content { grid-area: side; }
  .question-modal:not(.is-standalone) .q-controls { grid-area: ctrl; }
  .question-modal.no-media:not(.is-standalone) .q-stage { gap: 8px; }
  .q-stem, .no-media .q-stem { font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.45; text-align: start; margin-inline: 0; max-inline-size: none; }
  .no-media .q-stem { text-align: center; margin-inline: auto; font-size: clamp(1.5rem, 3.2vw, 2.3rem); }
  .q-stem-en, .is-revealed .q-stem-en { font-size: 17px; margin-block-start: 0; }
  .q-content { gap: 6px; }
  .is-revealed .q-stem, .no-media.is-revealed .q-stem { font-size: 18px; }
  /* the answer screen is the answer: the question was just read out, so it gives its room to the explanation */
  .is-revealed .q-stem, .is-revealed .q-stem-en, .is-revealed .answer-label { display: none; }
  .answer { font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.2; margin-block-end: 0.05em; }
  .answer-sub { font-size: clamp(1.1rem, 2.2vw, 1.4rem); line-height: 1.2; margin-block-end: 0.05em; }
  .explanation { font-size: 18px; line-height: 1.4; margin-block-start: 0; padding-block-start: 0.2em; }
  .also { font-size: 16px; gap: 2px 6px; }
  .also-item { padding-block: 0; }
  /* a lifeline result takes the stem's English line's place: the question and the result must both be on screen */
  .q-content:has(.q-lifeline-output) .q-stem { font-size: 1.15rem; }
  .q-content:has(.q-lifeline-output) .q-stem-en, .ll-choices li .choice-en { display: none; }
  .ll-out { padding: 2px 10px; gap: 8px; }
  .ll-letter-glyph, .ll-timer-n { font-size: 1.6rem; }
  .ll-choices { padding: 2px; gap: 6px; }
  .ll-choices li { padding: 2px 8px; font-size: 18px; }

  /* The controls bar: one row, [lifelines | reveal | turn | cancel] while asked, [verdict | close] after. */
  .q-controls { flex-direction: row; flex-wrap: wrap; align-items: stretch; padding: 6px 8px; gap: 6px; }
  .lifelines { grid-template-columns: 1fr; flex: 3 1 300px; min-inline-size: 0; }
  .lifeline-group:not(.is-active), .lifeline-owner { display: none; }
  .lifeline-group { padding: 4px; }
  .lifeline-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .btn-lifeline { flex-direction: column; gap: 0; padding: 2px 2px; min-block-size: 44px; line-height: 1.15; font-size: 16px; }
  .btn-lifeline.is-spent { padding-inline: 2px; }
  .q-actions { flex: 2 1 360px; flex-wrap: nowrap; gap: 6px; align-items: stretch; }
  .btn-reveal { font-size: 1.1em; min-block-size: 44px; flex: 1 1 auto; min-inline-size: 7.5em; white-space: nowrap; padding-inline: 0.8em; }
  .q-actions-sub { flex: 0 1 auto; flex-basis: auto; gap: 6px; flex-wrap: nowrap; }
  .q-actions-sub .btn { min-block-size: 44px; padding-inline: 0.5em; font-size: 16px; line-height: 1.15; min-inline-size: 0; }
  .award-bar { flex: 3 1 330px; gap: 2px; }
  .award-head { gap: 0 10px; }
  .award-title, .is-revealed .award-status { font-size: 17px; line-height: 1.3; }
  .awards { grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr) minmax(0, 1fr); gap: 6px; }
  .btn-award { flex-direction: column; justify-content: center; min-block-size: 50px; padding: 0.1em 0.3em; font-size: 18px; border-width: 2px; }
  .award-turn-tag { display: none; }
  .award-score-box { font-size: 1.05em; }
  .is-revealed .q-actions { flex: 1 1 130px; flex-wrap: nowrap; align-self: end; }
  .is-revealed .q-actions .btn { flex: 1 1 100%; min-block-size: 44px; font-size: 1.05em; }
  .key-hint { display: none; }

  /* The board: a one-strip scoreboard (score · turn · score), short column titles, tap-sized tiles. */
  .app { padding-block: 6px; }
  .screen { min-block-size: 0; gap: 8px; }
  .scoreboard { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: 8px; }
  .scoreboard .lifeline-chips, .turn-brand { display: none; }
  .team-card { flex-direction: row; justify-content: space-between; gap: 10px; padding: 4px 12px 6px; }
  .team-name { font-size: 18px; text-align: start; }
  .team-score { font-size: 1.7rem; }
  .score-box > .score-tick { font-size: 1.7rem; }
  .turn-indicator { flex-direction: row; flex-wrap: wrap; gap: 0 10px; padding: 2px 10px; }
  .turn-label { font-size: 17px; }
  .turn-team { font-size: 1.2rem; }
  .btn-turn { margin: 0; min-block-size: 44px; padding: 0 0.7em; font-size: 17px; }
  /* every title the same height, so the six columns' tiles line up; a name that needs a third line is cut with an ellipsis */
  .col-title { block-size: 46px; padding: 3px 6px; font-size: 16px; line-height: 1.15; }
  .col-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .col-title .cover-emoji { display: none; }
  .tile { min-block-size: 40px; font-size: 1.4rem; }
  .col, .col-tiles { gap: 6px; }
  .board-grid { gap: 6px; }
}