/* ===================== Zeitklang theme ===================== */
:root {
    /* Option B palette: cyan/blue primary + warm gold accent (follows the new logo). */
    --bg: #f4f6fb;
    --surface: #ffffff;
    --surface-soft: #eef2fb;
    --surface-warm: #fff4df;
    --surface-panel: rgba(255,255,255,.92);
    --surface-panel-soft: rgba(255,255,255,.72);
    --field-bg: #ffffff;
    --status-bg: rgba(255,255,255,.86);
    --text: #1b2230;
    --muted: #5d6b86;
    --primary: #1f6fe0;
    --primary-dark: #16459e;
    --accent: #f0b44d;
    --accent-dark: #d99521;
    --accent-text: #2a1c05;
    --accent-coral: #e37055;
    --ink: #0b1030;
    --border: #d6ddec;
    --good: #2f8c61;
    --bad: #c94b45;
    --warning-text: #8a4b08;
    --warning-bg: #fff4df;
    --warning-border: #f0d59c;
    --danger-soft-bg: #fff7f4;
    --danger-soft-border: #f0b1a3;
    --focus-ring: rgba(31,111,224,.2);
    --selection-ring: rgba(31,111,224,.16);
    --primary-action-bg: #1f6fe0;
    --primary-action-hover: #16459e;
    --primary-action-text: #ffffff;
    --secondary-hover: #dde8fb;
    --now-card-bg: #16459e;
    --shadow: 0 14px 30px rgba(11, 16, 48, .12);
    --button-shadow: 0 4px 0 rgba(11, 16, 48, .32);
    --radius: 8px;
    --page-bg: linear-gradient(180deg, #f8faff 0%, #eef2fb 62%, #f7f1e5 100%);
    --font-ui: 'Roboto', system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display: 'Fredoka', 'Roboto', system-ui, sans-serif;
}

/* Dark theme — navy chrome; the brand cards/timeline are blue with a warm gold accent (Option B). */
:root[data-theme="dark"] {
    --bg: #0c1226;
    --surface: #161d3a;
    --surface-soft: #1a2348;
    --surface-warm: #2a2417;
    --surface-panel: rgba(20,27,56,.96);
    --surface-panel-soft: rgba(16,22,48,.84);
    --field-bg: #0d1430;
    --status-bg: rgba(20,27,56,.92);
    --text: #e8eefc;
    --muted: #9fb0d6;
    --primary: #29b6f6;
    --primary-dark: #8ad8ff;
    --accent: #f0b44d;
    --accent-dark: #d99521;
    --accent-text: #2a1c05;
    --ink: #060a1f;
    --border: #2c3766;
    --good: #4cc38a;
    --bad: #e06b63;
    --warning-text: #ffd88d;
    --warning-bg: #332717;
    --warning-border: #7a5d28;
    --danger-soft-bg: #351d1a;
    --danger-soft-border: #78433d;
    --focus-ring: rgba(41,182,246,.3);
    --selection-ring: rgba(41,182,246,.24);
    --primary-action-bg: #29b6f6;
    --primary-action-hover: #5cc8ff;
    --primary-action-text: #06121f;
    --secondary-hover: #1f2d52;
    --now-card-bg: #141a3e;
    --shadow: 0 14px 30px rgba(0, 0, 0, .45);
    --button-shadow: 0 4px 0 rgba(0, 0, 0, .5);
    --page-bg: linear-gradient(180deg, #0c1226 0%, #0a0f24 70%, #15110a 100%);
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

/* Keep the native mobile pull-to-refresh gesture available for audio recovery. */
html { min-height: 100%; overscroll-behavior-y: auto; }

body {
    margin: 0;
    min-height: 100%;
    overscroll-behavior-y: auto;
    font-family: var(--font-ui);
    color: var(--text);
    background: var(--page-bg);
    background-attachment: fixed;
    line-height: 1.5;
    letter-spacing: 0;
}

a { color: var(--primary); font-weight: 700; text-decoration: none; }
a:hover { color: var(--primary-dark); text-decoration: underline; }

h1, h2, h3, p { overflow-wrap: anywhere; }
h1 {
    margin: .4rem 0 1rem;
    color: var(--primary-dark);
    font-family: var(--font-ui);
    font-size: 1.55rem;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0;
}
h1[tabindex="-1"]:focus { outline: none; }
h2 { margin: 1.65rem 0 .65rem; color: var(--primary-dark); font-size: 1.18rem; line-height: 1.2; }
h3 { margin: 1rem 0 .45rem; color: var(--primary-dark); font-size: 1rem; }
.lead { margin: 0 0 1.25rem; color: var(--muted); font-size: 1.05rem; }
.status { color: var(--muted); font-size: .92rem; }
.eyebrow {
    margin: 0 0 .2rem;
    color: var(--primary);
    font-family: var(--font-display);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

/* ===================== Layout ===================== */
.app-bar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    min-height: 58px;
    padding: .65rem 1rem;
    color: #fff;
    background: #141a3e;
    border-bottom: 3px solid var(--accent);
    box-shadow: 0 10px 22px rgba(18, 63, 60, .18);
}

.app-bar .brand {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    color: #fff;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
    text-decoration: none;
}

.app-bar .brand img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    image-rendering: pixelated;
}
/* Signed-in user + sign-out, pushed to the right of the bar. */
.app-bar-user {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}
.app-bar-name { display: inline-flex; align-items: center; gap: .4rem; color: #fff; font-weight: 700; font-size: .9rem; }
.app-bar-name:hover { color: #fff; text-decoration: underline; }
.app-bar-name-text { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-bar-avatar { width: 24px; height: 24px; border-radius: 6px; border: 1px solid rgba(255,255,255,.55); flex: 0 0 auto; }
.app-bar-signout {
    min-height: 0;
    padding: .34rem .72rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    color: var(--accent-text);
    background: var(--accent);
    box-shadow: none;
}
.app-bar-signout:hover { background: var(--accent-dark); }
/* In-game replacement for Sign-out (#1196): a Leave button in the same slot, danger-toned. */
.app-bar-leave {
    display: inline-flex;
    align-items: center;
    gap: .34rem;
    min-height: 0;
    padding: .34rem .72rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    color: #fff;
    background: var(--bad);
    box-shadow: none;
}
.app-bar-leave:hover:not(:disabled) { background: var(--bad); filter: brightness(1.08); color: #fff; }
.app-bar-leave > .zk-icon { width: 1rem; height: 1rem; }

.app-main {
    width: min(100%, 1040px);
    margin: 0 auto;
    padding: 1.25rem 1rem 4rem;
}

/* ===================== Core controls ===================== */
button {
    min-height: 44px;
    margin: .15rem .25rem .15rem 0;
    padding: .55rem 1rem;
    color: var(--accent-text);
    background: var(--accent);
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    box-shadow: var(--button-shadow);
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    line-height: 1.15;
    transition: background .12s ease, color .12s ease, transform .06s ease, box-shadow .06s ease, filter .12s ease;
}
button:hover:not(:disabled) { background: var(--accent-dark); text-decoration: none; }
button:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0 rgba(11,16,48,.3); }
button:disabled { opacity: .48; cursor: not-allowed; box-shadow: none; }

input:not([type]),
input[type=text],
input[type=number],
input[type=search],
select {
    min-height: 44px;
    padding: .55rem .7rem;
    color: var(--text);
    background: var(--field-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font: inherit;
}
input:focus,
select:focus,
button:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}
input[type=checkbox] {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--primary);
    flex: 0 0 auto;
}

table {
    width: 100%;
    margin: .65rem 0 1.1rem;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    border-collapse: separate;
    border-spacing: 0;
    box-shadow: var(--shadow);
}
th, td {
    padding: .68rem .75rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
    font-size: .94rem;
}
th { color: var(--primary-dark); background: var(--surface-soft); font-weight: 800; }
tr:last-child td { border-bottom: none; }
ul { padding-left: 1.25rem; }
li { margin: .35rem 0; }

/* ===================== Home launcher ===================== */
.home-screen {
    width: min(100%, 920px);
    margin: 0 auto;
}
/* Home top is just the (transparent) logo - no panel, text or decor - with a gap to the menu.
   Scoped under .home-screen so it beats the later, lower-specificity .logo-button base rule. */
.home-screen .home-logo-button {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: .9rem auto 1.3rem;
    padding: 0;
}
.home-logo {
    display: block;
    width: min(208px, 54vw);
    height: auto;
    image-rendering: pixelated;
    /* drop-shadow follows the logo's transparent shape (no white box behind it). */
    filter: drop-shadow(0 10px 20px rgba(0,0,0,.4));
}

.tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    width: min(100%, 860px);
    margin: 0 auto;
}
.tile {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .75rem;
    min-height: 104px;
    overflow: hidden;
    padding: .82rem;
    color: var(--text);
    background:
        linear-gradient(135deg, var(--surface-panel), var(--surface-soft));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-decoration: none;
    transition: transform .1s ease, border-color .14s ease, box-shadow .14s ease, filter .14s ease;
}
.tile::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--primary);
}
.tile:hover {
    color: var(--text);
    border-color: var(--primary);
    box-shadow: 0 18px 34px rgba(31,111,224,.16);
    text-decoration: none;
    transform: translateY(-2px);
}
.tile-emoji {
    display: grid;
    flex: none;
    width: 42px;
    height: 42px;
    place-items: center;
    color: var(--primary-dark);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: .86rem;
    font-weight: 800;
    line-height: 1;
}
.tile-body {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .22rem;
}
.tile-t {
    color: var(--primary-dark);
    font-size: 1.22rem;
    font-weight: 900;
    line-height: 1.05;
}
.tile-d {
    color: var(--muted);
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.25;
}
.tile-meta {
    align-self: start;
    padding: .16rem .44rem;
    color: var(--accent-text);
    background: var(--accent);
    border: 1px solid rgba(0,0,0,.18);
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 900;
    text-transform: uppercase;
}
.util-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .55rem;
    width: min(100%, 740px);
    margin: 1rem auto 0;
}
.util-links a {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    padding: .38rem .75rem;
    color: var(--text);
    background: var(--status-bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: .86rem;
    font-weight: 800;
    text-decoration: none;
}
.util-links a:hover { border-color: var(--primary); color: var(--primary-dark); }

/* ===================== Inline icon set (#799) ===================== */
.zk-icon {
    flex: 0 0 auto;
    vertical-align: -0.14em;
}
.big-btn > .zk-icon,
.huge-btn > .zk-icon,
.fs-home > .zk-icon,
.util-links a > .zk-icon,
.eyebrow > .zk-icon,
.stat-tile span > .zk-icon,
.opt-row span > .zk-icon,
.win-target span > .zk-icon,
.mini > .zk-icon,
.danger > .zk-icon {
    margin-right: .4em;
}
.eyebrow > .zk-icon { vertical-align: -0.12em; opacity: .9; }
.tile-emoji > .zk-icon {
    width: 24px;
    height: 24px;
}

/* Coin-cost chip on action buttons (Replay / New part cost 1 coin). */
.btn-cost {
    display: inline-flex;
    align-items: center;
    gap: .1em;
    margin-left: .25em;
    font-size: .82em;
    font-weight: 900;
    opacity: .82;
}
.btn-cost > .zk-icon { margin-right: 0; vertical-align: -0.12em; }
button:disabled .btn-cost { opacity: .55; }

/* Tie outcome: the co-winners' names under the "It's a tie!" banner. */
.tie-names { margin: .2rem 0 0; color: var(--muted); font-weight: 800; font-size: 1.02rem; }

/* End-of-game results board (#812): every player's final timeline, cards and coins. */
.end-screen {
    justify-content: flex-start;
    overflow-y: auto;
    gap: .7rem;
    padding: .3rem 0 1.2rem;
}
.end-results {
    width: min(100%, 720px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}
.end-results .win-banner { text-align: center; font-size: clamp(1.7rem, 7vw, 3.4rem); line-height: 1.15; }
.end-results .tie-names { text-align: center; }
.end-standings { display: flex; flex-direction: column; gap: .6rem; }
.end-player {
    padding: .5rem .6rem .6rem;
    background: var(--surface-panel-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.end-player.is-winner { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(240,180,77,.22); }
.end-player-head { display: flex; align-items: center; gap: .45rem; margin-bottom: .4rem; }
.end-player-head .avatar-sm { width: 28px; height: 28px; }
.end-player-head > .zk-icon { color: var(--accent); flex: 0 0 auto; }
.end-name { font-weight: 900; font-size: 1.05rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.end-cards { margin-left: auto; }
.end-cards, .end-coins { display: inline-flex; align-items: center; gap: .22em; flex: 0 0 auto; font-weight: 800; color: var(--muted); }
.end-coins { margin-left: .55rem; }
.counter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    min-width: 2rem;
    padding: .12rem .38rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 900;
    line-height: 1.2;
    white-space: nowrap;
}
.counter-badge .zk-icon { flex: 0 0 auto; font-size: .92em; }
.card-count { color: var(--primary-dark); background: var(--selection-ring); border-color: rgba(41,182,246,.32); }
.coin-count { color: var(--warning-text); background: var(--warning-bg); border-color: var(--warning-border); }
.end-player .timeline-shell { position: static; width: 100%; margin: 0; }
.end-player .board-head { display: none; }

/* ===================== Impressum ===================== */
.impressum-page {
    width: min(100%, 620px);
    margin: 0 auto;
    padding: .25rem 1rem 2rem;
    text-align: center;
}
.impressum-back { text-align: left; margin: 0 0 .25rem; }
.impressum-info { margin: .35rem 0 0; }
.impressum-info p { margin: .2rem 0; font-size: .98rem; }
.impressum-label { display: inline-block; margin-right: .45rem; font-weight: 800; color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.impressum-img {
    display: block;
    width: min(340px, 78%);
    height: auto;
    margin: 1rem auto 0;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* Coin-spend line under the stage (#UI-C): replay / a fresh part are too frequent and too small to
   deserve a beat — and a beat would cover the very card that was paid for. */
.spend-note {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin: .1rem 0 0;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 700;
    animation: pop-fade .2s ease-out;
}
.spend-note > .zk-icon { color: var(--warning-text); flex: 0 0 auto; }

/* ===================== Name-that-song claim (#862) ===================== */
.guess-panel {
    width: min(94vw, 430px);
    margin: .55rem auto 0;
    padding: .6rem;
    background: var(--surface-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.guess-panel .phase-note { margin: 0 0 .45rem; }
.guess-fields { display: grid; grid-template-columns: 1fr 1fr auto; gap: .4rem; align-items: center; }
.guess-fields input { min-width: 0; }
@media (max-width: 480px) { .guess-fields { grid-template-columns: 1fr; } }
.guess-claim { margin: 0 0 .55rem; text-align: center; font-size: .95rem; }
.guess-claim strong { color: var(--accent-dark); }
.guess-locked { text-align: center; margin-top: .55rem; }
.guess-skip { width: 100%; margin-top: .4rem; }

/* ===================== Stage slot (#UI-A) =====================
   The content area shows exactly one view at a time. The reserved height is what keeps the
   timeline from jumping under the finger when the view swaps mid-turn (card -> countdown). */
.stage-slot { justify-content: flex-start; }

/* In play the screen is a fixed column (#UI-C): the scoreboard and the timeline hold their place,
   and the content area takes what is left. If a view needs more than that it scrolls inside itself
   rather than pushing the board off the bottom of the screen. The gate and lobby are untouched —
   those are ordinary pages and scroll as such. */
.game-screen.is-playing {
    height: calc(100dvh - 106px);
    min-height: 0;
    overflow: hidden;
}
.game-screen.is-playing .stage-slot {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.stage-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    width: 100%;
    min-height: 248px;
    animation: stage-view-in .22s ease-out;
}
@keyframes stage-view-in {
    from { opacity: 0; transform: translateY(8px) scale(.985); }
    to { opacity: 1; transform: none; }
}
@media (max-height: 760px) {
    .stage-view { min-height: 202px; }
}
@media (prefers-reduced-motion: reduce) {
    .stage-view { animation: none; }
}

/* ===================== Decision stage (#UI-B) =====================
   Once the clip is over there is nothing left to listen to, so the countdown takes the card's
   place instead of hiding beneath it. The ring is a conic-gradient driven by --decision-pct
   (a unitless integer, so a German browser culture cannot mangle a decimal separator). */
.decision-stage { justify-content: center; }
.decision-kicker {
    margin: 0;
    color: var(--accent);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.decision-ring {
    --decision-pct: 100;
    /* One knob for the whole dial: the clock and its unit scale off it, so the countdown box stays
       the size of the listening card and the timeline never shifts under the finger (#UI-B). */
    --ring: min(168px, 46vw);
    position: relative;
    display: grid;
    place-items: center;
    width: var(--ring);
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(from 180deg,
        rgba(255, 255, 255, .08) 0deg,
        rgba(255, 255, 255, .08) calc((100 - var(--decision-pct)) * 3.6deg),
        var(--accent) calc((100 - var(--decision-pct)) * 3.6deg),
        var(--accent) 360deg);
    box-shadow: 0 14px 30px rgba(6, 10, 31, .38);
    transition: background .25s linear;
}
.decision-ring::before {
    content: "";
    position: absolute;
    inset: 11px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 12%, rgba(41, 182, 246, .26), transparent 58%),
        linear-gradient(180deg, #182966, #090e2c);
    box-shadow: inset 0 2px 14px rgba(0, 0, 0, .55);
}
.decision-ring-core {
    position: relative;
    display: grid;
    place-items: center;
    gap: .1rem;
    line-height: 1;
}
.decision-ring-clock {
    color: #fffdf5;
    font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: calc(var(--ring) * .46);
    font-variant-numeric: tabular-nums lining-nums;
    font-weight: 900;
    text-shadow: 0 0 16px rgba(41, 182, 246, .5);
}
.decision-ring-unit {
    color: var(--accent);
    font-size: max(.62rem, calc(var(--ring) * .072));
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.decision-stage.urgent .decision-ring {
    background: conic-gradient(from 180deg,
        rgba(255, 255, 255, .08) 0deg,
        rgba(255, 255, 255, .08) calc((100 - var(--decision-pct)) * 3.6deg),
        var(--bad) calc((100 - var(--decision-pct)) * 3.6deg),
        var(--bad) 360deg);
    animation: decision-ring-pulse 1s ease-in-out infinite;
}
.decision-stage.urgent .decision-ring::before {
    background:
        radial-gradient(circle at 50% 12%, rgba(201, 75, 69, .34), transparent 60%),
        linear-gradient(180deg, #5d211f, #250d19);
}
.decision-stage.urgent .decision-ring-clock { color: #fff0ec; text-shadow: 0 0 18px rgba(255, 118, 103, .72); }
.decision-stage.urgent .decision-ring-unit,
.decision-stage.urgent .decision-kicker { color: #ffb9ae; }
@keyframes decision-ring-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.035); }
}
@media (max-height: 760px) {
    .decision-ring { --ring: min(152px, 40vw); }
}
@media (prefers-reduced-motion: reduce) {
    .decision-stage.urgent .decision-ring { animation: none; }
    .decision-ring { transition: none; }
}

/* ===================== Decision countdown =====================
   Global, not scoped: index.html deliberately does not load the Zeitklang.styles.css
   bundle, so a DecisionCountdown.razor.css would silently never apply. */
.decision-countdown {
    display: grid;
    place-items: center;
    gap: .2rem;
    width: fit-content;
    min-width: 9rem;
    margin: .35rem auto;
    padding: .45rem .85rem .55rem;
    color: #fff8da;
    background:
        radial-gradient(circle at 50% 0, rgba(41, 182, 246, .24), transparent 55%),
        linear-gradient(180deg, #182966, #090e2c);
    border: 2px solid rgba(240, 180, 77, .72);
    border-radius: var(--radius);
    box-shadow: inset 0 1px 8px rgba(0, 0, 0, .5), 0 4px 0 rgba(6, 10, 31, .32);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.decision-label {
    color: var(--accent);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .12em;
    line-height: 1;
    text-transform: uppercase;
}
.decision-clock {
    min-width: 5.4ch;
    color: #fffdf5;
    font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: clamp(2rem, 8vw, 3.2rem);
    font-variant-numeric: tabular-nums lining-nums;
    font-weight: 900;
    letter-spacing: .06em;
    line-height: 1;
    text-align: center;
    text-shadow: 0 0 10px rgba(41, 182, 246, .48);
}
.decision-countdown.urgent {
    background:
        radial-gradient(circle at 50% 0, rgba(201, 75, 69, .34), transparent 60%),
        linear-gradient(180deg, #5d211f, #250d19);
    border-color: var(--bad);
    box-shadow: inset 0 1px 8px rgba(0, 0, 0, .55), 0 0 0 3px rgba(201, 75, 69, .18), 0 0 18px rgba(201, 75, 69, .35);
}
.urgent .decision-label,
.urgent .decision-clock { color: #fff0ec; }
.urgent .decision-clock {
    animation: decision-countdown-pulse 1s ease-in-out infinite;
    text-shadow: 0 0 12px rgba(255, 118, 103, .72);
}
@keyframes decision-countdown-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.045); }
}
@media (prefers-reduced-motion: reduce) {
    .decision-countdown,
    .urgent .decision-clock { animation: none; transition: none; }
}

/* ===================== Swap coin sinks (#863) ===================== */
/* Same grid as the in-flight action strip (#UI-E): these used to be flex-wrapped, so every button
   was as wide as its label and the block read as ragged next to the tidy one after the draw. */
.swap-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .45rem;
    width: min(100%, 420px);
    margin-top: .55rem;
}
.swap-strip button { width: 100%; margin: 0; }
.swap-step { margin: .25rem 0 .2rem; font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.swap-targets, .swap-cards, .correction-targets { display: flex; flex-wrap: wrap; gap: .35rem; max-height: 150px; overflow-y: auto; }
.swap-chip, .correction-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .6rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--text);
    background: var(--surface-soft);
    border: 2px solid var(--border);
    border-radius: 999px;
    box-shadow: none;
}
.swap-chip:hover:not(:disabled), .correction-chip:hover:not(:disabled) { background: var(--secondary-hover); }
.swap-chip:disabled { opacity: .45; cursor: not-allowed; }
.swap-chip.sel, .correction-chip.sel { border-color: var(--primary); background: var(--selection-ring); }
.swap-chip strong { color: var(--accent-dark); }
.swap-chip-meta { font-size: .72rem; color: var(--muted); }
/* Host tools (#UI-D): a round icon button floating over the stage — it is a rare, out-of-band
   control and must not spend a row of the screen on saying so. The button positions itself; there
   is deliberately no wrapper element, so nothing about it can end up back in the layout flow.
   The rule is doubled up (.host-tools-trigger.host-tools-trigger) purely to raise its specificity
   above the generic button modifiers that appear later in this file (.mini and friends) and were
   silently turning it back into a padded pill. */
.host-tools-trigger.host-tools-trigger {
    position: fixed;
    top: 64px;
    left: max(.4rem, env(safe-area-inset-left));
    z-index: 32;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    min-width: 0;
    min-height: 0;
    padding: 0;
    color: var(--accent-text);
    background: var(--accent);
    border: 2px solid var(--ink);
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
    opacity: .78;
    transition: opacity .15s ease, transform .15s ease;
}
.host-tools-trigger > .zk-icon { width: 1.15rem; height: 1.15rem; }
.host-tools-trigger.host-tools-trigger:hover:not(:disabled),
.host-tools-trigger.host-tools-trigger.on { opacity: 1; transform: none; background: var(--accent); color: var(--accent-text); }
.host-tools-pop { width: min(100%, 430px); }
.host-tools-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.host-tools-actions .host-correction-action { grid-column: 1 / -1; }
.coin-correction-pop { width: min(100%, 430px); }
/* Coin correction (#C): one row per player with give / take steppers. */
.correction-targets { display: flex; flex-direction: column; gap: .4rem; margin: .15rem 0 .6rem; }
.correction-chip { width: 100%; padding: .4rem .6rem; }
.correction-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.correction-steppers { display: inline-flex; gap: .35rem; flex: 0 0 auto; }
.coin-step {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 2px solid var(--border);
    background: var(--surface-soft);
    color: var(--text);
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}
.coin-step.up { border-color: var(--good); color: var(--good); }
.coin-step.down { border-color: var(--bad); color: var(--bad); }
.coin-step:hover:not(:disabled) { background: var(--secondary-hover); }
.coin-step:disabled { opacity: .4; cursor: not-allowed; }

/* Leaderboard name cell with the account avatar (#875). */
.rank-name { display: inline-flex; align-items: center; gap: .45rem; min-width: 0; }
.rank-name .avatar-sm { width: 26px; height: 26px; flex: 0 0 auto; }
/* "Top winner" overview tile: avatar inline with the large name. */
.stat-winner { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; }
.stat-winner .avatar-sm { width: 30px; height: 30px; flex: 0 0 auto; }
.stat-winner { overflow: hidden; text-overflow: ellipsis; }

/* ===================== Stats-Light: device-local Classic stats (#864) ===================== */
.local-stats { margin-bottom: .8rem; }
.local-stats > .status { margin: .5rem 0 0; font-size: .78rem; }
.local-stats-tools { display: inline-flex; align-items: center; gap: .5rem; }

/* ===================== PWA update toast (#809) ===================== */
.update-toast {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    z-index: 200;
    display: flex;
    align-items: center;
    gap: .6rem;
    width: min(94vw, 430px);
    padding: .55rem .6rem .55rem .85rem;
    color: #fff8da;
    background: linear-gradient(180deg, #1f6fe0, #19357a);
    border: 1px solid rgba(255,248,218,.25);
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(0,0,0,.45);
    animation: steal-pop .4s cubic-bezier(.2,.9,.25,1.3);
}
.update-toast-body { display: flex; align-items: center; gap: .55rem; flex: 1 1 auto; min-width: 0; }
.update-toast-body > .zk-icon { font-size: 1.35rem; flex: 0 0 auto; }
.update-toast-body strong { display: block; font-size: .92rem; line-height: 1.2; }
.update-toast-body span { display: block; color: rgba(255,248,218,.82); font-size: .76rem; line-height: 1.2; }
.update-toast-actions { display: flex; align-items: center; gap: .35rem; flex: 0 0 auto; }
.update-toast-actions .big-btn { min-height: 38px; padding: .4rem .7rem; white-space: nowrap; }
.update-dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    color: #fff8da;
    background: rgba(0,0,0,.26);
    border: 0;
    border-radius: 9px;
    cursor: pointer;
}
.update-dismiss:hover { background: rgba(0,0,0,.42); }

/* ===================== Full-screen game UI ===================== */
.fs-nav {
    width: min(100%, 1080px);
    margin: 0 auto .4rem;
    display: flex;
    justify-content: flex-start;
}
.fs-home {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: .32rem .7rem;
    color: #fff;
    background: #19357a; /* fixed dark teal so the white glyph reads in both themes */
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 999px;
    box-shadow: var(--shadow);
    font-size: .86rem;
    font-weight: 900;
    text-decoration: none;
}
.fs-home:hover { color: #fff; background: var(--primary); text-decoration: none; }
.fs-root {
    min-height: calc(100dvh - 58px); /* fill below the 58px sticky app bar without overflowing */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .65rem .85rem .75rem;
}
.game-screen {
    width: min(100%, 1080px);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.screen-status {
    align-self: center;
    min-height: 28px;
    margin: .05rem 0 .45rem;
    padding: .22rem .62rem;
    color: var(--muted);
    background: var(--status-bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 700;
}
.screen-status.ok { color: var(--good); border-color: rgba(47,140,97,.35); background: var(--surface-soft); }
.screen-status.bad { color: var(--bad); border-color: rgba(201,75,69,.35); background: var(--danger-soft-bg); }
.game-center {
    flex: 1;
    display: flex;
    min-height: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .25rem 0;
    text-align: center;
    perspective: 800px;
}

.btn-row,
.input-action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .65rem;
}
.btn-row { justify-content: center; }
.input-action-row { margin-top: .85rem; }
.input-action-row input { flex: 1 1 13rem; min-width: 0; }
.input-action-row button { flex: 0 0 auto; }

.big-btn {
    min-height: 46px;
    padding: .62rem 1rem;
    border-radius: var(--radius);
    font-size: .96rem;
}
.huge-btn {
    min-width: 190px;
    min-height: 58px;
    padding: .72rem 1.05rem;
    color: var(--accent-text);
    background: var(--accent);
    border: 3px solid var(--ink);
    border-radius: var(--radius);
    box-shadow: 0 5px 0 rgba(11,16,48,.34);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.25;
}
.huge-btn:hover:not(:disabled) { filter: brightness(1.04); transform: none; }
.huge-btn:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 0 0 rgba(11,16,48,.34); }
.primary-action { background: var(--primary-action-bg); color: var(--primary-action-text); }
.primary-action:hover:not(:disabled) { background: var(--primary-action-hover); color: var(--primary-action-text); }
.secondary-action { background: var(--surface-soft); color: var(--primary-dark); }
.secondary-action:hover:not(:disabled) { background: var(--secondary-hover); }
.button-link {
    display: inline-flex;
    min-height: 56px;
    align-items: center;
    justify-content: center;
    margin: .15rem .25rem .15rem 0;
    padding: .85rem 1.25rem;
    color: var(--accent-text);
    background: var(--accent);
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    box-shadow: var(--button-shadow);
    font-weight: 900;
    line-height: 1.15;
    text-decoration: none;
}
.button-link:hover { color: var(--primary-action-text); background: var(--primary-action-hover); text-decoration: none; }
.button-link.primary-action { color: var(--primary-action-text); }
.mini {
    min-height: 34px;
    padding: .32rem .62rem;
    border-radius: 7px;
    font-size: .82rem;
    box-shadow: 0 2px 0 rgba(11,16,48,.28);
}
.mini.danger { background: var(--bad); color: #fff; }

/* ===================== Setup flow ===================== */
.setup-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin: .1rem 0 1rem;
    padding: 0 0 .85rem;
    border-bottom: 1px solid var(--border);
}
.setup-hero h1 { margin-bottom: 0; }
.setup-audio {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .45rem;
}
.status-pill {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: .32rem .72rem;
    color: var(--muted);
    background: var(--field-bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 800;
}
.status-pill.ok { color: var(--good); border-color: rgba(47,140,97,.35); background: var(--surface-soft); }
.status-pill.bad { color: var(--bad); border-color: rgba(201,75,69,.35); background: var(--danger-soft-bg); }

.setup-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, .85fr);
    gap: 1rem;
    align-items: start;
}
.setup-section {
    padding: 1rem;
    background: var(--surface-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.setup-players,
.setup-playlists { grid-column: 1; }
.setup-deck {
    grid-column: 2;
    grid-row: 1 / span 2;
}
.setup-start {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.setup-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
}
.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .75rem;
}
.section-count {
    color: var(--primary-dark);
    font-weight: 900;
    white-space: nowrap;
}
.alert-soft {
    margin: .45rem 0;
    padding: .48rem .6rem;
    color: var(--warning-text);
    background: var(--warning-bg);
    border: 1px solid var(--warning-border);
    border-radius: var(--radius);
    font-size: .9rem;
    font-weight: 700;
}
.toggle-row {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-top: .8rem;
    font-weight: 800;
}
.win-target {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
    color: var(--primary-dark);
    font-size: 1.12rem;
    font-weight: 900;
}
.win-target input { width: 5rem; text-align: center; }

.setup-block {
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
    padding: 1rem;
    background: var(--surface-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-align: left;
}
.play-hero { margin-top: .35rem; }
.freeplay-setup,
.together-setup {
    width: min(100%, 640px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.setup-shell.single-panel {
    grid-template-columns: minmax(0, 520px);
    justify-content: center;
}
.setup-shell.single-panel .draw-panel { grid-column: 1; }
.freeplay-setup .setup-playlists,
.profile-panel,
.lobby-players { grid-column: 1; }
.draw-panel,
.room-panel,
.lobby-options {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .85rem;
    text-align: center;
}
.profile-panel input { width: 100%; }
.join-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .6rem;
    width: 100%;
}
.join-row input {
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    font-weight: 900;
}

/* Two-step start gate: profile setup, then join / create */
.together-gate {
    width: min(100%, 480px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.together-gate .setup-section {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}
.together-gate .profile-panel input { width: 100%; }
.gate-btn { width: 100%; }
.join-code-input {
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 1.2rem;
    font-weight: 900;
}
.gate-or {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: -.15rem 0;
    color: var(--muted);
    font-weight: 800;
    font-size: .82rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.gate-or::before,
.gate-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}
.profile-chip {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-height: 0;
    padding: .35rem .85rem .35rem .35rem;
    background: var(--surface-panel);
    border: 1px solid var(--border);
    border-radius: 999px;
    box-shadow: none;
    text-decoration: none;
    color: inherit;
}
.host-gate-note {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    text-align: center;
}
.profile-chip:hover:not(:disabled) { border-color: var(--primary); transform: none; }
.profile-chip .avatar-md { width: 42px; height: 42px; }
.profile-chip-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
}
.profile-chip-name { font-weight: 900; color: var(--primary-dark); }
.profile-chip-edit { font-size: .76rem; font-weight: 700; color: var(--muted); }
.playlist-pick {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    margin: .4rem 0;
}
.playlist-pick label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .55rem;
    min-height: 36px;
    padding: .35rem .45rem;
    border-radius: var(--radius);
}
.playlist-pick label:hover { background: var(--surface-soft); }
.playlist-pick span { min-width: 0; overflow-wrap: anywhere; }

.hist {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    width: 100%;
    margin: .5rem 0;
}
.hist-row {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 34px;
    align-items: center;
    gap: .45rem;
    font-size: .86rem;
}
.hist-lbl { color: var(--muted); font-weight: 800; }
.hist-bar {
    display: block;
    height: 12px;
    min-width: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    border-radius: 999px;
}
.hist-n { color: var(--muted); text-align: right; font-weight: 800; }

/* ===================== Play state ===================== */
.stage-center { justify-content: flex-start; }
.compact-stage { flex: 0 0 auto; }
.phase-stage {
    width: min(100%, 620px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    text-align: center;
}
/* The stage views carry no panel of their own (#UI-B). Each one already has a strong object in it —
   the mystery card, the countdown ring, an announcement card — and wrapping that in a second framed
   surface was an artefact of moving these views out of their modals one-to-one. */
.draw-stage,
.listening-stage,
.waiting-stage,
.decision-stage,
.winner-stage,
.reveal-stage {
    padding: .35rem .5rem;
    background: transparent;
    border: 0;
    border-radius: var(--radius);
    box-shadow: none;
}
.draw-stage,
.listening-stage {
    display: grid;
    grid-template-columns: auto minmax(180px, 1fr);
    align-items: center;
    justify-items: center;
    gap: .65rem .9rem;
    width: min(100%, 720px);
}
.draw-stage > .flip-card,
.listening-stage > .flip-card {
    grid-row: 1 / span 3;
}
.draw-stage .action-strip,
.listening-stage .action-strip {
    width: 100%;
}
.result-stage {
    width: min(100%, 720px);
}
.reveal-stage { background: transparent; border: 0; box-shadow: none; }
.mystery-card {
    position: relative;
    isolation: isolate;
    width: min(250px, 66vw);
    min-height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    overflow: hidden;
    padding: .9rem;
    color: #fff9df;
    background:
        linear-gradient(135deg, rgba(255,255,255,.12), transparent 34%),
        repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 10px, transparent 10px 20px),
        linear-gradient(160deg, #141a3e 0%, #1f6fe0 52%, #d99521 100%);
    border: 2px solid var(--ink);
    border-radius: 10px;
    box-shadow: 0 8px 0 rgba(11,16,48,.34), 0 18px 34px rgba(11,16,48,.18);
    transform-style: preserve-3d;
}
.mystery-card.is-playing { animation: card-breathe 2.2s ease-in-out infinite; }
.mystery-card.is-idle { animation: pop .22s ease-out; }
.compact-card {
    width: min(190px, 56vw);
    min-height: 178px;
    box-shadow: 0 5px 0 rgba(11,16,48,.3), 0 12px 24px rgba(11,16,48,.14);
}
.card-glow {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 0 42%, rgba(255,255,255,.14) 43% 50%, transparent 51% 100%);
    opacity: .45;
}
.card-kicker {
    font-family: var(--font-display);
    font-size: .86rem;
    font-weight: 700;
    text-transform: uppercase;
}
.card-question {
    display: grid;
    width: 86px;
    height: 86px;
    place-items: center;
    color: #19357a; /* fixed: always on the cream circle */
    background: #fff9df;
    border: 3px solid rgba(11,16,48,.7);
    border-radius: 50%;
    box-shadow: inset 0 -5px 0 rgba(11,16,48,.16);
    font-size: 3.1rem;
    font-weight: 900;
    line-height: 1;
}
.compact-card .card-question {
    width: 62px;
    height: 62px;
    font-size: 2.15rem;
}
.card-title {
    max-width: 12rem;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1.18;
}
.card-progress {
    /* #851: a clearly visible outlined track so the clip's remaining time reads at 0% AND 100%. */
    width: min(170px, 54vw);
    height: 14px;
    margin-top: .5rem;
    background: rgba(6, 10, 31, .5);
    border: 1px solid rgba(255, 255, 255, .55);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.card-progress .clip-fill {
    /* Solid gold on the dark track = high contrast the whole way across (vs. the old low-contrast
       blue-to-gold gradient that blended into the card art). */
    background: var(--accent);
    box-shadow: 0 0 8px rgba(240, 180, 77, .5);
}
.action-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    gap: .45rem;
    width: min(100%, 420px);
}
.action-strip button {
    width: 100%;
    margin: 0;
}
/* A lone action (the host's "Skip to reveal", the steal "Pass") must span the grid and centre in it
   — left in column one it reads as accidentally left-aligned (#UI-B2). */
.action-strip > :only-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: auto;
    min-width: min(100%, 220px);
}

/* ===================== Flip card (one card per round) ===================== */
.flip-card {
    position: relative;
    width: min(272px, 72vw);
    min-height: 268px;
    perspective: 1300px;
}
.flip-card.compact { width: min(224px, 66vw); min-height: 214px; }
.flip-card.is-tappable { cursor: pointer; }
.flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: inherit;
    transition: transform .55s cubic-bezier(.2, .7, .2, 1);
    transform-style: preserve-3d;
}
.flip-card.is-revealed .flip-inner { transform: rotateY(180deg); }
.flip-face {
    position: absolute;
    inset: 0;
    padding: .75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .42rem;
    overflow: hidden;
    padding: .9rem;
    border: 2px solid var(--ink);
    border-radius: 10px;
    box-shadow: 0 8px 0 rgba(11,16,48,.34), 0 18px 34px rgba(11,16,48,.18);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.flip-front {
    color: #fff9df;
    background:
        linear-gradient(135deg, rgba(255,255,255,.12), transparent 34%),
        repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 10px, transparent 10px 20px),
        linear-gradient(160deg, #141a3e 0%, #1f6fe0 52%, #d99521 100%);
}
.flip-card.is-tappable .flip-front { transition: transform .08s ease, filter .12s ease; }
.flip-card.is-tappable:hover .flip-front { filter: brightness(1.05); }
.flip-card.is-tappable:active .flip-front { transform: translateY(4px); }
.flip-card.is-playing .flip-front { animation: pulse 1.8s ease-in-out infinite; }
/* #811: minimal now-playing card - no kicker/hint inside, just a calm pulsing mystery mark + progress. */
.flip-card.is-minimal .flip-front { justify-content: center; gap: .7rem; }
.flip-card.is-minimal .card-question { transform: scale(.86); opacity: .9; }
.flip-back {
    transform: rotateY(180deg);
    color: var(--text);
    background: var(--surface);
}
.flip-back .rc-cover {
    width: min(130px, 58%);
    height: auto;
    margin-bottom: .25rem;
    border-radius: var(--radius);
    box-shadow: 0 8px 22px rgba(11,16,48,.18);
}
.rc-year {
    color: var(--primary-dark);
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 8vw, 2.6rem);
    font-weight: 800;
    line-height: 1;
}
.rc-artist { margin-top: .15rem; font-weight: 900; line-height: 1.18; }
.rc-title { color: var(--muted); font-weight: 600; line-height: 1.18; }

/* ===================== Collapsible playlist picker ===================== */
.playlist-picker {
    width: 100%;
    margin: .2rem 0;
    padding: .15rem .65rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.playlist-picker > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    min-height: 42px;
    cursor: pointer;
    font-weight: 800;
    list-style: none;
}
.playlist-picker > summary::-webkit-details-marker { display: none; }
.playlist-picker > summary::after { content: "▾"; color: var(--muted); }
.playlist-picker[open] > summary::after { content: "▴"; }
.playlist-picker .pp-title { color: var(--primary-dark); }
.phase-note {
    margin: 0;
    color: var(--muted);
    font-weight: 800;
}
.game-hud {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    align-items: center;
    gap: .5rem .75rem;
    margin: .05rem 0 .45rem;
}
.game-hud .turn-bar { justify-content: flex-start; margin: 0; }
.compact-scoreboard {
    justify-content: flex-end;
    margin: 0;
}
.turn-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin: .2rem 0 .45rem;
}
.turn-bar .name {
    color: var(--primary-dark);
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
}
.turn-bar .score { color: var(--muted); font-size: 1.02rem; font-weight: 800; }
.game-hud .avatar-md { width: 42px; height: 42px; }

.now-card {
    padding: 1.05rem 1.6rem;
    color: #fff6da;
    background: var(--now-card-bg);
    border: 3px solid var(--ink);
    border-radius: var(--radius);
    box-shadow: 0 5px 0 rgba(11,16,48,.38);
    font-size: 2rem;
    animation: pulse 1.5s ease-in-out infinite;
}
.win-banner {
    color: var(--primary-dark);
    font-size: clamp(2rem, 8vw, 4.8rem);
    font-weight: 900;
    line-height: 1.35;
    animation: pop .3s ease-out;
}
.clip-bar {
    width: min(180px, 72vw);
    height: 10px;
    overflow: hidden;
    background: #d6e0db;
    border-radius: 999px;
}
.clip-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width .15s linear; }

.timeline {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: .4rem;
    width: 100%;
    margin-top: .5rem;
    padding: .55rem;
    overflow-x: auto;
    background: linear-gradient(180deg, #243a8a, #141a3c);
    border: 3px solid var(--ink);
    border-radius: var(--radius);
    box-shadow: inset 0 2px 12px rgba(0,0,0,.28);
    -webkit-overflow-scrolling: touch;
}
.timeline.is-placing {
    box-shadow: inset 0 2px 12px rgba(0,0,0,.28), 0 0 0 4px rgba(240,180,77,.18);
}
.slot-btn {
    flex: 0 0 auto;
    min-width: 42px;
    min-height: 62px;
    padding: 0;
    color: #fff4cf;
    background: rgba(255,255,255,.12);
    border: 2px dashed rgba(255,244,207,.88);
    border-radius: var(--radius);
    box-shadow: none;
    font-size: 1.05rem;
}
.slot-btn:hover:not(:disabled) { background: rgba(255,255,255,.22); transform: none; }
/* Active-steal reveal (#1200): where the active player placed the in-flight card. */
.slot-btn.marked {
    border-style: solid;
    border-color: var(--accent);
    background: rgba(240,180,77,.24);
    box-shadow: 0 0 0 2px rgba(240,180,77,.4);
}
.slot-marker {
    flex: 0 0 auto;
    align-self: center;
    min-width: 24px;
    text-align: center;
    font-size: 1.1rem;
    line-height: 1;
}
.tl-card {
    flex: 0 0 auto;
    min-width: 116px;
    max-width: 180px;
    padding: .45rem .5rem;
    text-align: center;
    background: #fffdfa;
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    box-shadow: 0 4px 0 rgba(10, 27, 24, .32);
}
.tl-card .yr {
    color: #19357a; /* fixed: timeline cards stay cream in both themes */
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.2;
}
.tl-card .mt {
    margin-top: .25rem;
    color: #5b6b66;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.2;
}

.result {
    width: min(100%, 560px);
    margin: .9rem auto;
    padding: .9rem 1rem;
    text-align: center;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.result.good { border-color: var(--good); animation: pop .26s ease-out; }
.result.bad { border-color: var(--bad); animation: shake .42s ease-in-out; }
.feature-result {
    width: min(100%, 640px);
    padding: 1.25rem;
}
.result-mark {
    color: var(--primary-dark);
    font-size: clamp(1.8rem, 5vw, 3rem);
    font-weight: 900;
    line-height: 1.1;
}
.result-mark.ok { color: var(--good); }
.result-mark.no { color: var(--bad); }
.result-stage { gap: 1rem; }
.result-year {
    margin-top: .5rem;
    color: var(--accent-dark);
    font-size: clamp(2.5rem, 9vw, 5rem);
    font-weight: 900;
    line-height: 1;
}
.result-song {
    margin-top: .55rem;
    color: var(--text);
    font-size: 1.08rem;
    font-weight: 800;
}
.inline-result {
    width: min(100%, 760px);
    margin-top: 0;
    padding: .7rem .9rem;
}

/* #800: a successful steal gets its own celebratory banner, distinct from plain correct/wrong. */
.inline-result.steal-result {
    color: #1a1410;
    background:
        radial-gradient(circle at 50% -40%, rgba(255,255,255,.55), transparent 55%),
        linear-gradient(180deg, var(--accent), var(--accent-dark));
    border-color: #fff8da;
    box-shadow: 0 0 0 2px rgba(240,180,77,.35), 0 14px 30px rgba(217,149,33,.35);
    animation: steal-pop .5s cubic-bezier(.2,.9,.25,1.3);
}
.inline-result.steal-result strong { color: #1a1410; }
.steal-emoji {
    display: inline-block;
    font-size: 1.5rem;
    transform-origin: 50% 80%;
    animation: steal-wiggle .6s ease-in-out;
}
@keyframes steal-pop {
    0% { transform: scale(.85); opacity: 0; }
    60% { transform: scale(1.04); }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes steal-wiggle {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-14deg); }
    75% { transform: rotate(14deg); }
}

/* ===================== Reveal card ===================== */
.reveal {
    display: block;
    width: min(100%, 360px);
    margin: 1.2rem auto 0;
    padding: 1rem;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    animation: flip .35s ease-out;
}
.reveal img {
    display: block;
    width: 210px;
    max-width: 62vw;
    height: auto;
    margin: 0 auto .65rem;
    border-radius: var(--radius);
}
.reveal .yr {
    color: var(--primary-dark);
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
}
.reveal .ar { font-weight: 900; }
.reveal .ti { color: var(--muted); font-weight: 600; }
.feature-reveal {
    width: min(100%, 440px);
    padding: 1.2rem;
}
.feature-reveal img {
    width: min(260px, 68vw);
    box-shadow: 0 8px 22px rgba(11,16,48,.18);
}
.feature-reveal .yr {
    font-size: clamp(2.6rem, 12vw, 5.2rem);
    line-height: 1;
}

/* ===================== Lobby ===================== */
.lobby-stage {
    width: min(100%, 980px);
    margin: 0 auto;
}
.lobby-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    margin: .35rem 0 1rem;
    padding: 1rem;
    background: linear-gradient(135deg, #141a3e, #1f6fe0);
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.lobby-hero .eyebrow { color: #fff4cf; }
.room-code {
    color: #fff;
    font-size: clamp(2rem, 8vw, 3.6rem);
    font-weight: 900;
    line-height: .95;
    letter-spacing: .04em;
}
.join-qr {
    width: 170px;
    height: 170px;
    padding: .35rem;
    background: #fff;
    border: 2px solid rgba(255,255,255,.65);
    border-radius: var(--radius);
}
.lobby-start {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    margin-top: .35rem;
}
.compact-target {
    justify-content: center;
    margin-top: .5rem;
}

/* ===================== Avatars and players ===================== */
.avatar-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .55rem;
    max-width: 460px;
    margin: .75rem auto;
}
.avatar-opt {
    width: 60px;
    height: 60px;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    box-shadow: none;
}
.avatar-opt img,
.avatar-sm,
.avatar-md,
.avatar-lg {
    object-fit: cover;
    image-rendering: pixelated;
}
.avatar-opt img { display: block; width: 100%; height: 100%; }
.avatar-opt.sel { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
.avatar-opt:hover:not(:disabled) { border-color: var(--primary); box-shadow: none; transform: none; }
.avatar-sm { width: 32px; height: 32px; border: 1px solid var(--ink); border-radius: 7px; }
.avatar-md { width: 52px; height: 52px; border: 2px solid var(--ink); border-radius: var(--radius); box-shadow: 0 3px 0 rgba(11,16,48,.32); }
.avatar-lg { width: 104px; height: 104px; border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: 0 4px 0 rgba(11,16,48,.32); }

.player-list,
.scoreboard {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}
.scoreboard { justify-content: center; margin: .35rem 0 .8rem; }
.player-chip {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: .38rem;
    min-height: 34px;
    padding: .18rem .58rem .18rem .24rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(11,16,48,.08);
    font-weight: 800;
}
.player-chip span { min-width: 0; overflow-wrap: anywhere; }
.player-chip .player-name { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-chip .counter-badge { flex: 0 0 auto; }
.player-chip.active { border-color: var(--primary); box-shadow: 0 0 0 3px var(--selection-ring); }
.player-chip.off { opacity: .45; }

/* Spectator peek (#B): scoreboard chips become tappable to view a seat's timeline. */
.player-chip.selectable { cursor: pointer; user-select: none; transition: transform .12s ease, box-shadow .12s ease; }
.player-chip.selectable:hover { transform: translateY(-1px); }
.player-chip.selectable:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.player-chip.sel { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary) inset, 0 6px 14px rgba(11,16,48,.12); }

/* Timeline shield (counter-play to the swaps): a quiet badge on the chip. */
.shield-badge {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--primary);
}

/* Coin change (#UI-D). The scoreboard scrolls horizontally, so the old in-chip pill was clipped and
   had to stay tiny — which is why coin moves went unnoticed at the table. The coins now fly in their
   own fixed layer (see zeitklang.fx.coins) and the seat itself reacts when they land. */
.player-chip { position: relative; }
.coin-count.bump { animation: coin-bump .5s cubic-bezier(.2, .9, .2, 1); }
.player-chip.coin-hit {
    animation: chip-hit .7s cubic-bezier(.2, .9, .2, 1);
    border-color: var(--accent);
}
.player-chip.coin-miss {
    animation: chip-miss .5s ease-in-out;
    border-color: var(--bad);
}
#zk-fx {
    position: fixed;
    inset: 0;
    z-index: 210;
    overflow: hidden;
    pointer-events: none;
}
.zk-fx-coin {
    position: fixed;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 28%, #fff6d8 0 16%, transparent 60%),
        linear-gradient(150deg, var(--accent), var(--accent-dark));
    border: 2px solid #a86f12;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
    animation: zk-coin-fly .9s cubic-bezier(.35, .08, .2, 1) forwards;
}
.zk-fx-delta {
    position: fixed;
    padding: .18rem .62rem;
    border-radius: 999px;
    color: #fff;
    font-size: 1.75rem;
    font-weight: 900;
    line-height: 1.1;
    white-space: nowrap;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .35);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .34);
    animation: zk-delta-pop 1.5s cubic-bezier(.2, .8, .2, 1) both;
}
.zk-fx-delta.up { background: var(--good); }
.zk-fx-delta.down { background: var(--bad); }
@keyframes coin-bump {
    0% { transform: scale(1); }
    35% { transform: scale(1.55) rotate(-6deg); }
    60% { transform: scale(1.2) rotate(4deg); }
    100% { transform: scale(1) rotate(0); }
}
@keyframes chip-hit {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(240, 180, 77, .8); }
    30% { transform: scale(1.11); box-shadow: 0 0 0 9px rgba(240, 180, 77, 0); }
    60% { transform: scale(.98); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(240, 180, 77, 0); }
}
@keyframes chip-miss {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    60% { transform: translateX(4px); }
}
@keyframes zk-coin-fly {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.35) rotate(0); }
    12% { opacity: 1; transform: translate(-50%, -50%) scale(1.2) rotate(40deg); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(.6) rotate(400deg); }
}
@keyframes zk-delta-pop {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
    16% { opacity: 1; transform: translate(-50%, -150%) scale(1.3); }
    38% { transform: translate(-50%, -180%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -330%) scale(.95); }
}
@media (prefers-reduced-motion: reduce) {
    .coin-count.bump,
    .player-chip.coin-hit,
    .player-chip.coin-miss { animation: none; }
    .zk-fx-delta { animation: pop-fade .2s ease-out both; }
}

/* "This player's own sound is playing" (#UI-D): the reaction clips are personal, so the room should
   see whose voice it just heard — including the phones that never play audio themselves. */
@keyframes speaking-pulse {
    0%, 100% { opacity: .55; transform: scale(.94); }
    50% { opacity: 1; transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
    .speaking-badge { animation: none; opacity: 1; }
}
.chip-x {
    min-width: 28px;
    min-height: 28px;
    margin: 0 -.35rem 0 0;
    padding: 0 .2rem;
    color: var(--muted);
    background: transparent;
    border: 0;
    box-shadow: none;
}
.chip-x:hover:not(:disabled) { color: var(--bad); background: transparent; box-shadow: none; transform: none; }

/* Steal / vote */
.opt-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    width: 100%;
    margin-top: .55rem;
    font-weight: 800;
    color: var(--primary-dark);
}
.opt-row select, .opt-row input { min-width: 0; }

/* Harmonized coin-sink option (#D): toggle + cost value on the right of an .opt-row. */
.cost-opt-controls { display: inline-flex; align-items: center; gap: .5rem; }
.cost-opt-cost { display: inline-flex; align-items: center; gap: .2rem; }
.cost-opt-value { width: 3.4rem; text-align: right; }
.cost-opt-unit > .zk-icon { width: 1rem; height: 1rem; color: var(--warning-text); vertical-align: -0.12em; }
.cost-opt-off { color: var(--muted); font-size: .82rem; font-weight: 700; }
.cost-opt-toggle { width: 1.15rem; height: 1.15rem; accent-color: var(--primary); flex: 0 0 auto; }
/* "free" variant of the button cost pill (#D): cost 0 shows a tag instead of a coin count. */
.btn-cost.free { font-size: .74em; text-transform: uppercase; letter-spacing: .3px; }
.board-label {
    margin: .35rem 0 -.1rem;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 800;
    text-align: center;
}
.vote-q { margin: .2rem 0 .4rem; font-size: 1.1rem; font-weight: 800; color: var(--primary-dark); }
/* Just the running tally — the sentence around it was scaffolding for a rule everyone knows (#UI-C). */
.vote-tally {
    margin: .1rem 0 .3rem;
    color: var(--muted);
    font-size: .95rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
/* Game-ish thumbs vote (#1188): big round tap targets instead of Yes/No text buttons. */
.vote-thumbs { display: flex; justify-content: center; gap: 1.4rem; margin: .3rem 0 .2rem; }
.thumb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    color: #fff;
    font-size: 2.1rem;
    box-shadow: var(--shadow);
    transition: transform .1s ease, filter .1s ease;
}
.thumb-btn > .zk-icon { width: 2.1rem; height: 2.1rem; }
.thumb-btn:hover:not(:disabled) { transform: translateY(-2px) scale(1.05); }
.thumb-btn:active:not(:disabled) { transform: scale(.94); }
.thumb-yes { background: var(--good); }
.thumb-no { background: var(--bad); }
/* Active player's own "skip the vote" pill (#A): same family as the thumbs, wider, neutral. */
/* Same round target as the thumbs (#UI-G) — it is the third answer to the same question, so it
   should not look like a different kind of control. Neutral, because it is the "no coin" way out. */
.thumb-skip {
    background: linear-gradient(135deg, #3b4463, #626f8f);
}
@media (max-width: 420px) {
    .thumb-btn { width: 66px; height: 66px; }
}
/* Steal "Pass" (#1190): centered under the card, gamified pill to match the thumbs vote. */
/* The action strip is a grid; a lone control has to span it or it sits in column one and reads as
   left-aligned (#UI-F). */
.pass-row { grid-column: 1 / -1; display: flex; justify-content: center; width: 100%; margin: .5rem 0 .1rem; }
.pass-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 46px;
    padding: .5rem 1.6rem;
    border-radius: 999px;
    color: var(--text);
    background: var(--status-bg);
    border: 2px solid var(--border);
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: .3px;
    box-shadow: var(--shadow);
    transition: transform .1s ease, background .12s ease, color .12s ease, border-color .12s ease;
}
.pass-btn > .zk-icon { width: 1.15rem; height: 1.15rem; }
.pass-btn:hover:not(:disabled) { transform: translateY(-2px) scale(1.04); background: var(--accent); color: var(--ink); border-color: transparent; }
.pass-btn:active:not(:disabled) { transform: scale(.95); }

/* Theme picker (Settings) */
.theme-pick { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 1rem; }
.theme-opt { color: var(--text); background: var(--surface); border: 2px solid var(--border); }
.theme-opt.sel { color: var(--primary-dark); border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }

/* Stats */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .75rem;
    margin: .8rem 0 1.2rem;
}
.stat-tile {
    display: flex;
    min-height: 84px;
    flex-direction: column;
    justify-content: center;
    gap: .2rem;
    padding: .85rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.stat-tile span { color: var(--muted); font-weight: 800; font-size: .82rem; }
.stat-tile strong { color: var(--primary-dark); font-size: 1.45rem; line-height: 1.1; }
.danger-zone {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    padding: .85rem;
    background: var(--danger-soft-bg);
    border: 1px solid var(--danger-soft-border);
    border-radius: var(--radius);
}
.danger-zone input { min-width: min(100%, 220px); }
button.danger {
    color: #fff;
    background: var(--bad);
}
button.danger:hover:not(:disabled) {
    filter: brightness(1.05);
}

/* ===================== Song manager ===================== */
.song-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
    margin: .75rem 0;
}
.song-card {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .7rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.song-card.sel { border-color: var(--primary); box-shadow: 0 0 0 3px var(--selection-ring); }
.song-card.missing { background: var(--danger-soft-bg); border-color: var(--danger-soft-border); }
.song-check { width: 1.2rem; height: 1.2rem; margin-top: .25rem; flex: 0 0 auto; }
.song-cover {
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    object-fit: cover;
    border-radius: var(--radius);
}
.song-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: .22rem; }
.song-title { font-weight: 900; line-height: 1.22; }
.song-sub { color: var(--muted); font-size: .88rem; font-weight: 600; }
.song-years,
.song-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .42rem;
    font-size: .86rem;
}
.song-actions { margin-top: .2rem; }

/* ===================== Animations ===================== */
@keyframes pop { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes flip { from { transform: rotateY(88deg); opacity: 0; } to { transform: rotateY(0); opacity: 1; } }
@keyframes shake { 10%, 90% { transform: translateX(-2px); } 30%, 70% { transform: translateX(4px); } 50% { transform: translateX(-7px); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }

/* ===================== Responsive ===================== */
@media (min-width: 720px) {
    .song-list { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
    .draw-stage,
    .listening-stage {
        display: flex;
        width: 100%;
        flex-direction: column;
    }
    .draw-stage > .flip-card,
    .listening-stage > .flip-card {
        grid-row: auto;
    }
    .action-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }
}

@media (max-width: 860px) {
    .tiles { grid-template-columns: 1fr; max-width: 560px; }
    .tile { min-height: 0; }
    .setup-shell { grid-template-columns: 1fr; }
    .setup-players,
    .setup-playlists,
    .setup-deck,
    .draw-panel,
    .profile-panel,
    .room-panel,
    .lobby-players,
    .lobby-options,
    .setup-start { grid-column: 1; grid-row: auto; }
    .game-hud { grid-template-columns: 1fr; }
    .game-hud .turn-bar,
    .compact-scoreboard { justify-content: center; }
}

@media (max-width: 560px) {
    .app-main { padding-inline: .8rem; }
    .fs-root { padding: .5rem .55rem .65rem; }
    .game-screen { padding-top: 0; }
    h1 { font-size: 1.32rem; }
    h2 { font-size: 1.06rem; }
    .setup-hero,
    .setup-start {
        align-items: stretch;
        flex-direction: column;
    }
    .setup-controls { flex-direction: column; align-items: stretch; }
    .setup-controls .opt-row { width: 100%; }
    .setup-audio { justify-content: flex-start; }
    .setup-start .big-btn,
    .setup-section > .huge-btn,
    .join-row .big-btn,
    .input-action-row button {
        width: 100%;
        margin-right: 0;
    }
    .phase-stage { width: 100%; }
    .draw-stage,
    .listening-stage,
    .waiting-stage,
    .winner-stage { padding: .5rem; }
    .mystery-card {
        width: min(70vw, 220px);
        min-height: 210px;
    }
    .compact-card {
        width: min(56vw, 170px);
        min-height: 150px;
    }
    .flip-card { width: min(70vw, 224px); min-height: 210px; }
    .flip-card.compact { width: min(62vw, 200px); min-height: 180px; }
    .card-question { width: 68px; height: 68px; font-size: 2.35rem; }
    .compact-card .card-question,
    .flip-card.compact .card-question { width: 52px; height: 52px; font-size: 1.75rem; }
    .card-title { font-size: .92rem; }
    .card-kicker { font-size: .72rem; }
    .flip-back .rc-cover { width: min(96px, 52%); }
    .game-center { gap: .4rem; padding: .15rem 0; }
    .phase-stage { gap: .45rem; }
    .draw-stage, .listening-stage, .waiting-stage, .result-stage { padding: .5rem; }
    .timeline { margin-top: .35rem; padding: .42rem; }
    .tl-card { min-width: 92px; padding: .38rem .44rem; }
    .slot-btn { min-width: 38px; min-height: 56px; }
    .screen-status { margin-bottom: .25rem; }
    .game-hud { margin-bottom: .25rem; }
    .game-hud .avatar-md { width: 36px; height: 36px; }
    .join-row { grid-template-columns: 1fr; }
    .lobby-hero { grid-template-columns: 1fr; text-align: center; justify-items: center; }
    .join-qr { width: 150px; height: 150px; }
    .input-action-row { align-items: stretch; }
    .input-action-row button { width: 100%; }
    .playlist-pick label { grid-template-columns: auto minmax(0, 1fr); }
    .playlist-pick .status { grid-column: 2; }
    .turn-bar { flex-wrap: wrap; }
    .song-card { gap: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* ===================== Mobile game overhaul ===================== */
.logo-button {
    display: inline-flex;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.logo-button:hover:not(:disabled),
.logo-button:active:not(:disabled) {
    background: transparent;
    box-shadow: none;
    transform: none;
}

.fs-root {
    padding: .45rem .55rem .55rem;
}
.fs-nav {
    width: min(100%, 1080px);
    min-height: 34px;
    margin-bottom: .25rem;
}
.fs-home {
    min-height: 32px;
    padding: .26rem .62rem;
    font-size: .8rem;
}
.game-screen {
    min-height: calc(100dvh - 102px);
    position: relative;
}

.game-hud {
    width: min(100%, 920px);
    margin: 0 auto .35rem;
    padding: .32rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .35rem;
    align-items: center;
    background: var(--surface-panel-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.compact-scoreboard {
    justify-content: flex-end;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding: .12rem;
    -webkit-overflow-scrolling: touch;
}
/* Compact 2-row chip (#B): row 1 = avatar + name, row 2 = card + coin counters. Height is the
   scarce resource on this screen, so the chip is padded only as much as it needs (#UI-A). */
.compact-scoreboard .player-chip {
    flex: 0 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: .1rem;
    min-height: 0;
    padding: .16rem .45rem .18rem;
    border-radius: 12px;
    font-size: .82rem;
}
.compact-scoreboard .chip-id { display: flex; align-items: center; gap: .34rem; min-width: 0; }
.compact-scoreboard .chip-id .player-name { max-width: 8rem; }
.compact-scoreboard .chip-stats { display: flex; align-items: center; gap: .32rem; }
/* Coins sit at the right edge of row 2 — that badge is what the flying coins aim for. */
.compact-scoreboard .chip-stats .coin-count { margin-left: auto; }
.game-hud .avatar-md {
    width: 34px;
    height: 34px;
}

/* Badges are drawn OVER the chip, never in its flow (#UI-A). A shield bought, a reaction clip
   playing — each used to widen the chip for a few seconds and shove everything in it sideways. */
.chip-avatar { position: relative; display: inline-flex; flex: 0 0 auto; }
.speaking-badge {
    position: absolute;
    right: -.3rem;
    bottom: -.28rem;
    display: grid;
    place-items: center;
    width: 1.05rem;
    height: 1.05rem;
    padding: 0;
    border-radius: 50%;
    color: var(--accent-text);
    background: var(--accent);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
    font-size: .62rem;
    animation: speaking-pulse 1s ease-in-out infinite;
}
.speaking-badge > .zk-icon { width: .68rem; height: .68rem; }
.chip-flags > span { display: inline-flex; align-items: center; }
.chip-flags .zk-icon { width: .82rem; height: .82rem; }
.chip-flags {
    position: absolute;
    top: -.32rem;
    right: .28rem;
    z-index: 4;
    display: inline-flex;
    gap: .1rem;
    padding: .06rem .22rem;
    border-radius: 999px;
    background: var(--surface);
    box-shadow: 0 1px 5px rgba(0, 0, 0, .3);
    font-size: .72rem;
    line-height: 1;
}

.screen-status {
    display: none;
}
.stage-center,
.game-center {
    flex: 0 0 auto;
    justify-content: flex-start;
}
.phase-stage {
    gap: .35rem;
}
.draw-stage,
.listening-stage,
.waiting-stage,
.decision-stage,
.winner-stage,
.result-stage {
    width: min(100%, 760px);
    padding: .3rem .4rem;
}
.draw-stage,
.listening-stage {
    grid-template-columns: auto minmax(0, 1fr);
    gap: .45rem .65rem;
}
.phase-note {
    font-size: .82rem;
}
.flip-card.compact,
.compact-card {
    width: min(196px, 56vw);
    min-height: 178px;
}
.flip-card,
.mystery-card {
    width: min(212px, 62vw);
    min-height: 198px;
}
.card-question {
    width: 62px;
    height: 62px;
    font-size: 2.05rem;
}
.compact-card .card-question,
.flip-card.compact .card-question {
    width: 50px;
    height: 50px;
    font-size: 1.62rem;
}
.card-kicker {
    font-size: .68rem;
}
.card-title {
    max-width: 9rem;
    font-size: .86rem;
}
.action-strip {
    grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
    gap: .36rem;
}
.action-strip button,
.big-btn {
    min-height: 40px;
    padding: .48rem .68rem;
    font-size: .86rem;
}
.huge-btn {
    min-height: 46px;
    min-width: 140px;
    padding: .55rem .8rem;
}
.inline-result,
.result {
    width: min(100%, 760px);
    margin: 0 auto .35rem;
    padding: .48rem .65rem;
    border-width: 2px;
    font-size: .9rem;
}
.result-mark {
    font-size: 1.15rem;
}

.timeline-shell {
    width: min(100%, 1080px);
    margin: auto auto 0;
    padding-top: .2rem;
    position: sticky;
    bottom: .35rem;
    z-index: 12;
}
.timeline-shell.active .board-label {
    color: var(--accent);
}
.board-label {
    margin: 0 0 .22rem;
    color: var(--muted);
    font-size: .78rem;
}
.timeline {
    margin-top: 0;
    padding: .38rem;
    gap: .32rem;
    border-width: 2px;
}
.tl-card {
    min-width: 112px;
    max-width: 156px;
    padding: .33rem .4rem;
}
.tl-card .yr {
    font-size: .98rem;
}
.tl-card .mt {
    font-size: .72rem;
}
.slot-btn {
    min-width: 34px;
    min-height: 54px;
}

/* ===================== Stats experience ===================== */
.stats-page {
    width: min(100%, 1040px);
    margin: 0 auto;
}
.stats-hero,
.admin-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .9rem;
    margin: .25rem 0 1rem;
}
.stats-accuracy {
    display: grid;
    min-width: 112px;
    place-items: center;
    padding: .7rem;
    color: var(--primary-action-text);
    background: var(--primary-action-bg);
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    box-shadow: var(--button-shadow);
}
.stats-accuracy strong {
    font-size: 1.55rem;
    line-height: 1;
}
.stats-accuracy span {
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
}

/* Overall / Personal tab switcher on the Stats page. */
.stats-tabs {
    display: inline-flex;
    gap: .3rem;
    margin: 0 0 1rem;
    padding: .28rem;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 999px;
}
.stats-tab {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem 1rem;
    border: none;
    border-radius: 999px;
    background: none;
    color: var(--muted);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}
.stats-tab.active {
    background: var(--primary-action-bg);
    color: var(--primary-action-text);
    box-shadow: var(--button-shadow);
}

/* Records panel (single-game highs) + steal rivalry rows. */
.records-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .7rem;
    margin-top: .3rem;
}
.record-tile {
    padding: .7rem;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
/* A record that knows its game opens that game's audit entry (#UI-E). */
.record-tile.record-link {
    display: block;
    width: 100%;
    min-height: 0;
    box-shadow: none;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
.record-tile.record-link:hover {
    background: var(--surface);
    border-color: var(--primary);
    box-shadow: none;
    transform: none;
    color: inherit;
}
/* Outranks `.record-tile span`, which paints every label in the tile muted. */
.record-tile .record-go {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-top: .35rem;
    color: var(--primary-dark);
    font-size: .68rem;
    font-weight: 900;
    text-transform: uppercase;
}
.record-go > .zk-icon { width: .8rem; height: .8rem; }

/* Champions of the day / week / month (#UI-F). */
.champion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .7rem;
    margin-top: .3rem;
}
.champion-tile {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .7rem;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.champion-tile.alltime { border-color: var(--accent); background: var(--surface-warm); }
.champion-tile.empty { opacity: .6; }
.champion-period {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.champion-who {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    color: var(--primary-dark);
    font-size: 1.05rem;
    line-height: 1.15;
    overflow-wrap: anywhere;
}
.champion-who .avatar-sm { width: 24px; height: 24px; flex: 0 0 auto; }
.champion-none { color: var(--muted); font-size: 1.3rem; line-height: 1; }
.champion-tile p { margin: 0; color: var(--muted); font-size: .78rem; font-weight: 700; }
.record-tile span {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
}
.record-tile strong {
    display: block;
    margin: .18rem 0;
    color: var(--primary-dark);
    font-size: 1.5rem;
    line-height: 1;
}
.record-tile p {
    margin: 0;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 700;
}
.rivalry-row .rivalry-arrow {
    color: var(--accent);
    font-weight: 900;
    margin: 0 .15rem;
}
.highlight-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: .7rem;
    margin: .8rem 0 1rem;
}
.highlight-card,
.stats-panel,
.admin-panel,
.empty-state {
    background: var(--surface-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.highlight-card {
    min-height: 112px;
    padding: .78rem;
}
.highlight-card span {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
}
.highlight-card strong {
    display: block;
    margin: .22rem 0;
    color: var(--primary-dark);
    font-size: 1.18rem;
    line-height: 1.1;
}
.highlight-card p {
    margin: 0;
    color: var(--muted);
    font-size: .86rem;
    font-weight: 700;
}
.highlight-card.good { border-color: rgba(47,140,97,.45); }
.highlight-card.bad { border-color: rgba(201,75,69,.45); }
.highlight-card.gold { border-color: var(--accent); }
.stats-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
    margin: .85rem 0;
}
.stats-panel,
.admin-panel {
    padding: .85rem;
}
.rank-row,
.recent-game-row,
.song-stat-row,
.playlist-admin-row,
.search-result-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .5rem;
    min-height: 42px;
    padding: .45rem 0;
    border-bottom: 1px solid var(--border);
}
.rank-row:last-child,
.recent-game-row:last-child,
.song-stat-row:last-child,
.playlist-admin-row:last-child,
.search-result-row:last-child {
    border-bottom: 0;
}
.rank-row span,
.recent-game-row span,
.song-stat-row span,
.song-stat-row em,
.recent-game-row small {
    color: var(--muted);
    font-size: .82rem;
    font-style: normal;
    font-weight: 700;
}
.decade-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    align-items: center;
    gap: .55rem;
    margin: .48rem 0;
}
.decade-track {
    height: 10px;
    overflow: hidden;
    background: var(--surface-soft);
    border-radius: 999px;
}
.decade-track i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    border-radius: inherit;
}
.stats-maintenance {
    margin: 1.2rem 0 0;
}

/* Calmer stats (#G): more breathing room between the analytical panels, and a softer, quieter
   treatment for the secondary two-column panels so the hero tiles + highlights lead the page. */
.stats-split { gap: 1rem; margin: 1.15rem 0; }
.stats-split .stats-panel { background: var(--surface-soft); box-shadow: none; }
.stats-split .eyebrow { opacity: .82; }
.stats-page .hero-stats { margin-top: .2rem; }

/* Play Together full audit (#G): collapsible game rows with a round-by-round drill-down. */
.audit-panel { padding: .85rem; }
.audit-game { border-bottom: 1px solid var(--border); }
.audit-game:last-child { border-bottom: 0; }
.audit-game-head {
    display: grid;
    grid-template-columns: 1.2rem minmax(0, auto) minmax(0, 1fr) auto;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .6rem .1rem;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    color: var(--text);
}
.audit-game-head:hover { color: var(--primary); }
.audit-caret { color: var(--muted); font-size: .9rem; }
.audit-winner { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit-meta { color: var(--muted); font-size: .8rem; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit-when { color: var(--muted); font-size: .76rem; font-weight: 700; justify-self: end; white-space: nowrap; }
.audit-detail { padding: .2rem 0 .8rem; }
.audit-standings { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
.audit-standing {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    font-size: .82rem;
    font-weight: 700;
}
.audit-standing.won { border-color: var(--accent); color: var(--primary-dark); }
.audit-standing > .zk-icon { width: .95rem; height: .95rem; color: var(--accent); }
.audit-rounds { display: flex; flex-direction: column; overflow-x: auto; }
.audit-round-row {
    display: grid;
    grid-template-columns: 2rem minmax(4rem, 1fr) minmax(6rem, 2.4fr) 3rem minmax(4rem, auto);
    align-items: center;
    gap: .5rem;
    min-width: 30rem;
    padding: .32rem 0;
    border-bottom: 1px solid var(--border);
    font-size: .84rem;
}
.audit-round-row:last-child { border-bottom: 0; }
.audit-round-head { color: var(--muted); font-size: .72rem; font-weight: 900; text-transform: uppercase; }
/* Coin-spend / swap events interleaved with the round rows (#B). */
.audit-event-row {
    min-width: 30rem;
    padding: .26rem .1rem .26rem .5rem;
    border-bottom: 1px solid var(--border);
    color: var(--muted);
    font-size: .8rem;
    font-style: italic;
}
.audit-event-row:last-child { border-bottom: 0; }
.audit-rn, .audit-song { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit-song { color: var(--muted); font-weight: 600; }
.audit-res.ok { color: var(--good); font-weight: 800; }
.audit-res.bad { color: var(--bad); font-weight: 800; }

/* ===================== Management overhaul ===================== */
.admin-page {
    width: min(100%, 1180px);
    margin: 0 auto;
}
.admin-panel {
    margin: .85rem 0;
}
.admin-actions {
    justify-content: flex-start;
}
.playlist-admin-list,
.search-results {
    margin-top: .7rem;
}
.library-filters {
    position: sticky;
    top: 58px; /* stick just below the 58px app bar so filters stay reachable */
    z-index: 10;
    display: grid;
    grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
    gap: .5rem;
    margin-bottom: .65rem;
    padding: .55rem;
    background: var(--surface-panel);
    border-radius: 10px;
}
.scope-row { display: flex; align-items: center; gap: .5rem; margin: .2rem 0 .7rem; flex-wrap: wrap; }
.scope-row > span { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; font-weight: 700; color: var(--muted); }
.scope-row select { flex: 1; min-width: 200px; padding: .5rem .6rem; border-radius: 8px; border: 1px solid var(--border); background: var(--field-bg); color: var(--text); font: inherit; }
.library-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin: .2rem 0 .5rem; }
.pager { display: inline-flex; align-items: center; gap: .5rem; }
.pager .status { min-width: 92px; text-align: center; }
.pager-bottom { display: flex; justify-content: center; margin-top: .7rem; }
.select-all-row {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .35rem;
}
.library-list {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.library-card.excluded {
    opacity: .68;
}
.badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: .32rem;
}
.meta-badge {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    padding: .14rem .44rem;
    color: var(--muted);
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 900;
}
.meta-badge.manualoverride,
.meta-badge.confidence-high {
    color: var(--good);
    border-color: rgba(47,140,97,.4);
}
.meta-badge.needsreview,
.meta-badge.warn,
.meta-badge.confidence-medium {
    color: var(--warning-text);
    border-color: var(--warning-border);
}
.meta-badge.excluded,
.meta-badge.bad,
.meta-badge.confidence-low {
    color: var(--bad);
    border-color: rgba(201,75,69,.45);
}
.review-reason {
    margin: .15rem 0;
    color: var(--warning-text);
    font-size: .82rem;
    font-weight: 700;
}
.song-actions input[type=number] {
    width: 5.2rem;
    min-height: 34px;
    padding: .28rem .42rem;
}

@media (max-width: 760px) {
    .game-hud {
        grid-template-columns: 1fr;
    }
    .compact-scoreboard {
        justify-content: flex-start;
    }
    .draw-stage,
    .listening-stage {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
    }
    .stats-split,
    .library-filters {
        grid-template-columns: 1fr;
    }
    .rank-row,
    .recent-game-row,
    .song-stat-row,
    .playlist-admin-row,
    .search-result-row {
        grid-template-columns: 1fr;
        align-items: start;
        gap: .16rem;
    }
}

@media (max-width: 420px) {
    .fs-root {
        padding-inline: .45rem;
    }
    .game-hud {
        padding: .26rem;
    }
    .draw-stage,
    .listening-stage {
        grid-template-columns: minmax(0, 1fr);
    }
    .flip-card.compact,
    .compact-card {
        width: min(190px, 58vw);
        min-height: 174px;
    }
    .action-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .timeline-shell {
        bottom: .2rem;
    }
    .tl-card {
        min-width: 108px;
        max-width: 140px;
    }
    .stats-hero,
    .admin-hero {
        align-items: stretch;
        flex-direction: column;
    }
}

/* ===================== Visual game refresh ===================== */
/* All main-menu tiles share one accent left border (no per-tile colours). */
.home-mode-grid .mode-card::before { background: var(--accent); }

.fs-root {
    background:
        radial-gradient(circle at 18% 10%, rgba(41,182,246,.11), transparent 28%),
        radial-gradient(circle at 88% 92%, rgba(240,180,77,.12), transparent 25%);
}
.fs-nav {
    position: relative;
    z-index: 24;
}
.fs-home {
    border-color: rgba(255,255,255,.42);
    box-shadow: 0 4px 0 rgba(0,0,0,.28), 0 10px 20px rgba(0,0,0,.18);
}
.game-screen {
    display: flex;
    min-height: calc(100dvh - 106px);
}
.game-screen::before {
    content: "";
    position: fixed;
    inset: 58px 0 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 26px 26px;
    mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 78%, transparent 100%);
}
.game-hud {
    flex: 0 0 auto;
    background:
        linear-gradient(135deg, rgba(41,182,246,.16), transparent 46%),
        var(--surface-panel-soft);
    border-color: rgba(41,182,246,.28);
    box-shadow: 0 10px 24px rgba(0,0,0,.22);
}
.stage-center,
.game-center {
    flex: 1 1 auto;
    justify-content: center;
    min-height: 0;
}
.compact-stage {
    flex: 1 1 auto;
}
.phase-stage {
    position: relative;
    isolation: isolate;
}
.draw-stage,
.listening-stage {
    width: min(100%, 720px);
    min-height: 212px;
    grid-template-columns: minmax(130px, .72fr) minmax(0, 1fr);
    padding: .45rem;
}
.draw-stage .action-strip,
.listening-stage .action-strip {
    align-self: end;
}
.result-stage {
    width: min(100%, 620px);
    min-height: 310px;
    justify-content: center;
    gap: .48rem;
    padding: .75rem;
}

/* #802: unify every in-play stage into the same centered column so the mystery card sits dead-centre
   for the active player AND spectators, in Classic and Together alike. The active stages were a
   2-column grid (card shoved left) while the spectator's waiting stage was a centred column, so they
   diverged at wider widths; the waiting stage also lacked the framed treatment. */
.draw-stage,
.listening-stage,
.waiting-stage,
.decision-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    grid-template-columns: none;
    width: min(100%, 440px);
    min-height: 220px;
}
.draw-stage > .flip-card,
.listening-stage > .flip-card {
    grid-row: auto;
}
.draw-stage .action-strip,
.listening-stage .action-strip {
    width: 100%;
    align-self: center;
}
.result-stage .flip-card {
    width: min(184px, 54vw);
    min-height: 204px;
}
.result-stage .flip-face {
    padding: .62rem;
}
.result-stage .rc-cover {
    width: min(74px, 45%);
    margin-bottom: .12rem;
}
.result-stage .rc-year {
    font-size: clamp(2rem, 10vw, 2.8rem);
}
.result-stage .rc-artist {
    font-size: .98rem;
}
.result-stage .rc-title {
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    color: var(--muted);
    font-size: .9rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.result-stage .action-strip {
    width: min(100%, 320px);
    grid-template-columns: 1fr;
}
.result-stage .huge-btn {
    min-height: 44px;
}

/* A revealed card mounts already flipped (no live animation), so render it as a static card that
   GROWS to fit its content. The 3D flip uses absolutely-positioned faces with overflow:hidden,
   which clipped long artist/title (e.g. "Electric Light Orchestra / Don't Bring Me Down"). (#804) */
.flip-card.is-revealed {
    height: auto;
    min-height: 0;
}
.flip-card.is-revealed .flip-inner {
    position: static;
    transform: none;
    min-height: 0;
}
.flip-card.is-revealed .flip-front {
    display: none;
}
.flip-card.is-revealed .flip-back {
    position: static;
    transform: none;
    overflow: visible;
    min-height: 200px;
    height: auto;
    gap: .3rem;
}
.flip-card.is-revealed .rc-artist {
    max-width: 100%;
    overflow-wrap: anywhere;
}
.flip-card.is-revealed .rc-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    max-width: 100%;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.result-mark {
    padding: .12rem .58rem;
    background: rgba(0,0,0,.18);
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: 1.28rem;
    line-height: 1;
}
.flip-card,
.mystery-card {
    filter: drop-shadow(0 18px 22px rgba(0,0,0,.24));
}
.flip-face,
.mystery-card {
    border-color: rgba(6,10,31,.95);
}
.card-question {
    box-shadow: inset 0 -5px 0 rgba(11,16,48,.16), 0 0 0 6px rgba(255,249,223,.12);
}
.card-title {
    text-shadow: 0 1px 8px rgba(0,0,0,.32);
}
.action-strip {
    width: min(100%, 460px);
}
.action-strip button,
.big-btn,
.huge-btn {
    border-width: 1px;
    box-shadow: 0 4px 0 rgba(0,0,0,.34);
}
.secondary-action {
    background: rgba(41,182,246,.11);
    border-color: rgba(41,182,246,.28);
}
.secondary-action:hover:not(:disabled) {
    background: rgba(41,182,246,.20);
}
.phase-note {
    color: var(--muted);
    font-size: .82rem;
    text-transform: none;
}
.timeline-shell {
    flex: 0 0 auto;
    margin: .35rem auto 0;
    padding: .25rem .32rem .38rem;
    background:
        linear-gradient(135deg, rgba(240,180,77,.18), transparent 34%),
        rgba(6,10,31,.38);
    border: 1px solid rgba(240,180,77,.35);
    border-radius: 10px;
    box-shadow: 0 0 0 2px rgba(0,0,0,.16), 0 14px 28px rgba(0,0,0,.34);
}
.board-label {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    margin: 0 0 .22rem .2rem;
    padding: .1rem .48rem;
    color: var(--accent);
    background: rgba(0,0,0,.22);
    border: 1px solid rgba(240,180,77,.2);
    border-radius: 999px;
    font-size: .72rem;
    text-transform: uppercase;
}
.timeline {
    background:
        radial-gradient(circle at 12% 10%, rgba(41,182,246,.18), transparent 30%),
        linear-gradient(180deg, #243a8a, #141a3c);
    border-width: 1px;
    box-shadow: inset 0 2px 14px rgba(0,0,0,.38);
}
.timeline.is-placing {
    box-shadow: inset 0 2px 14px rgba(0,0,0,.38), 0 0 0 3px rgba(240,180,77,.22);
}
.slot-btn {
    background: rgba(255,255,255,.10);
    border-color: rgba(255,244,207,.94);
    color: #fff8da;
}
/* Authoritative timeline-card box: ONE source of truth for size + layout so every card in the
   rail is exactly the same height regardless of how long the artist/title is (see also #804). */
.tl-card {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .12rem;
    height: 108px;
    overflow: hidden;
    border-width: 1px;
    box-shadow: 0 4px 0 rgba(0,0,0,.38);
}
.tl-card .mt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

/* Two-step placement: first tap arms a slot, second tap commits (guards against accidental placement / steal). */
.slot-btn.armed {
    background: var(--accent);
    border-color: #fff8da;
    color: #1a1410;
    font-weight: 900;
    transform: scale(1.14);
    animation: armed-pulse 1s ease-in-out infinite;
}
.timeline.is-arming .slot-btn:not(.armed) { opacity: .42; }
@keyframes armed-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(240,180,77,.5), 0 0 14px rgba(240,180,77,.55); }
    50% { box-shadow: 0 0 0 4px rgba(240,180,77,.8), 0 0 22px rgba(240,180,77,.95); }
}
/* Label row (#UI-B): one constant-height row above the board, so arming a slot costs no extra
   height and the timeline never moves under the finger. */
.board-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
    min-width: 0;
}
/* While a slot is armed the label steps aside — it keeps its height (removing the row would shove
   the board up under an aiming finger) but hands the space to the cancel. */
.board-label.handover { visibility: hidden; }

/* Out of flow on purpose: a 44px button in the label row would make arming a slot push the whole
   board down. It floats in that row instead, centred over the armed slot — `left` is measured in
   zeitklang.anchorCancel, the 50% here is only the fallback before that runs (#UI-B). */
.place-cancel {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 7;
    min-height: 30px;
    padding: .18rem .85rem;
    background: rgba(0, 0, 0, .82);
    color: #fff8da;
    border: 1px solid rgba(240, 180, 77, .55);
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .45);
    font-size: .8rem;
    font-weight: 800;
    cursor: pointer;
}
.place-cancel:hover {
    background: rgba(0, 0, 0, .92);
    color: #fff8da;
    border-color: var(--accent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .45);
    transform: translateX(-50%);
}

.setup-hero {
    padding: .75rem;
    background:
        radial-gradient(circle at 92% 12%, rgba(240,180,77,.18), transparent 30%),
        linear-gradient(135deg, rgba(41,182,246,.12), rgba(0,0,0,.04));
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.setup-section {
    border-color: rgba(41,182,246,.18);
    background:
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.035)),
        var(--surface-panel);
}
.setup-deck {
    box-shadow: 0 14px 30px rgba(0,0,0,.24);
}
.playlist-picker {
    background: rgba(0,0,0,.10);
}
.hist-row {
    grid-template-columns: 54px minmax(0, 1fr) 40px;
}
.hist-bar {
    height: 11px;
    box-shadow: 0 0 16px rgba(240,180,77,.18);
}
.win-target input {
    border-color: rgba(41,182,246,.25);
    background: rgba(0,0,0,.12);
}

@media (max-width: 860px) {
    .home-screen {
        width: min(100%, 560px);
    }
    .home-hero {
        grid-template-columns: auto minmax(0, 1fr);
        padding: .72rem;
    }
    .home-logo {
        width: min(108px, 28vw);
    }
    .tiles {
        grid-template-columns: 1fr;
        gap: .62rem;
    }
    .tile {
        min-height: 88px;
        padding: .72rem;
    }
}

@media (max-width: 520px) {
    .home-hero {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
    .home-logo {
        width: min(132px, 42vw);
    }
    .tagline {
        margin-inline: auto;
    }
    .tile {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .tile-meta {
        grid-column: 2;
        justify-self: start;
    }
    .game-screen {
        min-height: calc(100dvh - 100px);
    }
    .draw-stage,
    .listening-stage {
        min-height: 210px;
        grid-template-columns: minmax(0, 1fr);
        align-content: center;
    }
    .result-stage {
        min-height: 322px;
    }
    .timeline-shell {
        bottom: .22rem;
    }
}

/* Short viewports (#1197): keep the whole steal view — card + Pass + timeline — on screen
   without scrolling. The card-only stealer stage no longer needs a tall floor, and the Pass
   pill tightens up so it stays reachable above the timeline. */
@media (max-height: 760px) {
    .draw-stage,
    .listening-stage {
        min-height: 168px;
    }
    .pass-row {
        margin: .3rem 0 .05rem;
    }
    .pass-btn {
        min-height: 42px;
        padding: .42rem 1.4rem;
    }
}

/* ===================== Blazor template ===================== */
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid red; }
.validation-message { color: red; }

#blazor-error-ui {
    color-scheme: light only;
    display: none;
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    z-index: 1000;
    padding: .8rem 2.6rem .8rem 1rem;
    color: #3d1917;
    background: #fff2cf;
    border: 1px solid #e6bd5e;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
#blazor-error-ui .dismiss { position: absolute; top: .55rem; right: .75rem; cursor: pointer; }
.blazor-error-boundary { padding: 1rem; color: white; background: #b32121; }
.blazor-error-boundary::after { content: "An error has occurred."; }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto;
}
.loading-progress circle {
    fill: none;
    stroke: #d7dfda;
    stroke-width: .6rem;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}
.loading-progress circle:last-child {
    stroke: var(--primary);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * .8), 500%;
    transition: stroke-dasharray .05s ease-in-out;
}
.loading-progress-text {
    position: absolute;
    inset: calc(20vh + 3.25rem) 0 auto .2rem;
    text-align: center;
    font-weight: 900;
}
.loading-progress-text::after { content: var(--blazor-load-percentage-text, "Loading"); }
code { color: #b12d67; }

/* --- Admin console (P3) --- */
/* Accounts as stacked, wrap-friendly cards — the old 5-column table broke on phones (#880). */
.admin-page .user-cards { display: flex; flex-direction: column; gap: .55rem; }
.admin-page .user-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .9rem;
    padding: .6rem .7rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-panel-soft);
}
.admin-page .user-card-id { display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1 1 200px; }
.admin-page .user-card-id strong { font-size: .95rem; }
.admin-page .user-card-id span, .admin-page .user-card-id small { color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; }
.admin-page .user-card-controls { display: flex; align-items: center; gap: .5rem; flex: 0 1 auto; }
.admin-page .user-status {
    padding: .18rem .55rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    border: 1px solid var(--border);
    color: var(--muted);
}
.admin-page .user-status.active { color: var(--good); border-color: var(--good); }
.admin-page .user-status.invited { color: var(--warning-text); border-color: var(--warning-border); background: var(--warning-bg); }
.admin-page .user-status.disabled { color: var(--bad); border-color: var(--bad); }
.admin-page .row-disabled { opacity: .5; }
.admin-page .row-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.admin-page .form-grid { display: grid; grid-template-columns: 1fr; gap: .6rem; max-width: 520px; margin-bottom: .6rem; }
/* Round timing: six small numbers read better side by side than as one long column. */
.admin-page .form-grid-2 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); max-width: 760px; }
.admin-page .settings-subhead { margin: 1.2rem 0 .1rem; font-size: 1rem; }
.admin-page label .hint { margin: 0; font-weight: 400; line-height: 1.25; }
.admin-page label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; }
.admin-page input, .admin-page select { padding: .5rem .6rem; border-radius: 8px; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.2); color: inherit; font: inherit; }
.admin-page .chk { flex-direction: row; align-items: center; gap: .4rem; }
.admin-page .btn { padding: .5rem .9rem; border: none; border-radius: 10px; font-weight: 600; cursor: pointer; color: #fff; background: linear-gradient(135deg, #2b6cb0, #6b46c1); }
.admin-page .btn:disabled { opacity: .6; cursor: default; }
.admin-page .btn-sm { padding: .3rem .6rem; font-size: .8rem; }
.admin-page .btn-danger { background: linear-gradient(135deg, #b02b2b, #c1466b); }
.admin-page .form-msg { margin-top: .6rem; font-size: .85rem; word-break: break-all; }
.admin-page .hint { font-size: .8rem; opacity: .7; }
.admin-page .avatar-grid { display: flex; flex-wrap: wrap; gap: .5rem; margin: .3rem 0 .6rem; }
.admin-page .avatar-opt { padding: 2px; border: 2px solid transparent; border-radius: 10px; background: rgba(0,0,0,.2); cursor: pointer; }
.admin-page .avatar-opt.sel { border-color: #6b46c1; }
.admin-page .avatar-opt img { width: 48px; height: 48px; border-radius: 8px; display: block; object-fit: cover; }

/* ===================== My library studio (B / #850) ===================== */
.my-library { display: flex; flex-direction: column; gap: 1rem; }
.my-library h1 { margin: 0; }

.lib-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--border); }
.lib-sub { margin: .3rem 0 0; color: var(--muted); font-weight: 600; display: inline-flex; align-items: center; gap: .35rem; }
.host-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .35rem; padding: .32rem .7rem; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 999px; font-size: .76rem; font-weight: 800; color: var(--muted); white-space: nowrap; }

.health-strip { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.health-tile { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; padding: .85rem 1rem; background: var(--surface-panel); border: 1px solid var(--border); border-radius: var(--radius); text-align: left; }
button.health-tile { cursor: pointer; font: inherit; color: inherit; }
button.health-tile:hover { border-color: var(--primary); }
.health-n { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; line-height: 1.05; color: var(--text); }
.health-lbl { font-size: .8rem; font-weight: 700; color: var(--muted); }
.health-tile.warn { background: var(--warning-bg); border-color: var(--warning-border); }
.health-tile.warn .health-n, .health-tile.warn .health-lbl { color: var(--warning-text); }
.health-tile.warn.is-clear { background: var(--surface-panel); border-color: var(--border); }
.health-tile.warn.is-clear .health-n, .health-tile.warn.is-clear .health-lbl { color: var(--good); }

.lib-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.lib-actions .big-btn { flex: 1 1 12rem; }
.big-btn.accent { background: var(--accent); color: var(--accent-text); border-color: var(--accent-dark); }
.big-btn.accent:hover { background: var(--accent-dark); color: var(--accent-text); }
.big-btn.subtle { background: var(--surface-soft); color: var(--text); border-color: var(--border); box-shadow: none; }
.big-btn.sm { min-height: 40px; padding: .4rem .85rem; font-size: .92rem; flex: 0 0 auto; }
.lib-msg { margin: 0; }

.lib-pane { padding: .85rem; background: var(--surface-panel); border: 1px solid var(--border); border-radius: var(--radius); }
.pane-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.pane-list { display: flex; flex-direction: column; gap: .4rem; margin-top: .5rem; max-height: 360px; overflow-y: auto; }
.pane-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .45rem .6rem; background: var(--surface-soft); border-radius: 7px; }
.pane-row-main { display: flex; flex-direction: column; min-width: 0; }
.pane-row-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pane-row-main span { font-size: .76rem; color: var(--muted); }

.review-zone { padding: .95rem; background: var(--surface-panel); border: 1px solid var(--border); border-radius: var(--radius); }
.review-progress { margin-bottom: .85rem; }
.review-card { display: flex; gap: .9rem; align-items: flex-start; }
.review-cover { width: 84px; height: 84px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; }
.review-cover.ph { display: grid; place-items: center; background: var(--surface-soft); color: var(--muted); }
.review-body { flex: 1 1 auto; min-width: 0; }
.review-title { font-weight: 800; font-size: 1.05rem; }
.review-artist { color: var(--muted); margin-bottom: .5rem; }
.review-swap { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .2rem 0 .5rem; font-weight: 700; }
.review-swap .from { color: var(--muted); }
.review-swap .arrow { color: var(--accent-dark); font-weight: 900; }
.review-swap .to { color: var(--good); }
.review-swap.missing { color: var(--warning-text); }

/* Provenance chip per browse row: who set the play year (AI / Manual / —), opening a detail panel. */
.prov-chip { flex: 0 0 auto; padding: .12rem .5rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-soft); color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .01em; cursor: pointer; white-space: nowrap; }
.prov-chip:hover { background: var(--surface); }
.prov-chip.prov-auto { border-color: var(--accent); color: var(--accent-dark); background: var(--surface-warm); }
.prov-chip.prov-manual { color: var(--text); }
.prov-chip.prov-none { opacity: .7; }

.browse-row.open { background: var(--surface-soft); }
.evidence { margin: -.15rem 0 .5rem; padding: .55rem .7rem .65rem calc(40px + 1.3rem); border-bottom: 1px solid var(--border); background: var(--surface-soft); border-radius: 0 0 8px 8px; }
.ev-reason { margin: 0 0 .35rem; color: var(--text); font-size: .86rem; }
.ev-meta { display: flex; flex-wrap: wrap; gap: .35rem; color: var(--muted); font-size: .78rem; font-weight: 700; margin-bottom: .4rem; }
.ev-meta .ev-warn { color: var(--warning-text); }
.review-task { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .35rem; }
.year-in { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; color: var(--muted); font-weight: 700; }
.year-in input { width: 6rem; padding: .4rem .5rem; border-radius: 7px; border: 1px solid var(--border); background: var(--field-bg); color: var(--text); font: inherit; }
.review-card.review-clear { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; color: var(--good); font-weight: 700; }

.browse-filters { position: sticky; top: 58px; z-index: 10; display: grid; grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); gap: .5rem; margin-bottom: .6rem; padding: .55rem; background: var(--surface-panel); border: 1px solid var(--border); border-radius: 10px; }
.browse-filters input, .browse-filters select { min-width: 0; padding: .5rem .6rem; border-radius: 8px; border: 1px solid var(--border); background: var(--field-bg); color: var(--text); font: inherit; }
.select-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .55rem; padding: .5rem .7rem; background: var(--surface-warm); border: 1px solid var(--warning-border); border-radius: 10px; }
.browse-list { display: flex; flex-direction: column; }
.browse-row { display: flex; align-items: center; gap: .65rem; padding: .5rem .25rem; border-bottom: 1px solid var(--border); }
.browse-row.sel { background: var(--surface-soft); }
.browse-row.excluded { opacity: .55; }
.browse-cover { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; flex: 0 0 auto; }
.browse-cover.ph { background: var(--surface-soft); }
.browse-main { flex: 1 1 auto; min-width: 0; }
.browse-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browse-sub { font-size: .8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot-sep { opacity: .5; }
.status-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 999px; background: var(--muted); }
.status-dot.ok { background: var(--good); }
.status-dot.warn { background: var(--accent-dark); }
.status-dot.bad { background: var(--bad); }
.row-menu-wrap { position: relative; flex: 0 0 auto; }
.row-menu-btn { min-width: 34px; min-height: 34px; padding: 0 .35rem; background: none; border: 1px solid transparent; border-radius: 7px; color: var(--muted); font-size: 1.25rem; line-height: 1; cursor: pointer; }
.row-menu-btn:hover { background: var(--surface-soft); color: var(--text); }
.row-menu { position: absolute; z-index: 20; top: calc(100% + .25rem); right: 0; display: flex; flex-direction: column; min-width: 9.5rem; padding: .35rem; background: var(--surface-panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); }
.row-menu button { text-align: left; padding: .45rem .6rem; background: none; border: none; border-radius: 7px; color: var(--text); font: inherit; cursor: pointer; }
.row-menu button:hover { background: var(--surface-soft); }
.row-menu button.danger { color: var(--bad); }
.row-edit { display: inline-flex; align-items: center; gap: .35rem; flex: 0 0 auto; }
.row-edit input { width: 5.5rem; padding: .35rem .5rem; border-radius: 7px; border: 1px solid var(--border); background: var(--field-bg); color: var(--text); font: inherit; }
.browse-empty { padding: 1.2rem; text-align: center; }
.mini.on { background: var(--primary); color: #fff; }

@media (max-width: 560px) {
    .lib-header { flex-direction: column; gap: .5rem; }
    .lib-actions .big-btn { flex: 1 1 100%; }
    .browse-filters { grid-template-columns: 1fr 1fr; top: 52px; }
    .review-cover { width: 64px; height: 64px; }
}

/* ===================== Confirm modal (#852) ===================== */
.confirm-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1rem; background: rgba(6,10,31,.62); }
.confirm-dialog { width: min(100%, 380px); display: flex; flex-direction: column; gap: .55rem; padding: 1.3rem 1.2rem; background: var(--surface-panel); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); text-align: center; }
.confirm-title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--text); }
.confirm-msg { margin: 0 0 .5rem; color: var(--muted); font-weight: 600; }
.confirm-actions { display: flex; gap: .6rem; }
.confirm-actions .big-btn { flex: 1; }
.big-btn.confirm-danger { background: var(--bad); color: #fff; border-color: var(--bad); }
.big-btn.confirm-danger:hover { background: var(--bad); filter: brightness(1.08); color: #fff; }

/* --- Auth pages: login / forgot-password / set-password (global; these must not rely on the
   scoped CSS bundle, which index.html does not load). Themed via the design tokens. --- */
.login-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 74vh;
    padding: 1.5rem 1rem 3rem;
}
.login-card {
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: .9rem;
    padding: 1.6rem 1.4rem;
    border-radius: 18px;
    background: var(--surface-panel);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}
.login-logo {
    display: block;
    width: 58%;
    max-width: 150px;
    height: auto;
    margin: .1rem auto;
}
.login-title {
    margin: 0 0 .2rem;
    text-align: center;
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--text);
}
.login-label {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--muted);
}
.login-input {
    width: 100%;
    padding: .7rem .8rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--field-bg);
    color: var(--text);
    font-size: 16px; /* 16px keeps iOS from zooming the form on focus */
}
.login-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--focus-ring);
}
.login-btn {
    margin-top: .3rem;
    width: 100%;
    padding: .8rem;
    border: none;
    border-radius: 12px;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    color: var(--primary-action-text);
    background: var(--primary-action-bg);
    transition: background .15s ease, transform .05s ease;
}
.login-btn:hover:not(:disabled) { background: var(--primary-action-hover); }
.login-btn:active:not(:disabled) { transform: translateY(1px); }
.login-btn:disabled { opacity: .6; cursor: default; }
.login-error {
    padding: .55rem .75rem;
    border-radius: 10px;
    background: var(--danger-soft-bg);
    border: 1px solid var(--danger-soft-border);
    color: var(--bad);
    font-size: .85rem;
}
.login-link {
    align-self: center;
    font-size: .85rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
}
.login-link:hover { text-decoration: underline; }
.login-msg {
    text-align: center;
    font-size: .92rem;
    color: var(--muted);
}

