/* ============ shared full-screen display (audience + team) ============ */
/* body is a full-height flex column: the school banner takes its natural
   height and the .screen fills whatever is left (so nothing overflows). */
.display-body {
  overflow: hidden;
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
}

.screen {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  background:
    radial-gradient(1100px 500px at 15% -10%, rgba(139, 92, 246, .16), transparent 60%),
    radial-gradient(900px 500px at 90% 110%, rgba(59, 130, 246, .14), transparent 60%),
    var(--bg);
}

.screen-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 34px; border-bottom: 1px solid var(--border);
}
.screen-head.sub { padding: 10px 34px; }
.head-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.head-left .app-logo { height: 40px; max-width: 160px; }
.hd-title { font-size: 1.3rem; font-weight: 800; }
.hd-round { color: var(--accent); font-weight: 700; margin-left: 16px; }
.head-right { display: flex; align-items: center; gap: 10px; }
.hd-chip {
  background: var(--panel); border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 16px; font-weight: 700; font-size: .95rem; color: var(--muted);
}

/* top-right nav: jump to the audience / team / quiz-master views */
.hd-nav { display: flex; gap: 8px; }
.hd-nav-link {
  background: var(--panel); border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 14px; font-weight: 700; font-size: .9rem; color: var(--muted);
  text-decoration: none; white-space: nowrap;
  transition: color .2s, border-color .2s, background .2s;
}
.hd-nav-link:hover {
  color: var(--text); border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
}

