/*   CSS FILE HEADER #
 *
 *   File:         [ficha.css]
 *   Author(s):    ['Pedro H.F Matias']
 *   Date:         ['07.10.2026']
 *   Version:      ['0.2.0']
 *   Description:  ['Ficha FAC after Daniel paper sheet (Ficha_FAC.png) and the storybook look of Fable: sepia ink, quill red, uncial titles (Dalingia), IM Fell text. Sits on top of tema.css and grimorio.css (book, shelf, sheets).']
 */

/* ---------- fonts (OFL, local; Dalingia is Daniel's) ---------- */
@font-face { font-family: 'Dalingia'; src: url('../../comum/fontes/dalingia.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'IM Fell English'; src: url('../../comum/fontes/im-fell-english-latin-400-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'IM Fell English'; src: url('../../comum/fontes/im-fell-english-latin-400-italic.woff2') format('woff2'); font-style: italic; font-display: swap; }
@font-face { font-family: 'IM Fell English SC'; src: url('../../comum/fontes/im-fell-english-sc-latin-400-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Pirata One'; src: url('../../comum/fontes/pirata-one-latin-400-normal.woff2') format('woff2'); font-display: swap; }

:root {
    --serif: 'IM Fell English', 'Cormorant Garamond', Georgia, serif;
    --titulo: 'IM Fell English SC', 'IM Fell English', Georgia, serif;
    --uncial: 'Dalingia', 'IM Fell English', serif;
    --gotico: 'Pirata One', 'IM Fell English', serif;
}

/* ---------- ink: sepia and quill red on parchment, pale gold on the bathed sheets ---------- */
.pagina, dialog, .dica-flutuante, .rolagem-resultado, .painel-rapido {
    --tinta: #3a2414;
    --tinta-vermelha: #b0261b;
    --tinta-azul: #23407a;
    --cera: #8e1b1b;
    --cera-luz: #c4483c;
    --ca-papel: color-mix(in srgb, var(--fundo) 82%, #fff3d6 18%);
}
[data-tom="escuro"] .pagina, [data-tom="escuro"] dialog, [data-tom="escuro"] .dica-flutuante, [data-tom="escuro"] .rolagem-resultado {
    --tinta: #ecdcb6;
    --tinta-vermelha: #ff7b6b;
    --tinta-azul: #9cc0ff;
    --ca-papel: color-mix(in srgb, var(--fundo) 86%, #000 14%);
}

.uncial { font-family: var(--uncial); text-transform: lowercase; letter-spacing: .02em; }
.ff-vermelho { color: var(--tinta-vermelha); }
/* the cartouche reads "name / campaign", one line each; ajustarPlacas (js/app.js) shrinks the font to fit */
.cp-ficha { display: block; margin-top: .15em; font: .9em/1.15 var(--uncial); letter-spacing: .04em; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
#listaPersonagens .capa .placa { padding: 0 1.15em 0 1em; }
#listaPersonagens .capa .cp-nome { display: block; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
#listaPersonagens .capa .duas-linhas { display: -webkit-box; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.05; }
/* the FAC version is a pencilled note beside "Ficha de", not a pill */
.versao-fac { margin-left: .4em; font: var(--e-legenda); color: var(--e-tinta-apagada); }
.versao-fac:not(:empty)::before { content: '· '; }
.aviso-leitura { margin: 0 0 16px; padding: .7em 1em; border: 1px solid var(--aviso); border-radius: 4px; color: var(--aviso); font-style: italic; }
/* the campaign combat of the Mesa (etapa 3b): a red ribbon over the sheet while it fights */
.faixa-combate { display: flex; align-items: baseline; gap: .5em; margin: 0 0 14px; padding: .45em 1em; border: 1px solid color-mix(in srgb, #8a1c14 55%, transparent); border-radius: 4px;
    background: linear-gradient(90deg, color-mix(in srgb, #8a1c14 18%, transparent), transparent); color: var(--e-tinta, inherit); font-family: var(--titulo, serif); letter-spacing: .03em; }
.faixa-combate b { color: #8a1c14; font-family: var(--serif); font-variant-numeric: lining-nums; }
.faixa-combate small { margin-left: auto; font-family: var(--serif); font-style: italic; letter-spacing: 0; opacity: .8; }
.faixa-combate-espadas { color: #8a1c14; font-size: 1.15em; }
[data-tom="escuro"] .faixa-combate b, [data-tom="escuro"] .faixa-combate-espadas { color: #e86a55; }
/* the boxes of the turn on the ribbon (26/10): spent by the plays of the sheet or by the master on the Mesa */
.faixa-combate:has(.luta-casas) { flex-wrap: wrap; align-items: center; }
.faixa-combate:has(.luta-casas) small { flex: 1 1 260px; text-align: right; }
.faixa-combate-titulo { white-space: nowrap; }
.luta-casas { display: inline-flex; flex: none; gap: 4px; margin-left: .6em; }
.luta-casa { padding: .05em .55em; border: 1px solid color-mix(in srgb, #8a1c14 45%, transparent); border-radius: 3px; font: .85em var(--serif); letter-spacing: 0; opacity: .75; }
.luta-casa small { margin: 0 0 0 .2em; font-style: normal; opacity: .8; }
.luta-casa.meia { background: color-mix(in srgb, #8a1c14 14%, transparent); opacity: 1; }
.luta-casa.gasta { background: #8a1c14; border-color: #8a1c14; color: #f6ead2; opacity: 1; text-decoration: line-through; text-decoration-thickness: 1px; }
.luta-casa.excedida { outline: 2px solid #c8901c; outline-offset: 1px; }
[data-tom="escuro"] .luta-casa.gasta { background: #b5372a; border-color: #b5372a; }
/* a sheet of an archived campaign shows only what can be read (body.ficha-arquivada, app.js renderTopo): no folder strip, no roll
   bar, no button of the pages but their tabs; fields and the clickable marks of the sheet stop answering (the tooltips stay) */
body.ficha-arquivada #faixaPasta, body.ficha-arquivada .rolagem-barra, body.ficha-arquivada #painelRapido, body.ficha-arquivada .ev-subir,
body.ficha-arquivada #bancada, body.ficha-arquivada .id-retrato .dica, body.ficha-arquivada #btnTema, body.ficha-arquivada .menu-editar { display: none !important; }
body.ficha-arquivada .painel-aba ::placeholder { color: transparent; }
body.ficha-arquivada .painel-aba button:not([role="tab"]):not([role="tablist"] button):not(.aba):not(.avatar) { display: none !important; }
body.ficha-arquivada .painel-aba :is(input, select, textarea, label, [data-pericia], [data-ff-efeito], [data-atributo], .ff-marca, .pe-gotas),
body.ficha-arquivada #avatarTopo, body.ficha-arquivada .painel-aba .avatar { pointer-events: none; }
body.ficha-arquivada .painel-aba :is(input, select, textarea) { background: transparent; border-color: transparent; box-shadow: none; appearance: none; }
body.ficha-arquivada .aviso-leitura.arquivada { margin-top: 4px; }

/* ---------- a dead character (ficha.morto; app.js estaMorta, marcarMorta) ---------- */
/* the shelf: every leather face drained to ash and dimmed (one filter per face: a filter on the 3D group would flatten it) */
#listaPersonagens .livro-fechado.morto :is(.frente, .verso, .lombada, .contracapa, .corte, .miolo, .fecho-aba, .fecho-volta) { filter: grayscale(1) brightness(.5) contrast(.95); }
#listaPersonagens .livro-fechado.morto .medalhao-capa { opacity: .55; }
#listaPersonagens .livro-fechado.morto .medalhao-capa::before { animation-play-state: paused; }
#listaPersonagens .livro-fechado.morto .placa { opacity: .62; }
/* no gold nor violet glow on hover: the dead book only answers with the cursor */
#listaPersonagens .livro-fechado.morto:hover .capa .ornamento { color: #e2c070; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .75)); }
#listaPersonagens .livro-fechado.morto:hover .medalhao-capa::before { filter: sepia(1) saturate(2.4) brightness(.95) drop-shadow(0 1px 0 rgba(0, 0, 0, .7)); }
#listaPersonagens .livro-fechado.morto:focus-visible .frente { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55), inset 0 0 1.4em rgba(0, 0, 0, .62), 0 0 0 2px rgba(220, 214, 204, .7); }
#listaPersonagens .livro-slot.morto .livro-sombra { opacity: .55; }
/* a black mourning ribbon across the upper corner of the cover, clipped by it */
.capa .luto {
    position: absolute; top: 9%; right: -27%; width: 78%; height: 1.5em; transform: rotate(42deg); pointer-events: none;
    background: linear-gradient(180deg, #3a3a3a 0, #111 18%, #262626 46%, #050505 54%, #1a1a1a 82%, #000 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .7), 0 -1px 0 rgba(255, 255, 255, .08);
}
.capa .luto::before { content: ''; position: absolute; inset: .22em 0; border-top: 1px dashed rgba(255, 255, 255, .16); border-bottom: 1px dashed rgba(255, 255, 255, .16); }
/* the stamp pressed into the leather, over the medallion */
.capa .selo-obito {
    position: absolute; left: 44%; top: 57%; transform: translate(-50%, -50%) rotate(-12deg); pointer-events: none;
    padding: .12em .5em .08em; font: 700 .9em/1.1 var(--titulo); letter-spacing: .26em; text-indent: .26em; text-transform: uppercase;
    color: rgba(246, 238, 222, .92); border: 3px double rgba(246, 238, 222, .8); border-radius: 2px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .85); box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(0, 0, 0, .35);
    background: rgba(10, 10, 10, .32);
}
/* the brass label turns to tarnished pewter: "☠ nível N · morta" */
#listaPersonagens .livro-slot.morto .livro-etiqueta {
    color: #ece7de; text-shadow: 0 1px 0 rgba(0, 0, 0, .65); opacity: .9;
    background: linear-gradient(180deg, #a19c94, #66625c 55%, #3d3a36);
    box-shadow: 0 0 0 1px rgba(15, 15, 15, .7), 0 2px 3px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .3);
}
#listaPersonagens .livro-slot.morto .livro-etiqueta::before, #listaPersonagens .livro-slot.morto .livro-etiqueta::after { background: #26241f; }
/* the open sheet: the notice of a dead character, with the way back to life */
.aviso-leitura.morta { display: flex; align-items: center; justify-content: space-between; gap: .6em 1.2em; flex-wrap: wrap; margin-top: 4px; font-style: normal;
    color: var(--e-tinta, inherit); border-color: color-mix(in srgb, currentColor 35%, transparent); background: color-mix(in srgb, #000 6%, transparent); }
.aviso-leitura.morta b { font-family: var(--gotico); font-weight: 400; font-size: 1.15em; margin-right: .3em; }
body.ficha-morta .medalhao-circulo, body.ficha-morta .medalhao-aro { filter: grayscale(1) brightness(.8); animation-play-state: paused; }
.aba .cont.alerta { background: color-mix(in srgb, var(--aviso) 70%, #000); color: #fff4dc; }
.topo h1#nomePersonagem { font-family: var(--gotico); font-weight: 400; letter-spacing: .01em; }

/* ---------- the book header: medallion + name, then ONE ruler of actions across the whole page ----------
   The ruler: search · Percepção · Descanso · Dados on the left, the Livro menu · Fechar on the right (one line in 1366).
   .rolagem-barra and .topo-acoes dissolve (display: contents) so their buttons share one flex line; the
   medallion overlaps the first rows of .topo-nome, whose name lines are indented past it. */
#app .topo { display: grid; grid-template-columns: 114px minmax(0, 1fr); align-items: start; gap: 0; min-height: 0; padding-right: 0; }
#app .topo .medalhao { grid-column: 1; grid-row: 1; position: relative; z-index: 1; }
#app .topo-nome { grid-column: 1 / -1; grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; }
#app .topo-nome > .topo-marca, #app .topo-nome > h1, #app .topo-nome > .topo-floreio { flex: 0 0 auto; width: calc(100% - 146px); margin-left: 146px; }
#app .topo-nome > .topo-marca { margin-top: 6px; }
#app .topo-nome > .topo-floreio { width: 290px; margin: 0 calc(100% - 290px - 92px) 4px 92px; }
#app .topo-acoes, #app .rolagem-barra { display: contents; }
#app .topo-nome .btn-p { padding: .3em .6em; }
#app .busca-pericia { order: 1; }
#app #btnPercepcao { order: 2; }
#app #btnDescanso, #app #btnDados { order: 3; }
#app .livro-menu { order: 4; margin-left: auto; }
#app #btnFechar { order: 5; }
/* the ruler sits a gap under the name block */
#app .topo-nome .busca-pericia, #app .topo-nome .btn-p { margin-top: 14px; }
/* every page but the sheet and the notes: the header starts under the hanging ribbons, so "Ficha de" and the name are never covered */
body:not([data-aba="personagem"], [data-aba="notas"]) #app .topo { padding-top: 36px; }
/* the Grimório page hangs seven wider ribbons, reaching over "Grimório de" in 1366: a little more room */
body[data-aba="grimorio"] #app .topo { padding-top: 52px; }

/* on the sheet page the name and the portrait live on the sheet itself, on the Notas page in the Nome field and the portrait
   of the identity block: the book header shrinks to the ruler (the name is not written three times on the screen) */
body:is([data-aba="personagem"], [data-aba="notas"]) .topo .medalhao, body:is([data-aba="personagem"], [data-aba="notas"]) .topo-marca,
body:is([data-aba="personagem"], [data-aba="notas"]) #nomePersonagem, body:is([data-aba="personagem"], [data-aba="notas"]) .topo-floreio { display: none; }
/* without the medallion and the name the ruler would sit under the hanging ribbons: push it below them */
body:is([data-aba="personagem"], [data-aba="notas"]) .topo-nome { padding-top: 44px; }

/* low screens (1366x768): on every page but Personagem and Notas the header, the ruler and the vitals took ~420 of 768px.
   A smaller medallion, no flourish, a shorter name and tighter gaps give the page ~80px back */
@media (max-height: 800px) {
    body:not([data-aba="personagem"], [data-aba="notas"]) #app .topo { grid-template-columns: 84px minmax(0, 1fr); padding-bottom: 8px; margin-bottom: 10px; }
    body:not([data-aba="personagem"], [data-aba="notas"]) #app .topo .medalhao { width: 84px; height: 84px; }
    body:not([data-aba="personagem"], [data-aba="notas"]) #app .topo .medalhao-circulo { inset: -20px; }
    body:not([data-aba="personagem"], [data-aba="notas"]) #app .topo .avatar-g { width: 62px; height: 62px; font-size: 1.25em; }
    body:not([data-aba="personagem"], [data-aba="notas"]) #app .topo-nome > :is(.topo-marca, h1) { width: calc(100% - 108px); margin-left: 108px; }
    body:not([data-aba="personagem"], [data-aba="notas"]) #app .topo-nome > .topo-marca { margin-top: 2px; }
    body:not([data-aba="personagem"], [data-aba="notas"]) #app .topo-nome > h1 { font-size: 2.1em; }
    body:not([data-aba="personagem"], [data-aba="notas"]) #app .topo-nome > .topo-floreio { display: none; }
    body:not([data-aba="personagem"], [data-aba="notas"]) #app .topo-nome :is(.busca-pericia, .btn-p) { margin-top: 6px; }
    body:not([data-aba="personagem"], [data-aba="notas"]) .livro > .folha > .faixa-vitais { margin-bottom: 10px; }
}

/* the data folder, once connected, is a small mark in the top margin of the page (a wide banner only when it needs the player) */
#app .faixa-pasta.conectada {
    position: absolute; top: 12px; left: 70px; z-index: 2; gap: .45em; flex-wrap: nowrap; padding: 0; border: 0; background: none;
    font: var(--e-legenda); color: var(--e-tinta-apagada);
}
#app .faixa-pasta.conectada .ponto { width: .5em; height: .5em; box-shadow: none; }
#app .faixa-pasta.conectada .texto { flex: none; min-width: 0; font-size: 0; color: inherit; }
#app .faixa-pasta.conectada .texto strong:first-of-type { font: var(--e-legenda); color: var(--e-tinta-suave); }
#app .faixa-pasta.conectada .texto strong:first-of-type::before { content: 'salvando em '; color: var(--e-tinta-apagada); }
#app .faixa-pasta.conectada .texto strong ~ strong { display: none; }
#app .faixa-pasta.conectada .btn { min-height: 24px; padding: 0 .4em; border: 0; background: none; box-shadow: none; font: var(--e-legenda); color: var(--e-tinta-apagada); text-decoration: underline dotted; text-underline-offset: .2em; }
#app .faixa-pasta.conectada .btn:hover { color: var(--e-tinta-vermelha); }
#app .faixa-pasta.conectada .btn:focus-visible { box-shadow: var(--e-foco); }

/* Evolução is only for leveling up: no rolls up there. They keep their room (visibility), so the ruler, Livro and Fechar stay
   on the same line as on every other page instead of jumping up into the name block */
body[data-aba="evolucao"] .busca-pericia, body[data-aba="evolucao"] #btnPercepcao, body[data-aba="evolucao"] #btnDescanso, body[data-aba="evolucao"] #btnDados { visibility: hidden; }
/* the Grimório page (apps/grimorio inside the book): no skill rolls; the Descanso stays (the one rest, it also ends the spells counted in turns) */
body[data-aba="grimorio"] .busca-pericia, body[data-aba="grimorio"] #btnPercepcao { display: none; }
.marca-grimorio { display: none; }
body[data-aba="grimorio"] .marca-ficha, body[data-aba="grimorio"] .versao-fac { display: none; }
body[data-aba="grimorio"] .marca-grimorio { display: inline; }
.rolagem-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.rolagem-barra .segmentos button { padding: .25em .7em; font: italic 1em var(--serif); }

/* ---------- ribbons: their silks are one table for both books (tema.css --fita-*, mapped in grimorio.css) ---------- */
.abas { right: 56px; gap: 10px; }
.aba { min-width: 104px; }
.aba.oculto { display: none; }
/* hover pulls the silk: its tail grows 6px by clip-path (paint only, nothing reflows). The top stays pinned, so the
   click area only grows under the pointer (a translate carried the ribbon away from a pointer near its top edge: the
   hover flickered and a press there lost its click). The 6px are always laid out, hidden at rest.
   The active ribbon keeps its longer cut. */
#app .abas .aba { transition: clip-path var(--e-dur-base) var(--e-ease-tinta), filter var(--e-dur-rapido); }
#app .abas .aba:not(.ativa) { padding-bottom: 36px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), 50% calc(100% - 21px), 0 calc(100% - 6px)); }
#app .abas .aba:not(.ativa):hover, #app .abas .aba:not(.ativa):focus-visible { clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 15px), 0 100%); }
#app .abas .aba:active { filter: brightness(1.05); }

/* ---------- skill search ---------- */
.busca-pericia { position: relative; }
.busca-pericia .novo-campo { width: 300px; }
.busca-pericia input { width: 100%; background: color-mix(in srgb, var(--tinta) 6%, transparent); color: var(--tinta); border: 1px solid color-mix(in srgb, var(--tinta) 35%, transparent); font: italic 1.05em var(--serif); }
.busca-pericia input::placeholder { color: color-mix(in srgb, var(--tinta) 55%, transparent); }
.busca-pericia input:focus { border-color: var(--tinta-vermelha); outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--tinta-vermelha) 25%, transparent); }
.busca-pericia .ic { color: var(--tinta); opacity: .7; }
.busca-resultados {
    position: absolute; left: 0; top: calc(100% + 6px); z-index: 960; width: 380px; margin: 0; padding: 6px; list-style: none; display: none;
    border: 1px solid var(--e-papel-borda); border-radius: var(--e-raio-papel); box-shadow: var(--e-sombra-popover); color: var(--tinta);
    background: var(--g-papiro, none), var(--papel, #e9dab3);
}
.busca-resultados.visivel { display: block; }
.busca-resultados li { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; padding: .35em .5em; border-radius: 3px; cursor: pointer; font: 1.05em var(--serif); }
.busca-resultados li.sel, .busca-resultados li:hover { background: color-mix(in srgb, var(--tinta-vermelha) 12%, transparent); }
.busca-resultados li.vazio { display: block; font-style: italic; opacity: .7; cursor: default; }
.busca-resultados .br-icone svg { width: 26px; height: 26px; display: block; color: var(--tinta); fill: currentColor; }
.busca-resultados small { font-style: italic; opacity: .7; }
.busca-resultados b { font-weight: 400; color: var(--tinta-vermelha); }

/* ---------- the quick panel (how to roll, life and mana, theme) ---------- */
.painel-rapido {
    position: fixed; z-index: 1000; width: 330px; padding: 14px 16px 10px; display: none; color: var(--tinta);
    border: 1px solid var(--e-papel-borda); border-radius: var(--e-raio-papel); box-shadow: var(--e-sombra-popover), inset 0 0 22px rgba(90, 55, 15, .14);
    background: var(--g-papiro, none), var(--papel, #e9dab3);
}
.painel-rapido.visivel { display: block; }
.pr-titulo { font: 1.6em/1.1 var(--uncial); text-transform: lowercase; }
.pr-titulo small { font: italic .62em var(--serif); color: var(--tinta-vermelha); text-transform: none; }
.pr-titulo.hp small { color: var(--tinta-vermelha); }
.pr-titulo.mp small { color: var(--tinta-azul); }
.pr-mods { margin: .3em 0 0; font: italic .92em var(--serif); opacity: .8; }
.painel-rapido label { text-transform: none; letter-spacing: 0; }
.pr-bonus, .pr-tipo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; font: italic 1em var(--serif); }
.pr-bonus input { width: 5em; }
.pr-tipo select { flex: 1; max-width: 60%; }
.pr-check { display: flex; align-items: center; gap: 6px; margin-top: 8px; font: italic .95em var(--serif); cursor: pointer; }
.pr-check small { opacity: .7; }
.pr-rolar { display: flex; gap: 6px; margin-top: 12px; }
.pr-rolar .btn { flex: 1; justify-content: center; flex-direction: column; gap: 0; line-height: 1.1; }
.pr-rolar .btn small { font: italic .78em var(--serif); opacity: .8; }
/* disadvantage / advantage: cells of a paper ruler (dotted ink border), the roll in gold is the one action */
.pr-rolar .btn-fantasma { border: 1px dashed var(--e-pauta); border-radius: var(--e-raio-controle); color: var(--e-tinta); font-weight: 400; font-style: italic; }
.pr-rolar .btn-fantasma:hover { border-style: solid; border-color: var(--e-tinta); background: color-mix(in srgb, var(--e-papiro-sombra) 40%, transparent); box-shadow: none; }
.pr-atalho { margin: 8px 0 0; font: var(--e-legenda); color: var(--e-tinta-apagada); text-align: center; }
/* graphic mode: a compact paper ruler on one line (330px panel: five cells, Automático the widest) */
.pr-qualidade-bloco { margin-top: 12px; padding-top: 4px; border-top: 1px dotted var(--e-pauta); }
.painel-rapido .segmentos.pr-qualidade { display: flex; flex-wrap: nowrap; width: 100%; }
.painel-rapido .pr-qualidade button { flex: 1 1 auto; min-width: 0; padding: .34em .3em; font: italic .86em/1.2 var(--serif); white-space: nowrap; }
.pr-qualidade-info { margin-top: 6px; font-variant-numeric: tabular-nums; text-wrap: balance; overflow-wrap: anywhere; }
/* the skill tip and the quick panel never pile up: the open panel wins */
body:has(#painelRapido.visivel) #dicaFlutuante { display: none; }
.pr-valor { display: grid; grid-template-columns: 44px 1fr 44px; gap: 6px; margin-top: 10px; }
.pr-valor input { text-align: center; font: 1.8em var(--serif); padding: .1em; }
.pr-chips { display: flex; gap: 4px; margin-top: 6px; }
.pr-chips button { flex: 1; padding: .2em 0; border: 1px solid color-mix(in srgb, var(--tinta) 35%, transparent); border-radius: 3px; background: none; color: var(--tinta); font: 1em var(--serif); cursor: pointer; }
.pr-chips button:hover { border-color: var(--tinta-vermelha); color: var(--tinta-vermelha); }
.pr-grupo { margin: 10px 0 4px; font: italic .9em var(--serif); opacity: .75; }
/* the quick menu of conditions (effects circles of the sheet) */
.painel-rapido.largo { width: 470px; }
.pr-conds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.pr-cond { padding: .25em .45em; border: 1px solid color-mix(in srgb, var(--tinta) 30%, transparent); border-left-width: 4px; border-radius: 3px; background: none; color: var(--tinta);
    font: .95em/1.2 var(--serif); text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-cond.malefica { border-left-color: var(--tinta-vermelha); }
.pr-cond.benefica { border-left-color: var(--ouro); }
.pr-cond:hover { background: color-mix(in srgb, var(--tinta-vermelha) 10%, transparent); }
.pr-cond.tem { background: color-mix(in srgb, var(--ouro) 18%, transparent); font-weight: 600; }
.pr-cond b { float: right; color: var(--tinta-vermelha); }
.pr-cond-texto { max-height: 9em; overflow: auto; font-style: normal; }
.pr-livre { margin-top: 10px; font: italic .92em var(--serif); }
.pr-livre summary { cursor: pointer; }
.pr-livre summary small { opacity: .7; }
.pr-livre-campos { display: grid; grid-template-columns: 1fr 4em 7em auto; gap: 5px; margin-top: 6px; }
/* the Dados panel and the marks of the resources box (etapa 3c) */
.painel-rapido .segmentos.pr-abas { display: inline-flex; margin: 8px 0 10px; }
.painel-rapido .pr-abas button { padding: .25em .9em; font: italic .95em var(--serif); }
.pr-livres { margin-bottom: 4px; }
.painel-rapido .cb-historico, .painel-rapido .cb-registro { max-height: 15em; overflow: auto; }
.pr-marcas { max-height: 22em; overflow: auto; margin-top: 8px; }
.pr-marcas .cb-marcas li { margin-bottom: 6px; }
.pr-turno { margin-top: 12px; }
.pr-previa { font-style: italic; }
.pr-link { padding: 0; border: 0; background: none; color: var(--tinta-vermelha); font: inherit; text-decoration: underline; cursor: pointer; }
.pr-amostras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 6px; }
/* the swatch is the paper itself; its name is written under it on the panel paper, 13px */
.pr-amostra { position: relative; height: auto; padding: 32px 0 0; border: 2px solid color-mix(in srgb, var(--tinta) 30%, transparent); border-radius: var(--e-raio-controle); cursor: pointer; overflow: hidden; }
.pr-amostra span { display: block; padding: 2px 3px 1px; background: var(--g-papiro, none), var(--papel, #e9dab3); color: var(--e-tinta); font: italic 13px/1.25 var(--serif); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-amostra.capa { background: var(--couro); }
.pr-amostra.ativa { border-color: var(--tinta-vermelha); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tinta-vermelha) 40%, transparent); }
.pr-amostra:hover { border-color: var(--tinta); }
.pr-amostra:focus-visible, .pr-chips button:focus-visible, .pr-cond:focus-visible, .pr-chip-dado:focus-visible { outline: none; box-shadow: var(--e-foco); }

/* ================= THE PAPER SHEET ================= */
.folha-fac { position: relative; width: 100%; container-type: inline-size; color: var(--tinta); font-family: var(--serif); }
.folha-fac > *, .ff-cabeca > * { position: absolute; }
.ff-cabeca { inset: 0; pointer-events: none; }
.ff-cabeca > * { pointer-events: auto; }
/* a coffee ring and some foxing, as on the paper sheet */
.folha-fac:not(.sem-cabeca)::before {
    content: ''; position: absolute; left: 52%; top: 76%; width: 26%; aspect-ratio: 1; pointer-events: none; z-index: 0;
    background:
        radial-gradient(circle at 50% 50%, transparent 58%, color-mix(in srgb, #6b3e14 26%, transparent) 61%, color-mix(in srgb, #6b3e14 10%, transparent) 64%, transparent 68%),
        radial-gradient(ellipse 30% 22% at 78% 70%, color-mix(in srgb, #6b3e14 18%, transparent), transparent 70%);
    opacity: .8; mix-blend-mode: multiply;
}
[data-tom="escuro"] .folha-fac::before { display: none; }

.ff-molduras { inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ff-molduras path { fill: none; stroke: var(--tinta); stroke-width: 3.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.ff-molduras .ff-pontos path { stroke-width: 2.6; stroke-dasharray: 1 7; stroke-linecap: round; opacity: .75; }

.ff-gotico { font: 5.4cqw/1 var(--gotico); color: var(--tinta); }
.ff-nome { min-height: 3.4cqw; margin-top: .4cqw; padding-bottom: .2cqw; border-bottom: .28cqw dotted color-mix(in srgb, var(--tinta) 70%, transparent); font: italic 2.6cqw/1.3 var(--serif); }
.ff-linha-texto { margin-top: 1.4cqw; font: italic 2.2cqw/1.15 var(--serif); cursor: help; }
.ff-linha-texto .ff-vermelho { font-size: 1.15em; font-style: normal; }
.ff-efeitos-rotulo { cursor: default; }
.ff-efeitos { display: grid; grid-template-columns: repeat(4, 6.6cqw); gap: .2cqw .6cqw; margin-top: .6cqw; }
.ff-efeitos i { width: 6.6cqw; aspect-ratio: 1; border: .3cqw dotted color-mix(in srgb, var(--tinta) 75%, transparent); border-radius: 50%; cursor: pointer; transition: border-color .2s, background .2s; }
.ff-efeitos i[data-ff-efeito="vazio"]:hover { border-color: var(--tinta-vermelha); background: color-mix(in srgb, var(--tinta-vermelha) 8%, transparent); }
.ff-efeitos i[data-ff-efeito="vazio"]:hover::after { content: '+'; display: grid; place-items: center; height: 100%; color: var(--tinta-vermelha); font: 3.2cqw/1 var(--serif); }
.ff-efeitos i:nth-child(n + 5) { transform: translateX(3.6cqw); }
.ff-brasao { pointer-events: none; filter: sepia(1) saturate(.7) brightness(.5) contrast(1.4); mix-blend-mode: multiply; opacity: .92; }
[data-tom="escuro"] .ff-brasao { filter: invert(1) sepia(.6) brightness(1.05); mix-blend-mode: screen; }
.ff-nivel {
    display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1; cursor: help;
    border: .36cqw solid var(--tinta); border-radius: 50%; background: color-mix(in srgb, var(--tinta) 6%, transparent);
}
.ff-nivel span { font: 2.4cqw/1 var(--uncial); }
.ff-nivel b { font: 5cqw/1 var(--serif); color: var(--tinta-vermelha); font-weight: 400; }
.ff-foto {
    display: grid; place-items: center; padding: .5cqw; cursor: pointer; overflow: hidden; color: var(--tinta);
    border: .3cqw dotted color-mix(in srgb, var(--tinta) 75%, transparent); background: none;
}
.ff-foto em { font: italic 2.6cqw var(--serif); grid-area: 1 / 1; }
.ff-foto .avatar { grid-area: 1 / 1; width: 100%; height: 100%; border-radius: 2px; box-shadow: none; background-size: cover; background-position: center top; font-size: 4cqw; opacity: 0; }
.ff-foto.tem .avatar { opacity: 1; filter: sepia(.35) contrast(1.05); }
.ff-foto.tem em { display: none; }
.ff-foto:hover { border-color: var(--tinta-vermelha); }
.ff-dados { display: flex; justify-content: space-between; font: italic 2.2cqw var(--serif); }
.ff-dados span { cursor: help; }
.ff-dados b { font-weight: 400; font-style: normal; }
.ff-tris svg { width: 100%; display: block; overflow: visible; }
.ff-tris g { cursor: help; }
.ff-tri { fill: none; stroke: var(--tinta); stroke-width: 6; stroke-linejoin: round; }
.ff-tri.fino { stroke-width: 2.2; }
.ff-tri-rotulo { font: 25px var(--uncial); fill: var(--tinta); text-anchor: middle; }
.ff-tri-valor { font: 50px var(--serif); fill: var(--tinta-vermelha); text-anchor: middle; }
.ff-tris g.bonus .ff-tri-valor { text-decoration: underline; text-decoration-style: wavy; text-decoration-thickness: 2px; }

.ff-circulo { aspect-ratio: 1; z-index: 1; }
.ff-coluna { list-style: none; margin: 0; padding: 0; z-index: 2; transition: opacity .3s; }
.ff-coluna.apagada { opacity: .32; }
/* min-height, not height: a name in two lines (Combate Desarmado, Contar Histórias) gets its own room instead of running
   over the next skill; a one-line name keeps the row of the paper sheet */
.ff-pericia { display: flex; align-items: center; gap: .35cqw; min-height: 2.69cqw; font: italic 1.8cqw/1 var(--serif); transition: opacity .2s; }
/* long names break in two lines, as written on the paper sheet; the name rolls the skill */
:root { --cursor-dado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Crect x='3' y='3' width='20' height='20' rx='4' fill='%23f3e6c4' stroke='%233a2412' stroke-width='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='2' fill='%237a1a12'/%3E%3Ccircle cx='13' cy='13' r='2' fill='%237a1a12'/%3E%3Ccircle cx='17.5' cy='17.5' r='2' fill='%237a1a12'/%3E%3C/svg%3E") 13 13, pointer; }
/* a skill rolls by its name: the cursor turns into a die and the name is underlined in red ink */
.ff-pericia { cursor: var(--cursor-dado); }
.ff-pericia .ff-marca { cursor: pointer; }
.ff-pericia-nome { max-width: 10.6cqw; line-height: .95; text-wrap: balance; opacity: .9; transition: opacity .2s, color .2s; }
.ff-pericia:hover .ff-pericia-nome { opacity: 1; color: var(--tinta-vermelha); text-decoration: underline color-mix(in srgb, var(--tinta-vermelha) 55%, transparent); text-underline-offset: .2em; }
.ff-pericia.tem .ff-pericia-nome { opacity: 1; }
/* keyboard (Tab walks the skills, Enter rolls): the name inked as on hover, inside the same red ring as the attributes and the ruler */
.ff-pericia:focus-visible { outline: none; border-radius: var(--e-raio-controle); background: color-mix(in srgb, var(--e-papiro-sombra) 45%, transparent); box-shadow: var(--e-foco); }
.ff-pericia:focus-visible .ff-pericia-nome { opacity: 1; color: var(--tinta-vermelha); }
.ff-coluna.foco .ff-pericia-nome { opacity: 1; color: var(--tinta-vermelha); }
.ff-marca { display: inline-flex; flex: none; cursor: pointer; }
/* the skill search lights the match and fades the rest */
.ff-pericia.achada .ff-pericia-nome, .pe-linha.achada .pe-nome { color: var(--tinta-vermelha); opacity: 1; text-decoration: underline wavy color-mix(in srgb, var(--tinta-vermelha) 60%, transparent); }
.ff-pericia.sem-busca, .pe-linha.sem-busca { opacity: .3; }
.tri3 { width: 2.5cqw; height: auto; display: block; overflow: visible; }
.tri3-alvo { fill: transparent; }
.tri3-borda { fill: none; stroke: var(--tinta); stroke-width: 1.8; stroke-linejoin: round; }
.tri3-parte { fill: transparent; stroke: var(--tinta); stroke-width: 1.4; stroke-linejoin: round; transition: fill .2s; }
.tri3-parte.cheia { fill: var(--tinta); }
.tri3-parte.lacrada { stroke-dasharray: 2 2; stroke-opacity: .5; }
.tri3-miolo { fill: transparent; stroke: var(--tinta); stroke-width: 1.4; stroke-linejoin: round; transition: fill .3s; }
.tri3.completa .tri3-miolo { fill: url(#g-ouro-tri) #d9a937; stroke: #7a5414; }
.tri3.completa .tri3-borda { stroke: #7a5414; }
/* hover shows where the next click lands: the first empty triangle */
.ff-marca:hover .tri3-parte:not(.cheia):not(.lacrada), .pe-gotas:hover .tri3-parte:not(.cheia):not(.lacrada) { fill: color-mix(in srgb, var(--tinta) 14%, transparent); }
.ff-marca:hover .tri3-borda, .pe-gotas:hover .tri3-borda { stroke: var(--tinta-vermelha); }

.ff-espacos { display: grid; grid-template-columns: 1fr 1fr; cursor: help; }
.ff-espacos span { display: flex; flex-direction: column; align-items: center; padding-top: .6cqw; font: italic 1.6cqw/1.1 var(--serif); text-align: center; }
.ff-espacos b { margin-top: .6cqw; font: 3.6cqw/1 var(--serif); color: var(--tinta-vermelha); font-weight: 400; }
.ff-caixa { z-index: 1; }
.ff-caixa-titulo { position: absolute; left: 0; right: 0; bottom: 1.4cqw; text-align: center; font: italic 2.5cqw var(--serif); }
.ff-caixa { --ff-armas-colunas: 2.2fr 1.05fr 1.35fr .9fr; }
.ff-armas-cabeca { display: grid; grid-template-columns: var(--ff-armas-colunas); justify-items: center; padding: 1.6cqw 1.2cqw 0; font: italic 1.75cqw var(--serif); }
.ff-armas, .ff-inventario { padding: 1.2cqw; }
.ff-recursos { margin: 0; padding: 1.8cqw 2cqw 0; display: flex; flex-direction: column; gap: .8cqw; font: italic 1.75cqw/1.25 var(--serif); }
.ff-recursos div { display: flex; gap: .8cqw; border-bottom: .2cqw dotted color-mix(in srgb, var(--tinta) 45%, transparent); padding-bottom: .4cqw; }
.ff-recursos dt { flex: none; opacity: .75; }
.ff-recursos dd { margin: 0; color: var(--tinta-vermelha); font-style: normal; }
.ff-recursos dd small { color: var(--tinta); opacity: .7; font-style: italic; }
.ff-recursos .ff-ouro { align-items: center; cursor: help; }
.ff-recursos .ff-ouro dt { display: flex; align-items: center; gap: .5cqw; }
/* the marks (lesões, desgraças, temporary effects; etapa 3c): one line each, cut with an ellipsis, a click opens the list */
.ff-recursos .ff-marcas { cursor: pointer; font-size: 1.6cqw; }
.ff-recursos .ff-marcas dd { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ff-recursos .ff-marcas:not(.tem) dd { color: var(--tinta); opacity: .55; }
.ff-recursos .ff-marcas:hover dt, .ff-recursos .ff-marcas:focus-visible dt { opacity: 1; color: var(--tinta-vermelha); }
.ff-recursos .ff-marcas:focus-visible { outline: none; box-shadow: 0 .25cqw 0 var(--tinta-vermelha); }
.ff-ouro-icone { width: 2.6cqw; height: 2.6cqw; color: #8a6418; fill: #8a6418; }
[data-tom="escuro"] .ff-ouro-icone { color: #e3bd5c; fill: #e3bd5c; }
.ff-vazio { margin: 5cqw 0 0; text-align: center; font: italic 1.6cqw var(--serif); opacity: .5; }
.folha-fac.sem-cabeca .ff-coluna { font-size: 1.85cqw; }

/* ---------- the circle (SVG) ---------- */
.circulo-atributos { width: 100%; height: 100%; overflow: visible; display: block; user-select: none; }
.circulo-atributos text { text-anchor: middle; fill: var(--tinta); }
.circulo-atributos .tr { fill: none; stroke: var(--tinta); stroke-linecap: round; stroke-linejoin: round; }
.circulo-atributos .tr.fina { stroke-opacity: .7; }
.circulo-atributos .tr.apagada { stroke-opacity: .32; }
.circulo-atributos .tr.papel { fill: var(--ca-papel); }
.circulo-atributos .tr.cheia { fill: var(--tinta); }
.circulo-atributos .tr.aguada { fill: color-mix(in srgb, var(--tinta) 38%, transparent); }
.ca-escrita { font: 19px var(--uncial); letter-spacing: 1px; opacity: .78; }
.ca-runa { font: 74px/1 var(--uncial); opacity: .92; }
.ca-rosa { fill: var(--tinta); }
.ca-rosa.apagada { opacity: .38; }
.ca-luz { fill: var(--ca-papel); stroke: var(--tinta); stroke-width: 2; }
.ca-rotulo-anel { font: 19px var(--uncial); letter-spacing: .06em; }
.ca-valor { font: 44px var(--serif); }
.ca-valor.hp { fill: var(--tinta-vermelha) !important; }
.ca-valor.mp { fill: var(--tinta-azul) !important; }
.ca-trilho { fill: none; stroke: color-mix(in srgb, var(--tinta) 22%, transparent); stroke-width: 16; stroke-dasharray: 2 7; }
.ca-tinta-hp, .ca-tinta-mp { fill: none; stroke-width: 16; stroke-linecap: butt; stroke-dasharray: 0 100; opacity: .85; }
.ca-tinta-hp { stroke: var(--tinta-vermelha); }
.ca-tinta-mp { stroke: var(--tinta-azul); }
.ca-pequeno { cursor: pointer; outline: none; }
.ca-pequeno .tr.papel { transition: stroke .2s, fill .2s; }
.ca-pequeno-glifo { pointer-events: none; }
.ca-pequeno.hp .ca-pequeno-glifo { color: var(--tinta-vermelha); fill: var(--tinta-vermelha); }
.ca-pequeno.mp .ca-pequeno-glifo { color: var(--tinta-azul); fill: var(--tinta-azul); }
.ca-pequeno.hp:hover .tr.papel, .ca-pequeno.hp:focus-visible .tr.papel { stroke: var(--tinta-vermelha); fill: color-mix(in srgb, var(--tinta-vermelha) 12%, var(--ca-papel)); }
.ca-pequeno.mp:hover .tr.papel, .ca-pequeno.mp:focus-visible .tr.papel { stroke: var(--tinta-azul); fill: color-mix(in srgb, var(--tinta-azul) 12%, var(--ca-papel)); }
.ca-valor-temp { font: italic 30px var(--serif); fill: var(--ouro-2, #a8781e) !important; cursor: help; }
.ca-desenho, .ca-nos > .ca-no { transition: opacity .35s; }
.circulo-atributos.focado .ca-no:not(.foco) { opacity: .5; }

.ca-no { cursor: pointer; outline: none; }
.ca-no-disco { transition: stroke .25s; }
.ca-no:hover .ca-no-disco, .ca-no:focus-visible .ca-no-disco, .ca-no.foco .ca-no-disco { stroke: var(--tinta-vermelha); }
.ca-aura { fill: color-mix(in srgb, var(--tinta-vermelha) 35%, transparent); opacity: 0; pointer-events: none; }
.ca-glifo { color: var(--tinta); fill: currentColor; pointer-events: none; }
.ca-dados { font: 26px var(--serif); fill: var(--tinta-vermelha) !important; pointer-events: none; }
.ca-sigla { font: 36px/1 var(--uncial); pointer-events: none; }
.ca-sat-valor { pointer-events: none; }
.ca-sombra-lua { fill: color-mix(in srgb, var(--tinta) 22%, transparent); pointer-events: none; }
/* the level of the attribute (0-3): big red ink on the moon, ringed by the paper so the shadow never eats it */
.ca-satelite { filter: drop-shadow(0 2px 2px rgba(40, 20, 5, .35)); pointer-events: none; }
.ca-satelite .tr.papel { stroke: var(--tinta); }
.ca-sat-valor { font: 700 52px var(--serif); fill: var(--tinta-vermelha) !important; paint-order: stroke; stroke: var(--ca-papel); stroke-width: 9px; stroke-linejoin: round; }
.ca-no[data-valor="0"] .ca-sat-valor { fill: var(--tinta) !important; opacity: .7; }
.ca-no[data-valor="0"] .ca-glifo { opacity: .55; }
/* prestige: wax seal with the star stamped in it and two ribbon tails */
.ca-prestigio { cursor: help; filter: drop-shadow(0 3px 2px rgba(40, 15, 5, .45)); }
.ca-fita { fill: color-mix(in srgb, var(--cera) 75%, #3a0d0d); stroke: color-mix(in srgb, var(--cera) 50%, #000); stroke-width: 1.5; stroke-linejoin: round; }
.ca-cera { fill: var(--cera); stroke: color-mix(in srgb, var(--cera) 55%, #000); stroke-width: 2; }
.ca-cera-borda { fill: color-mix(in srgb, var(--cera-luz) 40%, var(--cera)); stroke: color-mix(in srgb, var(--cera) 45%, #000); stroke-width: 2.5; }
.ca-cera-estrela { fill: color-mix(in srgb, var(--cera) 70%, #000); opacity: .55; }
.ca-prestigio text { font: 24px var(--uncial); fill: #fbe8c4 !important; paint-order: stroke; stroke: color-mix(in srgb, var(--cera) 50%, #000); stroke-width: 3px; }

.ca-editar { display: none; }
.circulo-atributos.editando .ca-editar { display: inline; }
.ca-btn { cursor: pointer; }
.ca-btn circle { fill: var(--ca-papel); stroke: var(--tinta-vermelha); stroke-width: 4; transition: fill .2s; }
.ca-btn:hover circle { fill: color-mix(in srgb, var(--tinta-vermelha) 22%, var(--ca-papel)); }
.ca-btn text { font: 40px var(--serif); fill: var(--tinta-vermelha) !important; pointer-events: none; }
/* the wide invisible ring around − and + (circulo.js): a bigger hit area, never painted */
.ca-btn .ca-btn-alvo, .ca-btn:hover .ca-btn-alvo { fill: transparent; stroke: none; }

/* ---------- the last roll: a slip of paper at the corner ---------- */
.rolagem-resultado {
    position: fixed; right: 28px; bottom: 28px; z-index: 950; width: 300px; padding: 14px 16px; cursor: pointer;
    background: var(--g-papiro, none), var(--papel, #e9dab3); border: 1px solid var(--papel-borda, #b99a64); border-radius: 3px;
    box-shadow: var(--e-sombra-popover); color: var(--tinta);
    transform: translateY(calc(100% + 40px)) rotate(2deg); visibility: hidden;
    transition: transform .45s cubic-bezier(.2, .9, .3, 1.2), visibility 0s .45s;
}
.rolagem-resultado.visivel { transform: rotate(-1deg); visibility: visible; transition: transform .45s cubic-bezier(.2, .9, .3, 1.2); }
.rolagem-titulo { font: 1.35em var(--uncial); text-transform: lowercase; }
.rolagem-titulo small { font: italic .62em var(--serif); opacity: .75; }
.rolagem-dados { display: flex; flex-wrap: wrap; gap: 6px; margin: .5em 0; }
.d6 svg { width: 36px; height: 36px; display: block; }
.d6 rect { fill: var(--ca-papel); stroke: var(--tinta); stroke-width: 2.4; }
.d6 circle { fill: var(--tinta); }
.rolagem.critico .d6 rect { stroke: var(--tinta-vermelha); }
.rolagem-total { display: flex; align-items: baseline; gap: .6em; }
.rolagem-total strong { font: 2.6em/1 var(--serif); font-weight: 400; color: var(--tinta-vermelha); }
.rolagem-critico { font: italic 1em var(--serif); color: var(--tinta-vermelha); }
.rolagem.ataque .rolagem-total { align-items: center; flex-wrap: wrap; }
.rolagem.ataque .cb-carimbo { font-size: 1.15em; margin-left: auto; margin-right: 6px; }
/* campaign combat (etapa 3b): the master judges the hit; the stamp only waits */
.rolagem.ataque .cb-carimbo.aguardando { font-size: .62em; white-space: nowrap; letter-spacing: .04em; }
.rolagem.ataque .btn { margin-top: 8px; width: 100%; justify-content: center; }
.rolagens-antigas { margin: .5em 0 0; padding-left: 1.2em; font: italic .95em var(--serif); opacity: .75; }

/* ================= PERÍCIAS: double page per attribute ================= */
.pericias { display: flex; flex-direction: column; }
.pe-marcadores { display: flex; gap: 4px; padding: 0 18px; position: relative; z-index: 1; }
.pe-marcador {
    display: flex; flex-direction: column; align-items: center; gap: 1px; flex: 1; padding: .45em .3em .55em; cursor: pointer;
    border: 1px solid var(--borda); border-bottom: 0; border-radius: 6px 6px 0 0; background: var(--painel-2); color: var(--tinta);
    transform: translateY(6px); transition: transform .2s, background .2s;
}
.pe-marcador:hover { transform: translateY(2px); }
.pe-marcador.ativo { transform: none; background: var(--ca-papel); border-color: var(--borda-forte); }
.pe-marcador-icone svg { width: 26px; height: 26px; display: block; }
.pe-marcador-sigla { font: 1.15em/1 var(--uncial); text-transform: lowercase; }
.pe-marcador-valor { font: 1.1em var(--serif); color: var(--tinta-vermelha); }
.pe-marcador[data-rotulo]::after { content: attr(data-rotulo); font: italic .78em var(--serif); opacity: .7; }

.pe-livro { position: relative; padding: 18px 26px 16px; border: 1px solid var(--borda-forte); border-radius: 4px; background: var(--ca-papel); box-shadow: inset 0 0 40px rgba(60, 40, 10, .12); color: var(--tinta); }
.pe-cabeca { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 16px; padding-bottom: 12px; margin-bottom: 8px; border-bottom: 2px solid color-mix(in srgb, var(--tinta) 40%, transparent); }
.pe-cabeca-icone svg { width: 50px; height: 50px; color: var(--tinta); display: block; }
.pe-titulo { margin: 0; font: 2.3em/1 var(--uncial); text-transform: lowercase; color: var(--tinta); }
.pe-desc { margin: .2em 0 0; font-style: italic; opacity: .75; }
.pe-cabeca-valor { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.pe-valor-num { font: 2.6em var(--serif); color: var(--tinta-vermelha); }
.pe-valor-dados { font: italic 1em var(--serif); opacity: .75; }
.pe-paginas { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; background: linear-gradient(90deg, transparent calc(50% - 14px), rgba(0, 0, 0, .08) calc(50% - 4px), rgba(0, 0, 0, .16) 50%, rgba(0, 0, 0, .08) calc(50% + 4px), transparent calc(50% + 14px)); }
.pe-pagina { display: flex; flex-direction: column; }
.pe-linha { display: grid; grid-template-columns: auto 1fr auto auto; align-items: end; column-gap: .5em; padding: .55em .3em .35em; border-bottom: 1px dotted color-mix(in srgb, var(--tinta) 35%, transparent); cursor: var(--cursor-dado); border-radius: 3px; transition: background .15s; }
.pe-linha:hover { background: color-mix(in srgb, var(--tinta-vermelha) 6%, transparent); }
.pe-linha:hover .pe-nome { color: var(--tinta-vermelha); opacity: 1; }
.pe-gotas { cursor: pointer; }
.pe-nome { font: italic 1.3em var(--serif); opacity: .8; }
.pe-rolar { align-self: center; display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1.5px solid color-mix(in srgb, var(--tinta) 35%, transparent); border-radius: 6px; background: none; color: var(--tinta); cursor: var(--cursor-dado); opacity: .55; transition: opacity .15s, color .15s, border-color .15s; }
.pe-rolar .ic { width: 18px; height: 18px; }
.pe-linha:hover .pe-rolar { opacity: 1; color: var(--tinta-vermelha); border-color: var(--tinta-vermelha); }
.pe-linha.tem .pe-nome { opacity: 1; }
.pe-pontilhado { border-bottom: 2px dotted color-mix(in srgb, var(--tinta) 25%, transparent); margin-bottom: .45em; }
.pe-gotas .tri3 { width: 44px; }
.pe-nota { grid-column: 1 / -1; font: italic 1em var(--serif); color: var(--tinta-vermelha); padding-left: 1.2em; transform: rotate(-.8deg); transform-origin: left; }
.pe-nota::before { content: '↳ '; opacity: .6; }
/* choices, uses and rest events of a skill (13/10): one line under the row, never rolls it */
.pe-extra { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 3px 0 2px 1.2em; cursor: default; font: italic .92em var(--serif); }
.pe-escolha { display: inline-flex; align-items: center; gap: 5px; }
.pe-escolha span { opacity: .75; }
.pe-escolha input, .pe-escolha select { width: auto; min-width: 8em; max-width: 14em; min-height: 26px; padding: .1em .35em; font: inherit; }
.pe-escolha.pendente input, .pe-escolha.pendente select { border-color: var(--tinta-vermelha); }
.pe-acao small { margin-left: .4em; opacity: .7; }
.pe-evento { opacity: .7; }
.pe-pendente, .ff-pendente { margin-left: .3em; font-style: normal; color: var(--tinta-vermelha); }
.ff-pendente { cursor: pointer; font-size: .8em; }
.painel-rapido .pe-extra { padding-left: 0; margin-top: 8px; }
.ev-ajustes { margin: 6px 0 0; padding-left: 1.1em; font: italic .92em var(--serif); }
.ev-atributos-botoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rs-linha { display: grid; grid-template-columns: 1fr auto 2em auto; align-items: center; gap: 6px; margin: 3px 0; }
.pe-rodape { margin: 12px 0 0; font-style: italic; opacity: .7; text-align: center; }

.tinteiro { display: flex; align-items: center; gap: 8px; cursor: help; }
.tinteiro svg { width: 52px; height: 60px; overflow: visible; }
.tinteiro-tinta { fill: var(--tinta); }
.tinteiro-vidro, .tinteiro-gargalo { fill: none; stroke: var(--tinta); stroke-width: 2; stroke-linejoin: round; }
.tinteiro-pena { fill: color-mix(in srgb, var(--tinta) 15%, transparent); stroke: var(--tinta); stroke-width: 1.4; }
.tinteiro-brilho { stroke: rgba(255, 255, 255, .5); stroke-width: 2.5; stroke-linecap: round; }
.tinteiro-num { display: flex; flex-direction: column; line-height: 1.1; }
.tinteiro-num strong { font: 2.1em var(--serif); color: var(--tinta-vermelha); font-weight: 400; }
.tinteiro-num span { font: italic .9em var(--serif); opacity: .75; }
.tinteiro.seco .tinteiro-num strong { opacity: .5; }
.tinteiro.negativo .tinteiro-num strong { color: var(--perigo); }

.dica-flutuante { font-family: var(--serif); }
.dica-flutuante .dica-titulo { font: 1.25em var(--uncial); letter-spacing: .02em; text-transform: lowercase; color: var(--tinta); }
.dica-flutuante.dica-larga { max-width: min(60ch, 440px); white-space: normal; }
.dica-flutuante .dica-desc { display: block; font-style: italic; color: var(--e-tinta-suave); margin-bottom: .4em; }
.dica-niveis { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .3em; }
/* level texts in readable ink; the level the character has is full ink with a quill-red rule */
.dica-niveis li { padding-left: 1.6em; text-indent: -1.6em; color: var(--e-tinta-suave); }
.dica-niveis li b { display: inline-block; width: 1.6em; text-indent: 0; color: var(--tinta-vermelha); font-weight: 400; }
.dica-niveis li.atual { color: var(--e-tinta); box-shadow: inset 2px 0 0 var(--e-tinta-vermelha); padding-left: 2em; margin-left: -.4em; }
.dica-niveis li.lacrado { color: var(--e-tinta-apagada); font-style: italic; }
.dica-pagina { display: block; margin-top: .5em; font: var(--e-legenda); color: var(--e-tinta-apagada); text-align: right; }
.dica-rolar { display: block; margin-top: .5em; font: italic .9em var(--serif); color: var(--tinta-vermelha); }

/* ================= CRIAÇÃO ================= */
.criacao, .evolucao { display: flex; flex-direction: column; gap: 18px; color: var(--tinta); }
.cr-topo { display: flex; flex-direction: column; gap: 10px; }
.cr-marca { font: 1.3em var(--uncial); text-transform: lowercase; opacity: .8; }
.cr-passos { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
/* the steps are bookmarks on the page edge: no pill, a quill-red rule under the current one */
.cr-passo {
    display: inline-flex; align-items: center; gap: .5em; padding: .3em .8em .35em .3em; cursor: pointer;
    border: 0; border-bottom: 2px solid color-mix(in srgb, var(--tinta) 18%, transparent); border-radius: var(--e-raio-aba); background: none; color: var(--tinta); font: italic 1.05em var(--serif);
    transition: border-color var(--e-dur-rapido), background-color var(--e-dur-rapido);
}
.cr-passo:hover { border-bottom-color: var(--tinta-vermelha); background: color-mix(in srgb, var(--e-papiro-sombra) 30%, transparent); }
.cr-passo:focus-visible { outline: none; box-shadow: var(--e-foco); }
.cr-num { display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; border: 1.5px solid var(--tinta); font: normal .85em var(--serif); }
.cr-passo.feito .cr-num { background: var(--tinta); color: var(--ca-papel); }
.cr-passo.atual { border-bottom-color: var(--tinta-vermelha); color: var(--tinta-vermelha); background: color-mix(in srgb, var(--e-papiro-sombra) 35%, transparent); }
.cr-passo.atual .cr-num { border-color: var(--tinta-vermelha); background: var(--tinta-vermelha); color: #fff4e4; }
.cr-corpo h2 { margin: 0; font: 2.4em/1 var(--uncial); text-transform: lowercase; color: var(--tinta); }
.cr-texto { margin: .3em 0 1em; font-style: italic; opacity: .8; }
.cr-pe { display: flex; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--tinta) 25%, transparent); }
.cr-resumo { flex: 1; text-align: center; font-style: italic; opacity: .75; }

.cr-base { display: grid; grid-template-columns: 1fr 220px; gap: 18px 28px; align-items: center; }
.cr-base-campos { grid-row: 1 / 3; }
.cr-nivel-inicial { grid-column: 2; display: flex; flex-direction: column; align-items: center; gap: 4px; padding-bottom: 12px; text-align: center; cursor: help; border-bottom: 1px dotted color-mix(in srgb, var(--tinta) 35%, transparent); }
.cr-nivel-botoes { display: flex; align-items: center; gap: 12px; }
.cr-nivel-botoes .btn { width: 34px; height: 34px; padding: 0; justify-content: center; font-size: 1.3em; border: 1.5px solid color-mix(in srgb, var(--tinta) 45%, transparent); }
.cr-nivel-botoes .cr-valor { min-width: 1.4em; font-size: 2.6em; }
.cr-base .cr-selo-caixa { grid-column: 2; }
/* step 0, the campaign (site only, sheet in "Sem campanha", 20/10) */
.cr-pedido { padding: 12px 18px 14px; border: 2px dashed color-mix(in srgb, var(--tinta) 35%, transparent); border-radius: 6px; }
.cr-pedido .cr-texto { margin: 0 0 .6em; }
.cr-pedido-linha { margin: .3em 0; font-style: italic; }
.cr-pedido-linha b { color: var(--tinta-vermelha); font-style: normal; font-weight: 400; }
.cr-pedido-erro { color: var(--tinta-vermelha); }
.cr-pedido-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: .6em; }
.cr-campanhas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; max-height: 300px; overflow: auto; padding: 2px; }
.cr-campanha { display: flex; flex-direction: column; gap: 2px; padding: .55em .8em; border: 1.5px solid color-mix(in srgb, var(--tinta) 30%, transparent); border-radius: 6px; cursor: pointer; transition: border-color .2s, background .2s; }
.cr-campanha input { position: absolute; opacity: 0; pointer-events: none; }
.cr-campanha-nome { font: 1.15em/1.15 var(--serif); }
.cr-campanha-mestre { font-style: italic; opacity: .75; }
.cr-campanha-ja { font-size: .85em; font-weight: 600; color: var(--ouro-2, #a8781e); }
.cr-campanha:hover { border-color: color-mix(in srgb, var(--tinta-vermelha) 45%, transparent); }
.cr-campanha:has(input:checked) { border-color: var(--tinta-vermelha); background: color-mix(in srgb, var(--tinta-vermelha) 7%, transparent); }
.cr-campanha:has(input:focus-visible) { outline: 2px solid var(--tinta-vermelha); outline-offset: 2px; }
.cr-campanha:has(input:checked) .cr-campanha-nome { color: var(--tinta-vermelha); }
/* a step that cannot be left yet: highlight and a short shake (none with reduced motion) */
.cr-trava { margin: 0; color: var(--tinta-vermelha); font-style: italic; font-weight: 600; }
.contador-ganhos.alerta strong { border-color: var(--tinta-vermelha); color: var(--tinta-vermelha); opacity: 1; background: color-mix(in srgb, var(--tinta-vermelha) 12%, transparent); }
.cr-pedido.alerta { border-color: var(--tinta-vermelha); }
@media (prefers-reduced-motion: no-preference) {
    .cr-tremer { animation: cr-tremer .4s ease-in-out; }
}
@keyframes cr-tremer {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px) rotate(-1deg); }
    40% { transform: translateX(6px) rotate(1deg); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}
/* step 2: the skill pyramids are drawn, not clicked */
.cr-folha.sem-pericias .ff-marca { pointer-events: none; cursor: default; }
.cr-niveis { grid-column: 1 / -1; padding: 12px 16px; border: 2px dashed color-mix(in srgb, var(--tinta) 35%, transparent); border-radius: 6px; }
.cr-niveis p { margin: 0 0 .4em; font-style: italic; }
.cr-niveis b { color: var(--tinta-vermelha); font-style: normal; font-weight: 400; }
.cr-niveis-botoes { display: flex; gap: 8px; flex-wrap: wrap; }
.cr-niveis.oculto { display: none; }
.ev-subir-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: .8em; }
.ev-subir-btn { flex-direction: column; justify-content: center; gap: 2px; padding: .7em .6em; font-size: 1.1em; line-height: 1.1; }
.ev-subir-btn small { font: italic .72em var(--serif); opacity: .85; }
.cr-base-campos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px 10px; }
.cr-campo { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.cr-figura-caixa { position: relative; width: 120px; height: 108px; display: grid; place-items: center; }
.cr-figura { grid-area: 1 / 1; }
.cr-figura.tri { width: 120px; height: 104px; overflow: visible; }
.cr-figura.tri path { fill: color-mix(in srgb, var(--tinta) 5%, transparent); stroke: var(--tinta); stroke-width: 5; stroke-linejoin: round; }
.cr-figura.dado-base svg { width: 104px; height: 104px; color: var(--tinta); opacity: .55; display: block; }
.cr-valor { grid-area: 1 / 1; font: 2.3em var(--serif); font-weight: 400; z-index: 1; paint-order: stroke; text-shadow: 0 0 6px var(--ca-papel), 0 0 2px var(--ca-papel); }
.cr-campo[data-campo-base="mov"] .cr-valor, .cr-campo[data-campo-base="rm"] .cr-valor { transform: translateY(-14px); }
.cr-campo[data-campo-base="ad"] .cr-valor { transform: translateY(16px); }
.cr-campo-nome { font: 1.3em/1.1 var(--uncial); }
.opcoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 4px; }
.opcao { position: relative; padding: .1em .4em; border: 2px solid transparent; border-radius: 50% / 45%; background: none; color: var(--tinta); font: italic 1.12em var(--serif); cursor: pointer; transition: border-color .2s, transform .2s; }
.opcao sup { font-size: .62em; margin-left: 1px; opacity: .8; }
.opcao sup.mais { color: var(--ok); }
.opcao sup.menos { color: var(--tinta-vermelha); }
.opcao:hover { border-color: color-mix(in srgb, var(--tinta-vermelha) 45%, transparent); }
.opcao.ativa { border-color: var(--tinta-vermelha); color: var(--tinta-vermelha); transform: rotate(-3deg); }
.cr-selo-caixa { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.cr-selo {
    display: grid; place-items: center; width: 120px; aspect-ratio: 1; cursor: help;
    clip-path: polygon(50% 0, 61% 6%, 74% 3%, 80% 15%, 93% 18%, 93% 31%, 100% 41%, 95% 53%, 100% 65%, 91% 74%, 89% 88%, 76% 90%, 66% 99%, 54% 94%, 41% 100%, 32% 91%, 18% 92%, 13% 79%, 2% 71%, 6% 58%, 0 46%, 8% 35%, 6% 21%, 19% 15%, 25% 3%, 38% 6%);
    background: radial-gradient(circle at 38% 32%, var(--cera-luz), var(--cera) 55%, color-mix(in srgb, var(--cera) 55%, #000));
    color: #f7e3c0; font: 3em var(--serif);
}
.cr-selo span { display: grid; place-items: center; width: 70%; aspect-ratio: 1; border-radius: 50%; border: 2px dashed rgba(255, 220, 190, .45); }
.cr-selo.ok { background: radial-gradient(circle at 38% 32%, #e8c35a, #a8781e 55%, #5d3f0c); }
.cr-soma { margin: 0; font: italic 1.15em var(--serif); }
.cr-soma.ok { color: var(--ok); }
.cr-soma.erro { color: var(--tinta-vermelha); }

.cr-atributos { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 20px; align-items: start; }
.cr-folha { width: 100%; }
.cr-lado { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 16px; }
/* the gains left: the number in a double ring of red ink (like Evolução), the words beside it */
.contador-ganhos { display: flex; align-items: center; gap: .7em; padding: .2em 0 .6em; border: 0; border-bottom: 1px dotted var(--e-pauta); font: italic 1.1em var(--serif); }
.contador-ganhos strong { flex: none; display: inline-grid; place-items: center; width: 2.1em; height: 2.1em; border: 3px double var(--tinta-vermelha); border-radius: 50%; font: 400 2.2em/1 var(--serif); color: var(--tinta-vermelha); }
.contador-ganhos.zerado strong { border-color: color-mix(in srgb, var(--tinta) 35%, transparent); }
.contador-ganhos.zerado strong { color: var(--tinta); opacity: .6; }

.cr-vida { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cr-vida-cartao { display: flex; flex-direction: column; align-items: center; gap: .2em; padding: 1.1em; border: 2px solid color-mix(in srgb, var(--tinta) 45%, transparent); border-radius: 50% / 18%; }
.cr-vida-cartao[data-vida="hp"] { --cor: var(--tinta-vermelha); }
.cr-vida-cartao[data-vida="mp"] { --cor: var(--tinta-azul); }
.cr-vida-nome { font: 1.5em var(--uncial); text-transform: lowercase; }
.cr-vida-valor { font: 3.6em/1 var(--serif); color: var(--cor); }
.cr-vida-conta { font-style: italic; opacity: .8; text-align: center; }
.cr-ouro { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-style: italic; }
.cr-ouro label { font: 1.3em var(--uncial); text-transform: lowercase; }
.cr-ouro input { width: 8em; }
.lista-erros { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: .4em; }

/* ================= EVOLUÇÃO ================= */
.ev-topo { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; }
.ev-nivel { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; width: 110px; aspect-ratio: 1; border: 4px solid var(--tinta); border-radius: 50%; }
.ev-nivel span { font: 1.3em var(--uncial); }
.ev-nivel strong { font: 3em var(--serif); font-weight: 400; color: var(--tinta-vermelha); display: inline-block; }
.ev-trilha { display: flex; align-items: flex-start; }
.ev-marco { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; cursor: help; }
.ev-marco::before { content: ''; position: absolute; top: 7px; left: -50%; right: 50%; height: 2px; background: color-mix(in srgb, var(--tinta) 25%, transparent); }
.ev-marco:first-child::before { display: none; }
.ev-marco.feito::before { background: var(--tinta); }
.ev-marco i { position: relative; z-index: 1; width: 12px; height: 12px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--tinta); background: var(--ca-papel); }
.ev-marco.ganho i { border-radius: 1px; transform: rotate(45deg); }
.ev-marco.feito i { background: var(--tinta); }
.ev-marco.atual i { background: var(--tinta-vermelha); border-color: var(--tinta-vermelha); }
.ev-marco b { font: italic .9em var(--serif); font-weight: 400; opacity: .7; }
.ev-marco.atual b { color: var(--tinta-vermelha); opacity: 1; }

/* two columns that weigh the same: level up, gains and prestiges on the left, the history down the right;
   with gains to spend the circle takes the whole width (rule below) */
.ev-grade {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; gap: 16px; align-items: start;
    grid-template-areas: "subir historico" "ganhos historico" "prestigios historico";
}
.ev-subir { grid-area: subir; }
.ev-ganhos { grid-area: ganhos; }
.ev-prestigios { grid-area: prestigios; }
.ev-historico { grid-area: historico; }
.ev-grade:has(.ev-circulo) { grid-template-rows: auto; grid-template-areas: "subir subir" "ganhos ganhos" "prestigios historico"; }
.ev-cartao { padding: 16px 18px; border: 2px solid color-mix(in srgb, var(--tinta) 55%, transparent); border-radius: var(--e-raio-papel); }
/* no gain to spend: one line of pencil under the title, not an empty dashed box */
.ev-ganhos .vazio { padding: 0; border: 0; text-align: left; font: var(--e-legenda); font-size: 1em; color: var(--e-tinta-apagada); }
.ev-ganhos:not(:has(.ev-circulo)) { padding-bottom: 12px; }
.ev-ganhos:not(:has(.ev-circulo)) h3 { margin-bottom: .25em; }
.ev-cartao h3 { margin: 0 0 .5em; font: 1.8em/1 var(--uncial); text-transform: lowercase; color: var(--tinta); }
.ev-ganha { margin: 0 0 .8em; padding-left: 1.2em; font-style: italic; }
.ev-ganha b { color: var(--tinta-vermelha); font-style: normal; font-weight: 400; }
.ev-dado { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 8px; padding: .35em 0; }
.ev-dado-nome { font: 1.35em var(--uncial); }
.ev-dado-nome small { font: italic .7em var(--serif); opacity: .75; }
.dado-face { display: inline-grid; place-items: center; width: 46px; height: 46px; border: 2.5px solid var(--tinta); border-radius: 9px; font: 1.5em var(--serif); opacity: .55; }
.dado-face.feito { opacity: 1; color: var(--tinta-vermelha); border-color: var(--tinta-vermelha); }
.btn-largo { width: 100%; justify-content: center; margin-top: .6em; }
.ev-destaque { display: flex; align-items: center; gap: .6em; margin: 0 0 .5em; font: italic 1.15em var(--serif); color: var(--tinta-vermelha); }
/* the count of gains: big, in a red ink ring, so one gain is not lost on the page */
.ev-destaque b { flex: none; display: inline-grid; place-items: center; width: 2.1em; height: 2.1em; border: 3px double var(--tinta-vermelha); border-radius: 50%; font: 400 2.4em/1 var(--serif); font-style: normal; }
/* with gains to spend, the circle takes the whole width of the page */

.ev-circulo { width: min(100%, 760px); margin: 0 auto; aspect-ratio: 1; }
.ev-lista-prestigios { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ev-prestigio { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; padding: .5em 0; border-bottom: 1px dotted color-mix(in srgb, var(--tinta) 40%, transparent); }
.ev-prestigio b { font: 1.35em var(--uncial); font-weight: 400; text-transform: lowercase; }
.ev-prestigio p { margin: .15em 0 0; font-style: italic; opacity: .85; }
.ev-prestigio small { opacity: .7; font-style: italic; }
.ev-prestigio.tem { justify-content: flex-start; }
.ev-prestigio-botoes { display: flex; flex-direction: column; gap: 4px; flex: none; }
.ev-outros { margin-top: .8em; }
.ev-outros summary { cursor: pointer; font-style: italic; }
.ev-tabela { width: 100%; border-collapse: collapse; margin-bottom: .8em; }
.ev-tabela th, .ev-tabela td { padding: .2em .4em; text-align: center; border-bottom: 1px dotted color-mix(in srgb, var(--tinta) 40%, transparent); font-variant-numeric: lining-nums; }
.ev-tabela th { font: 1.15em var(--uncial); font-weight: 400; text-transform: lowercase; }
.ev-tabela td { color: var(--tinta-vermelha); }
.ev-tabela td:first-child { color: var(--tinta); }
.ev-tabela td i { opacity: .7; }
.evolucao .vazio, .criacao .vazio { padding: 1.2em; }
.ev-ganhos .vazio { padding: 0; }
.selo-cera {
    display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--cera-luz), var(--cera) 60%, color-mix(in srgb, var(--cera) 60%, #000));
    color: #f7e3c0; font: 1.1em var(--uncial); text-transform: lowercase; box-shadow: 0 2px 4px rgba(0, 0, 0, .35), inset 0 0 0 3px rgba(255, 210, 180, .18);
}

/* ================= NOTAS ================= */
#aba-notas { display: flex; flex-direction: column; gap: 18px; }
#aba-notas.oculto { display: none; }
#aba-notas .secao h2, .identidade label { font-family: var(--uncial); text-transform: lowercase; letter-spacing: .02em; }
#aba-notas .secao h2 { font-size: 1.8em; font-weight: 400; color: var(--tinta); }
.identidade label { font-size: 1.25em; color: var(--tinta); }
.identidade { display: grid; grid-template-columns: 180px 1fr; gap: 24px; align-items: start; }
.id-retrato { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.avatar-retrato { width: 160px; height: 160px; font-size: 2.6em; }
/* fields written on the page: no box, a dotted rule under the line, quill red on focus (like the Nome of the sheet) */
#aba-notas :is(input[type=text], input[type=search], select, textarea:not(.papel-pautado)) {
    padding: .25em .2em; border: 0; border-bottom: 1px dotted var(--e-pauta); border-radius: 0; background: transparent; box-shadow: none;
    color: var(--e-tinta); font: italic 1.15em var(--serif); transition: border-color var(--e-dur-rapido);
}
#aba-notas :is(input[type=text], input[type=search], select, textarea):focus { outline: none; border-color: var(--e-tinta-vermelha); box-shadow: 0 1px 0 var(--e-tinta-vermelha); }
#aba-notas select { background: transparent; color: var(--e-tinta); }
#aba-notas select option { background: var(--e-papiro); color: #3a2414; }
/* the description is ruled lines of the page, as many as it has written (field-sizing): no empty rules hanging under it */
.id-campos textarea {
    field-sizing: content; min-height: 1.9em; line-height: 1.9em; padding-top: 0; resize: vertical; border-bottom: 0 !important;
    background: repeating-linear-gradient(180deg, transparent 0 calc(1.9em - 1px), var(--e-pauta) calc(1.9em - 1px) 1.9em) !important; background-attachment: local !important;
}
.identidade .campo { margin-bottom: 14px; }
.identidade label .dica { font: var(--e-legenda); color: var(--e-tinta-apagada); text-transform: none; }
.idiomas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.idiomas input { flex: 1 1 180px; }
.chip-idioma { display: inline-flex; align-items: center; gap: .2em; padding: .05em .1em .05em .2em; border: 0; border-bottom: 1px solid var(--e-tinta-vermelha); border-radius: 0; color: var(--e-tinta-vermelha); font: italic 1.1em var(--serif); }
.chip-idioma + .chip-idioma::before { content: ','; margin: 0 .25em 0 -.45em; color: var(--e-tinta); }
.chip-idioma button { min-width: 24px; min-height: 24px; border: 0; background: none; color: var(--e-tinta-apagada); cursor: pointer; font-size: 1.1em; line-height: 1; padding: 0 .3em; }
.chip-idioma button:hover { color: var(--perigo); }
.chip-idioma button:focus-visible { outline: none; box-shadow: var(--e-foco); }
.papel-pautado {
    width: 100%; min-height: 22em; resize: vertical; padding: .2em 1em 1em 3.2em;
    font: italic 1.15em/1.9em var(--serif); color: var(--tinta);
    background:
        linear-gradient(90deg, transparent 2.4em, color-mix(in srgb, var(--tinta-vermelha) 45%, transparent) 2.4em, color-mix(in srgb, var(--tinta-vermelha) 45%, transparent) calc(2.4em + 1px), transparent calc(2.4em + 1px)),
        repeating-linear-gradient(180deg, transparent 0 calc(1.9em - 1px), color-mix(in srgb, var(--tinta) 16%, transparent) calc(1.9em - 1px) 1.9em),
        var(--ca-papel);
    background-attachment: local;
    border: 0; border-radius: var(--e-raio-papel); box-shadow: var(--e-sombra-poco);
}
.papel-pautado:focus { outline: none; box-shadow: var(--e-sombra-poco), 0 0 0 1px var(--e-tinta-vermelha); }

/* ---------- narrower screens (the app is used on the PC; this only keeps it readable) ---------- */
@media (max-width: 1100px) {
    .cr-atributos, .cr-base { grid-template-columns: 1fr; }
    .cr-lado { position: static; }
    .cr-base-campos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ev-grade, .pe-paginas { grid-template-columns: 1fr; gap: 12px; }
    .ev-ganhos { grid-row: auto; }
    .pe-paginas { background: none; }
}

/* dice styles in the theme panel */
.pr-dados-modo { margin-bottom: 6px; }
.pr-dados-modo button { padding: .25em .7em; font: italic .95em var(--serif); }
.pr-dados-unico { display: flex; flex-wrap: wrap; gap: 4px; }
.pr-chip-dado { padding: .2em .6em; border: 1px solid color-mix(in srgb, var(--tinta) 35%, transparent); border-radius: 3px; background: none; color: var(--tinta); font: italic .95em var(--serif); cursor: pointer; }
.pr-chip-dado.ativo, .pr-chip-dado:hover { border-color: var(--tinta-vermelha); color: var(--tinta-vermelha); }
.pr-dados-atributos { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
.pr-dados-atributos label { display: flex; align-items: center; justify-content: space-between; gap: 6px; font: italic .9em var(--serif); }
.pr-dados-atributos select { max-width: 55%; font-size: .9em; }

/* animal companion in the notes: preview, species, name */
.companheiro .comp-linha { display: flex; align-items: center; gap: 10px; }
.comp-previa { width: 72px; height: 72px; flex: none; image-rendering: pixelated; border: 1.5px dashed color-mix(in srgb, var(--tinta) 35%, transparent); border-radius: var(--e-raio-controle); }
.companheiro select { flex: 1; }
.companheiro input { flex: 1.4; }

/* ================= THE FRAME OF THE BOOK (ficha2) ================= */
/* the action ruler reads as the running head of a printed page: ink buttons, a double rule under it */
#app .topo { position: relative; padding-bottom: 14px; margin-bottom: 18px; }
#app .topo::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; pointer-events: none;
    border-top: 1px solid color-mix(in srgb, var(--e-tinta) 45%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--e-tinta) 18%, transparent);
}
#app .topo-nome .btn-p { border-radius: var(--e-raio-controle); color: var(--e-tinta); font-weight: 400; }
#app .topo-nome .btn-fantasma:hover { background: color-mix(in srgb, var(--e-papiro-sombra) 40%, transparent); border-color: color-mix(in srgb, var(--e-tinta) 45%, transparent); }
#app .topo-nome .btn:focus-visible { outline: none; border-color: transparent; box-shadow: var(--e-foco); }
#app #btnPercepcao { background: none; border-color: color-mix(in srgb, var(--e-tinta) 45%, transparent); font-style: italic; }
#app #btnPercepcao:hover { background: color-mix(in srgb, var(--e-papiro-sombra) 40%, transparent); border-color: var(--e-tinta); box-shadow: none; }
/* the search is a ruled line with a quill, not a box */
#app .busca-pericia input { border: 0; border-bottom: 1px dotted color-mix(in srgb, var(--tinta) 55%, transparent); border-radius: 0; background: none; box-shadow: none; padding-left: 1.9em; }
#app .busca-pericia .ic { left: .25em; }
#app .busca-pericia input:focus { border-bottom: 1px solid var(--e-tinta-vermelha); box-shadow: 0 1px 0 var(--e-tinta-vermelha); }
[data-tom="escuro"] #app .topo-nome .btn-p, [data-tom="escuro"] #app .topo-nome .btn-p:hover { color: var(--texto); }

/* the Livro menu: a slip of paper under its button, items in full words, the bin last and in red (app.js ligarMenuLivro) */
#app .livro-menu { position: relative; }
#app #btnLivroMenu[aria-expanded="true"] { background: color-mix(in srgb, var(--e-papiro-sombra) 45%, transparent); border-color: color-mix(in srgb, var(--e-tinta) 45%, transparent); }
.menu-livro {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: var(--e-z-flutuantes); min-width: 250px; padding: 6px;
    display: flex; flex-direction: column; color: var(--tinta);
    border: 1px solid var(--e-papel-borda); border-radius: var(--e-raio-papel); box-shadow: var(--e-sombra-popover), inset 0 0 22px rgba(90, 55, 15, .14);
    background: var(--g-papiro, none), var(--papel, #e9dab3);
}
.menu-livro[hidden] { display: none; }
.menu-livro .menu-item {
    display: flex; align-items: center; gap: .6em; width: 100%; min-height: 36px; padding: .35em .75em; text-align: left;
    border: 0; border-radius: var(--e-raio-controle); background: none; color: inherit; font: 1.02em/1.2 var(--serif); cursor: pointer;
}
.menu-livro .menu-item .ic { flex: none; width: 1.15em; height: 1.15em; }
.menu-livro .menu-item:hover { background: color-mix(in srgb, var(--e-papiro-sombra) 50%, transparent); }
.menu-livro .menu-item:focus-visible { outline: none; background: color-mix(in srgb, var(--e-papiro-sombra) 50%, transparent); box-shadow: inset 0 0 0 2px var(--e-tinta-vermelha); }
.menu-livro .menu-perigo { color: var(--tinta-vermelha); }
.menu-livro .menu-perigo:hover, .menu-livro .menu-perigo:focus-visible { background: color-mix(in srgb, var(--tinta-vermelha) 12%, transparent); }
.menu-livro .menu-sep { height: 0; margin: 5px 8px; border-top: 1px solid var(--e-pauta); }

/* ---------- vitals: life, mana, defence and the conditions, one strip under the ruler on every page (app.js renderVitais) ----------
   A strip of the same paper pasted across the page: it sticks to the top while the page scrolls, so the numbers stay in view */
/* (0,3,0): over the position: relative that grimorio.css gives every child of the page */
.livro > .folha > .faixa-vitais {
    position: sticky; top: 0; z-index: 4; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 30px;
    margin: -8px 0 16px; padding: 7px 18px 8px; color: var(--tinta);
    background: var(--g-papiro, none), var(--papel, #e9dab3);
    border-top: 1px solid color-mix(in srgb, var(--e-tinta) 18%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--e-tinta) 40%, transparent);
    box-shadow: 0 7px 8px -8px rgba(58, 34, 10, .45);
}
.faixa-vitais:empty { display: none; }
.fv-rotulo { font: 1.15em/1 var(--uncial); text-transform: lowercase; color: var(--e-tinta-suave); }
.fv-medida { display: grid; grid-template-columns: auto auto auto; align-items: center; column-gap: 6px; row-gap: 3px; }
.fv-icone { width: 22px; height: 22px; }
.fv-hp .fv-icone { color: var(--tinta-vermelha); }
.fv-mp .fv-icone { color: var(--mana); }
.fv-num { font: 1.2em/1 var(--e-fonte-texto); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.fv-num b { font-weight: 400; font-size: 26px; }
.fv-num small { margin-left: .2em; font-size: .85em; color: var(--e-tinta-suave); }
.fv-num em { margin-left: .35em; font-size: .8em; color: var(--tinta-vermelha); }
.fv-barra { grid-column: 1 / -1; height: 4px; min-width: 120px; border-radius: 2px; overflow: hidden; background: color-mix(in srgb, var(--e-tinta) 14%, transparent); }
.fv-barra i { display: block; height: 100%; border-radius: inherit; transition: width var(--e-dur-base) var(--e-ease-tinta); }
.fv-hp .fv-barra i { background: var(--tinta-vermelha); }
.fv-mp .fv-barra i { background: var(--mana); box-shadow: 0 0 6px color-mix(in srgb, var(--mana) 60%, transparent); }
.fv-defesas { display: flex; gap: 18px; }
.fv-defesa { display: flex; align-items: baseline; gap: 5px; cursor: help; }
.fv-defesa b { font: 400 1.45em/1 var(--e-fonte-texto); font-variant-numeric: tabular-nums lining-nums; }
/* a bonus on rm/ad/mov: a gold underline under the ink, never the red of life and damage */
.fv-defesa.bonus b { text-decoration: underline 2px var(--e-ouro-tinta); text-underline-offset: 4px; }
[data-tom="escuro"] .fv-defesa.bonus b { text-decoration-color: var(--e-ouro); }
/* on the Personagem page, while the triangles of the sheet are in view (app.js vigiarTriangulos), they say ad/rm/mov alone;
   the strip keeps their room, so hp, mp and the conditions never slide when the page scrolls or the tab changes */
body[data-aba="personagem"].tris-a-vista .fv-defesas { visibility: hidden; }
.fv-condicoes { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; max-width: 520px; font: italic 1em/1.2 var(--e-fonte-texto); }
.fv-condicoes > .fv-rotulo { font-style: normal; }
.fv-cond { display: inline-flex; align-items: center; gap: .35em; cursor: help; }
.fv-cond::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--e-tinta-suave); }
.fv-cond.bom::before { background: var(--e-ok); }
.fv-cond.mau::before { background: var(--tinta-vermelha); }
.fv-cond b { font-style: normal; font-weight: 400; font-variant-numeric: tabular-nums; }
.fv-nada { color: var(--e-tinta-apagada); }
[data-tom="escuro"] .fv-cond.bom::before { background: #8fe0a6; }
/* the master's note folded into a seal on the strip (app.js pintarSeloBilhete): a click opens it again */
.fv-ajustes {
    display: inline-flex; align-items: center; gap: .45em; min-height: 30px; padding: 2px .7em 2px 3px; cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--tinta-vermelha) 45%, transparent); border-radius: 999px;
    background: color-mix(in srgb, var(--tinta-vermelha) 7%, transparent); color: var(--tinta);
    font: italic 1em/1.1 var(--e-fonte-texto); white-space: nowrap;
}
.fv-ajustes:hover { background: color-mix(in srgb, var(--tinta-vermelha) 14%, transparent); }
.fv-ajustes:focus-visible { outline: none; box-shadow: var(--e-foco); }
.fv-ajustes-selo {
    display: grid; place-items: center; width: 24px; height: 24px; flex: none;
    border-radius: 47% 53% 50% 48% / 52% 46% 54% 48%;
    background: radial-gradient(circle at 38% 32%, #e2574a, #a3261b 55%, #5e120c);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .4), inset 0 0 0 2px rgba(90, 15, 10, .45);
    color: rgba(255, 220, 200, .9); font: 15px/1 var(--uncial); font-style: normal;
}
@media (prefers-reduced-motion: no-preference) {
    .fv-ajustes.chegou { animation: fv-selo-chega 420ms cubic-bezier(.2, .8, .2, 1); }
}
@keyframes fv-selo-chega { from { transform: scale(.6); opacity: 0; } }

/* the clasp hangs at a fixed height of the fore-edge, the same on every page */
#app .fecho-pendente { top: 300px; }
/* below 1800px the book reaches the side tabs (Anotações gerais at the right edge): the clasp hangs 12px further in */
@media (max-width: 1799px) {
    #app .fecho-pendente { right: -28px; }
}
/* the clasp closes the book (app.js): pointer and keyboard; the buckle catches the candlelight under the pointer */
#app .fecho-botao { pointer-events: auto; cursor: pointer; outline: none; }
#app .fecho-botao .fecho-fivela { transition: filter var(--e-dur-rapido), box-shadow var(--e-dur-rapido); }
#app .fecho-botao:is(:hover, :focus-visible) .fecho-fivela {
    filter: brightness(1.2);
    box-shadow: 0 0 0 2px rgba(60, 35, 5, .65), 0 0 12px 2px rgba(243, 217, 142, .55), 0 2px 4px rgba(0, 0, 0, .6), inset 0 -1px 2px rgba(0, 0, 0, .4);
}
#app .fecho-botao:focus-visible { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5), 4px 8px 12px rgba(0, 0, 0, .55), 0 0 0 2px var(--e-ouro-claro); }

/* wide screens: the book grows to 1400px (the paper sheet is drawn in cqw and follows) */
@media (min-width: 1800px) {
    #app.app { width: min(1400px, calc(100% - 48px)); }
    .tela-personagens .prateleira:not(.lista-arquivados) { --lw: 232px; --lh: 327px; --ld: 46px; --vao: 108px; }
}

/* ---------- graphic quality (apps/comum/qualidade.js marks html/body): cheaper layers on weak GPUs, same look on ultra/alto ---------- */
:is([data-qualidade="medio"], [data-qualidade="baixo"]) dialog::backdrop { backdrop-filter: none; background: rgba(12, 6, 3, .72); }
:is([data-qualidade="medio"], [data-qualidade="baixo"]) .folha-fac::before { mix-blend-mode: normal; opacity: .45; }
[data-qualidade="baixo"] .abas { filter: none; }
[data-qualidade="baixo"] .cantoneira { filter: none; }
[data-qualidade="baixo"] :is(.ca-satelite, .ca-prestigio) { filter: none; }
[data-qualidade="baixo"] :is(.rolagem-resultado, .painel-rapido, .busca-resultados) { box-shadow: 0 6px 16px rgba(30, 16, 4, .35); }

/* ---------- reduced motion: the silk does not shimmer or sway, the clasp hangs still ---------- */
@media (prefers-reduced-motion: reduce) {
    #app .abas .aba, #app .abas .aba:hover, #app .abas .aba.balanca { animation: none; transition: filter var(--e-dur-toque); }
    #app .fecho-pendente, .medalhao-circulo { animation: none; }
    .rolagem-resultado, .rolagem-resultado.visivel { transition: visibility 0s, opacity var(--e-dur-toque); }
    .pe-marcador, .cr-passo, .ff-coluna, .ff-pericia-nome { transition: none; }
}

/* ================= ETAPA 3: markers of the scene, reactions, the card of an effect on the target ================= */
.pr-marcadores { display: flex; flex-wrap: wrap; gap: 0 12px; }
.pr-marcadores .pr-check { margin-top: 4px; }
.pr-reacoes:empty { display: none; }
.alvo-cartao { font: 1.02em/1.45 var(--serif); }
.alvo-texto { margin: 0 0 .6em; font-size: 1.08em; }
.alvo-teste { margin: 0 0 .6em; font-style: italic; }
.alvo-teste .ok { color: #2f6b2a; }
.alvo-teste .falha { color: var(--tinta-vermelha, #7a1a12); }
.alvo-defesa { display: flex; align-items: center; gap: 8px; margin: 0 0 .6em; font-style: italic; }
.alvo-defesa input { width: 5em; }
.alvo-quem { display: grid; gap: 4px; margin: 0; padding: 8px 12px; border: 1px solid color-mix(in srgb, currentColor 25%, transparent); border-radius: 4px; }
.alvo-quem legend { font: italic .95em var(--serif); }
.alvo-quem label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.alvo-quem small { opacity: .7; }
.alvo-nota { margin: .6em 0 0; font: italic .88em var(--serif); opacity: .75; }
.alvo-quem label { text-transform: none; letter-spacing: 0; font: 1em var(--serif); }

/* the framing of the photo (23/10): a small tag over its corner, only with a photo and an editable sheet */
.ff-ajustar {
    position: absolute; z-index: 2; padding: .35cqw .9cqw; border: .2cqw solid color-mix(in srgb, var(--tinta) 60%, transparent); border-radius: .6cqw;
    background: color-mix(in srgb, var(--papel, #efe3c4) 88%, transparent); color: var(--tinta); font: italic 1.9cqw/1 var(--serif); cursor: pointer;
    opacity: .78; transition: opacity .2s;
}
.ff-foto:not(.tem) ~ .ff-ajustar:not(.ff-montar) { display: none; }
.ff-montar { opacity: .78; }
.ff-foto.tem:hover ~ .ff-ajustar, .ff-ajustar:hover, .ff-ajustar:focus-visible { opacity: 1; }
.ff-ajustar:hover { border-color: var(--tinta-vermelha); color: var(--tinta-vermelha); }
body.ficha-arquivada .ff-ajustar, body.ficha-arquivada .retrato-montar { display: none; }
body.ficha-arquivada .retrato-ajustar { display: none; }