/* ===== DimQuiz design system ===== */
:root {
    --bg: #0f1222;
    --bg-soft: #171b30;
    --card: #1d2240;
    --card-2: #232849;
    --line: #2e355e;
    --text: #eef0ff;
    --text-dim: #9aa2c9;
    --accent: #7c5cff;
    --accent-2: #4ecdc4;
    --good: #3ddc84;
    --bad: #ff5c7a;
    --gold: #ffc93c;
    --radius: 14px;
    --shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    min-height: 100vh;
}

#app { min-height: 100vh; display: flex; flex-direction: column; }

main {
    flex: 1;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.25rem;
}

h1, h2, h3 { margin: 0 0 .6rem; line-height: 1.2; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.3rem; }
a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }
p { color: var(--text-dim); line-height: 1.55; }

/* ---- top bar ---- */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem 1.25rem;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 10;
}
.brand {
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--text);
    letter-spacing: .5px;
    text-decoration: none;
}
.brand span { color: var(--accent); }
.nav-links { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

/* ---- buttons & inputs ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--text);
    padding: .65rem 1.1rem;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    min-height: 44px;
    transition: transform .06s ease, filter .15s ease;
}
.btn:hover { filter: brightness(1.15); text-decoration: none; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: transparent; }
.btn-secondary { background: var(--card-2); }
.btn-danger { background: var(--bad); border-color: transparent; }
.btn-ghost { background: transparent; border-color: var(--line); }
.btn-sm { padding: .35rem .7rem; min-height: 36px; font-size: .85rem; }
.btn-block { width: 100%; }

input[type=text], input[type=email], input[type=password], input[type=number], textarea, select {
    width: 100%;
    background: var(--bg-soft);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: .65rem .8rem;
    font-size: 1rem;
    min-height: 44px;
}
input:focus, textarea:focus, select:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: transparent;
}
label { display: block; font-size: .85rem; color: var(--text-dim); margin: .8rem 0 .3rem; font-weight: 600; }

/* ---- cards & layout helpers ---- */
.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: var(--shadow);
}
.card + .card { margin-top: 1rem; }
/* Feature cards live in a grid — the grid gap does the spacing,
   so the sibling rule above must not add 16px inside their cells
   (it made the first card taller than the rest). */
.features .card { margin-top: 0 !important; }
.row { display: flex; gap: 1rem; flex-wrap: wrap; }
.col { flex: 1 1 260px; }
.center { text-align: center; }
.muted { color: var(--text-dim); }
.small { font-size: .85rem; }
.mt { margin-top: 1rem; }
.mb { margin-bottom: 1rem; }
.stack > * + * { margin-top: .75rem; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }

.form-narrow { max-width: 420px; margin: 2.5rem auto; }
.error-msg { color: var(--bad); font-weight: 600; margin: .5rem 0; }
.success-msg { color: var(--good); font-weight: 600; margin: .5rem 0; }

/* ---- banners (in-game notifications) ---- */
.banner {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: var(--card-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: .7rem 1rem;
    margin-bottom: 1rem;
    font-weight: 600;
}
.banner-info { border-color: var(--accent-2); background: rgba(78, 205, 196, .08); }
.banner-pause { border-color: var(--gold); background: rgba(255, 201, 60, .08); }

/* ---- host dashboard (screenshare-first layout) ---- */
.host-layout {
    display: grid;
    grid-template-columns: 1fr 250px;
    gap: 1.25rem;
    align-items: start;
}
/* big-screen variant: dashboard owns the FULL viewport width; the question
   card gets all remaining space, the score rail + chat hug the right edge.
   Third column = admin lobby chat (see/send/remove). */
.host-layout-wide { grid-template-columns: minmax(0, 1fr) 280px 300px; }
.host-layout-wide .host-main { width: 100%; }

/* Tall lists must scroll INSIDE their panels, not stretch the page:
   the roster can hold 50 players and the music queue can grow big. */
.host-layout .score-rail-list {
    max-height: 46vh;
    overflow-y: auto;
    scrollbar-gutter: stable;
}
.host-layout .music-queue-list {
    max-height: 30vh;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

/* Medium screens: chat drops below the main column, full width. */
@media (max-width: 1180px) {
    .host-layout-wide { grid-template-columns: minmax(0, 1fr) 280px; }
    .host-layout-wide .host-chat { grid-column: 1 / -1; }
}

/* Release the global main column cap only while a wide dashboard is on
   screen (class toggled on <main> from HostLobby, works in all browsers). */
main.host-stage {
    max-width: none;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* bigger, projector-friendly question area on the host screen */
.host-main .question-text { font-size: clamp(1.6rem, 4.5vw, 2.6rem); margin: 1.2rem 0; }
.host-main .option-btn { font-size: 1.2rem; min-height: 72px; padding: 1.1rem 1.2rem; }
.host-layout-wide .options-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.host-question-img {
    max-width: 100%;
    max-height: 340px;
    border-radius: 12px;
    margin-bottom: 1rem;
    display: block;
}

/* between-questions auto-advance countdown bar */
.auto-advance {
    flex: 1 1 260px;
    max-width: 420px;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin-left: auto;
}
.auto-advance-bar {
    height: 10px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    overflow: hidden;
}
.auto-advance-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    /* smooth shrink between 250ms ticks */
    transition: width .25s linear;
}
.auto-advance-fill:last-child { background: var(--bad); }
/* player scoreboard: self row highlight mirrors the player-card accent */
.leaderboard li.me { border-color: var(--accent); }
/* bigger, projector-friendly question area on the host screen */
.host-main .question-text { font-size: clamp(1.6rem, 4.5vw, 2.6rem); margin: 1.2rem 0; }
.host-main .option-btn { font-size: 1.2rem; min-height: 72px; padding: 1.1rem 1.2rem; }
.host-question-img {
    max-width: 100%;
    max-height: 340px;
    border-radius: 12px;
    margin-bottom: 1rem;
    display: block;
}

/* persistent score rail — always visible until the final results screen */
.score-rail {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .9rem;
    box-shadow: var(--shadow);
}
.score-rail-head {
    font-weight: 800;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-dim);
    margin-bottom: .6rem;
}

/* Quick links (stage view / Q&A / song library) in their OWN card above the
   players rail — the lobby card, where these buttons used to live, is
   replaced by the mini stage once the game starts. */
.admin-quicklinks-rail {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin-bottom: 1rem;
}
/* ghost buttons are transparent and would melt into the card background —
   give the quick actions a filled surface so they read as buttons */
.admin-quicklinks-rail .btn-ghost {
    background: var(--card-2);
    border-color: var(--line);
}
.score-rail-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.score-rail-list li {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--card-2);
    border-radius: 8px;
    padding: .3rem .55rem;
}
.score-rail-list .mini-avatar { flex: 0 0 auto; width: 34px; height: 34px; }
.score-rail-list .nick {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .88rem;
    font-weight: 600;
}
.score-rail-list .pts { font-weight: 800; color: var(--gold); }
.score-rail-list li:first-child { border: 1px solid var(--gold); }