.stage { flex: 1; position: relative; min-height: 0; }
.phase {
  position: absolute; inset: 0; display: none;
  padding: 30px 40px; overflow-y: auto;
  animation: fadeIn .35s ease;
}
.phase.active { display: flex; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---- idle ---- */
#ph-idle { align-items: center; justify-content: center; text-align: center; }
.idle-box h1 { font-size: clamp(2rem, 5vw, 4rem); margin-bottom: 12px; }
.idle-sub { color: var(--muted); font-size: 1.3rem; animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.idle-dots { display: flex; gap: 14px; justify-content: center; margin-bottom: 30px; }
.idle-dots span {
  width: 22px; height: 22px; border-radius: 50%; background: var(--c);
  animation: bounce 1.4s infinite; box-shadow: 0 0 24px color-mix(in srgb, var(--c) 60%, transparent);
}
.idle-dots span:nth-child(2) { animation-delay: .15s; }
.idle-dots span:nth-child(3) { animation-delay: .3s; }
.idle-dots span:nth-child(4) { animation-delay: .45s; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* registered participants on the waiting screen */
.roster { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 34px; max-width: 1000px; }
.roster-house {
  border: 1px solid var(--border); border-top: 4px solid var(--hc); border-radius: 12px;
  padding: 12px 16px; min-width: 170px; text-align: left;
  background: color-mix(in srgb, var(--hc) 6%, transparent);
}
.roster-title { font-weight: 800; color: var(--hc); margin-bottom: 4px; }
:root[data-theme="light"] .roster-title { color: color-mix(in srgb, var(--hc) 55%, #000); }
.roster-status { font-size: .82rem; font-weight: 800; margin-bottom: 8px; }
.roster-status.ok { color: var(--ok); }
.roster-status.warn { color: var(--warn); }
.roster-subteam { margin-top: 10px; }
.roster-subteam:first-of-type { margin-top: 0; }
.roster-subteam-head {
  font-size: .72rem; font-weight: 800; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px;
}
.roster-names { display: flex; flex-direction: column; gap: 2px; }
.roster-name { font-size: .95rem; }

/* ---- question ---- */
#ph-question { gap: 40px; }
.q-area { flex: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.q-text { font-size: clamp(1.4rem, 3.2vw, 2.6rem); font-weight: 800; line-height: 1.3; margin-bottom: 26px; }
/* question media: image / video / audio */
.q-media { margin-bottom: 22px; max-width: 100%; align-self: stretch; }
.q-media-el { max-width: 100%; border-radius: 14px; }
img.q-media-el, video.q-media-el { max-height: 34vh; object-fit: contain; display: block; }
audio.q-media-el { width: 100%; max-width: 560px; }
.q-options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .q-options { grid-template-columns: 1fr; } }
.opt {
  display: flex; align-items: center; gap: 14px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px 18px; font-size: clamp(1rem, 1.8vw, 1.4rem); font-weight: 600;
  transition: opacity .3s, border-color .3s, background .3s;
}
.opt-letter {
  width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; background: var(--panel-2); border: 1px solid var(--border);
}
.opt:nth-child(1) .opt-letter { color: var(--red); }
.opt:nth-child(2) .opt-letter { color: var(--blue); }
.opt:nth-child(3) .opt-letter { color: var(--yellow); }
.opt:nth-child(4) .opt-letter { color: var(--green); }
.opt.correct {
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 14%, var(--panel));
  box-shadow: 0 0 30px color-mix(in srgb, var(--ok) 30%, transparent);
  animation: popIn .4s ease;
}
.opt.correct .opt-letter { background: var(--ok); color: #06270f; }
.opt.dim { opacity: .35; }
@keyframes popIn { 0% { transform: scale(.96); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } }

/* team answering: tappable options + own-pick highlight */
.opt.selectable { cursor: pointer; user-select: none; }
.opt.selectable:hover { border-color: var(--accent); transform: translateY(-2px); }
.opt.selectable:active { transform: scale(.98); }
.opt.mine {
  border-color: var(--house, var(--accent));
  box-shadow: 0 0 0 2px var(--house, var(--accent)),
              0 0 22px color-mix(in srgb, var(--house, var(--accent)) 40%, transparent);
}
.opt-dots { margin-left: auto; display: flex; gap: 6px; flex-shrink: 0; }
.opt-dot {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--hc); box-shadow: 0 0 9px var(--hc);
}
/* open question: typed answer box */
.open-answer { display: flex; gap: 10px; margin-top: 18px; max-width: 640px; }
.open-answer input {
  flex: 1; font-size: 1.1rem; padding: 13px 16px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px; color: var(--text);
}
.open-answer input:focus { outline: 2px solid var(--house, var(--accent)); outline-offset: -1px; }
.open-answer .btn { font-size: 1rem; }

/* all team answers, shown after reveal on open questions */
.team-answers { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; max-width: 760px; }
.ta-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel); border: 1px solid var(--border);
  border-left: 5px solid var(--hc, #888); border-radius: 10px;
  padding: 10px 14px; animation: fadeIn .35s ease;
}
.ta-name { font-weight: 800; flex: 0 0 130px; font-size: .95rem; }
.ta-text { flex: 1; font-size: 1.05rem; }
.ta-time { color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.ta-row.ta-correct {
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 10%, var(--panel));
}
.ta-row.ta-correct .ta-text::after { content: " ✓"; color: var(--ok); font-weight: 800; }

.my-answer { margin-top: 16px; font-weight: 800; font-size: 1.05rem; color: var(--muted); }
.my-answer.good { color: var(--ok); }
.my-answer.bad { color: var(--danger); }
.strip-answered { color: var(--ok); font-weight: 800; }

.answer-banner {
  margin-top: 24px; padding: 16px 22px; border-radius: 14px;
  background: color-mix(in srgb, var(--ok) 14%, var(--panel));
  border: 1px solid var(--ok); color: var(--ok);
  font-size: clamp(1.1rem, 2vw, 1.6rem); font-weight: 800;
  animation: popIn .4s ease;
}

/* ---- countdown ring ---- */
.t-area { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.t-area.top { position: absolute; top: 16px; right: 22px; z-index: 5; }
.timer-ring { position: relative; width: min(240px, 22vw); aspect-ratio: 1; }
.timer-ring.small { width: 92px; }
.timer-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--panel-2); stroke-width: 12; }
.ring-fg {
  fill: none; stroke: var(--ok); stroke-width: 12; stroke-linecap: round;
  stroke-dasharray: 565.49; stroke-dashoffset: 0;
  transition: stroke .3s;
}
.ring-num {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: clamp(1.6rem, 3.4vw, 3.2rem); font-weight: 800; font-variant-numeric: tabular-nums;
}
.timer-ring.small .ring-num { font-size: 1.6rem; }
.timer-ring.warn .ring-fg { stroke: var(--warn); }
.timer-ring.low .ring-fg { stroke: var(--danger); }
.timer-ring.low .ring-num { color: var(--danger); animation: pulse 1s infinite; }
.timer-ring.done .ring-fg { stroke: var(--danger); }
.ring-label { color: var(--muted); font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: .1em; }

/* ---- leaderboard ---- */
#ph-board { flex-direction: column; align-items: center; }
.board-title { font-size: clamp(1.8rem, 4vw, 3rem); margin: 10px 0 30px; }
.board {
  flex: 1; width: 100%; max-width: 1100px;
  display: flex; align-items: flex-end; justify-content: center; gap: 4vw;
  padding-bottom: 20px; min-height: 0;
}
.board-col { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 160px; height: 100%; justify-content: flex-end; }
.board-score { font-size: clamp(1.5rem, 3vw, 2.6rem); font-weight: 800; font-variant-numeric: tabular-nums; }
.board-bar {
  width: 100%; border-radius: 14px 14px 0 0;
  background: linear-gradient(180deg, var(--hc), color-mix(in srgb, var(--hc) 55%, #000));
  box-shadow: 0 0 34px color-mix(in srgb, var(--hc) 35%, transparent);
  transition: height 1s cubic-bezier(.2, .8, .2, 1);
  min-height: 8px;
}
.board-name { font-weight: 800; font-size: clamp(.9rem, 1.6vw, 1.3rem); }
.board-rank { color: var(--muted); font-weight: 700; }

/* ---- final ---- */
#ph-final { align-items: center; justify-content: center; }
.final { text-align: center; width: 100%; }
.final .trophy { font-size: clamp(3rem, 8vw, 6rem); animation: bounce 1.6s infinite; }
.final .winner-name {
  font-size: clamp(2.2rem, 6vw, 4.6rem); font-weight: 900; margin: 8px 0;
  color: var(--hc); text-shadow: 0 0 44px color-mix(in srgb, var(--hc) 55%, transparent);
}
.final .winner-label { color: var(--muted); font-size: 1.3rem; text-transform: uppercase; letter-spacing: .2em; }
.final-standings { display: flex; justify-content: center; gap: 18px; margin-top: 38px; flex-wrap: wrap; }
.final-chip {
  border: 1px solid color-mix(in srgb, var(--hc) 50%, transparent);
  background: color-mix(in srgb, var(--hc) 12%, transparent);
  border-radius: 14px; padding: 14px 22px; min-width: 150px;
}
.final-chip .fc-rank { color: var(--muted); font-weight: 700; font-size: .8rem; }
.final-chip .fc-name { font-weight: 800; color: var(--hc); }
.final-chip .fc-score { font-size: 1.5rem; font-weight: 800; }

/* ---- bottom strip ---- */
/* ---- supervised mode: camera self-view and the two overlays ---- */
.cam-wrap { position: relative; flex: 0 0 auto; }
.cam-wrap video {
  width: clamp(64px, 9vh, 104px); aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 10px; border: 2px solid var(--ok); background: #000; display: block;
}
.cam-dot {
  position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--danger); box-shadow: 0 0 8px var(--danger); animation: pulse 1.6s infinite;
}

.exam-overlay {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: color-mix(in srgb, var(--bg) 92%, #000);
}
.exam-overlay[hidden] { display: none; }
.exam-card {
  width: min(560px, 94vw); text-align: center;
  background: var(--panel); border: 1px solid var(--border); border-radius: 18px;
  padding: clamp(24px, 4vh, 40px);
}
.exam-card h1 { font-size: clamp(1.5rem, 4vh, 2.2rem); margin: 0 0 14px; }
.exam-card p { color: var(--muted); font-size: clamp(.95rem, 2.2vh, 1.1rem); line-height: 1.5; margin: 0 0 12px; }
.exam-card .exam-note { color: var(--accent); font-weight: 700; }
.exam-card .btn { margin-top: 10px; }

/* the entrant's own photo, sitting in the row with their name */
.entrant-photo {
  width: clamp(38px, 6vh, 56px); height: clamp(38px, 6vh, 56px);
  border-radius: 50%; object-fit: cover;
  border: 2px solid var(--accent);
}

/* ---- team and entrant screens ----
   The shared layout floats the timer ring over the top-right corner, which a
   long question runs straight underneath. On these screens the ring takes its
   own row above the question instead, so the two can never overlap however long
   the text is. And these are laptops and tablets in people's hands, not the
   projector, so the question is set at reading size rather than hall size.
   The audience screen keeps the floating ring — its question is centred with
   room around it. */
.screen.team #ph-question { flex-direction: column; gap: 12px; padding-top: 12px; }
.screen.team .t-area.top { position: static; align-self: flex-end; margin: 0; }
.screen.team .timer-ring.small { width: 76px; }
.screen.team .timer-ring.small .ring-num { font-size: 1.3rem; }
.screen.team .q-area { justify-content: flex-start; padding-top: 0; }
.screen.team .q-text { font-size: clamp(1.05rem, 2vw, 1.8rem); line-height: 1.35; margin-bottom: 18px; }
.screen.team .q-options { gap: 12px; }
.screen.team .opt { padding: 12px 16px; }

/* ---- who scored on the question just asked (team quizzes) ---- */
#ph-scorers { flex-direction: column; align-items: center; }
.scorers {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;
  gap: clamp(14px, 2.5vw, 34px); width: min(1400px, 94vw);
}
.scorer-card {
  flex: 1 1 240px; max-width: 340px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: clamp(18px, 3vh, 34px) 20px; border-radius: 18px;
  border: 2px solid var(--hc); border-top-width: 8px;
  background: color-mix(in srgb, var(--hc) 12%, var(--panel));
}
.scorer-name { font-size: clamp(1.3rem, 3.4vh, 2.2rem); font-weight: 800; color: var(--hc); text-align: center; }
.scorer-time { color: var(--muted); font-weight: 700; font-size: clamp(1rem, 2.4vh, 1.4rem); }
.scorer-points {
  font-size: clamp(1.8rem, 5vh, 3.2rem); font-weight: 900;
  font-variant-numeric: tabular-nums; color: var(--ok);
}
.scorers-none { color: var(--muted); font-weight: 700; font-size: clamp(1.1rem, 3vh, 1.6rem); }

/* ---- individual tournament board (entrants, not houses) ---- */
/* the house board stacks bars from the floor; this one is a centred list */
.board.individual { align-items: center; overflow-y: auto; }
.ind-board {
  display: flex; flex-direction: column; gap: 10px;
  width: min(760px, 92vw); margin: 0 auto;
}
.ind-board.final { margin-top: 22px; }
.ind-row {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 18px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--border);
}
.ind-row.leader {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
}
.ind-rank { font-weight: 800; color: var(--muted); min-width: 3ch; font-size: clamp(1rem, 2.4vh, 1.3rem); }
.ind-face img, .ind-face span {
  width: clamp(38px, 6vh, 54px); height: clamp(38px, 6vh, 54px);
  border-radius: 50%; object-fit: cover; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--accent); background: var(--panel-2);
  font-weight: 800; color: var(--accent);
}
.ind-name { flex: 1; font-weight: 800; font-size: clamp(1rem, 2.8vh, 1.5rem); text-align: left; }
.ind-score { font-weight: 800; font-size: clamp(1.1rem, 3vh, 1.7rem); }
.ind-empty { color: var(--muted); font-weight: 700; text-align: center; padding: 20px; }

.strip {
  display: flex; border-top: 1px solid var(--border);
}
/* an individual tournament has no houses to show — beats the class rule above */
.strip[hidden] { display: none; }
.strip-house {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 14px 8px; border-top: 4px solid var(--hc);
  background: color-mix(in srgb, var(--hc) 7%, transparent);
}
.strip-name { font-weight: 800; font-size: clamp(.8rem, 1.4vw, 1.05rem); }
.strip-score { font-size: clamp(1.1rem, 2vw, 1.6rem); font-weight: 800; font-variant-numeric: tabular-nums; }
.strip-score.bump { animation: scoreBump .6s ease; }
@keyframes scoreBump { 0% { transform: scale(1); } 40% { transform: scale(1.45); color: var(--ok); } 100% { transform: scale(1); } }

/* ---- pre-quiz team introduction (audience screen only) ----
   A slide is either the team's title or a group of its students; --ip sizes the
   photos so 3, 6 or 10 faces all fit the screen without scrolling. */
.intro-overlay {
  position: absolute; inset: 0; z-index: 8;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--bg); text-align: center;
}
.intro-card {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(14px, 3vh, 34px); width: 100%; padding: 0 3vw;
}
.intro-card.pop { animation: introPop .5s ease; }
@keyframes introPop {
  from { opacity: 0; transform: translateY(18px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

.intro-team {
  margin: 0; font-size: clamp(1.6rem, 4.5vh, 2.8rem);
  color: var(--hc, var(--accent));
}
:root[data-theme="light"] .intro-team { color: color-mix(in srgb, var(--hc, var(--accent)) 60%, #000); }

.intro-people {
  --ip: clamp(84px, 13vh, 128px);          /* 7+ per slide; overridden below */
  --ip-name: clamp(.9rem, 2vh, 1.25rem);
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center;
  gap: clamp(14px, 2.4vw, 46px); max-width: min(1600px, 94vw);
}
.intro-people[data-count="1"] { --ip: clamp(160px, 28vh, 280px); --ip-name: clamp(1.6rem, 5vh, 3rem); }
.intro-people[data-count="2"] { --ip: clamp(150px, 25vh, 240px); --ip-name: clamp(1.3rem, 3.6vh, 2.2rem); }
.intro-people[data-count="3"] { --ip: clamp(140px, 23vh, 220px); --ip-name: clamp(1.2rem, 3.2vh, 2rem); }
.intro-people[data-count="4"],
.intro-people[data-count="5"],
.intro-people[data-count="6"] { --ip: clamp(110px, 18vh, 165px); --ip-name: clamp(1rem, 2.6vh, 1.6rem); }

.intro-person {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: var(--ip);
}
.ip-photo img, .ip-photo span {
  width: var(--ip); height: var(--ip);
  border-radius: 50%; object-fit: cover;
  border: 5px solid var(--hc, var(--accent));
  box-shadow: 0 0 50px color-mix(in srgb, var(--hc, var(--accent)) 40%, transparent);
}
.ip-photo span {
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--ip) * .42); font-weight: 800;
  color: var(--hc, var(--accent)); background: var(--panel-2);
}
.ip-name { font-size: var(--ip-name); font-weight: 800; line-height: 1.15; }
.ip-meta { color: var(--muted); font-size: calc(var(--ip-name) * .68); font-weight: 700; }

.intro-progress {
  position: absolute; bottom: 18px; right: 28px;
  color: var(--muted); font-weight: 700; font-size: 1rem;
}

/* team title slide: just the name, as large as it goes */
.intro-overlay.house-slide .intro-team { font-size: clamp(2.6rem, 11vh, 6rem); }

/* ---- connection badge ---- */
.conn-badge {
  position: fixed; bottom: 74px; right: 16px; z-index: 50;
  padding: 6px 14px; border-radius: 999px; font-size: .8rem; font-weight: 700;
  transition: opacity .3s; pointer-events: none;
}
.conn-badge.on { background: color-mix(in srgb, var(--ok) 18%, var(--panel)); color: var(--ok); opacity: 0; }
.conn-badge.off { background: color-mix(in srgb, var(--danger) 22%, var(--panel)); color: var(--danger); opacity: 1; }

/* ---- team specifics ---- */
.team-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 30px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--house) 30%, transparent), transparent 70%);
  border-bottom: 3px solid var(--house);
}
.team-id { display: flex; align-items: center; gap: 14px; }
.team-id .app-logo { height: 40px; max-width: 150px; }
.team-id h1 { margin: 0; font-size: clamp(1.3rem, 3vw, 2rem); }
.team-swatch {
  width: 26px; height: 26px; border-radius: 8px; background: var(--house);
  box-shadow: 0 0 20px color-mix(in srgb, var(--house) 60%, transparent);
}
.team-stats { display: flex; gap: 22px; align-items: center; }
.team-stat { text-align: center; }
.team-stat span { font-size: 1.7rem; font-weight: 800; font-variant-numeric: tabular-nums; display: block; }
.team-stat label { color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; }
.team .q-text { font-size: clamp(1.2rem, 2.6vw, 2rem); }
.team #ph-question { flex-direction: column; gap: 10px; }
.team .q-area { justify-content: flex-start; padding-top: 20px; }

