/* RB1.4: let wrapped controls determine the room left for field overlays. */
/* Fixed HUD offsets are viewport pixels, including on ultrawide screens. */
.xp{zoom:1!important}
@media(max-width:700px){
 .app{min-height:0;--field-controls-top:190px}
 .top{flex-wrap:nowrap}.brand{gap:6px;min-width:0}.brand h1{font-size:18px}
 .home,#fieldOptions summary{display:flex;align-items:center;min-height:44px;padding:6px}
 .who{min-width:0}.who>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .field-options-list{position:fixed;top:58px;left:8px;right:8px;width:auto;max-height:calc(100dvh - 74px)}
 .field-options-list button,.menu button,#fieldDock button,#arrivalControls button,.realm-surroundings button,.road-surroundings button{min-height:44px}
 #fieldDock{min-height:59px;padding-bottom:max(7px,env(safe-area-inset-bottom));scroll-padding-inline:10px;overscroll-behavior-x:contain}
 .xp{bottom:var(--field-dock-height,59px)}
 .abar{bottom:calc(var(--field-dock-height,59px) + 19px);padding:5px;max-height:40dvh;overflow-y:auto;overscroll-behavior:contain}
 .abar>.slots{flex-wrap:wrap;justify-content:center;min-width:0;max-width:100%;gap:4px}
 .ab{width:44px;height:44px;flex:none}.abar .seg button{min-height:44px;padding:6px 12px}
 .abar .mode{flex-direction:row;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
 .abar .modehint{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(100%,22ch);min-height:1.4em;line-height:1.4}
 .statusline{bottom:calc(var(--field-controls-top) + 8px)}
 #arrivalControls{bottom:calc(var(--field-controls-top) + 8px);max-width:calc(100% - 16px);flex-wrap:wrap;justify-content:center}
 .world:not(.on-road) .scene .dlg.dlg-realmbound{bottom:calc(var(--field-controls-top) + var(--arrival-controls-height,0px) + 12px)!important;max-height:calc(100% - var(--field-controls-top) - var(--arrival-controls-height,0px) - 70px)}
 .lootwin,.enccard{bottom:calc(var(--field-controls-top) + 48px);max-height:calc(100dvh - var(--field-controls-top) - 120px);overflow:auto}
 .petframe,.enccard,.lootwin,#arrivalControls{zoom:1!important;font-size:calc(14px * var(--arc-text,1))}
 .petframe{bottom:calc(var(--field-controls-top) + 48px)}
 .menu{max-height:calc(100dvh - 16px - env(safe-area-inset-bottom));top:50%}
 .field-book-head{gap:6px}.field-book-head h2{font-size:20px;min-width:0}.field-book-head button{flex:none}
 .menu .tabs button{min-height:44px}.menu .tb,.field-page{overflow-wrap:anywhere}
 .on-road .world:not(.on-road) .scene .dlg.dlg-realmbound{bottom:calc(var(--field-dock-height,59px) + 44px)!important;max-height:calc(100% - var(--field-dock-height,59px) - 115px)}
 .on-road .statusline{bottom:calc(var(--field-dock-height,59px) + 24px)}
 .scene canvas,button{touch-action:manipulation}
}
@media(max-width:700px) and (max-height:560px){
 .zonebar{top:58px}.units{top:85px}.party{top:145px}
 .abar{max-height:32dvh}.abar .modehint{display:none}
 .world:not(.on-road) .scene .dlg.dlg-realmbound{max-height:calc(100% - var(--field-controls-top) - var(--arrival-controls-height,0px) - 78px)}
}

.abar{flex-wrap:wrap;justify-content:center}
.abar>.slots{flex-wrap:wrap;justify-content:center;min-width:0;max-width:100%}
/* RB1.6: names are the abilities' primary visual, not miniature icons. */
.abar .ab{width:104px;min-height:72px;height:auto;flex-shrink:0;padding:17px 6px 8px}
.abar .ab .ic{font-family:var(--f-body);font-size:calc(15px * var(--arc-text,1));font-weight:800;line-height:1.15;padding:0;overflow-wrap:anywhere}
.abar .ab .key{font-family:var(--f-body);font-size:12px;line-height:1;top:3px;left:5px;z-index:1}
.abar .ab .cdn{inset:auto 3px 2px auto;min-width:20px;border-radius:3px;background:#18130d;z-index:1;font-size:14px}
.abar .ab .cdn:empty{display:none}
.abar .ab.special{width:auto;min-width:104px}
@media(min-width:1700px){
 .abar .ab{width:124px;min-height:82px}
 .abar .ab .ic{font-size:calc(18px * var(--arc-text,1))}
}
@media(max-width:700px){
 .abar>.slots{width:100%;align-items:stretch}
 .abar .ab{width:calc((100% - 8px)/3);min-height:68px}
 .abar .ab .ic{font-size:calc(14px * var(--arc-text,1))}
 .abar .ab.special{width:calc((100% - 8px)/3);min-width:0}
}
/* Paused town conversations and arrival need the combat controls' space on short screens. */
@media(max-width:700px) and (max-height:560px){
 .app:has(#arrivalControls:not([hidden])) .abar,
 .app:has(.world:not(.on-road) .town-service-dialogue:not([hidden])) .abar{display:none}
}
/* A rotated phone may be wider than 700px but still shorter than the desktop minimum. */
@media(min-width:701px) and (max-height:420px){
 .app{min-height:0}
 .app:has(#arrivalControls:not([hidden])) .abar,
 .app:has(.world:not(.on-road) .town-service-dialogue:not([hidden])) .abar{display:none}
 #arrivalControls{bottom:calc(var(--field-dock-height,49px) + 8px)}
 .app:has(#arrivalControls:not([hidden])) .world:not(.on-road) .scene .dlg.dlg-realmbound,
 .world:not(.on-road) .scene .dlg.dlg-realmbound.town-service-dialogue{bottom:calc(var(--field-dock-height,49px) + var(--arrival-controls-height,0px) + 12px)!important;max-height:calc(100% - var(--field-dock-height,49px) - var(--arrival-controls-height,0px) - 78px)}
}