/* Desktop keeps style.css unchanged. These rules only affect the selected mobile HUD. */
#utilityActions{display:contents}#mobileMenu,.layoutSetting.utilityLayout{display:none}
.layoutSetting{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0;color:#efdfb8;font-size:14px}.layoutSetting select{font:inherit;min-height:44px;padding:8px 12px;border:1px solid #a99b70;background:#163325;color:#fff4d6;border-radius:5px}.layoutNote{font-size:12px!important}
:root[data-layout="mobile"]{--hud-bottom:max(8px,env(safe-area-inset-bottom));--hud-left:max(10px,env(safe-area-inset-left));--hud-right:max(10px,env(safe-area-inset-right));--hud-top:max(6px,env(safe-area-inset-top))}
:root[data-layout="mobile"] header{inset:var(--hud-top) var(--hud-right) auto var(--hud-left);height:52px;gap:6px;z-index:30;align-items:flex-start}
:root[data-layout="mobile"] .brand{display:none}
:root[data-layout="mobile"] .wave{position:static;transform:none;text-align:left;width:auto;min-width:0;max-width:calc(100% - 148px)}
:root[data-layout="mobile"] .wave strong{font:18px/1.2 Georgia;letter-spacing:1px;margin:0}
:root[data-layout="mobile"] .wave>small,:root[data-layout="mobile"] .wave #journey{display:none}
:root[data-layout="mobile"] .wave>span{display:block;font:12px/1.3 system-ui;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root[data-layout="mobile"] .waveTrack{width:100%;max-width:150px;margin:4px 0}
:root[data-layout="mobile"] .topActions{margin:0 0 0 auto;display:flex;flex-wrap:nowrap;max-width:none;gap:4px;align-items:flex-start}
:root[data-layout="mobile"] .gold{font-size:12px;white-space:nowrap;margin:5px 3px 0 0}
:root[data-layout="mobile"] .gold b{font-size:17px}:root[data-layout="mobile"] .gold small{display:none}
:root[data-layout="mobile"] #pause,:root[data-layout="mobile"] #mobileMenu{display:block;min-width:44px;min-height:44px;padding:4px;font-size:14px}
:root[data-layout="mobile"] #utilityActions{display:none}
:root[data-layout="mobile"] #utilityActions.is-open{display:grid;grid-template-columns:1fr 1fr;position:absolute;top:48px;right:0;width:240px;padding:10px;gap:8px;background:#173225fa;border:1px solid #e2c779;border-radius:8px;box-shadow:0 4px 20px #0008}
:root[data-layout="mobile"] #utilityActions button{min-height:44px;font-size:14px;padding:8px}
:root[data-layout="mobile"] .utilityLayout{display:flex;grid-column:1/-1;margin:0}
:root[data-layout="mobile"] footer{position:fixed;inset:auto var(--hud-right) var(--hud-bottom) var(--hud-left);display:block;padding:0;margin:0;pointer-events:none;z-index:20}
:root[data-layout="mobile"] footer button{pointer-events:auto}
:root[data-layout="mobile"] .movePanel{width:min(240px,calc(100vw - 166px - env(safe-area-inset-left) - env(safe-area-inset-right)));margin:0 0 0 auto;flex:none}
:root[data-layout="mobile"] .abilities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;width:100%;margin:0}
:root[data-layout="mobile"] .abilities button{position:relative;min-width:0;max-width:none;min-height:52px;padding:5px 2px;text-align:center;border-radius:9px;background:#173629ed;line-height:1.2}
:root[data-layout="mobile"] .abilities button::before{content:attr(data-mobile-label);display:block;font:600 13px/1.2 system-ui;color:#f4e7bd}
:root[data-layout="mobile"] .abilities strong,:root[data-layout="mobile"] .abilities kbd{display:none}
:root[data-layout="mobile"] .abilities small{display:block;margin:4px 0 0;font:11px/1.2 system-ui;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root[data-layout="mobile"] .jumpGuide,:root[data-layout="mobile"] .tips{display:none}
:root[data-layout="mobile"] .crewPanel{position:fixed;inset:auto var(--hud-right) calc(var(--hud-bottom) + 155px) var(--hud-left);display:flex;flex-direction:row;align-items:center;gap:6px;min-width:0;max-width:360px;margin:0;pointer-events:none}
:root[data-layout="mobile"] .crewPanel .party{position:static;width:auto;flex:1;min-width:0;max-width:240px;padding:6px 9px;margin:0;gap:0}
:root[data-layout="mobile"] .portraits,:root[data-layout="mobile"] #role{display:none}
:root[data-layout="mobile"] .crewPanel .vitals{width:100%}
:root[data-layout="mobile"] .vitals strong{font-size:12px;letter-spacing:1px}
:root[data-layout="mobile"] .vitals small{font-size:11px}
:root[data-layout="mobile"] .health{height:7px;margin:3px 0}
:root[data-layout="mobile"] #switchHero{width:76px;min-height:48px;padding:6px;font-size:0;pointer-events:auto}
:root[data-layout="mobile"] #switchHero::after{content:'⇄ Switch';font:13px system-ui}
:root[data-layout="mobile"] #switchHero kbd,:root[data-layout="mobile"] #switchLabel{display:none}
:root[data-layout="mobile"] #touch{display:flex;flex-direction:column;gap:5px;position:fixed;left:var(--hud-left);bottom:var(--hud-bottom);margin:0;z-index:21;width:140px}
:root[data-layout="mobile"] .dpad{grid-template-columns:repeat(3,44px);gap:4px}
:root[data-layout="mobile"] .dpad button{height:44px;min-height:44px;font-size:20px}
:root[data-layout="mobile"] #pie{width:92px;min-height:44px;padding:4px;margin:0;align-self:center}
:root[data-layout="mobile"] #pie b{font-size:0}:root[data-layout="mobile"] #pie b::after{content:'Jump';font:600 13px system-ui}
:root[data-layout="mobile"] #pie small{font-size:11px}
:root[data-layout="mobile"] #tacticalMap{top:calc(var(--hud-top) + 57px);right:var(--hud-right);width:76px;border-radius:8px;z-index:13}
:root[data-layout="mobile"] #tacticalMap.minimised{width:76px}
:root[data-layout="mobile"] #mapToggle{min-height:44px;font-size:0;padding:4px;letter-spacing:0}
:root[data-layout="mobile"] #mapToggle::after{content:'↑ Map −';font:12px system-ui}
:root[data-layout="mobile"] #tacticalMap.minimised #mapToggle::after{content:'↑ Map +'}
:root[data-layout="mobile"] #mapCanvas{width:76px;height:95px;max-height:none;object-fit:contain}
:root[data-layout="mobile"] #bossHud{top:calc(var(--hud-top) + 60px);left:var(--hud-left);transform:none;width:calc(100vw - 112px - env(safe-area-inset-left) - env(safe-area-inset-right));max-width:360px;padding:5px 8px;font-size:12px}
:root[data-layout="mobile"] #bossNumbers{display:none}
:root[data-layout="mobile"] #berryBuffs{top:calc(var(--hud-top) + 116px);left:var(--hud-left);transform:none;max-width:calc(100vw - 112px);max-height:62px;overflow:auto;padding:4px 6px;font-size:11px;text-align:left;background:#192836c9}
:root[data-layout="mobile"] #buff{top:auto;bottom:calc(var(--hud-bottom) + 218px);left:var(--hud-left);right:auto;font-size:11px}
:root[data-layout="mobile"] #banter{bottom:calc(var(--hud-bottom) + 240px);left:8%;right:8%;font-size:14px;max-height:66px;overflow:hidden}
:root[data-layout="mobile"] #banner{top:36%;font-size:25px;padding:0 12px}
:root[data-layout="mobile"] #toast{top:auto;bottom:calc(var(--hud-bottom) + 216px);font-size:13px;max-width:90%;z-index:25}
:root[data-layout="mobile"] .overlay{padding:12px;align-items:flex-start}
:root[data-layout="mobile"] .overlay>.panel,:root[data-layout="mobile"] .startCard{margin:auto;max-height:calc(100dvh - 24px);overflow:auto}
:root[data-layout="mobile"] .startCard{display:block;max-width:540px}:root[data-layout="mobile"] .introArt{display:none}
:root[data-layout="mobile"] .introCopy{padding:22px}:root[data-layout="mobile"] .introCopy h1{font-size:52px}
:root[data-layout="mobile"] .panel{padding:20px}
:root[data-layout="mobile"] #campPrompt small{display:none}
@media(orientation:landscape){
 :root[data-layout="mobile"] .crewPanel{left:calc(var(--hud-left) + 152px);right:calc(var(--hud-right) + 250px);bottom:var(--hud-bottom);max-width:340px}
 :root[data-layout="mobile"] .crewPanel .party{max-width:210px}
 :root[data-layout="mobile"] .movePanel{width:240px}
 :root[data-layout="mobile"] #banter{bottom:calc(var(--hud-bottom) + 66px);left:24%;right:34%;font-size:13px;max-height:58px}
 :root[data-layout="mobile"] #buff{bottom:calc(var(--hud-bottom) + 56px);left:calc(var(--hud-left) + 150px)}
 :root[data-layout="mobile"] #berryBuffs{top:calc(var(--hud-top) + 54px);left:26%;max-width:42%;max-height:48px}
 :root[data-layout="mobile"] #bossHud{top:calc(var(--hud-top) + 52px);width:23%;font-size:12px}
 :root[data-layout="mobile"] #tacticalMap{top:calc(var(--hud-top) + 49px);width:64px}
 :root[data-layout="mobile"] #mapCanvas{width:64px;height:80px}
 :root[data-layout="mobile"] #toast{bottom:calc(var(--hud-bottom) + 120px);max-width:55%}
}
@media(orientation:landscape) and (max-width:700px){
 :root[data-layout="mobile"] .movePanel{width:198px}
 :root[data-layout="mobile"] .crewPanel{right:calc(var(--hud-right) + 204px);gap:4px}
 :root[data-layout="mobile"] #switchHero{width:48px;flex-shrink:0}
 :root[data-layout="mobile"] #switchHero::after{content:'⇄';font-size:22px}
 :root[data-layout="mobile"] .crewPanel .party{padding:5px;min-width:70px}
 :root[data-layout="mobile"] #hp{font-size:10px}
}

@media(orientation:landscape) and (max-height:340px){:root[data-layout="mobile"] #mapCanvas{width:40px;height:50px;margin:0 auto}:root[data-layout="mobile"] #banter{max-height:38px;font-size:12px}}

:root[data-layout="mobile"] .abilities small{display:none}:root[data-layout="mobile"] .abilities button::after{content:attr(data-mobile-hint);display:block;margin-top:4px;font:11px/1.2 system-ui;color:#cedac8}


/* View-only camera controls; movement pad and ability hit targets stay separate. */
#cameraPad{display:none}
:root[data-layout="mobile"] #cameraPad:not(.hidden){display:grid;grid-template-columns:repeat(3,40px);grid-template-rows:14px 40px 40px;gap:3px;position:fixed;right:var(--hud-right);top:calc(var(--hud-top) + 206px);z-index:22;opacity:.78;touch-action:none;user-select:none}
#cameraPad small{grid-column:1/-1;text-align:center;font:11px system-ui;letter-spacing:2px;color:#f0e3bd;text-shadow:0 1px 3px #000}
#cameraPad button{padding:0;min-width:0;min-height:40px;font:22px system-ui;background:#152c23b8;border:1px solid #c9bd8d99;border-radius:8px;touch-action:none}
#cameraPad button:active{background:#507459e6}#cameraUp{grid-column:2;grid-row:2}#cameraLeft{grid-column:1;grid-row:3}#cameraDown{grid-column:2;grid-row:3}#cameraRight{grid-column:3;grid-row:3}
:root[data-layout="mobile"] .crewPanel .party{display:flex;align-items:center;gap:7px;max-width:none;padding:5px 7px}
:root[data-layout="mobile"] .crewPanel .portraits{display:flex;gap:4px;flex:none;pointer-events:auto}
:root[data-layout="mobile"] .crewPanel .portrait{display:block;width:36px;height:auto;aspect-ratio:44/54;flex:none;opacity:.55;touch-action:manipulation}
:root[data-layout="mobile"] .crewPanel .portrait.selected{opacity:1;box-shadow:0 0 0 1px #f4d989,0 0 9px #ffe39755}
:root[data-layout="mobile"] .portrait span{display:none}
:root[data-layout="mobile"] .crewPanel .vitals{min-width:0;width:auto;flex:1}
:root[data-layout="mobile"] #hero{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root[data-layout="mobile"] #switchHero{width:52px;flex:none}
:root[data-layout="mobile"] #switchHero::after{content:'⇄';font-size:22px}
@media(orientation:landscape){
 :root[data-layout="mobile"] .crewPanel{inset:calc(var(--hud-top) + 52px) auto auto var(--hud-left);width:260px;max-width:calc(100vw - 230px)}
 :root[data-layout="mobile"] #cameraPad:not(.hidden){top:calc(var(--hud-top) + 48px)}
 :root[data-layout="mobile"] #tacticalMap{right:calc(var(--hud-right) + 138px)}
 :root[data-layout="mobile"] #bossHud{top:calc(var(--hud-top) + 110px);width:225px;max-width:calc(100vw - 238px)}
 :root[data-layout="mobile"] #berryBuffs{top:calc(var(--hud-top) + 153px);left:calc(var(--hud-left) + 150px);max-width:calc(100vw - 420px);max-height:40px}
 :root[data-layout="mobile"] #banter{left:28%;right:28%;bottom:calc(var(--hud-bottom) + 72px)}
}
@media(orientation:landscape) and (max-height:340px){
 :root[data-layout="mobile"] .abilities button{min-height:44px}
 :root[data-layout="mobile"] #mapCanvas{display:none}
 :root[data-layout="mobile"] #berryBuffs{top:calc(var(--hud-top) + 153px);max-height:28px}
}
@media(orientation:portrait) and (max-height:620px){
 :root[data-layout="mobile"] #cameraPad:not(.hidden){top:calc(var(--hud-top) + 110px)}
 :root[data-layout="mobile"] #mapCanvas{display:none}
 :root[data-layout="mobile"] #banter{left:10px;right:145px;bottom:calc(var(--hud-bottom) + 234px)}
}
@media(orientation:portrait){
 :root[data-layout="mobile"] #berryBuffs,:root[data-layout="mobile"] #bossHud{max-width:calc(100vw - 158px)}
}
@media(orientation:portrait) and (max-height:640px){
 :root[data-layout="mobile"] #banter{left:10px;right:145px}
}
/* Scoped gesture protection: menus and reading panels keep normal browser gestures. */
#world,#touch,#cameraPad,footer,header{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#world,#touch,#cameraPad,footer button,header button{touch-action:none}
#touch img,footer img,header img{-webkit-user-drag:none}
.joystick{display:none;position:relative;border:1px solid #d4c08b88;border-radius:50%;background:radial-gradient(circle,#26443590 0 35%,#122b2070 36% 66%,#d2c08a33 67% 69%,#122b2060 70%);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overscroll-behavior:contain}
.stickHandle{position:absolute;width:38%;height:38%;left:31%;top:31%;border-radius:50%;border:1px solid #d8c892c9;background:#b5c5a18a;box-shadow:0 2px 10px #0005;pointer-events:none}
.joystick small{position:absolute;bottom:8%;width:100%;text-align:center;pointer-events:none;color:#f0e3bd;font:10px system-ui;letter-spacing:1px;text-shadow:0 1px 3px #000}
.joystick.held{border-color:#f6dea8;background-color:#31534270}.joystick.held .stickHandle{background:#d3ddbeaa}
:root[data-layout="mobile"] .joystick{display:block;width:124px;height:124px;flex:none}
:root[data-layout="mobile"] #touch{width:140px;align-items:center;gap:5px}
:root[data-layout="mobile"] #touch.touchInactive{display:none}
:root[data-layout="mobile"] #cameraPad:not(.hidden){display:block;width:94px;height:94px;opacity:.7;top:calc(var(--hud-top) + 206px)}
:root[data-layout="mobile"] #lookStick{width:94px;height:94px}
:root[data-layout="mobile"] #cameraPad small{grid-column:auto;font-size:10px;letter-spacing:1px}
:root[data-layout="mobile"] #cameraPad:has(.held){opacity:.95}
@media(orientation:landscape){:root[data-layout="mobile"] #cameraPad:not(.hidden){top:calc(var(--hud-top) + 48px)}}
@media(orientation:portrait) and (max-height:620px){:root[data-layout="mobile"] #cameraPad:not(.hidden){top:calc(var(--hud-top) + 110px)}}
@media(orientation:landscape) and (max-height:340px){:root[data-layout="mobile"] #moveStick{width:104px;height:104px}:root[data-layout="mobile"] #lookStick,:root[data-layout="mobile"] #cameraPad:not(.hidden){width:82px;height:82px}}
@media(orientation:portrait){
 :root[data-layout="mobile"] .crewPanel{bottom:calc(var(--hud-bottom) + 190px)}
 :root[data-layout="mobile"] #banter{bottom:calc(var(--hud-bottom) + 260px)}
 :root[data-layout="mobile"] #buff{bottom:calc(var(--hud-bottom) + 252px)}
 :root[data-layout="mobile"] #toast{bottom:calc(var(--hud-bottom) + 255px)}
}

/* Reserve separate lanes for captions, the right-hand compass and camera stick. */
:root[data-layout="mobile"] #banter{z-index:31;padding:7px 10px;background:#10271ee8;border-radius:6px;text-align:center;overflow:auto;max-height:100px;line-height:1.4;pointer-events:auto;touch-action:pan-y}
:root[data-layout="mobile"] #banter:empty{display:none}
@media(orientation:landscape){
 :root[data-layout="mobile"] #tacticalMap{right:var(--hud-right);top:calc(var(--hud-top) + 152px);width:64px;z-index:23}
 :root[data-layout="mobile"] #mapToggle{min-height:28px;height:28px;padding:2px}
 :root[data-layout="mobile"] #mapCanvas{display:block;width:48px;height:60px;margin:0 auto}
 :root[data-layout="mobile"] #bossHud{top:calc(var(--hud-top) + 52px);left:calc(var(--hud-left) + 270px);width:calc(100vw - 390px - env(safe-area-inset-left) - env(safe-area-inset-right));max-width:360px}
 :root[data-layout="mobile"] #banter{top:calc(var(--hud-top) + 112px);bottom:auto;left:calc(var(--hud-left) + 150px);right:calc(var(--hud-right) + 104px);font-size:14px;max-height:min(96px,calc(100dvh - 246px))}
 :root[data-layout="mobile"] #berryBuffs{top:auto;bottom:calc(var(--hud-bottom) + 8px);left:calc(var(--hud-left) + 150px);max-width:calc(100vw - 420px);max-height:50px}
}
@media(orientation:landscape) and (max-height:400px){
 :root[data-layout="mobile"] #lookStick,:root[data-layout="mobile"] #cameraPad:not(.hidden){width:82px;height:82px}
 :root[data-layout="mobile"] #tacticalMap{top:calc(var(--hud-top) + 138px)}
 :root[data-layout="mobile"] #mapCanvas{display:block;width:36px;height:45px}
}
@media(orientation:portrait){
 :root[data-layout="mobile"] #banter{left:var(--hud-left);right:calc(var(--hud-right) + 104px);bottom:calc(var(--hud-bottom) + 260px);font-size:14px;max-height:100px}
}

@media(orientation:landscape){:root[data-layout="mobile"] .openingCaption{left:calc(var(--hud-left) + 150px);right:calc(var(--hud-right) + 104px);width:auto;transform:none;bottom:20px}:root[data-layout="mobile"] #tacticalMap.minimised{width:64px}}
/* Very short browser viewports keep the compass beside LOOK instead of over abilities. */
@media(orientation:landscape) and (max-height:340px){
 :root[data-layout="mobile"] #tacticalMap,:root[data-layout="mobile"] #tacticalMap.minimised{top:calc(var(--hud-top) + 48px);right:calc(var(--hud-right) + 94px);width:50px}
 :root[data-layout="mobile"] #mapCanvas{display:block;width:32px;height:40px}
 :root[data-layout="mobile"] #bossHud{top:calc(var(--hud-top) + 94px);left:var(--hud-left);width:140px;max-width:140px}
 :root[data-layout="mobile"] #banter{top:calc(var(--hud-top) + 94px);right:calc(var(--hud-right) + 204px);max-height:min(96px,calc(100dvh - 184px));font-size:13px}
}

/* Mobile edge zones: portrait and landscape have separate arrangements. */
:root[data-layout="mobile"]{--move-size:104px;--look-size:72px;--ability-width:min(240px,calc(100vw - 154px - env(safe-area-inset-left) - env(safe-area-inset-right)))}
:root[data-layout="mobile"] .movePanel{width:var(--ability-width)}
:root[data-layout="mobile"] .abilities{gap:5px}
:root[data-layout="mobile"] .abilities button{height:52px;min-height:52px;border-radius:8px;padding:5px 2px}
:root[data-layout="mobile"] .abilities button::before{font-size:13px}
:root[data-layout="mobile"] .abilities button::after{font-size:12px;margin-top:4px}
:root[data-layout="mobile"] #duo{border-color:#cdb777;background:linear-gradient(135deg,#203f45e8,#392d4ce8)}
:root[data-layout="mobile"] .crewPanel{right:auto;max-width:none;gap:0;padding:6px;background:#102c23df;border:1px solid #aeaa7666;border-radius:8px;pointer-events:none}
:root[data-layout="mobile"] .crewPanel .party{padding:0;background:none;border:0;border-radius:0;min-width:0;max-width:none;gap:6px}
:root[data-layout="mobile"] .crewPanel .portraits{gap:5px}
:root[data-layout="mobile"] .crewPanel .portrait{width:44px;min-width:44px;height:48px;aspect-ratio:auto;border-radius:6px}
:root[data-layout="mobile"] .crewPanel #hero{font:600 12px/1.3 system-ui;letter-spacing:0}
:root[data-layout="mobile"] #hp{font:11px/1.3 system-ui;white-space:nowrap}
:root[data-layout="mobile"] #switchHero{display:none}
:root[data-layout="mobile"] #touch{width:var(--move-size);height:var(--move-size);display:block;left:var(--hud-left);bottom:var(--hud-bottom)}
:root[data-layout="mobile"] #touch.touchInactive{display:none}
:root[data-layout="mobile"] #moveStick{width:var(--move-size);height:var(--move-size)}
:root[data-layout="mobile"] #pie{position:absolute;left:76px;bottom:112px;width:58px;height:58px;min-height:58px;padding:3px;border-radius:50%;background:#18372cdd;border:1px solid #c5b98688}
:root[data-layout="mobile"] #pie b::after{font-size:13px}
:root[data-layout="mobile"] #pie small{display:block;font:10px/1.2 system-ui;white-space:nowrap}
:root[data-layout="mobile"] #cameraPad:not(.hidden){width:var(--look-size);height:var(--look-size);opacity:.48;right:var(--hud-right);transition:opacity .15s}
:root[data-layout="mobile"] #lookStick{width:var(--look-size);height:var(--look-size)}
:root[data-layout="mobile"] #cameraPad:has(.held){opacity:.95}
:root[data-layout="mobile"] #tacticalMap,:root[data-layout="mobile"] #tacticalMap.minimised{width:64px;right:var(--hud-right);border-radius:8px}
:root[data-layout="mobile"] #mapToggle{height:44px;min-height:44px;padding:2px}
:root[data-layout="mobile"] #mapCanvas{display:block;width:56px;height:70px;margin:0 auto}
:root[data-layout="mobile"] #tacticalMap.minimised #mapCanvas{display:none}
:root[data-layout="mobile"] #banter{width:auto;transform:none;padding:5px 8px;background:#10271e9c;font:13px/1.35 system-ui;border-radius:7px;text-align:center;max-height:56px;overflow:auto}
:root[data-layout="mobile"] #buff,:root[data-layout="mobile"] #berryBuffs{top:auto;right:auto;transform:none;padding:3px 7px;background:#19352ac9;border:1px solid #9ab49466;border-radius:12px;font:11px/1.3 system-ui;max-height:36px;overflow:auto;pointer-events:none}
:root[data-layout="mobile"] #buff:empty,:root[data-layout="mobile"] #berryBuffs:empty{display:none}
@media(orientation:portrait){
 :root[data-layout="mobile"] .crewPanel{left:var(--hud-left);top:auto;bottom:calc(var(--hud-bottom) + 182px);width:142px}
 :root[data-layout="mobile"] .crewPanel .party{display:flex;flex-direction:column;align-items:flex-start}
 :root[data-layout="mobile"] .crewPanel .vitals{width:100%}
 :root[data-layout="mobile"] #tacticalMap{top:calc(var(--hud-top) + 56px)}
 :root[data-layout="mobile"] #cameraPad:not(.hidden){top:calc(var(--hud-top) + 184px)}
 :root[data-layout="mobile"] #banter{top:calc(var(--hud-top) + 112px);bottom:auto;left:var(--hud-left);right:calc(var(--hud-right) + 84px);max-height:52px}
 :root[data-layout="mobile"] #bossHud{top:calc(var(--hud-top) + 58px);left:var(--hud-left);width:calc(100vw - 108px - env(safe-area-inset-left) - env(safe-area-inset-right));max-width:none}
 :root[data-layout="mobile"] #buff,:root[data-layout="mobile"] #berryBuffs{left:calc(var(--hud-left) + 148px);max-width:calc(100vw - 170px - env(safe-area-inset-left) - env(safe-area-inset-right))}
 :root[data-layout="mobile"] #buff{bottom:calc(var(--hud-bottom) + 118px)}
 :root[data-layout="mobile"] #berryBuffs{bottom:calc(var(--hud-bottom) + 160px)}
 :root[data-layout="mobile"] #toast{bottom:calc(var(--hud-bottom) + 290px);max-width:80%}
}
@media(orientation:landscape){
 :root[data-layout="mobile"]{--ability-width:222px}
 :root[data-layout="mobile"] .crewPanel{left:var(--hud-left);top:calc(var(--hud-top) + 54px);bottom:auto;width:202px}
 :root[data-layout="mobile"] .crewPanel .party{display:flex;flex-direction:row;align-items:center}
 :root[data-layout="mobile"] #hp{white-space:normal}
 :root[data-layout="mobile"] #pie{left:112px;bottom:4px}
 :root[data-layout="mobile"] #cameraPad:not(.hidden){top:calc(var(--hud-top) + 54px)}
 :root[data-layout="mobile"] #tacticalMap,:root[data-layout="mobile"] #tacticalMap.minimised{top:calc(var(--hud-top) + 54px);right:calc(var(--hud-right) + 82px)}
 :root[data-layout="mobile"] #banter{top:var(--hud-top);bottom:auto;left:calc(var(--hud-left) + 218px);right:calc(var(--hud-right) + 180px);max-width:430px;margin:0 auto;max-height:56px}
 :root[data-layout="mobile"] #bossHud{top:calc(var(--hud-top) + 66px);left:calc(var(--hud-left) + 218px);width:calc(100vw - 394px - env(safe-area-inset-left) - env(safe-area-inset-right));max-width:360px}
 :root[data-layout="mobile"] #buff,:root[data-layout="mobile"] #berryBuffs{left:calc(var(--hud-left) + 184px);max-width:calc(100vw - 438px - env(safe-area-inset-left) - env(safe-area-inset-right))}
 :root[data-layout="mobile"] #buff{bottom:calc(var(--hud-bottom) + 46px)}
 :root[data-layout="mobile"] #berryBuffs{bottom:calc(var(--hud-bottom) + 4px)}
 :root[data-layout="mobile"] #toast{bottom:calc(var(--hud-bottom) + 118px);max-width:45%}
}
@media(orientation:landscape) and (max-height:320px){
 :root[data-layout="mobile"]{--move-size:88px;--look-size:60px}
 :root[data-layout="mobile"] #mapCanvas{width:32px;height:40px}
 :root[data-layout="mobile"] #pie{left:96px}
}
@media(orientation:portrait) and (max-width:350px){
 :root[data-layout="mobile"]{--ability-width:calc(100vw - 138px - env(safe-area-inset-left) - env(safe-area-inset-right));--move-size:96px}
 :root[data-layout="mobile"] #pie{left:62px}
 :root[data-layout="mobile"] .abilities button::before{font-size:12px}
 :root[data-layout="mobile"] .wave>span{white-space:normal;font-size:11px}
}

:root[data-layout="mobile"] #fullscreenTop{display:block;min-width:44px;min-height:44px;padding:4px;font-size:16px}
:root[data-layout="mobile"] .wave{max-width:calc(100% - 198px)}
:root[data-layout="mobile"] #pie{border-color:#d9b06c;background:#413921ed;min-width:64px}
:root[data-layout="mobile"] #pie kbd,:root[data-layout="mobile"] #pie strong{display:none}
:root[data-layout="mobile"] #pie::before{content:'Eat Pie';font:600 12px system-ui}
:root[data-layout="mobile"] #pie small{display:block;font:11px system-ui;max-width:74px;white-space:normal}
:root[data-layout="mobile"] .abilities #jump{position:relative;inset:auto;min-width:0;margin:0;min-height:52px;border-color:#94cba8}