/* Fixed phone home screen: all controls share the small, toolbar-visible viewport. */
@media(max-width:600px){
 html:has(.pocket-shell),body:has(.pocket-shell){overflow:hidden;overscroll-behavior:none}
 #app:has(>.pocket-shell){height:100vh;height:100svh;overflow:hidden}
 .pocket-shell{height:100vh;height:100svh;min-height:0!important;overflow:hidden;overscroll-behavior:none;touch-action:none;padding:4px 5px max(4px,env(safe-area-inset-bottom));gap:3px}
 .pocket-shell>.pocket-middle{flex:1 1 0;height:auto;min-height:0;max-height:none;grid-template-columns:32px minmax(0,1fr) 58px!important;gap:4px}
 .pocket-shell .pocket-action-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}
 .pocket-shell .pocket-action-grid>.pocket-action{height:36px;min-height:36px;max-height:36px;padding:3px;gap:3px}
 .pocket-shell .pocket-action b{font-size:9px;line-height:1.2;white-space:normal;overflow-wrap:anywhere}
 .pocket-shell .command-icon{height:18px;width:18px;border-radius:4px}
 .pocket-shell .command-icon svg{height:12px;width:12px}
 .pocket-shell .pocket-action>em{top:3px;right:3px;font-size:6px}
 .pocket-shell .command-caption{flex-wrap:wrap;gap:4px;min-height:24px;padding:1px 1px 3px}
 .pocket-shell .command-caption>b{flex:1;font-size:8px}
 .pocket-shell .pocket-narration{height:48px;min-height:48px;max-height:48px;bottom:4px;padding:11px 9px 14px}
 .pocket-shell .pocket-narration>p{font-size:10px;line-height:1.5;max-height:24px}
 /* Full sprites fit above the narration rather than putting faces behind it. */
 .pocket-shell .pocket-world-actors{inset:22px 3% 62px;padding:0}
 .pocket-shell .pocket-world-actors .atlas-character{height:min(100cqh,65cqw,260px)!important;width:auto!important}
 .pocket-shell .mobile-friend-rail{display:grid;grid-auto-rows:minmax(0,1fr);align-items:center;justify-content:stretch;gap:2px;padding:3px 2px;overflow:hidden}
 .pocket-shell .mobile-friend-meter{display:grid;grid-template-columns:18px minmax(0,1fr);grid-template-rows:auto 5px auto;align-items:center;column-gap:2px;row-gap:1px;min-height:0;max-height:100%}
 .pocket-shell .mobile-friend-meter>.relation-face,.pocket-shell .mobile-friend-meter>.friend-unknown{grid-column:1;grid-row:1 / -1;width:18px!important;height:18px!important;flex-basis:18px;margin:0}
 .pocket-shell .mobile-friend-meter .relation-face>.atlas-character{width:18px!important;height:18px!important}
 .pocket-shell .mobile-friend-meter>b,.pocket-shell .mobile-friend-meter>meter,.pocket-shell .mobile-friend-meter>small{grid-column:2;width:100%;min-width:0;max-width:100%}
 .pocket-shell .mobile-friend-meter>b{font-size:7px;line-height:1.15;white-space:normal;overflow-wrap:anywhere}
 .pocket-shell .mobile-friend-meter>meter{height:5px}
 .pocket-shell .mobile-friend-meter>small{font-size:9px;line-height:1.1}
 .pocket-shell>.pocket-menubar{position:relative;bottom:auto;z-index:5;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px;min-height:28px;margin-top:0;padding:1px 0;background:#25344e;box-shadow:0 -3px 5px #18243b44}
 .pocket-shell>.pocket-menubar>button{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;min-width:0;min-height:26px;font-size:6px;line-height:1.2;padding:2px 0;gap:2px;white-space:normal}
 .pocket-shell>.pocket-header,.pocket-shell>.pocket-hud,.pocket-shell>.pocket-calendar,.pocket-shell>.pocket-commands,.pocket-shell>.pocket-menubar{flex-shrink:0}
}
/* Safari with both toolbars visible: keep a usable cast row without growing the page. */
@media(max-width:600px) and (max-height:640px){
 .pocket-shell>.pocket-header{height:25px}
 .pocket-shell>.pocket-calendar{height:24px}
 .pocket-shell>.pocket-hud.hud-two-rows{padding:4px 5px;gap:3px}
 .pocket-shell .hud-two-rows .hud-ability,.pocket-shell .hud-two-rows .hud-ability:nth-child(n+6){grid-template-rows:9px 17px 9px}
 .pocket-shell .hud-two-rows .hud-ability>b{font-size:17px}
 .pocket-shell .hud-two-rows .hud-ability:nth-child(n+6){padding-top:2px}
 .pocket-shell .hud-two-rows .hud-run-status{min-height:22px;padding-top:3px}
 .pocket-shell .pocket-narration{height:43px;min-height:43px;max-height:43px;padding:10px 7px 11px}
 .pocket-shell .pocket-narration>p{font-size:9px;line-height:1.4;max-height:22px}
 .pocket-shell .pocket-world-actors{inset:19px 3% 54px}
 .pocket-shell .mobile-friend-meter{row-gap:0;grid-template-rows:auto 4px auto}
 .pocket-shell .mobile-friend-meter>small{font-size:8px}
 .pocket-shell .mobile-friend-meter>meter{height:4px}
}

/* Short portrait phones trade one command row for a visible face area. */
@media(max-width:600px) and (max-height:540px){
 .pocket-shell .pocket-brand{min-width:0;gap:4px}
 .pocket-shell .pocket-brand>b{font-size:12px;white-space:nowrap}
 .pocket-shell .pocket-action-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}
 .pocket-shell .pocket-action-grid>.pocket-action{height:34px;min-height:34px;max-height:34px;padding:2px;gap:2px}
 .pocket-shell .pocket-action b{font-size:8px;line-height:1.15}
 .pocket-shell .command-icon{width:14px;height:14px}
 .pocket-shell .command-icon svg{width:11px;height:11px}
 .pocket-shell .hud-player small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}