/* Espadachim do Arroz: A Vila do Musashi
   Paleta do Musashi: chapéu #E38E26 / #B76E1C, roxo #9574B1 / #94769D, quimono #CECBD3, escuro #36283B. */

/* Fonte principal: Cordelina (Samuel de Angelis, DaFont, grátis p/ uso pessoal), pedido do Mario em 23/10.
   Ela não tem ! ? ¿ ¡ % + - x: o navegador pega esses da PixelifySans (2ª da lista). */
@font-face {
  font-family: 'Cordelina';
  src: url('../assets/fonte/cordelina.otf') format('opentype');
  font-display: swap;
}

@font-face {
  font-family: 'PixelifySans';
  src: url('../assets/fonte/PixelifySans.ttf') format('truetype');
  font-weight: 400 700;
  font-display: swap;
}

/* v0.3.1: a Cordelina também não tem ( e ), e a PixelifySans desenha os dois parecendo chaves { }.
   Só os parênteses (unicode-range U+0028-0029) saem de uma fonte comum do sistema, que já vem instalada
   (local(): nada é baixado, funciona em file://). Fica ANTES da PixelifySans na pilha (--fonte).
   Se o PC não tiver nenhuma delas, o navegador pula esta e usa a PixelifySans, como antes. */
@font-face {
  font-family: 'Parenteses';
  src: local('Arial'), local('ArialMT'), local('Helvetica'), local('DejaVu Sans'), local('Liberation Sans');
  font-weight: 400;
  unicode-range: U+0028-0029;
}
@font-face {
  font-family: 'Parenteses';
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold'), local('DejaVu Sans Bold'), local('Liberation Sans Bold');
  font-weight: 700;
  unicode-range: U+0028-0029;
}

:root {
  --laranja: #e38e26;
  --laranja-escuro: #b76e1c;
  --roxo: #9574b1;
  --roxo-escuro: #4a3560;
  --quimono: #cecbd3;
  --escuro: #1b1420;
  --escuro-2: #2a1f33;
  --texto: #f4efe6;
  --fonte: 'Cordelina', 'Parenteses', 'PixelifySans', monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--escuro); color: var(--texto);
  font-family: var(--fonte);
  user-select: none;
}

canvas#tela {
  position: fixed; inset: 0;
  display: block;
  image-rendering: crisp-edges;   /* reserva pra navegador antigo */
  image-rendering: pixelated;     /* o que vale (a última declaração aceita ganha) */
}

#ui { position: fixed; inset: 0; pointer-events: none; }
#ui > * { pointer-events: auto; }
#ui > #hud { pointer-events: none; }
[hidden] { display: none !important; }

.tela {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 4vh 4vw;
}

/* ---------- botões ---------- */
.botao {
  font-family: var(--fonte); font-size: clamp(20px, 3vh, 36px); font-weight: 700;
  color: var(--escuro); background: var(--laranja);
  border: 3px solid var(--escuro); border-radius: 0;
  box-shadow: 0 5px 0 var(--laranja-escuro), 0 5px 0 3px var(--escuro);
  padding: 0.55em 1.6em; cursor: pointer;
  transition: transform 0.06s, background 0.1s;
}
/* um só botão em destaque: o que tem o foco (o mouse em cima move o foco, em telas/cenas.js) */
.botao:focus { background: #ffb04a; outline: none; transform: translateY(-2px);
  box-shadow: 0 5px 0 var(--laranja-escuro), 0 5px 0 3px var(--escuro), 0 0 0 6px var(--quimono); }
