/* ============================================================
   AnimeRaw — style-base.css (todas as páginas)
   Gerado automaticamente a partir de style.css — ver split-css.js
   ============================================================ */

/* ================================================================
   AnimeRaw — Premium UI  v2.0
   Inspirado em Netflix · Crunchyroll · Prime Video
   Autor: Refatorado com foco em: performance + design premium
   ================================================================

   Índice
   ──────
   1. Font Declarations (CLS fix)
   2. Custom Properties (Design Tokens)
   3. Light Mode Tokens
   4. Reset & Base
   5. Layout Helpers
   6. Header / Nav
   7. Hero Banner
   8. Search & Controls
   9. Buttons
   10. Cards — Anime Grid
   11. Cards — Episode List
   12. Multi-season badge / Category Tags
   13. Seasons Page
   14. Player Page
   15. Watch-together Room
   16. Pagination
   17. Footer
   18. Skeleton Loading
   19. Animations & Keyframes
   20. Scrollbar
   21. Light Mode Overrides
   22. Responsive — Breakpoints
   ================================================================ */

/* ================================================================
   1. Font Declarations — CLS fix via size-adjust
   ================================================================ */

@font-face {
  font-family: 'Bebas Neue';
  font-display: swap;
  src: local('Bebas Neue');
  size-adjust: 98%;
}

@font-face {
  font-family: 'Rajdhani';
  font-display: swap;
  src: local('Rajdhani');
  size-adjust: 100%;
}

/* ================================================================
   2. Custom Properties — Design Tokens
   ================================================================ */

:root {
  /* ── Paleta base ── */
  --bg: #060810;
  /* fundo profundo, quase preto */
  --bg2: #0a0d15;
  --surface: #0f1521;
  /* cards, painéis */
  --surface2: #161e2e;
  /* inputs, superfícies elevadas */
  --surface3: #1c2740;
  /* hover states */
  --overlay: rgba(6,8,16,.82);
  /* gradiente sobre imagens */
  /* ── Bordas ── */
  --border: rgba(255,255,255,.06);
  --border2: rgba(255,255,255,.11);
  --border-focus: rgba(0,212,255,.55);
  /* ── Accent primário — vermelho Netflix-ish ── */
  --accent: #e63946;
  --accent-dark: #b72534;
  --accent-glow: rgba(230,57,70,.35);
  --accent-subtle: rgba(230,57,70,.12);
  /* ── Accent secundário — ciano Crunchyroll-ish ── */
  --accent2: #00d4ff;
  --accent2-dark: #00a8cc;
  --accent2-glow: rgba(0,212,255,.28);
  --accent2-subtle: rgba(0,212,255,.08);
  /* ── Accent terciário ── */
  --accent3: #f4a261;
  --accent3-subtle: rgba(244,162,97,.1);
  /* ── Texto ── */
  --text: #edf2f9;
  --text2: #94a3b8;
  --text3: #64748b;
  --muted: #475569;
  /* ── Sucesso / status ── */
  --green: #22c55e;
  --green-glow: rgba(34,197,94,.3);
  /* ── Geometria ── */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  /* ── Tipografia ── */
  --font-title: 'Bebas Neue', cursive;
  --font-ui: 'Rajdhani', sans-serif;
  --font-body: 'Noto Sans JP', sans-serif;
  /* ── Transições ── */
  --ease: cubic-bezier(.4,0,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --transition: .2s var(--ease);
  --transition-md: .3s var(--ease);
  /* ── Sombras ── */
  --shadow-sm: 0 2px 8px rgba(0,0,0,.4);
  --shadow-md: 0 8px 32px rgba(0,0,0,.55);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.7);
  --shadow-card: 0 4px 24px rgba(0,0,0,.5);
  --shadow-glow: 0 0 40px var(--accent-glow);
  /* ── Layout ── */
  --header-h: 64px;
  --content-max: 1280px;
  --vh: 1vh;
}

/* ================================================================
   3. Light Mode Tokens
   ================================================================ */

body.light {
  --bg: #f1f5fb;
  --bg2: #e8edf7;
  --surface: #ffffff;
  --surface2: #f1f5fb;
  --surface3: #e2e8f4;
  --overlay: rgba(241,245,251,.85);
  --border: rgba(0,0,0,.07);
  --border2: rgba(0,0,0,.13);
  --text: #111827;
  --text2: #4b5563;
  --text3: #9ca3af;
  --muted: #9ca3af;
  --shadow-card: 0 4px 20px rgba(0,0,0,.08);
  --shadow-md: 0 8px 24px rgba(0,0,0,.1);
}

