/* ==========================================================================
   Radio Dad — Web Player (listen.radiodad.app)
   Brand tokens lifted verbatim from the iOS app (Colors.swift) and the
   marketing site. Warm minimalism — never pure white or pure black.
   ========================================================================== */

/* ---- Fonts (self-hosted, OFL) ------------------------------------------- */
@font-face { font-family:"Fraunces"; src:url("../fonts/Fraunces.ttf") format("truetype-variations"); font-weight:100 900; font-display:swap; }
@font-face { font-family:"Inter"; src:url("../fonts/InterVariable.ttf") format("truetype-variations"); font-weight:100 900; font-display:swap; }
@font-face { font-family:"JetBrains Mono"; src:url("../fonts/JetBrainsMono.ttf") format("truetype"); font-weight:400; font-display:swap; }

/* ---- Tokens ------------------------------------------------------------- */
:root {
  --paper:#F5F1EA; --linen:#FBF7F0; --shell:#FFFDF8;
  --ink:#1F1D1A; --smoke:#6E6962;
  --ember:#D9684A; --ember-2:#C2563A; --lantern:#E8804A; --sage:#8A9A7B;
  --sand:#E8E2DA; --on-ember:#FFF8F2;
  --ember-wash:rgba(217,104,74,.08); --ember-glow:rgba(217,104,74,.22);
  --shadow:rgba(31,29,26,.10); --shadow-soft:rgba(31,29,26,.06);
  --serif:"Fraunces","Iowan Old Style",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --radius:18px; --radius-lg:28px;
  --header-h:60px; --player-h:74px; --tabbar-h:0px;
}
.dark-tokens, :root[data-theme="dark"] {
  --paper:#1A1815; --linen:#252320; --shell:#33302C;
  --ink:#F0EBE4; --smoke:#9A938A;
  --ember:#E68864; --ember-2:#D6754F; --lantern:#F0995A; --sage:#A3B398;
  --sand:#3D3934; --on-ember:#1A1815;
  --ember-wash:rgba(230,136,100,.10); --ember-glow:rgba(230,136,100,.24);
  --shadow:rgba(0,0,0,.45); --shadow-soft:rgba(0,0,0,.30);
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --paper:#1A1815; --linen:#252320; --shell:#33302C;
    --ink:#F0EBE4; --smoke:#9A938A;
    --ember:#E68864; --ember-2:#D6754F; --lantern:#F0995A; --sage:#A3B398;
    --sand:#3D3934; --on-ember:#1A1815;
    --ember-wash:rgba(230,136,100,.10); --ember-glow:rgba(230,136,100,.24);
    --shadow:rgba(0,0,0,.45); --shadow-soft:rgba(0,0,0,.30);
  }
}

/* ---- Reset / base ------------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
/* Ensure [hidden] always wins over component display rules (e.g. .globe-loading). */
[hidden] { display:none !important; }
html,body { height:100%; }
html { -webkit-text-size-adjust:100%; }
body {
  font-family:var(--sans); font-size:16px; line-height:1.55;
  color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  display:flex; flex-direction:column; height:100dvh; overflow:hidden;
}
/* paper grain — warmth */
body::before {
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme:dark){ body::before{ mix-blend-mode:screen; opacity:.05; } }
img { max-width:100%; display:block; }
button { font:inherit; color:inherit; cursor:pointer; background:none; border:0; }
input,select { font:inherit; color:inherit; }
a { color:var(--ember); text-decoration:none; }
::selection { background:var(--ember-glow); color:var(--ink); }
:focus-visible { outline:2.5px solid var(--ember); outline-offset:2px; border-radius:8px; }
.eyebrow { font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ember); }
.skip-link { position:absolute; left:-999px; top:8px; background:var(--ember); color:var(--on-ember); padding:10px 16px; border-radius:10px; z-index:400; }
.skip-link:focus { left:12px; }

