/* Corrections verified against the nine reported screens. Scoped rules below
   override the earlier generic mobile sheet rules without changing other panels. */
.ui-v30 #hud .route-banner{bottom:auto;height:auto;min-height:0;max-height:64px;width:max-content;max-width:min(60vw,560px);padding:5px 8px;box-sizing:border-box}
.ui-v30 #hud .route-banner[hidden]{display:none}
.ui-v30 #hud #zoomOut,.ui-v30 #hud #zoomIn{position:absolute;top:auto;right:auto;bottom:calc(var(--v30-safe-b) + 76px);left:calc(50% + 82px);width:32px;height:32px;min-height:32px;z-index:6;pointer-events:auto}
.ui-v30 #hud #zoomIn{left:calc(50% + 118px)}
.ui-v30 #hud .actions{display:none}
.ui-v30 #hud #pcHotbar small{position:absolute;bottom:0;right:2px;min-width:15px;padding:0 2px;border-radius:3px;background:#10170ddd;color:#fff3ce;font-size:9px;line-height:12px;pointer-events:none}
.ui-v30 #hud .skill-card .portrait>.hud-face{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.ui-v30 #hud .party-overflow{flex:none;position:sticky;bottom:0;width:49px;min-height:35px;padding:4px;border:1px solid #dfbe72;border-radius:8px;background:#1b2919f5;color:#ffe7ac;font-size:17px;box-shadow:0 2px 7px #0008;z-index:3}
.ui-v30 #hud .skillbar.expanded{background:#111a12de;border:1px solid #887343;border-radius:9px;scrollbar-width:thin}
/* Keep the seventh face and the overflow button on short desktop screens. */
@media(min-width:701px) and (max-height:800px){
 .ui-v30:not(.app-mobile) #hud .skillbar{--party-face:clamp(26px,calc((100dvh - 322px)/7),49px);gap:4px;top:calc(var(--v30-safe-t) + 86px);bottom:105px}
 .ui-v30:not(.app-mobile) #hud .skill-card{width:var(--party-face);height:calc(var(--party-face) + 7px)}
 .ui-v30:not(.app-mobile) #hud .skill-card .portrait{width:var(--party-face);height:var(--party-face)}
 .ui-v30:not(.app-mobile) #hud .skill-card .cast{width:var(--party-face)}
 .ui-v30:not(.app-mobile) #hud .party-overflow{width:var(--party-face)}
}
/* Fix photo proportions: the cropped viewBox has a fixed source aspect ratio.
   Never use independent percentage background widths/heights for character art. */
.ui-v30 #modalBody .style-product-art{display:grid;place-items:center;background-image:none;background:#11180d;min-height:0}
.style-art-window{display:block;width:100%;height:100%;min-height:0;overflow:hidden;pointer-events:none}
.style-preview-character>.style-art-window{position:relative;z-index:1}
.ui-v30 #modalBody .style-product-grid{grid-template-rows:repeat(2,minmax(0,1fr));align-content:start}
.ui-v30 #modalBody .style-product-grid[hidden]{display:none}
.style-shop-v30[data-style-category=coins] .style-coin-packs{flex:1;align-content:center}
.style-shop-v30[data-style-category=coins] .style-preview-controls{display:none}
.style-shop-v30[data-style-category=coins] .style-shop-notice{margin-top:auto}

