:root {
  --pinho: #1b3a2e;
  --pinho-fundo: #142d23;
  --musgo: #2e5a45;
  --liquen: #e6eedb;
  --nevoa: #a8bfa9;
  --orbe: #e8283d;
  --mebuto: #1f3f99;
  --ouro: #ffd34d;
  --fonte: "Baloo 2", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: var(--fonte);
  color: var(--liquen);
  background: var(--pinho-fundo);
}

button { font: inherit; }

:focus-visible {
  outline: 3px solid var(--ouro);
  outline-offset: 2px;
}

.botao {
  border: 2px solid rgba(230, 238, 219, 0.35);
  background: transparent;
  color: var(--liquen);
  border-radius: 999px;
  padding: 0.5rem 1.25rem;
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
  transition: background-color 0.15s, transform 0.1s;
}
.botao:hover { background: rgba(230, 238, 219, 0.1); }
.botao:active { transform: translateY(1px); }
.botao.principal {
  background: var(--orbe);
  border-color: var(--orbe);
  color: #fff;
}
.botao.principal:hover { background: #ff3d52; }
.botao:disabled { opacity: 0.55; cursor: wait; }

/* ===================== Menu ===================== */
.pagina-menu {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 60% 45% at 75% 18%, rgba(232, 40, 61, 0.14), transparent 70%),
    radial-gradient(ellipse 80% 60% at 10% 100%, rgba(76, 140, 90, 0.35), transparent 70%),
    var(--pinho);
}

