/* Jogos (18/10): estilo comum. Pixel art nítida no canvas (escala inteira no motor.js), texto e botões em HTML.
   Borda "pixelada" = sombras em degrau, sem imagem. Celular primeiro: uma coluna; a partir de 900 px, palco ao lado
   da conversa, e a partida inteira cabe na altura útil da tela. */
.caixa-vermelha{--cor-caixa:#f32b23}
.vv-mini,.vv-previa{image-rendering:pixelated;image-rendering:crisp-edges}
.px{box-shadow:0 -4px 0 0 var(--tinta),0 4px 0 0 var(--tinta),-4px 0 0 0 var(--tinta),4px 0 0 0 var(--tinta)}

/* Página /jogos: um cartão por jogo, com a prévia do link como capa. */
.jg-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),520px));justify-content:center;gap:28px;width:100%;margin:0;padding:0 0 40px;list-style:none}
.jg-jogo a{display:grid;gap:10px;padding:12px 12px 16px;color:var(--tinta);text-decoration:none;background:#fff;
  box-shadow:0 -4px 0 0 var(--tinta),0 4px 0 0 var(--tinta),-4px 0 0 0 var(--tinta),4px 0 0 0 var(--tinta),8px 8px 0 0 var(--tinta)}
.jg-jogo a:hover,.jg-jogo a:focus-visible{background:#ffe9a8}
.jg-jogo a:focus-visible{outline:4px solid var(--azul);outline-offset:6px}
.jg-jogo img{display:block;width:100%;height:auto}
.jg-nome{font:900 clamp(22px,2vw,28px)/1 var(--tit);text-transform:uppercase}
.jg-desc{font:600 16px/1.35 var(--texto)}
.jg-cta{justify-self:start;padding:10px 16px;min-height:44px;display:inline-grid;place-items:center;font:900 18px/1 var(--tit);text-transform:uppercase;color:#fff;background:#f32b23;
  box-shadow:0 -3px 0 0 var(--tinta),0 3px 0 0 var(--tinta),-3px 0 0 0 var(--tinta),3px 0 0 0 var(--tinta),5px 5px 0 0 var(--tinta)}

/* Tela de título (A5) */
.vv-jogar{margin-top:6px;min-height:52px;padding:0 22px;font:900 clamp(18px,2vw,24px)/1 var(--tit);text-transform:uppercase;color:#ffd400;background:var(--tinta);border:0;cursor:pointer;
  box-shadow:0 -4px 0 0 var(--tinta),0 4px 0 0 var(--tinta),-4px 0 0 0 var(--tinta),4px 0 0 0 var(--tinta),7px 7px 0 0 var(--vermelho);animation:vv-pisca-txt 1.1s steps(2) infinite}
.vv-jogar:active{translate:3px 3px}
@keyframes vv-pisca-txt{50%{color:#fff}}
.vv-lead{max-width:44ch;margin:0;font:600 clamp(17px,1.6vw,20px)/1.35 var(--texto);text-wrap:pretty}
.vv-jogue{display:inline-block;margin-right:.3em;padding:.1em .4em;background:var(--vermelho);color:#fff;font:900 1.05em/1.2 var(--tit);text-transform:uppercase;letter-spacing:.01em}

/* Escolha: trilho de cartões */
.vv-lista{display:flex;gap:20px;margin:0;padding:8px 6px 14px;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.vv-lista::-webkit-scrollbar{display:none}
.vv-pessoa{flex:0 0 min(78vw,236px);scroll-snap-align:start;display:grid;justify-items:center;gap:6px;padding:18px 16px 16px;background:#fff;text-align:center;
  box-shadow:0 -4px 0 0 var(--tinta),0 4px 0 0 var(--tinta),-4px 0 0 0 var(--tinta),4px 0 0 0 var(--tinta),8px 8px 0 0 var(--tinta)}
.vv-mini{width:192px;height:192px;background:#ffd400}
.vv-pessoa h3{margin:6px 0 0;font:900 clamp(22px,2vw,26px)/1 var(--tit);text-transform:uppercase}
.vv-quem{margin:0;font:700 14px/1.2 var(--texto);color:#555}
.vv-abre{flex:1;margin:4px 0 8px;font:600 15px/1.3 var(--texto);font-style:italic;min-height:3.9em}
.vv-pessoa .btn-vermelho{min-height:48px;font-size:20px}

/* Partida */
.vv-jogo{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;max-width:calc(var(--largura) + 2 * var(--margem));margin:0 auto;padding:8px var(--margem) 8px}
.vv-lado{display:grid;justify-items:center;gap:4px}
.vv-palco{display:flex;justify-content:center;width:100%}
.vv-palco canvas{display:block;background:#ffd400;box-shadow:0 -4px 0 0 var(--tinta),0 4px 0 0 var(--tinta),-4px 0 0 0 var(--tinta),4px 0 0 0 var(--tinta)}
.vv-nome{margin:2px 0 0;font:900 clamp(16px,1.8vw,22px)/1 var(--tit);text-transform:uppercase}
.vv-relogio{margin:0;font:800 14px/1.2 var(--texto);background:var(--tinta);color:#ffd400;padding:4px 10px}
.vv-info{display:grid;justify-items:center;gap:4px;width:100%}
.vv-tela{position:relative;line-height:0}
/* Botão de som sobre o canto da cena: não ocupa altura (no celular a partida precisa caber na tela). */
.vv-som{position:absolute;top:8px;right:8px;min-height:44px;padding:0 12px;font:800 13px/1 var(--texto);color:var(--tinta);background:#fff;border:3px solid var(--tinta);cursor:pointer}
/* Caixa de diálogo sobre a cena (estilo Hades): a fala da pessoa se digita aqui e depois vai para a conversa.
   O tamanho da letra acompanha a largura da cena (vira-voto.js define font-size em px ao medir o canvas). */
.vv-dialogo{position:absolute;left:52%;right:2.5%;bottom:6%;padding:.75em .95em 1.1em;line-height:1.35;font:600 15px/1.35 var(--texto);color:var(--tinta);background:#fffdf3;box-shadow:0 -4px 0 0 var(--tinta),0 4px 0 0 var(--tinta),-4px 0 0 0 var(--tinta),4px 0 0 0 var(--tinta),8px 8px 0 0 rgba(17,17,17,.35);cursor:pointer}
.vv-dialogo[hidden]{display:none}
@media (max-width:600px){.vv-dialogo{bottom:4%;padding:.6em .75em .95em}}
.vv-dialogo-nome{position:absolute;left:-4px;top:-4px;transform:translateY(-100%);margin:0;display:flex;align-items:baseline;gap:.5em;padding:.35em .7em .3em;background:#f32b23;color:#fff;box-shadow:0 -4px 0 0 var(--tinta),0 4px 0 0 var(--tinta),-4px 0 0 0 var(--tinta),4px 0 0 0 var(--tinta);white-space:nowrap}
.vv-dialogo-nome b{flex:none;font:900 1em/1 var(--tit);text-transform:uppercase}
.vv-dialogo-nome span{min-width:0;overflow:hidden;text-overflow:ellipsis;font:700 .72em/1 var(--texto);color:#ffd400}
/* A plaquinha nunca passa da caixa (bug de 18/10: no celular "SEU JORGE motorista de app" saía cortado). Caixa estreita
   (celular, tela deitada ou baixa) mostra só o nome. A medida é a largura interna da própria caixa, em em, porque a letra acompanha a cena: a plaquinha mais larga ("SEU JORGE motorista de app") tem 13,2em e a caixa precisa de 12em por dentro. */
.vv-dialogo{container-type:inline-size}
.vv-dialogo-nome{max-width:calc(100% + 8px);box-sizing:border-box}
@container (max-width:12em){.vv-dialogo-nome span{display:none}}
.vv-dialogo-texto{margin:.15em 0 0;min-height:2.7em}
.vv-dialogo-seta{position:absolute;right:.55em;bottom:.2em;font-size:.75em;line-height:1;opacity:0}
.vv-dialogo.pronto .vv-dialogo-seta{opacity:1;animation:vv-pisca 1s steps(2) infinite}
.vv-pontos{display:inline-flex;gap:5px;padding:.45em 0}
.vv-pontos span{width:8px;height:8px;background:var(--tinta);animation:vv-pula .9s steps(2) infinite}
.vv-pontos span:nth-child(2){animation-delay:.15s}
.vv-pontos span:nth-child(3){animation-delay:.3s}
@keyframes vv-pisca{50%{opacity:0}}
/* Cena estreita (celular, tela deitada): o botão encolhe para "Som" (riscado quando desligado) e vai para o canto de cima à
   esquerda, acima da cabeça (o retrato começa em y 54 de 180), longe da caixa de diálogo e da plaquinha do nome. */
.vv-tela.estreita .vv-som{top:4px;right:auto;left:4px;padding:0 10px}
.vv-tela.estreita .vv-som-estado{display:none}
.vv-som[aria-pressed="false"]{background:#f4f4f2;color:#555;text-decoration:line-through}
.vv-barras{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(100%,520px)}
.vv-barra{position:relative;display:grid;grid-template-columns:1fr auto;align-items:end;gap:2px 8px;font:800 13px/1 var(--texto);text-transform:uppercase}
.vv-barra b{font:900 16px/1 var(--tit)}
.vv-barra i{position:relative;grid-column:1/-1;height:16px;background:#fff;box-shadow:0 -3px 0 0 var(--tinta),0 3px 0 0 var(--tinta),-3px 0 0 0 var(--tinta),3px 0 0 0 var(--tinta)}
/* Os 10 blocos ficam sempre do mesmo tamanho; o valor recorta a faixa (não estica o desenho). */
.vv-barra i::after{content:'';position:absolute;inset:2px;background:repeating-linear-gradient(90deg,var(--cor) 0 calc(10% - 3px),transparent calc(10% - 3px) 10%);
  clip-path:inset(0 calc(100% - var(--v,0) * 1%) 0 0);transition:clip-path .35s steps(5)}
.vv-barra.conv{--cor:#00b923}
.vv-barra.pac{--cor:#0039bc}
.vv-barra.pac.baixa{--cor:#f32b23}
.vv-barra.pac.baixa i{animation:vv-pisca 1s steps(2) infinite}
@keyframes vv-pisca{50%{opacity:.55}}

.vv-papo{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:10px;min-height:0}
.vv-conversa{display:flex;flex-direction:column;gap:10px;margin:0;padding:12px 8px;list-style:none;overflow-y:auto;max-height:16svh;min-height:96px;background:#f4f4f2;
  box-shadow:inset 0 0 0 3px var(--tinta)}
.vv-msg{max-width:88%;padding:8px 12px;font:600 16px/1.35 var(--texto)}
.vv-msg p{margin:0}
.vv-msg.ela{align-self:flex-start;background:#fff;box-shadow:0 -3px 0 0 var(--tinta),0 3px 0 0 var(--tinta),-3px 0 0 0 var(--tinta),3px 0 0 0 var(--tinta)}
.vv-msg.eu{align-self:flex-end;background:#ffd400;box-shadow:0 -3px 0 0 var(--tinta),0 3px 0 0 var(--tinta),-3px 0 0 0 var(--tinta),3px 0 0 0 var(--tinta)}
.vv-fontes{margin-top:6px !important;font:700 13px/1.3 var(--texto)}
.vv-fonte{color:var(--azul);text-decoration:underline;text-underline-offset:2px;margin-right:6px}
.vv-msg.digitando p{display:flex;gap:5px;padding:4px 2px}
.vv-msg.digitando span{width:8px;height:8px;background:var(--tinta);animation:vv-pula .9s steps(2) infinite}
.vv-msg.digitando span:nth-child(2){animation-delay:.15s}
.vv-msg.digitando span:nth-child(3){animation-delay:.3s}
@keyframes vv-pula{50%{translate:0 -4px}}

.vv-opcoes{display:grid;gap:9px}
.vv-opcao{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:10px;width:100%;min-height:46px;padding:7px 10px;text-align:left;cursor:pointer;
  font:700 14.5px/1.28 var(--texto);color:var(--tinta);background:#fff;border:0;box-shadow:0 -3px 0 0 var(--tinta),0 3px 0 0 var(--tinta),-3px 0 0 0 var(--tinta),3px 0 0 0 var(--tinta),5px 5px 0 0 var(--tinta);
  transition:translate .1s steps(2)}
.vv-opcao:hover{background:#ffe9a8}
.vv-opcao:focus-visible{background:#ffe9a8;outline:4px solid var(--azul);outline-offset:5px}
.vv-opcao:active{translate:3px 3px}
.vv-tecla{display:grid;place-items:center;width:26px;height:26px;background:var(--tinta);color:#ffd400;font:900 15px/1 var(--tit)}

/* Fim (refeito em 18/10): grade de duas linhas. Linha 1: título do resultado | frase em primeira pessoa, com o topo
   alinhado. Linha 2: cena e texto (mesma largura) | botões e resumo. Um espaçamento só: --vv-e (12 px) dentro dos
   grupos e o dobro entre grupos e colunas. */
.vv-fim{--vv-e:12px}
.vv-fim-in{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--vv-e);width:100%;max-width:640px;margin-inline:auto}
.vv-fim-a,.vv-fim-txt,.vv-fim-b{display:grid;gap:var(--vv-e);min-width:0}
.vv-fim-a{justify-items:center}
.vv-fim-cena{display:grid;gap:var(--vv-e);width:100%}
.vv-previa{display:block;width:100%;aspect-ratio:16/9;height:auto;background:#ffd400;box-shadow:0 -4px 0 0 var(--tinta),0 4px 0 0 var(--tinta),-4px 0 0 0 var(--tinta),4px 0 0 0 var(--tinta)}
.vv-fim-texto{margin:0;font:600 18px/1.4 var(--texto);text-wrap:pretty}
.vv-fim-linha{margin:0;font:900 20px/1.2 var(--tit);text-transform:uppercase;text-wrap:balance}
.vv-acoes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--vv-e);width:100%}
.vv-acoes > *{min-width:0;padding:6px 10px;text-align:center;line-height:1.15;text-wrap:balance}
.vv-acoes-1 > *{min-height:56px}
.vv-acoes-2 > *{min-height:48px;font-size:14px}
/* Celular: os secundários em 2 colunas, o último na largura toda (em 3 colunas o texto quebrava em 3 linhas). */
@media (max-width:599.98px){.vv-acoes-2{grid-template-columns:repeat(2,minmax(0,1fr))}.vv-acoes-2 > :last-child{grid-column:1 / -1}}
.vv-usadas{width:100%;text-align:left;font:600 15px/1.4 var(--texto)}
.vv-usadas summary{cursor:pointer;font-weight:800}
.vv-usadas a{color:var(--azul)}


/* Leitor de tela: a fala inteira, enquanto o texto visível se digita */
.vv-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Reações (A3): número que sobe da barra, brilho na barra e tremida da cena no ataque */
.vv-barra{position:relative}
.vv-delta{position:absolute;right:0;top:-6px;font:900 20px/1 var(--tit);pointer-events:none;animation:vv-sobe 1.05s steps(8) forwards;text-shadow:2px 2px 0 var(--tinta)}
.vv-delta.mais{color:#00b923}
.vv-delta.menos{color:#f32b23}
@keyframes vv-sobe{0%{translate:0 0;opacity:1}100%{translate:0 -34px;opacity:0}}
.vv-barra.flash i{animation:vv-flash .5s steps(3)}
.vv-barra.flash.sobe i{animation-name:vv-flash-sobe}
@keyframes vv-flash{50%{background:#f32b23}}
@keyframes vv-flash-sobe{50%{background:#00b923}}
.vv-tela.treme{animation:vv-treme .42s steps(6)}
@keyframes vv-treme{0%,100%{translate:0 0}20%{translate:-6px 2px}40%{translate:5px -3px}60%{translate:-4px 3px}80%{translate:3px -2px}}
/* Resumo da conversa (B1) */
.vv-resumo{width:100%;text-align:left}
.vv-resumo h3{margin:0 0 8px;font:900 18px/1 var(--tit);text-transform:uppercase}
.vv-resumo ol{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.vv-resumo li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1px 10px;padding:6px 10px;background:#fff;border-left:8px solid var(--cinza);font:600 14px/1.3 var(--texto)}
.vv-resumo li b{grid-row:span 2;align-self:center;font:900 12px/1 var(--tit);text-transform:uppercase;min-width:7.2em}
.vv-r-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vv-r-efeito{color:#555;font-weight:700}
.vv-r-ouvir{border-color:#0039bc}
.vv-r-fato{border-color:#00b923}
.vv-r-sermao{border-color:#ffd400}
.vv-r-ataque{border-color:#f32b23}
.vv-licao{margin:10px 0 0;padding:10px 12px;background:var(--tinta);color:#ffd400;font:800 15px/1.35 var(--texto)}

/* Impacto da resposta (18/10): dano = vermelho nas bordas + tremida; acerto = brilho verde. Carimbo VISH!/BOA! na metade
   direita da cena, nunca sobre o personagem. */
.vv-impacto{position:absolute;inset:0;pointer-events:none;line-height:1}
.vv-impacto span{position:absolute;left:56%;top:20%;padding:.12em .35em;font:900 clamp(20px,3vw,46px)/1 var(--tit);color:#fff;opacity:0;
  text-shadow:3px 3px 0 var(--tinta);box-shadow:0 -4px 0 0 var(--tinta),0 4px 0 0 var(--tinta),-4px 0 0 0 var(--tinta),4px 0 0 0 var(--tinta)}
.vv-impacto.dano{animation:vv-dano .65s steps(6)}
.vv-impacto.dano.forte{animation-duration:.9s}
.vv-impacto.acerto{animation:vv-acerto .7s steps(6)}
.vv-impacto.dano span{background:#f32b23;animation:vv-carimbo 1s steps(8) forwards}
.vv-impacto.acerto span{background:#00b923;animation:vv-carimbo 1s steps(8) forwards}
@keyframes vv-dano{0%,15%{background:rgba(243,43,35,.5);box-shadow:inset 0 0 0 16px #f32b23}35%{background:rgba(243,43,35,.2);box-shadow:inset 0 0 0 12px #f32b23}60%{background:rgba(243,43,35,.1);box-shadow:inset 0 0 0 8px #f32b23}100%{background:transparent;box-shadow:inset 0 0 0 0 transparent}}
@keyframes vv-acerto{0%{background:rgba(255,255,255,.35);box-shadow:inset 0 0 0 12px #00b923}50%{background:transparent;box-shadow:inset 0 0 0 8px #00b923}100%{box-shadow:inset 0 0 0 0 transparent}}
@keyframes vv-carimbo{0%{opacity:1;scale:1.7;rotate:-10deg}20%{opacity:1;scale:1;rotate:-4deg}75%{opacity:1;translate:0 0}100%{opacity:0;translate:0 -14px;rotate:-4deg}}

/* Título e escolha cabem numa tela: os 5 cartões aparecem inteiros na primeira dobra (pedido de 18/10). */
.vv .vv-cabeca{padding-top:clamp(14px,3svh,36px);padding-bottom:4px;gap:10px}
.vv .vv-cabeca h1{font-size:clamp(28px,4.2vw,56px)}
.vv-lead{font-size:clamp(15px,1.35vw,18px)}
.vv-jogar{min-height:46px;font-size:clamp(16px,1.5vw,20px)}
.vv .vv-escolha{padding-top:clamp(10px,2svh,24px);gap:6px}
.vv .vv-escolha h2{font-size:clamp(24px,3.2vw,42px)}
.vv-pessoa{padding:12px 12px 12px;gap:4px}
.vv-mini{width:clamp(104px,16svh,168px);height:clamp(104px,16svh,168px)}
.vv-pessoa h3{margin-top:4px;font-size:clamp(19px,1.8vw,24px)}
.vv-abre{font-size:14px;min-height:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:2px 0 6px}

/* Fim: título, cena, texto e botões de espalhar na primeira tela; o resumo vem logo depois (no desktop, ao lado). */
.vv .vv-fim{padding-top:clamp(12px,2svh,28px)}
.vv-fim-a .titulo-caixa{font-size:clamp(26px,3.4vw,48px);line-height:1.04}
.vv-fim-texto{font-size:clamp(15px,1.25vw,18px)}
.vv-fim-linha{font-size:clamp(17px,1.7vw,24px)}
.vv-resumo ol{padding:0}

@media (min-width:900px){
  /* A partida inteira cabe entre o topo flutuante e o pé da tela: o html já reserva 80 px (scroll-padding-top). */
  .vv-jogo{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:24px;align-items:stretch;height:calc(100svh - 88px);min-height:440px;padding-top:12px}
  /* Desktop: a cena enche a coluna (motor.js mede a altura livre) e nome, relógio e barras crescem junto. */
  .vv-lado{align-content:center;gap:10px;min-height:0}
  .vv-info{gap:8px}
  .vv-nome{font-size:clamp(24px,2.4vw,36px)}
  .vv-relogio{font-size:clamp(15px,1.3vw,19px);padding:6px 14px}
  .vv-barras{width:100%;gap:20px}
  .vv-barra{font-size:clamp(14px,1.2vw,18px)}
  .vv-barra b{font-size:clamp(18px,1.6vw,26px)}
  .vv-barra i{height:clamp(20px,2vw,30px)}
  .vv-conversa{max-height:none}
  .vv-opcao{font-size:15px;padding:8px 12px;min-height:48px}
  /* Fim no desktop: duas colunas na altura útil da tela; o resumo rola dentro da coluna se for longo. */
  /* A coluna da cena tem a largura que cabe na altura (título de até 2 linhas e texto de até 3 embaixo). As duas
     colunas dividem as mesmas linhas (subgrid): título e frase começam na mesma altura, cena e botões também. */
  .vv .vv-fim{height:calc(100svh - 88px);min-height:460px;padding-top:12px;padding-bottom:16px;align-content:stretch}
  /* max(100svh, 620px): em tela larga e baixa (932x430 deitado) a conta não derruba a coluna da cena para quase zero
     (achado do Codex no PR #69); a cena fica com pelo menos 320 px e a seção rola. */
  .vv-fim-in{max-width:none;grid-template-columns:min(56%,calc((max(100svh,580px) - 400px) * 16 / 9)) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);
    column-gap:calc(var(--vv-e) * 3);row-gap:calc(var(--vv-e) * 2);height:100%;min-height:0;justify-content:center}
  .vv-fim-a,.vv-fim-txt{grid-row:1 / -1;grid-template-rows:subgrid;row-gap:calc(var(--vv-e) * 2);align-items:start;justify-items:start;min-height:0}
  .vv-fim-a .titulo-caixa{text-align:left}
  .vv-fim-b{align-self:stretch;grid-template-rows:auto auto minmax(0,1fr);align-content:start;min-height:0;row-gap:var(--vv-e)}
  .vv-fim-b .vv-acoes-2{margin-bottom:var(--vv-e)}
  .vv-resumo{min-height:0;overflow-y:auto;padding-right:4px}
}
/* Desktop baixo: a seção do fim não prende na altura da tela (o conteúdo não cabe e a página rola). */
@media (min-width:900px) and (max-height:579.98px){.vv .vv-fim{height:auto}}
@media (prefers-reduced-motion:reduce){
  .vv-barra i::after,.vv-opcao{transition:none}
  .vv-barra.pac.baixa i,.vv-msg.digitando span,.vv-pontos span,.vv-dialogo.pronto .vv-dialogo-seta,.vv-impacto,.vv-impacto span,.vv-jogar,.vv-tela.treme,.vv-barra.flash i{animation:none}
}