/* Landscape app: one shared nine-action dock, the same actions as desktop. */
.ui-v30.app-mobile:not(.app-home) #hud #pcHotbar{display:flex;left:auto;right:var(--v30-safe-r);bottom:var(--v30-safe-b);transform:none;gap:2px;padding:3px 5px;max-width:calc(100vw - 115px);overflow-x:auto;scrollbar-width:none}
.ui-v30.app-mobile #hud #pcHotbar button{flex:none;width:44px;height:44px;min-width:44px;min-height:44px;margin:0;padding:4px;border:0;background:none}
.ui-v30.app-mobile #hud #pcHotbar img{width:36px;height:36px}
.ui-v30.app-mobile #hud #pcHotbar kbd{display:none}
.ui-v30.app-mobile #hud #pcHotbar small{bottom:1px;right:0;font-size:8px;line-height:10px}
.ui-v30.app-mobile #hud #heroBasicSkills,.ui-v30.app-mobile #hud #appFormation{display:none}
.ui-v30.app-mobile #hud #appAssist{bottom:calc(var(--v30-safe-b) + 56px);left:auto;right:var(--v30-safe-r);width:108px}
.ui-v30.app-mobile #hud #appCommandDock{bottom:calc(var(--v30-safe-b) + 57px);left:auto;right:calc(var(--v30-safe-r) + 112px);transform:none;max-width:calc(100vw - 230px);overflow-x:auto}
.ui-v30.app-mobile #hud #appCommandDock button{flex:none}
.ui-v30.app-mobile:not(.app-home) #hud .quest{display:block!important;left:var(--v30-safe-l);right:auto;top:calc(var(--v30-safe-t) + 53px);width:200px;max-width:33vw;padding:5px 7px;border-radius:5px;background:linear-gradient(100deg,#101a11e8,#171c12b8);max-height:94px;overflow-y:auto;pointer-events:auto}
.ui-v30.app-mobile #hud #objective{font-size:10px;line-height:15px;display:block}
.ui-v30.app-mobile #hud #localGoal{font-size:9px;line-height:15px;margin:3px 0 0}
.ui-v30.app-mobile #hud #localGoal .destination-name{padding:2px 3px!important;white-space:normal}
.ui-v30.app-mobile:not(.app-home) #hud #quickServices:not([hidden]){display:block!important;left:var(--v30-safe-l);top:calc(var(--v30-safe-t) + 152px);bottom:auto;max-width:205px;width:33vw;transform:none;padding:3px}
.ui-v30.app-mobile #hud #quickServices button{min-height:32px;font-size:9px;padding:3px}
.ui-v30.app-mobile #hud .route-banner{top:calc(var(--v30-safe-t) + 108px);bottom:auto;max-width:48vw;font-size:9px;padding:3px 5px}
.ui-v30.app-mobile #hud .route-banner span{font-size:9px}
.ui-v30.app-mobile #hud .route-banner button{min-height:32px;padding:3px 7px;font-size:9px}
.ui-v30.app-mobile #hud #interact{bottom:calc(var(--v30-safe-b) + 105px)}

/* Hero map: full-width map above a compact detail tray on phones. Specificity
   is intentional: the generic mobile button padding previously crushed faces. */
.ui-v30.app-mobile #modal[data-panel=heroMap] .modal.panel,.ui-v30.app-mobile #modal[data-panel=styleShop] .modal.panel{height:100%;max-height:100%;min-height:0}
.ui-v30.app-mobile #modal[data-panel=heroMap] .hero-atlas-v30{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 105px}
.ui-v30.app-mobile #modal[data-panel=heroMap] .hero-atlas-top{display:flex;align-items:center;gap:12px;padding:7px 47px 7px 11px}
.ui-v30.app-mobile #modal[data-panel=heroMap] .hero-atlas-top>strong{font-size:19px;white-space:nowrap}
.ui-v30.app-mobile #modal[data-panel=heroMap] .hero-atlas-top nav{margin:0;gap:4px;display:flex;overflow:auto}
.ui-v30.app-mobile #modal[data-panel=heroMap] .hero-atlas-top button{min-height:32px;padding:4px 9px;font-size:10px;white-space:nowrap}
.ui-v30.app-mobile #modal[data-panel=heroMap] .hero-atlas-land{inset:51px 6% 91px}
.ui-v30.app-mobile #modal[data-panel=heroMap] .hero-atlas-pin{width:40px;height:48px;min-height:0;padding:0}
.ui-v30.app-mobile #modal[data-panel=heroMap] .hero-atlas-pin>img{width:38px;height:38px;border-width:2px}
.ui-v30.app-mobile #modal[data-panel=heroMap] .hero-atlas-pin>i{width:20px;height:20px;left:9px;font-size:11px}
.ui-v30.app-mobile #modal[data-panel=heroMap] .hero-atlas-pin>b{min-width:16px;min-height:16px;font-size:8px}
.ui-v30.app-mobile #modal[data-panel=heroMap] .hero-atlas-pin>span{top:46px;font-size:9px;padding:1px 4px}
.ui-v30.app-mobile #modal[data-panel=heroMap] .hero-atlas-bottom{padding:3px 10px 5px}
.ui-v30.app-mobile #modal[data-panel=heroMap] .hero-atlas-bottom nav{margin:0;gap:5px}
.ui-v30.app-mobile #modal[data-panel=heroMap] .hero-atlas-bottom nav button{min-height:27px;padding:3px 9px;font-size:10px}
.ui-v30.app-mobile #modal[data-panel=heroMap] .hero-atlas-list{gap:6px;padding:3px 1px}
.ui-v30.app-mobile #modal[data-panel=heroMap] .hero-atlas-list>button{flex:0 0 49px;width:49px;min-width:49px;min-height:50px;height:50px;padding:0;overflow:hidden}
.ui-v30.app-mobile #modal[data-panel=heroMap] .hero-atlas-list img{width:100%;height:34px;object-fit:contain}
.ui-v30.app-mobile #modal[data-panel=heroMap] .hero-atlas-list span{font-size:8px;line-height:12px;padding:1px;max-width:47px}
.ui-v30.app-mobile #modal[data-panel=heroMap] .hero-atlas-detail{display:grid;grid-template-columns:83px minmax(0,1fr);border-left:0;border-top:1px solid #ab8848;min-height:0;overflow:hidden}
.ui-v30.app-mobile #modal[data-panel=heroMap] .hero-atlas-portrait{padding:4px;min-height:0}
.ui-v30.app-mobile #modal[data-panel=heroMap] .hero-atlas-copy{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto 1fr;column-gap:10px;row-gap:2px;text-align:left;max-height:none;min-height:0;padding:7px 12px;overflow:auto}
.ui-v30.app-mobile #modal[data-panel=heroMap] .hero-atlas-copy h3{grid-column:1;font-size:15px;line-height:20px;margin:0}
.ui-v30.app-mobile #modal[data-panel=heroMap] .hero-atlas-role{grid-column:1;font-size:10px;line-height:14px;margin:0}
.ui-v30.app-mobile #modal[data-panel=heroMap] .hero-atlas-role span{display:inline;font-size:9px}
.ui-v30.app-mobile #modal[data-panel=heroMap] .hero-atlas-skills{grid-column:2;grid-row:1/3;gap:4px;justify-content:end}
.ui-v30.app-mobile #modal[data-panel=heroMap] .hero-atlas-skills>button{width:38px;height:38px;min-height:38px;padding:3px;background:none}
.ui-v30.app-mobile #modal[data-panel=heroMap] .hero-atlas-condition{grid-column:1;font-size:9px;line-height:14px;margin:0;max-height:none;align-self:center}
.ui-v30.app-mobile #modal[data-panel=heroMap] .hero-atlas-actions{grid-column:2;grid-row:3;gap:5px;align-self:center}
.ui-v30.app-mobile #modal[data-panel=heroMap] .hero-atlas-actions>button{min-height:30px;padding:4px 9px;font-size:10px;white-space:nowrap}

