/* =====================================================================
   Componentes — "terminal de contenção". Só usam tokens de tokens.css.
   Linguagem: peças de jogo com contorno preto de 2 px, relevo (luz em cima,
   sombra embaixo), cantoneiras nas janelas, fonte pixel para a voz do jogo.
   Classes que os testes e2e leem (.unit, .name, .badge.div, .tile .t/.n/.d, .bar, .log li) mantidas.
   ===================================================================== */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--ink-0); color: var(--text); font: var(--fw-reg) var(--fs-md) / var(--lh) var(--font-sans); -webkit-font-smoothing: antialiased; }
a { color: var(--info); text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.px { font: var(--px-1) / 1.2 var(--font-pixel); letter-spacing: var(--track); -webkit-font-smoothing: none; }
.px2 { font: var(--px-2) / 1 var(--font-pixel); -webkit-font-smoothing: none; }
.px3 { font: var(--px-3) / 1 var(--font-pixel); -webkit-font-smoothing: none; }
.muted { color: var(--text-2); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon, .ticon { flex: none; display: block; }
[hidden] { display: none !important; }

/* ---------- teclas (botões com relevo; afundam ao clicar) ---------- */
button, .key {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 34px; padding: 0 var(--s-3) 2px;
  font: var(--px-1) / 1 var(--font-pixel); letter-spacing: var(--track); text-transform: uppercase; -webkit-font-smoothing: none;
  color: var(--text); background: var(--ink-3); border: var(--bw) solid var(--edge); border-radius: 0;
  box-shadow: inset 0 2px 0 var(--bevel-hi), inset 0 -3px 0 var(--bevel-lo);
  cursor: pointer; transition: background var(--dur-1);
}
button:hover:not(:disabled) { background: var(--ink-4); }
button:active:not(:disabled), button[aria-pressed="true"] { box-shadow: inset 0 2px 0 var(--bevel-lo); padding-bottom: 0; padding-top: 2px; }
button[aria-pressed="true"]:not(:disabled) { color: var(--ink-0); background: var(--bone); }
button:disabled, button.primary:disabled, button.danger:disabled { color: var(--text-3); background: var(--ink-2); border-style: dashed; box-shadow: none; cursor: not-allowed; filter: saturate(0.4); } /* parece desabilitado (3-U10) */
button.primary { color: var(--ink-0); background: var(--bone); box-shadow: inset 0 2px 0 var(--bone-hi), inset 0 -3px 0 var(--bone-lo); }
button.primary:hover:not(:disabled) { background: #f4f0e4; }
button.primary:active:not(:disabled) { box-shadow: inset 0 2px 0 var(--bone-lo); }
button.primary:disabled { color: var(--text-3); background: var(--ink-2); box-shadow: none; }
button.danger { color: var(--stamp); }
button.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-2); }
button.ghost:hover:not(:disabled) { color: var(--text); background: var(--ink-2); }
button.small { min-height: 28px; padding: 0 var(--s-2) 2px; }
button.square { width: 34px; padding: 0 0 2px; }
@media (pointer: coarse) { button, .key { min-height: var(--touch); } button.small { min-height: var(--touch); } button.square { width: var(--touch); } } /* 44 px no toque (3-U14) */

/* ---------- interruptor com LED ---------- */
.switch { position: relative; display: inline-flex; align-items: center; gap: var(--s-3); cursor: pointer; min-height: 34px; user-select: none; }
.switch input { position: absolute; left: 14px; top: 50%; width: 16px; height: 16px; margin: -8px 0 0; opacity: 0; pointer-events: none; }
.switch:has(input:disabled) { cursor: default; opacity: 0.55; }
.switch .sw { position: relative; width: 44px; height: 24px; flex: none; background: var(--ink-0); border: var(--bw) solid var(--edge); box-shadow: inset 0 2px 0 var(--bevel-lo); }
.switch .sw::before { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 16px; background: var(--ink-4);
  box-shadow: inset 0 2px 0 var(--bevel-hi), inset 0 -2px 0 var(--bevel-lo); transition: transform var(--dur-2) var(--ease); }
.switch .sw::after { content: ""; position: absolute; top: 7px; right: 6px; width: 6px; height: 6px; background: var(--led-off); }
.switch input:checked + .sw::before { transform: translateX(18px); background: var(--bone); box-shadow: inset 0 2px 0 var(--bone-hi), inset 0 -2px 0 var(--bone-lo); }
.switch input:checked + .sw { background: color-mix(in srgb, var(--ok) 22%, var(--ink-0)); }
.switch input:checked + .sw::after { left: 6px; right: auto; background: var(--led-on); box-shadow: 0 0 6px var(--led-on); }
.switch input:focus-visible + .sw { outline: 2px solid var(--focus); outline-offset: 2px; }
.switch .lbl { font-size: var(--fs-sm); }
@media (pointer: coarse) { .switch { min-height: var(--touch); } }

/* ---------- etiquetas pequenas ---------- */
.tag { display: inline-flex; align-items: center; height: 18px; padding: 0 5px 1px; font: var(--px-1) / 1 var(--font-pixel); -webkit-font-smoothing: none;
  color: var(--ink-0); background: var(--text-2); border: 1px solid var(--edge); }
.tag.vip { background: var(--vip); }
.tag.auto { background: var(--ok); }
.tag.hollow { background: transparent; color: var(--text-2); border-color: var(--rule-2); }

/* ---------- controle deslizante + passo ---------- */
input[type=range].slider { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; padding: 0; border: 0; background: transparent; cursor: pointer; }
input[type=range].slider::-webkit-slider-runnable-track { height: 12px; background: linear-gradient(90deg, var(--bone) var(--fill, 0%), var(--ink-0) var(--fill, 0%)); border: var(--bw) solid var(--edge); }
input[type=range].slider::-moz-range-track { height: 8px; background: var(--ink-0); border: var(--bw) solid var(--edge); }
input[type=range].slider::-moz-range-progress { height: 8px; background: var(--bone); }
input[type=range].slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 26px; margin-top: -9px; background: var(--ink-4); border: var(--bw) solid var(--edge);
  box-shadow: inset 0 2px 0 var(--bevel-hi), inset 0 -3px 0 var(--bevel-lo); }
