/* ══════════════════════════════════════════════════════════════════════
   /live (join a game) · Signal layer
   Loaded after the page's own styles and backdrop.css. It remaps the page's
   tokens onto --ds-* and re-dresses the join card, PIN field and in-game
   chrome. The four answer-tile colours are deliberately left alone: they
   match the teacher's projected board, which is how students find their
   answer.
   ══════════════════════════════════════════════════════════════════════ */
html:root {
    --ink: var(--ds-ink);
    --text-2: var(--ds-ink-2);
    --muted: var(--ds-ink-3);
    --bg: var(--ds-bg);
    --card: var(--ds-surface);
    --border: var(--ds-line-2);
    --coral: var(--ds-coral);
    --font-display: var(--ds-font-display);
    --shadow: var(--ds-shadow-2);
}
[data-dark] {
    --ink: var(--ds-ink);
    --text-2: var(--ds-ink-2);
    --muted: var(--ds-ink-3);
    --bg: var(--ds-bg);
    --card: var(--ds-surface);
    --border: var(--ds-line-2);
    --shadow: var(--ds-shadow-2);
}

/* Paper or night, one violet wash, no grid. */
html, html[data-dark] { background-color: var(--ds-bg); }
body, [data-dark] body {
    background-color: var(--ds-bg);
    background-image: radial-gradient(80% 460px at 50% -140px, rgba(91, 80, 232, .12), transparent 72%);
    background-size: 100% 600px;
    background-repeat: no-repeat;
}
[data-dark] body { background-image: radial-gradient(80% 460px at 50% -140px, rgba(109, 98, 245, .22), transparent 72%); }

.brand { font-family: var(--ds-font-display); letter-spacing: -.035em; }
.live-app-link { color: var(--ds-accent-ink); }

.card {
    border: 1px solid var(--ds-line);
    border-radius: 26px;
    box-shadow: var(--ds-shadow-2);
}
[data-dark] .card { box-shadow: var(--ds-shadow-2), inset 0 1px 0 rgba(255, 255, 255, .04); }
.big { letter-spacing: -.04em; }
.qtext { letter-spacing: -.02em; }

.join-ico {
    border: 0;
    border-radius: 16px;
    background: var(--ds-accent-soft);
    color: var(--ds-accent-ink);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ds-accent) 22%, transparent);
}
[data-dark] .join-ico { background: var(--ds-accent-soft); color: var(--ds-accent-ink); }

label {
    font: 600 .8125rem/1.3 var(--ds-font-text);
    color: var(--ds-ink-2);
}
input {
    border: 1px solid var(--ds-line-2);
    border-radius: 14px;
    background: var(--ds-bg-2);
    transition: border-color .2s ease, box-shadow .3s var(--ds-ease-out), background-color .2s ease;
}
[data-dark] input { border-color: rgba(255, 255, 255, .14); background: var(--ds-bg-3); }
input:focus { border-color: var(--ds-accent); background: var(--ds-surface); }
input:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ds-accent-soft); }
/* The PIN reads like the code on the board: mono, evenly tracked. */
#pin { font-family: var(--ds-font-mono); font-weight: 600; letter-spacing: .32em; text-indent: .32em; }

.btn {
    border-radius: 14px;
    background: var(--ds-violet-600);
    font-family: var(--ds-font-text);
    font-weight: 650;
    box-shadow: 0 1px 2px rgba(14, 18, 32, .16);
    transition: background-color .25s ease, box-shadow .35s var(--ds-ease-out), transform .35s var(--ds-ease-out);
}
.btn:hover:not(:disabled) {
    background: #5046e0;
    filter: none;
    box-shadow: 0 1px 2px rgba(14, 18, 32, .16);
}
.btn:active:not(:disabled) { transform: scale(.985); box-shadow: none; }
.btn:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 3px; }

.qnum-pill {
    border: 0;
    background: var(--ds-accent-soft);
    color: var(--ds-accent-ink);
    font: 600 .75rem/1 var(--ds-font-mono);
    letter-spacing: .08em;
}
[data-dark] .qnum-pill { background: var(--ds-accent-soft); }
.timer { font-family: var(--ds-font-mono); font-size: 1.4rem; background: var(--ds-accent-soft); color: var(--ds-accent-ink); }
.tile { border-radius: 20px; font-family: var(--ds-font-display); letter-spacing: -.01em; }
.pts, .lead .lrow .sc { font-family: var(--ds-font-mono); font-variant-numeric: tabular-nums; }
.lead .lrow { border-width: 1px; border-color: var(--ds-line-2); border-radius: 16px; }
.lead .lrow.me { border-color: var(--ds-accent); background: var(--ds-accent-soft); }

.tips-card { border: 1px solid var(--ds-line); border-radius: 20px; }
.tips-head { font: 500 .6875rem/1 var(--ds-font-mono); letter-spacing: .12em; color: var(--ds-accent-ink); }
.tips-next { border-width: 1px; color: var(--ds-accent-ink); }
.tips-dots i.on { background: var(--ds-accent); }
.cj a { color: var(--ds-accent-ink); }
.mute { border: 1px solid var(--ds-line-2); box-shadow: var(--ds-shadow-1); }

@media (prefers-reduced-motion: reduce) {
    .btn, input { transition: none; }
    .btn:active:not(:disabled) { transform: none; }
}