/* ═══════════════════════════════════════════════════════════════════════
   WNCORE RADIO — style.css  (MERGED — do not add @media blocks here)
   Single source of truth for all desktop styles.
   Load order in index.html: style.css → mobile.css (that's it)
   
   Merge sources (in cascade priority order):
     1. style.css         — core design system, variables, components
     2. horror_upgrade.css — ARG horror overlays, eye system, terminals  
     3. p5-transitions.css — page transitions, genre stamp animations
     4. wncore-ui-improvements.css — toast, scroll reveal, active row
     5. wncore-bugfix.css  — targeted overrides (highest priority, loads last)
   ═══════════════════════════════════════════════════════════════════════ */

/* ══ CORE DESIGN SYSTEM ══════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════
   WNCORE RADIO v3 — GLOBAL STYLESHEET
   ARG / Radio hybrid frontend
═══════════════════════════════════════════════════════ */
/* Google Fonts loaded via <link> in index.html (non-blocking) */

:root {
  --bg:#f5f3ef; --surface:#ffffff; --surface2:#f0ede8;
  --border:rgba(0,0,0,0.08); --text:#1a1814; --text2:#6b6560; --text3:#a8a39e;
  --accent:#c8472a; --accent2:#e8753a; --blue:#2563eb; --green:#16a34a;
  --header-h:64px; --player-h:76px;
  --anime-pink:#e91e8c; --anime-blue:#00b4d8; --anime-purple:#7c3aed;
}

/* ── RESET ── */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

/* ── ANTI-SAVE PROTECTION ── */
img, video {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  pointer-events: auto;
}
img {
  -webkit-user-drag: none;
}
video {
  -webkit-user-select: none;
  context-menu: none;
}

/* ── DARK MODE ── */
body.dark-mode{
  --bg:#0e0d0b; --surface:#161412; --surface2:#1e1c18;
  --border:rgba(255,255,255,0.07); --text:#f0ede8;
  --text2:#8a8278; --text3:#4a4640; --green:#22c55e;
}
body.dark-mode header{background:rgba(20,18,15,0.96);border-bottom:1px solid rgba(255,255,255,0.12)}
body.dark-mode .featured-card:hover{box-shadow:0 12px 32px rgba(0,0,0,0.4)}
body.dark-mode .sign-in-btn{background:var(--surface2);color:var(--text);border:1px solid rgba(255,255,255,0.08)}
body.dark-mode .genre-strip-wrap{background:var(--surface)}
body.dark-mode .oauth-btn.google{background:#fff;color:#1a1814}
body.dark-mode .oauth-btn.apple{background:#000;color:#fff}
body.dark-mode .oauth-btn.discord{background:#5865F2;color:#fff}

/* ── MINIMAL MODE ── */
body.minimal-mode{--bg:#fafafa;--surface:#fff;--surface2:#f5f5f5;--border:rgba(0,0,0,0.06);--text:#111;--text2:#555;--text3:#999}
body.minimal-mode .grain-overlay,
body.minimal-mode .globe-section,
body.minimal-mode .ticker-wrap,
body.minimal-mode .arg-card,
body.minimal-mode .np-art::after,
body.minimal-mode .np-wave,
body.minimal-mode .minimal-hidden,
body.minimal-mode .st-cover-cell,
body.minimal-mode .fc-cover-wrap,
body.minimal-mode .shp-cover{display:none!important}
body.minimal-mode header{background:rgba(250,250,250,0.98)!important;backdrop-filter:none}
body.minimal-mode .player-bar{background:rgba(255,255,255,0.98)!important;border-top:1px solid var(--border)!important}
body.minimal-mode .featured-card:hover,body.minimal-mode .rec-card:hover{transform:none!important;box-shadow:none!important}
body.minimal-mode.dark-mode{--bg:#111;--surface:#1a1a1a;--surface2:#222;--text:#eee;--text2:#aaa;--text3:#666}
/* Disable P5 wipe overlay and page enter animation in minimal mode */
body.minimal-mode #p5-wipe{display:none!important}
body.minimal-mode .page.p5-enter{animation:none!important;opacity:1!important;transform:none!important}

/* ── BODY ── */
html {
  overflow-y: scroll; /* Force iOS Safari to use a stable scroll container — prevents scroll-lock when fixed bars appear/disappear */
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
}
body{
  font-family:var(--font-body);background:var(--bg);color:var(--text);
  overflow-x:hidden;padding-top:var(--header-h);padding-bottom:calc(var(--player-h) + 56px);
  /* Improve touch scroll performance */
  -webkit-overflow-scrolling:touch;
}

/* Mobile: disable expensive CSS effects that cause jank */

/* ── GRAIN ── */
.grain-overlay{
  position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events:none;z-index:9000;
}

/* ── HEADER ── */
header{
  position:fixed;top:0;left:0;right:0;height:var(--header-h);
  background:rgba(245,243,239,0.92);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);z-index:500;display:flex;align-items:center;
}

/* ═══════════════════════════════════════════════════════════════
   FLUID HEADER SYSTEM — single source of truth.
   Progressive disclosure: elements hide in order of importance
   as viewport narrows. Menu button ALWAYS has guaranteed space.
   No duplicate rules in mobile.css needed for header.
═══════════════════════════════════════════════════════════════ */
.header-inner{
  width:100%;max-width:none;margin:0;
  padding:0 clamp(12px,3vw,24px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0;
  min-width:0;
}
/* Left zone: logo + collapse btn together */
.header-left{
  display:flex;align-items:center;gap:6px;flex-shrink:0;
}
/* Logo inside header-left */
.logo{
  display:flex;align-items:baseline;gap:8px;text-decoration:none;flex-shrink:0;
}
/* Nav — true center column, scrollable, no overflow */
nav#main-nav{
  justify-self:center;
  min-width:0;
  overflow:hidden;
}
/* Controls — pinned to right */
.header-right{
  margin-left:auto;
  display:flex;align-items:center;
  gap:6px;
  flex-shrink:0;
  min-width:44px;
}

/* Logo mark & freq badge */
.logo-mark{
  font-family:var(--font-display);
  font-size:clamp(1.05rem,2.5vw,1.35rem);
  font-weight:700;color:var(--text);letter-spacing:-0.5px;
}
.logo-freq{
  font-family:var(--font-mono);font-size:0.58rem;color:var(--accent);
  letter-spacing:1px;padding:2px 6px;border:1px solid var(--accent);border-radius:3px;
}


/* Nav — scrollable so all items reachable, no visible scrollbar */
nav{display:flex;gap:1px;min-width:0;flex-shrink:1;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;}
nav::-webkit-scrollbar{display:none;}
nav a{
  font-size:0.82rem;color:var(--text2);text-decoration:none;
  padding:6px 10px;border-radius:6px;transition:all 0.15s;
  font-weight:400;white-space:nowrap;display:flex;align-items:center;gap:5px;
}
nav a:hover{background:var(--surface2);color:var(--text)}
nav a.active{color:var(--text);font-weight:500}
nav a svg{width:13px;height:13px;opacity:0.6}

/* Header-right — flex container, always rightmost, always fully visible.
   Items inside hide progressively via breakpoints below. */
.header-right{
  margin-left:auto;
  display:flex;align-items:center;
  gap:6px;
  flex-shrink:0;
  /* Hard minimum so menu button is never clipped */
  min-width:44px;
}
.header-right .lang-selector { order: 90; }
.header-right .sign-in-btn { order: 100; margin-left:auto; }
.header-right .desktop-menu-btn { order: 101; }
.header-right .mobile-menu-btn { order: 102; } 
.header-right .sign-in-btn{
  margin-left:auto;
}
/* ── Progressive element hiding — largest to smallest viewport ──
   Breakpoints chosen so header-right never overflows its container.
   Calculation at 390px screen:
     padding: 24px | logo: ~120px | gap: 8px | header-right max: 238px
     Visible at ≤768px: clock(0) + theme(74) + search(34) + menu(44) = 152px ✓ */

/* ≤900px — hide nav (hamburger takes over), hide live-dot, minimal-btn */
@media (max-width:900px) {
  nav#main-nav { display:none !important; }
  .live-dot    { display:none !important; }
  .minimal-btn { display:none !important; }
  .mobile-menu-btn { display:flex !important; }
  /* On mobile the center column collapses since nav is hidden — 
     make header-inner just logo-left | spacer | controls */
  .header-inner { grid-template-columns: auto 1fr auto; }
}

/* ≤1100px — compress 3-col sidebars for medium viewports */
@media (max-width:1100px) {
  .page-wrap--3col { grid-template-columns: minmax(0, 220px) minmax(0, 1fr) minmax(0, 220px); }
}

/* ≤768px — hide sign-in (in mobile drawer instead), hide theme labels */
@media (max-width:768px) {
  .sign-in-btn         { display:none !important; }
  .theme-toggle-labels { display:none !important; }
  header { height:var(--header-h,56px); }
  .logo-mark { font-size:1.1rem; }
}

/* ≤600px — hide clock, shrink theme toggle track */
@media (max-width:600px) {
  .header-clock        { display:none !important; }
  .theme-toggle-track  { width:40px; height:24px; }
  .theme-toggle-thumb  { width:16px; height:16px; top:3px; left:3px; }
  body.dark-mode .theme-toggle-thumb { transform:translateX(16px); }
  .header-inner { padding:0 12px; gap:6px; }
}

/* ≤480px — hide theme toggle entirely, live-count already gone,
   only logo + search + menu remain = ~212px total, safe on 390px */
@media (max-width:480px) {
  .theme-toggle        { display:none !important; }
  .live-count          { display:none !important; }
  .nav-constellation-star { display:none !important; }
  .nav-aberrant-star   { display:none !important; }
}

/* Desktop menu button — visible on desktop, hidden on mobile. */
.desktop-menu-btn{
  display:flex;
  width:44px;height:44px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--surface2);
  color:var(--text);cursor:pointer;
  align-items:center;justify-content:center;
  flex-shrink:0;
}

/* Ensure mobile-menu-btn always has its own space — never squeezed to 0 */
.mobile-menu-btn{
  display:none;
  width:44px;height:44px;          /* 44px min touch target */
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--surface2);
  color:var(--text);cursor:pointer;
  align-items:center;justify-content:center;
  flex-shrink:0;                   /* never shrinks */
}

@media (max-width:900px) {
  .desktop-menu-btn,
  .desktop-side-menu,
  .desktop-nav-backdrop {
    display: none !important;
  }
}


.desktop-nav-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:595;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);}
.desktop-nav-backdrop.open{display:block;}
.desktop-side-menu{
  position:fixed;top:0;left:0;bottom:0;
  width:min(320px, 90vw);
  max-width:360px;
  max-height:100vh;
  padding:22px 18px 18px;
  background:var(--surface);
  border-right:1px solid var(--border);
  box-shadow:4px 0 40px rgba(0,0,0,0.25);
  transform:translateX(-105%);
  transition:transform 0.25s ease;
  z-index:600;
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.desktop-side-menu.open{transform:translateX(0);}
.desktop-side-menu-header{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--border);
}
.desktop-side-menu-status{
  display:flex;align-items:center;gap:10px;
  padding:0 4px 10px;
  border-bottom:1px solid var(--border);
  color:var(--text2);
  font-size:0.85rem;
}
.desktop-live-dot{
  width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,0.45);
  flex-shrink:0;
}
.desktop-side-menu-header span{font-size:0.95rem;font-weight:700;color:var(--text);}
.desktop-side-menu-close{
  border:none;background:none;color:var(--text3);font-size:1.5rem;line-height:1;cursor:pointer;padding:6px;
}
.desktop-side-menu a{
  display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;border:1px solid var(--border);
  background:var(--surface2);color:var(--text2);text-decoration:none;font-weight:500;
  transition:background 0.2s,color 0.2s;
}
.desktop-side-menu a svg{
  width:18px;height:18px;flex-shrink:0;stroke:currentColor;
}
.desktop-side-menu a span{display:block;min-width:0;}
.desktop-side-menu a:hover,
.desktop-side-menu a.active{background:var(--surface);color:var(--text);border-color:var(--accent);} 

.mobile-nav-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:493;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);}
.mobile-nav-backdrop.open{display:block;}

/* ── HEADER ELEMENT BASE STYLES ── */
.live-dot{display:none !important;}

.ticker-live-status{font-family:var(--font-mono);font-size:0.72rem;font-weight:700;letter-spacing:1px;color:var(--accent);text-transform:uppercase;white-space:nowrap;}
.ticker-live-status::before{content:"";display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 2px rgba(22,163,74,0.2);animation:pulse-dot 2s ease-in-out infinite;vertical-align:middle;}
@keyframes pulse-dot{0%,100%{box-shadow:0 0 0 2px rgba(22,163,74,0.2)}50%{box-shadow:0 0 0 5px rgba(22,163,74,0.1)}}

.sign-in-btn{font-size:0.78rem;font-weight:500;padding:8px 14px;border-radius:8px;background:var(--text);color:#fff;border:none;cursor:pointer;transition:opacity 0.15s;white-space:nowrap;flex-shrink:0}
.sign-in-btn:hover{opacity:0.85}

.minimal-btn{font-size:0.7rem;padding:6px 11px;border-radius:6px;border:1px solid var(--border);background:var(--surface2);color:var(--text3);cursor:pointer;transition:all 0.15s;font-family:var(--font-mono);letter-spacing:0.5px;white-space:nowrap;flex-shrink:0}
.minimal-btn:hover{color:var(--text);border-color:rgba(0,0,0,0.2)}
.minimal-btn.on{background:var(--text);color:#fff;border-color:var(--text)}

.search-btn{width:36px;height:36px;border-radius:8px;border:1px solid var(--border);background:var(--surface2);color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.15s;flex-shrink:0}
.search-btn:hover{color:var(--text);border-color:rgba(0,0,0,0.15)}
.search-btn svg{width:14px;height:14px}

/* Theme toggle — base */
.theme-toggle{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;flex-shrink:0}
.theme-toggle-track{width:52px;height:28px;border-radius:14px;background:var(--surface2);border:1px solid var(--border);position:relative;transition:background 0.3s,border-color 0.3s;flex-shrink:0}
body.dark-mode .theme-toggle-track{background:#2d2a24;border-color:rgba(255,255,255,0.18)}
.theme-toggle-thumb{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--text);transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1),background 0.3s;display:flex;align-items:center;justify-content:center}
body.dark-mode .theme-toggle-thumb{transform:translateX(24px);background:#f0ede8}
.theme-toggle-icon{width:12px;height:12px;flex-shrink:0}
.theme-toggle-labels{display:flex;align-items:center;gap:6px}
.tl-light,.tl-dark{font-size:0.58rem;color:var(--text3);letter-spacing:0.5px;line-height:1}
body:not(.dark-mode) .tl-light{color:var(--accent);font-weight:600}
body.dark-mode .tl-dark{color:var(--text2);font-weight:600}

/* Search modal */
.search-modal-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);backdrop-filter:blur(6px);z-index:900;align-items:flex-start;justify-content:center;padding:80px 16px 16px}
.search-modal-backdrop.open{display:flex}
.search-box{background:var(--surface);border:1px solid var(--border);border-radius:16px;width:100%;max-width:580px;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,0.15)}
.search-input-row{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--border)}
.search-input-row svg{width:16px;height:16px;color:var(--text3);flex-shrink:0}
.search-input{flex:1;border:none;background:none;outline:none;font-family:var(--font-body);font-size:0.92rem;color:var(--text)}
.search-input::placeholder{color:var(--text3)}
.search-filters{display:flex;gap:6px;padding:10px 18px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.search-filter-btn{font-size:0.68rem;padding:4px 10px;border-radius:12px;border:1px solid var(--border);background:none;color:var(--text3);cursor:pointer;transition:all 0.15s;font-family:var(--font-body)}
.search-filter-btn.active{background:var(--text);color:var(--bg);border-color:var(--text)}
.search-results{max-height:360px;overflow-y:auto;padding:6px 0}
.search-result-item{display:flex;align-items:center;gap:12px;padding:10px 18px;cursor:pointer;transition:background 0.12s}
.search-result-item:hover{background:var(--surface2)}
.sr-icon{width:36px;height:36px;border-radius:8px;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.sr-name{font-size:0.83rem;font-weight:500}
.sr-meta{font-size:0.67rem;color:var(--text3);margin-top:2px}
.search-empty{padding:36px 18px;text-align:center;font-size:0.8rem;color:var(--text3)}
.search-close{background:none;border:none;color:var(--text3);cursor:pointer;font-size:1rem;padding:4px 8px;border-radius:6px;transition:all 0.15s}
.search-close:hover{color:var(--text);background:var(--surface2)}

.mobile-nav{
  display:none;position:fixed;
  top:var(--header-h,56px);left:0;right:0;bottom:0;
  background:var(--bg);
  z-index:499; /* below header(500) above backdrop(493) */
  padding:12px 16px 24px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  flex-direction:column;gap:6px;
  transform:translateY(-8px);opacity:0;
  transition:transform 0.22s cubic-bezier(.4,0,.2,1),opacity 0.22s;
  box-sizing:border-box;
}
.mobile-nav.open{display:flex;transform:translateY(0);opacity:1;}
.mobile-nav a{font-size:1.05rem;color:var(--text2);text-decoration:none;padding:14px 16px;border-radius:10px;border:1px solid var(--border);background:var(--surface);font-weight:500;display:flex;align-items:center;gap:10px;min-height:52px;}
.mobile-nav a:hover,.mobile-nav a.active{background:var(--surface2);color:var(--text)}
.mobile-nav a svg{width:18px;height:18px;opacity:0.6}
.mobile-signal-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:4px 0;}
.mobile-signal-item{display:flex;align-items:center;gap:8px;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--text2);min-height:52px;min-width:0;justify-content:center;}
.mobile-signal-item:hover{background:var(--surface2);color:var(--text)}
.mobile-signal-icon{display:flex;align-items:center;justify-content:center;padding:12px;border-radius:12px;border:1px solid var(--border);background:var(--surface);width:52px;height:52px;}
.mobile-signal-icon:hover{background:var(--surface2)}
.mobile-signal-caption{font-size:0.84rem;font-weight:600;color:var(--text1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.mobile-nav-divider{height:1px;background:var(--border);margin:8px 0}
.mobile-nav-actions{display:flex;flex-direction:column;gap:8px;margin-top:8px}

/* ── PAGES ── */
.page{display:none}
.page.active{display:block}
/* Anime page needs flex for left/right side panels */
#page-anime.active{display:flex}

/* ── SIGN IN MODAL ── */
.modal-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);backdrop-filter:blur(4px);z-index:800;align-items:center;justify-content:center;padding:16px}
.modal-backdrop.open{display:flex}
.modal-box{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:32px 28px;width:100%;max-width:400px;position:relative;animation:modalSlideIn 0.2s ease}
@keyframes modalSlideIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.modal-close{position:absolute;top:14px;right:14px;background:none;border:none;color:var(--text3);cursor:pointer;padding:6px;border-radius:6px;transition:all 0.15s;display:flex;align-items:center;justify-content:center}
.modal-close:hover{background:var(--surface2);color:var(--text)}
.modal-close svg{width:16px;height:16px}
.modal-title{font-family:var(--font-display);font-size:1.4rem;font-weight:700;margin-bottom:4px}
.modal-sub{font-size:0.78rem;color:var(--text3);margin-bottom:22px}
.modal-input{width:100%;padding:11px 13px;border:1px solid var(--border);border-radius:10px;background:var(--surface2);color:var(--text);font-family:var(--font-body);font-size:0.85rem;outline:none;margin-bottom:11px;transition:border-color 0.15s}
.modal-input:focus{border-color:var(--accent)}
.modal-input::placeholder{color:var(--text3)}
.modal-btn{width:100%;padding:12px;background:var(--text);color:var(--bg);border:none;border-radius:10px;font-family:var(--font-body);font-size:0.85rem;font-weight:600;cursor:pointer;transition:opacity 0.15s;margin-bottom:12px}
.modal-btn:hover{opacity:0.85}
.modal-divider{display:flex;align-items:center;gap:12px;margin:6px 0 14px;color:var(--text3);font-size:0.72rem}
.modal-divider::before,.modal-divider::after{content:"";flex:1;height:1px;background:var(--border)}
.modal-oauth{display:flex;gap:8px}
.oauth-btn{flex:1;padding:10px 8px;border-radius:10px;font-size:0.75rem;font-weight:600;cursor:pointer;transition:all 0.18s;display:flex;align-items:center;justify-content:center;gap:7px;border:1.5px solid transparent}
.oauth-btn svg{width:17px;height:17px;flex-shrink:0}
.oauth-btn.google{background:#fff;color:#3c4043;border-color:#e0e0e0}
.oauth-btn.google:hover{box-shadow:0 2px 8px rgba(0,0,0,0.14);border-color:#c8c8c8}
.oauth-btn.apple{background:#000;color:#fff;border-color:#000}
.oauth-btn.apple:hover{background:#1a1a1a}
.oauth-btn.discord{background:#5865F2;color:#fff;border-color:#5865F2}
.oauth-btn.discord:hover{background:#4752C4}
.modal-footer{text-align:center;margin-top:14px;font-size:0.72rem;color:var(--text3)}
.modal-footer a{color:var(--accent);text-decoration:none;cursor:pointer}

/* ── TICKER ── */
.ticker-wrap{background:var(--surface2);overflow:hidden;height:28px;display:flex;align-items:center}
.ticker-label{flex-shrink:0;font-family:var(--font-mono);font-size:0.58rem;letter-spacing:2px;color:var(--accent);padding:0 14px 0 18px;border-right:1px solid var(--border);white-space:nowrap}
.ticker-track{flex:1;overflow:hidden}
.ticker-inner{display:inline-flex;align-items:center;white-space:nowrap;animation:ticker 60s linear infinite;font-family:var(--font-mono);font-size:0.58rem;color:var(--text2);letter-spacing:0.5px}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.t-sep{color:var(--border);margin:0 18px}
.t-warn{color:var(--accent)}

/* ── GLOBE ── */
.globe-section{position:relative;height:420px;background:#030712;overflow:hidden}
#globe-container{width:100%;height:100%;cursor:crosshair}
.globe-overlay-left{position:absolute;left:0;top:0;bottom:0;width:340px;background:linear-gradient(to right,rgba(3,7,18,0.95) 60%,transparent);display:flex;flex-direction:column;justify-content:center;padding:36px 36px 36px 40px;pointer-events:none;z-index:10}
.globe-kicker{font-family:var(--font-mono);font-size:0.58rem;letter-spacing:3px;color:var(--accent);margin-bottom:10px}
.globe-title{font-family:var(--font-display);font-size:2.2rem;line-height:1.1;color:#fff;font-weight:700;margin-bottom:10px}
.globe-title em{font-style:italic;color:var(--accent2)}
.globe-sub{font-size:0.8rem;color:rgba(255,255,255,0.45);line-height:1.6;margin-bottom:20px;font-weight:300}
.globe-stats{display:flex;gap:20px}
.globe-stat{display:flex;flex-direction:column;gap:2px}
.globe-stat-num{font-family:var(--font-display);font-size:1.4rem;color:#fff;font-weight:700}
.globe-stat-lbl{font-size:0.62rem;color:rgba(255,255,255,0.35);letter-spacing:1px;text-transform:uppercase}
.globe-hint{position:absolute;bottom:18px;right:20px;font-family:var(--font-mono);font-size:0.58rem;color:rgba(255,255,255,0.25);letter-spacing:1px;z-index:10;animation:fadeInUp 1s ease 2s both}
@keyframes fadeInUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ── MAIN LAYOUT ── */
.page-wrap{width:100%;padding:40px 24px 40px 24px;display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr) minmax(0,280px);gap:24px;box-sizing:border-box;overflow:hidden}
.page-wrap--3col{grid-template-columns:minmax(0,260px) minmax(0,1fr) minmax(0,260px)}

/* ── GENRE STRIP ── */
.genre-strip-wrap{background:var(--surface);border-bottom:1px solid var(--border);padding:14px 0}
.genre-strip{max-width:1440px;margin:0 auto;padding:0 24px;display:flex;gap:7px;overflow-x:auto;scrollbar-width:none}
.genre-strip::-webkit-scrollbar{display:none}
.genre-btn{flex-shrink:0;font-size:0.74rem;font-weight:500;padding:7px 14px;border-radius:18px;border:1px solid var(--border);background:var(--surface);color:var(--text2);cursor:pointer;transition:all 0.15s;white-space:nowrap;display:flex;align-items:center;gap:5px}
.genre-btn svg{width:12px;height:12px;opacity:0.7}
.genre-btn:hover{border-color:rgba(0,0,0,0.2);color:var(--text)}
.genre-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.genre-btn.active svg{opacity:1}

/* ── SECTION HEADERS ── */
.section-hd{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px}
.section-title{font-family:var(--font-display);font-size:1.25rem;font-weight:700}
.section-more{font-size:0.72rem;color:var(--text3);text-decoration:none;cursor:pointer;transition:color 0.15s}
.section-more:hover{color:var(--text)}

/* ── FEATURED CARDS ── */
.featured-row{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:36px}
.featured-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px;cursor:pointer;transition:all 0.2s;position:relative;overflow:hidden}
.featured-card::before{content:"";position:absolute;inset:0;border-radius:14px;background:linear-gradient(135deg,rgba(200,71,42,0.04) 0%,transparent 60%);opacity:0;transition:opacity 0.2s}
.featured-card:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,0.08)}
.featured-card:hover::before{opacity:1}
.fc-flag{font-size:1.5rem;margin-bottom:9px}
.fc-flag svg{width:28px;height:28px}
.fc-name{font-size:0.95rem;font-weight:600;margin-bottom:4px;color:var(--text)}
.fc-meta{font-size:0.68rem;color:var(--text3);margin-bottom:12px;letter-spacing:0.3px}
.fc-now{font-size:0.67rem;color:var(--text2);background:var(--surface2);border-radius:6px;padding:5px 9px;line-height:1.4;font-style:italic}
.fc-listeners{position:absolute;top:14px;right:14px;font-family:var(--font-mono);font-size:0.57rem;color:var(--text3);letter-spacing:0.5px}
.fc-playing-badge{position:absolute;top:14px;right:14px;font-size:0.57rem;color:var(--green);font-weight:600;background:rgba(22,163,74,0.08);border:1px solid rgba(22,163,74,0.2);padding:2px 7px;border-radius:10px;display:none;align-items:center;gap:4px}
.fc-playing-badge.show{display:flex}
.fc-playing-badge::before{content:"";width:4px;height:4px;background:var(--green);border-radius:50%;animation:pulse-dot 1.5s infinite}

/* ── STATION TABLE ── */
.station-table{width:100%;border-collapse:collapse;margin-bottom:36px}
.station-table tr{border-bottom:1px solid var(--border);cursor:pointer;transition:background 0.15s}
.station-table tr:hover{background:var(--surface)}
body.dark-mode .station-table tr:hover{background:rgba(30,28,24,0.85)}
.station-table td{padding:12px 6px;vertical-align:middle}
.st-num{font-family:var(--font-mono);font-size:0.68rem;color:var(--text3);width:32px;text-align:right}
.st-eq{width:22px;padding-left:10px}
.st-eq-bars{display:flex;gap:2px;align-items:flex-end;height:12px}
.st-eq-bars span{width:2px;border-radius:1px;background:var(--accent);display:block;height:3px}
.st-eq-bars.playing span{animation:eqA 0.8s ease-in-out infinite}
.st-eq-bars.playing span:nth-child(2){animation-delay:0.2s}
.st-eq-bars.playing span:nth-child(3){animation-delay:0.4s}
@keyframes eqA{0%,100%{height:3px}50%{height:12px}}
.st-name{font-size:0.86rem;font-weight:500;color:var(--text)}
.st-tags{display:flex;gap:4px;margin-top:3px;flex-wrap:wrap}
.st-tag{font-size:0.57rem;color:var(--text3);background:var(--surface2);padding:2px 6px;border-radius:4px;letter-spacing:0.3px}
.st-country{font-size:0.73rem;color:var(--text2);width:110px}
.st-bitrate{font-family:var(--font-mono);font-size:0.63rem;color:var(--text3);width:56px;text-align:right}
.st-play-btn{width:28px;height:28px;border-radius:50%;background:transparent;border:1px solid var(--border);color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.15s}
.st-play-btn:hover{background:var(--text);color:#fff;border-color:var(--text)}
.st-play-btn svg{width:10px;height:10px}

/* ── REC CARDS ── */
.rec-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:36px}
.rec-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px;cursor:pointer;transition:all 0.15s;display:flex;gap:12px;align-items:center}
.rec-card:hover{box-shadow:0 6px 20px rgba(0,0,0,0.06);transform:translateY(-2px)}
.rec-art{width:44px;height:44px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.rec-art svg{width:22px;height:22px}
.rec-art img{width:100%;height:100%;object-fit:cover;border-radius:8px;display:block}
.rec-info{min-width:0}
.rec-name{font-size:0.8rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rec-desc{font-size:0.67rem;color:var(--text3);margin-top:2px}

/* ── ANIME SECTION ── */
.anime-banner{position:relative;border-radius:16px;overflow:hidden;height:200px;background:linear-gradient(135deg,#0d0d1f 0%,#1a0533 40%,#0a1628 100%);margin-bottom:20px;cursor:pointer}
.anime-banner-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0.35;transition:opacity 0.5s}

/* Trivsion — animated canvas backdrop + rotating artwork in banner */
.anime-trivsion{
  position:absolute;inset:0;z-index:0;overflow:hidden;
  will-change:transform; /* promote container to its own compositor layer */
}
.anime-trivsion-slide{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;
  transition:opacity 1.4s ease;
  /* NO animation on inactive slides — only .tv-active gets Ken Burns */
  animation:none;
}
.anime-trivsion-slide.tv-active{
  opacity:0.45;
  /* Ken Burns only on the visible slide */
  animation:tv-kenburns 12s ease-in-out infinite alternate;
  will-change:transform;
}
.anime-trivsion-slide.tv-prev{opacity:0;animation:none;}
@keyframes tv-kenburns{
  0%   {transform:scale(1.0) translate(0%,0%)}
  50%  {transform:scale(1.06) translate(-1.5%,-0.5%)}
  100% {transform:scale(1.03) translate(1%,0.5%)}
}
.anime-banner-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(13,13,31,0.85) 0%,rgba(13,13,31,0.4) 100%)}
.anime-banner-content{position:relative;z-index:2;padding:28px;height:100%;display:flex;flex-direction:column;justify-content:flex-end}
.anime-banner-kicker{font-family:var(--font-mono);font-size:0.58rem;letter-spacing:3px;color:var(--anime-pink);margin-bottom:8px}
.anime-banner-title{font-family:var(--font-display);font-size:1.9rem;color:#fff;font-weight:700;line-height:1.1;margin-bottom:6px;text-shadow:0 2px 20px rgba(233,30,140,0.3)}
.anime-banner-sub{font-size:0.78rem;color:rgba(255,255,255,0.6);font-weight:300}
.anime-now-playing{position:absolute;top:16px;right:16px;z-index:2;display:flex;align-items:center;gap:6px;background:rgba(233,30,140,0.15);border:1px solid rgba(233,30,140,0.3);padding:5px 10px;border-radius:20px;font-size:0.65rem;color:rgba(233,30,140,0.9);font-weight:600}
.anime-now-playing::before{content:"";width:5px;height:5px;background:var(--anime-pink);border-radius:50%;animation:pulse-dot 1.5s infinite}
.anime-stations-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px}
.anime-station-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 14px 12px;cursor:pointer;transition:all 0.2s;position:relative;overflow:hidden}
.anime-station-card::after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(to right,var(--anime-pink),var(--anime-purple));opacity:0;transition:opacity 0.2s}
.anime-station-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(233,30,140,0.1)}
.anime-station-card:hover::after{opacity:1}
.anime-card-icon{font-size:2rem;margin-bottom:8px}
.anime-card-title{font-size:0.82rem;font-weight:600;margin-bottom:2px;color:var(--text)}
.anime-card-meta{font-size:0.65rem;color:var(--text3)}
.anime-card-badge{display:inline-flex;align-items:center;gap:3px;font-size:0.58rem;padding:2px 7px;border-radius:10px;margin-top:5px;font-weight:600}
.anime-card-badge.live{background:rgba(233,30,140,0.08);color:var(--anime-pink);border:1px solid rgba(233,30,140,0.2)}
.anime-card-badge.jpop{background:rgba(0,180,216,0.08);color:var(--anime-blue);border:1px solid rgba(0,180,216,0.2)}
.anime-card-badge.lofi{background:rgba(124,58,237,0.08);color:var(--anime-purple);border:1px solid rgba(124,58,237,0.2)}
.anime-img-strip{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.anime-img-strip::-webkit-scrollbar{display:none}
.anime-img-real{width:140px;height:90px;object-fit:cover;border-radius:10px;cursor:pointer;flex-shrink:0;opacity:0.85;transition:opacity 0.2s,transform 0.2s;border:1px solid rgba(233,30,140,0.15)}
.anime-img-real:hover{opacity:1;transform:scale(1.02)}

/* ── SIDEBAR ── */
.sidebar{display:flex;flex-direction:column;gap:18px;min-width:0;overflow:hidden}
.sidebar--left{position:sticky;top:80px;align-self:start}
.sidebar--right{position:sticky;top:80px;align-self:start}
.sidebar-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px}
.sidebar-card--np{}
.sb-label{font-family:var(--font-mono);font-size:0.57rem;letter-spacing:2px;color:var(--text3);margin-bottom:12px;text-transform:uppercase;display:flex;align-items:center;gap:4px}

/* Now Playing — cleaner, with artwork */
.np-art{width:100%;aspect-ratio:1;background:linear-gradient(135deg,#1a1814 0%,#2a2420 100%);border-radius:10px;margin-bottom:12px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.np-art::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(200,71,42,0.15),transparent)}
.np-art-icon{display:flex;align-items:center;justify-content:center;z-index:1}
#np-art-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;border-radius:10px;z-index:2}
.np-wave{position:absolute;bottom:8px;left:8px;right:8px;height:22px;display:flex;align-items:flex-end;gap:2px;z-index:3}
.np-wave span{flex:1;border-radius:2px 2px 0 0;background:rgba(255,255,255,0.25);animation:wave 1.2s ease-in-out infinite}
.np-wave span:nth-child(2){animation-delay:.1s}.np-wave span:nth-child(3){animation-delay:.2s}.np-wave span:nth-child(4){animation-delay:.3s}.np-wave span:nth-child(5){animation-delay:.4s}.np-wave span:nth-child(6){animation-delay:.5s}.np-wave span:nth-child(7){animation-delay:.6s}.np-wave span:nth-child(8){animation-delay:.7s}
@keyframes wave{0%,100%{height:3px}50%{height:16px}}

/* Trending — use art instead of flags */
.tr-art{width:32px;height:32px;border-radius:6px;overflow:hidden;flex-shrink:0;background:var(--surface2)}
.tr-art img{width:100%;height:100%;object-fit:cover;display:block;background:var(--surface2)}

/* Genre picker row */
.genre-picker-row{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.genre-picker-label{display:flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:0.57rem;letter-spacing:2px;color:var(--text3);white-space:nowrap;text-transform:uppercase}
.genre-picker-chips{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.genre-chip{font-size:0.7rem;padding:5px 11px;border-radius:14px;border:1px solid var(--border);background:var(--surface2);color:var(--text2);cursor:pointer;transition:all 0.15s;white-space:nowrap}
.genre-chip:hover{border-color:var(--accent);color:var(--accent)}
.genre-chip.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.genre-chip-add{font-size:0.7rem;padding:5px 11px;border-radius:14px;border:1px dashed var(--border);background:transparent;color:var(--text3);cursor:pointer;transition:all 0.15s;display:flex;align-items:center;gap:4px}
.genre-chip-add:hover{border-color:var(--accent);color:var(--accent)}
.genre-picker-open-btn{font-size:0.75rem;padding:9px 14px;border-radius:14px;border:1px solid var(--border);background:var(--surface2);color:var(--text);cursor:pointer;transition:all 0.15s;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.genre-picker-open-btn:hover{border-color:var(--accent);color:var(--accent)}
.genre-picker-popover{position:fixed;inset:0;z-index:9999;display:grid;place-items:center}
.genre-picker-popover[hidden]{display:none}
.genre-picker-popover-backdrop{position:absolute;inset:0;background:rgba(10,10,10,0.62);backdrop-filter:blur(4px)}
.genre-picker-popover-card{position:relative;z-index:1;width:min(500px,calc(100% - 40px));max-height:80vh;overflow:auto;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:18px;box-shadow:0 32px 80px rgba(0,0,0,0.22)}
.genre-picker-popover-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;font-family:var(--font-mono);font-size:0.75rem;letter-spacing:1.8px;color:var(--text3);text-transform:uppercase}
.genre-picker-popover-close{font-size:1.4rem;line-height:1;color:var(--text);background:transparent;border:none;padding:4px 8px;cursor:pointer}
.genre-picker-popover-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
.genre-popup-btn{font-size:0.85rem;padding:12px 14px;border:1px solid var(--border);border-radius:14px;background:var(--surface2);color:var(--text);cursor:pointer;transition:all 0.15s;text-align:center;white-space:nowrap}
.genre-popup-btn:hover{border-color:var(--accent);color:var(--accent)}
.genre-popup-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.genre-card-plus{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,0.12);background:rgba(0,0,0,0.08);color:var(--text);font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s;z-index:2}
.genre-card-plus:hover{transform:scale(1.05);background:rgba(0,0,0,0.14)}
.featured-card--dynamic{display:none;position:relative;min-height:180px}
.featured-card--dynamic.genre-card-visible{display:block}
.genre-card-hidden{display:none!important}

/* Dynamic feature cards */
.featured-card--dynamic{min-height:180px}
.fc-cover-wrap{margin-bottom:12px}
.fc-cover-img{width:100%;aspect-ratio:1;border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--surface2)}
.fc-cover-img img{width:100%;height:100%;object-fit:cover;display:block}
.fc-cover-img--dyn{position:relative}
.fc-cover-img--dyn img{image-rendering:pixelated}
.lucid-icon{vertical-align:middle;display:inline-block}
body:not(.dark-mode) .lucid-icon{filter:invert(1) contrast(1.1)}
.fc-listeners--dyn{color:var(--text3)}

/* Anime news */
.anime-news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:36px}
.anime-news-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;cursor:pointer;transition:all 0.2s;text-decoration:none;color:inherit;display:block}
.anime-news-card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(233,30,140,0.12);border-color:rgba(233,30,140,0.2)}
.anime-news-card-img{width:100%;height:200px;aspect-ratio:unset;object-fit:cover;display:block;background:var(--surface2)}
.anime-news-card-body{padding:10px}
.anime-news-card-title{font-size:0.78rem;font-weight:600;line-height:1.3;color:var(--text);margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.anime-news-card-meta{font-size:0.63rem;color:var(--text3);display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.anime-news-card-ep{font-family:var(--font-mono);font-size:0.58rem;color:var(--anime-pink);background:rgba(233,30,140,0.08);border:1px solid rgba(233,30,140,0.15);padding:2px 6px;border-radius:8px;margin-top:4px;display:inline-block}
.anime-news-card-score{font-family:var(--font-mono);font-size:0.6rem;color:var(--text2);display:flex;align-items:center;gap:3px}
.anime-news-loading{display:flex;align-items:center;gap:8px;padding:32px;color:var(--text3);font-size:0.8rem;grid-column:1/-1;justify-content:center;font-family:var(--font-mono);font-size:0.65rem;letter-spacing:1px}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.anime-news-tab{font-family:var(--font-mono);font-size:0.62rem;letter-spacing:1px;padding:5px 11px;border-radius:14px;border:1px solid var(--border);background:transparent;color:var(--text3);cursor:pointer;transition:all 0.15s}
.anime-news-tab.active{background:rgba(233,30,140,0.1);color:var(--anime-pink);border-color:rgba(233,30,140,0.25)}

.anime-page-root::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 15%, rgba(233,30,140,0.12), transparent 18%),
    radial-gradient(circle at 85% 80%, rgba(0,180,216,0.09), transparent 16%);
}

.anime-page-root .anime-banner {
  position: relative;
  overflow: hidden;
}
.anime-page-root .anime-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 100% 40px, 40px 100%;
  opacity: 0.16;
  pointer-events: none;
}
.anime-page-root .anime-banner-content {
  position: relative;
  z-index: 1;
  border-left: 1px solid rgba(255,255,255,0.1);
  padding-left: 28px;
}
.anime-page-root .section-title {
  position: relative;
}
.anime-page-root .section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 64px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(233,30,140,0.95), rgba(124,58,237,0.9));
  opacity: 0.9;
}

