:root { color-scheme: dark; font-family: Inter, ui-rounded, system-ui, sans-serif; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #080914; overscroll-behavior: none; }
#app { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100%; overflow: hidden; padding: env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px); }
canvas { position: absolute; display: block; min-width: 0; min-height: 0; background: #111329; touch-action: none; }
#touch-controls { position: absolute; left: max(12px,env(safe-area-inset-left,0px)); right: max(12px,env(safe-area-inset-right,0px)); bottom: calc(env(safe-area-inset-bottom,0px) + 6px); height: var(--control-size,56px); display: none; pointer-events: none; }
#app[data-touch="true"] #touch-controls { display: block; }
#touch-controls[hidden] { display: none !important; }
#touch-controls button { pointer-events: auto; position: absolute; bottom: 0; width: var(--control-size,56px); height: var(--control-size,56px); border: 1px solid #ffffff42; border-radius: 18px; color: white; background: #171a38; font: 800 24px/1 system-ui; touch-action: none; user-select: none; -webkit-user-select: none; }
#touch-controls button[data-control="left"] { left: 0; }
#touch-controls button[data-control="right"] { left: calc(var(--control-size,56px) + 12px); }
#touch-controls button[data-control="down"] { right: calc(var(--control-size,56px) + 12px); }
#touch-controls .jump { right: 0; background: #ff4e8a; }
#rotate-hint { display: none; position: absolute; inset: 0; z-index: 10; place-content: center; text-align: center; background: #0c0d1c; color: white; font-size: 42px; padding: 24px; }
#rotate-hint span { display: block; font-size: 18px; margin-top: 16px; }
#app[data-portrait="true"] #rotate-hint { display: grid; }