/*   CSS FILE HEADER #
 *
 *   File:         [mesa.css]
 *   Author(s):    ['Pedro H.F Matias']
 *   Date:         ['14.10.2026']
 *   Version:      ['0.1.0']
 *   Description:  ['Mesa do Mestre (apps/mesa): candle-lit wood table, leather bar, campaigns as books, papyrus sheets of the players and the log scroll, brass and wax. Taken from the approved prototype (prototipos/mesa-do-mestre, 14/10); the sign-in look lives in apps/comum/entrada.css and the master notebook in apps/ficha/css/caderno.css. Numbers in lining figures (Cormorant). Desktop only.']
 */

/* ---------- fonts (local, OFL; Dalingia is Daniel's, lowercase only, no digits) ---------- */
@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; }
/* numbers: Cormorant Garamond has lining figures (IM Fell only old-style ones: its 0 looks like an o) */
@font-face { font-family: 'Cormorant Garamond'; src: url('../../comum/fontes/cormorant-garamond-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('../../comum/fontes/cormorant-garamond-latin-500-normal.woff2') format('woff2'); font-weight: 400 500; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('../../comum/fontes/cormorant-garamond-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
/* names: Pirata One (OFL), a blackletter whose S, G and C do not look alike (UnifrakturMaguntia read "Sombra" as "Gombra") */
@font-face { font-family: 'Pirata One'; src: url('../../comum/fontes/pirata-one-latin-400-normal.woff2') format('woff2'); font-display: swap; }

:root {
    --e-tinta: #3a2414;
    --e-tinta-2: #4e341d;
    --e-tinta-vermelha: #8a1b11;
    /* small notes on the papyrus (dates, labels of the attributes): >= 4.5:1 even near the darker edge of the sheet (26/10) */
    --e-tinta-3: #533b22;
    --e-tinta-apagada: #533b22;
    --e-papiro: #e9dab3;
    --e-madeira: #2a1a10;
    --e-ouro-claro: #f3d98e;
    --e-ouro: #d9b25a;
    --e-ouro-escuro: #6d4f17;
    --e-luz-texto: #dccba4;
    --e-luz-texto-2: #c4b08a;
    --e-hp: #9c2b22;
    --e-mp: #5b36b8;
    --e-boa: #3d6a35;
    --e-uncial: 'Dalingia', 'IM Fell English', Georgia, serif;
    --e-texto: 'IM Fell English', 'Palatino Linotype', Georgia, serif;
    --e-sc: 'IM Fell English SC', 'IM Fell English', Georgia, serif;
    --e-nome: 'Pirata One', 'IM Fell English', serif;
    --e-num: 'Cormorant Garamond', Georgia, serif;
    --e-ease-tinta: cubic-bezier(.2, .8, .2, 1);
    --latao: linear-gradient(160deg, #fff0bf 0%, #e2b955 22%, #9a6d22 55%, #c99a3a 80%, #4d330b 100%);
    --tex-papiro: radial-gradient(ellipse at 50% 45%, transparent 52%, rgba(96, 58, 22, .32) 100%), url('../../comum/img/grao.webp') 0 0 / 256px, url('../../comum/img/papiro.webp') 0 0 / 1200px, #dcc89a;
    --tex-couro: linear-gradient(160deg, rgba(120, 76, 40, .55), rgba(40, 22, 10, .75)), url('../../comum/img/couro.webp') 0 0 / 600px, #4a2e18;
    color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: #0c0805; }
body {
    min-height: 100vh;
    min-width: 1240px;
    color: var(--e-luz-texto);
    font-family: var(--e-texto);
    font-size: 17px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    font-variant-numeric: lining-nums;
    background:
        linear-gradient(180deg, rgba(20, 12, 7, .2), rgba(6, 4, 2, .5)),
        url('../../comum/img/madeira.webp') center top / 1024px 1024px repeat,
        #2a1a10;
    background-attachment: fixed;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.uncial { font-family: var(--e-uncial); font-weight: 400; text-transform: lowercase; letter-spacing: .01em; }
:focus-visible { outline: 2px solid #e2b955; outline-offset: 2px; }

/* ---------- the room light: warm pool high on the left, darkness to the edges ---------- */
.luz-sala {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(ellipse 85% 75% at 30% 0%, transparent 0, transparent 30%, rgba(8, 5, 2, .45) 70%, rgba(3, 2, 1, .82) 100%);
}
.luz-sala span {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 55% 45% at 30% 2%, rgba(255, 196, 120, .2), rgba(255, 160, 80, .06) 55%, transparent 80%);
    animation: tremer 4.3s ease-in-out infinite;
}
body[data-tela="entrada"] .luz-sala { background: radial-gradient(circle at 50% 18%, transparent 0, transparent 14%, rgba(10, 6, 3, .4) 40%, rgba(3, 2, 1, .88) 85%); }
body[data-tela="entrada"] .luz-sala span { background: radial-gradient(circle at 50% 14%, rgba(255, 206, 130, .34), rgba(255, 160, 80, .08) 30%, transparent 55%); }
@keyframes tremer {
    0%, 100% { opacity: 1; } 13% { opacity: .9; } 21% { opacity: .97; } 38% { opacity: .86; }
    52% { opacity: 1; } 67% { opacity: .92; } 81% { opacity: .98; }
}
#palco { position: relative; z-index: 1; }

.chama {
    position: absolute; left: 50%; top: 50%;
    width: 25%; aspect-ratio: 40 / 92;
    transform: translate(-50%, -88%);
    transform-origin: 50% 92%;
    animation: chama 2.3s ease-in-out infinite;
}
.chama svg { display: block; width: 100%; height: 100%; }
@keyframes chama {
    0%, 100% { transform: translate(-50%, -88%) scale(1, 1) skewX(0deg); opacity: 1; }
    14% { transform: translate(-50%, -88%) scale(.95, 1.07) skewX(2.5deg); opacity: .94; }
    29% { transform: translate(-50%, -88%) scale(1.03, .94) skewX(-1.5deg); }
    47% { transform: translate(-50%, -88%) scale(.97, 1.04) skewX(1deg); opacity: .96; }
    63% { transform: translate(-50%, -88%) scale(1.02, .97) skewX(-2.5deg); }
    82% { transform: translate(-50%, -88%) scale(.96, 1.05) skewX(1.5deg); opacity: .93; }
}

/* ---------- shared pieces ---------- */
.avatar {
    display: inline-grid; place-items: center; flex: none;
    width: 34px; height: 34px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .25), transparent 60%), var(--cor, #5a3a1a);
    color: #f8ecd0; font-family: var(--e-sc); font-size: 18px; line-height: 1;
    box-shadow: 0 0 0 2px #c99a3a, 0 0 0 3px #3a2507, 0 2px 4px rgba(0, 0, 0, .5);
}
.avatar-mini { width: 22px; height: 22px; font-size: 12px; box-shadow: 0 0 0 1.5px #b8872f, 0 1px 2px rgba(0, 0, 0, .4); }
.retrato {
    display: inline-grid; place-items: center; flex: none;
    width: 62px; height: 62px; border-radius: 50%;
    background: radial-gradient(circle at 40% 30%, rgba(255, 236, 190, .35), transparent 65%), var(--cor);
    box-shadow: inset 0 0 0 3px rgba(20, 10, 2, .35), 0 0 0 3px #b8872f, 0 0 0 4.5px #3a2507, 0 3px 6px rgba(0, 0, 0, .45);
    /* same face as the name on the card: the blackletter I read as J */
    color: #f3e3bd; font-family: 'Cormorant Garamond', 'IM Fell English', serif; font-weight: 700; font-size: 34px; line-height: 1;
}
.retrato span { transform: translateY(2px); text-shadow: 0 2px 2px rgba(0, 0, 0, .5); }
.retrato-mini { width: 30px; height: 30px; font-size: 17px; box-shadow: 0 0 0 2px #b8872f, 0 1px 2px rgba(0, 0, 0, .5); }
.retrato-grande { width: 112px; height: 112px; font-size: 64px; border-radius: 6px; }

.botao-latao {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 16px;
    border: 1px solid #3a2507; border-radius: 4px;
    background: var(--latao);
    color: #2a1608; font-family: var(--e-sc); font-size: 16px; letter-spacing: .02em;
    text-shadow: 0 1px 0 rgba(255, 240, 200, .5);
    box-shadow: inset 0 1px 0 rgba(255, 250, 220, .6), inset 0 -2px 3px rgba(60, 35, 5, .45), 0 2px 4px rgba(0, 0, 0, .45);
    transition: filter 160ms, transform 160ms;
}
.botao-latao:hover { filter: brightness(1.08); transform: translateY(-1px); }
.botao-latao:active { transform: translateY(1px); }
.botao-p { padding: 4px 12px; font-size: 14px; }
.botao-aceitar {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1.5px solid var(--e-ouro-escuro); border-radius: 4px; background: rgba(109, 79, 23, .14);
    color: var(--e-tinta); font-family: var(--e-sc); letter-spacing: .02em;
    transition: background 160ms, color 160ms;
}
.botao-aceitar:hover, .botao-aceitar:focus-visible { background: var(--e-ouro-escuro); color: #fbf0d2; }
.botao-texto { background: none; border: 0; color: var(--e-tinta-2); font-style: italic; text-decoration: underline; text-underline-offset: 3px; }

.carimbo-teste {
    display: inline-block;
    padding: 1px 8px 0;
    border: 1.5px solid rgba(176, 38, 27, .75); border-radius: 3px;
    color: #c9473a; font-family: var(--e-sc); font-size: 12px; letter-spacing: .06em; text-transform: lowercase;
    transform: rotate(-2.5deg);
    opacity: .85;
}

.plaqueta {
    display: inline-block; padding: 3px 12px 2px;
    background: var(--latao); border: 1px solid #3a2507; border-radius: 2px;
    color: #2a1608; font-family: var(--e-sc); font-size: 14px; letter-spacing: .05em; white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255, 250, 220, .6), 0 1px 3px rgba(0, 0, 0, .5);
}

.tacha {
    position: absolute; left: 50%; top: 9px; width: 14px; height: 14px; margin-left: -7px; z-index: 2;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff6d6, #c7952f 50%, #4d330b);
    box-shadow: 0 2px 2px rgba(0, 0, 0, .6);
}

/* ink that has just been written: a red bloom that settles */
.tinta-nova { animation: tinta 1.6s var(--e-ease-tinta); }
@keyframes tinta {
    0% { background-color: rgba(176, 38, 27, .35); box-shadow: 0 0 0 6px rgba(176, 38, 27, .18); }
    100% { background-color: transparent; box-shadow: 0 0 0 0 rgba(176, 38, 27, 0); }
}
g.tinta-nova { animation: tinta-g 1.6s var(--e-ease-tinta); }
@keyframes tinta-g { 0% { filter: drop-shadow(0 0 10px rgba(200, 40, 25, .95)); } 100% { filter: none; } }

/* ---------- top bar: a leather strap with brass rivets ---------- */
.barra {
    position: sticky; top: 0; z-index: 20;
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px;
    height: 68px; padding: 0 26px 0 18px;
    background: var(--tex-couro);
    border-bottom: 2px solid #1c0f06;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .55), inset 0 -1px 0 rgba(243, 217, 142, .12);
}
.barra::before {
    content: ''; position: absolute; inset: 6px 8px; pointer-events: none;
    border: 1.5px dashed rgba(243, 217, 142, .3); border-radius: 3px;
}
.barra-marca { display: flex; align-items: center; gap: 12px; }
.barra-vela { position: relative; width: 46px; height: 46px; margin-top: 4px; }
.barra-vela > svg { width: 100%; height: 100%; }
.barra-nome {
    font-family: var(--e-uncial); text-transform: lowercase; font-size: 34px; line-height: 1;
    background: linear-gradient(180deg, #fff1c4 0%, #f0cf7e 45%, #b8862b 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 0 rgba(20, 10, 2, .8));
}
.barra-sub { font-family: var(--e-uncial); font-size: 21px; color: var(--e-luz-texto); margin-top: 4px; }
.trilha { display: flex; align-items: center; gap: 10px; font-size: 17px; min-width: 0; }
.trilha-link { background: none; border: 0; padding: 2px 0; color: var(--e-ouro); font-style: italic; border-bottom: 1px solid rgba(217, 178, 90, .35); }
.trilha-link:hover { color: var(--e-ouro-claro); border-color: var(--e-ouro-claro); }
.trilha-sep { color: rgba(217, 178, 90, .55); font-size: 14px; }
.trilha-aqui { color: var(--e-luz-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-dir { display: flex; align-items: center; gap: 16px; }
.btn-som { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 2px 0; color: var(--e-ouro); font-style: italic; border-bottom: 1px solid rgba(217, 178, 90, .35); cursor: pointer; }
.btn-som:hover { color: var(--e-ouro-claro); border-color: var(--e-ouro-claro); }
.barra-conta { display: flex; align-items: center; gap: 12px; }
.barra-conta .carimbo-teste { margin-right: 10px; }
.conta-texto { display: flex; flex-direction: column; line-height: 1.1; }
.conta-texto b { font-weight: 400; font-size: 17px; color: #f3e6c8; }
.papel { font-family: var(--e-sc); font-size: 13px; letter-spacing: .05em; }
.papel-mestre { color: #e86a55; }
.papel-jogador { color: #9fc0de; }
.botao-sair {
    margin-left: 6px; padding: 5px 14px;
    background: rgba(20, 10, 4, .45); border: 1px solid rgba(217, 178, 90, .45); border-radius: 4px;
    color: var(--e-ouro-claro); font-family: var(--e-sc); font-size: 15px;
}
.botao-sair:hover { background: rgba(217, 178, 90, .15); }

/* ---------- screens ---------- */
.tela { max-width: 1520px; margin: 0 auto; padding: 34px 40px 60px; }
.tela-cab { margin-bottom: 26px; }
.tela-cab h2 { margin: 0; font-size: 46px; line-height: 1; color: var(--e-ouro-claro); text-shadow: 0 2px 2px rgba(0, 0, 0, .7), 0 0 24px rgba(255, 170, 80, .18); }
.tela-cab p { margin: 6px 0 0; font-style: italic; color: var(--e-luz-texto-2); max-width: 70ch; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
.faixa-titulo { margin: 46px 0 18px; font-size: 30px; color: var(--e-luz-texto-2); text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }

/* ---------- 2. campaign list: books lying on the table ---------- */
.livros { display: flex; flex-wrap: wrap; gap: 40px 46px; align-items: flex-start; }
.livro-pouso { width: 250px; }
.livro-pouso:nth-child(2n) .livro { --rot: 1.6deg; }
.livro-pouso:nth-child(3n) .livro { --rot: -.8deg; }
.livro {
    --rot: -1.8deg;
    --c1: #8e5d36; --c2: #3b2313;
    position: relative; display: block; width: 250px; height: 330px; padding: 0;
    border: 0; background: none; text-align: center;
    transform: rotate(var(--rot));
    transition: transform 320ms var(--e-ease-tinta), filter 320ms;
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .6)) drop-shadow(0 18px 22px rgba(0, 0, 0, .5));
}
.livro:hover, .livro:focus-visible { transform: rotate(var(--rot)) translateY(-8px) scale(1.02); filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .5)) drop-shadow(0 28px 30px rgba(0, 0, 0, .55)) brightness(1.08); }
.capa-sangue { --c1: #7a2a22; --c2: #2e0d0a; }
.capa-verde { --c1: #3f5a3a; --c2: #142012; }
.capa-velha { --c1: #6a5a48; --c2: #2a231b; }
.livro-folhas { position: absolute; inset: 6px -6px -6px 10px; border-radius: 2px 6px 6px 2px; background: repeating-linear-gradient(180deg, #efe0b9 0 2px, #c9b386 2px 3px); }
.livro-capa {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
    padding: 46px 26px 26px 34px;
    border-radius: 3px 8px 8px 3px;
    background: linear-gradient(90deg, rgba(0, 0, 0, .45) 0 16px, rgba(255, 220, 160, .08) 16px 18px, transparent 18px), radial-gradient(circle at 30% 15%, rgba(255, 216, 160, .2), transparent 60%), url('../../comum/img/couro.webp') 0 0 / 500px, linear-gradient(150deg, var(--c1), var(--c2));
    background-blend-mode: normal, normal, overlay, normal;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5), inset 0 0 30px rgba(0, 0, 0, .45);
}
.livro-moldura { position: absolute; inset: 14px 14px 14px 28px; border: 2px solid rgba(226, 185, 85, .75); border-radius: 2px; box-shadow: inset 0 0 0 4px transparent, inset 0 0 0 5px rgba(226, 185, 85, .35); pointer-events: none; }
.livro-moldura::before, .livro-moldura::after { content: '◆'; position: absolute; left: 50%; transform: translateX(-50%); color: #e2b955; font-size: 12px; line-height: 1; }
.livro-moldura::before { top: -7px; }
.livro-moldura::after { bottom: -7px; }
.livro-nome {
    font-family: var(--e-nome); font-size: 34px; line-height: 1.05;
    background: linear-gradient(180deg, #fff1c4 0%, #f0cf7e 45%, #b8862b 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 0 rgba(20, 10, 2, .8));
    text-wrap: balance;
}
.livro-plaqueta { margin-top: auto; display: inline-block; padding: 3px 12px 2px; background: var(--latao); border: 1px solid #3a2507; border-radius: 2px; color: #2a1608; font-family: var(--e-sc); font-size: 14px; letter-spacing: .05em; box-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.livro-selos { display: flex; gap: 6px; margin-top: 16px; }
.selo-jogador {
    display: grid; place-items: center; width: 30px; height: 30px;
    border-radius: 47% 53% 50% 48% / 52% 46% 54% 48%;
    background: radial-gradient(circle at 38% 32%, rgba(255, 255, 255, .3), transparent 55%), var(--cor);
    box-shadow: 0 2px 2px rgba(0, 0, 0, .5), inset 0 0 0 3px rgba(0, 0, 0, .25);
    color: rgba(255, 236, 210, .85); font-family: var(--e-sc); font-size: 15px;
}
.livro.arquivada { filter: grayscale(.7) brightness(.7) drop-shadow(0 3px 3px rgba(0, 0, 0, .6)); }
.livro-legenda { margin: 22px 0 0; text-align: center; font-style: italic; color: var(--e-luz-texto); text-shadow: 0 1px 2px rgba(0, 0, 0, .8); line-height: 1.35; }
.livro-legenda > span { color: var(--e-luz-texto-2); font-size: 15px; }
.livro-novo {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    width: 250px; height: 330px; padding: 24px;
    border: 2px dashed rgba(217, 178, 90, .5); border-radius: 6px;
    background: rgba(20, 12, 6, .35); color: var(--e-ouro);
    transform: rotate(1.2deg);
    transition: background 200ms, color 200ms, border-color 200ms;
}
.livro-novo:hover { background: rgba(217, 178, 90, .1); color: var(--e-ouro-claro); border-color: var(--e-ouro-claro); }
.livro-novo svg { width: 64px; height: 64px; }
.livro-novo-nome { font-family: var(--e-uncial); font-size: 30px; }
.livro-novo-desc { font-style: italic; font-size: 15px; color: var(--e-luz-texto-2); }

/* ---------- 3. a campaign ---------- */
/* "Pular para os personagens" (mesa.js telaCampanha): the first Tab of the page, shown only while it has the focus */
.pular-folhas {
    position: fixed; top: 10px; left: 50%; z-index: 60; padding: 8px 16px; border-radius: 4px; transform: translate(-50%, -160%);
    background: #1d1009; border: 1px solid var(--e-ouro); color: var(--e-ouro-claro); font-family: var(--e-sc); font-size: 15px; text-decoration: none;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .6);
}
.pular-folhas:focus-visible { transform: translate(-50%, 0); outline: 2px solid var(--e-ouro-claro); outline-offset: 2px; }
.folhas:focus { outline: none; }
.cab-campanha { display: flex; align-items: center; gap: 22px; margin-bottom: 30px; }
.nome-campanha {
    margin: 0; font-family: var(--e-nome); font-weight: 400; font-size: 56px; line-height: 1;
    background: linear-gradient(180deg, #fff1c4 0%, #f0cf7e 45%, #b8862b 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 0 rgba(20, 10, 2, .8)) drop-shadow(0 0 22px rgba(255, 170, 80, .2));
}
.cab-meta { margin: 10px 0 0; line-height: 1.7; font-style: italic; color: var(--e-luz-texto-2); text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
.cab-acoes { margin-left: auto; display: flex; gap: 12px; }
/* two sheets per row, big enough to read at the table (Daniel, 15/10) */
.campanha-corpo { display: grid; grid-template-columns: 1fr 400px; gap: 36px; align-items: start; }
.folhas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 38px 34px; }
.folha {
    position: relative; padding: 32px 30px 20px; font-size: 17px;
    color: var(--e-tinta); background: var(--tex-papiro);
    border-radius: 2px;
    transform: rotate(var(--rot));
    box-shadow: 0 2px 3px rgba(0, 0, 0, .55), 0 16px 26px rgba(0, 0, 0, .45);
    cursor: pointer;
    transition: transform 300ms var(--e-ease-tinta), box-shadow 300ms;
}
.folha:hover, .folha:focus-visible { transform: rotate(0deg) translateY(-6px); box-shadow: 0 3px 4px rgba(0, 0, 0, .5), 0 26px 36px rgba(0, 0, 0, .5); outline: none; }
.folha-topo { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.folha-nome { flex: 1; min-width: 0; }
/* the name of the character in a legible bold serif: the blackletter read "Ilo" as "Jlo" (26/10); the campaign title keeps it */
.folha-nome h3 { margin: 0; font-family: var(--e-num); font-weight: 700; font-size: 36px; line-height: 1; color: #2a170a; }
.folha-nome p { margin: 3px 0 0; font-style: italic; font-size: 15px; color: var(--e-tinta-2); }
/* a dead character (ficha.morto): the card fades to ash, the name struck through */
.folha.morta { filter: grayscale(1) brightness(.92); opacity: .78; }
.folha.morta .folha-nome h3 { text-decoration: line-through 1.5px rgba(42, 23, 10, .55); }
.folha-morta { font-family: var(--e-sc); font-style: normal; letter-spacing: .08em; color: #2a170a; }
.nivel { display: grid; place-items: center; width: 58px; height: 58px; border: 2.5px solid var(--e-tinta); border-radius: 50%; line-height: 1; flex: none; }
.nivel small { font-family: var(--e-sc); font-size: 12px; margin-top: 7px; color: var(--e-tinta-2); }
.nivel b { font-weight: 400; font-size: 25px; color: var(--e-tinta-vermelha); margin-top: -10px; }
.recurso { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; margin: 4px 0; padding: 1px 3px; border-radius: 3px; }
.recurso-rotulo { font-family: var(--e-sc); font-size: 15px; }
.recurso-trilho { position: relative; height: 12px; border: 1.5px solid var(--e-tinta); border-radius: 1px; background: rgba(255, 245, 220, .35); overflow: hidden; }
.recurso-cheio { position: absolute; inset: 0 auto 0 0; background: repeating-linear-gradient(115deg, rgba(0, 0, 0, .12) 0 2px, transparent 2px 5px), var(--cor-rec); }
.hp { --cor-rec: linear-gradient(180deg, #b5382c, #7c1d15); }
.mp { --cor-rec: linear-gradient(180deg, #7652d0, #432696); }
.recurso-num { font-size: 15px; min-width: 52px; text-align: right; }
.recurso-num b { font-weight: 400; font-size: 18px; }
.folha-atr { display: grid; grid-template-columns: repeat(8, 1fr); margin: 12px 0 4px; border: 1.5px solid rgba(58, 36, 20, .7); border-radius: 2px; }
.folha-atr span { display: flex; flex-direction: column; align-items: center; padding: 3px 0 2px; line-height: 1.05; border-right: 1px solid rgba(58, 36, 20, .3); }
.folha-atr span:last-child { border-right: 0; }
.folha-atr small { font-family: var(--e-sc); font-size: 12px; color: var(--e-tinta-2); }
.folha-atr b { font-weight: 400; font-size: 18px; color: var(--e-tinta-vermelha); }
.folha-atr span.ajustado { background: rgba(176, 38, 27, .12); box-shadow: inset 0 -2px 0 rgba(176, 38, 27, .75); }
.folha-def { margin: 6px 0 0; font-size: 15px; color: var(--e-tinta-2); }
.folha-def b { font-weight: 400; color: var(--e-tinta); }
.folha-cond { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; min-height: 26px; }
.cond-chip { display: inline-flex; align-items: center; gap: 6px; padding: 1px 10px 1px 2px; border: 1.2px dashed rgba(156, 43, 34, .8); border-radius: 13px; font-size: 14px; color: #6e1e16; }
.cond-chip b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #8e2a1f; color: #f7e6c8; font-weight: 400; font-size: 13px; }
.cond-chip.boa { border-color: rgba(61, 106, 53, .8); color: #2c4f26; }
.cond-chip.boa b { background: #3d6a35; }
.cond-nenhuma { font-style: italic; font-size: 14px; color: var(--e-tinta-3); }
.folha-pe { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid rgba(58, 36, 20, .3); font-size: 15px; }
.dono { display: inline-flex; align-items: center; gap: 7px; font-style: italic; }
.folha-ajustes { font-family: var(--e-sc); font-size: 13px; color: var(--e-tinta-vermelha); border-bottom: 1px solid currentColor; }
.folha-ajustes.vistos { color: var(--e-tinta-apagada); border-bottom-style: dotted; text-decoration: none; }
.folha-ajustes.novos { text-decoration: none; }
.folha-abrir { display: inline-flex; align-items: center; min-height: 28px; margin-left: auto; color: #74160f; font-style: italic; }
.mesa-vazia { grid-column: 1 / -1; padding: 40px; text-align: center; color: var(--e-tinta); background: var(--tex-papiro); transform: rotate(-.6deg); box-shadow: 0 16px 26px rgba(0, 0, 0, .45); }
.mesa-vazia h3 { margin: 0 0 8px; font-size: 34px; }
.mesa-vazia p { margin: 0 auto; max-width: 46ch; font-style: italic; }
.nota-arquivada { margin: 0 0 22px; font-style: italic; color: var(--e-luz-texto-2); text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
.nota-jogador { margin: 26px 0 0; font-style: italic; color: var(--e-luz-texto-2); text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }

/* the log: a long scroll with wooden rods */
.registro { position: sticky; top: 92px; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .55)) drop-shadow(0 18px 24px rgba(0, 0, 0, .45)); }
.rolo { display: block; height: 20px; margin: 0 -14px; border-radius: 10px; background: linear-gradient(180deg, #6b4426, #3b2313 60%, #22140a); position: relative; z-index: 1; box-shadow: inset 0 2px 1px rgba(255, 220, 170, .25); }
.rolo::before, .rolo::after { content: ''; position: absolute; top: -3px; width: 18px; height: 26px; border-radius: 6px; background: var(--latao); }
.rolo::before { left: -6px; }
.rolo::after { right: -6px; }
.registro-papel {
    max-height: calc(100vh - 220px); overflow: auto;
    margin: -6px 0; padding: 26px 26px 22px;
    color: var(--e-tinta); background: var(--tex-papiro);
    scrollbar-width: thin; scrollbar-color: rgba(58, 36, 20, .45) transparent;
}
.registro-papel h3 { margin: 0; font-size: 32px; line-height: 1.1; }
.registro-sub { margin: 2px 0 14px; font-style: italic; font-size: 15px; color: var(--e-tinta-2); }
.filtros { display: flex; gap: 6px; margin-bottom: 12px; }
.filtro { padding: 2px 11px; border: 1px solid rgba(58, 36, 20, .45); border-radius: 12px; background: transparent; font-size: 14px; color: var(--e-tinta-2); }
.filtro.ativo { background: var(--e-tinta); color: #f0e2bf; border-color: var(--e-tinta); }
.eventos { list-style: none; margin: 0; padding: 0; }
.ev { position: relative; padding: 11px 4px 11px 18px; border-bottom: 1px dashed rgba(58, 36, 20, .35); }
.ev:last-child { border-bottom: 0; }
.ev-marca { position: absolute; left: 0; top: 17px; width: 8px; height: 8px; border-radius: 50%; background: rgba(58, 36, 20, .45); }
.ev-mestre .ev-marca { background: radial-gradient(circle at 35% 30%, #e2574a, #8e1b14); width: 10px; height: 10px; left: -1px; box-shadow: 0 1px 1px rgba(0, 0, 0, .3); }
.ev-desfeito .ev-marca { background: transparent; border: 1.5px solid #8e1b14; }
.ev-linha1 { display: flex; align-items: center; gap: 7px; font-size: 15px; }
.ev-linha1 b { font-weight: 400; }
.ev-alvo { font-style: italic; color: var(--e-tinta-2); }
.ev-quando { margin-left: auto; font-size: 14px; color: var(--e-tinta-2); white-space: nowrap; }
.ev-texto { margin: 4px 0 0; font-size: 16px; }
.ev-tag { font-family: var(--e-sc); font-size: 12px; color: var(--e-tinta-vermelha); border: 1px solid currentColor; border-radius: 2px; padding: 0 5px; margin-right: 7px; vertical-align: 1px; }
.ev-tag-desf { color: var(--e-tinta-3); }
.ev-tag-novo { color: #f7e3cf; background: var(--e-tinta-vermelha); border-color: var(--e-tinta-vermelha); }
.ev-motivo { margin: 3px 0 0; font-style: italic; font-size: 15px; color: #6e3a20; }
.ev-desfazer { margin-top: 5px; padding: 0; background: none; border: 0; font-family: var(--e-sc); font-size: 13px; color: var(--e-tinta-vermelha); text-decoration: underline; text-underline-offset: 3px; }
.ev-desfazer:hover { color: #6e1210; }
.ev.desfeito .ev-texto, .ev.desfeito .ev-motivo { text-decoration: line-through; text-decoration-color: rgba(176, 38, 27, .7); opacity: .7; }
.ev-desfeito-nota { margin: 3px 0 0; font-size: 14px; font-style: italic; color: var(--e-tinta-3); }
.ev-vazio { padding: 12px 0; font-style: italic; color: var(--e-tinta-3); }

/* "the master adjusted…" note for the player */
.aviso-mestre {
    position: relative; display: flex; gap: 18px; align-items: flex-start;
    margin: 0 0 30px; padding: 20px 24px 18px 22px; max-width: 760px;
    color: var(--e-tinta); background: var(--tex-papiro);
    border-left: 4px solid var(--e-tinta-vermelha);
    transform: rotate(-.5deg);
    box-shadow: 0 2px 3px rgba(0, 0, 0, .55), 0 14px 22px rgba(0, 0, 0, .45);
}
.aviso-selo {
    display: grid; place-items: center; flex: none; width: 54px; height: 54px;
    border-radius: 47% 53% 50% 48% / 52% 46% 54% 48%;
    background: radial-gradient(circle at 38% 32%, #e2574a, #a3261b 55%, #5e120c);
    box-shadow: 0 2px 3px rgba(0, 0, 0, .45), inset 0 0 0 5px rgba(90, 15, 10, .45);
    color: rgba(255, 220, 200, .75); font-family: var(--e-uncial); font-size: 30px;
}
.aviso-corpo h3 { margin: 0 0 6px; font-family: var(--e-uncial); font-weight: 400; font-size: 27px; line-height: 1.1; text-transform: lowercase; color: #6e1e16; }
.aviso-corpo ul { margin: 0 0 12px; padding: 0; list-style: none; }
.aviso-corpo li { margin: 4px 0; }
.aviso-corpo li > span { font-size: 14px; color: var(--e-tinta-3); }
.aviso-corpo li em { display: block; font-size: 15px; color: #6e3a20; }

/* master marks: a red ink underline, the reason in the tooltip */
.ajustado { position: relative; }
:is(.pf-nome h2, .pf-titulo, .pf-pontos, .pf-pericias li, .recurso, .pf-ouro, h4, .pf-notas).ajustado { box-shadow: inset 0 -2px 0 rgba(176, 38, 27, .75); }
:is(.pf-nivel).ajustado { border-color: var(--e-tinta-vermelha); }
:is(.efeitos, .bonus, .pf-inv).ajustado { outline: 1.5px dashed rgba(176, 38, 27, .6); outline-offset: 2px; }
.pf-pericias li.ajustado::after, .recurso.ajustado::after {
    content: ''; position: absolute; right: -9px; top: 50%; width: 7px; height: 7px; margin-top: -4px;
    border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e2574a, #8e1b14);
}
.tri.ajustado polygon { stroke: #b0261b; stroke-width: 3.4; fill: rgba(176, 38, 27, .08); }

/* ---------- dialog: a scroll ---------- */
dialog.pergaminho {
    color-scheme: light;
    width: 520px; padding: 30px 34px 24px; border: 0;
    color: var(--e-tinta); background: var(--tex-papiro);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .7);
}
dialog.pergaminho::backdrop { background: rgba(5, 3, 1, .6); }
dialog[open] { animation: subir 260ms var(--e-ease-tinta); }
.dialogo-form h3 { margin: 0 0 16px; font-size: 36px; }
.marcar { display: flex; align-items: center; gap: 8px; margin: 5px 0; font-size: 16px; cursor: pointer; }
.marcar small { color: var(--e-tinta-3); font-style: italic; }
.marcar input { accent-color: #6e1e16; }
.dialogo-pe { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: 14px; }

/* ---------- toasts: wax-sealed notes ---------- */
#toasts { position: fixed; left: 26px; bottom: 26px; z-index: 60; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.toast {
    display: flex; align-items: center; gap: 12px; max-width: 420px;
    padding: 12px 18px 12px 12px;
    color: var(--e-tinta); background: var(--tex-papiro);
    box-shadow: 0 2px 3px rgba(0, 0, 0, .5), 0 12px 22px rgba(0, 0, 0, .45);
    font-size: 16px;
    animation: subir 260ms var(--e-ease-tinta);
    transition: opacity 400ms, transform 400ms;
}
.toast.saindo { opacity: 0; transform: translateX(-30px) rotate(-3deg); }
.toast-selo { flex: none; width: 26px; height: 26px; border-radius: 47% 53% 50% 48% / 52% 46% 54% 48%; background: radial-gradient(circle at 38% 32%, #e2574a, #a3261b 55%, #5e120c); box-shadow: inset 0 0 0 3px rgba(90, 15, 10, .45); }

@media (prefers-reduced-motion: reduce) {
    .luz-sala span, .chama { animation: none; }
    .tinta-nova, g.tinta-nova { animation-duration: 1ms; }
}

/* ---------- the real Mesa (14/10): numbers, the connect card, the coming soon buttons, the log links ---------- */
.num, .nivel b, .recurso-num, .folha-atr b, .folha-def b, .cond-chip b, .ev-quando, .livro-legenda .num {
    font-family: var(--e-num); font-weight: 600; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: 'lnum' 1, 'tnum' 1;
}
.nivel b { font-size: 27px; margin-top: -8px; }
.recurso-num b { font-weight: 600; font-size: 19px; }
.folha-atr b { font-weight: 600; font-size: 19px; }
.folha-def b { font-weight: 600; font-size: 17px; }
.cond-chip b { font-weight: 600; font-size: 14px; }
.ev-texto .num, .ev-motivo .num { font-size: 1.1em; }
.barra .en-conta { gap: 12px; }
.trilha-link { cursor: pointer; text-decoration: none; }
.livro { cursor: pointer; }
.capa-castanho { --c1: #6b4a2a; --c2: #241509; }
.capa-azul { --c1: #2f4a66; --c2: #0f1a26; }
.livro-sem { --c1: #4a3a2a; --c2: #1e160e; }
.botao-fantasma { background: rgba(20, 10, 4, .45); border: 1px solid rgba(217, 178, 90, .45); border-radius: 4px; color: var(--e-ouro-claro); font-family: var(--e-sc); font-size: 15px; padding: 6px 14px; }
.botao-fantasma:hover { background: rgba(217, 178, 90, .15); }
.ev-link { display: inline-block; margin-top: 1px; padding: 4px 0; font-family: var(--e-sc); font-size: 13px; color: var(--e-tinta-vermelha); text-decoration: underline; text-underline-offset: 3px; }
.ev-link:hover { color: #6e1210; }
.ev-tag-forcado { color: #6e4608; }
.ev-jogo .ev-marca { background: rgba(58, 36, 20, .45); }
.folha-abrir { text-decoration: none; }
.folha:focus-within { outline: none; }

/* the dados/ folder is not connected: a papyrus card on the table */
.cartao-pasta {
    max-width: 640px; margin: 60px auto; padding: 34px 40px 30px; text-align: center;
    color: var(--e-tinta); background: var(--tex-papiro);
    transform: rotate(-.6deg);
    box-shadow: 0 2px 3px rgba(0, 0, 0, .55), 0 18px 28px rgba(0, 0, 0, .45);
}
.cartao-pasta h2 { margin: 0 0 8px; font-family: var(--e-uncial); font-weight: 400; font-size: 36px; text-transform: lowercase; }
.cartao-pasta p { margin: 0 0 18px; font-size: 17px; }
.cartao-pasta code { font-family: var(--e-texto); font-style: italic; color: var(--e-tinta-vermelha); }
.carregando { margin: 80px auto; text-align: center; font-style: italic; color: var(--e-luz-texto-2); }
.dialogo-form select, .dialogo-form input:not([type=checkbox]) {
    width: 100%; padding: 6px 9px; border: 1px solid rgba(58, 36, 20, .5); border-radius: 3px;
    background: rgba(255, 250, 233, .55); color: var(--e-tinta); font-size: 16px;
}
.dialogo-form .campo { display: flex; flex-direction: column; gap: 3px; margin: 0 0 12px; border: 0; padding: 0; }
.dialogo-form .campo > span, .dialogo-form legend { font-family: var(--e-sc); font-size: 14px; color: var(--e-tinta-2); }
.dialogo-form .dica { margin: 0 0 8px; font-size: 14px; font-style: italic; color: var(--e-tinta-3); }
.dialogo-form .erro { margin: 0; font-size: 15px; font-style: italic; color: var(--e-tinta-vermelha); }
.marcar .en-avatar { width: 22px; height: 22px; font-size: 12px; box-shadow: 0 0 0 1.5px #b8872f; }
.dono .en-avatar, .ev-linha1 .en-avatar { width: 22px; height: 22px; font-size: 12px; box-shadow: 0 0 0 1.5px #b8872f, 0 1px 2px rgba(0, 0, 0, .4); }
.aviso-mestre .botao-latao { margin-top: 2px; }
.vazio-livros { font-style: italic; color: var(--e-luz-texto-2); }

/* an empty papyrus: "criar minha ficha" (the creation of the real sheet, inside this campaign) */
.folha-nova {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    min-height: 330px; padding: 30px 26px; text-align: center; text-decoration: none;
    color: var(--e-tinta-2);
    transform: rotate(var(--rot));
    transition: transform 300ms var(--e-ease-tinta), filter 300ms;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45)) drop-shadow(0 14px 22px rgba(0, 0, 0, .35));
}
.folha-nova::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: var(--tex-papiro); opacity: .84;
}
.folha-nova::after {
    content: ''; position: absolute; inset: 12px; pointer-events: none;
    border: 2px dashed rgba(58, 36, 20, .45); border-radius: 3px;
}
.folha-nova:hover, .folha-nova:focus-visible { transform: rotate(0deg) translateY(-6px); color: var(--e-tinta-vermelha); outline: none; }
.folha-nova:hover::before, .folha-nova:focus-visible::before { opacity: .96; }
.folha-nova svg { width: 58px; height: 58px; }
.folha-nova-nome { font-family: var(--e-uncial); font-size: 30px; line-height: 1.05; color: var(--e-tinta); }
.folha-nova-desc { max-width: 26ch; font-style: italic; font-size: 15px; color: var(--e-tinta); }
/* a long name never runs under the level ring */
.folha-nome h3 { overflow-wrap: anywhere; line-height: 1; }

/* ---------- quick adjustments of the master on the card (HP/MP, conditions, prestige points) ---------- */
.recurso.com-rapido { grid-template-columns: 34px 1fr auto auto; }
.recurso-rotulo { font-size: 17px; }
.recurso-num { font-size: 16px; }
.rapido { display: inline-flex; align-items: center; gap: 3px; }
.rapido-b {
    display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0 0 2px;
    border: 1.5px solid rgba(58, 36, 20, .75); border-radius: 50%; background: rgba(255, 245, 220, .6);
    font: 700 20px/1 var(--e-num); color: #2a170a; cursor: pointer; transition: background .15s, color .15s;
}
.rapido-b:hover, .rapido-b:focus-visible { background: var(--e-tinta-vermelha); border-color: var(--e-tinta-vermelha); color: #f7e6c8; outline: none; }
.rapido-qtd {
    width: 44px; height: 32px; padding: 0 2px; text-align: center; font-size: 17px; color: var(--e-tinta);
    border: 0; border-bottom: 1.5px dotted rgba(58, 36, 20, .6); background: transparent; -moz-appearance: textfield;
}
.rapido-qtd::-webkit-inner-spin-button, .rapido-qtd::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.rapido-qtd:focus-visible { outline: none; border-bottom-color: var(--e-tinta-vermelha); }
.cond-chip { font-size: 15px; }
.cond-rapido { display: inline-flex; gap: 1px; margin-left: 2px; }
.cond-rapido .rapido-b { width: 24px; height: 24px; font-size: 16px; }
.cond-nova {
    height: 26px; padding: 0 6px; border: 1.2px dashed rgba(58, 36, 20, .55); border-radius: 13px; background: transparent;
    font: italic 14px var(--e-texto); color: var(--e-tinta-2); cursor: pointer;
}
.cond-nova:focus-visible { outline: none; border-color: var(--e-tinta-vermelha); }
.folha-prest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: -4px 0 14px; font-size: 15px; }
.folha-prest-rotulo { font-family: var(--e-sc); font-size: 13px; color: var(--e-tinta-3); }
.prest-chip { display: inline-flex; align-items: center; gap: 4px; }
.prest-chip b { font-weight: 600; color: var(--e-tinta-vermelha); margin-right: 2px; }
.prest-chip .rapido-b { width: 24px; height: 24px; font-size: 16px; }

/* ---------- invitations, requests and calls (20/10): a wax-sealed note like the one of the master ---------- */
.aviso-pendencias { border-left-color: #b8872f; }
.aviso-pendencias .aviso-selo { background: radial-gradient(circle at 38% 32%, #e8c46a, #a87a22 55%, #5e4310); color: rgba(255, 245, 210, .8); }
.aviso-pendencias h3 { color: #6e4a16; }
.aviso-pendencias li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.pend-botoes { display: inline-flex; gap: 8px; margin-left: auto; }
/* one or two requests (27/10): a slim strip, one line each, the small seal says what it is (the caption stays for the
   screen reader only), the answers at the end of the line */
.aviso-pendencias.compacto { align-items: center; gap: 14px; margin-bottom: 20px; padding: 7px 18px 7px 14px; }
.aviso-pendencias.compacto .aviso-selo { width: 32px; height: 32px; font-size: 19px; box-shadow: 0 1px 2px rgba(0, 0, 0, .45), inset 0 0 0 3px rgba(94, 67, 16, .45); }
.aviso-pendencias.compacto .aviso-corpo { flex: 1; min-width: 0; }
.aviso-pendencias.compacto h3 { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.aviso-pendencias.compacto ul { margin: 0; }
.aviso-pendencias.compacto li { margin: 2px 0; }
.linha-conta { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 16px; }
.linha-conta small { color: var(--e-tinta-3); font-style: italic; }
.linha-conta > :last-child { margin-left: auto; }
.linha-conta .en-avatar { width: 22px; height: 22px; font-size: 12px; box-shadow: 0 0 0 1.5px #b8872f; }
.botao-apagar { color: #f08a7e; border-color: rgba(226, 87, 74, .5); }
.botao-apagar:hover { background: rgba(176, 38, 27, .2); }
.botao-apagar-sim:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.6); }

/* ---------- the invitation link of the master and its page (20/10) ---------- */
.campo-link .link-linha { display: flex; gap: 8px; align-items: center; }
.campo-link .link-linha input { flex: 1; font-size: 14px; }
.campo-link .link-botoes { display: flex; gap: 10px; }
.cartao-convite { text-align: left; }
.cartao-convite h2 { text-align: center; }
.cartao-convite .convite-titulo { font-size: 19px; text-align: center; }
.cartao-convite .convite-escolha { margin: 6px 0 14px; }
.cartao-convite input[type=radio] { width: auto; padding: 0; accent-color: #6e1e16; }
.cartao-convite > .botao-latao { display: block; margin: 0 auto; }

/* ---------- who is online (20/10): a dot on the book, lit seals on the campaign ---------- */
.livro-pouso { position: relative; }
.livro-online {
    position: absolute; top: -10px; right: -6px; z-index: 2;
    display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 7px;
    border-radius: 12px; background: rgba(20, 12, 6, .85); box-shadow: 0 0 0 1px rgba(217, 178, 90, .55), 0 2px 4px rgba(0, 0, 0, .5);
    color: var(--e-ouro-claro); font-size: 14px;
}
.livro-online .ponto { width: 8px; height: 8px; border-radius: 50%; background: #7fd36b; box-shadow: 0 0 6px #7fd36b; }
.presentes { display: flex; gap: 8px; margin-top: 10px; }
.presente { position: relative; display: inline-grid; cursor: default; }
.presente .en-avatar { width: 28px; height: 28px; font-size: 14px; filter: grayscale(.85) brightness(.55); opacity: .7; transition: filter 300ms, opacity 300ms; }
.presente.online .en-avatar { filter: none; opacity: 1; box-shadow: 0 0 0 2px #c99a3a, 0 0 0 3px #3a2507, 0 0 10px rgba(127, 211, 107, .55); }
.presente.online::after {
    content: ''; position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%;
    background: #7fd36b; box-shadow: 0 0 0 2px #2a1a10;
}
@media (prefers-reduced-motion: reduce) {
    .presente .en-avatar { transition: none; }
}

/* ---------- the game session (20/10): the line under the name, the button of the master, the list of sessions ---------- */
.cab-sessao { display: flex; align-items: center; gap: 7px; margin: 6px 0 0; color: var(--e-ouro-claro); text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
.cab-sessao-ponto { width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e2574a, #8e1b14); box-shadow: 0 0 8px rgba(226, 87, 74, .7); }
.botao-sessao.em-sessao { filter: saturate(.75) brightness(.92); }
.cab-trilha { margin: 6px 0 0; color: var(--e-ouro-claro); font-style: italic; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
.cab-trilha label { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.cab-trilha select {
    width: auto; max-width: 260px; padding: 2px 6px; border-radius: 4px; border: 1px solid rgba(243, 217, 142, .5); background: rgba(30, 18, 8, .75);
    color: var(--e-ouro-claro); font: inherit; font-style: normal; cursor: pointer;
}
.cab-trilha select:focus-visible { outline: 2px solid var(--e-ouro-claro); outline-offset: 1px; }
.sessoes { margin: 0; }
.sessoes-lista { list-style: none; margin: 0; padding: 0; }
.sessao-linha { display: flex; align-items: baseline; gap: 14px; padding: 8px 2px; border-bottom: 1px dashed rgba(58, 36, 20, .35); font-size: 16px; }
.sessao-linha:last-child { border-bottom: 0; }
.sessao-dia { min-width: 92px; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; }
.sessao-hora { flex: 1; color: var(--e-tinta-2); }
.sessao-linha.em-andamento .sessao-hora { color: #8e1b14; font-style: italic; }
.sessao-msgs { color: var(--e-tinta-3); font-style: italic; }
.sessao-titulo { font-weight: 600; font-style: normal; color: var(--e-tinta-2); }
.sessao-num { font-weight: 500; color: var(--e-tinta-3); }
.dialogo-sessao .chat-reler { margin: 6px 0 4px; }

/* ---------- the campaign, reorganized (20/10): one header with the tools in groups, the side column with the session ---------- */
.cab-campanha { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 18px 32px; margin-bottom: 30px; padding-bottom: 22px; border-bottom: 1px solid rgba(217, 178, 90, .22); }
.cab-titulo { flex: 1 1 380px; min-width: 0; }
.nome-campanha { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 2px 0 6px; }
.nome-campanha.longo { font-size: 42px; }
.cab-meta .plaqueta { display: inline-block; margin-left: 14px; font-style: normal; vertical-align: 1px; }
.cab-arquivada { font-weight: 400; color: #f08a7e; }

/* a lower header for the campaign (27/10): at 1366x768 the title, the tools and the requests took ~480 px and only two
   sheets showed, cut. The name on one line with its facts beside it, the tools without the group captions (the rules
   between the groups say it), the page a little closer to the bar; the sheets keep their size (Daniel, 15/10) */
.tela-campanha { padding-top: 22px; }
/* z-index: the "Arquivar ou apagar" menu opens over the sticky side column when the page is scrolled */
.tela-campanha .cab-campanha { position: relative; z-index: 5; align-items: center; gap: 12px 32px; margin-bottom: 20px; padding-bottom: 14px; }
.tela-campanha .cab-titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 20px; }
.tela-campanha .nome-campanha { max-width: 100%; padding: 2px 0 4px; font-size: 34px; }
.tela-campanha .nome-campanha.longo { font-size: 28px; }
.tela-campanha .cab-meta { margin: 0; line-height: 1.4; }

.ferramentas { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px 0; }
.grupo-ferramentas { display: grid; gap: 7px; padding: 0 18px; }
.grupo-ferramentas:first-child { padding-left: 0; }
.grupo-ferramentas:last-child { padding-right: 0; }
.grupo-ferramentas + .grupo-ferramentas { border-left: 1px solid rgba(217, 178, 90, .25); }
.grupo-botoes { display: flex; align-items: center; gap: 9px; }
.ferramenta { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 15px; font-size: 15px; white-space: nowrap; }
/* the tools that are not the action of the moment: gold ink outline on the wood, the same size (one brass button per page, 26/10) */
.ferramenta.botao-fantasma { border-color: rgba(217, 178, 90, .62); transition: background 160ms, border-color 160ms, color 160ms; }
.ferramenta.botao-fantasma:hover { border-color: var(--e-ouro); color: #fff1c4; }
.botao-latao.em-combate { background: linear-gradient(160deg, #f6b9a6 0%, #c9543f 30%, #7c1d15 70%, #3d0c08 100%); color: #fff0e0; text-shadow: 0 1px 1px rgba(0, 0, 0, .6); }

/* the menu "mais": archive and delete, out of the way */
.menu-mais { position: relative; }
.menu-mais > summary { list-style: none; display: inline-flex; align-items: center; cursor: pointer; }
.menu-mais > summary::-webkit-details-marker { display: none; }
.menu-mais[open] > summary { background: rgba(217, 178, 90, .18); }
.menu-mais-lista {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 250px; padding: 6px; display: grid; gap: 2px;
    color: var(--e-tinta); background: var(--tex-papiro); border-radius: 3px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, .55), 0 16px 30px rgba(0, 0, 0, .55);
}
.menu-mais-lista button { display: grid; gap: 1px; text-align: left; padding: 8px 12px; border: 0; border-radius: 2px; background: none; color: var(--e-tinta); font-family: var(--e-sc); font-size: 16px; }
.menu-mais-lista button:hover, .menu-mais-lista button:focus-visible { background: rgba(58, 36, 20, .1); outline: none; }
.menu-mais-lista small { font-family: var(--e-texto); font-style: italic; font-size: 13px; color: var(--e-tinta-2); }
.menu-mais-lista .menu-perigo { color: var(--e-tinta-vermelha); border-top: 1px dashed rgba(58, 36, 20, .3); border-radius: 0 0 2px 2px; }

/* the side column: the session on leather (what is live), the log on the scroll */
.campanha-corpo { grid-template-columns: minmax(0, 1fr) 400px; }
.lateral { position: sticky; top: 92px; display: grid; gap: 26px; align-self: start; }
.registro { position: static; }
.registro-papel { max-height: calc(100vh - 430px); min-height: 280px; }
.painel-sessao {
    display: grid; gap: 10px; padding: 16px 20px 16px;
    color: var(--e-luz-texto); background: var(--tex-couro);
    border: 1px solid rgba(217, 178, 90, .45); border-radius: 6px;
    box-shadow: inset 0 1px 0 rgba(255, 220, 170, .15), 0 3px 3px rgba(0, 0, 0, .5), 0 14px 24px rgba(0, 0, 0, .45);
}
.painel-sessao.aberta { border-color: rgba(226, 87, 74, .6); box-shadow: inset 0 1px 0 rgba(255, 220, 170, .15), 0 0 22px rgba(226, 87, 74, .14), 0 3px 3px rgba(0, 0, 0, .5), 0 14px 24px rgba(0, 0, 0, .45); }
.painel-sessao-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.painel-sessao h3 { margin: 0; font-size: 30px; line-height: 1; color: var(--e-ouro-claro); text-shadow: 0 2px 2px rgba(0, 0, 0, .6); }
.painel-sessao .botao-sessao { padding: 5px 14px; font-size: 15px; }
.sessao-estado { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--e-ouro-claro); text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
.sessao-estado.fechada { font-style: italic; font-size: 15px; color: var(--e-luz-texto-2); }
.sessao-combate { margin: 0; font-family: var(--e-sc); color: #f2a090; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
.painel-sessao .cab-trilha { margin: 0; }
.painel-sessao .cab-trilha label { display: flex; width: 100%; }
.painel-sessao .cab-trilha select { flex: 1; max-width: none; }
.painel-mesa { display: flex; align-items: center; gap: 12px; padding-top: 10px; border-top: 1px solid rgba(217, 178, 90, .2); }
.painel-rotulo { font-family: var(--e-sc); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--e-luz-texto-2); }
.painel-mesa .presentes { margin: 0; flex-wrap: wrap; }

/* the two tabs of the scroll */
.abas-rolo { display: flex; gap: 20px; margin-bottom: 6px; border-bottom: 1px solid rgba(58, 36, 20, .3); }
.aba-rolo {
    padding: 0 0 5px; margin-bottom: -1px; border: 0; border-bottom: 3px solid transparent; background: none;
    font-family: var(--e-uncial); font-size: 29px; line-height: 1.1; text-transform: lowercase; color: rgba(58, 36, 20, .66);
}
.aba-rolo:hover { color: var(--e-tinta-2); }
.aba-rolo.ativa { color: var(--e-tinta); border-bottom-color: var(--e-tinta-vermelha); }
.aba-rolo:focus-visible { outline: 2px solid rgba(176, 38, 27, .5); outline-offset: 2px; }
.aba-rolo .num { font-family: var(--e-num); font-size: 19px; font-weight: 600; color: var(--e-tinta-vermelha); vertical-align: 3px; }
.sessao-linha { flex-wrap: wrap; gap: 2px 12px; }
.sessao-linha .sessao-msgs { flex-basis: 100%; font-size: 14px; }

/* the side tabs (Novidades and Feedback on the left edge, Anotações gerais on the right, fixed, ~35 px) never cover a card:
   below the width where the page has its own margin, it keeps a gutter for them (26/10) */
@media (max-width: 1599px) { .tela { padding-left: 64px; padding-right: 64px; } }
@media (max-width: 1759px) { .tela-bestiario { padding-left: 64px; padding-right: 64px; } }
/* a wide screen (1920) takes three sheets per row: the same type, a little less paper around it (26/10) */
@media (min-width: 1860px) {
    body:not(.chat-aberto) .tela-campanha { max-width: 1780px; }
    body:not(.chat-aberto) .folhas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 28px; }
    body:not(.chat-aberto) .folha { padding: 26px 22px 18px; }
    body:not(.chat-aberto) .folha .rapido-qtd { width: 38px; }
}

/* the requests on top of the sheets, the same width as the two columns of sheets */
.folhas-area > .aviso-mestre { max-width: none; transform: none; }
.folha-nova { min-height: 220px; }

/* ---------- the dialogs of the master, one pattern (20/10): the × in the corner, a ruled title, the body scrolls, the
   foot with the buttons stays at the bottom ---------- */
dialog.pergaminho { width: min(600px, 92vw); max-height: 88vh; padding: 0; overflow: hidden; border-radius: 3px; }
dialog.pergaminho > form { max-height: 88vh; overflow: auto; padding: 28px 34px 0; scrollbar-width: thin; scrollbar-color: rgba(58, 36, 20, .45) transparent; }
dialog.pergaminho > form > h3:first-child, dialog.pergaminho > form > h3 { margin: 0 0 16px; padding: 0 40px 8px 0; font-size: 36px; line-height: 1.1; border-bottom: 1px solid rgba(58, 36, 20, .3); }
dialog.pergaminho .dialogo-pe { position: sticky; bottom: 0; margin: 18px -34px 0; padding: 12px 34px 16px; background: var(--tex-papiro); background-attachment: local; border-top: 1px solid rgba(58, 36, 20, .25); }
dialog.pergaminho > form > :last-child:not(.dialogo-pe) { margin-bottom: 24px; }
.dialogo-fechar {
    position: absolute; top: 14px; right: 16px; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px;
    border: 0; border-radius: 50%; background: none; color: var(--e-tinta-2); font-size: 30px; line-height: 1;
}
.dialogo-fechar:hover, .dialogo-fechar:focus-visible { background: rgba(58, 36, 20, .1); color: var(--e-tinta-vermelha); outline: none; }
.dialogo-form fieldset.campo { margin-bottom: 16px; }
.dialogo-form legend .num { margin-left: 4px; font-size: 13px; color: var(--e-tinta-vermelha); }
.dialogo-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
.cmb-form { min-width: 0; max-width: none; }

/* invite: a search over long lists, each list scrolls by itself */
.busca-convite input { font-size: 16px; }
.lista-convite { max-height: 30vh; overflow: auto; padding-right: 6px; scrollbar-width: thin; scrollbar-color: rgba(58, 36, 20, .45) transparent; }
.lista-convite .linha-conta { padding: 4px 6px; margin: 2px 0; border-radius: 3px; }
.lista-convite .linha-conta:hover { background: rgba(58, 36, 20, .07); }
.lista-convite .linha-conta[hidden] { display: none; }
.lista-convite .botao-p { padding: 3px 12px; font-size: 13px; }

/* the chat drawer open (apps/comum/chat.js puts body.chat-aberto): the campaign moves out from under it, the session panel stays in reach */
body.chat-aberto .tela-campanha { margin-right: min(360px, calc(100vw - 56px)); padding-right: 28px; transition: margin-right .32s cubic-bezier(.2, .8, .25, 1); }
body.chat-aberto .campanha-corpo { grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; }
body.chat-aberto .folhas { gap: 30px 24px; }
body.chat-aberto .folha { padding: 28px 22px 18px; }
@media (prefers-reduced-motion: reduce) { body.chat-aberto .tela-campanha { transition: none; } }

/* ---------- the dialogs of apps/comum/ui.js on the Mesa (UI.confirmar, the sound panel), 23/10: the same scroll ---------- */
dialog:not(.pergaminho) {
    color-scheme: light;
    width: min(460px, calc(100vw - 32px)); max-height: 88vh; padding: 26px 30px 18px; border: 0; border-radius: 3px; overflow: auto;
    color: var(--e-tinta); background: var(--tex-papiro); box-shadow: 0 30px 70px rgba(0, 0, 0, .7);
}
dialog:not(.pergaminho)::backdrop { background: rgba(5, 3, 1, .6); }
dialog:not(.pergaminho) .dialogo-cabeca h2 { margin: 0 0 14px; padding-bottom: 8px; font-family: var(--e-uncial, inherit); font-size: 30px; line-height: 1.1; font-weight: 400; border-bottom: 1px solid rgba(58, 36, 20, .3); }
dialog:not(.pergaminho) .dialogo-corpo { font-size: 17px; line-height: 1.45; }
dialog:not(.pergaminho) .dialogo-pe { margin-top: 18px; padding-top: 12px; border-top: 1px solid rgba(58, 36, 20, .25); }
dialog:not(.pergaminho) .dialogo-pe .btn {
    display: inline-flex; align-items: center; padding: 7px 16px; border: 1px solid #3a2507; border-radius: 4px; cursor: pointer;
    background: var(--latao); color: #2a1608; font-family: var(--e-sc); font-size: 16px; letter-spacing: .02em;
    text-shadow: 0 1px 0 rgba(255, 240, 200, .5); box-shadow: inset 0 1px 0 rgba(255, 250, 220, .6), inset 0 -2px 3px rgba(60, 35, 5, .45), 0 2px 4px rgba(0, 0, 0, .45);
}
dialog:not(.pergaminho) .dialogo-pe .btn:hover { filter: brightness(1.08); }
dialog:not(.pergaminho) .dialogo-pe .btn-fantasma { background: none; border-color: transparent; box-shadow: none; color: var(--e-tinta-2); font-family: inherit; font-style: italic; text-decoration: underline; text-underline-offset: 3px; text-shadow: none; }
dialog:not(.pergaminho) .dialogo-pe .btn-perigo { background: linear-gradient(160deg, #f6b9a6 0%, #c9543f 30%, #7c1d15 70%, #3d0c08 100%); color: #fff0e0; text-shadow: 0 1px 1px rgba(0, 0, 0, .6); }
dialog:not(.pergaminho) .dialogo-pe .btn:focus-visible { outline: 2px solid #6e1e16; outline-offset: 2px; }
.dialogo-fantasma { display: none; }

/* ---------- back one level (apps/comum/voltar.js), in the top bar ---------- */
.trilha-voltar {
    margin-right: 14px; padding: 5px 12px; border: 1px solid rgba(199, 154, 60, .55); border-radius: 999px; cursor: pointer;
    background: rgba(20, 12, 6, .55); color: #f3e3b5; font-family: var(--e-sc); font-size: 14px; letter-spacing: .02em;
}
.trilha-voltar:hover, .trilha-voltar:focus-visible { background: rgba(70, 46, 22, .9); border-color: #e2b85c; outline: none; }

/* ---------- the portrait of a sheet on its card (identidade.retrato, framed by identidade.retratoPos) ---------- */
.retrato.com-foto { background-size: cover; background-position: center top; background-repeat: no-repeat; }
.retrato.com-foto > span { visibility: hidden; }