input[type=range].slider::-moz-range-thumb { width: 14px; height: 22px; border-radius: 0; background: var(--ink-4); border: var(--bw) solid var(--edge); }
@media (pointer: coarse) { input[type=range].slider { height: var(--touch); } }
.stepper { display: grid; grid-template-columns: auto 1fr auto; gap: 4px; }
.stepper output { display: grid; place-items: center; min-width: 0; font: var(--px-2) / 1 var(--font-pixel); color: var(--text); -webkit-font-smoothing: none;
  background: var(--ink-0); border: var(--bw) solid var(--edge); box-shadow: inset 0 2px 0 var(--bevel-lo); }
input, select, textarea { font: var(--fs-sm) var(--font-sans); color: var(--text); background: var(--ink-0); border: var(--bw) solid var(--rule-ctl); border-radius: 0; padding: 6px var(--s-2); min-height: 34px; }

/* ---------- janela de jogo: contorno, cantoneiras, barra de título ---------- */
.win { --cn: var(--rule-ctl); position: relative; background: var(--ink-1); border: var(--bw) solid var(--edge); box-shadow: inset 0 0 0 1px var(--rule-2), var(--drop); }
.win::before { content: ""; position: absolute; inset: 3px; pointer-events: none; z-index: 1;
  background:
    linear-gradient(var(--cn), var(--cn)) top left / 10px 2px no-repeat, linear-gradient(var(--cn), var(--cn)) top left / 2px 10px no-repeat,
    linear-gradient(var(--cn), var(--cn)) top right / 10px 2px no-repeat, linear-gradient(var(--cn), var(--cn)) top right / 2px 10px no-repeat,
    linear-gradient(var(--cn), var(--cn)) bottom left / 10px 2px no-repeat, linear-gradient(var(--cn), var(--cn)) bottom left / 2px 10px no-repeat,
    linear-gradient(var(--cn), var(--cn)) bottom right / 10px 2px no-repeat, linear-gradient(var(--cn), var(--cn)) bottom right / 2px 10px no-repeat; }
.win > header { display: flex; align-items: center; gap: var(--s-2); min-height: 42px; padding: 0 var(--s-2) 0 var(--s-3);
  background: var(--ink-2); border-bottom: var(--bw) solid var(--edge); box-shadow: inset 0 2px 0 var(--bevel-hi); }
.win > header h2, .win > header h3 { margin: 0; font: var(--px-1) / 1 var(--font-pixel); letter-spacing: 0.12em; text-transform: uppercase; -webkit-font-smoothing: none; }
.win > header .end { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }
.win > header .code { font: var(--px-1) var(--font-pixel); color: var(--text-3); -webkit-font-smoothing: none; }
.win > .body { padding: var(--s-3); }
.win.gold { --cn: var(--div); box-shadow: inset 0 0 0 1px var(--div-deep), 0 0 24px var(--div-glow), var(--drop); }

/* ---------- tipo (ícone + sigla) ---------- */
.type { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 5px 1px 3px; font: var(--px-1) / 1 var(--font-pixel); -webkit-font-smoothing: none;
  color: var(--tc); background: color-mix(in srgb, var(--tc) 12%, var(--ink-0)); border: 1px solid color-mix(in srgb, var(--tc) 55%, var(--edge)); }
.type b { font-weight: 400; }
.type span { font: var(--fs-xs) var(--font-sans); color: var(--text); margin-left: 2px; }
.t-bio { --tc: var(--t-bio); } .t-mec { --tc: var(--t-mec); } .t-ele { --tc: var(--t-ele); }
.t-cog { --tc: var(--t-cog); } .t-mem { --tc: var(--t-mem); } .t-ant { --tc: var(--t-ant); }
.t-esp { --tc: var(--t-esp); } .t-tem { --tc: var(--t-tem); } .t-ext { --tc: var(--t-ext); } .t-dis { --tc: var(--t-dis); }

/* ---------- classe oficial (cor + forma) ---------- */
.cls { display: inline-flex; align-items: center; gap: 6px; font: var(--px-1) / 1 var(--font-pixel); letter-spacing: 0.1em; text-transform: uppercase; -webkit-font-smoothing: none; color: var(--cc, var(--cls-other)); }
.cls::before { content: ""; width: 8px; height: 8px; background: currentColor; }
.cls.safe { --cc: var(--cls-safe); }
.cls.euclid { --cc: var(--cls-euclid); } .cls.euclid::before { transform: rotate(45deg) scale(0.85); }
.cls.keter { --cc: var(--cls-keter); } .cls.keter::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); }

/* ---------- Grau ---------- */
.grade { display: inline-flex; align-items: center; gap: 6px; color: var(--gc); font-size: var(--fs-sm); }
.grade i { display: inline-flex; }
.grade i::before { content: ""; width: calc(var(--n) * 6px - 2px); height: 8px; background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 6px); }
.grade i::after { content: ""; width: calc((5 - var(--n)) * 6px); height: 8px; margin-left: 2px; background: repeating-linear-gradient(90deg, var(--rule-2) 0 4px, transparent 4px 6px); }
.grade.g1 { --gc: var(--g-mundano); --n: 1; } .grade.g2 { --gc: var(--g-atipico); --n: 2; } .grade.g3 { --gc: var(--g-anomalo); --n: 3; }
.grade.g4 { --gc: var(--g-aberrante); --n: 4; } .grade.g5 { --gc: var(--g-paradoxal); --n: 5; font-weight: var(--fw-bold); }

/* ---------- Traço ---------- */
.trait { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; font-size: var(--fs-sm); background: var(--ink-0); border: 1px solid var(--rc); border-left-width: 4px; }
.trait small { font: var(--px-1) var(--font-pixel); color: var(--rc); -webkit-font-smoothing: none; }
.trait.r1 { --rc: var(--r-comum); } .trait.r2 { --rc: var(--r-incomum); }
.trait.r3 { --rc: var(--r-raro); border-style: double; border-width: 3px 3px 3px 6px; padding: 1px 6px; }
.trait.r4 { --rc: var(--r-lendario); border-style: double; border-width: 3px 3px 3px 6px; padding: 1px 6px; background: color-mix(in srgb, var(--r-lendario) 10%, var(--ink-0)); }
.trait.off { opacity: 0.6; }

