:root { --bg:#0b1020; --ink:#e5e7eb; --blue:#2b6cff; --wall:#2155ff; --dot:#ffd54a; --pac:#ffd83d; }
*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  background:radial-gradient(1200px 800px at 50% -10%, #12204a 0%, var(--bg) 45%);
}
header{color:var(--ink); text-align:center; padding:16px 12px 8px}
header h1{margin:0;font-weight:700;letter-spacing:.3px;font-size:20px}
header p{margin:6px 0 0; opacity:.8}

.wrap{display:flex; gap:18px; justify-content:center; align-items:flex-start; flex-wrap:wrap; padding:10px 12px 32px}

#hud{display:flex; gap:14px; color:var(--ink); align-items:center; justify-content:center; flex-wrap:wrap}
#hud .pill{
  background:#11182f; border:1px solid #1c274a; padding:8px 12px; border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.3) inset
}
#btns{display:flex; gap:8px}
button{
  border:none; background:#172042; color:#c7d2fe; padding:8px 12px; border-radius:10px; cursor:pointer;
  font-weight:600; letter-spacing:.2px; box-shadow:0 8px 20px rgba(0,0,0,.25)
}
button:hover{filter:brightness(1.05)}

canvas{
  display:block; background:#020617; border:2px solid #1e293b; border-radius:18px;
  box-shadow:0 16px 80px rgba(0,0,0,.55), 0 0 0 6px rgba(18,24,40,.35) inset
}

/* D-pad móvil */
.dpad{display:none; gap:8px; margin-top:10px; justify-content:center}
.dpad button{width:56px; height:44px}
@media (max-width: 720px){ .dpad{display:flex} }

.toast{
  position:fixed; left:50%; transform:translateX(-50%); bottom:18px; color:#f8fafc;
  background:#0b122a; border:1px solid #1e2b55; padding:8px 12px; border-radius:10px; font-size:14px; opacity:.95
}