/* Names-only mode: no avatars — use the freed space for names.
   The host rail flows into two columns; player grids get compact cards
   whose content is vertically centered (no avatar above the name). */
.score-rail.names-only .score-rail-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .3rem .5rem;
}
.score-rail.names-only .score-rail-list .nick { font-size: .8rem; }
.player-grid.names-only { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.player-grid.names-only .player-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .5rem .4rem;
    min-height: 0;
}
.player-grid.names-only .player-card .nick { margin-top: 0; }

/* ---- modal dialog (host leave guard) ---- */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(8, 10, 24, .72);
    backdrop-filter: blur(2px);
    z-index: 1000;
    animation: fadein .15s ease;
}
.modal-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(480px, calc(100vw - 2rem));
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem 1.6rem;
    z-index: 1001;
    animation: pop .18s ease;
}
.modal-dialog h2 { margin-bottom: .6rem; }
.modal-dialog p { margin: 0 0 1.2rem; }
.modal-actions {
    display: flex;
    gap: .7rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}
@keyframes fadein { from { opacity: 0; } }

/* ---- questions & answers modal (host lobby answer key) ---- */
.modal-dialog.modal-wide {
    width: min(680px, calc(100vw - 2rem));
    max-height: min(78vh, 720px);
    display: flex;
    flex-direction: column;
    padding: 1.2rem 1.4rem;
}
.qk-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.qk-head h2 { margin: 0; }
.qk-actions { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: .8rem; }
.qk-list {
    overflow-y: auto;
    min-height: 0;              /* lets the flex column actually scroll */
    border-top: 1px solid var(--line);
    padding-top: .8rem;
    scrollbar-gutter: stable;
}
.qk-item { padding: .55rem 0; border-bottom: 1px solid var(--line); }
.qk-item:last-child { border-bottom: 0; }
.qk-q { margin-bottom: .35rem; }
.qk-options {
    list-style: none;
    margin: 0;
    padding: 0 0 0 1.4rem;
    display: grid;
    gap: .25rem;
}
.qk-options li { padding: .18rem .5rem; border-radius: 6px; }
.qk-options li.correct {
    background: rgba(61, 220, 132, .15);
    border: 1px solid var(--good);
    color: var(--good);
    font-weight: 600;
}

/* ---- song library modal (global downloads → queue) ---- */
.lib-search {
    width: 100%;
    margin-bottom: .7rem;
}
.lib-add {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: .7rem .8rem;
    margin-bottom: .8rem;
    background: var(--card-2);
}
.lib-add-label {
    display: block;
    font-size: .88rem;
    color: var(--text-dim);
    margin-bottom: .4rem;
}
.lib-add-row { display: flex; align-items: center; gap: .5rem; }
.lib-add-row .btn { flex: 0 0 auto; min-width: 108px; }
.spinner-sm {
    display: inline-block;
    vertical-align: middle;
    margin-right: .35rem;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
.lib-list {
    overflow-y: auto;
    min-height: 0;
    max-height: 52vh;
    border-top: 1px solid var(--line);
    scrollbar-gutter: stable;
}
.lib-row {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .45rem .2rem;
    border-bottom: 1px solid var(--line);
}
.lib-row:last-child { border-bottom: 0; }
.lib-meta { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: .6rem; }
.lib-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}
.lib-dur { flex: 0 0 auto; color: var(--text-dim); font-size: .82rem; }
.lib-added { color: var(--good); border-color: var(--good); }

/* ---- question image upload (quiz editor) ---- */
.qimg-file-input { display: none; }
.qimg-file-label { cursor: pointer; display: inline-flex; }
.qimg-block { margin: .2rem 0 1rem; }
.qimg-preview {
    display: flex; align-items: center; gap: .8rem; margin-bottom: .4rem;
}
.qimg-preview img {
    width: 120px; height: 80px; object-fit: cover;
    border-radius: 8px; border: 1px solid var(--line); display: block;
}
.qimg-actions { display: flex; align-items: center; gap: .8rem; }
.qimg-busy { color: var(--text-dim); font-size: .85rem; }

/* ---- speech bubbles (popup lobby view: chat pops out of the avatar) ---- */
.stage-lobby .player-card.has-bubble { position: relative; }
.speech-bubble {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: .35rem .6rem;
    font-size: .88rem;
    max-width: 230px;
    width: max-content;
    box-shadow: var(--shadow);
    z-index: 6;
    overflow-wrap: anywhere;
    animation: pop .18s ease;
    pointer-events: none;
}
.speech-bubble::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--line);
}
/* Big screen: bubbles must be readable from across the room. */
.big-view .speech-bubble {
    font-size: clamp(1.15rem, 2.4vw, 1.8rem);
    padding: .55rem .9rem;
    border-radius: 14px;
    max-width: min(420px, 34vw);
}
.big-view .speech-bubble::after {
    border-width: 9px;
}

@media (max-width: 800px) {
    .host-layout { grid-template-columns: 1fr; }
    .score-rail { order: 2; }
}

/* ---- hero (home) ---- */
.hero {
    text-align: center;
    padding: 3.5rem 1rem 2.5rem;
}
.hero h1 {
    font-size: clamp(2rem, 6vw, 3.2rem);
    /* Descenders ("g" in "nights") were clipped by the gradient text box —
       generous line-height + padding-bottom keep the full glyph visible. */
    line-height: 1.25;
    padding-bottom: .08em;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
/* White focus ring around the slogan is just the default focus outline on
   a container that's click-target-like during Blazor enhance; suppress it. */
.hero h1:focus, .hero h1:focus-visible { outline: none; }
.hero p {
    font-size: 1.1rem;
    max-width: 560px;
    margin: 1.1rem auto 1.5rem; /* breathing room below the slogan */
}
.join-box {
    display: flex;
    gap: .6rem;
    max-width: 420px;
    margin: 0 auto;
}
.join-box input {
    text-transform: uppercase;
    letter-spacing: .35em;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 700;
}

/* ---- feature grid ---- */
.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}
.feature {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    /* neutralize the global .card + .card spacing inside grid cells */
    margin-top: 0;
}
.feature h3 { margin: 0; }
.feature p { margin: 0; }
.feature .icon { font-size: 1.8rem; line-height: 1; }

