/* Testroom — live quiz: player phones and the projector screen */
:root{
  --a1:#C8322B; --a2:#1A5FBF; --a3:#B07400; --a4:#1C7A53; --a5:#6B3FA0; --a6:#0F6F77;
  --stage:#141B2A; --stage-ink:#F4F6FB;
}
.live{min-height:100dvh;display:flex;flex-direction:column}
.live-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--line)}
.live-main{flex:1;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:18px 16px 28px;max-width:820px;width:100%;margin:0 auto}
.pin-input{font-size:2rem;letter-spacing:.32em;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}

/* answer tiles: colour, shape and letter all carry the same information */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{display:flex;align-items:center;gap:12px;padding:20px 16px;border:none;border-radius:var(--r);color:#fff;
  font-weight:700;font-size:1.05rem;text-align:left;min-height:110px;cursor:pointer;line-height:1.3;width:100%}
.tile .shape{font-size:1.4rem;flex:none;width:1.4em;text-align:center}
.tile:nth-child(6n+1){background:var(--a1)} .tile:nth-child(6n+2){background:var(--a2)}
.tile:nth-child(6n+3){background:var(--a3)} .tile:nth-child(6n+4){background:var(--a4)}
.tile:nth-child(6n+5){background:var(--a5)} .tile:nth-child(6n+6){background:var(--a6)}
.tile[aria-pressed=true]{outline:4px solid var(--ink);outline-offset:3px}
.tile.dim{opacity:.35}
.tile:disabled{cursor:default}
@media (max-width:420px){ .tiles{grid-template-columns:1fr} .tile{min-height:76px;font-size:1rem} }

.bigmsg{text-align:center;font-size:1.6rem;font-weight:700}
.result{text-align:center;padding:26px 18px;border-radius:var(--r);color:#fff}
.result.right{background:var(--a4)} .result.wrong{background:var(--a1)} .result.none{background:var(--muted)}
.result .pts{font-size:2.6rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1}
.scorepill{font-variant-numeric:tabular-nums;font-weight:700;background:var(--soft);border-radius:99px;padding:4px 12px}
.timerring{font-size:2rem;font-weight:700;font-variant-numeric:tabular-nums}
.timerbar{height:8px;border-radius:99px;background:var(--soft);overflow:hidden}
.timerbar i{display:block;height:100%;background:var(--accent);transition:width 1s linear}
.timerbar.low i{background:var(--a1)}

/* projector */
.stage{min-height:100dvh;background:var(--stage);color:var(--stage-ink);display:flex;flex-direction:column}
.stage .wrap{max-width:1400px;width:100%}
.stage-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 28px;border-bottom:1px solid rgba(255,255,255,.14)}
.stage-main{flex:1;display:flex;flex-direction:column;justify-content:center;gap:28px;padding:28px 36px 36px;max-width:1400px;width:100%;margin:0 auto}
.joinbox{display:flex;gap:28px;align-items:center;flex-wrap:wrap;justify-content:center;text-align:center}
.pin-big{font-size:clamp(3rem,11vw,7rem);font-weight:700;letter-spacing:.12em;font-variant-numeric:tabular-nums;line-height:1}
.stage .qtext{font-size:clamp(1.6rem,3.4vw,3rem);font-weight:700;text-align:center;line-height:1.25;max-width:22ch;margin:0 auto}
.stage .tiles{grid-template-columns:1fr 1fr;gap:16px}
.stage .tile{min-height:120px;font-size:clamp(1rem,1.7vw,1.5rem);cursor:default}
.stage .tile.correct{outline:6px solid #fff;outline-offset:-6px}
.stage .tile.muted-opt{opacity:.3}
.nicks{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-height:46vh;overflow:auto}
.nick{background:rgba(255,255,255,.1);border-radius:99px;padding:8px 16px;font-weight:700;font-size:1.1rem;display:flex;gap:8px;align-items:center}
.nick button{background:none;border:none;color:inherit;opacity:.5;padding:0 2px;cursor:pointer;font-size:1rem}
.nick button:hover{opacity:1}
.bars{display:flex;align-items:flex-end;gap:14px;height:34vh;justify-content:center}
.bars .col{flex:1;max-width:160px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;height:100%}
.bars .bar{width:100%;border-radius:8px 8px 0 0;min-height:4px}
.bars .col:nth-child(6n+1) .bar{background:var(--a1)} .bars .col:nth-child(6n+2) .bar{background:var(--a2)}
.bars .col:nth-child(6n+3) .bar{background:var(--a3)} .bars .col:nth-child(6n+4) .bar{background:var(--a4)}
.bars .col:nth-child(6n+5) .bar{background:var(--a5)} .bars .col:nth-child(6n+6) .bar{background:var(--a6)}
.bars .col.correct .bar{outline:4px solid #fff;outline-offset:-4px}
.board{display:flex;flex-direction:column;gap:10px;max-width:760px;margin:0 auto;width:100%}
.board .r{display:grid;grid-template-columns:2.2rem 1fr auto;gap:14px;align-items:center;background:rgba(255,255,255,.1);border-radius:var(--r);padding:14px 20px;font-size:1.25rem;font-weight:700}
.board .r .pos{opacity:.6;font-variant-numeric:tabular-nums}
.podium{display:flex;gap:18px;align-items:flex-end;justify-content:center;min-height:38vh}
.podium .p{display:flex;flex-direction:column;align-items:center;gap:10px;width:clamp(120px,18vw,220px)}
.podium .block{width:100%;border-radius:10px 10px 0 0;background:rgba(255,255,255,.14);display:flex;align-items:flex-start;justify-content:center;padding-top:12px;font-size:2rem;font-weight:700}
.podium .p1 .block{height:clamp(120px,22vh,230px);background:#C9A227;color:#1a1a1a}
.podium .p2 .block{height:clamp(90px,16vh,170px);background:#A7B0BC;color:#1a1a1a}
.podium .p3 .block{height:clamp(70px,12vh,130px);background:#B07C4F;color:#fff}
.podium .who{font-size:1.2rem;font-weight:700;text-align:center;word-break:break-word}
.stage .counter{font-size:clamp(2.4rem,7vw,5rem);font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.stage button{background:rgba(255,255,255,.12);border-color:transparent;color:var(--stage-ink)}
.stage button.primary{background:#fff;color:#111;border-color:#fff}
.stage button:disabled{opacity:.4}
.qr{background:#fff;padding:10px;border-radius:10px;line-height:0}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}