/* ---------- Índice de Ameaça ---------- */
.threat { display: inline-flex; align-items: center; gap: var(--s-2); }
.threat .seg { display: grid; grid-template-columns: repeat(10, 5px); gap: 2px; }
.threat .seg i { height: 10px; background: var(--ink-3); }
.threat .seg i.on { background: var(--th); }
.threat .v { font: var(--px-1) var(--font-pixel); color: var(--th-text, var(--th)); -webkit-font-smoothing: none; }
/* faixas 0 e 1: a cor da faixa é escura demais para texto (2,3:1); o número usa o cinza de texto (AA) e a barra mantém a cor */
.th0, .th1 { --th-text: var(--text-3); }
.th0 { --th: var(--threat-0); } .th1 { --th: var(--threat-1); } .th2 { --th: var(--threat-2); } .th3 { --th: var(--threat-3); }
.th4 { --th: var(--threat-4); } .th5 { --th: var(--threat-5); } .th6 { --th: var(--threat-6); }

/* ---------- barras ---------- */
.bar { position: relative; height: 10px; background: var(--ink-0); border: var(--bw) solid var(--edge); overflow: hidden; }
.bar > i { display: block; height: 100%; width: 0; background: var(--hp); box-shadow: inset 0 2px 0 rgb(255 255 255 / 0.28); transition: width var(--dur-2) linear; }
.bar.low > i { background: var(--hp-low); }
.bar.xp { height: 8px; } .bar.xp > i { background: var(--xp); }
.bar.cd { height: 6px; border-width: 1px; } .bar.cd > i { background: var(--cd); box-shadow: none; transition: none; }
.bar.cd.ready > i { background: var(--text); }
.bar.hp::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgb(0 0 0 / 0.45) calc(10% - 1px) 10%); }
.meter { display: grid; grid-template-columns: 4ch 1fr auto; align-items: center; gap: var(--s-2); font: var(--px-1) var(--font-pixel); color: var(--text-2); -webkit-font-smoothing: none; }
.meter .v { color: var(--text); }

/* ---------- sprite em moldura (retrato) ---------- */
.spr { image-rendering: pixelated; image-rendering: crisp-edges; width: calc(8px * var(--px)); height: calc(8px * var(--px)); display: block; }
/* arte do manifesto (sprites.js): tira de fundo em múltiplo inteiro da célula; .play anima com steps() */
.spr.art > i { display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-position: 0 0; }
.spr.art.play > i { animation: spr-play var(--dur) steps(var(--n)) infinite; }
@keyframes spr-play { to { background-position: calc(var(--n) * var(--w) * -1) 0; } }
/* Divergente: contorno de 1 pixel da sprite na cor da espécie (--glow) */
.spr.dv { filter: drop-shadow(calc(var(--k) * 1px) 0 0 var(--glow)) drop-shadow(calc(var(--k) * -1px) 0 0 var(--glow)) drop-shadow(0 calc(var(--k) * 1px) 0 var(--glow)) drop-shadow(0 calc(var(--k) * -1px) 0 var(--glow)); }
/* Aura lendária (contrato das sprites §6.4): brilho estático atrás da sprite, em degraus (pixel art), na cor --aura.
   Na Divergente lendária o contorno vai para a sprite (o <i>), por cima da aura, e não para o brilho. */
.spr.art.aura { position: relative; }
.spr.art.aura::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--aura) 40%, transparent) 0 20%, color-mix(in srgb, var(--aura) 30%, transparent) 20% 35%, color-mix(in srgb, var(--aura) 20%, transparent) 35% 50%, transparent 50%); }
.spr.art.aura > i { position: relative; }
.spr.art.aura.dv { filter: none; }
.spr.art.aura.dv > i { filter: drop-shadow(calc(var(--k) * 1px) 0 0 var(--glow)) drop-shadow(calc(var(--k) * -1px) 0 0 var(--glow)) drop-shadow(0 calc(var(--k) * 1px) 0 var(--glow)) drop-shadow(0 calc(var(--k) * -1px) 0 var(--glow)); }
.spr.x2 { --px: 2; } .spr.x3 { --px: 3; } .spr.x4 { --px: 4; } .spr.x6 { --px: 6; } .spr.x8 { --px: 8; } .spr.x10 { --px: 10; } .spr.x12 { --px: 12; }
.portrait { --pc: var(--rule-2); position: relative; display: grid; place-items: center; padding: 6px; flex: none;
  background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--pc) 22%, var(--ink-scene)) 0 45%, var(--ink-scene) 75%);
  border: var(--bw) solid var(--edge); box-shadow: inset 0 0 0 2px var(--pc); }
.portrait .lv { position: absolute; left: -2px; bottom: -2px; padding: 1px 4px 2px; font: var(--px-1) / 1 var(--font-pixel); -webkit-font-smoothing: none;
  color: var(--ink-0); background: var(--bone); border: var(--bw) solid var(--edge); }
.portrait.div { --pc: var(--div); box-shadow: inset 0 0 0 2px var(--div), 0 0 12px var(--div-glow); }

/* ---------- selos ---------- */
.badge { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 5px 1px; margin-left: 6px; vertical-align: 1px;
  font: var(--px-1) / 1 var(--font-pixel); text-transform: uppercase; -webkit-font-smoothing: none; color: var(--text-2); border: 1px solid var(--rule-2); }
.badge.div { color: var(--ink-0); background: var(--div); border-color: var(--edge); }
.badge.div::before { content: "◆"; font-size: 9px; }
.badge.evo { color: var(--ink-0); background: var(--ok); border-color: var(--edge); cursor: pointer; }
.badge.star { color: var(--bone); }
.sheen { position: relative; overflow: hidden; isolation: isolate; }
.sheen::after { content: ""; position: absolute; inset: -50% auto -50% 0; width: 40%; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.4), transparent); transform: translateX(-150%) skewX(-12deg);
  animation: sheen var(--sheen-period) ease-in-out infinite; }
@keyframes sheen { 0%, 70% { transform: translateX(-150%) skewX(-12deg); } 100% { transform: translateX(400%) skewX(-12deg); } }
@media (prefers-reduced-motion: reduce) { .sheen::after { display: none; } }