/* ---- avatar grid ---- */
.avatar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: .75rem;
}
.avatar-cell {
    background: var(--card-2);
    border: 2px solid var(--line);
    border-radius: 12px;
    padding: .5rem;
    cursor: pointer;
    text-align: center;
    transition: border-color .15s ease, transform .1s ease;
}
.avatar-cell:hover:not(.taken) { border-color: var(--accent-2); transform: translateY(-2px); }
.avatar-cell.selected { border-color: var(--accent); background: #2a2460; }
.avatar-cell.taken { opacity: .35; cursor: not-allowed; }
/* Avatar3D renders into a fixed-size .avatar-wrap wrapper; canvas fills it.
   Center the wrapper in card-style contexts (rows keep it flush left). */
.avatar-cell canvas { display: block; }
.avatar-cell .avatar-wrap { margin: 0 auto; }
.avatar-cell .name { font-size: .78rem; margin-top: .3rem; color: var(--text-dim); }
.avatar-fallback {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    background: var(--card);
    border-radius: 8px;
}

/* ---- lobby ---- */
.code-display {
    font-size: clamp(2rem, 8vw, 3.4rem);
    font-weight: 800;
    letter-spacing: .25em;
    text-align: center;
    background: var(--bg-soft);
    border: 2px dashed var(--accent);
    border-radius: var(--radius);
    padding: 1rem .5rem 1rem .9rem;
    margin: 0 auto;
    user-select: all;
}
/* Player lobby view: size the box to the code itself, not the full column.
   Left padding runs a touch larger to balance the trailing letter-space. */
.code-display.fit {
    width: fit-content;
    padding: .6rem 1rem .6rem 1.4rem;
}

/* ---- lobby chat (player view): collapsible, scrollable, left-aligned ---- */
.chat-box {
    text-align: left;
    border-top: 1px solid var(--line);
    padding-top: .6rem;
    margin-top: 1rem;
}
.chat-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%;
    background: none; border: none;
    color: var(--text);
    font-size: .85rem; font-weight: 600;
    cursor: pointer; padding: .25rem 0;
    margin-bottom: .45rem;
}
.chat-toggle-chevron { color: var(--text-dim); font-size: 1.1rem; line-height: 1; }
.chat-messages {
    max-height: 220px; overflow-y: auto;
    display: flex; flex-direction: column; gap: .4rem;
    padding: .35rem .2rem .45rem;
}
.chat-row { display: flex; align-items: flex-start; gap: .45rem; }
.chat-row .avatar-small { flex: 0 0 auto; line-height: 0; }
.chat-text { min-width: 0; overflow-wrap: anywhere; font-size: .9rem; }
.chat-nick { color: var(--accent); font-weight: 600; margin-right: .4rem; }
.chat-empty { color: var(--text-dim); font-size: .85rem; font-style: italic; }
.chat-input-row { display: flex; gap: .4rem; margin-top: .4rem; }
.chat-input-row input { flex: 1 1 auto; min-width: 0; }
.chat-send { flex: 0 0 auto; padding-left: .8rem; padding-right: .8rem; }

/* ---- admin lobby chat (host dashboard third column) ---- */
.host-chat-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .9rem;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.admin-chat-messages {
    flex: 1 1 auto;
    min-height: 160px;
    /* Reasonable ceiling: the panel scrolls once the history passes it
       instead of stretching the dashboard column. */
    max-height: min(380px, 45vh);
    overflow-y: auto;
    scrollbar-gutter: stable;
}
.chat-row.host .chat-nick { color: var(--gold); }
.chat-host-badge { flex: 0 0 auto; line-height: 1; font-size: .95rem; }
.chat-remove {
    flex: 0 0 auto;
    margin-left: auto;
    background: none;
    border: 0;
    color: var(--text-dim);
    cursor: pointer;
    font-size: .85rem;
    line-height: 1;
    padding: .1rem .3rem;
    border-radius: 6px;
    opacity: 0;
    transition: opacity .12s ease;
}
.chat-row:hover .chat-remove,
.chat-remove:focus-visible { opacity: 1; }
.chat-remove:hover { color: var(--danger, #e5484d); }

/* ---- installed PWA (standalone) + small screens ----
   Player-side views are the phone-first surface: respect notches/home bars
   when running standalone, and keep touch targets comfortable on phones. */
@media (display-mode: standalone), (display-mode: fullscreen) {
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .player-music-bar { bottom: calc(.5rem + env(safe-area-inset-bottom)); }
}
@media (max-width: 640px) {
    .option-btn { min-height: 56px; font-size: 1rem; }
    .question-text { font-size: 1.25rem; }
    .player-card { min-height: 120px; }
    .btn { min-height: 44px; }
}

/* ---- host stage: popup page + compact mini view ---- */
/* Popup page: chrome-free dark canvas for the presenter view. Fills the
   viewport; the question card grows and the peer-pressure strip pins to the
   bottom edge (space is reserved for it whenever it renders). */
.stage-page { min-height: 100vh; display: flex; flex-direction: column; }
.stage-page-head {
    display: flex; align-items: center; gap: .5rem;
    padding: .5rem .25rem;
}
.stage-page-title { font-weight: 700; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage-page-spacer { flex: 1 1 auto; }
.stage-page-body { flex: 1 1 auto; display: flex; flex-direction: column; }
.stage-page-body .host-stage { flex: 1 1 auto; display: flex; flex-direction: column; }
.stage-page-body .host-stage > .card { flex: 1 1 auto; }
.stage-page-body .peer-strip { margin-top: auto; }

/* Mini stage card on the admin page: header strip + scaled-down stage. */
.stage-mini-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: .6rem;
}
.stage-controls-bar { margin-top: .6rem; display: flex; justify-content: center; }

/* Compact scaling: same markup, smaller type and grids so the stage fits
   the admin column next to the settings card. */
.stage-compact .question-text { font-size: 1.15rem; }
.stage-compact .options-grid { gap: .45rem; }
.stage-compact .option-btn { padding: .45rem .6rem; font-size: .85rem; }
.stage-compact .leaderboard { font-size: .85rem; }
.stage-compact .result-banner h1 { font-size: 1.1rem; }
.stage-compact .podium .nick { font-size: .8rem; }
.stage-compact .code-display { font-size: 1.6rem; padding: .5rem 1rem .5rem 1.3rem; }

/* Popup waiting view (lobby phase) obeys the big-view rules: projector-size
   title/code, player cards and the read-only chat scale up too. */
.big-view .stage-lobby h1 { font-size: clamp(2.2rem, 5.5vw, 4rem); }
.big-view .stage-lobby .code-display { font-size: clamp(2.5rem, 7vw, 5rem); padding: 1rem 2rem 1rem 2.6rem; }
.big-view .stage-lobby .player-card .nick { font-size: clamp(1rem, 2vw, 1.5rem); }
.big-view .stage-lobby .player-card { min-height: 150px; }
.big-view .stage-lobby .muted { font-size: clamp(1rem, 2vw, 1.5rem); }
.big-view .stage-lobby .muted.small { font-size: clamp(.95rem, 1.8vw, 1.3rem); }
/* Lobby chat readable from across the room (avatars stay 22px). */
.big-view .stage-lobby-chat .chat-text { font-size: clamp(1.15rem, 2.4vw, 1.8rem); }
.big-view .stage-lobby-chat .chat-nick { font-size: 1.05em; }
.big-view .stage-lobby-chat .chat-empty { font-size: clamp(1rem, 2vw, 1.4rem); }
.big-view .stage-lobby-chat-head {
    font-size: clamp(.95rem, 1.9vw, 1.4rem);
    letter-spacing: .1em;
    margin-bottom: .6rem;
}
.big-view .stage-lobby-chat .chat-messages { max-height: 34vh; }
.big-view .stage-lobby-chat .chat-row { gap: .7rem; }
.big-view .stage-lobby-chat .avatar-small canvas,
.big-view .stage-lobby-chat .avatar-small { width: 34px !important; height: 34px !important; }
.stage-lobby-chat {
    width: 100%; max-width: 720px;
    text-align: left;
    border-top: 1px solid var(--line);
    padding-top: .5rem;
    margin-top: .5rem;
}
.stage-lobby-chat-head {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-dim); margin-bottom: .35rem;
}
.stage-lobby-chat .chat-messages { max-height: 180px; }

/* Final results, big mode (popup): podium and the FULL score list side by
   side; podium figures enlarged for reading from across the room. */
.final-big .final-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
    max-width: 1700px;
    margin: 0 auto;
}
/* Fewer than 3 players: the side-by-side split leaves the podium stranded in
   the left half — stack and center instead. */