/* ================================================================
   4. Reset & Base
   ================================================================ */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-ui), sans-serif;
  background-color: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--transition-md), color var(--transition-md);
  /* Gradiente ambiente — sutil, como Cinema */
  background-image: radial-gradient(ellipse 100% 55% at 50% -8%, rgba(0,212,255,.07) 0%, transparent 65%),
    radial-gradient(ellipse 70% 40% at 95% 90%,  rgba(230,57,70,.06) 0%, transparent 55%),
    radial-gradient(ellipse 50% 35% at 5%  80%,  rgba(0,212,255,.04) 0%, transparent 50%);
}

/* ================================================================
   5. Layout Helpers
   ================================================================ */

main {
  width: 100%;
  max-width: var(--content-max);
  padding: 0 24px;
  margin-inline: auto;
}

.header-controls {
  width: 100%;
  max-width: var(--content-max);
  padding: 0 24px;
  margin-inline: auto;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ================================================================
   6. Header / Nav — estilo streaming premium
   ================================================================ */

header {
  width: 100%;
  height: var(--header-h);
  background: rgba(6,8,16,.9);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-bottom: 1px solid var(--border2);
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  position: sticky;
  top: 0;
  z-index: 200;
  margin-bottom: 36px;
  will-change: transform;
  contain: layout style;
  transition: box-shadow var(--transition-md), background var(--transition-md);
}

/* Linha gradiente superior — assinatura visual */

header::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--accent) 25%,
    var(--accent2) 50%,
    var(--accent) 75%,
    transparent 100%);
  opacity: .9;
}

/* Vinheta inferior sutil */

header::after {
  content: '';
  position: absolute;
  inset: auto 0 -1px 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border2), transparent);
}

body.light header {
  background: rgba(241,245,251,.92);
}

/* ── Logo / Título ── */

header h1,
header #animeTitle {
  font-family: var(--font-title);
  font-size: 2rem;
  letter-spacing: 4px;
  background: linear-gradient(135deg, #fff 20%, var(--accent2) 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
  max-width: 100%;
  line-height: 1;
  cursor: default;
  user-select: none;
}

body.light header h1,
body.light header #animeTitle {
  background: linear-gradient(135deg, #111827 20%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ================================================================
   7. Search & Controls
   ================================================================ */

.search-container {
  position: relative;
  flex: 1;
  max-width: 340px;
}

#searchInput {
  width: 100%;
  padding: 10px 16px 10px 42px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: .95rem;
  font-weight: 500;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

#searchInput:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent2-glow);
  background: var(--surface3);
}

#searchInput::placeholder {
  color: var(--muted);
}

.search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text3);
  font-size: .85rem;
  pointer-events: none;
  transition: color var(--transition);
}

.search-container:focus-within .search-icon {
  color: var(--accent2);
}

/* Category select */

.category-select-wrapper {
  position: relative;
  flex-shrink: 0;
}

.category-select-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: .78rem;
  pointer-events: none;
  z-index: 1;
}

#categorySelect {
  appearance: none;
  -webkit-appearance: none;
  padding: 10px 32px 10px 34px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: .9rem;
  font-weight: 600;
  outline: none;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235a6a7e' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  min-width: 190px;
  max-width: 230px;
}

#categorySelect:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent2-glow);
}

#categorySelect option {
  background: var(--surface2);
  color: var(--text);
}

body.light #categorySelect {
  background-color: #fff;
  border-color: rgba(0,0,0,.15);
  color: #111827;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a0aec0' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

body.light #categorySelect option {
  background: #fff;
  color: #111827;
}

body.light #searchInput {
  background: #fff;
  border-color: rgba(0,0,0,.15);
  color: #111827;
}

body.light #searchInput::placeholder {
  color: var(--muted);
}

/* ================================================================
   8. Buttons — hierarquia visual clara
   ================================================================ */

button {
  cursor: pointer;
  padding: 9px 18px;
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .5px;
  transition: all var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

/* Ripple sutil */

button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: background var(--transition);
}