/* ---------- carimbo e tarja ---------- */
.stamp { display: inline-block; padding: 4px 10px 3px; font: var(--px-2) / 1 var(--font-pixel); text-transform: uppercase; -webkit-font-smoothing: none;
  color: var(--stamp); border: 3px solid currentColor; transform: rotate(-5deg); opacity: 0.9;
  -webkit-mask-image: repeating-linear-gradient(97deg, #000 0 3px, rgb(0 0 0 / 0.7) 3px 4px, #000 4px 9px);
  mask-image: repeating-linear-gradient(97deg, #000 0 3px, rgb(0 0 0 / 0.7) 3px 4px, #000 4px 9px); }
.stamp.ok { color: var(--ok); } .stamp.div { color: var(--div); } .stamp.muted { color: var(--text-2); }
.stamp.in { animation: stamp-in var(--dur-3) var(--ease-pop) both; }
@keyframes stamp-in { from { transform: rotate(-5deg) scale(1.8); opacity: 0; } }
.redact { display: inline-block; height: 0.95em; vertical-align: -0.1em; width: var(--w, 6ch); background: var(--redact); }

/* ---------- card de anomalia (listas) ---------- */
.unit { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-3); align-items: center;
  padding: var(--s-2); background: var(--ink-2); border: var(--bw) solid var(--edge); box-shadow: inset 0 2px 0 var(--bevel-hi); }
.unit + .unit { margin-top: 6px; }
.unit.active { background: color-mix(in srgb, var(--bone) 7%, var(--ink-2)); box-shadow: inset 0 2px 0 var(--bevel-hi), inset 4px 0 0 var(--bone); }
.unit.fainted .portrait .spr { filter: grayscale(1) brightness(0.6); }
.unit.fainted .name { color: var(--text-2); }
.unit .name { font-weight: var(--fw-bold); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unit .name:hover { text-decoration: underline; }
.unit .sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s-3); margin: 4px 0 6px; font-size: var(--fs-xs); color: var(--text-2); }
.unit .acts { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.unit .ko { font: var(--px-1) var(--font-pixel); color: var(--stamp); }
@media (max-width: 600px) { .unit { grid-template-columns: auto minmax(0, 1fr); } .unit .acts { grid-column: 1 / -1; justify-content: flex-start; } }

/* ---------- HUD da ativa (sobre a cena) ---------- */
.hud { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3); align-items: center; padding: var(--s-2) var(--s-3) var(--s-2) var(--s-2);
  background: rgb(12 16 18 / 0.9); border: var(--bw) solid var(--edge); box-shadow: inset 0 0 0 1px var(--rule-2), var(--drop); max-width: 420px; }
.hud .hud-top { display: flex; align-items: baseline; gap: var(--s-2); min-width: 0; }
.hud > div { min-width: 0; }
.meter > * { min-width: 0; }
.hud .name { min-width: 0; font-weight: var(--fw-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud .bars { display: grid; gap: 3px; margin-top: 4px; }
.hud .moves { display: flex; gap: 6px; margin-top: 6px; }
.hud .mv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; flex: 1; min-width: 0; }
.hud .mv .px { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- ficha ---------- */
.sheet { position: relative; padding: var(--s-4); background: var(--paper); background-image: repeating-linear-gradient(180deg, transparent 0 27px, var(--paper-rule) 27px 28px); }
.sheet .letterhead { display: flex; justify-content: space-between; padding-bottom: var(--s-2); border-bottom: 2px solid var(--text); font: var(--px-1) var(--font-pixel); letter-spacing: 0.12em; color: var(--text-2); text-transform: uppercase; -webkit-font-smoothing: none; }
.sheet .item { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: center; margin: var(--s-4) 0; }
.sheet .scp { font: var(--px-2) / 1 var(--font-pixel); -webkit-font-smoothing: none; }
.sheet h2 { margin: 4px 0 0; font: var(--fw-bold) 20px / 1.2 var(--font-sans); }
.sheet .orig { font-size: var(--fs-xs); color: var(--text-2); }
.sheet .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-2); align-items: center; }
.sheet .stamp { position: absolute; right: var(--s-4); top: 56px; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 2px; background: var(--ink-1); border: var(--bw) solid var(--edge); margin: 0; }
.fields > div { padding: var(--s-2); background: var(--ink-1); box-shadow: 0 0 0 1px var(--edge); } /* célula vazia no fim da linha não vira um buraco preto */
.fields dt, .label { font: var(--px-1) / 1.2 var(--font-pixel); color: var(--text-3); text-transform: uppercase; margin-bottom: 5px; -webkit-font-smoothing: none; }
.fields dd { margin: 0; font-size: var(--fs-sm); }
.sigtable { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); background: var(--ink-1); border: var(--bw) solid var(--edge); }
.sigtable th { text-align: left; font: var(--px-1) var(--font-pixel); color: var(--text-3); padding: 6px var(--s-2); background: var(--ink-2); -webkit-font-smoothing: none; }
.sigtable td { padding: 5px var(--s-2); border-top: 1px solid var(--rule); }
.sigtable .n { text-align: right; font: var(--px-1) var(--font-pixel); -webkit-font-smoothing: none; }
.sigdots { display: inline-grid; grid-template-columns: repeat(15, 4px); gap: 1px; vertical-align: middle; margin-right: 6px; }
.sigdots i { height: 8px; background: var(--ink-3); } .sigdots i.on { background: var(--bone); }
.sheet .section { margin-top: var(--s-4); }
.sheet .credit { margin-top: var(--s-4); padding-top: var(--s-2); border-top: 1px dashed var(--rule-2); font-size: var(--fs-xs); color: var(--text-2); }

/* ---------- registro da hunt ---------- */
.log { list-style: none; margin: 0; padding: var(--s-2) 0; max-height: 240px; overflow: auto; background: var(--ink-0); border: var(--bw) solid var(--edge);
  box-shadow: inset 0 2px 0 var(--bevel-lo); font: var(--px-1) / 1.6 var(--font-pixel); color: var(--text-2); -webkit-font-smoothing: none; }
