/* Visual arcade em todas as telas: fundo azul, títulos em Kanit itálico, painéis translúcidos e destaques em verde/limão. */
:root {
  --fn-painel: rgba(6, 22, 72, .55);
  --fn-painel-forte: rgba(6, 22, 72, .8);
  --fn-borda: rgba(255, 255, 255, .18);
  --fn-texto: #FFFFFF;
  --fn-claro: #E3EEFF;
  --fn-suave: #A9CCFF;
  --fn-tinta: #0B1E4A;
  --fn-verde: #22E05A;
  --fn-limao: #E6F53A;
  --fn-limao-sombra: #A9B51F;
  --fn-alerta: #FFB020;
  --fn-perigo: #FF5A6A;
  --fn-sombra: rgba(0, 20, 80, .45);       /* sombra azul-escura dos painéis e fotos */
  --fn-sombra-leve: rgba(0, 20, 80, .35);  /* a mesma, mais suave (botões e medidores) */
  --fn-fundo-1: #3B8BFF;
  --fn-fundo-2: #1660E8;
  --fn-fundo-3: #0A3BB0;
  --fn-fundo-4: #072A80;
  --fn-inicio-fundo: #023FCC;        /* azul do alto da arte da tela inicial */
  --fn-inicio-fundo-baixo: #003AC2;  /* azul de baixo da arte */
  --fn-inicio-caixa: #00134E;        /* fundo da caixa "pressione…" da arte */
  --fn-inicio-borda: #31FFFF;        /* borda ciano da caixa */
  --fn-inicio-borda-escura: #0291E9; /* contorno azul por fora da borda ciano */
  --fn-perigo-claro: #FF9AA4;
  --fn-perigo-forte: #E8243F;
  --fn-perigo-escuro: #8E0F25;
  --fn-azul: #2E8BFF;
  --fn-ouro: #FFC93C;
  --fn-ouro-claro: #FFF0A6;
  --fn-ouro-escuro: #B87A00;
  --fn-ouro-base: #5C3A06;
  --f-pixel: "Silkscreen", "Kanit", monospace;
  --f-arcade: "Kanit", "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-body: "Public Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

* { box-sizing: border-box; }
body {
  min-height: 100vh; color: var(--fn-texto);
  background: radial-gradient(ellipse 80% 70% at 30% 45%, var(--fn-fundo-1) 0%, var(--fn-fundo-2) 40%, var(--fn-fundo-3) 75%, var(--fn-fundo-4) 100%) fixed var(--fn-fundo-3);
  font-family: var(--f-body); font-size: 15px; line-height: 1.55;
  padding-inline: 16px; padding-block: 20px 48px;
}
.wrap { max-width: 1100px; margin: 0 auto; display: grid; gap: 20px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Painel base do jogo (medidores e ficha) */
.medidor, .ficha {
  background: var(--fn-painel); border: 2px solid var(--fn-borda); border-radius: 14px;
  box-shadow: 0 10px 28px var(--fn-sombra-leve);
}

/* Cabeçalho */
.topo { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; }
.marca h1 {
  margin: 0; font-family: var(--f-arcade); font-style: italic; font-weight: 900;
  font-size: clamp(1.9rem, 4.6vw, 2.9rem); line-height: 1; text-transform: uppercase; text-wrap: balance;
  text-shadow: 0 4px 0 rgba(0, 0, 0, .18);
}
.marca p { margin: 6px 0 0; color: var(--fn-claro); font-size: 0.92rem; }
.topo-dir { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.rodada {
  font-family: var(--f-arcade); font-style: italic; font-weight: 800; font-size: 0.9rem; letter-spacing: 0.03em; text-transform: uppercase;
  background: var(--fn-painel-forte); border: 2px solid var(--fn-borda); border-radius: 8px; padding: 5px 12px; color: var(--fn-claro);
}
.rodada b { color: var(--fn-limao); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.btn-sec {
  font-family: var(--f-arcade); font-style: italic; font-weight: 800; font-size: 0.9rem; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--fn-texto); background: transparent; border: 2px solid rgba(255, 255, 255, .5); border-radius: 8px; padding: 7px 16px; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn-sec:hover { border-color: var(--fn-texto); background: rgba(255, 255, 255, .1); }
.jogo { display: grid; gap: 20px; }

/* Tela "pressione para começar": a arte inteira centralizada, com o fundo da tela no mesmo azul dela.
   O "palco" tem a proporção da imagem, então a caixa de texto fica sempre em cima da caixa desenhada (posição em %). */
.inicio {
  position: fixed; inset: 0; z-index: 10; width: 100%; border: 0; padding: 0; cursor: pointer; overflow: hidden;
  display: grid; place-items: center; color: var(--fn-texto);
  background: linear-gradient(180deg, var(--fn-inicio-fundo), var(--fn-inicio-fundo-baixo));
}
.inicio:focus-visible { outline: none; }
/* Arte de paisagem (Home Screen.png, 1827 × 861) e a caixa desenhada nela, medida em pixels:
   627 a 1183 na horizontal e 677 a 779 na vertical. As variáveis guardam essa área em %, com uma pequena folga
   para cobri-la por inteiro; a capa em pé (no fim do arquivo) só troca esses valores. */
.inicio-palco {
  --razao-arte: calc(1827 / 861);
  --caixa-x: 34%; --caixa-y: 78.2%; --caixa-largura: 31%; --caixa-altura: 12.6%;
  --caixa-fonte: 1.45cqw;  /* bordas e brilho da caixa são em em: acompanham o tamanho do texto */
  position: relative; container-type: inline-size; aspect-ratio: var(--razao-arte);
  width: min(100vw, calc(100vh * var(--razao-arte))); width: min(100vw, calc(100dvh * var(--razao-arte)));
}
.inicio-arte {
  display: block; width: 100%; height: 100%;
  /* na máscara, #000 só marca a área visível: as bordas de cima e de baixo somem no azul do fundo */
  -webkit-mask-image: linear-gradient(transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(transparent, #000 5%, #000 95%, transparent);
}
.inicio-arte img { display: block; width: 100%; height: 100%; }
.inicio-caixa {
  position: absolute; left: var(--caixa-x); top: var(--caixa-y); width: var(--caixa-largura); height: var(--caixa-altura);
  display: grid; place-items: center; text-align: center; border-radius: 0.2em;
  background: var(--fn-inicio-caixa); border: 0.17em solid var(--fn-inicio-borda);
  box-shadow: 0 0 0 0.17em var(--fn-inicio-borda-escura), 0 0 1em color-mix(in srgb, var(--fn-inicio-borda) 55%, transparent),
              inset 0 0 0.7em color-mix(in srgb, var(--fn-inicio-borda-escura) 45%, transparent);
  font-family: var(--f-pixel); font-weight: 700; font-size: var(--caixa-fonte); line-height: 1.35; text-transform: uppercase;
}
.inicio-caixa::after {  /* brilho extra que pulsa: só a opacidade é animada */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 1.8em color-mix(in srgb, var(--fn-inicio-borda) 80%, transparent);
  animation: inicio-brilho 1.4s ease-in-out infinite alternate both;
}
@keyframes inicio-brilho { from { opacity: 0; } to { opacity: 1; } }
.inicio-caixa > span { animation: piscar 1.1s steps(1) infinite; }
.inicio-toque { display: none; }
@keyframes piscar { 50% { opacity: 0; } }

/* Avatar: a imagem é uma grade 4×2; cada célula é recortada via background-position */
.avatar-img {
  display: block; aspect-ratio: 3 / 4; border-radius: 8px;
  background: url("../img/Avatar.png") no-repeat;
  background-size: 400% 200%; background-position: var(--px, 0) var(--py, 0);
}

/* Tela de seleção de avatar */
/* Ocupa a altura da tela (menos o padding do body) para centralizar os boxes na vertical */
/* Tela de avatar no estilo "armário de personagens": vitrine do escolhido à esquerda, grade à direita */
.selecao { min-height: calc(100vh - 68px); min-height: calc(100dvh - 68px); display: grid; align-content: center; color: var(--fn-texto); }
.vitrine { display: grid; grid-template-columns: minmax(260px, 400px) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.titulo-fn {
  margin: 0 0 22px; font-family: var(--f-arcade); font-style: italic; font-weight: 900;
  font-size: clamp(2rem, 5.5vw, 3.6rem); line-height: 1; letter-spacing: 0.01em; text-transform: uppercase;
  text-shadow: 0 4px 0 rgba(0, 0, 0, .18);
}
.avatares { border: 0; margin: 0; padding: 0; min-width: 0; max-width: 560px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.avatar-opcao { position: relative; display: block; cursor: pointer; --sf-hover: var(--fn-verde); --sf-sel: var(--fn-limao); }
.avatar-opcao input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.avatar-opcao .avatar-img {
  border-radius: 10px; border: 3px solid rgba(255, 255, 255, .35);
  box-shadow: 0 6px 14px var(--fn-sombra-leve); transition: transform .15s, border-color .15s;
}

/* Hover pulsa em verde, seleção pisca em amarelo-limão */
.avatar-opcao:hover, .avatar-opcao:has(input:focus-visible), .avatar-opcao:has(input:checked) { z-index: 1; }
.avatar-opcao:hover .avatar-img,
.avatar-opcao input:focus-visible + .avatar-img {
  transform: translateY(-3px); background-image: url("../img/Hover.png");
  border-color: var(--sf-hover);
  box-shadow: 0 0 0 2px var(--sf-hover), 0 0 18px 4px color-mix(in srgb, var(--sf-hover) 80%, transparent);
  animation: sf-hover .45s ease-in-out infinite alternate;
}
.avatar-opcao input:checked + .avatar-img {
  transform: translateY(-3px); background-image: url("../img/Select.png");
  border-color: var(--sf-sel);
  box-shadow: 0 0 0 2px var(--sf-sel), 0 0 22px 6px color-mix(in srgb, var(--sf-sel) 85%, transparent);
  animation: sf-flash .35s ease-out, sf-sel .3s .35s steps(1) infinite alternate;
}
@keyframes sf-hover {
  from { box-shadow: 0 0 0 2px var(--sf-hover), 0 0 12px 2px color-mix(in srgb, var(--sf-hover) 70%, transparent); }
  to   { box-shadow: 0 0 0 2px var(--fn-texto), 0 0 26px 8px var(--sf-hover); }
}
@keyframes sf-sel {
  from { border-color: var(--sf-sel); box-shadow: 0 0 0 2px var(--sf-sel), 0 0 22px 6px color-mix(in srgb, var(--sf-sel) 85%, transparent); }
  to   { border-color: var(--fn-texto); box-shadow: 0 0 0 2px var(--fn-texto), 0 0 30px 10px var(--sf-sel); }
}
@keyframes sf-flash {
  0%   { filter: brightness(2.2) saturate(.4); transform: translateY(-3px) scale(1.08); }
  100% { filter: none; transform: translateY(-3px) scale(1); }
}

/* Vitrine do personagem escolhido */
.vitrine-esq { position: relative; display: grid; gap: 18px; }
.vitrine-esq::before {  /* brilho de "palco" sob o personagem */
  content: ""; position: absolute; left: 10%; right: 10%; top: 62%; height: 120px; z-index: -1;
  background: radial-gradient(closest-side, rgba(140, 200, 255, .55), transparent); filter: blur(6px);
}
.destaque-foto { width: min(100%, 320px); border-radius: 14px; box-shadow: 0 18px 40px var(--fn-sombra); }
.destaque-foto:not(.vazia) { background-image: url("../img/Select.png"); }
.destaque-foto.comemora { animation: sf-flash .35s ease-out; }
.destaque-foto.vazia {
  background: rgba(255, 255, 255, .12); border: 2px dashed rgba(255, 255, 255, .45); box-shadow: none;
  display: grid; place-items: center; font-family: var(--f-arcade); font-style: italic; font-weight: 900; font-size: 4rem; color: rgba(255, 255, 255, .6);
}
.destaque-info { display: grid; gap: 6px; }
.destaque-nome {
  margin: 0; font-family: var(--f-arcade); font-style: italic; font-weight: 900;
  font-size: clamp(2rem, 4.5vw, 2.8rem); line-height: 1; text-transform: uppercase; overflow-wrap: anywhere;
}
.destaque-perfil { margin: 4px 0 0; max-width: 38ch; font-size: 0.95rem; line-height: 1.45; color: var(--fn-claro); }
.btn-fn {
  justify-self: start; margin-top: 12px; border: 0; border-radius: 8px; padding: 12px 26px; cursor: pointer;
  font-family: var(--f-arcade); font-style: italic; font-weight: 800; font-size: 1.05rem; letter-spacing: 0.03em; text-transform: uppercase;
  background: var(--fn-limao); color: var(--fn-tinta); box-shadow: 0 4px 0 var(--fn-limao-sombra); transition: transform .1s, box-shadow .1s;
}
.btn-fn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 0 var(--fn-limao-sombra); }
.btn-fn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 var(--fn-limao-sombra); }
.btn-fn:focus-visible { outline: 3px solid var(--fn-texto); outline-offset: 3px; }
.btn-fn:disabled { background: rgba(255, 255, 255, .25); color: rgba(255, 255, 255, .6); box-shadow: none; cursor: not-allowed; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.acoes .btn-fn { margin-top: 0; }

/* Indicadores: barras de "vida" com segmentos inclinados */
.medidores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.medidor { padding: 12px 14px; display: grid; gap: 10px; --cor: var(--fn-verde); }
.medidor.alerta { --cor: var(--fn-alerta); }
.medidor.critico { --cor: var(--fn-perigo); border-color: var(--fn-perigo); animation: perigo .8s ease-in-out infinite alternate; }
.m-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.m-nome { font-family: var(--f-arcade); font-style: italic; font-weight: 800; font-size: 0.85rem; letter-spacing: 0.03em; text-transform: uppercase; }
.m-nome-mini { display: none; }  /* nome curto: só na barra compacta do celular */
.m-val { font-family: var(--f-arcade); font-style: italic; font-weight: 800; font-size: 0.85rem; color: var(--fn-suave); font-variant-numeric: tabular-nums; white-space: nowrap; display: flex; gap: 6px; align-items: center; }
.m-val b { font-size: 1.35rem; font-weight: 900; color: var(--fn-texto); }
.segs { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; padding-inline: 3px; }
.seg { height: 14px; border-radius: 2px; transform: skewX(-14deg); background: rgba(255, 255, 255, .14); transition: background .3s, box-shadow .3s; }
.seg.on { background: var(--cor); box-shadow: 0 0 8px color-mix(in srgb, var(--cor) 70%, transparent); }

/* Barra perdida: o segmento cheio (::before) estoura num clarão e solta estilhaços (::after, um box-shadow por fragmento).
   --atraso vem do JS e acompanha o som. Sem animação (reduced-motion), os dois ficam invisíveis e a barra só aparece vazia. */
.seg.explode { position: relative; z-index: 1; }
.seg.explode::before, .seg.explode::after { content: ""; position: absolute; opacity: 0; pointer-events: none; }
.seg.explode::before {
  inset: 0; border-radius: inherit; background: var(--cor);
  animation: estouro .45s var(--atraso, 0s) ease-out both;
}
.seg.explode::after {
  width: 4px; height: 4px; left: calc(50% - 2px); top: calc(50% - 2px); border-radius: 1px; background: var(--fn-texto);
  animation: estilhacos .55s var(--atraso, 0s) cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes estouro {
  0%   { opacity: 1; transform: scale(1); filter: none; box-shadow: none; }
  25%  { opacity: 1; transform: scale(1.9, 2.4); background: var(--fn-texto); box-shadow: 0 0 14px 6px var(--cor), 0 0 30px 10px color-mix(in srgb, var(--cor) 60%, transparent); }
  100% { opacity: 0; transform: scale(.3); background: var(--cor); box-shadow: 0 0 0 0 transparent; }
}
@keyframes estilhacos {
  0% {
    opacity: 1;
    box-shadow: 0 0 0 0 var(--cor), 0 0 0 0 var(--fn-texto), 0 0 0 0 var(--cor), 0 0 0 0 var(--fn-texto),
                0 0 0 0 var(--cor), 0 0 0 0 var(--fn-texto), 0 0 0 0 var(--cor), 0 0 0 0 var(--fn-texto);
  }
  100% {
    opacity: 0;
    box-shadow: -22px -18px 0 1px var(--cor), 18px -24px 0 0 var(--fn-texto), 26px 6px 0 1px var(--cor), -6px 24px 0 0 var(--fn-texto),
                -26px 8px 0 0 var(--cor), 8px -30px 0 1px var(--cor), 20px 22px 0 0 var(--fn-texto), -14px -30px 0 0 var(--fn-texto);
  }
}
.medidor.perdeu { animation: tremer .4s .1s ease-in-out; }
.medidor.perdeu.critico { animation: tremer .4s .1s ease-in-out, perigo .8s .5s ease-in-out infinite alternate; }
@keyframes tremer {
  0%, 100% { transform: none; }
  20% { transform: translate(-4px, 2px) rotate(-.6deg); }
  40% { transform: translate(4px, -2px) rotate(.6deg); }
  60% { transform: translate(-3px, 1px); }
  80% { transform: translate(2px, -1px); }
}
.delta { font-family: var(--f-arcade); font-style: italic; font-weight: 900; font-size: 0.85rem; padding: 0 7px; border-radius: 5px; animation: pop .4s ease-out; }
.delta.pos { color: var(--fn-tinta); background: var(--fn-verde); animation: pop .4s var(--atraso, 0s) ease-out both; }
.delta.neg { color: var(--fn-texto); background: var(--fn-perigo); }
@keyframes pop { from { transform: translateY(-6px) scale(1.3); opacity: 0; } to { transform: none; opacity: 1; } }

/* Barra ganha: fica apagada até --atraso (depois dos descontos) e então acende com um clarão */
.seg.ganha { animation: acender .35s var(--atraso, 0s) ease-out both; }
@keyframes acender {
  0%   { background: rgba(255, 255, 255, .14); box-shadow: none; }
  40%  { background: var(--fn-texto); box-shadow: 0 0 14px 4px var(--cor); transform: skewX(-14deg) scaleY(1.7); }
  100% { transform: skewX(-14deg); }
}
@keyframes perigo { to { box-shadow: 0 0 0 2px var(--fn-perigo), 0 0 22px 4px color-mix(in srgb, var(--fn-perigo) 60%, transparent); } }

/* Área principal */
/* Avatar do jogador à esquerda e o case ao lado, alinhados às bordas dos medidores */
.palco { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; align-items: start; }
.palco-avatar { position: sticky; top: 20px; margin: 0; display: grid; gap: 10px; justify-items: center; }
.palco-avatar::before {  /* mesmo brilho de "palco" da tela de seleção */
  content: ""; position: absolute; left: 5%; right: 5%; top: 55%; height: 110px; z-index: -1;
  background: radial-gradient(closest-side, rgba(140, 200, 255, .55), transparent); filter: blur(6px);
}
.palco-avatar .avatar-img { width: 100%; border-radius: 14px; box-shadow: 0 18px 40px var(--fn-sombra); }
.palco-avatar figcaption {
  font-family: var(--f-arcade); font-style: italic; font-weight: 900; font-size: 1.6rem; line-height: 1;
  text-transform: uppercase; text-align: center; overflow-wrap: anywhere;
}
/* Expressão conforme o andamento do jogo (regra em expressaoAtual() no JS); "neutra" usa o Avatar.png padrão */
.palco-avatar[data-expressao="preocupada"] .avatar-img { background-image: url("../img/Worried.png"); }
.palco-avatar[data-expressao="tensa"] .avatar-img { background-image: url("../img/Tense.png"); }
.palco-avatar[data-expressao="feliz"] .avatar-img { background-image: url("../img/Very Happy.png"); }
.palco-avatar[data-expressao="triste"] .avatar-img { background-image: url("../img/Sad.png"); }
.palco-avatar[data-expressao="venceu"] .avatar-img { background-image: url("../img/Very Happy.png"); }
.palco-avatar.troca .avatar-img { animation: trocar-expressao .4s ease-out; }
@keyframes trocar-expressao { from { filter: brightness(2.2) saturate(.4); transform: scale(1.05); } to { filter: none; transform: none; } }

.ficha { overflow: hidden; }
.ficha-meta {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 16px;
  padding: 12px 22px; background: rgba(0, 0, 0, .22); border-bottom: 2px solid var(--fn-borda);
  font-family: var(--f-arcade); font-style: italic; font-weight: 800; font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fn-suave);
}
.ficha-meta .cat { color: var(--fn-tinta); background: var(--fn-limao); border-radius: 6px; padding: 2px 10px; }

/* Caso final (chefe): borda vermelha pulsando e faixa de aviso */
.ficha.chefe { border-color: var(--fn-perigo); animation: perigo .9s ease-in-out infinite alternate; }
.ficha.chefe .ficha-meta { color: var(--fn-texto); background: color-mix(in srgb, var(--fn-perigo) 35%, transparent); }
.ficha.chefe .ficha-meta .cat { color: var(--fn-texto); background: var(--fn-perigo); }
.aviso-chefe {
  margin: 0; padding: 8px 12px; border-radius: 8px; background: rgba(255, 90, 106, .15); border: 2px solid var(--fn-perigo);
  font-family: var(--f-arcade); font-style: italic; font-weight: 800; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.03em;
  animation: entrar .4s ease-out;
}
/* Balão do tutorial (1ª rodada) */
.dica-tutorial {
  margin: 0; padding: 10px 14px; border-radius: 10px; font-size: 0.92rem; color: var(--fn-claro);
  background: rgba(230, 245, 58, .1); border: 2px dashed var(--fn-limao); animation: entrar .4s ease-out;
}
.dica-tutorial b { color: var(--fn-limao); font-family: var(--f-arcade); font-style: italic; font-weight: 800; text-transform: uppercase; }
.ficha-corpo { padding: 22px; display: grid; gap: 18px; }
.de { font-size: 0.88rem; color: var(--fn-suave); margin: 0; }
.de b { color: var(--fn-texto); font-weight: 600; }
.ficha h2 {
  margin: 0; font-family: var(--f-arcade); font-style: italic; font-weight: 800;
  font-size: clamp(1.5rem, 3.2vw, 2.1rem); line-height: 1.12; text-wrap: balance;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .18);
}
.marca-texto { background: var(--fn-limao); color: var(--fn-tinta); padding: 0 .25em; border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; text-shadow: none; }
.situacao { margin: 0; max-width: 62ch; font-size: 1.02rem; color: var(--fn-claro); }

/* Opções: botões com tecla de atalho; hover em verde e escolha em limão, como na seleção de avatar */
.opcoes { display: grid; gap: 10px; }
.opcao {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; text-align: left;
  font: inherit; color: var(--fn-texto); background: rgba(255, 255, 255, .08);
  border: 2px solid var(--fn-borda); border-radius: 10px; padding: 12px 14px; cursor: pointer;
  transition: border-color .15s, transform .15s, box-shadow .15s, background .15s;
}
/* Cartas coringa: 1 uso cada, estilo "power-up" em limão */
.coringas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.coringa {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center; text-align: left;
  font: inherit; color: var(--fn-texto); background: rgba(230, 245, 58, .08);
  border: 2px solid color-mix(in srgb, var(--fn-limao) 55%, transparent); border-radius: 10px; padding: 8px 10px; cursor: pointer;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.coringa:hover:not(:disabled) {
  transform: translateY(-2px); border-color: var(--fn-limao);
  box-shadow: 0 0 16px 2px color-mix(in srgb, var(--fn-limao) 45%, transparent);
}
.coringa:focus-visible { outline: 3px solid var(--fn-texto); outline-offset: 2px; }
.coringa:disabled { cursor: not-allowed; opacity: .4; }
.coringa.usado { border-style: dashed; }
.cor-icone { font-size: 1.3rem; }
.cor-txt b { display: block; font-family: var(--f-arcade); font-style: italic; font-weight: 800; font-size: 0.8rem; text-transform: uppercase; color: var(--fn-limao); }
.cor-txt small { display: block; font-size: 0.74rem; line-height: 1.25; color: var(--fn-claro); }

/* "Consultar o RH": direção de cada efeito embaixo do texto da opção */
.op-revela { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-family: var(--f-arcade); font-style: italic; font-weight: 800; font-size: 0.75rem; text-transform: uppercase; animation: entrar .3s ease-out; }
.op-revela .sobe { color: var(--fn-verde); }
.op-revela .desce { color: var(--fn-perigo); }

.opcao:hover:not(:disabled) {
  transform: translateY(-2px); background: rgba(255, 255, 255, .14); border-color: var(--fn-verde);
  box-shadow: 0 0 0 1px var(--fn-verde), 0 0 18px 2px color-mix(in srgb, var(--fn-verde) 55%, transparent);
}
.opcao:focus-visible, .btn-sec:focus-visible { outline: 3px solid var(--fn-texto); outline-offset: 2px; }
.opcao:disabled { cursor: default; opacity: .4; }
.opcao.escolhida {
  opacity: 1; border-color: var(--fn-limao); background: rgba(230, 245, 58, .12);
  box-shadow: 0 0 0 1px var(--fn-limao), 0 0 22px 4px color-mix(in srgb, var(--fn-limao) 50%, transparent);
  animation: sf-escolha .35s ease-out;
}
@keyframes sf-escolha { 0% { filter: brightness(1.8); transform: scale(1.02); } 100% { filter: none; transform: none; } }
.letra {
  font-family: var(--f-arcade); font-style: italic; font-weight: 900; font-size: 1.05rem; width: 34px; height: 34px;
  display: grid; place-items: center; border-radius: 7px;
  background: var(--fn-texto); color: var(--fn-tinta); box-shadow: 0 3px 0 rgba(0, 0, 0, .3);
}
.opcao:hover:not(:disabled) .letra { background: var(--fn-verde); }
.opcao.escolhida .letra { background: var(--fn-limao); box-shadow: 0 3px 0 var(--fn-limao-sombra); }
.op-texto { font-weight: 600; display: block; }

.resultado { border-top: 2px dashed var(--fn-borda); padding-top: 18px; display: grid; gap: 12px; animation: entrar .35s ease-out; }
.resultado h3, .bloco h3 {
  margin: 0; font-family: var(--f-arcade); font-style: italic; font-weight: 900; font-size: 1.05rem;
  letter-spacing: 0.03em; text-transform: uppercase; color: var(--fn-limao);
}
.resultado p { margin: 0; max-width: 62ch; color: var(--fn-claro); }
.risco { font-size: 0.92rem; padding: 10px 12px; border-radius: 8px; background: rgba(255, 255, 255, .08); }
.risco.ruim { box-shadow: inset 4px 0 0 var(--fn-perigo); }
.risco.bom { box-shadow: inset 4px 0 0 var(--fn-verde); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-family: var(--f-arcade); font-style: italic; font-weight: 800; font-size: 0.85rem; text-transform: uppercase;
  padding: 2px 10px; border-radius: 6px; background: rgba(255, 255, 255, .12);
}
.chip.pos { color: var(--fn-tinta); background: var(--fn-verde); }
.chip.neg { color: var(--fn-texto); background: var(--fn-perigo); }
/* Fim de jogo: aviso piscando enquanto a vitória ou o game over não abre */
.preparando {
  margin: 0; font-family: var(--f-arcade); font-style: italic; font-weight: 800; font-size: 0.95rem; text-transform: uppercase;
  color: var(--fn-limao); animation: piscar 1s steps(1) infinite;
}
@keyframes entrar { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Resumo da partida (depois da vitória) */
.bloco h3 { margin-bottom: 10px; }
.perfil { padding: 14px 16px; border-radius: 10px; background: rgba(230, 245, 58, .1); border: 2px solid var(--fn-limao); color: var(--fn-claro); }
.perfil b {
  display: block; margin-bottom: 4px; color: var(--fn-limao);
  font-family: var(--f-arcade); font-style: italic; font-weight: 900; font-size: 1.3rem; text-transform: uppercase;
}
.estilos { display: grid; gap: 8px; }
.estilo-linha { display: grid; grid-template-columns: 160px minmax(0, 1fr) 24px; gap: 10px; align-items: center; font-size: 0.88rem; color: var(--fn-claro); }
.estilo-barra { height: 12px; background: rgba(255, 255, 255, .14); border-radius: 3px; overflow: hidden; transform: skewX(-14deg); }
.estilo-barra span { display: block; height: 100%; background: var(--fn-limao); box-shadow: 0 0 8px color-mix(in srgb, var(--fn-limao) 70%, transparent); }
.estilo-linha .n { font-family: var(--f-arcade); font-style: italic; font-weight: 900; text-align: right; font-variant-numeric: tabular-nums; color: var(--fn-texto); }

/* Caixa de confirmação do botão "Sair" */
.confirmar {
  width: min(420px, calc(100% - 32px)); padding: 24px; border-radius: 14px; text-align: center; color: var(--fn-texto);
  background: var(--fn-tinta); border: 2px solid var(--fn-borda); box-shadow: 0 18px 40px var(--fn-sombra);
}
.confirmar::backdrop { background: rgba(4, 14, 48, .65); backdrop-filter: blur(3px); }
.confirmar h2 { margin: 0 0 6px; font-family: var(--f-arcade); font-style: italic; font-weight: 900; font-size: 1.7rem; text-transform: uppercase; }
.confirmar p { margin: 0 0 18px; color: var(--fn-claro); }
.confirmar .acoes { justify-content: center; }

/* Tela de vitória (dentro da ficha): troféu em pixel art com raios, confetes caindo, título pixelado e dois cards */
.vitoria { position: relative; display: grid; justify-items: center; gap: 14px; padding: 24px 32px 32px; text-align: center; }
.confetes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.vitoria > :not(.confetes) { position: relative; z-index: 1; }  /* conteúdo na frente dos confetes */
.confete {
  position: absolute; top: -4%; left: var(--x); width: 11px; height: 8px; border-radius: 2px; background: var(--cor); opacity: .9;
  animation: confete-cair var(--dur) var(--atraso) linear infinite both;
}
@keyframes confete-cair { from { top: -4%; transform: rotate(0); } to { top: 104%; transform: rotate(var(--giro)); } }
.trofeu { width: 150px; height: 140px; display: grid; place-items: center; animation: trofeu-pulo .7s cubic-bezier(.2, 1.5, .4, 1) both; }
.trofeu::before {  /* raios de luz girando atrás do troféu */
  content: ""; position: absolute; inset: -60%; z-index: -1; border-radius: 50%;
  background: repeating-conic-gradient(color-mix(in srgb, var(--fn-limao) 30%, transparent) 0 10deg, transparent 10deg 24deg);
  /* na máscara, #000 só marca a área visível (não é uma cor da tela) */
  -webkit-mask: radial-gradient(closest-side, #000 25%, transparent); mask: radial-gradient(closest-side, #000 25%, transparent);
  animation: girar 14s linear infinite;
}
.trofeu svg { width: 100%; height: 100%; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .25)); }
.px-o { fill: var(--fn-ouro-escuro); }
.px-y { fill: var(--fn-ouro); }
.px-l { fill: var(--fn-ouro-claro); }
.px-s { fill: var(--fn-texto); }
.px-b { fill: var(--fn-ouro-base); }
@keyframes trofeu-pulo { from { transform: translateY(-30px) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes girar { to { rotate: 360deg; } }
.ficha .vit-titulo {  /* .ficha na frente para vencer a regra .ficha h2 */
  margin: 0; font-family: var(--f-pixel); font-style: normal; font-weight: 700; font-size: clamp(2.4rem, 6.5vw, 4.6rem); line-height: 1.1; letter-spacing: -0.02em;
  text-transform: uppercase; color: var(--fn-limao);
  text-shadow: 3px 0 0 var(--fn-tinta), -3px 0 0 var(--fn-tinta), 0 3px 0 var(--fn-tinta), 0 -3px 0 var(--fn-tinta), 0 8px 0 var(--fn-ouro-escuro),
               0 0 30px color-mix(in srgb, var(--fn-limao) 50%, transparent);
  animation: go-cair .6s .15s cubic-bezier(.2, 1.4, .4, 1) both;
}
.vit-sub { margin: 0 0 6px; max-width: 34ch; font-family: var(--f-arcade); font-style: italic; font-weight: 800; font-size: clamp(1.05rem, 2.2vw, 1.4rem); line-height: 1.25; }
.vit-card {
  position: relative; width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; text-align: left;
  padding: 14px 20px; border-radius: 12px; background: var(--fn-painel-forte); border: 2px solid var(--fn-borda);
}
.vit-card-ok { border-color: var(--fn-limao); }
.vit-card h3 { margin: 0 0 2px; font-family: var(--f-arcade); font-style: italic; font-weight: 900; font-size: 1.1rem; text-transform: uppercase; color: var(--fn-limao); }
.vit-card-ok h3 { color: var(--fn-verde); }
.vit-card p { margin: 0; color: var(--fn-claro); }
.vit-icone { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: var(--fn-texto); }
.vit-icone svg { width: 60%; height: 60%; }
.vit-icone-ok { background: var(--fn-verde); }
.vit-icone-premio { background: var(--fn-azul); box-shadow: 0 0 16px color-mix(in srgb, var(--fn-azul) 60%, transparent); }
/* Resumo em destaque (2/3 da largura) e "Fechar" como ação secundária */
.vit-acoes { position: relative; width: 100%; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; margin-top: 6px; }
.vit-btn {
  display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 66px; padding: 10px 18px; cursor: pointer;
  font-family: var(--f-arcade); font-style: italic; font-weight: 900; font-size: 1.1rem; text-transform: uppercase; color: var(--fn-texto);
  background: transparent; border: 2px solid rgba(255, 255, 255, .7); border-radius: 10px; transition: transform .15s, box-shadow .15s, background .15s;
}
.vit-btn svg { width: 28px; height: 28px; flex: none; }
.vit-btn:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .1); }
.vit-btn-forte { color: var(--fn-tinta); background: var(--fn-limao); border-color: var(--fn-limao); box-shadow: 0 5px 0 var(--fn-limao-sombra); }
.vit-btn-forte:hover { background: var(--fn-limao); box-shadow: 0 7px 0 var(--fn-limao-sombra), 0 0 20px color-mix(in srgb, var(--fn-limao) 50%, transparent); }
.vit-btn:focus-visible { outline: 3px solid var(--fn-texto); outline-offset: 3px; }

/* Créditos: tela cheia sobre o fundo do jogo; o rolo sobe por transform (animação no JS), foto à esquerda e texto à direita */
.creditos { position: fixed; inset: 0; z-index: 8; overflow: hidden; background: var(--fn-fundo-3); }
.creditos::before, .creditos::after {  /* o texto entra e sai suavemente nas bordas de cima e de baixo */
  content: ""; position: absolute; left: 0; right: 0; height: 18%; z-index: 1; pointer-events: none;
}
.creditos::before { top: 0; background: linear-gradient(var(--fn-fundo-3), transparent); }
.creditos::after { bottom: 0; background: linear-gradient(transparent, var(--fn-fundo-3)); }
.cred-rolo {
  position: absolute; left: 50%; top: 0; width: min(720px, calc(100% - 32px)); translate: -50% 0;
  display: grid; gap: 56px; padding-block: 24px; will-change: transform;  /* posição vem da animação no JS */
}
.cred-cabecalho { display: grid; gap: 8px; text-align: center; }
.cred-titulo, .cred-subtitulo { margin: 0; }
.cred-titulo { font-family: var(--f-arcade); font-style: italic; font-weight: 900; font-size: clamp(2rem, 6vw, 3.4rem); text-transform: uppercase; line-height: 1; }
.cred-subtitulo { font-family: var(--f-arcade); font-style: italic; font-weight: 800; font-size: 1.1rem; text-transform: uppercase; color: var(--fn-limao); }
.cred-pessoa { display: grid; grid-template-columns: clamp(96px, 24vw, 170px) minmax(0, 1fr); gap: clamp(16px, 4vw, 32px); align-items: center; }
.cred-foto {
  width: 100%; height: auto; display: block; border-radius: 14px;
  border: 3px solid var(--fn-limao); box-shadow: 0 14px 30px var(--fn-sombra);
}
.cred-texto h3 { margin: 0 0 6px; font-family: var(--f-arcade); font-style: italic; font-weight: 900; font-size: clamp(1.15rem, 3.4vw, 1.7rem); line-height: 1.1; text-transform: uppercase; text-wrap: balance; }
.cred-texto p { margin: 0; font-size: clamp(0.92rem, 2.4vw, 1.08rem); color: var(--fn-claro); text-wrap: pretty; }
.cred-pular { position: absolute; right: 16px; bottom: 16px; z-index: 2; }

/* CIAGEP no fim: letras pixeladas caindo uma a uma em passos (sem suavizar, como nos 16 bits), a descrição surgindo
   em blocos logo depois e as duas piscando no final. O contorno fica numa variável em em: aplicada em cada texto, acompanha o tamanho dele. */
.cred-ciagep {
  position: absolute; inset: 0; z-index: 2; padding: 16px; display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: clamp(16px, 4vw, 32px); font-family: var(--f-pixel); font-weight: 700; line-height: 1.15; text-align: center; color: var(--fn-ouro);
  --contorno-pixel: 0.05em 0 0 var(--fn-tinta), -0.05em 0 0 var(--fn-tinta), 0 0.05em 0 var(--fn-tinta), 0 -0.05em 0 var(--fn-tinta),
                   0 0.1em 0 var(--fn-ouro-escuro), 0 0.15em 0 var(--fn-tinta), 0 0 0.4em color-mix(in srgb, var(--fn-ouro) 55%, transparent);
  --fim-letras: calc(var(--letras) * var(--letra) + .5s);  /* quando a última letra termina de cair */
}
.cred-ciagep p { margin: 0; text-shadow: var(--contorno-pixel); }
.cred-ciagep-nome { display: flex; gap: 0.06em; font-size: clamp(3rem, 15vw, 9rem); line-height: 1; }
.cred-ciagep-nome span {
  display: inline-block;
  animation: ciagep-cair .5s calc(var(--i) * var(--letra)) steps(5, end) both,
             ciagep-brilho .5s calc(var(--fim-letras) + .1s) steps(1, end) 3;
}
.cred-ciagep-desc {
  max-width: 24ch; font-size: clamp(1rem, 3.4vw, 1.9rem); line-height: 1.7; text-transform: uppercase; text-wrap: balance;
  animation: ciagep-revelar .8s var(--fim-letras) steps(8, end) both,
             ciagep-brilho .5s calc(var(--fim-letras) + .9s) steps(1, end) 3;
}
/* folga negativa em cima, embaixo e à direita para o recorte não cortar a sombra pixelada */
@keyframes ciagep-revelar { from { clip-path: inset(-50% 100% -50% 0); } to { clip-path: inset(-50% -10% -50% 0); } }
@keyframes ciagep-cair {
  0%   { transform: translateY(-120vh); }
  70%  { transform: translateY(0.12em); }
  100% { transform: none; }
}
@keyframes ciagep-brilho { 50% { color: var(--fn-ouro-claro); } }

/* Tela de game over: título vermelho com faíscas, avatar triste à esquerda, indicadores finais e o motivo à direita */
.gameover { min-height: calc(100vh - 68px); min-height: calc(100dvh - 68px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-content: center; }
.go-topo { position: relative; justify-self: center; max-width: 100%; display: grid; justify-items: center; gap: 4px; text-align: center; }
.go-titulo {
  margin: 0 0 8px; font-family: var(--f-arcade); font-style: italic; font-weight: 900; text-transform: uppercase;
  font-size: clamp(3.2rem, 11vw, 7.5rem); line-height: .95; letter-spacing: -0.01em;
  background: linear-gradient(180deg, var(--fn-perigo-claro) 0%, var(--fn-perigo) 45%, var(--fn-perigo-forte) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 0 var(--fn-perigo-escuro)) drop-shadow(0 0 28px color-mix(in srgb, var(--fn-perigo) 55%, transparent));
  animation: go-cair .6s cubic-bezier(.2, 1.4, .4, 1) both;
}
/* O "O" de OVER ganha um círculo escuro com um × no meio */
.go-o { position: relative; display: inline-block; }
.go-o::after {
  content: "×"; position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%);
  width: 1.2em; height: 1.2em; border-radius: 50%; font-size: .32em; line-height: 1.15em; text-align: center; font-style: normal;
  background: var(--fn-tinta); color: var(--fn-perigo); -webkit-text-fill-color: var(--fn-perigo);
}
.go-sub { margin: 0; font-family: var(--f-arcade); font-style: italic; font-weight: 800; font-size: clamp(1rem, 2.2vw, 1.35rem); text-transform: uppercase; color: var(--fn-claro); }
.go-sub2 { margin: 0; font-size: 1.05rem; color: var(--fn-claro); }
/* Faíscas: estilhaços vermelhos ao redor do título */
.go-faisca {
  position: absolute; width: 34px; height: 14px; background: var(--fn-perigo-forte);
  clip-path: polygon(0 0, 100% 40%, 0 100%); animation: go-faisca .5s .35s ease-out both;
}
.go-faisca:nth-child(1) { left: -4%;  top: 6%;  transform: rotate(35deg); }
.go-faisca:nth-child(2) { left: -9%;  top: 32%; transform: rotate(10deg); width: 26px; }
.go-faisca:nth-child(3) { left: -5%;  top: 56%; transform: rotate(-20deg); width: 20px; }
.go-faisca:nth-child(4) { right: -4%; top: 6%;  transform: rotate(145deg); }
.go-faisca:nth-child(5) { right: -9%; top: 32%; transform: rotate(170deg); width: 26px; }
.go-faisca:nth-child(6) { right: -5%; top: 56%; transform: rotate(200deg); width: 20px; }
@keyframes go-cair { from { transform: translateY(-40px) scale(1.25); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes go-faisca { from { opacity: 0; scale: .2; } to { opacity: 1; scale: 1; } }

.go-corpo { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; align-items: center; }
.go-avatar { position: relative; margin: 0 0 24px; animation: entrar .5s .2s ease-out both; }
.go-avatar .avatar-img {
  width: 100%; border-radius: 16px; background-image: url("../img/Sad.png");
  border: 3px solid color-mix(in srgb, var(--fn-perigo) 60%, transparent);
  box-shadow: 0 18px 40px var(--fn-sombra), 0 0 26px color-mix(in srgb, var(--fn-perigo) 35%, transparent);
}
.go-avatar figcaption {
  position: absolute; left: 8%; right: 8%; bottom: -22px; padding: 6px 12px; border-radius: 6px; transform: rotate(-3deg);
  background: var(--fn-perigo-forte); box-shadow: 0 6px 0 var(--fn-perigo-escuro);
  font-family: var(--f-arcade); font-style: italic; font-weight: 900; font-size: 1.8rem; line-height: 1.1; text-transform: uppercase; text-align: center;
  overflow-wrap: anywhere;
}
.go-dir { display: grid; gap: 18px; }
.go-medidores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.go-med { --cor: var(--fn-perigo); }
.go-med .m-nome { font-size: 0.74rem; }
.go-med .m-val b { color: var(--fn-perigo); }
.go-med.zerou { border-color: var(--fn-perigo); animation: perigo .8s ease-in-out infinite alternate; }
.go-alerta {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; padding: 22px 28px; border-radius: 14px;
  background: color-mix(in srgb, var(--fn-perigo-escuro) 45%, var(--fn-painel-forte));
  border: 2px solid color-mix(in srgb, var(--fn-perigo) 55%, transparent);
}
.go-icone { width: 96px; height: 96px; color: var(--fn-perigo-forte); }
.go-alerta h3 { margin: 0 0 4px; font-family: var(--f-arcade); font-style: italic; font-weight: 900; font-size: 2rem; line-height: 1.1; text-transform: uppercase; }
.go-alerta p { margin: 0; font-size: 1.05rem; color: var(--fn-claro); max-width: 60ch; }
.go-acoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 780px; }
.go-btn {
  display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 72px; padding: 12px 20px; cursor: pointer;
  font-family: var(--f-arcade); font-style: italic; font-weight: 900; font-size: 1.2rem; text-transform: uppercase; color: var(--fn-texto);
  background: var(--fn-painel-forte); border: 3px solid color-mix(in srgb, var(--fn-azul) 55%, transparent); border-radius: 12px;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.go-btn svg { width: 30px; height: 30px; flex: none; }
.go-btn-forte { border-color: var(--fn-azul); box-shadow: 0 0 18px color-mix(in srgb, var(--fn-azul) 45%, transparent); }
.go-btn:hover { transform: translateY(-2px); border-color: var(--fn-azul); box-shadow: 0 0 24px color-mix(in srgb, var(--fn-azul) 60%, transparent); }
.go-btn:focus-visible { outline: 3px solid var(--fn-texto); outline-offset: 3px; }

@media (max-width: 900px) {
  .go-corpo { grid-template-columns: 220px minmax(0, 1fr); gap: 24px; }
  .go-medidores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .go-avatar figcaption { font-size: 1.3rem; }
  .palco { grid-template-columns: 140px minmax(0, 1fr); gap: 16px; }
  .palco-avatar figcaption { font-size: 1.1rem; }
  .vitrine { grid-template-columns: minmax(0, 1fr); }
  .vitrine-dir { order: -1; }
  .vitrine-esq { grid-template-columns: 140px minmax(0, 1fr); align-items: center; }
  .avatares { max-width: none; }
}
@media (max-width: 640px) {
  /* Topo enxuto: título menor, sem subtítulo, rodada e botões numa linha só */
  .topo { align-items: center; gap: 10px; }
  .marca h1 { font-size: 1.55rem; }
  .marca p { display: none; }
  .topo-dir { width: 100%; flex-wrap: nowrap; gap: 8px; }
  .topo-dir .rodada { margin-right: auto; }
  .topo-dir .rodada, .topo-dir .btn-sec { font-size: 0.75rem; padding: 6px 10px; }
  .rodada b { font-size: 0.95rem; }

  /* Indicadores: barra compacta de 4 colunas grudada no topo da tela,
     para a jogadora ver as barras mudarem mesmo depois de rolar até as opções */
  .medidores {
    position: sticky; top: 0; z-index: 5; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px;
    margin-inline: -16px; padding: 8px 16px;
    background: color-mix(in srgb, var(--fn-fundo-3) 88%, transparent); backdrop-filter: blur(6px);
    box-shadow: 0 6px 16px var(--fn-sombra-leve);
  }
  .medidores .medidor { padding: 6px 7px 8px; gap: 5px; border-radius: 10px; }
  .medidores .m-top { flex-direction: column; align-items: flex-start; gap: 2px; }
  .medidores .m-nome { font-size: 0.6rem; letter-spacing: 0; }
  .medidores .m-nome-cheio { display: none; }
  .medidores .m-nome-mini { display: inline; }
  .medidores .m-val { font-size: 0.62rem; gap: 4px; }
  .medidores .m-val b { font-size: 1rem; }
  .medidores .delta { font-size: 0.62rem; padding: 0 4px; }
  .medidores .segs { gap: 2px; padding-inline: 1px; }
  .medidores .seg { height: 8px; }

  /* Avatar em miniatura acima do case (mantém a reação de expressão) */
  .palco { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .palco-avatar { position: static; grid-template-columns: 56px minmax(0, 1fr); justify-items: start; align-items: center; gap: 12px; }
  .palco-avatar::before { display: none; }
  .palco-avatar .avatar-img { width: 56px; border-radius: 10px; box-shadow: 0 6px 14px var(--fn-sombra); }
  .palco-avatar figcaption { font-size: 1.3rem; text-align: left; }

  /* Coringas lado a lado: ícone e nome, sem a descrição */
  .coringas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .coringa { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 4px; padding: 8px 6px; }
  .cor-txt b { font-size: 0.7rem; }
  .cor-txt small { display: none; }

  .ficha-corpo { padding: 18px 16px; }
  .ficha-meta { padding: 10px 16px; }
  .avatares { gap: 8px; }
  /* Escolha de avatar: foto e nome lado a lado, perfil embaixo e o botão em largura total */
  .vitrine-esq { grid-template-columns: 96px minmax(0, 1fr); gap: 10px 14px; align-items: end; }
  .destaque-info { display: contents; }
  .destaque-nome { align-self: end; }
  .destaque-perfil { grid-column: 1 / -1; max-width: none; margin: 0; }
  .vitrine-esq #comecar { grid-column: 1 / -1; justify-self: stretch; margin-top: 4px; }
  .destaque-nome { font-size: 1.7rem; }
  .destaque-perfil { font-size: 0.85rem; }
  .estilo-linha { grid-template-columns: 110px minmax(0, 1fr) 20px; }
  .go-corpo { grid-template-columns: minmax(0, 1fr); }
  .go-avatar { width: min(200px, 60%); justify-self: center; }
  .go-faisca { display: none; }
  .go-alerta { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 18px 16px; gap: 10px; }
  .go-icone { width: 56px; height: 56px; }
  .go-alerta h3 { font-size: 1.6rem; }
  .go-acoes { grid-template-columns: minmax(0, 1fr); }
  .go-btn { min-height: 60px; font-size: 1.05rem; }
  .vitoria { padding: 20px 16px 24px; }
  .trofeu { width: 100px; height: 100px; }
  .vit-card { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 14px 16px; gap: 10px; }
  .vit-acoes { grid-template-columns: minmax(0, 1fr); }
  .vit-btn { font-size: 0.95rem; min-height: 58px; }
}
/* Tela inicial em aparelhos de toque: sem teclado, então o texto pede um toque */
@media (hover: none) and (pointer: coarse) {
  .inicio-tecla { display: none; }
  .inicio-toque { display: inline; }
}
/* Tela inicial com a tela em pé: capa vertical (Home Screen Mobile.png, 941 × 1672), mesmo media da <source> no HTML.
   Ela cobre a tela inteira (sobras cortadas nas bordas, por isso sem máscara). Caixa desenhada nela:
   123 a 819 px na horizontal e 1295 a 1440 px na vertical. */
@media (max-aspect-ratio: 1 / 1) {
  .inicio-palco {
    --razao-arte: calc(941 / 1672);
    --caixa-x: 12.9%; --caixa-y: 77.3%; --caixa-largura: 74.4%; --caixa-altura: 9%;
    --caixa-fonte: 3.1cqw;
    position: absolute; left: 50%; top: 50%; translate: -50% -50%;  /* pode ser maior que a tela: centraliza à mão */
    width: max(100vw, calc(100vh * var(--razao-arte))); width: max(100vw, calc(100dvh * var(--razao-arte)));
  }
  .inicio-arte { -webkit-mask-image: none; mask-image: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}