/* Touch-only, safe viewport-sized surfaces. Desktop art and controls are untouched. */
.mobile-ui { -webkit-text-size-adjust:100%; text-size-adjust:100%; overflow:hidden; }
.mobile-ui .main-menu.image-main-menu { width:100%; height:100%; min-height:0; padding:0; background:#130b09; }
.mobile-ui .reference-menu-stage { width:var(--mobile-menu-width,100%); height:var(--mobile-menu-height,auto); min-width:0; max-width:none; max-height:none; }
.mobile-ui .reference-menu-image { object-fit:contain; }
.mobile-ui .reference-hud { transform:matrix(var(--mobile-cover-scale,.5),0,0,var(--mobile-cover-scale,.5),var(--mobile-cover-left,0),var(--mobile-cover-top,0)); }
.mobile-ui .reference-hud #referenceOverlay,.mobile-ui .reference-patches { pointer-events:none; }

.mobile-ui .secondary-menu { padding:10px 12px; left:var(--mobile-left,0); top:var(--mobile-top,0); right:auto; bottom:auto; width:var(--mobile-width,100%); height:var(--mobile-height,100%); overflow:hidden; }
.mobile-ui .secondary-menu .menu-sheet { display:flex; flex-direction:column; width:100%; height:100%; max-width:1100px; max-height:100%; padding:12px 16px; overflow:hidden; }
.mobile-ui .menu-sheet-header { position:relative; top:auto; flex:0 0 auto; gap:8px; margin:0 0 8px; padding:0 0 6px; }
.mobile-ui .menu-sheet-header .menu-subtitle { display:none; }
.mobile-ui .menu-sheet-header h2 { font-size:23px; line-height:1.3; letter-spacing:2px; }
.mobile-ui .menu-sheet-header button { min-height:38px; padding:5px 15px; }
.mobile-ui #menuPanelBody { min-height:0; flex:1; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; touch-action:pan-y; }
.mobile-ui .menu-sheet > .setting-note { display:none; }
.mobile-ui .menu-tabs { position:sticky; top:0; z-index:2; background:#251a17; gap:8px; margin:0 0 8px; padding:0 0 5px; }
.mobile-ui .menu-tabs button { min-height:36px; padding:5px 18px; }
.mobile-ui .codex-grid { grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:8px; padding:3px; }
.mobile-ui .codex-card { min-height:106px; padding:8px 5px; gap:3px; }
.mobile-ui .codex-card canvas { width:52px; height:52px; }
.mobile-ui .codex-card strong { font-size:12px; }
.mobile-ui .codex-detail { margin:4px 3px; padding:8px 12px; scroll-margin-top:48px; }
.mobile-ui .codex-detail > strong { font-size:18px; margin:0; }
.mobile-ui .codex-detail p { font-size:12px; margin:3px 0; }
.mobile-ui #codexCount { margin:4px; font-size:11px; }
.mobile-ui .settings-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 22px; }
.mobile-ui .setting-row { min-height:61px; grid-template-columns:minmax(0,1fr) minmax(95px,1fr); gap:8px; padding:7px 0; }
.mobile-ui .setting-row label { font-size:13px; }
.mobile-ui .setting-row input,.mobile-ui .setting-row select,.mobile-ui .setting-row button { min-height:36px; }
.mobile-ui .mobile-native-select[hidden] { display:none; }
.mobile-ui .mobile-select-trigger { display:flex; align-items:center; justify-content:space-between; gap:8px; text-align:left; }
.mobile-ui .mobile-select-options { position:absolute; z-index:5; padding:4px; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; color:#e0c6a2; background:#211510; border:1px solid #98724d; box-shadow:0 5px 15px #0008; }
.mobile-ui .mobile-select-options button { display:block; width:100%; min-height:40px; padding:8px 12px; text-align:left; font:inherit; font-size:14px; border:0; background:transparent; color:inherit; }
.mobile-ui .mobile-select-options button[aria-selected=true],.mobile-ui .mobile-select-options button:focus-visible { background:#672d21; color:#ffe3b6; outline:1px solid #bc8d59; outline-offset:-2px; }
.mobile-ui .controls-guide h3 { margin:7px 0 4px; font-size:18px; }
.mobile-ui .controls-guide p { line-height:1.65; font-size:12px; margin-bottom:9px; }
.mobile-ui :is(.menu-confirm,#helpDialog) { max-height:calc(var(--mobile-height,100vh) - 24px); max-width:calc(var(--mobile-width,100vw) - 30px); overflow:auto; padding:18px 23px; }
.mobile-ui .menu-confirm h2 { font-size:23px; }
.mobile-ui .menu-confirm p { margin-bottom:10px; }
.mobile-ui #helpDialog h2 { font-size:23px; }
.mobile-ui #helpDialog p { font-size:12px; }
.mobile-ui #helpDialog .dialog-close { position:sticky; top:0; float:right; }

/* Independent unscaled controls stay within the phone's physical safe viewport. */
.mobile-ui #touchControls { position:fixed; left:var(--mobile-left,0); top:var(--mobile-top,0); width:var(--mobile-width,100%); height:var(--mobile-height,100%); max-width:none; display:block; z-index:33; pointer-events:none; margin:0; padding:0; }
.mobile-ui #touchControls .touch-side { position:absolute; bottom:8px; pointer-events:none; }
.mobile-ui #touchControls .move-side { left:var(--mobile-move-left,30px); bottom:var(--mobile-move-bottom,20px); width:var(--mobile-stick); height:var(--mobile-stick); }
.mobile-ui #joystick { position:relative; width:100%; height:100%; border:3px double #b09b7b; border-radius:50%; background:radial-gradient(circle,#332323bf,#110e0ed9); box-shadow:inset 0 0 0 5px #352922; opacity:.45; pointer-events:auto; touch-action:none; }
.mobile-ui #joystick.engaged { opacity:.74; }
.mobile-ui #joystickKnob { position:absolute; left:32%; top:32%; width:36%; height:36%; border:2px solid #ae9479; border-radius:50%; background:radial-gradient(circle at 35% 30%,#8f7762,#31241f); pointer-events:none; translate:none; }
.mobile-ui #touchControls .attack-side { right:var(--mobile-attack-right,30px); bottom:var(--mobile-attack-bottom,14px); width:calc(var(--mobile-key) * 2.9); height:calc(var(--mobile-key) * 2.9); }
.mobile-ui #shootPad { position:relative; display:block; width:100%; height:100%; }
.mobile-ui #shootPad button { width:var(--mobile-key); height:var(--mobile-key); border:1px solid #b49778; border-radius:35%; background:#2d171ade; box-shadow:inset 0 0 0 3px #42302980,0 1px 3px #0008; font:bold 25px/1 serif; color:#ecd0ae; opacity:.55; pointer-events:auto; touch-action:none; user-select:none; padding:0; transition:opacity .06s,background .06s; }
.mobile-ui #shootPad button.active { opacity:.85; background:#713128; }
.mobile-ui #shootPad button { position:absolute; }
.mobile-ui #shootPad [data-shoot=up] { left:calc(50% - var(--mobile-key) / 2); top:0; }
.mobile-ui #shootPad [data-shoot=left] { left:0; top:calc(50% - var(--mobile-key) / 2); }
.mobile-ui #shootPad [data-shoot=right] { right:0; top:calc(50% - var(--mobile-key) / 2); }
.mobile-ui #shootPad [data-shoot=down] { left:calc(50% - var(--mobile-key) / 2); bottom:0; }
.mobile-ui #touchBomb { position:absolute; right:calc(var(--mobile-key) * 2.9 + var(--mobile-attack-right,30px) + 24px); bottom:calc(var(--mobile-attack-bottom,14px) + var(--mobile-key) * 2.3); width:42px; height:42px; border:1px solid #aa8d6a; border-radius:50%; background:#2b221abd; color:#e0c39d; font-size:15px; opacity:.65; padding:2px; pointer-events:auto; touch-action:none; }
.mobile-ui #touchBomb small { display:block; font-size:10px; line-height:12px; }
.mobile-ui #touchPause { position:absolute; right:14px; top:var(--mobile-pause-top,70px); width:49px; height:33px; font-size:12px; border:1px solid #99734e; background:#23130de8; color:#ebc69d; pointer-events:auto; touch-action:manipulation; }
.mobile-ui .reference-touch .touch-guide { font-size:16px; }
.mobile-ui :is(#pauseOverlay,#endOverlay) { position:fixed; inset:0; width:100%; height:100%; z-index:36; padding:15px; padding-left:calc(var(--mobile-left,0px) + 15px); padding-right:max(15px,env(safe-area-inset-right),var(--android-safe-right,0px)); overflow:auto; background:rgba(28,23,18,.93); }
.mobile-ui #pauseOverlay.paper-pause { background:rgba(28,23,18,.93); }
.mobile-ui #pauseOverlay h2 { font-size:25px; }
.mobile-ui #pauseOverlay > small { display:none; }
.mobile-ui .pause-actions { width:min(92%,480px); grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.mobile-ui .pause-actions button { min-height:46px; font-size:16px; }
.mobile-ui #endOverlay h2 { font-size:26px; }
.mobile-ui #endOverlay .primary-button,.mobile-ui #endHomeButton { min-height:44px; font-size:14px; }
.mobile-ui #endOverlay .end-stats { margin-bottom:16px; }
.mobile-ui .reference-hud #shopPanel { top:10%; left:12%; right:12%; width:auto; padding:10px 14px; grid-template-columns:1fr auto; gap:6px 12px; }
.mobile-ui #shopItemDescription { font-size:15px; line-height:1.4; }
.mobile-ui #shopWallet { font-size:14px; }
.mobile-ui .shop-actions { grid-row:auto; flex-direction:column; }
.mobile-ui .shop-actions button { min-width:112px; min-height:53px; font-size:19px; }
.mobile-ui #shopFeedback { font-size:13px; }
.mobile-ui #saveStatus { font-size:10px; padding:3px 7px; bottom:4px; right:auto; left:50%; transform:translateX(-50%); pointer-events:none; }
@media (max-width:600px) { .mobile-ui .settings-grid { grid-template-columns:1fr; } }