html, body { margin: 0; height: 100%; background: #101b33; color: #fff; font: 16px/1.4 system-ui, sans-serif; }
main { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 12px; }
canvas { width: min(92vw, 480px); aspect-ratio: 320 / 288; image-rendering: pixelated; background: #0b1426; border: 4px solid #0a1124; border-radius: 8px; }
#note { margin: 0; text-align: center; color: #cdd7f0; max-width: 480px; }
#menu { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: min(92vw, 480px); }
#menu button { font: 700 16px system-ui, sans-serif; color: #fff; padding: 12px; border: 3px solid #0a1124; border-radius: 999px; background: #3b4a78; min-height: 48px; }
#menu .fight { background: #e0453a; } #menu .run { background: #3d9bff; } #menu .items { background: #e0a82e; color: #1a1a1a; } #menu .catch { background: #4fcf5c; color: #1a1a1a; }
#menu .mv.fire { background: #ff7a3d; color: #1a1a1a; } #menu .mv.water { background: #3d9bff; } #menu .mv.grass { background: #4fcf5c; color: #1a1a1a; } #menu .mv.normal { background: #8a8fa0; }