/* Phone layouts reserve separate space for copy, scenes and controls. */
.mobile-product-stage{display:none}
@media(max-width:900px){
 html{scroll-padding-top:76px} body{overflow-x:hidden}
 body>header{height:64px!important;padding:8px 16px!important}
 .identity-logo,.top .identity-logo{width:145px!important;max-height:46px!important}
 body>header nav{top:64px!important}
 button,input,select{min-height:44px} input,select,textarea{font-size:16px!important}
 .chapter,.chapter.hero,body:not([data-view=interactive]) .chapter{display:flex;flex-direction:column;align-items:stretch;min-height:0!important;padding:40px 20px!important;gap:24px;scroll-margin-top:64px}
 .chapter.hero{padding-top:96px!important}
 .chapter-copy{width:100%!important;max-width:none!important}
 .chapter h1{font-size:clamp(34px,8.5vw,52px)} .chapter-copy h2{font-size:32px!important}
 .chapter p:not(.eyebrow){font-size:15px!important;max-width:none!important;line-height:1.65}
 .stage-wrap{display:none!important}
 .mobile-product-stage,#feature-model-stage{display:block!important;position:relative!important;width:100%!important;height:360px!important;flex:none;overflow:hidden;border:1px solid #34464e;border-radius:16px;background:radial-gradient(ellipse,#24323a,#0b141a 75%)}
 .mobile-product-stage canvas,#feature-model-stage canvas{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
 .chapter .control-panel{width:100%!important;max-width:none!important;padding:20px;margin:20px 0}
 .feature-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .feature-tabs button{font-size:12px!important;min-height:64px!important}
 .feature-panel{height:auto!important;min-height:0!important;padding:20px!important}
 .feature-part{position:static!important;margin-top:16px}
 .playback{gap:8px!important}.playback button{font-size:12px!important;min-height:44px}
 .family-story,body:not([data-view=interactive]) .family-story{height:auto!important}
 .family-stage,body:not([data-view=interactive]) .family-stage{position:relative!important;height:auto!important;display:flex;flex-direction:column;padding:32px 20px;gap:20px;overflow:visible}
 .family-top,.family-copy,.family-bottom,.family-nav,.family-stage>.playback{position:static!important;inset:auto!important;width:100%!important;max-width:none!important;margin:0!important}
 .family-top{order:0}.family-copy{order:1;min-height:225px}.family-stage canvas{order:2;position:relative!important;inset:auto!important;width:100%!important;height:340px!important;flex:none;border-radius:16px;background:#101e26}
 .family-stage>.playback{order:3}.family-nav{order:4;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;padding:0!important}
 .family-nav a{font-size:11px!important;padding:12px 5px!important;text-align:center}
 .family-bottom{order:5}.family-bottom small{font-size:11px!important;max-width:none;text-align:left}.family-title{font-size:30px!important}.family-description{font-size:15px!important}.family-shade,.family-labels{display:none!important}
 .world-story,body:not([data-view=interactive]) .world-story{height:auto!important;background:#101e26}
 .world-stage,body:not([data-view=interactive]) .world-stage{position:relative!important;height:auto!important;display:flex;flex-direction:column;gap:20px;padding:32px 20px;background:#101e26}
 .world-top,.world-copy,.world-status,.world-stage>.playback{position:static!important;inset:auto!important;width:100%!important;max-width:none!important;margin:0!important}
 .world-top{order:0}.world-copy{order:1;min-height:270px}.world-step{display:none;position:relative!important;transform:none!important}.world-step.current{display:block}
 .world-step h2{font-size:30px!important}.world-step>p:not(.eyebrow){font-size:15px!important;max-width:none!important}
 .mobile-world-media{position:relative;order:2;height:360px;overflow:hidden;border-radius:16px}
 .mobile-world-media .world-canvas,.mobile-world-media .world-labels{inset:0!important;width:100%!important;height:100%!important}
 .world-status{order:3;min-width:0;padding:16px}.world-stage>.playback{order:4}.world-vignette{display:none}
 .interactive-invite{position:relative!important;inset:auto!important;width:auto!important;max-width:none!important;margin:24px 20px;transform:none!important}
 .section{padding-left:20px!important;padding-right:20px!important}
 .view-toolbar{bottom:8px;right:8px}.view-toolbar button{min-height:36px}
 /* City: toolbars and inspection panels follow normal document flow. */
 body.city-lab{height:auto!important;overflow:auto!important;display:flex;flex-direction:column}
 .city-lab .game-bar{position:sticky!important;top:0!important;inset:auto;order:-1;min-height:64px;height:auto;padding:8px 12px;flex-wrap:wrap;background:#101e26}
 .game-bar .identity-logo{width:110px!important}
 .city-lab main{height:auto!important;display:flex;flex-direction:column;padding:12px!important;gap:16px}
 .city-lab .lab-toolbar,.city-lab .lab-metrics,.city-lab .play-controls,.city-lab .mission-card{position:static!important;inset:auto!important;transform:none!important;width:100%!important;max-width:none!important;max-height:none!important;margin:0!important}
 .city-lab .lab-toolbar{order:0;display:flex;flex-wrap:wrap}.city-lab .lab-metrics{order:1;display:grid;grid-template-columns:1fr 1fr;gap:8px}
 .city-lab .lab-metrics>div{padding:12px;min-width:0}.city-lab .lab-metrics strong{font-size:15px}
 .city-lab .play-controls{order:2;display:flex;gap:8px}.city-lab .play-controls button{font-size:12px;padding:10px}
 #supply-health{max-width:none;width:100%;font-size:13px;padding:12px}
 .city-lab .lab-layout{order:3;position:static!important;display:flex;flex-direction:column;gap:16px;height:auto!important}
 .city-lab .network-stage,.city-lab #three-panel{height:auto!important}
 .city-lab .scene-actions{position:static!important;display:flex;flex-wrap:wrap;gap:8px;padding:12px;background:#101e26}
 .city-lab .scene-actions button{font-size:12px;padding:10px}
 .city-lab .canvas-host{height:440px!important;max-height:none!important;position:relative}
 .city-lab #city-canvas{width:100%;height:100%}
 .city-lab .inspector{position:static!important;width:100%!important;height:auto!important;max-height:none!important;padding:20px;flex:none}
 .city-lab #network-panel{height:auto!important;padding:0!important}
 .city-lab .flow-map-head{height:auto;min-height:90px;gap:12px;flex-wrap:wrap;padding:16px}
 .city-lab #flow-map{height:480px!important;width:100%!important;padding:12px!important;overflow:auto}
 .city-lab #flow-map.map-fitted svg{width:100%!important;height:auto!important;max-width:none;min-width:0}
 .city-lab #flow-map.map-fitted{display:block}
 .city-lab .mission-card{order:4;padding:20px}
 .city-lab .game-welcome{inset:var(--game-header-height,64px) 0 0!important;overflow:auto;background:#0d1e28f5;padding:24px;align-items:flex-start}
 .city-lab .welcome-card h1{font-size:38px}.city-lab .mode-choices{display:grid;grid-template-columns:1fr}.city-lab .mode-choices button{min-width:0;padding:18px}
 .city-lab .settings-open .lab-toolbar{width:100%!important}
 .city-lab.settings-open .lab-title{position:static!important;order:0;width:100%!important;margin:0;padding:16px}
 body:has(.game-welcome:not([hidden])) .lab-metrics,body:has(.game-welcome:not([hidden])) .lab-toolbar,body:has(.game-welcome:not([hidden])) .scene-actions{visibility:hidden}
 .city-lab .consequence{max-height:50svh;overflow:auto}
 /* Control networks: controls below the drawing, never covering it. */
 body.mobile-network-page{padding-bottom:24px}
 .mobile-network-page .layout{display:block!important}.mobile-network-page .layout>nav{display:none!important}
 .mobile-network-page .top{position:relative!important;height:auto!important;display:flex;flex-wrap:wrap;padding:12px!important;gap:12px}
 .mobile-network-page .product{width:100%;border:0;padding:0;font-size:13px}.mobile-network-page .top-actions{width:100%;display:flex;flex-wrap:wrap}
 .mobile-network-page main{padding:16px!important}
 .mobile-network-page .head{display:flex;flex-direction:column;align-items:stretch;gap:16px;margin:16px 0}
 .mobile-network-page .head h1{font-size:24px}.mobile-network-page .head p{font-size:13px}
 .mobile-network-page .controls{flex-wrap:wrap;overflow:visible}.mobile-network-page .controls>*{white-space:normal;font-size:12px}
 .mobile-network-page .metrics{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;overflow:visible}.mobile-network-page .metric{min-width:0;padding:12px}.mobile-network-page .metric span{font-size:11px}
 .mobile-network-page .network-head{flex-wrap:wrap}.mobile-network-page .mobile-network-viewport{height:420px!important;min-height:0!important;max-height:none!important;position:relative}
 .mobile-network-page .mobile-network-tools{position:static!important;width:100%;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:12px;border-radius:0;box-sizing:border-box}
 .mobile-network-page .mobile-network-tools button{min-height:44px;height:auto;font-size:13px}
 .mobile-network-hint{position:static!important;max-width:none;width:auto;margin:0;padding:12px;border:0;border-radius:0;font-size:12px}
 .mobile-network-page .canvas{transition:none!important}
 .mobile-network-page aside,.mobile-network-page aside.mobile-sheet-open{position:relative!important;inset:auto!important;transform:none!important;display:block!important;width:auto!important;height:auto!important;max-height:none!important;overflow:visible!important;margin:20px 16px;padding:20px!important;border-radius:16px}
 .mobile-sheet-handle{display:none!important}.mobile-network-page aside .aside-head{display:block}
 .mobile-network-page aside .section{padding:0!important;margin-top:24px!important}
 .mobile-network-page .alerts{font-size:13px;line-height:1.5}.mobile-network-page .network-guide{font-size:13px;padding:16px}
}
@media(max-width:900px){
 .city-lab main>* ,.city-lab .network-stage,.city-lab #network-panel{min-width:0!important;max-width:100%!important;width:100%;box-sizing:border-box}
 .city-lab .status-meaning{position:static!important;inset:auto!important;order:5;display:flex;flex-wrap:wrap;gap:10px;white-space:normal;padding:12px;font-size:11px;transform:none!important}
 .city-lab #flow-map:not(.map-fitted) svg{width:850px;max-width:none}
 .mobile-world-media:empty{display:none}
}
@media(min-width:901px){.mobile-world-media{display:contents}}

@media(max-width:900px){#game-fullscreen{display:none!important}}