/* Direção visual provisória do brief: areia, pedra, bronze, vermelho romano e
   mármore; Cinzel para títulos, Crimson Pro para texto. As fontes são pedidas
   pelo nome e caem em serifadas do sistema — o jogo não busca nada na rede, e
   servir a pasta tem de bastar para jogar.

   Duas regras de acesso mandam no arquivo inteiro:
   1. Cor nunca é a única informação. Espetáculo tem cor E a palavra na lista de
      tags; carta impedida tem opacidade E `aria-disabled`.
   2. O foco sempre se vê, em qualquer elemento acionável. */

:root {
  --areia: #d8c39a;
  --pedra: #1c1613;
  --pedra-clara: #2a211c;
  --borda: #3a2e26;
  --bronze: #c9a24f;
  --sangue: #8f1f24;
  --marmore: #efe6d2;
  --apagado: #9d8f7e;
  --verde: #6f8f4a;
  --escala: 1;

  --titulo: Cinzel, "Trajan Pro", Georgia, "Times New Roman", serif;
  --texto: "Crimson Pro", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "Cascadia Code", Consolas, monospace;
  --transicao: 140ms ease-out;
}

/* Alto contraste: mais separação entre fundo e tinta, bordas mais grossas e
   nenhum cinza médio. Não é um "tema escuro diferente" — é o mesmo jogo com o
   contraste que o WCAG pede. */
:root[data-contraste="alto"] {
  --areia: #ffe9b8;
  --pedra: #000000;
  --pedra-clara: #14100d;
  --borda: #ffe9b8;
  --bronze: #ffd166;
  --marmore: #ffffff;
  --apagado: #d9cfc0;
  --sangue: #ff5a5f;
  --verde: #9ae05a;
}

:root[data-movimento="reduzido"] *,
:root[data-movimento="reduzido"] *::before,
:root[data-movimento="reduzido"] *::after {
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 1ms !important;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--pedra);
  color: var(--marmore);
  font-family: var(--texto);
  font-size: calc(1rem * var(--escala));
  line-height: 1.5;
}

h1, h2, h3 {
  font-family: var(--titulo);
  letter-spacing: .06em;
  margin: 0;
}

/* O foco tem de aparecer sobre qualquer fundo, inclusive sobre a carta dourada. */
:focus-visible {
  outline: 3px solid var(--bronze);
  outline-offset: 3px;
  border-radius: 4px;
}
:root[data-contraste="alto"] :focus-visible { outline-width: 4px; outline-color: #fff; }

/* ------------------------------------------------------------------ casca */

#app {
  max-width: 62rem;
  margin: 0 auto;
  padding: 1rem 1rem 3rem;
  display: grid;
  /* A coluna não pode crescer com o conteúdo: sem o `minmax(0, …)` a grade
     alargava até caber a linha mais larga, e no celular a página rolava de
     lado (medido pelo navegador, DEC-026). */
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.cabeca {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--borda);
  padding-bottom: .75rem;
}
.cabeca h1 {
  font-size: calc(1.6rem * var(--escala));
  text-transform: uppercase;
  color: var(--areia);
}

