/* ==========================================================================
   Wall boards — classroom 75", corridor 75".
   Read at 3 to 10 metres in a lit hall, so this is an honour board on paper,
   not a dashboard in a dark room. The sticker art is the only saturated
   colour; rank is carried by gold, steel and bronze.
   ========================================================================== */

.hall {
  --paper:      oklch(97.6% 0.006 95);
  --paper-2:    oklch(99.2% 0.004 95);
  --rule:       oklch(90% 0.008 130);
  --rule-soft:  oklch(94% 0.006 130);
  --ink:        oklch(24% 0.020 165);
  --ink-soft:   oklch(46% 0.016 165);
  --ink-faint:  oklch(62% 0.012 165);
  --emerald:    oklch(38% 0.143 165);

  --gold:       oklch(60% 0.115 85);
  --steel:      oklch(60% 0.012 240);
  --bronze:     oklch(54% 0.090 55);

  --ease:       cubic-bezier(.23, 1, .32, 1);

  min-height: 100vh; margin: 0; position: relative;
  background: var(--paper);
  color: var(--ink);
  font-family: Figtree, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(11px, 1.02vw, 26px);
  -webkit-font-smoothing: antialiased;
}
.hall h1, .hall h2 { font-family: "Bricolage Grotesque", Figtree, sans-serif; letter-spacing: -.03em; line-height: 1; margin: 0; }
.hall-num { font-variant-numeric: tabular-nums; }
.hall :focus-visible { outline: 3px solid var(--emerald); outline-offset: 3px; border-radius: 8px; }

