/* 모바일 가로 전용 게임 껍데기 — static/mobile_shell.js 와 함께 쓴다.
 * 게임 요소(stage)에 class="shell-stage" 를 달면 shell 이 isfs / fsfake / fsrot / flip / idle / nocursor 클래스를 붙였다 뗀다.
 * 게임 쪽 CSS가 id 선택자(#stage)로 크기를 지정해도 이기도록 중요 속성에는 !important 를 썼다. */
html { touch-action:manipulation; -webkit-text-size-adjust:100%; }
.shell-stage { -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
.shell-stage:fullscreen, .shell-stage:-webkit-full-screen, .shell-stage.isfs { width:100vw !important; height:100vh !important; height:100dvh !important; aspect-ratio:auto !important; border:0 !important; border-radius:0 !important; }
.shell-stage.fsfake { position:fixed !important; inset:0; z-index:9999; }
.shell-stage .shell-scroll { touch-action:pan-y; }
.shell-stage.nocursor, .shell-stage.nocursor * { cursor:none !important; }
/* 세로로 든 폰: 게임판을 90도 돌려 가로 화면처럼 보여 준다(뒤집기 버튼으로 방향 선택) */
.shell-stage.fsrot { position:fixed !important; inset:auto; top:0; left:100%; width:100vh !important; width:100dvh !important; height:100vw !important; height:100dvw !important; transform:rotate(90deg); transform-origin:0 0; z-index:9999; }
.shell-stage.fsrot.flip { top:100%; left:0; transform:rotate(-90deg); }
.shell-exit, .shell-flip { display:none; position:absolute; z-index:30; top:12px; width:42px; height:42px; padding:0; border-radius:50%; border:2px solid rgba(255,255,255,.85); background:rgba(30,36,42,.55); cursor:pointer; }
.shell-exit { right:max(12px,env(safe-area-inset-right)); }
.shell-flip { right:calc(max(12px,env(safe-area-inset-right)) + 50px); padding:9px; }
.shell-exit:before, .shell-exit:after { content:''; position:absolute; left:50%; top:50%; width:20px; height:3px; margin:-1.5px 0 0 -10px; border-radius:2px; background:#fff; transform:rotate(45deg); }
.shell-exit:after { transform:rotate(-45deg); }
.shell-stage.isfs .shell-exit { display:block; }
.shell-stage.fsrot .shell-flip { display:block; }
.shell-stage.nocursor .shell-exit { cursor:pointer !important; }
.shell-confirm { position:absolute; inset:0; z-index:40; display:none; place-items:center; background:rgba(12,14,18,.62); }
.shell-confirm.on { display:grid; }
.shell-confirm .box { width:min(86%,360px); padding:18px 20px; border-radius:14px; background:#f7f7f4; color:#30343b; text-align:center; box-shadow:0 8px 28px rgba(0,0,0,.4); }
.shell-confirm h3 { margin:0 0 4px; font-size:1.15rem; }
.shell-confirm p { margin:0 0 14px; color:#6b7078; font-size:.85rem; line-height:1.5; }
.shell-confirm button { margin:0 5px; padding:10px 18px; border:0; border-radius:8px; background:#555e65; color:#fff; font-weight:750; font-size:.95rem; cursor:pointer; }
.shell-confirm button.stay { background:#4f6f62; }