.log li { display: grid; grid-template-columns: 9ch 2ch 1fr; padding: 0 var(--s-3); }
.log li > time { grid-column: 1; grid-row: 1; color: var(--text-3); }
.log li::before { content: "·"; grid-column: 2; grid-row: 1; color: var(--text-3); }
.log li > span { grid-column: 3; grid-row: 1; }
.log li.capture { color: var(--ok); } .log li.capture::before { content: "■"; color: var(--ok); }
.log li.drop { color: var(--text); } .log li.drop::before { content: "+"; color: var(--info); }
.log li.bad { color: var(--stamp); } .log li.bad::before { content: "×"; color: var(--stamp); }
.log li.div { color: var(--div); background: color-mix(in srgb, var(--div) 9%, transparent); } .log li.div::before { content: "◆"; color: var(--div); }

/* ---------- anúncio de Divergente (aviso do servidor) ---------- */
.announce { display: grid; justify-items: center; gap: var(--s-2); width: min(340px, 100%); padding: var(--s-4) var(--s-4) var(--s-3); text-align: center;
  background: radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--div) 16%, var(--ink-1)) 0 30%, var(--ink-1) 62%);
  border: var(--bw) solid var(--edge); box-shadow: inset 0 0 0 2px var(--div), inset 0 0 0 5px var(--edge), inset 0 0 0 6px var(--div-deep), 0 0 32px var(--div-glow), var(--drop); }
.announce .head { font: var(--px-1) var(--font-pixel); color: var(--div); letter-spacing: 0.16em; -webkit-font-smoothing: none; }
.announce .portrait { padding: 10px; }
.announce .what { font-size: var(--fs-sm); line-height: 1.35; }
.announce .what b { display: block; margin-top: 2px; font-size: var(--fs-lg); color: var(--div); }
.announce.in { animation: announce-in var(--dur-3) var(--ease-pop) both; }
@keyframes announce-in { from { opacity: 0; transform: translateY(-12px) scale(0.96); } }

/* ---------- cinto de equipamento (mochila rápida) ---------- */
.belt { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: stretch; }
.tile { display: grid; align-content: start; gap: 4px; padding: 6px 6px 5px; background: var(--ink-1); border: var(--bw) solid var(--edge); box-shadow: inset 0 0 0 1px var(--rule-2); min-width: 0; }
.tile .t { display: flex; align-items: center; gap: 6px; font: var(--px-1) var(--font-pixel); color: var(--text-2); text-transform: uppercase; -webkit-font-smoothing: none; }
.tile .t .n { margin-left: auto; color: var(--text); }
.tile .slots { display: flex; gap: 4px; }
.tile .d { font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tile.empty { box-shadow: inset 0 0 0 1px var(--stamp); } .tile.empty .t, .tile.empty .t .n { color: var(--stamp); }
.slot { position: relative; display: grid; place-items: center; width: var(--slot); height: var(--slot); padding: 0; min-height: 0;
  background: var(--ink-0); border: var(--bw) solid var(--edge); box-shadow: inset 0 2px 0 var(--bevel-lo), inset 0 0 0 1px var(--rule); }
.slot:hover:not(:disabled) { background: var(--ink-2); }
.slot:active:not(:disabled) { padding: 0; }
.slot .q { position: absolute; right: 2px; bottom: 1px; font: var(--px-1) / 1 var(--font-pixel); color: var(--text); text-shadow: 1px 0 var(--edge), -1px 0 var(--edge), 0 1px var(--edge), 0 -1px var(--edge); }
.slot.sel { box-shadow: inset 0 0 0 2px var(--bone); }
.slot.zero { background: repeating-linear-gradient(135deg, var(--ink-0) 0 5px, color-mix(in srgb, var(--stamp) 22%, var(--ink-0)) 5px 7px); }
.slot.zero .icon { opacity: 0.35; filter: grayscale(1); }
.slot.zero .q { color: var(--stamp); }
.slot .led { position: absolute; left: 3px; top: 3px; width: 5px; height: 5px; background: var(--led-on); box-shadow: 0 0 4px var(--led-on); }
.wallet { display: inline-flex; align-items: center; gap: 6px; padding: 0 var(--s-3); background: var(--ink-0); border: var(--bw) solid var(--edge); box-shadow: inset 0 2px 0 var(--bevel-lo); min-height: 38px; }
.wallet .v { font: var(--px-2) / 1 var(--font-pixel); -webkit-font-smoothing: none; }

/* ---------- Máquina de Café (loja NPC, SCP-294) ---------- */
.vend { display: grid; grid-template-columns: minmax(0, 1fr) 272px; gap: var(--s-3); }
.vend .cats { display: flex; gap: 4px; margin-bottom: var(--s-2); flex-wrap: wrap; }
.vend .glass { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--s-2); padding: var(--s-2);
  background: linear-gradient(115deg, rgb(255 255 255 / 0.05) 0 18%, transparent 18% 34%, rgb(255 255 255 / 0.03) 34% 40%, transparent 40%), var(--ink-0);
  border: var(--bw) solid var(--edge); box-shadow: inset 0 0 0 2px var(--rule-2), inset 0 6px 12px rgb(0 0 0 / 0.5); }
.vslot { display: grid; justify-items: center; gap: 4px; padding: var(--s-2) 4px 8px; min-height: 0; text-transform: none; letter-spacing: 0; background: var(--ink-1); }
.vslot .code { justify-self: start; color: var(--text-3); }
.vslot .nm { font: var(--fw-med) 12px / 1.2 var(--font-sans); text-align: center; color: var(--text); }
.vslot .pr { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); }
.vslot .own { color: var(--text-3); }
.vslot.sel { background: var(--ink-3); box-shadow: inset 0 0 0 2px var(--bone), inset 0 -3px 0 var(--bevel-lo); }
.vend .ctl { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-2); background: var(--ink-2); border: var(--bw) solid var(--edge); box-shadow: inset 0 2px 0 var(--bevel-hi); }
.lcd { padding: var(--s-2) var(--s-3); color: var(--lcd); background: var(--lcd-bg); border: var(--bw) solid var(--edge); font: var(--px-1) / 1.5 var(--font-pixel); -webkit-font-smoothing: none;
  box-shadow: inset 0 0 0 1px #1d3a2a, inset 0 0 18px rgb(0 0 0 / 0.6); background-image: repeating-linear-gradient(180deg, rgb(0 0 0 / 0.22) 0 1px, transparent 1px 3px); }
.lcd .big { font-size: var(--px-2); line-height: 1.1; }
.lcd .dim { color: var(--lcd-dim); }
.lcd .row2 { display: flex; justify-content: space-between; gap: var(--s-2); }
.vend .presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.vend .tray { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2); align-items: center; padding: var(--s-2); background: var(--ink-0); border: var(--bw) solid var(--edge); box-shadow: inset 0 2px 0 var(--bevel-lo); font-size: var(--fs-xs); color: var(--text-2); }
@media (max-width: 720px) { .vend { grid-template-columns: 1fr; } .vend .glass { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); } }

