/* QUIZZER phone page. The logo's look: cream paper, navy ink, red-orange and amber "stickers" with navy outlines
   and hard navy shadows. Light only; Arabic, RTL. */

:root {
  color-scheme: only light;
  --paper: #FCF2E5; /* page */
  --card: #FFF9F0; /* cards */
  --well: #F3E6D3; /* wells, tracks, inactive fills */
  --ink: #12304F; /* text, icons, outlines, hard shadows */
  --muted: #4D6175; /* secondary text: ≥ 5.2:1 on paper, card and well */
  --faint: #586A7C; /* smallest text that must stay readable: ≥ 4.5:1 on paper, card and well */
  --placeholder: #8C97A2;
  --line: rgba(18, 48, 79, .16); /* hairlines inside cards */
  --red: #F64A2B; /* team colours (same as the iPad/TV): large fills, large white text */
  --red-ink: #C9381C; /* fills behind small white text, red text on cream (≥ 4.5:1) */
  --red-d: #A32C15;
  --blue: #2D7FF9;
  --blue-ink: #1F5FD0;
  --blue-d: #1A4FAE;
  --amber: #FDB400; /* primary accent: a fill with navy on it, never text on cream */
  --amber-hi: #FFC93C;
  --amber-wash: #FFEFC7;
  --ok: #22A45D; /* large white text only */
  /* لا تشوف's 90 s clock (SPEC §4), ink on each: > 50 s green, > 30 s blue, > 5 s yellow, the last 5 s red. Same as the iPad's
     Palette.clockGreen / blue / accent / red. */
  --clock-green: #33C25E;
  --clock-blue: #2D7FF9;
  --clock-yellow: #FDB400;
  --clock-red: #F64A2B;
  --ok-ink: #168049; /* small white text, green text on cream */
  --team: var(--amber);
  --team-d: #C98F00;
  --on-team: var(--ink);
  --bw: 3px; /* sticker outline */
  --sh: 5px; /* sticker hard shadow */
  --r: 22px;
  --font: ui-rounded, -apple-system, "SF Arabic Rounded", "SF Arabic", "Geeza Pro", "Noto Kufi Arabic", Tahoma, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px); /* landscape: sensor housing and rounded corners */
  --safe-r: env(safe-area-inset-right, 0px);
}
body[data-team="red"] { --team: var(--red); --team-d: var(--red-d); --on-team: #FFFFFF; }
body[data-team="blue"] { --team: var(--blue); --team-d: var(--blue-d); --on-team: #FFFFFF; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
::selection { background: var(--amber-hi); color: var(--ink); }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}
body {
  background:
    radial-gradient(120% 50% at 50% -12%, color-mix(in srgb, var(--team) 14%, transparent), transparent 70%),
    var(--paper);
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-user-select: none; user-select: none; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 3px solid var(--blue-ink); outline-offset: 3px; }

/* Display lettering (the logo's QUIZZER): fill + thick navy outline + a hard drop. --o outline, --od drop. */
.logo, .big-title, .count-big, .bz-big {
  --o: .07em;
  --od: .05em;
  --oc: var(--ink);
  text-shadow:
    var(--o) 0 0 var(--oc), calc(-1 * var(--o)) 0 0 var(--oc), 0 var(--o) 0 var(--oc), 0 calc(-1 * var(--o)) 0 var(--oc),
    calc(.71 * var(--o)) calc(.71 * var(--o)) 0 var(--oc), calc(-.71 * var(--o)) calc(.71 * var(--o)) 0 var(--oc),
    calc(.71 * var(--o)) calc(-.71 * var(--o)) 0 var(--oc), calc(-.71 * var(--o)) calc(-.71 * var(--o)) 0 var(--oc),
    calc(.92 * var(--o)) calc(.38 * var(--o)) 0 var(--oc), calc(-.92 * var(--o)) calc(.38 * var(--o)) 0 var(--oc),
    calc(.92 * var(--o)) calc(-.38 * var(--o)) 0 var(--oc), calc(-.92 * var(--o)) calc(-.38 * var(--o)) 0 var(--oc),
    calc(.38 * var(--o)) calc(.92 * var(--o)) 0 var(--oc), calc(-.38 * var(--o)) calc(.92 * var(--o)) 0 var(--oc),
    calc(.38 * var(--o)) calc(-.92 * var(--o)) 0 var(--oc), calc(-.38 * var(--o)) calc(-.92 * var(--o)) 0 var(--oc),
    0 calc(var(--o) + var(--od)) 0 var(--oc), calc(.71 * var(--o)) calc(.71 * var(--o) + var(--od)) 0 var(--oc),
    calc(-.71 * var(--o)) calc(.71 * var(--o) + var(--od)) 0 var(--oc);
}

#app {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-top: var(--safe-t);
  padding-left: var(--safe-l);
  padding-right: var(--safe-r);
}
main { position: relative; flex: 1; min-height: 0; }
.scr { position: absolute; inset: 0; display: flex; flex-direction: column; }
.scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 16px calc(24px + var(--safe-b)); gap: 18px; }
.center { align-items: center; justify-content: center; padding: 24px 20px calc(24px + var(--safe-b)); text-align: center; }

