/* Estruturas que posicionam: cabeçalho, grade do jogo e o comportamento estreito. */

header{
  display:flex;align-items:center;gap:16px;
  padding:0 0 14px;margin-bottom:16px;
  border-bottom:1px solid var(--line);
}
.logo{display:flex;align-items:baseline;gap:10px}
.logo b{
  font-family:var(--display);
  font-size:26px;font-weight:700;letter-spacing:.06em;
  color:#5a3d1f;
  text-shadow:0 2px 0 rgba(255,255,255,.6);
}
.logo b i{font-style:normal;color:var(--ember)}
.logo span{font-family:var(--mono);font-size:10px;color:var(--ash-dim);letter-spacing:.18em}
.spacer{flex:1}

/* barra de recursos (rail estilo console) */
.rail{display:flex;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.rail div{
  background:var(--panel);padding:6px 12px;
  font-family:var(--mono);font-size:12px;
  display:flex;gap:7px;align-items:center;
}
.rail label{font-size:9px;letter-spacing:.16em;color:var(--ash-dim);text-transform:uppercase}
.rail b{font-weight:600;color:var(--brass);font-variant-numeric:tabular-nums}

/* tabuleiro + coluna lateral */
.game-wrap{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start}
.side{display:flex;flex-direction:column;gap:12px}
.hud-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* O tabuleiro ocupa a altura da janela menos o cabeçalho e a barra de baixo.
   Sem isso, numa tela larga o canvas cresceria além do que cabe verticalmente
   e o jogador teria que rolar a página no meio da partida. */
.board{max-height:calc(100vh - 200px);display:flex;justify-content:center}
.board canvas{max-height:100%;width:auto;max-width:100%}

@media (max-width:1100px){
  .game-wrap{grid-template-columns:1fr}
  .board{max-height:none}
  header{flex-wrap:wrap;gap:10px}
}