* { box-sizing: border-box; margin: 0; padding: 0; }
body { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0d1117; color: #e6edf3; font-family: system-ui, sans-serif; touch-action: manipulation; user-select: none; }
.wrap { width: min(100vw, 360px); padding: 12px; text-align: center; }
.hud { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 13px; }
#game { width: 100%; border-radius: 12px; border: 2px solid #30363d; }
.hint { margin-top: 8px; font-size: 12px; color: #8b949e; }
.dpad { display: grid; grid-template-columns: repeat(3, 52px); grid-template-rows: repeat(3, 52px); gap: 6px; justify-content: center; margin-top: 10px; }
.dpad__btn { border-radius: 10px; border: 1px solid #30363d; background: #21262d; color: #fff; font-size: 18px; cursor: pointer; }
.dpad__up { grid-column: 2; grid-row: 1; }
.dpad__left { grid-column: 1; grid-row: 2; }
.dpad__right { grid-column: 3; grid-row: 2; }
.dpad__down { grid-column: 2; grid-row: 3; }