:root {
    --plum-900: #24082f;
    --plum-800: #33113f;
    --plum-700: #421a52;
    --plum-600: #542169;
    --cyan: #4dd8f5;
    --coral: #f98b8b;
    --lilac: #a87bd8;
    --ink: #f4eafb;
    --muted: #b79ec9;
    --ok: #6ee7a8;
    --display: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
    --body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100%;
    background: var(--plum-900);
    color: var(--ink);
    font-family: var(--body);
    -webkit-text-size-adjust: 100%;
}

/* The poster's candlestick chart, redrawn as a quiet background texture. */
.chart-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(90deg, transparent 0 46px, rgba(77, 216, 245, .07) 46px 50px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 64px),
        radial-gradient(120% 80% at 50% 0%, var(--plum-700) 0%, var(--plum-900) 70%);
}

main {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 16px 48px;
}

h1, h2, .display { font-family: var(--display); letter-spacing: .5px; margin: 0; }

h1 {
    font-size: clamp(28px, 6vw, 44px);
    font-weight: 800;
    color: var(--cyan);
    text-shadow: 0 0 24px rgba(77, 216, 245, .35);
}

.eyebrow {
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-size: 12px;
    font-weight: 800;
    color: var(--coral);
    margin-bottom: 6px;
}

.panel {
    background: rgba(84, 33, 105, .55);
    border: 2px solid var(--coral);
    border-radius: 18px;
    padding: 20px;
    margin: 16px 0;
    backdrop-filter: blur(4px);
}

.panel.quiet { border-color: rgba(168, 123, 216, .35); }

label { display: block; font-weight: 600; font-size: 14px; margin: 14px 0 6px; color: var(--muted); }

input[type=text], input[type=number], select, textarea {
    width: 100%;
    padding: 13px 14px;
    font: inherit;
    font-size: 16px; /* under 16px triggers zoom-on-focus in iOS Safari */
    color: var(--ink);
    background: rgba(36, 8, 47, .85);
    border: 2px solid var(--lilac);
    border-radius: 12px;
}

input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
    outline: 3px solid var(--cyan);
    outline-offset: 2px;
}

button {
    font-family: var(--display);
    font-weight: 800;
    font-size: 16px;
    color: var(--plum-900);
    background: var(--cyan);
    border: 0;
    border-radius: 12px;
    padding: 13px 20px;
    cursor: pointer;
    min-height: 44px;
}

button.ghost { background: transparent; color: var(--ink); border: 2px solid var(--lilac); }
button.coral { background: var(--coral); }
button.danger { background: #ff6b6b; }
button:disabled { opacity: .4; cursor: not-allowed; }

.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.grow { flex: 1 1 200px; }
.muted { color: var(--muted); font-size: 14px; }
.pill {
    display: inline-block; padding: 4px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
}

/* ---- the buzzer ---- */
.buzzer {
    width: min(78vw, 300px);
    aspect-ratio: 1;
    border-radius: 50%;
    font-family: var(--display);
    font-size: clamp(28px, 8vw, 44px);
    background: radial-gradient(circle at 35% 30%, #ffd0d0, var(--coral) 55%, #d45f5f);
    color: var(--plum-900);
    box-shadow: 0 12px 0 #a83f3f, 0 18px 40px rgba(0, 0, 0, .5);
    transition: transform .06s ease, box-shadow .06s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    display: block;
    margin: 24px auto;
}

.buzzer:active:not(:disabled) { transform: translateY(10px); box-shadow: 0 2px 0 #a83f3f; }
.buzzer:disabled { background: #4a3a55; color: var(--muted); box-shadow: 0 8px 0 #2c2233; }
.buzzer.armed { animation: pulse 1.4s ease-in-out infinite; }

@keyframes pulse {
    0%, 100% { box-shadow: 0 12px 0 #a83f3f, 0 0 0 0 rgba(249, 139, 139, .5); }
    50% { box-shadow: 0 12px 0 #a83f3f, 0 0 0 22px rgba(249, 139, 139, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .buzzer.armed { animation: none; }
    * { transition: none !important; }
}

/* ---- lists ---- */
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); padding: 8px 6px; }
td { padding: 10px 6px; border-top: 1px solid rgba(168, 123, 216, .25); }
tr.first td { background: rgba(77, 216, 245, .12); font-weight: 700; }
.ms { font-variant-numeric: tabular-nums; font-weight: 700; }
.capped { color: var(--coral); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }

.score { display: flex; align-items: baseline; gap: 12px; margin: 10px 0; }
.score .name { font-family: var(--display); font-size: 26px; font-weight: 800; }
.score .pts { margin-left: auto; font-family: var(--display); font-size: 34px; font-weight: 800; }
.bar { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: 999px; }

.toast {
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
    background: var(--plum-600); border: 2px solid var(--cyan); color: var(--ink);
    padding: 12px 20px; border-radius: 12px; z-index: 50; font-weight: 600; max-width: 90vw;
}

/* ---- projector board ---- */
body.board main { max-width: 1500px; }
body.board .question { font-family: var(--display); font-size: clamp(30px, 4.4vw, 66px); line-height: 1.15; font-weight: 800; }
body.board .grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 28px; }
body.board table { font-size: clamp(15px, 1.5vw, 22px); }
body.board .score .pts { font-size: clamp(38px, 5vw, 68px); }

@media (max-width: 900px) { body.board .grid { grid-template-columns: 1fr; } }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}