.anime-page-root .anime-search-panel {
  width: 100%;
  margin: 16px 0 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.anime-page-root #anime-search-input {
  min-width: 220px;
  max-width: 100%;
  flex: 1 1 240px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: #fff;
  transition: all 0.2s ease;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.anime-page-root #anime-search-input:focus {
  outline: none;
  border-color: rgba(233,30,140,0.7);
  background: rgba(255,255,255,0.12);
}
.anime-page-root .anime-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(11,8,24,0.92);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  text-transform: none;
}
.anime-page-root #anime-search-btn,
.anime-page-root #anime-export-btn,
.anime-page-root #anime-import-btn {
  background: linear-gradient(135deg, rgba(233,30,140,0.95), rgba(76,57,228,0.9));
  border-color: rgba(233,30,140,0.45);
  box-shadow: 0 16px 30px rgba(233,30,140,0.18);
}
.anime-page-root .anime-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(233,30,140,0.22);
}
.anime-page-root .anime-trace-label {
  cursor: pointer;
  white-space: nowrap;
}
.anime-page-root .anime-trace-label input[type=file] {
  display: none;
}

.anime-page-root #anime-search-results,
.anime-page-root #anime-tracker-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.anime-page-root .anime-card {
  position: relative;
  overflow: hidden;
  background: rgba(11,9,26,0.92);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  backdrop-filter: blur(14px);
}
.anime-page-root .anime-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at top left, rgba(233,30,140,0.12), transparent 18%),
    radial-gradient(circle at bottom right, rgba(0,180,216,0.1), transparent 16%);
}
.anime-page-root .anime-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 70px rgba(233,30,140,0.18);
  border-color: rgba(233,30,140,0.32);
}
.anime-page-root .anime-card-img {
  position: relative;
  min-height: 140px;
  overflow: hidden;
}
.anime-page-root .anime-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.anime-page-root .anime-card:hover .anime-card-img img {
  transform: scale(1.03);
}
.anime-page-root .anime-card-body {
  position: relative;
  z-index: 1;
  padding: 18px 18px 16px;
}
.anime-page-root .anime-card-title {
  color: #fff;
  font-size: 0.95rem;
  margin-bottom: 6px;
}
.anime-page-root .anime-card-meta,
.anime-page-root .anime-card-badge,
.anime-page-root .anime-card-tags {
  color: rgba(255,255,255,0.72);
}
.anime-page-root .anime-card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
}

.anime-page-root .anime-main-col {
  position: relative;
}
.anime-page-root .anime-main-col::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 100% 72px, 72px 100%;
  opacity: 0.12;
}

