:root {
    --bg: #0d0d0f;
    --surface: #141416;
    --surface-2: #1c1c1e;
    --line: #2c2c30;
    --white: #f5f5f5;
    --muted: #9a9aa2;
    --accent: #1fc463;
    --accent-hot: #3ee287;
    --accent-rgb: 31,196,99;
    --accent-dim: rgba(var(--accent-rgb),0.12);
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scrollbar-gutter: stable; background: var(--bg); }
  body {
    font-family: 'Nunito', system-ui, sans-serif;
    background: var(--bg); color: var(--white);
    overflow-x: hidden;
  }
  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; cursor: pointer; }
  img { display: block; max-width: 100%; }
  ::selection { background: var(--accent); color: var(--white); }
  .brandSlash { width: var(--slashW, 60px); height: var(--slashH, 6px); background: var(--accent); transform: skewX(-12deg); }

  #grain {
    position: fixed; inset: -50%; width: 200%; height: 200%;
    pointer-events: none; z-index: 90; opacity: 0.032;
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22240%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.9%22%20numOctaves%3D%222%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22240%22%20height%3D%22240%22%20filter%3D%22url(%23n)%22%2F%3E%3C%2Fsvg%3E');
  }

  /* ================= header ================= */
  #siteHeader {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    transition: background 0.25s var(--ease), border-color 0.25s var(--ease), backdrop-filter 0.25s var(--ease);
    border-bottom: 1px solid transparent;
  }
  #siteHeader.scrolled, #siteHeader.solid {
    background: rgba(13,13,15,0.82);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom-color: var(--line);
  }
  #headerInner {
    max-width: 1600px; margin: 0 auto; height: 108px; padding: 0 20px;
    display: flex; align-items: center; gap: 28px;
  }
  /* Interior pages don't have a hero for the big mark to sit in, so the
     header (and logo) shrink and hug the corner instead of eating a third
     of the viewport before any page content starts. */
  #siteHeader.solid #headerInner { height: 72px; padding: 0 18px; }
  .logo { display: flex; align-items: center; gap: 10px; flex: none; }
  /* The kitsune mark: low-poly fox mask in the site green — ears perk and
     the eyes blink when hovered, so the mascot feels alive without ever
     being busy. Wordmark keeps the two-tone ANI/CORE cut. */
  .foxMark { width: 31px; height: 31px; flex: none; overflow: visible; transition: transform 0.25s var(--ease); filter: drop-shadow(0 3px 10px rgba(var(--accent-rgb),0.35)); }
  .logo:hover .foxMark { transform: rotate(-7deg) scale(1.08); }
  .foxMark .fFace, .foxMark .fEar { fill: var(--accent); }
  .foxMark .fHi { fill: var(--accent-hot); opacity: 0.5; }
  .foxMark .fEye { transform-origin: center; transform-box: fill-box; }
  .logo:hover .foxMark .fEye { animation: foxBlink 1.6s var(--ease) infinite; }
  @keyframes foxBlink { 0%, 82%, 100% { transform: scaleY(1); } 90% { transform: scaleY(0.12); } }
  /* Wordmark: custom monoline letterforms drawn as SVG (see WORDMARK), not a
     font. Ani is white, Core is the site green, and the fox mask rides inside
     the o. Height covers the orbit's overshoot above and below the caps, so
     the letters themselves land around 29px. */
  .logoWord { height: 92px; width: auto; flex: none; display: block; overflow: visible; }
  #siteHeader.solid .logoWord { height: 52px; }
  .logoWord path, .logoWord circle { fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .lwA { stroke: var(--white); }
  .lwB { stroke: var(--accent); }
  .logoWord .lwFill { fill: var(--accent); stroke: none; }
  /* The mask inside the o: same fox, same greens, and it still blinks on hover. */
  .lwFox polygon { stroke: none; }
  .lwFox .fEar, .lwFox .fFace { fill: var(--accent); }
  .lwFox .fHi { fill: var(--accent-hot); opacity: 0.5; }
  .lwFox .fEye { transform-origin: center; transform-box: fill-box; }
  .logo:hover .lwFox .fEye { animation: foxBlink 1.6s var(--ease) infinite; }

  #mainNav { display: flex; align-items: center; gap: 26px; margin: 0 auto; }
  .navLink {
    position: relative; font-weight: 700; font-size: 14.5px; color: var(--muted);
    padding: 6px 2px; transition: color 0.2s var(--ease);
    display: flex; align-items: center; gap: 7px;
  }
  .navLink:hover, .navLink.active { color: var(--white); }
  .navLink::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px;
    background: var(--accent); transform: skewX(-12deg) scaleX(0); transform-origin: left;
    transition: transform 0.2s var(--ease);
  }
  .navLink:hover::after, .navLink.active::after { transform: skewX(-12deg) scaleX(1); }
  .liveDot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
  .liveDot::before {
    content: ''; position: absolute; inset: -4px; border-radius: 50%;
    border: 1.5px solid var(--accent); opacity: 0; animation: livePulse 2.2s ease-out infinite;
  }
  @keyframes livePulse { 0% { transform: scale(0.4); opacity: 0.9; } 70% { transform: scale(1.15); opacity: 0; } 100% { opacity: 0; } }
  .navBadge {
    min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px;
    background: var(--accent); color: var(--white); font-size: 11px; font-weight: 800;
    display: none; align-items: center; justify-content: center; line-height: 1;
  }
  .navBadge.show { display: inline-flex; }

  #headerActions { display: flex; align-items: center; gap: 10px; flex: none; margin-left: auto; }
  #mainNav + #headerActions { margin-left: 0; }
  .hBtn {
    display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px;
    background: transparent; border: 1px solid transparent; border-radius: 9px;
    color: var(--white); font-size: 14.5px; font-weight: 700;
    transition: background 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.15s var(--ease);
  }
  .hBtn:hover { background: rgba(255,255,255,0.07); border-color: var(--line); }
  .hBtn:active { transform: scale(0.95); }
  .hBtn svg { flex: none; }
  .kbdChip {
    font-family: var(--mono); font-size: 11px; color: var(--muted);
    border: 1px solid var(--line); border-radius: 5px; padding: 2px 7px; line-height: 1.3;
  }
  #randomBtn svg { transition: transform 0.25s var(--ease); }
  #randomBtn:hover svg { transform: rotate(90deg); }
  #avatar {
    width: 35px; height: 35px; border-radius: 50%; flex: none;
    background: linear-gradient(135deg, #35353b, #222226);
    border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 800; color: rgba(255,255,255,0.92);
    transition: transform 0.15s var(--ease);
  }
  #avatar:hover { transform: scale(1.08); }
  #avatar:active { transform: scale(0.94); }

  /* ================= shared buttons / chips ================= */
  .btnPrimary {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--accent); color: var(--white); border: none; border-radius: 8px;
    font-size: 15px; font-weight: 800; padding: 14px 28px;
    transition: background 0.15s var(--ease), box-shadow 0.2s var(--ease), transform 0.15s var(--ease);
  }
  .btnPrimary svg { transition: transform 0.2s var(--ease); }
  .btnPrimary:hover { background: var(--accent-hot); box-shadow: 0 8px 32px rgba(var(--accent-rgb),0.35); }
  .btnPrimary:hover svg { transform: translateX(3px); }
  .btnPrimary:active { transform: scale(0.97); }
  .btnGhost {
    display: inline-flex; align-items: center; gap: 9px;
    background: transparent; color: var(--white);
    border: 1px solid var(--line); border-radius: 8px;
    font-size: 15px; font-weight: 800; padding: 14px 22px;
    transition: border-color 0.15s var(--ease), background 0.15s var(--ease), transform 0.15s var(--ease);
  }
  .btnGhost:hover { border-color: var(--white); background: rgba(255,255,255,0.06); }
  .btnGhost:active { transform: scale(0.97); }
  .btnGhost.added { border-color: var(--accent); background: var(--accent-dim); animation: pop 0.2s var(--ease); }
  @keyframes pop { 50% { transform: scale(1.06); } }
  /* unreleased shows: Watch flips to an inert Coming Soon chip */
  .btnPrimary.comingSoon {
    background: var(--surface-2); color: var(--muted); cursor: default;
    box-shadow: none; border: 1px solid var(--line);
  }
  .btnPrimary.comingSoon:hover { background: var(--surface-2); box-shadow: none; }
  .btnPrimary.comingSoon svg { display: none; }
  .metaChip {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase;
    color: var(--white); background: var(--accent-dim); border: 1px solid var(--line);
    border-radius: 999px; padding: 5px 11px; line-height: 1; white-space: nowrap;
  }

  /* ================= section shells / titles ================= */
  .section { max-width: 1600px; margin: 0 auto; padding: 40px 20px 8px; }
  .sectionHead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
  .chLabel {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 6px;
    display: flex; align-items: center; gap: 8px;
  }
  .chLabel .kana { color: var(--muted); opacity: 0.6; letter-spacing: 0.3em; }
  .sectionTitle {
    font-family: 'Anton', sans-serif; font-weight: 400; text-transform: uppercase;
    font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: 0.02em; line-height: 1;
  }
  .sectionLink {
    font-size: 13.5px; font-weight: 700; color: var(--muted); flex: none; padding-bottom: 3px;
    transition: color 0.15s var(--ease);
  }
  .sectionLink:hover { color: var(--white); }
  .sectionLink span { color: var(--accent); }
  .section.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
  .section.reveal.on { opacity: 1; transform: none; }
  .section.reveal .card { opacity: 0; transform: translateY(16px); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); transition-delay: calc(var(--i, 0) * 40ms); }
  .section.reveal.on .card { opacity: 1; transform: none; }

  /* ================= rails + grids ================= */
  .railWrap { position: relative; }
  .rail {
    display: flex; gap: 16px; overflow-x: auto; padding: 8px 40px 16px 2px;
    scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none;
  }
  .rail::-webkit-scrollbar { display: none; }
  /* Edge shades signal "there's more this way": a wide, DARK falloff the
     edge cards visibly sink into — unmistakably "keep scrolling", not a
     subtle vignette.
     The right shade is a permanent baseline on .railMask, not toggled by
     scroll state — these rails almost always have more content to the
     right (several loop endlessly), and a dynamic mask that flips on/off
     with scroll position turned out to be unreliable in Firefox (a mask
     sharing any paint dependency with an active scroll offset, even one
     layer removed, flickers there — moving it to a non-scrolling wrapper
     plus forcing its own compositor layer wasn't enough to fully stop
     it). A static shade sidesteps that class of bug entirely: nothing
     ever toggles, so there's nothing to mis-render mid-scroll.
     The left shade stays dynamic (.fadeL, toggled by wireRail's scroll
     handler) since it's genuinely meaningful — hidden at the true start,
     shown once scrolled away from it — and left-edge flicker hasn't been
     reported. .railMask itself is the non-scrolling wrapper wireRail
     inserts around .rail, on its own compositor layer (translateZ(0)). */
  .railMask {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 140px), rgba(0,0,0,0.38) calc(100% - 44px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 140px), rgba(0,0,0,0.38) calc(100% - 44px), transparent 100%);
    transform: translateZ(0);
  }
  .railMask.fadeL {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,0.38) 44px, #000 140px, #000 calc(100% - 140px), rgba(0,0,0,0.38) calc(100% - 44px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,0.38) 44px, #000 140px, #000 calc(100% - 140px), rgba(0,0,0,0.38) calc(100% - 44px), transparent 100%);
  }
  /* Shade off entirely for infinite/looped rails (Continue Watching,
     Trending, Seasonal, Genre) for now — toggled from wireRail based on
     rail._loopWidth. Finite rails (Top 10) keep the shade above. */
  .railMask.looped, .railMask.looped.fadeL {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .rail > * { scroll-snap-align: start; flex: none; }
  /* Universal horizontal-scroll edge shades — the same "more this way"
     signal the card rails use, for every OTHER sideways-scrollable strip
     (tab rows, chip rows, toolbars, the heatmap). Right shade is a static
     baseline (see the .railMask comment above for why); left stays
     dynamic via .hfadeL, toggled from real scroll position by the shared
     JS (see refreshHFades). The mask lives on .hfadeMask, a non-scrolling
     wrapper ensureHMask() inserts around the real scroller, never on the
     scroller itself. flex/min-width here are only ever load-bearing for
     .epRangeRow (a flex child of .epToolbar/#dlToolbar); they're inert on
     every other (block-context) scroller this wraps. */
  .hfadeMask {
    flex: 1; min-width: 0;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 64px), rgba(0,0,0,0.35) calc(100% - 20px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 64px), rgba(0,0,0,0.35) calc(100% - 20px), transparent 100%);
    transform: translateZ(0);
  }
  .hfadeMask.hfadeL {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,0.35) 20px, #000 64px, #000 calc(100% - 64px), rgba(0,0,0,0.35) calc(100% - 20px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,0.35) 20px, #000 64px, #000 calc(100% - 64px), rgba(0,0,0,0.35) calc(100% - 20px), transparent 100%);
  }
  /* click-and-drag scrolling (mouse only — touch already scrolls natively) */
  .rail { cursor: grab; }
  .rail.dragging {
    cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none;
  }
  /* infinite (looped) rails manage their own snap-on-release in JS — native
     CSS scroll-snap fights the recycle-scrollLeft trick used to loop them */
  .rail[data-loop-count] { scroll-snap-type: none; }
  .rail.dragging > * { pointer-events: none; }
  .railArrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(20,20,22,0.85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid var(--line); color: var(--white);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s var(--ease), background 0.15s var(--ease), transform 0.15s var(--ease);
  }
  .railArrow.left { left: -14px; }
  .railArrow.right { right: -14px; }
  .railWrap:hover .railArrow.can { opacity: 1; pointer-events: auto; }
  .railArrow:hover { background: var(--surface-2); }
  .railArrow:active { transform: translateY(-50%) scale(0.92); }
  .posterGrid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 22px 16px; padding: 8px 0 16px;
  }
  .posterGrid .pCard { width: auto; }

  /* ================= portrait card ================= */
  .pCard { width: 180px; cursor: pointer; position: relative; }
  .pCard .art {
    position: relative; width: 100%; aspect-ratio: 2 / 3; border-radius: 10px; overflow: hidden;
    background: var(--surface-2); border: 1px solid var(--line);
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
  }
  .pCard:hover .art { transform: translateY(-6px) scale(1.03); box-shadow: 0 14px 34px rgba(0,0,0,0.55); border-color: #3a3a40; }
  .pCard .art img { width: 100%; height: 100%; object-fit: cover; }
  .cardChip {
    position: absolute; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
    background: rgba(13,13,15,0.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.08); color: var(--white);
    border-radius: 999px; padding: 4px 8px; line-height: 1;
  }
  .cardChip.tl { top: 8px; left: 8px; }
  .cardChip.tr { top: 8px; right: 8px; }
  .cardChip.tr b { color: #ffc24b; font-weight: 700; }
  .pCard .cTitle {
    font-size: 14px; font-weight: 700; margin-top: 10px; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .pCard .cSub { font-size: 12px; color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .airChip {
    position: absolute; left: 8px; right: 8px; bottom: 8px;
    display: flex; align-items: center; gap: 6px; width: fit-content; max-width: calc(100% - 16px);
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em;
    background: rgba(20,20,22,0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.08); border-radius: 999px; padding: 5px 9px; line-height: 1;
  }
  /* Countdowns now go down to the minute (see fmtCountdown), which can run
     longer than the old "Xd Yh" form — clip gracefully instead of blowing
     out the card on the narrowest widths, rather than trying to shrink the
     font past legibility. */
  .airChip .airTxt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .airChip .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; }
  .airChip.newEp { background: var(--accent); border-color: var(--accent); font-weight: 700; animation: pop 0.3s var(--ease); }
  .airChip.newEp .dot { background: var(--white); }
  /* wide slots (previews, sheets, hero) that had to fall back to portrait
     poster art: crop toward the top-ish center where faces usually are */
  img.posterCrop { object-position: center 22%; }

  /* ================= skeletons ================= */
  .skelShimmer { position: relative; overflow: hidden; background: var(--surface-2); }
  .skelShimmer::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
    animation: shimmer 1.5s infinite;
  }
  @keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
  .skelCard .art { background: var(--surface-2); }
  .skelCard .art::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
    animation: shimmer 1.5s infinite;
  }
  .skelLine { height: 13px; border-radius: 4px; margin-top: 10px; }
  .skelLine.short { width: 55%; height: 11px; margin-top: 6px; }

  /* ================= hover preview ================= */
  #preview {
    position: fixed; z-index: 60; width: 300px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
    overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,0.65);
    opacity: 0; transform: scale(0.94); pointer-events: none;
    transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
  }
  #preview.show { opacity: 1; transform: scale(1); pointer-events: auto; }
  #pvArt { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--surface-2); }
  #pvBody { padding: 14px 16px 16px; }
  #pvTitle { font-size: 16px; font-weight: 800; line-height: 1.25; }
  #pvChips { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0; }
  #pvChips .metaChip { font-size: 10px; padding: 4px 9px; }
  #pvSyn {
    font-size: 12.5px; color: var(--muted); line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    margin-bottom: 12px;
  }
  #pvBtns { display: flex; flex-wrap: wrap; gap: 7px; }
  #pvBtns .btnPrimary { font-size: 12.5px; padding: 9px 13px; border-radius: 7px; gap: 7px; }
  #pvBtns .btnGhost { font-size: 12.5px; padding: 9px 11px; border-radius: 7px; gap: 6px; }

  /* ================= overlays shared ================= */
  .overlay {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(13,13,15,0.7);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    opacity: 0; pointer-events: none; transition: opacity 0.2s var(--ease);
  }
  .overlay.open { opacity: 1; pointer-events: auto; }

  
  #feedbackOverlay {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(13,13,15,0.7);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    opacity: 0; pointer-events: none; transition: opacity 0.2s var(--ease, cubic-bezier(0.2,0.8,0.2,1));
    display: flex; align-items: center; justify-content: center;
  }
  #feedbackOverlay.open { opacity: 1; pointer-events: auto; }
  #feedbackModal {
    width: min(420px, 90vw); background: var(--surface, var(--grey, #141416));
    border: 1px solid var(--line, var(--grey-light, #2c2c30)); border-radius: 14px;
    padding: 22px; position: relative; transform: scale(0.97);
    transition: transform 0.2s var(--ease, cubic-bezier(0.2,0.8,0.2,1));
  }
  #feedbackOverlay.open #feedbackModal { transform: scale(1); }
  #feedbackClose { position: absolute; top: 10px; right: 10px; background: none; border: none; color: var(--muted, #9a9aa2); font-size: 15px; cursor: pointer; padding: 6px; }
  #feedbackTitle { margin: 0 0 4px; font-size: 17px; color: var(--white); }
  #feedbackSub { margin: 0 0 16px; color: var(--muted, #9a9aa2); font-size: 13px; line-height: 1.5; }
  #fbCategory, #fbMessage {
    background: var(--bg, #0d0d0f); color: var(--white); border: 1px solid var(--line, var(--grey-light, #2c2c30));
    border-radius: 8px; padding: 10px 12px; font-family: inherit; font-size: 14px; box-sizing: border-box; width: 100%;
  }
  #fbCategory { margin-bottom: 10px; }
  #fbMessage { min-height: 90px; resize: vertical; }
  #fbMsg { font-size: 12.5px; color: var(--muted, #9a9aa2); min-height: 16px; margin: 8px 0 12px; }
  #fbMsg.err { color: #ff6b6b; }
  #fbMsg.ok { color: var(--accent); }
  #fbSend { width: 100%; background: var(--accent); color: var(--white); border: none; font-weight: 800; border-radius: 8px; padding: 11px; cursor: pointer; }
  #fbSend:disabled { opacity: 0.6; cursor: default; }


  /* ---- search palette ---- */
  #palette {
    position: absolute; left: 50%; top: 12vh; transform: translateX(-50%) scale(0.97);
    width: min(640px, 92vw); max-height: 72vh; display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.6); overflow: hidden;
    transition: transform 0.2s var(--ease);
  }
  #searchOverlay.open #palette { transform: translateX(-50%) scale(1); }
  #palTop { display: flex; align-items: center; gap: 12px; padding: 16px 18px 12px; position: relative; }
  #palTop svg { flex: none; color: var(--muted); }
  #palInput {
    flex: 1; background: none; border: none; outline: none;
    color: var(--white); font-family: inherit; font-size: 18px; font-weight: 600;
  }
  #palInput::placeholder { color: #5c5c64; }
  #palCancel { display: none; background: none; border: none; color: var(--accent); font-weight: 800; font-size: 14px; }
  #palUnderline {
    position: absolute; left: 18px; right: 18px; bottom: 0; height: 2px;
    background: var(--accent); transform: scaleX(0); transform-origin: left;
    transition: transform 0.25s var(--ease);
  }
  #palette.focused #palUnderline { transform: scaleX(1); }
  #palFilters { display: flex; gap: 8px; padding: 12px 18px 4px; border-top: 1px solid var(--line); }
  .palChip {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em;
    background: transparent; border: 1px solid var(--line); color: var(--muted);
    border-radius: 999px; padding: 6px 12px;
    transition: border-color 0.15s var(--ease), color 0.15s var(--ease), background 0.15s var(--ease);
  }
  .palChip:hover { border-color: #46464e; color: var(--white); }
  .palChip.active { background: var(--accent); border-color: var(--accent); color: var(--white); }
  #palResults { overflow-y: auto; padding: 8px 8px 12px; }
  .palHead { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); padding: 12px 12px 7px; }
  .palRow {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    background: none; border: none; border-radius: 9px; padding: 8px 10px;
    color: var(--white); position: relative;
  }
  .palRow.sel { background: rgba(255,255,255,0.06); }
  .palRow.sel::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--accent); }
  .palRow img { width: 40px; height: 56px; object-fit: cover; border-radius: 5px; background: var(--surface-2); flex: none; }
  .palRow .rTitle { font-size: 14.5px; font-weight: 700; }
  .palRow .rTitle b { color: var(--accent); font-weight: 800; }
  .palRow .rMeta { font-size: 12px; color: var(--muted); margin-top: 2px; }
  .palRow.allResults { justify-content: center; color: var(--accent); font-weight: 800; font-size: 13.5px; }
  .palRank { font-family: 'Anton', sans-serif; font-size: 18px; color: var(--accent); width: 24px; text-align: center; flex: none; }
  .palX { margin-left: auto; background: none; border: none; color: var(--muted); font-size: 13px; padding: 6px; }
  .palX:hover { color: var(--white); }
  .palEmpty { padding: 28px 16px; text-align: center; color: var(--muted); font-size: 14px; }
  .palEmpty a { color: var(--accent); font-weight: 700; }
  .palSkelRow { display: flex; align-items: center; gap: 12px; padding: 8px 10px; }
  .palSkelRow .skelShimmer.thumb40 { width: 40px; height: 56px; border-radius: 5px; flex: none; }
  .palSkelRow .skelLines { flex: 1; }

  /* ---- random slot machine ---- */
  #slotBox { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; }
  #slotWindow {
    width: 240px; height: 340px; margin: 0 auto; border-radius: 14px; overflow: hidden;
    border: 2px solid var(--line); background: var(--surface-2); position: relative;
    transition: border-color 0.2s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  }
  #slotWindow.landed { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-dim), 0 20px 60px rgba(var(--accent-rgb),0.25); animation: settle 0.3s var(--ease); }
  @keyframes settle { from { transform: scale(1.04); } to { transform: scale(1); } }
  #slotStrip { display: flex; flex-direction: column; gap: 12px; will-change: transform; }
  #slotStrip img { width: 240px; height: 340px; object-fit: cover; border-radius: 12px; flex: none; }
  #slotInfo { margin-top: 22px; opacity: 0; transform: translateY(10px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
  #slotInfo.show { opacity: 1; transform: none; }
  #slotTitle { font-family: 'Anton', sans-serif; font-size: 26px; text-transform: uppercase; letter-spacing: 0.02em; }
  #slotMeta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--muted); margin: 8px 0 18px; text-transform: uppercase; }
  #slotBtns { display: flex; gap: 10px; justify-content: center; }
  #slotEyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; color: var(--muted); text-transform: uppercase; margin-bottom: 16px; }
  #slotEyebrow b { color: var(--accent); }

  /* ---- mobile long-press bottom sheet ---- */
  #sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 110;
    background: var(--surface); border-top: 1px solid var(--line);
    border-radius: 18px 18px 0 0; padding: 10px 20px calc(24px + env(safe-area-inset-bottom));
    transform: translateY(105%); transition: transform 0.3s var(--ease);
    touch-action: none;
  }
  #sheet.open { transform: translateY(0); }
  #sheetHandle { width: 42px; height: 4px; border-radius: 4px; background: var(--line); margin: 0 auto 14px; }
  #shArt { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; background: var(--surface-2); margin-bottom: 14px; }
  #shTitle { font-size: 18px; font-weight: 800; }
  #shChips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
  #shSyn { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  #shBtns { display: flex; gap: 10px; }
  #shBtns .btnPrimary, #shBtns .btnGhost { flex: 1; justify-content: center; padding: 13px 10px; font-size: 14px; }

  /* ---- info modal ---- */
  /* The overlay only centers the modal (flex, fixed height via inset:0) and
     never scrolls itself — scrolling happens inside #infoModal, so the
     backdrop and the modal's position on screen never move, only its own
     content does. The 6vh top+bottom padding on the overlay is what keeps
     the modal off both the top and bottom edges; max-height off that same
     padding is what caps the modal so it always has somewhere to scroll
     instead of growing past the viewport. overscroll-behavior stops
     scroll-chaining from bleeding past the modal into the page behind it. */
  #infoOverlay { z-index: 105; display: flex; align-items: flex-start; justify-content: center; padding: 6vh 0; }
  #infoModal {
    position: relative; width: min(860px, 94vw); max-height: 100%;
    overflow-y: auto; overscroll-behavior: contain;
    background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
    box-shadow: 0 40px 100px rgba(0,0,0,0.7);
    transform: translateY(14px); opacity: 0;
    transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
  }
  #infoOverlay.open #infoModal { transform: none; opacity: 1; }
  #infoClose {
    position: absolute; top: 14px; right: 14px; z-index: 5;
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(13,13,15,0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.12); color: var(--white); font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s var(--ease), transform 0.15s var(--ease);
  }
  #infoClose:hover { background: var(--accent); transform: scale(1.06); }
  /* radius matches #infoModal's own — the modal no longer clips via its own
     overflow:hidden (that broke position:sticky for the episode toolbar
     below), so the banner clips its own corners to look identical. */
  #infoBanner { position: relative; width: 100%; aspect-ratio: 16 / 6; min-height: 180px; background: var(--surface-2); overflow: hidden; border-radius: 16px 16px 0 0; }
  #infoBanner img { width: 100%; height: 100%; object-fit: cover; }
  #infoBanner img.posterBlur { filter: blur(22px) brightness(0.7); transform: scale(1.25); object-position: center 25%; }
  #infoBanner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, var(--surface) 100%); }
  #infoHead { display: flex; gap: 20px; padding: 0 28px; margin-top: -58px; position: relative; z-index: 2; }
  #infoPoster {
    width: 132px; border-radius: 10px; border: 1px solid var(--line); flex: none;
    aspect-ratio: 2 / 3; object-fit: cover; background: var(--surface-2);
    box-shadow: 0 14px 40px rgba(0,0,0,0.55);
  }
  #infoHeadText { padding-top: 64px; min-width: 0; }
  #infoTitle { font-family: 'Anton', sans-serif; font-weight: 400; text-transform: uppercase; font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.02; }
  /* Official title-logo art (TMDB), when available — see home.ts's
     #heroLogo for the same treatment in the hero. */
  #infoLogoImg { display: block; max-width: min(260px, 100%); max-height: 76px; object-fit: contain; object-position: left bottom; margin-bottom: 4px; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5)); }
  #infoNative { font-size: 12px; letter-spacing: 0.28em; color: var(--muted); margin-top: 6px; }
  #infoChips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
  #infoActions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 18px 28px 4px; }
  #infoActions .btnPrimary, #infoActions .btnGhost { font-size: 14px; padding: 12px 22px; }
  /* Icon-only circular link-out — deliberately a different shape from the
     pill CTAs so it reads as "leaves the site" rather than another action. */
  .infoAlBtn {
    width: 42px; height: 42px; border-radius: 50%; flex: none; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line);
    transition: border-color 0.15s var(--ease), transform 0.15s var(--ease);
  }
  .infoAlBtn:hover { border-color: #3DB4F2; transform: scale(1.06); }
  .infoAlBtn img { width: 100%; height: 100%; object-fit: cover; display: block; }
  #infoBody { padding: 14px 28px 26px; }
  #infoSyn { font-size: 14.5px; color: #c9c9cf; line-height: 1.65; }
  #infoSyn.clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  #infoSynMore { background: none; border: none; color: var(--accent); font-weight: 800; font-size: 13px; padding: 6px 0; }
  #infoFacts {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px 20px; margin: 18px 0 4px;
    border-block: 1px solid var(--line); padding: 16px 0;
  }
  .factLabel { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
  .factValue { font-size: 13.5px; font-weight: 700; }
  /* ---- modal tab strip ---- */
  #infoTabs {
    display: flex; gap: 24px; border-bottom: 1px solid var(--line); margin: 4px 0 20px;
    overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  }
  #infoTabs::-webkit-scrollbar { display: none; }
  #infoTabs button {
    position: relative; background: none; border: none; color: var(--muted);
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700;
    padding: 13px 2px; cursor: pointer; white-space: nowrap; flex: none;
    transition: color 0.15s var(--ease);
  }
  #infoTabs button:hover { color: var(--white); }
  #infoTabs button.active { color: var(--white); }
  #infoTabs button::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
    background: var(--accent); transform: skewX(-12deg) scaleX(0); transform-origin: left;
    transition: transform 0.2s var(--ease);
  }
  #infoTabs button.active::after { transform: skewX(-12deg) scaleX(1); }
  #infoTabs button b { color: var(--accent); font-weight: 700; margin-left: 6px; }
  .tabPane { display: none; }
  .tabPane.active { display: block; animation: paneIn 0.25s var(--ease); }
  @keyframes paneIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .infoSecTitle { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin: 20px 0 12px; }
  #infoTags { display: flex; flex-wrap: wrap; gap: 8px; }
  .tagChip { font-size: 12px; font-weight: 700; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; }
  /* ---- episode browser (info modal) ----
     Paged ranges instead of one endless scroll: a toolbar with range chips
     (50 eps per page) + a jump-to-episode box, skeleton shimmer on every
     thumbnail until it actually loads, and fixed card metrics so rows stay
     aligned whether or not an episode has art/title/overview. */
  /* Sticks to the top of the modal's own scroll (#infoModal) once you
     scroll past it — negative side margins + matching padding stretch its
     opaque background the full width of #infoBody's padding box, so
     episode cards scrolling underneath never peek out past its edges. */
  .epToolbar {
    display: flex; align-items: center; gap: 10px; min-height: 32px;
    position: sticky; top: 0; z-index: 4;
    background: var(--surface);
    margin: -14px -28px 14px; padding: 14px 28px 10px;
  }
  .epRangeRow {
    display: flex; gap: 6px; overflow-x: auto; padding: 2px 0;
    scrollbar-width: none; -ms-overflow-style: none;
    /* edge shades come from the dynamic .hfadeL/.hfadeR classes on the
       .hfadeMask wrapper (see refreshHFades), not a static mask — a row
       whose chips all fit shows no fade at all. flex/min-width that used
       to sit here for .epToolbar/#dlToolbar sizing now live on that
       wrapper instead, since it's the actual flex child now. */
  }
  .epRangeRow::-webkit-scrollbar { display: none; }
  .epRangeRow { cursor: grab; }
  .epRangeRow.dragging { cursor: grabbing; user-select: none; }
  .epRangeChip {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; white-space: nowrap; flex: none;
    background: var(--surface-2); border: 1px solid var(--line); color: var(--muted);
    border-radius: 999px; padding: 7px 12px; line-height: 1;
    transition: border-color 0.15s var(--ease), color 0.15s var(--ease), background 0.15s var(--ease);
  }
  .epRangeChip:hover { border-color: #46464e; color: var(--white); }
  .epRangeChip.active { background: var(--accent); border-color: var(--accent); color: var(--white); font-weight: 700; }
  .epJump {
    width: 74px; flex: none; height: 32px; text-align: center;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px;
    color: var(--white); font-family: var(--mono); font-size: 11px; outline: none;
    -moz-appearance: textfield; appearance: textfield;
  }
  .epJump::-webkit-outer-spin-button, .epJump::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .epJump:focus { border-color: var(--accent); }
  .epJump::placeholder { color: #5c5c64; }
  /* rich episode cards — every episode gets one, real thumbnail or generated placeholder */
  #infoEpsRich {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 18px 12px;
  }
  .epRich { background: none; border: none; text-align: left; padding: 0; color: var(--white); font-family: inherit; }
  .epRich .epThumb {
    position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden;
    border: 1px solid var(--line); background: var(--surface-2);
    transition: transform 0.15s var(--ease), border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
  }
  .epRich .epThumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.3s var(--ease); }
  .epRich .epThumb.ld img { opacity: 1; }
  .epRich .epThumb.skel::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
    animation: shimmer 1.5s infinite;
  }
  .epRich:hover .epThumb { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,0.5); }
  .epRich .epNum {
    position: absolute; left: 7px; bottom: 7px; z-index: 2;
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
    background: rgba(13,13,15,0.82); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 999px; padding: 4px 9px; line-height: 1;
  }
  .epRich .epPlayHint {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.32); opacity: 0; transition: opacity 0.15s var(--ease); z-index: 2;
  }
  .epRich:hover .epPlayHint { opacity: 1; }
  .epRich .epRichTitle {
    font-size: 12.5px; font-weight: 700; color: #c9c9cf; margin-top: 7px; line-height: 1.35;
    min-height: 2.7em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .epRich .epRichOverview {
    font-size: 11px; color: var(--muted); margin-top: 3px; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  /* Only the thumbnail dims — the release-date badge (added below) needs
     to stay fully legible, and CSS opacity on the card itself would cap
     every descendant's effective opacity along with it. */
  .epRich.upcoming { pointer-events: none; }
  .epRich.upcoming .epThumb img { filter: brightness(0.4) saturate(0.5); }
  .epRich.upcoming .epRichTitle, .epRich.upcoming .epRichOverview { opacity: 0.45; }
  .epRich .epAirBadge {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3;
    background: rgba(13,13,15,0.9); border: 1px solid rgba(255,255,255,0.16);
    color: var(--white); font-family: var(--mono); font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.03em; padding: 6px 11px; border-radius: 999px; white-space: nowrap;
    text-align: center; max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis;
  }
  .epRich.watched .epThumb { filter: saturate(0.4) brightness(0.55); }
  /* filler/recap flag (Jikan data) — bottom-right so it never fights the
     download button (top-left), seen check (top-right), or EP chip */
  .epFillerTag {
    position: absolute; right: 6px; bottom: 6px; z-index: 2;
    font-family: var(--mono); font-size: 8.5px; font-weight: 700; letter-spacing: 0.08em;
    background: rgba(210,153,34,0.92); color: #0d0d0f;
    border-radius: 5px; padding: 3px 6px; line-height: 1;
  }
  .epFillerTag.recap { background: rgba(88,166,255,0.9); }
  .epSeen {
    position: absolute; top: 6px; right: 6px; z-index: 2; width: 20px; height: 20px; border-radius: 50%;
    background: rgba(13,13,15,0.8); border: 1px solid rgba(255,255,255,0.15); color: #3fb950;
    font-size: 11px; display: flex; align-items: center; justify-content: center; line-height: 1;
  }
  .epRich.inprog .epThumb { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim); }
  .epBarOuter { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,0.18); z-index: 2; }
  .epBar { display: block; height: 100%; background: var(--accent); }
  .epRich.flash .epThumb { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); animation: pop 0.3s var(--ease); }
  #infoRecs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 16px 12px; }
  #infoRecs .pCard { width: auto; }
  #infoRecs .pCard .cTitle { font-size: 12.5px; }
  .infoLoading { padding: 60px 0 70px; text-align: center; color: var(--muted); font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; animation: tuningPulse 1.4s ease-in-out infinite; }
  @keyframes tuningPulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.85; } }

  /* ---- notification bell (new episodes for shows on your list) ---- */
  #notifBtn { position: relative; }
  #notifBtn .navBadge { position: absolute; top: 3px; right: 3px; }
  #notifMenu {
    position: fixed; z-index: 130; width: min(380px, calc(100vw - 20px));
    max-height: min(480px, 70vh); overflow-y: auto;
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.65); padding: 6px;
    opacity: 0; transform: translateY(-4px) scale(0.97); pointer-events: none; transform-origin: top right;
    transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
  }
  #notifMenu.open { opacity: 1; transform: none; pointer-events: auto; }
  .nfHead { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); padding: 10px 12px 8px; display: flex; align-items: center; gap: 7px; }
  .nfHead .liveDot { width: 6px; height: 6px; }
  .nfItem {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    background: none; border: none; border-radius: 10px; padding: 8px 10px;
    color: var(--white); font-family: inherit; cursor: pointer; position: relative;
  }
  .nfItem:hover { background: rgba(255,255,255,0.05); }
  .nfItem img { width: 40px; height: 56px; object-fit: cover; border-radius: 6px; background: var(--surface-2); flex: none; }
  .nfItem .nfTxt { flex: 1; min-width: 0; }
  .nfItem .nfTitle { font-size: 13.5px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .nfItem .nfMeta { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--muted); margin-top: 3px; text-transform: uppercase; }
  .nfItem .nfMeta b { color: var(--accent); font-weight: 700; }
  .nfItem .nfNew { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; box-shadow: 0 0 8px rgba(var(--accent-rgb),0.8); }
  .nfEmpty { padding: 26px 18px 28px; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.6; }
  .nfEmpty a { color: var(--accent); font-weight: 700; }

  /* ---- watch order / related (info modal) ---- */
  #infoRelated { display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 10px; }
  .relCard {
    display: flex; gap: 11px; align-items: center; text-align: left;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px;
    padding: 8px; cursor: pointer; color: var(--white); font-family: inherit;
    transition: border-color 0.15s var(--ease), transform 0.15s var(--ease);
  }
  .relCard:hover { border-color: var(--accent); transform: translateY(-2px); }
  .relCard img { width: 42px; height: 58px; object-fit: cover; border-radius: 6px; flex: none; background: var(--surface); }
  .relCard .rcTxt { min-width: 0; }
  .relCard .rcRel { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
  .relCard .rcTitle { font-size: 13px; font-weight: 700; line-height: 1.3; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .relCard .rcMeta { font-size: 11px; color: var(--muted); margin-top: 2px; }

  /* ---- characters & voice actors (info modal) ---- */
  #infoChars { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
  .charCard { display: flex; align-items: stretch; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
  .charCard .chHalf { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; padding: 8px 10px; transition: background 0.15s var(--ease); }
  .charCard .chHalf.va { flex-direction: row-reverse; text-align: right; }
  a.chHalf:hover { background: rgba(255,255,255,0.05); }
  a.chHalf:hover .nm { color: var(--accent); }
  .charCard img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: none; background: var(--surface); }
  .charCard .chTxt { min-width: 0; }
  .charCard .nm { font-size: 12px; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .charCard .rl { font-size: 10px; color: var(--muted); margin-top: 1px; }
  .charCard .chDiv { width: 1px; background: var(--line); flex: none; }

  /* ---- per-episode download (info modal grid) ---- */
  .epRich .epDl {
    position: absolute; top: 6px; left: 6px; z-index: 3; width: 27px; height: 27px; border-radius: 50%;
    background: rgba(13,13,15,0.85); border: 1px solid rgba(255,255,255,0.14); color: #fff;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.15s var(--ease), background 0.15s var(--ease); cursor: pointer;
  }
  .epRich:hover .epDl { opacity: 1; }
  .epRich .epDl:hover { background: var(--accent); border-color: var(--accent); }
  @media (pointer: coarse) { .epRich .epDl { opacity: 0.75; } }

  /* ---- batch download picker ---- */
  /* Same contained-scroll/centering setup as #infoOverlay/#infoModal (see
     the comment there) — the overlay only centers this modal, the modal
     scrolls its own content, so opening it over the info modal never
     shifts either one around. Sits above infoOverlay (z-index 105). */
  #dlOverlay { z-index: 120; display: flex; align-items: flex-start; justify-content: center; padding: 6vh 0; }
  #dlModal {
    position: relative; width: min(640px, 94vw); max-height: 100%;
    overflow-y: auto; overscroll-behavior: contain;
    background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
    box-shadow: 0 40px 100px rgba(0,0,0,0.7); padding: 24px 24px 20px;
    transform: translateY(14px); opacity: 0;
    transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
  }
  #dlOverlay.open #dlModal { transform: none; opacity: 1; }
  #dlClose {
    position: absolute; top: 14px; right: 14px; z-index: 5;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--surface-2); border: 1px solid var(--line); color: var(--white); font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s var(--ease), transform 0.15s var(--ease);
  }
  #dlClose:hover { background: var(--accent); transform: scale(1.06); }
  #dlHead { padding-right: 44px; margin-bottom: 16px; }
  #dlTitle { font-family: 'Anton', sans-serif; font-weight: 400; text-transform: uppercase; font-size: 1.4rem; line-height: 1.1; margin-bottom: 10px; }
  #dlAudioToggle { display: flex; gap: 6px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px; width: max-content; }
  #dlAudioToggle button { border: none; background: transparent; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: 0.04em; border-radius: 999px; padding: 6px 16px; transition: background 0.2s var(--ease), color 0.2s var(--ease); }
  #dlAudioToggle button.active { background: var(--accent); color: var(--white); }
  #dlToolbar { display: flex; align-items: center; gap: 10px; min-height: 32px; margin-bottom: 14px; }
  #dlGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px; }
  .dlEp {
    position: relative; border-radius: 10px; overflow: hidden; cursor: pointer;
    background: var(--surface-2); border: 1px solid var(--line);
    transition: border-color 0.15s var(--ease);
  }
  .dlEp:hover { border-color: #46464e; }
  .dlEp.checked { border-color: var(--accent); }
  .dlEp .dlThumb { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--surface-2); }
  .dlEp .dlThumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .dlEp .dlNum { position: absolute; left: 6px; bottom: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; background: rgba(13,13,15,0.75); color: var(--white); border-radius: 4px; padding: 3px 6px; }
  .dlEp .dlCheck {
    position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%;
    background: rgba(13,13,15,0.75); border: 1.5px solid rgba(255,255,255,0.5);
    display: flex; align-items: center; justify-content: center; color: transparent;
    transition: background 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
  }
  .dlEp.checked .dlCheck { background: var(--accent); border-color: var(--accent); color: var(--white); }
  #dlFoot { border-top: 1px solid var(--line); padding-top: 16px; }
  #dlHint { font-size: 12px; color: var(--muted); margin-bottom: 12px; }
  #dlFootBtns { display: flex; align-items: center; gap: 10px; }
  #dlFootBtns .btnGhost { font-size: 12.5px; padding: 10px 14px; }
  #dlFootBtns #dlGo { margin-left: auto; font-size: 13.5px; padding: 11px 20px; }
  #dlFootBtns #dlGo:disabled { opacity: 0.45; cursor: default; }
  @media (max-width: 768px) {
    #dlOverlay { padding: 0; }
    #dlModal { width: 100vw; max-height: 100dvh; min-height: 100dvh; border-radius: 0; border: none; padding: 18px 16px 16px; }
    #dlGrid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
    #dlFootBtns { flex-wrap: wrap; }
    #dlFootBtns #dlGo { margin-left: 0; flex: 1 1 100%; justify-content: center; }
  }

  /* ---- account dropdown ---- */
  #accountMenu {
    position: fixed; z-index: 130; min-width: 230px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.65); padding: 6px;
    opacity: 0; transform: translateY(-4px) scale(0.97); pointer-events: none; transform-origin: top right;
    transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
  }
  #accountMenu.open { opacity: 1; transform: none; pointer-events: auto; }
  .amHead { padding: 10px 12px 10px; border-bottom: 1px solid var(--line); margin-bottom: 5px; }
  .amName { font-size: 14.5px; font-weight: 800; }
  .amEmail { font-size: 11.5px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; }
  .amGuest { font-size: 12px; color: var(--muted); line-height: 1.5; }
  .amItem {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    background: none; border: none; border-radius: 8px; padding: 10px 12px;
    color: var(--white); font-size: 14px; font-weight: 700; font-family: inherit;
  }
  .amItem:hover { background: rgba(255,255,255,0.06); }
  .amItem svg { flex: none; color: var(--muted); }
  .amItem.primary { background: var(--accent); justify-content: center; margin-bottom: 5px; }
  .amItem.primary:hover { background: var(--accent-hot); }
  .amItem.signout { color: var(--muted); border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; margin-top: 5px; }
  .amItem.signout:hover { color: var(--white); }
  #avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

  /* ---- list status menu ---- */
  #listMenu {
    position: fixed; z-index: 130; min-width: 210px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.65); padding: 6px;
    opacity: 0; transform: scale(0.95); pointer-events: none; transform-origin: top left;
    transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
  }
  #listMenu.open { opacity: 1; transform: scale(1); pointer-events: auto; }
  #listMenu .lmHead { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); padding: 8px 12px 6px; }
  .lmItem {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    background: none; border: none; border-radius: 8px; padding: 9px 12px;
    color: var(--white); font-size: 14px; font-weight: 700;
  }
  .lmItem:hover { background: rgba(255,255,255,0.06); }
  .lmItem .lmDot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
  .lmItem.on { color: var(--accent); }
  .lmItem.remove { color: var(--muted); border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; margin-top: 4px; }
  .lmItem.remove:hover { color: var(--white); }

  /* ================= footer ================= */
  footer { margin-top: 56px; background: var(--surface); border-top: 1px solid var(--line); position: relative; z-index: 1; }
  #footInner {
    max-width: 1440px; margin: 0 auto; padding: 44px 32px 20px;
    display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px;
  }
  #footBrand p { color: var(--muted); font-size: 13.5px; margin-top: 12px; max-width: 300px; line-height: 1.55; }
  #footBrand .kana { font-size: 11px; letter-spacing: 0.4em; color: var(--muted); opacity: 0.5; margin-top: 14px; }
  .footCol h4 { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; font-weight: 600; }
  .footCol a { display: block; font-size: 14px; font-weight: 600; color: var(--muted); padding: 5px 0; transition: color 0.15s var(--ease), transform 0.15s var(--ease); }
  .footCol a:hover { color: var(--white); transform: translateX(3px); }
  #footBottom {
    max-width: 1440px; margin: 0 auto; padding: 16px 32px 22px;
    border-top: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    font-size: 12.5px; color: var(--muted);
  }
  #footKeys { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; display: flex; gap: 18px; }
  #footKeys .kbdChip { margin-right: 6px; }

  /* ================= mobile tab bar ================= */
  #tabBar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    display: none; align-items: stretch;
    height: calc(60px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(13,13,15,0.88);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
  }
  .tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    background: none; border: none; color: var(--muted); font-size: 10px; font-weight: 800;
    position: relative; font-family: inherit;
  }
  .tab svg { width: 21px; height: 21px; }
  .tab.active { color: var(--accent); }
  .tab.active::before {
    content: ''; position: absolute; top: 0; left: 50%; margin-left: -14px;
    width: 28px; height: 3px; background: var(--accent); transform: skewX(-12deg);
  }
  .tab .navBadge { position: absolute; top: 7px; left: calc(50% + 4px); }

  /* ================= responsive (shared) ================= */
  @media (max-width: 1024px) {
    #mainNav { display: none; }
    #headerInner { padding: 0 20px; }
    /* the nav is hidden here but still in the DOM, so the desktop
       "#mainNav + #headerActions { margin-left: 0 }" rule still matches —
       without this override the action cluster (bell/random/avatar) floats
       just right of the logo instead of hugging the right edge */
    #headerActions { margin-left: auto; }
  }
  @media (max-width: 768px) {
    #headerInner { height: 64px; padding: 0 12px; }
    #siteHeader.solid #headerInner { padding: 0 12px; }
    .logoWord { height: 55px; }
    #siteHeader.solid #headerInner { height: 50px; }
    #siteHeader.solid .logoWord { height: 32px; }
    #searchBtn { display: none; }
    /* Tighten the action cluster on phones: the desktop 42px pill buttons
       with 14px side-padding and 10px gaps read as three scattered icons
       out near the edge. Slim icon-only buttons in a snug group sit cleanly
       at the right instead. */
    #headerActions { gap: 2px; }
    .hBtn { height: 38px; padding: 0 8px; }
    #avatar { width: 32px; height: 32px; margin-left: 4px; }
    #tabBar { display: flex; }
    body { padding-bottom: 76px; }
    .section { padding: 32px 16px 4px; }
    .railArrow { display: none; }
    .rail { gap: 12px; padding-right: 24px; }
    /* narrower screens get a tighter fade so it doesn't eat a whole card */
    .railMask {
      -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 52px), transparent 100%);
      mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 52px), transparent 100%);
    }
    .railMask.fadeL {
      -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 52px, #000 calc(100% - 52px), transparent 100%);
      mask-image: linear-gradient(90deg, transparent 0, #000 52px, #000 calc(100% - 52px), transparent 100%);
    }
    .pCard { width: 128px; }
    .pCard .cTitle { font-size: 12.5px; }
    .posterGrid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 18px 10px; }
    #footInner { grid-template-columns: 1fr; gap: 26px; padding: 34px 20px 16px; }
    #footBottom { flex-direction: column; align-items: flex-start; padding: 16px 20px calc(18px + env(safe-area-inset-bottom)); }
    #searchOverlay #palette {
      top: 0; left: 0; transform: none; width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; border: none;
    }
    #searchOverlay.open #palette { transform: none; }
    #palCancel { display: block; }
    #slotWindow { width: 200px; height: 284px; }
    #slotStrip img { width: 200px; height: 284px; }
    #infoOverlay { padding: 0; } /* mobile modal already fills the viewport — no extra gap needed around it */
    #infoModal { width: 100vw; max-height: 100dvh; min-height: 100dvh; border-radius: 0; border: none; }
    #infoBanner { border-radius: 0; }
    #infoHead { padding: 0 18px; gap: 14px; }
    #infoPoster { width: 104px; }
    #infoActions { padding: 16px 18px 0; }
    #infoActions .btnPrimary, #infoActions .btnGhost { flex: 1 1 45%; justify-content: center; }
    #infoBody { padding: 12px 18px calc(30px + env(safe-area-inset-bottom)); }
    .epToolbar { margin: -12px -18px 14px; padding: 12px 18px 10px; }
  }
  @media (min-width: 769px) { #sheet, #sheetBackdrop { display: none; } }

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