@font-face {
  font-family: "Memory of the Saturn";
  src: url("../assets/memory-of-the-saturn.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
   THEME & GLOBALS
   ========================================================= */
:root {
  --font-saturn: "Memory of the Saturn", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
  --menu-blue-1: #7b1f3d;
  --menu-blue-2: #5a1630;
  --menu-blue-h1: #2a62ff;
  --menu-blue-h2: #1742b9;
  --menu-border: #b9e4ff;
  --menu-text: #fff6f9;
  --menu-bg-fab: linear-gradient(180deg,#2a62ff 0%, #1742b9 100%);
  --menu-accent: #1a6a60;
  --vol-track: rgba(255,255,255,.42);
  --vol-track-fill: rgba(255,255,255,.42);
  --vol-thumb: #ffffff;
}

canvas { touch-action: none; }
html, body { margin: 0; height: 100%; background: black; overflow: hidden; color-scheme: dark; }
body, button, input, textarea { font-family: var(--font-saturn); }
canvas { display: block; }

/* =========================================================
   GLOW ORBS
   ========================================================= */
#glowLayer {
  position: fixed; inset: 0; pointer-events: none; z-index: 5;
  mix-blend-mode: screen;
}
.orb {
  position: absolute; width: 52vmax; height: 52vmax; border-radius: 50%;
  filter: blur(84px);
  background: radial-gradient(circle at 50% 50%, var(--orb-2) 0%, var(--orb-1) 40%, transparent 70%);
  transform: translate(-50%,-50%) scale(0.96);
  opacity: .55;
}
.orb.o2 { background: radial-gradient(circle at 50% 50%, var(--orb-3) 0%, var(--orb-2) 40%, transparent 70%); opacity: .50; }
.orb.o3 { background: radial-gradient(circle at 50% 50%, var(--orb-2) 0%, var(--orb-1) 40%, transparent 70%); opacity: .45; }

/* =========================================================
   SCANLINE OVERLAY (Megadrive mode)
   ========================================================= */
#scanlineOverlay {
  position: fixed; inset: 0; pointer-events: none; z-index: 10;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.20) 0px,
    rgba(0,0,0,0.20) 1px,
    transparent 1px,
    transparent 3px
  );
}
body.mode-megadrive #scanlineOverlay { opacity: 1; }
body.mode-megadrive canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
body.mode-dreamcast canvas { filter: brightness(1.03) saturate(1.1); }

/* =========================================================
   ARTICLE OVERLAY
   ========================================================= */
#articleOverlay {
  position: fixed; inset: 0; background: rgba(10,10,14,0.96); color: #f4f4f4;
  display: none; opacity: 0; transition: opacity 250ms ease;
  overflow: auto; backdrop-filter: blur(6px); z-index: 70;
}
#articleHeader {
  position: sticky; top: 0; background: rgba(10,10,14,0.9); backdrop-filter: blur(6px);
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
#articleHeader h2 { font-size: 18px; margin: 0; letter-spacing: 0.06em; }
#closeArticle {
  margin-left: auto; background: transparent; color: #fff;
  border: 1px solid #fff; padding: 6px 10px; border-radius: 10px; cursor: pointer;
}
#articleBody { max-width: 980px; margin: 16px auto 64px; padding: 0 16px 32px; line-height: 1.6; }
#articleBody h1 { font-family: var(--font-saturn); }
#articleBody img, #articleBody video, #articleBody iframe {
  max-width: 100%; display: block; margin: 16px auto; border-radius: 10px;
}
.npArt { display: block; max-width: 520px; width: 100%; margin: 16px auto; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }

/* =========================================================
   HOVER CARD
   ========================================================= */