button:hover {
  background: var(--surface3);
  border-color: var(--border-focus);
  color: var(--accent2);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

button:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Botão primário — vermelho */

.btn-accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 2px 16px var(--accent-glow);
}

.btn-accent:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #fff;
  box-shadow: 0 4px 24px var(--accent-glow);
}

/* Botão destrutivo */

.btn-danger {
  background: transparent;
  border-color: var(--muted);
  color: var(--text3);
  font-size: .82rem;
  padding: 6px 12px;
}

.btn-danger:hover {
  background: rgba(230,57,70,.15);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: none;
}

/* Voltar */

button#backToMenu,
button#backToList {
  background: transparent;
  border-color: var(--border2);
  color: var(--text2);
  gap: 8px;
}

button#backToMenu:hover,
button#backToList:hover {
  background: var(--surface2);
  border-color: var(--border-focus);
  color: var(--text);
}

/* Nav episódios */

/* ── Theme toggle ── */

button#toggleTheme {
  padding: 8px 14px;
  font-size: .82rem;
  background: transparent;
  border-color: var(--border2);
  color: var(--text2);
}

button#toggleTheme:hover {
  background: var(--surface2);
  border-color: var(--border-focus);
  color: var(--accent2);
}

/* ================================================================
   10. Cards — Anime Grid  (coração da interface)
   ================================================================ */

#animeList {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
  align-items: start;
}

/* ── Card base ── */

.card-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  /* height: 100% removido — causava cards desproporcionais no grid auto-fill */
}

.card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  min-width: 0;
  /* height: 100% removido — o aspect-ratio da img define a altura corretamente */
  transition: transform       .32s var(--ease-spring),
    box-shadow      .32s var(--ease),
    border-color    .22s var(--ease);
  animation: fadeUp .4s var(--ease) both;
  /* contain: style apenas (sem layout) — layout isolado impedia height auto correto */
  contain: style;
  will-change: transform;
}

/* Stagger animation */

.card:nth-child(1) {
  animation-delay: .03s;
}

.card:nth-child(2) {
  animation-delay: .06s;
}

.card:nth-child(3) {
  animation-delay: .09s;
}

.card:nth-child(4) {
  animation-delay: .12s;
}

.card:nth-child(5) {
  animation-delay: .15s;
}

.card:nth-child(6) {
  animation-delay: .18s;
}

.card:nth-child(7) {
  animation-delay: .21s;
}

.card:nth-child(8) {
  animation-delay: .24s;
}

/* Gradiente inferior do card — como Netflix */

.card::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to top, rgba(6,8,16,.95) 0%, rgba(6,8,16,.3) 60%, transparent 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .28s var(--ease);
  z-index: 1;
}

/* Linha accent topo — brilha no hover */

.card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
  z-index: 2;
}

.card:hover::before {
  transform: scaleX(1);
}

.card:hover::after {
  opacity: 1;
}

.card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 24px 56px rgba(0,0,0,.7),
    0 0 0 1px rgba(0,212,255,.22),
    0 0 32px rgba(0,212,255,.1);
  border-color: rgba(0,212,255,.3);
}

/* ── Thumbnail ── */

.card img {
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
  display: block;
  image-rendering: auto;
  background: var(--surface2);
  transition: transform .45s var(--ease), filter .3s var(--ease);
}

.card:hover img {
  transform: scale(1.06);
  filter: brightness(1.1) saturate(1.15);
}

/* ── Info do card ── */

.card .info {
  padding: 8px 10px 12px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: relative;
  z-index: 2;
}

.card .title {
  font-weight: 700;
  font-size: .82rem;
  line-height: 1.35;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--transition);
}

.card:hover .title {
  color: #fff;
}

/* ── Multi-season badge ── */

.multi-season-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .68rem;
  font-weight: 700;
  font-family: var(--font-ui);
  color: var(--accent3);
  background: var(--accent3-subtle);
  border: 1px solid rgba(244,162,97,.28);
  border-radius: var(--radius-sm);
  padding: 2px 7px;
  letter-spacing: .4px;
  width: fit-content;
}

/* ── Category tags ── */

.card-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 1px;
}