.np-name{font-size:0.95rem;font-weight:600;margin-bottom:2px}
.np-meta{font-size:0.7rem;color:var(--text2);margin-bottom:10px}
.np-track{font-size:0.68rem;color:var(--text3);background:var(--surface2);padding:7px 9px;border-radius:7px;font-style:italic;line-height:1.4;margin-bottom:10px}
.np-progress{height:3px;background:var(--surface2);border-radius:2px;overflow:hidden;margin-bottom:12px}
.np-progress-fill{height:100%;background:var(--accent);border-radius:2px;width:0;transition:width 0.3s ease}
/* playing class: animate only when audio is truly playing */
.np-progress-fill.playing{animation:progFill 8s linear infinite}
/* buffering class: slow pulse while connecting */
.np-progress-fill.buffering{width:40% !important;animation:progBuffering 1.4s ease-in-out infinite;opacity:0.6}
/* paused: hold position, no animation */
.np-progress-fill.paused{animation:none}
@keyframes progFill{0%{width:0%}100%{width:100%}}
@keyframes progBuffering{0%,100%{opacity:0.3;width:35%}50%{opacity:0.8;width:55%}}
.np-controls{display:flex;align-items:center;justify-content:center;gap:14px}
.np-ctrl-btn{width:34px;height:34px;border-radius:50%;border:none;background:transparent;color:var(--text2);cursor:pointer;transition:all 0.15s;display:flex;align-items:center;justify-content:center}
.np-ctrl-btn:hover{color:var(--text);background:var(--surface2)}
.np-ctrl-btn svg{width:16px;height:16px}
.np-play-btn{width:42px;height:42px;background:var(--text);color:#fff;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:opacity 0.15s,transform 0.15s}
.np-play-btn:hover{opacity:0.85;transform:scale(1.05)}
.np-play-btn svg{width:18px;height:18px}

/* Trending */
.trending-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);cursor:pointer;transition:background 0.15s}
.trending-item:last-child{border-bottom:none}
.trending-item:hover .tr-name{color:var(--accent)}
.tr-rank{font-family:var(--font-display);font-size:1.05rem;color:var(--text3);width:18px;text-align:center;flex-shrink:0}
.tr-flag{font-size:1rem;flex-shrink:0;width:20px;text-align:center}
.tr-info{min-width:0;flex:1}
.tr-name{font-size:0.78rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-meta{font-size:0.63rem;color:var(--text3)}
.tr-listeners{font-family:var(--font-mono);font-size:0.6rem;color:var(--text3);flex-shrink:0}

/* ARG sidebar card */
.arg-card{background:#0a0806;border:1px solid rgba(200,71,42,0.25);border-radius:14px;padding:18px;position:relative;overflow:hidden}
.arg-card::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(to right,transparent,var(--accent),transparent);opacity:0.5}
.arg-card-label{font-family:var(--font-mono);font-size:0.55rem;letter-spacing:2px;color:var(--accent);margin-bottom:10px;opacity:0.7}
.arg-freq{font-family:var(--font-display);font-size:1.9rem;color:rgba(255,255,255,0.08);line-height:1;margin-bottom:7px}
.arg-status{font-family:var(--font-mono);font-size:0.63rem;color:rgba(255,255,255,0.15);line-height:2}
.arg-status .redacted{background:rgba(255,255,255,0.08);color:transparent;border-radius:2px;user-select:none}
/* Signal Lost — compact pill notification instead of long horizontal bar */
.arg-broken-bar{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:12px;
  padding:4px 10px;
  background:rgba(200,71,42,0.08);
  border:1px solid rgba(200,71,42,0.25);
  border-radius:20px;
  font-family:var(--font-mono);font-size:0.55rem;
  color:rgba(200,71,42,0.6);letter-spacing:1px;
}
.arg-broken-bar::before{
  content:'';display:inline-block;width:5px;height:5px;border-radius:50%;
  background:rgba(200,71,42,0.5);
  animation:blink 1.8s step-end infinite;
}


/* ── PLAYER BAR ── */
.player-bar{position:fixed;bottom:0;left:0;right:0;height:var(--player-h);background:rgba(26,24,20,0.97);backdrop-filter:blur(20px);border-top:1px solid rgba(255,255,255,0.06);z-index:500;display:flex;align-items:center;padding:0 20px;gap:16px}
.pb-station{display:flex;align-items:center;gap:12px;width:220px;flex-shrink:0;min-width:0}
.pb-art{width:40px;height:40px;border-radius:8px;background:rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pb-art svg{width:20px;height:20px;color:rgba(255,255,255,0.4)}
.pb-name{font-size:0.8rem;font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-meta{font-size:0.63rem;color:rgba(255,255,255,0.35);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-center{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0}
.pb-controls{display:flex;align-items:center;gap:14px}
.pb-controls-mobile{display:none}
.pb-btn{background:none;border:none;color:rgba(255,255,255,0.45);cursor:pointer;transition:color 0.15s;padding:4px;display:flex;align-items:center;justify-content:center}
.pb-btn:hover{color:#fff}
.pb-btn.active{color:var(--accent)}
.pb-btn svg{width:18px;height:18px}
.pb-play{width:36px;height:36px;border-radius:50%;background:#fff;color:#1a1814;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform 0.15s}
.pb-play:hover{transform:scale(1.06)}
.pb-play svg{width:16px;height:16px}
/* Smooth fade for play/pause icons */
.pb-play svg, .pb-btn svg { transition: opacity 160ms ease, transform 160ms ease; }
.pb-play svg.fading, .pb-btn svg.fading { opacity: 0; transform: scale(0.96); }
/* Fallback: any SVG set to .fading will fade out */
svg.fading { opacity: 0; transform: scale(0.96); transition: opacity 160ms ease, transform 160ms ease; }
.pb-progress{width:100%;max-width:380px;display:flex;align-items:center;gap:8px;min-width:0}
.pb-bar{flex:1;height:3px;background:rgba(255,255,255,0.1);border-radius:2px;overflow:hidden;cursor:pointer;min-width:0}
.pb-bar-fill{height:100%;background:#fff;border-radius:2px;width:0}
.pb-bar-fill.playing{width:100%;opacity:0.06;transition:width 400ms linear,opacity 220ms ease}
@keyframes pbLivePulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:0.6}100%{transform:scale(1);opacity:1}}

/* Subtle live indicator shown near the time label when streaming live */
.pb-time.live{position:relative;padding-left:12px}
.pb-time.live::before{
  content:'';position:absolute;left:2px;top:50%;transform:translateY(-50%);width:8px;height:8px;border-radius:50%;background:var(--accent, #c8472a);box-shadow:0 0 8px rgba(200,71,42,0.12);animation:pbLivePulse 1.6s ease-in-out infinite}
.pb-time{font-family:var(--font-mono);font-size:0.58rem;color:rgba(255,255,255,0.3);white-space:nowrap;flex-shrink:0}
.pb-right{width:180px;flex-shrink:0;display:flex;align-items:center;justify-content:flex-end;gap:12px}
.pb-vol{display:flex;align-items:center;gap:7px}
.pb-vol-icon{color:rgba(255,255,255,0.4);display:flex;align-items:center}
.pb-vol-icon svg{width:16px;height:16px}
.pb-vol-slider{-webkit-appearance:none;width:72px;height:3px;background:rgba(255,255,255,0.15);border-radius:2px;outline:none;cursor:pointer}
.pb-vol-slider::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%;background:#fff;cursor:pointer}
.pb-eq{display:flex;gap:2px;align-items:flex-end;height:13px}
.pb-eq span{width:2px;background:rgba(255,255,255,0.3);border-radius:1px;height:3px}
.pb-eq.playing span{animation:eqA 0.8s ease-in-out infinite;background:rgba(255,255,255,0.7)}
.pb-eq.playing span:nth-child(2){animation-delay:.15s}
.pb-eq.playing span:nth-child(3){animation-delay:.3s}

/* ── ABOUT PAGE ── */
.about-wrap{max-width:720px;margin:0 auto;padding:56px 24px}
.about-title{font-family:var(--font-display);font-size:2.2rem;font-weight:700;margin-bottom:8px;line-height:1.1}
.about-rule{width:48px;height:3px;background:var(--accent);margin:18px 0 28px;border-radius:2px}
.about-text{font-size:0.9rem;color:var(--text2);line-height:1.9;margin-bottom:18px}

/* ── ABOUT EERIE TEXT EFFECT ── */
.about-eerie-active .about-text{
  animation:none;
}
.char-jitter{display:inline-block;animation:charJitter 0.08s steps(1) infinite}
@keyframes charJitter{
  0%{transform:translate(0,0) rotate(0deg);opacity:1;color:var(--text2)}
  20%{transform:translate(-1px,1px) rotate(-1deg);opacity:0.7;color:var(--accent)}
  40%{transform:translate(1px,-1px) rotate(0.5deg);opacity:0.9}
  60%{transform:translate(-2px,0) rotate(1deg);opacity:0.6;color:var(--text3)}
  80%{transform:translate(1px,1px) rotate(-0.5deg);opacity:0.8}
  100%{transform:translate(0,0) rotate(0deg);opacity:1;color:var(--text2)}
}
.about-glitch-overlay{
  position:fixed;inset:0;pointer-events:none;z-index:9001;opacity:0;
  background:repeating-linear-gradient(to bottom,transparent 0px,transparent 3px,rgba(200,71,42,0.03) 3px,rgba(200,71,42,0.03) 4px);
  transition:opacity 0.5s;
}
.about-glitch-overlay.active{opacity:1}

/* ── ABOUT PAGE EYES ── */
#about-eyes-container{
  animation:aboutEyesAppear 0.6s cubic-bezier(0.34,1.56,0.64,1);
  filter:drop-shadow(0 0 20px rgba(200,71,42,0.3));
}
@keyframes aboutEyesAppear{
  0%{opacity:0;transform:scale(0.3)}
  100%{opacity:1;transform:scale(1)}
}

/* ── HORROR LAYERS ── */
#horror-overlay{display:none;position:fixed;inset:0;z-index:9998;background:#000;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(ellipse at center,rgba(200,0,40,0.08) 0%,#000 70%)}
#horror-overlay.show{display:flex;animation:overlayFlashIn 0.8s cubic-bezier(0.34,1.56,0.64,1)}
@keyframes overlayFlashIn{0%{opacity:0;background:radial-gradient(ellipse at center,rgba(220,20,60,0.15) 0%,#000 70%)}50%{background:radial-gradient(ellipse at center,rgba(139,0,20,0.1) 0%,#000 70%)}100%{opacity:1;background:radial-gradient(ellipse at center,rgba(200,0,40,0.08) 0%,#000 70%)}}
.horror-terminal{font-family:var(--font-mono);font-size:0.9rem;color:#ff1744;line-height:2.8;letter-spacing:2px;text-align:left;max-width:540px;padding:40px 50px;background:linear-gradient(135deg,rgba(139,0,20,0.08),rgba(80,0,10,0.06));border:2px solid;border-image:linear-gradient(135deg,rgba(255,23,68,0.7),rgba(200,0,40,0.4)) 1;box-shadow:0 0 40px rgba(255,23,68,0.35),0 0 80px rgba(220,20,60,0.2),inset 0 0 40px rgba(255,23,68,0.08);text-shadow:0 0 15px rgba(255,23,68,0.95),0 0 8px rgba(139,0,20,0.6);animation:terminalFlicker 0.15s step-end infinite;position:relative;overflow:hidden}
.horror-terminal::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(to bottom,transparent 0px,transparent 3px,rgba(255,23,68,0.04) 3px,rgba(255,23,68,0.04) 6px);pointer-events:none;animation:scanlineShiftHorror 8s linear infinite}
@keyframes scanlineShiftHorror{0%{transform:translateY(0)}100%{transform:translateY(6px)}}
@keyframes terminalFlicker{0%{text-shadow:0 0 15px rgba(255,23,68,0.95),0 0 8px rgba(139,0,20,0.6);opacity:1}10%{text-shadow:0 0 22px rgba(255,23,68,1),0 0 45px rgba(255,23,68,0.6),0 0 12px rgba(220,20,60,0.5);opacity:0.95}20%{text-shadow:0 0 15px rgba(255,23,68,0.95),0 0 8px rgba(139,0,20,0.6);opacity:1}45%{text-shadow:0 0 25px rgba(255,23,68,1),0 0 50px rgba(220,20,60,0.6);opacity:0.98}50%{text-shadow:0 0 35px rgba(255,23,68,0.8),0 0 20px rgba(139,0,20,0.7);opacity:1}70%{text-shadow:0 0 15px rgba(255,23,68,0.95),0 0 8px rgba(139,0,20,0.6);opacity:1}100%{text-shadow:0 0 15px rgba(255,23,68,0.95),0 0 8px rgba(139,0,20,0.6);opacity:1}}
.h-cursor{animation:cursorGlitch 0.4s step-end infinite;color:#ff5a7e;text-shadow:0 0 12px rgba(255,23,68,0.9),0 0 8px rgba(220,20,60,0.7)}
@keyframes cursorGlitch{0%,100%{opacity:1;text-shadow:0 0 12px rgba(255,23,68,0.9),0 0 8px rgba(220,20,60,0.7)}25%{opacity:0}50%{opacity:1;text-shadow:0 0 18px rgba(255,23,68,1),0 0 12px rgba(220,20,60,0.8);transform:skewX(2deg)}75%{opacity:0}}

/* ── DATA CORRUPT OVERLAY ── */
#data-corrupt-overlay{
  display:none;position:fixed;inset:0;z-index:9999;
  background:#000;align-items:center;justify-content:center;
  flex-direction:column;gap:20px;
  background:radial-gradient(ellipse at center,rgba(0,0,0,0.8) 0%,#000 100%);
}
#data-corrupt-overlay.show{display:flex}
.corrupt-scanlines{position:absolute;inset:0;background:repeating-linear-gradient(to bottom,transparent 0px,transparent 2px,rgba(255,0,100,0.04) 2px,rgba(255,0,100,0.04) 4px);pointer-events:none;z-index:1;animation:scanlineShift 8s linear infinite}
@keyframes scanlineShift{0%{transform:translateY(0)}100%{transform:translateY(4px)}}
.corrupt-flicker{position:absolute;inset:0;background:rgba(0,0,0,0.2);pointer-events:none;z-index:1;animation:screenFlickerIntense 0.1s step-end infinite}
@keyframes screenFlickerIntense{0%{opacity:0}40%{opacity:0}41%{opacity:1}42%{opacity:0}58%{opacity:0}59%{opacity:0.8}60%{opacity:0}85%{opacity:0}86%{opacity:0.7}87%{opacity:0}100%{opacity:0}}
.corrupt-header{position:relative;z-index:2;font-family:var(--font-mono);font-size:0.75rem;color:#ff0066;letter-spacing:4px;text-align:center;animation:textGlitchIntense 0.15s step-end infinite;text-shadow:0 0 10px rgba(255,0,102,0.8),0 0 20px rgba(200,71,42,0.4);font-weight:bold;margin-bottom:20px}
@keyframes textGlitchIntense{0%{text-shadow:0 0 10px rgba(255,0,102,0.8),0 0 20px rgba(200,71,42,0.4);transform:skewX(0)}20%{text-shadow:3px 0 0 #ff0066,-3px 0 0 rgba(0,255,200,0.5);transform:skewX(-5deg);clip-path:inset(10% 0 70% 0)}40%{text-shadow:-2px 0 0 #ff0066,2px 0 0 rgba(0,255,200,0.6);transform:skewX(3deg);clip-path:inset(70% 0 10% 0)}60%{text-shadow:0 0 10px rgba(255,0,102,0.8);transform:skewX(0)}80%{text-shadow:2px 2px 0 rgba(0,255,200,0.4);clip-path:inset(20% 0 60% 0)}100%{text-shadow:0 0 10px rgba(255,0,102,0.8),0 0 20px rgba(200,71,42,0.4);transform:skewX(0)}}
.corrupt-terminal-box{position:relative;z-index:2;background:linear-gradient(to bottom,rgba(10,6,4,0.95),rgba(5,4,3,0.98));border:2px solid rgba(255,0,102,0.4);border-radius:0;width:560px;max-width:90vw;overflow:hidden;box-shadow:0 0 40px rgba(255,0,102,0.3),0 0 80px rgba(200,71,42,0.15),inset 0 0 40px rgba(255,0,102,0.05);animation:boxPulse 3s ease-in-out infinite}
@keyframes boxPulse{0%,100%{box-shadow:0 0 40px rgba(255,0,102,0.3),0 0 80px rgba(200,71,42,0.15),inset 0 0 40px rgba(255,0,102,0.05)}50%{box-shadow:0 0 60px rgba(255,0,102,0.5),0 0 120px rgba(200,71,42,0.25),inset 0 0 60px rgba(255,0,102,0.1)}}
.corrupt-title-bar{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:2px solid rgba(255,0,102,0.3);background:linear-gradient(to right,rgba(255,0,102,0.08),transparent);letter-spacing:2px;font-size:0.65rem;color:rgba(255,0,102,0.6);text-shadow:0 0 5px rgba(255,0,102,0.4);font-weight:bold}
.corrupt-dot{width:10px;height:10px;border-radius:50%;box-shadow:0 0 5px currentColor}
.corrupt-terminal-text{font-family:var(--font-mono);font-size:0.75rem;line-height:2.1;padding:20px 24px;min-height:220px;max-height:320px;overflow-y:auto;color:rgba(255,0,102,0.7);text-shadow:0 0 8px rgba(255,0,102,0.4);letter-spacing:1px;background:linear-gradient(to bottom,rgba(255,0,102,0.02),transparent);animation:textPulse 2s ease-in-out infinite}
@keyframes textPulse{0%,100%{text-shadow:0 0 8px rgba(255,0,102,0.4)}50%{text-shadow:0 0 15px rgba(255,0,102,0.6),0 0 25px rgba(0,255,200,0.2)}}
.ct-red{color:rgba(210,60,60,0.9);font-weight:600}
.ct-dim{color:rgba(138,134,128,0.3)}
.ct-white{color:rgba(212,208,200,0.8)}
.ct-glitch{animation:textGlitchMask 0.15s step-end infinite;color:rgba(210,60,60,0.9)}
@keyframes textGlitchMask{0%{clip-path:none;transform:translateX(0);color:rgba(255,0,102,0.95)}33%{clip-path:inset(20% 0 60% 0);transform:translateX(3px);color:rgba(0,255,200,0.7)}66%{clip-path:inset(60% 0 20% 0);transform:translateX(-3px);color:rgba(255,0,102,0.95)}100%{clip-path:none;transform:translateX(0);color:rgba(255,0,102,0.95)}}

/* ── EYE SYSTEM — FULLSCREEN VIDEO ── */
#arg-eye-system{display:none;position:fixed;inset:0;z-index:10000;background:#000;cursor:none;overflow:hidden}
#arg-eye-system.active{display:block}
#eye-pupil-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;pointer-events:none}
.spooky-text{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-family:var(--font-mono);font-size:2.5rem;letter-spacing:4px;opacity:0;z-index:3;text-shadow:0 0 15px rgba(200,71,42,1);pointer-events:none;transition:opacity 1s ease}
.glitch-text{animation:textGlitch 0.15s infinite}
@keyframes textGlitch{0%{transform:translate(-50%,-50%)}20%{transform:translate(calc(-50% - 2px),calc(-50% + 2px))}40%{transform:translate(calc(-50% + 2px),calc(-50% - 2px))}60%{transform:translate(calc(-50% - 2px),calc(-50% - 2px))}80%{transform:translate(calc(-50% + 2px),calc(-50% + 2px))}100%{transform:translate(-50%,-50%)}}
.white-flash{position:absolute;inset:0;background:#fff;z-index:9999;opacity:0;pointer-events:none;transition:opacity 0.1s}
#exit-btn-custom{position:fixed;bottom:40px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.6);border:1px solid rgba(200,71,42,0.5);color:rgba(200,71,42,0.8);font-family:var(--font-mono);font-size:0.85rem;padding:10px 30px;cursor:crosshair;z-index:10;transition:all 0.3s;letter-spacing:3px;text-transform:uppercase}
#exit-btn-custom:hover{background:rgba(200,71,42,0.15);color:#c8472a;border-color:#c8472a;box-shadow:0 0 20px rgba(200,71,42,0.3)}

/* ── EMAIL HORROR TERMINAL ── */
#email-horror-overlay{
  display:none;position:fixed;inset:0;z-index:9997;
  background:#000;align-items:center;justify-content:center;flex-direction:column;
}
#email-horror-overlay.show{display:flex}
.email-horror-scanlines{position:absolute;inset:0;background:repeating-linear-gradient(to bottom,transparent 0px,transparent 2px,rgba(0,255,0,0.03) 2px,rgba(0,255,0,0.03) 4px);pointer-events:none}
.email-terminal{
  position:relative;z-index:2;width:640px;max-width:90vw;
  background:#0a0a0a;border:1px solid #1a3a1a;border-radius:6px;overflow:hidden;
  box-shadow:0 0 40px rgba(0,255,0,0.05);
}
.email-terminal-bar{display:flex;align-items:center;gap:6px;padding:8px 14px;background:#111;border-bottom:1px solid #1a3a1a}
.email-terminal-bar-dot{width:10px;height:10px;border-radius:50%}
.email-terminal-text{
  font-family:var(--font-mono);font-size:0.7rem;color:#00cc44;
  padding:20px;min-height:260px;max-height:340px;overflow-y:auto;line-height:1.8;
}
.et-dim{color:#1a5c1a}
.et-err{color:#cc4400}
.et-white{color:#88cc88}
.et-cursor{animation:blink 0.7s step-end infinite}

/* ── MISC ── */
.divider{height:1px;background:var(--border);margin:28px 0}
@keyframes glitch{0%{transform:translate(0)}20%{transform:translate(-2px,1px)}40%{transform:translate(2px,-1px)}60%{transform:translate(-1px,2px)}80%{transform:translate(1px,-1px)}100%{transform:translate(0)}}
.glitching{animation:glitch 0.15s step-end infinite}

/* ── RESPONSIVE ── */

/* ── ANIMATED SIGNAL RINGS (featured card ARG) ── */
.signal-ring { transform-origin: center; }
.r1 { animation: signalPulse 1.8s ease-in-out infinite; }
.r2 { animation: signalPulse 1.8s ease-in-out infinite 0.4s; }
@keyframes signalPulse {
  0%,100% { opacity:0.9; stroke-width:2; }
  50%      { opacity:0.3; stroke-width:1.2; }
}

/* ── FEATURED CARD ARG VARIANT ── */
.featured-card--arg {
  border-color: rgba(200,71,42,0.2);
  background: #fdf9f7;
}
body.dark-mode .featured-card--arg { background: #0e0905; }
.fc-listeners--warn { color: rgba(200,71,42,0.4); }
.fc-name--warn { color: var(--accent); }
.fc-meta--warn { color: rgba(200,71,42,0.5); }
.fc-now--warn {
  background: rgba(200,71,42,0.06);
  color: rgba(200,71,42,0.5);
}

/* ── FEATURED CARD PLAYING BADGE ── */
.fc-playing-badge {
  display: none;
  position: absolute; bottom: 14px; right: 14px;
  align-items: center; gap: 5px;
  background: rgba(22,163,74,0.08); border: 1px solid rgba(22,163,74,0.2);
  padding: 3px 8px; border-radius: 10px;
  font-size: 0.6rem; color: var(--green); font-weight: 600;
}
.fc-playing-badge.show { display: flex; }
.fc-badge-dot { width: 6px; height: 6px; flex-shrink: 0; animation: pulse-dot 1.5s infinite; }

/* ── NP ART ── */
.np-art {
  width:100%; aspect-ratio:1;
  background: linear-gradient(135deg,#1a1814 0%,#2a2420 100%);
  border-radius: 10px; margin-bottom: 12px;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.np-art::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(135deg,rgba(200,71,42,0.15),transparent);
}
.np-art-icon {
  display: flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; position: relative; z-index: 1;
}
.np-art-icon svg { width: 40px; height: 40px; }

/* ── MOBILE ACTION BTN ── */
.mobile-action-btn {
  flex: 1; padding: 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text); font-size: 0.85rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}

/* ── SKIP STATION (prev/next) — currently loads random ── */
/* Handled via JS */

/* ── ABOUT PAGE EERIE ── */
.about-wrap { max-width:720px; margin:0 auto; padding:56px 24px; }
.about-title { font-family:var(--font-display); font-size:2.2rem; font-weight:700; margin-bottom:8px; line-height:1.1; }
.about-rule { width:48px; height:3px; background:var(--accent); margin:18px 0 28px; border-radius:2px; }
.about-text { font-size:0.9rem; color:var(--text2); line-height:1.9; margin-bottom:18px; }

/* ═══════════════════════════════════════════════════════
   WNCORE LIVE MUSIC CHANNEL — STYLES
   + GENERAL IMPROVEMENTS v3.1
═══════════════════════════════════════════════════════ */

/* ── NAV LIVE PIP ── */
.nav-live-pip {
  display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--green);margin-left:2px;
  box-shadow:0 0 0 2px rgba(22,163,74,0.2);
  animation:pulse-dot 2s ease-in-out infinite;
}
.nav-livemusic-link { position:relative; }

/* ── LIVE MUSIC WRAP ── */
.lm-wrap { max-width:1280px;margin:0 auto;padding:0 0 100px; }
/* ── LIVEMUSIC PAGE BG ── */
#page-livemusic {
  background:#0a0a0c;
  min-height:100%;
}
body:not(.dark-mode) #page-livemusic {
  background:var(--bg);
}



/* ── HERO ── */
.lm-hero {
  position:relative;overflow:hidden;
  background:#0a0a0c;
  min-height:420px;display:flex;align-items:center;gap:60px;
  padding:72px 48px 64px;
}
.lm-hero-bg {
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 80% at 80% 40%, rgba(200,71,42,0.18) 0%, transparent 65%),
    radial-gradient(ellipse 40% 60% at 15% 70%, rgba(37,99,235,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 30% 40% at 50% 0%, rgba(120,60,200,0.07) 0%, transparent 60%);
  pointer-events:none;
}
.lm-hero-content { position:relative;z-index:2;flex:1;min-width:0; }
.lm-hero-kicker {
  font-family:var(--font-mono);font-size:0.6rem;letter-spacing:4px;
  color:var(--accent);margin-bottom:20px;text-transform:uppercase;
  display:flex;align-items:center;gap:8px;
}
.lm-hero-kicker::before {
  content:'';width:24px;height:1px;background:var(--accent);flex-shrink:0;
}
.lm-hero-title {
  font-family:var(--font-display);font-size:clamp(2.4rem,5vw,3.8rem);
  font-weight:700;color:#f0ede8;line-height:1.08;margin-bottom:20px;
}
.lm-hero-title em { color:var(--accent);font-style:italic; }
.lm-hero-sub {
  font-size:0.88rem;color:rgba(240,237,232,0.50);line-height:1.75;
  max-width:440px;margin-bottom:36px;
}
.lm-hero-stats { display:flex;gap:40px; }
.lm-stat { display:flex;flex-direction:column;gap:4px; }
.lm-stat-n {
  font-family:var(--font-display);font-size:1.7rem;font-weight:700;
  color:#f0ede8;line-height:1;
}
.lm-stat-l { font-size:0.58rem;color:rgba(240,237,232,0.3);letter-spacing:1px;text-transform:uppercase; }

/* ── WAVEFORM ART ── */
.lm-waveform-art {
  position:relative;z-index:2;flex-shrink:0;
  display:flex;align-items:center;height:120px;
}
.lm-waveform { display:flex;align-items:center;gap:3px;height:100%; }
.lm-bar {
  width:3px;border-radius:2px;
  background:linear-gradient(to top,rgba(200,71,42,0.7),rgba(200,71,42,0.15));
  animation:lm-bar-dance var(--dur,0.8s) ease-in-out infinite alternate;
  transform-origin:bottom;
}
@keyframes lm-bar-dance {
  from { transform:scaleY(var(--min,0.2)); }
  to   { transform:scaleY(var(--max,1)); }
}

/* ── CHANNEL BAR (TakeTones-style pill tabs) ── */
.lm-channel-bar {
  display:flex;gap:8px;padding:20px 28px;overflow-x:auto;
  border-bottom:1px solid rgba(255,255,255,0.06);
  scrollbar-width:none;background:#0e0d0b;
}
body:not(.dark-mode) .lm-channel-bar {
  background:var(--bg);border-bottom:1px solid var(--border);
}
.lm-channel-bar::-webkit-scrollbar { display:none; }
.lm-ch-btn {
  flex-shrink:0;font-size:0.75rem;font-weight:500;
  padding:8px 20px;border-radius:999px;
  border:1px solid rgba(255,255,255,0.10);background:rgba(255,255,255,0.04);
  color:rgba(255,255,255,0.5);cursor:pointer;transition:all 0.18s;
  font-family:var(--font-body);white-space:nowrap;letter-spacing:0.2px;
}
body:not(.dark-mode) .lm-ch-btn {
  border-color:var(--border);background:var(--surface2);color:var(--text3);
}
.lm-ch-btn:hover {
  color:rgba(255,255,255,0.85);border-color:rgba(255,255,255,0.2);
  background:rgba(255,255,255,0.07);
}
body:not(.dark-mode) .lm-ch-btn:hover {
  color:var(--text);border-color:rgba(0,0,0,0.2);background:var(--surface);
}
.lm-ch-btn.active {
  background:#fff;color:#0a0a0c;border-color:#fff;font-weight:600;
}
body:not(.dark-mode) .lm-ch-btn.active {
  background:var(--text);color:var(--bg);border-color:var(--text);
}

/* ── NOW PLAYING CARD ── */
.lm-now-playing-card {
  display:flex;align-items:center;gap:28px;
  padding:24px 28px;
  background:linear-gradient(135deg,#111010,#0d0c14);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
body:not(.dark-mode) .lm-now-playing-card {
  background:var(--surface);border-bottom:1px solid var(--border);
}
.lm-np-vinyl {
  width:88px;height:88px;border-radius:50%;flex-shrink:0;
  background:conic-gradient(
    #1a1a1a 0deg, #2a2a2a 20deg, #1a1a1a 40deg,
    #2a2a2a 60deg, #1a1a1a 80deg, #2a2a2a 100deg,
    #1a1a1a 120deg, #2a2a2a 140deg, #1a1a1a 160deg,
    #2a2a2a 180deg, #1a1a1a 200deg, #2a2a2a 220deg,
    #1a1a1a 240deg, #2a2a2a 260deg, #1a1a1a 280deg,
    #2a2a2a 300deg, #1a1a1a 320deg, #2a2a2a 340deg, #1a1a1a 360deg
  );
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,0.4);
  animation:lm-spin 4s linear infinite paused;
  transition:box-shadow 0.3s;
}
.lm-now-playing-card.playing .lm-np-vinyl {
  animation-play-state:running;
  box-shadow:0 0 0 3px var(--accent), 0 8px 32px rgba(200,71,42,0.35);
}
.lm-np-vinyl-inner {
  width:24px;height:24px;border-radius:50%;
  background:#0e0d0b;
}
body:not(.dark-mode) .lm-np-vinyl-inner { background:var(--surface); }
@keyframes lm-spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }

.lm-np-info { flex:1;min-width:0; }
.lm-np-channel-tag {
  font-family:var(--font-mono);font-size:0.58rem;letter-spacing:2.5px;
  color:var(--accent);margin-bottom:6px;text-transform:uppercase;
}
.lm-np-title {
  font-family:var(--font-display);font-size:1.35rem;font-weight:700;
  color:#f0ede8;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
body:not(.dark-mode) .lm-np-title { color:var(--text); }
.lm-np-source { font-size:0.75rem;color:rgba(240,237,232,0.4);margin-bottom:10px; }
body:not(.dark-mode) .lm-np-source { color:var(--text2); }
.lm-np-license {
  display:flex;align-items:center;gap:5px;
  font-size:0.62rem;color:rgba(240,237,232,0.3);letter-spacing:0.3px;margin-bottom:16px;
}
body:not(.dark-mode) .lm-np-license { color:var(--text3); }
.lm-np-controls { display:flex;align-items:center;gap:10px; }
.lm-ctrl-btn {
  width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.04);
  color:rgba(255,255,255,0.5);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all 0.15s;
}
body:not(.dark-mode) .lm-ctrl-btn {
  border-color:var(--border);background:var(--surface2);color:var(--text2);
}
.lm-ctrl-btn:hover { color:#fff;border-color:rgba(255,255,255,0.25);background:rgba(255,255,255,0.08); }
body:not(.dark-mode) .lm-ctrl-btn:hover { color:var(--text);border-color:rgba(0,0,0,0.2); }
.lm-play-btn {
  width:46px;height:46px;
  background:var(--accent);color:#fff;border-color:var(--accent);
}
.lm-play-btn:hover { opacity:0.88; }

/* ── SECTION HEADER ── */
.lm-section-hd {
  display:flex;align-items:center;justify-content:space-between;
  padding:32px 28px 16px;
}
.lm-section-title {
  font-family:var(--font-display);font-size:1.15rem;font-weight:700;color:var(--text);
}
.lm-source-badge { font-size:0.63rem;color:var(--text3);letter-spacing:0.3px; }

/* ── GRID (TakeTones image card layout) ── */
.lm-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:14px;padding:0 28px 36px;
}

/* ── IMAGE CARD ── */
.lm-card {
  border-radius:16px;cursor:pointer;
  display:flex;flex-direction:column;
  background:#111010;
  border:1px solid rgba(255,255,255,0.05);
  overflow:hidden;
  transition:transform 0.22s cubic-bezier(.25,.8,.25,1), box-shadow 0.22s;
  position:relative;
}
body:not(.dark-mode) .lm-card {
  background:var(--surface);border:1px solid var(--border);
}
.lm-card:hover { transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,0.35); }
.lm-card.active-card {
  box-shadow:0 0 0 2px var(--accent), 0 16px 40px rgba(200,71,42,0.25);
  border-color:transparent;
}

/* Image section */
.lm-card-img-wrap {
  position:relative;width:100%;padding-top:62%;overflow:hidden;flex-shrink:0;
}
.lm-card-img {
  position:absolute;inset:0;
  background-image:var(--lm-img);
  background-size:cover;background-position:center;
  transition:transform 0.4s cubic-bezier(.25,.8,.25,1);
}
.lm-card:hover .lm-card-img { transform:scale(1.07); }
.lm-card-img-overlay {
  position:absolute;inset:0;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,0.05) 0%,
    rgba(0,0,0,0.15) 40%,
    rgba(0,0,0,0.72) 100%
  );
}
.lm-card.active-card .lm-card-img-overlay {
  background:linear-gradient(
    to bottom,
    rgba(200,71,42,0.12) 0%,
    rgba(0,0,0,0.15) 40%,
    rgba(0,0,0,0.72) 100%
  );
}

/* Top-row badges inside image */
.lm-card-img-top-row {
  position:absolute;top:10px;left:10px;right:10px;
  display:flex;align-items:center;justify-content:space-between;z-index:2;
}
.lm-card-live-badge {
  display:flex;align-items:center;gap:5px;
  font-family:var(--font-mono);font-size:0.55rem;letter-spacing:2px;font-weight:600;
  color:#fff;background:rgba(0,0,0,0.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  padding:4px 9px;border-radius:999px;border:1px solid rgba(255,255,255,0.12);
}
.lm-card-listeners-badge {
  font-family:var(--font-mono);font-size:0.55rem;letter-spacing:0.5px;
  color:rgba(255,255,255,0.75);background:rgba(0,0,0,0.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  padding:4px 9px;border-radius:999px;border:1px solid rgba(255,255,255,0.10);
}

/* Play circle — appears on hover */
.lm-card-play-circle {
  position:absolute;bottom:12px;right:12px;z-index:3;
  width:40px;height:40px;border-radius:50%;
  background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(0.85);
  transition:opacity 0.18s, transform 0.18s;
  box-shadow:0 4px 14px rgba(200,71,42,0.5);
}
.lm-card:hover .lm-card-play-circle,
.lm-card.active-card .lm-card-play-circle {
  opacity:1;transform:scale(1);
}
.lm-card.active-card .lm-card-play-circle {
  background:#fff;color:var(--accent);
}

/* Text body below image */
.lm-card-body {
  padding:14px 16px 16px;display:flex;flex-direction:column;gap:5px;flex:1;
}
.lm-card-genre-tag {
  font-family:var(--font-mono);font-size:0.58rem;letter-spacing:1.5px;
  color:var(--lm-color-fg,var(--accent));text-transform:uppercase;
}
.lm-card-name {
  font-weight:700;font-size:0.92rem;color:#f0ede8;line-height:1.25;
}
body:not(.dark-mode) .lm-card-name { color:var(--text); }
.lm-card-desc {
  font-size:0.72rem;color:rgba(240,237,232,0.4);line-height:1.5;flex:1;
}
body:not(.dark-mode) .lm-card-desc { color:var(--text3); }
.lm-card-footer {
  display:flex;align-items:center;justify-content:space-between;margin-top:8px;
}
.lm-card-license-pill {
  font-size:0.58rem;color:rgba(255,255,255,0.35);
  background:rgba(255,255,255,0.06);
  padding:3px 9px;border-radius:999px;
  font-family:var(--font-mono);letter-spacing:0.3px;
  border:1px solid rgba(255,255,255,0.08);
}
body:not(.dark-mode) .lm-card-license-pill {
  color:var(--text3);background:var(--surface2);border-color:var(--border);
}
.lm-card-stations-count {
  font-size:0.6rem;color:rgba(255,255,255,0.3);
  font-family:var(--font-mono);
}
body:not(.dark-mode) .lm-card-stations-count { color:var(--text3); }

/* Live dot */
.lm-live-dot {
  width:6px;height:6px;border-radius:50%;background:#22c55e;flex-shrink:0;
  animation:pulse-dot 1.8s ease-in-out infinite;
  box-shadow:0 0 6px rgba(34,197,94,0.6);
}
@keyframes pulse-dot {
  0%,100% { transform:scale(1);opacity:1; }
  50% { transform:scale(0.7);opacity:0.5; }
}

/* ── ATTRIBUTION ── */
.lm-attribution-block {
  margin:8px 28px 0;padding:24px;
  background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:14px;
}
body:not(.dark-mode) .lm-attribution-block {
  background:var(--surface);border-color:var(--border);
}
.lm-attr-title {
  font-size:0.68rem;font-weight:600;color:rgba(255,255,255,0.45);margin-bottom:10px;
  font-family:var(--font-mono);letter-spacing:2px;text-transform:uppercase;
}
body:not(.dark-mode) .lm-attr-title { color:var(--text); }
.lm-attr-text {
  font-size:0.76rem;color:rgba(255,255,255,0.3);line-height:1.7;margin-bottom:16px;
}
body:not(.dark-mode) .lm-attr-text { color:var(--text2); }
.lm-attr-sources { display:flex;flex-wrap:wrap;gap:6px; }
.lm-attr-pill {
  font-size:0.62rem;color:rgba(255,255,255,0.3);
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);
  padding:3px 11px;border-radius:999px;font-family:var(--font-mono);
}
body:not(.dark-mode) .lm-attr-pill {
  color:var(--text3);background:var(--surface2);border-color:var(--border);
}

/* ── LEGITIMACY IMPROVEMENTS — HEADER ── */
/* Stronger backdrop on scroll */
header.scrolled {
  box-shadow:0 1px 0 var(--border), 0 4px 16px rgba(0,0,0,0.06);
  background:rgba(245,243,239,0.97);
}
body.dark-mode header.scrolled {
  background:rgba(14,13,11,0.98);
  box-shadow:0 1px 0 rgba(255,255,255,0.06), 0 4px 16px rgba(0,0,0,0.3);
}

/* ── LEGITIMACY — BROADCAST STATUS BAR ── */
.broadcast-status-bar {
  position:fixed;bottom:calc(var(--player-h) + 0px);left:0;right:0;
  height:22px;background:var(--text);color:var(--bg);
  display:flex;align-items:center;gap:16px;padding:0 16px;
  font-family:var(--font-mono);font-size:0.57rem;letter-spacing:0.5px;
  z-index:490;overflow:hidden;
}
body.dark-mode .broadcast-status-bar {
  background:#252220;color:#f0ede8;border-top:2px solid rgba(255,255,255,0.12);
}
.bsb-signal {
  display:flex;align-items:center;gap:5px;flex-shrink:0;
}
.bsb-signal-bars { display:flex;align-items:flex-end;gap:1px;height:10px; }
.bsb-signal-bar {
  width:2px;border-radius:1px;background:var(--green);
}
.bsb-signal-bar:nth-child(1) { height:3px; }
.bsb-signal-bar:nth-child(2) { height:5px; }
.bsb-signal-bar:nth-child(3) { height:7px; }
.bsb-signal-bar:nth-child(4) { height:10px; }
.bsb-sep { color:rgba(255,255,255,0.2); }
body.dark-mode .bsb-sep { color:rgba(240,237,232,0.2); }
.bsb-text { opacity:0.6;white-space:nowrap; }
.bsb-accent { opacity:1;color:var(--accent); }
.bsb-scroll-wrap { flex:1;overflow:hidden;position:relative; }
.bsb-scroll-inner { 
  display:flex;gap:48px;white-space:nowrap;opacity:0.5;
  animation:bsb-scroll 40s linear infinite;
}
@keyframes bsb-scroll {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}

/* ── LEGITIMACY — FOOTER ── */
.wncore-footer {
  background:var(--surface);border-top:1px solid var(--border);
  padding:40px 24px 32px;margin-top:0;
  padding-bottom:calc(var(--player-h) + 22px + 48px);
}
.wncore-footer-inner {
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;
}
.wncore-footer-brand .logo-mark {
  font-family:var(--font-display);font-size:1.1rem;font-weight:700;
}
.wncore-footer-brand .logo-freq {
  font-family:var(--font-mono);font-size:0.55rem;color:var(--accent);
  padding:1px 5px;border:1px solid var(--accent);border-radius:3px;margin-left:8px;
}
.footer-tagline {
  font-size:0.75rem;color:var(--text3);margin-top:10px;line-height:1.6;max-width:220px;
}
.footer-col-title {
  font-size:0.62rem;font-family:var(--font-mono);letter-spacing:1.5px;
  color:var(--text3);text-transform:uppercase;margin-bottom:14px;
}
.footer-col a {
  display:block;font-size:0.78rem;color:var(--text2);text-decoration:none;
  margin-bottom:8px;transition:color 0.15s;
}
.footer-col a:hover { color:var(--text); }
.footer-bottom {
  max-width:1200px;margin:28px auto 0;
  display:flex;align-items:center;justify-content:space-between;
  padding-top:18px;border-top:1px solid var(--border);
  font-size:0.65rem;color:var(--text3);
}
.footer-bottom-right { display:flex;gap:16px; }
.footer-bottom-right a { color:var(--text3);text-decoration:none;transition:color 0.15s; }
.footer-bottom-right a:hover { color:var(--text); }

/* ── LEGITIMACY — ENHANCED TICKER BLINK ── */
.t-sep { opacity:0.3; }
.t-warn { animation:t-warn-pulse 3.5s ease-in-out infinite; }
@keyframes t-warn-pulse {
  0%,100% { color:var(--accent); opacity:0.6; }
  50% { color:#ff6644; opacity:1; }
}

/* ── LEGITIMACY — BROADCAST CLOCK IN HEADER ── */
.header-clock { display:none !important; }
.header-clock span { display:none !important; }

/* ── MOBILE LIVE MUSIC ── */

/* ═══════════════════════════════════════════════════════
   WNCORE improvements.js — styles
   All 26 feature additions
═══════════════════════════════════════════════════════ */

/* ── TOAST SYSTEM ── */
.toast-container {
  position:fixed;bottom:calc(var(--player-h,80px) + 32px);left:24px;
  z-index:99999;display:flex;flex-direction:column;gap:8px;pointer-events:none;
}
.toast {
  font-family:var(--font-body);font-size:0.78rem;
  padding:10px 16px;border-radius:8px;
  background:var(--surface);border:1px solid var(--border);
  color:var(--text);box-shadow:0 4px 16px rgba(0,0,0,0.12);
  transform:translateX(-110%);opacity:0;transition:transform 0.25s,opacity 0.25s;
  pointer-events:auto;max-width:280px;line-height:1.4;
}
.toast.toast-show  { transform:translateX(0);opacity:1; }
.toast.toast-hide  { transform:translateX(-110%);opacity:0; }
.toast.toast-success { border-left:3px solid var(--green,#16a34a); }
.toast.toast-warn    { border-left:3px solid var(--accent,#c8472a); }
.toast.toast-info    { border-left:3px solid var(--text3,#888); }

/* ── KEYBOARD SHORTCUTS MODAL ── */
.kb-modal-backdrop {
  position:fixed;inset:0;background:rgba(0,0,0,0.45);
  z-index:9999;display:none;align-items:center;justify-content:center;
  backdrop-filter:blur(4px);
}
.kb-modal-backdrop.open { display:flex; }
.kb-box {
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  width:min(480px,92vw);padding:28px;box-shadow:0 20px 60px rgba(0,0,0,0.18);
}
.kb-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:20px; }
.kb-title { font-family:var(--font-display);font-size:1.1rem;font-weight:700; }
.kb-close { background:none;border:none;cursor:pointer;color:var(--text3);font-size:1rem;padding:4px; }
.kb-close:hover { color:var(--text); }
.kb-grid { display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:18px; }
.kb-row { display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:6px;font-size:0.78rem; }
.kb-row:hover { background:var(--surface2); }
.kb-row kbd {
  background:var(--surface2);border:1px solid var(--border);border-radius:5px;
  padding:2px 7px;font-size:0.7rem;font-family:var(--font-mono);
  color:var(--text);flex-shrink:0;white-space:nowrap;
}
.kb-row span { color:var(--text2); }
.kb-footer { font-size:0.68rem;color:var(--text3);text-align:center;margin-top:4px; }
.kb-footer kbd {
  background:var(--surface2);border:1px solid var(--border);border-radius:4px;
  padding:1px 5px;font-family:var(--font-mono);font-size:0.65rem;
}

/* ── RECENTLY PLAYED HISTORY ── */
.history-section { padding:16px 0;border-top:1px solid var(--border);margin-top:16px; }
.hist-title { font-size:0.62rem;font-family:var(--font-mono);letter-spacing:1.5px;color:var(--text3);text-transform:uppercase;margin-bottom:10px;padding:0 16px; }
.hist-list { max-height:220px;overflow-y:auto;scrollbar-width:thin; }
.hist-empty { font-size:0.75rem;color:var(--text3);padding:8px 16px; }
.hist-item { display:flex;align-items:center;gap:10px;padding:8px 16px;cursor:pointer;transition:background 0.12s; }
.hist-item:hover { background:var(--surface2); }
.hist-icon { font-size:1.1rem;flex-shrink:0; }
.hist-name { font-size:0.78rem;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px; }
.hist-meta { font-size:0.65rem;color:var(--text3); }

/* ── STATION PREVIEW CARD ── */
.station-preview {
  position:fixed;z-index:9990;width:220px;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:14px;box-shadow:0 8px 28px rgba(0,0,0,0.15);
  pointer-events:none;opacity:0;transform:translateY(4px);
  transition:opacity 0.15s,transform 0.15s;
}
.station-preview.visible { opacity:1;transform:translateY(0); }
.sp-name { font-weight:600;font-size:0.85rem;margin-bottom:10px;color:var(--text); }
.sp-row { display:flex;justify-content:space-between;font-size:0.72rem;margin-bottom:5px; }
.sp-label { color:var(--text3); }
.sp-tags { display:flex;flex-wrap:wrap;gap:4px;margin-top:8px; }
.sp-tag { background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:1px 6px;font-size:0.62rem;color:var(--text3); }
.sp-hint { font-size:0.62rem;color:var(--text3);margin-top:10px;opacity:0.6; }

/* ── FEELING LUCKY BUTTON ── */
.lucky-btn {
  display:flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:20px;
  border:1px solid var(--border);background:var(--surface);
  color:var(--text2);cursor:pointer;font-size:0.75rem;
  font-family:var(--font-body);font-weight:500;transition:all 0.15s;
}
.lucky-btn:hover { color:var(--text);border-color:rgba(0,0,0,0.15); }
.lucky-btn.spinning svg { animation:lucky-spin 0.6s linear infinite; }
@keyframes lucky-spin { to { transform:rotate(360deg); } }

/* ── GENRE A–Z SIDEBAR ── */
.genre-az-sidebar {
  position:sticky;top:80px;float:right;
  display:flex;flex-direction:column;gap:1px;
  padding:6px 0;z-index:10;
}
.az-btn {
  width:22px;height:22px;border-radius:4px;
  border:none;background:none;cursor:pointer;
  font-size:0.6rem;font-family:var(--font-mono);font-weight:700;
  color:var(--text3);transition:all 0.1s;display:flex;align-items:center;justify-content:center;
}
.az-btn:hover { background:var(--surface2);color:var(--text); }
.az-flash { animation:az-flash 0.7s ease; }
@keyframes az-flash { 0%,100%{background:transparent} 50%{background:rgba(200,71,42,0.15)} }
/* ── COUNTRY FILTER ── */
.country-filter-wrap {
  display:flex;align-items:center;gap:10px;padding:10px 24px;
  border-bottom:1px solid var(--border);background:var(--surface);
  flex-wrap:wrap; /* allow wrapping on narrow screens */
}
.cf-label { font-size:0.72rem;color:var(--text3);white-space:nowrap; }
.country-filter-select {
  font-size:0.75rem;padding:5px 10px;border-radius:6px;
  border:1px solid var(--border);background:var(--surface2);
  color:var(--text);font-family:var(--font-body);cursor:pointer;
  max-width:260px;min-width:0;flex:1; /* flex:1 so it fills remaining row width */
  -webkit-appearance:none;appearance:none;
  color-scheme: light;
}
body.dark-mode .country-filter-select {
  color-scheme: dark;
  background:var(--surface2) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}

/* ── SIDEBAR COLLAPSE ── */
.sidebar-toggle-btn {
  position:absolute;top:12px;right:12px;width:24px;height:24px;
  border-radius:5px;border:1px solid var(--border);background:var(--surface2);
  cursor:pointer;color:var(--text3);display:flex;align-items:center;justify-content:center;
  transition:all 0.15s;z-index:5;
}
.sidebar-toggle-btn:hover { color:var(--text); }
.np-sidebar.collapsed, .now-playing-sidebar.collapsed {
  width:0!important;overflow:hidden;padding:0!important;border:none!important;
}

/* ── SLEEP TIMER RING ── */
.sleep-ring {
  display:none;align-items:center;gap:4px;
  position:relative;width:32px;height:32px;
}
.sleep-ring-svg { width:32px;height:32px;transform:rotate(-90deg); }
.sleep-ring-bg   { fill:none;stroke:var(--border);stroke-width:3; }
.sleep-ring-fill { fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:94;stroke-dashoffset:0;transition:stroke-dashoffset 1s linear; }
.sleep-label {
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:0.45rem;font-family:var(--font-mono);color:var(--accent);font-weight:700;
  transform:rotate(90deg) !important;
}

/* ── BITRATE BADGE ── */
.pb-bitrate-badge {
  display:none;font-size:0.58rem;font-family:var(--font-mono);
  background:rgba(200,71,42,0.08);border:1px solid rgba(200,71,42,0.2);
  color:var(--accent);padding:1px 5px;border-radius:3px;margin-left:6px;letter-spacing:0.3px;
}

/* ── EQ PANEL ── */
.eq-panel {
  position:fixed;bottom:calc(var(--player-h,80px) + 8px);right:16px;
  width:300px;background:var(--surface);border:1px solid var(--border);
  border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,0.15);
  z-index:9980;transform:translateY(12px);opacity:0;pointer-events:none;
  transition:transform 0.2s,opacity 0.2s;padding:16px;
}
.eq-panel.open { transform:translateY(0);opacity:1;pointer-events:auto; }
.eq-panel-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:12px; }
.eq-panel-title { font-size:0.75rem;font-weight:600;font-family:var(--font-mono);letter-spacing:1px;text-transform:uppercase; }
.eq-panel-close { background:none;border:none;cursor:pointer;color:var(--text3);font-size:0.9rem; }
.eq-presets { display:flex;flex-wrap:wrap;gap:6px; }
.eq-preset-btn {
  padding:5px 12px;border-radius:6px;font-size:0.72rem;
  border:1px solid var(--border);background:var(--surface2);
  color:var(--text2);cursor:pointer;transition:all 0.12s;
  font-family:var(--font-body);
}
.eq-preset-btn:hover { color:var(--text); }
.eq-preset-btn.active { background:var(--text);color:var(--bg);border-color:var(--text); }
body.dark-mode .eq-preset-btn.active { background:#f0ede8;color:#0e0d0b; }
.eq-btn-ghost { color:var(--accent)!important;border-color:rgba(200,71,42,0.3)!important; }
.eq-btn-ghost:hover { background:rgba(200,71,42,0.08)!important; }
.eq-btn-ghost.active { background:var(--accent)!important;color:#fff!important; }

/* ── SIMILAR STATIONS PANEL ── */
.similar-panel {
  position:fixed;bottom:calc(var(--player-h,80px) + 8px);right:16px;
  width:300px;max-height:400px;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 8px 32px rgba(0,0,0,0.15);z-index:9979;
  transform:translateY(12px);opacity:0;pointer-events:none;
  transition:transform 0.2s,opacity 0.2s;display:flex;flex-direction:column;
}
.similar-panel.open { transform:translateY(0);opacity:1;pointer-events:auto; }
.sim-header { display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border);flex-shrink:0; }
.sim-title { font-size:0.75rem;font-weight:600;font-family:var(--font-mono);letter-spacing:1px;text-transform:uppercase; }
.sim-close { background:none;border:none;cursor:pointer;color:var(--text3);font-size:0.9rem; }
.sim-list { overflow-y:auto;flex:1;padding:8px; }
.sim-loading { font-size:0.75rem;color:var(--text3);padding:16px;text-align:center; }
.sim-item { display:flex;align-items:center;gap:10px;padding:10px 8px;border-radius:8px;cursor:pointer;transition:background 0.12s; }
.sim-item:hover { background:var(--surface2); }
.sim-emoji { font-size:1.2rem;flex-shrink:0; }
.sim-name { font-size:0.8rem;font-weight:500;color:var(--text); }
.sim-meta { font-size:0.65rem;color:var(--text3);margin-top:2px; }

/* ── FAVORITES PAGE ── */
.fav-page { padding:0; }
.fav-wrap { max-width:1100px;margin:0 auto;padding:40px 24px 80px; }
.fav-header-row { display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:28px; }
.fav-kicker { font-family:var(--font-mono);font-size:0.6rem;letter-spacing:3px;color:var(--accent);margin-bottom:6px; }
.fav-title { font-family:var(--font-display);font-size:1.8rem;font-weight:700; }
.fav-actions { display:flex;gap:8px; }
.fav-action-btn {
  display:flex;align-items:center;gap:6px;padding:7px 14px;border-radius:8px;
  border:1px solid var(--border);background:var(--surface);
  color:var(--text2);cursor:pointer;font-size:0.75rem;font-family:var(--font-body);
  transition:all 0.15s;
}
.fav-action-btn:hover { color:var(--text); }
.fav-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px; }
.fav-card {
  display:flex;align-items:center;gap:12px;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:14px 16px;transition:all 0.15s;
}
.fav-card:hover { transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.06); }
.fav-card-emoji { font-size:1.4rem;flex-shrink:0; }
.fav-card-info { flex:1;min-width:0; }
.fav-card-name { font-size:0.85rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.fav-card-meta { font-size:0.68rem;color:var(--text3);margin-top:2px; }
.fav-card-actions { display:flex;gap:6px;flex-shrink:0; }
.fav-play-btn, .fav-remove-btn {
  width:28px;height:28px;border-radius:6px;border:1px solid var(--border);
  background:var(--surface2);cursor:pointer;font-size:0.75rem;color:var(--text2);
  display:flex;align-items:center;justify-content:center;transition:all 0.12s;
}
.fav-play-btn:hover { background:var(--text);color:var(--bg); }
.fav-remove-btn:hover { background:rgba(200,71,42,0.1);color:var(--accent);border-color:var(--accent); }
.fav-empty { text-align:center;padding:60px 20px; }
.fav-empty-icon { font-size:2.5rem;margin-bottom:12px;opacity:0.3; }
.fav-empty-title { font-size:1rem;font-weight:600;margin-bottom:8px; }
.fav-empty-sub { font-size:0.8rem;color:var(--text3);line-height:1.6; }
.fav-empty-sub kbd { background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:1px 5px;font-size:0.7rem; }

/* ── STATS WIDGET ── */
.stats-widget {
  padding:14px 16px;border-top:1px solid var(--border);
  margin-top:auto;
}
.sw-title { font-size:0.6rem;font-family:var(--font-mono);letter-spacing:1.5px;color:var(--text3);text-transform:uppercase;margin-bottom:10px; }
.sw-row { display:flex;justify-content:space-between;align-items:center;margin-bottom:6px; }
.sw-label { font-size:0.72rem;color:var(--text3); }
.sw-val { font-size:0.78rem;font-weight:600;font-family:var(--font-mono);color:var(--text); }

/* ── STATION SUBMISSION ── */
.submit-section { margin-top:36px;padding-top:32px;border-top:1px solid var(--border); }
.submit-header { font-family:var(--font-display);font-size:1.1rem;font-weight:700;margin-bottom:6px; }
.submit-sub { font-size:0.78rem;color:var(--text2);margin-bottom:18px;line-height:1.6; }
.submit-form {}
.sf-row { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px; }
.sf-field { display:flex;flex-direction:column;gap:5px; }
.sf-label { font-size:0.65rem;font-family:var(--font-mono);letter-spacing:1px;color:var(--text3);text-transform:uppercase; }
.sf-input {
  padding:8px 12px;border-radius:7px;border:1px solid var(--border);
  background:var(--surface2);color:var(--text);font-family:var(--font-body);
  font-size:0.8rem;outline:none;transition:border-color 0.15s;
}
.sf-input:focus { border-color:var(--accent); }
.sf-note { font-size:0.68rem;color:var(--text3);line-height:1.6;margin-bottom:12px; }
.sf-submit-btn {
  padding:9px 20px;border-radius:8px;background:var(--text);color:var(--bg);
  border:none;cursor:pointer;font-size:0.8rem;font-family:var(--font-body);
  font-weight:600;transition:opacity 0.15s;
}
.sf-submit-btn:hover { opacity:0.85; }
.sf-feedback { font-size:0.75rem;margin-top:10px;line-height:1.5; }
.sf-feedback.success { color:var(--green,#16a34a); }
.sf-feedback.error { color:var(--accent); }
/* ── SCROLL TO TOP ── */
.scroll-top-btn {
  position:fixed;right:20px;bottom:calc(var(--player-h,80px) + 32px);
  width:40px;height:40px;border-radius:50%;
  background:var(--surface);border:1px solid var(--border);
  color:var(--text2);cursor:pointer;z-index:9970;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity 0.2s,transform 0.2s;
}
.scroll-top-btn.visible { opacity:1;transform:translateY(0);pointer-events:auto; }
.scroll-top-btn:hover { color:var(--text);box-shadow:0 6px 16px rgba(0,0,0,0.12); }

/* ── SKELETON LOADING ── */
.skel {
  background:linear-gradient(90deg,var(--surface2) 25%,var(--border) 50%,var(--surface2) 75%);
  background-size:200% 100%;
  animation:skel-shimmer 1.4s ease-in-out infinite;
  border-radius:4px;height:12px;
}
.skel-sm { width:40%; }
.skel-md { width:60%; }
.skel-lg { width:85%; }
@keyframes skel-shimmer { from{background-position:200% 0} to{background-position:-200% 0} }
.skel-card { background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px; }
.skel-card-img { width:100%;height:80px;border-radius:6px; }
.skeleton-row td { padding:10px 8px; }
.loading-row { text-align:center;padding:24px!important;color:var(--text3);font-size:0.8rem; }

/* ── MOBILE BOTTOM NAV ── */
.mobile-bottom-nav {
  display:none;
  position:fixed;bottom:calc(var(--player-h,80px));left:0;right:0;
  height:56px;background:var(--surface);border-top:1px solid var(--border);
  z-index:480;flex-direction:row;align-items:center;justify-content:space-around;
  padding:0 8px;
}
.mbn-btn.active { color:var(--accent); }
.mbn-playing-dot {
  display:none;width:6px;height:6px;border-radius:50%;background:var(--green,#16a34a);
  position:absolute;top:8px;right:calc(50% - 14px);
  animation:pulse-dot 2s ease-in-out infinite;
}

/* ── 887 SEARCH RESULT ── */
.sr-887-result {
  display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;
  border-bottom:1px solid var(--border);transition:background 0.12s;
}
.sr-887-result:hover { background:rgba(200,71,42,0.05); }
.sr-name-redacted { letter-spacing:1px; }
.sr-887-log {
  padding:12px 16px;background:rgba(200,71,42,0.04);border-top:none;
}
.sr-887-log-line {
  font-family:var(--font-mono);font-size:0.65rem;color:var(--accent);
  opacity:0.6;line-height:1.8;
}

/* ── REDUCED MOTION ── */
body.reduced-motion *,
body.reduced-motion *::before,
body.reduced-motion *::after {
  animation-duration:0.01ms!important;
  transition-duration:0.01ms!important;
}
/* wrongness still fires visually even in reduced motion — intentional */
body.reduced-motion .w-subliminal { animation:none!important;opacity:0.55!important; }

/* ── PLAYER BAR EXTRA BUTTONS ── */
.pb-eq-open-btn { margin-right:4px; }

/* ── KEYBOARD SHORTCUT HINT TOOLTIP ── */
[title]:hover::after {
  content:attr(title);
  position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);
  background:var(--text);color:var(--bg);font-size:0.62rem;padding:3px 7px;
  border-radius:5px;white-space:nowrap;pointer-events:none;z-index:9990;
  font-family:var(--font-mono);
}
.pb-btn { position:relative; }

/* ═══════════════════════════════════════════════════════
   IMPROVEMENTS v2 — items 31–50 styles
═══════════════════════════════════════════════════════ */

/* ── 31. MINI WIDGET — removed, replaced by wncore-player.js ── */
.no-select { user-select:none!important; }

/* ── 32. VOTE BUTTONS ── */
.vote-td { white-space:nowrap;padding:0 6px!important; }
.vote-up, .vote-down {
  background:none;border:none;cursor:pointer;color:var(--text3);
  font-size:0.65rem;padding:2px 3px;border-radius:3px;transition:all 0.12s;line-height:1;
}
.vote-up:hover  { color:var(--green); }
.vote-down:hover { color:var(--accent); }
.vote-up.voted  { color:var(--green);font-weight:700; }
.vote-down.voted { color:var(--accent);font-weight:700; }

/* ── 34. BROADCAST SCHEDULE ── */
.schedule-card {
  padding:14px 16px;border-top:1px solid var(--border);margin-top:8px;
}
.sc-title { font-size:0.6rem;font-family:var(--font-mono);letter-spacing:1.5px;color:var(--text3);text-transform:uppercase;margin-bottom:10px; }
.sc-row { padding:6px 0;border-bottom:1px solid var(--border);position:relative; }
.sc-row:last-child { border-bottom:none; }
.sc-now { background:rgba(22,163,74,0.04);border-radius:4px;padding-left:14px; }
.sc-on-air-pip { position:absolute;left:0;top:50%;transform:translateY(-50%);width:5px;height:5px;border-radius:50%;background:var(--green);animation:pulse-dot 2s ease-in-out infinite; }
.sc-time { font-size:0.6rem;font-family:var(--font-mono);color:var(--text3); }
.sc-name { font-size:0.75rem;font-weight:500;color:var(--text); }
.sc-genre { font-size:0.62rem;color:var(--text3); }
.sc-ghost .sc-name { color:var(--accent);letter-spacing:1px; }
.sc-ghost .sc-genre { color:var(--accent);opacity:0.6; }
.sc-ghost .sc-time  { color:var(--accent);opacity:0.5; }

/* ── 36. SEARCH AUTOCOMPLETE ── */
.search-suggestions {
  position:absolute;top:100%;left:0;right:0;
  background:var(--surface);border:1px solid var(--border);border-radius:0 0 10px 10px;
  z-index:9999;display:none;box-shadow:0 8px 24px rgba(0,0,0,0.1);overflow:hidden;
}
.search-suggestions.open { display:block; }
.ss-item {
  padding:9px 16px;font-size:0.8rem;color:var(--text2);cursor:pointer;transition:background 0.1s;
  border-bottom:1px solid var(--border);
}
.ss-item:last-child { border-bottom:none; }
.ss-item:hover, .ss-item:focus { background:var(--surface2);color:var(--text);outline:none; }

/* ── 37. STATION INFO MODAL ── */
.station-modal-backdrop {
  position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:9998;
  display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px);
}
.station-modal-backdrop.open { display:flex; }
.stm-box {
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  width:min(520px,92vw);padding:28px;box-shadow:0 20px 60px rgba(0,0,0,0.2);
  position:relative;max-height:90vh;overflow-y:auto;
}
.stm-close {
  position:absolute;top:16px;right:16px;background:none;border:none;
  cursor:pointer;color:var(--text3);font-size:1rem;
}
.stm-header { display:flex;align-items:center;gap:14px;margin-bottom:20px; }
.stm-emoji { font-size:2rem; }
.stm-name { font-family:var(--font-display);font-size:1.15rem;font-weight:700; }
.stm-country { font-size:0.75rem;color:var(--text2);margin-top:3px; }
.stm-grid { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px; }
.stm-field { background:var(--surface2);border-radius:8px;padding:10px 12px; }
.stm-label { font-size:0.62rem;font-family:var(--font-mono);color:var(--text3);display:block;margin-bottom:4px;letter-spacing:0.5px;text-transform:uppercase; }
.stm-val { font-size:0.8rem;color:var(--text);font-weight:500; }
.stm-tags { display:flex;flex-wrap:wrap;gap:5px;margin-bottom:18px; }
.stm-tag { background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:2px 8px;font-size:0.65rem;color:var(--text3); }
.stm-footer { display:flex;align-items:center;gap:10px;flex-wrap:wrap; }
.stm-homepage { font-size:0.78rem;color:var(--accent);text-decoration:none; }
.stm-play-btn { padding:9px 20px;background:var(--text);color:var(--bg);border:none;border-radius:8px;cursor:pointer;font-size:0.8rem;font-family:var(--font-body);font-weight:600; }

/* ── 39. TABLE KEYBOARD NAV ── */
#station-tbody tr.kb-focused { background:rgba(200,71,42,0.06)!important;outline:2px solid rgba(200,71,42,0.3);outline-offset:-2px; }

/* ── 40. COMPACT PLAYER ── */
.player-bar.player-compact .pb-info,
.player-bar.player-compact .pb-station-info,
.player-bar.player-compact [class*="pb-info"] { display:none; }
.player-bar.player-compact { height:44px!important; }

/* ── 41. TRENDING GENRES ── */
.trending-genres {
  display:flex;align-items:center;gap:10px;padding:10px 16px;
  border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none;
}
.trending-genres::-webkit-scrollbar { display:none; }
.tg-label { font-size:0.65rem;color:var(--text3);font-family:var(--font-mono);letter-spacing:1px;white-space:nowrap;text-transform:uppercase; }
.tg-pills { display:flex;gap:5px;flex-wrap:nowrap; }
.tg-pill {
  display:flex;align-items:center;gap:5px;white-space:nowrap;
  padding:4px 12px;border-radius:20px;font-size:0.72rem;
  border:1px solid var(--border);background:var(--surface);
  color:var(--text2);cursor:pointer;transition:all 0.12s;
  font-family:var(--font-body);
}
.tg-pill:hover { color:var(--text);border-color:rgba(0,0,0,0.15); }
.tg-count { font-size:0.6rem;color:var(--text3); }

/* ── 42. AMBIENT PANEL ── */
.ambient-panel {
  position:fixed;bottom:calc(var(--player-h,80px) + 8px);right:16px;
  width:260px;background:var(--surface);border:1px solid var(--border);
  border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,0.15);
  z-index:9977;transform:translateY(12px);opacity:0;pointer-events:none;
  transition:transform 0.2s,opacity 0.2s;padding:16px;
}
.ambient-panel.open { transform:translateY(0);opacity:1;pointer-events:auto; }
.amb-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:12px; }
.amb-title { font-size:0.72rem;font-weight:600;font-family:var(--font-mono);letter-spacing:1px;text-transform:uppercase; }
.amb-close { background:none;border:none;cursor:pointer;color:var(--text3);font-size:0.85rem; }
.amb-options { display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px; }
.amb-opt {
  padding:5px 11px;border-radius:6px;font-size:0.72rem;
  border:1px solid var(--border);background:var(--surface2);
  color:var(--text2);cursor:pointer;font-family:var(--font-body);transition:all 0.12s;
}
.amb-opt:hover { color:var(--text); }
.amb-opt.active { background:var(--text);color:var(--bg);border-color:var(--text); }
body.dark-mode .amb-opt.active { background:#f0ede8;color:#0e0d0b; }
.amb-opt-ghost { color:var(--accent)!important;border-color:rgba(200,71,42,0.3)!important; }
.amb-opt-ghost.active { background:var(--accent)!important;color:#fff!important; }
.amb-vol-row { display:flex;align-items:center;gap:10px;margin-bottom:10px; }
.amb-vol-label { font-size:0.68rem;color:var(--text3);white-space:nowrap; }
.amb-vol-slider { flex:1;accent-color:var(--accent); }
.amb-stop-btn {
  width:100%;padding:7px;border-radius:7px;border:1px solid var(--border);
  background:none;color:var(--text2);cursor:pointer;font-size:0.75rem;
  font-family:var(--font-body);transition:all 0.12s;
}
.amb-stop-btn:hover { background:var(--surface2); }

/* ── 43. NETWORK MAP ── */
.network-map-wrap { padding:0 0 28px; }
.nm-title { font-family:var(--font-display);font-size:1rem;font-weight:700;margin-bottom:4px; }
.nm-sub { font-size:0.7rem;color:var(--text3);margin-bottom:10px; }
.network-map-canvas { width:100%;border-radius:8px;border:1px solid var(--border);display:block; }

/* ── 45. STATION OF THE DAY ── */
.sotd-card {
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:16px 20px;margin:12px 0;
}
.sotd-card.sotd-loading { min-height:80px; }
.sotd-ghost { border-color:rgba(200,71,42,0.3);background:rgba(200,71,42,0.03); }
.sotd-label { font-size:0.6rem;font-family:var(--font-mono);letter-spacing:2px;color:var(--text3);text-transform:uppercase;margin-bottom:10px;display:flex;align-items:center;gap:8px; }
.sotd-day { color:var(--accent); }
.sotd-inner { display:flex;align-items:center;gap:14px; }
.sotd-emoji { font-size:1.8rem;flex-shrink:0; }
.sotd-info { flex:1;min-width:0; }
.sotd-name { font-size:0.92rem;font-weight:600;color:var(--text); }
.sotd-meta { font-size:0.7rem;color:var(--text3);margin-top:3px; }
.sotd-bitrate { font-size:0.62rem;font-family:var(--font-mono);color:var(--text3);margin-top:4px; }
.sotd-play-btn { padding:7px 16px;background:var(--text);color:var(--bg);border:none;border-radius:8px;cursor:pointer;font-size:0.75rem;font-weight:600;font-family:var(--font-body);flex-shrink:0; }
.sotd-ghost-badge { font-size:0.62rem;font-family:var(--font-mono);color:var(--accent);background:rgba(200,71,42,0.08);border:1px solid rgba(200,71,42,0.2);padding:3px 8px;border-radius:4px;letter-spacing:1px; }

/* ── 46. LANGUAGE FILTER ── */
.lang-filter-wrap {
  display:flex;align-items:center;gap:6px;padding:8px 24px;
  border-bottom:1px solid var(--border);background:var(--surface);flex-wrap:wrap;
}
.lang-btn {
  padding:4px 11px;border-radius:16px;font-size:0.7rem;
  border:1px solid var(--border);background:var(--surface2);
  color:var(--text2);cursor:pointer;font-family:var(--font-body);transition:all 0.12s;
}
.lang-btn:hover { color:var(--text); }
.lang-btn.active { background:var(--text);color:var(--bg);border-color:var(--text); }
body.dark-mode .lang-btn.active { background:var(--accent);color:#fff;border-color:var(--accent); }

/* ── 47. PLAYER WAVEFORM ── */
.pb-waveform-canvas {
  width:80px;height:28px;border-radius:4px;flex-shrink:0;
}

/* ── 48. SCROBBLE PANEL ── */
.scrobble-panel {
  position:fixed;bottom:calc(var(--player-h,80px) + 8px);right:16px;
  width:280px;max-height:380px;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 8px 32px rgba(0,0,0,0.15);z-index:9976;
  transform:translateY(12px);opacity:0;pointer-events:none;
  transition:transform 0.2s,opacity 0.2s;display:flex;flex-direction:column;
}
.scrobble-panel.open { transform:translateY(0);opacity:1;pointer-events:auto; }
.scr-header { display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border);flex-shrink:0; }
.scr-title { font-size:0.72rem;font-weight:600;font-family:var(--font-mono);letter-spacing:1px;text-transform:uppercase; }
.scr-close { background:none;border:none;cursor:pointer;color:var(--text3);font-size:0.85rem; }
.scr-list { flex:1;overflow-y:auto;padding:6px 0; }
.scr-empty { font-size:0.75rem;color:var(--text3);padding:16px;text-align:center; }
.scr-item { display:flex;align-items:center;justify-content:space-between;padding:8px 16px;border-bottom:1px solid var(--border); }
.scr-item:last-child { border-bottom:none; }
.scr-name { font-size:0.78rem;color:var(--text);font-weight:500; }
.scr-ts { font-size:0.62rem;color:var(--text3);white-space:nowrap;margin-left:8px; }
.scr-ghost { background:rgba(200,71,42,0.04); }
.scr-ghost .scr-name { color:var(--accent); }
.scr-ghost-badge { font-size:0.55rem;background:rgba(200,71,42,0.12);color:var(--accent);padding:1px 4px;border-radius:3px;font-family:var(--font-mono); }
.scr-clear { margin:8px 16px 12px;padding:6px;border-radius:6px;border:1px solid var(--border);background:none;color:var(--text3);cursor:pointer;font-size:0.72rem;font-family:var(--font-body);transition:all 0.12s; }
.scr-clear:hover { color:var(--text); }

/* ── 49. OFFLINE BANNER ── */
.offline-banner {
  position:fixed;top:calc(var(--header-h,60px) + 0px);left:0;right:0;z-index:9985;
  background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:8px 16px;font-size:0.78rem;font-family:var(--font-body);
  transform:translateY(-100%);transition:transform 0.25s;
}
.offline-banner.visible { transform:translateY(0); }

/* ── 50. THEME PANEL ── */
.theme-panel {
  position:fixed;bottom:calc(var(--player-h,80px) + 8px);right:16px;
  width:240px;background:var(--surface);border:1px solid var(--border);
  border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,0.15);
  z-index:9978;transform:translateY(12px);opacity:0;pointer-events:none;
  transition:transform 0.2s,opacity 0.2s;padding:16px;
}
.theme-panel.open { transform:translateY(0);opacity:1;pointer-events:auto; }
.thm-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:14px; }
.thm-title { font-size:0.72rem;font-weight:600;font-family:var(--font-mono);letter-spacing:1px;text-transform:uppercase; }
.thm-close { background:none;border:none;cursor:pointer;color:var(--text3);font-size:0.85rem; }
.thm-section-label { font-size:0.6rem;font-family:var(--font-mono);color:var(--text3);letter-spacing:1px;text-transform:uppercase;margin-bottom:8px; }
.thm-presets { display:flex;align-items:center;gap:7px;margin-bottom:16px;flex-wrap:wrap; }
.thm-preset {
  width:26px;height:26px;border-radius:50%;border:2px solid transparent;
  cursor:pointer;transition:transform 0.15s,border-color 0.15s;
}
.thm-preset:hover { transform:scale(1.15); }
.thm-preset.active { border-color:var(--text);transform:scale(1.1); }
.thm-ghost { border-radius:4px!important;width:26px;height:26px; }
.thm-custom-color {
  width:26px;height:26px;border-radius:4px;border:1px solid var(--border);
  padding:0;cursor:pointer;background:none;
}
.thm-font-row { display:flex;align-items:center;gap:10px; }
.thm-font-btn {
  padding:5px 12px;border-radius:6px;border:1px solid var(--border);
  background:var(--surface2);color:var(--text2);cursor:pointer;
  font-size:0.8rem;font-family:var(--font-mono);transition:all 0.12s;
}
.thm-font-btn:hover { color:var(--text); }
.thm-font-val { flex:1;text-align:center;font-size:0.78rem;font-family:var(--font-mono);color:var(--text2); }

/* ══════════════════════════════════════════════════════
   VEO VIDEO AMBIENT BACKGROUNDS
   For 8-second looping videos in globe and anime sections
══════════════════════════════════════════════════════ */

/* Anime page banner video */
.anime-banner-video {
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;
  opacity:0;transition:opacity 1s;
}
.anime-banner-video.ready { opacity:1; }
/* Hide static image when video is playing */
.anime-banner:has(.anime-banner-video.ready) .anime-banner-img { opacity:0; }

/* Globe ambient video */
.globe-section { position:relative;overflow:hidden; }
.globe-ambient-video.ready { opacity:0.18!important; }

/* Live music hero video */
.lm-hero-video {
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;
  opacity:0;transition:opacity 1s;pointer-events:none;
}
.lm-hero-video.ready { opacity:0.35; }
.lm-hero > :not(.lm-hero-video):not(.lm-hero-bg) { position:relative;z-index:2; }

/* Video toggle button for anime page */
.anime-video-toggle {
  position:absolute;top:12px;right:12px;z-index:10;
  background:rgba(0,0,0,0.45);border:1px solid rgba(255,255,255,0.15);
  color:rgba(255,255,255,0.7);border-radius:20px;
  padding:4px 10px;font-size:0.6rem;font-family:var(--font-mono);
  letter-spacing:1px;cursor:pointer;backdrop-filter:blur(6px);
}
.anime-video-toggle:hover { background:rgba(0,0,0,0.65);color:#fff; }

/* On mobile: don't autoplay videos to save data */
/* ═══════════════════════════════════════════════════════
   WNCORE RADIO — MOBILE.css
   Mobile-first overrides, signal connection box,
   legal page integration, ARG elements
═══════════════════════════════════════════════════════ */

/* ── SIGNAL CONNECTION BOX (bottom of page, replaces header element) ── */
.signal-conn-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--surface);
  border: 1px solid rgba(200,71,42,0.2);
  border-radius: 10px;
  margin: 12px 16px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text3);
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
}
.signal-conn-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(200,71,42,0.03), transparent);
  animation: conn-scan 3s linear infinite;
}
@keyframes conn-scan {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}
.signal-conn-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(200,71,42,0.5);
  flex-shrink: 0;
  animation: pulse-dot 2s ease-in-out infinite;
}
.signal-conn-label {
  color: rgba(200,71,42,0.7);
  font-weight: 500;
  letter-spacing: 1px;
}
.signal-conn-status {
  margin-left: auto;
  font-size: 0.58rem;
  color: rgba(200,71,42,0.4);
}
.signal-conn-freq {
  font-size: 0.72rem;
  color: var(--accent);
  font-weight: 700;
}

/* ── MOBILE FIRST CORE ── */
:root {
  --header-h: 56px;
  --player-h: 68px;
}

@media (min-width: 769px) {
  :root {
    --header-h: 64px;
    --player-h: 76px;
  }
}

/* ── HEADER MOBILE ── */

/* ── TICKER MOBILE ── */

/* ── GLOBE SECTION MOBILE ── */

/* ── PAGE WRAP MOBILE ── */

/* ── FEATURED CARDS MOBILE ── */

/* ── REC GRID MOBILE ── */

/* ── STATION TABLE MOBILE ── */

/* ── PLAYER BAR MOBILE ── */

/* ── SEARCH MODAL MOBILE ── */

/* ── SIGN IN MODAL MOBILE ── */

/* ── GENRE STRIP MOBILE ── */

/* ── ABOUT PAGE MOBILE ── */

/* ── ANIME PAGE MOBILE ── */

/* ── LIVE MUSIC PAGE MOBILE ── */

/* ── CHARTS PAGE MOBILE ── */

/* ── FOOTER MOBILE ── */

/* ── SIDEBAR MOBILE ── */

/* ── NP PROGRESS BAR ── */
.np-progress { height: 3px; background: var(--surface2); border-radius: 2px; margin: 8px 0; overflow: hidden; }
.np-progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 2px;
  animation: np-flow 4s linear infinite;
}
@keyframes np-flow {
  from { width: 0%; margin-left: 0 }
  to   { width: 100%; }
}

/* ── MOBILE BOTTOM NAV ADJUSTMENTS ── */

/* ── LEGAL PAGE MOBILE ── */

/* ── ARG CARD RESPONSIVE ── */
.arg-card {
  background: var(--surface);
  border: 1px solid rgba(200,71,42,0.2);
  border-radius: 14px;
  padding: 18px;
  position: relative;
  overflow: hidden;
}
.arg-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(200,71,42,0.04), transparent);
}
.arg-card-label {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 2px;
  color: rgba(200,71,42,0.5);
  margin-bottom: 10px;
  text-transform: uppercase;
}
.arg-freq {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 10px;
}
.arg-status {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text3);
  line-height: 1.9;
  margin-bottom: 12px;
}
.arg-broken-bar {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 4px;
  color: rgba(200,71,42,0.4);
  text-align: center;
  padding: 6px;
  border: 1px solid rgba(200,71,42,0.1);
  border-radius: 5px;
  animation: flicker-text 3s step-end infinite;
}
@keyframes flicker-text {
  0%, 90%, 100% { opacity: 1; }
  91%, 92%, 93%, 94% { opacity: 0.3; }
}
.redacted {
  background: var(--text);
  color: transparent;
  border-radius: 2px;
  transition: all 0.3s;
  cursor: default;
}
.redacted:hover {
  background: transparent;
  color: var(--accent);
}

/* ── FAVORITES PAGE ── */
#page-favorites {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 24px 100px;
}
#page-favorites h2 {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  margin-bottom: 5px;
}

/* ── BROADCAST STATUS BAR MOBILE ── */

/* ── SCROLL TOP BUTTON MOBILE ── */

/* ── GENRE CARDS GRID MOBILE ── */

/* ── FEATURED CARD ARG VARIANT ── */
.featured-card--arg {
  border-color: rgba(200,71,42,0.2) !important;
  background: linear-gradient(135deg, var(--surface), rgba(200,71,42,0.03)) !important;
}
.featured-card--arg:hover {
  border-color: rgba(200,71,42,0.4) !important;
  box-shadow: 0 12px 32px rgba(200,71,42,0.08) !important;
}
.fc-listeners--warn { color: var(--accent) !important; opacity: 0.7; }
.fc-name--warn { color: var(--accent) !important; letter-spacing: 0.5px; }
.fc-meta--warn { color: rgba(200,71,42,0.5) !important; }
.fc-now--warn {
  background: rgba(200,71,42,0.05) !important;
  color: rgba(200,71,42,0.6) !important;
  border: 1px solid rgba(200,71,42,0.1);
}
.signal-ring { animation: signal-pulse 2s ease-in-out infinite; }
.signal-ring.r2 { animation-delay: 0.5s; }
@keyframes signal-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* ── LIVEMUSIC GRID MOBILE ── */

/* ── PODCAST GRID MOBILE ── */

/* ── HORROR OVERLAYS MOBILE ── */

/* ── SECTION HEADER MOBILE ── */

/* ── GLOBAL TOUCH TARGETS ── */

/* ── STATION TABLE SWIPE SCROLL ── */

/* ── ANIME IMAGE STRIP MOBILE ── */

/* ── NP WAVE MOBILE ── */

/* ── OFFLINE BANNER REPOSITIONED AS BOTTOM BOX ── */
.offline-banner {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  border-radius: 8px;
  margin-top: 8px;
  width: 100%;
  font-size: 0.7rem;
  padding: 8px 14px;
  justify-content: flex-start;
  background: rgba(200,71,42,0.08) !important;
  border: 1px solid rgba(200,71,42,0.2) !important;
}
.offline-banner.visible {
  transform: none !important;
}
.offline-banner svg {
  flex-shrink: 0;
  margin-right: 4px;
}



/* ═══════════════════════════════════════════════════════
   STATION HOVER POPOVER
═══════════════════════════════════════════════════════ */
.station-hover-pop {
  position: absolute;
  z-index: 7500;
  background: var(--surface, #1a1714);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
  min-width: 200px;
  max-width: 260px;
}
.station-hover-pop.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
.shp-flag { font-size: 1.4rem; flex-shrink: 0; line-height: 1; margin-top: 2px; display: none; }
.shp-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.shp-name { font-size: 0.72rem; color: var(--text1, #e8e4df); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shp-meta { font-size: 0.6rem; color: var(--text3, #8a7f76); font-family: var(--font-mono); }
.shp-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.shp-tag {
  font-size: 0.54rem;
  background: rgba(200,71,42,0.1);
  border: 1px solid rgba(200,71,42,0.2);
  color: rgba(200,71,42,0.8);
  border-radius: 3px;
  padding: 1px 5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════
   FAKE OAUTH POPUP — ARG intercept system
═══════════════════════════════════════════════════════ */

/* Backdrop — blurs the page behind the "popup" */
#oauth-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(3px);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  animation: oauth-fade-in 0.15s ease;
}
#oauth-backdrop.show { display: flex; }

@keyframes oauth-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* The popup window itself */
.oauth-popup {
  width: 440px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.08);
  overflow: hidden;
  position: relative;
  transform: translateY(0) scale(1);
  transition: transform 0.2s ease;
}
.oauth-popup.corrupting {
  animation: oauth-corrupt-shake 0.08s infinite;
}
@keyframes oauth-corrupt-shake {
  0%   { transform: translate(0,0) skewX(0deg); }
  25%  { transform: translate(-2px, 1px) skewX(-0.4deg); }
  50%  { transform: translate(2px,-1px) skewX(0.4deg); }
  75%  { transform: translate(-1px, 2px) skewX(-0.2deg); }
  100% { transform: translate(0,0); }
}

/* Browser chrome bar at top */
.oauth-chrome {
  background: #f1f3f4;
  border-bottom: 1px solid #dadce0;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.oauth-chrome-dots {
  display: flex; gap: 5px;
}
.oauth-chrome-dot {
  width: 10px; height: 10px; border-radius: 50%;
}
.oauth-chrome-url {
  flex: 1;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 0.72rem;
  font-family: var(--font-mono);
  color: #3c4043;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
}
.oauth-chrome-url svg { flex-shrink: 0; opacity: 0.6; }
.oauth-url-text { overflow: hidden; text-overflow: ellipsis; }
.oauth-url-text.corrupt {
  animation: url-corrupt 0.06s steps(1) infinite;
}
@keyframes url-corrupt {
  0%   { color: #3c4043; }
  33%  { color: #c8472a; letter-spacing: 0.5px; }
  66%  { color: #a00; letter-spacing: -0.5px; }
  100% { color: #3c4043; }
}

/* Provider-branded body */
.oauth-body {
  padding: 32px 40px 28px;
}
.oauth-provider-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.oauth-title {
  font-size: 1.35rem;
  font-weight: 500;
  text-align: center;
  color: #202124;
  margin-bottom: 6px;
  font-family: 'Google Sans', 'Segoe UI', sans-serif;
}
.oauth-subtitle {
  font-size: 0.82rem;
  text-align: center;
  color: #5f6368;
  margin-bottom: 24px;
  font-family: 'Roboto', sans-serif;
}
.oauth-account-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #dadce0;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 20px;
  cursor: default;
}
.oauth-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.82rem; font-weight: 600;
  flex-shrink: 0;
}
.oauth-account-info { flex: 1; min-width: 0; }
.oauth-account-name {
  font-size: 0.82rem; font-weight: 500; color: #202124;
  font-family: 'Roboto', sans-serif;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.oauth-account-email {
  font-size: 0.72rem; color: #5f6368;
  font-family: 'Roboto', sans-serif;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.oauth-continue-btn {
  width: 100%;
  padding: 10px;
  border-radius: 6px;
  border: none;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  font-family: 'Roboto', 'Segoe UI', sans-serif;
  transition: opacity 0.15s, filter 0.15s;
  margin-bottom: 10px;
}
.oauth-continue-btn:hover { opacity: 0.92; }
.oauth-cancel-link {
  display: block;
  text-align: center;
  font-size: 0.78rem;
  color: #5f6368;
  cursor: pointer;
  font-family: 'Roboto', sans-serif;
  text-decoration: underline;
}
.oauth-cancel-link:hover { color: #202124; }

/* Progress bar — fake loading */
.oauth-progress-bar {
  height: 3px;
  background: #e8eaed;
  position: relative;
  overflow: hidden;
  border-radius: 0;
}
.oauth-progress-fill {
  height: 100%;
  width: 0%;
  transition: width 0.4s ease;
}

/* Corruption scanlines overlay */
.oauth-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(200,71,42,0.05) 2px,
    rgba(200,71,42,0.05) 4px
  );
  z-index: 2;
}
.oauth-popup.corrupting .oauth-scanlines { opacity: 1; }

/* Intercepted terminal (replaces popup body) */
.oauth-intercept {
  position: absolute;
  inset: 0;
  background: #0a0a08;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: #33ff33;
  padding: 14px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  transition: opacity 0.15s;
}
.oauth-intercept.show { opacity: 1; pointer-events: all; }
.oauth-intercept-line {
  line-height: 1.6;
  white-space: pre;
}
.oauth-intercept-line.red { color: #c8472a; }
.oauth-intercept-line.dim { color: #1a661a; }
.oauth-intercept-line.white { color: #e0e0e0; }
.oauth-intercept-line.blink {
  animation: intercept-blink 0.8s step-end infinite;
}
@keyframes intercept-blink {
  50% { opacity: 0; }
}

/* Apple-specific overrides */
.oauth-popup.apple-theme .oauth-chrome { background: #1c1c1e; border-color: #3a3a3c; }
.oauth-popup.apple-theme .oauth-chrome-url { background: #2c2c2e; border-color: #3a3a3c; color: #e5e5ea; }
.oauth-popup.apple-theme .oauth-body { background: #1c1c1e; }
.oauth-popup.apple-theme .oauth-title { color: #f5f5f7; font-family: -apple-system, 'SF Pro Display', sans-serif; }
.oauth-popup.apple-theme .oauth-subtitle { color: #98989d; font-family: -apple-system, 'SF Pro Text', sans-serif; }
.oauth-popup.apple-theme .oauth-account-pill { border-color: #3a3a3c; background: #2c2c2e; }
.oauth-popup.apple-theme .oauth-account-name { color: #f5f5f7; }
.oauth-popup.apple-theme .oauth-account-email { color: #98989d; }
.oauth-popup.apple-theme .oauth-cancel-link { color: #98989d; }

/* Discord-specific overrides */
.oauth-popup.discord-theme .oauth-chrome { background: #1e1f22; border-color: #313338; }
.oauth-popup.discord-theme .oauth-chrome-url { background: #2b2d31; border-color: #313338; color: #dbdee1; }
.oauth-popup.discord-theme .oauth-body { background: #313338; }
.oauth-popup.discord-theme .oauth-title { color: #f2f3f5; font-family: 'gg sans', 'Noto Sans', sans-serif; }
.oauth-popup.discord-theme .oauth-subtitle { color: #b5bac1; font-family: 'gg sans', 'Noto Sans', sans-serif; }
.oauth-popup.discord-theme .oauth-account-pill { border-color: #232428; background: #1e1f22; }
.oauth-popup.discord-theme .oauth-account-name { color: #f2f3f5; }
.oauth-popup.discord-theme .oauth-account-email { color: #b5bac1; }
.oauth-popup.discord-theme .oauth-cancel-link { color: #b5bac1; }

/* RGB glitch effect at corruption peak */
@keyframes rgb-split {
  0%   { text-shadow: none; }
  20%  { text-shadow: -2px 0 #ff0000, 2px 0 #0000ff; }
  40%  { text-shadow: 2px 0 #ff0000, -2px 0 #0000ff; }
  60%  { text-shadow: -3px 0 #00ffff, 3px 0 #ff00ff; }
  80%  { text-shadow: 3px 0 #ffff00, -3px 0 #00ff00; }
  100% { text-shadow: none; }
}
.oauth-title.glitching { animation: rgb-split 0.12s steps(1) infinite; }

/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE FIXES — elements that were stuck dark
   ═══════════════════════════════════════════════════════════════ */

/* ── Player bar: light mode version ── */
body:not(.dark-mode) .player-bar {
  background: rgba(245, 243, 239, 0.97);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
body:not(.dark-mode) .pb-name { color: var(--text); }
body:not(.dark-mode) .pb-meta { color: var(--text2); }
body:not(.dark-mode) .pb-btn  { color: var(--text3); }
body:not(.dark-mode) .pb-btn:hover { color: var(--text); }
body:not(.dark-mode) .pb-play { background: var(--text); color: var(--bg); }
body:not(.dark-mode) .pb-bar  { background: rgba(0, 0, 0, 0.1); }
body:not(.dark-mode) .pb-bar-fill { background: var(--text); }
body:not(.dark-mode) .pb-time { color: var(--text3); }
body:not(.dark-mode) .pb-vol-icon { color: var(--text3); }
body:not(.dark-mode) .pb-vol-slider { background: rgba(0, 0, 0, 0.15); }
body:not(.dark-mode) .pb-vol-slider::-webkit-slider-thumb { background: var(--text); }
body:not(.dark-mode) .pb-art  { background: rgba(0, 0, 0, 0.06); }
body:not(.dark-mode) .pb-art svg { color: var(--text3); }
body:not(.dark-mode) .pb-eq span { background: rgba(0, 0, 0, 0.25); }
body:not(.dark-mode) .pb-eq.playing span { background: var(--text2); }

/* ── Now-playing art box: light mode version ── */
body:not(.dark-mode) .np-art {
  background: linear-gradient(135deg, var(--surface2) 0%, var(--surface) 100%);
}
body:not(.dark-mode) .np-art::after {
  background: linear-gradient(135deg, rgba(200, 71, 42, 0.08), transparent);
}
body:not(.dark-mode) .np-wave span { background: rgba(0, 0, 0, 0.2); }

/* ── ARG sidebar card: needs light-mode-friendly colours ── */
body:not(.dark-mode) .arg-card {
  background: var(--surface2);
  border-color: rgba(200, 71, 42, 0.2);
}
body:not(.dark-mode) .arg-freq  { color: rgba(0, 0, 0, 0.08); }
body:not(.dark-mode) .arg-status { color: var(--text3); }
body:not(.dark-mode) .arg-status .redacted {
  background: rgba(0, 0, 0, 0.08);
}

/* ── Broadcast status bar separator: invisible on light bg fix ── */
body:not(.dark-mode) .bsb-sep { color: rgba(0, 0, 0, 0.25); }





/* ══ HORROR / ARG SYSTEM ═════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════
   WNCORE RADIO — Horror Terminal Upgrade
   Professional, cinematic, broadcast-facility aesthetic
═══════════════════════════════════════════════════════ */

/* ─── UPGRADED HORROR OVERLAY ─────────────────────────── */
#horror-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: #000;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#horror-overlay.show {
  display: flex;
  animation: horror-fade-in 0.6s ease forwards;
}
@keyframes horror-fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* CRT Screen effect behind terminal */
#horror-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(180, 10, 30, 0.06) 0%, transparent 70%),
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 2px,
      rgba(0, 0, 0, 0.15) 2px,
      rgba(0, 0, 0, 0.15) 4px
    );
  pointer-events: none;
  z-index: 0;
  animation: crt-roll 12s linear infinite;
}
@keyframes crt-roll {
  0% { background-position: 0 0; }
  100% { background-position: 0 100px; }
}

/* ─── THE TERMINAL BOX ────────────────────────────────── */
.horror-terminal {
  position: relative;
  z-index: 2;
  font-family: 'DM Mono', 'Courier New', monospace;
  font-size: 0.82rem;
  line-height: 1.8;
  letter-spacing: 0.06em;
  text-align: left;
  width: min(720px, 94vw);
  padding: 0;
  background: #020304;
  border: 1px solid rgba(30, 100, 60, 0.25);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.9),
    0 0 80px rgba(20, 80, 40, 0.08),
    0 40px 100px rgba(0,0,0,0.95);
  border-radius: 3px;
  overflow: hidden;
}

/* Facility header bar — strict, minimal */
.horror-terminal-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: #030405;
  border-bottom: 1px solid rgba(30, 100, 60, 0.2);
}
.horror-chrome-dots {
  display: flex;
  gap: 0;
  align-items: center;
}
/* Replace colorful dots with classified badge */
.horror-chrome-dot {
  display: none;
}
.horror-chrome-dots::before {
  content: '▮ RESTRICTED';
  font-family: var(--font-mono);
  font-size: 0.48rem;
  letter-spacing: 3px;
  color: rgba(200, 50, 40, 0.55);
  border: 1px solid rgba(200, 50, 40, 0.2);
  padding: 2px 7px;
  border-radius: 2px;
}
.horror-chrome-title {
  font-size: 0.52rem;
  letter-spacing: 2.5px;
  color: rgba(140, 200, 160, 0.2);
  font-family: var(--font-mono);
  text-transform: uppercase;
}
.horror-chrome-badge {
  font-size: 0.46rem;
  letter-spacing: 2px;
  padding: 2px 6px;
  border: 1px solid rgba(200, 50, 40, 0.35);
  border-radius: 2px;
  color: rgba(200, 50, 40, 0.65);
  font-family: var(--font-mono);
  animation: badge-blink 2s step-end infinite;
}
@keyframes badge-blink {
  0%, 80%, 100% { opacity: 1; }
  82%, 86%, 90% { opacity: 0.2; }
}

/* Terminal body */
.horror-terminal-body {
  padding: 20px 24px 24px;
  background: #020304;
  min-height: 300px;
  position: relative;
  overflow-y: auto;
  max-height: 70vh;
}

/* Phosphor green glow — authentic CRT monitor feel */
.horror-terminal-body::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 40% at 50% 20%, rgba(20, 80, 40, 0.04) 0%, transparent 70%);
  pointer-events: none;
}

/* Scanline overlay */
.horror-terminal-body::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0, 0, 0, 0.06) 3px,
    rgba(0, 0, 0, 0.06) 4px
  );
  pointer-events: none;
  animation: scanline-drift 20s linear infinite;
}
@keyframes scanline-drift {
  0% { transform: translateY(0); }
  100% { transform: translateY(40px); }
}

/* Individual terminal lines */
.horror-terminal-body div {
  position: relative;
  z-index: 2;
  font-size: 0.78rem;
  color: rgba(120, 160, 130, 0.55);
  letter-spacing: 0.05em;
  padding: 0;
  line-height: 1.75;
}

/* Status bar at bottom of terminal */
.horror-status-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid rgba(30, 80, 50, 0.15);
  font-size: 0.52rem;
  color: rgba(80, 130, 90, 0.3);
  letter-spacing: 2.5px;
}
.horror-status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(200, 50, 40, 0.6);
  flex-shrink: 0;
  animation: status-pulse 2s ease-in-out infinite;
}
@keyframes status-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; box-shadow: 0 0 6px rgba(200, 50, 40, 0.5); }
}

/* ─── TERMINAL LINE COLORS — cold, military phosphor palette ── */
.ht-dim   { color: rgba(80, 120, 90, 0.35) !important; }
.ht-norm  { color: rgba(120, 160, 130, 0.55) !important; }
.ht-white { color: rgba(160, 200, 170, 0.85) !important; letter-spacing: 0.08em; }
.ht-warn  { color: rgba(200, 160, 60, 0.75) !important; }
.ht-red   { color: rgba(210, 60, 50, 0.9) !important; font-weight: 500; }
.ht-alert {
  color: rgba(220, 70, 50, 1) !important;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.ht-ok    { color: rgba(60, 180, 90, 0.8) !important; }
.ht-ps1   { color: rgba(60, 180, 90, 0.65) !important; font-weight: 500; }
.ht-cmd   { color: rgba(140, 180, 200, 0.7) !important; }
.ht-cursor {
  display: inline-block;
  width: 7px; height: 0.9em;
  background: rgba(120, 180, 140, 0.8);
  vertical-align: text-bottom;
  animation: term-cursor-blink 0.9s step-end infinite;
  margin-left: 2px;
}
@keyframes term-cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ─── UPGRADED DATA CORRUPT OVERLAY ──────────────────── */
#data-corrupt-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #01020a;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
}
#data-corrupt-overlay.show { display: flex; }
#data-corrupt-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(180, 0, 30, 0.025) 2px,
    rgba(180, 0, 30, 0.025) 4px
  );
  pointer-events: none;
  animation: corrupt-scan 6s linear infinite;
}
@keyframes corrupt-scan {
  0% { transform: translateY(0); }
  100% { transform: translateY(8px); }
}

.corrupt-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(180, 0, 30, 0.03) 2px,
    rgba(180, 0, 30, 0.03) 4px
  );
  pointer-events: none;
  z-index: 1;
}
.corrupt-flicker {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  pointer-events: none;
  z-index: 1;
  animation: corrupt-flicker-anim 8s step-end infinite;
}
@keyframes corrupt-flicker-anim {
  0%, 95%, 100% { opacity: 0; }
  96% { opacity: 0.4; }
  97% { opacity: 0; }
  98% { opacity: 0.6; }
  99% { opacity: 0; }
}

.corrupt-header {
  position: relative;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.46rem;
  color: rgba(180, 50, 40, 0.45);
  letter-spacing: 5px;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.corrupt-terminal-box {
  position: relative;
  z-index: 2;
  background: #01020a;
  border: 1px solid rgba(30, 90, 50, 0.2);
  border-radius: 2px;
  width: min(680px, 94vw);
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.9),
    0 0 60px rgba(20, 70, 40, 0.06),
    0 40px 100px rgba(0,0,0,0.95);
}

.corrupt-title-bar {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 7px 14px;
  border-bottom: 1px solid rgba(30, 90, 50, 0.18);
  background: #020308;
  justify-content: space-between;
}
/* Hide colorful dots — replace with classified marker */
.corrupt-dot {
  display: none;
}
.corrupt-title-bar::before {
  content: '⬛ WNCORE//SIGINT';
  font-family: var(--font-mono);
  font-size: 0.46rem;
  letter-spacing: 3px;
  color: rgba(180, 50, 40, 0.5);
  border: 1px solid rgba(180, 50, 40, 0.2);
  padding: 2px 7px;
  border-radius: 2px;
}

.corrupt-terminal-text {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.85;
  padding: 18px 22px;
  min-height: 220px;
  max-height: 65vh;
  overflow-y: auto;
  color: rgba(100, 150, 115, 0.6);
  letter-spacing: 0.05em;
  background: transparent;
}
.corrupt-terminal-text::-webkit-scrollbar { width: 3px; }
.corrupt-terminal-text::-webkit-scrollbar-track { background: transparent; }
.corrupt-terminal-text::-webkit-scrollbar-thumb { background: rgba(30, 90, 50, 0.2); }

/* ─── UPGRADED EMAIL HORROR TERMINAL ──────────────────── */
#email-horror-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9997;
  background: #000;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#email-horror-overlay.show { display: flex; animation: horror-fade-in 0.4s ease forwards; }
.email-horror-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0, 180, 60, 0.02) 2px,
    rgba(0, 180, 60, 0.02) 4px
  );
  pointer-events: none;
}
.email-terminal {
  position: relative;
  z-index: 2;
  width: min(640px, 92vw);
  background: #040604;
  border: 1px solid rgba(20, 80, 20, 0.3);
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(0, 180, 60, 0.04), 0 30px 80px rgba(0, 0, 0, 0.9);
}
.email-terminal-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: #020806;
  border-bottom: 1px solid rgba(20, 80, 20, 0.18);
}
.email-terminal-bar-dot { display: none; }
.email-terminal-text {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: rgba(0, 180, 60, 0.75);
  padding: 22px 24px;
  min-height: 260px;
  max-height: 340px;
  overflow-y: auto;
  line-height: 1.9;
  letter-spacing: 0.04em;
  text-shadow: none;
}
.et-dim   { color: rgba(0, 120, 40, 0.4) !important; }
.et-err   { color: rgba(200, 80, 40, 0.85) !important; }
.et-white { color: rgba(0, 200, 80, 0.7) !important; }
.et-cursor { animation: term-cursor-blink 0.9s step-end infinite; }

/* ─── SHARE MODAL ──────────────────────────────────────── */
.share-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 8000;
  background: rgba(0, 0, 0, 0.7);
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
}
.share-modal-backdrop.open { display: flex; animation: modal-fade-in 0.2s ease; }
@keyframes modal-fade-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }

.share-modal-box {
  position: relative;
  background: var(--surface, #f5f3ef);
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: 16px;
  padding: 28px 28px 24px;
  width: min(380px, 90vw);
  box-shadow: 0 24px 60px rgba(0,0,0,0.18);
}
.share-modal-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text, #1a1714);
}
.share-modal-station {
  font-size: 0.8rem;
  color: var(--text3, rgba(26,23,20,0.4));
  margin-bottom: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.share-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 4px;
}
.share-option-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  background: var(--surface2, rgba(0,0,0,0.04));
  border: 1px solid var(--border, rgba(0,0,0,0.06));
  border-radius: 10px;
  color: var(--text, #1a1714);
  font-family: var(--font-body);
  font-size: 0.82rem;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
}
.share-option-btn:hover { background: var(--surface, #ede9e3); border-color: var(--border, rgba(0,0,0,0.1)); transform: translateX(2px); }
.share-option-x { color: var(--text, #1a1714) !important; }
.share-option-reddit { color: #ff4500 !important; }
.share-modal-close {
  position: absolute;
  top: 14px; right: 14px;
  background: none;
  border: none;
  font-size: 1.4rem;
  color: var(--text3, rgba(26,23,20,0.3));
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  transition: color 0.15s;
}
.share-modal-close:hover { color: var(--text, #1a1714); }

/* ─── TOAST NOTIFICATION ──────────────────────────────── */
.wncore-toast {
  position: fixed;
  bottom: calc(var(--player-h, 76px) + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--text, #1a1714);
  color: var(--bg, #f5f3ef);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.5px;
  padding: 9px 20px;
  border-radius: 100px;
  z-index: 7999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  white-space: nowrap;
  max-width: 90vw;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 4px 24px rgba(0,0,0,0.15);
}
.wncore-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ─── SEARCH RESULT IMPROVEMENTS ─────────────────────── */
.search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.12s;
  margin-bottom: 2px;
}
.search-result-item:hover {
  background: var(--surface2, rgba(0,0,0,0.04));
}
.search-result-item:hover .sr-play-btn {
  opacity: 1;
}
.sr-body { flex: 1; min-width: 0; }
.sr-play-btn {
  background: var(--accent, #c8472a);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 0.65rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 2px;
}

/* ─── KEYBOARD HELP MODAL ─────────────────────────────── */
.kb-help-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 8500;
  background: rgba(0,0,0,0.5);
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.kb-help-modal.open { display: flex; }
.kb-help-box {
  background: var(--surface, #f5f3ef);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
  width: min(360px, 90vw);
  box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}
.kb-help-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 18px;
  color: var(--text);
}
.kb-shortcuts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.kb-row { display: flex; align-items: center; gap: 14px; font-size: 0.8rem; color: var(--text2); }
.kb-key {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 72px;
  text-align: center;
}
.kb-help-close {
  width: 100%;
  padding: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 1px;
  color: var(--text2);
  transition: all 0.15s;
}
.kb-help-close:hover { background: var(--surface); color: var(--text); }

/* ─── PLAYER BAR SHARE BUTTON ─────────────────────────── */
.pb-share-btn {
  color: var(--text2) !important;
}
.pb-share-btn:hover {
  color: var(--accent) !important;
}

/* ─── MOBILE HOME PAGE FIXES ──────────────────────────── */


/* ─── DARK MODE ADJUSTMENTS ────────────────────────────── */
.dark .share-option-btn:hover,
html.dark .share-option-btn:hover {
  background: rgba(255,255,255,0.05);
}



/* ══ PAGE TRANSITIONS ════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
   WNCORE — PERSONA 5 TRANSITION SYSTEM  v2
   File: p5-transitions.css
   Load after: horror_upgrade.css
   ═══════════════════════════════════════════════════════════════════════ */

/* ── WIPE OVERLAY ──────────────────────────────────────────────────────── */
#p5-wipe {
  position: fixed;
  inset: 0;
  z-index: 9800;
  pointer-events: none;
  overflow: hidden;
  /* Hidden at rest — only visible during active wipe */
  visibility: hidden;
}

#p5-wipe.in,
#p5-wipe.out {
  visibility: visible;
}

#p5-wipe-a,
#p5-wipe-b {
  position: absolute;
  top: -10%;
  width: 70%;
  height: 120%;
  clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%);
  transform: translateX(-115%);
  will-change: transform, opacity;
  transition: none;
}

#p5-wipe-a {
  left: -5%;
  background: #c8472a;
  opacity: 0.92;
}

#p5-wipe-b {
  left: 26%;
  background: #0e0d0b;
  opacity: 0.72;
}

/* IN: sweep from left — smooth deceleration into position */
#p5-wipe.in #p5-wipe-a {
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(0%);
}

#p5-wipe.in #p5-wipe-b {
  transition: transform 360ms cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 30ms;
  transform: translateX(0%);
}

/* OUT: sweep right — gentle ease-in so it doesn't snap */
#p5-wipe.out #p5-wipe-a {
  transition: transform 280ms cubic-bezier(0.4, 0, 0.6, 1);
  transform: translateX(115%);
}

#p5-wipe.out #p5-wipe-b {
  transition: transform 260ms cubic-bezier(0.4, 0, 0.6, 1);
  transition-delay: 18ms;
  transform: translateX(115%);
}

/* ── PAGE ENTER ANIMATION ──────────────────────────────────────────────── */
.page.p5-enter {
  animation: p5PageEnter 300ms cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

@keyframes p5PageEnter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ── GENRE PILL — click stamp ripple ──────────────────────────────────── */
.genre-btn {
  position: relative;
  overflow: hidden;
}

.genre-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #c8472a;
  opacity: 0;
  border-radius: inherit;
  transform: scale(0.5);
  pointer-events: none;
}

.genre-btn.p5-stamp::after {
  animation: p5Stamp 380ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes p5Stamp {
  0%   { opacity: 0.25; transform: scale(0.5);  }
  55%  { opacity: 0.08; transform: scale(1.04); }
  100% { opacity: 0;    transform: scale(1.04); }
}

.genre-btn.active {
  background: var(--text, #1a1814);
  color: #fff;
  border-color: var(--text, #1a1814);
  box-shadow: 2px 2px 0 #c8472a;
  transform: translate(-1px, -1px);
  transition: all 0.12s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── HEADER NAV — red slash on active link ─────────────────────────────── */
header nav a {
  position: relative;
}

header nav a.active::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 50%;
  transform: translateY(-50%) skewX(-18deg);
  width: 3px;
  height: 60%;
  background: #c8472a;
  border-radius: 1px;
  animation: p5NavSlash 160ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes p5NavSlash {
  from { height: 0; opacity: 0; }
  to   { height: 60%; opacity: 1; }
}

/* ── MOBILE ONLY — all bottom nav overrides inside media query ─────────── */

/* ── SAFE-AREA (notched phones) ────────────────────────────────────────── */


/* ══ UI IMPROVEMENTS (toast, scroll reveal, marquee) ═════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   WNCORE RADIO — UI/UX IMPROVEMENTS PATCH
   Drop this into index.html AFTER all other stylesheets:
   <link rel="stylesheet" href="wncore-ui-improvements.css">
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. SMOOTHER TRANSITIONS THROUGHOUT ────────────────────── */
:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: 120ms;
  --transition-base: 200ms;
  --transition-slow: 380ms;
}

/* ─── 2. ENHANCED HEADER ────────────────────────────────────── */
header {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: box-shadow var(--transition-base) var(--ease-out),
              background var(--transition-base);
}
header.scrolled {
  box-shadow: 0 1px 0 var(--border), 0 4px 20px rgba(0,0,0,0.06);
}
body.dark-mode header.scrolled {
  box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 4px 24px rgba(0,0,0,0.35);
}

/* Nav links: smooth underline indicator */
nav a {
  position: relative;
  transition: color var(--transition-fast), background var(--transition-fast);
}
nav a.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}
nav a svg {
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
nav a:hover svg {
  opacity: 1;
  transform: scale(1.1);
}

/* ─── 3. PLAYER BAR — HEAVILY IMPROVED ──────────────────────── */
.player-bar {
  backdrop-filter: blur(32px) !important;
  -webkit-backdrop-filter: blur(32px) !important;
  transition: transform var(--transition-slow) var(--ease-out);
}
/* Dark mode: always dark */
body.dark-mode .player-bar {
  background: rgba(14, 12, 10, 0.98) !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}
/* Light mode: always light */
body:not(.dark-mode) .player-bar {
  background: rgba(248, 246, 242, 0.97) !important;
  border-top: 1px solid rgba(0,0,0,0.09) !important;
}
body:not(.dark-mode) .pb-name { color: var(--text) !important; }
body:not(.dark-mode) .pb-meta { color: var(--text2) !important; }
body:not(.dark-mode) .pb-btn  { color: var(--text2) !important; }
body:not(.dark-mode) .pb-btn:hover { color: var(--text) !important; }
body:not(.dark-mode) .pb-play {
  background: var(--text) !important;
  color: var(--bg) !important;
}
body:not(.dark-mode) .pb-bar {
  background: rgba(0,0,0,0.1) !important;
}
body:not(.dark-mode) .pb-bar-fill {
  background: var(--text) !important;
}
body:not(.dark-mode) .pb-time {
  color: var(--text3) !important;
}
body:not(.dark-mode) .pb-vol-icon svg {
  color: var(--text2) !important;
  stroke: var(--text2) !important;
}

/* Player art: pulsing ring when playing */
.pb-art {
  position: relative;
  border-radius: 10px !important;
  overflow: visible !important;
  transition: transform var(--transition-base) var(--ease-spring);
}
.pb-art.playing::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 12px;
  border: 1.5px solid var(--accent);
  opacity: 0.5;
  animation: pb-ring-pulse 2.4s ease-in-out infinite;
}
@keyframes pb-ring-pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%       { opacity: 0.15; transform: scale(1.06); }
}

/* Play button: springy scale */
.pb-play {
  transition: transform var(--transition-fast) var(--ease-spring),
              background var(--transition-fast),
              box-shadow var(--transition-fast) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
.pb-play:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
}
.pb-play:active { transform: scale(0.95) !important; }

/* Progress bar: thicker + interactive hover */
.pb-bar {
  height: 4px !important;
  border-radius: 4px !important;
  position: relative;
  transition: height var(--transition-fast);
}
.pb-bar:hover { height: 6px !important; }
.pb-bar-fill {
  height: 100% !important;
  border-radius: 4px !important;
  transition: width 0.3s linear;
}

/* Volume slider: custom track */
.pb-vol-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  border-radius: 3px;
  background: rgba(255,255,255,0.15);
  outline: none;
  cursor: pointer;
  transition: height var(--transition-fast);
}
body:not(.dark-mode) .pb-vol-slider {
  background: rgba(0,0,0,0.12);
}
.pb-vol-slider:hover { height: 5px; }
.pb-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  transition: transform var(--transition-fast) var(--ease-spring);
}
body:not(.dark-mode) .pb-vol-slider::-webkit-slider-thumb {
  background: var(--text);
}
.pb-vol-slider::-webkit-slider-thumb:hover {
  transform: scale(1.3);
}

/* pb-btn hover: subtle background */
.pb-btn {
  border-radius: 8px !important;
  padding: 7px !important;
  transition: color var(--transition-fast), background var(--transition-fast),
              transform var(--transition-fast) var(--ease-spring) !important;
}
.pb-btn:hover {
  background: rgba(255,255,255,0.08) !important;
  transform: scale(1.08) !important;
}
body:not(.dark-mode) .pb-btn:hover {
  background: rgba(0,0,0,0.06) !important;
}
.pb-btn:active { transform: scale(0.92) !important; }

/* ─── 4. FEATURED CARDS — PREMIUM FEEL ──────────────────────── */
.featured-card {
  transition: transform var(--transition-base) var(--ease-out),
              box-shadow var(--transition-base) var(--ease-out),
              border-color var(--transition-base) !important;
  border-radius: 16px !important;
  overflow: hidden;
}
.featured-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 20px 48px rgba(0,0,0,0.12) !important;
  border-color: rgba(200,71,42,0.2) !important;
}
body.dark-mode .featured-card:hover {
  box-shadow: 0 20px 48px rgba(0,0,0,0.5) !important;
  border-color: rgba(200,71,42,0.25) !important;
}
.featured-card:active { transform: translateY(-2px) scale(0.99) !important; }

/* ARG card variant: subtle red glow */
.featured-card--arg {
  background: rgba(200,71,42,0.03) !important;
}
.featured-card--arg:hover {
  border-color: rgba(200,71,42,0.35) !important;
  box-shadow: 0 20px 48px rgba(200,71,42,0.1), 0 0 0 1px rgba(200,71,42,0.15) !important;
}

/* ─── 5. STATION TABLE ROWS ──────────────────────────────────── */
.station-table tr {
  transition: background var(--transition-fast) !important;
  border-radius: 8px;
}
.station-table tr:hover .st-name {
  color: var(--accent);
}
.station-table tr:hover .st-play-btn {
  background: var(--text) !important;
  color: #fff !important;
  border-color: var(--text) !important;
  transform: scale(1.1);
}
.st-play-btn {
  transition: all var(--transition-fast) var(--ease-spring) !important;
}

/* ─── 6. GENRE STRIP PILLS ───────────────────────────────────── */
.genre-btn {
  transition: all var(--transition-fast) var(--ease-spring) !important;
  font-weight: 500;
}
.genre-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.genre-btn.active {
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}
.genre-btn:active { transform: scale(0.97); }

/* ─── 7. SIDEBAR CARDS ───────────────────────────────────────── */
.sidebar-card {
  transition: box-shadow var(--transition-base) var(--ease-out) !important;
}
.sidebar-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
body.dark-mode .sidebar-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

/* Now Playing art: smoother wave animation */
.np-wave span {
  animation: wave 1.4s ease-in-out infinite !important;
  min-height: 3px;
}
.np-wave span:nth-child(2) { animation-delay: .15s !important; }
.np-wave span:nth-child(3) { animation-delay: .28s !important; }
.np-wave span:nth-child(4) { animation-delay: .42s !important; }
.np-wave span:nth-child(5) { animation-delay: .55s !important; }
.np-wave span:nth-child(6) { animation-delay: .68s !important; }
.np-wave span:nth-child(7) { animation-delay: .8s !important; }
.np-wave span:nth-child(8) { animation-delay: .92s !important; }
@keyframes wave {
  0%, 100% { height: 3px; opacity: 0.4; }
  50%       { height: 18px; opacity: 1; }
}

/* Play button in sidebar: spring */
.np-play-btn {
  transition: transform var(--transition-fast) var(--ease-spring),
              opacity var(--transition-fast) !important;
}
.np-play-btn:hover { transform: scale(1.1) !important; }
.np-play-btn:active { transform: scale(0.93) !important; }

/* Trending items */
.trending-item {
  border-radius: 8px;
  padding: 9px 8px !important;
  margin: 0 -8px;
  transition: background var(--transition-fast), padding-left var(--transition-fast) var(--ease-out) !important;
}
.trending-item:hover {
  background: var(--surface2);
  padding-left: 14px !important;
}
.tr-rank {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text3);
  width: 18px;
  flex-shrink: 0;
  text-align: center;
}
.tr-listeners {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text3);
  white-space: nowrap;
  padding: 2px 6px;
  background: var(--surface2);
  border-radius: 8px;
}

/* ─── 8. SEARCH MODAL ────────────────────────────────────────── */
.search-modal-backdrop {
  transition: opacity var(--transition-base) !important;
}
.search-modal-backdrop.open {
  animation: modal-fade-in var(--transition-base) var(--ease-out);
}
@keyframes modal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.search-box {
  animation: search-slide-in var(--transition-slow) var(--ease-out);
  box-shadow: 0 32px 80px rgba(0,0,0,0.2) !important;
}
@keyframes search-slide-in {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.search-result-item {
  transition: background var(--transition-fast),
              padding-left var(--transition-fast) var(--ease-out) !important;
}
.search-result-item:hover { padding-left: 24px !important; }
.search-filter-btn {
  transition: all var(--transition-fast) var(--ease-spring) !important;
}
.search-filter-btn:hover { transform: translateY(-1px); }
.search-filter-btn.active { transform: none; }

/* ─── 9. REC CARDS ───────────────────────────────────────────── */
.rec-card {
  transition: transform var(--transition-base) var(--ease-out),
              box-shadow var(--transition-base) var(--ease-out),
              border-color var(--transition-base) !important;
}
.rec-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.09) !important;
  border-color: rgba(200,71,42,0.18) !important;
}
.rec-card:active { transform: scale(0.98) !important; }

/* ─── 10. SIGN-IN MODAL ──────────────────────────────────────── */
.modal-box {
  animation: modal-slide-in var(--transition-slow) var(--ease-out) !important;
  box-shadow: 0 40px 100px rgba(0,0,0,0.18) !important;
}
@keyframes modal-slide-in {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-btn {
  transition: transform var(--transition-fast) var(--ease-spring),
              opacity var(--transition-fast) !important;
}
.modal-btn:hover {
  opacity: 0.88 !important;
  transform: translateY(-1px);
}
.modal-btn:active { transform: scale(0.97); }
.modal-input {
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast) !important;
}
.modal-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(200,71,42,0.1);
}
.oauth-btn {
  transition: transform var(--transition-fast) var(--ease-spring),
              box-shadow var(--transition-fast) !important;
}
.oauth-btn:hover { transform: translateY(-2px) !important; }
.oauth-btn:active { transform: scale(0.96) !important; }

/* ─── 11. TICKER: SMOOTHER GRADIENT FADE-EDGES ───────────────── */
.ticker-track {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
}

/* ─── 12. GLOBE SECTION ──────────────────────────────────────── */
.globe-section {
  transition: opacity var(--transition-slow);
}
.globe-overlay-left {
  background: linear-gradient(to right,
    rgba(3,7,18,0.97) 55%,
    rgba(3,7,18,0.7) 80%,
    transparent 100%) !important;
}
.globe-stat-num {
  transition: color var(--transition-fast);
}
.globe-stat:hover .globe-stat-num { color: var(--accent2); }

/* ─── 13. SECTION HEADERS ────────────────────────────────────── */
.section-more {
  transition: color var(--transition-fast), transform var(--transition-fast) !important;
  display: inline-block;
}
.section-more:hover {
  color: var(--accent) !important;
  transform: translateX(3px);
}



/* ─── 15. MOBILE NAV ─────────────────────────────────────────── */
.mobile-nav a {
  transition: background var(--transition-fast),
              color var(--transition-fast),
              transform var(--transition-fast) var(--ease-out),
              padding-left var(--transition-fast) var(--ease-out) !important;
}
.mobile-nav a:active { transform: scale(0.98) !important; }

/* ─── 16. THEME TOGGLE ───────────────────────────────────────── */
.theme-toggle-track {
  transition: background var(--transition-base), border-color var(--transition-base) !important;
}
.theme-toggle-thumb {
  transition: transform 0.32s var(--ease-spring),
              background var(--transition-base) !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.2) !important;
}
.theme-toggle:hover .theme-toggle-track {
  border-color: var(--accent);
}

/* ─── 17. SIGN IN BUTTON ─────────────────────────────────────── */
.sign-in-btn {
  transition: transform var(--transition-fast) var(--ease-spring),
              opacity var(--transition-fast),
              box-shadow var(--transition-fast) !important;
}
.sign-in-btn:hover {
  opacity: 0.88 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.sign-in-btn:active { transform: scale(0.96) !important; }

/* ─── 18. LIVE DOT: SMOOTHER PULSE ──────────────────────────── */
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 2px rgba(22,163,74,0.2); }
  50%       { box-shadow: 0 0 0 6px rgba(22,163,74,0.08); }
}

/* ─── 19. PAGE TRANSITIONS ───────────────────────────────────── */
.page.active {
  animation: page-enter 0.28s var(--ease-out) both;
}
@keyframes page-enter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── 20. ARG CARD ───────────────────────────────────────────── */
.arg-card {
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}
.arg-card:hover {
  box-shadow: 0 0 24px rgba(200,71,42,0.12), inset 0 0 24px rgba(200,71,42,0.04);
  border-color: rgba(200,71,42,0.3);
}

/* ─── 21. LIVE MUSIC PAGE ────────────────────────────────────── */
.lm-ch-btn {
  transition: all var(--transition-fast) var(--ease-spring) !important;
}
.lm-ch-btn:hover { transform: translateY(-1px); }
.lm-ch-btn:active { transform: scale(0.96); }
.lm-ctrl-btn {
  transition: all var(--transition-fast) var(--ease-spring) !important;
}
.lm-ctrl-btn:hover { transform: scale(1.12) !important; }
.lm-ctrl-btn:active { transform: scale(0.9) !important; }
.lm-grid .lm-channel-card {
  transition: transform var(--transition-base) var(--ease-out),
              box-shadow var(--transition-base), border-color var(--transition-base);
}
.lm-grid .lm-channel-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
}

/* ─── 22. ADMIN PANEL: IMPROVED ──────────────────────────────── */
.adm-submit-btn {
  transition: all var(--transition-fast) var(--ease-spring) !important;
}
.adm-submit-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(200,71,42,0.2) !important;
}
.adm-submit-btn:active { transform: scale(0.97) !important; }
.adm-action-btn {
  transition: all var(--transition-fast) var(--ease-spring) !important;
}
.adm-action-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(200,71,42,0.15) !important;
}
.adm-danger-btn {
  transition: all var(--transition-fast) !important;
}
.adm-input:focus {
  box-shadow: 0 0 0 3px rgba(200,71,42,0.12) !important;
}

