/* Approved PC / landscape HUD / illustrated hero atlas / transformation shop.
   Responsive HTML controls overlay live Canvas; no mock screenshot replaces play. */
body.ui-v30{--v30-gold:#e0bb70;--v30-light:#fff0bb;--v30-dark:#171410;--v30-border:#a87a40;--v30-surface:linear-gradient(145deg,#292419ed,#090d0dee);--v30-safe-l:max(12px,env(safe-area-inset-left));--v30-safe-r:max(12px,env(safe-area-inset-right));--v30-safe-t:max(10px,env(safe-area-inset-top));--v30-safe-b:max(10px,env(safe-area-inset-bottom));}
.ui-v30 #hud .topbar,.ui-v30 #hud .journey-shortcuts,.ui-v30 #hud #keyboardhint{display:none}
.ui-v30 #hud .bottom-hud{position:static;display:contents;pointer-events:none}
.ui-v30 #hud .hero-panel{display:flex;max-width:none;position:absolute;left:var(--v30-safe-l);top:var(--v30-safe-t);bottom:auto;width:300px;height:83px;min-width:0;padding:0 0 0 70px;border:0;border-radius:0;background:none;box-shadow:none;pointer-events:auto}
.ui-v30 #hud #heroPortrait{position:absolute;left:0;top:0;width:78px;height:78px;border:3px solid #efd28e;border-radius:50%;object-fit:cover;object-position:center;box-shadow:0 0 0 2px #6b4926,0 3px 7px #0009;background:#262c19;z-index:2}
.ui-v30 #hud .hero-panel>div{position:relative;height:71px;padding:5px 9px 4px 13px;background:linear-gradient(90deg,#191a13e8,#171610dd 75%,#17161000);border:0;border-radius:0;box-shadow:none}
.ui-v30 #hud #heroName{display:block;font-size:17px;line-height:25px;color:#fff2a8;padding-right:55px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-v30 #hud #heroLevel{position:absolute;right:11px;top:7px;font-size:13px;color:#fff5d4}
.ui-v30 #hud .hero-panel .health{position:relative;height:16px;margin:1px -3px 4px -2px;overflow:hidden;border:1px solid #e8c079;border-radius:0;clip-path:polygon(0 0,96% 0,100% 45%,96% 100%,0 100%);background:#350a0e;box-shadow:0 1px 1px #000}
.ui-v30 #hud #hpfill{background:linear-gradient(#ff6a72,#d51936 50%,#a90925 51%,#ed2142);box-shadow:inset 0 1px #ffc3bc66}
.ui-v30 #hud #hptext{font-size:11px;line-height:14px;text-shadow:0 1px 2px #340000;color:#fff}
.ui-v30 #hud #heroExperience{display:block;position:relative;height:11px;margin:0 -1px 0 -2px;border:1px solid #bca464;border-radius:0;background:#071c2f;overflow:hidden;clip-path:polygon(0 0,97% 0,100% 50%,97% 100%,0 100%)}
.ui-v30 #hud #heroXPFill{background:linear-gradient(#66dbff,#0590cd 55%,#0470a7 56%,#189ecb)}
.ui-v30 #hud #heroXPText{display:block;position:absolute;left:12px;right:4px;top:51px;text-align:center;font-size:9px;line-height:13px;color:white;margin:0;text-shadow:0 1px #082a48}
.ui-v30 #hud #heroStats{display:none}
.ui-v30 #hud .map-wrap{position:absolute;right:var(--v30-safe-r);top:calc(var(--v30-safe-t) + 32px);width:204px;padding:3px;border:1px solid #f0cd82;border-radius:7px;background:#1b1b14;box-shadow:0 0 0 2px #45301c,0 4px 14px #0008;pointer-events:auto}
.ui-v30 #hud .map-wrap>button{display:block;width:100%;padding:0;border:0;background:transparent}
.ui-v30 #hud #minimap{display:block;width:100%;height:auto;border:0;border-radius:3px}
.ui-v30 #hud #mapCaption,.ui-v30 #hud #explorationProgress{display:none}
.ui-v30 #hud .quest{left:auto;right:var(--v30-safe-r);top:calc(var(--v30-safe-t) + 162px);width:204px;max-width:none;padding:4px 2px;background:linear-gradient(90deg,#12110d00,#12110dbd);border:0;box-shadow:none;pointer-events:auto}
.ui-v30 #hud .quest>.eyebrow,.ui-v30 #hud .quest-meta{display:none}
.ui-v30 #hud #objective{font-size:12px;line-height:18px;color:#fff0bd}
.ui-v30 #hud #objective:before{content:'◆ ';color:#ffe389}
.ui-v30 #hud #localGoal{font-size:11px;line-height:17px;margin:3px 0;color:#eee5cf}
.ui-v30 #hud .skillbar{position:absolute;left:var(--v30-safe-l);top:calc(var(--v30-safe-t) + 98px);bottom:130px;width:60px;max-width:none;display:flex;flex-direction:column;gap:9px;padding:2px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;pointer-events:auto}
.ui-v30 #hud .skill-card{position:relative;flex:none;width:52px;height:58px;background:none;border:0;padding:0;box-shadow:none}
.ui-v30 #hud .skill-card .portrait{width:49px;height:49px;border:2px solid #c29b51;border-radius:50%;overflow:hidden;background:#1a2014}
.ui-v30 #hud .skill-card .portrait>img{width:100%;height:100%;object-fit:cover}
.ui-v30 #hud .skill-card .select-hero{position:absolute;inset:0;border-radius:50%;background:transparent;border:0;width:100%;height:100%}
.ui-v30 #hud .skill-card .hotkey{position:absolute;right:0;top:0;border-radius:50%;font-size:9px;background:#19180e;color:#eed595;padding:1px 4px}
.ui-v30 #hud .skill-card .mini-health{height:4px;position:absolute;bottom:4px;left:0;background:#56c76f;border-radius:3px;max-width:48px}
.ui-v30 #hud .skill-card .cast{position:absolute;bottom:0;left:0;height:6px;width:48px;min-height:0;padding:0;border:0;background:#1c1d19;overflow:hidden}
.ui-v30 #hud .skill-card .cast>i{display:block;height:100%;background:#e7b74e}
.ui-v30 #hud .skill-card .cast>span{display:none}
.ui-v30 #hud .skill-card.selected .portrait{border-color:#fff0a1;box-shadow:0 0 7px #ffe18d88}
.ui-v30 #hud .skill-card.dead{opacity:.45;filter:grayscale(1)}
.ui-v30 #hud #appResources{display:flex;position:absolute;top:var(--v30-safe-t);right:calc(var(--v30-safe-r) + 42px);left:auto;transform:none;min-height:25px;width:auto;max-width:180px;padding:3px 10px;border:1px solid #a97e43;border-radius:5px;background:#171510dc;gap:5px;font-size:12px;color:#fff0c3;pointer-events:none}
.ui-v30 #hud #appBattleGold{padding-left:18px;white-space:nowrap}
.ui-v30 #hud #appBattleGold:before{content:'◉';position:absolute;left:0;color:#ffcd57;background:none;top:auto;width:auto;height:auto}
.ui-v30 #hud #appBattleFatigue{display:none}
.ui-v30 #hud #appTop{display:flex;position:absolute;right:var(--v30-safe-r);top:var(--v30-safe-t);gap:4px;pointer-events:auto}
.ui-v30 #hud #appTop #appMapButton{display:none}
.ui-v30 #hud #appTop button{width:32px;height:28px;min-width:32px;min-height:28px;padding:3px;border:1px solid #a97d40;border-radius:5px;background:#171610ef}
.ui-v30 #hud #appTop button:before{display:none}
.ui-v30 #hud #appTop .ui-icon{width:22px;height:22px}
.ui-v30 #hud #bossbar{position:absolute;top:var(--v30-safe-t);left:50%;transform:translateX(-50%);width:clamp(220px,28vw,440px);padding:5px 8px 7px;border:0;border-radius:0;background:linear-gradient(90deg,#170f0a00,#21110ee8 20%,#21110ee8 80%,#170f0a00);box-shadow:none}
.ui-v30 #hud #bossbar strong{color:#ffebad;font-size:13px;letter-spacing:.06em}
.ui-v30 #hud #bossbar .boss-track{height:10px;border:1px solid #d3b376;border-radius:0;clip-path:polygon(2% 0,98% 0,100% 50%,98% 100%,2% 100%,0 50%);background:#250808}
.ui-v30 #hud #bosshp{background:linear-gradient(#ff6d69,#b10e26 55%,#df243b)}
.ui-v30 #hud #siegeHUD{top:calc(var(--v30-safe-t) + 61px);width:clamp(220px,28vw,440px);padding:4px 9px;border:0;background:#17120bd9;border-radius:4px;box-shadow:none;font-size:10px;max-height:53px;overflow:auto;scrollbar-width:thin}
.ui-v30 #hud #siegeHUD small{font-size:10px}
.ui-v30 #hud #siegeHUD .siege-phase{font-size:11px}
.ui-v30 #hud .field-controls{position:static;transform:none;display:contents;pointer-events:auto}
.ui-v30 #hud .field-controls #assist{position:absolute;bottom:calc(var(--v30-safe-b) + 76px);left:50%;transform:translateX(-50%);min-height:32px;padding:4px 12px;border-radius:18px;background:#13180de3;color:#f6e7b2;border:1px solid #d9b979;font-size:11px}
.ui-v30 #hud .field-controls #assist.active:after{content:' ●';color:#b7ff8a}
.ui-v30 #hud #zoomIn,.ui-v30 #hud #zoomOut{position:fixed;right:calc(var(--v30-safe-r) + 7px);top:calc(var(--v30-safe-t) + 77px);width:28px;height:28px;min-width:28px;padding:0;border:1px solid #d9b979;background:#171610d9;font-size:21px}
.ui-v30 #hud #zoomOut{top:calc(var(--v30-safe-t) + 107px)}
.ui-v30 #hud .squad-controls{display:none}
.ui-v30 #hud .commands{display:none;position:absolute;bottom:calc(var(--v30-safe-b) + 112px);left:50%;transform:translateX(-50%);width:auto;gap:5px;padding:8px;border:1px solid #ad8645;border-radius:9px;background:#171a12f0;pointer-events:auto}
.ui-v30 #hud.commands-open .commands{display:flex}
.ui-v30 #hud .commands button{font-size:11px;padding:7px 12px;min-height:38px;background:#211d12;color:#f2dfae;border:1px solid #98743f}
.ui-v30 #hud .commands .active{border-color:#fff0a9;background:#4b4522}
.ui-v30 #hud #pcHotbar{position:absolute;bottom:var(--v30-safe-b);left:50%;transform:translateX(-50%);display:flex;align-items:end;gap:5px;padding:6px 9px;border:1px solid #b78c45;border-radius:5px;background:#11130de8;box-shadow:0 3px 15px #0009;pointer-events:auto}
.ui-v30 #hud #pcHotbar button{position:relative;display:grid;place-items:center;width:51px;height:51px;min-width:51px;padding:2px;border:1px solid #bda464;border-radius:3px;background:#171e16;color:#f9e7b5}
.ui-v30 #hud #pcHotbar img{width:45px;height:45px;object-fit:contain}
.ui-v30 #hud #pcHotbar kbd{position:absolute;top:-19px;left:0;width:100%;text-align:center;font-size:10px;color:#fff1cf;background:#13120ecf;border:0;padding:1px}
.ui-v30 #hud #pcHotbar button:first-child{margin-right:7px}
.ui-v30 #hud #pcHotbar button span{font-size:25px}
.ui-v30:not(.app-mobile) #heroBasicSkills,.ui-v30:not(.app-mobile) #appBattleTools,.ui-v30:not(.app-mobile) #appCommandDock,.ui-v30:not(.app-mobile) #appFormation{display:none}
.ui-v30 #hud .actions{position:absolute;right:var(--v30-safe-r);bottom:var(--v30-safe-b);width:208px;height:52px;pointer-events:auto}
.ui-v30 #hud .actions button,.ui-v30 #hud .actions #attack,.ui-v30 #hud .actions #skill,.ui-v30 #hud .actions #shield,.ui-v30 #hud .actions #potion{position:absolute;width:48px;height:48px;min-width:48px;min-height:48px;top:0;bottom:auto;padding:0;border:0;background:none;box-shadow:none;border-radius:50%;display:grid;place-items:center;isolation:isolate}
.ui-v30 #hud .actions button:before,.ui-v30 #hud .actions:before{display:none}
.ui-v30 #hud .actions #potion{right:156px}.ui-v30 #hud .actions #shield{right:104px}.ui-v30 #hud .actions #attack{right:52px}.ui-v30 #hud .actions #skill{right:0}
.ui-v30 #hud .actions .ui-icon{position:absolute;inset:0;width:48px;height:48px;object-fit:contain;filter:none}
.ui-v30 #hud .actions small{position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:9px;line-height:12px;padding:0 3px;color:white;text-shadow:0 1px 2px #000;background:#17130bc9;border-radius:3px;z-index:2;max-width:none}
.ui-v30 #hud .actions #shield small,.ui-v30 #hud .actions #attack small{display:none}
.ui-v30 #hud .actions #skill:after{inset:-1px;border:2px solid #f7ce6e;opacity:.5;padding:0;border-radius:50%;pointer-events:none}
.ui-v30 #hud .actions #skill.ready:after{opacity:1;box-shadow:0 0 7px #ffc34b}
.ui-v30 #hud #interact{bottom:calc(var(--v30-safe-b) + 112px);font-size:12px;min-height:40px;background:#223b21ef;border-color:#e4c481;color:#fff0bd}
.ui-v30 #hud #quickServices{top:auto;bottom:calc(var(--v30-safe-b) + 114px);max-width:360px;background:#171b12eb;border-color:#9e814b;padding:6px 10px}
.ui-v30 #hud #quickServices>strong{display:none}
.ui-v30 #hud #quickServices button{min-height:34px;font-size:11px;background:#272b1d;color:#f4e2ae;border-color:#8f743d}
.ui-v30 #hud .route-banner{top:calc(var(--v30-safe-t) + 100px);max-width:36vw}
.ui-v30 #hud #trainingHUD{top:calc(var(--v30-safe-t) + 70px)}

/* App battle screen: 36px painted circles inside identical 44px touch targets. */
body.ui-v30.app-mobile{--v30-safe-l:max(9px,env(safe-area-inset-left));--v30-safe-r:max(9px,env(safe-area-inset-right));--v30-safe-t:max(7px,env(safe-area-inset-top));--v30-safe-b:max(9px,env(safe-area-inset-bottom))}
.ui-v30.app-mobile #hud #pcHotbar,.ui-v30.app-mobile #hud .skillbar,.ui-v30.app-mobile #hud .field-controls,.ui-v30.app-mobile #hud .quest{display:none}
.ui-v30.app-mobile #hud .hero-panel{width:180px;height:48px;padding-left:40px}
.ui-v30.app-mobile #hud #heroPortrait{width:45px;height:45px;border-width:2px}
.ui-v30.app-mobile #hud .hero-panel>div{height:43px;padding:2px 5px 2px 8px}
.ui-v30.app-mobile #hud #heroName{font-size:11px;line-height:17px;padding-right:34px}
.ui-v30.app-mobile #hud #heroLevel{font-size:9px;right:5px;top:3px}
.ui-v30.app-mobile #hud .hero-panel .health{height:10px;margin:1px 0 2px -1px}
.ui-v30.app-mobile #hud #hptext{font-size:8px;line-height:8px}
.ui-v30.app-mobile #hud #heroExperience{height:9px;margin:0}
.ui-v30.app-mobile #hud #heroXPText{top:31px;left:8px;right:3px;font-size:7px;line-height:9px}
.ui-v30.app-mobile #hud #appResources{top:var(--v30-safe-t);right:calc(var(--v30-safe-r) + 35px);max-width:118px;font-size:10px;min-height:23px;padding:3px 7px}
.ui-v30.app-mobile #hud #appTop button{width:30px;height:25px;min-width:30px;min-height:25px}
.ui-v30.app-mobile #hud .map-wrap{right:var(--v30-safe-r);top:calc(var(--v30-safe-t) + 31px);width:126px;padding:2px;border-radius:5px}
.ui-v30.app-mobile #hud #appLocation{display:block;top:calc(var(--v30-safe-t) + 108px);right:var(--v30-safe-r);left:auto;width:145px;max-width:145px;text-align:right;font-size:9px;line-height:12px;color:#fff1c5;text-shadow:0 1px 3px #000}
.ui-v30.app-mobile #hud #appDistrict,.ui-v30.app-mobile #hud #appObjective{display:none}
.ui-v30.app-mobile #hud #bossbar{width:clamp(170px,29vw,300px);top:var(--v30-safe-t);padding:2px 8px 6px}
.ui-v30.app-mobile #hud #bossbar strong{font-size:10px}
.ui-v30.app-mobile #hud #bossbar small,.ui-v30.app-mobile #hud #bosshptext{font-size:8px}
.ui-v30.app-mobile #hud #siegeHUD{width:clamp(170px,29vw,300px);top:calc(var(--v30-safe-t) + 47px);max-height:34px;padding:2px 7px}
.ui-v30.app-mobile #hud #siegeHUD small{font-size:8px;line-height:11px}
.ui-v30.app-mobile #hud #siegeHUD .siege-detail{display:none}
.ui-v30.app-mobile #hud #siegeHUD .siege-hint{display:block}
.ui-v30.app-mobile #hud #joystick{width:84px;height:84px;left:var(--v30-safe-l);bottom:var(--v30-safe-b);background:radial-gradient(#322d2477,#17171477);border:1px solid #e1cfa27d;box-shadow:inset 0 0 0 2px #191b1699}
.ui-v30.app-mobile #hud #stick{width:30px;height:30px;left:26px;top:26px;background:radial-gradient(#a99472a8,#6b5944b0);border:1px solid #ebd6b0a0;box-shadow:0 2px 6px #0008}
.ui-v30.app-mobile #hud #appBattleTools{display:contents}
.ui-v30.app-mobile #hud #appAssist{left:calc(50% - 77px);right:auto;bottom:var(--v30-safe-b);width:108px;height:44px;min-width:108px;transform:none;padding:0 20px 0 8px;font-size:9px}
.ui-v30.app-mobile #hud #appAssist:before{inset:8px 0;border:1px solid #ddbe80;background:#191b10ed;border-radius:18px}
.ui-v30.app-mobile #hud #appAssistLabel{max-width:69px;font-size:9px}
.ui-v30.app-mobile #hud #appAssist:after{width:7px;height:7px;top:18px;right:9px;box-shadow:none;background:#9e9b88}
.ui-v30.app-mobile #hud #appAssist.active:after{right:9px;background:#adf584;box-shadow:0 0 5px #7de74a}
.ui-v30.app-mobile #hud #appAssistState{font-size:8px}
.ui-v30.app-mobile #hud #appFormation{display:flex;position:absolute;isolation:isolate;left:calc(50% + 35px);right:auto;bottom:var(--v30-safe-b);width:48px;height:44px;min-width:48px;min-height:44px;border:0;background:none;padding:4px;pointer-events:auto}
.ui-v30.app-mobile #hud #appFormation:before{content:'';position:absolute;inset:5px 0;border:1px solid #ddbe80;border-radius:7px;background:#191b10ed;z-index:-1}
.ui-v30.app-mobile #hud #appFormation .ui-icon{width:28px;height:28px}
.ui-v30.app-mobile #hud #appFormation small{display:none}
.ui-v30.app-mobile #hud #appCommandDock{display:none;left:50%;bottom:calc(var(--v30-safe-b) + 48px);transform:translateX(-50%);padding:5px;gap:4px;border:1px solid #b58b49;border-radius:9px;background:#171b11ed}
.ui-v30.app-mobile #hud.commands-open #appCommandDock{display:flex}
.ui-v30.app-mobile #hud.commands-open .commands{display:none}
.ui-v30.app-mobile #hud #appZoomIn,.ui-v30.app-mobile #hud #appZoomOut{left:auto;right:calc(var(--v30-safe-r) + 1px);top:calc(var(--v30-safe-t) + 44px);width:30px;height:30px;min-width:30px;min-height:30px;font-size:19px;z-index:3;background:#12140dcc;border:1px solid #bca66d;border-radius:3px}
.ui-v30.app-mobile #hud #appZoomOut{top:calc(var(--v30-safe-t) + 75px)}
.ui-v30.app-mobile #hud #appZoomIn:before,.ui-v30.app-mobile #hud #appZoomOut:before{display:none}
.ui-v30.app-mobile #hud .actions{width:188px;height:44px;right:var(--v30-safe-r);bottom:var(--v30-safe-b)}
.ui-v30.app-mobile #hud .actions button,.ui-v30.app-mobile #hud .actions #potion,.ui-v30.app-mobile #hud .actions #shield,.ui-v30.app-mobile #hud .actions #attack,.ui-v30.app-mobile #hud .actions #skill{width:44px;height:44px;min-width:44px;min-height:44px;top:0;bottom:auto}
.ui-v30.app-mobile #hud .actions #potion{right:141px}.ui-v30.app-mobile #hud .actions #shield{right:94px}.ui-v30.app-mobile #hud .actions #attack{right:47px}.ui-v30.app-mobile #hud .actions #skill{right:0}
.ui-v30.app-mobile #hud .actions .ui-icon{width:36px;height:36px;inset:4px}
.ui-v30.app-mobile #hud .actions small{bottom:-1px;font-size:7px;line-height:9px}
.ui-v30.app-mobile #hud .hero-basic-skills{display:flex;right:var(--v30-safe-r);bottom:calc(var(--v30-safe-b) + 47px);gap:3px;width:auto}
.ui-v30.app-mobile #hud .hero-basic-skills[hidden]{display:none}
.ui-v30.app-mobile #hud .hero-basic-skills button{position:relative;width:44px;height:44px;min-width:44px;min-height:44px;padding:4px;border:0;border-radius:50%;background:none;box-shadow:none}
.ui-v30.app-mobile #hud .hero-basic-skills .ui-icon{position:absolute;inset:4px;width:36px;height:36px}
.ui-v30.app-mobile #hud .hero-basic-skills span{display:none}
.ui-v30.app-mobile #hud .hero-basic-skills small{position:absolute;bottom:0;left:50%;transform:translateX(-50%);font-size:8px;color:#fff;white-space:nowrap;background:#101a0ccc;padding:0 2px;border-radius:3px}
.ui-v30.app-mobile #hud .hero-basic-skills button:disabled{opacity:.55}
.ui-v30.app-mobile #hud #quickServices{bottom:auto;top:calc(var(--v30-safe-t) + 57px);left:var(--v30-safe-l);transform:none;width:180px;padding:3px}
.ui-v30.app-mobile #hud #quickServices button{min-height:30px;font-size:9px;padding:3px}
.ui-v30.app-mobile #hud #quickServices button>span{display:none}
.ui-v30.app-mobile #hud #interact{bottom:calc(var(--v30-safe-b) + 51px);max-width:calc(100vw - 310px);min-width:110px;font-size:10px;min-height:36px;padding:6px 9px}
.ui-v30.app-mobile #hud .route-banner{top:calc(var(--v30-safe-t) + 89px);max-width:33vw;font-size:9px}
.ui-v30.app-mobile #hud #movementStatus{bottom:calc(var(--v30-safe-b) + 94px)}

/* Every panel uses the same dark bronze surface. Main map/shop are full view sheets. */
.ui-v30 #modal .modal.panel{background:linear-gradient(145deg,#242219,#0d1713 75%);border-color:#b99759;color:#f0e6c9}
.ui-v30 #modal button{border-color:#aa874c;color:#f7e7b6}
.ui-v30 #modal button:focus-visible{outline:2px solid #fff0a8;outline-offset:3px}
.ui-v30 #modal[data-panel=heroMap],.ui-v30 #modal[data-panel=styleShop]{padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
.ui-v30 #modal[data-panel=heroMap] .modal.panel,.ui-v30 #modal[data-panel=styleShop] .modal.panel{position:relative;width:100%;max-width:1500px;height:min(92dvh,900px);max-height:100%;padding:0;border:1px solid #d2ad63;overflow:hidden;border-radius:9px;box-shadow:0 10px 60px #000c}
.ui-v30 #modal[data-panel=heroMap] .modal-head,.ui-v30 #modal[data-panel=styleShop] .modal-head{position:absolute;right:0;top:0;padding:0;border:0;background:none;z-index:12}
.ui-v30 #modal[data-panel=heroMap] #modalTitle,.ui-v30 #modal[data-panel=heroMap] #modalEyebrow,.ui-v30 #modal[data-panel=styleShop] #modalTitle,.ui-v30 #modal[data-panel=styleShop] #modalEyebrow{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.ui-v30 #modal[data-panel=heroMap] #closeModal,.ui-v30 #modal[data-panel=styleShop] #closeModal{position:absolute;top:9px;right:9px;width:42px;height:42px;min-width:42px;min-height:42px;border:2px solid #efd395;border-radius:50%;background:#17150ee8;color:#ffdd8b;font-size:26px;z-index:12}
.ui-v30 #modal[data-panel=heroMap] #modalBody,.ui-v30 #modal[data-panel=styleShop] #modalBody{height:100%;max-height:none;padding:0;overflow:hidden}
.hero-atlas-v30{height:100%;display:grid;grid-template-columns:minmax(0,7fr) minmax(260px,3fr);background:#10130d;color:#fff0c8;isolation:isolate}
.hero-atlas-stage{position:relative;min-width:0;min-height:0;overflow:hidden;background:#25351b url('assets/ui-v30/hero-map-background.webp') center/cover no-repeat}
.hero-atlas-stage:after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 65px #0b100caa;z-index:0}
.hero-atlas-top{position:absolute;z-index:3;top:0;left:0;right:0;padding:20px 24px;background:linear-gradient(#10170ac9,transparent)}
.hero-atlas-top>strong{display:block;font-size:clamp(25px,3.2vw,48px);color:#ffe3a1;text-shadow:0 2px 3px #171608;letter-spacing:.06em}
.hero-atlas-top nav{display:flex;gap:8px;margin-top:13px}
.hero-atlas-top button,.hero-atlas-bottom nav button{min-height:34px;border:1px solid #d9bb78;border-radius:19px;background:#17170cdd;padding:5px 16px;color:#f6e8b9;font-size:13px}
.hero-atlas-top [aria-pressed=true]{background:linear-gradient(#70622c,#302b11);box-shadow:0 0 8px #ffdf8a55}
.hero-atlas-land{position:absolute;inset:14% 4% 19%;z-index:1}
.hero-atlas-land>svg{position:absolute;width:100%;height:100%;overflow:visible;pointer-events:none}
.hero-atlas-land>svg path{stroke:#f6e9b8;stroke-width:.38;stroke-dasharray:1 1;opacity:.7;fill:none}
.hero-atlas-pin{position:absolute;transform:translate(-50%,-50%);width:67px;height:78px;min-width:0;padding:0;border:0!important;background:none!important;isolation:isolate;filter:drop-shadow(0 3px 3px #0009)}
.hero-atlas-pin>img{position:absolute;top:0;left:0;width:65px;height:65px;border:3px solid #f0c674;border-radius:50%;object-fit:cover;background:#17311d;box-shadow:0 0 0 2px #60451f}
.hero-atlas-pin>i{position:absolute;bottom:0;left:18px;width:32px;height:32px;display:grid;place-items:center;border:2px solid #edc26c;border-radius:50% 50% 50% 0;transform:rotate(-45deg);font-style:normal;font-size:19px;background:#252415;color:#ffe3a0}
.hero-atlas-pin>i::first-letter{transform:rotate(45deg)}
.hero-atlas-pin>b{position:absolute;right:-6px;top:-3px;min-width:22px;min-height:22px;padding:2px;border-radius:50%;border:1px solid #ffe4a2;background:#9e7028;color:white;font-size:12px}
.hero-atlas-pin>span{position:absolute;left:50%;top:80px;transform:translateX(-50%);max-width:130px;width:max-content;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:3px 7px;border:1px solid #bd9955;border-radius:4px;background:#18180ee8;color:#fff0bd;font-size:11px}
.hero-atlas-pin.selected>img{border-color:#adffff;box-shadow:0 0 0 2px #d5a34a,0 0 14px #48e0f7}
.hero-atlas-pin.owned>img{border-color:#adca8d}
.hero-atlas-player{position:absolute;transform:translate(-50%,20px) rotate(-35deg);font-size:33px;font-style:normal;color:#98ffff;text-shadow:0 0 8px #24d5ff;pointer-events:none}
.hero-atlas-bottom{position:absolute;bottom:0;left:0;right:0;z-index:4;padding:9px 14px 12px;background:linear-gradient(transparent,#11170deb 25%)}
.hero-atlas-bottom nav{display:flex;gap:6px;align-items:center;margin-bottom:7px}
.hero-atlas-bottom nav button{font-size:11px;padding:4px 11px;min-height:29px}
.hero-atlas-bottom nav>span{margin-left:auto;font-size:12px;color:#f5d88e}
.hero-atlas-list{display:flex;gap:7px;overflow-x:auto;scrollbar-width:thin;overscroll-behavior:contain;padding:4px 2px}
.hero-atlas-list>button{position:relative;flex:0 0 48px;width:48px;padding:0;border:1px solid #ae8a49!important;border-radius:6px;background:#10180ee8;color:#e7d8ae}
.hero-atlas-list>button[aria-pressed=true]{border-color:#a5ffff!important;box-shadow:0 0 4px #64edeb}
.hero-atlas-list img{display:block;width:100%;height:42px;object-fit:cover;border-radius:5px}
.hero-atlas-list span{display:block;max-width:46px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:8px;padding:2px}
.hero-atlas-list b{position:absolute;right:2px;top:1px;font-size:10px;color:#c8ff9a}
.hero-atlas-detail{display:flex;flex-direction:column;min-height:0;min-width:0;border-left:2px solid #a98449;background:#141811 url('assets/ui-v30/vault-background.webp') center/cover;box-shadow:inset 0 0 50px #000b}
.hero-atlas-portrait{position:relative;flex:1;min-height:120px;overflow:hidden;padding:14px 20px 0}
.hero-atlas-portrait img{width:100%;height:100%;object-fit:contain;object-position:bottom}
.hero-atlas-copy{flex:none;max-height:48%;overflow:auto;padding:12px 17px 20px;background:linear-gradient(#17180bc9,#0d130bf5 25%);text-align:center;scrollbar-width:thin}
.hero-atlas-copy h3{font-size:clamp(18px,2.1vw,31px);margin:0 0 6px;color:#ffe8a4;line-height:1.25}
.hero-atlas-role{font-size:13px;margin:0 0 10px;color:#f4d782}
.hero-atlas-role span{display:block;color:#bfc1a1;font-size:10px;margin-top:4px}
.hero-atlas-skills{display:flex;justify-content:center;gap:9px}
.hero-atlas-skills>button{padding:0;width:45px;height:45px;border:0!important;background:none!important}
.hero-atlas-skills img{width:100%;height:100%;object-fit:contain}
.hero-atlas-condition{font-size:12px;line-height:1.5;color:#e5d19a;max-height:58px;overflow:auto;margin:10px 0}
.hero-atlas-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.hero-atlas-actions>button{min-height:42px;padding:7px;border:1px solid #d9b165;border-radius:6px;background:#292417;color:#ffeab4;font-size:12px}
.hero-atlas-actions .v30-primary{background:linear-gradient(#527d25,#173a18);box-shadow:inset 0 1px #c8dd8677;border-color:#f0cb7b}
.hero-atlas-actions>button:disabled{opacity:.48;cursor:default}
.hero-atlas-empty{display:grid;align-content:center;justify-items:center;padding:25px;text-align:center;background:#141810;color:#daca9a}
.hero-atlas-empty>span{font-size:80px;color:#8c7136}.hero-atlas-empty p{font-size:14px}.hero-atlas-empty small{font-size:11px}

.style-shop-v30{height:100%;display:grid;grid-template-columns:80px minmax(0,43fr) minmax(0,57fr);background:#12170f url('assets/ui-v30/vault-background.webp') center/cover;color:#ffedbf}
.style-shop-tabs{display:flex;flex-direction:column;border-right:1px solid #b08a49;background:#12180de8;overflow-y:auto;scrollbar-width:thin;padding:7px 0}
.style-shop-tabs button{flex:1;min-height:70px;max-height:135px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:0!important;border-bottom:1px solid #7f642344!important;border-radius:0;background:none!important;font-size:11px;padding:5px}
.style-shop-tabs button i{font-style:normal;font-size:32px;color:#e5b960;text-shadow:0 2px 2px #000}
.style-shop-tabs button[aria-pressed=true]{background:linear-gradient(90deg,#96833255,#324e1d77)!important;box-shadow:inset 3px 0 #ffe39a}
.style-preview{position:relative;min-height:0;min-width:0;display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% 77%,#fbaf3b29,transparent 60%)}
.style-preview-title{position:absolute;left:8%;top:3%;z-index:2;text-shadow:0 2px 4px #000}
.style-preview-title h3{font-size:clamp(25px,3.1vw,47px);margin:0 0 12px;color:#ffe9b2;letter-spacing:.08em}
.style-preview-title>span{display:block;color:#ffe19e;font-size:15px}
.style-preview-character{position:absolute;inset:12% 2% 16%;isolation:isolate}
.style-preview-character>img{position:relative;width:100%;height:100%;object-fit:contain;z-index:1;filter:drop-shadow(0 7px 10px #05080499)}
.style-preview-aura{position:absolute;bottom:2%;left:15%;width:70%;height:11%;border:2px solid #b38b40;border-radius:50%;background:radial-gradient(ellipse,#fff0bc55,#9f6a1b88 40%,#1b1c14dd 70%);box-shadow:0 7px 0 #292412,0 9px 0 #b48d46,0 15px 25px #000a;z-index:0}
.style-preview-character.legendary .style-preview-aura{border-color:#d8be73;box-shadow:0 7px 0 #292412,0 9px 0 #b48d46,0 0 30px #21bfe44d}
.style-preview-character[data-preview-motion=attack]>img{animation:v30-preview-strike .8s ease-in-out 1}
.style-preview-character[data-preview-motion=ultimate]>img{animation:v30-preview-power 1.3s ease-in-out 1}
.style-preview-character[data-preview-motion=ultimate] .style-preview-aura{box-shadow:0 0 70px #6becff99,0 0 20px #ffdf7977}
@keyframes v30-preview-strike{0%,100%{transform:translateX(0) rotate(0)}30%{transform:translateX(-3%) rotate(-3deg)}55%{transform:translateX(4%) rotate(3deg)}}
@keyframes v30-preview-power{0%,100%{filter:drop-shadow(0 7px 10px #05080499)}50%{filter:drop-shadow(0 0 25px #7becff);transform:translateY(-2%)}}
.style-preview-controls{position:absolute;left:0;right:0;bottom:2%;display:flex;flex-direction:column;align-items:center;gap:8px}
.style-preview-controls>span{font-size:11px;border:1px solid #ba9b5e;padding:4px 10px;background:#171b10d9;border-radius:4px}
.style-preview-controls>nav{display:flex;justify-content:center;gap:20px}
.style-preview-controls button{display:flex;flex-direction:column;align-items:center;width:58px;padding:0;background:none!important;border:0!important;gap:3px}
.style-preview-controls button img{width:48px;height:48px;object-fit:contain}
.style-preview-controls small{font-size:11px;color:#ffe8b6}
.style-preview-controls [aria-pressed=true] img{filter:drop-shadow(0 0 5px #ffe294)}
.style-shop-catalogue{display:flex;flex-direction:column;gap:12px;padding:55px 20px 14px 6px;min-height:0;min-width:0;position:relative}
.style-shop-balance{position:absolute;top:13px;right:70px;font-size:11px;color:#e2cc98;background:#10150cbb;padding:5px 12px;border:1px solid #a27c3d;border-radius:4px}
.style-shop-balance b{font-size:16px;margin-left:8px;color:#fff4d0}
.style-product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:12px;flex:1;min-height:0}
.style-product{position:relative;display:flex;flex-direction:column;padding:0!important;min-width:0;min-height:0;overflow:hidden;border:1px solid #ad8d4e!important;border-radius:4px;background:linear-gradient(#0b160ef0,#11200bdd)!important;box-shadow:inset 0 0 18px #0007}
.style-product.selected{border-color:#f4d990!important;box-shadow:0 0 0 1px #e5bd65,inset 0 0 20px #a68b3333}
.style-product>strong{flex:none;padding:8px 2px;width:100%;font-size:clamp(13px,1.5vw,23px);font-weight:700;color:#fff0c4;background:#11180dd9;z-index:1}
.style-product-art{position:relative;flex:1;min-height:0;width:100%;overflow:hidden}
.style-product-art>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 16%;transform:scale(1.45);transform-origin:50% 5%}
.style-product-art.whole>img:nth-child(1){transform:translateX(-26%) scale(1.25);opacity:.85}
.style-product-art.whole>img:nth-child(2){transform:translateX(26%) scale(1.25);opacity:.85}
.style-product-art.whole>img:last-child{transform:scale(1.4);z-index:1}
.style-product>span{flex:none;display:block;width:100%;padding:6px 3px;font-size:12px;color:#ffe6a1;border-top:1px solid #9b7c3d;background:#15200ff5;z-index:2}
.style-coin-packs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.style-coin-packs>button{display:flex;justify-content:center;align-items:center;gap:10px;padding:8px 4px;min-height:55px;border:1px solid #9e793f!important;border-radius:4px;background:linear-gradient(100deg,#142316,#1b2110)!important;opacity:.8!important;color:#efdcad}
.style-coin-packs i{font-style:normal;font-size:32px;color:#e9b34b}
.style-coin-packs span{font-size:17px}.style-coin-packs small{display:block;font-size:10px;margin-top:3px}
.style-shop-notice{font-size:10px;line-height:1.6;color:#cdc5a4;margin:0;text-align:right}

@media(max-height:550px) and (orientation:landscape){
 .ui-v30 #modal[data-panel=heroMap] .modal.panel,.ui-v30 #modal[data-panel=styleShop] .modal.panel{height:100%;border-radius:5px}
 .hero-atlas-v30{grid-template-columns:minmax(0,7fr) minmax(205px,3fr)}
 .hero-atlas-top{padding:10px 13px}.hero-atlas-top>strong{font-size:25px}.hero-atlas-top nav{margin-top:7px;gap:5px}.hero-atlas-top button{min-height:29px;padding:3px 11px;font-size:10px}
 .hero-atlas-land{inset:19% 5% 24%}.hero-atlas-pin{width:42px;height:50px}.hero-atlas-pin>img{width:40px;height:40px;border-width:2px}.hero-atlas-pin>i{width:23px;height:23px;left:10px;font-size:13px;border-width:1px}.hero-atlas-pin>b{font-size:9px;min-width:17px;min-height:17px}.hero-atlas-pin>span{top:51px;font-size:8px;padding:2px 4px;max-width:100px}
 .hero-atlas-bottom{padding:5px 9px 7px}.hero-atlas-bottom nav{margin-bottom:2px}.hero-atlas-bottom nav button{min-height:25px;font-size:9px}.hero-atlas-list>button{flex-basis:35px;width:35px}.hero-atlas-list img{height:31px}.hero-atlas-list span{font-size:7px;max-width:33px}
 .hero-atlas-portrait{min-height:80px;padding:8px 14px 0}.hero-atlas-copy{max-height:55%;padding:5px 9px 8px}.hero-atlas-copy h3{font-size:17px;margin-bottom:3px}.hero-atlas-role{font-size:10px;margin-bottom:5px}.hero-atlas-role span{font-size:8px}.hero-atlas-skills>button{width:30px;height:30px}.hero-atlas-condition{font-size:9px;margin:4px 0;max-height:35px}.hero-atlas-actions>button{min-height:32px;font-size:10px;padding:4px}
 .style-shop-v30{grid-template-columns:56px minmax(0,43fr) minmax(0,57fr)}.style-shop-tabs button{min-height:52px;font-size:9px;gap:2px}.style-shop-tabs button i{font-size:24px}.style-preview-title h3{font-size:25px;margin-bottom:5px}.style-preview-title>span{font-size:11px}.style-preview-character{inset:13% 0 18%}.style-preview-controls{gap:4px;bottom:2%}.style-preview-controls>span{font-size:8px;padding:2px 7px}.style-preview-controls>nav{gap:13px}.style-preview-controls button{width:39px;gap:0}.style-preview-controls button img{width:33px;height:33px}.style-preview-controls small{font-size:8px}
 .style-shop-catalogue{gap:7px;padding:41px 12px 7px 4px}.style-shop-balance{top:9px;right:56px;font-size:8px;padding:3px 7px}.style-shop-balance b{font-size:11px}.style-product-grid{gap:6px}.style-product>strong{padding:4px 1px;font-size:13px}.style-product>span{font-size:9px;padding:3px}.style-coin-packs{gap:6px}.style-coin-packs>button{min-height:39px;padding:4px;gap:7px}.style-coin-packs i{font-size:24px}.style-coin-packs span{font-size:12px}.style-coin-packs small{font-size:8px}.style-shop-notice{font-size:8px;line-height:1.4}
 .ui-v30 #modal[data-panel=heroMap] #closeModal,.ui-v30 #modal[data-panel=styleShop] #closeModal{width:32px;height:32px;min-width:32px;min-height:32px;right:7px;top:6px;font-size:22px}
}
@media(max-width:600px) and (orientation:portrait){
 .ui-v30.app-mobile #hud #bossbar{top:65px;width:55vw}.ui-v30.app-mobile #hud #siegeHUD{top:110px;width:55vw}.ui-v30.app-mobile #hud .map-wrap{width:92px}.ui-v30.app-mobile #hud #appLocation{top:96px;width:100px}.ui-v30.app-mobile #hud #appZoomIn{top:43px}.ui-v30.app-mobile #hud #appZoomOut{top:73px}.ui-v30.app-mobile #hud #appAssist{bottom:calc(var(--v30-safe-b) + 104px)}.ui-v30.app-mobile #hud #appFormation{bottom:calc(var(--v30-safe-b) + 104px)}.ui-v30.app-mobile #hud #appCommandDock{bottom:calc(var(--v30-safe-b) + 151px)}.ui-v30.app-mobile #hud #interact{max-width:90vw;bottom:calc(var(--v30-safe-b) + 153px)}
 .hero-atlas-v30{grid-template-columns:1fr;grid-template-rows:56% 44%}.hero-atlas-detail{display:grid;grid-template-columns:38% 62%;border-left:0;border-top:1px solid #b18b4c}.hero-atlas-portrait{padding:5px}.hero-atlas-copy{max-height:none;padding:15px 12px}.hero-atlas-top{padding:13px}.hero-atlas-top>strong{font-size:26px}.hero-atlas-top nav{margin-top:7px}.hero-atlas-top button{font-size:10px;padding:5px 10px}.hero-atlas-land{inset:25% 7% 27%}.hero-atlas-pin{width:43px;height:53px}.hero-atlas-pin>img{width:42px;height:42px}.hero-atlas-pin>i{width:23px;height:23px;left:11px;font-size:14px}.hero-atlas-pin>span{top:55px;font-size:8px;max-width:100px}.hero-atlas-list>button{flex-basis:37px}.hero-atlas-list img{height:32px}.hero-atlas-copy h3{font-size:19px}.hero-atlas-role{font-size:11px}.hero-atlas-skills>button{width:34px;height:34px}.hero-atlas-condition{font-size:10px}.hero-atlas-actions{grid-template-columns:1fr}.hero-atlas-actions>button{min-height:34px;font-size:11px}
 .style-shop-v30{grid-template-columns:48px 1fr;grid-template-rows:43% 57%}.style-shop-tabs{grid-row:1/3}.style-shop-tabs button{min-height:55px;font-size:9px}.style-shop-tabs button i{font-size:24px}.style-preview-title{left:6%;top:5%}.style-preview-title h3{font-size:26px;margin-bottom:6px}.style-preview-title>span{font-size:11px}.style-preview-character{inset:4% 0 13% 32%}.style-preview-controls{left:0;right:auto;bottom:9%;width:40%;gap:5px}.style-preview-controls>span{font-size:8px}.style-preview-controls>nav{flex-wrap:wrap;gap:5px}.style-preview-controls button{width:31px}.style-preview-controls button img{width:29px;height:29px}.style-preview-controls small{font-size:8px}.style-shop-catalogue{padding:25px 8px 8px;gap:6px;grid-column:2}.style-shop-balance{top:0;right:9px;font-size:8px;padding:2px 7px}.style-shop-balance b{font-size:10px}.style-product-grid{gap:6px}.style-product>strong{font-size:12px;padding:5px 1px}.style-product>span{font-size:9px;padding:4px}.style-coin-packs{gap:6px}.style-coin-packs>button{min-height:37px;padding:3px;gap:4px}.style-coin-packs i{font-size:23px}.style-coin-packs span{font-size:11px}.style-coin-packs small{font-size:8px}.style-shop-notice{font-size:8px}
}
@media(prefers-reduced-motion:reduce){.style-preview-character>img{animation:none!important;transform:none!important}}

.ui-v30 .actions img,.ui-v30 .hero-basic-skills img,.hero-atlas-skills img,.style-preview-controls img{border-radius:50%}
.ui-v30 #hud #pcHotbar button:disabled{opacity:.45}
.ui-v30 #hud #pcHotbar button.ready{border-color:#ffe4a3;box-shadow:0 0 9px #ffd34c66}
.ui-v30 #hud .actions #skill:after{background:none;mask:none;-webkit-mask:none}
.ui-v30 #hud .hero-panel{gap:0}
.ui-v30 #hud #appTop button{touch-action:manipulation}
.ui-v30 #modal[data-panel=heroMap] #modalBody,.ui-v30 #modal[data-panel=styleShop] #modalBody{flex:1;min-height:0}
.style-product-art{background-image:url('assets/ui-v30/shop-approved.png');background-repeat:no-repeat}
.style-product-art[data-product=heroic-single]{background-size:503.61% 437.67%;background-position:68.81% 19.83%}
.style-product-art[data-product=heroic-all]{background-size:449.46% 437.67%;background-position:97.77% 19.83%}
.style-product-art[data-product=legendary-single]{background-size:503.61% 418.22%;background-position:68.81% 68.58%}
.style-product-art[data-product=legendary-all]{background-size:449.46% 418.22%;background-position:97.77% 68.58%}
@media(min-width:701px) and (max-width:1100px){
 .ui-v30:not(.app-mobile) #hud #pcHotbar button{width:42px;height:42px;min-width:42px}
 .ui-v30:not(.app-mobile) #hud #pcHotbar img{width:38px;height:38px}
 .ui-v30:not(.app-mobile) #hud .actions{bottom:calc(var(--v30-safe-b) + 82px)}
 .ui-v30:not(.app-mobile) #hud .hero-panel{width:260px}
}

/* The active portrait remains at top left; statuses belong below its HP/XP. */
.ui-v30 #hud #heroStatuses{top:calc(100% + 4px);bottom:auto;left:0;flex-wrap:nowrap;max-width:245px}
.ui-v30 #hud #heroStatuses .combat-status{flex:none}
.ui-v30.app-mobile.combat-has-status:not(.app-home) #hud #mobileQuestGroup{top:calc(var(--v30-safe-t) + 84px)}

/* v38: long names and translated copy wrap inside their grid cell. */
.ui-v30 .local-place{grid-template-columns:30px minmax(0,1fr) auto;gap:9px;align-items:center}
.ui-v30 .local-place>div,.ui-v30 .story-copy,.ui-v30 .kingdom-detail-main{min-width:0;overflow-wrap:anywhere}
.ui-v30 .local-place strong{display:flex;flex-wrap:wrap;align-items:center;gap:5px;line-height:1.45}
.ui-v30 .local-place button{white-space:normal;line-height:1.4;max-width:120px}
.ui-v30 .local-pin-number.hero-available{background:#73dcff;color:#09262e;border-color:#a6eaff}
.ui-v30 .hero-pin-legend{display:block;color:#9ae3ff;line-height:1.6;margin-top:5px}
.ui-v30 #hud .quest p,.ui-v30 #hud .quest strong{overflow-wrap:anywhere;line-height:1.5}
.ui-v30 #hud .quest-travel span{min-width:0;white-space:normal;line-height:1.4}
.ui-v30 .story-lines p{line-height:1.65;overflow-wrap:anywhere}
.ui-v30.app-mobile .local-place{grid-template-columns:25px minmax(0,1fr) auto;gap:6px}
.ui-v30.app-mobile .local-place button{font-size:10px;max-width:88px;min-height:34px;padding:5px 7px}
.ui-v30.app-mobile .local-map-caption{font-size:10px;line-height:1.5}
.ui-v30.app-mobile .story-copy{gap:8px}
.ui-v30.app-mobile .story-lines p{margin:5px 0;font-size:12px;line-height:1.6}
/* v39: engraved status emblems, hourglass duration; no noisy second counters. */
.ui-v30 #hud .combat-status.status-badge{position:relative;display:block;box-sizing:border-box;width:34px;height:34px;min-width:34px;min-height:34px;padding:5px 10px 5px 4px;border:1px solid #b99761;border-radius:7px;background:linear-gradient(145deg,#283734,#0c171e 68%);color:var(--status-color);box-shadow:inset 0 0 0 2px #101a1b,inset 0 1px 4px #e9cc8b35,0 2px 4px #0007}
.ui-v30 #hud .status-emblem{display:block;width:21px;height:23px;filter:drop-shadow(0 1px 1px #000)}
.ui-v30 #hud .status-hourglass{position:absolute;right:2px;top:7px;width:7px;height:18px;color:#e5c990;opacity:.92}
.ui-v30 #hud .status-lasting{position:absolute;right:3px;bottom:5px;width:3px;height:3px;background:#edd49a;transform:rotate(45deg)}
.ui-v30 #hud .status-overflow{width:26px;min-width:26px;padding:0;border-color:#b99761;color:#e5c990;font-size:20px}
.ui-v30.app-mobile #hud .combat-status.status-badge{width:28px;height:28px;min-width:28px;min-height:28px;border-radius:6px;padding:4px 8px 4px 3px}
.ui-v30.app-mobile #hud .status-emblem{width:18px;height:19px}
.ui-v30.app-mobile #hud .status-hourglass{top:5px;right:1px;width:6px;height:16px}

.ui-v30 .status-detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.ui-v30 .status-detail{display:flex;align-items:center;gap:12px;min-width:0;padding:14px;border:1px solid #8e77504d;border-radius:10px;background:linear-gradient(135deg,#24302d,#101d22);box-shadow:inset 0 1px #f7d69313}
.ui-v30 .status-detail>div{flex:1;min-width:0}.ui-v30 .status-detail b{color:#f2dfb4;font-size:14px}.ui-v30 .status-detail p{margin:5px 0;color:#c1d1ce;font-size:12px;line-height:1.5}.ui-v30 .status-detail small{color:#9fcece}
.ui-v30 .status-detail-icon{display:grid;place-items:center;width:36px;height:40px;flex:none;color:var(--status-color)}.ui-v30 .status-detail-icon svg{width:30px;height:30px}
.ui-v30 .status-detail>.status-hourglass{width:12px;height:26px;flex:none;color:#d7ba7e}
.ui-v30.app-mobile .status-detail{padding:10px;gap:8px}.ui-v30.app-mobile .status-detail-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:7px}