/* =========================================================================
   TheQnA — stylesheet
   Same visual identity as the original prototype, restructured so it can be
   maintained: sectioned, formatted, and written with logical properties
   (inline-start/end) so the entire layout mirrors correctly in Arabic.
   ========================================================================= */

/* ---------- Tokens ---------- */
:root {
  /* PRIMARY — the gradient from the reference: pinky purple into violet,
     H 292° → 274°, running diagonally with a wave edge where it meets white.

     Two versions, because one gradient can't do both jobs. The reference
     stops (#EA63FD → #9418F2) only give white text 2.73:1 at the pink end,
     so those live in --grad-display, for decoration with no text on it.
     --grad-brand walks the same hue path a few steps deeper so white copy
     clears AA from end to end. */

  --grad-from: #c02cd9;       /* pinky purple — white on it: 4.56 */
  --grad-to:   #7c10c6;       /* deep violet  — white on it: 7.65 */
  --grad-brand: linear-gradient(135deg, var(--grad-from) 0%, var(--grad-to) 100%);
  --grad-display: linear-gradient(135deg, #ea63fd 0%, #9418f2 100%);

  --violet: #8b3fd9;          /* the flat stand-in: 5.51:1 on white */
  --violet-mid: #a636d9;      /* halfway between --violet and --grad-from */

  --violet-strong: #7429c4;
  --violet-bright: #c868f8;   /* fills and glows only */

  /* SECONDARY — white does the reading surface */
  --white: #fff;
  --paper: #fff;
  --ink: #1b0b3d;             /* deep violet-navy: text and structure */
  --ink-2: #2c1559;
  --muted: #5c5772;
  --line: rgba(27, 11, 61, .12);
  --tint-1: #f9f4fe;
  --tint-2: #f0e3fd;
  --tint-3: #ddc6fa;

  /* The board is deliberately neutral. The keys are a translucent wash of ink
     over the white board rather than a flat grey, so they sit on the page
     instead of on top of it. Purple shows up in exactly one place there — the
     name bar under each picture.

     Translucent keys can't carry white numerals: at 8% ink the fill is
     #EFEEF1 and white measures 1.16:1. So the numerals are ink, which is how
     a light board does it anyway. */
  --key: rgba(27, 11, 61, .08);
  --key-hover: rgba(27, 11, 61, .16);
  --key-ink: #1b0b3d;         /* on the key fill: 15.3:1 */
  --key-done: rgba(27, 11, 61, .035);
  --key-done-ink: #6f6a80;    /* answered — clearly spent, tick still legible */
  --key-panel: rgba(27, 11, 61, .045);

  /* Two colours only: the gradient and white. --violet-pale is the one step
     of daylight between them, for a highlight that has to read on purple. */
  --violet-pale: #efc8ff;     /* 3.12:1 on the light gradient end — large text only */

  --success: #d8f0dd;
  --success-ink: #1f5c33;
  --danger: #fbe0d8;
  --danger-ink: #8a3520;

  --shadow: 0 24px 80px rgba(27, 11, 61, .18);
  --radius: 24px;

  --font-display: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: var(--font-display);
}

/* The page itself is the gradient. White sections sit on top of it, joined
   by the wave edge from the reference. */
.wave-band {
  position: relative;
  background: #fff;
}
.wave-band::before,
.wave-band::after {
  content: "";
  position: absolute; inset-inline: 0;
  height: 54px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 54' preserveAspectRatio='none'><path d='M0 30 C 240 0 420 54 720 32 C 1020 10 1220 54 1440 22 L1440 54 L0 54 Z' fill='%23ffffff'/></svg>") no-repeat center / 100% 100%;
  pointer-events: none;
}
.wave-band::before { inset-block-start: -53px; }
.wave-band::after  { inset-block-end: -53px; transform: scaleY(-1); }
.wave-band + .wave-band::before { display: none; }

/* Arabic swaps the type stack; everything else is shared */
html[lang="ar"] {
  --font-display: "IBM Plex Sans Arabic", "Noto Kufi Arabic", Inter, system-ui, sans-serif;
  --font-body: var(--font-display);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--grad-brand) fixed;
  background-color: var(--grad-to);
}

button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 2px;
  border-radius: 6px;
}