.category-tag {
  font-size: .6rem;
  font-weight: 700;
  font-family: var(--font-ui);
  letter-spacing: .3px;
  color: var(--accent2);
  background: var(--accent2-subtle);
  border: 1px solid rgba(0,212,255,.18);
  border-radius: 3px;
  padding: 2px 5px;
  white-space: nowrap;
  transition: background var(--transition), border-color var(--transition);
}

.card:hover .category-tag {
  background: rgba(0,212,255,.15);
  border-color: rgba(0,212,255,.35);
}

body.light .category-tag {
  color: #0077aa;
  background: rgba(0,145,180,.07);
  border-color: rgba(0,145,180,.22);
}

/* ================================================================
   11. Cards — Episode List
   ================================================================ */

/* ── ep-card: elemento gerado pelo anime.js ── */

/* Ícone de assistido */

/* Episódio assistido */

/* Barra de progresso parcial */

/* Suporte ao CSS legado (.card dentro de #episodesList) */

.card .episode {
  font-family: var(--font-title);
  font-size: .9rem;
  letter-spacing: 1px;
  color: var(--text2);
  transition: color var(--transition);
}

.card:hover .episode {
  color: var(--accent2);
}

body.light .card .episode {
  color: var(--text2);
}

/* ================================================================
   12. Seasons Page
   ================================================================ */

/* Botões de temporada */

/* ================================================================
   13. Player Page
   ================================================================ */

/* ================================================================
   14. Watch-together Room
   ================================================================ */

/* ================================================================
   15. Pagination
   ================================================================ */

#paginationContainer {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 36px 16px 8px;
  flex-wrap: wrap;
}

#paginationContainer button {
  padding: 8px 14px;
  border-radius: var(--radius);
  min-width: 40px;
  font-size: .88rem;
}

/* ================================================================
   16. Footer
   ================================================================ */

footer {
  width: 100%;
  margin-top: 64px;
  padding: 28px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  min-height: 76px;
}

.footer-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: .82rem;
  color: var(--muted);
  font-family: var(--font-body), sans-serif;
  text-align: center;
}

.footer-logo {
  font-family: var(--font-title);
  font-size: 1.15rem;
  color: var(--accent);
  letter-spacing: 2px;
}

.footer-sep {
  opacity: .35;
}

.footer-note {
  opacity: .65;
}

.footer-copy {
  opacity: .5;
}

/* ================================================================
   17. Skeleton Loading
   ================================================================ */

@keyframes skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.card img[data-src] {
  background: linear-gradient(
      90deg,
      var(--surface)  25%,
      var(--surface2) 50%,
      var(--surface)  75%
    );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
  aspect-ratio: 2/3;
  width: 100%;
}

/* ================================================================
   18. Animations & Keyframes
   ================================================================ */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: .4;
  }
}

@keyframes shimmer-bar {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

/* Respeita preferência do usuário por menos movimento */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ================================================================
   19. Scrollbar — discreta, estilo Netflix
   ================================================================ */

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--surface3);
  border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}

/* ================================================================
   20. Light Mode Overrides
   ================================================================ */

/* ── Body ── */

body.light {
  background-image: radial-gradient(ellipse 100% 55% at 50% -8%, rgba(0,145,180,.04) 0%, transparent 65%),
    radial-gradient(ellipse 70% 40% at 95% 90%,  rgba(230,57,70,.03) 0%, transparent 55%);
}

/* ── Header ── */

body.light header {
  background: rgba(241,245,251,.95);
}

body.light header h1,
body.light header .header-logo,
body.light header #animeTitle {
  background: linear-gradient(135deg, #111827 20%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Nav buttons ── */

body.light .nav-btn {
  color: #4b5563;
  border-color: rgba(0,0,0,.13);
}

body.light .nav-btn:hover {
  background: rgba(0,0,0,.06);
  color: #111827;
}

body.light .nav-btn.active {
  color: #0077aa;
  border-color: rgba(0,119,170,.3);
  background: rgba(0,119,170,.05);
}

/* ── Theme toggle ── */

body.light button#toggleTheme {
  color: #4b5563;
  border-color: rgba(0,0,0,.13);
  background: transparent;
}

body.light button#toggleTheme:hover {
  background: rgba(0,0,0,.06);
  color: #111827;
}

/* ── Back buttons ── */

body.light .header-controls button,
body.light button#backToMenu,
body.light button#backToList {
  color: #4b5563;
  border-color: rgba(0,0,0,.13);
  background: transparent;
}