/* ─── 23. TOAST NOTIFICATIONS ───────────────────────────────── */
/* Used by improvements.js for save/copy confirmations */
.wncore-toast {
  position: fixed;
  bottom: calc(var(--player-h) + 18px);
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--text);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.5px;
  padding: 10px 18px;
  border-radius: 22px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.2);
  opacity: 0;
  pointer-events: none;
  z-index: 9998;
  white-space: nowrap;
  transition: opacity 0.22s var(--ease-out), transform 0.22s var(--ease-out);
}
.wncore-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.wncore-toast.success { background: #16a34a; color: #fff; }
.wncore-toast.error   { background: var(--accent); color: #fff; }
.wncore-toast.warn    { background: #b45309; color: #fff; }

/* ─── 24. LOADING SKELETON SHIMMER ──────────────────────────── */
.skeleton-row td {
  background: linear-gradient(
    90deg,
    var(--surface2) 25%,
    var(--surface) 50%,
    var(--surface2) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  border-radius: 4px;
  height: 48px;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── 25. FOCUS VISIBLE: KEYBOARD ACCESSIBILITY ─────────────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}

/* ─── 26. SCROLLBAR: REFINED ─────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text3);
}

/* ─── 27. SELECTION COLOUR ───────────────────────────────────── */
::selection {
  background: rgba(200,71,42,0.2);
  color: var(--text);
}

/* ─── 28. GENRE CARDS (GENRES PAGE) ─────────────────────────── */
#genre-cards-grid > * {
  transition: transform var(--transition-base) var(--ease-out),
              box-shadow var(--transition-base), opacity var(--transition-base);
}
#genre-cards-grid > *:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 32px rgba(0,0,0,0.1);
}

/* ─── 29. PODCAST GRID ───────────────────────────────────────── */
#podcast-grid > * {
  transition: transform var(--transition-base) var(--ease-out),
              box-shadow var(--transition-base), border-color var(--transition-base);
}
#podcast-grid > *:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.08);
  border-color: rgba(200,71,42,0.15);
}