.hidden { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Arabic headlines don't take negative tracking well */
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3 { letter-spacing: 0; line-height: 1.25; }

/* ---------- Buttons ---------- */
.btn {
  border: 0;
  border-radius: 14px;
  padding: 13px 18px;
  font-weight: 800;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.btn:hover { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

.btn-small { padding: 11px 16px; border-radius: 12px; }
.btn-large { padding: 16px 22px; }
.btn-primary { background: #fff; color: var(--grad-to); box-shadow: 0 12px 28px rgba(27, 11, 61, .25); }
.wave-band .btn-primary { background: var(--violet); color: #fff; }
.btn-primary:hover { background: var(--tint-1); }
.wave-band .btn-primary:hover { background: var(--violet-strong); }
.btn-ghost { background: transparent; border: 1px solid currentColor; opacity: .85; }
.wave-band .btn-ghost { border-color: var(--line); opacity: 1; }
.btn-light { background: #fff; color: var(--grad-to); }
.btn-success { background: var(--success); color: var(--success-ink); }
.btn-danger { background: var(--danger); color: var(--danger-ink); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.full { width: 100%; }

/* ---------- Team identity (never colour alone) ---------- */
.team-badge {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 7px;
  font-size: 11px; font-weight: 900;
  background: var(--violet); color: #fff;
  margin-inline-end: 8px;
  vertical-align: middle;
  flex: 0 0 auto;
}
.team-badge.team-b { background: var(--ink); color: #fff; }

/* ---------- Topbar ---------- */
.topbar {
  height: 84px;
  padding-inline: clamp(20px, 4vw, 68px);
  display: flex; align-items: center; gap: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  background: var(--grad-brand);
  position: sticky; top: 0; z-index: 20;
  color: #fff;
}
.brand {
  display: inline-flex; align-items: center; gap: 11px;
  font-weight: 850; letter-spacing: -.04em; font-size: 22px;
}
html[lang="ar"] .brand { letter-spacing: 0; }
.brand-mark {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 11px;
  background: #fff; color: var(--grad-to); font-weight: 900;
}
.nav-links { display: flex; gap: 26px; margin-inline-start: auto; font-size: 14px; font-weight: 650; }
/* The nav already takes the slack with margin-inline-start:auto — a second
   auto margin here would get nothing, so the account bar just sits after it. */
.nav-links a { color: #fff; }
.nav-links a:hover { text-decoration: underline; }


/* ---------- Hero ---------- */
.hero {
  min-height: 700px;
  padding: 88px clamp(20px, 5vw, 84px) 110px;
  color: #fff;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(440px, .95fr);
  gap: 6vw; align-items: center; position: relative;
}
.hero::before {
  content: "";
  position: absolute; inset-block-start: -120px; inset-inline-end: 22%;
  width: 440px; height: 440px;
  background: #ea63fd; filter: blur(140px); opacity: .5;
}
.hero-copy, .hero-board { position: relative; z-index: 1; }

.eyebrow, .kicker {
  font-size: 12px; font-weight: 900;
  letter-spacing: .14em; text-transform: uppercase;
}
html[lang="ar"] .eyebrow, html[lang="ar"] .kicker { letter-spacing: 0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3);
  padding: 9px 12px; border-radius: 999px; color: #fff;
}
.live-dot {
  width: 8px; height: 8px; border-radius: 99px;
  background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .28);
}
.kicker { color: var(--violet); }

h1 {
  font-size: clamp(48px, 6vw, 88px);
  line-height: .95; letter-spacing: -.07em;
  margin: 28px 0 26px; max-width: 820px;
}
h1 span, h1 .accent { color: var(--violet-pale); }
.hero-lede { font-size: 18px; line-height: 1.65; max-width: 620px; color: #fff; }
.hero-actions { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }
.microcopy { font-size: 13px; color: #fff; opacity: .95; margin-top: 16px; }

.hero-board {
  background: rgba(20, 6, 48, .5); border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 30px; backdrop-filter: blur(6px);
  padding: 18px; box-shadow: var(--shadow);
  transform: rotate(1.6deg);
}
html[dir="rtl"] .hero-board { transform: rotate(-1.6deg); }
.board-glow { position: absolute; inset: 25% 15%; background: var(--violet-bright); filter: blur(70px); opacity: .5; }
.mini-scorebar {
  position: relative; z-index: 1; color: #fff;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; padding: 5px 2px 16px;
}
.mini-scorebar div { display: flex; align-items: center; gap: 8px; }
.round-pill { background: rgba(255, 255, 255, .1); padding: 6px 9px; border-radius: 999px; }
.mini-board { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; }
.mini-col { display: grid; gap: 7px; }
.mini-col span {
  height: 54px; color: #fff;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  text-align: center; font-size: 9px; font-weight: 800; padding: 6px;
}
.mini-col b {
  height: 54px; display: grid; place-items: center;
  background: #fff; color: var(--grad-to); font-size: 16px; border-radius: 9px;
}
.mini-col b.used { background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .35); }

.now-playing { position: relative; z-index: 1; background: #fff; border-radius: 18px; margin-top: 12px; padding: 18px; }
.now-playing > div:first-child { display: flex; justify-content: space-between; align-items: center; }
.now-playing span { font-size: 10px; font-weight: 900; color: var(--grad-to); letter-spacing: .12em; }
.now-playing strong { width: 38px; height: 38px; border: 3px solid var(--grad-to); border-radius: 50%; display: grid; place-items: center; font-size: 13px; }
.now-playing p { font-size: 14px; font-weight: 750; line-height: 1.45; margin: 12px 0 17px; }
.answer-bars { display: flex; gap: 8px; }
.answer-bars i { display: block; height: 8px; border-radius: 99px; background: #e8eaf0; flex: 1; }

/* ---------- Stats ---------- */
.stats-strip {
  padding-inline: clamp(20px, 5vw, 84px);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.stats-strip div { padding: 40px 28px; border-inline-end: 1px solid var(--line); }
.stats-strip div:last-child { border-inline-end: 0; }
.stats-strip strong { display: block; font-size: 36px; letter-spacing: -.05em; }
.stats-strip span { font-size: 13px; color: var(--muted); font-weight: 650; }

/* ---------- Sections ---------- */
.section { padding: 100px clamp(20px, 5vw, 84px); }
.section-heading { max-width: 820px; margin-bottom: 48px; }
.section-heading h2 { font-size: clamp(38px, 5vw, 66px); line-height: 1.02; letter-spacing: -.055em; margin: 14px 0; }
.section-heading p { color: var(--muted); font-size: 17px; line-height: 1.6; }
#how { color: #fff; padding-block: 130px; }
#how .kicker { color: #fff; }
#how .section-heading p { color: #fff; }
.wave-band .kicker { color: var(--violet); }

.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.step-card {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 22px; padding: 28px; min-height: 240px;
  backdrop-filter: blur(6px);
}
.step-card > span { font-size: 12px; font-weight: 900; color: #fff; }
.step-card h3 { font-size: 22px; letter-spacing: -.035em; margin: 48px 0 12px; }
.step-card p { color: #fff; line-height: 1.6; font-size: 14px; }

.split-heading { max-width: none; display: flex; align-items: end; justify-content: space-between; gap: 60px; }
.split-heading p { max-width: 460px; }
.category-showcase { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.showcase-card {
  border: 1px solid var(--line); border-radius: 22px; padding: 22px;
  min-height: 200px; display: flex; flex-direction: column; justify-content: space-between;
  transition: transform .2s;
}
.showcase-card:hover { transform: translateY(-3px); }
.showcase-icon { font-size: 30px; }
.showcase-card small { font-size: 10px; font-weight: 900; letter-spacing: .1em; color: var(--muted); }
.showcase-card h3 { font-size: 22px; letter-spacing: -.035em; margin: 8px 0 6px; }
.showcase-card p { font-size: 13px; line-height: 1.5; color: var(--muted); }
.showcase-card:nth-child(4n+1) { background: var(--tint-1); }
.showcase-card:nth-child(4n+2) { background: var(--tint-3); }
.showcase-card:nth-child(4n+3) { background: var(--tint-2); }
.showcase-card:nth-child(4n+4) { background: var(--tint-1); }
.center-btn { display: block; margin: 30px auto 0; }

.feature-band {
  margin: 60px clamp(20px, 4vw, 64px);
  padding: 64px; border-radius: 34px;
  background: var(--grad-display); color: #fff;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 70px;
}
.feature-band .kicker { color: #fff; }
.feature-band h2 { font-size: clamp(36px, 5vw, 62px); line-height: 1.02; letter-spacing: -.055em; margin: 14px 0 22px; }
.feature-copy p { max-width: 540px; color: #fff; line-height: 1.65; font-size: 17px; }
.feature-copy .btn { margin-top: 22px; }
.steal-visual { display: flex; align-items: center; gap: 28px; background: #fff; color: var(--ink); border-radius: 28px; padding: 34px; }
.timer-ring {
  width: 130px; height: 130px; flex: 0 0 130px;
  border: 10px solid var(--tint-2); border-block-start-color: var(--violet);
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.timer-ring span { font-size: 48px; letter-spacing: -.06em; font-weight: 900; line-height: .9; }
.timer-ring small { font-size: 9px; font-weight: 900; color: var(--muted); letter-spacing: .1em; }
.steal-copy > span { font-size: 10px; font-weight: 900; color: var(--violet); letter-spacing: .1em; }
.steal-copy strong { display: block; font-size: 26px; margin-top: 6px; }
.steal-copy p { font-size: 14px; color: var(--muted); line-height: 1.5; }

.faq-section { color: var(--ink); }
.faq-list { max-width: 900px; }
.faq-list details { border-top: 1px solid var(--line); padding: 21px 0; }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { font-size: 19px; font-weight: 800; cursor: pointer; }
.faq-list p { color: var(--muted); line-height: 1.6; max-width: 720px; }

footer {
  margin: 40px clamp(20px, 5vw, 84px) 0;
  border-top: 1px solid rgba(255, 255, 255, .2);
  color: #fff;
  padding: 44px 0 58px;
  display: flex; align-items: center; justify-content: space-between;
  color: var(--muted); font-size: 13px; gap: 20px; flex-wrap: wrap;
}
.footer-brand { color: #fff; }

/* =========================================================================
   Game app
   ========================================================================= */
/* The game lives in the page, between the stats strip and "how it works".
   It is a section, not an overlay — one document, one scrollbar. */
.play-section {
  background: #fff;
  border-block: 1px solid var(--line);
  scroll-margin-top: 92px;          /* clears the sticky topbar when scrolled to */
  padding-block: 56px;
}

/* Playing: the section takes the viewport and the page stops moving.
   A knocked tablet must not shift the board mid-question. */
body.playing { overflow: hidden; }
.play-section.locked {
  position: fixed; inset: 0; z-index: 90;
  margin: 0; padding: 0;
  border: 0; border-radius: 0;
  height: 100dvh;
  display: flex; flex-direction: column;
  overscroll-behavior: contain;
}
/* The wave edge has no job while the frame is locked */
.play-section.locked::before,
.play-section.locked::after { display: none; }
.play-section.locked .play-header {
  width: 100%; max-width: none; margin: 0;
  min-height: clamp(62px, 8.4vh, 88px);
  padding: 12px clamp(16px, 2.5vw, 34px);
  background: var(--grad-brand);
  color: #fff;
  border: 0;
  align-items: center;
  flex: 0 0 auto;
}
.play-section.locked .play-header .kicker { color: #fff; }
.icon-btn {
  width: 38px; height: 38px;
  border: 1px solid var(--line); border-radius: 11px;
  background: #fff; color: var(--ink);
  font-size: 17px; line-height: 1;
  display: grid; place-items: center;
}
.play-section.locked #fullscreen {
  background: rgba(255, 255, 255, .16); color: #fff;
  border-color: rgba(255, 255, 255, .4);
}
.play-section.locked #fullscreen:hover { background: rgba(255, 255, 255, .3); }
.play-section.locked #leave-play { color: #fff; border-color: rgba(255, 255, 255, .45); }
.play-section.locked #leave-play:hover { background: rgba(255, 255, 255, .16); }
.play-section.locked .play-header h2,
.play-section.locked .play-header .kicker { display: none; }
.play-section.locked #leave-play { margin-inline-start: auto; }
.play-section.locked .game-screen.active {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
}
.play-section.locked .game-container {
  flex: 1; min-height: 0;
  width: 100%; max-width: none;
  display: flex; flex-direction: column;
  padding: clamp(8px, 1.1vh, 15px) clamp(12px, 1.8vw, 32px) clamp(10px, 1.6vh, 22px);
}
/* Setup, picker and results still read better in a column */
.play-section.locked [data-screen="setup"] .game-container,
.play-section.locked [data-screen="results"] .game-container { max-width: 760px; margin-inline: auto; }
/* Setup and the picker can still scroll inside the locked frame */
.play-section.locked [data-screen="setup"] .game-container,
.play-section.locked [data-screen="categories"] .game-container,
.play-section.locked [data-screen="results"] .game-container { overflow-y: auto; }
/* The board never scrolls — it is sized to fit */
.play-section.locked [data-screen="board"] .game-container { overflow: hidden; }
.play-header {
  width: min(94%, 1240px);
  margin-inline: auto;
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
}
.play-header h2 {
  font-size: clamp(30px, 4vw, 46px);
  letter-spacing: -.05em; margin: 8px 0 0;
}
.game-screen { display: none; }
.game-screen.active { display: block; }
.game-container { width: min(94%, 1240px); margin-inline: auto; padding-block: 32px; }
.game-container.narrow { max-width: 760px; }
.game-container.wide { max-width: 1320px; }
.game-container h2 { font-size: clamp(30px, 4vw, 48px); letter-spacing: -.055em; line-height: 1.04; margin: 14px 0; }
.game-intro { font-size: 17px; color: var(--muted); line-height: 1.6; max-width: 640px; }

/* Setup */
.team-input-grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; margin: 44px 0; }
.team-input { background: #fff; border: 2px solid transparent; border-radius: 22px; padding: 22px; display: block; }
.team-input.team-a { border-color: var(--violet); }
.team-input.team-b { border-color: var(--ink); }
.team-input > span { font-size: 10px; font-weight: 900; letter-spacing: .1em; color: var(--muted); display: flex; align-items: center; }
.team-input input {
  border: 0; outline: 0; background: transparent; width: 100%;
  font-size: 26px; font-weight: 850; letter-spacing: -.03em;
  margin-top: 8px; color: var(--ink);
}
.versus { font-size: 12px; font-weight: 900; color: var(--muted); text-align: center; }

.pack-status {
  margin-top: 26px; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: 16px;
  background: #fff; font-size: 13px; color: var(--muted);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.pack-status strong { color: var(--ink); }
.pack-status.error { background: #fff4f1; border-color: #f3c9bd; color: var(--danger-ink); }
.pack-actions { margin-inline-start: auto; display: flex; gap: 8px; }

/* Category picker */
.category-header { display: flex; justify-content: space-between; align-items: end; gap: 30px; }
.category-header h2 { margin-bottom: 6px; }
.category-header p { color: var(--muted); font-weight: 700; }
.pick-counter { text-align: end; }
.pick-counter strong { font-size: 44px; letter-spacing: -.06em; }
.pick-counter span { font-size: 12px; color: var(--muted); margin-inline-start: 4px; }

.selected-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 30px 0 24px; }
.selected-team { border-radius: 18px; padding: 16px 18px; background: #fff; min-height: 82px; border: 2px solid transparent; }
.selected-team.team-a { border-color: var(--violet); }
.selected-team.team-b { border-color: var(--ink); }
.selected-team > span { font-size: 10px; font-weight: 900; color: var(--muted); letter-spacing: .1em; display: flex; align-items: center; }
.selected-team > div { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
.pick-chip { font-size: 12px; font-weight: 800; padding: 7px 9px; background: var(--tint-2); border-radius: 8px; }

.filter-row { display: flex; justify-content: space-between; gap: 18px; align-items: center; margin-bottom: 22px; }
.filter-tabs { display: flex; gap: 7px; overflow: auto; }
.filter-tab {
  white-space: nowrap; border: 1px solid var(--line);
  background: #fff; border-radius: 999px; padding: 9px 13px;
  font-size: 12px; font-weight: 800;
}
.filter-tab[aria-pressed="true"] { background: var(--ink); color: #fff; }
.search-box {
  background: #fff; border: 1px solid var(--line); border-radius: 13px;
  padding: 10px 13px; display: flex; align-items: center; gap: 8px; min-width: 230px;
}
.search-box input { border: 0; outline: 0; background: transparent; width: 100%; }

.category-picker-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.picker-card {
  text-align: start; border: 2px solid transparent; background: #fff;
  border-radius: 18px; padding: 18px; min-height: 160px;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform .18s, box-shadow .18s;
}
.picker-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(11, 16, 32, .07); }
@media (prefers-reduced-motion: reduce) { .picker-card:hover, .showcase-card:hover { transform: none; } }
.picker-card.picked-a { border-color: var(--violet); background: var(--tint-2); }
.picker-card.picked-b { border-color: var(--ink); background: var(--tint-1); }
.picker-card[aria-disabled="true"] { opacity: .46; cursor: not-allowed; }
.picker-card .cat-icon { font-size: 25px; }
.picker-card small { font-size: 9px; font-weight: 900; color: var(--muted); letter-spacing: .1em; display: flex; align-items: center; }
.picker-card h3 { margin: 6px 0 0; font-size: 18px; letter-spacing: -.03em; }
.picker-card p { font-size: 12px; color: var(--muted); line-height: 1.45; margin: 6px 0 0; }
.empty-state { padding: 40px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 18px; }

/* Board */
.board-container { max-width: 1500px; }
.scorebar {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(10px, 1.6vw, 26px);
  margin-top: clamp(14px, 2.2vh, 30px);
  flex: 0 0 auto;
}
.play-section.locked .scorebar {
  /* the band the scores live in: full width, translucent, white type inside */
  margin: clamp(12px, 2vh, 28px) calc(-1 * clamp(12px, 1.8vw, 32px))
          calc(-1 * clamp(10px, 1.6vh, 22px));
  padding: clamp(10px, 1.6vh, 20px) clamp(16px, 2.4vw, 40px);
  /* transparent — the white board shows through it */
  background: linear-gradient(135deg,
    rgba(192, 44, 217, .18) 0%, rgba(124, 16, 198, .18) 100%);
  color: #fff;
}

/* +/- in steps of 100, for when the host has to settle an argument */
.score-adjust { display: inline-flex; gap: 6px; }
.adjust {
  width: clamp(30px, 3.4vh, 40px); height: clamp(30px, 3.4vh, 40px);
  border: 1px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--ink);
  font-size: 19px; font-weight: 700; line-height: 1;
  display: grid; place-items: center;
}
.adjust:hover { background: var(--tint-2); border-color: var(--violet); }
.adjust:active { transform: scale(.94); }

/* the steppers sit on the white panel, so they use the ordinary treatment */
.play-section.locked .adjust { background: var(--tint-1); color: var(--ink); }
.play-section.locked .adjust:hover { background: var(--tint-2); border-color: var(--violet); }

.score-box {
  display: flex; gap: 14px; align-items: center;
  border-radius: 18px; padding: 12px 18px;
  border: 2px solid transparent;
  background: #fff;
  /* Both panels are the same fixed width, so a long team name next to a short
     one never makes the two look mismatched. Wide enough for three words; a
     longer name truncates rather than stretching its panel. */
  flex: 0 0 auto;
  width: clamp(300px, 30vw, 440px);
}
.score-box.team-a { border-color: var(--violet); }
.score-box.team-b { border-color: var(--ink); }
.score-box .name {
  flex: 1 1 auto; min-width: 0;
  font-size: clamp(14px, 1.1vw, 18px); font-weight: 850;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.score-box.team-b .name { order: 3; text-align: end; }
.score-box strong {
  flex: 0 0 auto;
  font-size: clamp(24px, 3vw, 40px); letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}

/* Solid white panels on the see-through band, with black type inside */
.play-section.locked .score-box {
  padding: 10px 18px;
  background: #fff;
  color: var(--ink);
}
.play-section.locked .score-box.team-a { border-color: var(--violet); }
.play-section.locked .score-box.team-b { border-color: var(--ink); }
.play-section.locked .board-help { display: none; }
.play-section.locked .board-actions { flex: 0 0 auto; }

/* Whose turn it is, on the board. This is the one thing the room looks at
   between questions, so it is a solid chip with the name at display size —
   not a line of small text on the header band. */
.turn-pill {
  display: inline-flex; align-items: center; gap: clamp(8px, 1vw, 14px);
  background: #fff;
  border-radius: 999px;
  /* even padding both sides; the end tightens only when the swap button is
     actually sitting in there */
  padding: clamp(5px, .8vh, 8px) clamp(14px, 1.4vw, 22px);
  box-shadow: 0 6px 20px rgba(27, 11, 61, .22);
}
.turn-pill.has-swap { padding-inline-end: clamp(6px, .7vw, 9px); }
.turn-pill .turn-label {
  font-size: clamp(9px, .78vw, 12px); font-weight: 900;
  letter-spacing: .14em; color: var(--muted);
}
html[lang="ar"] .turn-pill .turn-label { letter-spacing: 0; }
.swap-turn {
  width: clamp(30px, 3.4vh, 38px); height: clamp(30px, 3.4vh, 38px);
  border-radius: 999px;
  border: 0; background: var(--violet); color: #fff;
  font-size: clamp(15px, 1.6vh, 18px); line-height: 1;
  display: grid; place-items: center;
  transition: background .15s, transform .15s;
}
.swap-turn:hover { background: var(--violet-strong); }
.swap-turn:active { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .swap-turn:active { transform: none; } }
html[lang="ar"] .turn-pill { letter-spacing: 0; }
.turn-pill strong {
  display: inline-flex; align-items: center;
  font-size: clamp(17px, 1.9vw, 30px); font-weight: 700;
  letter-spacing: -.01em; color: var(--ink);
  max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html[lang="ar"] .turn-pill strong { letter-spacing: 0; }
.board-help { text-align: center; color: var(--muted); font-size: 13px; margin: 0 0 clamp(8px, 1.4vh, 16px); }

/* Six category blocks, three across and two down — spacing taken from a
   سين جيم board: capsule value keys, a picture column between them, and
   enough air between blocks that each reads as its own thing.

   Everything is sized in fr units inside a fixed-height frame, so the board
   fills the screen exactly once and never scrolls. */
.game-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  gap: clamp(16px, 2.4vh, 38px) clamp(18px, 2.2vw, 44px);
  margin-top: clamp(12px, 2vh, 24px);
}
.play-section.locked .game-board {
  flex: 1; min-height: 0;
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.board-cat {
  /* One height drives the whole block: the three keys and the picture panel
     are built from the same numbers, so the panel's top and bottom land
     exactly on the first and last key instead of overhanging them. */
  --key-gap: clamp(6px, 1.2vh, 15px);
  --name-h: clamp(30px, 4.2vh, 54px);

  display: grid;
  grid-template-columns: 1fr minmax(104px, .78fr) 1fr;
  column-gap: 0;                    /* the keys meet the picture panel */
  align-items: stretch;
  min-height: 0;
}
.board-values {
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: var(--key-gap);
  min-height: 0;
}
.board-values:first-of-type .board-question {
  border-start-start-radius: 999px;
  border-end-start-radius: 999px;
}
.board-values:last-of-type .board-question {
  border-start-end-radius: 999px;
  border-end-end-radius: 999px;
}

.board-question {
  border: 0;
  /* Rounded on the outer edge, square where it meets the picture. Written with
     logical radii so the whole thing mirrors correctly in Arabic. */
  border-radius: 0;
  background: var(--key);
  color: var(--key-ink);
  font-size: clamp(19px, 2.1vw, 40px);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  padding-inline: 6px;
  height: 100%;
  /* Ceilings on both axes. A portrait tablet is tall and narrow, where a
     height-only cap still leaves the capsule standing upright. */
  max-height: min(clamp(64px, 13vh, 140px), 9vw);
  align-self: center;
  min-height: 0;
  transition: background .16s, transform .12s;
}
.board-question:hover:not(:disabled) { background: var(--key-hover); transform: scale(1.03); }
.board-question:active:not(:disabled) { transform: scale(.98); }
.board-question:disabled { background: var(--key-done); color: var(--key-done-ink); cursor: default; }
@media (prefers-reduced-motion: reduce) { .board-question:hover:not(:disabled) { transform: none; } }

.board-art {
  display: flex; flex-direction: column;
  border-radius: 0; overflow: hidden;
  background: var(--key-panel);
  /* shares the body row with the keys, so the two always match */
  align-self: stretch;
  min-height: 0;
  z-index: 1;                       /* sits flush against the key columns */
}
.board-art-slot {
  flex: 1; min-height: 0;
  display: grid; place-items: center;
  padding: 6px;
}
.board-art-slot svg, .board-art-slot img {
  width: 100%; height: 100%;
  object-fit: cover;                /* portrait art, portrait panel — fills it */
  display: block;
}
/* the drawings bring their own colour, so the panel behind them is neutral */
.board-art { background: #ffffff; }
.board-art-slot { padding: 0; }
.board-art figure { margin: 0; width: 100%; height: 100%; }
.board-art .credit { display: none; }
.board-art-icon { font-size: clamp(24px, 3vw, 40px); }
.board-cat-name {
  background: var(--violet-mid); color: #fff;
  display: grid; place-items: center;
  min-height: var(--name-h);
  padding: 4px 8px;
  text-align: center;
  font-size: clamp(11px, 1.05vw, 17px);
  font-weight: 850; line-height: 1.15;
  flex: 0 0 auto;                   /* pinned to the foot of the picture */
}

.board-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* =========================================================================
   The question — a framed box beside a team column
   The box holds the question and nothing else. Everything about the teams —
   scores, whose turn it is, lifelines, and the award buttons once the answer
   is out — sits in the column next to it, so nothing crowds the question.
   ========================================================================= */
.question-modal {
  position: fixed; inset: 0;
  background: var(--paper);
  z-index: 200; display: none;
}
.question-modal.open {
  display: flex; align-items: stretch;
  gap: clamp(20px, 2.4vw, 42px);
  padding: clamp(34px, 6vh, 70px) clamp(24px, 3vw, 56px) clamp(30px, 5vh, 56px);
}

.question-panel {
  position: relative;
  flex: 1; min-width: 0;
  border: 3px solid var(--violet);
  border-radius: clamp(22px, 2.6vw, 40px);
  padding: clamp(40px, 6vh, 72px) clamp(28px, 3.2vw, 60px);
  display: flex; flex-direction: column;
}

/* --- controls straddling the frame --- */
.edge {
  position: absolute; z-index: 2;
  border: 0; border-radius: 12px;
  background: var(--violet); color: #fff;
  font-size: clamp(12px, 1vw, 15px); font-weight: 850;
  padding: clamp(7px, 1.1vh, 11px) clamp(14px, 1.6vw, 22px);
  line-height: 1.1; white-space: nowrap;
}
button.edge { cursor: pointer; transition: filter .15s; }
button.edge:hover { filter: brightness(1.12); }
.edge-top-start    { top: 0; transform: translateY(-50%); inset-inline-start: clamp(22px, 2.6vw, 46px); }
/* VAR sits beside Back on the left; the value has the right corner to itself,
   which it needs now that it reads "200 points" rather than "200". */
.edge-var          { top: 0; transform: translateY(-50%);
                     inset-inline-start: clamp(150px, 15vw, 210px);
                     inset-inline-end: auto;
                     background: var(--ink); }
.edge-var.flash    { background: var(--success-ink); }
.edge-top-end      { top: 0; transform: translateY(-50%); inset-inline-end: clamp(22px, 2.6vw, 46px); }
.edge-bottom-start { bottom: 0; transform: translateY(50%); inset-inline-start: clamp(22px, 2.6vw, 46px);
                     font-size: clamp(13px, 1.15vw, 17px); padding-inline: clamp(20px, 2.2vw, 34px); }
.edge-bottom-end   { bottom: 0; transform: translateY(50%); inset-inline-end: clamp(22px, 2.6vw, 46px);
                     background: var(--tint-2); color: var(--violet); letter-spacing: .1em; }
/* handing the question to the other team — its own action, not the reset */
.edge-hand-over    { bottom: 0; transform: translateY(50%);
                     inset-inline-start: clamp(160px, 16vw, 260px);
                     background: var(--ink); }
html[lang="ar"] .edge-bottom-end { letter-spacing: 0; }

/* --- clock, centred on the top border --- */
.clock-row {
  position: absolute; z-index: 2;
  top: 0; transform: translateY(-50%); inset-inline: 0;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(8px, .9vw, 14px);
  pointer-events: none;
}
.clock-row > * { pointer-events: auto; }
.question-clock {
  min-width: clamp(96px, 9vw, 150px);
  padding: clamp(7px, 1.1vh, 13px) clamp(14px, 1.6vw, 24px);
  border: 3px solid var(--violet); border-radius: 999px;
  background: var(--paper);
  display: grid; place-items: center;
  font-size: clamp(22px, 2.2vw, 36px); font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.question-clock.paused { border-color: var(--muted); color: var(--muted); }
.question-clock.out { border-color: var(--danger-ink); color: var(--danger-ink); }
.question-clock.steal {
  border-color: var(--danger-ink); color: var(--danger-ink);
  animation: steal-pulse 1s ease-in-out infinite;
}
@keyframes steal-pulse { 50% { box-shadow: 0 0 0 8px rgba(138, 53, 32, .12); } }
@media (prefers-reduced-motion: reduce) { .question-clock.steal { animation: none; } }
.question-clock.done { border-color: var(--success-ink); color: var(--success-ink); }
.clock-btn {
  width: clamp(38px, 4vh, 50px); height: clamp(38px, 4vh, 50px);
  border: 2px solid var(--violet); border-radius: 50%;
  background: var(--paper); color: var(--violet);
  font-size: clamp(14px, 1.7vh, 18px); line-height: 1;
  display: grid; place-items: center;
  transition: background .15s;
}
.clock-btn:hover:not(:disabled) { background: var(--tint-2); }
.clock-btn:disabled { opacity: .3; cursor: not-allowed; }

/* --- inside the box: the question, using the room it has --- */
.question-body {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(16px, 3vh, 36px);
}
.question-panel h3 {
  margin: 0; text-align: center;
  font-size: clamp(22px, 2.7vw, 46px);
  line-height: 1.3; letter-spacing: -.03em;
  max-width: 24ch;
}
html[lang="ar"] .question-panel h3 { letter-spacing: 0; line-height: 1.45; }

.question-picture { flex: 0 1 auto; min-height: 0; max-width: min(640px, 100%); }
.question-art {
  margin: 0; height: 100%;
  border-radius: 18px; overflow: hidden;
  background: #fff; border: 1px solid var(--line);
}
.question-art svg, .question-art img {
  display: block; width: 100%; height: 100%;
  max-height: 46vh; object-fit: contain; background: #fff;
}
.question-art .credit {
  display: block; padding: 6px 10px; font-size: 11px;
  color: var(--muted); background: #fff;
  border-top: 1px solid var(--line); text-align: start;
}
.question-art.missing { display: none; }

.answer-reveal {
  width: 100%; max-width: 760px;
  background: var(--tint-1); border: 2px solid var(--violet); border-radius: 18px;
  padding: clamp(14px, 2vh, 22px); text-align: center;
}
.answer-reveal span {
  display: block; font-size: 11px; font-weight: 900;
  letter-spacing: .12em; color: var(--muted);
}
html[lang="ar"] .answer-reveal span { letter-spacing: 0; }
.answer-reveal strong {
  display: block; font-size: clamp(22px, 2.6vw, 40px);
  line-height: 1.2; margin-top: 4px;
}

/* =========================================================================
   The team column
   ========================================================================= */
.question-side {
  flex: 0 0 clamp(300px, 31vw, 720px);   /* the box ends around 69% of the page */
  display: flex; flex-direction: column;
  justify-content: flex-start;      /* content sits at the top, space below stays empty */
  gap: clamp(12px, 2vh, 20px);
  min-height: 0; overflow-y: auto;
}
.side-turn.is-steal { background: var(--danger-ink); }
.side-turn {
  background: var(--grad-brand); color: #fff;
  border-radius: 18px; padding: clamp(16px, 2.6vh, 28px) 18px;
  text-align: center;
  display: flex; flex-direction: column; gap: 4px;
}
html[lang="ar"] .side-turn { letter-spacing: 0; }

.side-team {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #fff; border: 2px solid var(--line);
  border-radius: 18px; padding: clamp(16px, 2.8vh, 30px) clamp(18px, 1.8vw, 28px);
  flex: 0 0 auto;
}
.side-team.is-turn { border-color: var(--violet); background: var(--tint-1); }
.side-name {
  font-weight: 850; font-size: clamp(15px, 1.4vw, 24px);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.side-score {
  font-size: clamp(30px, 3.4vw, 60px); font-weight: 900;
  letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
.side-b .side-score { color: var(--ink); }
.side-a .side-score { color: var(--violet); }

.side-label {
  margin: 0 0 2px;
  font-size: 10px; font-weight: 900; letter-spacing: .1em;
  color: var(--muted); text-transform: uppercase;
}
html[lang="ar"] .side-label { letter-spacing: 0; }

.lifelines { display: flex; flex-direction: column; gap: 8px; margin-top: clamp(4px, 1vh, 10px); }
.lifelines button {
  border: 1px solid var(--line); background: #fff; border-radius: 14px;
  padding: clamp(12px, 1.8vh, 20px) 16px; text-align: start;
  display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center;
}
.lifelines button:hover:not(:disabled) { border-color: var(--violet); background: var(--tint-1); }
.lifelines button > span { grid-row: 1 / 3; font-size: clamp(18px, 2vh, 24px); }
.lifelines b { font-size: clamp(12px, 1vw, 15px); }
.lifelines small { color: var(--muted); font-size: clamp(10px, .85vw, 12px); }
.lifelines button:disabled { opacity: .4; cursor: not-allowed; }

.award { display: flex; flex-direction: column; gap: 8px; margin-top: clamp(4px, 1vh, 10px); }
.btn-award {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #fff; border: 2px solid var(--line);
  padding: clamp(14px, 2.2vh, 24px) 18px;
  font-size: clamp(14px, 1.2vw, 19px); font-weight: 800;
  text-align: start;
}
.btn-award:hover { background: var(--tint-1); }
.btn-award b { font-size: 1.1em; }
#award-a { border-color: var(--violet); }
#award-a b { color: var(--violet); }
#award-b { border-color: var(--ink); }
#award-b b { color: var(--ink); }

/* --- VAR report --- */
.report {
  position: absolute; z-index: 4;
  top: clamp(70px, 12vh, 120px); inset-inline-end: clamp(30px, 5vw, 90px);
  width: min(420px, 84vw);
  background: #fff; border: 2px solid var(--ink);
  border-radius: 18px; padding: 16px;
  box-shadow: var(--shadow);
}
.report h4 { margin: 0 0 10px; font-size: 15px; }
.report textarea {
  width: 100%; resize: vertical;
  border: 1px solid var(--line); border-radius: 12px;
  padding: 10px; font: inherit; font-size: 14px;
}
.report-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.report-note { margin: 8px 0 0; font-size: 11px; color: var(--muted); text-align: end; }

@media (max-width: 1000px) {
  .question-modal.open { flex-direction: column; padding: clamp(28px, 5vh, 44px) 18px 20px; }
  .question-side { flex: 0 0 auto; flex-direction: row; flex-wrap: wrap; overflow: visible; }
  .side-turn, .side-team { flex: 1 1 140px; }
  .lifelines { flex-direction: row; width: 100%; }
  .lifelines button { flex: 1; }
  .lifelines .side-label { display: none; }
  .award { flex-direction: row; width: 100%; margin-top: 0; }
    .edge { font-size: 11px; padding: 6px 12px; }
  .edge-var { inset-inline-start: 130px; inset-inline-end: auto; }
  .edge-hand-over { inset-inline-start: 130px; }
  .question-art svg, .question-art img { max-height: 30vh; }
  .report { inset-inline: 18px; width: auto; }
}

/* Results */
.results-panel {
  background: #fff; border: 1px solid var(--line);
  border-radius: 26px; padding: 38px; text-align: center; margin-top: 26px;
}
.results-panel .winner { font-size: clamp(32px, 5vw, 54px); letter-spacing: -.05em; line-height: 1.08; margin: 6px 0 26px; }
.results-scores { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
.results-scores div { border: 2px solid transparent; border-radius: 18px; padding: 20px; background: var(--paper); }
.results-scores div:first-child { border-color: var(--violet); }
.results-scores div:last-child { border-color: var(--ink); }
.results-scores span { display: block; font-size: 11px; font-weight: 900; letter-spacing: .1em; color: var(--muted); }
.results-scores strong { display: block; font-size: 44px; letter-spacing: -.05em; margin-top: 6px; }

/* Resume banner */
.resume-banner {
  background: var(--ink); color: #fff;
  border-radius: 18px; padding: 18px 20px; margin-bottom: 26px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.resume-banner p { margin: 0; font-size: 14px; }
.resume-banner .btn { margin-inline-start: auto; }

/* ---------- Responsive ---------- */
@media (max-width: 1050px) {
  .hero { grid-template-columns: 1fr; padding-top: 60px; }
  .hero-board { max-width: 700px; }
  .steps-grid, .category-showcase, .category-picker-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-band { grid-template-columns: 1fr; }
  .game-board { grid-template-columns: repeat(2, 1fr); }
  .game-board .board-cat:nth-child(n+4) .board-cat-name { grid-row: 1; border-radius: 999px 999px 0 0; }
  .game-board .board-cat:nth-child(n+4) .board-values,
  .game-board .board-cat:nth-child(n+4) .board-art { grid-row: 2; }
  .play-section.locked .game-board { grid-template-rows: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .topbar { height: 70px; padding-inline: 16px; gap: 10px; }
  .nav-links { display: none; }
  .hero { padding: 48px 18px 56px; gap: 42px; }
  .hero-board { padding: 10px; border-radius: 22px; transform: none; }
  .mini-col span { font-size: 7px; height: 44px; }
  .mini-col b { height: 44px; font-size: 13px; }
  .stats-strip { grid-template-columns: repeat(2, 1fr); margin-inline: 18px; }
  .stats-strip div:nth-child(2) { border-inline-end: 0; }
  .stats-strip div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .section { padding: 70px 18px; }
  .steps-grid, .category-showcase, .category-picker-grid { grid-template-columns: 1fr; }
  .split-heading { display: block; }
  .feature-band { margin: 30px 14px; padding: 34px 22px; }
  .steal-visual { display: block; }
  .timer-ring { margin: 0 auto 24px; }
  .selected-summary, .results-scores { grid-template-columns: 1fr; }
  .filter-row { display: block; }
  .filter-tabs { margin-bottom: 12px; }
  .search-box { width: 100%; }
  .category-header { display: block; }
  .pick-counter { text-align: start; margin-top: 10px; }
  .team-input-grid { grid-template-columns: 1fr; }
  .scorebar { flex-wrap: wrap; justify-content: center; }
  .score-box { width: 100%; }
  .game-board { grid-template-columns: 1fr; gap: 12px; }
  .play-section.locked .game-board { grid-template-rows: repeat(6, minmax(0, 1fr)); }
  .board-cat { grid-template-columns: 1fr minmax(84px, .8fr) 1fr; }
  .board-question { font-size: 18px; }
  .game-container { padding-block: 34px; }
  .pack-actions { margin-inline-start: 0; }
  footer { display: block; }
  footer > * { margin: 8px 0; }
}

/* Big screens / TV: the board is the thing being read from across a room */
@media (min-width: 1600px) {
  .board-question { font-size: 40px; }
  .board-cat-name { font-size: 19px; }
}

/* =========================================================================
   Pictures
   Categories and questions can carry inline SVG art (from art.js) or a photo
   file. Both render into a fixed aspect box so a slow or missing image never
   reflows the question mid-round.
   ========================================================================= */
.card-art {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 8 / 5;
  margin: 0 0 12px;
  background: rgba(11, 16, 32, .04);
}
.card-art svg, .card-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.showcase-card .card-art { margin-bottom: 14px; }

/* A file that fails to load collapses rather than showing a broken icon */
.card-art figure.missing { display: none; }

/* =========================================================================
   Confirmation — anything that throws work away asks first
   ========================================================================= */
.confirm {
  position: fixed; inset: 0; z-index: 400;
  display: grid; place-items: center;
  background: rgba(27, 11, 61, .55);
  backdrop-filter: blur(3px);
  padding: 24px;
}
.confirm-box {
  width: min(460px, 100%);
  background: #fff;
  border: 2px solid var(--violet);
  border-radius: 22px;
  padding: clamp(22px, 3vh, 32px);
  box-shadow: var(--shadow);
  text-align: center;
}
.confirm-box h4 {
  margin: 0 0 8px;
  font-size: clamp(19px, 2vw, 26px);
  letter-spacing: -.02em;
}
.confirm-box p {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: clamp(13px, 1.1vw, 15px);
  line-height: 1.5;
}
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.confirm-actions .btn { padding-block: 14px; font-size: 15px; }

/* Whose turn it is — the biggest thing in the column, readable across a room */
.side-turn-label {
  font-size: clamp(10px, .9vw, 13px); font-weight: 900;
  letter-spacing: .16em; opacity: .8;
}
html[lang="ar"] .side-turn-label { letter-spacing: 0; }
.side-turn-name {
  font-size: clamp(22px, 2.6vw, 42px); font-weight: 900;
  letter-spacing: -.03em; line-height: 1.1;
  overflow-wrap: anywhere;
}
html[lang="ar"] .side-turn-name { letter-spacing: 0; }

/* =========================================================================
   Motion
   Everything that changes state gets a short, quiet transition — enough for
   the eye to follow what moved, never enough to wait for. All of it is off
   for anyone who has asked their system to reduce motion.
   ========================================================================= */
@keyframes screen-in   { from { opacity: 0; transform: translateY(14px); } }
@keyframes question-in { from { opacity: 0; transform: scale(.97); } }
@keyframes lift-in     { from { opacity: 0; transform: translateY(14px); } }
@keyframes pop-in      { from { opacity: 0; transform: scale(.94); } }
@keyframes handover-flash {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.game-screen.active        { animation: screen-in .45s cubic-bezier(.32,.8,.28,1) both; }
.question-modal.open       { animation: question-in .38s cubic-bezier(.32,.8,.28,1) both; }
.question-modal.open .question-body { animation: lift-in .52s .08s cubic-bezier(.32,.8,.28,1) both; }
.answer-reveal:not(.hidden) { animation: pop-in .42s cubic-bezier(.32,.8,.28,1) both; }
.award:not(.hidden)         { animation: lift-in .48s .1s cubic-bezier(.32,.8,.28,1) both; }
.confirm:not(.hidden) .confirm-box { animation: pop-in .34s cubic-bezier(.32,.8,.28,1) both; }
.report:not(.hidden)        { animation: pop-in .3s cubic-bezier(.32,.8,.28,1) both; }

/* the board deals itself in, block by block */
.board-cat { animation: lift-in .5s cubic-bezier(.32,.8,.28,1) both; }
.board-cat:nth-child(1) { animation-delay: .04s; }
.board-cat:nth-child(2) { animation-delay: .11s; }
.board-cat:nth-child(3) { animation-delay: .18s; }
.board-cat:nth-child(4) { animation-delay: .25s; }
.board-cat:nth-child(5) { animation-delay: .32s; }
.board-cat:nth-child(6) { animation-delay: .39s; }

/* scores and the clock ease rather than jump */
.side-score, .score-box strong { transition: color .35s; }
.question-clock { transition: border-color .4s, color .4s, transform .4s; }
.question-clock.steal { animation: handover-flash .7s cubic-bezier(.32,.8,.28,1),
                                   steal-pulse 1.2s ease-in-out .7s infinite; }
.side-turn { transition: background .45s; }
.side-team { transition: border-color .4s, background .4s; }
.board-question:disabled { transition: background .45s, color .45s; }

@media (prefers-reduced-motion: reduce) {
  .game-screen.active, .question-modal.open, .question-modal.open .question-body,
  .answer-reveal:not(.hidden), .award:not(.hidden), .board-cat,
  .confirm:not(.hidden) .confirm-box, .report:not(.hidden),
  .question-clock.steal { animation: none !important; }
}

/* =========================================================================
   Landscape only
   The board is six blocks wide with a team column beside it. Upright, that is
   unusable rather than merely cramped, so the game asks to be turned instead
   of reflowing into something nobody would want to play on.
   ========================================================================= */
.rotate-me { display: none; }
@media (orientation: portrait) and (max-width: 1100px) {
  .rotate-me {
    display: grid; place-items: center;
    position: fixed; inset: 0; z-index: 900;
    background: var(--grad-brand); color: #fff;
    padding: 32px; text-align: center;
  }
  .rotate-inner { max-width: 320px; }
  .rotate-icon {
    display: block; font-size: 64px; margin-bottom: 18px;
    animation: rotate-hint 2.4s ease-in-out infinite;
  }
  .rotate-me h4 { margin: 0 0 10px; font-size: 24px; }
  .rotate-me p { margin: 0; opacity: .85; font-size: 15px; line-height: 1.5; }
  body { overflow: hidden; }
}
@keyframes rotate-hint { 0%, 60%, 100% { transform: rotate(0); } 30% { transform: rotate(90deg); } }
@media (prefers-reduced-motion: reduce) { .rotate-icon { animation: none; } }

/* Results: two ways to play again, and a quiet way out */
.results-actions { display: flex; flex-direction: column; gap: 10px; }
.btn-quiet {
  border: 0; background: none; cursor: pointer;
  color: var(--muted); font-size: 13px; font-weight: 700;
  padding: 10px; margin-top: 2px;
  text-decoration: underline; text-underline-offset: 3px;
}
.btn-quiet:hover { color: var(--ink); }


/* =========================================================================
   Rules — a walkthrough, not a list
   A real board sits behind, dimmed, so the four rules can point at the thing
   they describe. The card borrows the question box's frame: a violet outline
   with the step number straddling it.
   ========================================================================= */
/* The rules sit over the live screen — the picker stays visible behind them,
   dimmed, so rule one can point at the thing it is describing. */
.tour { position: absolute; inset: 0; z-index: 60; }
.tour-scrim {
  position: absolute; inset: 0;
  background: rgba(21, 10, 64, .66);
  backdrop-filter: blur(2px);
  animation: fade-in .4s ease both;
}
@keyframes fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tour-scrim { animation: none; } }

/* A card, not a moving tooltip: fixed dead centre, portrait, the proportions
   of a football card. It never moves — only its contents change — so stepping
   through is reading, not chasing. */
.tour-pop {
  position: absolute; z-index: 2;
  top: 50%; inset-inline-start: 50%;
  transform: translate(-50%, -50%);

  width: clamp(290px, 25vw, 380px);
  aspect-ratio: 2 / 3;
  max-height: min(78vh, 620px);

  display: flex; flex-direction: column;
  background: var(--paper);
  border: 3px solid var(--violet);
  border-radius: clamp(20px, 2vw, 30px);
  padding: clamp(26px, 3.4vh, 38px) clamp(20px, 1.8vw, 28px) clamp(18px, 2.2vh, 24px);
  box-shadow: 0 30px 80px rgba(21, 10, 64, .45);
  animation: pop-in .4s cubic-bezier(.32,.8,.28,1) both;
}
@media (prefers-reduced-motion: reduce) { .tour-pop { animation: none; } }

/* the number straddles the frame, exactly like the question box's controls */
.tour-num {
  position: absolute; top: 0; transform: translateY(-50%);
  inset-inline-start: 50%; margin-inline-start: -24px;
  display: grid; place-items: center;
  width: 48px; height: 48px;
  padding: 0; border-radius: 50%;
  background: var(--grad-brand); color: #fff;
  font-size: 21px; font-weight: 900;
}
.tour-of {
  position: absolute; bottom: 0; transform: translateY(50%);
  inset-inline-start: 50%; translate: -50% 0;
  background: var(--tint-2); color: var(--violet);
  font-size: 11px; font-weight: 900; letter-spacing: .1em;
  padding: 6px 14px; border-radius: 999px;
  white-space: nowrap;
}
html[lang="ar"] .tour-of { letter-spacing: 0; }

.tour-pop h3 {
  margin: clamp(6px, 1.4vh, 14px) 0 10px;
  font-size: clamp(19px, 1.7vw, 25px);
  letter-spacing: -.02em; line-height: 1.2; text-align: center;
}
html[lang="ar"] .tour-pop h3 { letter-spacing: 0; }
.tour-pop p {
  /* auto margins split the leftover space evenly above and below, so the
     paragraph sits centred in the card while the title stays put under the
     number badge. */
  flex: 0 1 auto; min-height: 0; overflow-y: auto;
  margin-block: auto; margin-inline: 0;
  color: var(--muted);
  font-size: clamp(13px, 1vw, 15px); line-height: 1.7;
  /* Centred rather than justified: the card is under 380px, and justifying a
     column that narrow opens rivers of white down the middle of the text. */
  text-align: center;
  text-wrap: pretty;
}
.tour-actions {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: stretch;
  gap: clamp(8px, 1.2vh, 12px);
  margin-top: clamp(12px, 1.8vh, 18px);
}
.tour-dots { display: inline-flex; gap: 6px; justify-content: center; }
.tour-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tour-nav .btn { padding-inline: 0; }
.tour-nav .btn:disabled { opacity: .35; cursor: not-allowed; }
.tour-actions .btn-quiet { padding: 4px; }
.tour-dots i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--tint-3); transition: background .4s, transform .4s;
}
.tour-dots i.on { background: var(--violet); transform: scale(1.25); }

@media (max-height: 700px) {
  .tour-pop { aspect-ratio: auto; height: 88vh; width: clamp(280px, 34vw, 360px); }
}
@media (max-width: 700px) {
  .tour-pop { width: min(330px, 88%); }
}

/* the rules stay reachable — a one-time-only screen is a screen nobody finds */
.play-section.locked #open-rules {
  background: rgba(255, 255, 255, .16); color: #fff;
  border-color: rgba(255, 255, 255, .4);
  font-weight: 900;
}
.play-section.locked #open-rules:hover { background: rgba(255, 255, 255, .3); }

/* =========================================================================
   Account — sign in, and how many games are left
   ========================================================================= */
.account {
  display: flex; align-items: center; gap: 10px;
  flex: 0 0 auto;
}
/* when the nav is hidden on narrow screens, the account takes the slack */
@media (max-width: 900px) { .account { margin-inline-start: auto; } }

.credits-pill {
  display: inline-flex; align-items: baseline; gap: 4px;
  background: #fff; color: var(--violet);
  border: 1px solid #fff;
  border-radius: 999px; padding: 6px 14px;
  font-size: 13px; font-weight: 800; white-space: nowrap;
}
.credits-pill b { font-size: 16px; font-weight: 900; }

/* An ink wash, not a white one: a white wash lightens the very gradient the
   white text sits on, which fails at the pink end. */
.account-who {
  border: 1px solid rgba(255, 255, 255, .5); background: rgba(27, 11, 61, .26); color: #fff;
  border-radius: 999px; padding: 7px 14px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.account-who:hover { border-color: #fff; background: rgba(27, 11, 61, .42); }

/* --- the sign-in sheet --- */
.auth {
  position: fixed; inset: 0; z-index: 500;
  display: grid; place-items: center;
  background: rgba(27, 11, 61, .55);
  backdrop-filter: blur(3px);
  padding: 24px;
}
.auth-box {
  position: relative;
  width: min(420px, 100%);
  background: #fff;
  border: 2px solid var(--violet);
  border-radius: 22px;
  padding: clamp(26px, 3.4vh, 36px);
  box-shadow: var(--shadow);
  animation: pop-in .34s cubic-bezier(.32,.8,.28,1) both;
}
@media (prefers-reduced-motion: reduce) { .auth-box { animation: none; } }

.auth-close {
  position: absolute; top: 12px; inset-inline-end: 14px;
  border: 0; background: none; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--muted);
}
.auth-close:hover { color: var(--ink); }

.auth-box h3 { margin: 0 0 6px; font-size: clamp(19px, 2vw, 24px); letter-spacing: -.02em; }
html[lang="ar"] .auth-box h3 { letter-spacing: 0; }
.auth-lede { margin: 0 0 18px; color: var(--muted); font-size: 14px; line-height: 1.55; }

.auth-label {
  display: block; margin-bottom: 6px;
  font-size: 11px; font-weight: 900; letter-spacing: .1em;
  color: var(--muted); text-transform: uppercase;
}
html[lang="ar"] .auth-label { letter-spacing: 0; text-transform: none; }

#auth-email {
  width: 100%; margin-bottom: 12px;
  border: 1px solid var(--line); border-radius: 14px;
  padding: 13px 15px; font: inherit; font-size: 15px;
}
#auth-email:focus { outline: 2px solid var(--violet); outline-offset: 1px; }

.auth-note { margin: 12px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.auth-signed-in { margin-top: 4px; }
.auth-signed-in p { margin: 0 0 12px; font-size: 14px; }

@media (max-width: 700px) {
  .account { gap: 6px; }
  .account-who { max-width: 12ch; }
  .credits-pill { padding: 5px 10px; font-size: 12px; }
}

/* the name step shares the sign-in sheet's shape */
#auth-name {
  width: 100%; margin-bottom: 12px;
  border: 1px solid var(--line); border-radius: 14px;
  padding: 13px 15px; font: inherit; font-size: 15px;
}
#auth-name:focus { outline: 2px solid var(--violet); outline-offset: 1px; }

/* =========================================================================
   Buying games — the pill opens what's for sale
   ========================================================================= */
.credits-wrap { position: relative; }
.credits-pill { cursor: pointer; font: inherit; }
.credits-pill:hover { box-shadow: 0 0 0 3px rgba(255, 255, 255, .3); }

.credits-menu {
  position: absolute; top: calc(100% + 10px); inset-inline-end: 0;
  z-index: 60;
  width: min(300px, 86vw);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 24px 60px rgba(27, 11, 61, .28);
  text-align: start;
  animation: pop-in .28s cubic-bezier(.32,.8,.28,1) both;
}
@media (prefers-reduced-motion: reduce) { .credits-menu { animation: none; } }

.credits-menu-title {
  margin: 0 0 10px;
  font-size: 11px; font-weight: 900; letter-spacing: .1em;
  color: var(--muted); text-transform: uppercase;
}
html[lang="ar"] .credits-menu-title { letter-spacing: 0; text-transform: none; }
.credits-menu-note {
  margin: 10px 2px 0; font-size: 11px; color: var(--muted); line-height: 1.5;
}

.credit-option {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; margin-bottom: 6px;
  border: 1px solid var(--line); border-radius: 14px;
  background: #fff; color: var(--ink);
  padding: 12px 14px; cursor: pointer; text-align: start;
  transition: border-color .2s, background .2s;
}
.credit-option:hover { border-color: var(--violet); background: var(--tint-1); }
.credit-option-main { display: flex; flex-direction: column; gap: 2px; }
.credit-option-main b { font-size: 15px; font-weight: 850; }
.credit-option-main small { font-size: 11px; color: var(--muted); }
.credit-option-price { font-size: 17px; font-weight: 900; color: var(--violet); }
.credit-option-best {
  position: absolute; top: -8px; inset-inline-end: 12px;
  background: var(--violet); color: #fff;
  font-size: 9px; font-weight: 900; letter-spacing: .08em;
  padding: 3px 8px; border-radius: 999px; text-transform: uppercase;
}
html[lang="ar"] .credit-option-best { letter-spacing: 0; text-transform: none; }

.account-who { display: inline-flex; align-items: center; }