body.light .header-controls button:hover,
body.light button#backToMenu:hover,
body.light button#backToList:hover {
  background: rgba(0,0,0,.06);
  color: #111827;
}

/* ── Generic buttons ── */

body.light button {
  color: #111827;
  background: #fff;
  border-color: rgba(0,0,0,.13);
}

body.light button:hover {
  background: rgba(0,0,0,.05);
  color: #111827;
  border-color: rgba(0,119,170,.35);
}

body.light .btn-accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

body.light .btn-danger {
  background: transparent;
  color: #9ca3af;
  border-color: rgba(0,0,0,.13);
}

body.light .btn-danger:hover {
  background: rgba(230,57,70,.08);
  color: var(--accent);
  border-color: var(--accent);
}

/* ── Cards (main grid) ── */

body.light .card {
  background: #fff;
  box-shadow: 0 2px 14px rgba(0,0,0,.07);
  border-color: rgba(0,0,0,.08);
}

body.light .card:hover {
  box-shadow: 0 16px 40px rgba(0,0,0,.14), 0 0 0 1px rgba(0,145,180,.25);
  border-color: rgba(0,145,180,.3);
}

body.light .card::after {
  background: linear-gradient(to top, rgba(241,245,251,.95) 0%, rgba(241,245,251,.2) 60%, transparent 100%);
}

body.light .card .title {
  color: #111827;
}

body.light .card:hover .title {
  color: #111827;
}

body.light .card .episode {
  color: #4b5563;
}

body.light .card:hover .episode {
  color: #0077aa;
}

/* ── Episode cards (ep-card) ── */

/* ── Hero section (anime page) ── */

body.light #heroFavBtn {
  color: #4b5563;
  border-color: rgba(0,0,0,.13);
  background: transparent;
}

body.light #heroFavBtn:hover {
  background: rgba(180,83,9,.08);
  color: #b45309;
  border-color: rgba(180,83,9,.3);
}

body.light #heroFavBtn.is-fav {
  color: #b45309;
  border-color: rgba(180,83,9,.35);
  background: rgba(180,83,9,.07);
}

/* ── Sort button ── */

body.light #sortBtn {
  color: #4b5563;
  border-color: rgba(0,0,0,.13);
  background: transparent;
}

body.light #sortBtn:hover {
  background: rgba(0,0,0,.05);
  color: #111827;
}

/* ── Section titles ── */

body.light .eps-section-title,
body.light .section-title {
  color: #111827;
}

/* ── Search ── */

body.light .search-container input,
body.light #searchInput {
  background: #fff;
  border-color: rgba(0,0,0,.15);
  color: #111827;
}

body.light #searchInput::placeholder,
body.light .search-container input::placeholder {
  color: #9ca3af;
}

/* ── Category select ── */

body.light #categorySelect {
  background-color: #fff;
  border-color: rgba(0,0,0,.15);
  color: #111827;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a0aec0' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

body.light #categorySelect option {
  background: #fff;
  color: #111827;
}

/* ── Panel tabs ── */

body.light .panel-tab {
  color: #4b5563;
  border-color: rgba(0,0,0,.12);
  background: transparent;
}

body.light .panel-tab.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

body.light .clear-btn {
  color: var(--accent);
  border-color: rgba(230,57,70,.25);
  background: transparent;
}

body.light .clear-btn:hover {
  background: rgba(230,57,70,.07);
}

/* ── History ── */

body.light .history-item {
  background: #fff;
  border-color: rgba(0,0,0,.09);
}

body.light .history-item:hover {
  background: #f1f5fb;
  border-color: rgba(0,0,0,.13);
}

body.light .history-title {
  color: #111827;
}

body.light .history-ep {
  color: #4b5563;
}

body.light .history-meta {
  color: #9ca3af;
}

body.light .history-remove {
  color: #9ca3af;
  border-color: rgba(0,0,0,.12);
  background: transparent;
}

/* ── Favorites ── */

body.light .fav-card {
  background: #fff;
  border-color: rgba(0,0,0,.09);
}

body.light .fav-card:hover {
  border-color: rgba(0,0,0,.15);
}

body.light .fav-card .title {
  color: #111827;
}

/* ── Seasons ── */

/* ── Room ── */

/* ── Fav btn (player) ── */