/* ---------- navegação ---------- */
.sidenav { display: grid; align-content: start; gap: 4px; width: var(--nav-w); }
.sidenav button { justify-content: flex-start; min-height: 40px; padding-left: var(--s-2); }
.sidenav button .k { margin-left: auto; color: var(--text-3); }
.sidenav button.on { color: var(--ink-0); background: var(--bone); box-shadow: inset 0 2px 0 var(--bone-hi), inset 0 -3px 0 var(--bone-lo); }
.sidenav button.on .k { color: var(--ink-3); }
.drawer { background: var(--ink-1); border-top: var(--bw) solid var(--edge); box-shadow: inset 0 2px 0 var(--bevel-hi), 0 -8px 0 rgb(0 0 0 / 0.35); }
.drawer .grip { display: grid; width: 100%; min-height: 28px; background: transparent; border: 0; box-shadow: none; }
.drawer .grip::before { content: ""; width: 44px; height: 4px; background: var(--rule-ctl); }
.drawer .tabs { display: flex; gap: 4px; overflow-x: auto; padding: 0 var(--s-2) var(--s-2); }
.drawer .tabs button { flex: none; }
.drawer .tabs button.on { color: var(--ink-0); background: var(--bone); box-shadow: inset 0 2px 0 var(--bone-hi), inset 0 -3px 0 var(--bone-lo); }

/* ---------- área no mapa ---------- */
.area { display: grid; gap: 6px; padding: var(--s-2) var(--s-3) var(--s-3); background: var(--ink-2); border: var(--bw) solid var(--edge); box-shadow: inset 0 2px 0 var(--bevel-hi); }
.area .nm { font-weight: var(--fw-bold); }
.area .lv { font: var(--px-1) var(--font-pixel); color: var(--text-2); -webkit-font-smoothing: none; }
.area .roster { display: flex; gap: 4px; }
.area .roster .spr { background: var(--ink-scene); border: 1px solid var(--edge); }
.area.here { box-shadow: inset 0 2px 0 var(--bevel-hi), inset 4px 0 0 var(--bone); }
.area.locked { background: repeating-linear-gradient(135deg, var(--ink-1) 0 8px, var(--ink-0) 8px 16px); box-shadow: none; }
.area.locked .nm { color: var(--text-2); }
.area.locked .roster .spr { opacity: 0.5; filter: grayscale(1); }

/* ---------- Requisição O5 (loja de Fichas O5) ----------
   Cada produto é um formulário de requisição; a duração escolhe-se em teclas. */
.reqs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--s-3); }
.req { position: relative; display: grid; gap: var(--s-2); align-content: start; padding: var(--s-3);
  background: var(--paper); background-image: repeating-linear-gradient(180deg, transparent 0 23px, var(--paper-rule) 23px 24px);
  border: var(--bw) solid var(--edge); box-shadow: inset 0 0 0 1px var(--rule-2), 3px 3px 0 rgb(0 0 0 / 0.45); }
.req .no { display: flex; justify-content: space-between; font: var(--px-1) var(--font-pixel); color: var(--text-3); border-bottom: 1px solid var(--rule-2); padding-bottom: 4px; -webkit-font-smoothing: none; }
.req .hd { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: center; }
.req .nm { font-weight: var(--fw-bold); }
.req .ef { font-size: var(--fs-xs); color: var(--text-2); }
.req .dur { display: flex; gap: 4px; flex-wrap: wrap; }
.req .pr { display: flex; align-items: center; gap: 6px; font: var(--px-2) / 1 var(--font-pixel); -webkit-font-smoothing: none; }
.req .ft { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); margin-top: 2px; }
.req .stamp { position: absolute; right: var(--s-3); top: 30px; }
.req.soon { opacity: 0.6; }

/* ---------- rótulos pequenos legíveis (Plex em vez de pixel de 11 px) ---------- */
.label, .fields dt, .sigtable th, .block-h, .glabel, .section-h, .band-h, .mod > header, .tile .t, .arc .no, .vslot .code, .shelf-h, .meter, .announce .head {
  font-family: var(--font-sans) !important; font-weight: var(--fw-bold); font-size: 11.5px !important; letter-spacing: 0.06em; -webkit-font-smoothing: antialiased;
}
.meter { font-weight: var(--fw-med); }

/* ---------- menu suspenso do jogo (client/ui/select.js) ---------- */
.csel-native { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; opacity: 0; pointer-events: none; }
.csel { position: relative; display: inline-block; min-width: 160px; }
.csel-btn { width: 100%; justify-content: space-between; gap: var(--s-3); text-transform: none; letter-spacing: 0; font: var(--fw-med) var(--fs-sm) / 1.2 var(--font-sans);
  background: var(--ink-0); box-shadow: inset 0 2px 0 var(--bevel-lo); border-color: var(--rule-ctl); }
.csel-btn:hover:not(:disabled) { background: var(--ink-2); border-color: var(--text-2); }
.csel.open .csel-btn { border-color: var(--bone); }
.csel-chev { font-size: 11px; color: var(--text-2); transition: transform var(--dur-1); }
.csel.open .csel-chev { transform: rotate(180deg); }
.csel-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 50; max-height: 280px; overflow: auto; margin: 0; padding: 4px; list-style: none;
  background: var(--ink-1); border: var(--bw) solid var(--edge); box-shadow: inset 0 0 0 1px var(--rule-2), var(--drop); min-width: max-content; }
.csel-list:focus { outline: none; }
.csel-list [role="option"] { padding: 7px 10px; font-size: var(--fs-sm); cursor: pointer; }
.csel-list [role="option"].hl { background: var(--ink-3); }
.csel-list [role="option"][aria-selected="true"] { color: var(--ink-0); background: var(--bone); }
.csel-list [role="option"][aria-disabled="true"] { color: var(--text-3); cursor: default; }
@media (pointer: coarse) { .csel-list [role="option"] { padding: 12px; } }

