/* ===================================================================
   Now Playing — header disc + sheet (js/now-playing.js).
   Chosen 2026-10-14 from /static/nowplaying-disc-preview.html: the cover
   spins as a disc beside the bolt, a ring fills toward the game challenge
   it's feeding, and a tap opens what it's counting toward. Replaces the
   40px strip under the header (no tap action, stacked under the boost
   strip). ?np=strip / localStorage dpad_np_strip=1 brings the strip back.
   =================================================================== */

.np-disc {
    position: absolute;
    right: 149px;                 /* fallback; js/now-playing.js placeDisc() puts it beside the bolt */
    top: 50%;
    width: 44px; height: 44px;
    margin-top: -22px;
    padding: 0; border: 0; border-radius: 50%;
    background: none;
    cursor: pointer;
    z-index: 1001;
    transform: scale(0);
    transition: transform .45s cubic-bezier(.2, 1.6, .4, 1);
    -webkit-tap-highlight-color: transparent;
}
.np-disc.on { transform: scale(1); }
.np-disc:active { transform: scale(.92); }
/* progress ring: conic fill set inline as --np-pct */
.np-disc::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: 50%;
    background: conic-gradient(#FFD93D 0 var(--np-pct, 100%), rgba(0, 0, 0, .14) var(--np-pct, 100%) 100%);
}
.np-disc.is-music::before { background: #1DB954; }
.np-disc .np-art {
    position: absolute; inset: 3px;
    border-radius: 50%;
    overflow: hidden;
    background-size: cover;
    background: #222 center / cover no-repeat;
    animation: np-spin 6s linear infinite;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
}
/* a record's centre hole, so the spin reads as a disc not a glitch */
.np-disc .np-art::after {
    content: "";
    position: absolute; left: 50%; top: 50%;
    width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    background: #ebe3cf;
    box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .35);
}
@keyframes np-spin { to { transform: rotate(360deg); } }
/* live dot */
.np-disc::after {
    content: "";
    position: absolute; right: -2px; top: -2px;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: #2ecc71;
    border: 2px solid #ebe3cf;
    animation: np-pulse 1.8s infinite;
}
@keyframes np-pulse {
    0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, .6); }
    70%, 100% { box-shadow: 0 0 0 6px rgba(46, 204, 113, 0); }
}

/* "Playing X" bubble, once when a game starts */
.np-bubble {
    position: fixed;
    top: calc(var(--header-height, 72px) + var(--safe-top, 0px) + 6px);
    right: 16px;
    max-width: 260px;
    z-index: 1300;
    background: #121212; color: #fff;
    border-radius: 12px;
    padding: 8px 12px;
    font: 13px/1.35 var(--font-ui, Figtree, sans-serif);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
    opacity: 0; transform: translateY(-6px);
    transition: opacity .3s, transform .3s;
    pointer-events: none;
}
.np-bubble.on { opacity: 1; transform: none; }
.np-bubble b { color: #FFD93D; display: block; }
.np-bubble.is-music b { color: #1DB954; }

/* ── the sheet ───────────────────────────────────────────────────── */
.np-scrim {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(10, 10, 20, .45);
    opacity: 0; transition: opacity .3s;
}
.np-scrim.on { opacity: 1; }
.np-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9001;
    max-width: 560px; margin: 0 auto;
    max-height: 80vh; overflow-y: auto;
    background: #121212; color: #fff;
    border-radius: 22px 22px 0 0;
    padding: 10px 16px calc(20px + var(--safe-bottom, 0px));
    transform: translateY(105%);
    transition: transform .4s cubic-bezier(.2, .9, .25, 1);
    font-family: var(--font-ui, Figtree, sans-serif);
}
.np-sheet.on { transform: none; }
.np-grab { width: 40px; height: 4px; border-radius: 2px; background: #444; margin: 0 auto 14px; }
.np-hero { display: flex; gap: 14px; align-items: center; }
.np-cover { width: 64px; height: 84px; border-radius: 10px; flex: none; background: #333 center / cover no-repeat; }
.np-sheet.is-music .np-cover { height: 64px; }
.np-hero small { display: block; font: 700 10.5px 'JetBrains Mono', monospace; letter-spacing: .14em; color: #FFD93D; margin-bottom: 4px; }
.np-sheet.is-music .np-hero small { color: #1DB954; }
.np-hero b { display: block; font: 20px/1.15 var(--font-display, 'Archivo Black'), sans-serif; }
.np-hero p { margin: 5px 0 0; font-size: 13px; color: #aaa; }
.np-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0 4px; }
.np-stats div { background: #1e1e1e; border-radius: 12px; padding: 10px; font: 700 9.5px 'JetBrains Mono', monospace; letter-spacing: .12em; color: #8a8a8a; }
.np-stats div b { display: block; font: 20px var(--font-display, 'Archivo Black'), sans-serif; color: #fff; letter-spacing: 0; margin-top: 3px; }
.np-stats div.g b { color: #FFD93D; }
.np-sheet h5 { font: 700 10.5px 'JetBrains Mono', monospace; letter-spacing: .16em; color: #8a8a8a; margin: 14px 0 6px; }
.np-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, .07); }
.np-row .np-coin { width: 26px; height: 26px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 30%, #f2b27a, #8b4a1c); }
.np-row .np-coin[data-tier="silver"] { background: radial-gradient(circle at 35% 30%, #f1f4f6, #8a9aa6); }
.np-row .np-coin[data-tier="gold"] { background: radial-gradient(circle at 35% 30%, #fff1b8, #c8992e); }
.np-row span { flex: 1; min-width: 0; font-size: 13.5px; }
.np-row span small { display: block; font: 700 9.5px 'JetBrains Mono', monospace; letter-spacing: .12em; color: #8a8a8a; margin-bottom: 2px; }
.np-row span i { display: block; height: 5px; border-radius: 3px; background: #2a2a2a; margin-top: 6px; overflow: hidden; }
.np-row span i u { display: block; height: 100%; background: linear-gradient(90deg, #ffb11f, #ffd93d); }
.np-row em { font: 700 11px 'JetBrains Mono', monospace; color: #bbb; font-style: normal; white-space: nowrap; }
.np-row.done em { color: #2ecc71; }
.np-empty { font-size: 13.5px; color: #aaa; padding: 6px 0 2px; line-height: 1.45; }
.np-acts { display: flex; gap: 8px; margin-top: 16px; }
.np-acts button { flex: 1; border: 0; border-radius: 100px; padding: 12px; font: 800 13.5px var(--font-ui, Figtree, sans-serif); background: #262626; color: #fff; cursor: pointer; }
.np-acts button.p { background: #FFD93D; color: #1a1a1a; }

@media (prefers-reduced-motion: reduce) {
    .np-disc .np-art, .np-disc::after { animation: none; }
    .np-disc, .np-sheet, .np-scrim, .np-bubble { transition: none; }
}