* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { display: grid; place-items: center; overflow: hidden; background: #07101f; font-family: system-ui, sans-serif; }
[hidden] { display: none !important; }
.stage { position: relative; width: min(100vw, 177.777778vh); width: min(100vw, 177.777778dvh); aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate; background: #07152a; }
.background { position: absolute; width: 100%; height: 100%; object-fit: contain; user-select: none; }
.cast { position: absolute; inset: 0; transition: opacity 600ms ease; pointer-events: none; }
.logo, .character { position: absolute; height: auto; }
.logo { width: 29%; top: -3%; left: 35.5%; }
.character { width: 22%; left: 39%; bottom: 18%; }
.start { position: absolute; width: 25%; left: 37.5%; bottom: 3%; padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; animation: pulse 1.4s ease-in-out infinite; }
.start canvas { display: block; width: 100%; height: auto; }
.start:hover { filter: brightness(1.08); }
.start:focus-visible { outline: 3px solid white; outline-offset: 5px; border-radius: 8px; }
.start:active, .start.pressed { animation: none; transform: scale(.97); filter: brightness(.9); }
.shade { position: absolute; inset: 0; background: #02091a; opacity: 0; transition: opacity 400ms ease; pointer-events: none; }
.stage.onboarding .shade { opacity: .3; }
.instructions { position: absolute; inset: 0; pointer-events: none; }
.panel { position: absolute; object-fit: contain; opacity: 0; transform: translate(-50%, -50%) scale(.97); transition: opacity 400ms ease, transform 400ms ease; }
.panel.visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.howtoplay { width: 96%; height: auto; left: 50%; top: 83%; }
.collect { width: 58%; max-height: 46%; left: 50%; top: 74%; }
.avoid { width: 72%; max-height: 46%; left: 50%; top: 74%; }
.curtain-transition { position: absolute; inset: 0; z-index: 10; overflow: hidden; }
.curtain { position: absolute; top: 0; bottom: 0; width: 50.1%; background: #710b08; }
.curtain-left { left: 0; transform: translateX(-101%); }
.curtain-right { right: 0; transform: translateX(101%); }
.curtain canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.curtain-spotlight { position: absolute; width: 49%; height: 82%; object-fit: contain; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0; mix-blend-mode: screen; pointer-events: none; }
.status { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; padding: 12px 20px; color: #fff; background: #07152ae8; border-radius: 6px; text-align: center; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
.status { z-index: 30; }
.level1 { position:absolute; inset:0; z-index:3; }
#level1-canvas { display:block; width:100%; height:100%; touch-action:none; }
.level1-pause { position:absolute; z-index:20; top:2.5%; right:1.4%; width:5.5%; padding:0; border:0; background:none; cursor:pointer; }
.level1-pause img { display:block; width:100%; }
.level1-pause[aria-pressed="true"] { filter:brightness(.65); outline:3px solid #ffdd64; border-radius:15%; }
.level1-pause:focus-visible { outline:3px solid white; }
.level1-countdown { position:absolute; inset:0; display:grid; place-items:center; color:#fff; font:bold clamp(40px,10vw,150px)/1 monospace; text-shadow:5px 5px 0 #07152a,-3px -3px 0 #07152a,0 0 35px #399dff; pointer-events:none; }
.level1-countdown.is-go { color:#ffdd64; }
.level1-gameover { position:absolute; inset:0; display:grid; place-items:center; background:#07152ab8; color:white; text-align:center; }
.level1-gameover h1 { font:bold clamp(24px,5vw,76px) monospace; margin:0 0 24px; }
.level1-gameover button { cursor:pointer; color:#07152a; background:#ffcf38; border:4px solid #fff0a0; padding:14px 50px; font:bold clamp(18px,2vw,32px) monospace; box-shadow:6px 6px 0 #07152a; }
.complete-controls { position:absolute; inset:0; z-index:4; pointer-events:none; }
#complete-next { position:absolute; left:52.5%; top:75.5%; width:38.4375%; height:14.91667%; padding:0; border:0; background:transparent; cursor:pointer; pointer-events:auto; transform-origin:center; }
#complete-next canvas { display:block; width:100%; height:100%; }
#complete-next:focus-visible { outline:4px solid white; outline-offset:3px; border-radius:12px; }
#complete-next:active { filter:brightness(.8); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
#level-pause-menu button { display:block; margin:18px auto; }
.complete-controls[data-level="2"] #complete-next { left:59.5689%; top:77.7638%; width:34.956%; height:12.6521%; }
@media (prefers-reduced-motion: reduce) { .start { animation: none; } .panel { transform: translate(-50%, -50%); } }

/* Phase 1: fit the complete artwork inside the mobile safe rectangle. */
.mobile-layout { 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); }
.orientation-gate { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); background: #07152a; color: white; text-align: center; }
.orientation-gate button { min-height: 48px; padding: 12px 24px; font: bold 18px system-ui; cursor: pointer; }
.mobile-blocked .stage { pointer-events: none; }
.mobile-blocked .stage * { animation-play-state: paused !important; }
.mobile-layout .level1-pause { width: 48px; height: 48px; right: 4px; top: 4px; display: grid; place-items: center; }
.mobile-layout .level1-pause img { width: 40px; height: 40px; object-fit: contain; }
.mobile-layout .start::after, .mobile-layout #complete-next::after { content: ''; position: absolute; min-height: 48px; inset: 50% 0 auto; height: 100%; transform: translateY(-50%); }
.mobile-layout .level1-gameover h1 { font-size: 26px; margin: 0 0 8px; }
.mobile-layout .level1-gameover button { min-height: 48px; padding: 8px 24px; font-size: 18px; }
.mobile-layout #level-pause-menu button { margin: 8px auto; }

.mobile-layout .start::after { inset: auto 0 0; transform: none; }