/* ===========================================================================
   Destino — sistema visual
   4 temas trocáveis por tokens em html[data-tema]. Tudo que colore lê var(--x);
   nenhum componente carrega hex fixo. Ver design_handoff_destino_redesign/.
   =========================================================================== */

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

/* --------------------------------------------------------------------------
   1. Tokens dos temas
   -------------------------------------------------------------------------- */

html[data-tema="noite"] {
  --page: linear-gradient(162deg, #2b2119, #20190f);
  --barBg: rgba(32, 25, 15, .82);
  --ink: #f3e8d0;  --sec: #cbbb99;  --mut: #8f8069;
  --card: #322820;  --cardTop: #3a2f24;  --cardBot: #2c231a;  --line: #4a3a26;
  --accentA: #d8a94e;  --accentB: #6fae9f;  --heading: #f3e8d0;
  --seal: #d98b6b;
  --sealBg: radial-gradient(circle at 38% 32%, #40342a, #241c13);
  --sealBorder: #5a4830;
  --sealGlow: 0 0 44px -6px rgba(217, 139, 107, .5);
  --gold: #d8a94e;  --jade: #6fae9f;  --musgo: #9bb06a;
  --elFogo: #d98b6b;  --elTerra: #d8a94e;  --elMadeira: #9bb06a;
  --elMetal: #cdbf9f;  --elAgua: #6fae9f;
  --vida: #d8a94e;
  --vidaGlow: 0 0 26px -4px rgba(216, 169, 78, .55);
  --auraCor: rgba(216, 169, 78, .30);
  --chipBg: rgba(255, 255, 255, .04);
  --inputBg: #271f16;  --inputBorder: #5a4830;
  --btnGrad: linear-gradient(180deg, #e6b95f, #d8a94e 60%, #b8862f);
  --btnInk: #2a2014;  --track: #271f16;
  --shLu: #9bb06a;  --shQuan: #d8a94e;  --shKe: #6fae9f;  --shJi: #d98b6b;
  --dotGood: #9bb06a;  --dotBad: #d98b6b;  --dotMinor: #a08560;
  --paperBg: #fbf5e7;  --paperInk: #3a3226;  --paperHead: #9f4f38;
  --paperMeta: #7a6a52;
  --paperBox: linear-gradient(180deg, #f1f0e2, #e8e8d5);
  --paperBoxBorder: #dcddc6;  --paperBadge: #52643a;
  --sombraCard: 0 40px 80px -50px rgba(0, 0, 0, .6);
  --sombraPainel: 0 30px 60px -24px rgba(0, 0, 0, .55);
  --perigo: #d98b6b;
}

html[data-tema="pergaminho"] {
  --page: #ded3ba radial-gradient(1200px 620px at 22% -8%, #f0e8d6 0%, #ddd1b7 46%, #d3c5a9 100%);
  --barBg: rgba(248, 240, 223, .85);
  --ink: #2f261b;  --sec: #6f5c42;  --mut: #8a7a62;
  --card: #fffaf0;  --cardTop: #fffdf7;  --cardBot: #f8f0df;  --line: #e7dabf;
  --accentA: #a9782d;  --accentB: #356761;  --heading: #5f4227;
  --seal: #9f4f38;
  --sealBg: radial-gradient(circle at 38% 32%, #fbf3e2, #f2e2c6);
  --sealBorder: #e0cfa8;
  --sealGlow: 0 18px 34px -22px rgba(159, 79, 56, .6);
  --gold: #a9782d;  --jade: #356761;  --musgo: #52643a;
  --elFogo: #9f4f38;  --elTerra: #a9782d;  --elMadeira: #52643a;
  --elMetal: #8c8163;  --elAgua: #356761;
  --vida: #356761;
  --vidaGlow: 0 0 0 4px rgba(53, 103, 97, .16);
  --auraCor: rgba(53, 103, 97, .14);
  --chipBg: rgba(255, 253, 247, .7);
  --inputBg: #fffdf7;  --inputBorder: #d9c8a6;
  --btnGrad: linear-gradient(180deg, #627545, #52643a 65%, #37462a);
  --btnInk: #f7f5ec;  --track: #efe4cd;
  --shLu: #6f8a4a;  --shQuan: #a9782d;  --shKe: #356761;  --shJi: #c06a4d;
  --dotGood: #6f8a4a;  --dotBad: #c06a4d;  --dotMinor: #a08560;
  --paperBg: #fffdf7;  --paperInk: #3a3226;  --paperHead: #9f4f38;
  --paperMeta: #7a6a52;
  --paperBox: linear-gradient(180deg, #f3f2e6, #eaead8);
  --paperBoxBorder: #dfe0c9;  --paperBadge: #52643a;
  --sombraCard: 0 30px 50px -44px rgba(95, 66, 39, .5);
  --sombraPainel: 0 24px 44px -26px rgba(95, 66, 39, .45);
  --perigo: #9f4f38;
}

html[data-tema="jade"] {
  --page: linear-gradient(162deg, #1c2b27, #12201c);
  --barBg: rgba(18, 32, 28, .82);
  --ink: #e8f0e6;  --sec: #a8c2b4;  --mut: #7c9082;
  --card: #213330;  --cardTop: #26403a;  --cardBot: #1c2c28;  --line: #375049;
  --accentA: #7fd0b0;  --accentB: #d8b45e;  --heading: #e8f0e6;
  --seal: #e8a05c;
  --sealBg: radial-gradient(circle at 38% 32%, #2e4a42, #16241f);
  --sealBorder: #3f5a50;
  --sealGlow: 0 0 44px -6px rgba(127, 208, 176, .4);
  --gold: #d8b45e;  --jade: #7fd0b0;  --musgo: #93c08a;
  --elFogo: #e89a6a;  --elTerra: #d8b45e;  --elMadeira: #93c08a;
  --elMetal: #cdd6c0;  --elAgua: #7fd0b0;
  --vida: #7fd0b0;
  --vidaGlow: 0 0 26px -4px rgba(127, 208, 176, .5);
  --auraCor: rgba(127, 208, 176, .28);
  --chipBg: rgba(255, 255, 255, .04);
  --inputBg: #182722;  --inputBorder: #3f5a50;
  --btnGrad: linear-gradient(180deg, #8fd9be, #5fbf9e 60%, #3f8a70);
  --btnInk: #10231c;  --track: #182722;
  --shLu: #93c08a;  --shQuan: #d8b45e;  --shKe: #7fd0b0;  --shJi: #e89a6a;
  --dotGood: #93c08a;  --dotBad: #e89a6a;  --dotMinor: #8fa595;
  --paperBg: #f4f6ec;  --paperInk: #2c352a;  --paperHead: #2f7d63;
  --paperMeta: #6a7d68;
  --paperBox: linear-gradient(180deg, #eaefdf, #e0e7d2);
  --paperBoxBorder: #d4dcc2;  --paperBadge: #3f8a70;
  --sombraCard: 0 40px 80px -50px rgba(0, 0, 0, .6);
  --sombraPainel: 0 30px 60px -24px rgba(0, 0, 0, .55);
  --perigo: #e89a6a;
}

html[data-tema="imperial"] {
  --page: radial-gradient(900px 520px at 50% -10%, #3a1416 0%, #23090b 55%, #1a0608 100%);
  --barBg: rgba(26, 6, 8, .82);
  --ink: #f5e6c8;  --sec: #d8b48a;  --mut: #a07a5c;
  --card: #2c0f11;  --cardTop: #3a1416;  --cardBot: #250b0d;  --line: #5a2420;
  --accentA: #e8c15a;  --accentB: #c0392b;  --heading: #f0d9a0;
  --seal: #e23b2e;
  --sealBg: radial-gradient(circle at 38% 32%, #4a1614, #2a0a0a);
  --sealBorder: #7a2b22;
  --sealGlow: 0 0 46px -6px rgba(226, 59, 46, .55);
  --gold: #e8c15a;  --jade: #5aa889;  --musgo: #8fae5a;
  --elFogo: #e8695a;  --elTerra: #e8c15a;  --elMadeira: #8fae5a;
  --elMetal: #e6dcc0;  --elAgua: #6fb0c8;
  --vida: #e8c15a;
  --vidaGlow: 0 0 26px -4px rgba(232, 193, 90, .55);
  --auraCor: rgba(232, 193, 90, .28);
  --chipBg: rgba(255, 220, 150, .05);
  --inputBg: #1f0809;  --inputBorder: #7a2b22;
  --btnGrad: linear-gradient(180deg, #e8483a, #c0392b 60%, #8f2018);
  --btnInk: #fbe6c8;  --track: #1f0809;
  --shLu: #8fae5a;  --shQuan: #e8c15a;  --shKe: #6fb0c8;  --shJi: #e8695a;
  --dotGood: #8fae5a;  --dotBad: #e8695a;  --dotMinor: #b08a5c;
  --paperBg: #f8efd8;  --paperInk: #3a2a1a;  --paperHead: #c0392b;
  --paperMeta: #8a6a4a;
  --paperBox: linear-gradient(180deg, #f1e6c6, #ecdcb0);
  --paperBoxBorder: #e0cfa0;  --paperBadge: #8f2018;
  --sombraCard: 0 40px 80px -50px rgba(0, 0, 0, .6);
  --sombraPainel: 0 30px 60px -24px rgba(0, 0, 0, .55);
  --perigo: #e8695a;
}

/* Pilhas de fonte. O Cormorant só cobre latim: os hanzi caem numa serifada
   CJK do sistema. */
:root {
  --display: "Cormorant Garamond", "Songti SC", "Noto Serif CJK SC",
             "Source Han Serif SC", "SimSun", Georgia, serif;
  --texto: "Spectral", Georgia, "Times New Roman", serif;
  --rotulo: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

@keyframes surgir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes crescer { from { transform: scaleX(0); } }
@keyframes painel { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }

html { scroll-behavior: smooth; }

/* O gradiente mora no <html> e se estica pela altura rolável inteira.
   Sem background-attachment: fixed — o Chrome no Android o ignora e o
   Safari no iOS repinta a cada rolagem (engasga com a barra de endereço
   que aparece e some). */
html { background: var(--page); }

body {
  margin: 0;
  min-height: 100vh;
  background: transparent;
  color: var(--ink);
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gold); }

main {
  max-width: 1220px;
  margin: 0 auto;
  padding: 30px clamp(16px, 4vw, 44px) 64px;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--heading);
  margin: 0;
}

/* Régua sob os títulos de seção */
.risco {
  width: 42px; height: 3px; border-radius: 2px;
  margin: 6px 0 18px;
  background: linear-gradient(90deg, var(--accentA), var(--accentB));
}

.eyebrow {
  font-family: var(--rotulo);
  font-size: 11px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--mut);
}

.detalhe { color: var(--mut); font-size: 14px; line-height: 1.55; }

.aviso {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 15px; margin: 0;
  border-radius: 12px;
  background: var(--chipBg); border: 1px solid var(--line);
  color: var(--sec); font-size: 13.5px; line-height: 1.5;
}
.aviso::before { content: "◆"; color: var(--gold); }

/* --------------------------------------------------------------------------
   3. Peças reutilizáveis: cartão, chip, botão, campo
   -------------------------------------------------------------------------- */

.cartao {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 24px 24px;
  margin-bottom: 22px;
  animation: surgir .6s cubic-bezier(.2, .7, .3, 1) both;
}

.chip {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--chipBg); border: 1px solid var(--line);
  font-size: 14px; color: var(--sec);
  white-space: nowrap;
}
.chip strong, .chip b {
  font-family: var(--rotulo);
  font-size: 10px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--mut);
}

button { font: inherit; cursor: pointer; }

/* Botão principal — o gradiente do tema */
button[type="submit"], .botao-principal {
  padding: 11px 18px;
  border: none; border-radius: 11px;
  background: var(--btnGrad);
  color: var(--btnInk);
  font-family: var(--rotulo);
  font-weight: 700; font-size: 14px;
  transition: filter .15s, transform .15s;
}
button[type="submit"]:hover:not(:disabled), .botao-principal:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}
button[type="submit"]:disabled { opacity: .6; cursor: progress; transform: none; }

button.perigo {
  background: transparent;
  border: 1px solid var(--perigo);
  color: var(--perigo);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: var(--rotulo);
  font-size: 12.5px; font-weight: 600;
}
button.perigo:hover { background: color-mix(in srgb, var(--perigo) 12%, transparent); }

input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--inputBorder);
  border-radius: 11px;
  background: var(--inputBg);
  color: var(--ink);
  font: inherit; font-size: 14px;
}
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--mut) 50%),
                    linear-gradient(135deg, var(--mut) 50%, transparent 50%);
  background-position: right 14px center, right 9px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 30px;
}
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
input[type="checkbox"] { width: auto; accent-color: var(--gold); }

label {
  display: block;
  font-size: 12px; font-weight: 600;
  color: var(--sec);
  margin-bottom: 6px;
}
label small {
  display: block;
  margin-top: 4px;
  font-weight: 400; font-size: 11.5px;
  color: var(--mut);
}

/* --------------------------------------------------------------------------
   4. Cabeçalho + painel de temas
   -------------------------------------------------------------------------- */

.topo {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px;
  padding: 14px clamp(16px, 4vw, 56px);
  background: var(--barBg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.logo {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none;
  font-family: var(--display);
  font-size: 24px; font-weight: 600;
  color: var(--heading);
}
.logo::before {
  content: "";
  width: 26px; height: 26px; border-radius: 50%;
  background: conic-gradient(from 210deg, var(--seal), var(--gold), var(--jade), var(--seal));
}

.subtitulo {
  font-family: var(--rotulo);
  font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--mut);
}

.nav-topo { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.nav-topo a, .nav-topo .sair {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--sec);
  text-decoration: none;
  font-family: var(--rotulo);
  font-size: 12.5px; font-weight: 600;
  transition: none;
}
.nav-topo a:hover, .nav-topo .sair:hover {
  background: var(--chipBg);
  border-color: var(--line);
  color: var(--heading);
  filter: none; transform: none;
}
.nav-topo form { margin: 0; }

.tema-caixa { position: relative; }

.tema-gatilho {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px 7px 12px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--chipBg);
  color: var(--sec);
}
.tema-gatilho .rotulo-tema {
  font-family: var(--rotulo);
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
}
.tema-amostras { display: flex; gap: 3px; }
.tema-amostras i { width: 11px; height: 11px; border-radius: 50%; }
.tema-amostras i:nth-child(1) { background: var(--seal); }
.tema-amostras i:nth-child(2) { background: var(--gold); }
.tema-amostras i:nth-child(3) { background: var(--jade); }

.tema-painel {
  position: absolute; right: 0; top: calc(100% + 10px);
  width: 288px; padding: 12px;
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--card);
  box-shadow: var(--sombraPainel);
  animation: painel .2s ease both;
  z-index: 40;
}
.tema-painel[hidden] { display: none; }
.tema-painel-titulo {
  font-family: var(--rotulo);
  font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--mut);
  padding: 4px 8px 10px;
}

.tema-opcao {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 10px; margin-bottom: 4px;
  border: 1px solid transparent; border-radius: 13px;
  background: transparent;
  text-align: left;
}
.tema-opcao:hover { background: var(--chipBg); border-color: var(--line); }
.tema-opcao.ativo { background: var(--chipBg); border-color: var(--gold); }
.tema-opcao .swatch {
  display: flex; flex: 0 0 auto;
  border-radius: 8px; overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .15);
}
.tema-opcao .swatch i { width: 15px; height: 30px; }
.tema-opcao .rotulos { min-width: 0; }
.tema-opcao .nome {
  display: block;
  font-family: var(--display);
  font-size: 17px; font-weight: 600;
  color: var(--heading);
}
.tema-opcao .desc { display: block; font-size: 12px; color: var(--mut); }
.tema-opcao .marca { margin-left: auto; color: var(--gold); font-size: 15px; opacity: 0; }
.tema-opcao.ativo .marca { opacity: 1; }

/* Amostras do painel — hex fixos de propósito: mostram um tema que NÃO é o
   atual, então não podem ler as vars vigentes. */
.swatch-noite i:nth-child(1) { background: #2b2119; }
.swatch-noite i:nth-child(2) { background: #d98b6b; }
.swatch-noite i:nth-child(3) { background: #d8a94e; }
.swatch-noite i:nth-child(4) { background: #6fae9f; }
.swatch-pergaminho i:nth-child(1) { background: #ded3ba; }
.swatch-pergaminho i:nth-child(2) { background: #9f4f38; }
.swatch-pergaminho i:nth-child(3) { background: #a9782d; }
.swatch-pergaminho i:nth-child(4) { background: #356761; }
.swatch-jade i:nth-child(1) { background: #1c2b27; }
.swatch-jade i:nth-child(2) { background: #e8a05c; }
.swatch-jade i:nth-child(3) { background: #d8b45e; }
.swatch-jade i:nth-child(4) { background: #7fd0b0; }
.swatch-imperial i:nth-child(1) { background: #23090b; }
.swatch-imperial i:nth-child(2) { background: #e23b2e; }
.swatch-imperial i:nth-child(3) { background: #e8c15a; }
.swatch-imperial i:nth-child(4) { background: #c0392b; }

/* --------------------------------------------------------------------------
   5. Selo (Dia Mestre / 命)
   -------------------------------------------------------------------------- */

.selo {
  position: relative;
  width: 128px; height: 128px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--sealBg);
  border: 1px solid var(--sealBorder);
  box-shadow: var(--sealGlow);
}
.selo::before {
  content: "";
  position: absolute; inset: 9px;
  border-radius: 50%;
  border: 1px dashed var(--seal);
  opacity: .4;
}
.selo span {
  font-family: var(--display);
  font-size: 64px; line-height: 1;
  color: var(--seal);
}
.selo-legenda { text-align: center; margin-top: 10px; }
.selo-legenda .eyebrow { letter-spacing: .16em; font-size: 10px; }
.selo-legenda .valor { font-family: var(--display); font-size: 18px; color: var(--sec); }

/* --------------------------------------------------------------------------
   6. Página da pessoa — hero, nav, corpo
   -------------------------------------------------------------------------- */

.moldura {
  border-radius: 24px; overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--sombraCard);
  margin-bottom: 22px;
}

.hero {
  position: relative; overflow: hidden;
  padding: 40px clamp(20px, 4vw, 42px) 36px;
  background: var(--cardTop);
  border-bottom: 1px solid var(--line);
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(560px 260px at 88% -30%, var(--auraCor), transparent);
  pointer-events: none;
}
.hero-linha {
  position: relative;
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 28px; flex-wrap: wrap;
}
.hero-nome {
  margin: 6px 0 12px;
  font-size: 54px; line-height: 1;
  letter-spacing: -.015em;
}
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-avisos { position: relative; margin-top: 20px; display: grid; gap: 8px; }
.hero-selo { display: flex; flex-direction: column; align-items: center; }

.nav-mapa {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 16px clamp(20px, 4vw, 42px) 0;
  background: var(--page);
}
.nav-mapa a {
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--chipBg); border: 1px solid var(--line);
  color: var(--sec); text-decoration: none;
  font-family: var(--rotulo);
  font-size: 12.5px; font-weight: 600;
  white-space: nowrap;
}
.nav-mapa a:hover { color: var(--heading); border-color: var(--gold); }

.corpo-mapa {
  display: grid; grid-template-columns: 1fr 288px; gap: 24px;
  padding: 28px clamp(20px, 4vw, 42px);
  background: var(--page);
}
.coluna-mapa { min-width: 0; display: grid; gap: 22px; align-content: start; }
.coluna-mapa .cartao { margin-bottom: 0; }
.faixa { padding: 0 clamp(20px, 4vw, 42px) 22px; background: var(--page); }
.faixa:last-child { padding-bottom: 34px; }
.faixa .cartao { margin-bottom: 0; }

[id] { scroll-margin-top: 80px; }

/* Console lateral — as ações do mapa saem do meio da página */
.console {
  align-self: start; position: sticky; top: 88px;
  background: linear-gradient(180deg, var(--cardTop), var(--cardBot));
  border: 1px solid var(--line); border-radius: 18px;
  padding: 20px;
}
.console-titulo {
  font-family: var(--rotulo);
  font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--mut);
  margin-bottom: 14px;
}
.console form { margin: 0; }
.console-rotulo {
  font-size: 12px; font-weight: 600;
  color: var(--sec);
  margin-bottom: 6px;
}
.console .linha-dupla { display: flex; gap: 8px; margin-bottom: 10px; }
.console .linha-dupla input { width: 82px; flex: 0 0 auto; }
.console .linha-dupla select { flex: 1; }
.console button[type="submit"] { width: 100%; }
.console .nota { margin-top: 7px; font-size: 11.5px; color: var(--mut); text-align: center; }
.console-separador { height: 1px; background: var(--line); margin: 16px -20px; }
.console .campos { display: grid; gap: 8px; margin-bottom: 12px; }
.console .campos small { font-size: 11.5px; color: var(--mut); line-height: 1.45; }

/* --------------------------------------------------------------------------
   7. Quatro Pilares e Cinco Elementos
   -------------------------------------------------------------------------- */

.titulo-secao { font-size: 25px; }

.pilares { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; }
.pilar {
  text-align: center;
  border: 1px solid var(--line); border-radius: 14px;
  padding: 15px 8px 13px;
  background: linear-gradient(180deg, var(--cardTop), var(--cardBot));
}
.pilar-rotulo {
  font-family: var(--rotulo);
  font-size: 10px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--mut);
}
.pilar .hanzi { font-family: var(--display); line-height: 1.1; }
.pilar .hanzi-gan { font-size: 44px; margin-top: 6px; }
.pilar .hanzi-zhi { font-size: 38px; margin-top: 7px; line-height: 1.15; }
.pilar .pinyin { font-size: 12px; color: var(--mut); }
.pilar .deus {
  display: inline-block; margin-top: 11px;
  padding: 3px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  color: var(--musgo);
  background: var(--chipBg); border: 1px solid var(--line);
}
.pilar .ocultos {
  margin-top: 9px;
  font-family: var(--display);
  font-size: 15px; letter-spacing: .18em;
  color: var(--mut);
}

.elementos { display: grid; gap: 12px; }
.elemento-linha {
  display: grid; grid-template-columns: 88px 1fr 26px;
  align-items: center; gap: 14px;
}
.elemento-nome { font-weight: 600; }
.barra {
  display: block;
  height: 11px; border-radius: 999px;
  background: var(--track); border: 1px solid var(--line);
  overflow: hidden;
}
.barra-cheia {
  display: block;  /* span inline ignoraria width/height */
  height: 100%; border-radius: 999px;
  transform-origin: left;
  animation: crescer 1s cubic-bezier(.2, .8, .2, 1) both;
}
.elemento-valor {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--mut); font-size: 14px;
}
.elementos-nota {
  margin: 14px 0 0; padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 14px; color: var(--sec); line-height: 1.55;
}

.dia-mestre-destaque {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--sec); font-size: 14px;
}
.dia-mestre-destaque strong { font-family: var(--display); font-size: 22px; }

/* --------------------------------------------------------------------------
   8. Da Yun
   -------------------------------------------------------------------------- */

.dayun-cabeca {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.dayun-ano-ref { font-size: 13.5px; color: var(--sec); }
.dayun-ano-ref strong { color: var(--heading); font-family: var(--display); font-size: 16px; }
.dayun {
  display: flex; gap: 10px;
  overflow-x: auto;
  padding: 18px 2px 8px;
  scrollbar-width: thin;
}
.dayun-item {
  position: relative; flex: 0 0 auto;
  min-width: 104px; text-align: center;
  border: 1px solid var(--line); border-radius: 13px;
  padding: 14px 10px;
  background: linear-gradient(180deg, var(--cardTop), var(--cardBot));
}
.dayun-item.atual::after {
  content: "";
  position: absolute; inset: 0;
  border: 1.5px solid var(--gold); border-radius: 13px;
  box-shadow: var(--vidaGlow);
  pointer-events: none;
}
.dayun-anos { font-size: 12px; color: var(--mut); font-variant-numeric: tabular-nums; }
.dayun-ganzhi {
  font-family: var(--display);
  font-size: 29px; line-height: 1.2;
  color: var(--ink);
  min-height: 35px;
}
.dayun-meta { font-size: 12px; color: var(--mut); }
.dayun-deus {
  display: inline-block; margin-top: 8px;
  padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  color: var(--musgo); background: var(--chipBg);
}

/* --------------------------------------------------------------------------
   9. Zi Wei Dou Shu
   -------------------------------------------------------------------------- */

.zw-cabeca {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.zw-legenda { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.zw-legenda span {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px;
  background: var(--chipBg); border: 1px solid var(--line);
  color: var(--sec);
}
.zw-legenda .sorte { border-color: var(--jade); color: var(--jade); }
.zw-legenda .brilho-ex { color: var(--gold); font-size: 10px; }
.zw-legenda .sihua-ex { color: var(--seal); font-size: 10px; }

.zw-rolagem { overflow-x: auto; }
.zw-grade {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, minmax(150px, auto));
  gap: 11px;
}
.zw-palacio {
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 13px;
  background: linear-gradient(180deg, var(--cardTop), var(--cardBot));
}
.zw-palacio.zw-vida::after {
  content: "";
  position: absolute; inset: 0;
  border: 1.5px solid var(--vida); border-radius: 14px;
  box-shadow: var(--vidaGlow);
  pointer-events: none;
}
.zw-cabeca-palacio {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
}
.zw-nome { font-family: var(--rotulo); font-size: 12px; font-weight: 700; color: var(--sec); }
.zw-nome i {
  font-family: var(--display); font-style: normal; font-weight: 600;
  color: var(--mut); margin-left: 5px;
}
.zw-ganzhi { font-family: var(--display); font-size: 15px; color: var(--mut); }
.zw-corpo {
  align-self: flex-start; margin-top: 4px;
  padding: 1px 8px; border-radius: 999px;
  font-family: var(--rotulo);
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--seal); background: var(--chipBg);
}
.zw-principais { margin: 9px 0 8px; color: var(--ink); min-height: 30px; }
.zw-estrela {
  font-family: var(--display);
  font-size: 22px; font-weight: 600;
  margin-right: 9px; white-space: nowrap;
}
.zw-brilho, .zw-sihua { font-family: var(--texto); font-size: 10px; margin-left: 1px; }
.zw-brilho { color: var(--gold); }
.zw-sihua-lu { color: var(--shLu); }
.zw-sihua-quan { color: var(--shQuan); }
.zw-sihua-ke { color: var(--shKe); }
.zw-sihua-ji { color: var(--shJi); }

.zw-aux {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--sec);
}
.zw-aux > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.zw-aux > span::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  flex: 0 0 auto;
}
.zw-boa::before { background: var(--dotGood); }
.zw-ma::before { background: var(--dotBad); }
.zw-menor::before { background: var(--dotMinor); }
.zw-menor { color: var(--mut); }

.zw-rodape {
  margin-top: auto; padding-top: 10px;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.zw-decada { font-size: 11.5px; color: var(--mut); font-variant-numeric: tabular-nums; }
.zw-sorte {
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: 999px;
  background: var(--chipBg); border: 1px solid var(--jade);
  color: var(--jade);
  font-family: var(--rotulo);
  font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.zw-centro {
  grid-row: 2 / span 2; grid-column: 2 / span 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  text-align: center;
  border: 1px dashed var(--line); border-radius: 16px;
  background: var(--chipBg);
  padding: 16px;
}
.zw-centro-nome { font-family: var(--display); font-size: 32px; font-weight: 600; color: var(--heading); }
.zw-centro .detalhe { font-size: 12.5px; }
.zw-centro-selo {
  margin-top: 6px;
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--seal);
  display: grid; place-items: center;
  font-family: var(--display); font-size: 29px; color: var(--seal);
}

/* Posições fixas dos 12 palácios na grade 4×4 (índice absoluto do ramo:
   子=0 … 亥=11). Não mexer sem redesenhar a grade. */
.zw-pos-5  { grid-row: 1; grid-column: 1; }
.zw-pos-6  { grid-row: 1; grid-column: 2; }
.zw-pos-7  { grid-row: 1; grid-column: 3; }
.zw-pos-8  { grid-row: 1; grid-column: 4; }
.zw-pos-4  { grid-row: 2; grid-column: 1; }
.zw-pos-9  { grid-row: 2; grid-column: 4; }
.zw-pos-3  { grid-row: 3; grid-column: 1; }
.zw-pos-10 { grid-row: 3; grid-column: 4; }
.zw-pos-2  { grid-row: 4; grid-column: 1; }
.zw-pos-1  { grid-row: 4; grid-column: 2; }
.zw-pos-0  { grid-row: 4; grid-column: 3; }
.zw-pos-11 { grid-row: 4; grid-column: 4; }

/* --------------------------------------------------------------------------
   10. Leituras — abas + página de papel
   -------------------------------------------------------------------------- */

.leituras-cabeca {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.leituras-cabeca .eyebrow { letter-spacing: .16em; font-weight: 700; }

.abas {
  margin-left: auto;
  display: inline-flex; gap: 4px; padding: 4px;
  border-radius: 999px;
  background: var(--chipBg); border: 1px solid var(--line);
}
.abas button {
  padding: 7px 17px;
  border: 1px solid transparent; border-radius: 999px;
  background: transparent;
  color: var(--mut);
  font-family: var(--rotulo);
  font-size: 13px; font-weight: 600;
  white-space: nowrap;
}
.abas button.ativo {
  background: var(--cardTop);
  border-color: var(--line);
  color: var(--heading);
}

.papel {
  background: var(--paperBg);
  border-radius: 20px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .5);
  overflow: hidden;
  margin-bottom: 18px;
}
.papel-cabeca {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 17px clamp(18px, 3vw, 30px);
  background: var(--paperBox);
  border-bottom: 1px solid var(--paperBoxBorder);
}
.papel-titulo { font-family: var(--display); font-size: 22px; font-weight: 600; color: var(--paperHead); }
.papel-cabeca .selo-meta {
  padding: 3px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, .5);
  border: 1px solid var(--paperBoxBorder);
  font-size: 12.5px; color: var(--paperMeta);
}
.papel-cabeca .modelo { margin-left: auto; font-size: 12.5px; color: var(--paperMeta); }

.papel-corpo { padding: 32px clamp(22px, 5vw, 64px) 30px; }
.leitura-texto {
  max-width: 64ch; margin: 0 auto;
  color: var(--paperInk);
  font-family: var(--texto);
  font-size: 17px; line-height: 1.82;
}
.leitura-texto h1, .leitura-texto h2, .leitura-texto h3 {
  font-family: var(--display);
  font-size: 24px; font-weight: 600;
  color: var(--paperHead);
  margin: 28px 0 8px;
  letter-spacing: -.005em;
}
.leitura-texto h1:first-child, .leitura-texto h2:first-child, .leitura-texto h3:first-child { margin-top: 0; }
.leitura-texto p { margin: 0 0 16px; }
.leitura-texto strong { color: var(--paperHead); }
.leitura-texto ul, .leitura-texto ol { padding-left: 22px; }
.leitura-texto li { margin-bottom: 8px; }
.leitura-texto blockquote {
  margin: 20px 0; padding: 18px 24px;
  border-radius: 16px;
  background: var(--paperBox);
  border: 1px solid var(--paperBoxBorder);
}
.leitura-texto hr { border: none; border-top: 1px solid var(--paperBoxBorder); margin: 28px 0; }

.leitura-vazia {
  padding: 34px; text-align: center;
  border: 1px dashed var(--line); border-radius: 18px;
  color: var(--mut);
}

/* --------------------------------------------------------------------------
   11. Índice — painel da família
   -------------------------------------------------------------------------- */

.painel-resumo { display: flex; gap: 28px; flex-wrap: wrap; margin: 4px 0 22px; }
.resumo-item { display: flex; flex-direction: column; }
.resumo-numero {
  font-family: var(--display);
  font-size: 40px; font-weight: 600; line-height: 1;
  color: var(--gold);
}
.resumo-rotulo {
  font-family: var(--rotulo);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--mut);
  margin-top: 4px;
}

.lista-pessoas { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.cartao-pessoa {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 16px;
  border: 1px solid var(--line); border-radius: 15px;
  background: linear-gradient(180deg, var(--cardTop), var(--cardBot));
  text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.cartao-pessoa:hover { border-color: var(--gold); transform: translateY(-1px); }
.inicial {
  flex: 0 0 auto;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--chipBg); border: 1px solid var(--line);
  font-family: var(--display); font-size: 22px;
  color: var(--seal);
}
.pessoa-dados { min-width: 0; flex: 1; }
.pessoa-nome {
  display: block;
  font-family: var(--display);
  font-size: 19px; font-weight: 600;
  color: var(--heading); line-height: 1.15;
}
.pessoa-data { display: block; font-size: 12.5px; color: var(--mut); }
.pessoa-sinais { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.sinal {
  padding: 2px 8px; border-radius: 999px;
  background: var(--chipBg); border: 1px solid var(--line);
  font-family: var(--rotulo);
  font-size: 10.5px; color: var(--sec);
  white-space: nowrap;
}
.sinal.ok { color: var(--musgo); border-color: color-mix(in srgb, var(--musgo) 45%, var(--line)); }
.sinal.pendente { color: var(--mut); }
.seta { flex: 0 0 auto; color: var(--mut); font-size: 20px; }

.abrir-cadastro {
  display: block; width: 100%; margin-top: 16px;
  padding: 13px;
  border: 1px dashed var(--line); border-radius: 14px;
  background: transparent; color: var(--sec);
  font-family: var(--rotulo);
  font-weight: 600; font-size: 14px;
  text-align: center; text-decoration: none;
}
.abrir-cadastro:hover { border-color: var(--gold); color: var(--heading); }

.form-cadastro { display: grid; gap: 14px; max-width: 520px; }
.form-cadastro button[type="submit"] { justify-self: start; }

/* --------------------------------------------------------------------------
   12. Família — matriz de papéis
   -------------------------------------------------------------------------- */

.matriz-cabeca {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 20px 24px;
  background: linear-gradient(180deg, var(--cardTop), var(--cardBot));
  border-bottom: 1px solid var(--line);
}
.matriz-legenda { display: flex; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.matriz-legenda span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--sec);
}
.matriz-legenda i { width: 9px; height: 9px; border-radius: 2px; }

.matriz-rolagem { padding: 20px 24px 24px; overflow-x: auto; }
.matriz { min-width: 640px; display: grid; gap: 8px; align-items: stretch; }
.matriz-canto {
  font-family: var(--rotulo);
  font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--mut);
  display: flex; align-items: flex-end;
  padding: 0 0 8px 4px;
}
.matriz-coluna {
  text-align: center;
  font-family: var(--display);
  font-size: 16px; font-weight: 600;
  color: var(--heading);
  padding: 0 4px 8px;
  border-bottom: 1px solid var(--line);
}
.matriz-linha { display: contents; }
.matriz-rotulo {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 4px;
  border-right: 1px solid var(--line);
  text-decoration: none;
}
.matriz-rotulo .inicial { width: 32px; height: 32px; font-size: 16px; }
.matriz-rotulo .nome {
  font-family: var(--display);
  font-size: 17px; color: var(--heading); line-height: 1.1;
}
.matriz-celula {
  display: flex; align-items: center; justify-content: center;
  min-height: 52px;
  border-radius: 11px;
  background: var(--chipBg); border: 1px solid var(--line);
  font-size: 13.5px; font-weight: 600;
  color: var(--mut);
}
.matriz-celula.diagonal { background: transparent; border-style: dashed; }
.matriz-celula.vazia { opacity: .55; }
.matriz-celula form { margin: 0; width: 100%; height: 100%; }
.matriz-celula button {
  width: 100%; height: 100%; min-height: 50px; padding: 6px;
  border: none; background: transparent;
  font-family: var(--rotulo);
  font-size: 13.5px; font-weight: 600;
  color: inherit;
  border-radius: 10px;
}
.matriz-celula button:hover { background: color-mix(in srgb, currentColor 10%, transparent); }

/* Cores por papel (o Jinja escolhe a classe) */
.papel-conjuge { color: var(--seal); }
.papel-ascendente { color: var(--gold); }   /* mãe, pai, avó, avô */
.papel-descendente { color: var(--jade); }  /* filha, filho, neta, neto */
.papel-lateral { color: var(--musgo); }     /* irmã(o), tia(o), sobrinha(o), prima(o) */

.matriz-nota { margin-top: 14px; font-size: 12.5px; color: var(--mut); line-height: 1.5; }

.retrato-pessoas {
  border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 16px; margin: 0;
}
.retrato-pessoas legend {
  font-family: var(--rotulo);
  font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--mut);
  padding: 0 6px;
}
.retrato-check {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0 14px 6px 0;
  font-size: 14px; font-weight: 400; color: var(--sec);
}
.retrato-pessoas small { display: block; margin-top: 6px; font-size: 11.5px; color: var(--mut); }

.form-geracao { display: grid; gap: 14px; max-width: 560px; margin-bottom: 22px; }
.form-geracao button[type="submit"] { justify-self: start; }
.form-geracao .campo-ano { max-width: 180px; }

.chips-incluidos { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.chips-incluidos span {
  padding: 3px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, .5);
  border: 1px solid var(--paperBoxBorder);
  font-size: 12px; color: var(--paperMeta);
}

/* --------------------------------------------------------------------------
   13. Login
   -------------------------------------------------------------------------- */

/* A tela de login ocupa a página inteira — sem cabeçalho, sem respiro do main */
body:has(.tela-login) main { max-width: none; padding: 0; }

.tela-login {
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 44px 24px;
  position: relative; overflow: hidden;
}
.tela-login .estrelas {
  position: absolute; top: 12%; left: 34%;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 90px 30px 0 -1px var(--sec), 180px -6px 0 -1px var(--mut),
              40px 90px 0 -1px var(--sec), 210px 70px 0 0 var(--gold);
  opacity: .5; pointer-events: none;
}
.login-caixa { width: 100%; max-width: 360px; position: relative; }
.login-marca { text-align: center; margin-bottom: 30px; }
.login-selo {
  width: 74px; height: 74px; margin: 0 auto 16px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--sealBg);
  border: 1px solid var(--sealBorder);
  box-shadow: var(--sealGlow);
  font-family: var(--display); font-size: 40px; color: var(--seal);
}
.login-titulo { font-family: var(--display); font-size: 38px; font-weight: 600; line-height: 1; color: var(--heading); }
.login-marca .eyebrow { margin-top: 8px; font-size: 10px; letter-spacing: .22em; }
.login-saudacao { text-align: center; margin-bottom: 22px; }
.login-saudacao strong { display: block; font-family: var(--display); font-size: 24px; font-weight: 600; color: var(--heading); }
.login-saudacao span { font-size: 14px; color: var(--sec); }
.login-caixa input { padding: 13px 14px; border-radius: 13px; font-size: 15px; margin-bottom: 14px; }
.login-caixa button[type="submit"] { width: 100%; padding: 14px; border-radius: 13px; font-size: 15px; }
.login-erro {
  margin-bottom: 14px; padding: 10px 13px;
  border-radius: 11px;
  background: rgba(210, 90, 70, .14);
  border: 1px solid var(--seal);
  color: var(--seal); font-size: 13px;
}
.login-rodape { text-align: center; margin-top: 16px; font-size: 12px; color: var(--mut); }

/* --------------------------------------------------------------------------
   14. Rodapé de ações
   -------------------------------------------------------------------------- */

.rodape-acoes {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.rodape-acoes a { color: var(--sec); text-decoration: none; font-family: var(--rotulo); font-size: 13px; }
.rodape-acoes a:hover { color: var(--heading); }
.rodape-acoes form { margin: 0; }

/* Destaque do Palácio da Vida — só no celular (ver @media abaixo) */
.vida-destaque { display: none; }

/* --------------------------------------------------------------------------
   15. Responsivo
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  .corpo-mapa { grid-template-columns: 1fr; }
  .console { position: static; }
  .zw-grade { min-width: 720px; }
}

@media (max-width: 640px) {
  main { padding: 18px 14px 48px; }
  .topo { gap: 10px; padding: 12px 14px; }
  .subtitulo { display: none; }
  .logo { font-size: 20px; }
  .nav-topo { gap: 2px; }
  .nav-topo a, .nav-topo .sair { padding: 7px 10px; font-size: 12px; }
  .tema-gatilho .rotulo-tema { display: none; }
  .tema-gatilho { padding: 7px 10px; }
  .tema-painel { width: min(288px, calc(100vw - 28px)); }

  .moldura { border-radius: 18px; }
  .hero { padding: 26px 18px 24px; }
  .hero-linha { flex-direction: row; align-items: center; gap: 14px; }
  .hero-nome { font-size: 32px; margin: 4px 0 10px; }
  .hero-chips .chip { font-size: 12.5px; padding: 5px 11px; }
  .selo { width: 66px; height: 66px; }
  .selo::before { inset: 5px; }
  .selo span { font-size: 34px; }
  .selo-legenda { display: none; }

  .nav-mapa {
    flex-wrap: nowrap; overflow-x: auto;
    padding: 14px 18px 4px;
    scrollbar-width: none;
  }
  .nav-mapa::-webkit-scrollbar { display: none; }

  .corpo-mapa, .faixa { padding-left: 18px; padding-right: 18px; }
  .cartao { padding: 18px 16px 20px; border-radius: 16px; }
  .titulo-secao { font-size: 21px; }

  .pilares { grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .pilar { padding: 11px 8px; border-radius: 13px; }
  .pilar .hanzi-gan { font-size: 34px; }
  .pilar .hanzi-zhi { font-size: 30px; }

  .elemento-linha { grid-template-columns: 64px 1fr 20px; gap: 10px; }
  .elemento-nome { font-size: 13px; }

  .zw-grade { min-width: 660px; grid-template-rows: repeat(4, minmax(132px, auto)); }
  .zw-estrela { font-size: 19px; margin-right: 7px; }
  .zw-centro-nome { font-size: 24px; }

  .abas { margin-left: 0; width: 100%; overflow-x: auto; }
  .papel-corpo { padding: 24px 18px 22px; }
  .leitura-texto { font-size: 16px; }
  .leitura-texto h1, .leitura-texto h2, .leitura-texto h3 { font-size: 21px; }

  .painel-resumo { gap: 18px; }
  .resumo-numero { font-size: 32px; }

  .matriz-cabeca, .matriz-rolagem { padding-left: 16px; padding-right: 16px; }
  .matriz-legenda { margin-left: 0; }

  /* No celular a grade 4×4 rola na horizontal, então o palácio mais
     importante ganha um resumo fixo antes dela. */
  .vida-destaque {
    display: block;
    margin-bottom: 16px; padding: 14px 15px;
    border: 1px solid var(--vida); border-radius: 15px;
    background: var(--chipBg);
  }
  .vida-destaque .topo-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
  .vida-destaque .rotulo { font-family: var(--rotulo); font-size: 11px; font-weight: 700; color: var(--jade); }
  .vida-destaque .indice { font-size: 12px; font-weight: 700; color: var(--jade); }
  .vida-destaque .estrelas-vida { font-family: var(--display); font-size: 22px; color: var(--ink); margin-top: 4px; }
  .vida-destaque .nota { font-size: 12px; color: var(--sec); margin-top: 4px; }
}

/* Alvos de toque confortáveis no celular */
@media (pointer: coarse) {
  .nav-topo a, .nav-topo button, .abas button, .nav-mapa a {
    min-height: 40px; display: inline-flex; align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .topo, .nav-mapa, .console, .abas, .rodape-acoes, .form-geracao { display: none; }
  body { background: #fff; color: #000; }
  .papel { box-shadow: none; }
}