/* LAB LIVE + OUTBREAK + PROBABILITY LIVE. Dark only, on the site's Sept 2026 rebrand (tokens.css): space navy
   base, Express teal for actions, Rocket orange for time running low and streaks, green + check for correct,
   red + cross for wrong. Two screens:
   .ll-host     the projector: readable from the back of a room (question text >= 40px, the join code huge)
   .ll-student  a student's Chromebook: fits 1366 x 768 with no scrolling, body text >= 16px
   Color is never the only signal: answer tiles have a shape and a letter, the right answer has a check icon AND
   the word "Correct", roles have a badge and a name.
   Type: Atkinson Hyperlegible everywhere; Righteous only for the logo, the join code and podium place numbers.
   Every score, timer and count uses tabular figures so digits don't jitter. Spacing on an 8 px scale; one card
   radius (16 px), 1 px hairlines, one shadow. Motion 150-250 ms ease-out, off under prefers-reduced-motion. */

:root {
  /* palette (values from tokens.css: --tlg-space-navy, the subject solids, the footer's dark-mode fgs) */
  --ll-bg: #1b2238;               /* space navy */
  --ll-bg-2: #141a2c;             /* sunken: tracks, inputs */
  --ll-panel: #232c47;            /* cards */
  --ll-panel-2: #2c3757;          /* raised / hover */
  --ll-line: rgba(237, 239, 242, .14);   /* hairline */
  --ll-line-strong: rgba(237, 239, 242, .32);
  --ll-text: #edeff2;
  --ll-muted: #c3ccd5;            /* 10:1 on the navy */
  --ll-teal: #3fb5a3;             /* Express teal: the action color */
  --ll-teal-hi: #7fd8c9;
  --ll-on-teal: #0f1a2e;          /* text on a teal fill */
  --ll-orange: #f39237;           /* Rocket orange: time running low, streaks */
  --ll-orange-hi: #f9b872;
  --ll-amber: var(--ll-orange-hi);/* (older name; Probability Live's highlights) */
  --ll-green: #6ee7a0;            /* correct (always with a check) */
  --ll-red: #f28b84;              /* wrong (always with a cross); 7:1 on the navy */
  --ll-red-solid: #d2362f;
  --ll-focus: #7fd8c9;
  /* answer tiles: white text on each is >= 4.5:1 */
  --ll-a1: #c8322b; --ll-a2: #2f6fbd; --ll-a3: #b4600f; --ll-a4: #2e7d4f;
  --ll-radius: 16px;
  --ll-radius-sm: 8px;
  --ll-shadow: 0 8px 24px rgba(4, 8, 20, .35);
  --ll-font: 'Atkinson Hyperlegible', system-ui, sans-serif;
  --ll-brandfont: 'Righteous', 'Atkinson Hyperlegible', sans-serif;   /* logo, join code, podium places only */
  --ll-display: var(--ll-font);   /* headings are Atkinson bold */
  --ll-mono: var(--ll-font);      /* numbers: Atkinson with tabular figures (see .ll-num) */
  --ll-ease: cubic-bezier(.2, .7, .3, 1);
  --ll-fast: .15s; --ll-med: .25s;
  --ll-max: 1200px;               /* the projector's one content column */
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body.ll-body {
  background: var(--ll-bg);
  color: var(--ll-text);
  font: 18px/1.4 var(--ll-font);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--ll-focus); outline-offset: 2px; }
a { color: var(--ll-teal-hi); }
.ll-num { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---- frame + top bar (56 px: logo | mode + Q 7/15 | code chip + controls) ---- */
.ll-app { height: 100vh; display: flex; flex-direction: column; }
.ll-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 0 24px; height: 56px; flex: none; background: rgba(8, 12, 26, .35); border-bottom: 1px solid var(--ll-line); }
.ll-top-l, .ll-top-r { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ll-top-r { justify-content: flex-end; }
.ll-top-c { font-size: 18px; color: var(--ll-muted); white-space: nowrap; }
.ll-top-c strong { color: var(--ll-text); }
.ll-brand { font-family: var(--ll-brandfont); font-size: 24px; letter-spacing: .5px; color: var(--ll-teal); text-decoration: none; white-space: nowrap; }
.ll-brand b { color: var(--ll-orange); font-weight: 400; }
.ll-top .ll-spacer { flex: 1; }
.ll-top #ll-status { font-size: 15px; }
.ll-codechip { display: inline-flex; align-items: baseline; gap: 8px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--ll-line-strong); font-size: 16px; color: var(--ll-muted); white-space: nowrap; }
.ll-codechip strong { font-family: var(--ll-brandfont); font-weight: 400; font-size: 20px; letter-spacing: 2px; color: var(--ll-text); }
.ll-top .ll-btn { min-height: 36px; padding: 4px 12px; font-size: 15px; }
/* The student page (/live/) carries the site's floating Menu button (overlay shell, scripts/build.mjs): make room
   for it, and hide it and the sign-in pill once the student is in a game. The projector page has neither. */
