/*   CSS FILE HEADER #
 *
 *   File:         [bestiario.css]
 *   Author(s):    ['Pedro H.F Matias']
 *   Credits:      ['Copyright © 2026 F.A.C LTDA. All rights reserved.']
 *   Date:         ['14.10.2026']
 *   Version:      ['0.1.0']
 *   Description:  ['Bestiário of the Mesa do Mestre (apps/mesa/js/bestiario.js): an open leather book of monsters on the candle-lit table, the creature written in ink on the left page (crest, red rubrics, ink drops of PA, warnings in the margin), the forge or the roll on the right page, leather tabs, the creatures of the campaign and the encounter on a scroll, and the attack table on papyrus with wax stamps. Uses the tokens of mesa.css. Desktop only.']
 */

.tela-bestiario { max-width: 1680px; padding-top: 22px; }
.tela-bestiario .cab-campanha { margin-bottom: 8px; }
.botao-bestiario { gap: 9px; }
.botao-bestiario::before {
    content: ''; width: 15px; height: 17px; flex: none;
    background: #3a2507;
    clip-path: polygon(50% 0, 100% 18%, 100% 55%, 50% 100%, 0 55%, 0 18%);
    opacity: .8;
}
/* in gold ink outline (not the action of the moment), the marks take the color of the text */
.botao-fantasma.botao-bestiario::before { background: currentColor; }

.bst-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 30px; align-items: start; }

