/* Only the orientation overlay and mobile layout; desktop styles stay intact. */
#orientationGate{position:absolute;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:radial-gradient(ellipse at 50% 40%,#41372a,#161912 76%);text-align:center;overflow:auto;outline:none;touch-action:none}
.orientation-card{width:min(420px,100%);padding:24px 4px}
.orientation-icon{width:124px;height:112px;margin:0 auto 20px;color:var(--paper);display:block;fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.orientation-icon .turn-arrow{stroke:var(--hot)}
#orientationTitle{font:900 italic clamp(25px,7vw,38px)/1.1 var(--comic);margin:0 0 16px;color:var(--paper);overflow-wrap:normal}
#orientationText{font-size:16px;line-height:1.55;color:#ddd2b6;margin:0 auto;max-width:300px}
#orientationResume{margin:22px auto 0;max-width:320px;min-height:48px;font-size:18px;justify-content:center}
#orientationGate.ready .orientation-icon{width:90px;height:76px;margin-bottom:12px}
#orientationGate.ready .turn-arrow{display:none}
.mobile-device #tip{display:none!important}
@media(orientation:landscape){
 .mobile-device{--edge-left:max(20px,calc(env(safe-area-inset-left) + 10px));--edge-right:max(20px,calc(env(safe-area-inset-right) + 10px));--edge-bottom:max(18px,calc(env(safe-area-inset-bottom) + 8px))}
 .mobile-device #intro{padding:max(58px,calc(env(safe-area-inset-top) + 52px)) var(--edge-right) max(8px,env(safe-area-inset-bottom)) var(--edge-left)}
 .mobile-device #intro .intro-card{margin:0 0 0 3%;max-height:100%;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;padding:8px 16px;width:min(440px,65%);align-self:center}
 .mobile-device #intro .intro-card *{touch-action:pan-y}
 .mobile-device #intro button{touch-action:manipulation}
 .mobile-device #intro .device-note{font-size:11px;line-height:1.5}
 .mobile-device #menu,.mobile-device #settingsPanel{padding:max(8px,env(safe-area-inset-top)) var(--edge-right) max(8px,env(safe-area-inset-bottom)) var(--edge-left)}
 .mobile-device .menu-card{max-height:100%;overscroll-behavior:contain}
 .mobile-device .tools button{min-width:44px;min-height:44px}
}
@media(orientation:landscape) and (max-height:540px){
 .mobile-device #intro .intro-card{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;width:min(600px,88%);max-width:600px;padding:4px 12px}
 .mobile-device #intro h1{grid-column:1;grid-row:1/3;font-size:clamp(36px,6.8vw,48px);margin:0;align-self:center;letter-spacing:-1px}
 .mobile-device #intro .intro-card>p:not(.device-note){grid-column:1;grid-row:3;font-size:11px;margin:4px 0;line-height:1.4}
 .mobile-device #intro #start{grid-column:2;grid-row:1;margin:0;align-self:end}
 .mobile-device #intro #openSettings{grid-column:2;grid-row:2;margin:0;align-self:start}
 .mobile-device #intro #start,.mobile-device #intro #openSettings{min-height:44px;font-size:18px;padding:10px;letter-spacing:.5px;white-space:nowrap}
 .mobile-device #intro .device-note{grid-column:2;grid-row:3;font-size:10px;margin:4px 0;line-height:1.4}
 .mobile-device #intro .scene-stamp{right:var(--edge-right);bottom:max(10px,env(safe-area-inset-bottom));padding:6px 12px}
 .mobile-device #intro .scene-stamp b{font-size:15px}
 .mobile-device #hud{top:max(60px,calc(env(safe-area-inset-top) + 52px))}
 .mobile-device .actionpad{height:140px}
 .mobile-device #orientationGate.ready .orientation-card{padding:4px}
 .mobile-device .settings-card{display:grid;grid-template-columns:1fr 1fr;gap:6px 20px;width:min(600px,100%);padding:12px 16px}
 .mobile-device .settings-card .eyebrow{display:none}
 .mobile-device .settings-card h2{grid-column:1/3;margin:0 0 4px}
 .mobile-device .settings-card label{margin:0;font-size:14px;min-width:0}
 .mobile-device .settings-card label[for=musicVolume]{grid-column:1;grid-row:2}
 .mobile-device .settings-card label[for=sfxVolume]{grid-column:2;grid-row:2}
 .mobile-device #musicVolume{grid-column:1;grid-row:3}
 .mobile-device #sfxVolume{grid-column:2;grid-row:3}
 .mobile-device .settings-card input[type=range]{margin:0;min-height:40px}
 .mobile-device .settings-card .effect-choice{grid-column:1/3;min-height:38px}
 .mobile-device .settings-card p{font-size:11px;align-self:center;margin:0;line-height:1.4}
 .mobile-device .settings-card #backSettings{margin:0;min-height:44px;font-size:15px;justify-content:center}
}
@media(orientation:landscape) and (max-height:320px){
 .mobile-device #intro .scene-stamp{display:none}
 .mobile-device #orientationGate.ready .orientation-icon{display:none}
 .mobile-device #orientationTitle{font-size:28px}
 .mobile-device #orientationText{font-size:14px}
}