.final-solo .final-layout {
    grid-template-columns: 1fr;
    max-width: 900px;
}
.final-big .podium { min-height: 320px; }
.final-big .podium .nick { font-size: clamp(1.3rem, 2.6vw, 2.2rem); font-weight: 700; }
.final-big .podium .bar { font-size: clamp(1.5rem, 3vw, 2.4rem); }
.final-big .leaderboard { font-size: clamp(1rem, 1.8vw, 1.4rem); max-height: 60vh; overflow-y: auto; }
.final-big .leaderboard .mini-avatar { transform: scale(1.35); transform-origin: center; margin-right: .4rem; }
@media (max-width: 900px) {
    .final-big .final-layout { grid-template-columns: 1fr; }
}

/* Connection-lost banner: shown by HostLobby/PlayerJoin while the SignalR
   reconnect loop is working; sticky so it stays visible during scrolls. */
.conn-banner {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--danger, #b3261e);
    color: #fff;
    text-align: center;
    padding: .45rem .75rem;
    font-size: .85rem;
    font-weight: 600;
}
.player-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .9rem;
}
.player-card {
    background: var(--card-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: .8rem;
    text-align: center;
    position: relative;
    animation: pop .25s ease;
}
.player-card .avatar-wrap { margin: 0 auto; } /* center avatar inside the card */
.player-card .nick { font-weight: 700; margin-top: .4rem; word-break: break-word; }
@keyframes pop { from { transform: scale(.7); opacity: 0; } }

/* ---- game ---- */
.timer-ring-wrap { position: relative; width: 74px; height: 74px; margin: 0 auto; }
.timer-ring-wrap svg { transform: rotate(-90deg); }
.timer-ring-bg { stroke: var(--line); }
.timer-ring-fg { stroke: var(--accent-2); transition: stroke-dashoffset .25s linear; }
.timer-ring-fg.warn { stroke: var(--gold); }
.timer-ring-fg.critical { stroke: var(--bad); }
.timer-num {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.35rem;
}

.option-btn {
    display: flex;
    align-items: center;
    gap: .8rem;
    width: 100%;
    background: var(--card-2);
    border: 2px solid var(--line);
    border-radius: 12px;
    color: var(--text);
    padding: 1rem;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    min-height: 60px;
    text-align: left;
    transition: border-color .12s ease, background .12s ease, transform .06s ease;
}
.option-btn:hover:not(:disabled) { border-color: var(--accent-2); }
.option-btn:active:not(:disabled) { transform: scale(.985); }
.option-btn.selected { border-color: var(--accent); background: #2a2460; }
.option-btn.correct { border-color: var(--good); background: rgba(61, 220, 132, .15); }
.option-btn.wrong { border-color: var(--bad); opacity: .6; }
/* Reveal stages: highlight the right answer, push wrong ones back */
.option-btn.dimmed {
    opacity: .22;
    filter: saturate(.4) brightness(.65);
}
/* A wrong personal pick stays legible during the reveal: red border/tint at
   reduced opacity instead of being flattened by .dimmed */
.option-btn.wrong.dimmed {
    opacity: .55;
    filter: none;
    border-color: var(--bad);
    background: rgba(255, 92, 122, .13);
}
.option-key {
    flex: 0 0 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-soft);
    border-radius: 8px;
    font-weight: 800;
    color: var(--accent-2);
}
.options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: .8rem;
    margin-top: 1.25rem;
}
@media (max-width: 640px) {
    .options-grid { grid-template-columns: 1fr; }
}

.question-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* ---- host big view (TV / projector mode, toggle on the Question screen) ----
   One 'big-view' class scales the whole dashboard: question card takes the
   full width (roster aside hidden), text sizes jump for reading from across
   the room. clamp() keeps long questions fitted; auto-fit grid still wraps
   anywhere between 2 and 10 answer options; the card bottoms out at -60vh so
   short questions don't leave a cramped strip on a big screen. */