/* ---------- the open book ---------- */
.bst-livro {
    position: relative; margin-top: 30px; padding: 16px 18px 20px;
    background: var(--tex-couro);
    border-radius: 12px 12px 10px 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .6), 0 34px 56px rgba(0, 0, 0, .55), inset 0 0 0 2px rgba(20, 10, 4, .65), inset 0 0 32px rgba(0, 0, 0, .45);
}
.bst-livro::before {
    content: ''; position: absolute; inset: 6px; pointer-events: none; border-radius: 9px;
    border: 1.5px dashed rgba(243, 217, 142, .28);
}
/* brass corners */
.bst-livro::after {
    content: ''; position: absolute; inset: -3px; pointer-events: none; border-radius: 12px;
    background:
        radial-gradient(circle at 14px 14px, #f6dc95 0, #c99a3a 5px, #5c3f10 9px, transparent 10px),
        radial-gradient(circle at calc(100% - 14px) 14px, #f6dc95 0, #c99a3a 5px, #5c3f10 9px, transparent 10px),
        radial-gradient(circle at 14px calc(100% - 14px), #f6dc95 0, #c99a3a 5px, #5c3f10 9px, transparent 10px),
        radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), #f6dc95 0, #c99a3a 5px, #5c3f10 9px, transparent 10px);
}
.bst-paginas { position: relative; display: grid; grid-template-columns: 1fr 1fr; }
.bst-pag {
    position: relative; height: calc(100vh - 300px); min-height: 600px; overflow: auto;
    color: var(--e-tinta);
    scrollbar-width: thin; scrollbar-color: rgba(58, 36, 20, .4) transparent;
}
.bst-pag-esq {
    padding: 34px 44px 30px 46px;
    background: linear-gradient(90deg, rgba(60, 32, 12, .18) 0, transparent 6%, transparent 84%, rgba(60, 32, 12, .32) 100%), var(--tex-papiro);
    border-radius: 4px 0 0 4px;
    box-shadow: -3px 0 0 #cdb789, -5px 1px 0 #b39d70, -7px 2px 0 #9c8659;
}
.bst-pag-dir {
    padding: 30px 44px 30px 44px;
    background: linear-gradient(270deg, rgba(60, 32, 12, .18) 0, transparent 6%, transparent 84%, rgba(60, 32, 12, .32) 100%), var(--tex-papiro);
    border-radius: 0 4px 4px 0;
    box-shadow: 3px 0 0 #cdb789, 5px 1px 0 #b39d70, 7px 2px 0 #9c8659;
}
.bst-lombada {
    position: absolute; left: 50%; top: 0; bottom: 0; width: 46px; transform: translateX(-50%); z-index: 2; pointer-events: none;
    background: linear-gradient(90deg, rgba(40, 20, 6, 0), rgba(40, 20, 6, .28) 38%, rgba(18, 8, 2, .62) 50%, rgba(40, 20, 6, .28) 62%, rgba(40, 20, 6, 0));
}

/* leather tabs over the book */
.bst-fitas { position: absolute; top: -34px; right: 70px; display: flex; gap: 8px; z-index: 3; }
.bst-fita {
    position: relative; padding: 5px 20px 12px; border: 0; border-radius: 7px 7px 0 0;
    background: linear-gradient(180deg, #9a3424, #5e140d);
    color: #f6dcc6; font-family: var(--e-uncial); font-size: 21px; text-transform: lowercase; letter-spacing: .01em;
    box-shadow: inset 0 1px 0 rgba(255, 200, 170, .35), 0 -2px 6px rgba(0, 0, 0, .35);
    transform: translateY(9px); opacity: .82;
    transition: transform 260ms var(--e-ease-tinta), opacity 200ms;
}
.bst-fita::after { content: ''; position: absolute; inset: 4px 6px auto; height: 0; border-top: 1px dashed rgba(255, 220, 190, .35); }
.bst-fita-verde { background: linear-gradient(180deg, #3d6a35, #1c3a18); color: #e6f0d6; }
.bst-fita:hover { transform: translateY(4px); opacity: 1; }
.bst-fita.ativa { transform: translateY(0); opacity: 1; box-shadow: inset 0 1px 0 rgba(255, 200, 170, .4), 0 -4px 14px rgba(255, 170, 80, .18); }

/* ---------- the crest ---------- */
.bst-brasao { display: inline-block; flex: none; width: 84px; height: 100px; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .35)); --escudo: #7a2a1c; }
.bst-brasao svg { width: 100%; height: 100%; overflow: visible; }
.bst-brasao .escudo { fill: var(--escudo); stroke: #2a1608; stroke-width: 2.5; }
.bst-brasao .escudo-borda { fill: none; stroke: rgba(255, 228, 160, .5); stroke-width: 1.6; }
.bst-brasao .carga * { fill: #f0cf7e; stroke: #3a2507; stroke-linejoin: round; }
.bst-brasao .carga .vazio { fill: var(--escudo); }
.bst-brasao .carga .traco { fill: none; stroke: #f0cf7e; }
.bst-brasao .tacha-b { fill: #f3d98e; stroke: #4d330b; stroke-width: 1; }
.bst-brasao .chefe { fill: none; stroke: rgba(255, 228, 160, .45); stroke-width: 1.4; }
.bst-cl-inimigos { --escudo: #7a2a1c; }
.bst-cl-monstruosidades { --escudo: #5a1838; }
.bst-cl-chefes { --escudo: #1e0d08; }
.bst-cl-lacaios { --escudo: #3d5a2c; }
.bst-cl-assimiladores { --escudo: #2f4a66; }
.bst-cl-controladores { --escudo: #4a2e66; }
.bst-brasao-p { width: 40px; height: 48px; }
.bst-brasao .carga .contorno { fill: none; stroke: #3a2507; }

/* ---------- left page: the creature in ink ---------- */
.bst-cartao-topo { display: flex; align-items: center; gap: 18px; }
.bst-titulo { flex: 1; min-width: 0; }
.bst-nome { margin: 0; font-family: var(--e-nome); font-weight: 400; line-height: 1.02; color: #2a1608; overflow-wrap: anywhere; }
.bst-nome.sem-nome { color: rgba(58, 36, 20, .38); }
.bst-sub { margin: 6px 0 0; font-style: italic; font-size: 16px; color: var(--e-tinta-2); }
.bst-ornamento { display: flex; align-items: center; gap: 14px; margin: 14px 0 12px; color: rgba(142, 31, 21, .75); font-size: 20px; }
.bst-ornamento::before, .bst-ornamento::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(58, 36, 20, .5), transparent); }
.bst-vals { display: grid; grid-template-columns: repeat(5, 1fr); border: 1.5px solid rgba(58, 36, 20, .55); border-radius: 3px; background: rgba(255, 250, 233, .18); }
.bst-val { display: flex; flex-direction: column; align-items: center; padding: 6px 4px 5px; border-left: 1px solid rgba(58, 36, 20, .3); }
.bst-val:first-child { border-left: 0; }
.bst-val small { font-family: var(--e-sc); font-size: 13px; color: var(--e-tinta-2); letter-spacing: .03em; }
.bst-val b { font-family: var(--e-num); font-weight: 600; font-size: 30px; line-height: 1.05; color: #6e1e16; }
.bst-val i { margin-top: 4px; font-size: 12px; line-height: 1; color: rgba(58, 36, 20, .55); }
.bst-val i::before { content: 'livro '; }
.bst-val.mudou b { color: #2f5a2c; }
.bst-val.fora b { color: #b0261b; text-decoration: underline wavy rgba(176, 38, 27, .55); text-underline-offset: 4px; }
.bst-ataque-linha { margin: 12px 0 0; font-size: 17px; line-height: 1.4; }
.bst-ataque-linha b, .bst-def b { font-family: var(--e-sc); font-weight: 400; color: var(--e-tinta-2); margin-right: 3px; }
.bst-outros { font-size: 15.5px; }
.bst-outros small { font-size: 13px; font-style: italic; color: var(--e-tinta-2); }
.bst-tipo-dano { display: inline-block; padding: 0 8px; border: 1px solid rgba(110, 30, 22, .45); border-radius: 10px; font-family: var(--e-sc); font-size: 14px; color: #6e1e16; line-height: 1.4; }
.bst-defesas { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 20px; margin-top: 10px; padding-right: 26px; font-size: 15.5px; }
.bst-defesas.fora { color: #8a1d14; }
.bst-defesas > .bst-trava { position: absolute; right: -6px; top: -2px; }
.bst-def i { color: rgba(58, 36, 20, .5); }
.bst-anulada { text-decoration: line-through; text-decoration-color: rgba(58, 36, 20, .45); }
.bst-anulada small { text-decoration: none; display: inline-block; margin-left: 4px; font-style: italic; font-size: .8em; color: rgba(58, 36, 20, .6); }
.bst-pa { display: flex; align-items: center; gap: 12px; margin: 16px 0 6px; padding: 8px 0; border-top: 1px dashed rgba(58, 36, 20, .35); border-bottom: 1px dashed rgba(58, 36, 20, .35); }
.bst-pa-rot { font-family: var(--e-sc); font-size: 14px; color: var(--e-tinta-2); }
.bst-gotas { display: flex; flex-wrap: wrap; gap: 6px 7px; flex: 1; }
.bst-gota { width: 12px; height: 12px; border: 1.5px solid rgba(58, 36, 20, .55); border-radius: 0 50% 50% 50%; transform: rotate(45deg); margin-top: 2px; }
.bst-gota.cheia { background: radial-gradient(circle at 40% 40%, #5a3d22, #24140a); border-color: #24140a; }
.bst-gota.demais { background: radial-gradient(circle at 40% 40%, #e2574a, #8e1f15); border-color: #8e1f15; }
.bst-pa-num { font-size: 17px; }
.bst-pa-num b { font-size: 22px; color: #6e1e16; }
.bst-pa-num.fora b { color: #b0261b; }
.bst-cat h4 { margin: 12px 0 4px; font-size: 22px; line-height: 1; color: #8e1f15; }
.bst-hab { margin: 0 0 8px; font-size: 16px; line-height: 1.35; }
.bst-hab > b { font-family: var(--e-sc); font-weight: 400; font-size: 17px; color: #2a1608; }
.bst-custo { margin-left: 8px; font-size: 13px; color: var(--e-tinta-2); font-style: italic; }
.bst-vezes, .bst-copia { font-family: var(--e-sc); font-weight: 400; font-size: .85em; color: #6e1e16; }
.bst-hab em { margin-left: 8px; color: #8e1f15; }
.bst-hab-texto { display: block; font-size: 14px; font-style: italic; color: #5a3d22; }
.bst-vazio-hab { font-style: italic; color: rgba(58, 36, 20, .6); }
.bst-margem { margin: 18px -8px 0; padding: 10px 16px 10px 18px; border-left: 3px solid #b0261b; background: rgba(176, 38, 27, .06); color: #8a1d14; transform: rotate(-.35deg); }
.bst-margem h5 { margin: 0 0 4px; font-family: var(--e-uncial); font-weight: 400; font-size: 20px; text-transform: lowercase; }
.bst-margem ul { margin: 0; padding-left: 18px; }
.bst-margem li { font-size: 15px; font-style: italic; }
.bst-confere { margin: 16px 0 0; color: #2f5a2c; font-style: italic; }
.bst-confere::before { content: '✓ '; font-style: normal; }
.bst-cartao-pe { margin-top: 16px; font-size: 13.5px; font-style: italic; color: rgba(58, 36, 20, .62); }
.bst-cartao-pe code, .bst-historico code { font-family: var(--e-num); font-style: normal; font-weight: 600; color: var(--e-tinta-2); }
.bst-sujo { color: #8a5a12; }

/* the locks of the roll */
.bst-travas { display: flex; flex-direction: column; gap: 1px; align-self: flex-start; }
.bst-trava { display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 3px; border: 0; border-radius: 50%; background: transparent; color: rgba(58, 36, 20, .4); transition: color 160ms, background 160ms; }
.bst-trava svg { width: 18px; height: 18px; }
.bst-trava svg rect { fill: currentColor; }
.bst-trava:hover { color: var(--e-tinta); background: rgba(58, 36, 20, .08); }
.bst-trava.fechada { color: #8e1f15; }

/* ink being written: each line comes in from the left */
.bst-cartao.escrevendo > * { animation: bst-escrever 760ms var(--e-ease-tinta) both; }
.bst-cartao.escrevendo > :nth-child(2) { animation-delay: 80ms; }
.bst-cartao.escrevendo > :nth-child(3) { animation-delay: 160ms; }
.bst-cartao.escrevendo > :nth-child(4) { animation-delay: 240ms; }
.bst-cartao.escrevendo > :nth-child(5) { animation-delay: 320ms; }
.bst-cartao.escrevendo > :nth-child(6) { animation-delay: 400ms; }
.bst-cartao.escrevendo > :nth-child(7) { animation-delay: 480ms; }
.bst-cartao.escrevendo > :nth-child(8) { animation-delay: 560ms; }
.bst-cartao.escrevendo > :nth-child(n+9) { animation-delay: 640ms; }
@keyframes bst-escrever {
    0% { clip-path: inset(0 100% 0 0); opacity: .15; filter: blur(1.2px); }
    100% { clip-path: inset(0 0 0 0); opacity: 1; filter: none; }
}

/* ---------- right page: the forge ---------- */
.bst-rubrica { display: flex; align-items: baseline; gap: 10px; margin: 26px 0 10px; padding-bottom: 4px; border-bottom: 1px solid rgba(58, 36, 20, .25); font-family: var(--e-uncial); font-weight: 400; font-size: 27px; line-height: 1.1; text-transform: lowercase; color: var(--e-tinta); }
.bst-forja > .bst-rubrica:first-child, .bst-sorte > .bst-rubrica:first-child { margin-top: 0; }
.capitular { font-family: var(--e-nome); font-size: 36px; line-height: .8; color: #8e1f15; text-transform: none; text-shadow: 0 1px 0 rgba(255, 240, 200, .5); }
.bst-livro-volta { margin-left: auto; font-family: var(--e-texto); font-size: 14px; text-transform: none; }
.bst-campo-nome { display: block; }
.bst-campo-nome > span, .bst-campo > span, .bst-campo-num > span, .bst-semente span, .bst-escolha > span, .bst-grupo-rot {
    display: block; font-family: var(--e-sc); font-size: 13px; color: var(--e-tinta-2); letter-spacing: .03em;
}
.bst-campo-nome input {
    width: 100%; padding: 2px 0 3px; border: 0; border-bottom: 1.5px dotted rgba(58, 36, 20, .55); background: transparent;
    font-family: var(--e-nome); font-size: 32px; color: #2a1608;
}
.bst-campo-nome input::placeholder { color: rgba(58, 36, 20, .3); }
.bst-pag input:focus, .bst-pag select:focus { outline: none; border-color: #8e1f15; background-color: rgba(255, 250, 233, .35); }
.bst-linha2 { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px; margin: 12px 0; }
.bst-campo select, .bst-campo input, .bst-escolha select {
    padding: 4px 8px; border: 1px solid rgba(58, 36, 20, .4); border-radius: 3px;
    background: rgba(255, 250, 233, .35); color: var(--e-tinta); font-size: 16px;
}
.bst-campo-curto input { width: 76px; font-family: var(--e-num); font-weight: 600; font-size: 18px; }
.bst-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bst-chip {
    padding: 3px 12px; border: 1px solid rgba(58, 36, 20, .42); border-radius: 15px;
    background: rgba(255, 250, 233, .22); color: var(--e-tinta); font-size: 15px; line-height: 1.3;
    transition: background 160ms, color 160ms, border-color 160ms;
}
.bst-chip small { display: block; font-size: 11.5px; font-style: italic; opacity: .72; }
.bst-chip:hover { border-color: #8e1f15; }
.bst-chip.ativo { background: #3a2414; border-color: #3a2414; color: #f3e3bd; box-shadow: inset 0 0 0 1px rgba(243, 217, 142, .22); }
.bst-chip-p { padding: 2px 9px; font-size: 14px; }
.bst-grupos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 10px 0; }
.bst-difs { margin: 10px 0 0; }
.bst-grupo-rot { margin-bottom: 4px; }
.bst-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 16px; }
.bst-campo-num { display: flex; flex-direction: column; }
.bst-campo-num input {
    width: 100%; padding: 0 2px; border: 0; border-bottom: 1.5px dotted rgba(58, 36, 20, .55); background: transparent;
    font-family: var(--e-num); font-weight: 600; font-size: 25px; color: #6e1e16;
}
.bst-campo-num i { font-size: 12px; color: rgba(58, 36, 20, .55); }
.bst-pag input[type=number]::-webkit-inner-spin-button { opacity: .35; }
.bst-def-linha { display: grid; grid-template-columns: 118px 1fr; gap: 8px; align-items: start; margin: 7px 0; }
.bst-def-rot { font-family: var(--e-sc); font-size: 14.5px; color: var(--e-tinta-2); padding-top: 3px; }
.bst-def-rot i { display: block; font-style: normal; font-size: 13px; }
.bst-def-rot i.fora { color: #b0261b; }
.bst-pa-mini { margin-left: auto; font-family: var(--e-sc); font-size: 15px; text-transform: none; color: var(--e-tinta-2); }
.bst-pa-mini.fora { color: #b0261b; }
.bst-compradas { list-style: none; margin: 0 0 12px; padding: 0; }
.bst-compradas li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 6px; padding: 7px 10px; background: rgba(255, 250, 233, .3); border-left: 3px solid #8e1f15; }
.bst-cat-nome b { font-family: var(--e-sc); font-weight: 400; font-size: 16px; color: #2a1608; }
.bst-cat-nome small { margin-left: 8px; font-size: 12.5px; font-style: italic; color: var(--e-tinta-2); }
.bst-cat-nome .bst-narr { color: #8a5a12; }
.bst-pips { margin-left: 6px; white-space: nowrap; }
.bst-pips i { display: inline-block; width: 7px; height: 7px; margin-left: 3px; border-radius: 0 50% 50% 50%; transform: rotate(45deg); background: #3a2414; vertical-align: 1px; }
.bst-escolha { display: inline-flex; align-items: center; gap: 6px; }
.bst-escolha select { font-size: 14px; padding: 2px 6px; }
.bst-tirar { margin-left: auto; padding: 0 4px; border: 0; background: none; color: #8a1d14; font-size: 22px; line-height: 1; }
.bst-tirar:hover { color: #b0261b; }
.bst-catalogo { border-top: 1px solid rgba(58, 36, 20, .2); }
.bst-catalogo summary { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; cursor: pointer; list-style: none; font-size: 22px; color: #8e1f15; }
.bst-catalogo summary::-webkit-details-marker { display: none; }
.bst-catalogo summary::before { content: '▸'; font-size: 14px; color: var(--e-tinta-2); transition: transform 160ms; }
.bst-catalogo[open] summary::before { transform: rotate(90deg); }
.bst-catalogo summary small { font-family: var(--e-num); font-size: 14px; color: var(--e-tinta-2); }
.bst-catalogo ul { list-style: none; margin: 0 0 8px; padding: 0; }
.bst-catalogo li { display: grid; grid-template-columns: 30px 1fr; gap: 1px 10px; padding: 6px 0; border-bottom: 1px dotted rgba(58, 36, 20, .22); }
.bst-catalogo li.comprada .bst-cat-nome b { color: #8e1f15; }
.bst-cat-texto { grid-column: 2; font-size: 13.5px; font-style: italic; line-height: 1.3; color: #5a3d22; }
.bst-add { grid-row: span 2; width: 26px; height: 26px; padding: 0; border: 1px solid #8e1f15; border-radius: 50%; background: transparent; color: #8e1f15; font-size: 18px; line-height: 1; }
.bst-add:hover:not(:disabled) { background: #8e1f15; color: #f6e6c6; }
.bst-add.caro { border-style: dashed; opacity: .7; }
.bst-add:disabled { opacity: .28; cursor: default; }
.bst-pe { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: 22px; padding-top: 14px; border-top: 1px solid rgba(58, 36, 20, .25); }
.bst-pe .botao-texto:first-child, .bst-pe .botao-fantasma:first-child { margin-right: auto; }
/* the save bar stays at the top of the right page while it scrolls (25/10): same edges as the page, so it reads as paper */
.bst-pe-topo {
    position: sticky; top: -30px; z-index: 4; margin: -30px -44px 16px; padding: 12px 44px 12px;
    background: linear-gradient(270deg, rgba(60, 32, 12, .18) 0, transparent 6%, transparent 84%, rgba(60, 32, 12, .32) 100%), var(--tex-papiro);
    border-top: 0; border-bottom: 1px solid rgba(58, 36, 20, .3); box-shadow: 0 8px 10px -8px rgba(40, 20, 6, .45);
}
.bst-fantasma-tinta { background: rgba(255, 250, 233, .2); border-color: rgba(58, 36, 20, .45); color: var(--e-tinta); }
.bst-fantasma-tinta:hover { background: rgba(58, 36, 20, .08); }
.botao-latao:disabled, .botao-fantasma:disabled { opacity: .45; cursor: default; filter: grayscale(.4); transform: none; }

/* ---------- right page: the roll ---------- */
.bst-dica { margin: 0 0 12px; font-size: 15px; font-style: italic; color: #5a3d22; }
.bst-sorteio-linha { margin: 12px 0; }
.bst-semente { display: flex; align-items: flex-end; gap: 16px; margin: 18px 0; }
.bst-semente input { width: 170px; padding: 0 2px; border: 0; border-bottom: 1.5px dotted rgba(58, 36, 20, .55); background: transparent; font-family: var(--e-num); font-weight: 600; font-size: 21px; color: var(--e-tinta); }
.bst-dica-p { font-size: 13.5px; font-style: italic; color: rgba(58, 36, 20, .6); }
.bst-rolar { display: flex; align-items: center; gap: 20px; margin: 22px 0 12px; }
.bst-botao-sorte {
    display: inline-flex; align-items: center; gap: 12px; padding: 10px 28px 12px 14px; border: 0; border-radius: 40px;
    background: radial-gradient(circle at 30% 25%, #e2574a, #a3261b 55%, #5e120c);
    color: #fbe6d4; font-family: var(--e-uncial); font-size: 26px; text-transform: lowercase;
    box-shadow: 0 3px 0 #3a0a06, 0 10px 18px rgba(0, 0, 0, .35), inset 0 0 0 3px rgba(90, 15, 10, .45);
    transition: transform 160ms, filter 160ms;
}
.bst-botao-sorte:hover { transform: translateY(-1px); filter: brightness(1.08); }
.bst-botao-sorte:active { transform: translateY(2px); box-shadow: 0 1px 0 #3a0a06, 0 4px 8px rgba(0, 0, 0, .35), inset 0 0 0 3px rgba(90, 15, 10, .45); }
.bst-dado svg { display: block; width: 36px; height: 36px; transition: transform 500ms var(--e-ease-tinta); }
.bst-dado rect { fill: #f3e3bd; stroke: #5e120c; stroke-width: 1.5; }
.bst-dado circle { fill: #5e120c; }
.bst-botao-sorte:hover .bst-dado svg { transform: rotate(-24deg); }
.bst-travas-nota { margin: 0; font-size: 14.5px; font-style: italic; color: #5a3d22; }
.bst-historico { margin-top: 22px; }
.bst-historico h4 { margin: 0 0 6px; font-size: 21px; color: #8e1f15; }
.bst-historico ol { margin: 0; padding-left: 20px; }
.bst-historico li { font-size: 15.5px; margin: 3px 0; }
.bst-historico small { color: var(--e-tinta-2); font-style: italic; }

/* ---------- beside the book ---------- */
.bst-lado { margin-top: 34px; }
.bst-lado-papel { max-height: calc(100vh - 190px); }
.bst-lado-papel h3 { font-size: 28px; }
.bst-salvos, .bst-encontro { list-style: none; margin: 10px 0 0; padding: 0; }
.bst-salvo { display: flex; gap: 12px; padding: 10px 6px; border-bottom: 1px dashed rgba(58, 36, 20, .3); }
.bst-salvo.aberto { background: rgba(142, 31, 21, .07); }
.bst-salvo-corpo { min-width: 0; flex: 1; }
.bst-salvo-corpo > b, .bst-token-corpo > b { display: block; font-family: var(--e-nome); font-weight: 400; font-size: 22px; line-height: 1.05; color: #2a1608; overflow-wrap: anywhere; }
.bst-salvo-corpo > small { display: block; font-style: italic; color: var(--e-tinta-2); font-size: 14px; }
.bst-salvo-num { display: block; font-size: 14px; }
.bst-salvo-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 5px; }
.bst-salvo-acoes .botao-texto { font-size: 14px; padding: 0; }
.bst-apagar { color: #8a1d14; }
.bst-acao-atacar {
    padding: 2px 12px 3px; border: 1px solid #4a0e08; border-radius: 3px;
    background: linear-gradient(180deg, #b0352a, #6e1610); color: #fbe6d4; font-family: var(--e-sc); font-size: 14px; letter-spacing: .03em;
    box-shadow: inset 0 1px 0 rgba(255, 200, 180, .35), 0 1px 2px rgba(0, 0, 0, .35);
}
.bst-acao-atacar:hover { filter: brightness(1.12); }
.bst-enc-titulo { margin-top: 26px; }
.bst-enc-titulo small { font-size: 18px; color: #8e1f15; }
.bst-token { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 9px 2px; border-bottom: 1px dashed rgba(58, 36, 20, .3); }
.bst-token.caido { opacity: .55; }
.bst-token.caido .bst-token-corpo > b { text-decoration: line-through; }
.bst-token-corpo > b { font-size: 19px; }
.bst-hpbar { display: block; height: 7px; margin: 4px 0; border-radius: 4px; background: rgba(58, 36, 20, .18); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3); overflow: hidden; }
.bst-hpbar span { display: block; height: 100%; background: linear-gradient(180deg, #c74437, #8a1d14); transition: width 400ms var(--e-ease-tinta); }
.bst-token-hp { display: flex; align-items: center; gap: 4px; font-size: 14px; }
.bst-token-hp button { width: 22px; height: 22px; padding: 0; border: 1px solid rgba(58, 36, 20, .45); border-radius: 50%; background: transparent; color: var(--e-tinta); line-height: 1; }
.bst-token-hp input { width: 48px; padding: 0 2px; border: 0; border-bottom: 1px dotted rgba(58, 36, 20, .55); background: transparent; font-family: var(--e-num); font-weight: 600; font-size: 17px; color: #6e1e16; text-align: right; }
.bst-token-acoes { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.bst-vazio { font-style: italic; font-size: 15px; color: var(--e-tinta-3); }

/* ---------- the attack table: papyrus over the room, the 3D dice roll on the left ---------- */
.bst-ataque-fundo { position: fixed; inset: 0; z-index: 70; display: none; background: radial-gradient(ellipse 70% 80% at 24% 50%, rgba(5, 3, 1, .18), rgba(5, 3, 1, .74)); }
.bst-ataque-fundo.aberto { display: block; }
.bst-ataque {
    position: absolute; right: 4vw; top: 50%; width: min(780px, 54vw); max-height: calc(100vh - 70px); overflow: auto;
    padding: 30px 36px 22px; color: var(--e-tinta); background: var(--tex-papiro);
    transform: translateY(-50%) rotate(.35deg);
    box-shadow: 0 3px 4px rgba(0, 0, 0, .5), 0 34px 70px rgba(0, 0, 0, .7);
    animation: bst-mesa 300ms var(--e-ease-tinta);
    scrollbar-width: thin; scrollbar-color: rgba(58, 36, 20, .4) transparent;
}
@keyframes bst-mesa { from { opacity: 0; transform: translateY(-46%) rotate(1.6deg); } to { opacity: 1; transform: translateY(-50%) rotate(.35deg); } }
.bst-at-cab { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.bst-at-cab h3 { margin: 0; font-family: var(--e-nome); font-weight: 400; font-size: 40px; line-height: 1; color: #2a1608; }
.bst-at-cab p { margin: 4px 0 0; font-style: italic; color: var(--e-tinta-2); }
.bst-at-escolha { display: grid; grid-template-columns: 1.1fr 1fr; gap: 26px; }
.bst-at-col h4 { margin: 0 0 8px; font-size: 25px; color: #8e1f15; }
.bst-at-lista, .bst-at-alvos { list-style: none; margin: 0; padding: 0; }
.bst-at-op { display: grid; grid-template-columns: 20px 1fr; gap: 0 8px; padding: 7px 10px; border: 1px solid transparent; border-radius: 4px; cursor: pointer; }
.bst-at-op input { grid-row: span 3; margin-top: 4px; accent-color: #6e1e16; }
.bst-at-op b { font-family: var(--e-sc); font-weight: 400; font-size: 17px; }
.bst-at-op small { font-style: italic; color: var(--e-tinta-2); font-size: 13.5px; }
.bst-at-op span { font-size: 13.5px; font-style: italic; color: #5a3d22; line-height: 1.3; }
.bst-at-op.ativo, .bst-alvo.ativo { border-color: rgba(110, 30, 22, .45); background: rgba(255, 250, 233, .38); }
.bst-at-contra { display: flex; align-items: center; gap: 8px; margin: 12px 0 0 10px; font-family: var(--e-sc); font-size: 14px; color: var(--e-tinta-2); }
.bst-at-mods { margin: 14px 0 0 10px; }
.bst-at-mods h5 { margin: 0 0 4px; font-family: var(--e-sc); font-weight: 400; font-size: 14px; color: var(--e-tinta-2); }
.bst-at-mods input[type=number] { width: 46px; padding: 0 2px; border: 0; border-bottom: 1px dotted rgba(58, 36, 20, .55); background: transparent; font-family: var(--e-num); font-weight: 600; font-size: 16px; }
.bst-alvo { display: grid; grid-template-columns: 16px 34px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid transparent; border-radius: 4px; cursor: pointer; }
.bst-alvo input { accent-color: #6e1e16; }
.bst-alvo-nome b { display: block; font-family: var(--e-nome); font-weight: 400; font-size: 22px; line-height: 1; }
.bst-alvo-nome small { font-style: italic; color: var(--e-tinta-2); }
.bst-alvo-def { font-size: 14px; text-align: right; line-height: 1.35; }
.bst-alvo-def b { font-size: 17px; color: #6e1e16; }
.bst-at-pe { display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(58, 36, 20, .25); }
.bst-at-pe .botao-texto:first-child { margin-right: auto; }
.bst-rolando { margin: 0; padding: 50px 0; text-align: center; font-size: 21px; font-style: italic; color: var(--e-tinta-2); animation: bst-pulsar 1.2s ease-in-out infinite; }
@keyframes bst-pulsar { 50% { opacity: .45; } }
.bst-at-res { position: relative; }
.bst-carimbo {
    position: absolute; right: 2px; top: -84px; z-index: 1; padding: 0 16px 4px; border: 4px double currentColor; border-radius: 4px;
    font-family: var(--e-uncial); font-size: 38px; line-height: 1.1; text-transform: lowercase; opacity: .82;
    transform: rotate(-8deg); animation: bst-carimbo 420ms cubic-bezier(.2, 1.5, .4, 1) both; pointer-events: none;
}
.bst-carimbo.acertou, .bst-carimbo.aplicado { color: #a3261b; }
.bst-carimbo.errou { color: #2f4a66; }
@keyframes bst-carimbo { from { transform: rotate(-8deg) scale(2.3); opacity: 0; } to { transform: rotate(-8deg) scale(1); opacity: .82; } }
.bst-rolagem { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 10px 0; padding: 10px 14px; background: rgba(255, 250, 233, .32); border-left: 3px solid #3a2414; }
.bst-rolagem-dano { border-left-color: #8e1f15; }
.bst-rol-rot { flex-basis: 100%; margin: 0; font-family: var(--e-sc); font-size: 15px; color: var(--e-tinta-2); }
.bst-faces { display: flex; flex-wrap: wrap; gap: 6px; }
.bst-face {
    display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 8px;
    background: linear-gradient(160deg, #fbf3df, #e0cfa6); border: 1px solid rgba(58, 36, 20, .45);
    box-shadow: 0 2px 3px rgba(0, 0, 0, .25), inset 0 -2px 3px rgba(120, 90, 40, .25);
    font-size: 21px; color: #2a1608;
}
.bst-face.dano { background: linear-gradient(160deg, #d9564a, #8e1f15); border-color: #5e120c; color: #fbe6d4; }
.bst-total b { font-family: var(--e-num); font-weight: 600; font-size: 38px; line-height: 1; color: #6e1e16; }
.bst-total i { margin-left: 8px; padding: 0 8px; border-radius: 10px; background: #c99a3a; color: #2a1608; font-family: var(--e-sc); font-size: 13px; font-style: normal; }
.bst-contra { margin-left: auto; font-size: 16px; }
.bst-contra b { font-size: 22px; color: #2a1608; }
.bst-efeitos { list-style: none; margin: 12px 0 0; padding: 0; }
.bst-efeitos li { position: relative; padding: 3px 0 3px 20px; font-size: 17px; }
.bst-efeitos li::before { content: '✦'; position: absolute; left: 0; top: 6px; font-size: 12px; color: #8e1f15; }
.bst-efeitos li.bst-narr { font-style: italic; color: #5a3d22; }
.bst-notas { margin: 4px 0 0; font-size: 14.5px; font-style: italic; color: #5a3d22; }
/* Talhar (or an area) on several sheets (26/10): one line per sheet under the roll */
.bst-varios { list-style: none; margin: 10px 0 0; padding: 0; }
.bst-varios-alvo { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 4px 10px; padding: 6px 0; border-bottom: 1px dashed rgba(58, 36, 20, .3); font-size: 15px; }
.bst-varios-alvo:last-child { border-bottom: 0; }
.bst-varios-alvo.erro { opacity: .7; }
.bst-varios-alvo .bst-erro { grid-column: 1 / -1; }
.bst-varios-selo { font-family: var(--e-sc, serif); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #a3261b; }
.bst-varios-alvo.erro .bst-varios-selo { color: #2f4a66; }
.bst-aplicado { margin: 14px 0 0; padding: 10px 14px; border-left: 3px solid #3d6a35; background: rgba(61, 106, 53, .09); font-size: 15.5px; }
.bst-erro { margin: 8px 0 0; color: #b0261b; font-style: italic; }

.sem-anim .bst-cartao.escrevendo > * { animation: none; }
body.sem-anim-bst .bst-carimbo, body.sem-anim-bst .bst-ataque, body.sem-anim-bst .bst-rolando { animation: none; }
@media (prefers-reduced-motion: reduce) {
    .bst-cartao.escrevendo > *, .bst-carimbo, .bst-ataque, .bst-rolando { animation: none; }
}

/* radios of the attack table: a ring of ink, a drop of red when chosen */
.bst-at-op input[type=radio], .bst-alvo input[type=radio] {
    appearance: none; -webkit-appearance: none; width: 14px; height: 14px; margin: 0; border: 1.5px solid rgba(110, 30, 22, .7); border-radius: 50%; background: transparent;
}
.bst-at-op input[type=radio]:checked, .bst-alvo input[type=radio]:checked { background: radial-gradient(circle, #a3261b 0 45%, transparent 50%); }

/* ---------- the spell of a magic ability (17/10): a slip of the grimoire pinned to the page, its seal in the colour of the spell ---------- */
.bst-magia {
    --cor-magia: #9b6bff;
    position: relative; margin: -2px 0 12px 14px; padding: 9px 14px 10px 16px;
    background: linear-gradient(100deg, rgba(76, 42, 122, .07), rgba(255, 250, 233, .35) 40%), rgba(255, 250, 233, .28);
    border-left: 2px solid color-mix(in srgb, var(--cor-magia) 55%, #3b1f5e);
    box-shadow: inset 0 0 0 1px rgba(59, 31, 94, .12);
    color: #3b1f5e; transform: rotate(-.2deg);
}
.bst-compradas li > .bst-magia { flex-basis: 100%; margin: 4px 0 2px; }
.bst-magia.vazia { font-style: italic; color: rgba(59, 31, 94, .7); }
.bst-magia.vazia p { margin: 0 0 4px; }
.bst-magia p { margin: 0; }
.bst-magia-cab { display: flex; align-items: baseline; gap: 8px; }
.bst-magia-selo {
    display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; align-self: center;
    border-radius: 50%; font-size: 11px; color: #fff8e6;
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--cor-magia) 70%, #fff), color-mix(in srgb, var(--cor-magia) 70%, #1a0c2e) 75%);
    box-shadow: 0 1px 2px rgba(26, 12, 46, .45);
}
.bst-magia-nome { font-family: var(--e-nome); font-weight: 400; font-size: 21px; line-height: 1.1; color: #2c1450; }
.bst-magia-custo { margin-left: auto; font-size: 14px; color: #5a3d7a; white-space: nowrap; }
.bst-magia-custo b { font-size: 18px; color: #3b1f5e; }
.bst-magia-custo.fora, .bst-magia-custo.fora b { color: #b0261b; }
.bst-magia-ess { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 3px !important; font-size: 14px; }
.bst-magia-ess b { font-family: var(--e-sc); font-weight: 400; color: #2c1450; }
.bst-magia-cat { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 3px !important; font-size: 13px; font-style: italic; color: #5a3d7a; }
.bst-magia-prop { font-style: normal; font-family: var(--e-sc); color: #8e1f15; }
.bst-magia-desc { margin-top: 5px !important; font-size: 14px; line-height: 1.35; font-style: italic; color: #4a2c66; }
.bst-magia-desc i { font-style: normal; color: #3b1f5e; }
.bst-magia-aviso { margin-top: 4px !important; font-size: 13.5px; font-style: italic; color: #b0261b; }
/* the generator of the spell in the forge (23/10): coerente / ousado and the locks of the fields */
.bst-magia-modo { display: inline-flex; gap: 4px; }
.bst-magia-travas { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin-top: 5px; }
.bst-magia-travas .bst-grupo-rot { margin: 0 4px 0 0; }
.bst-trava.bst-trava-rot { width: auto; height: 24px; grid-auto-flow: column; gap: 3px; padding: 2px 8px 2px 4px; border-radius: 12px; font-size: 13.5px; font-style: italic; }
.bst-trava.bst-trava-rot svg { width: 15px; height: 15px; }
.bst-magia-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 7px; padding-top: 6px; border-top: 1px dashed rgba(59, 31, 94, .25); }
.bst-at-magia { color: #6b3fb0; }
/* the result of a cast is where the animation of the grimoire plays */
.bst-palco-magia { overflow: visible; }

/* ---------- the bank of spells of the campaign (Etapa 4b, 17/10): the slips of the spells over the table ---------- */
.botao-banco::before, .botao-grimorio-mestre::before { content: ''; width: 16px; height: 16px; flex: none; background: currentColor; opacity: .8; -webkit-mask: var(--marca) center / contain no-repeat; mask: var(--marca) center / contain no-repeat; }
/* drawn marks (26/10): a four-pointed star for the bank, an open book for the grimoire */
.botao-banco { --marca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0l1.6 6.4L16 8l-6.4 1.6L8 16l-1.6-6.4L0 8l6.4-1.6z'/%3E%3C/svg%3E"); }
.botao-grimorio-mestre { --marca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 3c2.6-.6 4.8-.2 6.5 1.2V14C5.8 12.7 3.6 12.3 1 12.8zM15 3c-2.6-.6-4.8-.2-6.5 1.2V14c1.7-1.3 3.9-1.7 6.5-1.2z'/%3E%3C/svg%3E"); }
.bst-banco { width: min(860px, 62vw); }
/* the bank opens from the Mesa: centered over the table (the attack scroll stays at the right, next to the sheets) */
.bst-banco-fundo { background: rgba(5, 3, 1, .62); }
.bst-banco { left: 50%; right: auto; transform: translate(-50%, -50%); animation: bst-banco-entra 300ms var(--e-ease-tinta); }
.bst-banco .dialogo-fechar { top: 18px; right: 20px; }
@keyframes bst-banco-entra { from { opacity: 0; transform: translate(-50%, -47%); } to { opacity: 1; transform: translate(-50%, -50%); } }
.bst-banco-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 18px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px dashed rgba(58, 36, 20, .3); }
.bst-banco-filtros input {
    min-width: 220px; padding: 4px 8px; border: 1px solid rgba(58, 36, 20, .4); border-radius: 3px;
    background: rgba(255, 250, 233, .35); color: var(--e-tinta); font: inherit; font-size: 16px;
}
.bst-banco-filtros input::placeholder { color: rgba(58, 36, 20, .4); font-style: italic; }
.bst-banco-filtros input:focus, .bst-banco-filtros select:focus { outline: none; border-color: #8e1f15; }
.bst-banco-lista { list-style: none; margin: 0; padding: 0; }
/* the two sections of the bank (23/10): the master's spells (hidden until he releases each one) and the players' */
.bst-banco-secao { margin: 14px 0 10px; padding-bottom: 3px; border-bottom: 1px solid rgba(58, 36, 20, .3); font-family: var(--e-sc); font-weight: 400; font-size: 17px; color: #3a2414; }
.bst-banco-secao:first-child { margin-top: 0; }
.bst-banco-secao small { margin-left: 6px; font-family: inherit; font-size: 13px; font-style: italic; color: rgba(58, 36, 20, .6); text-transform: none; }
.bst-banco-selo { display: inline-block; padding: 0 6px; border: 1px solid rgba(58, 36, 20, .45); border-radius: 999px; font-style: normal; font-size: 12px; color: rgba(58, 36, 20, .75); }
.bst-banco-item.liberada .bst-banco-selo { border-color: #8e1f15; color: #8e1f15; }
.bst-banco-item { margin: 0 0 16px; }
.bst-banco-item > .bst-magia { margin: 0; }
.bst-banco-autor { margin-top: 2px !important; font-size: 13.5px; font-style: italic; color: #5a3d7a; }
.bst-banco-autor b { font-style: normal; font-family: var(--e-sc); font-weight: 400; color: #2c1450; }
.bst-banco-acoes { display: flex; justify-content: flex-end; gap: 18px; margin: 5px 6px 0; }
.bst-banco-dar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 6px 0 0 14px; padding: 8px 12px; border-left: 2px solid #8e1f15; background: rgba(255, 250, 233, .3); }
.bst-banco-dar .bst-vazio { margin: 0; }
/* "escolher do banco" (25/10): the bank opened from a magic ability of the forge, only the spells that fit its mpMax */
.bst-do-banco { color: #4a2c66; }
.bst-do-banco::before { content: '✦ '; font-style: normal; text-decoration: none; display: inline-block; margin-right: 2px; }
.bst-magia.vazia .botao-texto + .botao-texto { margin-left: 14px; }
.bst-banco-escolha .bst-at-cab p b { font-style: normal; font-family: var(--e-sc); font-weight: 400; color: #2a1608; }
.bst-banco-todas { margin: 0 0 3px auto; font-size: 14.5px; font-style: italic; color: var(--e-tinta-2); }
.bst-escolha-item { transition: opacity 160ms; }
.bst-escolha-item.nao-cabe { opacity: .5; }
.bst-escolha-item.nao-cabe:hover, .bst-escolha-item.nao-cabe:focus-within { opacity: .85; }
.bst-escolha-item.atual > .bst-magia { box-shadow: inset 0 0 0 1px rgba(59, 31, 94, .12), -6px 0 0 -2px #8e1f15; }
.bst-escolha-item .bst-banco-acoes { align-items: center; }
.bst-banco-nota { font-size: 13.5px; font-style: italic; color: rgba(58, 36, 20, .62); }
.bst-banco-filtros .bst-banco-todas input { min-width: 0; padding: 0; }

/* ---------- the picker of the crest (25/10): the crest of the card is a button in the forge, a papyrus slip opens below it ---------- */
.bst-brasao-botao, .bst-em-mini { padding: 0; border: 0; background: none; cursor: pointer; }
.bst-brasao-botao { position: relative; flex: none; border-radius: 6px; transition: transform 160ms var(--e-ease-tinta); }
.bst-brasao-botao:hover { transform: translateY(-2px) rotate(-2deg); }
.bst-brasao-botao::after {
    content: '✎'; position: absolute; right: -4px; bottom: 6px; display: grid; place-items: center; width: 22px; height: 22px;
    border-radius: 50%; background: #f3e3bd; border: 1px solid rgba(58, 36, 20, .5); color: #6e1e16; font-size: 13px;
    opacity: 0; transition: opacity 160ms;
}
.bst-brasao-botao:hover::after, .bst-brasao-botao:focus-visible::after { opacity: 1; }
.bst-brasao-botao:focus-visible, .bst-em-mini:focus-visible { outline: 2px solid #8e1f15; outline-offset: 3px; }
.bst-em-mini { display: inline-flex; align-items: center; gap: 8px; }
.bst-em-mini .bst-brasao-p { width: 30px; height: 36px; }
.bst-em-mini i { font-size: 14px; color: var(--e-tinta-2); text-decoration: underline; text-underline-offset: 3px; }
.bst-emblema-fundo { position: fixed; inset: 0; z-index: 75; display: none; background: rgba(5, 3, 1, .32); }
.bst-emblema-fundo.aberto { display: block; }
.bst-emblema {
    position: absolute; left: 40px; top: 120px; width: 470px; padding: 22px 24px 16px; color: var(--e-tinta); background: var(--tex-papiro);
    transform: rotate(-.4deg); box-shadow: 0 3px 4px rgba(0, 0, 0, .5), 0 26px 50px rgba(0, 0, 0, .6);
    animation: bst-em-entra 220ms var(--e-ease-tinta);
}
@keyframes bst-em-entra { from { opacity: 0; transform: translateY(-6px) rotate(-1.2deg); } to { opacity: 1; transform: rotate(-.4deg); } }
.bst-em-cab { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.bst-em-cab .bst-brasao { width: 56px; height: 67px; }
.bst-em-cab h3 { margin: 0; font-family: var(--e-uncial); font-weight: 400; font-size: 28px; line-height: 1; text-transform: lowercase; color: #8e1f15; }
.bst-em-cab p { margin: 3px 0 0; font-size: 14px; font-style: italic; color: var(--e-tinta-2); }
.bst-emblema h4 { margin: 12px 0 6px; font-weight: 400; }
.bst-em-icones { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.bst-em-op { display: grid; justify-items: center; gap: 1px; padding: 5px 2px 3px; border: 1px solid transparent; border-radius: 4px; background: none; cursor: pointer; transition: background 140ms, border-color 140ms; }
.bst-em-op small { max-width: 100%; font-size: 11.5px; font-style: italic; line-height: 1.1; color: var(--e-tinta-2); text-align: center; }
.bst-em-op:first-child { grid-column: span 2; }
.bst-em-op:hover { background: rgba(58, 36, 20, .07); }
.bst-em-op.ativo { border-color: rgba(110, 30, 22, .55); background: rgba(255, 250, 233, .45); }
.bst-em-op.ativo small { color: #6e1e16; }
.bst-em-cores { display: flex; flex-wrap: wrap; gap: 6px 4px; }
.bst-em-cor { display: grid; justify-items: center; gap: 2px; width: 56px; padding: 4px 0 2px; border: 1px solid transparent; border-radius: 4px; background: none; cursor: pointer; }
.bst-em-cor span {
    width: 26px; height: 31px; background: var(--tinta);
    clip-path: path('M0 0H26V15.6C26 23.9 13 29.6 13 29.6S0 23.9 0 15.6Z');
    box-shadow: inset 0 0 0 2px rgba(255, 228, 160, .35);
}
.bst-em-cor.auto span { background: linear-gradient(135deg, var(--tinta) 0 50%, transparent 50%), repeating-linear-gradient(45deg, rgba(58, 36, 20, .35) 0 2px, transparent 2px 5px); }
.bst-em-cor small { font-size: 11.5px; font-style: italic; line-height: 1.1; color: var(--e-tinta-2); text-align: center; }
.bst-em-cor:first-child { width: 90px; }
.bst-em-cor:hover { background: rgba(58, 36, 20, .07); }
.bst-em-cor.ativo { border-color: rgba(110, 30, 22, .55); background: rgba(255, 250, 233, .45); }
.bst-emblema .bst-at-pe { margin-top: 14px; padding-top: 10px; }
body.sem-anim-bst .bst-emblema { animation: none; }
@media (prefers-reduced-motion: reduce) { .bst-emblema, .bst-brasao-botao { animation: none; transition: none; } }
/* the crest of a monster in the combat list (25/10) */
.bst-brasao.cmb-brasao { width: 32px; height: 38px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4)); }

/* ---------- the index of the creatures (25/10): search, folders as chapters, filters, a ribbon in the colour of the crest ---------- */
.bst-indice-cab { margin: 10px 0 4px; padding-bottom: 8px; border-bottom: 1px solid rgba(58, 36, 20, .3); }
.bst-ind-busca { display: block; }
.bst-ind-busca input {
    width: 100%; padding: 2px 2px 3px 24px; border: 0; border-bottom: 1.5px dotted rgba(58, 36, 20, .55); font: inherit; font-size: 17px; color: var(--e-tinta);
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='8' cy='8' r='5.5' fill='none' stroke='%235a3d22' stroke-width='1.8'/%3E%3Cpath d='M12 12l5 5' stroke='%235a3d22' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 2px 50% / 16px;
}
.bst-ind-busca input::placeholder { font-style: italic; color: rgba(58, 36, 20, .4); }
.bst-ind-busca input:focus { outline: none; border-bottom-color: #8e1f15; }
.bst-ind-pastas { margin: 10px 0 2px; gap: 5px; }
.bst-ind-pastas .bst-chip { border-radius: 3px 3px 3px 12px; }
.bst-chip small.num { margin-left: 3px; font-size: 12px; opacity: .7; display: inline; font-style: normal; }
.bst-ind-filtros { margin-top: 8px; }
.bst-ind-filtros summary { display: flex; align-items: baseline; gap: 8px; cursor: pointer; list-style: none; font-family: var(--e-sc); font-size: 14.5px; color: var(--e-tinta-2); }
.bst-ind-filtros summary::-webkit-details-marker { display: none; }
.bst-ind-filtros summary::before { content: '▸'; font-size: 12px; transition: transform 160ms; }
.bst-ind-filtros[open] summary::before { transform: rotate(90deg); }
.bst-ind-filtros summary small { padding: 0 6px; border-radius: 8px; background: #8e1f15; color: #fbe6d4; font-size: 12px; }
.bst-ind-filtros summary .botao-texto { margin-left: auto; padding: 0; font-family: var(--e-texto); font-size: 13.5px; }
.bst-ind-linha { margin: 7px 0 0; }
.bst-ind-linha .bst-chips { gap: 4px; }
.bst-indice .bst-vazio .botao-texto { padding: 0; font-size: inherit; }
.bst-capitulo {
    display: flex; align-items: baseline; gap: 8px; margin: 16px 0 0; padding-bottom: 2px;
    font-family: var(--e-uncial); font-weight: 400; font-size: 22px; line-height: 1.1; text-transform: lowercase; color: #8e1f15;
}
.bst-capitulo::before { content: '❧'; font-family: var(--e-texto); font-size: 16px; color: rgba(142, 31, 21, .7); }
.bst-capitulo::after { content: ''; flex: 1; height: 1px; align-self: center; background: linear-gradient(90deg, rgba(58, 36, 20, .45), transparent); }
.bst-capitulo small { order: 2; font-family: var(--e-texto); font-size: 13.5px; font-style: italic; text-transform: none; color: var(--e-tinta-2); white-space: nowrap; }
.bst-capitulo span { order: 1; }
.bst-capitulo::after { order: 3; }
.bst-indice .bst-salvos { margin-top: 4px; }
.bst-salvo { position: relative; padding-left: 16px; }
.bst-salvo::before {
    content: ''; position: absolute; left: 2px; top: -1px; width: 7px; height: 46px; background: var(--fita, #7a2a1c);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 6px), 0 100%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); opacity: .9;
}
.bst-tags { display: flex; flex-wrap: wrap; gap: 3px 4px; margin: 4px 0 1px; }
.bst-tag {
    display: inline-block; padding: 0 7px; border: 1px solid rgba(58, 36, 20, .32); border-radius: 9px; background: rgba(255, 250, 233, .3);
    font: inherit; font-size: 12.5px; font-style: italic; line-height: 1.45; color: #5a3d22;
}
button.bst-tag { cursor: pointer; }
button.bst-tag:hover, .bst-tag.ativo { border-color: #8e1f15; color: #8e1f15; }
.bst-etiquetas { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; margin: 6px 0 0; }
.bst-pasta { margin-right: 6px; font-family: var(--e-sc); font-size: 14px; color: #8e1f15; }
.bst-pasta::before { content: '❧ '; font-family: var(--e-texto); }
.bst-arquivo { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 4px 18px; margin: 4px 0 10px; }
.bst-arquivo .bst-campo input { width: 100%; }
.bst-arquivo .bst-campo span i { font-family: var(--e-texto); font-size: 12px; letter-spacing: 0; color: rgba(58, 36, 20, .55); }
.bst-tags-sug { grid-column: 1 / -1; gap: 4px; }
.bst-chip-tag { font-style: italic; }