:root { --bg: #1a1a1a; --panel: #2a2a2a; --text: #eee; --accent: #ff4444; }
* { box-sizing: border-box; }
body { margin: 0; padding: 16px; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, sans-serif; text-align: center; }
h1 { margin: 0 0 4px; color: var(--accent); }
.sub { margin: 0 0 12px; opacity: .8; font-size: 14px; }
#game { margin: 0 auto 12px; display: inline-block; }
#game canvas { max-width: 100%; height: auto; border: 2px solid #444; border-radius: 8px; background: #000; touch-action: none; }
#touch-controls { display: none; margin: 12px auto; max-width: 360px; }
@media (max-width: 720px) { #touch-controls { display: block; } }
.dpad { position: relative; width: 160px; height: 160px; margin: 0 auto 12px; }
.dpad .btn { position: absolute; width: 52px; height: 52px; background: #333; border: 2px solid #555; border-radius: 10px; color: #fff; font-size: 22px; display: flex; align-items: center; justify-content: center; user-select: none; -webkit-user-select: none; }
.dpad .up { top: 0; left: 54px; }
.dpad .down { bottom: 0; left: 54px; }
.dpad .left { top: 54px; left: 0; }
.dpad .right { top: 54px; right: 0; }
.bomb-btn { width: 72px; height: 72px; margin: 0 auto; background: #c0392b; border: 3px solid #e74c3c; border-radius: 50%; color: #fff; font-size: 32px; display: flex; align-items: center; justify-content: center; user-select: none; -webkit-user-select: none; }
#touch-controls .btn:active, #touch-controls .bomb-btn:active { filter: brightness(1.4); transform: scale(0.96); }
.status { margin: 8px 0; font-size: 13px; opacity: .7; }
.help { font-size: 12px; opacity: .6; margin-top: 8px; }