/* base.css — tokens, reset, fonts, utilities (STEP 3: pitch-black OLED theme) */
:root{
  color-scheme:dark;
  --bg:#000000; --surface:#0b0b0e; --surface-2:#141419; --surface-3:#1f1f27;
  --text:#f6f4ef; --muted:#a9a6a1; --faint:#7d7b77; --line:rgba(255,255,255,.09);
  --accent:#ffffff; --accent-ink:#000; --anime:#b54aea; --movie:#ff6a1a;
  --tone:var(--anime);
  --nav-h:72px; --top-h:68px;
  --shadow:0 24px 70px rgba(0,0,0,.55);
  --font-sans:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-serif:"Newsreader",Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html{scrollbar-color:var(--surface-3) var(--bg); -webkit-text-size-adjust:100%; overflow-x:clip}
body{
  margin:0; min-height:100dvh; background:var(--bg); color:var(--text);
  font-family:var(--font-sans); line-height:1.45; -webkit-tap-highlight-color:transparent;
  overflow-x:clip;
}
button,input{font:inherit; color:inherit}
button{border:0; background:none; cursor:pointer}
a{color:inherit; text-decoration:none}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
svg{display:block}
.icon{width:21px; height:21px; flex:0 0 auto}
.hidden{display:none !important}
#app{min-height:100dvh}
.spacer{flex:1}
::selection{background:color-mix(in srgb, var(--tone) 30%, transparent)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
}

/* ---------- STEP 4: light (day) mode tokens ---------- */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f3f2ef; --surface:#ffffff; --surface-2:#e9e7e2; --surface-3:#dedbd4;
  --text:#171715; --muted:#64625e; --faint:#85817a; --line:rgba(23,23,21,.12);
  --shadow:0 18px 50px rgba(26,24,20,.12);
}

/* ---------- Inline tap loading (Entry 106) ----------
   The spinner sits ON the tapped element (card, button, episode pill)
   instead of a full-screen overlay. JS toggles .is-loading via
   MPV2.markLoading / MPV2.clearLoading; .is-loading-pos is added only
   when the element has no positioning of its own, so fixed/absolute
   elements (transition ghosts) keep theirs. */
.is-loading-pos{position:relative}
.is-loading{pointer-events:none}
.is-loading::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:rgba(0,0,0,.38); border-radius:inherit;
}
.is-loading::after{
  content:""; position:absolute; inset:0; z-index:3; margin:auto; pointer-events:none;
  width:26px; height:26px; border-radius:50%;
  border:3px solid rgba(255,255,255,.22); border-top-color:var(--tone,#22c55e);
  animation:tap-spin .7s linear infinite;
}
@keyframes tap-spin{to{transform:rotate(360deg)}}