/* ==========================================================================
   AuxControl — unified theme
   Platform-neutral neon-orange accent (the app hosts Spotify, Apple Music,
   and jukebox games alike, so it wears neither brand's color). Palette
   consumed by the shared /css/app.css (from auxcontrol-common), which is
   linked immediately after this file on every page.
   ========================================================================== */

:root {
    --bg: #0f0f14;
    --surface: #17171f;      /* cards */
    --surface-alt: #23232e;  /* rows, inputs, thumbnails */
    --border: #34343f;

    --accent: #ff5f1f;
    --accent-hover: #ff7d47;

    --btn-text: #fff;                          /* text on accent-colored fills */
    --accent-soft: rgba(255, 95, 31, 0.12);     /* ghost-button hover wash */
    --selected-bg: #47230f;                    /* voted-track row */
    --winner-gradient: linear-gradient(135deg, rgba(255, 95, 31, 0.22), rgba(255, 125, 71, 0.06));
    --winner-glow: 0 0 24px rgba(255, 95, 31, 0.25);
}

/* ---- Host authorize + provider chooser -------------------------------------- */

.auth-blurb { color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; }

.provider-btn  { width: 100%; }
.provider-note {
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.4;
    margin: 0.35rem 0 0.75rem;
}

/* Small status pill inside a provider button ("recommended", "invite-only") */
.provider-tag {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    vertical-align: middle;
}
.provider-tag.on-solid {
    background: rgba(255, 255, 255, 0.22);
    color: var(--btn-text);
}

/* Deliberately quieter than the account buttons: jukebox mode is the fallback. */
.provider-lesser {
    display: block;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    text-decoration: underline;
    margin-top: 0.25rem;
}
.provider-lesser:hover { color: var(--accent); }

/* ---- Jukebox player ---------------------------------------------------------- */

#preview-audio { width: 100%; margin-top: 0.5rem; }
#preview-audio[hidden] { display: none; }

.preview-note {
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.4;
    margin: 0.35rem 0 0;
}

.deep-links {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}
.deep-link { flex: 1; text-align: center; white-space: nowrap; }

/* ---- Legal pages + home footer ------------------------------------------------ */

body.legal main {
    max-width: 640px;
    margin: 2rem auto;
    padding: 0 1.25rem;
    line-height: 1.6;
}
body.legal h1 { margin-bottom: 0.25rem; }
body.legal h2 { margin-top: 1.5rem; }
body.legal .effective { color: var(--text-muted); font-size: 0.85rem; }
body.legal a { color: var(--accent); }
body.legal ul { padding-left: 1.25rem; }
body.legal li { margin-bottom: 0.6rem; }
.legal-footer { margin-top: 2rem; }

