/* --- Base (yours preserved) --- */
html, body { margin:0; padding:0; height:100%; background:#111; color:#eee; font-family:sans-serif; }
#mg-game-container { display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:center; min-height:100vh; padding:16px; box-sizing:border-box; }
.panel { background:#1e1e1e; padding:20px; border-radius:8px; box-shadow:0 0 20px rgba(0,0,0,0.4); }
.panel input { display:block; margin:6px 0; padding:8px; width:260px; border-radius:6px; border:1px solid #333; background:#0f0f0f; color:#fff; }
.row { display:flex; gap:10px; margin-top:10px; flex-wrap:wrap; }
button { background:#2e7; border:0; padding:10px 16px; border-radius:6px; cursor:pointer; color:#061; font-weight:600; }
button:hover { filter:brightness(0.93); }
#authMsg { margin-top:8px; color:#ccc; }

/* Canvas fills container; crisp pixels */
canvas {
  display:block;
  width:100%;
  height:auto;
  border:1px solid #333;
  background:#000;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* --- Added: HUD bar used by app.js --- */
.hud {
  display:none;          /* shown by JS after login */
  gap:16px;
  background:#0f1624;
  color:#c7e1ff;
  padding:8px 12px;
  border-radius:8px;
  border:1px solid #0e223f;
  width:min(980px, 100%);
  box-sizing:border-box;
}

/* Optional wrapper around canvas if you use one */
.view-wrap {
  width:min(980px, 100%);
  border-radius:8px;
  overflow:hidden;
  border:1px solid #0e223f;
  background:#000;
  box-shadow:0 10px 30px rgba(0,0,0,0.35);
}

/* --- Added: Battle modal styles expected by app.js --- */
.modal {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.6);
  display:none;            /* shown by JS */
  align-items:center;
  justify-content:center;
  z-index:9999;
}
.modal-card {
  background:#10131a;
  color:#e6f0ff;
  width:min(720px, 94vw);
  border:1px solid #24324a;
  border-radius:10px;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
.modal-head { font-weight:600; padding:12px 16px; border-bottom:1px solid #24324a; }
.modal-body { padding:12px 16px; }
.modal-foot { padding:10px 16px; border-top:1px solid #24324a; display:flex; justify-content:flex-end; }
.modal .row { display:flex; gap:8px; flex-wrap:wrap; }
.modal button { background:#2b6bd6; color:#fff; border:none; border-radius:6px; padding:8px 12px; cursor:pointer; }
.modal button:hover { background:#1f56b1; }

/* Small screens */
@media (max-width: 580px){
  .panel input { width:100%; }
}