* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin:0; padding:0; width:100%; height:100%; overflow:hidden; background:#050911; color:#fff; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; touch-action:none; user-select:none; }
#app { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background: radial-gradient(circle at 50% 10%, #112d55 0%, #050911 55%, #02040a 100%); }
canvas { display:block; width:100vw; height:100vh; object-fit:contain; background:#07101f; }
#rotateHint { display:none; position:fixed; inset:0; align-items:center; justify-content:center; padding:30px; text-align:center; font-size:22px; font-weight:800; background:#050911; z-index:10; }
@media (orientation: landscape) and (max-height: 520px) { #rotateHint { display:flex; } canvas { opacity:.15; } }