#hoverCard { position: fixed; transform: translate(-50%, -50%); pointer-events: none; z-index: 60; display: none; }
#hoverCard .card {
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 14px; padding: 10px 12px; min-width: 200px; backdrop-filter: blur(2px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.45);
}
#hoverCard h4, #hoverCard p { color: #fff; margin: 0; }
#hoverCard h4 { margin-bottom: 6px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.95; }
#hoverCard p  { font-size: 14px; opacity: 1; }
#hoverCard h4, #hoverCard p {
  text-shadow:
    0 1px 0 #000, 0 -1px 0 #000, 1px 0 0 #000, -1px 0 0 #000,
    0 0 6px rgba(0,0,0,.6), 0 0 14px rgba(0,0,0,.6);
}

/* =========================================================
   IMAGE BUTTONS + FIREBALL
   ========================================================= */
.imgBtn {
  width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: transparent; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; user-select: none; touch-action: manipulation;
  transition: filter .14s ease, transform .14s ease;
  position: relative; image-rendering: pixelated; transform-style: preserve-3d;
}
.imgBtn:hover  { filter: saturate(1.06) contrast(1.02); transform: translateY(-1px) scale(1.02); }
.imgBtn:active { transform: translateY(0px) scale(.98); }
.imgBtn img { width: 100%; height: 100%; display: block; }
.imgBtn::after {
  content: ""; position: absolute; inset: -6px; border-radius: 999px;
  pointer-events: none; opacity: 0; box-shadow: 0 0 0 0 rgba(255,255,255,.55);
  transition: opacity .18s ease, box-shadow .18s ease, transform .18s ease;
}
.imgBtn:hover::after  { opacity: .55; box-shadow: 0 0 16px 2px rgba(255,255,255,.25); transform: scale(1.02); }
.imgBtn:active::after { opacity: .85; box-shadow: 0 0 22px 6px rgba(255,255,255,.35); transform: scale(1.06); }

.orbitFx {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  opacity: 0; transition: opacity .18s ease;
}
.imgBtn:hover .orbitFx, .arrowBtn:hover .orbitFx { opacity: 1; }
.fb8 {
  position: absolute; left: 50%; top: 50%;
  width: 10px; height: 10px; border-radius: 50%; image-rendering: pixelated;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle at 42% 38%, #ffe9d2 0%, #ffb27e 46%, #ff6e4e 67%, #7b1f3d 100%);
  box-shadow: 0 0 4px 1px rgba(255,120,80,.9), 0 0 10px 2px rgba(255,120,80,.45);
  opacity: 0; filter: blur(.2px);
}

/* =========================================================
   TOP BAR
   ========================================================= */
#topBar {
  position: fixed; top: 10px; left: 50%; transform: translateX(-50%);
  z-index: 95; display: flex; align-items: center; gap: 10px;
  pointer-events: auto;
}
#menuFab {
  cursor: pointer; user-select: none; touch-action: manipulation;
  padding: 8px 16px; border-radius: 999px;
  background: var(--menu-bg-fab);
  border: 2px solid var(--menu-border); color: var(--menu-text);
  box-shadow: 0 8px 20px rgba(0,120,255,.35);
  transition: filter .14s ease, box-shadow .14s ease;
  max-width: min(82vw, 520px);
}
#menuFab .fabWrap { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
#menuFab .fabTitle { font-size: 18px; letter-spacing: .08em; line-height: 1.05; }
#menuFab .fabSub   { font-size: 12px; opacity: .9; margin-top: 2px; line-height: 1; }
#menuFab:hover {
  box-shadow:
    0 12px 30px rgba(0,110,255,.30),
    0 0 36px rgba(140,200,255,.25),
    inset 0 0 0 2px var(--menu-border),
    inset 0 0 0 3px var(--menu-accent);
  filter: saturate(1.06);
}

.arrowBtn {
  pointer-events: auto; user-select: none; touch-action: manipulation;
  background: transparent; border: none; padding: 0;
  --wiggleY: 0px; --wiggleS: 1;
  transform: translateY(var(--wiggleY)) scale(var(--wiggleS));
  transition: opacity .15s ease;
}
.arrowBtn img { width: 38px; height: 38px; display: block; image-rendering: pixelated; }
.arHidden { opacity: 0; pointer-events: none; }
@media (max-width: 520px) {
  .arrowBtn img { width: 32px; height: 32px; }
  #menuFab .fabTitle { font-size: 16px; }
}