/* ─── 30. HEADER SCROLL — no height shrink (causes clipping) ─── */
/* compact class intentionally removed — height transition clips
   the mobile menu at scroll position 0 before .compact fires    */

/* ─── 31. BOTTOM MOBILE NAV ACTIVE INDICATOR ─────────────────── */
/* Matches any mobile bottom nav that improvements.js might render */
.bottom-nav-item.active svg {
  color: var(--accent);
}
.bottom-nav-item {
  transition: color var(--transition-fast), transform var(--transition-fast) var(--ease-spring);
}
.bottom-nav-item:active { transform: scale(0.88); }

/* ─── 32. ABOUT PAGE STAT BOXES ──────────────────────────────── */
#page-about [style*="background:var(--surface)"][style*="border-radius:12px"] {
  transition: transform var(--transition-base) var(--ease-out),
              box-shadow var(--transition-base);
}
#page-about [style*="background:var(--surface)"][style*="border-radius:12px"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* ─── 33. SIGNAL CONNECTION BOX ──────────────────────────────── */
.signal-conn-box {
  transition: background var(--transition-base),
              border-color var(--transition-base),
              box-shadow var(--transition-base);
}
.signal-conn-box:hover {
  border-color: rgba(200,71,42,0.25);
  box-shadow: 0 0 16px rgba(200,71,42,0.06);
}