.menu {
  max-width: 1020px;
  margin: 0 auto;
  padding: max(2rem, env(safe-area-inset-top)) 1.25rem max(2.5rem, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: 1fr minmax(0, 28rem);
  grid-template-areas:
    "abertura direita"
    "como     direita";
  gap: 1.5rem 3rem;
  align-items: start;
}

.abertura { grid-area: abertura; }
.cena { width: min(100%, 300px); height: auto; display: block; margin-left: -0.5rem; }
.orbe-flutuando { animation: flutuar 3.2s ease-in-out infinite; transform-origin: 160px 78px; }
@keyframes flutuar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

h1 {
  font-size: clamp(4rem, 13vw, 7.5rem);
  line-height: 0.85;
  font-weight: 800;
  margin: 0.25rem 0 0.75rem;
  letter-spacing: -0.02em;
  color: var(--liquen);
  text-shadow: 0 4px 0 var(--mebuto);
}

.chamada {
  font-size: 1.25rem;
  line-height: 1.4;
  max-width: 28ch;
  margin: 0;
  color: var(--nevoa);
}

.coluna-direita {
  grid-area: direita;
  display: grid;
  gap: 1.25rem;
  margin-top: 2rem;
}

.cartao {
  background: rgba(10, 26, 19, 0.55);
  border: 1px solid rgba(230, 238, 219, 0.12);
  border-radius: 22px;
  padding: 1.5rem;
}

.cartao h2, .como-jogar h2 {
  font-size: 1.4rem;
  margin: 0 0 0.75rem;
  font-weight: 800;
}

.lista-jogadores {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  max-height: 22rem;
  overflow-y: auto;
}

.lista-jogadores .vazio { color: var(--nevoa); line-height: 1.4; }

.instrucao { margin: -0.4rem 0 0.75rem; color: var(--nevoa); font-size: 0.95rem; }

.jogador {
  width: 100%;
  display: grid;
  grid-template-columns: 2.2rem 1fr auto;
  grid-template-areas: "pos nome tempo" "pos resumo inimigos";
  align-items: center;
  text-align: left;
  gap: 0 0.75rem;
  padding: 0.7rem 1rem;
  background: var(--musgo);
  color: var(--liquen);
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  transition: background-color 0.15s;
}
button.jogador:hover { background: #366a52; }
.jogador.sem-posicao {
  grid-template-columns: 1fr auto;
  grid-template-areas: "nome tempo" "resumo inimigos";
}
.linha-ranking { background: rgba(46, 90, 69, 0.45); cursor: default; padding: 0.55rem 1rem; }
.linha-ranking.meu { background: var(--musgo); box-shadow: inset 4px 0 0 var(--ouro); }
.ranking { max-height: 26rem; }
.jogador-posicao {
  grid-area: pos;
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--nevoa);
  font-variant-numeric: tabular-nums;
}
.jogador.concluiu .jogador-posicao { color: var(--ouro); }
.jogador-nome { grid-area: nome; font-weight: 800; font-size: 1.2rem; line-height: 1.2; min-width: 0; overflow-wrap: anywhere; }
.jogador-resumo { grid-area: resumo; color: var(--nevoa); font-size: 0.92rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.jogador-tempo {
  grid-area: tempo;
  justify-self: end;
  font-weight: 800;
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
}
.jogador-inimigos { grid-area: inimigos; justify-self: end; color: var(--nevoa); font-size: 0.92rem; white-space: nowrap; }
.jogador-orbes { display: flex; gap: 3px; }
.jogador-orbes i {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(230, 238, 219, 0.18);
}
.jogador-orbes i.achado { background: var(--orbe); box-shadow: 0 0 6px rgba(232, 40, 61, 0.8); }

.form-novo label { display: block; font-weight: 700; margin-bottom: 0.4rem; }
.linha-form { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.linha-form input {
  flex: 1 1 10rem;
  min-width: 0;
  font: inherit;
  font-size: 1.05rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 2px solid rgba(230, 238, 219, 0.25);
  background: rgba(0, 0, 0, 0.25);
  color: var(--liquen);
}
.linha-form input::placeholder { color: rgba(168, 191, 169, 0.7); }

.mensagem {
  margin: 1rem 0 0;
  padding: 0.6rem 0.9rem;
  border-radius: 12px;
  background: rgba(232, 40, 61, 0.18);
  border: 1px solid rgba(232, 40, 61, 0.5);
  line-height: 1.4;
}

.como-jogar { grid-area: como; max-width: 34rem; }
.como-jogar p { margin: 0 0 0.6rem; color: var(--nevoa); line-height: 1.5; }

@media (max-width: 760px) {
  .menu {
    grid-template-columns: 1fr;
    grid-template-areas: "abertura" "direita" "como";
  }
  .coluna-direita { margin-top: 0; }
  .cena { width: 220px; }
}

/* ===================== Jogo ===================== */
.pagina-jogo {
  position: fixed;
  inset: 0;
  overflow: hidden;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

#tela { position: absolute; inset: 0; display: block; cursor: crosshair; }

.hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: max(0.6rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right)) 0 max(0.75rem, env(safe-area-inset-left));
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  align-items: start;
  gap: 0.75rem;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.hud-grupo {
  background: rgba(12, 28, 20, 0.62);
  border-radius: 14px;
  padding: 0.45rem 0.75rem;
}

.hud-vida { justify-self: start; }
.vida { display: flex; align-items: center; gap: 0.5rem; }
.vida-barra {
  width: clamp(90px, 18vw, 180px);
  height: 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
#vida-preenchimento {
  display: block;
  height: 100%;
  width: 100%;
  background: #58d36a;
  border-radius: inherit;
  transition: width 0.2s, background-color 0.3s;
}
#vida-preenchimento[data-nivel="media"] { background: var(--ouro); }
#vida-preenchimento[data-nivel="baixa"] { background: var(--orbe); }
.vida-texto { font-weight: 800; font-size: 0.95rem; min-width: 3ch; }

.coracoes { display: flex; gap: 3px; margin-top: 4px; }
.coracao svg { width: 18px; height: 17px; display: block; fill: #ff5468; }
.coracao.perdido svg { fill: rgba(255, 255, 255, 0.18); }

.hud-fase { justify-self: center; text-align: center; }
.cronometro {
  display: block;
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 2px;
}
.fase-nome { font-weight: 700; font-size: 0.95rem; color: var(--nevoa); display: block; line-height: 1.1; }
.orbes { display: flex; gap: 5px; justify-content: center; margin-top: 5px; }
.orbe-icone {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
}
.orbe-icone.achado {
  border-color: #ff8090;
  background: radial-gradient(circle at 35% 35%, #ffc2c2, var(--orbe) 45%, #7c0c1c);
  box-shadow: 0 0 8px rgba(232, 40, 61, 0.9);
}

.hud-arma {
  justify-self: end;
  text-align: right;
  display: grid;
  line-height: 1.15;
}
.nome-jogador { font-size: 0.85rem; color: var(--nevoa); }
.mortes { font-weight: 800; font-size: 1.05rem; }
.arma-atual { font-weight: 700; color: var(--ouro); }
.arma-atual[data-tipo="arma"] { color: #8fdcff; }
.arma-dica { font-size: 0.8rem; color: var(--nevoa); }

.botao-pausa {
  pointer-events: auto;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(12, 28, 20, 0.62);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.botao-pausa svg { width: 18px; height: 18px; fill: var(--liquen); }

.faixa-fase {
  position: absolute;
  top: 26%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.35), 0 0 18px rgba(0, 0, 0, 0.5);
  width: max-content;
  max-width: 90vw;
}
.faixa-fase strong { display: block; font-size: clamp(2.5rem, 9vw, 4.5rem); font-weight: 800; line-height: 1; }
.faixa-fase span { font-size: 1.15rem; font-weight: 700; }
.faixa-fase.visivel { animation: faixa 3.2s ease forwards; }
@keyframes faixa {
  0% { opacity: 0; transform: translate(-50%, 12px); }
  12%, 75% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -8px); }
}

.avisos {
  position: absolute;
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  gap: 0.4rem;
  justify-items: center;
  pointer-events: none;
  width: min(92vw, 30rem);
}
.aviso {
  background: rgba(12, 28, 20, 0.85);
  padding: 0.45rem 1rem;
  border-radius: 999px;
  font-weight: 700;
  text-align: center;
  animation: entrar 0.25s ease;
  transition: opacity 0.4s;
}
.aviso.destaque { background: rgba(31, 63, 153, 0.92); }
.aviso.cura { background: rgba(40, 120, 60, 0.92); }
.aviso.saindo { opacity: 0; }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } }

/* Joystick virtual: só aparece em telas de toque */
.joystick {
  display: none;
  position: absolute;
  right: max(1.25rem, env(safe-area-inset-right));
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  width: 128px;
  height: 128px;
  pointer-events: none;
}
.modo-toque .joystick { display: block; }
.joystick-base {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(12, 28, 20, 0.15) 30%, rgba(12, 28, 20, 0.45) 100%);
  border: 2px solid rgba(230, 238, 219, 0.35);
}
.joystick-botao {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 38% 35%, #3e66c8, var(--mebuto) 70%);
  border: 2px solid rgba(235, 242, 255, 0.75);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  opacity: 0.75;
  transition: opacity 0.15s;
}
.joystick.em-uso .joystick-botao { opacity: 1; }
.joystick.em-uso .joystick-base { border-color: rgba(230, 238, 219, 0.6); }

/* no celular, os avisos sobem para não ficar em cima do joystick */
.modo-toque .avisos { bottom: calc(max(1.25rem, env(safe-area-inset-bottom)) + 145px); }

.vinheta-dano {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 90px 20px rgba(232, 40, 61, 0.65);
  opacity: 0;
}
.levou-dano .vinheta-dano { animation: dano 0.45s ease-out; }
@keyframes dano { from { opacity: 1; } to { opacity: 0; } }

.painel {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(8, 20, 14, 0.55);
}
.painel[hidden] { display: none; }
.painel-caixa {
  width: min(100%, 27rem);
  background: var(--pinho);
  border: 1px solid rgba(230, 238, 219, 0.15);
  border-radius: 22px;
  padding: 1.5rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
.painel-caixa h2 { margin: 0 0 0.5rem; font-size: 1.8rem; line-height: 1.1; font-weight: 800; }
.painel-caixa p { margin: 0 0 1.25rem; line-height: 1.45; color: var(--nevoa); }
.painel-caixa p:empty { display: none; }
.painel[data-tom="vitoria"] h2 { color: #ff6b7b; }
.painel[data-tom="derrota"] .painel-caixa { border-color: rgba(232, 40, 61, 0.45); }
.painel-botoes { display: flex; flex-wrap: wrap; gap: 0.5rem; }

@media (max-width: 640px) {
  .hud { grid-template-columns: auto 1fr auto; gap: 0.4rem; }
  .hud-vida { grid-column: 1; grid-row: 1; }
  .hud-arma { grid-column: 2; grid-row: 1; justify-self: end; }
  .botao-pausa { grid-column: 3; grid-row: 1; }
  .hud-fase { grid-column: 1 / -1; grid-row: 2; justify-self: center; padding: 0.3rem 0.7rem; }
  .nome-jogador, .arma-dica { display: none; }
  .vida-barra { width: 80px; }
  .coracao svg { width: 14px; height: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .orbe-flutuando { animation: none; }
  .aviso { animation: none; }
}