/* =========================================================
   MENU OVERLAY
   ========================================================= */
#menuOverlay {
  position: fixed; inset: 0; display: none; z-index: 94;
  align-items: flex-start; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(8,28,64,.65) 0%, rgba(0,0,0,.65) 60%, rgba(0,0,0,.85) 100%);
  backdrop-filter: blur(2px);
  padding: 90px 12px 28px;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
}
#menuOverlay.show { display: flex; animation: fadeIn .18s ease-out; }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

.menuWrap { width: min(1100px, 100%); margin: 0 auto; }
.menuGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, max-content));
  justify-content: center; justify-items: center;
  gap: clamp(16px, 2.6vw, 28px);
  padding: 2px; box-sizing: border-box; max-width: 100%;
}
.menuNode {
  position: relative; height: 44px; width: clamp(200px, 26vw, 310px);
  cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--menu-text); text-align: center; padding: 2px 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--menu-blue-1) 0%, var(--menu-blue-2) 100%);
  border: 1.5px solid var(--menu-border);
  box-shadow:
    inset 0 0 0 2px rgba(133,196,255,.18),
    0 10px 26px rgba(0,80,255,.22),
    0 0 28px rgba(115,182,255,.18);
  transition: transform .14s ease, background .14s ease, box-shadow .14s ease;
  will-change: transform; box-sizing: border-box;
}
.menuNode:hover {
  background: linear-gradient(180deg, var(--menu-blue-h1) 0%, var(--menu-blue-h2) 100%);
  box-shadow:
    inset 0 0 0 2px rgba(170,218,255,.26),
    0 12px 30px rgba(0,110,255,.28),
    0 0 36px rgba(140,200,255,.28),
    0 0 0 2px var(--menu-accent) inset;
}
.menuNodeTitle { font-size: 15px; line-height: 1; letter-spacing: .04em; white-space: nowrap; }

@media (max-width: 640px) {
  .menuGrid { grid-template-columns: 1fr; justify-content: center; justify-items: center; gap: 14px; }
  .menuNode { width: min(92vw, 360px); height: 46px; }
}

.menuClose {
  margin: 22px auto 10px; display: block;
  padding: 8px 14px; border-radius: 12px;
  border: 1px solid var(--menu-border); color: var(--menu-text);
  background: transparent; cursor: pointer;
}

/* =========================================================
   PALETTE CARD (color theme selector)
   ========================================================= */
.paletteRow { margin: 14px auto 6px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.paletteCard {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 999px;
  border: 1px solid var(--menu-border); color: var(--menu-text); cursor: pointer;
  background: linear-gradient(180deg, var(--menu-blue-1) 0%, var(--menu-blue-2) 100%);
  box-shadow: inset 0 0 0 2px rgba(133,196,255,.18);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  min-width: 260px;
}
.paletteCard:hover {
  filter: saturate(1.08);
  box-shadow: inset 0 0 0 2px rgba(170,218,255,.26), 0 0 0 2px var(--menu-accent) inset;
  transform: translateY(-1px);
}
.pDots { display: flex; gap: 10px; margin-right: 4px; }
.pDot  { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(255,255,255,.55); }
.pText { display: flex; flex-direction: column; line-height: 1.05; }
.pName { font-size: 16px; }
.pHint { font-size: 12px; opacity: .9; margin-top: 2px; }

/* =========================================================
   MODE CARD (3D style selector)
   ========================================================= */
.modeRow { margin: 6px auto 6px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.modeCard {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 999px;
  border: 1px solid var(--menu-border); color: var(--menu-text); cursor: pointer;
  background: linear-gradient(180deg, var(--menu-blue-1) 0%, var(--menu-blue-2) 100%);
  box-shadow: inset 0 0 0 2px rgba(133,196,255,.18);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  min-width: 260px;
}
.modeCard:hover {
  filter: saturate(1.08);
  box-shadow: inset 0 0 0 2px rgba(170,218,255,.26), 0 0 0 2px var(--menu-accent) inset;
  transform: translateY(-1px);
}
.mDots { display: flex; gap: 8px; margin-right: 4px; align-items: center; }
.mDot  { width: 22px; height: 22px; border: 1px solid rgba(255,255,255,.55); }
.mDot.pixel  { border-radius: 2px; }
.mDot.smooth { border-radius: 50%; }
.mDot.chunky { border-radius: 0; }

/* =========================================================
   SYSTEM / THEME SPLIT BUTTON
   ========================================================= */
#sysThemeBtn {
  display: flex; align-items: stretch;
  border-radius: 999px;
  border: 1.5px solid var(--menu-border);
  overflow: hidden;
  background: linear-gradient(180deg, var(--menu-blue-1) 0%, var(--menu-blue-2) 100%);
  cursor: pointer; user-select: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 4px 14px rgba(0,0,0,.40);
  transition: box-shadow .14s ease, border-color .14s ease;
  min-width: 164px;
}
#sysThemeBtn:hover {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 6px 20px rgba(0,0,0,.45);
}
.stBtn-half {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 5px 12px; gap: 1px; flex: 1;
  transition: background .12s ease;
}
.stBtn-half:hover  { background: rgba(255,255,255,.12); }
.stBtn-half:active { background: rgba(255,255,255,.22); }
.stBtn-divider {
  width: 1px; background: var(--menu-border); opacity: .4;
  margin: 6px 0; align-self: stretch; flex-shrink: 0;
}
.stBtn-lbl {
  font-size: 8px; opacity: .6; letter-spacing: .12em;
  text-transform: uppercase; color: var(--menu-text); line-height: 1;
}
.stBtn-val {
  font-size: 11px; font-weight: 600; color: var(--menu-text);
  letter-spacing: .04em; white-space: nowrap; line-height: 1.25;
}
@media (max-width: 520px) {
  #sysThemeBtn { min-width: 130px; }
  .stBtn-half  { padding: 4px 8px; }
  .stBtn-val   { font-size: 10px; }
}

/* =========================================================
   MINI PLAYER (persistent bottom bar)
   ========================================================= */
#audioBar {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 92;
  background: rgba(20,20,24,0.6); border: 1px solid rgba(255,255,255,0.2);
  border-radius: 14px; backdrop-filter: blur(6px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "left center right";
  align-items: center;
  gap: 10px; padding: 8px 12px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}
.ab-left  { grid-area: left;   display: inline-flex; align-items: center; gap: 10px; }
.ab-right { grid-area: right;  display: inline-flex; align-items: center; gap: 10px; }
.ab-center{ grid-area: center; display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; }

#ab-title {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  display: block; width: min(70vw,900px); pointer-events: none;
  text-align: center; z-index: 93;
}
#ticker { min-width: 10px; white-space: nowrap; overflow: hidden; text-align: center; }
#audioStatusInline { width: 18px; height: 18px; border-radius: 4px; display: none; vertical-align: -3px; margin-right: 6px; image-rendering: pixelated; }
#audioNow { display: inline-block; font-size: 14px; color: #fff; opacity: .95; line-height: 1.2; text-overflow: ellipsis; overflow: hidden; max-width: 100%; vertical-align: bottom; }

/* Volume slider */
#audioVol { width: 140px; height: 28px; appearance: none; background: transparent; }
#audioVol::-webkit-slider-runnable-track { height: 3px; background: var(--vol-track); border-radius: 2px; }
#audioVol::-moz-range-track { height: 3px; background: var(--vol-track); border-radius: 2px; }
#audioVol::-moz-range-progress { height: 3px; background: var(--vol-track-fill); border-radius: 2px; }
#audioVol::-ms-track { height: 3px; background: transparent; border-color: transparent; color: transparent; }
#audioVol::-ms-fill-lower { background: var(--vol-track-fill); border-radius: 2px; }
#audioVol::-ms-fill-upper { background: var(--vol-track); border-radius: 2px; }
#audioVol::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--vol-thumb); margin-top: -5.5px; }
#audioVol::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--vol-thumb); border: 0; }
#audioVol:focus { outline: none; }