/* --- Action pulse (#1199): screen-edge glow when it's your turn to act ---
   z-index sits ABOVE the sticky app bar (20) and the in-game nav (24): both are opaque and span the
   top of the viewport, so a lower pulse was painted over there and only ever glowed on three edges.
   Stays below the flashes/dialogs (45+) and is pointer-events:none, so it never blocks the chrome. */
.action-pulse {
    position: fixed;
    inset: 0;
    z-index: 30;
    pointer-events: none;
    border-radius: 2px;
    animation: action-pulse 1.25s ease-in-out infinite;
}
@keyframes action-pulse {
    0%, 100% {
        box-shadow:
            inset 0 0 0 3px rgba(240, 180, 77, .55),
            inset 0 0 22px 2px rgba(240, 180, 77, .28);
    }
    50% {
        box-shadow:
            inset 0 0 0 6px rgba(240, 180, 77, 1),
            inset 0 0 52px 12px rgba(240, 180, 77, .8);
    }
}
@media (prefers-reduced-motion: reduce) {
    .action-pulse {
        animation: none;
        box-shadow:
            inset 0 0 0 5px rgba(240, 180, 77, .9),
            inset 0 0 30px 6px rgba(240, 180, 77, .45);
    }
}
/* Preference toggle row (Account) */
.pref-toggle { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .9rem; cursor: pointer; }
.pref-toggle input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }

/* --- Stage beats (#UI-A): short room-wide announcements — a steal, a swap, the vote's verdict.
   These were four full-screen spotlights, each with its own timer, which is exactly why they had
   to be modal to stay out of each other's way. Now they are one more view of the content area,
   played one at a time by the page's beat queue. --- */
/* An announcement is type on the stage, not a card (#UI-A2). The emoji and the headline already
   carry it; the panel it inherited from its modal only boxed it in. Tone lives in the headline's
   colour now, which is why each variant only sets that. */
.beat-stage { justify-content: center; }
.beat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    width: min(100%, 400px);
    padding: .6rem 1rem;
    color: var(--text);
    text-align: center;
    animation: beat-in .32s cubic-bezier(.2, .9, .2, 1);
}
.beat-emoji {
    font-size: 3.4rem;
    line-height: 1;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45));
    animation: beat-pounce .5s ease;
}
.beat-head {
    font-family: var(--font-display);
    font-size: 1.7rem;
    line-height: 1.15;
    overflow-wrap: anywhere;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}
.beat-sub {
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}
.beat-steal .beat-head,
.beat-coin .beat-head { color: var(--accent); }
.beat-swap .beat-head { color: #b79bff; }
.beat-swap .beat-emoji { animation: beat-spin .6s ease; }
.beat-skip .beat-head { color: var(--primary-dark); }
.beat-deny .beat-head { color: var(--muted); }
/* Whose turn it is, and the round boundary — announced in the content area like everything else
   (#UI-A) instead of covering the board the players are trying to read. */
.beat-turn .beat-emoji { font-size: 2.4rem; }
.beat-round .beat-head { color: var(--accent); font-size: 2.1rem; letter-spacing: 1px; }
@keyframes beat-in { from { transform: scale(.7) translateY(10px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
@keyframes beat-pounce { 0% { transform: translateX(-16px) rotate(-12deg); } 60% { transform: translateX(4px) rotate(6deg); } 100% { transform: translateX(0) rotate(0); } }
@keyframes beat-spin { 0% { transform: rotate(-180deg) scale(.6); } 70% { transform: rotate(12deg) scale(1.1); } 100% { transform: rotate(0) scale(1); } }
@media (prefers-reduced-motion: reduce) {
    .beat-card,
    .beat-emoji { animation: none; }
}

/* --- Pre-draw purchases as stage views (#863/#UI-A): the picker takes the content area rather
   than covering it. It only ever opens on your own turn before drawing, where the stage shows
   nothing but "Your turn". --- */
.picker-stage {
    width: min(100%, 440px);
    max-height: 70vh;
    padding: .8rem .85rem;
    overflow-y: auto;
    gap: .4rem;
    background: var(--surface-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.picker-title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--text); }
.picker-msg { margin: 0 0 .35rem; color: var(--muted); font-weight: 600; font-size: .9rem; }
.picker-stage .swap-targets,
.picker-stage .swap-cards { justify-content: center; }
.picker-actions { display: flex; gap: .6rem; width: 100%; margin-top: .35rem; }
.picker-actions .big-btn { flex: 1; }

.skip-turn-badge {
    display: inline-flex;
    align-items: center;
    color: var(--bad);
    font-size: .8rem;
}
.skip-player-targets { justify-content: center; }

/* --- Round result popup (center-screen; dismiss to continue to the next turn) --- */
.result-pop-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.2rem;
 /*   background: rgba(4, 8, 20, .62);
    backdrop-filter: blur(2px);*/
    animation: pop-fade .16s ease;
}
.result-pop {
    position: relative;   /* anchors the corner tools (#UI-C) */
    width: min(100%, 360px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .65rem;
    padding: 1.5rem 1.25rem;
    text-align: center;
    background: var(--surface-panel);
    border: 2px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow);
    animation: pop-in .2s cubic-bezier(.2, .8, .2, 1);
}
/* Room renders the reveal inside the content area (#UI-A) — same card, no backdrop around it. */
.result-pop.inline { width: min(100%, 440px); }
/* Already continued: the button becomes a status line, the card stays up to keep reading. */
.result-waiting {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: .35rem 0 0;
    color: var(--muted);
    font-size: .9rem;
    font-weight: 800;
}
.result-waiting > .zk-icon { color: var(--accent-dark); }
.result-force {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .6rem;
    background: none;
    border: 1px solid var(--border);
    border-radius: 999px;
    box-shadow: none;
    color: var(--muted);
    font-size: .8rem;
    font-weight: 800;
}
.result-force:hover { color: var(--text); background: var(--surface-soft); box-shadow: none; transform: none; }
.result-pop.good { border-color: rgba(47, 140, 97, .55); }
.result-pop.bad { border-color: rgba(201, 75, 69, .55); }
.result-pop.steal { border-color: rgba(240, 180, 77, .7); }
.result-pop-emoji { font-size: 2.7rem; line-height: 1; }
.result-pop-head {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--text);
}
.result-pop.good .result-pop-head { color: var(--good); }
.result-pop.bad .result-pop-head { color: var(--bad); }
.result-pop.steal .result-pop-head { color: var(--accent-dark); }
.result-pop-cover { width: 96px; height: 96px; border-radius: 12px; object-fit: cover; }
.result-pop-song { display: flex; flex-direction: column; gap: .1rem; }
.result-pop-year {
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--primary);
}
.result-pop-meta { color: var(--muted); font-size: .95rem; overflow-wrap: anywhere; }
.result-pop .huge-btn { width: 100%; margin-top: .35rem; }
/* Side actions (#UI-C): the reason and the wrong-year flag are asides, not steps. As corner buttons
   they cost the card no height — the reveal was overflowing the screen with them stacked below. */
.result-tools {
    position: absolute;
    top: .5rem;
    right: .5rem;
    display: flex;
    gap: .3rem;
}
.result-tool {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    min-width: 0;
    min-height: 0;
    padding: 0;
    color: var(--muted);
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 50%;
    box-shadow: none;
    opacity: .75;
}
.result-tool > .zk-icon { width: 1rem; height: 1rem; }
.result-tool:hover:not(:disabled) { opacity: 1; color: var(--text); background: var(--surface-soft); box-shadow: none; transform: none; }
.result-tool.on { opacity: 1; color: var(--primary-dark); border-color: var(--primary); }
.result-tool.done { opacity: 1; color: var(--good); border-color: var(--good); }
.result-tool:disabled { cursor: default; }

/* A steal attempt that did NOT land — otherwise it would be invisible in the reveal. */
.result-steal-note {
    margin: .1rem 0 0;
    color: var(--muted);
    font-size: .86rem;
    font-weight: 700;
}

/* Host-only: read how the play year was determined before flagging it as wrong. */
.result-year-note {
    margin: .1rem 0 0;
    padding: .5rem .6rem;
    max-height: 8rem;
    overflow-y: auto;
    text-align: left;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: .82rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}
@keyframes pop-in { from { transform: scale(.86); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes pop-fade { from { opacity: 0; } to { opacity: 1; } }

/* ===================== Play-together gate: profile card + lobby browser ===================== */
.profile-card { gap: .8rem; }
.profile-card-main {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    text-align: left;
    color: inherit;
}
.profile-card-main:hover:not(:disabled) { transform: none; box-shadow: none; }
.profile-card-id { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.profile-card-name { font-weight: 900; font-size: 1.1rem; color: var(--primary-dark); }
.profile-card-edit { font-size: .78rem; font-weight: 800; color: var(--muted); }
.profile-card-main .zk-icon { color: var(--muted); }
.profile-quickstats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    border-top: 1px solid var(--border);
    padding-top: .7rem;
}
.quickstat { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.quickstat strong { color: var(--primary-dark); font-size: 1.35rem; line-height: 1; }
.quickstat span { color: var(--muted); font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }

.lobby-browse-list { display: flex; flex-direction: column; gap: .5rem; }
.lobby-browse-row {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    padding: .55rem .7rem;
    background: var(--surface-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: none;
    text-align: left;
    color: inherit;
}
.lobby-browse-row:hover:not(:disabled) { border-color: var(--primary); transform: none; }
.lobby-browse-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.lobby-browse-meta strong { font-weight: 900; color: var(--primary-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobby-browse-meta span { color: var(--muted); font-size: .78rem; font-weight: 700; }
.lobby-browse-join {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    flex: 0 0 auto;
    color: var(--primary);
    font-weight: 900;
    font-size: .84rem;
}

/* ===================== Lobby layout ===================== */
/* Single column on phones; two columns (config | sidebar) on wider screens. Using a grid means the
   sidebar/hero reliably stretch to fill their cell (the old flex nesting collapsed the hero to the
   width of the QR). */
.lobby-shell {
    width: min(100%, 960px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
}
.lobby-shell > * { min-width: 0; }
.lobby-shell.is-guest { max-width: 560px; }
.lobby-side { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
@media (min-width: 820px) {
    .lobby-shell.is-host { grid-template-columns: minmax(0, 1.3fr) minmax(300px, .82fr); }
    .lobby-shell.is-host .lobby-config { grid-column: 1; }
    .lobby-shell.is-host .lobby-side { grid-column: 2; }
}

/* Config: the smaller toggles flow into two columns when the card is wide, one on phones. */
.lobby-opts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: .2rem .9rem;
    margin-top: .55rem;
}
.lobby-opts .opt-row { margin-top: .35rem; }

/* Invite block: room code + QR side by side, always filling the column. */
.lobby-invite { display: flex; flex-direction: column; gap: .6rem; width: 100%; }
/* Keep room code + QR side by side and full-width at every size (beats the old ≤560 stacking). */
.lobby-invite .lobby-hero {
    margin: 0;
    width: 100%;
    grid-template-columns: minmax(0, 1fr) auto;
    justify-items: stretch;
    text-align: left;
}
.lobby-hero-code { min-width: 0; }
.lobby-public-row { margin-top: 0; }
.lobby-public-row span { display: flex; flex-direction: column; }
.lobby-public-row small { color: var(--muted); font-size: .74rem; font-weight: 700; }
.lobby-launch .lobby-start { margin: 0; }

/* Non-host waiting card, centered. */
.lobby-waiting {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .85rem;
    text-align: center;
}

/* ===================== Account: personal stats ===================== */
.account-stats-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.account-stats-head h2 { margin: 0; }
.stat-tile-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: .6rem;
    margin: .8rem 0 .2rem;
}

/* ===================== Account: personalised reaction sounds (#D) ===================== */
.sound-slots { display: flex; flex-direction: column; gap: .5rem; margin-top: .6rem; }
.sound-slot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .55rem .7rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.sound-slot.filled { border-color: var(--primary); }
.sound-slot-id { display: flex; flex-direction: column; min-width: 9rem; }
.sound-slot-id strong { font-weight: 800; }
.sound-slot-id .hint { margin: 0; font-size: .82rem; }
.sound-slot-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
/* A file <input> disguised as a .mini button via its wrapping label. */
.sound-slot-actions .file-btn { position: relative; overflow: hidden; cursor: pointer; }
.sound-slot-actions .file-btn.disabled { opacity: .5; pointer-events: none; }
.sound-slot-actions .file-btn input[type=file] {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer;
}
.sound-slot-actions .rec-on {
    color: var(--bad);
    border-color: var(--bad);
    animation: coin-bump 1s ease-in-out infinite;
}