/* ───────── header / scoreboard */
#hdr {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 8px calc(12px + var(--safe-r)) 10px calc(12px + var(--safe-l));
  margin-left: calc(-1 * var(--safe-l)); /* the bar's background reaches the screen edges in landscape */
  margin-right: calc(-1 * var(--safe-r));
  background: var(--card);
  border-bottom: var(--bw) solid var(--ink);
}
.sc {
  min-width: 72px;
  border-radius: 14px;
  padding: 3px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
  color: #FFFFFF;
  border: 2.5px solid var(--ink);
  box-shadow: 0 3px 0 var(--ink);
}
.sc b { font-size: 24px; font-variant-numeric: tabular-nums; font-weight: 900; }
.sc span { font-size: 11px; font-weight: 800; }
.sc-red { background: var(--red-ink); }
.sc-blue { background: var(--blue-ink); }
.hdr-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2px; }
.hdr-round { font-size: 13px; font-weight: 900; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.hdr-me { font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.hdr-me .chip { margin-inline-start: 4px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  background: var(--well);
  color: var(--ink);
  border: 2px solid var(--ink);
  vertical-align: middle;
}
.chip.red { background: var(--red-ink); color: #FFFFFF; }
.chip.blue { background: var(--blue-ink); color: #FFFFFF; }
.chip.ref { background: var(--amber); color: var(--ink); }

.conn {
  position: absolute;
  top: calc(var(--safe-t) + 62px);
  inset-inline: 0;
  margin: 0 auto;
  width: max-content;
  max-width: calc(100% - 32px);
  z-index: 30;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--amber);
  color: var(--ink);
  font-weight: 800;
  font-size: 14px;
  border: var(--bw) solid var(--ink);
  box-shadow: 0 4px 0 var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ───────── generic controls */
.card {
  background: var(--card);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r);
  box-shadow: 0 var(--sh) 0 var(--ink);
  padding: 18px;
}
.form { display: flex; flex-direction: column; gap: 12px; }
.lbl { font-size: 15px; font-weight: 800; color: var(--ink); }
.hint { font-size: 14px; color: var(--muted); line-height: 1.6; }
.err { font-size: 15px; font-weight: 800; color: var(--red-ink); }
.in {
  width: 100%;
  min-height: 60px;
  padding: 10px 16px;
  border-radius: 16px;
  border: var(--bw) solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-size: 22px;
  font-weight: 800;
  outline: none;
  box-shadow: inset 0 3px 0 rgba(18, 48, 79, .08);
  transition: box-shadow .12s, background-color .12s;
}
.in:focus { background: #FFFFFF; box-shadow: 0 0 0 4px var(--amber); }
.in::placeholder { color: var(--placeholder); font-weight: 600; opacity: 1; }
#in-name { text-align: right; } /* dir="auto" (Latin names keep their punctuation in place), still aligned like the form */
.in-code { text-align: center; font-size: 38px; letter-spacing: .3em; font-variant-numeric: tabular-nums; padding-inline-start: calc(16px + .3em); }

.btn {
  min-height: 56px;
  padding: 10px 18px;
  border: var(--bw) solid var(--ink);
  border-radius: 18px;
  font-size: 20px;
  font-weight: 900;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 var(--sh) 0 var(--ink);
  transition: transform .06s, box-shadow .06s, opacity .15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  line-height: 1.2;
}
.btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.btn:disabled { opacity: .42; cursor: default; }
.btn-xl { min-height: 64px; font-size: 22px; }
.btn-accent { background: var(--amber); color: var(--ink); }
.btn-ok { background: var(--ok); color: #FFFFFF; } /* labels ≥ 20px heavy: large text */
.btn-bad { background: var(--red); color: #FFFFFF; }
.btn-team { background: var(--team); color: var(--on-team); }
.btn-ghost { background: var(--card); color: var(--ink); }
.btn-ghost:active:not(:disabled) { background: var(--well); }
.btn svg { width: 22px; height: 22px; flex: none; }
.link {
  background: none;
  border: 0;
  padding: 8px;
  color: var(--ink);
  font-weight: 800;
  font-size: 15px;
  text-decoration: underline;
  text-decoration-color: var(--amber);
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}

/* ───────── join */
.brand { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 0 0; }
.brand-mark { width: 62px; height: 67px; display: block; }
.logo {
  --o: .085em;
  --od: .06em;
  margin-top: 0;
  font-size: 56px;
  font-weight: 900;
  line-height: 1.25;
  color: var(--amber);
  padding: 0 .15em;
}
.tagline { margin-top: 6px; color: var(--muted); font-size: 16px; font-weight: 700; }
.room-line { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--muted); }
.room-line b {
  color: var(--ink);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
  background: var(--amber);
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  padding: 0 6px 0 calc(6px + .12em);
}
.room-line .link { margin-inline-start: auto; }
.pick-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; padding-bottom: 4px; }
/* Build 21: during the match a new phone picks one of the two teams. */
.pick-row.two { grid-template-columns: 1fr 1fr; }
.pick-row.two .pick-ref { display: none; }
.pick {
  --c: var(--ink); /* tile colour */
  --c-ink: var(--ink);
  min-height: 96px;
  border-radius: 18px;
  border: var(--bw) solid var(--ink);
  font-size: 19px;
  font-weight: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 0 var(--ink);
  color: var(--ink);
  background: color-mix(in srgb, var(--c) 13%, var(--card));
  transition: transform .08s, box-shadow .08s;
}
.pick-red { --c: var(--red); --c-ink: var(--red-ink); }
.pick-blue { --c: var(--blue); --c-ink: var(--blue-ink); }
.pick-ref { --c: var(--amber); --c-ink: var(--ink); }
/* Unselected: pale tile with an empty ring in the team colour. Selected: full colour, lifted, ticked dot. */
.pick i { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--c-ink); background: var(--card) no-repeat center / 18px; }
.pick:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.pick[aria-checked="true"] { background: var(--c); color: #FFFFFF; transform: translateY(-3px); box-shadow: 0 7px 0 var(--ink); }
.pick[aria-checked="true"] i { border-color: var(--ink); background-color: #FFFFFF; }
.pick-red[aria-checked="true"] i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23C9381C' stroke-width='3.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.pick-blue[aria-checked="true"] i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%231F5FD0' stroke-width='3.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.pick-ref[aria-checked="true"] { color: var(--ink); }
.pick-ref[aria-checked="true"] i { background-color: var(--ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23FDB400' stroke-width='3.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.pick-row.nudge { animation: shake .35s; }
.foot-link { align-self: center; padding: 8px 12px; color: var(--muted); font-size: 14px; font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }

/* ───────── message screens */
.msg { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 420px; }
.msg h1 { font-size: 28px; font-weight: 900; line-height: 1.3; }
.msg p { font-size: 17px; color: var(--muted); line-height: 1.7; }
.msg .btn { margin-top: 8px; min-width: 220px; }
.msg-icon {
  width: 84px;
  height: 84px;
  border-radius: 28px;
  display: grid;
  place-items: center;
  background: var(--amber);
  color: var(--ink);
  border: var(--bw) solid var(--ink);
  box-shadow: 0 var(--sh) 0 var(--ink);
  flex: none;
}
.msg-icon svg { width: 46px; height: 46px; }
.msg-icon.bare { background: none; border: 0; box-shadow: none; }
.spin { width: 44px; height: 44px; border-radius: 50%; border: 6px solid var(--well); border-top-color: var(--ink); animation: spin .9s linear infinite; }
.conn .spin { width: 16px; height: 16px; border-width: 3px; border-color: rgba(18, 48, 79, .22); border-top-color: var(--ink); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ───────── lobby */
.me-card {
  border-radius: 26px;
  padding: 20px 18px 22px;
  text-align: center;
  background: var(--team);
  color: var(--on-team);
  border: var(--bw) solid var(--ink);
  box-shadow: 0 7px 0 var(--ink);
}
.me-role { font-size: 19px; font-weight: 900; } /* ≥ 18.7px heavy: large text on the team colour */
.me-name { font-size: 40px; font-weight: 900; line-height: 1.25; margin-top: 4px; word-break: break-word; }
.wait-line { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 19px; font-weight: 900; color: var(--ink); padding: 4px 0; }
.dots { display: inline-flex; gap: 6px; }
.dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--amber); border: 2px solid var(--ink); animation: dot 1.2s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .15s; }
.dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 80%, 100% { opacity: .35; transform: scale(.8); } 40% { opacity: 1; transform: scale(1.15); } }
.rosters { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.roster { background: var(--card); border: var(--bw) solid var(--ink); border-radius: 18px; overflow: hidden; box-shadow: 0 4px 0 var(--ink); }
.roster h3 { margin: 0; padding: 9px 12px; font-size: 16px; font-weight: 900; display: flex; justify-content: space-between; color: #FFFFFF; border-bottom: var(--bw) solid var(--ink); }
.roster.red h3 { background: var(--red-ink); }
.roster.blue h3 { background: var(--blue-ink); }
.roster ul { list-style: none; margin: 0; padding: 6px 12px 10px; }
.roster li { padding: 6px 0; font-size: 16px; font-weight: 700; border-bottom: 2px solid var(--line); word-break: break-word; }
.roster li:last-child { border-bottom: 0; }
.roster li.me { font-weight: 900; background: var(--amber-hi); border-radius: 10px; padding-inline: 8px; margin-inline: -6px; border-bottom-color: transparent; }
.roster .empty { color: var(--faint); font-size: 14px; }

/* ───────── phase screens */
.phase { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 8px 4px; }
.kicker {
  display: inline-block;
  font-size: 15px;
  font-weight: 900;
  color: var(--ink);
  background: var(--amber);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  padding: 3px 14px;
  box-shadow: 0 3px 0 var(--ink);
}
.big-title { font-size: 40px; font-weight: 900; line-height: 1.3; color: var(--amber); padding: 0 .12em; }
.sub-title { font-size: 24px; font-weight: 900; color: var(--muted); }
.howto { font-size: 17px; font-weight: 600; color: var(--muted); line-height: 1.7; max-width: 420px; }
.phase .clock-box { margin-top: 8px; }
.score-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 420px; margin-top: 8px; }
.score-duo div { border-radius: 22px; padding: 16px 8px; color: #FFFFFF; border: var(--bw) solid var(--ink); box-shadow: 0 6px 0 var(--ink); }
.score-duo .red { background: var(--red-ink); }
.score-duo .blue { background: var(--blue-ink); }
.score-duo b { display: block; font-size: 44px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.2; }
.score-duo span { font-size: 15px; font-weight: 800; }
.final-scr {
  position: fixed; /* full screen, also under the landscape safe areas (the header is hidden here) */
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: calc(24px + var(--safe-t)) calc(16px + var(--safe-r)) calc(24px + var(--safe-b)) calc(16px + var(--safe-l));
  text-align: center;
  overflow: hidden;
}
/* Game-show sunburst in the winner's colour. */
.final-scr.red { background: repeating-conic-gradient(from 0deg at 50% 32%, var(--red) 0 9deg, #F85E41 9deg 18deg); }
.final-scr.blue { background: repeating-conic-gradient(from 0deg at 50% 32%, var(--blue) 0 9deg, #4590FA 9deg 18deg); }
.final-scr.draw { background: repeating-conic-gradient(from 0deg at 50% 32%, var(--paper) 0 9deg, var(--well) 9deg 18deg); }
.final-scr .big-title { --o: .085em; --od: .07em; font-size: 46px; }
.final-scr .msg-icon { width: 110px; height: 110px; border-radius: 36px; box-shadow: 0 7px 0 var(--ink); }
.final-scr .msg-icon svg { width: 64px; height: 64px; }
.final-scr .score-duo { position: relative; }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 11px; height: 17px; border-radius: 3px; border: 2px solid var(--ink); animation: fall linear infinite; }
@keyframes fall { to { transform: translateY(110vh) rotate(540deg); } }

/* ───────── timers (points and clocks are amber stickers) */
.clock-box {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 18px 8px;
  border-radius: 18px;
  background: var(--amber);
  color: var(--ink);
  border: var(--bw) solid var(--ink);
  box-shadow: 0 4px 0 var(--ink);
  min-width: 120px;
}
.clock-box .cl-l { font-size: 13px; font-weight: 800; }
.clock-box [data-clock] { font-size: 36px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.1; }
/* Build 20 («الأقرب», «صح ولا خطأ»): the clock ran out, the answers wait for «اكشف». */
.clock-box .cl-wait { font-size: 22px; font-weight: 900; line-height: 1.3; }
[data-clock].low { color: var(--red-ink); }
[data-clock].frozen { color: var(--faint); }
.clock-box [data-clock].low, .rt-clock [data-clock].low { color: inherit; }
.clock-box [data-clock].frozen, .rt-clock [data-clock].frozen { color: inherit; opacity: .6; }
/* The last 3 s: the whole clock turns red-orange. */
.clock-box:has([data-clock].low), .rt-clock:has([data-clock].low) { background: var(--red-ink); color: #FFFFFF; }
/* لا تشوف: the clock in the time's colour, bigger digits (tickClocks sets data-zone). */
.clock-box[data-zone], .rt-clock[data-zone] { color: var(--ink); transition: background-color .3s; }
.clock-box[data-zone="green"], .rt-clock[data-zone="green"] { background: var(--clock-green); }
.clock-box[data-zone="blue"], .rt-clock[data-zone="blue"] { background: var(--clock-blue); }
.clock-box[data-zone="yellow"], .rt-clock[data-zone="yellow"] { background: var(--clock-yellow); }
.clock-box[data-zone="red"], .rt-clock[data-zone="red"] { background: var(--clock-red); }
.rt-clock[data-zone] { min-width: 78px; }
.rt-clock[data-zone] [data-clock] { font-size: 32px; }
.clock-box[data-zone] [data-clock] { font-size: 44px; }

/* ───────── buzzer: a round game-show button (the cap) centred in the screen; only the cap presses (app.js onCap) */
.buzz-scr { padding: 12px 16px calc(16px + var(--safe-b)); gap: 8px; }
.bz-info { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; font-size: 15px; color: var(--muted); font-weight: 700; }
.bz-info b { color: var(--ink); font-weight: 900; }
.buzzer {
  --D: min(86vw, 50vh); /* cap diameter (container query units below) */
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.bz-cap {
  --cap: var(--well);
  position: relative;
  cursor: pointer;
  width: var(--D);
  height: var(--D);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--D) * .02);
  padding: calc(var(--D) * .1);
  text-align: center;
  overflow: hidden;
  background: var(--cap);
  color: var(--ink);
  border: 6px solid var(--ink);
  box-shadow: 0 12px 0 var(--ink), inset 0 -12px 0 rgba(18, 48, 79, .13);
  transition: translate .06s, box-shadow .06s;
  margin-bottom: 12px; /* room for the hard shadow */
}
/* The logo microphone's highlight: a flat light crescent on the upper left. */
.bz-cap::before {
  content: "";
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  box-shadow: inset calc(var(--D) * .035) calc(var(--D) * .03) 0 rgba(255, 255, 255, .22);
  pointer-events: none;
}
.bz-ring { position: absolute; inset: 6%; border-radius: 50%; border: 5px solid transparent; pointer-events: none; }
.bz-big {
  --o: .06em;
  --od: .04em;
  --oc: transparent;
  position: relative;
  font-size: clamp(36px, calc(var(--D) * .2), 104px);
  font-weight: 900;
  line-height: 1.15;
  word-break: break-word;
  max-width: 100%;
}
.bz-small { position: relative; font-size: max(19px, calc(var(--D) * .056)); font-weight: 800; line-height: 1.45; min-height: 1.45em; } /* ≥ 18.7px heavy: large text on team colours */
.bz-clock { position: relative; font-size: clamp(30px, calc(var(--D) * .13), 64px); font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.1; }
.bz-clock [data-clock] { display: inline-block; min-width: 2em; padding: 0 .35em; border-radius: 999px; background: var(--amber); color: var(--ink); border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.bz-clock [data-clock].low { background: var(--red-ink); color: #FFFFFF; }
.bz-clock [data-clock].frozen { color: var(--ink); opacity: .7; }
.bz-clock:empty, .bz-clock span:empty { display: none; }

/* «كمّل المثل»: the proverb's first half (PROTOCOL §4 `proverb`), a cream sticker card with an amber kicker and the
   gap still to fill. Above the buzzer (it shrinks the button, never the text) and on the spectators' screen. */
.pv-card { width: 100%; max-width: 520px; background: var(--card); border: var(--bw) solid var(--ink); border-radius: 18px; box-shadow: 0 var(--sh) 0 var(--ink); padding: 10px 14px 12px; text-align: center; }
.pv-kicker { display: inline-block; background: var(--amber); color: var(--ink); border: 2px solid var(--ink); border-radius: 999px; padding: 1px 12px; font-size: 14px; font-weight: 900; }
.pv-text { margin-top: 6px; font-size: clamp(22px, 6.4vw, 32px); font-weight: 900; line-height: 1.45; color: var(--ink); word-break: break-word; }
.pv-gap { display: inline-block; min-width: 2.4em; padding: 0 .3em; border: 2px dashed rgba(18, 48, 79, .55); border-radius: 999px; background: var(--well); color: var(--muted); line-height: 1.2; }
.bz-prompt { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.item-q .pv-gap { font-size: .8em; }

/* Waiting / closed: a quiet deeper-cream button. */
.buzzer[data-s="wait"] .bz-big, .buzzer[data-s="closed"] .bz-big, .buzzer[data-s="inel"] .bz-big { font-size: clamp(32px, calc(var(--D) * .15), 72px); }
.buzzer[data-s="wait"] .bz-small, .buzzer[data-s="closed"] .bz-small { color: var(--muted); }
/* استعد: lighter cream with an amber ring that breathes. Do not press yet. */
.buzzer[data-s="ready"] .bz-cap { --cap: var(--card); }
.buzzer[data-s="ready"] .bz-ring { border-color: var(--amber); animation: breathe 1.1s ease-in-out infinite; }
.buzzer[data-s="ready"] .bz-small { color: var(--muted); }
/* اضغط!: the team colour at once (no transition on the GO frame). */
.buzzer[data-s="go"] .bz-cap { --cap: var(--team); color: var(--on-team); transition: none; }
.buzzer[data-s="go"] .bz-ring { border-color: rgba(255, 255, 255, .6); animation: ring .7s ease-out infinite; }
.buzzer[data-s="go"] .bz-big, .buzzer[data-s="pressed"] .bz-big, .buzzer[data-s="lost"][data-w] .bz-big { --oc: var(--ink); }
.buzzer[data-s="early"] .bz-cap { --cap: var(--amber); animation: shake .35s; }
.buzzer[data-s="pressed"] .bz-cap { --cap: var(--team-d); color: var(--on-team); translate: 0 9px; box-shadow: 0 3px 0 var(--ink), inset 0 -8px 0 rgba(18, 48, 79, .13); }
/* أنت!: own team colour inside an amber + navy ring; the word in the logo's lettering. */
.buzzer[data-s="won"] .bz-cap { --cap: var(--team); color: var(--on-team); box-shadow: 0 0 0 7px var(--amber), 0 0 0 11px var(--ink), 0 12px 0 11px var(--ink), inset 0 -12px 0 rgba(18, 48, 79, .13); }
.buzzer[data-s="won"] .bz-big { --oc: var(--ink); --o: .075em; --od: .06em; color: var(--amber); font-size: clamp(40px, calc(var(--D) * .23), 116px); animation: pop .5s cubic-bezier(.2, 1.6, .4, 1); }
/* Someone else won: the winner's team colour (deep), their name in white. */
.buzzer[data-s="lost"] .bz-big { font-size: clamp(32px, calc(var(--D) * .15), 80px); }
.buzzer[data-s="lost"][data-w="red"] .bz-cap { --cap: var(--red-d); color: #FFFFFF; }
.buzzer[data-s="lost"][data-w="blue"] .bz-cap { --cap: var(--blue-d); color: #FFFFFF; }
.buzzer[data-s="inel"] .bz-cap { color: var(--faint); }
.buzzer[data-s="inel"] .bz-big { font-size: clamp(30px, calc(var(--D) * .12), 64px); }
/* Host lockout after a false start: amber hazard stripes. */
.buzzer[data-s="locked"] .bz-cap { --cap: repeating-linear-gradient(-45deg, var(--amber) 0 22px, var(--amber-hi) 22px 44px); }
/* الصور before the picture: grey and pressable (a press locks the team); the team's lock: striped, with 3-2-1. */
.buzzer[data-s="pre"] .bz-cap { --cap: var(--well); }
.buzzer[data-s="pre"] .bz-big { font-size: clamp(30px, calc(var(--D) * .12), 64px); }
.buzzer[data-s="pre"] .bz-small { color: var(--muted); }
.buzzer[data-s="penalty"] .bz-cap { --cap: repeating-linear-gradient(-45deg, var(--amber) 0 22px, var(--amber-hi) 22px 44px); }
.buzzer[data-s="penalty"] .bz-big { font-size: clamp(28px, calc(var(--D) * .11), 60px); }
.buzzer[data-s="penalty"] .bz-small { font-size: clamp(40px, calc(var(--D) * .2), 96px); font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.1; }
.buzzer:not([data-s="go"]):not([data-s="ready"]):not([data-s="pre"]) { cursor: default; }
@supports (width: 1cqmin) {
  .buzzer { container-type: size; }
  .bz-cap { --D: calc(100cqmin - 34px); margin-bottom: 0; translate: 0 -6px; }
  .buzzer[data-s="pressed"] .bz-cap { translate: 0 3px; }
}
@keyframes breathe { 50% { opacity: .35; transform: scale(.97); } }
@keyframes ring { from { transform: scale(1); opacity: 1; } to { transform: scale(1.08); opacity: 0; } }
@keyframes shake { 20% { transform: translateX(-10px); } 40% { transform: translateX(10px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(6px); } }
@keyframes pop { from { transform: scale(.4); } to { transform: scale(1); } }

/* ───────── referee */
.ref { --bar-h: 180px; }
.ref-top {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px calc(14px + var(--safe-r)) 10px calc(14px + var(--safe-l));
  margin-left: calc(-1 * var(--safe-l));
  margin-right: calc(-1 * var(--safe-r));
  background: var(--card);
  border-bottom: var(--bw) solid var(--ink);
  min-height: 56px;
}
.rt-main { flex: 1; min-width: 0; }
.rt-title { font-size: 17px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-sub { font-size: 14px; color: var(--muted); font-weight: 700; margin-top: 3px; }
.rt-sub b { color: var(--ink); }
.pts { color: var(--ink); background: var(--amber); border-radius: 8px; padding: 0 6px; font-weight: 900; }
.rt-clock {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 64px;
  padding: 3px 10px 4px;
  border-radius: 14px;
  background: var(--amber);
  color: var(--ink);
  border: 2.5px solid var(--ink);
  box-shadow: 0 3px 0 var(--ink);
}
.rt-clock .cl-l { font-size: 11px; font-weight: 800; white-space: nowrap; }
.rt-clock [data-clock] { font-size: 26px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.1; }
.step { display: inline-block; padding: 0 9px; border-radius: 999px; font-size: 13px; font-weight: 900; background: var(--well); color: var(--ink); border: 2px solid var(--ink); }
.step.hot { background: var(--amber); }
.step.red { background: var(--red-ink); color: #FFFFFF; }
.step.blue { background: var(--blue-ink); color: #FFFFFF; }
.ref-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  position: relative; /* offsetTop of items is measured from here */
  padding: 14px 12px calc(var(--bar-h) + 16px);
}
.ref-bar {
  position: absolute;
  left: calc(-1 * var(--safe-l)); /* background to the screen edges, buttons inside the safe area */
  right: calc(-1 * var(--safe-r));
  bottom: 0;
  z-index: 10;
  padding: 10px calc(12px + var(--safe-r)) calc(12px + var(--safe-b)) calc(12px + var(--safe-l));
  background: var(--card);
  border-top: var(--bw) solid var(--ink);
  box-shadow: 0 -6px 0 rgba(18, 48, 79, .07);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ref-bar:empty { display: none; }
.bar-status { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; font-size: 17px; font-weight: 900; text-align: center; min-height: 26px; }
.bar-status .muted { color: var(--muted); font-weight: 700; }
.bar-status .small { font-size: 14px; }
.lock-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 12px; border-radius: 999px; font-size: 16px; font-weight: 900; color: #FFFFFF; border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.lock-chip.red { background: var(--red-ink); }
.lock-chip.blue { background: var(--blue-ink); }
.lock-chip b { min-width: 1.6em; padding: 0 6px; border-radius: 999px; background: #FFFFFF; color: var(--ink); text-align: center; font-variant-numeric: tabular-nums; }
.bar-hint { margin: -2px 2px 0; font-size: 14px; font-weight: 700; line-height: 1.55; color: var(--muted); text-align: center; }
.ans-hl { background: var(--amber-wash); border: 2px solid var(--ink); border-radius: 10px; padding: 0 8px; font-weight: 900; }
.bar-row { display: flex; gap: 10px; }
.bar-row > .btn { flex: 1; min-width: 0; padding-inline: 10px; white-space: nowrap; }
.bar-row .btn-big { min-height: 76px; font-size: clamp(20px, 6.6vw, 26px); }
.bar-row .btn-undo { flex: 0 0 auto; min-width: 96px; font-size: 16px; }
.btn-undo.armed, .bar-row .btn.armed { background: var(--ink); color: var(--amber-hi); } /* waiting for the second tap */
.bar-row .btn-ghost.armed { font-size: 17px; white-space: normal; } /* narrow phones: may wrap to two lines */
.answerer { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; font-size: 19px; font-weight: 900; color: #FFFFFF; border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.answerer.red { background: var(--red-ink); }
.answerer.blue { background: var(--blue-ink); }
.answerer small { font-size: 13px; font-weight: 800; }
.answerer [data-clock] { font-variant-numeric: tabular-nums; min-width: 1.4em; display: inline-block; text-align: center; background: var(--ink); color: #FFFFFF; border-radius: 999px; padding: 0 8px; }
.answerer [data-clock].low { background: var(--amber); color: var(--ink); }
.answerer [data-clock].frozen { color: #FFFFFF; opacity: .7; }
.times-up { color: var(--red-ink); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .35; } }

/* buzz items list */
.items { display: flex; flex-direction: column; gap: 12px; }
.item {
  background: var(--card);
  border: 2px solid rgba(18, 48, 79, .28);
  border-radius: 18px;
  padding: 12px 14px;
  scroll-margin-top: 12px;
}
.item-h { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: var(--muted); }
.item-h .n { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--well); color: var(--ink); font-size: 16px; font-weight: 900; border: 2px solid var(--ink); }
.item-h .res { margin-inline-start: auto; }
.item-q { margin-top: 8px; font-size: 17px; line-height: 1.7; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.item-a { margin-top: 6px; font-size: 16px; font-weight: 900; color: var(--ink); }
.item-a .al { font-size: 13px; color: var(--faint); font-weight: 700; margin-inline-end: 6px; }
.item-hint { margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--faint); }
.item-acc, .item-note { margin-top: 4px; font-size: 14px; color: var(--muted); line-height: 1.6; }
.item-note { color: var(--ink); border-inline-start: 4px solid var(--amber); padding-inline-start: 8px; }
.item:not(.cur):not(.peek) .item-acc, .item:not(.cur):not(.peek) .item-note { display: none; }
.item.done { opacity: .55; }
.item.cur { border: var(--bw) solid var(--ink); box-shadow: 0 var(--sh) 0 var(--ink); opacity: 1; }
.item.peek { border-color: var(--ink); }
.item.cur .item-h .n { background: var(--amber); }
.item.cur .item-q, .item.peek .item-q { -webkit-line-clamp: unset; display: block; color: var(--ink); }
.item.cur .item-q { font-size: 24px; font-weight: 700; line-height: 1.75; }
.item.cur .item-a { font-size: 22px; margin-top: 10px; padding: 10px 12px; border-radius: 14px; background: var(--amber-wash); border: 2px solid var(--ink); }
.item.pic.cur .item-a { font-size: 30px; }
.res-chip { padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 900; background: var(--well); color: var(--ink); border: 2px solid var(--ink); }
.res-chip.red { background: var(--red-ink); color: #FFFFFF; }
.res-chip.blue { background: var(--blue-ink); color: #FFFFFF; }

/* stories */
.strip { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.strip i { font-style: normal; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 900; background: var(--card); color: var(--ink); border: 2px solid var(--ink); }
.strip i.red { background: var(--red-ink); color: #FFFFFF; }
.strip i.blue { background: var(--blue-ink); color: #FFFFFF; }
.strip i.none { background: var(--well); color: var(--faint); border-color: rgba(18, 48, 79, .4); }
.strip i.cur { background: var(--amber); color: var(--ink); transform: scale(1.15); box-shadow: 0 2px 0 var(--ink); }
.ans-box { background: var(--amber-wash); border: var(--bw) solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--ink); padding: 10px 14px; margin-bottom: 14px; }
.ans-box .a { font-size: 22px; font-weight: 900; color: var(--ink); }
.ans-box .acc { font-size: 14px; color: var(--muted); margin-top: 2px; line-height: 1.6; }
.ans-box .item-note { color: var(--ink); }
.story { font-size: 24px; line-height: 2; font-weight: 500; white-space: pre-wrap; padding: 4px 2px 8px; }

/* TOP 10 */
.q { font-size: 21px; font-weight: 900; line-height: 1.7; margin-bottom: 14px; }
.ranks { display: flex; flex-direction: column; gap: 10px; }
.rank {
  width: 100%;
  min-height: 60px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: var(--bw) solid var(--ink);
  border-radius: 16px;
  background: var(--card);
  color: var(--ink);
  text-align: start;
  box-shadow: 0 4px 0 var(--ink);
  transition: transform .06s, box-shadow .06s;
}
.rank:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.rank .rk { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; font-weight: 900; background: var(--well); border: 2px solid var(--ink); }
.rank .rt { flex: 1; min-width: 0; }
.rank .rt b { display: block; font-size: 19px; font-weight: 900; }
.rank .rt small { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; line-height: 1.5; }
.rank .rp { flex: none; font-size: 15px; font-weight: 900; color: var(--ink); background: var(--amber); border: 2px solid var(--ink); border-radius: 10px; padding: 1px 8px; }
.rank:disabled { cursor: default; }
/* Revealed: pressed in, in the revealing team's colour. */
.rank.red, .rank.blue { color: #FFFFFF; transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.rank.red { background: var(--red-ink); }
.rank.blue { background: var(--blue-ink); }
.rank.red .rk, .rank.blue .rk { background: var(--card); color: var(--ink); }
.rank.red .rt small, .rank.blue .rt small { color: #FFFFFF; }
.rank.red .rp, .rank.blue .rp { color: #FFFFFF; background: transparent; border-color: transparent; }
.ranks.locked .rank:not(.red):not(.blue) { opacity: .6; box-shadow: 0 2px 0 var(--ink); }
/* TOP 10 ranks 11 and 12: penalty answers, light red like the TV boxes, also once revealed (build 21). */
.rank-pen-h { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 15px; font-weight: 900; color: var(--red-ink); }
.rank-pen-h svg { width: 16px; height: 16px; }
.rank.pen, .rank.pen.red, .rank.pen.blue { background: #FF8B7B; color: var(--ink); }
.rank.pen .rk, .rank.pen.red .rk, .rank.pen.blue .rk { background: var(--card); color: var(--ink); }
.rank.pen .rp, .rank.pen.red .rp, .rank.pen.blue .rp { background: var(--card); color: var(--ink); border-color: var(--ink); }
.rank.pen.red .rt small, .rank.pen.blue .rt small { color: var(--ink); }
.t10-res.pen .t10-res-k { color: var(--red-ink); }

/* لا تشوف (referee) */
.dl-info { display: flex; align-items: center; gap: 10px; background: var(--card); border: var(--bw) solid var(--ink); border-radius: 16px; padding: 10px 14px; margin-bottom: 12px; font-size: 16px; font-weight: 700; }
.dl-info .st { margin-inline-start: auto; font-weight: 900; }
.dl-info .ok { color: var(--ok-ink); }
.dl-info .warn { color: var(--red-ink); }
.dl-rules { margin-bottom: 12px; font-size: 14px; color: var(--muted); }
.dl-rules summary { cursor: pointer; font-weight: 800; padding: 6px 0; color: var(--ink); }
.dl-rules p { line-height: 1.7; }
.dl-items { display: flex; flex-direction: column; gap: 10px; }
.dl-row { display: flex; gap: 8px; }
.dl-main {
  flex: 1;
  min-width: 0;
  min-height: 60px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border: var(--bw) solid var(--ink);
  border-radius: 16px;
  background: var(--card);
  color: var(--ink);
  text-align: start;
  font-size: 20px;
  font-weight: 900;
  box-shadow: 0 4px 0 var(--ink);
  transition: transform .06s, box-shadow .06s;
}
.dl-main:active:not(:disabled), .dl-foul:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.dl-main .mk { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--ink); background: var(--paper); display: grid; place-items: center; }
.dl-main .mk svg { width: 20px; height: 20px; }
/* «ألوان العلم»: the flag next to the word (referee and explainer phones only) */
.dl-flag, .exp-flag { flex: none; display: block; object-fit: contain; background: #FFFFFF; border: 2px solid var(--ink); border-radius: 5px; }
.dl-flag { width: 46px; height: 35px; }
.dl-row.foul .dl-flag { opacity: .5; }
.dl-foul { flex: none; width: 84px; min-height: 60px; border: var(--bw) solid var(--ink); border-radius: 16px; background: var(--card); color: var(--ink); font-size: 15px; font-weight: 900; box-shadow: 0 4px 0 var(--ink); transition: transform .06s, box-shadow .06s; }
.dl-row.correct .dl-main { background: var(--ok); color: #FFFFFF; } /* 20px heavy: large text */
.dl-row.correct .dl-main .mk { background: #FFFFFF; color: var(--ok-ink); }
.dl-row.foul .dl-main { background: var(--well); color: var(--faint); text-decoration: line-through; }
.dl-row.foul .dl-foul { background: var(--red-ink); color: #FFFFFF; }
.dl-items.off .dl-main, .dl-items.off .dl-foul { box-shadow: 0 2px 0 var(--ink); }
.dl-main:disabled, .dl-foul:disabled { cursor: default; }
.dl-items.off .dl-foul { opacity: .4; }
.dl-count { font-size: 15px; color: var(--muted); font-weight: 700; }
.dl-count b { color: var(--ok-ink); font-size: 20px; font-weight: 900; }
.dl-bonus { padding: 2px 12px; border-radius: 999px; background: var(--amber); color: var(--ink); border: 2px solid var(--ink); font-size: 15px; font-weight: 900; }

/* ───────── explainer */
.exp { padding: 12px 14px calc(16px + var(--safe-b)); gap: 14px; overflow-y: auto; }
.exp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.exp-head .rt-clock [data-clock] { font-size: 34px; }
.exp-head .rt-clock[data-zone] [data-clock] { font-size: 40px; }
.exp-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(64px, 1fr); gap: 10px; padding-bottom: 3px; }
.exp-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px;
  border-radius: 16px;
  background: var(--card);
  color: var(--ink);
  border: var(--bw) solid var(--ink);
  box-shadow: 0 3px 0 var(--ink);
  font-size: clamp(19px, 5.6vw, 28px);
  font-weight: 900;
  line-height: 1.3;
  word-break: break-word;
  position: relative;
}
.exp-tile.correct { background: var(--ok); color: #FFFFFF; } /* ≥ 19px heavy: large text */
.exp-tile.correct::after, .exp-tile.foul::after { position: absolute; top: 4px; inset-inline-start: 8px; font-size: 17px; font-weight: 900; }
.exp-tile.correct::after { content: "✓"; }
.exp-tile.foul { background: var(--well); color: var(--faint); text-decoration: line-through; box-shadow: none; }
.exp-tile.foul::after { content: "✕"; color: var(--red-ink); }
.exp-grid.pics { grid-auto-rows: minmax(58px, 1fr); gap: 8px; }
.exp-grid.pics .exp-tile { justify-content: flex-start; gap: 8px; padding: 6px 8px; text-align: start; font-size: clamp(16px, 4.5vw, 24px); line-height: 1.25; }
.exp-flag { width: clamp(40px, 12vw, 64px); aspect-ratio: 4 / 3; height: auto; }
.exp-tile.foul .exp-flag { opacity: .5; }
.exp-grid.pics .exp-tile.correct::after, .exp-grid.pics .exp-tile.foul::after { inset-inline-start: auto; inset-inline-end: 7px; }
.exp-wait { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; }
.exp-rules { background: var(--card); border: var(--bw) solid var(--ink); border-radius: 18px; box-shadow: 0 4px 0 var(--ink); padding: 12px 16px 14px; font-size: 18px; font-weight: 600; line-height: 1.8; text-align: start; width: 100%; }
.exp-rules b { display: table; color: var(--ink); background: var(--amber); border: 2px solid var(--ink); border-radius: 8px; padding: 0 8px; font-size: 14px; font-weight: 900; margin-bottom: 6px; }
.count-big { --o: .045em; --od: .04em; font-size: 160px; font-weight: 900; line-height: 1.1; color: var(--team); font-variant-numeric: tabular-nums; }
.exp .btn-xl { width: 100%; min-height: 76px; font-size: 28px; flex: none; }

/* ───────── اللي عندك: a team player's word, the referee's two words */
.wyh { gap: 16px; }
.wyh-info { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 15px; font-weight: 700; color: var(--muted); }
.wyh-info b { color: var(--ink); font-weight: 900; }
.wyh-pips { display: flex; justify-content: center; gap: 10px; }
.wyh-pips i { font-style: normal; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 900; background: var(--well); color: var(--faint); border: 2px solid rgba(18, 48, 79, .4); }
.wyh-pips i.red { background: var(--red-ink); color: #FFFFFF; border-color: var(--ink); box-shadow: 0 2px 0 var(--ink); }
.wyh-pips i.blue { background: var(--blue-ink); color: #FFFFFF; border-color: var(--ink); box-shadow: 0 2px 0 var(--ink); }
.wyh-pips i.none { background: #66768A; color: #FFFFFF; border-color: var(--ink); }
.wyh-pips i.both { background: linear-gradient(90deg, var(--blue-ink) 50%, var(--red-ink) 50%); color: #FFFFFF; border-color: var(--ink); box-shadow: 0 2px 0 var(--ink); }
/* «برا السالفة» (build 16): a vote that found the outsider earns +100 for the voter's team. */
.os-plus { display: inline-block; margin-inline-start: 6px; padding: 0 7px; border-radius: 999px; font-size: 12px; font-weight: 900; color: #FFFFFF; background: var(--ink); }
.os-plus.red { background: var(--red-ink); }
.os-plus.blue { background: var(--blue-ink); }
.os-plus.undone { text-decoration: line-through; opacity: .7; }
.os-points { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 6px 0; }
.os-points span { padding: 4px 12px; border-radius: 999px; font-weight: 900; border: 2px solid var(--ink); background: var(--well); color: var(--ink); }
.os-points span.red.on { background: var(--red-ink); color: #FFFFFF; }
.os-points span.blue.on { background: var(--blue-ink); color: #FFFFFF; }
.os-points.undone span { text-decoration: line-through; }
.wyh-pips i.cur { background: var(--amber); color: var(--ink); border-color: var(--ink); transform: scale(1.12); box-shadow: 0 2px 0 var(--ink); }
.wyh-card { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 20px 16px 18px; color: #FFFFFF; }
.wyh-card.red { background: var(--red-ink); }
.wyh-card.blue { background: var(--blue-ink); }
.wyh-k { font-size: 16px; font-weight: 900; color: var(--ink); background: var(--card); border: 2.5px solid var(--ink); border-radius: 999px; padding: 3px 14px; }
.wyh-word { font-size: clamp(30px, 10vw, 48px); font-weight: 900; line-height: 1.3; word-break: break-word; overflow-wrap: anywhere; padding: 4px 0; }
.wyh-warn { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 800; background: rgba(18, 48, 79, .28); border-radius: 999px; padding: 4px 12px; }
.wyh-warn svg { width: 18px; height: 18px; flex: none; }
.wyh-st { text-align: center; font-size: 19px; font-weight: 900; line-height: 1.5; padding: 10px 14px; border-radius: 16px; background: var(--card); border: 2.5px solid var(--ink); }
.wyh-st.win.red { background: var(--red-ink); color: #FFFFFF; }
.wyh-st.win.blue { background: var(--blue-ink); color: #FFFFFF; }
.wyh-st.last { background: var(--amber); }
.ref .wyh-pips { margin-bottom: 14px; }
.wyh-words { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 340px) { .wyh-words { grid-template-columns: 1fr; } }
.wyh-wcard { min-width: 0; background: var(--card); border: var(--bw) solid var(--ink); border-radius: 18px; box-shadow: 0 4px 0 var(--ink); padding: 10px 12px 12px; }
.wyh-wcard.red { border-top: 8px solid var(--red-ink); }
.wyh-wcard.blue { border-top: 8px solid var(--blue-ink); }
.wyh-wk { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; font-weight: 700; color: var(--muted); }
.wyh-wk .rep-btn { margin-inline-start: auto; }
.wyh-ww { margin-top: 8px; font-size: clamp(20px, 6.4vw, 30px); font-weight: 900; line-height: 1.35; word-break: break-word; overflow-wrap: anywhere; }
.wyh-wcard .item-acc, .wyh-wcard .item-note { display: block; }
.bar-row .btn-win { white-space: normal; font-size: clamp(15px, 4.4vw, 19px); min-height: 60px; color: #FFFFFF; }
.bar-row .btn-win.red { background: var(--red-ink); }
.bar-row .btn-win.blue { background: var(--blue-ink); }
.bar-row .btn-win svg { width: 18px; height: 18px; }
/* ماذا تعرف: «إجابة صحيحة أخرى» beside «خطأ / مكررة · يفوز …» wraps like it on narrow phones */
.bar-row .btn-ok.wk-other { white-space: normal; font-size: clamp(15px, 4.4vw, 19px); min-height: 60px; }
.bar-row .btn-ok.wk-other svg { width: 18px; height: 18px; }
.bar-row .btn-nowin { font-size: clamp(15px, 4.4vw, 18px); white-space: normal; }

/* ───────── ولا كلمة: the actor's answer, everyone else's status card, the referee's answer card */
.nw { gap: 14px; }
.nw .btn-xl { width: 100%; min-height: 76px; font-size: 28px; flex: none; }
.step.warn { background: var(--red-ink); color: #FFFFFF; }
.nw-diff-chip { flex: none; font-size: 15px; font-weight: 900; color: var(--ink); background: var(--amber); border: 2.5px solid var(--ink); border-radius: 999px; padding: 3px 12px; box-shadow: 0 2px 0 var(--ink); white-space: nowrap; }
.nw-pips { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.nw-pips i { font-style: normal; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 900; color: var(--ink); border: 2px solid rgba(18, 48, 79, .4); background: var(--well); }
.nw-pips i.to-red { background: #FDDCD3; border-color: rgba(201, 56, 28, .6); }
.nw-pips i.to-blue { background: #DCE8FD; border-color: rgba(31, 95, 208, .6); }
.nw-pips i.red { background: var(--red-ink); color: #FFFFFF; border-color: var(--ink); box-shadow: 0 2px 0 var(--ink); }
.nw-pips i.blue { background: var(--blue-ink); color: #FFFFFF; border-color: var(--ink); box-shadow: 0 2px 0 var(--ink); }
.nw-pips i.none { background: #66768A; color: #FFFFFF; border-color: var(--ink); }
.nw-pips i.cur { background: var(--amber); border-color: var(--ink); transform: scale(1.12); box-shadow: 0 2px 0 var(--ink); }
.ref .nw-pips { margin-bottom: 12px; }
.nw-answer { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 18px 14px 16px; color: #FFFFFF; }
.nw-answer.red { background: var(--red-ink); }
.nw-answer.blue { background: var(--blue-ink); }
.nw-word { font-size: clamp(34px, 11vw, 56px); font-weight: 900; line-height: 1.25; word-break: break-word; overflow-wrap: anywhere; padding: 2px 0; }
.nw-pic { display: block; max-width: 100%; max-height: 36vh; width: auto; height: auto; object-fit: contain; background: #FFFFFF; border: 3px solid var(--ink); border-radius: 14px; }
.nw-status { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 16px 14px 18px; }
.nw-status.red { border-top: 10px solid var(--red-ink); }
.nw-status.blue { border-top: 10px solid var(--blue-ink); }
.nw-status.missed { opacity: .85; }
.nw-who { font-size: 14px; font-weight: 900; color: var(--ink); background: var(--amber); border: 2px solid var(--ink); border-radius: 999px; padding: 2px 12px; }
.nw-team { font-size: clamp(24px, 8vw, 34px); font-weight: 900; line-height: 1.3; }
.nw-diff { font-size: 18px; font-weight: 900; color: var(--muted); }
.nw-actor { font-size: 17px; font-weight: 700; }
.nw-actor b { font-weight: 900; }
.nw .clock-box { align-self: center; }
.nw-ref-card { background: var(--card); border: var(--bw) solid var(--ink); border-radius: 18px; box-shadow: 0 4px 0 var(--ink); padding: 10px 12px 12px; margin-bottom: 12px; }
.nw-ref-card.red { border-top: 8px solid var(--red-ink); }
.nw-ref-card.blue { border-top: 8px solid var(--blue-ink); }
.nw-ref-word { margin-top: 8px; font-size: clamp(26px, 8vw, 38px); font-weight: 900; line-height: 1.3; word-break: break-word; overflow-wrap: anywhere; }
.nw-ref-pic { display: block; max-width: 70%; max-height: 150px; width: auto; height: auto; margin: 10px auto 2px; object-fit: contain; background: #FFFFFF; border: 2px solid var(--ink); border-radius: 10px; }
.nw-ref-card .item-acc, .nw-ref-card .item-note { display: block; }

/* ───────── صح ولا خطأ: the statement, the team's «صح» / «خطأ», the reveal; the referee's list.
   صح is green, خطأ navy: never a team colour. */
.tf { gap: 14px; }
/* Ten dots on one line down to 320 px (10 × 26 + 9 × 4 + 2 × 4 = 304). */
.tf-pips { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; }
.tf-pips i { font-style: normal; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 900; background: var(--well); color: var(--faint); border: 2px solid rgba(18, 48, 79, .4); }
.tf-pips i:nth-child(4), .tf-pips i:nth-child(8) { margin-inline-end: 4px; } /* 100 · 200 · 300 */
.tf-pips i.red { background: var(--red-ink); color: #FFFFFF; border-color: var(--ink); box-shadow: 0 2px 0 var(--ink); }
.tf-pips i.blue { background: var(--blue-ink); color: #FFFFFF; border-color: var(--ink); box-shadow: 0 2px 0 var(--ink); }
.tf-pips i.both { background: linear-gradient(90deg, var(--blue-ink) 50%, var(--red-ink) 50%); color: #FFFFFF; border-color: var(--ink); box-shadow: 0 2px 0 var(--ink); }
.tf-pips i.none { background: #66768A; color: #FFFFFF; border-color: var(--ink); }
.tf-pips i.cur { background: var(--amber); color: var(--ink); border-color: var(--ink); transform: scale(1.12); box-shadow: 0 2px 0 var(--ink); }
.ref .tf-pips { margin-bottom: 12px; }
.tf-wait { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.tf-q { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 16px 14px 18px; }
.tf-q-k { font-size: 14px; font-weight: 900; color: var(--ink); background: var(--amber); border: 2px solid var(--ink); border-radius: 999px; padding: 2px 12px; }
.tf-q-t { font-size: clamp(21px, 6.6vw, 28px); font-weight: 900; line-height: 1.5; word-break: break-word; overflow-wrap: anywhere; }
.tf-q.small .tf-q-t { font-size: clamp(17px, 5vw, 21px); font-weight: 800; }
.tf .clock-box { align-self: center; }
.tf-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tf-btn { min-height: 112px; flex-direction: column; gap: 4px; font-size: 32px; color: #FFFFFF; border-radius: 22px; position: relative; }
.tf-btn svg { width: 34px; height: 34px; }
.tf-btn.yes { background: var(--ok-ink); }
.tf-btn.no { background: var(--ink); box-shadow: 0 var(--sh) 0 #07182A; }
/* The team's current answer: raised in amber, the other one dimmed. */
.tf-btns:has(.on) .tf-btn:not(.on) { opacity: .55; }
.tf-btn.on { outline: 5px solid var(--amber); outline-offset: 2px; }
.tf-btn.on::after { content: "✓ اخترتم"; position: absolute; top: -12px; inset-inline-start: 50%; transform: translateX(50%); font-size: 13px; font-weight: 900; color: var(--ink); background: var(--amber); border: 2px solid var(--ink); border-radius: 999px; padding: 1px 10px; white-space: nowrap; }
.tf-line { font-size: 17px; }
.tf-line.set { background: var(--amber-wash); }
.tf-line small { font-weight: 700; color: var(--muted); }
.tf-chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.tf-chip { font-size: 14px; font-weight: 900; padding: 4px 12px; border-radius: 999px; border: 2px dashed; background: var(--card); }
.tf-chip.red { border-color: var(--red-ink); color: var(--red-ink); }
.tf-chip.blue { border-color: var(--blue-ink); color: var(--blue-ink); }
.tf-chip.on { border-style: solid; border-color: var(--ink); color: #FFFFFF; box-shadow: 0 2px 0 var(--ink); }
.tf-chip.red.on { background: var(--red-ink); }
.tf-chip.blue.on { background: var(--blue-ink); }
.tf-verdict { align-self: center; display: inline-flex; align-items: center; gap: 10px; font-size: 44px; font-weight: 900; color: #FFFFFF; padding: 8px 30px; border: var(--bw) solid var(--ink); border-radius: 22px; box-shadow: 0 var(--sh) 0 var(--ink); transform: rotate(-3deg); animation: tf-stamp .35s cubic-bezier(.2, 1.6, .5, 1); }
.tf-verdict svg { width: 40px; height: 40px; }
.tf-verdict.yes { background: var(--ok-ink); }
.tf-verdict.no { background: var(--ink); box-shadow: 0 var(--sh) 0 #07182A; }
@keyframes tf-stamp { from { transform: rotate(-3deg) scale(1.6); opacity: 0; } to { transform: rotate(-3deg) scale(1); opacity: 1; } }
.tf-results { display: grid; gap: 8px; }
.tf-res { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 16px; border: 2.5px solid var(--ink); background: var(--card); }
.tf-res.red { border-inline-start: 8px solid var(--red-ink); }
.tf-res.blue { border-inline-start: 8px solid var(--blue-ink); }
.tf-res.right.red { background: var(--red-ink); color: #FFFFFF; }
.tf-res.right.blue { background: var(--blue-ink); color: #FFFFFF; }
.tf-res-mk { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; font-weight: 900; background: var(--well); color: var(--ink); border: 2px solid var(--ink); }
.tf-res-mk svg { width: 20px; height: 20px; }
.tf-res.right .tf-res-mk { background: #FFFFFF; color: var(--ok-ink); }
.tf-res-t { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 17px; font-weight: 800; }
.tf-res-t b { font-size: 13px; font-weight: 900; opacity: .85; }
.tf-res-p { flex: none; font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; background: var(--card); color: var(--ink); border: 2px solid var(--ink); border-radius: 12px; padding: 0 10px; }
.tf-note { font-size: 16px; font-weight: 700; line-height: 1.6; color: var(--ink); background: var(--well); border-radius: 14px; padding: 10px 14px; text-align: center; }
.tf-ans { display: inline-block; font-size: 15px; font-weight: 900; color: #FFFFFF; padding: 1px 12px; border-radius: 999px; border: 2px solid var(--ink); }
.tf-ans.yes { background: var(--ok-ink); }
.tf-ans.no { background: var(--ink); }
.bar-status .tf-ans { margin-inline-end: 6px; }
.res-chip.both { background: linear-gradient(90deg, var(--blue-ink) 50%, var(--red-ink) 50%); color: #FFFFFF; }
.tf-items .item.cur .item-q { display: block; -webkit-line-clamp: unset; color: var(--ink); font-size: 19px; font-weight: 800; }

/* ───────── الأقرب (build 15): the question with its unit, the team's number field, the reveal's number line */
.cl { gap: 14px; }
.cl-pips i:nth-child(4), .cl-pips i:nth-child(8) { margin-inline-end: 0; } /* eight questions, no point groups */
.cl .clock-box { align-self: center; }
.cl-unit-chip { font-size: 15px; font-weight: 900; color: var(--ink); background: var(--amber-wash); border: 2px solid var(--ink); border-radius: 999px; padding: 2px 12px; }
.cl-form { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.cl-row { display: flex; align-items: center; gap: 8px; }
.in-cl { flex: 1; min-width: 0; text-align: center; font-size: 34px; min-height: 72px; font-variant-numeric: tabular-nums; }
.cl-sign { flex: none; min-width: 52px; min-height: 52px; padding: 0 10px; font-size: 26px; font-weight: 900; }
.cl-unit { flex: none; max-width: 30%; overflow-wrap: anywhere; text-align: center; }
.cl-unit:empty { display: none; }
.cl-answer { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 12px 14px 14px; background: var(--amber); }
.cl-answer .tf-q-k { background: var(--card); }
.cl-answer-n { font-size: clamp(34px, 11vw, 48px); font-weight: 900; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cl-answer-u { font-size: 18px; font-weight: 900; }
.cl-ans { font-size: 17px; font-weight: 900; color: var(--ink); background: var(--amber); border: 2px solid var(--ink); border-radius: 999px; padding: 0 12px; }
.cl-items .item.cur .item-q { display: block; -webkit-line-clamp: unset; color: var(--ink); font-size: 19px; font-weight: 800; }
.cl-line { position: relative; height: 112px; margin: 4px 6px 0; }
.cl-line.close { height: 140px; }
.cl-axis { position: absolute; left: 0; right: 0; top: 44px; height: 6px; border-radius: 3px; background: var(--ink); }
.cl-bar { position: absolute; height: 6px; border-radius: 3px; opacity: .7; }
.cl-bar.red { top: 36px; background: var(--red-ink); }
.cl-bar.blue { top: 52px; background: var(--blue-ink); }
.cl-dot { position: absolute; top: 37px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; border: 3px solid var(--ink); }
.cl-dot.ans { top: 35px; width: 24px; height: 24px; margin-left: -12px; background: var(--amber); z-index: 2; }
.cl-dot.red { background: var(--red); }
.cl-dot.blue { background: var(--blue); }
.cl-lab { position: absolute; transform: translateX(-50%); white-space: nowrap; font-size: 14px; font-weight: 900; font-variant-numeric: tabular-nums; padding: 1px 9px; border-radius: 999px; border: 2px solid var(--ink); }
.cl-lab.ans { top: 2px; background: var(--amber); color: var(--ink); }
.cl-lab.red { top: 66px; background: var(--red-ink); color: #FFFFFF; }
.cl-lab.blue { top: 66px; background: var(--blue-ink); color: #FFFFFF; }
.cl-lab.low { top: 96px; }

/* ───────── برا السالفة (build 15): the card (the word or «أنت برا السالفة!»), «أحمد يسأل سارة», the vote, the 8 choices,
   the reveal; the referee's word, order and options */
.os { gap: 14px; }
.os .clock-box { align-self: center; }
.os-topic { align-self: center; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font-size: 16px; font-weight: 800; color: var(--ink); background: var(--amber-wash); border: 2px solid var(--ink); border-radius: 999px; padding: 3px 14px; overflow-wrap: anywhere; }
.os-topic svg { width: 17px; height: 17px; flex: none; }
.os-topic b { font-weight: 900; }
.os-wait .howto { font-size: 16px; }
.os-rule { font-size: 15px; font-weight: 800; line-height: 1.6; color: var(--ink); background: var(--well); border-radius: 14px; padding: 8px 12px; }
/* The card: the word and «أنت برا السالفة!» share the team colour and the shape, so a glance at a neighbour's phone tells nothing. */
.os-card { gap: 10px; }
.os-card .os-topic-l { font-size: 15px; font-weight: 800; }
.os-card .os-topic-l b { font-weight: 900; }
.os-card .os-card-h { font-size: 16px; font-weight: 700; line-height: 1.6; }
.os-out-t { font-size: clamp(28px, 9vw, 40px); }
.os-card.small { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px 10px; padding: 10px 12px; }
.os-card.small .wyh-word { font-size: clamp(22px, 7vw, 30px); padding: 0; }
.os-card.small .wyh-warn { display: none; }
.os-card.small .os-topic-l { flex-basis: 100%; font-size: 14px; }
.os-name { display: inline-block; max-width: 100%; padding: 0 10px; border-radius: 999px; font-weight: 900; color: #FFFFFF; background: var(--ink); border: 2px solid var(--ink); line-height: 1.5; overflow-wrap: anywhere; vertical-align: baseline; }
.os-name.red { background: var(--red-ink); }
.os-name.blue { background: var(--blue-ink); }
.os-turn { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 14px; }
.os-turn-k { font-size: 14px; font-weight: 900; color: var(--ink); background: var(--amber); border: 2px solid var(--ink); border-radius: 999px; padding: 2px 12px; }
.os-turn-t { font-size: clamp(20px, 6.2vw, 26px); font-weight: 900; line-height: 1.7; overflow-wrap: anywhere; }
.os-turn-h { font-size: 15px; font-weight: 700; color: var(--muted); line-height: 1.6; }
.os-turn.mine { background: var(--amber-wash); }
.os-turn.asked-me { background: var(--well); }
.os-turn.caught .os-turn-k { background: var(--red-ink); color: #FFFFFF; }
.os .os-btn { width: 100%; min-height: 76px; font-size: 28px; flex: none; white-space: normal; }
.os .os-btn.armed { background: var(--ink); color: var(--amber-hi); font-size: 21px; }
.os-h { text-align: center; margin: 0 0 -6px; }
.os-order { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.os-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; font-size: 15px; font-weight: 900; padding: 3px 12px; border-radius: 999px; border: 2px solid var(--ink); background: var(--card); color: var(--ink); overflow-wrap: anywhere; }
.os-chip.red { border-color: var(--red-ink); color: var(--red-ink); }
.os-chip.blue { border-color: var(--blue-ink); color: var(--blue-ink); }
.os-chip.asked.red { background: #FDDCD3; }
.os-chip.asked.blue { background: #DCE8FD; }
.os-chip.cur { color: #FFFFFF; border-color: var(--ink); box-shadow: 0 2px 0 var(--ink); transform: scale(1.06); }
.os-chip.cur.red { background: var(--red-ink); }
.os-chip.cur.blue { background: var(--blue-ink); }
.os-chip.left { text-decoration: line-through; opacity: .55; }
.os-chip.me { outline: 3px solid var(--amber); outline-offset: 1px; }
.os-chip small { font-weight: 800; }
.os-tag { display: inline-block; font-size: 12px; font-weight: 900; padding: 0 8px; border-radius: 999px; background: var(--amber); color: var(--ink); border: 2px solid var(--ink); white-space: nowrap; text-decoration: none; }
.os-q { text-align: center; font-size: clamp(28px, 9vw, 36px); }
.os-votes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 160px), 1fr)); gap: 10px; }
.os-vote { min-width: 0; min-height: 60px; padding: 8px 10px; font-size: clamp(17px, 5vw, 21px); white-space: normal; overflow-wrap: anywhere; }
.os-vote.red { border-inline-start: 10px solid var(--red-ink); }
.os-vote.blue { border-inline-start: 10px solid var(--blue-ink); }
.os-vote.on { color: #FFFFFF; outline: 4px solid var(--amber); outline-offset: 2px; }
.os-vote.on.red { background: var(--red-ink); }
.os-vote.on.blue { background: var(--blue-ink); }
.os-votes:has(.on) .os-vote:not(.on) { opacity: .7; }
.os-voted { margin-top: 0; }
.os-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.os-opt { min-width: 0; min-height: 64px; padding: 8px; flex-direction: column; gap: 0; font-size: clamp(18px, 5.4vw, 22px); white-space: normal; overflow-wrap: anywhere; }
.os-opt small { font-size: 13px; font-weight: 800; }
.os-opt.on { background: var(--amber); }
.os-word { background: var(--amber); }
.os-word .cl-answer-n { overflow-wrap: anywhere; }
.os-word .os-topic-l { font-size: 14px; font-weight: 800; }
.os-who { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; font-size: 19px; font-weight: 900; text-align: center; }
.os-who .os-name { font-size: 21px; }
.os-res { font-size: 18px; overflow-wrap: anywhere; }
.os-res.undone { text-decoration: line-through; opacity: .65; }
.os-why { text-align: center; font-size: 16px; font-weight: 800; color: var(--muted); }
.os-line { font-size: 17px; }
.os-tally { display: grid; gap: 6px; }
.os-tally .au-list-h { margin-bottom: 2px; }
.os-row { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 5px 8px 5px 10px; border-radius: 14px; border: 2px solid var(--ink); background: var(--card); }
.os-row.red { border-inline-start: 8px solid var(--red-ink); }
.os-row.blue { border-inline-start: 8px solid var(--blue-ink); }
.os-row.out { background: var(--amber-wash); }
.os-row.left { opacity: .6; }
.os-row-n { flex: 1; min-width: 0; font-size: 16px; font-weight: 900; overflow-wrap: anywhere; }
.os-row-n small { font-weight: 800; color: var(--muted); }
.os-row-v { flex: none; max-width: 42%; font-size: 13px; font-weight: 700; color: var(--muted); overflow-wrap: anywhere; text-align: end; }
.os-row-c { flex: none; min-width: 34px; height: 34px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; border: 2px solid var(--ink); background: var(--card); color: var(--ink); }
.os-row.acc .os-row-c { background: var(--ink); color: #FFFFFF; }
/* referee */
.os-ref-card { padding: 10px 12px 12px; margin-bottom: 12px; box-shadow: 0 4px 0 var(--ink); border-radius: 18px; }
.os-ref-w { margin-top: 6px; font-size: clamp(30px, 10vw, 44px); font-weight: 900; line-height: 1.3; overflow-wrap: anywhere; }
.os-ref-out { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-size: 17px; font-weight: 900; }
.os-ref-out .os-name { font-size: 19px; }
.os-ref-body { display: flex; flex-direction: column; gap: 10px; }
.os-ref-body:empty { display: none; }
.os-ref-body .os-order { justify-content: flex-start; }
.os-ref-body .tf-chips { justify-content: flex-start; }
#ro-parts { margin-top: 14px; }
.os-parts { display: flex; flex-direction: column; gap: 8px; }
.os-part-w { font-size: 17px; font-weight: 900; color: var(--ink); overflow-wrap: anywhere; min-width: 0; }
.bar-status .os-name { font-size: 17px; }
.bar-status .os-warn { color: var(--red-ink); }
.bar-row .os-next { white-space: normal; }
.ref-bar .os-opts { gap: 8px; }
.ref-bar .os-opt { min-height: 46px; padding: 4px 8px; font-size: clamp(16px, 4.6vw, 18px); box-shadow: 0 3px 0 var(--ink); }
.ref-bar .os-opt.armed { background: var(--ink); color: var(--amber-hi); font-size: 15px; }

/* ───────── مزاد: the question, the bid card, the counted answers, the reference list (referee; everyone after the auction) */
.au { gap: 14px; }
.au-q { padding: 12px 14px 14px; text-align: center; }
.au-q-k { display: table; margin: 0 auto 6px; font-size: 14px; font-weight: 900; color: var(--ink); background: var(--amber); border: 2px solid var(--ink); border-radius: 999px; padding: 1px 12px; }
.au-q-t { font-size: clamp(21px, 6.4vw, 30px); font-weight: 900; line-height: 1.4; word-break: break-word; overflow-wrap: anywhere; }
.ref .au-q { background: var(--card); border: var(--bw) solid var(--ink); border-radius: 18px; box-shadow: 0 4px 0 var(--ink); margin-bottom: 12px; text-align: start; }
.ref .au-q-t { margin-top: 6px; font-size: clamp(19px, 5.6vw, 26px); }
.ref .au-q .item-note { display: block; }
.au-bid { padding: 12px 14px; color: #FFFFFF; display: flex; flex-direction: column; gap: 8px; }
.au-bid.red { background: var(--red-ink); }
.au-bid.blue { background: var(--blue-ink); }
.au-bid.none { background: var(--card); color: var(--ink); text-align: center; }
.au-bid-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.au-bid-k { font-size: 14px; font-weight: 800; opacity: .9; }
.au-bid-t { font-size: clamp(20px, 6vw, 26px); font-weight: 900; line-height: 1.3; }
.au-bid-n { flex: none; min-width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 38px; font-weight: 900; color: var(--ink); background: var(--card); border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink); font-variant-numeric: tabular-nums; }
.au-bid-c { font-size: 16px; font-weight: 800; }
.au-bid-c b { font-size: 20px; font-weight: 900; }
.au-bid .clock-box { align-self: center; }
.ref .au-bid-wrap .au-bid { margin-bottom: 12px; }
.au-named { display: flex; flex-wrap: wrap; gap: 6px; }
.au-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 900; color: #FFFFFF; background: var(--ink); border: 2px solid var(--ink); border-radius: 999px; padding: 3px 12px 3px 4px; }
.au-chip b { display: grid; place-items: center; min-width: 22px; height: 22px; border-radius: 50%; background: var(--card); color: var(--ink); font-size: 13px; }
.au-chip.red { background: var(--red-ink); }
.au-chip.blue { background: var(--blue-ink); }
.au-chip.other { opacity: .85; }
.au-list-h { font-size: 14px; font-weight: 800; color: var(--muted); margin: 4px 2px 8px; }
.au-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 150px), 1fr)); gap: 8px; }
.au-ans { min-height: 48px; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 6px 10px; border: var(--bw) solid var(--ink); border-radius: 14px; background: var(--card); color: var(--ink); text-align: start; box-shadow: 0 3px 0 var(--ink); transition: transform .06s, box-shadow .06s; font: inherit; }
.au-ans b { font-size: 17px; font-weight: 900; line-height: 1.3; word-break: break-word; overflow-wrap: anywhere; }
.au-ans small { font-size: 12px; color: var(--muted); line-height: 1.4; }
.au-ans:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
.au-ans:disabled { cursor: default; }
.au-ans.named { color: #FFFFFF; transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.au-ans.named.red { background: var(--red-ink); }
.au-ans.named.blue { background: var(--blue-ink); }
.au-ans.named small { color: #FFFFFF; }
.au-list.locked .au-ans:not(.named) { opacity: .62; box-shadow: 0 2px 0 var(--ink); }
.au-grid.show .au-ans { min-height: 40px; box-shadow: none; }
.au-grid.show .au-ans:not(.named) { background: var(--well); }
.bar-row .btn-step { flex: 0 0 64px; min-height: 52px; font-size: 28px; font-weight: 900; }
.au-bar-bid { flex: 1; display: grid; place-items: center; font-size: 18px; font-weight: 800; }
.au-bar-bid b { font-size: 26px; font-weight: 900; }

/* ───────── «بدون حكم» (build 11, refereeMode "room"): the room judges from the team phones */
.room-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 auto; max-width: 420px; padding: 8px 14px; border-radius: 16px; background: var(--amber-wash); border: 2px solid var(--ink); font-size: 15px; font-weight: 800; line-height: 1.6; text-align: center; color: var(--ink); }
.room-note svg { width: 22px; height: 22px; flex: none; }
/* Buzz rounds: the كويزر question and the قصص sentences above the buzzer (PROTOCOL §6.3), like the proverb card. */
.rm-q, .rm-story { text-align: start; }
.rm-q .pv-kicker, .rm-story .pv-kicker { display: table; margin: 0 auto; }
.rm-q-t { margin-top: 6px; font-size: clamp(19px, 5.4vw, 26px); font-weight: 800; line-height: 1.6; color: var(--ink); word-break: break-word; overflow-wrap: anywhere; max-height: 28vh; overflow-y: auto; }
.rm-story-t { margin-top: 6px; font-size: clamp(18px, 5vw, 22px); font-weight: 600; line-height: 1.85; color: var(--ink); max-height: 30vh; overflow-y: auto; overscroll-behavior: contain; word-break: break-word; }
.rm-new { background: var(--amber-wash); color: var(--ink); font-weight: 800; border-radius: 6px; padding: 0 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; animation: rm-new .6s ease-out; }
@keyframes rm-new { from { background: var(--amber-hi); } }
.rm-line { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; font-size: 16px; font-weight: 800; color: var(--muted); }
.rm-line svg { width: 20px; height: 20px; flex: none; color: var(--ink); }
.rm-line .chip { font-size: 14px; padding: 2px 10px; }
.phase .rm-q, .phase .rm-story { max-width: 520px; }
/* TOP 10: the team's answer field in its turn (PROTOCOL §6.4) */
.t10 { gap: 14px; }
.t10-part { display: flex; flex-direction: column; gap: 14px; }
.t10-part:empty { display: none; }
.t10-turn, .t10-wait { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 14px; }
.t10-turn.red { border-top: 10px solid var(--red-ink); }
.t10-turn.blue { border-top: 10px solid var(--blue-ink); }
.t10-turn .nw-team { font-size: clamp(20px, 6vw, 26px); }
.t10-wait .howto { font-size: 16px; }
.t10-form { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.t10-form .in { font-size: 24px; text-align: center; }
.t10-sent { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--amber-wash); }
.t10-sent svg { width: 22px; height: 22px; flex: none; color: var(--ok-ink); }
.t10-res { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; padding: 10px 14px; border-radius: 16px; border: 2.5px solid var(--ink); background: var(--card); }
.t10-res b { font-size: 22px; font-weight: 900; line-height: 1.35; word-break: break-word; overflow-wrap: anywhere; }
.t10-res-k { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 900; }
.t10-res-k svg { width: 18px; height: 18px; }
.t10-res-s { font-size: 14px; font-weight: 800; opacity: .9; }
.t10-res.ok.red { background: var(--red-ink); color: #FFFFFF; }
.t10-res.ok.blue { background: var(--blue-ink); color: #FFFFFF; }
.t10-res.no { background: var(--well); }
.t10-res.no b { text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: var(--red-ink); }
.t10-res.no .t10-res-k { color: var(--red-ink); }
.t10-last .au-list-h { text-align: center; margin: 0 0 6px; }
/* لا تشوف: the explainer's ten words as big ✓ toggles (PROTOCOL §6.5) */
.exp-self-h { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--muted); }
.exp-self-h .dl-count { flex: none; padding: 2px 12px; border-radius: 999px; background: var(--card); border: 2.5px solid var(--ink); color: var(--ink); }
.exp-grid.selfmark { grid-auto-rows: minmax(52px, 1fr); gap: 8px; }
.exp-tile.self { font: inherit; font-size: clamp(18px, 5.4vw, 28px); font-weight: 900; cursor: pointer; touch-action: manipulation; gap: 8px; padding: 6px 8px; justify-content: flex-start; text-align: start; transition: transform .06s, box-shadow .06s; }
.exp-tile.self .w { display: block; min-width: 0; flex: 1; text-align: center; }
.exp-tile.self .mk { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--ink); background: var(--paper); display: grid; place-items: center; color: var(--ok-ink); }
.exp-tile.self .mk svg { width: 17px; height: 17px; }
.exp-tile.self:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
.exp-tile.self.correct .mk { background: #FFFFFF; }
.exp-tile.self.correct::after { content: none; }
.exp-tile.self:disabled { cursor: default; }
.exp-tile.self.sent { opacity: .8; }
/* ولا كلمة: the actor's «خمّنوها ✓» (PROTOCOL §6.6) */
.nw .nw-self { width: 100%; min-height: 84px; font-size: 30px; flex: none; }
.nw .nw-self svg { width: 30px; height: 30px; }
.nw-self-h { text-align: center; margin-top: -6px; }
/* اللي عندك: «خمّنوا كلمتنا» (PROTOCOL §6.7), a second tap gives the other team the part */
.wyh .wyh-self { width: 100%; min-height: 64px; font-size: 22px; white-space: normal; }
.wyh .wyh-self.armed { background: var(--ink); color: var(--amber-hi); font-size: 19px; }
.wyh-self-h { text-align: center; margin-top: -8px; }
/* مزاد: the judging team's reference list (PROTOCOL §6.8) */
.au-q-sm { padding: 10px 12px 12px; }
.au-q-sm .au-q-t { font-size: clamp(18px, 5.2vw, 24px); }
.au .au-other { width: 100%; min-height: 60px; font-size: 20px; flex: none; position: sticky; bottom: 0; z-index: 2; }
.au-jbar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: #FFFFFF; }
.au-jbar.red { background: var(--red-ink); }
.au-jbar.blue { background: var(--blue-ink); }
.au-jbar-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.au-jbar-t span { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 800; opacity: .95; }
.au-jbar-t span svg { width: 16px; height: 16px; flex: none; }
.au-judge-h { color: var(--ink); font-weight: 900; margin-bottom: 4px; }
.au-jbar-t b { font-size: clamp(17px, 5vw, 21px); font-weight: 900; }
.au-jbar-c { flex: none; display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.au-jbar-c b { font-size: 30px; font-weight: 900; font-variant-numeric: tabular-nums; }
.au-jbar-c span { font-size: 12px; font-weight: 800; }
.au-jbar .rt-clock { color: var(--ink); }
.au-jbar .au-jbar-up { flex: none; color: #FFFFFF; font-size: 15px; font-weight: 900; }
.au-judge .au-ans { min-height: 56px; cursor: pointer; touch-action: manipulation; }
.au-judge .au-ans b { font-size: 18px; }
.au-judge-note { display: block; }

/* ───────── guess */
.guess { display: flex; flex-direction: column; gap: 14px; text-align: center; align-items: stretch; margin-top: 8px; }
.g-kicker { align-self: center; color: var(--ink); background: var(--amber); border: 2.5px solid var(--ink); border-radius: 999px; padding: 3px 14px; box-shadow: 0 3px 0 var(--ink); font-weight: 900; font-size: 15px; }
.g-title { font-size: 30px; font-weight: 900; }
.g-form { display: flex; flex-direction: column; gap: 14px; }
.g-row { display: flex; align-items: center; gap: 10px; }
.in-guess { text-align: center; font-size: 44px; min-height: 84px; font-variant-numeric: tabular-nums; }
.g-unit { font-size: 18px; font-weight: 900; color: var(--muted); }
.g-done { border-radius: 20px; padding: 14px 16px 16px; background: var(--ok-ink); color: #FFFFFF; border: var(--bw) solid var(--ink); box-shadow: 0 var(--sh) 0 var(--ink); }
.g-done-l { font-size: 17px; font-weight: 900; }
.g-done-v b { font-size: 48px; font-weight: 900; font-variant-numeric: tabular-nums; }
.g-done-v span { font-size: 18px; font-weight: 800; }
.g-closed { font-size: 18px; font-weight: 900; color: var(--muted); }

/* ───────── «بلّغ عن السؤال» (referee reports, PROTOCOL §3.4) */
.item-h .item-end { margin-inline-start: auto; display: flex; align-items: center; gap: 6px; }
.item-h .item-end .res { margin-inline-start: 0; }
.rep-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 30px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 2px solid rgba(18, 48, 79, .45);
  background: var(--card);
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}
.rep-btn svg, .rep-link svg, .rep-wide svg { width: 15px; height: 15px; flex: none; }
.rep-btn:active { background: var(--well); }
.rep-row { display: flex; justify-content: flex-start; margin: -6px 0 12px; }
.rep-row:empty { display: none; }
#rd-rep { margin: 12px 0 0; }
.rep-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 0;
  padding: 6px 2px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: var(--amber);
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}
.ans-box .rep-link { margin-top: 4px; font-size: 14px; }
.rep-wide { width: 100%; min-height: 48px; font-size: 17px; margin-top: 12px; }
.report-sheet {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: calc(12px + var(--safe-t)) calc(12px + var(--safe-r)) calc(12px + var(--safe-b)) calc(12px + var(--safe-l));
  background: rgba(18, 48, 79, .32);
}
.report-card {
  width: 100%;
  max-width: 480px;
  margin: auto 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--card);
  border: var(--bw) solid var(--ink);
  border-radius: 24px;
  box-shadow: 0 6px 0 var(--ink);
  padding: 18px 16px 16px;
  animation: toast-in .2s ease-out;
}
.report-card h2 { font-size: 22px; font-weight: 900; line-height: 1.4; }
.report-sel { min-height: 52px; font-size: 17px; padding: 8px 12px; -webkit-appearance: none; appearance: none; }
.report-sel:disabled { opacity: 1; }
.report-reasons { display: flex; flex-direction: column; gap: 8px; }
.report-reason {
  min-height: 48px;
  padding: 8px 14px;
  border-radius: 14px;
  border: 2.5px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  font-weight: 800;
  text-align: start;
  display: flex;
  align-items: center;
  gap: 10px;
}
.report-reason::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--card); }
.report-reason[aria-checked="true"] { background: var(--amber); box-shadow: 0 3px 0 var(--ink); }
.report-reason[aria-checked="true"]::before { background: var(--ink); box-shadow: inset 0 0 0 3px var(--card); }
.report-sheet select, .report-sheet textarea { font-family: var(--font); color: var(--ink); }
.report-field { display: flex; flex-direction: column; gap: 6px; }
.report-field .in { min-height: 52px; font-size: 18px; }
textarea.report-note { resize: none; line-height: 1.6; font: inherit; font-size: 17px; font-weight: 700; }
.report-count { align-self: flex-end; font-variant-numeric: tabular-nums; }
.report-actions { display: flex; gap: 10px; margin-top: 4px; }
.report-actions .btn { flex: 1; min-height: 54px; }
.report-actions .btn-ghost { flex: 0 0 auto; min-width: 96px; }


/* ───────── الصور (build 19): the referee's picture on its item, and enlarged over everything */
.ref-pic { position: relative; display: block; width: 100%; max-width: 260px; margin: 8px 0 4px; padding: 8px; border: var(--bw) solid var(--ink); border-radius: 16px; background: var(--card); box-shadow: 0 4px 0 var(--ink); }
.ref-pic img { display: block; width: 100%; height: 150px; object-fit: contain; }
.ref-pic-h { font-size: 13px; color: var(--muted); }

/* ───────── overlays */
.ov {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(252, 242, 229, .88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ov-card { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; width: 100%; max-width: 340px; background: var(--card); border: var(--bw) solid var(--ink); border-radius: 26px; box-shadow: 0 7px 0 var(--ink); padding: 26px 22px 24px; }
.ov-card h2 { font-size: 26px; font-weight: 900; line-height: 1.4; }
.ov-card p { font-size: 17px; color: var(--muted); line-height: 1.6; }
.toast {
  position: fixed;
  top: calc(var(--safe-t) + 70px);
  inset-inline: 16px;
  margin: 0 auto;
  max-width: 420px;
  z-index: 50;
  padding: 12px 18px;
  border-radius: 18px;
  background: var(--card);
  color: var(--ink);
  border: var(--bw) solid var(--ink);
  font-size: 18px;
  font-weight: 900;
  text-align: center;
  box-shadow: 0 6px 0 var(--ink);
  animation: toast-in .25s ease-out;
}
.toast.warn { background: var(--amber); }
@keyframes toast-in { from { transform: translateY(-16px); opacity: 0; } }

@media (min-height: 760px) {
  .bz-small { font-size: max(21px, calc(var(--D) * .056)); }
}
/* Landscape phones: the won/lost buzzer must fit its answer countdown inside the cap (it clips its overflow). */
@media (max-height: 480px) {
  .brand { flex-direction: row; justify-content: center; gap: 10px; flex-wrap: wrap; padding-top: 0; }
  .brand-mark { width: 40px; height: 44px; }
  .logo { font-size: 42px; }
  .tagline { flex-basis: 100%; margin-top: 0; }
  .buzz-scr { padding-top: 6px; gap: 4px; }
  .bz-info { min-height: 24px; }
  .bz-cap { padding: calc(var(--D) * .08); border-width: 5px; gap: 0; }
  .bz-small { font-size: 19px; line-height: 1.3; }
  .bz-clock { font-size: clamp(26px, calc(var(--D) * .12), 40px); }
  .final-scr { gap: 8px; }
  .final-scr .msg-icon { width: 72px; height: 72px; border-radius: 24px; }
  .final-scr .msg-icon svg { width: 42px; height: 42px; }
  .final-scr .big-title { font-size: 36px; }
  .final-scr .score-duo div { padding: 8px 8px; }
  .final-scr .score-duo b { font-size: 36px; }
}
/* Tap feedback (build 12, app.js «tap feedback»): pressed at touch-down, then a small spinner on the button whose
   message went out, until the host's next view (or 3 s). A locked (disabled) button never looks pressed. */
button[data-act].pressing:not(:disabled) { transform: translateY(3px) scale(.97); filter: brightness(.93); }
button[data-act].sent { position: relative; }
/* The tapped button is locked for a moment (double taps): it reads as busy, not as unavailable. */
.btn[data-act].sent:disabled { opacity: .8; }
button[data-act].sent::before {
  content: ""; position: absolute; top: 6px; inset-inline-end: 6px; width: 16px; height: 16px; box-sizing: border-box;
  border-radius: 50%; border: 3px solid currentColor; border-inline-end-color: transparent; opacity: .85;
  animation: spin .7s linear infinite; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ماذا تعرف (build 12): the «مزاد» cards and lists; the turn card is .au-bid in the answering team's colour */
.wk { gap: 14px; }
.wk-named:empty { display: none; }
.ref .wk-named .au-named { margin-bottom: 12px; }
.au-ans.said { opacity: .5; box-shadow: none; }
.au-ans.said b { text-decoration: line-through; }
.wk-jbtns { display: flex; gap: 8px; position: sticky; bottom: 0; z-index: 2; flex: none; }
.wk-jbtns .btn { flex: 1; min-height: 60px; font-size: clamp(16px, 4.6vw, 20px); white-space: normal; }
.wk-jbtns .btn-win { color: #FFFFFF; }
.wk-jbtns .btn-win.red { background: var(--red-ink); }
.wk-jbtns .btn-win.blue { background: var(--blue-ink); }
.wk-jbtns .btn-win.armed { background: var(--ink); color: var(--amber-hi); }
.wk-jbtns .btn svg { width: 18px; height: 18px; }

/* ───────── رسم (build 15): the drawer's screen (the word, the canvas, the tools). The canvas is drawn by app.js. */
.dr { padding: 10px 12px calc(10px + var(--safe-b)); gap: 10px; overflow: hidden; }
.dr-top { flex: none; display: flex; flex-direction: column; gap: 8px; }
.dr-head { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.dr-head b { font-size: 18px; font-weight: 900; }
.dr-head .rt-clock { margin-inline-start: auto; }
.dr-head .rt-clock [data-clock] { font-size: 30px; }
.dr-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.dr-sub b { font-size: 20px; font-weight: 900; }
.dr-turn { font-size: 14px; font-weight: 800; color: var(--muted); }
.dr-word {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px;
  padding: 10px 14px; border: var(--bw) solid var(--ink); border-radius: 18px; box-shadow: 0 4px 0 var(--ink); color: #FFFFFF;
}
.dr-word.red { background: var(--red-ink); }
.dr-word.blue { background: var(--blue-ink); }
.dr-word-k { font-size: 15px; font-weight: 800; opacity: .9; }
.dr-word b { font-size: clamp(26px, 8.5vw, 40px); font-weight: 900; line-height: 1.2; overflow-wrap: anywhere; }
.dr-word small { flex-basis: 100%; font-size: 14px; font-weight: 700; opacity: .92; }
.dr-note { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 900; color: var(--red-ink); }
.dr-note svg { width: 18px; height: 18px; flex: none; }
.dr-stage { position: relative; flex: 1; min-height: 120px; display: flex; align-items: center; justify-content: center; }
.dr-frame {
  position: relative; flex: none; background: #FFFFFF; border: var(--bw) solid var(--ink); border-radius: 16px;
  box-shadow: 0 4px 0 var(--ink); overflow: hidden; box-sizing: content-box;
}
.dr-canvas { display: block; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.dr:not(.live) .dr-canvas { opacity: .55; }
.dr-over {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 16px; text-align: center; background: color-mix(in srgb, var(--paper) 72%, transparent); border-radius: 16px; overflow-y: auto;
}
.dr-over .btn { width: 100%; max-width: 360px; }
.dr-tools { flex: none; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.dr-tools button { flex: none; height: 44px; border: var(--bw) solid var(--ink); border-radius: 14px; background: var(--card); color: var(--ink); box-shadow: 0 3px 0 var(--ink); font-size: 14px; font-weight: 900; }
.dr-tools button:disabled { opacity: .45; box-shadow: none; cursor: default; }
.dr-tools button:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.dr-tools .dr-ink { width: 40px; padding: 0; background: var(--c); }
.dr-tools .dr-ink.on, .dr-tools .dr-eraser.on { outline: 3px solid var(--amber); outline-offset: 2px; }
.dr-eraser { width: 44px; display: grid; place-items: center; padding: 0; }
.dr-eraser svg { width: 24px; height: 24px; }
.dr-size { width: 44px; display: grid; place-items: center; padding: 0; }
.dr-size i { display: block; width: 22px; height: 4px; border-radius: 4px; background: var(--ink); }
.dr-size.thick i { height: 10px; }
.dr-undo, .dr-clear { padding: 0 12px; }
.dr-clear.armed { background: var(--red-ink); color: #FFFFFF; }
.dr-bottom { flex: none; }
.dr-bottom:empty { display: none; }
.dr .nw-self { width: 100%; min-height: 64px; font-size: 26px; }
.dr-hint { text-align: center; font-size: 14px; color: var(--muted); }