.big-view .host-main { width: 100%; min-height: 60vh; }
.big-view .question-header .pill { font-size: clamp(1.4rem, 3.2vw, 2.5rem); padding: .55rem 1.4rem; }
.big-view .question-text { font-size: clamp(2.4rem, 7vw, 5.2rem); margin: 1.4rem 0 1.6rem; }
.big-view .option-btn { font-size: clamp(1.5rem, 3.4vw, 2.4rem); min-height: 104px; padding: 1.2rem 1.4rem; }
.big-view .option-btn .option-key {
    flex: 0 0 auto;
    width: clamp(56px, 7vh, 84px);
    height: clamp(56px, 7vh, 84px);
    border-radius: 12px;
    font-size: clamp(1.7rem, 4vw, 2.8rem);
}
.big-view .options-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.1rem; }
/* The wrapper owns the ring size so svg + number track the same box and the
   number stays dead-center inside the ring at every scale. */
.big-view .timer-ring-wrap { width: clamp(96px, 14vh, 140px); height: clamp(96px, 14vh, 140px); }
.big-view .timer-ring-wrap svg { width: 100%; height: 100%; }
.big-view .timer-num { font-size: clamp(2rem, 4.5vh, 3rem); }
.big-view .host-question-img { max-height: 40vh; }
.big-view .answered-count { font-size: clamp(1.25rem, 2.4vw, 1.8rem); }
/* Reveal + scoreboard ride the same toggle so the results screens match the
   question screen while big view is on. */
.big-view .result-banner h1 { font-size: clamp(2.2rem, 5.5vw, 4rem); }
.big-view .result-banner { padding: 2.5rem 0; }
.big-view .options-grid .option-btn .check { font-size: clamp(2rem, 4vw, 3rem); }
.big-view .leaderboard { font-size: clamp(1.2rem, 2.6vw, 2rem); }
.big-view .leaderboard li {
    padding: 1.1rem 1.4rem;
    margin-bottom: 1rem;
    border-radius: 14px;
}
.big-view .leaderboard .rank { width: 3rem; font-size: 1.15em; }
.big-view .leaderboard .score { font-size: 1.15em; }
.big-view .badge { font-size: 1rem; padding: .3rem .85rem; }
.big-view .result-banner + p,
.big-view .options-grid + p { font-size: clamp(1.15rem, 2.4vw, 1.7rem); }
.big-view .host-main .btn { font-size: clamp(1.15rem, 2.4vw, 1.7rem); padding: .8rem 1.6rem; }
.big-view .auto-advance { max-width: 720px; min-width: 380px; }
.big-view .auto-advance-bar { height: 16px; }
.big-view .auto-advance .small { font-size: clamp(1.1rem, 2.2vw, 1.5rem); }
.big-view .winner-chip { font-size: clamp(1rem, 1.9vw, 1.5rem); padding: .4rem 1.1rem .4rem .45rem; }
.big-view .winner-chip .nick { max-width: 17rem; }
.big-view .winner-row .crown { font-size: 2.2rem; }
.big-view .winner-note { font-size: clamp(.95rem, 1.8vw, 1.4rem); }
.big-view .nobody-knew { font-size: clamp(1.3rem, 2.6vw, 2.1rem); }
/* Roster aside is hidden in big view — collapse the grid to one column. */
.host-layout-wide.big-view { grid-template-columns: minmax(0, 1fr); }
/* Small screens: big view still has to remain usable — relax the ring height
   driver so mobile hosts don't get an oversized timer. */
@media (max-width: 640px) {
    .big-view .timer-ring-wrap { width: 84px; height: 84px; }
    .big-view .timer-num { font-size: 1.6rem; }
    .big-view .host-main { min-height: 0; }
}
.question-text {
    font-size: clamp(1.2rem, 3.5vw, 1.6rem);
    font-weight: 700;
    margin: 1rem 0;
    word-wrap: break-word;
}

/* ---- results ---- */
.result-banner { text-align: center; padding: 1.5rem 0; }
.result-banner.correct { color: var(--good); }
.result-banner.wrong { color: var(--bad); }
/* Hero emphasis for the correct answer on every results surface.
   Big text + green tinted plate — the takeaway before anything else.
   align-items:center: with baseline alignment the small label sat on the
   big answer's text baseline, which read as vertically off-center. */
.correct-answer-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    flex-wrap: wrap;
    margin: .4rem 0 1rem;
    padding: .8rem 1.2rem;
    border: 1px solid rgba(61, 220, 132, .45);
    background: rgba(61, 220, 132, .08);
    border-radius: 12px;
}
.correct-answer-hero .ca-text {
    font-size: clamp(1.6rem, 4vw, 2.6rem);
    font-weight: 800;
    color: var(--good);
    line-height: 1.15;
    word-break: break-word;
}
.big-view .correct-answer-hero .ca-text { font-size: clamp(2.2rem, 5vw, 4rem); }
.stage-compact .correct-answer-hero { padding: .5rem .9rem; gap: .5rem; margin: .2rem 0 .6rem; }
.stage-compact .correct-answer-hero .ca-text { font-size: 1.3rem; }
.points-pop {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--gold);
    animation: rise .6s ease;
}
@keyframes rise { from { transform: translateY(14px); opacity: 0; } }

.badge {
    display: inline-block;
    background: var(--gold);
    color: #1a1a1a;
    font-size: .72rem;
    font-weight: 800;
    border-radius: 999px;
    padding: .18rem .55rem;
    margin-left: .4rem;
    vertical-align: middle;
}

