:root {
  --ceu: #7ec8e3;
  --grama-1: #6a9955;
  --grama-2: #4c7a3a;
  --madeira: #8a5a3b;
  --madeira-escura: #5c3a24;
  --terra: #b98d5a;
  --tomate: #e07856;
  --tomate-escuro: #b8503a;
  --creme: #fff6e5;
  --tinta: #2b2018;
  --sombra: rgba(0, 0, 0, 0.35);

  --fonte-pixel: 'Press Start 2P', monospace;
  --fonte-corpo: 'Nunito', sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--fonte-corpo);
  background: linear-gradient(180deg, var(--ceu) 0%, #bfe6f2 40%, var(--grama-1) 40%, var(--grama-2) 100%);
  color: var(--tinta);
  overflow: hidden;
}

button { font-family: var(--fonte-corpo); cursor: pointer; }
input { font-family: var(--fonte-corpo); }

/* ---------- Sistema de telas ---------- */
.tela {
  display: none;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.tela--ativa { display: flex; }
.tela-jogo.tela--ativa { display: block; padding: 0; }

.cartao {
  background: var(--creme);
  border: 4px solid var(--madeira-escura);
  border-radius: 14px;
  box-shadow: 0 10px 0 var(--madeira), 0 18px 30px var(--sombra);
  padding: 28px 26px;
  max-width: 420px;
  width: 100%;
  text-align: center;
}

.titulo-jogo {
  font-family: var(--fonte-pixel);
  font-size: 20px;
  line-height: 1.6;
  color: var(--tomate-escuro);
  text-shadow: 2px 2px 0 var(--madeira-escura);
  margin: 6px 0 4px;
}
.subtitulo-jogo { font-weight: 800; margin: 0 0 18px; color: var(--madeira-escura); }

h2, h3 { font-family: var(--fonte-pixel); font-size: 13px; color: var(--madeira-escura); line-height: 1.7; }

.campo { display: block; text-align: left; margin: 14px 0; font-weight: 800; font-size: 13px; }
.campo span { display: block; margin-bottom: 6px; }
.campo input {
  width: 100%; padding: 10px 12px; border-radius: 8px;
  border: 3px solid var(--madeira-escura); font-size: 15px; background: #fff;
}

.abas-entrada { display: flex; gap: 8px; margin: 16px 0 10px; }
.aba {
  flex: 1; padding: 10px 6px; border-radius: 8px; border: 3px solid var(--madeira-escura);
  background: #fff; font-weight: 800; font-size: 12px; color: var(--madeira-escura);
}
.aba.aba--ativa { background: var(--tomate); color: #fff; }

.painel-entrada.oculto { display: none; }
.dica { font-size: 13px; color: #6b5b4a; margin: 10px 0; }

.btn {
  font-weight: 800; border-radius: 10px; border: none; padding: 12px 18px;
  font-size: 14px; margin-top: 10px; width: 100%; transition: transform 0.08s;
}
.btn:active { transform: translateY(2px); }
.btn--principal { background: var(--tomate); color: #fff; box-shadow: 0 4px 0 var(--tomate-escuro); }
.btn--principal:disabled { background: #c9b9a3; box-shadow: 0 4px 0 #a3937d; cursor: not-allowed; }
.btn--pequeno { width: auto; padding: 8px 14px; font-size: 12px; background: var(--madeira); color: #fff; box-shadow: 0 3px 0 var(--madeira-escura); }
.btn--ghost { background: transparent; color: var(--madeira-escura); border: 2px solid var(--madeira-escura); box-shadow: none; }

.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.mensagem-erro { color: #a11; font-weight: 800; font-size: 13px; margin-top: 10px; }
.mensagem-erro.oculto { display: none; }
.status-conexao { font-size: 11px; color: #8a7a63; margin-top: 14px; }
.status-conexao:not(:empty)::after { content: "…"; animation: pontos-pulsando 1.2s steps(4, end) infinite; }
@keyframes pontos-pulsando {
  0%, 20% { content: ""; } 40% { content: "."; } 60% { content: ".."; } 80%, 100% { content: "..."; }
}

/* ---------- Sala / Lobby ---------- */
.bloco-codigo { margin: 14px 0 20px; }
.bloco-codigo.oculto { display: none; }
.bloco-codigo .rotulo { display: block; font-size: 12px; font-weight: 800; margin-bottom: 6px; }
.codigo-grande {
  font-family: var(--fonte-pixel); font-size: 22px; letter-spacing: 2px;
  background: var(--tinta); color: #ffe9a8; padding: 12px; border-radius: 8px; margin-bottom: 8px;
}

.lista-jogadores { list-style: none; padding: 0; margin: 10px 0 18px; text-align: left; }
.lista-jogadores li {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: #fff; border: 2px solid var(--madeira-escura); border-radius: 8px; margin-bottom: 6px; font-weight: 800; font-size: 13px;
}
.bolinha-cor { width: 12px; height: 12px; border-radius: 50%; display: inline-block; border: 2px solid var(--tinta); }

#dica-nao-host.oculto, #dica-nao-host-fim.oculto { display: none; }

/* ---------- Tela de jogo ---------- */
.tela-jogo { position: relative; width: 100vw; height: 100vh; background: #1b1e14; }

.hud-topo {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px; padding: 10px 14px;
  background: linear-gradient(180deg, rgba(0,0,0,0.55), transparent);
  color: #fff; font-weight: 800; font-size: 13px;
}
.hud-item { background: rgba(0,0,0,0.35); padding: 6px 10px; border-radius: 8px; }
.hud-chat-toggle { margin-left: auto; width: auto; }

#canvas-jogo {
  display: block; width: 100vw; height: 100vh; object-fit: contain;
  background: var(--grama-1);
  image-rendering: pixelated;
}

.painel-chat {
  position: absolute; top: 56px; right: 10px; width: 260px; max-height: 45vh;
  background: rgba(20,16,10,0.82); border: 2px solid var(--madeira); border-radius: 10px;
  display: flex; flex-direction: column; z-index: 25; overflow: hidden;
}
.painel-chat.oculto { display: none; }
.mensagens-chat { flex: 1; overflow-y: auto; padding: 8px; font-size: 12px; color: #fff; }
.mensagens-chat .msg { margin-bottom: 6px; line-height: 1.4; }
.mensagens-chat .msg--sistema { color: #ffd98a; font-style: italic; }
.form-chat { display: flex; border-top: 2px solid var(--madeira); }
.form-chat input { flex: 1; border: none; padding: 8px; font-size: 12px; background: #fff; }
.form-chat button { border-radius: 0; margin: 0; }

/* ---------- Controles touch ---------- */
.controles-touch { display: none; position: absolute; bottom: 0; left: 0; right: 0; z-index: 20; padding: 16px; justify-content: space-between; align-items: flex-end; }
.dpad { display: grid; grid-template-columns: 52px 52px 52px; grid-template-rows: 52px 52px; gap: 4px; }
.dpad-botao {
  background: rgba(255,255,255,0.75); border: 2px solid var(--madeira-escura); border-radius: 10px;
  font-size: 18px; font-weight: 900; color: var(--madeira-escura); touch-action: none; user-select: none;
}
.dpad-cima { grid-column: 2; grid-row: 1; }
.dpad-esquerda { grid-column: 1; grid-row: 2; }
.dpad-direita { grid-column: 3; grid-row: 2; }
.dpad-baixo { grid-column: 2; grid-row: 2; }
.botao-dash {
  width: 78px; height: 78px; border-radius: 50%; background: var(--tomate); color: #fff;
  border: 3px solid var(--tomate-escuro); font-family: var(--fonte-pixel); font-size: 10px; touch-action: none; user-select: none;
}

@media (pointer: coarse) {
  .controles-touch { display: flex; }
  .hud-topo { font-size: 11px; }
}

/* ---------- Overlay macarrão pastoso ---------- */
.overlay {
  position: absolute; inset: 0; z-index: 40; background: rgba(120, 20, 20, 0.88);
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px;
  animation: piscar-vermelho 0.6s ease-in-out 2;
}
.overlay.oculto { display: none; }
.overlay-conteudo { color: #fff; max-width: 420px; }
.overlay-emoji { font-size: 56px; margin: 0; }
.overlay-conteudo h2 { font-family: var(--fonte-pixel); font-size: 18px; color: #ffe9a8; margin: 10px 0; }
.overlay-sub { font-size: 13px; opacity: 0.9; margin: 14px 0 18px; }
@keyframes piscar-vermelho {
  0%, 100% { background: rgba(120, 20, 20, 0.88); }
  50% { background: rgba(200, 40, 40, 0.95); }
}

/* ---------- Tela de fim ---------- */
#tela-fim .btn.oculto { display: none; }

@media (max-width: 480px) {
  .painel-chat { width: 78vw; }
  .titulo-jogo { font-size: 16px; }
}