/* Royal violeta (30/10/2026): noite violeta-negra, violeta #7c3aed, ouro #e9b949 e marfim; azul elétrico só em brilhos. Pôster editorial: palavra gigante atrás da mascote,
   trilhos de texto vertical, arcos de catedral, brasões e flâmulas, estrelas de quatro pontas. Seções numeradas em romano.
   Mesma serifa e mesmo HUD em mono dos testes anteriores. Escuro e claro por seção. */
:root {
  color-scheme: dark;
  --noite: #07080f;
  --noite-2: #100c1f;
  --real: #7c3aed;
  --real-claro: #a78bfa;
  --profundo: #4c1d95;
  --marfim: #f5f2ea;
  --branco: #ffffff;
  --ouro: #e9b949;
  --ouro-claro: #f3d27a;
  --buff: #2fae79;
  --buff-neon: #6ff0b8;
  --nerf: #d93a4a;
  --serifa: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --fluida: cubic-bezier(.16, 1, .3, 1);
  --saida: cubic-bezier(.22, 1, .36, 1);
  --mola: cubic-bezier(.34, 1.4, .64, 1);
  --arco: 999px 999px 4px 4px;
  --brasao: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%);
  --flamula: polygon(0 0, 100% 0, calc(100% - 22px) 50%, 100% 100%, 0 100%, 22px 50%);
}
* { box-sizing: border-box; }
html, body { background: var(--noite); overflow-x: clip; }
body { margin: 0; color: var(--marfim); font: 400 1.0625rem/1.6 var(--serifa); }
:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; }
::selection { background: var(--real); color: var(--branco); }
img { max-width: 100%; display: block; }