.leaderboard { list-style: none; margin: 0; padding: 0; }
.leaderboard li {
    display: flex;
    align-items: center;
    gap: .9rem;
    background: var(--card-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: .7rem 1rem;
    margin-bottom: .6rem;
}
.leaderboard .rank { font-weight: 800; color: var(--text-dim); width: 2rem; }
.leaderboard .score { margin-left: auto; font-weight: 800; color: var(--gold); }
.leaderboard li.top1 { border-color: var(--gold); }
.leaderboard li.top2 { border-color: #c0c0c0; }
.leaderboard li.top3 { border-color: #cd7f32; }

/* ---- reveal winners strip (host + player) ---- */
/* Shown under the revealed answer: everyone who answered correctly, the
   fastest among them crowned ⚡; if nobody was right, a randomized
   "nobody knew" line instead. */
.winner-strip { margin-top: 1.1rem; text-align: center; }
/* Player final-results actions: join a new lobby straight away, or exit. */
.final-player-actions {
    margin-top: 1.4rem;
    padding-top: 1.1rem;
    border-top: 1px dashed var(--line);
    display: flex;
    flex-direction: column;
    gap: .8rem;
    align-items: center;
}
.fpa-join { width: 100%; max-width: 380px; text-align: center; }
.fpa-label {
    display: block;
    font-size: .9rem;
    color: var(--text-dim);
    margin-bottom: .45rem;
}
.fpa-row { display: flex; gap: .5rem; }
.fpa-code-input {
    flex: 1;
    text-transform: uppercase;
    letter-spacing: .35em;
    font-weight: 800;
    font-size: 1.1rem;
    text-align: center;
    min-width: 0;
}
.fpa-row .btn { flex: 0 0 auto; }
.fpa-exit { flex: 0 0 auto; }
.winner-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .55rem;
}
.winner-row .crown { font-size: 1.5rem; align-self: center; line-height: 1; }
.winner-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: rgba(61, 220, 132, .14);
    border: 1px solid var(--good);
    border-radius: 999px;
    padding: .28rem .8rem .28rem .32rem;
    font-weight: 700;
    color: var(--good);
}
.winner-chip .nick { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.winner-chip.fastest {
    border-width: 2px;
    background: rgba(255, 201, 60, .16);
    border-color: var(--gold);
    color: var(--gold);
    box-shadow: 0 0 14px rgba(255, 201, 60, .25);
}
.winner-chip.fastest .badge { margin-left: .1rem; }
.winner-chip.me { outline: 2px solid rgba(61, 220, 132, .55); outline-offset: 2px; }
.winner-chip.me.fastest { outline-color: rgba(255, 201, 60, .65); }
.winner-note { margin: .5rem 0 0; color: var(--text-dim); font-size: .92rem; }
.nobody-knew {
    margin: 0;
    color: var(--bad);
    font-weight: 700;
    font-size: clamp(1rem, 1.6vw, 1.25rem);
}

@media (max-width: 640px) {
    .winner-chip { font-size: .8rem; padding: .22rem .6rem .22rem .26rem; }
    .winner-chip .nick { max-width: 7rem; }
    .winner-row .crown { font-size: 1.15rem; }
    .winner-note { font-size: .8rem; }
}

.podium {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 1rem;
    margin: 1.5rem 0;
}
.podium .step { text-align: center; }
.podium .step canvas { display: block; margin: 0 auto; }
.podium .bar {
    width: clamp(64px, 18vw, 96px);
    border-radius: 10px 10px 0 0;
    display: flex; align-items: flex-start; justify-content: center;
    font-size: 1.6rem; font-weight: 800; padding-top: .4rem;
    color: #1a1a1a;
}
.podium .p1 .bar { height: 110px; background: var(--gold); }
.podium .p2 .bar { height: 84px; background: #c0c0c0; }
.podium .p3 .bar { height: 66px; background: #cd7f32; }
.podium .avatar-wrap { margin: 0 auto; }

/* ---- lists (quizzes) ---- */
.quiz-list { list-style: none; padding: 0; margin: 0; }
.quiz-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1rem 1.2rem;
    margin-bottom: .75rem;
    flex-wrap: wrap;
}
.quiz-item .title { font-weight: 700; font-size: 1.05rem; }
.quiz-item .meta { color: var(--text-dim); font-size: .85rem; margin-top: .15rem; }
.quiz-item .actions { display: flex; gap: .4rem; flex-wrap: wrap; }

.pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.2;
    border-radius: 999px;
    padding: .15rem .6rem;
    border: 1px solid var(--line);
    color: var(--text-dim);
}
/* Emoji glyphs sit on their own (taller) line box — pin them so the
   icon and the label align on the same visual center. */
.pill .pill-icon { font-size: .95em; line-height: 1; transform: translateY(.05em); }
.pill.public { background: rgba(78, 205, 196, .15); color: var(--accent-2); border-color: transparent; }

/* ---- toggle switch ---- */
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem 0; }
.switch-row .desc { color: var(--text-dim); font-size: .85rem; margin-top: .2rem; }
.switch { position: relative; width: 52px; height: 28px; flex: 0 0 52px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute; cursor: pointer; inset: 0;
    background: var(--line);
    border-radius: 999px;
    transition: .2s;
}
.slider:before {
    content: "";
    position: absolute; height: 20px; width: 20px;
    left: 4px; top: 4px;
    background: white;
    border-radius: 50%;
    transition: .2s;
}
input:checked + .slider { background: var(--accent); }
input:checked + .slider:before { transform: translateX(24px); }

/* ---- question editor ---- */
.question-card { border-left: 4px solid var(--accent); }
.option-row { display: flex; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.option-row input[type=radio] { width: 20px; height: 20px; accent-color: var(--good); flex: 0 0 auto; }
.option-row input[type=text] { flex: 1; min-width: 0; }

/* ---- empty state ---- */
.empty {
    text-align: center;
    color: var(--text-dim);
    padding: 3rem 1rem;
}
.empty .big { font-size: 2.6rem; margin-bottom: .6rem; }

/* ---- loading ---- */
.loading-pane { text-align: center; padding: 3rem; color: var(--text-dim); }
.spinner {
    width: 42px; height: 42px;
    border: 4px solid var(--line);
    border-top-color: var(--accent);
    border-radius: 50%;
    margin: 0 auto 1rem;
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- blazor error ui ---- */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: #1a1a1a;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

@media (max-width: 640px) {
    main { padding: 1rem; }
    .topbar { padding: .7rem 1rem; }
    .form-narrow { margin: 1.25rem auto; }
    .hero { padding: 2rem .5rem 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}
/* ---- per-game host settings (lobby card + public-quiz options drawer) ---- */
.host-settings { margin-top: 1.25rem; text-align: left; }
.host-settings h2 { font-size: 1.05rem; }
.host-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.host-settings label { display: block; font-size: .88rem; color: var(--text-dim); margin-bottom: .35rem; }
.host-settings input[type=text],
.host-settings input[type=url] {
    width: 100%;
    background: var(--card-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    padding: .5rem .65rem;
}
.host-settings input[type=range] { accent-color: var(--accent); }
.slider-bounds {
    display: flex; justify-content: space-between;
    font-size: .72rem; color: var(--text-dim);
    margin-top: .15rem;
}
.music-section { border-top: 1px solid var(--line); padding-top: .8rem; }
.music-section .row { display: flex; gap: .5rem; align-items: center; }
.music-embed { margin-top: .6rem; }

/* Persistent synced-music bars (host + player). The YT player lives in the
   plain div; the bar wraps it with status/controls and stays on screen. */
.music-embed iframe { max-width: 100%; }
.player-music-bar {
    position: sticky;
    bottom: .5rem;
    margin-top: .8rem;
    padding: .6rem .8rem;
    z-index: 30;
}
.player-music-bar .player-music-meta {
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem;
}
/* Bigger embed (16:9-ish) so the volume slider is actually usable. */
#dq-player-music audio { width: 100%; max-width: 480px; height: 40px; border: 0; border-radius: 8px; display: block; }
/* Host music bar — sits below the score rail in the host-side column.
   Matches the score rail width and card styling. */
.host-music-bar {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .7rem .8rem;
    box-shadow: var(--shadow);
    margin-top: 1rem;
}
.host-music-bar .music-embed { display: none; }
.host-music-bar .music-box-header {
    display: flex; align-items: center; gap: .5rem;
    cursor: default; user-select: none;
    font-size: .85rem;
    flex-wrap: wrap;
    background: none; border: none; border-radius: 0;
    padding: 0; box-shadow: none;
}
.host-music-bar .music-box-title {
    display: flex; align-items: center; gap: .4rem;
    font-size: .85rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1 1 auto; min-width: 0; margin-bottom: .5rem;
}
.host-music-bar .music-time {
    font-size: .8rem; color: var(--text-dim);
    flex: 0 0 auto; min-width: 2.5rem; text-align: center;
    font-variant-numeric: tabular-nums;
}
.host-music-bar .music-seek-bar { accent-color: var(--accent); cursor: pointer; flex: 1 1 auto; min-width: 60px; }
.host-music-bar .music-vol { display: flex; align-items: center; gap: .3rem; cursor: default; font-size: .85rem; flex: 0 0 auto; }
.host-music-bar .music-vol input[type=range] { accent-color: var(--accent); width: 60px; cursor: pointer; }
.host-music-bar .music-vol-icon { width: 1.1em; text-align: center; }
.host-music-bar .btn { flex: 0 0 auto; }

/* Music queue (host): collapsible "Up next" panel under the music bar. */
.music-queue-toggle {
    flex: 0 0 auto;
    margin-bottom: .5rem;
    background: none;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--text-dim);
    font-size: .75rem;
    padding: .15rem .6rem;
    cursor: pointer;
}
.music-queue-toggle:hover { color: var(--text); border-color: var(--text-dim); }
.music-queue { margin-top: .4rem; border-top: 1px dashed var(--line); padding-top: .5rem; }
.music-queue-head {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-dim);
    margin-bottom: .35rem;
}
.music-queue-empty { font-size: .8rem; color: var(--text-dim); padding: .25rem 0 .35rem; }
.music-queue-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.music-queue-row {
    display: flex; align-items: center; gap: .5rem;
    background: var(--bg, transparent);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: .3rem .5rem;
    font-size: .82rem;
    cursor: grab;
}
.music-queue-row.drag-over { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.music-queue-row .drag-handle { color: var(--text-dim); cursor: grab; flex: 0 0 auto; }
.music-queue-row .q-title {
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    cursor: pointer;
}
.music-queue-row .q-title:hover { color: var(--accent); }
.music-queue-row .q-remove {
    flex: 0 0 auto;
    background: none; border: none; color: var(--text-dim);
    cursor: pointer; font-size: .85rem; padding: 0 .15rem;
}
.music-queue-row .q-remove:hover { color: var(--danger, #e5484d); }

/* Host music box rows: title / seek / transport / up-next strip. */
.host-music-bar .music-seek-row,
.host-music-bar .music-controls-row {
    display: flex; align-items: center; gap: .5rem;
    margin-top: .45rem;
}
.host-music-bar .music-seek-bar { flex: 1 1 auto; min-width: 60px; }
.host-music-bar .music-controls-row .btn { flex: 0 0 auto; }
.host-music-bar .music-controls-row .music-vol { flex: 0 0 auto; }
.host-music-bar .music-controls-row .btn:first-of-type { margin-left: auto; }
.music-upnext {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: .15rem .5rem;
    margin-top: .55rem; padding-top: .5rem;
    border-top: 1px dashed var(--line);
    font-size: .8rem;
    cursor: pointer; user-select: none;
}
.music-upnext-label {
    flex: 0 0 auto;
    text-transform: uppercase; letter-spacing: .06em;
    font-size: .72rem; color: var(--text-dim);
}
.music-upnext-title {
    flex: 1 1 100%; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.music-upnext-count { flex: 0 0 auto; color: var(--text-dim); font-size: .72rem; }
.music-upnext-empty { flex: 1 1 100%; color: var(--text-dim); font-style: italic; }
.music-upnext .music-queue-toggle {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: .72rem;
    padding: .12rem .55rem;
    line-height: 1.4;
}
/* The Up-next strip itself is no longer clickable — only the button toggles. */
.music-upnext { cursor: default; }
.music-upnext .music-queue-toggle { cursor: pointer; }
/* Idle (consented, nothing playing) player box: muted look. */
.player-music-idle .music-box-title { color: var(--text-dim); }

/* Collapsible header shared by host + player music boxes. Clicking the
   header collapses the body. The YT iframe under display:none keeps
   playing in Chromium/WebKit browsers (verified), so audio continues
   while the video is hidden — audio-first footprint. */
.music-box-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: .6rem;
    cursor: pointer;
    user-select: none;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: .45rem .7rem;
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
    font-size: .9rem;
    flex-wrap: wrap;
}
/* Ready flash: when a song has loaded, the header background gently
   brightens to a slightly lighter tone and fades back over ~3 seconds. */
.music-box-header.music-ready {
    animation: music-ready-flash 3s ease-in-out;
}
@keyframes music-ready-flash {
    0%, 100% { background-color: var(--card); }
    50%      { background-color: var(--card-2); }
}
.player-music-bar .music-box-header { background: var(--card-2); }
.music-box-header .music-box-title {
    display: flex; align-items: center; gap: .4rem;
    font-size: .9rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1 1 auto; min-width: 0;
}
.music-box-header .chevron { flex: 0 0 auto; color: var(--text-dim); font-size: .75rem; }
.music-box-header .music-box-header-controls { display: flex; gap: .35rem; flex: 0 0 auto; align-items: center; flex-wrap: wrap; }
.music-box-body { margin-top: .6rem; }
.music-box-body.collapsed { display: none; }

/* Host seek bar — now inline in the header controls */
.host-music-bar .music-seek-bar { accent-color: var(--accent); cursor: pointer; width: 120px; }
.host-music-bar .music-time {
    font-size: .8rem; color: var(--text-dim);
    flex: 0 0 auto; min-width: 2.5rem; text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Per-device volume slider in the collapsible header. */
.music-vol {
    display: flex; align-items: center; gap: .3rem;
    cursor: default;                      /* slider itself is interactive */
    font-size: .85rem;
}
.music-vol input[type=range] { accent-color: var(--accent); width: 72px; cursor: pointer; }
.music-vol-icon {
    width: 1.1em; text-align: center;
    background: none; border: 0; padding: 0;
    color: inherit; font-size: inherit; line-height: 1;
    cursor: pointer;
}
.music-vol-icon:hover { filter: brightness(1.3); }

/* "Add music" plus badge: white disc + accent glyph so it reads clearly
   against the primary button background. */
.plus-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.25em; height: 1.25em;
    margin-right: .3rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    color: var(--accent);
    font-weight: 900; font-size: 1em; line-height: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

/* ---- "now playing" wave (music box headers, host + player) ----
   Five little bars dancing while the track plays; frozen at low
   height when paused/muted. Shown as soon as a song is loaded. */
.eq-wave {
    display: inline-flex; align-items: flex-end; gap: 2px;
    height: 14px; flex: 0 0 auto; margin-right: .15rem;
}
.eq-wave span {
    width: 3px; height: 30%; border-radius: 2px;
    background: var(--accent-2);
    animation: eq-bounce 1s ease-in-out infinite;
}
.eq-wave span:nth-child(1) { animation-delay: 0s; }
.eq-wave span:nth-child(2) { animation-delay: .18s; }
.eq-wave span:nth-child(3) { animation-delay: .36s; }
.eq-wave span:nth-child(4) { animation-delay: .12s; }
.eq-wave span:nth-child(5) { animation-delay: .3s; }
.eq-wave.paused span { animation-play-state: paused; height: 30%; }
/* Buffering: track should be playing but the sidecar is still preparing it —
   bars breathe softly instead of dancing, signalling "working, not stuck". */
.eq-wave.buffering span {
    animation: eq-breathe 1.6s ease-in-out infinite;
    opacity: .55;
}
@keyframes eq-breathe {
    0%, 100% { height: 30%; opacity: .35; }
    50% { height: 70%; opacity: .8; }
}

/* Song-title marquee (host + player music boxes). The clip is a size
   container; the scroll distance is min(0, textWidth - containerWidth), so
   SHORT titles never move and long ones glide back and forth, pausing at
   each edge via the keyframe holds. */
.music-title-clip {
    overflow: hidden;
    container-type: inline-size;
    flex: 1 1 auto;
    min-width: 0;
}
.music-title-scroll {
    display: inline-block;
    white-space: nowrap;
    animation: dq-marquee 16s ease-in-out infinite alternate;
}
@keyframes dq-marquee {
    0%, 12% { transform: translateX(0); }
    88%, 100% { transform: translateX(min(0px, calc(-100% + 100cqw))); }
}
@keyframes eq-bounce {
    0%, 100% { height: 30%; }
    50% { height: 100%; }
}

/* radio (music audience) */
.radio-row { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-top: .35rem; }
.radio { display: flex; align-items: center; gap: .4rem; font-size: .88rem; color: var(--text-dim); cursor: pointer; }
.radio input { accent-color: var(--accent); }

/* public quiz list options drawer */
.quiz-item.quiz-options-row { display: block; }
.host-options { text-align: left; display: grid; gap: .75rem; }
.host-options .desc { color: var(--text-dim); font-size: .85rem; margin-top: .2rem; }
.host-options .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.host-options input[type=text],
.host-options input[type=url] {
    width: 100%;
    background: var(--card-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    padding: .5rem .65rem;
}
.host-options input[type=range] { accent-color: var(--accent); width: 100%; }
.host-options label { display: block; font-size: .88rem; color: var(--text-dim); margin-bottom: .3rem; }

/* ---- peer pressure rail dot ---- */
.score-rail-list .peer-dot {
    flex: 0 0 10px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--line);
    transition: background .2s;
}
.score-rail-list .peer-dot.on { background: var(--good); box-shadow: 0 0 6px var(--good); }
/* Answered marker: an inset left glow instead of border-left — border-left
   overwrites the left side of the row's rounded border (and the leader's
   gold full border), which read as a half-green outline. A shadow never
   touches the border geometry. */
.score-rail-list li.answered { box-shadow: inset 3px 0 0 0 var(--good); }

/* ---- peer pressure hero strip (bottom of the host screen during questions) ---- */
.peer-strip {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    justify-content: center;
    padding: .75rem;
    background: #0F1222;
    border-radius: var(--radius);
}
.peer-hero {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .85rem .3rem .4rem;
    border-radius: 999px;
    max-width: 190px;
    transition: color .25s, text-shadow .25s;
}
.peer-hero-avatar {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.peer-hero-nick {
    font-weight: 700;
    font-size: .95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* No avatar (names-only / compact): center the badge text. */
.peer-hero:not(:has(.peer-hero-avatar)) .peer-hero-nick {
    flex: 1 1 auto;
    text-align: center;
    padding-right: .45rem;
}
/* Answer states — no box, just colored text + soft glow on the dark strip. */
.peer-hero.pending .peer-hero-nick {
    color: #ffd54a;
    text-shadow: 0 0 10px rgba(255, 213, 74, .45);
}
.peer-hero.correct .peer-hero-nick {
    color: #3ddc84;
    text-shadow: 0 0 10px rgba(61, 220, 132, .45);
}
.peer-hero.wrong .peer-hero-nick {
    color: #ff5a5a;
    text-shadow: 0 0 10px rgba(255, 90, 90, .4);
}
.big-view .peer-strip { gap: .9rem; padding: 1rem; }
.big-view .peer-hero { max-width: 240px; padding: .4rem 1.1rem .4rem .5rem; }
.big-view .peer-hero-avatar { width: 56px; height: 56px; }
.big-view .peer-hero-nick { font-size: clamp(1.05rem, 2.2vw, 1.5rem); }

/* ---- player lobby music opt-in ---- */
.music-box {
    margin-top: 1rem;
    border: 1px dashed var(--line);
    border-radius: 12px;
    padding: .8rem;
    text-align: center;
}
.music-box.playing { border-style: solid; }