/* ═══════════════════════════════════════════════════════════
   AvatarArchive — shared.css
   Loaded by every page. Contains: reset, design tokens,
   themes, shared animations, settings panel, particles canvas.
   Page-specific styles live inside each HTML file.
═══════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }


/* ══════════════════════════════════════════
   DESIGN TOKENS
══════════════════════════════════════════ */
:root {
  /* Colour palette */
  --deep:   #04070d;
  --panel:  #0a111c;
  --blue:   #4db8ff;
  --white:  #f0f4ff;
  --muted:  #6b8aab;
  --dim:    #2d3f56;
  --border: rgba(255,255,255,0.06);
  --gold:   #c9a84c;
  --air:    #f5c518;
  --water:  #4db8ff;
  --earth:  #6abf69;
  --fire:   #f97316;
  --card-bg: linear-gradient(160deg, rgba(10,17,28,.95) 0%, rgba(6,11,20,.98) 100%);

  /* Transition speeds */
  --tx-fast: .15s ease;
  --tx-mid:  .25s ease;
  --tx-slow: .4s ease;
}


/* ══════════════════════════════════════════
   LIGHT THEMES
══════════════════════════════════════════ */
body.theme-parchment {
  --deep: #f5efe0; --panel: #ede4ce; --white: #1a1008; --muted: #7a6040;
  --dim: #b8a880; --border: rgba(0,0,0,.10); --gold: #9a6820;
  --card-bg: linear-gradient(160deg, rgba(255,250,235,.97) 0%, rgba(245,238,215,.99) 100%);
}
body.theme-water {
  --deep: #dff0f8; --panel: #c8e4f2; --white: #0a1a2e; --muted: #3a6080;
  --dim: #7ab0cc; --border: rgba(0,0,0,.09);
  --card-bg: linear-gradient(160deg, rgba(220,240,252,.97) 0%, rgba(200,228,245,.99) 100%);
}
body.theme-earth {
  --deep: #f0f4e8; --panel: #e2ead0; --white: #1a2008; --muted: #5a7040;
  --dim: #a0b878; --border: rgba(0,0,0,.09);
  --card-bg: linear-gradient(160deg, rgba(238,245,220,.97) 0%, rgba(224,235,200,.99) 100%);
}

body.theme-parchment .bg-layer { filter: blur(8px) brightness(.45) saturate(.7); }
body.theme-water    .bg-layer  { filter: blur(8px) brightness(.4)  saturate(1.2) hue-rotate(190deg); }
body.theme-earth    .bg-layer  { filter: blur(8px) brightness(.4)  saturate(1.1) hue-rotate(55deg); }


/* ══════════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════════ */
@keyframes slideUp    { from { opacity:0; transform:translateY(36px) } to { opacity:1; transform:translateY(0) } }
@keyframes overlayOut { from { opacity:1 } to { opacity:0 } }

/* Shimmer sweep across a horizontal surface */
@keyframes shimmer {
  0%                  { background-position:-220% center; opacity:0 }
  4%                  { opacity:1 }
  30%                 { background-position: 220% center; opacity:1 }
  34%, 100%           { background-position: 220% center; opacity:0 }
}

/* Gold frame pulse — paused video state */
@keyframes framePulse {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(201,168,76,.18), 0 0 40px rgba(201,168,76,.13),
                0 0 80px rgba(201,168,76,.06), inset 0 1px 0 rgba(255,240,180,.18);
  }
  15%, 34% {
    box-shadow: 0 0 0 2px rgba(255,220,100,.65), 0 0 55px rgba(201,168,76,.45),
                0 0 110px rgba(201,168,76,.22), inset 0 1px 0 rgba(255,240,180,.35);
  }
}