/* ---- Buttons ------------------------------------------------------------ */
.btn { display:inline-flex; align-items:center; gap:.5em; font-weight:600; padding:.7em 1.2em; border-radius:999px; border:1px solid transparent; transition:transform .2s, background .2s, box-shadow .2s; white-space:nowrap; }
.btn-ember { background:var(--ember); color:var(--on-ember); box-shadow:0 12px 26px -14px var(--ember-glow); }
.btn-ember:hover { background:var(--ember-2); transform:translateY(-2px); }
.icon-btn { display:inline-grid; place-items:center; width:40px; height:40px; border-radius:50%; color:var(--ink); transition:background .2s, color .2s, transform .15s; }
.icon-btn:hover { background:var(--ember-wash); color:var(--ember); }

/* ---- Masthead ----------------------------------------------------------- */
.app-header {
  position:relative; z-index:30; flex:none; height:var(--header-h);
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--sand);
}
.app-bar { height:100%; max-width:1280px; margin-inline:auto; padding-inline:clamp(14px,3vw,28px); display:flex; align-items:center; gap:18px; }
.brand { display:inline-flex; align-items:center; gap:.55em; font-family:var(--serif); font-weight:600; font-size:1.18rem; color:var(--ink); }
.brand img { width:30px; height:30px; border-radius:9px; box-shadow:0 2px 8px -2px var(--shadow); }
.brand-tag { font-family:var(--mono); font-style:normal; font-size:.54rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ember); border:1px solid color-mix(in srgb,var(--ember) 36%,transparent); padding:2px 6px; border-radius:6px; }
.app-nav { display:flex; gap:4px; margin-inline:auto; }
.app-nav button { padding:.5em .95em; border-radius:999px; font-weight:500; color:var(--smoke); position:relative; transition:color .2s, background .2s; }
.app-nav button:hover { color:var(--ink); }
.app-nav button.active { color:var(--ember); background:var(--ember-wash); }
.bar-right { display:flex; align-items:center; gap:8px; }
.onair { display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--smoke); }
.onair i { width:7px; height:7px; border-radius:50%; background:var(--lantern); box-shadow:0 0 0 0 var(--ember-glow); animation:pulse 2.4s infinite; }
.get-app { background:var(--ink); color:var(--paper); padding:.55em 1em; border-radius:999px; font-size:.85rem; font-weight:600; transition:opacity .2s, transform .2s; }
.get-app:hover { opacity:.9; transform:translateY(-1px); text-decoration:none; }