/* ─── 34. FAVOURITE BUTTON ───────────────────────────────────── */
.np-ctrl-btn:first-child,
.pb-btn:first-child {
  transition: color var(--transition-fast) var(--ease-spring),
              transform var(--transition-fast) var(--ease-spring) !important;
}
.np-ctrl-btn:first-child:hover,
.pb-btn:first-child:hover {
  color: var(--accent) !important;
  transform: scale(1.2) !important;
}
.np-ctrl-btn.saved,
.pb-btn.saved {
  color: var(--accent) !important;
}

/* ─── 35. REDUCED MOTION: RESPECT PREFERS ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .ticker-inner {
    animation: none !important;
  }
}

/* ─── DESKTOP HEADER: tighter, more refined ─────────────────────── */
@media (min-width: 769px) {
  /* Logo: slightly bolder presence */
  .logo-mark {
    font-size: 1.25rem !important;
    letter-spacing: -0.3px !important;
  }
  .logo-freq {
    font-size: 0.55rem !important;
    padding: 2px 5px !important;
  }

  /* Nav: tighter gap, slightly smaller text */
  #main-nav {
    gap: 1px !important;
  }
  #main-nav a {
    font-size: 0.76rem !important;
    padding: 6px 8px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: var(--text2) !important;
    text-decoration: none !important;
    transition: color 0.15s, background 0.15s !important;
    white-space: nowrap;
  }
  #main-nav a:hover {
    color: var(--text) !important;
    background: var(--surface2) !important;
  }
  #main-nav a.active {
    color: var(--text) !important;
    background: var(--surface2) !important;
    font-weight: 500 !important;
  }
  #main-nav a svg {
    width: 13px !important;
    height: 13px !important;
    opacity: 0.6;
    flex-shrink: 0;
  }
  #main-nav a:hover svg,
  #main-nav a.active svg {
    opacity: 1;
  }

  /* Header-right: tighter */
  .header-right {
    gap: 6px !important;
  }

  /* Live dot: cleaner pill */
  .live-dot {
    font-size: 0.62rem !important;
    letter-spacing: 0.3px !important;
    padding: 3px 8px !important;
    border-radius: 20px !important;
  }

  /* MIN button: more refined */
  .minimal-btn {
    font-size: 0.6rem !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    letter-spacing: 1px !important;
  }

  /* Theme toggle: cleaner labels */
  .theme-toggle-labels {
    font-size: 0.55rem !important;
    gap: 0 !important;
    flex-direction: column !important;
    line-height: 1.2 !important;
  }

  /* Sign in: cleaner */
  .sign-in-btn {
    font-size: 0.75rem !important;
    padding: 6px 14px !important;
    border-radius: 8px !important;
  }

  /* Dark mode: ensure logo and nav text are crisp */
  body.dark-mode #main-nav a {
    color: var(--text3) !important;
  }
  body.dark-mode #main-nav a:hover,
  body.dark-mode #main-nav a.active {
    color: var(--text) !important;
    background: var(--surface2) !important;
  }
  body.dark-mode .logo-mark {
    color: var(--text) !important;
  }
}

/* ─── DARK MODE: explicit header + player bar backgrounds ───────────
   Overrides any rule that tries to make these light in dark mode.
   Uses body.dark-mode for high specificity — wins over style.css,
   mobile.css, and any injected <style> tags.                       */
body.dark-mode header {
  background: rgba(14, 12, 10, 0.97) !important;
  border-bottom-color: rgba(255,255,255,0.07) !important;
  color: var(--text) !important;
}
body.dark-mode header.scrolled {
  background: rgba(14, 13, 11, 0.99) !important;
}
body.dark-mode .logo-mark { color: #f0ede8 !important; }
body.dark-mode .logo-freq { color: var(--accent) !important; }
body.dark-mode .live-dot  { color: var(--green) !important; }
body.dark-mode .minimal-btn { color: var(--text2) !important; }
body.dark-mode .search-btn  { color: var(--text2) !important; }
body.dark-mode .sign-in-btn { color: var(--text) !important; border-color: var(--border) !important; }
body.dark-mode .mobile-menu-btn { color: var(--text) !important; }

/* Light mode: explicit as well */
body:not(.dark-mode) header {
  background: rgba(245, 243, 239, 0.97) !important;
  border-bottom-color: rgba(0,0,0,0.08) !important;
}
body:not(.dark-mode) header.scrolled {
  background: rgba(245, 243, 239, 0.99) !important;
}


/* ══ BUG FIX OVERRIDES (highest specificity — modify carefully) ══════════ */
/* ═══════════════════════════════════════════════════════════════════════
   WNCORE — BUG FIX PATCH
   File: wncore-bugfix.css
   Fixes visual bugs found in audit. Load after wncore-mobile-fix.css
   ═══════════════════════════════════════════════════════════════════════ */

/* ── BUG 1: Chat button hidden behind mobile bottom nav ─────────────
   #wnc-chat-btn uses hardcoded bottom:100px which doesn't account for
   the 56px mobile-bottom-nav sitting above the player bar.
   On mobile it needs: player-h + 56px (bottom nav) + gap           */

/* ── BUG 2: Background-play banner hidden behind mobile bottom nav ──
   #bgplay-banner uses hardcoded bottom:80px                        */

/* ── BUG 3: Swipe hint toast hidden behind bottom nav ───────────────
   The inline swipe hint in playStation uses bottom:90px            */

/* ── BUG 4: wncore-toast clips behind player on mobile ─────────────
   horror_upgrade.css sets bottom: calc(var(--player-h, 76px) + 16px)
   which doesn't account for the 56px mobile bottom nav             */

/* ── BUG 5: toast-container (improvements.js system) also clips ─────
   .toast-container bottom: calc(var(--player-h,80px) + 32px)
   on mobile needs bottom nav offset                                */

/* ── BUG: Globe container inline style overrides our display:none ───────
   main.js sets globeContainer.style.cssText on mobile, which beats CSS.
   We hide it by making it zero-size and invisible instead, which works
   even against inline styles via visibility and pointer-events.          */

/* ── BUG: Chat panel peeks above bottom nav when hidden on mobile ───────
   The panel uses transform:translateY(100%) to hide, but its bottom
   anchor (player-h + 56px) means 100% of panel height doesn't fully
   clear the bottom nav. Use translateY(110%) + visibility:hidden.       */

/* ── BUG 7: Scroll-top btn inside .skel block ───────────────────────
   In style.css, .scroll-top-btn is nested INSIDE the .skel ruleset
   which means it only applies when inside a skeleton. The standalone
   mobile override at mobile.css:353 has the correct position.
   No action needed — confirmed mobile.css rule is correct.        */

/* ── BUG 8: page-wrap paddingBottom overridden by JS ───────────────
   fixMobileHome() sets pageWrap.style.paddingBottom = '20px' via JS
   which overrides our CSS. We cannot !important inline styles but
   we can ensure our body padding-bottom handles scroll clearance.
   The page-wrap paddingBottom of 20px from JS is fine since body
   itself has the correct padding-bottom. No further action needed. */

/* ── BUG 9: Mini-player z-index conflicts on mobile ────────────────
   The draggable mini-widget can overlap the bottom nav.            */

/* ── BUG 10: Station modal on mobile needs bottom clearance ─────── */

/* ── BUG 11: Similar stations panel clips on mobile ─────────────── */

/* ── BUG 12: EQ panel clips on mobile ───────────────────────────── */

/* ── BUG 13: Ambient panel clips on mobile ──────────────────────── */

/* ── BUG 14: Theme panel clips on mobile ───────────────────────── */

/* ── BUG 15: Scrobble panel clips on mobile ─────────────────────── */

/* ═══════════════════════════════════════════════════════ */
/* P5 TRANSITIONS — merged from p5-transitions.css         */
/* ═══════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
   WNCORE — PERSONA 5 TRANSITION SYSTEM  v2
   File: p5-transitions.css
   Load after: horror_upgrade.css
   ═══════════════════════════════════════════════════════════════════════ */

/* ── WIPE OVERLAY ──────────────────────────────────────────────────────── */
#p5-wipe {
  position: fixed;
  inset: 0;
  z-index: 9800;
  pointer-events: none;
  overflow: hidden;
  /* Hidden at rest — only visible during active wipe */
  visibility: hidden;
}

#p5-wipe.in,
#p5-wipe.out {
  visibility: visible;
}

