/* Navigation comes before NPC interaction. One action dock on both screens. */
.ui-v30 #hud .quest-travel{display:flex;align-items:center;justify-content:space-between;gap:7px;width:100%;min-height:36px;padding:6px 9px;margin-top:7px;border:1px solid #cfad65;border-radius:6px;background:linear-gradient(120deg,#405937,#1d3123);color:#fff2bd;text-align:left;font-weight:700;font-size:11px;line-height:1.4;box-shadow:0 2px 8px #0005;white-space:normal}
.ui-v30 #hud .quest-travel b{font-size:20px;color:#efd084;flex:none}
.ui-v30 #hud .actions{display:none!important}
.ui-v30 #hud .skill-card .portrait>.hud-face{object-fit:cover;object-position:center;aspect-ratio:1;max-width:none;max-height:none}
/* Explicit left:auto clears the inherited left+right stretch that covered faces. */
.ui-v30 #hud .skill-card .hotkey{inset:auto;left:auto;right:0;top:0;width:14px;height:14px;line-height:14px;min-width:0;min-height:0;padding:0;display:block;text-align:center;border-radius:50%;background:#131b17dc;font-size:8px}
.ui-v30 #hud .skillbar.expanded{background:none;border:0;box-shadow:none}
.ui-v30 #hud .party-overflow{position:relative;bottom:auto;min-height:32px;border-radius:16px;font-size:13px;background:linear-gradient(#3d4630,#18271e)}
.ui-v30 #hud .party-overflow[aria-expanded=true]{border-color:#ffe09b;box-shadow:0 0 0 2px #c69b4744}
.ui-v30 #hud .party-sheet{position:absolute;left:calc(var(--v30-safe-l) + 65px);top:calc(var(--v30-safe-t) + 98px);width:360px;max-width:calc(100vw - 100px);max-height:calc(100dvh - 210px);overflow:auto;pointer-events:auto;z-index:15;padding:13px;border:1px solid #ba9354;border-radius:13px;background:linear-gradient(145deg,#26342af5,#111d18fa);box-shadow:0 12px 35px #0009,0 0 0 3px #0e1817aa;backdrop-filter:blur(12px)}
.party-sheet-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px;padding-bottom:11px;border-bottom:1px solid #b4904e44}
.party-sheet-header small{font-size:8px;letter-spacing:1.5px;color:#d1b77f}
.party-sheet-header h3{font-size:16px;line-height:1.4;margin:3px 0 0;color:#fff0c4}
.party-sheet-header h3 span{font-size:11px;font-weight:500;margin-left:6px;color:#bbcbb8}
.party-sheet-header>button{width:30px;height:30px;min-height:30px;padding:0;border-radius:50%;border-color:#8b7752;font-size:21px;background:#10201e;color:#dfd0ac}
.party-sheet-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.party-sheet-grid:has(>.party-unit:only-child){grid-template-columns:1fr}
.party-unit{min-width:0;border:1px solid #72967444;border-radius:8px;background:#0b1a17b5;padding:8px;overflow:hidden}
.party-unit.selected{border-color:#eac57b;background:#364333}
.party-unit.dead{filter:grayscale(.8);opacity:.65}
.party-unit-top{display:flex;align-items:center;gap:8px;min-width:0}
.party-unit-top>div{flex:1;min-width:0}
.party-unit-top strong{display:block;font-size:11px;color:#fff0cf;line-height:1.5;overflow-wrap:anywhere}
.party-unit-top small{display:block;font-size:9px;line-height:1.5;margin-top:2px;color:#a5baa9}
.ui-v30 #hud .party-unit-face{width:48px;height:48px;min-width:48px;min-height:48px;padding:0;border:2px solid #cba96a;border-radius:50%;overflow:hidden;flex:none;background:#1d2e1e;opacity:1}
.party-unit-face>.hud-face{display:block;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none}
.party-health-track{height:4px;overflow:hidden;border-radius:3px;background:#07120f;margin-top:5px}
.party-health-track>.mini-health{display:block;height:100%;background:linear-gradient(90deg,#448e68,#a5d98f)}
.party-unit>.cast{position:relative;display:flex;justify-content:space-between;gap:5px;align-items:center;width:100%;min-height:30px;margin-top:8px;padding:5px;border-radius:5px;overflow:hidden;background:#14231f;border:1px solid #b3914d66;font-size:9px;text-align:left}
.party-unit>.cast>i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#8c6a2955,#b3964977);pointer-events:none}
.party-unit>.cast>span,.party-unit>.cast>.gauge{position:relative;z-index:1;line-height:1.4}
.party-unit>.cast>.gauge{font-size:8px;white-space:nowrap;color:#f0cf88}
.party-unit.ready>.cast{border-color:#f8d88e;background:#584b23;color:#fff4cb}
.ui-v30 #hud #pcHotbar{gap:5px}
.ui-v30 #hud #pcHotbar .hotbar-utility{border-left:1px solid #c4a16455;border-radius:0;padding-left:5px}
.ui-v30 #hud #pcHotbar .mobile-utility-label{display:none}
.required-routes{border:1px solid #a5895355;border-radius:8px;background:linear-gradient(120deg,#203026,#101d1a);padding:9px 11px;margin:10px 0;color:#e8d6ac}
.required-routes>summary{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:12px;font-weight:700;list-style:none}
.required-routes>summary:before{content:'◆';font-size:8px;color:#e8c56f}
.required-routes>summary:after{content:'⌄';margin-left:auto}
.required-routes>summary>span{font-size:10px;padding:2px 7px;border:1px solid #9d8d5355;border-radius:12px;font-weight:400;color:#c4d2b6}
.required-route-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:9px;max-height:158px;overflow:auto}
.required-route{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;padding:7px;border:1px solid #899c6944;background:#101f1b;border-radius:5px;min-width:0}
.required-route>div{display:flex;align-items:center;gap:5px;flex:1;min-width:0}
.required-route strong{font-size:10px;line-height:1.4;overflow-wrap:anywhere}
.required-tag{display:inline-block;flex:none;font-size:8px;line-height:1.4;font-style:normal;padding:2px 4px;margin-left:4px;border-radius:3px;border:1px solid #ddbb6c77;color:#ffe2a6;background:#69532944;white-space:nowrap}
.required-route>button{font-size:9px;min-height:28px;padding:4px 6px;background:#324e38;border-color:#6d976b}
.required-route>small{font-size:9px;line-height:1.5;width:100%;color:#b7c4af}
.required-route.is-complete .required-tag{color:#b8dab5;border-color:#65976566;background:#35634433}
.ui-v30.app-mobile:not(.app-home) #hud .quest{max-height:126px}
.ui-v30.app-mobile #hud .quest-travel{font-size:10px;min-height:34px;padding:4px 6px;margin-top:4px}
.ui-v30.app-mobile:not(.app-home) #hud #quickServices:not([hidden]){top:calc(var(--v30-safe-t) + 184px)}
.ui-v30.app-mobile #hud #pcHotbar .hotbar-utility{padding:2px;border-left:1px solid #c4a16455}
.ui-v30.app-mobile #hud #pcHotbar .hotbar-utility img{width:29px;height:29px;position:relative;top:-3px}
.ui-v30.app-mobile #hud #pcHotbar .mobile-utility-label{display:block;position:absolute;bottom:0;left:0;right:0;font-size:8px;line-height:10px;color:#e5d4af}
.ui-v30.app-mobile #modal .required-route-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:115px}
.ui-v30.app-mobile #modal .required-route>button{min-height:30px;font-size:9px;padding:3px 6px}
.ui-v30.app-mobile #modal .required-routes{padding:7px;margin:7px 0}
/* Small landscape phones keep all eleven controls visible without a scroll trap. */
@media(max-width:700px){
 .ui-v30.app-mobile:not(.app-home) #hud #pcHotbar{max-width:calc(100vw - 106px);gap:1px;padding:3px;overflow:visible}
 .ui-v30.app-mobile #hud #pcHotbar button{width:39px;height:42px;min-width:39px;min-height:42px;padding:3px}
 .ui-v30.app-mobile #hud #pcHotbar img{width:33px;height:33px}
}
@media(max-width:560px){
 .ui-v30.app-mobile:not(.app-home) #hud #pcHotbar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;width:min(264px,calc(100vw - 96px));max-width:calc(100vw - 94px)}
 .ui-v30.app-mobile #hud #pcHotbar button{width:100%;min-width:0;height:39px;min-height:39px}
 .ui-v30.app-mobile #hud #pcHotbar .hotbar-utility{grid-row:1}
 .ui-v30.app-mobile #hud #pcHotbar button:not(.hotbar-utility){grid-row:2}
 .ui-v30.app-mobile #hud #appAssist{bottom:calc(var(--v30-safe-b) + 89px)}
 .ui-v30.app-mobile #hud #appCommandDock{bottom:calc(var(--v30-safe-b) + 90px)}
 .ui-v30.app-mobile #hud #interact{bottom:calc(var(--v30-safe-b) + 126px)}
 .ui-v30.app-mobile #modal .required-route-grid{grid-template-columns:1fr}
}