/* Shop controls retain compact, predictable dimensions on both phone layouts. */
.ui-v30.app-mobile #modal[data-panel=styleShop] .style-shop-v30{grid-template-columns:45px minmax(0,38fr) minmax(0,62fr);grid-template-rows:1fr}
.ui-v30.app-mobile #modal[data-panel=styleShop] .style-shop-tabs{grid-row:auto;padding:0}
.ui-v30.app-mobile #modal[data-panel=styleShop] .style-shop-tabs button{min-height:49px;padding:3px;font-size:9px;gap:2px}
.ui-v30.app-mobile #modal[data-panel=styleShop] .style-shop-tabs button i{font-size:22px}
.ui-v30.app-mobile #modal[data-panel=styleShop] .style-preview-title h3{font-size:21px;line-height:26px;margin:0 0 4px}
.ui-v30.app-mobile #modal[data-panel=styleShop] .style-preview-title>span{font-size:10px}
.ui-v30.app-mobile #modal[data-panel=styleShop] .style-preview-character{inset:18% 2% 20%}
.ui-v30.app-mobile #modal[data-panel=styleShop] .style-preview-controls{left:0;right:0;width:auto;bottom:2%;gap:2px}
.ui-v30.app-mobile #modal[data-panel=styleShop] .style-preview-controls>span{font-size:8px;padding:2px 6px}
.ui-v30.app-mobile #modal[data-panel=styleShop] .style-preview-controls>nav{gap:9px}
.ui-v30.app-mobile #modal[data-panel=styleShop] .style-preview-controls button{width:38px;min-height:38px;padding:0;font-size:9px}
.ui-v30.app-mobile #modal[data-panel=styleShop] .style-preview-controls button img{width:30px;height:30px}
.ui-v30.app-mobile #modal[data-panel=styleShop] .style-preview-controls small{font-size:8px}
.ui-v30.app-mobile #modal[data-panel=styleShop] .style-shop-catalogue{grid-column:3;padding:39px 9px 6px 3px;gap:5px}
.ui-v30.app-mobile #modal[data-panel=styleShop] .style-shop-balance{top:9px;right:48px;font-size:8px;padding:3px 6px}
.ui-v30.app-mobile #modal[data-panel=styleShop] .style-shop-balance b{font-size:11px}
.ui-v30.app-mobile #modal[data-panel=styleShop] .style-product-grid{gap:5px}
.ui-v30.app-mobile #modal[data-panel=styleShop] .style-product{min-height:0;padding:0}
.ui-v30.app-mobile #modal[data-panel=styleShop] .style-product>strong{font-size:10px;line-height:13px;padding:3px 1px}
.ui-v30.app-mobile #modal[data-panel=styleShop] .style-product>span{font-size:8px;line-height:12px;padding:2px}
.ui-v30.app-mobile #modal[data-panel=styleShop] .style-coin-packs{gap:5px}
.ui-v30.app-mobile #modal[data-panel=styleShop] .style-coin-packs>button{min-height:32px;padding:3px;gap:6px}
.ui-v30.app-mobile #modal[data-panel=styleShop] .style-coin-packs i{font-size:20px}
.ui-v30.app-mobile #modal[data-panel=styleShop] .style-coin-packs span{font-size:10px}
.ui-v30.app-mobile #modal[data-panel=styleShop] .style-coin-packs small{font-size:8px;margin:0}
.ui-v30.app-mobile #modal[data-panel=styleShop] .style-shop-notice{font-size:8px;line-height:11px}
@media(orientation:portrait) and (max-width:600px){
 .ui-v30.app-mobile:not(.app-home) #hud #pcHotbar{left:var(--v30-safe-l);right:var(--v30-safe-r);max-width:none;justify-content:space-between;gap:0;padding:3px;overflow-x:auto}
 .ui-v30.app-mobile #hud #pcHotbar button{width:40px;min-width:40px;padding:3px}
 .ui-v30.app-mobile #hud #pcHotbar img{width:32px;height:32px}
 .ui-v30.app-mobile #hud #joystick{bottom:calc(var(--v30-safe-b) + 59px)}
 .ui-v30.app-mobile #hud #appAssist{bottom:calc(var(--v30-safe-b) + 61px)}
 .ui-v30.app-mobile #hud #appCommandDock{bottom:calc(var(--v30-safe-b) + 109px);left:var(--v30-safe-l);right:var(--v30-safe-r);max-width:none;justify-content:center}
 .ui-v30.app-mobile:not(.app-home) #hud .quest{max-width:58vw}
 .ui-v30.app-mobile:not(.app-home) #hud #quickServices:not([hidden]){width:58vw}
 .ui-v30.app-mobile #hud .route-banner{top:calc(var(--v30-safe-t) + 194px);max-width:90vw}
 .ui-v30.app-mobile #modal[data-panel=heroMap] .hero-atlas-v30{grid-template-rows:minmax(0,1fr) 145px}
 .ui-v30.app-mobile #modal[data-panel=heroMap] .hero-atlas-top{flex-wrap:wrap;gap:5px}
 .ui-v30.app-mobile #modal[data-panel=heroMap] .hero-atlas-top nav{width:100%}
 .ui-v30.app-mobile #modal[data-panel=heroMap] .hero-atlas-land{top:90px}
 .ui-v30.app-mobile #modal[data-panel=heroMap] .hero-atlas-copy{grid-template-columns:1fr;grid-template-rows:auto auto auto auto}
 .ui-v30.app-mobile #modal[data-panel=heroMap] .hero-atlas-skills{display:none}
 .ui-v30.app-mobile #modal[data-panel=heroMap] .hero-atlas-actions{grid-column:1;grid-row:4;grid-template-columns:1fr 1fr}
 .ui-v30.app-mobile #modal[data-panel=styleShop] .style-shop-v30{grid-template-columns:43px 1fr;grid-template-rows:38% 62%}
 .ui-v30.app-mobile #modal[data-panel=styleShop] .style-shop-tabs{grid-row:1/3}
 .ui-v30.app-mobile #modal[data-panel=styleShop] .style-preview-character{inset:5% 1% 12% 35%}
 .ui-v30.app-mobile #modal[data-panel=styleShop] .style-preview-controls{right:auto;width:40%;bottom:5%}
 .ui-v30.app-mobile #modal[data-panel=styleShop] .style-preview-controls>nav{gap:2px;flex-wrap:wrap}
 .ui-v30.app-mobile #modal[data-panel=styleShop] .style-shop-catalogue{grid-column:2;padding:30px 7px 6px;gap:6px}
 .ui-v30.app-mobile #modal[data-panel=styleShop] .style-shop-balance{top:1px;right:7px}
}

.ui-v30.app-mobile #modalBody .app-hero-list .hud-face{flex:none;width:44px;height:44px;object-fit:contain;border-radius:50%;background:#102014;border:1px solid #b69b5c;overflow:hidden}
.style-preview-character[data-preview-motion=attack]>.style-art-window{animation:v30-preview-strike .8s ease-in-out 1}
.style-preview-character[data-preview-motion=ultimate]>.style-art-window{animation:v30-preview-power 1.3s ease-in-out 1}
@media(prefers-reduced-motion:reduce){.style-preview-character>.style-art-window{animation:none!important;transform:none!important}}