.tlg-overlay ~ .ll-app .ll-top { padding-left: 150px; }
body.ll-playing .tlg-overlay, body.ll-playing .tlg-student { display: none !important; }
body.ll-playing .tlg-overlay ~ .ll-app .ll-top { padding-left: 24px; }
.ll-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; background: var(--ll-panel); border: 1px solid var(--ll-line); font-size: 16px; color: var(--ll-muted); }
.ll-chip strong { color: var(--ll-text); }
.ll-main { flex: 1; min-height: 0; position: relative; }
.ll-screen { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 16px 24px 24px; gap: 16px; }
.ll-host .ll-screen > * { width: 100%; max-width: var(--ll-max); margin-left: auto; margin-right: auto; }
.ll-host .ll-screen > .ll-ob, .ll-host .ll-screen > .ll-lobby { max-width: none; }

/* ---- buttons: primary (teal fill), secondary (outline), danger (red outline); 44 px tall ---- */
.ll-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 20px; border-radius: var(--ll-radius-sm); border: 1px solid var(--ll-line-strong); background: transparent; color: var(--ll-text); font-weight: 700; text-decoration: none; transition: background var(--ll-fast) var(--ll-ease), border-color var(--ll-fast) var(--ll-ease); }
.ll-btn:hover { background: rgba(237, 239, 242, .08); border-color: var(--ll-muted); }
.ll-btn.primary { background: var(--ll-teal); color: var(--ll-on-teal); border-color: transparent; }
.ll-btn.primary:hover { background: var(--ll-teal-hi); }
.ll-btn.warn, .ll-btn.danger { color: var(--ll-red); border-color: rgba(242, 139, 132, .55); }
.ll-btn.warn:hover, .ll-btn.danger:hover { background: rgba(242, 139, 132, .1); border-color: var(--ll-red); }
.ll-btn.big { font-size: 22px; min-height: 56px; padding: 8px 32px; }
.ll-btn.quiet { border-color: transparent; color: var(--ll-muted); }
.ll-btn:disabled { opacity: .45; cursor: not-allowed; }
.ll-panel { background: var(--ll-panel); border: 1px solid var(--ll-line); border-radius: var(--ll-radius); padding: 16px; }
.ll-card { background: var(--ll-panel); border: 1px solid var(--ll-line); border-radius: var(--ll-radius); box-shadow: var(--ll-shadow); }
.ll-muted { color: var(--ll-muted); }
.ll-error { color: var(--ll-red); font-weight: 700; }
.ll-center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; height: 100%; }
.ll-h1 { font-weight: 700; font-size: 44px; line-height: 1.15; margin: 0; }
.ll-h2 { font-weight: 700; font-size: 28px; line-height: 1.2; margin: 0; }
.ll-kicker { font-size: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ll-teal-hi); margin: 0; }
@keyframes ll-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ll-pop { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }

/* ---- answer shapes: color + shape + letter ---- */
.ll-shape { display: inline-block; width: 1em; height: 1em; flex: none; background: currentColor; }
.ll-shape.s1 { clip-path: polygon(50% 6%, 96% 92%, 4% 92%); }
.ll-shape.s2 { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.ll-shape.s3 { border-radius: 50%; }
.ll-shape.s4 { border-radius: 2px; transform: scale(.86); }
.ll-c1 { --c: var(--ll-a1); } .ll-c2 { --c: var(--ll-a2); } .ll-c3 { --c: var(--ll-a3); } .ll-c4 { --c: var(--ll-a4); }
.ll-ctrue { --c: var(--ll-a4); } .ll-cfalse { --c: var(--ll-a1); }
.ll-letter { display: inline-grid; place-items: center; flex: none; width: 1.6em; height: 1.6em; border-radius: 8px; background: rgba(255, 255, 255, .18); font-size: .7em; font-weight: 700; }

/* ---- countdown ring (whole seconds; orange at 5 s) ---- */
.ll-ring { position: relative; width: 96px; height: 96px; flex: none; }
.ll-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ll-ring circle { fill: none; stroke-width: 8; }
.ll-ring .bg { stroke: var(--ll-bg-2); }
.ll-ring .fg { stroke: var(--ll-teal); stroke-linecap: round; transition: stroke-dashoffset 1s linear, stroke var(--ll-med) var(--ll-ease); }
.ll-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 36px; font-weight: 700; }
.ll-ring.low .fg { stroke: var(--ll-orange); }
.ll-ring.low b { color: var(--ll-orange); }
.ll-ring.sm { width: 64px; height: 64px; } .ll-ring.sm b { font-size: 24px; } .ll-ring.sm circle { stroke-width: 7; }

