/* ── Coyote Arcade subnav ── */ .arcade-subnav { background: linear-gradient(135deg, #1a0b2e 0%, #24123f 50%, #0d0620 100%); border-bottom: 2px solid #00e5ff; } .arcade-subnav .nav-link { color: rgba(255,255,255,.75); font-size: .875rem; padding: .4rem .85rem; border-radius: .375rem; transition: background .15s, color .15s; } .arcade-subnav .nav-link:hover, .arcade-subnav .nav-link.active { color: #fff; background: rgba(0,229,255,.15); } .arcade-subnav .arcade-brand { color: #fff; font-weight: 700; font-size: 1rem; text-decoration: none; display: flex; align-items: center; gap: .4rem; } .arcade-subnav .arcade-brand i { color: #ff2ec4; } .arcade-subnav .nav-separator { width: 1px; background: rgba(255,255,255,.2); height: 1.25rem; margin: 0 .5rem; } /* ── Arcade page background ── */ [data-bs-theme="dark"] body.arcade-site { background: #0D0616; } body.arcade-site .arcade-hero { background: radial-gradient(circle at 50% 0%, rgba(0,229,255,.12) 0%, transparent 60%); } body.arcade-site .arcade-game-card { border-color: rgba(0,229,255,.25); transition: border-color .15s, transform .15s, box-shadow .15s; } body.arcade-site .arcade-game-card:hover { border-color: #00e5ff; transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,229,255,.25); } /* ── Game viewport ─────────────────────────────────────────────────────────── The canvas is scaled by Phaser's Scale Manager (FIT), which sizes the game to whatever box we give it here. Giving the container an explicit, viewport-relative height — rather than a fixed 480px — is what makes every game responsive and playable on a phone, without any game changing its own coordinates. */ #arcade-game-root { width: 100%; height: min(70vh, 620px); display: flex; align-items: center; justify-content: center; overflow: hidden; } /* In fullscreen the wrapper becomes the whole screen; FIT re-scales into it. */ #arcade-game-root:fullscreen { width: 100vw; height: 100vh; max-height: none; background: #0d0616; } #arcade-game-root canvas { display: block; touch-action: none; /* stop mobile browsers panning/zooming on gameplay taps */ } /* Applied to only while a run is active (ArcadeViewport), so the page can't scroll the canvas out from under the player. Removed on game-over so the leaderboard/achievements below stay reachable. */ body.arcade-scroll-locked { overflow: hidden; } /* Short viewports (phone landscape): let the game take essentially the whole screen. */ @media (max-height: 520px) { #arcade-game-root { height: 92vh; } }