/* ── Hero section (index) ── */

body.light .hero-section {
  border-color: rgba(0,0,0,.07);
}

body.light .hero-label {
  color: #0077aa;
}

body.light .hero-title {
  background: linear-gradient(135deg,#111827 40%,rgba(0,119,170,.8) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

body.light .hero-sub {
  color: #4b5563;
}

body.light .section-accent {
  background: linear-gradient(180deg,var(--accent),#0077aa);
}

/* ── Footer ── */

body.light footer {
  background: var(--surface);
  border-color: rgba(0,0,0,.08);
}

body.light .footer-logo {
  color: var(--accent);
}

/* ── Multi-season badge ── */

body.light .multi-season-indicator {
  color: #b45309;
  background: rgba(180,83,9,.08);
  border-color: rgba(180,83,9,.2);
}

/* ── Header divider (player) ── */

/* ── Prev/Next ep buttons ── */

/* Fullscreen fix */

/* ================================================================
   21. Responsive Breakpoints
   ================================================================ */

/* Tablet grande */

/* ================================================================
   22. Responsive — Breakpoints
   ================================================================ */

/* ── 1024px — tablet largo ── */

@media (max-width: 1024px) {
  #animeList {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px;
  }
}

/* ── 768px — tablet ── */

@media (max-width: 768px) {
  :root {
    --header-h: 56px;
  }

  header {
    padding: 0 14px;
    gap: 10px;
    margin-bottom: 16px;
  }

  header h1,
  header #animeTitle {
    font-size: 1.5rem;
    letter-spacing: 2px;
  }

  .search-container {
    max-width: none;
    flex: 1;
  }

  main,
  .header-controls {
    padding: 0 14px;
  }

  #animeList {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
}

/* ── 600px — seasons mobile ── */

@media (max-width: 600px) {
  .footer-inner {
    flex-direction: column;
    gap: 6px;
  }

  .footer-sep {
    display: none;
  }

  #categorySelect {
    min-width: 0;
    max-width: 160px;
    font-size: .82rem;
  }
}

/* ── 520px — esconde filtro de categoria ── */

@media (max-width: 520px) {
  .category-select-wrapper {
    display: none;
  }
}

/* ── 480px — mobile ── */

@media (max-width: 480px) {
  /* ─── INDEX: header reorganizado ─── */

  /* O header do index.html tem: logo | nav-btns | search | category | toggleTheme
     Em mobile: logo + tema ficam na 1ª linha, busca na 2ª */

  header {
    padding: 10px 12px;
    flex-wrap: wrap;
    height: auto;
    min-height: var(--header-h);
    gap: 8px;
    align-items: center;
  }

  main,
  .header-controls {
    padding: 0 10px;
  }

  /* Logo cresce para preencher espaço sobrando */

  header h1 {
    font-size: 1.45rem;
    letter-spacing: 2px;
    flex: 1;
  }

  /* Nav buttons (Início / Histórico / Favoritos): só ícone */

  .nav-btn,
  .nav-btns .nav-btn {
    padding: 7px 10px;
    font-size: 0;
    /* esconde texto */
    gap: 0;
  }

  .nav-btn i,
  .nav-btns .nav-btn i {
    font-size: .95rem;
  }

  /* Botão tema: só ícone */

  #toggleTheme {
    padding: 7px 10px;
    font-size: 0;
    gap: 0;
  }

  #toggleTheme i {
    font-size: .95rem;
  }

  /* Busca ocupa linha inteira abaixo */

  .search-container {
    flex: 1 1 100%;
    min-width: 0;
    order: 10;
    /* empurra para depois dos botões */
  }

  .search-container input {
    width: 100%;
    min-width: 0;
    font-size: .88rem;
  }

  /* Grid de animes: 3 colunas em mobile normal */

  #animeList {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }

  /* Grid de episódios: 4 colunas em mobile */

  .header-controls {
    padding: 0 12px;
    margin-bottom: 16px;
  }

  .header-controls button {
    font-size: .82rem;
    padding: 6px 12px;
  }
}

/* ── 380px — mobile pequeno ── */