#audioInner { position: fixed; left: -10000px; top: -10000px; width: 360px; height: 120px; opacity: 0; pointer-events: none; }
#scPlayer { display: block; width: 100%; height: 96px; }

@media (max-width: 640px) {
  #audioBar {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "title title title" "left  center right";
    row-gap: 6px;
  }
  #ab-title { position: static; transform: none; width: auto; pointer-events: auto; grid-area: title; text-align: center; display: block; }
  #ticker { max-width: none; }
  #audioVol { width: 110px; }
}

/* =========================================================
   PLAYLIST POPOVER + ITEMS
   ========================================================= */
.plItem {
  padding: 8px 12px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.15);
  margin-top: 8px; cursor: pointer; display: flex; align-items: center;
  transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
  background: rgba(255,255,255,0.02);
}
.plItem .plName {
  font-weight: 600; font-size: 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(255,255,255,.35);
}
.plItem:hover {
  border-color: rgba(185,228,255,.55);
  box-shadow: 0 6px 20px rgba(0,0,0,.25), inset 0 0 0 2px rgba(133,196,255,.15);
  transform: translateY(-1px);
  background: rgba(255,255,255,0.05);
}
.plItem:hover .plName {
  text-decoration-color: rgba(255,255,255,.9);
  text-shadow: 0 0 8px rgba(160,210,255,.55);
}

#plPopover {
  position: fixed; z-index: 96; display: none; opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  background: rgba(10,10,14,.96); color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 12px; padding: 10px;
  width: min(86vw, 420px); max-height: min(60vh, 420px);
  overflow: auto; box-shadow: 0 18px 40px rgba(0,0,0,.45);
  transform: translateY(-6px);
}
#plPopover.show { display: block; opacity: 1; transform: translateY(0); }

.plRow  { display: flex; gap: 8px; align-items: center; }
.plInput {
  flex: 1; padding: 8px 10px; border-radius: 10px;
  background: #15161a; color: #fff;
  border: 1px solid rgba(255,255,255,.2); font-size: 14px;
}
.plOK {
  padding: 8px 12px; border-radius: 10px;
  border: 1px solid var(--menu-border);
  background: transparent; color: #fff; font-size: 14px;
}
.plList { margin-top: 8px; padding: 4px 2px; }

@media (max-width: 520px) {
  #plPopover { width: min(92vw, 320px); max-height: min(58vh, 360px); padding: 8px; }
  .plRow { gap: 6px; }
  .plInput { padding: 7px 9px; font-size: 13px; }
  .plOK { padding: 7px 10px; font-size: 13px; }
  .plItem { padding: 8px 10px; margin-top: 6px; }
  .plItem .plName { font-size: 15px; }
}

/* =========================================================
   TOAST
   ========================================================= */
#toast {
  position: fixed; left: 50%; top: 14px; transform: translateX(-50%) translateY(-10px);
  background: rgba(10,10,14,.92); color: #fff;
  border: 1px solid rgba(255,255,255,.25); border-radius: 10px;
  padding: 8px 12px; font-size: 13px; z-index: 120;
  pointer-events: none; opacity: 0; display: none;
  transition: opacity .18s ease, transform .18s ease;
}
#toast.show { display: block; opacity: 1; transform: translateX(-50%) translateY(0); }

/* ESPO_PLAYER_16_9_FIX */
@media (min-width: 641px) {
  #audioBar {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "title title title" "left center right";
    row-gap: 3px;
    padding: 6px 12px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  }
  #ab-title {
    position: static !important;
    transform: none !important;
    width: auto !important;
    grid-area: title;
    pointer-events: auto;
    text-align: center;
    display: block;
  }
}
/* END_ESPO_PLAYER_16_9_FIX */