/* HUD em DOM por cima dos canvases. Direcao de arte do conceito: papel quadriculado,
   tinta preta grossa, botoes turquesa listrados, numeros brancos com contorno. */
@font-face { font-family: 'Fredoka'; src: url('fontes/fredoka-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Fredoka'; src: url('fontes/fredoka-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root {
  --tinta: #17161c;
  --papel: #f3f2ee;
  --turquesa: #5fd9cf;
  --turquesa2: #3fbfb5;
  --azulTexto: #2a62d6;
  --vermelho: #ef3e4f;
  --roxo: #7b4dff;
  --laranja: #ff8a2a;
  --ui: clamp(13px, 2.1vmin + 6px, 22px);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--papel); color: var(--tinta);
  font-family: 'Fredoka', system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 700;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  touch-action: none; overscroll-behavior: none; font-size: var(--ui);
}
.camada { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; pointer-events: none; }

/* ---- grade do HUD: retrato */
#hud {
  position: fixed; inset: 0; display: grid; pointer-events: none;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "topo" "area" "meta" "base";
  padding: calc(env(safe-area-inset-top, 0px) + 8px) calc(env(safe-area-inset-right, 0px) + 10px)
           calc(env(safe-area-inset-bottom, 0px) + 10px) calc(env(safe-area-inset-left, 0px) + 10px);
  gap: 6px;
}
#hud > * { pointer-events: none; }
#hud button, #hud .clicavel { pointer-events: auto; }
#topo { grid-area: topo; display: flex; align-items: flex-start; gap: 10px; }
#area { grid-area: area; min-height: 0; }
#meta { grid-area: meta; display: flex; justify-content: center; }
#base { grid-area: base; display: flex; justify-content: center; gap: clamp(10px, 3vmin, 20px); flex-wrap: wrap; }

/* ---- paisagem (desktop 16:9 e celular deitado): colunas laterais */
body[data-orient="paisagem"] #hud {
  grid-template-columns: minmax(130px, 23%) minmax(0, 1fr) minmax(130px, 23%);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "topo area base" "topo meta base";
}
body[data-orient="paisagem"] #topo { flex-direction: column; align-items: flex-start; }
body[data-orient="paisagem"] #base { flex-direction: column; justify-content: center; align-content: center; flex-wrap: wrap; }

/* ---- placar com contorno (texto branco, tinta preta) */
.placar { display: flex; flex-direction: column; gap: 0; flex: 1; min-width: 0; }
.placar small { display: none; }
.placar b, .proximo small {
  color: #fff; -webkit-text-stroke: 0.22em var(--tinta); paint-order: stroke fill; letter-spacing: 0.02em; line-height: 1.05;
}
.placar .pontos b { font-size: 1.9em; color: var(--azulTexto); -webkit-text-stroke-color: #fff; text-shadow: 0 0.09em 0 var(--tinta); }
.placar .pontos b::before { content: attr(data-rotulo); }
.placar .recorde b { font-size: 1.15em; }
.placar .pontos b i { font-style: normal; }
/* retrato (celular): o botao da Poki fica no canto de cima a esquerda (~53 x 38 px a ~20 px do topo;
   print do iPhone, 2026-10-18). O placar comeca depois dele, numa linha so, e o rotulo dos pontos
   some (fica o numero; o recorde continua com o nome). Na CrazyGames nao ha botao por cima do jogo */
body[data-orient="retrato"] .placar { padding-top: 2px; }
body[data-plataforma="poki"][data-orient="retrato"] .placar { padding-left: 58px; }
body[data-orient="retrato"] #topo, body[data-orient="retrato"] .placar > div { min-width: 0; }
body[data-orient="retrato"] .placar b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-orient="retrato"] .placar .pontos b i { display: none; }
/* telas estreitas (menos de 380 px): ao lado do botao nao cabe o numero; o placar desce para baixo dele */
@media (max-width: 379px) {
  body[data-plataforma="poki"][data-orient="retrato"] .placar { padding-left: 0; padding-top: 50px; }
  body[data-plataforma="poki"][data-orient="retrato"] .placar .pontos b { font-size: 1.6em; }
}
.proximo {
  position: relative; width: 4.4em; height: 4.4em; border-radius: 0.9em; background: var(--turquesa);
  border: 0.17em solid var(--tinta); box-shadow: 0 0.17em 0 var(--tinta); display: grid; place-items: center;
}
.proximo canvas { width: 82%; height: 82%; }
.proximo small { position: absolute; bottom: -0.35em; left: 50%; transform: translateX(-50%); font-size: 0.72em; white-space: nowrap; }
body[data-orient="paisagem"] .proximo { width: 5.2em; height: 5.2em; }

