/* Portrait is a full play mode; the middle of the screen stays open for combat. */
@media (orientation:portrait) and (max-width:900px){
 #game{height:100dvh;visibility:visible}
 .hud{inset:max(8px,env(safe-area-inset-top)) 8px auto;gap:0}
 .hud .player{width:218px;max-width:calc(100vw - 88px);padding:7px;gap:6px;min-height:0;max-height:112px}
 .hud .player #portrait{width:43px;height:65px;flex:none}
 .player-copy{min-width:0;flex:1}.player-copy strong{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .player-copy .eyebrow,.player-copy small{font-size:9px;line-height:1.3}.player-copy .bar{height:11px;margin:3px 0}.player-copy .bar span{font-size:9px}.player-copy .xp{height:3px}
 #menuToggle{top:0;right:0;min-width:58px;min-height:44px;padding:8px;font-size:12px}
 .hud .topnav{display:none;top:50px;right:0;max-width:calc(100vw - 16px);width:340px;max-height:calc(100dvh - 80px);grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:auto;z-index:20}
 .menu-open .hud .topnav{display:grid}.topnav>button{min-height:52px}.topnav .player-tools button{min-height:44px}
 .hud .zone{top:115px;left:0;transform:none;text-align:left;max-width:calc(100vw - 130px);min-width:0}
 .hud .zone h1{font-size:16px;margin:2px 0}.zone .eyebrow{font-size:8px}.zone>span:last-child{font-size:10px}
 .righttools{top:58px;right:8px;width:calc(100vw - 244px);max-width:140px;min-width:68px;display:grid;gap:4px}
 .righttools button{padding:4px;min-height:32px;font-size:10px;white-space:normal}
 #networkStatus,.in-town #networkStatus{top:167px;right:8px;padding:4px;max-width:114px;font-size:9px;line-height:1.4;min-height:28px}
 .minimap,.in-town .minimap{top:204px;bottom:auto;right:8px;width:98px;padding:4px;background:#091c2877}
 .minimap canvas{width:88px;height:54px}.minimap>div:not(#cameraControls){font-size:8px;padding:2px 0}
 #cameraControls{display:flex;flex-direction:row;gap:2px}#cameraControls button{width:auto;min-width:26px;min-height:32px;padding:2px}#cameraControls #zoomReset{font-size:9px}
 #performanceStatus{display:none}.hint,.mission-state,#questTracker{display:none!important}
 #targetPanel{top:184px;left:8px;transform:none;width:calc(100vw - 132px);max-width:240px;padding:6px;font-size:11px}
 #targetPanel small{font-size:9px;margin:2px 0}
 .bottomhud{inset:auto 8px max(8px,env(safe-area-inset-bottom));display:block}
 .actiondock{box-sizing:border-box;width:100%;max-width:620px;margin:auto;display:grid;grid-template-columns:54px minmax(0,1fr) 44px;grid-template-rows:52px 52px;gap:5px;padding:6px;overflow:visible}
 .actiondock .skills{grid-column:2;grid-row:1/3;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:52px 52px;gap:5px;min-width:0}
 .actiondock button,.actiondock .skills button{width:100%;max-width:none;min-width:0;height:52px;padding:2px}
 .actiondock .skills button b{display:block;width:27px;height:27px;font-size:22px;line-height:24px}.actiondock .skills .skill-art{width:27px;height:27px}
 .actiondock button span{font-size:9px;line-height:11px;white-space:normal;padding:0}.actiondock kbd{display:none}
 .actiondock .attack{grid-column:1;grid-row:1/3;width:54px;min-width:54px;height:109px}.actiondock .attack b{font-size:28px}
 .actiondock .consumable{grid-column:3;min-width:44px;width:44px;height:52px}.actiondock .consumable b{font-size:19px;line-height:20px;margin-top:6px}
 .actiondock .consumable span{font-size:11px}.supply-name{font-size:8px}.cooldown{font-size:20px}
 .botdock{position:absolute;right:0;bottom:130px;min-width:150px;width:150px;height:44px;margin:0}.botdock strong{font-size:11px}.botdock span{font-size:9px}.botdock button:last-child{min-width:40px}
 #movementPad,.in-town #movementPad{position:absolute;left:max(8px,env(safe-area-inset-left));bottom:calc(134px + env(safe-area-inset-bottom));z-index:8;display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px);gap:2px;touch-action:none;user-select:none}
 #movementPad button{min-height:44px;padding:0;font-size:18px;background:#102d4099;border-color:#82b4c088;touch-action:none}#movementPad button.held{background:#478a95;color:white}
 #movementPad span{grid-column:2;grid-row:2;display:grid;place-items:center;color:#a4d7dc;background:#0d233566;border-radius:50%}
 #movementPad [data-direction=ArrowUp]{grid-column:2;grid-row:1}#movementPad [data-direction=ArrowLeft]{grid-column:1;grid-row:2}#movementPad [data-direction=ArrowRight]{grid-column:3;grid-row:2}#movementPad [data-direction=ArrowDown]{grid-column:2;grid-row:3}
 #socialDock,.in-town #socialDock{left:8px;bottom:calc(280px + env(safe-area-inset-bottom))}#chatToggle{min-height:36px;padding:6px 10px;font-size:11px}
 #chatPanel,#socialDock.expanded #chatPanel{top:auto;bottom:42px;left:0;transform:none;width:min(360px,calc(100vw - 16px));max-height:calc(100dvh - 350px)}
 #chatHistory{height:85px;min-height:35px}#socialDock.expanded #chatHistory{height:190px}#chatForm input{font-size:16px}
 .chat-open #movementPad{visibility:hidden}#groupPanel{min-height:0;overflow:auto}#chatPanel nav button{min-height:34px}
 #nearbyLoot{right:8px;left:auto;bottom:calc(190px + env(safe-area-inset-bottom));width:min(175px,45vw);max-height:105px;font-size:10px}#nearbyLoot button{font-size:10px;min-height:32px}
 #messages,.in-town #messages{bottom:calc(324px + env(safe-area-inset-bottom));left:8px;max-width:calc(100vw - 132px);max-height:85px;overflow:hidden}.message{font-size:10px}
 .in-town .townbar{left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));transform:none;width:auto;max-width:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:6px}
 .townbar button{min-height:44px;padding:5px;font-size:11px}.in-town #movementPad{bottom:calc(120px + env(safe-area-inset-bottom))}.in-town #socialDock{bottom:calc(266px + env(safe-area-inset-bottom))}
 #modal,#authDialog,#modal:is([data-view="npc-detail"],[data-view="quests"],[data-view="campaign"]){box-sizing:border-box;max-width:calc(100vw - 16px);width:calc(100vw - 16px);max-height:calc(100dvh - 24px);margin:auto}
 #modalBody{padding:12px}.dialog-top{padding:12px}.dialog-top h2{font-size:18px}.dialog-top .close{min-width:44px;min-height:44px}.dialog-top .eyebrow{font-size:9px}
 #modal input,#modal select,#authDialog input{font-size:16px;max-width:100%}#authForm{display:block}.details-grid,.player-list{grid-template-columns:1fr}.statgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .backpack .inventory-grid{--cell:27px}.rebirth-panel{padding:11px}.rebirth-panel p{font-size:12px}.rebirth-panel small{display:block;margin-top:9px;line-height:1.6}
}
@media(orientation:portrait) and (max-width:360px){.hud .player{width:196px}.righttools{width:82px}.hud .zone h1{font-size:14px}.actiondock{grid-template-columns:46px minmax(0,1fr) 44px;gap:4px}.actiondock .attack{width:46px;min-width:46px}.actiondock .skills{gap:3px}.actiondock button span{font-size:8px}.botdock{width:140px;min-width:140px}.backpack .inventory-grid{--cell:24px}}
@media(orientation:portrait) and (max-height:650px){.minimap,.in-town .minimap{display:none}#targetPanel{top:170px}#networkStatus,.in-town #networkStatus{top:166px}#socialDock,.in-town #socialDock{bottom:calc(267px + env(safe-area-inset-bottom))}#messages,.in-town #messages{display:none}#chatPanel,#socialDock.expanded #chatPanel{max-height:calc(100dvh - 320px)}}