/* ---------- avisos curtos (client/ui/toast.js) ---------- */
.toasts { position: fixed; right: var(--s-3); bottom: calc(var(--s-3) + 52px); /* acima do botão "Feedback · Apoie" */ z-index: var(--z-toast); display: grid; gap: var(--s-2); width: min(380px, calc(100vw - 2 * var(--s-3))); pointer-events: none; }
.toast { pointer-events: auto; cursor: pointer; padding: var(--s-2) var(--s-3); font: var(--fs-sm) / 1.45 var(--font-sans); color: var(--text); background: var(--ink-1); border: var(--bw) solid var(--edge); border-left: 4px solid var(--info); box-shadow: 0 4px 0 rgb(0 0 0 / 0.4); animation: toast-in var(--dur-2) var(--ease) both; }
.toast.good { border-left-color: var(--ok); }
.toast.bad { border-left-color: var(--stamp); }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* ---------- diálogos do jogo e do painel (client/ui/dialog.js; no lugar de confirm/alert/prompt) ---------- */
.dlg-layer { position: fixed; inset: 0; z-index: calc(var(--z-modal) + 10); display: grid; place-items: center; padding: var(--s-4); background: rgb(4 6 7 / 0.74); }
.dlg-win { width: min(460px, 100%); max-height: calc(100dvh - 2 * var(--s-4)); overflow: auto; animation: win-in var(--dur-2) var(--ease) both; }
.dlg-win:focus { outline: none; }
.dlg-win > header .sicon { color: var(--text-2); }
.dlg-win.danger > header .sicon, .dlg-win.danger > header h2 { color: var(--stamp); }
.dlg-win.danger { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--stamp) 45%, var(--rule-2)), var(--drop); }
.dlg-body { padding: var(--s-3) var(--s-3) var(--s-2); font-size: var(--fs-md); line-height: var(--lh); }
.dlg-body p { margin: 0 0 var(--s-2); }
.dlg-field { display: grid; gap: 6px; margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--text-2); }
.dlg-field input { width: 100%; }
.dlg-copy { width: 100%; height: 220px; font: var(--fs-sm) / 1.4 var(--font-pixel); background: var(--ink-0); color: var(--text); border: var(--bw) solid var(--edge); }
.dlg-error { margin: var(--s-2) 0 0; padding: 6px var(--s-2); color: #ffd0c8; background: color-mix(in srgb, var(--stamp) 18%, var(--ink-0)); box-shadow: inset 3px 0 0 var(--stamp); font-size: var(--fs-sm); }
.dlg-acts { display: flex; justify-content: flex-end; gap: var(--s-2); padding: var(--s-2) var(--s-3) var(--s-3); }
.dlg-acts button.danger { color: #fff; background: color-mix(in srgb, var(--stamp) 62%, var(--ink-3)); }
.dlg-acts button.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--stamp) 80%, var(--ink-3)); }
.dlg-layer.busy .dlg-acts { opacity: 0.7; }
@media (max-width: 760px) {
  .dlg-layer { place-items: end stretch; padding: 0; }
  .dlg-win { width: 100%; border-left: 0; border-right: 0; }
  .dlg-acts { padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom)); }
  .dlg-acts button { flex: 1; }
}


/* Auditoria de UX: no celular o carimbo da ficha cobria o título; vira uma linha à direita, no fluxo. */
@media (max-width: 760px) { .sheet .stamp { position: static; display: block; width: max-content; margin: var(--s-2) 0 0 auto; } }

/* ---------- Boas-vindas e tutorial (client/ui/welcome.js) ---------- */
.wel-layer { position: fixed; inset: 0; z-index: calc(var(--z-modal) + 12); display: grid; place-items: center; padding: var(--s-4);
  background: radial-gradient(ellipse at 50% 40%, rgb(20 30 34 / 0.78), rgb(4 6 7 / 0.92)); }
.wel-win { width: min(820px, 100%); max-height: calc(100dvh - 2 * var(--s-4)); display: grid; grid-template-columns: 300px 1fr; overflow: hidden; }
.wel-win.enter { animation: win-in var(--dur-2) var(--ease) both; } /* só ao abrir, não a cada passo */
.wel-win:focus { outline: none; }
.wel-art { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-4); padding: var(--s-5) var(--s-4);
  background: repeating-linear-gradient(0deg, rgb(255 255 255 / 0.025) 0 1px, transparent 1px 3px), radial-gradient(circle at 50% 45%, #22313a, var(--ink-0) 70%);
  border-right: 1px solid var(--rule); min-height: 340px; overflow: hidden; }
.wel-art::after { content: ""; position: absolute; inset: 10px; border: 1px dashed rgb(255 255 255 / 0.08); pointer-events: none; }
.wel-emblem { width: 128px; height: 128px; image-rendering: pixelated; filter: drop-shadow(0 6px 14px rgb(0 0 0 / 0.6)); }
.wel-emblem.dim { opacity: 0.35; filter: grayscale(0.4) blur(0.5px); }
.wel-trio, .wel-row { display: flex; align-items: flex-end; justify-content: center; gap: var(--s-3); }
.wel-trio .spr, .wel-row .spr { filter: drop-shadow(0 4px 0 rgb(0 0 0 / 0.45)); }
.wel-kits, .wel-items { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); }
.wel-kits svg, .wel-items svg { width: 40px; height: 40px; image-rendering: pixelated; padding: 6px; background: var(--ink-2); border: 1px solid var(--rule); box-shadow: 0 2px 0 rgb(0 0 0 / 0.4); }
.wel-items { max-width: 220px; }
.wel-sys { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); width: 100%; }
.wel-sys span { display: grid; justify-items: center; gap: 4px; padding: var(--s-2) 4px; background: var(--ink-2); border: 1px solid var(--rule); color: var(--text-2); }
.wel-sys small { font-family: var(--font-pixel); font-size: 11px; }
.wel-note { margin: 0; font-family: var(--font-pixel); font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; text-align: center; }
.wel-stamp { position: absolute; top: 34%; left: 50%; transform: translate(-50%, -50%) rotate(-12deg); z-index: 1;
  font-family: var(--font-pixel); font-size: 33px; letter-spacing: 0.12em; color: var(--stamp); padding: 4px 14px;
  border: 4px double var(--stamp); background: rgb(15 20 23 / 0.6); text-shadow: 0 0 12px rgb(229 96 79 / 0.45); animation: wel-stamp 520ms var(--ease-pop) both; }
