/* =========================================================
   MORADORES · ABAS (.mtb-), BESTIÁRIO (.npc-) e TESTES DE MORTE (.mrt-)
   bestiario.js e morte.js (2026-10-07). As cartas e a janela reaproveitam
   .card-, .card-mini-, .card-dialog/.card-view-/.rec- e .stn- (style.css):
   aqui só o que é novo. O padrão é o Mundo Invertido (escuro); em Hawkins,
   a página Moradores é o álbum de quadrinhos (papel, tinta #111, amarelo).
   Celular: bloco "BESTIÁRIO E TESTES DE MORTE" do mobile.css.
   ========================================================= */

/* ---------- as abas de Moradores ---------- */
.mtb { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.mtb-tab { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 16px; border: 1.5px solid var(--line); border-radius: 6px; background: rgba(0, 0, 0, 0.3); color: var(--muted); font: 700 13px var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
.mtb-tab:hover { color: var(--text); border-color: var(--k-neon, #e8352a); }
.mtb-tab[aria-selected="true"] { border-color: #e8352a; background: rgba(232, 53, 42, 0.18); color: var(--text); box-shadow: inset 0 -3px 0 #e8352a; }
.mtb-tab:focus-visible { outline: 3px solid #e8352a; outline-offset: 2px; }
.mtb-curto { display: none; }
.mtb-tab[hidden] { display: none; } /* a aba dos testes de morte, para quem não é admin */
.mtb-painel[hidden] { display: none; }

.theme-hawkins #moradores .mtb { gap: 10px; }
.theme-hawkins #moradores .mtb-tab { border: 2.5px solid #111; border-radius: 0; background: #fff; color: #111; font: 800 15px "Barlow Condensed", var(--font-ui); letter-spacing: 0.1em; box-shadow: 3px 3px 0 #111; transition: transform 0.12s ease, box-shadow 0.12s ease; }
.theme-hawkins #moradores .mtb-tab:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #111; }
.theme-hawkins #moradores .mtb-tab[aria-selected="true"] { background: #111; color: #ffe45c; box-shadow: 3px 3px 0 #e8352a; transform: rotate(-1deg); }

/* ---------- Bestiário: o topo, a lista e os avisos ---------- */
.npc-head, .mrt-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 18px; margin: 0 0 16px; }
.npc-head-txt { flex: 1 1 340px; min-width: 0; }
.npc-kicker, .mrt-kicker { margin: 0 0 4px; color: #e8352a; font: 700 11px var(--font-type); letter-spacing: 0.2em; text-transform: uppercase; }
.npc-title, .mrt-title { margin: 0 0 6px; color: var(--text); font: 700 clamp(20px, 2.6vw, 26px)/1.15 var(--font-logo); }
.npc-lead, .mrt-lead { max-width: 72ch; margin: 0; color: var(--muted); font: 14px/1.55 var(--font-ui); }
.npc-lead code, .mrt-cair code, .npc-cmd code { padding: 1px 5px; border-radius: 3px; background: rgba(0, 0, 0, 0.35); color: var(--text); font: 13px var(--font-type); overflow-wrap: anywhere; }
.npc-novo { flex: 0 0 auto; }
.npc-vazio, .mrt-vazio { margin: 0; padding: 18px; border: 1.5px dashed var(--line); border-radius: 6px; color: var(--muted); text-align: center; overflow-wrap: anywhere; }
.npc-erro { display: grid; justify-items: center; gap: 10px; }
.npc-erro p { margin: 0; }
.npc-minis .card-mini-foot span:last-child { white-space: nowrap; }

.theme-hawkins #moradores :is(.npc-title, .mrt-title) { color: #111; }
.theme-hawkins #moradores :is(.npc-lead, .mrt-lead) { color: #2b2620; }
.theme-hawkins #moradores :is(.npc-lead, .mrt-cair, .npc-cmd) code { background: #111; color: #ffe45c; }
.theme-hawkins #moradores :is(.npc-vazio, .mrt-vazio) { border: 2.5px dashed #111; border-radius: 0; background: #fffdf8; color: #2b2620; }

/* as classes só do bestiário (bestiario-data.js): a cor da carta e o emblema de texto (sem desenho de monstro) */
.theme-hawkins [data-cls="monstro"] { --c: #8f1d1d; --c-ink: #5a0c0c; }
.theme-hawkins [data-cls="humano"] { --c: #8a7a66; --c-ink: #5a4d3c; }
.theme-upside [data-cls="monstro"] { --c: #b3202f; --c-ink: #ff6b78; }
.theme-upside [data-cls="humano"] { --c: #7d8794; --c-ink: #c4ccd6; }
.npc-emb { display: grid; place-items: center; font: 800 15px/1 "Barlow Condensed", var(--font-ui); color: var(--c-ink, currentColor); }
.npc-perks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.npc-perks li { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--k-paper-3, var(--line)); border-radius: 4px; background: var(--k-bal, rgba(0, 0, 0, 0.2)); }
.npc-perks b { font: 700 14px var(--font-ui); color: var(--k-ink, var(--text)); }
.npc-perks small { font: 13px/1.45 var(--font-ui); color: var(--k-soft, var(--muted)); }

/* o carimbo "Secreto" (só admins veem) na foto da carta do inimigo */
.card-stamp[data-status="npc"] { color: #6b1d63; }
.theme-upside .card-stamp[data-status="npc"] { color: #e08ad6; text-shadow: 0 0 6px rgba(224, 138, 214, 0.5); }

/* ---------- a janela do inimigo: o que é novo no registro ---------- */
.npc-status i { background: #1faa4a; }
.npc-status[data-on="false"] i { background: #6b1d63; }
.npc-cmd { margin-top: 12px; padding: 10px 12px; border: 1.5px dashed var(--k-ink, #111); background: var(--k-bal, rgba(0, 0, 0, 0.2)); }
.npc-cmd p { margin: 4px 0 0; font: 13.5px/1.5 var(--font-ui); color: var(--k-text, var(--text)); }
.npc-cmd .npc-cmd-t { margin: 0; font: 700 10px var(--font-type); letter-spacing: 0.16em; text-transform: uppercase; color: var(--k-red-ink, #e8352a); }
.card-view-record .npc-cmd code { background: var(--k-ink, #111); color: var(--k-bal, #fff); }
.npc-tabela-box { margin-top: 14px; overflow-x: auto; }
.npc-tabela td code { font: 12.5px var(--font-type); white-space: nowrap; }
.npc-tabela th[scope="row"] span { margin-left: 4px; }
.npc-apagar { margin-left: auto; }

/* ---------- o editor (admins) ---------- */
.npc-previa-t { margin: 0 0 8px; color: var(--muted); font: 700 11px var(--font-type); letter-spacing: 0.18em; text-transform: uppercase; text-align: center; }
.npc-form { display: grid; gap: 14px; }
.npc-sec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; min-width: 0; margin: 0; padding: 12px 14px 14px; border: 1.5px solid var(--k-ink, var(--line)); border-radius: 4px; background: var(--k-bal, rgba(0, 0, 0, 0.15)); }
.npc-sec > legend { padding: 0 6px; color: var(--k-red-ink, #e8352a); font: 700 11px var(--font-type); letter-spacing: 0.16em; text-transform: uppercase; }
.npc-sec > div, .npc-sec > p, .npc-sec > .npc-foto { grid-column: 1 / -1; min-width: 0; }
.npc-campo { display: grid; gap: 4px; min-width: 0; }
.npc-campo-largo { grid-column: 1 / -1; }
.npc-campo > span { color: var(--k-soft, var(--muted)); font: 700 11px var(--font-type); letter-spacing: 0.1em; text-transform: uppercase; }
.npc-campo > span small { letter-spacing: 0; text-transform: none; }
.npc-form :is(input[type="text"], input[type="number"], input[type="url"], select, textarea) { box-sizing: border-box; width: 100%; min-width: 0; min-height: 40px; padding: 7px 10px; border: 1.5px solid var(--k-ink, var(--line)); border-radius: 4px; background: #fff; color: #111; font: 15px var(--font-ui); }
.npc-form textarea { min-height: 72px; resize: vertical; font: 14px/1.5 var(--font-type); }
.npc-form :is(input, select, textarea, button):focus-visible { outline: 3px solid #e8352a; outline-offset: 2px; }
.npc-form select:disabled { opacity: 0.6; }
.npc-conta { justify-self: end; color: var(--k-soft, var(--muted)); font: 11px var(--font-type); }
.npc-dica { margin: 0; color: var(--k-soft, var(--muted)); font: 13px/1.5 var(--font-ui); overflow-wrap: anywhere; }
.npc-dica code { font: 12.5px var(--font-type); }
.npc-ats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
.npc-at { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 58px auto; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid var(--k-paper-3, var(--line)); border-radius: 4px; background: rgba(255, 255, 255, 0.35); }
.npc-form .npc-at-in { width: 58px; min-height: 34px; padding: 4px 2px; font: 700 17px var(--font-type); text-align: center; -moz-appearance: textfield; appearance: textfield; }
.npc-at-in::-webkit-inner-spin-button, .npc-at-in::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.npc-sem-hist { padding: 10px 12px; border: 1.5px dashed var(--k-ink, var(--line)); border-radius: 4px; }
.npc-at abbr { font: 800 13px var(--font-ui); text-decoration: none; }
.npc-at-nome { overflow: hidden; font: 13px var(--font-ui); text-overflow: ellipsis; white-space: nowrap; }
.npc-at-nome small { display: block; color: var(--k-soft, var(--muted)); font: 11px var(--font-type); white-space: normal; }
.npc-passo { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1.5px solid var(--k-ink, var(--line)); border-radius: 4px; background: #fff; color: #111; font: 800 18px/1 var(--font-ui); cursor: pointer; }
.npc-passo:disabled { opacity: 0.35; cursor: not-allowed; }
.npc-passo:not(:disabled):hover { background: #ffe45c; }
.npc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; padding: 0; list-style: none; }
.npc-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 9px; border: 1.5px solid var(--k-ink, var(--line)); border-radius: 999px; background: #fff; color: #111; font: 13px var(--font-ui); }
.npc-chip-x { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #111; font: 700 13px/1 var(--font-ui); cursor: pointer; }
.npc-chip-x:hover, .npc-chip-x:focus-visible { background: #ffe45c; }
.npc-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.npc-linha select { flex: 1 1 220px; width: auto; }
.npc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.npc-check { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.npc-check input { flex: 0 0 auto; width: 22px; height: 22px; margin: 2px 0 0; accent-color: #e8352a; }
.npc-check span { display: grid; gap: 2px; font: 14px var(--font-ui); }
.npc-check small { color: var(--k-soft, var(--muted)); font-size: 12.5px; }
/* os poderes do inimigo (2026-10-10, só admins): marcar no editor, a conta na ficha */
.npc-pod { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.npc-pod > .npc-dica { grid-column: 1 / -1; }
.npc-pod > .npc-check { grid-column: auto; }
.npc-pod-lista { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.npc-pod-lista li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; overflow-wrap: anywhere; }
.npc-pod-lista code { font: 700 13px var(--font-type); white-space: nowrap; }
.npc-pod-lista small { color: var(--k-soft, var(--muted)); font-size: 12px; }
.npc-msg { min-height: 1.4em; margin: 0; font: 700 13.5px var(--font-ui); color: var(--k-text, var(--text)); }
.npc-msg-erro { color: #c4140c; }
.theme-upside .npc-msg-erro { color: #ff6b74; }

/* ---------- Testes de resistência de morte ---------- */
.mrt-head { display: block; }
.mrt-cair { display: grid; gap: 6px; margin: 0 0 18px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 6px; background: rgba(0, 0, 0, 0.25); }
.mrt-cair label { font: 700 13px var(--font-ui); color: var(--text); }
.mrt-cair-l { display: flex; flex-wrap: wrap; gap: 8px; }
.mrt-cair select { flex: 1 1 240px; min-width: 0; min-height: 40px; padding: 6px 10px; border: 1.5px solid var(--line); border-radius: 4px; background: #fff; color: #111; font: 15px var(--font-ui); }
.mrt-cair small { color: var(--muted); font: 12.5px/1.5 var(--font-ui); }
.mrt-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 16px; }
.mrt-sub { margin: 22px 0 10px; color: var(--muted); font: 700 12px var(--font-type); letter-spacing: 0.16em; text-transform: uppercase; }
.mrt-card { --mrt-cor: #e8352a; display: grid; gap: 10px; min-width: 0; padding: 12px 14px 14px; border: 1.5px solid var(--line); border-left: 6px solid var(--mrt-cor); border-radius: 6px; background: rgba(0, 0, 0, 0.3); color: var(--text); }
.mrt-card[data-e="estavel"] { --mrt-cor: #1faa4a; }
.mrt-card[data-e="acordou"] { --mrt-cor: #2f7fd0; }
.mrt-card[data-e="morto"] { --mrt-cor: #55504a; }
.mrt-card-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.mrt-foto { display: grid; place-items: center; width: 44px; height: 44px; overflow: hidden; border: 2px solid var(--mrt-cor); border-radius: 50%; background: #222; color: #fff; font: 800 18px var(--font-ui); }
.mrt-foto img { width: 100%; height: 100%; object-fit: cover; }
.mrt-card[data-e="morto"] .mrt-foto img { filter: grayscale(1); }
.mrt-quem { display: grid; gap: 2px; min-width: 0; }
.mrt-quem b { overflow: hidden; font: 700 16px var(--font-ui); text-overflow: ellipsis; white-space: nowrap; }
.mrt-quem small { color: var(--muted); font: 12.5px/1.4 var(--font-ui); }
.mrt-estado { padding: 3px 9px; border: 2px solid var(--mrt-cor); border-radius: 3px; color: var(--text); font: 800 12px var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.mrt-placar { display: grid; gap: 6px; }
.mrt-fila { display: flex; align-items: center; gap: 8px; }
.mrt-fila-r { width: 76px; color: var(--muted); font: 700 11px var(--font-type); letter-spacing: 0.12em; text-transform: uppercase; }
.mrt-fila i { width: 20px; height: 20px; border: 2.5px solid currentColor; border-radius: 50%; color: var(--muted); }
.mrt-fila-s i.on { border-color: #1faa4a; background: #1faa4a; }
.mrt-fila-x i.on { border-color: #e8352a; background: #e8352a; }
.mrt-hist { display: grid; gap: 3px; margin: 0; padding: 8px 10px; border-radius: 4px; background: rgba(0, 0, 0, 0.25); list-style: none; font: 12.5px/1.45 var(--font-type); overflow-wrap: anywhere; }
.mrt-hist time { color: var(--muted); }
.mrt-hist small { color: var(--muted); }
.mrt-d { display: inline-block; min-width: 2.2ch; padding: 0 4px; border: 1.5px solid currentColor; border-radius: 3px; text-align: center; }
.mrt-desde { margin: 0; color: var(--muted); font: 12px var(--font-ui); }
.mrt-acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.mrt-rolar { flex: 1 1 100%; }
.mrt-regras { margin-top: 20px; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 6px; }
.mrt-regras summary { min-height: 32px; font: 700 14px var(--font-ui); cursor: pointer; display: flex; align-items: center; }
.mrt-regras summary:focus-visible { outline: 3px solid #e8352a; outline-offset: 2px; }
.mrt-regras ul { margin: 8px 0 0; padding-left: 20px; font: 14px/1.55 var(--font-ui); }
.mrt-regras li + li { margin-top: 4px; }

/* Hawkins: o álbum de quadrinhos */
.theme-hawkins #moradores .mrt-cair { border: 2.5px solid #111; border-radius: 0; background: #ffe45c; box-shadow: 4px 4px 0 #111; }
.theme-hawkins #moradores .mrt-cair label { color: #111; font: 800 15px "Barlow Condensed", var(--font-ui); letter-spacing: 0.06em; }
.theme-hawkins #moradores .mrt-cair select { border: 2.5px solid #111; border-radius: 0; }
.theme-hawkins #moradores .mrt-cair small { color: #2b2620; }
.theme-hawkins #moradores .mrt-card { border: 3px solid #111; border-left: 9px solid var(--mrt-cor); border-radius: 0; background: #fffdf8; color: #111; box-shadow: 5px 5px 0 #111; }
.theme-hawkins #moradores .mrt-card[data-e="morto"] { background: #e9e4d8; }
.theme-hawkins #moradores .mrt-quem small, .theme-hawkins #moradores .mrt-desde, .theme-hawkins #moradores .mrt-hist time, .theme-hawkins #moradores .mrt-hist small, .theme-hawkins #moradores .mrt-fila-r { color: #4d463d; }
.theme-hawkins #moradores .mrt-estado { border: 2.5px solid #111; background: var(--mrt-cor); color: #fff; box-shadow: 2px 2px 0 #111; transform: rotate(3deg); }
.theme-hawkins #moradores .mrt-foto { border: 2.5px solid #111; }
.theme-hawkins #moradores .mrt-fila i { color: #111; }
.theme-hawkins #moradores .mrt-hist { border: 2px solid #111; background: #fff; }
.theme-hawkins #moradores .mrt-sub { color: #111; }
.theme-hawkins #moradores .mrt-regras { border: 2.5px solid #111; border-radius: 0; background: #fff; box-shadow: 4px 4px 0 #111; }

@media (prefers-reduced-motion: reduce) {
  .theme-hawkins #moradores .mtb-tab, .theme-hawkins #moradores .mtb-tab[aria-selected="true"] { transition: none; transform: none; }
}