#p5-wipe-a,
#p5-wipe-b {
  position: absolute;
  top: -10%;
  width: 70%;
  height: 120%;
  clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%);
  transform: translateX(-115%);
  will-change: transform, opacity;
  transition: none;
}

#p5-wipe-a {
  left: -5%;
  background: #c8472a;
  opacity: 0.92;
}

#p5-wipe-b {
  left: 26%;
  background: #0e0d0b;
  opacity: 0.72;
}

/* IN: sweep from left — smooth deceleration into position */
#p5-wipe.in #p5-wipe-a {
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(0%);
}

#p5-wipe.in #p5-wipe-b {
  transition: transform 360ms cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 30ms;
  transform: translateX(0%);
}

/* OUT: sweep right — gentle ease-in so it doesn't snap */
#p5-wipe.out #p5-wipe-a {
  transition: transform 280ms cubic-bezier(0.4, 0, 0.6, 1);
  transform: translateX(115%);
}

#p5-wipe.out #p5-wipe-b {
  transition: transform 260ms cubic-bezier(0.4, 0, 0.6, 1);
  transition-delay: 18ms;
  transform: translateX(115%);
}

/* ── PAGE ENTER ANIMATION ──────────────────────────────────────────────── */
.page.p5-enter {
  animation: p5PageEnter 300ms cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

@keyframes p5PageEnter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ── GENRE PILL — click stamp ripple ──────────────────────────────────── */
.genre-btn {
  position: relative;
  overflow: hidden;
}

.genre-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #c8472a;
  opacity: 0;
  border-radius: inherit;
  transform: scale(0.5);
  pointer-events: none;
}

.genre-btn.p5-stamp::after {
  animation: p5Stamp 380ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes p5Stamp {
  0%   { opacity: 0.25; transform: scale(0.5);  }
  55%  { opacity: 0.08; transform: scale(1.04); }
  100% { opacity: 0;    transform: scale(1.04); }
}

.genre-btn.active {
  background: var(--text, #1a1814);
  color: #fff;
  border-color: var(--text, #1a1814);
  box-shadow: 2px 2px 0 #c8472a;
  transform: translate(-1px, -1px);
  transition: all 0.12s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── HEADER NAV — red slash on active link ─────────────────────────────── */
header nav a {
  position: relative;
}

header nav a.active::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 50%;
  transform: translateY(-50%) skewX(-18deg);
  width: 3px;
  height: 60%;
  background: #c8472a;
  border-radius: 1px;
  animation: p5NavSlash 160ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes p5NavSlash {
  from { height: 0; opacity: 0; }
  to   { height: 60%; opacity: 1; }
}

/* ── MOBILE ONLY — all bottom nav overrides inside media query ─────────── */
@media (max-width: 768px) {
  .mobile-bottom-nav {
    border-top: 1px solid rgba(200, 71, 42, 0.3) !important;
    box-shadow: 0 -1px 0 rgba(200, 71, 42, 0.08),
                0 -8px 20px rgba(0, 0, 0, 0.2);
  }

  .mbn-btn.active {
    color: var(--text);
  }

  .mbn-btn.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) skewX(-10deg);
    width: 24px;
    height: 2px;
    background: #c8472a;
    border-radius: 0 0 2px 2px;
    animation: p5TabSlash 160ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  @keyframes p5TabSlash {
    from { width: 0; opacity: 0; }
    to   { width: 24px; opacity: 1; }
  }

  .mbn-btn {
    position: relative;
  }

  .mbn-btn::after {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 8px;
    background: rgba(200, 71, 42, 0.15);
    opacity: 0;
    transform: scale(0.4);
    pointer-events: none;
  }

  .mbn-btn.p5-tap::after {
    animation: p5BtnTap 260ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  @keyframes p5BtnTap {
    0%   { opacity: 1; transform: scale(0.4); }
    100% { opacity: 0; transform: scale(1.3); }
  }

  .genre-strip-wrap {
    position: sticky;
    top: var(--header-h);
    z-index: 200;
    background: var(--bg);
  }

  body.dark-mode .genre-strip-wrap {
    background: var(--bg);
  }
}

/* ── SAFE-AREA (notched phones) ────────────────────────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 768px) {
    .mobile-bottom-nav {
      padding-bottom: env(safe-area-inset-bottom);
      height: calc(56px + env(safe-area-inset-bottom));
    }
  }
}

/* ═══════════════════════════════════════════════════════ */
/* BUG FIXES — merged from wncore-bugfix.css               */
/* ═══════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
   WNCORE — BUG FIX PATCH
   File: wncore-bugfix.css
   Fixes visual bugs found in audit. Load after wncore-mobile-fix.css
   ═══════════════════════════════════════════════════════════════════════ */

/* ── BUG 1: Chat button hidden behind mobile bottom nav ─────────────
   #wnc-chat-btn uses hardcoded bottom:100px which doesn't account for
   the 56px mobile-bottom-nav sitting above the player bar.
   On mobile it needs: player-h + 56px (bottom nav) + gap           */
@media (max-width: 768px) {
  #wnc-chat-btn {
    bottom: calc(var(--player-h, 76px) + 56px + 12px) !important;
    right: 14px !important;
  }

  #wnc-chat-panel {
    bottom: calc(var(--player-h, 76px) + 56px + 66px) !important;
    right: 14px !important;
    /* Constrain height so it doesn't go above header */
    max-height: calc(100dvh - var(--header-h, 56px) - var(--player-h, 76px) - 56px - 80px) !important;
  }
}

/* ── BUG 2: Background-play banner hidden behind mobile bottom nav ──
   #bgplay-banner uses hardcoded bottom:80px                        */
@media (max-width: 768px) {
  #bgplay-banner {
    bottom: calc(var(--player-h, 76px) + 56px + 10px) !important;
  }
}

/* ── BUG 3: Swipe hint toast hidden behind bottom nav ───────────────
   The inline swipe hint in playStation uses bottom:90px            */
@media (max-width: 768px) {
  /* The swipe hint is appended to body with inline style — override
     via attribute selector on the style content isn't possible,
     so we target it by its unique text positioning characteristics.
     It has no class/id, so we patch it in JS (wncore-bugfix.js).  */
}

/* ── BUG 4: wncore-toast clips behind player on mobile ─────────────
   horror_upgrade.css sets bottom: calc(var(--player-h, 76px) + 16px)
   which doesn't account for the 56px mobile bottom nav             */
@media (max-width: 768px) {
  .wncore-toast {
    bottom: calc(var(--player-h, 76px) + 56px + 12px) !important;
  }
}

/* ── BUG 5: toast-container (improvements.js system) also clips ─────
   .toast-container bottom: calc(var(--player-h,80px) + 32px)
   on mobile needs bottom nav offset                                */
@media (max-width: 768px) {
  .toast-container {
    bottom: calc(var(--player-h, 76px) + 56px + 16px) !important;
    left: 12px !important;
  }
}

/* ── BUG: Globe container inline style overrides our display:none ───────
   main.js sets globeContainer.style.cssText on mobile, which beats CSS.
   We hide it by making it zero-size and invisible instead, which works
   even against inline styles via visibility and pointer-events.          */
@media (max-width: 768px) {
  #globe-container {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    z-index: -1 !important;
  }
}

/* ── BUG: Chat panel peeks above bottom nav when hidden on mobile ───────
   The panel uses transform:translateY(100%) to hide, but its bottom
   anchor (player-h + 56px) means 100% of panel height doesn't fully
   clear the bottom nav. Use translateY(110%) + visibility:hidden.       */
@media (max-width: 768px) {
  #wnc-chat-panel:not(.open) {
    transform: translateY(110%) !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  #wnc-chat-panel.open {
    transform: translateY(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* ── BUG 7: Scroll-top btn inside .skel block ───────────────────────
   In style.css, .scroll-top-btn is nested INSIDE the .skel ruleset
   which means it only applies when inside a skeleton. The standalone
   mobile override at mobile.css:353 has the correct position.
   No action needed — confirmed mobile.css rule is correct.        */

/* ── BUG 8: page-wrap paddingBottom overridden by JS ───────────────
   fixMobileHome() sets pageWrap.style.paddingBottom = '20px' via JS
   which overrides our CSS. We cannot !important inline styles but
   we can ensure our body padding-bottom handles scroll clearance.
   The page-wrap paddingBottom of 20px from JS is fine since body
   itself has the correct padding-bottom. No further action needed. */

/* ── BUG 9: Mini-widget removed — replaced by wncore-player.js ── */

/* ── BUG 10: Station modal on mobile needs bottom clearance ─────── */
@media (max-width: 768px) {
  .station-modal-panel,
  #station-modal {
    max-height: calc(100dvh - var(--header-h, 56px) - var(--player-h, 76px) - 56px) !important;
    bottom: calc(var(--player-h, 76px) + 56px) !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── BUG 11: Similar stations panel clips on mobile ─────────────── */
@media (max-width: 768px) {
  #similar-panel {
    bottom: calc(var(--player-h, 76px) + 56px) !important;
    max-height: calc(60dvh) !important;
  }
}

/* ── BUG 12: EQ panel clips on mobile ───────────────────────────── */
@media (max-width: 768px) {
  #eq-panel {
    bottom: calc(var(--player-h, 76px) + 56px) !important;
  }
}

/* ── BUG 13: Ambient panel clips on mobile ──────────────────────── */
@media (max-width: 768px) {
  #ambient-panel {
    bottom: calc(var(--player-h, 76px) + 56px) !important;
  }
}

/* ── BUG 14: Theme panel clips on mobile ───────────────────────── */
@media (max-width: 768px) {
  #theme-panel {
    bottom: calc(var(--player-h, 76px) + 56px) !important;
  }
}

/* ── BUG 15: Scrobble panel clips on mobile ─────────────────────── */
@media (max-width: 768px) {
  #scrobble-panel {
    bottom: calc(var(--player-h, 76px) + 56px) !important;
  }
}

/* ═══════════════════════════════════════════════════════ */
/* UI IMPROVEMENTS — merged from wncore-ui-improvements.css*/
/* ═══════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   WNCORE RADIO — UI/UX IMPROVEMENTS PATCH
   Drop this into index.html AFTER all other stylesheets:
   <link rel="stylesheet" href="wncore-ui-improvements.css">
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. SMOOTHER TRANSITIONS THROUGHOUT ────────────────────── */
:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: 120ms;
  --transition-base: 200ms;
  --transition-slow: 380ms;
}

/* ─── 2. ENHANCED HEADER ────────────────────────────────────── */
header {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: box-shadow var(--transition-base) var(--ease-out),
              background var(--transition-base);
}
header.scrolled {
  box-shadow: 0 1px 0 var(--border), 0 4px 20px rgba(0,0,0,0.06);
}
body.dark-mode header.scrolled {
  box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 4px 24px rgba(0,0,0,0.35);
}

/* Nav links: smooth underline indicator */
nav a {
  position: relative;
  transition: color var(--transition-fast), background var(--transition-fast);
}
nav a.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}
nav a svg {
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
nav a:hover svg {
  opacity: 1;
  transform: scale(1.1);
}

/* ─── 3. PLAYER BAR — HEAVILY IMPROVED ──────────────────────── */
.player-bar {
  backdrop-filter: blur(32px) !important;
  -webkit-backdrop-filter: blur(32px) !important;
  transition: transform var(--transition-slow) var(--ease-out);
}
/* Dark mode: always dark */
body.dark-mode .player-bar {
  background: rgba(14, 12, 10, 0.98) !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}
/* Light mode: always light */
body:not(.dark-mode) .player-bar {
  background: rgba(248, 246, 242, 0.97) !important;
  border-top: 1px solid rgba(0,0,0,0.09) !important;
}
body:not(.dark-mode) .pb-name { color: var(--text) !important; }
body:not(.dark-mode) .pb-meta { color: var(--text2) !important; }
body:not(.dark-mode) .pb-btn  { color: var(--text2) !important; }
body:not(.dark-mode) .pb-btn:hover { color: var(--text) !important; }
body:not(.dark-mode) .pb-play {
  background: var(--text) !important;
  color: var(--bg) !important;
}
body:not(.dark-mode) .pb-bar {
  background: rgba(0,0,0,0.1) !important;
}
body:not(.dark-mode) .pb-bar-fill {
  background: var(--text) !important;
}
body:not(.dark-mode) .pb-time {
  color: var(--text3) !important;
}
body:not(.dark-mode) .pb-vol-icon svg {
  color: var(--text2) !important;
  stroke: var(--text2) !important;
}

/* Player art: pulsing ring when playing */
.pb-art {
  position: relative;
  border-radius: 10px !important;
  overflow: visible !important;
  transition: transform var(--transition-base) var(--ease-spring);
}
.pb-art.playing::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 12px;
  border: 1.5px solid var(--accent);
  opacity: 0.5;
  animation: pb-ring-pulse 2.4s ease-in-out infinite;
}
@keyframes pb-ring-pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%       { opacity: 0.15; transform: scale(1.06); }
}

/* Play button: springy scale */
.pb-play {
  transition: transform var(--transition-fast) var(--ease-spring),
              background var(--transition-fast),
              box-shadow var(--transition-fast) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
.pb-play:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
}
.pb-play:active { transform: scale(0.95) !important; }

/* Progress bar: thicker + interactive hover */
.pb-bar {
  height: 4px !important;
  border-radius: 4px !important;
  position: relative;
  transition: height var(--transition-fast);
}
.pb-bar:hover { height: 6px !important; }
.pb-bar-fill {
  height: 100% !important;
  border-radius: 4px !important;
  transition: width 0.3s linear;
}

/* Volume slider: custom track */
.pb-vol-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  border-radius: 3px;
  background: rgba(255,255,255,0.15);
  outline: none;
  cursor: pointer;
  transition: height var(--transition-fast);
}
body:not(.dark-mode) .pb-vol-slider {
  background: rgba(0,0,0,0.12);
}
.pb-vol-slider:hover { height: 5px; }
.pb-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  transition: transform var(--transition-fast) var(--ease-spring);
}
body:not(.dark-mode) .pb-vol-slider::-webkit-slider-thumb {
  background: var(--text);
}
.pb-vol-slider::-webkit-slider-thumb:hover {
  transform: scale(1.3);
}

/* pb-btn hover: subtle background */
.pb-btn {
  border-radius: 8px !important;
  padding: 7px !important;
  transition: color var(--transition-fast), background var(--transition-fast),
              transform var(--transition-fast) var(--ease-spring) !important;
}
.pb-btn:hover {
  background: rgba(255,255,255,0.08) !important;
  transform: scale(1.08) !important;
}
body:not(.dark-mode) .pb-btn:hover {
  background: rgba(0,0,0,0.06) !important;
}
.pb-btn:active { transform: scale(0.92) !important; }

/* ─── 4. FEATURED CARDS — PREMIUM FEEL ──────────────────────── */
.featured-card {
  transition: transform var(--transition-base) var(--ease-out),
              box-shadow var(--transition-base) var(--ease-out),
              border-color var(--transition-base) !important;
  border-radius: 16px !important;
  overflow: hidden;
}
.featured-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 20px 48px rgba(0,0,0,0.12) !important;
  border-color: rgba(200,71,42,0.2) !important;
}
body.dark-mode .featured-card:hover {
  box-shadow: 0 20px 48px rgba(0,0,0,0.5) !important;
  border-color: rgba(200,71,42,0.25) !important;
}
.featured-card:active { transform: translateY(-2px) scale(0.99) !important; }

/* ARG card variant: subtle red glow */
.featured-card--arg {
  background: rgba(200,71,42,0.03) !important;
}
.featured-card--arg:hover {
  border-color: rgba(200,71,42,0.35) !important;
  box-shadow: 0 20px 48px rgba(200,71,42,0.1), 0 0 0 1px rgba(200,71,42,0.15) !important;
}

/* ─── 5. STATION TABLE ROWS ──────────────────────────────────── */
.station-table tr {
  transition: background var(--transition-fast) !important;
  border-radius: 8px;
}
.station-table tr:hover .st-name {
  color: var(--accent);
}
.station-table tr:hover .st-play-btn {
  background: var(--text) !important;
  color: #fff !important;
  border-color: var(--text) !important;
  transform: scale(1.1);
}
.st-play-btn {
  transition: all var(--transition-fast) var(--ease-spring) !important;
}

/* ─── 6. GENRE STRIP PILLS ───────────────────────────────────── */
.genre-btn {
  transition: all var(--transition-fast) var(--ease-spring) !important;
  font-weight: 500;
}
.genre-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.genre-btn.active {
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}
.genre-btn:active { transform: scale(0.97); }

/* ─── 7. SIDEBAR CARDS ───────────────────────────────────────── */
.sidebar-card {
  transition: box-shadow var(--transition-base) var(--ease-out) !important;
}
.sidebar-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
body.dark-mode .sidebar-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

/* Now Playing art: smoother wave animation */
.np-wave span {
  animation: wave 1.4s ease-in-out infinite !important;
  min-height: 3px;
}
.np-wave span:nth-child(2) { animation-delay: .15s !important; }
.np-wave span:nth-child(3) { animation-delay: .28s !important; }
.np-wave span:nth-child(4) { animation-delay: .42s !important; }
.np-wave span:nth-child(5) { animation-delay: .55s !important; }
.np-wave span:nth-child(6) { animation-delay: .68s !important; }
.np-wave span:nth-child(7) { animation-delay: .8s !important; }
.np-wave span:nth-child(8) { animation-delay: .92s !important; }
@keyframes wave {
  0%, 100% { height: 3px; opacity: 0.4; }
  50%       { height: 18px; opacity: 1; }
}

/* Play button in sidebar: spring */
.np-play-btn {
  transition: transform var(--transition-fast) var(--ease-spring),
              opacity var(--transition-fast) !important;
}
.np-play-btn:hover { transform: scale(1.1) !important; }
.np-play-btn:active { transform: scale(0.93) !important; }

/* Trending items */
.trending-item {
  border-radius: 8px;
  padding: 9px 8px !important;
  margin: 0 -8px;
  transition: background var(--transition-fast), padding-left var(--transition-fast) var(--ease-out) !important;
}
.trending-item:hover {
  background: var(--surface2);
  padding-left: 14px !important;
}
.tr-rank {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text3);
  width: 18px;
  flex-shrink: 0;
  text-align: center;
}
.tr-listeners {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text3);
  white-space: nowrap;
  padding: 2px 6px;
  background: var(--surface2);
  border-radius: 8px;
}

/* ─── 8. SEARCH MODAL ────────────────────────────────────────── */
.search-modal-backdrop {
  transition: opacity var(--transition-base) !important;
}
.search-modal-backdrop.open {
  animation: modal-fade-in var(--transition-base) var(--ease-out);
}
@keyframes modal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.search-box {
  animation: search-slide-in var(--transition-slow) var(--ease-out);
  box-shadow: 0 32px 80px rgba(0,0,0,0.2) !important;
}
@keyframes search-slide-in {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.search-result-item {
  transition: background var(--transition-fast),
              padding-left var(--transition-fast) var(--ease-out) !important;
}
.search-result-item:hover { padding-left: 24px !important; }
.search-filter-btn {
  transition: all var(--transition-fast) var(--ease-spring) !important;
}
.search-filter-btn:hover { transform: translateY(-1px); }
.search-filter-btn.active { transform: none; }

/* ─── 9. REC CARDS ───────────────────────────────────────────── */
.rec-card {
  transition: transform var(--transition-base) var(--ease-out),
              box-shadow var(--transition-base) var(--ease-out),
              border-color var(--transition-base) !important;
}
.rec-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.09) !important;
  border-color: rgba(200,71,42,0.18) !important;
}
.rec-card:active { transform: scale(0.98) !important; }

/* ─── 10. SIGN-IN MODAL ──────────────────────────────────────── */
.modal-box {
  animation: modal-slide-in var(--transition-slow) var(--ease-out) !important;
  box-shadow: 0 40px 100px rgba(0,0,0,0.18) !important;
}
@keyframes modal-slide-in {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-btn {
  transition: transform var(--transition-fast) var(--ease-spring),
              opacity var(--transition-fast) !important;
}
.modal-btn:hover {
  opacity: 0.88 !important;
  transform: translateY(-1px);
}
.modal-btn:active { transform: scale(0.97); }
.modal-input {
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast) !important;
}
.modal-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(200,71,42,0.1);
}
.oauth-btn {
  transition: transform var(--transition-fast) var(--ease-spring),
              box-shadow var(--transition-fast) !important;
}
.oauth-btn:hover { transform: translateY(-2px) !important; }
.oauth-btn:active { transform: scale(0.96) !important; }

/* ─── 11. TICKER: SMOOTHER GRADIENT FADE-EDGES ───────────────── */
.ticker-track {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
}

/* ─── 12. GLOBE SECTION ──────────────────────────────────────── */
.globe-section {
  transition: opacity var(--transition-slow);
}
.globe-overlay-left {
  background: linear-gradient(to right,
    rgba(3,7,18,0.97) 55%,
    rgba(3,7,18,0.7) 80%,
    transparent 100%) !important;
}
.globe-stat-num {
  transition: color var(--transition-fast);
}
.globe-stat:hover .globe-stat-num { color: var(--accent2); }

/* ─── 13. SECTION HEADERS ────────────────────────────────────── */
.section-more {
  transition: color var(--transition-fast), transform var(--transition-fast) !important;
  display: inline-block;
}
.section-more:hover {
  color: var(--accent) !important;
  transform: translateX(3px);
}



/* ─── 15. MOBILE NAV ─────────────────────────────────────────── */
.mobile-nav a {
  transition: background var(--transition-fast),
              color var(--transition-fast),
              transform var(--transition-fast) var(--ease-out),
              padding-left var(--transition-fast) var(--ease-out) !important;
}
.mobile-nav a:active { transform: scale(0.98) !important; }

/* ─── 16. THEME TOGGLE ───────────────────────────────────────── */
.theme-toggle-track {
  transition: background var(--transition-base), border-color var(--transition-base) !important;
}
.theme-toggle-thumb {
  transition: transform 0.32s var(--ease-spring),
              background var(--transition-base) !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.2) !important;
}
.theme-toggle:hover .theme-toggle-track {
  border-color: var(--accent);
}

/* ─── 17. SIGN IN BUTTON ─────────────────────────────────────── */
.sign-in-btn {
  transition: transform var(--transition-fast) var(--ease-spring),
              opacity var(--transition-fast),
              box-shadow var(--transition-fast) !important;
}
.sign-in-btn:hover {
  opacity: 0.88 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.sign-in-btn:active { transform: scale(0.96) !important; }

/* ─── 18. LIVE DOT: SMOOTHER PULSE ──────────────────────────── */
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 2px rgba(22,163,74,0.2); }
  50%       { box-shadow: 0 0 0 6px rgba(22,163,74,0.08); }
}

/* ─── 19. PAGE TRANSITIONS ───────────────────────────────────── */
.page.active {
  animation: page-enter 0.28s var(--ease-out) both;
}
@keyframes page-enter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── 20. ARG CARD ───────────────────────────────────────────── */
.arg-card {
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}
.arg-card:hover {
  box-shadow: 0 0 24px rgba(200,71,42,0.12), inset 0 0 24px rgba(200,71,42,0.04);
  border-color: rgba(200,71,42,0.3);
}

/* ─── 21. LIVE MUSIC PAGE ────────────────────────────────────── */
.lm-ch-btn {
  transition: all var(--transition-fast) var(--ease-spring) !important;
}
.lm-ch-btn:hover { transform: translateY(-1px); }
.lm-ch-btn:active { transform: scale(0.96); }
.lm-ctrl-btn {
  transition: all var(--transition-fast) var(--ease-spring) !important;
}
.lm-ctrl-btn:hover { transform: scale(1.12) !important; }
.lm-ctrl-btn:active { transform: scale(0.9) !important; }
.lm-grid .lm-channel-card {
  transition: transform var(--transition-base) var(--ease-out),
              box-shadow var(--transition-base), border-color var(--transition-base);
}
.lm-grid .lm-channel-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
}

/* ─── 22. ADMIN PANEL: IMPROVED ──────────────────────────────── */
.adm-submit-btn {
  transition: all var(--transition-fast) var(--ease-spring) !important;
}
.adm-submit-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(200,71,42,0.2) !important;
}
.adm-submit-btn:active { transform: scale(0.97) !important; }
.adm-action-btn {
  transition: all var(--transition-fast) var(--ease-spring) !important;
}
.adm-action-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(200,71,42,0.15) !important;
}
.adm-danger-btn {
  transition: all var(--transition-fast) !important;
}
.adm-input:focus {
  box-shadow: 0 0 0 3px rgba(200,71,42,0.12) !important;
}

/* ─── 23. TOAST NOTIFICATIONS ───────────────────────────────── */
/* Used by improvements.js for save/copy confirmations */
.wncore-toast {
  position: fixed;
  bottom: calc(var(--player-h) + 18px);
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--text);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.5px;
  padding: 10px 18px;
  border-radius: 22px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.2);
  opacity: 0;
  pointer-events: none;
  z-index: 9998;
  white-space: nowrap;
  transition: opacity 0.22s var(--ease-out), transform 0.22s var(--ease-out);
}
.wncore-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.wncore-toast.success { background: #16a34a; color: #fff; }
.wncore-toast.error   { background: var(--accent); color: #fff; }
.wncore-toast.warn    { background: #b45309; color: #fff; }

/* ─── 24. LOADING SKELETON SHIMMER ──────────────────────────── */
.skeleton-row td {
  background: linear-gradient(
    90deg,
    var(--surface2) 25%,
    var(--surface) 50%,
    var(--surface2) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  border-radius: 4px;
  height: 48px;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── 25. FOCUS VISIBLE: KEYBOARD ACCESSIBILITY ─────────────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}

/* ─── 26. SCROLLBAR: REFINED ─────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text3);
}

/* ─── 27. SELECTION COLOUR ───────────────────────────────────── */
::selection {
  background: rgba(200,71,42,0.2);
  color: var(--text);
}

/* ─── 28. GENRE CARDS (GENRES PAGE) ─────────────────────────── */
#genre-cards-grid > * {
  transition: transform var(--transition-base) var(--ease-out),
              box-shadow var(--transition-base), opacity var(--transition-base);
}
#genre-cards-grid > *:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 32px rgba(0,0,0,0.1);
}

/* ─── 29. PODCAST GRID ───────────────────────────────────────── */
#podcast-grid > * {
  transition: transform var(--transition-base) var(--ease-out),
              box-shadow var(--transition-base), border-color var(--transition-base);
}
#podcast-grid > *:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.08);
  border-color: rgba(200,71,42,0.15);
}

/* ─── 30. HEADER SCROLL — no height shrink (causes clipping) ─── */
/* compact class intentionally removed — height transition clips
   the mobile menu at scroll position 0 before .compact fires    */

/* ─── 31. BOTTOM MOBILE NAV ACTIVE INDICATOR ─────────────────── */
/* Matches any mobile bottom nav that improvements.js might render */
.bottom-nav-item.active svg {
  color: var(--accent);
}
.bottom-nav-item {
  transition: color var(--transition-fast), transform var(--transition-fast) var(--ease-spring);
}
.bottom-nav-item:active { transform: scale(0.88); }

/* ─── 32. ABOUT PAGE STAT BOXES ──────────────────────────────── */
#page-about [style*="background:var(--surface)"][style*="border-radius:12px"] {
  transition: transform var(--transition-base) var(--ease-out),
              box-shadow var(--transition-base);
}
#page-about [style*="background:var(--surface)"][style*="border-radius:12px"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* ─── 33. SIGNAL CONNECTION BOX ──────────────────────────────── */
.signal-conn-box {
  transition: background var(--transition-base),
              border-color var(--transition-base),
              box-shadow var(--transition-base);
}
.signal-conn-box:hover {
  border-color: rgba(200,71,42,0.25);
  box-shadow: 0 0 16px rgba(200,71,42,0.06);
}

/* ─── 34. FAVOURITE BUTTON ───────────────────────────────────── */
.np-ctrl-btn:first-child,
.pb-btn:first-child {
  transition: color var(--transition-fast) var(--ease-spring),
              transform var(--transition-fast) var(--ease-spring) !important;
}
.np-ctrl-btn:first-child:hover,
.pb-btn:first-child:hover {
  color: var(--accent) !important;
  transform: scale(1.2) !important;
}
.np-ctrl-btn.saved,
.pb-btn.saved {
  color: var(--accent) !important;
}

/* ─── 35. REDUCED MOTION: RESPECT PREFERS ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .ticker-inner {
    animation: none !important;
  }
}

/* ─── DESKTOP HEADER: tighter, more refined ─────────────────────── */
@media (min-width: 769px) {
  /* Logo: slightly bolder presence */
  .logo-mark {
    font-size: 1.25rem !important;
    letter-spacing: -0.3px !important;
  }
  .logo-freq {
    font-size: 0.55rem !important;
    padding: 2px 5px !important;
  }

  /* Nav: tighter gap, slightly smaller text */
  #main-nav {
    gap: 1px !important;
  }
  #main-nav a {
    font-size: 0.76rem !important;
    padding: 6px 8px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: var(--text2) !important;
    text-decoration: none !important;
    transition: color 0.15s, background 0.15s !important;
    white-space: nowrap;
  }
  #main-nav a:hover {
    color: var(--text) !important;
    background: var(--surface2) !important;
  }
  #main-nav a.active {
    color: var(--text) !important;
    background: var(--surface2) !important;
    font-weight: 500 !important;
  }
  #main-nav a svg {
    width: 13px !important;
    height: 13px !important;
    opacity: 0.6;
    flex-shrink: 0;
  }
  #main-nav a:hover svg,
  #main-nav a.active svg {
    opacity: 1;
  }

  /* Header-right: tighter */
  .header-right {
    gap: 6px !important;
  }

  /* Live dot: cleaner pill */
  .live-dot {
    font-size: 0.62rem !important;
    letter-spacing: 0.3px !important;
    padding: 3px 8px !important;
    border-radius: 20px !important;
  }

  /* MIN button: more refined */
  .minimal-btn {
    font-size: 0.6rem !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    letter-spacing: 1px !important;
  }

  /* Theme toggle: cleaner labels */
  .theme-toggle-labels {
    font-size: 0.55rem !important;
    gap: 0 !important;
    flex-direction: column !important;
    line-height: 1.2 !important;
  }

  /* Sign in: cleaner */
  .sign-in-btn {
    font-size: 0.75rem !important;
    padding: 6px 14px !important;
    border-radius: 8px !important;
  }

  /* Dark mode: ensure logo and nav text are crisp */
  body.dark-mode #main-nav a {
    color: var(--text3) !important;
  }
  body.dark-mode #main-nav a:hover,
  body.dark-mode #main-nav a.active {
    color: var(--text) !important;
    background: var(--surface2) !important;
  }
  body.dark-mode .logo-mark {
    color: var(--text) !important;
  }
}

