/* --------------------------------------------------------------------------
   Bopster Live - app shell (live.php + js/live-app.js)

   Gives Live the Studio's look and a phone-app frame: lobby, stage, the
   phone game bar and the Scores/History/Settings sheet (a side panel from
   1024px). Glass recipe copied from the Studio (studio.php) like
   incl/instant_express.css does; change it there first.

   Every rule starts at body.lv-app: the Tailwind CDN injects its preflight
   after this file and wins ties, and live.php's own inline <style> blocks
   define .btn/.view/.glass-effect twice.

   Stacking (phones): game bar 45, sheet scrim 47, sheet 48 - all below the
   site header (50, which carries its phone menu) and the game's modals.
   -------------------------------------------------------------------------- */

body.lv-app {
    --lv-spring: cubic-bezier(.22, 1.35, .38, 1);
    --lv-bounce: cubic-bezier(.3, 1.65, .42, 1);
    --lv-rim: rgba(255,255,255,.18);
    --lv-spec:
        inset 0 1px 1px rgba(255,255,255,.3),
        inset 0 -1px 1px rgba(255,255,255,.08),
        inset 1px 0 1px -.5px rgba(255,255,255,.16),
        inset -1px 0 1px -.5px rgba(255,255,255,.12);
    --lv-glass: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.02) 35%, rgba(255,255,255,0) 55%, rgba(255,255,255,.05));
    --lv-live: linear-gradient(180deg, #ffffff21, transparent 60%), linear-gradient(115deg, #087e98, #346ecc);
    --lv-pink: linear-gradient(180deg, #ffffff21, transparent 60%), linear-gradient(115deg, #ca438e, #8054d4);
    --lv-text: #e2e8f0;
    --lv-muted: #aab3c8;
    --lv-dock-h: 4.4rem;
    background:
        radial-gradient(ellipse at 8% 0%, rgba(126,74,216,.22), transparent 45%),
        radial-gradient(ellipse at 92% 70%, rgba(16,156,179,.13), transparent 50%),
        radial-gradient(ellipse at 60% 100%, rgba(224,85,162,.08), transparent 55%),
        #0c1020 !important;
    background-attachment: fixed !important;
    color: var(--lv-text);
}
@supports (transition-timing-function: linear(0, 1)) {
    body.lv-app {
        --lv-spring: linear(0, .006, .025 2.4%, .101 5.1%, .287 9%, .539 13.7%, .721 17.6%, .865 21.9%, .974 26.7%, 1.048 31.9%, 1.089 37.6%, 1.105 44%, 1.102 51.2%, 1.087 59.3%, 1.067 68.4%, 1.045 78.8%, 1.024 91.1%, 1.012, 1.005, 1.002);
        --lv-bounce: linear(0, .009, .035 2.1%, .141 4.4%, .41 8.6%, .723 13.9%, .938 18.5%, 1.083 23.6%, 1.162 29.1%, 1.183 35%, 1.161 41.2%, 1.112 47.9%, 1.051 55.1%, .994 62.8%, .953 71.2%, .932 80.5%, .93 91%, .944, .966, .987 97.9%, 1);
    }
}
body.lv-app .ambient-glow-1, body.lv-app .ambient-glow-2 { display: none; }
html.lv-locked { overflow: hidden; }

body.lv-app .lv-ico { width: 1.25rem; height: 1.25rem; flex: none; }
body.lv-app .lv-ico-lg { width: 1.6rem; height: 1.6rem; }

/* Shared glass surface ------------------------------------------------------ */
body.lv-app .lv-source,
body.lv-app .lv-score-summary,
body.lv-app #activeSongView > .glass-effect,
body.lv-app #qrScannerView > .glass-effect,
body.lv-app #playlistSelectView > .glass-effect,
body.lv-app .lv-panel-card {
    background: var(--lv-glass), rgba(16,22,40,.55);
    border: 1px solid var(--lv-rim);
    border-top-color: rgba(255,255,255,.32);
    box-shadow: var(--lv-spec), 0 26px 60px -34px rgba(0,0,0,.8);
    backdrop-filter: blur(22px) saturate(170%) brightness(1.06);
    -webkit-backdrop-filter: blur(22px) saturate(170%) brightness(1.06);
}

/* Shell ------------------------------------------------------------------- */
body.lv-app .lv-shell { width: 100%; max-width: none; padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
body.lv-app .lv-main { width: 100%; max-width: 40rem; margin-inline: auto; }
body.lv-app #viewsContainer > .view { max-width: none; margin: .75rem 0 0; }

/* A game hides everything that is not the game. The lobby keeps the help,
   the footer and its ad (SEO text and the Ko-fi/feedback blocks live there). */
body.lv-app.lv-in-game #faq,
body.lv-app.lv-in-game footer.bf,
body.lv-app.lv-in-game #feature210Banner,
body.lv-app #currentPlaylistInfo { display: none !important; }
body.lv-app #modeTabs { display: none !important; }

/* Lobby ------------------------------------------------------------------- */
body.lv-app .lv-lobby-head { text-align: center; padding: 1rem .25rem .25rem; }
body.lv-app .lv-lobby-h1 { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .7rem; font: inherit; }
@keyframes lv-pulse { 0% { box-shadow: 0 0 0 0 rgba(244,114,182,.65); } 70%, 100% { box-shadow: 0 0 0 .5rem rgba(244,114,182,0); } }
body.lv-app .lv-lobby-title { display: block; font-size: clamp(2.05rem, 8vw, 3.2rem); font-weight: 900; letter-spacing: -.035em; line-height: 1.02; color: #fff; text-wrap: balance; }
body.lv-app .lv-lobby-lead { color: var(--lv-muted); max-width: 30rem; margin: .7rem auto 0; font-size: .95rem; line-height: 1.5; text-wrap: pretty; }

/* "Play your Studio list" */
body.lv-app .lv-continue {
    display: flex; align-items: center; gap: .85rem;
    margin-top: 1.25rem; padding: .85rem .9rem;
    border-radius: 1.4rem; text-align: left;
    background: linear-gradient(110deg, rgba(202,67,142,.24), rgba(128,84,212,.16)), rgba(16,22,40,.6);
    border: 1px solid rgba(244,114,182,.38);
    box-shadow: var(--lv-spec), 0 18px 40px -26px rgba(202,67,142,.7);
    animation: lv-arrive .6s var(--lv-bounce) both;
}
body.lv-app .lv-continue-icon { width: 2.8rem; height: 2.8rem; border-radius: .95rem; display: grid; place-items: center; background: var(--lv-pink); color: #fff; flex: none; box-shadow: inset 0 1px 0 #ffffff40; }
body.lv-app .lv-continue-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .05rem; }
body.lv-app .lv-continue-eyebrow { font-size: .74rem; font-weight: 600; color: #f9a8d4; }
body.lv-app .lv-continue-copy strong { font-size: 1rem; color: #fff; line-height: 1.25; }
body.lv-app .lv-continue-copy small { font-size: .76rem; color: #c4cbe0; line-height: 1.35; }
body.lv-app .lv-continue-btn {
    display: inline-flex; align-items: center; gap: .4rem; flex: none;
    min-height: 2.75rem; padding: 0 1.05rem; border-radius: 999px; border: 0;
    background: #fff; color: #1d1233; font-weight: 800; font-size: .86rem; cursor: pointer;
    box-shadow: 0 8px 20px -8px rgba(255,255,255,.5);
    transition: transform .4s var(--lv-spring);
}
body.lv-app .lv-continue-btn .lv-ico { width: .95rem; height: .95rem; fill: currentColor; }
body.lv-app .lv-continue-btn:active { transform: scale(.95); }
body.lv-app .lv-continue-btn:disabled { opacity: .55; }

/* Source tiles */
body.lv-app .lv-sources { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: 1.1rem; }
body.lv-app .lv-source.mode-choice-card,
body.lv-app .lv-source {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; align-items: flex-start; gap: .15rem;
    padding: .95rem .95rem 1.05rem; border-radius: 1.6rem;
    text-align: left; color: #fff; text-decoration: none; cursor: pointer;
    min-height: 0;
    transition: transform .5s var(--lv-spring), border-color .25s ease, background-color .25s ease;
    animation: lv-arrive .65s var(--lv-bounce) both;
}
body.lv-app .lv-source--list { animation-delay: .06s; }
body.lv-app .lv-source--instant { animation-delay: .12s; }
body.lv-app .lv-source:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.34); }
body.lv-app .lv-source:active { transform: scale(.97); }
body.lv-app .lv-source:focus-visible, body.lv-app .lv-score-summary:focus-visible, body.lv-app .lv-dock button:focus-visible { outline: 2px solid #67e8f9; outline-offset: 3px; }
body.lv-app .lv-source h3 { font-size: 1.12rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; margin: 0; color: #fff; }
body.lv-app .lv-source p { font-size: .8rem; line-height: 1.4; color: var(--lv-muted); margin: .2rem 0 0; opacity: 1; }
/* Sentence case, quiet: the art already says what the tile is. */
body.lv-app .lv-source-tag { font-size: .74rem; font-weight: 600; color: #9aa4ba; }
body.lv-app .lv-source-go {
    position: absolute; top: .8rem; right: .8rem;
    width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: #fff;
    transition: transform .45s var(--lv-spring), background-color .2s;
}
body.lv-app .lv-source-go .lv-ico { width: 1rem; height: 1rem; }
body.lv-app .lv-source:hover .lv-source-go { transform: translateX(2px); background: rgba(255,255,255,.16); }

/* Tile art: the real thing - printed Bopster cards and library covers. */
body.lv-app .lv-source-art { position: relative; width: 100%; height: 6.4rem; margin-bottom: .6rem; pointer-events: none; }
body.lv-app .lv-real-card {
    position: absolute; top: .35rem; left: 50%; width: 5rem; aspect-ratio: 1; border-radius: 12%; overflow: hidden;
    background: #161236 var(--bg) center / cover no-repeat;
    box-shadow: 0 16px 28px -14px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.14);
    transition: transform .6s var(--lv-spring);
}
body.lv-app .lv-real-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(155deg, rgba(255,255,255,.2), transparent 38%); }
body.lv-app .lv-real-card img { position: absolute; left: 50%; top: 46%; width: 44%; height: auto; translate: -50% -50%; }
body.lv-app .lv-real-card--back { transform: translateX(-22%) rotate(10deg); filter: brightness(.8); }
body.lv-app .lv-real-card--front { transform: translateX(-80%) rotate(-6deg); }
body.lv-app .lv-source--scan:hover .lv-real-card--back { transform: translateX(-12%) rotate(14deg); }
body.lv-app .lv-source--scan:hover .lv-real-card--front { transform: translateX(-86%) rotate(-9deg) translateY(-2px); }
/* Camera viewfinder corners over the front card, breathing slowly. */
body.lv-app .lv-scan-frame { position: absolute; top: .05rem; left: 50%; width: 5.6rem; height: 5.6rem; margin-left: -4.3rem; transform: rotate(-6deg); animation: lv-frame 2.8s ease-in-out infinite; }
body.lv-app .lv-scan-frame i { position: absolute; width: 1rem; height: 1rem; border: 2px solid rgba(255,255,255,.85); border-radius: 2px; }
body.lv-app .lv-scan-frame i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: .45rem; }
body.lv-app .lv-scan-frame i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: .45rem; }
body.lv-app .lv-scan-frame i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: .45rem; }
body.lv-app .lv-scan-frame i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: .45rem; }
@keyframes lv-frame { 0%, 100% { scale: 1; opacity: .9; } 50% { scale: .93; opacity: .55; } }
body.lv-app .lv-src-sleeve, body.lv-app .lv-src-record { position: absolute; top: .35rem; left: 50%; width: 5rem; height: 5rem; }
body.lv-app .lv-src-sleeve { display: block; object-fit: cover; border-radius: .45rem; transform: translateX(-104%) rotate(-8deg); filter: brightness(.75) saturate(.9); box-shadow: 0 14px 24px -14px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.12); }
body.lv-app .lv-src-record {
    top: .55rem; width: 4.6rem; height: 4.6rem; border-radius: 50%;
    transform: translateX(-12%) rotate(0deg);
    background:
        radial-gradient(circle, #f5f0e8 0 13%, #0b0b12 14% 16%, transparent 17%),
        radial-gradient(circle, transparent 0 40%, rgba(255,255,255,.06) 41% 42%, transparent 43%),
        repeating-radial-gradient(circle, #121218 0 2px, #1b1b24 2px 4px);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 10px 22px -10px rgba(0,0,0,.8);
    transition: transform .8s var(--lv-spring);
}
body.lv-app .lv-src-sleeve--front { z-index: 1; transform: translateX(-66%) rotate(0deg); filter: none; }
body.lv-app .lv-source--list:hover .lv-src-record { transform: translateX(6%) rotate(140deg); }

/* Instant Game Night: a full-width row */
body.lv-app .lv-source--instant { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: .85rem; padding: .8rem 3.2rem .8rem .8rem; }
body.lv-app .lv-source--instant .lv-source-go { top: 50%; margin-top: -.95rem; }
body.lv-app .lv-source-icon { width: 3.2rem; height: 3.2rem; flex: none; display: grid; place-items: center; }
body.lv-app .lv-source-icon img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
body.lv-app .lv-source-copy { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
body.lv-app .lv-source--instant h3 { font-size: 1rem; }
body.lv-app .lv-source--instant p { font-size: .76rem; margin: 0; }

/* Scoring summary */
body.lv-app .lv-score-summary {
    width: 100%; display: flex; align-items: center; gap: .8rem;
    margin-top: .75rem; padding: .8rem .9rem; border-radius: 1.3rem;
    color: #fff; text-align: left; cursor: pointer;
    transition: transform .45s var(--lv-spring), border-color .2s;
}
body.lv-app .lv-score-summary:active { transform: scale(.98); }
body.lv-app .lv-score-icon { width: 2.6rem; height: 2.6rem; border-radius: .85rem; display: grid; place-items: center; flex: none; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); }
body.lv-app[data-lv-score="together"] .lv-score-icon { background: var(--lv-live); border-color: transparent; }
body.lv-app .lv-score-copy { display: flex; flex-direction: column; min-width: 0; flex: 1; }
body.lv-app .lv-score-copy small { font-size: .74rem; font-weight: 600; color: #8d97ad; }
body.lv-app .lv-score-copy strong { font-size: .98rem; line-height: 1.25; }
body.lv-app .lv-score-hint { font-size: .76rem; color: var(--lv-muted); }
body.lv-app .lv-score-change { flex: none; padding: .45rem .85rem; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); font-size: .78rem; font-weight: 700; }
body.lv-app[data-lv-score="together"] :is(.lv-score-local, .lv-score-icon-local),
body.lv-app:not([data-lv-score="together"]) :is(.lv-score-together, .lv-score-icon-together) { display: none; }
body.lv-app .lv-score-icon > span { display: grid; place-items: center; }

@keyframes lv-arrive { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

/* Scanner / playlist picker -------------------------------------------------- */
body.lv-app #qrScannerView > .glass-effect,
body.lv-app #playlistSelectView > .glass-effect { border-radius: 1.75rem; }
body.lv-app #playlistSelectView h3 { text-transform: none; letter-spacing: -.01em; }

/* Stage --------------------------------------------------------------------- */
body.lv-app #activeSongView > .glass-effect { border-radius: 1.9rem; padding: 3.75rem 1rem 1.15rem; }
body.lv-app .lv-stage-meta {
    position: absolute; top: .85rem; left: 50%; transform: translateX(-50%);
    width: calc(100% - 10rem); min-height: 2.6rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    line-height: 1.2; z-index: 15; pointer-events: none; text-align: center;
}
/* live.php makes every child of this card position: relative (3-id selector),
   so the two corner pieces need !important to stay in the corners. */
body.lv-app #activeSongView .glass-effect > #lvStageMeta { position: absolute !important; }
body.lv-app #activeSongView .glass-effect > #sourceSwitcherContainer { position: absolute !important; top: .85rem; left: .85rem; min-height: 2.75rem; z-index: 20; }
body.lv-app #activeSongView .glass-effect > #castControlContainer { top: .85rem; right: .85rem; }
body.lv-app .lv-stage-kicker { font-size: .7rem; font-weight: 600; color: #9aa4ba; }
body.lv-app .lv-stage-list { font-size: .86rem; font-weight: 700; color: #fff; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.lv-app #songReadyTitle { display: none; }

body.lv-app #activeSongView .flip-card { --lv-card: min(76vw, 40dvh, 21rem); width: var(--lv-card); height: var(--lv-card); margin: .25rem auto .9rem; }
body.lv-app #activeSongView .progress-container { max-width: 22rem; margin: 0 auto .9rem; }

/* Transport: one row, sentence case, the Studio's gradients. */
body.lv-app #playPauseButton,
body.lv-app #revealButton {
    width: 5.6rem; height: 5.6rem; padding: .6rem; gap: .2rem;
    border-radius: 50%; border: 1px solid rgba(255,255,255,.22);
    text-transform: none; letter-spacing: 0; font-weight: 700;
    transition: transform .45s var(--lv-spring), filter .2s;
}
body.lv-app #playPauseButton { background: var(--lv-pink) !important; border-color: rgba(255,255,255,.3); box-shadow: inset 0 1px 0 #ffffff40, 0 14px 30px -12px rgba(202,67,142,.9); }
body.lv-app #revealButton { background: var(--lv-glass), rgba(255,255,255,.08) !important; box-shadow: var(--lv-spec), 0 12px 26px -14px rgba(0,0,0,.8); }
body.lv-app #playPauseButton:active, body.lv-app #revealButton:active { transform: scale(.93); }
body.lv-app #playPauseText, body.lv-app #revealText { font-size: .74rem; text-transform: none; letter-spacing: 0; margin-top: 0; }
body.lv-app #playPauseButton svg { width: 2rem; height: 2rem; }
body.lv-app #revealButton > svg { width: 1.9rem; height: 1.9rem; }
body.lv-app #activeSongView .media-control-btn { width: 3rem; height: 3rem; border-radius: 50%; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: #dbe2f0; }
body.lv-app #activeSongView .media-control-btn svg { width: 1.15rem; height: 1.15rem; }

body.lv-app #playlistNav { max-width: 22rem; margin-inline: auto; }
body.lv-app #changePlaylistButton { min-height: 2.6rem; padding: 0 1rem; border-radius: 999px; font-size: .82rem; font-weight: 700; text-transform: none; letter-spacing: 0; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); }
body.lv-app #playlistNav .btn-icon { width: 2.6rem; height: 2.6rem; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); }

/* Sentence case like the Studio (live.php's second .btn layer shouts). */
body.lv-app .btn { text-transform: none; letter-spacing: 0; }

/* Panel tabs (sheet head on phones, panel head on desktop) ------------------- */
body.lv-app .lv-panel { max-width: none; }
body.lv-app .lv-panel-card { border-radius: 1.75rem; padding: .35rem; }
body.lv-app .lv-sheet-head { display: flex; align-items: center; gap: .5rem; }
body.lv-app #secondaryTabsNav { flex: 1; margin: 0; background: rgba(0,0,0,.22); box-shadow: inset 0 1px 2px rgba(0,0,0,.35); border-color: rgba(255,255,255,.1); }
body.lv-app .secondary-tab-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.6rem; padding: .45rem .5rem; font-size: .85rem; font-weight: 600; color: #a5aec3; }
body.lv-app .secondary-tab-btn .lv-ico { width: 1rem; height: 1rem; }
/* Long labels ("Instellingen", "Einstellungen") must not push the close button off a phone. */
body.lv-app #secondaryTabsNav { min-width: 0; }
body.lv-app .secondary-tab-btn { min-width: 0; flex: 1 1 0; }
body.lv-app .secondary-tab-btn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 420px) { body.lv-app .secondary-tab-btn .lv-ico { display: none; } }
body.lv-app .secondary-tab-btn.active { color: #fff; font-weight: 700; }
body.lv-app .lv-sheet-grab, body.lv-app .lv-sheet-close, body.lv-app .lv-sheet-scrim { display: none; }
body.lv-app #secondaryTabsContent { padding: .75rem .5rem .5rem; }

/* Toasts sit above the game bar. */
body.lv-app #notificationArea { bottom: calc(var(--lv-dock-h) + 1.2rem + env(safe-area-inset-bottom)); }

/* Phones and tablets: game bar + bottom sheet -------------------------------- */
body.lv-app .lv-dock { display: none; }
@media (max-width: 1023.98px) {
    body.lv-app .lv-shell { padding-bottom: calc(var(--lv-dock-h) + 2rem + env(safe-area-inset-bottom)) !important; }
    body.lv-app footer.bf { padding-bottom: calc(var(--lv-dock-h) + 1rem + env(safe-area-inset-bottom)); }
    body.lv-app #installPromoNotification { bottom: calc(var(--lv-dock-h) + .8rem + env(safe-area-inset-bottom)); }

    body.lv-app .lv-dock {
        display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end;
        position: fixed; z-index: 45;
        left: max(.6rem, env(safe-area-inset-left)); right: max(.6rem, env(safe-area-inset-right));
        bottom: max(.5rem, env(safe-area-inset-bottom));
        max-width: 34rem; margin-inline: auto;
        padding: .4rem .35rem; border-radius: 1.6rem;
        border: 1px solid #ffffff2b; border-top-color: #ffffff45;
        background: var(--lv-glass), rgba(21,27,46,.66);
        backdrop-filter: blur(26px) saturate(180%) brightness(1.06);
        -webkit-backdrop-filter: blur(26px) saturate(180%) brightness(1.06);
        box-shadow: var(--lv-spec), 0 10px 30px #0006;
        transition: transform .45s var(--lv-spring), opacity .25s;
    }
    body.lv-app .lv-dock-btn {
        position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .28rem;
        min-height: 3.2rem; padding: .2rem .1rem; border: 0; border-radius: 1.1rem; background: none;
        color: #b7bfd3; font-size: .64rem; font-weight: 600; line-height: 1.1; cursor: pointer;
        transition: color .2s, background-color .2s, transform .35s var(--lv-spring);
    }
    body.lv-app .lv-dock-btn span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    body.lv-app .lv-dock-btn:active { transform: scale(.92); }
    body.lv-app .lv-dock-btn.is-active { color: #fff; background: rgba(255,255,255,.09); }
    body.lv-app .lv-dock-btn.is-armed { color: #fda4af; background: rgba(244,63,94,.12); }
    body.lv-app .lv-dock-dot { position: absolute; top: .4rem; left: calc(50% + .45rem); width: .5rem; height: .5rem; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 2px #182036; display: none; }
    body.lv-app.lv-session-live .lv-dock-dot { display: block; }
    body.lv-app .lv-dock-center { display: flex; flex-direction: column; align-items: center; gap: .28rem; }
    body.lv-app .lv-dock-main {
        width: 3.6rem; height: 3.6rem; margin-top: -1.35rem; border-radius: 50%; border: 0;
        display: grid; place-items: center; color: #fff; cursor: pointer;
        background: var(--lv-pink);
        box-shadow: inset 0 1px 0 #ffffff40, 0 8px 22px -4px rgba(182,80,197,.55), 0 0 0 4px #161c30;
        transition: transform .4s var(--lv-spring), opacity .2s, background .3s;
    }
    body.lv-app .lv-dock-main[data-mode="next"] { background: var(--lv-live); box-shadow: inset 0 1px 0 #ffffff40, 0 8px 22px -4px rgba(52,110,204,.6), 0 0 0 4px #161c30; }
    body.lv-app .lv-dock-main.is-current { box-shadow: inset 0 1px 0 #ffffff40, 0 0 0 4px #161c30, 0 0 0 6px rgba(103,232,249,.45); }
    body.lv-app .lv-dock-main:active { transform: scale(.92); }
    body.lv-app .lv-dock-main:disabled { opacity: .45; cursor: default; }
    body.lv-app .lv-dock-main .lv-ico { width: 1.5rem; height: 1.5rem; }
    body.lv-app .lv-dock-main[data-mode="next"] .lv-ico { fill: currentColor; }
    body.lv-app .lv-dock-main-ico { display: none; }
    body.lv-app .lv-dock-main:is([data-mode="scan"], [data-mode="scan-next"]) .lv-dock-main-scan,
    body.lv-app .lv-dock-main[data-mode="next"] .lv-dock-main-next { display: grid; }
    body.lv-app .lv-dock-main-caption { font-size: .64rem; font-weight: 700; color: #e2e8f0; white-space: nowrap; }

    /* Full-screen moments own the screen. */
    body.lv-app:has(#guessingModal:not(.my-hidden)) .lv-dock,
    body.lv-app:has(#displayModeModal:not(.my-hidden)) .lv-dock,
    body.lv-app:has(#feature210Modal:not([hidden])) .lv-dock { opacity: 0; pointer-events: none; transform: translateY(1rem); }

    /* The sheet. */
    body.lv-app .lv-panel {
        position: fixed; z-index: 48; left: 0; right: 0; bottom: 0;
        width: 100%; max-width: 40rem; margin: 0 auto !important;
        height: min(84dvh, 50rem);
        transform: translateY(calc(100% + 2rem)); visibility: hidden;
        transition: transform .5s var(--lv-spring), visibility 0s linear .5s;
    }
    body.lv-app .lv-panel.is-open { transform: translateY(var(--lv-drag, 0px)); visibility: visible; transition: transform .5s var(--lv-spring), visibility 0s; }
    body.lv-app .lv-panel.is-dragging { transition: none; }
    body.lv-app .lv-panel-card {
        height: 100%; display: flex; flex-direction: column;
        padding: 0 0 env(safe-area-inset-bottom); border-bottom: 0;
        border-radius: 1.75rem 1.75rem 0 0;
        background: var(--lv-glass), rgba(17,22,40,.94);
    }
    body.lv-app .lv-sheet-grab { display: flex; justify-content: center; padding: .55rem 0 .35rem; touch-action: none; cursor: grab; }
    body.lv-app .lv-sheet-grab span { width: 2.6rem; height: .3rem; border-radius: 999px; background: rgba(255,255,255,.28); }
    body.lv-app .lv-sheet-head { padding: 0 .65rem .55rem; touch-action: none; }
    body.lv-app .lv-sheet-close {
        display: grid; place-items: center; flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%;
        background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #fff; cursor: pointer;
    }
    body.lv-app .lv-sheet-close .lv-ico { width: 1.1rem; height: 1.1rem; }
    body.lv-app #secondaryTabsContent { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: .35rem .75rem 1.75rem; }
    body.lv-app .lv-sheet-scrim {
        display: block; position: fixed; inset: 0; z-index: 47;
        background: rgba(4,6,14,.55); opacity: 0; transition: opacity .3s ease;
        backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    }
    body.lv-app .lv-sheet-scrim[hidden] { display: none; }
    body.lv-app .lv-sheet-scrim.is-on { opacity: 1; }
    body.lv-app.lv-sheet-open .lv-dock { opacity: 0; pointer-events: none; transform: translateY(1rem); }

    /* On the stage the bar owns Next and Scan next. */
    body.lv-app #nextSongButton, body.lv-app #qrNav { display: none !important; }
    body.lv-app #playlistNav:not(.my-hidden) { display: flex; justify-content: center; }
    body.lv-app #changePlaylistButton { flex: 0 1 auto; }
}

@media (max-width: 380px) {
    body.lv-app .lv-sources { gap: .6rem; }
    body.lv-app .lv-source:not(.lv-source--instant) { padding: .85rem .8rem .95rem; }
    body.lv-app .lv-source-art { height: 5.4rem; }
    body.lv-app :is(.lv-real-card, .lv-src-sleeve) { width: 4.3rem; }
    body.lv-app .lv-src-record { width: 4rem; height: 4rem; }
    body.lv-app .lv-scan-frame { width: 4.9rem; height: 4.9rem; margin-left: -3.75rem; }
    body.lv-app .lv-source h3 { font-size: 1.02rem; }
    body.lv-app #playPauseButton, body.lv-app #revealButton { width: 5rem; height: 5rem; }
    body.lv-app .lv-continue { flex-wrap: wrap; }
    body.lv-app .lv-continue-btn { width: 100%; justify-content: center; }
}

/* Short phones (landscape or small): the card gives way to the controls. */
@media (max-height: 700px) and (max-width: 1023.98px) {
    body.lv-app #activeSongView .flip-card { --lv-card: min(70vw, 34dvh, 18rem); }
}

/* Desktop: stage + panel side by side ---------------------------------------- */
@media (min-width: 1024px) {
    body.lv-app .lv-shell {
        display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(22rem, 25rem);
        column-gap: 1.75rem; align-items: start;
        max-width: 78rem; padding-top: .5rem;
    }
    body.lv-app .lv-main { max-width: 44rem; }
    body.lv-app .lv-panel {
        position: sticky; top: calc(64px + 1rem);
        margin: .75rem 0 0 !important; width: 100%;
        max-height: calc(100dvh - 64px - 2rem);
        display: flex;
    }
    body.lv-app .lv-panel-card { display: flex; flex-direction: column; width: 100%; max-height: 100%; }
    body.lv-app #secondaryTabsContent { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
    body.lv-app #faq { grid-column: 1 / -1; }
    /* The session code was sized for a full-width page; the panel is ~25rem. */
    body.lv-app .lv-panel .mp-session-code { font-size: clamp(1.6rem, 2.6vw, 2.25rem); letter-spacing: .08em; }
}

@media (prefers-reduced-motion: reduce) {
    body.lv-app .lv-scan-frame { animation: none; }
    body.lv-app .lv-source, body.lv-app .lv-continue { animation: none; }
    body.lv-app .lv-panel, body.lv-app .lv-panel.is-open { transition: visibility 0s; }
}

/* ==========================================================================
   Settings (phase 2): home list + section pages (js/live-settings.js)
   ========================================================================== */
body.lv-app .lv-settings { padding: .1rem .1rem .5rem; }
body.lv-app .lv-settings [hidden] { display: none !important; }

/* Account sync card */
body.lv-app .lv-sync {
    display: flex; align-items: center; gap: .8rem; margin-bottom: .9rem;
    padding: .85rem .9rem; border-radius: 1.25rem;
    background: linear-gradient(115deg, rgba(8,126,152,.22), rgba(52,110,204,.14)), rgba(16,22,40,.6);
    border: 1px solid rgba(103,232,249,.28);
}
body.lv-app .lv-sync[data-sync="off"] { background: linear-gradient(115deg, rgba(202,67,142,.2), rgba(128,84,212,.14)), rgba(16,22,40,.6); border-color: rgba(244,114,182,.3); }
body.lv-app .lv-sync-ico { width: 2.6rem; height: 2.6rem; border-radius: .85rem; display: grid; place-items: center; flex: none; color: #fff; background: var(--lv-live); box-shadow: inset 0 1px 0 #ffffff40; }
body.lv-app .lv-sync[data-sync="off"] .lv-sync-ico { background: var(--lv-pink); }
body.lv-app .lv-sync-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
body.lv-app .lv-sync-copy strong { font-size: .92rem; color: #fff; line-height: 1.25; }
body.lv-app .lv-sync-copy small { font-size: .74rem; color: #c4cbe0; line-height: 1.35; }
body.lv-app .lv-sync-status { display: inline-flex; align-items: center; gap: .35rem; margin-top: .25rem; font-size: .7rem; font-weight: 700; color: #6ee7b7; }
body.lv-app .lv-sync-status::before { content: ''; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; flex: none; }
body.lv-app .lv-sync[data-state="saving"] .lv-sync-status, body.lv-app .lv-sync[data-state="pending"] .lv-sync-status { color: #fcd34d; }
body.lv-app .lv-sync[data-state="error"] .lv-sync-status { color: #fda4af; font-weight: 600; }
body.lv-app .lv-sync-btn { flex: none; min-height: 2.6rem; padding: 0 1rem; border-radius: 999px; border: 0; background: #fff; color: #1d1233; font-weight: 800; font-size: .82rem; cursor: pointer; }

/* Rows (home list and Help page) */
body.lv-app .lv-set-list { display: flex; flex-direction: column; gap: .45rem; }
body.lv-app .lv-set-row {
    width: 100%; display: flex; align-items: center; gap: .8rem;
    min-height: 4rem; padding: .7rem .75rem; border-radius: 1.15rem;
    background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08);
    color: #fff; text-align: left; text-decoration: none; cursor: pointer;
    transition: background-color .2s, transform .35s var(--lv-spring);
}
body.lv-app .lv-set-row:hover { background: rgba(255,255,255,.08); }
body.lv-app .lv-set-row:active { transform: scale(.98); }
body.lv-app .lv-set-row:focus-visible, body.lv-app .lv-src-tile:focus-visible, body.lv-app .lv-set-back:focus-visible { outline: 2px solid #67e8f9; outline-offset: 2px; }
body.lv-app .lv-set-ico { width: 2.5rem; height: 2.5rem; border-radius: .8rem; display: grid; place-items: center; flex: none; color: #fff; }
body.lv-app .lv-set-ico .lv-ico { width: 1.2rem; height: 1.2rem; }
body.lv-app .lv-set-ico--game { background: linear-gradient(135deg, #f472b6, #a855f7); }
body.lv-app .lv-set-ico--music { background: linear-gradient(135deg, #22d3ee, #3b82f6); }
body.lv-app .lv-set-ico--look { background: linear-gradient(135deg, #fbbf24, #f97316); }
body.lv-app .lv-set-ico--screen { background: linear-gradient(135deg, #34d399, #0ea5e9); }
body.lv-app .lv-set-ico--cast { background: linear-gradient(135deg, #818cf8, #6366f1); }
body.lv-app .lv-set-ico--help { background: linear-gradient(135deg, #94a3b8, #64748b); }
body.lv-app .lv-set-ico--danger { background: rgba(244,63,94,.18); color: #fda4af; border: 1px solid rgba(244,63,94,.3); }
body.lv-app .lv-set-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
body.lv-app .lv-set-copy strong { font-size: .95rem; font-weight: 700; line-height: 1.25; }
body.lv-app .lv-set-copy small { font-size: .74rem; color: var(--lv-muted); line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
body.lv-app .lv-set-go { flex: none; color: #8d97ad; display: grid; place-items: center; }
body.lv-app .lv-set-go .lv-ico { width: 1.05rem; height: 1.05rem; }
body.lv-app .lv-set-thumbs { display: flex; flex: none; }
body.lv-app .lv-set-thumbs img { width: 1.9rem; height: 1.9rem; border-radius: .45rem; object-fit: cover; border: 2px solid #1a2035; margin-left: -.65rem; box-shadow: 0 4px 10px rgba(0,0,0,.4); }
body.lv-app .lv-set-thumbs img:first-child { margin-left: 0; }
body.lv-app .lv-set-row--danger strong { color: #fda4af; }

/* Section pages */
body.lv-app .lv-set-page { animation: lv-page-in .38s var(--lv-spring) both; }
@keyframes lv-page-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
body.lv-app .lv-set-page-head { display: flex; align-items: center; gap: .5rem; margin: -.1rem 0 .8rem; min-height: 2.6rem; }
body.lv-app .lv-set-back {
    display: inline-flex; align-items: center; gap: .15rem; flex: none;
    min-height: 2.5rem; padding: 0 .7rem 0 .4rem; border-radius: 999px; cursor: pointer;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: #dbe2f0; font-size: .8rem; font-weight: 700;
}
body.lv-app .lv-set-back .lv-ico { width: 1.1rem; height: 1.1rem; }
body.lv-app .lv-set-page-head h4 { flex: 1; min-width: 0; margin: 0; padding-right: .5rem; text-align: right; font-size: 1.02rem; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; outline: none; }
body.lv-app .lv-set-note { display: flex; align-items: center; gap: .4rem; margin: 0 0 .75rem; font-size: .74rem; color: #6ee7b7; }
body.lv-app .lv-set-note .lv-ico { width: .95rem; height: .95rem; flex: none; }
body.lv-app .lv-set-block { margin-bottom: 1.25rem; }
body.lv-app .lv-set-h { margin: 0 0 .25rem; font-size: .86rem; font-weight: 700; color: #e2e8f0; }
body.lv-app .lv-set-sub { margin: 0 0 .75rem; font-size: .8rem; line-height: 1.45; color: var(--lv-muted); }
body.lv-app .lv-set-page .settings-group { margin: 0 0 .6rem; padding: .9rem; border-radius: 1.15rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); box-shadow: none; }
body.lv-app .lv-set-page .settings-group h5 { display: none; }
/* The page title says it; drop the old group headings and the pulsing NEW badge. */
body.lv-app [data-lv-set-page="game"] .settings-group > .flex.items-center.mb-1,
body.lv-app [data-lv-set-page="game"] .settings-group > p:first-of-type { display: none; }
body.lv-app [data-lv-set-page="look"] .settings-group > .flex.items-center.justify-between.mb-3 { display: none; }
/* The page scrolls already; the grid no longer needs its own scroll box. */
body.lv-app [data-lv-set-page="look"] .design-grid-container { max-height: none; overflow: visible; padding-bottom: 4px; }
body.lv-app .lv-set-link { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .75rem; padding: .75rem .85rem; border-radius: 1rem; background: rgba(255,255,255,.035); border: 1px dashed rgba(255,255,255,.14); font-size: .78rem; color: var(--lv-muted); }
body.lv-app .lv-set-link-btn { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.4rem; padding: 0 .85rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08); color: #fff; font-weight: 700; font-size: .78rem; cursor: pointer; }
body.lv-app .lv-set-link-btn .lv-ico { width: .95rem; height: .95rem; }

/* Streaming source picker */
body.lv-app .lv-src-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-bottom: .75rem; }
body.lv-app .lv-src-tile {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .2rem;
    min-height: 7.6rem; padding: .8rem .75rem; border-radius: 1.15rem; cursor: pointer; text-align: left; color: #fff;
    background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1);
    transition: border-color .2s, background-color .2s, transform .35s var(--lv-spring), box-shadow .2s;
}
body.lv-app .lv-src-tile:active { transform: scale(.97); }
body.lv-app .lv-src-tile strong { font-size: .84rem; font-weight: 800; line-height: 1.2; margin-top: .35rem; }
body.lv-app .lv-src-tile small { font-size: .7rem; color: var(--lv-muted); line-height: 1.3; }
body.lv-app .lv-src-tile.is-viewing { border-color: rgba(103,232,249,.55); background: rgba(103,232,249,.06); box-shadow: 0 0 0 1px rgba(103,232,249,.35); }
body.lv-app .lv-src-logo { width: 2.2rem; height: 2.2rem; border-radius: .7rem; display: grid; place-items: center; font-size: 1.1rem; }
body.lv-app .lv-src-logo--yt { background: rgba(239,68,68,.16); color: #f87171; border: 1px solid rgba(239,68,68,.3); }
body.lv-app .lv-src-logo--sp { background: rgba(29,185,84,.16); color: #1DB954; border: 1px solid rgba(29,185,84,.3); }
body.lv-app .lv-src-logo--td { background: #000; color: #fff; border: 1px solid rgba(255,255,255,.18); }
body.lv-app .lv-src-logo--spa { background: #000; color: #1DB954; border: 1px solid rgba(29,185,84,.5); box-shadow: 0 0 10px rgba(29,185,84,.25); }
body.lv-app .lv-src-badge { margin-top: auto; padding: .12rem .5rem; border-radius: 999px; font-size: .68rem; font-weight: 700; color: #dbe2f0; background: rgba(255,255,255,.09); }
body.lv-app .lv-src-badge--gold { color: #fde68a; background: rgba(245,158,11,.14); }
body.lv-app .lv-src-check { position: absolute; top: .6rem; right: .6rem; width: 1.45rem; height: 1.45rem; border-radius: 50%; display: grid; place-items: center; color: #0c1020; background: #6ee7b7; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .35s var(--lv-bounce); }
body.lv-app .lv-src-check .lv-ico { width: .85rem; height: .85rem; stroke-width: 3; }
body.lv-app .lv-src-tile.is-active .lv-src-check { opacity: 1; transform: none; }
body.lv-app .lv-src-detail .settings-group { padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important; }
body.lv-app .lv-src-detail .spotify-header { display: none !important; }
body.lv-app .lv-src-detail .spotify-glass-card { border-radius: 1.1rem; overflow: hidden; }
body.lv-app .lv-src-detail .spotify-content-wrapper { max-height: none !important; opacity: 1 !important; }
body.lv-app .lv-src-detail .spotify-content-wrapper > div { background: rgba(0,0,0,.22); }

/* TV page */
body.lv-app .lv-tv-hero { text-align: center; padding: .25rem .25rem 1rem; }
body.lv-app .lv-tv-hero .lv-set-sub { max-width: 24rem; margin-inline: auto; }
body.lv-app .lv-tv-art { position: relative; width: 13rem; height: 8.2rem; margin: .25rem auto 1rem; perspective: 600px; }
body.lv-app .lv-tv-screen { position: absolute; left: 0; top: 0; width: 11rem; height: 6.6rem; border-radius: .7rem; background: #0b0f1d; border: 3px solid #334155; box-shadow: 0 14px 30px -12px rgba(0,0,0,.8); display: flex; align-items: center; justify-content: center; gap: .9rem; }
body.lv-app .lv-tv-card { width: 3.3rem; height: 3.3rem; border-radius: .5rem; background: #161236 url('/img/landing/neon-2.webp') center / cover no-repeat; box-shadow: 0 10px 20px -8px rgba(0,0,0,.8); animation: lv-tv-flip 3.2s ease-in-out infinite; }
@keyframes lv-tv-flip { 0%, 40% { transform: rotateY(0); } 50%, 90% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
body.lv-app .lv-tv-bars { display: flex; flex-direction: column; gap: .3rem; }
body.lv-app .lv-tv-bars i { display: block; height: .32rem; border-radius: 99px; background: rgba(255,255,255,.25); }
body.lv-app .lv-tv-bars i:nth-child(1) { width: 3.4rem; background: #6ee7b7; }
body.lv-app .lv-tv-bars i:nth-child(2) { width: 2.6rem; }
body.lv-app .lv-tv-bars i:nth-child(3) { width: 1.9rem; }
body.lv-app .lv-tv-stand { position: absolute; left: 4.3rem; top: 6.6rem; width: 2.4rem; height: .6rem; border-radius: 0 0 .4rem .4rem; background: #334155; }
body.lv-app .lv-tv-phone { position: absolute; right: 0; bottom: 0; width: 2.9rem; height: 5rem; border-radius: .6rem; background: #0f172a; border: 2px solid #64748b; box-shadow: 0 10px 22px -8px rgba(0,0,0,.8); display: grid; place-items: center; }
body.lv-app .lv-tv-phone span { width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--lv-pink); }
body.lv-app .lv-tv-wave { position: absolute; right: 2.4rem; bottom: 4rem; width: 1.6rem; height: 1.6rem; border: 2px solid transparent; border-top-color: #67e8f9; border-right-color: #67e8f9; border-radius: 50%; transform: rotate(-60deg); animation: lv-wave 1.8s ease-out infinite; }
@keyframes lv-wave { 0% { opacity: 0; transform: rotate(-60deg) scale(.6); } 50% { opacity: 1; } 100% { opacity: 0; transform: rotate(-60deg) scale(1.3); } }
body.lv-app .lv-set-cta { display: inline-flex; align-items: center; gap: .45rem; min-height: 3rem; padding: 0 1.3rem; border-radius: 999px; border: 0; background: var(--lv-pink); color: #fff; font-weight: 800; font-size: .9rem; cursor: pointer; box-shadow: inset 0 1px 0 #ffffff40, 0 10px 24px -10px rgba(202,67,142,.9); }
body.lv-app .lv-set-cta .lv-ico { width: 1.1rem; height: 1.1rem; }
body.lv-app .lv-tv-ways { display: flex; flex-direction: column; gap: .45rem; margin-bottom: 1rem; }
body.lv-app .lv-tv-way { display: flex; align-items: center; gap: .75rem; padding: .7rem .75rem; border-radius: 1.1rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
body.lv-app .lv-tv-way > span:last-child { display: flex; flex-direction: column; gap: .1rem; }
body.lv-app .lv-tv-way strong { font-size: .88rem; color: #fff; }
body.lv-app .lv-tv-way small { font-size: .74rem; color: var(--lv-muted); line-height: 1.35; }
body.lv-app [data-lv-set-page="screen"] #installAppContainer .glass-effect { background: rgba(255,255,255,.04); border-radius: 1.1rem; }

@media (prefers-reduced-motion: reduce) {
    body.lv-app .lv-tv-card, body.lv-app .lv-tv-wave, body.lv-app .lv-set-page { animation: none; }
}

/* ==========================================================================
   Onboarding (phase 3): the setup wizard's pictures (live.php #onboardingWizard)
   ========================================================================== */
body.lv-app .lv-ob-kicker { margin: 0 0 .7rem; font-size: .9rem; font-weight: 700; color: #e2e8f0; }
body.lv-app #onboardingWizard.is-detour #wizBtnSkip { display: none; }

/* Welcome: how a round works */
body.lv-app .lv-ob-round { padding: 1.05rem; }
body.lv-app .lv-ob-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
body.lv-app .lv-ob-step { display: flex; align-items: center; gap: .9rem; padding: .6rem; border-radius: 1.1rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
body.lv-app .lv-ob-step-copy { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
body.lv-app .lv-ob-step-copy strong { display: flex; align-items: center; gap: .45rem; font-size: .98rem; color: #fff; }
body.lv-app .lv-ob-step-copy strong span { width: 1.35rem; height: 1.35rem; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: .72rem; font-weight: 800; color: #fff; background: rgba(255,255,255,.14); }
body.lv-app .lv-ob-step-copy small { font-size: .8rem; line-height: 1.4; color: var(--lv-muted); }
body.lv-app .lv-ob-scene { position: relative; flex: none; width: 5.6rem; height: 5.6rem; border-radius: .95rem; background: #0a0d19; border: 1px solid rgba(255,255,255,.08); overflow: hidden; display: grid; place-items: center; }
body.lv-app .lv-ob-note { display: flex; align-items: flex-start; gap: .45rem; margin: .85rem 0 0; font-size: .8rem; line-height: 1.45; color: #aab3c8; }
body.lv-app .lv-ob-note .lv-ico { width: 1rem; height: 1rem; flex: none; margin-top: .1rem; }
/* a QR-looking pattern; it encodes nothing */
body.lv-app .lv-ob-qr { display: block; width: 46%; aspect-ratio: 1; margin-bottom: 8%; background: url('/img/landing/qr.svg') center / contain no-repeat; }
body.lv-app .lv-ob-card { width: 3.6rem; height: 3.6rem; border-radius: .55rem; display: grid; place-items: center; background: #161236 url('/img/landing/neon-2.webp') center / cover no-repeat; box-shadow: 0 10px 18px -8px rgba(0,0,0,.9); }
body.lv-app .lv-ob-beam { position: absolute; left: 14%; right: 14%; top: 18%; height: 2px; border-radius: 2px; background: rgba(255,255,255,.85); animation: lv-ob-beam 2.2s ease-in-out infinite; }
@keyframes lv-ob-beam { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3.4rem); } }
body.lv-app .lv-ob-scene--listen { align-content: center; gap: 1.35rem; }
body.lv-app .lv-ob-eq { display: flex; align-items: flex-end; gap: .2rem; height: 1.6rem; }
body.lv-app .lv-ob-eq i { width: .32rem; height: 100%; border-radius: 99px; background: #fff; transform-origin: bottom; animation: lv-ob-eq 1s ease-in-out infinite; }
body.lv-app .lv-ob-eq i:nth-child(2) { animation-delay: -.3s; } body.lv-app .lv-ob-eq i:nth-child(3) { animation-delay: -.6s; }
body.lv-app .lv-ob-eq i:nth-child(4) { animation-delay: -.15s; } body.lv-app .lv-ob-eq i:nth-child(5) { animation-delay: -.45s; }
@keyframes lv-ob-eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
body.lv-app .lv-ob-slider { position: relative; width: 4.2rem; height: .3rem; border-radius: 99px; background: rgba(255,255,255,.2); }
body.lv-app .lv-ob-slider i { position: absolute; top: 50%; width: .8rem; height: .8rem; margin: -.4rem 0 0 -.4rem; border-radius: 50%; background: #fff; animation: lv-ob-slide 3s ease-in-out infinite; }
body.lv-app .lv-ob-slider b { position: absolute; left: 50%; top: -1.25rem; transform: translateX(-50%); font-size: .66rem; font-weight: 800; color: #fff; }
@keyframes lv-ob-slide { 0%, 100% { left: 15%; } 50% { left: 70%; } }
body.lv-app .lv-ob-scene--reveal { perspective: 400px; }
body.lv-app .lv-ob-flip { position: relative; width: 3.5rem; height: 3.5rem; transform-style: preserve-3d; animation: lv-ob-flip 3.6s ease-in-out infinite; }
body.lv-app .lv-ob-flip-front, body.lv-app .lv-ob-flip-back { position: absolute; inset: 0; border-radius: .6rem; display: grid; place-items: center; backface-visibility: hidden; }
body.lv-app .lv-ob-flip-front { background: #161236 url('/img/landing/neon-2.webp') center / cover no-repeat; }
body.lv-app .lv-ob-flip-back { transform: rotateY(180deg); background: #161236 url('/img/landing/neon-2.webp') center / cover no-repeat; align-content: center; gap: 0; }
body.lv-app .lv-ob-flip-back b { font-size: 1rem; font-weight: 900; color: #fff; line-height: 1; }
body.lv-app .lv-ob-flip-back small { font-size: .55rem; color: #fff; opacity: .8; }
@keyframes lv-ob-flip { 0%, 30% { transform: rotateY(0); } 45%, 85% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
body.lv-app .lv-ob-point { position: absolute; right: .35rem; top: .3rem; padding: .05rem .35rem; border-radius: 99px; font-size: .62rem; font-weight: 900; color: #052e16; background: #6ee7b7; animation: lv-ob-point 3.6s ease-in-out infinite; }
@keyframes lv-ob-point { 0%, 45% { opacity: 0; transform: scale(.5) translateY(.3rem); } 55%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@media (min-width: 768px) {
    body.lv-app .lv-ob-steps { grid-template-columns: repeat(3, 1fr); }
    body.lv-app .lv-ob-step { flex-direction: column; align-items: stretch; text-align: left; }
    body.lv-app .lv-ob-scene { width: 100%; height: 7rem; }
}

/* Scoring choices: a picture of each way to play */
body.lv-app .lv-ob-art { position: relative; display: block; height: 4.2rem; margin: -.1rem 2.2rem .75rem 0; border-radius: .85rem; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.06); overflow: hidden; }
body.lv-app .lv-ob-art i { position: absolute; display: block; font-style: normal; }
body.lv-app .lv-ob-art-phone { width: 1.55rem; height: 2.7rem; top: .7rem; border-radius: .38rem; border: 2px solid #475569; background: #0f172a; }
body.lv-app .lv-ob-art--offline .lv-ob-art-phone::after { content: ''; position: absolute; left: 50%; top: 50%; width: .55rem; height: .55rem; margin: -.275rem; border-radius: 50%; background: #f472b6; }
body.lv-app .lv-ob-art--together .lv-ob-art-qr { left: .8rem; top: .55rem; width: 3rem; height: 3rem; border-radius: .4rem; background: #161236 url('/img/landing/neon-1.webp') center / cover no-repeat; box-shadow: 0 8px 16px -8px rgba(0,0,0,.9); }
body.lv-app .lv-ob-art--together .lv-ob-art-qr img { position: absolute; left: 50%; top: 46%; width: 50%; height: auto; translate: -50% -50%; }
/* each phone shows the player's colour + initial, as on the real player app */
body.lv-app .lv-ob-art--together .lv-ob-art-phone {
    display: grid; place-items: center; font-size: .62rem; font-weight: 900; color: #0c1020; line-height: 1;
    background: radial-gradient(circle, hsl(var(--h, 280) 80% 72%) 0 .5rem, transparent .52rem), #0f172a;
    animation: lv-ob-join 4s ease-in-out infinite;
}
body.lv-app .lv-ob-art--together .lv-ob-art-phone:nth-of-type(2) { left: 4.6rem; }
body.lv-app .lv-ob-art--together .lv-ob-art-phone:nth-of-type(3) { left: 6.5rem; animation-delay: .35s; }
body.lv-app .lv-ob-art--together .lv-ob-art-phone:nth-of-type(4) { left: 8.4rem; animation-delay: .7s; }
body.lv-app .lv-ob-art--together .lv-ob-art-phone:nth-of-type(5) { left: 10.3rem; animation-delay: 1.05s; }
@keyframes lv-ob-join { 0%, 12% { opacity: 0; transform: translateY(.7rem); } 26%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
body.lv-app .lv-ob-art--offline .lv-ob-art-phone { left: 1rem; animation: lv-ob-pass 3s ease-in-out infinite; }
@keyframes lv-ob-pass { 0%, 15% { left: 1rem; transform: rotate(-8deg); } 45%, 60% { left: calc(100% - 2.6rem); transform: rotate(8deg); } 90%, 100% { left: 1rem; transform: rotate(-8deg); } }
body.lv-app .lv-ob-art--offline::after { content: ''; position: absolute; left: 2.8rem; right: 2.8rem; top: 50%; border-top: 2px dashed rgba(255,255,255,.18); }
body.lv-app .lv-ob-art--none .lv-ob-art-card { left: 50%; top: .6rem; width: 2.9rem; height: 2.9rem; margin-left: -1.45rem; border-radius: .4rem; background: #161236 url('/img/landing/neon-3.webp') center / cover no-repeat; animation: lv-ob-flip 3.6s ease-in-out infinite; }

/* Ready page: what is set, with a picture and a Change button */
body.lv-app .lv-ob-setup { display: grid; gap: .55rem; margin-bottom: 1rem; }
body.lv-app .lv-ob-tile { display: flex; align-items: center; gap: .8rem; width: 100%; min-height: 4.4rem; padding: .7rem .75rem; border-radius: 1.15rem; text-align: left; color: #fff; cursor: pointer; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); transition: background-color .2s, transform .35s var(--lv-spring); }
body.lv-app .lv-ob-tile:hover { background: rgba(255,255,255,.08); }
body.lv-app .lv-ob-tile:active { transform: scale(.98); }
body.lv-app .lv-ob-tile-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
body.lv-app .lv-ob-tile-copy small { font-size: .74rem; font-weight: 600; color: #9aa4ba; }
body.lv-app .lv-ob-tile-copy strong { font-size: .95rem; line-height: 1.25; }
body.lv-app .lv-ob-tile-copy > span { font-size: .74rem; color: var(--lv-muted); line-height: 1.35; }
body.lv-app .lv-ob-change { flex: none; padding: .4rem .75rem; border-radius: 999px; font-size: .74rem; font-weight: 800; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.15); }
body.lv-app .lv-ob-hint { margin: .2rem 0 0; font-size: .76rem; color: var(--lv-muted); text-align: center; }
body.lv-app .lv-ob-tile-art { position: relative; flex: none; width: 3.2rem; height: 3.2rem; border-radius: .9rem; display: grid; place-items: center; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.1); font-size: 1.35rem; }
body.lv-app .lv-ob-tile-art--source > * { display: none; }
body.lv-app .lv-ob-tile-art--source[data-source="youtube"] .lv-ob-src-yt { display: block; color: #f87171; }
body.lv-app .lv-ob-tile-art--source:is([data-source="spotify_basic"], [data-source="spotify_adv"]) .lv-ob-src-sp { display: block; color: #1DB954; }
body.lv-app .lv-ob-tile-art--source[data-source="tidal"] { background: #000; }
body.lv-app .lv-ob-tile-art--source[data-source="tidal"] .lv-ob-src-td { display: block; color: #fff; }
body.lv-app .lv-ob-tile-art--cards i { position: absolute; width: 1.7rem; height: 1.7rem; border-radius: .35rem; background: #161236 url('/img/landing/neon-1.webp') center / cover no-repeat; border: 2px solid #1a2035; }
body.lv-app .lv-ob-tile-art--cards i:nth-child(1) { transform: translate(-.6rem, -.35rem) rotate(-10deg); }
body.lv-app .lv-ob-tile-art--cards i:nth-child(2) { transform: translate(.55rem, -.3rem) rotate(9deg); background-image: url('/img/landing/neon-4.webp'); }
body.lv-app .lv-ob-tile-art--cards i:nth-child(3) { transform: translate(0, .45rem); background-image: url('/img/landing/neon-2.webp'); }
body.lv-app .lv-ob-tile-art--cards.has-pics i { background-color: #1a2035; }
body.lv-app .lv-ob-timeline { position: relative; width: 2.4rem; height: .45rem; border-radius: 99px; background: rgba(255,255,255,.16); }
body.lv-app .lv-ob-timeline i { position: absolute; top: 0; bottom: 0; border-radius: 99px; background: #ec4899; transition: left .4s, width .4s; }
body.lv-app .lv-ob-timeline i.is-full { background: rgba(255,255,255,.45); box-shadow: none; }
body.lv-app .lv-ob-tile-art--score .lv-ico { display: none; width: 1.4rem; height: 1.4rem; }
body.lv-app .lv-ob-tile-art--score[data-mode="together"] { background: var(--lv-live); }
body.lv-app .lv-ob-tile-art--score[data-mode="together"] .lv-ico:nth-child(1),
body.lv-app .lv-ob-tile-art--score[data-mode="offline"] .lv-ico:nth-child(2),
body.lv-app .lv-ob-tile-art--score[data-mode="none"] .lv-ico:nth-child(3) { display: block; }
@media (min-width: 768px) { body.lv-app .lv-ob-setup { grid-template-columns: 1fr 1fr; } body.lv-app .lv-ob-hint, body.lv-app .lv-ob-setup .lv-ob-kicker { grid-column: 1 / -1; } }

@media (prefers-reduced-motion: reduce) {
    body.lv-app :is(.lv-ob-beam, .lv-ob-eq i, .lv-ob-slider i, .lv-ob-flip, .lv-ob-point, .lv-ob-art-phone, .lv-ob-art-card) { animation: none; }
}

/* In-game tips (js/live-tour.js) */
body.lv-app .lv-tip {
    position: fixed; z-index: 46; left: 50%; bottom: calc(var(--lv-dock-h) + 1.4rem + env(safe-area-inset-bottom));
    width: min(26rem, calc(100vw - 1.5rem)); transform: translate(-50%, 1rem); opacity: 0;
    display: flex; align-items: flex-start; gap: .7rem; padding: .8rem .85rem; border-radius: 1.3rem;
    background: var(--lv-glass), rgba(22,28,48,.94); border: 1px solid rgba(255,255,255,.2); border-top-color: rgba(255,255,255,.34);
    box-shadow: var(--lv-spec), 0 18px 40px -12px rgba(0,0,0,.8);
    backdrop-filter: blur(20px) saturate(170%); -webkit-backdrop-filter: blur(20px) saturate(170%);
    transition: transform .5s var(--lv-spring), opacity .25s;
}
body.lv-app .lv-tip.is-on { transform: translate(-50%, 0); opacity: 1; }
body.lv-app .lv-tip img { width: 3rem; height: 3rem; flex: none; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
body.lv-app .lv-tip p { margin: 0 0 .55rem; font-size: .84rem; line-height: 1.45; color: #e2e8f0; }
body.lv-app .lv-tip-actions { display: flex; gap: .45rem; flex-wrap: wrap; }
body.lv-app .lv-tip-actions button { min-height: 2.3rem; padding: 0 .85rem; border-radius: 999px; font-size: .78rem; font-weight: 800; cursor: pointer; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08); color: #fff; }
body.lv-app .lv-tip-actions .is-primary { border: 0; background: #fff; color: #1d1233; }
@media (min-width: 1024px) { body.lv-app .lv-tip { bottom: 1.5rem; left: auto; right: 1.5rem; transform: translateY(1rem); } body.lv-app .lv-tip.is-on { transform: none; } }

/* ==========================================================================
   Live Together (phase 4): invite screen, lobby row, stage strip
   (js/live-together-ui.js)
   ========================================================================== */
body.lv-app :is(.lv-invite-row, .lv-together-strip, .lv-invite)[hidden] { display: none !important; }
body.lv-app:not([data-lv-score="together"]) .lv-lt-rules { display: none; }

/* A player: a coloured initial, the same colour as on their phone. */
body.lv-app .lv-face { display: inline-grid; place-items: center; flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; font-size: .78rem; font-weight: 900; color: #0c1020; background: hsl(var(--h, 280) 80% 72%); box-shadow: 0 0 0 2px #151b2e; }
body.lv-app .lv-face.is-offline, body.lv-app .lv-face-card.is-offline .lv-face { filter: grayscale(1); opacity: .55; }

/* Lobby row */
body.lv-app .lv-invite-row {
    width: 100%; display: flex; align-items: center; gap: .8rem; margin-top: .6rem; padding: .8rem 3rem .8rem .9rem; position: relative;
    border-radius: 1.3rem; text-align: left; color: #fff; cursor: pointer;
    background: var(--lv-glass), rgba(16,22,40,.55);
    border: 1px solid var(--lv-rim); border-top-color: rgba(255,255,255,.3); box-shadow: var(--lv-spec), 0 26px 60px -34px rgba(0,0,0,.8);
    transition: transform .45s var(--lv-spring);
}
body.lv-app .lv-invite-row:active { transform: scale(.98); }
body.lv-app .lv-invite-row .lv-source-go { top: 50%; margin-top: -.95rem; }
body.lv-app .lv-invite-row-qr { width: 2.8rem; height: 2.8rem; border-radius: .55rem; flex: none; display: grid; place-items: center; background: #161236 url('/img/landing/neon-1.webp') center / cover; box-shadow: 0 8px 16px -8px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.12); }
body.lv-app .lv-invite-row-qr i { width: 52%; height: 52%; margin-bottom: 8%; background: url('/img/landing/qr.svg') center / contain no-repeat; }
body.lv-app .lv-invite-row-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
body.lv-app .lv-invite-row-copy strong { font-size: .98rem; }
body.lv-app .lv-invite-row-copy small { font-size: .76rem; color: #aab3c8; line-height: 1.35; }
body.lv-app .lv-invite-row-faces, body.lv-app .lv-together-strip-faces { display: flex; flex: none; }
body.lv-app :is(.lv-invite-row-faces, .lv-together-strip-faces) .lv-face { width: 1.6rem; height: 1.6rem; font-size: .66rem; margin-left: -.45rem; }
body.lv-app :is(.lv-invite-row-faces, .lv-together-strip-faces) .lv-face:first-child { margin-left: 0; }

/* Scores panel: show the room the code */
body.lv-app .lv-invite-show { display: flex; align-items: center; justify-content: center; gap: .45rem; width: 100%; min-height: 2.9rem; margin-top: .55rem; border-radius: 999px; border: 0; cursor: pointer; font-weight: 800; font-size: .88rem; color: #fff; background: var(--lv-live); box-shadow: inset 0 1px 0 #ffffff40; }
body.lv-app .lv-invite-show .lv-ico { width: 1.05rem; height: 1.05rem; }

/* Stage strip */
body.lv-app .lv-together-strip {
    display: flex; align-items: center; gap: .55rem; width: 100%; max-width: 22rem; margin: -.4rem auto .7rem; padding: .4rem .45rem .4rem .75rem;
    border-radius: 999px; cursor: pointer; color: #e0f7fc; text-align: left; font-size: .8rem; font-weight: 700;
    background: rgba(8,126,152,.2); border: 1px solid rgba(103,232,249,.3);
}
body.lv-app .lv-together-strip-dot { width: .55rem; height: .55rem; flex: none; border-radius: 50%; background: #67e8f9; }
body.lv-app .lv-together-strip.is-round .lv-together-strip-dot { background: #f472b6; animation: lv-pulse 1.6s ease-out infinite; }
body.lv-app .lv-together-strip-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Invite screen */
body.lv-app .lv-invite {
    position: fixed; inset: 0; z-index: 70; display: flex; align-items: stretch; justify-content: center;
    background: rgba(5,7,15,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    opacity: 0; transition: opacity .25s ease;
}
body.lv-app .lv-invite.is-open { opacity: 1; }
body.lv-app .lv-invite-card {
    position: relative; width: 100%; max-width: 46rem; overflow-y: auto; overscroll-behavior: contain;
    padding: calc(1rem + env(safe-area-inset-top)) 1.1rem calc(1rem + env(safe-area-inset-bottom));
    background: radial-gradient(ellipse 90% 45% at 50% -5%, rgba(126,74,216,.22), transparent 70%), #0b0f1d;
    display: flex; flex-direction: column; gap: 1rem;
    transform: translateY(1.5rem); transition: transform .5s var(--lv-spring);
}
body.lv-app .lv-invite.is-open .lv-invite-card { transform: none; }
body.lv-app .lv-invite-head { display: flex; align-items: center; justify-content: space-between; }
body.lv-app .lv-invite-logo { height: 1.7rem; width: auto; }
body.lv-app .lv-invite-close { width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
body.lv-app .lv-invite-title { margin: 0; font-size: clamp(1.8rem, 7vw, 2.6rem); font-weight: 900; letter-spacing: -.03em; line-height: 1.05; color: #fff; text-align: center; }
body.lv-app .lv-invite-lead { margin: -.5rem 0 0; text-align: center; font-size: .9rem; color: var(--lv-muted); }
body.lv-app .lv-invite-join { display: grid; gap: .9rem; justify-items: center; }
body.lv-app .lv-invite-qr { position: relative; display: grid; justify-items: center; gap: .45rem; padding: .8rem; border-radius: 1.4rem; background: #fff; box-shadow: 0 24px 50px -24px rgba(0,0,0,.9); }
body.lv-app .lv-invite-qr canvas { display: block; width: min(62vw, 15rem) !important; height: min(62vw, 15rem) !important; border-radius: .5rem; }
body.lv-app .lv-invite-qr-label { font-size: .82rem; font-weight: 700; color: #0c1020; }
body.lv-app .lv-invite-busy { position: absolute; inset: 0; border-radius: 1.4rem; display: grid; place-content: center; justify-items: center; gap: .6rem; background: rgba(255,255,255,.94); color: #0c1020; font-weight: 800; }
body.lv-app .lv-invite-busy[hidden] { display: none; }
body.lv-app .lv-invite-spinner { width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 4px solid #cbd5e1; border-top-color: #0c1020; animation: lv-spin .9s linear infinite; }
@keyframes lv-spin { to { transform: rotate(360deg); } }
body.lv-app .lv-invite-code-box { display: grid; justify-items: center; gap: .2rem; text-align: center; }
body.lv-app .lv-invite-code-box small { font-size: .8rem; color: var(--lv-muted); }
body.lv-app .lv-invite-code-box small b { color: #fff; }
body.lv-app .lv-invite-code-label { margin-top: .3rem; font-size: .8rem; font-weight: 600; color: #9aa4ba; }
body.lv-app .lv-invite-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: clamp(2.4rem, 12vw, 3.6rem); font-weight: 800; letter-spacing: .12em; color: #fff; line-height: 1; }
body.lv-app .lv-invite-actions { display: flex; gap: .5rem; margin-top: .55rem; }
body.lv-app .lv-invite-btn { min-height: 2.6rem; padding: 0 1rem; border-radius: 999px; cursor: pointer; font-weight: 800; font-size: .82rem; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); }
body.lv-app .lv-invite-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
body.lv-app .lv-invite-steps li { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: 1rem; font-size: .84rem; color: #dbe2f0; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); }
body.lv-app .lv-invite-steps span { width: 1.5rem; height: 1.5rem; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: .74rem; font-weight: 800; color: #fff; background: rgba(255,255,255,.14); }
body.lv-app .lv-invite-room { padding: .9rem; border-radius: 1.3rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
body.lv-app .lv-invite-room h3 { margin: 0 0 .7rem; font-size: .95rem; font-weight: 800; color: #fff; text-align: center; }
body.lv-app .lv-invite-faces { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; }
body.lv-app .lv-face-card { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .75rem .3rem .3rem; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); animation: lv-face-in .5s var(--lv-bounce) both; }
body.lv-app .lv-face-card b { font-size: .86rem; color: #fff; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes lv-face-in { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
body.lv-app .lv-invite-waiting { display: grid; justify-items: center; gap: .3rem; margin-top: .4rem; }
body.lv-app .lv-invite-waiting[hidden] { display: none; }
body.lv-app .lv-invite-waiting img { width: 4.2rem; height: 4.2rem; object-fit: contain; animation: lv-bob 2.4s ease-in-out infinite; filter: drop-shadow(0 10px 14px rgba(0,0,0,.5)); }
@keyframes lv-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-.35rem) rotate(3deg); } }
body.lv-app .lv-invite-dots { display: flex; gap: .3rem; }
body.lv-app .lv-invite-dots i { width: .45rem; height: .45rem; border-radius: 50%; background: #fff; animation: lv-dot 1.2s ease-in-out infinite; }
body.lv-app .lv-invite-dots i:nth-child(2) { animation-delay: .15s; } body.lv-app .lv-invite-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes lv-dot { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-.25rem); } }
body.lv-app .lv-invite-foot { position: sticky; bottom: 0; display: flex; gap: .6rem; align-items: center; margin-top: auto; padding-top: .6rem; background: linear-gradient(transparent, #0c1020 35%); }
body.lv-app .lv-invite-go { flex: 1; min-height: 3.2rem; border-radius: 999px; border: 0; cursor: pointer; font-size: 1rem; font-weight: 900; color: #fff; background: var(--lv-pink); box-shadow: inset 0 1px 0 #ffffff40, 0 12px 28px -12px rgba(202,67,142,.9); }
body.lv-app .lv-invite-end { flex: none; min-height: 3.2rem; padding: 0 1rem; border-radius: 999px; cursor: pointer; font-size: .82rem; font-weight: 800; color: #fda4af; background: rgba(244,63,94,.1); border: 1px solid rgba(244,63,94,.28); }
body.lv-app .lv-invite-end[hidden] { display: none; }
@media (min-width: 768px) {
    body.lv-app .lv-invite { align-items: center; padding: 2rem; }
    body.lv-app .lv-invite-card { max-height: calc(100dvh - 4rem); border-radius: 2rem; border: 1px solid rgba(255,255,255,.14); padding: 1.6rem 1.8rem; box-shadow: 0 40px 100px -30px rgba(0,0,0,.9); }
    body.lv-app .lv-invite-join { grid-template-columns: auto 1fr; align-items: center; }
    body.lv-app .lv-invite-code-box { justify-items: start; text-align: left; }
    body.lv-app .lv-invite-steps { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    body.lv-app :is(.lv-face-card, .lv-invite-waiting img, .lv-invite-dots i, .lv-together-strip-dot) { animation: none; }
}

/* Players' reactions floating up over the host's screen (js/live-together-ui.js) */
body.lv-app .lv-reactions { position: fixed; inset: 0; z-index: 75; pointer-events: none; overflow: hidden; }
body.lv-app .lv-reaction { position: absolute; left: var(--x); bottom: 12%; display: grid; justify-items: center; gap: .2rem; transform: translateX(-50%); animation: lv-react-float 3.2s cubic-bezier(.2,.7,.3,1) forwards; }
body.lv-app .lv-reaction b { font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1; filter: drop-shadow(0 8px 14px rgba(0,0,0,.55)); }
body.lv-app .lv-reaction small { padding: .12rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 900; color: #0c1020; background: hsl(var(--h, 280) 80% 72%); }
@keyframes lv-react-float { 0% { opacity: 0; transform: translate(-50%, 1rem) scale(.6); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -60vh) scale(.9) rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { body.lv-app .lv-reaction { animation-duration: 1.6s; } }

/* Bopstarr (phase 5) ------------------------------------------------------------
   Every Bopstarr is a <bopstarr-3d> holding its poster <img>. Until the element
   is defined (or when "Bopstarr animations" is off and it never is) the
   picture shows; once defined its shadow DOM takes over. */
body.lv-app bopstarr-3d { display: block; }
body.lv-app bopstarr-3d:not(:defined) img { display: block; width: 100%; height: 100%; object-fit: contain; }
body.lv-app .lv-dj-tap { cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* Lobby: the DJ beside the heading (phones keep the source tiles above the fold) */
body.lv-app .lv-lobby-head { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: .6rem; text-align: left; padding-top: .6rem; }
body.lv-app .lv-lobby-dj { grid-row: 1; width: clamp(5.4rem, 24vw, 8.5rem); aspect-ratio: 4 / 5; filter: drop-shadow(0 14px 18px rgba(31,8,60,.55)); }
body.lv-app .lv-lobby-h1 { align-items: flex-start; gap: .55rem; }
body.lv-app .lv-lobby-lead { grid-column: 1 / -1; margin: .55rem 0 0; max-width: none; }
@media (min-width: 768px) {
    body.lv-app .lv-lobby-head { grid-template-columns: auto auto; justify-content: center; column-gap: 1.2rem; }
    body.lv-app .lv-lobby-lead { text-align: center; margin: .6rem auto 0; max-width: 32rem; }
}

/* Wizard welcome: Bopstarr says hello */
body.lv-app .lv-ob-hello { display: flex; align-items: center; justify-content: center; gap: .55rem; margin: 0 auto .9rem; max-width: 26rem; }
body.lv-app .lv-ob-hello bopstarr-3d { width: 4.8rem; aspect-ratio: 4 / 5; flex: none; filter: drop-shadow(0 10px 14px rgba(31,8,60,.5)); }
body.lv-app .lv-ob-bubble {
    position: relative; margin: 0; padding: .65rem .85rem; border-radius: 1.1rem 1.1rem 1.1rem .35rem; text-align: left;
    font-size: .88rem; font-weight: 700; line-height: 1.35; color: #fff;
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

/* Invite screen: Bopstarr at the decks while the room fills */
body.lv-app .lv-invite-waiting bopstarr-3d { width: 6rem; aspect-ratio: 4 / 5; filter: drop-shadow(0 10px 14px rgba(0,0,0,.5)); }
body.lv-app .lv-invite-dj { margin: 0; max-width: 18rem; text-align: center; font-size: .8rem; color: var(--lv-muted); line-height: 1.4; }

/* Settings → Card look → Bopstarr animations */
body.lv-app .lv-set-mascot { display: flex; align-items: center; gap: .8rem; }
body.lv-app .lv-set-mascot bopstarr-3d { width: 3.4rem; aspect-ratio: 4 / 5; flex: none; }

/* Live Together reveal: who was closest, told by Bopstarr */
body.lv-app .lv-moment {
    position: fixed; z-index: 9500; left: 50%; bottom: calc(1.2rem + env(safe-area-inset-bottom));
    display: flex; align-items: center; gap: .55rem; width: max-content; max-width: min(26rem, calc(100vw - 2rem));
    padding: .45rem 1rem .45rem .45rem; border-radius: 1.4rem;
    background: var(--lv-glass, none), rgba(21,27,46,.86); border: 1px solid rgba(255,255,255,.2); border-top-color: rgba(255,255,255,.32);
    box-shadow: inset 0 1px 1px rgba(255,255,255,.25), 0 18px 40px -12px rgba(0,0,0,.8);
    backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%);
    transform: translate(-50%, calc(100% + 2rem)); opacity: 0;
    transition: transform .55s cubic-bezier(.22, 1.35, .38, 1), opacity .25s;
}
body.lv-app .lv-moment[hidden] { display: none; }
body.lv-app .lv-moment.is-in { transform: translate(-50%, 0); opacity: 1; }
body.lv-app .lv-moment bopstarr-3d { width: 3.6rem; aspect-ratio: 4 / 5; flex: none; }
body.lv-app .lv-moment p { margin: 0; font-size: .95rem; font-weight: 800; line-height: 1.3; color: #fff; }
body.lv-app .lv-moment[data-mood="exact"] { border-color: rgba(110,231,183,.55); box-shadow: inset 0 1px 1px rgba(255,255,255,.25), 0 0 0 3px rgba(110,231,183,.15), 0 18px 40px -12px rgba(0,0,0,.8); }
@media (max-width: 1023.98px) { body.lv-app .lv-moment { bottom: calc(var(--lv-dock-h) + 1.4rem + env(safe-area-inset-bottom)); } }

/* Host podium (live-multiplayer.js renderMatchComplete) */
body.lv-app .mp-final-dj { width: 6.5rem; aspect-ratio: 4 / 5; margin: -.4rem auto .2rem; filter: drop-shadow(0 12px 16px rgba(31,8,60,.55)); }

@media (prefers-reduced-motion: reduce) {
    body.lv-app .lv-moment { transition: opacity .2s; transform: translate(-50%, 0); }
}
body.lv-app .lv-invite-waiting.has-players .lv-invite-dots { display: none; }
body.lv-app .lv-invite-waiting.has-players bopstarr-3d { width: 4.6rem; }

/* ==========================================================================
   Visual calm-down (2026-10-18): the Live Together host panel
   (css/live-multiplayer.css) loses its neon rings, glows and shouting labels.
   One accent - white for "selected" - like the setup wizard.
   ========================================================================== */
body.lv-app .mp-mode-question { font-size: .9rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: #e2e8f0; }
body.lv-app .mp-mode-button.mp-mode-card.is-active { border-color: rgba(255,255,255,.85); background: rgba(255,255,255,.08); box-shadow: 0 0 0 1px rgba(255,255,255,.85); }
body.lv-app .mp-mode-card.is-active .mp-mode-check { background: #fff; color: #0b0f1d; }
body.lv-app .mp-mode-icon { background: rgba(255,255,255,.08); color: #e2e8f0; }
body.lv-app .mp-mode-feats i { color: #9aa4ba; }
body.lv-app .mp-together-app { background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.09); box-shadow: none; }
body.lv-app :is(.mp-session-code, .mp-session-code *) { text-shadow: none; }
body.lv-app .mp-session-status { color: #9aa4ba; }
body.lv-app .mp-turn-banner { border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.045); box-shadow: none; }
body.lv-app .mp-turn-banner small { font-size: .72rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: #9aa4ba; }
body.lv-app .mp-turn-orbit::before { background: #f472b6; box-shadow: none; }
body.lv-app .mp-player-row.is-current-turn { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.07); box-shadow: none; }
body.lv-app .mp-current-turn-badge { font-size: .66rem; font-weight: 700; text-transform: none; color: #fff; border-color: transparent; background: rgba(255,255,255,.14); }
body.lv-app :is(.mp-round-kicker, .mp-final-kicker, .mp-final-others h3, .mp-match-progress span, .mp-choice-result small, .mp-lyrics-transcript small, .mp-lyrics-prompt small, .mp-lyrics-answer small) { letter-spacing: 0; text-transform: none; font-size: .78rem; font-weight: 700; }
body.lv-app .mp-host-guess-form.mp-host-year-form { border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.04); }

/* Splash (incl/bopstarr_hop.*): the lobby DJ waits while the splash Bopstarr
   flies onto his spot, then takes over. */
html.lv-splashing body.lv-app .lv-lobby-dj { visibility: hidden; }

/* ==========================================================================
   Lobby: Your music, game setup, playlist picker (js/live-home.js, 2026-10-18)
   ========================================================================== */
/* The shelf shows the Studio list now; #sessionSongsNotification only keeps its play button. */
body.lv-app #sessionSongsNotification { display: none !important; }
body.lv-app :is(#lvShelf, .lv-shelf-all, #lvPickerMore, #lvPickerGenres, #playlistSort)[hidden] { display: none !important; }

/* Shelf */
body.lv-app .lv-shelf { margin-top: 1.1rem; animation: lv-arrive .6s var(--lv-bounce) both; }
body.lv-app .lv-shelf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 .15rem .55rem; }
body.lv-app .lv-shelf-head h2 { margin: 0; font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; color: #fff; }
body.lv-app .lv-shelf-all { border: 0; background: none; padding: .35rem 0; font-size: .82rem; font-weight: 700; color: #aab3c8; cursor: pointer; }
body.lv-app .lv-shelf-all:hover { color: #fff; }
body.lv-app .lv-shelf-row {
    display: flex; gap: .75rem; overflow-x: auto; overscroll-behavior-x: contain;
    margin: 0 -1rem; padding: .15rem 1rem .5rem; scroll-snap-type: x mandatory; scroll-padding-inline: 1rem;
    scrollbar-width: none;
}
body.lv-app .lv-shelf-row::-webkit-scrollbar { display: none; }
body.lv-app .lv-tile {
    flex: 0 0 7.4rem; display: flex; flex-direction: column; gap: .15rem; min-width: 0; padding: 0; border: 0; background: none;
    color: #fff; text-align: left; cursor: pointer; scroll-snap-align: start;
    animation: lv-arrive .55s var(--lv-bounce) calc(var(--i, 0) * 40ms) both;
}
body.lv-app .lv-tile strong { margin-top: .4rem; font-size: .84rem; font-weight: 700; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
body.lv-app .lv-tile small { font-size: .74rem; color: #9aa4ba; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.lv-app .lv-tile:focus-visible { outline: none; }
body.lv-app .lv-tile:focus-visible .lv-tile-art { outline: 2px solid #fff; outline-offset: 3px; }
body.lv-app .lv-tile-art, body.lv-app .lv-pcard-art { position: relative; display: block; aspect-ratio: 1; border-radius: .9rem; transition: transform .45s var(--lv-spring); }
body.lv-app .lv-tile:active .lv-tile-art { transform: scale(.95); }

/* Covers: an image, a 2x2 mosaic of the songs' covers, or the list's initial */
body.lv-app .lv-cover { position: absolute; inset: 0; display: block; overflow: hidden; border-radius: inherit; background: #161b2e; box-shadow: 0 12px 24px -16px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.08); }
body.lv-app .lv-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.lv-app .lv-cover.is-mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
body.lv-app .lv-cover.is-blank { display: grid; place-items: center; background: linear-gradient(145deg, hsl(var(--h, 280) 45% 34%), hsl(calc(var(--h, 280) + 40) 40% 16%)); }
body.lv-app .lv-cover.is-blank b { font-size: 2.2rem; font-weight: 900; color: rgba(255,255,255,.85); }
body.lv-app .lv-cover.is-studio { background: #1d2440; }
body.lv-app .lv-tile-flag, body.lv-app .lv-card-flag {
    position: absolute; left: .4rem; top: .4rem; z-index: 1; max-width: calc(100% - .8rem);
    padding: .12rem .45rem; border-radius: 999px; font-size: .66rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: #0b0f1d; background: rgba(255,255,255,.92);
}
body.lv-app .lv-tile-play {
    position: absolute; right: .4rem; bottom: .4rem; z-index: 1; width: 2rem; height: 2rem; border-radius: 50%;
    background: #fff; box-shadow: 0 6px 14px -6px rgba(0,0,0,.8);
}
/* a CSS play triangle */
body.lv-app .lv-tile-play::after { content: ""; position: absolute; left: 54%; top: 50%; translate: -50% -50%; border-style: solid; border-width: .38rem 0 .38rem .6rem; border-color: transparent transparent transparent #0b0f1d; }
@media (hover: hover) {
    body.lv-app :is(.lv-tile, .lv-pcard) .lv-tile-play { opacity: 0; transform: translateY(.3rem) scale(.8); transition: opacity .2s, transform .35s var(--lv-spring); }
    body.lv-app :is(.lv-tile, .lv-pcard):is(:hover, :focus-visible) .lv-tile-play { opacity: 1; transform: none; }
    body.lv-app .lv-tile:hover .lv-tile-art, body.lv-app .lv-pcard:hover .lv-pcard-art { transform: translateY(-3px); }
}

/* Game setup: one grouped list (scoring, guessing, TV) */
body.lv-app .lv-setup {
    margin-top: .75rem; border-radius: 1.3rem; overflow: hidden;
    background: var(--lv-glass), rgba(16,22,40,.55); border: 1px solid var(--lv-rim); border-top-color: rgba(255,255,255,.3);
    box-shadow: var(--lv-spec), 0 26px 60px -34px rgba(0,0,0,.8);
}
body.lv-app .lv-setup > .lv-score-summary,
body.lv-app .lv-setup-row {
    width: 100%; margin: 0; border-radius: 0; background: none; border: 0; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.lv-app .lv-setup > * + * { border-top: 1px solid rgba(255,255,255,.08); }
body.lv-app .lv-setup-row { display: flex; align-items: center; gap: .8rem; padding: .8rem .9rem; color: #fff; text-align: left; }
body.lv-app button.lv-setup-row { cursor: pointer; transition: background-color .2s; }
body.lv-app button.lv-setup-row:hover, body.lv-app .lv-setup > .lv-score-summary:hover { background: rgba(255,255,255,.04); }
body.lv-app .lv-setup > .lv-score-summary:active { transform: none; background: rgba(255,255,255,.06); }
body.lv-app .lv-setup-ico { width: 2.6rem; height: 2.6rem; border-radius: .85rem; display: grid; place-items: center; flex: none; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); }
body.lv-app .lv-setup-ico .lv-ico { width: 1.2rem; height: 1.2rem; }
body.lv-app .lv-setup-copy { display: flex; flex-direction: column; min-width: 0; flex: 1; }
body.lv-app .lv-setup-copy small { font-size: .74rem; font-weight: 600; color: #8d97ad; }
body.lv-app .lv-setup-copy strong { font-size: .98rem; line-height: 1.25; }
body.lv-app .lv-setup-hint { font-size: .8rem; line-height: 1.35; color: #c4cbe0; }
body.lv-app .lv-tv-row.is-on .lv-setup-ico { background: rgba(52,199,89,.18); border-color: rgba(52,199,89,.4); color: #86efac; }
body.lv-app .lv-tv-row.is-on #lvTvState::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .4rem; border-radius: 50%; background: #34c759; vertical-align: .1em; }

/* Guessing: the hint above, a segmented control below */
body.lv-app .lv-guess { display: grid; grid-template-columns: auto 1fr; row-gap: .7rem; }
body.lv-app .lv-guess .lv-seg { grid-column: 1 / -1; }
body.lv-app .lv-seg { display: flex; gap: 3px; padding: 3px; border-radius: 999px; background: rgba(0,0,0,.28); box-shadow: inset 0 1px 2px rgba(0,0,0,.35); }
body.lv-app .lv-seg button {
    flex: 1 1 auto; min-width: 0; min-height: 2.5rem; padding: 0 .55rem; border: 0; border-radius: 999px; cursor: pointer;
    font-size: .84rem; font-weight: 700; color: #b7bfd3; background: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: background-color .25s, color .2s, transform .35s var(--lv-spring);
}
body.lv-app .lv-seg button[aria-checked="true"] { color: #0b0f1d; background: #fff; box-shadow: 0 4px 12px -6px rgba(0,0,0,.7); }
body.lv-app .lv-seg button:active { transform: scale(.96); }
body.lv-app .lv-seg button:disabled { opacity: .35; cursor: not-allowed; }
body.lv-app .lv-seg button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* Picker ------------------------------------------------------------------------ */
body.lv-app .lv-picker { position: relative; padding: .9rem .9rem 1.1rem; }
body.lv-app .lv-picker-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem; margin-bottom: .8rem; }
body.lv-app .lv-picker-back { width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
body.lv-app .lv-picker-back .lv-ico { width: 1.15rem; height: 1.15rem; }
body.lv-app #playlistSelectView .lv-picker-title { margin: 0; font-size: 1.25rem; font-weight: 850; letter-spacing: -.02em; color: #fff; }
body.lv-app .lv-picker-count { font-size: .76rem; color: #8d97ad; white-space: nowrap; }
body.lv-app .lv-picker-search { display: flex; align-items: center; gap: .55rem; padding: 0 .9rem; min-height: 2.9rem; border-radius: 999px; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.1); color: #8d97ad; cursor: text; }
body.lv-app .lv-picker-search:focus-within { border-color: rgba(255,255,255,.4); }
body.lv-app .lv-picker-search .lv-ico { width: 1.05rem; height: 1.05rem; flex: none; }
body.lv-app .lv-picker-search input { flex: 1; min-width: 0; height: 2.8rem; border: 0; outline: 0; background: none; color: #fff; font-size: 1rem; }
body.lv-app .lv-picker-search input::placeholder { color: #7c869c; }
body.lv-app .lv-picker-tabs { display: flex; gap: .3rem; margin: .8rem -.9rem 0; padding: 0 .9rem; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid rgba(255,255,255,.08); }
body.lv-app .lv-picker-tabs::-webkit-scrollbar { display: none; }
body.lv-app .lv-picker-tabs button { flex: none; position: relative; padding: .6rem .7rem .7rem; border: 0; background: none; cursor: pointer; font-size: .88rem; font-weight: 700; color: #8d97ad; white-space: nowrap; }
body.lv-app .lv-picker-tabs button[aria-selected="true"] { color: #fff; }
body.lv-app .lv-picker-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: .7rem; right: .7rem; bottom: -1px; height: 2px; border-radius: 2px; background: #fff; }
body.lv-app .lv-picker-filters { display: flex; align-items: center; gap: .5rem; margin: .75rem 0 .2rem; min-height: 2.3rem; }
body.lv-app .lv-chips { display: flex; gap: .4rem; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
body.lv-app .lv-chips::-webkit-scrollbar { display: none; }
body.lv-app .lv-chip { flex: none; min-height: 2.15rem; padding: 0 .8rem; border-radius: 999px; cursor: pointer; font-size: .8rem; font-weight: 600; color: #c4cbe0; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); white-space: nowrap; }
body.lv-app .lv-chip[aria-pressed="true"] { color: #0b0f1d; background: #fff; border-color: #fff; }
body.lv-app .lv-picker-sort { flex: none; margin-left: auto; min-height: 2.15rem; padding: 0 .7rem; border-radius: 999px; font-size: .8rem; font-weight: 600; color: #c4cbe0; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); cursor: pointer; }
body.lv-app .lv-picker-sort option { color: #0b0f1d; }
body.lv-app #playlistList.lv-picker-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(9.2rem, 1fr)); gap: 1rem .8rem;
    max-height: none; overflow: visible; margin: .9rem 0 0; padding: 0;
}
body.lv-app #playlistList .playlist-card.lv-pcard {
    display: flex; flex-direction: column; align-items: stretch; gap: .1rem; min-width: 0; margin: 0; padding: 0;
    background: none; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    color: #fff; text-align: left; cursor: pointer;
    animation: lv-arrive .5s var(--lv-bounce) var(--d, 0s) both; transition: none !important;
}
body.lv-app #playlistList .playlist-card.lv-pcard:active { transform: scale(.97) !important; background: none !important; border-color: transparent !important; transition: transform .1s !important; }
body.lv-app #playlistList .playlist-card.lv-pcard:focus-visible { outline: none; }
body.lv-app #playlistList .playlist-card.lv-pcard:focus-visible .lv-pcard-art { outline: 2px solid #fff; outline-offset: 3px; }
body.lv-app .lv-pcard.is-empty { opacity: .5; }
body.lv-app .lv-pcard-title { margin-top: .45rem; font-size: .9rem; font-weight: 750; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
body.lv-app .lv-pcard-by { font-size: .76rem; color: #aab3c8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.lv-app .lv-pcard-by:empty { display: none; }
body.lv-app .lv-pcard-meta { display: flex; align-items: center; gap: .3rem; font-size: .74rem; color: #8d97ad; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.lv-app .lv-check { display: inline-grid; place-items: center; flex: none; width: 1rem; height: 1rem; border-radius: 50%; font-size: .6rem; font-weight: 900; color: #052e16; background: #6ee7b7; }
body.lv-app .lv-picker-empty { margin: 1.5rem 0 .5rem; text-align: center; font-size: .9rem; color: #aab3c8; }
body.lv-app .lv-picker-more { display: block; margin: 1.25rem auto 0; min-height: 2.75rem; padding: 0 1.4rem; border-radius: 999px; cursor: pointer; font-size: .88rem; font-weight: 800; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); }
body.lv-app .lv-picker-loading { position: absolute; inset: 0; z-index: 20; display: grid; place-content: center; justify-items: center; gap: .75rem; color: #c4cbe0; font-size: .85rem; font-weight: 600; }
body.lv-app .lv-picker-loading.my-hidden { display: none; }
@media (min-width: 640px) { body.lv-app .lv-picker { padding: 1.2rem 1.3rem 1.4rem; } body.lv-app .lv-picker-tabs { margin-inline: -1.3rem; padding-inline: 1.3rem; } }
@media (prefers-reduced-motion: reduce) {
    body.lv-app :is(.lv-shelf, .lv-tile, #playlistList .playlist-card.lv-pcard) { animation: none; }
}

/* ==========================================================================
   Phase 4 (2026-10-18): Battery saver, its Settings control, tips, sources
   ========================================================================== */
/* Settings home: Battery saver */
body.lv-app .lv-set-battery { display: grid; gap: .7rem; margin-top: .9rem; padding: .8rem .75rem; border-radius: 1.15rem; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08); }
body.lv-app .lv-set-battery-head { display: flex; align-items: center; gap: .8rem; }
body.lv-app .lv-set-ico--battery { background: rgba(255,255,255,.1); color: #e2e8f0; transition: background-color .3s, color .3s; }
body.lv-app .lv-set-battery.is-on .lv-set-ico--battery { background: rgba(250,204,21,.2); color: #fde047; }
body.lv-app .lv-set-battery .lv-set-copy small { -webkit-line-clamp: 3; }

/* Spotify Advanced is donators-only now: with three sources, YouTube (the
   recommended one) takes the full first row. */
body.lv-app .lv-src-grid > .lv-src-tile:first-child:nth-last-child(3) { grid-column: 1 / -1; min-height: 0; }

/* "Show me" from the guessing tip */
body.lv-app .lv-guess.lv-flash { animation: lv-flash 1.4s ease-out 2; }
@keyframes lv-flash { 0%, 100% { background: transparent; } 30% { background: rgba(255,255,255,.1); } }

/* Battery saver (js/live-battery.js): no endless decoration, no backdrop
   blurs, no fixed page background. One-shot transitions and the spinners
   that say something is loading stay. */
html.lv-battery body.lv-app { background-attachment: scroll !important; }
html.lv-battery body.lv-app *:not(.spinner):not(.animate-spin):not(.lv-invite-spinner):not(#songLoading),
html.lv-battery body.lv-app *::before,
html.lv-battery body.lv-app *::after { animation-iteration-count: 1 !important; }
html.lv-battery body.lv-app *,
html.lv-battery body.lv-app *::before,
html.lv-battery body.lv-app *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
/* Without the blur, glass needs to be more solid to stay readable. */
html.lv-battery body.lv-app :is(.lv-dock, .lv-tip, .lv-moment, .lv-panel-card) { background: #161c30 !important; }
html.lv-battery body.lv-app :is(.lv-scan-frame, .lv-ob-eq i, .lv-ob-beam, .lv-tv-wave, .lv-invite-dots i, .lv-together-strip-dot) { animation: none !important; }

/* TV menu (#displayModeModal): no eyebrow, no shouting status pills (2026-10-18) */
body.lv-app #displayModeModal [class*="tracking-[0.18em]"] { display: none !important; }
body.lv-app #displayModeModal .uppercase { text-transform: none !important; letter-spacing: 0 !important; }
body.lv-app #displayModeModal :is(#chromecastAvailability, #bigScreenAvailability) { font-size: .74rem; }

/* Picker search: the old #playlistSearch rules drew a second box inside the pill */
body.lv-app .lv-picker-search input#playlistSearch { padding: 0 !important; margin: 0; border: 0 !important; border-radius: 0; background: none !important; box-shadow: none !important; }

/* ---------------------------------------------------------------------------
 * Beat Keeper (rhythm minigame, 2026-10). The pad itself is css/bop-beat.css.
 * ------------------------------------------------------------------------ */
/* Settings → Game rules */
body.lv-app .bk-settings { display: grid; gap: .8rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .06); }
body.lv-app .bk-settings-head { display: flex; align-items: center; gap: .85rem; }
body.lv-app .bk-settings-head .mp-setting-heading { margin: 0; }
/* A tiny demo: the pad's pulse at 120 BPM, so the setting shows what it does. */
body.lv-app .bk-demo { position: relative; flex: none; display: grid; place-items: center; width: 3.1rem; height: 3.1rem; border-radius: 50%; background: #151b2e; }
body.lv-app .bk-demo i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #34d399; animation: bk-demo-beat .5s ease-out infinite; }
body.lv-app .bk-demo b { font-size: 1.35rem; line-height: 1; animation: bk-demo-tap .5s ease-out infinite; }
@keyframes bk-demo-beat { 0% { opacity: .9; transform: scale(.86); } 100% { opacity: 0; transform: scale(1.18); } }
@keyframes bk-demo-tap { 0%, 100% { transform: translateY(0); } 15% { transform: translateY(2px) scale(.94); } }
body.lv-app .bk-seg { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.lv-app .bk-seg.bk-seg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.lv-app .bk-seg label > span { justify-items: center; text-align: center; padding: .6rem .4rem; }
@media (max-width: 420px) { body.lv-app .bk-seg:not(.bk-seg-3) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body.lv-app .bk-details { display: grid; gap: .7rem; }
body.lv-app .bk-details[hidden] { display: none; }
body.lv-app .bk-bands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
body.lv-app .bk-bands span { display: grid; justify-items: center; gap: .1rem; padding: .5rem; border-radius: 12px; background: rgba(255, 255, 255, .05); color: rgba(255, 255, 255, .6); font-size: .75rem; font-variant-numeric: tabular-nums; }
body.lv-app .bk-bands b { color: #fff; font-size: 1rem; }
body.lv-app .bk-bands span:first-child b { color: #34d399; }

/* Live Together host card */
body.lv-app .mp-beat-card .mp-beat-pad { margin: 1rem 0 .4rem; }
body.lv-app .mp-beat-card .mp-beat-timer { margin: .6rem auto; }
body.lv-app .mp-beat-result ul { display: grid; gap: .3rem; margin: .45rem 0 0; padding: 0; list-style: none; }
body.lv-app .mp-beat-result li { display: grid; grid-template-columns: 1fr auto 2.2rem; align-items: center; gap: .6rem; font-size: .85rem; }
body.lv-app .mp-beat-result li em { color: rgba(255, 255, 255, .6); font-style: normal; font-variant-numeric: tabular-nums; }
body.lv-app .mp-beat-result li strong { color: #34d399; text-align: right; font-size: .9rem; }

/* Single-device modal: the step before the year turns */
body.lv-app #guessingModal .bk-solo-active > :not(#soloBeatStep):not(.modal-controls):not(#btnSkipGuessing) { display: none !important; }
body.lv-app .bk-solo { display: grid; justify-items: center; gap: .9rem; }
body.lv-app .bk-solo-body { display: grid; justify-items: center; gap: .9rem; width: 100%; }
body.lv-app .bk-solo-hint { margin: 0; color: rgba(255, 255, 255, .7); font-size: .95rem; }
body.lv-app .bk-solo-result { display: grid; justify-items: center; gap: .35rem; }
body.lv-app .bk-solo-result[hidden] { display: none; }
body.lv-app .bk-solo-result strong { font-size: 1.15rem; }
body.lv-app .bk-solo-result span { color: rgba(255, 255, 255, .65); font-size: .9rem; }
body.lv-app .bk-solo-result .byp-lock { margin-top: .5rem; }
body.lv-app .bk-solo-recap { margin: 0 auto .6rem; padding: .45rem .9rem; width: fit-content; border-radius: 999px; background: rgba(52, 211, 153, .12); color: #a7f3d0; font-size: .9rem; font-weight: 700; }
body.lv-app .bbt-spinner { width: 2.4rem; height: 2.4rem; margin: 2rem 0; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .15); border-top-color: #fff; animation: bk-spin .8s linear infinite; }
@keyframes bk-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------------
 * Game modes picker (js/live-modes.js, 2026-10-24): home "Year + bonus" panel,
 * Settings → Game rules and the Live Together sheet.
 * ------------------------------------------------------------------------ */
body.lv-app .gm { display: grid; gap: .7rem; color: #f8faff; text-align: left; }
body.lv-app .gm-label { color: rgba(248, 250, 255, .62); font-size: .78rem; font-weight: 700; }
body.lv-app .gm-guess { display: grid; gap: .45rem; }
/* Sized by their labels, so "Year + bonus" never gets cut off in the narrow panel. */
body.lv-app .gm-seg button { flex: 1 1 auto; padding: 0 .45rem; }
body.lv-app .gm-seg button:disabled { opacity: .35; cursor: not-allowed; }
body.lv-app .gm-hint, body.lv-app .gm-foot { margin: 0; color: rgba(248, 250, 255, .62); font-size: .8rem; line-height: 1.4; }
body.lv-app .gm-foot { padding: .55rem .75rem; border-radius: 12px; background: rgba(255, 255, 255, .05); }
body.lv-app .gm-games-label { margin-top: .3rem; }
body.lv-app .gm-cards { display: grid; gap: .55rem; }
body.lv-app .gm-card { border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); transition: border-color .2s ease, background .2s ease; }
body.lv-app .gm-card.is-on { border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .08); }
body.lv-app .gm-card-head { display: grid; grid-template-columns: 2.6rem 1fr auto; align-items: center; gap: .7rem; padding: .75rem .8rem; }
body.lv-app .gm-card-copy { display: grid; gap: .15rem; min-width: 0; }
body.lv-app .gm-card-copy strong { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .95rem; }
body.lv-app .gm-card-copy small { color: rgba(248, 250, 255, .62); font-size: .78rem; line-height: 1.35; }
body.lv-app .gm-icon { position: relative; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 12px; background: #151b2e; font-size: 1.3rem; }
body.lv-app .gm-icon-img img { width: 2.3rem; height: auto; object-fit: contain; }
body.lv-app .gm-beat-icon i { position: absolute; inset: 3px; border-radius: 10px; border: 2px solid #34d399; opacity: 0; }
body.lv-app .gm-card.is-on .gm-beat-icon i { animation: bk-demo-beat .5s ease-out infinite; }
body.lv-app .gm-badge { display: inline-flex; align-items: center; padding: .1rem .45rem; border-radius: 999px; background: rgba(255, 255, 255, .1); color: rgba(248, 250, 255, .78); font-size: .66rem; font-weight: 700; white-space: nowrap; }
body.lv-app .gm-badge.is-lt { background: rgba(56, 189, 248, .16); color: #bae6fd; }
body.lv-app .gm-badge.is-donor { background: rgba(244, 114, 182, .16); color: #fbcfe8; }
/* iOS-style switch */
body.lv-app .gm-switch { position: relative; width: 2.9rem; height: 1.75rem; flex: none; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .18); cursor: pointer; transition: background .2s ease; }
body.lv-app .gm-switch span { position: absolute; top: 3px; left: 3px; width: calc(1.75rem - 6px); aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); transition: transform .2s ease; }
body.lv-app .gm-switch[aria-checked="true"] { background: #34c759; }
body.lv-app .gm-switch[aria-checked="true"] span { transform: translateX(1.15rem); }
body.lv-app .gm-switch:focus-visible, body.lv-app .gm-option:focus-visible, body.lv-app .gm-chips button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
body.lv-app .gm-card-body { display: grid; gap: .6rem; padding: 0 .8rem .8rem; }
body.lv-app .gm-options { display: grid; gap: .35rem; }
body.lv-app .gm-option { display: grid; grid-template-columns: 1.1rem 1fr auto; align-items: center; gap: .6rem; width: 100%; padding: .55rem .65rem; border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; background: rgba(0, 0, 0, .18); color: inherit; font: inherit; text-align: left; cursor: pointer; }
body.lv-app .gm-option[aria-checked="true"] { border-color: #fff; }
body.lv-app .gm-option:disabled { opacity: .5; cursor: not-allowed; }
body.lv-app .gm-option-copy { display: grid; gap: .1rem; min-width: 0; }
body.lv-app .gm-option-copy b { font-size: .85rem; }
body.lv-app .gm-option-copy small { color: rgba(248, 250, 255, .58); font-size: .74rem; line-height: 1.3; }
body.lv-app .gm-option-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .25rem; }
body.lv-app .gm-radio { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .4); }
body.lv-app .gm-option[aria-checked="true"] .gm-radio { border: 5px solid #fff; }
body.lv-app .gm-sub { display: grid; gap: .35rem; }
body.lv-app .gm-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
body.lv-app .gm-chips button { min-height: 2.1rem; padding: 0 .8rem; border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; background: transparent; color: rgba(248, 250, 255, .82); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }
body.lv-app .gm-chips button[aria-checked="true"] { border-color: #fff; background: #fff; color: #0b0f1d; }
body.lv-app .gm-note { margin: 0; padding: .45rem .6rem; border-radius: 10px; background: rgba(56, 189, 248, .1); color: #bae6fd; font-size: .76rem; line-height: 1.35; }
@media (max-width: 420px) {
    body.lv-app .gm-option { grid-template-columns: 1.1rem 1fr; }
    body.lv-app .gm-option-badges { grid-column: 2; justify-content: flex-start; }
}
/* Home: the panel sits inside the setup card, under the Guessing row. */
body.lv-app .lv-modes-home { padding: .2rem .9rem .9rem; }
body.lv-app .lv-modes-home[hidden] { display: none; }
body.lv-app .lv-modes[data-lv-modes="settings"] { margin-bottom: .5rem; }
body.lv-app .lv-legacy-guess[hidden] { display: none !important; }

/* Live Together: "Game modes" beside "Turn by turn" */
body.lv-app .mp-turn-mode-actions { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .4rem; }
body.lv-app .mp-modes-button { display: inline-flex; align-items: center; gap: .35rem; min-height: 2rem; padding: 0 .8rem; border: 0; border-radius: 999px; background: #fff; color: #0b0f1d; font: inherit; font-size: .76rem; font-weight: 800; cursor: pointer; }
body.lv-app .mp-modes-button:active { transform: scale(.96); }

/* The sheet */
body.lv-app .lv-modes-sheet { position: fixed; inset: 0; z-index: 1200; display: grid; align-items: end; justify-items: center; }
body.lv-app .lv-modes-sheet[hidden] { display: none; }
body.lv-app .lv-modes-sheet-back { position: absolute; inset: 0; background: rgba(3, 5, 14, .6); opacity: 0; transition: opacity .2s ease; }
body.lv-app .lv-modes-sheet-panel { position: relative; display: grid; gap: .8rem; width: min(100%, 34rem); max-height: min(88vh, 46rem); overflow-y: auto; overscroll-behavior: contain; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: #0f1426; box-shadow: 0 -20px 50px -20px rgba(0, 0, 0, .8); transform: translateY(24px); opacity: 0; transition: transform .22s ease, opacity .22s ease; }
body.lv-app .lv-modes-sheet.is-open .lv-modes-sheet-back { opacity: 1; }
body.lv-app .lv-modes-sheet.is-open .lv-modes-sheet-panel { transform: none; opacity: 1; }
@media (min-width: 700px) { body.lv-app .lv-modes-sheet { align-items: center; } body.lv-app .lv-modes-sheet-panel { border-radius: 22px; } }
body.lv-app .lv-modes-sheet-head { display: flex; align-items: center; justify-content: space-between; }
body.lv-app .lv-modes-sheet-head h3 { margin: 0; font-size: 1.2rem; font-weight: 800; }
body.lv-app .lv-modes-sheet-x { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; }
body.lv-app .lv-modes-sheet-x svg { width: 1.1rem; height: 1.1rem; }
body.lv-app .lv-modes-done { min-height: 2.9rem; border: 0; border-radius: 999px; background: #fff; color: #0b0f1d; font: inherit; font-weight: 800; cursor: pointer; }

/* "The song paused during the game" prompt (live.php updateMusicNudge), above the round card. */
body.lv-app .lv-music-nudge { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 50%; z-index: 5; display: flex; align-items: center; gap: .6rem; width: min(calc(100% - 24px), 30rem); padding: .6rem .6rem .6rem .9rem; border-radius: 16px; background: #fff; color: #0b0f1d; box-shadow: 0 14px 40px -12px rgba(0, 0, 0, .7); transform: translateX(-50%); font-size: .86rem; font-weight: 700; line-height: 1.3; text-align: left; animation: lv-nudge-in .25s ease-out; }
body.lv-app .lv-music-nudge[hidden] { display: none; }
body.lv-app .lv-music-nudge span { flex: 1; }
body.lv-app .lv-music-nudge [data-continue] { flex: none; min-height: 2.4rem; padding: 0 1rem; border: 0; border-radius: 999px; background: #34c759; color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
body.lv-app .lv-music-nudge-x { flex: none; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: rgba(11, 15, 29, .08); color: #0b0f1d; font-size: 1.2rem; line-height: 1; cursor: pointer; }
@keyframes lv-nudge-in { from { opacity: 0; transform: translate(-50%, -8px); } }
/* The Game modes "Keep the song playing" switch sits apart from the bonus games. */
body.lv-app .gm-music { margin-top: .2rem; }