/* ================================================================ projector ===== */
/* lobby: join on the left, who has joined on the right; the setup panel collapses after Ready */
.ll-lobby { display: grid; grid-template-columns: minmax(380px, 30%) 1fr; gap: 24px; height: 100%; min-height: 0; }
.ll-lobby.ready { grid-template-columns: 1fr; }
.ll-setup { overflow: auto; display: flex; flex-direction: column; gap: 16px; font-size: 17px; }
.ll-setup h2 { font-size: 20px; margin: 0; }
.ll-setup fieldset { border: 0; border-top: 1px solid var(--ll-line); padding: 12px 0 0; margin: 0; }
.ll-setup legend { padding: 0 8px 0 0; color: var(--ll-muted); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.ll-setup .ll-hint { margin: 8px 0 0; font-size: 15px; color: var(--ll-muted); }
.ll-setup .ll-ready { position: sticky; bottom: -16px; margin: auto -16px -16px; padding: 12px 16px 16px; background: var(--ll-panel); border-top: 1px solid var(--ll-line); }
.ll-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.ll-seg label { position: relative; }
.ll-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ll-seg span { display: inline-flex; align-items: center; min-height: 40px; padding: 4px 16px; border-radius: var(--ll-radius-sm); border: 1px solid var(--ll-line-strong); transition: background var(--ll-fast) var(--ll-ease); }
.ll-seg label:hover span { background: rgba(237, 239, 242, .06); }
.ll-seg input:checked + span { background: var(--ll-teal); color: var(--ll-on-teal); border-color: transparent; font-weight: 700; }
.ll-seg input:focus-visible + span { outline: 3px solid var(--ll-focus); outline-offset: 2px; }
.ll-setup select { width: 100%; min-height: 44px; padding: 8px 12px; border-radius: var(--ll-radius-sm); border: 1px solid var(--ll-line-strong); background: var(--ll-bg-2); }
.ll-banks { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow: auto; padding-right: 4px; }
.ll-banks .subj { font-weight: 700; color: var(--ll-teal-hi); margin-top: 8px; }
.ll-banks .unit { color: var(--ll-muted); font-size: 14px; margin: 4px 0 0 4px; }
.ll-banks details { margin-left: 8px; }
.ll-banks summary { list-style: none; display: flex; align-items: center; gap: 8px; }
.ll-banks summary::-webkit-details-marker { display: none; }
.ll-banks .topics { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 8px 32px; font-size: 15px; }
.ll-banks .more { font-size: 14px; color: var(--ll-muted); border: 0; background: none; padding: 0 4px; text-decoration: underline; }
.ll-check { display: flex; align-items: center; gap: 8px; }
.ll-check input { width: 18px; height: 18px; accent-color: var(--ll-teal); }
.ll-replay { background: rgba(243, 146, 55, .12); border: 1px solid rgba(243, 146, 55, .5); border-radius: var(--ll-radius-sm); padding: 8px 12px; font-size: 16px; }
.ll-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 16px; }
.ll-summary .ll-chip { font-size: 16px; }
.ll-stage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: 1fr auto; gap: 24px; min-height: 0; }
.ll-lobby.ready .ll-stage { width: 100%; max-width: var(--ll-max); margin: 0 auto; }
.ll-joinbox { display: flex; flex-direction: column; justify-content: center; gap: 24px; padding: 32px; min-width: 0; container-type: inline-size; }
.ll-url { font-size: 28px; color: var(--ll-muted); }
.ll-url strong { color: var(--ll-text); }
.ll-code { font-family: var(--ll-brandfont); font-size: min(19cqi, 150px); line-height: 1; letter-spacing: .06em; color: var(--ll-text); white-space: nowrap; }
.ll-joinrow { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.ll-joinrow .ll-url { font-size: 24px; }
.ll-qr { background: #fff; border-radius: var(--ll-radius-sm); image-rendering: pixelated; width: 168px; height: 168px; flex: none; }
.ll-joined { display: flex; flex-direction: column; gap: 16px; min-height: 0; padding: 24px; }
.ll-count { font-size: 32px; font-weight: 700; display: flex; align-items: baseline; gap: 12px; }
.ll-count b { font-size: 56px; line-height: 1; color: var(--ll-teal-hi); }
.ll-pills { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; overflow: auto; min-height: 0; flex: 1; }
.ll-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 14px; border-radius: 999px; background: var(--ll-panel-2); border: 1px solid var(--ll-line); font-size: 18px; font-weight: 700; animation: ll-pop var(--ll-med) var(--ll-ease) both; }
.ll-pill.off { opacity: .5; }
.ll-pill .role { font-size: 13px; font-weight: 700; padding: 0 8px; border-radius: 999px; color: var(--ll-on-teal); background: var(--rc, var(--ll-teal)); }
.ll-pill button { border: 0; background: none; color: var(--ll-muted); font-weight: 700; width: 28px; height: 28px; border-radius: 50%; padding: 0; line-height: 1; }
.ll-pill button:hover { color: var(--ll-red); background: rgba(242, 139, 132, .12); }
.ll-pills .empty { color: var(--ll-muted); font-size: 20px; }
.ll-startbar { grid-column: 1 / -1; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.ll-startbar .ll-spacer { flex: 1; }

/* question */
.ll-qcard { position: relative; padding: 24px 136px 24px 32px; min-height: 144px; display: flex; align-items: center; }
.ll-qcard .ll-ring { position: absolute; right: 24px; top: 24px; }
.ll-prompt { font-size: 42px; line-height: 1.2; font-weight: 700; margin: 0; }
.ll-qcard.long .ll-prompt { font-size: 36px; }
.ll-options { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 16px; flex: 1; min-height: 0; }
.ll-option { display: flex; align-items: center; gap: 16px; padding: 16px 24px; border-radius: var(--ll-radius); background: var(--c); color: #fff; font-size: 32px; font-weight: 700; min-height: 0; transition: opacity var(--ll-med) var(--ll-ease); }
.ll-option .ll-shape { font-size: 36px; color: #fff; }
.ll-option .ll-letter { font-size: 28px; }
.ll-qfoot { display: flex; align-items: center; gap: 16px; font-size: 24px; }
.ll-qfoot .ll-spacer { flex: 1; }
.ll-answered strong { font-size: 32px; color: var(--ll-text); }
.ll-typehint { flex: 1; display: grid; place-items: center; font-size: 34px; text-align: center; color: var(--ll-muted); border: 2px dashed var(--ll-line-strong); border-radius: var(--ll-radius); }
/* older projector parts Probability Live still uses */
.ll-qhead { display: flex; align-items: center; gap: 16px; font-size: 22px; }
.ll-qhead .ll-spacer { flex: 1; }
.ll-timer { font-size: 44px; font-weight: 700; min-width: 2.2em; text-align: center; }
.ll-timebar { height: 8px; background: var(--ll-bg-2); border-radius: 999px; overflow: hidden; flex: none; }
.ll-timebar > i { display: block; height: 100%; background: var(--ll-teal); transform-origin: left; transition: transform 1s linear; }
.ll-timebar.low > i { background: var(--ll-orange); }

/* reveal: bars grow, the right one gets a check + "Correct", the rest fade */
.ll-bars { display: flex; flex-direction: column; gap: 12px; flex: 1; justify-content: center; }
.ll-bar { display: grid; grid-template-columns: 56px 1fr 96px; align-items: center; gap: 16px; font-size: 28px; transition: opacity var(--ll-med) var(--ll-ease); }
.ll-bar .ll-shape { font-size: 36px; color: var(--c); justify-self: center; }
.ll-bar .track { background: var(--ll-bg-2); border-radius: var(--ll-radius-sm); height: 64px; position: relative; overflow: hidden; }
.ll-bar .fill { position: absolute; inset: 0 auto 0 0; background: var(--c); width: 0; transition: width .4s var(--ll-ease); }
.ll-bar .label { position: absolute; inset: 0; display: flex; align-items: center; gap: 16px; padding: 0 16px; font-weight: 700; }
.ll-bar .n { font-weight: 700; font-size: 34px; text-align: right; }
.ll-bars.done .ll-bar:not(.correct) { opacity: .5; }
.ll-bar.correct .track { box-shadow: 0 0 0 3px var(--ll-green) inset; }
.ll-tick { display: inline-flex; align-items: center; gap: 8px; background: var(--ll-green); color: #0b2a18; border-radius: 999px; padding: 2px 16px 2px 8px; font-size: 22px; font-weight: 700; }
.ll-tick svg { width: 24px; height: 24px; }
.ll-pct { font-size: 120px; font-weight: 700; color: var(--ll-text); line-height: 1; }
.ll-ctrls { display: flex; gap: 16px; justify-content: center; align-items: center; font-size: 20px; }

/* boards: rank, name, score, movement */
.ll-board { display: flex; flex-direction: column; gap: 8px; margin: 0 auto; width: min(960px, 100%); }
.ll-row { display: grid; grid-template-columns: 72px 1fr auto 72px; align-items: center; gap: 16px; background: var(--ll-panel); border: 1px solid var(--ll-line); border-radius: var(--ll-radius); padding: 8px 24px; font-size: 32px; min-height: 72px; animation: ll-fade-up var(--ll-med) var(--ll-ease) both; }
.ll-row .place { font-size: 36px; font-weight: 700; color: var(--ll-muted); }
.ll-row .name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll-row .name.anon { color: var(--ll-muted); font-weight: 400; }
.ll-row .score { font-weight: 700; text-align: right; }
.ll-row .move { font-size: 20px; font-weight: 700; text-align: right; color: var(--ll-muted); }
.ll-row .move.up { color: var(--ll-green); } .ll-row .move.down { color: var(--ll-red); }
.ll-row.first { border-color: rgba(127, 216, 201, .5); }
.ll-row .who { display: none; }
.ll-rest { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 24px; width: min(1000px, 100%); margin: 0 auto; font-size: 20px; }
.ll-rest div { display: grid; grid-template-columns: 40px 1fr auto; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--ll-line); }
.ll-rest .p { color: var(--ll-muted); }
.ll-rest .s { font-weight: 700; }
.ll-teams { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ll-team { border-radius: var(--ll-radius); padding: 16px; background: var(--ll-panel); border: 1px solid var(--ll-line); border-top: 6px solid var(--tc); font-size: 20px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ll-team .tname { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 26px; }
.ll-team .tscore { font-size: 34px; font-weight: 700; }
.ll-team .tnames { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 17px; color: var(--ll-muted); max-height: 260px; overflow: hidden; }
.ll-ticon { width: 26px; height: 26px; background: var(--tc); flex: none; }
.ll-ticon.triangle { clip-path: polygon(50% 6%, 96% 92%, 4% 92%); }
.ll-ticon.square { border-radius: 3px; }
.ll-ticon.circle { border-radius: 50%; }
.ll-ticon.star { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }

/* final podium: 2nd | 1st | 3rd, avatars at 4x, Righteous place numbers */
.ll-final { display: flex; flex-direction: column; gap: 16px; flex: 1; min-height: 0; }
.ll-final .ll-h1 { text-align: center; }
.ll-podium { display: flex; align-items: flex-end; justify-content: center; gap: 24px; flex: 1; min-height: 0; }
.ll-step { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 240px; animation: ll-fade-up .4s var(--ll-ease) both; }
.ll-step.p1 { animation-delay: .5s; } .ll-step.p2 { animation-delay: .25s; }
.ll-step .who { display: flex; justify-content: center; min-height: 32px; }
.ll-step .block { width: 100%; border-radius: var(--ll-radius) var(--ll-radius) 0 0; background: var(--ll-panel); border: 1px solid var(--ll-line); border-bottom: 0; display: flex; justify-content: center; padding-top: 8px; font-family: var(--ll-brandfont); font-size: 56px; color: var(--ll-muted); }
.ll-step.p1 .block { color: var(--ll-orange-hi); background: var(--ll-panel-2); }
.ll-step .pname { font-size: 26px; font-weight: 700; text-align: center; max-width: 240px; overflow-wrap: anywhere; }
.ll-step .pscore { font-size: 22px; color: var(--ll-muted); }
.ll-step.p1 .block { height: 120px; } .ll-step.p2 .block { height: 84px; } .ll-step.p3 .block { height: 56px; }
.ll-podium.compact .ll-step .block { font-size: 36px; } .ll-podium.compact .p1 .block { height: 80px; } .ll-podium.compact .p2 .block { height: 56px; } .ll-podium.compact .p3 .block { height: 40px; }
.ll-podium.compact .ll-step .pname { font-size: 22px; } .ll-podium.compact .ll-step .pscore { font-size: 18px; }
.ll-podium.teams .ll-step .tbadge { display: flex; align-items: center; gap: 8px; font-size: 24px; font-weight: 700; }
.ll-confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }

/* Outbreak projector */
.ll-ob { position: absolute; inset: 0; }
.ll-ob canvas.scene { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.ll-ob .hud { position: absolute; inset: 0; pointer-events: none; }
.ll-ob .hud > * { pointer-events: auto; }
.ll-banner { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); background: rgba(20, 26, 44, .92); border: 1px solid var(--ll-line-strong); border-radius: var(--ll-radius); box-shadow: var(--ll-shadow); padding: 8px 24px; font-size: 26px; font-weight: 700; text-align: center; max-width: 60%; line-height: 1.2; }
.ll-banner small { display: block; font-size: 18px; font-weight: 400; color: var(--ll-muted); }
.ll-hp { position: absolute; left: 50%; transform: translateX(-50%); width: min(720px, 56%); }
.ll-hp .lbl { display: flex; justify-content: space-between; font-size: 24px; font-weight: 700; }
.ll-hp .track { height: 24px; border-radius: 999px; background: var(--ll-bg-2); border: 1px solid var(--ll-line-strong); overflow: hidden; position: relative; }
.ll-hp .track i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #d2362f, #f39237); transition: width var(--ll-med) var(--ll-ease); }
.ll-hp .floor { position: absolute; top: -4px; bottom: -4px; left: 10%; width: 3px; background: #fff; }
.ll-meters { position: absolute; left: 24px; top: 96px; display: flex; flex-direction: column; gap: 12px; width: 300px; font-size: 18px; background: rgba(20, 26, 44, .88); border: 1px solid var(--ll-line); border-radius: var(--ll-radius); padding: 16px; }
.ll-meter .track { height: 16px; border-radius: 999px; background: var(--ll-bg-2); border: 1px solid var(--ll-line); overflow: hidden; margin-top: 4px; }
.ll-meter .track i { display: block; height: 100%; background: #5aa2ff; }
.ll-pips { display: flex; gap: 4px; margin-top: 4px; align-items: center; }
.ll-pips b { width: 18px; height: 18px; border-radius: 4px; border: 2px solid #a678f0; }
.ll-pips b.on { background: #a678f0; }
.ll-buff { padding: 4px 12px; border-radius: var(--ll-radius-sm); font-weight: 700; font-size: 18px; }
.ll-buff.act { background: rgba(63, 181, 163, .2); border: 1px solid var(--ll-teal); }
.ll-buff.strike { background: rgba(90, 162, 255, .2); border: 1px solid #5aa2ff; }
.ll-clock { position: absolute; right: 24px; top: 96px; font-size: 44px; font-weight: 700; background: rgba(20, 26, 44, .88); border: 1px solid var(--ll-line); border-radius: var(--ll-radius); padding: 4px 16px; }
.ll-clock.low { color: var(--ll-orange); border-color: var(--ll-orange); }
.ll-obctrls { position: absolute; left: 24px; bottom: 24px; display: flex; gap: 8px; }
.ll-info { position: absolute; right: 24px; bottom: 24px; }
.ll-infopanel { position: absolute; right: 24px; bottom: 80px; width: min(560px, 90%); max-height: 70%; overflow: auto; background: rgba(20, 26, 44, .97); border: 1px solid var(--ll-line); border-radius: var(--ll-radius); box-shadow: var(--ll-shadow); padding: 16px 24px; font-size: 18px; }
.ll-infopanel h3 { margin: 0 0 8px; font-size: 22px; }
.ll-infopanel dl { margin: 8px 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; }
.ll-infopanel dt { font-weight: 700; }
.ll-infopanel dd { margin: 0; }
.ll-mvps { display: flex; gap: 24px; justify-content: center; }
.ll-mvp { width: 260px; background: var(--ll-panel); border: 1px solid var(--ll-line); border-top: 6px solid var(--rc, var(--ll-teal)); border-radius: var(--ll-radius); box-shadow: var(--ll-shadow); padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; animation: ll-fade-up .4s var(--ll-ease) both; }
.ll-mvp .title { font-size: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ll-teal-hi); }
.ll-mvp canvas { image-rendering: pixelated; }
.ll-mvp .stat { font-size: 26px; font-weight: 700; }
.ll-result { font-size: 56px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 16px; }
.ll-result.won { color: var(--ll-green); } .ll-result.lost { color: var(--ll-red); }

/* ================================================================ student ===== */
.ll-student .ll-screen { padding: 16px 24px; gap: 16px; }
.ll-student .ll-screen.with-strip { padding-bottom: 80px; }
.ll-joinform { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 32px 40px; }
.ll-codein { font-family: var(--ll-brandfont); font-size: 56px; letter-spacing: 10px; text-transform: uppercase; text-align: center; width: 9ch; padding: 8px 12px; border-radius: var(--ll-radius); border: 2px solid var(--ll-line-strong); background: var(--ll-bg-2); }
.ll-codein:focus { border-color: var(--ll-teal); outline: none; }
.ll-sq { font-size: 28px; font-weight: 700; line-height: 1.25; margin: 0; }
.ll-sqcard { position: relative; padding: 16px 104px 16px 24px; min-height: 96px; display: flex; align-items: center; flex: none; }
.ll-sqcard .ll-ring { position: absolute; right: 16px; top: 50%; margin-top: -32px; }
.ll-sbtns { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 16px; flex: 1; min-height: 0; }
.ll-sbtn { display: flex; align-items: center; gap: 16px; text-align: left; border: 0; border-radius: var(--ll-radius); padding: 16px 24px; background: var(--c); color: #fff; font-size: 24px; font-weight: 700; min-height: 0; transition: transform var(--ll-fast) var(--ll-ease), opacity var(--ll-med) var(--ll-ease), box-shadow var(--ll-fast) var(--ll-ease); }
.ll-sbtn .ll-shape { font-size: 30px; color: #fff; }
.ll-sbtn .ll-letter { font-size: 22px; }
.ll-sbtn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--ll-shadow); }
.ll-sbtn.picked { box-shadow: 0 0 0 4px var(--ll-bg), 0 0 0 8px #fff; }
.ll-sbtn:disabled { cursor: default; }
.ll-sbtns.locked .ll-sbtn:not(.picked) { opacity: .35; }
.ll-fill { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; flex: 1; }
.ll-fill .row { display: flex; gap: 16px; width: min(760px, 100%); }
.ll-fill input { flex: 1; font-size: 30px; padding: 12px 16px; border-radius: var(--ll-radius); border: 2px solid var(--ll-line-strong); background: var(--ll-bg-2); min-width: 0; }
.ll-fill input:focus { border-color: var(--ll-teal); outline: none; }
.ll-fill .count { font-size: 16px; color: var(--ll-muted); align-self: flex-end; margin-right: max(0px, calc((100% - 760px) / 2)); }
.ll-fill .count.near { color: var(--ll-orange); }
.ll-lockmsg svg, .ll-sresult svg, .ll-feedback svg, .ll-result svg, .ll-ctrls svg { width: 1em; height: 1em; flex: none; }
.ll-lockmsg { flex: none; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 22px; font-weight: 700; color: var(--ll-teal-hi); min-height: 32px; }
.ll-sresult { font-size: 54px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 16px; }
.ll-sresult.ok { color: var(--ll-green); } .ll-sresult.no { color: var(--ll-red); }
.ll-stats { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.ll-stat { background: var(--ll-panel); border: 1px solid var(--ll-line); border-radius: var(--ll-radius); padding: 8px 16px; text-align: center; min-width: 120px; }
.ll-stat b { display: block; font-size: 30px; }
/* the status strip: name, score, streak, place */
.ll-strip { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; display: flex; align-items: center; gap: 24px; padding: 0 24px; background: rgba(8, 12, 26, .55); border-top: 1px solid var(--ll-line); font-size: 20px; z-index: 2; }
.ll-strip .nm { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 30%; }
.ll-strip .ll-spacer { flex: 1; }
.ll-strip .sc b, .ll-strip .rk b { font-size: 24px; }
.ll-strip .st { display: inline-flex; align-items: center; gap: 4px; color: var(--ll-muted); }
.ll-strip .st.hot { color: var(--ll-orange); font-weight: 700; }
.ll-strip .st svg { width: 22px; height: 22px; }
.ll-strip .role { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--rc); }
.ll-roles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; width: min(1100px, 100%); }
.ll-role { border: 1px solid var(--ll-line); border-top: 6px solid var(--rc); border-radius: var(--ll-radius); background: var(--ll-panel); padding: 16px; text-align: left; display: flex; flex-direction: column; gap: 8px; min-height: 170px; transition: background var(--ll-fast) var(--ll-ease); }
.ll-role:hover:not(:disabled) { background: var(--ll-panel-2); }
.ll-role .rn { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 20px; }
.ll-role .rj { font-size: 16px; color: var(--ll-muted); }
.ll-role .rc { font-size: 15px; margin-top: auto; }
.ll-role.mine { background: color-mix(in srgb, var(--rc) 22%, var(--ll-panel)); box-shadow: 0 0 0 3px var(--rc); }
.ll-role:disabled { opacity: .45; }
.ll-badge { display: inline-flex; align-items: center; gap: 8px; padding: 4px 16px 4px 8px; border-radius: 999px; background: color-mix(in srgb, var(--rc) 22%, transparent); border: 1px solid var(--rc); font-weight: 700; }
.ll-badge canvas { image-rendering: pixelated; }
.ll-charge { display: flex; align-items: center; gap: 16px; justify-content: center; flex: none; }
.ll-charge .track { width: 360px; height: 16px; border-radius: 999px; background: var(--ll-bg-2); border: 1px solid var(--ll-line); overflow: hidden; }
.ll-charge .track i { display: block; height: 100%; background: var(--rc, var(--ll-teal)); transition: width var(--ll-med) var(--ll-ease); }
.ll-ability { min-height: 44px; font-size: 20px; padding: 8px 20px; border-radius: var(--ll-radius-sm); border: 0; background: var(--rc, var(--ll-teal)); color: #0f1a2e; font-weight: 700; }
.ll-ability:disabled { background: var(--ll-panel-2); color: var(--ll-muted); }
.ll-obtop { display: flex; align-items: center; gap: 16px; font-size: 18px; flex-wrap: wrap; justify-content: center; flex: none; }
.ll-minihp { width: 240px; height: 12px; background: var(--ll-bg-2); border: 1px solid var(--ll-line-strong); border-radius: 999px; overflow: hidden; }
.ll-minihp i { display: block; height: 100%; background: linear-gradient(90deg, #d2362f, #f39237); }
.ll-feedback { font-size: 30px; font-weight: 700; text-align: center; margin: 0; }
.ll-feedback.ok { color: var(--ll-green); } .ll-feedback.no { color: var(--ll-red); }
.ll-small { font-size: 16px; }
@media (max-height: 700px) { .ll-sq { font-size: 24px; } .ll-sbtn { font-size: 21px; padding: 12px 20px; } .ll-prompt { font-size: 36px; } }
@media (max-width: 760px) {
  .ll-sbtns { grid-template-columns: 1fr; } .ll-roles { grid-template-columns: 1fr 1fr; }
  .ll-strip { gap: 12px; font-size: 16px; padding: 0 16px; } .ll-sqcard { padding-right: 88px; }
  .ll-lobby, .ll-stage { grid-template-columns: 1fr; }
}