/* ---- Main + views ------------------------------------------------------- */
main { position:relative; flex:1 1 auto; min-height:0; z-index:1; }
.view { position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
.view:not(.active) { display:none; }
#view-globe { overflow:hidden; }
.view-wrap { max-width:1160px; margin-inline:auto; padding:clamp(20px,4vw,40px) clamp(16px,4vw,32px) 40px; }
.view-head { margin-bottom:22px; }
.view-head h1 { font-family:var(--serif); font-weight:600; font-size:clamp(1.9rem,4vw,2.8rem); letter-spacing:-.02em; line-height:1.05; margin-top:6px; }
.view-head .lead { color:var(--smoke); margin-top:8px; font-size:1.05rem; }

/* ---- Chips -------------------------------------------------------------- */
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.chip { padding:.45em .9em; border-radius:999px; border:1px solid var(--sand); background:var(--linen); color:var(--ink); font-size:.86rem; font-weight:500; transition:all .18s; }
.chip:hover { border-color:var(--ember); color:var(--ember); transform:translateY(-1px); }
.chip.active { background:var(--ember); color:var(--on-ember); border-color:var(--ember); }

/* ---- Rails + grids ------------------------------------------------------ */
.rail { margin-bottom:30px; }
.rail-head { margin-bottom:14px; }
.rail-title { font-family:var(--serif); font-weight:600; font-size:1.3rem; letter-spacing:-.01em; margin-top:3px; }
.rail-track { display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x proximity; padding:4px 4px 14px; scrollbar-width:thin; }
.rail-track::-webkit-scrollbar { height:8px; }
.rail-track::-webkit-scrollbar-thumb { background:var(--sand); border-radius:8px; }
.rail-track .card { flex:0 0 162px; scroll-snap-align:start; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:14px; }
.rail-empty { color:var(--smoke); font-size:.95rem; padding:14px 4px; }

/* ---- Card --------------------------------------------------------------- */
.card { position:relative; min-width:0; background:var(--linen); border:1px solid var(--sand); border-radius:16px; padding:10px; transition:transform .22s, box-shadow .22s, border-color .22s; cursor:pointer; }
.card:hover { transform:translateY(-3px); box-shadow:0 18px 34px -24px var(--shadow); border-color:color-mix(in srgb,var(--ember) 40%,var(--sand)); }
.card.is-current { border-color:var(--ember); box-shadow:0 0 0 1.5px color-mix(in srgb,var(--ember) 55%,transparent); }
.card-art { position:relative; aspect-ratio:1; border-radius:12px; overflow:hidden; background:var(--g,linear-gradient(150deg,var(--lantern),var(--ember))); display:grid; place-items:center; }
.art-letter { font-family:var(--serif); font-weight:600; font-size:2.1rem; color:var(--on-ember); opacity:.92; }
.card-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:var(--shell); }
.card-play { position:absolute; right:8px; bottom:8px; width:38px; height:38px; border-radius:50%; background:var(--ember); color:var(--on-ember); display:grid; place-items:center; box-shadow:0 8px 18px -8px var(--ember-glow); opacity:0; transform:translateY(6px); transition:opacity .2s, transform .2s, background .2s; }
.card-play>svg { grid-area:1/1; }
.card:hover .card-play, .card.is-current .card-play, .card:focus-within .card-play, .card-play:focus-visible { opacity:1; transform:none; }
.card-play:hover { background:var(--ember-2); transform:scale(1.06); }
.card .i-pause { display:none; }
.card.is-playing .i-play { display:none; }
.card.is-playing .i-pause { display:block; }
.card-eq { position:absolute; left:8px; top:8px; display:none; align-items:flex-end; gap:2px; height:14px; padding:3px 4px; border-radius:6px; background:color-mix(in srgb,var(--ink) 42%,transparent); }
.card-eq b { width:2px; height:50%; background:#fff; border-radius:1px; animation:eqbar .9s ease-in-out infinite; }
.card-eq b:nth-child(2){ animation-delay:.15s; } .card-eq b:nth-child(3){ animation-delay:.3s; } .card-eq b:nth-child(4){ animation-delay:.45s; }
.card.is-playing .card-eq { display:flex; }
.card-fav { position:absolute; right:8px; top:8px; z-index:2; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; color:#fff; background:color-mix(in srgb,#000 42%,transparent); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); transition:color .2s, transform .15s, background .2s; }
.card-fav svg { fill:none; stroke:currentColor; stroke-width:2; transition:fill .2s; }
.card-fav svg, #npFav svg, #npxFav svg { stroke-linejoin:round; stroke-linecap:round; }
.card-fav:hover { transform:scale(1.12); color:#fff; }
.card-fav.is-fav { color:var(--ember); background:var(--shell); }
.card-fav.is-fav svg { fill:var(--ember); stroke:var(--ember); }
.card-body { padding:9px 4px 2px; }
.card-name { font-family:var(--serif); font-weight:600; font-size:.98rem; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-sub { font-size:.8rem; color:var(--smoke); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.card-meta { font-family:var(--mono); font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; color:var(--smoke); margin-top:5px; min-height:.9em; }
.chip-hls { color:var(--ember); border:1px solid color-mix(in srgb,var(--ember) 34%,transparent); border-radius:4px; padding:0 3px; }

/* ---- Search ------------------------------------------------------------- */
.search-bar { position:relative; display:flex; align-items:center; gap:10px; background:var(--shell); border:1px solid var(--sand); border-radius:14px; padding:0 14px; margin-bottom:14px; box-shadow:0 8px 20px -18px var(--shadow); }
.search-bar svg { color:var(--smoke); flex:none; }
.search-bar input { flex:1; border:0; background:none; padding:14px 0; font-size:1.05rem; outline:none; }
.facet-bar { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; align-items:center; }
.facet, .facet-select, .facet-clear { border:1px solid var(--sand); background:var(--linen); border-radius:999px; padding:.5em 1em; font-size:.86rem; font-weight:500; color:var(--ink); transition:all .18s; }
.facet:hover, .facet-select:hover { border-color:var(--ember); color:var(--ember); }
.facet.active { border-color:var(--ember); color:var(--ember); background:var(--ember-wash); }
.facet .facet-val:not(:empty)::before { content:" · "; color:var(--smoke); }
.facet-clear { color:var(--smoke); }
.facet-select { appearance:none; padding-right:1.8em; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%236E6962' stroke-width='1.6'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .8em center; }

/* ---- Facet sheet -------------------------------------------------------- */
.sheet { position:fixed; inset:0; z-index:200; display:none; align-items:flex-end; justify-content:center; background:color-mix(in srgb,var(--ink) 40%,transparent); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.sheet.open { display:flex; }
.sheet-card { width:min(560px,100%); max-height:78vh; display:flex; flex-direction:column; background:var(--shell); border:1px solid var(--sand); border-radius:var(--radius-lg) var(--radius-lg) 0 0; box-shadow:0 -30px 60px -30px var(--shadow); animation:sheetIn .28s cubic-bezier(.2,.8,.2,1); }
@media (min-width:640px){ .sheet { align-items:center; } .sheet-card { border-radius:var(--radius-lg); } }
.sheet-head { display:flex; align-items:center; justify-content:space-between; padding:18px 20px 10px; }
.sheet-head h3 { font-family:var(--serif); font-size:1.3rem; }
.sheet-search { margin:0 20px 8px; padding:11px 14px; border:1px solid var(--sand); border-radius:12px; background:var(--linen); outline:none; }
.sheet-body { overflow-y:auto; padding:6px 12px 18px; }
.sheet-item { display:flex; width:100%; align-items:center; justify-content:space-between; gap:12px; padding:11px 12px; border-radius:10px; text-align:left; transition:background .15s; }
.sheet-item:hover { background:var(--ember-wash); }
.sheet-item small { font-family:var(--mono); font-size:.7rem; color:var(--smoke); }

/* ---- Favorites + recently played --------------------------------------- */
.fav-section { margin-top:34px; }
.empty { text-align:center; padding:48px 16px; color:var(--smoke); }
.empty-art { font-size:2.4rem; color:var(--ember); }
.empty h2 { font-family:var(--serif); color:var(--ink); margin:10px 0 6px; }
.empty p { max-width:42ch; margin:0 auto 18px; }
.app-foot { margin-top:44px; padding-top:24px; border-top:1px solid var(--sand); font-size:.82rem; color:var(--smoke); display:grid; gap:6px; }
.app-foot a { color:var(--smoke); text-decoration:underline; text-underline-offset:2px; }
.app-foot a:hover { color:var(--ember); }

/* ---- Globe view --------------------------------------------------------- */
/* The globe sphere is dark in both themes; the SPACE around it = the page colour
   (cream in light, near-black in dark) so the dark planet sits cleanly on the page —
   no dark halo. MapLibre renders transparent outside the sphere, so this shows through. */
.globe-map { position:absolute; inset:0; background:var(--paper); }
.globe-tag { position:absolute; top:14px; left:14px; z-index:7; display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:.55rem; letter-spacing:.14em; text-transform:uppercase; color:var(--smoke);
  background:color-mix(in srgb, var(--paper) 70%, transparent); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid var(--sand); border-radius:999px; padding:5px 10px; }
.globe-tag svg { color:var(--ember); }
.globe-credit { position:absolute; left:14px; bottom:12px; z-index:7; font-family:var(--mono); font-size:.55rem;
  letter-spacing:.03em; color:var(--smoke); opacity:.85; }
.globe-credit a { color:inherit; text-decoration:underline; text-underline-offset:2px; }
.globe-credit a:hover { color:var(--ember); }
@media (max-width:600px) { .globe-stat { display:none; } }
.maplibregl-ctrl-attrib { font-size:10px; opacity:.7; }
.reticle { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:64px; height:64px; color:var(--ember); pointer-events:none; z-index:6; filter:drop-shadow(0 2px 8px rgba(0,0,0,.5)); animation:reticle 3.4s ease-in-out infinite; }
.globe-readout { position:absolute; top:16px; left:50%; transform:translateX(-50%); z-index:7; display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center; padding:9px 18px; border-radius:14px; background:color-mix(in srgb,#0b0d12 64%,transparent); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.12); color:#fff; max-width:min(86vw,420px); }
.globe-readout .rd-aim { font-family:var(--serif); font-weight:600; font-size:1.05rem; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:80vw; }
.globe-readout .rd-sub { font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.7); }
.globe-actions { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); z-index:7; }
.globe-coach { position:absolute; bottom:74px; left:50%; transform:translateX(-50%); z-index:7; font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.82); background:color-mix(in srgb,#0b0d12 58%,transparent); padding:7px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.12); transition:opacity .5s; animation:bob 3s ease-in-out infinite; }
.globe-coach.dismissed { opacity:0; pointer-events:none; }
.globe-loading { position:absolute; inset:0; z-index:8; display:flex; align-items:center; justify-content:center; gap:10px; color:#cfd6dd; background:#0b0d12; font-family:var(--mono); font-size:.8rem; letter-spacing:.08em; }
.spinner { width:18px; height:18px; border:2px solid rgba(255,255,255,.25); border-top-color:var(--ember); border-radius:50%; animation:spin .8s linear infinite; }
.globe-stat { position:absolute; right:14px; bottom:14px; z-index:7; font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.65); }
.globe-stat b { color:var(--ember); }

/* ---- Now-playing bar ---------------------------------------------------- */
.player { flex:none; display:none; align-items:center; gap:14px; height:var(--player-h); padding:0 clamp(12px,3vw,22px); background:color-mix(in srgb,var(--shell) 92%,transparent); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border-top:1px solid var(--sand); z-index:25; position:relative; }
.player.active { display:flex; }
.np-art { position:relative; width:52px; height:52px; flex:none; border-radius:12px; overflow:hidden; background:var(--g,linear-gradient(150deg,var(--lantern),var(--ember))); display:grid; place-items:center; box-shadow:0 4px 12px -6px var(--shadow); }
.np-art .art-letter { font-size:1.5rem; }
.np-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.np-info { min-width:0; flex:1 1 auto; }
.np-title { font-family:var(--serif); font-weight:600; font-size:1.02rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.np-sub { font-size:.8rem; color:var(--smoke); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.np-eq { display:none; align-items:flex-end; gap:2px; height:16px; flex:none; }
.np-eq b { width:3px; height:40%; background:var(--ember); border-radius:1px; animation:eqbar .9s ease-in-out infinite; }
.np-eq b:nth-child(2){ animation-delay:.12s; } .np-eq b:nth-child(3){ animation-delay:.24s; } .np-eq b:nth-child(4){ animation-delay:.36s; } .np-eq b:nth-child(5){ animation-delay:.48s; }
.player.is-playing .np-eq { display:inline-flex; }
.np-controls { display:flex; align-items:center; gap:4px; flex:none; }
.np-toggle { position:relative; width:50px; height:50px; border-radius:50%; background:var(--ember); color:var(--on-ember); display:grid; place-items:center; box-shadow:0 10px 22px -10px var(--ember-glow); transition:background .2s, transform .15s; }
.np-toggle:hover { background:var(--ember-2); transform:scale(1.04); }
.np-toggle>svg { grid-area:1/1; }
.np-toggle .i-pause { display:none; }
.player.is-playing .np-toggle .i-play { display:none; }
.player.is-playing .np-toggle .i-pause { display:block; }
.np-spin { position:absolute; inset:-4px; border-radius:50%; border:2px solid transparent; border-top-color:var(--on-ember); opacity:0; }
.player.is-tuning .np-toggle .i-play, .player.is-tuning .np-toggle .i-pause { opacity:.35; }
.player.is-tuning .np-spin { opacity:.9; animation:spin .8s linear infinite; }
.np-extra { display:flex; align-items:center; gap:6px; flex:none; }
.np-volume { width:96px; accent-color:var(--ember); }
#npFav svg { fill:none; stroke:currentColor; stroke-width:2; }
#npFav.is-fav { color:var(--ember); }
#npFav.is-fav svg { fill:var(--ember); stroke:var(--ember); }
/* sleep timer + mute */
.np-sleep-wrap { position:relative; display:flex; }
#npSleep { position:relative; }
#npSleep.active { color:var(--ember); }
.sleep-badge { position:absolute; right:2px; bottom:2px; font-family:var(--mono); font-size:.5rem; font-weight:600; color:var(--ember); pointer-events:none; }
.sleep-menu { position:absolute; right:0; bottom:calc(100% + 10px); display:none; flex-direction:column; min-width:140px; padding:6px; background:var(--shell); border:1px solid var(--sand); border-radius:14px; box-shadow:0 20px 44px -24px var(--shadow); z-index:60; }
.sleep-menu.open { display:flex; animation:sheetIn .2s ease; }
.sleep-menu button { text-align:left; padding:9px 12px; border-radius:9px; font-size:.9rem; color:var(--ink); }
.sleep-menu button:hover { background:var(--ember-wash); color:var(--ember); }
#npMute.muted { color:var(--ember); }
.player .np-art { cursor:pointer; }
.search-count { font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--smoke); margin-bottom:14px; min-height:1em; }

/* ---- Mobile tab bar ----------------------------------------------------- */
.tabbar { display:none; }

/* ---- Toast -------------------------------------------------------------- */
.toast { position:fixed; left:50%; bottom:calc(var(--player-h) + 16px); transform:translate(-50%,16px); z-index:300; background:var(--ink); color:var(--paper); padding:11px 18px; border-radius:999px; font-size:.88rem; box-shadow:0 18px 40px -20px var(--shadow); opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; max-width:90vw; text-align:center; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.noscript { padding:40px; text-align:center; }

/* ---- Reveal ------------------------------------------------------------- */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity:1; transform:none; }

/* ---- Keyframes ---------------------------------------------------------- */
@keyframes pulse { 0%{box-shadow:0 0 0 0 var(--ember-glow);} 70%{box-shadow:0 0 0 9px transparent;} 100%{box-shadow:0 0 0 0 transparent;} }
@keyframes eqbar { 0%,100%{height:30%;} 50%{height:100%;} }
@keyframes spin { to{transform:rotate(360deg);} }
@keyframes reticle { 0%,100%{opacity:.95;} 50%{opacity:.6;} }
@keyframes bob { 0%,100%{transform:translateX(-50%) translateY(0);} 50%{transform:translateX(-50%) translateY(-4px);} }
@keyframes sheetIn { from{transform:translateY(16px); opacity:.6;} to{transform:none; opacity:1;} }

/* ---- Accessibility helper ---------------------------------------------- */
.sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---- Offline banner ----------------------------------------------------- */
.net-banner { position:fixed; top:0; left:0; right:0; z-index:500; text-align:center; padding:8px 14px; font-size:.85rem; font-weight:600; color:var(--on-ember); background:var(--ember); box-shadow:0 6px 18px -10px var(--shadow); }

/* ---- Install + help buttons -------------------------------------------- */
.install-btn { display:inline-flex; align-items:center; gap:6px; padding:.5em .9em; border-radius:999px; border:1px solid var(--ember); color:var(--ember); background:var(--ember-wash); font-size:.82rem; font-weight:600; transition:background .2s, color .2s, transform .2s; }
.install-btn:hover { background:var(--ember); color:var(--on-ember); transform:translateY(-1px); }
@media (max-width:980px) { .help-btn { display:none; } }

/* ---- Full-screen Now Playing ------------------------------------------- */
.now-playing { position:fixed; inset:0; z-index:120; display:flex; flex-direction:column; align-items:center; padding:max(16px,env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom)); background:var(--paper); background-image:radial-gradient(120% 70% at 50% -8%, var(--ember-wash), transparent 62%); transform:translateY(100%); transition:transform .34s cubic-bezier(.2,.8,.2,1); overflow-y:auto; visibility:hidden; }
.now-playing.open { transform:none; visibility:visible; }
.npx-close { align-self:center; width:46px; height:38px; display:grid; place-items:center; color:var(--smoke); border-radius:10px; margin-bottom:6px; flex:none; }
.npx-close:hover { color:var(--ember); }
.npx-sheet { width:100%; max-width:460px; margin:0 auto; display:flex; flex-direction:column; align-items:center; text-align:center; }
.npx-art { width:min(64vw,300px); aspect-ratio:1; border-radius:24px; overflow:hidden; position:relative; background:var(--g,linear-gradient(150deg,var(--lantern),var(--ember))); display:grid; place-items:center; box-shadow:0 40px 80px -36px var(--shadow); }
.npx-art .art-letter { font-family:var(--serif); font-weight:600; font-size:4rem; color:var(--on-ember); }
.npx-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.npx-live { display:inline-flex; align-items:center; gap:6px; margin-top:22px; font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ember); opacity:0; transition:opacity .2s; }
.now-playing.is-playing .npx-live { opacity:1; }
.npx-live i { width:7px; height:7px; border-radius:50%; background:var(--ember); animation:pulse 2s infinite; }
.npx-title { font-family:var(--serif); font-weight:600; font-size:clamp(1.5rem,5vw,2.1rem); line-height:1.12; margin-top:6px; }
.npx-sub { color:var(--smoke); margin-top:6px; font-size:1rem; }
.npx-tags { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:14px; }
.npx-tags .t { font-family:var(--mono); font-size:.58rem; letter-spacing:.05em; text-transform:uppercase; color:var(--smoke); border:1px solid var(--sand); border-radius:999px; padding:3px 9px; }
.npx-controls { display:flex; align-items:center; gap:26px; margin-top:26px; }
.npx-big { position:relative; width:74px; height:74px; border-radius:50%; background:var(--ember); color:var(--on-ember); display:grid; place-items:center; box-shadow:0 16px 30px -12px var(--ember-glow); transition:transform .15s, background .2s; }
.npx-big:hover { background:var(--ember-2); transform:scale(1.05); }
.npx-big>svg { grid-area:1/1; }
.npx-big .i-pause { display:none; }
.now-playing.is-playing .npx-big .i-play { display:none; }
.now-playing.is-playing .npx-big .i-pause { display:block; }
.npx-spin { position:absolute; inset:-5px; border-radius:50%; border:2px solid transparent; border-top-color:var(--on-ember); opacity:0; }
.now-playing.is-tuning .npx-spin { opacity:.9; animation:spin .8s linear infinite; }
.now-playing.is-tuning .npx-big > svg { opacity:.4; }
.npx-volume { display:flex; align-items:center; gap:12px; margin-top:24px; width:min(82%,280px); }
.npx-volume .np-volume { flex:1; width:auto; }
.npx-sleep { margin-top:22px; width:100%; }
.npx-sleep-label { display:block; font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--smoke); margin-bottom:8px; }
.npx-sleep-chips { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.npx-sleep-chips .chip { padding:.42em .85em; font-size:.82rem; }
.npx-sleep-chips .chip.active { background:var(--ember); color:var(--on-ember); border-color:var(--ember); }
.npx-actions { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:26px; }
.npx-action { display:inline-flex; align-items:center; gap:7px; padding:.6em 1em; border-radius:12px; border:1px solid var(--sand); background:var(--linen); color:var(--ink); font-size:.86rem; font-weight:500; transition:border-color .18s, color .18s, transform .15s, background .18s; }
.npx-action:hover { border-color:var(--ember); color:var(--ember); transform:translateY(-1px); text-decoration:none; }
.npx-action svg { fill:none; stroke:currentColor; stroke-width:1.8; }
#npxFav.is-fav { border-color:var(--ember); color:var(--ember); background:var(--ember-wash); }
#npxFav.is-fav svg { fill:var(--ember); stroke:var(--ember); }
.npx-nextup { margin-top:22px; font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; color:var(--smoke); min-height:1em; }
.npx-nextup b { color:var(--ember); font-weight:400; }

/* ---- Shortcuts overlay ------------------------------------------------- */
.shortcuts { position:fixed; inset:0; z-index:210; display:none; align-items:center; justify-content:center; padding:20px; background:color-mix(in srgb,var(--ink) 45%,transparent); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.shortcuts.open { display:flex; }
.shortcuts-card { width:min(440px,100%); background:var(--shell); border:1px solid var(--sand); border-radius:var(--radius-lg); padding:4px 22px 22px; box-shadow:0 40px 80px -40px var(--shadow); animation:sheetIn .24s ease; }
.shortcuts-list { list-style:none; padding:0; margin:6px 0 0; display:grid; gap:12px; }
.shortcuts-list li { display:flex; align-items:center; gap:14px; font-size:.94rem; color:var(--ink); }
.shortcuts-list li span { flex:0 0 132px; display:flex; gap:5px; flex-wrap:wrap; }
kbd { font-family:var(--mono); font-size:.72rem; background:var(--linen); border:1px solid var(--sand); border-bottom-width:2px; border-radius:6px; padding:2px 7px; color:var(--ink); }

/* ---- Skeletons ---------------------------------------------------------- */
.card.skeleton { pointer-events:none; cursor:default; }
.card.skeleton .card-art { background:var(--sand); }
.card.skeleton .sk-line { display:block; height:11px; border-radius:6px; background:var(--sand); margin-top:9px; }
.card.skeleton .sk-line.short { width:55%; }
.card.skeleton .card-art, .card.skeleton .sk-line { animation:shimmer 1.4s ease-in-out infinite; }
@keyframes shimmer { 0%,100%{opacity:.5;} 50%{opacity:.85;} }

/* ---- Rail scroll arrows ------------------------------------------------- */
.rail-scroller { position:relative; }
.rail-nav { position:absolute; top:0; bottom:14px; width:54px; display:none; align-items:center; z-index:4; border:0; cursor:pointer; font-size:1.9rem; color:var(--ink); opacity:0; transition:opacity .2s, color .2s; }
.rail-nav.prev { left:0; justify-content:flex-start; padding-left:4px; background:linear-gradient(90deg,var(--paper) 35%, transparent); }
.rail-nav.next { right:0; justify-content:flex-end; padding-right:4px; background:linear-gradient(270deg,var(--paper) 35%, transparent); }
.rail-nav:hover { color:var(--ember); }
@media (hover:hover) and (min-width:821px) { .rail-scroller:hover .rail-nav { display:flex; opacity:1; } }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width:820px) {
  :root { --tabbar-h:62px; }
  .app-nav { display:none; }
  .get-app { display:none; }
  .tabbar {
    display:flex; flex:none; height:var(--tabbar-h);
    padding-bottom:env(safe-area-inset-bottom);
    background:color-mix(in srgb,var(--shell) 94%,transparent);
    -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
    border-top:1px solid var(--sand); z-index:24;
  }
  .tabbar button { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--smoke); font-size:.62rem; font-weight:600; letter-spacing:.02em; }
  .tabbar button.active { color:var(--ember); }
  .player { gap:10px; }
  .np-extra .np-volume, #npShare { display:none; }
  .np-controls #npPrev { display:none; }
  .toast { bottom:calc(var(--player-h) + var(--tabbar-h) + 14px); }
  .globe-actions { bottom:16px; }
}
@media (max-width:380px){ .np-extra { display:none; } }

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal { opacity:1; transform:none; }
}