* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; } html, body { width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; background: #0a0a14; display: flex; justify-content: center; align-items: center; font-family: "Segoe UI", "Arial", sans-serif; touch-action: none; } /* Mobile-first: fill the viewport edge-to-edge. Phaser's Scale Manager (RESIZE mode) resizes the canvas to exactly match this box on its own, including on rotate/resize — this just needs to give it the full space to work with. */ #game-wrapper, #game-container { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; } /* Hard safety net: no matter what size Phaser's Scale Manager computes internally (mobile browsers can report a stale/incorrect viewport size on first load, before the address bar finishes collapsing), the *displayed* canvas can never exceed the actual viewport. Without this, an oversized canvas gets silently clipped by `overflow: hidden` on above, cutting off whatever fell outside the visible area — which is exactly the right-anchored controls (up/down, action, pause, sound icon). max-width/ max-height win over an inline pixel width Phaser sets via JS, so this is a real constraint, not just a suggestion. */ #game-container canvas { display: block; max-width: 100%; max-height: 100%; } /* Toggled on the container by GameScene while a boss fight is active. */ #game-container.boss-mode { box-shadow: inset 0 0 60px rgba(255, 50, 0, 0.5); transition: box-shadow 0.3s; } /* On larger screens, keep a bit of "premium window" polish, but never stop filling the viewport — full-bleed edge-to-edge on any display size, desktop included, same as mobile/tablet. An inset glow doesn't consume any layout space, so it costs zero screen real estate either way. */ @media (min-width: 900px) and (min-height: 700px) { #game-container { box-shadow: inset 0 0 80px rgba(0, 160, 255, 0.18); transition: box-shadow 0.3s; } #game-container.boss-mode { box-shadow: inset 0 0 100px rgba(255, 50, 0, 0.35); } } /* Shown by orientationGuard.js when a touch device is held in portrait. Styled as a modal: dimmed backdrop behind a bordered card, matching the in-game modal (soundSetupModal.js) visual language. */ #orientation-guard { display: none; position: fixed; inset: 0; z-index: 10000; background: rgba(5, 5, 15, 0.88); color: #fff; justify-content: center; align-items: center; padding: 24px; font-family: "Segoe UI", "Arial", sans-serif; } #orientation-guard.visible { display: flex; } #orientation-guard .card { display: flex; flex-direction: column; align-items: center; text-align: center; background: #101025; border: 2px solid #66ccff; border-radius: 18px; padding: 32px 28px; max-width: 320px; box-shadow: 0 0 40px rgba(100, 180, 255, 0.35); } #orientation-guard .icon { font-size: 48px; margin-bottom: 16px; animation: rotate-hint 1.6s ease-in-out infinite; } #orientation-guard h2 { font-size: 17px; color: #ffcc00; margin-bottom: 10px; } #orientation-guard p { font-size: 14px; color: #aaddff; line-height: 1.4; margin-bottom: 16px; } #orientation-continue-btn { font: inherit; font-weight: 700; font-size: 13px; color: #1a1400; background: linear-gradient(180deg, #ffdd55, #ffaa00); border: none; border-radius: 8px; padding: 10px 18px; cursor: pointer; box-shadow: 0 3px 0 #a06e00; } #orientation-continue-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #a06e00; } @keyframes rotate-hint { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-90deg); } }