/* ==========================================================================
   Cast with roll to hit and damage (13/10): the target panel (mana panel) and the reading on the spell card.
   Loaded by apps/grimorio/index.html and apps/ficha/index.html (Grimório page).
   ========================================================================== */

/* ---------- target of the magic attacks: RM, advantage, bonus, pool ---------- */
/* inside the second line of the mana panel (grimorio.css .mana-sub), which draws the dashed rule above it */
.alvo-magia {
    flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font: .92em var(--serif); color: var(--texto-2);
}
.alvo-rotulo { font: 600 .82em var(--titulo); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); }
.alvo-campo { display: inline-flex; align-items: center; gap: 5px; }
.alvo-campo.oculto { display: none; }
.alvo-campo input, .alvo-campo select { width: 4.2em; padding: .15em .35em; font: inherit; color: var(--texto); background: var(--painel-2); border: 1px solid var(--borda-forte); border-radius: 3px; }
.alvo-campo select { width: auto; }
.alvo-campo.alvo-luta span { color: var(--perigo); font-weight: 600; }
.alvo-campo.alvo-luta select { max-width: 12em; }
.alvo-vantagem { display: inline-flex; border: 1px solid var(--borda-forte); border-radius: 3px; overflow: hidden; }
.alvo-vantagem button { padding: .15em .55em; font: inherit; color: var(--texto-2); background: transparent; border: 0; cursor: pointer; }
.alvo-vantagem button + button { border-left: 1px solid var(--borda); }
.alvo-vantagem button.ativo { color: var(--texto); background: color-mix(in srgb, var(--ouro) 22%, transparent); }
.alvo-pool { margin-left: 4px; font: 1em var(--titulo); color: var(--ouro-2); cursor: help; }

/* ---------- the reading on the card (like the attack of the sheet) ---------- */
.leitura-magia {
    position: relative; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; padding: 8px 12px 10px;
    border: 1px solid color-mix(in srgb, var(--cor) 45%, var(--borda)); border-radius: 3px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--cor) 9%, transparent), var(--painel-2));
    animation: tinta-surge .4s backwards;
}
.leitura-magia.critico { border-color: var(--ouro); box-shadow: 0 0 18px -4px color-mix(in srgb, var(--ouro) 70%, transparent); }
.lm-topo { display: flex; align-items: baseline; gap: 8px; padding-right: 18px; }
.lm-topo b { font: 600 .85em var(--titulo); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2); }
.lm-topo small { color: var(--texto-3); font-style: italic; }
.lm-fechar { position: absolute; top: 2px; right: 6px; border: 0; background: none; color: var(--texto-3); font-size: 1.2em; cursor: pointer; line-height: 1; }
.lm-fechar:hover { color: var(--texto); }
.lm-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.lm-faces { display: inline-flex; gap: 4px; }
.lm-d6 {
    display: inline-grid; place-items: center; width: 1.65em; height: 1.65em; border-radius: 5px; font: 700 .95em var(--titulo); font-style: normal;
    color: #2b2016; background: linear-gradient(160deg, #f6ecd6, #d9c7a2); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18), 0 1px 2px rgba(0, 0, 0, .3);
}
.leitura-magia.critico .lm-d6 { background: linear-gradient(160deg, #fff2c2, #e7bf55); }
.lm-total { font: 600 1.9em/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; color: var(--texto); }
.lm-critico { font: 600 1.05em var(--titulo); color: var(--ouro-2); text-shadow: 0 0 8px color-mix(in srgb, var(--ouro) 60%, transparent); }
/* the wooden stamp: inked capitals, slightly tilted, worn double border */
.lm-carimbo {
    display: inline-block; margin-left: auto; padding: .05em .5em; border: 3px double currentColor; border-radius: 4px; transform: rotate(-9deg);
    font: 700 1.25em/1.1 var(--titulo, serif); letter-spacing: .12em; text-transform: uppercase; opacity: .9;
}
.lm-carimbo.acertou { color: var(--perigo); }
.lm-carimbo.errou { color: var(--texto-3); }
/* the campaign combat (etapa 3): the master has the verdict */
.lm-carimbo.aguardando { color: var(--ouro-2); font-size: .8em; letter-spacing: .05em; white-space: nowrap; }
.lm-pede-luta { justify-content: flex-end; }
.lm-mods { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; list-style: none; font-size: .85em; color: var(--texto-3); }
.lm-mods b { color: var(--texto-2); font-weight: 600; }
.lm-pede { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lm-pede label { display: inline-flex; align-items: center; gap: 6px; font: italic 1em var(--serif); letter-spacing: normal; text-transform: none; color: var(--texto-2); }
.lm-pede input.lm-rm { width: 4.6em; padding: .15em .35em; font: inherit; color: var(--texto); background: var(--painel-2); border: 1px solid var(--borda-forte); border-radius: 3px; }
.lm-nota { margin: 0; font-size: .85em; font-style: italic; color: var(--texto-3); }
.lm-dano { margin: 0; font: italic 1.02em var(--serif); color: var(--texto-2); }
.lm-dano b { font: 1.5em/1 var(--serif); font-style: normal; color: var(--cor-res, var(--ouro-2)); margin-right: 2px; }
/* numerals of Cormorant/Cinzel: lining, so 11 never reads as II */
.lm-d6, .lm-total, .lm-dano b { font-variant-numeric: lining-nums tabular-nums; }