/* ─── DARK MODE: explicit header + player bar backgrounds ───────────
   Overrides any rule that tries to make these light in dark mode.
   Uses body.dark-mode for high specificity — wins over style.css,
   mobile.css, and any injected <style> tags.                       */
body.dark-mode header {
  background: rgba(14, 12, 10, 0.97) !important;
  border-bottom-color: rgba(255,255,255,0.07) !important;
  color: var(--text) !important;
}
body.dark-mode header.scrolled {
  background: rgba(14, 13, 11, 0.99) !important;
}
body.dark-mode .logo-mark { color: #f0ede8 !important; }
body.dark-mode .logo-freq { color: var(--accent) !important; }
body.dark-mode .live-dot  { color: var(--green) !important; }
body.dark-mode .minimal-btn { color: var(--text2) !important; }
body.dark-mode .search-btn  { color: var(--text2) !important; }
body.dark-mode .sign-in-btn { color: var(--text) !important; border-color: var(--border) !important; }
body.dark-mode .mobile-menu-btn { color: var(--text) !important; }

/* Light mode: explicit as well */
body:not(.dark-mode) header {
  background: rgba(245, 243, 239, 0.97) !important;
  border-bottom-color: rgba(0,0,0,0.08) !important;
}
body:not(.dark-mode) header.scrolled {
  background: rgba(245, 243, 239, 0.99) !important;
}

/* ═══════════════════════════════════════════════════════ */
/* HORROR UPGRADES — merged from horror_upgrade.css        */
/* ═══════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════
   WNCORE RADIO — Horror Terminal Upgrade
   Professional, cinematic, broadcast-facility aesthetic
═══════════════════════════════════════════════════════ */

/* ─── UPGRADED HORROR OVERLAY ─────────────────────────── */
#horror-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: #000;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#horror-overlay.show {
  display: flex;
  animation: horror-fade-in 0.6s ease forwards;
}
@keyframes horror-fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* CRT Screen effect behind terminal */
#horror-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(180, 10, 30, 0.06) 0%, transparent 70%),
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 2px,
      rgba(0, 0, 0, 0.15) 2px,
      rgba(0, 0, 0, 0.15) 4px
    );
  pointer-events: none;
  z-index: 0;
  animation: crt-roll 12s linear infinite;
}
@keyframes crt-roll {
  0% { background-position: 0 0; }
  100% { background-position: 0 100px; }
}

/* ─── THE TERMINAL BOX ────────────────────────────────── */
.horror-terminal {
  position: relative;
  z-index: 2;
  font-family: 'DM Mono', 'Courier New', monospace;
  font-size: 0.82rem;
  line-height: 1.8;
  letter-spacing: 0.06em;
  text-align: left;
  width: min(720px, 94vw);
  padding: 0;
  background: #020304;
  border: 1px solid rgba(30, 100, 60, 0.25);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.9),
    0 0 80px rgba(20, 80, 40, 0.08),
    0 40px 100px rgba(0,0,0,0.95);
  border-radius: 3px;
  overflow: hidden;
}

/* Facility header bar — strict, minimal */
.horror-terminal-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: #030405;
  border-bottom: 1px solid rgba(30, 100, 60, 0.2);
}
.horror-chrome-dots {
  display: flex;
  gap: 0;
  align-items: center;
}
/* Replace colorful dots with classified badge */
.horror-chrome-dot {
  display: none;
}
.horror-chrome-dots::before {
  content: '▮ RESTRICTED';
  font-family: var(--font-mono);
  font-size: 0.48rem;
  letter-spacing: 3px;
  color: rgba(200, 50, 40, 0.55);
  border: 1px solid rgba(200, 50, 40, 0.2);
  padding: 2px 7px;
  border-radius: 2px;
}
.horror-chrome-title {
  font-size: 0.52rem;
  letter-spacing: 2.5px;
  color: rgba(140, 200, 160, 0.2);
  font-family: var(--font-mono);
  text-transform: uppercase;
}
.horror-chrome-badge {
  font-size: 0.46rem;
  letter-spacing: 2px;
  padding: 2px 6px;
  border: 1px solid rgba(200, 50, 40, 0.35);
  border-radius: 2px;
  color: rgba(200, 50, 40, 0.65);
  font-family: var(--font-mono);
  animation: badge-blink 2s step-end infinite;
}
@keyframes badge-blink {
  0%, 80%, 100% { opacity: 1; }
  82%, 86%, 90% { opacity: 0.2; }
}

/* Terminal body */
.horror-terminal-body {
  padding: 20px 24px 24px;
  background: #020304;
  min-height: 300px;
  position: relative;
  overflow-y: auto;
  max-height: 70vh;
}

/* Phosphor green glow — authentic CRT monitor feel */
.horror-terminal-body::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 40% at 50% 20%, rgba(20, 80, 40, 0.04) 0%, transparent 70%);
  pointer-events: none;
}

/* Scanline overlay */
.horror-terminal-body::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0, 0, 0, 0.06) 3px,
    rgba(0, 0, 0, 0.06) 4px
  );
  pointer-events: none;
  animation: scanline-drift 20s linear infinite;
}
@keyframes scanline-drift {
  0% { transform: translateY(0); }
  100% { transform: translateY(40px); }
}

/* Individual terminal lines */
.horror-terminal-body div {
  position: relative;
  z-index: 2;
  font-size: 0.78rem;
  color: rgba(120, 160, 130, 0.55);
  letter-spacing: 0.05em;
  padding: 0;
  line-height: 1.75;
}

/* Status bar at bottom of terminal */
.horror-status-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid rgba(30, 80, 50, 0.15);
  font-size: 0.52rem;
  color: rgba(80, 130, 90, 0.3);
  letter-spacing: 2.5px;
}
.horror-status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(200, 50, 40, 0.6);
  flex-shrink: 0;
  animation: status-pulse 2s ease-in-out infinite;
}
@keyframes status-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; box-shadow: 0 0 6px rgba(200, 50, 40, 0.5); }
}

/* ─── TERMINAL LINE COLORS — cold, military phosphor palette ── */
.ht-dim   { color: rgba(80, 120, 90, 0.35) !important; }
.ht-norm  { color: rgba(120, 160, 130, 0.55) !important; }
.ht-white { color: rgba(160, 200, 170, 0.85) !important; letter-spacing: 0.08em; }
.ht-warn  { color: rgba(200, 160, 60, 0.75) !important; }
.ht-red   { color: rgba(210, 60, 50, 0.9) !important; font-weight: 500; }
.ht-alert {
  color: rgba(220, 70, 50, 1) !important;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.ht-ok    { color: rgba(60, 180, 90, 0.8) !important; }
.ht-ps1   { color: rgba(60, 180, 90, 0.65) !important; font-weight: 500; }
.ht-cmd   { color: rgba(140, 180, 200, 0.7) !important; }
.ht-cursor {
  display: inline-block;
  width: 7px; height: 0.9em;
  background: rgba(120, 180, 140, 0.8);
  vertical-align: text-bottom;
  animation: term-cursor-blink 0.9s step-end infinite;
  margin-left: 2px;
}
@keyframes term-cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ─── UPGRADED DATA CORRUPT OVERLAY ──────────────────── */
#data-corrupt-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #01020a;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
}
#data-corrupt-overlay.show { display: flex; }
#data-corrupt-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(180, 0, 30, 0.025) 2px,
    rgba(180, 0, 30, 0.025) 4px
  );
  pointer-events: none;
  animation: corrupt-scan 6s linear infinite;
}
@keyframes corrupt-scan {
  0% { transform: translateY(0); }
  100% { transform: translateY(8px); }
}

.corrupt-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(180, 0, 30, 0.03) 2px,
    rgba(180, 0, 30, 0.03) 4px
  );
  pointer-events: none;
  z-index: 1;
}
.corrupt-flicker {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  pointer-events: none;
  z-index: 1;
  animation: corrupt-flicker-anim 8s step-end infinite;
}
@keyframes corrupt-flicker-anim {
  0%, 95%, 100% { opacity: 0; }
  96% { opacity: 0.4; }
  97% { opacity: 0; }
  98% { opacity: 0.6; }
  99% { opacity: 0; }
}

.corrupt-header {
  position: relative;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.46rem;
  color: rgba(180, 50, 40, 0.45);
  letter-spacing: 5px;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.corrupt-terminal-box {
  position: relative;
  z-index: 2;
  background: #01020a;
  border: 1px solid rgba(30, 90, 50, 0.2);
  border-radius: 2px;
  width: min(680px, 94vw);
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.9),
    0 0 60px rgba(20, 70, 40, 0.06),
    0 40px 100px rgba(0,0,0,0.95);
}

.corrupt-title-bar {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 7px 14px;
  border-bottom: 1px solid rgba(30, 90, 50, 0.18);
  background: #020308;
  justify-content: space-between;
}
/* Hide colorful dots — replace with classified marker */
.corrupt-dot {
  display: none;
}
.corrupt-title-bar::before {
  content: '⬛ WNCORE//SIGINT';
  font-family: var(--font-mono);
  font-size: 0.46rem;
  letter-spacing: 3px;
  color: rgba(180, 50, 40, 0.5);
  border: 1px solid rgba(180, 50, 40, 0.2);
  padding: 2px 7px;
  border-radius: 2px;
}

.corrupt-terminal-text {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.85;
  padding: 18px 22px;
  min-height: 220px;
  max-height: 65vh;
  overflow-y: auto;
  color: rgba(100, 150, 115, 0.6);
  letter-spacing: 0.05em;
  background: transparent;
}
.corrupt-terminal-text::-webkit-scrollbar { width: 3px; }
.corrupt-terminal-text::-webkit-scrollbar-track { background: transparent; }
.corrupt-terminal-text::-webkit-scrollbar-thumb { background: rgba(30, 90, 50, 0.2); }

/* ─── UPGRADED EMAIL HORROR TERMINAL ──────────────────── */
#email-horror-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9997;
  background: #000;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#email-horror-overlay.show { display: flex; animation: horror-fade-in 0.4s ease forwards; }
.email-horror-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0, 180, 60, 0.02) 2px,
    rgba(0, 180, 60, 0.02) 4px
  );
  pointer-events: none;
}
.email-terminal {
  position: relative;
  z-index: 2;
  width: min(640px, 92vw);
  background: #040604;
  border: 1px solid rgba(20, 80, 20, 0.3);
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(0, 180, 60, 0.04), 0 30px 80px rgba(0, 0, 0, 0.9);
}
.email-terminal-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: #020806;
  border-bottom: 1px solid rgba(20, 80, 20, 0.18);
}
.email-terminal-bar-dot { display: none; }
.email-terminal-text {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: rgba(0, 180, 60, 0.75);
  padding: 22px 24px;
  min-height: 260px;
  max-height: 340px;
  overflow-y: auto;
  line-height: 1.9;
  letter-spacing: 0.04em;
  text-shadow: none;
}
.et-dim   { color: rgba(0, 120, 40, 0.4) !important; }
.et-err   { color: rgba(200, 80, 40, 0.85) !important; }
.et-white { color: rgba(0, 200, 80, 0.7) !important; }
.et-cursor { animation: term-cursor-blink 0.9s step-end infinite; }

/* ─── SHARE MODAL ──────────────────────────────────────── */
.share-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 8000;
  background: rgba(0, 0, 0, 0.7);
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
}
.share-modal-backdrop.open { display: flex; animation: modal-fade-in 0.2s ease; }
@keyframes modal-fade-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }

.share-modal-box {
  position: relative;
  background: var(--surface, #f5f3ef);
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: 16px;
  padding: 28px 28px 24px;
  width: min(380px, 90vw);
  box-shadow: 0 24px 60px rgba(0,0,0,0.18);
}
.share-modal-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text, #1a1714);
}
.share-modal-station {
  font-size: 0.8rem;
  color: var(--text3, rgba(26,23,20,0.4));
  margin-bottom: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.share-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 4px;
}
.share-option-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  background: var(--surface2, rgba(0,0,0,0.04));
  border: 1px solid var(--border, rgba(0,0,0,0.06));
  border-radius: 10px;
  color: var(--text, #1a1714);
  font-family: var(--font-body);
  font-size: 0.82rem;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
}
.share-option-btn:hover { background: var(--surface, #ede9e3); border-color: var(--border, rgba(0,0,0,0.1)); transform: translateX(2px); }
.share-option-x { color: var(--text, #1a1714) !important; }
.share-option-reddit { color: #ff4500 !important; }
.share-modal-close {
  position: absolute;
  top: 14px; right: 14px;
  background: none;
  border: none;
  font-size: 1.4rem;
  color: var(--text3, rgba(26,23,20,0.3));
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  transition: color 0.15s;
}
.share-modal-close:hover { color: var(--text, #1a1714); }

/* ─── TOAST NOTIFICATION ──────────────────────────────── */
.wncore-toast {
  position: fixed;
  bottom: calc(var(--player-h, 76px) + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--text, #1a1714);
  color: var(--bg, #f5f3ef);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.5px;
  padding: 9px 20px;
  border-radius: 100px;
  z-index: 7999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  white-space: nowrap;
  max-width: 90vw;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 4px 24px rgba(0,0,0,0.15);
}
.wncore-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ─── SEARCH RESULT IMPROVEMENTS ─────────────────────── */
.search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.12s;
  margin-bottom: 2px;
}
.search-result-item:hover {
  background: var(--surface2, rgba(0,0,0,0.04));
}
.search-result-item:hover .sr-play-btn {
  opacity: 1;
}
.sr-body { flex: 1; min-width: 0; }
.sr-play-btn {
  background: var(--accent, #c8472a);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 0.65rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 2px;
}

/* ─── KEYBOARD HELP MODAL ─────────────────────────────── */
.kb-help-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 8500;
  background: rgba(0,0,0,0.5);
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.kb-help-modal.open { display: flex; }
.kb-help-box {
  background: var(--surface, #f5f3ef);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
  width: min(360px, 90vw);
  box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}
.kb-help-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 18px;
  color: var(--text);
}
.kb-shortcuts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.kb-row { display: flex; align-items: center; gap: 14px; font-size: 0.8rem; color: var(--text2); }
.kb-key {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 72px;
  text-align: center;
}
.kb-help-close {
  width: 100%;
  padding: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 1px;
  color: var(--text2);
  transition: all 0.15s;
}
.kb-help-close:hover { background: var(--surface); color: var(--text); }

/* ─── PLAYER BAR SHARE BUTTON ─────────────────────────── */
.pb-share-btn {
  color: var(--text2) !important;
}
.pb-share-btn:hover {
  color: var(--accent) !important;
}

/* ─── MOBILE HOME PAGE FIXES ──────────────────────────── */
@media (max-width: 768px) {
  .globe-section {
    position: relative;
    overflow: hidden;
    min-height: 260px !important;
    max-height: 340px;
  }
  
  .globe-overlay-left {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 16px !important;
    background: linear-gradient(to top, rgba(3,7,18,0.92) 40%, rgba(3,7,18,0.5) 70%, transparent) !important;
    width: 100% !important;
  }
  
  .globe-title {
    font-size: 1.6rem !important;
    line-height: 1.15 !important;
    margin-bottom: 6px !important;
  }
  
  .globe-sub {
    font-size: 0.7rem !important;
    max-width: 100% !important;
    margin-bottom: 12px !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .globe-stats {
    gap: 16px !important;
    flex-wrap: wrap;
    margin-bottom: 0 !important;
  }
  
  .globe-stat-num { font-size: 1.15rem !important; }
  .globe-stat-lbl { font-size: 0.58rem !important; }
  
  .globe-kicker {
    display: none;
  }

  /* Featured cards fix on mobile */
  .featured-card {
    padding: 16px !important;
  }
  .fc-now {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  
  /* Single column layout on mobile */
  .page-wrap {
    grid-template-columns: 1fr !important;
    padding: 16px 12px !important;
  }

  /* Main col padding */
  .main-col {
    padding: 0 !important;
  }

  /* Sidebar order on mobile */
  .sidebar--left {
    order: 2 !important;
    position:static !important;
  }
  .sidebar--right {
    order: 3 !important;
    position:static !important;
  }
  .main-col {
    order: 1 !important;
  }
  
  /* Rec grid 2 columns on mobile */
  .rec-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  /* Section hd font size */
  .section-title {
    font-size: 1.1rem !important;
  }

  /* Hide genre strip scrollbar on mobile */
  .genre-strip-wrap {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .genre-strip-wrap::-webkit-scrollbar { display: none; }
  
  /* Horror terminal on mobile */
  .horror-terminal {
    font-size: 0.72rem !important;
  }
  .horror-terminal-body {
    padding: 16px 18px 20px !important;
  }
  
  /* Share button visible on mobile player */
  .pb-share-btn {
    display: flex !important;
  }
}

@media (max-width: 480px) {
  .globe-title { font-size: 1.3rem !important; }
  .globe-sub { display: none; }
  
  /* Rec grid single col on small phones */
  .rec-grid {
    grid-template-columns: 1fr !important;
  }

  /* Player bar name truncation */
  .pb-name {
    max-width: 110px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .horror-terminal-chrome {
    padding: 8px 12px;
  }
  .horror-chrome-title {
    display: none;
  }
}

/* ─── DARK MODE ADJUSTMENTS ────────────────────────────── */
.dark .share-option-btn:hover,
html.dark .share-option-btn:hover {
  background: rgba(255,255,255,0.05);
}


/* ── SORTABLE TABLE HEADERS ─────────────────────────────────────── */
.st-th-sort {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text3);
  padding: 10px 8px 8px;
  transition: color 0.15s;
}
.st-th-sort:hover { color: var(--accent); }
.sort-arrow { font-size: 0.6rem; margin-left: 2px; }
.station-table thead th { border-bottom: 1px solid var(--border); }

/* ─── STATION COVER IMAGES ─────────────────────────────────────────────── */
.st-cover-cell { width: 40px; padding: 0 4px 0 0; }
.st-cover {
  border-radius: 7px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.st-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.st-cover-init {
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  font-family: var(--font-mono);
  letter-spacing: -0.5px;
}

/* ─── FEATURED CARD COVER ─────────────────────────────────────────────── */
.fc-cover-wrap {
  margin-bottom: 10px;
}
.fc-cover-img {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.fc-cover-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ─── SEARCH RESULT COVER ─────────────────────────────────────────────── */
.sr-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.sr-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* ─── HOVER POPOVER COVER ─────────────────────────────────────────────── */
.shp-cover {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.shp-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ═══════════════════════════════════════════════════════
   TASK 1.4 — DARK MODE BUTTON CONTRAST FIXES
   Buttons that retained white/light bg in dark mode now
   use orange background + white text as specified.
═══════════════════════════════════════════════════════ */
body.dark-mode .genre-btn:not(.active) {
  background: var(--surface2) !important;
  color: var(--text2) !important;
  border-color: var(--border) !important;
}
body.dark-mode .np-play-btn {
  background: var(--accent) !important;
  color: #fff !important;
}
body.dark-mode .pb-play {
  background: var(--accent) !important;
  color: #fff !important;
}
body.dark-mode .minimal-btn.on {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}
body.dark-mode .station-sort-btn.active,
body.dark-mode .charts-view-btn.active,
body.dark-mode .filter-btn.active {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}
/* Dark mode: any generic button with a bare white bg inside a card */
body.dark-mode .sidebar-card button:not(.np-play-btn):not(.np-ctrl-btn) {
  background: var(--surface2) !important;
  color: var(--text2) !important;
}

/* ─── GENRE CARDS — ENHANCED (image bg + unique fonts) ──────────────── */
.genre-card-enhanced {
  position: relative;
  cursor: pointer;
  min-height: 120px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.genre-card-enhanced:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.genre-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.28;
  transition: opacity 0.3s;
  border-radius: inherit;
}
.genre-card-enhanced:hover .genre-card-bg {
  opacity: 0.42;
}
.genre-card-overlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.genre-card-inner {
  position: relative;
  z-index: 2;
  height: 100%;
}
.genre-card-icon-wrap {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  border: 1px solid rgba(255,255,255,0.1);
}
.genre-card-title {
  color: #fff;
  font-weight: 700;
  margin-bottom: 4px;
  line-height: 1.2;
  text-shadow: 0 1px 8px rgba(0,0,0,0.8);
  letter-spacing: 0.02em;
}
.genre-card-desc {
  font-size: 0.63rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════
   ANIME PAGE — FULL LAYOUT + BILLBOARD SIDES
   ═══════════════════════════════════════════════════════════════ */

/* Root layout: three-column with side billboards.
   overflow:hidden is CRITICAL — prevents sticky side panels
   from bleeding into other .page divs when inactive. */
.anime-page-root {
  flex-direction: row;
  align-items: flex-start;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 40% at 10% 20%, rgba(233,30,140,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 90% 70%, rgba(0,180,216,0.05) 0%, transparent 60%);
}

/* Anime font application */
.anime-page-root .section-title,
.anime-page-root .anime-banner-title,
.anime-page-root h1,
.anime-page-root h2,
.anime-page-root h3 {
  font-family: var(--font-anime) !important;
  letter-spacing: 0.04em;
}
.anime-page-root .anime-banner-kicker,
.anime-page-root .anime-banner-sub,
.anime-page-root .section-more,
.anime-page-root .anime-card-meta,
.anime-page-root .anime-card-badge {
  font-family: var(--font-anime-sub) !important;
}
.anime-page-root .anime-card-title {
  font-family: var(--font-anime) !important;
  font-size: 0.8rem;
}
.anime-section-title {
  font-family: var(--font-anime) !important;
  font-size: 0.9rem !important;
  color: var(--anime-pink) !important;
  letter-spacing: 0.06em;
  text-transform: none;
}

/* Main content column */
.anime-main-col {
  flex: 1;
  min-width: 0;
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 24px;
}

/* Side panels — sticky within their contained parent */
.anime-side {
  width: 120px;
  flex-shrink: 0;
  padding: 32px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: space-evenly;
  align-self: stretch;
  min-height: 100%;
  position: relative;
}
.anime-side-left  { border-right: 1px solid rgba(233,30,140,0.12); }
.anime-side-right { border-left:  1px solid rgba(0,180,216,0.12); }

.anime-side-vline {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(233,30,140,0.3) 20%,
    rgba(0,180,216,0.3) 60%,
    transparent 100%);
  pointer-events: none;
}
.anime-side-left  .anime-side-vline { right: 0; }
.anime-side-right .anime-side-vline { left: 0; }

/* Billboard cards */
.anime-billboard {
  width: 96px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(13,13,31,0.9);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  animation: ab-float 6s ease-in-out infinite;
  flex-shrink: 0;
}
.anime-billboard:nth-child(2) { animation-delay: -2s; }
.anime-billboard:nth-child(3) { animation-delay: -4s; }
.anime-billboard:nth-child(4) { animation-delay: -1s; }
.anime-billboard:nth-child(5) { animation-delay: -3s; }
.anime-billboard:nth-child(6) { animation-delay: -5s; }

@keyframes ab-float {
  0%,100% { transform: translateY(0px); }
  50%      { transform: translateY(-6px); }
}

.anime-billboard img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  display: block;
  opacity: 0.7;
  filter: saturate(1.3) contrast(1.1);
}

.ab-neon-text {
  font-family: var(--font-anime);
  font-size: 1rem;
  text-align: center;
  padding: 6px 4px;
  color: var(--anime-pink);
  text-shadow:
    0 0 8px var(--anime-pink),
    0 0 20px rgba(233,30,140,0.5);
  letter-spacing: 0.1em;
  background: rgba(0,0,0,0.6);
}

.ab-label {
  font-family: var(--font-anime-sub);
  font-size: 0.48rem;
  text-align: center;
  padding: 5px 4px;
  color: var(--anime-blue);
  letter-spacing: 0.12em;
  background: rgba(0,0,0,0.7);
  text-shadow: 0 0 8px rgba(0,180,216,0.6);
}

.ab-kanji-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
  gap: 2px;
  background: linear-gradient(180deg, #0d0820 0%, #1a0a30 100%);
}
.ab-kanji-stack span {
  font-family: var(--font-anime);
  font-size: 1.3rem;
  line-height: 1;
  color: #fff;
  text-shadow:
    0 0 10px rgba(233,30,140,0.8),
    0 0 30px rgba(124,58,237,0.5);
  animation: kanji-flicker 4s steps(1) infinite;
}
.ab-kanji-stack span:nth-child(2) { animation-delay: 1s; }
.ab-kanji-stack span:nth-child(3) { animation-delay: 2s; }
.ab-kanji-stack span:nth-child(4) { animation-delay: 3s; }

@keyframes kanji-flicker {
  0%,90%,100% { opacity: 1; }
  92%          { opacity: 0.3; }
  94%          { opacity: 1; }
  96%          { opacity: 0.5; }
}

.anime-billboard:hover {
  border-color: rgba(233,30,140,0.5);
  box-shadow:
    0 0 16px rgba(233,30,140,0.25),
    0 4px 20px rgba(0,0,0,0.5);
}

/* Hide side panels on narrow viewports */
@media (max-width: 1100px) {
  .anime-side { display: none; }
  .anime-main-col { max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   GENRE DRILL-DOWN OVERLAY
   ═══════════════════════════════════════════════════════════════ */

#genre-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: flex-end;
}
#genre-overlay.open {
  display: flex;
}

#genre-overlay-bg {
  position: absolute;
  inset: 0;
  transition: background 0.4s ease;
}

#genre-overlay-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  border-radius: 20px 20px 0 0;
  background: rgba(10,10,14,0.82);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  animation: go-slide-up 0.35s cubic-bezier(0.22,1,0.36,1) both;
}

@keyframes go-slide-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

#genre-overlay-close {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
  border-radius: 20px;
  padding: 6px 14px 6px 10px;
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.15s;
}
#genre-overlay-close:hover {
  background: rgba(255,255,255,0.14);
  color: #fff;
}

#genre-overlay-hero {
  padding: 52px 28px 24px;
  text-align: center;
  flex-shrink: 0;
  position: relative;
}

#genre-overlay-name {
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 10px;
  transition: all 0.3s;
}

#genre-overlay-desc {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
  margin-bottom: 8px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

#genre-overlay-count {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#genre-overlay-stations {
  flex: 1;
  overflow-y: auto;
  padding: 0 16px 24px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}

/* Station cards inside overlay */
#genre-overlay-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.go-station-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.go-station-card:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.12);
}
.go-station-card.go-playing {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.25);
}

.go-station-img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.go-station-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.go-station-note {
  position: absolute;
  color: rgba(255,255,255,0.3);
}
.go-station-img img + .go-station-note { display: none; }

.go-station-info { flex: 1; min-width: 0; }
.go-station-name {
  font-size: 0.83rem;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.go-station-meta {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.35);
  margin-top: 2px;
}

.go-play-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
}
.go-play-btn:hover,
.go-station-card.go-playing .go-play-btn {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

/* Skeleton loaders */
.go-station-skeleton {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
}
.go-sk-img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(255,255,255,0.07);
  flex-shrink: 0;
  animation: go-shimmer 1.4s ease-in-out infinite;
}
.go-sk-lines { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.go-sk-lines div {
  height: 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.07);
  animation: go-shimmer 1.4s ease-in-out infinite;
}
.go-sk-lines div:last-child { width: 55%; animation-delay: 0.2s; }
@keyframes go-shimmer {
  0%,100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

#genre-overlay-more {
  display: block;
  margin: 16px auto 0;
  padding: 10px 28px;
  border-radius: 20px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.6);
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.15s;
}
#genre-overlay-more:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}

@media (min-width: 700px) {
  #genre-overlay { align-items: center; justify-content: center; }
  #genre-overlay-panel {
    max-width: 560px;
    max-height: 86vh;
    border-radius: 20px;
    animation: go-scale-in 0.3s cubic-bezier(0.22,1,0.36,1) both;
  }
  @keyframes go-scale-in {
    from { transform: scale(0.94) translateY(20px); opacity: 0; }
    to   { transform: scale(1)    translateY(0);    opacity: 1; }
  }
}

/* ── i18n Language Selector ──────────────────────────────────────────────── */
.lang-selector {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.mobile-lang-selector {
  position: relative;
  display: inline-flex;
  align-items: center;
}
/* Hide desktop lang selector on mobile — it lives in the mobile nav drawer instead */
@media (max-width: 768px) {
  .lang-selector { display: none !important; }
  .mobile-lang-selector { width: 100%; }
  .mobile-lang-selector .lang-selector-btn {
    width: 100%;
    justify-content: space-between;
  }
  .mobile-lang-dropdown {
    position: static;
    width: 100%;
    margin-top: 6px;
    box-shadow: none;
    border-radius: 12px;
    padding: 0;
    max-height: 280px;
  }
  .mobile-lang-dropdown .lang-option {
    width: 100%;
    border-radius: 0;
    padding: 12px 14px;
  }
}

.lang-selector-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 9px;
  color: var(--text2);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 1px;
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s;
  white-space: nowrap;
}
.lang-selector-btn:hover {
  border-color: var(--accent);
  color: var(--text1);
}
.lang-selector-btn svg {
  opacity: 0.7;
  flex-shrink: 0;
}

.lang-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--surface1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 5px;
  min-width: 160px;
  max-height: 320px;
  overflow-y: auto;
  z-index: 9999;
  box-shadow: 0 8px 28px rgba(0,0,0,0.28);
  /* scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.lang-dropdown.open { display: block; }

.lang-option {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 7px;
  padding: 7px 10px;
  cursor: pointer;
  color: var(--text2);
  text-align: left;
  transition: background 0.13s, color 0.13s;
}
.lang-option:hover {
  background: var(--surface2);
  color: var(--text1);
}
.lang-option.active {
  color: var(--accent);
  background: var(--surface2);
}
.lang-option-code {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 1px;
  min-width: 28px;
  opacity: 0.8;
}
.lang-option-name {
  font-family: var(--font-body);
  font-size: 0.82rem;
}