/* v0.6 — the gameplay redesign (docs/redesign): a restrained dark concert stage. Inter for the play screen, obsidian surfaces,
   mint accent, a full-width real YouTube player, a compact HUD plate, one groove bar, six phrase markers, the highway below.
   Home and results keep their v0.5 styling (no home redesign yet). */
:root { --ob: #090D16; --surf: #131C2B; --ink: #F4F6FA; --ink2: #A2AEC1; --mint: #70F5CB; --lane0: #FF6B6B; --lane1: #FFB84D; --lane2: #3FE3FF; --lane3: #B48CFF;
  --play-head: 56px; --vh: 200px; --vw: max(356px, min(100vw - 32px, 398px)); --play-video-top: calc(var(--safe-top) + var(--play-head)); } /* 200 px tall (the RMF floor) and at least 356 px wide: below 356 the YouTube mobile embed hides controls (tiny mode) */
.on-play .app, .on-ready .app { font-family: 'Inter', 'Archivo', system-ui, sans-serif; }
/* ---------- the real player: full width, its own region, nothing over it ---------- */
.on-play #ytkeeper, .on-ready #ytkeeper { display: block; top: var(--play-video-top); left: calc(50% - var(--vw) / 2); width: var(--vw); height: var(--vh); }
.on-play .bezel { display: block; top: calc(var(--play-video-top) - 1px); left: calc(50% - var(--vw) / 2 - 1px); width: calc(var(--vw) + 2px); height: calc(var(--vh) + 2px); border-radius: 10px; background: #0d1522; box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 12px 30px rgba(0,0,0,.55), 0 0 40px color-mix(in srgb, var(--vid-a) 30%, transparent); }
.on-ready .bezel { display: block; top: calc(var(--play-video-top) - 1px); left: calc(50% - var(--vw) / 2 - 1px); width: calc(var(--vw) + 2px); height: calc(var(--vh) + 2px); border-radius: 10px; background: #0d1522; box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 12px 30px rgba(0,0,0,.55); }
.on-ready .bezel::after, .on-play .bezel::after { content: none; }
/* ---------- play screen layout ---------- */
#play { padding: 0; }
.play-head { position: relative; z-index: 3; height: var(--play-head); margin-top: var(--safe-top); padding: 6px 16px 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ph-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ph-song { display: flex; flex-direction: column; min-width: 0; }
.wordmark2 { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 13px; letter-spacing: .4em; color: var(--ink); text-shadow: none; flex: none; }
.wordmark2 span { color: var(--mint); }
.wordmark2::after { content: ''; display: block; width: 36px; height: 2px; margin-top: 5px; background: var(--mint); border-radius: 1px; }
.ph-title { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 16px; letter-spacing: -.01em; color: var(--ink); line-height: 1.15; text-shadow: 0 1px 2px rgba(0,0,0,.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-artist { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-right { display: flex; align-items: center; gap: 10px; flex: none; }
.pause-btn { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(244,246,250,.55); background: rgba(9,13,22,.35); color: var(--ink); display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .1s, background .1s; }
.pause-btn svg { width: 18px; height: 18px; fill: currentColor; }
.pause-btn:active { transform: scale(.94); background: rgba(112,245,203,.18); }
.ph-mode { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink2); text-align: right; max-width: 70px; line-height: 1.4; }
.video-slot { height: calc(var(--vh) + 8px); flex: none; }
#play .notice { position: absolute; left: 12px; right: 12px; top: 22px; z-index: 3; min-height: 0; margin: 0; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 12px; color: var(--ink); text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.7); pointer-events: none; }
#play .playfield { margin-top: 4px; }
#play .dots { top: 8px; display: none; }
#play .countin:not([hidden]) ~ .dots, .on-play.countin-on #play .dots { display: flex; }
#play .dots i { background: rgba(255,255,255,.25); } #play .dots i.on { background: var(--mint); box-shadow: 0 0 8px rgba(112,245,203,.7); }
/* judgement: spaced caps over the hit lane, brief; per-lane hints small */
#play .judge-main { width: 160px; margin-left: -80px; }
#play .judge-main .jm-word { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 17px; letter-spacing: .32em; text-transform: uppercase; text-shadow: 0 0 10px rgba(112,245,203,.35), 0 1px 2px rgba(0,0,0,.6); }
#play .judge-main.perfect .jm-word { color: var(--mint); text-shadow: 0 0 12px rgba(112,245,203,.7), 0 1px 2px rgba(0,0,0,.6); }
#play .judge-main.good .jm-word { color: var(--ink); }
#play .judge-main.ok .jm-word { color: var(--ink2); font-size: 15px; }
#play .judge-main.miss .jm-word { color: var(--lane0); text-shadow: 0 0 10px rgba(255,107,107,.6), 0 1px 2px rgba(0,0,0,.6); }
#play .judge-main .jm-sub { font-family: 'Inter', sans-serif; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); }
#play .judge { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; width: 100px; margin-left: -50px; }
#play .judge small { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 9px; letter-spacing: .1em; }
#play .flourish { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 18px; letter-spacing: .34em; text-transform: uppercase; color: var(--mint); text-shadow: 0 0 14px rgba(112,245,203,.6), 0 1px 2px rgba(0,0,0,.6); }
.hold-label { position: absolute; width: 80px; margin-left: -40px; text-align: center; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--lane2); opacity: 0; pointer-events: none; transition: opacity .15s; }
.hold-label.show { opacity: 1; color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 0 8px rgba(0,0,0,.6); }
.hold-label.done { color: #fff !important; text-shadow: 0 0 10px rgba(255,255,255,.7); }
.hold-label.l0 { color: var(--lane0); } .hold-label.l1 { color: var(--lane1); } .hold-label.l2 { color: var(--lane2); } .hold-label.l3 { color: var(--lane3); }
#play .mode-label { display: none; }
#play .countin { top: 22%; }
#play .countin .disp { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 72px; letter-spacing: -.02em; color: var(--ink); text-shadow: 0 0 24px rgba(112,245,203,.35), 0 2px 6px rgba(0,0,0,.6); }
#play .countin .eye { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 12px; letter-spacing: .16em; color: var(--ink); text-shadow: 0 1px 3px #000; margin-top: 8px; }
.playfield.dim::after { content: ''; position: absolute; inset: 0; background: rgba(9,13,22,.6); z-index: 4; }
/* ---------- recovery / pause panels ---------- */
#play .pause-panel { top: calc(var(--play-video-top) + var(--vh) + 68px); left: 16px; right: 16px; padding: 18px 18px 12px; border-radius: 16px; background: #131C2B; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 18px 48px rgba(0,0,0,.6); gap: 0; backdrop-filter: none; -webkit-backdrop-filter: none; z-index: 8; }
.panel-icon { width: 38px; height: 38px; color: var(--mint); margin-bottom: 6px; }
.panel-icon svg { width: 100%; height: 100%; fill: currentColor; }
.panel-eyebrow { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--ink2); }
.panel-title { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 26px; letter-spacing: -.02em; color: var(--ink); margin-top: 8px; text-align: center; text-shadow: none; }
.panel-text { font-family: 'Inter', sans-serif; font-size: 15px; color: var(--ink2); margin-top: 6px; text-align: center; line-height: 1.45; }
.panel-rule { width: 100%; height: 1px; background: rgba(255,255,255,.1); margin: 12px 0 10px; }
.panel-context { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink2); margin-bottom: 12px; text-align: center; }
.btn-mint { width: 100%; min-height: 52px; border-radius: 12px; border: 0; background: var(--mint); color: #062A20; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 17px; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .1s, filter .1s; box-shadow: 0 6px 18px rgba(112,245,203,.25); }
.btn-mint svg { width: 20px; height: 20px; fill: currentColor; }
.btn-mint:active { transform: scale(.98); filter: brightness(.94); }
.btn-outline { width: 100%; min-height: 48px; margin-top: 8px; border-radius: 12px; border: 1.5px solid rgba(244,246,250,.7); background: transparent; color: var(--ink); font-family: 'Inter', sans-serif; font-weight: 600; font-size: 16px; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .1s, background .1s; }
.btn-outline svg { width: 18px; height: 18px; fill: currentColor; }
.btn-outline:active { transform: scale(.98); background: rgba(255,255,255,.06); }
.btn-outline[hidden] { display: none; }
.btn-link { margin-top: 6px; padding: 8px 16px; min-height: 44px; border: 0; background: none; color: var(--mint); font-family: 'Inter', sans-serif; font-weight: 500; font-size: 15px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* ---------- ready screen: the same player region and type ---------- */
.on-ready .ready-top { height: calc(var(--play-video-top) + var(--vh) + 8px); }
.on-ready .song-title { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 24px; letter-spacing: -.01em; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.on-ready .monitor-caption .eye, .on-ready .ready-body .eye { font-family: 'Inter', sans-serif; font-stretch: 100%; letter-spacing: .14em; }
@media (prefers-reduced-motion: reduce) { .btn-mint, .btn-outline, .pause-btn { transition: none; } }

.panel-row { display: flex; gap: 8px; width: 100%; }
.panel-row .btn-outline { flex: 1; width: auto; font-size: 15px; }

.on-ready .ready-top .play-head { margin-top: 0; height: auto; padding-top: calc(var(--safe-top) + 14px); }

/* narrow phones: the HUD column beside a 200 px player keeps its numbers readable */
@media (max-width: 370px) { .hp-num { font-size: 21px; } .ph-title { font-size: 15px; } .hud-plate .cells i { width: 7px; height: 7px; } .ph-mode { display: none; } }

#play .judge-main.slice .jm-word { color: #eafff7; text-shadow: 0 0 14px rgba(112,245,203,.95), 0 0 30px rgba(112,245,203,.5), 0 1px 2px rgba(0,0,0,.6); }

.ph-title { max-width: none; }

/* minimize: the real player at YouTube's 200 × 200 floor, top-left, fully visible; the HUD plate becomes a column beside it */


/* performance: no backdrop blur over the animated canvas (each blurred element re-filters the frame behind it every frame on phones) */
.on-play .gb-glass, .on-ready .gb-glass, .on-play .pause-btn { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(12,10,20,.78); }
.on-play .judge-main, .on-play .judge, .on-play .flourish, .on-play .hold-label { will-change: transform, opacity; }
/* Home is a flex column that scrolls; its children must never shrink, or a longer catalogue squeezes the hero and hides the tier picker and the Play button (seen the moment the third song was added). */
#home > * { flex: none; } .hero-body { flex: none; }
/* Standard / Full song toggle on the hero (v0.10): same segmented control as the tiers, two columns; Full carries a lock until unlocked */
.modes-select.seg { grid-template-columns: repeat(2, 1fr); margin-top: 8px; }
.modes-select.seg .thumb { width: calc((100% - 8px) / 2); transform: translateX(calc(var(--i, 0) * 100%)); --ta: #B48CFF; --tb: #6A3FD6; --tl: #2E1866; }
.modes-select.seg[data-mode="standard"] .thumb { --ta: #FFD98A; --tb: #E08A12; --tl: #6B3A02; }
.modes-select.seg button.locked b::after { content: " \1F512"; font-size: 12px; }
.modes-select.seg[data-mode="full"] button.on { color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.35); } .modes-select.seg[data-mode="standard"] button.on { color: #1a0a12; }
.unlock-panel { position: fixed; left: 16px; right: 16px; top: 50%; transform: translateY(-50%); z-index: 40; padding: 18px 18px 14px; border-radius: 16px; background: #131C2B; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 18px 48px rgba(0,0,0,.6); }
.unlock-panel .unlock-title { font-family: 'Anton', Impact, sans-serif; font-size: 26px; letter-spacing: .02em; margin: 4px 0 6px; }
.unlock-panel p { margin: 0 0 12px; color: rgba(255,255,255,.8); font-size: 14px; line-height: 1.4; }
.unlock-panel .row { display: flex; gap: 10px; } .unlock-panel .row .gb { flex: 1; }
/* A standard round ends its judging, not the video: on the results screen the player stays where it was, playing, with its own controls (YouTube Developer Policies III.F.3) */
.on-results.video-on #ytkeeper { display: block; top: var(--play-video-top); left: calc(50% - var(--vw) / 2); width: var(--vw); height: var(--vh); }
.on-results.video-on #results { padding-top: calc(var(--play-video-top) + var(--vh) + 14px); }

/* v0.11: a fourth difficulty chip (Expert) that appears only for songs with an Expert chart, locked until Hard is cleared */
.tiers-select.seg { grid-template-columns: repeat(var(--n, 3), 1fr); }
.tiers-select.seg .thumb { width: calc((100% - 8px) / var(--n, 3)); }
.modes-select.seg { grid-template-columns: repeat(2, 1fr); } .modes-select.seg .thumb { width: calc((100% - 8px) / 2); }
.tiers-select.seg button[hidden] { display: none; }
.tiers-select.seg[data-tier="expert"] .thumb { --ta: #C98BFF; --tb: #6A2BD6; --tl: #2B0E5E; }
.tiers-select.seg[data-tier="expert"] button.on { color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.35); }
.tiers-select.seg button.locked { opacity: .7; } .tiers-select.seg button.locked b::after { content: " \1F512"; font-size: 11px; }
.pill.expert { border-color: rgba(201,139,255,.65); }

/* v0.12: player libraries — sign in, add a song, preparation, personal shelf (docs/14). Panels sit above the stage
   and never over the YouTube player, and the preview iframe is the real embed so a video is always watchable. */
.lib-back { position: fixed; inset: 0; background: rgba(4,6,14,.72); backdrop-filter: blur(3px); z-index: 60; }
.lib-panel { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92vw, 420px); max-height: 86vh; overflow: auto; z-index: 61;
  padding: 18px 18px 16px; border-radius: 18px; background: #131C2B; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 24px 60px rgba(0,0,0,.65); }
.lib-panel.wide { width: min(94vw, 520px); }
.lib-x { position: absolute; right: 10px; top: 10px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; font-size: 14px; }
.lib-title { font-family: 'Anton', Impact, sans-serif; font-weight: 400; font-size: 24px; letter-spacing: .02em; margin: 4px 0 8px; }
.lib-note { margin: 0 0 12px; color: rgba(255,255,255,.8); font-size: 13.5px; line-height: 1.45; }
.lib-note.dim { color: rgba(255,255,255,.55); font-size: 12.5px; }
.lib-label { display: block; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.55); margin: 10px 0 4px; }
.lib-input { width: 100%; padding: 11px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.35); color: #fff; font: inherit; font-size: 15px; }
.lib-input:focus { outline: none; border-color: var(--mint, #70F5CB); box-shadow: 0 0 0 3px rgba(112,245,203,.18); }
.lib-search { display: flex; gap: 8px; margin-bottom: 10px; } .lib-search .lib-input { flex: 1; }
.lib-msg { min-height: 18px; margin: 10px 0 6px; font-size: 13px; color: rgba(255,255,255,.75); } .lib-msg.bad { color: #FF6B6B; }
.lib-results { display: grid; gap: 8px; margin: 6px 0 10px; }
.lib-res { display: grid; grid-template-columns: 76px 1fr auto; gap: 10px; align-items: center; padding: 8px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.lib-thumb { width: 76px; height: 44px; object-fit: cover; border-radius: 7px; background: #000; }
.lib-meta { min-width: 0; }
.lib-rt { font-weight: 700; font-size: 13.5px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lib-rc { font-size: 11.5px; color: rgba(255,255,255,.65); margin-top: 2px; } .lib-rc.dim { color: rgba(255,255,255,.5); }
.lib-badge { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.lib-badge.new { background: rgba(255,255,255,.12); color: rgba(255,255,255,.85); }
.lib-badge.ready { background: rgba(112,245,203,.2); color: #70F5CB; }
.lib-badge.cat { background: rgba(255,198,94,.2); color: #FFC65E; }
.lib-badge.have { background: rgba(180,140,255,.22); color: #C9A7FF; }
.lib-badge.prep { background: rgba(63,227,255,.18); color: #3FE3FF; }
.lib-badge.bad { background: rgba(255,107,107,.2); color: #FF6B6B; }
.lib-acts { display: grid; gap: 6px; justify-items: stretch; }
.gb.small, .gb-glass.small { padding: 7px 10px; font-size: 11px; min-width: 84px; }
.lib-preview { grid-column: 1 / -1; position: relative; margin-top: 8px; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; background: #000; }
.lib-preview iframe { width: 100%; height: 100%; border: 0; }
.lib-preview .yt-mark { position: absolute; right: 8px; bottom: 8px; }
.lib-panel .row { display: flex; gap: 10px; margin-top: 6px; } .lib-panel .row .gb { flex: 1; }
.scard.addcard { border-style: dashed; opacity: .96; } .scard.addcard .stitle { letter-spacing: .04em; }

.spills .pill.yours { background: rgba(112,245,203,.22); border-color: rgba(112,245,203,.5); color: #70F5CB; }

/* Expressions: a small pop that fizzles up out of the pill that was hit, gone within about 300 ms (docs/21). Behind the
   judgement word (z-index 3), never interactive, clipped to the playfield. The pop is anchored at the top of the
   judgement line over the pill's centre; everything in it is placed from there. */