* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #10182c; overscroll-behavior: none; }
body { font-family: Inter, ui-rounded, "Trebuchet MS", system-ui, sans-serif; color: #f8fafc; touch-action: none; user-select: none; -webkit-user-select: none; }
#game-shell { position: relative; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; background: #10182c; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; }
#touch-controls { position: absolute; z-index: 5; inset: 0; pointer-events: none; touch-action: none; }
#touch-controls[hidden], #rotate-hint[hidden] { display: none !important; }
#touch-controls button { display: grid; place-items: center; width: clamp(58px, 10vh, 76px); height: clamp(58px, 10vh, 76px); border: 2px solid rgba(231,255,255,.8); border-radius: 50%; background: rgba(20,42,62,.82); color: #f5ffff; font: 900 clamp(21px, 4vh, 30px) system-ui, sans-serif; box-shadow: 0 3px 14px rgba(0,0,0,.28); pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
#touch-controls .jump-control { position: absolute; right: calc(env(safe-area-inset-right, 0px) + 22px); bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); width: clamp(72px, 12vh, 96px); height: clamp(72px, 12vh, 96px); background: rgba(53,203,180,.92); color: #10293a; font-size: clamp(13px, 2.5vh, 17px); }
#touch-controls button:active, #touch-controls button.is-held { transform: scale(.94); filter: brightness(1.18); }
#rotate-hint { display: none; }
#game-shell.mobile-game #touch-controls { display: block; }
#game-shell.mobile-game #rotate-hint { display: none; }
@media (orientation: portrait) and (pointer: coarse) {
  #game-shell.mobile-game #rotate-hint:not([hidden]) { position: absolute; z-index: 4; display: block; left: 50%; top: 50%; width: min(82vw, 390px); transform: translate(-50%, -50%); padding: 15px 20px; border: 1px solid rgba(255,255,255,.35); border-radius: 15px; background: rgba(15,28,47,.9); color: #fff; font-weight: 800; text-align: center; pointer-events: none; }
}
#login-form { position: absolute; top: 48%; left: 50%; transform: translate(-50%, 0); width: min(82vw, 330px); display: flex; flex-direction: column; gap: 10px; }
#login-form[hidden] { display: none; }
#login-form label { color: #bfe6e4; font-size: 11px; font-weight: 850; letter-spacing: .11em; }
#nickname { width: 100%; height: 48px; border: 1px solid rgba(225,245,255,.45); border-radius: 12px; padding: 0 14px; background: rgba(24,39,61,.96); color: #fff; font: 700 16px system-ui, sans-serif; outline: none; }
#nickname:focus { border-color: #44e0c1; box-shadow: 0 0 0 3px rgba(68,224,193,.17); }
#login-form button { height: 45px; border: 0; border-radius: 12px; background: #2cbda8; color: #10293a; font: 900 13px system-ui, sans-serif; letter-spacing: .04em; cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }