:root {
  --ink: #0c0a0d;
  --ink-raised: #17131a;
  --gold: #c9a15a;
  --crimson: #8c2f39;
  --paper: #ece4d6;
  --muted: #8b8390;
}
* {
  -webkit-tap-highlight-color: transparent;
}
html, body {
  background: var(--ink);
  color: var(--paper);
  font-family: 'Inter', sans-serif;
  -webkit-user-select: none;
  user-select: none;
}
input, textarea {
  -webkit-user-select: text;
  user-select: text;
}
.font-display {
  font-family: 'Noto Serif TC', serif;
}
body {
  background-image:
    radial-gradient(ellipse 90% 50% at 50% -10%, rgba(140, 47, 57, 0.28), transparent),
    radial-gradient(ellipse 70% 40% at 100% 0%, rgba(201, 161, 90, 0.10), transparent);
  background-attachment: fixed;
}
.poster-art {
  background-size: cover, 200% 100%;
  background-repeat: no-repeat, no-repeat;
  animation: poster-shimmer 1.6s linear infinite;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: auto;
}
@keyframes poster-shimmer {
  0% { background-position: center, -60% 0; }
  100% { background-position: center, 160% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .poster-art {
    animation: none;
    background-position: center, 0 0;
  }
}
[data-href] {
  cursor: pointer;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
[data-href]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 6px;
}
.poster-link {
  display: block;
}
.scroll-row {
  scroll-snap-type: x proximity;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scroll-row::-webkit-scrollbar {
  display: none;
}
.scroll-row>* {
  scroll-snap-align: start;
}
.custom-episode-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(145, 145, 145, 0.48) rgba(255, 255, 255, 0.03);
}
.custom-episode-scroll::-webkit-scrollbar {
  width: 6px;
}
.custom-episode-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 9999px;
}
.custom-episode-scroll::-webkit-scrollbar-thumb {
  background: rgba(145, 145, 145, 0.48);
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.custom-episode-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(170, 170, 170, 0.6);
}
.poster-card {
  aspect-ratio: 2 / 3;
}
.nav-item.active .nav-icon {
  color: var(--gold);
}
.nav-item.active .nav-label {
  color: var(--gold);
}
img.emoji {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  margin: 0 0.1em 0 0;
  vertical-align: -0.15em;
}