* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; -webkit-tap-highlight-color: transparent; }
body { background: #000; color: #0f0; font-family: 'Courier New', monospace; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
#gameContainer { position: relative; width: 400px; height: 560px; max-width: 100vw; max-height: 100vh; }
canvas { display: block; background: #000; width: 100%; height: 100%; }

#menu { position: absolute; inset: 0; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 10; padding: 20px; }
#menu.hidden { display: none; }
h1 { color: #0f0; font-size: 36px; margin-bottom: 10px; text-shadow: 0 0 10px #0f0; }
#rankBox { color: #fff; font-size: 14px; line-height: 1.8; margin: 15px 0; white-space: pre; text-align: left; background: #111; padding: 12px 20px; border-radius: 4px; }
#startBtn { background: #0f0; color: #000; border: none; padding: 12px 40px; font-size: 18px; font-weight: bold; cursor: pointer; font-family: 'Courier New', monospace; margin-bottom: 15px; }
#startBtn:active { background: #0c0; }
.hint { color: #888; font-size: 12px; }

#virtualKeys { position: absolute; bottom: 10px; left: 0; width: 100%; display: flex; justify-content: space-around; z-index: 5; }
.vkey { width: 60px; height: 44px; background: rgba(0,255,0,0.2); color: #0f0; border: 1px solid #0f0; border-radius: 4px; cursor: pointer; font-size: 13px; font-family: 'Courier New', monospace; }
.vkey:active, .vkey.active { background: rgba(0,255,0,0.6); }
.vkey.disabled { opacity: 0.35; }