.botao:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--laranja-escuro), 0 2px 0 3px var(--escuro); }
.botao-secundario { background: var(--quimono); box-shadow: 0 5px 0 #8f8a99, 0 5px 0 3px var(--escuro); }
.botao-secundario:focus { background: #ffffff; }

/* ---------- carregando ---------- */
.caixa-carregando { width: min(520px, 80vw); text-align: center; font-size: clamp(16px, 2.2vh, 26px); }
.barra { height: 18px; border: 3px solid var(--quimono); background: var(--escuro-2); }
.barra-cheia { height: 100%; width: 0; background: var(--laranja); transition: width 0.1s; }

/* ---------- início ---------- */
.tela-inicio {
  background:
    radial-gradient(ellipse at 30% 60%, rgba(149, 116, 177, 0.35), transparent 60%),
    radial-gradient(ellipse at 75% 30%, rgba(227, 142, 38, 0.18), transparent 55%),
    linear-gradient(180deg, #2a1f33 0%, #1b1420 100%);
}
.inicio-caixa { display: flex; align-items: center; gap: 4vw; }
/* Retrato: ilustração em alta resolução (403x535), não pixel art em grade. Ele cabe na tela em escala
   quebrada (0,83 em 720p), então vai com filtro suave: "pixelated" engrossava umas linhas e outras não.
   Teto = altura nativa (535 px): em 1080p sai 1:1. */
.inicio-retrato {
  height: min(62vh, 535px); width: auto;
  image-rendering: auto;
  filter: drop-shadow(0 8px 0 rgba(0, 0, 0, 0.35));
}
.inicio-texto { display: flex; flex-direction: column; align-items: flex-start; }
.titulo {
  margin: 0; font-size: clamp(36px, 8vh, 96px); line-height: 0.95; font-weight: 700;
  color: var(--laranja);
  text-shadow: 4px 4px 0 var(--escuro), 7px 7px 0 var(--roxo-escuro);
}
.subtitulo {
  margin: 0.3em 0 1.4em; font-size: clamp(20px, 3.6vh, 44px); font-weight: 400;
  color: var(--quimono); text-shadow: 3px 3px 0 var(--escuro);
}
.menu { display: flex; flex-direction: column; gap: 14px; }

/* ---------- seleção de poder ---------- */
.tela-selecao { background: linear-gradient(180deg, #2a1f33 0%, #1b1420 100%); gap: 3vh; }
.titulo-tela {
  margin: 0; font-size: clamp(28px, 5.5vh, 64px); color: var(--laranja); font-weight: 700;
  text-shadow: 4px 4px 0 var(--escuro), 6px 6px 0 var(--roxo-escuro); text-align: center;
}
.cards { display: flex; gap: 2.2vw; justify-content: center; align-items: stretch; flex-wrap: wrap; }
.card-poder {
  font-family: var(--fonte); color: var(--texto); text-align: center; cursor: pointer;
  width: clamp(220px, 26vw, 380px);
  display: flex; flex-direction: column; align-items: center; gap: 1.2vh;
  padding: 2.6vh 1.6vw 2.2vh;
  background: var(--escuro-2); border: 4px solid var(--roxo); border-radius: 0;
  box-shadow: 0 8px 0 var(--roxo-escuro);
  transition: transform 0.08s, border-color 0.1s, background 0.1s;
}
/* um só card em destaque: o que tem o foco (o mouse em cima move o foco, em telas/cenas.js) */
.card-poder:focus {
  outline: none; transform: translateY(-6px); border-color: var(--laranja); background: #36283b;
  box-shadow: 0 14px 0 var(--laranja-escuro);
}
.card-icone { width: clamp(64px, 10vh, 120px); height: clamp(64px, 10vh, 120px); display: block; }
.card-icone svg { width: 100%; height: 100%; }
.elem-fisico { color: #f1eee8; }
.elem-gelo { color: #8fd8ff; }
.elem-fogo { color: #ff8a3c; }
.elem-raio { color: #ffe066; }
.elem-agua { color: #e8a35c; }      /* o Chá Fervendo é "água", mas é chá: âmbar */
.elem-vento { color: #c9f3ff; }
.elem-passivo { color: #c9a8ec; }
.elem-cura { color: #8ff08a; }
/* v0.4.0: elementos dos pacotes da Samanta, do Iasak e da Borzilda */
.elem-acido { color: #b6f04a; }
.elem-alquimia { color: #6ee0c0; }
.elem-veneno { color: #9be564; }
.elem-terra { color: #c9935a; }
.elem-mente { color: #e59bff; }
.elem-luz { color: #fff3b0; }
.elem-som { color: #ff9ecf; }
.elem-ilusao { color: #b9a6ff; }
.elem-forca { color: #b99ae0; }    /* Espadada Recheada do Musashi (força = roxo da gola) */
.card-nome { font-size: clamp(20px, 3vh, 34px); font-weight: 700; color: var(--laranja); line-height: 1.05; }
/* v0.3.1: mínimo 16 px (era 14): em 1280x720 a Cordelina em caixa alta pequena ficava com cara de 10-11 px */
.card-elemento { font-size: clamp(16px, 1.9vh, 20px); color: var(--quimono); opacity: 0.85; }
.card-desc { font-size: clamp(14px, 1.9vh, 21px); line-height: 1.3; min-height: 4em; }
.card-status { display: flex; gap: 1em; font-size: clamp(15px, 2vh, 22px); color: #ffe7b8; }
.card-golpes {
  font-size: clamp(16px, 1.9vh, 20px); color: var(--escuro); background: var(--quimono);
  padding: 0.35em 0.7em; margin-top: auto;
  text-wrap: balance;   /* se quebrar (ES/EN em 720p), quebra no meio: o número não fica sozinho na 2ª linha */
}
.dica { margin: 0; font-size: clamp(14px, 2vh, 22px); color: var(--quimono); opacity: 0.8; }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; }
.hud-xp {
  position: absolute; left: 0; right: 0; top: 0; height: clamp(20px, 2.6vh, 30px);   /* 720p: 20 px (era 18) */
  background: #1b1420; border-bottom: 3px solid #0d0a10;
}
.hud-xp-cheia {
  height: 100%; width: 0;
  background: linear-gradient(180deg, #8ff0ff 0%, #3fb3e8 55%, #2a7fc0 100%);
  transition: width 0.1s linear;
}
.hud-nivel {   /* 720p: 16 px (era 14) e alinhado com os abates, longe do canto; 1080p igual */
  position: absolute; right: 1.2vw; top: 50%; transform: translateY(-50%);
  font-size: clamp(16px, 2vh, 24px); font-weight: 700; color: #ffffff; text-shadow: 2px 2px 0 #0d0a10;
}
.hud-tempo {
  position: absolute; left: 50%; top: clamp(24px, 3.4vh, 40px); transform: translateX(-50%);
  font-size: clamp(26px, 4.4vh, 52px); font-weight: 700; color: #ffffff;
  text-shadow: 3px 3px 0 #0d0a10, -1px -1px 0 #0d0a10;
}
/* v0.3.1: horda final (14:00-15:00), "Saideira dos Capetas": faixa fixa embaixo do tempo, que fica vermelho e pulsa */
.hud-horda {
  position: absolute; left: 50%; top: clamp(62px, 8.6vh, 100px); transform: translateX(-50%);
  padding: 0.1em 0.7em; white-space: nowrap;
  font-size: clamp(16px, 2.4vh, 28px); font-weight: 700; color: #ffffff;
  background: rgba(150, 20, 20, 0.85); border: 3px solid #0d0a10; box-shadow: inset 0 0 0 2px rgba(255, 140, 90, 0.6);
  text-shadow: 2px 2px 0 #0d0a10;
  animation: horda-pulsa 1s ease-in-out infinite;
}
#hud.hud-horda-final .hud-tempo { color: #ff6b5a; }
#hud.hud-horda-final .hud-chefao { top: clamp(104px, 14.4vh, 164px); }   /* chefão ainda vivo: a barra desce um pouco */
#hud.hud-parado .hud-horda { animation-play-state: paused; }
@keyframes horda-pulsa {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.06); }
}
.hud-abates {
  position: absolute; right: 1.2vw; top: clamp(26px, 3.6vh, 42px);
  display: flex; align-items: center; gap: 0.35em;
  font-size: clamp(18px, 2.8vh, 32px); font-weight: 700; color: #ffffff; text-shadow: 2px 2px 0 #0d0a10;
}
.hud-icone { width: 1.1em; height: 1.1em; display: inline-block; color: #ffffff; filter: drop-shadow(2px 2px 0 #0d0a10); }
.hud-icone svg { width: 100%; height: 100%; }
.hud-aviso {
  position: absolute; left: 50%; top: 22%; transform: translate(-50%, 0);
  font-size: clamp(24px, 4.2vh, 50px); font-weight: 700; color: var(--laranja); white-space: nowrap;
  text-shadow: 3px 3px 0 #0d0a10, -2px -2px 0 #0d0a10, 2px -2px 0 #0d0a10, -2px 2px 0 #0d0a10;
  opacity: 0;
}
.hud-aviso.ativo { animation: aviso 1.6s ease-out forwards; }
@keyframes aviso {
  0% { opacity: 0; transform: translate(-50%, 12px) scale(0.8); }
  12% { opacity: 1; transform: translate(-50%, 0) scale(1.08); }
  25% { transform: translate(-50%, 0) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -16px); }
}

/* ---------- HUD: slots, chefão, eventos (MVP2) ---------- */
.hud-slots {
  position: absolute; left: 0.8vw; top: clamp(26px, 3.6vh, 42px);
  display: flex; flex-direction: column; gap: 0.5vh;
}
.slots-linha { display: flex; gap: 0.35vw; }
.slot {
  width: clamp(34px, 4.6vh, 54px); height: clamp(40px, 5.6vh, 64px);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px;
  padding: 3px 2px 2px; background: rgba(27, 20, 32, 0.78); border: 2px solid #0d0a10;
  box-shadow: inset 0 0 0 2px rgba(149, 116, 177, 0.55);
}
.slot-vazio { opacity: 0.45; box-shadow: inset 0 0 0 2px rgba(206, 203, 211, 0.18); }
.slot-passivo { box-shadow: inset 0 0 0 2px rgba(201, 168, 236, 0.45); }
.slot-icone { width: 72%; flex: 1; display: block; filter: drop-shadow(1px 1px 0 #0d0a10); }
.slot-icone svg { width: 100%; height: 100%; display: block; }
.slot-bolinhas { display: flex; gap: 1px; height: 5px; }
.slot-bolinhas i { width: 5px; height: 5px; background: #3a2c46; display: block; }
.slot-bolinhas i.cheia { background: var(--laranja); }

.hud-chefao {
  position: absolute; left: 50%; top: clamp(78px, 10.5vh, 120px); transform: translateX(-50%);
  width: min(56vw, 760px); display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.hud-chefao-nome {
  font-size: clamp(16px, 2.4vh, 28px); font-weight: 700; color: #ffd36b; text-shadow: 2px 2px 0 #0d0a10;
}
.hud-chefao-barra { width: 100%; height: clamp(12px, 1.8vh, 20px); background: #2b1d2e; border: 3px solid #0d0a10; }
.hud-chefao-cheia {
  height: 100%; width: 100%;
  background: linear-gradient(180deg, #ffe58a 0%, #e8a72c 55%, #b76e1c 100%);
  transition: width 0.1s linear;
}

.hud-evento {
  position: absolute; left: 50%; top: 30%; transform: translate(-50%, 0);
  /* v1.0.0 (auditoria INT-09): com left 50% a caixa só crescia até metade da tela (evento longo em 3 linhas, em cima do
     personagem); max-content larga do tamanho do texto até o teto de 92vw */
  width: max-content; max-width: 92vw; text-align: center;
  font-size: clamp(24px, 4.4vh, 52px); font-weight: 700; color: #ffd36b;
  text-shadow: 3px 3px 0 #0d0a10, -2px -2px 0 #0d0a10, 2px -2px 0 #0d0a10, -2px 2px 0 #0d0a10;
  /* v0.3.1: fundo escuro atrás do texto: sobre a horda (cheia de dourados) o amarelo sumia, ainda mais no fade */
  padding: 0.12em 0.6em; background: rgba(13, 10, 16, 0.72); box-shadow: 0 0 0 3px rgba(13, 10, 16, 0.35);
  opacity: 0;
}
.hud-evento.ativo { animation: evento 3s ease-out forwards; }
/* pausa, cartas e baú (o tempo da partida parado): os avisos do meio da tela esperam (hud.js) */
#hud.hud-parado .hud-evento, #hud.hud-parado .hud-aviso { animation-play-state: paused; }
/* v1.0.0 (auditoria INT-01, INT-08): cartas, baú e troca de fase abertos (hud.js): o centro do HUD some. visibility, não
   display: o evento e o aviso continuam parados no meio da animação e voltam de onde estavam */
#hud.hud-sem-centro .hud-tempo, #hud.hud-sem-centro .hud-horda, #hud.hud-sem-centro .hud-chefao,
#hud.hud-sem-centro .hud-evento, #hud.hud-sem-centro .hud-aviso, #hud.hud-sem-centro .hud-golpe { visibility: hidden; }
@keyframes evento {
  0% { opacity: 0; transform: translate(-50%, 14px) scale(0.85); }
  8% { opacity: 1; transform: translate(-50%, 0) scale(1.08); }
  15% { transform: translate(-50%, 0) scale(1); }
  92% { opacity: 1; }   /* fade mais curto (era 85%): translúcido, o texto se misturava com a vila */
  100% { opacity: 0; transform: translate(-50%, -10px); }
}

/* ---------- level up: 3 cartas ---------- */
/* v1.0.0 (lote L1): vão 2.2vh (era 2.6vh): com a carta mais alta da v0.9.0 (Iasak, "retratofalado", 822 px em 1080p ES)
   + Rerrolar/Banir, o título saía 2 px pelo topo e a dica 2 px por baixo */
.tela-levelup { background: rgba(20, 10, 24, 0.66); gap: 2.2vh; }
.cartas { display: flex; gap: 2vw; justify-content: center; align-items: stretch; flex-wrap: wrap; }
.carta {
  position: relative;
  font-family: var(--fonte); color: var(--texto); text-align: center; cursor: pointer;
  width: clamp(200px, 22vw, 330px);
  display: flex; flex-direction: column; align-items: center; gap: 1vh;
  padding: 2.4vh 1.4vw 2vh;
  background: var(--escuro-2); border: 4px solid var(--roxo); border-radius: 0;
  box-shadow: 0 8px 0 var(--roxo-escuro);
  transition: transform 0.08s, border-color 0.1s, background 0.1s;
}
.carta-passivo { border-color: #7d6a9a; }
.carta-reserva { border-color: #4f9a4c; box-shadow: 0 8px 0 #2b5a2a; }
/* um só cartão em destaque: o que tem o foco (o mouse em cima move o foco) */
.carta:focus {
  outline: none; transform: translateY(-6px); border-color: var(--laranja); background: #36283b;
  box-shadow: 0 14px 0 var(--laranja-escuro);
}
.carta-num {
  position: absolute; left: -4px; top: -4px; min-width: 1.6em; padding: 0.1em 0.3em;
  font-size: clamp(16px, 2.4vh, 26px); font-weight: 700; color: var(--escuro); background: var(--laranja);
  border: 3px solid var(--escuro);
}
.carta-icone { width: clamp(56px, 9vh, 104px); height: clamp(56px, 9vh, 104px); display: block; }
.carta-icone svg { width: 100%; height: 100%; }
.carta-nome { font-size: clamp(19px, 2.8vh, 32px); font-weight: 700; color: var(--laranja); line-height: 1.05; }
.carta-tag { font-size: clamp(14px, 1.9vh, 21px); color: #ffe7b8; min-height: 1.2em; }
.carta-nova .carta-tag { color: #8ff08a; }
.carta-texto {
  font-size: clamp(14px, 1.9vh, 21px); line-height: 1.3; min-height: 4em;
  display: flex; flex-direction: column; gap: 0.2em; justify-content: center;
}
.carta-linha { color: #ffffff; }

/* ---------- baú ---------- */
.tela-bau { background: rgba(20, 10, 24, 0.66); }
.caixa-bau {
  display: flex; flex-direction: column; align-items: center; gap: 1.6vh;
  padding: 3.4vh 4vw; background: var(--escuro-2); border: 4px solid #e8a72c;
  box-shadow: 0 10px 0 #7a4e10;
}
.bau-imagem {
  width: 96px; height: 96px;
  background: url('../assets/efeitos/bau-pequeno.png') -96px 0 / 192px 96px no-repeat;   /* quadro 1 = aberto */
  image-rendering: pixelated;
}
.bau-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1vh; }
.bau-item { display: flex; align-items: center; gap: 0.6em; font-size: clamp(18px, 2.6vh, 30px); }
.bau-icone { width: 1.6em; height: 1.6em; display: inline-block; }
.bau-icone svg { width: 100%; height: 100%; }
.bau-nome { font-weight: 700; color: var(--laranja); }
.bau-nivel { color: #ffe7b8; }

/* ---------- fim de jogo ---------- */
.tela-fim { background: rgba(20, 10, 24, 0.72); }
.caixa-fim {
  display: flex; flex-direction: column; align-items: center; gap: 2vh;
  padding: 4vh 5vw; background: var(--escuro-2); border: 4px solid var(--roxo);
  box-shadow: 0 10px 0 var(--roxo-escuro);
}
.frase { margin: 0; font-size: clamp(16px, 2.4vh, 28px); color: var(--quimono); text-align: center; }
.tela-fim.vitoria .caixa-fim { border-color: #e8a72c; box-shadow: 0 10px 0 #7a4e10; }
.tela-fim.vitoria .titulo-tela { color: #ffd36b; }
.resumo { display: grid; grid-template-columns: repeat(2, minmax(160px, 1fr)); gap: 1.4vh 3vw; margin: 1vh 0; }
.resumo div { display: flex; flex-direction: column; align-items: center; }
/* v1.0.0 (auditoria INT-05): o nome do poder inicial ocupa as 2 colunas. Numa coluna só, um nome longo ("Lo Rompí, Pero
   Fue por la Ciencia") dobrava a largura do resumo, as moedas desciam pra baixo dele, a caixa crescia até o topo da tela
   e o balão de fala (top 3vh) tampava o título da Vitória */
.resumo div:has(> [data-campo="poder"]) { grid-column: 1 / -1; }
.resumo dt { font-size: clamp(14px, 1.9vh, 20px); color: var(--quimono); opacity: 0.85; }
.resumo dd { margin: 0; font-size: clamp(22px, 3.6vh, 42px); font-weight: 700; color: #ffffff; text-align: center; }
.botoes { display: flex; gap: 1.6vw; flex-wrap: wrap; justify-content: center; }

/* ---------- modo dev ---------- */
#dev-painel {
  position: fixed; left: 8px; bottom: 8px; margin: 0; z-index: 10;   /* embaixo: em cima ficam os slots */
  padding: 6px 10px; background: rgba(0, 0, 0, 0.6); color: #b8ffb8;
  font: 13px/1.35 Consolas, monospace; pointer-events: none; white-space: pre;
}

/* =====================================================================
   MVP3: menus completos, seleção de personagem, pausa, diálogo
   ===================================================================== */

/* ---------- botões com ícone e apagados ---------- */
.botao-menu { display: flex; align-items: center; gap: 0.55em; min-width: 11em; font-size: clamp(18px, 2.7vh, 32px); padding: 0.45em 1.2em; }
.botao-icone { width: 1.05em; height: 1.05em; display: inline-block; flex: none; }
.botao-icone svg { width: 100%; height: 100%; display: block; }
.botao:disabled, .botao:disabled:focus,
.botao[aria-disabled="true"], .botao[aria-disabled="true"]:focus {
  opacity: 0.42; cursor: default; transform: none; background: #8f8a99;
  box-shadow: 0 5px 0 #5c5766, 0 5px 0 3px var(--escuro);
}
/* v0.9.1: apagado que continua nas setas (Rerrolar sem saldo): com o foco, fica um pouco mais aceso pra se ver */
.botao[aria-disabled="true"]:focus { opacity: 0.7; }
.menu { gap: 12px; }

/* ---------- início: menu + top 3 + versão ---------- */
.inicio-corpo { display: flex; align-items: flex-start; gap: 2.6vw; }
.painel-top {
  min-width: clamp(220px, 19vw, 330px); padding: 1.6vh 1.2vw 1.8vh;
  background: rgba(42, 31, 51, 0.88); border: 4px solid var(--roxo); box-shadow: 0 8px 0 var(--roxo-escuro);
}
.painel-top-titulo {
  margin: 0 0 1vh; display: flex; align-items: center; gap: 0.45em;
  font-size: clamp(18px, 2.6vh, 30px); color: var(--laranja); text-shadow: 2px 2px 0 var(--escuro);
}
.painel-top-titulo .botao-icone { color: #ffd36b; }
.top-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.8vh; }
.top-linha {
  display: grid; grid-template-columns: 1.6em 1.4em auto 1fr; align-items: center; gap: 0.5em;
  font-size: clamp(16px, 2.3vh, 27px);
}
.top-pos { color: var(--quimono); }
.top-icone { width: 1.3em; height: 1.3em; display: block; }
.top-icone svg { width: 100%; height: 100%; display: block; }
.top-tempo { font-weight: 700; color: #ffffff; }
.top-info { color: var(--quimono); opacity: 0.85; text-align: right; font-size: 0.85em; }
.top-linha.venceu .top-info { color: #ffd36b; opacity: 1; }
.top-vazio { margin: 0; max-width: 16em; font-size: clamp(14px, 2vh, 22px); color: var(--quimono); opacity: 0.85; }
.versao {
  position: absolute; right: 1.4vw; bottom: 1.2vh; margin: 0;
  font-size: clamp(14px, 1.9vh, 22px); color: var(--quimono); opacity: 0.75;
}

/* ---------- telas de menu (Recordes, Configurações, Saiba Mais, Sair) ---------- */
.tela-menu {
  background:
    radial-gradient(ellipse at 30% 70%, rgba(149, 116, 177, 0.25), transparent 60%),
    linear-gradient(180deg, #2a1f33 0%, #1b1420 100%);
}
.caixa-menu {
  display: flex; flex-direction: column; align-items: center; gap: 2vh;
  max-width: 94vw; max-height: 94vh; padding: 3vh 3vw;
  background: var(--escuro-2); border: 4px solid var(--roxo); box-shadow: 0 10px 0 var(--roxo-escuro);
}

/* recordes */
.tabela-recordes { border-collapse: collapse; font-size: clamp(15px, 2.2vh, 26px); }
.tabela-recordes th {
  padding: 0.3em 0.9em; color: var(--quimono); font-weight: 400; font-size: 0.85em; text-align: center;
  border-bottom: 3px solid var(--roxo);
}
.tabela-recordes td { padding: 0.32em 0.9em; text-align: center; border-bottom: 2px solid rgba(149, 116, 177, 0.25); }
.tabela-recordes .rec-pos { color: var(--quimono); }
.tabela-recordes .rec-tempo { font-weight: 700; color: #ffffff; white-space: nowrap; }
.tabela-recordes .rec-poder { text-align: left; }
.tabela-recordes .rec-data { color: var(--quimono); white-space: nowrap; }
.tabela-recordes tr.venceu .rec-tempo { color: #ffd36b; }
.rec-icone { width: 1.2em; height: 1.2em; display: inline-block; vertical-align: middle; margin-right: 0.4em; }
.rec-icone svg { width: 100%; height: 100%; display: block; }
.selo-venceu {
  margin-left: 0.5em; padding: 0.05em 0.4em; font-size: 0.7em; font-weight: 700; vertical-align: middle;
  color: var(--escuro); background: #ffd36b;
}
.marca-dev { margin-left: 0.4em; font-size: 0.75em; color: #b8ffb8; opacity: 0.8; }

/* configurações */
.caixa-config { align-items: stretch; min-width: min(760px, 92vw); }
.caixa-config .titulo-tela, .caixa-config > .botao { align-self: center; }
.config-linha {
  display: grid; grid-template-columns: minmax(10em, auto) 1fr 4.2em; align-items: center; gap: 1.2vw;
  font-size: clamp(17px, 2.5vh, 30px);
}
.config-rotulo { display: flex; align-items: center; gap: 0.5em; color: var(--quimono); }
.config-rotulo .botao-icone { color: var(--laranja); }
.config-valor { text-align: right; font-weight: 700; color: #ffffff; }
.opcoes { grid-column: 2 / 4; display: flex; gap: 0.8vw; flex-wrap: wrap; }
.opcao {
  font-family: var(--fonte); font-size: clamp(16px, 2.3vh, 27px); color: var(--texto); cursor: pointer;
  padding: 0.35em 0.9em; background: var(--escuro); border: 3px solid #5c4a70; border-radius: 0;
  box-shadow: 0 4px 0 #120d16;
}
.opcao.escolhida { background: var(--roxo-escuro); border-color: var(--laranja); color: #ffffff; }
.opcao:focus { outline: none; border-color: #ffffff; transform: translateY(-2px); box-shadow: 0 6px 0 #120d16, 0 0 0 4px var(--quimono); }
.config-dica { font-size: clamp(13px, 1.8vh, 20px); text-align: center; max-width: 40em; align-self: center; }
input.volume { -webkit-appearance: none; appearance: none; width: 100%; height: 26px; background: transparent; cursor: pointer; }
input.volume::-webkit-slider-runnable-track { height: 12px; background: var(--escuro); border: 3px solid #5c4a70; }
input.volume::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 26px; margin-top: -10px;
  background: var(--laranja); border: 3px solid var(--escuro);
}
input.volume:focus { outline: none; }
input.volume:focus::-webkit-slider-runnable-track { border-color: var(--quimono); }
input.volume:focus::-webkit-slider-thumb { background: #ffb04a; box-shadow: 0 0 0 4px var(--quimono); }

/* saiba mais */
.caixa-saiba { width: min(980px, 92vw); }
.abas { display: flex; gap: 0.8vw; }
.aba {
  font-family: var(--fonte); font-size: clamp(17px, 2.5vh, 30px); font-weight: 700; color: var(--quimono); cursor: pointer;
  padding: 0.35em 1em; background: var(--escuro); border: 3px solid #5c4a70; border-radius: 0;
}
.aba.escolhida { color: var(--escuro); background: var(--laranja); border-color: var(--escuro); }
.aba:focus { outline: none; box-shadow: 0 0 0 4px var(--quimono); }
.aba-painel {
  width: 100%; max-height: 54vh; overflow-y: auto; padding: 1.4vh 1.4vw;
  background: rgba(27, 20, 32, 0.7); border: 3px solid #3d2e4c;
  font-size: clamp(15px, 2.2vh, 25px); line-height: 1.4;
}
/* Barra de rolagem sempre visível (com barra "overlay" do sistema ela some até passar o mouse):
   mostra que os Créditos continuam pra baixo. Rola com a roda do mouse, a barra ou PageUp/PageDown. */
.aba-painel::-webkit-scrollbar { width: 12px; }
.aba-painel::-webkit-scrollbar-track { background: #1b1420; }
.aba-painel::-webkit-scrollbar-thumb { background: var(--roxo); border: 2px solid #1b1420; }
.aba-painel::-webkit-scrollbar-thumb:hover { background: var(--laranja); }
.historia-texto { margin: 0; }
.controles-lista { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 0.6em; }
.creditos-autoria { margin: 0 0 0.3em; font-weight: 700; color: var(--laranja); }
.creditos-terceiros { margin: 0.9em 0 0.3em; font-size: 1.05em; color: var(--quimono); }
.creditos-grupo h3 { margin: 0.9em 0 0.3em; font-size: 1em; color: #ffd36b; border-bottom: 2px solid #3d2e4c; }
.creditos-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45em; }
.credito { display: flex; flex-direction: column; }
.credito-item { color: #ffffff; }
.credito-detalhes { font-size: 0.9em; color: var(--quimono); opacity: 0.9; word-break: break-word; }   /* era 0,82em: ~13 px em 720p */
.credito-detalhes a { color: #9fdcff; }
.creditos-avisos { margin-top: 1em; }
.creditos-aviso { margin: 0 0 0.6em; font-size: 0.9em; color: var(--quimono); opacity: 0.9; }

/* sair */
.caixa-sair { max-width: min(720px, 92vw); }

/* ---------- seleção de personagem ---------- */
.card-personagem {
  font-family: var(--fonte); color: var(--texto); text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 2vw; max-width: min(1100px, 70vw);
  padding: 2.4vh 2vw; background: var(--escuro-2); border: 4px solid var(--roxo); border-radius: 0;
  box-shadow: 0 8px 0 var(--roxo-escuro);
  transition: transform 0.08s, border-color 0.1s, background 0.1s;
}
.card-personagem:focus {
  outline: none; transform: translateY(-6px); border-color: var(--laranja); background: #36283b;
  box-shadow: 0 14px 0 var(--laranja-escuro);
}
.personagem-retrato { height: min(46vh, 420px); width: auto; image-rendering: auto; flex: none; }   /* suave: ver .inicio-retrato */
.personagem-texto { display: flex; flex-direction: column; gap: 1vh; }
.card-personagem .card-nome { font-size: clamp(26px, 4.4vh, 52px); }
.personagem-titulo { font-size: clamp(15px, 2.2vh, 25px); color: #ffe7b8; }
.personagem-desc { font-size: clamp(14px, 2vh, 22px); line-height: 1.3; color: var(--quimono); max-width: 34em; }
.personagem-status { display: flex; gap: 2.4vw; margin-top: 0.6vh; }
.status-titulo { margin: 0 0 0.5vh; font-size: clamp(16px, 2.3vh, 26px); color: var(--laranja); }
.status-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4vh; }
.status-item { display: grid; grid-template-columns: 1.3em auto 1fr; align-items: center; gap: 0.5em; font-size: clamp(14px, 2vh, 23px); }
.status-icone { width: 1.2em; height: 1.2em; display: block; color: #c9a8ec; }
.status-icone svg { width: 100%; height: 100%; display: block; }
.status-nome { color: var(--quimono); }
.status-valor { text-align: right; font-weight: 700; color: #ffffff; min-width: 4.5em; }
.card-embreve {
  cursor: default; flex-direction: column; justify-content: center; align-self: stretch; gap: 1.4vh;
  width: clamp(160px, 14vw, 240px); opacity: 0.5; border-style: dashed; box-shadow: none; text-align: center;
}
/* v0.4.0: os 4 personagens lado a lado (retrato em cima, status embaixo); descrição do focado embaixo dos cards */
#cards-personagem { flex-wrap: nowrap; gap: 1.4vw; width: 100%; }
#cards-personagem .card-personagem {
  flex: 1 1 0; min-width: 0; max-width: 23vw; flex-direction: column; align-items: stretch; gap: 0.8vh; padding: 1.6vh 1vw;
}
#cards-personagem .personagem-moldura { display: flex; justify-content: center; align-items: flex-end; height: min(27vh, 300px); }
#cards-personagem .personagem-retrato { height: 100%; }
#cards-personagem .personagem-texto { gap: 0.6vh; }
#cards-personagem .card-nome { font-size: clamp(22px, 3.6vh, 44px); text-align: center; }
#cards-personagem .personagem-titulo { font-size: clamp(12px, 1.7vh, 20px); text-align: center; min-height: 2.5em; }
#cards-personagem .personagem-status { flex-direction: column; gap: 0.8vh; margin-top: 0.2vh; }
#cards-personagem .status-titulo { font-size: clamp(13px, 1.8vh, 21px); margin-bottom: 0.3vh; }
#cards-personagem .status-lista { gap: 0.15vh; }
#cards-personagem .status-item { font-size: clamp(11px, 1.6vh, 19px); }
#cards-personagem .status-valor { min-width: 3em; }
.selecao-detalhe {
  margin: 0; max-width: min(1500px, 86vw); min-height: 2.6em; text-align: center;
  font-size: clamp(13px, 1.9vh, 22px); line-height: 1.3; color: var(--quimono);
}
.embreve-interrogacao { font-size: clamp(48px, 9vh, 110px); color: var(--roxo); line-height: 1; }
.embreve-texto { font-size: clamp(15px, 2.1vh, 24px); color: var(--quimono); }

/* ---------- HUD: botão de pausa ---------- */
#hud .hud-pausa {
  pointer-events: auto; position: absolute; right: 1.2vw; top: clamp(62px, 8.6vh, 100px);
  width: clamp(36px, 4.6vh, 54px); height: clamp(36px, 4.6vh, 54px); padding: 6px; cursor: pointer;
  color: #ffffff; background: rgba(27, 20, 32, 0.78); border: 2px solid #0d0a10; border-radius: 0;
  box-shadow: inset 0 0 0 2px rgba(149, 116, 177, 0.55);
}
#hud .hud-pausa:hover, #hud .hud-pausa:focus { outline: none; color: var(--laranja); box-shadow: inset 0 0 0 2px var(--laranja); }
.hud-pausa span, .hud-pausa svg { width: 100%; height: 100%; display: block; }

/* ---------- HUD: Espadada Marrenta (v0.4.0), embaixo no meio: tecla Espaço + barra da recarga ---------- */
.hud-golpe {
  position: absolute; left: 50%; bottom: clamp(14px, 3vh, 36px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.45em; padding: 0.25em 0.6em 0.25em 0.4em;
  font-size: clamp(15px, 2.1vh, 26px); font-weight: 700; color: #ffffff; text-shadow: 2px 2px 0 #0d0a10;
  background: rgba(27, 20, 32, 0.78); border: 2px solid #0d0a10; box-shadow: inset 0 0 0 2px rgba(149, 116, 177, 0.55);
}
.hud-golpe-icone { width: 1.5em; height: 1.5em; display: block; color: #c9a3ff; filter: drop-shadow(1px 1px 0 #0d0a10); }
.hud-golpe-icone svg { width: 100%; height: 100%; display: block; }
.hud-golpe-tecla {
  padding: 0.05em 0.45em; border: 2px solid #0d0a10; background: #3a2c46; color: #efe0ff;
  box-shadow: inset 0 -3px 0 rgba(13, 10, 16, 0.55);
}
.hud-golpe-barra { width: clamp(70px, 9vh, 120px); height: clamp(8px, 1.1vh, 14px); background: #2b1d2e; border: 2px solid #0d0a10; overflow: hidden; }
.hud-golpe-cheia {
  width: 100%; height: 100%; transform-origin: 0 50%;
  background: linear-gradient(180deg, #e6d2ff 0%, #a77bff 55%, #6d43c9 100%);
}
/* pronto: a tecla e a moldura acendem */
.hud-golpe.pronto { box-shadow: inset 0 0 0 2px #c9a3ff; }
.hud-golpe.pronto .hud-golpe-tecla { background: #9b6bff; color: #ffffff; }
.hud-golpe.pronto .hud-golpe-icone { color: #ffffff; }
/* os passivos da Espadada (vaga própria), em miniatura dentro da caixa */
.hud-golpe-passivos { display: flex; gap: 0.25em; margin-left: 0.2em; }
.hud-golpe-passivos[hidden] { display: none; }
.hud-golpe-passivos .slot { width: clamp(26px, 3.4vh, 40px); height: clamp(30px, 4vh, 46px); padding: 2px 1px 1px; }
.hud-golpe-passivos .slot-bolinhas { height: 4px; }
.hud-golpe-passivos .slot-bolinhas i { width: 4px; height: 4px; }
/* v1.0.0 (auditoria INT-07): slot estreito (menos de 43 px = janela com menos de 935 px de altura: 720p, 768p, celular):
   6 bolinhas de 5 px (35 px) passavam por cima da borda do slot de 34 px; com 4 px (29 px) cabem dentro da borda.
   Os passivos do golpe (slot menor, até 5 níveis) descem de 4 para 3 px pelo mesmo motivo. Pixel inteiro, sem meio px. */
@media (max-height: 934px) {
  .slot-bolinhas { height: 4px; }
  .slot-bolinhas i { width: 4px; height: 4px; }
  .hud-golpe-passivos .slot-bolinhas { height: 3px; }
  .hud-golpe-passivos .slot-bolinhas i { width: 3px; height: 3px; }
}

/* ---------- pausa ---------- */
/* v0.4.0: a Pausa abre por cima das cartas e do baú: o botão de pausa do HUD fica acima delas, e a Pausa acima dele */
#hud .hud-pausa { z-index: 3; }
.tela-pausa { background: rgba(20, 10, 24, 0.7); z-index: 4; }
.pausa-idiomas { display: flex; gap: clamp(10px, 1.4vw, 22px); align-items: center; justify-content: center; }
.bandeira {
  width: clamp(42px, 5.6vh, 66px); aspect-ratio: 3 / 2; padding: 0; cursor: pointer; background: none;
  border: 3px solid #0d0a10; border-radius: 0; box-shadow: 0 4px 0 var(--roxo-escuro); opacity: 0.7;
}
.bandeira svg { width: 100%; height: 100%; display: block; }
.bandeira.escolhida { border-color: var(--laranja); opacity: 1; }
.bandeira:hover, .bandeira:focus { outline: none; border-color: #ffffff; opacity: 1; }
.caixa-pausa {
  display: flex; flex-direction: column; align-items: center; gap: 1.8vh;
  padding: 3.4vh 4vw; background: var(--escuro-2); border: 4px solid var(--roxo); box-shadow: 0 10px 0 var(--roxo-escuro);
  max-height: 94vh;
}
.botoes-coluna { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.botoes-coluna .botao { display: flex; align-items: center; gap: 0.55em; justify-content: flex-start; font-size: clamp(18px, 2.7vh, 32px); }
.pausa-msg { margin: 0; min-height: 1.3em; font-size: clamp(16px, 2.4vh, 28px); font-weight: 700; color: #8ff08a; }
.pausa-msg.erro { color: #ff8a7a; }
.pausa-msg.ativo { animation: pisca-msg 0.5s ease-out; }
@keyframes pisca-msg { 0% { transform: scale(0.85); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
.pausa-subtitulo { margin: 0.4vh 0 0; font-size: clamp(16px, 2.3vh, 26px); color: var(--quimono); font-weight: 400; }
.pausa-build {
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(12em, auto));
  gap: 0.6vh 2vw; font-size: clamp(14px, 2vh, 22px);
}
.pausa-item { display: flex; align-items: center; gap: 0.5em; }
.pausa-icone { width: 1.4em; height: 1.4em; display: block; flex: none; }
.pausa-icone svg { width: 100%; height: 100%; display: block; }
.pausa-nome { color: #ffffff; }
.pausa-nivel { color: var(--laranja); margin-left: auto; padding-left: 0.6em; white-space: nowrap; }

/* ---------- fim: novo recorde ---------- */
.fim-recorde {
  margin: 0; padding: 0.3em 0.9em; font-size: clamp(18px, 2.8vh, 32px); font-weight: 700;
  color: var(--escuro); background: #ffd36b; box-shadow: 0 4px 0 #7a4e10;
}

/* ---------- diálogo de confirmação (por cima de tudo) ---------- */
.tela-dialogo { background: rgba(10, 6, 14, 0.72); z-index: 5; }
.caixa-dialogo {
  display: flex; flex-direction: column; align-items: center; gap: 2.4vh; max-width: min(720px, 90vw);
  padding: 3.4vh 3.4vw; background: var(--escuro-2); border: 4px solid var(--laranja); box-shadow: 0 10px 0 var(--laranja-escuro);
}
.dialogo-texto { font-size: clamp(18px, 2.7vh, 32px); color: #ffffff; line-height: 1.3; }