/* Estrutura compartilhada pelos dois sites. As CORES e FONTES vêm das
   variáveis definidas no tema de cada site (pedro/css/tema.css e
   alice/css/tema.css) — aqui só mora o esqueleto. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--fonte-corpo, system-ui), system-ui, sans-serif;
  background: var(--fundo, #111);
  color: var(--texto, #eee);
}

img, canvas { display: block; max-width: 100%; }

button { font: inherit; cursor: pointer; }

a { color: inherit; }

:focus-visible { outline: 3px solid var(--destaque, #ffd166); outline-offset: 2px; }

.leitor-apenas {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ---------- Página de jogo ---------- */
.jogo-pagina {
  display: flex; flex-direction: column;
  min-height: 100dvh; max-width: 1060px;
  margin: 0 auto; padding: 8px 12px max(12px, env(safe-area-inset-bottom));
  gap: 8px;
}

.jogo-topo {
  display: flex; align-items: center; gap: 10px;
}

.jogo-topo .titulo-jogo {
  flex: 1; margin: 0; font-family: var(--fonte-titulo); font-size: clamp(1rem, 4vw, 1.6rem);
  letter-spacing: 0.03em; text-align: center; color: var(--titulo, inherit);
}

.botao-voltar, .botao-som, .botao-fala {
  background: var(--cartao, #222); color: inherit;
  border: 2px solid var(--borda, #444); border-radius: 12px;
  min-width: 48px; min-height: 48px; font-size: 1.2rem;
  display: grid; place-items: center; text-decoration: none;
}

.palco-wrap {
  position: relative; width: 100%;
  border-radius: var(--raio, 16px); overflow: hidden;
  border: 3px solid var(--borda, #333);
  background: #000;
  touch-action: none;
}

#palco { width: 100%; height: auto; }

/* ---------- HUD ---------- */
#hud {
  position: absolute; inset: 0 0 auto 0;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 10px 12px; pointer-events: none;
  font-family: var(--fonte-placar, var(--fonte-titulo, monospace));
}

#hud.escondido { display: none; }

.hud-esquerda, .hud-direita { display: flex; gap: 10px; align-items: center; }

.hud-pontos {
  font-size: clamp(1rem, 3.5vw, 1.5rem);
  color: var(--destaque, #ffd166);
  text-shadow: 2px 2px 0 rgb(0 0 0 / 60%);
}

.hud-extra, .hud-vidas { font-size: clamp(0.8rem, 3vw, 1.1rem); text-shadow: 1px 1px 0 rgb(0 0 0 / 60%); }

.hud-botao {
  pointer-events: auto;
  background: rgb(0 0 0 / 45%); color: #fff;
  border: 2px solid rgb(255 255 255 / 35%); border-radius: 10px;
  min-width: 44px; min-height: 44px; font-size: 1rem;
}

/* ---------- Sobreposições (início, pausa, fim) ---------- */
.sobreposicao {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  background: var(--veu, rgb(0 0 0 / 72%));
  padding: 12px; overflow: auto;
}

.sobreposicao.escondido { display: none; }

.painel {
  width: min(560px, 100%);
  max-height: 100%; overflow: auto;
  background: var(--cartao, #1b1b22); color: var(--texto, #eee);
  border: 3px solid var(--borda, #393944);
  border-radius: var(--raio, 18px);
  padding: clamp(14px, 3vw, 26px);
  text-align: center;
  animation: painel-entra 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes painel-entra {
  from { transform: translateY(24px) scale(0.96); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.painel-titulo {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.3rem, 5vw, 2rem);
  margin: 0 0 10px; color: var(--titulo, inherit);
  line-height: 1.15;
}

.painel h2 {
  font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.12em;
  opacity: 0.75; margin: 14px 0 8px;
}

/* Modos de jogo */
.modos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.modo {
  background: var(--cartao2, rgb(255 255 255 / 6%));
  color: inherit; border: 2px solid var(--borda, #444);
  border-radius: 14px; padding: 10px 6px;
  display: flex; flex-direction: column; gap: 2px; align-items: center;
  transition: transform 0.15s, border-color 0.15s;
}

.modo small { opacity: 0.7; font-size: 0.68rem; line-height: 1.2; }

.modo-emoji { font-size: 1.5rem; }

.modo:hover { transform: translateY(-2px); }

.modo.ativo {
  border-color: var(--destaque, #ffd166);
  background: var(--ativo, rgb(255 209 102 / 12%));
  box-shadow: 0 0 0 2px var(--destaque, #ffd166) inset;
}

/* Poderes */
.poderes { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }

.poder {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--cartao2, rgb(255 255 255 / 6%));
  border: 2px solid var(--borda, #444); border-radius: 14px;
  padding: 10px 8px; cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
}

.poder input { position: absolute; opacity: 0; }

.poder small { opacity: 0.7; font-size: 0.68rem; line-height: 1.2; }

.poder-emoji { font-size: 1.5rem; }

.poder-nome { font-weight: 700; font-size: 0.85rem; }

.poder:hover { transform: translateY(-2px); }

.poder.ativo {
  border-color: var(--destaque, #ffd166);
  background: var(--ativo, rgb(255 209 102 / 12%));
}

.poder.ativo .poder-emoji { filter: drop-shadow(0 0 6px var(--destaque, #ffd166)); }

/* Quem está jogando (vários usuários no mesmo aparelho) */
.campo-jogador {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 14px; font-size: 0.9rem; font-weight: 700;
}

.campo-jogador input {
  font: inherit; color: inherit; text-align: center;
  background: var(--cartao2, rgb(255 255 255 / 6%));
  border: 2px solid var(--borda, #444); border-radius: 10px;
  padding: 8px 10px; width: 11em; min-height: 42px;
}

.campo-jogador input:focus { border-color: var(--destaque, #ffd166); outline: none; }

/* Botões */
.botao {
  display: inline-block; width: 100%;
  margin-top: 14px; padding: 14px 18px;
  font-family: var(--fonte-titulo); font-size: clamp(1rem, 4vw, 1.25rem);
  color: var(--botao-texto, #fff);
  background: var(--botao, #e3262e);
  border: 0; border-radius: var(--raio-botao, 14px);
  box-shadow: 0 4px 0 var(--botao-sombra, #8e1318);
  transition: transform 0.1s, box-shadow 0.1s;
  text-decoration: none;
}

.botao:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--botao-sombra, #8e1318); }

.botao-vazado {
  background: transparent; color: inherit;
  border: 2px solid var(--borda, #555); box-shadow: none;
}

.botao-vazado:active { transform: translateY(2px); }

/* Como jogar + recordes */
.como-jogar { margin-top: 12px; text-align: left; font-size: 0.9rem; }

.como-jogar summary { cursor: pointer; font-weight: 700; }

.como-jogar ul { margin: 8px 0 0; padding-left: 20px; }

.como-jogar li { margin: 4px 0; }

.placar-inicio ol, .fim-top ol { list-style: none; margin: 8px 0 0; padding: 0; }

.placar-inicio li, .fim-top li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 5px 10px; border-radius: 8px; font-size: 0.9rem;
}

.placar-inicio li:nth-child(odd), .fim-top li:nth-child(odd) { background: rgb(127 127 127 / 12%); }

.placar-inicio h3 { margin: 16px 0 0; font-size: 0.9rem; }

.sem-recorde { font-size: 0.85rem; opacity: 0.8; }

.fim-pontos {
  font-family: var(--fonte-placar, var(--fonte-titulo));
  font-size: clamp(1.6rem, 7vw, 2.6rem);
  margin: 6px 0; color: var(--destaque, #ffd166);
}

.fim-posicao { font-weight: 700; min-height: 1.2em; }

.fim-mensagem { opacity: 0.9; }

/* ---------- Controles de toque (celular) ---------- */
#controles-toque {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 4px 2px;
}

#controles-toque:empty { display: none; }

.botao-toque {
  flex: 1; min-height: 64px; max-width: 220px;
  font-size: 1.6rem; border-radius: 18px;
  background: var(--cartao, #222); color: inherit;
  border: 2px solid var(--borda, #444);
  touch-action: none; user-select: none; -webkit-user-select: none;
}

.botao-toque.apertado {
  background: var(--ativo, rgb(255 209 102 / 25%));
  border-color: var(--destaque, #ffd166);
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  /* No notebook os botões de toque não são necessários, mas ficam discretos */
  #controles-toque { opacity: 0.8; }
}

/* ---------- Aviso de girar o celular ---------- */
.gire-celular { display: none; }

/* ---------- Álbum da Copa ---------- */
.copa-resumo {
  text-align: center;
  font-family: var(--fonte-titulo);
  font-size: clamp(1rem, 4vw, 1.25rem);
  color: var(--destaque);
  margin: 14px 0;
}

.copa-album {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.copa-secao {
  background: var(--cartao, #222);
  border: 2px solid var(--borda, #444);
  border-radius: var(--raio, 16px);
  overflow: hidden;
}

.copa-secao summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  padding: 14px;
  list-style: none;
}

.copa-secao summary::-webkit-details-marker { display: none; }

.copa-secao summary b { font-family: var(--fonte-titulo); }

.copa-secao summary small {
  opacity: 0.72;
  font-weight: 700;
}

.copa-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 8px;
  padding: 0 14px 14px;
}

.copa-figurinha {
  min-height: 74px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  background: var(--cartao2, rgb(255 255 255 / 6%));
  color: inherit;
  border: 2px dashed var(--borda, #444);
  border-radius: 12px;
  padding: 8px 6px;
}

.copa-figurinha strong {
  font-family: var(--fonte-placar, var(--fonte-titulo));
  color: var(--titulo, inherit);
}

.copa-figurinha span {
  font-size: 0.72rem;
  line-height: 1.15;
  opacity: 0.74;
}

.copa-figurinha.tem {
  background: var(--ativo, rgb(255 209 102 / 18%));
  border-color: var(--destaque, #ffd166);
  border-style: solid;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--destaque, #ffd166) 35%, transparent) inset;
}

@media (max-width: 560px) and (orientation: portrait) {
  .gire-celular {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--cartao, #222); border: 2px dashed var(--borda, #555);
    border-radius: 12px; padding: 8px; font-size: 0.85rem;
  }
}

/* Jogo da Velha online (multiplayer) */
.velha-painel { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 20px 14px 30px; }
.velha-aviso { text-align: center; font-weight: 800; font-size: 1.3rem; min-height: 1.4em; color: var(--titulo, inherit); }
.velha-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: min(22rem, 90vw); aspect-ratio: 1; }
.velha-casa {
  font-size: clamp(2rem, 12vw, 3.2rem); line-height: 1; display: grid; place-items: center;
  border-radius: var(--raio, 14px); border: 3px solid var(--borda, #888);
  background: var(--cartao2, rgb(255 255 255 / 6%)); color: inherit; cursor: pointer;
}
.velha-casa:disabled { cursor: default; opacity: 0.95; }
.velha-casa.vitoria { background: rgb(46 196 135 / 30%); border-color: #2ec487; }