.site-footer {
    margin-top: 2rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.site-footer a { color: var(--text-muted); text-decoration: underline; }
.site-footer .credit { margin-top: 0.4rem; font-size: 0.7rem; opacity: 0.6; }
.site-footer .credit a { text-decoration: none; }
.site-footer .credit a:hover { text-decoration: underline; }

.locale-switcher {
    margin-top: 1rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: center;
}
.locale-switcher .locale-link { color: var(--text-muted); text-decoration: underline; }
.locale-switcher .locale-link.active { color: var(--accent); font-weight: 600; text-decoration: none; }

/* ---- Party Pass (host player pages) ------------------------------------------ */

.party-pass {
    display: block;
    margin-top: 0.75rem;
    padding: 0.5rem 0.9rem;
    border-radius: 10px;
    font-size: 0.85rem;
    text-align: center;
}
.party-pass.upgrade {
    color: var(--accent);
    border: 1px dashed var(--accent);
    text-decoration: none;
}
.party-pass.upgrade:hover { background: var(--accent-soft); }
.party-pass.active {
    color: var(--text-muted);
    background: var(--winner-gradient);
}

/* ---- Add-to-home-screen tip (host player pages) ------------------------------- */

.install-tip {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.install-tip summary { cursor: pointer; font-weight: 600; color: var(--text); }
.install-tip summary::marker { color: var(--accent); }
.install-tip-os { margin-top: 0.6rem; }
.install-tip-os h3 { margin: 0 0 0.3rem; font-size: 0.8rem; color: var(--text); }
.install-tip-os ol { margin: 0; padding-left: 1.2rem; }
.install-tip-os li { margin-bottom: 0.2rem; }

/* ---- Scoreboard (guest queue page) ------------------------------------------ */

.scoreboard {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    margin-top: 1.25rem;
}
.scoreboard h2 { margin: 0 0 0.5rem; }
.scoreboard-rules { color: var(--text-muted); font-size: 0.75rem; margin: -0.25rem 0 0.6rem; }
/* Sits first in .your-vote-section, above whichever state (voted/not-voted)
   follows — not nested under a heading like .scoreboard-rules above, so no
   negative top margin to snug it against one. */
.vote-throttled {
    background: var(--accent-soft); color: var(--accent); font-weight: 600;
    font-size: 0.82rem; padding: 0.45rem 0.7rem; border-radius: 8px;
    margin: 0 0 0.75rem;
}

.score-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
}
.score-row.leader {
    background: var(--winner-gradient);
}
/* Zebra striping (shared with the host roster) so rows stay easy to tell
   apart at a glance; skipped on the leader row, which has its own gradient. */
.score-row:not(.leader):nth-child(even) { background: var(--surface-alt); }
.score-value {
    font-weight: 700;
    color: var(--accent);
    min-width: 2ch;
    text-align: right;
}
/* Shared between the host's own roster (roster.jspf) and the guest-facing
   scoreboard (queue.jsp) — the host can queue a song and score like anyone
   else, so this marks which row is theirs wherever scores show up. */
.roster-host-badge {
    color: var(--accent); font-size: 0.62rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
}
/* Unlocked (Party Pass) games can have up to 100 players — collapse the
   guest-facing scoreboard to the top 10 by default so it doesn't dwarf the
   rest of the page, with a quiet text toggle to see everyone. */
.score-row-extra { display: none; }
.scoreboard.expanded .score-row-extra { display: flex; }
.scoreboard-toggle {
    display: block;
    width: 100%;
    background: none;
    border: none;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.78rem;
    padding: 0.5rem 0 0;
    margin-top: 0.2rem;
    cursor: pointer;
}
.scoreboard-toggle:hover { color: var(--accent); }

/* ---- How it works (marketing page) -------------------------------------- */

body.how-it-works { padding: 2.5rem 1.25rem 4rem; }

.hiw-header { text-align: center; max-width: 640px; margin: 0 auto 3rem; }
.hiw-header .home-logo { width: min(60%, 220px); margin-bottom: 1rem; }
.hiw-header h1 { color: var(--accent); font-size: clamp(1.6rem, 1.2rem + 2vw, 2.2rem); margin-bottom: 0.6rem; }
.hiw-header .subtitle { color: var(--text-muted); margin-bottom: 0; }

.hiw-steps { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 3.5rem; }
.hiw-step { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; text-align: center; }
.hiw-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 0.9rem;
    margin-bottom: 0.6rem;
}
.hiw-text { max-width: 420px; }
.hiw-text h2 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.hiw-text p { color: var(--text-muted); line-height: 1.55; font-size: 0.95rem; }
.hiw-shot {
    border-radius: var(--radius-lg); border: 1px solid var(--border);
    max-width: 100%; height: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.hiw-shot-mobile { width: 260px; }
.hiw-shot-desktop { width: 100%; max-width: 720px; }

.hiw-cta { text-align: center; margin: 4rem auto 0; }

@media (min-width: 860px) {
    .hiw-step { flex-direction: row; text-align: left; gap: 3rem; }
    .hiw-step.reverse { flex-direction: row-reverse; }
    .hiw-text { flex: 1; }
    .hiw-shot-mobile { flex-shrink: 0; }
    .hiw-step-wide { flex-direction: column; text-align: center; gap: 1.5rem; }
    .hiw-step-wide .hiw-text { max-width: 560px; }
}