@keyframes wel-stamp { from { transform: translate(-50%, -50%) rotate(-12deg) scale(1.8); opacity: 0; } to { transform: translate(-50%, -50%) rotate(-12deg) scale(1); opacity: 1; } }
.wel-body { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); overflow: auto; }
.wel-top { display: flex; align-items: center; gap: var(--s-2); }
.wel-code { font-family: var(--font-pixel); font-size: 11px; letter-spacing: 0.1em; color: var(--ink-0); background: var(--bone, #d9d3c3); padding: 2px 6px; }
.wel-count { font-family: var(--font-pixel); font-size: 11px; color: var(--text-3); }
.wel-skip { margin-left: auto; }
.wel-body h2 { margin: 0; font-family: var(--font-pixel); font-size: 22px; line-height: 1.2; color: var(--text); }
.wel-lead { margin: 0; color: var(--text-2); line-height: 1.5; }
.wel-items-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.wel-items-list li { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3);
  background: var(--ink-2); border: 1px solid var(--rule); line-height: 1.4; }
.wel-ico { display: grid; place-items: center; width: 30px; height: 30px; color: var(--text-2); }
.wel-ico svg { image-rendering: pixelated; }
.wel-fb { align-self: flex-start; font-family: var(--font-pixel); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;
  color: var(--ink-0); background: var(--warn, #e0b44c); border: 0; padding: 8px 14px; box-shadow: 0 3px 0 rgb(0 0 0 / 0.45); }
.wel-fb:hover { filter: brightness(1.08); }
.wel-foot { display: flex; align-items: center; gap: var(--s-3); margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--rule); }
.wel-dots { display: flex; gap: 6px; }
.wel-dots i { width: 8px; height: 8px; background: var(--ink-2); border: 1px solid var(--rule-2, var(--rule)); }
.wel-dots i.done { background: var(--text-3); }
.wel-dots i.on { background: var(--warn, #e0b44c); border-color: var(--warn, #e0b44c); }
.wel-btns { margin-left: auto; display: flex; gap: var(--s-2); }
@media (max-width: 720px) {
  .wel-win { grid-template-columns: 1fr; }
  .wel-art { min-height: 0; padding: var(--s-4); border-right: 0; border-bottom: 1px solid var(--rule); }
  .wel-emblem { width: 72px; height: 72px; }
  .wel-stamp { font-size: 22px; top: 50%; }
  .wel-body { padding: var(--s-4); }
  .wel-body h2 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .wel-stamp { animation: none; } }

/* ---------- Botão flutuante "Feedback · Apoie" e a janela dele (client/ui/support.js) ---------- */
.sup-fab { position: fixed; right: 16px; bottom: 16px; z-index: calc(var(--z-modal) + 5); /* acima das janelas de sistema, abaixo dos diálogos */ display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; font-family: var(--font-pixel); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;
  color: var(--ink-0); background: var(--warn); border: 0; box-shadow: 0 3px 0 rgb(0 0 0 / 0.5), 0 0 0 1px rgb(0 0 0 / 0.4); }
.sup-fab:hover { filter: brightness(1.08); transform: translateY(-1px); }
.sup-fab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sup-layer { position: fixed; inset: 0; z-index: calc(var(--z-modal) + 11); display: grid; place-items: center; padding: var(--s-4); background: rgb(4 6 7 / 0.78); }
.sup-win { width: min(620px, 100%); max-height: calc(100dvh - 2 * var(--s-4)); display: flex; flex-direction: column; overflow: hidden; animation: win-in var(--dur-2) var(--ease) both; }
.sup-win > header { display: flex; align-items: center; justify-content: space-between; }
.sup-win h2 { margin: 0; font-family: var(--font-pixel); font-size: 22px; }
.sup-tabs { display: flex; gap: 2px; padding: 0 var(--s-4); border-bottom: 1px solid var(--rule); }
.sup-tabs button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--text-2); cursor: pointer; }
.sup-tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--warn); }
.sup-body { padding: var(--s-4); overflow: auto; display: grid; gap: var(--s-3); }
.sup-lead { margin: 0; color: var(--text-2); line-height: 1.5; }
.sup-points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.sup-points li { display: grid; grid-template-columns: 28px 1fr; gap: var(--s-2); align-items: start; padding: var(--s-2) var(--s-3); background: var(--ink-2); border: 1px solid var(--rule); line-height: 1.4; }
.sup-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.sup-steps > li { display: grid; grid-template-columns: 28px 1fr; gap: var(--s-3); }
.sup-steps > li > span { display: grid; place-items: center; width: 26px; height: 26px; font-family: var(--font-pixel); font-size: 11px; color: var(--ink-0); background: var(--warn); }
.sup-copy { display: flex; gap: var(--s-2); margin-top: var(--s-2); }
.sup-copy textarea { flex: 1; font-family: var(--font-pixel); font-size: 11px; resize: none; word-break: break-all; }
.sup-form { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.sup-form.col { flex-direction: column; }
.sup-form input { flex: 1 1 140px; }
.sup-off { margin: 0; padding: var(--s-3); border: 1px dashed var(--rule); color: var(--text-2); }
.sup-tbl { width: 100%; border-collapse: collapse; }
.sup-tbl td { padding: 4px 6px; border-bottom: 1px solid var(--rule); }
.sup-body code { font-family: var(--font-pixel); font-size: 11px; color: var(--lcd); }
@media (max-width: 720px) { .sup-fab { bottom: 84px; right: 10px; padding: 8px 10px; } .sup-fab span { display: none; } }
.sup-qr-row { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: center; }
.sup-qr { line-height: 0; padding: 0; border: 4px solid #fff; box-shadow: 0 3px 0 rgb(0 0 0 / 0.45); }
.sup-qr svg { width: 196px; height: 196px; display: block; }