/* Temas alternativos — ativados por <html data-tema="..."> */

/* ---------- 1. Roxo (o visual original do site) ---------- */
html[data-tema="roxo"] {
  --bg: #0d0d14; --bg2: #15151f; --card: #1b1b28; --borda: #2a2a3b;
  --txt: #ecebf5; --sub: #9a98b0; --acc: #8b5cf6; --acc2: #ec4899; --raio: 14px;
  --on-acc: #fff; --on-acc2: #fff;
}
html[data-tema="roxo"] body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
html[data-tema="roxo"] .topo { background: rgba(13, 13, 20, .82); }
html[data-tema="roxo"] .hero::before {
  background: radial-gradient(circle at 30% 50%, rgba(139, 92, 246, .35), transparent 55%),
              radial-gradient(circle at 75% 40%, rgba(236, 72, 153, .25), transparent 50%);
}
html[data-tema="roxo"] .logo { box-shadow: 0 0 20px rgba(139, 92, 246, .45); }
html[data-tema="roxo"] .btn.pri { box-shadow: 0 8px 24px rgba(139, 92, 246, .35); }

/* ---------- 2. Papel (claro, cara de mangá impresso) ---------- */
html[data-tema="papel"] {
  --bg: #f4efe6; --bg2: #ebe4d6; --card: #fffcf6; --borda: #d9cfbd;
  --txt: #1d1a16; --sub: #6d655a; --acc: #c1272d; --acc2: #c1272d; --raio: 6px;
  color-scheme: light;
  --on-acc: #fff; --on-acc2: #fff;
}
html[data-tema="papel"] body { font-family: "Zen Kaku Gothic New", system-ui, sans-serif; }
html[data-tema="papel"] h1, html[data-tema="papel"] h2, html[data-tema="papel"] h3 { font-family: "Shippori Mincho", serif; }
html[data-tema="papel"] .topo { background: rgba(244, 239, 230, .9); }
html[data-tema="papel"] .hero::before {
  background: radial-gradient(circle, rgba(29, 26, 22, .07) 1px, transparent 1.5px) 0 0 / 9px 9px;
  filter: none; inset: 0; height: auto;
  -webkit-mask-image: linear-gradient(100deg, transparent 35%, #000 75%); mask-image: linear-gradient(100deg, transparent 35%, #000 75%);
}
html[data-tema="papel"] .logo { box-shadow: none; border-radius: 4px; }
html[data-tema="papel"] .btn.pri { box-shadow: 4px 4px 0 #1d1a16; border: 2px solid #1d1a16; }
html[data-tema="papel"] .btn { border-width: 2px; }
html[data-tema="papel"] .hero-capas img { box-shadow: 6px 6px 0 rgba(29, 26, 22, .85); border: 2px solid #1d1a16; }

/* ---------- 3. Neon (preto, verde-limão, cantos retos) ---------- */
html[data-tema="neon"] {
  --bg: #050505; --bg2: #0c0c0c; --card: #121212; --borda: #262626;
  --txt: #f2f2f2; --sub: #8a8a8a; --acc: #a3e635; --acc2: #22d3ee; --raio: 3px;
  --on-acc: #0a0f02; --on-acc2: #021216;
}
html[data-tema="neon"] body { font-family: "Space Grotesk", system-ui, sans-serif; }
html[data-tema="neon"] .topo { background: rgba(5, 5, 5, .85); }
html[data-tema="neon"] .hero::before {
  background: linear-gradient(rgba(163, 230, 53, .06) 1px, transparent 1px) 0 0 / 100% 32px,
              linear-gradient(90deg, rgba(163, 230, 53, .06) 1px, transparent 1px) 0 0 / 32px 100%;
  filter: none; inset: 0; height: auto;
}
html[data-tema="neon"] .hero h1 { text-transform: uppercase; letter-spacing: -2px; }
html[data-tema="neon"] .logo { box-shadow: 0 0 18px rgba(163, 230, 53, .55); border-radius: 3px; }
html[data-tema="neon"] .btn.pri { box-shadow: 0 0 24px rgba(163, 230, 53, .35); }
html[data-tema="neon"] .hero-capas img { border-radius: 3px; }

/* ---------- 4. Sakura (ameixa escura, rosa e pêssego, bem arredondado) ---------- */
html[data-tema="sakura"] {
  --bg: #1a1018; --bg2: #221520; --card: #2a1a27; --borda: #3d2838;
  --txt: #fbeef5; --sub: #c4a3b6; --acc: #f472b6; --acc2: #fb923c; --raio: 22px;
  --on-acc: #2a0d1d; --on-acc2: #2a0d1d;
}
html[data-tema="sakura"] body { font-family: "Nunito", system-ui, sans-serif; }
html[data-tema="sakura"] .topo { background: rgba(26, 16, 24, .85); }
html[data-tema="sakura"] .hero::before {
  background: radial-gradient(circle at 30% 50%, rgba(244, 114, 182, .32), transparent 55%),
              radial-gradient(circle at 75% 40%, rgba(251, 146, 60, .22), transparent 50%);
}
html[data-tema="sakura"] .logo { box-shadow: 0 0 22px rgba(244, 114, 182, .5); border-radius: 50%; }
html[data-tema="sakura"] .btn, html[data-tema="sakura"] .topo nav a { border-radius: 999px; }
html[data-tema="sakura"] .btn.pri { box-shadow: 0 8px 24px rgba(244, 114, 182, .35); }
html[data-tema="sakura"] .hero-capas img { border-radius: 20px; }

/* ajustes do tema claro pras cores fixas do style.css */
html[data-tema="papel"] .sinopse, html[data-tema="papel"] .texto-legal p, html[data-tema="papel"] .texto-legal li { color: #3a342c; }
html[data-tema="papel"] .tag { background: rgba(29, 26, 22, .05); border-color: var(--borda); }
html[data-tema="papel"] .seletor option { background: #fffcf6; }
html[data-tema="papel"] .btn.fav.on { color: var(--acc); }
html[data-tema="papel"] input, html[data-tema="papel"] select, html[data-tema="papel"] textarea { color-scheme: light; }
/* o leitor continua escuro no tema claro (ler à noite) */
html[data-tema="papel"] body.leitor { --bg: #08080c; --bg2: #15151f; --card: #1b1b28; --borda: #2a2a3b; --txt: #ecebf5; --sub: #9a98b0; color-scheme: dark; }
html[data-tema="papel"] .serie-topo .fundo { filter: blur(40px) brightness(1.1) saturate(.6); opacity: .45; }
html[data-tema="papel"] .serie-topo .capa-g { box-shadow: 6px 6px 0 rgba(29, 26, 22, .85); border: 2px solid #1d1a16; }

/* ---------- 5. Edgy (preto, vermelho-sangue, cantos cortados, granulado) ---------- */
html[data-tema="edgy"] {
  --bg: #080606; --bg2: #100b0c; --card: #151012; --borda: #2e1b1e;
  --txt: #f3eaea; --sub: #a08c8e; --acc: #dc2626; --acc2: #fb3b55; --raio: 0px;
  --on-acc: #fff; --on-acc2: #fff;
  --corte: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
html[data-tema="edgy"] body { font-family: "Rubik", system-ui, sans-serif; }
html[data-tema="edgy"] *, html[data-tema="edgy"] *::before { border-radius: 0 !important; }
/* granulado de filme por cima de tudo */
html[data-tema="edgy"] body::after {
  content: ""; position: fixed; inset: 0; z-index: 200; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-tema="edgy"] body.leitor::after { display: none; }
html[data-tema="edgy"] h1, html[data-tema="edgy"] h2, html[data-tema="edgy"] h3,
html[data-tema="edgy"] .pc-titulo, html[data-tema="edgy"] .l2-titulo, html[data-tema="edgy"] .g-nome {
  font-family: "Oswald", "Rubik", sans-serif; text-transform: uppercase; letter-spacing: .5px; font-weight: 700;
}
html[data-tema="edgy"] .topo { background: rgba(8, 6, 6, .88); border-bottom-color: #3a1519; }
html[data-tema="edgy"] .logo {
  border-radius: 0; clip-path: var(--corte); box-shadow: none;
  text-shadow: 2px 0 #000, -2px 0 rgba(255, 255, 255, .35);
}
html[data-tema="edgy"] .marca { font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: 1.5px; }
html[data-tema="edgy"] .btn, html[data-tema="edgy"] .chip, html[data-tema="edgy"] .tag, html[data-tema="edgy"] .car-seta { border-radius: 0; }
html[data-tema="edgy"] .btn.pri { clip-path: var(--corte); box-shadow: none; text-transform: uppercase; letter-spacing: 1px; font-weight: 800; }
html[data-tema="edgy"] .btn.pri:hover { filter: brightness(1.15); }
html[data-tema="edgy"] .titulo-sec h2 { display: flex; align-items: center; gap: 12px; }
html[data-tema="edgy"] .titulo-sec h2::before { content: ""; width: 6px; height: 1em; background: var(--acc); transform: skewX(-18deg); flex-shrink: 0; }
html[data-tema="edgy"] .car-info h2 { text-shadow: 3px 3px 0 rgba(220, 38, 38, .55); }
/* capas um pouco dessaturadas, ganham cor no hover */
html[data-tema="edgy"] .obra .capa, html[data-tema="edgy"] .l2-capa img, html[data-tema="edgy"] .pm-capa img, html[data-tema="edgy"] .genero-bloco img {
  filter: grayscale(.45) contrast(1.1); transition: filter .3s, transform .3s;
}
html[data-tema="edgy"] .obra:hover .capa, html[data-tema="edgy"] .lanc2:hover .l2-capa img,
html[data-tema="edgy"] .pop-mini:hover .pm-capa img, html[data-tema="edgy"] .genero-bloco:hover img { filter: none; }
html[data-tema="edgy"] .obra .capa, html[data-tema="edgy"] .car-capa img, html[data-tema="edgy"] .serie-topo .capa-g, html[data-tema="edgy"] .pop-card img { clip-path: var(--corte); border-radius: 0; }
html[data-tema="edgy"] .pop-card.r1 .pc-num { -webkit-text-stroke-color: var(--acc); }
html[data-tema="edgy"] .lista-caps a:hover { border-color: var(--acc); box-shadow: inset 4px 0 0 var(--acc); }
html[data-tema="edgy"] ::selection { background: var(--acc); color: #fff; }

/* ---------- 6. Fofinho (claro, rosinha e lilás, tudo redondinho) ---------- */
html[data-tema="fofinho"] {
  --bg: #fff6fa; --bg2: #ffeef6; --card: #ffffff; --borda: #f7d6e6;
  --txt: #4b2c4f; --sub: #9b7a9e; --acc: #ff7eb6; --acc2: #b69cff; --raio: 24px;
  --on-acc: #4a1036; --on-acc2: #2a1a5e;
  --vip1: #e08a00; --vip2: #c2410c;
  color-scheme: light;
}
html[data-tema="fofinho"] body {
  font-family: "Fredoka", "Nunito", system-ui, sans-serif;
  background:
    radial-gradient(circle, rgba(255, 126, 182, .13) 2px, transparent 2.5px) 0 0 / 26px 26px,
    radial-gradient(circle, rgba(182, 156, 255, .12) 2px, transparent 2.5px) 13px 13px / 26px 26px,
    var(--bg);
}
html[data-tema="fofinho"] h1, html[data-tema="fofinho"] h2, html[data-tema="fofinho"] h3 { font-weight: 700; }
html[data-tema="fofinho"] .topo { background: rgba(255, 246, 250, .9); }
html[data-tema="fofinho"] .logo { border-radius: 50%; box-shadow: 0 6px 18px rgba(255, 126, 182, .45); }
html[data-tema="fofinho"] .btn, html[data-tema="fofinho"] .topo nav a, html[data-tema="fofinho"] .chip, html[data-tema="fofinho"] .seletor, html[data-tema="fofinho"] .busca { border-radius: 999px; }
html[data-tema="fofinho"] .btn { transition: transform .25s cubic-bezier(.34, 1.8, .64, 1), box-shadow .25s; }
html[data-tema="fofinho"] .btn:hover { transform: translateY(-2px) scale(1.04); }
html[data-tema="fofinho"] .btn.pri { box-shadow: 0 6px 0 #f2a6c8, 0 10px 22px rgba(255, 126, 182, .35); }
html[data-tema="fofinho"] .btn.pri:active { transform: translateY(3px); box-shadow: 0 2px 0 #f2a6c8; }
html[data-tema="fofinho"] .titulo-sec h2::before { content: "♡"; width: auto; height: auto; background: none; color: var(--acc); font-size: 26px; line-height: 1; }
html[data-tema="fofinho"] .obra .capa, html[data-tema="fofinho"] .l2-capa img, html[data-tema="fofinho"] .pm-capa,
html[data-tema="fofinho"] .car-capa img, html[data-tema="fofinho"] .serie-topo .capa-g, html[data-tema="fofinho"] .pop-card img {
  border: 4px solid #fff; box-shadow: 0 8px 22px rgba(170, 90, 140, .22);
}
html[data-tema="fofinho"] .obra { transition: transform .3s cubic-bezier(.34, 1.8, .64, 1); }
html[data-tema="fofinho"] .obra:hover { transform: translateY(-4px) rotate(-1.5deg); }
html[data-tema="fofinho"] .obra:nth-child(even):hover { transform: translateY(-4px) rotate(1.5deg); }
html[data-tema="fofinho"] .tag { background: #ffe6f1; border-color: #f7c8dd; color: #8a3a66; }
html[data-tema="fofinho"] .sinopse, html[data-tema="fofinho"] .texto-legal p, html[data-tema="fofinho"] .texto-legal li { color: #6a4a6e; }
html[data-tema="fofinho"] .seletor option { background: #fff; }
html[data-tema="fofinho"] input, html[data-tema="fofinho"] select, html[data-tema="fofinho"] textarea { color-scheme: light; }
html[data-tema="fofinho"] .btn.fav.on { color: var(--acc); }
html[data-tema="fofinho"] .car-fundo { filter: blur(36px) brightness(1.2) saturate(.7); opacity: .45; }
html[data-tema="fofinho"] .selo-car, html[data-tema="fofinho"] .car-seta { background: var(--card); border-color: var(--borda); }
html[data-tema="fofinho"] .selo-car.novo { background: var(--grad); border-color: transparent; color: var(--on-acc); }
html[data-tema="fofinho"] .serie-topo .fundo { filter: blur(40px) brightness(1.2) saturate(.7); opacity: .4; }
html[data-tema="fofinho"] .selo-vip { color: #fff; }
html[data-tema="fofinho"] ::selection { background: #ffd1e6; }
/* o leitor fica escuro (mas ameixa, não preto) */
html[data-tema="fofinho"] body.leitor { --bg: #1d1320; --bg2: #271a2b; --card: #2e2033; --borda: #45304a; --txt: #fbeef7; --sub: #c9a9cf; color-scheme: dark; background: #1d1320; }
html[data-tema="fofinho"] .pop-card::after { background: linear-gradient(90deg, rgba(90, 30, 80, .6), rgba(255, 126, 182, .15) 75%); }
html[data-tema="fofinho"] .pc-fundo { filter: blur(22px) brightness(.7) saturate(1.3); }
html[data-tema="edgy"] .lista-caps a:hover { background: #1f1214; }
html[data-tema="fofinho"] .lista-caps a:hover { background: #ffeaf4; }
/* a tag de status continua destacada nos temas claros */
html[data-tema="papel"] .tag.status, html[data-tema="fofinho"] .tag.status { background: var(--grad); border-color: transparent; color: var(--on-acc); }
html[data-tema="papel"] a.tag:not(.status):hover { border-color: var(--acc); background: rgba(193, 39, 45, .08); }
html[data-tema="fofinho"] a.tag:not(.status):hover { border-color: var(--acc); background: #ffd6e8; }