/* Núcleo visual dos jogos (Fase 1): palco 16:9 + telas comuns. Reusa as vars do
   site público (css/capikids_public.css, carregado antes). Estilo CAPI: formas
   arredondadas, botões grandes, acento do mundo. */

/* Página de jogo = modo "app": full-bleed, pills no topo, sem rodapé e sem
   rolagem (o palco cabe na altura útil da janela).
   ponytail: rodapé escondido via :has — se o layout ganhar um modo sem-rodapé
   no public_header, migrar para lá. */
.jogo-section { padding: .5rem 0 .8rem; }
body:has(.jogo-stage) footer { display: none; }
.jogo-section > .wrap { display: flex; flex-direction: column; align-items: center; }
/* Full-bleed SÓ quando há palco — o ramo de paywall premium mantém o
   container normal do site. */
.jogo-section > .wrap:has(.jogo-stage) {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  /* Margem de segurança nas laterais: o palco nunca encosta na borda da janela. */
  padding-inline: clamp(.5rem, 2.5vw, 2rem);
}

/* Pills de troca rápida entre jogos (acima do palco). */
.jogo-pills {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  max-width: 100%;
  padding: 0 0 .7rem;   /* laterais vêm do wrap (margem de segurança) */
}
/* Duas linhas com metade dos jogos cada (a divisão vem do PHP). */
.jogo-pills__linha {
  display: flex; gap: .5rem; justify-content: center;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.jogo-pills__linha::-webkit-scrollbar { display: none; }
.jogo-pill {
  flex: 0 0 auto;
  display: inline-flex; align-items: center;
  padding: .45rem 1.05rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: .95rem;
  text-decoration: none;
  color: var(--accent-legivel);
  background: color-mix(in srgb, var(--accent) 12%, #fff);
  border: 2px solid color-mix(in srgb, var(--accent) 22%, #fff);
  white-space: nowrap;
  transition: transform .12s ease, background .12s ease;
}
.jogo-pill i { color: var(--accent); margin-right: .45rem; transition: transform .2s ease; }
/* Mesmo hover do "Ver mais": pill sobe e o ícone dá o pulinho (cor intacta). */
.jogo-pill:hover i { transform: scale(1.22) rotate(-8deg); }
.jogo-pill:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--accent) 20%, #fff); }
.jogo-pill.is-atual {
  color: #fff;
  background: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 70%, #000);
  pointer-events: none;
}
.jogo-pill.is-atual i { color: #fff; }


/* Palco 16:9 grande e centrado. Letterbox natural; retrato adapta para caber. */
.jogo-stage {
  position: relative;
  /* Largura total, limitada pela altura útil da janela (header sticky +
     duas linhas de pills) — o jogo cabe na tela SEM barra de rolagem
     (pedido do Marco). */
  width: min(100%, calc((100svh - 220px) * 16 / 9));
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--accent-2) 20%, #fff), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, #fff), color-mix(in srgb, var(--accent) 18%, #fff));
  box-shadow: var(--shadow-pop);
  touch-action: none;
  overscroll-behavior: contain;
  user-select: none;
  -webkit-user-select: none;
}
@media (max-aspect-ratio: 1 / 1) {
  /* Retrato de celular: 16:9 ficaria minúsculo → palco alto que preenche a
     tela. 185px = header sticky (~90) + pills (~56) + paddings.
     Com as 2 linhas de pills, ~230px. Cada linha rola de lado se não couber. */
  .jogo-pills__linha { justify-content: flex-start; }
  .jogo-stage { width: 100%; aspect-ratio: auto; height: calc(100svh - 230px); min-height: 420px; }
}
@media (min-aspect-ratio: 1 / 1) and (max-height: 540px) {
  /* Paisagem baixa (celular deitado): a fórmula por altura encolheria o palco
     a ~380px — largura total vence; a criança usa o ⛶ p/ imersão. */
  .jogo-stage { width: 100%; }
}

.jogo-noscript, .jogo-play-area { width: 100%; height: 100%; }
.jogo-play-area { position: relative; }

/* Telas (loader/intro/nível/…): cobrem o palco, coluna centrada. */
.jogo-screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; padding: clamp(1rem, 4vw, 2.4rem); text-align: center;
}
.jogo-overlay { background: color-mix(in srgb, var(--ink) 42%, transparent); backdrop-filter: blur(3px); }
.jogo-overlay .jogo-title, .jogo-overlay .jogo-slider span, .jogo-overlay .jogo-mute { color: #fff; }

.jogo-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 4.5vw, 2.4rem); color: var(--accent-legivel); margin: 0;
}
.jogo-overlay .jogo-title { color: #fff; }

/* Instruções (intro). */
.jogo-instr { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; max-width: 30rem; }
.jogo-instr li {
  display: flex; align-items: center; gap: .7rem; justify-content: center;
  font-size: 1.05rem; color: var(--ink-2);
}
.jogo-instr li i { color: var(--accent); font-size: 1.3rem; }

/* Botões grandes (sempre com ícone). */
.jogo-btns { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }
.jogo-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; padding: .7rem 1.4rem; border: 0; cursor: pointer;
  font-family: var(--font-display); font-size: 1.1rem; border-radius: var(--r-pill);
  background: var(--accent); color: #fff; box-shadow: var(--shadow-sm);
  transition: transform .12s ease, filter .12s ease;
}
.jogo-btn:hover { filter: brightness(1.05); transform: translateY(-2px); }
.jogo-btn:active { transform: translateY(1px); }
.jogo-btn--play { font-size: 1.35rem; padding: .85rem 2rem; }
.jogo-btn--ghost { background: color-mix(in srgb, var(--accent) 14%, #fff); color: var(--accent-legivel); }
.jogo-overlay .jogo-btn--ghost { background: rgba(255, 255, 255, .18); color: #fff; }
.jogo-btn--sm { min-height: 2.4rem; font-size: .95rem; padding: .5rem 1.1rem; }

/* Idade. */
.jogo-idade-grid { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; max-width: 26rem; }
.jogo-btn--idade { min-width: 3.6rem; min-height: 3.6rem; font-size: 1.4rem; padding: .5rem; }

/* Seleção de nível. */
.jogo-nivel-grid {
  display: grid; gap: .8rem; width: 100%; max-width: 40rem;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
.jogo-nivel {
  position: relative; cursor: pointer; border: 2px solid transparent;
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  padding: 1rem .6rem; border-radius: var(--r);
  background: #fff; box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease;
}
.jogo-nivel:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.jogo-nivel.is-reco { border-color: var(--accent); }
.jogo-nivel__reco {
  position: absolute; top: -.7rem; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #fff; font-size: .72rem; font-family: var(--font-display);
  padding: .2rem .6rem; border-radius: var(--r-pill); white-space: nowrap;
}
.jogo-nivel__nome { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); }
.jogo-nivel__idade { font-size: .8rem; color: var(--ink-3); }
.jogo-nivel__stars i, .jogo-stars i { color: color-mix(in srgb, var(--ink) 18%, #fff); }
.jogo-nivel__stars i.is-on, .jogo-stars i.is-on { color: var(--amber); }

/* HUD durante a partida. */
.jogo-hud {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .7rem;
  /* A barra do HUD cobre o topo do palco; sem isto, ela engoliria os cliques
     do jogo (só os botões dela devem receber o toque). */
  pointer-events: none;
}
.jogo-hud > * { pointer-events: auto; }
.jogo-hud__btn {
  min-height: 2.6rem; width: 2.6rem; padding: 0; font-size: 1.1rem;
  background: rgba(255, 255, 255, .85); color: var(--ink);
}
.jogo-hud__btn:hover { transform: none; filter: none; background: #fff; }
.jogo-placar {
  margin-left: auto; font-family: var(--font-display); font-size: 1.3rem;
  color: var(--accent-legivel); min-width: 2ch; text-align: right;
  background: rgba(255, 255, 255, .7); padding: .1rem .6rem; border-radius: var(--r-pill);
}

/* Volumes (pause). */
.jogo-vols { display: grid; gap: .7rem; width: 100%; max-width: 20rem; }
.jogo-slider { display: grid; grid-template-columns: 5.5rem 1fr; align-items: center; gap: .6rem; }
.jogo-slider span { font-family: var(--font-display); text-align: left; }
.jogo-slider input[type="range"] { width: 100%; accent-color: var(--accent); }
.jogo-mute { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }

/* Conclusão. */
.jogo-stars-big { font-size: clamp(2.4rem, 9vw, 4rem); display: flex; gap: .4rem; }
.jogo-stars-big i { color: color-mix(in srgb, var(--ink) 16%, #fff); }
.jogo-stars-big i.is-on { color: var(--amber); }
.jogo-stars-big.is-anim i.is-on { animation: jogo-star-pop .5s ease both; }
.jogo-stars-big.is-anim i.is-on:nth-child(2) { animation-delay: .15s; }
.jogo-stars-big.is-anim i.is-on:nth-child(3) { animation-delay: .3s; }
@keyframes jogo-star-pop { 0% { transform: scale(0) rotate(-30deg); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
.jogo-melhor { color: var(--ink-2); font-family: var(--font-display); }

/* Loader. */
.jogo-loader { display: flex; flex-direction: column; align-items: center; gap: .8rem; color: var(--accent-legivel); }
.jogo-loader > i { font-size: 2rem; }
.jogo-loader__barra { width: min(60vw, 16rem); height: .6rem; border-radius: var(--r-pill); background: color-mix(in srgb, var(--accent) 18%, #fff); overflow: hidden; }
.jogo-loader__barra span { display: block; height: 100%; background: var(--accent); border-radius: var(--r-pill); transition: width .2s ease; }

/* Erro. */
.jogo-erro { display: flex; flex-direction: column; align-items: center; gap: .4rem; color: var(--ink-2); }
.jogo-erro > i { font-size: 2.4rem; color: var(--accent); }
.jogo-noscript { display: flex; align-items: center; justify-content: center; height: 100%; font-family: var(--font-display); color: var(--ink-2); }

/* ── Jogo-stub de teste (dev) ─────────────────────────────────────────────── */
.stub-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; }
.stub-msg { font-family: var(--font-display); font-size: 1.6rem; color: var(--accent-legivel); margin: 0; }
.stub-capi {
  width: clamp(6rem, 22vw, 9rem); height: clamp(6rem, 22vw, 9rem); border-radius: 50%;
  border: 0; cursor: pointer; background: #fff; box-shadow: var(--shadow);
  font-size: clamp(2.6rem, 9vw, 4rem); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.stub-capi.pop { animation: stub-pop .18s ease; }
@keyframes stub-pop { 50% { transform: scale(1.15); } }

/* ── Spinner do palco (troca de jogo / primeiro carregamento) ──────────────
   3 bolinhas CAPI quicando com squash & stretch — infantil, sem texto. */
.jogo-spinner {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  gap: .6rem;
}
.jogo-spinner i {
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 35%, transparent);
  animation: jogo-pulinho .85s ease-in-out infinite;
}
.jogo-spinner i:nth-child(2) { background: var(--accent-2); animation-delay: .14s; }
.jogo-spinner i:nth-child(3) { background: #f5a623; animation-delay: .28s; }
@keyframes jogo-pulinho {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  35%      { transform: translateY(-1.2rem) scale(.94, 1.1); } /* estica no pulo */
  55%      { transform: translateY(0) scale(1.12, .82); }      /* amassa no pouso */
  70%      { transform: translateY(0) scale(1, 1); }
}
/* v1 (DOM): some quando a engine monta o shell. v2 (canvas): o canvas nasce
   ANTES dos assets — o core marca #jogo.is-vivo no CREATE da 1ª cena. */
#jogo:has(> :not(.jogo-spinner, noscript, canvas)) .jogo-spinner,
#jogo.is-vivo .jogo-spinner { display: none; }
/* Troca pela pill: véu + spinner POR CIMA do jogo atual, na hora do clique.
   (#jogo empata a especificidade com a regra de sumiço acima — ordem decide.) */
.jogo-stage.is-trocando::after {
  content: ''; position: absolute; inset: 0; z-index: 4;
  background: color-mix(in srgb, #fff 62%, transparent);
}
#jogo.is-trocando .jogo-spinner { display: flex; }

@media (prefers-reduced-motion: reduce) {
  .jogo-btn, .jogo-nivel, .stub-capi { transition: none; }
  .jogo-stars-big.is-anim i.is-on { animation: none; }
  .jogo-spinner i { animation: jogo-respira 2s ease-in-out infinite; } /* sem pulo */
}
@keyframes jogo-respira { 50% { opacity: .35; } }

/* Toque: pílula de jogo com pelo menos 44 px de altura. */
@media (pointer: coarse) { .jogo-pill { min-height: 44px; } }