/* ---- botoes */
.btn {
  position: relative; display: grid; place-items: center; border: 0.17em solid var(--tinta); cursor: pointer; padding: 0;
  color: var(--tinta); background: #fff; box-shadow: 0 0.18em 0 var(--tinta); font: inherit; touch-action: manipulation;
}
.btn:active { transform: translateY(0.12em); box-shadow: 0 0.06em 0 var(--tinta); }
.btn svg { width: 58%; height: 58%; stroke: currentColor; stroke-width: 2.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.btn.redondo { width: 2.6em; height: 2.6em; border-radius: 50%; flex: none; min-width: 44px; min-height: 44px; }

/* reforco: bolha de gel redonda, uma cor por reforco (o premio dourado; acabado e vazio apagados),
   o numero no canto e o nome numa etiqueta embaixo (opcao 1 de 5, "Bolhas de gel", escolhida pelo
   usuario em 2026-10-18; registro em docs/visuais/botoes-comparar-*.jpg e botoes-folha.png) */
.poder {
  width: 3.4em; height: 3.4em; min-width: 48px; min-height: 48px; margin-bottom: 1em; border: 0; background: none; box-shadow: none;
  isolation: isolate; --cor: var(--turquesa); --cor2: var(--turquesa2); --claro: #c3f3ee;
}
.poder[data-poder="trocar"] { --cor: #55a6ff; --cor2: #2c6fdc; --claro: #cfe5ff; }
.poder[data-poder="chacoalhar"] { --cor: #ff7ab7; --cor2: #db4690; --claro: #ffd6e9; }
.poder[data-poder="alargar"] { --cor: #62d872; --cor2: #2ea442; --claro: #d2f7d6; }
.poder[data-poder="mira"] { --cor: #ff6b57; --cor2: #d63e2c; --claro: #ffd6cf; }
.poder.premio { --cor: #ffd23a; --cor2: #f0a51a; --claro: #fff3c2; }
/* acabado com video (rewarded): lilas, nunca verde */
.poder.video { --cor: #b1a8e4; --cor2: #8378c9; --claro: #e6e2f8; }
/* o video falhou ha pouco (sem anuncio): espera 30 s antes de pedir outro */
.espera-video .poder.video { opacity: 0.5; filter: grayscale(0.7); }
.poder.vazio { --cor: #b4b4ba; --cor2: #8c8c94; --claro: #e4e4e8; }
.poder::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 50%; border: 0.17em solid var(--tinta);
  box-shadow: 0 0.2em 0 var(--tinta);
  background:
    radial-gradient(ellipse 26% 16% at 33% 24%, rgba(255, 255, 255, 0.95) 0 55%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(circle at 50% 118%, var(--cor2) 0 38%, rgba(0, 0, 0, 0) 74%),
    radial-gradient(circle at 38% 30%, var(--claro) 0, var(--cor) 58%);
}
.poder:active { transform: translateY(0.12em); box-shadow: none; }
.poder:active::before { box-shadow: 0 0.06em 0 var(--tinta); }
.poder.ativo::before { box-shadow: 0 0.2em 0 var(--tinta), 0 0 0 0.2em #fff, 0 0 0 0.4em var(--laranja); }
.poder .conta {
  position: absolute; top: -0.3em; right: -0.35em; min-width: 1.6em; height: 1.6em; padding: 0 0.3em; display: grid;
  place-items: center; font-style: normal; font-size: 0.78em; line-height: 1; color: var(--tinta); background: #fff;
  border: 0.16em solid var(--tinta); border-radius: 0.8em;
}
.poder .nome {
  position: absolute; top: calc(100% + 0.25em); left: 50%; transform: translateX(-50%); font-style: normal; font-size: 0.64em;
  line-height: 1.2; white-space: nowrap; pointer-events: none; color: var(--tinta); background: #fff;
  border: 0.17em solid var(--tinta); border-radius: 1em; padding: 0.05em 0.55em;
}
.poder.vazio .nome, .poder.vago .nome { opacity: 0.7; }
/* espaco do premio ainda vazio: so o contorno tracejado */
.poder.vago { pointer-events: none; }
.poder.vago::before { background: rgba(255, 255, 255, 0.4); border-style: dashed; box-shadow: none; }
.poder.vago svg { opacity: 0.45; }
/* selo de video (rewarded): nunca verde; no mesmo canto do numero (um ou outro) */
.poder .selo { position: absolute; top: -0.55em; right: -0.55em; font-style: normal; font-size: 0.9em; background: var(--roxo);
  border: 0.12em solid var(--tinta); border-radius: 0.6em; padding: 0 0.2em; line-height: 1.3; }
.poder .selo:has(svg) { width: 1.7em; height: 1.7em; padding: 0.12em; border-radius: 50%; display: grid; place-items: center; }
.poder .selo svg { width: 100%; height: 100%; }

/* icones novos (src/ui/icones.js): formas cheias brancas com um contorno so, detalhes em tinta */
.btn svg.icone { width: 74%; height: 74%; overflow: visible; }
.poder .selo svg.icone { width: 100%; height: 100%; }
.icone .ic-c path { fill: var(--tinta); stroke: var(--tinta); stroke-width: 3.2; stroke-linejoin: round; }
.icone .ic-c path.l { fill: none; stroke-width: 5.8; stroke-linecap: round; }
.icone .ic-f path { fill: #fff; stroke: none; }
.icone .ic-f path.l { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; }
.icone .ic-d path { fill: var(--tinta); stroke: none; }
.icone .ic-d path.l { fill: none; stroke: var(--tinta); stroke-width: 1.8; stroke-linecap: round; }
/* icones dos prototipos (mexer, servir, ralo): traco branco com contorno */
.poder svg:not(.icone) { stroke: #fff; stroke-width: 3; }
.poder svg:not(.icone) .t { stroke: var(--tinta); stroke-width: 5.5; }
.btn.poder > svg.icone { width: 66%; height: 66%; }

/* ---- reforcos colados ao pote (layout B, escolhido pelo usuario em 2026-10-15). Na paisagem a
   coluna encosta na parede direita do pote da direita (o main.js poe a classe .colado e
   --encosto-x/y) e as colunas laterais encolhem: o pote cresce. No retrato, a fileira de
   sempre embaixo. Os prototipos (sem pote de soltar) ficam com a coluna da direita. */
body.colado[data-orient="paisagem"] #hud { grid-template-columns: minmax(170px, 22%) minmax(0, 1fr) minmax(90px, 10%); }
body.colado[data-orient="paisagem"] #base {
  position: fixed; left: var(--encosto-x, auto); top: var(--encosto-y, 50%); transform: translateY(-50%);
  display: grid; justify-items: center; align-items: start; gap: 0.5em 1.1em;
}
/* paisagem baixa (celular deitado): duas colunas, para a coluna com os nomes caber na altura */
@media (max-height: 460px) {
  body.colado[data-orient="paisagem"] #base { grid-template-columns: auto auto; }
}

/* barra de evolucao (seta com bolinhas, como no conceito) */
.evolucao { display: flex; align-items: center; gap: 0.18em; padding: 0.25em 1.2em 0.25em 0.4em; position: relative;
  background: linear-gradient(90deg, #8fd0ff, #3b8cf0); border: 0.16em solid var(--tinta); border-radius: 0.6em 0 0 0.6em;
  clip-path: polygon(0 0, calc(100% - 1em) 0, 100% 50%, calc(100% - 1em) 100%, 0 100%); }
.evolucao i { display: grid; place-items: center; border-radius: 50%; border: 0.12em solid var(--tinta); font-style: normal;
  color: #fff; background: #333; font-size: 0.75em; }
.evolucao i.desconhecido { background: #2c2c34; }
body[data-orient="paisagem"] .evolucao { flex-wrap: wrap; max-width: 100%; }

/* ---- telas (menu, fim) */
.tela { position: fixed; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(23, 22, 28, 0.35); }
.cartao { background: #fff; border: 0.2em solid var(--tinta); border-radius: 1.2em; box-shadow: 0 0.3em 0 var(--tinta);
  padding: 1.1em 1.3em; display: flex; flex-direction: column; gap: 0.7em; align-items: stretch; min-width: min(78vw, 17em); text-align: center; }
.cartao h2 { margin: 0; font-size: 1.6em; color: #fff; -webkit-text-stroke: 0.2em var(--tinta); paint-order: stroke fill; }
.linha { display: flex; gap: 0.6em; justify-content: center; }
.acao { font: inherit; font-size: 1.1em; border: 0.17em solid var(--tinta); border-radius: 0.8em; padding: 0.55em 1em; cursor: pointer;
  background: var(--laranja); color: #fff; box-shadow: 0 0.18em 0 var(--tinta); min-height: 48px; }
.acao.grande { font-size: 1.35em; }
.acao.clara { background: #fff; color: var(--tinta); }
/* rewarded: roxo com claquete, menor que o padrao e abaixo dele */
.acao.anuncio { background: var(--roxo); display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; font-size: 1em; }
.acao.anuncio .selo { font-style: normal; }
body.sem-anuncio .anuncio { display: none !important; }
/* A Playgama proibe o "+1 vida" por video oferecido a cada derrota (regra 6.3): o reviver sai so la. */
body[data-plataforma='playgama'] #bReviver { display: none !important; }
/* oferta do reforco acabado (regras da CrazyGames): video, gotas e "agora nao" do mesmo tamanho,
   fonte e cor, com o jogo pausado por baixo */
#oferta .cartao { gap: 0.55em; }
#oferta h2 { display: flex; align-items: center; justify-content: center; gap: 0.3em; }
#oferta h2 svg { width: 1.3em; height: 1.3em; }
#oferta .acao { display: inline-flex; align-items: center; justify-content: center; gap: 0.45em; }
#oferta .acao .selo { font-style: normal; }
#oferta .acao:disabled { opacity: 0.45; cursor: default; }
#oferta .ofNota { margin-top: -0.35em; color: var(--tinta); opacity: 0.75; }
/* anuncio pedido ou na tela: nada da interface responde (regra da CrazyGames) */
body.em-anuncio::after { content: ''; position: fixed; inset: 0; z-index: 40; }
.placarFim b { font-size: 2.4em; color: var(--azulTexto); -webkit-text-stroke: 0.12em #fff; paint-order: stroke fill; text-shadow: 0 0.06em 0 var(--tinta); }
.placarFim small { display: block; opacity: 0.7; }
#bSom .desligado { display: none; }
body.mudo #bSom .ligado { display: none; }
body.mudo #bSom .desligado { display: inline; }
#bMusica .desligado { display: none; }
body.semMusica #bMusica .desligado { display: inline; }
body.semMusica #bMusica { opacity: 0.7; }

/* ---- dica do reforco (Player Fit Test de 2026-10-15): com 60 s de jogo sem usar nenhum, o
   botao pulsa e a mao toca nele. A ponta do dedo fica no centro do botao (left/top do main). */
#dica { position: fixed; z-index: 4; pointer-events: none; width: 3em; transform: translate(-50%, -4%); }
#dica svg { display: block; width: 100%; fill: #fff; stroke: var(--tinta); stroke-width: 0.9; stroke-linejoin: round; overflow: visible;
  animation: tocarDica 1.1s ease-in-out infinite; }
#dica b { position: absolute; left: 50%; bottom: calc(100% + 2.6em); transform: translateX(-50%); white-space: nowrap; font-size: 0.85em;
  background: var(--tinta); color: #fff; border-radius: 1em; padding: 0.25em 0.75em; }
@keyframes tocarDica { 0%, 100% { transform: translateY(0.5em); } 45% { transform: translateY(0); } 55% { transform: translateY(0.12em); } }
.poder.dica::before { animation: pulsaDica 0.9s ease-in-out infinite; }
@keyframes pulsaDica { 50% { transform: scale(1.14); box-shadow: 0 0.2em 0 var(--tinta), 0 0 0 0.3em var(--laranja); } }

/* ---- meta da vez acima da barra de evolucao (ao lado dela na paisagem) e o alvo pulsando */
/* A camera enquadra a #area: se a #meta muda de altura, o pote cresce e encolhe quando a pilula troca
   (print de 2026-10-18). Por isso a pilula tem altura fixa (o emoji da missao e do evento esticava a
   linha) e, na paisagem, a #meta tem a altura da barra (~2,25em): a pilula que nao cabe ao lado sobe
   por cima do pe da area (align-content: flex-end) em vez de empurrar a barra para uma linha nova. */
#meta { flex-direction: column; align-items: center; gap: 0.35em; }
body[data-orient="paisagem"] #meta { flex-direction: row; justify-content: center; flex-wrap: wrap; }
body[data-orient="paisagem"] #meta.barra { height: 2.3em; align-content: flex-end; row-gap: 0.12em; }
.objetivo { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.2em 0.75em 0.2em 0.3em; border-radius: 1em; background: #fff;
  border: 0.15em solid var(--tinta); box-shadow: 0 0.14em 0 var(--tinta); font-size: 0.82em; white-space: nowrap; height: 2.2em; }
.objetivo.cresce { background: #e4faf7; }
.objetivo.missao { background: #fff4d1; }
.objetivo.super { background: linear-gradient(90deg, #fff4c2, #ffe08a); }
/* eventos da pressao do sem fim: a cor pelo tipo; o aviso (2 s antes) pulsa */
.objetivo.evento.alivio { background: #e3f9dc; }
.objetivo.evento.aperto { background: #ffe2d6; }
.objetivo.evento.meta { background: #fff4d1; }
.objetivo.evento.caos { background: #ddf3ff; }
.objetivo.evento.aviso { animation: avisoEvento 0.5s ease-in-out infinite; }
@keyframes avisoEvento { 50% { transform: scale(1.12); } }
.objetivo b { font-size: 1.1em; line-height: 1; padding-left: 0.15em; }
.objetivo i, .quase i, #revelacao .bola { display: inline-grid; place-items: center; border-radius: 50%; border: 0.12em solid var(--tinta);
  font-style: normal; color: #fff; background: #2c2c34; }
.objetivo i { width: 1.45em; height: 1.45em; font-size: 0.9em; }
.evolucao i.alvo { box-shadow: 0 0 0 0.14em #fff, 0 0 0 0.28em var(--laranja); animation: alvoEvol 1.3s ease-in-out infinite; }
@keyframes alvoEvol { 50% { transform: scale(1.18); } }

/* ---- slime novo, sem pegar toque. No retrato, faixa baixa por cima da linha do HUD no alto: a 13%
   do topo o cartao cobria a slime segura e a mira no celular. Na paisagem, cartao na coluna da esquerda */
#revelacao { position: fixed; z-index: 6; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 0.35em); transform: translateX(-50%);
  pointer-events: none; display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 0.55em; background: #fff;
  border: 0.2em solid var(--tinta); border-radius: 1.1em; box-shadow: 0 0.25em 0 var(--tinta); padding: 0.35em 1.1em 0.35em 0.4em; }
#revelacao .bola { grid-row: span 2; width: 2.3em; height: 2.3em; border-width: 0.16em; font-size: 1em; }
body[data-orient="paisagem"] #revelacao { left: 12%; top: 46%; display: flex; flex-direction: column; gap: 0.15em; padding: 0.6em 1.3em 0.55em; }
body[data-orient="paisagem"] #revelacao .bola { width: 3.2em; height: 3.2em; }
#revelacao b { font-size: 1.25em; color: #fff; -webkit-text-stroke: 0.2em var(--tinta); paint-order: stroke fill; white-space: nowrap; }
#revelacao small { font-size: 0.85em; white-space: nowrap; }
#revelacao.entra { animation: revela 2.6s ease-out both; }
@keyframes revela {
  0% { opacity: 0; transform: translateX(-50%) translateY(0.8em) scale(0.6); }
  12% { opacity: 1; transform: translateX(-50%) scale(1.08); }
  20%, 86% { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-0.6em) scale(0.95); }
}

/* ---- fim: quase la (nivel seguinte ou recorde) e o proximo item da loja */
.quase { display: flex; align-items: center; justify-content: center; gap: 0.35em; font-size: 0.85em; flex-wrap: wrap; line-height: 1.2; }
.quase i { width: 1.45em; height: 1.45em; font-size: 0.9em; }
.lojaFim { font: inherit; font-size: 0.85em; border: 0.14em dashed var(--tinta); border-radius: 0.8em; background: #fffbe8; color: var(--tinta);
  padding: 0.4em 0.7em; cursor: pointer; min-height: 40px; }
.lojaFim.pode { border-style: solid; background: #ffe9a8; box-shadow: 0 0.14em 0 var(--tinta); }
/* loja e Menu lado a lado (quebram no retrato estreito); o Menu sozinho ocupa a linha toda */
.fimBaixo { flex-wrap: wrap; align-items: stretch; }
.fimBaixo > * { flex: 1 1 auto; }
/* celular deitado (tela baixa): o cartao do fim mais compacto para caber com as linhas novas */
@media (max-height: 440px) {
  #fim .cartao { padding: 0.6em 1em; gap: 0.4em; }
  #fim .cartao h2 { font-size: 1.3em; }
  #fim .placarFim b { font-size: 1.9em; }
  #fim .acao.grande { font-size: 1.2em; padding: 0.4em 1em; }
  #fim .acao { min-height: 42px; padding: 0.4em 0.9em; }
  #fim .ganhoFim { font-size: 1.2em; }
}
#depuracao { position: fixed; left: 4px; bottom: 4px; z-index: 9; font: 11px/1.3 monospace; color: #fff; background: rgba(0, 0, 0, 0.6);
  padding: 4px 6px; border-radius: 4px; pointer-events: auto; white-space: pre; max-width: 96vw; }
#depuracao label { display: grid; grid-template-columns: 6em 9em 3em; gap: 4px; align-items: center; }
#depuracao b { display: block; margin-top: 4px; color: #5fd9cf; }
#anuncio .cartao { background: #222; color: #fff; }
#anuncio b { font-size: 3em; }


.evolucao.dex { padding-right: 1.6em; }
.dexConta { margin-left: 0.4em; color: #fff; -webkit-text-stroke: 0.18em var(--tinta); paint-order: stroke fill; font-size: 0.95em; }
#colecao { display: grid; grid-template-columns: repeat(8, 1.5em); gap: 0.25em; justify-content: center; }
#colecao i { width: 1.5em; height: 1.5em; border-radius: 50%; border: 0.12em solid var(--tinta); display: grid; place-items: center;
  font-style: normal; font-size: 0.85em; color: #fff; }
#colecao i.desconhecido { background: #2c2c34; }

.placarDuelo { display: flex; align-items: center; gap: 0.6em; font-size: 1.3em; color: #fff; -webkit-text-stroke: 0.2em var(--tinta); paint-order: stroke fill; }
.placarDuelo .p1 { color: #5fb8ff; }
.placarDuelo .p2 { color: #ff6f8a; }
.placarDuelo small { color: #c8c8d0; font-size: 0.8em; }

.pedido { display: flex; align-items: center; gap: 0.45em; background: #fff; border: 0.16em solid var(--tinta); border-radius: 0.9em;
  padding: 0.3em 0.6em; box-shadow: 0 0.16em 0 var(--tinta); }
.pedido i { width: 2em; height: 2em; border-radius: 50%; border: 0.14em solid var(--tinta); display: inline-block; }
.pedido i.alvo { width: 2.4em; height: 2.4em; }
.pedido .seta { font-size: 1.2em; }
.pedido .medidor { width: 5em; height: 0.8em; border: 0.13em solid var(--tinta); border-radius: 0.4em; overflow: hidden; background: #eee; }
.pedido .medidor b { display: block; height: 100%; background: linear-gradient(90deg, #ff6f6f, #ffd23a, #7fe36b); }
.pedido .est { color: #ffb400; -webkit-text-stroke: 0.08em var(--tinta); font-size: 1.15em; letter-spacing: 0.05em; }
.pedido .sovar { font-size: 1.3em; animation: girar 1.2s linear infinite; display: inline-block; }
@keyframes girar { to { transform: rotate(360deg); } }

.pedido.molde .medidor { width: 7em; }
.pedido .tanque { font-size: 0.95em; white-space: nowrap; }

/* ---- gotas (a unica moeda) no topo */
.gotas { display: flex; align-items: center; gap: 0.2em; height: 2.2em; padding: 0 0.6em 0 0.35em; border-radius: 1.1em; cursor: pointer;
  background: #fff; border: 0.16em solid var(--tinta); box-shadow: 0 0.16em 0 var(--tinta); min-height: 44px; }
.gotas span { font-size: 1.1em; }
.gotas b { font-size: 1.05em; color: var(--azulTexto); }
.gotas.pulo { animation: pulo 0.45s ease-out; }
@keyframes pulo { 30% { transform: scale(1.18); } }
body[data-orient="paisagem"] .gotas { align-self: flex-start; }

/* sem anuncio, o reforco acabado nao oferece video */
body.sem-anuncio .poder .selo { display: none; }

/* ---- aviso (missao cumprida, nivel novo, sequencia): nao bloqueia o toque */
#aviso { position: fixed; z-index: 6; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 4.6em); transform: translateX(-50%);
  pointer-events: none; white-space: nowrap; max-width: 92vw; overflow: hidden; text-overflow: ellipsis;
  background: var(--tinta); color: #fff; border-radius: 1em; padding: 0.35em 0.9em; font-size: 0.95em; box-shadow: 0 0.15em 0 rgba(0,0,0,.25); }
#aviso.entra { animation: aviso 2.2s ease-out both; }
@keyframes aviso { 0% { opacity: 0; transform: translate(-50%, -0.6em); } 10%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
body[data-orient="paisagem"] #aviso { top: calc(env(safe-area-inset-top, 0px) + 0.8em); }

/* ---- menu: abas Jogar / Loja / Missoes */
.menuCartao { width: min(94vw, 26em); max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px);
  padding: 0.8em 0.9em 0.9em; gap: 0.6em; min-width: 0; }
body[data-orient="paisagem"] .menuCartao { width: min(94vw, 36em); }
.abas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3em; background: #eceae4; border-radius: 0.9em; padding: 0.22em; flex: none; }
.aba, .abaLoja { font: inherit; border: 0; background: transparent; border-radius: 0.7em; padding: 0.45em 0.3em; cursor: pointer; color: var(--tinta); min-height: 40px; }
.aba[aria-selected="true"], .abaLoja[aria-selected="true"] { background: #fff; box-shadow: 0 0 0 0.14em var(--tinta), 0 0.14em 0 0.14em var(--tinta); }
.painel { display: flex; flex-direction: column; gap: 0.6em; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; min-height: 0;
  margin: 0 -0.3em; padding: 0.2em 0.3em 0.3em; }
body.prototipo #listaModos { display: none; }

.modos { display: grid; gap: 0.45em; }
body[data-orient="paisagem"] .modos { grid-template-columns: 1fr 1fr; }
.modo { font: inherit; display: flex; align-items: center; gap: 0.6em; text-align: left; cursor: pointer; color: var(--tinta);
  background: #fff; border: 0.15em solid var(--tinta); border-radius: 0.9em; padding: 0.45em 0.6em; box-shadow: 0 0.15em 0 var(--tinta); min-height: 48px; }
.modo:active { transform: translateY(0.1em); box-shadow: 0 0.05em 0 var(--tinta); }
.modo.atual { background: #e4faf7; }
.modo .icone { font-style: normal; font-size: 1.5em; flex: none; }
.modo span { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.modo small { font-weight: 600; font-size: 0.72em; opacity: 0.7; line-height: 1.25; }
.modo .selo { font-style: normal; font-size: 0.78em; flex: none; background: #ffe9a8; border: 0.12em solid var(--tinta); border-radius: 0.7em; padding: 0.1em 0.45em; }

/* loja: miniaturas, preco em gotas, usar / em uso */
.carteira { display: flex; align-items: center; justify-content: center; gap: 0.3em; font-size: 1.3em; color: var(--azulTexto); }
.abasLoja { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.3em; }
.gradeLoja { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.4em, 1fr)); gap: 0.5em; }
body[data-orient="paisagem"] .gradeLoja { grid-template-columns: repeat(4, 1fr); }
.item { display: flex; flex-direction: column; align-items: center; gap: 0.2em; padding: 0.35em 0.25em 0.4em; border-radius: 0.8em;
  border: 0.13em solid #d7d4cc; background: #faf9f6; min-width: 0; }
.item img { width: 100%; max-width: 5em; height: auto; aspect-ratio: 1; border-radius: 0.6em; background: #fff; }
.item.bloqueado img { filter: saturate(0.55) brightness(0.92); }
.item.usado { border-color: var(--tinta); background: #e4faf7; }
.item b { font-size: 0.7em; line-height: 1.15; min-height: 2.3em; display: flex; align-items: center; text-align: center; }
.estado { font: inherit; font-size: 0.78em; border: 0.13em solid var(--tinta); border-radius: 0.7em; padding: 0.25em 0.5em; cursor: pointer;
  background: #fff; color: var(--tinta); min-height: 36px; width: 100%; }
.estado.preco { background: var(--laranja); color: #fff; }
.estado.preco:disabled { background: #cfccc4; color: #6b6a70; cursor: default; }
.estado.usado { border-color: transparent; background: transparent; cursor: default; display: grid; place-items: center; }
/* aba Skins: os 13 niveis em cima (cor da skin equipada; os nao descobertos fechados) e os 4
   cartoes do nivel aberto (a miniatura chega depois: ate la, o circulo na cor da skin) */
.niveisSkin { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(7, 2.25em); justify-content: center; gap: 0.3em 0.35em;
  padding-bottom: 0.2em; font-size: 0.8em; }
body[data-orient="paisagem"] .niveisSkin { grid-template-columns: repeat(14, 2.1em); gap: 0.3em; }
.nivelSkin { font: inherit; width: 100%; aspect-ratio: 1; border-radius: 50%; border: 0.14em solid var(--tinta); cursor: pointer;
  background: var(--c, #2c2c34); color: #fff; -webkit-text-stroke: 0.16em var(--tinta); paint-order: stroke fill; padding: 0; }
.nivelSkin.atual { outline: 0.2em solid var(--turquesa); outline-offset: 0.1em; }
.nivelSkin:disabled { background: #2c2c34; cursor: default; opacity: 0.6; -webkit-text-stroke: 0; }
.gradeLoja.skins { grid-template-columns: repeat(2, 1fr); }
body[data-orient="paisagem"] .gradeLoja.skins { grid-template-columns: repeat(4, 1fr); }
.item.skin img:not([src]) { background: radial-gradient(circle at 50% 58%, var(--c) 0 34%, var(--tinta) 34.5% 38%, transparent 38.5%), #fff; }
.item.skin .editar { margin-top: 0.15em; }
/* editor de pixel da Minha: tela cheia por cima do menu (o jogo fica pausado atras) */
#telaEditor { position: fixed; inset: 0; z-index: 7; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); background: #f3f2ee; }

/* missoes do dia e sequencia diaria */
.sequencia { display: flex; flex-direction: column; align-items: center; gap: 0.35em; }
.sequencia > small { font-weight: 600; opacity: 0.75; }
.dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25em; width: 100%; }
.dias i { font-style: normal; display: flex; flex-direction: column; align-items: center; font-size: 0.72em; padding: 0.25em 0;
  border-radius: 0.7em; border: 0.13em solid #d7d4cc; background: #faf9f6; }
.dias i small { font-size: 0.85em; opacity: 0.6; }
.dias i.feito { background: var(--turquesa); border-color: var(--tinta); }
.dias i.hoje { box-shadow: 0 0 0 0.15em var(--laranja); }
.missoes { display: flex; flex-direction: column; gap: 0.45em; }
.missao { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.55em; text-align: left;
  border: 0.13em solid #d7d4cc; border-radius: 0.8em; padding: 0.4em 0.6em; background: #faf9f6; }
.missao > i { font-style: normal; font-size: 1.3em; }
.missao span { display: flex; flex-direction: column; gap: 0.25em; min-width: 0; }
.missao b { font-size: 0.85em; }
.missao em { height: 0.55em; border-radius: 0.3em; border: 0.11em solid var(--tinta);
  background: linear-gradient(90deg, var(--turquesa) calc(var(--f) * 100%), #fff 0); }
.missao strong { font-size: 0.82em; white-space: nowrap; }
.missao.feita { background: #e4faf7; border-color: var(--tinta); }
.missao.feita strong { color: #1e9b8f; font-size: 1.2em; }

/* gotas ganhas no fim */
.ganhoFim { display: flex; align-items: center; justify-content: center; gap: 0.3em; font-size: 1.4em; color: var(--azulTexto); }

/* prints sem HUD (thumb, comparacoes): o layout fica, so some o desenho */
body.sem-hud #hud > * { visibility: hidden; }

/* ---- carregando: o bequer enchendo de slime ate o 1o quadro (index.html; o main.js tira) */
#carregando {
  position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2.4vmin; background: linear-gradient(#a6dcff, #e6f7ff 64%, #8fd36a 64%, #6cc04a); transition: opacity 0.3s ease-out;
}
#carregando.pronto { opacity: 0; pointer-events: none; }
#carregando .logo {
  font-size: clamp(30px, 9vmin, 66px); color: #7fe36b; letter-spacing: 0.02em; line-height: 1;
  -webkit-text-stroke: 0.16em var(--tinta); paint-order: stroke fill; text-shadow: 0 0.08em 0 var(--tinta);
  animation: logoCarga 1.6s ease-in-out infinite;
}
@keyframes logoCarga { 50% { transform: translateY(-0.06em) rotate(-1.5deg); } }
#carregando .bequer { width: clamp(170px, 48vmin, 300px); height: auto; overflow: visible; transition: transform 0.3s ease-out; }
#carregando.pronto .bequer { transform: scale(1.08); }
.bequer .vidroFundo { fill: rgba(255, 255, 255, 0.6); }
.bequer .vidro { fill: none; stroke: var(--tinta); stroke-width: 6; stroke-linejoin: round; stroke-linecap: round; }
.bequer .brilho { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; opacity: 0.85; }
.bequer .marcas { fill: none; stroke: var(--azulTexto); stroke-width: 3; stroke-linecap: round; }
/* camadas (2026-10-18): uma gota de cada nivel cai do bico e vira uma camada daquela cor; os
   atrasos (--d, no index.html) vao alargando, e o jogo costuma ficar pronto antes do fim */
.bequer .camada { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); animation: camada 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) var(--d) forwards; }
@keyframes camada { to { transform: scaleY(1); } }
.bequer .ondinha { animation: ondinha 2.6s linear infinite; }
.bequer .ondinha.volta { animation-direction: reverse; }
@keyframes ondinha { to { transform: translateX(-30px); } }
.bequer .ondinha .linha { fill: none; stroke: var(--tinta); stroke-width: 2.8; stroke-linejoin: round; }
.bequer .pingo { stroke: var(--tinta); stroke-width: 3; stroke-linejoin: round; opacity: 0; animation: pingo 0.3s ease-in calc(var(--d) - 0.3s) forwards; }
@keyframes pingo { 0%, 85% { opacity: 1; } 0% { transform: translateY(0); } 100% { opacity: 0; transform: translateY(var(--y)); } }
/* cheio, as gotas seguem pingando, cada uma de uma cor */
.bequer .pingoFim { stroke: var(--tinta); stroke-width: 3; stroke-linejoin: round; opacity: 0; fill: #3295df;
  animation: pingoFim 0.9s ease-in 6.4s infinite, pingoCor 5.4s steps(1) 6.4s infinite; }
@keyframes pingoFim { 0%, 80% { opacity: 1; } 0% { transform: translateY(0); } 100% { opacity: 0; transform: translateY(80px); } }
@keyframes pingoCor { 0% { fill: #3295df; } 17% { fill: #569c5b; } 33% { fill: #7b5098; } 50% { fill: #dc3a55; } 67% { fill: #e86148; } 83% { fill: #ffd528; } }
/* a carinha boia na camada de cima, de olhos abertos (nenhuma animacao de olho fechado) */
.bequer .cara { opacity: 0; transform: translateY(204px); animation: caraSobe 6.2s linear forwards; }
@keyframes caraSobe {
  0% { opacity: 0; transform: translateY(204px); }
  5% { transform: translateY(204px); }
  10% { transform: translateY(193px); }
  16% { opacity: 1; transform: translateY(182px); }
  23% { transform: translateY(171px); }
  29% { transform: translateY(160px); }
  36% { transform: translateY(149px); }
  44% { transform: translateY(138px); }
  52% { transform: translateY(127px); }
  60% { transform: translateY(116px); }
  68% { transform: translateY(105px); }
  78% { transform: translateY(94px); }
  87% { transform: translateY(83px); }
  97% { transform: translateY(72px); }
  100% { opacity: 1; transform: translateY(72px); }
}
.bequer .boia { animation: boia 1.1s ease-in-out infinite; }
@keyframes boia { 50% { transform: translateY(3px); } }
.bequer .olho ellipse { fill: #fff; stroke: var(--tinta); stroke-width: 3.5; }
.bequer .olho circle { fill: var(--tinta); }
.bequer .boca { fill: none; stroke: var(--tinta); stroke-width: 3.5; stroke-linecap: round; }
#carregando .pontinhos { display: flex; gap: 0.5em; }
#carregando .pontinhos i {
  width: 0.75em; height: 0.75em; border-radius: 50%; background: #fff; border: 0.18em solid var(--tinta);
  animation: saltinho 0.9s ease-in-out infinite;
}
#carregando .pontinhos i:nth-child(2) { animation-delay: 0.15s; }
#carregando .pontinhos i:nth-child(3) { animation-delay: 0.3s; }
@keyframes saltinho { 30% { transform: translateY(-0.45em); } 60% { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  #carregando * { animation: none !important; }
  #carregando .bequer .camada { transform: none; }
  #carregando .bequer .cara { opacity: 1; transform: translateY(72px); }
}