/* =========================================================
   A CAIXA DE FÓSFOROS · PLANTA DO COMPLEXO · style.css
   Roxo e preto, como a Caixa.
   ========================================================= */

:root {
  --bg: #07060a;
  --bg2: #100d17;
  --painel: #120f1a;
  --linha: #2a2238;
  --roxo: #8b5cf6;
  --roxo-claro: #c4a8ff;
  --roxo-escuro: #3b2366;
  --texto: #ece6f7;
  --texto-dim: #9c90b3;
  --perigo: #ff4d6d;
  --ok: #3ddc97;
  --display: 'Cinzel', Georgia, serif;
  --corpo: 'Lora', Georgia, serif;
  --mono: 'Share Tech Mono', ui-monospace, monospace;
  --topo-h: 64px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--texto);
  font-family: var(--corpo);
  overflow: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }

/* ---------- Topo ---------- */
.topo {
  height: var(--topo-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid var(--linha);
  background: linear-gradient(180deg, #120d1d, var(--bg));
}
.marca-kicker {
  font-family: var(--mono); font-size: 12px; letter-spacing: .18em;
  color: var(--roxo-claro); text-transform: uppercase;
}
.marca h1 {
  margin: 0; font-family: var(--display); font-weight: 700;
  font-size: 22px; letter-spacing: .08em;
}
.topo-dir { display: flex; gap: 10px; align-items: center; }
.sync {
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--linha); color: var(--texto-dim);
}
.sync.vivo { color: var(--ok); border-color: rgba(61,220,151,.4); }
.sync.vivo::before { content: '● '; }
.sync.erro { color: var(--perigo); border-color: rgba(255,77,109,.4); }

.btn-fantasma {
  background: transparent; border: 1px solid var(--linha);
  padding: 7px 14px; border-radius: 6px; font-size: 14px;
}
.btn-fantasma:hover { border-color: var(--roxo); color: var(--roxo-claro); }
.btn-fantasma.ativo { background: var(--roxo-escuro); border-color: var(--roxo); }
.btn-fantasma.perigo:hover { border-color: var(--perigo); color: var(--perigo); }
.btn-roxo {
  background: var(--roxo); border: 0; color: #fff;
  padding: 9px 18px; border-radius: 6px; font-weight: 600;
}
.btn-roxo:hover { filter: brightness(1.1); }

/* ---------- Layout ---------- */
.corpo {
  display: grid;
  grid-template-columns: 92px 1fr 330px;
  height: calc(100% - var(--topo-h));
}

/* ---------- Elevador ---------- */
.elevador {
  border-right: 1px solid var(--linha);
  background: var(--bg2);
  display: flex; flex-direction: column; align-items: center;
  padding: 16px 0; gap: 10px;
}
.elevador-titulo {
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  color: var(--texto-dim); text-transform: uppercase;
}
.lista-andares { display: flex; flex-direction: column-reverse; gap: 10px; }
.andar-btn {
  width: 60px; height: 60px; border-radius: 50%;
  background: #18131f; border: 2px solid var(--linha);
  font-family: var(--display); font-size: 20px; font-weight: 700;
  position: relative; transition: .15s;
}
.andar-btn:hover { border-color: var(--roxo); }
.andar-btn.atual {
  border-color: var(--roxo); color: #fff;
  box-shadow: 0 0 0 4px rgba(139,92,246,.18), 0 0 22px rgba(139,92,246,.45);
}
.andar-btn .cadeado {
  position: absolute; right: -4px; bottom: -4px;
  font-size: 13px; background: var(--bg); border-radius: 50%;
  width: 22px; height: 22px; display: grid; place-items: center;
  border: 1px solid var(--linha);
}
.andar-btn .ocupado {
  position: absolute; left: -2px; top: -2px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--ok); border: 2px solid var(--bg2);
}

/* ---------- Palco ---------- */
.palco-area { position: relative; overflow: hidden; }
.viewport {
  position: absolute; inset: 0; overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(139,92,246,.10), transparent 60%),
    var(--bg);
  touch-action: none; cursor: grab; user-select: none;
}
.viewport.arrastando { cursor: grabbing; }

.stage {
  position: absolute; left: 50%; top: 50%;
  transform-style: preserve-3d;
  will-change: transform;
}
.stage-base {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  background-color: #0e0b14;
  background-image:
    linear-gradient(rgba(139,92,246,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,92,246,.10) 1px, transparent 1px);
  border: 2px solid #2b2140;
  box-shadow: 0 0 80px rgba(139,92,246,.18);
}

/* Salas e corredores (piso) */
.sala, .corredor {
  position: absolute;
  transform: translateZ(1px);
  background-color: #17121f;
  background-image:
    linear-gradient(rgba(196,168,255,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(196,168,255,.12) 1px, transparent 1px);
}
.sala { box-shadow: inset 0 0 0 1px rgba(196,168,255,.25); }
.sala-tinta {
  position: absolute; inset: 0; opacity: 0; transition: opacity .3s;
  background: var(--el, transparent);
}
.mostra-elementos .sala-tinta { opacity: .28; }
.sala-rotulo {
  position: absolute; left: 0; right: 0; top: 12%;
  text-align: center; pointer-events: none; padding: 0 6px;
}
.sala-cn {
  display: block; font-family: var(--mono); font-size: 32px;
  color: rgba(236,230,247,.85); letter-spacing: .06em;
}
.sala-nome {
  display: block; font-family: var(--display); font-size: 19px; font-weight: 700;
  line-height: 1.2; color: var(--roxo-claro); margin-top: 2px;
}
.sala-el {
  display: none; font-family: var(--mono); font-size: 14px;
  color: var(--texto-dim); margin-top: 3px; text-transform: uppercase; letter-spacing: .1em;
}
.mostra-elementos .sala-el { display: block; }
/* Parede de Desejos na sala (mapa/paredes): o símbolo do Eco em traço, na cor da forma atual; toque abre a Parede */
.sala-parede { position: absolute; left: 6%; bottom: 7%; width: 46px; height: 46px; padding: 3px; border-radius: 8px; z-index: 2; cursor: pointer;
  background: radial-gradient(circle, #24201c, #0d0b0a 75%); border: 1px solid color-mix(in srgb, var(--eco-b) 60%, #000); box-shadow: 0 0 10px color-mix(in srgb, var(--eco-b) 55%, transparent); }
.sala-parede svg { width: 100%; height: 100%; display: block; fill: none; stroke: var(--eco-l); stroke-width: 2.6; stroke-linecap: round; filter: drop-shadow(0 0 2px var(--eco-b)); }
.sala-parede .ec-v { stroke: rgba(130,170,60,.6); stroke-width: 1.4; fill: rgba(110,140,40,.22); filter: none; }
.sala-parede .ec-o { fill: var(--eco-l); stroke: none; }
.sala-parede:hover, .sala-parede:focus-visible { outline: 2px solid var(--eco-l); outline-offset: 2px; }
.sala.neutra .sala-cn { color: #7fe3d6; }
.sala.vazia-planta .sala-cn { color: rgba(236,230,247,.35); }

/* Elevador / poço para o próximo andar */
.saida {
  position: absolute; transform: translateZ(1.5px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg, #1a0f2e 0 8px, #241540 8px 16px);
  box-shadow: inset 0 0 0 2px #c4a8ff, 0 0 18px rgba(196,168,255,.55);
  font-family: var(--mono); color: #e9dcff; text-align: center; line-height: 1;
  pointer-events: none;
}
.saida.poco { border-radius: 4px; background: radial-gradient(circle, #000 35%, #1a0f2e 75%); }
.saida-seta { font-size: 30px; color: #c4a8ff; }
.saida-txt { font-size: 13px; letter-spacing: .08em; margin-top: 2px; }

/* Blocos maciços entre as salas (tampa sólida das paredes) */
.macico {
  position: absolute;
  background: #241638;
  background-image:
    linear-gradient(rgba(196,168,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(196,168,255,.05) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Paredes 2.5D */
.parede {
  position: absolute;
  background: linear-gradient(180deg, #5b3fa0, #2a1b4a);
  border-top: 2px solid #b79cff;
  backface-visibility: visible;
}
.parede.h { transform-origin: 50% 100%; transform: rotateX(-90deg); }
.parede.v { transform-origin: 0 50%; transform: rotateY(-90deg);
  background: linear-gradient(90deg, #2a1b4a, #5b3fa0); border-top: 0; border-right: 2px solid #b79cff; }

/* ---------- Fichas (os pontinhos) ---------- */
.ficha {
  position: absolute; width: 0; height: 0;
  transform: translateZ(2px);
  transform-style: preserve-3d;
}
.ficha-sombra {
  position: absolute; width: 26px; height: 26px; left: -13px; top: -13px;
  border-radius: 50%; background: radial-gradient(circle, rgba(0,0,0,.6), transparent 70%);
}
.ficha-pino {
  position: absolute; left: -20px; bottom: 0; width: 40px;
  display: flex; flex-direction: column; align-items: center;
  transform-origin: 50% 100%;
  transform: rotateZ(calc(var(--rot) * -1)) rotateX(calc(var(--tilt) * -1)) scale(calc(var(--k, 1) * var(--kf, 1)));
}
.ficha-cabeca {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--cor) center / cover no-repeat;
  border: 3px solid var(--cor);
  box-shadow: 0 0 0 1px rgba(0,0,0,.8), 0 0 14px var(--cor);
}
.ficha.filho .ficha-cabeca {
  border-style: dashed; border-color: #fff;
  box-shadow: 0 0 0 2px var(--cor), 0 0 16px var(--cor);
}
.ficha-haste { width: 2px; height: 14px; background: var(--cor); opacity: .9; }
.ficha-nome {
  position: absolute; bottom: 52px; white-space: nowrap;
  font-family: var(--mono); font-size: 12px;
  padding: 1px 6px; border-radius: 4px;
  background: rgba(7,6,10,.85); border: 1px solid var(--cor);
  pointer-events: none;
}
.ficha.oculta { opacity: .45; }
.ficha.oculta .ficha-nome::after { content: ' · oculto'; color: var(--texto-dim); }
.ficha.selecionada .ficha-cabeca { outline: 2px solid #fff; outline-offset: 3px; }
.mestre .ficha-cabeca { cursor: grab; }
.ficha.arrastada .ficha-cabeca { cursor: grabbing; transform: scale(1.15); }

/* ---------- Bloqueio ---------- */
.bloqueio {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(7,6,10,.92); z-index: 5;
}
.terminal {
  width: min(420px, 90%);
  font-family: var(--mono); color: #b9f5c9;
  border: 1px solid #23402e; background: #050906;
  padding: 22px; border-radius: 8px;
  box-shadow: 0 0 40px rgba(61,220,151,.12), inset 0 0 30px rgba(61,220,151,.05);
}
.terminal-linha { margin: 0 0 6px; letter-spacing: .06em; }
.terminal-linha.dim { color: #6fa883; }
.terminal-entrada { display: flex; gap: 8px; align-items: center; margin: 14px 0; }
.terminal-entrada input {
  flex: 1; background: transparent; border: 0; border-bottom: 1px solid #2f5a3f;
  color: #d8ffe3; font: 18px var(--mono); padding: 6px 2px; outline: none;
}
.terminal-erro { color: var(--perigo); margin: 0 0 12px; }
.terminal .btn-roxo { background: #1f6f45; }

/* ---------- Sobreposições do palco ---------- */
.andar-legenda {
  position: absolute; left: 18px; top: 14px; pointer-events: none;
  display: flex; flex-direction: column;
}
.andar-legenda span { font-family: var(--display); font-size: 26px; font-weight: 700; }
.andar-legenda small { font-family: var(--mono); color: var(--texto-dim); letter-spacing: .08em; }

.camera {
  position: absolute; right: 14px; bottom: 14px;
  display: grid; grid-template-columns: repeat(4, 44px); gap: 6px;
}
.camera button {
  height: 40px; border-radius: 6px; font-family: var(--mono); font-size: 15px;
  background: rgba(18,15,26,.9); border: 1px solid var(--linha);
}
.camera button:hover { border-color: var(--roxo); }
.camera button.ativo { background: var(--roxo-escuro); border-color: var(--roxo); }

.dica {
  position: absolute; left: 18px; bottom: 16px; max-width: 46%;
  font-family: var(--mono); font-size: 12px; color: var(--texto-dim);
  pointer-events: none;
}

.cartao {
  position: absolute; left: 18px; top: 82px; width: 260px;
  background: rgba(18,15,26,.96); border: 1px solid var(--linha);
  border-left: 4px solid var(--cor, var(--roxo));
  border-radius: 8px; padding: 12px; z-index: 4;
}
.cartao-topo { display: flex; gap: 10px; align-items: center; }
.cartao img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; border: 2px solid var(--cor); }
.cartao-bola { width: 54px; height: 54px; border-radius: 50%; background: var(--cor); border: 2px dashed #fff; flex: none; }
.cartao h3 { margin: 0; font-family: var(--display); font-size: 17px; }
.cartao .cod { font-family: var(--mono); font-size: 12px; color: var(--texto-dim); }
.cartao p { margin: 8px 0 0; font-size: 14px; }
.cartao .acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cartao .acoes button, .cartao .acoes select {
  font-size: 12px; padding: 5px 8px; border-radius: 5px;
  background: #1b1526; border: 1px solid var(--linha); color: var(--texto);
}
.cartao .fechar { position: absolute; right: 8px; top: 4px; background: none; border: 0; font-size: 18px; color: var(--texto-dim); }

/* ---------- Painel ---------- */
.painel {
  border-left: 1px solid var(--linha);
  background: var(--painel);
  overflow-y: auto; padding: 16px 16px 40px;
}
.bloco + .bloco { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linha); }
.bloco h2 {
  margin: 0 0 12px; font-family: var(--display); font-size: 15px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--roxo-claro);
}
.bloco h3 { margin: 16px 0 8px; font-size: 13px; font-family: var(--mono); color: var(--texto-dim); text-transform: uppercase; letter-spacing: .1em; }
.mini { font-size: 13px; color: var(--texto-dim); margin: 0 0 8px; }
.vazio { font-size: 14px; color: var(--texto-dim); font-style: italic; margin: 0; }

.lista-seres { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lista-seres li {
  display: flex; gap: 10px; align-items: center;
  padding: 6px; border-radius: 6px; cursor: pointer;
}
.lista-seres li:hover { background: #1a1424; }
.lista-seres .bola {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: var(--cor) center / cover; border: 3px solid var(--cor);
}
.lista-seres .bola.filho { border: 2px dashed #fff; box-shadow: 0 0 0 2px var(--cor); }
.lista-seres .info { min-width: 0; }
.lista-seres strong { display: block; font-size: 15px; }
.lista-seres .sub { display: block; font-size: 12px; color: var(--texto-dim); font-family: var(--mono); }
.lista-seres .onde { display: block; font-size: 13px; color: var(--roxo-claro); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.chave { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.chave input { margin-top: 3px; accent-color: var(--roxo); }

.tray { display: flex; flex-wrap: wrap; gap: 6px; }
.tray button {
  display: flex; align-items: center; gap: 6px;
  background: #1b1526; border: 1px solid var(--linha);
  border-radius: 999px; padding: 4px 10px 4px 4px; font-size: 13px;
}
.tray button:hover { border-color: var(--roxo); }
.tray button:disabled { opacity: .4; cursor: default; }
.tray .pinta { width: 18px; height: 18px; border-radius: 50%; background: var(--cor) center / cover; border: 2px solid var(--cor); }
.tray .pinta.filho { border: 2px dashed #fff; box-shadow: 0 0 0 1px var(--cor); }
.tray .qtd { font-family: var(--mono); color: var(--texto-dim); }

.ferramentas { display: grid; gap: 8px; }

/* ---------- Dados ---------- */
.btn-dados {
  position: absolute; left: 18px; bottom: 44px; z-index: 6;
  background: rgba(18,15,26,.95); border: 1px solid var(--roxo); border-radius: 8px;
  padding: 8px 14px; font-family: var(--mono); font-size: 15px;
}
.btn-dados:hover { box-shadow: 0 0 16px rgba(139,92,246,.5); }
.painel-dados {
  position: absolute; left: 18px; bottom: 92px; z-index: 7; width: 290px;
  background: rgba(18,15,26,.98); border: 1px solid var(--roxo); border-radius: 10px;
  padding: 14px; display: grid; gap: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.6);
}
.dados-topo { display: flex; justify-content: space-between; align-items: center; }
.dados-topo h3 { margin: 0; font-family: var(--display); font-size: 16px; }
.dados-topo .fechar { background: none; border: 0; font-size: 20px; color: var(--texto-dim); }
.dados-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dados-campos label { font-size: 12px; color: var(--texto-dim); display: grid; gap: 4px; }
.dados-campos input { background: #0b0910; border: 1px solid var(--linha); color: var(--texto); border-radius: 6px; padding: 7px; font: 16px var(--mono); width: 100%; }
.dados-faces { display: flex; flex-wrap: wrap; gap: 6px; }
.face { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 8px; background: #221b2e; font: 18px var(--mono); color: var(--texto-dim); }
.face.usada { background: var(--roxo); color: #fff; box-shadow: 0 0 12px var(--roxo); }
.face.crit { border: 2px solid #3ddc97; }
.face.falha { border: 2px solid #ff3b3b; }
.dados-conta { margin: 6px 0 0; font-size: 14px; }
.dados-total { font: 26px var(--mono); color: #fff; }

.aviso {
  position: absolute; left: 50%; top: 70px; transform: translateX(-50%); z-index: 8;
  background: #2a1016; border: 1px solid #ff6b6b; color: #ffd0d8; padding: 8px 14px; border-radius: 8px; font-size: 14px;
}

/* ---------- Perseguição ---------- */
.faixa-persg {
  position: fixed; left: 0; right: 0; top: var(--topo-h); z-index: 29;
  text-align: center; padding: 6px; font-family: var(--mono); letter-spacing: .12em; font-size: 13px;
  background: #3b2366; color: #fff; border-bottom: 1px solid var(--roxo);
}
.lista-persg, .ordem-persg { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.lista-persg li, .ordem-persg li {
  display: grid; grid-template-columns: 30px 1fr auto auto; gap: 8px; align-items: center;
  padding: 6px 8px; border-radius: 6px; background: #17121f; font-size: 14px;
}
.ordem-persg li { grid-template-columns: 30px 28px 1fr auto auto 24px 24px; }
.ordem-persg .bola { width: 26px; height: 26px; border-width: 2px; }
.lista-persg li.ativo, .ordem-persg li.ativo { background: var(--roxo-escuro); outline: 1px solid var(--roxo); }
.ord { font-family: var(--mono); color: var(--texto-dim); }
.pi, .pm { font-family: var(--mono); font-size: 12px; color: var(--texto-dim); white-space: nowrap; }
.ordem-persg button { background: #221b2e; border: 1px solid var(--linha); border-radius: 4px; font-size: 10px; height: 22px; }
.minha-vez { margin-top: 10px; padding: 10px; border-radius: 8px; background: rgba(139,92,246,.15); border: 1px solid var(--roxo); }
.minha-vez p { margin: 0 0 8px; font-weight: 600; }
.setup-persg { display: grid; gap: 4px; margin-bottom: 10px; max-height: 320px; overflow-y: auto; }
.setup-linha { display: grid; grid-template-columns: 18px 24px 1fr 30px 52px 30px 60px; gap: 5px; align-items: center; font-size: 13px; }
.setup-linha .setup-lim { display: flex; align-items: center; gap: 3px; min-width: 0; }
.setup-linha .setup-lim input { flex: 1; min-width: 0; }
.setup-linha .lado { background: #0b0910; border: 1px solid var(--linha); border-radius: 4px; padding: 0; height: 26px; font-size: 15px; line-height: 1; cursor: pointer; }
.setup-linha .lado.presa { border-color: #4b8a5a; } .setup-linha .lado.cacador { border-color: #b3121b; }
.setup-linha .bola { width: 22px; height: 22px; border-width: 2px; }
.setup-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.setup-nome small { display: block; font-family: var(--mono); font-size: 10px; color: #3ddc97; }
.setup-linha input[type=number] { background: #0b0910; border: 1px solid var(--linha); color: var(--texto); border-radius: 4px; padding: 3px 4px; font: 13px var(--mono); width: 100%; }
.dado-mini { background: #221b2e; border: 1px solid var(--linha); border-radius: 4px; height: 26px; padding: 0; }
.setup-linha .m { font-size: 11px; color: var(--texto-dim); }
.ficha.na-vez .ficha-cabeca { box-shadow: 0 0 0 3px #fff, 0 0 24px #fff; }
.corr-m { position: absolute; inset: 0; display: grid; place-items: center; font: 11px var(--mono); color: rgba(196,168,255,.55); pointer-events: none; }

/* ---------- Funções (só Mestre) ---------- */
.lista-funcoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; }
.funcao-linha { display: grid; gap: 2px; min-width: 0; font-size: 13px; color: var(--texto-dim); }
.funcao-linha input { width: 100%; min-width: 0; box-sizing: border-box; }
.funcao-linha input {
  background: #0b0910; border: 1px solid var(--linha); color: var(--texto);
  border-radius: 5px; padding: 5px 7px; font: 13px var(--mono);
}
.so-mestre { font-family: var(--mono); font-size: 10px; color: #ff9fb2; border: 1px solid #5a1f2a; border-radius: 3px; padding: 0 4px; margin-left: 4px; }

/* ---------- Salas desconhecidas ---------- */
.sala.desconhecida { background-color: #100c16; }
.sala.desconhecida .sala-cn { font-size: 20px; letter-spacing: .25em; color: rgba(236,230,247,.35); text-transform: uppercase; }
.sala.oculta-jog { outline: 2px dashed rgba(196,168,255,.45); outline-offset: -8px; }
.sala-oculta { display: block; font-family: var(--mono); font-size: 12px; color: #ff9fb2; margin-top: 4px; letter-spacing: .08em; }
.sala.sel { box-shadow: inset 0 0 0 3px #fff, 0 0 30px rgba(255,255,255,.4); }
.sala-bola { border-radius: 8px !important; }

/* ---------- Medidor de ruído ---------- */
.lista-ruido { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lista-ruido li { display: grid; grid-template-columns: 80px auto 1fr; gap: 10px; align-items: center; font-size: 14px; }
.lista-ruido .r-txt { font-family: var(--mono); font-size: 12px; color: var(--texto-dim); white-space: nowrap; }
.lista-ruido li.estouro .r-txt { color: #ff6b6b; }
.medidor { display: inline-flex; gap: 3px; }
.medidor .q { width: 13px; height: 12px; border-radius: 2px; background: #2a2238; }
.q.on.n1, .dq.on.n1 { background: #3ddc97; }
.q.on.n2, .dq.on.n2 { background: #9be15d; }
.q.on.n3, .dq.on.n3 { background: #f5c84c; }
.q.on.n4, .dq.on.n4 { background: #ff8c42; }
.q.on.n5, .dq.on.n5 { background: #ff3b3b; box-shadow: 0 0 10px #ff3b3b; }

.decibel { display: grid; grid-template-columns: 130px 1fr; gap: 12px; margin-bottom: 12px; }
.decibel-coluna { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 8px; background: #0b0910; border: 1px solid var(--linha); }
.dq { height: 30px; border-radius: 4px; background: #221b2e; display: flex; flex-direction: column; justify-content: center; padding: 0 8px; }
.dq span { font-family: var(--mono); font-size: 12px; color: rgba(255,255,255,.75); }
.dq em { font-style: normal; font-size: 10px; color: rgba(255,255,255,.55); }
.dq.on span, .dq.on em { color: #0b0910; font-weight: 600; }
.alerta-ruido {
  display: grid; gap: 6px; padding: 10px; border-radius: 8px; margin-bottom: 10px;
  background: rgba(255,59,59,.12); border: 1px solid #ff3b3b; font-size: 13px;
  animation: pulsa 1s infinite alternate;
}
.alerta-ruido strong { color: #ff6b6b; }
@keyframes pulsa { from { box-shadow: 0 0 0 rgba(255,59,59,0); } to { box-shadow: 0 0 18px rgba(255,59,59,.5); } }
.quebras { font-size: 14px; display: grid; gap: 6px; }
.barra-quebras { display: flex; gap: 6px; }
.barra-quebras span { flex: 1; height: 10px; border-radius: 3px; background: #2a2238; }
.barra-quebras span.on { background: #ff3b3b; box-shadow: 0 0 8px #ff3b3b; }
.quebras-botoes { display: flex; gap: 6px; flex-wrap: wrap; }
.quebras-botoes .btn-fantasma { padding: 5px 10px; font-size: 13px; }
.btn-protocolo {
  width: 100%; margin: 4px 0 12px; padding: 12px; border-radius: 8px;
  font-family: var(--display); font-weight: 700; letter-spacing: .04em;
  background: #2a1016; border: 1px solid #5a1f2a; color: #ff9fb2;
}
.btn-protocolo:disabled { opacity: .4; cursor: not-allowed; }
.btn-protocolo.pronto { background: #b3001b; border-color: #ff3b3b; color: #fff; animation: pulsa .7s infinite alternate; }

/* alarme: a tela pisca em vermelho */
body.pisca::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 60;
  animation: piscaVermelho 2.4s ease-out;
}
@keyframes piscaVermelho {
  0%, 30%, 60% { background: rgba(255,0,30,.35); }
  15%, 45%, 75% { background: rgba(255,0,30,.05); }
  100% { background: transparent; }
}

/* Protocolo Filho da O.R.F.E.U. */
.tela-protocolo {
  position: fixed; inset: 0; z-index: 70; display: grid; place-content: center; text-align: center;
  background: #1a0005; animation: protocolo 1s infinite alternate; padding: 20px;
}
@keyframes protocolo { from { background: #1a0005; } to { background: #6b0010; } }
.tela-protocolo h2 { font-family: var(--display); font-size: clamp(28px, 6vw, 64px); margin: 10px 0; color: #fff; letter-spacing: .04em; }
.tp-kicker { font-family: var(--mono); letter-spacing: .2em; color: #ff9fb2; text-transform: uppercase; margin: 0; }
.tp-sub { font-family: var(--mono); font-size: 28px; letter-spacing: .5em; color: #ff3b3b; margin: 0; }
.faixa-protocolo {
  position: fixed; left: 0; right: 0; top: var(--topo-h); z-index: 30;
  text-align: center; padding: 6px; font-family: var(--mono); letter-spacing: .15em; font-size: 13px;
  background: #b3001b; color: #fff; animation: pulsa .8s infinite alternate;
}

/* ---------- Tela de entrada (Jogador / Mestre) ---------- */
.perfil {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center; padding: 20px;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(139,92,246,.22), transparent 60%),
    rgba(7,6,10,.97);
  overflow-y: auto;
}
.perfil-caixa { width: min(760px, 100%); text-align: center; }
.perfil-kicker {
  font-family: var(--mono); font-size: 12px; letter-spacing: .2em;
  color: var(--roxo-claro); text-transform: uppercase; margin: 0 0 10px;
}
.perfil h2 { font-family: var(--display); font-size: 34px; margin: 0 0 24px; letter-spacing: .04em; }
.perfil-opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.perfil-btn {
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  padding: 34px 20px; border-radius: 12px;
  background: #120f1a; border: 1px solid var(--linha);
  transition: .15s;
}
.perfil-btn:hover { border-color: var(--roxo); box-shadow: 0 0 30px rgba(139,92,246,.35); transform: translateY(-2px); }
.perfil-btn-titulo { font-family: var(--display); font-size: 26px; font-weight: 700; }
.perfil-btn-sub { font-size: 14px; color: var(--texto-dim); }
.perfil-aviso { color: var(--texto-dim); margin: -12px 0 20px; font-size: 15px; }
.perfil-personagens {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px; margin-bottom: 20px;
}
.perso {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 10px; border-radius: 10px;
  background: #120f1a; border: 1px solid var(--linha); transition: .15s;
}
.perso:hover { border-color: var(--cor); box-shadow: 0 0 22px var(--cor); }
.perso img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid var(--cor); }
.perso strong { font-family: var(--display); font-size: 17px; }
.perso span { font-family: var(--mono); font-size: 12px; color: var(--texto-dim); }

/* ficha do próprio jogador */
.ficha.minha .ficha-cabeca { cursor: grab; outline: 2px dashed #fff; outline-offset: 3px; }
.voce { font-family: var(--mono); font-size: 11px; color: #fff; background: var(--roxo-escuro); border: 1px solid var(--roxo); border-radius: 4px; padding: 0 5px; margin-left: 4px; }

@media (max-width: 860px) {
  .perfil h2 { font-size: 26px; }
  .perfil-opcoes { grid-template-columns: 1fr; }
  .perfil-btn { padding: 24px 16px; }
}

/* ---------- Diálogos ---------- */
.dlg {
  background: var(--painel); color: var(--texto);
  border: 1px solid var(--linha); border-radius: 10px;
  width: min(400px, 92vw); padding: 20px;
}
.dlg::backdrop { background: rgba(0,0,0,.7); }
.dlg h2 { margin: 0 0 14px; font-family: var(--display); font-size: 18px; }
.dlg label { display: block; font-size: 14px; margin-bottom: 12px; color: var(--texto-dim); }
.dlg input, .dlg textarea {
  display: block; width: 100%; margin-top: 6px;
  background: #0b0910; border: 1px solid var(--linha); color: var(--texto);
  border-radius: 6px; padding: 9px; font: 15px var(--mono);
}
.dlg textarea { resize: none; word-break: break-all; }
.dlg-acoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.erro { color: var(--perigo); font-size: 14px; margin: 0; }

.so-celular { display: none; }

/* ---------- Celular ---------- */
@media (max-width: 860px) {
  :root { --topo-h: 56px; }
  .painel-dados { left: 10px; right: 10px; width: auto; bottom: 110px; }
  .btn-dados { left: 10px; bottom: 60px; }
  .topo { padding: 0 12px; }
  .marca h1 { font-size: 17px; }
  .marca-kicker { display: none; }
  .corpo { grid-template-columns: 1fr; grid-template-rows: 64px 1fr; }
  .elevador { flex-direction: row; border-right: 0; border-bottom: 1px solid var(--linha); padding: 0 12px; justify-content: flex-start; }
  .lista-andares { flex-direction: row; }
  .andar-btn { width: 46px; height: 46px; font-size: 16px; }
  .elevador-titulo { display: none; }
  .so-celular { display: inline-block; }
  .painel {
    position: fixed; left: 0; right: 0; bottom: 0; height: 70%;
    z-index: 20; border-left: 0; border-top: 1px solid var(--roxo);
    border-radius: 14px 14px 0 0; transform: translateY(105%); transition: transform .25s;
  }
  .painel.aberto { transform: none; }
  .fechar-painel { position: absolute; right: 12px; top: 8px; background: none; border: 0; font-size: 26px; }
  .camera { grid-template-columns: repeat(4, 40px); right: 10px; bottom: 10px; }
  .dica { display: none; }
  .andar-legenda span { font-size: 20px; }
  .cartao { top: auto; bottom: 110px; left: 10px; right: 10px; width: auto; }
  .sync { display: none; }
}

/* bolinhas nas listas da perseguição */
.ordem-persg .bola, .setup-linha .bola {
  display: inline-block; border-radius: 50%;
  background: var(--cor) center / cover no-repeat; border: 2px solid var(--cor);
}
.setup-linha .bola.filho, .ordem-persg .bola.filho { border: 2px dashed #fff; box-shadow: 0 0 0 1px var(--cor); }
/* a faixa da perseguição não cobre o nome do andar */
body.em-persg .andar-legenda { top: 46px; }
body.em-persg .cartao { top: 112px; }

/* ---------- Mestre Auxiliar: sons das salas ---------- */
.sala::after, .corredor::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at center, rgba(255,40,60,.55), rgba(255,40,60,.15) 70%);
  transition: opacity .4s;
}
.sala.som::after, .corredor.som::after {
  opacity: calc(var(--som, 0) * 0.17);
  animation: batida calc(2.2s - var(--som, 1) * 0.3s) ease-in-out infinite;
}
@keyframes batida { 0%,100% { filter: brightness(.8); } 50% { filter: brightness(1.6); } }
.sala.pulso, .corredor.pulso { animation: pulsoSom 1.1s ease-out; }
@keyframes pulsoSom {
  0% { box-shadow: inset 0 0 0 3px rgba(255,60,80,.95), 0 0 40px rgba(255,40,60,.9); }
  100% { box-shadow: inset 0 0 0 1px rgba(196,168,255,.25), 0 0 0 rgba(255,40,60,0); }
}
/* Mestre: cobaia visível aos Filhos ganha anel vermelho */
.ficha.vista-filhos .ficha-cabeca { box-shadow: 0 0 0 3px #ff3b3b, 0 0 18px #ff3b3b; }
/* tela de entrada com três opções */
.perfil-opcoes { grid-template-columns: repeat(3, 1fr); }
.aux-form { display: flex; gap: 10px; justify-content: center; margin-bottom: 10px; }
.aux-form input { background: #0b0910; border: 1px solid var(--linha); color: var(--texto); border-radius: 8px; padding: 10px 12px; font: 16px var(--mono); width: 260px; }
@media (max-width: 860px) { .perfil-opcoes { grid-template-columns: 1fr; } .aux-form { flex-direction: column; align-items: center; } }

/* =========================================================
   FERRAMENTAS DO MESTRE: diário, rolagens, anotações, backup
   ========================================================= */
.diario-ctrl { display: flex; gap: 8px; margin-bottom: 8px; }
.diario-ctrl select {
  flex: 1; background: #0b0910; border: 1px solid var(--linha); color: var(--texto);
  border-radius: 6px; padding: 6px; font: 13px var(--mono);
}
.diario-ctrl .btn-fantasma { padding: 5px 10px; font-size: 13px; }
.lista-diario {
  list-style: none; margin: 0 0 10px; padding: 0; max-height: 340px; overflow-y: auto;
  border: 1px solid var(--linha); border-radius: 8px; background: #0b0910;
}
.lista-diario li {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: baseline;
  padding: 6px 8px; font-size: 13px; border-bottom: 1px solid #1a1424;
}
.lista-diario .d-txt { grid-column: 1 / -1; line-height: 1.35; }
.lista-diario .d-tag { justify-self: start; }
.lista-diario time { font: 11px var(--mono); color: var(--texto-dim); white-space: nowrap; }
.d-tag { font: 10px var(--mono); padding: 0 4px; border-radius: 3px; background: #221b2e; color: var(--roxo-claro); }
.d-dado .d-tag { color: #f5c84c; }
.d-ruido .d-tag { color: #ff6b6b; }
.d-persg .d-tag { color: #7fe3d6; }
.d-sala .d-tag { color: #9be15d; }
.lista-diario li.d-sessao {
  display: block; text-align: center; font: 11px var(--mono); letter-spacing: .1em;
  color: #fff; background: var(--roxo-escuro); text-transform: uppercase;
}
.ferramentas.duas { grid-template-columns: 1fr 1fr; }

.lista-rolagens { display: grid; gap: 10px; }
.rolagem { display: grid; grid-template-columns: 30px 1fr; gap: 8px; align-items: start; }
.rolagem .bola {
  width: 30px; height: 30px; border-radius: 50%; display: inline-block;
  background: var(--cor) center / cover no-repeat; border: 2px solid var(--cor);
}
.rolagem .bola.filho { border: 2px dashed #fff; box-shadow: 0 0 0 1px var(--cor); }
.mestre-bola { display: grid !important; place-items: center; background: var(--roxo-escuro) !important; border-color: var(--roxo) !important; font: 13px var(--display); }
.rolagem-info strong { font-size: 14px; }
.rolagem ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; }
.rolagem li { display: grid; grid-template-columns: 58px auto 1fr; gap: 6px; font-size: 12px; align-items: baseline; padding: 1px 3px; }
.rolagem li time { font: 11px var(--mono); color: var(--texto-dim); }
.rolagem li b { font: 15px var(--mono); color: #fff; min-width: 26px; text-align: right; white-space: nowrap; }
.rolagem li span { color: var(--texto-dim); font-family: var(--mono); font-size: 11px; }
.rolagem li.repetiu { background: rgba(255,140,66,.12); border-radius: 4px; }
.rolagem li.repetiu span { color: #ffb37a; }

.lista-notas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lista-notas li { padding: 7px 9px; border-radius: 6px; background: #17121f; cursor: pointer; border-left: 3px solid var(--roxo); }
.lista-notas li:hover { background: #1f1830; }
.lista-notas strong { display: block; font-size: 13px; color: var(--roxo-claro); }
.lista-notas span { font-size: 13px; color: var(--texto-dim); white-space: pre-wrap; }
.nota-sala { display: grid; gap: 4px; margin-top: 10px; font-size: 12px; color: var(--texto-dim); }
.nota-sala textarea {
  background: #0b0910; border: 1px solid var(--linha); color: var(--texto); border-radius: 6px;
  padding: 7px; font: 13px var(--corpo); resize: vertical; min-height: 70px;
}
.nota-sala textarea:focus { outline: none; border-color: var(--roxo); }
.nota-status { display: block; font: 11px var(--mono); color: var(--ok); min-height: 14px; margin-top: 2px; }
.sala.com-nota .sala-rotulo::after {
  content: '✎ anotação'; display: inline-block; margin-top: 6px;
  font: 13px var(--mono); color: #ffe08a; background: rgba(0,0,0,.45);
  padding: 1px 6px; border-radius: 4px; border: 1px solid #806a2a;
}
.alerta-mini { color: #ff9fb2; }

/* ciclo diário */
.ciclo-topo { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.ciclo-dia {
  background: #1b1526; border: 1px solid var(--roxo); border-radius: 6px;
  padding: 3px 10px; font: 13px var(--mono); color: var(--roxo-claro);
}
.ciclo-dia b { font: 18px var(--display); color: #fff; margin-left: 2px; }
.ciclo-hoje { font-size: 13px; color: var(--texto-dim); }
.ciclo-hoje b { color: #fff; }
.ciclo-info { margin: 0; }
.ciclo-hist { margin: 0; font-family: var(--mono); font-size: 11px; }

/* desfazer */
.btn-desfazer {
  position: absolute; left: 132px; bottom: 44px; z-index: 6;
  background: rgba(18,15,26,.95); border: 1px solid var(--linha); border-radius: 8px;
  padding: 8px 14px; font-family: var(--mono); font-size: 15px;
}
.btn-desfazer:hover { border-color: var(--roxo); color: var(--roxo-claro); }

/* seções do painel que abrem e fecham */
.bloco h2.dobra { cursor: pointer; display: flex; justify-content: space-between; align-items: center; user-select: none; }
.bloco h2.dobra::after { content: '▾'; font-size: 13px; color: var(--texto-dim); transition: transform .15s; }
.bloco.fechado h2.dobra { margin-bottom: 0; }
.bloco.fechado h2.dobra::after { transform: rotate(-90deg); }
.bloco.fechado > :not(h2) { display: none !important; }

/* painel lateral escondido (computador) */
.so-desktop { display: inline-block; }
body.painel-fechado .corpo { grid-template-columns: 92px 1fr 0; }
body.painel-fechado .painel { display: none; }

/* alça do painel no celular */
.painel-alca { display: none; }

/* toque: alvos maiores em qualquer tela de toque */
@media (pointer: coarse) {
  .ficha-cabeca { position: relative; }
  .ficha-cabeca::before { content: ''; position: absolute; inset: -14px; border-radius: 50%; }
  .camera button { height: 46px; font-size: 17px; }
  .btn-fantasma { padding: 9px 14px; }
  .quebras-botoes .btn-fantasma, .diario-ctrl .btn-fantasma { padding: 8px 12px; }
  .ordem-persg button { height: 30px; font-size: 12px; }
  .lista-seres li { padding: 9px 6px; }
}

@media (max-width: 860px) {
  .so-desktop { display: none !important; }
  body.painel-fechado .corpo { grid-template-columns: 1fr; }
  body.painel-fechado .painel { display: block; }
  .btn-painel { font-size: 15px; padding: 9px 14px; border-color: var(--roxo); background: var(--roxo-escuro); }
  .painel { height: 80%; padding-top: 30px; }
  .painel-alca {
    display: block; position: absolute; left: 0; right: 0; top: 0; height: 26px;
    background: none; border: 0; touch-action: none;
  }
  .painel-alca span { display: block; width: 52px; height: 5px; border-radius: 3px; background: var(--roxo); margin: 9px auto 0; opacity: .8; }
  .camera { grid-template-columns: repeat(4, 48px); gap: 6px; }
  .camera button { height: 46px; font-size: 17px; }
  .btn-dados { left: 10px; bottom: 112px; padding: 11px 16px; font-size: 16px; }
  .btn-desfazer { left: 128px; bottom: 112px; padding: 11px 14px; font-size: 16px; }
  .painel-dados { bottom: 168px; }
  .painel-dados input, .dados-campos input { font-size: 18px; padding: 10px; }
  .painel-dados .btn-roxo, .painel-dados .btn-fantasma { padding: 12px; font-size: 16px; }
  .cartao { bottom: 166px; max-height: 45vh; overflow-y: auto; }
  .cartao .acoes button, .cartao .acoes select { font-size: 14px; padding: 8px 10px; }
  .faixa-persg, .faixa-protocolo { font-size: 12px; letter-spacing: .06em; }
  .minha-vez .btn-fantasma { width: 100%; padding: 12px; }
  .lista-diario { max-height: 260px; }
}
.quebras.ciclo { padding: 10px; margin-bottom: 10px; border-radius: 8px; background: #0b0910; border: 1px solid var(--linha); }

/* =========================================================
   SÍMBOLO DO ECO (todos veem; troca de forma conforme a Balança)
   ========================================================= */
.eco-simbolo {
  position: relative; flex: none; margin-left: auto; margin-right: 14px;
  height: calc(var(--topo-h) - 6px); aspect-ratio: 2 / 3; z-index: 31;
  padding: 0; border: 0; background: transparent; cursor: help;
  mix-blend-mode: screen;   /* o preto da imagem some no fundo do mapa */
}
.eco-simbolo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transition: opacity 1.6s ease;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at center, #000 78%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 50% at center, #000 78%, transparent 100%);
}
.eco-simbolo img.ativo { opacity: 1; }
.eco-simbolo.consagrado { animation: ecoPulso 2.8s ease-in-out infinite; }
@keyframes ecoPulso { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.eco-nome {
  position: absolute; right: 0; top: 100%; margin-top: 6px; z-index: 32;
  white-space: nowrap; font: 12px var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--texto); background: rgba(7,6,10,.92); border: 1px solid var(--linha);
  padding: 2px 8px; border-radius: 4px; opacity: 0; pointer-events: none; transition: opacity .2s;
}
.eco-simbolo:hover .eco-nome, .eco-simbolo:focus-visible .eco-nome, .eco-simbolo.mostra .eco-nome { opacity: 1; }

/* =========================================================
   BALANÇA DO ECO (painel do Mestre)
   ========================================================= */
.balanca { display: grid; grid-template-columns: 54px 1fr 54px; gap: 8px; align-items: center; margin-bottom: 10px; }
.bal-lado { display: grid; justify-items: center; gap: 2px; text-align: center; }
.bal-lado svg { width: 44px; height: 44px; }
.bal-lado span { font: 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.bal-lado b { font: 15px var(--mono); }
.bal-mae span, .bal-mae b { color: #d9a3a3; }
.bal-rei span, .bal-rei b { color: #e3c56a; }
.bal-meio { display: grid; gap: 6px; }
.bal-meio input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border-radius: 5px;
  background: linear-gradient(90deg, #6E2A2A 0%, #6E2A2A 10%, #3b2366 40%, #3b2366 60%, #B8962E 90%, #B8962E 100%);
  outline: none;
}
.bal-meio input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: #ece6f7; border: 3px solid #8b5cf6; cursor: pointer;
}
.bal-meio input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #ece6f7; border: 3px solid #8b5cf6; cursor: pointer; }
.bal-estado { margin: 0; text-align: center; font: 13px var(--mono); color: var(--roxo-claro); }
.bal-estado.rei { color: #e3c56a; }
.bal-estado.mae { color: #e08a8a; }
.bal-botoes { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; margin-bottom: 10px; }
.bal-botoes .btn-fantasma { padding: 6px 8px; font-size: 13px; }

/* =========================================================
   APAGÃO
   ========================================================= */
.lista-apagao { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin-bottom: 6px; }
.lista-apagao small { display: block; font: 10px var(--mono); color: var(--texto-dim); }
#btnApagao { margin-top: 6px; }
/* só a planta escurece; as fichas visíveis continuam acesas */
body.apagao .stage-base, body.apagao .sala, body.apagao .corredor, body.apagao .macico,
body.apagao .parede, body.apagao .saida { opacity: .3; transition: opacity .6s; }
body.apagao .palco-area::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.6) 100%);
}
body.apagao-queda .ficha { opacity: 0 !important; transition: opacity .3s; }
.tela-apagao {
  position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; pointer-events: none;
  background: #000; animation: queda 3.2s steps(1) forwards;
}
.tela-apagao span { font: 20px var(--mono); letter-spacing: .4em; color: #ff3b5c; text-shadow: 0 0 12px #ff3b5c; }
@keyframes queda {
  0% { opacity: 1; } 8% { opacity: .2; } 14% { opacity: 1; } 22% { opacity: .5; } 30% { opacity: 1; }
  70% { opacity: .9; } 85% { opacity: .5; } 100% { opacity: 0; }
}
.faixa-apagao {
  position: fixed; left: 0; right: 0; top: var(--topo-h); z-index: 28;
  text-align: center; padding: 6px; font-family: var(--mono); letter-spacing: .12em; font-size: 13px;
  background: #0b0b0b; color: #ff9fb2; border-bottom: 1px solid #5a1f2a;
}
body.em-persg .faixa-apagao { top: calc(var(--topo-h) + 28px); }

/* fichas em fileira: só mostram o nome quando selecionadas, ao passar o mouse ou se forem do próprio jogador */
.ficha.em-fila .ficha-nome { display: none; }
.ficha.em-fila.selecionada .ficha-nome, .ficha.em-fila.minha .ficha-nome, .ficha.em-fila:hover .ficha-nome { display: block; }

/* aba da gaveta (celular) */
.aba-painel { display: none; }

@media (max-width: 860px) {
  /* nomes curtos: no celular a sala mostra só o CN; tocar abre o cartão */
  .sala-nome, .sala-el, .mostra-elementos .sala-el, .sala-oculta { display: none !important; }
  .sala-cn { font-size: 40px; }
  .sala.desconhecida .sala-cn { font-size: 22px; }
  .aba-painel {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; height: 48px;
    background: #17121f; border: 0; border-top: 1px solid var(--roxo); border-radius: 14px 14px 0 0;
    font: 13px var(--mono); letter-spacing: .08em; color: var(--roxo-claro); touch-action: none;
  }
  .aba-alca { display: block; width: 44px; height: 4px; border-radius: 2px; background: var(--roxo); margin: 0 auto 6px; opacity: .8; }
  .palco-area { padding-bottom: 48px; }
  .camera { bottom: 58px; }
  .btn-dados, .btn-desfazer { bottom: 162px; }
  .painel-dados { bottom: 218px; }
  .cartao { bottom: 216px; }
  .faixa-apagao { font-size: 11px; letter-spacing: .05em; }
}

/* câmera com o botão "minha ficha" */
.camera { grid-template-columns: repeat(5, 44px); }
@media (max-width: 860px) { .camera { grid-template-columns: repeat(5, 46px); } .camera button { height: 44px; } }

/* fichas em fileira ficam um pouco menores para caber mais por fila */
.ficha.em-fila { --kf: .7; }
.ficha.em-fila.selecionada, .ficha.em-fila.arrastada { --kf: 1; }

/* =========================================================
   CHAT
   ========================================================= */
.btn-chat { position: relative; }
.chat-badge {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: #ff3b5c; color: #fff; font: 11px/18px var(--mono); text-align: center;
}
.painel-chat {
  position: fixed; right: 0; top: var(--topo-h); bottom: 0; width: 370px; z-index: 40;
  background: var(--painel); border-left: 1px solid var(--roxo);
  display: flex; flex-direction: column; box-shadow: -10px 0 40px rgba(0,0,0,.5);
}
.chat-topo { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px 6px; }
.chat-topo h2 { margin: 0; font: 700 15px var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--roxo-claro); }
.chat-topo .fechar { background: none; border: 0; font-size: 22px; color: var(--texto-dim); }
.chat-abas { display: flex; gap: 4px; padding: 0 10px; border-bottom: 1px solid var(--linha); }
.chat-abas button {
  flex: 1; background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 4px;
  font-size: 13px; color: var(--texto-dim); position: relative;
}
.chat-abas button.ativo { color: #fff; border-bottom-color: var(--roxo); }
.chat-abas .n { margin-left: 5px; background: #ff3b5c; color: #fff; border-radius: 8px; padding: 0 5px; font: 10px/15px var(--mono); }
.chat-dica { margin: 6px 14px; font-size: 12px; color: var(--texto-dim); }
.chat-lista { list-style: none; margin: 0; padding: 4px 12px; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.chat-lista li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: start; }
.chat-lista li.vazio { display: block; font-style: italic; color: var(--texto-dim); font-size: 13px; }
.chat-lista .bola { width: 30px; height: 30px; border-radius: 50%; background: var(--cor) center / cover; border: 2px solid var(--cor); display: inline-block; }
.chat-lista .msg { background: #17121f; border-radius: 8px; padding: 6px 9px; min-width: 0; overflow-wrap: break-word; }
.chat-lista li.meu .msg { background: #22183a; }
.chat-lista li.dado .msg { border-left: 3px solid #f5c84c; }
.msg-topo { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.msg-topo b { font-size: 13px; }
.msg-topo small { font: 11px var(--mono); color: var(--roxo-claro); }
.msg-topo time { font: 11px var(--mono); color: var(--texto-dim); margin-left: auto; }
.msg-txt { font-size: 14px; white-space: pre-wrap; word-break: break-word; margin-top: 2px; }
.responder { background: #221b2e; border: 1px solid var(--linha); border-radius: 4px; font-size: 11px; padding: 1px 6px; }
.chat-resp { margin: 0 12px; padding: 5px 8px; font-size: 12px; border-radius: 6px; background: rgba(139,92,246,.15); border: 1px solid var(--roxo); }
.chat-resp button { background: none; border: 0; color: var(--texto-dim); float: right; }
.chat-form { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--linha); }
.chat-form input { flex: 1; background: #0b0910; border: 1px solid var(--linha); color: var(--texto); border-radius: 6px; padding: 9px; font: 15px var(--corpo); }
.apagar-chat { margin: 0 12px 12px; }

/* =========================================================
   RELÓGIO, SUA VEZ, MEIA-NOITE
   ========================================================= */
.relogio {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 3;
  font: 15px var(--mono); letter-spacing: .1em; padding: 4px 12px; border-radius: 999px;
  background: rgba(7,6,10,.85); border: 1px solid var(--linha); color: var(--roxo-claro);
}
.relogio b { color: #fff; font-weight: 400; }
body.em-persg .relogio { top: 46px; }
.relogio-ctrl { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.relogio-grande { font: 30px var(--mono); color: #fff; letter-spacing: .06em; }
.relogio-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; flex: 1; }
.relogio-botoes .btn-fantasma { padding: 5px 6px; font-size: 13px; }
.sua-vez {
  position: absolute; inset: 0; z-index: 9; display: grid; place-content: center; text-align: center; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(139,92,246,.35), rgba(7,6,10,.2) 70%);
}
.sua-vez span { font: 700 clamp(42px, 9vw, 92px) var(--display); color: #fff; letter-spacing: .08em; text-shadow: 0 0 30px var(--roxo); }
.sua-vez small { font: 15px var(--mono); color: var(--roxo-claro); letter-spacing: .2em; text-transform: uppercase; }
.sua-vez.anima span { animation: vezPop .5s ease-out; }
@keyframes vezPop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.faixa-meianoite {
  position: fixed; left: 0; right: 0; top: 40%; z-index: 65; text-align: center; padding: 18px;
  font: 22px var(--mono); letter-spacing: .25em; color: #fff; background: rgba(10,0,4,.92);
  border-top: 1px solid #ff3b5c; border-bottom: 1px solid #ff3b5c; text-shadow: 0 0 14px #ff3b5c;
}

/* =========================================================
   PORTAS NOS CORREDORES
   ========================================================= */
.porta-chao { position: absolute; transform: translateZ(1.6px); display: grid; place-items: center; }
.porta-chao span { font-size: 22px; transform: rotateZ(calc(var(--rot) * -1)); }
.porta-chao.porta-t { background: repeating-linear-gradient(45deg, #59606b 0 6px, #3a3f47 6px 12px); }
.porta-chao.porta-d { background: repeating-linear-gradient(45deg, #6b5136 0 5px, #3f2e1d 5px 11px); }
.porta-chao.porta-c { background: radial-gradient(circle, #a33a3a, #4a1212); }
.parede.porta-parede.porta-t { background: linear-gradient(180deg, #9aa3b2, #4b525e); border-top-color: #e2e8f0; }
.parede.porta-parede.v.porta-t { background: linear-gradient(90deg, #4b525e, #9aa3b2); border-right-color: #e2e8f0; }
.parede.porta-parede.porta-d { background: linear-gradient(180deg, #8a6a3a, #3f2e1d); border-top: 2px dashed #c9a46a; clip-path: polygon(0 30%, 18% 0, 35% 25%, 55% 5%, 75% 30%, 100% 10%, 100% 100%, 0 100%); }
.parede.porta-parede.v.porta-d { border-right: 2px dashed #c9a46a; clip-path: none; }
.parede.porta-parede.porta-c { background: linear-gradient(180deg, #c04848, #5a1414); border-top-color: #ffb3b3; }
.parede.porta-parede.v.porta-c { background: linear-gradient(90deg, #5a1414, #c04848); border-right-color: #ffb3b3; }
/* porta de ferro fechada (padrão) e abrindo */
.porta-chao.porta-f, .porta-chao.porta-p { background: linear-gradient(180deg, #4a4f58, #24272d); box-shadow: inset 0 0 0 1px #7b818c; }
.porta-chao.porta-p { animation: porta-abrindo .5s ease-in-out infinite alternate; }
@keyframes porta-abrindo { to { background: linear-gradient(180deg, #6b7280, #33373f); } }
.porta-chao .porta-secreta { position: absolute; font-style: normal; font-size: 13px; top: -14px; right: -14px; opacity: .85; transform: rotateZ(calc(var(--rot) * -1)); filter: drop-shadow(0 0 3px #000); }
.parede.porta-parede.porta-f, .parede.porta-parede.porta-p { background: linear-gradient(180deg, #8a909b, #3a3e46); border-top-color: #c9ced6; }
.parede.porta-parede.v.porta-f, .parede.porta-parede.v.porta-p { background: linear-gradient(90deg, #3a3e46, #8a909b); border-right-color: #c9ced6; }
.corredor.corr-fechado { filter: brightness(.55) saturate(.6); }
/* duas portas por corredor (uma em cada ponta): folhas de aço que correm para os lados; aberta = só o batente e as
   folhas recolhidas. A animação roda uma vez, quando o estado muda (as duas pontas juntas) */
.porta-chao .folha { position: absolute; background: linear-gradient(180deg, #5d636d, #2b2f36); box-shadow: inset 0 0 0 1px #8a909b; pointer-events: none; }
.porta-chao.eixo-h .folha { left: 0; right: 0; height: 50%; }
.porta-chao.eixo-v .folha { top: 0; bottom: 0; width: 50%; }
.porta-chao.eixo-h .f1 { top: 0; } .porta-chao.eixo-h .f2 { bottom: 0; }
.porta-chao.eixo-v .f1 { left: 0; } .porta-chao.eixo-v .f2 { right: 0; }
.porta-chao.porta-a { background: none; box-shadow: inset 0 0 0 1px rgba(150,158,170,.55); }
.porta-chao.porta-a.eixo-h .folha { height: 15%; }
.porta-chao.porta-a.eixo-v .folha { width: 15%; }
.porta-chao.porta-p .folha { filter: brightness(1.25); }
.porta-chao span, .porta-chao .botao-2d { z-index: 1; }
.porta-chao.agora.eixo-h .folha { animation: folha-h .7s ease-in-out; }
.porta-chao.agora.eixo-v .folha { animation: folha-v .7s ease-in-out; }
.porta-chao.agora.porta-a { --de: 50%; }
.porta-chao.agora:not(.porta-a) { --de: 15%; }
@keyframes folha-h { from { height: var(--de); } }
@keyframes folha-v { from { width: var(--de); } }
@media (prefers-reduced-motion: reduce) { .porta-chao.agora .folha { animation: none; } }
.dica-porta { font-size: 13px; color: var(--texto-dim); margin: 6px 0; }
.btn-botao-vermelho { border: 1px solid #d1121f !important; color: #ffe3e6 !important; background: #3a0d14 !important; border-radius: 5px; padding: 6px 12px; font-weight: 600; }
.so-mestre-txt { font-size: 12px; color: #c9a7ff; margin: 8px 0 2px; }
.portas-acoes button.on, .arq-lista-mestre button.on { background: var(--roxo-escuro) !important; border-color: var(--roxo) !important; }

/* =========================================================
   SALAS (selos do Mestre), SINAIS NO MAPA
   ========================================================= */
.sala.sem-sinal .sala-tinta { opacity: .5 !important; background: repeating-linear-gradient(135deg, rgba(0,0,0,.6) 0 8px, rgba(255,59,92,.18) 8px 16px); }
.sala.sem-sinal .sala-rotulo::before {
  content: '⌁ sem sinal'; display: block; margin-bottom: 4px; font: 13px var(--mono); color: #ff9fb2;
}
.sinal-ponto { position: absolute; width: 0; height: 0; transform: translateZ(3px); pointer-events: none; }
.sinal-anel {
  position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid #f5c84c; box-shadow: 0 0 18px #f5c84c; animation: sinalPulso 1.1s ease-out infinite;
}
.sinal-ponto.enviado .sinal-anel { border-color: var(--roxo-claro); box-shadow: 0 0 18px var(--roxo); }
.sinal-nome {
  position: absolute; left: 26px; top: -10px; white-space: nowrap; font: 14px var(--mono);
  background: rgba(7,6,10,.9); border: 1px solid #f5c84c; padding: 1px 6px; border-radius: 4px;
  transform: rotateZ(calc(var(--rot) * -1));
}
@keyframes sinalPulso { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

/* =========================================================
   CARTÃO: seções do Mestre, ficha, arquivos
   ========================================================= */
.cartao { max-height: calc(100% - 110px); overflow-y: auto; }
.cartao-sec { margin-top: 10px; border-top: 1px solid var(--linha); padding-top: 8px; }
.cartao-sec summary { cursor: pointer; font: 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--roxo-claro); }
.cartao-sec[open] summary { margin-bottom: 8px; }
.campo-linha { display: grid; gap: 3px; font-size: 12px; color: var(--texto-dim); margin-bottom: 8px; }
.campo-linha input, .campo-linha select {
  background: #0b0910; border: 1px solid var(--linha); color: var(--texto); border-radius: 5px; padding: 6px 8px; font: 13px var(--corpo);
}
.cartao .chave { font-size: 13px; margin-bottom: 6px; }
.arq-lista-mestre { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.arq-lista-mestre li { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 13px; }
.arq-lista-mestre .arq-t { flex: 1 1 100%; }
.arq-lista-mestre button { font-size: 11px; padding: 3px 7px; border-radius: 4px; background: #1b1526; border: 1px solid var(--linha); }
.arq-lista-mestre button.perigo:hover { border-color: var(--perigo); color: var(--perigo); }
.arq-novo { display: grid; gap: 6px; }
.arq-novo input, .arq-novo textarea { background: #0b0910; border: 1px solid var(--linha); color: var(--texto); border-radius: 5px; padding: 6px 8px; font: 13px var(--corpo); }
.arq-novo input[type=file] { font-size: 12px; padding: 4px; }
.arq-qtd { color: #fff; }
.dlg-arquivo { width: min(620px, 94vw); }
.arq-kicker { margin: 0 0 4px; font: 11px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--roxo-claro); }
#arqImg { display: block; max-width: 100%; max-height: 60vh; margin: 0 auto 12px; border-radius: 6px; border: 1px solid var(--linha); }
.arq-texto { white-space: pre-wrap; font: 15px/1.55 var(--corpo); max-height: 40vh; overflow-y: auto; }

.ficha-edit { display: grid; gap: 6px; }
.ficha-edit label { display: grid; grid-template-columns: 38px 1fr 10px 1fr; gap: 4px; align-items: center; font: 12px var(--mono); color: var(--texto-dim); }
.ficha-edit label:last-child { grid-template-columns: 38px 1fr; }
.ficha-edit input { width: 100%; background: #0b0910; border: 1px solid var(--linha); color: var(--texto); border-radius: 4px; padding: 4px 6px; font: 13px var(--mono); }
.barra { display: grid; grid-template-columns: 36px 1fr auto; gap: 8px; align-items: center; margin-top: 6px; font: 12px var(--mono); }
.barra-nex { grid-template-columns: 36px auto; }
.barra-r { color: var(--texto-dim); }
.barra-trilho { height: 9px; border-radius: 5px; background: #221b2e; overflow: hidden; }
.barra-cheia { height: 100%; border-radius: 5px; transition: width .4s; }
.barra-pv .barra-cheia { background: linear-gradient(90deg, #8f1d2c, #ff3b5c); }
.barra-san .barra-cheia { background: linear-gradient(90deg, #3b2366, #8b5cf6); }
.barra-pe .barra-cheia { background: linear-gradient(90deg, #8a6a14, #f5c84c); }
.barra b { color: #fff; font-weight: 400; }
.minha-topo { display: flex; gap: 10px; align-items: center; }
.minha-topo .bola { width: 38px; height: 38px; border-radius: 50%; background: var(--cor) center / cover; border: 3px solid var(--cor); display: inline-block; }
.minha-topo strong { display: block; }
.minha-topo .sub { font: 12px var(--mono); color: var(--texto-dim); }
.cartao-ficha { margin-top: 6px; }

/* exposição */
.tabela-expo table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 8px; }
.tabela-expo th { font: 10px var(--mono); color: var(--texto-dim); font-weight: 400; padding: 3px 2px; text-align: center; }
.tabela-expo td { padding: 4px 2px; text-align: center; border-top: 1px solid #1a1424; font-family: var(--mono); }
.tabela-expo td:first-child { text-align: left; font-family: var(--corpo); }
.el-ponto { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--cor); margin: 0 auto 2px; }

/* =========================================================
   TELA DA MESA (modo TV)
   ========================================================= */
/* elevador e painel somem (display: none): o mapa é o único item da grade e ocupa tudo */
body.tv .corpo { grid-template-columns: 1fr; grid-template-rows: 1fr; }
body.tv .elevador, body.tv .painel, body.tv .topo-dir, body.tv .camera, body.tv .btn-dados,
body.tv .btn-desfazer, body.tv .dica, body.tv .aba-painel, body.tv #perfil, body.tv .cartao { display: none !important; }
body.tv .andar-legenda span { font-size: 34px; }
/* Modo Tela: sem nada do 3D por cima do mapa (barra, dicas, contadores, menus) */
body.tv #s3d .s3d-topo, body.tv #s3d .s3d-barra, body.tv #s3dDica, body.tv #s3dFps, body.tv #s3dDb, body.tv #s3dMetros,
body.tv #s3dPrompt, body.tv #s3dToast, body.tv #s3dHab, body.tv #s3dJoy, body.tv #s3dPainel, body.tv #s3dMenu, body.tv #s3dMira,
body.tv #s3dGaveta, body.tv #s3dOpcoes, body.tv .btn-chat, body.tv #painelChat, body.tv #aviso, body.tv #suaVez,
body.tv #faixaConexao { display: none !important; }
body.tv #stage { transition: transform .9s ease; }
body.tv.tela-quieta, body.tv.tela-quieta * { cursor: none !important; }
#telaCapa { position: fixed; z-index: 9999; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; gap: 8px;
  align-items: center; text-align: center; padding: 22px 28px; max-width: min(520px, calc(100vw - 32px)); background: rgba(10, 8, 14, .92);
  border: 1px solid #6b4fb0; border-radius: 14px; color: #efe8fa; font: 15px/1.4 system-ui, sans-serif; cursor: pointer !important;
  transition: all .5s ease; }
#telaCapa b { font-size: 22px; }
#telaCapa small { opacity: .7; }
#telaCapa.canto { left: auto; top: auto; right: 16px; bottom: 16px; transform: none; padding: 8px 12px; opacity: .35; }
#telaCapa.canto span, #telaCapa.canto small { display: none; }
#telaCapa.canto b { font-size: 13px; }
#telaCapa.fora { opacity: 0; pointer-events: none; }
/* controle no bloco Mesa (Mestre) */
.tela-ctl { border: 1px solid rgba(160, 130, 230, .35); border-radius: 10px; padding: 10px 12px; margin: 10px 0; display: grid; gap: 8px; }
.tela-ctl h3 { margin: 0; font-size: 14px; }
.tela-ctl .ferramentas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.tela-st { font-size: 12px; opacity: .75; }
.tela-st.on { color: #5fd38a; opacity: 1; }
.tela-aviso { margin: 0; font-size: 12px; color: #e9b84a; }
.tela-ctl > * { min-width: 0; max-width: 100%; box-sizing: border-box; margin-left: 0; margin-right: 0; }
.tela-ctl select { width: 100%; max-width: 100%; box-sizing: border-box; }
.tela-ctl .chave { box-sizing: border-box; width: 100%; }

@media (max-width: 860px) {
  .painel-chat { width: auto; left: 0; top: var(--topo-h); z-index: 45; border-left: 0; }
  .btn-chat { padding: 9px 10px; }
  .relogio { top: 10px; font-size: 13px; }
  body.tv .corpo { grid-template-rows: 1fr; }
}
/* chat aberto no computador: o símbolo do Eco e o cartão não ficam por baixo */
@media (min-width: 861px) {
}
.cartao { max-height: calc(100% - 190px); }

/* o símbolo do Eco mora no topo, no canto superior direito, fora do mapa */
.topo { justify-content: flex-start; }
.topo-dir { margin-left: 0; }
@media (max-width: 860px) {
  /* celular: fica no fim da faixa dos andares, à direita */
  .eco-simbolo { position: fixed; top: calc(var(--topo-h) + 4px); right: 10px; height: 56px; margin: 0; }
}
body.tv .eco-simbolo { margin-right: 0; }

/* =========================================================
   ABAS DO MESTRE
   ========================================================= */
.abas-mestre {
  position: sticky; top: -16px; z-index: 5; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  margin: -16px -16px 14px; padding: 10px 12px 8px; background: var(--painel); border-bottom: 1px solid var(--roxo);
}
.abas-mestre { grid-template-columns: repeat(5, 1fr); }
.abas-mestre button { letter-spacing: .02em; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abas-mestre button {
  background: #1b1526; border: 1px solid var(--linha); border-radius: 6px; padding: 7px 2px;
  font: 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--texto-dim);
}
.abas-mestre button.ativo { background: var(--roxo-escuro); border-color: var(--roxo); color: #fff; }
.painel section.fora-da-aba { display: none !important; }
.painel .abas-mestre + .bloco, .painel section.bloco:not(.fora-da-aba) ~ section.bloco { }
body.mestre .painel .bloco + .bloco { margin-top: 18px; }

/* topo: botões redondos de som e ajuda */
.btn-icone { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; font-size: 15px; border-radius: 50%; }

/* =========================================================
   ALERTAS, FAIXAS (conexão e "ver como")
   ========================================================= */
.alertas-mestre { position: fixed; right: 16px; top: calc(var(--topo-h) + 12px); z-index: 66; display: grid; gap: 8px; width: min(360px, 92vw); pointer-events: none; }
.alerta-mestre {
  pointer-events: auto; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 8px;
  background: #2a1016; border: 1px solid #ff9f43; box-shadow: 0 0 22px rgba(255,159,67,.35); font-size: 14px;
  animation: vezPop .3s ease-out;
}
.alerta-mestre span { flex: 1; }
.alerta-mestre span::before { content: '⚑ '; color: #ffb37a; }
.alerta-mestre button { background: none; border: 0; color: var(--texto-dim); font-size: 18px; line-height: 1; }
.faixa-conexao {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 64; text-align: center; padding: 10px;
  font: 13px var(--mono); letter-spacing: .1em; color: #fff; background: #8f1d2c; border-top: 1px solid #ff6b7f;
}
.faixa-espiar {
  position: fixed; left: 50%; top: calc(var(--topo-h) + 8px); transform: translateX(-50%); z-index: 33;
  padding: 6px 12px; border-radius: 999px; font: 13px var(--mono); background: #0b3b36; border: 1px solid #3ddc97; color: #c8ffe9;
}
.faixa-espiar button { background: none; border: 0; color: #fff; text-decoration: underline; font: inherit; }
body.espiando .viewport { box-shadow: inset 0 0 0 3px #3ddc97; }

/* =========================================================
   PRÉVIA DO CAMINHO
   ========================================================= */
.previa-svg { position: absolute; left: 0; top: 0; transform: translateZ(1.8px); pointer-events: none; overflow: visible; }
.previa-linha { fill: none; stroke: var(--cor-trilha, #f5c84c); stroke-width: 4; stroke-dasharray: 10 8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 5px var(--brilho-trilha, var(--cor-trilha, #f5c84c))); }
.previa-rotulo { position: absolute; width: 0; height: 0; transform: translateZ(34px); transform-style: preserve-3d; pointer-events: none; }
.previa-rotulo span {
  position: absolute; left: 22px; top: -36px; white-space: nowrap; font: 15px var(--mono); padding: 2px 8px; border-radius: 5px;
  background: rgba(7,6,10,.92); border: 1px solid var(--brilho-trilha, var(--cor-trilha, #f5c84c)); color: #fff;
  transform: rotateZ(calc(var(--rot) * -1)) rotateX(calc(var(--tilt) * -1)) scale(var(--k, 1)); transform-origin: 0 100%;
}
.previa-rotulo.no-limite span { border-color: #ff3b5c; color: #ffb3c0; }
.previa-svg.some, .previa-rotulo.some { opacity: 0; transition: opacity 1.2s; }

/* =========================================================
   GRUPO, GATILHOS, RASTRO, SINAL DOS FILHOS
   ========================================================= */
.ficha.no-grupo .ficha-cabeca { outline: 3px solid #3ddc97; outline-offset: 3px; }
.grupo-info { color: #3ddc97; }
.sala.com-gatilho .sala-rotulo::after { content: '⚑ gatilho'; display: inline-block; margin: 6px 0 0 6px; font: 13px var(--mono); color: #ffb37a; background: rgba(0,0,0,.45); padding: 1px 6px; border-radius: 4px; border: 1px solid #8a5a2a; }
.sala.com-nota.com-gatilho .sala-rotulo::after { content: '✎ anotação · ⚑ gatilho'; }
.sala.rastro, .corredor.rastro { box-shadow: inset 0 0 0 2px rgba(255,80,100, calc(var(--rastro, 0) * .8)), inset 0 0 26px rgba(255,40,60, calc(var(--rastro, 0) * .45)); }
.sala.rastro .sala-tinta { opacity: calc(var(--rastro, 0) * .25) !important; background: repeating-radial-gradient(circle at 30% 70%, rgba(255,60,80,.5) 0 3px, transparent 3px 14px) !important; }
.sinal-ponto.filhos .sinal-anel { border-color: #ff3b5c; box-shadow: 0 0 18px #ff3b5c; }
.sinal-ponto.filhos .sinal-nome { border-color: #ff3b5c; }
.lote-filhos { display: flex; gap: 8px; align-items: center; }
.lote-filhos .btn-fantasma { flex: 1; }
.lote-filhos label { font: 12px var(--mono); color: var(--texto-dim); display: flex; gap: 4px; align-items: center; }
.lote-filhos input { width: 52px; background: #0b0910; border: 1px solid var(--linha); color: var(--texto); border-radius: 4px; padding: 4px; font: 13px var(--mono); }

/* cenas */
.cena-nova { display: flex; gap: 6px; margin-bottom: 8px; }
.cena-nova input { flex: 1; background: #0b0910; border: 1px solid var(--linha); color: var(--texto); border-radius: 6px; padding: 7px; font: 13px var(--corpo); }
.lista-cenas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lista-cenas li { display: flex; gap: 6px; align-items: center; padding: 6px 8px; border-radius: 6px; background: #17121f; }
.lista-cenas li span { flex: 1; min-width: 0; }
.lista-cenas b { display: block; font-size: 14px; }
.lista-cenas small { font: 11px var(--mono); color: var(--texto-dim); }
.lista-cenas .btn-fantasma { padding: 4px 9px; font-size: 12px; }

/* conectados */
.lista-conectados { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; font-size: 13px; color: var(--texto-dim); }
.lista-conectados li.on { color: var(--texto); }
.ponto-on { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #3a3247; margin-right: 6px; vertical-align: middle; }
.ponto-on.on, .lista-conectados li.on .ponto-on { background: #3ddc97; box-shadow: 0 0 6px #3ddc97; }

/* caderno */
.caderno { width: 100%; background: #0b0910; border: 1px solid var(--linha); color: var(--texto); border-radius: 6px; padding: 8px; font: 14px/1.5 var(--corpo); resize: vertical; }

/* ajuda */
.dlg-ajuda { width: min(560px, 94vw); }
.ajuda-texto h3 { font: 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--roxo-claro); margin: 14px 0 6px; }
.ajuda-texto ul { margin: 0; padding-left: 18px; display: grid; gap: 5px; font-size: 14px; }

/* =========================================================
   LOJA DO MAURÍCIO
   ========================================================= */
.btn-loja { width: 100%; margin-top: 10px; border-color: #b8962e; color: #f1d98a; }
.dlg-loja { width: min(1100px, 96vw); max-height: 92vh; padding: 0; overflow: hidden; }
.dlg-loja[open] { display: flex; flex-direction: column; }
.loja-topo { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px 6px; }
.loja-topo h2 { margin: 0; font: 700 22px var(--display); letter-spacing: .05em; }
.loja-topo .fechar { background: none; border: 0; font-size: 26px; color: var(--texto-dim); }
.loja-aviso { margin: 0 18px 8px; font-size: 13px; color: #f1d98a; }
.loja-mestre { padding: 0 18px; }
.loja-mestre .cartao-sec { border: 1px solid var(--linha); border-radius: 8px; padding: 8px 12px; margin: 0 0 10px; }
.loja-custo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.loja-mestre textarea { background: #0b0910; border: 1px solid var(--linha); color: var(--texto); border-radius: 5px; padding: 6px 8px; font: 13px var(--corpo); resize: vertical; }
.loja-grade { overflow-y: auto; padding: 4px 18px 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.loja-card { background: #17121f; border: 1px solid var(--linha); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.loja-card.oculto { opacity: .65; border-style: dashed; }
.loja-card img { width: 100%; height: 170px; object-fit: cover; object-position: center 30%; display: block; background: #0b0910; }
.loja-corpo { padding: 10px 12px 12px; display: grid; gap: 6px; }
.loja-corpo h3 { margin: 0; font: 700 15px var(--display); letter-spacing: .03em; }
.loja-preco { margin: 0; font: 13px var(--mono); color: #f1d98a; }
.loja-desc { margin: 0; font-size: 13px; color: var(--texto-dim); white-space: pre-wrap; }
.loja-op { width: 100%; border-collapse: collapse; font-size: 13px; }
.loja-op th { font: 10px var(--mono); color: var(--texto-dim); text-align: left; font-weight: 400; padding: 2px 4px; }
.loja-op td { padding: 4px; border-top: 1px solid #221b2e; vertical-align: middle; }
.loja-op td small { display: block; font: 11px var(--mono); color: #f1d98a; }
.loja-op tr.caro td:first-child { color: var(--texto-dim); }
.btn-pedir { background: #2b2410; border: 1px solid #b8962e; color: #f1d98a; border-radius: 4px; padding: 3px 9px; font-size: 12px; }
.loja-op tr.caro .btn-pedir { opacity: .5; }
.loja-acoes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.loja-acoes button { font-size: 11px; padding: 3px 8px; border-radius: 4px; background: #1b1526; border: 1px solid var(--linha); color: var(--texto); }
.loja-acoes button.perigo:hover { border-color: var(--perigo); color: var(--perigo); }

@media (max-width: 860px) {
  .btn-icone { width: 30px; height: 30px; font-size: 13px; }
  .topo-dir { gap: 6px; }
  .loja-grade { grid-template-columns: 1fr; }
  .alertas-mestre { right: 8px; }
}
/* celular estreito: o título vira a sigla para caber os botões */
@media (max-width: 480px) {
  .marca h1 { font-size: 0; }
  .marca h1::before { content: 'A.C.F.'; font-size: 17px; letter-spacing: .12em; }
  .topo { padding: 0 8px; }
  .topo-dir .btn-fantasma { padding: 7px 9px; font-size: 13px; }
}
.loja-grade { grid-auto-rows: max-content; align-content: start; flex: 1; min-height: 0; }
.loja-card { min-height: max-content; }
.loja-op td:first-child { overflow-wrap: anywhere; }
.loja-op td:last-child { text-align: right; width: 1%; }

/* abas da loja: Vendas do Maurício · Melhorias ZN */
.loja-abas { display: flex; gap: 6px; padding: 4px 18px 10px; flex-wrap: wrap; }
.loja-abas button { font: 12px var(--mono); letter-spacing: .06em; padding: 6px 12px; border-radius: 6px; background: #1b1526; border: 1px solid var(--linha); color: var(--texto-dim); cursor: pointer; }
.loja-abas button.on { background: var(--roxo-escuro); border-color: var(--roxo); color: var(--texto); }
/* cartões das melhorias: a imagem é a própria placa, mostrada inteira */
.melhoria-card .melh-img { position: relative; aspect-ratio: 1 / 1; background: #0b0910; }
.melhoria-card .melh-img img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.melhoria-card.comprada .melh-img img { filter: saturate(.55) brightness(.8); }
.selo-comprado { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-12deg); font: 700 22px var(--display); letter-spacing: .12em; text-transform: uppercase;
  color: #8ef0b0; border: 3px solid #8ef0b0; padding: 4px 14px; border-radius: 6px; background: rgba(7,20,12,.72); box-shadow: 0 0 18px rgba(80,220,140,.35); }
.loja-preco.ok { color: #8ef0b0; }
.melhoria-card .btn-pedir { border-color: var(--roxo) !important; }

/* botão vermelho 2D acima da porta fechada (leve: sem 3D e sem animação) */
.porta-chao { transform-style: preserve-3d; }
.porta-chao .botao-2d { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffb0b0, #ff2a3a 40%, #9e0b17 75%); border: 2px solid #2a2d33; box-shadow: 0 0 6px rgba(255,40,60,.8);
  transform: translateZ(34px) rotateZ(calc(var(--rot) * -1)) rotateX(calc(var(--tilt) * -1)); pointer-events: none; }
.porta-chao .botao-2d.apertado { background: #ff6b7a; box-shadow: 0 0 14px 4px rgba(255,60,80,.95); }

/* teclado das portas e aviso de Mestre ausente */
.teclado-porta { display: flex; gap: 6px; margin: 6px 0; }
.teclado-porta input { flex: 1; min-width: 0; font: 16px var(--mono); letter-spacing: .2em; background: #0b0910; color: #fff; border: 1px solid #6b7280; border-radius: 5px; padding: 6px 8px; }
.dica-porta.alerta { color: #ffcf7a; }

/* cofre, despensa e pedidos */
.zona-jogador:empty, .loja-zona:empty { display: none; }
.zona-jogador { margin-top: 10px; display: grid; gap: 8px; }
.loja-zona { margin: 0 18px 10px; display: grid; gap: 8px; }
.cofre-linha { margin: 0; font-size: 13px; color: #f1d98a; }
.despensa { border: 1px solid var(--linha); border-radius: 8px; padding: 8px 10px; background: #120e19; display: grid; gap: 6px; font-size: 13px; }
.despensa > b { font: 11px var(--mono); letter-spacing: .08em; color: var(--texto-dim); text-transform: uppercase; }
.despensa-linha { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.despensa-linha button { font-size: 12px; padding: 3px 10px; border-radius: 5px; background: #1b1526; border: 1px solid var(--roxo); color: var(--texto); cursor: pointer; }
.despensa-linha button:disabled { opacity: .4; border-color: var(--linha); }
.cofre-mestre { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; font-size: 13px; }
.cofre-mestre input { width: 64px; background: #0b0910; color: #fff; border: 1px solid var(--linha); border-radius: 4px; padding: 3px 6px; }
.melh-uso { margin: 0; font: 12px var(--mono); color: #8ef0b0; }
.melh-uso.usada { color: var(--texto-dim); }
.lista-pedidos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lista-pedidos li { background: #17121f; border: 1px solid var(--linha); border-radius: 8px; padding: 8px 10px; display: grid; gap: 6px; font-size: 13px; }
.lista-pedidos li.vazio { background: none; border: 0; color: var(--texto-dim); font-style: italic; }
.ped-topo { display: flex; gap: 8px; align-items: center; }
.ped-topo .bola { width: 28px; height: 28px; flex: none; }
.ped-topo small { display: block; color: var(--texto-dim); font: 11px var(--mono); }
.lista-pedidos select { width: 100%; background: #0b0910; color: var(--texto); border: 1px solid var(--linha); border-radius: 4px; padding: 4px; }

/* condições nas fichas */
.ficha-cond { position: absolute; bottom: 74px; white-space: nowrap; font-size: 15px; pointer-events: none; filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 2px #000); }
.ficha-cond:empty { display: none; }
.cond-lista { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.cond-lista span { font-size: 12px; padding: 2px 8px; border-radius: 10px; background: #2a1520; border: 1px solid #7a2a3a; }
.cond-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.cond-botoes button { font-size: 12px; padding: 4px 6px; border-radius: 5px; background: #1b1526; border: 1px solid var(--linha); color: var(--texto-dim); text-align: left; }
.cond-botoes button small { display: block; font: 10px var(--mono); }
.cond-botoes button.c1 { border-color: #ff6b81; color: #fff; background: #3a1622; }
.cond-botoes button.c2 { border-color: #c9a7ff; color: #fff; background: #241838; }

/* salas visitadas: pegadas discretas no canto */
.sala.visitada .sala-cn::after { content: ' 👣'; font-size: .7em; opacity: .55; }

/* régua */
.regua-linha { stroke: #7dd3fc; stroke-width: 5; stroke-dasharray: 10 7; stroke-linecap: round; filter: drop-shadow(0 0 4px #38bdf8); }
.regua-rotulo span { border-color: #7dd3fc !important; }
.camera button.ativo { background: var(--roxo-escuro); border-color: var(--roxo); }

/* cronômetro de decisão */
.crono-vez { position: fixed; top: calc(var(--topo-h) + 34px); left: 50%; transform: translateX(-50%); z-index: 29;
  font: 700 15px var(--mono); padding: 4px 14px; border-radius: 0 0 8px 8px; background: #241838; border: 1px solid var(--roxo); border-top: 0; color: #fff; }
.crono-vez.acabando { background: #5a3a00; border-color: #ffb020; animation: crono-pisca .5s steps(2) infinite; }
.crono-vez.esgotado { background: #5a0f1c; border-color: #ff3b5c; }
@keyframes crono-pisca { 50% { opacity: .55; } }
.crono-mestre { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; margin: 6px 0; }
.crono-mestre input { width: 64px; background: #0b0910; color: #fff; border: 1px solid var(--linha); border-radius: 4px; padding: 3px 6px; }

/* replay */
.replay-ctrl { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 4px; }
.replay-ctrl select { background: #0b0910; color: var(--texto); border: 1px solid var(--linha); border-radius: 4px; padding: 4px; }
.faixa-replay { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 40; display: flex; gap: 10px; align-items: center;
  max-width: calc(100vw - 32px); padding: 8px 12px; border-radius: 8px; background: rgba(20,14,32,.95); border: 1px solid #7dd3fc; font: 12px var(--mono); color: #e0f2fe; }
.faixa-replay span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.faixa-replay button { flex: none; background: #1b1526; border: 1px solid #7dd3fc; color: #fff; border-radius: 5px; padding: 3px 10px; }
body.em-replay .ficha { opacity: .12; }
.fantasma { position: absolute; width: 0; height: 0; transform: translateZ(3px); transition-property: left, top; transition-timing-function: ease-in-out; pointer-events: none; }
.fantasma-bola { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--cor); background: #222 center/cover; box-shadow: 0 0 14px var(--cor); transform: rotateZ(calc(var(--rot) * -1)) rotateX(calc(var(--tilt) * -1)); }
.fantasma em { position: absolute; left: 18px; top: -30px; font: 11px var(--mono); font-style: normal; white-space: nowrap; padding: 1px 5px; border-radius: 4px; background: rgba(7,6,10,.85); border: 1px solid var(--cor); color: #fff; transform: rotateZ(calc(var(--rot) * -1)) rotateX(calc(var(--tilt) * -1)); }
.fantasma.andando .fantasma-bola { box-shadow: 0 0 24px 6px var(--cor); }

.faixa-persg.acabando { background: #5a3a00; }
/* celular: com a faixa da perseguição (e do apagão/protocolo) no topo, a barra de andares desce */
@media (max-width: 860px) {
  body.em-persg .corpo { grid-template-rows: 92px 1fr; }
  body.em-persg .elevador { padding-top: 28px; }
  body.em-persg .eco-simbolo { top: calc(var(--topo-h) + 32px); }
}
@media (max-width: 860px) {
  .abas-mestre { grid-template-columns: repeat(5, 1fr) 32px; }
  .abas-mestre .fechar-abas { background: none; border: 0; font-size: 24px; color: var(--texto); padding: 0; }
}

/* fichas de cor escura (ex.: Papel, preto): contorno claro para aparecer no mapa */
.ficha.escura .ficha-cabeca { box-shadow: 0 0 0 2px var(--contorno), 0 0 12px var(--contorno); }
.ficha.escura .ficha-nome { border-color: var(--contorno); }
.ficha.escura .ficha-haste { background: var(--contorno); }

/* =========================================================
   FICHAS DE AGENTE
   ========================================================= */
.btn-fichas { white-space: nowrap; }
/* celular estreito: ícone em cima, rótulo embaixo, para todos os botões do topo caberem */
@media (max-width: 480px) {
  .topo-dir { gap: 4px; }
  .topo-dir .btn-pilha { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 4px 6px; font-size: 10.5px; line-height: 1.05; min-width: 42px; }
  .topo-dir .btn-pilha[hidden] { display: none; }
  .topo-dir .btn-pilha .ic { font-size: 15px; line-height: 1; }
  #btnMestre { font-size: 11.5px; padding: 5px 7px; line-height: 1.15; max-width: 92px; }
}
/* ---------- Fichas: identidade "Dossiê O.R.F.E.U." ----------
   Papel escuro quadriculado, rótulos de máquina de escrever, carimbos e a cor da cobaia (--ac) como destaque. */
.fx-tela {
  --fx-bg: #0d0c0f; --fx-papel: #151318; --fx-papel2: #1c1a20; --fx-papel3: #24212a;
  --fx-linha: #2e2a34; --fx-linha2: #443e4c; --fx-tinta: #ece6dc; --fx-dim: #9b9389; --fx-dim2: #6f685f;
  --fx-carimbo: #d2463a; --fx-maq: 'Special Elite', 'Courier New', monospace;
  --ac: #c9a14a; --ac-txt: #16130c;
  position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; color: var(--fx-tinta);
  background-color: var(--fx-bg);
  background-image: linear-gradient(rgba(236,230,220,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(236,230,220,.028) 1px, transparent 1px), radial-gradient(ellipse at 50% 0%, rgba(201,161,74,.07), transparent 60%);
  background-size: 26px 26px, 26px 26px, 100% 100%;
}
.fx-tela[hidden] { display: none; }
.fx-tela ::selection { background: var(--ac); color: var(--ac-txt); }
.fx-topo { display: flex; align-items: center; gap: 14px; padding: 10px 18px; border-bottom: 1px solid var(--fx-linha); background: rgba(13,12,15,.94); }
.fx-marca { display: grid; line-height: 1.15; }
.fx-k { font: 10px var(--mono); letter-spacing: .22em; color: var(--fx-dim); text-transform: uppercase; }
.fx-marca .fx-k { color: #c9a14a; }
.fx-marca b { font: 400 20px var(--fx-maq); letter-spacing: .03em; }
.fx-nav { flex: 1; display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.fx-nav button, .fx-abas-mob button { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--fx-dim); font: 13px var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 7px 10px; cursor: pointer; }
.fx-nav button:hover, .fx-abas-mob button:hover { color: var(--fx-tinta); }
.fx-nav button.on, .fx-abas-mob button.on { color: var(--fx-tinta); border-bottom-color: var(--ac); }
.fx-fechar { background: none; border: 0; color: var(--fx-dim); font-size: 28px; line-height: 1; cursor: pointer; padding: 0 6px; }
.fx-fechar:hover { color: var(--fx-tinta); }
.fx-corpo { flex: 1; overflow-y: auto; padding: 20px; }
.fx-dica { color: var(--fx-dim); font-size: 13px; margin: 0 0 14px; max-width: 900px; }
.fx-vazio { color: var(--fx-dim); text-align: center; margin-top: 60px; font: 16px var(--fx-maq); }
.fx-vazio-p { color: var(--fx-dim); text-align: center; margin: 24px 0; font: 14px var(--fx-maq); }
.fx-legenda { font-size: 11px; color: var(--fx-dim); margin: 8px 0 0; line-height: 1.5; }
.fx-legenda b { color: var(--fx-tinta); font-weight: 400; font-family: var(--mono); }

/* campos */
.fx-tela input, .fx-tela select, .fx-tela textarea { background: transparent; color: var(--fx-tinta); border: 0; border-bottom: 1px dashed var(--fx-linha2); font: 14px var(--corpo); padding: 3px 2px; min-width: 0; border-radius: 0; }
.fx-tela textarea { width: 100%; border: 1px solid var(--fx-linha); background: var(--fx-bg); padding: 10px; resize: vertical; line-height: 1.5;
  background-image: repeating-linear-gradient(transparent 0 23px, rgba(236,230,220,.05) 23px 24px); background-attachment: local; }
.fx-tela select { background: var(--fx-bg); border: 1px solid var(--fx-linha); padding: 3px 4px; }
.fx-tela input:focus, .fx-tela select:focus, .fx-tela textarea:focus { outline: none; border-color: var(--ac); }
.fx-tela input:disabled, .fx-tela select:disabled, .fx-tela textarea:disabled { color: var(--fx-tinta); opacity: 1; -webkit-text-fill-color: var(--fx-tinta); border-bottom-style: solid; border-color: transparent; }
.fx-tela select:disabled { -webkit-appearance: none; appearance: none; background: transparent; border-color: transparent; }
.fx-tela input[type=number] { -moz-appearance: textfield; }
.fx-tela input[type=number]::-webkit-inner-spin-button, .fx-tela input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.fx-tela label { font: 10px var(--mono); letter-spacing: .12em; color: var(--fx-dim); text-transform: uppercase; display: grid; gap: 3px; }
.fx-tela button { font-family: var(--mono); }

/* botões */
.fx-lista-acoes button, .fx-topo-aba button, .fx-novo button, .fx-det-acoes button, .fx-rapidos button, .fx-ataque-btns button, .fx-mini, .fx-cartao-acoes button, .fx-btn-arq, .fx-barra-ctl button, .fx-cat-criar button {
  background: transparent; border: 1px solid var(--fx-linha2); color: var(--fx-tinta); padding: 7px 12px; cursor: pointer;
  font: 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; border-radius: 0; transition: border-color .15s, background .15s, color .15s; }
.fx-lista-acoes button:hover, .fx-topo-aba button:hover, .fx-novo button:hover, .fx-det-acoes button:hover, .fx-rapidos button:hover, .fx-ataque-btns button:hover, .fx-mini:hover, .fx-cartao-acoes button:hover, .fx-btn-arq:hover, .fx-barra-ctl button:hover, .fx-cat-criar button:hover { border-color: var(--ac); color: var(--ac); }
.fx-btn-roxo { background: var(--ac) !important; color: var(--ac-txt) !important; border: 1px solid var(--ac) !important; padding: 7px 14px; cursor: pointer; font: 11.5px var(--mono) !important; letter-spacing: .12em !important; text-transform: uppercase; border-radius: 0; }
.fx-btn-roxo:hover { filter: brightness(1.12); color: var(--ac-txt) !important; }
.fx-btn-perigo { border-color: rgba(210,70,58,.6) !important; color: #f0a39b !important; background: transparent !important; }
.fx-btn-perigo:hover { background: rgba(210,70,58,.14) !important; color: #ffd0ca !important; }
.fx-mini { padding: 3px 8px !important; font-size: 10px !important; }
.fx-lista-acoes { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; align-items: stretch; }
.fx-btn-arq { display: inline-flex; align-items: center; }

/* painel com marcas de corte nos cantos */
.fx-painel { position: relative; background: var(--fx-papel); border: 1px solid var(--fx-linha); padding: 14px 16px 16px; }
.fx-painel::before, .fx-painel::after { content: ''; position: absolute; width: 12px; height: 12px; pointer-events: none; }
.fx-painel::before { top: -1px; left: -1px; border-top: 2px solid var(--ac); border-left: 2px solid var(--ac); }
.fx-painel::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--ac); border-right: 2px solid var(--ac); }
.fx-ph { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 400 15px var(--fx-maq); letter-spacing: .08em; text-transform: uppercase; color: var(--fx-tinta); }
.fx-ph i { font: normal 10px var(--mono); color: var(--ac-txt); background: var(--ac); padding: 1px 5px; letter-spacing: .1em; }
.fx-ph::after { content: ''; flex: 1; height: 1px; background: repeating-linear-gradient(90deg, var(--fx-linha2) 0 4px, transparent 4px 8px); }

/* lista de fichas: pastas de dossiê */
.fx-grupo { font: 400 17px var(--fx-maq); letter-spacing: .06em; margin: 24px 0 12px; display: flex; align-items: center; gap: 10px; text-transform: uppercase; }
.fx-grupo small { font: 11px var(--mono); color: var(--fx-dim); text-transform: none; letter-spacing: .08em; }
.fx-pinta { width: 14px; height: 14px; background: var(--ac); transform: rotate(45deg); }
.fx-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px 18px; padding-top: 12px; }
.fx-cartao { position: relative; display: grid; grid-template-columns: 112px 1fr; background: var(--fx-papel); border: 1px solid var(--fx-linha); border-top: 3px solid var(--ac); min-height: 150px; transition: transform .15s, box-shadow .15s; }
.fx-cartao:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.45); }
.fx-cartao-aba { position: absolute; left: -1px; top: -22px; height: 19px; padding: 2px 12px 0; background: var(--ac); color: var(--ac-txt); font: 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 100%, 0 100%); max-width: 70%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fx-cartao-foto { position: relative; background: #0b0a0d center/cover; filter: grayscale(.55) contrast(1.05); transition: filter .25s; border-right: 1px solid var(--fx-linha); }
.fx-cartao:hover .fx-cartao-foto { filter: none; }
.fx-cartao-nex { position: absolute; left: 6px; bottom: 6px; font: 10px var(--mono); letter-spacing: .1em; background: rgba(13,12,15,.85); color: var(--fx-tinta); padding: 2px 6px; border: 1px solid var(--fx-linha2); }
.fx-cartao-info { padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fx-cartao-info h3 { margin: 2px 0 2px; font: 700 21px var(--display); letter-spacing: .02em; line-height: 1.15; overflow-wrap: anywhere; }
.fx-cartao-data { color: var(--fx-dim); font-size: 12px; }
.fx-cod { font: 10px var(--mono) !important; word-break: break-all; color: var(--fx-dim2) !important; letter-spacing: .04em; }
.fx-cartao-acoes { margin-top: auto; padding-top: 10px; display: flex; gap: 6px; justify-content: flex-end; }

/* ficha */
.fx-ficha { display: grid; grid-template-columns: minmax(330px, 400px) minmax(0, 1fr); grid-template-areas: "aviso aviso" "esq esq" "meio dir"; gap: 18px; max-width: 1380px; margin: 0 auto; }
.fx-ficha:not(.so-leitura) { grid-template-areas: "esq esq" "meio dir"; }
.fx-aviso-leitura { grid-area: aviso; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--fx-dim); }
.fx-aviso-leitura b { font: 400 16px var(--fx-maq); color: var(--fx-carimbo); border: 2px solid var(--fx-carimbo); padding: 2px 10px; letter-spacing: .14em; transform: rotate(-2deg); display: inline-block; opacity: .9; }
.fx-abas-mob { display: none; }
.fx-col { min-width: 0; }
.fx-col-esq { grid-area: esq; display: grid; gap: 18px; }
.fx-col-meio { grid-area: meio; align-self: start; }
.fx-col-dir { grid-area: dir; display: flex; flex-direction: column; min-width: 0; }

/* cabeçalho do dossiê */
.fx-dossie { display: grid; grid-template-columns: 128px minmax(0, 1fr) auto; gap: 18px; align-items: stretch; }
.fx-foto { position: relative; width: 128px; aspect-ratio: 4 / 5; background: #0b0a0d center/cover; border: 1px solid var(--fx-linha2); cursor: pointer; display: block !important; overflow: hidden; box-shadow: 4px 4px 0 var(--ac); }
.fx-foto::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(transparent 0 3px, rgba(0,0,0,.18) 3px 4px); pointer-events: none; }
.fx-foto span { position: absolute; inset: auto 0 0 0; font: 9px var(--mono); letter-spacing: .14em; background: rgba(13,12,15,.85); color: var(--fx-tinta); text-align: center; padding: 4px 0; opacity: 0; transition: opacity .2s; z-index: 1; }
.fx-foto:hover span { opacity: 1; }
.fx-foto-tag { position: absolute; top: 8px; right: 2px; z-index: 1; font: normal 9px var(--mono); letter-spacing: .16em; background: var(--fx-carimbo); color: #fff; padding: 2px 8px; text-transform: uppercase; transform: rotate(3deg); max-width: calc(100% - 8px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.so-leitura .fx-foto { cursor: default; }
.fx-dossie-campos { display: grid; gap: 10px; align-content: start; min-width: 0; }
.fx-nome input { font: 700 26px var(--display) !important; letter-spacing: .02em; width: 100%; padding: 0 0 2px !important; }
.fx-dossie-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 16px; }
.fx-dossie-grade input, .fx-dossie-grade select { width: 100%; }
.fx-origem { grid-column: span 2; }
.fx-origem > span { display: flex; gap: 6px; align-items: center; }
.fx-origem input { flex: 1; }
.fx-nex { display: grid; gap: 8px; align-content: start; min-width: 130px; padding-left: 18px; border-left: 1px dashed var(--fx-linha2); }
.fx-nex-grande { text-align: center; }
.fx-nex-grande select, .fx-nex-grande input { font: 30px var(--mono) !important; text-align: center; text-align-last: center; width: 120px; padding: 2px 0 !important; border: 1px solid var(--ac) !important; color: var(--ac) !important; -webkit-text-fill-color: var(--ac) !important; }
.fx-nex-mini { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font: 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fx-dim); }
.fx-nex-mini output { font: 18px var(--mono); color: var(--fx-tinta); }
/* NEX de exposição (separado do nível) */
.fx-nex-exposicao { border: 1px solid color-mix(in srgb, var(--nexc, #ead63c) 45%, transparent); border-radius: 6px; padding: 4px 8px; }
.fx-nex-exposicao output.fx-nex-exp { color: var(--nexc, #ead63c); font-weight: 700; text-shadow: 0 0 8px color-mix(in srgb, var(--nexc, #ead63c) 45%, transparent); }
.fx-nex-exp.pulsa { animation: nexPulsa 1.2s ease-out; }
@keyframes nexPulsa { 0% { transform: scale(1.5); filter: brightness(1.8); } 100% { transform: none; filter: none; } }
.fx-nex-exp-ed { display: inline-flex; align-items: baseline; gap: 2px; }
.fx-nex-exp-ed input { width: 46px; font: 16px var(--mono) !important; text-align: right; color: var(--nexc, #ead63c) !important; -webkit-text-fill-color: var(--nexc, #ead63c) !important; }
.fx-nex-exp-ed i { font-style: normal; color: var(--fx-dim); }
.fx-desl { display: inline-flex; align-items: baseline; gap: 2px; }
.fx-desl input { width: 34px; text-align: right; font: 18px var(--mono) !important; }
.fx-desl output { font: 11px var(--mono) !important; color: var(--fx-dim) !important; text-transform: none; letter-spacing: 0; }

/* faixa: atributos, vitais, defesa */
.fx-faixa { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.25fr) minmax(0, .95fr); gap: 18px; }
.fx-atributos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.fx-atr { background: var(--fx-papel2); border: 1px solid var(--fx-linha); text-align: center; padding: 8px 4px 9px; gap: 2px !important; position: relative; cursor: text; }
.fx-atr::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--ac); opacity: .55; }
.fx-atr-sg { font: 15px var(--fx-maq); color: var(--fx-tinta); letter-spacing: .08em; }
.fx-atr input { width: 100%; text-align: center; font: 700 34px var(--display) !important; border: 0 !important; padding: 0 !important; line-height: 1.1; }
.fx-atr small { font: 8px var(--mono); letter-spacing: .08em; color: var(--fx-dim); overflow: hidden; text-overflow: ellipsis; }
.fx-pips { display: flex; justify-content: center; gap: 3px; margin-top: 4px; }
.fx-pips b { width: 6px; height: 6px; border: 1px solid var(--fx-linha2); transform: rotate(45deg); }
.fx-pips b.on { background: var(--ac); border-color: var(--ac); }
.fx-pips.mais::after { content: '+'; font: 9px var(--mono); color: var(--ac); line-height: 6px; margin-left: 1px; }

.fx-barras { display: grid; gap: 12px; }
.fx-barra-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.fx-barra-tit { font: 13px var(--fx-maq); letter-spacing: .1em; text-transform: uppercase; }
.fx-barra-tit i { font: normal 10px var(--mono); color: var(--fx-dim); margin-left: 4px; }
.fx-barra-txt { display: inline-flex; align-items: baseline; gap: 4px; font: 22px var(--mono); }
.fx-barra-txt i { font-style: normal; color: var(--fx-dim2); }
.fx-barra-txt output { color: var(--fx-dim); font-size: 16px; }
.fx-barra-at { width: 52px; text-align: right; font: 22px var(--mono) !important; border: 0 !important; padding: 0 !important; }
.fx-barra { --cb: #d23a3a; }
.fx-barra-s { --cb: #8f4be0; } .fx-barra-e { --cb: #e8902a; } .fx-barra-d { --cb: #3c7be0; }
.fx-barra-trilho { position: relative; height: 12px; margin: 5px 0 6px; background: var(--fx-bg); border: 1px solid var(--fx-linha2); overflow: hidden; }
.fx-barra-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--cb); box-shadow: 0 0 12px var(--cb); transition: width .35s cubic-bezier(.2,.8,.2,1); }
.fx-barra-trilho::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(5% - 2px), var(--fx-papel) calc(5% - 2px) 5%); pointer-events: none; }
.fx-barra.critico .fx-barra-fill { animation: fx-pulso 1.1s ease-in-out infinite; }
.fx-barra.zerado .fx-barra-txt input { color: var(--fx-carimbo) !important; -webkit-text-fill-color: var(--fx-carimbo) !important; }
@keyframes fx-pulso { 50% { opacity: .45; } }
.fx-barra-ctl { display: flex; gap: 4px; align-items: center; }
.fx-barra-ctl button { padding: 3px 0; width: 36px; font-size: 11px; letter-spacing: 0; }
.fx-barra-ctl button:hover { border-color: var(--cb); color: var(--fx-tinta); background: color-mix(in srgb, var(--cb) 22%, transparent); }
.fx-ajuste { margin-left: auto; grid-template-columns: auto 42px !important; align-items: center; font-size: 9px !important; }
.fx-ajuste input { width: 42px; text-align: center; font: 12px var(--mono) !important; }

.fx-def-tiles { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; }
.fx-tile { background: var(--fx-papel2); border: 1px solid var(--fx-linha); text-align: center; padding: 8px 4px 6px; display: grid; }
.fx-tile output { font: 28px var(--mono); line-height: 1.1; }
.fx-tile span { font: 9px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fx-dim); }
.fx-tile-g { border-color: var(--ac); }
.fx-tile-g output { font-size: 36px; color: var(--ac); }
.fx-def-conta { font: 10.5px var(--mono); color: var(--fx-dim); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 8px 0 4px; letter-spacing: .04em; }
.fx-def-conta label { display: inline-flex !important; gap: 4px; align-items: center; }
.fx-def-conta input { width: 36px; text-align: center; font: 12px var(--mono) !important; }
.fx-larga { margin-top: 7px; }
.fx-larga input { width: 100%; }
.fx-codigo { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--fx-linha2); font: 10px var(--mono); color: var(--fx-dim); letter-spacing: .08em; text-transform: uppercase; }
.fx-codigo span { flex: 1 1 100%; word-break: break-all; }
.fx-codigo code { color: var(--fx-tinta); text-transform: none; letter-spacing: 0; }
.fx-alerta { color: var(--fx-carimbo) !important; }

/* perícias */
.fx-pericias { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.fx-pericias th { font: 9px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fx-dim2); text-align: left; font-weight: 400; padding: 0 4px 6px; border-bottom: 1px solid var(--fx-linha2); }
.fx-pericias th:last-child, .fx-pericias td:last-child { text-align: right; }
.fx-pericias td { padding: 2px 4px; white-space: nowrap; color: var(--fx-dim); border-bottom: 1px solid rgba(236,230,220,.045); }
.fx-pericias tbody tr:hover td { background: rgba(236,230,220,.03); }
.fx-pericias td input { width: 34px; text-align: center; font: 12px var(--mono) !important; }
.fx-rolar { background: none; border: 0; color: var(--fx-dim); font: 14px var(--corpo) !important; cursor: pointer; padding: 4px 0; text-align: left; }
.fx-rolar sup { font: 9px var(--mono); color: var(--fx-dim2); margin-left: 1px; }
.fx-rolar:hover { color: var(--ac) !important; }
.fx-rolar:hover::after { content: ' ⚄'; }
.fx-per-atr, .fx-per-atr-ro { border: 0 !important; background: transparent !important; color: var(--fx-dim2) !important; font: 11px var(--mono) !important; letter-spacing: .08em; padding: 0 !important; -webkit-appearance: none; appearance: none; cursor: pointer; width: 34px; }
.fx-per-atr option { background: var(--fx-bg); color: var(--fx-tinta); }
.fx-pericias tr .fx-per-atr.mudado, .fx-pericias tr .fx-mudado { color: var(--ac) !important; text-decoration: underline dotted; }
.fx-treino { display: inline-flex; gap: 2px; }
.fx-treino button { width: 20px; height: 20px; padding: 0; border: 1px solid var(--fx-linha2); background: transparent; color: var(--fx-dim2); font: 9px var(--mono); cursor: pointer; }
.fx-treino button:hover:not(:disabled) { border-color: var(--ac); color: var(--ac); }
.fx-treino button.on { background: var(--ac); border-color: var(--ac); color: var(--ac-txt); }
.fx-treino button:disabled { cursor: default; }
.fx-per-total { display: inline-block; min-width: 30px; text-align: center; font: 13px var(--mono); color: var(--fx-dim2); padding: 1px 4px; }
.fx-pericias tr.treinada .fx-rolar { color: var(--fx-tinta); }
.fx-pericias tr.treinada .fx-per-total { color: var(--ac-txt); background: var(--ac); }
.fx-pericias tr.t10 .fx-per-total, .fx-pericias tr.t15 .fx-per-total { box-shadow: 0 0 0 1px var(--fx-papel), 0 0 0 2px var(--ac); }

/* abas da direita: pastas */
.fx-abas { display: flex; gap: 3px; flex-wrap: wrap; padding-left: 10px; margin-bottom: -1px; position: relative; z-index: 1; }
.fx-abas button { background: var(--fx-papel2); border: 1px solid var(--fx-linha); border-bottom: 0; color: var(--fx-dim); font: 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 8px 14px 7px; cursor: pointer; clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 100%, 0 100%); }
.fx-abas button:hover { color: var(--fx-tinta); }
.fx-abas button.on { background: var(--fx-papel); color: var(--fx-tinta); box-shadow: inset 0 2px 0 var(--ac); padding-bottom: 8px; }
.fx-aba-corpo { flex: 1; min-height: 420px; }
.fx-topo-aba { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.fx-filtro { flex: 1; min-width: 140px; }
.fx-itens { display: grid; gap: 6px; }
.fx-itens details { background: var(--fx-papel2); border: 1px solid var(--fx-linha); border-left: 3px solid var(--el, var(--fx-linha2)); }
.fx-itens details[open] { border-color: var(--fx-linha2); border-left-color: var(--el, var(--ac)); }
.fx-itens summary { cursor: pointer; padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; list-style: none; }
.fx-itens summary::-webkit-details-marker { display: none; }
.fx-itens summary::before { content: '▸'; color: var(--ac); font-size: 12px; transition: transform .15s; display: inline-block; }
.fx-itens details[open] summary::before { transform: rotate(90deg); }
.fx-itens summary b { font: 600 15px var(--corpo); }
.fx-itens summary small { color: var(--fx-dim); font: 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.fx-cat { font: 10px var(--mono); color: var(--fx-dim); width: 100%; padding-left: 16px; letter-spacing: .06em; }
.fx-el { font: normal 9px var(--mono); padding: 1px 6px; border: 1px solid var(--el); color: var(--el); letter-spacing: .1em; text-transform: uppercase; }
.fx-vest { font: normal 9px var(--mono); color: var(--ok); letter-spacing: .1em; text-transform: uppercase; }
.fx-det { padding: 2px 12px 12px 26px; display: grid; gap: 10px; }
.fx-texto { white-space: pre-wrap; margin: 0; font-size: 14px; line-height: 1.55; color: #ddd6cb; }
.fx-rit-linhas { font-size: 13px; margin: 0; color: var(--fx-dim); line-height: 1.6; }
.fx-rit-linhas b { color: var(--fx-tinta); font-weight: 600; }
.fx-rit-campos, .fx-item-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.fx-rit-campos input, .fx-item-campos input, .fx-item-campos select, .fx-rit-campos select { width: 100%; }
.fx-l2 { grid-column: span 2; }
.fx-check { display: flex !important; gap: 6px; align-items: center; text-transform: none !important; font-size: 12px !important; letter-spacing: 0 !important; }
.fx-det-acoes { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.fx-dt { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin: 0 0 12px; font: 10px var(--mono); letter-spacing: .14em; color: var(--fx-dim); }
.fx-dt output { font: 26px var(--mono); color: var(--ac); border: 1px solid var(--ac); padding: 0 12px; }
.fx-dt label { grid-template-columns: auto 40px; align-items: center; }
.fx-dt input { width: 40px; text-align: center; }
.fx-inv-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin-bottom: 14px; align-items: end; padding: 12px; border: 1px dashed var(--fx-linha2); }
.fx-inv-grade input, .fx-inv-grade select { width: 100%; }
.fx-inv-tab { display: grid; grid-template-columns: auto repeat(4, 34px); gap: 4px; align-items: center; font: 9px var(--mono); letter-spacing: .1em; color: var(--fx-dim); text-transform: uppercase; }
.fx-inv-tab b { border: 1px solid var(--fx-linha2); text-align: center; padding: 1px 0 2px; font: 15px var(--mono); color: var(--fx-tinta); display: grid; line-height: 1.05; font-weight: 400; }
.fx-inv-tab b small { font-size: 8px; color: var(--fx-dim2); }
.fx-inv-tab b output.fx-alerta { color: var(--fx-carimbo); }
.fx-caixa { border: 1px solid var(--fx-linha2); padding: 4px 8px; font: 14px var(--mono); color: var(--fx-tinta); text-transform: none; text-align: center; letter-spacing: .06em; }
.fx-carga { display: grid; grid-template-columns: auto auto 1fr; gap: 4px 10px; align-items: center; font: 9px var(--mono); letter-spacing: .1em; color: var(--fx-dim); text-transform: uppercase; }
.fx-carga b { border: 1px solid var(--ac); padding: 2px 10px; font: 16px var(--mono); color: var(--fx-tinta); font-weight: 400; }
.fx-carga.sobre b { border-color: var(--fx-carimbo); color: #f0a39b; }
.fx-carga label { grid-template-columns: auto 40px; align-items: center; }
.fx-carga input { width: 40px; text-align: center; }
.fx-carga small { grid-column: 1 / -1; color: var(--fx-carimbo); text-transform: none; font-size: 11px; letter-spacing: 0; }
.fx-novo { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; font: 10px var(--mono); letter-spacing: .14em; color: var(--fx-dim); }
.fx-mods { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font: 10px var(--mono); letter-spacing: .08em; color: var(--fx-dim); text-transform: uppercase; }
.fx-chip { border: 1px solid var(--ac); padding: 2px 4px 2px 10px; color: var(--fx-tinta); font: 12px var(--corpo); display: inline-flex; align-items: center; gap: 4px; text-transform: none; letter-spacing: 0; }
.fx-chip.mal { border-color: var(--fx-carimbo); background: rgba(210,70,58,.1); }
.fx-chip button { background: none; border: 0; color: var(--fx-dim); cursor: pointer; font-size: 14px; }
.fx-mods-ro { font-size: 12px; margin: 0; color: var(--fx-dim); }
.fx-desc { display: grid; gap: 14px; }

/* combate */
.fx-combate h4 { display: flex; align-items: center; gap: 10px; font: 400 14px var(--fx-maq); margin: 18px 0 10px; letter-spacing: .1em; text-transform: uppercase; }
.fx-combate h4::after { content: ''; flex: 1; height: 1px; background: var(--fx-linha2); }
.fx-rapidos { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 6px; }
.fx-rapidos button span::before { content: '⚄ '; color: var(--fx-dim2); }
.fx-rapidos button { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 9px 10px; }
.fx-rapidos button b { font: 16px var(--mono); color: var(--ac); font-weight: 400; }
.fx-ataque { background: var(--fx-papel2); border: 1px solid var(--fx-linha); padding: 12px 14px; margin-bottom: 8px; display: grid; gap: 8px; position: relative; }
.fx-ataque::before { content: ''; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px; background: var(--ac); }
.fx-ataque b { font: 600 15px var(--corpo); }
.fx-ataque small { display: block; color: var(--fx-dim); font: 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; }
.fx-ataque-num { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--fx-dim); }
.fx-ataque-num b { color: var(--fx-tinta); font: 14px var(--mono); }
.fx-ataque-btns { display: flex; gap: 6px; flex-wrap: wrap; }

/* rolagem: recibo impresso */
.fx-rolagem { position: fixed; right: 18px; bottom: 18px; z-index: 75; width: min(330px, calc(100vw - 32px)); background: #ece6dc; color: #1b1814; padding: 14px 16px 22px; box-shadow: 0 14px 40px rgba(0,0,0,.6);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 8px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 8px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 8px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 8px repeat-x;
  animation: fx-imprime .28s ease-out; }
@keyframes fx-imprime { from { transform: translateY(16px); opacity: 0; } }
.fx-rolagem > b { display: block; font: 400 14px var(--fx-maq); margin-bottom: 8px; padding-right: 22px; letter-spacing: .04em; border-bottom: 1px dashed #8a8174; padding-bottom: 6px; }
.fx-rolagem p { margin: 8px 0 0; font: 14px var(--corpo); color: #1b1814; }
.fx-rolagem .fx-fechar { position: absolute; right: 8px; top: 6px; font-size: 22px; color: #5d564c; }
.fx-rolagem .dados-faces { display: flex; flex-wrap: wrap; gap: 5px; }
.fx-rolagem .face { width: 34px; height: 34px; display: grid; place-items: center; border: 2px solid #1b1814; background: transparent; color: #1b1814; font: 17px var(--mono); border-radius: 0; box-shadow: none; }
.fx-rolagem .face.usada { background: #1b1814; color: #ece6dc; }
.fx-rolagem .face.crit { border-color: #1f7a45; color: #1f7a45; } .fx-rolagem .face.crit.usada { background: #1f7a45; color: #fff; }
.fx-rolagem .face.falha { border-color: #b3261e; color: #b3261e; } .fx-rolagem .face.falha.usada { background: #b3261e; color: #fff; }
.fx-total { font: 30px var(--mono); color: #1b1814; margin-left: 6px; border: 2px solid #1b1814; padding: 0 8px; display: inline-block; transform: rotate(-2deg); }
.fx-det-dano { font: 12px var(--mono) !important; color: #5d564c !important; word-break: break-word; }
.fx-rolagem .fx-legenda { color: #5d564c; }

/* modal do catálogo */
.fx-modal { position: fixed; inset: 0; z-index: 80; background: rgba(5,4,7,.78); display: grid; place-items: center; padding: 16px; backdrop-filter: blur(2px); }
.fx-modal[hidden] { display: none; }
.fx-modal-caixa { width: min(800px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); background: var(--fx-papel); border: 1px solid var(--fx-linha2); border-top: 3px solid var(--ac); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.fx-modal-caixa > * { flex-shrink: 0; }
.fx-modal-caixa > .fx-modal-lista { flex: 1 1 auto; min-height: 0; }
.fx-modal-topo { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px 6px; }
.fx-modal-topo h3 { margin: 0; font: 400 19px var(--fx-maq); letter-spacing: .06em; text-transform: uppercase; }
.fx-seg { display: inline-flex; margin: 6px 18px 4px; border: 1px solid var(--ac); width: max-content; max-width: calc(100% - 36px); }
.fx-seg button { background: none; border: 0; color: var(--fx-dim); font: 11.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 7px 18px; cursor: pointer; }
.fx-seg button.on { background: var(--ac); color: var(--ac-txt); }
.fx-cat-abas { display: flex; gap: 2px 14px; padding: 8px 18px 0; overflow-x: auto; border-bottom: 1px solid var(--fx-linha); scrollbar-width: none; }
.fx-cat-abas::-webkit-scrollbar { display: none; }
.fx-cat-abas button { flex: none; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--fx-dim); font: 14px var(--corpo); padding: 6px 2px 8px; cursor: pointer; white-space: nowrap; }
.fx-cat-abas button:hover { color: var(--fx-tinta); }
.fx-cat-abas button.on { color: var(--fx-tinta); border-bottom-color: var(--ac); }
.fx-cat-abas.apagada button { opacity: .45; }
.fx-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 18px 2px; }
.fx-chips button { background: var(--fx-papel2); border: 1px solid var(--fx-linha); color: var(--fx-tinta); font: 11px var(--mono); letter-spacing: .06em; padding: 4px 10px; cursor: pointer; }
.fx-chips button:hover { border-color: var(--ac); }
.fx-chips button.on { border-color: var(--ac); color: var(--ac); box-shadow: inset 0 -2px 0 var(--ac); }
.fx-cat-criar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 18px 2px; font: 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fx-dim); }
.fx-modal-filtros { display: flex; gap: 8px; padding: 10px 18px 6px; flex-wrap: wrap; align-items: center; }
.fx-busca { flex: 1; min-width: 180px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--fx-linha2); padding: 4px 10px; background: var(--fx-bg); }
.fx-busca::before { content: '⌕'; color: var(--fx-dim); font-size: 18px; line-height: 1; }
.fx-busca input { flex: 1; border: 0 !important; font: 14px var(--corpo); }
.fx-modal .fx-dica { padding: 0 18px; margin: 0 0 6px; font: 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.fx-modal-lista { overflow-y: auto; padding: 4px 18px 18px; display: grid; gap: 8px; align-content: start; }
.fx-cat-item { background: var(--fx-papel2); border: 1px solid var(--fx-linha); border-left: 3px solid var(--el, var(--fx-linha2)); padding: 11px 13px; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; }
.fx-cat-item b { font: 600 16px var(--corpo); }
.fx-cat-item small { display: block; color: var(--fx-dim); font: 10px var(--mono); letter-spacing: .06em; margin: 3px 0 5px; }
.fx-cat-item p { margin: 0; font-size: 13px; color: #cfc7bb; line-height: 1.5; white-space: pre-wrap; }

@media (max-width: 1180px) {
  .fx-faixa { grid-template-columns: 1fr 1fr; }
  .fx-p-def { grid-column: 1 / -1; }
}
@media (max-width: 1000px) {
  .fx-ficha, .fx-ficha:not(.so-leitura) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "aviso" "esq" "meio" "dir"; }
  .fx-ficha:not(.so-leitura) { grid-template-areas: "esq" "meio" "dir"; }
}
@media (max-width: 860px) {
  .fx-topo { padding: 8px 12px; gap: 8px; flex-wrap: wrap; row-gap: 2px; }
  .fx-marca { flex: 1; }
  .fx-marca b { font-size: 17px; }
  .fx-fechar { order: 2; }
  .fx-nav { order: 3; flex: 1 1 100%; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; }
  .fx-nav button { white-space: nowrap; font-size: 12px; padding: 5px 8px; }
  .fx-corpo { padding: 12px; }
  .fx-grade { grid-template-columns: 1fr; }
  .fx-cartao { grid-template-columns: 96px 1fr; }
  .fx-ficha { display: block; }
  .fx-aviso-leitura { margin-bottom: 10px; }
  .fx-abas-mob { display: flex; overflow-x: auto; gap: 2px; border-bottom: 1px solid var(--fx-linha); margin: 0 -12px 12px; padding: 0 12px; position: sticky; top: -12px; background: var(--fx-bg); z-index: 3; scrollbar-width: none; }
  .fx-abas-mob::-webkit-scrollbar { display: none; }
  .fx-abas-mob button { flex: none; font-size: 11.5px; padding: 10px 9px; }
  .fx-col { display: none !important; }
  .fx-ficha[data-mob="status"] .fx-col-esq { display: grid !important; }
  .fx-ficha[data-mob="pericias"] .fx-col-meio { display: block !important; }
  .fx-ficha:not([data-mob="status"]):not([data-mob="pericias"]) .fx-col-dir { display: flex !important; }
  .fx-abas { display: none; }
  .fx-dossie { grid-template-columns: 96px minmax(0, 1fr); gap: 12px 14px; }
  .fx-foto { width: 96px; }
  .fx-nome input { font-size: 21px !important; }
  .fx-dossie-grade { grid-template-columns: 1fr 1fr; gap: 8px 12px; }
  .fx-nex { grid-column: 1 / -1; grid-template-columns: auto 1fr 1fr; align-items: center; padding: 10px 0 0; border-left: 0; border-top: 1px dashed var(--fx-linha2); gap: 12px; }
  .fx-nex-grande select, .fx-nex-grande input { width: 96px; font-size: 24px !important; }
  .fx-nex-mini { flex-direction: column; align-items: center; gap: 2px; }
  .fx-faixa { grid-template-columns: 1fr; gap: 12px; }
  .fx-col-esq { gap: 12px; }
  .fx-painel { padding: 12px; }
  .fx-atr input { font-size: 28px !important; }
  .fx-atr small { display: none; }
  .fx-aba-corpo { min-height: 0; }
  .fx-inv-grade { grid-template-columns: 1fr; }
  .fx-rolagem { right: 10px; bottom: 10px; }
  .fx-modal { padding: 0; place-items: stretch; }
  .fx-modal-caixa { width: 100%; max-height: none; height: 100%; height: 100dvh; }
  .fx-cat-item { grid-template-columns: 1fr; }
  .fx-cat-item .fx-btn-roxo { justify-self: end; }
}
@media (max-width: 400px) {
  .fx-pericias td { padding: 2px 2px; }
  .fx-rolar { font-size: 13px !important; }
  .fx-treino button { width: 18px; }
  .fx-dossie-grade { grid-template-columns: 1fr; }
  .fx-origem { grid-column: auto; }
}

/* =========================================================
   QUADRO DA EQUIPE (branco ou preto)
   ========================================================= */
.qd-tela {
  --qd-ui: #121116; --qd-ui2: #1c1a22; --qd-linha: #302c38; --qd-tinta: #ece6f2; --qd-dim: #9c94aa; --qd-ac: #8b5cf6;
  --qd-fundo: #f6f4ee; --qd-ponto: rgba(30, 28, 40, .16);
  position: fixed; inset: 0; z-index: 72; display: grid; grid-template-rows: auto 1fr; background: var(--qd-fundo); color: var(--qd-tinta);
}
.qd-tela[hidden] { display: none; }
.qd-tela.qd-preto { --qd-fundo: #16181b; --qd-ponto: rgba(240, 236, 228, .13); }
.qd-tela button { font-family: var(--corpo); cursor: pointer; }
.qd-topo svg, .qd-ferramentas svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.qd-topo { position: relative; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 7px 12px; background: var(--qd-ui); border-bottom: 1px solid var(--qd-linha); }
.qd-marca { display: grid; line-height: 1.05; flex: none; }
.qd-marca span { font: 9px var(--mono); letter-spacing: .24em; color: var(--qd-dim); }
.qd-marca b { font: 700 17px var(--display); letter-spacing: .04em; }
.qd-quadros { flex: 1; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.qd-quadros::-webkit-scrollbar { display: none; }
.qd-quadros button { flex: none; display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 1px solid transparent; color: var(--qd-dim); font-size: 14px; padding: 5px 11px; border-radius: 6px; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qd-quadros button:hover { color: var(--qd-tinta); background: var(--qd-ui2); }
.qd-quadros button.on { color: var(--qd-tinta); background: var(--qd-ui2); border-color: var(--qd-linha); }
.qd-bolinha { width: 10px; height: 10px; border-radius: 50%; background: #f6f4ee; border: 1px solid #777; flex: none; }
.qd-bolinha.preto { background: #16181b; border-color: #aaa; }
.qd-quadros .qd-novo { font-size: 18px; padding: 2px 10px; }
.qd-topo-dir { display: flex; align-items: center; gap: 6px; flex: none; }
.qd-fundo { display: inline-flex; border: 1px solid var(--qd-linha); border-radius: 7px; overflow: hidden; }
.qd-fundo button { background: transparent; border: 0; color: var(--qd-dim); font-size: 13px; padding: 5px 10px; display: inline-flex; align-items: center; gap: 6px; }
.qd-fundo button::before { content: ''; width: 10px; height: 10px; border-radius: 2px; border: 1px solid #888; background: #f6f4ee; }
.qd-fundo button[data-v="preto"]::before { background: #16181b; }
.qd-fundo button.on { background: var(--qd-ac); color: #fff; }
.qd-ico, .qd-zoom button { background: transparent; border: 1px solid transparent; color: var(--qd-tinta); width: 34px; height: 34px; border-radius: 7px; display: inline-grid; place-items: center; padding: 0; }
.qd-ico:hover, .qd-zoom button:hover { background: var(--qd-ui2); border-color: var(--qd-linha); }
.qd-zoom { display: inline-flex; align-items: center; }
.qd-zoom #qdZoomTxt { width: auto; padding: 0 6px; font: 12px var(--mono); }
.qd-fechar { background: none; border: 0; color: var(--qd-dim); font-size: 28px; line-height: 1; padding: 0 4px 0 8px; }
.qd-fechar:hover { color: var(--qd-tinta); }
.qd-menu { position: absolute; right: 12px; top: calc(100% + 6px); width: min(340px, calc(100vw - 24px)); background: var(--qd-ui); border: 1px solid var(--qd-linha); border-radius: 10px; padding: 6px; display: grid; gap: 2px; box-shadow: 0 14px 40px rgba(0,0,0,.45); z-index: 10; }
.qd-menu[hidden] { display: none; }
.qd-menu button { text-align: left; background: transparent; border: 0; color: var(--qd-tinta); padding: 9px 10px; border-radius: 6px; font-size: 14px; }
.qd-menu button:hover { background: var(--qd-ui2); }
.qd-menu p { margin: 6px 10px 4px; font-size: 12px; color: var(--qd-dim); line-height: 1.5; }
.qd-perigo { color: #ff8fa3 !important; }

.qd-palco { position: relative; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; outline: none;
  background-color: var(--qd-fundo); background-image: radial-gradient(circle, var(--qd-ponto) 1.1px, transparent 1.4px); }
.qd-palco[data-ferr="caneta"], .qd-palco[data-ferr="marca"], .qd-palco[data-ferr="ret"], .qd-palco[data-ferr="elipse"], .qd-palco[data-ferr="seta"], .qd-palco[data-ferr="linha"] { cursor: crosshair; }
.qd-palco[data-ferr="texto"] { cursor: text; }
.qd-palco[data-ferr="nota"] { cursor: copy; }
.qd-palco[data-ferr="borracha"] { cursor: cell; }
.qd-palco[data-ferr="mao"], .qd-palco.espaco { cursor: grab; }
.qd-palco.arrastando { cursor: grabbing !important; }
.qd-mundo { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
.qd-it { position: absolute; transform-origin: 0 0; }
.qd-traco, .qd-forma { pointer-events: none; }
.qd-it svg { overflow: visible; display: block; }
.qd-hit { fill: none; stroke: transparent; pointer-events: stroke; }
.qd-texto { white-space: pre-wrap; line-height: 1.2; min-width: 4px; padding: 0; overflow-wrap: anywhere; cursor: default; }
.qd-palco[data-ferr="sel"] .qd-it, .qd-palco[data-ferr="sel"] .qd-hit { cursor: move; }
.qd-palco[data-ferr="texto"] .qd-texto, .qd-palco[data-ferr="texto"] .qd-nota { cursor: text; }
.qd-nota { box-shadow: 0 2px 2px rgba(0,0,0,.08), 0 8px 18px rgba(0,0,0,.16); padding: 14px 14px 22px; overflow: hidden; border-radius: 2px; }
.qd-nota-tx { white-space: pre-wrap; line-height: 1.18; overflow-wrap: anywhere; height: 100%; overflow: hidden; }
.qd-nota small { position: absolute; right: 8px; bottom: 5px; font: 10px var(--mono); opacity: .55; letter-spacing: .04em; }
.qd-img { box-shadow: 0 6px 18px rgba(0,0,0,.18); background: rgba(0,0,0,.05); }
.qd-img img { width: 100%; height: 100%; display: block; object-fit: fill; pointer-events: none; }
.qd-it.editando { visibility: hidden; }
.qd-nota.editando { visibility: visible; }
.qd-nota.editando .qd-nota-tx { visibility: hidden; }
.qd-previa { position: absolute; left: 0; top: 0; z-index: 99999; pointer-events: none; overflow: visible; }
.qd-previa-forma { z-index: 99999; opacity: .85; }
.qd-selecao { position: absolute; border: calc(1.5px / var(--qz, 1)) solid #4c8dff; border-radius: calc(3px / var(--qz, 1)); pointer-events: none; box-shadow: 0 0 0 calc(1px / var(--qz, 1)) rgba(255,255,255,.6); }
.qd-alca { position: absolute; right: calc(-7px / var(--qz, 1)); bottom: calc(-7px / var(--qz, 1)); width: calc(14px / var(--qz, 1)); height: calc(14px / var(--qz, 1)); background: #fff; border: calc(2px / var(--qz, 1)) solid #4c8dff; border-radius: 50%; pointer-events: auto; cursor: nwse-resize; }
.qd-editor { position: absolute; margin: 0; border: 0; outline: calc(1.5px / var(--qz, 1)) dashed #4c8dff; outline-offset: calc(3px / var(--qz, 1)); background: transparent; resize: none; overflow: hidden; line-height: 1.2; padding: 0 2px; white-space: pre-wrap; }
.qd-editor-nota { padding: 14px 14px 22px; line-height: 1.18; outline-style: solid; }
.qd-editor::placeholder { color: currentColor; opacity: .4; }

/* barras flutuantes */
.qd-ferramentas { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); z-index: 4; display: grid; gap: 2px; padding: 6px; background: var(--qd-ui); border: 1px solid var(--qd-linha); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.28); max-height: calc(100% - 120px); overflow-y: auto; scrollbar-width: none; }
.qd-ferramentas button { width: 40px; height: 40px; border-radius: 8px; border: 0; background: transparent; color: var(--qd-tinta); display: grid; place-items: center; }
.qd-ferramentas button:hover { background: var(--qd-ui2); }
.qd-ferramentas button.on { background: var(--qd-ac); color: #fff; }
.qd-opcoes { position: absolute; left: 50%; top: 62px; transform: translateX(-50%); z-index: 4; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; padding: 6px 10px; background: var(--qd-ui); border: 1px solid var(--qd-linha); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.28); max-width: calc(100vw - 120px); }
.qd-opcoes[hidden] { display: none; }
.qd-opcoes button { background: transparent; border: 1px solid var(--qd-linha); color: var(--qd-tinta); border-radius: 7px; padding: 5px 10px; font-size: 13px; }
.qd-opcoes button:hover { border-color: var(--qd-dim); }
.qd-opcoes button.on { background: var(--qd-ac); border-color: var(--qd-ac); color: #fff; }
.qd-opcoes select { background: var(--qd-ui2); color: var(--qd-tinta); border: 1px solid var(--qd-linha); border-radius: 7px; padding: 5px 6px; font: 13px var(--corpo); }
.qd-cores { display: flex; gap: 4px; align-items: center; }
.qd-cores button { width: 24px; height: 24px; padding: 0; border-radius: 50%; background: var(--c) !important; border: 2px solid rgba(255,255,255,.18) !important; }
.qd-cores button.on { box-shadow: 0 0 0 2px var(--qd-ui), 0 0 0 4px #fff; }
.qd-cores-nota button { border-radius: 4px; }
.qd-cor-livre { background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red) !important; position: relative; }
.qd-cor-livre::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--c); border: 1px solid rgba(0,0,0,.3); }
.qd-esp { display: inline-flex; align-items: center; gap: 6px; font: 11px var(--mono); color: var(--qd-dim); }
.qd-esp input { width: 90px; accent-color: var(--qd-ac); }
.qd-esp output { width: 18px; text-align: right; color: var(--qd-tinta); }
.qd-bt-b { font-weight: 700; } .qd-bt-i { font-style: italic; }
.qd-sep { width: 1px; height: 24px; background: var(--qd-linha); }
.qd-dica { font-size: 13px; color: var(--qd-dim); }
.qd-autor { font: 11px var(--mono); color: var(--qd-dim); }

@media (max-width: 860px) {
  .qd-topo { flex-wrap: wrap; row-gap: 4px; padding: 6px 8px; }
  .qd-marca { order: 1; }
  .qd-topo-dir { order: 2; margin-left: auto; gap: 2px; }
  .qd-quadros { order: 3; flex: 1 1 100%; }
  .qd-fundo button { padding: 5px 7px; font-size: 12px; }
  .qd-ico, .qd-zoom button { width: 30px; height: 30px; }
  .qd-zoom [data-v] { display: none; }
  .qd-ferramentas { left: 8px; right: 8px; top: auto; bottom: calc(8px + env(safe-area-inset-bottom)); transform: none; display: flex; overflow-x: auto; max-height: none; border-radius: 12px; }
  .qd-ferramentas button { flex: none; width: 42px; height: 42px; }
  .qd-opcoes { top: auto; bottom: calc(68px + env(safe-area-inset-bottom)); left: 8px; right: 8px; transform: none; max-width: none; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .qd-opcoes > * { flex: none; }
  .qd-dica { white-space: normal; flex: 1 1 auto !important; font-size: 12px; }
}
@media (max-width: 400px) {
  .qd-marca { display: none; }
  .qd-fundo button::before { display: none; }
}
/* topo do site em celular muito estreito: só os ícones dos botões empilhados */
@media (max-width: 400px) {
  .topo-dir .btn-pilha { font-size: 0 !important; min-width: 34px !important; padding: 4px 5px !important; gap: 0 !important; }
  .topo-dir .btn-pilha .ic { font-size: 17px; }
}

/* =========================================================
   FICHAS: condições, ficha ativa e ameaças
   ========================================================= */
.fx-conds { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 10px; }
.fx-conds:empty { display: none; }
.fx-conds .fx-k { flex-basis: 100%; margin-top: 4px; }
.fx-cond { font: normal 11px var(--corpo); padding: 2px 8px; border: 1px solid var(--fx-carimbo); color: #f0b7b0; background: rgba(210,70,58,.08); }
.fx-cond.fx-bonus { border-color: var(--ac); color: var(--fx-tinta); background: transparent; }
.fx-ativa.on { background: var(--ac) !important; color: var(--ac-txt) !important; border-color: var(--ac) !important; }
.fx-pres-grade { display: grid; grid-template-columns: 70px 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.fx-pres-grade input { width: 100%; }
.fx-p-pres .fx-btn-roxo { margin-top: 10px; width: 100%; }
.fx-pvmax { width: 56px !important; font: 16px var(--mono) !important; color: var(--fx-dim) !important; border: 0 !important; }
.fx-ameaca .fx-def-tiles { grid-template-columns: 1fr; margin-top: 10px; }
.fx-ameaca .fx-tile input { font: 30px var(--mono); text-align: center; width: 100%; border: 0; color: var(--ac); }
.fx-ameaca .fx-p-atr .fx-atributos { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.fx-amea-atq { display: grid; grid-template-columns: 2fr 60px 70px 1fr 70px; gap: 8px; align-items: end; }
.fx-amea-atq input { width: 100%; }
.fx-amea-atq .fx-l2 { grid-column: auto; }
.fx-pres-modal { padding: 4px 18px 18px; display: grid; gap: 10px; overflow-y: auto; }
.fx-pres-alvos { display: flex; flex-wrap: wrap; gap: 6px 16px; }
#fxPresResp p { margin: 4px 0; font-size: 14px; }
@media (max-width: 860px) { .fx-amea-atq { grid-template-columns: 1fr 1fr; } .fx-pres-grade { grid-template-columns: 1fr 1fr; } }

/* condições no cartão do Mestre */
.cond-alerta { font-size: 12px; background: rgba(210,40,40,.12); border: 1px solid rgba(210,60,60,.5); border-radius: 6px; padding: 6px 8px; margin: 6px 0; }
.cond-cont { display: inline-flex; gap: 4px; align-items: center; }
.cond-cont button { width: 22px; height: 22px; padding: 0; border-radius: 4px; border: 1px solid var(--linha); background: #1b1526; color: var(--texto); }
.cond-mais summary { font-size: 12px; color: var(--texto-dim); cursor: pointer; margin-top: 6px; }
.ped-lim { display: block; color: #ffcf66 !important; }

/* =========================================================
   PAINEL DE RETRATOS (estilo transmissão)
   ========================================================= */
.hud-retratos { position: absolute; left: 14px; top: 132px; z-index: 6; display: flex; flex-direction: column; gap: 4px; pointer-events: none; max-height: calc(100% - 210px); overflow-y: auto; scrollbar-width: none; }
.hud-retratos::-webkit-scrollbar { display: none; }
.hud-retratos[hidden] { display: none; }
.hud-card { --hud-sangue: #8e0d14; position: relative; display: flex; align-items: center; gap: 2px; pointer-events: auto; cursor: pointer; padding-right: 8px; }
.hud-retrato { position: relative; width: 84px; height: 84px; flex: none; }
.hud-mancha { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); filter: drop-shadow(0 3px 6px rgba(0,0,0,.6)); }
.hud-foto { position: absolute; inset: 15px; border-radius: 50%; background: #120d10 center/cover; box-shadow: inset 0 0 0 2px rgba(0,0,0,.7), 0 0 0 2px var(--cor); filter: saturate(.9) contrast(1.05); }
.hud-pe { position: absolute; left: -2px; bottom: 2px; min-width: 26px; padding: 1px 5px; text-align: center; font: 700 15px var(--display); color: #bcd3ff; background: #0d1528; border: 1px solid #3a5ea8; border-radius: 4px; text-shadow: 0 0 6px rgba(80,140,255,.6); }
.hud-txt { display: grid; line-height: .95; margin-left: -6px; position: relative; z-index: 1; }
.hud-nome { font: 700 19px var(--display); letter-spacing: .03em; text-transform: uppercase; color: #fff; text-shadow: 0 0 2px #000, 2px 2px 0 var(--hud-sangue), -1px -1px 0 #2a0306, 0 4px 10px rgba(0,0,0,.8); white-space: nowrap; }
.hud-pv { font: 700 23px var(--display); color: #fff; text-shadow: 0 0 2px #000, 2px 2px 0 var(--hud-sangue), -1px -1px 0 #2a0306, 0 4px 10px rgba(0,0,0,.8); }
.hud-pv i { font-style: normal; }
.hud-vazio { font: 12px var(--mono); color: var(--texto-dim); text-shadow: 0 1px 2px #000; }
.hud-icones { font-size: 13px; margin-top: 2px; filter: drop-shadow(0 1px 2px #000); }
.hud-estado { position: absolute; left: 6px; top: 34px; font: 700 10px var(--mono); letter-spacing: .12em; color: #fff; background: #b3121b; padding: 1px 5px; transform: rotate(-8deg); box-shadow: 0 2px 6px rgba(0,0,0,.6); }
.hud-card.enlouquecendo .hud-estado { background: #6d28d9; }
.hud-card.morrendo .hud-foto { filter: grayscale(1) brightness(.7); animation: hud-pulso 1.1s ease-in-out infinite; }
.hud-card.enlouquecendo .hud-foto { animation: hud-glitch 2.2s steps(2) infinite; }
.hud-card.sem-ficha { opacity: .75; }
.hud-card.dano .hud-pv { animation: hud-dano .9s ease-out; }
.hud-card.cura .hud-pv { animation: hud-cura .9s ease-out; }
.hud-card:hover .hud-foto { box-shadow: inset 0 0 0 2px rgba(0,0,0,.7), 0 0 0 3px #fff; }
.hud-retratos.muitos .hud-retrato { width: 66px; height: 66px; }
.hud-retratos.muitos .hud-foto { inset: 12px; }
.hud-retratos.muitos .hud-nome { font-size: 15px; }
.hud-retratos.muitos .hud-pv { font-size: 18px; }
.hud-retratos.muitos .hud-pe { font-size: 12px; min-width: 22px; }
.hud-retratos.muitos .hud-estado { top: 26px; font-size: 9px; }
.hud-recolher { pointer-events: auto; align-self: flex-start; margin-left: 30px; width: 24px; height: 20px; padding: 0; border: 1px solid var(--linha); border-radius: 4px; background: rgba(10,8,15,.8); color: var(--texto-dim); cursor: pointer; }
.hud-mostrar { position: absolute; left: 14px; top: 132px; z-index: 6; border: 1px solid #6b1118; background: rgba(20,6,8,.85); color: #ffb3b8; border-radius: 6px; padding: 4px 10px; font: 12px var(--mono); cursor: pointer; }
@keyframes hud-pulso { 50% { box-shadow: inset 0 0 0 2px rgba(0,0,0,.7), 0 0 0 3px #ff2a3a, 0 0 18px #ff2a3a; } }
@keyframes hud-glitch { 0%, 90% { transform: none; filter: hue-rotate(0); } 92% { transform: translate(2px, -1px) skewX(6deg); filter: hue-rotate(90deg) saturate(2); } 96% { transform: translate(-2px, 1px); filter: invert(.2); } }
@keyframes hud-dano { 0% { color: #ff4d5a; transform: translateX(-3px); } 20% { transform: translateX(3px); } 40% { transform: translateX(-2px); } 100% { color: #fff; transform: none; } }
@keyframes hud-cura { 0% { color: #7dffa8; } 100% { color: #fff; } }
body.tv .hud-retratos { display: flex !important; top: 90px; }
@media (max-width: 860px) {
  .hud-retratos { left: 6px; top: 70px; max-height: calc(100% - 200px); }
  .hud-retrato { width: 64px; height: 64px; }
  .hud-foto { inset: 11px; }
  .hud-nome { font-size: 14px; } .hud-pv { font-size: 18px; } .hud-pe { font-size: 12px; min-width: 22px; }
  .hud-retratos.muitos { flex-direction: row; flex-wrap: nowrap; max-width: calc(100% - 12px); overflow-x: auto; overflow-y: hidden; }
  .hud-retratos.muitos .hud-card { flex-direction: column; align-items: center; padding: 0; }
  .hud-retratos.muitos .hud-retrato { width: 56px; height: 56px; }
  .hud-retratos.muitos .hud-foto { inset: 10px; }
  .hud-retratos.muitos .hud-txt { margin: -4px 0 0; text-align: center; }
  .hud-retratos.muitos .hud-nome { font-size: 11px; } .hud-retratos.muitos .hud-pv { font-size: 14px; }
  .hud-mostrar { left: 6px; top: 70px; }
}

/* =========================================================
   EFEITOS NA TELA DO JOGADOR (vida e sanidade)
   ========================================================= */
.efeito-tela { position: fixed; inset: 0; pointer-events: none; z-index: 30; opacity: 0; transition: opacity 1.5s; }
body.ef-pv-baixa .efeito-tela, body.ef-pv-zero .efeito-tela, body.ef-san-baixa .efeito-tela, body.ef-san-critica .efeito-tela, body.ef-san-zero .efeito-tela { opacity: 1; }
body.ef-pv-baixa .efeito-tela { background: radial-gradient(ellipse at center, transparent 55%, rgba(120,0,10,.35) 100%); }
body.ef-pv-zero .efeito-tela { background: radial-gradient(ellipse at center, transparent 35%, rgba(150,0,10,.6) 100%); animation: ef-coracao 1.1s ease-in-out infinite; }
body.ef-san-baixa .viewport { filter: saturate(.7); transition: filter 2s; }
body.ef-san-critica .viewport { filter: saturate(.35) contrast(1.1); transition: filter 2s; }
body.ef-san-zero .viewport { filter: saturate(.2) contrast(1.25) hue-rotate(-15deg); animation: ef-falha 6s steps(1) infinite; }
body.ef-san-baixa .efeito-tela::after, body.ef-san-critica .efeito-tela::after, body.ef-san-zero .efeito-tela::after {
  content: ''; position: absolute; inset: -50%; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: ef-ruido .6s steps(3) infinite; }
body.ef-san-critica .efeito-tela::after { opacity: .12; }
body.ef-san-zero .efeito-tela::after { opacity: .2; }
body.ef-san-zero .efeito-tela { background: radial-gradient(ellipse at center, transparent 45%, rgba(70,20,120,.45) 100%); }
@keyframes ef-coracao { 50% { opacity: .55; } }
@keyframes ef-ruido { 0% { transform: translate(0, 0); } 33% { transform: translate(-6%, 4%); } 66% { transform: translate(5%, -3%); } }
@keyframes ef-falha { 0%, 94%, 100% { transform: none; } 95% { transform: translate(4px, 0) skewX(2deg); } 97% { transform: translate(-3px, 1px); } }
@media (prefers-reduced-motion: reduce) { body .efeito-tela, body .efeito-tela::after, body .viewport { animation: none !important; } }

/* =========================================================
   JANELA DE PEDIDOS DO MESTRE (Presença, interlúdio, fim de missão)
   ========================================================= */
.mesa-janela { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(4,2,6,.72); backdrop-filter: blur(3px); }
.mesa-janela[hidden] { display: none; }
.mesa-caixa { width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; background: #120e16; border: 1px solid #3a2f44; border-top: 3px solid #b3121b; border-radius: 10px; padding: 18px 20px; box-shadow: 0 30px 80px rgba(0,0,0,.7); animation: mj-entra .35s ease-out; }
.mesa-janela.interludio .mesa-caixa { border-top-color: #3c9e7a; }
.mesa-janela.recompensa .mesa-caixa { border-top-color: #c9a14a; }
@keyframes mj-entra { from { transform: translateY(14px) scale(.98); opacity: 0; } }
.mesa-k { font: 11px var(--mono); letter-spacing: .2em; color: var(--el, #ff6b75); margin: 0; }
.mesa-janela.interludio .mesa-k { color: #7fd8b3; } .mesa-janela.recompensa .mesa-k { color: #e3c06e; }
.mesa-caixa h3 { font: 700 24px var(--display); margin: 4px 0 8px; }
.mesa-caixa p { line-height: 1.5; margin: 8px 0; }
.mesa-botoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.mesa-botoes button { border: 1px solid var(--linha); background: #1b1526; color: var(--texto); border-radius: 7px; padding: 9px 14px; font: 14px var(--corpo); cursor: pointer; }
.mesa-botoes button.pri { background: #b3121b; border-color: #b3121b; color: #fff; font-weight: 600; }
.mesa-janela.interludio .mesa-botoes button.pri { background: #2f8a68; border-color: #2f8a68; }
.mesa-janela.recompensa .mesa-botoes button.pri { background: #c9a14a; border-color: #c9a14a; color: #1a140a; }
.mesa-botoes button:disabled { opacity: .45; cursor: default; }
.mesa-total { font: 700 24px var(--mono); }
.mesa-aviso { color: #ffcf66; } .mesa-ok { color: #7fd8b3; }
.mesa-acoes { display: grid; gap: 6px; margin: 10px 0; }
.mesa-acao { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; align-items: start; padding: 8px 10px; border: 1px solid var(--linha); border-radius: 8px; cursor: pointer; }
.mesa-acao:has(input:checked) { border-color: #3c9e7a; background: rgba(60,158,122,.1); }
.mesa-acao input { grid-row: span 2; margin-top: 4px; }
.mesa-acao small { color: var(--texto-dim); font-size: 12px; }
.mesa-prato { display: grid; gap: 4px; font: 11px var(--mono); color: var(--texto-dim); text-transform: uppercase; letter-spacing: .1em; }
.mesa-prato select { background: #0d0a13; color: var(--texto); border: 1px solid var(--linha); border-radius: 6px; padding: 6px; font: 14px var(--corpo); text-transform: none; letter-spacing: 0; }
.mesa-prato[hidden] { display: none; }
.mesa-prev { color: #7fd8b3; font-size: 14px; min-height: 1.2em; }

/* =========================================================
   SIGILO DE RITUAL
   ========================================================= */
.sigilo-tela { position: fixed; inset: 0; z-index: 95; pointer-events: none; display: grid; place-items: center; opacity: 0; }
.sigilo-tela.ativo { animation: sg-tela 3.2s ease-in-out forwards; }
.sigilo-centro { display: grid; justify-items: center; gap: 10px; }
.sigilo-centro svg { width: min(62vmin, 420px); height: auto; filter: drop-shadow(0 0 12px var(--el)) drop-shadow(0 0 30px var(--el)); }
.sigilo-tela.ativo .sg-traco > * { stroke-dasharray: 700; stroke-dashoffset: 700; animation: sg-desenha 1.6s ease-out forwards; }
.sigilo-tela.ativo svg { animation: sg-gira 3.2s ease-in-out; }
.sigilo-centro p { font: 18px var(--corpo); color: #fff; text-shadow: 0 2px 8px #000; margin: 0; background: rgba(0,0,0,.45); padding: 4px 14px; border-radius: 20px; }
.sigilo-centro i { font-style: normal; font-weight: 700; }
@keyframes sg-tela { 0% { opacity: 0; background: rgba(0,0,0,0); } 12% { opacity: 1; background: rgba(0,0,0,.35); } 80% { opacity: 1; } 100% { opacity: 0; background: rgba(0,0,0,0); } }
@keyframes sg-desenha { to { stroke-dashoffset: 0; } }
@keyframes sg-gira { from { transform: rotate(-25deg) scale(.85); } to { transform: rotate(10deg) scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .sigilo-tela.ativo svg, .sigilo-tela.ativo .sg-traco > * { animation: none; stroke-dashoffset: 0; } }

/* =========================================================
   FAIXA DA INVESTIGAÇÃO
   ========================================================= */
.faixa-inv { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 7; max-width: calc(100% - 24px); background: rgba(10,9,6,.92); border: 1px solid #6b5a2e; border-radius: 10px; padding: 7px 14px; color: #f3e6c3; box-shadow: 0 8px 24px rgba(0,0,0,.5); cursor: pointer; }
.inv-linha { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: 14px; }
.inv-k { font: 11px var(--mono); letter-spacing: .14em; color: #d9b45a; text-transform: uppercase; }
.inv-urg { font-size: 12px; color: #c9b88a; }
.inv-relogio { display: inline-flex; gap: 3px; }
.inv-relogio i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid #d9b45a; }
.inv-relogio i.gasta { background: #6b5a2e; border-color: #6b5a2e; }
.inv-relogio i.atual { background: #d9b45a; box-shadow: 0 0 8px #d9b45a; }
.inv-pistas { font: 12px var(--mono); color: #d9b45a; }
.inv-lista { display: none; margin: 8px 0 2px; padding-left: 20px; font-size: 14px; line-height: 1.5; max-height: 40vh; overflow-y: auto; }
.faixa-inv.aberta .inv-lista { display: block; }
.inv-lista .vazio { list-style: none; color: #a89a74; font-style: italic; }
.faixa-inv.fim { border-color: #b3121b; }
.faixa-inv.fim .inv-linha b { color: #ff7b85; }
body.em-persg .faixa-inv { top: 40px; }
@media (max-width: 860px) { .faixa-inv { top: 64px; font-size: 13px; } body.em-persg .faixa-inv { top: 94px; } }

/* =========================================================
   ABA MESA DO MESTRE E ESCUDO
   ========================================================= */
.mesa-linha { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 6px 0; }
.mesa-linha input { flex: 1; min-width: 120px; }
#painel [data-mi], .mesa-linha button { border: 1px solid var(--linha); background: #1b1526; color: var(--texto); border-radius: 6px; padding: 6px 10px; font: 13px var(--corpo); cursor: pointer; }
#painel [data-mi].perigo { border-color: rgba(255,77,109,.6); color: #ffb3c0; }
#painel [data-mi].on { background: var(--roxo); border-color: var(--roxo); color: #fff; }
.mesa-campo { display: grid; gap: 4px; margin: 8px 0; font-size: 12px; color: var(--texto-dim); }
.mesa-campo select, .mesa-campo input, .mesa-linha input, .mesa-rec input, .mesa-rec select { background: #0d0a13; color: var(--texto); border: 1px solid var(--linha); border-radius: 6px; padding: 6px 8px; font: 14px var(--corpo); }
.mesa-pistas { padding-left: 18px; margin: 6px 0; font-size: 13px; }
.mesa-pistas button { padding: 0 6px !important; margin-left: 4px; }
.mesa-resp p { margin: 4px 0; font-size: 13px; }
.mesa-rec { display: grid; gap: 6px; margin: 8px 0; }
.mesa-rec-linha { display: grid; grid-template-columns: 1fr 86px 96px; gap: 6px; align-items: center; font-size: 13px; }
.mesa-rec-linha label { display: flex; gap: 4px; align-items: center; font-size: 11px; color: var(--texto-dim); }
.mesa-rec-linha input, .mesa-rec-linha select { width: 100%; padding: 4px 6px !important; }
.mesa-amb { display: flex; flex-wrap: wrap; gap: 6px; }
.mesa-amb button { border-left: 4px solid var(--el, var(--linha)) !important; }
.mesa-rol-res { margin-top: 8px; }
.mesa-rol-res .dados-faces { display: flex; gap: 4px; flex-wrap: wrap; }
.mesa-amea { border-left: 3px solid var(--el); padding: 4px 8px; margin: 6px 0; display: grid; }
.mesa-amea small { color: var(--texto-dim); font-size: 12px; }
.escudo { position: fixed; inset: 0; z-index: 85; background: rgba(4,3,6,.8); display: grid; place-items: center; padding: 16px; }
.escudo[hidden] { display: none; }
.escudo-caixa { width: min(1180px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; background: #f1ead8; color: #221d14; border-radius: 6px; box-shadow: 0 30px 90px rgba(0,0,0,.7); padding: 0 22px 18px; }
.escudo-caixa header { position: sticky; top: 0; background: #f1ead8; padding: 16px 0 10px; border-bottom: 2px solid #221d14; display: flex; align-items: baseline; gap: 14px; z-index: 1; }
.escudo-caixa header span { font: 11px var(--mono); letter-spacing: .2em; color: #8a1a14; }
.escudo-caixa header h2 { font: 400 26px 'Special Elite', var(--mono); margin: 0; flex: 1; color: #221d14; }
.escudo-caixa header button { background: none; border: 0; font-size: 30px; color: #221d14; cursor: pointer; }
.escudo-grade { columns: 3 320px; column-gap: 22px; padding-top: 14px; }
.escudo-grade section { break-inside: avoid; margin-bottom: 16px; border-top: 1px dashed #8a7d63; padding-top: 6px; }
.escudo-grade h3 { font: 400 16px 'Special Elite', var(--mono); margin: 2px 0 6px; color: #8a1a14; text-transform: uppercase; letter-spacing: .06em; }
.escudo-grade table { width: 100%; border-collapse: collapse; font-size: 13px; }
.escudo-grade th { text-align: left; font-weight: 600; padding: 2px 8px 2px 0; white-space: nowrap; vertical-align: top; }
.escudo-grade td { padding: 2px 0; }
.escudo-grade tr + tr { border-top: 1px solid rgba(34,29,20,.12); }
.escudo-grade ul { margin: 0; padding-left: 16px; font-size: 13px; line-height: 1.45; }
.escudo-grade li { margin-bottom: 3px; }
.escudo-rodape { font-size: 11px; color: #6b604b; margin: 8px 0 0; }

/* =========================================================
   MEMBRANA (rachaduras nas salas, cartão e lista do Mestre)
   ========================================================= */
.memb-fx { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.memb-fx svg { width: 100%; height: 100%; overflow: visible; }
.memb-fx path { fill: none; stroke: var(--el, #c4a8ff); stroke-width: .7; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px var(--el, #c4a8ff)); opacity: .85; }
.memb-fx .rc-fenda { fill: #000; stroke: var(--el, #c4a8ff); stroke-width: 2; vector-effect: non-scaling-stroke; opacity: 0; transform-origin: 50% 50%; }
.memb-fx .rc2, .memb-fx .rc3 { display: none; }
.sala.memb-rachada .rc2, .sala.memb-critica .rc2, .sala.memb-rompida .rc2 { display: inline; }
.sala.memb-critica .rc3, .sala.memb-rompida .rc3 { display: inline; }
.sala.memb-fissurada { box-shadow: inset 0 0 0 1px rgba(196,168,255,.25), inset 0 0 18px color-mix(in srgb, var(--el, #8b5cf6) 25%, transparent); }
.sala.memb-rachada { box-shadow: inset 0 0 0 1px rgba(196,168,255,.3), inset 0 0 34px color-mix(in srgb, var(--el, #8b5cf6) 40%, transparent); }
.sala.memb-critica { animation: memb-pulsa 2.4s ease-in-out infinite; }
.sala.memb-rompida { background-color: #0c0710; animation: memb-pulsa 1.3s ease-in-out infinite; }
.sala.memb-rompida .rc-fenda { opacity: .95; animation: memb-fenda 3s ease-in-out infinite; }
.sala.memb-critica .memb-fx path, .sala.memb-rompida .memb-fx path { stroke-width: 1.2; animation: memb-brilho 1.6s ease-in-out infinite; }
@keyframes memb-pulsa { 50% { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--el, #8b5cf6) 70%, transparent), inset 0 0 70px color-mix(in srgb, var(--el, #8b5cf6) 60%, transparent); } }
@keyframes memb-brilho { 50% { opacity: .45; } }
@keyframes memb-fenda { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.25, 1.1); } }
.sala-rotulo { z-index: 1; }
.memb-cartao { --cor-m: #7fd8b3; margin: 10px 0; padding: 8px 10px; border: 1px solid var(--linha); border-left: 3px solid var(--cor-m); border-radius: 6px; background: rgba(0,0,0,.25); }
.memb-g-fissurada { --cor-m: #e3c06e; } .memb-g-rachada { --cor-m: #ff9f43; } .memb-g-critica { --cor-m: #ff4d6d; } .memb-g-rompida { --cor-m: #c400ff; }
.memb-cab { display: flex; align-items: baseline; gap: 6px; }
.memb-cab span { font: 11px var(--mono); letter-spacing: .2em; color: var(--texto-dim); flex: 1; }
.memb-cab b { font: 700 22px var(--mono); color: var(--cor-m); }
.memb-cab small { color: var(--texto-dim); }
.memb-barra { display: block; height: 5px; border-radius: 3px; background: #1d1726; overflow: hidden; margin: 5px 0; }
.memb-barra > i { display: block; height: 100%; width: calc(var(--v) * 1%); background: var(--cor-m); transition: width .4s; }
.memb-acoes button { font-size: 12px; padding: 4px 8px; }
.memb-lista { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 4px; }
.memb-lista li { --cor-m: #7fd8b3; display: grid; grid-template-columns: 1fr 34px 70px auto; gap: 6px; align-items: center; font-size: 13px; }
.memb-lista li.memb-g-fissurada { --cor-m: #e3c06e; } .memb-lista li.memb-g-rachada { --cor-m: #ff9f43; } .memb-lista li.memb-g-critica { --cor-m: #ff4d6d; } .memb-lista li.memb-g-rompida { --cor-m: #c400ff; }
.memb-lista b { font-family: var(--mono); color: var(--cor-m); text-align: right; }
.memb-lista .memb-barra { margin: 0; }
.memb-lista button { padding: 2px 8px !important; }
.hud-memb { font: 12px var(--mono); color: var(--cor-m, #7fd8b3); text-shadow: 0 0 3px #000, 0 0 6px #000; margin-top: 3px; }

/* =========================================================
   MOMENTOS MARCANTES
   ========================================================= */
.momento-tela { position: fixed; inset: 0; z-index: 96; display: grid; place-items: center; pointer-events: none; opacity: 0; }
.momento-tela.ativo { opacity: 1; pointer-events: auto; }
.momento-tela.ativo .mm { animation: mm-entra .5s cubic-bezier(.2,1.6,.4,1) both; }
.momento-tela:not(.ativo) { transition: opacity .6s; }
.mm { display: grid; justify-items: center; gap: 6px; text-align: center; }
.mm p { margin: 0; font: 18px var(--corpo); color: #fff; text-shadow: 0 2px 8px #000; }
.mm-num { font: 700 min(38vmin, 260px)/1 var(--display); }
.mm-20 .mm-num { color: #ffe08a; text-shadow: 0 0 20px #ffb300, 0 0 60px #ff8f00, 0 6px 0 #6b4a00; }
.mm-raios { position: absolute; width: 120vmax; height: 120vmax; left: 50%; top: 50%; translate: -50% -50%; background: repeating-conic-gradient(rgba(255,214,102,.22) 0 6deg, transparent 6deg 18deg); mask: radial-gradient(circle, #000 0 20%, transparent 55%); animation: mm-gira 3.4s linear; z-index: -1; }
.k-20.ativo { background: radial-gradient(circle, rgba(60,40,0,.55), rgba(0,0,0,.25) 60%); }
.mm-1 { position: relative; }
.mm-1 .mm-num { color: #050505; -webkit-text-stroke: 3px #3a3a3a; text-shadow: 0 0 2px #000, 0 10px 30px rgba(0,0,0,.9), 0 0 60px rgba(120,120,140,.35); animation: mm-murcha 3.6s .3s ease-in forwards; transform-origin: 50% 100%; }
.mm-choro { position: absolute; left: 50%; top: 42%; font-style: normal; font-size: min(10vmin, 64px); translate: calc(-50% + var(--x)) calc(-50% + var(--y)); opacity: 0; animation: mm-chora 3.6s var(--d) ease-out forwards; filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)); }
@keyframes mm-murcha { 0% { transform: none; } 30% { transform: rotate(-4deg); } 60% { transform: rotate(3deg) translateY(4px); } 100% { transform: rotate(-9deg) translateY(18px) scaleY(.94); } }
@keyframes mm-chora { 0% { opacity: 0; transform: scale(.3); } 15% { opacity: 1; transform: scale(1.15); } 25% { transform: scale(1); } 70% { opacity: 1; transform: translateY(2vmin); } 100% { opacity: 0; transform: translateY(9vmin); } }
.k-1.ativo { background: radial-gradient(circle, rgba(70,70,80,.55), rgba(0,0,0,.82) 70%); backdrop-filter: grayscale(1); }
.k-obito.ativo, .k-insano.ativo { background: rgba(4,2,6,.82); backdrop-filter: grayscale(1) blur(2px); }
.mm-papel { position: relative; width: min(300px, 80vw); background: #efe6cf; color: #221d14; padding: 14px 16px 18px; border-radius: 3px; box-shadow: 0 30px 80px #000; display: grid; justify-items: center; gap: 4px; rotate: -2deg; }
.mm-cab { font: 10px var(--mono); letter-spacing: .2em; color: #6b604b; }
.mm-foto { width: 150px; height: 150px; background: #bfb59c center/cover; border: 4px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4); filter: grayscale(1) contrast(1.1); margin: 6px 0; }
.mm-nome { font: 400 24px 'Special Elite', var(--mono); }
.mm-papel small { color: #6b604b; }
.mm-data { font: 12px var(--mono); color: #6b604b; }
.mm-carimbo { position: absolute; top: 44%; left: 50%; translate: -50% -50%; font: 700 46px 'Special Elite', var(--mono); font-style: normal; letter-spacing: .12em; color: #b3121b; border: 5px double #b3121b; padding: 2px 14px; rotate: -18deg; opacity: 0; mix-blend-mode: multiply; }
.momento-tela.ativo .mm-carimbo { animation: mm-carimba .35s 1s cubic-bezier(.3,1.8,.5,1) forwards; }
.mm-insano .mm-carimbo { color: #7b2fd1; border-color: #7b2fd1; }
.mm-insano .mm-foto { animation: mm-glitch 1.1s steps(2) infinite 1.2s; }
@keyframes mm-entra { from { transform: scale(.4); opacity: 0; } }
@keyframes mm-gira { to { rotate: 40deg; } }
@keyframes mm-treme { 20%, 60% { translate: -6px 0; } 40%, 80% { translate: 6px 0; } }
@keyframes mm-carimba { from { opacity: 0; scale: 2.4; } to { opacity: .9; scale: 1; } }
@keyframes mm-glitch { 0% { filter: grayscale(1) hue-rotate(0); translate: 0; } 50% { filter: grayscale(0) hue-rotate(250deg) saturate(3); translate: 3px -2px; } }

/* =========================================================
   RELATÓRIO O.R.F.E.U.
   ========================================================= */
.relatorio-tela { position: fixed; inset: 0; z-index: 86; background: rgba(4,3,6,.82); display: grid; place-items: center; padding: 16px; }
.relatorio-tela[hidden] { display: none; }
.rel-folha { width: min(900px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; background: #f1ead8; color: #221d14; border-radius: 4px; padding: 18px 24px; box-shadow: 0 30px 90px rgba(0,0,0,.7); font: 14px/1.5 var(--corpo); }
.rel-cab { display: flex; justify-content: space-between; gap: 12px; border-bottom: 2px solid #221d14; padding-bottom: 8px; }
.rel-cab span { font: 10px var(--mono); letter-spacing: .2em; color: #8a1a14; }
.rel-cab h2 { font: 400 28px 'Special Elite', var(--mono); margin: 2px 0 0; }
.rel-cab h2 small { display: block; font-size: 17px; color: #4a4030; }
.rel-selo { font: 700 11px/1.3 var(--mono); font-style: normal; color: #b3121b; border: 3px double #b3121b; padding: 6px 10px; rotate: 6deg; align-self: center; text-align: center; letter-spacing: .14em; }
.rel-meta { color: #6b604b; font-size: 12px; }
.rel-folha h3 { font: 400 16px 'Special Elite', var(--mono); color: #8a1a14; text-transform: uppercase; margin: 14px 0 6px; }
.rel-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.rel-tab th, .rel-tab td { text-align: left; padding: 5px 6px; border-bottom: 1px solid rgba(34,29,20,.18); vertical-align: top; }
.rel-tab thead th { font: 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #6b604b; }
.rel-tab td i { color: #a89d85; font-style: normal; }
.rel-fim { color: #b3121b; letter-spacing: .1em; }
.rel-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 22px; }
.rel-grade ol, .rel-grade ul { margin: 0; padding-left: 18px; }
.rel-linha { margin-top: 12px; }
.rel-linha summary { cursor: pointer; font: 400 15px 'Special Elite', var(--mono); color: #8a1a14; }
.rel-linha ol { list-style: none; padding: 0; font-size: 12.5px; columns: 2 280px; }
.rel-linha time { font-family: var(--mono); color: #6b604b; margin-right: 4px; }
.rel-folha .mini { color: #6b604b; }
.rel-texto { width: 100%; min-height: 160px; margin-top: 8px; font: 12px var(--mono); }
.rel-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; border-top: 1px dashed #8a7d63; padding-top: 12px; }
.rel-acoes button { border: 1px solid #221d14; background: transparent; color: #221d14; border-radius: 5px; padding: 8px 12px; font: 14px var(--corpo); }
.rel-acoes .btn-protocolo { background: #221d14; color: #f1ead8; }
@media print {
  body.imprimindo-rel { overflow: visible; background: #fff; }
  body.imprimindo-rel > *:not(#relatorioTela) { display: none !important; }
  body.imprimindo-rel #relatorioTela { position: static; background: none; padding: 0; display: block; }
  body.imprimindo-rel .rel-folha { box-shadow: none; max-height: none; overflow: visible; width: 100%; background: #fff; }
  body.imprimindo-rel .rel-acoes { display: none; }
  body.imprimindo-rel .rel-linha > ol { display: block !important; }
  body.imprimindo-rel .rel-linha:not([open]) summary::after { content: ''; }
}

/* =========================================================
   ARQUIVO DA O.R.F.E.U. (cifras, documentos, visões)
   ========================================================= */
.btn-arquivo { width: 100%; margin-top: 8px; border-color: #8a7d63; color: #efe6cf; position: relative; }
.btn-arquivo .n { position: absolute; right: 8px; top: 50%; translate: 0 -50%; background: #b3121b; color: #fff; border-radius: 10px; padding: 0 7px; font: 12px var(--mono); }
/* ---------- Arquivo: estante e leitor ---------- */
.arquivo-tela { --papel: #f3ecdb; --papel2: #e8dfc8; --tinta: #221d14; --tinta2: #6f6450; --fio: rgba(34,29,20,.14); --verm: #8a1a14;
  position: fixed; inset: 0; z-index: 84; background: rgba(4,3,6,.78); backdrop-filter: blur(2px); display: grid; place-items: center; padding: 16px; }
.arquivo-tela[hidden] { display: none; }
.arq-caixa { position: relative; width: min(1180px, 100%); height: min(880px, calc(100dvh - 32px)); display: flex; flex-direction: column; background: var(--papel); color: var(--tinta); border-radius: 8px; box-shadow: 0 30px 90px rgba(0,0,0,.7); overflow: hidden; }
.arq-cab { display: flex; align-items: flex-end; gap: 22px; padding: 14px 18px 0 22px; border-bottom: 1px solid var(--fio); background: var(--papel); flex-shrink: 0; }
.arq-cab > div { padding-bottom: 10px; }
.arq-cab span { display: block; font: 10px var(--mono); letter-spacing: .22em; color: var(--verm); }
.arq-cab h2 { font: 400 24px 'Special Elite', var(--mono); margin: 0; line-height: 1.1; }
.arq-abas { display: flex; gap: 4px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.arq-abas::-webkit-scrollbar { display: none; }
.arq-caixa .arq-abas button { position: relative; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; padding: 8px 12px 10px; font: 15px 'Special Elite', var(--mono); color: var(--tinta2); white-space: nowrap; }
.arq-caixa .arq-abas button:hover { color: var(--tinta); }
.arq-caixa .arq-abas button.on { color: var(--verm); border-bottom-color: var(--verm); }
.arq-ponto { font-style: normal; margin-left: 6px; background: var(--verm); color: #fff; font: 10px/16px var(--mono); padding: 0 5px; border-radius: 8px; vertical-align: 2px; }
.arq-caixa .arq-x { align-self: center; margin-bottom: 8px; border: 0; background: none; font-size: 28px; line-height: 1; color: var(--tinta2); padding: 0 4px; }
.arq-caixa .arq-x:hover { color: var(--tinta); }
.arq-corpo { flex: 1; min-height: 0; display: grid; grid-template-columns: 310px 1fr; }
/* estante */
.arq-estante { display: flex; flex-direction: column; min-height: 0; background: var(--papel2); border-right: 1px solid var(--fio); }
.arq-ferr { padding: 12px 12px 8px; display: grid; gap: 8px; border-bottom: 1px solid var(--fio); }
.arq-ferr input[type=search] { width: 100%; font: 14px var(--corpo); color: var(--tinta); background: var(--papel); border: 1px solid var(--fio); border-radius: 18px; padding: 7px 12px; }
.arq-ferr input[type=search]:focus { outline: 2px solid rgba(138,26,20,.35); border-color: transparent; }
.arq-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.arq-caixa .arq-chips button { border: 1px solid var(--fio); border-radius: 12px; background: transparent; padding: 3px 10px; font: 12px var(--corpo); color: var(--tinta2); }
.arq-caixa .arq-chips button.on { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.arq-selects { display: flex; gap: 6px; }
.arq-selects select { flex: 1; min-width: 0; font: 12px var(--corpo); color: var(--tinta); background: transparent; border: 1px solid var(--fio); border-radius: 6px; padding: 4px 6px; }
.arq-lista { flex: 1; overflow-y: auto; padding: 6px 6px 10px; }
.arq-pasta + .arq-pasta { margin-top: 2px; }
.arq-caixa .arq-pasta-cab { width: 100%; display: flex; justify-content: space-between; align-items: center; border: 0; background: none; padding: 8px 8px 4px; font: 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta2); }
.arq-pasta-cab span::before { content: '▾'; display: inline-block; margin-right: 6px; transition: transform .15s; }
.arq-pasta.fechada .arq-pasta-cab span::before { transform: rotate(-90deg); }
.arq-pasta-cab i { font-style: normal; opacity: .7; }
.arq-caixa .arq-row { width: 100%; display: flex; align-items: center; gap: 8px; text-align: left; border: 0; border-radius: 6px; background: none; padding: 7px 8px; color: var(--tinta); }
.arq-caixa .arq-row:hover { background: rgba(255,255,255,.45); }
.arq-caixa .arq-row.on { background: var(--papel); box-shadow: inset 3px 0 0 var(--verm), 0 1px 2px rgba(34,29,20,.08); }
.arq-row.ocu .arq-row-txt b { color: var(--tinta2); }
.arq-row-txt { flex: 1; min-width: 0; display: grid; }
.arq-row-txt b { font: 400 15px 'Special Elite', var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arq-row-txt small { font: 11px var(--corpo); color: var(--tinta2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arq-estado { flex: none; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--tinta2); }
.arq-estado.pub { background: #2f8a5b; border-color: #2f8a5b; }
.arq-marca { flex: none; font: 9px/15px var(--mono); font-style: normal; letter-spacing: .1em; padding: 0 5px; border-radius: 3px; color: #fff; background: var(--verm); }
.arq-marca.liberado { background: #b07d12; }
.arq-gl { flex: none; width: 26px; height: 26px; }
.arq-letra { display: inline-block; min-width: 1.4em; }
.arq-letra.conf { color: var(--verm); } .arq-letra.pal { font-family: 'Caveat', cursive; font-size: 19px; color: #3f5f8c; } .arq-letra.sem { color: var(--tinta2); }
.arq-estante-pe { padding: 10px 12px; border-top: 1px solid var(--fio); }
.arq-estante-pe[hidden] { display: none; }
.arq-estante-pe button { width: 100%; }
.arq-vazio { color: var(--tinta2); font-style: italic; padding: 10px; }
/* leitor */
.arq-leitor { min-height: 0; overflow-y: auto; background: var(--papel); }
.arq-barra { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 22px; background: rgba(243,236,219,.94); backdrop-filter: blur(4px); border-bottom: 1px solid var(--fio); min-height: 50px; }
.arq-barra:not(:has(button:not(.arq-voltar))) { min-height: 0; padding: 0; border: 0; }
.arq-caixa .arq-barra button, .arq-caixa .arq-papel button:not(.cf-cel):not(.tj-m), .arq-caixa .arq-estante-pe button, .arq-caixa .arq-modal button:not(.arq-x) { border: 1px solid var(--fio); background: rgba(255,255,255,.5); color: var(--tinta); border-radius: 6px; padding: 6px 11px; font: 13px var(--corpo); }
.arq-caixa .arq-barra button:hover, .arq-caixa .arq-papel button:not(.cf-cel):not(.tj-m):hover { border-color: var(--tinta2); }
.arq-caixa button.pri { background: var(--tinta) !important; color: var(--papel) !important; border-color: var(--tinta) !important; }
.arq-caixa button.perigo { color: var(--verm) !important; border-color: rgba(138,26,20,.35) !important; background: transparent !important; }
.arq-caixa .arq-barra button.on { background: #f1d98a; border-color: #c9a14a; }
.arq-dir { margin-left: auto; }
.arq-caixa .arq-voltar { display: none; }
.arq-papel { padding: 18px 22px 40px; max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.arq-meta { margin: 0; font: 12px var(--corpo); color: var(--tinta2); }
.arq-papel .mini { color: var(--tinta2); margin: 0; font-size: 12px; }
.arq-sub { font: 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta2); margin: 6px 0 0; }
.arq-plano { margin: 0 0 10px; font: 13px var(--mono); color: var(--tinta2); white-space: pre-wrap; border-left: 2px solid var(--fio); padding-left: 8px; }
.arq-leitor-vazio { display: grid; place-items: center; align-content: center; gap: 6px; height: 100%; min-height: 300px; color: var(--tinta2); text-align: center; }
.arq-leitor-vazio span { font-size: 40px; opacity: .35; }
.arq-papel .doc-folha, .cf-folha, .vs-folha { max-width: none; box-shadow: 0 1px 0 var(--fio), 0 8px 24px rgba(34,29,20,.08); border: 1px solid rgba(34,29,20,.1); }
.cf-folha { background: #fbf7ec; padding: 16px 20px; }
.cf-folha header { border-bottom: 1px solid var(--tinta); margin-bottom: 12px; }
.cf-folha h3 { margin: 2px 0 6px; font: 400 21px 'Special Elite', var(--mono); }
.vs-folha { background: #14101a; color: #f4eee0; padding: 22px; text-align: center; display: grid; gap: 10px; justify-items: center; }
.vs-folha img { max-width: min(460px, 100%); max-height: 50vh; object-fit: contain; filter: grayscale(.4) contrast(1.1); }
.vs-folha p { margin: 0; font: 400 22px/1.35 'Special Elite', var(--mono); }
.vs-folha small { color: #8a8190; font: 11px var(--mono); }
.gl-ficha { display: flex; align-items: center; gap: 22px; background: #fbf7ec; border: 1px solid rgba(34,29,20,.1); padding: 18px; }
.gl-grande { width: 120px; height: 120px; flex: none; }
.gl-letra { margin: 0; font: 400 64px/1 'Special Elite', var(--mono); }
.gl-letra.conf { color: var(--verm); } .gl-letra.pal { font-family: 'Caveat', cursive; color: #3f5f8c; } .gl-letra.sem { color: rgba(34,29,20,.25); }
/* janela do formulário */
.arq-modal { position: absolute; inset: 0; z-index: 5; background: rgba(34,29,20,.35); display: grid; place-items: center; padding: 16px; }
.arq-modal[hidden] { display: none; }
.arq-modal-caixa { width: min(640px, 100%); max-height: 100%; overflow-y: auto; background: var(--papel); border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.35); padding: 0 20px 18px; }
.arq-modal-caixa > header { position: sticky; top: 0; background: var(--papel); display: flex; justify-content: space-between; align-items: center; padding: 14px 0 10px; border-bottom: 1px solid var(--fio); margin-bottom: 12px; z-index: 1; }
.arq-modal-caixa > header b { font: 400 19px 'Special Elite', var(--mono); color: var(--verm); }
.arq-modal-caixa .arq-x { margin: 0; }
#arqForm { display: grid; gap: 10px; }
#arqForm .mini { margin: 0; color: var(--tinta2); font-size: 12px; }
.arq-campo { display: grid; gap: 4px; font: 11px var(--mono); letter-spacing: .06em; color: var(--tinta2); flex: 1 1 160px; }
.arq-campo.arq-largo { flex: 2 1 240px; }
.arq-campo input, .arq-campo textarea, .arq-campo select { font: 15px var(--corpo); color: var(--tinta); background: #fbf7ec; border: 1px solid var(--fio); border-radius: 6px; padding: 7px 9px; letter-spacing: 0; }
.arq-campo textarea { resize: vertical; font-family: 'Special Elite', var(--mono); font-size: 14px; line-height: 1.6; }
.arq-linha { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.arq-form-pe { justify-content: flex-end; padding-top: 6px; }
.arq-prev:empty { display: none; }
.arq-prev { background: #fbf7ec; border: 1px dashed var(--fio); padding: 8px; color: var(--tinta); }
@media (max-width: 700px) {
  .arquivo-tela { padding: 0; }
  .arq-caixa { width: 100%; height: 100dvh; border-radius: 0; }
  .arq-cab { flex-wrap: wrap; gap: 0 10px; padding: 10px 12px 0; }
  .arq-cab > div { padding-bottom: 4px; flex: 1; }
  .arq-cab h2 { font-size: 20px; }
  .arq-abas { order: 3; flex-basis: 100%; }
  .arq-caixa .arq-abas button { padding: 6px 10px 8px; font-size: 14px; }
  .arq-caixa .arq-x { order: 2; margin: 0; }
  .arq-corpo { grid-template-columns: 1fr; }
  .arq-corpo[data-mob="lista"] .arq-leitor { display: none; }
  .arq-corpo[data-mob="leitor"] .arq-estante { display: none; }
  .arq-estante { border-right: 0; }
  .arq-caixa .arq-voltar { display: inline-block; }
  .arq-barra { padding: 8px 12px; min-height: 0; }
  .arq-papel { padding: 14px 12px 40px; }
  .gl-ficha { gap: 14px; } .gl-grande { width: 84px; height: 84px; } .gl-letra { font-size: 48px; }
  .arq-modal { padding: 0; }
  .arq-modal-caixa { height: 100%; border-radius: 0; }
}
body.arq-aberto .hud-retratos { visibility: hidden; }

/* símbolos */
.glifo { width: 100%; height: 100%; display: block; }
.glifo path, .glifo circle { fill: none; stroke: currentColor; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.glifo .gl-ponto { fill: currentColor; stroke-width: 0; }
.cifra { color: #221d14; }
.cf-texto { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-end; }
.cf-palavra { display: inline-flex; gap: 3px; }
.cf-br { flex-basis: 100%; height: 0; }
.cf-cel { --t: 38px; width: var(--t); display: grid; grid-template-rows: 20px var(--t) auto; justify-items: center; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; }
.cf-cel .glifo { width: var(--t); height: var(--t); }
.cf-cel:hover .glifo { color: #8a1a14; }
.cf-letra { font: 22px/20px 'Caveat', cursive; color: #5a6f8f; min-width: 1ch; border-bottom: 1px solid currentColor; opacity: .55; width: 70%; text-align: center; }
.cf-cel.pal .cf-letra { opacity: 1; }
.cf-cel.rev .cf-letra { font: 700 17px/20px 'Special Elite', var(--mono); color: #b3121b; opacity: 1; border-bottom-color: transparent; }
.cf-certo { font: 10px var(--mono); color: #8a7d63; }
.cf-cel.pal-ok .cf-letra { color: #1f7a4d; } .cf-cel.pal-erro .cf-letra { color: #c0392b; text-decoration: line-through; }
.cf-pont { font: 26px var(--mono); align-self: flex-end; }
.cf-mini .cf-cel { --t: 24px; grid-template-rows: 16px var(--t) auto; }
.cf-mini .cf-letra { font-size: 17px; line-height: 16px; }
.cf-mini .cf-cel.rev .cf-letra { font-size: 13px; line-height: 16px; }
.cf-mini .cf-texto { gap: 8px 12px; }
.cf-tit { display: block; font: 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; opacity: .8; }
.cf-chave .cf-texto { gap: 10px; }
.msg-txt .cifra, .cartao .cifra { color: var(--texto); background: rgba(0,0,0,.25); border: 1px solid var(--linha); border-radius: 6px; padding: 6px 8px; margin: 4px 0; }
.msg-txt .cf-letra, .cartao .cf-letra { color: #9fc3ff; }
.msg-txt .cf-cel.rev .cf-letra, .cartao .cf-cel.rev .cf-letra { color: #ff6b75; }
.msg-txt .cf-cel:hover .glifo, .cartao .cf-cel:hover .glifo { color: var(--roxo-claro); }
.cf-palpite { position: fixed; z-index: 120; width: 200px; background: #efe6cf; color: #221d14; border-radius: 6px; padding: 10px; box-shadow: 0 12px 40px rgba(0,0,0,.6); display: grid; gap: 6px; }
.cf-palpite[hidden] { display: none; }
.cf-pp-gl { width: 56px; height: 56px; justify-self: center; }
.cf-palpite label { display: grid; gap: 3px; font: 11px var(--mono); color: #6b604b; }
.cf-palpite input { font: 30px 'Caveat', cursive; text-align: center; text-transform: uppercase; border: 1px solid #b8ab8e; border-radius: 4px; background: #fbf7ec; color: #221d14; padding: 0; }
.cf-pp-btns { display: flex; gap: 6px; }
.cf-pp-btns button { flex: 1; border: 1px solid #221d14; background: transparent; border-radius: 4px; padding: 5px; color: #221d14; }
.cf-pp-btns .pri { background: #221d14; color: #efe6cf; }
.cf-palpite .mini { margin: 0; font-size: 11px; color: #6b604b; }

/* documentos tarjados */
.doc-folha { background: #fbf7ec; border: 1px solid #c9bc9d; box-shadow: 2px 3px 0 rgba(34,29,20,.15); padding: 14px 18px; position: relative; max-width: 720px; }
.doc-folha header { border-bottom: 1px solid #221d14; margin-bottom: 10px; }
.doc-cab { font: 10px var(--mono); letter-spacing: .18em; color: #8a1a14; text-transform: uppercase; }
.doc-folha h3 { margin: 2px 0 6px; font: 400 21px 'Special Elite', var(--mono); }
.doc-corpo { font: 15px/1.75 'Special Elite', var(--mono); white-space: pre-wrap; word-wrap: break-word; }
.doc-folha footer { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font: 11px var(--mono); color: #6b604b; }
.doc-carimbo { font: 700 13px var(--mono); font-style: normal; letter-spacing: .2em; color: #b3121b; border: 2px solid #b3121b; padding: 1px 8px; rotate: -4deg; opacity: .8; }
.tj { background: #111; color: transparent; border-radius: 1px; box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 2px; user-select: none; }
.tj-rev { background: rgba(255,224,102,.35); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.tj-rev.anima { background: linear-gradient(90deg, rgba(255,224,102,.45) 50%, #111 50%) right / 200% 100% no-repeat; animation: tj-abre 1.4s ease-out forwards; }
@keyframes tj-abre { to { background-position: left; } }
.tj-m { font: inherit; color: #221d14; background: rgba(17,17,17,.14); border: 0; border-bottom: 2px solid #111; padding: 0 2px; cursor: pointer; border-radius: 0; }
.tj-m.aberta { background: rgba(255,224,102,.45); border-bottom-color: #c9a14a; }
.cartao .doc-folha { color: #221d14; }
.arq-sala { margin: 10px 0; padding-top: 8px; border-top: 1px dashed var(--linha); }
.arq-sala p { margin: 4px 0; font-size: 13px; }
.arq-sala small { color: var(--texto-dim); }
.sala.tem-arq::before { content: '◈'; position: absolute; right: 6%; bottom: 5%; font-size: 26px; color: #e3c06e; text-shadow: 0 0 8px #000, 0 0 14px rgba(227,192,110,.6); pointer-events: none; z-index: 1; }

/* visões */
.visao-tela { position: fixed; inset: 0; z-index: 110; background: #000; display: grid; place-items: center; overflow: hidden; cursor: default; }
.visao-tela[hidden] { display: none; }
.visao-tela.fim { cursor: pointer; }
.vs-img { position: absolute; inset: 8%; background: center/contain no-repeat; opacity: 0; }
.vs-txt { position: relative; z-index: 1; max-width: min(760px, 88vw); text-align: center; font: 400 clamp(22px, 4.6vw, 42px)/1.3 'Special Elite', var(--mono); color: #f4eee0; text-shadow: 0 0 12px #000, 0 0 30px #000; opacity: 0; margin: 0; }
.vs-fechar { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; font: 12px var(--mono); color: #8a8190; opacity: 0; transition: opacity .5s; }
.visao-tela.fim .vs-fechar { opacity: 1; }
.visao-tela.ativa .vs-img { animation: vs-pisca var(--dur) steps(1) forwards; }
.visao-tela.ativa .vs-txt { animation: vs-surge var(--dur) ease-out forwards; }
.visao-tela.fim .vs-img { opacity: .55; filter: grayscale(.6); animation: none; }
.visao-tela.fim .vs-txt { opacity: 1; animation: none; }
.visao-tela.ef-clarao.ativa { animation: vs-clarao .9s ease-out; }
.visao-tela.ef-estatica::after { content: ''; position: absolute; inset: -50%; background: repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 3px), radial-gradient(circle, transparent 40%, rgba(0,0,0,.8)); animation: vs-chuvisco .2s steps(3) infinite; pointer-events: none; }
.visao-tela.ef-estatica.ativa .vs-img { filter: contrast(1.6) grayscale(1); }
.visao-tela.ef-sangue { background: radial-gradient(circle, #1a0003, #000 70%); }
.visao-tela.ef-sangue::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 160px 40px rgba(179,18,27,.75); animation: vs-pulso 1.1s ease-in-out infinite; pointer-events: none; }
.visao-tela.ef-sussurro .vs-txt { font-style: italic; letter-spacing: .08em; color: #c9c0d6; }
@keyframes vs-pisca { 0% { opacity: 0; } 8% { opacity: 1; } 12% { opacity: 0; } 18% { opacity: 1; } 22% { opacity: .2; } 30%, 100% { opacity: .9; } }
@keyframes vs-surge { 0%, 20% { opacity: 0; letter-spacing: .5em; filter: blur(6px); } 45%, 100% { opacity: 1; letter-spacing: normal; filter: none; } }
@keyframes vs-clarao { 0% { background: #fff; } 100% { background: #000; } }
@keyframes vs-chuvisco { 33% { translate: 3% -2%; } 66% { translate: -2% 3%; } }
@keyframes vs-pulso { 50% { box-shadow: inset 0 0 220px 70px rgba(179,18,27,.9); } }

/* ficha: gasto de PE no turno e munição */
.fx-gasto span:last-child { display: inline-flex; align-items: center; gap: 4px; }
.fx-gasto .fx-mini { padding: 0 5px; font-size: 11px; line-height: 1.4; }
.fx-gasto.cheio output { color: #e3a94a; }
.fx-gasto.passou output { color: #ff4d6d; font-weight: 700; }
.fx-gasto.passou { animation: mm-treme .4s; }
.fx-mun { font-style: normal; }
.fx-mun-falta, .fx-mun-falta b { color: #ff4d6d !important; }
@media (max-width: 640px) {
  .arq-cab, .arq-corpo { padding-left: 12px; padding-right: 12px; }
  .arq-abas { padding: 6px 12px 0; }
  .arq-cab h2 { font-size: 21px; }
  .cf-cel { --t: 30px; }
  .rel-folha { padding: 14px; }
  .rel-tab { font-size: 12px; display: block; overflow-x: auto; }
  .memb-lista li { grid-template-columns: 1fr 30px 50px auto; }
}
.rel-acoes .btn-protocolo { width: auto; margin: 0; }
/* com o cartão de sala ou ficha aberto, os retratos andam para o lado em vez de cobrir o cartão */
@media (min-width: 861px) { .palco-area:has(> #cartao:not([hidden])) .hud-retratos { left: 292px; } }
@media (max-width: 860px) { .palco-area:has(> #cartao:not([hidden])) .hud-retratos { display: none; } }
.mm-carimbo { mix-blend-mode: normal; top: 70%; background: rgba(239,230,207,.82); }
.cf-palpite > *, .cf-palpite label > * { min-width: 0; }
.cf-palpite input { width: 100%; box-sizing: border-box; }
.cf-pp-btns button { min-width: 0; width: auto; }

/* cores dos personagens */
.cor-pop { position: fixed; z-index: 130; width: min(280px, calc(100vw - 16px)); background: #120f1a; border: 1px solid var(--linha); border-radius: 10px; padding: 10px; box-shadow: 0 16px 50px rgba(0,0,0,.7); display: grid; gap: 10px; }
.cor-pop[hidden] { display: none; }
.cor-pop-topo { display: flex; align-items: center; gap: 8px; }
.cor-pop-topo b { flex: 1; font-family: var(--display); }
.cor-pop-topo .fechar { background: none; border: 0; font-size: 22px; color: var(--texto-dim); }
.cor-pop .pinta, .btn-cor .pinta, .cores-tray .pinta { display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: var(--cor) center/cover; box-shadow: 0 0 0 2px var(--cor); flex: none; }
.cores-tray .pinta.filho { border-radius: 4px; }
.cor-grade { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.cor-grade button { aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(255,255,255,.12); background: var(--c); padding: 0; }
.cor-grade button.on { border-color: #fff; box-shadow: 0 0 0 2px var(--c); }
.cor-espectro { display: flex; align-items: center; gap: 8px; font: 12px var(--mono); color: var(--texto-dim); }
.cor-espectro input { flex: 1; height: 36px; border: 1px solid var(--linha); border-radius: 6px; background: #0b0910; padding: 2px; cursor: pointer; }
.cor-espectro output { font: 12px var(--mono); color: var(--texto); }
.cor-pop-acoes button { width: 100%; background: transparent; border: 1px solid var(--linha); color: var(--texto-dim); border-radius: 6px; padding: 6px; font-size: 13px; }
.btn-cor { display: flex; align-items: center; gap: 8px; justify-content: center; }
#btnMinhaCor { width: 100%; margin-top: 8px; }
.cores-tray button { display: inline-flex; align-items: center; gap: 6px; }

/* escuta dos auxiliares: mancha borrada, rastro e seta */
.eco-zona { position: absolute; width: calc(5 * 40px * 2.1); height: calc(5 * 40px * 2.1); translate: -50% -50%; border-radius: 50%; pointer-events: none; z-index: 1;
  background: radial-gradient(circle, rgba(255,40,60,calc(.12 + var(--som, 0) * .1)) 0%, rgba(255,40,60,calc(var(--som, 0) * .05)) 45%, transparent 70%); filter: blur(6px); animation: eco-bate calc(2.2s - var(--som, 1) * .3s) ease-in-out infinite; }
.eco-zona.rastro { background: radial-gradient(circle, rgba(255,80,100,calc(var(--rastro, 0) * .22)) 0%, transparent 60%); animation: none; }
.eco-zona.pulso::after { content: ''; position: absolute; inset: 30%; border-radius: 50%; border: 3px solid rgba(255,60,80,.9); animation: eco-onda 1.2s ease-out forwards; }
@keyframes eco-bate { 50% { transform: scale(1.08); opacity: .8; } }
@keyframes eco-onda { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.eco-seta { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 6; }
.eco-seta i { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; transform: rotate(var(--ang)) translateY(-46px); }
.eco-seta i::before { content: ''; position: absolute; inset: 0; background: rgba(255,60,80,calc(.5 + var(--som, 1) * .1)); clip-path: polygon(50% 0, 100% 100%, 50% 72%, 0 100%); filter: drop-shadow(0 0 4px #ff3b5c); animation: eco-seta 1.2s ease-in-out infinite; }
@keyframes eco-seta { 50% { transform: translateY(-5px); } }
.escuta-aux { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.escuta-aux li { border-left: 3px solid var(--cor, #ff3b5c); padding: 2px 8px; }
.escuta-aux li.vazio { border-left-color: var(--linha); color: var(--texto-dim); }
.kit-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0; }
#blocoKitAux input { background: #0b0910; border: 1px solid var(--linha); color: var(--texto); border-radius: 6px; padding: 6px 8px; font: 14px var(--mono); }
@media (max-width: 400px) { .arq-caixa .arq-abas button { padding: 6px 8px 8px; font-size: 13px; } }

/* =========================================================
   ARQUIVO · TERMINAL O.R.F.E.U. e COFRE
   ========================================================= */
.arq-corpo[data-term="1"] { grid-template-columns: 1fr; }
.arq-corpo[data-term="1"] .arq-estante { display: none !important; }
.arq-corpo[data-term="1"] .arq-leitor { display: block !important; background: #000; overflow: hidden; }
.term-crt { --fos: #4cff4c; --fos2: #9dffb6; --fos-dim: #2bbf5a; --ambar: #ffb454; height: 100%; position: relative; background: radial-gradient(ellipse at center, #05160b 0%, #020b05 70%, #000 100%); animation: termLiga 1.1s cubic-bezier(.2,.8,.2,1) 1; transform-origin: center; }
.term-crt::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(0,0,0,.28) 0 1px, transparent 1px 3px); }
.term-crt::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(to bottom, rgba(140,255,170,0) 0%, rgba(140,255,170,.06) 50%, rgba(140,255,170,0) 100%); background-size: 100% 26%; background-repeat: no-repeat; animation: termVarre 8s linear infinite; }
@keyframes termLiga { 0% { transform: scale(1.04, .004); filter: brightness(6); opacity: 0; } 40% { transform: scale(1, .03); opacity: 1; } 70% { transform: none; filter: brightness(1.8); } 100% { transform: none; filter: none; } }
@keyframes termVarre { 0% { background-position: 0 -30%; } 100% { background-position: 0 130%; } }
.term-tela { position: relative; z-index: 1; height: 100%; overflow-y: auto; padding: clamp(14px, 3vw, 34px); font: 20px/1.25 'VT323', 'Share Tech Mono', monospace; color: var(--fos); letter-spacing: .4px; text-shadow: 0 0 1px rgba(76,255,76,.55), 0 0 7px rgba(76,255,76,.2); animation: termPisca 5.5s infinite 1.2s; }
@keyframes termPisca { 0%, 100% { opacity: .98; } 43% { opacity: .88; } 45% { opacity: .99; } 82% { opacity: .95; } }
.term-saida { margin: 0; font: inherit; white-space: pre-wrap; word-break: break-word; max-width: 980px; }
.term-saida b, .term-saida .term-tit { color: var(--fos2); font-weight: 400; text-shadow: 0 0 2px rgba(157,255,182,.8), 0 0 10px rgba(76,255,76,.35); }
.term-forte { color: var(--fos2); }
.term-dim { color: var(--fos-dim); }
.term-cmd { color: var(--fos2); }
.term-erro { color: #ff6b5b; text-shadow: 0 0 6px rgba(255,80,60,.4); }
.term-ok { color: var(--ambar); text-shadow: 0 0 6px rgba(255,180,84,.4); }
.term-tj { color: var(--fos-dim); letter-spacing: -1px; }
.term-rev { color: var(--ambar); }
.arq-caixa .term-link { all: unset; cursor: pointer; color: var(--fos2); text-decoration: underline dotted; text-underline-offset: 3px; }
.arq-caixa .term-link:hover, .arq-caixa .term-link:focus-visible { color: #fff; background: rgba(76,255,76,.12); }
.arq-caixa .term-tranca { color: var(--fos-dim); text-decoration: none; letter-spacing: 0; }
.arq-caixa .term-tranca:hover { color: var(--ambar); }
.term-linha { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; max-width: 980px; cursor: text; }
.term-linha span { color: var(--fos2); white-space: nowrap; }
.term-linha input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--fos2); font: inherit; caret-color: var(--fos2); text-shadow: inherit; padding: 0; }
@media (max-width: 700px) { .term-tela { font-size: 17px; } }
@media (prefers-reduced-motion: reduce) { .term-crt, .term-crt::after, .term-tela { animation: none; } }
/* documento trancado */
.arq-cofre { display: grid; justify-items: center; gap: 8px; margin: 40px auto; padding: 30px 22px; max-width: 460px; background: #0d0f0b; color: #4cff4c; border: 1px solid #1d3b22; border-radius: 6px; text-align: center; font-family: 'VT323', 'Share Tech Mono', monospace; text-shadow: 0 0 6px rgba(76,255,76,.35); }
.arq-cofre-k { margin: 0; font-size: 30px; letter-spacing: .12em; }
.arq-cofre-sub { margin: 0; font-size: 18px; color: #2bbf5a; }
.arq-cofre-linha { display: flex; gap: 8px; width: 100%; margin-top: 8px; }
.arq-cofre-linha input { flex: 1; min-width: 0; background: #000; border: 1px solid #2bbf5a; color: #9dffb6; font: 20px 'VT323', monospace; padding: 6px 10px; text-transform: uppercase; letter-spacing: .2em; }
.arq-caixa .arq-cofre .pri { background: #2bbf5a !important; border-color: #2bbf5a !important; color: #000 !important; font: 18px 'VT323', monospace !important; }
.arq-cofre-erro { margin: 0; color: #ff6b5b; font-size: 20px; }
.arq-cofre-erro.treme { animation: cofreTreme .4s; }
@keyframes cofreTreme { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
/* importar e exportar documentos */
.arq-ie { display: flex; gap: 6px; margin-top: 6px; }
.arq-caixa .arq-estante-pe .arq-ie button { flex: 1; font-size: 12px; padding: 5px 8px; }

/* =========================================================
   CALCULADORA DE NEX (Mestre)
   ========================================================= */
.nx-mini { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 5px; }
.nx-mini li { display: grid; grid-template-columns: 78px 1fr 40px; align-items: center; gap: 8px; font-size: 13px; }
.nx-mini i { height: 6px; background: rgba(255,255,255,.06); border-radius: 3px; overflow: hidden; }
.nx-mini i b { display: block; height: 100%; background: var(--nex); box-shadow: 0 0 8px var(--nex); }
.nx-mini strong { font: 14px var(--mono); color: var(--nex); text-align: right; }
.nx-aviso { font-size: 12px; color: #f1d98a; border: 1px dashed #8a7d3a; border-radius: 6px; padding: 6px 8px; }
.nex-tela { position: fixed; inset: 0; z-index: 75; display: grid; place-items: center; padding: 16px; background: rgba(4,5,3,.78); backdrop-filter: blur(3px); }
.nex-tela[hidden] { display: none; }
.nx-caixa { --nx-bg: #0f120b; --nx-bile: #ead63c; --nx-dim: #a59c4f; --nx-linha: #2c2f1d; width: min(1100px, 100%); height: min(860px, calc(100dvh - 32px)); display: flex; flex-direction: column; background: radial-gradient(120% 90% at 50% 0%, #1a1d10 0%, var(--nx-bg) 60%); color: #f0e9b8; border: 1px solid var(--nx-linha); border-radius: 10px; box-shadow: 0 30px 90px rgba(0,0,0,.7); overflow: hidden; }
.nx-cab { display: flex; align-items: flex-end; gap: 18px; padding: 14px 18px 0 22px; border-bottom: 1px solid var(--nx-linha); flex-shrink: 0; }
.nx-cab span { font: 10px var(--mono); letter-spacing: .2em; color: var(--nx-dim); }
.nx-cab h2 { margin: 2px 0 10px; font: 400 26px 'Special Elite', var(--mono); color: var(--nx-bile); text-shadow: 0 0 12px rgba(234,214,60,.25); }
.nx-abas { display: flex; gap: 2px; margin-left: auto; }
.nx-abas button { background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--nx-dim); padding: 8px 12px 10px; font: 14px var(--corpo); cursor: pointer; }
.nx-abas button.on { color: var(--nx-bile); border-bottom-color: var(--nx-bile); }
.nx-x { align-self: center; background: transparent; border: 0; color: var(--nx-dim); font-size: 26px; cursor: pointer; padding: 0 6px; }
.nx-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 18px; }
.nx-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.nx-card { border: 1px solid var(--nx-linha); border-top: 3px solid var(--nex); background: rgba(0,0,0,.28); border-radius: 8px; padding: 12px; display: grid; gap: 8px; align-content: start; }
.nx-card-cab { display: flex; justify-content: space-between; align-items: baseline; }
.nx-card-cab span { font: 11px var(--mono); letter-spacing: .14em; color: var(--nx-dim); }
.nx-card-cab b { font: 400 20px 'Special Elite', var(--mono); }
.nx-leitura { display: flex; align-items: baseline; gap: 2px; color: var(--nex); text-shadow: 0 0 16px color-mix(in srgb, var(--nex) 50%, transparent); }
.nx-num { font: 52px/1 var(--mono); }
.nx-pct { font: 22px var(--mono); }
.nx-rot { margin-left: auto; font: 11px var(--mono); letter-spacing: .2em; color: var(--nx-dim); text-shadow: none; }
.nx-barra { height: 8px; background: rgba(255,255,255,.06); border-radius: 4px; overflow: hidden; }
.nx-barra i { display: block; height: 100%; background: var(--nex); box-shadow: 0 0 10px var(--nex); transition: width .5s; }
.nx-marcas { display: flex; justify-content: space-between; font: 10px var(--mono); color: var(--nx-dim); }
.nx-aumento summary { cursor: pointer; font-size: 13px; color: var(--nx-bile); padding: 4px 0; }
.nx-gatilhos { display: grid; gap: 4px; margin-top: 4px; }
.nx-gatilhos button { display: flex; justify-content: space-between; gap: 8px; text-align: left; background: rgba(234,214,60,.05); border: 1px solid var(--nx-linha); border-radius: 6px; color: #f0e9b8; padding: 7px 9px; font: 13px var(--corpo); cursor: pointer; }
.nx-gatilhos button:hover { border-color: var(--nex); background: color-mix(in srgb, var(--nex) 12%, transparent); }
.nx-gatilhos b { color: var(--nex); font-family: var(--mono); }
.nx-ajuste { display: grid; grid-template-columns: 54px 1fr auto; gap: 4px; margin-top: 6px; }
.nx-ajuste input, .nx-bases input { background: rgba(0,0,0,.35); border: 1px solid var(--nx-linha); border-radius: 5px; color: #f0e9b8; padding: 5px 7px; font: 13px var(--corpo); min-width: 0; }
.nx-ajuste button, .nx-botoes button, .nx-filtros button, .nx-rev, .nx-desfazer { background: transparent; border: 1px solid var(--nx-linha); border-radius: 6px; color: #f0e9b8; padding: 5px 10px; font: 12.5px var(--corpo); cursor: pointer; }
.nx-desfazer { font-size: 12px; color: var(--nx-dim); text-align: left; }
.nx-filtros { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.nx-filtros button.on { background: var(--nx-bile); color: #111; border-color: var(--nx-bile); }
.nx-linha { display: grid; gap: 6px; }
.nx-reg { display: grid; grid-template-columns: 92px 1fr auto auto; gap: 12px; align-items: center; border: 1px solid var(--nx-linha); border-left: 3px solid var(--nex); border-radius: 6px; padding: 8px 10px; background: rgba(0,0,0,.22); }
.nx-quando { font: 11px var(--mono); color: var(--nx-dim); display: grid; } .nx-quando b { color: #f0e9b8; font-weight: 400; }
.nx-alvo { font: 11px var(--mono); letter-spacing: .1em; color: var(--nx-dim); }
.nx-causa { font-size: 14px; }
.nx-delta { text-align: right; } .nx-mais { font: 18px var(--mono); color: var(--nex); } .nx-res { font: 11px var(--mono); color: var(--nx-dim); }
.nx-vazio { color: var(--nx-dim); font-style: italic; }
.nx-cfg h3 { font: 400 17px 'Special Elite', var(--mono); color: var(--nx-bile); margin: 18px 0 6px; }
.nx-cfg h3:first-child { margin-top: 0; }
.nx-cfg .mini { color: var(--nx-dim); }
.nx-bases { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 12px; }
.nx-bases label { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; }
.nx-bases input { width: 64px; }
.nx-botoes { display: flex; flex-wrap: wrap; gap: 8px; }
.nx-botoes .nx-pri { background: var(--nx-bile); color: #111; border-color: var(--nx-bile); }
.nx-botoes .nx-perigo { color: #ff6b5b; border-color: rgba(255,107,91,.4); }
@media (max-width: 700px) {
  .nex-tela { padding: 0; }
  .nx-caixa { height: 100dvh; border-radius: 0; }
  .nx-cab { flex-wrap: wrap; padding: 10px 12px 0; }
  .nx-abas { order: 3; flex-basis: 100%; margin: 0; }
  .nx-x { order: 2; margin-left: auto; }
  .nx-corpo { padding: 12px; }
  .nx-reg { grid-template-columns: 1fr auto; }
  .nx-quando { grid-column: 1 / -1; display: flex; gap: 8px; }
}

/* =========================================================
   SENHAS (Mestre e auxiliares)
   ========================================================= */
.lista-senhas h3 { font: 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--texto-dim); margin: 14px 0 6px; }
.sn-grupo { display: grid; gap: 6px; }
.sn-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid var(--linha); border-radius: 6px; background: rgba(255,255,255,.02); }
.sn-nome { flex: 1 1 120px; font-size: 13px; display: grid; }
.sn-nome small { color: var(--texto-dim); font-size: 11px; }
.sn-linha input { flex: 1 1 130px; min-width: 0; background: #0b0910; border: 1px solid var(--linha); border-radius: 5px; color: #f1d98a; padding: 5px 8px; font: 14px var(--mono); letter-spacing: .04em; }
.sn-txt { flex: 1 1 110px; font: 14px var(--mono); color: #f1d98a; word-break: break-all; }
.sn-linha button { background: transparent; border: 1px solid var(--linha); border-radius: 5px; color: var(--texto); padding: 4px 9px; font: 12px var(--corpo); cursor: pointer; }
.sn-linha button:hover { border-color: var(--roxo); }
.sn-linha button.perigo { color: var(--perigo); }
.sn-alerta { flex-basis: 100%; color: #e5b81e; font-size: 11px; }
.sn-nova { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.sn-nova input { min-width: 0; background: #0b0910; border: 1px solid var(--linha); border-radius: 5px; color: var(--texto); padding: 6px 8px; font: 13px var(--corpo); }
.sn-nova input#snNovaO { grid-column: 1 / -1; }
.sn-nova button { grid-column: 1 / -1; }
.sn-botoes { margin-top: 12px; }

/* =========================================================
   A PAREDE DE DESEJOS (mesmo visual do site antigo)
   ========================================================= */
.btn-parede { width: 100%; margin-top: 8px; border-color: #8a161a; color: #f2e24a; text-shadow: 1px 1px 0 #000; background: linear-gradient(180deg, #1a0708, #0c0303); }
.btn-parede[hidden] { display: none; }
body.parede-aberta { overflow: hidden; }
.parede-tela { --void: #070806; --bile: #cdbf45; --bone: #f2e24a; --bone-dim: #b3a531; --blood: #8a161a; --blood-lit: #b62327; --rot: #2a2415; --ash: #1a1c17;
  --pd-sombra: 1.5px 1.5px 0 #000, 0 0 3px rgba(0,0,0,.7); --fonte-mao: "Shadows Into Light Two", 'Caveat', cursive; --fonte-titulo: "Metal Mania", "Butcherman", 'Special Elite', cursive;
  position: fixed; inset: 0; z-index: 80; overflow-y: auto; overflow-x: hidden;
  background: linear-gradient(180deg, rgba(8,5,6,.60), rgba(6,3,4,.74)), url("img/parede.jpg") center top / cover no-repeat, #0a0405;
  color: var(--bone); font-family: var(--fonte-mao); font-size: 19px; line-height: 1.55; letter-spacing: .2px; text-shadow: var(--pd-sombra); }
.parede-tela[hidden] { display: none; }
.pd-eco { position: fixed; inset: 0; z-index: 2; pointer-events: none; background: url("img/eco-sigilo.svg") no-repeat center 38%; background-size: min(82vw, 680px) auto; mix-blend-mode: screen; opacity: .55; animation: pdEco 8s ease-in-out infinite; }
@keyframes pdEco { 0%, 100% { opacity: .46; } 50% { opacity: .62; } }
.pd-grao { position: fixed; inset: -150%; z-index: 9; pointer-events: none; opacity: .07; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: pdGrao .42s steps(4) infinite; }
@keyframes pdGrao { 0% { transform: translate(0,0); } 25% { transform: translate(-3%,2%); } 50% { transform: translate(2%,-4%); } 75% { transform: translate(-2%,3%); } 100% { transform: translate(3%,-2%); } }
.pd-vinheta { position: fixed; inset: 0; z-index: 8; pointer-events: none; background: radial-gradient(110% 85% at 50% 42%, transparent 50%, rgba(0,0,0,.62) 100%); }
.pd-respira { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(60% 50% at 50% 35%, rgba(138,22,26,.10), transparent 70%); animation: pdRespira 9s ease-in-out infinite; }
@keyframes pdRespira { 0%, 100% { opacity: .35; transform: scale(1); } 50% { opacity: .9; transform: scale(1.06); } }
.pd-fechar { position: fixed; top: 12px; right: 14px; z-index: 30; width: 40px; height: 40px; border-radius: 50%; background: rgba(12,3,3,.8); border: 1px solid var(--rot); color: var(--bone-dim); font-size: 24px; line-height: 1; cursor: pointer; }
.pd-fechar:hover { color: var(--bone); border-color: var(--blood-lit); }
.pd-muro { position: relative; z-index: 10; max-width: 720px; margin: 0 auto; padding: 7vh 22px 4vh; }
.pd-cabecalho { text-align: center; margin-bottom: 5vh; }
.pd-titulo { position: relative; font-family: var(--fonte-titulo); font-size: clamp(2rem, 7.5vw, 3.6rem); font-weight: 400; color: var(--bone); margin: 0; line-height: 1.15; letter-spacing: 1px; text-shadow: 4px 4px 0 #000, 2px 2px 0 #000, 0 0 22px rgba(0,0,0,.85); animation: pdTremor 2.4s steps(8) infinite; }
.pd-titulo::after { content: attr(data-text); position: absolute; left: 0; right: 0; color: #000; opacity: .85; transform: translate(6px, 6px); filter: blur(.3px); z-index: -1; }
@keyframes pdTremor { 0% { transform: translate(0,0) rotate(0); } 20% { transform: translate(.6px,-.5px) rotate(-.25deg); } 40% { transform: translate(-.5px,.6px) rotate(.2deg); } 60% { transform: translate(.4px,.4px) rotate(.15deg); } 80% { transform: translate(-.6px,-.3px) rotate(-.2deg); } 100% { transform: translate(0,0) rotate(0); } }
.pd-sussurro { font-size: 1rem; color: var(--bile); letter-spacing: 1.5px; margin: .6rem 0 0; opacity: .8; }
.pd-abas { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 4vh; padding: 0; }
.pd-aba { all: unset; box-sizing: border-box; cursor: pointer; user-select: none; display: block; border: 1px solid var(--rot); background: linear-gradient(180deg, rgba(255,255,255,.015), rgba(0,0,0,.25)); padding: 8px 12px 7px; min-width: 92px; text-align: center; color: var(--bone-dim); transition: color .25s, border-color .25s, box-shadow .3s; }
.pd-aba:hover { color: var(--bone); border-color: var(--blood); }
.pd-cod { display: block; font-size: .72rem; letter-spacing: 2px; color: var(--bile); }
.pd-nome { display: block; font-family: var(--fonte-titulo); font-size: 1.4rem; line-height: 1.1; letter-spacing: .5px; }
.pd-cont { display: block; font-size: .8rem; color: var(--bone-dim); margin-top: 2px; }
.pd-cont b { color: var(--blood-lit); font-weight: 400; }
.pd-aba.ativa { color: var(--bone); border-color: var(--blood-lit); box-shadow: 0 0 14px rgba(182,35,39,.35), inset 0 0 18px rgba(138,22,26,.18); }
.pd-rito { margin-bottom: 4vh; }
.pd-rotulo { display: block; font-size: 1.05rem; color: var(--bile); margin-bottom: 10px; letter-spacing: .4px; }
.pd-rotulo span { color: var(--bone); border-bottom: 1px dashed var(--rot); }
.pd-entrada { display: flex; gap: 16px; align-items: stretch; }
.pd-campo { flex: 1; resize: vertical; min-height: 96px; background: rgba(0,0,0,.35); border: 1px solid var(--rot); border-left: 3px solid var(--blood); color: var(--bone); font-family: var(--fonte-mao); font-size: 1.25rem; line-height: 1.5; padding: 14px 16px; outline: none; text-shadow: var(--pd-sombra); }
.pd-campo::placeholder { color: var(--bone-dim); opacity: .55; }
.pd-campo:focus { border-color: var(--blood-lit); box-shadow: inset 0 0 22px rgba(138,22,26,.12), 0 0 10px rgba(138,22,26,.18); }
.pd-seletor { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--rot); padding: 12px 12px 10px; background: rgba(0,0,0,.25); min-width: 132px; }
.pd-seletor-tit { font-size: .8rem; letter-spacing: 3px; text-transform: uppercase; color: var(--bile); }
.pd-niveis { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.pd-nivel { all: unset; box-sizing: border-box; width: 26px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 1px solid var(--rot); color: var(--bone-dim); font-size: .95rem; background: var(--ash); transition: transform .1s, color .2s, box-shadow .25s; }
.pd-nivel:hover { transform: translateY(-2px); color: var(--bone); }
.pd-nivel[data-n="0"] { box-shadow: inset 0 -3px 0 rgba(205,198,180,.20); } .pd-nivel[data-n="1"] { box-shadow: inset 0 -3px 0 rgba(150,140,90,.30); } .pd-nivel[data-n="2"] { box-shadow: inset 0 -3px 0 rgba(150,110,60,.40); } .pd-nivel[data-n="3"] { box-shadow: inset 0 -3px 0 rgba(160,80,40,.50); } .pd-nivel[data-n="4"] { box-shadow: inset 0 -3px 0 rgba(160,50,40,.60); } .pd-nivel[data-n="5"] { box-shadow: inset 0 -3px 0 rgba(150,30,32,.75); } .pd-nivel[data-n="6"] { box-shadow: inset 0 -3px 0 rgba(182,35,39,.95); }
.pd-nivel.escolhido { color: #fff; border-color: var(--blood-lit); background: linear-gradient(180deg, rgba(138,22,26,.55), rgba(40,5,6,.7)); box-shadow: 0 0 12px rgba(182,35,39,.6); }
.pd-legenda { font-size: .85rem; color: var(--bone-dim); text-align: center; min-height: 1.2em; }
.pd-chave { margin-top: 14px; border: 1px dashed var(--blood); padding: 10px 12px; background: rgba(40,5,6,.35); }
.pd-chave[hidden] { display: none; }
.pd-chave label { display: block; color: var(--bile); font-size: 1rem; }
.pd-chave div { display: flex; gap: 8px; margin-top: 6px; }
.pd-chave input { flex: 1; min-width: 0; background: rgba(0,0,0,.45); border: 1px solid var(--rot); color: var(--bone); padding: 6px 10px; font: 16px var(--mono); }
.pd-chave button { background: #1a0708; border: 1px solid var(--blood); color: var(--bone); padding: 6px 12px; cursor: pointer; font-family: var(--fonte-mao); font-size: 1rem; }
.pd-oferecer { display: block; width: 100%; margin-top: 18px; padding: 14px; cursor: pointer; background: linear-gradient(180deg, #1a0708, #0c0303); color: var(--bone); border: 1px solid var(--blood); font-family: var(--fonte-titulo); font-size: 1.05rem; letter-spacing: 1px; text-shadow: var(--pd-sombra); transition: color .25s, box-shadow .3s, border-color .25s; }
.pd-oferecer:hover { color: #fff; border-color: var(--blood-lit); box-shadow: 0 0 20px rgba(182,35,39,.4), inset 0 0 24px rgba(138,22,26,.25); }
.pd-oferecer:disabled { cursor: wait; opacity: .7; }
.pd-oferecer.pensando { animation: pdPensa 1.1s ease-in-out infinite; }
@keyframes pdPensa { 0%, 100% { box-shadow: 0 0 8px rgba(138,22,26,.2); } 50% { box-shadow: 0 0 26px rgba(182,35,39,.55); } }
.pd-veredito { position: relative; border: 1px solid var(--rot); border-top: 3px solid var(--blood); background: linear-gradient(180deg, rgba(20,5,6,.5), rgba(0,0,0,.45)); padding: 26px 26px 22px; margin-top: 8px; animation: pdSangra .9s ease-out both; }
.pd-veredito[hidden] { display: none; }
@keyframes pdSangra { from { opacity: 0; transform: translateY(10px) scale(.99); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
.pd-veredito-marca { position: absolute; top: -2px; left: 0; height: 3px; width: 0; background: var(--blood-lit); animation: pdEscorre 1.4s ease-out forwards; }
@keyframes pdEscorre { to { width: 100%; } }
.pd-veredito-texto { font-size: 1.3rem; line-height: 1.62; color: var(--bone); margin: 0; white-space: pre-wrap; }
.pd-veredito-texto.escrevendo::after { content: ""; display: inline-block; width: 9px; height: 1.1em; margin-left: 2px; background: var(--blood-lit); transform: translateY(2px); animation: pdPisca .7s steps(1) infinite; }
@keyframes pdPisca { 50% { opacity: 0; } }
.pd-selo { margin: 16px 0 0; text-align: right; font-family: var(--fonte-titulo); font-size: .92rem; color: var(--blood-lit); letter-spacing: .5px; }
.pd-aviso { margin-top: 18px; padding: 12px 14px; border: 1px dashed var(--blood); background: rgba(40,5,6,.35); color: var(--bone); font-size: 1rem; }
.pd-aviso[hidden] { display: none; }
.pd-hist { margin-top: 4vh; border: 1px solid var(--rot); background: rgba(0,0,0,.3); padding: 8px 14px; }
.pd-hist[hidden] { display: none; }
.pd-hist summary { cursor: pointer; color: var(--bile); font-size: 1rem; }
.pd-hist-item { border-top: 1px dashed var(--rot); padding: 10px 0; }
.pd-hist-item header { font-size: .85rem; color: var(--bone-dim); }
.pd-hist-d { margin: 4px 0; color: var(--bone); }
.pd-hist-p { margin: 0; font-size: 1rem; color: var(--bile); white-space: pre-wrap; }
.pd-rodape { position: relative; z-index: 10; text-align: center; padding: 3vh 18px 5vh; color: var(--bone-dim); font-size: .85rem; letter-spacing: .6px; opacity: .6; }
.pd-yt { position: fixed; left: -9999px; top: -9999px; width: 200px; height: 200px; }
.pd-som { position: fixed; right: 16px; bottom: 16px; z-index: 30; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; background: linear-gradient(180deg, #1a0708, #0c0303); color: #8d8775; border: 1px solid #2a2415; font-size: 1.2rem; line-height: 1; }
.pd-som:hover { color: #cdc6b4; border-color: #8a161a; }
.pd-som.on { color: #b62327; border-color: #b62327; box-shadow: 0 0 14px rgba(182,35,39,.45); }
@media (max-width: 560px) { .pd-entrada { flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { .pd-grao, .pd-respira, .pd-titulo, .pd-oferecer.pensando, .pd-eco { animation: none; } }
/* lista de desejos no painel do Mestre */
.pd-m-salas { border-top: 1px solid var(--linha); margin-top: 8px; padding-top: 6px; }
.pd-m-chips { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0 6px; }
.pd-m-chips .chave { font-size: 13px; }
.pd-m-salas .mesa-linha { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pd-m-salas #pdmCn { width: 76px; min-width: 0; font-size: 16px; }
.pd-m-lista summary { cursor: pointer; font-size: 13px; color: var(--texto-dim); margin-top: 6px; }
.pd-m-lista article { border-top: 1px solid var(--linha); padding: 6px 0; font-size: 13px; }
.pd-m-lista header { display: flex; align-items: center; gap: 6px; color: var(--texto-dim); font-size: 12px; }
.pd-m-lista header button { margin-left: auto; background: transparent; border: 0; color: var(--perigo); cursor: pointer; font-size: 15px; }
.pd-m-lista p { margin: 3px 0; }
.sn-nova button { background: transparent; border: 1px solid var(--linha); border-radius: 5px; color: var(--texto); padding: 6px 9px; font: 13px var(--corpo); cursor: pointer; }
.sn-nova button:hover { border-color: var(--roxo); }
@media (max-width: 700px) {
  .arq-abas { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
  .arq-abas::-webkit-scrollbar { display: none; }
  .arq-caixa .arq-abas button { flex: none; }
  .term-tela { font-size: 15px; padding: 12px; }
}

/* =========================================================
   ESCUDO DO MESTRE em tópicos
   ========================================================= */
.escudo-caixa { display: flex; flex-direction: column; overflow: hidden; height: calc(100dvh - 32px); padding: 0; }
.escudo-caixa header { position: static; flex-wrap: wrap; padding: 14px 22px 10px; align-items: center; }
.escudo-caixa header h2 { flex: 0 1 auto; }
.esc-busca { flex: 1 1 220px; min-width: 0; font: 14px var(--corpo); color: #221d14; background: #fbf7ec; border: 1px solid rgba(34,29,20,.25); border-radius: 18px; padding: 7px 14px; }
.esc-nav { display: flex; gap: 6px; padding: 10px 22px; overflow-x: auto; scrollbar-width: thin; border-bottom: 1px solid rgba(34,29,20,.15); flex-shrink: 0; }
.esc-nav button { flex: none; background: transparent; border: 1px solid rgba(34,29,20,.25); border-radius: 16px; padding: 5px 12px; font: 13px var(--corpo); color: #221d14; cursor: pointer; white-space: nowrap; }
.esc-nav button.on { background: #221d14; color: #f1ead8; border-color: #221d14; }
.esc-nav button.vazio { opacity: .4; }
.esc-nav button i { font: 11px var(--mono); font-style: normal; color: #8a1a14; }
.esc-nav button.on i { color: #f1d98a; }
.esc-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 22px 10px; }
.esc-topico + .esc-topico { margin-top: 18px; }
.esc-topico h3 { font: 400 20px 'Special Elite', var(--mono); color: #8a1a14; margin: 4px 0 10px; border-bottom: 2px solid #221d14; padding-bottom: 4px; text-transform: uppercase; letter-spacing: .06em; }
.esc-cards { columns: 3 300px; column-gap: 18px; }
.esc-card { break-inside: avoid; margin: 0 0 14px; background: #fbf7ec; border: 1px solid rgba(34,29,20,.14); border-top: 3px solid #8a1a14; border-radius: 4px; padding: 8px 12px 6px; }
.esc-card h4 { font: 400 15px 'Special Elite', var(--mono); margin: 0 0 6px; color: #221d14; text-transform: uppercase; letter-spacing: .04em; }
.esc-card ul { margin: 0; padding-left: 16px; font-size: 13px; line-height: 1.45; }
.esc-card li { margin-bottom: 3px; }
.esc-card table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.esc-card th { text-align: left; font-weight: 600; padding: 3px 6px 3px 0; vertical-align: top; border-bottom: 1px solid rgba(34,29,20,.3); }
.esc-card td { padding: 3px 6px 3px 0; vertical-align: top; }
.esc-card tr + tr td { border-top: 1px solid rgba(34,29,20,.1); }
.esc-fonte { display: block; margin-top: 4px; font: 10.5px var(--mono); color: #8a7d63; text-align: right; }
.esc-vazio { color: #6b604b; font-style: italic; }
.escudo-rodape { padding: 6px 22px 12px; margin: 0; border-top: 1px solid rgba(34,29,20,.15); }
@media (max-width: 700px) {
  .escudo { padding: 0; }
  .escudo-caixa { height: 100dvh; border-radius: 0; }
  .escudo-caixa header { padding: 10px 12px 8px; gap: 8px; }
  .escudo-caixa header h2 { font-size: 20px; }
  .escudo-caixa header span { display: none; }
  .esc-busca { order: 3; flex-basis: 100%; }
  .esc-nav { padding: 8px 12px; }
  .esc-corpo { padding: 10px 12px; }
  .esc-cards { columns: 1; }
}

/* sugestões de NEX e marcos */
.alerta-mestre.sug-nex { flex-wrap: wrap; }
.sug-botoes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; flex-basis: 100%; }
.sug-botoes button { background: rgba(234,214,60,.12); border: 1px solid rgba(234,214,60,.45); color: #f0e9b8; border-radius: 5px; padding: 3px 8px; font: 12px var(--corpo); cursor: pointer; }
.sug-botoes button[data-sug="ignorar"] { background: transparent; border-color: var(--linha); color: var(--texto-dim); }
.sug-lista { border: 1px dashed #8a7d3a; border-radius: 6px; padding: 6px 8px; margin: 8px 0; display: grid; gap: 6px; }
.sug-item { font-size: 13px; }
.sug-item small { color: var(--texto-dim); }
.sug-limpar { justify-self: end; background: transparent; border: 0; color: var(--texto-dim); font-size: 12px; cursor: pointer; text-decoration: underline; }
.nx-barra { position: relative; }
.nx-barra em { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: rgba(240,233,184,.35); }
.nx-barra em.ok { background: #fff; box-shadow: 0 0 4px var(--nex); }
.nx-marcas span:nth-child(2) { color: var(--nx-bile); }
.nx-marcos-ed { display: grid; gap: 6px; margin-bottom: 8px; }
.nx-marco-l { display: grid; grid-template-columns: 64px 1fr auto; gap: 6px; }
.nx-marco-l input { background: rgba(0,0,0,.35); border: 1px solid var(--nx-linha); border-radius: 5px; color: #f0e9b8; padding: 5px 7px; font: 13px var(--corpo); min-width: 0; }
.nx-marco-l button { background: transparent; border: 1px solid var(--nx-linha); border-radius: 5px; color: #ff6b5b; cursor: pointer; }
/* dívidas com a Parede */
.fx-dividas { border: 1px solid #8a161a; background: linear-gradient(180deg, rgba(40,5,6,.35), transparent); border-radius: 6px; padding: 8px 12px; margin-bottom: 14px; }
.fx-dividas h4 { margin: 0 0 6px; font: 13px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #f2e24a; }
.fx-dividas h4 small { color: #b62327; letter-spacing: 0; text-transform: none; margin-left: 6px; }
.fx-dividas article { border-top: 1px dashed rgba(138,22,26,.5); padding: 6px 0; font-size: 13px; }
.fx-dividas article header { font: 11px var(--mono); color: #b62327; }
.fx-dividas article.pago header, .fx-dividas article.pago p { opacity: .55; }
.fx-dividas article.pago header b { color: #3ddc97; }
.fx-div-d { margin: 3px 0; font-style: italic; }
.fx-div-p { margin: 0; }
.pd-m-lista article.pago { opacity: .55; }
.pd-m-lista .pd-m-st { margin-left: auto; background: transparent; border: 1px solid var(--linha); border-radius: 5px; color: var(--texto); font-size: 11px; padding: 2px 7px; cursor: pointer; }
.pd-m-lista article.pago .pd-m-st { color: var(--ok); border-color: var(--ok); }
.pd-m-lista header button[data-pdm="apagar"] { margin-left: 4px; }
.pd-hist-item.pago { opacity: .6; }
/* alertas do Mestre no alto do mapa, sem cobrir as abas do painel */
.alertas-mestre { right: auto; left: 50%; translate: -50% 0; width: min(420px, 92vw); }
@media (max-width: 700px) { .alertas-mestre { right: auto; } }
.alerta-mestre.sug-nex span::before { content: none; }
/* perfil: conta já conectada */
.perfil-conta { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--texto-dim); }
.perfil-conta[hidden] { display: none; }
.perfil-conta button { margin-left: 8px; background: transparent; border: 1px solid var(--linha); border-radius: 6px; color: var(--texto); padding: 4px 10px; font: 12px var(--corpo); cursor: pointer; }
.perfil-conta button:hover { border-color: var(--perigo); color: var(--perigo); }

/* ---------- Regras restritas (Escudo, Arquivo) ---------- */
.esc-rr { border-top-color: #5b3a8a; }
.esc-rr p { margin: 0 0 6px; font-size: 13px; line-height: 1.45; }
.rr-txt h5 { font: 600 12px var(--mono); text-transform: uppercase; letter-spacing: .08em; margin: 10px 0 4px; color: #5b3a8a; }
.rr-txt p { margin: 0 0 6px; font-size: 13px; line-height: 1.45; }
.rr-txt ul { margin: 0 0 6px; }
.rr-quem { margin: 8px 0 4px; font-size: 12.5px; }
.rr-quem summary { cursor: pointer; color: #5b3a8a; font-weight: 600; }
.rr-opcoes { display: grid; gap: 4px; margin: 6px 0; padding: 6px 8px; background: rgba(91,58,138,.07); border-radius: 4px; }
.rr-opcoes .chave { display: flex; gap: 6px; align-items: center; color: #221d14; }
.rr-opcoes small { color: #6b604b; }
.rr-custo { display: flex; gap: 6px; align-items: center; color: #221d14; }
.rr-custo select { font: 12px var(--corpo); padding: 2px 4px; }
.rr-botoes { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.rr-botoes button { font-size: 12px; padding: 4px 10px; }
.rr-mini { font-size: 12px; color: #6b604b; line-height: 1.4; }
.rr-modal { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.6); }
.rr-modal[hidden] { display: none; }
.rr-modal-caixa { width: min(640px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; background: #fbf7ec; color: #221d14; border-top: 3px solid #5b3a8a; border-radius: 6px; padding: 16px 18px; display: grid; gap: 10px; }
.rr-modal-caixa h3 { margin: 0; font: 400 18px 'Special Elite', var(--mono); text-transform: uppercase; }
.rr-modal-caixa label { display: grid; gap: 4px; font: 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: #6b604b; }
.rr-modal-caixa input, .rr-modal-caixa textarea { font: 14px var(--corpo); color: #221d14; background: #fff; border: 1px solid rgba(34,29,20,.25); border-radius: 4px; padding: 6px 8px; text-transform: none; letter-spacing: 0; width: 100%; box-sizing: border-box; }
.rr-modal-caixa textarea { font-family: var(--mono); font-size: 13px; resize: vertical; }
.rr-doc h5 { font: 600 12px var(--mono); text-transform: uppercase; letter-spacing: .08em; margin: 12px 0 4px; }
.rr-doc ul { padding-left: 18px; }

/* ---------- Interlúdio (cenas fora de combate) ---------- */
.int-slots { display: grid; gap: 8px; margin: 10px 0; }
.int-slot { padding: 8px 10px; border: 1px solid var(--linha); border-radius: 8px; display: grid; gap: 6px; }
.int-slot[hidden] { display: none; }
.int-slot label, .int-opc label { display: grid; gap: 4px; font: 11px var(--mono); color: var(--texto-dim); text-transform: uppercase; letter-spacing: .1em; }
.int-slot label.chave { display: flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; font: 13px var(--corpo); color: var(--texto); }
.int-slot select, .int-slot input:not([type=checkbox]):not([type=radio]) { background: #0d0a13; color: var(--texto); border: 1px solid var(--linha); border-radius: 6px; padding: 6px; font: 14px var(--corpo); text-transform: none; letter-spacing: 0; width: 100%; box-sizing: border-box; }
.int-opc { display: grid; gap: 6px; }
.int-opc[hidden] { display: none; }
.int-opc small { color: var(--texto-dim); font-size: 12px; }
.int-desc { margin: 0 !important; font-size: 12.5px; color: var(--texto-dim); }
.int-desc:empty { display: none; }
.int-regra summary { cursor: pointer; font-size: 12px; color: #b49cd8; }
.int-regra h5 { margin: 8px 0 2px; font: 600 11px var(--mono); text-transform: uppercase; }
.int-regra p, .int-regra li { font-size: 12.5px; }
.int-acordado { margin: 10px 0; padding: 8px 10px; border: 1px solid #6b4a1e; border-radius: 8px; background: rgba(180,120,40,.08); }
.int-acordado[hidden] { display: none; }
.int-acordado .chave { display: inline-flex; gap: 6px; align-items: center; margin-right: 14px; }
.int-gratis { margin: 6px 0; }
.int-res { padding-left: 18px; line-height: 1.5; }
.int-res li { margin-bottom: 6px; }
.int-ok { color: #3c9e7a; }
.int-falha { color: #d9a514; }
.int-grave { color: #e0565e; }
.fx-x { background: none; border: 0; color: inherit; cursor: pointer; padding: 0 0 0 4px; font-size: 13px; line-height: 1; opacity: .7; }
.fx-x:hover { opacity: 1; }
.int-acordado .mesa-linha { gap: 18px; }
.int-acordado .mesa-linha input, .int-slot .chave input { flex: 0 0 auto; min-width: 0; }

/* ---------- Noite do Mestre: efeitos e marcas ---------- */
.nt-reg { border-left: 2px solid var(--linha); padding: 2px 0 4px 8px; margin: 6px 0; }
.nt-reg p { margin: 2px 0; }
.nt-efs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.nt-ef { font-size: 12px; padding: 4px 9px; }
.nt-ef.pri { border-color: #3c9e7a; color: #9fe3c5; }
.nt-ef[disabled] { opacity: .65; cursor: default; }
.nt-marcas { font-size: 13px; margin: 4px 0 8px; color: #e8c9a0; }
.nt-mini { padding: 0 6px; font-size: 12px; line-height: 1.3; }

/* ---------- Escudo: tópicos liberados para os jogadores ---------- */
.esc-pub { display: inline-flex; align-items: center; gap: 5px; margin-left: 12px; font: 11px var(--mono); letter-spacing: .06em; text-transform: none; color: #6b604b; cursor: pointer; vertical-align: middle; }
.esc-pub input { accent-color: #8a1a14; }
.esc-pub-linha { margin: 0 0 10px; }
.escudo[data-modo="jog"] .escudo-caixa > header span { color: #3c6e8a; }
.btn-regras { width: 100%; margin-top: 8px; border-color: #5b7d8a; color: #dbe9ef; }

/* ---------- Teste pedido pelo Mestre ---------- */
.mesa-alvos { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0; }
.mesa-campo-in { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--texto-dim); }
.mesa-campo-in input { width: 70px; }
#mesaTesteTxt { width: 100%; box-sizing: border-box; margin: 6px 0; background: #0d0a13; color: var(--texto); border: 1px solid var(--linha); border-radius: 6px; padding: 6px 8px; font: 14px var(--corpo); }
#mesaTestePer { background: #0d0a13; color: var(--texto); border: 1px solid var(--linha); border-radius: 6px; padding: 6px 8px; font: 14px var(--corpo); }

/* ---------- Ficha: aba Em jogo, turno, usos, registro ---------- */
.fx-jogo { display: grid; gap: 10px; }
.fx-jogo h4 { margin: 6px 0 0; font: 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fx-dim2, #9a8f7a); }
.fx-jogo h4 small { letter-spacing: 0; margin-left: 6px; }
.fx-jg-vits { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.fx-jg-vit { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 8px; padding: 8px 10px; border: 1px solid var(--fx-linha, #3a2f44); border-top: 3px solid #c2272f; }
.fx-jg-pe, .fx-jg-pd { border-top-color: #e08a1f; }
.fx-jg-san { border-top-color: #8a3fd1; }
.fx-jg-vit b { font: 11px var(--mono); letter-spacing: .12em; }
.fx-jg-vit output { font: 24px var(--mono); text-align: right; }
.fx-jg-vit output small { font-size: 13px; opacity: .6; }
.fx-jg-vit span { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fx-jg-vit span button { padding: 8px 0; font: 18px var(--mono); }
.fx-jg-btns { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
.fx-jg-btns button { display: grid; gap: 2px; text-align: left; padding: 10px 12px; min-height: 44px; }
.fx-jg-btns button small { font-size: 11px; opacity: .7; }
.fx-jg-btns button[style*="--el"] { border-left: 3px solid var(--el); }
.fx-jg-per { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); }
.fx-jg-per button b { margin-left: 8px; }
.fx-jg-per button { display: flex; justify-content: space-between; align-items: baseline; }
.fx-jg-per button b { font: 16px var(--mono); color: var(--ac); font-weight: 400; }
.fx-jg-bp { margin: 0; padding: 6px 10px; border: 1px dashed var(--ac); font-size: 13px; }
.fx-turno { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.fx-turno > span { font: 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: .7; margin-right: 4px; }
.fx-turno button[data-v] { padding: 6px 12px; }
.fx-turno button.on { background: var(--ac); color: var(--ac-txt); border-color: var(--ac); text-decoration: line-through; }
.fx-btn-atk { border-color: var(--ac) !important; }
.fx-usar { margin-left: auto; }
.fx-uso { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px 10px; margin: 8px 0; padding: 8px 10px; border: 1px dashed var(--fx-linha, #3a2f44); }
.fx-uso > span { grid-column: 1 / -1; font: 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.fx-uso small { grid-column: 1 / -1; opacity: .7; font-size: 11.5px; }
.fx-rol-dano { margin: 8px 0 4px; padding: 6px 10px; border-left: 3px solid var(--ac); }
.fx-rol-dano.crit { border-left-color: #e0b33a; background: rgba(224,179,58,.1); }
.fx-registro h4 { margin: 0 0 8px; }
.fx-reg-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.fx-reg { display: grid; justify-items: center; gap: 2px; padding: 10px 6px; border: 1px solid var(--fx-linha, #3a2f44); text-align: center; opacity: .55; }
.fx-reg.bronze, .fx-reg.prata, .fx-reg.ouro { opacity: 1; }
.fx-reg.bronze { border-color: #a0703c; } .fx-reg.prata { border-color: #b9c0c8; } .fx-reg.ouro { border-color: #e0b33a; box-shadow: 0 0 12px rgba(224,179,58,.25); }
.fx-reg-ic { font-size: 20px; }
.fx-reg b { font: 22px var(--mono); }
.fx-reg small { font-size: 11px; opacity: .8; }
.fx-reg i { font-size: 11px; font-style: normal; opacity: .7; }
.fx-jogo button, .fx-turno button, .fx-uso button { background: transparent; border: 1px solid var(--fx-linha2); color: var(--fx-tinta); cursor: pointer; font-family: var(--mono); letter-spacing: .04em; border-radius: 0; transition: border-color .15s, color .15s; }
.fx-jogo button:hover:not(:disabled), .fx-turno button:hover:not(:disabled) { border-color: var(--ac); color: var(--ac); }
.fx-jogo button:disabled, .fx-turno button:disabled { opacity: .55; cursor: default; }
.fx-turno button.on, .fx-turno button.on:hover { background: var(--ac); color: var(--ac-txt); border-color: var(--ac); }
.fx-jg-btns button b { color: var(--ac); }

/* ---------- Visões no servidor ---------- */
.vss-linha { display: grid; grid-template-columns: 110px 1fr auto; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid rgba(34,29,20,.12); font-size: 13px; }
.vss-linha small { color: #6b604b; margin-left: 4px; }
@media (max-width: 600px) { .vss-linha { grid-template-columns: 1fr; } }

/* ---------- C2P0: bips e zips ---------- */
.msg-bz { font-family: var(--mono); letter-spacing: .02em; color: #e8c55a; cursor: pointer; }
.msg-bz:hover { text-decoration: underline dotted; }
.msg-trad { margin-top: 4px; padding-left: 8px; border-left: 2px solid #8a3fd1; font-size: 13px; color: #d7c8ef; }
.bz-modal { position: fixed; inset: 0; z-index: 3200; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.6); }
.bz-modal[hidden] { display: none; }
.bz-caixa { width: min(520px, 100%); background: #120e16; color: var(--texto); border: 1px solid #3a2f44; border-top: 3px solid #d9ad2b; border-radius: 10px; padding: 16px 18px; }
.bz-k { font: 11px var(--mono); letter-spacing: .18em; color: #d9ad2b; margin: 0 0 8px; }
.bz-bips { font-family: var(--mono); color: #e8c55a; line-height: 1.5; max-height: 30vh; overflow: auto; }
.bz-aviso { color: #ff8a8a; }
.bz-botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* ---------- Ambiente: sons próprios ---------- */
.amb-vol label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--texto-dim); }
.amb-vol input[type=range] { width: 140px; min-width: 0; }
.amb-sons { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 4px; }
.amb-sons li { display: grid; grid-template-columns: 1fr auto auto auto; gap: 6px; align-items: center; padding: 4px 6px; border: 1px solid var(--linha); border-radius: 6px; font-size: 13px; }
.amb-sons li.on { border-color: #3c9e7a; background: rgba(60,158,122,.08); }
.amb-sons li small { color: var(--texto-dim); }
.amb-sons button { padding: 3px 8px; font-size: 12px; }
.amb-arq { display: inline-flex; align-items: center; padding: 6px 10px; border: 1px solid var(--linha); border-radius: 6px; cursor: pointer; font-size: 13px; }
.amb-arq:hover { border-color: var(--texto-dim); }
.bz-botoes button { background: transparent; color: var(--texto); border: 1px solid var(--linha); border-radius: 6px; padding: 8px 12px; font: 14px var(--corpo); cursor: pointer; }
.bz-botoes button.pri { background: #8a3fd1; border-color: #8a3fd1; color: #fff; }
.bz-botoes button:hover:not(:disabled) { filter: brightness(1.15); }
.bz-botoes button:disabled { opacity: .5; cursor: default; }

/* =========================================================
   Sessão: abertura, encerramento, dilema, tensão e holofote (sessao.js)
   ========================================================= */
.ab-tela { position: fixed; inset: 0; z-index: 6000; overflow: hidden; color: #efe9d8;
  background: radial-gradient(ellipse at 50% 42%, #1a0f24 0%, #07050b 62%, #020103 100%); transition: opacity .9s; }
.ab-tela.saindo { opacity: 0; }
.ab-tela::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .07;
  background: repeating-linear-gradient(0deg, #fff 0 1px, transparent 1px 3px); animation: abGrao 0.4s steps(2) infinite; }
@keyframes abGrao { 50% { transform: translateY(1px); } }
.ab-cena { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 18px; padding: 24px 16px; text-align: center; opacity: 0; transition: opacity .9s ease; }
.ab-cena.on { opacity: 1; }
.ab-cena.fora { opacity: 0; pointer-events: none; }
.ab-k { margin: 0; font: 13px var(--mono); letter-spacing: .38em; color: #b98be8; text-transform: uppercase; }
.ab-capa { display: grid; justify-items: center; gap: 10px; }
.ab-titulos { display: grid; justify-items: center; gap: 12px; opacity: 0; animation: abSobe 1.6s 4.6s ease forwards; }
.ab-titulos h1 { margin: 0; font: 600 clamp(24px, 5.2vw, 54px) var(--display); letter-spacing: .32em; text-transform: uppercase; color: #f3eedd; text-shadow: 0 0 22px rgba(138,47,196,.75); padding-left: .32em; }
.ab-linha { display: block; height: 2px; width: 0; background: linear-gradient(90deg, transparent, #8a2fc4, transparent); animation: abLinha 1.6s 5.4s ease forwards; }
.ab-sessao { margin: 0; font: clamp(13px, 2vw, 18px) var(--mono); letter-spacing: .42em; color: #ece64a; padding-left: .42em; }
.ab-frase { margin: 0; font: italic clamp(15px, 2.2vw, 20px) var(--corpo); color: #b9aecb; opacity: 0; animation: abSobe 1.4s 6.8s ease forwards; }
.ab-cena-fim .ab-frase { animation-delay: .6s; }
@keyframes abSobe { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes abLinha { to { width: min(420px, 70vw); } }

/* sigilo do Eco */
.eco-sig { display: block; width: auto; overflow: visible; }
.eco-sig.anima { height: min(46vh, 400px); }
.eco-sig.mini { height: 120px; }
.eco-sig .eco-roxo { opacity: .85; }
.eco-sig.anima .eco-roxo { opacity: 0; animation: ecoBrilha 3s 2.2s ease forwards, ecoPulsa 3.2s 5.2s ease-in-out infinite; }
.eco-sig.anima .eco-lua { opacity: 0; animation: ecoLua 2.4s .2s ease forwards; }
.eco-sig .eco-gotas > g { transform-box: fill-box; transform-origin: 50% 0; }
.eco-sig.anima .eco-gotas > g { transform: scaleY(0); opacity: 0; animation: ecoGota 1.8s calc(3.6s + var(--g) * .18s) cubic-bezier(.4, 0, .9, .6) forwards; }
@keyframes ecoDesenha { to { stroke-dashoffset: 0; } }
@keyframes ecoBrilha { to { opacity: .85; } }
@keyframes ecoPulsa { 0%, 100% { opacity: .85; } 50% { opacity: .5; } }
@keyframes ecoLua { to { opacity: 1; } }
@keyframes ecoGota { 0% { transform: scaleY(0); opacity: 1; } 100% { transform: scaleY(1); opacity: 1; } }

/* créditos */
.ab-cartao { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 26px; align-items: center; text-align: left; max-width: min(720px, 92vw); }
.ab-foto { position: relative; width: clamp(110px, 20vw, 170px); aspect-ratio: 1; border-radius: 14px; background: #15101c center / cover no-repeat; border: 2px solid var(--cor, #ece64a); box-shadow: 0 0 34px color-mix(in srgb, var(--cor, #ece64a) 45%, transparent); overflow: hidden; }
.ab-txt { display: grid; gap: 6px; opacity: 0; animation: abEntra .9s .5s ease forwards; }
.ab-txt small { font: 12px var(--mono); letter-spacing: .3em; color: color-mix(in srgb, var(--cor, #ece64a) 80%, #fff); }
.ab-txt b { font: 600 clamp(26px, 5vw, 46px) var(--display); letter-spacing: .08em; color: #f6f1e2; line-height: 1.05; }
.ab-txt span { font: italic clamp(15px, 2.2vw, 19px) var(--corpo); color: #b9aecb; }
@keyframes abEntra { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
/* fósforo: a foto acende como um palito riscado */
.ab-fosforo .ab-foto { animation: abAcende 1.6s ease forwards, abTreme 2.4s 1.6s ease-in-out infinite; filter: brightness(0); }
.ab-chama { position: absolute; left: 50%; bottom: -10%; width: 70%; height: 80%; transform: translateX(-50%); border-radius: 50% 50% 40% 40%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(ellipse at 50% 80%, #fff6c8 0%, var(--cor, #ffb347) 30%, transparent 70%); opacity: 0; animation: abChama 1.6s ease forwards, abFlick .18s 1.6s steps(2) infinite; }
@keyframes abAcende { 0% { filter: brightness(0); } 18% { filter: brightness(2.4) saturate(1.6); } 34% { filter: brightness(.5); } 100% { filter: brightness(1); } }
@keyframes abTreme { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(.6deg) translateY(-1px); } }
@keyframes abChama { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: .35; } }
@keyframes abFlick { 50% { opacity: .22; } }
/* glitch */
.ab-glitch .ab-foto { animation: abGlitch 1.4s steps(1) forwards; }
.ab-glitch .ab-txt b { animation: abGlitchTxt 1.2s .5s steps(1) 2; }
@keyframes abGlitch { 0% { clip-path: inset(0 0 100% 0); } 10% { clip-path: inset(10% 0 60% 0); transform: translateX(-8px); filter: hue-rotate(90deg); } 20% { clip-path: inset(50% 0 20% 0); transform: translateX(6px); } 30% { clip-path: inset(0 0 40% 0); transform: none; filter: hue-rotate(-60deg); } 45% { clip-path: inset(30% 0 0 0); transform: translateX(-3px); } 60%, 100% { clip-path: inset(0); transform: none; filter: none; } }
@keyframes abGlitchTxt { 0% { text-shadow: 3px 0 #ff2a6d, -3px 0 #05d9e8; } 30% { text-shadow: -2px 0 #ff2a6d, 2px 0 #05d9e8; transform: translateX(2px); } 60% { text-shadow: none; transform: none; } }
/* estática de TV */
.ab-ruido { position: absolute; inset: 0; pointer-events: none; animation: abRuido .12s steps(3) infinite, abSome 1.8s .4s ease forwards;
  background: repeating-radial-gradient(circle at 17% 32%, #fff 0 1px, #000 1px 2px), repeating-linear-gradient(90deg, rgba(255,255,255,.4) 0 1px, transparent 1px 3px); background-size: 7px 7px, 5px 5px; }
@keyframes abRuido { 33% { background-position: 3px 2px, 1px 0; } 66% { background-position: -2px 4px, 0 2px; } }
@keyframes abSome { to { opacity: 0; } }
/* pulso (coração) */
.ab-pulso .ab-foto { animation: abPulso 1.3s ease-in-out infinite; }
@keyframes abPulso { 0%, 100% { box-shadow: 0 0 12px color-mix(in srgb, var(--cor) 40%, transparent); transform: scale(1); } 14% { box-shadow: 0 0 46px var(--cor); transform: scale(1.04); } 28% { transform: scale(1); } 42% { box-shadow: 0 0 30px var(--cor); transform: scale(1.025); } }
/* auxiliares: robô inicializando */
.ab-foto.boot { animation: abBoot 1.2s ease forwards; transform: scaleY(.02); filter: brightness(3); }
.ab-scan { position: absolute; left: 0; right: 0; height: 18%; background: linear-gradient(transparent, rgba(160,255,220,.45), transparent); animation: abScan 1.6s 1s linear infinite; }
.ab-term { overflow: hidden; white-space: nowrap; max-width: 0; animation: abDigita 1.6s .6s steps(34) forwards; color: #9ff0c9 !important; }
.ab-cur { animation: abPisca .8s steps(1) infinite; }
@keyframes abBoot { 0% { transform: scaleY(.02) scaleX(.6); filter: brightness(3); } 40% { transform: scaleY(.02) scaleX(1); } 70% { transform: scaleY(1.04); filter: brightness(1.6); } 100% { transform: none; filter: none; } }
@keyframes abScan { from { top: -20%; } to { top: 110%; } }
@keyframes abDigita { to { max-width: 100%; } }
@keyframes abPisca { 50% { opacity: 0; } }
.ab-mestre { grid-template-columns: auto auto; }
.ab-mestre .ab-txt b { font-size: clamp(30px, 6vw, 56px); color: #ece64a; text-shadow: 0 0 24px rgba(138,47,196,.8); }
/* anteriormente e encerramento */
.ab-ant { max-width: min(760px, 92vw); display: grid; gap: 16px; }
.ab-ant-txt { margin: 0; font: clamp(16px, 2.3vw, 21px)/1.65 var(--corpo); color: #e4dccb; text-align: left; min-height: 3em; }
.ab-fim { display: grid; justify-items: center; gap: 14px; }
.ab-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; width: min(980px, 94vw); max-height: 70vh; overflow-y: auto; }
.ab-mini { display: grid; justify-items: center; gap: 4px; padding: 12px 10px; border: 1px solid color-mix(in srgb, var(--cor) 55%, transparent); border-radius: 10px; background: rgba(255,255,255,.03); opacity: 0; animation: abSobe .8s ease forwards; }
.ab-mini:nth-child(2) { animation-delay: .2s; } .ab-mini:nth-child(3) { animation-delay: .4s; } .ab-mini:nth-child(4) { animation-delay: .6s; } .ab-mini:nth-child(5) { animation-delay: .8s; } .ab-mini:nth-child(6) { animation-delay: 1s; } .ab-mini:nth-child(n+7) { animation-delay: 1.2s; }
.ab-mini i { width: 58px; height: 58px; border-radius: 50%; background: #15101c center / cover; border: 2px solid var(--cor); }
.ab-mini b { font: 600 15px var(--display); letter-spacing: .06em; }
.ab-mini span { font: 12px var(--mono); color: #c9bfd8; }
.ab-som { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 2; background: #ece64a; color: #1a1408; border: 0; border-radius: 999px; padding: 12px 20px; font: 600 15px var(--corpo); box-shadow: 0 0 30px rgba(236,230,74,.4); animation: abPisca 1.6s steps(1) infinite; }
.ab-x { position: absolute; top: 12px; right: 14px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.4); color: #fff; font-size: 22px; line-height: 1; opacity: .45; }
.ab-x:hover { opacity: 1; }
.ab-parar { position: absolute; top: 14px; right: 62px; z-index: 2; border: 1px solid rgba(255,77,109,.5); background: rgba(0,0,0,.45); color: #ffb3c0; border-radius: 999px; padding: 8px 14px; font: 13px var(--corpo); opacity: .55; }
.ab-parar:hover { opacity: 1; }
.ab-yt { position: fixed; left: -400px; bottom: 0; width: 200px; height: 120px; border: 0; opacity: .01; pointer-events: none; }
@media (max-width: 600px) {
  .ab-cartao { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 14px; }
  .ab-txt { justify-items: center; }
  .ab-mestre { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-tela *, .ab-tela::after { animation-duration: .01s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
}

/* dilema */
.dil-tela { position: fixed; inset: 0; z-index: 3500; display: grid; place-items: center; padding: 16px; background: rgba(4,2,8,.62); }
.dil-caixa { width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; display: grid; gap: 12px; padding: 18px; border-radius: 10px; background: #120d19; border: 1px solid #3b2a52; border-top: 3px solid #ece64a; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.dil-caixa h3 { margin: 0; font: 600 20px var(--display); color: #f3eedd; }
.dil-ops { display: grid; gap: 8px; }
.dil-ops button { text-align: left; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--linha); background: #1b1526; color: var(--texto); font: 16px var(--corpo); }
.dil-ops button:hover:not(:disabled) { border-color: #ece64a; }
.dil-ops button.on { border-color: #ece64a; background: #2b2410; box-shadow: 0 0 0 1px #ece64a inset; }
.dil-ops button:disabled { opacity: .55; }
.dil-res { position: relative; display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--linha); overflow: hidden; }
.dil-res i { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(138,63,209,.3); z-index: 0; animation: dilBarra 1.2s ease; }
.dil-res span, .dil-res b { position: relative; z-index: 1; }
.dil-res.venceu { border-color: #ece64a; } .dil-res.venceu i { background: rgba(236,230,74,.28); }
@keyframes dilBarra { from { width: 0; } }
.dil-botoes { display: flex; justify-content: flex-end; }
.dil-botoes button { background: transparent; border: 1px solid var(--linha); color: var(--texto-dim); border-radius: 6px; padding: 6px 12px; }
.dil-lista { margin: 4px 0; padding-left: 18px; font-size: 13px; } .dil-lista small { color: var(--texto-dim); }

/* tensão: bordas escurecem e pulsam */
.tensao-veu { position: fixed; inset: 0; z-index: 2400; pointer-events: none; opacity: var(--t, 0);
  background: radial-gradient(ellipse at center, transparent 45%, rgba(70,0,18,.55) 78%, rgba(20,0,6,.95) 100%);
  animation: tensaoPulso var(--pulso, 4s) ease-in-out infinite; transition: opacity 1.5s; }
@keyframes tensaoPulso { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.7); } }

/* holofote */
.hol-banner { position: fixed; left: 50%; top: calc(var(--topo-h) + 14px); z-index: 3400; display: flex; gap: 10px; align-items: center; max-width: calc(100vw - 32px); padding: 10px 18px; border-radius: 999px; background: #120d19; border: 1px solid #ece64a; color: #f3eedd; box-shadow: 0 0 40px rgba(236,230,74,.35); transform: translateX(-50%); pointer-events: none; }
.hol-banner b { font: 600 15px var(--display); letter-spacing: .05em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hol-banner.on { animation: holEntra 6.5s ease forwards; }
@keyframes holEntra { 0% { opacity: 0; transform: translate(-50%, -16px); } 8%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

/* formulário da abertura */
.ses-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.ses-grade select, .ex-ed select, #expoIni select, #expoEfr select { font: 14px var(--corpo); color: #221d14; background: #fff; border: 1px solid rgba(34,29,20,.25); border-radius: 4px; padding: 6px 8px; text-transform: none; letter-spacing: 0; width: 100%; }
.ses-modal details, .ex-ed details { font-size: 13px; } .ses-modal details label, .ex-ed details label { margin-top: 6px; }
.ses-modal .chave, #expoIni .chave, #expoEfr .chave, .ex-ed .chave { display: flex; flex-direction: row; text-transform: none; letter-spacing: 0; font: 14px var(--corpo); color: #221d14; }
.ses-modal .chave input, #expoIni .chave input, #expoEfr .chave input, .ex-ed .chave input { width: auto; }
.ses-modal .rr-botoes button, .ses-modal [data-sm="puxar"], #expoIni .rr-botoes button, #expoEfr .rr-botoes button, #expoEd .rr-botoes button { background: #fff; color: #221d14; border: 1px solid rgba(34,29,20,.3); border-radius: 4px; padding: 6px 12px; font-size: 13px; justify-self: start; }
.ses-modal .rr-botoes button.pri, #expoIni .rr-botoes button.pri, #expoEfr .rr-botoes button.pri, #expoEd .rr-botoes button.pri { background: #5b3a8a; border-color: #5b3a8a; color: #fff; }
@media (max-width: 520px) { .ses-grade { grid-template-columns: 1fr; } }

/* =========================================================
   Salas de Exposição (exposicao.js)
   ========================================================= */
.expo-tela { position: fixed; inset: 0; z-index: 2600; display: grid; place-items: center; padding: 12px; background: rgba(4,2,8,.55); }
.ex-caixa { width: min(780px, 100%); max-height: calc(100dvh - 24px); overflow-y: auto; display: grid; gap: 10px; padding: 14px 16px; border-radius: 10px; background: #110d17; border: 1px solid #2f2440; border-top: 3px solid var(--el); box-shadow: 0 24px 70px rgba(0,0,0,.7); }
.ex-caixa header { display: flex; gap: 12px; align-items: center; }
.ex-caixa header > div:first-child { flex: 1; min-width: 0; }
.ex-caixa h3 { margin: 2px 0 0; font: 600 22px var(--display); color: #f3eedd; }
.ex-k { margin: 0; font: 11px var(--mono); letter-spacing: .2em; color: var(--el, #b98be8); text-transform: uppercase; }
.ex-rodada-box { display: grid; justify-items: center; min-width: 58px; padding: 4px 8px; border: 1px solid var(--el, #3b2a52); border-radius: 8px; background: #0b0810; }
.ex-rodada-box b { font: 600 24px var(--display); line-height: 1; } .ex-rodada-box small { font: 10px var(--mono); color: var(--texto-dim); text-transform: uppercase; }
.ex-min { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--linha); background: transparent; color: var(--texto); font-size: 20px; }
.ex-evento { margin: 0; padding: 8px 10px; border-radius: 6px; background: rgba(236,230,74,.08); border-left: 3px solid #ece64a; font-size: 14px; }
.ex-obj { margin: 0; font-size: 14px; } .ex-conta { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #1b1526; border: 1px solid var(--el); font: 12px var(--mono); }
.ex-desc summary, .ex-acao summary { cursor: pointer; color: var(--texto-dim); font-size: 13px; }
.ex-desc p, .ex-acao details p { font-size: 14px; line-height: 1.5; margin: 6px 0; white-space: pre-line; }
.ex-acoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.ex-acao { display: grid; gap: 4px; padding: 8px; border: 1px solid var(--linha); border-radius: 8px; background: #160f1f; }
.ex-acao > button { display: grid; gap: 2px; text-align: left; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--el); background: color-mix(in srgb, var(--el) 16%, #140f1c); color: var(--texto); }
.ex-acao > button b { font-size: 15px; } .ex-acao > button small { font: 11px var(--mono); color: #cfc6dc; }
.ex-acao > button:hover:not(:disabled) { background: color-mix(in srgb, var(--el) 30%, #140f1c); }
.ex-acao > button:disabled { opacity: .45; cursor: default; }
.ex-acao select { background: #0d0a13; color: var(--texto); border: 1px solid var(--linha); border-radius: 6px; padding: 4px 6px; font: 13px var(--corpo); }
.ex-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font: 12px var(--mono); color: #cfc6dc; max-height: 220px; overflow-y: auto; }
.expo-chip { position: fixed; left: 12px; bottom: 76px; z-index: 2600; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--el, #c2272f); background: #120d19; color: #f3eedd; font: 600 13px var(--corpo); box-shadow: 0 0 24px color-mix(in srgb, var(--el, #c2272f) 50%, transparent); animation: tensaoPulso 2s ease-in-out infinite; }
/* mapa animado */
.ex-mapa { position: relative; width: 100%; aspect-ratio: 640 / 290; border-radius: 10px; overflow: hidden; background: radial-gradient(ellipse at 50% 40%, #1b1424, #0b0810); border: 1px solid #2a2238; }
.ex-mapa svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ex-tk { position: absolute; width: clamp(24px, 6%, 38px); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: #2a2232 center / cover no-repeat; border: 2px solid var(--cor); box-shadow: 0 0 12px var(--cor), 0 2px 6px #000; transition: left 1.2s cubic-bezier(.5, 0, .2, 1), top 1.2s cubic-bezier(.5, 0, .2, 1); z-index: 1; }
.ex-rot { fill: #cfc6dc; font: 11px var(--mono); letter-spacing: .1em; text-anchor: middle; }
.ex-rodada { fill: #f3eedd; font: 600 24px var(--display); text-anchor: middle; }
.ex-ok { fill: #3c9e7a; }
.ex-chuva line { stroke-width: 2; opacity: .55; animation: exChuva 1s var(--d, 0s) linear infinite; }
@keyframes exChuva { from { transform: translate(0, -40px); opacity: 0; } 30% { opacity: .6; } to { transform: translate(-14px, 170px); opacity: 0; } }
.ex-pulsa { transform-box: fill-box; transform-origin: center; animation: exPulsa 1.8s ease-in-out infinite; }
@keyframes exPulsa { 50% { transform: scale(1.12); opacity: .7; } }
.ex-pavio { animation: exPavio .6s ease-in-out infinite alternate; }
@keyframes exPavio { to { filter: brightness(1.8); } }
.ex-onda { opacity: .5; animation: exOnda 2.4s ease-in-out infinite; }
@keyframes exOnda { 50% { opacity: .7; } }
.ex-grama line { stroke-width: 3; stroke-linecap: round; transform-box: fill-box; transform-origin: 50% 100%; animation: exGrama 1.4s var(--d, 0s) ease-in-out infinite alternate; }
@keyframes exGrama { from { transform: rotate(-8deg); } to { transform: rotate(10deg); } }
.ex-parede { opacity: .8; animation: exOnda 1.6s ease-in-out infinite; }
.ex-entulho rect { animation: exCai 2.2s var(--d, 0s) ease-in infinite; }
@keyframes exCai { from { transform: translateY(20px); opacity: 0; } 20% { opacity: 1; } to { transform: translateY(250px); opacity: 0; } }
.ex-horda > g > * { animation: exHorda 1.1s ease-in-out infinite alternate; }
.ex-horda > g:nth-child(odd) > * { animation-delay: .4s; }
@keyframes exHorda { to { transform: translateY(-3px); } }
/* resistência no início da rodada */
.expo-res .ex-res-caixa { background: #120d19; color: var(--texto); border-top-color: var(--el, #8a3fd1); }
.expo-res .ex-res-caixa h3 { color: #f3eedd; }
.expo-res .ex-res-caixa p { margin: 0; font-size: 14px; line-height: 1.5; }
.expo-res .rr-botoes button { background: #1b1526; color: var(--texto); border: 1px solid var(--linha); border-radius: 6px; padding: 8px 14px; font-size: 14px; }
.expo-res .rr-botoes button.pri { background: var(--el, #8a3fd1); border-color: var(--el, #8a3fd1); color: #fff; }
.ex-res-saida p { padding: 8px 10px; border-radius: 6px; background: #1b1526; }
/* bloco do Mestre */
.ex-m-topo { display: flex; gap: 10px; align-items: center; } .ex-m-topo .mesa-linha { flex: 1; }
.ex-alerta { margin: 4px 0; padding: 6px 10px; border-radius: 6px; background: rgba(255,77,109,.12); border-left: 3px solid var(--perigo); font-size: 13px; }
.ex-tab { width: 100%; border-collapse: collapse; font-size: 13px; margin: 6px 0; }
.ex-tab th { text-align: left; font: 10px var(--mono); letter-spacing: .1em; color: var(--texto-dim); text-transform: uppercase; padding: 4px; border-bottom: 1px solid var(--linha); }
.ex-tab td { padding: 4px; border-bottom: 1px solid rgba(42,34,56,.6); }
.ex-tab button { border: 1px solid var(--linha); background: #1b1526; color: var(--texto); border-radius: 4px; padding: 2px 7px; margin-left: 2px; font-size: 12px; }
.ex-planta, .ex-bib { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 4px; }
.ex-planta li, .ex-bib li { display: flex; gap: 6px; align-items: center; padding: 6px 8px; border-radius: 6px; background: #150f1d; border-left: 3px solid var(--el, var(--linha)); font-size: 13px; }
.ex-planta li span, .ex-bib li span { flex: 1; min-width: 0; } .ex-planta em, .ex-bib small { color: var(--texto-dim); font-style: normal; }
.ex-planta button, .ex-bib button { border: 1px solid var(--linha); background: #1b1526; color: var(--texto); border-radius: 6px; padding: 4px 9px; font-size: 12px; }
.ex-planta button.pri { background: #b3121b; border-color: #b3121b; color: #fff; animation: tensaoPulso 1.4s ease-in-out infinite; }
#mesaExpo select { background: #0d0a13; color: var(--texto); border: 1px solid var(--linha); border-radius: 6px; padding: 6px 8px; font: 13px var(--corpo); max-width: 100%; }
#mesaExpo details summary, #mesaSessao details summary { cursor: pointer; color: var(--texto-dim); font-size: 13px; margin: 6px 0; }
.ex-cartao { margin: 8px 0; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--el); background: color-mix(in srgb, var(--el) 12%, transparent); font-size: 13px; }
.ex-cartao button { margin-left: 6px; border: 1px solid var(--el); background: transparent; color: inherit; border-radius: 6px; padding: 3px 9px; }
.ex-ed textarea { min-height: 60px; }
@media (max-width: 600px) {
  .expo-tela { padding: 0; place-items: stretch; }
  .ex-caixa { max-height: 100dvh; border-radius: 0; }
  .ex-acoes { grid-template-columns: 1fr; }
  .expo-chip { bottom: 70px; }
}
#expoEfr .ex-efr-linha { display: grid; gap: 4px; padding: 6px 8px; border: 1px solid rgba(34,29,20,.15); border-radius: 4px; }
#expoEfr .ex-efr-linha small { color: #6b604b; font-size: 12px; }

/* =========================================================
   Restaurar o site (aba Segredos)
   ========================================================= */
.rest-modal .rr-modal-caixa { width: min(720px, 100%); }
.rest-cats { display: grid; gap: 6px; }
.rest-cat { display: flex !important; flex-direction: row !important; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid rgba(34,29,20,.18); border-radius: 6px; text-transform: none !important; letter-spacing: 0 !important; font: 14px var(--corpo) !important; color: #221d14 !important; cursor: pointer; }
.rest-cat input { width: auto !important; margin-top: 3px; }
.rest-cat span { display: grid; gap: 2px; } .rest-cat small { font-size: 12px; color: #6b604b; line-height: 1.4; }
.rest-cat.prep { background: rgba(34,29,20,.03); }
.rest-cat:has(input:checked) { border-color: #8a1a14; background: rgba(138,26,20,.06); }
.rest-fichas { margin: 4px 0; padding-left: 18px; font-size: 13px; }
.rest-modal .rr-botoes button, #expoFim .rr-botoes button { background: #fff; color: #221d14; border: 1px solid rgba(34,29,20,.3); border-radius: 4px; padding: 6px 12px; font-size: 13px; }
.rest-modal .rr-botoes button.pri { background: #8a1a14; border-color: #8a1a14; color: #fff; }
.rest-modal .rr-botoes button:disabled { opacity: .45; cursor: not-allowed; }
#expoFim .rr-botoes button.pri { background: #2f8a68; border-color: #2f8a68; color: #fff; }
.rest-modal details summary { cursor: pointer; font-size: 13px; }

/* =========================================================
   Rolagem em destaque
   ========================================================= */
.dest-tela { position: fixed; inset: 0; z-index: 3600; display: grid; place-items: center; padding: 16px; background: radial-gradient(ellipse at center, rgba(20,10,30,.82), rgba(0,0,0,.92)); }
.dest-caixa { display: grid; justify-items: center; gap: 14px; text-align: center; color: #f3eedd; }
.dest-quem { display: grid; justify-items: center; gap: 4px; }
.dest-quem i { width: 70px; height: 70px; border-radius: 50%; background: #15101c center / cover; border: 2px solid var(--cor); box-shadow: 0 0 24px var(--cor); }
.dest-quem b { font: 600 26px var(--display); letter-spacing: .06em; } .dest-quem span { font: 13px var(--mono); letter-spacing: .25em; text-transform: uppercase; color: #b98be8; }
.dest-d20 { position: relative; width: min(46vw, 220px); aspect-ratio: 1; animation: destGira .5s linear infinite; }
.dest-d20 svg { width: 100%; height: 100%; } .dest-d20 polygon { fill: #1d1528; stroke: var(--cor, #ece64a); stroke-width: 2.5; } .dest-d20 polygon.in { fill: rgba(255,255,255,.05); stroke-width: 1.5; opacity: .7; }
.dest-n { position: absolute; inset: 0; display: grid; place-items: center; font: 700 clamp(40px, 12vw, 72px) var(--display); color: #fff; text-shadow: 0 0 18px var(--cor, #ece64a); }
.dest-tela.parou .dest-d20, .dest-tela.crit .dest-d20, .dest-tela.falha .dest-d20 { animation: destPara .5s ease-out forwards; }
.dest-tela.crit .dest-n { color: #ffe066; text-shadow: 0 0 30px #ffb400, 0 0 60px #ffb400; }
.dest-tela.falha .dest-n { color: #9a9aa5; text-shadow: 0 0 10px #000; }
.dest-tela.crit .dest-d20 polygon { stroke: #ffd23f; } .dest-tela.falha .dest-d20 polygon { stroke: #5a5a66; }
@keyframes destGira { 0% { transform: rotate(0) scale(1); } 25% { transform: rotate(90deg) scale(.92); } 50% { transform: rotate(180deg) scale(1.04); } 75% { transform: rotate(270deg) scale(.95); } 100% { transform: rotate(360deg) scale(1); } }
@keyframes destPara { 0% { transform: rotate(-30deg) scale(1.15); } 60% { transform: rotate(6deg) scale(.97); } 100% { transform: rotate(0) scale(1); } }
.dest-res { min-height: 70px; font: 18px var(--mono); }
.dest-res p { margin: 4px 0; } .dest-res b { font-size: 30px; color: #fff; }
.dest-ver { font: 700 22px var(--display) !important; letter-spacing: .3em; animation: abSobe .5s ease; }
.dest-ver.ok { color: #3ddc97; } .dest-ver.x { color: #ff4d6d; }

/* trilha por andar */
.amb-trilha { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin: 6px 0; }
.amb-trilha label { display: grid; gap: 2px; font-size: 12px; color: var(--texto-dim); }
.amb-trilha select { background: #0d0a13; color: var(--texto); border: 1px solid var(--linha); border-radius: 6px; padding: 5px 6px; font: 13px var(--corpo); }

/* =========================================================
   Cobaia da Sessão
   ========================================================= */
.mvp-ops { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.mvp-ops button { display: grid; justify-items: center; gap: 6px; padding: 10px 6px; border-radius: 8px; border: 1px solid var(--linha); background: #1b1526; color: var(--texto); font: 14px var(--corpo); }
.mvp-ops button i { width: 56px; height: 56px; border-radius: 50%; background: #15101c center / cover; border: 2px solid var(--cor); }
.mvp-ops button.on { border-color: #ece64a; background: #2b2410; box-shadow: 0 0 0 1px #ece64a inset; }
.mvp-ops button:disabled { opacity: .5; }
.mvp-venc { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.mvp-c { display: grid; justify-items: center; gap: 6px; animation: abSobe .8s ease; }
.mvp-c i { width: 120px; height: 120px; border-radius: 50%; background: #15101c center / cover; border: 3px solid #ece64a; box-shadow: 0 0 40px rgba(236,230,74,.55); animation: abPulso 1.3s ease-in-out infinite; --cor: #ece64a; }
.mvp-c b { font: 600 26px var(--display); color: #f3eedd; } .mvp-c span { font: 12px var(--mono); color: #b9aecb; }
.ab-mvp .ab-foto { border-color: #ece64a; box-shadow: 0 0 50px rgba(236,230,74,.6); }
.ab-mvp .ab-txt small { color: #ece64a; }

/* =========================================================
   Estilos de abertura
   ========================================================= */
/* VHS */
.estilo-vhs { background: #06070d; font-family: 'VT323', var(--mono); }
.estilo-vhs::after { opacity: .12; }
.vhs-capa { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 24px; }
.vhs-capa > span { position: absolute; font: clamp(16px, 2.4vw, 24px) var(--mono); color: #f2f2f2; text-shadow: 2px 0 #ff2a6d, -2px 0 #05d9e8; letter-spacing: .1em; }
.vhs-play { top: 24px; left: 28px; } .vhs-rec { top: 24px; right: 80px; color: #ff3b3b !important; animation: abPisca 1s steps(1) infinite; }
.vhs-data { bottom: 26px; left: 28px; line-height: 1.3; } .vhs-sp { bottom: 26px; right: 28px; }
.vhs-track { position: absolute; left: 0; right: 0; height: 14%; top: -15%; background: linear-gradient(transparent, rgba(255,255,255,.08) 40%, rgba(255,255,255,.18) 50%, rgba(255,255,255,.08) 60%, transparent); animation: vhsTrack 3.8s linear infinite; }
@keyframes vhsTrack { to { top: 110%; } }
.eco-sig.vhs-sig { height: min(28vh, 220px); filter: drop-shadow(3px 0 #ff2a6d) drop-shadow(-3px 0 #05d9e8); animation: vhsTreme .2s steps(2) infinite; }
.eco-sig.vhs-sig .eco-gotas > g { transform: none; }
@keyframes vhsTreme { 50% { transform: translateX(2px); } }
.estilo-vhs .ab-titulos { animation-delay: 1.4s; }
.estilo-vhs .ab-linha { animation-delay: 2s; background: linear-gradient(90deg, transparent, #05d9e8, transparent); }
.estilo-vhs .ab-frase { animation-delay: 3s; }
.estilo-vhs h1 { font-family: var(--mono) !important; letter-spacing: .18em !important; text-shadow: 3px 0 #ff2a6d, -3px 0 #05d9e8 !important; animation: vhsGlitch 4s steps(1) infinite; }
@keyframes vhsGlitch { 0%, 92%, 100% { transform: none; } 93% { transform: translateX(-6px) skewX(8deg); } 95% { transform: translateX(5px); } }
.estilo-vhs .ab-sessao { color: #f2f2f2; } .estilo-vhs .ab-k { color: #05d9e8; }
.estilo-vhs .ab-foto { box-shadow: 4px 0 0 rgba(255,42,109,.5), -4px 0 0 rgba(5,217,232,.5); }
.estilo-vhs .ab-foto::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 2px, transparent 2px 4px), rgba(40,60,120,.25); mix-blend-mode: multiply; pointer-events: none; }
.estilo-vhs .ab-txt b { font-family: var(--mono); text-shadow: 2px 0 #ff2a6d, -2px 0 #05d9e8; }
/* Dossiê */
.estilo-dossie { background: radial-gradient(ellipse at 50% 40%, #2a2016, #0d0a07 70%); }
.dos-pasta { position: relative; width: min(640px, 90vw); padding: 38px 34px 30px; background: #e9dfc6; color: #221d14; border-radius: 4px 18px 4px 4px; box-shadow: 0 30px 80px rgba(0,0,0,.7), inset 0 0 60px rgba(120,90,40,.25); text-align: left; animation: dosEntra 1.2s cubic-bezier(.2,.7,.2,1); }
@keyframes dosEntra { from { transform: translateY(40px) rotate(-3deg); opacity: 0; } to { transform: rotate(-1deg); opacity: 1; } }
.dos-pasta h1 { margin: 10px 0; font: 400 clamp(26px, 5vw, 46px) 'Special Elite', var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.dos-topo { margin: 0; font: 12px var(--mono); letter-spacing: .3em; color: #6b604b; border-bottom: 1px solid rgba(34,29,20,.3); padding-bottom: 8px; }
.dos-linha, .dos-assunto { margin: 4px 0; font: 15px 'Special Elite', var(--mono); }
.dos-carimbo { position: absolute; top: 26px; right: 22px; padding: 6px 14px; border: 4px double #a3201a; color: #a3201a; font: 700 18px var(--mono); letter-spacing: .2em; transform: rotate(8deg) scale(2.4); opacity: 0; animation: dosCarimbo .45s 1.6s cubic-bezier(.3,1.6,.6,1) forwards; mix-blend-mode: multiply; }
@keyframes dosCarimbo { to { transform: rotate(8deg) scale(1); opacity: .85; } }
.dos-frase { position: relative; display: inline-block; margin: 16px 0 0; font: italic 18px var(--corpo); }
.dos-tarja { position: absolute; inset: -2px -6px; background: #111; animation: dosTarja 1s 3.2s ease forwards; transform-origin: right; }
@keyframes dosTarja { to { transform: scaleX(0); } }
.estilo-dossie .ab-cartao { background: #e9dfc6; color: #221d14; padding: 18px 22px; border-radius: 4px; box-shadow: 0 20px 50px rgba(0,0,0,.6); transform: rotate(-1deg); }
.estilo-dossie .ab-foto { border-radius: 2px; border: 6px solid #fff; box-shadow: 0 6px 14px rgba(0,0,0,.35); }
.estilo-dossie .ab-foto::after { content: ''; position: absolute; inset: 0; background: #b8925a; mix-blend-mode: color; opacity: .45; pointer-events: none; }
.estilo-dossie .ab-txt b { color: #221d14; font-family: 'Special Elite', var(--mono); } .estilo-dossie .ab-txt span { color: #4d4433; } .estilo-dossie .ab-txt small { color: #a3201a; }
.estilo-dossie .ab-k { color: #e3c06e; }
/* Terminal */
.estilo-terminal { background: #020a04; }
.estilo-terminal::after { opacity: .16; background: repeating-linear-gradient(0deg, #3f3 0 1px, transparent 1px 3px); }
.term-capa { display: grid; justify-items: center; gap: 22px; width: min(760px, 92vw); }
.term-log { justify-self: stretch; margin: 0; font: clamp(13px, 1.8vw, 17px) var(--mono); color: #6cff8a; text-shadow: 0 0 8px rgba(80,255,120,.6); white-space: pre-wrap; text-align: left; }
.term-log span { display: block; overflow: hidden; white-space: nowrap; max-width: 0; animation: abDigita 1s calc(var(--i) * 1.1s + .3s) steps(40) forwards; }
.estilo-terminal .ab-titulos { animation-delay: 4.8s; }
.estilo-terminal h1 { font-family: var(--mono) !important; color: #b6ffc6 !important; text-shadow: 0 0 16px rgba(80,255,120,.8) !important; letter-spacing: .14em !important; }
.estilo-terminal .ab-linha { background: linear-gradient(90deg, transparent, #3f3, transparent); animation-delay: 5.4s; }
.estilo-terminal .ab-sessao, .estilo-terminal .ab-k, .estilo-terminal .ab-frase { color: #6cff8a; font-family: var(--mono); }
.estilo-terminal .ab-frase { animation-delay: 6s; }
.estilo-terminal .ab-foto { image-rendering: pixelated; border-color: #3f3 !important; box-shadow: 0 0 24px rgba(80,255,120,.5); border-radius: 2px; }
.estilo-terminal .ab-foto::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 2px, transparent 2px 4px), #2aff6a; background-blend-mode: normal; mix-blend-mode: color; pointer-events: none; }
.estilo-terminal .ab-txt b, .estilo-terminal .ab-txt span, .estilo-terminal .ab-txt small { font-family: var(--mono); color: #b6ffc6; font-style: normal; }
.estilo-terminal .eco-sig .eco-traco { stroke: #6cff8a; } .estilo-terminal .eco-sig .eco-gotas { fill: #6cff8a; } .estilo-terminal .eco-sig .eco-roxo { stroke: #1a7a2a; }
/* Fósforo */
.estilo-fosforo { background: #000; }
.fos-capa { display: grid; justify-items: center; gap: 16px; }
.fos-fogo { position: relative; width: 140px; height: 170px; }
.fos-palito { position: absolute; left: 50%; bottom: 0; width: 8px; height: 110px; margin-left: -4px; border-radius: 3px; background: linear-gradient(#3a1a0a 0 12%, #d9b77c 12%); transform: rotate(18deg) translateX(60px); transform-origin: bottom; animation: fosRisca .9s .3s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes fosRisca { 60% { transform: rotate(-8deg) translateX(-20px); } 100% { transform: rotate(0) translateX(0); } }
.fos-chama { position: absolute; left: 50%; bottom: 100px; width: 34px; height: 60px; margin-left: -17px; border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%; background: radial-gradient(ellipse at 50% 75%, #fff8d0 0 15%, #ffcc33 35%, #ff6a00 65%, transparent 72%); filter: blur(.6px); opacity: 0; transform-origin: 50% 90%; animation: fosAcende 1.4s 1.1s ease-out forwards, fosTreme .15s 2.5s steps(2) infinite; box-shadow: 0 0 60px 30px rgba(255,140,0,.35); }
@keyframes fosAcende { 0% { opacity: 0; transform: scale(.2); } 15% { opacity: 1; transform: scale(1.6); } 100% { opacity: 1; transform: scale(1); } }
@keyframes fosTreme { 50% { transform: scale(1.05, .95) skewX(2deg); } }
.fos-brasa { position: absolute; left: 50%; bottom: 120px; width: 4px; height: 4px; border-radius: 50%; background: #ffd27a; box-shadow: 12px -10px #ffb347, -14px -6px #ffe0a0, 6px -22px #ff9b2e, -8px -26px #ffd27a; opacity: 0; animation: fosBrasa .7s 1.05s ease-out forwards; }
@keyframes fosBrasa { 0% { opacity: 1; transform: scale(.4); } 100% { opacity: 0; transform: scale(3) translateY(-20px); } }
.fos-fumaca { position: absolute; left: 50%; bottom: 150px; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; background: radial-gradient(rgba(200,200,200,.25), transparent 70%); animation: fosFumaca 3s 2s ease-out infinite; opacity: 0; }
@keyframes fosFumaca { 0% { opacity: .5; transform: translateY(0) scale(.6); } 100% { opacity: 0; transform: translateY(-120px) translateX(20px) scale(2.4); } }
.estilo-fosforo .ab-titulos { animation-delay: 2.4s; }
.estilo-fosforo h1 { color: #ffd9a0 !important; text-shadow: 0 0 26px rgba(255,140,0,.75) !important; }
.estilo-fosforo .ab-linha { background: linear-gradient(90deg, transparent, #ff8a00, transparent); animation-delay: 3s; }
.estilo-fosforo .ab-sessao { color: #ffb347; } .estilo-fosforo .ab-frase { animation-delay: 3.8s; color: #d9b98a; } .estilo-fosforo .ab-k { color: #ff9b2e; }
.estilo-fosforo .ab-foto { box-shadow: 0 0 60px rgba(255,140,0,.45); }
.estilo-fosforo .ab-foto::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 100%, rgba(255,140,0,.45), rgba(40,10,0,.35)); mix-blend-mode: soft-light; pointer-events: none; }
.estilo-fosforo .ab-cena.ab-cred { background: radial-gradient(circle at 50% 50%, rgba(255,120,0,.12), transparent 55%); }
.estilo-fosforo .ab-txt b { color: #ffe3b8; }
@media (max-width: 600px) { .dos-pasta { padding: 30px 20px 22px; } .dos-carimbo { font-size: 12px; top: -16px; right: 8px; } .vhs-capa > span { font-size: 13px; } .vhs-rec { right: 60px; } }

/* =========================================================
   Hall da Caixa
   ========================================================= */
.hall-tela { position: fixed; inset: 0; z-index: 3300; display: grid; place-items: center; padding: 12px; background: rgba(4,2,8,.7); }
.hall-caixa { width: min(980px, 100%); max-height: calc(100dvh - 24px); overflow-y: auto; padding: 18px; border-radius: 10px; background: radial-gradient(ellipse at 50% 0%, #1d1427, #0c0911 70%); border: 1px solid #3b2a52; border-top: 3px solid #ece64a; color: var(--texto); }
.hall-caixa header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.hall-caixa h2 { margin: 2px 0 10px; font: 600 28px var(--display); letter-spacing: .08em; color: #f3eedd; }
.hall-fechar { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--linha); background: transparent; color: var(--texto); font-size: 20px; }
.hall-abas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.hall-abas button { border: 1px solid var(--linha); background: #1b1526; color: var(--texto-dim); border-radius: 999px; padding: 6px 14px; font: 13px var(--corpo); }
.hall-abas button.on { color: #1a1408; background: #ece64a; border-color: #ece64a; }
.hall-eps { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.hall-ep { position: relative; display: grid; grid-template-columns: 70px 1fr; gap: 10px; align-items: center; padding: 12px; border-radius: 8px; border: 1px solid #3b2a52; background: rgba(255,255,255,.03); }
.hall-ep .eco-sig.mini { height: 80px; justify-self: center; }
.hall-ep h3 { margin: 2px 0; font: 600 18px var(--display); color: #f3eedd; }
.hall-ep.estilo-vhs { border-color: #05d9e8; } .hall-ep.estilo-dossie { border-color: #c9a14a; } .hall-ep.estilo-terminal { border-color: #3f3; } .hall-ep.estilo-fosforo { border-color: #ff8a00; }
.hall-frase { margin: 2px 0; font: italic 13px var(--corpo); color: #b9aecb; }
.hall-mvp { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 13px; color: #ece64a; }
.hall-mvp i { width: 26px; height: 26px; border-radius: 50%; background: #222 center / cover; border: 1px solid var(--cor); }
.hall-x { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--linha); background: transparent; color: var(--texto-dim); }
.hall-cobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.hall-cob { display: grid; justify-items: center; gap: 4px; padding: 14px 10px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--cor) 50%, transparent); background: rgba(255,255,255,.03); text-align: center; }
.hall-cob > i { width: 74px; height: 74px; border-radius: 50%; background: #15101c center / cover; border: 2px solid var(--cor); box-shadow: 0 0 18px color-mix(in srgb, var(--cor) 45%, transparent); }
.hall-cob h3 { margin: 4px 0 0; font: 600 18px var(--display); } .hall-cob > small { font: 11px var(--mono); color: var(--texto-dim); }
.hall-cob dl { width: 100%; margin: 6px 0 0; display: grid; gap: 2px; font-size: 13px; }
.hall-cob dl div { display: flex; justify-content: space-between; gap: 6px; padding: 2px 4px; border-bottom: 1px dashed rgba(255,255,255,.07); }
.hall-cob dl div.zero { opacity: .4; } .hall-cob dt { color: var(--texto-dim); } .hall-cob dd { margin: 0; font: 600 14px var(--mono); }
.hall-salas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hall-salas li { position: relative; display: flex; gap: 10px; align-items: center; padding: 8px 34px 8px 10px; border-radius: 6px; border-left: 3px solid var(--el); background: rgba(255,255,255,.03); }
.hall-salas b { font-size: 18px; } .hall-salas small { display: block; color: var(--texto-dim); }
.conq-lista { list-style: none; margin: 6px 0 0; padding: 0; width: 100%; display: grid; gap: 4px; text-align: left; font-size: 13px; }
.conq-lista li { display: grid; grid-template-columns: 24px 1fr; column-gap: 6px; } .conq-lista li span { grid-row: span 2; font-size: 18px; } .conq-lista small { color: var(--texto-dim); font-size: 11px; }
.conq-lista li.zero { display: block; opacity: .5; }

/* bloco de conquistas */
.cq-grade { display: grid; gap: 6px; margin: 8px 0; }
.cq-cob { padding: 6px 8px; border-left: 3px solid var(--cor); background: #150f1d; border-radius: 6px; font-size: 13px; }
.cq-cob > div { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.cq-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 8px; border-radius: 999px; border: 1px solid #5b4a1a; background: #2b2410; font-size: 12px; }
.cq-chip.man { border-color: #5b3a8a; background: #221633; }
.cq-chip button { border: 0; background: transparent; color: var(--texto-dim); padding: 0 4px; }
.cq-defs { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.cq-defs li { display: flex; gap: 6px; align-items: center; padding: 4px 6px; border-radius: 6px; background: #150f1d; }
.cq-defs li span { flex: 1; } .cq-defs small { color: var(--texto-dim); }
.cq-defs button, #mesaConq .mesa-linha select, #mesaBau select, #mesaBau textarea { border: 1px solid var(--linha); background: #1b1526; color: var(--texto); border-radius: 6px; padding: 4px 8px; font: 13px var(--corpo); }
#mesaConq details summary, #mesaBau details summary { cursor: pointer; color: var(--texto-dim); font-size: 13px; margin: 6px 0; }

/* =========================================================
   Baú de achados
   ========================================================= */
.bau-log { list-style: none; margin: 4px 0; padding: 0; font-size: 12px; display: grid; gap: 2px; } .bau-log small { color: var(--texto-dim); }
.bau-tela { position: fixed; inset: 0; z-index: 3550; display: grid; place-items: center; padding: 16px; background: radial-gradient(ellipse at center, rgba(40,25,5,.85), rgba(0,0,0,.92)); }
.bau-caixa { width: min(420px, 100%); display: grid; justify-items: center; gap: 12px; text-align: center; color: #f3eedd; }
.bau-msg { margin: 0; font: italic 15px var(--corpo); color: #d9c9a0; }
.bau-arte { position: relative; width: 220px; height: 190px; }
.bau-svg { position: relative; z-index: 1; width: 100%; height: 100%; overflow: visible; animation: bauTreme 1.6s ease-in-out infinite; }
.bau-corpo { fill: #6b3f1d; stroke: #2b1708; stroke-width: 2; } .bau-faixa, .bau-tampa path { fill: #8a5226; stroke: #2b1708; stroke-width: 2; } .bau-fecho { fill: #d9a514; stroke: #5b4300; }
.bau-tampa { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .8s cubic-bezier(.3,1.4,.6,1); }
.bau-luz { position: absolute; left: 50%; top: 45%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: #fff3c0; box-shadow: 0 0 80px 50px rgba(255,220,120,.0); transition: box-shadow 1s; }
@keyframes bauTreme { 0%, 100% { transform: rotate(0); } 8% { transform: rotate(-3deg); } 16% { transform: rotate(3deg); } 24% { transform: rotate(0); } }
.bau-tela.abrindo .bau-svg { animation: none; } .bau-tela.abrindo .bau-tampa { transform: translateY(-26px) rotate(-28deg); }
.bau-tela.abrindo .bau-luz { box-shadow: 0 0 120px 70px rgba(255,220,120,.55); }
.bau-item { display: none; padding: 12px 14px; border-radius: 8px; border: 1px solid #c9a14a; background: rgba(20,14,6,.9); }
.bau-tela.aberto .bau-item { display: grid; gap: 4px; animation: bauSobe .7s cubic-bezier(.2,1.3,.5,1); }
@keyframes bauSobe { from { opacity: 0; transform: translateY(40px) scale(.8); } to { opacity: 1; transform: none; } }
.bau-item b { font: 600 22px var(--display); color: #ffe3a0; } .bau-item small { font: 12px var(--mono); color: #c9b48a; } .bau-item p { margin: 4px 0 0; font-size: 13px; line-height: 1.45; text-align: left; color: #e9dfc6; }
.bau-botoes button { padding: 10px 18px; border-radius: 8px; border: 1px solid #c9a14a; background: transparent; color: #f3eedd; font: 15px var(--corpo); }
.bau-botoes button.pri { background: #c9a14a; color: #1a140a; font-weight: 600; }
.btn-hall { width: 100%; margin-top: 8px; border-color: rgba(236,230,74,.45) !important; color: #f3eedd; }

/* conquista desbloqueada (tela do jogador) */
.conq-banner { position: fixed; left: 50%; top: calc(var(--topo-h) + 16px); z-index: 3450; display: flex; gap: 14px; align-items: center; width: min(460px, calc(100vw - 32px)); padding: 14px 18px; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, #2b2410, #120d19 70%); border: 1px solid #ece64a; color: #f3eedd; box-shadow: 0 0 40px rgba(236,230,74,.35), 0 18px 40px rgba(0,0,0,.6); transform: translate(-50%, -30px); opacity: 0; transition: transform .5s cubic-bezier(.2,1.4,.5,1), opacity .4s; cursor: pointer; }
.conq-banner.on { transform: translate(-50%, 0); opacity: 1; }
.conq-ic { flex: 0 0 auto; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; font-size: 28px; background: radial-gradient(circle, rgba(236,230,74,.35), rgba(236,230,74,.05)); border: 1px solid rgba(236,230,74,.6); animation: conqGira 1s ease; }
@keyframes conqGira { from { transform: scale(.2) rotate(-200deg); } 70% { transform: scale(1.15) rotate(10deg); } to { transform: none; } }
.conq-banner small { display: block; font: 11px var(--mono); letter-spacing: .25em; color: #ece64a; }
.conq-banner b { display: block; font: 600 19px var(--display); margin: 2px 0; }
.conq-banner span:not(.conq-ic) { display: block; font-size: 13px; color: #cfc6dc; }
.conq-brilho { position: absolute; top: 0; bottom: 0; width: 40%; left: -50%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.18), transparent); animation: conqBrilho 1.6s .4s ease; pointer-events: none; }
@keyframes conqBrilho { to { left: 120%; } }
.minhas-lista { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.minhas-lista li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(236,230,74,.35); background: rgba(236,230,74,.05); }
.minhas-lista li > span { font-size: 26px; line-height: 1; }
.minhas-lista b { display: block; font: 600 15px var(--display); color: #f3eedd; } .minhas-lista small { display: block; font-size: 12px; color: #cfc6dc; } .minhas-lista em { display: block; font: 11px var(--mono); color: var(--texto-dim); font-style: normal; margin-top: 2px; }
/* idioma do Mostarda */
.msg-bz.gr, .bz-bips.gr { color: #d98c2b; font-style: italic; letter-spacing: .04em; text-shadow: 0 0 6px rgba(217,140,43,.25); }
/* Mestre: apagar mensagem do chat */
.msg-lixo { background: transparent; border: 1px solid transparent; border-radius: 4px; padding: 0 4px; font-size: 12px; line-height: 1.4; opacity: .35; cursor: pointer; }
.msg-topo:hover .msg-lixo, .msg-lixo:focus { opacity: .9; border-color: var(--linha); }
.msg-lixo.confirma { opacity: 1; color: #fff; background: #b3121b; border-color: #b3121b; font: 11px var(--mono); }
@media (hover: none) { .msg-lixo { opacity: .7; } }

/* abertura e encerramento: enquanto a tela cheia toca, o resto do site some (o mapa 2.5D pesa na placa
   de vídeo do celular e fazia partes da abertura não aparecerem) */
body.tela-cheia .topo, body.tela-cheia .corpo, body.tela-cheia .painel-chat, body.tela-cheia .aba-painel, body.tela-cheia .tensao-veu, body.tela-cheia .hud-retratos { visibility: hidden !important; }
/* celular: o sigilo e a tela ficam sem os filtros pesados (tinta, desfoque e grão) */
@media (max-width: 860px), (pointer: coarse) {
  .eco-sig .eco-traco, .eco-sig .eco-gotas, .eco-sig .eco-roxo { filter: none; }
  .eco-sig .eco-roxo path { stroke-width: 30px; stroke-opacity: .32; }
  .ab-tela::after { display: none; }
  .ab-titulos h1 { text-shadow: 0 0 10px rgba(138,47,196,.7); letter-spacing: .2em; padding-left: .2em; }
  .ab-sessao { letter-spacing: .28em; padding-left: .28em; }
  .ab-foto { box-shadow: 0 0 14px color-mix(in srgb, var(--cor, #ece64a) 45%, transparent); }
  .eco-sig.vhs-sig { filter: none; }
  .estilo-vhs h1, .estilo-terminal h1, .estilo-fosforo h1 { text-shadow: 0 0 8px rgba(255,255,255,.25) !important; }
  .fos-chama { box-shadow: 0 0 30px 14px rgba(255,140,0,.35); }
}
/* bloco Sessão: campos no tema escuro (no celular apareciam brancos) */
#mesaSessao select, #mesaSessao textarea, #mesaSessao input:not([type=checkbox]):not([type=range]) { background: #0d0a13; color: var(--texto); border: 1px solid var(--linha); border-radius: 6px; padding: 6px 8px; font: 13px var(--corpo); max-width: 100%; }
#mesaSessao select, #mesaSessao textarea { width: 100%; }
/* baú: a tampa abre sem cobrir o título */
.bau-arte { margin-top: 26px; }

/* =========================================================
   CELULAR EM PÉ: cartão da sala/ficha, gaveta e símbolo do Eco
   ========================================================= */
@media (max-width: 860px) {
  /* o cartão cabe inteiro dentro do mapa (antes o topo, com o ×, ficava escondido atrás da faixa dos andares) */
  .cartao, body.em-persg .cartao {
    top: auto; bottom: 216px; left: 8px; right: 8px; width: auto;
    max-height: min(46vh, calc(100% - 232px)); padding-top: 0;
    overscroll-behavior: contain; touch-action: pan-y;
  }
  body.em-persg .cartao { max-height: min(42vh, calc(100% - 262px)); }
  .cartao > .fechar + * { padding-top: 12px; padding-right: 40px; }
  /* o × acompanha a rolagem do cartão e tem tamanho de dedo */
  .cartao > .fechar {
    position: sticky; top: 0; z-index: 3; display: block; margin: 0 -6px -44px auto;
    width: 44px; height: 44px; font-size: 26px; line-height: 1; color: var(--texto);
    background: rgba(18,15,26,.92); border-radius: 0 0 0 10px;
  }
  .cartao .nota-sala textarea { height: 92px; min-height: 0; }
  /* gaveta fechada: some de verdade (o "Próximo" do teclado não pula para campos escondidos nela) */
  .painel { visibility: hidden; transition: transform .25s, visibility 0s linear .25s; touch-action: pan-y; overscroll-behavior: contain; }
  .painel.aberto { visibility: visible; transition: transform .25s, visibility 0s; }
  /* pinça fora do mapa não amplia a página inteira */
  .topo, .elevador, .camera, .btn-dados, .painel-dados { touch-action: pan-x pan-y; }
  /* símbolo do Eco: sem mistura de cor por cima do mapa 2.5D (no Chrome do Android deixava partes da tela em branco) */
  .eco-simbolo { mix-blend-mode: normal; }
}
@media (pointer: coarse) { .eco-simbolo { mix-blend-mode: normal; } }

/* =========================================================
   CELULAR: correções da varredura completa (20261012zj)
   ========================================================= */
/* botões sem estilo próprio no painel (ex.: "Revelar agora", "consultar a pedra") seguem o tema escuro;
   :where() deixa a especificidade zerada, então qualquer estilo que o botão já tenha continua valendo */
:where(#painel) button:where(:not([class])) {
  background: #1b1526; color: var(--texto); border: 1px solid var(--linha); border-radius: 6px;
  padding: 6px 10px; font: 13px var(--corpo); cursor: pointer;
}
:where(#painel) button:where(:not([class])):hover { border-color: var(--roxo); }
/* campo de arquivo (ex.: imagem da visão) com cara de botão */
input[type=file] { max-width: 100%; font: 13px var(--corpo); color: inherit; }
input[type=file]::file-selector-button { border: 1px solid currentColor; border-radius: 6px; padding: 8px 12px; margin-right: 10px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
/* tela de senha do andar: nada do mapa por cima do terminal */
.palco-area:has(> #bloqueio:not([hidden])) > :is(.btn-dados, .btn-desfazer, .painel-dados, .camera, .hud-retratos, .hud-mostrar, .cartao, .relogio, .faixa-inv, .andar-legenda, .dica) { display: none !important; }
.bloqueio { overflow-y: auto; z-index: 8; }
/* alertas do Mestre: "Fechar todos" e lista com rolagem própria */
.alertas-mestre { max-height: 46vh; overflow-y: auto; overscroll-behavior: contain; }
.alertas-mestre:not(:empty) { pointer-events: auto; }
.alertas-todos { justify-self: end; pointer-events: auto; border: 1px solid var(--linha); background: rgba(12,9,18,.94); color: var(--texto); border-radius: 999px; padding: 8px 14px; font: 12px var(--mono); letter-spacing: .06em; cursor: pointer; }
/* abas que rolam de lado: degradê na borda onde há mais coisa */
.rola-dir { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
.rola-esq { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px); mask-image: linear-gradient(to right, transparent, #000 40px); }
.rola-dir.rola-esq { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
/* Sala de Exposição minimizada não fica por baixo do cartão aberto */
body:has(#cartao:not([hidden])) .expo-chip { display: none; }

@media (max-width: 860px) {
  /* faixas do topo empilhadas; a fileira dos andares e o símbolo do Eco descem o tanto que elas ocupam */
  .faixa-persg, .faixa-protocolo, .faixa-apagao { height: 28px; line-height: 16px; padding: 6px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; letter-spacing: .06em; }
  body.com-faixas .corpo { grid-template-rows: calc(64px + var(--faixas-h, 0px)) 1fr; }
  body.com-faixas .elevador { padding-top: var(--faixas-h, 0px); }
  body.com-faixas .eco-simbolo { top: calc(var(--topo-h) + 4px + var(--faixas-h, 0px)); }
  /* gaveta aberta: o símbolo do Eco não fica por cima do × dela */
  body:has(#painel.aberto) .eco-simbolo { visibility: hidden; }
  body.em-persg .andar-legenda, body.em-persg .relogio { top: 14px; }
  body.em-persg .relogio { top: 10px; }
  /* Holofote: abaixo da fileira dos andares, sem bloquear o toque */
  .hol-banner { top: calc(var(--topo-h) + 72px + var(--faixas-h, 0px)); pointer-events: none; padding: 8px 14px; }
  .hol-banner b { font-size: 14px; }
  /* Sala de Exposição minimizada: acima do botão Dados, longe da câmera */
  .expo-chip { left: 10px; right: auto; bottom: 214px; max-width: calc(100vw - 20px); }
  /* Investigação: canto direito, fora do retrato do jogador */
  .faixa-inv, body.em-persg .faixa-inv { left: auto; right: 8px; transform: none; top: 56px; max-width: calc(100% - 130px); padding: 6px 10px; }
  /* Hall da Caixa: o topo com o × acompanha a rolagem */
  .hall-caixa { padding-top: 0; }
  .hall-caixa > header { position: sticky; top: 0; z-index: 4; margin: 0 -18px 4px; padding: 14px 18px 6px; background: #150f1d; border-bottom: 1px solid #2a1f38; }
  .hall-caixa h2 { font-size: 22px; margin-bottom: 4px; }
  .hall-fechar { width: 44px; height: 44px; flex: none; }
  /* Quadro: todas as ferramentas à vista, em duas linhas */
  .qd-ferramentas { flex-wrap: wrap; justify-content: center; overflow-x: visible; }
  .qd-ferramentas button { width: 40px; height: 40px; }
  .qd-opcoes { bottom: calc(112px + env(safe-area-inset-bottom)); }
  .qd-ajuda { display: none; }
  .qd-fechar { min-width: 40px; min-height: 40px; }
  /* alvos de toque maiores */
  #btnFecharChat, .dados-topo .fechar, .fx-fechar, .escudo .fechar, [data-esc="fechar"] { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; }
  #btnAjuda { min-width: 34px; }
  .hud-recolher { width: 36px; height: 30px; margin-left: 20px; font-size: 16px; }
  .setup-linha { grid-template-columns: 24px 24px minmax(0, 1fr) 34px 56px 36px 62px; }
  .setup-linha input.ck { width: 22px; height: 22px; margin: 0; }
  .setup-linha .ini, .setup-linha .lim { min-height: 32px; }
  .setup-linha .dado-mini { min-width: 34px; min-height: 32px; }
}
@media (max-width: 400px) {
  /* nome do andar mais discreto para não cobrir a primeira fileira de salas */
  .andar-legenda { top: 8px; left: 10px; }
  .andar-legenda span { font-size: 16px; text-shadow: 0 1px 6px #000, 0 0 2px #000; }
  .andar-legenda small { display: none; }
}
/* computador: com faixas no topo, o corpo do site desce o tanto delas (antes a faixa cobria as abas do Mestre) */
@media (min-width: 861px) {
  body.com-faixas .corpo { margin-top: var(--faixas-h, 0px); height: calc(100% - var(--topo-h) - var(--faixas-h, 0px)); }
  body.com-faixas.em-persg .andar-legenda { top: 14px; }
  body.com-faixas.em-persg .relogio { top: 14px; }
  body.com-faixas.em-persg .cartao { top: 82px; }
  body.com-faixas.em-persg .faixa-inv { top: 10px; }
}

/* =========================================================
   SOBREVIVENDO AO HORROR (sah.js): perseguição, furtividade, medo
   ========================================================= */
.sah-faixas { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 7; display: grid; gap: 6px; width: max-content; max-width: calc(100% - 24px); pointer-events: none; }
.sah-faixas[hidden] { display: none; }
.palco-area:has(#faixaInv) .sah-faixas { top: 54px; }
body.em-persg .sah-faixas { top: 40px; }
.sah-faixa { pointer-events: auto; background: rgba(10,8,12,.93); border: 1px solid #7a2a32; border-radius: 10px; padding: 7px 12px; color: #f1e6ea; box-shadow: 0 8px 24px rgba(0,0,0,.5); cursor: pointer; max-width: 100%; }
.sah-furt { border-color: #2f7d72; }
.sah-faixa .inv-k { color: #ff8a93; } .sah-furt .inv-k { color: #7fd8c8; }
.sah-btn { border: 1px solid #b3121b; background: #b3121b; color: #fff; border-radius: 7px; padding: 5px 10px; font: 600 13px var(--corpo); cursor: pointer; min-height: 32px; }
.sah-furt .sah-btn { background: #2f7d72; border-color: #2f7d72; }
.sah-ev { margin: 6px 0 2px; font-size: 13px; line-height: 1.45; color: #ffd98a; }
.sah-lista { display: none; list-style: none; margin: 6px 0 0; padding: 0; font-size: 13px; max-height: 38vh; overflow-y: auto; }
.sah-faixa.aberta .sah-lista { display: grid; gap: 3px; }
.sah-lista li { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 2px 0; }
.sah-lista li.eu { color: #fff; font-weight: 600; }
.sah-lista li.visto { color: #ff7b85; }
.sah-lista small { color: #b9a9b0; font-size: 11px; }
.sah-pips { display: inline-flex; gap: 6px; }
.sah-pips span { display: inline-flex; gap: 2px; }
.sah-pips i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid currentColor; display: inline-block; }
.sah-pips .ok { color: #59c49a; } .sah-pips .ruim { color: #ff6b75; }
.sah-pips i.on { background: currentColor; }
.sah-olhos { letter-spacing: -2px; font-size: 12px; }
.sah-grade { display: grid; gap: 6px; }
.sah-part { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 6px 0 10px; }
.sah-part-l { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.sah-part-l select { background: #0d0a13; color: var(--texto); border: 1px solid var(--linha); border-radius: 6px; padding: 3px; font-size: 12px; }
.sah-tab { display: grid; gap: 6px; margin: 8px 0; }
.sah-tab-l { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 6px 8px; border: 1px solid var(--linha); border-radius: 8px; }
.sah-tab-l.visto { border-color: #b3121b; }
.sah-tab-l small { color: var(--texto-dim); }
.sah-ctl { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; }
.sah-ctl button { min-width: 36px; }
.sah-tabela { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 6px 0; }
.sah-tabela th, .sah-tabela td { border: 1px solid var(--linha); padding: 4px 6px; text-align: left; vertical-align: top; }
.sah-tabela th { background: #1b1526; }
.sah-janela .mesa-caixa { border-top-color: #b3121b; }
.sah-janela.sah-furt-j .mesa-caixa { border-top-color: #2f7d72; }
.sah-janela.sah-furt-j .mesa-botoes button.pri { background: #2f7d72; border-color: #2f7d72; }
.sah-ev-op { margin: 8px 0; }
@media (max-width: 860px) {
  .sah-faixas { top: 64px; width: calc(100% - 16px); max-width: none; }
  .palco-area:has(#faixaInv) .sah-faixas { top: 108px; }
  body.em-persg .sah-faixas { top: 94px; }
  .sah-faixa { padding: 6px 10px; }
  .sah-faixa .inv-linha { font-size: 13px; }
  .sah-btn { min-height: 38px; }
  .sah-ctl button { min-height: 38px; }
}
/* bestiário (importar criaturas do Sobrevivendo ao Horror) */
.fx-bestiario { max-width: 620px; }
.fx-best-lista { max-height: 55vh; overflow-y: auto; display: grid; gap: 10px; margin: 8px 0; }
.fx-best-lista h4 { display: flex; align-items: center; gap: 8px; justify-content: space-between; margin: 6px 0; font: 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ac, #c9a14a); }
.fx-best-item { display: flex; gap: 8px; align-items: baseline; padding: 6px 4px; border-bottom: 1px solid rgba(255,255,255,.06); min-height: 36px; }
.fx-best-item[hidden] { display: none; }
.fx-best-item small { color: var(--texto-dim, #a99); font-size: 11.5px; }
.fx-busca { width: 100%; background: #0d0a13; color: var(--texto); border: 1px solid var(--linha); border-radius: 6px; padding: 8px; font: 14px var(--corpo); }
.fx-fonte { display: block; margin: -2px 0 4px; opacity: .8; }
.fx-bestiario > :not(.fx-modal-topo) { margin-left: 14px; margin-right: 14px; }
.fx-bestiario > .fx-det-acoes { margin-bottom: 14px; }
.fx-bestiario .fx-best-lista { flex: 1; min-height: 0; max-height: none; }
@media (min-width: 861px) { .fx-bestiario .fx-best-lista { max-height: 55vh; } }
/* SaH · sorteios com bônus */
.sah-sort-bts{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.sah-sort-b{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap}
.sah-bonus{display:inline-flex;align-items:center;gap:4px;font-size:12px}
.sah-bonus input{width:52px}
.sah-bonus small{opacity:.7}
#sahMsort:empty{display:none}
/* Calculadora de NEX · passos rápidos */
.nx-passo { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 4px; margin: 8px 0 2px; }
.nx-passo button { background: transparent; border: 1px solid var(--nx-linha); border-radius: 6px; color: #f0e9b8; padding: 6px 0; font: 600 13px var(--mono); cursor: pointer; min-height: 34px; }
.nx-passo button:hover { border-color: var(--nex); color: var(--nex); }
.nx-passo button[data-nx="definir"] { padding: 6px 10px; font-weight: 400; }

/* =========================================================
   HUD LIMPO (padrão para todos; "Visual clássico" no ⚙ do painel desliga)
   ========================================================= */
/* barra do painel: busca, recolher/abrir, aparência */
.painel-barra { position: relative; display: flex; gap: 6px; align-items: center; margin: 0 0 14px; }
.painel-barra.so-botoes .painel-busca { display: none; }
.painel-barra.so-botoes { justify-content: flex-end; margin-bottom: 6px; }
.painel-busca { flex: 1; min-width: 0; background: #0f0c16; border: 1px solid var(--linha); border-radius: 6px; color: var(--texto); padding: 7px 10px; font: 13px var(--mono); }
.painel-busca:focus { outline: none; border-color: var(--roxo); }
.pb-btn { flex: none; width: 32px; height: 32px; border-radius: 6px; background: transparent; border: 1px solid var(--linha); color: var(--texto-dim); font-size: 15px; display: grid; place-items: center; padding: 0; }
.pb-btn:hover, .pb-btn[aria-expanded="true"] { border-color: var(--roxo); color: var(--roxo-claro); }
.pb-menu { position: absolute; right: 0; top: 38px; z-index: 30; width: min(280px, 86vw); background: #15111f; border: 1px solid var(--roxo); border-radius: 8px; padding: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.6); display: grid; gap: 6px; }
.pb-menu[hidden] { display: none; }
.pb-menu b { font: 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--texto-dim); }
.painel.buscando section.bloco.fora-da-aba:not([hidden]):not(.fora-busca) { display: block !important; }
.painel .bloco.fora-busca { display: none !important; }
.painel.buscando .bloco.achou h2 { color: #fff; }
.bloco-fav { cursor: pointer; color: var(--texto-dim); margin-right: 8px; font-size: 14px; letter-spacing: 0; opacity: .45; transition: opacity .15s; }
.bloco h2:hover .bloco-fav, .bloco-fav:focus-visible { opacity: 1; }
.bloco.fav .bloco-fav { color: #f5c542; opacity: 1; }
.bloco h2.dobra { justify-content: flex-start; }
.bloco h2.dobra::after { margin-left: auto; }

/* títulos e espaçamento do painel mais leves */
body.hud-limpo .painel { padding: 14px 14px 40px; }
body.hud-limpo .bloco h2 { font-size: 13px; letter-spacing: .08em; margin-bottom: 10px; color: #b9a6f0; }
body.hud-limpo .bloco + .bloco, body.hud-limpo.mestre .painel .bloco + .bloco { margin-top: 0; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.06); }
body.hud-limpo .bloco { padding-bottom: 12px; }
body.hud-limpo .bloco.fechado { padding-bottom: 0; }
body.hud-limpo .bloco.fechado h2 { margin-bottom: 12px; }

/* jogador: atalhos da cobaia em grade de 2 colunas, menores */
body.hud-limpo #blocoMinha { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
body.hud-limpo #blocoMinha[hidden] { display: none; }
body.hud-limpo #blocoMinha > h2, body.hud-limpo #blocoMinha > #minhaFicha, body.hud-limpo #blocoMinha > #zonaJogador { grid-column: 1 / -1; }
body.hud-limpo #blocoMinha > button { margin: 0; width: 100%; padding: 8px 6px; font-size: 13px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
body.hud-limpo #blocoMinha > button[hidden] { display: none; }
body.hud-limpo #blocoMinha.fechado > :not(h2) { display: none !important; }

/* topo: botões mais discretos; no celular só os ícones */
body.hud-limpo .topo-dir { gap: 6px; }
body.hud-limpo .topo-dir .btn-fantasma { border-color: transparent; background: rgba(255,255,255,.03); }
body.hud-limpo .topo-dir .btn-fantasma:hover { border-color: var(--linha); }
body.hud-limpo #btnMestre { border-color: var(--roxo); background: rgba(139,92,246,.12); }
body.hud-limpo .sync { font-size: 11px; padding: 3px 8px; }
@media (max-width: 1180px) { body.hud-limpo .topo-dir .btn-pilha .rot { display: none; } body.hud-limpo .topo-dir .btn-pilha { padding: 7px 10px; } }
@media (max-width: 860px) {
  body.hud-limpo .topo-dir .btn-pilha { flex-direction: row; min-width: 40px; padding: 6px 8px; }
  body.hud-limpo .topo-dir .btn-pilha .ic { font-size: 18px; }
  body.hud-limpo .sync { font-size: 0; padding: 0; width: 10px; height: 10px; border-radius: 50%; border: 0; background: var(--texto-dim); }
  body.hud-limpo .sync.vivo { background: var(--ok); }
  body.hud-limpo .sync.vivo::before { content: none; }
  body.hud-limpo .sync.erro { background: var(--perigo); }
  body.hud-limpo #btnMestre { max-width: 120px; padding: 6px 8px; font-size: 13px; line-height: 1.15; }
  body.hud-limpo #btnMestre .perfil-nome { display: inline-block; max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
}

/* andares menores */
body.hud-limpo .andar-btn { width: 50px; height: 50px; font-size: 17px; }
body.hud-limpo .elevador { gap: 8px; padding: 12px 0; }
body.hud-limpo .lista-andares { gap: 8px; }
body.hud-limpo .andar-legenda span { font-size: 20px; }
body.hud-limpo .andar-legenda small { font-size: 11px; }
@media (max-width: 860px) {
  body.hud-limpo .andar-btn { width: 40px; height: 40px; font-size: 15px; }
  body.hud-limpo .andar-btn .cadeado { width: 18px; height: 18px; font-size: 10px; right: -5px; bottom: -5px; }
  body.hud-limpo .eco-simbolo { height: 46px; }
  body.hud-limpo .andar-legenda { top: 8px; left: 12px; }
  body.hud-limpo .andar-legenda span { font-size: 16px; }
}

/* câmera: + − ◎ (◉) e ⋯ ; o resto aparece no ⋯ */
.camera .cam-mais { font-size: 18px; line-height: 1; }
body:not(.hud-limpo) .camera .cam-mais { display: none; }
body.hud-limpo .camera { display: flex; flex-direction: column-reverse; flex-wrap: wrap-reverse; gap: 6px; align-items: flex-end; max-height: 240px; }
body.hud-limpo .camera button { width: 38px; height: 38px; padding: 0; border-radius: 50%; background: rgba(14,11,20,.78); border-color: rgba(255,255,255,.1); font-size: 14px; backdrop-filter: blur(4px); }
body.hud-limpo .camera button[data-cam="iso"], body.hud-limpo .camera button[data-cam="topo"] { font-size: 10px; letter-spacing: .04em; }
body.hud-limpo .camera button[hidden] { display: none; }
body.hud-limpo .camera:not(.aberta) .cam-extra { display: none; }
body.hud-limpo .camera.aberta .cam-mais { background: var(--roxo-escuro); border-color: var(--roxo); }
@media (max-width: 860px) {
  body.hud-limpo .camera { right: 10px; bottom: 74px; max-height: 210px; }
  body.hud-limpo .camera button { width: 40px; height: 40px; }
}

/* dados: botão redondo no celular, discreto no computador */
body.hud-limpo .btn-dados { border-color: rgba(139,92,246,.6); padding: 7px 12px; font-size: 14px; }
@media (max-width: 860px) {
  body.hud-limpo .btn-dados { width: 46px; height: 46px; padding: 0; border-radius: 50%; display: grid; place-items: center; font-size: 20px; bottom: 74px; }
  body.hud-limpo .btn-dados .rot { display: none; }
}
.dica.dica-off { display: none; }
body.hud-limpo .dica { font-size: 11px; opacity: .8; transition: opacity 1s; }

/* retratos: cartões compactos (foto com anel na cor da cobaia, nome e PV); a mancha de sangue só aparece morrendo */
body.hud-limpo .hud-retratos { gap: 6px; }
body.hud-limpo .hud-card { gap: 8px; padding: 4px 10px 4px 4px; border-radius: 999px; background: rgba(12,9,16,.72); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(4px); }
body.hud-limpo .hud-card:not(.morrendo) .hud-mancha { display: none; }
body.hud-limpo .hud-retrato { width: 46px; height: 46px; }
body.hud-limpo .hud-foto { inset: 0; box-shadow: 0 0 0 2px var(--cor); }
body.hud-limpo .hud-card.morrendo .hud-mancha { inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); }
body.hud-limpo .hud-txt { margin: 0; line-height: 1.1; gap: 1px; }
body.hud-limpo .hud-nome { font: 600 12px var(--mono); letter-spacing: .08em; text-shadow: none; color: #eee; }
body.hud-limpo .hud-pv { font: 700 15px var(--mono); text-shadow: none; color: #fff; }
body.hud-limpo .hud-pv i { color: #ff7a85; }
body.hud-limpo .hud-pe { left: auto; right: -6px; bottom: -4px; font: 700 11px var(--mono); min-width: 20px; padding: 0 4px; text-shadow: none; }
body.hud-limpo .hud-estado { top: auto; bottom: -6px; left: 50%; transform: translateX(-50%); font-size: 8px; }
body.hud-limpo .hud-retratos.muitos .hud-retrato { width: 36px; height: 36px; }
body.hud-limpo .hud-retratos.muitos .hud-foto { inset: 0; }
body.hud-limpo .hud-retratos.muitos .hud-nome { font-size: 11px; }
body.hud-limpo .hud-retratos.muitos .hud-pv { font-size: 13px; }
body.hud-limpo .hud-retratos.muitos .hud-pe { font-size: 10px; min-width: 18px; }
body.hud-limpo .hud-retratos.muitos .hud-estado { top: auto; }
body.hud-limpo .hud-recolher { margin-left: 14px; }
@media (max-width: 860px) {
  body.hud-limpo .hud-retratos { left: 8px; }
  body.hud-limpo .hud-retratos.muitos { gap: 4px; }
  body.hud-limpo .hud-retratos.muitos .hud-card { flex-direction: column; padding: 3px 3px 4px; border-radius: 10px; gap: 2px; min-width: 50px; }
  body.hud-limpo .hud-retratos.muitos .hud-retrato { width: 32px; height: 32px; }
  body.hud-limpo .hud-retratos.muitos .hud-nome { font-size: 9px; letter-spacing: .02em; max-width: 54px; overflow: hidden; text-overflow: ellipsis; }
  body.hud-limpo .hud-retratos.muitos .hud-pv { font-size: 11px; }
  body.hud-limpo .hud-retratos.muitos .hud-txt { text-align: center; }
}
/* ajustes do HUD limpo */
body.hud-limpo #blocoMinha .btn-cor .pinta { width: 16px; height: 16px; min-width: 16px; }
body.hud-limpo .camera { max-height: none; flex-wrap: nowrap; }
body.hud-limpo .camera.aberta { flex-wrap: wrap-reverse; max-height: 230px; }
@media (min-width: 861px) {
  /* Mestre: coluna estreita só com foto e PV (o nome aparece ao passar o mouse) */
  body.hud-limpo .hud-retratos.muitos .hud-nome { display: none; }
  body.hud-limpo .hud-retratos.muitos .hud-card { padding: 3px 9px 3px 3px; gap: 6px; }
}
@media (max-width: 860px) {
  body.hud-limpo #btnMestre { white-space: nowrap; }
  body.hud-limpo #btnMestre .perfil-seta { display: none; }
  body.hud-limpo .topo-dir .btn-pilha .rot { display: none; }
  body.hud-limpo .hud-retratos.muitos .hud-txt { margin: 0; }
  body.hud-limpo .hud-retratos.muitos .hud-nome { text-shadow: none; }
}
.pb-linha { display: flex; gap: 6px; }
.pb-linha .btn-fantasma { flex: 1; padding: 6px 8px; font-size: 13px; }
@media (max-width: 380px) { body.hud-limpo #btnAjuda { display: none; } }
@media (max-width: 440px) {
  /* telas estreitas: o som (e, abaixo de 380 px, a ajuda) vai para o ⚙ do painel */
  body.hud-limpo #btnSom { display: none; }
  body.hud-limpo .topo { padding: 0 8px; }
  body.hud-limpo .topo-dir { gap: 4px; }
  body.hud-limpo .topo-dir .btn-pilha { min-width: 36px; padding: 6px; }
  body.hud-limpo #btnMestre { max-width: 104px; }
}
@media (max-width: 860px) {
  /* retrato do jogador no celular: estreito, para a faixa da investigação caber ao lado */
  body.hud-limpo .hud-retratos:not(.muitos) .hud-retrato { width: 40px; height: 40px; }
  body.hud-limpo .hud-retratos:not(.muitos) .hud-card { padding: 3px 8px 3px 3px; gap: 6px; }
  body.hud-limpo .hud-retratos:not(.muitos) .hud-nome { font-size: 10px; letter-spacing: .04em; max-width: 72px; overflow: hidden; text-overflow: ellipsis; }
  body.hud-limpo .hud-retratos:not(.muitos) .hud-pv { font-size: 13px; }
}

/* =========================================================
   SALA EM 3D (sala3d.js)
   ========================================================= */
.s3d-bloco { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0 4px; padding-top: 10px; border-top: 1px dashed var(--linha); }
.s3d-bloco [data-s3d="abrir"] { font-weight: 600; }
.s3d-bloco .mini { flex-basis: 100%; }
body.s3d-aberta { overflow: hidden; }
.s3d { position: fixed; inset: 0; z-index: 9000; background: #050408; color: var(--texto); }
.s3d[hidden] { display: none; }
.s3d-palco { position: absolute; inset: 0; }
.s3d-palco canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.s3d-palco canvas:active { cursor: grabbing; }
.s3d-topo {
  position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: max(10px, env(safe-area-inset-top)) 12px 18px; background: linear-gradient(180deg, rgba(5,4,8,.88), rgba(5,4,8,0)); pointer-events: none;
}
.s3d-tit { display: flex; flex-direction: column; min-width: 0; pointer-events: auto; }
.s3d-tit b { font: 700 13px/1 var(--mono); letter-spacing: .18em; color: var(--roxo-claro); }
.s3d-tit span { font: 600 18px/1.2 var(--display); margin-top: 4px; overflow-wrap: break-word; hyphens: auto; }
/* celular estreito com muitos botões no topo (Mestre): nome da sala menor e a dica desce para não encavalar */
@media (max-width: 440px) {
  .s3d-tit span { font-size: 14px; line-height: 1.15; }
}
.s3d-x { pointer-events: auto; flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linha); background: rgba(18,15,26,.85); color: var(--texto); font-size: 20px; cursor: pointer; }
.s3d-x:hover { border-color: var(--roxo); }
.s3d-msg { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; text-align: center; font: 14px var(--mono); color: var(--texto-dim); }
.s3d-msg[hidden] { display: none; }
.s3d-dica { position: absolute; left: max(12px, env(safe-area-inset-left)); top: calc(max(10px, env(safe-area-inset-top)) + 58px); max-width: calc(100% - 160px); margin: 0; font: 11px/1.4 var(--mono); color: var(--texto-dim); pointer-events: none; text-shadow: 0 1px 3px #000; }
@media (max-width: 440px) { .s3d-dica { top: calc(max(10px, env(safe-area-inset-top)) + 82px); } }
/* Mestre no celular estreito (7 botões no topo): o nome da sala vai para a linha de baixo, inteiro, e a dica desce junto */
@media (max-width: 440px) {
  .s3d-topo:has(#s3dBtPainel:not([hidden])) { flex-wrap: wrap; row-gap: 4px; }
  .s3d-topo:has(#s3dBtPainel:not([hidden])) .s3d-topo-bts { order: 1; margin-left: auto; }
  .s3d-topo:has(#s3dBtPainel:not([hidden])) .s3d-tit { order: 2; flex-basis: 100%; max-width: calc(100% - 118px); }
  .s3d-topo:has(#s3dBtPainel:not([hidden])) .s3d-tit span { font-size: 15px; }
  .s3d:has(#s3dBtPainel:not([hidden])) .s3d-dica { top: calc(max(10px, env(safe-area-inset-top)) + 100px); }
}
.s3d-barra {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: max(12px, env(safe-area-inset-bottom)); display: flex; gap: 4px;
  padding: 5px; border-radius: 14px; background: rgba(18,15,26,.9); border: 1px solid var(--linha); max-width: calc(100% - 16px);
}
.s3d-barra button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 54px; min-height: 48px; padding: 5px 8px;
  border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--texto); font: 11px var(--mono); cursor: pointer; white-space: nowrap;
}
.s3d-barra button i { font-style: normal; font-size: 18px; line-height: 1; }
.s3d-barra button.on { background: var(--roxo-escuro); border-color: var(--roxo); }
.s3d-barra button[hidden] { display: none; }
@media (max-width: 420px) {
  .s3d-barra { gap: 1px; padding: 4px; }
  .s3d-barra button { min-width: 48px; flex: 0 0 auto; padding: 5px 3px; font-size: 10px; }
  .s3d-tit span { font-size: 16px; }
}
/* joystick (telas de toque) */
.s3d-joy {
  position: absolute; left: max(16px, env(safe-area-inset-left)); bottom: calc(max(12px, env(safe-area-inset-bottom)) + 74px);
  width: 118px; height: 118px; border-radius: 50%; touch-action: none; z-index: 3;
  background: radial-gradient(circle, rgba(139,92,246,.10) 0 55%, rgba(139,92,246,.22) 56% 100%);
  border: 1px solid rgba(196,168,255,.45); box-shadow: inset 0 0 18px rgba(0,0,0,.6);
}
.s3d-joy[hidden] { display: none; }
.s3d-joy span {
  position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c4a8ff, #5b3fa0 70%); box-shadow: 0 3px 10px rgba(0,0,0,.6); pointer-events: none;
}
.s3d-topo-bts { display: flex; gap: 6px; pointer-events: auto; }
.s3d-mini { font-size: 17px; }
.s3d-mini[hidden] { display: none; }
/* faixas: Protocolo e perseguição */
.s3d-faixas { position: absolute; left: 50%; transform: translateX(-50%); top: calc(max(10px, env(safe-area-inset-top)) + 86px); display: grid; gap: 6px; justify-items: center; pointer-events: none; width: min(560px, calc(100% - 24px)); z-index: 2; }
.s3d-prot, .s3d-persg { padding: 6px 12px; border-radius: 8px; font: 600 12px/1.35 var(--mono); text-align: center; letter-spacing: .04em; }
.s3d-prot { background: rgba(140,0,0,.88); border: 1px solid #ff4d4d; color: #fff; animation: s3dPulso 1s ease-in-out infinite; }
.s3d-persg { background: rgba(18,15,26,.88); border: 1px solid var(--linha); color: var(--texto); }
.s3d-persg.minha { border-color: #ffd23f; box-shadow: 0 0 14px rgba(255,210,63,.4); }
.s3d-prot[hidden], .s3d-persg[hidden] { display: none; }
@keyframes s3dPulso { 50% { opacity: .6; } }
/* decibelímetro no 3D */
.s3d-db { position: absolute; right: max(12px, env(safe-area-inset-right)); top: calc(max(10px, env(safe-area-inset-top)) + 58px); width: 118px; padding: 8px; border-radius: 10px; background: rgba(12,10,16,.82); border: 1px solid var(--linha); display: grid; justify-items: center; gap: 4px; pointer-events: none; z-index: 2; }
.s3d-db[hidden] { display: none; }
.s3d-db b { font: 700 9px var(--mono); letter-spacing: .14em; color: var(--texto-dim); }
.s3d-db span { font: 600 11px var(--mono); text-align: center; }
.s3d-db small { font: 10px var(--mono); color: var(--texto-dim); text-align: center; overflow-wrap: anywhere; }
.s3d-db-col { display: grid; gap: 3px; width: 46px; }
.s3d-db-col i { display: block; height: 9px; border-radius: 2px; background: rgba(255,255,255,.08); }
.s3d-db-col i.on.n1 { background: #2ecc71; } .s3d-db-col i.on.n2 { background: #a3d93c; } .s3d-db-col i.on.n3 { background: #f1c40f; } .s3d-db-col i.on.n4 { background: #e67e22; } .s3d-db-col i.on.n5 { background: #e74c3c; }
.s3d-db.alerta { border-color: #e74c3c; box-shadow: 0 0 16px rgba(231,76,60,.45); }
/* aviso curto e o botão de interagir */
.s3d-prompt { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(max(12px, env(safe-area-inset-bottom)) + 74px); min-height: 44px; padding: 8px 16px; border-radius: 22px; border: 1px solid #ffd23f; background: rgba(30,24,8,.9); color: #ffe9a8; font: 600 13px var(--mono); cursor: pointer; z-index: 3; max-width: calc(100% - 180px); }
.s3d-prompt[hidden] { display: none; }
.s3d-toast { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(max(12px, env(safe-area-inset-bottom)) + 128px); padding: 7px 14px; border-radius: 8px; background: rgba(18,15,26,.92); border: 1px solid var(--roxo); font: 12px var(--mono); text-align: center; max-width: calc(100% - 32px); pointer-events: none; z-index: 3; }
.s3d-toast[hidden] { display: none; }
.s3d-codigo { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); display: grid; gap: 8px; padding: 14px; border-radius: 12px; background: #15111f; border: 1px solid #ffd23f; z-index: 6; width: min(300px, calc(100% - 32px)); }
.s3d-codigo[hidden] { display: none; }
.s3d-codigo label { display: grid; gap: 6px; font: 12px var(--mono); }
.s3d-codigo input { font: 20px var(--mono); padding: 8px; text-align: center; letter-spacing: .3em; background: #0b0910; color: var(--texto); border: 1px solid var(--linha); border-radius: 8px; }
.s3d-codigo button { min-height: 40px; border-radius: 8px; border: 1px solid var(--roxo); background: var(--roxo-escuro); color: var(--texto); font: 600 13px var(--mono); cursor: pointer; }
/* frestas do armário: quem se esconde vê por entre as aletas */
.s3d-fresta { position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,.94) 0 26px, rgba(0,0,0,0) 26px 34px), radial-gradient(ellipse at center, rgba(0,0,0,0) 30%, rgba(0,0,0,.85) 80%); }
.s3d-fresta[hidden] { display: none; }
/* painel do Mestre e opções */
.s3d-painel, .s3d-opcoes { position: absolute; right: max(10px, env(safe-area-inset-right)); top: calc(max(10px, env(safe-area-inset-top)) + 56px); bottom: calc(max(12px, env(safe-area-inset-bottom)) + 70px); width: min(320px, calc(100% - 20px)); overflow: auto; padding: 12px; border-radius: 12px; background: rgba(15,12,22,.95); border: 1px solid var(--roxo); z-index: 5; display: grid; align-content: start; gap: 12px; }
.s3d-opcoes { bottom: auto; }
.s3d-painel[hidden], .s3d-opcoes[hidden] { display: none; }
.s3d-painel section { display: grid; gap: 6px; padding-bottom: 10px; border-bottom: 1px dashed var(--linha); }
.s3d-painel h4 { margin: 0; font: 700 13px var(--mono); color: var(--roxo-claro); letter-spacing: .06em; }
.s3d-painel .mini, .s3d-opcoes .mini { margin: 0; }
.s3d-op { display: flex; flex-wrap: wrap; gap: 6px; }
.s3d-op button { min-height: 36px; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--linha); background: transparent; color: var(--texto); font: 12px var(--mono); cursor: pointer; }
.s3d-op button.on { background: var(--roxo-escuro); border-color: var(--roxo); }
.s3d-painel select { min-height: 38px; background: #0b0910; color: var(--texto); border: 1px solid var(--linha); border-radius: 8px; font: 13px var(--mono); padding: 4px 8px; }
.s3d-painel-x { justify-self: end; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--linha); background: transparent; color: var(--texto); cursor: pointer; }
.s3d.s3d-andando .s3d-dica { opacity: .85; }
@media (max-width: 420px) {
  .s3d-db { width: 96px; padding: 6px; }
  .s3d-prompt { max-width: calc(100% - 150px); font-size: 12px; left: auto; right: 12px; transform: none; }
  .s3d-faixas { top: calc(max(10px, env(safe-area-inset-top)) + 100px); }
}
/* botões da fuga (Barricar, Barulho, Sinal) no mesmo canto: o "Esconder-se" sobe para cima deles */
.s3d:has(#fugaBarra:not([hidden])) .s3d-prompt { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 128px); }
.s3d:has(#fugaBarra:not([hidden])):has(#fugaRota:not([hidden])) .s3d-prompt { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 182px); }
/* 2D: token escondido num esconderijo (só o dono e o Mestre veem) */
.ficha.escondida { opacity: .5; }
.ficha.escondida .ficha-nome::after { content: ' · escondido'; color: var(--texto-dim); }
.s3d-bloco button { min-height: 38px; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--roxo); background: var(--roxo-escuro); color: var(--texto); font: 600 13px var(--mono); cursor: pointer; }
.s3d-bloco button:hover { background: #4a2c80; }
.s3d-bloco button.btn-fantasma { background: transparent; border-color: var(--linha); color: var(--texto-dim); font-weight: 400; }

/* =========================================================
   NÉVOA DE GUERRA E MOLDURAS DAS FICHAS (nevoa.js)
   ========================================================= */
.sala.nevoa::before {
  content: ''; position: absolute; inset: -1px; z-index: 2; pointer-events: none;
  background:
    repeating-linear-gradient(135deg, rgba(196,168,255,.035) 0 7px, transparent 7px 14px),
    radial-gradient(ellipse at 50% 45%, rgba(12,9,18,.93), rgba(4,3,7,.985) 72%);
  box-shadow: inset 0 0 26px rgba(0,0,0,.9);
}
.sala.nevoa .sala-nome, .sala.nevoa .sala-el { visibility: hidden; }
.sala.nevoa .sala-rotulo { z-index: 3; position: absolute; }
.sala.nevoa .sala-cn { color: rgba(236,230,247,.22); }
.ficha.na-nevoa { visibility: hidden; }
.nv-bloco { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0 4px; padding-top: 10px; border-top: 1px dashed var(--linha); }
.nv-bloco .nv-tit { flex-basis: 100%; font-size: 13px; }
.nv-bloco .mini { flex-basis: 100%; }
.nv-bloco button { min-height: 38px; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--roxo); background: var(--roxo-escuro); color: var(--texto); font: 600 13px var(--mono); cursor: pointer; }
.nv-bloco button.btn-fantasma { background: transparent; border-color: var(--linha); color: var(--texto-dim); font-weight: 400; }

/* moldura redonda na cor da ficha (aro dourado fino + brilho de vidro) */
body.tokens-moldura .ficha:not(.filho) .ficha-cabeca {
  position: relative;
  border: 4px solid var(--contorno, var(--cor));
  box-shadow:
    0 0 0 1.5px #d8b15a, 0 0 0 3px rgba(0,0,0,.85),
    inset 0 0 0 1px rgba(255,255,255,.28), inset 0 -5px 9px rgba(0,0,0,.55),
    0 3px 6px rgba(0,0,0,.6), 0 0 12px var(--cor);
}
body.tokens-moldura .ficha:not(.filho) .ficha-cabeca::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none;
  background:
    linear-gradient(155deg, rgba(255,255,255,.55), rgba(255,255,255,.08) 30%, rgba(255,255,255,0) 45%),
    radial-gradient(circle at 50% 115%, rgba(0,0,0,.4), transparent 55%);
}

/* =========================================================
   O JOGO DENTRO DO 3D: câmera de jogo, menu, painel do site dentro do 3D
   ========================================================= */
/* janelas do site (fichas, quadro, arquivo, loja, chat, escudo…) abrem POR CIMA da vista 3D */
body.s3d-aberta :is(.fx-tela, .qd-tela, .arquivo-tela, .mesa-janela, .escudo, .relatorio-tela, .nex-tela, .parede-tela, .visao-tela,
  .dil-tela, .expo-tela, .expo-chip, .dest-tela, .hall-tela, .bau-tela, .ab-tela, .sigilo-tela, .momento-tela, .faixa-meianoite,
  .alertas-mestre, .conq-banner, .hol-banner, .tensao-veu, .efeito-tela, .fx-rolagem, .perfil, .faixa-conexao) { z-index: 9500 !important; }
body.s3d-aberta :is(.rr-modal, .bz-modal, .fx-modal, .cf-palpite, .cor-pop) { z-index: 9600 !important; }
body.s3d-aberta .painel-chat { z-index: 9500; top: 0; }
/* avisos, "sua vez" e dados: levados para dentro da tela 3D */
.s3d > .aviso { z-index: 40; top: calc(max(10px, env(safe-area-inset-top)) + 64px); max-width: calc(100% - 24px); }
.s3d > .sua-vez { z-index: 39; }
.s3d > .painel-dados { z-index: 41; left: max(12px, env(safe-area-inset-left)); bottom: calc(max(12px, env(safe-area-inset-bottom)) + 74px); max-height: calc(100% - 160px); overflow-y: auto; }
/* mira da câmera de jogo / mouse travado */
.s3d-mira { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: rgba(255,255,255,.85); box-shadow: 0 0 0 2px rgba(0,0,0,.45); pointer-events: none; display: none; z-index: 2; }
.s3d.s3d-travado .s3d-mira { display: block; }
.s3d.s3d-travado .s3d-palco canvas { cursor: none; }
.s3d.s3d-jogo .s3d-palco canvas { cursor: crosshair; }
/* gaveta: o painel do site (Mestre, auxiliar ou jogador) dentro do 3D */
.s3d-gaveta {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(430px, 100%); z-index: 30; display: flex; flex-direction: column;
  background: rgba(12,10,18,.97); border-left: 1px solid var(--roxo); box-shadow: -10px 0 40px rgba(0,0,0,.6);
  padding-top: env(safe-area-inset-top); padding-right: env(safe-area-inset-right);
}
.s3d-gaveta[hidden] { display: none; }
.s3d-gaveta > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--linha); }
.s3d-gaveta > header b { font: 700 15px var(--display); letter-spacing: .04em; }
.s3d-gav-corpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: env(safe-area-inset-bottom); }
.s3d-gaveta .painel { position: static !important; display: block !important; transform: none !important; width: auto !important; height: auto !important;
  max-height: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; z-index: auto !important;
  visibility: visible !important; opacity: 1 !important; transition: none !important; pointer-events: auto !important; }
.s3d-gaveta .painel .fechar-painel, .s3d-gaveta .painel .painel-alca { display: none !important; }
.s3d-gaveta .cartao { position: static !important; width: auto !important; max-height: none !important; margin: 10px 12px 0; }
.s3d-gaveta .cartao[hidden] { display: none !important; }
.s3d.s3d-com-gaveta .s3d-db, .s3d.s3d-com-gaveta .s3d-painel, .s3d.s3d-com-gaveta .s3d-opcoes { right: min(442px, 100%); }
/* menu do jogo */
.s3d-menu { position: absolute; inset: 0; z-index: 35; display: grid; place-items: center; padding: 16px; background: rgba(4,3,7,.6); backdrop-filter: blur(3px); }
.s3d-menu[hidden] { display: none; }
.s3d-menu-caixa { width: min(560px, 100%); max-height: calc(100% - 24px); overflow-y: auto; border-radius: 14px; background: #120f1a; border: 1px solid var(--roxo); box-shadow: 0 20px 60px rgba(0,0,0,.7); }
.s3d-menu-caixa > header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--linha); }
.s3d-menu-caixa > header b { font: 700 16px var(--display); letter-spacing: .05em; }
.s3d-menu-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; padding: 12px; }
.s3d-menu-grade button { display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 86px; padding: 8px 6px; border-radius: 10px; border: 1px solid var(--linha); background: rgba(255,255,255,.03); color: var(--texto); cursor: pointer; font: 600 12px/1.25 var(--mono); text-align: center; }
.s3d-menu-grade button:hover, .s3d-menu-grade button:focus-visible { border-color: var(--roxo); background: var(--roxo-escuro); }
.s3d-menu-grade button i { font-style: normal; font-size: 24px; line-height: 1; }
.s3d-menu-grade button small { font: 10px var(--mono); color: var(--texto-dim); }
.s3d-bt-menu { border-color: var(--roxo); }
@media (max-width: 700px) {
  .s3d-gaveta { top: auto; left: 0; width: 100%; height: min(82%, calc(100% - 60px)); border-left: 0; border-top: 1px solid var(--roxo); border-radius: 14px 14px 0 0; }
  .s3d.s3d-com-gaveta .s3d-db, .s3d.s3d-com-gaveta .s3d-painel, .s3d.s3d-com-gaveta .s3d-opcoes { right: max(10px, env(safe-area-inset-right)); }
  .s3d.s3d-com-gaveta .s3d-barra, .s3d.s3d-com-gaveta .s3d-joy, .s3d.s3d-com-gaveta .s3d-prompt { display: none; }
}
@media (max-width: 420px) {
  .s3d-topo-bts { gap: 4px; }
  .s3d-topo-bts .s3d-x { width: 38px; height: 38px; font-size: 16px; }
  .s3d-menu { padding: 8px; align-items: end; }
  .s3d-menu-grade { grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px; }
  .s3d-menu-grade button { min-height: 76px; font-size: 11px; }
}

/* ===== 3D: entrar direto, saída do andar, chat com balões, metros, dados 3D ===== */
.camera button.cam-3d { font: 800 12px var(--mono); letter-spacing: .02em; color: #fff; background: linear-gradient(160deg, #6d3ff0, #3a1f86); border-color: #b49bff; box-shadow: 0 0 12px rgba(124,77,255,.45); }
body.hud-limpo .camera button.cam-3d { background: linear-gradient(160deg, #6d3ff0, #3a1f86); border-color: #b49bff; font-size: 12px; }
body.s3d-aberta .alertas-mestre { z-index: 9550; }
.s3d-metros { position: absolute; right: max(12px, env(safe-area-inset-right)); top: calc(max(10px, env(safe-area-inset-top)) + 196px); display: flex; align-items: center; gap: 4px; padding: 3px 4px 3px 9px; border-radius: 16px; background: rgba(12,10,16,.82); border: 1px solid var(--linha); font: 600 11px var(--mono); color: #e8e2f4; z-index: 2; max-width: 150px; }
.s3d-metros[hidden] { display: none; }
.s3d-metros span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s3d-metros button { width: 26px; height: 26px; min-width: 26px; border-radius: 50%; border: 1px solid var(--linha); background: rgba(255,255,255,.06); color: #cbb8ff; font-size: 13px; cursor: pointer; padding: 0; }
.s3d-legenda { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(max(12px, env(safe-area-inset-bottom)) + 128px); max-width: min(640px, calc(100% - 32px)); padding: 9px 14px; border-radius: 10px; background: rgba(6,4,10,.86); border: 1px solid rgba(196,168,255,.35); color: #f2ecfa; font: 15px/1.4 var(--serif, Georgia, serif); text-align: center; z-index: 4; pointer-events: none; }
.s3d-legenda[hidden] { display: none; }
.s3d-legenda b { color: #c4a8ff; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; }
.s3d-balao { position: absolute; left: 0; top: 0; z-index: 3; max-width: min(260px, 70vw); padding: 7px 11px 8px; border-radius: 12px; background: rgba(250,248,255,.95); color: #17121f; font: 13px/1.35 var(--serif, Georgia, serif); box-shadow: 0 6px 18px rgba(0,0,0,.45); pointer-events: none; transition: opacity .5s; will-change: transform; }
.s3d-balao::after { content: ''; position: absolute; left: 50%; bottom: -7px; margin-left: -7px; border: 7px solid transparent; border-bottom: 0; border-top-color: rgba(250,248,255,.95); }
.s3d-balao b { display: block; font: 700 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #5b3fb0; margin-bottom: 2px; }
.s3d-balao span { display: block; overflow-wrap: anywhere; }
.s3d-balao.cifrado { background: rgba(18,30,22,.95); color: #8dffb0; font-family: var(--mono); }
.s3d-balao.cifrado.gr { background: rgba(38,14,12,.95); color: #ffb08a; }
.s3d-balao.cifrado::after { border-top-color: rgba(18,30,22,.95); } .s3d-balao.cifrado.gr::after { border-top-color: rgba(38,14,12,.95); }
.s3d-balao.cifrado b { color: inherit; opacity: .75; }
.s3d-balao.dado { background: rgba(40,28,70,.95); color: #f2ecfa; font-family: var(--mono); font-size: 12px; } .s3d-balao.dado::after { border-top-color: rgba(40,28,70,.95); } .s3d-balao.dado b { color: #c4a8ff; }
.s3d-balao.falando b::after { content: ' 🔊'; }
.s3d-balao.sumindo { opacity: 0; }
.s3d-elev { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(340px, calc(100% - 32px)); max-height: calc(100% - 140px); overflow-y: auto; padding: 14px 16px; border-radius: 14px; background: rgba(14,10,22,.96); border: 1px solid #8a6cff; color: #eee8f8; z-index: 8; display: grid; gap: 8px; box-shadow: 0 12px 40px rgba(0,0,0,.6); }
.s3d-elev[hidden] { display: none; }
.s3d-elev > b { font: 700 14px var(--mono); }
.s3d-elev .mini { margin: 0; font-size: 12px; color: var(--texto-dim); }
.s3d-elev-lista { display: grid; gap: 4px; }
.s3d-elev-dest { display: flex; align-items: center; gap: 8px; font: 13px var(--mono); }
.s3d-elev select, .s3d-voz select { min-height: 40px; padding: 4px 8px; border-radius: 8px; background: #1a1424; color: #eee; border: 1px solid var(--linha); font: 13px var(--mono); }
.s3d-voz { display: flex; gap: 6px; align-items: center; margin: 4px 0 8px; }
.s3d-voz select { flex: 1; min-width: 0; }
.s3d-voz button { width: 40px; height: 40px; border-radius: 8px; border: 1px solid #8a6cff; background: #2a1f48; color: #fff; cursor: pointer; }
.dados3d { position: fixed; left: 50%; top: calc(max(10px, env(safe-area-inset-top)) + 64px); transform: translateX(-50%); z-index: 9700; padding: 8px 8px 6px; border-radius: 16px; background: rgba(10,7,16,.88); border: 1px solid rgba(180,155,255,.45); box-shadow: 0 10px 32px rgba(0,0,0,.6); cursor: pointer; display: grid; justify-items: center; gap: 4px; }
.dados3d[hidden] { display: none; }
#s3d > .dados3d { position: absolute; }
.d3-palco { width: 214px; height: 214px; border-radius: 10px; overflow: hidden; }
.d3-palco canvas { display: block; width: 100% !important; height: 100% !important; }
.d3-res { margin: 0; min-height: 18px; font: 700 14px var(--mono); color: #f2ecfa; text-align: center; max-width: 214px; }
.dados3d.d3-fim .d3-res { color: #ffd34a; }
@media (max-width: 560px) { .d3-palco { width: 168px; height: 168px; } .d3-res { max-width: 168px; font-size: 13px; } .s3d-metros { top: calc(max(10px, env(safe-area-inset-top)) + 170px); max-width: 128px; font-size: 10px; } .s3d-legenda { font-size: 14px; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 140px); } .s3d-balao { font-size: 12px; max-width: 62vw; } }
.s3d-balao .s3d-trad { display: block; margin-top: 4px; padding-top: 4px; border-top: 1px dashed currentColor; font: italic 12px/1.3 var(--serif, Georgia, serif); color: #f2ecfa; opacity: .95; }
.s3d-balao .s3d-trad.nao { font: 10px/1.3 var(--mono); opacity: .6; color: inherit; }
/* opções do 3D como num jogo: abas, faixas e teclas */
.s3d-opcoes { width: min(380px, calc(100% - 20px)); max-height: calc(100% - 140px); gap: 10px; }
.s3d-op-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.s3d-op-cab b { font: 700 14px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--roxo-claro); }
.s3d-op-abas { display: flex; flex-wrap: wrap; gap: 4px; position: sticky; top: -12px; z-index: 1; background: rgba(15,12,22,.98); padding: 4px 0 6px; }
.s3d-op-abas button { flex: 1 1 auto; min-height: 36px; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--linha); background: transparent; color: var(--texto); font: 12px var(--mono); cursor: pointer; }
.s3d-op-abas button.on { background: var(--roxo-escuro); border-color: var(--roxo); color: #fff; }
.s3d-opcoes section { display: grid; gap: 8px; padding-bottom: 10px; border-bottom: 1px dashed var(--linha); }
.s3d-opcoes h4 { margin: 0; font: 700 12px var(--mono); color: var(--roxo-claro); letter-spacing: .06em; }
.s3d-lin { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; font: 12.5px/1.3 var(--mono); color: var(--texto); }
.s3d-lin select { min-height: 34px; max-width: 170px; background: #0b0910; color: var(--texto); border: 1px solid var(--linha); border-radius: 8px; font: 12px var(--mono); padding: 3px 6px; }
.s3d-faixa { grid-template-columns: 1fr; gap: 4px; }
.s3d-faixa output { color: var(--roxo-claro); margin-left: 4px; }
.s3d-faixa input[type=range] { width: 100%; accent-color: var(--roxo); min-height: 28px; }
.s3d-teclas { display: grid; gap: 4px; }
.s3d-tecla { display: grid; grid-template-columns: 1fr minmax(84px, auto); align-items: center; gap: 8px; font: 12px var(--mono); }
.s3d-tecla button { min-height: 32px; padding: 3px 10px; border-radius: 7px; border: 1px solid var(--linha); border-bottom-width: 3px; background: #1a1524; color: #fff; font: 700 12px var(--mono); cursor: pointer; }
.s3d-tecla button.mudada { border-color: var(--roxo); }
.s3d-tecla button.esperando { background: var(--roxo-escuro); animation: s3dPisca .8s infinite; }
@keyframes s3dPisca { 50% { opacity: .5; } }
.s3d-fps { position: absolute; left: max(10px, env(safe-area-inset-left)); bottom: calc(max(12px, env(safe-area-inset-bottom)) + 72px); z-index: 4; font: 11px var(--mono); color: #8dffb0; background: rgba(0,0,0,.55); padding: 2px 6px; border-radius: 5px; pointer-events: none; }
.s3d-fps[hidden] { display: none; }
/* HUD de desempenho (Opções › Gráficos › Mostrar desempenho): fps e ms numa linha, chamadas, triângulos e degrau na
   outra; no topo esquerdo, logo abaixo do nome da sala (canto livre em 360, 412 e 1280: os botões e o decibelímetro
   ficam à direita, os botões de ação embaixo). A dica de atalhos desce para dar lugar. */
.s3d-fps { left: max(12px, env(safe-area-inset-left)); bottom: auto; top: calc(max(10px, env(safe-area-inset-top)) + 54px); max-width: calc(100% - 140px); white-space: pre-line; line-height: 1.35; letter-spacing: .01em; }
@media (max-width: 440px) { .s3d-fps { top: calc(max(10px, env(safe-area-inset-top)) + 78px); } }
@media (max-width: 440px) { .s3d:has(#s3dBtPainel:not([hidden])) .s3d-fps { top: calc(max(10px, env(safe-area-inset-top)) + 96px); } }
.s3d:has(#s3dFps:not([hidden])) .s3d-dica { margin-top: 38px; }
@media (max-width: 380px) { .s3d:has(#s3dFps:not([hidden])) .s3d-dica { margin-top: 56px; } }
.s3d.s3d-leve .s3d-fps { color: #ffd98d; }
/* interface escondida (H): só o mundo, a mira e os balões */
.s3d.s3d-sem-hud .s3d-topo, .s3d.s3d-sem-hud .s3d-barra, .s3d.s3d-sem-hud .s3d-dica, .s3d.s3d-sem-hud .s3d-db, .s3d.s3d-sem-hud .s3d-metros, .s3d.s3d-sem-hud .s3d-hab, .s3d.s3d-sem-hud .s3d-joy { display: none !important; }
/* efeitos no mapa 2D, em cima do token */
.fx2d { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, 0); white-space: nowrap; pointer-events: none; z-index: 30; font: 700 12px/1 var(--mono); padding: 3px 7px; border-radius: 6px; background: rgba(8,6,12,.85); color: #fff; animation: fx2dSobe 2.6s ease-out forwards; }
.fx2d::before { content: ''; position: absolute; left: 50%; top: 100%; width: 70px; height: 70px; margin: 0 0 0 -35px; border-radius: 50%; border: 3px solid currentColor; opacity: 0; animation: fx2dAnel 1.2s ease-out; transform: translateY(-20px); }
.fx2d-dano { color: #ff4a4a; } .fx2d-san { color: #c08aff; } .fx2d-cura { color: #6aff9a; } .fx2d-hab { color: #8ad8ff; } .fx2d-atk { color: #ff7a5a; } .fx2d-ritual { color: #d8b4ff; }
@keyframes fx2dSobe { 0% { opacity: 0; transform: translate(-50%, 8px) scale(.7); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1.08); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -26px); } }
@keyframes fx2dAnel { 0% { opacity: .9; transform: translateY(-20px) scale(.2); } 100% { opacity: 0; transform: translateY(-20px) scale(1.4); } }
/* efeito de tela no 3D quando é o SEU personagem */
.s3d-fx { position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: 0; }
.s3d-fx.dano { background: radial-gradient(ellipse at center, transparent 35%, rgba(170,0,0,.7) 100%); animation: s3dFxTela .9s ease-out; }
.s3d-fx.san { background: radial-gradient(ellipse at center, transparent 30%, rgba(70,0,110,.75) 100%); animation: s3dFxTela 2.2s ease-in-out; }
.s3d-fx.ritual { background: radial-gradient(ellipse at center, rgba(200,150,255,.18), transparent 70%); animation: s3dFxTela 1.6s ease-out; }
.s3d-fx.cura { background: radial-gradient(ellipse at center, transparent 40%, rgba(40,200,110,.35) 100%); animation: s3dFxTela 1.2s ease-out; }
@keyframes s3dFxTela { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
/* habilidades do Filho no Controle */
.s3d-hab { position: absolute; left: max(10px, env(safe-area-inset-left)); bottom: calc(max(12px, env(safe-area-inset-bottom)) + 74px); z-index: 4; width: min(330px, calc(100% - 20px)); max-height: min(52vh, 420px); overflow: auto; display: grid; gap: 8px; padding: 10px; border-radius: 12px; background: rgba(14,6,10,.9); border: 1px solid #7a1a2a; box-shadow: 0 8px 26px rgba(0,0,0,.55); color: var(--texto); }
.s3d-hab[hidden] { display: none; }
.s3d-hab header { display: flex; align-items: center; gap: 8px; }
.s3d-hab header b { font: 700 13px var(--mono); letter-spacing: .04em; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s3d-hab header small { font: 700 9px var(--mono); letter-spacing: .14em; color: #ff6a7a; border: 1px solid #ff6a7a; border-radius: 4px; padding: 2px 4px; }
.s3d-hab header button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--linha); background: transparent; color: var(--texto); cursor: pointer; }
.s3d-hab-cor { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.s3d-hab.recolhido { width: auto; max-width: min(330px, calc(100% - 20px)); }
.s3d-hab-vit { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font: 11px var(--mono); color: #e8d6da; }
.s3d-hab-vit i { flex: 1 1 80px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #d01830 var(--p), rgba(255,255,255,.12) var(--p)); }
.s3d-hab-lista { display: grid; gap: 5px; }
.s3d-hab-lista button { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "k n" "k d"; align-items: center; gap: 1px 8px; text-align: left; min-height: 40px; padding: 5px 8px; border-radius: 8px; border: 1px solid #4a1a24; background: rgba(60,10,20,.55); color: #fff; cursor: pointer; font: 12px var(--mono); }
.s3d-hab-lista button:hover, .s3d-hab-lista button:focus-visible { border-color: #ff4d6d; background: rgba(110,16,34,.7); }
.s3d-hab-lista kbd { grid-area: k; min-width: 22px; text-align: center; padding: 3px 5px; border-radius: 5px; border: 1px solid #ff8a9a; border-bottom-width: 3px; font: 700 11px var(--mono); color: #ffd0d6; }
.s3d-hab-lista span { grid-area: n; font-weight: 700; }
.s3d-hab-lista small { grid-area: d; color: #c9a8b0; font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s3d-hab-lista button:not(:has(kbd)) { grid-template-areas: "n" "d"; grid-template-columns: 1fr; }
.cartao .btn-controle { border-color: #ff4d6d; }
@media (pointer: coarse), (max-width: 560px) { .s3d-hab { max-height: 32vh; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 200px); width: min(300px, calc(100% - 20px)); } }
/* Presença (espectro): translúcida, flutuando, com brilho frio */
.ficha.espectro .ficha-cabeca { background: radial-gradient(circle at 50% 40%, rgba(230,240,255,.95), rgba(150,180,230,.55) 60%, rgba(60,80,120,.2)); border: 2px dotted rgba(220,235,255,.9); box-shadow: 0 0 14px 3px rgba(170,200,255,.55); animation: espectroFlutua 3.2s ease-in-out infinite; }
.ficha.espectro { opacity: .82; }
.ficha.espectro .ficha-sombra { opacity: .25; }
@keyframes espectroFlutua { 50% { transform: translateY(-4px); filter: brightness(1.25); } }
.tray .pinta.espectro { border: 2px dotted #e6efff; border-radius: 50%; box-shadow: 0 0 8px var(--cor); background: radial-gradient(circle, #f2f6ff, var(--cor)); }
.cartao select[data-acao="vis"] { display: block; margin-top: 4px; min-height: 34px; width: 100%; background: #0b0910; color: var(--texto); border: 1px solid var(--linha); border-radius: 8px; font: 13px var(--mono); }
@media (prefers-reduced-motion: reduce) { .ficha.espectro .ficha-cabeca { animation: none; } }
/* mochila (inventário da ficha ativa), no mapa e por cima do 3D */
.mochila { position: fixed; inset: 0; z-index: 9600; display: grid; place-items: center; padding: max(10px, env(safe-area-inset-top)) 10px; background: rgba(4,3,8,.72); backdrop-filter: blur(3px); }
.mochila[hidden] { display: none; }
.mo-caixa { width: min(860px, 100%); max-height: min(92vh, 760px); display: grid; grid-template-rows: auto auto auto auto 1fr auto; gap: 10px; padding: 14px; border-radius: 14px; background: linear-gradient(180deg, #17121f, #0e0b14); border: 1px solid var(--roxo); box-shadow: 0 20px 60px rgba(0,0,0,.6); color: var(--texto); overflow: hidden; }
.mo-caixa header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mo-caixa header b { font: 700 15px var(--mono); letter-spacing: .06em; color: var(--roxo-claro); }
.mo-caixa header button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--linha); background: transparent; color: var(--texto); cursor: pointer; }
.mo-carga { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 10px; font: 12px var(--mono); }
.mo-carga i { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--roxo) var(--p), rgba(255,255,255,.1) var(--p)); }
.mo-carga.sobre i { background: linear-gradient(90deg, #d01830 var(--p), rgba(255,255,255,.1) var(--p)); }
.mo-carga em { grid-column: 1 / -1; color: #ff8a8a; font-style: normal; }
.mo-lims { display: flex; flex-wrap: wrap; gap: 6px; font: 11px var(--mono); }
.mo-lims span { padding: 2px 8px; border-radius: 10px; border: 1px solid var(--linha); }
.mo-lims span.estoura { border-color: #ff4d6d; color: #ff8a9a; }
.mo-filtros { display: flex; flex-wrap: wrap; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.mo-filtros button { flex: 0 0 auto; min-height: 34px; padding: 4px 12px; border-radius: 17px; border: 1px solid var(--linha); background: transparent; color: var(--texto); font: 12px var(--mono); cursor: pointer; }
.mo-filtros button.on { background: var(--roxo-escuro); border-color: var(--roxo); color: #fff; }
.mo-corpo { display: grid; grid-template-columns: 1fr minmax(220px, 300px); gap: 12px; min-height: 0; }
.mo-grade { list-style: none; margin: 0; padding: 0 2px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; overflow: auto; align-content: start; }
.mo-grade button { position: relative; width: 100%; min-height: 96px; display: grid; justify-items: center; align-content: center; gap: 4px; padding: 8px 6px; border-radius: 10px; border: 1px solid #2c2440; background: radial-gradient(circle at 50% 30%, #241c33, #120e19); color: var(--texto); cursor: pointer; font: 11px/1.2 var(--mono); text-align: center; }
.mo-grade button i { font-style: normal; font-size: 26px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.mo-grade button span { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; font-size: 10.5px; letter-spacing: -.02em; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.mo-grade button { padding-left: 4px; padding-right: 4px; }
.mo-grade button b { position: absolute; right: 6px; top: 4px; font: 700 11px var(--mono); color: #ffd56a; }
.mo-grade button small { position: absolute; left: 6px; top: 4px; color: var(--roxo-claro); }
.mo-grade button.on { border-color: var(--roxo); box-shadow: 0 0 0 1px var(--roxo), 0 0 14px rgba(139,92,246,.35); }
.mo-grade button.achado::after { content: 'achado'; position: absolute; bottom: 4px; right: 6px; font-size: 9px; color: #9fe6b4; }
.mo-det { display: grid; align-content: start; gap: 8px; padding: 10px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--linha); overflow: auto; }
.mo-det h4 { margin: 0; font: 700 15px var(--serif, Georgia, serif); }
.mo-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
.mo-tags span { font: 10.5px var(--mono); padding: 2px 6px; border-radius: 6px; background: #241c33; }
.mo-desc { margin: 0; font: 13px/1.45 var(--serif, Georgia, serif); color: #ddd5ea; }
.mo-acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.mo-acoes button { min-height: 38px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--linha); background: transparent; color: var(--texto); font: 12px var(--mono); cursor: pointer; }
.mo-acoes button.pri { background: var(--roxo); border-color: var(--roxo); color: #fff; }
.mo-vazio { color: var(--texto-fraco, #a99fbd); font: 13px var(--mono); padding: 10px; }
.mo-dica { margin: 0; font: 10.5px var(--mono); color: #8a809e; text-align: right; }
@media (max-width: 620px) {
  .mo-caixa { max-height: 94vh; padding: 12px; }
  .mo-corpo { grid-template-columns: 1fr; grid-template-rows: minmax(140px, 1fr) auto; }
  .mo-grade { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
  .mo-grade button { min-height: 84px; }
  .mo-det { max-height: 38vh; }
  .mo-dica { display: none; }
}
/* narrador do Mestre: entradas nas salas com o texto para ler, "Na mesa", notas e exposição */
.narrador { position: fixed; right: max(10px, env(safe-area-inset-right)); top: calc(max(10px, env(safe-area-inset-top)) + 60px); z-index: 9560; width: min(400px, calc(100% - 20px)); max-height: min(70vh, 640px); display: grid; grid-template-rows: auto 1fr; border-radius: 12px; background: rgba(16,12,22,.97); border: 1px solid #b88a2a; box-shadow: 0 14px 40px rgba(0,0,0,.6); color: var(--texto); overflow: hidden; }
.narrador[hidden] { display: none; }
.narrador header { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--linha); }
.narrador header b { flex: 1; font: 700 13px var(--mono); letter-spacing: .08em; color: #e8c46a; }
.narrador header button { min-height: 30px; padding: 2px 10px; border-radius: 8px; border: 1px solid var(--linha); background: transparent; color: var(--texto); font: 11px var(--mono); cursor: pointer; }
.narrador header button.on { border-color: #b88a2a; color: #e8c46a; }
.narrador header [data-na="x"] { width: 32px; padding: 0; border-radius: 50%; }
.na-lista { overflow: auto; padding: 8px 10px; display: grid; gap: 10px; align-content: start; }
.na-ev { display: grid; gap: 6px; padding: 10px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid #2c2440; }
.na-ev.novo { border-color: #b88a2a; box-shadow: 0 0 0 1px rgba(184,138,42,.35); }
.na-ev h4 { margin: 0; font: 600 13px/1.35 var(--mono); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.na-ev h4 small { margin-left: auto; color: #8a809e; font-weight: 400; }
.na-sala { border: 0; background: none; padding: 0; color: #c4a8ff; font: inherit; text-decoration: underline dotted; cursor: pointer; text-align: left; }
.na-1a { font: 700 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #1a1406; background: #e8c46a; border-radius: 4px; padding: 1px 5px; }
.na-ev p { margin: 0; font: 13px/1.5 var(--serif, Georgia, serif); }
.na-ev p b { display: block; font: 700 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 2px; }
.na-ler { padding-left: 8px; border-left: 3px solid #c4a8ff; font-style: italic; color: #eee6fa; }
.na-ler b { color: #c4a8ff; font-style: normal; }
.na-mesa { padding-left: 8px; border-left: 3px solid #b88a2a; color: #e7dcc4; }
.na-mesa b { color: #e8c46a; }
.na-nota b { color: #9fe6b4; } .na-expo b { color: #ff8a9a; }
.na-mini { font: 11.5px var(--mono) !important; color: #a99fbd; }
.na-bts { display: flex; flex-wrap: wrap; gap: 6px; }
.na-bts button { min-height: 34px; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--linha); background: transparent; color: var(--texto); font: 12px var(--mono); cursor: pointer; }
@media (max-width: 560px) { .narrador { top: auto; bottom: calc(max(10px, env(safe-area-inset-bottom)) + 70px); max-height: 52vh; } }
.s3d-item-m { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.s3d-item-m input { min-height: 36px; min-width: 0; background: #0b0910; color: var(--texto); border: 1px solid var(--linha); border-radius: 8px; font: 13px var(--mono); padding: 4px 8px; }
.s3d-item-m button { min-height: 36px; padding: 4px 12px; border-radius: 8px; border: 1px solid var(--roxo); background: var(--roxo-escuro); color: #fff; font: 12px var(--mono); cursor: pointer; }
.s3d-itm-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font: 12px var(--mono); }
.s3d-itm-lista li { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.s3d-itm-lista button { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--linha); background: transparent; color: var(--texto); cursor: pointer; }
.na-info { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.03); font: 12px/1.4 var(--mono); color: #d8cfe8; }
.na-info.alerta { border: 1px solid #ff4d6d; color: #ffb3c0; }
.na-info small { margin-left: auto; color: #8a809e; }

/* ===== 3D: interações (ler um aviso) e telão com vídeo ===== */
.s3d-ler { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(5, 4, 8, .55); padding: 16px; }
.s3d-ler-cx { max-width: min(520px, 100%); max-height: 80vh; overflow: auto; background: #efe9da; color: #1d1a14; border: 1px solid #b9ad8e; border-radius: 4px; padding: 18px 20px; box-shadow: 0 18px 50px rgba(0, 0, 0, .6); font-family: 'Courier New', monospace; }
.s3d-ler-tit { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 10px; border-bottom: 1px solid #b9ad8e; padding-bottom: 8px; }
.s3d-ler-txt { margin: 0 0 14px; line-height: 1.5; white-space: normal; }
.s3d-ler-cx button { background: #1d1a14; color: #efe9da; border: 0; padding: 8px 16px; border-radius: 3px; cursor: pointer; font: inherit; }
.s3d-video { position: absolute; left: 0; top: 0; width: 640px; height: 360px; transform-origin: 0 0; pointer-events: none; z-index: 1; overflow: hidden; background: #000; }
.s3d-video iframe { width: 640px; height: 360px; border: 0; display: block; pointer-events: none; }

/* =========================================================
   Características dos Filhos (filhos.js)
   ========================================================= */
/* janelas: escolher, texto, testes e mensagens privadas */
.fil-modal { position: fixed; inset: 0; z-index: 9700; display: grid; place-items: center; padding: 16px; background: rgba(4,2,6,.74); backdrop-filter: blur(3px); }
.fil-caixa { position: relative; width: min(440px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: var(--painel); border: 1px solid var(--roxo-escuro); border-radius: 12px; padding: 18px 16px 16px; box-shadow: 0 18px 50px rgba(0,0,0,.6); }
.fil-caixa h3 { margin: 0 32px 10px 0; font: 700 17px var(--display); letter-spacing: .04em; }
.fil-x { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; background: transparent; border: 0; font-size: 26px; color: var(--texto-dim); }
.fil-k { margin: 0 32px 6px 0; font: 12px var(--mono); letter-spacing: .18em; color: var(--roxo-claro); }
.fil-opcoes { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.fil-opcoes button { text-align: left; background: #0b0910; border: 1px solid var(--linha); border-radius: 8px; padding: 10px 12px; min-height: 44px; overflow-wrap: anywhere; }
.fil-opcoes button small { display: block; color: var(--texto-dim); font-size: 12px; margin-top: 2px; }
.fil-opcoes button.pri { background: var(--roxo); border-color: var(--roxo); color: #fff; text-align: center; }
.fil-opcoes button:disabled { opacity: .5; }
.fil-campo { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--texto-dim); margin: 6px 0; }
.fil-campo input, .fil-campo textarea { background: #0b0910; border: 1px solid var(--linha); color: var(--texto); border-radius: 6px; padding: 8px; font: 15px var(--corpo); width: 100%; }
.fil-msg { font-style: italic; color: #f2d4ff; border-left: 3px solid var(--roxo); padding-left: 10px; }
.fil-voz { font: italic 18px/1.5 var(--corpo); color: #f6e9ff; text-shadow: 0 0 12px rgba(196,168,255,.35); }

/* cartão do Filho (Mestre e auxiliares) */
.fil-cartao { margin: 8px 0; border: 1px solid var(--linha); border-radius: 8px; padding: 6px 10px; background: rgba(139,92,246,.05); }
.fil-cartao summary { cursor: pointer; font: 700 13px var(--display); letter-spacing: .06em; color: var(--roxo-claro); padding: 4px 0; }
.fil-resumo, .fil-estado { font-size: 13px; line-height: 1.45; margin: 6px 0; overflow-wrap: anywhere; }
.fil-estado { color: #ffd38a; }
.fil-enigma { font-size: 13px; color: #ff9bb0; border-top: 1px dashed var(--linha); padding-top: 6px; overflow-wrap: anywhere; }
.fil-btns, .s3d-fil-btns { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 6px; margin: 8px 0; }
.fil-btns button, .s3d-fil-btns button { background: #0b0910; border: 1px solid var(--roxo-escuro); border-radius: 8px; padding: 8px 6px; min-height: 44px; font-size: 13px; line-height: 1.2; text-align: center; }
.fil-btns button small, .s3d-fil-btns button small { display: block; font-size: 10px; color: var(--texto-dim); }
.fil-btns button.usado, .s3d-fil-btns button.usado { opacity: .45; }
.fil-btns button.on, .s3d-fil-btns button.on { border-color: #ffd38a; color: #ffd38a; }
[data-fil-foco].on { border-color: var(--ok) !important; color: var(--ok); }
.s3d-fil-t { margin: 8px 0 0; font: 11px var(--mono); letter-spacing: .14em; color: var(--roxo-claro); }
.s3d-fil-btns { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* tokens: piscar (jogadores), ocultação especial e sentido (Mestre e auxiliares), Detalhe da cópia */
.ficha.pisca-filho { animation: fil-pisca 3.4s steps(1, end) infinite; }
@keyframes fil-pisca { 0%, 18% { opacity: 1; } 19%, 31% { opacity: 0; } 32%, 55% { opacity: .55; } 56%, 63% { opacity: 0; } 64%, 100% { opacity: .9; } }
.ficha.oculta-especial { opacity: .5; }
.ficha.oculta-especial .ficha-cabeca { outline: 2px dotted #ffd38a; outline-offset: 2px; }
.ficha[data-sentido]:not([data-sentido=""]) .ficha-cabeca { box-shadow: 0 0 0 3px rgba(255,90,90,.85), 0 0 14px 4px rgba(255,60,60,.55); }
.ficha[data-sentido="faro"] .ficha-cabeca { box-shadow: 0 0 0 3px #ff2a2a, 0 0 18px 7px rgba(255,20,20,.7); }
.ficha.det-espelho .ficha-cabeca { transform: scaleX(-1); }
.cartao-topo img.espelhada { transform: scaleX(-1); }

/* marcas no mapa: rastros, raízes e sala alagada (todos que veem o lugar) */
.fil-marca { position: absolute; pointer-events: none; z-index: 1; border-radius: 4px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4px; }
.fil-marca span { font: 11px var(--mono); color: #e7f6ff; background: rgba(5,8,12,.7); border-radius: 4px; padding: 1px 5px; white-space: nowrap; }
.fil-molhado { background: repeating-radial-gradient(circle at 30% 60%, rgba(90,170,255,.16) 0 6px, transparent 6px 14px); box-shadow: inset 0 0 24px rgba(80,160,255,.25); }
.fil-lodo { background: radial-gradient(ellipse at 40% 55%, rgba(8,10,6,.75) 0 22%, transparent 40%), radial-gradient(ellipse at 70% 35%, rgba(12,14,8,.6) 0 14%, transparent 30%); }
.fil-raizes { background: repeating-linear-gradient(115deg, rgba(60,120,60,.22) 0 3px, transparent 3px 16px), repeating-linear-gradient(35deg, rgba(90,60,30,.2) 0 2px, transparent 2px 19px); }
.fil-alagada { background: linear-gradient(180deg, rgba(40,110,200,.12), rgba(40,110,200,.3)); box-shadow: inset 0 0 30px rgba(60,140,255,.35); }

/* sentidos do auxiliar */
.eco-zona.exata { filter: blur(1px); background: radial-gradient(circle, rgba(255,40,60,.32) 0%, rgba(255,40,60,.12) 30%, transparent 46%); }
.fil-sent { position: absolute; pointer-events: none; z-index: 2; }
.fil-faro { width: 150px; height: 150px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(220,0,20,.55), rgba(220,0,20,.15) 45%, transparent 70%); filter: blur(3px); animation: eco-bate 1.6s ease-in-out infinite; }
.fil-leit { translate: -50% -50%; }
.fil-leit span, .fil-covil span { font: 11px var(--mono); background: rgba(10,8,16,.85); border: 1px solid #ffd166; color: #ffd166; border-radius: 4px; padding: 1px 5px; white-space: nowrap; }
.fil-teia { background: repeating-linear-gradient(45deg, rgba(230,230,230,.28) 0 1px, transparent 1px 7px), repeating-linear-gradient(-45deg, rgba(230,230,230,.28) 0 1px, transparent 1px 7px); display: grid; place-items: center; }
.fil-raiz { box-shadow: inset 0 0 0 2px rgba(80,170,90,.6); background: rgba(60,140,60,.08); }
.fil-covil { box-shadow: inset 0 0 0 2px dashed rgba(255,209,102,.6); border: 2px dashed rgba(255,209,102,.55); display: flex; align-items: flex-start; justify-content: flex-end; padding: 3px; }
.escuta-aux li.fil-foco { color: var(--ok); }
.escuta-aux li.fil-teste button { margin-top: 4px; background: #0b0910; border: 1px solid var(--roxo-escuro); border-radius: 6px; padding: 6px 8px; min-height: 40px; }
.fil-foco-sel select { max-width: 100%; }

/* jogador: ações na sala, dia par, surdez, marcas */
.fil-jog-bloco { margin: 8px 0; grid-column: 1 / -1; width: 100%; }
.fil-acoes-jog { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fil-acoes-jog button { min-height: 44px; }
.fil-diapar { font: 12px var(--mono); color: var(--texto-dim); margin: 4px 0; opacity: .85; }
.fil-surdo, .fil-chat-surdo { font-size: 13px; color: #ffb3c1; background: rgba(255,77,109,.1); border: 1px solid rgba(255,77,109,.35); border-radius: 6px; padding: 6px 8px; margin: 4px 0; }
.chat-surdo #chatLista { filter: blur(3px); opacity: .45; pointer-events: none; }
.fil-marcas-sala { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.fil-marcas-sala span { font-size: 12px; background: rgba(80,160,255,.12); border: 1px solid rgba(80,160,255,.35); border-radius: 12px; padding: 2px 8px; }
.msg-desconfiar { background: transparent; border: 1px solid var(--linha); border-radius: 6px; padding: 0 6px; min-width: 32px; min-height: 28px; font-size: 13px; margin-left: 4px; }
.msg-mimica { color: #ffd38a; font-size: 11px; margin-left: 6px; }

/* etiquetas de sala e bloco do Mestre */
.fil-sala { margin: 6px 0; }
.fil-sala summary { cursor: pointer; font-size: 13px; color: var(--roxo-claro); }
.fil-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.fil-tags label, .fil-tags span { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; border: 1px solid var(--linha); border-radius: 14px; padding: 4px 9px; min-height: 32px; }
.fil-tags span.on { border-color: var(--roxo); }
.fil-bloco code { font-size: 11px; }
.fil-imp { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.fil-imp button { flex: 1 1 140px; }
.fil-ed h3 { font-size: 13px; margin: 14px 0 6px; color: var(--roxo-claro); }
.fil-ed select, .fil-bloco #filSelM { max-width: 100%; width: 100%; background: #0b0910; color: var(--texto); border: 1px solid var(--linha); border-radius: 6px; padding: 8px; font-size: 14px; }
.fil-chks { display: flex; flex-direction: column; gap: 4px; }
.fil-chks label { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.35; padding: 3px 0; }
.fil-chks input { margin-top: 2px; flex: none; width: 18px; height: 18px; }
.fil-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 8px; }
.fil-grade label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--texto-dim); min-width: 0; }
.fil-grade input, .fil-grade select, .fil-linha input { background: #0b0910; color: var(--texto); border: 1px solid var(--linha); border-radius: 6px; padding: 7px; font-size: 14px; min-width: 0; width: 100%; }
.fil-linha { display: flex; gap: 6px; align-items: center; min-width: 0; }
.fil-linha select { flex: 1 1 auto; min-width: 0; }
.fil-linha input[size] { flex: 0 0 72px; width: 72px; }
.fil-linha label { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--texto-dim); white-space: nowrap; }
.fil-linha label input { width: 64px; }

/* =========================================================
   MOMENTO (momento.js): encontro, cartas da vez, sustos, corpos, câmeras e o mapa que mente
   ========================================================= */
.mom-prop { position: fixed; left: 50%; top: calc(var(--topo-h, 56px) + 10px); transform: translateX(-50%); z-index: 9560; width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 90px); overflow-y: auto; padding: 14px 16px; border-radius: 12px;
  background: linear-gradient(160deg, #2a0d12, #120d19 70%); border: 1px solid #ff4b5c; color: #f3eedd; box-shadow: 0 0 40px rgba(255,40,60,.35), 0 18px 40px rgba(0,0,0,.6); animation: momEntra .35s ease-out; }
.mom-prop h3 { margin: 4px 0 6px; font: 600 16px/1.3 var(--corpo, sans-serif); }
.mom-k { margin: 0; font: 700 11px/1.2 var(--mono, monospace); letter-spacing: .14em; color: #ff8a96; }
.mom-k small { color: #c9b8e8; letter-spacing: 0; font-weight: 400; }
.mom-part { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.mom-part label { display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); font-size: 13px; cursor: pointer; }
.mom-part input { width: 18px; height: 18px; }
.mom-bts { display: flex; gap: 8px; flex-wrap: wrap; }
.mom-bts button { flex: 1 1 120px; min-height: 44px; border-radius: 8px; border: 1px solid #6a5a8a; background: #1d1628; color: #f3eedd; font: 600 14px var(--corpo, sans-serif); cursor: pointer; }
.mom-bts button.pri { background: #b3212f; border-color: #ff4b5c; }
.mom-bts button:disabled { opacity: .5; }
@keyframes momEntra { from { transform: translate(-50%, -14px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

/* encontro no 2D: clarão e vinheta */
.mom-veu { position: fixed; inset: 0; z-index: 9400; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 35%, rgba(0,0,0,.92) 100%); }
.mom-veu.on { animation: momVeu 2.4s ease-out forwards; }
@keyframes momVeu { 0% { opacity: 1; background-color: rgba(255,235,235,.55); } 8% { background-color: rgba(120,0,10,.25); } 70% { opacity: 1; background-color: rgba(0,0,0,0); } 100% { opacity: 0; } }
/* perseguição no 2D: quem espera a vez fica com as bordas escuras; no fim, some devagar (alívio) */
.mom-espera-veu { position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: 0; transition: opacity 3.2s ease; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(8,4,14,.6) 100%); }
body.mom-espera:not(.s3d-aberta) .mom-espera-veu { opacity: 1; transition-duration: .8s; }
@media (prefers-reduced-motion: reduce) { .mom-veu.on { animation-duration: .01s; } }

/* cartas de ação na vez do jogador */
.mom-cartas { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); transform: translateX(-50%); z-index: 2650; width: min(560px, calc(100vw - 16px)); padding: 6px; border-radius: 12px; background: rgba(12,9,18,.92); border: 1px solid #ffd23f; box-shadow: 0 0 22px rgba(255,210,63,.3); color: #f3eedd; }
.palco-area > .mom-cartas { position: absolute; bottom: 70px; width: min(560px, calc(100% - 110px)); }
.mom-cartas.no3d { position: absolute; z-index: 60; bottom: calc(env(safe-area-inset-bottom, 0px) + 70px); }
.mom-cartas-topo { display: flex; align-items: center; gap: 8px; padding: 0 2px 4px 6px; font: 600 11px var(--mono, monospace); letter-spacing: .08em; }
.mom-cartas-topo b { color: #ffd23f; }
.mom-cartas-topo span { flex: 1; color: #c9b8e8; letter-spacing: 0; }
.mom-cartas-topo button { min-width: 36px; min-height: 30px; border-radius: 6px; border: 1px solid #4a3d63; background: #1d1628; color: #f3eedd; cursor: pointer; }
.mom-cartas-fila { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.mom-carta { display: grid; justify-items: center; align-content: start; gap: 2px; min-height: 92px; padding: 7px 3px 6px; border-radius: 9px; border: 1px solid #5c4a82; background: linear-gradient(180deg, #241a35, #140f1e); color: #f3eedd; cursor: pointer; text-align: center; min-width: 0; transition: transform .15s, border-color .15s; }
.mom-carta:hover, .mom-carta:focus-visible { transform: translateY(-3px); border-color: #ffd23f; }
.mom-carta i { font-style: normal; font-size: 22px; line-height: 1; }
.mom-carta b { font: 700 12px/1.15 var(--corpo, sans-serif); }
.mom-carta span { font: 11px/1.15 var(--corpo, sans-serif); color: #d9ccef; overflow-wrap: anywhere; }
.mom-carta small { font: 600 10px/1.15 var(--mono, monospace); color: #ffd23f; overflow-wrap: anywhere; }
.mom-carta.off { opacity: .45; }
@media (max-width: 600px) {
  .palco-area > .mom-cartas { width: calc(100% - 128px); bottom: 74px; }
  .mom-cartas { padding: 5px 4px; }
  .mom-cartas-fila { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .mom-carta { min-height: 66px; padding: 5px 2px 4px; }
  .mom-carta i { font-size: 17px; }
  .mom-carta b { font-size: 11px; }
  .mom-carta span { font-size: 10px; overflow-wrap: normal; word-break: normal; }
  .mom-carta small { font-size: 9.5px; overflow-wrap: normal; }
  .mom-cartas.no3d { width: calc(100% - 16px); }
}
/* 3D em tela de toque: uma fileira só, acima do joystick e do aviso do E */
@media (max-width: 600px), (pointer: coarse) {
  .mom-cartas.no3d { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 214px); width: calc(100% - 16px); padding: 4px; }
  .mom-cartas.no3d .mom-cartas-topo { padding-bottom: 3px; }
  .mom-cartas.no3d .mom-cartas-fila { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
  .mom-cartas.no3d .mom-carta { min-height: 0; padding: 4px 1px; }
  .mom-cartas.no3d .mom-carta i { font-size: 15px; }
  .mom-cartas.no3d .mom-carta b { font-size: 10px; }
  .mom-cartas.no3d .mom-carta span, .mom-cartas.no3d .mom-carta small { font-size: 8.5px; overflow-wrap: anywhere; }
}

/* relógio da vez e bateria (3D) */
.mom-relogio { position: relative; padding: 5px 12px; border-radius: 999px; background: rgba(12,9,18,.82); border: 1px solid #6a5a8a; color: #e6dcf5; font: 600 12px var(--mono, monospace); pointer-events: none; white-space: nowrap; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; }
.mom-relogio.acabando { border-color: #ff4b5c; color: #ffb3bb; }
.s3d-barra [data-s3dv="lanterna"] { position: relative; }
.mom-bat { position: absolute; right: 2px; top: 1px; padding: 0 4px; border-radius: 6px; background: rgba(0,0,0,.6); color: #b6ffb0; font: 600 9px var(--mono, monospace); pointer-events: none; }
.mom-bat.fraca { color: #ff8a96; animation: momPisca 1s steps(2) infinite; }
@keyframes momPisca { 50% { opacity: .3; } }

/* nome sussurrado e sustos */
.mom-legenda { position: fixed; left: 50%; bottom: 28%; transform: translateX(-50%); z-index: 9450; pointer-events: none; font: italic 600 22px var(--corpo, serif); color: rgba(235,225,255,.0); text-shadow: 0 0 12px rgba(160,120,255,.0); letter-spacing: .3em; white-space: nowrap; }
#s3d > .mom-legenda { position: absolute; z-index: 45; }
.mom-legenda.on { animation: momSus 2.6s ease-in-out forwards; }
@keyframes momSus { 0% { color: rgba(235,225,255,0); letter-spacing: .6em; } 30% { color: rgba(235,225,255,.75); text-shadow: 0 0 12px rgba(160,120,255,.8); } 100% { color: rgba(235,225,255,0); letter-spacing: .2em; } }
.mom-rosto2d { position: fixed; top: 18%; z-index: 9450; pointer-events: none; width: min(220px, 46vw); padding: 10px; background: #0b0c10; border: 6px solid #2c2f36; box-shadow: inset 0 0 40px #000, 0 0 30px rgba(0,0,0,.8); animation: momRosto 2.1s ease-out forwards; }
.mom-rosto2d canvas { width: 100%; height: auto; display: block; filter: contrast(1.2); }
.mom-rosto2d.esq { left: 4%; } .mom-rosto2d.dir { right: 4%; }
@keyframes momRosto { 0% { opacity: 0; } 12% { opacity: 1; } 70% { opacity: 1; } 72% { opacity: 0; } 76% { opacity: .9; } 100% { opacity: 0; } }
.mom-figura2d { position: absolute; width: 0; height: 0; transform: translateZ(3px); transform-style: preserve-3d; pointer-events: none; }
.mom-fig-pino { position: absolute; left: -9px; bottom: 0; width: 18px; height: 54px; transform-origin: 50% 100%; transform: rotateZ(calc(var(--rot) * -1)) rotateX(calc(var(--tilt) * -1)); }
.mom-fig-pino i { position: absolute; inset: 10px 2px 0; border-radius: 9px 9px 3px 3px; background: #020203; box-shadow: 0 0 10px #000; }
.mom-fig-pino::before { content: ''; position: absolute; left: 4px; top: 0; width: 10px; height: 12px; border-radius: 50%; background: #020203; }
.mom-figura2d.some { opacity: 0; transition: opacity .6s; }

/* corpo no mapa 2D */
.mom-corpo2d { position: absolute; width: 0; height: 0; padding: 0; border: 0; background: none; transform: translateZ(2px); transform-style: preserve-3d; cursor: pointer; }
.mom-corpo-pino { position: absolute; left: -14px; bottom: -6px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, #3a0a0a, #120406); border: 2px solid #7a1a1a; color: #e8d6d6; font: 700 15px var(--corpo, serif); transform-origin: 50% 100%; transform: rotateZ(calc(var(--rot) * -1)) rotateX(calc(var(--tilt) * -1)); box-shadow: 0 0 10px rgba(120,0,0,.7); }

/* janela de examinar (corpo) */
.mom-modal { position: fixed; inset: 0; z-index: 9700; display: grid; place-items: center; padding: 16px; background: rgba(4,2,6,.74); backdrop-filter: blur(3px); }
.mom-caixa { width: min(420px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 16px; border-radius: 12px; background: #120d19; border: 1px solid #7a1a1a; border-top: 4px solid #7a1a1a; color: #f3eedd; }
.mom-caixa p { margin: 8px 0; font-size: 14px; line-height: 1.45; }
.mom-corpo-topo { display: flex; gap: 12px; align-items: center; margin: 6px 0; }
.mom-corpo-topo img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; filter: grayscale(1) brightness(.7); border: 2px solid #5a1414; }
.mom-corpo-topo h3 { margin: 0; } .mom-corpo-topo span { font: 12px var(--mono, monospace); color: #a99bc0; }

/* mapa que mente (só na tela do jogador) */
.corredor.mente-corr { opacity: .9; animation: menteVem .8s ease-out; }
.porta-chao.mente-porta { animation: menteVem .8s ease-out; }
@keyframes menteVem { from { opacity: 0; } to { opacity: 1; } }
.sala.mente-some { opacity: 0 !important; transition: opacity .9s ease; }
.sala.mente-some * { visibility: hidden; }

/* bloco do Mestre */
.mom-bloco .mom-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 8px 0; }
.mom-bloco .mom-grade label, .mom-bloco .mom-l, .mom-cam label { display: grid; gap: 3px; font-size: 12px; color: var(--texto-2, #c9b8e8); }
.mom-bloco input, .mom-bloco select { min-height: 36px; width: 100%; box-sizing: border-box; }
.mom-cam { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; align-items: end; margin: 8px 0; padding: 8px; border-radius: 8px; border: 1px solid var(--linha, #2b2140); }
.mom-cam > b { grid-column: 1 / -1; font: 600 12px var(--mono, monospace); }
.mom-det summary { cursor: pointer; padding: 6px 0; font-size: 13px; }
.mom-sustos { display: grid; grid-template-columns: 1fr; gap: 6px; }
/* mensagem que só este aparelho tem (nome sussurrado) */
#chatLista li.msg-local .msg-txt { color: #c9b8ff; letter-spacing: .2em; }

/* =========================================================
   FILHOS (rodada 3): painel do Mestre em lista compacta, editor à parte,
   etiquetas em grade, cartão e botões com ícones
   ========================================================= */
.fil-bloco { --fp-bg: #0d0a13; --fp-bg2: #15111d; --fp-borda: #2a2238; }
.fp-topo { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.fp-topo h2 { margin: 0 auto 0 0; }
.fp-ico { width: 40px; height: 40px; display: grid; place-items: center; background: var(--fp-bg); border: 1px solid var(--fp-borda); border-radius: 10px; font-size: 18px; color: var(--texto); padding: 0; }
.fp-ico:hover, .fp-ico[aria-expanded="true"] { border-color: var(--roxo); }
.fp-menu { position: relative; }
.fp-pop { position: absolute; right: 0; top: 46px; z-index: 5; width: 220px; display: grid; gap: 6px; padding: 8px; background: #17121f; border: 1px solid var(--roxo-escuro); border-radius: 12px; box-shadow: 0 14px 40px rgba(0,0,0,.6); }
.fp-pop button { min-height: 40px; text-align: left; background: var(--fp-bg); border: 1px solid var(--fp-borda); border-radius: 8px; padding: 6px 10px; font-size: 14px; }
.fp-pop p { margin: 2px 2px 0; font-size: 11.5px; color: var(--texto-dim); }
.fp-sub { margin: 0 0 10px; font: 11.5px var(--mono); color: var(--texto-dim); letter-spacing: .02em; }
.fp-filtro { display: grid; grid-template-columns: 1.6fr repeat(5, 1fr); gap: 4px; margin-bottom: 10px; }
.fp-filtro button { min-height: 40px; padding: 0 4px; background: var(--fp-bg); border: 1px solid var(--fp-borda); border-radius: 999px; font-size: 13px; color: var(--texto-dim); }
.fp-filtro button.on { background: var(--roxo-escuro); border-color: var(--roxo); color: #fff; }
.fp-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fp-item { width: 100%; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "cod nome el" "res res res"; align-items: center; column-gap: 8px; row-gap: 3px; text-align: left; min-height: 52px; padding: 7px 10px 7px 12px; position: relative; overflow: hidden;
  background: linear-gradient(90deg, color-mix(in srgb, var(--cor) 14%, transparent), transparent 40%), var(--fp-bg2); border: 1px solid var(--fp-borda); border-radius: 12px; color: var(--texto); transition: border-color .15s, transform .15s; }
.fp-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--cor); }
.fp-item:hover, .fp-item:focus-visible { border-color: var(--roxo); }
.fp-item:active { transform: scale(.99); }
.fp-item.sem { opacity: .72; }
.fp-cod { grid-area: cod; font: 12px var(--mono); color: var(--texto-dim); letter-spacing: .04em; }
.fp-nome { grid-area: nome; font: 600 15px var(--corpo); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-nome small { margin-left: 6px; font: 11px var(--mono); color: #ffd38a; }
.fp-el { grid-area: el; font-size: 16px; min-width: 20px; text-align: center; }
.fp-res { grid-area: res; display: flex; flex-wrap: wrap; gap: 3px 10px; font-size: 12px; color: var(--texto-dim); line-height: 1.3; min-width: 0; }
.fp-res span { white-space: nowrap; }
.fp-res i { font-style: normal; margin-right: 3px; }
.fp-res .fp-mais { color: var(--roxo-claro); }
.fp-vazio { font-style: italic; color: var(--texto-dim); font-size: 12px; }
.fp-nada { font-size: 13px; color: var(--texto-dim); padding: 8px; }

/* chips de resumo (cartão, editor, quadro do Controle) */
.fc-chips, .fc-resumo, .fc-estado { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.fc-resumo { margin: 6px 0 4px; }
.fc-estado { margin: 4px 0; }
.fc-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; font-size: 12px; line-height: 1.2; padding: 3px 8px; border-radius: 999px; background: #17121f; border: 1px solid var(--fp-borda, #2a2238); color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-chip i { font-style: normal; }
.fc-chip.fc-el { border-color: var(--el); color: var(--el); font-weight: 600; }
.fc-chip.fc-fuga { color: #9fe8c3; border-color: rgba(61,220,151,.4); }
.fc-chip.fc-st { color: #ffd38a; border-color: rgba(255,211,138,.35); }
.fc-chip.fc-mais { color: var(--roxo-claro); }

/* cartão do Filho (Mestre e auxiliares) */
.fil-cartao { padding: 6px 10px 8px; border-radius: 12px; }
.fil-cartao summary { display: flex; align-items: center; gap: 6px; min-height: 36px; }
.fil-cartao summary small { font: 11px var(--mono); color: var(--texto-dim); letter-spacing: 0; }
.fil-btns, .s3d-fil-btns { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 6px; }
.fil-btns button, .s3d-fil-btns button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 58px; padding: 6px 4px; border-radius: 12px; background: linear-gradient(180deg, #1a1426, #0e0b14); }
.fil-btns button i, .s3d-fil-btns button i { font-style: normal; font-size: 20px; line-height: 1; }
.fil-btns button span, .s3d-fil-btns button span { font-size: 12px; line-height: 1.15; overflow-wrap: anywhere; }
.fil-btns button:hover, .s3d-fil-btns button:hover { border-color: var(--roxo); }
.fc-acoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; margin-top: 6px; }
.fc-acoes button { min-height: 40px; font-size: 13px; background: #0b0910; border: 1px solid var(--linha); border-radius: 10px; padding: 6px 8px; }
.fc-acoes button.on { border-color: var(--ok); color: var(--ok); }
details.fil-enigma { border-top: 1px dashed var(--linha); padding-top: 6px; margin-top: 8px; }
details.fil-enigma summary { cursor: pointer; min-height: 36px; display: flex; align-items: center; color: #ff9bb0; }
details.fil-enigma p { margin: 4px 0 0; }

/* bloco do jogador: ícones */
.fil-acoes-jog { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.fil-acoes-jog.n3 { grid-template-columns: repeat(3, 1fr); }
.fil-acoes-jog.n4 { grid-template-columns: repeat(4, 1fr); }
.fil-jb { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; padding: 4px 2px; background: #0e0b14; border: 1px solid var(--linha); border-radius: 12px; color: var(--texto); }
.fil-jb i { font-style: normal; font-size: 19px; line-height: 1; }
.fil-jb span { font-size: 12px; }
.fil-jb.on { border-color: #ffd38a; color: #ffd38a; box-shadow: inset 0 0 0 1px rgba(255,211,138,.3); }
.fil-jb:disabled { opacity: .45; }
.fil-flash { position: fixed; inset: 0; z-index: 9800; pointer-events: none; background: #fff; animation: filFlash .9s ease-out forwards; }
@keyframes filFlash { 0% { opacity: .95; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fil-flash { animation-duration: .2s; } }

/* etiquetas no cartão da sala */
.fil-tags label { cursor: pointer; min-height: 36px; }
.fil-tags label input { position: absolute; opacity: 0; pointer-events: none; }
.fil-tags label.on { border-color: var(--roxo); background: rgba(139,92,246,.16); }
.fil-tags label:has(input:focus-visible) { outline: 2px solid var(--roxo-claro); }

/* tokens no mapa 2D */
.ficha.mini .ficha-cabeca { width: 22px; height: 22px; border-width: 2px; }
.ficha.mini .ficha-haste { height: 9px; }
.ficha.mini .ficha-nome { bottom: 36px; font-size: 10px; }
.ficha.amigavel .ficha-nome::after { content: ' · amigável'; color: #8ff0b4; }
.ficha.falso { opacity: .5; }
.ficha.falso .ficha-nome::after { content: ' · falso'; color: var(--texto-dim); }
.ficha.so-lente .ficha-cabeca { filter: sepia(.9) contrast(.8); opacity: .65; }
.ficha.so-lente .ficha-nome::after { content: ' · 📷 lente'; color: #e6d3a3; }
.ficha.no-flash .ficha-cabeca { box-shadow: 0 0 0 3px #fff, 0 0 28px #fff; }
.ficha.olha-lente .ficha-cond::before { content: '📷'; }
.ficha[data-el="sangue"] { --elc: #d0343e; } .ficha[data-el="morte"] { --elc: #b8b8b8; } .ficha[data-el="conhecimento"] { --elc: #f0c040; } .ficha[data-el="energia"] { --elc: #b46cff; }
.ficha[data-el] .ficha-cabeca { box-shadow: 0 0 0 3px var(--elc), 0 0 22px var(--elc); }
.ficha[data-el] .ficha-cabeca::after { position: absolute; right: -8px; bottom: -6px; font-size: 13px; line-height: 1; filter: drop-shadow(0 0 2px #000); }
.ficha[data-el="sangue"] .ficha-cabeca::after { content: '🩸'; } .ficha[data-el="morte"] .ficha-cabeca::after { content: '💀'; }
.ficha[data-el="conhecimento"] .ficha-cabeca::after { content: '📜'; } .ficha[data-el="energia"] .ficha-cabeca::after { content: '⚡'; }
.ficha[data-el] .ficha-cabeca { position: relative; }
.fil-trilha { translate: -50% -50%; }
.fil-trilha span { display: inline-block; font: 11px var(--mono); color: #fff; background: rgba(10,8,16,.8); border: 1px solid var(--c); border-radius: 999px; padding: 1px 5px; white-space: nowrap; }
.fil-trilha.ult span { box-shadow: 0 0 10px var(--c); }
.fil-vesala { box-shadow: inset 0 0 0 2px rgba(120,190,255,.55); background: rgba(80,150,255,.06); display: flex; align-items: flex-start; justify-content: flex-start; padding: 3px; }
.fil-vesala span { font-size: 12px; }
.fil-curto { background: repeating-linear-gradient(135deg, rgba(10,8,16,.55) 0 6px, rgba(160,90,255,.12) 6px 12px); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 3px; }
.fil-curto span, .fil-vesala span { font: 11px var(--mono); background: rgba(10,8,16,.8); border-radius: 4px; padding: 1px 4px; color: #d9c2ff; }
.fil-mechas { background: repeating-linear-gradient(80deg, rgba(40,30,20,.0) 0 7px, rgba(60,40,30,.28) 7px 9px); box-shadow: inset 0 0 0 1px rgba(120,80,60,.45); }
.fil-ausencia { background: radial-gradient(circle at 50% 50%, rgba(160,90,255,.18), transparent 70%); box-shadow: inset 0 0 26px rgba(160,90,255,.35); }

/* ---------- Editor de um Filho e das etiquetas (lateral no computador, tela cheia no celular) ---------- */
.fe-wrap { position: fixed; inset: 0; z-index: 9400; }
.fe-fundo { position: absolute; inset: 0; background: rgba(4,2,8,.55); backdrop-filter: blur(2px); animation: feFundo .2s ease-out; }
.fe { position: absolute; right: 0; top: 0; bottom: 0; width: min(460px, 100vw); display: flex; flex-direction: column; background: #100c17; border-left: 1px solid var(--roxo-escuro); box-shadow: -24px 0 60px rgba(0,0,0,.55); animation: feEntra .22s cubic-bezier(.2,.8,.2,1); }
@keyframes feEntra { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes feFundo { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fe, .fe-fundo { animation: none; } }
.fe-cab { display: flex; align-items: center; gap: 6px; padding: 10px 10px 8px; padding-top: max(10px, env(safe-area-inset-top)); background: linear-gradient(180deg, color-mix(in srgb, var(--cor, #8b5cf6) 22%, #100c17), #100c17); border-bottom: 1px solid var(--linha); }
.fe-ico { flex: none; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; background: rgba(0,0,0,.35); border: 1px solid var(--linha); border-radius: 10px; font-size: 18px; color: var(--texto); }
.fe-ico:disabled { opacity: .35; }
.fe-tit { flex: 1; min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; }
.fe-tit h3 { margin: 0; font: 700 19px var(--display); letter-spacing: .03em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fe-cod { font: 12px var(--mono); color: var(--texto-dim); }
.fe-elb { font-size: 12px; color: var(--el, var(--roxo-claro)); }
.fe-resumo { padding: 8px 12px; border-bottom: 1px solid var(--linha); max-height: 84px; overflow: auto; }
.fe-abas { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; padding: 6px 8px 0; border-bottom: 1px solid var(--linha); }
.fe-abas button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 50px; padding: 4px 0 6px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--texto-dim); }
.fe-abas button i { font-style: normal; font-size: 18px; line-height: 1; }
.fe-abas button span { font-size: 10.5px; letter-spacing: .01em; }
.fe-abas button b { position: absolute; top: 2px; right: calc(50% - 22px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--roxo); color: #fff; font: 700 10px/16px var(--mono); }
.fe-abas button.on { color: #fff; border-bottom-color: var(--roxo); }
.fe-corpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 10px 12px 28px; padding-bottom: max(28px, env(safe-area-inset-bottom)); }
.fe-sec-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.fe-sec-cab h4 { margin: 0; font: 700 14px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--roxo-claro); }
.fe-sec-cab span { flex: 1; min-width: 0; font-size: 12px; color: var(--texto-dim); }
.fe-q { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #0b0910; border: 1px solid var(--linha); color: var(--texto-dim); font: 700 16px var(--mono); }
.fe-q.on { background: var(--roxo-escuro); border-color: var(--roxo); color: #fff; }
.fe-grupo { margin: 10px 0 4px; }
.fe-gt { margin: 0 0 6px; font: 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-dim); }
details.fe-det > summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; }
.fe-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fe-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; max-width: 100%; padding: 6px 12px 6px 10px; border-radius: 999px; background: #0d0a13; border: 1px solid #2c2440; color: var(--texto-dim); font-size: 13.5px; line-height: 1.2; text-align: left; transition: background .15s, border-color .15s, color .15s; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.fe-chip i { font-style: normal; font-size: 16px; filter: grayscale(.85); opacity: .75; transition: filter .15s, opacity .15s; }
.fe-chip span { min-width: 0; overflow-wrap: anywhere; }
.fe-chip small { display: none; }
.fe-chip:hover { border-color: #4b3b6e; color: var(--texto); }
.fe-chip.on { background: linear-gradient(180deg, rgba(139,92,246,.32), rgba(139,92,246,.16)); border-color: var(--roxo); color: #fff; box-shadow: 0 0 0 1px rgba(139,92,246,.25), 0 4px 14px rgba(139,92,246,.18); }
.fe-chip.on i { filter: none; opacity: 1; }
.fe-radio .fe-chip.on { background: linear-gradient(180deg, rgba(255,211,138,.22), rgba(255,211,138,.08)); border-color: #ffd38a; box-shadow: none; }
.com-dicas .fe-chips { flex-direction: column; }
.com-dicas .fe-chip { border-radius: 12px; display: grid; grid-template-columns: auto 1fr; column-gap: 8px; width: 100%; }
.com-dicas .fe-chip small { display: block; grid-column: 2; font-size: 12px; color: var(--texto-dim); line-height: 1.35; }
.com-dicas .fe-chip.on small { color: #d9ccf2; }
.fe-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); gap: 8px; margin: 10px 0 4px; padding: 10px; background: #0b0910; border: 1px solid var(--linha); border-radius: 12px; }
.fe-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 12px; color: var(--texto-dim); }
.fe-campo.fe-largo { margin: 10px 0; }
.fe-campo input, .fe-campo select, .fe-campo textarea, .fe-forma select, .fe-forma input { width: 100%; min-width: 0; min-height: 40px; background: #07060a; color: var(--texto); border: 1px solid var(--linha); border-radius: 8px; padding: 7px 9px; font: 14px var(--corpo); }
.fe-campo textarea { resize: vertical; }
.fe-nota { font-size: 12px; color: var(--texto-dim); margin: 6px 0; }
.fe-formas { display: grid; gap: 8px; margin: 8px 0; }
.fe-forma { display: grid; grid-template-columns: 26px 1fr 1fr; gap: 6px; align-items: center; padding: 8px; background: #0b0910; border: 1px solid var(--linha); border-radius: 12px; }
.fe-forma > b { font: 700 15px var(--mono); color: var(--roxo-claro); text-align: center; }
.fe-forma details { grid-column: 1 / -1; }
.fe-forma summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; font-size: 13px; color: var(--texto-dim); }
.fe-forma details .fe-chips { margin: 6px 0; }
.fe-dica { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 10px 12px; background: #1f1830; border: 1px solid var(--roxo); border-radius: 12px; font-size: 13px; line-height: 1.4; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
.fe-dica b { color: #fff; margin-right: 4px; }
/* etiquetas: andar, paleta e grade das salas */
.fe-andares { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 10px; }
.fe-andares button { min-height: 40px; background: #0d0a13; border: 1px solid #2c2440; border-radius: 10px; font: 600 14px var(--mono); color: var(--texto-dim); }
.fe-andares button.on { background: var(--roxo-escuro); border-color: var(--roxo); color: #fff; }
.fe-paleta { margin-bottom: 4px; }
.fe-paleta .fe-chip { padding: 6px 10px; }
.fe-grade { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin: 8px 0 12px; }
.fe-sala { position: relative; aspect-ratio: 1 / .9; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 2px; background: #0d0a13; border: 1px solid #2c2440; border-radius: 10px; color: var(--texto-dim); }
.fe-sala b { font: 600 13px var(--mono); }
.fe-sala span { font-size: 11px; line-height: 1; letter-spacing: -1px; max-width: 100%; overflow: hidden; white-space: nowrap; }
.fe-sala.on { background: linear-gradient(180deg, rgba(139,92,246,.35), rgba(139,92,246,.14)); border-color: var(--roxo); color: #fff; }
.fe-sala.sug { border-style: dashed; border-color: #ffd38a; }
.fe-sala em { position: absolute; top: 2px; right: 3px; font-style: normal; font-size: 10px; }
.fe-sug { padding: 10px; background: #0b0910; border: 1px solid var(--linha); border-radius: 12px; font-size: 13px; }
.fe-sug p { margin: 0 0 8px; color: var(--texto-dim); }
.fe-sug > button, .fe-linha button { min-height: 40px; width: 100%; background: #17121f; border: 1px solid var(--roxo-escuro); border-radius: 10px; color: var(--texto); padding: 6px 10px; }
.fe-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fe-linha button.pri { background: var(--roxo); border-color: var(--roxo); color: #fff; }
html.fe-aberto { overflow: hidden; }
@media (max-width: 760px) {
  .fe { width: 100vw; border-left: 0; animation-name: feSobe; }
  @keyframes feSobe { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
  .fe-fundo { display: none; }
  .fe-forma { grid-template-columns: 24px 1fr; }
  .fe-forma input { grid-column: 2; }
}

/* kit do auxiliar e bandeja do Mestre: chips compactos em grade */
#trayFilhosAux, #trayFilhos { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 5px; }
#trayFilhosAux button, #trayFilhos button { min-height: 40px; border-radius: 10px; padding: 4px 8px 4px 5px; font-size: 12.5px; line-height: 1.15; text-align: left; position: relative; overflow: hidden; }
#trayFilhosAux .qtd, #trayFilhos .qtd { margin-left: auto; font-size: 11px; }

/* ===== imersao.js: qualidade automática, coração, ambiente, marcas, backup e resumo automáticos, tutorial e modo foto ===== */
.imr-modal { position: fixed; inset: 0; z-index: 9700; display: grid; place-items: center; padding: 16px; background: rgba(4,2,6,.74); backdrop-filter: blur(3px); }
.imr-caixa { width: min(560px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 14px 16px 16px; border-radius: 12px; background: #120d19; border: 1px solid var(--roxo); color: var(--texto); box-shadow: 0 14px 40px rgba(0,0,0,.6); }
.imr-modal-larga .imr-caixa { width: min(860px, 100%); }
.imr-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.imr-cab b { font: 700 15px var(--display); letter-spacing: .04em; }
.imr-x { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linha); background: rgba(255,255,255,.04); color: var(--texto); font-size: 18px; cursor: pointer; }
.imr-caixa h4 { margin: 14px 0 6px; font: 700 13px var(--mono); color: var(--roxo-claro); letter-spacing: .06em; }
.imr-caixa h4 small { color: var(--texto-dim); font-weight: 400; }
.imr-bts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.imr-bts button { flex: 1 1 140px; min-height: 44px; border-radius: 8px; border: 1px solid var(--linha); background: #1d1628; color: var(--texto); font: 600 13px var(--mono); cursor: pointer; padding: 6px 10px; }
.imr-bts button.pri { background: var(--roxo-escuro); border-color: var(--roxo); }
.imr-bts button:hover, .imr-bts button:focus-visible { border-color: var(--roxo); }
.imr-resumo-txt { width: 100%; min-height: 240px; box-sizing: border-box; padding: 10px; border-radius: 8px; border: 1px solid var(--linha); background: #0b0810; color: var(--texto); font: 13px/1.45 var(--mono); resize: vertical; white-space: pre-wrap; }
.imr-bk { margin-top: 10px; }
.imr-bk-lista { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.imr-bk-lista li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--linha); background: rgba(255,255,255,.03); }
.imr-bk-lista li span { display: grid; gap: 2px; min-width: 0; }
.imr-bk-lista li small { color: var(--texto-dim); font: 11px var(--mono); }
.imr-bk-lista li button { flex: none; min-height: 40px; }
/* tutorial da primeira vez no 3D */
.imr-tut { position: absolute; left: 50%; top: calc(max(10px, env(safe-area-inset-top)) + 64px); transform: translateX(-50%); z-index: 6; width: min(420px, calc(100% - 32px)); box-sizing: border-box; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: start; padding: 12px 14px 0; border-radius: 12px; background: rgba(14,10,22,.94); border: 1px solid var(--roxo); box-shadow: 0 10px 30px rgba(0,0,0,.55); overflow: hidden; animation: imrTut .35s ease-out; }
.imr-tut-ic { font-size: 30px; line-height: 1; padding-top: 2px; }
.imr-tut-txt b { font: 700 15px var(--display); }
.imr-tut-txt p { margin: 4px 0 0; font: 13px/1.4 var(--corpo); color: var(--texto); }
.imr-tut-pe { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 6px 0 10px; }
.imr-tut-pts { display: flex; gap: 5px; margin-right: auto; }
.imr-tut-pts i { width: 7px; height: 7px; border-radius: 50%; background: var(--linha); }
.imr-tut-pts i.on { background: var(--roxo-claro); }
.imr-tut-pe button { min-height: 40px; padding: 4px 14px; border-radius: 8px; border: 1px solid var(--linha); background: #1d1628; color: var(--texto); font: 600 12px var(--mono); cursor: pointer; }
.imr-tut-pe button.pri { background: var(--roxo-escuro); border-color: var(--roxo); }
.imr-tut-barra { grid-column: 1 / -1; height: 3px; margin: 0 -14px; background: rgba(255,255,255,.06); }
.imr-tut-barra i { display: block; height: 100%; width: 100%; background: var(--roxo); transform-origin: 0 50%; animation: imrTutBarra 5s linear forwards; }
@keyframes imrTut { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes imrTutBarra { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* modo foto */
.imr-clarao { position: absolute; inset: 0; z-index: 8; pointer-events: none; background: #fff; animation: imrClarao .6s ease-out forwards; }
@keyframes imrClarao { from { opacity: .85; } to { opacity: 0; } }
.imr-previa { position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: calc(max(12px, env(safe-area-inset-bottom)) + 96px); z-index: 7; width: min(240px, 40vw); padding: 6px; border-radius: 10px; background: rgba(14,10,22,.94); border: 1px solid var(--roxo); box-shadow: 0 10px 30px rgba(0,0,0,.55); transform: rotate(-2deg); animation: imrPrevia .35s ease-out; transition: opacity .45s, transform .45s; }
.imr-previa.some { opacity: 0; transform: rotate(-2deg) translateY(-10px); }
.imr-previa img { display: block; width: 100%; height: auto; border-radius: 6px; }
.imr-previa div { display: flex; gap: 6px; margin-top: 6px; }
.imr-previa button { flex: 1; min-height: 38px; border-radius: 8px; border: 1px solid var(--linha); background: #1d1628; color: var(--texto); font: 600 12px var(--mono); cursor: pointer; }
@keyframes imrPrevia { from { opacity: 0; transform: rotate(-2deg) scale(.85); } to { opacity: 1; transform: rotate(-2deg) scale(1); } }
.imr-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.imr-gal figure { margin: 0; padding: 6px; border-radius: 10px; border: 1px solid var(--linha); background: rgba(255,255,255,.03); display: grid; gap: 6px; min-width: 0; }
.imr-gal img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; background: #000; }
.imr-gal figcaption { font: 11px var(--mono); color: var(--texto-dim); overflow-wrap: anywhere; }
.imr-gal figure div { display: flex; gap: 6px; }
.imr-gal figure button { min-height: 38px; border-radius: 8px; border: 1px solid var(--linha); background: #1d1628; color: var(--texto); font: 600 12px var(--mono); cursor: pointer; padding: 4px 10px; }
.imr-gal figure button:first-child { flex: 1; }
/* telão do 3D com chiado quando um Filho passa perto */
.s3d-video.imr-chiado iframe { filter: contrast(1.6) saturate(.3) brightness(1.3); }
.s3d-video.imr-chiado::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .55; mix-blend-mode: screen; background: repeating-linear-gradient(0deg, rgba(255,255,255,.18) 0 2px, rgba(0,0,0,.25) 2px 4px); animation: imrChiado .12s steps(3) infinite; }
@keyframes imrChiado { 0% { transform: translateY(0); } 50% { transform: translateY(-3px); } 100% { transform: translateY(2px); } }
/* botão de foto: no topo; no celular estreito, flutuando na borda direita (o título da sala precisa do espaço) */
.s3d.s3d-sem-hud .imr-bt-foto { display: none !important; }
@media (max-width: 420px) {
  .s3d-topo-bts .imr-bt-foto { position: fixed; right: max(12px, env(safe-area-inset-right)); top: 44%; width: 44px; height: 44px; font-size: 18px; box-shadow: 0 4px 14px rgba(0,0,0,.5); }
  .s3d.s3d-com-gaveta .imr-bt-foto { display: none; }
  .imr-previa { right: calc(max(12px, env(safe-area-inset-right)) + 54px); bottom: auto; top: 30%; width: min(150px, 38vw); }
  .imr-gal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .imr-caixa { padding: 12px; }
  .imr-tut { top: calc(max(10px, env(safe-area-inset-top)) + 58px); }
}
@media (prefers-reduced-motion: reduce) { .imr-tut, .imr-previa, .imr-clarao { animation: none; } .s3d-video.imr-chiado::after { animation: none; } }