/* Tela "jogo" da página única (site/js/paginas/jogo.js): o estilo da antiga site/jogo.html, preso a
   body.pg-jogo com :where() (especificidade zero, a cascata fica igual). docs/13-site.md "Página única" */
body:where(.pg-jogo) { padding-bottom: 24px; }
:where(.pg-jogo) .palco { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 104px 16px 16px; display: flex; flex-direction: column; gap: 16px; align-items: stretch; }
:where(.pg-jogo) .titulo-jogo, :where(.pg-jogo) .pergunta { text-align: center; margin: 0; font-size: clamp(24px, 4.2vw, 44px); line-height: 1.15; text-shadow: 0 4px 0 var(--contorno); }
:where(.pg-jogo) .progresso { display: flex; justify-content: center; gap: 10px; }
:where(.pg-jogo) .progresso span { width: 22px; height: 22px; border-radius: 50%; border: 4px solid var(--contorno); background: var(--creme); }
:where(.pg-jogo) .progresso span.feita { background: var(--amarelo); }
/* provinha (cada pergunta num quadro novo: site/js/telas/provinha.js) */
:where(.pg-jogo) .rodada-pergunta { display: flex; flex-direction: column; gap: 16px; }
:where(.pg-jogo) .opcoes { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
:where(.pg-jogo) .opcao { min-height: 180px; justify-content: center; font-size: clamp(20px, 2.8vw, 30px); text-align: center; transition: transform .2s, opacity .3s; }
:where(.pg-jogo) .opcao svg { width: clamp(72px, 12vw, 120px); height: clamp(72px, 12vw, 120px); }
:where(.pg-jogo) .opcao.saiu { opacity: .25; transform: scale(.9); }
:where(.pg-jogo) .opcao.certa { background: var(--amarelo); transform: scale(1.06); }
@media (max-width: 600px) and (orientation: portrait) {
  :where(.pg-jogo) .opcoes { grid-template-columns: 1fr; }
  :where(.pg-jogo) .opcao { min-height: 96px; flex-direction: row; justify-content: flex-start; padding: 8px 16px; text-align: left; }
  :where(.pg-jogo) .opcao svg { width: 72px; height: 72px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  :where(.pg-jogo) .palco { padding-top: 12px; padding-left: 96px; padding-right: 96px; }
  :where(.pg-jogo) .opcao { min-height: 120px; }
}
/* separar */
:where(.pg-jogo) .grupos { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
:where(.pg-jogo) .grupo { min-height: 200px; border-style: dashed; justify-content: flex-start; }
:where(.pg-jogo) .grupo > svg { width: clamp(80px, 12vw, 120px); height: clamp(80px, 12vw, 120px); }
:where(.pg-jogo) .grupo > span { font-size: clamp(22px, 3vw, 32px); }
:where(.pg-jogo) .grupo .dentro { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
:where(.pg-jogo) .grupo .dentro .item { min-height: 64px; padding: 6px 10px; flex-direction: row; font-size: 16px; }
:where(.pg-jogo) .grupo .dentro .item svg { width: 44px; height: 44px; }
:where(.pg-jogo) .itens { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
:where(.pg-jogo) .item { min-height: 120px; min-width: 120px; padding: 8px 14px; justify-content: center; font-size: clamp(16px, 2.2vw, 22px); touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: grab; }   /* arrastar com o mouse sem selecionar texto */
:where(.pg-jogo) .item svg { pointer-events: none; }
:where(.pg-jogo) .item.escolhido { outline: 6px solid var(--amarelo); outline-offset: 2px; }
/* celular em pé: título, grupos e itens juntos na tela, sem rolar (a criança arrasta o item até o grupo vendo os
   dois). Grupos lado a lado no alto, compactos; o que já foi colocado fica só com o ícone; itens em 3 colunas */
@media (max-width: 600px) and (orientation: portrait) {
  :where(.pg-jogo) .palco { padding-bottom: 0; gap: 12px; }
  :where(.pg-jogo) .grupos { grid-template-columns: repeat(var(--n-grupos, 2), minmax(0, 1fr)); gap: 8px; }
  :where(.pg-jogo) .grupo { min-height: 0; padding: 8px 4px; gap: 4px; }
  :where(.pg-jogo) .grupo > svg { width: 44px; height: 44px; }
  :where(.pg-jogo) .grupo > span { font-size: 16px; line-height: 1.1; text-align: center; overflow-wrap: anywhere; }
  :where(.pg-jogo) .grupo .dentro { gap: 4px; }
  :where(.pg-jogo) .grupo .dentro .item { min-height: 0; min-width: 0; padding: 2px; border-width: 3px; }
  :where(.pg-jogo) .grupo .dentro .item svg { width: 30px; height: 30px; }
  :where(.pg-jogo) .grupo .dentro .item span { display: none; }
  :where(.pg-jogo) .itens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  :where(.pg-jogo) .item { min-width: 0; min-height: 64px; padding: 4px; gap: 2px; font-size: 14px; line-height: 1.1; text-align: center; overflow-wrap: anywhere; }
  :where(.pg-jogo) .item svg { width: 36px; height: 36px; flex: none; }
}
/* ordem */
:where(.pg-jogo) .fila { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
:where(.pg-jogo) .quadro { padding: 8px; min-height: 0; position: relative; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
:where(.pg-jogo) .quadro img { width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; border: 4px solid var(--contorno); display: block; background: var(--cor-ep-2); }
:where(.pg-jogo) .quadro b { position: absolute; top: -10px; left: -10px; width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--amarelo); border: 4px solid var(--contorno); border-radius: 50%; font-size: 22px; }
:where(.pg-jogo) .quadro img { pointer-events: none; -webkit-user-drag: none; }
/* arrastando: o lugar do quadro fica apagado e uma cópia segue o dedo */
:where(.pg-jogo) .quadro.vazio { opacity: .35; outline: 5px dashed var(--amarelo); outline-offset: 2px; }
:where(.pg-jogo) .fantasma-quadro b { display: none; }   /* o número é o do lugar: fica na fila */
:where(.pg-jogo) .fantasma-quadro { position: fixed; z-index: 50; margin: 0; pointer-events: none; scale: 1.06; rotate: -2deg; box-shadow: 0 14px 0 var(--contorno); }
/* celular em pé: a fila em 2 colunas, inteira na tela */
@media (max-width: 600px) and (orientation: portrait) {
  :where(.pg-jogo) .fila { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
}
/* fim */
:where(.pg-jogo) .fim { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
:where(.pg-jogo) .estrelas { display: flex; gap: 12px; font-size: clamp(64px, min(12vw, 13vh), 120px); line-height: 1; }   /* vh: tablet deitado com a medalha cabe sem rolar */
:where(.pg-jogo) .estrela { color: #3a4a70; -webkit-text-stroke: 5px var(--contorno); transform: scale(.8); }
:where(.pg-jogo) .estrela.acesa { color: var(--amarelo); animation: acender .6s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes acender { from { transform: scale(0) rotate(-40deg); } to { transform: scale(1) rotate(0); } }
:where(.pg-jogo) .figurinha { width: min(260px, 70vw, 30vh); min-height: 0; padding: 10px; }
:where(.pg-jogo) .premios { display: flex; align-items: center; justify-content: center; gap: 16px; }   /* figurinha e, ao completar a saga, a medalha */
:where(.pg-jogo) .premios:has(.medalha-nova) .figurinha { width: min(240px, 44vw, 30vh); }
:where(.pg-jogo) .premios .medalha-nova { width: min(150px, 34vw); margin: 0; flex: none; }
:where(.pg-jogo) .figurinha img { width: 100%; aspect-ratio: 1; border-radius: 16px; border: 4px solid var(--contorno); background: var(--cor-ep-2); display: block; }
:where(.pg-jogo) .acoes { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
@media (prefers-reduced-motion: reduce) { :where(.pg-jogo) .estrela.acesa { animation: none; transform: none; } }