* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --fogo: #ff6b35;
  --brasa: #ffd23f;
  --escuro: #1a1216;
  --painel: #2a1f24;
  --claro: #f5ead9;
}

html, body {
  width: 100%; height: 100%;
  background: radial-gradient(ellipse at center, #3a2228 0%, var(--escuro) 75%);
  overflow: hidden;
  font-family: 'Press Start 2P', 'Courier New', monospace;
  color: var(--claro);
}

#palco {
  position: absolute;
  width: 960px; height: 540px;
  left: 50%; top: 50%;
  transform-origin: center center;
  /* transform definido via JS para caber na janela */
}

.tela {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
}
.tela.ativa { display: flex; }

/* ---------- MENU ---------- */
.titulo-jogo { display: flex; flex-direction: column; gap: 10px; }
.titulo-rio {
  font-size: 14px;
  color: #9fd6ff;
  letter-spacing: 8px;
  text-shadow: 0 2px 0 #1a3a55;
}
.titulo-fogo {
  font-size: 52px;
  color: var(--fogo);
  text-shadow: 0 4px 0 #8a2c10, 0 8px 18px rgba(255,107,53,.45);
  letter-spacing: 4px;
}
.titulo-fighter {
  font-size: 30px;
  color: var(--brasa);
  text-shadow: 0 3px 0 #8a6a10;
  letter-spacing: 14px;
}
.subtitulo { font-size: 11px; color: #b89b8a; margin-top: 4px; }

.menu-botoes { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; align-items: center; }

.botao {
  font-family: inherit;
  font-size: 13px;
  padding: 14px 22px;
  background: linear-gradient(#4a3038, #33222a);
  color: var(--claro);
  border: 3px solid var(--fogo);
  border-radius: 6px;
  cursor: pointer;
  text-shadow: 0 2px 0 rgba(0,0,0,.5);
  transition: transform .08s, background .15s;
}
.botao:hover { background: linear-gradient(#5c3c46, #402b34); transform: scale(1.04); }
.botao:active { transform: scale(.97); }
.botao-menor { font-size: 11px; padding: 10px 14px; }
.botao-sair { border-color: #777; font-size: 10px; margin-top: 10px; }

.entrar-codigo { display: flex; gap: 8px; align-items: center; }
.entrar-codigo input, .link-caixa input {
  font-family: inherit;
  font-size: 13px;
  padding: 12px;
  background: #16080d;
  border: 3px solid #6a4a55;
  border-radius: 6px;
  color: var(--brasa);
  text-align: center;
  text-transform: uppercase;
  width: 150px;
}
.erro { color: #ff5c5c; font-size: 10px; min-height: 14px; }

/* ---------- LOBBY ---------- */
#telaLobby h2 { color: var(--brasa); font-size: 22px; }
#telaLobby p { font-size: 11px; line-height: 1.8; }
.link-caixa { display: flex; gap: 8px; }
.link-caixa input { width: 460px; text-transform: none; font-size: 10px; color: #9fd6ff; }
.codigo-grande { font-size: 13px; }
.codigo-grande strong { color: var(--brasa); font-size: 20px; letter-spacing: 6px; }
.aguardando { color: #b89b8a; }
.pontinhos::after { content: ''; animation: pontinhos 1.5s steps(4) infinite; }
@keyframes pontinhos { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }

/* ---------- SELEÇÃO ---------- */
#telaSelecao h2 { font-size: 20px; color: var(--brasa); text-shadow: 0 3px 0 #6a4a10; }
.cartas { display: flex; gap: 26px; }
.carta {
  width: 200px;
  background: var(--painel);
  border: 4px solid #5a4048;
  border-radius: 10px;
  padding: 12px 10px;
  cursor: pointer;
  transition: transform .12s, border-color .12s, box-shadow .12s;
  position: relative;
}
.carta:hover { transform: translateY(-6px); }
.carta canvas { width: 100%; image-rendering: pixelated; border-radius: 6px; background: #1d1318; }
.carta .nome { font-size: 14px; color: var(--claro); margin: 10px 0 4px; }
.carta .desc { font-size: 8px; color: #b89b8a; line-height: 1.6; min-height: 26px; }
.carta .stats { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.carta .stat { display: flex; align-items: center; gap: 6px; font-size: 7px; color: #cbb; }
.carta .stat .barra { flex: 1; height: 7px; background: #181014; border-radius: 3px; overflow: hidden; }
.carta .stat .barra > div { height: 100%; background: linear-gradient(90deg, var(--fogo), var(--brasa)); }
.carta.escolhida-p1 { border-color: #4da6ff; box-shadow: 0 0 18px rgba(77,166,255,.5); }
.carta.escolhida-p2 { border-color: #ff5c5c; box-shadow: 0 0 18px rgba(255,92,92,.5); }
.carta.escolhida-p3 { border-color: #7ec850; box-shadow: 0 0 18px rgba(126,200,80,.5); }
.carta.escolhida-p1.escolhida-p2 { border-image: linear-gradient(90deg, #4da6ff, #ff5c5c) 1; box-shadow: 0 0 18px rgba(255,160,160,.5); }
.carta.ocupada { cursor: not-allowed; opacity: .92; }
.carta .tag { position: absolute; top: -14px; font-size: 9px; padding: 4px 8px; border-radius: 4px; }
.carta .tag.p1 { left: -10px; background: #4da6ff; color: #04223d; }
.carta .tag.p2 { right: -10px; background: #ff5c5c; color: #3d0404; }
.carta .tag.p3 { left: 50%; transform: translateX(-50%); background: #7ec850; color: #103d04; }

.selecao-status { display: flex; gap: 40px; }
.status-jogador { font-size: 10px; }
#statusP1 { color: #4da6ff; }
#statusP2 { color: #ff5c5c; }
#statusP3 { color: #7ec850; }
.dica { font-size: 9px; color: #8d7a70; line-height: 1.8; }

/* ---------- JOGO ---------- */
#telaJogo { justify-content: flex-start; gap: 0; }
#canvas { display: block; background: #000; }
.controles-ajuda {
  position: absolute; bottom: 6px; left: 0; right: 0;
  font-size: 8px; color: rgba(245,234,217,.55);
  text-align: center; line-height: 1.7;
  pointer-events: none;
}

/* ---------- AVISO ---------- */
#telaAviso h2 { font-size: 16px; color: var(--brasa); line-height: 1.8; max-width: 700px; }

/* ---------- TOQUE (celular) ---------- */
#controlesTouch { display: none; }
body.touch #controlesTouch {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#controlesTouch .grupo-esq,
#controlesTouch .grupo-dir {
  position: absolute;
  bottom: 38px;
  display: flex;
  gap: 10px;
  pointer-events: auto;
}
#controlesTouch .grupo-esq { left: 16px; }
#controlesTouch .grupo-dir { right: 16px; }
#controlesTouch button {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 3px solid rgba(255,210,63,.7);
  background: rgba(30,18,24,.55);
  color: var(--claro);
  font-size: 22px;
  font-family: inherit;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
#controlesTouch button:active { background: rgba(255,107,53,.5); }
#controlesTouch .bt-esp { border-color: #9fd6ff; color: #ffd23f; }
body.touch .controles-ajuda { display: none; }
/* exceto o aviso de papel do churrasqueiro: aparece acima dos botoes */
body.touch .controles-ajuda.importante {
  display: block;
  bottom: 118px;
  font-size: 8px;
  color: rgba(255, 210, 63, .9);
}

#avisoGirar { display: none; }
body.touch #avisoGirar {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--escuro);
  color: var(--brasa);
  font-size: 18px;
  line-height: 2;
  text-align: center;
  align-items: center;
  justify-content: center;
}
@media (orientation: portrait) {
  body.touch #avisoGirar { display: flex; }
}