.acesso { display: flex; flex-wrap: wrap; gap: .35rem 1rem; }
/* Fase B (DEC-054): as opções numa gaveta, a tela deixa de parecer formulário. */
.acesso-gaveta { position: relative; }
.acesso-gaveta > summary { cursor: pointer; list-style: none; padding: .35rem .7rem; border: 1px solid #3a2a24; border-radius: .4rem; color: var(--texto-fraco, #b8ac94); }
.acesso-gaveta > summary::-webkit-details-marker { display: none; }
.acesso-gaveta[open] > .acesso { position: absolute; right: 0; top: calc(100% + .3rem); z-index: 50; background: #1c1412; border: 1px solid #3a2a24; border-radius: .5rem; padding: .7rem .9rem; flex-direction: column; min-width: 14rem; box-shadow: 0 8px 24px rgba(0,0,0,.5); }

/* O mercador em prateleiras (Fase B, DEC-054, pesquisa 04 7a): cor e ícone por
   categoria, sempre no mesmo lugar. Serviço tem borda tracejada. */
.prateleira { border-left: 6px solid var(--cor-prateleira); background: color-mix(in srgb, var(--cor-prateleira) 7%, transparent); border-radius: .4rem; padding: .5rem .7rem .8rem; margin-top: .8rem; }
.prateleira-cartas { --cor-prateleira: #d9c9a0; }
.prateleira-equipamento { --cor-prateleira: #7d98b0; }
.prateleira-servicos { --cor-prateleira: #8a9a5a; }
.prateleira-titulo { margin: 0 0 .5rem; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cor-prateleira); }
.prateleira-servicos .opcao { border-style: dashed; }
.prateleira-servicos .opcoes { grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); }
.opcao.sem-ouro > :not(.peca-compra):not(.preco):not(button) { filter: saturate(.45) brightness(.8); }
.preco.caro b { color: #ff7a6a; }

/* A prévia da peça nos totais do boneco: atual → novo. */
.delta-totais { display: flex; flex-wrap: wrap; gap: .3rem .7rem; justify-content: center; margin: .3rem 0; }
.delta { display: inline-flex; align-items: center; gap: .2rem; font-size: .9rem; }
.delta img { width: 1.1rem; height: 1.1rem; image-rendering: pixelated; }
.delta.sobe b, .delta.sobe .seta { color: #7be05a; }
.delta.desce b, .delta.desce .seta { color: #ff7a6a; }

/* Etiquetas da oferta: NOVO, +1 cópia, ⭐ combina, ⚒ evolui. */
/* Os portões (DEC-055): arco de pedra com o prêmio dentro, como no Hades. */
.portoes { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.portao { align-items: center; text-align: center; }
.portao-arco { display: grid; place-items: center; width: 7rem; height: 8.5rem; margin: .2rem auto .4rem;
  border: 6px solid #8a7a6a; border-bottom: none; border-radius: 3.5rem 3.5rem 0 0;
  background: radial-gradient(circle at 50% 60%, #3a2a24, #140d0a); box-shadow: inset 0 0 18px rgba(0,0,0,.7); }
.portao-icone { font-size: 3.2rem; filter: drop-shadow(0 0 6px rgba(254,231,97,.45)); }
.portao h3 { margin: .2rem 0 .5rem; }
.contagem { font-weight: 700; color: #f0d890; }
/* Fase E (DEC-057). A tela do fim: as linhas entram em sequência e o recorde
   batido ganha carimbo dourado com pop. */
.numeros-da-tarde { list-style: none; padding: 0; margin: .8rem auto; max-width: 30rem; display: grid; gap: .35rem; }
.linha-tarde { display: grid; grid-template-columns: 2rem 1fr auto; align-items: center; gap: .5rem; padding: .35rem .6rem; background: #221612; border-radius: .4rem; position: relative; }
.linha-icone { font-size: 1.3rem; text-align: center; }
.linha-valor { font-size: 1.25rem; color: #f0d890; }
.linha-tarde.recorde { outline: 2px solid #fee761; }
.carimbo { grid-column: 1 / -1; justify-self: end; font-size: .72rem; font-weight: 900; letter-spacing: .08em; color: #140d0a; background: #fee761; padding: .1rem .45rem; border-radius: .25rem; }
:root[data-movimento="normal"] .linha-tarde { animation: entra-linha .35s ease-out both; animation-delay: calc(var(--i) * 180ms); }
:root[data-movimento="normal"] .carimbo { animation: carimbo .4s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--i) * 180ms + 500ms); }
@keyframes entra-linha { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes carimbo { from { opacity: 0; transform: scale(1.6) rotate(-6deg); } to { opacity: 1; transform: rotate(-3deg); } }

/* A recompensa revelada carta a carta (pesquisa 03, momento 11). */
:root[data-movimento="normal"] .tela.escolha .opcoes > .carta-opcao { animation: virar-carta .32s ease-out both; }
:root[data-movimento="normal"] .tela.escolha .opcoes > .carta-opcao:nth-child(2) { animation-delay: 80ms; }
:root[data-movimento="normal"] .tela.escolha .opcoes > .carta-opcao:nth-child(3) { animation-delay: 160ms; }
@keyframes virar-carta { from { opacity: 0; transform: perspective(600px) rotateY(80deg); } to { opacity: 1; transform: none; } }

/* Raridade que parece rara: ouro e púrpura pulsam um brilho na cor delas. */
:root[data-movimento="normal"] .opcao.rar-ouro, :root[data-movimento="normal"] .carta.rar-ouro { animation: brilho-ouro 2.2s ease-in-out infinite; }
:root[data-movimento="normal"] .opcao.rar-purpura, :root[data-movimento="normal"] .carta.rar-purpura { animation: brilho-purpura 2.2s ease-in-out infinite; }
@keyframes brilho-ouro { 50% { box-shadow: 0 0 14px rgba(242, 193, 78, .55); } }
@keyframes brilho-purpura { 50% { box-shadow: 0 0 16px rgba(142, 42, 107, .7); } }

.etiqueta { display: inline-block; align-self: center; margin: .25rem auto 0; padding: .1rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .05em; }
.etiqueta.novo { background: #2c3e66; color: #cfe0ff; }
.etiqueta.copia { background: #3a2a24; color: #d9c9a0; }
.etiqueta.combina { background: #5a4410; color: #fee761; }
.etiqueta.evolui { background: #4a2050; color: #f0c0ff; }

/* O patrono pela cor do estilo (pesquisa 04 7c). */
.cartao-patrono[style*="--cor-estilo"] { border-left: 6px solid var(--cor-estilo); }
.estilo-faixa { display: block; margin: -.2rem 0 .3rem; font-weight: 700; font-size: .85rem; color: var(--cor-estilo); letter-spacing: .04em; }
.toggle {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;             /* alvo de toque */
  font-size: calc(.85rem * var(--escala));
  color: var(--apagado);
  cursor: pointer;
}
.toggle input[type="checkbox"] { width: 1.15rem; height: 1.15rem; accent-color: var(--bronze); }
.toggle input[type="range"] { width: 6rem; accent-color: var(--bronze); }

/* ------------------------------------------------------------------ telas */

/* Mesma trava do #app: a coluna da tela não cresce com o conteúdo. */
.tela { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; min-width: 0; }
.tela h2 { font-size: calc(1.25rem * var(--escala)); color: var(--areia); }
.frase { color: var(--apagado); margin: 0; max-width: 46rem; }
.nota { color: var(--apagado); font-size: calc(.9rem * var(--escala)); margin: 0; }

.ludus { text-align: center; justify-items: center; padding: 3rem 0; gap: 1.5rem; }
.ludus .placar { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }

.btn {
  font-family: var(--titulo);
  font-size: calc(.95rem * var(--escala));
  letter-spacing: .06em;
  min-height: 44px;
  padding: .6rem 1.2rem;
  background: var(--pedra-clara);
  color: var(--marmore);
  border: 1px solid var(--borda);
  border-radius: 3px;
  cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao);
}
.btn:hover:not(:disabled) { background: var(--borda); border-color: var(--bronze); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.forte { background: var(--sangue); border-color: var(--sangue); color: #fff; }
.btn.forte:hover:not(:disabled) { filter: brightness(1.15); }
.btn.grande { font-size: calc(1.2rem * var(--escala)); padding: .9rem 2rem; }
.btn.fantasma { background: none; color: var(--apagado); justify-self: start; }

/* ------------------------------------------------------------------ carta */

/* A CARTA (DEC-021)
   Em pé, como no Vampire Crawlers: moeda do custo, faixa do nome, a janela da
   ilustração, as fichas de efeito (ícone + número grande) e a frase curta.
   A família manda na **moldura inteira** e na janela; a cor nunca é sozinha —
   as fichas, a frase e o `aria-label` dizem a mesma coisa. */
.carta {
  --fam: #6f7f66;
  --fam-claro: #9aac8e;
  position: relative;
  width: 100%;
  min-width: 150px;             /* GDD: alvo de toque da carta */
  padding: .5rem .5rem .55rem;
  background:
    linear-gradient(180deg, rgba(255,240,210,.06), rgba(0,0,0,0) 30%),
    linear-gradient(180deg, #33281f, #1f1813);
  border: 2px solid var(--fam);
  border-radius: 9px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.65), inset 0 0 0 3px color-mix(in srgb, var(--fam) 35%, transparent), 0 4px 10px rgba(0,0,0,.45);
  display: grid;
  gap: .35rem;
  align-content: start;
  transition: transform var(--transicao), box-shadow var(--transicao), filter var(--transicao);
}
.carta.clicavel { cursor: pointer; }
.carta.clicavel:hover {
  transform: translateY(-6px);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.65), inset 0 0 0 3px color-mix(in srgb, var(--fam) 35%, transparent), 0 0 0 1px var(--fam-claro), 0 10px 18px rgba(0,0,0,.55);
}
/* A FAMÍLIA, EM COR: vermelho ataca, azul bloqueia, dourado é espetáculo,
   roxo dá energia, cinza tracejado é a livre (joga em qualquer ponto da
   pilha sem quebrar a cadeia). */
.carta.familia-ataque     { --fam: #a3282b; --fam-claro: #e0564c; }
.carta.familia-bloqueio   { --fam: #4f7aa0; --fam-claro: #8fc0e8; }
.carta.familia-espetaculo { --fam: #c9a24f; --fam-claro: #f0d890; }
.carta.familia-utilidade  { --fam: #6f7f66; --fam-claro: #a8bc98; }
.carta.familia-energia    { --fam: #8a6fae; --fam-claro: #c8a8f0; }
.carta.familia-livre      { --fam: #9a9a95; --fam-claro: #d8d8d0; border-style: dashed; }

/* O QUE ESTA CARTA FAZ COM A CADEIA: um halo em volta da carta inteira.
   A mesma informação está no `title` e no aria-label (acesso). */
.carta.cadeia-sobe   { outline: 2px solid #e8c25a; outline-offset: 2px; filter: drop-shadow(0 0 6px rgba(232,194,90,.55)); }
.carta.cadeia-mantem { outline: 2px dashed #b8b8b0; outline-offset: 2px; }
.carta.cadeia-quebra { outline: 2px solid var(--sangue); outline-offset: 2px; }

/* A evolução na tela de recompensa: ela é uma troca, e a troca é o preço. */
.opcao.evolucao { outline: 1px solid var(--bronze); outline-offset: 3px; }
.sinergia.troca { color: var(--bronze); }

/* A janela da ilustração. */
.carta .arte {
  position: relative;
  aspect-ratio: 144 / 90;
  max-width: 100%;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid #0a0706;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fam) 60%, transparent);
  background-size: cover;
}
.carta .arte img { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.carta .arte img.liso { image-rendering: auto; }
.carta .arte.sem-arte { display: grid; place-items: center; image-rendering: pixelated; }
.carta .cara-carta {
  font-size: calc(2.3rem * var(--escala));
  line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.6));
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}
.carta .sabor {
  margin: 0;
  font-size: calc(.72rem * var(--escala));
  font-style: italic;
  color: var(--apagado);
  text-align: center;
}
.carta.lendaria {
  --fam: #e0b848; --fam-claro: #fff0b0;
  background: linear-gradient(180deg, #4a3a20, #2a2012);
}
/* O reflexo que atravessa a lendária de vez em quando. Some com movimento
   reduzido (a regra global zera a animação). */
.carta.lendaria::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,245,200,.22) 50%, transparent 60%);
  background-size: 250% 100%;
  animation: reflexo 4.5s ease-in-out infinite;
  pointer-events: none;
  border-radius: inherit;
}
@keyframes reflexo { 0%, 60% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
.carta.impedida { opacity: .5; cursor: not-allowed; filter: grayscale(.7); }
.carta.impedida:hover { transform: none; }

/* O custo, numa moeda de bronze que morde o canto. */
.carta .custo {
  position: absolute;
  top: -.7rem; left: -.7rem;
  z-index: 1;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #f6e2a0, var(--bronze) 55%, #7a5a20);
  color: #241810;
  border: 2px solid #241810;
  border-radius: 50%;
  font-family: var(--titulo);
  font-weight: 700;
  font-size: calc(1.05rem * var(--escala));
  box-shadow: 0 2px 4px rgba(0,0,0,.6);
}
.carta.familia-livre .custo { background: radial-gradient(circle at 35% 30%, #f0f0e8, #a8a8a0 55%, #5a5a54); }

/* A faixa do nome. */
.carta .nome {
  margin: 0;
  font-size: calc(.9rem * var(--escala));
  color: var(--marmore);
  text-align: center;
  letter-spacing: .03em;
  padding: .12rem .3rem .12rem 1.2rem;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--fam) 45%, #1a120e) 18%, color-mix(in srgb, var(--fam) 45%, #1a120e) 82%, transparent);
  text-shadow: 0 1px 0 #000;
  line-height: 1.25;
}
.carta.lendaria .nome { color: #fff0c0; }

/* As fichas: o ícone e o número que se lê de relance. */
.fichas-efeito { display: flex; flex-wrap: wrap; justify-content: center; gap: .15rem .55rem; margin-top: -.1rem; }
.ficha-efeito { display: inline-flex; align-items: center; gap: .15rem; line-height: 1; }
.ficha-efeito img { width: 22px; height: 22px; image-rendering: pixelated; }
.ficha-efeito b {
  font-family: var(--titulo);
  font-size: calc(1.3rem * var(--escala));
  color: var(--marmore);
  text-shadow: 0 2px 0 #000, 0 0 4px #000;
}
.ficha-efeito small { font-size: calc(.7rem * var(--escala)); color: var(--areia); font-weight: 700; }
.ficha-efeito.ef-dano b { color: #ffd8b0; }
.ficha-efeito.ef-bloqueio b { color: #cfe6f8; }
.ficha-efeito.ef-furia b, .ficha-efeito.ef-fama b { color: #f0d890; }
.ficha-efeito.ef-sangue b { color: #ff9a8a; }
.ficha-efeito.ef-energia b { color: #e0ccff; }
.ficha-efeito.com-bonus b { color: #b8f080; }

.carta .efeito {
  margin: 0;
  font-size: calc(.8rem * var(--escala));
  text-align: center;
  color: #d8ccb4;
  line-height: 1.3;
}
.carta .bonus { color: var(--verde); }
.carta .tags {
  margin: 0;
  font-size: calc(.75rem * var(--escala));
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--apagado);
}

.sinergia { margin: 0; font-size: calc(.82rem * var(--escala)); color: var(--verde); }
.sinergia.vazia { color: var(--apagado); }
.preco { margin: 0; font-family: var(--mono); color: var(--bronze); }
.preco.caro { color: var(--apagado); text-decoration: line-through; }

/* ------------------------------------------------------------------ escolha */

/* Cada opção é uma coluna do grid, com a carta esticando e o botão no fim:
   sem isto os botões ficam na altura que a carta terminar, e a tela de
   remoção vira um zigue-zague. */
.opcao { display: grid; grid-template-rows: 1fr auto; align-content: stretch; }
.opcao .carta { height: 100%; }

.opcoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  align-items: start;
}
.opcao {
  display: grid;
  gap: .5rem;
  align-content: start;
  padding: 1rem;
  background: var(--pedra-clara);
  border: 1px solid var(--borda);
  border-radius: 5px;
}
.opcao h3 { font-size: calc(1.05rem * var(--escala)); color: var(--areia); }
.opcao p { margin: 0; }
.opcao .sub { color: var(--apagado); font-size: calc(.85rem * var(--escala)); }
.opcao .btn { justify-self: start; }
.carta-opcao { background: none; border: none; padding: 0; }

/* ------------------------------------------------------------------ combate */

.combate { gap: .85rem; }
.topo { display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: space-between; align-items: center; }
.onde { margin: 0; font-family: var(--titulo); color: var(--areia); letter-spacing: .1em; }
.recursos { margin: 0; display: flex; flex-wrap: wrap; gap: .35rem; }

/* A ARENA
   O combate visto de lado, em pixel art (`arena.js`). O canvas tem resolução
   fixa e a proporção dele manda na caixa; as fichas dos bichos são botões
   posicionados por cima de cada desenho, com a mesma conta (`posicoes`). */
.arena {
  position: relative;
  width: 100%;
  aspect-ratio: 960 / 320;
  border: 1px solid var(--borda);
  border-radius: 6px;
  overflow: hidden;
  background: #2a1c18;
}
.arena-cena, .arena-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.arena-canvas { display: block; image-rendering: pixelated; }
.arena-vitoria { margin-bottom: .85rem; }

/* A FILA
   As fichas ficam sobre a arena: a caixa de cada uma é a do desenho do
   bicho, e o número de dano que ele traz fica em cima da cabeça. */
.sala {
  position: absolute;
  inset: 0;
  padding: 0;
}
.bicho {
  position: absolute;
  /* Borda sempre presente, só transparente: sem isto a ficha mirada crescia
     2px e empurrava a fila inteira a cada troca de alvo. */
  box-sizing: border-box;
  display: grid;
  gap: .2rem;
  justify-items: center;
  padding: .3rem .25rem .45rem;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: left 420ms ease-out, top 420ms ease-out, border-color var(--transicao), background var(--transicao);
  display: block;
  padding: 0;
  overflow: visible;
}
/* Em volta do desenho: o número acima da cabeça, a vida e os passos embaixo
   dos pés. Tudo absoluto em relação à caixa, que é o contorno do bicho. */
.bicho > .intencao-simbolo {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  margin-bottom: .1rem;
}
.bicho > .barra {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  width: max(2.6rem, 70%); margin-top: .25rem;
}
.bicho > .passos {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: .7rem;
}
.bicho > .marcas {
  position: absolute; top: 100%; left: 100%; margin: .1rem 0 0 .1rem;
}
.bicho > .mira-seta { bottom: auto; top: auto; bottom: calc(100% + 1.35rem); left: 50%; transform: translateX(-50%) rotate(180deg); }
.bicho:hover:not(:disabled) { background: rgba(255, 240, 200, .08); border-color: rgba(201, 162, 79, .45); }
.bicho .corpo { display: none; }
.bicho .intencao-simbolo { text-shadow: 0 1px 0 #140d0a, 0 0 4px #140d0a, 0 0 8px #140d0a; }
.bicho .barra { box-shadow: 0 0 0 1px #140d0a; }
.bicho:disabled { cursor: default; }

/* A mira por **borda + seta + fundo**, nunca so por cor: a regra de acesso
   deste projeto, e a razao de a seta existir. */
.bicho.mirado {
  border: 2px solid #ffe45a;
  background: rgba(255, 228, 90, .12);
  box-shadow: 0 0 0 2px #140d0a, 0 0 14px rgba(255, 228, 90, .75);
}
.mira-seta {
  position: absolute;
  bottom: -.75rem;
  color: #ffe45a;
  font-size: calc(1.3rem * var(--escala));
  line-height: 1;
  text-shadow: 0 0 2px #140d0a, 0 0 3px #140d0a, 0 0 10px rgba(255, 228, 90, .9);
}
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-movimento="reduzido"]) .bicho.mirado { animation: mira-pulsa 1.1s ease-in-out infinite; }
}
@keyframes mira-pulsa {
  50% { box-shadow: 0 0 0 2px #140d0a, 0 0 22px rgba(255, 228, 90, 1); }
}
.bicho.caido { opacity: .45; }
.bicho.caido .barra, .bicho.caido .marcas { visibility: hidden; }
.bicho.caido .cara { text-decoration: line-through; }

/* A cara do bicho. É o maior elemento da ficha porque é o que identifica a
   sala num olhar — o nome virou `title` e `aria-label`.

   A família é declarada aqui e não herdada: a fonte de texto do jogo é uma
   serifada, e com ela o navegador achava 🐺 mas caía no glifo de texto de
   ⚔️ — que sem cobertura vira um quadrado. Nomear as fontes de emoji do
   sistema manda a busca para onde os símbolos moram de verdade. */
:is(.cara, .intencao-simbolo, .marca, .escudo) {
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji",
               "Segoe UI Symbol", var(--mono), sans-serif;
}
.cara { font-size: calc(2.9rem * var(--escala)); line-height: 1; }

/* A intencao e o que se le ANTES de decidir a ordem das cartas, e por isso
   fica ACIMA do bicho: o olho varre a linha de telegrafos de uma vez. */
.intencao-simbolo {
  /* É a informação que se lê ANTES de escolher a ordem das cartas — a mais
     importante da tela depois das cartas. Estava em .82rem e sumia. */
  font-size: calc(1.02rem * var(--escala));
  font-weight: 700;
  color: #e8908f;
  min-height: 1.2em;
  letter-spacing: .02em;
  white-space: nowrap;
}
.bicho .barra { width: 100%; height: .3rem; }

/* A DISTÂNCIA
   Um ponto por passo: apagado é caminho já andado, aceso é o que falta.
   Substituiu o telégrafo de texto, e o motivo é o mesmo da reforma inteira —
   sete linhas de "Vai atacar: 3 de dano" eram ilegíveis de relance; sete
   fileirinhas de pontos são um olhar só. */
.passos { display: flex; gap: .2rem; height: .55rem; align-items: center; }
.passos i {
  width: .42rem; height: .42rem;
  border-radius: 50%;
  border: 1px solid var(--bronze);
  background: var(--bronze);
}
/* O caminho já andado fica vazio, com o contorno de pé: o vazio precisa se
   contar, senão "dois passos" e "um passo" viram a mesma imagem. */
.passos i.andou { background: none; opacity: .5; }
/* A zona do sopro do dragão (DEC-044): as casas de onde ele queima ficam com
   contorno laranja. Forma e cor: o 🔥 sobre ele diz o mesmo em palavra. */
.passos i.zona-fogo { border-color: #f77622; box-shadow: 0 0 0 1px #f77622; }
.marca.asas { filter: drop-shadow(0 0 2px #fee761); }
/* A pele de ouro do leão (DEC-046): escudo dourado com o que ela tira. */
.marca.pele { color: #fee761; font-weight: 700; }
/* A investida do Minotauro (DEC-047): as setas avisam um turno antes. */
.marca.investida { color: #ff5a3c; font-weight: 900; }
/* O olho do Ciclope (DEC-050): as marcas enchem de vermelho. */
.marca.olho { color: #ff7a7a; letter-spacing: -1px; }
/* A Medusa (DEC-052): o olho roxo conta os turnos; a carta petrificada fica
   cinza, rachada, com a pedra no canto. */
.marca.olhar { color: #c89bf0; }
.marca.carga { color: #f77622; }
.carta.petrificada > :not(.selo-pedra) { filter: grayscale(1) brightness(.7); }
.carta.petrificada { border-color: #8a8070; }
.carta.petrificada .selo-pedra { position: absolute; top: 18%; right: 8%; font-size: 1.8rem; filter: none; }
/* O pescoço da hidra (DEC-045): aberto pulsa em vermelho com o "×2" que vai
   nascer; fechado fica cinza. O texto do botão diz o mesmo para o leitor. */
.selo-toco {
  position: absolute; left: 50%; bottom: 40%; transform: translateX(-50%);
  font: 900 1.05rem/1 var(--fonte-titulo, serif); color: #ffd0c8;
  background: #8f1f24; border: 2px solid #140d0a; border-radius: .4rem; padding: .1rem .35rem;
}
.selo-toco.fechado { background: #3a2a24; color: #b8ac94; }
:root[data-movimento="normal"] .selo-toco:not(.fechado) { animation: pulso-chegando 1.1s ease-in-out infinite; }
.bicho.caido:has(.selo-toco) { opacity: 1; }

/* Quem chega neste turno. Pulsa, mas o aviso **não depende disso**: a borda
   vermelha e o `aria-label` dizem a mesma coisa com movimento reduzido. */
.bicho.chegando { border-color: var(--sangue); background: rgba(143, 31, 36, .1); }
.bicho.chegando .intencao-simbolo { color: #ff9d9c; }
.bicho.chegando .passos i { border-color: var(--sangue); background: var(--sangue); }
:root[data-movimento="normal"] .bicho.chegando { animation: pulso-chegando 1.1s ease-in-out infinite; }
@keyframes pulso-chegando {
  50% { box-shadow: 0 0 10px rgba(143, 31, 36, .55); }
}
:root[data-contraste="alto"] .bicho.chegando { outline: 2px dashed var(--sangue); }
.bicho .marcas { margin: 0; display: flex; gap: .15rem; min-height: .9rem; }
.marca {
  font-size: calc(.68rem * var(--escala));
  font-family: var(--mono);
  color: var(--apagado);
  white-space: nowrap;
}
.marca.bom { color: var(--bronze); }
.marca.ruim { color: #e8908f; }

/* O HEROI, numa linha */
.heroi {
  padding: .5rem .75rem;
  background: var(--pedra-clara);
  border: 1px solid var(--borda);
  border-radius: 5px;
  display: grid;
  gap: .3rem;
}
.vitais {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .9rem;
}
.vida-numero { font-family: var(--mono); font-size: calc(.95rem * var(--escala)); white-space: nowrap; }
.vitais .barra { flex: 1 1 8rem; min-width: 6rem; height: .5rem; }
.escudo {
  font-family: var(--mono);
  font-size: calc(.85rem * var(--escala));
  white-space: nowrap;
  color: #8fb8d8;
}
.heroi .marcas { margin: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.extras { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.build-toggle {
  font-size: calc(.68rem * var(--escala));
  padding: .1rem .45rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .7;
}
.build-toggle:hover, .build-toggle:focus-visible { opacity: 1; }
.build-aberta { padding: .6rem 0 0; }

.numeros { margin: 0; font-family: var(--mono); font-size: calc(.9rem * var(--escala)); }
.numeros .bloqueio { color: #8fb8d8; }

.barra { height: .75rem; background: #241b16; border: 1px solid var(--borda); border-radius: 2px; overflow: hidden; }
.barra i { display: block; height: 100%; background: var(--sangue); transition: width var(--transicao); }
.heroi .barra i { background: var(--verde); }

.fichas, .build { display: flex; flex-wrap: wrap; gap: .3rem; }
.ficha {
  font-size: calc(.78rem * var(--escala));
  padding: .2rem .5rem;
  border: 1px solid var(--borda);
  border-radius: 999px;
  color: var(--apagado);
  white-space: nowrap;
}
.ficha.bom { border-color: var(--bronze); color: var(--bronze); }
.ficha.ruim { border-color: var(--sangue); color: #e8908f; }
.ficha.build { border-style: dashed; }

/* A energia decide a ordem das cartas, que é a decisão do jogo. Ela não pode
   ser o elemento mais discreto do painel. */
.energia { display: inline-flex; gap: .35rem; align-items: center; }
.energia::before {
  content: "Energia";
  font-family: var(--titulo);
  font-size: calc(.75rem * var(--escala));
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--apagado);
  margin-right: .15rem;
}
.energia i {
  width: 1.05rem; height: 1.05rem;
  background: var(--bronze);
  border: 1px solid var(--bronze);
  border-radius: 50%;
}
.energia i.gasta { background: none; border-color: var(--borda); }

/* A PLATEIA
   Eram 100 quadradinhos numa grade de 25x4 mais uma frase explicativa — um
   dos maiores blocos da tela, para um numero de 0 a 100. Virou uma faixa no
   alto da arena: mesma informacao, um decimo do espaco, e ainda e a primeira
   coisa que o olho pega porque atravessa a largura toda. */
.arena-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem 1rem;
  justify-content: space-between;
}
/* A FÚRIA É O MEDIDOR DO ESPECIAL (DEC-035): mora na linha das ações, onde o
   olho está quando decide a carta. Cheia, a barra pega fogo e o botão acende. */
.acoes { align-items: center; }
.furia {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 1 1 18rem;
  padding: .35rem .6rem;
  background: #120d0a;
  border: 1px solid var(--borda);
  border-radius: 8px;
}
.furia .rotulo { font-family: var(--titulo); color: var(--areia); white-space: nowrap; font-size: calc(.9rem * var(--escala)); }
.furia .barra.arquibancada { flex: 1; height: .7rem; border-radius: 999px; }
.furia .barra.arquibancada i {
  background: linear-gradient(90deg, #a22633, #f77622, #feae34);
  transition: width var(--transicao), background var(--transicao);
}
.furia.cheia { border-color: #f77622; box-shadow: 0 0 14px rgba(247,118,34,.55); }
.furia.cheia .barra.arquibancada i { background: linear-gradient(90deg, #f77622, #fee761); box-shadow: 0 0 10px #f77622; }
.furia .rotulo-icone { width: 1.5rem; height: 1.5rem; image-rendering: pixelated; flex: none; }
.furia .numero { font-family: var(--titulo); font-size: calc(1rem * var(--escala)); color: var(--marmore); white-space: nowrap; }
.furia .aviso {
  font-size: calc(.72rem * var(--escala));
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--apagado);
  white-space: nowrap;
}
.furia .aviso.bom { color: #ffd24a; }

/* O botão do especial: apagado até a Fúria encher; cheio, pulsa em fogo. */
.btn.clamor { font-weight: 700; }
.btn.clamor.pronto {
  background: linear-gradient(180deg, #ffd24a, #c9a24f);
  color: #241810;
  border-color: #fff4a8;
  box-shadow: 0 0 14px rgba(255,210,74,.6);
}
:root[data-movimento="normal"] .btn.clamor.pronto { animation: clamor-pulsa 1.2s ease-in-out infinite; }
@keyframes clamor-pulsa { 50% { box-shadow: 0 0 22px rgba(255,210,74,.9); } }

/* A previsão no balão da carta. */
/* No alto contraste a barra precisa de contorno para nao sumir no fundo. */
:root[data-contraste="alto"] .furia .barra.arquibancada { border-color: var(--areia); }
:root[data-contraste="alto"] .bicho.mirado { border-width: 2px; outline: 2px solid var(--areia); }

/* O lembrete de teclado, fechado por padrao. */
.ajuda { color: var(--apagado); font-size: calc(.75rem * var(--escala)); }
.ajuda summary { cursor: pointer; letter-spacing: .08em; }
.ajuda p { margin: .3rem 0 0; }

/* `auto-fit` com uma carta na mão a esticava pela largura inteira da tela —
   e com o deck de uma carta (DEC-016) esse é o primeiro turno de toda run.
   `auto-fill` mantém as colunas do tamanho da carta, e o `max-width` impede a
   mão de virar uma faixa em tela larga. */
.mao {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 10.5rem));
  gap: 1rem .8rem;
  padding-top: .4rem;
  justify-content: center;
}
/* A mão vazia e o Improviso não são cartas: eles não podem herdar o
   `justify-content: center` da mão, senão o aviso aparece indentado no meio
   da tela. Com o deck de uma carta (DEC-016) esse aviso é frequente, e
   frequente e torto é pior que frequente. */
.mao.vazia, .mao.descoberta {
  display: grid;
  gap: .6rem;
  grid-template-columns: 1fr;
  justify-content: stretch;
}
.mao.vazia p, .mao .aviso { color: var(--apagado); margin: 0; }
.mao.descoberta { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.mao.descoberta .aviso { grid-column: 1 / -1; color: var(--bronze); }

.acoes { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ------------------------------------------------------------------ fim */

.fim { text-align: center; justify-items: center; padding: 2.5rem 0; gap: 1rem; }
.fim h2 { font-size: calc(2.4rem * var(--escala)); text-transform: uppercase; }
.fim.rudis h2 { color: var(--bronze); }
.fim.areia h2 { color: var(--apagado); }
.fim .ganho { font-family: var(--mono); color: var(--areia); margin: 0; }

/* ------------------------------------------------------------------ console */

.console { border-top: 1px solid var(--borda); padding-top: .75rem; display: grid; gap: .4rem; }
.vivo { margin: 0; color: var(--areia); min-height: 1.5em; }
.log { margin: 0; padding: 0; list-style: none; display: grid; gap: .15rem; }
.log li { font-size: calc(.85rem * var(--escala)); color: var(--apagado); }

.ajuda { margin: .25rem 0 0; font-size: calc(.78rem * var(--escala)); color: var(--apagado); }

/* ------------------------------------------------------------------ efeitos */

/* Decoração ancorada em quem levou o golpe: o número sai do painel do inimigo
   ou do seu. Não entra no fluxo (é absoluto), não recebe clique e some sozinho.
   Quando a animação começa, a tela já foi redesenhada — nada aqui atrasa a
   próxima jogada. */
.inimigo, .heroi { position: relative; overflow: visible; }
.flutua {
  position: absolute;
  right: 1.2rem;
  top: 1rem;
  pointer-events: none;
  font-family: var(--titulo);
  font-size: calc(2.1rem * var(--escala));
  font-weight: 700;
  color: var(--bronze);
  text-shadow: 0 2px 6px #000;
  animation: sobe 650ms ease-out forwards;
}
.heroi .flutua { color: var(--sangue); }
.flutua.cura { color: var(--verde); }
.flutua.grande { font-size: calc(1.6rem * var(--escala)); color: var(--bronze); right: auto; left: 1.2rem; }

@keyframes sobe {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-2.5rem); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* ------------------------------------------------------------------ telas pequenas */

@media (max-width: 40rem) {
  #app { padding: .75rem .75rem 2.5rem; }
  .mao { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
  /* Sete bichos num telefone: a ficha encolhe em vez de a fila virar cinco
     linhas. A cara continua sendo o maior elemento dela. */
  /* Na tela estreita a arena encolhe junto e a ficha fica só com o número e a
     barra: as marcas moram no rótulo do botão. */
  .bicho { padding: 0; }
  .bicho .marcas, .bicho .passos { display: none; }
  .bicho .intencao-simbolo { font-size: calc(.8rem * var(--escala)); }
  .acoes .btn { flex: 1 1 auto; }
}

/* ------------------------------------------------------------------ bolsa */

/* O que se tem no bolso acompanha toda tela da run. Antes disso a armaria
   mostrava o preço e escondia o saldo — o primeiro playtest tropeçou nisso. */
.bolsa:empty { display: none; }
.recursos { margin: 0; display: flex; flex-wrap: wrap; gap: .35rem; }

/* ---------------------------------------------------------------- parada */

/* Uma tela com várias bancadas: armaria e patrono na mesma mesa. A bancada
   resolvida some, e o botão de voltar para a areia fica sempre à mão. */
.parada { gap: 1.25rem; }
.bancada {
  display: grid;
  gap: .6rem;
  padding-top: .9rem;
  border-top: 1px solid var(--borda);
}
.bancada > h3 {
  font-size: calc(1.05rem * var(--escala));
  color: var(--bronze);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.bancada > .sub { margin: 0; color: var(--apagado); font-size: calc(.9rem * var(--escala)); }

/* A fala do ludus. Sem título de bancada de propósito: ela não é um lugar onde
   se faz algo, é alguém falando com você — e a barra lateral é o que a separa
   das mesas sem transformá-la em mais uma. */
.bancada.fala { border-left: 3px solid var(--bronze); border-top: none; padding: .2rem 0 .2rem 1rem; gap: .3rem; }
.bancada.fala > .nome {
  color: var(--bronze);
  font-size: calc(.86rem * var(--escala));
  letter-spacing: .08em;
  text-transform: uppercase;
}
.fala-texto { font-style: italic; color: var(--areia); max-width: 60ch; }
.opcao h4 {
  font-family: var(--titulo);
  font-size: calc(1.02rem * var(--escala));
  color: var(--areia);
  margin: 0;
  letter-spacing: .04em;
}
.parada > .btn { justify-self: start; margin-top: .25rem; }

/* ---------------------------------------------------------------- larário */

/* O ludus era uma porta: um placar e um botão. Com o Larário ele vira mesa, e
   mesa centralizada não se lê — as bancadas voltam a alinhar à esquerda dentro
   de uma largura que o olho acompanha. */
.ludus .bancada { text-align: left; justify-items: stretch; width: min(46rem, 100%); }

/* Fama que dá para gastar não pode parecer fama parada: MDA-003 é sobre voltar
   ao Larário, e o jogador não volta ao que não chama. O destaque é borda e cor
   **mais** o botão aceso logo abaixo — cor sozinha não é informação. */
.ficha.destaque { border-color: var(--bronze); color: var(--bronze); font-weight: 600; }

.virtudes, .contratos { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.virtude, .contrato-ludus {
  display: grid;
  gap: .35rem;
  padding: .7rem .8rem;
  border: 1px solid var(--borda);
  border-radius: 4px;
  background: rgba(28, 22, 19, .4);
}
.virtude.acessivel { border-color: var(--bronze); }
.virtude.teto { opacity: .75; }

.cabeca-virtude { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.cabeca-virtude h4 {
  font-family: var(--titulo);
  font-size: calc(1.02rem * var(--escala));
  color: var(--areia);
  margin: 0;
  letter-spacing: .04em;
}
.virtude .efeito { margin: 0; font-size: calc(.92rem * var(--escala)); }
.virtude .proxima { margin: 0; color: var(--apagado); font-size: calc(.88rem * var(--escala)); }
.virtude .btn, .contrato-ludus .btn { justify-self: start; margin-top: .2rem; }

.contrato-ludus .nome { margin: 0; font-size: calc(.95rem * var(--escala)); }
.contrato-ludus .premio { color: var(--bronze); white-space: nowrap; }
.contrato-ludus.a-cobrar { border-color: var(--bronze); }
/* Pago não é só apagado: some o botão e entra a palavra "Pago". */
.contrato-ludus.pago { opacity: .6; }

/* A run interrompida vem antes de tudo. Quem fechou a aba no combate 3 não quer
   descobrir isso depois de já ter clicado em "Entrar na arena". */
.retomada { border-top-color: var(--bronze); }
.retomada .btn { justify-self: center; }

/* No alto contraste, a borda é o que separa uma virtude da outra — a mesma
   correção que a grade da plateia precisou (DEC-003). */
:root[data-contraste="alto"] .virtude,
:root[data-contraste="alto"] .contrato-ludus { border-color: var(--marmore); background: #000; }
:root[data-contraste="alto"] .virtude.acessivel,
:root[data-contraste="alto"] .contrato-ludus.a-cobrar { border-width: 2px; }

/* --------------------------------------------------- encenação do turno */

/* Quem está agindo agora. É decoração sobre um quadro já correto: nenhum
   número muda aqui, e sob movimento reduzido nada chega a ser agendado
   (o gate é em JS, em `encenacao.js`). */
.bicho.agindo {
  outline: 3px solid var(--sangue);
  outline-offset: -3px;
}

.legenda {
  margin: 0 0 calc(6px * var(--escala));
  padding: calc(8px * var(--escala)) calc(12px * var(--escala));
  border-left: 3px solid var(--sangue);
  background: color-mix(in srgb, var(--sangue) 10%, transparent);
  font-size: calc(15px * var(--escala));
}

:root[data-contraste="alto"] .bicho.agindo {
  outline-color: #fff;
  background: transparent;
}

/* A ESTÁTUA
   A barra da dívida descia e era vermelha. Esta sobe, e é mármore virando
   bronze: a cor tem de dizer sozinha que isto é ganho, não cobrança. */
.barra.estatua i { background: linear-gradient(90deg, #7d7468, var(--marmore)); }
.bancada.estatua.pronta .barra i { background: linear-gradient(90deg, var(--marmore), var(--bronze)); box-shadow: 0 0 8px var(--bronze); }
.partes { list-style: none; margin: .2rem 0 0; padding: 0; display: grid; gap: .25rem; }
.parte { display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem; font-size: calc(.85rem * var(--escala)); }
.parte .marca-parte { color: var(--apagado); width: 1rem; }
.parte.pronta .marca-parte { color: var(--bronze); }
.parte .nome-parte { color: var(--apagado); }
.parte.pronta .nome-parte { color: var(--areia); }
.parte .nota { font-style: italic; }

/* O HARUSPEX: o fado trancado ainda é informação
   Ele fica à vista de propósito (é a única coisa no ludus que diz "existe
   outro jeito de jogar e este é o caminho"), mas não pode competir com o que
   está aberto. Menos contraste, e o contador em itálico. */
.bancada.haruspex .virtude.trancada { opacity: .68; }
.bancada.haruspex .virtude.trancada h4 { color: var(--apagado); }
.bancada.haruspex .virtude.trancada .sinergia { font-style: italic; }

/* A GRAVAÇÃO NA CARTA
   Linha própria, com a cara da marca. Ela não some no texto da carta porque
   não é o mesmo tipo de informação: o que a carta faz é dado, o que o ferreiro
   gravou é história desta run. */
.carta .gravacao {
  margin: 0;
  font-size: calc(.78rem * var(--escala));
  color: var(--bronze);
  border-top: 1px dotted var(--borda);
  padding-top: .25rem;
}

/* O ferreiro: a oferta é a marca, e os alvos são as lâminas onde ela cabe. */
.bancada .gravacao-oferta .alvos { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.bancada .gravacao-oferta .alvos .btn { font-size: calc(.82rem * var(--escala)); padding: .4rem .7rem; min-height: 38px; }

/* ================================================================ plano v4
   Fase 1: legibilidade. Tudo abaixo é interface; o motor não mudou. */

/* RECURSOS: cada um com ícone e cor própria, e o número grande.
   Palma verde = fama; moeda amarela = ouro. Cor nunca sozinha: ícone e
   `aria-label` dizem o mesmo. */
.bolsa { position: sticky; top: 0; z-index: 20; padding: .35rem 0; background: linear-gradient(180deg, var(--pedra) 70%, transparent); }
.recursos { gap: .5rem; }
.recurso {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .7rem .25rem .45rem;
  background: #120d0a;
  border: 1px solid var(--borda);
  border-radius: 999px;
  line-height: 1;
}
.recurso img { width: 24px; height: 24px; image-rendering: pixelated; }
.recurso b { font-family: var(--titulo); font-size: calc(1.2rem * var(--escala)); color: var(--marmore); }
.recurso.rec-ouro { border-color: #8a6a1a; }
.recurso.rec-ouro b { color: #ffd23a; }
.recurso.rec-fama { border-color: #2f6a48; }
.recurso.rec-fama b { color: #7fe0a8; }
.recurso.rec-ouro.zerado b { color: var(--apagado); }
.recurso.destaque { box-shadow: 0 0 0 1px #7fe0a8, 0 0 10px rgba(127,224,168,.35); }
:root[data-movimento="normal"] .recurso.subiu { animation: recurso-subiu 700ms ease-out; }
@keyframes recurso-subiu { 0% { transform: scale(1); } 30% { transform: scale(1.25); filter: brightness(1.5); } 100% { transform: scale(1); } }

.premio { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem; vertical-align: middle; }
.premio small { color: var(--apagado); font-size: calc(.85rem * var(--escala)); }

/* O PREÇO: a moeda e o número em amarelo; sem dinheiro, riscado. */
.preco { display: inline-flex; align-items: center; gap: .25rem; font-family: var(--titulo); }
.preco img { width: 20px; height: 20px; image-rendering: pixelated; }
.preco b { color: #ffd23a; font-size: calc(1.1rem * var(--escala)); }
.preco.caro b { color: var(--apagado); }

/* A PEÇA À VENDA: desenho | nome, espaço e efeito | preço e botão. */
.opcao.peca {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  gap: .55rem;
}
.frase .linha { display: block; margin-top: .4rem; }
.peca-arte {
  width: 112px; height: 112px;
  image-rendering: pixelated;
  border-radius: 6px;
  border: 1px solid #0a0706;
  box-shadow: 0 0 0 1px var(--borda), 0 3px 8px rgba(0,0,0,.5);
}
.peca-corpo { display: grid; gap: .2rem; }
.peca-corpo h4 { margin: 0; font-size: calc(1.05rem * var(--escala)); color: var(--marmore); }
.peca-texto { color: #d8ccb4; }
.peca-compra { display: flex; align-items: center; justify-content: center; gap: .75rem; }
.opcao.peca .btn { justify-self: center; }
.opcao.peca.slot-arma { border-top: 3px solid #a3282b; }
.opcao.peca.slot-escudo { border-top: 3px solid #4f7aa0; }
.opcao.peca.slot-elmo { border-top: 3px solid #c9a24f; }
.opcao.peca.slot-armadura { border-top: 3px solid #8a6a4a; }

/* CARTA LIMPA: a frase que só repete as fichas sai da face. Volta com
   "Cartas detalhadas" e em telas de toque, que não têm hover para o balão. */
:root[data-cartas="limpas"] .carta .efeito.redundante { display: none; }
@media (hover: none) {
  :root[data-cartas="limpas"] .carta .efeito.redundante { display: block; }
}

/* O BALÃO DE DETALHE: frase inteira, glossário e sabor, no hover e no foco. */
.carta .detalhe {
  display: none;
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: max(100%, 15rem);
  z-index: 40;
  padding: .55rem .7rem;
  background: #140e0b;
  border: 1px solid var(--fam-claro);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,.7);
  pointer-events: none;
  text-align: left;
}
.carta .detalhe p { margin: 0; }
.carta .detalhe-texto { color: var(--marmore); font-weight: 600; font-size: calc(.9rem * var(--escala)); }
.carta .detalhe-termo { margin-top: .3rem !important; color: #d8ccb4; font-size: calc(.8rem * var(--escala)); line-height: 1.3; }
.carta .detalhe .sabor { margin-top: .4rem !important; text-align: left; }
.carta:hover .detalhe, .carta:focus-visible .detalhe { display: block; }
.carta.clicavel:hover .detalhe { bottom: calc(100% + 16px); }
@media (hover: none) { .carta:hover .detalhe { display: none; } }

/* PROTEÇÃO: quem está blindado ganha o selo "🛡 0"; quem blinda, um halo azul.
   O aviso embaixo da arena diz em palavras e dá o atalho da mira. */
.bicho.protetor { box-shadow: 0 0 0 2px rgba(143,192,232,.55), 0 0 14px rgba(143,192,232,.45); border-radius: 8px; }
.bicho > .selo-protegido {
  position: absolute; bottom: calc(100% + 1.5rem); left: 50%; transform: translateX(-50%);
  padding: .05rem .35rem;
  background: rgba(20,40,64,.92);
  border: 1px solid #8fc0e8;
  border-radius: 4px;
  color: #cfe6f8;
  font-weight: 700;
  font-size: calc(.8rem * var(--escala));
  white-space: nowrap;
  pointer-events: none;
}
.bicho.protegido { filter: saturate(.6); }
.aviso-protecao {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
  padding: .5rem .8rem;
  background: rgba(20,40,64,.6);
  border: 1px solid #4f7aa0;
  border-radius: 6px;
  color: #cfe6f8;
}

/* O balão de detalhe sobe por cima da arena: sem isto as barras de vida dos
   bichos (que têm z-index próprio) atravessavam o texto. */
.mao { position: relative; z-index: 30; }

/* ================================================================ a rua
   O ludus como lugar (plano v4, Fase 3). A cena é uma imagem; cada prédio é
   um botão transparente por cima dela, na mesma conta de `PREDIOS` (rua.js).
   A placa com o nome fica sempre visível: o desenho sozinho nunca é a única
   informação (acesso). */
.ludus-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.ludus-topo h2 { margin: 0; }
.ludus .placar { justify-content: flex-end; align-items: center; }
.ludus .placar .ficha { line-height: 1.2; display: inline-flex; align-items: center; }
.rua {
  position: relative;
  width: 100%;
  aspect-ratio: 540 / 180;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--borda);
  box-shadow: 0 6px 18px rgba(0,0,0,.5);
}
.rua-cena { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.predio {
  position: absolute;
  padding: 0;
  background: none;
  border: 2px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color var(--transicao), background var(--transicao);
}
.predio:hover, .predio:focus-visible { border-color: rgba(254,231,97,.8); background: rgba(254,231,97,.1); }
.predio.aberto { border-color: #feae34; background: rgba(254,174,52,.12); }
.predio .placa {
  position: absolute;
  top: .15rem; left: 50%;
  transform: translate(-50%, 0);
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .12rem .45rem;
  background: rgba(24,20,37,.82);
  border: 1px solid #5a6988;
  border-radius: 4px;
  color: #ead4aa;
  font-family: var(--titulo);
  font-size: calc(.7rem * var(--escala));
  white-space: nowrap;
  pointer-events: none;
}
.predio.aberto .placa, .predio:hover .placa { border-color: #feae34; color: #fee761; }
.predio.portao .placa { background: #a22633; border-color: #feae34; color: #fff; font-size: calc(.8rem * var(--escala)); }
.predio .exclama {
  display: inline-grid; place-items: center;
  width: 1.1em; height: 1.1em;
  background: #feae34; color: #181425;
  border-radius: 50%;
  font-family: var(--texto);
}
:root[data-movimento="normal"] .predio.novidade .exclama { animation: exclama 1.4s ease-in-out infinite; }
@keyframes exclama { 50% { transform: translateY(-2px) scale(1.15); } }

.balao {
  position: absolute;
  top: 1%;
  padding: .35rem .55rem;
  background: #ead4aa;
  color: #181425;
  border: 2px solid #3e2731;
  border-radius: 8px;
  font-size: calc(.78rem * var(--escala));
  line-height: 1.3;
  box-shadow: 0 3px 8px rgba(0,0,0,.4);
  pointer-events: none;
}
.balao b { display: block; font-family: var(--titulo); font-size: .85em; color: #733e39; }
.balao.solto { left: 50%; transform: translateX(-50%); }

.predio-painel {
  display: grid;
  gap: .8rem;
  padding: .9rem 1rem 1rem;
  background: var(--pedra-clara);
  border: 1px solid #feae34;
  border-radius: 8px;
}
.predio-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.predio-cabeca h3 { margin: 0; color: #fee761; font-family: var(--titulo); }
.dica-rua { text-align: center; }

@media (max-width: 640px) {
  .predio .placa { font-size: calc(.55rem * var(--escala)); padding: .05rem .25rem; }
  .balao { max-width: 60%; font-size: calc(.7rem * var(--escala)); }
}

/* A peça que você já usa, ao lado da que está à venda (relatório 4). */
.peca-atual {
  display: flex; align-items: center; gap: .5rem;
  padding: .35rem .5rem;
  background: rgba(0,0,0,.25);
  border: 1px dashed var(--borda);
  border-radius: 6px;
  text-align: left;
  font-size: calc(.82rem * var(--escala));
  color: var(--apagado);
}
.peca-atual img { width: 40px; height: 40px; image-rendering: pixelated; opacity: .85; border-radius: 4px; }
.peca-atual b { color: #d8ccb4; }

/* A rua viva (Fase 4). */
.rua .gente { position: absolute; image-rendering: pixelated; pointer-events: none; transform-origin: 50% 100%; }
:root[data-movimento="normal"] .rua .gente { animation: respira 2.4s steps(2, jump-none) infinite; }
@keyframes respira { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5%); } }
.rua .chama {
  position: absolute; width: 1.25%; height: 3.5%;
  background: #feae34; box-shadow: 0 0 10px 3px rgba(247,118,34,.55);
  pointer-events: none;
}
:root[data-movimento="normal"] .rua .chama { animation: tremula .5s steps(3, jump-none) infinite alternate; }
@keyframes tremula { 0% { transform: scaleY(1); background: #feae34; } 50% { transform: scaleY(1.25); background: #fee761; } 100% { transform: scaleY(.85); background: #f77622; } }
.rua .fumaca {
  position: absolute; width: 1.5%; height: 3%;
  background: rgba(192,203,220,.55);
  pointer-events: none;
}
:root[data-movimento="normal"] .rua .fumaca { animation: fumaca-sobe 3s steps(6, jump-none) infinite; }
/* Nome próprio: chamada "sobe", ela sobrescrevia a animação dos números que
   flutuam (mesmo nome, a última vence), e o dano subia 4× mais alto. */
@keyframes fumaca-sobe { 0% { transform: translateY(0); opacity: .7; } 100% { transform: translateY(-400%) translateX(60%); opacity: 0; } }

/* A placa do portão encosta na borda direita da rua: centrada, ela era cortada
   no celular ("Entrar na are"). Ancorada à direita, cabe sempre. */
.predio.portao .placa { left: auto; right: 2px; transform: none; }
/* A frase do recibo quebra linha no celular em vez de sair da tela. */
.premio small { flex: 1 1 12rem; min-width: 0; }

.fala-abaixo { display: none; margin: 0; padding: .45rem .65rem; background: #ead4aa; color: #181425; border: 2px solid #3e2731; border-radius: 8px; font-size: calc(.85rem * var(--escala)); }
.fala-abaixo b { color: #733e39; font-family: var(--titulo); }
@media (max-width: 640px) {
  .rua .balao { display: none; }
  .fala-abaixo { display: block; }
}

/* Texto só para o leitor de tela (a fala do ludus, DEC-025). */
.so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ================================================================ DEC-026
   A reforma visual do ludus e das lojas. */

/* Cabeçalho do painel: quem mora ali e para que serve o lugar. */
.predio-cabeca { align-items: center; }
.predio-retrato { width: 64px; height: auto; image-rendering: pixelated; border: 2px solid #5a6988; border-radius: 8px; background: #262b44; }
.predio-titulo { flex: 1; display: grid; gap: .2rem; }
.predio-papel { margin: 0; color: #d8ccb4; font-size: calc(.88rem * var(--escala)); }

/* Espaço na arena: encaixes, não barra. */
.encaixes { display: flex; gap: .35rem; flex-wrap: wrap; }
.encaixe { width: 1.6rem; height: 1.6rem; border: 2px dashed #5a6988; border-radius: 4px; }
.encaixe.cheio { border-style: solid; border-color: #feae34; background: rgba(254,174,52,.25); }

/* Virtudes como cartões. */
.cartoes-virtude { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .8rem; }
.cartao-virtude { display: grid; gap: .45rem; padding: .8rem; background: #1f1813; border: 1px solid var(--borda); border-radius: 8px; }
.cartao-virtude.equipada { border-color: #63c74d; box-shadow: 0 0 0 1px #63c74d inset; }
.cartao-virtude.acessivel { border-color: #feae34; }
.cv-topo { display: flex; gap: .6rem; align-items: center; }
.cv-topo h4 { margin: 0; color: var(--marmore); }
.cv-icone { width: 44px; height: 44px; image-rendering: pixelated; background: #262b44; border-radius: 6px; padding: 4px; }
.pips { display: inline-flex; gap: .25rem; margin-top: .2rem; }
.pips i { width: .7rem; height: .7rem; border-radius: 50%; border: 2px solid #8b9bb4; }
.pips i.aceso { background: #feae34; border-color: #feae34; }
.cv-agora { margin: 0; color: var(--marmore); font-weight: 600; }
.cv-proxima { margin: 0; color: var(--apagado); font-size: calc(.82rem * var(--escala)); }
.cv-acoes { display: flex; flex-wrap: wrap; gap: .4rem; }

/* Muro da Fama: placas. */
.placas { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: .6rem; }
.placa-titulo { display: grid; justify-items: center; gap: .15rem; padding: .7rem .4rem; border-radius: 8px; background: #3a4466; border: 2px solid #5a6988; color: #c0cbdc; text-align: center; }
.placa-titulo .numeral { font-family: var(--titulo); font-size: calc(1.4rem * var(--escala)); }
.placa-titulo small { font-size: calc(.72rem * var(--escala)); opacity: .85; }
.placa-titulo.passada { background: #733e39; border-color: #feae34; color: #fee761; }
.placa-titulo.atual { background: #feae34; border-color: #fee761; color: #181425; box-shadow: 0 0 12px rgba(254,174,52,.5); }
.requisitos { display: grid; gap: .35rem; }
.requisito { display: grid; grid-template-columns: minmax(6rem, auto) 1fr auto; align-items: center; gap: .5rem; font-size: calc(.82rem * var(--escala)); color: #d8ccb4; }
.requisito .barra { height: .5rem; }
.requisito.feito b { color: #63c74d; }

/* Haruspex: cartas de tarô. */
.tarot { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .8rem; }
.carta-fado { display: grid; gap: .45rem; justify-items: center; text-align: center; padding: .9rem .7rem; background: linear-gradient(180deg, #3a2448, #1a1220); border: 2px solid #68386c; border-radius: 10px; }
.carta-fado h4 { margin: 0; color: #fee761; }
.carta-fado .fado-figura { font-size: calc(2.2rem * var(--escala)); line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.carta-fado.escolhida { border-color: #feae34; box-shadow: 0 0 14px rgba(254,174,52,.45); }
.carta-fado.trancada { background: #1f1c24; border-style: dashed; border-color: #5a6988; }
.carta-fado.trancada h4, .carta-fado.trancada .efeito { color: var(--apagado); }
.fado-falta { width: 100%; display: grid; gap: .3rem; text-align: left; }

/* Patronos com retrato. */
.grade-patronos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .8rem; }
.cartao-patrono { display: grid; gap: .4rem; justify-items: center; text-align: center; padding: .7rem; background: #1f1813; border: 1px solid var(--borda); border-radius: 8px; }
.cartao-patrono h4 { margin: 0; color: var(--marmore); }
.cartao-patrono.escolhido { border-color: #63c74d; }
.retrato-patrono { position: relative; width: 84px; height: 84px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 40%, #5a6988, #262b44); border: 2px solid #feae34; display: grid; place-items: end center; }
.retrato-patrono img:first-child { width: 100%; image-rendering: pixelated; }
.retrato-patrono .selo { position: absolute; right: 2px; bottom: 2px; width: 26px; height: 26px; image-rendering: pixelated; background: #181425; border-radius: 50%; padding: 2px; }

/* Contratos como tábuas. */
.tabuas { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.tabua { display: flex; align-items: center; gap: .8rem; padding: .55rem .7rem; background: #2a211c; border: 1px solid var(--borda); border-radius: 8px; }
.tabua.a-cobrar { border-color: #feae34; }
.tabua.pago { opacity: .7; }
.tabua-figura { width: 48px; height: 48px; display: grid; place-items: center; background: #262b44; border-radius: 6px; font-size: 1.6rem; }
.tabua-figura img { max-width: 44px; max-height: 44px; image-rendering: pixelated; }
.tabua-texto { flex: 1; display: grid; gap: .3rem; justify-items: start; }
.tabua-texto .nome { margin: 0; }
.selo-estado { font-weight: 700; color: #63c74d; }
.selo-estado.aberto { color: var(--apagado); font-weight: 400; }

/* Loja: serviços com ícone. */
.opcao.servico { justify-items: center; text-align: center; }
.servico-icone { width: 56px; height: 56px; image-rendering: pixelated; background: #262b44; border-radius: 8px; padding: 6px; }

/* O boneco de equipamento (Tibia). */
.boneco {
  position: relative;
  display: grid;
  grid-template-columns: 64px 96px 64px;
  grid-template-rows: 64px 64px 64px;
  grid-template-areas: ". cima ." "esquerda meio direita" ". . .";
  gap: .35rem;
  justify-content: center;
  padding: .6rem;
  margin: 0 auto .4rem;
  background: #181425;
  border: 1px solid #3a4466;
  border-radius: 10px;
  width: max-content;
}
.boneco-corpo { grid-area: meio; grid-row: 1 / span 3; justify-self: center; align-self: center; height: 190px; image-rendering: pixelated; opacity: .35; pointer-events: none; }
.slot { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 8px; border: 2px dashed #5a6988; background: rgba(38,43,68,.85); position: relative; z-index: 1; }
.slot span { font-size: calc(.68rem * var(--escala)); color: #8b9bb4; }
.slot img { width: 56px; height: 56px; image-rendering: pixelated; border-radius: 6px; }
.slot.cheio { border-style: solid; border-color: #feae34; }
.slot.realce { box-shadow: 0 0 0 2px #fee761; }
.slot-cima { grid-area: cima; justify-self: center; }
.slot-esquerda { grid-area: esquerda; }
.slot-direita { grid-area: direita; }
.slot-meio { grid-area: meio; justify-self: center; align-self: end; }
.requisito .barra i { background: linear-gradient(90deg, #b86f50, #feae34); }

/* Celular: as preferências ganham a linha inteira e quebram. Com a caixa
   "Som" (Fase 5) elas passaram da borda e a página rolava de lado. */
.acesso { min-width: 0; }
@media (max-width: 640px) {
  .acesso { flex: 1 1 100%; gap: .1rem .8rem; }
}
/* A barra da plateia quebra linha na tela estreita: o aviso longo ("Clamor
   pronto · te poupa de um golpe mortal") passava da borda. */
.furia { flex-wrap: wrap; min-width: 0; }
.furia .aviso { white-space: normal; }
/* Celular: as opções vêm duas por linha — uma carta por linha, na largura
   inteira, transformava cada escolha numa rolagem longa. */
@media (max-width: 640px) {
  .opcoes { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .6rem; }
}
.opcao { min-width: 0; }
.peca-arte, .servico-icone { max-width: 100%; height: auto; }
.peca-corpo, .peca-texto { overflow-wrap: anywhere; }
.peca-compra { flex-wrap: wrap; }
.opcao.peca > * { min-width: 0; max-width: 100%; }

/* O Arsenal (DEC-027). */
.armas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .8rem; }
.cartao-arma { display: grid; gap: .45rem; justify-items: center; text-align: center; padding: .8rem; background: #1f1813; border: 2px solid var(--borda); border-radius: 10px; }
.cartao-arma h4 { margin: 0; color: var(--marmore); }
.cartao-arma.escolhida { border-color: #63c74d; box-shadow: 0 0 12px rgba(99,199,77,.3); }
.cartao-arma.trancada { border-style: dashed; opacity: .85; }
.cartao-arma.trancada .arma-figura img { filter: grayscale(1) brightness(.6); }
.arma-figura { position: relative; display: grid; place-items: end center; height: 120px; width: 100%; background: radial-gradient(circle at 50% 70%, #3a4466, #181425); border-radius: 8px; }
.arma-figura img:first-child { height: 112px; image-rendering: pixelated; }
.arma-objeto { position: absolute; right: 6px; top: 6px; width: 48px; height: 48px; image-rendering: pixelated; border-radius: 6px; border: 1px solid #5a6988; }
.arma-linha { margin: 0; font-size: calc(.85rem * var(--escala)); color: #d8ccb4; }
.arma-linha b { color: #fee761; }
.slot.arma { position: relative; }
.selo-reforco { position: absolute; right: -8px; bottom: -8px; width: 30px !important; height: 30px !important; border: 2px solid #feae34; border-radius: 6px; background: #181425; }

/* O Arsenal enxuto (DEC-029): carta em miniatura e Clamor em fichas. */
.arma-carta { width: 100%; display: grid; justify-items: center; }
.arma-carta .carta { width: 10.5rem; min-width: 0; }
.arma-clamor { display: grid; justify-items: center; gap: .25rem; width: 100%; padding: .4rem .5rem; background: #181425; border: 1px solid #feae34; border-radius: 10px; }
.arma-clamor-rotulo { font-family: var(--titulo); font-size: calc(.78rem * var(--escala)); color: #fee761; letter-spacing: .05em; }
.cartao-arma { align-content: start; }

/* O menu (DEC-033). */
.menu { text-align: center; justify-items: center; padding: 2.5rem 0; gap: 1rem; }
.menu h2 { font-size: calc(2.4rem * var(--escala)); text-transform: uppercase; letter-spacing: .08em; color: var(--areia); margin: 0; }
.menu-heroi { width: 7rem; image-rendering: pixelated; }
.menu-opcoes { display: grid; gap: .8rem; justify-items: center; width: min(22rem, 100%); }
.menu-opcoes .btn { width: 100%; }
.menu-resumo { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; }
.menu-opcoes.confirmar .aviso { margin: 0; color: var(--areia); }
.btn.menu-topo { margin-right: auto; }

/* Depois do golpe final (DEC-034): a recompensa aparece, mas só aceita clique
   quando o bicho terminou de cair. */
.palco.segurando .opcoes, .palco.segurando .opcao, .palco.segurando .bancada, .palco.segurando .btn:not(.menu-topo) {
  pointer-events: none;
}
.palco.segurando .opcoes, .palco.segurando .opcao { opacity: .35; }
.palco .opcoes, .palco .opcao { transition: opacity .25s ease-out; }

/* A Fúria em três partes (DEC-037): cada parte acesa é um especial pronto. */
.furia-partes { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem; min-width: 6rem; }
.furia .barra.furia-parte { height: .8rem; border-radius: 3px; }
.furia .barra.furia-parte i { background: linear-gradient(90deg, #a22633, #f77622); transition: width var(--transicao); }
.furia .barra.furia-parte.acesa i { background: linear-gradient(90deg, #f77622, #fee761); box-shadow: 0 0 8px #f77622; }
.furia.pronta { border-color: #f77622; }
.furia.cheia { box-shadow: 0 0 16px rgba(254,231,97,.7); }
.btn.clamor.supremo.pronto { background: #fee761; color: #181425; border-color: #fee761; }

/* ------------------------------------------------------------------
   Raridade (DEC-038, pesquisa v5): bronze, ferro, ouro, púrpura imperial.
   Cor **e** ornamento — nunca só cor: moldura lisa; rebites nos cantos;
   moldura dupla com brilho passando; púrpura com gema e aura. */
.rar-bronze { --rar: #b86f50; --rar-claro: #e4a672; }
.rar-ferro { --rar: #8b9bb4; --rar-claro: #c0cbdc; }
.rar-ouro { --rar: #feae34; --rar-claro: #fee761; }
.rar-purpura { --rar: #9b1d5c; --rar-claro: #e060a8; }
.opcao.rar-bronze, .opcao.rar-ferro, .opcao.rar-ouro, .opcao.rar-purpura,
.medalhao, .slot.cheio[class*="rar-"] { border: 2px solid var(--rar); position: relative; }
.opcao.rar-ferro::before, .slot.rar-ferro::before, .medalhao.rar-ferro::before {
  content: ""; position: absolute; inset: 3px; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(circle, var(--rar-claro) 1.6px, transparent 2px) top left / 10px 10px no-repeat,
    radial-gradient(circle, var(--rar-claro) 1.6px, transparent 2px) top right / 10px 10px no-repeat,
    radial-gradient(circle, var(--rar-claro) 1.6px, transparent 2px) bottom left / 10px 10px no-repeat,
    radial-gradient(circle, var(--rar-claro) 1.6px, transparent 2px) bottom right / 10px 10px no-repeat;
}
.opcao.rar-ouro, .slot.rar-ouro, .medalhao.rar-ouro { border-style: double; border-width: 4px; }
.opcao.rar-ouro::after, .slot.rar-ouro::after, .medalhao.rar-ouro::after, .carta.rar-purpura::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 35%, rgba(255,248,200,.35) 50%, transparent 65%) -150% 0 / 200% 100% no-repeat;
}
:root[data-movimento="normal"] .opcao.rar-ouro::after,
:root[data-movimento="normal"] .slot.rar-ouro::after,
:root[data-movimento="normal"] .medalhao.rar-ouro::after,
:root[data-movimento="normal"] .carta.rar-purpura::after { animation: rar-brilho 3.2s ease-in-out infinite; }
@keyframes rar-brilho { 60%, 100% { background-position: 150% 0; } }
.carta.rar-purpura { box-shadow: 0 0 0 2px var(--rar), 0 0 16px rgba(224,96,168,.55); }
.carta.rar-purpura .nome::before { content: "♛ "; color: var(--rar-claro); }

/* O nível em bolinhas. */
.pips { display: inline-flex; gap: 3px; vertical-align: middle; }
.pips i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid #feae34; background: transparent; }
.pips i.cheio { background: #feae34; box-shadow: 0 0 4px #feae34; }
.slot .pips { position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); background: #181425; padding: 1px 4px; border-radius: 6px; }

/* O boneco com os totais ao lado. */
.equipamento { display: flex; gap: 1rem; align-items: center; justify-content: center; flex-wrap: wrap; }
.boneco-totais { display: grid; gap: .45rem; }
.boneco-totais .total { display: flex; align-items: center; gap: .4rem; padding: .3rem .6rem; background: #181425; border: 1px solid #3a4466; border-radius: 8px; min-width: 5.5rem; }
.boneco-totais .total img { width: 24px; height: 24px; image-rendering: pixelated; }
.boneco-totais .total b { font-family: var(--titulo); font-size: calc(1.3rem * var(--escala)); color: var(--marmore); }

/* Fichas da peça: ícone e número, com o antes → depois da melhoria. */
.fichas-peca { justify-content: flex-start; flex-wrap: wrap; }
.fichas-peca .ficha-por { width: 16px !important; height: 16px !important; opacity: .85; }
.fichas-peca .antes { color: var(--apagado); text-decoration: line-through; }
.fichas-peca .sobe { color: #63c74d; font-weight: 700; }
.opcao.peca.melhoria { box-shadow: 0 0 0 1px #63c74d inset; }
.peca-atual { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; opacity: .85; }
.peca-atual .troca { font-size: 1.2rem; color: var(--apagado); }

/* O ferreiro: medalhão da marca e as cartas-alvo em imagem. */
.marca-topo { display: flex; gap: .8rem; align-items: center; }
.medalhao { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #3a4466, #181425); flex: none; }
.medalhao-cara { font-size: 2rem; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.medalhao-cabe { position: absolute; bottom: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%; background: #181425; border: 2px solid var(--rar); display: grid; place-items: center; font-size: .7rem; color: var(--marmore); }
.medalhao-cabe img { width: 18px; height: 18px; image-rendering: pixelated; }
.alvos-cartas { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .7rem; }
.alvo-carta { position: relative; }
.alvo-carta .carta { width: 8.5rem; min-width: 0; }
.alvo-carta .carta.clicavel:not(.impedida) { animation: none; box-shadow: 0 0 0 2px #63c74d; }
:root[data-movimento="normal"] .alvo-carta .carta.clicavel:not(.impedida) { animation: alvo-pulsa 1.6s ease-in-out infinite; }
@keyframes alvo-pulsa { 50% { box-shadow: 0 0 0 2px #63c74d, 0 0 14px rgba(99,199,77,.7); } }
.alvo-carta .copias { position: absolute; top: -8px; right: -8px; background: #feae34; color: #181425; border-radius: 999px; padding: 0 .4rem; font-weight: 700; }
.trancadas { margin-top: .4rem; }

/* O ferreiro em faixas largas: a marca à esquerda, as cartas lado a lado. */
.bancada-ferreiro .opcoes { grid-template-columns: 1fr !important; }
.bancada-ferreiro .gravacao-oferta { display: grid; grid-template-columns: minmax(12rem, 16rem) 1fr; gap: .8rem 1.2rem; align-items: start; }
.bancada-ferreiro .gravacao-oferta .alvos-cartas { margin-top: 0; }
.bancada-ferreiro .gravacao-oferta .trancadas { grid-column: 2; }
@media (max-width: 640px) { .bancada-ferreiro .gravacao-oferta { grid-template-columns: 1fr; } .bancada-ferreiro .gravacao-oferta .trancadas { grid-column: 1; } }
.equipamento .boneco { margin: 0; }

/* O favor do patrono (DEC-040): nível, selo FECHA, nome do patrono em cima. */
.cartao-patrono { position: relative; }
.cartao-patrono .patrono-nome { margin: 0; font-size: calc(.75rem * var(--escala)); color: var(--apagado); letter-spacing: .04em; text-transform: uppercase; }
.selo-fecha, .selo-novo { position: absolute; top: .5rem; right: .5rem; padding: .1rem .45rem; border-radius: 4px; font-family: var(--titulo); font-size: calc(.7rem * var(--escala)); letter-spacing: .08em; }
.selo-fecha { background: #fee761; color: #181425; box-shadow: 0 0 10px rgba(254,231,97,.7); }
.selo-novo { background: #3a4466; color: var(--marmore); }
.marca.exposto { color: #ff8a7a; }

/* Os aspectos da arma (Fase C, DEC-041). */
.aspectos { display: grid; gap: .5rem; width: 100%; margin-top: .4rem; }
.aspecto { display: grid; grid-template-columns: auto 1fr; gap: .15rem .5rem; align-items: center; padding: .45rem .55rem; border-radius: 8px; background: #181425; text-align: left; }
.aspecto.apagado { opacity: .6; }
.aspecto.escolhido { box-shadow: 0 0 0 2px #63c74d; }
.aspecto-cara { grid-row: span 3; font-size: 1.6rem; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.aspecto-nome { font-family: var(--titulo); font-size: calc(.82rem * var(--escala)); }
.aspecto-texto { grid-column: 2; font-size: calc(.78rem * var(--escala)); color: var(--areia); }
.aspecto-acoes { grid-column: 1 / -1; display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.aspecto-acoes .btn { padding: .3rem .7rem; }
.ganho.trofeus { display: flex; align-items: center; justify-content: center; gap: .3rem; }

/* O COMBO (plano v6, Fase A). O combo é a cadeia: COMBO ×3 = dano ×3. Fica
   no alto, sobre o herói, grande o bastante para ser lido sem procurar; a cor
   esquenta a cada degrau. Sob "Menos movimento" aparece, mas não pula. */
.combo {
  --c: #fee761;
  position: absolute;
  left: 2.5%;
  top: 6%;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: .1rem;
  padding: .45rem .9rem .5rem;
  border-radius: 12px;
  background: radial-gradient(ellipse at center, rgba(20, 10, 6, .82), rgba(20, 10, 6, .55) 70%, transparent);
  line-height: 1;
  pointer-events: none;
  color: var(--c);
  font-family: var(--titulo);
  text-shadow: 0 2px 0 #1b0f0a, 0 0 10px color-mix(in srgb, var(--c) 55%, transparent);
  transform-origin: left center;
}
.combo[hidden] { display: none; }
.combo-palavra { font-size: calc(.95rem * var(--escala)); letter-spacing: .25em; color: #f4e6c8; font-weight: 700; }
.combo-numero { font-size: calc(3.6rem * var(--escala)); font-weight: 800; }
.combo-rotulo { font-size: calc(1.15rem * var(--escala)); font-style: italic; font-weight: 700; }
.combo.d3 { --c: #feae34; }
.combo.d4 { --c: #f77622; }
.combo.d4 .combo-numero { font-size: calc(4.1rem * var(--escala)); }
.combo.d5 { --c: #e43b44; }
.combo.d5 .combo-numero { font-size: calc(4.6rem * var(--escala)); }
.combo.d6 { --c: #ff6ad5; }
.combo.d6 .combo-numero { font-size: calc(5rem * var(--escala)); }
.combo.racha { --c: #9a9a95; }
.combo.racha .combo-rotulo { color: #ff7a7a; }
:root[data-movimento="normal"] .combo.sobe { animation: combo-sobe .42s cubic-bezier(.2, 1.6, .4, 1); }
:root[data-movimento="normal"] .combo.racha { animation: combo-racha .65s ease-in forwards; }
:root[data-movimento="normal"] .combo.d6 .combo-numero { animation: combo-lenda .9s ease-in-out infinite alternate; }
@keyframes combo-sobe {
  0%   { transform: scale(1.9) rotate(-6deg); filter: brightness(2.2); }
  60%  { transform: scale(.92) rotate(1deg); }
  100% { transform: scale(1) rotate(0); filter: none; }
}
@keyframes combo-racha {
  0%   { transform: translate(0, 0) rotate(0); opacity: 1; }
  15%  { transform: translate(-4px, 0) rotate(-3deg); }
  30%  { transform: translate(4px, 0) rotate(3deg); }
  100% { transform: translate(0, 40px) rotate(12deg); opacity: 0; }
}
@keyframes combo-lenda { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(60deg) brightness(1.3); } }
@media (max-width: 520px) {
  .combo { padding: .2rem .5rem; }
  .combo-palavra { font-size: calc(.65rem * var(--escala)); }
  .combo-rotulo { font-size: calc(.8rem * var(--escala)); }
  .combo-numero { font-size: calc(2rem * var(--escala)); }
  .combo.d4 .combo-numero, .combo.d5 .combo-numero, .combo.d6 .combo-numero { font-size: calc(2.4rem * var(--escala)); }
}

/* Na mão: a carta que continua o combo leva "▲ combo"; a que quebra, "✕". */
/* A lendária usa o mesmo `::after` para o reflexo (`inset: 0`, animação): sem
   desfazer isso o selo virava uma pílula do tamanho da carta, uma "bola
   amarela" no lugar dela (achado do dono na lendária, 2026-10-04). */
.carta.cadeia-sobe::after, .carta.cadeia-quebra::after, .carta.cadeia-mantem::after {
  position: absolute;
  inset: auto;
  animation: none;
  top: -.6rem;
  right: -.4rem;
  padding: .1rem .4rem;
  border-radius: 999px;
  font-family: var(--titulo);
  font-size: calc(.72rem * var(--escala));
  font-weight: 700;
  pointer-events: none;
}
.carta.cadeia-sobe::after { content: "▲ combo"; background: #e8c25a; color: #2a1608; z-index: 2; }
.carta.cadeia-quebra::after { content: "✕"; background: var(--sangue); color: #fff; }
/* A livre também diz o que faz no combo (o dono a viu como "uma bola bege"
   sem sentido): não sobe, mas não quebra. */
.carta.cadeia-mantem::after { content: "= combo"; background: #d8d8d0; color: #2a2a26; }

/* A parte da Fúria quase acesa chama o especial (DEC-062). */
.furia .barra.furia-parte.quase i { background: linear-gradient(90deg, #e43b44, #feae34); }
:root[data-movimento="normal"] .furia .barra.furia-parte.quase { animation: furia-chama .7s ease-in-out infinite alternate; }
@keyframes furia-chama { from { box-shadow: 0 0 0 rgba(247,118,34,0); } to { box-shadow: 0 0 10px rgba(247,118,34,.9); } }

/* COMBO 7+ (DEC-063): o fecho é dourado e ainda maior. */
.combo.d7 { --c: #fee761; }
.combo.d7 .combo-numero { font-size: calc(5.6rem * var(--escala)); }
@media (max-width: 520px) { .combo.d7 .combo-numero { font-size: calc(2.6rem * var(--escala)); } }

/* A cerimônia das recompensas (DEC-063, festa.js). Não bloqueia o clique. */
.festa { position: fixed; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 60; }
.festa-cartao {
  --festa-cor: #fee761;
  display: grid; justify-items: center; gap: .15rem;
  padding: .9rem 1.6rem; border-radius: 12px;
  background: rgba(24,14,10,.92); border: 3px solid var(--festa-cor);
  box-shadow: 0 0 24px color-mix(in srgb, var(--festa-cor) 60%, transparent), 0 10px 30px rgba(0,0,0,.6);
  text-align: center; font-family: var(--titulo);
  animation: festa-entra 1s ease-out both;
}
.festa-cartao.rara { animation-duration: 1.3s; box-shadow: 0 0 40px var(--festa-cor), 0 10px 30px rgba(0,0,0,.6); }
.festa-icone { font-size: calc(2.6rem * var(--escala)); line-height: 1; }
.festa-titulo { font-size: calc(1.5rem * var(--escala)); color: var(--festa-cor); text-shadow: 0 2px 0 #140d0a; }
.festa-sub { font-size: calc(1rem * var(--escala)); color: #f4e6c8; }
.festa-nota { font-size: calc(.9rem * var(--escala)); color: #feae34; }
.festa-p {
  position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; background: var(--c);
  animation: festa-voa .9s ease-out both;
}
.festa-cartao.rara ~ .festa-p { width: 9px; height: 9px; }
@keyframes festa-entra {
  0% { transform: scale(.3) rotate(-6deg); opacity: 0; }
  14% { transform: scale(1.18) rotate(2deg); opacity: 1; }
  24% { transform: scale(1) rotate(0); }
  80% { transform: scale(1); opacity: 1; }
  100% { transform: scale(.92) translateY(-14px); opacity: 0; }
}
@keyframes festa-voa {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 90px)) scale(.4); opacity: 0; }
}
/* O Troféu da tela do fim desce girando (momento 10). */
:root[data-movimento="normal"] .ganho.trofeus img { animation: trofeu-desce 1.1s cubic-bezier(.2,.9,.3,1.2) .4s both; }
@keyframes trofeu-desce {
  0% { transform: translateY(-60px) rotateY(0) scale(1.6); opacity: 0; }
  60% { transform: translateY(4px) rotateY(540deg) scale(1.1); opacity: 1; }
  100% { transform: translateY(0) rotateY(720deg) scale(1); }
}


/* ================================================================== NANQUIM
   A casca em nanquim (DEC-067, Fase B do plano v7). A mesma linguagem das
   cartas (`nanquim.js`) levada ao CSS: borda de tinta, sombra em bloco (dura,
   deslocada, sem desfoque), dois ou três tons chapados, filete claro por
   dentro e losangos nos cantos — só em carta, painel e medalhão; botão não
   leva losango (decisão do dono). Fica no fim do arquivo para vencer as regras
   antigas sem reescrevê-las. */

:root {
  --tinta: #0d0605;
  --placa: #2e211a;
  --placa-luz: #3d2c22;
  --losango: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 .9 11.1 6 6 11.1 .9 6Z' fill='%23d4a548' stroke='%230d0605' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sombra-bloco: 0 3px 0 var(--tinta);
  /* O contorno do texto não clareia no alto contraste: texto claro precisa
     de contorno escuro em qualquer modo (revisão de 2026-10-04). */
  --contorno-texto: #0d0605;
}
:root[data-contraste="alto"] {
  /* Tinta quase preta some no fundo preto: no modo alto o contorno vira claro. */
  --tinta: #ffe9b8;
  --placa: #14100d;
  --placa-luz: #221a14;
}

/* --- botão-placa: tinta em volta, faixa clara em cima, sombra em bloco. */
.btn {
  background: linear-gradient(180deg, var(--placa-luz) 0 46%, var(--placa) 46%);
  border: 2px solid var(--tinta);
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255,236,200,.18), inset 0 0 0 1px rgba(201,162,79,.28), var(--sombra-bloco);
  text-shadow: 0 1px 0 var(--contorno-texto);
  transition: transform var(--transicao), box-shadow var(--transicao), filter var(--transicao);
}
.btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #4a3628 0 46%, #382920 46%);
  border-color: var(--tinta);
  box-shadow: inset 0 1px 0 rgba(255,236,200,.25), inset 0 0 0 1px var(--bronze), var(--sombra-bloco);
}
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,236,200,.18), inset 0 0 0 1px rgba(201,162,79,.28), 0 1px 0 var(--tinta); }
.btn.forte {
  background: linear-gradient(180deg, #c8343a 0 46%, #a8242c 46%);
  border-color: var(--tinta);
  color: #fff6e8;
  box-shadow: inset 0 1px 0 rgba(255,200,180,.4), inset 0 0 0 1px #e6524e, var(--sombra-bloco);
}
.btn.forte:hover:not(:disabled) { background: linear-gradient(180deg, #dc4248 0 46%, #b82c34 46%); filter: none; }
.btn.fantasma { background: none; border-color: transparent; box-shadow: none; text-shadow: none; }
.btn.fantasma:hover:not(:disabled) { background: none; border-color: transparent; box-shadow: none; color: var(--areia); text-decoration: underline; }

/* --- painel: placa escura com filete de bronze e losangos nos quatro cantos. */
.opcao:not(.carta-opcao), .prateleira, .acesso-gaveta[open] > .acesso, .heroi {
  background:
    var(--losango) left 4px top 4px / 10px no-repeat,
    var(--losango) right 4px top 4px / 10px no-repeat,
    var(--losango) left 4px bottom 4px / 10px no-repeat,
    var(--losango) right 4px bottom 4px / 10px no-repeat,
    linear-gradient(180deg, rgba(255,236,200,.05), rgba(0,0,0,0) 40%),
    var(--placa);
  border: 2px solid var(--tinta);
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px rgba(201,162,79,.35), var(--sombra-bloco);
}
/* A prateleira guarda a cor da categoria no filete e no título. */
.prateleira { border-left: 2px solid var(--tinta); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--cor-prateleira) 55%, transparent), var(--sombra-bloco); padding: .7rem .9rem 1rem; }
.prateleira .opcao:not(.carta-opcao) { background-color: color-mix(in srgb, var(--placa) 85%, #000); }
.prateleira-servicos .opcao { border-style: solid; box-shadow: inset 0 0 0 2px rgba(138,154,90,.5), var(--sombra-bloco); }

/* --- título de tela: placa em fita, losango em cada ponta. */
.tela > h2 {
  /* Largura do texto e o alinhamento da tela: à esquerda nas telas comuns,
     no centro nas que centram (menu, fim, ludus). */
  justify-self: auto;
  width: fit-content;
  max-width: 100%;
  position: relative;
  padding: .3rem 1.6rem;
  background: linear-gradient(180deg, #5a1e18 0 50%, #48160f 50%);
  border: 2px solid var(--tinta);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px #c9a24f88, var(--sombra-bloco);
  color: #fff0c8;
  text-shadow: 0 2px 0 var(--contorno-texto);
}
.tela > h2::before, .tela > h2::after {
  content: ""; position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px;
  background: var(--losango) center / contain no-repeat;
}
.tela > h2::before { left: 5px; }
.tela > h2::after { right: 5px; }
/* Título de bancada: fita curta de bronze com tinta. */
.bancada { border-top: 0; }
.bancada > h3 {
  justify-self: start;
  padding: .15rem .8rem;
  background: linear-gradient(180deg, #d4a548 0 50%, #b88a34 50%);
  color: #1e130c;
  border: 2px solid var(--tinta);
  border-radius: 3px;
  box-shadow: var(--sombra-bloco);
  text-shadow: 0 1px 0 rgba(255,240,190,.5);
}
.bancada.fala {
  border: 2px solid var(--tinta);
  border-left: 5px solid var(--bronze);
  border-radius: 6px;
  background: var(--placa);
  padding: .5rem .9rem;
  box-shadow: var(--sombra-bloco);
}

/* --- a carta: tinta por fora, filete da família por dentro, losangos da cor
   da família nos cantos, sombra em bloco. */
.carta {
  background:
    var(--losango-fam, var(--losango)) left 4px top 4px / 9px no-repeat,
    var(--losango-fam, var(--losango)) right 4px top 4px / 9px no-repeat,
    var(--losango-fam, var(--losango)) left 4px bottom 4px / 9px no-repeat,
    var(--losango-fam, var(--losango)) right 4px bottom 4px / 9px no-repeat,
    linear-gradient(180deg, #33261d 0 30%, #261c16 30%);
  border: 2px solid var(--tinta);
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px var(--fam), inset 0 0 0 3px var(--tinta), 0 4px 0 var(--tinta);
}
.carta.clicavel:hover { box-shadow: inset 0 0 0 2px var(--fam-claro), inset 0 0 0 3px var(--tinta), 0 0 0 2px var(--fam-claro), 0 8px 0 var(--tinta); }
.carta.familia-ataque { --losango-fam: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 .9 11.1 6 6 11.1 .9 6Z' fill='%23ff8a4a' stroke='%230d0605' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.carta.familia-bloqueio { --losango-fam: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 .9 11.1 6 6 11.1 .9 6Z' fill='%238fe6ff' stroke='%230d0605' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.carta.familia-espetaculo { --losango-fam: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 .9 11.1 6 6 11.1 .9 6Z' fill='%23ffe07a' stroke='%230d0605' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.carta.familia-energia { --losango-fam: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 .9 11.1 6 6 11.1 .9 6Z' fill='%23e0a8ff' stroke='%230d0605' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.carta.familia-livre { --losango-fam: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 .9 11.1 6 6 11.1 .9 6Z' fill='%23ffffff' stroke='%230d0605' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E"); border-style: dashed; }
.carta.familia-utilidade { --losango-fam: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 .9 11.1 6 6 11.1 .9 6Z' fill='%23d0ff8a' stroke='%230d0605' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.carta .arte { border: 2px solid var(--tinta); box-shadow: none; }
/* O custo num medalhão de bronze chapado em três tons. */
.carta .custo {
  background: radial-gradient(circle at 34% 30%, #fff0b0 0 16%, #d4a548 17% 60%, #8a5e1c 61% 74%, #5a3a10 75%);
  border: 2.5px solid var(--tinta);
  color: #1e130c;
  text-shadow: 0 1px 0 rgba(255,240,190,.6);
  box-shadow: 0 2px 0 var(--tinta);
}
.carta.familia-livre .custo { background: radial-gradient(circle at 34% 30%, #ffffff 0 16%, #c8c8c0 17% 60%, #7a7a72 61% 74%, #4a4a44 75%); }
/* A faixa do nome: fita chapada na cor escura da família, com tinta. */
.carta .nome {
  background: color-mix(in srgb, var(--fam) 55%, #140c08);
  border-block: 2px solid var(--tinta);
  margin-inline: -.1rem;
  text-shadow: 0 2px 0 var(--contorno-texto);
}

/* --- número grande com contorno de tinta (fichas da carta e do herói). */
.ficha-efeito b {
  text-shadow:
    -1.5px -1.5px 0 var(--contorno-texto), 1.5px -1.5px 0 var(--contorno-texto), -1.5px 1.5px 0 var(--contorno-texto), 1.5px 1.5px 0 var(--contorno-texto),
    0 -2px 0 var(--contorno-texto), 0 2px 0 var(--contorno-texto), -2px 0 0 var(--contorno-texto), 2px 0 0 var(--contorno-texto), 0 3px 0 var(--contorno-texto);
}

/* --- o painel de dentro da prateleira não repete os losangos: painel em
   painel com oito losangos é ruído. */
.prateleira .opcao:not(.carta-opcao) {
  background: linear-gradient(180deg, rgba(255,236,200,.05), rgba(0,0,0,0) 40%), color-mix(in srgb, var(--placa) 85%, #000);
}

/* --- HUD do combate (Fase D). Vida em barra de tinta com faixa de luz,
   energia em gemas roxas (a cor da família energia), sem a palavra. */
.icone-hud { width: 22px; height: 22px; vertical-align: -5px; margin-right: .25rem; image-rendering: pixelated; }
.icone-hud.liso { image-rendering: auto; }
.vida-numero { font-family: var(--titulo); font-weight: 700; font-size: calc(1.05rem * var(--escala)); text-shadow: 0 2px 0 var(--contorno-texto); }
.vitais .barra.vida {
  height: .85rem;
  background: #1a100c;
  border: 2px solid var(--tinta);
  border-radius: 999px;
  box-shadow: 0 2px 0 var(--tinta), inset 0 2px 0 rgba(0,0,0,.5);
}
.heroi .barra.vida i {
  background: linear-gradient(180deg, #b8e070 0 30%, #6f9a3a 30% 72%, #3e6020 72%);
  border-right: 2px solid var(--tinta);
}
.heroi .barra.vida.baixa i { background: linear-gradient(180deg, #ff8a6a 0 30%, #c8343a 30% 72%, #7a1418 72%); }
.escudo { display: inline-flex; align-items: center; font-family: var(--titulo); font-weight: 700; font-size: calc(1.05rem * var(--escala)); color: #cfe6f8; text-shadow: 0 2px 0 var(--contorno-texto); }
.energia::before { content: none; }
.energia { gap: .3rem; }
.energia i {
  width: 1.15rem; height: 1.15rem;
  border-radius: 2px;
  transform: rotate(45deg) scale(.82);
  background: linear-gradient(135deg, #f0c8ff 0 22%, #b070e8 22% 60%, #6a2a9a 60%);
  border: 2px solid var(--tinta);
  box-shadow: 0 0 8px rgba(192,106,255,.55);
}
.energia i.gasta { background: #1f1528; border-color: var(--tinta); box-shadow: inset 0 0 0 1px #4a3a5a; }
.build-toggle { opacity: .85; }

/* --- a Fúria em três cápsulas de fogo, cada uma com tinta. */
.furia {
  background: var(--placa);
  border: 2px solid var(--tinta);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(201,162,79,.3), var(--sombra-bloco);
}
.furia .barra.furia-parte {
  height: .95rem;
  background: #1a0d0a;
  border: 2px solid var(--tinta);
  border-radius: 999px;
  box-shadow: inset 0 2px 0 rgba(0,0,0,.5);
}
.furia .barra.furia-parte i { background: linear-gradient(180deg, #ff9a4a 0 30%, #c8341a 30% 72%, #7a1408 72%); }
.furia .barra.furia-parte.acesa i { background: linear-gradient(180deg, #fff2a0 0 30%, #ffb02a 30% 72%, #e05a10 72%); box-shadow: 0 0 10px #f77622; }
.furia.cheia { border-color: var(--tinta); box-shadow: inset 0 0 0 1px #f77622, 0 0 16px rgba(247,118,34,.55), var(--sombra-bloco); }
.furia .numero { text-shadow: 0 2px 0 var(--contorno-texto); }

/* --- o especial e o Grande como medalhões: ponta redonda, ouro chapado
   quando acende. O pulso continua só com movimento normal. */
.btn.clamor { border-radius: 999px; }
.btn.clamor.pronto {
  background: linear-gradient(180deg, #fff2a0 0 40%, #ffcf3a 40% 76%, #c27a10 76%);
  color: #1e130c;
  border: 2px solid var(--tinta);
  text-shadow: 0 1px 0 rgba(255,240,190,.6);
  box-shadow: inset 0 0 0 1px #fff6c0, 0 0 14px rgba(255,210,74,.6), var(--sombra-bloco);
}
.btn.clamor.supremo.pronto { background: linear-gradient(180deg, #fffbe0 0 40%, #fee761 40% 76%, #e8a020 76%); color: #1e130c; border-color: var(--tinta); }

/* --- menu (Fase E): o brasão em nanquim e o título em fita, centrados. */
.menu-emblema { width: min(20rem, 80vw); height: auto; display: block; margin-bottom: -1.2rem; }
.tela.menu > h2 { padding: .35rem 2.4rem; }
.tela.menu > h2::before { left: 9px; } .tela.menu > h2::after { right: 9px; }

/* --- os cartões da rua guardam a cor própria (fado roxo, placa azul...) e
   ganham a tinta e a sombra em bloco do resto da casca. */
.cartao-patrono, .cartao-arma, .carta-fado, .placa-titulo {
  border: 2px solid var(--tinta);
  box-shadow: inset 0 0 0 2px rgba(255,236,200,.12), var(--sombra-bloco);
}
.cartao-patrono, .cartao-arma {
  background:
    var(--losango) left 4px top 4px / 9px no-repeat,
    var(--losango) right 4px top 4px / 9px no-repeat,
    var(--losango) left 4px bottom 4px / 9px no-repeat,
    var(--losango) right 4px bottom 4px / 9px no-repeat,
    var(--placa);
  box-shadow: inset 0 0 0 2px rgba(201,162,79,.35), var(--sombra-bloco);
}

/* --- o balão de fala: papel claro, tinta grossa, sombra em bloco. */
.balao { border: 2px solid #0d0605; box-shadow: 0 3px 0 #0d0605; background: linear-gradient(180deg, #f4e4c0 0 60%, #e6cfa0 60%); }

/* --- ícones, peças e armas em nanquim (Fase C) são desenho liso em 3×:
   reduzidos com `pixelated` o traço serrilha. Os retratos de bicho e os
   sprites da arena continuam pixel. */
.delta img, .ficha-efeito img, .furia .rotulo-icone, .recurso img, .preco img, .cv-icone,
.retrato-patrono .selo, .tabua-figura img, .servico-icone, .boneco-totais .total img,
.medalhao-cabe img, .peca-atual img, .slot img, .arma-objeto, .peca-arte, .icone-hud,
.selo-reforco, .ficha-por img, .ficha-por { image-rendering: auto; }

/* --- a rua em nanquim (Fase G): cena e pessoas lisas; o prédio em foco
   ganha a aura quente e a luz de contorno do sol, que vem da direita. */
.rua-cena, .rua .gente { image-rendering: auto; }
.predio:hover, .predio:focus-visible { background: radial-gradient(ellipse at 50% 60%, rgba(255,179,90,.22), transparent 70%); box-shadow: inset -2px 0 0 #ffb35a; }
.rua .fumaca { border-radius: 50%; }

/* --- os bustos em nanquim (Fase E) são medalhões redondos e lisos: sem
   pixelated e sem a placa quadrada por baixo. */
.retrato-patrono img:first-child, .predio-retrato { image-rendering: auto; }
.predio-retrato { border: 0; background: none; border-radius: 50%; }

/* --- o painel do prédio é painel (losangos); as virtudes e os contratos
   dentro dele são placas sem losango, e o estado (pode treinar, na arena)
   fica no filete de dentro. */
.predio-painel {
  background:
    var(--losango) left 5px top 5px / 11px no-repeat,
    var(--losango) right 5px top 5px / 11px no-repeat,
    var(--losango) left 5px bottom 5px / 11px no-repeat,
    var(--losango) right 5px bottom 5px / 11px no-repeat,
    var(--placa);
  border: 2px solid var(--tinta);
  box-shadow: inset 0 0 0 2px #feae3466, var(--sombra-bloco);
}
.virtude, .contrato-ludus {
  background: color-mix(in srgb, var(--placa) 80%, #000);
  border: 2px solid var(--tinta);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(201,162,79,.22), var(--sombra-bloco);
}
.virtude.acessivel { border-color: var(--tinta); box-shadow: inset 0 0 0 2px var(--bronze), var(--sombra-bloco); }
.cartao-virtude { border: 2px solid var(--tinta); background: color-mix(in srgb, var(--placa) 80%, #000); box-shadow: inset 0 0 0 1px rgba(201,162,79,.3), var(--sombra-bloco); }
.cartao-virtude.equipada { border-color: var(--tinta); box-shadow: inset 0 0 0 2px #63c74d, var(--sombra-bloco); }
.cartao-virtude.acessivel { border-color: var(--tinta); box-shadow: inset 0 0 0 2px #feae34, var(--sombra-bloco); }
.cartao-virtude.equipada.acessivel { box-shadow: inset 0 0 0 2px #63c74d, var(--sombra-bloco); }

/* --- o boneco da armaria: placa de tinta, encaixes com tinta tracejada. */
.boneco { border: 2px solid var(--tinta); box-shadow: inset 0 0 0 2px rgba(143,184,216,.25), var(--sombra-bloco); }
.slot { border-color: #5a698899; box-shadow: 0 2px 0 var(--tinta); }
.boneco-totais .total { border: 2px solid var(--tinta); box-shadow: var(--sombra-bloco); background: var(--placa); }
.boneco-totais .total b { text-shadow: 0 2px 0 var(--contorno-texto); }

/* --- glifos: os emojis trocados pelos desenhos em nanquim (DEC-068). Do
   tamanho da letra em volta, assentados na linha do texto. */
img.glifo { height: 1.25em; width: auto; vertical-align: -.25em; image-rendering: auto; display: inline-block; }
.portao-icone img.glifo, .medalhao-cara img.glifo, .fado-figura img.glifo, .aspecto-cara img.glifo, .tabua-figura img.glifo { height: 1.1em; vertical-align: middle; }

/* --- portões em arco de pedra com tinta; serviços em medalhão (DEC-068). */
.portao-arco {
  border: 3px solid var(--tinta);
  border-radius: 3.5rem 3.5rem 6px 6px;
  background:
    radial-gradient(ellipse at 50% 70%, rgba(254,174,52,.35), transparent 65%),
    linear-gradient(180deg, #1a100c, #0d0605 70%);
  box-shadow: inset 0 0 0 4px #7a6c56, inset 0 0 0 6px var(--tinta), inset 0 -10px 0 #3e3428, var(--sombra-bloco);
}
.portao-icone { filter: drop-shadow(0 0 8px rgba(254,200,97,.55)); }
.servico-icone {
  border-radius: 50%;
  border: 3px solid var(--tinta);
  background: radial-gradient(circle at 50% 40%, #3d2c22, #1a120e 70%);
  box-shadow: inset 0 0 0 2px #c9a24f88, var(--sombra-bloco);
}
/* O herói de corpo inteiro em nanquim (boneco da armaria, arsenal). */
.boneco-corpo, .arma-figura img:first-child { image-rendering: auto; }

/* --- menos texto (2026-10-04): o "Teclado" só no combate, onde as teclas
   valem; a linha do log some da vista (segue para o leitor de tela). */
#app:not(:has(.tela.combate)) .ajuda { display: none; }
.console { border-top: 0; }
.opcao.servico.medica h4 { font-family: var(--titulo); font-size: calc(1.4rem * var(--escala)); text-shadow: 0 2px 0 var(--contorno-texto); }
.opcao.servico.medica .btn { justify-self: center; }
.opcao.servico.medica h4 { color: var(--marmore); }
.bancada .opcoes:has(> .opcao.servico:only-child) { grid-template-columns: minmax(0, 13rem); }
/* O painel do prédio tinha a largura esticada pelo parágrafo do papel do
   lugar; sem ele, encolhia ao conteúdo (a escola centra os filhos). */
.predio-painel { width: min(100%, 52rem); }

/* --- revisão (2026-10-04): o busto nanquim já traz o próprio aro; a borda
   laranja do retrato fazia um anel duplo. No celular a placa do portão
   encolhe como as outras (ela tinha especificidade maior que a regra). */
.retrato-patrono { border: 0; background: none; }
@media (max-width: 640px) { .predio.portao .placa { font-size: calc(.55rem * var(--escala)); padding: .05rem .25rem; } }

/* --- revisão (2026-10-04), depois do bloco NANQUIM:
   o painel (`.opcao:not(.carta-opcao)`, especificidade 0,2,0) apagava a cor
   da raridade e a faixa do estilo do patrono. */
.opcao[class*="rar-"]:not(.carta-opcao) { border-color: var(--rar); }
.opcao.rar-ouro:not(.carta-opcao) { border-style: double; border-width: 4px; }
.cartao-patrono[style*="--cor-estilo"] { border-left: 6px solid var(--cor-estilo); }
/* Os pulsos com a mesma lista de sombras da base: inset e não-inset não
   interpolam, e o botão piscava em vez de pulsar. */
@keyframes clamor-pulsa { 50% { box-shadow: inset 0 0 0 1px #fff6c0, 0 0 22px rgba(255,210,74,.9), var(--sombra-bloco); } }
@keyframes brilho-ouro { 50% { box-shadow: inset 0 0 0 2px rgba(201,162,79,.35), 0 0 14px rgba(242,193,78,.55), var(--sombra-bloco); } }
@keyframes brilho-purpura { 50% { box-shadow: inset 0 0 0 2px rgba(201,162,79,.35), 0 0 16px rgba(142,42,107,.7), var(--sombra-bloco); } }
@keyframes brilho-purpura-carta { 50% { box-shadow: 0 0 0 2px var(--rar), 0 0 24px rgba(224,96,168,.8); } }
:root[data-movimento="normal"] .carta.rar-purpura { animation-name: brilho-purpura-carta; }
/* O foco de teclado vence o halo do combo (os dois eram outline, e o halo
   tinha especificidade maior: a carta focada parecia igual às outras). */
.carta:focus-visible, .carta.cadeia-sobe:focus-visible, .carta.cadeia-mantem:focus-visible, .carta.cadeia-quebra:focus-visible {
  outline: 3px solid var(--bronze); outline-offset: 5px;
}
:root[data-contraste="alto"] .carta:focus-visible { outline-color: #fff; outline-width: 4px; }
/* A pedra da Medusa por cima da arte (ficava atrás da janela). */
.carta.petrificada .selo-pedra { z-index: 2; }
/* Carta impedida não acende no hover. */
.carta.impedida.clicavel:hover { box-shadow: inset 0 0 0 2px var(--fam), inset 0 0 0 3px var(--tinta), 0 4px 0 var(--tinta); }
/* Cláusula ligada no organizador: filete verde, como a virtude levada. */
.virtude.equipada { box-shadow: inset 0 0 0 2px #63c74d, var(--sombra-bloco); }

/* --- o balão de aviso (revisão de 2026-10-04): recusas e avisos do sistema
   à vista, por alguns segundos, por cima do conteúdo e sem empurrar nada. */
.aviso-flutuante {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  z-index: 200; margin: 0; max-width: min(30rem, calc(100vw - 2rem));
  padding: .55rem 1rem; text-align: center;
  background: linear-gradient(180deg, #f4e4c0 0 60%, #e6cfa0 60%); color: #1e130c;
  border: 2px solid #0d0605; border-radius: 8px; box-shadow: 0 3px 0 #0d0605;
  font-family: var(--titulo); font-size: calc(.95rem * var(--escala));
  pointer-events: none;
}
.aviso-flutuante[hidden] { display: none; }

/* ================================================================== CLAREZA
   Pedidos do dono depois de jogar (2026-10-04): mais visual, menos leitura. */

/* 1) Combina: selo grande com a corrente, não um número miúdo no rodapé. */
.carta .sinergia.selo-combina {
  justify-self: center; display: inline-flex; align-items: center; gap: .3rem;
  margin-top: .15rem; padding: .15rem .7rem .15rem .45rem;
  background: linear-gradient(180deg, #8ad06a 0 45%, #5a9a3a 45%); color: #0d0605;
  border: 2px solid var(--tinta); border-radius: 999px; box-shadow: 0 2px 0 var(--tinta);
  font-family: var(--titulo); font-weight: 800; font-size: calc(1.05rem * var(--escala));
}
.carta .sinergia.selo-combina img.glifo { height: 1.35em; }
/* A evolução: faixa dourada forte que brilha, e as duas cartas que entram na
   forja em miniatura. */
.etiqueta.evolui {
  font-size: calc(.95rem * var(--escala)); padding: .2rem .9rem; letter-spacing: .12em;
  background: linear-gradient(180deg, #fff2a0 0 40%, #ffcf3a 40% 76%, #c27a10 76%); color: #1e130c;
  border: 2px solid var(--tinta); box-shadow: 0 0 14px rgba(255,207,58,.7), 0 2px 0 var(--tinta);
}
:root[data-movimento="normal"] .etiqueta.evolui { animation: evolui-brilha 1.6s ease-in-out infinite; }
@keyframes evolui-brilha { 50% { box-shadow: 0 0 26px rgba(255,207,58,1), 0 2px 0 var(--tinta); } }
.opcao.evolucao .carta { box-shadow: inset 0 0 0 2px var(--fam), inset 0 0 0 3px var(--tinta), 0 0 0 3px #ffcf3a, 0 0 18px rgba(255,207,58,.55); }
.troca-evolucao { display: grid; justify-items: center; }
.troca-pecas { display: flex; align-items: center; gap: .3rem; }
.troca-mais { font-family: var(--titulo); font-size: 1.2rem; color: #ffcf3a; text-shadow: 0 2px 0 var(--contorno-texto); }
.mini-carta { display: grid; justify-items: center; gap: .1rem; width: 4.2rem; }
.mini-carta img { width: 4.2rem; height: auto; aspect-ratio: 144 / 90; border: 2px solid var(--tinta); border-radius: 4px; box-shadow: 0 0 0 1px var(--fam, #c9a24f); image-rendering: auto; }
.mini-carta small { font-size: .62rem; line-height: 1.1; text-align: center; color: var(--areia); }
.mini-carta.familia-ataque { --fam: #a3282b; } .mini-carta.familia-bloqueio { --fam: #4f7aa0; }
.mini-carta.familia-espetaculo { --fam: #c9a24f; } .mini-carta.familia-energia { --fam: #8a6fae; }
.mini-carta.familia-livre { --fam: #9a9a95; } .mini-carta.familia-utilidade { --fam: #6f7f66; }

/* 2) A peça à venda: o que sai, riscado, com selo vermelho; "por golpe". */
.peca-atual { position: relative; display: flex; align-items: center; gap: .4rem; padding: .3rem .5rem; border: 2px dashed #a3282b; border-radius: 6px; background: rgba(90,10,14,.25); }
.peca-atual .selo-sai { font-family: var(--titulo); font-weight: 800; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; background: #a3282b; color: #fff; border: 2px solid var(--tinta); border-radius: 4px; padding: 0 .35rem; }
.peca-atual .arte-sai { position: relative; display: inline-block; }
.peca-atual .arte-sai img { width: 34px; height: 34px; opacity: .6; filter: grayscale(.6); }
.peca-atual .arte-sai::after { content: ""; position: absolute; inset: 45% -2px auto; height: 3px; background: #e43b44; transform: rotate(-30deg); box-shadow: 0 0 0 1px var(--tinta); }
.peca-atual .fichas-efeito { opacity: .7; }
.ficha-efeito .por-golpe { display: inline-flex; align-items: center; gap: .15rem; color: var(--areia); }
.ficha-efeito .por-golpe .ficha-por { width: 14px; height: 14px; }

/* 3) Ofertas com largura de carta: comprar uma não estica as que sobram. */
.opcoes:has(> .carta-opcao) { grid-template-columns: repeat(auto-fill, minmax(12rem, 14.5rem)); justify-content: start; }
@media (max-width: 640px) { .opcoes:has(> .carta-opcao) { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); } }

/* 4) A vida na bolsa, ao lado do ouro. */
.recurso.rec-cura { border-color: #7a1a1e; }
.recurso.rec-cura b { color: #ff9a8a; }
.recurso.rec-cura.baixa b { color: #ff5a4a; }

/* 5) A ficha que vem da gravação: borda dourada tracejada e o selo da marca. */
.ficha-efeito.da-marca { position: relative; padding: .05rem .35rem .05rem .2rem; border: 2px dashed #c9a24f; border-radius: 6px; background: rgba(201,162,79,.12); }
.ficha-efeito.da-marca .marca-selo { font-size: 1rem; margin-right: .1rem; }
.ficha-efeito.da-marca .marca-selo img.glifo { height: 1.3em; vertical-align: middle; }
.carta .gravacao { color: #f0d890; }
.detalhe-marca { margin: .2rem 0 0; color: #f0d890; font-size: .85em; }

/* 6) Patronos: a ficha concreta é o destaque; a frase fica menor. */
.cartao-patrono .fichas-peca, .bancada.amuletos .fichas-peca { justify-content: center; }
.cartao-patrono .efeito.curto { color: var(--areia); font-size: calc(.85rem * var(--escala)); margin: 0; }
.cartao-patrono .efeito.secundario { color: var(--apagado); font-size: calc(.8rem * var(--escala)); }

/* 7) Aspecto que dá para melhorar: aceso, com brilho. */
.aspecto.pode { opacity: 1; filter: none; box-shadow: inset 0 0 0 2px #ffcf3a, 0 0 12px rgba(255,207,58,.45); }
:root[data-movimento="normal"] .aspecto.pode { animation: evolui-brilha 1.8s ease-in-out infinite; }
.aspecto.apagado .btn { opacity: .55; }

/* 8) O pacto: meta → recompensa. */
.opcao.pacto { justify-items: center; text-align: center; }
.pacto-linha { display: flex; align-items: center; justify-content: center; gap: .6rem; }
.pacto-meta { display: grid; justify-items: center; gap: .05rem; }
.pacto-meta img { width: 40px; height: 40px; image-rendering: auto; }
.pacto-meta b { font-family: var(--titulo); font-size: calc(1.6rem * var(--escala)); line-height: 1; text-shadow: 0 2px 0 var(--contorno-texto); }
.pacto-meta small { color: var(--areia); font-size: .75rem; }
.pacto-seta { font-size: 1.8rem; color: #ffcf3a; text-shadow: 0 2px 0 var(--contorno-texto); }
.pacto-premio { display: grid; justify-items: center; gap: .15rem; }
.pacto-premio .mini-carta { width: 5.5rem; } .pacto-premio .mini-carta img { width: 5.5rem; }
.selo-lendaria { font-family: var(--titulo); font-weight: 700; font-size: .7rem; color: #e060a8; }

/* 10) As marcas do herói (crítico, esquiva, postura, veneno...): pílulas
   legíveis com o glifo grande, não um texto de 11 px. */
.heroi .marcas { gap: .4rem; }
.heroi .marca {
  display: inline-flex; align-items: center; gap: .2rem;
  font-family: var(--titulo); font-weight: 800; font-size: calc(1rem * var(--escala));
  color: var(--marmore); padding: .1rem .55rem .1rem .3rem;
  background: var(--placa); border: 2px solid var(--tinta); border-radius: 999px; box-shadow: 0 2px 0 var(--tinta);
}
.heroi .marca img.glifo { height: 1.5em; vertical-align: middle; }
.heroi .marca.bom { color: #fff0b0; }
.heroi .marca.ruim { color: #ff9a8a; border-color: #5a0c0c; }
.escudo img.icone-hud, .vida-numero img.icone-hud { width: 26px; height: 26px; }

/* 11) Treinador: o botão bloqueado diz o porquê; encaixes ▣ legíveis. */
.cartao-virtude .btn, .larario .espaco .btn { white-space: normal; }
@media (max-width: 640px) {
  /* O pacto no celular: um por linha, e a linha meta → prêmio pode quebrar. */
  .opcoes:has(> .opcao.pacto) { grid-template-columns: minmax(0, 1fr); }
  .pacto-linha { flex-wrap: wrap; }
  .troca-pecas { flex-wrap: wrap; justify-content: center; }
}
.opcao.pacto, .pacto-linha, .troca-evolucao { min-width: 0; }

/* Quem derrubou, na tela do fim (DEC-071). */
.derrotado-por { margin: 0; font-family: var(--titulo); font-size: calc(1.5rem * var(--escala)); color: #ff5a3c; text-shadow: 0 2px 0 var(--contorno-texto); }

/* As âncoras de leitura (título da tela, seção do combate: `tabindex="-1"`)
   recebem foco por programa para o leitor de tela anunciar; não são
   acionáveis, então não desenham o contorno de foco — era a moldura amarela
   em volta dos títulos e do combate. Botões e cartas seguem com foco visível. */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }


/* ==================================================================== RUN
   Peças que o palco 16:9 (DEC-073, no fim do arquivo) e o fluxo do celular
   usam: a coluna da run (gaveta no celular, sobreposição no desktop), a linha
   da mão, o preço-botão, as abas do ferreiro e as minicartas. */

:root { --gap-palco: .6rem; }

/* A coluna da run e a gaveta do celular. */
.coluna-run { min-width: 0; }
.coluna-run:empty { display: none; }
.coluna-conteudo { display: grid; gap: .6rem; align-content: start; }
.coluna-conteudo > .recursos { flex-wrap: wrap; }
.coluna-conteudo > .heroi { margin: 0; }
.coluna-run .build-toggle { display: none; }
.coluna-build { display: grid; gap: .6rem; align-content: start; }
.coluna-build .equipamento { display: grid; gap: .4rem; justify-items: center; zoom: .72; }
.coluna-build .boneco-totais { grid-auto-flow: column; }
.coluna-build .chances { display: flex; gap: .35rem; flex-wrap: wrap; }
.lista-build { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.item-build {
  padding: .3rem .55rem; border: 2px solid var(--tinta); border-radius: 6px;
  background: color-mix(in srgb, var(--placa) 80%, #000); box-shadow: var(--sombra-bloco);
  font-family: var(--titulo); font-size: calc(.85rem * var(--escala)); color: var(--areia);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.item-build.alianca { color: #b8f080; }

/* A linha da mão: energia e pilha | a mão | Fúria, especiais, Encerrar. */
.mao-linha { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--gap-palco); align-items: center; min-width: 0; }
.mao-esq { display: grid; gap: .5rem; justify-items: center; }
.mao-esq .energia { flex-direction: column; }
.mao-linha .acoes { display: grid; gap: .45rem; justify-items: stretch; width: clamp(11rem, 17vw, 16rem); }
.mao-linha .acoes .furia { flex: none; }
.mao-linha .acoes-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.mao-linha .acoes-botoes .btn { padding-inline: .4rem; font-size: calc(.8rem * var(--escala)); min-width: 0; }
.mao-linha .acoes > .ficha { justify-self: end; }
.mao-linha .mao { padding-top: .5rem; }
.arena .onde {
  position: absolute; left: .6rem; bottom: .45rem; z-index: 4; margin: 0;
  padding: .1rem .55rem; border-radius: 4px; background: rgba(13,6,5,.62);
  font-size: calc(.8rem * var(--escala)); pointer-events: none;
}
.arena .aviso-protecao { position: absolute; left: 50%; transform: translateX(-50%); bottom: .45rem; z-index: 6; }



/* Celular e texto grande: fluxo normal. A coluna vem em cima (vitais/bolsa) e
   a build vira gaveta (🎒). */
@media not ((min-width: 900px) and (min-height: 480px) and (min-aspect-ratio: 4/3)) {
  #app[data-modo="run"] > .cabeca { order: -2; }
  #app[data-modo="run"] > .coluna-run { order: -1; }
  #app[data-modo="run"] .cabeca .bolsa { display: none; }
  .coluna-conteudo { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .coluna-run .build-toggle { display: inline-flex; min-height: 40px; }
  .coluna-build { grid-column: 1 / -1; }
  .coluna-conteudo:not(.aberta) .coluna-build { display: none; }
  .mao-linha { grid-template-columns: minmax(0, 1fr); }
  .mao-esq { grid-auto-flow: column; justify-content: start; }
  .mao-esq .energia { flex-direction: row; }
  .mao-linha .acoes { width: auto; grid-template-columns: minmax(0, 1fr) auto; }
  .mao-linha .acoes .furia { grid-column: 1 / -1; }
}
:root[data-escala="grande"] #app[data-modo="run"] > .cabeca { order: -2; }
:root[data-escala="grande"] #app[data-modo="run"] > .coluna-run { order: -1; }
:root[data-escala="grande"] .coluna-run .build-toggle { display: inline-flex; }
:root[data-escala="grande"] .coluna-conteudo:not(.aberta) .coluna-build { display: none; }
:root[data-contraste="alto"] .item-build { border-color: var(--areia); }

/* --- progressão (2026-10-04): o que cada parte da estátua libera, o jogo em
   sua honra, o mural da inscrição e o aviso de nível que não cabe. */
.libera-parte { font-size: calc(.82rem * var(--escala)); color: #f0d890; }
.estatua .parte:not(.pronta) .libera-parte { color: var(--apagado); }
.jogo-em-honra { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; font-family: var(--titulo); font-size: calc(1.1rem * var(--escala)); }
.mural { display: grid; gap: .4rem; margin-top: .6rem; padding: .6rem .8rem; border: 2px solid var(--tinta); border-radius: 6px; background: var(--placa); box-shadow: var(--sombra-bloco); }
.mural p { margin: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-family: var(--titulo); }
.cv-aviso { margin: 0; color: #feae34; font-size: calc(.85rem * var(--escala)); font-weight: 700; }

/* --- lojas, escolhas e telas de muitas cartas. */

/* O preço é o botão: moeda e número. */
.btn-preco { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-width: 5.5rem; }
.btn-preco img { width: 20px; height: 20px; image-rendering: auto; }
.btn-preco b { font-family: var(--titulo); font-size: calc(1.05rem * var(--escala)); }
.btn-preco.forte { background: linear-gradient(180deg, #e8c25a 0 46%, #c99a30 46%); color: #1e130c; text-shadow: 0 1px 0 rgba(255,240,190,.6); box-shadow: inset 0 1px 0 rgba(255,250,220,.6), inset 0 0 0 1px #fff0b0, var(--sombra-bloco); }
.btn-preco.forte:hover:not(:disabled) { background: linear-gradient(180deg, #f4d06a 0 46%, #d8a838 46%); }

/* As abas do ferreiro. */
.abas-marca { display: flex; flex-wrap: wrap; gap: .5rem; }
.aba-marca {
  display: inline-flex; align-items: center; gap: .6rem; padding: .4rem .8rem; cursor: pointer;
  border: 2px solid var(--tinta); border-radius: 8px 8px 0 0; background: color-mix(in srgb, var(--placa) 80%, #000);
  color: var(--areia); font-family: var(--titulo); box-shadow: inset 0 -3px 0 rgba(0,0,0,.35);
}
.aba-marca[aria-selected="true"] { background: var(--placa-luz); color: #fff0c8; box-shadow: inset 0 0 0 2px var(--rar, var(--bronze)); }
.aba-preco { display: inline-flex; align-items: center; gap: .2rem; }
.aba-preco img { width: 18px; height: 18px; image-rendering: auto; }
.gravacao-oferta[hidden] { display: none; }

/* Minicartas: remoção, deck cheio e alvos do ferreiro. A frase vai para o balão. */
.opcoes.mini-grade { grid-template-columns: repeat(auto-fill, minmax(clamp(6.8rem, 8.2vw, 8.8rem), 1fr)) !important; gap: .55rem; }
.opcoes.mini-grade > .opcao { padding: 0; gap: .3rem; justify-items: center; width: auto; }
.opcoes.mini-grade .carta, .alvos-cartas .carta { min-width: 0; width: 100%; padding: .35rem .35rem .4rem; gap: .2rem; }
.opcoes.mini-grade .carta .efeito, .alvos-cartas .carta .efeito,
.opcoes.mini-grade .carta .gravacao, .alvos-cartas .carta .gravacao { display: none; }
.opcoes.mini-grade .carta .nome, .alvos-cartas .carta .nome { font-size: calc(.72rem * var(--escala)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 1rem; }
.opcoes.mini-grade .carta .custo, .alvos-cartas .carta .custo { width: 1.5rem; height: 1.5rem; font-size: calc(.85rem * var(--escala)); top: -.5rem; left: -.5rem; }
.opcoes.mini-grade .carta .ficha-efeito b, .alvos-cartas .carta .ficha-efeito b { font-size: calc(1rem * var(--escala)); }
.opcoes.mini-grade .opcao .btn { min-height: 32px; padding: .2rem .6rem; font-size: calc(.78rem * var(--escala)); }
.bancada-ferreiro .alvos-cartas { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(6.8rem, 8.2vw, 8.8rem), 1fr)); gap: .55rem; }
.bancada-ferreiro .alvo-carta .carta { width: 100%; }


/* Celular: o botão de seguir fica preso embaixo nas telas que rolam. */
@media not ((min-width: 900px) and (min-height: 480px) and (min-aspect-ratio: 4/3)) {
  .tela.parada > [data-foco="seguir"], .tela.escolha > .btn.fantasma { position: sticky; bottom: .4rem; z-index: 20; justify-self: stretch; }
}

/* Celular (DEC-072): o combate cabe sem rolar. Topo baixo, vitais numa linha,
   mão em 3 colunas com a janela da arte mais baixa, ações numa faixa, sem o
   "Teclado" (não há teclado). */
@media (max-width: 47.99rem) {
  #app { padding: .4rem .5rem 1rem; gap: .45rem; }
  .cabeca { padding-bottom: .3rem; gap: .4rem; flex-wrap: nowrap; }
  .cabeca h1 { font-size: calc(1.05rem * var(--escala)); }
  .cabeca .btn { min-height: 38px; padding: .3rem .6rem; }
  .console .ajuda { display: none; }
  .coluna-conteudo > .heroi { padding: .35rem .55rem; gap: .25rem; }
  .coluna-conteudo > .heroi .vitais { flex-wrap: nowrap; }
  .coluna-conteudo > .heroi .marca { font-size: calc(.8rem * var(--escala)); }
  .tela.combate { gap: .45rem; }
  .mao-linha { gap: .4rem; }
  .mao-linha .mao { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; padding-top: .55rem; }
  .mao-linha .mao > .carta { min-width: 0; width: auto; padding: .35rem .35rem .4rem; gap: .2rem; }
  .mao-linha .mao > .carta .arte { aspect-ratio: 144 / 64; }
  .mao-linha .mao > .carta .nome { font-size: calc(.74rem * var(--escala)); }
  .mao-linha .mao > .carta .ficha-efeito b { font-size: calc(1.05rem * var(--escala)); }
  .mao-linha .mao > .carta .custo { width: 1.6rem; height: 1.6rem; font-size: calc(.9rem * var(--escala)); }
  .mao-linha .acoes { grid-template-columns: minmax(0, 1fr) auto; gap: .35rem; }
  .mao-linha .acoes .furia { grid-column: 1 / -1; padding: .2rem .45rem; }
  .mao-linha .acoes-botoes .btn, .mao-linha .acoes > .btn { min-height: 38px; padding-block: .25rem; }
  .mao-linha .acoes > .ficha { display: none; }
}
@media (max-width: 47.99rem) {
  /* Mão cheia numa fileira só: 4 ou 5 colunas, fonte menor. */
  .mao-linha .mao:has(> .carta:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; }
  .mao-linha .mao:has(> .carta:nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .mao-linha .mao:has(> .carta:nth-child(4)) > .carta .nome { font-size: calc(.62rem * var(--escala)); padding-left: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mao-linha .mao:has(> .carta:nth-child(4)) > .carta .custo { width: 1.35rem; height: 1.35rem; font-size: calc(.78rem * var(--escala)); top: -.5rem; left: -.45rem; }
  .mao-linha .mao:has(> .carta:nth-child(4)) > .carta .ficha-efeito b { font-size: calc(.9rem * var(--escala)); }
  .mao-linha .mao:has(> .carta:nth-child(4)) > .carta .ficha-efeito img { width: 16px; height: 16px; }
  .mao-linha .mao:has(> .carta:nth-child(4)) > .carta.cadeia-sobe::after,
  .mao-linha .mao:has(> .carta:nth-child(4)) > .carta.cadeia-mantem::after { content: "▲"; padding: .05rem .3rem; }
  .mao-linha .mao:has(> .carta:nth-child(4)) > .carta.cadeia-mantem::after { content: "="; }
}

/* Remover: o ✕ no canto da minicarta. */
.opcoes.mini-grade > .opcao { position: relative; }
.opcoes.mini-grade .remover-x {
  position: absolute; top: -.45rem; right: -.4rem; z-index: 3; min-height: 0; width: 1.9rem; height: 1.9rem; padding: 0;
  border-radius: 50%; display: grid; place-items: center; font-size: calc(.9rem * var(--escala));
  background: linear-gradient(180deg, #c8343a 0 46%, #a8242c 46%); color: #fff6e8;
}


/* ============================================================ PALCO 16:9
   O jogo como um jogo, não como um site (DEC-073, pedido do dono depois da
   DEC-072: "fica uma distância absurda pra clicar"; referências: Slay the
   Spire, Vampire Crawlers, Hades II). No desktop o `#app` é um palco de
   80 × 45 rem, e o rem acompanha a largura do palco (`--pw / 80`): num
   monitor maior o palco inteiro cresce, e nada se espalha. Fora dele, barras
   escuras. Tudo dentro do palco é medido em rem sobre essa grade.
   Celular, retrato, janela baixa e texto grande ficam no fluxo com rolagem. */
:root { --pw: min(100vw, calc(100vh * 16 / 9)); }
@supports (height: 100dvh) { :root { --pw: min(100vw, calc(100dvh * 16 / 9)); } }

@media (min-width: 900px) and (min-height: 480px) and (min-aspect-ratio: 4/3) {
  :root:not([data-escala="grande"]) { font-size: calc(var(--pw) / 80); }
  :root:not([data-escala="grande"]) body { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; background: #0a0605; overflow: hidden; }
  :root:not([data-escala="grande"]) #app {
    position: relative; max-width: none; width: 80rem; height: 45rem; margin: 0;
    padding: 0 1rem .6rem; gap: .5rem; overflow: hidden;
    grid-template-columns: minmax(0, 1fr); grid-template-rows: 3rem minmax(0, 1fr);
    background: radial-gradient(ellipse at 50% 40%, #2a1e17, var(--pedra) 70%);
  }

  /* O topo: título e menu | a fileira da build | a bolsa | opções. */
  :root:not([data-escala="grande"]) .cabeca { height: 3rem; padding: 0; gap: .9rem; flex-wrap: nowrap; align-items: center; }
  :root:not([data-escala="grande"]) .cabeca h1 { font-size: calc(1.25rem * var(--escala)); }
  :root:not([data-escala="grande"]) .cabeca .btn { min-height: 2.2rem; padding: .25rem .8rem; font-size: calc(.85rem * var(--escala)); }
  :root:not([data-escala="grande"]) .cabeca .faixa-build { flex: 1; min-width: 0; display: flex; justify-content: center; }
  :root:not([data-escala="grande"]) .cabeca .bolsa { flex: none; }
  :root:not([data-escala="grande"]) .cabeca .recursos.magro { display: none; }
  :root:not([data-escala="grande"]) .cabeca .recursos { flex-wrap: nowrap; gap: .35rem; }

  /* O palco: o conteúdo da tela. Rede de segurança: rola por dentro, nunca
     corta o foco. */
  :root:not([data-escala="grande"]) .palco { position: relative; min-height: 0; overflow: auto; padding: .25rem 0 0; }
  :root:not([data-escala="grande"]) .console { position: absolute; left: .6rem; bottom: .15rem; border: 0; padding: 0; z-index: 40; }
  :root:not([data-escala="grande"]) #app:not([data-modo="run"]) .console .ajuda { display: none; }

  /* A build: a coluna só aparece aberta, por cima do palco. */
  :root:not([data-escala="grande"]) #app > .coluna-run { display: none; }
  :root:not([data-escala="grande"]) #app[data-build="aberta"] > .coluna-run {
    display: block; position: absolute; z-index: 60; top: 3.4rem; left: 1rem;
    width: 24rem; max-height: 40rem; overflow: auto; padding: .8rem;
    border: 2px solid var(--tinta); border-radius: 8px; background: var(--placa);
    box-shadow: inset 0 0 0 2px rgba(201,162,79,.35), 0 .6rem 1.6rem rgba(0,0,0,.6);
  }
  :root:not([data-escala="grande"]) .coluna-run .heroi, :root:not([data-escala="grande"]) .coluna-run .recursos { display: none; }
  :root:not([data-escala="grande"]) .coluna-run .build-toggle { display: inline-flex; justify-self: end; }
  :root:not([data-escala="grande"]) .coluna-run .coluna-build { display: grid; }

  /* ---- COMBATE: arena em cima, a mão encostada nela embaixo. */
  :root:not([data-escala="grande"]) .tela.combate { display: grid; grid-template-rows: 26rem auto; gap: 0; height: 100%; align-content: start; }
  :root:not([data-escala="grande"]) .tela.combate > .arena { width: 78rem; height: 26rem; justify-self: center; }
  :root:not([data-escala="grande"]) .tela.combate > .mao-linha {
    position: relative; z-index: 5; margin-top: -.9rem;
    display: flex; justify-content: center; align-items: flex-end; gap: 1rem;
  }
  /* A vida dentro da arena, embaixo do herói. */
  :root:not([data-escala="grande"]) .arena > .heroi {
    position: absolute; z-index: 6; left: 4.2rem; bottom: .35rem; width: 15rem;
    padding: .25rem .55rem; gap: .2rem; margin: 0;
    background: rgba(13,6,5,.72); border: 2px solid var(--tinta); border-radius: 8px; box-shadow: none;
  }
  :root:not([data-escala="grande"]) .arena > .heroi .vitais { flex-wrap: nowrap; gap: .5rem; }
  :root:not([data-escala="grande"]) .arena > .heroi .vida-numero { font-size: calc(1rem * var(--escala)); }
  :root:not([data-escala="grande"]) .arena > .heroi .barra.vida { flex: 1; min-width: 0; height: .8rem; }
  :root:not([data-escala="grande"]) .arena > .heroi .marcas { gap: .3rem; }
  :root:not([data-escala="grande"]) .arena > .heroi .marca { font-size: calc(.8rem * var(--escala)); }
  :root:not([data-escala="grande"]) .arena .onde { left: .7rem; top: .6rem; bottom: auto; }
  :root:not([data-escala="grande"]) .arena .aviso-protecao { bottom: auto; top: .6rem; }
  /* À esquerda da mão: energia e pilha. */
  :root:not([data-escala="grande"]) .mao-esq { display: grid; gap: .45rem; justify-items: center; padding-bottom: .4rem; }
  :root:not([data-escala="grande"]) .mao-esq .energia { flex-direction: column; gap: .3rem; }
  :root:not([data-escala="grande"]) .mao-esq .energia i { width: 1.5rem; height: 1.5rem; }
  /* A mão: cartas de largura fixa; com muitas, elas se sobrepõem. */
  :root:not([data-escala="grande"]) .mao-linha .mao { display: flex; flex-wrap: nowrap; justify-content: center; align-items: flex-end; gap: .45rem; padding-top: .6rem; max-width: 52rem; }
  :root:not([data-escala="grande"]) .mao-linha .mao > .carta { width: 10.4rem; min-width: 0; flex: none; }
  :root:not([data-escala="grande"]) .mao-linha .mao:has(> .carta:nth-child(6)) > .carta + .carta { margin-left: -1.6rem; }
  :root:not([data-escala="grande"]) .mao-linha .mao:has(> .carta:nth-child(8)) > .carta + .carta { margin-left: -3.2rem; }
  :root:not([data-escala="grande"]) .mao-linha .mao > .carta:hover, :root:not([data-escala="grande"]) .mao-linha .mao > .carta:focus-visible { z-index: 3; }
  :root:not([data-escala="grande"]) .mao-linha .mao.vazia { min-width: 20rem; justify-content: center; align-self: center; }
  :root:not([data-escala="grande"]) .mao-linha .mao.descoberta { flex-wrap: wrap; }
  :root:not([data-escala="grande"]) .mao-linha .mao.descoberta > .aviso { flex-basis: 100%; text-align: center; margin: 0; }
  /* À direita da mão: Fúria, especiais, Encerrar, descarte — num cacho. */
  :root:not([data-escala="grande"]) .mao-linha .acoes { display: grid; gap: .4rem; width: 14rem; padding-bottom: .4rem; }
  :root:not([data-escala="grande"]) .mao-linha .acoes .furia { padding: .3rem .5rem; gap: .35rem; flex-wrap: nowrap; }
  :root:not([data-escala="grande"]) .mao-linha .acoes .furia .furia-partes { min-width: 0; }
  :root:not([data-escala="grande"]) .mao-linha .acoes .furia .numero { font-size: calc(.8rem * var(--escala)); }
  :root:not([data-escala="grande"]) .mao-linha .acoes-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
  :root:not([data-escala="grande"]) .mao-linha .acoes-botoes .btn { min-height: 2.6rem; padding: .2rem .35rem; font-size: calc(.72rem * var(--escala)); line-height: 1.1; }
  :root:not([data-escala="grande"]) .mao-linha .acoes > .btn.forte { min-height: 2.6rem; }
  :root:not([data-escala="grande"]) .mao-linha .acoes > .ficha { justify-self: end; }

  /* ---- VITÓRIA: a arena no mesmo lugar e tamanho do combate; o prêmio num
     painel por cima da metade de baixo. */
  :root:not([data-escala="grande"]) .palco:has(> .arena-vitoria) { overflow: hidden; }
  :root:not([data-escala="grande"]) .palco > .arena-vitoria { position: absolute; top: .25rem; left: 0; width: 78rem; height: 26rem; margin: 0; }
  :root:not([data-escala="grande"]) .palco > .arena-vitoria + .tela {
    position: absolute; z-index: 5; left: 50%; transform: translateX(-50%); top: 16.5rem; bottom: 0;
    width: fit-content; min-width: 30rem; max-width: 62rem; overflow: auto; align-content: start;
    padding: .7rem 1.4rem .8rem; gap: .45rem; justify-items: center; text-align: center;
    border: 2px solid var(--tinta); border-radius: 10px; background: rgba(28,20,16,.94);
    box-shadow: inset 0 0 0 2px rgba(201,162,79,.35), 0 .8rem 2rem rgba(0,0,0,.65);
  }

  /* ---- PAINÉIS: parada, lojas, portões, pacto, remoção, fim, espada de
     madeira. Um painel central; o botão de seguir dentro dele. */
  :root:not([data-escala="grande"]) .palco:not(:has(> .arena-vitoria)) > .tela:is(.escolha, .parada, .portas, .fim, .rudis-oferta) {
    width: min(68rem, 100%); max-height: 100%; margin: 0 auto; overflow: auto;
    padding: 1rem 1.4rem 1.2rem; gap: .7rem; align-content: start;
    border: 2px solid var(--tinta); border-radius: 10px; background: rgba(28,20,16,.9);
    box-shadow: inset 0 0 0 2px rgba(201,162,79,.25), 0 .6rem 1.6rem rgba(0,0,0,.5);
  }
  :root:not([data-escala="grande"]) .palco > .tela.portas, :root:not([data-escala="grande"]) .palco > .tela.fim, :root:not([data-escala="grande"]) .palco > .tela.rudis-oferta { width: min(56rem, 100%); margin-top: 2rem; }
  :root:not([data-escala="grande"]) .palco > .tela.parada { grid-template-columns: minmax(0, 1fr) auto; }
  :root:not([data-escala="grande"]) .palco > .tela.parada > * { grid-column: 1 / -1; }
  :root:not([data-escala="grande"]) .palco > .tela.parada > h2 { grid-column: 1; grid-row: 1; }
  :root:not([data-escala="grande"]) .palco > .tela.parada > [data-foco="seguir"] { grid-column: 2; grid-row: 1; align-self: center; }
  :root:not([data-escala="grande"]) .palco > .tela.escolha { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  :root:not([data-escala="grande"]) .palco > .tela.escolha > * { grid-column: 1 / -1; }
  :root:not([data-escala="grande"]) .palco > .tela.escolha > h2 { grid-column: 1; }
  :root:not([data-escala="grande"]) .palco > .tela.escolha > h2 + .frase { grid-column: 2; }
  :root:not([data-escala="grande"]) .palco > .tela.escolha > .btn.fantasma { grid-column: 3; grid-row: 1; justify-self: end; }
  :root:not([data-escala="grande"]) .palco > .arena-vitoria + .tela.escolha { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); background: rgba(24,17,13,.97); }
  :root:not([data-escala="grande"]) .palco > .arena-vitoria + .tela.escolha > h2 { grid-column: 1 / 3; justify-self: end; }
  :root:not([data-escala="grande"]) .palco > .arena-vitoria + .tela.escolha > h2 + .frase { grid-column: 3; justify-self: start; }
  :root:not([data-escala="grande"]) .palco > .arena-vitoria + .tela.escolha > .opcoes { grid-column: 1 / -1; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 9.4rem; justify-content: center; }
  :root:not([data-escala="grande"]) .palco > .arena-vitoria + .tela.escolha > .btn.fantasma { grid-column: 1 / -1; grid-row: auto; justify-self: center; }

  /* Ofertas de carta (vitória, mercador): do tamanho da carta da mão. */
  :root:not([data-escala="grande"]) .opcoes:has(> .carta-opcao):not(.mini-grade) { grid-template-columns: repeat(auto-fill, 9.4rem); justify-content: center; gap: .8rem; }
  :root:not([data-escala="grande"]) .opcoes:not(.mini-grade) > .opcao.carta-opcao { width: 9.4rem; gap: .3rem; }
  :root:not([data-escala="grande"]) .opcao.carta-opcao .carta { min-width: 0; }
  :root:not([data-escala="grande"]) .opcao.carta-opcao > .btn { min-height: 2.2rem; padding-block: .25rem; }

  /* Mercador: cartas à esquerda; equipamento e serviços à direita. */
  :root:not([data-escala="grande"]) .bancada-loja {
    display: grid; gap: .7rem; align-items: start;
    grid-template-columns: minmax(0, 1fr) 22rem;
    grid-template-areas: "cartas equip" "servicos equip";
  }
  :root:not([data-escala="grande"]) .bancada-loja > h3 { display: none; }
  :root:not([data-escala="grande"]) .bancada-loja > .prateleira { margin: 0; padding: .5rem .7rem .7rem; }
  :root:not([data-escala="grande"]) .bancada-loja > .prateleira-cartas { grid-area: cartas; }
  :root:not([data-escala="grande"]) .bancada-loja > .prateleira-equipamento { grid-area: equip; }
  :root:not([data-escala="grande"]) .bancada-loja > .prateleira-servicos { grid-area: servicos; }
  :root:not([data-escala="grande"]) .bancada-loja .prateleira-equipamento .opcoes { grid-template-columns: minmax(0, 1fr) !important; gap: .45rem; }
  :root:not([data-escala="grande"]) .bancada-loja .prateleira-servicos .opcoes { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .45rem; }
  :root:not([data-escala="grande"]) .bancada-loja .opcao.servico { grid-template-columns: auto 1fr auto; justify-items: start; align-items: center; text-align: left; padding: .35rem .55rem; gap: .5rem; }
  :root:not([data-escala="grande"]) .bancada-loja .opcao.servico h4 { margin: 0; font-size: calc(.9rem * var(--escala)); }
  :root:not([data-escala="grande"]) .bancada-loja .servico-icone { width: 2.2rem; height: 2.2rem; padding: .2rem; }
  /* Peça em linha: arte | corpo | preço. */
  :root:not([data-escala="grande"]) .bancada .opcoes:has(> .opcao.peca) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
  :root:not([data-escala="grande"]) .opcao.peca { grid-template-columns: auto minmax(0, 1fr) auto; justify-items: start; align-items: center; text-align: left; padding: .45rem .6rem; gap: .2rem .6rem; }
  :root:not([data-escala="grande"]) .opcao.peca > .peca-arte { width: 3.4rem; height: 3.4rem; grid-column: 1; grid-row: 1 / span 2; }
  :root:not([data-escala="grande"]) .opcao.peca > .peca-corpo { grid-column: 2; grid-row: 1; }
  :root:not([data-escala="grande"]) .opcao.peca > .peca-compra { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
  :root:not([data-escala="grande"]) .opcao.peca > .peca-atual, :root:not([data-escala="grande"]) .opcao.peca > .delta-totais { grid-column: 2 / span 2; }
  :root:not([data-escala="grande"]) .opcao.peca .peca-corpo h4, :root:not([data-escala="grande"]) .opcao.peca .peca-corpo .sub { margin: 0; }
  /* Duas bancadas na mesma parada (médica + patrono): lado a lado. */
  :root:not([data-escala="grande"]) .palco > .tela.parada:has(> .bancada ~ .bancada) { grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; align-items: start; }
  :root:not([data-escala="grande"]) .palco > .tela.parada:has(> .bancada ~ .bancada) > [data-foco="seguir"] { grid-column: 3; }
  :root:not([data-escala="grande"]) .palco > .tela.parada:has(> .bancada ~ .bancada) > .bancada:first-of-type { grid-column: 1; }
  :root:not([data-escala="grande"]) .palco > .tela.parada:has(> .bancada ~ .bancada) > .bancada ~ .bancada { grid-column: 2 / -1; }
  /* Portões e fim. */
  :root:not([data-escala="grande"]) .portao-arco { width: 9rem; height: 11rem; }
  :root:not([data-escala="grande"]) .tela.fim .numeros-da-tarde { display: grid; grid-template-columns: repeat(2, minmax(12rem, 16rem)); gap: .3rem 1.5rem; }
  /* Minicartas (remoção, deck cheio, alvos do ferreiro). */
  :root:not([data-escala="grande"]) .opcoes.mini-grade, :root:not([data-escala="grande"]) .bancada-ferreiro .alvos-cartas { grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr)) !important; }
  :root:not([data-escala="grande"]) .opcoes.mini-grade .carta .arte, :root:not([data-escala="grande"]) .alvos-cartas .carta .arte { aspect-ratio: 144 / 70; }

  /* ---- RUA: a cena ocupa o palco; o painel do prédio é uma janela central. */
  :root:not([data-escala="grande"]) .tela.ludus { position: relative; min-height: 100%; gap: .6rem; padding: .3rem 0; align-content: start; justify-items: center; }
  :root:not([data-escala="grande"]) .tela.ludus > .rua { width: 72rem; max-width: 100%; }
  :root:not([data-escala="grande"]) .tela.ludus > .predio-painel {
    position: absolute; z-index: 30; top: 3.4rem; left: 50%; transform: translateX(-50%);
    width: 52rem; max-height: calc(100% - 3.8rem); overflow: auto; align-content: start; text-align: left;
    box-shadow: inset 0 0 0 2px #feae3466, 0 .8rem 2rem rgba(0,0,0,.7);
  }
  :root:not([data-escala="grande"]) .tela.ludus > .predio-painel.predio-arsenal { width: 72rem; }
  /* ---- MENU: centrado. */
  :root:not([data-escala="grande"]) .tela.menu { min-height: 100%; align-content: center; padding: 0; }
}

/* Fora do palco (celular, retrato, janela baixa, texto grande): a vida mora na
   coluna da run, não na arena; a fileira da build não aparece. */
@media not ((min-width: 900px) and (min-height: 480px) and (min-aspect-ratio: 4/3)) { .arena > .heroi { display: none; } .faixa-build { display: none; } }
:root[data-escala="grande"] .arena > .heroi, :root[data-escala="grande"] .faixa-build { display: none; }

/* A fileira da build (o topo do palco). */
.barra-build { display: flex; gap: .35rem; align-items: center; flex-wrap: nowrap; overflow: hidden; padding-bottom: .4rem; }
.icone-build {
  position: relative; display: inline-grid; place-items: center; min-width: 2.3rem; height: 2.3rem; padding: 0 .3rem;
  border: 2px solid var(--tinta); border-radius: 7px; cursor: pointer;
  background: color-mix(in srgb, var(--placa) 80%, #000); box-shadow: inset 0 0 0 1px rgba(201,162,79,.3), 0 2px 0 var(--tinta);
  color: var(--areia); font-size: calc(1.05rem * var(--escala)); line-height: 1;
}
.icone-build img { width: 1.7rem; height: 1.7rem; image-rendering: auto; }
.icone-build img.glifo { width: auto; height: 1.3rem; vertical-align: middle; }
.icone-build small { position: absolute; bottom: -.5rem; left: 50%; transform: translateX(-50%); font-size: calc(.55rem * var(--escala)); color: #feae34; white-space: nowrap; text-shadow: 0 1px 0 var(--contorno-texto); }
.icone-build:hover { box-shadow: inset 0 0 0 1px var(--bronze), 0 2px 0 var(--tinta); }
.icone-build:focus-visible { outline: 3px solid var(--bronze); outline-offset: 2px; }

/* --- ofertas de carta alinhadas (DEC-073): na mesma fileira, as cartas têm a
   mesma altura e a etiqueta e o botão/preço ficam na mesma linha, mesmo
   quando um nome quebra em duas linhas ou uma carta tem mais fichas. */
.opcoes:has(> .carta-opcao):not(.mini-grade) { align-items: stretch; }
.opcoes:not(.mini-grade) > .opcao.carta-opcao { display: flex; flex-direction: column; align-items: center; }
.opcoes:not(.mini-grade) > .opcao.carta-opcao > .carta { flex: 1 1 auto; width: 100%; }
.opcoes:not(.mini-grade) > .opcao.carta-opcao > .carta + * { margin-top: .35rem; }
.opcoes:not(.mini-grade) > .opcao.carta-opcao > :last-child { margin-top: auto; }