/* Per-element glow pulses */
@keyframes pulseGlowAir   { 0%,100%{filter:drop-shadow(0 0 5px #f5c518)} 50%{filter:drop-shadow(0 0 18px #f5c518)} }
@keyframes pulseGlowWater { 0%,100%{filter:drop-shadow(0 0 5px #4db8ff)} 50%{filter:drop-shadow(0 0 18px #4db8ff)} }
@keyframes pulseGlowEarth { 0%,100%{filter:drop-shadow(0 0 5px #6abf69)} 50%{filter:drop-shadow(0 0 18px #6abf69)} }
@keyframes pulseGlowFire  { 0%,100%{filter:drop-shadow(0 0 5px #f97316)} 50%{filter:drop-shadow(0 0 18px #f97316)} }

/* Smaller corner ornament pulses */
@keyframes cornerGlowWater { 0%,100%{filter:drop-shadow(0 0 3px #4db8ff)} 50%{filter:drop-shadow(0 0 10px #4db8ff)} }
@keyframes cornerGlowEarth { 0%,100%{filter:drop-shadow(0 0 3px #6abf69)} 50%{filter:drop-shadow(0 0 10px #6abf69)} }
@keyframes cornerGlowFire  { 0%,100%{filter:drop-shadow(0 0 3px #f97316)} 50%{filter:drop-shadow(0 0 10px #f97316)} }
@keyframes cornerGlowAir   { 0%,100%{filter:drop-shadow(0 0 3px #f5c518)} 50%{filter:drop-shadow(0 0 10px #f5c518)} }

/* UI transitions */
@keyframes cardIn    { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:translateY(0) } }
@keyframes skipPop   { from { opacity:0; transform:translateX(20px) } to { opacity:1; transform:translateX(0) } }
@keyframes nextSlide { from { opacity:0; transform:translateY(16px) } to { opacity:1; transform:translateY(0) } }
@keyframes spinRing  { to   { transform:rotate(360deg) } }
@keyframes waveBar   { from { height:3px } to { height:11px } }
@keyframes panelIn   { from { opacity:0; transform:scale(.93) translateY(6px) } to { opacity:1; transform:scale(1) translateY(0) } }

/* Page enter / exit */
@keyframes _avatarPageIn  { from { opacity:0 } to { opacity:1 } }
@keyframes _avatarPageOut { to   { opacity:0 } }


/* ══════════════════════════════════════════
   PRESS / CLICK FEEDBACK
   All interactive elements get a subtle
   scale-down on :active so taps feel physical.
══════════════════════════════════════════ */
a, button, [role="button"],
.hub-card, .card-cta, .ep-card, .ep-thumb,
.book-tab, .season-tab, .pill-btn, .pill-tab,
.theme-opt, .sp-ambient-row, .sp-install-row,
.star-btn, .ctrl-btn, .card-poster, .merch-card,
.comic-btn, .nav-btn, .vcbtn, .back-link,
[data-ep], [data-book] {
  transition: transform .1s cubic-bezier(.3,0,.5,1), opacity .1s ease;
}

a:active, button:active, [role="button"]:active,
.hub-card:active, .card-cta:active, .ep-card:active, .ep-thumb:active,
.book-tab:active, .season-tab:active, .pill-btn:active, .pill-tab:active,
.theme-opt:active, .sp-ambient-row:active, .sp-install-row:active,
.star-btn:active, .ctrl-btn:active, .card-poster:active, .merch-card:active,
.comic-btn:active, .nav-btn:active, .vcbtn:active, .back-link:active,
[data-ep]:active, [data-book]:active {
  transform: scale(.955);
  opacity: .85;
}


/* ══════════════════════════════════════════
   REDUCED-MOTION RESET
   Collapse durations to near-zero without
   breaking state changes.
══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:        .01ms !important;
    animation-iteration-count: 1     !important;
    transition-duration:       .01ms !important;
  }
  #particleCanvas { display: none; }
}


/* ══════════════════════════════════════════
   BODY BASE
══════════════════════════════════════════ */
body {
  background: var(--deep);
  color: var(--white);
  font-family: 'Philosopher', Georgia, serif;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  animation: _avatarPageIn .28s ease both;
}

body._avatar-leaving {
  animation: _avatarPageOut .22s ease forwards;
  pointer-events: none;
}


/* ══════════════════════════════════════════
   BACKGROUND LAYER
   Fixed, blurred, with a rich 5-stop vignette.
   The ::before adds a slow-breathing aurora tint.
══════════════════════════════════════════ */
.bg-layer {
  position: fixed; inset: 0;
  background-size: cover;
  background-position: center top;
  filter: blur(8px) brightness(.22) saturate(1.4);
  transform: scale(1.04);
  z-index: 0;
  will-change: transform;
  contain: strict;
}

/* 5-stop vignette: dark top + bottom, breathable middle */
.bg-layer::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(4,7,13,.80) 0%,
    rgba(4,7,13,.35) 18%,
    transparent     40%,
    transparent     60%,
    rgba(4,7,13,.45) 80%,
    rgba(4,7,13,.90) 100%
  );
}


/* ══════════════════════════════════════════
   PARTICLE CANVAS
   Soft radial mask fades particles at edges
   so they never feel clipped.
══════════════════════════════════════════ */
#particleCanvas {
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  will-change: contents;
  -webkit-mask-image: radial-gradient(ellipse 88% 82% at 50% 50%, black 50%, transparent 100%);
          mask-image: radial-gradient(ellipse 88% 82% at 50% 50%, black 50%, transparent 100%);
}


/* ══════════════════════════════════════════
   HUB CARDS
══════════════════════════════════════════ */
.hub-card {
  position: relative;
  overflow: hidden;
}

/* Richer accent glow on hover */
.hub-card:hover {
  box-shadow:
    0 20px 64px rgba(var(--accent-rgb, 201,168,76), .24),
    0  0   0 1px rgba(var(--accent-rgb, 201,168,76), .38),
    inset 0 1px 0 rgba(255,255,255,.06);
}


/* ══════════════════════════════════════════
   SETTINGS BUTTON
══════════════════════════════════════════ */
#settingsBtn {
  position: fixed; bottom: 14px; left: 18px; z-index: 50;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(4,7,13,.72);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 50%;
  cursor: pointer;
  color: rgba(107,138,171,.65);
  opacity: .78;
  will-change: transform;
  transition: color var(--tx-mid), border-color var(--tx-mid),
              background var(--tx-mid), transform .3s, opacity var(--tx-mid);
}
#settingsBtn:hover { color: var(--gold); border-color: rgba(201,168,76,.45); background: rgba(201,168,76,.07); opacity: 1; }
#settingsBtn.open  { color: var(--gold); border-color: rgba(201,168,76,.55); background: rgba(201,168,76,.10); opacity: 1; transform: rotate(45deg); }
#settingsBtn svg   { width: 15px; height: 15px; }


/* ══════════════════════════════════════════
   SETTINGS PANEL
══════════════════════════════════════════ */
#settingsPanel {
  position: fixed; bottom: 60px; left: 12px; z-index: 100;
  background: rgba(7,12,22,.97);
  border: 1px solid rgba(201,168,76,.20);
  border-radius: 18px;
  padding: 1.1rem 1rem 1.2rem;
  display: none; flex-direction: column; gap: 1.1rem;
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 8px 40px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.03);
  min-width: 230px;
  transform-origin: bottom left;
  animation: panelIn .2s cubic-bezier(.22,1,.36,1) both;
  contain: layout style;
}
#settingsPanel.open { display: flex; }

/* Light theme overrides */
body.theme-parchment #settingsPanel,
body.theme-water     #settingsPanel,
body.theme-earth     #settingsPanel { background: rgba(240,235,220,.98); border-color: rgba(0,0,0,.14); }

.sp-section       { display: flex; flex-direction: column; gap: .3rem; }
.sp-divider       { height: 1px; background: rgba(255,255,255,.07); }
body.theme-parchment .sp-divider,
body.theme-water     .sp-divider,
body.theme-earth     .sp-divider { background: rgba(0,0,0,.10); }

.sp-section-label {
  font-family: 'Cinzel', serif;
  font-size: .38rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .3rem;
}
body.theme-parchment .sp-section-label,
body.theme-water     .sp-section-label,
body.theme-earth     .sp-section-label { color: var(--white); }


/* ── Ambient toggle row ── */
.sp-ambient-row {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .45em .5em; border-radius: 8px; cursor: pointer;
  transition: background var(--tx-fast);
}
.sp-ambient-row:hover { background: rgba(255,255,255,.05); }
body.theme-parchment .sp-ambient-row:hover,
body.theme-water     .sp-ambient-row:hover,
body.theme-earth     .sp-ambient-row:hover { background: rgba(0,0,0,.05); }

.sp-ambient-label {
  font-family: 'Cinzel', serif;
  font-size: .42rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(240,244,255,.7);
  display: flex; align-items: center; gap: .55rem;
}
.sp-ambient-row.active .sp-ambient-label { color: var(--gold); }
body.theme-parchment .sp-ambient-label,
body.theme-water     .sp-ambient-label,
body.theme-earth     .sp-ambient-label { color: var(--white); }

/* Animated wave bars */
.ambient-wave { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.ambient-wave span { display: block; width: 2px; background: currentColor; border-radius: 2px; transform-origin: bottom; }
.sp-ambient-row.active .ambient-wave span { animation: waveBar .7s ease-in-out infinite alternate; }

/* Toggle pill */
.sp-toggle {
  width: 30px; height: 17px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.08);
  position: relative; flex-shrink: 0;
  transition: background var(--tx-mid), border-color var(--tx-mid);
}
.sp-toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 11px; height: 11px; border-radius: 50%;
  background: rgba(255,255,255,.5);
  transition: transform var(--tx-mid), background var(--tx-mid);
}
.sp-ambient-row.active .sp-toggle              { background: rgba(201,168,76,.35); border-color: rgba(201,168,76,.55); }
.sp-ambient-row.active .sp-toggle::after       { transform: translateX(13px); background: var(--gold); }


/* ── Theme options ── */
.theme-opt {
  font-family: 'Cinzel', serif;
  font-size: .42rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(240,244,255,.7);
  background: none; border: none; text-align: left;
  padding: .4em .6em; border-radius: 8px; cursor: pointer;
  display: flex; align-items: center; gap: .6rem;
  transition: background var(--tx-fast), color var(--tx-fast);
}
.theme-opt:hover  { background: rgba(255,255,255,.07); color: var(--white); }
.theme-opt.active { color: var(--gold); }
.theme-swatch     { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
body.theme-parchment .theme-opt,
body.theme-water     .theme-opt,
body.theme-earth     .theme-opt { color: var(--white); }
body.theme-parchment .theme-opt:hover,
body.theme-water     .theme-opt:hover,
body.theme-earth     .theme-opt:hover { background: rgba(0,0,0,.05); }


/* ── Volume slider rows ── */
.sp-vol-row {
  display: flex; align-items: center; gap: .65rem;
  padding: .3em .5em .4em;
}
.sp-vol-label {
  font-family: 'Cinzel', serif;
  font-size: .38rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(240,244,255,.45); flex-shrink: 0; width: 3.6rem;
}
body.theme-parchment .sp-vol-label,
body.theme-water     .sp-vol-label,
body.theme-earth     .sp-vol-label { color: var(--muted); }

/* Wrapper holds the track, fill bar, and tooltip */
.sp-slider-wrap {
  flex: 1; position: relative;
  display: flex; align-items: center;
  height: 28px; /* tall enough for thumb + tooltip */
}

/* Ghost track — full width, dim */
.sp-vol-slider {
  -webkit-appearance: none; appearance: none;
  position: relative; z-index: 2;
  width: 100%; height: 4px; border-radius: 4px;
  background: rgba(255,255,255,.10);
  outline: none; cursor: pointer;
  margin: 0;
}
body.theme-parchment .sp-vol-slider,
body.theme-water     .sp-vol-slider,
body.theme-earth     .sp-vol-slider { background: rgba(0,0,0,.14); }

/* Gold fill bar — sits behind thumb, same height */
.sp-slider-fill {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, #c9a84c 0%, #f5d98b 60%, #c9a84c 100%);
  background-size: 200% 100%;
  animation: sliderShimmer 2.4s linear infinite;
  pointer-events: none; z-index: 1;
  width: var(--rp, 55%); /* driven by JS */
  box-shadow: 0 0 6px rgba(201,168,76,.45);
  transition: width .04s linear;
}

@keyframes sliderShimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* Thumb */
.sp-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #ffe89a, #c9a84c 60%, #9a7020);
  border: 1.5px solid rgba(255,220,100,.55);
  cursor: grab; box-shadow: 0 0 0 3px rgba(201,168,76,.18), 0 2px 8px rgba(0,0,0,.5);
  transition: transform .15s cubic-bezier(.22,1,.36,1), box-shadow .15s;
  position: relative; z-index: 3;
}
.sp-vol-slider::-webkit-slider-thumb:hover {
  transform: scale(1.25);
  box-shadow: 0 0 0 5px rgba(201,168,76,.28), 0 2px 10px rgba(0,0,0,.5);
}
.sp-vol-slider:active::-webkit-slider-thumb {
  cursor: grabbing; transform: scale(1.15);
  box-shadow: 0 0 0 6px rgba(201,168,76,.22), 0 2px 12px rgba(201,168,76,.35);
}
.sp-vol-slider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #ffe89a, #c9a84c 60%, #9a7020);
  border: 1.5px solid rgba(255,220,100,.55); cursor: grab;
  box-shadow: 0 0 0 3px rgba(201,168,76,.18), 0 2px 8px rgba(0,0,0,.5);
}
.sp-vol-slider::-moz-range-track {
  background: transparent; height: 4px;
}

/* Value tooltip bubble */
.sp-slider-tooltip {
  position: absolute; bottom: calc(100% + 2px);
  transform: translateX(-50%);
  left: var(--rp, 55%); /* driven by JS */
  font-family: 'Cinzel', serif; font-size: .34rem; letter-spacing: .12em;
  color: #f0d98a;
  background: rgba(6,12,24,.92);
  border: 1px solid rgba(201,168,76,.35);
  border-radius: 6px; padding: .2em .45em;
  pointer-events: none; z-index: 10;
  opacity: 0; transform: translateX(-50%) translateY(4px);
  transition: opacity .15s, transform .15s;
  white-space: nowrap;
}
.sp-slider-tooltip.show {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
body.theme-parchment .sp-slider-tooltip,
body.theme-water     .sp-slider-tooltip,
body.theme-earth     .sp-slider-tooltip {
  background: rgba(240,235,215,.96); color: #9a6820;
  border-color: rgba(160,120,40,.35);
}


/* ── Install row ── */
.sp-install-row {
  display: flex; align-items: center; gap: .6rem;
  padding: .4em .5em; border-radius: 8px; cursor: pointer;
  font-family: 'Cinzel', serif; font-size: .42rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(240,244,255,.55);
  background: none; border: none; text-align: left; width: 100%;
  transition: background var(--tx-fast), color var(--tx-fast);
}
.sp-install-row:hover { background: rgba(255,255,255,.06); color: rgba(240,244,255,.85); }
body.theme-parchment .sp-install-row,
body.theme-water     .sp-install-row,
body.theme-earth     .sp-install-row { color: var(--muted); }
body.theme-parchment .sp-install-row:hover,
body.theme-water     .sp-install-row:hover,
body.theme-earth     .sp-install-row:hover { background: rgba(0,0,0,.05); color: var(--white); }


/* ══════════════════════════════════════════
   SOUND NUDGE TOAST
══════════════════════════════════════════ */
#soundNudge {
  position: fixed; bottom: 60px; left: 14px; z-index: 51;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Cinzel', serif; font-size: .42rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(240,244,255,.7);
  background: rgba(7,12,22,.92); border: 1px solid rgba(255,255,255,.10);
  border-radius: 30px; padding: .55em 1.1em;
  cursor: pointer;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
  transition: opacity var(--tx-mid), background var(--tx-fast);
}
#soundNudge:hover  { background: rgba(201,168,76,.12); border-color: rgba(201,168,76,.35); color: var(--gold); }
#soundNudge.hidden { opacity: 0; pointer-events: none; }


/* ══════════════════════════════════════════
   WATERMARK
══════════════════════════════════════════ */
.watermark {
  position: fixed; bottom: 14px; right: 18px; z-index: 50;
  font-family: 'Cinzel', serif; font-size: .38rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(107,138,171,.28); pointer-events: none; user-select: none;
}


/* ══════════════════════════════════════════
   FOCUS GLOW — keyboard nav
   Blue ring for all elements, gold for cards.
   Only visible on keyboard focus (:focus-visible),
   never on mouse click.
══════════════════════════════════════════ */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(77,184,255,.85), 0 0 0 4px rgba(77,184,255,.2) !important;
  border-radius: inherit;
  transition: box-shadow .15s;
}
.hub-card:focus-visible {
  box-shadow:
    0 0 0 2px rgba(var(--accent-rgb, 77,184,255), .85),
    0 16px 55px rgba(var(--accent-rgb, 77,184,255), .2) !important;
}


/* ══════════════════════════════════════════
   SCROLLBAR
   Thin, gold-tinted, only visible on hover.
══════════════════════════════════════════ */
::-webkit-scrollbar        { width: 4px; height: 4px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: rgba(201,168,76,.22); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(201,168,76,.5); }


/* ══════════════════════════════════════════
   TEXT SELECTION
══════════════════════════════════════════ */
::selection { background: rgba(77,184,255,.28); color: #f0f4ff; }