/*   CSS FILE HEADER #
 *
 *   File:         [combate.css]
 *   Author(s):    ['Pedro H.F Matias']
 *   Date:         ['16.10.2026']
 *   Version:      ['0.1.0']
 *   Description:  ['Combat screen of the Mesa do Mestre (etapa 3a): the two sides as papyrus scrolls (one row per fighter with the action boxes, HP, conditions and the turn button) and the scroll of the plays, in the language of mesa.css and bestiario.css. Desktop only.']
 */

.botao-combate { position: relative; }
.cab-combate { color: #e86a55; font-style: normal; font-family: var(--e-sc); letter-spacing: .04em; }

.cmb-cab { margin-bottom: 26px; }
.cmb-cab .nome-campanha { text-transform: lowercase; font-family: var(--e-uncial); }
.cmb-atento { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.cmb-atento b { font-weight: 600; color: var(--e-ouro-claro); font-size: 1.1em; }
.cmb-escolha { display: inline-flex; gap: 6px; margin-left: 6px; }
.cmb-escolha .filtro { color: var(--e-ouro-claro); border-color: rgba(217, 178, 90, .55); background: rgba(20, 10, 4, .45); font-style: normal; }
.cmb-escolha .filtro.ativo { background: var(--latao); color: #2a1608; border-color: #3a2507; }
.cmb-por { display: inline-flex; flex-direction: column; gap: 2px; font-family: var(--e-sc); font-size: 13px; color: var(--e-luz-texto-2); }
.cmb-por select { min-width: 190px; padding: 4px 8px; background: rgba(20, 10, 4, .55); color: var(--e-ouro-claro); border: 1px solid rgba(217, 178, 90, .45); border-radius: 4px; font-family: var(--e-texto); font-size: 15px; }
.cab-acoes { align-items: flex-end; }

.cmb-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 36px; align-items: start; }
.cmb-grupos { display: flex; flex-direction: column; gap: 34px; }
.cmb-grupo { filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .55)) drop-shadow(0 18px 24px rgba(0, 0, 0, .45)); }
.cmb-papel { margin: -6px 0; padding: 22px 26px 16px; color: var(--e-tinta); background: var(--tex-papiro); }
.cmb-papel h3 { margin: 0; font-size: 32px; line-height: 1.1; }
.cmb-papel h3 small { font-family: var(--e-sc); font-size: 14px; text-transform: none; color: var(--e-tinta-vermelha); margin-left: 6px; vertical-align: 4px; }
.cmb-papel .registro-sub b { font-weight: 600; color: var(--e-tinta-vermelha); }
.cmb-criaturas .cmb-papel h3 { color: #5e120c; }

.cmb-linhas { list-style: none; margin: 0; padding: 0; }
.cmb-linha {
    display: grid; grid-template-columns: 210px 292px minmax(0, 1fr) 168px; grid-template-areas: 'quem casas . botoes' 'vida vida cond cond';
    align-items: center; gap: 4px 16px; padding: 12px 6px 10px; border-bottom: 1px dashed rgba(58, 36, 20, .35);
    transition: background 300ms;
}
.cmb-linha:last-child { border-bottom: 0; }
.cmb-linha.estado-em-turno { background: linear-gradient(90deg, rgba(176, 38, 27, .12), rgba(176, 38, 27, .02)); box-shadow: inset 3px 0 0 var(--e-tinta-vermelha); }
.cmb-linha.estado-terminou { opacity: .78; }
.cmb-linha.caido .cmb-nome { text-decoration: line-through 1.5px rgba(42, 23, 10, .6); }
.cmb-linha.some { grid-template-columns: 1fr auto; grid-template-areas: 'quem botoes'; font-style: italic; color: var(--e-tinta-3); }
.cmb-quem { grid-area: quem; display: flex; align-items: center; gap: 10px; min-width: 0; }
.cmb-quem > div { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.cmb-nome { font-family: var(--e-nome); font-weight: 400; font-size: 24px; color: #2a170a; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.cmb-nome:hover { color: var(--e-tinta-vermelha); }
.cmb-quem small { font-size: 13px; color: var(--e-tinta-3); font-style: italic; }
.cmb-token-selo { position: relative; flex: none; width: 30px; height: 36px; display: grid; place-items: center; }
.cmb-token-selo svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: #5e120c; stroke: #b8872f; stroke-width: 6; }
.cmb-token-selo span { position: relative; color: #f3d98e; font-size: 15px; margin-top: -4px; }

.cmb-casas { grid-area: casas; display: flex; gap: 4px; }
.cmb-casa {
    min-width: 46px; padding: 3px 7px 2px; border: 1.4px solid rgba(58, 36, 20, .7); border-radius: 2px; background: rgba(255, 245, 220, .35);
    font-family: var(--e-sc); font-size: 13px; color: var(--e-tinta-2); cursor: pointer; transition: background 160ms, color 160ms;
}
.cmb-casa:hover, .cmb-casa:focus-visible { border-color: var(--e-tinta-vermelha); outline: none; }
.cmb-casa.marcada { background: var(--e-tinta); color: #f0e2bf; border-color: var(--e-tinta); text-decoration: line-through 1px rgba(240, 226, 191, .6); }
.cmb-casa.reacao { border-style: dashed; }
.cmb-casa.reacao.marcada { background: #6e1e16; border-color: #6e1e16; }

.cmb-vida { grid-area: vida; min-width: 0; padding-left: 40px; }
.cmb-vida .recurso { margin: 0; }
.cmb-botoes { grid-area: botoes; display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.cmb-botoes .bst-acao-atacar { padding: 3px 10px; }
.cmb-terminar { filter: hue-rotate(-18deg) saturate(1.2); }
.cmb-feito { font-family: var(--e-sc); font-size: 13px; color: var(--e-tinta-3); }
.cmb-tirar { width: 24px; height: 24px; padding: 0; border: 1px solid rgba(58, 36, 20, .45); border-radius: 50%; background: transparent; color: var(--e-tinta-2); font-size: 15px; line-height: 1; }
.cmb-tirar:hover, .cmb-tirar:focus-visible { background: var(--e-tinta-vermelha); color: #f7e6c8; border-color: var(--e-tinta-vermelha); outline: none; }
.cmb-cond { grid-area: cond; margin: 0; min-height: 0; align-self: center; }

/* the scroll of the plays */
.cmb-jogadas .registro-papel { max-height: calc(100vh - 200px); }
.cmb-lista-jogadas { list-style: none; margin: 0; padding: 0; }
.cmb-jogada { position: relative; padding: 11px 6px 11px 14px; margin-bottom: 10px; border: 1.2px solid rgba(58, 36, 20, .45); border-radius: 2px; background: rgba(255, 245, 220, .28); box-shadow: inset 3px 0 0 rgba(176, 38, 27, .7); }
.cmb-jogada.errou { box-shadow: inset 3px 0 0 rgba(58, 36, 20, .45); }
.cmb-jogada p { margin: 0 0 4px; }
.cmb-j-linha { font-size: 16px; }
.cmb-j-linha b { font-weight: 400; color: #2a170a; }
.cmb-total { font-weight: 600 !important; color: var(--e-tinta-vermelha) !important; font-size: 1.15em; }
.cmb-magia { padding: 0 .35em; border: 1px solid currentColor; border-radius: 3px; font-style: italic; font-size: .8em; color: #4a2a6b; }
.cmb-honrado { font-style: italic; opacity: .75; }
.cmb-oculto { display: flex; align-items: center; gap: 6px; font-size: 15px; color: var(--e-tinta-3); }
.cmb-oculto b { font-family: var(--e-sc); font-weight: 400; letter-spacing: .06em; }
.cmb-oculto.acertou b { color: var(--e-boa); }
.cmb-oculto.errou b { color: var(--e-tinta-vermelha); }
.cmb-oculto small { margin-left: auto; font-style: italic; font-size: 12px; color: #8a6c48; }
.cmb-cadeado { width: 15px; height: 15px; color: #6d4f17; flex: none; }
.cmb-dano { font-size: 15px; }
.cmb-dano b { font-weight: 600; color: var(--e-tinta-vermelha); }
.cmb-notas { font-size: 13px; font-style: italic; color: #6e3a20; }
.cmb-espera { font-size: 14px; font-style: italic; color: #8a6c48; }
.cmb-j-botoes { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 4px; }
.cmb-j-botoes .botao-latao[disabled] { filter: grayscale(.8) brightness(.85); opacity: .6; cursor: not-allowed; transform: none; }
/* a play of several targets (26/10): one line per target, with its verdict and its own apply */
.cmb-alvos { list-style: none; margin: 4px 0 6px; padding: 0; }
.cmb-alvo { display: grid; grid-template-columns: minmax(80px, auto) 1fr auto; align-items: center; gap: 4px 10px; padding: 4px 0; border-bottom: 1px dashed rgba(58, 36, 20, .25); }
.cmb-alvo:last-child { border-bottom: 0; }
.cmb-alvo-nome { font-size: 15px; color: #2a170a; }
.cmb-alvo .cmb-oculto { font-size: 14px; flex-wrap: wrap; }
.cmb-alvo.errou .cmb-alvo-nome { opacity: .65; }
.cmb-alvo.feito { opacity: .6; }
.cmb-alvo-feito { font-family: var(--e-sc); font-size: 12px; letter-spacing: .06em; color: var(--e-tinta-3); }
.cmb-resolvidas-tit { margin: 16px 0 6px; font-family: var(--e-sc); font-weight: 400; font-size: 14px; color: var(--e-tinta-3); }
.cmb-resolvidas { list-style: none; margin: 0; padding: 0; font-size: 14px; color: var(--e-tinta-2); }
.cmb-resolvidas li { padding: 4px 0; border-bottom: 1px dashed rgba(58, 36, 20, .25); }

/* the turn preview and the start of the combat */
.cmb-form { min-width: 460px; max-width: 560px; }
.cmb-previsto { margin: 4px 0 6px; padding: 0; list-style: none; }
.cmb-previsto li { padding: 6px 0; border-bottom: 1px dashed rgba(58, 36, 20, .3); font-size: 16px; }
.cmb-previsto li b { font-weight: 400; color: #6e1e16; }
.cmb-previsto small { display: block; font-size: 13px; font-style: italic; color: var(--e-tinta-3); }
.cmb-nada { font-style: italic; color: var(--e-tinta-3); }

/* the note "agiu sem começar o turno" */
.cmb-aviso { gap: 12px; }
.cmb-aviso .botao-latao { flex: none; }