/* erro.css — Ache o erro na obra. A mesma mesa do Fiada: verde chapado, o
   amarelo da marca, Bree Serif nos títulos, Barlow no resto, cantos de 4px,
   sem degradê, sem vidro fosco, sem botão em pílula.
   O celular em pé é o principal: a cena ocupa a largura toda e cada região
   tocável tem pelo menos 44 px. */

html,body{height:100%}
body{
  display:flex;flex-direction:column;
  height:100dvh;min-height:100dvh;
  background:var(--verde-tinta);color:#fff;
  overflow:hidden;
}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ------------------------------- topo ------------------------------- */
.topo{
  display:flex;align-items:center;gap:.9rem;flex:0 0 auto;
  padding:.3rem clamp(.6rem,2vw,1.2rem);
  background:#072b16;
}
.marca{display:flex;flex-direction:column;line-height:1;text-decoration:none}
.marca__vime{font-family:var(--display);font-size:1.05rem;color:var(--amarelo);letter-spacing:.02em}
.marca__arcade{font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.titulo{font-size:clamp(1.2rem,3.4vw,1.9rem);color:#fff;margin:0 auto}
.topo__acoes{display:flex;gap:.4rem}
.icone{
  width:36px;height:36px;border:0;border-radius:var(--raio);cursor:pointer;
  background:#16502d;color:#fff;font-size:.95rem;
  display:grid;place-items:center;transition:background var(--transicao);
}
.icone:hover{background:#1f6a3c}
.icone[aria-pressed="false"]{opacity:.5}
@media (pointer:coarse){.icone{width:44px;height:44px}}

/* Modo foco: no celular o cabeçalho sai enquanto a cena vale. A pausa fica
   no botão da base, sempre à mão. */
@media (max-width:899px){
  .jogando .topo,.jogando .zigzag{display:none}
}

/* ------------------------------- mesa ------------------------------- */
.mesa{
  flex:1 1 auto;min-height:0;
  display:flex;justify-content:center;
  padding:clamp(.3rem,1vw,.8rem);
}
.palco{
  position:relative;
  flex:1 1 auto;min-width:0;min-height:0;max-width:640px;
  display:flex;flex-direction:column;gap:.35rem;
}

/* -------------------------------- HUD -------------------------------- */
.hud{
  flex:0 0 auto;
  display:flex;align-items:center;gap:.6rem;
  background:#0f4526;border:1px solid #1c5e37;border-top:3px solid var(--amarelo);
  border-radius:var(--raio);padding:.25rem .55rem .3rem .35rem;
}
.hud__rot{display:block;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.66);white-space:nowrap}
.hud strong{font-family:var(--display);font-weight:400;line-height:1.1}
.hud__cena{flex:1 1 auto;min-width:0}
/* o nome da cena quebra em até duas linhas: "Cozinha e área de serviço"
   cortado em "Cozinha e…" não diz onde a pessoa está */
.hud__cena strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:.95rem;line-height:1.08}
.hud__tempo{flex:0 0 3.9rem}
.hud__tempo strong{display:block;font-size:1.25rem;color:var(--amarelo)}
.hud__tempo--fim strong{color:#ff8a6a}
.barra{display:block;height:5px;margin-top:.15rem;background:#062915;border-radius:2px;overflow:hidden}
.barra__cheia{display:block;height:100%;width:100%;background:var(--amarelo);transition:width .25s linear}
.hud__tempo--fim .barra__cheia{background:#ff8a6a}
.hud__pontos{flex:0 0 auto;text-align:right}
.hud__pontos strong{display:block;font-size:1.05rem}

/* as chances são capacetes: perder uma é tirar o capacete da obra */
.capacetes{display:flex;gap:3px;margin-top:.2rem}
.capacetes i{display:block;width:15px;height:10px;border-radius:8px 8px 1px 1px;background:var(--amarelo);box-shadow:inset 0 -3px 0 #c9a000}
.capacetes i.perdida{background:#275a3a;box-shadow:none}

/* ------------------------------ Vimezito ------------------------------
   Uma tira com dez caras (testes/erro-caras.py). O data-cara escolhe o
   quadro: posição = índice ÷ 9. A ordem é a de CARAS no script. */
.vime{
  display:block;flex:0 0 auto;aspect-ratio:115/160;
  background:url(vimezito-busto.webp) no-repeat 0 0/1000% 100%;
}
.vime[data-cara="feliz"]{background-position:11.111% 0}
.vime[data-cara="festa"]{background-position:22.222% 0}
.vime[data-cara="piscadinha"]{background-position:33.333% 0}
.vime[data-cara="susto"]{background-position:44.444% 0}
.vime[data-cara="triste"]{background-position:55.556% 0}
.vime[data-cara="derrota"]{background-position:66.667% 0}
.vime[data-cara="concentrado"]{background-position:77.778% 0}
.vime[data-cara="orgulho"]{background-position:88.889% 0}
.vime[data-cara="bico"]{background-position:100% 0}
.vime--hud{height:54px}
.vime--tela{height:92px;margin:0 auto .3rem}
.vime--cartao{height:80px}

@media (prefers-reduced-motion:no-preference){
  .vime.pula{animation:pula .5s ease-out 2}
  .vime.treme{animation:treme .1s linear 6}
  .vime.tomba{animation:tomba .45s ease-out forwards}
}
@keyframes pula{40%{transform:translateY(-7px) rotate(-3deg)}}
@keyframes treme{25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}
@keyframes tomba{to{transform:rotate(7deg) translateY(2px)}}

/* ------------------------------- a cena -------------------------------
   A cena é sempre 360 x 500. O container mede o espaço livre e o SVG ocupa
   o maior retângulo 360:500 que cabe — sem faixa sobrando, pra toque fora
   do desenho não contar como toque no vazio. */
.cena{
  position:relative;flex:1 1 auto;min-height:0;
  display:flex;align-items:center;justify-content:center;
  container-type:size;
}
.cena:focus{outline:none}
.cena__svg{display:block;width:100%;height:100%;border-radius:var(--raio);box-shadow:0 0 0 2px var(--amarelo);touch-action:manipulation;user-select:none;-webkit-user-select:none}
@supports (width:1cqw){
  .cena__svg{width:min(100cqw,72cqh);height:min(100cqh,138.889cqw)}
}
.cena .t{font-family:var(--corpo);font-weight:700;letter-spacing:.02em}

/* regiões tocáveis: invisíveis, mas com a borda no foco do teclado */
.alvo{cursor:pointer;outline:none}
.alvo__area{fill:transparent;stroke:transparent;stroke-width:3;pointer-events:all}
@media (hover:hover){
  .alvo:hover .alvo__area{stroke:rgba(252,252,0,.7);stroke-dasharray:6 4}
}
.alvo:focus-visible .alvo__area{stroke:#fcfc00;stroke-width:4;fill:rgba(252,252,0,.14)}
.alvo--dica .alvo__area{stroke:#fcfc00;stroke-width:5;fill:rgba(252,252,0,.2)}
@media (prefers-reduced-motion:no-preference){
  .alvo--dica .alvo__area{animation:pisca .5s ease-in-out 6}
}
@keyframes pisca{50%{stroke-opacity:0;fill-opacity:0}}

/* marcas desenhadas por cima da cena */
.m-sombra{fill:none;stroke:rgba(10,20,14,.6);stroke-width:6}
.m-achado{fill:rgba(252,252,0,.12);stroke:#fcfc00;stroke-width:3}
.m-perdido{fill:rgba(255,90,60,.12);stroke:#ff5a3c;stroke-width:3;stroke-dasharray:8 5}
.m-selo{stroke:#0b3b1f;stroke-width:1.5}
.m-selo--achado{fill:#fcfc00}
.m-selo--perdido{fill:#ff5a3c}
.m-num{font-family:var(--display);font-size:13px;fill:#0b3b1f;text-anchor:middle}
.m-certo circle{fill:#03c800;stroke:#0b3b1f;stroke-width:1.5}
.m-certo path{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.m-vazio circle{fill:rgba(255,255,255,.25);stroke:#fff;stroke-width:2}
.m-vazio text{font-family:var(--corpo);font-weight:700;font-size:12px;fill:#fff;stroke:#0b3b1f;stroke-width:3;paint-order:stroke;text-anchor:middle}
@media (prefers-reduced-motion:no-preference){
  .m-vazio{animation:some .9s ease-out forwards}
}
@keyframes some{to{opacity:0}}

/* ------------------------------- base ------------------------------- */
.base{flex:0 0 auto;display:flex;align-items:center;gap:.5rem;min-height:48px}
.achados{display:flex;gap:4px;flex:0 0 auto}
.achados i{display:block;width:14px;height:14px;border-radius:50%;border:2px solid var(--amarelo)}
.achados i.sim{background:var(--amarelo)}
.base__linha{flex:1 1 auto;margin:0;font-size:.82rem;line-height:1.25;color:rgba(255,255,255,.8)}
.btn--dica{flex:0 0 auto;min-height:44px;padding:.55rem 1rem}
.btn--dica:disabled{opacity:.5;cursor:not-allowed;background:#16502d;color:#fff}
.icone--base{flex:0 0 auto;width:44px;height:44px}
@media (min-width:900px){.icone--base{display:none}}

/* aviso curto por cima da base da cena */
.aviso{
  position:absolute;left:.4rem;right:.4rem;bottom:calc(48px + .7rem);z-index:4;
  background:#fff;color:var(--tinta);
  border:2px solid var(--verde-tinta);border-left:6px solid var(--verde-vivo);border-radius:var(--raio);
  padding:.55rem .7rem;font-size:.88rem;line-height:1.38;
  pointer-events:none;   /* aviso não segura o dedo: o toque passa pra cena */
}
.aviso b{font-weight:700;color:var(--verde-escuro)}
.aviso--dica{border-left-color:#d8b600}
.aviso__custo{display:inline-block;margin-left:.2rem;font-weight:700;color:#a8231a;white-space:nowrap}

/* ------------------------------- telas ------------------------------- */
/* Opaca de propósito: na pausa o relógio para, e a cena não pode ficar à
   vista pra ser estudada de graça. O -3px cobre a moldura amarela da cena. */
.tela{
  position:absolute;inset:-3px;z-index:6;
  display:grid;place-items:center;align-content:safe center;
  overflow-y:auto;padding:1rem;
  background:#04231a;border-radius:var(--raio);
}
.tela__caixa{width:100%;max-width:25rem;text-align:center}
.tela h2{font-size:clamp(1.6rem,6.4vw,2.3rem);color:var(--amarelo);margin:0 0 .5rem;line-height:1.1}
.tela__linha{font-size:.95rem;line-height:1.45;color:rgba(255,255,255,.88);margin:0 0 .8rem}
.tela__dica{font-size:.76rem;line-height:1.45;color:rgba(255,255,255,.66);margin:.7rem 0}
.regras{list-style:none;padding:0;margin:0 0 .4rem;display:grid;gap:.28rem;text-align:left;font-size:.84rem;line-height:1.4;color:rgba(255,255,255,.86)}
.regras b{color:var(--amarelo)}
kbd{font-family:var(--corpo);font-size:.7rem;font-weight:700;background:rgba(255,255,255,.16);border-radius:3px;padding:.05em .38em;border-bottom:2px solid rgba(0,0,0,.3)}
.btn--grande{width:100%;max-width:20rem;min-height:48px;font-size:1rem;padding:.8rem 1.2rem;margin-top:.3rem}
.btn--sortear{width:100%;max-width:20rem;min-height:48px;margin-top:.5rem}
.selo{display:inline-block;background:var(--amarelo);color:var(--verde-tinta);font-weight:700;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;padding:.25rem .7rem;border-radius:2px;margin:0 0 .6rem}

.resumo{display:grid;grid-template-columns:1fr 1fr;gap:.55rem 1rem;margin:0 0 .8rem;text-align:left}
.resumo dt{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.resumo dd{margin:0;font-family:var(--display);font-size:1.15rem;color:#fff}
.boletim__sub{display:block;text-align:left;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.66);margin:.3rem 0 .35rem}
.boletim__sub small{letter-spacing:.04em;text-transform:none;font-size:.7rem;color:rgba(255,255,255,.5)}
.boletim__sub--centro{text-align:center}

/* a lista dos erros: cada linha é um botão que reabre a explicação */
.lista-erros{list-style:none;padding:0;margin:0 0 .8rem;display:grid;gap:.3rem;text-align:left}
.lista-erros__item{
  width:100%;min-height:44px;display:flex;align-items:center;gap:.55rem;
  padding:.45rem .6rem;border:1px solid #1c5e37;border-radius:var(--raio);
  background:#0f4526;color:#fff;font:inherit;font-size:.88rem;line-height:1.3;text-align:left;cursor:pointer;
}
.lista-erros__item:hover{background:#16502d}
.lista-erros__marca{flex:0 0 auto;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-weight:700;font-size:.8rem}
.lista-erros__item.ok .lista-erros__marca{background:var(--amarelo);color:var(--verde-tinta)}
.lista-erros__item.falta .lista-erros__marca{background:#ff5a3c;color:#fff}

/* fim de cena: folha que sobe da base, com a cena marcada ainda visível */
.folha{
  position:absolute;left:0;right:0;bottom:0;z-index:5;
  max-height:80%;overflow-y:auto;
  background:#072b16;border-top:4px solid var(--amarelo);border-radius:var(--raio) var(--raio) 0 0;
  padding:.9rem 1rem 1rem;
}
.folha__caixa{max-width:30rem;margin:0 auto;text-align:center}
.folha h2{font-size:1.6rem;color:var(--amarelo);margin:0 0 .2rem}
.folha__linha{margin:0 0 .6rem;font-size:.9rem;line-height:1.4;color:rgba(255,255,255,.86)}
.resumo--cena{grid-template-columns:repeat(4,1fr);gap:.4rem .6rem}
.folha__ver{
  float:right;margin:-.2rem -.3rem 0 .4rem;min-height:36px;padding:.3rem .6rem;
  border:1px solid #2d7a4c;border-radius:var(--raio);background:transparent;color:#fff;
  font:inherit;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
}
.folha__ver:hover{background:#16502d}
@media (pointer:coarse){.folha__ver{min-height:44px}}
/* recolhida: sobra o título e os botões, e a cena marcada aparece inteira */
.folha--recolhida .folha__corpo{display:none}
.folha--recolhida h2{font-size:1.25rem}
.resumo--cena dd{font-size:1rem}

/* o boletim do fim */
.tela__caixa--fim{max-width:30rem}
.fim__titulo{margin:0 0 .8rem;font-size:.95rem;line-height:1.4;color:rgba(255,255,255,.86)}
.fim__titulo b{display:block;font-family:var(--display);font-weight:400;font-size:1.5rem;color:#fff;margin-bottom:.1rem}
.fim__lista{margin-bottom:.4rem}
.fim__lista h3{font-size:1rem;color:var(--amarelo);text-align:left;margin:.6rem 0 .3rem}
.fim__lista h3 small{font-family:var(--corpo);font-size:.72rem;color:rgba(255,255,255,.6);margin-left:.3rem}

/* código de produto não quebra no hífen: "CA-" numa linha e "60" na outra
   não se lê como bitola */
.nq{white-space:nowrap}

/* ------------------------------ o cartão ------------------------------ */
.cartao{
  position:fixed;inset:0;z-index:30;
  display:grid;justify-items:center;align-content:safe center;
  overflow-y:auto;padding:1rem;
  background:rgba(4,35,26,.95);
  opacity:0;transition:opacity .2s;
}
.cartao.vivo{opacity:1}
.cartao__caixa{
  width:100%;max-width:30rem;
  background:#0f4526;border:1px solid #1c5e37;border-top:5px solid var(--amarelo);border-radius:var(--raio);
  padding:.9rem 1rem 1.1rem;
  transform:translateY(8px);transition:transform .24s cubic-bezier(.2,.9,.3,1.2);
}
.cartao.vivo .cartao__caixa{transform:none}
.cartao__topo{display:flex;align-items:center;gap:.8rem;margin-bottom:.65rem}
.cartao__selo{display:inline-block;background:var(--amarelo);color:var(--verde-tinta);font-weight:700;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;padding:.2rem .55rem;border-radius:2px}
.cartao__titulo{font-size:clamp(1.35rem,5.6vw,1.8rem);color:var(--amarelo);line-height:1.12;margin-top:.35rem}
.cartao__porque{margin:0 0 .7rem;font-size:1rem;line-height:1.5;color:rgba(255,255,255,.94)}
.cartao__certo{margin:0 0 .7rem;padding:.5rem .7rem .55rem;border-left:4px solid var(--verde-vivo);border-radius:0 var(--raio) var(--raio) 0;background:rgba(255,255,255,.07)}
.cartao__certo p{margin:0;font-size:.97rem;line-height:1.45;color:#fff}
.cartao__rot{display:block;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--verde-vivo);margin-bottom:.15rem}
.cartao__loja{margin:0 0 .9rem;font-size:.9rem;line-height:1.4;color:rgba(255,255,255,.88)}
.cartao__loja .cartao__rot{color:var(--amarelo)}
.cartao .btn--grande{display:flex;margin:.2rem auto 0}

/* ------------------------------ telas largas ------------------------------ */
@media (min-width:900px){
  /* no computador a cena é limitada pela ALTURA; o painel acompanha a
     largura dela (0,72 da altura livre) pra não sobrar HUD largo em cima de
     cena estreita */
  .palco{max-width:min(640px,max(460px,calc((100dvh - 200px) * .72)))}
  .vime--hud{height:64px}
  .hud__cena strong{font-size:1.2rem}
  .hud{gap:1rem;padding-right:.9rem}
  .base__linha{font-size:.9rem}
}

/* celular deitado: pouca altura, a cena manda */
@media (max-height:520px) and (orientation:landscape){
  .topo{padding:.2rem .6rem}
  .vime--hud{height:40px}
  .hud__rot{display:none}
  .base{min-height:44px}
  .base__linha{display:none}
}