/* this team's registered students, on the "You're in!" waiting screen */
.team-roster {
  margin-top: 34px; width: min(560px, 90vw);
  border: 1px solid var(--border); border-top: 4px solid var(--house, var(--accent));
  border-radius: 14px; padding: 16px 20px; text-align: left;
  background: color-mix(in srgb, var(--house, var(--accent)) 6%, transparent);
}
.team-roster-title {
  font-weight: 800; color: var(--house, var(--accent)); margin-bottom: 10px;
  text-transform: uppercase; letter-spacing: .05em; font-size: .95rem;
}
:root[data-theme="light"] .team-roster-title { color: color-mix(in srgb, var(--house, var(--accent)) 55%, #000); }
.team-roster-list { display: flex; flex-wrap: wrap; gap: 14px 24px; }
.team-roster-item { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1.1rem; }
.tr-photo {
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  border: 2px solid var(--house, var(--accent)); background: var(--panel-2);
}
.tr-photo.tr-initial {
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.15rem; color: var(--house, var(--accent));
}

/* ============ light-mode contrast fixes ============ */
/* House/brand colours are vivid for backgrounds but too light as TEXT on the
   light theme's near-white panels. Darken them where they're used as foreground
   (correct options keep their own dark-on-green styling, so exclude .correct). */
:root[data-theme="light"] .opt:nth-child(1):not(.correct) .opt-letter { color: color-mix(in srgb, var(--red) 80%, #000); }
:root[data-theme="light"] .opt:nth-child(2):not(.correct) .opt-letter { color: color-mix(in srgb, var(--blue) 82%, #000); }
:root[data-theme="light"] .opt:nth-child(3):not(.correct) .opt-letter { color: color-mix(in srgb, var(--yellow) 42%, #000); }
:root[data-theme="light"] .opt:nth-child(4):not(.correct) .opt-letter { color: color-mix(in srgb, var(--green) 78%, #000); }
:root[data-theme="light"] .final .winner-name { color: color-mix(in srgb, var(--hc) 58%, #000); }
:root[data-theme="light"] .final-chip .fc-name { color: color-mix(in srgb, var(--hc) 55%, #000); }

/* ============ mobile / phones ============ */
@media (max-width: 640px) {
  /* headers: shrink, truncate the title, let the right side wrap if needed */
  .screen-head { padding: 10px 12px; flex-wrap: wrap; row-gap: 6px; }
  .screen-head.sub { padding: 7px 12px; }
  .head-left { gap: 8px; flex: 1 1 auto; min-width: 0; }
  .head-left .app-logo { height: 26px; max-width: 84px; }
  .hd-title { font-size: 1rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hd-round { margin-left: 8px; font-size: .82rem; }
  .head-right { gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
  .hd-chip { padding: 4px 9px; font-size: .78rem; }
  .hd-nav { gap: 5px; }
  .hd-nav-link { padding: 4px 9px; font-size: .72rem; }

  .phase { padding: 14px 14px 20px; }

  /* question + timer stack vertically; timer above the question */
  #ph-question { flex-direction: column; gap: 14px; }
  .audience .t-area { order: -1; }
  .audience .timer-ring { width: min(150px, 40vw); }
  .q-text { margin-bottom: 14px; }
  .q-img { max-height: 26vh; margin-bottom: 16px; }
  .q-options { gap: 10px; }
  .opt { padding: 12px 14px; border-radius: 12px; }
  .opt-letter { width: 32px; height: 32px; border-radius: 8px; }
  .open-answer { flex-direction: column; margin-top: 14px; }
  .open-answer .btn { width: 100%; }

  /* leaderboard: columns flex to fit instead of a fixed 4x160px overflow */
  .board-title { font-size: 1.6rem; margin: 6px 0 16px; }
  .board { gap: 8px; padding: 0 4px 12px; }
  .board-col { width: auto; flex: 1 1 0; min-width: 0; }
  .board-score { font-size: 1.2rem; }
  .board-name { font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

  /* final standings: two per row */
  .final .winner-name { font-size: clamp(1.8rem, 9vw, 2.6rem); }
  .final-standings { gap: 8px; margin-top: 20px; }
  .final-chip { min-width: 42%; padding: 10px 12px; }

  .answer-banner { margin-top: 16px; padding: 12px 16px; }
  .team-answers { margin-top: 14px; }
  .ta-name { flex-basis: 84px; }
  .ta-row { padding: 8px 10px; gap: 8px; }

  /* team header + inline timer */
  .team-head { padding: 10px 12px; }
  .team-id { gap: 8px; min-width: 0; }
  .team-id .app-logo { height: 26px; max-width: 72px; }
  .team-id h1 { font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .team-swatch { width: 18px; height: 18px; flex-shrink: 0; }
  .team-stats { gap: 10px; flex-shrink: 0; }
  .team-stat span { font-size: 1.2rem; }
  .team-stat label { font-size: .62rem; }
  .team .t-area.top { position: static; align-self: center; margin-bottom: 2px; }
  .timer-ring.small { width: 64px; }
  .timer-ring.small .ring-num { font-size: 1.2rem; }

  /* bottom score strip: stack name over score so 4 houses fit */
  .strip-house { padding: 9px 4px; gap: 2px; flex-direction: column; }
  .strip-name { font-size: .72rem; text-align: center; }
  .strip-score { font-size: 1.1rem; }
}