.s-noite { --texto: var(--marfim); --suave: #9aa0bd; --linha: rgba(245,242,234,.12); --painel: var(--noite-2); --acento: var(--real-claro); background: var(--noite); color: var(--texto); }
.s-marfim { --texto: #110b22; --suave: #555a72; --linha: rgba(11,13,26,.14); --painel: var(--branco); --acento: var(--real); background: var(--marfim); color: var(--texto); color-scheme: light; }
.s-real { --texto: var(--branco); --suave: #c4b5fd; --linha: rgba(255,255,255,.2); --painel: rgba(7,8,15,.35); --acento: var(--ouro-claro); background: var(--real); color: var(--texto); }
.s-profundo { --texto: var(--marfim); --suave: #c4b5fd; --linha: rgba(245,242,234,.14); --painel: rgba(255,255,255,.04); --acento: var(--ouro); background: var(--profundo); color: var(--texto); }
.miolo { max-width: 1180px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
section { position: relative; }
.secao { padding-block: 104px; }
@media (max-width: 700px) { .secao { padding-block: 68px; } }

/* Cabeçalho de seção: numeral romano + filete duplo dourado */
.capitulo { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px; margin: 0 0 26px; font: 500 .72rem var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--suave); }
.capitulo b { font: italic 500 1.6rem/1 var(--serifa); letter-spacing: 0; color: var(--acento); text-transform: none; }
.capitulo span { display: flex; align-items: center; gap: 14px; }
.capitulo span::after { content: ""; flex: 1; height: 5px; border-block: 1px solid var(--ouro); opacity: .6; }
h1, h2, h3 { margin: 0; font-family: var(--serifa); font-weight: 600; letter-spacing: -.03em; text-wrap: balance; }
h2 { font-size: clamp(2.3rem, 5vw, 4rem); line-height: 1; }
h2 em, h1 em { font-style: italic; font-weight: 500; color: var(--acento); }
.lide { margin: 0; max-width: 52ch; color: var(--suave); font-size: 1.1rem; }
.estrela { display: inline-block; width: 14px; height: 14px; color: var(--ouro); flex: none; }

/* Botões: pílula com estrela que gira */
.botao { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 24px; border-radius: 999px; font: 700 .76rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; cursor: pointer; border: 0; overflow: hidden; isolation: isolate; transition: transform .5s var(--mola), color .4s; }
.botao svg { width: 14px; height: 14px; transition: transform .8s var(--mola); }
.botao:hover svg { transform: rotate(180deg) scale(1.2); }
.botao::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--branco); transform: scale(0); transition: transform .6s var(--fluida); }
.botao:hover::before { transform: scale(1.5); }
.botao.real { background: var(--real); color: var(--branco); }
.botao.real:hover { color: var(--real); }
.botao.linha { background: transparent; color: var(--texto); box-shadow: inset 0 0 0 1.5px var(--linha), inset 0 0 0 1.5px currentColor; }
.botao.linha:hover { color: var(--noite); }
.botao.noite { background: var(--noite); color: var(--branco); }
.botao.noite:hover { color: var(--noite); }

/* Barra */
.barra { position: sticky; top: 0; z-index: 40; padding-top: env(safe-area-inset-top, 0px); background: rgba(7,8,15,.8); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(233,185,73,.18); }
.barra .miolo { display: flex; align-items: center; gap: 18px; min-height: 64px; }
.marca { display: flex; align-items: center; gap: 10px; color: var(--marfim); text-decoration: none; font: 600 1.3rem/1 var(--serifa); letter-spacing: -.02em; }
.marca i { font-style: italic; color: var(--real-claro); }
.marca svg { width: 16px; height: 16px; color: var(--ouro); animation: gira 12s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.links { display: flex; gap: 6px; margin-left: auto; font: 500 .72rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.links a { padding: 8px 12px; border-radius: 999px; color: #b8bdd6; text-decoration: none; transition: background .4s var(--fluida), color .3s; }
.links a:hover { background: rgba(167,139,250,.16); color: var(--branco); }
.busca { position: relative; }
.busca input { width: 210px; min-height: 40px; padding: 8px 14px 8px 34px; border-radius: 999px; font: 400 .78rem var(--mono); color: var(--marfim); background: rgba(245,242,234,.06); border: 1px solid rgba(245,242,234,.14); transition: width .6s var(--fluida), border-color .3s; }
.busca input:focus { outline: none; width: 260px; border-color: var(--real-claro); }
.busca input::placeholder { color: #8b90ad; }
.busca svg { position: absolute; left: 12px; top: 50%; width: 14px; height: 14px; translate: 0 -50%; color: #8b90ad; }
@media (max-width: 900px) { .links { display: none; } .busca { margin-left: auto; } }
@media (max-width: 460px) { .busca input, .busca input:focus { width: 150px; } }

/* Hero: palavra gigante atrás da mascote */
.hero { overflow: hidden; background: radial-gradient(700px 520px at 62% 55%, rgba(124,58,237,.38), transparent 70%), #000; }
.hero .miolo { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: center; min-height: min(840px, calc(100vh - 64px)); padding-block: 40px; }
@media (max-width: 960px) { .hero .miolo { grid-template-columns: minmax(0, 1fr); min-height: 0; } }
.trilho { writing-mode: vertical-rl; transform: rotate(180deg); justify-self: center; display: flex; align-items: center; gap: 16px; font: 500 .7rem var(--mono); letter-spacing: .32em; text-transform: uppercase; color: #8b90ad; }
.trilho::before { content: ""; width: 1px; height: 90px; background: linear-gradient(var(--ouro), transparent); }
@media (max-width: 960px) { .trilho { display: none; } }
.texto-hero { position: relative; z-index: 3; display: grid; gap: 22px; }
.texto-hero > * { opacity: 0; transform: translateY(22px); animation: entra .9s var(--fluida) forwards; animation-delay: calc(var(--i, 0) * 110ms + 100ms); }
@keyframes entra { to { opacity: 1; transform: none; } }
.sobre { display: flex; align-items: center; gap: 12px; margin: 0; font: 500 .72rem var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ouro); }
.sobre::after { content: ""; width: 120px; height: 1px; background: var(--ouro); opacity: .7; }
.titulo-hero { margin: 0; font: 600 clamp(3.4rem, 8.6vw, 7.2rem)/.88 var(--serifa); letter-spacing: -.05em; color: var(--branco); }
.titulo-hero .ds { position: relative; display: inline-block; font-style: italic; font-weight: 500; color: var(--real-claro); animation: tremor 6s steps(1) infinite 2s; }
.titulo-hero .ds::before, .titulo-hero .ds::after { content: "HS"; position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.titulo-hero .ds::before { color: var(--ouro-claro); animation: falha-a 6s steps(1) infinite 2s; }
.titulo-hero .ds::after { color: var(--branco); animation: falha-b 6s steps(1) infinite 2s; }
@keyframes tremor { 0%, 91%, 95.5%, 100% { transform: none; } 92% { transform: translate(-3px, 1px); } 94% { transform: translate(2px, -1px); } }
@keyframes falha-a { 0%, 91%, 95.5%, 100% { opacity: 0; } 92% { opacity: .8; clip-path: inset(8% 0 58%); transform: translate(-7px, 2px); } 94% { opacity: .8; clip-path: inset(60% 0 10%); transform: translate(5px, -1px); } }
@keyframes falha-b { 0%, 91%, 95.5%, 100% { opacity: 0; } 92.5% { opacity: .7; clip-path: inset(58% 0 8%); transform: translate(6px, -2px); } 94.5% { opacity: .7; clip-path: inset(20% 0 55%); transform: translate(-4px, 1px); } }
.lema { margin: 0; font: italic 500 clamp(1.4rem, 2.6vw, 2rem)/1.15 var(--serifa); color: var(--marfim); }
.lema b { font-style: normal; font-weight: 600; color: var(--ouro-claro); }
.texto-hero .lide { color: #aeb3cc; }
.botoes { display: flex; flex-wrap: wrap; gap: 12px; }
.virtudes { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; font: 500 .68rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #8b90ad; }
.virtudes li { display: flex; align-items: center; gap: 8px; }
.virtudes svg { width: 10px; height: 10px; color: var(--ouro); }

.cena { --px: 0; --py: 0; position: relative; align-self: stretch; min-height: 560px; display: grid; place-items: end center; }
@media (max-width: 960px) { .cena { min-height: 520px; } }
.palavra { position: absolute; right: 0; top: 8%; z-index: 0; display: grid; justify-items: end; font: 600 clamp(5rem, 10.5vw, 10rem)/.8 var(--serifa); letter-spacing: -.06em; user-select: none; pointer-events: none; }
.palavra span { display: block; opacity: 0; animation: palavra 1.2s var(--fluida) forwards; }
.palavra span:nth-child(1) { color: var(--branco); animation-delay: .2s; transform: translate3d(calc(var(--px) * -14px), 0, 0); }
.palavra span:nth-child(2) { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.55); animation-delay: .35s; transform: translate3d(calc(var(--px) * -24px), 0, 0); }
.palavra span:nth-child(3) { color: transparent; -webkit-text-stroke: 1.5px rgba(167,139,250,.6); animation-delay: .5s; transform: translate3d(calc(var(--px) * -34px), 0, 0); }
@keyframes palavra { from { opacity: 0; } to { opacity: 1; } }
.joana { position: relative; z-index: 2; width: min(100%, 470px); opacity: 0; animation: chega 1.4s var(--fluida) .45s forwards; }
@keyframes chega { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
.joana .imagem { animation: flutua 8s ease-in-out infinite; transform: translate3d(calc(var(--px) * 8px), calc(var(--py) * 5px), 0); transition: transform 1.2s var(--fluida); }
@keyframes flutua { 50% { translate: 0 -10px; } }
.joana img { width: 100%; mix-blend-mode: lighten; --m1: linear-gradient(90deg, transparent, #000 22%, #000 80%, transparent); --m2: linear-gradient(180deg, transparent, #000 14%, #000 78%, transparent); -webkit-mask-image: var(--m1), var(--m2); -webkit-mask-composite: source-in; mask-image: var(--m1), var(--m2); mask-composite: intersect; }
.varredura { position: absolute; left: 8%; right: 8%; z-index: 3; height: 2px; background: linear-gradient(90deg, transparent, var(--real-claro), transparent); box-shadow: 0 0 18px var(--real-claro); opacity: 0; animation: varre 8s var(--saida) infinite 2.5s; pointer-events: none; }
@keyframes varre { 0% { opacity: 0; top: 12%; } 4% { opacity: .9; } 24% { opacity: .9; top: 88%; } 28%, 100% { opacity: 0; top: 88%; } }
.brilho-estrela { position: absolute; z-index: 3; color: var(--branco); filter: drop-shadow(0 0 12px rgba(255,255,255,.8)); animation: cintila 3.6s ease-in-out infinite; }
.brilho-estrela.e1 { width: 54px; height: 54px; left: 4%; bottom: 40%; }
.brilho-estrela.e2 { width: 26px; height: 26px; right: 10%; top: 28%; color: var(--ouro-claro); animation-delay: 1.2s; }
.brilho-estrela.e3 { width: 18px; height: 18px; left: 18%; top: 18%; color: var(--real-claro); animation-delay: 2.1s; }
@keyframes cintila { 0%, 100% { transform: scale(.7) rotate(0); opacity: .5; } 50% { transform: scale(1.1) rotate(45deg); opacity: 1; } }
.fala { position: absolute; z-index: 4; right: 0; top: auto; bottom: 9%; max-width: 230px; padding: 12px 16px 12px 30px; font: 400 .76rem/1.5 var(--mono); color: var(--noite); background: var(--marfim); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 14px 50%); }
.fala small { display: block; margin-bottom: 3px; color: var(--real); letter-spacing: .14em; text-transform: uppercase; font-size: .62rem; font-weight: 700; }
.cursor { display: inline-block; width: .55em; height: 1em; vertical-align: -2px; margin-left: 2px; background: var(--real); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.legenda { position: absolute; z-index: 4; left: 0; bottom: 14%; display: grid; gap: 2px; padding-left: 12px; border-left: 2px solid var(--ouro); }
.legenda b { font: italic 500 1.25rem/1 var(--serifa); color: var(--branco); }
.legenda small { font: 500 .62rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #8b90ad; }
@media (max-width: 960px) { .fala { bottom: 6%; right: 0; } .legenda { bottom: 34%; } .palavra { right: 50%; translate: 50% 0; justify-items: center; } }

/* Estandarte: faixa reta com pontas de flâmula */
.estandarte { position: relative; z-index: 5; margin-inline: -24px; padding-block: 0; background: var(--real); color: var(--branco); clip-path: var(--flamula); overflow: hidden; }
.estandarte.marfim { background: var(--marfim); color: var(--profundo); }
.estandarte .faixa { display: flex; width: max-content; animation: rola 40s linear infinite; }
.estandarte.marfim .faixa { animation-direction: reverse; }
.estandarte span { display: flex; align-items: center; gap: 22px; padding: 16px 11px; font: 500 1.05rem/1 var(--serifa); font-style: italic; white-space: nowrap; }
.estandarte span svg { width: 12px; height: 12px; color: var(--ouro-claro); }
.estandarte.marfim span svg { color: var(--ouro); }
@keyframes rola { to { transform: translateX(-50%); } }

/* I · Último patch (marfim) */
.dupla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
@media (max-width: 900px) { .dupla { grid-template-columns: minmax(0, 1fr); gap: 36px; } }
.coluna { display: grid; gap: 24px; }
.medalhas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.medalha { display: grid; justify-items: center; gap: 6px; padding: 26px 10px 20px; background: var(--branco); border-radius: var(--arco); box-shadow: inset 0 0 0 1px var(--linha); text-align: center; }
.medalha svg { width: 18px; height: 18px; }
.medalha b { font: 600 3rem/1 var(--serifa); letter-spacing: -.03em; font-variant-numeric: tabular-nums lining-nums; }
.medalha small { font: 500 .64rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--suave); }
.medalha.b svg, .medalha.b b { color: var(--buff); }
.medalha.n svg, .medalha.n b { color: var(--nerf); }
.medalha.a svg, .medalha.a b { color: #a67c14; }
.pergaminho { position: relative; padding: 30px 30px 26px; background: var(--branco); box-shadow: inset 0 0 0 1px var(--linha), 0 30px 60px -40px rgba(13,24,70,.35); }
.pergaminho::before, .pergaminho::after { content: ""; position: absolute; left: 0; right: 0; height: 5px; border-block: 1px solid var(--ouro); }
.pergaminho::before { top: 10px; } .pergaminho::after { bottom: 10px; }
.pergaminho header { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; font: 500 .66rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--suave); }
.pergaminho header b { color: var(--real); }
.pergaminho ol { margin: 0; padding: 0; list-style: none; }
.pergaminho li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--linha); font-size: 1rem; line-height: 1.5; }
.pergaminho li:last-child { border-bottom: 0; }
.pergaminho li svg { width: 12px; height: 12px; margin-top: 7px; color: var(--real); }
.pergaminho footer { margin-top: 10px; font: 400 .7rem var(--mono); color: var(--suave); }

/* II · Cartas (azul real) */
.palco { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 330px); gap: 40px; align-items: center; margin-top: 44px; }
@media (max-width: 900px) { .palco { grid-template-columns: minmax(0, 1fr); } }
.mao { position: relative; height: 320px; }
.mao .mini { all: unset; position: absolute; bottom: 10px; width: 136px; cursor: pointer; transform-origin: 50% 170%; transform: rotate(var(--r)); transition: transform .7s var(--mola), filter .4s; }
.mao .mini:hover, .mao .mini:focus-visible { transform: rotate(var(--r)) translateY(-38px) scale(1.07); z-index: 5; }
.mao .mini[aria-pressed="true"] { filter: drop-shadow(0 0 18px rgba(230,201,131,.85)); }
.mao.viva .mini { animation: leque 1.1s var(--fluida) both; animation-delay: calc(var(--i) * 80ms); }
@keyframes leque { from { opacity: 0; transform: rotate(0deg) translateY(160px) scale(.7); } }
@media (max-width: 560px) {
  .mao { height: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .mao .mini { position: static; width: 100%; transform: none; }
  .mao .mini:hover, .mao .mini:focus-visible { transform: translateY(-6px); }
}
.carta { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; position: relative; aspect-ratio: 5 / 7; width: 100%; max-width: 100%; border-radius: 12px; transform-style: preserve-3d; container-type: inline-size; }
.face { position: absolute; inset: 0; border-radius: inherit; backface-visibility: hidden; overflow: visible; }
.verso { overflow: hidden; }
.frente.com-imagem { background: none; box-shadow: none; }
/* Cobre o vão transparente entre o cristal de mana e a moldura (cartas com Preparar), repetindo a moldura de logo abaixo
   em três faixas, a do meio espelhada; onde a carta é opaca, o remendo não aparece. */
.remendo { display: none; position: absolute; left: 9.4%; top: 13.9%; width: 18.3%; height: 29.3%; pointer-events: none; overflow: hidden; clip-path: polygon(29% 0, 100% 0, 100% 100%, 0 100%, 0 10%, 29% 10%); }
.remendo span { position: absolute; left: 0; width: 100%; height: 33.4%; background-repeat: no-repeat; background-size: 546.4% auto; background-position: 11.5% 48.8%; }
.remendo span:nth-child(1) { top: 0; } .remendo span:nth-child(2) { top: 33.3%; transform: scaleY(-1); } .remendo span:nth-child(3) { top: 66.6%; }
.frente.com-imagem .remendo { display: block; }
.frente { display: grid; grid-template-rows: 52% auto 1fr; background: linear-gradient(165deg, #1a2350, #07080f 62%); box-shadow: inset 0 0 0 1px var(--ouro), inset 0 0 0 4px #07080f, inset 0 0 0 5px rgba(233,185,73,.4), 0 26px 34px -14px rgba(0,0,0,.75), 0 10px 14px -6px rgba(0,0,0,.45); }
.arte { position: relative; margin: 8% 8% 0; border-radius: 50% 50% 6px 6px / 36% 36% 6px 6px; overflow: hidden; box-shadow: 0 0 0 1px var(--ouro); }
.arte canvas { width: 100%; height: 100%; }
.arte svg { position: absolute; inset: 0; margin: auto; width: 42%; height: 42%; color: #fff; filter: drop-shadow(0 0 10px var(--c)); }
.faixa-nome { position: relative; z-index: 2; margin: -8% 3% 0; padding: 4% 9%; text-align: center; background: var(--marfim); color: #110b22; clip-path: var(--flamula); font: italic 600 clamp(.6rem, 4.8cqi, 1.1rem)/1.1 var(--serifa); text-wrap: balance; }
.caixa { margin: 5% 9% 18%; padding: 5%; display: grid; place-items: center; text-align: center; font: 400 clamp(.5rem, 3.8cqi, .92rem)/1.35 var(--serifa); color: #d8dbe8; }
.caixa b { font-weight: 600; color: #fff; }
.gema { position: absolute; z-index: 3; display: grid; place-items: center; width: 22%; aspect-ratio: 1; font: 700 clamp(.8rem, 9cqi, 1.8rem)/1 var(--mono); color: #fff; text-shadow: 0 1px 0 #000; transition: transform .6s var(--mola); }
.gema svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.gema.custo { top: -3%; left: -4%; } .gema.ataque { bottom: -2%; left: -4%; } .gema.vida { bottom: -2%; right: -4%; }
.gema[data-mudou="buff"] { color: var(--buff-neon); text-shadow: 0 0 10px var(--buff-neon); }
.gema[data-mudou="nerf"] { color: #ff9a94; text-shadow: 0 0 10px var(--nerf); }
.gema.pula { animation: pula .7s var(--mola); }
@keyframes pula { 40% { transform: scale(1.4); } }
.brilho { position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none; opacity: 0; mix-blend-mode: screen; transition: opacity .4s; background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.32), transparent 42%), linear-gradient(115deg, transparent 30%, rgba(230,201,131,.28) 45%, rgba(167,139,250,.26) 58%, transparent 72%); background-size: 100% 100%, 240% 240%; background-position: 0 0, var(--mx) var(--my); }
.verso { transform: rotateY(180deg); background: none; box-shadow: none; overflow: visible; }
/* A imagem oficial da frente (404 x 558) tem margem transparente: a carta visível ocupa x 3,96% a 88,61% e y 6,68% a 91,19% da face.
   O verso repete esse retângulo, espelhado em x porque a face gira sobre o centro, para virar sem mudar de tamanho. */
.verso img { position: absolute; inset: auto; left: 11.39%; top: 6.68%; width: 84.65%; height: 84.51%; object-fit: fill; filter: drop-shadow(0 10px 14px rgba(0,0,0,.5)); }
.foco { display: grid; gap: 16px; justify-items: center; perspective: 1100px; }
.foco .carta { width: min(100%, 290px); cursor: pointer; transform: rotateX(var(--rx)) rotateY(calc(var(--ry) + var(--vira, 0deg))); transition: transform .9s var(--fluida); }
.foco .carta.segue { transition: transform .12s linear; }
.foco .carta:hover .brilho, .foco .carta.segue .brilho { opacity: 1; }
.foco .carta.virada { --vira: 180deg; }
.foco .carta.troca { animation: troca .6s var(--fluida); }
@keyframes troca { 30% { filter: brightness(1.7) hue-rotate(20deg); } }
.segmento { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(7,8,15,.3); }
.segmento button { all: unset; cursor: pointer; min-height: 36px; padding: 6px 16px; border-radius: 999px; font: 700 .7rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--suave); transition: background .4s var(--fluida), color .4s; }
.segmento button[aria-pressed="true"] { background: var(--branco); color: var(--real); }
.segmento button:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }
.mudancas { margin: 0; padding: 0; list-style: none; width: min(100%, 320px); font: 400 .8rem var(--mono); }
.mudancas li { display: flex; gap: 10px; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--linha); }
.mudancas svg { width: 12px; height: 12px; flex: none; }
.mudancas s { color: var(--suave); }

/* III · Histórico (marfim): linha do tempo com marcos */
.tempo { list-style: none; margin: 40px 0 0; padding: 0 0 0 28px; position: relative; display: grid; gap: 14px; }
.tempo::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(var(--ouro), rgba(233,185,73,.15)); }
.marco { position: relative; display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 18px 22px; background: var(--branco); box-shadow: inset 0 0 0 1px var(--linha); border-radius: 0 18px 18px 0; cursor: pointer; transition: transform .6s var(--mola), box-shadow .4s; }
.marco::before { content: ""; position: absolute; left: -27px; top: 50%; width: 14px; height: 14px; translate: 0 -50%; background: var(--marfim); border: 1px solid var(--ouro); transform: rotate(45deg); transition: background .4s; }
.marco:hover { transform: translateX(6px); box-shadow: inset 0 0 0 1px var(--real), 0 20px 40px -30px rgba(13,24,70,.5); }
.marco:hover::before { background: var(--real); }
.marco time { font: 400 .74rem var(--mono); color: var(--suave); }
.marco b { font: 600 1.25rem/1.15 var(--serifa); }
.marco small { display: block; font: 500 .68rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--real); margin-top: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.chip { padding: 3px 10px; border-radius: 999px; font: 700 .66rem var(--mono); letter-spacing: .04em; white-space: nowrap; }
.chip.b { background: rgba(47,174,121,.12); color: var(--buff); } .chip.n { background: rgba(214,69,61,.1); color: var(--nerf); } .chip.a { background: rgba(233,185,73,.16); color: #8a6a2c; }
@media (max-width: 640px) { .marco { grid-template-columns: minmax(0, 1fr); gap: 8px; } .chips { justify-content: flex-start; } }

/* IV · Como funciona (noite) */
.votos { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--linha); }
@media (max-width: 900px) { .votos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .votos { grid-template-columns: minmax(0, 1fr); } }
.voto { position: relative; display: grid; align-content: start; gap: 12px; padding: 28px 22px 26px; border-bottom: 1px solid var(--linha); }
.voto + .voto { border-left: 1px solid var(--linha); }
@media (max-width: 900px) { .voto:nth-child(3) { border-left: 0; } }
@media (max-width: 520px) { .voto + .voto { border-left: 0; } }
.voto i { font: italic 500 2.6rem/1 var(--serifa); color: var(--acento); }
.voto b { font: 600 1.2rem/1.2 var(--serifa); }
.voto p { margin: 0; font-size: .95rem; color: var(--suave); }
.voto::after { content: ""; position: absolute; left: 22px; right: 22px; top: -1px; height: 2px; background: var(--ouro); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--fluida); }
.voto:hover::after { transform: none; }

/* V · Meta (profundo): brasões */
.brasoes { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 14px; }
.brasao { position: relative; display: grid; justify-items: center; align-content: start; gap: 10px; height: 100%; min-height: 200px; padding: 26px 12px 44px; text-align: center; color: var(--marfim); text-decoration: none; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); clip-path: var(--brasao); transition: background .5s var(--fluida), transform .6s var(--mola); }
.brasao::before { content: ""; position: absolute; inset: 0; clip-path: var(--brasao); background: linear-gradient(180deg, var(--c), transparent 60%); opacity: 0; transition: opacity .5s; }
.brasao > * { position: relative; }
.brasao svg { width: 34px; height: 34px; transition: transform .7s var(--mola), color .4s; }
.brasao span { font: 600 1.05rem/1.15 var(--serifa); }
.brasao small { font: 500 .6rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #c4b5fd; }
.brasao:hover { transform: translateY(-6px); }
.brasao:hover::before { opacity: .35; }
.brasao:hover svg { transform: scale(1.15) rotate(-6deg); }

/* Chamada (marfim) com a mascote ilustrada */
.chamada .miolo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
@media (max-width: 900px) { .chamada .miolo { grid-template-columns: minmax(0, 1fr); } }
.vitral { position: relative; aspect-ratio: 4 / 5; border-radius: var(--arco); overflow: hidden; box-shadow: 0 0 0 1px var(--ouro), 0 0 0 10px var(--marfim), 0 0 0 11px rgba(233,185,73,.5); }
.vitral img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform 1.4s var(--fluida); }
.vitral:hover img { transform: scale(1.05); }
.vitral .raio { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); transform: translateX(-120%); animation: raio 6s var(--saida) infinite 1s; mix-blend-mode: soft-light; }
@keyframes raio { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.gigante { margin: 0; font: 600 clamp(3.2rem, 8vw, 6.4rem)/.88 var(--serifa); letter-spacing: -.05em; }
.gigante em { display: block; font-style: italic; font-weight: 500; color: transparent; -webkit-text-stroke: 1.5px var(--real); }
.chamada .texto { display: grid; gap: 22px; }

/* Perguntas (noite) */
.perguntas { max-width: 780px; margin: 30px auto 0; }
.perguntas details { border-bottom: 1px solid var(--linha); }
.perguntas summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 4px; cursor: pointer; list-style: none; font: 600 1.18rem var(--serifa); }
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary svg { width: 16px; height: 16px; color: var(--ouro); flex: none; transition: transform .7s var(--mola); }
.perguntas details[open] summary svg { transform: rotate(135deg); }
.perguntas p { margin: 0; padding: 0 4px 22px; max-width: 62ch; color: var(--suave); }

/* Rodapé */
.rodape { position: relative; overflow: hidden; padding-block: 40px 0; border-top: 1px solid rgba(233,185,73,.2); }
.rodape .linha-topo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; font: 500 .72rem var(--mono); letter-spacing: .06em; color: #8b90ad; }
.rodape nav { display: flex; flex-wrap: wrap; gap: 20px; }
.rodape a { color: #b8bdd6; text-decoration: none; }
.rodape a:hover { color: var(--ouro-claro); }
.credito { margin: 16px 0 0; font: 400 .68rem var(--mono); color: #6c7190; }
.assinatura { display: grid; justify-items: center; margin-top: 26px; font: 600 clamp(4rem, 15vw, 13rem)/.8 var(--serifa); letter-spacing: -.06em; user-select: none; }
.assinatura span:nth-child(1) { color: transparent; -webkit-text-stroke: 1px rgba(167,139,250,.5); }
.assinatura span:nth-child(2) { color: transparent; -webkit-text-stroke: 1px rgba(233,185,73,.35); margin-top: -.12em; clip-path: inset(0 0 45% 0); }


/* IV · Notícias (noite): destaque em arco + lista com filtro por assunto */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 34px 0 0; }
.filtros button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 16px; border-radius: 999px; font: 700 .68rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--suave); box-shadow: inset 0 0 0 1px var(--linha); transition: background .4s var(--fluida), color .3s, box-shadow .3s; }
.filtros button:hover { color: var(--branco); box-shadow: inset 0 0 0 1px var(--real-claro); }
.filtros button[aria-pressed="true"] { background: var(--real); color: var(--branco); box-shadow: none; }
.filtros button:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }
.filtros span { font-weight: 400; opacity: .7; }
.jornal { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; margin-top: 28px; align-items: start; }
@media (max-width: 900px) { .jornal { grid-template-columns: minmax(0, 1fr); } }
.manchete { position: relative; display: grid; gap: 14px; padding: 0 0 26px; background: var(--noite-2); border-radius: 220px 220px 6px 6px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(233,185,73,.35); }
.manchete .capa { position: relative; aspect-ratio: 5 / 4; display: grid; place-items: center; background: radial-gradient(circle at 50% 70%, rgba(167,139,250,.65), transparent 60%), linear-gradient(180deg, #4c1d95, #07080f); overflow: hidden; }
.manchete .capa svg { width: 34%; color: var(--ouro-claro); filter: drop-shadow(0 0 24px rgba(230,201,131,.5)); animation: flutua 7s ease-in-out infinite; }
.manchete .capa::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 4px); }
.manchete > :not(.capa) { margin-inline: 26px; }
.manchete small, .nota small { font: 700 .64rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ouro); }
.manchete h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.1; }
.manchete p { margin: 0; color: var(--suave); }
.manchete .botao { justify-self: start; }
.notas { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linha); }
.nota { border-bottom: 1px solid var(--linha); }
.nota[hidden] { display: none; }
.nota details > summary { display: grid; grid-template-columns: 92px minmax(0, 1fr) 20px; gap: 16px; align-items: center; padding: 18px 6px; cursor: pointer; list-style: none; transition: background .4s var(--fluida), padding .5s var(--fluida); }
.nota details > summary::-webkit-details-marker { display: none; }
.nota details > summary:hover { background: rgba(167,139,250,.08); padding-left: 14px; }
.nota time { font: 400 .72rem var(--mono); color: var(--suave); }
.nota b { display: block; margin-top: 4px; font: 600 1.12rem/1.25 var(--serifa); }
.nota summary > svg { width: 14px; height: 14px; color: var(--ouro); transition: transform .7s var(--mola); }
.nota details[open] summary > svg { transform: rotate(135deg); }
.nota .resumo { margin: 0 6px 20px 114px; padding: 14px 16px; border-left: 2px solid var(--real-claro); background: rgba(255,255,255,.03); font-size: .98rem; color: #c9cde0; }
.nota .resumo em { display: block; margin-top: 8px; font: normal 400 .66rem var(--mono); color: var(--suave); }
@media (max-width: 560px) { .nota details > summary { grid-template-columns: minmax(0, 1fr) 20px; } .nota .resumo { margin-left: 6px; } }
.nota.entra { animation: entra .6s var(--fluida) both; }

@supports (animation-timeline: view()) {
  .revela { animation: revela linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
  @keyframes revela { from { transform: translateY(40px); } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .texto-hero > *, .joana, .palavra span { opacity: 1; transform: none; }
  .varredura { display: none; }
}


/* Páginas: cada área do site é uma página própria, trocada pelo endereço (#/patches, #/cartas...) */
.pagina[hidden] { display: none; }
.pagina.chegou { animation: pagina .8s var(--fluida) both, costura-revela .95s var(--fluida) backwards; }
@keyframes pagina { from { opacity: 0; transform: translateY(18px); } }
.cortina { position: fixed; z-index: 60; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--ouro-claro), var(--real-claro), transparent); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.cortina.corre { animation: cortina .9s var(--fluida); }
@keyframes cortina { 0% { transform: scaleX(0); opacity: 1; } 70% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.links a[aria-current="page"] { background: var(--real); color: var(--branco); }
.menu-movel { display: none; }
@media (max-width: 900px) {
  .menu-movel { display: flex; gap: 4px; overflow-x: auto; padding: 0 max(16px, env(safe-area-inset-left, 0px)) 10px; scrollbar-width: none; font: 500 .68rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
  .menu-movel a { flex: none; padding: 8px 12px; border-radius: 999px; color: #b8bdd6; text-decoration: none; }
  .menu-movel a[aria-current="page"] { background: var(--real); color: var(--branco); }
}

/* Cabeça das páginas internas: título grande + D'arc num arco com a fala do contexto */
.cabeca-pagina { overflow: hidden; background: radial-gradient(600px 380px at 80% 60%, rgba(124,58,237,.35), transparent 70%), #000; }
.cabeca-pagina .miolo { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 32px; align-items: end; padding-block: 64px 0; }
@media (max-width: 760px) { .cabeca-pagina .miolo { grid-template-columns: minmax(0, 1fr); padding-top: 44px; } }
.cabeca-pagina .texto { display: grid; gap: 16px; padding-bottom: 48px; }
.cabeca-pagina h1 { font: 600 clamp(3rem, 8vw, 6.4rem)/.9 var(--serifa); letter-spacing: -.05em; color: var(--branco); }
.cabeca-pagina h1 em { font-style: italic; font-weight: 500; color: var(--real-claro); }
.retrato { position: relative; justify-self: end; width: 230px; aspect-ratio: 4 / 5; border-radius: var(--arco); border-bottom-left-radius: 0; border-bottom-right-radius: 0; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(233,185,73,.5); background: #000; }
.retrato img { width: 100%; height: 100%; object-fit: cover; object-position: 74% 10%; transform: scale(1.2); transform-origin: 74% 20%; }
.retrato .fala { top: auto; bottom: 14px; right: auto; left: -8px; max-width: 220px; }
@media (max-width: 760px) { .retrato { justify-self: start; width: 100%; max-width: 320px; aspect-ratio: 16 / 10; } }

/* Início · I O site: portas para as páginas */
.portas { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .portas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .portas { grid-template-columns: minmax(0, 1fr); } }
.porta { position: relative; display: grid; gap: 10px; height: 100%; align-content: start; padding: 58px 22px 24px; background: var(--branco); border-radius: var(--arco); justify-items: center; text-align: center; box-shadow: inset 0 0 0 1px var(--linha); color: var(--texto); text-decoration: none; transition: transform .6s var(--mola), background .4s, color .4s; overflow: hidden; }
.porta::after { content: ""; position: absolute; left: 22px; right: 22px; transform-origin: center; bottom: 0; height: 3px; background: var(--real); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--fluida); }
.porta:hover { transform: translateY(-6px); }
.porta:hover::after { transform: none; }
.porta i { font: italic 500 1.4rem/1 var(--serifa); color: var(--real); }
.porta b { font: 600 1.5rem/1.1 var(--serifa); }
.porta p { margin: 0; font-size: .95rem; color: var(--suave); }
.porta small { margin-top: 6px; font: 700 .66rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--real); display: flex; align-items: center; gap: 8px; }
.porta small svg { width: 12px; height: 12px; transition: transform .6s var(--mola); }
.porta:hover small svg { transform: translateX(4px); }
.objetivo { margin: 0; max-width: 34ch; font: italic 500 clamp(1.5rem, 3vw, 2.2rem)/1.2 var(--serifa); }
.objetivo b { font-style: normal; color: var(--real); }

/* Brasões como botões */
.brasao { border: 0; cursor: pointer; font: inherit; width: 100%; }
.brasao:focus-visible { outline: 2px solid var(--ouro); outline-offset: 4px; }
.brasao small { color: var(--ouro-claro); }

/* Patches */
.livro { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 40px; align-items: start; }
@media (max-width: 960px) { .livro { grid-template-columns: minmax(0, 1fr); } }
.indice-patches { position: sticky; top: 84px; list-style: none; margin: 0; padding: 0 0 0 24px; display: grid; gap: 6px; max-height: calc(100vh - 110px); overflow: auto; scrollbar-width: thin; }
.indice-patches::before { content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 1px; background: linear-gradient(var(--ouro), rgba(233,185,73,.1)); }
@media (max-width: 960px) { .indice-patches { position: static; max-height: none; display: flex; overflow-x: auto; padding: 0 0 8px; gap: 8px; } .indice-patches::before { display: none; } }
.indice-patches a { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 12px 14px; border-radius: 0 14px 14px 0; color: var(--texto); text-decoration: none; transition: background .4s var(--fluida), transform .5s var(--mola); }
@media (max-width: 960px) { .indice-patches li { flex: none; } .indice-patches a { min-width: 118px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--linha); } }
.indice-patches a::before { content: ""; position: absolute; left: -23px; top: 50%; width: 10px; height: 10px; translate: 0 -50%; transform: rotate(45deg); background: var(--marfim); border: 1px solid var(--ouro); transition: background .3s; }
@media (max-width: 960px) { .indice-patches a::before { display: none; } }
.indice-patches a:hover { background: rgba(124,58,237,.07); transform: translateX(4px); }
.indice-patches a[aria-current="true"] { background: var(--real); color: var(--branco); }
.indice-patches a[aria-current="true"]::before { background: var(--real); }
.indice-patches b { font: 600 1.15rem/1.1 var(--serifa); }
.indice-patches time { grid-column: 1; font: 400 .68rem var(--mono); opacity: .7; }
.indice-patches .conta { grid-row: 1 / 3; grid-column: 2; align-self: center; font: 700 .66rem var(--mono); opacity: .8; }
.detalhe { display: grid; gap: 30px; min-width: 0; }
.detalhe-topo { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; }
.detalhe-topo h2 em { color: var(--real); }
.oficial { font: 500 .72rem var(--mono); letter-spacing: .08em; color: var(--real); }
.vazio { padding: 26px; background: var(--branco); box-shadow: inset 0 0 0 1px var(--linha); color: var(--suave); }
.mesa { background: var(--real); color: var(--branco); padding: 34px 30px; border-radius: 26px; --texto: var(--branco); --suave: #c4b5fd; --linha: rgba(255,255,255,.2); }
.mesa .palco { margin-top: 0; }
.mesa .mao { height: 300px; }
.mesa .mao.muitas { height: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; }
.mesa .mao.muitas .mini { position: static; width: 100%; transform: none; }
.mesa .mao.muitas .mini:hover, .mesa .mao.muitas .mini:focus-visible { transform: translateY(-6px) scale(1.04); }
.mesa .mao.muitas.viva .mini { animation-name: entra; }
.aviso-arte { margin: 14px 0 0; font: 400 .7rem var(--mono); color: #c4b5fd; text-align: center; }

/* Cartas */
.ferramentas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.ferramentas .filtros { margin: 0; }
.campo { min-height: 44px; min-width: min(100%, 280px); padding: 10px 16px; border-radius: 999px; border: 1px solid var(--linha); background: var(--branco); color: var(--texto); font: 400 .9rem var(--mono); }
.campo:focus { outline: none; border-color: var(--real); }
.grade-cartas { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 22px 18px; }
.grade-cartas li[hidden] { display: none; }
.grade-cartas button { all: unset; display: grid; gap: 10px; width: 100%; cursor: pointer; transition: transform .6s var(--mola); }
.grade-cartas button:hover { transform: translateY(-8px) rotate(-1deg); }
.grade-cartas button:focus-visible { outline: 2px solid var(--real); outline-offset: 4px; border-radius: 12px; }
.grade-cartas button { padding-bottom: 6px; }
.grade-cartas .rotulo { margin-top: 12px;  display: flex; justify-content: space-between; gap: 8px; font: 500 .66rem var(--mono); letter-spacing: .06em; color: var(--suave); }
.grade-cartas .rotulo b { text-transform: uppercase; letter-spacing: .1em; }
.t-buffs { color: var(--buff) !important; } .t-nerfs { color: var(--nerf) !important; } .t-alteradas { color: #a67c14 !important; }

/* Janelas (carta e decks) */
.janela { width: min(100% - 32px, 760px); max-height: calc(100vh - 40px); padding: 0; border: 0; border-radius: 26px; background: var(--noite-2); color: var(--marfim); box-shadow: 0 0 0 1px rgba(233,185,73,.35), 0 40px 120px -20px #000; overflow: auto; }
.janela::backdrop { background: rgba(3,4,10,.72); backdrop-filter: blur(6px); }
.janela[open] { animation: janela .6s var(--fluida); }
@keyframes janela { from { opacity: 0; transform: translateY(24px) scale(.97); } }
.janela .topo { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; background: rgba(14,17,32,.92); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(245,242,234,.1); }
.janela .topo b { font: 600 1.4rem/1.1 var(--serifa); display: flex; align-items: center; gap: 12px; }
.janela .topo b svg { width: 28px; height: 28px; }
.fechar { all: unset; cursor: pointer; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(245,242,234,.2); font: 400 1.3rem/1 var(--mono); transition: transform .5s var(--mola), background .3s; }
.fechar:hover { transform: rotate(90deg); background: rgba(255,255,255,.08); }
.fechar:focus-visible { outline: 2px solid var(--ouro); }
.janela .corpo { padding: 24px 22px 28px; display: grid; gap: 20px; --texto: var(--marfim); --suave: #9aa0bd; --linha: rgba(245,242,234,.12); }
.formatos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.formatos button { all: unset; cursor: pointer; display: grid; gap: 6px; padding: 22px 20px; border-radius: 160px 160px 14px 14px; text-align: center; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(245,242,234,.14); transition: background .4s var(--fluida), box-shadow .3s, transform .5s var(--mola); }
.formatos button:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--real-claro); }
.formatos button[aria-pressed="true"] { background: var(--real); box-shadow: inset 0 0 0 1px var(--ouro); }
.formatos button:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }
.formatos b { font: 600 1.4rem/1 var(--serifa); }
.formatos small { font: 500 .64rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #c4b5fd; }
.decks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: deck; }
.deck { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px rgba(245,242,234,.1); animation: deck-entra .7s var(--fluida) both; animation-delay: calc(var(--i) * 80ms + 60ms); }
@keyframes deck-entra { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } }
.decks { transition: opacity .28s ease, transform .32s var(--fluida), filter .28s ease; }
.decks.saindo { opacity: 0; transform: translateY(-8px); filter: blur(5px); }
.formatos button { position: relative; overflow: hidden; }
.formatos button::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%); transform: translateX(-120%); pointer-events: none; }
.formatos button[aria-pressed="true"]::after { animation: varre-botao .9s var(--fluida); }
@keyframes varre-botao { to { transform: translateX(120%); } }
.formatos button[aria-pressed="true"] b { animation: pulsa-formato .6s var(--mola); }
@keyframes pulsa-formato { 40% { transform: scale(1.08); } }
.janela .corpo { transition: height .45s var(--fluida); }
.deck::before { counter-increment: deck; content: counter(deck, upper-roman); font: italic 500 1.3rem/1 var(--serifa); color: var(--ouro); text-align: center; }
.deck b { display: block; font: 600 1.05rem/1.2 var(--serifa); }
.deck code { display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 .7rem var(--mono); color: #9aa0bd; }
.copiar { all: unset; text-decoration: none; cursor: pointer; padding: 9px 14px; border-radius: 999px; font: 700 .64rem var(--mono); letter-spacing: .1em; text-transform: uppercase; background: var(--marfim); color: var(--profundo); transition: background .3s, transform .4s var(--mola); white-space: nowrap; }
.copiar:hover { transform: scale(1.05); }
.copiar.ok { background: var(--buff-neon); }
.copiar:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }
@media (max-width: 520px) { .deck { grid-template-columns: 26px minmax(0, 1fr); } .copiar { grid-column: 2; justify-self: start; } }
.nota-fonte { margin: 0; font: 400 .7rem/1.6 var(--mono); color: #8b90ad; }
.janela .foco { perspective: 1100px; }
.janela .carta .brilho { display: none; } /* sem o brilho holográfico na janela de detalhe */
.historico-carta { list-style: none; margin: 0; padding: 0; font: 400 .8rem var(--mono); }
.historico-carta li { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 10px 0; border-bottom: 1px solid rgba(245,242,234,.1); }
.historico-carta a { color: var(--ouro-claro); }
.carta-janela { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 26px; align-items: start; }
@media (max-width: 620px) { .carta-janela { grid-template-columns: minmax(0, 1fr); } }

/* Barra de progresso: mostra onde a pessoa está na página (início, meio, fim) */
.progresso { position: fixed; z-index: 61; left: 0; right: 0; top: 0; height: 3px; pointer-events: none; }
.progresso span { display: block; height: 100%; background: linear-gradient(90deg, var(--real), var(--real-claro) 70%, var(--ouro-claro)); box-shadow: 0 0 12px rgba(167,139,250,.8); transform: scaleX(var(--p, 0)); transform-origin: left; }
.progresso span::after { content: ""; position: absolute; top: -3px; width: 9px; height: 9px; left: calc(var(--p, 0) * 100% - 5px); background: var(--ouro-claro); transform: rotate(45deg); box-shadow: 0 0 10px var(--ouro-claro); }
.progresso b { position: fixed; top: calc(76px + env(safe-area-inset-top, 0px)); right: 16px; padding: 3px 8px; border-radius: 999px; font: 700 .58rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ouro-claro); background: rgba(7,8,15,.85); box-shadow: inset 0 0 0 1px rgba(233,185,73,.35); opacity: 0; transition: opacity .4s; }
.progresso.mexendo b { opacity: 1; }
@media (max-width: 900px) { .progresso b { top: calc(116px + env(safe-area-inset-top, 0px)); } }

/* Índice de patches: ícones de buff e nerf no lugar das setas */
.indice-patches .conta { display: flex; gap: 8px; }
.indice-patches .conta span { display: inline-flex; align-items: center; gap: 3px; }
.indice-patches .conta svg { width: 11px; height: 11px; }
.indice-patches .conta .cb svg { color: var(--buff); } .indice-patches .conta .cn svg { color: var(--nerf); }
.indice-patches a[aria-current="true"] .cb svg { color: var(--buff-neon); } .indice-patches a[aria-current="true"] .cn svg { color: #ff9a94; }
.indice-patches .conta .zero { opacity: .35; }

/* Marca-texto azul borrado: pinta as palavras importantes quando aparecem */
.mt { position: relative; z-index: 0; display: inline-block; white-space: nowrap; color: inherit; background: none; font-weight: 600; padding: 0 .12em; margin: 0 -.04em; --cor-mt: rgba(150,110,250,.9); }
.mt::before { content: ""; position: absolute; z-index: -1; left: -.22em; right: -.3em; top: .1em; bottom: -.04em; background: var(--cor-mt); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-5%25' y='-20%25' width='110%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .06' numOctaves='3' seed='1'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='7'/%3E%3CfeGaussianBlur stdDeviation='.6'/%3E%3C/filter%3E%3Cg filter='url%28%23f%29'%3E%3Cpath d='M6 12 C40 6 90 9 150 7 C170 6 188 8 196 11 L193 30 C160 34 120 31 70 33 C40 34 18 32 4 29 Z' fill='%23000' fill-opacity='.62'/%3E%3Cpath d='M150 8 C172 7 190 10 196 12 L194 29 C175 31 160 31 148 30 Z' fill='%23000' fill-opacity='.35'/%3E%3Cpath d='M10 20 L190 18' stroke='%23000' stroke-opacity='.18' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-5%25' y='-20%25' width='110%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .06' numOctaves='3' seed='1'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='7'/%3E%3CfeGaussianBlur stdDeviation='.6'/%3E%3C/filter%3E%3Cg filter='url%28%23f%29'%3E%3Cpath d='M6 12 C40 6 90 9 150 7 C170 6 188 8 196 11 L193 30 C160 34 120 31 70 33 C40 34 18 32 4 29 Z' fill='%23000' fill-opacity='.62'/%3E%3Cpath d='M150 8 C172 7 190 10 196 12 L194 29 C175 31 160 31 148 30 Z' fill='%23000' fill-opacity='.35'/%3E%3Cpath d='M10 20 L190 18' stroke='%23000' stroke-opacity='.18' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%; transform: rotate(var(--giro, -1.2deg)) skewX(-6deg); clip-path: inset(0 100% 0 0); transition: clip-path .75s cubic-bezier(.55,.1,.3,1); transition-delay: calc(var(--k, 0) * 140ms + 250ms); }
.mt.mt2::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-5%25' y='-20%25' width='110%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .06' numOctaves='3' seed='4'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='7'/%3E%3CfeGaussianBlur stdDeviation='.6'/%3E%3C/filter%3E%3Cg filter='url%28%23f%29'%3E%3Cpath d='M3 10 C50 13 100 6 160 9 C178 10 192 9 198 13 L195 31 C150 29 100 35 50 31 C30 30 14 34 2 31 Z' fill='%23000' fill-opacity='.62'/%3E%3Cpath d='M3 11 C20 10 30 11 40 12 L42 31 C30 32 15 33 3 31 Z' fill='%23000' fill-opacity='.3'/%3E%3Cpath d='M8 24 L194 25' stroke='%23000' stroke-opacity='.15' stroke-width='4'/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-5%25' y='-20%25' width='110%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .06' numOctaves='3' seed='4'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='7'/%3E%3CfeGaussianBlur stdDeviation='.6'/%3E%3C/filter%3E%3Cg filter='url%28%23f%29'%3E%3Cpath d='M3 10 C50 13 100 6 160 9 C178 10 192 9 198 13 L195 31 C150 29 100 35 50 31 C30 30 14 34 2 31 Z' fill='%23000' fill-opacity='.62'/%3E%3Cpath d='M3 11 C20 10 30 11 40 12 L42 31 C30 32 15 33 3 31 Z' fill='%23000' fill-opacity='.3'/%3E%3Cpath d='M8 24 L194 25' stroke='%23000' stroke-opacity='.15' stroke-width='4'/%3E%3C/g%3E%3C/svg%3E"); --giro: .8deg; top: .18em; }
.mt.mt3::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-5%25' y='-20%25' width='110%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .06' numOctaves='3' seed='4'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='7'/%3E%3CfeGaussianBlur stdDeviation='.6'/%3E%3C/filter%3E%3Cg filter='url%28%23f%29'%3E%3Cpath d='M8 13 C60 8 110 12 165 8 C182 7 194 12 197 14 L196 28 C170 33 130 29 85 32 C50 34 22 30 5 32 Z' fill='%23000' fill-opacity='.62'/%3E%3Cpath d='M90 9 C120 10 150 8 170 8 L172 31 C150 30 120 30 92 31 Z' fill='%23000' fill-opacity='.22'/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-5%25' y='-20%25' width='110%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .06' numOctaves='3' seed='4'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='7'/%3E%3CfeGaussianBlur stdDeviation='.6'/%3E%3C/filter%3E%3Cg filter='url%28%23f%29'%3E%3Cpath d='M8 13 C60 8 110 12 165 8 C182 7 194 12 197 14 L196 28 C170 33 130 29 85 32 C50 34 22 30 5 32 Z' fill='%23000' fill-opacity='.62'/%3E%3Cpath d='M90 9 C120 10 150 8 170 8 L172 31 C150 30 120 30 92 31 Z' fill='%23000' fill-opacity='.22'/%3E%3C/g%3E%3C/svg%3E"); --giro: -2deg; bottom: .04em; }
.s-noite .mt, .janela .mt { --cor-mt: rgba(167,139,250,1); }
.s-noite .mt::before, .janela .mt::before { top: -.02em; bottom: -.08em; opacity: .85; }
.marcado .mt::before { clip-path: inset(0 0 0 0); }

/* Cartas agrupadas por patch */
.grupo-patch { margin-top: 48px; }
.grupo-patch[hidden] { display: none; }
.grupo-patch > summary { cursor: pointer; list-style: none; transition: border-color .4s; }
.grupo-patch > summary::-webkit-details-marker { display: none; }
.grupo-patch > summary:hover { border-color: var(--real); }
.grupo-patch > summary:focus-visible { outline: 2px solid var(--real); outline-offset: 6px; border-radius: 6px; }
.seta-grupo { width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--linha); position: relative; transition: transform .6s var(--mola), background .3s; flex: none; }
.seta-grupo::before { content: ""; position: absolute; inset: 0; margin: auto; width: 8px; height: 8px; border-right: 2px solid var(--real); border-bottom: 2px solid var(--real); transform: translateY(-2px) rotate(45deg); }
.grupo-patch[open] .seta-grupo { transform: rotate(180deg); background: rgba(124,58,237,.08); }
.grupo-patch:not([open]) > summary { opacity: .75; }
.grupo-patch { overflow: hidden; }
.grupo-patch.fechando .seta-grupo { transform: none; background: none; }
.grupo-patch .grade-cartas li { transition: opacity .45s var(--fluida), transform .6s var(--fluida), filter .45s; transition-delay: calc(var(--d, 0) * 40ms); }
.grupo-patch.fechando .grade-cartas li, .grupo-patch.abrindo-ini .grade-cartas li { opacity: 0; transform: translateY(-18px) scale(.94) rotate(-2deg); filter: blur(4px); }
.recolher .botao { min-height: 40px; padding: 8px 18px; }
.grupo-patch > header, .grupo-patch > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px; padding-bottom: 12px; border-bottom: 1px solid var(--linha); }
.grupo-patch h3 { font: 600 clamp(1.6rem, 3vw, 2.2rem)/1 var(--serifa); }
.grupo-patch h3 em { font-style: italic; font-weight: 500; color: var(--real); }
.grupo-patch time { font: 400 .72rem var(--mono); color: var(--suave); }
.grupo-patch summary a { margin-left: auto; font: 700 .66rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--real); }
.grupo-patch .grade-cartas { margin-top: 22px; }

/* Imagem de cada notícia (no protótipo, capa desenhada no lugar da imagem oficial) */
.capa-noticia { position: relative; overflow: hidden; display: grid; place-items: center; background: var(--fundo-capa); isolation: isolate; }
.capa-noticia::before { content: ""; position: absolute; inset: -20%; z-index: -1; background: radial-gradient(circle at var(--cx) var(--cy), var(--cor-capa), transparent 55%); animation: deriva 14s ease-in-out infinite alternate; }
@keyframes deriva { to { transform: translate(6%, -4%) scale(1.1); } }
.capa-noticia::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 4px); }
.capa-noticia svg { width: 30%; max-width: 120px; color: rgba(255,255,255,.9); filter: drop-shadow(0 0 22px var(--cor-capa)); }
.capa-noticia figcaption { position: absolute; left: 10px; bottom: 8px; z-index: 2; font: 500 .56rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.manchete .capa-noticia { aspect-ratio: 16 / 10; }
.nota details > summary { grid-template-columns: 112px 80px minmax(0, 1fr) 20px; }
.nota .mini-capa { aspect-ratio: 16 / 10; width: 112px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(233,185,73,.3); transition: transform .6s var(--mola); }
.nota .mini-capa svg { width: 34%; }
.nota details > summary:hover .mini-capa { transform: scale(1.05) rotate(-1deg); }
.nota .resumo { margin-left: 214px; }
@media (max-width: 700px) { .nota details > summary { grid-template-columns: 88px minmax(0, 1fr) 20px; row-gap: 2px; align-items: start; } .nota .mini-capa { width: 88px; grid-column: 1; grid-row: 1 / 3; } .nota time { grid-column: 2; grid-row: 1; } .nota summary > div { grid-column: 2; grid-row: 2; } .nota summary > svg { grid-column: 3; grid-row: 1 / 3; } .nota .resumo { margin-left: 6px; } }

/* Entrada de cada aba: letras do título sobem de baixo, como no Início */
.sobe { display: inline-block; white-space: nowrap; overflow: hidden; vertical-align: bottom; padding: .2em .04em .12em; margin: -.2em -.04em -.12em; }
.sobe > span { display: inline-block; transform: translateY(130%); }
.chegou .sobe > span { animation: sobe .9s var(--fluida) forwards; animation-delay: calc(var(--l) * 28ms + 120ms); }
@keyframes sobe { to { transform: none; } }
.chegou .cabeca-pagina .lide, .chegou .cabeca-pagina .sobre { animation: entra .9s var(--fluida) both .5s; }
.chegou .cabeca-pagina .sobre { animation-delay: .05s; }
.chegou .retrato { animation: chega 1.2s var(--fluida) both .25s; }
.chegou .texto-hero > * { animation: entra .9s var(--fluida) forwards; animation-delay: calc(var(--i, 0) * 110ms + 100ms); }
.chegou .joana { opacity: 1; animation: livro-entra 1.6s var(--fluida) both; } /* mesma entrada e mesmo atraso da arte das outras páginas */
.chegou .palavra span { animation: palavra 1.2s var(--fluida) forwards; }
.chegou .palavra span:nth-child(2) { animation-delay: .35s; } .chegou .palavra span:nth-child(3) { animation-delay: .5s; }
@media (prefers-reduced-motion: reduce) { .sobe > span { transform: none; } .mt::before { clip-path: none; } .progresso span::after { display: none; } }

/* Tela inicial com a arte-chave: pôster gótico em azul, D'arc à direita, menu vertical, título gasto com flor-de-lis */
.hero-arte { position: relative; overflow: hidden; min-height: min(900px, calc(100vh - 64px)); display: grid; align-items: center; background: #000; isolation: isolate; }
.arte-fundo { position: absolute; inset: 0; z-index: -2; }
.arte-fundo img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 30%; transform: scale(1.06) translate3d(calc(var(--px, 0) * -10px), calc(var(--py, 0) * -6px), 0); transition: transform 1.4s var(--fluida); animation: livro-entra 1.6s var(--fluida) both; }
@keyframes arte-entra { from { opacity: 0; filter: blur(14px) brightness(.4); scale: 1.08; } }
.hero-arte::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0,0,0,.94) 0, rgba(0,0,0,.78) 30%, rgba(0,0,0,.25) 52%, transparent 66%), linear-gradient(0deg, var(--noite) 0, transparent 22%); }
.hero-arte .miolo { position: relative; z-index: 3; width: 100%; padding-block: 64px 96px; padding-left: max(96px, env(safe-area-inset-left, 0px)); }
.hero-arte .texto-hero { max-width: 640px; gap: 20px; }
.titulo-poster { position: relative; display: grid; justify-items: start; gap: 0; margin: 0; font: 600 clamp(3.6rem, 9vw, 9rem)/.86 var(--serifa); letter-spacing: -.05em; color: #f3efe6; }
.linha-marca { white-space: nowrap; filter: url(#gasto) drop-shadow(0 6px 30px rgba(0,0,0,.6)); }
.lis-apostrofo { display: inline-block; width: .44em; height: .5em; margin: 0 .01em 0 .02em; vertical-align: .36em; color: #f3efe6; }
.linha-marca .sobe + .lis-apostrofo, .lis-apostrofo { position: relative; }
.titulo-poster .ds { margin-top: .02em; font-size: .78em; font-weight: 600; color: #a78bfa; text-shadow: 0 0 24px rgba(167,139,250,.55); transform: skewX(-8deg); }
.riscos { position: absolute; left: -2%; bottom: 2%; width: 56%; height: 44%; pointer-events: none; }
.riscos i { position: absolute; left: 0; height: 2px; background: linear-gradient(90deg, transparent, #fff 12%, #c4b5fd 70%, transparent); box-shadow: 0 0 8px #a78bfa; opacity: .85; transform-origin: left; animation: risco 3.6s steps(1) infinite; }
.riscos i:nth-child(1) { top: 18%; width: 62%; animation-delay: .2s; } .riscos i:nth-child(2) { top: 37%; width: 88%; left: 8%; animation-delay: 1.1s; }
.riscos i:nth-child(3) { top: 55%; width: 40%; left: 30%; animation-delay: 2s; } .riscos i:nth-child(4) { top: 71%; width: 74%; animation-delay: .7s; } .riscos i:nth-child(5) { top: 86%; width: 30%; left: 52%; animation-delay: 2.7s; }
@keyframes risco { 0%, 100% { transform: scaleX(1); opacity: .85; } 12% { transform: translateX(8px) scaleX(.6); opacity: .4; } 14% { transform: translateX(-6px) scaleX(1.1); opacity: 1; } 40% { opacity: .7; } 62% { transform: scaleX(.85) translateX(4px); } }
.trilho-nav { position: absolute; z-index: 4; left: max(22px, env(safe-area-inset-left, 0px)); top: 36px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.trilho-nav .lis-topo { width: 26px; height: 26px; color: #f3efe6; filter: drop-shadow(0 0 10px rgba(167,139,250,.6)); }
.trilho-nav .fio { width: 1px; height: 120px; background: linear-gradient(#f3efe6, rgba(243,239,230,.2)); position: relative; }
.trilho-nav .fio::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 6px; height: 6px; translate: -50% 0; transform: rotate(45deg); background: #f3efe6; }
.trilho-nav .fio.pontos { height: 150px; background: repeating-linear-gradient(rgba(243,239,230,.55) 0 2px, transparent 2px 7px); }
.trilho-nav .fio.pontos::after { top: -4px; bottom: auto; }
.trilho-nav a { align-self: flex-start; font: 500 .66rem var(--mono); letter-spacing: .2em; text-transform: uppercase; color: #cfd2e2; text-decoration: none; padding: 2px 0; transition: color .3s, transform .5s var(--mola); }
.trilho-nav a:hover { color: #fff; transform: translateX(4px); }
.trilho-nav a:hover::before { content: "✦ "; color: var(--real-claro); }
.hero-arte .palavra { left: 37%; right: auto; top: 2%; translate: 0 0; justify-items: start; z-index: 1; font-size: clamp(5rem, 11vw, 11rem); }
.hero-arte .palavra span:nth-child(1) { filter: url(#gasto); }
.hero-arte .palavra span:nth-child(2) { -webkit-text-stroke: 1.5px rgba(196,181,253,.55); }
.hero-arte .palavra span:nth-child(3) { -webkit-text-stroke: 1.5px rgba(167,139,250,.45); }
.hero-arte .brilho-estrela { color: #a78bfa; filter: drop-shadow(0 0 14px rgba(167,139,250,.95)); }
.hero-arte .brilho-estrela.e1 { left: 3%; bottom: 40%; width: 34px; height: 34px; }
.hero-arte .brilho-estrela.e2 { left: 34%; right: auto; top: 46%; width: 30px; height: 30px; color: #fff; }
.hero-arte .brilho-estrela.e3 { left: 33%; top: 24%; width: 16px; height: 16px; }
.hero-arte .brilho-estrela.e4 { right: 4%; top: 7%; width: 40px; height: 40px; animation-delay: 1.7s; }
.hero-arte .varredura { left: 50%; right: 4%; }
.hero-arte .fala { right: 4%; bottom: 8%; z-index: 5; }
.hero-arte .legenda { left: auto; right: calc(4% + 250px); bottom: 10%; z-index: 5; }
.hero-arte .lema { color: #e9e6f2; }
.hero-arte .lide { color: #b9bdd3; max-width: 46ch; }
.chegou .arte-fundo img { animation: livro-entra 1.6s var(--fluida) both; }
@media (max-width: 960px) {
  .hero-arte { align-items: end; min-height: 0; }
  .arte-fundo { bottom: auto; height: 78vh; min-height: 520px; }
  .arte-fundo img { object-position: 82% 20%; }
  .hero-arte::before { background: linear-gradient(0deg, var(--noite) 0, rgba(7,8,15,.96) 34%, rgba(0,0,0,.35) 58%, transparent 75%), linear-gradient(90deg, rgba(0,0,0,.55), transparent 60%); }
  .hero-arte .miolo { padding: 48vh max(20px, env(safe-area-inset-left, 0px)) 72px; padding-right: max(20px, env(safe-area-inset-right, 0px)); }
  .trilho-nav { display: none; }
  .hero-arte .palavra { left: 4%; top: 3%; font-size: 4.6rem; }
  .hero-arte .fala { top: 30vh; bottom: auto; right: 12px; }
  .hero-arte .legenda { display: none; }
  .titulo-poster { font-size: clamp(3.2rem, 15vw, 5.4rem); }
}
@media (prefers-reduced-motion: reduce) { .riscos i { animation: none; } }

/* hero pôster: a arte da Cavaleira Gélida já traz a marca, então o h1 fica só para leitores de tela */
.hero-poster { position: relative; overflow: hidden; background: var(--noite); isolation: isolate; padding-bottom: 72px; }
.poster-fundo { position: absolute; inset: 0 0 auto; aspect-ratio: 1672 / 941; max-height: 100%; z-index: -1; overflow: hidden; }
.poster-fundo img { width: 100%; height: 100%; object-fit: cover; filter: blur(28px) brightness(.45) saturate(1.2); transform: scale(1.15); }
.poster-fundo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--noite) 0, transparent 40%); }
.poster { position: relative; width: min(100%, calc((100vh - 64px) * 1.777)); aspect-ratio: 1672 / 941; margin-inline: auto; }
.poster-arte { position: absolute; inset: 0; overflow: hidden; }
.poster-arte img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.03) translate3d(calc(var(--px, 0) * -8px), calc(var(--py, 0) * -5px), 0); transition: transform 1.4s var(--fluida); animation: livro-entra 1.6s var(--fluida) both; }
.poster::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--noite) 0, transparent 6%, transparent 94%, var(--noite) 100%), linear-gradient(0deg, var(--noite) 0, transparent 16%); }
.brilho-logo { position: absolute; left: 26%; top: 3%; width: 54%; height: 19%; z-index: 2; pointer-events: none; overflow: hidden; -webkit-mask: linear-gradient(#000, #000); }
.brilho-logo::before { content: ""; position: absolute; inset: -20% auto -20% -30%; width: 22%; background: linear-gradient(100deg, transparent, rgba(220,230,255,.55), transparent); mix-blend-mode: screen; transform: skewX(-18deg); animation: brilho-logo 7s 2.4s var(--fluida) infinite; }
@keyframes brilho-logo { 0% { left: -30%; } 30%, 100% { left: 115%; } }
.hero-poster .brilho-estrela { color: #a78bfa; filter: drop-shadow(0 0 12px rgba(167,139,250,.95)); z-index: 2; }
.hero-poster .brilho-estrela.e1 { left: 46%; top: 24%; width: 22px; height: 22px; }
.hero-poster .brilho-estrela.e2 { left: 57.5%; top: 26%; width: 16px; height: 16px; color: #fff; animation-delay: 1.1s; }
.hero-poster .brilho-estrela.e3 { left: 83%; top: 4%; width: 30px; height: 30px; animation-delay: 2s; }
.hero-poster .fala { right: 3%; bottom: 18%; z-index: 5; }
.hero-poster .miolo { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 56px; align-items: end; min-height: 0; padding-block: 28px 0; }
.hero-poster .texto-hero { gap: 16px; }
.hero-poster .lema { color: #e9e6f2; font-size: clamp(1.6rem, 3vw, 2.5rem); }
.hero-poster .lide { color: #b9bdd3; max-width: 52ch; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.chegou .poster-arte img { animation: livro-entra 1.6s var(--fluida) both; }
@media (max-width: 960px) {
  .hero-poster { padding-bottom: 56px; }
  .poster { width: 100%; }
  .poster::after { background: linear-gradient(0deg, var(--noite) 0, transparent 14%); }
  .hero-poster .miolo { grid-template-columns: minmax(0, 1fr); margin-top: 52px; }
  .hero-poster .fala { top: auto; bottom: 0; right: 12px; max-width: 280px; transform: translateY(55%); }
  .brilho-logo::before { animation-duration: 9s; }
}

/* hero Deck: a arte tem fundo branco; a seção usa o mesmo branco e a imagem entra por multiply, então as bordas somem na página */
.hero-deck { --papel: #ffffff; position: relative; overflow: hidden; isolation: isolate; background: var(--papel); color: #110b22; min-height: min(980px, calc(100vh - 64px)); display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }
.hero-deck::after { content: ""; position: absolute; inset: auto 0 0; height: 140px; z-index: 2; pointer-events: none; background: linear-gradient(transparent, var(--papel) 85%); }
.deck-arte { position: absolute; z-index: 0; top: 0; bottom: 0; right: max(0px, calc(50% - 720px)); width: min(58%, 820px); }
.deck-arte img { width: 100%; height: 100%; object-fit: contain; object-position: 60% 40%; display: block; -webkit-mask: linear-gradient(90deg, transparent 0, #000 12%, #000 90%, transparent), linear-gradient(#000 0, #000 70%, transparent 98%); -webkit-mask-composite: source-in; mask: linear-gradient(90deg, transparent 0, #000 12%, #000 90%, transparent) intersect, linear-gradient(#000 0, #000 70%, transparent 98%); transform: translate3d(calc(var(--px, 0) * -8px), calc(var(--py, 0) * -6px), 0); transition: transform 1.4s var(--fluida); animation: livro-entra 1.6s var(--fluida) both; }
@keyframes deck-entra { from { opacity: 0; filter: blur(12px) saturate(.2); scale: 1.06; } }
.chegou .deck-arte img { animation: livro-entra 1.6s var(--fluida) both; }
.hero-deck .fala { left: 12%; right: auto; bottom: 12%; z-index: 4; color: var(--marfim); background: #110b22; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%); padding: 12px 30px 12px 16px; }
.hero-deck .fala small { color: #a78bfa; }
.hero-deck .brilho-estrela { color: var(--real); filter: drop-shadow(0 0 10px rgba(124,58,237,.55)); z-index: 3; }
.hero-deck .brilho-estrela.e1 { left: 6%; top: 12%; width: 26px; height: 26px; }
.hero-deck .brilho-estrela.e2 { left: 41%; top: 70%; width: 18px; height: 18px; animation-delay: 1.2s; }
.hero-deck .brilho-estrela.e3 { left: 30%; top: 22%; width: 12px; height: 12px; animation-delay: 2.1s; }
.deck-fio { position: absolute; z-index: 1; left: 0; right: 0; top: 13.5%; height: 1px; background: linear-gradient(90deg, transparent, rgba(124,58,237,.5) 30%, rgba(167,139,250,.9) 70%, transparent); box-shadow: 0 0 12px rgba(167,139,250,.8); transform-origin: left; animation: deck-fio 2.4s .6s var(--fluida) both; }
@keyframes deck-fio { from { transform: scaleX(0); opacity: 0; } }
.hero-deck .miolo { position: relative; z-index: 3; width: 100%; box-sizing: border-box; grid-template-columns: minmax(0, 1fr); min-height: 0; padding-block: 72px 120px; }
.hero-deck .texto-hero { grid-column: 1 / -1; max-width: min(540px, 42vw); gap: 20px; }
.hero-deck .titulo-poster { color: #110b22; font-size: clamp(3rem, 6.4vw, 6.6rem); }
.hero-deck .linha-marca { filter: url(#gasto); }
.hero-deck .lis-apostrofo { color: var(--real); }
.hero-deck .titulo-poster .ds { color: var(--real); text-shadow: 0 0 22px rgba(124,58,237,.35); }
.hero-deck .riscos i { background: linear-gradient(90deg, transparent, var(--real) 12%, #a78bfa 70%, transparent); box-shadow: 0 0 8px rgba(167,139,250,.7); }
.hero-deck .sobre { color: var(--real); } .hero-deck .sobre::after { background: var(--real); }
.hero-deck .lema { color: #110b22; } .hero-deck .lema b { color: var(--real); }
.hero-deck .lide { color: #4a4f66; max-width: 46ch; text-shadow: 0 0 18px var(--papel), 0 0 6px var(--papel); }
.hero-deck .botao.linha { color: #110b22; }
.hero-deck .botao.linha:hover { color: var(--marfim); }
@media (max-width: 960px) {
  .hero-deck { display: block; min-height: 0; }
  .deck-arte { position: relative; right: auto; width: 100%; height: min(118vw, 74vh); }
  .deck-arte img { object-position: 50% 0; -webkit-mask: linear-gradient(#000 0, #000 70%, transparent 100%); mask: linear-gradient(#000 0, #000 70%, transparent 100%); }
  .hero-deck .texto-hero { max-width: none; }
  .hero-deck .fala { left: 12px; right: auto; bottom: 13%; max-width: 190px; }
  .hero-deck .miolo { margin-top: -14vw; padding-block: 0 72px; }
  .deck-fio { top: 7vw; }
  .hero-deck .brilho-estrela.e2 { left: 86%; top: 46%; }
}

/* Patches: a arte do pergaminho ocupa a largura toda; o título pousa sobre os livros escuros da base, como um título escrito à tinta */
.cabeca-livro { position: relative; background: var(--noite); }
.livro-arte { position: relative; aspect-ratio: 2172 / 724; max-height: min(72vh, 640px); width: 100%; overflow: hidden; }
.livro-arte img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; display: block; animation: livro-entra 1.6s var(--fluida) both; }
/* sem filter: o desfoque animado deixava uma linha clara piscando na borda de baixo da arte */
@keyframes livro-entra { from { opacity: 0; transform: scale(1.05); } }
/* a própria arte some antes da borda: na troca de página a borda cai em meio pixel e deixava a imagem vazar como uma linha clara */
.livro-arte img { -webkit-mask: linear-gradient(#000 62%, transparent 99%); mask: linear-gradient(#000 62%, transparent 99%); }
.chegou .livro-arte img { animation: livro-entra 1.6s var(--fluida) both; }
.livro-arte::after { content: ""; position: absolute; inset: 0 0 -2px; pointer-events: none; background: linear-gradient(0deg, var(--noite) 0, rgba(7,8,15,.85) 14%, rgba(7,8,15,.25) 34%, transparent 50%), linear-gradient(180deg, rgba(7,8,15,.45), transparent 12%); }
.livro-arte .fala { top: auto; left: auto; right: 3%; bottom: 7%; z-index: 3; max-width: 240px; }
.cabeca-livro .miolo { position: relative; z-index: 2; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; gap: 20px 56px; margin-top: clamp(-150px, -9vw, -60px); padding-block: 0 56px; }
.cabeca-livro .texto { padding-bottom: 0; }
.cabeca-livro h1 { font-size: clamp(3rem, 7.2vw, 6.6rem); color: #f6f1e4; text-shadow: none; }
.cabeca-livro h1 em { color: #a78bfa; font-family: var(--serifa); text-shadow: none; }
.cabeca-livro .sobre { color: #c4b5fd; text-shadow: 0 1px 10px rgba(0,0,0,.9), 0 0 2px #000; } .cabeca-livro .sobre::after { background: #a78bfa; }
.cabeca-livro .lide { margin: 0; color: #b9bdd3; max-width: 44ch; }
@media (max-width: 760px) {
  .livro-arte { aspect-ratio: auto; height: 300px; max-height: none; }
  .livro-arte img { object-position: 78% 40%; }
  .livro-arte .fala { top: 14px; bottom: auto; left: 12px; right: auto; max-width: 200px; }
  .cabeca-livro .miolo { grid-template-columns: minmax(0, 1fr); margin-top: -64px; padding-top: 0; }
}

/* Cartas: a D'arc fica no centro da arte, então o enquadramento é centralizado e o brilho do pacote ganha um halo dourado */
.cabeca-cartas .livro-arte img { object-position: 70% 30%; }
.cabeca-cartas .livro-arte::after { background: linear-gradient(0deg, var(--noite) 0, rgba(7,8,15,.82) 14%, rgba(7,8,15,.2) 36%, transparent 52%), linear-gradient(180deg, rgba(7,8,15,.4), transparent 12%), linear-gradient(90deg, rgba(7,8,15,.35), transparent 22%, transparent 78%, rgba(7,8,15,.35)); }
.cabeca-cartas h1 em { color: #f2cf7a; text-shadow: none; }
@media (max-width: 760px) { .cabeca-cartas .livro-arte img { object-position: 74% 30%; } .cabeca-cartas .livro-arte .fala { top: 14px; bottom: auto; left: 12px; max-width: 170px; } }
@media (max-width: 480px) { .hero-deck .sobre { letter-spacing: .1em; font-size: .66rem; } .hero-deck .sobre::after { width: 40px; } }

/* Patches no visual violeta: topo claro como o início, a feiticeira à direita e o título em tinta */
.cabeca-feit { position: relative; isolation: isolate; background: #ffffff; color: #110b22; min-height: min(520px, 62vh); display: grid; align-items: end; border-bottom: 1px solid rgba(124,58,237,.35); }
.cabeca-feit .feit-arte { position: absolute; z-index: 0; top: 0; bottom: 0; right: max(0px, calc(50% - 720px)); width: min(52%, 640px); }
.cabeca-feit .feit-arte img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; -webkit-mask: linear-gradient(90deg, transparent 0, #000 22%, #000 92%, transparent); mask: linear-gradient(90deg, transparent 0, #000 22%, #000 92%, transparent); animation: livro-entra 1.6s var(--fluida) both; }
.chegou .cabeca-feit .feit-arte img { animation: livro-entra 1.6s var(--fluida) both; }
.cabeca-feit::after { content: ""; position: absolute; inset: auto 0 0; height: 70px; z-index: 1; pointer-events: none; background: linear-gradient(transparent, #ffffff); }
.cabeca-feit .fala { top: auto; left: auto; right: 2%; bottom: 7%; z-index: 4; color: var(--marfim); background: #110b22; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%); padding: 12px 30px 12px 16px; max-width: 220px; }
.cabeca-feit .fala small { color: #a78bfa; }
.cabeca-feit .miolo { position: relative; z-index: 3; width: 100%; box-sizing: border-box; grid-template-columns: minmax(0, 1fr); padding-block: 72px 56px; }
.cabeca-feit .texto { max-width: min(560px, 46vw); padding-bottom: 0; }
.cabeca-feit .sobre { color: #7c3aed; } .cabeca-feit .sobre::after { background: #7c3aed; }
.cabeca-feit h1 { color: #110b22; }
.cabeca-feit h1 em { color: #7c3aed; }
.cabeca-feit .lide { color: #4a4560; margin: 0; max-width: 40ch; }
.cabeca-feit .deck-fio { top: 18%; }
@media (max-width: 760px) {
  .cabeca-feit { display: block; min-height: 0; }
  .cabeca-feit .feit-arte { position: relative; right: auto; width: 100%; height: 240px; }
  .cabeca-feit .feit-arte img { object-position: 50% 20%; -webkit-mask: linear-gradient(#000 60%, transparent); mask: linear-gradient(#000 60%, transparent); }
  .cabeca-feit .fala { left: 12px; right: auto; bottom: -26px; max-width: 220px; }
  .cabeca-feit .miolo { padding-block: 44px 40px; }
  .cabeca-feit .texto { max-width: none; }
}
/* Patches: a arte escura é um céu costurado em ouro; a fala vai para o vazio à esquerda, longe do rosto */
.cabeca-patches .livro-arte img { object-position: 70% 40%; }
.cabeca-patches .livro-arte .fala { top: 12%; bottom: auto; left: 4%; right: auto; }
@media (max-width: 760px) { .cabeca-patches .livro-arte img { object-position: 82% 40%; } .cabeca-patches .livro-arte .fala { top: 14px; bottom: auto; left: 12px; max-width: 150px; } }

/* ============ Tecelã cósmica: o fio de ouro costura o site ============ */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
:root { --estrela: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); --grimorio: 'Cormorant Garamond', var(--serifa); }

/* fio de rolagem: desce pela lateral, acende um nó em cada seção que a pessoa já passou */
.progresso span { display: none; }
.fio-rolagem { position: fixed; z-index: 58; left: max(5px, calc(50% - 668px)); top: 84px; bottom: 28px; width: 14px; pointer-events: none; }
.fio-rolagem .trilho { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); background: repeating-linear-gradient(rgba(233,185,73,.4) 0 4px, transparent 4px 9px); }
.fio-rolagem .enche { position: absolute; left: 50%; top: 0; width: 2px; height: calc(var(--p, 0) * 100%); transform: translateX(-50%); border-radius: 2px; background: linear-gradient(#f3d27a, #e9b949); box-shadow: 0 0 10px rgba(233,185,73,.8); }
.fio-rolagem .agulha { position: absolute; left: 50%; top: calc(var(--p, 0) * 100%); width: 16px; height: 16px; margin: -8px 0 0 -8px; filter: drop-shadow(0 0 6px #e9b949); }
.fio-rolagem .agulha::before { content: ""; position: absolute; inset: 0; background: #fff3c4; clip-path: var(--estrela); }
.fio-rolagem .nos b { position: absolute; left: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; background: rgba(233,185,73,.5); clip-path: var(--estrela); transition: background .5s, transform .6s var(--mola); }
.fio-rolagem .nos b.acesa { background: #e9b949; transform: scale(1.4) rotate(45deg); }
@media (max-width: 760px) { .fio-rolagem { left: 2px; width: 10px; } .fio-rolagem .agulha { width: 12px; height: 12px; margin: -6px 0 0 -6px; } }

/* troca de página: um fio tracejado costura a tela e revela a página nova atrás dele */
.cortina { top: 0; bottom: 0; left: 0; right: auto; width: 0; height: auto; background: none; border-left: 2px dashed #e9b949; transform: none; opacity: 0; filter: drop-shadow(0 0 8px rgba(233,185,73,.9)); }
.cortina::before { content: ""; position: absolute; top: 22%; left: -9px; width: 16px; height: 16px; background: #fff3c4; clip-path: var(--estrela); }
.cortina.corre { animation: costura-linha .95s var(--fluida); }
@keyframes costura-linha { 0% { left: 0; opacity: 1; } 80% { opacity: 1; } 100% { left: calc(100vw - 2px); opacity: 0; } }
@keyframes costura-revela { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* cartas penduradas por um fio dourado que se balança devagar */
.grade-cartas { padding: 28px 10px 48px; margin-inline: -10px; }
.grupo-patch { margin-top: 18px; }
.grade-cartas button { position: relative; transform-origin: 50% -26px; animation: balanca 7s ease-in-out infinite alternate; }
.grade-cartas li:nth-child(5n+2) button { animation-delay: -1.4s; } .grade-cartas li:nth-child(5n+3) button { animation-delay: -2.8s; animation-duration: 8s; }
.grade-cartas li:nth-child(5n+4) button { animation-delay: -4.2s; } .grade-cartas li:nth-child(5n+5) button { animation-delay: -5.6s; animation-duration: 6s; }
.grade-cartas button:hover, .grade-cartas button:focus-visible { animation: none; rotate: 0deg; transition: transform .6s var(--mola), rotate .6s var(--fluida); }
@keyframes balanca { from { rotate: -1.5deg; } to { rotate: 1.5deg; } }
.grade-cartas button::before { content: ""; position: absolute; left: 50%; top: -26px; width: 1px; height: 26px; background: linear-gradient(rgba(233,185,73,0), #e9b949); box-shadow: 0 0 6px rgba(233,185,73,.55); }
.grade-cartas button::after { content: ""; position: absolute; left: 50%; top: -4px; width: 8px; height: 8px; margin-left: -4px; background: #e9b949; clip-path: var(--estrela); z-index: 2; }
.grade-cartas .carta::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: 12px; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.55), transparent 42%), linear-gradient(115deg, transparent 28%, rgba(233,185,73,.38) 44%, rgba(167,139,250,.45) 56%, transparent 72%); }
.grade-cartas button:hover .carta::after { opacity: .85; mix-blend-mode: color-dodge; }

/* céu estrelado nas seções escuras */
.secao-ceu { position: relative; isolation: isolate; }
.secao-ceu > .ceu { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.poeira { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 70; pointer-events: none; }
@media (pointer: coarse) { .poeira { display: none; } }

/* brasões: a constelação de cada classe se desenha no hover */
.brasao .const { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .5s; }
.brasao .const polyline { fill: none; stroke: #f3d27a; stroke-width: .9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 2px rgba(243,210,122,.9)); transition: stroke-dashoffset 1.3s var(--fluida); }
.brasao .const circle { fill: #fff3c4; opacity: 0; transition: opacity .6s .5s; }
.brasao:hover .const, .brasao:focus-visible .const { opacity: .9; }
.brasao:hover .const polyline, .brasao:focus-visible .const polyline { stroke-dashoffset: 0; }
.brasao:hover .const circle, .brasao:focus-visible .const circle { opacity: 1; }

/* tipografia: palavras de destaque em itálico de grimório, com um fio de luz passando nos títulos de seção */
h1 em, h2 em { font-family: var(--grimorio); font-weight: 600; font-size: 1.08em; line-height: .8; letter-spacing: -.02em; }
.grupo-patch:first-child { margin-top: 36px; }
h1, h2 { font-variant-ligatures: common-ligatures discretionary-ligatures; }
h2:not(.gigante) em { background: linear-gradient(100deg, var(--acento) 0 40%, #fff1b8 50%, var(--acento) 60% 100%) 100% 0 / 260% 100% no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: fio-luz 8s ease-in-out 1.4s infinite; }
@keyframes fio-luz { 0%, 55% { background-position: 100% 0; } 100% { background-position: 0 0; } }
/* marca-texto: o pincel fica só como mancha leve e o destaque vira um sublinhado de pontos de costura */
.mt::before, .s-noite .mt::before, .janela .mt::before { opacity: .3; }
.mt { --fio-mt: #c28a0a; } .s-noite .mt, .janela .mt { --fio-mt: #f3d27a; }
.mt::after { content: ""; position: absolute; left: -.04em; right: -.04em; bottom: -.06em; height: 2px; background: repeating-linear-gradient(90deg, var(--fio-mt) 0 6px, transparent 6px 10px); clip-path: inset(0 100% 0 0); transition: clip-path 1.1s .25s var(--fluida); }
.marcado .mt::after { clip-path: inset(0 0 0 0); }

/* fala da D'arc: etiqueta com costura pontilhada, pendurada e balançando de leve */
.fala { animation: pende 8s ease-in-out infinite alternate; transform-origin: 18px 0; }
.fala::after { content: ""; position: absolute; left: 16px; right: 18px; bottom: 5px; border-bottom: 1px dashed rgba(233,185,73,.8); pointer-events: none; }
@keyframes pende { from { rotate: -.7deg; } to { rotate: .7deg; } }

/* botões: um ponto de luz dourada percorre a borda no hover */
.botao.real::after, .botao.linha::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: conic-gradient(from var(--ang), transparent 0 60%, #f3d27a 82%, #fff3c4 92%, transparent); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; transition: opacity .4s; animation: gira 2.6s linear infinite; pointer-events: none; }
.botao.real:hover::after, .botao.linha:hover::after, .botao:focus-visible::after { opacity: 1; }
@keyframes gira { to { --ang: 360deg; } }

/* topos claros das páginas internas (Cartas, Notícias, Meta) */
.cabeca-feit.cabeca-cartas-feit .feit-arte img { object-position: 84% 50%; }
.cabeca-feit.cabeca-meta-feit .feit-arte img { object-position: 90% 50%; }
.cabeca-feit .feit-arte.espelha { transform: scaleX(-1); }
.cabeca-meta-feit > .fala { top: auto; left: auto; right: 2%; bottom: 7%; z-index: 4; color: var(--marfim); background: #110b22; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%); padding: 12px 30px 12px 16px; max-width: 220px; }
.cabeca-meta-feit > .fala small { color: #a78bfa; }
@media (max-width: 760px) { .cabeca-meta-feit > .fala { left: 12px; right: auto; top: 212px; bottom: auto; max-width: 220px; } }

/* desempenho: cartas fora da tela não são pintadas, e no toque o balanço contínuo fica parado */
.grupo-patch { content-visibility: auto; contain-intrinsic-size: auto 700px; }
@media (hover: none), (pointer: coarse) {
  .grade-cartas button { animation: none; }
  /* a página não desliza no toque, mas mantém a revelação pela linha lateral */
  .pagina.chegou { animation: pagina-toque .5s ease-out both, costura-revela .95s var(--fluida) backwards; }
}
@keyframes pagina-toque { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .cortina.corre, .pagina.chegou { animation: none; }
  .grade-cartas button, .fala, h2:not(.gigante) em, .botao::after { animation: none; }
  .mt::after { clip-path: none; }
}

/* ===== Fios de ouro nas partes claras (v32) ===== */
.fio-claro { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; overflow: visible; }
.fio-claro path { fill: none; stroke: #c28a0a; stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--d, 0)); opacity: .7; }
.fio-claro path.b { stroke-width: 1; stroke-dasharray: 1 .012; opacity: .4; }
.agulha-clara { position: absolute; z-index: -1; width: 18px; height: 18px; margin: -9px 0 0 -9px; pointer-events: none; color: #c28a0a; filter: drop-shadow(0 0 5px rgba(233,185,73,.7)); }
.agulha-clara svg { width: 100%; height: 100%; display: block; }
.s-marfim.secao { position: relative; }
.s-marfim.secao > .miolo { position: relative; z-index: 1; }
/* costura de emenda no topo das seções claras */
.s-marfim.secao::before { content: ""; position: absolute; z-index: 0; left: 24px; right: 24px; top: 14px; height: 0; border-top: 1.5px dashed rgba(194,138,10,.55); animation: emenda 3s linear infinite; pointer-events: none; }
@keyframes emenda { to { background-position: 0 0; border-top-color: rgba(194,138,10,.8); } }
/* bordado nos títulos claros */
.s-marfim h2:not(.gigante):not(.sem-bordado)::after, .s-marfim .detalhe-topo h2::after { content: ""; display: block; width: min(300px, 55%); height: 3px; margin-top: 18px; background: repeating-linear-gradient(90deg, #c28a0a 0 9px, transparent 9px 16px); clip-path: inset(0 100% 0 0); animation: borda 1.5s var(--fluida) .35s forwards; }
.s-marfim .miolo > h2 { text-wrap: balance; }
@keyframes borda { to { clip-path: inset(0); } }
/* ponto cruzado nos cartões claros */
.grupo-patch, .detalhe { position: relative; }
.grupo-patch::before, .grupo-patch::after, .detalhe::before, .detalhe::after { content: "× × ×"; position: absolute; font: 500 .62rem/1 var(--mono); letter-spacing: .5em; color: rgba(194,138,10,.7); pointer-events: none; }
.grupo-patch::before, .detalhe::before { top: 5px; left: 10px; }
.grupo-patch::after, .detalhe::after { bottom: 5px; right: 8px; }
/* fio que cruza a divisa entre o escuro e o claro */
.emenda { position: relative; z-index: 6; height: 0; pointer-events: none; }
.emenda i { position: absolute; left: var(--x, 12%); top: -70px; width: 2px; height: 140px; margin-left: -1px; }
.emenda i::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 70px; background: linear-gradient(transparent, #f3d27a); box-shadow: 0 0 14px 1px rgba(243,210,122,.7); transform-origin: top; animation: desce 1.2s var(--fluida) both; }
.emenda i::after { content: ""; position: absolute; left: .5px; width: 1px; top: 70px; height: 70px; background: repeating-linear-gradient(#b8871a 0 6px, transparent 6px 10px); }
.emenda i b { position: absolute; left: 50%; top: 70px; width: 12px; height: 12px; margin: -6px 0 0 -6px; background: #e9b949; clip-path: var(--estrela); }
@keyframes desce { from { transform: scaleY(0); } }
/* selos de cera nos capítulos */
.capitulo b { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 52% 48% 55% 45% / 48% 54% 46% 52%; background: radial-gradient(circle at 35% 30%, #fbe7a1, #e9b949 45%, #b8871a); color: #3b1572; box-shadow: inset 0 0 0 3px rgba(255,255,255,.18), inset 0 0 0 4px rgba(120,80,0,.35), 0 3px 8px rgba(120,80,0,.35); font-size: 1.15rem; animation: carimba .9s var(--mola) both; }
.s-noite .capitulo b, .s-profundo .capitulo b { color: #2a0f4f; box-shadow: inset 0 0 0 3px rgba(255,255,255,.2), inset 0 0 0 4px rgba(120,80,0,.4), 0 0 16px rgba(233,185,73,.4); }
@keyframes carimba { from { transform: scale(1.8) rotate(-18deg); opacity: 0; } 60% { transform: scale(.92) rotate(4deg); opacity: 1; } }
.fio-rolagem .nos b.acesa { background: radial-gradient(circle, #fff1b8, #e9b949); }
@media (max-width: 700px) { .emenda i { --x: 6% !important; } .s-marfim.secao::before { left: 12px; right: 12px; } }
@media (prefers-reduced-motion: reduce) { .s-marfim.secao::before, .capitulo b, .emenda i::before { animation: none; } .s-marfim h2:not(.gigante)::after { animation: none; clip-path: none; } .fio-claro path { stroke-dashoffset: 0; } }
/* Cartas e Meta: arte cheia como em Patches; a carta do Meta fica no centro, então o texto sobe sobre a base escura */
.cabeca-patches.cabeca-cartas-arte .livro-arte img { object-position: 60% 40%; }
.cabeca-patches.cabeca-meta-arte .livro-arte img { object-position: 55% 40%; }
.cabeca-patches.cabeca-cartas-arte .livro-arte .fala, .cabeca-patches.cabeca-meta-arte .livro-arte .fala { top: 12%; bottom: auto; left: 4%; right: auto; }
@media (max-width: 760px) { .cabeca-patches.cabeca-cartas-arte .livro-arte img, .cabeca-patches.cabeca-meta-arte .livro-arte img { object-position: 76% 40%; } .cabeca-patches.cabeca-cartas-arte .livro-arte .fala, .cabeca-patches.cabeca-meta-arte .livro-arte .fala { top: 14px; left: 12px; max-width: 150px; } }
.cabeca-patches.cabeca-noticias-arte .livro-arte img { object-position: 60% 40%; }
.cabeca-patches.cabeca-noticias-arte .livro-arte .fala { top: 12%; bottom: auto; left: 4%; right: auto; }
@media (max-width: 760px) { .cabeca-patches.cabeca-noticias-arte .livro-arte img { object-position: 70% 40%; } .cabeca-patches.cabeca-noticias-arte .livro-arte .fala { top: 14px; left: 12px; max-width: 150px; } }
.marca-ico { width: 36px; height: 36px; border-radius: 9px; display: block; box-shadow: 0 0 0 1px rgba(233,185,73,.35), 0 0 14px rgba(124,58,237,.55); transition: transform .5s var(--mola), box-shadow .4s; }
.marca:hover .marca-ico { transform: rotate(-6deg) scale(1.08); box-shadow: 0 0 0 1px rgba(233,185,73,.7), 0 0 20px rgba(167,139,250,.8); }
@media (max-width: 480px) { .marca { font-size: 1.1rem; gap: 7px; } .marca-ico { width: 30px; height: 30px; border-radius: 8px; } }

.pular { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--real); color: #fff; border-radius: 999px; font: 600 .85rem var(--mono); text-decoration: none; } .pular:focus { top: 10px; }
main:focus { outline: none; }

/* Estados de carregamento e falha (texto aprovado pelo Claude, a ligação é pelo data-estado do body) */
.aviso-estado { position: fixed; left: 50%; bottom: 20px; z-index: 60; transform: translateX(-50%); max-width: min(92vw, 520px); }
.aviso-estado p { display: none; margin: 0; padding: 12px 18px; border-radius: 14px; background: #110b22; color: var(--marfim); font: 500 .85rem/1.4 var(--mono); box-shadow: 0 8px 30px rgba(0,0,0,.4), 0 0 0 1px rgba(233,185,73,.4); }
body[data-estado="carregando"] .aviso-estado [data-e="carregando"], body[data-estado="erro"] .aviso-estado [data-e="erro"] { display: block; }
body[data-estado="erro"] .aviso-estado p { background: #4c1d1d; box-shadow: 0 8px 30px rgba(0,0,0,.4), 0 0 0 1px rgba(217,58,74,.7); }
#sem-resultados { margin: 28px 0 0; text-align: center; }

/* Ícones de classe maiores e sem fundo; caixas de deck clicáveis que se enchem no hover */
.brasao img { width: 84px; height: 84px; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0,0,0,.45)); transition: transform .7s var(--mola), filter .4s; }
.brasao:hover img { transform: scale(1.12) rotate(-5deg); filter: drop-shadow(0 8px 20px rgba(233,185,73,.5)); }
.janela .topo b img { width: 46px; height: 46px; object-fit: contain; }
.deck { display: block; padding: 0; background: none; box-shadow: none; }
.deck::before { display: none; }
.deck-caixa { position: relative; display: grid; place-items: center; min-height: 76px; padding: 18px 20px; overflow: hidden; border-radius: 16px; text-align: center; text-decoration: none; color: var(--marfim); font: 600 clamp(1.5rem, 4.4vw, 2rem)/1.1 var(--serifa); letter-spacing: -.02em; box-shadow: inset 0 0 0 1px rgba(245,242,234,.22); transition: color .35s, box-shadow .35s, transform .4s var(--mola); }
.deck-caixa::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(233,185,73,.55), var(--real) 26%, #8b5cf6 50%, var(--real) 74%, rgba(233,185,73,.55)); transform: scaleX(0); transform-origin: center; transition: transform .9s cubic-bezier(.4,.1,.2,1); }
.deck-caixa::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1.5px solid #f3d27a; box-shadow: inset 0 0 14px 1px rgba(233,185,73,.75), inset 0 0 36px rgba(233,185,73,.25); clip-path: inset(0 50% 0 50%); transition: clip-path .9s cubic-bezier(.4,.1,.2,1); pointer-events: none; }
.deck-caixa { isolation: isolate; }
.deck-caixa:hover, .deck-caixa:focus-visible { color: #fff; text-shadow: 0 1px 10px rgba(30,10,70,.55); box-shadow: inset 0 0 0 1px rgba(233,185,73,.7); transform: translateY(-2px); }
.deck-caixa:hover::before, .deck-caixa:focus-visible::before { transform: scaleX(1); }
.deck-caixa:hover::after, .deck-caixa:focus-visible::after { clip-path: inset(0); }
.deck-caixa:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .deck-caixa::before, .deck-caixa::after { transition: none; } .brasao:hover img { transform: none; } }