.hall-body { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

/* ── header: title centred, so a passer-by knows which group they are looking at ── */
.hall-hd {
  position: relative; flex: 0 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1em;
  padding: 1.15em 1.6em; background: var(--paper-2); border-bottom: 1px solid var(--rule);
}
.hall-hd-l { display: flex; align-items: center; gap: .7em; }
.hall-hd-r { display: flex; align-items: center; justify-content: flex-end; gap: .6em; }
.hall-logo { height: 2.9em; width: auto; flex: 0 0 auto; }
.hall-title { text-align: center; }
.hall-ttl { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 2.3em; color: var(--ink); }
.hall-sub { font-size: .88em; font-weight: 600; color: var(--ink-faint); margin-top: .3em; letter-spacing: .01em; }

.hall-live {
  display: inline-flex; align-items: center; gap: .45em;
  font-size: .76em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--emerald); background: color-mix(in oklch, var(--emerald) 9%, transparent);
  padding: .4em .8em; border-radius: 99px;
}
.hall-dot { width: .5em; height: .5em; border-radius: 50%; background: var(--emerald); }
@media (prefers-reduced-motion: no-preference) { .hall-dot { animation: pulse 2.4s var(--ease) infinite; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.hall-exit {
  display: inline-flex; align-items: center; gap: .35em; text-decoration: none;
  font-size: .76em; font-weight: 700; color: var(--ink-faint);
  border: 1px solid var(--rule); border-radius: 99px; padding: .4em .8em .4em .6em;
  transition: color .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease);
}
.hall-exit svg { width: 1.1em; height: 1.1em; }
.hall-exit:hover { color: var(--ink); border-color: var(--ink-faint); background: var(--paper); }

/* ── ranked strip: one row per place, read top to bottom ─────────────────
   A circle for the face, the name, then a strip whose length is the score.
   Rank is legible at ten metres from the strip alone; the number confirms it. */
.hall-list {
  display: flex; flex-direction: column; gap: .45em;
  padding: 1.1em 1.6em 1.9em; flex: 1; justify-content: center; min-height: 0;
}

.hall-item {
  --metal: oklch(72% 0.045 165);
  display: flex; align-items: center; gap: .85em;
  padding: .42em .9em .42em .5em; border-radius: 99px;
  background: var(--paper-2); border: 1px solid var(--rule-soft);
}
.hall-item-top {
  padding: .55em .9em .55em .55em;
  border-color: color-mix(in oklch, var(--metal) 50%, var(--rule-soft));
  background: color-mix(in oklch, var(--metal) 7%, var(--paper-2));
}

.hall-rank {
  flex: 0 0 auto; width: 2em; height: 2em; border-radius: 50%;
  display: grid; place-items: center;
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: .95em;
  color: var(--ink-faint); background: var(--paper); border: 1px solid var(--rule);
  font-variant-numeric: tabular-nums;
}
.hall-item-top .hall-rank {
  width: 2.3em; height: 2.3em; font-size: 1.05em;
  color: var(--paper-2); background: var(--metal); border-color: var(--metal);
}

.hall-face {
  position: relative; flex: 0 0 auto; width: 2.6em; height: 2.6em; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  background: color-mix(in oklch, var(--emerald) 12%, var(--paper));
  color: var(--emerald);
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: .95em;
}
.hall-item-top .hall-face { width: 3.1em; height: 3.1em; box-shadow: 0 0 0 .13em var(--metal); }
.hall-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.hall-name {
  flex: 0 0 auto; width: 8.5em;
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 1.15em;
  line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hall-item-top .hall-name { font-size: 1.35em; width: 9.5em; }
/* with no photo alongside, the name gets the room the circle used */
.hall-name-wide { width: 15.5em; }
.hall-meta { font-size: .72em; color: var(--ink-faint); font-weight: 600; }

/* the strip: length carries the score before anyone reads the number */
.hall-strip { flex: 1; min-width: 0; height: .7em; border-radius: 99px; background: var(--rule-soft); overflow: hidden; }
.hall-item-top .hall-strip { height: .95em; }
.hall-strip i {
  display: block; height: 100%; border-radius: 99px;
  background: color-mix(in oklch, var(--metal) 70%, var(--paper));
  transition: width .8s var(--ease);
}
.hall-item-top .hall-strip i { background: var(--metal); }

.hall-score {
  flex: 0 0 auto; min-width: 2.4em; text-align: right;
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 800;
  font-size: 1.5em; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.hall-item-top .hall-score { font-size: 1.95em; color: color-mix(in oklch, var(--metal) 75%, var(--ink)); }

.hall-stk { display: flex; gap: .25em; flex: 0 0 auto; }
.hall-stk .pts-stk { --d: 1.9em; }

@media (prefers-reduced-motion: no-preference) {
  .hall-item.is-new { animation: arrive 2.8s var(--ease) 1; }
}
@keyframes arrive {
  0% { background: color-mix(in oklch, var(--gold) 22%, var(--paper-2)); }
  100% { background: var(--paper-2); }
}

/* ── podium: the classroom board's own top three ─────────────────────────── */
.hall-podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9em; padding: .8em 1.6em .4em; align-items: end; flex: 0 0 auto; }
.hall-pod {
  --metal: var(--steel);
  text-align: center; border-radius: 16px; padding: .7em 1em .6em;
  background: var(--paper-2); border: 1px solid var(--rule-soft);
}
.hall-pod-1 { padding: .9em 1em .8em; border-color: color-mix(in oklch, var(--gold) 45%, var(--rule)); }
.hall-pod-r {
  display: inline-block; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800;
  font-size: .82em; letter-spacing: .08em; text-transform: uppercase;
  color: var(--paper-2); background: var(--metal); padding: .22em .85em; border-radius: 99px;
}
.hall-pod-f {
  position: relative; width: 3.2em; height: 3.2em; border-radius: 50%; margin: .4em auto .35em;
  display: grid; place-items: center; overflow: hidden;
  background: color-mix(in oklch, var(--emerald) 12%, var(--paper));
  color: var(--emerald);
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 1.4em;
  box-shadow: 0 0 0 .13em var(--metal);
}
.hall-pod-1 .hall-pod-f { width: 4.1em; height: 4.1em; box-shadow: 0 0 0 .16em var(--gold); }
.hall-pod-f img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.hall-pod-n {
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 1.02em;
  line-height: 1.16; padding: 0 .3em; text-wrap: balance;
}
.hall-pod-1 .hall-pod-n { font-size: 1.2em; }
.hall-pod-p { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 1.9em; color: var(--metal); line-height: 1; margin-top: .25em; font-variant-numeric: tabular-nums; }
.hall-pod-1 .hall-pod-p { font-size: 2.6em; color: var(--gold); }
.hall-pod-stk { display: flex; justify-content: center; gap: .28em; margin-top: .45em; }
.hall-pod-stk .pts-stk { --d: 2em; }
.hall-pod-1 .hall-pod-stk .pts-stk { --d: 2.3em; }

/* ── footer ──────────────────────────────────────────────────────────────── */
.hall-foot {
  flex: 0 0 auto; display: flex; align-items: center; gap: 1.4em; flex-wrap: wrap;
  padding: 1em 1.6em; background: var(--paper-2); border-top: 1px solid var(--rule);
}
.hall-goal { flex: 1; min-width: 11em; }
.hall-goal-t { font-size: .78em; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-faint); }
.hall-goal-b { height: .5em; border-radius: 99px; background: var(--rule-soft); margin-top: .5em; overflow: hidden; }
.hall-goal-b i { display: block; height: 100%; background: var(--emerald); border-radius: 99px; }
.hall-goal-n { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 2em; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

.hall-just {
  display: flex; align-items: center; gap: .8em; padding: .5em 1.1em .5em .5em;
  border-radius: 99px; background: var(--paper);
  border: 1px solid color-mix(in oklch, var(--gold) 40%, var(--rule)); max-width: 26em;
}
@media (prefers-reduced-motion: no-preference) { .hall-just { animation: slideIn .55s var(--ease) 1; } }
@keyframes slideIn { from { opacity: 0; transform: translateX(1.5em); } }
.hall-just-l { font-size: .7em; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.hall-just-n { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 1.2em; line-height: 1.15; }
.hall-just-c { font-size: .82em; color: var(--ink-faint); font-weight: 600; }
.hall-just .pts-stk { --d: 3em; }

.hall-empty { display: grid; place-items: center; flex: 1; min-height: 40vh; color: var(--ink-faint); font-size: 1.4em; font-weight: 600; }

/* ── madrasah board: four quadrants, nothing rotates ────────────────────── */
.hall-quads {
  flex: 1; min-height: 0; display: grid;
  grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  gap: .8em; padding: .9em 1.3em 1.2em;
}
@media (max-width: 1000px) {
  /* Rows must still share the fixed height. grid-template-rows: none let them
     size to content, and since .hall-body is height-capped with overflow
     hidden, everything past the first panel was simply cut off rather than
     scrollable. */
  .hall-quads { grid-template-columns: 1fr; grid-template-rows: repeat(4, minmax(0, 1fr)); }
}


.hall-quad {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--paper-2); border: 1px solid var(--rule-soft);
  border-radius: 16px; padding: .85em 1em 1em;
}
.hall-quad-t { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 1.5em; color: var(--ink); }
.hall-quad-s { font-size: .8em; font-weight: 600; color: var(--ink-faint); margin-top: .15em; }
.hall-quad-empty { margin: auto; color: var(--ink-faint); font-weight: 600; font-size: 1.1em; }

/* three-up podium inside a quadrant */
.hall-mini { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; align-items: end; padding-top: .7em; }
.hall-mini-p {
  --metal: var(--steel);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  border-radius: 12px; padding: .6em .4em .55em; background: var(--paper);
  border: 1px solid color-mix(in oklch, var(--metal) 32%, var(--rule-soft));
}
.hall-mini-1 { padding: .85em .4em .75em; border-color: color-mix(in oklch, var(--gold) 55%, var(--rule)); }
.hall-mini-r {
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: .68em;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--paper-2); background: var(--metal); padding: .18em .6em; border-radius: 99px;
}
.hall-mini-f {
  position: relative; width: 3.1em; height: 3.1em; border-radius: 50%; margin: .45em 0 .35em;
  display: grid; place-items: center; overflow: hidden;
  background: color-mix(in oklch, var(--emerald) 12%, var(--paper)); color: var(--emerald);
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 1em;
  box-shadow: 0 0 0 .12em var(--metal);
}
.hall-mini-1 .hall-mini-f { width: 3.9em; height: 3.9em; box-shadow: 0 0 0 .14em var(--gold); }
.hall-mini-f img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.hall-mini-n {
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: .88em; line-height: 1.2;
  max-width: 100%; text-wrap: balance;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.hall-mini-1 .hall-mini-n { font-size: 1.02em; }
.hall-mini-c { font-size: .72em; color: var(--ink-faint); font-weight: 600; margin-top: .05em; }
.hall-mini-v {
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 1.5em;
  color: var(--metal); margin-top: .2em; font-variant-numeric: tabular-nums; line-height: 1;
}
.hall-mini-1 .hall-mini-v { font-size: 1.9em; color: var(--gold); }

/* leading grades */
.hall-grades { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: .42em; padding-top: .6em; }
.hall-grade { display: flex; align-items: center; gap: .75em; padding: .3em .2em; }
.hall-grade-r {
  flex: 0 0 auto; width: 1.7em; height: 1.7em; border-radius: 50%; display: grid; place-items: center;
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: .85em;
  color: var(--ink-faint); background: var(--paper); border: 1px solid var(--rule);
}
.hall-grade-top .hall-grade-r { color: var(--paper-2); background: var(--gold); border-color: var(--gold); }
.hall-grade-n { flex: 0 0 auto; width: 5.2em; font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 1.02em; }
.hall-grade-v { flex: 0 0 auto; min-width: 2.6em; text-align: right; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 1.25em; color: var(--ink); font-variant-numeric: tabular-nums; }
/* Raw total, kept beside the per-student figure so a big class can still see
   what it earned — quieter, because it is no longer what the ranking uses. */
.hall-grade-x { flex: 0 0 auto; min-width: 3.1em; text-align: right; font-family: "Bricolage Grotesque", sans-serif; font-weight: 600; font-size: .8em; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.hall-grade-top .hall-grade-v { color: var(--gold); }

/* Every place gets a visible bar, not just the leader. The shared .hall-strip i
   fill mixes var(--metal), which the band panels set inline per row but these
   rows never do — so color-mix got an undefined colour and ranks 2-5 rendered a
   correctly-sized bar with no fill. The bar is the whole point of the panel:
   it shows at a glance that first place is clear of the field while third,
   fourth and fifth are almost level. */
.hall-grade .hall-strip i { background: color-mix(in oklch, var(--gold) 38%, var(--paper)); }
.hall-grade-top .hall-strip i { background: var(--gold); }

/* ── sound toggle ────────────────────────────────────────────────────────── */
.hall-sound {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 1.05em; z-index: 5;
  display: inline-flex; align-items: center; gap: .4em;
  background: var(--paper); color: var(--ink-faint);
  border: 1px solid var(--rule); border-radius: 99px;
  padding: .4em .9em .4em .7em; cursor: pointer;
  font: inherit; font-size: .72em; font-weight: 700; letter-spacing: .03em;
  opacity: .55; transition: opacity .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.hall-sound:hover { opacity: 1; }
.hall-sound svg { width: 1.1em; height: 1.1em; }
.hall-sound .hall-wave { opacity: .25; }
.hall-sound.is-on { color: var(--emerald); border-color: color-mix(in oklch, var(--emerald) 35%, var(--rule)); opacity: 1; }
.hall-sound.is-on .hall-wave { opacity: 1; }

/* ── responsive: kept last on purpose ───────────────────────────────────
   These override .hall-mini-* and .hall-grade-*, which are defined further
   up at the same specificity. Anywhere earlier in the file and the base
   rules win instead — which is exactly what happened first time round:
   the panels resized but the podiums inside them did not. */
/* ── phone: the whole board on one screen, no scrolling ──────────────────
   Everything here is em-derived from .hall's font-size, so the base size does
   most of the work and the rest is trimming chrome that only earns its space
   on a wall-mounted TV. 100dvh, not 100vh: on mobile 100vh counts the area
   behind the browser's own bars, which would push the footer out of sight —
   the one thing the fixed height exists to prevent. */
@media (max-width: 640px) {
  .hall { font-size: clamp(8.5px, 2.7vw, 13px); }
  .hall-body { height: 100dvh; }

  .hall-hd { padding: .6em .8em; gap: .5em; }
  .hall-logo { height: 2em; }
  .hall-ttl { font-size: 1.3em; }
  .hall-sub { font-size: .78em; margin-top: .15em; }
  /* The live pill is decorative and the header is the tightest row on a phone,
     so it goes rather than squeezing the title. Exit keeps its label: it is the
     only way back out of the board. */
  .hall-live { display: none; }
  .hall-exit { font-size: .7em; }

  .hall-quads { gap: .45em; padding: .5em .6em .55em; }
  .hall-quad { padding: .5em .6em .55em; border-radius: 12px; }
  .hall-quad-t { font-size: 1.15em; }
  .hall-quad-s { font-size: .72em; }

  /* align-content centres the row in the leftover space; align-items: end is
     inherited from the base rule and keeps first place sitting proud, so the
     podium still reads as a podium rather than drifting to the bottom. */
  .hall-mini { gap: .3em; padding-top: .4em; align-content: center; }
  .hall-mini-p { padding: .4em .25em .35em; border-radius: 9px; }
  .hall-mini-1 { padding: .5em .25em .45em; }
  .hall-mini-f { width: 2.3em; height: 2.3em; margin: .3em 0 .25em; }
  .hall-mini-1 .hall-mini-f { width: 2.8em; height: 2.8em; }
  .hall-mini-r { font-size: .6em; padding: .12em .45em; }
  .hall-mini-n { font-size: .76em; -webkit-line-clamp: 2; }
  .hall-mini-1 .hall-mini-n { font-size: .84em; }
  .hall-mini-c { font-size: .64em; }
  .hall-mini-v { font-size: 1.15em; }
  .hall-mini-1 .hall-mini-v { font-size: 1.4em; }

  .hall-grades { gap: .18em; padding-top: .35em; }
  .hall-grade { gap: .5em; padding: .12em 0; }
  .hall-grade-n { width: 4.1em; font-size: .92em; }
  .hall-grade-v { font-size: 1.05em; min-width: 2.3em; }
  .hall-grade-x { font-size: .72em; min-width: 2.6em; }

  .hall-foot { padding: .55em .8em; gap: .6em; }
  .hall-goal { min-width: 7em; }
  .hall-goal-t { font-size: .68em; }
  .hall-goal-n { font-size: 1.4em; }
  /* The just-now ticker is the first thing to go: it repeats what the board
     already shows, and on a phone that space is the difference between the
     footer fitting and the board being cut off. */
  .hall-just { display: none; }
}

/* Short phones (SE-sized, and anything in landscape): at 568px tall the four
   panels get ~123em-worth of room and the podium wants ~150, so the scores were
   being cut off inside each panel even though the page itself did not scroll.
   The class label goes and the portrait shrinks — the name and the score are
   what a passer-by actually reads. */
@media (max-width: 640px) and (max-height: 720px) {
  .hall-quads { gap: .3em; padding: .35em .45em .4em; }
  .hall-quad { padding: .35em .45em .4em; }
  .hall-quad-t { font-size: 1em; }
  .hall-quad-s { font-size: .66em; }

  .hall-mini { gap: .22em; padding-top: .25em; }
  .hall-mini-p { padding: .28em .18em .26em; }
  .hall-mini-1 { padding: .34em .18em .3em; }
  .hall-mini-f { width: 1.75em; height: 1.75em; margin: .2em 0 .16em; }
  .hall-mini-1 .hall-mini-f { width: 2.1em; height: 2.1em; }
  .hall-mini-r { font-size: .54em; padding: .1em .38em; }
  .hall-mini-c { display: none; }
  /* One line, not two. A wrapped name adds ~20px per card, which is exactly
     what was pushing the score out of the bottom of the panel — and a score
     that is cut in half is worse than a name that ends in an ellipsis. */
  .hall-mini-n { font-size: .7em; -webkit-line-clamp: 1; }
  .hall-mini-1 .hall-mini-n { font-size: .76em; }
  .hall-mini-v { font-size: .95em; margin-top: .12em; }
  .hall-mini-1 .hall-mini-v { font-size: 1.15em; }

  .hall-grades { gap: .08em; padding-top: .25em; }
  .hall-grade { padding: .06em 0; }
}