/*   CSS FILE HEADER #
 *
 *   File:         [combate.css]
 *   Author(s):    ['Pedro H.F Matias']
 *   Date:         ['07.10.2026']
 *   Version:      ['0.1.0']
 *   Description:  ['What is left of the old combat sheets of the bench (etapa 3c): the stamp and the damage of the attack slip, the free dice tray and the logs of the Dados panel, the marks (lesões, desgraças, temporary effects) and the end of the turn of the quick panels, the ink checkboxes and paper rulers, and the condition seals in the dotted circles of the paper sheet.']
 */

/* field labels read like Daniel's 'efeitos:': italic, sentence case (the global label of tema.css is caps; not here) */
.bancada label { text-transform: none; letter-spacing: 0; color: var(--tinta); }
/* the ink box: a square drawn with the quill, a red X when ticked (bench, quick panel, buying dialog) */
:is(.bancada, .painel-rapido, .compra-opcoes) input[type="checkbox"] {
    appearance: none; flex: none; width: 16px; height: 16px; margin: 0; display: inline-block; cursor: pointer; vertical-align: -.15em;
    border: 1.5px solid var(--tinta); border-radius: 1px 3px 2px 3px; background: color-mix(in srgb, var(--e-papiro-claro) 40%, transparent);
    transition: background-color var(--e-dur-toque), border-color var(--e-dur-toque);
}
:is(.bancada, .painel-rapido, .compra-opcoes) input[type="checkbox"]:checked {
    border-color: var(--tinta);
    background:
        linear-gradient(45deg, transparent 42%, var(--tinta-vermelha) 42% 58%, transparent 58%),
        linear-gradient(-45deg, transparent 40%, var(--tinta-vermelha) 40% 57%, transparent 57%),
        color-mix(in srgb, var(--e-papiro-claro) 40%, transparent);
}
:is(.bancada, .painel-rapido, .compra-opcoes) input[type="checkbox"]:focus-visible { outline: none; box-shadow: var(--e-foco); }
:is(.bancada, .painel-rapido, .compra-opcoes) input[type="checkbox"]:hover { border-color: var(--tinta-vermelha); }
/* the wooden stamp: inked capitals, slightly tilted, with a worn border */
.cb-carimbo {
    display: inline-block; margin-left: auto; padding: .1em .55em; border: 3.5px double currentColor; border-radius: 4px; transform: rotate(-9deg);
    font: 700 1.6em/1.1 var(--titulo, serif); letter-spacing: .12em; text-transform: uppercase; opacity: .88; mix-blend-mode: multiply;
}
[data-tom="escuro"] .cb-carimbo { mix-blend-mode: normal; }
.cb-carimbo.acertou { color: #8a1c14; }
.cb-carimbo.errou { color: #4b3a2a; }
.cb-carimbo.aguardando { color: #6d4f17; font-size: 1.05em; letter-spacing: .06em; }
.cb-dano { margin: 8px 0 0; font: italic 1.05em var(--serif); }
.cb-dano strong { font: 1.9em/1 var(--serif); color: var(--tinta-vermelha); font-style: normal; font-weight: 400; margin: 0 4px; }
.cb-dano span { white-space: nowrap; }
.cb-lesao-alvo { margin: 6px 0 0; font: italic .95em var(--serif); }
.cb-lesao-alvo small { display: block; opacity: .8; }

/* ================= FREE DICE AND THE LOG ================= */
.cb-livres { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cb-livre {
    position: relative; display: grid; justify-items: center; gap: 1px; width: 52px; padding: 5px 2px 3px; border: 2px solid color-mix(in srgb, var(--tinta) 35%, transparent);
    border-radius: 5px; background: none; color: var(--tinta); font: italic .85em var(--serif); cursor: pointer;
}
.cb-livre svg { width: 28px; height: 28px; }
.cb-livre b { font: 1.1em var(--serif); }
.cb-livre { transition: border-color var(--e-dur-toque), transform var(--e-dur-toque); }
.cb-livre:hover { border-color: var(--tinta); }
.cb-livre:active { transform: translateY(1px); }
.cb-livre:focus-visible, .cb-tratar:focus-visible { outline: none; box-shadow: var(--e-foco); }
/* the roll of the dice table: dim but present while nothing is picked */
.cb-livres .btn:disabled { opacity: .55; }
.cb-livre.tem { border-color: var(--tinta-vermelha); background: color-mix(in srgb, var(--tinta-vermelha) 8%, transparent); }
.cb-livre i {
    position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 10px; display: grid; place-items: center;
    background: radial-gradient(circle at 35% 30%, var(--cera-luz), var(--cera) 60%, #4d0d0d); color: #fbe9d6; font: 700 .8em/1 var(--serif); font-style: normal;
}
.cb-historico, .cb-registro { margin: 0; padding-left: 1.3em; font: .95em/1.35 var(--serif); }
.cb-historico li { margin-bottom: 2px; }
.cb-historico b { font: 1.15em var(--serif); color: var(--tinta-vermelha); font-weight: 400; }
.cb-historico em { color: var(--ouro); }
.cb-historico small, .cb-registro { opacity: .8; }
.cb-registro { font-style: italic; }
.cb-historico .area-vazia, .cb-registro .area-vazia, .cb-marcas .area-vazia { list-style: none; margin-left: -1.3em; }

.cb-turno { display: flex; flex-wrap: wrap; gap: 8px; }
/* the end of the turn is the button of every round: big, inked in wax red, impossible to miss */
.cb-fim-turno { display: inline-flex; align-items: center; gap: 12px; padding: .55em 1.4em .55em 1em; border: 2px solid color-mix(in srgb, var(--cera) 60%, #000);
    border-radius: 10px; background: radial-gradient(circle at 30% 25%, var(--cera-luz), var(--cera) 62%, #4d0d0d); color: #fbe9d6; cursor: pointer;
    font: 700 1.25em/1.05 var(--uncial); letter-spacing: .02em; text-align: left; box-shadow: 0 3px 0 #3a0909, 0 6px 14px rgba(40, 10, 5, .35);
    transition: transform .12s, box-shadow .12s, filter .2s; }
.cb-fim-turno .ic { width: 1.5em; height: 1.5em; stroke: currentColor; flex: none; }
.cb-fim-turno small { display: block; font: italic 400 .58em/1.3 var(--serif); opacity: .85; letter-spacing: 0; }
.cb-fim-turno:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 4px 0 #3a0909, 0 10px 18px rgba(40, 10, 5, .4); }
.cb-fim-turno:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #3a0909, 0 3px 8px rgba(40, 10, 5, .35); }
.cb-fim-turno:disabled { opacity: .5; cursor: not-allowed; }

.cb-marcas { margin: 0 0 8px; padding-left: 1.3em; font: 1em/1.4 var(--serif); }
.cb-marcas small { font-style: italic; opacity: .8; }
.cb-marcas li.morte b { color: var(--tinta-vermelha); text-transform: uppercase; letter-spacing: .08em; }
.cb-tratar { margin-left: 6px; padding: 0 .5em; border: 1px solid color-mix(in srgb, var(--tinta) 35%, transparent); border-radius: 3px; background: none; color: inherit; font: italic .8em var(--serif); cursor: pointer; opacity: .7; }
.cb-tratar:hover { opacity: 1; }

.cb-texto { margin: 0; line-height: 1.45; background: none; box-shadow: none; }
.cb-morte { margin: 0; font: 1.3em/1.5 var(--serif); text-align: center; background: none; box-shadow: none; }

/* ================= ON THE PAPER SHEET ================= */
.ff-efeitos { cursor: pointer; }
.ff-efeitos i.tem { border: 0; border-radius: 0; display: block; }
.ff-efeitos i.tem .selo-cond { width: 100%; height: auto; display: block; overflow: visible; }

/* ================= WAX SEAL OF A CONDITION (js/selo.js) ================= */
.selo-cond { --c1: var(--cera-luz); --c2: var(--cera); --c3: #4d0d0d; --letra: #fbe9d6; overflow: visible; filter: drop-shadow(0 2px 2px rgba(30, 10, 5, .45)); }
[data-qualidade="baixo"] .selo-cond { filter: none; }
.selo-cond.bom { --c1: #f7e3a1; --c2: #b8862c; --c3: #5a3d0e; --letra: #3a2408; }
.selo-cond.neutro { --c1: #cbbfe0; --c2: #5d4b7c; --c3: #261d3a; --letra: #f1eaff; }
.sc-cera { fill: var(--c2); stroke: var(--c3); stroke-width: 1.4; }
.sc-gota { fill: var(--c2); stroke: var(--c3); stroke-width: 1.2; }
.sc-anel { fill: none; stroke: color-mix(in srgb, var(--c1) 70%, transparent); stroke-width: 3; }
.sc-miolo { fill: color-mix(in srgb, var(--c2) 80%, var(--c3)); stroke: var(--c3); stroke-width: 1.6; }
.selo-cond text { fill: var(--letra) !important; text-anchor: middle; }
.sc-nome { font-family: var(--uncial); letter-spacing: .04em; }
.sc-pontos { font: 26px var(--serif); }
.ff-atacar {
    display: inline-grid; place-items: center; width: 2.5cqw; height: 2.5cqw; margin-right: .5cqw; padding: .2cqw; vertical-align: -.5cqw;
    border: .16cqw solid color-mix(in srgb, var(--tinta) 55%, transparent); border-radius: 50%; background: none; color: var(--tinta-vermelha); cursor: pointer;
}
.ff-atacar svg { width: 100%; height: 100%; }
.ff-atacar:hover { background: color-mix(in srgb, var(--tinta-vermelha) 12%, transparent); border-color: var(--tinta-vermelha); }
.ff-vazio .ff-atacar { vertical-align: middle; }
.rolagem-mods { margin-top: 4px; font: italic .85em var(--serif); opacity: .85; }

/* ================= SEGMENTS ON THE BENCH PAPERS: a paper ruler, the chosen cell underlined in gold ink ================= */
.papel .segmentos, .painel-rapido .segmentos { border: 1px solid color-mix(in srgb, var(--tinta) 45%, transparent); border-radius: var(--e-raio-controle); background: none; }
.papel .segmentos button, .painel-rapido .segmentos button {
    border-right: 1px dotted color-mix(in srgb, var(--tinta) 40%, transparent); background: none; color: var(--tinta); font-weight: 400;
    transition: background-color var(--e-dur-toque), box-shadow var(--e-dur-toque);
}
.papel .segmentos button:hover, .painel-rapido .segmentos button:hover { background: color-mix(in srgb, var(--e-papiro-sombra) 35%, transparent); color: var(--tinta); }
.papel .segmentos button.ativo, .painel-rapido .segmentos button.ativo {
    background: color-mix(in srgb, var(--e-papiro-sombra) 55%, transparent); color: var(--tinta); font-weight: 400;
    box-shadow: inset 0 -2px 0 var(--e-ouro-tinta); text-shadow: none;
}
.papel .segmentos button:focus-visible, .painel-rapido .segmentos button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--tinta-vermelha); }
[data-tom="escuro"] .papel .segmentos button.ativo { box-shadow: inset 0 -2px 0 var(--e-ouro); }

.cb-temporarios { margin: 0 0 8px; padding-left: 1.3em; font: .98em/1.4 var(--serif); }
.cb-temporarios small { font-style: italic; opacity: .75; }
.cb-no-alvo { margin: 6px 0 0; font: italic .95em var(--serif); color: var(--tinta-vermelha); }