@media (max-width: 380px) {
  #animeList {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ================================================================
   23. Player page — mobile geral (portrait)
   ================================================================ */

@media screen and (max-width: 900px) {
  /* overflow-x no html removido — em iOS Safari cria scroll container que impede scroll normal da página.
     Apenas body recebe overflow-x:hidden para prevenir scroll horizontal sem quebrar scroll vertical. */

  html {
    width: 100%;
  }

  body {
    width: 100%;
    max-width: 100vw;
    overflow-x: clip;
    /* clip não cria scroll container como hidden faz */
  }

  /* Player header: logo + divider + título do ep + botões direitos
     Em mobile esconde o título do episódio no header (já aparece em outro lugar)
     e mantém logo + botões ícone */

  /* Título do episódio no header: truncado */

  main {
    width: 100%;
    max-width: 100vw;
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .header-controls {
    width: 100%;
    max-width: 100vw;
    padding: 0 10px;
    box-sizing: border-box;
  }
}

/* ── Player: mobile pequeno (≤480px) ── */

@media screen and (max-width: 480px) {
  /* Header do player: esconde label dos botões, só ícones */

  .header-logo {
    font-size: 1.3rem;
    letter-spacing: 2px;
  }

  /* Título do ep: esconde no header (fica só logo + botões) */

  .header-right {
    gap: 6px;
  }

  .nav-btn .btn-label,
  #toggleTheme .btn-label {
    display: none;
  }

  .nav-btn,
  #toggleTheme {
    padding: 7px 10px;
    font-size: .85rem;
  }

  /* Botões anterior/próximo: menores */

  /* Room: mais compacto */

  /* Remove volume (hardware controla) */
}

/* ================================================================
   24. Player — LANDSCAPE MOBILE (horizontal)

   PROBLEMA RAIZ: o Plyr usa "padding-bottom trick" para manter
   ratio 16:9 (padding-bottom: 56.25% no wrapper). Quando forçamos
   height: 100svh no .plyr ou .plyr__video-wrapper com !important,
   o browser resolve o conflito zerando a altura real do <video>
   → tela preta, só áudio.

   SOLUÇÃO: definir tamanho APENAS no .player-container. O Plyr
   herda via height:100% em cascata normal, sem !important que
   quebre o cálculo interno.
   ================================================================ */

@media screen and (orientation: landscape) and (max-height: 600px) {
  html,
  body {
    overflow: hidden !important;
    height: 100svh !important;
  }

  header {
    display: none !important;
  }

  .header-controls {
    display: none !important;
  }

  main {
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }

  /* ÚNICO elemento com tamanho absoluto: o container */

  /* Plyr herda o container — sem height forçado */

  /* Wrapper: anula o padding-bottom trick do ratio e preenche o .plyr */

  /* <video> preenche o wrapper com position absolute */
}

/* ================================================================
   24b. Fullscreen nativo — garante visibilidade em Android/iOS
   ================================================================ */

/* ================================================================
   25. Player — Plyr theme + componentes específicos
   ================================================================ */

.header-logo {
  font-family: var(--font-title), cursive;
  font-size: 1.65rem;
  letter-spacing: 3px;
  background: linear-gradient(135deg, #fff 30%, var(--accent2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-decoration: none;
  flex-shrink: 0;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Limita o tamanho do player em telas largas de desktop — sem isso ele
   esticava até os 1280px do .main, ficando enorme em monitores grandes.
   O vídeo/Plyr continuam width:100% DENTRO deste container (responsivo). */

/* ── Skeleton loading ── */

@keyframes skeleton-shimmer {
  0% {
    background-position: -400px 0;
  }

  100% {
    background-position: 400px 0;
  }
}

.skeleton-card {
  pointer-events: none;
  cursor: default;
}

.skeleton-img {
  width: 100%;
  aspect-ratio: 2/3;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--surface2) 25%, rgba(255,255,255,.06) 50%, var(--surface2) 75%);
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.4s infinite linear;
}

.skeleton-line {
  height: 10px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--surface2) 25%, rgba(255,255,255,.06) 50%, var(--surface2) 75%);
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.4s infinite linear;
}

/* ── Favorito touch ── */

.card-fav-btn.touch-visible {
  opacity: 1 !important;
}

@keyframes fav-pulse {
  0% {
    transform: scale(1);
  }

  40% {
    transform: scale(1.35);
  }

  70% {
    transform: scale(.9);
  }

  100% {
    transform: scale(1);
  }
}

.fav-pulse {
  animation: fav-pulse .4s ease-out;
}