/* ==========================================================================
   css/style.css — DOSSIÊ · design system da tela (media="screen")
   --------------------------------------------------------------------------
   Direção: uma central de operações de uma organização secreta,
   reinterpretada como produto digital. Três ideias guiam tudo:
   - ARQUIVO PARANORMAL: rótulos de documento (mono, caixa alta), carimbos,
     códigos de registro, fichas catalogadas;
   - TECNOLOGIA SOFISTICADA: tipografia editorial, vidro fumê criterioso,
     hierarquia clara e controles precisos;
   - HORROR INVESTIGATIVO: escuro profundo, luz ambiente dramática, grão,
     selos e símbolos dos elementos.
   Organização:
    1. Fontes (locais, OFL)            8. Ficha: estrutura, trilho e índice
    2. Tokens                          9. Ficha: capa do dossiê
    3. Temas elementais               10. Ficha: componentes das seções
    4. Base                           11. Painel de rolagens
    5. Atmosfera                      12. Janelas (<dialog>) e avisos
    6. Primitivos (botões, campos…)   13. Responsivo
    7. Estrutura do app, Central,     14. Movimento, transparência e
       Arquivo                            contraste (preferências do sistema)
   Os temas são SÓ visuais: mudam tokens de cor, luz e textura dentro de
   [data-elemento] (a ficha, o painel de rolagens e a atmosfera). A barra
   global, a Central e o Arquivo mantêm a identidade institucional.
   A impressão não usa este arquivo (css/print-base.css + css/print.css).
   ========================================================================== */

/* ==========================================================================
   1. FONTES — arquivos locais (funciona offline e em file://). Licença OFL
      em fonts/OFL-*.txt.
   ========================================================================== */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   2. TOKENS
   ========================================================================== */

/* Cores que mudam com o tema são registradas: assim a troca de tema
   interpola as cores (transição suave) em vez de piscar. */
@property --acento { syntax: "<color>"; inherits: true; initial-value: #c9a45c; }
@property --acento-claro { syntax: "<color>"; inherits: true; initial-value: #e3c58a; }
@property --acento-2 { syntax: "<color>"; inherits: true; initial-value: #c4483e; }
@property --luz-a { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --luz-b { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --tinta-superficie { syntax: "<color>"; inherits: true; initial-value: #14171b; }
/* Registrada como comprimento: o JS lê o valor já calculado (índice da ficha) */
@property --topo-fixo { syntax: "<length>"; inherits: true; initial-value: 60px; }

/* ==========================================================================
   2a. PALETAS DO SITE (Etapa 10) — a ÚNICA fonte de cor fixa do arquivo.
       Escuro (padrão, em :root), Claro e Alto contraste, todos em #rrggbb.
       Automático = sem data-tema no <html>, mais o @media do sistema (claro).
       Os pares que o teste de contraste confere estão em data/temas.js.
       Elementos (Sangue, Morte, Conhecimento, Energia, Medo) também são
       variáveis por tema e nunca são a única informação (sempre há texto).
   ========================================================================== */
:root {
  --cor-fundo: #0a0b0d;
  --cor-superficie: #14171b;
  --cor-texto: #ece6da;
  --cor-texto-suave: #bab3a6;
  --cor-texto-fraco: #938d82;
  --cor-texto-mudo: #88827a; /* o tom mais apagado que ainda lê em 4,5:1 sobre as superfícies */
  --cor-destaque: #c9a45c;
  --cor-destaque-claro: #e3c58a;
  --cor-destaque-texto: #17120a;
  --cor-borda: #4a4741;
  --cor-perigo: #e86a5e;
  --cor-perigo-claro: #e7675c;
  --cor-perigo-forte: #b8362d;
  --cor-perigo-texto: #fff3f1;
  --cor-aviso: #e2b354;
  --cor-sucesso: #82b38c;
  --cor-foco: #e3c58a;
  --cor-carimbo: #d9584d;
  --cor-sombra: #000000;
  --cor-realce: #ffffff;
  --cor-aco: #a6b8cc;
  --cor-poco: #000000;
  /* Temas elementais da ficha (data-elemento): acento, acento claro, 2º e 3º acentos e tinta sobre o acento */
  --tema-sangue: #ec4636; --tema-sangue-claro: #ff7b68; --tema-sangue-2: #a41d16; --tema-sangue-3: #ff5a2a; --tema-sangue-texto: #1a0605;
  --tema-morte: #ab9bd3; --tema-morte-claro: #cfc3f0; --tema-morte-2: #5e5a6e; --tema-morte-3: #ab9bd3; --tema-morte-texto: #120f1a;
  --tema-conhecimento: #e3c04e; --tema-conhecimento-claro: #f7df8f; --tema-conhecimento-2: #8a6a2a; --tema-conhecimento-3: #e3c04e; --tema-conhecimento-texto: #191304;
  --tema-energia: #b571ff; --tema-energia-claro: #d9adff; --tema-energia-2: #2fe0ff; --tema-energia-3: #ff4fd8; --tema-energia-texto: #12051f;
  --tema-medo: #ebe8e1; --tema-medo-claro: #ffffff; --tema-medo-2: #7d7d7d; --tema-medo-3: #ebe8e1; --tema-medo-texto: #0a0a0a;
  /* Recursos e elementos (as marcas do jogo) */
  --cor-pv: #e65a50;
  --cor-pe: #eb9b48;
  --cor-san: #8d9ef2;
  --cor-sangue: #e0473c;
  --cor-morte: #a594c8;
  --cor-conhecimento: #d9b35a;
  --cor-energia: #b06bff;
  --cor-transmissao: #5cc18a;
  --cor-intencao: #c4795a;
  --cor-medo: #e9e6df;
  /* Degraus de superfície, do mais fundo ao mais alto */
  --tinta-0: #050607;
  --tinta-1: #0a0b0d;
  --tinta-2: #0f1114;
  --tinta-3: #14171b;
  --tinta-4: #1b1e23;
  --tinta-5: #23272d;
  --campo-fundo: #0b0d10;
  /* 0 nos temas escuro e de alto contraste, 1 no claro: o elemento tinge o papel só no claro */
  --claro: 0;
  --cor-sombra-suave: color-mix(in srgb, var(--cor-sombra) 70%, transparent);
  color-scheme: dark;
}

/* Claro */
:root[data-tema="claro"] {
  --cor-fundo: #f4efe4;
  --cor-superficie: #fbf8f1;
  --cor-texto: #1c1a15;
  --cor-texto-suave: #47433a;
  --cor-texto-fraco: #5a564b;
  --cor-texto-mudo: #625e53;
  --cor-destaque: #7a5a14;
  --cor-destaque-claro: #a07a22;
  --cor-destaque-texto: #ffffff;
  --cor-borda: #b9b2a1;
  --cor-perigo: #a8281f;
  --cor-perigo-claro: #c4382d;
  --cor-perigo-forte: #a8281f;
  --cor-perigo-texto: #ffffff;
  --cor-aviso: #7d5200;
  --cor-sucesso: #2b6535;
  --cor-foco: #1d5bbf;
  --cor-carimbo: #a8281f;
  --cor-sombra: #3a3326;
  --cor-realce: #ffffff;
  --cor-aco: #4c5e75;
  --cor-poco: #b9b2a1;
  /* Temas elementais da ficha (data-elemento): acento, acento claro, 2º e 3º acentos e tinta sobre o acento */
  --tema-sangue: #b5200f; --tema-sangue-claro: #d63a22; --tema-sangue-2: #c71f0d; --tema-sangue-3: #c2410c; --tema-sangue-texto: #ffffff;
  --tema-morte: #5b4a8f; --tema-morte-claro: #7d6bb3; --tema-morte-2: #5e5a6e; --tema-morte-3: #5b4a8f; --tema-morte-texto: #ffffff;
  --tema-conhecimento: #7a5a14; --tema-conhecimento-claro: #a07a22; --tema-conhecimento-2: #8a6a2a; --tema-conhecimento-3: #7a5a14; --tema-conhecimento-texto: #ffffff;
  --tema-energia: #6a2fb8; --tema-energia-claro: #8c52d9; --tema-energia-2: #0a7a96; --tema-energia-3: #b0208f; --tema-energia-texto: #ffffff;
  --tema-medo: #333333; --tema-medo-claro: #555555; --tema-medo-2: #6b6b6b; --tema-medo-3: #333333; --tema-medo-texto: #ffffff;
  --cor-pv: #b3302a;
  --cor-pe: #9a560f;
  --cor-san: #3f55c4;
  --cor-sangue: #b3261b;
  --cor-morte: #5d4a96;
  --cor-conhecimento: #7a5a14;
  --cor-energia: #6a2fb8;
  --cor-transmissao: #2b7a50;
  --cor-intencao: #8f4426;
  --cor-medo: #3b3b3b;
  --tinta-0: #ebe5d6;
  --tinta-1: #f4efe4;
  --tinta-2: #f8f4ea;
  --tinta-3: #fbf8f1;
  --tinta-4: #ffffff;
  --tinta-5: #efe9db;
  --campo-fundo: #ffffff;
  --claro: 1;
  color-scheme: light;
}

/* Automático: o sistema pede claro e o usuário não escolheu um tema */
@media (prefers-color-scheme: light) {
  :root:not([data-tema]) {
    --cor-fundo: #f4efe4;
    --cor-superficie: #fbf8f1;
    --cor-texto: #1c1a15;
    --cor-texto-suave: #47433a;
    --cor-texto-fraco: #5a564b;
    --cor-texto-mudo: #625e53;
    --cor-destaque: #7a5a14;
    --cor-destaque-claro: #a07a22;
    --cor-destaque-texto: #ffffff;
    --cor-borda: #b9b2a1;
    --cor-perigo: #a8281f;
    --cor-perigo-claro: #c4382d;
    --cor-perigo-forte: #a8281f;
    --cor-perigo-texto: #ffffff;
    --cor-aviso: #7d5200;
    --cor-sucesso: #2b6535;
    --cor-foco: #1d5bbf;
    --cor-carimbo: #a8281f;
    --cor-sombra: #3a3326;
    --cor-realce: #ffffff;
    --cor-aco: #4c5e75;
    --cor-poco: #b9b2a1;
    /* Temas elementais da ficha (data-elemento): acento, acento claro, 2º e 3º acentos e tinta sobre o acento */
    --tema-sangue: #b5200f; --tema-sangue-claro: #d63a22; --tema-sangue-2: #c71f0d; --tema-sangue-3: #c2410c; --tema-sangue-texto: #ffffff;
    --tema-morte: #5b4a8f; --tema-morte-claro: #7d6bb3; --tema-morte-2: #5e5a6e; --tema-morte-3: #5b4a8f; --tema-morte-texto: #ffffff;
    --tema-conhecimento: #7a5a14; --tema-conhecimento-claro: #a07a22; --tema-conhecimento-2: #8a6a2a; --tema-conhecimento-3: #7a5a14; --tema-conhecimento-texto: #ffffff;
    --tema-energia: #6a2fb8; --tema-energia-claro: #8c52d9; --tema-energia-2: #0a7a96; --tema-energia-3: #b0208f; --tema-energia-texto: #ffffff;
    --tema-medo: #333333; --tema-medo-claro: #555555; --tema-medo-2: #6b6b6b; --tema-medo-3: #333333; --tema-medo-texto: #ffffff;
    --cor-pv: #b3302a;
    --cor-pe: #9a560f;
    --cor-san: #3f55c4;
    --cor-sangue: #b3261b;
    --cor-morte: #5d4a96;
    --cor-conhecimento: #7a5a14;
    --cor-energia: #6a2fb8;
    --cor-transmissao: #2b7a50;
    --cor-intencao: #8f4426;
    --cor-medo: #3b3b3b;
    --tinta-0: #ebe5d6;
    --tinta-1: #f4efe4;
    --tinta-2: #f8f4ea;
    --tinta-3: #fbf8f1;
    --tinta-4: #ffffff;
    --tinta-5: #efe9db;
    --campo-fundo: #ffffff;
    --claro: 1;
    color-scheme: light;
  }
}

/* Alto contraste: preto e branco, sem transparências, bordas fortes */
:root[data-tema="contraste"] {
  --cor-fundo: #000000;
  --cor-superficie: #0a0a0a;
  --cor-texto: #ffffff;
  --cor-texto-suave: #f0f0f0;
  --cor-texto-fraco: #dcdcdc;
  --cor-texto-mudo: #d0d0d0;
  --cor-destaque: #ffd84d;
  --cor-destaque-claro: #fff0a0;
  --cor-destaque-texto: #000000;
  --cor-borda: #ffffff;
  --cor-perigo: #ff9a90;
  --cor-perigo-claro: #ffb3ab;
  --cor-perigo-forte: #ff9a90;
  --cor-perigo-texto: #000000;
  --cor-aviso: #ffc247;
  --cor-sucesso: #86ffa9;
  --cor-foco: #4dd8ff;
  --cor-carimbo: #ff9a90;
  --cor-sombra: #000000;
  --cor-realce: #ffffff;
  --cor-aco: #c9dcf2;
  --cor-poco: #000000;
  /* Temas elementais da ficha (data-elemento): acento, acento claro, 2º e 3º acentos e tinta sobre o acento */
  --tema-sangue: #ff8a99; --tema-sangue-claro: #ffc0c8; --tema-sangue-2: #ff8a99; --tema-sangue-3: #ff8a99; --tema-sangue-texto: #000000;
  --tema-morte: #d2c4ff; --tema-morte-claro: #e6dcff; --tema-morte-2: #d2c4ff; --tema-morte-3: #d2c4ff; --tema-morte-texto: #000000;
  --tema-conhecimento: #ffd84d; --tema-conhecimento-claro: #fff0a0; --tema-conhecimento-2: #ffd84d; --tema-conhecimento-3: #ffd84d; --tema-conhecimento-texto: #000000;
  --tema-energia: #d8b0ff; --tema-energia-claro: #ecd2ff; --tema-energia-2: #7ff0ff; --tema-energia-3: #ff9be8; --tema-energia-texto: #000000;
  --tema-medo: #ffffff; --tema-medo-claro: #ffffff; --tema-medo-2: #d0d0d0; --tema-medo-3: #ffffff; --tema-medo-texto: #000000;
  --cor-pv: #ff8a80;
  --cor-pe: #ffb454;
  --cor-san: #a5b4ff;
  --cor-sangue: #ff8a80;
  --cor-morte: #d2c4ff;
  --cor-conhecimento: #ffd84d;
  --cor-energia: #d8b0ff;
  --cor-transmissao: #8af0b4;
  --cor-intencao: #f0a47e;
  --cor-medo: #ffffff;
  --tinta-0: #000000;
  --tinta-1: #000000;
  --tinta-2: #050505;
  --tinta-3: #0a0a0a;
  --tinta-4: #141414;
  --tinta-5: #1f1f1f;
  --campo-fundo: #000000;
  color-scheme: dark;
}

:root {
  /* ---- Linhas (sobre a tinta): o texto em transparência ---- */
  --linha-1: color-mix(in srgb, var(--cor-texto) 7%, transparent);
  --linha-2: color-mix(in srgb, var(--cor-texto) 12%, transparent);
  --linha-3: color-mix(in srgb, var(--cor-texto) 22%, transparent);

  /* ---- Papel (texto) ---- */
  --papel: var(--cor-texto);
  --papel-2: var(--cor-texto-suave);
  --papel-3: var(--cor-texto-fraco);
  --papel-4: var(--cor-texto-mudo);

  /* ---- Institucional ---- */
  --latao: var(--cor-destaque);
  --latao-claro: var(--cor-destaque-claro);
  --carimbo: var(--cor-carimbo);

  /* ---- Semânticas ---- */
  --ok: var(--cor-sucesso);
  --aviso: var(--cor-aviso);
  --erro: var(--cor-perigo);
  --ok-fundo: color-mix(in srgb, var(--cor-sucesso) 10%, transparent);
  --aviso-fundo: color-mix(in srgb, var(--cor-aviso) 8%, transparent);
  --aviso-borda: color-mix(in srgb, var(--cor-aviso) 34%, transparent);
  --erro-fundo: color-mix(in srgb, var(--cor-perigo) 9%, transparent);
  --erro-borda: color-mix(in srgb, var(--cor-perigo) 38%, transparent);

  /* ---- Recursos (regra do jogo: iguais em todos os temas elementais) ---- */
  --pv: var(--cor-pv);
  --pe: var(--cor-pe);
  --san: var(--cor-san);

  /* ---- Elementos (marcas dos rituais) ---- */
  --el-sangue: var(--cor-sangue);
  --el-morte: var(--cor-morte);
  --el-conhecimento: var(--cor-conhecimento);
  --el-energia: var(--cor-energia);
  --el-medo: var(--cor-medo);
  --el-transmissao: var(--cor-transmissao);
  --el-intencao: var(--cor-intencao);

  /* ---- Tema elemental da ficha (o neutro é a identidade institucional) ---- */
  --acento: var(--cor-destaque);
  --acento-claro: var(--cor-destaque-claro);
  --acento-2: var(--cor-carimbo);
  --acento-3: var(--cor-destaque);
  --acento-texto: var(--cor-destaque-texto);
  --acento-suave: color-mix(in oklab, var(--acento) 14%, transparent);
  --acento-linha: color-mix(in oklab, var(--acento) 42%, transparent);
  --brilho: color-mix(in oklab, var(--acento) 28%, transparent);
  --luz-a: color-mix(in srgb, var(--cor-destaque) 10%, transparent);
  --luz-b: color-mix(in srgb, var(--cor-texto-fraco) 7%, transparent);
  --tinta-superficie: var(--cor-superficie);

  /* ---- Vidro fumê ---- */
  --vidro: color-mix(in srgb, var(--tinta-2) 66%, transparent);
  --vidro-forte: color-mix(in srgb, var(--tinta-1) 86%, transparent);
  --vidro-borda: color-mix(in srgb, var(--cor-texto) 10%, transparent);
  --vidro-reflexo: linear-gradient(180deg, color-mix(in srgb, var(--cor-realce) 6.5%, transparent), transparent 38%);
  --vidro-desfoque: blur(18px) saturate(140%);

  /* ---- Tipografia ---- */
  --fonte-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --fonte-ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-mono: "IBM Plex Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --t-micro: 0.75rem;
  --t-rotulo: 0.6875rem;
  --t-pequeno: 0.7812rem;
  --t-corpo: 0.9062rem;
  --t-medio: 1rem;
  --t-grande: 1.25rem;
  --t-titulo: 1.875rem;

  /* ---- Espaço (base 4) ---- */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.25rem;
  --e6: 1.5rem;
  --e8: 2rem;
  --e10: 2.5rem;
  --e12: 3rem;
  --e16: 4rem;

  /* ---- Raios (pequenos: papel e metal, não "cartõezinhos") ---- */
  --raio-1: 3px;
  --raio-2: 6px;
  --raio-3: 10px;
  --raio-4: 16px;
  --raio-pilula: 999px;

  /* ---- Sombras ---- */
  --sombra-1: 0 1px 0 color-mix(in srgb, var(--cor-realce) 3.5%, transparent) inset, 0 1px 2px color-mix(in srgb, var(--cor-sombra) 45%, transparent);
  --sombra-2: 0 14px 34px -14px color-mix(in srgb, var(--cor-sombra) 75%, transparent), 0 1px 0 color-mix(in srgb, var(--cor-realce) 4%, transparent) inset;
  --sombra-3: 0 30px 70px -24px color-mix(in srgb, var(--cor-sombra) 85%, transparent), 0 1px 0 color-mix(in srgb, var(--cor-realce) 5%, transparent) inset;

  /* ---- Movimento ---- */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 600ms;
  --curva: cubic-bezier(0.2, 0.7, 0.2, 1);
  --curva-saida: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Medidas ---- */
  --altura-controle: 2.25rem;
  --altura-controle-p: 2rem;
  --barra-altura: 3.75rem;
  --topo-fixo: var(--barra-altura); /* tudo o que fica preso no topo (muda nos breakpoints) */
  --largura-app: 1440px;
  --margem-pagina: 2rem;
}

@media (pointer: coarse) {
  :root {
    --altura-controle: 2.75rem;
    --altura-controle-p: 2.5rem;
  }
}

/* ==========================================================================
   3. TEMAS ELEMENTAIS — interpretações artísticas com a mesma estrutura.
      Aplicados em .vista--ficha, .rolagens e .atmosfera (data-elemento).
   ========================================================================== */

[data-elemento] {
  --acento-suave: color-mix(in oklab, var(--acento) 14%, transparent);
  --acento-linha: color-mix(in oklab, var(--acento) 42%, transparent);
  --brilho: color-mix(in oklab, var(--acento) 28%, transparent);
}

/* Arquivo (neutro): grafite, latão e um carimbo vermelho (a paleta do site) */
[data-elemento="neutro"] {
  --acento: var(--cor-destaque);
  --acento-claro: var(--cor-destaque-claro);
  --acento-2: var(--cor-carimbo);
  --acento-texto: var(--cor-destaque-texto);
  --luz-a: color-mix(in srgb, var(--cor-destaque) 9%, transparent);
  --luz-b: color-mix(in srgb, var(--cor-texto-fraco) 6%, transparent);
  --tinta-superficie: var(--cor-superficie);
}

/* Sangue: carmesim, vermelho profundo, preto; luz avermelhada e orgânica */
[data-elemento="sangue"] {
  /* Carmesim puxado para o rosado: o vermelho-alaranjado é de PV (sinal fixo) */
  --acento: var(--tema-sangue);
  --acento-claro: var(--tema-sangue-claro);
  --acento-2: var(--tema-sangue-2);
  --acento-3: var(--tema-sangue-3);
  --acento-texto: var(--tema-sangue-texto);
  --papel-tom: #dc2a10;
  --papel-forca: 11%;
  --luz-a: color-mix(in srgb, var(--tema-sangue-2) calc(40% - 22% * var(--claro)), transparent);
  --luz-b: color-mix(in srgb, var(--tema-sangue-2) calc(30% - 20% * var(--claro)), transparent);
  --tinta-superficie: color-mix(in srgb, var(--cor-superficie) calc(93% - 3% * var(--claro)), var(--tema-sangue-2));
}

/* Morte: violetas fechados, cinzas frios, névoa difusa */
[data-elemento="morte"] {
  --acento: var(--tema-morte);
  --acento-claro: var(--tema-morte-claro);
  --acento-2: var(--tema-morte-2);
  --acento-3: var(--tema-morte-3);
  --acento-texto: var(--tema-morte-texto);
  --papel-tom: #6c68b0;
  --papel-forca: 22%;
  --luz-a: color-mix(in srgb, var(--tema-morte) calc(14% + 16% * var(--claro)), transparent);
  --luz-b: color-mix(in srgb, var(--tema-morte-2) calc(12% + 14% * var(--claro)), transparent);
  --tinta-superficie: color-mix(in srgb, var(--cor-superficie) calc(94% - 8% * var(--claro)), var(--tema-morte));
  --papel: color-mix(in oklab, var(--cor-texto) 90%, var(--tema-morte));
  --papel-2: color-mix(in oklab, var(--cor-texto-suave) 90%, var(--tema-morte));
  --papel-3: color-mix(in oklab, var(--cor-texto-fraco) 90%, var(--tema-morte));
}

/* Conhecimento: dourado envelhecido, amarelo controlado e grafite; diagramas */
[data-elemento="conhecimento"] {
  --acento: var(--tema-conhecimento);
  --acento-claro: var(--tema-conhecimento-claro);
  --acento-2: var(--tema-conhecimento-2);
  --acento-3: var(--tema-conhecimento-3);
  --acento-texto: var(--tema-conhecimento-texto);
  --papel-tom: #d6ad2e;
  --papel-forca: 13%;
  --luz-a: color-mix(in srgb, var(--tema-conhecimento) calc(13% + 5% * var(--claro)), transparent);
  --luz-b: color-mix(in srgb, var(--tema-conhecimento-2) calc(10% + 4% * var(--claro)), transparent);
  --tinta-superficie: color-mix(in srgb, var(--cor-superficie) 95%, var(--tema-conhecimento-2));
}

/* Energia: violeta elétrico, magenta e ciano; brilhos pontuais */
[data-elemento="energia"] {
  --acento: var(--tema-energia);
  --acento-claro: var(--tema-energia-claro);
  --acento-2: var(--tema-energia-2);
  --acento-3: var(--tema-energia-3);
  --acento-texto: var(--tema-energia-texto);
  --papel-tom: #8d4dff;
  --papel-forca: 16%;
  --luz-a: color-mix(in srgb, var(--tema-energia) calc(17% + 15% * var(--claro)), transparent);
  --luz-b: color-mix(in srgb, var(--tema-energia-2) calc(11% * (1 - var(--claro)) + 24% * var(--claro)), transparent);
  --tinta-superficie: color-mix(in srgb, var(--cor-superficie) calc(94% - 8% * var(--claro)), var(--tema-energia));
}

/* Medo: preto profundo, branco pálido e cinzas neutros; quase silêncio */
[data-elemento="medo"] {
  --acento: var(--tema-medo);
  --acento-claro: var(--tema-medo-claro);
  --acento-2: var(--tema-medo-2);
  --acento-3: var(--tema-medo-3);
  --acento-texto: var(--tema-medo-texto);
  --papel-tom: #4c5663;
  --papel-forca: 14%;
  --luz-a: color-mix(in srgb, var(--tema-medo) calc(3.5% + 5% * var(--claro)), transparent);
  --luz-b: color-mix(in srgb, var(--tema-medo) calc(2% + 4% * var(--claro)), transparent);
  --tinta-superficie: var(--cor-superficie);
  --linha-3: color-mix(in srgb, var(--cor-texto) 20%, transparent);
}

/* Alto contraste: o tema elemental muda só a cor do acento; nada de luz ou névoa */
:root[data-tema="contraste"] [data-elemento] {
  --luz-a: transparent;
  --luz-b: transparent;
  --tinta-superficie: var(--cor-superficie);
}

/* Tema claro: o papel e a barra ganham a cor do elemento (no escuro --claro vale 0 e nada muda) */
.atmosfera[data-elemento] {
  background: color-mix(in srgb, var(--tinta-1) calc(100% - var(--papel-forca, 0%) * var(--claro)), var(--papel-tom, var(--tinta-1)));
}

.atmosfera[data-elemento]:not([data-elemento="neutro"]):not([data-elemento="conhecimento"]) {
  --latao: color-mix(in srgb, var(--cor-destaque) calc(100% - 100% * var(--claro)), var(--acento));
}

body[data-vista="ficha"][data-tema-ficha="sangue"] {
  --latao: color-mix(in srgb, var(--cor-destaque) calc(100% - 100% * var(--claro)), var(--tema-sangue));
  --latao-claro: color-mix(in srgb, var(--cor-destaque-claro) calc(100% - 100% * var(--claro)), var(--tema-sangue-claro));
}

body[data-vista="ficha"][data-tema-ficha="morte"] {
  --latao: color-mix(in srgb, var(--cor-destaque) calc(100% - 100% * var(--claro)), var(--tema-morte));
  --latao-claro: color-mix(in srgb, var(--cor-destaque-claro) calc(100% - 100% * var(--claro)), var(--tema-morte-claro));
}

body[data-vista="ficha"][data-tema-ficha="energia"] {
  --latao: color-mix(in srgb, var(--cor-destaque) calc(100% - 100% * var(--claro)), var(--tema-energia));
  --latao-claro: color-mix(in srgb, var(--cor-destaque-claro) calc(100% - 100% * var(--claro)), var(--tema-energia-claro));
}

body[data-vista="ficha"][data-tema-ficha="medo"] {
  --latao: color-mix(in srgb, var(--cor-destaque) calc(100% - 100% * var(--claro)), var(--tema-medo));
  --latao-claro: color-mix(in srgb, var(--cor-destaque-claro) calc(100% - 100% * var(--claro)), var(--tema-medo-claro));
}

/* Troca de tema: as cores registradas deslizam (só enquanto troca) */
.trocando-tema .vista--ficha,
.trocando-tema .rolagens,
.trocando-tema .atmosfera {
  transition:
    --acento var(--dur-4) var(--curva),
    --acento-claro var(--dur-4) var(--curva),
    --acento-2 var(--dur-4) var(--curva),
    --luz-a 700ms var(--curva),
    --luz-b 700ms var(--curva),
    --tinta-superficie var(--dur-4) var(--curva);
}

/* ==========================================================================
   4. BASE
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--tinta-1);
  scroll-padding-top: calc(var(--topo-fixo) + 24px);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--fonte-ui);
  font-size: var(--t-corpo);
  line-height: 1.55;
  color: var(--papel);
  background: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga";
}

h1,
h2,
h3,
p,
dl,
dd {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
}

::selection {
  color: var(--acento-texto);
  background: var(--acento);
}

/* Superfícies do navegador também seguem a paleta */
html {
  scrollbar-color: var(--linha-3) var(--tinta-1);
}

input,
textarea {
  caret-color: var(--acento);
}

:focus-visible {
  outline: 3px solid var(--cor-foco);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

[tabindex="-1"]:focus {
  outline: none;
}

/* Some da tela, mas continua para leitores de tela */
.visualmente-oculto {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Só existe no papel */
.so-impressao {
  display: none !important;
}

.simbolos {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Ícones do sprite (traço na cor do texto) */
.icone-ui {
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Link para pular direto ao conteúdo (aparece no foco) */
.pular {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 200;
  padding: 10px 16px;
  font-weight: 600;
  color: var(--acento-texto);
  background: var(--latao);
  border-radius: var(--raio-2);
  transform: translateY(-160%);
  transition: transform var(--dur-2) var(--curva);
}

.pular:focus {
  transform: none;
}

.sem-js {
  max-width: 560px;
  margin: 120px auto;
  padding: 0 20px;
  text-align: center;
  color: var(--papel-2);
}

/* ==========================================================================
   5. ATMOSFERA — luz ambiente, textura do tema e grão (camada fixa, atrás)
      Estática: nenhuma animação contínua.
   ========================================================================== */
.atmosfera {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--tinta-1);
}

.atmosfera > div {
  position: absolute;
  inset: 0;
}

/* Luz institucional: latão no alto à esquerda, frio à direita, vinheta */
.atmosfera__base {
  background:
    radial-gradient(ellipse 70% 55% at 12% -8%, color-mix(in srgb, var(--latao) 10%, transparent), transparent 70%),
    radial-gradient(ellipse 55% 45% at 100% 0%, color-mix(in srgb, var(--cor-texto-fraco) 8%, transparent), transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 120%, color-mix(in srgb, var(--cor-sombra) 55%, transparent), transparent 60%),
    linear-gradient(180deg, var(--tinta-1) 0%, var(--tinta-0) 100%);
  transition: opacity var(--dur-4) var(--curva);
}

/* Luz do tema (só com a ficha na tela) */
.atmosfera__tema {
  opacity: 0;
  background:
    radial-gradient(ellipse 65% 55% at 8% -6%, var(--luz-a), transparent 72%),
    radial-gradient(ellipse 55% 50% at 100% 18%, var(--luz-b), transparent 70%),
    radial-gradient(ellipse 90% 60% at 50% 115%, var(--luz-b), transparent 70%);
  transition: opacity var(--dur-4) var(--curva);
}

/* Textura própria de cada tema */
.atmosfera__detalhe {
  opacity: 0;
  transition: opacity var(--dur-4) var(--curva);
}

/* Grão fotográfico, quase invisível */
.atmosfera__grao {
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

body[data-vista="ficha"] .atmosfera__tema,
body[data-vista="ficha"] .atmosfera__detalhe {
  opacity: 1;
}

body[data-vista="ficha"] .atmosfera__base {
  opacity: 0.55;
}

/* Sangue: manchas orgânicas e vinheta rubra */
.atmosfera[data-elemento="sangue"] .atmosfera__detalhe {
  background:
    radial-gradient(circle at 88% 78%, color-mix(in srgb, var(--acento-2) 22%, transparent), transparent 26%),
    radial-gradient(circle at 18% 64%, color-mix(in srgb, var(--acento-2) 12%, transparent), transparent 22%),
    radial-gradient(ellipse 140% 100% at 50% 50%, transparent 55%, color-mix(in srgb, color-mix(in srgb, var(--acento-2) 35%, var(--cor-sombra)) 55%, transparent) 100%);
}

/* Morte: névoa difusa em camadas frias */
.atmosfera[data-elemento="morte"] .atmosfera__detalhe {
  background:
    radial-gradient(ellipse 60% 22% at 30% 72%, color-mix(in srgb, var(--acento) 5.5%, transparent), transparent 70%),
    radial-gradient(ellipse 50% 18% at 78% 40%, color-mix(in srgb, var(--acento) 4.5%, transparent), transparent 70%),
    radial-gradient(ellipse 80% 30% at 50% 100%, color-mix(in srgb, var(--acento) 8%, transparent), transparent 70%);
}

/* Conhecimento: diagrama geométrico, como um arquivo catalogado */
.atmosfera[data-elemento="conhecimento"] .atmosfera__detalhe {
  background-image:
    linear-gradient(color-mix(in srgb, var(--acento) 2.5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--acento) 2.5%, transparent) 1px, transparent 1px);
  background-size: 32px 32px, 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, var(--cor-sombra) 20%, transparent 80%);
  mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, var(--cor-sombra) 20%, transparent 80%);
}

/* O diagrama é uma máscara pintada com o acento (a cor vem da variável) */
.atmosfera[data-elemento="conhecimento"] .atmosfera__detalhe::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--acento);
  opacity: 0.07;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' fill='none' stroke='black'%3E%3Ccircle cx='160' cy='160' r='110'/%3E%3Ccircle cx='160' cy='160' r='56'/%3E%3Cpath d='M0 160h320M160 0v320M42 42l236 236M278 42 42 278'/%3E%3Cpath d='M160 50 255 215H65z'/%3E%3C/svg%3E") 0 0 / 320px 320px repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' fill='none' stroke='black'%3E%3Ccircle cx='160' cy='160' r='110'/%3E%3Ccircle cx='160' cy='160' r='56'/%3E%3Cpath d='M0 160h320M160 0v320M42 42l236 236M278 42 42 278'/%3E%3Cpath d='M160 50 255 215H65z'/%3E%3C/svg%3E") 0 0 / 320px 320px repeat;
}

/* Energia: feixes direcionados de violeta, magenta e ciano */
.atmosfera[data-elemento="energia"] .atmosfera__detalhe {
  background:
    linear-gradient(115deg, transparent 30%, color-mix(in srgb, var(--acento) 7%, transparent) 45%, transparent 60%),
    linear-gradient(115deg, transparent 58%, color-mix(in srgb, var(--acento-3) 5%, transparent) 66%, transparent 74%),
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--acento-2) 10%, transparent), transparent 22%);
}

/* Medo: escuridão quase total e um silêncio pálido no centro */
.atmosfera[data-elemento="medo"] .atmosfera__detalhe {
  background:
    radial-gradient(ellipse 50% 40% at 50% 35%, color-mix(in srgb, var(--cor-texto) 2.5%, transparent), transparent 70%),
    radial-gradient(ellipse 130% 110% at 50% 50%, transparent 45%, color-mix(in srgb, var(--cor-sombra) 75%, transparent) 100%);
}

body[data-vista="ficha"] .atmosfera[data-elemento="medo"] .atmosfera__base {
  opacity: 0.15;
}

/* ==========================================================================
   6. PRIMITIVOS
   ========================================================================== */

/* ---- Rótulos de documento ---- */
.sobretitulo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 500 var(--t-rotulo) / 1.2 var(--fonte-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--papel-3);
}

.sobretitulo__ponto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--latao);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--latao) 16%, transparent), 0 0 14px color-mix(in srgb, var(--latao) 60%, transparent);
}

.rotulo-bloco {
  font: 600 var(--t-rotulo) / 1.2 var(--fonte-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--papel-3);
}

.link-seta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-pequeno);
  font-weight: 600;
  color: var(--papel-2);
  text-decoration: none;
  transition: color var(--dur-1) var(--curva), gap var(--dur-2) var(--curva);
}

.link-seta .icone-ui {
  width: 15px;
  height: 15px;
}

.link-seta:hover {
  gap: 9px;
  color: var(--acento);
}

/* ---- Botões ---- */
.botao,
.botao-barra {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--altura-controle);
  padding: 0 14px;
  font: 600 0.8438rem/1 var(--fonte-ui);
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--papel);
  text-decoration: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cor-texto) 6%, transparent), color-mix(in srgb, var(--cor-texto) 2%, transparent));
  border: 1px solid var(--linha-2);
  border-radius: var(--raio-2);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--cor-realce) 5%, transparent) inset, 0 1px 2px color-mix(in srgb, var(--cor-sombra) 35%, transparent);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  transition:
    background-color var(--dur-1) var(--curva),
    border-color var(--dur-1) var(--curva),
    color var(--dur-1) var(--curva),
    box-shadow var(--dur-2) var(--curva),
    transform var(--dur-1) var(--curva);
}

.botao .icone-ui,
.botao-barra .icone-ui {
  width: 16px;
  height: 16px;
  margin-left: -2px;
}

.botao:hover:not(:disabled),
.botao-barra:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--cor-texto) 5%, transparent);
  border-color: var(--linha-3);
}

.botao:active:not(:disabled),
.botao-barra:active:not(:disabled) {
  transform: translateY(1px);
}

.botao:disabled,
.botao-barra:disabled {
  cursor: default;
  opacity: 0.45;
}

.botao--primario,
.botao-barra--principal {
  color: var(--acento-texto);
  background: linear-gradient(180deg, color-mix(in oklab, var(--acento-claro) 35%, var(--acento)), var(--acento) 80%);
  border-color: color-mix(in oklab, var(--acento-claro) 70%, transparent);
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--cor-realce) 35%, transparent) inset,
    0 -1px 0 color-mix(in srgb, var(--cor-sombra) 18%, transparent) inset,
    0 8px 22px -10px var(--brilho);
}

.botao--primario:hover:not(:disabled),
.botao-barra--principal:hover:not(:disabled) {
  background-color: transparent;
  border-color: var(--acento-claro);
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--cor-realce) 40%, transparent) inset,
    0 -1px 0 color-mix(in srgb, var(--cor-sombra) 18%, transparent) inset,
    0 10px 28px -8px var(--brilho),
    0 0 0 3px var(--acento-suave);
}

.botao--fantasma {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--papel-2);
}

.botao--fantasma:hover:not(:disabled) {
  color: var(--papel);
  background: color-mix(in srgb, var(--cor-texto) 5%, transparent);
  border-color: var(--linha-1);
}

.botao--pequeno,
.botao-barra--pequeno {
  height: var(--altura-controle-p);
  padding: 0 11px;
  font-size: 0.7812rem;
}

.botao--grande {
  height: 48px;
  padding: 0 22px;
  font-size: 0.9062rem;
}

.botao--grande .icone-ui {
  width: 18px;
  height: 18px;
}

/* Perigo (confirmação de excluir: o js liga botao-barra--perigo) */
.botao-barra--perigo,
.botao--perigo,
.botao--primario.botao-barra--perigo {
  color: var(--cor-perigo-texto);
  background: linear-gradient(180deg, var(--cor-perigo-claro) -40%, var(--cor-perigo-forte) 80%);
  border-color: color-mix(in srgb, var(--cor-perigo-claro) 55%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--cor-realce) 25%, transparent) inset, 0 8px 22px -10px color-mix(in srgb, var(--cor-perigo) 60%, transparent);
}

.botao-barra--perigo:hover:not(:disabled),
.botao--perigo:hover:not(:disabled),
.botao--primario.botao-barra--perigo:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--cor-perigo-claro) 70%, var(--cor-realce));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--cor-realce) 30%, transparent) inset, 0 10px 26px -8px color-mix(in srgb, var(--cor-perigo) 70%, transparent), 0 0 0 3px color-mix(in srgb, var(--cor-perigo) 18%, transparent);
}

/* "+ Adicionar ataque/item…": tracejado, como uma ficha em branco */
.botao--adicionar {
  width: 100%;
  height: 44px;
  margin-top: var(--e3);
  color: var(--papel-2);
  background: transparent;
  border: 1px dashed var(--linha-3);
  box-shadow: none;
}

.botao--adicionar:hover:not(:disabled) {
  color: color-mix(in srgb, var(--acento) 72%, var(--papel));
  background: var(--acento-suave);
  border-color: var(--acento-linha);
}

.botao--compacto {
  align-self: flex-start;
  height: var(--altura-controle-p);
  padding: 0 12px;
  font-size: 0.7812rem;
}

/* Só ícone */
.botao-icone {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--papel-2);
  background: transparent;
  border: 1px solid var(--linha-2);
  border-radius: var(--raio-2);
  cursor: pointer;
  transition: color var(--dur-1) var(--curva), border-color var(--dur-1) var(--curva), background-color var(--dur-1) var(--curva), box-shadow var(--dur-2) var(--curva);
}

.botao-icone svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.botao-icone:hover:not(:disabled) {
  color: var(--papel);
  background: color-mix(in srgb, var(--cor-texto) 5%, transparent);
  border-color: var(--linha-3);
}

.botao-icone:disabled {
  cursor: default;
  opacity: 0.35;
}

.botao-icone[aria-expanded="true"],
.botao-icone--marcado {
  color: var(--acento);
  border-color: var(--acento-linha);
}

.botao-icone--perigo:hover:not(:disabled) {
  color: var(--erro);
  background: var(--erro-fundo);
  border-color: var(--erro-borda);
}

.botao-icone--rolar {
  color: color-mix(in srgb, var(--acento) 72%, var(--papel));
  border-color: var(--acento-linha);
  background: var(--acento-suave);
}

.botao-icone--rolar:hover:not(:disabled) {
  color: var(--acento-texto);
  background: var(--acento);
  border-color: var(--acento);
  box-shadow: 0 0 18px -4px var(--brilho);
}

/* Botões de jogo (rolar, usar, conjurar): a ação principal de cada cartão */
.botao-rolagem {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: var(--altura-controle);
  padding: 0 14px;
  font: 600 0.8125rem/1 var(--fonte-ui);
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--acento-texto);
  background: linear-gradient(180deg, var(--acento-claro) -70%, var(--acento) 70%);
  border: 1px solid color-mix(in oklab, var(--acento-claro) 60%, transparent);
  border-radius: var(--raio-2);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--cor-realce) 30%, transparent) inset, 0 6px 18px -10px var(--brilho);
  cursor: pointer;
  touch-action: manipulation;
  transition: box-shadow var(--dur-2) var(--curva), filter var(--dur-1) var(--curva), transform var(--dur-1) var(--curva);
}

.botao-rolagem svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.botao-rolagem:hover {
  filter: brightness(1.08);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--cor-realce) 35%, transparent) inset, 0 10px 26px -8px var(--brilho), 0 0 0 3px var(--acento-suave);
}

.botao-rolagem:active {
  transform: translateY(1px);
}

.botao-rolagem--dano {
  color: var(--cor-perigo-texto);
  background: linear-gradient(180deg, var(--cor-perigo-claro) -70%, var(--cor-perigo-forte) 75%);
  border-color: color-mix(in srgb, var(--cor-perigo-claro) 50%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--cor-realce) 22%, transparent) inset, 0 6px 18px -10px color-mix(in srgb, var(--pv) 70%, transparent);
}

.botao-rolagem--usar,
.botao-rolagem--conjurar {
  color: var(--acento-texto);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pe) 90%, var(--cor-realce)) -70%, var(--pe) 75%);
  border-color: color-mix(in srgb, var(--pe) 55%, var(--cor-realce));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--cor-realce) 30%, transparent) inset, 0 6px 18px -10px color-mix(in srgb, var(--pe) 70%, transparent);
}

.botao-rolagem--usar {
  min-width: 76px;
}

.botao-rolagem--secundario {
  color: color-mix(in srgb, var(--acento) 72%, var(--papel));
  background: var(--acento-suave);
  border-color: var(--acento-linha);
  box-shadow: none;
}

.botao-rolagem--secundario:hover {
  color: var(--acento-texto);
  background: var(--acento);
}

/* Sem munição: o clique continua funcionando e mostra o aviso */
.botao-rolagem--bloqueado {
  color: var(--papel-3);
  background: var(--tinta-4);
  border-color: var(--linha-2);
  box-shadow: none;
}

.botao-texto {
  padding: 4px 6px;
  font-size: var(--t-pequeno);
  color: var(--papel-3);
  text-decoration: underline;
  text-decoration-color: var(--linha-3);
  text-underline-offset: 3px;
  background: none;
  border: 0;
  border-radius: var(--raio-1);
  cursor: pointer;
}

.botao-texto:hover {
  color: var(--papel);
  text-decoration-color: currentColor;
}

/* Botão com cara de link */
.link {
  padding: 0;
  font: inherit;
  color: var(--acento);
  text-decoration: underline;
  text-underline-offset: 2px;
  background: none;
  border: 0;
  cursor: pointer;
}

/* ---- Campos ---- */
.controle,
.campo input,
.campo select,
.campo .seletor,
.busca input {
  height: 34px;
  min-width: 0;
  padding: 0 10px;
  font-size: 0.875rem;
  color: var(--papel);
  background-color: var(--campo-fundo);
  border: 1px solid var(--linha-2);
  border-radius: var(--raio-1);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--cor-texto) 3%, transparent);
  transition: border-color var(--dur-1) var(--curva), box-shadow var(--dur-2) var(--curva), background-color var(--dur-1) var(--curva);
}

.controle:hover:not(:disabled),
.campo input:hover,
.campo select:hover:not(:disabled),
.campo .seletor:hover:not(:disabled),
.busca input:hover {
  border-color: var(--linha-3);
}

.controle:focus,
.campo input:focus,
.campo select:focus,
.campo .seletor:focus,
.busca input:focus {
  border-color: var(--acento);
  outline: none;
  box-shadow: 0 0 0 3px var(--acento-suave);
}

/* Foco pelo teclado: anel duplo bem visível */
.controle:focus-visible,
.campo input:focus-visible,
.campo select:focus-visible,
.campo .seletor:focus-visible,
.busca input:focus-visible,
.campo-busca input:focus-visible {
  box-shadow: 0 0 0 1px var(--acento), 0 0 0 4px color-mix(in oklab, var(--acento) 30%, transparent);
}

.controle::placeholder,
.campo input::placeholder,
.busca input::placeholder,
textarea::placeholder {
  color: var(--cor-texto-mudo);
  opacity: 1;
}

select.controle,
.campo select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 30px;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--papel-2) 50%),
    linear-gradient(135deg, var(--papel-2) 50%, transparent 50%);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
}

select.controle option,
.campo select option,
select.controle optgroup,
.campo select optgroup {
  color: var(--papel);
  background-color: var(--tinta-3);
}

textarea.controle {
  height: auto;
  padding: 9px 11px;
  font-family: var(--fonte-ui);
  line-height: 1.5;
  resize: vertical;
}

.controle:disabled,
.campo select:disabled,
.campo .seletor:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

/* ---- Seletor: botão no lugar do <select> (js/ui-seletor.js) ----
   O <select> fica no lugar, invisível e com 1px, para os rótulos, os dados e
   a impressão. O botão herda as classes dele (.controle e companhia). */
.seletor-nativo {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  white-space: nowrap;
  border: 0 !important;
  opacity: 0;
  clip-path: inset(50%);
  pointer-events: none;
}

.seletor {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  text-align: left;
  cursor: pointer;
}

.seletor__caixa {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  flex: 1 1 auto;
  min-width: 0;
}

.seletor__valor,
.seletor__medida > span {
  grid-area: 1 / 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seletor__medida {
  display: contents;
}

.seletor__medida > span {
  height: 0;
  visibility: hidden;
}

.seletor__seta {
  flex: none;
  width: 12px;
  height: 8px;
  fill: none;
  stroke: var(--papel-3);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur-2) var(--curva), stroke var(--dur-1) var(--curva);
}

.seletor:hover:not(:disabled) .seletor__seta {
  stroke: var(--papel-2);
}

.seletor.seletor--aberto {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-suave);
}

.seletor--aberto .seletor__seta {
  stroke: var(--acento-claro);
  transform: rotate(180deg);
}

.controle--numero {
  width: 60px;
  padding: 0 6px;
  font-family: var(--fonte-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.controle--numero::-webkit-inner-spin-button,
.controle--numero::-webkit-outer-spin-button,
.passo__valor::-webkit-inner-spin-button,
.passo__valor::-webkit-outer-spin-button,
.recurso__atual::-webkit-inner-spin-button,
.recurso__atual::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.controle--invalido,
.controle--invalido:focus,
.controle--invalido:hover:not(:disabled) {
  border-color: var(--erro);
  box-shadow: 0 0 0 3px var(--erro-fundo);
}

/* Número com − e + */
.passo {
  display: inline-flex;
  flex: none;
  height: 34px;
  overflow: hidden;
  background: var(--campo-fundo);
  border: 1px solid var(--linha-2);
  border-radius: var(--raio-1);
  transition: border-color var(--dur-1) var(--curva), box-shadow var(--dur-2) var(--curva);
}

.passo:hover {
  border-color: var(--linha-3);
}

.passo:focus-within {
  border-color: var(--acento);
  box-shadow: 0 0 0 1px var(--acento), 0 0 0 4px color-mix(in oklab, var(--acento) 26%, transparent);
}

.passo__botao {
  width: 28px;
  padding: 0;
  font: 500 1rem/1 var(--fonte-mono);
  color: var(--papel-3);
  background: transparent;
  border: 0;
  cursor: pointer;
  touch-action: manipulation;
  transition: color var(--dur-1) var(--curva), background-color var(--dur-1) var(--curva);
}

.passo__botao:hover {
  color: var(--papel);
  background: color-mix(in srgb, var(--cor-texto) 6%, transparent);
}

.passo__botao:active {
  color: color-mix(in srgb, var(--acento) 72%, var(--papel));
  background: var(--acento-suave);
}

.passo__valor {
  width: 38px;
  padding: 0;
  font: 600 0.875rem/1 var(--fonte-mono);
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--papel);
  background: transparent;
  border: 0;
  border-inline: 1px solid var(--linha-1);
  border-radius: 0;
  -moz-appearance: textfield;
  appearance: textfield;
}

.passo__valor:focus {
  outline: none;
  background: color-mix(in srgb, var(--cor-texto) 4%, transparent);
}

.passo__valor--largo {
  width: 52px;
}

/* Rótulos em cima dos campos */
.campo-texto,
.campo-bonus,
.recurso__bonus {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.campo-texto {
  flex: 1 1 180px;
}

.campo-bonus,
.recurso__bonus {
  flex: none;
  align-items: flex-start;
}

.campo-texto--curto {
  flex: 0 0 150px;
}

.campo-texto .controle {
  width: 100%;
  height: var(--altura-controle);
}

.campo-texto label,
.campo-bonus label,
.recurso__bonus label,
.recurso__perda label,
.ataque__rotulo,
.descricao__campo label,
.identidade__rotulo,
.item__mini span,
.rolagens__campo,
.filtro-select {
  font: 500 var(--t-micro) / 1.25 var(--fonte-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--papel-3);
}

/* Caixas de seleção e rádios desenhados (acessíveis: continuam nativos) */
.caixa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8438rem;
  color: var(--papel-2);
  cursor: pointer;
}

.caixa input[type="checkbox"],
.caixa input[type="radio"] {
  position: relative;
  flex: none;
  width: 17px;
  height: 17px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: var(--campo-fundo) center / 12px 12px no-repeat;
  border: 1.5px solid var(--linha-3);
  border-radius: var(--raio-1);
  cursor: pointer;
  transition: background-color var(--dur-1) var(--curva), border-color var(--dur-1) var(--curva), box-shadow var(--dur-2) var(--curva);
}

.caixa input[type="radio"] {
  border-radius: 50%;
}

.caixa input:hover:not(:disabled) {
  border-color: var(--acento-linha);
}

.caixa input:checked {
  background-color: var(--acento);
  border-color: var(--acento);
  box-shadow: 0 0 12px -2px var(--brilho);
}

/* A marca é uma máscara (cor vem da variável): o desenho nunca carrega cor própria */
.caixa input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--acento-texto);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3 5 8.7 9.6 3.4' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3 5 8.7 9.6 3.4' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

.caixa input[type="radio"]:checked {
  background-image: radial-gradient(circle, var(--tinta-1) 0 3px, transparent 3.5px);
  background-size: auto;
}

.caixa input:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

.caixa input:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.caixa--pequena {
  gap: 7px;
  font-size: 0.7812rem;
}

.caixa--pequena input[type="checkbox"],
.caixa--pequena input[type="radio"] {
  width: 15px;
  height: 15px;
}

/* Interruptor "modo livre" */
.alternar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: var(--altura-controle-p);
  padding: 0 12px 0 8px;
  font-size: 0.7812rem;
  font-weight: 600;
  color: var(--papel-3);
  background: transparent;
  border: 1px solid var(--linha-2);
  border-radius: var(--raio-pilula);
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color var(--dur-1) var(--curva), color var(--dur-1) var(--curva), background-color var(--dur-1) var(--curva);
}

.alternar:hover {
  color: var(--papel);
  border-color: var(--linha-3);
}

.alternar__trilho {
  position: relative;
  flex: none;
  width: 30px;
  height: 17px;
  border-radius: var(--raio-pilula);
  background: var(--tinta-5);
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--cor-sombra) 50%, transparent);
  transition: background-color var(--dur-2) var(--curva);
}

.alternar__trilho::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--papel-2);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--cor-sombra) 50%, transparent);
  transition: transform var(--dur-2) var(--curva-saida), background-color var(--dur-2) var(--curva);
}

.alternar[aria-pressed="true"] {
  color: var(--papel);
  border-color: var(--acento-linha);
  background: var(--acento-suave);
}

.alternar[aria-pressed="true"] .alternar__trilho {
  background: var(--acento);
}

.alternar[aria-pressed="true"] .alternar__trilho::after {
  transform: translateX(13px);
  background: var(--acento-texto);
}

/* Contadores (pontos, graus) */
.contador {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  min-height: var(--altura-controle-p);
  padding: 4px 12px;
  background: color-mix(in srgb, var(--cor-poco) 25%, transparent);
  border: 1px solid var(--linha-2);
  border-radius: var(--raio-pilula);
}

.contador__valor,
.contador__total {
  font: 600 1rem/1 var(--fonte-mono);
  font-variant-numeric: tabular-nums;
}

.contador__rotulo {
  font-size: 0.75rem;
  color: var(--papel-3);
}

.contador__separador {
  font: 400 0.875rem/1 var(--fonte-mono);
  color: var(--papel-4);
}

.contador__total {
  color: var(--papel-3);
}

.contador[data-estado="pendente"] .contador__valor { color: var(--acento); }
.contador[data-estado="completo"] .contador__valor { color: var(--ok); }
.contador[data-estado="excedido"] { border-color: var(--erro-borda); background: var(--erro-fundo); }
.contador[data-estado="excedido"] .contador__valor { color: var(--erro); }
.contador[data-estado="livre"] { opacity: 0.55; }
.contador[data-estado="indefinido"] .contador__valor { color: var(--papel-3); }

/* Selos (etiquetas pequenas) */
.selo-fonte,
.selo {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  font: 600 0.6875rem/1.4 var(--fonte-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid currentColor;
  border-radius: var(--raio-1);
}

/* ---- Avisos dentro da ficha ---- */
.avisos,
.aviso-neutro,
.mensagem-acao,
.aviso-sobrecarga,
.ritual__aviso,
.ritual__medo,
.forma__avisos,
.dialogo__destaque {
  position: relative;
  padding: 10px 14px 10px 16px;
  font-size: 0.8125rem;
  line-height: 1.5;
  border: 1px solid var(--linha-2);
  border-radius: var(--raio-2);
  background: color-mix(in srgb, var(--cor-texto) 2.5%, transparent);
}

.avisos::before,
.aviso-neutro::before,
.mensagem-acao::before,
.aviso-sobrecarga::before,
.ritual__aviso::before,
.ritual__medo::before,
.forma__avisos::before,
.dialogo__destaque::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--papel-4);
}

.avisos {
  margin-top: var(--e4);
  color: var(--papel-2);
  background: var(--aviso-fundo);
  border-color: var(--aviso-borda);
}

.avisos::before {
  background: var(--aviso);
}

.avisos__titulo {
  margin-bottom: 4px;
  font-weight: 600;
  color: var(--aviso);
}

.avisos__lista {
  padding-left: 18px;
}

.avisos__dica {
  margin-top: 8px;
  font-size: 0.7812rem;
  color: var(--papel-3);
}

.aviso-neutro {
  margin-top: var(--e4);
  color: var(--papel-2);
}

.aviso-neutro strong {
  color: var(--papel);
}

.mensagem-acao {
  color: var(--papel-2);
  animation: surgir var(--dur-3) var(--curva-saida);
}

.mensagem-acao[data-tipo="ok"] {
  color: var(--papel);
  background: var(--ok-fundo);
  border-color: color-mix(in srgb, var(--cor-sucesso) 32%, transparent);
}

.mensagem-acao[data-tipo="ok"]::before { background: var(--ok); }

.mensagem-acao[data-tipo="aviso"] {
  color: var(--aviso);
  background: var(--aviso-fundo);
  border-color: var(--aviso-borda);
}

.mensagem-acao[data-tipo="aviso"]::before { background: var(--aviso); }

.mensagem-acao[data-tipo="erro"],
.aviso-sobrecarga,
.dialogo__destaque {
  color: var(--erro);
  background: var(--erro-fundo);
  border-color: var(--erro-borda);
}

.mensagem-acao[data-tipo="erro"]::before,
.aviso-sobrecarga::before,
.dialogo__destaque::before {
  background: var(--erro);
}

.aviso-sobrecarga {
  font-weight: 600;
}

@keyframes surgir {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* ==========================================================================
   7. ESTRUTURA DO APP
   ========================================================================== */

/* ---- Barra global (vidro fumê, identidade institucional) ---- */
.app-barra {
  position: sticky;
  top: 0;
  z-index: 60;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tinta-1) 84%, transparent), color-mix(in srgb, var(--tinta-1) 68%, transparent));
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid var(--vidro-borda);
}

/* Fio de latão sob a barra */
.app-barra::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--latao) 50%, transparent) 18%, color-mix(in srgb, var(--latao) 8%, transparent) 62%, transparent 100%);
}

.app-barra__conteudo {
  display: flex;
  align-items: center;
  gap: var(--e6);
  height: var(--barra-altura);
  max-width: var(--largura-app);
  margin: 0 auto;
  padding: 0 var(--margem-pagina);
}

.marca {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 12px;
  color: var(--papel);
  text-decoration: none;
  border-radius: var(--raio-2);
}

.marca__selo {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: var(--latao);
  stroke-width: 1.15;
  transition: transform var(--dur-4) var(--curva-saida);
}

.marca__anel {
  stroke-dasharray: 1.6 2.4;
  opacity: 0.7;
}

.marca__nucleo {
  fill: var(--latao);
  stroke: none;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--latao) 80%, transparent));
}

.marca:hover .marca__selo {
  transform: rotate(45deg);
}

.marca__texto {
  display: flex;
  flex-direction: column;
}

.marca__nome {
  font: 600 1.5625rem/1 var(--fonte-display);
  letter-spacing: 0.02em;
}

.marca__sub {
  margin-top: 2px;
  font: 500 0.6875rem/1 var(--fonte-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--papel-3);
}

/* ---- Navegação principal ---- */
.nav-global {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 4px;
  min-width: 0;
  height: 100%;
}

.nav-global__item {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 13px;
  font-size: 0.8438rem;
  font-weight: 600;
  color: var(--papel-3);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--raio-2);
  transition: color var(--dur-1) var(--curva), background-color var(--dur-1) var(--curva), border-color var(--dur-1) var(--curva);
}

.nav-global__item .icone-ui {
  width: 17px;
  height: 17px;
}

.nav-global__item:hover {
  color: var(--papel);
  background: color-mix(in srgb, var(--cor-texto) 4%, transparent);
}

.nav-global__item[aria-current="page"] {
  color: var(--papel);
  background: color-mix(in srgb, var(--cor-texto) 5.5%, transparent);
  border-color: var(--linha-1);
}

.nav-global__item[aria-current="page"] .icone-ui {
  color: var(--latao);
}

/* Traço de latão alinhado à borda inferior da barra */
.nav-global__item[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: calc((var(--barra-altura) - 38px) / -2 - 1px);
  left: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--latao);
  box-shadow: 0 0 12px color-mix(in srgb, var(--latao) 70%, transparent);
}

.nav-global__contagem {
  min-width: 20px;
  padding: 3px 6px;
  font: 600 0.6875rem/1 var(--fonte-mono);
  text-align: center;
  color: var(--papel-2);
  background: color-mix(in srgb, var(--cor-texto) 7%, transparent);
  border-radius: var(--raio-pilula);
}

.nav-global__contagem:empty {
  display: none;
}

.nav-global__item--ficha {
  min-width: 0;
  flex: 0 1 auto;
}

.nav-global__item--ficha .nav-global__rotulo {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.barra-topo__rotulo {
  flex: none;
  font: 600 0.6875rem/1 var(--fonte-mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--carimbo) 72%, var(--papel));
}

.barra-topo__nome {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-barra__acoes {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--e3);
  margin-left: auto;
}

/* ---- Indicador de salvamento (só faz sentido com a ficha na tela) ---- */
.status-salvamento {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 500 0.7188rem/1 var(--fonte-mono);
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--papel-3);
}

body:not([data-vista="ficha"]) .status-salvamento,
.status-salvamento:empty {
  display: none;
}

/* Telas médias: só o ponto de status (o texto continua para leitor de tela) */
@media (max-width: 1000px) {
  .status-salvamento {
    gap: 0;
    font-size: 0;
  }
}

.status-salvamento::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-sucesso) 14%, transparent);
  transition: background-color var(--dur-2) var(--curva), box-shadow var(--dur-2) var(--curva);
}

.status-salvamento[data-estado="pendente"]::before {
  background: var(--latao);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--latao) 18%, transparent), 0 0 10px color-mix(in srgb, var(--latao) 80%, transparent);
}

.status-salvamento[data-estado="falha"] {
  color: var(--erro);
}

.status-salvamento[data-estado="falha"]::before {
  background: var(--erro);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-perigo) 18%, transparent);
}

/* Acabou de salvar: um anel curto se expande do ponto */
.status-salvamento--pulso::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 3.5px;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  border: 1px solid var(--ok);
  animation: salvou 900ms var(--curva-saida) forwards;
}

@keyframes salvou {
  from { opacity: 0.9; transform: scale(1); }
  to { opacity: 0; transform: scale(3.6); }
}

/* ---- Faixas de aviso logo abaixo da barra (só somem quando o problema acaba) ---- */
.faixa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  width: calc(100% - 2 * var(--margem-pagina));
  max-width: calc(var(--largura-app) - 2 * var(--margem-pagina));
  margin: 0 auto 10px;
  padding: 9px 12px 9px 16px;
  font-size: 0.8438rem;
  border: 1px solid;
  border-radius: var(--raio-2);
}

.faixa__texto {
  flex: 1 1 260px;
}

.faixa--erro {
  color: var(--erro);
  background: color-mix(in srgb, var(--cor-perigo-forte) 40%, var(--tinta-1));
  border-color: var(--erro-borda);
}

.faixa--aviso {
  color: var(--aviso);
  background: color-mix(in srgb, var(--cor-aviso) 30%, var(--tinta-1));
  border-color: var(--aviso-borda);
}

/* ---- Telas ---- */
.app-principal {
  display: block;
  min-height: calc(100vh - var(--barra-altura) - 60px);
  outline: none;
}

.vista {
  display: none;
}

body[data-vista="central"] .vista--central,
body[data-vista="arquivo"] .vista--arquivo,
body[data-vista="ficha"] .vista--ficha {
  display: block;
}

/* Entrada da tela: só toca quando a tela aparece (sai de display: none) */
.app-pronto .vista {
  animation: vista-entrada 420ms var(--curva-saida);
}

@keyframes vista-entrada {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* A ficha entra só com opacidade: um transform no contêiner prenderia a barra de seções
   (position: fixed) ao fim da página durante a animação */
.app-pronto .vista--ficha {
  animation-name: vista-entrada-ficha;
}

@keyframes vista-entrada-ficha {
  from { opacity: 0; }
  to { opacity: 1; }
}

::view-transition-old(root) {
  animation: 160ms var(--curva) both vt-sair;
}

::view-transition-new(root) {
  animation: 280ms var(--curva-saida) both vt-entrar;
}

@keyframes vt-sair {
  to { opacity: 0; }
}

@keyframes vt-entrar {
  from { opacity: 0; }
}

.rodape {
  max-width: var(--largura-app);
  margin: 0 auto;
  padding: 28px var(--margem-pagina) 40px;
  font: 500 0.7188rem/1.6 var(--fonte-mono);
  letter-spacing: 0.03em;
  text-align: center;
  color: var(--papel-3);
}

body[data-vista="ficha"] .rodape {
  padding-bottom: 96px; /* espaço para a alça do painel de rolagens */
}

/* ---- Peças compartilhadas: monograma, mini vitais, tempo ---- */
.monograma {
  --tam: 52px;
  position: relative;
  display: inline-grid;
  flex: none;
  place-items: center;
  width: var(--tam);
  height: var(--tam);
  color: var(--cor-tema, var(--latao));
  background:
    radial-gradient(circle at 50% 30%, color-mix(in oklab, currentColor 18%, transparent), transparent 70%),
    var(--tinta-2);
  border: 1px solid color-mix(in oklab, currentColor 55%, transparent);
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 3px var(--tinta-1),
    inset 0 0 0 4px color-mix(in oklab, currentColor 22%, transparent),
    0 0 24px -10px currentColor;
}

.monograma__letras {
  font: 600 calc(var(--tam) * 0.4) / 1 var(--fonte-display);
  letter-spacing: 0.03em;
  color: var(--papel);
}

.monograma__elemento {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: calc(var(--tam) * 0.38);
  height: calc(var(--tam) * 0.38);
  padding: calc(var(--tam) * 0.07);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  background: var(--tinta-1);
  border: 1px solid color-mix(in oklab, currentColor 50%, transparent);
  border-radius: 50%;
}

.monograma--grande {
  --tam: 92px;
}

.monograma--pequeno {
  --tam: 38px;
}

.mini-vitais {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  min-width: 0;
}

.mini-vital {
  --cor-vital: var(--papel-2);
  min-width: 0;
}

.mini-vital--pv { --cor-vital: var(--pv); }
.mini-vital--pe { --cor-vital: var(--pe); }
.mini-vital--san { --cor-vital: var(--san); }

.mini-vital__sigla {
  font: 600 0.6875rem/1 var(--fonte-mono);
  letter-spacing: 0.13em;
  color: var(--cor-vital);
}

.mini-vital__valor {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 2px;
  margin-top: 6px;
}

.mini-vital__atual {
  font: 600 1.0625rem/1 var(--fonte-mono);
  font-variant-numeric: tabular-nums;
  color: var(--papel);
}

.mini-vital__max {
  font: 500 0.75rem/1 var(--fonte-mono);
  color: var(--papel-3);
}

.mini-vital__barra {
  display: block;
  flex-basis: 100%;
  height: 3px;
  margin-top: 8px;
  overflow: hidden;
  background: color-mix(in srgb, var(--cor-texto) 7%, transparent);
  border-radius: var(--raio-pilula);
}

.mini-vital__preenchido {
  display: block;
  width: var(--preenchimento, 0%);
  height: 100%;
  background: var(--cor-vital);
  border-radius: inherit;
  box-shadow: 0 0 10px var(--cor-vital);
}

.mini-vitais--grande .mini-vital__atual {
  font-size: 1.5rem;
}

.mini-vitais--grande .mini-vital__max {
  font-size: 0.875rem;
}

.mini-vitais--vazio {
  display: block;
  font-size: 0.8125rem;
  color: var(--papel-3);
}

.carimbo-tempo {
  font: 500 0.6875rem/1.3 var(--fonte-mono);
  letter-spacing: 0.02em;
  color: var(--papel-3);
}

/* ---- Estado vazio ---- */
.estado-vazio,
#central-continuar > .estado-vazio__conteudo {
  padding: 52px 24px;
  text-align: center;
  background: radial-gradient(60% 80% at 50% 0%, color-mix(in srgb, var(--latao) 6%, transparent), transparent 70%);
  border: 1px dashed var(--linha-2);
  border-radius: var(--raio-3);
}

.estado-vazio--compacto {
  padding: 36px 20px;
}

.estado-vazio__conteudo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 480px;
  margin: 0 auto;
}

#central-continuar > .estado-vazio__conteudo {
  max-width: none;
}

.estado-vazio__selo {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  margin-bottom: 10px;
  color: var(--latao);
  border: 1px solid color-mix(in srgb, var(--latao) 35%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--latao) 3.5%, transparent), 0 0 44px -10px color-mix(in srgb, var(--latao) 55%, transparent);
}

.estado-vazio__icone {
  width: 42px;
  height: 42px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.1;
}

.estado-vazio__titulo {
  font: 600 1.6875rem/1.15 var(--fonte-display);
  color: var(--papel);
}

.estado-vazio__texto {
  max-width: 46ch;
  color: var(--papel-2);
}

.estado-vazio__acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}

.estado-vazio--compacto .botao {
  margin-top: 12px;
}

/* ==========================================================================
   7a. CENTRAL DE OPERAÇÕES
   ========================================================================== */
.central {
  max-width: var(--largura-app);
  margin: 0 auto;
  padding: 44px var(--margem-pagina) 40px;
}

.central__heroi {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: 40px;
  min-height: 420px;
}

.central__titulo {
  margin-top: 22px;
  font: 500 clamp(3.25rem, 6.6vw, 6.125rem) / 0.9 var(--fonte-display);
  letter-spacing: -0.015em;
  color: var(--papel);
}

.central__titulo em {
  display: block;
  font-style: italic;
  font-weight: 500;
  color: var(--latao);
  text-shadow: 0 0 40px color-mix(in srgb, var(--latao) 25%, transparent);
}

.central__lead {
  max-width: 54ch;
  margin-top: 26px;
  font-size: 1.0312rem;
  line-height: 1.65;
  color: var(--papel-2);
}

.central__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.central__acoes .botao--primario {
  --acento: var(--latao);
  --acento-claro: var(--latao-claro);
}

/* ---- Assinatura gráfica: o selo dos elementos ---- */
.central__selo {
  position: relative;
  justify-self: center;
  width: min(100%, 470px);
  aspect-ratio: 1;
  color: var(--latao);
}

.selo-elementos {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}

.selo-tracar {
  stroke-opacity: 0.55;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.selo-tracejado {
  stroke-dasharray: 0.004 0.008;
  stroke-opacity: 0.35;
}

.selo-fino {
  stroke-opacity: 0.22;
}

.selo-elementos__marcas circle {
  stroke-opacity: 0.4;
}

.selo-elementos__texto {
  font: 500 0.6875rem var(--fonte-mono);
  letter-spacing: 0.28em;
  fill: var(--papel-3);
  stroke: none;
}

.selo-no circle {
  fill: var(--tinta-1);
  stroke: currentColor;
  stroke-opacity: 0.7;
}

.selo-no use {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.selo-no--sangue { color: var(--el-sangue); }
.selo-no--morte { color: var(--el-morte); }
.selo-no--conhecimento { color: var(--el-conhecimento); }
.selo-no--energia { color: var(--el-energia); }
.selo-no--medo { color: var(--el-medo); }

.selo-no {
  filter: drop-shadow(0 0 8px currentColor);
}

/* Entrada: o selo se traça uma vez (sem movimento contínuo) */
.app-pronto .selo-tracar:not(.selo-tracejado) {
  animation: tracar 2.2s var(--curva-saida) both;
}

.app-pronto .selo-tracar:nth-of-type(3) { animation-delay: 120ms; }
.app-pronto .selo-tracar:nth-of-type(4) { animation-delay: 240ms; }
.app-pronto .selo-tracar:nth-of-type(5) { animation-delay: 360ms; }

.app-pronto .selo-no {
  animation: acender 1.2s var(--curva-saida) both 500ms;
}

.app-pronto .selo-elementos__giro {
  transform-origin: 0 0;
  animation: assentar 2.6s var(--curva-saida) both;
}

@keyframes tracar {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes acender {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; }
}

@keyframes assentar {
  from { opacity: 0; transform: rotate(-24deg); }
  to { opacity: 1; transform: none; }
}

/* ---- Blocos abaixo do herói ---- */
.central__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  grid-template-areas:
    "continuar recentes"
    "continuar status";
  align-items: start;
  gap: 30px 36px;
  margin-top: 28px;
}

/* Arquivo vazio: as ações do topo repetiriam as do estado vazio logo abaixo */
.vista--central[data-vazia="sim"] .central__acoes {
  display: none;
}

/* Sem a lista de recentes (nenhuma ou só uma ficha): a situação sobe */
.vista--central[data-vazia="sim"] .central__grade,
.central__grade:has(.central__bloco--recentes[hidden]) {
  grid-template-areas: "continuar status";
}

.central__bloco--continuar { grid-area: continuar; }
.central__bloco--recentes { grid-area: recentes; }
.central__bloco--status { grid-area: status; }

.central__bloco > .rotulo-bloco,
.central__bloco-topo {
  margin-bottom: 14px;
}

.central__bloco-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Cartão "continuar de onde parou" (vidro com a luz do tema da ficha) */
.destaque {
  --cor-tema: var(--latao);
  position: relative;
  overflow: hidden;
  padding: 24px 28px 22px;
  background:
    radial-gradient(110% 90% at 0% 0%, color-mix(in oklab, var(--cor-tema) 15%, transparent), transparent 62%),
    var(--vidro-reflexo),
    color-mix(in srgb, var(--tinta-2) 72%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--vidro-borda);
  border-radius: var(--raio-3);
  box-shadow: var(--sombra-3);
}

.destaque::before {
  content: "";
  position: absolute;
  top: 0;
  right: 28px;
  left: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cor-tema), transparent);
  opacity: 0.85;
}

.destaque__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  font: 500 0.6875rem/1.2 var(--fonte-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--papel-3);
}

.destaque__tema {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--cor-tema);
}

.destaque__tema .icone-ui {
  width: 15px;
  height: 15px;
}

.destaque__identidade {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 22px;
}

.destaque__textos {
  min-width: 0;
}

.destaque__nome {
  overflow-wrap: anywhere;
  font: 600 clamp(2rem, 3.4vw, 2.875rem) / 1 var(--fonte-display);
  color: var(--papel);
}

.destaque__nome--vazio {
  font-style: italic;
  color: var(--papel-3);
}

.destaque__classe {
  margin-top: 10px;
  font: 500 0.7188rem/1.3 var(--fonte-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--papel-2);
}

.destaque__origem,
.destaque__jogador {
  margin-top: 4px;
  font-size: 0.8438rem;
  color: var(--papel-3);
}

.destaque__painel {
  display: flex;
  align-items: stretch;
  gap: 18px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--linha-1);
}

.destaque__defesa {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 84px;
  padding-left: 18px;
  border-left: 1px solid var(--linha-1);
}

.destaque__defesa-rotulo {
  font: 600 0.6875rem/1 var(--fonte-mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--papel-3);
}

.destaque__defesa-valor {
  margin-top: 6px;
  font: 600 1.875rem/1 var(--fonte-mono);
  color: var(--papel);
}

.destaque__rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
}

.destaque__rodape .botao--primario {
  --acento: var(--latao);
  --acento-claro: var(--latao-claro);
}

.destaque__rodape .botao .icone-ui {
  margin: 0 -2px 0 0;
  transition: transform var(--dur-2) var(--curva);
}

.destaque__rodape .botao:hover .icone-ui {
  transform: translateX(3px);
}

/* Lista "atualizadas recentemente" */
.recentes {
  display: flex;
  flex-direction: column;
  list-style: none;
  border-top: 1px solid var(--linha-1);
}

.recente {
  --cor-tema: var(--latao);
}

.recente__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 11px 10px;
  text-decoration: none;
  border-bottom: 1px solid var(--linha-1);
  transition: background-color var(--dur-1) var(--curva);
}

.recente__link:hover {
  background: color-mix(in srgb, var(--cor-texto) 3%, transparent);
}

.recente__textos {
  min-width: 0;
}

.recente__nome {
  display: block;
  overflow: hidden;
  font: 600 1.25rem/1.15 var(--fonte-display);
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--papel);
}

.recente__nome--vazio {
  font-style: italic;
  color: var(--papel-3);
}

.recente__classe {
  display: block;
  margin-top: 3px;
  font: 500 0.6875rem/1.3 var(--fonte-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--papel-3);
}

.recente__tempo {
  white-space: nowrap;
}

.recente__seta {
  width: 16px;
  height: 16px;
  color: var(--papel-4);
  transition: transform var(--dur-2) var(--curva), color var(--dur-1) var(--curva);
}

.recente__link:hover .recente__seta {
  color: var(--latao);
  transform: translateX(3px);
}

/* Situação do arquivo */
.central__bloco--status {
  padding: 18px 20px 20px;
  background: color-mix(in srgb, var(--cor-texto) 1.8%, transparent);
  border: 1px solid var(--linha-1);
  border-radius: var(--raio-3);
}

.status-arquivo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
}

.status-arquivo__linha dt {
  font: 500 0.6875rem/1.2 var(--fonte-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--papel-3);
}

.status-arquivo__linha dd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--papel);
}

.status-arquivo__linha--ok dd::before,
.status-arquivo__linha--alerta dd::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 8px var(--ok);
}

.status-arquivo__linha--alerta dd {
  color: var(--aviso);
}

.status-arquivo__linha--alerta dd::before {
  background: var(--aviso);
  box-shadow: 0 0 8px var(--aviso);
}

.central__status-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--linha-1);
}

/* ==========================================================================
   7b. ARQUIVO DE AGENTES
   ========================================================================== */
.arquivo {
  max-width: var(--largura-app);
  margin: 0 auto;
  padding: 44px var(--margem-pagina) 40px;
}

.arquivo__cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--linha-1);
}

.arquivo__titulo {
  margin-top: 16px;
  font: 500 clamp(2.5rem, 4.8vw, 4.125rem) / 0.95 var(--fonte-display);
  letter-spacing: -0.01em;
}

.arquivo__contagem {
  margin-top: 12px;
  font: 500 0.75rem/1.3 var(--fonte-mono);
  letter-spacing: 0.08em;
  color: var(--papel-3);
}

.arquivo__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.arquivo__acoes .botao--primario {
  --acento: var(--latao);
  --acento-claro: var(--latao-claro);
}

/* Ferramentas: vidro preso logo abaixo da barra */
.arquivo__ferramentas {
  position: sticky;
  top: calc(var(--barra-altura) + 12px);
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 24px;
  padding: 10px;
  background: var(--vidro-reflexo), color-mix(in srgb, var(--tinta-2) 74%, transparent);
  -webkit-backdrop-filter: var(--vidro-desfoque);
  backdrop-filter: var(--vidro-desfoque);
  border: 1px solid var(--vidro-borda);
  border-radius: var(--raio-3);
  box-shadow: var(--sombra-2);
}

.campo-busca {
  position: relative;
  display: flex;
  flex: 1 1 280px;
  align-items: center;
}

.campo-busca .icone-ui {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  color: var(--papel-3);
  pointer-events: none;
}

.campo-busca input {
  width: 100%;
  height: 38px;
  padding: 0 12px 0 38px;
  font-size: 0.9062rem;
  color: var(--papel);
  background: var(--campo-fundo);
  border: 1px solid var(--linha-2);
  border-radius: var(--raio-2);
  transition: border-color var(--dur-1) var(--curva), box-shadow var(--dur-2) var(--curva);
}

.campo-busca input:hover {
  border-color: var(--linha-3);
}

.campo-busca input:focus {
  border-color: var(--latao);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--latao) 16%, transparent);
}

.campo-busca input::placeholder {
  color: var(--cor-texto-mudo);
}

/* Botões segmentados (filtro por classe) */
.segmentado {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  background: color-mix(in srgb, var(--cor-poco) 32%, transparent);
  border: 1px solid var(--linha-1);
  border-radius: var(--raio-2);
}

.segmentado__opcao {
  height: 30px;
  padding: 0 11px;
  font-size: 0.7812rem;
  font-weight: 600;
  color: var(--papel-3);
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  transition: color var(--dur-1) var(--curva), background-color var(--dur-1) var(--curva);
}

.segmentado__opcao:hover {
  color: var(--papel);
  background: color-mix(in srgb, var(--cor-texto) 5%, transparent);
}

.segmentado__opcao[aria-pressed="true"] {
  color: var(--acento-texto);
  background: var(--latao);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--cor-realce) 30%, transparent) inset, 0 4px 14px -6px color-mix(in srgb, var(--latao) 80%, transparent);
}

.arquivo__ordem {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font: 500 var(--t-micro) / 1 var(--fonte-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--papel-3);
}

.arquivo__ordem .controle {
  height: 38px;
  font-family: var(--fonte-ui);
  font-size: 0.8438rem;
  letter-spacing: normal;
  text-transform: none;
}

.arquivo__ordem .controle:focus {
  border-color: var(--latao);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--latao) 16%, transparent);
}

.arquivo__dica {
  margin: 14px 4px 0;
  font-size: 0.7812rem;
  color: var(--papel-3);
}

.arquivo__dica strong {
  font-family: var(--fonte-mono);
  font-weight: 600;
  color: var(--papel-2);
}

.arquivo__grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr));
  gap: 18px;
  margin-top: 22px;
  list-style: none;
}

.vista--arquivo .estado-vazio {
  margin-top: 28px;
}

/* ---- Cartão de agente: uma ficha catalogada ---- */
.cartao-agente {
  --cor-tema: var(--latao);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 18px 18px 14px;
  background:
    radial-gradient(120% 70% at 100% 0%, color-mix(in oklab, var(--cor-tema) 7%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--cor-texto) 3.5%, transparent), color-mix(in srgb, var(--cor-texto) 0.8%, transparent) 40%),
    var(--tinta-2);
  border: 1px solid var(--linha-1);
  border-radius: var(--raio-3);
  box-shadow: var(--sombra-2);
  transition:
    transform var(--dur-2) var(--curva),
    border-color var(--dur-2) var(--curva),
    box-shadow var(--dur-3) var(--curva),
    opacity var(--dur-2) var(--curva);
}

/* Traço do tema no alto e a orelha dobrada no canto (papel de arquivo) */
.cartao-agente::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 18px;
  width: 54px;
  height: 2px;
  border-radius: 2px;
  background: var(--cor-tema);
  box-shadow: 0 0 14px var(--cor-tema);
}

.cartao-agente::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 20px;
  height: 20px;
  border-top-right-radius: var(--raio-3);
  border-bottom-left-radius: 4px;
  background: linear-gradient(225deg, var(--tinta-1) 50%, color-mix(in srgb, var(--cor-texto) 7%, transparent) 50%);
  pointer-events: none;
}

.cartao-agente:hover {
  transform: translateY(-3px);
  border-color: var(--linha-2);
  box-shadow:
    var(--sombra-3),
    0 0 0 1px color-mix(in oklab, var(--cor-tema) 22%, transparent),
    0 22px 50px -32px var(--cor-tema);
}

.cartao-agente:has(.cartao-agente__link:focus-visible) {
  outline: 2px solid var(--latao);
  outline-offset: 3px;
}

.cartao-agente[aria-busy="true"] {
  opacity: 0.6;
}

.cartao-agente--aberta {
  border-color: color-mix(in srgb, var(--latao) 32%, transparent);
}

.cartao-agente--novo {
  animation: cartao-novo 1.5s var(--curva-saida);
}

@keyframes cartao-novo {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--latao) 60%, transparent), var(--sombra-2); transform: translateY(6px); }
  30% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--latao) 35%, transparent), var(--sombra-2); transform: none; }
  100% { box-shadow: 0 0 0 0 transparent, var(--sombra-2); }
}

.cartao-agente__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-right: 14px;
  font: 500 0.6875rem/1.2 var(--fonte-mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--papel-4);
}

.cartao-agente__selo {
  padding: 2px 6px;
  font-weight: 600;
  color: var(--latao);
  border: 1px solid currentColor;
  border-radius: 2px;
}

.cartao-agente__selo--erro {
  color: var(--erro);
}

.cartao-agente__identidade {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.cartao-agente__textos {
  min-width: 0;
}

.cartao-agente__nome {
  font: 600 1.5625rem/1.08 var(--fonte-display);
}

.cartao-agente__link {
  display: block;
  overflow: hidden;
  color: var(--papel);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* O cartão inteiro abre a ficha (o link se estende sobre ele) */
.cartao-agente__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.cartao-agente__link:focus-visible {
  outline: none;
}

.cartao-agente__link--vazio {
  font-style: italic;
  color: var(--papel-3);
}

.cartao-agente__classe {
  margin-top: 6px;
  font: 500 0.6875rem/1.3 var(--fonte-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--papel-2);
}

.cartao-agente__detalhes {
  display: grid;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px dashed var(--linha-2);
}

.cartao-agente__detalhe {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
}

.cartao-agente__detalhe dt {
  font: 500 0.6875rem/1.3 var(--fonte-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--papel-3);
}

.cartao-agente__detalhe dd {
  overflow: hidden;
  font-size: 0.8125rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--papel-2);
}

.cartao-agente__rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--linha-1);
}

.cartao-agente__acoes {
  position: relative;
  z-index: 2; /* acima do link estendido */
  display: flex;
  gap: 6px;
}

.cartao-agente__acoes .botao-icone {
  width: 32px;
  height: 32px;
  background: var(--tinta-2);
}

/* ---- Avisos rápidos (toasts) ---- */
.avisos-app {
  position: fixed;
  bottom: 22px;
  left: 22px;
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(440px, calc(100vw - 32px));
  pointer-events: none;
}

.aviso-app {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 8px 11px 16px;
  color: var(--papel);
  background: var(--vidro-reflexo), color-mix(in srgb, var(--tinta-2) 88%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--vidro-borda);
  border-radius: var(--raio-3);
  box-shadow: var(--sombra-3);
  pointer-events: auto;
  animation: aviso-entrada 340ms var(--curva-saida);
}

.aviso-app[data-saindo="sim"] {
  animation: aviso-saida 220ms var(--curva) forwards;
}

@keyframes aviso-entrada {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@keyframes aviso-saida {
  to { opacity: 0; transform: translateY(6px); }
}

.aviso-app__marca {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 10px var(--ok);
}

.aviso-app--aviso .aviso-app__marca {
  background: var(--aviso);
  box-shadow: 0 0 10px var(--aviso);
}

.aviso-app--erro {
  border-color: var(--erro-borda);
}

.aviso-app--erro .aviso-app__marca {
  background: var(--erro);
  box-shadow: 0 0 10px var(--erro);
}

.aviso-app__texto {
  flex: 1;
  min-width: 0;
  font-size: 0.8438rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.aviso-app__acao {
  flex: none;
  height: 30px;
  padding: 0 11px;
  font-size: 0.7812rem;
  font-weight: 600;
  color: var(--papel);
  background: color-mix(in srgb, var(--cor-texto) 6%, transparent);
  border: 1px solid var(--linha-2);
  border-radius: 4px;
  cursor: pointer;
}

.aviso-app__acao:hover {
  border-color: var(--latao);
  color: var(--latao-claro);
}

.aviso-app__fechar {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--papel-3);
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.aviso-app__fechar:hover {
  color: var(--papel);
  background: color-mix(in srgb, var(--cor-texto) 6%, transparent);
}

/* Arrastando um arquivo para importar */
body.arrastando-arquivo::after {
  content: "Solte o arquivo .json para importar";
  position: fixed;
  inset: 16px;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  font: 600 1.875rem/1.3 var(--fonte-display);
  text-align: center;
  color: var(--latao-claro);
  background: color-mix(in srgb, var(--tinta-1) 82%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 2px dashed var(--latao);
  border-radius: var(--raio-4);
  pointer-events: none;
}

/* ==========================================================================
   8. FICHA — estrutura, trilho (vitais + índice) e ritmo das seções
   ========================================================================== */
.vista--ficha {
  position: relative;
}

.ficha-layout {
  max-width: var(--largura-app);
  margin: 0 auto;
  padding: 0 var(--margem-pagina) calc(var(--dock-altura) + 20px + var(--seguro-base));
}

/* Trilho (vitais): no computador fica na zona da esquerda, no celular vira a faixa presa no topo */
.trilho {
  position: sticky;
  top: var(--barra-altura);
  z-index: 30;
}

.trilho__corpo {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 16px;
  background:
    radial-gradient(140% 60% at 0% 0%, var(--acento-suave), transparent 60%),
    var(--vidro-reflexo),
    color-mix(in oklab, var(--tinta-superficie) 70%, transparent);
  -webkit-backdrop-filter: var(--vidro-desfoque);
  backdrop-filter: var(--vidro-desfoque);
  border: 1px solid var(--vidro-borda);
  border-radius: var(--raio-3);
  box-shadow: var(--sombra-2);
}

.hud__titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 var(--t-micro) / 1 var(--fonte-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--papel-2);
}

.hud__titulo::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--acento);
  box-shadow: 0 0 10px var(--acento);
}

.hud__vitais {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}

/* Uma linha de vital: sigla · valor · −/+ e a barra embaixo */
.vital {
  --cor-vital: var(--papel-2);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "topo  botoes"
    "barra barra";
  align-items: center;
  gap: 7px 8px;
}

.vital--pv { --cor-vital: var(--pv); }
.vital--pe {
  --cor-vital: var(--pe);
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "topo  turno  botoes"
    "barra barra  barra";
}
.vital--san { --cor-vital: var(--san); }

/* Sigla e valor: um botão que abre o ajuste do vital (−5…+5, dano/cura) */
.vital__topo {
  grid-area: topo;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: -5px -7px;
  padding: 5px 7px;
  font: inherit;
  color: inherit;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--raio-2);
  cursor: pointer;
  transition: background-color var(--dur-1) var(--curva), border-color var(--dur-1) var(--curva);
}

.vital__topo > .vital__sigla,
.vital__topo > .vital__valor {
  grid-area: auto;
}

.vital__topo:hover:not(:disabled) {
  background: color-mix(in oklab, var(--cor-vital) 9%, transparent);
  border-color: color-mix(in oklab, var(--cor-vital) 32%, transparent);
}

.vital__topo:disabled {
  cursor: default;
}

.vital__sigla {
  grid-area: sigla;
  font: 600 0.6875rem/1 var(--fonte-mono);
  letter-spacing: 0.14em;
  color: var(--cor-vital);
}

.vital__valor {
  grid-area: valor;
  display: flex;
  align-items: baseline;
  gap: 1px;
  min-width: 0;
  font: 600 1.375rem/1 var(--fonte-mono);
  font-variant-numeric: tabular-nums;
  color: var(--papel);
}

.vital__max {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--papel-2);
}

.vital__barra {
  grid-area: barra;
  position: relative;
  height: 6px;
  overflow: hidden;
  background: color-mix(in srgb, var(--cor-texto) 6%, transparent);
  border-radius: var(--raio-pilula);
  box-shadow: inset 0 1px 1px color-mix(in srgb, var(--cor-sombra) 50%, transparent);
}

/* Marcas de 10% (mostrador) */
.vital[data-nivel="zero"] .vital__barra .barra__preenchimento {
  display: none;
}

.vital__barra::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), color-mix(in srgb, var(--cor-sombra) 55%, transparent) calc(10% - 1px) 10%);
  pointer-events: none;
}

.vital__barra .barra__preenchimento {
  width: var(--preenchimento, 0%);
  height: 100%;
  background: linear-gradient(90deg, color-mix(in oklab, var(--cor-vital) 55%, var(--cor-sombra)), var(--cor-vital));
  border-radius: inherit;
  box-shadow: 0 0 12px var(--cor-vital);
  transition: width 420ms var(--curva-saida);
}

.vital__botoes {
  grid-area: botoes;
  display: flex;
  gap: 4px;
}

.vital__botao {
  width: 26px;
  height: 26px;
  padding: 0;
  font: 500 0.9375rem/1 var(--fonte-mono);
  color: var(--papel-2);
  background: color-mix(in srgb, var(--cor-poco) 25%, transparent);
  border: 1px solid var(--linha-2);
  border-radius: 4px;
  cursor: pointer;
  touch-action: manipulation;
  transition: color var(--dur-1) var(--curva), border-color var(--dur-1) var(--curva), background-color var(--dur-1) var(--curva);
}

.vital__botao:hover:not(:disabled) {
  color: var(--papel);
  background: color-mix(in oklab, var(--cor-vital) 16%, transparent);
  border-color: var(--cor-vital);
}

.vital__botao:active:not(:disabled) {
  transform: translateY(1px);
}

.vital__botao:disabled {
  cursor: default;
  opacity: 0.3;
}

/* Nível da barra: só cor (não é regra do jogo) */
.vital[data-nivel="critico"] .vital__valor > output {
  color: var(--cor-vital);
}

.vital[data-nivel="zero"] .vital__valor > output {
  color: var(--erro);
}

.vital[data-nivel="zero"] .vital__sigla {
  text-shadow: 0 0 10px var(--cor-vital);
}

.vital[data-nivel="indefinido"] .vital__valor,
.vital[data-nivel="indefinido"] .vital__barra {
  opacity: 0.45;
}

/* Derivados: Defesa, Deslocamento, PE no turno */
.hud__derivados {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 16px;
  overflow: hidden;
  background: var(--linha-1);
  border: 1px solid var(--linha-1);
  border-radius: var(--raio-2);
}

.hud__derivado {
  padding: 8px 4px 9px;
  text-align: center;
  background: color-mix(in srgb, var(--tinta-1) 55%, transparent);
}

.hud__derivado dt {
  font: 500 0.6875rem/1.2 var(--fonte-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--papel-3);
}

.hud__derivado dd {
  margin-top: 5px;
  font: 600 0.9375rem/1 var(--fonte-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--papel);
}

.hud__barra-fina {
  color: var(--papel-4);
}

.hud__aviso {
  margin-top: 10px;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--papel-3);
}

/* ---- Seções: sem caixa; um fio de arquivo, número e título editorial ---- */
.ficha__conteudo {
  min-width: 0;
  container-type: inline-size;
  container-name: ficha;
  counter-reset: secao;
}

.ficha__conteudo .secao {
  position: relative;
  min-width: 0;
  padding: 46px 0 8px;
  counter-increment: secao; /* o deslocamento das âncoras vem do scroll-padding-top do <html> */
}

.ficha__conteudo .secao + .secao,
.ficha__conteudo .secao + .ficha__par,
.ficha__conteudo .ficha__par + .secao {
  margin-top: 22px;
}

/* Fio do arquivo no alto de cada seção, aceso pela cor do tema */
.ficha__conteudo .secao::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--acento-linha) 0%, var(--linha-2) 22%, var(--linha-1) 60%, transparent 100%);
}

.secao__cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 18px;
  margin-bottom: 20px;
}

.secao__titulo {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font: 600 1.9375rem/1.05 var(--fonte-display);
  letter-spacing: 0.005em;
  color: var(--papel);
}

/* Na ficha, cada seção abre como uma divisória do dossiê: a mesma voz da capa */
.ficha__conteudo .secao__titulo {
  font-size: clamp(1.875rem, 2.4cqi + 0.875rem, 2.625rem);
  line-height: 1;
  letter-spacing: -0.004em;
  text-wrap: balance;
}

.secao > .secao__titulo {
  margin-bottom: 20px;
}

/* Número da seção no estilo de etiqueta de pasta (é o mesmo número do índice) */
.ficha__conteudo .secao__titulo::before {
  content: counter(secao, decimal-leading-zero);
  flex: none;
  padding: 5px 7px 4px;
  font: 600 0.75rem/1 var(--fonte-mono);
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--acento) 72%, var(--papel));
  background: var(--acento-suave);
  border: 1px solid var(--acento-linha);
  border-radius: 2px;
  transform: translateY(-9px);
}

.secao__controles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.secao__info {
  font-size: 0.7812rem;
  color: var(--papel-3);
}

.secao__info output,
.secao__info strong {
  font: 600 0.8125rem var(--fonte-mono);
  color: var(--papel);
}

.secao__info--linha {
  margin: -8px 0 14px;
}

.secao__info--linha:empty {
  display: none;
}

.secao__nota {
  max-width: 92ch;
  margin-top: 18px;
  font-size: 0.7812rem;
  line-height: 1.6;
  color: var(--papel-3);
}

.subtitulo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 30px 0 14px;
  font: 600 var(--t-rotulo) / 1.2 var(--fonte-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--papel-3);
}

.subtitulo::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--linha-1);
}

/* Atributos e recursos lado a lado quando há largura */
.ficha__par {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

@container ficha (min-width: 980px) {
  .ficha__par {
    grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
    align-items: start;
    gap: 0 40px;
  }

  .ficha__conteudo .ficha__par > .secao + .secao {
    margin-top: 0;
  }
}

/* Painel genérico das seções (defesa, deslocamento, DT, patente, carga...) */
.painel {
  --cor-painel: var(--acento);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 16px 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cor-texto) 3%, transparent), transparent 45%),
    color-mix(in oklab, var(--tinta-superficie) 88%, transparent);
  border: 1px solid var(--linha-1);
  border-radius: var(--raio-3);
  box-shadow: var(--sombra-1);
}

/* Marca da cor do painel: um traço no alto à esquerda */
.painel::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 18px;
  width: 36px;
  height: 2px;
  border-radius: 2px;
  background: var(--cor-painel);
  box-shadow: 0 0 10px var(--cor-painel);
}

.painel__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.painel__titulo {
  min-width: 0;
}

.painel__rotulo {
  font: 600 var(--t-rotulo) / 1.2 var(--fonte-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--papel-2);
}

.painel__composicao {
  margin-top: 6px;
  font: 500 0.75rem/1.45 var(--fonte-mono);
  font-variant-numeric: tabular-nums;
  color: var(--papel-3);
}

/* Número grande do painel (Defesa, DT) */
.painel__valor {
  display: grid;
  flex: none;
  place-items: center;
  min-width: 78px;
  height: 78px;
  padding: 0 10px;
  font: 600 2.625rem/1 var(--fonte-mono);
  font-variant-numeric: tabular-nums;
  color: var(--papel);
  background:
    radial-gradient(circle at 50% 30%, color-mix(in oklab, var(--cor-painel) 18%, transparent), transparent 70%),
    color-mix(in srgb, var(--cor-texto) 6%, transparent);
  border: 1px solid color-mix(in oklab, var(--cor-painel) 45%, transparent);
  border-radius: var(--raio-2);
  text-shadow: 0 0 22px color-mix(in oklab, var(--cor-painel) 60%, transparent);
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--cor-texto) 6%, transparent);
}

.painel__campos {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
}

.painel__info {
  font-size: 0.7812rem;
  line-height: 1.5;
  color: var(--papel-3);
}

.painel__info output {
  font: 600 0.8125rem var(--fonte-mono);
  color: var(--papel);
}

.painel__info-nomes {
  color: var(--papel-4);
}

.painel__info--destaque {
  color: var(--acento);
}

/* Barras genéricas (carga) */
.barra {
  position: relative;
  height: 8px;
  overflow: hidden;
  background: color-mix(in srgb, var(--cor-texto) 6%, transparent);
  border-radius: var(--raio-pilula);
  box-shadow: inset 0 1px 1px color-mix(in srgb, var(--cor-sombra) 50%, transparent);
}

.barra__preenchimento {
  width: var(--preenchimento, 0%);
  height: 100%;
  background: var(--cor-painel, var(--acento));
  border-radius: inherit;
  transition: width 420ms var(--curva-saida);
}

/* ==========================================================================
   9. FICHA — capa do dossiê (identificação)
   ========================================================================== */
.ficha__conteudo .secao--dossie {
  position: relative;
  overflow: hidden;
  padding: 20px 28px 28px;
  background:
    radial-gradient(70% 140% at 100% 0%, color-mix(in oklab, var(--acento) 13%, transparent), transparent 58%),
    linear-gradient(180deg, color-mix(in srgb, var(--cor-texto) 4.5%, transparent), transparent 32%),
    color-mix(in oklab, var(--tinta-superficie) 80%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  backdrop-filter: blur(10px) saturate(130%);
  border: 1px solid var(--linha-2);
  border-radius: var(--raio-4);
  box-shadow: var(--sombra-3);
}

.ficha__conteudo .secao--dossie::before {
  display: none;
}

/* Marca-d'água: anéis concêntricos de selo no canto */
.ficha__conteudo .secao--dossie::after {
  content: "";
  position: absolute;
  top: -150px;
  right: -110px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 26px, color-mix(in oklab, var(--acento) 16%, transparent) 26px 27px);
  -webkit-mask-image: radial-gradient(circle, var(--cor-sombra) 30%, transparent 70%);
  mask-image: radial-gradient(circle, var(--cor-sombra) 30%, transparent 70%);
  pointer-events: none;
}

.secao--dossie > * {
  position: relative;
  z-index: 1;
}

.secao--dossie > .secao__titulo {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.dossie__faixa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--linha-2);
}

.dossie__codigo {
  display: flex;
  align-items: center;
  gap: 16px;
  font: 500 0.6875rem/1 var(--fonte-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--papel-3);
}

.dossie__carimbo {
  padding: 5px 9px 4px;
  font: 700 0.6875rem/1 var(--fonte-mono);
  letter-spacing: 0.22em;
  color: var(--carimbo);
  border: 1.5px solid currentColor;
  border-radius: 3px;
  transform: rotate(-3deg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--carimbo) 15%, transparent);
}

[data-elemento="medo"] .dossie__carimbo {
  color: var(--papel-2);
}

#dossie-codigo {
  color: var(--papel-2);
}

.dossie__ferramentas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.dossie__acoes {
  display: flex;
  gap: 6px;
}

/* Seletor de tema: seis amostras com o símbolo de cada elemento */
.seletor-tema {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.seletor-tema__legenda {
  float: left;
  padding: 0;
  font: 500 var(--t-micro) / 1 var(--fonte-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--papel-3);
}

.seletor-tema__opcoes {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: color-mix(in srgb, var(--cor-poco) 32%, transparent);
  border: 1px solid var(--linha-1);
  border-radius: var(--raio-pilula);
}

.seletor-tema__opcao {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--cor-amostra);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--curva), box-shadow var(--dur-2) var(--curva), transform var(--dur-2) var(--curva);
}

.seletor-tema__radio {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.seletor-tema__icone {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  opacity: 0.75;
  transition: opacity var(--dur-1) var(--curva);
}

.seletor-tema__nome {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.seletor-tema__opcao:hover {
  background: color-mix(in srgb, var(--cor-texto) 7%, transparent);
}

.seletor-tema__opcao:hover .seletor-tema__icone {
  opacity: 1;
}

.seletor-tema__opcao:has(:checked) {
  background: color-mix(in oklab, var(--cor-amostra) 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cor-amostra) 60%, transparent), 0 0 16px -4px var(--cor-amostra);
}

.seletor-tema__opcao:has(:checked) .seletor-tema__icone {
  opacity: 1;
}

.seletor-tema__opcao:has(:focus-visible) {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

.seletor-tema__atual {
  min-width: 92px;
  font: 600 0.75rem/1 var(--fonte-mono);
  letter-spacing: 0.08em;
  color: var(--acento);
}

/* Identificação: selo, nome grande e a linha de metadados */
.secao--dossie .grade-campos {
  display: grid;
  grid-template-columns: 136px minmax(0, 1.15fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 0.75fr);
  grid-template-areas:
    "selo nome nome nome nome nome"
    "selo jog  orig clas tril nex";
  align-items: end;
  gap: 16px 18px;
}

.dossie__selo { grid-area: selo; }
.campo--nome { grid-area: nome; }
.campo--jogador { grid-area: jog; }
.campo--origem { grid-area: orig; }
.campo--classe { grid-area: clas; }
.campo--trilha { grid-area: tril; }
.campo--nex { grid-area: nex; }

.campo {
  min-width: 0;
}

.campo label {
  display: block;
  margin-bottom: 7px;
  font: 500 var(--t-micro) / 1.2 var(--fonte-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--papel-3);
}

.secao--dossie .campo input,
.secao--dossie .campo select,
.secao--dossie .campo .seletor {
  display: block;
  width: 100%;
  height: 40px;
  font-size: 0.9062rem;
  background-color: color-mix(in srgb, var(--cor-poco) 30%, transparent);
}

.secao--dossie .campo .seletor {
  display: flex;
}

.campo .campo__texto-livre {
  margin-top: 6px;
}

/* Selo com as iniciais (representação do agente) */
.dossie__selo {
  position: relative;
  display: grid;
  place-items: center;
  align-self: center;
  width: 136px;
  height: 136px;
  color: var(--acento);
}

.dossie__selo-anel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  filter: drop-shadow(0 0 10px var(--brilho));
}

.dossie__selo-anel circle:first-child {
  stroke-opacity: 0.75;
}

.dossie__selo-tracejado {
  stroke-dasharray: 2 4;
  stroke-opacity: 0.5;
}

.dossie__selo-anel path {
  stroke-opacity: 0.28;
}

.dossie__monograma {
  position: relative;
  font: 600 3rem/1 var(--fonte-display);
  letter-spacing: 0.02em;
  color: var(--papel);
  text-shadow: 0 0 26px var(--brilho);
}

.dossie__selo-elemento {
  position: absolute;
  right: 8px;
  bottom: 6px;
  width: 32px;
  height: 32px;
  padding: 7px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  background: var(--tinta-1);
  border: 1px solid var(--acento-linha);
  border-radius: 50%;
  box-shadow: 0 0 14px -2px var(--brilho);
}

/* Nome do agente: título editável */
.secao--dossie .campo--nome .campo__destaque {
  width: 100%;
  height: auto;
  padding: 0 0 6px;
  font: 600 clamp(2.375rem, 4.4vw, 3.875rem) / 1.05 var(--fonte-display);
  letter-spacing: 0.005em;
  color: var(--papel);
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  box-shadow: none;
  transition: border-color var(--dur-2) var(--curva), box-shadow var(--dur-2) var(--curva);
}

.secao--dossie .campo--nome .campo__destaque:hover {
  border-bottom-color: var(--linha-2);
}

.secao--dossie .campo--nome .campo__destaque:focus {
  border-bottom-color: var(--acento);
  box-shadow: 0 1px 0 0 var(--acento);
}

.secao--dossie .campo--nome .campo__destaque::placeholder {
  font-style: italic;
  font-weight: 500;
  color: var(--papel-4);
}

/* ==========================================================================
   10. FICHA — componentes das seções
   ========================================================================== */

/* ---- Blocos recolhíveis: seta comum ---- */
.resistencias > summary::-webkit-details-marker,
.progressao > summary::-webkit-details-marker,
.grupo-ritual > summary::-webkit-details-marker {
  display: none;
}

.resistencias > summary::before,
.progressao > summary::before,
.grupo-ritual > summary::before,
.habilidade__seta {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin: 0 3px;
  border-right: 1.5px solid var(--papel-3);
  border-bottom: 1.5px solid var(--papel-3);
  transform: rotate(-45deg);
  transition: transform var(--dur-2) var(--curva), border-color var(--dur-1) var(--curva);
}

.resistencias[open] > summary::before,
.progressao[open] > summary::before,
.grupo-ritual[open] > summary::before,
.habilidade--aberta .habilidade__seta {
  transform: rotate(45deg);
}

.resistencias > summary:hover::before,
.progressao > summary:hover::before,
.grupo-ritual > summary:hover::before {
  border-color: var(--acento);
}

/* ---- Origem, classe e trilha ---- */
.secao--identidade > .mensagem-acao {
  margin-bottom: 14px;
}

.identidade__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

@container ficha (min-width: 880px) {
  .identidade__grade {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.painel--origem { --cor-painel: var(--ok); }
.painel--classe { --cor-painel: var(--acento); }
.painel--trilha { --cor-painel: var(--san); }

.identidade__conteudo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  font-size: 0.8438rem;
}

.identidade__nome {
  font: 600 1.5625rem/1.1 var(--fonte-display);
  color: var(--papel);
}

.identidade__info {
  color: var(--papel-2);
  overflow-wrap: anywhere;
}

.identidade__vazio,
.identidade__nota {
  font-size: 0.8125rem;
  color: var(--papel-3);
}

.identidade__escolha {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--cor-poco) 22%, transparent);
  border: 1px solid var(--linha-1);
  border-radius: var(--raio-2);
}

.identidade__campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.identidade__campo .controle {
  width: 100%;
  height: var(--altura-controle);
}

.identidade__opcoes {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.identidade__habilidade {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--linha-1);
}

.identidade__especial {
  margin-top: 0;
  font-size: 0.7812rem;
}

.trilha__habilidades {
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
}

.trilha__habilidade {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "marco nome situacao";
  align-items: center;
  gap: 6px 10px;
  padding: 9px 10px 9px 12px;
  background: color-mix(in srgb, var(--cor-poco) 20%, transparent);
  border: 1px solid var(--linha-1);
  border-radius: 4px;
}

.trilha__habilidade--liberada {
  border-color: color-mix(in oklab, var(--ok) 42%, transparent);
}

.trilha__marco {
  grid-area: marco;
  font: 600 0.6875rem/1.2 var(--fonte-mono);
  white-space: nowrap;
  color: var(--papel-3);
}

.trilha__nome {
  grid-area: nome;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.trilha__situacao {
  grid-area: situacao;
  font: 600 0.6875rem/1.2 var(--fonte-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ok);
}

.trilha__habilidade--bloqueada .trilha__nome,
.trilha__habilidade--bloqueada .trilha__situacao {
  color: var(--papel-4);
}

.trilha__versatilidade {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px dashed var(--linha-1);
}

/* Progressão da classe */
.progressao {
  margin-top: 16px;
  background: color-mix(in srgb, var(--cor-texto) 1.5%, transparent);
  border: 1px solid var(--linha-1);
  border-radius: var(--raio-3);
}

.progressao > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  padding: 14px 16px;
  list-style: none;
  cursor: pointer;
  border-radius: var(--raio-3);
}

.progressao > summary:hover {
  background: color-mix(in srgb, var(--cor-texto) 2%, transparent);
}

.progressao__titulo {
  font: 600 var(--t-rotulo) / 1.2 var(--fonte-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--papel-2);
}

.progressao__proximo {
  font-size: 0.8125rem;
  color: var(--acento);
}

.progressao__corpo {
  padding: 0 16px 16px;
}

.progressao__corpo > .aviso-neutro {
  margin-top: 0;
}

.progressao__contadores {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
  list-style: none;
}

.progressao__contadores:empty {
  display: none;
}

.progressao__contador {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  padding: 6px 12px;
  background: color-mix(in srgb, var(--cor-poco) 25%, transparent);
  border: 1px solid var(--linha-1);
  border-radius: var(--raio-pilula);
}

.progressao__contador-rotulo {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--papel-3);
}

.progressao__contador-valor {
  font: 600 0.7812rem var(--fonte-mono);
  font-variant-numeric: tabular-nums;
}

.progressao__contador--excedido {
  border-color: var(--aviso-borda);
}

.progressao__contador--excedido .progressao__contador-valor {
  color: var(--aviso);
}

.tabela-progressao {
  width: 100%;
  font-size: 0.8438rem;
  border-collapse: collapse;
}

.tabela-progressao thead th {
  padding: 8px;
  font: 500 var(--t-micro) / 1.2 var(--fonte-mono);
  letter-spacing: 0.14em;
  text-align: left;
  text-transform: uppercase;
  color: var(--papel-3);
  border-bottom: 1px solid var(--linha-2);
}

.tabela-progressao th,
.tabela-progressao td {
  padding: 7px 8px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--linha-1);
}

.tabela-progressao tbody th {
  width: 64px;
  font: 600 0.75rem var(--fonte-mono);
  white-space: nowrap;
  color: var(--papel-4);
}

.progressao__linha td {
  color: var(--papel-4);
}

.progressao__linha--alcancada th,
.progressao__linha--alcancada td {
  color: var(--papel-2);
}

.progressao__linha--atual {
  background: var(--acento-suave);
}

.progressao__linha--atual th {
  color: var(--acento);
  box-shadow: inset 2px 0 0 var(--acento);
}

.progressao__linha--atual td {
  color: var(--papel);
}

.progressao__item + .progressao__item::before {
  content: " · ";
  color: var(--papel-4);
}

.progressao__item--trilha,
.progressao__item--poder,
.progressao__item--aumento_atributo,
.progressao__item--grau_treinamento,
.progressao__item--versatilidade,
.progressao__item--circulo {
  font-weight: 600;
}

.progressao__atual {
  margin-left: 8px;
  padding: 1px 6px;
  font: 600 0.6875rem/1.5 var(--fonte-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--acento);
  border: 1px solid currentColor;
  border-radius: 3px;
}

/* ---- Atributos: o selo dos cinco ---- */
.secao--atributos {
  container-type: inline-size;
  container-name: atributos;
}

.atributos__palco {
  position: relative;
  max-width: 760px;
  margin: 4px auto 0;
}

.atributos__mostrador {
  display: none;
}

.grade-atributos {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 156px), 1fr));
  gap: 12px;
}

/* ---- O dado (d20 de frente): o total do atributo fica na face central ---- */
.atributo__dado {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.dado__faceta {
  stroke: color-mix(in oklab, var(--acento) 50%, transparent);
  stroke-width: 1.3;
  stroke-linejoin: round;
}

.dado__faceta--luz { fill: color-mix(in oklab, var(--acento) 46%, var(--tinta-5)); }
.dado__faceta--meia { fill: color-mix(in oklab, var(--acento) 26%, var(--tinta-4)); }
.dado__faceta--sombra { fill: color-mix(in oklab, var(--acento) 12%, var(--tinta-3)); }
.dado__faceta--funda { fill: color-mix(in oklab, var(--acento) 5%, var(--tinta-2)); }

.dado__faceta--face {
  fill: color-mix(in oklab, var(--acento) 14%, var(--tinta-5));
  stroke: var(--acento);
  stroke-width: 1.6;
}

.dado__contorno {
  fill: none;
  stroke: var(--acento);
  stroke-width: 2.6;
  stroke-linejoin: round;
}

.atributo--alerta .dado__contorno,
.atributo--alerta .dado__faceta--face {
  stroke: var(--aviso);
}

/* ---- Edição: cartões com base e bônus ---- */
.atributo {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "cab   total"
    "base  base"
    "bonus bonus";
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px 12px 12px 14px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cor-texto) 4.5%, transparent), transparent 50%),
    color-mix(in oklab, var(--tinta-superficie) 94%, transparent);
  border: 1px solid var(--linha-2);
  border-radius: var(--raio-3);
  box-shadow: var(--sombra-2);
  transition: border-color var(--dur-2) var(--curva), box-shadow var(--dur-3) var(--curva);
}

.atributo:focus-within {
  border-color: var(--acento-linha);
  box-shadow: var(--sombra-2), 0 0 28px -14px var(--brilho);
}

.atributo--alerta {
  border-color: var(--aviso-borda);
  box-shadow: var(--sombra-2), 0 0 0 1px var(--aviso-borda);
}

.atributo__cabecalho {
  grid-area: cab;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.atributo__sigla {
  font: 600 1.625rem/1 var(--fonte-display);
  letter-spacing: 0.08em;
  color: var(--papel);
}

.atributo--alerta .atributo__sigla {
  color: var(--aviso);
}

.atributo__nome {
  margin-top: 5px;
  overflow: hidden;
  font: 500 0.6875rem/1.2 var(--fonte-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--papel-3);
}

.atributo__total {
  grid-area: total;
  position: relative;
  display: grid;
  place-items: center;
  width: 60px;
  aspect-ratio: 1;
}

.atributo__total output {
  position: relative;
  top: 6%; /* centro da face triangular */
  z-index: 1;
  font: 700 1.3125rem/1 var(--fonte-mono);
  font-variant-numeric: tabular-nums;
  color: var(--papel);
}

.atributo__total-rotulo {
  display: none;
}

.atributo__campo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.atributo__campo label {
  font: 500 var(--t-micro) / 1 var(--fonte-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--papel-3);
}

.atributo__campo--base { grid-area: base; }
.atributo__campo--bonus { grid-area: bonus; }

.atributo .passo {
  height: 30px;
}

.atributo .passo__botao {
  width: 26px;
}

.atributo .passo__valor {
  width: 34px;
}

/* Com largura: os cartões de edição formam um pentágono */
@container atributos (min-width: 720px) {
  .grade-atributos {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      ".   .   agi agi .   ."
      "for for .   .   int int"
      ".   pre pre vig vig .";
    gap: 18px 10px;
  }

  .atributo {
    justify-self: center;
    width: min(100%, 200px);
  }

  .atributo[data-atributo="agi"] { grid-area: agi; }
  .atributo[data-atributo="for"] { grid-area: for; }
  .atributo[data-atributo="int"] { grid-area: int; }
  .atributo[data-atributo="pre"] { grid-area: pre; }
  .atributo[data-atributo="vig"] { grid-area: vig; }
}

/* ---- Mesa: os cinco dados num mostrador, com o teste no centro ----
   Base, bônus, pontos, modo livre, avisos e regras ficam em "Editar atributos". */
.secao--atributos[data-modo="mesa"] {
  --dado: clamp(68px, 17cqi, 112px);
}

.secao--atributos[data-modo="mesa"] #contador-pontos,
.secao--atributos[data-modo="mesa"] #botao-modo-livre,
.secao--atributos[data-modo="mesa"] #info-aumentos,
.secao--atributos[data-modo="mesa"] #avisos-atributos,
.secao--atributos[data-modo="mesa"] #nota-regras,
.secao--atributos[data-modo="mesa"] .atributo__campo {
  display: none !important;
}

.secao--atributos[data-modo="mesa"] .atributos__palco {
  width: min(100%, 600px);
  aspect-ratio: 1;
  margin: -6px auto 0;
}

.secao--atributos[data-modo="mesa"] .atributos__palco::before {
  content: "";
  position: absolute;
  inset: 14%;
  background: radial-gradient(circle, var(--acento-suave), transparent 68%);
  border-radius: 50%;
  pointer-events: none;
}

.secao--atributos[data-modo="mesa"] .atributos__mostrador {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.mostrador__anel {
  fill: none;
  stroke: var(--acento-linha);
  stroke-width: 1;
}

.mostrador__marcas {
  fill: none;
  stroke: var(--linha-3);
  stroke-width: 6;
  stroke-dasharray: 0.12 0.88;
}

.mostrador__marcas--maiores {
  stroke: var(--acento-linha);
  stroke-width: 11;
  stroke-dasharray: 0.06 0.94;
}

.mostrador__cruz {
  fill: none;
  stroke: var(--linha-1);
  stroke-width: 1;
}

.mostrador__diagrama {
  display: none;
  fill: none;
  stroke: var(--acento-linha);
  stroke-width: 1;
  stroke-dasharray: 2 5;
}

.mostrador__trilho {
  fill: none;
  stroke: var(--linha-2);
  stroke-width: 1.2;
  stroke-dasharray: 4 5;
}

.mostrador__centro {
  fill: var(--tinta-1);
  stroke: var(--acento-linha);
  stroke-width: 1.2;
}

.mostrador__teste,
.mostrador__formula {
  font-family: var(--fonte-mono);
  text-anchor: middle;
}

.mostrador__teste {
  font-size: 0.4062rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  fill: var(--papel-2);
}

.mostrador__formula {
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  fill: var(--acento);
}

.secao--atributos[data-modo="mesa"] .grade-atributos {
  position: absolute;
  inset: 0;
  display: block;
}

.secao--atributos[data-modo="mesa"] .atributo {
  position: absolute;
  top: var(--y);
  left: var(--x);
  grid-template-columns: auto;
  grid-template-areas:
    "sigla"
    "total"
    "nome";
  justify-items: center;
  gap: 0;
  width: auto;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  transform: translate(-50%, -50%);
}

/* Um vértice do pentágono para cada atributo (raio de 34% em volta do centro) */
.secao--atributos[data-modo="mesa"] .atributo[data-atributo="agi"] { --x: 50%;   --y: 16%; }
.secao--atributos[data-modo="mesa"] .atributo[data-atributo="int"] { --x: 82.3%; --y: 39.5%; }
.secao--atributos[data-modo="mesa"] .atributo[data-atributo="vig"] { --x: 70%;   --y: 77.5%; }
.secao--atributos[data-modo="mesa"] .atributo[data-atributo="pre"] { --x: 30%;   --y: 77.5%; }
.secao--atributos[data-modo="mesa"] .atributo[data-atributo="for"] { --x: 17.7%; --y: 39.5%; }

.secao--atributos[data-modo="mesa"] .atributo__cabecalho {
  display: contents;
}

/* Sigla numa placa sobre o dado */
.secao--atributos[data-modo="mesa"] .atributo__sigla {
  grid-area: sigla;
  position: relative;
  z-index: 2;
  margin-bottom: -10px;
  padding: 5px 9px 4px 11px;
  font: 700 0.8125rem/1 var(--fonte-mono);
  letter-spacing: 0.18em;
  color: var(--acento-texto);
  background: var(--acento);
  border-radius: 3px;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--cor-realce) 30%, transparent) inset, 0 6px 14px -6px color-mix(in srgb, var(--cor-sombra) 80%, transparent);
}

.secao--atributos[data-modo="mesa"] .atributo--alerta .atributo__sigla {
  color: var(--acento-texto);
  background: var(--aviso);
}

.secao--atributos[data-modo="mesa"] .atributo__total {
  width: var(--dado);
}

.secao--atributos[data-modo="mesa"] .atributo__dado {
  filter: drop-shadow(0 12px 16px color-mix(in srgb, var(--cor-sombra) 55%, transparent)) drop-shadow(0 0 14px var(--brilho));
}

.secao--atributos[data-modo="mesa"] .atributo__total output {
  font-size: calc(var(--dado) * 0.3);
}

.secao--atributos[data-modo="mesa"] .atributo__nome {
  grid-area: nome;
  margin-top: 5px;
  padding: 3px 7px 2px 8px;
  overflow: visible;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--papel-2);
  /* lê limpo por cima das marcas e do trilho do mostrador */
  background: color-mix(in oklab, var(--tinta-1) 88%, transparent);
  border-radius: 3px;
}

/* ---- Recursos: PV, PE e SAN como medidores ---- */
.grade-recursos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

@container ficha (min-width: 700px) {
  .grade-recursos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@container ficha (min-width: 980px) {
  .grade-recursos {
    grid-template-columns: minmax(0, 1fr);
  }
}

.recurso {
  --cor-recurso: var(--papel-2);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 14px 16px 14px 18px;
  overflow: hidden;
  container-type: inline-size;
  background:
    radial-gradient(90% 80% at 100% 0%, color-mix(in oklab, var(--cor-recurso) 11%, transparent), transparent 60%),
    color-mix(in oklab, var(--tinta-superficie) 90%, transparent);
  border: 1px solid var(--linha-1);
  border-radius: var(--raio-3);
  box-shadow: var(--sombra-1);
}

.recurso::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--cor-recurso);
  box-shadow: 0 0 12px var(--cor-recurso);
}

.recurso--pv { --cor-recurso: var(--pv); }
.recurso--pe { --cor-recurso: var(--pe); }
.recurso--san { --cor-recurso: var(--san); }

.recurso__cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.recurso__titulo {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.recurso__sigla {
  font: 600 1.6875rem/1 var(--fonte-display);
  letter-spacing: 0.06em;
  color: var(--cor-recurso);
}

.recurso__nome {
  overflow: hidden;
  font: 500 0.6875rem/1.2 var(--fonte-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--papel-3);
}

.recurso__info {
  flex: none;
  padding: 3px 9px;
  font: 500 0.6875rem/1.4 var(--fonte-mono);
  white-space: nowrap;
  color: var(--papel-3);
  border: 1px solid var(--linha-2);
  border-radius: var(--raio-pilula);
}

.recurso__info output {
  margin-left: 3px;
  font-weight: 600;
  color: var(--papel);
}

/* fieldset sem aparência padrão; desligado enquanto falta a classe */
.recurso__controles {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "valores botoes"
    "barra   barra";
  align-items: center;
  gap: 10px 12px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.recurso__controles:disabled {
  opacity: 0.45;
}

.recurso__valores {
  grid-area: valores;
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
}

.recurso__atual {
  width: 2.5em;
  padding: 0 4px;
  font: 600 2.5rem/1.08 var(--fonte-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--papel);
  background: transparent;
  border: 1px solid transparent;
  border-bottom-color: var(--linha-2);
  border-radius: 4px 4px 0 0;
  -moz-appearance: textfield;
  appearance: textfield;
  transition: border-color var(--dur-1) var(--curva), background-color var(--dur-1) var(--curva), box-shadow var(--dur-2) var(--curva);
}

.recurso__atual::placeholder {
  color: var(--papel-4);
}

.recurso__atual:hover:not(:disabled) {
  border-bottom-color: var(--cor-recurso);
}

.recurso__atual:focus {
  outline: none;
  background: color-mix(in srgb, var(--cor-poco) 30%, transparent);
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-suave);
}

.recurso__separador {
  font: 300 1.625rem/1 var(--fonte-mono);
  color: var(--papel-4);
}

.recurso__max {
  font: 500 1.375rem/1 var(--fonte-mono);
  font-variant-numeric: tabular-nums;
  color: var(--papel-3);
}

.recurso .barra {
  grid-area: barra;
  height: 8px;
}

.recurso .barra::after,
.barra--carga::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), color-mix(in srgb, var(--cor-sombra) 55%, transparent) calc(10% - 1px) 10%);
  pointer-events: none;
}

.recurso .barra__preenchimento {
  background: linear-gradient(90deg, color-mix(in oklab, var(--cor-recurso) 55%, var(--cor-sombra)), var(--cor-recurso));
  box-shadow: 0 0 14px var(--cor-recurso);
}

.recurso__botoes {
  grid-area: botoes;
  display: grid;
  grid-template-columns: repeat(4, 36px);
  gap: 4px;
}

.recurso__botao {
  height: 32px;
  padding: 0;
  font: 600 0.75rem/1 var(--fonte-mono);
  color: var(--papel-2);
  background: color-mix(in srgb, var(--cor-poco) 25%, transparent);
  border: 1px solid var(--linha-2);
  border-radius: 4px;
  cursor: pointer;
  touch-action: manipulation;
  transition: color var(--dur-1) var(--curva), border-color var(--dur-1) var(--curva), background-color var(--dur-1) var(--curva);
}

.recurso__botao:hover:not(:disabled) {
  color: var(--papel);
  background: color-mix(in oklab, var(--cor-recurso) 14%, transparent);
  border-color: var(--cor-recurso);
}

.recurso__botao:active:not(:disabled) {
  transform: translateY(1px);
}

.recurso__botao:disabled {
  cursor: not-allowed;
}

@container (max-width: 400px) {
  .recurso__controles {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "valores"
      "barra"
      "botoes";
  }

  .recurso__botoes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.recurso__rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--linha-1);
}

.recurso__composicao {
  display: flex;
  flex: 1 1 170px;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  font: 500 0.7188rem/1.45 var(--fonte-mono);
  font-variant-numeric: tabular-nums;
}

.recurso__resumo {
  color: var(--papel-2);
}

.recurso__detalhe {
  font-size: 0.6875rem;
  color: var(--papel-4);
}

.recurso__detalhe:empty {
  display: none;
}

.recurso__perda {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.recurso__perda-valor {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 600 0.9375rem/1 var(--fonte-mono);
  color: var(--cor-recurso);
}

.recurso__perda .controle {
  width: 56px;
}

/* ---- Defesa e derivados ---- */
.grade-defesa {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

@container ficha (min-width: 720px) {
  .grade-defesa {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  }
}

.painel--defesa {
  --cor-painel: #a6b8cc;
}

/* A Defesa num escudo (o desenho é uma máscara: a cor vem da variável) */
.painel--defesa .painel__valor {
  position: relative;
  isolation: isolate;
  width: 86px;
  height: 94px;
  padding-bottom: 8px;
  background: none;
  border: 0;
  box-shadow: none;
}

.painel--defesa .painel__valor::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cor-aco);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 86 94'%3E%3Cpath d='M43 2 83 14v30c0 24-17 40-40 48C20 84 3 68 3 44V14z' fill='black' fill-opacity='0.12' stroke='black' stroke-opacity='0.8'/%3E%3Cpath d='M43 9 76 19v25c0 20-14 33-33 40C24 77 10 64 10 44V19z' fill='none' stroke='black' stroke-opacity='0.26'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 86 94'%3E%3Cpath d='M43 2 83 14v30c0 24-17 40-40 48C20 84 3 68 3 44V14z' fill='black' fill-opacity='0.12' stroke='black' stroke-opacity='0.8'/%3E%3Cpath d='M43 9 76 19v25c0 20-14 33-33 40C24 77 10 64 10 44V19z' fill='none' stroke='black' stroke-opacity='0.26'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}

.painel--deslocamento {
  --cor-painel: var(--ok);
}

.deslocamento__valor {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.deslocamento__valor output {
  font: 600 2.375rem/1 var(--fonte-mono);
  font-variant-numeric: tabular-nums;
}

.deslocamento__quadrados {
  font-size: 0.8125rem;
  color: var(--papel-3);
}

.grade-reacoes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

@container ficha (min-width: 600px) {
  .grade-reacoes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.reacao {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--cor-texto) 2%, transparent);
  border: 1px solid var(--linha-1);
  border-radius: var(--raio-2);
  transition: border-color var(--dur-2) var(--curva);
}

.reacao__nome {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 0.6875rem/1.2 var(--fonte-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--papel-3);
}

.reacao__valor {
  font-size: 1.0625rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.reacao__detalhe {
  font-size: 0.75rem;
  color: var(--papel-3);
}

.reacao__detalhe:empty {
  display: none;
}

.reacao__dica {
  font-size: 0.75rem;
  color: var(--aviso);
}

.reacao--disponivel {
  background: linear-gradient(180deg, color-mix(in srgb, var(--cor-sucesso) 6%, transparent), transparent 70%);
  border-color: var(--linha-2);
}

.reacao--disponivel .reacao__nome {
  color: var(--ok);
}

.reacao--disponivel .reacao__nome::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 8px var(--ok);
}

/* Indisponível: apagado pela cor (legível), não por transparência */
.reacao--indisponivel .reacao__nome,
.reacao--indisponivel .reacao__valor {
  color: var(--papel-3);
}

.reacao--indisponivel .reacao__valor {
  font-weight: 500;
}

/* Testes rápidos (Iniciativa, Fortitude, Reflexos, Vontade) */
.grade-testes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@container ficha (min-width: 720px) {
  .grade-testes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.teste {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 4px 6px 4px 4px;
  background: color-mix(in srgb, var(--cor-texto) 2%, transparent);
  border: 1px solid var(--linha-1);
  border-radius: var(--raio-2);
  transition: border-color var(--dur-1) var(--curva), background-color var(--dur-1) var(--curva);
}

.teste:hover {
  background: color-mix(in srgb, var(--cor-texto) 4%, transparent);
  border-color: var(--linha-2);
}

.teste--treinado {
  box-shadow: inset 2px 0 0 var(--acento);
}

.teste__ir {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "nome  bonus"
    "dados bonus";
  align-items: center;
  gap: 2px 10px;
  min-width: 0;
  padding: 6px 8px;
  font: inherit;
  text-align: left;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.teste__nome {
  grid-area: nome;
  overflow: hidden;
  font-size: 0.8125rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--papel-2);
}

.teste--treinado .teste__nome {
  color: var(--papel);
}

.teste__dados {
  grid-area: dados;
  font: 0.6875rem/1.3 var(--fonte-mono);
  color: var(--papel-3);
}

.teste__bonus {
  grid-area: bonus;
  font: 600 1.375rem/1 var(--fonte-mono);
  font-variant-numeric: tabular-nums;
}

/* Resistências (recolhível) */
.resistencias {
  margin-top: 24px;
  background: color-mix(in srgb, var(--cor-texto) 1.5%, transparent);
  border: 1px solid var(--linha-1);
  border-radius: var(--raio-3);
}

.resistencias > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  font-size: 0.875rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
  border-radius: var(--raio-3);
}

.resistencias > summary:hover {
  background: color-mix(in srgb, var(--cor-texto) 2%, transparent);
}

.resistencias__opcional {
  font-weight: 400;
  color: var(--papel-3);
}

.resistencias__contagem {
  margin-left: auto;
  font: 600 0.6875rem var(--fonte-mono);
  color: var(--ok);
}

.resistencias__corpo {
  padding: 0 16px 16px;
}

.resistencias__corpo .secao__nota {
  margin: 0 0 12px;
}

.resistencias__grupos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.resistencias__grupo {
  min-width: 0;
  margin: 0;
  padding: 8px 12px 10px;
  border: 1px solid var(--linha-1);
  border-radius: var(--raio-2);
}

.resistencias__grupo legend {
  padding: 0 6px;
  font: 500 var(--t-micro) / 1 var(--fonte-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--papel-3);
}

.resistencia {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
  font-size: 0.8438rem;
  color: var(--papel-2);
}

.resistencia .controle {
  width: 56px;
  height: 30px;
}

/* ---- Perícias ---- */
.pericias__pontos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  margin-top: 4px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--cor-texto) 2%, transparent);
  border: 1px solid var(--linha-1);
  border-radius: var(--raio-2);
}

.pericias__pontos .campo-bonus {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.pericias__composicao {
  flex: 1 1 200px;
  font: 500 0.75rem/1.4 var(--fonte-mono);
  font-variant-numeric: tabular-nums;
  color: var(--papel-3);
}

.pericias__ferramentas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  margin-top: 16px;
}

.busca {
  flex: 1 1 220px;
  max-width: 380px;
}

.busca input {
  width: 100%;
  height: var(--altura-controle);
  padding-left: 34px;
}

.busca {
  position: relative;
}

.busca::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 11px;
  z-index: 1;
  width: 15px;
  height: 15px;
  background: var(--papel-3);
  transform: translateY(-50%);
  pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 14px;
  font-size: 0.75rem;
  color: var(--papel-3);
}

.legenda__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.icone {
  display: inline-flex;
  flex: none;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  color: var(--papel-3);
}

.icone[hidden] {
  display: none;
}

.icone svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icone--treinada { color: var(--acento); }
.icone--treinada.icone--alerta { color: var(--aviso); }
.icone--concedida { color: var(--ok); }
.icone--carga.icone--ativo { color: var(--erro); }
.icone--carga.icone--ativo svg { fill: currentColor; fill-opacity: 0.25; }
.icone--kit { color: var(--san); }
.icone--kit.icone--alerta { color: var(--aviso); }

.icone--kit.icone--ativo svg {
  fill: currentColor;
  fill-opacity: 0.35;
}

.tabela-pericias .icone--kit:not(.icone--ativo) {
  opacity: 1;
}

.tabela-pericias {
  width: 100%;
  margin-top: 10px;
  font-size: 0.875rem;
  border-collapse: separate;
  border-spacing: 0;
}

/* O cabeçalho acompanha a rolagem (a tabela é longa) */
.tabela-pericias thead th {
  position: sticky;
  top: var(--topo-fixo);
  z-index: 2;
  padding: 10px 6px;
  font: 500 var(--t-micro) / 1.2 var(--fonte-mono);
  letter-spacing: 0.14em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--papel-3);
  background: color-mix(in oklab, var(--tinta-1) 97%, transparent);
  border-bottom: 1px solid var(--linha-2);
}

.tabela-pericias td,
.tabela-pericias tbody th {
  padding: 2px 6px;
  font-weight: 400;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--linha-1);
  transition: background-color var(--dur-1) var(--curva);
}

.pericia:hover > td,
.pericia:hover > th {
  background: color-mix(in srgb, var(--cor-texto) 2.5%, transparent);
}

/* Ícones (somente treinada, carga, kit, concedida) antes do nome; 3 vagas fixas alinham os nomes */
.pericia__indicadores {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 3px;
  min-width: 51px;
}

.pericia--treinada > .pericia__nome {
  box-shadow: inset 2px 0 0 var(--acento);
}

.pericia__nome {
  padding-left: 12px !important;
}

.pericia__nome-conteudo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-height: 28px;
}

.pericia__rotulo {
  color: var(--papel-2);
}

.pericia--treinada .pericia__rotulo {
  font-weight: 600;
  color: var(--papel);
}

.pericia__especialidade {
  width: 150px;
  height: 26px;
  font-size: 0.8125rem;
}

/* Somente treinada sem treinamento: recua pela cor, nunca por transparência
   (todo texto da linha continua acima de 4,5:1) */
.pericia--requer-treino .controle,
.pericia--requer-treino output,
.pericia--requer-treino .caixa,
.pericia--requer-treino .botao-grau {
  color: var(--papel-3);
}

.pericia--requer-treino .controle {
  border-color: var(--linha-1);
}

/* O nome é apagado pela cor, não por transparência (legível em qualquer fundo) */
.pericia--requer-treino .pericia__rotulo {
  color: var(--papel-3);
}

.pericia--requer-treino .controle:focus {
  color: var(--papel);
  border-color: var(--acento);
}

.pericia .controle {
  height: 28px;
  font-size: 0.8438rem;
}

.pericia__dados output {
  font: 0.7812rem var(--fonte-mono);
  white-space: nowrap;
  color: var(--papel-3);
}

.pericia__bonus output {
  font: 600 1rem/1 var(--fonte-mono);
  font-variant-numeric: tabular-nums;
  color: var(--papel-3);
}

.pericia--treinada .pericia__bonus output {
  font-size: 1.1875rem;
  color: var(--papel);
}

/* O dado da linha: cheio na perícia treinada, só traço nas demais */
.tabela-pericias .botao-icone--rolar {
  color: var(--papel-3);
  background: transparent;
  border-color: var(--linha-2);
}

.tabela-pericias .botao-icone--rolar:hover:not(:disabled) {
  color: color-mix(in srgb, var(--acento) 72%, var(--papel));
  background: var(--acento-suave);
  border-color: var(--acento-linha);
  box-shadow: none;
}

.tabela-pericias .pericia--treinada .botao-icone--rolar {
  color: var(--acento-texto);
  background: linear-gradient(180deg, var(--acento-claro) -70%, var(--acento) 70%);
  border-color: color-mix(in oklab, var(--acento-claro) 60%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--cor-realce) 30%, transparent) inset;
}

.tabela-pericias .pericia--treinada .botao-icone--rolar:hover:not(:disabled) {
  color: var(--acento-texto);
  background: linear-gradient(180deg, var(--acento-claro) -40%, var(--acento) 80%);
  border-color: var(--acento-claro);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--cor-realce) 35%, transparent) inset, 0 0 0 3px var(--acento-suave);
}

.pericia__dados { width: 84px; white-space: nowrap; }
/* Sigla do atributo: texto comum que vira botão (sem moldura); abre o painel de troca */
.atributo-sigla {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-right: 4px;
  padding: 0 4px;
  font: 600 0.7188rem/1 var(--fonte-mono);
  letter-spacing: 0.08em;
  color: var(--papel-2);
  background: transparent;
  border: 0;
  border-radius: var(--raio-1);
  cursor: pointer;
}

.atributo-sigla:hover {
  color: var(--acento);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.atributo-sigla[aria-expanded="true"] {
  color: color-mix(in srgb, var(--acento) 72%, var(--papel));
  background: var(--acento-suave);
}

/* Atributo diferente do padrão: acento fixo + ponto, nunca só a cor */
.pericia--atributo-alterado .atributo-sigla {
  color: var(--acento);
}

.pericia--atributo-alterado .atributo-sigla::after {
  content: "•";
  margin-left: 2px;
}

.seletor-atributo {
  position: fixed;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 200px;
  padding: 10px;
  background: var(--tinta-superficie);
  border: 1px solid var(--linha-2);
  border-radius: var(--raio-3);
  box-shadow: var(--sombra-2);
}

.seletor-atributo[hidden] {
  display: none;
}

.seletor-atributo__titulo {
  margin: 0;
  font: 500 var(--t-micro) / 1.2 var(--fonte-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--papel-3);
}

.seletor-atributo__lista {
  display: grid;
  gap: 4px;
}

.seletor-atributo__opcao,
.seletor-atributo__padrao {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 10px;
  font: inherit;
  font-size: 0.875rem;
  color: var(--papel);
  text-align: left;
  background: transparent;
  border: 1px solid var(--linha-1);
  border-radius: var(--raio-2);
  cursor: pointer;
}

.seletor-atributo__opcao strong {
  min-width: 2.6em;
  font-family: var(--fonte-mono);
  letter-spacing: 0.08em;
}

.seletor-atributo__opcao:hover,
.seletor-atributo__padrao:hover:not(:disabled) {
  background: var(--acento-suave);
  border-color: var(--acento-linha);
}

.seletor-atributo__opcao[aria-pressed="true"] {
  color: color-mix(in srgb, var(--acento) 72%, var(--papel));
  background: var(--acento-suave);
  border-color: var(--acento);
  font-weight: 600;
}

.seletor-atributo__opcao[aria-pressed="true"]::after {
  content: "✓";
  margin-left: auto;
}

.seletor-atributo__padrao {
  justify-content: center;
  font-size: 0.8125rem;
  color: var(--papel-2);
  border-style: dashed;
}

.seletor-atributo__padrao:disabled {
  color: var(--papel-3);
  cursor: default;
}

@media (max-width: 1023px), (pointer: coarse) {
  .seletor-atributo__opcao,
  .seletor-atributo__padrao {
    min-height: 44px;
  }
}

/* No celular a sigla ocupa 44 px de altura sem aumentar a linha (a área de toque sobra para cima e para baixo) */
@container ficha (max-width: 759px) {
  .atributo-sigla {
    min-width: 44px;
    min-height: 44px;
    margin: -14px 0 -14px -8px;
    justify-content: center;
  }
}

/* Teste que rola "menor": seta para baixo ao lado da sigla */
.marca-menor {
  display: inline-flex;
  width: 14px;
  height: 14px;
  vertical-align: middle;
  color: var(--aviso);
}

.marca-menor[hidden] {
  display: none;
}

.marca-menor svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pericia__grau { width: 44px; text-align: center; }
.pericia__outros { width: 66px; }
.pericia__bonus { width: 56px; text-align: right; }

/* Grau: três chevrons (como divisas); acendem 1 (Treinado), 2 (Veterano) ou 3 (Expert) */
.botao-grau {
  color: var(--papel-2);
}

.botao-grau svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

.botao-grau .grau__v {
  opacity: 0.35;
}

.botao-grau[data-nivel="1"] .grau__v--1,
.botao-grau[data-nivel="2"] .grau__v--1,
.botao-grau[data-nivel="2"] .grau__v--2,
.botao-grau[data-nivel="3"] .grau__v {
  opacity: 1;
}

.pericia--treinada .botao-grau {
  color: var(--acento);
  border-color: var(--acento-linha);
}

.botao-grau:hover:not(:disabled) {
  color: color-mix(in srgb, var(--acento) 72%, var(--papel));
  background: var(--acento-suave);
  border-color: var(--acento-linha);
}

.pericia__grau-impressao {
  display: none;
}

/* Na mesa o grau é só um indicador: igual ao botão, sem apagar e sem reagir ao mouse */
.botao-grau:disabled {
  opacity: 1;
}

.pericia__rolar {
  width: 52px;
  text-align: center;
}

.tabela-pericias .pericia__rolar .botao-icone,
.tabela-pericias .botao-grau {
  width: 28px;
  height: 28px;
  margin: 0 auto;
}

.pericia__concedida {
  text-align: center;
}

.pericias__vazio {
  margin-top: 12px;
  font-size: 0.8438rem;
  text-align: center;
  color: var(--papel-3);
}

@keyframes destaque-celula {
  0%, 45% { background-color: var(--acento-suave); }
  100% { background-color: transparent; }
}

.pericia--destaque > td,
.pericia--destaque > th {
  animation: destaque-celula 1.8s var(--curva);
}

@container ficha (min-width: 760px) {
  .so-celular {
    display: none;
  }
}

/* Estreito: cada perícia continua numa linha só (nome com os dados embaixo,
   grau, outros, total e rolar); em edição entra uma 2ª linha com atributo e "concedida" */
@container ficha (max-width: 759px) {
  .tabela-pericias {
    display: block;
  }

  .tabela-pericias thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .tabela-pericias tbody {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap: 4px 6px;
  }

  .pericia {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto auto;
    grid-template-areas:
      "nome  nome grau outros bonus rolar"
      "dados conc grau outros bonus rolar";
    align-items: center;
    gap: 0 6px;
    padding: 2px 8px 2px 12px;
    background: color-mix(in oklab, var(--tinta-superficie) 88%, transparent);
    border: 1px solid var(--linha-1);
    border-radius: var(--raio-2);
  }

  .pericia--treinada {
    border-color: var(--acento-linha);
  }

  .tabela-pericias .pericia > td,
  .tabela-pericias .pericia > th {
    display: block;
    width: auto;
    min-width: 0;
    min-height: 0;
    padding: 0 !important;
    background: none;
    border: 0;
    box-shadow: none;
  }

  .pericia__nome { grid-area: nome; align-self: end; }
  .pericia__dados { grid-area: dados; align-self: start; }
  .pericia__grau { grid-area: grau; width: auto; }
  .pericia__outros { grid-area: outros; width: auto; }
  .pericia__bonus { grid-area: bonus; width: auto; min-width: 2.2em; text-align: right; }
  .pericia__rolar { grid-area: rolar; width: auto; text-align: right; }
  .pericia__concedida { grid-area: conc; width: auto; text-align: left; white-space: nowrap; }

  /* A caixa "Concedida" tem 44 px de toque sem aumentar a linha */
  .pericia__concedida .caixa {
    margin-block: -12px;
  }

  .pericia__nome-conteudo {
    min-height: 0;
    gap: 2px 6px;
  }

  /* Na linha estreita os ícones vêm depois do nome (o nome alinha à esquerda e não quebra) */
  .pericia__indicadores {
    order: 2;
    min-width: 0;
  }

  .tabela-pericias .pericia > .pericia__outros .controle {
    width: 56px;
    padding: 0 4px;
    text-align: center;
  }

  .pericia__bonus output {
    font-size: 1.125rem;
  }

  .pericia--treinada .pericia__bonus output {
    font-size: 1.25rem;
  }

  .pericia__dados output {
    white-space: nowrap;
    font-size: 0.75rem;
  }

  .pericia [data-rotulo]::before {
    display: none;
  }

  .pericia .controle {
    height: var(--altura-controle);
    font-size: 1rem; /* evita zoom automático no iPhone */
  }

  .pericia .pericia__especialidade {
    flex: 1 1 120px;
    height: 32px;
  }

  .pericia__concedida .caixa {
    gap: 6px;
  }

  .pericia__concedida .caixa span {
    font-size: 0.7188rem;
  }

  .pericia--destaque > td,
  .pericia--destaque > th {
    animation: none;
  }

  .pericia--destaque {
    animation: destaque-cartao 1.8s var(--curva);
  }
}

@keyframes destaque-cartao {
  0%, 45% { background-color: var(--acento-suave); border-color: var(--acento); }
}

/* ---- Ataques ---- */
.ataques__lista {
  display: grid;
  gap: 14px;
}

.ataque {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 16px 18px 16px 20px;
  background:
    linear-gradient(90deg, var(--acento-suave), transparent 32%),
    color-mix(in oklab, var(--tinta-superficie) 88%, transparent);
  border: 1px solid var(--linha-1);
  border-radius: var(--raio-3);
  box-shadow: var(--sombra-1);
}

.ataque::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--acento);
  box-shadow: 0 0 12px var(--acento);
}

.ataque__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
}

.ataque__linha + .ataque__linha {
  padding-top: 12px;
  border-top: 1px dashed var(--linha-1);
}

.ataque__campo {
  display: flex;
  flex: 1 1 140px;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.ataque .controle {
  width: 100%;
  height: var(--altura-controle);
  font-size: 0.875rem;
}

.ataque__campo--nome { flex: 2 1 200px; }

.ataque__campo--nome .controle,
.ritual__nome {
  height: 40px;
  font: 600 1.3125rem/1 var(--fonte-display);
  letter-spacing: 0.01em;
}

.ataque__campo--pericia { flex: 1 1 180px; }
.ataque__campo--teste { flex: 1 1 140px; }
.ataque__campo--outros { flex: 0 0 90px; }
.ataque__campo--dano-bonus { flex: 0 0 116px; }
.ataque__campo--dano { flex: 1 1 150px; }
.ataque__campo--critico { flex: 0 0 150px; }
.ataque__campo--tipo-dano { flex: 1 1 140px; }
.ataque__campo--propriedades { flex: 2 1 200px; }
.ataque__campo--municao { flex: 0 1 220px; }
.ataque__campo--arma { flex: 1 1 180px; }
.ataque__campo--notas { flex: 1 1 240px; }

.ataque__teste {
  display: flex;
  align-items: center;
  height: var(--altura-controle);
  font: 600 1.125rem/1 var(--fonte-mono);
  white-space: nowrap;
  color: var(--acento);
  text-shadow: 0 0 16px var(--brilho);
}

.ataque__formula {
  font-family: var(--fonte-mono);
}

.ataque__erro {
  font-size: 0.75rem;
  color: var(--erro);
}

.ataque__crit-rotulo {
  margin-left: 4px;
  font-family: var(--fonte-mono);
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--papel);
}

.ataque__critico {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--papel-3);
}

.ataque .ataque__critico .controle {
  width: 56px;
}

.ataque__municao {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--altura-controle);
}

.ataque[data-municao="nao"] .ataque__contador {
  display: none;
}

.ataque__acoes {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* ---- Habilidades e poderes ---- */
.filtros-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: 14px;
}

.abas {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  background: color-mix(in srgb, var(--cor-poco) 30%, transparent);
  border: 1px solid var(--linha-1);
  border-radius: var(--raio-2);
}

.aba {
  height: 30px;
  padding: 0 12px;
  font-size: 0.7812rem;
  font-weight: 600;
  color: var(--papel-3);
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  transition: color var(--dur-1) var(--curva), background-color var(--dur-1) var(--curva);
}

.aba:hover {
  color: var(--papel);
  background: color-mix(in srgb, var(--cor-texto) 5%, transparent);
}

.aba[aria-pressed="true"] {
  color: var(--acento-texto);
  background: var(--acento);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--cor-realce) 30%, transparent) inset, 0 4px 14px -6px var(--brilho);
}

.habilidades__lista {
  display: grid;
  gap: 8px;
}

.habilidades__lista:empty {
  display: none;
}

.habilidade {
  --cor-fonte: var(--papel-3);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 6px 12px 6px 18px;
  background: color-mix(in oklab, var(--tinta-superficie) 85%, transparent);
  border: 1px solid var(--linha-1);
  border-radius: var(--raio-2);
  transition: border-color var(--dur-2) var(--curva), box-shadow var(--dur-3) var(--curva);
}

.habilidade::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--cor-fonte);
}

.habilidade[data-fonte="classe"] { --cor-fonte: var(--acento); }
.habilidade[data-fonte="origem"] { --cor-fonte: var(--ok); }
.habilidade[data-fonte="trilha"] { --cor-fonte: var(--san); }
.habilidade[data-fonte="poder"] { --cor-fonte: var(--pe); }

.habilidade--aberta {
  padding-bottom: 16px;
  border-color: var(--linha-2);
  box-shadow: var(--sombra-2);
}

.habilidade__resumo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.habilidade__alternar {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 42px;
  padding: 4px 0;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}

.habilidade__textos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  min-width: 0;
}

.habilidade__nome {
  min-width: 0;
  font: 600 1.1875rem/1.2 var(--fonte-display);
  overflow-wrap: anywhere;
  transition: color var(--dur-1) var(--curva);
}

.habilidade__nome--vazio {
  font-style: italic;
  font-weight: 500;
  color: var(--papel-4);
}

.habilidade__alternar:hover .habilidade__nome {
  color: var(--acento);
}

.habilidade .selo-fonte {
  color: var(--cor-fonte);
}

.habilidade__meta {
  font: 500 0.7188rem var(--fonte-mono);
  color: var(--papel-3);
}

.habilidade__detalhes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--linha-1);
  animation: surgir var(--dur-3) var(--curva-saida);
}

.habilidade__rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Leitura x edição: só tela (a impressão mostra os campos e esconde a leitura) */
.habilidade__edicao {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.habilidade[data-modo="leitura"] .habilidade__edicao,
.habilidade[data-modo="edicao"] .habilidade__leitura {
  display: none;
}

.habilidade__leitura {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.habilidade__leitura-linha {
  margin: 0;
  max-width: 68ch;
  color: var(--papel-2);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.habilidade__leitura-linha strong {
  color: var(--cor-texto);
}

.habilidade__leitura-rotulo {
  margin: 4px 0 0;
  font: 500 0.6875rem/1.4 var(--fonte-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--papel-3);
}

.habilidade__leitura-vazia {
  margin: 0;
  color: var(--papel-3);
  font-size: 0.875rem;
}

.habilidade__editar {
  color: var(--papel-3);
}

.habilidade__auto {
  font: 500 0.6875rem/1.4 var(--fonte-mono);
  letter-spacing: 0.06em;
  color: var(--papel-3);
}

.habilidade__auto[hidden] {
  display: none;
}

.habilidade__editar:hover,
.habilidade__editar[aria-expanded="true"] {
  color: var(--acento);
}

.campos-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
}

.habilidade .controle,
.ritual .controle {
  width: 100%;
  height: var(--altura-controle);
  font-size: 0.875rem;
}

.habilidade textarea.controle,
.ritual textarea.controle {
  height: auto;
  min-height: 72px;
}

.habilidade__detalhes > .ataque__campo,
.ritual > .ataque__campo,
.forma__corpo > .ataque__campo {
  flex: none;
}

.ataque__campo--custo { flex: 0 0 auto; }
.ataque__campo--fonte { flex: 1 1 130px; }
.ataque__campo--ativacao { flex: 1 1 130px; }
.ataque__campo--pagina { flex: 0 1 100px; }
.ataque__campo--circulo { flex: 0 0 92px; }
.ataque__campo--elemento { flex: 1 1 120px; }
.ataque__campo--atributo-dt { flex: 0 1 170px; }
.ataque__campo--custo-base { flex: 0 0 120px; }
.ataque__campo--requer-circulo { flex: 0 0 110px; }
.ataque__campo--teste-resistencia,
.ataque__campo--efeito-resistencia { flex: 1 1 160px; }
.ataque__campo--notas-resistencia { flex: 2 1 220px; }

.habilidade__dt {
  flex: 1 1 220px;
  align-self: center;
  font: 500 0.7812rem/1.4 var(--fonte-mono);
  font-variant-numeric: tabular-nums;
  color: var(--papel-3);
}

/* ---- Rituais ---- */
.rituais__topo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

@container ficha (min-width: 760px) {
  .rituais__topo {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.painel--dt { --cor-painel: var(--acento); }
.painel--afinidade { --cor-painel: var(--el-conhecimento); }
.painel--turno { --cor-painel: var(--pe); }
.painel--passou { --cor-painel: var(--erro); }

.painel--afinidade .campo-texto {
  flex: none;
}

.turno__valor {
  font-size: 0.8438rem;
  color: var(--papel-3);
}

.turno__valor output {
  font: 600 1.25rem/1 var(--fonte-mono);
  font-variant-numeric: tabular-nums;
  color: var(--papel);
}

.painel--passou .turno__valor output:first-child {
  color: var(--erro);
}

.filtro-select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.filtro-select .controle {
  height: var(--altura-controle);
  font: 0.875rem var(--fonte-ui);
  letter-spacing: normal;
  text-transform: none;
}

.rituais__grupos {
  display: grid;
  gap: 12px;
}

.grupo-ritual {
  min-width: 0;
  background: color-mix(in srgb, var(--cor-texto) 1.5%, transparent);
  border: 1px solid var(--linha-1);
  border-radius: var(--raio-3);
}

.grupo-ritual > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  min-height: 50px;
  padding: 10px 16px;
  list-style: none;
  cursor: pointer;
  border-radius: var(--raio-3);
}

.grupo-ritual > summary:hover {
  background: color-mix(in srgb, var(--cor-texto) 2%, transparent);
}

.grupo-ritual__titulo {
  font: 600 1.3125rem/1 var(--fonte-display);
  letter-spacing: 0.02em;
}

.grupo-ritual__contagem {
  font: 500 0.75rem var(--fonte-mono);
  color: var(--papel-3);
}

.grupo-ritual__bloqueado {
  margin-left: auto;
  padding: 3px 8px;
  font: 600 0.6875rem/1.4 var(--fonte-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--aviso);
  background: var(--aviso-fundo);
  border: 1px solid var(--aviso-borda);
  border-radius: 3px;
}

.grupo-ritual__lista {
  display: grid;
  gap: 12px;
  padding: 0 12px 12px;
}

.grupo-ritual__lista:empty {
  display: none;
}

.grupo-ritual__vazio {
  padding: 0 16px 14px 36px;
  font-size: 0.8125rem;
  color: var(--papel-3);
}

/* Cartão de ritual: cor e símbolo do elemento */
.ritual {
  --cor-elemento: var(--linha-3);
  --glifo: none;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 16px 18px 16px 20px;
  overflow: hidden;
  background:
    radial-gradient(60% 90% at 100% 0%, color-mix(in oklab, var(--cor-elemento) 11%, transparent), transparent 62%),
    color-mix(in oklab, var(--tinta-superficie) 92%, transparent);
  border: 1px solid var(--linha-1);
  border-radius: var(--raio-3);
  box-shadow: var(--sombra-1);
}

.ritual::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--cor-elemento);
  box-shadow: 0 0 12px var(--cor-elemento);
}

/* Símbolo do elemento em relevo, bem apagado */
.ritual::after {
  content: "";
  position: absolute;
  top: 40%;
  right: -18px;
  width: 170px;
  height: 170px;
  background: var(--cor-elemento);
  opacity: 0.05;
  -webkit-mask: var(--glifo) center / contain no-repeat;
  mask: var(--glifo) center / contain no-repeat;
  transform: translateY(-50%);
  pointer-events: none;
}

.ritual > * {
  position: relative;
  z-index: 1;
}

.ritual[data-elemento="sangue"] {
  --cor-elemento: var(--el-sangue);
  --glifo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.2'%3E%3Cpath d='M12 2.8c3.6 4.5 6.2 7.9 6.2 10.9a6.2 6.2 0 0 1-12.4 0c0-3 2.6-6.4 6.2-10.9z'/%3E%3Cpath d='M9.3 14.4a2.8 2.8 0 0 0 2.7 2.6'/%3E%3C/svg%3E");
}

.ritual[data-elemento="morte"] {
  --cor-elemento: var(--el-morte);
  --glifo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.2'%3E%3Cpath d='M12 12a1.2 1.2 0 0 1 2.4 0a2.4 2.4 0 0 1-4.8 0a3.6 3.6 0 0 1 7.2 0a4.8 4.8 0 0 1-9.6 0a6 6 0 0 1 12 0a7.2 7.2 0 0 1-14.4 0'/%3E%3C/svg%3E");
}

.ritual[data-elemento="conhecimento"] {
  --cor-elemento: var(--el-conhecimento);
  --glifo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.2'%3E%3Cpath d='M12 2.5 21.5 19.5h-19z'/%3E%3Ccircle cx='12' cy='13.6' r='3.1'/%3E%3Cpath d='M12 2.5v8'/%3E%3C/svg%3E");
}

.ritual[data-elemento="energia"] {
  --cor-elemento: var(--el-energia);
  --glifo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.2'%3E%3Cpath d='M13.5 2 5 13.6h6.2L10.3 22 19 10.2h-6.3z'/%3E%3C/svg%3E");
}

.ritual[data-elemento="medo"] {
  --cor-elemento: var(--el-medo);
  --glifo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.2'%3E%3Cpath d='M2.5 12s3.6-6.5 9.5-6.5 9.5 6.5 9.5 6.5-3.6 6.5-9.5 6.5S2.5 12 2.5 12z'/%3E%3Cpath d='M12 7.6c1.3 1.6 1.3 7.2 0 8.8-1.3-1.6-1.3-7.2 0-8.8z'/%3E%3C/svg%3E");
}

/* Círculo além do liberado pelo NEX: só um destaque, nada é bloqueado */
.ritual--alem {
  border-color: var(--aviso-borda);
}

.ritual__cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
}

.ritual__aviso {
  color: var(--aviso);
  background: var(--aviso-fundo);
  border-color: var(--aviso-borda);
}

.ritual__aviso::before {
  background: var(--aviso);
}

.ritual__resistencia {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 5px 10px;
  font: 600 0.7812rem/1.4 var(--fonte-mono);
  color: var(--papel);
  background: color-mix(in srgb, var(--cor-poco) 28%, transparent);
  border: 1px solid var(--linha-2);
  border-radius: 4px;
}

/* Marca do elemento do ritual (no lugar de uma faixa lateral) */
.ritual__resistencia::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  background: var(--cor-elemento);
  border-radius: 50%;
}

.ritual__medo {
  color: var(--papel-2);
}

.ritual__medo::before {
  background: var(--el-medo);
}

.ritual__detalhes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 10px 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--linha-1);
}

.ritual__resistencia-campos {
  padding-top: 12px;
  border-top: 1px dashed var(--linha-1);
}

/* Formas de conjuração: lado a lado com largura, empilhadas no estreito */
.ritual__formas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding-top: 12px;
  border-top: 1px dashed var(--linha-1);
}

@container ficha (min-width: 880px) {
  .ritual__formas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.forma {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--cor-poco) 24%, transparent);
  border: 1px solid var(--linha-2);
  border-radius: var(--raio-2);
}

.forma[data-ativa="nao"] {
  align-self: start;
  background: transparent;
  border-style: dashed;
}

.forma[data-ativa="nao"] .forma__corpo {
  display: none;
}

.forma__cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
  min-height: 24px;
}

.forma__nome {
  font: 600 0.6875rem/1.2 var(--fonte-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--papel);
}

.forma[data-ativa="nao"] .forma__nome {
  color: var(--papel-3);
}

.forma__sempre {
  font-size: 0.7188rem;
  color: var(--papel-4);
}

.forma__corpo {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.forma .campos-linha {
  align-items: flex-start;
}

.forma__corpo .ataque__campo--dano {
  flex: 1 1 140px;
}

.forma__dano,
.forma__cura {
  font-family: var(--fonte-mono);
}

.forma__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.forma__custos {
  align-items: flex-end;
}

.forma__afinidade {
  height: var(--altura-controle);
}

.forma__total {
  font-size: 0.7812rem;
  color: var(--papel-3);
}

.forma__total output {
  font: 600 0.9375rem var(--fonte-mono);
  color: var(--papel);
}

.forma__custos .forma__total {
  flex: 1 1 auto;
  align-self: center;
  text-align: right;
}

.forma__base {
  font-size: 0.7188rem;
  color: var(--papel-4);
}

.forma__avisos {
  margin: 0;
  padding: 8px 12px 8px 30px;
  color: var(--aviso);
  background: var(--aviso-fundo);
  border-color: var(--aviso-borda);
}

.forma__avisos::before {
  background: var(--aviso);
}

/* ---- Inventário ---- */
.inventario__topo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

@container ficha (min-width: 760px) {
  .inventario__topo {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  }
}

.painel--patente { --cor-painel: var(--acento); }
.painel--carga { --cor-painel: var(--ok); }
.painel--sobrecarregado { --cor-painel: var(--erro); }

.campo-texto .controle--numero {
  width: 100%;
}

.limites {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.limite {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 12px;
  background: color-mix(in srgb, var(--cor-poco) 25%, transparent);
  border: 1px solid var(--linha-2);
  border-radius: var(--raio-pilula);
}

.limite__rotulo {
  font: 500 0.6875rem/1 var(--fonte-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--papel-3);
}

.limite__valor {
  font: 600 0.9375rem/1 var(--fonte-mono);
  font-variant-numeric: tabular-nums;
}

.limite--excedido {
  background: var(--erro-fundo);
  border-color: var(--erro);
}

.limite--excedido .limite__rotulo,
.limite--excedido .limite__valor {
  color: var(--erro);
}

.painel--patente .avisos {
  margin-top: 0;
}

.carga__valor {
  display: flex;
  flex: none;
  align-items: baseline;
  gap: 4px;
}

.carga__valor output {
  font: 600 1.875rem/1 var(--fonte-mono);
  font-variant-numeric: tabular-nums;
}

.carga__separador {
  font: 300 1.375rem/1 var(--fonte-mono);
  color: var(--papel-4);
}

.carga__unidade {
  margin-left: 4px;
  font-size: 0.7812rem;
  color: var(--papel-3);
}

.painel--sobrecarregado .carga__valor output:first-child {
  color: var(--erro);
}

.painel .barra__preenchimento {
  background: var(--cor-painel);
  box-shadow: 0 0 12px var(--cor-painel);
}

/* Itens: cartões no estreito, linhas com largura */
.itens__cabecalho {
  display: none;
}

.itens__lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 10px;
}

.itens__vazio {
  padding: 18px;
  font-size: 0.8438rem;
  text-align: center;
  color: var(--papel-3);
  border: 1px dashed var(--linha-2);
  border-radius: var(--raio-2);
}

.item {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "nome nome acoes"
    "tipo tipo tipo"
    "cat  esp  qtd"
    "det  det  det"
    "desc desc desc";
  align-items: end;
  gap: 0 8px;
  min-width: 0;
  padding: 12px 14px;
  background: color-mix(in oklab, var(--tinta-superficie) 88%, transparent);
  border: 1px solid var(--linha-1);
  border-radius: var(--raio-2);
}

.item__nome { grid-area: nome; }
.item__tipo { grid-area: tipo; }
.item__categoria { grid-area: cat; }
.item__espacos { grid-area: esp; }
.item__quantidade { grid-area: qtd; }
.item__detalhes { grid-area: det; }
.item__acoes { grid-area: acoes; }
.item__descricao { grid-area: desc; }

.item > div {
  min-width: 0;
}

.item__tipo,
.item__categoria,
.item__espacos,
.item__quantidade,
.item__detalhes,
.item__descricao {
  margin-top: 10px;
}

.item .controle {
  width: 100%;
  height: var(--altura-controle);
  font-size: 0.875rem;
}

.item__nome .controle {
  font-weight: 600;
}

.item [data-rotulo]::before {
  content: attr(data-rotulo);
  display: block;
  margin-bottom: 5px;
  font: 500 var(--t-micro) / 1.2 var(--fonte-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--papel-3);
}

.item--equipada {
  border-color: color-mix(in srgb, var(--cor-aco) 40%, transparent);
  box-shadow: inset 2px 0 0 var(--cor-aco);
}

/* Campos que dependem do tipo: só aparecem no tipo certo */
.item__det {
  display: none;
}

.item[data-tipo-item="protecao"] .item__det--protecao,
.item[data-tipo-item="kit"] .item__det--kit {
  display: flex;
}

.item[data-tipo-item="geral"] .item__detalhes,
.item[data-tipo-item="arma"] .item__detalhes {
  display: none;
}

.item__det--protecao {
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 12px;
}

.item__det--protecao .caixa {
  height: var(--altura-controle);
}

.item__mini {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.item .item__mini .controle {
  width: 72px;
}

.item__det--kit .controle {
  max-width: 260px;
}

.item__acoes {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
}

.item__descricao textarea.controle {
  height: auto;
  min-height: 72px;
}

@container ficha (min-width: 940px) {
  .itens__cabecalho,
  .item {
    grid-template-columns: minmax(140px, 1.4fr) 124px 72px 76px 64px minmax(300px, 2.4fr) 76px;
    grid-template-areas:
      "nome tipo cat esp qtd det acoes"
      "desc desc desc desc desc desc desc";
    column-gap: 8px;
    row-gap: 0;
  }

  .itens__cabecalho {
    display: grid;
    padding: 0 12px 8px;
    font: 500 var(--t-micro) / 1.2 var(--fonte-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--papel-3);
    border-bottom: 1px solid var(--linha-2);
  }

  .itens__lista {
    display: block;
  }

  .item {
    align-items: center;
    padding: 6px 12px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--linha-1);
    border-radius: 0;
    transition: background-color var(--dur-1) var(--curva);
  }

  .item:hover {
    background: color-mix(in srgb, var(--cor-texto) 2.5%, transparent);
  }

  .item [data-rotulo]::before {
    display: none;
  }

  .item .controle {
    height: 32px;
    font-size: 0.8438rem;
  }

  /* A coluna "Detalhes" sempre existe, mesmo vazia */
  .item[data-tipo-item="geral"] .item__detalhes,
  .item[data-tipo-item="arma"] .item__detalhes {
    display: block;
  }

  .item__det--protecao .caixa {
    height: 32px;
  }

  .item .item__mini {
    flex-direction: row;
    align-items: center;
    gap: 6px;
  }

  .item .item__mini .controle {
    width: 54px;
  }

  .item__tipo,
  .item__categoria,
  .item__espacos,
  .item__quantidade,
  .item__detalhes {
    margin-top: 0;
  }

  .item__descricao {
    margin: 6px 0;
  }

  .item .botao-icone {
    width: 32px;
    height: 32px;
  }

  .itens__vazio {
    margin-top: 10px;
  }
}

/* ---- Descrição: caderno de campo pautado ---- */
.descricao__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px 20px;
}

@container ficha (min-width: 720px) {
  .descricao__grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .descricao__campo--largo {
    grid-column: 1 / -1;
  }
}

.descricao__campo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.descricao__campo textarea.controle {
  width: 100%;
  min-height: 116px;
  padding: 4px 14px 8px;
  font: 0.9375rem/28px var(--fonte-ui);
  background-color: color-mix(in srgb, var(--cor-poco) 26%, transparent);
  background-image: repeating-linear-gradient(180deg, transparent 0 27px, var(--linha-1) 27px 28px);
  background-attachment: local;
  background-position: 0 4px;
  border-radius: var(--raio-2);
}

/* ---- Janela "Fontes" ---- */
.fontes__lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
}

.fontes__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--cor-texto) 2%, transparent);
  border: 1px solid var(--linha-1);
  border-radius: var(--raio-2);
}

.fontes__nome {
  color: var(--papel);
}

.fontes__contagem {
  font: 500 0.6875rem var(--fonte-mono);
  color: var(--papel-3);
}

/* ---- Visão de mesa: ataques, rituais e perícias em resumo ----
   Na mesa, cada cartão mostra o que se usa no meio da cena (nome, uma linha
   de resumo e os botões de rolar ou conjurar). "Editar" abre o formulário.
   Só tela: a impressão (outro CSS) mostra todos os campos. */
.cartao-resumo {
  display: none;
  margin: 0;
  font: 500 0.7812rem/1.5 var(--fonte-mono);
  font-variant-numeric: tabular-nums;
  color: var(--papel-2);
  overflow-wrap: anywhere;
}

.cartao-editar {
  min-height: 34px;
  padding: 6px 10px;
  font: 600 0.8125rem/1 var(--fonte-ui);
  text-decoration: none;
  color: var(--papel-2);
  border: 1px solid var(--linha-2);
  border-radius: var(--raio-2);
}

.cartao-editar:hover {
  color: var(--papel);
  border-color: var(--linha-3);
}

.cartao-editar[aria-expanded="true"] {
  color: var(--acento);
  border-color: var(--acento-linha);
}

/* Ataque em resumo */
.ataque[data-modo="resumo"] {
  gap: 8px;
}

.ataque[data-modo="resumo"] .ataque__campo--pericia,
.ataque[data-modo="resumo"] .ataque__campo--outros,
.ataque[data-modo="resumo"] .ataque__linha--dano > .ataque__campo,
.ataque[data-modo="resumo"] .ataque__linha--detalhes,
.ataque[data-modo="resumo"] .ataque__linha--fim {
  display: none;
}

.ataque[data-modo="resumo"] .ataque__linha--dano {
  align-items: center;
  padding-top: 0;
  border-top: 0;
}

.ataque[data-modo="resumo"] .cartao-resumo {
  display: block;
  flex: 1 1 260px;
}

.ataque[data-modo="resumo"] .ataque__linha--teste {
  align-items: center;
}

.ataque[data-modo="resumo"] .ataque__campo--nome .ataque__rotulo {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* O nome continua editável, mas lê como título do cartão */
.ataque[data-modo="resumo"] .ataque__nome,
.ritual[data-modo="resumo"] .ritual__nome {
  height: 38px;
  padding-left: 0;
  font-size: 1.4375rem;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.ataque[data-modo="resumo"] .ataque__nome:hover,
.ritual[data-modo="resumo"] .ritual__nome:hover {
  border-color: transparent;
}

.ataque[data-modo="resumo"] .ataque__nome:focus,
.ritual[data-modo="resumo"] .ritual__nome:focus {
  padding-left: 10px;
  background: var(--campo-fundo);
  border-color: var(--acento);
}

.ataque[data-modo="resumo"] .ataque__campo--teste {
  flex: 0 1 auto;
}

@container ficha (max-width: 600px) {
  /* Teste na mesma linha do rótulo: o cartão fica baixo no celular */
  .ataque[data-modo="resumo"] .ataque__campo--teste {
    flex: 1 1 100%;
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
  }

  .ataque[data-modo="resumo"] .ataque__teste {
    font-size: 1.1875rem;
  }
}

/* Ritual em resumo (leitura): nome, identificação, descrição e formas; "Editar" abre o formulário */
.ritual[data-modo="resumo"] {
  gap: 10px;
}

.ritual[data-modo="resumo"] .ritual__cabecalho {
  align-items: center;
}

.ritual[data-modo="resumo"] .ritual__cabecalho > .ataque__campo:not(.ataque__campo--nome),
.ritual[data-modo="resumo"] .ritual__detalhes,
.ritual[data-modo="resumo"] .ritual__resistencia-campos,
.ritual[data-modo="resumo"] > .ataque__campo--notas,
.ritual[data-modo="resumo"] .ritual__formas,
.ritual[data-modo="resumo"] .cartao-resumo,
.ritual[data-modo="edicao"] .ritual__leitura {
  display: none;
}

.ritual[data-modo="resumo"] .ritual__cabecalho .ataque__campo--nome .ataque__rotulo {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.ritual__leitura {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ritual__leitura-meta {
  margin: 0;
  font: 500 0.7812rem/1.5 var(--fonte-mono);
  color: var(--papel-2);
}

.ritual__ident {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px 16px;
  margin: 0;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--cor-texto) 4%, transparent);
  border-left: 2px solid var(--cor-elemento, var(--acento));
  border-radius: var(--raio-1);
}

.ritual__ident > div {
  min-width: 0;
}

.ritual__ident-rotulo {
  font: 500 0.6875rem/1.4 var(--fonte-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--papel-3);
}

.ritual__ident-valor {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.ritual__leitura-forma {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ritual__leitura-forma[data-forma-leitura="discente"],
.ritual__leitura-forma[data-forma-leitura="verdadeira"] {
  padding-left: 12px;
  border-left: 2px solid var(--linha-2);
}

.ritual__leitura-titulo {
  margin: 0;
  font: 500 0.6875rem/1.4 var(--fonte-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--papel-3);
}

.ritual__leitura-texto {
  margin: 0;
  max-width: 68ch;
  color: var(--papel-2);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.ritual__leitura-vazia {
  margin: 0;
  color: var(--papel-3);
  font-size: 0.875rem;
}

.ritual__leitura-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ritual__rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ritual__editar {
  color: var(--papel-3);
}

.ritual__editar:hover,
.ritual__editar[aria-expanded="true"] {
  color: var(--acento);
}

/* Perícias na mesa: sem "concedida" (fica em "Editar perícias"); atributo, grau, outros e total sempre aparecem */
.secao--pericias[data-modo="mesa"] .tabela-pericias thead th:nth-child(7),
.secao--pericias[data-modo="mesa"] .tabela-pericias thead th:nth-child(4),
.secao--pericias[data-modo="mesa"] .tabela-pericias thead th:nth-child(3),
.secao--pericias[data-modo="mesa"] .pericia > .pericia__grau,
.secao--pericias[data-modo="mesa"] .pericia > .pericia__outros,
.secao--pericias[data-modo="mesa"] .botao-grau,
.secao--pericias[data-modo="mesa"] .pericia > .pericia__concedida,
.secao--pericias[data-modo="mesa"] .pericias__pontos,
.secao--pericias[data-modo="mesa"] #contador-treinamento,
.secao--pericias[data-modo="mesa"] #contador-graus,
.secao--pericias[data-modo="mesa"] #botao-modo-livre-pericias,
.secao--pericias[data-modo="mesa"] #avisos-pericias,
.secao--pericias[data-modo="mesa"] #avisos-graus {
  display: none !important;
}

.secao--pericias[data-modo="mesa"] .tabela-pericias td,
.secao--pericias[data-modo="mesa"] .tabela-pericias tbody th {
  padding-top: 1px;
  padding-bottom: 1px;
}

@container ficha (max-width: 759px) {
  .secao--pericias[data-modo="mesa"] .pericia {
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    grid-template-areas:
      "nome  nome grau bonus rolar"
      "dados .    grau bonus rolar";
  }
}

/* Marcador do grau (só na mesa): T, V ou E; em edição o botão de chevrons toma o lugar */
.pericia__grau-marca {
  display: none;
}

.secao--pericias[data-modo="mesa"] .pericia__grau-marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6em;
  height: 1.6em;
  font: 700 0.75rem/1 var(--fonte-mono);
  letter-spacing: 0.04em;
  color: var(--acento);
  border-radius: var(--raio-1);
}

.secao--pericias[data-modo="mesa"] .pericia__grau-marca[data-nivel="2"],
.secao--pericias[data-modo="mesa"] .pericia__grau-marca[data-nivel="3"] {
  background: var(--acento-suave);
  border: 1px solid var(--acento-linha);
}

/* Sem grau: o espaço do marcador continua reservado (a sigla do atributo nunca muda de lugar) */
.secao--pericias[data-modo="mesa"] .pericia__grau-marca:empty {
  visibility: hidden;
}

/* Recursos: bônus de máximo e a conta, recolhidos */
.recurso__detalhes {
  flex: 1 1 100%;
  min-width: 0;
}

.recurso__detalhes-titulo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  font: 500 var(--t-rotulo) / 1.2 var(--fonte-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--papel-2);
  cursor: pointer;
  list-style: none;
}

.recurso__detalhes-titulo::-webkit-details-marker {
  display: none;
}

.recurso__detalhes-titulo::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--dur-2) var(--curva);
}

.recurso__detalhes[open] > .recurso__detalhes-titulo::before {
  transform: rotate(45deg);
}

.recurso__detalhes-titulo:hover {
  color: var(--papel);
}

.recurso__detalhes-corpo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 16px;
  padding-top: 10px;
}

/* ---- Termos da ficha (glossário recolhido depois da capa) ---- */
.glossario {
  margin-top: 14px;
}

.glossario + .secao {
  margin-top: 22px;
}

.glossario__titulo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  font: 500 var(--t-rotulo) / 1.2 var(--fonte-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--papel-2);
  cursor: pointer;
  list-style: none;
}

.glossario__titulo::-webkit-details-marker {
  display: none;
}

.glossario__titulo::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--dur-2) var(--curva);
}

.glossario[open] > .glossario__titulo::before {
  transform: rotate(45deg);
}

.glossario__titulo:hover {
  color: var(--papel);
}

.glossario__lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 12px 28px;
  margin: 8px 0 0;
  padding: 16px 18px;
  background: color-mix(in oklab, var(--tinta-superficie) 80%, transparent);
  border: 1px solid var(--linha-1);
  border-radius: var(--raio-3);
}

.glossario__lista dt {
  font: 600 var(--t-rotulo) / 1.3 var(--fonte-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--acento);
}

.glossario__lista dd {
  margin: 3px 0 0;
  max-width: 60ch;
  font-size: 0.8438rem;
  line-height: 1.5;
  color: var(--papel-2);
}

.resultado__aviso {
  margin: 0;
  padding: 6px 10px;
  font-size: 0.7812rem;
  line-height: 1.45;
  color: var(--aviso);
  background: var(--aviso-fundo);
  border: 1px solid var(--aviso-borda);
  border-radius: var(--raio-1);
}

.vital-folha__estado {
  margin: -6px 0 0;
  font: 600 var(--t-rotulo) / 1.3 var(--fonte-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--erro);
}

.mini-vital__estado {
  margin-left: 6px;
  font: 600 0.6875rem/1 var(--fonte-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--erro);
}

/* ==========================================================================
   10b. ASSINATURAS DOS TEMAS — além das cores, cada tema muda a luz, os
        detalhes gráficos e o comportamento. Só aparência.
   ========================================================================== */

/* ---- Sangue: orgânico, quente; um batimento ao interagir ---- */
[data-elemento="sangue"] {
  --raio-2: 8px;
  --raio-3: 14px;
}

[data-elemento="sangue"] .painel,
[data-elemento="sangue"] .ataque,
[data-elemento="sangue"] .ritual,
[data-elemento="sangue"] .recurso,
[data-elemento="sangue"] .atributo {
  box-shadow: var(--sombra-1), inset 0 -34px 46px -34px color-mix(in srgb, var(--acento-2) 42%, transparent);
}

[data-elemento="sangue"] .ficha__conteudo .secao--dossie::after {
  top: -120px;
  right: -60px;
  width: 460px;
  height: 380px;
  border-radius: 46% 54% 60% 40% / 52% 40% 60% 48%;
  background:
    radial-gradient(circle at 58% 42%, color-mix(in srgb, var(--acento-2) 34%, transparent), transparent 58%),
    radial-gradient(circle at 26% 74%, color-mix(in srgb, var(--acento-2) 26%, transparent), transparent 46%);
  filter: blur(10px);
  -webkit-mask-image: none;
  mask-image: none;
}

[data-elemento="sangue"] .ficha__conteudo .secao::before {
  background: linear-gradient(90deg, var(--acento) 0%, color-mix(in srgb, var(--acento-2) 50%, transparent) 16%, var(--linha-1) 55%, transparent 100%);
}

[data-elemento="sangue"] .atributos__mostrador {
  filter: drop-shadow(0 0 22px color-mix(in srgb, var(--acento-2) 30%, transparent));
}

[data-elemento="sangue"] .botao-rolagem:hover,
[data-elemento="sangue"] .botao-icone--rolar:hover {
  animation: batimento 1.1s var(--curva) 1;
}

@keyframes batimento {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.045); }
  28% { transform: scale(1); }
  42% { transform: scale(1.03); }
  60% { transform: scale(1); }
}

/* ---- Morte: névoa, cinzas frios; tudo um pouco mais lento ---- */
[data-elemento="morte"] {
  --dur-2: 320ms;
  --dur-3: 520ms;
}

[data-elemento="morte"] .painel,
[data-elemento="morte"] .atributo,
[data-elemento="morte"] .recurso,
[data-elemento="morte"] .ataque,
[data-elemento="morte"] .ritual,
[data-elemento="morte"] .habilidade,
[data-elemento="morte"] .reacao,
[data-elemento="morte"] .teste {
  background:
    radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--acento) 8%, transparent), transparent 70%),
    color-mix(in oklab, var(--tinta-superficie) 84%, transparent);
}

[data-elemento="morte"] .ficha__conteudo .secao--dossie::after {
  background: repeating-radial-gradient(circle, transparent 0 13px, color-mix(in srgb, var(--acento) 12%, transparent) 13px 14px);
  filter: blur(1.4px);
}

[data-elemento="morte"] .ficha__conteudo .secao::before {
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--acento) 45%, transparent), color-mix(in srgb, var(--acento) 8%, transparent) 45%, transparent 85%);
}

/* Morte: o anel de marcas se desfaz em névoa */
[data-elemento="morte"] .mostrador__marcas {
  filter: blur(0.6px);
}

/* ---- Conhecimento: papel quadriculado, diagramas e numeração editorial ---- */
[data-elemento="conhecimento"] .ficha__conteudo {
  background-image:
    linear-gradient(color-mix(in srgb, var(--acento) 3.5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--acento) 3.5%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
}

[data-elemento="conhecimento"] .ficha__conteudo .secao__titulo::before {
  content: "§ " counter(secao, upper-roman);
  font-family: var(--fonte-display);
  font-size: 0.9375rem;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.04em;
  transform: translateY(-4px);
}

[data-elemento="conhecimento"] .secao__titulo,
[data-elemento="conhecimento"] .grupo-ritual__titulo {
  font-style: italic;
  font-weight: 500;
}

[data-elemento="conhecimento"] .ficha__conteudo .secao--dossie::after {
  top: -70px;
  right: -40px;
  width: 340px;
  height: 340px;
  border-radius: 0;
  background: var(--acento);
  opacity: 1;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='black' stroke-opacity='0.22'%3E%3Ccircle cx='100' cy='100' r='92'/%3E%3Ccircle cx='100' cy='100' r='58'/%3E%3Cpath d='M100 8 180 146H20z'/%3E%3Cpath d='M100 8v184M8 100h184M35 35l130 130M165 35 35 165' stroke-dasharray='2 4'/%3E%3Ccircle cx='100' cy='100' r='3' fill='black' fill-opacity='0.3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='black' stroke-opacity='0.22'%3E%3Ccircle cx='100' cy='100' r='92'/%3E%3Ccircle cx='100' cy='100' r='58'/%3E%3Cpath d='M100 8 180 146H20z'/%3E%3Cpath d='M100 8v184M8 100h184M35 35l130 130M165 35 35 165' stroke-dasharray='2 4'/%3E%3Ccircle cx='100' cy='100' r='3' fill='black' fill-opacity='0.3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Conhecimento: o mostrador ganha o diagrama que liga os cinco dados */
[data-elemento="conhecimento"] .mostrador__diagrama {
  display: inline;
}

[data-elemento="conhecimento"] .ficha__conteudo .secao::before {
  background: repeating-linear-gradient(90deg, var(--acento-linha) 0 6px, transparent 6px 10px);
  -webkit-mask-image: linear-gradient(90deg, var(--cor-sombra) 30%, transparent);
  mask-image: linear-gradient(90deg, var(--cor-sombra) 30%, transparent);
}

/* ---- Energia: gradientes direcionados e brilhos pontuais nos ativos ---- */
[data-elemento="energia"] .botao-rolagem:not(.botao-rolagem--dano):not(.botao-rolagem--usar):not(.botao-rolagem--conjurar):not(.botao-rolagem--secundario):not(.botao-rolagem--bloqueado),
[data-elemento="energia"] .aba[aria-pressed="true"],
[data-elemento="energia"] .botao-icone--rolar:hover:not(:disabled) {
  color: var(--cor-realce);
  background: linear-gradient(115deg, color-mix(in srgb, var(--acento) 80%, var(--cor-sombra)) 0%, var(--acento-3) 50%, var(--acento-2) 100%);
  background-size: 220% 100%;
  background-position: 0% 50%;
  border-color: color-mix(in srgb, var(--acento-claro) 60%, transparent);
  transition: background-position var(--dur-4) var(--curva-saida), box-shadow var(--dur-2) var(--curva);
}

[data-elemento="energia"] .botao-rolagem:not(.botao-rolagem--dano):not(.botao-rolagem--usar):not(.botao-rolagem--conjurar):not(.botao-rolagem--secundario):not(.botao-rolagem--bloqueado):hover {
  background-position: 100% 50%;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 18%, transparent), 0 10px 30px -8px color-mix(in srgb, var(--acento-3) 60%, transparent), 0 0 22px -6px color-mix(in srgb, var(--acento-2) 70%, transparent);
}

[data-elemento="energia"] .ficha__conteudo .secao::before {
  background: linear-gradient(90deg, var(--acento) 0%, var(--acento-3) 22%, var(--acento-2) 42%, transparent 78%);
  box-shadow: 0 0 10px color-mix(in srgb, var(--acento) 55%, transparent);
}

[data-elemento="energia"] .ficha__conteudo .secao--dossie::after {
  background:
    radial-gradient(circle at 70% 30%, color-mix(in srgb, var(--acento-2) 16%, transparent), transparent 40%),
    repeating-linear-gradient(115deg, transparent 0 20px, color-mix(in srgb, var(--acento) 12%, transparent) 20px 21px);
}

[data-elemento="energia"] .atributo__total output,
[data-elemento="energia"] .painel__valor,
[data-elemento="energia"] .resultado__total {
  text-shadow: 0 0 18px color-mix(in srgb, var(--acento-2) 55%, transparent), 0 0 2px color-mix(in srgb, var(--acento) 80%, transparent);
}

[data-elemento="energia"] .painel::before,
[data-elemento="energia"] .ataque::before {
  background: linear-gradient(180deg, var(--acento-2), var(--acento) 50%, var(--acento-3));
}

[data-elemento="energia"] .painel::before {
  background: linear-gradient(90deg, var(--acento-2), var(--acento) 50%, var(--acento-3));
}

/* ---- Medo: silêncio visual; quase nada brilha ---- */
[data-elemento="medo"] {
  --brilho: transparent;
  --sombra-2: 0 1px 0 color-mix(in srgb, var(--cor-realce) 3%, transparent) inset;
  --sombra-3: 0 1px 0 color-mix(in srgb, var(--cor-realce) 4%, transparent) inset;
}

[data-elemento="medo"] .ficha__conteudo .secao--dossie::after {
  top: -300px;
  right: -300px;
  width: 600px;
  height: 600px;
  background: none;
  border: 1px solid color-mix(in srgb, var(--cor-texto) 6%, transparent);
  -webkit-mask-image: none;
  mask-image: none;
}

[data-elemento="medo"] .ficha__conteudo .secao::before {
  background: linear-gradient(90deg, color-mix(in srgb, var(--cor-realce) 20%, transparent), transparent 38%);
}

[data-elemento="medo"] .secao__titulo {
  font-weight: 500;
  letter-spacing: 0.035em;
}

[data-elemento="medo"] .painel::before,
[data-elemento="medo"] .ataque::before,
[data-elemento="medo"] .ritual::before,
[data-elemento="medo"] .recurso::before,
[data-elemento="medo"] .mini-vital__preenchido,
[data-elemento="medo"] .vital__barra .barra__preenchimento,
[data-elemento="medo"] .recurso .barra__preenchimento {
  box-shadow: none;
}

[data-elemento="medo"] .mostrador__anel,
[data-elemento="medo"] .mostrador__trilho {
  stroke: color-mix(in srgb, var(--cor-texto) 12%, transparent);
}

[data-elemento="medo"] .secao--atributos[data-modo="mesa"] .atributo__dado {
  filter: drop-shadow(0 12px 16px color-mix(in srgb, var(--cor-sombra) 55%, transparent));
}

[data-elemento="medo"] .dossie__monograma {
  font-weight: 500;
  letter-spacing: 0.14em;
}

[data-elemento="medo"] .dossie__selo-anel {
  filter: none;
}

.atmosfera[data-elemento="medo"] .atmosfera__grao {
  opacity: 0.07;
}

/* ---- Troca de tema: a página inteira se dissolve no novo (View Transitions) ---- */
html[data-transicao="tema"]::view-transition-old(root) {
  animation: 520ms var(--curva) both vt-sair;
}

html[data-transicao="tema"]::view-transition-new(root) {
  animation: 520ms var(--curva) both vt-tema-entrar;
}

@keyframes vt-tema-entrar {
  from { opacity: 0; }
}

.rolagens__corpo {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  padding: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--linha-2) transparent;
  animation: painel-abrir 260ms var(--curva-saida);
}

@keyframes painel-abrir {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.rolagens__vazio {
  font-size: 0.8125rem;
  color: var(--papel-3);
}

/* Resultado em destaque */
.resultado {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background:
    radial-gradient(100% 80% at 100% 0%, var(--acento-suave), transparent 60%),
    color-mix(in srgb, var(--cor-texto) 6%, transparent);
  border: 1px solid var(--linha-2);
  border-radius: var(--raio-3);
  animation: resultado-entrada 340ms var(--curva-saida);
}

@keyframes resultado-entrada {
  from { opacity: 0; transform: translateY(6px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

.resultado--critico {
  border-color: var(--acento);
  box-shadow: 0 0 0 1px var(--acento) inset, 0 0 42px -12px var(--brilho);
}

.resultado--erro {
  background: var(--erro-fundo);
  border-color: var(--erro-borda);
}

.resultado__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.resultado__titulo {
  font: 600 1.1875rem/1.15 var(--fonte-display);
}

.resultado__mensagem {
  font-size: 0.875rem;
  color: var(--erro);
}

.selo--critico {
  color: var(--acento-texto);
  background: var(--acento);
  border-color: var(--acento);
  box-shadow: 0 0 18px -2px var(--brilho);
  animation: carimbar 420ms var(--curva-saida);
}

@keyframes carimbar {
  from { opacity: 0; transform: scale(1.6) rotate(-8deg); }
  to { opacity: 1; transform: none; }
}

.resultado__dados,
.resultado__termos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dado {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 6px;
  font: 600 1rem/1 var(--fonte-mono);
  font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--cor-texto) 4%, transparent);
  border: 1px solid var(--linha-3);
  border-radius: 6px;
  animation: dado-cair 380ms var(--curva-saida) both;
}

.dado:nth-child(2) { animation-delay: 40ms; }
.dado:nth-child(3) { animation-delay: 80ms; }
.dado:nth-child(4) { animation-delay: 120ms; }
.dado:nth-child(5) { animation-delay: 160ms; }

@keyframes dado-cair {
  from { opacity: 0; transform: translateY(-8px) rotate(-12deg); }
  to { opacity: 1; transform: none; }
}

.dado--escolhido {
  color: var(--tinta-1);
  background: var(--papel);
  border-color: var(--papel);
  box-shadow: 0 0 16px -4px color-mix(in srgb, var(--cor-realce) 50%, transparent);
}

.dado--descartado {
  color: var(--papel-4);
  text-decoration: line-through;
  opacity: 0.55;
}

.dado--escolhido.dado--20 {
  color: var(--acento-texto);
  background: var(--acento);
  border-color: var(--acento);
  box-shadow: 0 0 20px var(--brilho);
}

.dado--escolhido.dado--1 {
  color: var(--cor-perigo-texto);
  background: var(--cor-perigo-forte);
  border-color: var(--cor-perigo-forte);
}

.dado--pequeno {
  min-width: 28px;
  height: 28px;
  font-size: 0.8438rem;
}

.dado--maximo {
  color: var(--acento);
  border-color: var(--acento);
}

.termo {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.termo__rotulo,
.termo--fixo {
  font: 600 0.7812rem var(--fonte-mono);
  color: var(--papel-3);
}

.resultado__regra,
.resultado__conta {
  font-size: 0.75rem;
  color: var(--papel-3);
}

.resultado__conta {
  font-family: var(--fonte-mono);
}

.resultado__fim {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--linha-1);
}

.resultado__total {
  font: 600 3rem/0.95 var(--fonte-mono);
  font-variant-numeric: tabular-nums;
  color: var(--papel);
  text-shadow: 0 0 30px var(--brilho);
}

.resultado--critico .resultado__total {
  color: var(--acento-claro);
}

.resultado__alvo {
  font-weight: 700;
}

.resultado__alvo--sim { color: var(--ok); }
.resultado__alvo--nao { color: var(--erro); }

.resultado__acoes {
  display: flex;
  justify-content: flex-end;
}

/* Opções das próximas rolagens */
.rolagens__opcoes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
}

.rolagens__campo {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.rolagens__campo small {
  letter-spacing: 0;
  text-transform: none;
}

.rolagens .controle {
  width: 100%;
  height: 34px;
  font-size: 0.875rem;
}

.rolagens__opcoes .botao-texto {
  grid-column: 1 / -1;
  justify-self: end;
  margin-top: -4px;
}

.rolagens__dica {
  font-size: 0.75rem;
  color: var(--acento);
}

.rolagens__formula {
  display: flex;
  gap: 8px;
}

.rolagens__formula .controle {
  flex: 1;
  font-family: var(--fonte-mono);
}

.rolagens__formula .botao-rolagem {
  height: 34px;
}

.rolagens__erro {
  font-size: 0.8125rem;
  color: var(--erro);
}

.rolagens__historico-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rolagens__subtitulo {
  font: 600 0.6875rem/1.2 var(--fonte-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--papel-3);
}

.rolagens__lista {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  list-style: none;
}

.historico__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "titulo  total"
    "detalhe total";
  gap: 1px 10px;
  padding: 7px 10px;
  font-size: 0.75rem;
  background: color-mix(in srgb, var(--cor-texto) 3%, transparent);
  border: 1px solid var(--linha-1);
  border-radius: 6px;
}

.historico__item:first-child {
  animation: surgir var(--dur-3) var(--curva-saida);
}

.historico__item--critico {
  box-shadow: inset 2px 0 0 var(--acento);
}

.historico__item--evento {
  box-shadow: inset 2px 0 0 var(--pe);
}

.historico__titulo {
  grid-area: titulo;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.historico__detalhe {
  grid-area: detalhe;
  overflow: hidden;
  font-family: var(--fonte-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--papel-3);
}

.historico__total {
  grid-area: total;
  align-self: center;
  font: 600 1.0625rem var(--fonte-mono);
}

.historico__vazio {
  font-size: 0.75rem;
  color: var(--papel-4);
}

/* ==========================================================================
   12. JANELAS (<dialog>)
   ========================================================================== */
.dialogo {
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100vh - 48px);
  padding: 0;
  overflow: auto;
  color: var(--papel);
  background: var(--vidro-reflexo), color-mix(in srgb, var(--tinta-2) 92%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid var(--vidro-borda);
  border-radius: var(--raio-4);
  box-shadow: var(--sombra-3), 0 0 0 1px color-mix(in srgb, var(--cor-sombra) 50%, transparent);
}

.dialogo[open] {
  animation: dialogo-abrir 260ms var(--curva-saida);
}

.dialogo::backdrop {
  background: color-mix(in srgb, var(--tinta-0) 64%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.dialogo[open]::backdrop {
  animation: fundo-abrir 260ms var(--curva);
}

@keyframes dialogo-abrir {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@keyframes fundo-abrir {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes gaveta-subir {
  from { transform: translateY(100%); }
  to { transform: none; }
}

.dialogo--confirmar {
  width: min(500px, calc(100vw - 24px));
}

.dialogo--fontes {
  width: min(540px, calc(100vw - 24px));
}

.dialogo__corpo {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 22px 22px 20px;
}

.dialogo__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dialogo__titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0;
  font: 600 1.6875rem/1.1 var(--fonte-display);
}

.dialogo__texto {
  font-size: 0.9062rem;
  color: var(--papel-2);
  overflow-wrap: anywhere;
}

.dialogo__lista {
  margin: 0;
  padding: 10px 14px 10px 30px;
  font-size: 0.8438rem;
  overflow-wrap: anywhere;
  background: color-mix(in srgb, var(--cor-poco) 30%, transparent);
  border: 1px solid var(--linha-1);
  border-radius: var(--raio-2);
}

.dialogo__lista--avisos {
  max-height: 30vh;
  overflow: auto;
  font-size: 0.8125rem;
  color: var(--aviso);
  background: var(--aviso-fundo);
  border-color: var(--aviso-borda);
}

.dialogo__dica {
  font-size: 0.7812rem;
  color: var(--papel-3);
}

.dialogo__botoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--linha-1);
}

/* ---- Ajuste de um vital (janela; no celular, gaveta de baixo) ---- */
.dialogo--vital {
  --cor-vital: var(--papel-2);
  width: min(420px, calc(100vw - 24px));
}

.dialogo--vital[data-vital="pv"] { --cor-vital: var(--pv); }
.dialogo--vital[data-vital="pe"] { --cor-vital: var(--pe); }
.dialogo--vital[data-vital="san"] { --cor-vital: var(--san); }

.vital-folha {
  gap: 16px;
}

.vital-folha__titulo {
  align-items: baseline;
  gap: 4px 12px;
}

.vital-folha__sigla {
  font: 600 1.875rem/1 var(--fonte-display);
  letter-spacing: 0.06em;
  color: var(--cor-vital);
}

.vital-folha__nome {
  font: 500 var(--t-rotulo) / 1.2 var(--fonte-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--papel-2);
}

.vital-folha__leitura {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 2px 0 -4px;
  font-variant-numeric: tabular-nums;
}

.vital-folha__atual {
  font: 600 3.5rem/1 var(--fonte-mono);
  letter-spacing: -0.02em;
  color: var(--papel);
}

.vital-folha__max {
  font: 500 1.25rem/1 var(--fonte-mono);
  color: var(--papel-2);
}

.dialogo--vital[data-nivel="critico"] .vital-folha__atual {
  color: var(--aviso);
}

.dialogo--vital[data-nivel="zero"] .vital-folha__atual {
  color: var(--erro);
}

.vital-folha__barra {
  height: 6px;
  overflow: hidden;
  background: color-mix(in srgb, var(--cor-texto) 6%, transparent);
  border-radius: var(--raio-pilula);
}

.vital-folha__barra .barra__preenchimento {
  height: 100%;
  background: linear-gradient(90deg, color-mix(in oklab, var(--cor-vital) 55%, var(--cor-sombra)), var(--cor-vital));
  border-radius: inherit;
  transition: width var(--dur-3) var(--curva);
}

.vital-folha__passos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.vital-folha__passo {
  height: 48px;
  font: 600 1.125rem/1 var(--fonte-mono);
  font-variant-numeric: tabular-nums;
  color: var(--papel);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cor-texto) 6%, transparent), color-mix(in srgb, var(--cor-texto) 2%, transparent));
  border: 1px solid var(--linha-2);
  border-radius: var(--raio-2);
  cursor: pointer;
  transition: background-color var(--dur-1) var(--curva), border-color var(--dur-1) var(--curva), color var(--dur-1) var(--curva);
}

.vital-folha__passo:hover:not(:disabled) {
  background: color-mix(in oklab, var(--cor-vital) 14%, transparent);
  border-color: var(--cor-vital);
}

.vital-folha__passo:active:not(:disabled) {
  background: color-mix(in oklab, var(--cor-vital) 24%, transparent);
}

.vital-folha__passo:disabled,
.vital-folha__aplicar:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.vital-folha__quantia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "rotulo rotulo rotulo"
    "campo  menos  mais";
  align-items: center;
  gap: 6px 8px;
}

.vital-folha__rotulo {
  grid-area: rotulo;
  font: 500 var(--t-rotulo) / 1.2 var(--fonte-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--papel-2);
}

.vital-folha__campo {
  grid-area: campo;
  width: 100%;
  height: 44px;
  font: 600 1.125rem/1 var(--fonte-mono);
  text-align: center;
}

.vital-folha__aplicar {
  height: 44px;
  padding: 0 16px;
}

.vital-folha__aplicar[data-vital-aplicar="-1"] {
  grid-area: menos;
}

.vital-folha__aplicar[data-vital-aplicar="1"] {
  grid-area: mais;
}

.vital-folha__ultimo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  min-height: 40px;
  padding: 6px 6px 6px 14px;
  font: 500 0.8125rem/1.4 var(--fonte-mono);
  font-variant-numeric: tabular-nums;
  color: var(--papel);
  background: color-mix(in srgb, var(--cor-poco) 28%, transparent);
  border: 1px solid var(--linha-1);
  border-radius: var(--raio-2);
}

.vital-folha__desfazer {
  min-height: 32px;
  padding: 4px 10px;
  font: 600 0.8125rem/1 var(--fonte-ui);
  color: var(--acento);
}

.vital-folha__desfazer:hover {
  color: var(--acento-claro);
}

.vital-folha__derivados {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--linha-1);
}

.vital-folha__derivados > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0 10px;
}

.vital-folha__derivados > div + div {
  border-left: 1px solid var(--linha-1);
}

.vital-folha__derivados dt {
  font: 500 var(--t-rotulo) / 1.2 var(--fonte-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--papel-2);
}

.vital-folha__derivados dd {
  margin: 0;
  font: 600 1.125rem/1 var(--fonte-mono);
  font-variant-numeric: tabular-nums;
  color: var(--papel);
}

/* ---- Painel do seletor (lista própria; js/ui-seletor.js) ----
   Desktop: ficha de índice presa ao botão. Celular: gaveta embaixo. */
.seletor-fundo {
  position: fixed;
  inset: 0;
  z-index: 390;
  background: color-mix(in srgb, var(--tinta-0) 64%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: fundo-abrir 220ms var(--curva);
}

.seletor-painel {
  position: fixed;
  z-index: 400;
  display: flex;
  flex-direction: column;
  max-height: 360px;
  overflow: hidden;
  color: var(--papel);
  background: var(--vidro-reflexo), color-mix(in srgb, var(--tinta-2) 95%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid var(--vidro-borda);
  border-radius: var(--raio-3);
  box-shadow: var(--sombra-3), 0 0 0 1px color-mix(in srgb, var(--cor-sombra) 50%, transparent);
}

.seletor-painel--animar {
  animation: seletor-abrir 170ms var(--curva-saida);
}

.seletor-painel--animar[data-lado="cima"] {
  animation-name: seletor-abrir-cima;
}

@keyframes seletor-abrir {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

@keyframes seletor-abrir-cima {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* O nome do campo só aparece na gaveta; no desktop o botão está logo ali */
.seletor-painel__topo {
  display: none;
}

.seletor-painel__busca {
  flex: none;
  width: auto;
  margin: 8px 8px 0;
}

.seletor-painel__busca::-webkit-search-cancel-button {
  cursor: pointer;
}

.seletor-painel__lista {
  flex: 1 1 auto;
  min-height: 0;
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  outline: none;
  scroll-padding: 36px 0 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--linha-3) transparent;
}

.seletor-painel__vazio {
  margin: 0;
  padding: 4px 18px 16px;
  font-size: 0.8438rem;
  color: var(--papel-3);
}

/* Grupos (livros): título em voz de etiqueta, preso no alto ao rolar */
.seletor-grupo + .seletor-grupo,
.seletor-opcao + .seletor-grupo {
  margin-top: 6px;
}

.seletor-grupo__titulo {
  position: sticky;
  top: -6px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 7px 12px;
  font: 500 var(--t-micro) / 1.2 var(--fonte-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acento-claro);
  background: color-mix(in oklab, var(--acento) 6%, color-mix(in srgb, var(--tinta-2) 100%, transparent));
}

.seletor-grupo__titulo::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--acento-linha);
}

.seletor-opcao {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  align-items: center;
  column-gap: 12px;
  min-height: 36px;
  padding: 7px 10px 7px 14px;
  font-size: 0.875rem;
  line-height: 1.3;
  color: var(--papel-2);
  border-radius: var(--raio-2);
  cursor: pointer;
  transition: background-color var(--dur-1) var(--curva), color var(--dur-1) var(--curva);
}

.seletor-opcao__texto,
.seletor-opcao__descricao {
  grid-column: 1;
  overflow-wrap: anywhere;
}

.seletor-opcao__descricao {
  margin-top: 2px;
  font-size: 0.7812rem;
  line-height: 1.35;
  color: var(--papel-3);
}

.seletor-opcao__marca {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--acento-claro);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}

.seletor-opcao--vazia .seletor-opcao__texto {
  color: var(--papel-3);
}

/* Ativa (teclado ou ponteiro) */
.seletor-opcao--ativa {
  color: var(--papel);
  background: color-mix(in srgb, var(--cor-texto) 7%, transparent);
}

/* Escolhida: filete do tema à esquerda e a marca à direita */
.seletor-opcao[aria-selected="true"] {
  color: var(--papel);
  background: var(--acento-suave);
}

.seletor-opcao[aria-selected="true"]::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 4px;
  width: 2px;
  border-radius: 2px;
  background: var(--acento);
}

.seletor-opcao[aria-selected="true"] .seletor-opcao__marca {
  opacity: 1;
}

.seletor-opcao[aria-selected="true"].seletor-opcao--ativa {
  background: color-mix(in oklab, var(--acento) 22%, transparent);
}

.seletor-opcao[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.42;
}

.seletor-opcao[aria-disabled="true"].seletor-opcao--ativa {
  background: none;
}

/* Gaveta (celular): presa embaixo, linhas do tamanho do polegar */
.seletor-painel--gaveta {
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: min(78dvh, 640px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border-bottom: 0;
  border-radius: var(--raio-4) var(--raio-4) 0 0;
}

.seletor-painel--gaveta.seletor-painel--animar {
  animation: gaveta-subir 280ms var(--curva-saida);
}

.seletor-painel--gaveta::before {
  content: "";
  flex: none;
  align-self: center;
  width: 38px;
  height: 4px;
  margin-top: 8px;
  border-radius: 2px;
  background: var(--linha-3);
}

.seletor-painel--gaveta .seletor-painel__topo {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px 6px 20px;
}

.seletor-painel__titulo {
  margin: 0;
  font: 600 1.4375rem/1.15 var(--fonte-display);
  overflow-wrap: anywhere;
}

.seletor-painel--gaveta .seletor-painel__busca {
  height: 44px;
  margin: 2px 16px 4px;
  font-size: 1rem; /* 16px: o iOS não amplia a tela ao focar */
}

.seletor-painel--gaveta .seletor-painel__lista {
  padding: 4px 10px 14px;
  scroll-padding: 40px 0 14px;
}

.seletor-painel--gaveta .seletor-grupo__titulo {
  top: -4px;
  padding-top: 12px;
}

.seletor-painel--gaveta .seletor-opcao {
  min-height: 48px;
  padding: 10px 14px 10px 18px;
  font-size: 0.9375rem;
}

.seletor-painel--gaveta .seletor-opcao__descricao {
  font-size: 0.8125rem;
}

/* ==========================================================================
   13. RESPONSIVO
   ========================================================================== */

/* Central e Arquivo em telas médias */
@media (max-width: 1023px) {
  .central__heroi {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr);
    min-height: 0;
  }

  .central__grade {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "continuar"
      "recentes"
      "status";
  }

  .vista--central[data-vazia="sim"] .central__grade,
  .central__grade:has(.central__bloco--recentes[hidden]) {
    grid-template-areas:
      "continuar"
      "status";
  }
}

/* Celular */
@media (max-width: 719px) {
  :root {
    --barra-altura: 3.5rem;
    --margem-pagina: 1rem;
  }

  /* Na ficha, a barra global rola junto: quem fica preso é a faixa de vitais */
  html[data-vista="ficha"] {
    --topo-fixo: var(--altura-trilho, 96px);
  }

  body[data-vista="ficha"] .app-barra {
    position: relative;
  }

  .app-barra__conteudo {
    gap: 8px;
    padding: 0 10px 0 12px;
  }

  .marca__texto {
    display: none;
  }

  .nav-global {
    gap: 2px;
  }

  .nav-global__item {
    height: 36px;
    padding: 0 9px;
    gap: 6px;
    font-size: 0.7812rem;
  }

  .nav-global__item--ficha .barra-topo__nome {
    display: none;
  }

  .nav-global__item--ficha .barra-topo__rotulo {
    font: 600 0.7812rem/1 var(--fonte-ui);
    letter-spacing: 0;
    text-transform: none;
    color: inherit;
  }

  .nav-global__item[aria-current="page"]::after {
    bottom: calc((var(--barra-altura) - 36px) / -2 - 1px);
  }

  /* Só o ponto do salvamento (o texto continua para leitores de tela) */
  .status-salvamento {
    gap: 0;
    font-size: 0;
  }

  .faixa {
    width: calc(100% - 24px);
  }

  .central,
  .arquivo {
    padding-top: 24px;
  }

  .central__heroi {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .central__selo {
    order: -1;
    justify-self: start;
    width: 124px;
    margin: 0 0 -4px -6px;
  }

  /* Arrastar arquivos não existe no celular */
  .arquivo__dica {
    display: none;
  }

  .central__titulo {
    margin-top: 14px;
    font-size: 3.125rem;
  }

  .central__lead {
    margin-top: 18px;
    font-size: 0.9375rem;
  }

  .central__acoes {
    margin-top: 24px;
  }

  .central__acoes .botao {
    flex: 1 1 auto;
  }

  .destaque {
    padding: 18px;
  }

  .destaque__identidade {
    gap: 14px;
  }

  .destaque .monograma--grande {
    --tam: 64px;
  }

  .destaque__painel {
    flex-direction: column;
  }

  .destaque__defesa {
    flex-direction: row;
    gap: 10px;
    justify-content: flex-start;
    padding: 12px 0 0;
    border-top: 1px solid var(--linha-1);
    border-left: 0;
  }

  .destaque__defesa-valor {
    margin-top: 0;
    font-size: 1.375rem;
  }

  .destaque__rodape .botao {
    flex: 1 1 auto;
  }

  .recente__tempo {
    display: none;
  }

  .arquivo__cabecalho {
    align-items: flex-start;
  }

  .arquivo__acoes {
    width: 100%;
  }

  .arquivo__acoes .botao {
    flex: 1 1 auto;
  }

  .arquivo__ferramentas {
    position: static;
  }

  .segmentado {
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .segmentado__opcao {
    flex: none;
  }

  .arquivo__ordem {
    width: 100%;
    margin-left: 0;
  }

  .arquivo__ordem .controle {
    flex: 1;
  }

  .avisos-app {
    right: 12px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    left: 12px;
    width: auto;
  }

  body[data-vista="ficha"] .avisos-app {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }

  /* Ajuste do vital: gaveta presa embaixo, ao alcance do polegar */
  .dialogo--vital {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 40px);
    margin: auto 0 0;
    border-bottom: 0;
    border-radius: var(--raio-4) var(--raio-4) 0 0;
  }

  .dialogo--vital[open] {
    animation: gaveta-subir 300ms var(--curva-saida);
  }

  .dialogo--vital .vital-folha {
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }

  /* Ficha: faixa de vitais compacta */
  .trilho__corpo {
    padding-top: 8px;
  }

  .hud {
    display: block;
  }

  .hud__vitais {
    gap: 14px;
  }

  .vital {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "topo"
      "barra";
    gap: 5px 6px;
  }

  .vital__topo {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px;
    min-height: 40px;
    margin: -4px -6px -2px;
    padding: 4px 6px 2px;
    /* Sem os −/+ na faixa: o vital aparece como botão (toque abre o ajuste) */
    background: color-mix(in srgb, var(--cor-texto) 3.5%, transparent);
    border-color: var(--linha-1);
  }

  .vital__valor {
    font-size: 1.125rem;
  }

  .vital__max {
    font-size: 0.6875rem;
  }

  .vital__botoes,
  .hud__derivados {
    display: none;
  }

  .botao--grande {
    height: 46px;
  }

  .dialogo__botoes .botao {
    flex: 1 1 auto;
  }
}

/* Celular: o vidro desfoca menos (mais leve em aparelhos modestos) */
@media (max-width: 719px) {
  :root {
    --vidro-desfoque: blur(10px) saturate(130%);
  }

  .app-barra,
  .rolagens,
  .dialogo,
  .seletor-painel,
  .aviso-app,
  .destaque,
  .ficha__conteudo .secao--dossie {
    -webkit-backdrop-filter: var(--vidro-desfoque);
    backdrop-filter: var(--vidro-desfoque);
  }
}

@media (max-width: 380px) {
  .central__titulo {
    font-size: 2.75rem;
  }
}

/* ==========================================================================
   14. PREFERÊNCIAS DO SISTEMA
   ========================================================================== */

/* Menos movimento: nada desliza, gira ou pulsa */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-movimento="sim"]) *,
  :root:not([data-movimento="sim"]) *::before,
  :root:not([data-movimento="sim"]) *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }

  :root:not([data-movimento="sim"]) ::view-transition-old(root),
  :root:not([data-movimento="sim"]) ::view-transition-new(root) {
    animation: none !important;
  }
}

/* Animações: "Não" nas preferências do site (mesmo efeito do pedido do sistema) */
:root[data-movimento="nao"] *,
:root[data-movimento="nao"] *::before,
:root[data-movimento="nao"] *::after {
  animation-duration: 1ms !important;
  animation-delay: 0ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 1ms !important;
  scroll-behavior: auto !important;
}

:root[data-movimento="nao"] ::view-transition-old(root),
:root[data-movimento="nao"] ::view-transition-new(root) {
  animation: none !important;
}

/* Menos transparência: superfícies sólidas */
@media (prefers-reduced-transparency: reduce) {
  .app-barra,
  .trilho__corpo,
  .arquivo__ferramentas,
  .destaque,
  .rolagens,
  .dialogo,
  .seletor-painel,
  .seletor-fundo,
  .aviso-app,
  .ficha__conteudo .secao--dossie {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .app-barra { background: var(--tinta-1); }
  .trilho__corpo,
  .arquivo__ferramentas,
  .destaque,
  .aviso-app { background: var(--tinta-3); }
  .rolagens,
  .dialogo,
  .seletor-painel { background: var(--tinta-2); }
  .ficha__conteudo .secao--dossie { background: var(--tinta-superficie); }
}

/* Sem desfoque (navegadores antigos ou economia de energia): vidro mais opaco */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .app-barra { background: color-mix(in srgb, var(--tinta-1) 97%, transparent); }
  .trilho__corpo,
  .arquivo__ferramentas,
  .destaque,
  .aviso-app { background: color-mix(in srgb, var(--tinta-2) 97%, transparent); }
  .rolagens,
  .dialogo,
  .seletor-painel { background: color-mix(in srgb, var(--tinta-2) 98%, transparent); }
}

/* Contraste maior pedido pelo sistema */
@media (prefers-contrast: more) {
  :root {
    --papel-2: color-mix(in srgb, var(--cor-texto-suave), var(--cor-texto) 55%);
    --papel-3: color-mix(in srgb, var(--cor-texto-fraco), var(--cor-texto) 55%);
    --linha-1: color-mix(in srgb, var(--cor-texto) 16%, transparent);
    --linha-2: color-mix(in srgb, var(--cor-texto) 26%, transparent);
    --linha-3: color-mix(in srgb, var(--cor-texto) 40%, transparent);
  }
}

/* Telas de toque: alvos maiores nos botões pequenos */
@media (pointer: coarse) {
  .passo,
  .controle {
    min-height: 40px;
  }

  .passo__botao {
    width: 36px;
  }

  .vital__botao,
  .recurso__botao {
    min-width: 36px;
    min-height: 36px;
  }

  .botao-icone {
    width: 40px;
    height: 40px;
  }

  .pericia__concedida .caixa {
    min-height: 44px;
  }
}

/* ==========================================================================
   15. ETAPA 10 — condições, estados, descanso, biografia e verificações
       Só usa os tokens da paleta (nada de cor fixa aqui).
   ========================================================================== */

/* ---- Estados (saúde e sanidade): texto + ícone, nunca só cor ---- */
.estados {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 var(--e4);
  padding: 0;
  list-style: none;
}

.estado {
  --cor-estado: var(--ok);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 14px;
  font-size: 0.875rem;
  background: color-mix(in oklab, var(--cor-estado) 9%, transparent);
  border: 1px solid color-mix(in oklab, var(--cor-estado) 45%, transparent);
  border-radius: var(--raio-2);
}

.estado[data-nivel="1"] { --cor-estado: var(--aviso); }
.estado[data-nivel="2"] { --cor-estado: var(--aviso); }
.estado[data-nivel="3"] { --cor-estado: var(--erro); }

.estado__icone {
  width: 22px;
  height: 22px;
  color: var(--cor-estado);
}

.estado__texto strong {
  font-weight: 600;
}

.cond-mensagem {
  min-height: 0;
  margin: 0 0 var(--e3);
  color: var(--papel-2);
}

.cond-mensagem:empty {
  display: none;
}

/* ---- Morrendo e Enlouquecendo ---- */
.alerta-estado {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 var(--e4);
  padding: 14px 16px;
  background: var(--erro-fundo);
  border: 1px solid var(--erro-borda);
  border-left-width: 4px;
  border-radius: var(--raio-2);
}

.alerta-estado__titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9375rem;
  color: var(--erro);
}

.alerta-estado__titulo .icone-ui {
  width: 22px;
  height: 22px;
}

.alerta-estado__titulo output {
  font: 600 0.9375rem var(--fonte-mono);
}

.alerta-estado__morto,
.alerta-estado__nota {
  font-size: 0.8125rem;
  color: var(--papel-2);
}

.alerta-estado__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.alerta-estado__campo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.alerta-estado__campo label {
  font-size: 0.8125rem;
  color: var(--papel-2);
}

.alerta-estado__campo .controle {
  width: 72px;
}

/* ---- Condições ativas ---- */
.cond-lista {
  display: grid;
  gap: 10px;
  margin: 0 0 var(--e4);
  padding: 0;
  list-style: none;
}

.cond-cartao {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: color-mix(in oklab, var(--tinta-3) 80%, transparent);
  border: 1px solid var(--linha-2);
  border-radius: var(--raio-2);
}

.cond-cartao__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.cond-cartao__titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  min-width: 0;
}

.cond-cartao__nome {
  font-size: 1rem;
  font-weight: 600;
}

.cond-cartao__categoria {
  font: 500 var(--t-micro) / 1.2 var(--fonte-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--papel-3);
}

.selo--conferir {
  color: var(--aviso);
  cursor: help;
}

.cond-cartao__resumo {
  font-size: 0.875rem;
  color: var(--papel);
}

.cond-cartao__implica {
  font-size: 0.8125rem;
  color: var(--papel-2);
}

.cond-cartao__lembretes {
  font-size: 0.8125rem;
  color: var(--papel-2);
}

.cond-cartao__livro {
  font-size: 0.8125rem;
  color: var(--papel-2);
}

.cond-cartao__livro summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--papel);
}

.cond-cartao__livro-texto {
  margin: 0 0 8px;
  line-height: 1.5;
}

.cond-cartao__campos {
  display: grid;
  grid-template-columns: 110px auto minmax(0, 1fr);
  align-items: end;
  gap: 10px 16px;
}

.cond-cartao__campos .campo-texto {
  flex: none;
}

.cond-cartao__campos .caixa {
  min-height: 44px;
}

.cond-aplicar {
  margin: 0 0 var(--e3);
}

.cond-adicionar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 460px;
}

.cond-adicionar label {
  font: 500 var(--t-micro) / 1.25 var(--fonte-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--papel-3);
}

.cond-adicionar__linha {
  display: flex;
  gap: 8px;
}

.cond-adicionar__linha .controle {
  flex: 1 1 auto;
  min-width: 0;
}

.cond-personalizada {
  max-width: 640px;
  margin-top: var(--e4);
  padding: 14px 16px;
  background: color-mix(in oklab, var(--tinta-3) 80%, transparent);
  border: 1px solid var(--linha-2);
  border-radius: var(--raio-2);
}

.cond-personalizada .subtitulo {
  margin-top: 0;
}

.cond-personalizada__grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.cond-personalizada__botoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: var(--e4);
}

/* Selo "cond.": campo afetado por uma condição */
.selo-cond {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 0 5px;
  font: 600 0.625rem/1.7 var(--fonte-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--aviso);
  border: 1px solid var(--aviso-borda);
  border-radius: var(--raio-1);
  vertical-align: middle;
  cursor: help;
}

/* ---- Ajuste de PV: aviso de dano massivo ---- */
.vital-folha__massivo {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--aviso);
}

.vital-folha__massivo:empty {
  display: none;
}

.hud__derivado output[data-formato="deslocamento"] {
  font-size: 0.7188rem;
  letter-spacing: 0;
}

/* ---- Descanso ---- */
.dialogo--descanso {
  width: min(520px, calc(100vw - 24px));
}

.dialogo--descanso .dialogo__corpo {
  gap: 14px;
}

.descanso__tipo {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 0;
  padding: 0;
  border: 0;
}

.descanso__tipo legend {
  width: 100%;
  margin-bottom: 4px;
  padding: 0;
  font: 500 var(--t-micro) / 1.25 var(--fonte-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--papel-3);
}

.descanso__tipo .caixa {
  min-height: 44px;
}

.descanso__tipo .dialogo__dica {
  width: 100%;
}

.descanso__valores {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.descanso__cena {
  min-height: 44px;
}

/* ---- Verificações ---- */
.verificacoes {
  margin: 0 0 var(--e6);
  background: var(--aviso-fundo);
  border: 1px solid var(--aviso-borda);
  border-radius: var(--raio-2);
}

.verificacoes__resumo {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  font-weight: 600;
  color: var(--aviso);
  cursor: pointer;
}

.verificacoes__lista {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 4px 16px 8px;
  list-style: none;
}

.verificacao {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid var(--linha-1);
}

.verificacao__icone {
  color: var(--aviso);
}

.verificacao--info .verificacao__icone {
  color: var(--papel-2);
}

.verificacao__texto {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.875rem;
  color: var(--papel);
}

.verificacoes__nota {
  margin: 0;
  padding: 0 16px 12px;
  font-size: 0.7812rem;
  color: var(--papel-3);
}

/* ---- Biografia ---- */
.bio__topo {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: var(--e6);
  align-items: start;
}

.bio__retrato {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bio__moldura {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: color-mix(in oklab, var(--tinta-3) 80%, transparent);
  border: 1px dashed var(--linha-3);
  border-radius: var(--raio-2);
}

.bio__moldura[data-tem-retrato="true"] {
  border-style: solid;
}

.bio__imagem {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bio__sem-imagem {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 500 var(--t-micro) / 1.25 var(--fonte-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--papel-3);
}

.bio__retrato-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bio__arquivo {
  position: relative;
  display: inline-flex;
}

.bio__arquivo-campo {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  opacity: 0;
}

.bio__arquivo-campo:focus-visible + label {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

.bio__pessoas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e6);
  margin-top: var(--e4);
}

.bio__itens {
  display: grid;
  gap: 8px;
  margin: 0 0 var(--e3);
  padding: 0;
  list-style: none;
}

.bio__pessoa {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
  align-items: center;
  gap: 8px;
}

.bio__diario {
  margin-top: var(--e6);
}

.bio__entradas {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bio__entrada {
  background: color-mix(in oklab, var(--tinta-3) 80%, transparent);
  border: 1px solid var(--linha-2);
  border-radius: var(--raio-2);
}

.bio__resumo {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-height: 44px;
  padding: 10px 14px;
  cursor: pointer;
}

.bio__resumo-data {
  font: 600 0.8125rem var(--fonte-mono);
  color: var(--acento);
}

.bio__resumo-titulo {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 600;
}

.bio__entrada-corpo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 14px 14px;
}

.bio__entrada-campos {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 12px;
}

.campo-texto--cheio {
  flex: 1 1 100%;
}

/* Campos com rótulo dentro das colunas/grades novas: altura do próprio conteúdo */
.dialogo--descanso .campo-texto,
.cond-cartao__campos .campo-texto,
.cond-personalizada .campo-texto,
.bio__entrada-corpo .campo-texto,
.bio__entrada-campos .campo-texto {
  flex: none;
}

.campo-texto textarea.controle {
  height: auto;
  min-height: 7em;
}

/* Campos de texto longos crescem com o conteúdo (onde o navegador sabe; senão o JS ajusta) */
#ficha textarea {
  field-sizing: content;
  min-height: 3.2em;
  overflow-y: hidden;
  resize: vertical;
}

@media (max-width: 719px) {
  .cond-cartao__campos,
  .cond-personalizada__grade,
  .bio__topo,
  .bio__pessoas,
  .bio__entrada-campos {
    grid-template-columns: minmax(0, 1fr);
  }

  .bio__retrato {
    max-width: 240px;
  }

  .bio__pessoa {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .bio__pessoa .controle:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}


/* ==========================================================================
   16. ETAPA 10 — aparência do site: tamanho do texto, alto contraste e diálogos
   ========================================================================== */

/* Tamanho do texto: o font-size do :root (fontes e espaços principais são rem) */
:root[data-fonte="p"] { font-size: 14px; }
:root[data-fonte="m"] { font-size: 16px; }
:root[data-fonte="g"] { font-size: 18px; }
:root[data-fonte="gg"] { font-size: 20px; }

/* ---- Alto contraste: preto e branco, bordas de 2 px, foco grosso, fundos sólidos ---- */
:root[data-tema="contraste"] {
  --linha-1: color-mix(in srgb, var(--cor-texto) 45%, var(--cor-fundo));
  --linha-2: color-mix(in srgb, var(--cor-texto) 70%, var(--cor-fundo));
  --linha-3: var(--cor-texto);
  --vidro: var(--tinta-2);
  --vidro-forte: var(--tinta-1);
  --vidro-borda: var(--cor-texto);
  --vidro-reflexo: linear-gradient(transparent, transparent);
  --vidro-desfoque: none;
  --aviso-fundo: color-mix(in srgb, var(--cor-aviso) 16%, var(--cor-fundo));
  --aviso-borda: var(--cor-aviso);
  --erro-fundo: color-mix(in srgb, var(--cor-perigo) 16%, var(--cor-fundo));
  --erro-borda: var(--cor-perigo);
  --ok-fundo: color-mix(in srgb, var(--cor-sucesso) 16%, var(--cor-fundo));
  --sombra-1: none;
  --sombra-2: none;
  --sombra-3: none;
  --brilho: transparent;
}

:root[data-tema="contraste"] :focus-visible {
  outline: 4px solid var(--cor-foco);
  outline-offset: 3px;
}

:root[data-tema="contraste"] .atmosfera,
:root[data-tema="contraste"] .atmosfera * {
  display: none;
}

:root[data-tema="contraste"] body {
  background: var(--cor-fundo);
}

:root[data-tema="contraste"] *,
:root[data-tema="contraste"] *::before,
:root[data-tema="contraste"] *::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  text-shadow: none !important;
}

/* Superfícies sem transparência */
:root[data-tema="contraste"] .app-barra,
:root[data-tema="contraste"] .trilho__corpo,
:root[data-tema="contraste"] .arquivo__ferramentas,
:root[data-tema="contraste"] .destaque,
:root[data-tema="contraste"] .rolagens,
:root[data-tema="contraste"] .dialogo,
:root[data-tema="contraste"] .seletor-painel,
:root[data-tema="contraste"] .aviso-app,
:root[data-tema="contraste"] .ficha__conteudo .secao--dossie,
:root[data-tema="contraste"] .painel,
:root[data-tema="contraste"] .ataque,
:root[data-tema="contraste"] .ritual,
:root[data-tema="contraste"] .recurso,
:root[data-tema="contraste"] .atributo,
:root[data-tema="contraste"] .cond-cartao,
:root[data-tema="contraste"] .bio__entrada {
  background: var(--tinta-3);
  background-image: none;
}

:root[data-tema="contraste"] .dialogo::backdrop {
  background: var(--cor-fundo);
  opacity: 0.85;
}

/* Bordas de 2 px nos campos e botões */
:root[data-tema="contraste"] .controle,
:root[data-tema="contraste"] .campo input,
:root[data-tema="contraste"] .campo select,
:root[data-tema="contraste"] .campo .seletor,
:root[data-tema="contraste"] .seletor,
:root[data-tema="contraste"] .busca input,
:root[data-tema="contraste"] .passo,
:root[data-tema="contraste"] textarea,
:root[data-tema="contraste"] .botao,
:root[data-tema="contraste"] .botao-barra,
:root[data-tema="contraste"] .botao-icone,
:root[data-tema="contraste"] .vital__botao,
:root[data-tema="contraste"] .recurso__botao {
  border: 2px solid var(--cor-borda);
}

:root[data-tema="contraste"] .botao--primario,
:root[data-tema="contraste"] .botao-barra--principal {
  color: var(--cor-destaque-texto);
  background: var(--cor-destaque);
  border-color: var(--cor-texto);
}

/* ---- Diálogos novos: Aparência, Sobre e Ajuda ---- */
.aparencia__grupo {
  margin: 0 0 var(--e4);
  padding: 0;
  border: 0;
}

.aparencia__grupo legend {
  width: 100%;
  margin-bottom: 6px;
  padding: 0;
  font: 500 var(--t-micro) / 1.25 var(--fonte-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--papel-3);
}

.aparencia__opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.aparencia__opcao {
  min-height: 44px;
  padding: 6px 14px 6px 10px;
  border: 1px solid var(--linha-2);
  border-radius: var(--raio-2);
  background: color-mix(in srgb, var(--cor-texto) 3%, transparent);
}

.aparencia__opcao:has(input:checked) {
  border-color: var(--acento);
  background: var(--acento-suave);
}

.aparencia__detalhe {
  margin-left: 4px;
  font: 500 var(--t-micro) var(--fonte-mono);
  color: var(--papel-3);
}

.sobre__dados {
  display: grid;
  gap: 6px;
  margin: var(--e4) 0;
}

.sobre__dados div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 6px 0;
  border-bottom: 1px solid var(--linha-1);
}

.sobre__dados dt {
  font: 500 var(--t-micro) / 1.25 var(--fonte-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--papel-3);
}

.ajuda__teclas {
  display: grid;
  gap: 8px;
  margin: 0 0 var(--e4);
}

.ajuda__teclas div {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) 1fr;
  gap: 4px 16px;
  align-items: baseline;
}

.ajuda__teclas dt {
  font-weight: 600;
}

kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 1px 6px;
  font: 600 0.85em var(--fonte-mono);
  text-align: center;
  background: color-mix(in srgb, var(--cor-texto) 8%, transparent);
  border: 1px solid var(--linha-3);
  border-radius: var(--raio-1);
}

/* Botões do cabeçalho (Aparência e Sobre) */
.app-barra__acoes {
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-barra__botao {
  min-height: 44px;
}

@media (max-width: 719px) {
  .app-barra__botao-texto {
    display: none;
  }

  .app-barra__botao {
    min-width: 44px;
    justify-content: center;
  }

  .ajuda__teclas div {
    grid-template-columns: 1fr;
  }
}

/* Alto contraste: sem decorações de fundo (anéis, luz, névoa) */
:root[data-tema="contraste"] .ficha__conteudo .secao--dossie::before,
:root[data-tema="contraste"] .ficha__conteudo .secao--dossie::after,
:root[data-tema="contraste"] .ficha__conteudo .secao::before {
  display: none;
}

/* ==========================================================================
   17. ETAPA 10 — celular: barra de seções, gaveta de Rolagens, alvos de toque
       Mobile-first na prática: abaixo de 600 px, 1 coluna; de 600 a 1023 px,
       2 colunas onde cabem; a partir de 1024 px, a coluna lateral.
   ========================================================================== */
:root {
  --dock-altura: 4.25rem; /* altura da barra de páginas no rodapé (abaixo de 1280 px) */
  --seguro-topo: env(safe-area-inset-top, 0px);
  --seguro-base: env(safe-area-inset-bottom, 0px);
  --seguro-esq: env(safe-area-inset-left, 0px);
  --seguro-dir: env(safe-area-inset-right, 0px);
}

/* Barra global: respeita a área segura (entalhes e barras do sistema) */
.app-barra {
  padding-top: var(--seguro-topo);
  padding-right: var(--seguro-dir);
  padding-left: var(--seguro-esq);
}

/* ---- Alvos de toque de pelo menos 44 × 44 px (espaço de 8 px entre eles) e campos de 16 px ---- */
@media (max-width: 1023px), (pointer: coarse) {
  .botao,
  .botao-barra,
  .botao-texto,
  .botao-rolagem,
  .botao--adicionar,
  .alternar,
  .aba,
  .seletor,
  .controle,
  .passo__valor,
  .campo input,
  .campo select,
  .busca input,
  .caixa,
  .vital__topo,
  summary {
    min-height: 44px;
  }

  .botao-icone,
  .passo__botao,
  .vital__botao,
  .recurso__botao,
  .vital-folha__passo {
    min-width: 44px;
    min-height: 44px;
  }

  .passo {
    gap: 8px;
  }

  .recurso__botoes,
  .vital__botoes,
  .alerta-estado__acoes,
  .secao__controles,
  .dialogo__botoes {
    gap: 8px;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select,
  textarea,
  .controle,
  .seletor,
  .passo__valor,
  .recurso__atual {
    font-size: max(16px, 1rem);
  }
}

/* ---- Abaixo de 600 px: diálogos de formulário em tela cheia, com o Fechar fixo no topo ---- */
@media (max-width: 599px) {
  .dialogo--descanso,
  .dialogo--aparencia,
  .dialogo--sobre,
  .dialogo--ajuda,
  .dialogo--fontes {
    width: 100%;
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    margin: 0;
    border-width: 0;
    border-radius: 0;
  }

  .dialogo--descanso .dialogo__topo,
  .dialogo--aparencia .dialogo__topo,
  .dialogo--sobre .dialogo__topo,
  .dialogo--ajuda .dialogo__topo,
  .dialogo--fontes .dialogo__topo {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: calc(-1 * var(--e4)) calc(-1 * var(--e4)) var(--e3);
    padding: calc(var(--e3) + var(--seguro-topo)) var(--e4) var(--e3);
    background: var(--tinta-2);
    border-bottom: 1px solid var(--linha-2);
  }

  .dialogo--descanso .dialogo__corpo,
  .dialogo--aparencia .dialogo__corpo,
  .dialogo--sobre .dialogo__corpo,
  .dialogo--ajuda .dialogo__corpo,
  .dialogo--fontes .dialogo__corpo {
    padding-bottom: calc(var(--e4) + var(--seguro-base));
  }

  /* Barra global: só ícones (os nomes seguem para leitores de tela) */
  .nav-global__rotulo,
  .app-barra__botao-texto {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .nav-global__item,
  .app-barra__botao {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }

  .descanso__valores {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cond-adicionar__linha {
    flex-wrap: wrap;
  }

  .cond-adicionar__linha .botao {
    flex: 1 1 100%;
  }
}

/* Tela de 600 a 1023 px: duas colunas onde há espaço (condições e biografia) */
@media (min-width: 600px) and (max-width: 1023px) {
  .cond-lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* Atributos no celular: 2 colunas; o rótulo fica em cima e o − 2 + ocupa a largura do cartão */
@media (max-width: 599px) {
  .atributo__campo {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .atributo__campo .passo {
    width: 100%;
    justify-content: space-between;
  }

  .atributo__campo .passo__valor {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }
}

/* Alvos de toque: o que ainda ficava abaixo de 44 px */
@media (max-width: 1023px), (pointer: coarse) {
  .pular {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .marca {
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }

  .seletor-tema__opcao {
    width: 44px;
    height: 44px;
  }

  .recurso__detalhes-titulo,
  .glossario__titulo {
    min-height: 44px;
  }

  .recurso__atual {
    min-height: 44px;
    min-width: 44px;
  }

  .passo__valor {
    min-width: 44px;
  }

  .botao--pequeno,
  .botao-barra--pequeno {
    min-height: 44px;
  }
}

/* Texto corrido em foco: o botão "link" dentro de frase não precisa de 44 px (alvo em linha) */
.link {
  display: inline;
}

/* Atributos no celular: − valor + juntos (3 × 44 px) cabem no cartão de 2 colunas */
@media (max-width: 599px) {
  .atributo {
    padding-right: 8px;
    padding-left: 8px;
  }

  .atributo .passo {
    gap: 0;
  }

  .atributo .passo__valor {
    min-width: 44px;
  }
}

/* Seletor de tema da ficha: quebra a linha quando os seis botões de 44 px não cabem (320 px) */
@media (max-width: 1023px), (pointer: coarse) {
  .seletor-tema__opcoes {
    flex-wrap: wrap;
    max-width: 100%;
    border-radius: var(--raio-3);
  }
}

/* − valor + com 44 px de altura (o contêiner acompanha os botões) */
@media (max-width: 1023px), (pointer: coarse) {
  .passo {
    height: auto;
    min-height: 44px;
  }

  .passo__botao,
  .passo__valor {
    height: auto;
    min-height: 44px;
  }

  .passo__valor {
    text-align: center;
  }

  /* No celular o cartão de atributo precisa de espaço para − valor + */
  .atributo {
    width: min(100%, 15rem);
  }
}

/* Tablet (600 a 1023 px): barra global, vitais e cartões de atributo com alvos de 44 px */
@media (max-width: 1023px), (pointer: coarse) {
  .nav-global__item,
  .app-barra__botao,
  .habilidade__alternar {
    height: auto;
    min-height: 44px;
  }

  .vital__topo {
    min-width: 44px;
  }

  .atributo {
    padding-right: 8px;
    padding-left: 8px;
  }

  .atributo__campo {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .atributo__campo .passo {
    width: 100%;
    justify-content: space-between;
  }

  .atributo__campo .passo__valor {
    flex: 1 1 auto;
    width: auto;
    min-width: 44px;
  }

  .atributo .passo {
    gap: 0;
  }
}

@media (max-width: 1023px), (pointer: coarse) {
  .nav-global__item {
    min-width: 44px;
    justify-content: center;
  }

  .caixa {
    min-width: 44px;
    justify-content: center;
  }

  .caixa:has(> span:not(.so-celular)) {
    justify-content: flex-start;
  }
}

/* Foco visível pelo teclado: contorno de 3 px na cor de foco do tema, também nos campos
   que trocam o contorno por borda e anel (nunca "outline: none" sem substituto) */
.controle:focus-visible,
.campo input:focus-visible,
.campo select:focus-visible,
.campo .seletor:focus-visible,
.busca input:focus-visible,
.campo-busca input:focus-visible,
.passo__valor:focus-visible,
.recurso__atual:focus-visible,
.seletor:focus-visible,
.seletor-painel__lista:focus-visible,
.app-principal:focus-visible,
.pular:focus-visible {
  outline: 3px solid var(--cor-foco);
  outline-offset: 2px;
}

.cartao-agente:has(.cartao-agente__link:focus-visible) {
  outline: 3px solid var(--cor-foco);
  outline-offset: 2px;
}

:root[data-tema="contraste"] .controle:focus-visible,
:root[data-tema="contraste"] .seletor:focus-visible,
:root[data-tema="contraste"] .passo__valor:focus-visible,
:root[data-tema="contraste"] .recurso__atual:focus-visible {
  outline-width: 4px;
}

/* Central e Arquivo: alvos de toque de 44 px */
@media (max-width: 1023px), (pointer: coarse) {
  .link-seta,
  .campo-busca input,
  .segmentado__opcao,
  .cartao-agente__link,
  .cartao-agente__acao,
  .recente__link {
    min-height: 44px;
  }

  .link-seta {
    display: inline-flex;
    align-items: center;
  }

  .segmentado__opcao {
    min-width: 44px;
  }
}

/* ==========================================================================
   18. FICHA EM PÁGINAS
       Computador (≥ 1280 px): três zonas sempre à vista (info do agente,
       atributos + vitais + testes, perícias) e, à direita, abas com as outras
       páginas. Celular e tablet: uma página por vez, com o botão-índice no rodapé.
       A página mostrada vem de js/ui-paginas.js (atributo data-oculta).
   ========================================================================== */
.ficha-layout [data-oculta] {
  display: none !important;
}

.zona {
  min-width: 0;
}

/* Cada página tem o seu nome no índice: o número de seção do papel não aparece na tela */
.ficha-layout .ficha__conteudo .secao__titulo::before {
  display: none;
}

.ficha-layout .legenda {
  gap: 2px 14px;
  margin-top: 8px;
  font-size: 0.6875rem;
}

/* ---- Abas e índice: cada um só no seu tamanho de tela ---- */
.indice {
  display: none;
}

.dock {
  display: none;
}

.abas-paginas {
  display: flex;
  gap: 0;
  padding: 0 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.aba-pagina {
  position: relative;
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 46px;
  padding: 0 10px;
  font: 600 0.8125rem/1 var(--fonte-ui);
  color: var(--papel-3);
  white-space: nowrap;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color var(--dur-1) var(--curva), background-color var(--dur-1) var(--curva);
}

.aba-pagina:hover {
  color: var(--papel);
  background: color-mix(in srgb, var(--cor-texto) 4%, transparent);
}

.aba-pagina[aria-selected="true"] {
  color: var(--papel);
  background: var(--acento-suave);
  border-bottom-color: var(--acento);
}

.aba-pagina__selo,
.paginas-indice__selo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 6px;
  font: 700 0.6875rem/1 var(--fonte-mono);
  color: var(--acento-texto);
  background: var(--acento);
  border-radius: var(--raio-pilula);
}

/* ---- Rolagens como página ---- */
.rolagens {
  display: flex;
  flex-direction: column;
  color: var(--papel);
}

.rolagens__titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 18px 16px 0;
  font: 600 1rem/1.2 var(--fonte-ui);
}

.rolagens__icone {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--acento);
  stroke-width: 1.3;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px var(--brilho));
}

.rolagens__ultimo {
  padding-left: 10px;
  font: 500 0.75rem var(--fonte-mono);
  color: var(--papel-3);
  border-left: 1px solid var(--linha-2);
}

.rolagens__ultimo:empty {
  display: none;
}

.rolagens__corpo {
  overflow: visible;
  animation: none;
}

/* Capa do dossiê (identificação) com menos largura */
@container ficha (max-width: 879px) {
  .secao--dossie .grade-campos {
    grid-template-columns: 104px repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "selo nome nome nome"
      "selo jog  jog  nex"
      "orig orig clas tril";
  }

  .dossie__selo {
    width: 104px;
    height: 104px;
  }

  .dossie__monograma {
    font-size: 2.375rem;
  }
}

@container ficha (max-width: 560px) {
  .ficha__conteudo .secao--dossie {
    padding: 16px 16px 20px;
  }

  .secao--dossie .grade-campos {
    grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "selo nome nome"
      "jog  jog  jog"
      "orig orig orig"
      "clas clas nex"
      "tril tril tril";
    gap: 12px;
  }

  .dossie__selo {
    width: 64px;
    height: 64px;
  }

  .dossie__monograma {
    font-size: 1.5rem;
  }

  .dossie__selo-elemento {
    right: -2px;
    bottom: -4px;
    width: 24px;
    height: 24px;
    padding: 5px;
  }

  .secao--dossie .campo--nome .campo__destaque {
    font-size: 2rem;
  }

  .dossie__ferramentas,
  .seletor-tema {
    width: 100%;
  }

  .seletor-tema__atual {
    display: none;
  }
}

/* ---- Celular e tablet: uma página por vez ---- */
@media (max-width: 1279px) {
  .ficha-layout {
    display: flex;
    flex-direction: column;
  }

  .zona--esq {
    display: contents;
  }

  /* O trilho (vitais) é a faixa presa no topo, em todas as páginas (primeiro na ordem) */
  .trilho {
    order: -1;
    margin: 0 calc(-1 * var(--margem-pagina));
  }

  .trilho__corpo {
    gap: 0;
    padding: 10px var(--margem-pagina);
    background: var(--vidro-reflexo), var(--tinta-1);
    border-width: 0 0 1px;
    border-radius: 0;
    box-shadow: 0 12px 30px -18px color-mix(in srgb, var(--cor-sombra) 90%, transparent);
  }

  .hud {
    display: flex;
    align-items: center;
    gap: 22px;
  }

  .hud__titulo,
  .hud__aviso {
    display: none !important;
  }

  .hud__vitais {
    display: grid;
    flex: 1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 0;
  }

  .hud__derivados {
    flex: none;
    width: 270px;
    margin-top: 0;
  }

  .ficha-layout .ficha__conteudo > .secao,
  .ficha-layout .zona > .secao,
  .pagina-painel > .secao {
    scroll-margin-top: var(--topo-fixo);
  }

  .ficha-layout .zona,
  .ficha-layout .pagina-painel {
    padding-top: 6px;
  }

  /* O selo dos cinco não precisa passar de ~440 px de largura */
  .secao--atributos[data-modo="mesa"] .atributos__palco {
    width: min(100%, 440px);
  }

  .ficha-layout [data-pagina]:not([data-oculta]) {
    animation: pagina-entra 200ms var(--curva-saida) both;
  }

  /* Rolagens: página como as outras */
  .rolagens {
    padding-bottom: 12px;
  }

  /* Avisos curtos (resultado das rolagens) ficam acima do rodapé */
  .avisos-app {
    bottom: calc(var(--dock-altura) + 12px + var(--seguro-base));
  }

  /* ---- Rodapé: setas + botão-índice ---- */
  body[data-vista="ficha"] .dock {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 52px;
    gap: 10px;
    padding: 8px calc(12px + var(--seguro-dir)) calc(8px + var(--seguro-base)) calc(12px + var(--seguro-esq));
    background: color-mix(in srgb, var(--tinta-1) 96%, transparent);
    -webkit-backdrop-filter: var(--vidro-desfoque);
    backdrop-filter: var(--vidro-desfoque);
    border-top: 1px solid var(--linha-2);
    box-shadow: 0 -10px 30px -20px color-mix(in srgb, var(--cor-sombra) 80%, transparent);
  }

  .dock__seta,
  .dock__indice {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    color: var(--papel);
    background: color-mix(in srgb, var(--cor-texto) 4%, transparent);
    border: 1px solid var(--linha-2);
    border-radius: var(--raio-pilula);
    cursor: pointer;
  }

  .dock__seta svg,
  .dock__icone {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .dock__seta:disabled {
    color: var(--papel-4);
    cursor: default;
    opacity: 0.55;
  }

  .dock__indice {
    gap: 10px;
    padding: 0 18px;
    font: 600 0.9375rem/1 var(--fonte-ui);
    background: var(--acento-suave);
    border-color: var(--acento-linha);
  }

  .dock__icone {
    color: var(--acento);
  }

  .dock__contador {
    font: 500 0.75rem var(--fonte-mono);
    color: var(--papel-2);
  }

  /* Folha do índice: sobe de baixo */
  .dialogo--paginas {
    width: 100%;
    max-width: none;
    margin: auto 0 0;
    border-width: 1px 0 0;
    border-radius: var(--raio-4) var(--raio-4) 0 0;
  }

  .dialogo--paginas .dialogo__corpo {
    padding-bottom: calc(18px + var(--seguro-base));
  }
}

@media (min-width: 720px) and (max-width: 1279px) {
  :root {
    --margem-pagina: 1.5rem;
    --topo-fixo: calc(var(--barra-altura) + var(--altura-trilho, 104px));
  }
}

@media (max-width: 719px) {
  body[data-vista="ficha"] .trilho {
    top: 0;
  }
}

@keyframes pagina-entra {
  from { opacity: 0; }
}

/* Índice da folha (lista de páginas) */
.paginas-indice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.paginas-indice__botao {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 76px;
  padding: 12px;
  font: inherit;
  color: var(--papel);
  text-align: left;
  background: transparent;
  border: 1px solid var(--linha-1);
  border-radius: var(--raio-3);
  cursor: pointer;
}

.paginas-indice__botao:hover {
  background: color-mix(in srgb, var(--cor-texto) 4%, transparent);
}

.paginas-indice__botao[aria-current="page"] {
  background: var(--acento-suave);
  border-color: var(--acento);
}

.paginas-indice__num {
  flex: none;
  padding-top: 2px;
  font: 600 0.75rem/1 var(--fonte-mono);
  letter-spacing: 0.06em;
  color: var(--acento);
}

.paginas-indice__texto {
  min-width: 0;
}

.paginas-indice__texto strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
}

.paginas-indice__texto small {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--papel-3);
}

.paginas-indice__selo {
  margin-left: auto;
}

@media (max-width: 380px) {
  .paginas-indice {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Computador: três zonas fixas na tela + abas ---- */
@media (min-width: 1280px) {
  body[data-vista="ficha"] .rodape {
    display: none;
  }

  body[data-vista="ficha"] .app-principal {
    min-height: 0;
  }

  .ficha-layout {
    display: grid;
    grid-template-columns: minmax(300px, 0.9fr) minmax(330px, 1fr) minmax(400px, 1.35fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "info info pag"
      "esq  per  pag";
    gap: 14px;
    max-width: 1840px;
    height: calc(100vh - var(--barra-altura) - 1px); /* 1px: a borda da barra global */
    height: calc(100dvh - var(--barra-altura) - 1px);
    padding: 14px var(--margem-pagina) 16px;
    overflow: clip;
  }

  .zona {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--linha-2) transparent;
    scroll-padding-top: 12px;
  }

  .zona--info {
    grid-area: info;
    overflow: visible;
  }

  .zona--esq {
    grid-area: esq;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-right: 4px;
  }

  .zona--per {
    grid-area: per;
  }

  .zona--pag {
    grid-area: pag;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Cartões das zonas */
  .zona--per,
  .zona--pag,
  .zona--esq > .secao {
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--cor-texto) 3%, transparent), transparent 40%),
      color-mix(in oklab, var(--tinta-superficie) 82%, transparent);
    border: 1px solid var(--linha-2);
    border-radius: var(--raio-4);
    box-shadow: var(--sombra-2);
  }

  .trilho {
    position: static;
    flex: none;
  }

  .indice {
    display: block;
    flex: none;
    border-bottom: 1px solid var(--linha-2);
  }

  .paginas {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--linha-2) transparent;
    scroll-padding-top: 12px;
  }

  .pagina-painel {
    padding: 4px 18px 28px;
  }

  .pagina-painel--rolagens {
    padding: 0 2px 16px;
  }

  /* Seções mais compactas: o editorial (número, fio, título grande) fica para o papel */
  .ficha-layout .ficha__conteudo .secao {
    margin: 0;
    padding: 16px 16px 14px;
  }

  .ficha-layout .ficha__conteudo .secao::before {
    display: none;
  }

  .ficha-layout .ficha__conteudo .secao__titulo {
    margin-bottom: 12px;
    font-size: 1.3125rem;
    line-height: 1.1;
  }

  .ficha-layout .ficha__conteudo .secao__titulo::before {
    display: none;
  }

  .ficha-layout .secao__cabecalho {
    margin-bottom: 12px;
  }

  .ficha-layout .zona--per > .secao {
    padding: 14px 16px 12px;
  }

  .pagina-painel .secao {
    padding-right: 0;
    padding-left: 0;
  }

  .pagina-painel .secao + .secao {
    margin-top: 6px;
    border-top: 1px solid var(--linha-1);
  }

  .pagina-painel > .secao:first-child {
    padding-top: 12px;
  }

  /* Tabela de perícias: o cabeçalho cola no topo da zona */
  .zona--per .tabela-pericias thead th {
    top: 0;
  }

  /* Info do agente: faixa baixa */
  .zona--info .secao--dossie {
    padding: 12px 18px 14px;
  }

  .zona--info .secao--dossie::after {
    display: none;
  }

  .zona--info .secao--dossie .grade-campos {
    grid-template-columns: 72px minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 0.75fr);
    grid-template-areas:
      "selo nome nome nome nome jog"
      "selo orig orig clas tril nex";
    gap: 8px 14px;
  }

  .zona--info .dossie__selo {
    width: 72px;
    height: 72px;
  }

  .zona--info .dossie__monograma {
    font-size: 1.75rem;
  }

  .zona--info .dossie__selo-elemento {
    display: none;
  }

  .zona--info .campo label {
    margin-bottom: 4px;
  }

  .dock,
  .dialogo--paginas {
    display: none;
  }

  /* Faixa do agente: o NEX nunca fica espremido */
  .zona--info .secao--dossie .grade-campos {
    grid-template-columns: 72px minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(76px, 0.7fr);
    grid-template-areas:
      "selo nome nome nome nome jog"
      "selo orig orig clas tril nex";
  }

  /* Abas: se não couberem, rolam (a aba marcada é trazida para a vista pelo JS) */
  .indice {
    container-type: inline-size;
  }

  .aba-pagina {
    flex: 1 0 auto;
  }

  @container (max-width: 560px) {
    .aba-pagina {
      padding: 0 9px;
      font-size: 0.75rem;
    }
  }

  /* Nome do agente: legível, mas sem ocupar a faixa inteira */
  .zona--info .secao--dossie .campo--nome .campo__destaque {
    padding-bottom: 2px;
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    line-height: 1.1;
  }

  /* Atributos: o selo dos cinco menor, para os vitais caberem logo abaixo */
  .zona--esq .secao--atributos[data-modo="mesa"] .atributos__palco {
    width: min(100%, 268px);
    margin-top: -14px;
    margin-bottom: -10px;
  }

  .zona--esq .secao--atributos {
    padding-bottom: 8px;
  }

  /* Vitais (trilho) em linhas compactas */
  .zona--esq .trilho__corpo {
    gap: 10px;
    padding: 12px 14px;
  }

  .zona--esq .hud__titulo {
    display: none;
  }

  /* Perícias na zona: uma linha por perícia (nome, atributo, grau, outros, total, rolar) */
  .zona--per .secao--pericias[data-modo] .pericia {
    grid-template-columns: minmax(0, 1fr) auto auto auto auto auto;
    grid-template-areas: "nome dados grau outros bonus rolar";
    align-items: center;
    gap: 0 6px;
    padding: 1px 8px 1px 12px;
  }

  .zona--per .secao--pericias[data-modo="mesa"] .pericia {
    grid-template-columns: minmax(0, 1fr) auto auto auto auto;
    grid-template-areas: "nome dados grau bonus rolar";
  }

  .zona--per .secao--pericias[data-modo="edicao"] .pericia {
    grid-template-areas:
      "nome dados grau outros bonus rolar"
      "conc conc  conc conc   conc  conc";
  }

  .zona--per .pericia__nome,
  .zona--per .pericia__dados {
    align-self: center;
  }

  .zona--per .pericia .controle {
    height: 28px;
    font-size: 0.8438rem;
  }

  .zona--per .tabela-pericias .pericia > .pericia__outros .controle {
    width: 54px;
  }

  .zona--per .atributo-sigla {
    min-width: 0;
    min-height: 28px;
    margin: 0;
  }

  .zona--per .pericia__concedida .caixa {
    margin-block: 0;
  }

  .zona--per .pericia__concedida {
    text-align: left;
    padding-bottom: 2px !important;
  }

  .zona--per .pericia__bonus output {
    font-size: 1.0625rem;
  }

  .zona--per .pericia--treinada .pericia__bonus output {
    font-size: 1.125rem;
  }

  /* Perícias: busca e filtro na mesma linha, legenda miúda */
  .zona--per .pericias__ferramentas {
    flex-wrap: nowrap;
    gap: 10px 14px;
    margin-top: 10px;
  }

  .zona--per .busca {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
  }

  .zona--per .legenda {
    gap: 2px 14px;
    margin-top: 8px;
    font-size: 0.6875rem;
  }
}

/* Computador com pouca altura (notebooks): os atributos viram uma fileira de cinco d20 (em vez do selo)
   e os vitais ficam mais juntos, para tudo caber na coluna sem rolar */
@media (min-width: 1280px) and (max-height: 1000px) {
  .zona--esq .secao--atributos[data-modo="mesa"] .atributos__palco {
    width: 100%;
    aspect-ratio: auto;
    margin: 0;
  }

  .zona--esq .secao--atributos[data-modo="mesa"] .atributos__palco::before,
  .zona--esq .secao--atributos[data-modo="mesa"] .atributos__mostrador {
    display: none;
  }

  .zona--esq .secao--atributos[data-modo="mesa"] .grade-atributos {
    position: static;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
  }

  .zona--esq .secao--atributos[data-modo="mesa"] .atributo {
    --dado: 54px;
    position: relative;
    top: auto;
    left: auto;
    transform: none;
  }

  .zona--esq .secao--atributos[data-modo="mesa"] .atributo__nome {
    display: none;
  }

  .zona--esq .secao--atributos .secao__cabecalho {
    margin-bottom: 6px;
  }

  .zona--esq .trilho__corpo {
    gap: 6px;
    padding: 8px 12px;
  }

  .zona--info .secao--dossie {
    padding: 8px 16px 10px;
  }

  .zona--info .dossie__selo {
    width: 56px;
    height: 56px;
  }

  .zona--info .dossie__monograma {
    font-size: 1.4rem;
  }
}

/* Tablet e telas de toque: a sigla do atributo ganha área de 44 px sem aumentar a linha */
@media (max-width: 1279px), (pointer: coarse) {
  .atributo-sigla {
    min-width: 44px;
    min-height: 44px;
    margin: -8px 0 -8px -8px;
    justify-content: center;
  }
}

/* ---- Último resultado de rolagem ---- */
.resultado-rapido {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background:
    linear-gradient(90deg, var(--acento-suave), transparent 70%),
    color-mix(in oklab, var(--tinta-superficie) 94%, transparent);
  border-bottom: 1px solid var(--acento-linha);
}

.resultado-rapido[hidden] {
  display: none;
}

.resultado-rapido__total {
  flex: none;
  min-width: 2.2ch;
  margin: 0;
  font: 700 2.25rem/1 var(--fonte-mono);
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--papel);
}

.resultado-rapido[data-critico="sim"] .resultado-rapido__total {
  color: var(--acento);
  text-shadow: 0 0 18px var(--brilho);
}

.resultado-rapido__texto {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.resultado-rapido__texto strong {
  overflow: hidden;
  font-size: 0.9375rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resultado-rapido__texto span {
  overflow: hidden;
  font: 500 0.75rem/1.3 var(--fonte-mono);
  color: var(--papel-3);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resultado-rapido__texto .resultado-rapido__alvo {
  font-weight: 700;
  color: var(--papel-2);
}

.resultado-rapido--novo {
  animation: resultado-novo 700ms var(--curva-saida);
}

@keyframes resultado-novo {
  from { background-color: var(--acento-suave); }
}

/* Na página Rolagens o resultado já aparece em detalhe */
.ficha-layout[data-pagina="rolagens"] .resultado-rapido {
  display: none;
}

/* Celular e tablet: presa logo abaixo da faixa de vitais, sem cobrir o conteúdo */
@media (max-width: 1279px) {
  .zona--pag {
    display: contents;
  }

  .resultado-rapido {
    position: sticky;
    top: var(--topo-fixo);
    z-index: 25;
    order: -1;
    margin: 0 calc(-1 * var(--margem-pagina));
    padding-right: var(--margem-pagina);
    padding-left: var(--margem-pagina);
    background: var(--tinta-1);
    border-bottom: 1px solid var(--acento-linha);
    box-shadow: 0 10px 24px -18px color-mix(in srgb, var(--cor-sombra) 90%, transparent);
  }

  .resultado-rapido__total {
    font-size: 1.875rem;
  }
}

/* ==========================================================================
   19. REVISÃO DE DESIGN — vitais, Resumo, Defesa recolhida, legenda, Rolagens
   ========================================================================== */

/* Ícone do tema "Medo": acompanha a paleta (claro no escuro, escuro no claro) em vez de sumir */
.seletor-tema__opcao[data-tema-opcao="medo"] {
  --cor-amostra: var(--tema-medo) !important;
}

/* ---- Vitais: valor maior, barra mais grossa, nível por extenso e variação do valor ---- */
.vital__valor {
  position: relative;
  font-size: 1.625rem;
}

.vital__barra {
  height: 8px;
}

.vital__sigla {
  font-size: 0.75rem;
}

.vital[data-nivel="baixo"] .vital__barra .barra__preenchimento {
  background: linear-gradient(90deg, color-mix(in oklab, var(--aviso) 55%, var(--cor-sombra)), var(--aviso));
  box-shadow: 0 0 12px var(--aviso);
}

.vital[data-nivel="critico"] .vital__barra .barra__preenchimento {
  background: linear-gradient(90deg, color-mix(in oklab, var(--erro) 55%, var(--cor-sombra)), var(--erro));
  box-shadow: 0 0 14px var(--erro);
}

.vital[data-nivel="baixo"] .vital__valor > output {
  color: var(--aviso);
}

.vital[data-nivel="critico"] .vital__valor > output {
  color: var(--erro);
}

/* O nível sempre com palavra (nunca só cor) */
.vital[data-nivel="baixo"] .vital__sigla::after,
.vital[data-nivel="critico"] .vital__sigla::after,
.vital[data-nivel="zero"] .vital__sigla::after {
  display: block;
  margin-top: 3px;
  font-size: 0.5938rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vital[data-nivel="baixo"] .vital__sigla::after { content: "baixo"; color: var(--aviso); }
.vital[data-nivel="critico"] .vital__sigla::after { content: "crítico"; color: var(--erro); }
.vital[data-nivel="zero"] .vital__sigla::after { content: "zero"; color: var(--erro); }

.vital__botao {
  color: var(--cor-vital);
  border-color: color-mix(in oklab, var(--cor-vital) 45%, var(--linha-2));
}

.vital__variacao {
  position: absolute;
  top: -6px;
  right: 0;
  font: 700 0.875rem/1 var(--fonte-mono);
  pointer-events: none;
  animation: vital-variacao 1.2s var(--curva-saida) forwards;
}

.vital__variacao--menos { color: var(--erro); }
.vital__variacao--mais { color: var(--ok); }

@keyframes vital-variacao {
  from { opacity: 0; transform: translateY(8px); }
  15% { opacity: 1; }
  to { opacity: 0; transform: translateY(-16px); }
}

/* ---- Defesa e testes no Resumo do celular ---- */
.resumo-derivados {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px;
}

.resumo-derivados > div {
  padding: 8px 6px;
  text-align: center;
  background: color-mix(in srgb, var(--cor-texto) 2.5%, transparent);
  border: 1px solid var(--linha-1);
  border-radius: var(--raio-2);
}

.resumo-derivados dt {
  font: 500 var(--t-micro) / 1.2 var(--fonte-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--papel-3);
}

.resumo-derivados dd {
  margin: 4px 0 0;
  font: 600 1.125rem/1.1 var(--fonte-mono);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 720px) {
  .resumo-derivados {
    display: none;
  }
}

/* ---- Defesa e derivados: composição, reações e resistências ficam recolhidas ---- */
.defesa-detalhes > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 0 14px;
  font-size: 0.875rem;
  color: var(--papel-2);
  list-style: none;
  background: color-mix(in srgb, var(--cor-texto) 2.5%, transparent);
  border: 1px solid var(--linha-1);
  border-radius: var(--raio-2);
  cursor: pointer;
}

.defesa-detalhes > summary::-webkit-details-marker {
  display: none;
}

.defesa-detalhes > summary::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--papel-3);
  border-bottom: 1.5px solid var(--papel-3);
  transform: rotate(45deg);
  transition: transform var(--dur-2) var(--curva);
}

.defesa-detalhes[open] > summary::after {
  transform: rotate(-135deg);
}

.defesa-detalhes__valor {
  margin-left: auto;
  font: 500 0.75rem var(--fonte-mono);
  color: var(--papel-3);
}

.defesa-detalhes__valor output {
  font-weight: 700;
  color: var(--papel);
}

.defesa-detalhes[open] > summary {
  margin-bottom: 14px;
}

/* ---- Legenda dos ícones das perícias: sob demanda ---- */
.legenda-ic {
  margin-top: 8px;
}

.legenda-ic > summary {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  font-size: 0.75rem;
  color: var(--papel-3);
  cursor: pointer;
}

.legenda-ic > summary:hover {
  color: var(--papel);
}

@media (max-width: 1279px), (pointer: coarse) {
  .legenda-ic > summary {
    min-height: 44px;
  }
}

.legenda-ic .legenda {
  margin-top: 4px;
}

/* ---- Rolagens: título na mesma voz das outras páginas e dados rápidos ---- */
.rolagens__titulo {
  font: 600 1.3125rem/1.1 var(--fonte-display);
  letter-spacing: 0;
}

.rolagens__rapidos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rolagens__rapidos .botao {
  min-width: 52px;
  font-family: var(--fonte-mono);
  font-weight: 700;
}

/* Links de pulo da ficha: um por vez, no canto */
.pular-ficha {
  position: static;
}

/* Alvos de toque: links das Reações e do "Ir para" */
@media (max-width: 1279px), (pointer: coarse) {
  .reacao .link,
  .reacao__dica .link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ---- Telas baixas: Defesa e testes enxutos para caber na coluna ---- */
@media (min-width: 1280px) and (max-height: 860px) {
  .zona--esq .secao--testes {
    padding: 10px 12px;
  }

  .zona--esq .secao--testes .secao__titulo {
    display: none;
  }

  .zona--esq .teste__dados {
    display: none;
  }

  .zona--esq .teste__ir {
    padding: 3px 6px;
  }

  .zona--esq .grade-testes {
    gap: 6px;
  }
}

/* O rodapé do site não ocupa a ficha em nenhum tamanho (no celular o rodapé é o botão-índice) */
body[data-vista="ficha"] .rodape {
  display: none;
}

/* Notebooks (altura até 900px): faixa do agente, vitais e testes mais compactos, para tudo caber sem rolar */
@media (min-width: 1280px) and (max-height: 900px) {
  .zona--info .campo--nome label {
    display: none;
  }

  .zona--info .secao--dossie {
    padding: 8px 16px 10px;
  }

  .zona--info .secao--dossie .campo--nome .campo__destaque {
    font-size: 1.5rem;
  }

  .zona--info .dossie__selo {
    width: 52px;
    height: 52px;
  }

  .zona--info .secao--dossie .grade-campos {
    gap: 4px 14px;
  }

  .zona--esq {
    gap: 8px;
  }

  .zona--esq .secao--atributos {
    padding: 10px 12px 6px;
  }

  .zona--esq .secao--atributos .secao__titulo {
    margin-bottom: 6px;
    font-size: 1.125rem;
  }

  .zona--esq .trilho__corpo {
    gap: 6px;
    padding: 8px 12px;
  }

  .zona--esq .hud__vitais {
    gap: 6px;
  }

  .zona--esq .vital__valor {
    font-size: 1.75rem;
  }

  .zona--esq .vital__barra {
    height: 6px;
  }

  .zona--esq .hud__derivados {
    margin-top: 4px;
  }

  .zona--esq .secao--testes {
    padding: 8px 10px;
  }
}

/* Telas muito baixas (até 740px): dados menores na fileira de atributos e cartões de teste mais enxutos */
@media (min-width: 1280px) and (max-height: 740px) {
  .zona--esq .secao--atributos[data-modo="mesa"] .atributo {
    --dado: 46px;
  }

  .zona--esq .secao--atributos .secao__cabecalho {
    margin-bottom: 2px;
  }

  .zona--esq .teste__nome {
    font-size: 0.75rem;
  }

  .zona--esq .teste__bonus {
    font-size: 1.125rem;
  }

  .zona--esq .teste .botao-icone {
    width: 28px;
    height: 28px;
  }

  .zona--esq .hud__derivado dt {
    font-size: 0.5938rem;
  }

  .zona--esq {
    gap: 6px;
  }

  .zona--esq .trilho__corpo {
    padding: 6px 12px;
  }
}

/* ==========================================================================
   20. REVISÃO DE DESIGN — rodada 2
   ========================================================================== */

/* Faixa do agente: o nome manda; o jogador fica discreto no canto */
.secao--dossie .campo--jogador label {
  color: var(--papel-4);
}

.secao--dossie .campo--jogador input {
  font-size: 0.8125rem;
}

@media (min-width: 1280px) {
  /* O jogador cabe na linha do nome (o rótulo continua para leitor de tela) */
  .zona--info .campo--jogador {
    align-self: end;
  }

  .zona--info .campo--jogador label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .zona--info .campo--jogador input {
    height: 32px;
    margin-bottom: 4px;
  }
}

/* Perícias: busca, filtro e legenda numa linha só (a legenda abre como balão) */
.pericias__ferramentas {
  flex-wrap: nowrap;
  gap: 10px 12px;
  margin-top: 10px;
}

.pericias__ferramentas .busca {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
}

.pericias__ferramentas .caixa {
  flex: none;
  white-space: nowrap;
}

.legenda-ic {
  position: relative;
  flex: none;
  margin: 0;
}

.legenda-ic > summary {
  gap: 6px;
  padding: 0 10px;
  list-style: none;
  border: 1px solid var(--linha-2);
  border-radius: var(--raio-2);
}

.legenda-ic > summary::-webkit-details-marker {
  display: none;
}

.legenda-ic > summary .icone-ui {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.legenda-ic[open] > summary {
  color: var(--papel);
  background: var(--acento-suave);
  border-color: var(--acento-linha);
}

.legenda-ic .legenda {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  width: max-content;
  max-width: min(320px, 80vw);
  margin: 0;
  padding: 10px 12px;
  background: var(--tinta-superficie);
  border: 1px solid var(--linha-2);
  border-radius: var(--raio-3);
  box-shadow: var(--sombra-2);
}

/* "Tem mais embaixo": esmaecido no pé das zonas que rolam por dentro */
@media (min-width: 1280px) {
  .zona[data-mais="true"],
  .paginas[data-mais="true"] {
    -webkit-mask-image: linear-gradient(to bottom, var(--cor-sombra) calc(100% - 28px), transparent);
    mask-image: linear-gradient(to bottom, var(--cor-sombra) calc(100% - 28px), transparent);
  }

  /* O último cartão da coluna da esquerda ocupa a sobra, e as colunas fecham juntas */
  .zona--esq > .secao--testes {
    flex: 1 1 auto;
  }

  /* Com o selo pequeno, o nome por extenso do atributo só atrapalha (a sigla já diz) */
  .zona--esq .secao--atributos[data-modo="mesa"] .atributo__nome {
    display: none;
  }

  .agente__ferramentas {
    padding-top: 14px;
  }

  /* A barra global acompanha a largura da ficha */
  body[data-vista="ficha"] .app-barra__conteudo {
    max-width: 1840px;
  }

  .trilho__agente {
    display: none;
  }
}

/* ---- Faixa do último resultado: sempre presente (nada pula na primeira rolagem) ---- */
.resultado-rapido {
  min-height: 62px;
}

.resultado-rapido[data-vazio="sim"] .resultado-rapido__total {
  font-weight: 500;
  color: var(--papel-4);
}

.resultado-rapido[data-vazio="sim"] #rr-detalhes {
  display: none;
}

/* ---- Celular e tablet ---- */
@media (max-width: 1279px) {
  /* Quem é o agente, no topo de qualquer página */
  .trilho__agente {
    margin: 0 0 6px;
    overflow: hidden;
    font: 600 0.8125rem/1.2 var(--fonte-ui);
    color: var(--papel-2);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .resultado-rapido {
    min-height: 48px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .resultado-rapido__texto strong {
    font-size: 0.875rem;
  }

  /* No Resumo, defesa e testes vêm antes do selo dos atributos */
  #secao-testes {
    order: 1;
  }

  #secao-atributos {
    order: 2;
  }

  .secao--atributos[data-modo="mesa"] .atributos__palco {
    width: min(100%, 400px);
  }

  /* Sem o vazio de 46px sob a faixa presa */
  .ficha-layout .ficha__conteudo .secao {
    padding-top: 14px;
  }

  .ficha-layout .ficha__conteudo .secao__titulo {
    margin-bottom: 12px;
    font-size: 1.5rem;
  }

  .ficha-layout .zona,
  .ficha-layout .pagina-painel {
    padding-top: 0;
  }

  /* A folha de ajuste tem os botões; na faixa o vital é um botão único */
  .vital__botoes {
    display: none;
  }

  .vital__valor {
    font-size: 1.5rem;
  }

  .vital-folha__derivados dd {
    white-space: nowrap;
  }
}

/* Tablet: a faixa de vitais usa o mesmo desenho compacto do celular */
@media (min-width: 720px) and (max-width: 1279px) {
  .vital {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "topo"
      "barra";
    gap: 5px 6px;
  }

  .vital__topo {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px;
    min-height: 40px;
    margin: -4px -6px -2px;
    padding: 4px 6px 2px;
    background: color-mix(in srgb, var(--cor-texto) 3.5%, transparent);
    border-color: var(--linha-1);
  }
}

/* Telas médias: o indicador de salvamento sai da barra (a falha de gravação continua avisando) */
@media (max-width: 900px) {
  .status-salvamento:not([data-estado="falha"]):not([data-estado="pendente"]) {
    display: none;
  }
}

/* Muito baixo (até 740px): o numeral dos vitais volta a 24px e a faixa do agente aperta mais */
@media (min-width: 1280px) and (max-height: 740px) {
  .zona--esq .vital__valor {
    font-size: 1.5rem;
  }

  .zona--info .secao--dossie {
    padding-top: 6px;
    padding-bottom: 8px;
  }

  .zona--info .dossie__selo {
    width: 44px;
    height: 44px;
  }
}

/* Tablet: os botões da barra (Aparência, Sobre) só com o ícone, para a aba Ficha caber inteira */
@media (max-width: 1100px) {
  .app-barra__botao-texto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
}

/* Tablet e celular: o vital da faixa tem 44px de toque; os botões da barra também */
@media (max-width: 1279px) {
  .vital__topo {
    min-height: 44px;
  }
}

@media (max-width: 1100px) {
  .app-barra__botao {
    min-width: 44px;
    justify-content: center;
  }
}

@media (min-width: 1280px) and (max-height: 740px) {
  .zona--esq .secao--testes {
    padding: 6px 10px;
  }

  .zona--esq .secao--atributos {
    padding-bottom: 4px;
  }
}

/* ==========================================================================
   21. REVISÃO DE DESIGN (rodada 3) — fundos opacos, atributo rolável, edição compacta,
   toque no tablet, rótulos legíveis e faixa de resultado enxuta
   ========================================================================== */

/* ---- Cromo fixo opaco: o conteúdo não aparece por trás ---- */
@media (max-width: 1279px) {
  .app-barra {
    background: var(--tinta-1);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  body[data-vista="ficha"] .dock {
    background: var(--tinta-1);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ---- Teste puro de atributo: o d20 é o botão ---- */
.atributo__rolar {
  position: absolute;
  inset: -4px;
  z-index: 2;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.atributo__rolar:hover {
  background: color-mix(in srgb, var(--acento) 14%, transparent);
}

.atributo__rolar:active {
  background: color-mix(in srgb, var(--acento) 26%, transparent);
}

.secao--atributos:not([data-modo="mesa"]) .atributo__rolar {
  display: none;
}

/* ---- Quem é o agente (celular): vira atalho para a página Agente ---- */
@media (max-width: 1279px) {
button.trilho__agente {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  padding: 0;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}

button.trilho__agente::after {
  content: "›";
  flex: none;
  margin-left: auto;
  font-size: 1.25rem;
  color: var(--papel-3);
}
}

/* ---- Edição de atributos: cinco linhas compactas, nunca o pentágono ---- */
.secao--atributos[data-modo="edicao"] .grade-atributos {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.secao--atributos[data-modo="edicao"] .atributo {
  grid-template-columns: 46px minmax(0, 1fr) auto auto;
  grid-template-areas: "total cab base bonus";
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
}

.secao--atributos[data-modo="edicao"] .atributo__total {
  width: 46px;
}

.secao--atributos[data-modo="edicao"] .atributo__total output {
  font-size: 1rem;
}

.secao--atributos[data-modo="edicao"] .atributo__campo {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.secao--atributos[data-modo="edicao"] .atributo__campo label {
  font-size: 0.625rem;
  letter-spacing: 0.1em;
}

.secao--atributos[data-modo="edicao"] .atributo__sigla {
  font-size: 1.125rem;
}

.secao--atributos[data-modo="edicao"] .atributo__nome {
  font-size: 0.625rem;
}

@container atributos (max-width: 420px) {
  .secao--atributos[data-modo="edicao"] .atributo {
    grid-template-columns: 46px minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "total cab   cab"
      "base  base  bonus";
  }
}

/* No computador, editando atributos, os vitais sobem para o topo da coluna (nunca saem da tela) */
@media (min-width: 1280px) {
  .zona--esq:has(.secao--atributos[data-modo="edicao"]) .trilho {
    order: -1;
  }
}

/* ---- Telas de toque com layout de computador (tablet grande): alvos de 44px ---- */
@media (pointer: coarse) and (min-width: 1280px) {
  .vital__botao,
  .ficha-layout .botao-icone,
  .ficha-layout .atributo-sigla {
    min-width: 44px;
    min-height: 44px;
  }

  .ficha-layout .pericia {
    min-height: 48px;
  }
}

/* ---- Rótulos de dados que se consultam: nunca abaixo de 12px ---- */
.ficha-layout .hud__derivado dt,
.ficha-layout .zona--esq .hud__derivado dt,
.ficha-layout .atributo__nome,
.ficha-layout .recurso__nome,
.ficha-layout .recurso__info,
.ficha-layout .recurso__detalhe,
.ficha-layout .reacao__nome,
.ficha-layout .limite__rotulo,
.ficha-layout .teste__dados,
.ficha-layout .legenda,
.ficha-layout .zona--per .legenda {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

.ficha-layout .selo-cond {
  font-size: 0.6875rem;
}

/* ---- Faixa de resultado vazia: uma linha fina ---- */
@media (max-width: 1279px) {
  .resultado-rapido[data-vazio="sim"] {
    min-height: 34px;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .resultado-rapido[data-vazio="sim"] .resultado-rapido__total {
    font-size: 1.125rem;
  }

  .resultado-rapido[data-vazio="sim"] #rr-detalhe {
    display: none;
  }

  .resultado-rapido[data-vazio="sim"] .resultado-rapido__texto strong {
    font-weight: 500;
    color: var(--papel-3);
  }
}

/* ---- Resultado: total maior e nome do teste legível ---- */
@media (min-width: 1280px) {
  .resultado-rapido__total {
    font-size: 3rem;
  }
}

@media (max-width: 1279px) {
  .resultado-rapido__total {
    font-size: 2.25rem;
  }

  .resultado-rapido__texto span {
    font-size: 0.8125rem;
  }
}

/* Falha e acerto com palavra e cor na faixa */
.resultado-rapido__texto .resultado-rapido__alvo[data-resultado="falha"] { color: var(--erro); }
.resultado-rapido__texto .resultado-rapido__alvo[data-resultado="acerto"] { color: var(--ok); }

/* ---- Responsividade: campos sem corte e linhas que não se esticam ---- */
@media (min-width: 1280px) {
  /* Classe com mais espaço (o nome não corta) */
  .zona--info .secao--dossie .grade-campos {
    grid-template-columns: 72px minmax(0, 0.6fr) minmax(0, 0.5fr) minmax(0, 1.25fr) minmax(0, 1.15fr) minmax(80px, 0.7fr);
  }
}

@media (max-width: 400px) {
  /* Testes em uma coluna: o nome do teste aparece inteiro */
  .ficha-layout .grade-testes {
    grid-template-columns: minmax(0, 1fr);
  }

  .ficha-layout .resumo-derivados output {
    white-space: nowrap;
  }
}

.resumo-derivados output,
.hud__derivado output {
  white-space: nowrap;
}

/* ---- Feedback da rolagem: a linha rolada e o número pulsam um instante ---- */
@media (prefers-reduced-motion: no-preference) {
  .rolou-agora,
  .pericia.rolou-agora > td,
  .pericia.rolou-agora > th {
    animation: rolou-agora 900ms var(--curva-saida);
  }

  @keyframes rolou-agora {
    from { background-color: var(--acento-suave); box-shadow: 0 0 0 2px var(--acento-linha); }
  }

  .resultado-rapido--novo .resultado-rapido__total {
    animation: total-pulo 420ms var(--curva-saida);
  }

  @keyframes total-pulo {
    from { transform: scale(1.4); }
  }
}

/* ---- Central sem agentes: o botão de criar fica acima da dobra ---- */
.vista--central[data-vazia="sim"] .central {
  padding-top: 28px;
}

.vista--central[data-vazia="sim"] .central__heroi {
  min-height: 0;
}

.vista--central[data-vazia="sim"] .central__selo {
  width: min(100%, 300px);
}

.vista--central[data-vazia="sim"] .central__grade {
  margin-top: 24px;
}

.vista--central[data-vazia="sim"] #central-continuar > .estado-vazio__conteudo {
  padding-top: 28px;
  padding-bottom: 28px;
}

@media (max-width: 700px) {
  .vista--central[data-vazia="sim"] .central__selo {
    display: none;
  }

  .vista--central[data-vazia="sim"] .central__lead {
    margin-top: 12px;
  }

  .vista--central[data-vazia="sim"] #central-continuar > .estado-vazio__conteudo {
    padding: 20px 16px;
  }

  .vista--central[data-vazia="sim"] .estado-vazio__selo {
    width: 56px;
    height: 56px;
    margin-bottom: 2px;
  }

  .vista--central[data-vazia="sim"] .estado-vazio__icone {
    width: 28px;
    height: 28px;
  }
}

/* Com 12px nos rótulos, a coluna da esquerda aperta as linhas para continuar cabendo sem rolar */
@media (min-width: 1280px) {
  .ficha-layout .zona--esq .teste__dados,
  .ficha-layout .zona--esq .hud__derivado dt {
    line-height: 1.05;
  }
}

@media (min-width: 1280px) and (max-height: 740px) {
  .zona--esq {
    gap: 5px;
  }
}

@media (min-width: 1280px) and (max-height: 740px) {
  .zona--esq .secao--testes {
    padding-top: 4px;
    padding-bottom: 4px;
  }
}

@media (min-width: 1280px) and (max-height: 740px) {
  .ficha-layout .zona--info .secao--dossie.secao {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

/* ==========================================================================
   22. REVISÃO DE DESIGN (rodada 4) — edição em telas baixas, abas no 1280, navegação, paisagem
   ========================================================================== */

/* Edição de perícias em telas baixas: o bloco de pontos vira uma linha só */
@media (min-width: 1280px) and (max-height: 800px) {
  .ficha-layout .zona--per .pericias__pontos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    margin: 4px 0;
    padding: 4px 10px;
  }

  .ficha-layout .zona--per .pericias__composicao {
    margin: 0;
    font-size: 0.75rem;
  }

  .ficha-layout .zona--per .contador,
  .ficha-layout .zona--per .alternar {
    padding-inline: 8px;
  }

  .ficha-layout .zona--per .contador {
    gap: 5px;
  }

  .zona--per .secao__cabecalho {
    margin-bottom: 4px;
  }

  .zona--per .secao__controles {
    gap: 6px;
  }
}

/* Abas: com a contagem de condições, "Combate" nunca é cortada no 1280 */
@container (max-width: 520px) {
  .aba-pagina {
    padding: 0 6px;
    gap: 3px;
    letter-spacing: 0;
  }
}

/* ---- Celular e tablet, na mesa: os atributos são uma fileira de cinco d20 (um toque rola o teste) e vêm primeiro ---- */
@media (max-width: 1279px) {
  #secao-atributos {
    order: 1;
  }

  #secao-testes {
    order: 2;
  }

  .secao--atributos[data-modo="mesa"] .atributos__palco {
    width: 100%;
    aspect-ratio: auto;
    margin: 0;
  }

  .secao--atributos[data-modo="mesa"] .atributos__palco::before,
  .secao--atributos[data-modo="mesa"] .atributos__mostrador {
    display: none;
  }

  .secao--atributos[data-modo="mesa"] .grade-atributos {
    position: static;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: auto;
    grid-template-areas: none;
    gap: 4px;
  }

  .secao--atributos[data-modo="mesa"] .atributo[data-atributo] {
    grid-area: auto;
  }

  .secao--atributos[data-modo="mesa"] .atributo {
    --dado: min(68px, 15.5vw);
    position: relative;
    top: auto;
    left: auto;
    transform: none;
  }

  .secao--atributos[data-modo="mesa"] .atributo__nome {
    display: none;
  }
}

/* ---- Voltar (Rolagens) e aviso de classe no Resumo ---- */
.rolagens__voltar {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0 0 6px;
  padding: 0 14px;
  font: 600 0.875rem/1 var(--fonte-ui);
  color: var(--papel);
  background: none;
  border: 1px solid var(--linha-2);
  border-radius: var(--raio-2);
  cursor: pointer;
}

.rolagens__voltar[hidden] {
  display: none;
}

.aviso-classe {
  display: none;
  width: 100%;
  min-height: 44px;
  margin: 0 0 12px;
  padding: 8px 14px;
  font: 600 0.9375rem/1.3 var(--fonte-ui);
  text-align: left;
  color: var(--papel);
  background: var(--acento-suave);
  border: 1px solid var(--acento-linha);
  border-radius: var(--raio-2);
  cursor: pointer;
}

@media (max-width: 1279px) {
  .aviso-classe:not([hidden]) {
    display: block;
  }
}

/* ---- Resultado na faixa: o detalhe quebra em duas linhas em vez de cortar (crítico, vários d20) ---- */
@media (max-width: 1279px) {
  .resultado-rapido:not([data-vazio="sim"]) .resultado-rapido__texto span {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

/* ---- Folha-índice: nas telas estreitas as nove páginas continuam em duas colunas e cabem sem rolar ---- */
@media (max-width: 380px) {
  .paginas-indice {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .paginas-indice__botao {
    min-height: 56px;
    padding: 8px 10px;
  }

  .paginas-indice__texto small {
    display: none;
  }
}

/* ---- Celular deitado (pouca altura): vitais e resultado rolam junto, só o rodapé fica preso e fica mais baixo ---- */
@media (max-width: 1279px) and (max-height: 520px) {
  :root {
    --dock-altura: 3.25rem;
    --topo-fixo: 0px;
  }

  html[data-vista="ficha"] {
    --topo-fixo: 0px;
  }

  .app-barra,
  body[data-vista="ficha"] .app-barra,
  .trilho,
  .resultado-rapido {
    position: static;
  }

  body[data-vista="ficha"] .dock {
    padding-top: 4px;
    padding-bottom: calc(4px + var(--seguro-base));
  }

  .trilho__agente {
    display: none;
  }
}

@media (min-width: 720px) and (max-width: 1279px) {
  .nav-global__item--ficha {
    flex: 0 0 auto;
  }

  .barra-topo__nome {
    max-width: 18ch;
  }
}

/* ---- Rótulos nunca abaixo de 11px (edição de atributos, Rolagens) e fórmula do ataque menos gritante que o nome ---- */
.secao--atributos[data-modo="edicao"] .atributo__campo label,
.secao--atributos[data-modo="edicao"] .atributo__nome,
.ficha-layout .atributo__campo label,
.rolagens small {
  font-size: 0.6875rem;
}

.ataque__teste {
  font-size: 1rem;
  text-shadow: none;
}

/* ==========================================================================
   23. REVISÃO DE DESIGN (rodada 5) — gesto sem voltar do navegador, paisagem com resultado preso,
   algarismos alinhados e piso de 12px nos rótulos
   ========================================================================== */

/* Deslizar para os lados troca de página; não deve acionar o "voltar" do navegador */
html,
body {
  overscroll-behavior-x: none;
}

/* Algarismos da fonte de títulos na linha de base (sem os "antigos" que descem) */
body {
  font-variant-numeric: lining-nums;
}

/* Nome do ataque longo: reticências em vez de corte no meio da letra */
.ataque__nome,
.ataque[data-modo="resumo"] .ataque__nome {
  text-overflow: ellipsis;
}

/* Celular deitado: o resultado da rolagem fica preso no topo (o resto rola) */
@media (max-width: 1279px) and (max-height: 520px) {
  .resultado-rapido {
    position: sticky;
    top: 0;
    min-height: 40px;
  }
}

/* Sigla do atributo na linha da perícia e testes: 12px */
.atributo-sigla,
.ficha-layout .atributo-sigla {
  font-size: 0.75rem;
}

/* ---- Rituais e Inventário: a lista vem antes da configuração (a ordem está no HTML, o foco do teclado a segue) ---- */
.secao--inventario > .inventario__topo,
.secao--rituais > .rituais__topo {
  margin-top: 16px;
}

/* Resumo ao lado do título: carga e DT à vista sem rolar */
.secao__resumo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  margin: 0 0 12px;
  font: 500 0.8125rem/1.3 var(--fonte-mono);
  color: var(--papel-2);
}

.secao__resumo output {
  font-weight: 700;
  color: var(--papel);
}

/* ---- Celular: item do inventário em duas linhas (nome + ações; tipo, categoria, espaços e quantidade) ---- */
@media (max-width: 599px) {
  .item {
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "nome nome acoes acoes"
      "tipo cat  esp  qtd"
      "det  det  det  det"
      "desc desc desc desc";
    gap: 6px 6px;
    padding: 10px 12px;
  }

  .item [data-rotulo]::before {
    margin-bottom: 3px;
    font-size: 0.6875rem;
    letter-spacing: 0;
  }

  .item__nome,
  .item__nome .controle {
    min-width: 0;
  }

  .item__tipo,
  .item__categoria,
  .item__espacos,
  .item__quantidade {
    margin-top: 2px;
  }
}

/* ==========================================================================
   24. REVISÃO DE DESIGN (rodada 6)
   ========================================================================== */

/* Ataque em resumo, com espaço (coluna da direita no computador, tablet): duas linhas só */
@container ficha (min-width: 440px) {
  .ataque[data-modo="resumo"] .ataque__linha {
    flex-wrap: nowrap;
    align-items: center;
  }

  .ataque[data-modo="resumo"] .ataque__linha--teste {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .ataque[data-modo="resumo"] .ataque__campo--nome {
    flex: 1 1 100%;
  }

  .ataque[data-modo="resumo"] .ataque__linha--teste .ataque__acoes {
    margin-left: auto;
  }

  .ataque[data-modo="resumo"] .ataque__campo--teste {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
  }

  .ataque[data-modo="resumo"] .ataque__acoes {
    flex: none;
  }

  .ataque[data-modo="resumo"] .ataque__linha--dano .cartao-resumo {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* Selo de condição nunca corta; testes rápidos em uma linha na coluna da esquerda */
.selo-cond {
  flex: none;
}

/* Rótulo "zerado" legível */
.vital[data-nivel="baixo"] .vital__sigla::after,
.vital[data-nivel="critico"] .vital__sigla::after,
.vital[data-nivel="zero"] .vital__sigla::after {
  font-size: 0.6875rem;
}

/* Busca de perícias no celular estreito: ocupa a linha inteira (o texto não corta) */
@media (max-width: 400px) {
  .pericias__ferramentas {
    flex-wrap: wrap;
  }

  .pericias__ferramentas .busca {
    flex: 1 1 100%;
    max-width: none;
  }
}

/* Celular: a faixa de resultado tem altura fixa (nada desce sob o dedo na primeira rolagem) */
@media (max-width: 1279px) {
  .resultado-rapido,
  .resultado-rapido[data-vazio="sim"] {
    height: 56px;
    min-height: 56px;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .resultado-rapido[data-vazio="sim"] #rr-detalhe {
    display: block;
  }

  .resultado-rapido[data-vazio="sim"] .resultado-rapido__total {
    font-size: 2.25rem;
  }

  .resultado-rapido:not([data-vazio="sim"]) .resultado-rapido__texto span {
    display: block;
    white-space: nowrap;
    -webkit-line-clamp: unset;
    font-size: 0.75rem;
  }
}

/* Celular deitado: vitais compactos e presos, resultado logo abaixo */
@media (max-width: 1279px) and (max-height: 520px) {
  .trilho {
    position: sticky;
    top: 0;
  }

  .trilho__corpo {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .trilho .hud__derivados,
  .trilho .vital__barra {
    display: none;
  }

  .resultado-rapido,
  .resultado-rapido[data-vazio="sim"] {
    height: 44px;
    min-height: 44px;
    top: var(--altura-trilho, 52px);
  }

  .resultado-rapido__total,
  .resultado-rapido[data-vazio="sim"] .resultado-rapido__total {
    font-size: 1.75rem;
  }
}

/* Dica: o d20 do atributo é tocável (celular, na mesa) */
.atributos__dica {
  display: none;
}

@media (max-width: 1279px) {
  .secao--atributos[data-modo="mesa"] .atributos__dica {
    display: block;
    margin: 6px 0 14px;
    font: 500 0.75rem/1.3 var(--fonte-mono);
    text-align: center;
    color: var(--papel-3);
  }
}

/* Testes rápidos na coluna da esquerda: gaps menores para o nome ("Vontade") e "2d20 maior" caberem inteiros */
@media (min-width: 1280px) {
  .zona--esq .teste__ir {
    gap: 2px 4px;
    padding-inline: 4px;
  }

  .zona--esq .teste__dados {
    white-space: nowrap;
  }

  .zona--esq .teste__bonus {
    font-size: 1rem;
  }
}

@media (max-width: 1279px) and (max-height: 520px) {
  button.trilho__agente {
    display: none;
  }
}


/* ==========================================================================
   25. REVISÃO DE DESIGN (rodada 7)
   ========================================================================== */

/* "zerado" numa linha, com folga do numeral; rótulos dos vitais com contraste de sobra */
.vital__sigla {
  white-space: nowrap;
  color: color-mix(in oklab, var(--cor-vital) 75%, var(--papel));
}

/* Selo "cond." ocupa só o próprio tamanho (não vira barra nos testes) */
.selo-cond {
  align-self: start;
  justify-self: start;
  width: fit-content;
  height: fit-content;
}

/* Dano e crítico do ataque: a linha mais importante, legível */
.ataque[data-modo="resumo"] .cartao-resumo {
  font-size: 0.875rem;
  color: var(--papel);
}

/* Avisos de pontos/graus no modo edição de perícias: curtos (a dica fica no título) */
.secao--pericias .avisos {
  padding: 8px 12px;
  font-size: 0.8125rem;
}

.secao--pericias .avisos__dica {
  display: none;
}

/* Tablet: defesa e testes em quatro colunas */
@media (min-width: 700px) and (max-width: 1279px) {
  .ficha-layout .grade-testes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Celular deitado: sem a faixa de resultado enquanto não houver rolagem */
@media (max-width: 1279px) and (max-height: 520px) {
  .resultado-rapido[data-vazio="sim"] {
    display: none;
  }
}

/* 20 e 1 naturais ganham destaque na faixa de resultado */
.resultado-rapido[data-falha="sim"] .resultado-rapido__total {
  color: var(--erro);
}

.resultado-rapido__critico[data-natural="falha"] {
  color: var(--erro);
  border-color: var(--erro);
}

.resultado-rapido__critico[data-natural="acerto"] {
  color: var(--acento);
  border-color: var(--acento);
}

/* ==========================================================================
   26. REVISÃO DE DESIGN (rodada 8)
   ========================================================================== */

/* Linha do agente no cromo do celular: reticências (e a seta › sempre visível) */
.trilho__agente-texto {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Celular deitado: a Defesa continua à vista nos vitais */
@media (max-width: 1279px) and (max-height: 520px) {
  .trilho .hud__derivados {
    display: grid;
  }
}

/* Celular: nomes de ataque, ritual e agente maiores (Cormorant tem x-height baixo) */
@media (max-width: 1279px) {
  .ficha-layout .ataque[data-modo="resumo"] .ataque__nome,
  .ficha-layout .ritual[data-modo="resumo"] .ritual__nome,
  #campo-nome {
    font-size: 1.375rem;
  }

  /* Retrato vazio: uma faixa baixa (não 60% da página) */
  .bio__moldura:not([data-tem-retrato="true"]) {
    aspect-ratio: auto;
    min-height: 88px;
    height: 88px;
  }

  .bio__retrato {
    max-width: none;
  }
}

/* Cartão de teste: respiro entre "2d20 maior" e o bônus */
.teste__ir {
  column-gap: 12px;
}

/* A página Agente não encosta na barra de abas nem na faixa fixa */
.pagina-painel--agente,
#pagina-agente {
  padding-top: 12px;
}


/* ==========================================================================
   27. REVISÃO DE DESIGN (rodada 9 — últimos ajustes)
   ========================================================================== */

/* Selo do elemento Sangue (ex.: "Ocultismo" no ritual): contraste de sobra */
[data-elemento="sangue"] .selo,
.ritual[data-elemento="sangue"] .selo,
.selo--sangue {
  color: color-mix(in srgb, var(--el-sangue, #e5476f) 70%, var(--papel));
}

/* Máximos dos vitais e deslocamento: 12px */
.vital__max,
.hud__derivado dd,
.resumo-derivados dd {
  font-size: 0.75rem;
}

.resumo-derivados output,
.hud__derivado output {
  font-size: inherit;
}

/* Tablet: testes em duas colunas até 900px (o nome do teste aparece inteiro) */
@media (min-width: 700px) and (max-width: 899px) {
  .ficha-layout .grade-testes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Desktop: o cartão de defesa e testes não estica (sem espaço morto dentro dele) */
@media (min-width: 1280px) {
  .zona--esq > .secao--testes {
    flex: none;
    align-self: stretch;
  }
}

/* Celular: cromo fixo um pouco mais baixo (mais área útil) */
@media (max-width: 1279px) {
  .trilho__corpo {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .resultado-rapido,
  .resultado-rapido[data-vazio="sim"] {
    height: 52px;
    min-height: 52px;
  }
}

/* Celular deitado: a fileira de cinco d20 usa a altura inteira disponível sem estourar */
@media (max-width: 1279px) and (max-height: 520px) {
  .secao--atributos[data-modo="mesa"] .atributo {
    --dado: min(56px, 11vw);
  }
}

/* Rolagens: o botão "Voltar" lê como botão */
.rolagens__voltar {
  background: color-mix(in srgb, var(--cor-texto) 6%, transparent);
}


/* ---- Perícias: marcador de grau (T/V/E) e seta do "menor" ficam antes da sigla; a sigla não se move ---- */
.pericia__dados {
  text-align: right;
}

.pericia__dados > .pericia__grau-marca,
.pericia__dados > .marca-menor {
  vertical-align: middle;
  margin-right: 4px;
}

/* A seta do "menor" reserva o próprio espaço mesmo oculta */
.pericia__dados > .marca-menor[hidden] {
  display: inline-flex;
  visibility: hidden;
}

/* ==========================================================================
   28. IDENTIFICAÇÃO — Origem, Classe, Trilha e NEX como texto clicável
   (sem caixa; o rótulo em cima e o valor embaixo, como a sigla do atributo nas perícias)
   ========================================================================== */
.secao--dossie .campo .seletor {
  align-self: flex-start;
  width: auto;
  max-width: 100%;
  min-height: 32px;
  padding: 0 4px;
  margin-left: -4px;
  gap: 6px;
  font: 600 1rem/1.2 var(--fonte-ui);
  color: var(--papel);
  background: transparent;
  border: 0;
  border-radius: var(--raio-1);
  box-shadow: none;
}

.secao--dossie .campo .seletor:hover:not(:disabled) {
  color: var(--acento);
  text-decoration: underline dotted;
  text-underline-offset: 4px;
  background: transparent;
}

.secao--dossie .campo .seletor.seletor--aberto {
  color: color-mix(in srgb, var(--acento) 72%, var(--papel));
  background: var(--acento-suave);
  border: 0;
  box-shadow: none;
}

/* A setinha só aparece ao passar o mouse, focar ou abrir (o texto já se lê como clicável) */
.secao--dossie .campo .seletor .seletor__seta {
  opacity: 0;
  transition: opacity var(--dur-1) var(--curva), transform var(--dur-2) var(--curva);
}

.secao--dossie .campo .seletor:hover .seletor__seta,
.secao--dossie .campo .seletor:focus-visible .seletor__seta,
.secao--dossie .campo .seletor.seletor--aberto .seletor__seta {
  opacity: 1;
}

/* Sem mouse (celular, tablet): sem "passar por cima", então o valor ganha um sublinhado pontilhado e a seta fica à vista */
@media (hover: none) {
  .secao--dossie .campo .seletor {
    min-height: 44px;
    text-decoration: underline dotted color-mix(in srgb, var(--papel-3) 70%, transparent);
    text-underline-offset: 5px;
  }

  .secao--dossie .campo .seletor .seletor__seta {
    opacity: 0.7;
  }
}

.secao--dossie .campo .seletor:disabled {
  opacity: 0.55;
  cursor: default;
  text-decoration: none;
}

/* Texto clicável: a largura é a do valor atual (sem reservar a da maior opção) */
.secao--dossie .campo .seletor__medida > span {
  display: none;
}

/* ==========================================================================
   29. REGRAS OPCIONAIS — botão discreto na faixa do agente e diálogo
   ========================================================================== */
.secao--dossie {
  position: relative;
}

.regras-opcionais {
  position: absolute;
  top: 3px;
  right: 16px;
  z-index: 2;
  padding: 0 4px;
  font: 500 0.6875rem/1.4 var(--fonte-mono);
  letter-spacing: 0.06em;
  color: var(--papel-3);
  background: none;
  border: 0;
  border-radius: var(--raio-1);
  opacity: 0.7;
  cursor: pointer;
  transition: opacity var(--dur-1) var(--curva), color var(--dur-1) var(--curva);
}

.regras-opcionais:hover,
.regras-opcionais:focus-visible {
  opacity: 1;
  color: var(--acento);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.regras-opcionais__marca {
  color: var(--acento);
}

/* Faixa do agente no computador: o campo do jogador desce um pouco para não encostar no texto */
@media (min-width: 1280px) {
  .zona--info .secao--dossie .campo--jogador {
    position: relative;
    top: 12px;
  }
}

/* Toque: alvo de 44px (o texto continua pequeno) */
@media (pointer: coarse) {
  .regras-opcionais {
    min-height: 44px;
    top: -6px;
  }
}

.dialogo--regras .dialogo__corpo {
  max-width: 560px;
}

.alternar-regra {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--cor-texto) 5%, transparent);
  border: 1px solid var(--linha-2);
  border-radius: var(--raio-3);
  cursor: pointer;
}

.alternar-regra input {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--acento);
}

.alternar-regra__texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.alternar-regra__texto small {
  font-size: 0.8125rem;
  color: var(--papel-2);
}

.alternar-regra:has(input:checked) {
  border-color: var(--acento-linha);
  background: var(--acento-suave);
}

.alternar-regra:has(input:focus-visible) {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
}

.regra-opcional {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.regra-opcional__lista {
  margin: 0;
  padding-left: 20px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--papel-2);
}

.tabela-regra {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.tabela-regra th,
.tabela-regra td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid var(--linha-1);
}

.tabela-regra thead th {
  font: 500 0.75rem/1.2 var(--fonte-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--papel-3);
}

.tabela-regra tbody th {
  font-weight: 600;
  color: var(--papel);
}

/* ---- Jogando sem Sanidade: a SAN sai de cena (o PE vira PD pelo js/ui-regras.js) ---- */
body[data-sem-sanidade="sim"] .vital--san,
body[data-sem-sanidade="sim"] .recurso--san,
body[data-sem-sanidade="sim"] #cond-estado-sanidade,
body[data-sem-sanidade="sim"] .campo-texto:has(#descanso-san) {
  display: none !important;
}

@media (max-width: 1279px) {
  body[data-sem-sanidade="sim"] .hud__vitais {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* Jogando sem Sanidade: os PD (no lugar de PE e SAN) usam o azul da Sanidade */
body[data-vista="ficha"][data-sem-sanidade="sim"] {
  --pe: var(--cor-san);
}

.mini-vital--pd {
  --cor-vital: var(--san);
}

/* ==========================================================================
   30. REGRA OPCIONAL NEX E EXPERIÊNCIA — painel Alterações de NEX e texto do livro no diálogo
   ========================================================================== */
.secao--alteracoes[hidden] {
  display: none;
}

.nex-escolhas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px 14px;
  min-width: 0;
  margin: 0 0 12px;
  padding: 10px 12px 12px;
  border: 1px solid var(--linha-1);
  border-radius: var(--raio-2);
}

.nex-escolhas legend {
  padding: 0 6px;
  font: 500 0.75rem/1.2 var(--fonte-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--papel-3);
}

.nex-escolhas .campo-texto[hidden] {
  display: none;
}

.nex-extras {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-bottom: 12px;
}

.nex-extras:empty,
.nex-extras[hidden] {
  display: none;
}

.nex-extras .caixa[hidden],
.nex-extras .botao[hidden] {
  display: none;
}

.nex-energia {
  margin: 0 0 14px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--el-energia, var(--acento)) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--el-energia, var(--acento)) 40%, var(--linha-1));
  border-radius: var(--raio-3);
}

.nex-energia[hidden] {
  display: none;
}

.nex-energia__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}

.nex-energia__acoes [hidden] {
  display: none;
}

.nex-energia__numero {
  margin: 6px 0 2px;
  font: 700 0.9375rem/1.3 var(--fonte-ui);
  color: var(--papel);
}

.nex-energia__texto,
.nex-energia__aplicado,
.nex-energia__vazio {
  margin: 4px 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--papel-2);
}

.nex-energia__aplicado {
  padding-left: 10px;
  border-left: 3px solid var(--acento-linha);
  color: var(--papel);
}

.nex-cartoes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.alteracao {
  padding: 0 14px;
  background: color-mix(in srgb, var(--cor-texto) 4%, transparent);
  border: 1px solid var(--linha-1);
  border-radius: var(--raio-3);
}

.alteracao--ativa {
  border-color: var(--acento-linha);
  box-shadow: inset 3px 0 0 var(--acento);
}

.alteracao--aguardando {
  opacity: 0.8;
}

.alteracao__resumo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  min-height: 44px;
  padding: 10px 0;
  cursor: pointer;
}

.alteracao__nex {
  font: 700 0.9375rem/1.2 var(--fonte-mono);
  color: var(--papel);
}

.alteracao__grupo {
  font: 600 0.75rem/1.2 var(--fonte-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--papel-3);
}

.alteracao__estado {
  margin-left: auto;
  font-size: 0.8125rem;
  color: var(--papel-2);
}

.alteracao--ativa .alteracao__estado {
  color: color-mix(in srgb, var(--acento) 72%, var(--papel));
  font-weight: 600;
}

.alteracao__narrativa {
  margin: 0 0 10px;
  font-style: italic;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--papel-2);
}

.alteracao__texto {
  margin: 0 0 10px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--papel);
}

.alteracao__efeitos {
  margin: 0 0 12px;
  padding: 8px 12px;
  background: var(--acento-suave);
  border-radius: var(--raio-2);
}

.alteracao__efeitos-titulo {
  margin: 8px 0 4px;
  font: 600 0.75rem/1.2 var(--fonte-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--papel-2);
}

.alteracao__efeitos .alteracao__efeitos-titulo {
  margin-top: 0;
}

.alteracao__efeitos-lista {
  margin: 0;
  padding-left: 18px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--papel);
}

.alteracao__tabela {
  margin: 0 0 12px;
  padding-left: 22px;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--papel-2);
}

.alteracao__tabela li {
  margin-bottom: 6px;
}

.nex-livro,
.regra-livro {
  margin-top: 12px;
  padding: 0 14px;
  border: 1px solid var(--linha-1);
  border-radius: var(--raio-3);
}

.nex-livro > summary,
.regra-livro > summary {
  min-height: 44px;
  padding: 10px 0;
  font-weight: 600;
  cursor: pointer;
}

.nex-livro__corpo,
.regra-livro__corpo {
  padding-bottom: 12px;
}

.regra-livro__secao--caixa {
  margin: 12px 0;
  padding: 4px 12px 8px;
  background: color-mix(in srgb, var(--cor-texto) 5%, transparent);
  border-radius: var(--raio-2);
}

.selo-alt {
  color: color-mix(in srgb, var(--acento) 72%, var(--papel));
  border-color: var(--acento-linha);
}

.alteracao__efeitos-lista li,
.regra-livro__secao .dialogo__texto {
  overflow-wrap: anywhere;
}

/* ==========================================================================
   31. NEX E EXPERIÊNCIA — NEX ao lado do Nível na faixa do agente; alterações como bloco de consulta na página Agente
   ========================================================================== */
.campo__nivel {
  min-width: 0;
}

.campo__exposicao[hidden] {
  display: none;
}

body[data-nex-nivel="sim"] .campo--nex {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 12px;
}

body[data-nex-nivel="sim"] .campo--nex .campo__nivel {
  flex: 1 1 70px;
}

body[data-nex-nivel="sim"] .campo--nex .campo__exposicao {
  flex: 0 0 auto;
}

/* O passo do NEX na faixa: mesma altura dos campos vizinhos */
.secao--dossie .campo__exposicao .passo {
  display: flex;
  width: auto;
  height: 40px;
}

.secao--dossie .campo__exposicao .passo__valor {
  width: 38px;
  height: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  font: 600 0.9375rem/1 var(--fonte-mono);
}

.secao--dossie .campo__exposicao .passo__botao {
  width: 26px;
}

/* Faixa do agente no computador: a última coluna cresce para caber Nível e NEX lado a lado e a Classe nunca é cortada */
@media (min-width: 1280px) {
  body[data-nex-nivel="sim"] .zona--info .secao--dossie .grade-campos {
    grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1fr) minmax(118px, 1.1fr) minmax(100px, 1.2fr) minmax(190px, 0.9fr);
    column-gap: 12px;
  }
}

/* Cartão estreito (página Agente no celular): nível e NEX ganham a própria linha */
@container ficha (max-width: 560px) {
  body[data-nex-nivel="sim"] .secao--dossie .grade-campos {
    grid-template-areas:
      "selo nome nome"
      "jog  jog  jog"
      "orig orig orig"
      "clas clas clas"
      "nex  nex  nex"
      "tril tril tril";
  }
}

.alteracoes-bloco__corpo {
  padding: 0 16px 16px;
}

.progressao__proximo--alerta {
  color: var(--aviso);
}

.secao--alteracoes > .progressao {
  margin-top: 4px;
}

/* ==========================================================================
   32. CONTA — diálogo de login e códigos de acesso (js/conta.js)
   ========================================================================== */
.dialogo--conta .dialogo__corpo {
  max-width: 460px;
}

.conta__subtitulo {
  margin: 14px 0 6px;
  font: 500 0.6875rem/1.4 var(--fonte-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--papel-3);
}

.conta__acessos {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  color: var(--papel-2);
}

.conta__acessos li {
  padding: 8px 10px;
  background: color-mix(in srgb, var(--cor-texto) 5%, transparent);
  border-radius: var(--raio-2);
}

.conta__acessos .conta__vazio {
  color: var(--papel-3);
  background: none;
  padding: 0;
}

.conta__form {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 10px;
}

.conta__form .campo {
  flex: 1 1 auto;
  min-width: 0;
}

.conta__codigo {
  font-family: var(--fonte-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.aviso-neutro--erro {
  color: var(--cor-perigo);
}

/* ==========================================================================
   33. O livro na ficha (js/ui-livro.js): escolher origem, poderes e rituais,
   efeitos automáticos, poderes para o próximo teste e efeitos ativos
   ========================================================================== */
.dialogo--livro {
  width: min(920px, calc(100vw - 24px));
  max-height: calc(100dvh - 32px);
  overflow: hidden;
}

.dialogo--livro[open] {
  display: flex;
  flex-direction: column;
}

.dialogo--livro .dialogo__corpo {
  flex: 1 1 auto;
  min-height: 0;
}

.livro-ferramentas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 4px 0 10px;
}

.livro-ferramentas .busca {
  flex: 1 1 220px;
  min-width: 0;
}

.livro-ferramentas .abas {
  flex: 1 1 auto;
}

.livro-lista {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}

.livro-lista__grupo {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 14px 0 4px;
  padding: 6px 2px;
  font: 600 0.6875rem/1.4 var(--fonte-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--papel-3);
  background: color-mix(in srgb, var(--tinta-2) 96%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--cor-texto) 14%, transparent);
}

.livro-item {
  border-bottom: 1px solid color-mix(in srgb, var(--cor-texto) 10%, transparent);
}

.livro-item__linha {
  display: flex;
  align-items: center;
  gap: 8px;
}

.livro-item__alternar {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 48px;
  padding: 6px 4px;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}

.livro-item__seta {
  flex: none;
  width: 7px;
  height: 7px;
  margin: 0 3px;
  border-right: 1.5px solid var(--papel-3);
  border-bottom: 1.5px solid var(--papel-3);
  transform: rotate(-45deg);
  transition: transform var(--dur-2) var(--curva), border-color var(--dur-1) var(--curva);
}

.livro-item--aberto .livro-item__seta {
  transform: rotate(45deg);
}

.livro-item__alternar:hover .livro-item__titulo {
  color: var(--acento);
}

.livro-item__alternar:hover .livro-item__seta {
  border-color: var(--acento);
}

.livro-item__textos {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.livro-item__titulo {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.livro-item__meta {
  font: 500 0.7188rem/1.4 var(--fonte-mono);
  color: var(--papel-3);
  overflow-wrap: anywhere;
}

.livro-item__detalhes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 2px 6px 16px 31px;
}

.livro-item__detalhes[hidden] {
  display: none;
}

.livro-item__descricao,
.livro-texto__bloco {
  margin: 0;
  color: var(--papel-2);
  line-height: 1.55;
  max-width: 68ch;
}

.livro-texto__bloco strong {
  color: var(--cor-texto);
}

.livro-item__poder {
  padding: 8px 12px;
  background: color-mix(in srgb, var(--cor-texto) 5%, transparent);
  border-left: 2px solid var(--acento);
  border-radius: var(--raio-1);
}

.livro-item__rotulo,
.livro-texto__cabecalho,
.livro-auto__titulo {
  margin: 0 0 2px;
  font: 500 0.6875rem/1.4 var(--fonte-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--papel-3);
}

.livro-item__valor {
  margin: 0;
  font-weight: 600;
}

.livro-texto {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.livro-texto__nota {
  margin: 0;
  color: var(--papel-3);
  font-size: 0.875rem;
}

.livro-auto {
  padding: 8px 12px;
  border: 1px dashed color-mix(in srgb, var(--cor-texto) 22%, transparent);
  border-radius: var(--raio-1);
}

.livro-auto__lista {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  color: var(--papel-2);
}

.livro-auto__tipo {
  display: inline-block;
  margin-right: 4px;
  font: 600 0.625rem/1.4 var(--fonte-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--acento);
}

/* Botões ao lado de "+ Adicionar ..." */
.adicionar-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

/* Efeitos automáticos (página Habilidades) */
.livro-fontes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.livro-fonte {
  padding: 10px 12px;
  background: color-mix(in srgb, var(--cor-texto) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--cor-texto) 12%, transparent);
  border-radius: var(--raio-2);
}

.livro-fonte__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
}

.livro-fonte__titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  min-width: 0;
}

.livro-fonte__nome {
  overflow-wrap: anywhere;
}

.livro-fonte__efeitos {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font: 500 0.8125rem/1.4 var(--fonte-mono);
  color: var(--papel-2);
}

.livro-fonte__acoes,
.livro-preparados__lista {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 8px;
}

.livro-fonte__escolha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 0.875rem;
  color: var(--papel-2);
}

.livro-gasto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.livro-gasto__botao,
.livro-fonte__acoes .botao {
  height: auto;
  min-height: 40px;
  text-align: left;
  white-space: normal;
}

.livro-gasto__unidades {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--papel-3);
}

.botao--ligado {
  color: var(--cor-texto);
  background: color-mix(in srgb, var(--acento) 22%, transparent);
  border-color: var(--acento);
}

.livro-preparados {
  margin: 10px 0 6px;
}

.livro-ativos {
  margin-top: 12px;
}

@media (max-width: 719px) {
  .dialogo--livro {
    width: 100vw;
    max-height: 100dvh;
    border-radius: 0;
  }

  .livro-item__detalhes {
    padding-left: 12px;
  }
}

.conta__livro {
  margin: -6px 0 14px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--papel-2);
}

/* Poderes do livro em bloquinhos: cada grupo tem a cor do seu elemento */
.livro-bloco {
  --cor-grupo: var(--papel-3);
  --cor-grupo-2: var(--cor-grupo);
  position: relative;
  margin: 12px 0;
  padding: 0 0 4px 16px;
  border-radius: var(--raio-2);
  background: color-mix(in srgb, var(--cor-grupo) 7%, transparent);
}

.livro-bloco::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  border-radius: var(--raio-2) 0 0 var(--raio-2);
  background: linear-gradient(var(--cor-grupo), var(--cor-grupo-2));
}

.livro-bloco[data-elemento-livro="sangue"] { --cor-grupo: var(--el-sangue); }
.livro-bloco[data-elemento-livro="morte"] { --cor-grupo: var(--el-morte); }
.livro-bloco[data-elemento-livro="conhecimento"] { --cor-grupo: var(--el-conhecimento); }
.livro-bloco[data-elemento-livro="energia"] { --cor-grupo: var(--el-energia); }
.livro-bloco[data-elemento-livro="transmissao"] {
  --cor-grupo: var(--el-transmissao);
  --cor-grupo-2: color-mix(in srgb, var(--el-transmissao) 45%, var(--papel));
}
.livro-bloco[data-elemento-livro="intencao"] {
  --cor-grupo: var(--el-intencao);
  --cor-grupo-2: color-mix(in srgb, var(--el-intencao) 55%, var(--el-sangue));
}

.livro-bloco .livro-lista__grupo {
  margin: 0;
  padding: 8px 4px 6px;
  color: var(--cor-grupo);
  background: color-mix(in srgb, var(--cor-grupo) 8%, color-mix(in srgb, var(--tinta-2) 96%, transparent));
  border-bottom-color: color-mix(in srgb, var(--cor-grupo) 45%, transparent);
}

.livro-bloco .livro-item:last-child {
  border-bottom: 0;
}

/* Escolher do livro: abas em pílulas, filtros de uso e botão de ação (substitui os estilos genéricos .abas/.botao aqui) */
.livro-ferramentas {
  gap: 12px;
}

.livro-ferramentas .busca {
  flex: 1 1 100%;
}

.livro-abas,
.livro-filtros {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.livro-abas[hidden],
.livro-filtros[hidden] {
  display: none;
}

/* Filtros em grupos (Círculo, Elemento…): uma linha por grupo, com o rótulo na frente */
.livro-filtros {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

.livro-filtros__grupo {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.livro-filtros__grupo .livro-filtros__rotulo {
  flex: 0 0 5.5rem;
}

.livro-estado {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
}

.livro-estado__limpar {
  min-height: 32px;
  color: var(--papel-3);
}

.livro-estado__limpar:hover {
  color: var(--acento);
}

.livro-estado__limpar[hidden] {
  display: none;
}

.livro-resultado {
  margin: 0;
  font: 500 0.6875rem/1.4 var(--fonte-mono);
  letter-spacing: 0.06em;
  color: var(--papel-3);
}

.livro-aba {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 6px 16px;
  font: 600 0.875rem/1.2 var(--fonte-ui);
  color: var(--papel-2);
  background: color-mix(in srgb, var(--cor-texto) 5%, transparent);
  border: 1px solid var(--linha-2);
  border-radius: 999px;
  cursor: pointer;
  transition: color var(--dur-1) var(--curva), background-color var(--dur-1) var(--curva), border-color var(--dur-1) var(--curva), box-shadow var(--dur-1) var(--curva);
}

.livro-aba:hover {
  color: var(--papel);
  border-color: var(--acento);
}

.livro-aba[aria-pressed="true"] {
  color: var(--acento-texto);
  background: var(--acento);
  border-color: var(--acento);
  box-shadow: 0 6px 18px -10px var(--brilho);
}

.livro-aba__n {
  min-width: 1.7em;
  padding: 1px 7px;
  font: 600 0.6875rem/1.5 var(--fonte-mono);
  text-align: center;
  color: var(--papel-3);
  background: color-mix(in srgb, var(--cor-texto) 8%, transparent);
  border-radius: 999px;
}

.livro-aba[aria-pressed="true"] .livro-aba__n {
  color: var(--acento);
  background: var(--acento-texto);
}

.livro-filtros__rotulo {
  margin-right: 2px;
  font: 500 0.6875rem/1.4 var(--fonte-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--papel-3);
}

.livro-filtro {
  --cor-filtro: var(--acento);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 4px 14px 4px 10px;
  font: 600 0.8125rem/1.2 var(--fonte-ui);
  color: var(--papel-2);
  background: transparent;
  border: 1px solid var(--linha-2);
  border-radius: 999px;
  cursor: pointer;
  transition: color var(--dur-1) var(--curva), background-color var(--dur-1) var(--curva), border-color var(--dur-1) var(--curva);
}

.livro-filtro[data-livro-filtro="combate"] { --cor-filtro: var(--pv); }
.livro-filtro[data-livro-filtro="utilidade"] { --cor-filtro: var(--san); }
.livro-filtro[data-livro-grupo="elemento"][data-livro-filtro="sangue"] { --cor-filtro: var(--el-sangue); }
.livro-filtro[data-livro-grupo="elemento"][data-livro-filtro="morte"] { --cor-filtro: var(--el-morte); }
.livro-filtro[data-livro-grupo="elemento"][data-livro-filtro="conhecimento"] { --cor-filtro: var(--el-conhecimento); }
.livro-filtro[data-livro-grupo="elemento"][data-livro-filtro="energia"] { --cor-filtro: var(--el-energia); }
.livro-filtro[data-livro-grupo="elemento"][data-livro-filtro="medo"] { --cor-filtro: var(--el-medo); }

/* Sem nenhum item com os outros filtros como estão: borda tracejada (sem baixar o contraste), mas dá para marcar */
.livro-filtro--vazio {
  border-style: dashed;
}

.livro-filtro__ponto {
  width: 10px;
  height: 10px;
  border: 2px solid var(--cor-filtro);
  border-radius: 50%;
  transition: background-color var(--dur-1) var(--curva);
}

.livro-filtro:hover {
  color: var(--papel);
  border-color: var(--cor-filtro);
}

.livro-filtro[aria-pressed="true"] {
  color: var(--papel);
  background: color-mix(in srgb, var(--cor-filtro) 16%, transparent);
  border-color: var(--cor-filtro);
}

.livro-filtro[aria-pressed="true"] .livro-filtro__ponto {
  background: var(--cor-filtro);
}

.livro-filtro__n {
  font: 600 0.6875rem/1.4 var(--fonte-mono);
  color: var(--papel-3);
}

/* Botão de ação de cada linha: contorno leve com ícone; cheio ao passar o mouse */
.livro-acao {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 112px;
  min-height: 38px;
  padding: 4px 14px;
  font: 600 0.8125rem/1.2 var(--fonte-ui);
  color: var(--papel-2);
  background: transparent;
  border: 1px solid var(--linha-2);
  border-radius: 999px;
  cursor: pointer;
  transition: color var(--dur-1) var(--curva), background-color var(--dur-1) var(--curva), border-color var(--dur-1) var(--curva);
}

.livro-acao--primaria {
  color: var(--cor-texto);
  border-color: color-mix(in srgb, var(--acento) 70%, transparent);
  background: color-mix(in srgb, var(--acento) 12%, transparent);
}

.livro-acao--primaria:hover:not(:disabled) {
  color: var(--acento-texto);
  background: var(--acento);
  border-color: var(--acento);
}

.livro-acao:disabled {
  cursor: default;
  color: var(--papel-3);
  border-style: dashed;
}

.livro-acao__icone {
  position: relative;
  width: 12px;
  height: 12px;
  flex: none;
}

.livro-acao__icone--mais::before,
.livro-acao__icone--mais::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 1px;
}

.livro-acao__icone--mais::before {
  inset: 5px 0 auto 0;
  height: 2px;
}

.livro-acao__icone--mais::after {
  inset: 0 auto 0 5px;
  width: 2px;
}

.livro-acao__icone--ok::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0;
  width: 4px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(40deg);
}

/* Blocos por uso (combate, ambos, utilidade) */
.livro-bloco[data-elemento-livro="uso-combate"] { --cor-grupo: var(--pv); }
.livro-bloco[data-elemento-livro="uso-utilidade"] { --cor-grupo: var(--san); }
.livro-bloco[data-elemento-livro="uso-ambos"] { --cor-grupo: var(--acento); --cor-grupo-2: var(--san); }

@media (max-width: 719px) {
  /* No celular as abas e os filtros viram uma fileira que rola para o lado (ocupam pouco da tela) */
  .livro-abas,
  .livro-filtros__grupo {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .livro-abas::-webkit-scrollbar,
  .livro-filtros__grupo::-webkit-scrollbar {
    display: none;
  }

  .livro-aba,
  .livro-filtro,
  .livro-filtros__rotulo,
  .livro-filtros__grupo .livro-filtros__rotulo {
    flex: none;
  }

  .livro-aba {
    min-height: 40px;
    padding: 6px 12px;
  }

  .livro-acao {
    min-width: 96px;
    padding: 4px 10px;
  }

/* Limite de PE (PD) por turno: ao lado do indicador de PE, e o deslocamento no cabeçalho de "Defesa e testes" */
.vital__turno {
  grid-area: turno;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  margin: 0;
  cursor: help;
}

.vital__turno-rotulo {
  font: 500 0.625rem/1 var(--fonte-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--papel-3);
}

.vital__turno-valor {
  font: 600 0.8125rem/1 var(--fonte-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--papel-2);
}

.vital__turno--alerta .vital__turno-valor {
  color: var(--erro);
}

.secao__cabecalho--testes {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
}

.testes__desloc {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  font: 500 0.75rem/1.2 var(--fonte-mono);
  color: var(--papel-2);
  white-space: nowrap;
}

.testes__desloc-rotulo {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--papel-3);
}

@media (max-width: 719px) {
  .vital__turno {
    display: none;
  }

  .resumo-derivados {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .resumo-derivados dt {
    letter-spacing: 0.04em;
  }
}