/* A bounded phone app: only the open information pane scrolls. */
#mobile-navigation,#mobile-story-picker,#mobile-quiz-hint{display:none}
html.mobile-viewport{height:100%;overflow:hidden;overscroll-behavior:none}
body.mobile-app{--mobile-nav-height:calc(58px + env(safe-area-inset-bottom,0px));height:100dvh;min-height:0!important;overflow:hidden;display:flex;flex-direction:column}
.mobile-app .topbar{flex:0 0 auto}
.mobile-app:not(.landing) .workspace,.mobile-app.advanced-open:not(.landing) .workspace{position:relative;display:block;flex:1 1 0;min-height:0;height:0;overflow:hidden;grid-template-columns:none}
.mobile-app:not(.landing) #stage{position:absolute;inset:0;width:100%;height:100%!important;min-height:0!important}
.mobile-app[data-mobile-view="stories"]:not(.landing) #stage,.mobile-app[data-mobile-view="details"]:not(.landing) #stage{visibility:hidden;pointer-events:none}
.mobile-app .right-panel{position:absolute;inset:0;width:100%;height:100%;max-height:none;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:16px;display:none}
.mobile-app[data-mobile-view="details"]:not(.landing) .right-panel{display:block}
.mobile-app #back-to-model,.mobile-app #mobile-detail-link,.mobile-app .statusbar{display:none!important}
.mobile-app #mobile-navigation{position:relative;z-index:32;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));flex:0 0 var(--mobile-nav-height);height:var(--mobile-nav-height);padding:4px 6px calc(4px + env(safe-area-inset-bottom,0px));gap:4px;background:#101f25;border-top:1px solid #40585c}
.mobile-app #mobile-navigation button{min-height:48px;min-width:0;border:1px solid transparent;border-radius:10px;background:transparent;color:#bbcecf;font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:6px;padding:6px}
.mobile-app #mobile-navigation button span{white-space:nowrap}
.mobile-app #mobile-navigation button svg{width:20px;height:20px;flex-shrink:0}
.mobile-app #mobile-navigation button[aria-pressed="true"]{color:#172b2b;background:var(--lime);border-color:var(--lime)}
.mobile-app #mobile-story-picker{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;padding:14px 12px;background:#0d1b20;overflow:hidden}
.mobile-picker-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-shrink:0}
.mobile-picker-head h2{font-size:21px;line-height:1.2;margin:0 0 5px;color:#f1f4ec;letter-spacing:-.4px}
.mobile-picker-head span{font-size:13px;line-height:1.3;color:#a9c6c5;display:block}
.mobile-picker-head button{flex-shrink:0;max-width:115px;min-height:44px;padding:7px 10px;background:#203935;border:1px solid #617d68;border-radius:10px;font-size:13px;line-height:1.3;color:var(--lime)}
#mobile-story-grid{flex:1 1 0;min-height:0;display:grid;grid-template-columns:repeat(var(--story-columns,2),minmax(0,1fr));grid-template-rows:repeat(var(--story-rows,4),minmax(0,1fr));gap:8px}
.mobile-app #mobile-story-grid .simulation-card{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;gap:6px;min-height:0;min-width:0;width:100%;height:100%;margin:0;padding:10px 12px;border-radius:14px;overflow:hidden;border-color:#45636a;background:linear-gradient(135deg,#203940,#142a30)}
.mobile-app #mobile-story-grid .simulation-card>svg,.mobile-app #mobile-story-grid small,.mobile-app #mobile-story-grid em{display:none}
.mobile-app #mobile-story-grid .simulation-card strong{font-size:16px;line-height:1.2;display:block;overflow-wrap:break-word}
.mobile-app #mobile-story-grid .simulation-card-icon,.mobile-app #mobile-story-grid .simulation-card-icon svg{width:34px;height:34px;min-width:34px;flex:0 0 auto}
.mobile-picker-pages{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0}
.mobile-picker-pages button{min-height:44px;min-width:64px;padding:8px 16px;border:1px solid #567b76;border-radius:10px;background:#20373d;color:#e3eee8;font-size:16px}
.mobile-picker-pages button:disabled{opacity:.4}.mobile-picker-pages span{font-size:14px;color:#c6d5d0}
.mobile-app #mobile-navigation[hidden],.mobile-app #mobile-story-picker[hidden],.mobile-picker-pages[hidden],#mobile-story-grid [hidden]{display:none!important}
.mobile-app #simulation-caption{max-height:min(240px,max(60px,calc(100dvh - var(--toolbar-height) - var(--mobile-nav-height) - 294px)))}
.mobile-app.simulation-active #canvas-host{min-height:120px}
.mobile-app.compact-landscape #simulation-caption{max-height:none}
.mobile-app.compact-landscape #mobile-story-grid .simulation-card{padding:8px;gap:4px}
.mobile-app.compact-landscape #mobile-story-grid .simulation-card strong{font-size:15px}
.mobile-app.compact-landscape #mobile-story-grid .simulation-card-icon,.mobile-app.compact-landscape #mobile-story-grid .simulation-card-icon svg{width:26px;height:26px;min-width:26px}
.mobile-app.compact-landscape .mobile-picker-head h2{font-size:19px;margin:0}.mobile-app.compact-landscape .mobile-picker-head span{display:none}
.mobile-app.compact-landscape #mobile-story-picker{padding:8px 12px;gap:8px}
.mobile-app.advanced-open #left-panel{bottom:var(--mobile-nav-height);max-height:none;z-index:31}
.mobile-app #model-tools-dialog{bottom:var(--mobile-nav-height)}
.mobile-app.mobile-tools-open:not(.landing) #stage{position:fixed;top:var(--toolbar-height);bottom:calc(var(--mobile-sheet-height) + var(--mobile-nav-height));height:auto!important;z-index:20}
.mobile-app.compact-landscape.mobile-tools-open:not(.landing) #stage{right:44%;width:56%;bottom:var(--mobile-nav-height)}
.mobile-app .activity-error{bottom:calc(var(--mobile-nav-height) + 12px)}
.mobile-app .toast{bottom:calc(var(--mobile-nav-height) + 12px)}
.mobile-app #mobile-quiz-hint:not([hidden]){display:block;position:absolute;bottom:12px;left:12px;right:12px;border:1px solid #b99460;background:#263b3e;color:#f3e8ce;border-radius:12px;padding:12px;font-size:16px;text-align:left}
/* The three entry choices also fit the screen. The model remains tappable between them and the title. */
.mobile-app.landing .welcome-screen{flex:1 1 0;min-height:0!important;overflow:hidden;padding:12px;gap:8px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(40px,1fr) auto}
.mobile-app.landing .welcome-copy{max-width:100%;width:auto}
.mobile-app.landing .welcome-copy h1{font-size:28px;line-height:1.1;letter-spacing:-1px;margin:0}
.mobile-app.landing .welcome-copy h1 br{display:none}
.mobile-app.landing .welcome-copy>.eyebrow,.mobile-app.landing .welcome-copy>p{display:none}
.mobile-app.landing .welcome-product-link{font-size:14px;min-height:44px}
.mobile-app.landing .welcome-model-space{display:block;min-height:0}
.mobile-app.landing .welcome-doors{display:grid;grid-template-columns:1fr;gap:6px;width:100%;max-width:none}
.mobile-app.landing .welcome-doors button{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:10px;padding:10px 14px;min-height:54px;border-radius:13px}
.mobile-app.landing .welcome-doors strong{font-size:17px;line-height:1.2}
.mobile-app.landing .welcome-doors button>.door-number,.mobile-app.landing .welcome-doors button>span:not(.door-cell),.mobile-app.landing .welcome-doors b{display:none}
.mobile-app.landing .welcome-doors svg,.mobile-app.landing .welcome-doors .door-cell{width:30px;height:30px}
.mobile-app.landing .welcome-doors .door-cell:after{display:none}
.mobile-app.landing .workspace{position:absolute;inset:var(--toolbar-height) 0 0;opacity:1}
.mobile-app.landing #stage{height:100%!important;min-height:0!important}
.mobile-app.landing #canvas-host{left:0;width:100%}
.mobile-app.compact-landscape.landing .welcome-doors{grid-template-columns:repeat(3,minmax(0,1fr))}
.mobile-app.compact-landscape.landing .welcome-doors button{padding:8px;gap:6px}
.mobile-app.compact-landscape.landing .welcome-doors strong{font-size:15px}
.mobile-app.compact-landscape.landing .welcome-copy{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mobile-app.compact-landscape.landing .welcome-copy h1{font-size:24px}
.mobile-app .gesture-demo{top:calc(var(--toolbar-height) + 60px);bottom:auto;left:12px;right:12px;max-width:370px;width:auto;transform:none;margin:0 auto;padding:10px 14px;display:flex;align-items:center;gap:12px;border-radius:12px;pointer-events:none}
.mobile-app .gesture-demo[hidden]{display:none}.mobile-app .gesture-demo>span{font-size:28px}.mobile-app .gesture-demo strong{font-size:14px}
.mobile-app[data-mobile-view="stories"] .gesture-demo,.mobile-app[data-mobile-view="details"] .gesture-demo{display:none}
@media(max-height:600px) and (orientation:portrait){
 .mobile-app #simulation-caption{max-height:112px}
 .mobile-app .right-panel>#sim-progress{display:block;width:100%;height:44px;margin:0 0 16px;accent-color:var(--lime)}
 .mobile-app.compact-phone.simulation-active .simulation-controls{grid-template-areas:"caption" "transport";grid-template-rows:auto 44px}
}
@media(max-width:360px){.mobile-app #mobile-navigation button{font-size:13px;gap:4px;padding:6px 4px}.mobile-app #mobile-navigation button svg{width:18px;height:18px}}
@media(max-height:540px) and (orientation:portrait){.mobile-app.simulation-active .stage-header{display:none}}