/* Touch layouts are selected by input and orientation, including wide phones. */
#mobileBattleDetails[hidden]{display:none!important}
/* The details summary sits above the battle HUD, but below every modal screen. */
#hud[inert] #mobileBattleDetails{visibility:hidden}
@media(pointer:coarse), (max-width:760px){
 #hud{--touch-left:max(8px,env(safe-area-inset-left));--touch-right:max(8px,env(safe-area-inset-right));--touch-top:max(8px,env(safe-area-inset-top));--touch-bottom:max(12px,env(safe-area-inset-bottom));height:var(--battle-height,100dvh);bottom:auto}
 #world{height:var(--battle-height,100dvh)}
 #hud .top-hud{grid-template-columns:minmax(0,1fr) 100px;gap:6px;padding:var(--touch-top) var(--touch-right) 0 var(--touch-left);background:none}
 #hud .top-hud>.player-card{width:100%;max-width:260px;padding:7px 8px;gap:7px;border-image-width:8px;min-height:62px}
 #hud .player-seal{width:32px;height:38px;min-width:32px;flex:none;font-size:20px}
 #hud .player-info{min-width:0}
 #hud .name-line{gap:4px;margin-bottom:4px;line-height:14px}
 #hud .name-line strong{font-size:12px;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #hud .name-line>span{font-size:9px;white-space:nowrap}
 #hud .hp{height:12px}
 #hud .qi-line{margin-top:4px;gap:4px;line-height:10px}
 #hud .top-hud>.hud-actions{grid-row:1;grid-column:2;align-self:start;justify-self:end;display:block}
 #hud #pause{width:46px;min-width:46px;height:44px;min-height:44px;padding:5px;font-size:11px;border-image-width:8px;display:flex;align-items:center;justify-content:center;gap:2px}
 #hud #pause svg{display:none}
 #hud #pause span{white-space:nowrap}
 #hud .mission-hud{grid-column:1/-1;grid-row:2;gap:4px}
 #hud .mission-hud .journey{padding:6px 10px;gap:2px 8px;border-image-width:8px;border-radius:7px}
 #hud #chapter{font-size:13px;line-height:18px;letter-spacing:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 #hud #time{font-size:16px;line-height:18px}
 #hud #objective{font-size:11px;line-height:16px;padding-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #hud .mission-hud .boss-hud{padding:4px 8px;border-radius:5px}
 #hud .mission-hud .boss-hud>div:first-child{font-size:12px;line-height:16px;margin-bottom:3px}
 #hud .mission-hud .boss-hud small{font-size:10px}
 #hud .boss-hud .bar{height:5px}
 #hud .hud-tools{left:var(--touch-left);right:var(--touch-right);top:calc(var(--top-hud-bottom,120px) + 4px);gap:5px;justify-content:flex-end}
 #hud .hud-tools>.gear-battle-actions{flex:0 1 auto;display:flex;flex-direction:row;gap:5px;max-width:100%}
 #hud .gear-battle-actions button{width:auto;min-width:56px;max-width:130px;min-height:44px;padding:6px 8px;font-size:11px;line-height:14px;border-image-width:7px;flex:none}
 #hud .gear-battle-actions .gear-icon{width:22px;height:22px}
 #hud .bottom-hud{left:auto;right:var(--touch-right);bottom:var(--touch-bottom);height:auto;min-height:0;display:block;width:auto}
 #hud .bottom-hud>.stance{display:none}
 body[data-character] #hud .skills{display:grid;grid-template-columns:repeat(2,64px);gap:5px;padding:5px;border-image-width:8px;border-radius:10px}
 body[data-character] #hud .skills .skill{width:64px;min-width:0;height:64px;min-height:64px;margin:0;padding:5px 3px!important;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:2px;border-radius:9px}
 body[data-character] #hud .skills .skill .skill-icon,body[data-character] #hud .skills .skill .utility-icon{position:static!important;transform:none;width:32px!important;height:32px!important;max-width:32px;max-height:32px;margin:0!important;flex:none}
 body[data-character] #hud .skills .skill strong{font-size:10px;line-height:14px;letter-spacing:0;margin:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 body[data-character] #hud .skills .skill small,body[data-character] #hud .skills .skill kbd{display:none}
 #hud .joystick{left:calc(var(--touch-left) + 10px);bottom:calc(var(--touch-bottom) + 18px);width:100px;height:100px;margin:0}
 #hud .joystick>div{left:29px;top:29px;width:42px;height:42px}
 #hud .joystick>span{bottom:-17px;font-size:10px}
 #hud .combo-hint{top:auto;bottom:calc(var(--touch-bottom) + 155px);left:50%;max-width:calc(100% - 24px);font-size:11px;line-height:16px;white-space:normal;padding:4px 8px;pointer-events:none}
 #hud .combo-hint:not(.active){padding:0}
 #hud .battle-status:empty{display:none}
 body #hud .battle-status{position:static!important;inset:auto!important;transform:none!important;width:auto;max-width:none}
 #hud #fourParty,#hud #remainingParty{position:absolute;left:var(--touch-left);bottom:calc(var(--touch-bottom) + 135px);width:148px;max-width:148px;padding:4px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;font-size:10px}
 #hud #fourParty button,#hud #remainingParty button{min-width:0;min-height:40px;padding:3px;font-size:11px;line-height:14px;white-space:normal}
 #hud #fourParty>span,#hud #remainingParty>span{grid-column:1/-1;font-size:10px;white-space:normal}
 #hud #fourParty[hidden],#hud #remainingParty[hidden]{display:none}
 #mobileBattleDetails{position:absolute;top:var(--touch-top);right:calc(var(--touch-right) + 52px);z-index:30;pointer-events:auto;color:#4c543e}
 #mobileBattleDetails>summary{list-style:none;display:grid;place-items:center;width:44px;height:44px;font-size:11px;border:1px solid #bba775;border-radius:8px;background:#fff4d9;cursor:pointer;touch-action:manipulation}
 #mobileBattleDetails>summary::-webkit-details-marker{display:none}
 #mobileBattleDetails[open]>summary{background:#f5d982}
 #mobileBattleDetails>.mobile-battle-details-body{position:absolute;top:49px;right:-52px;width:min(330px,calc(100vw - 24px));max-height:calc(var(--battle-height,100dvh) - 140px);overflow:auto;overscroll-behavior:contain;padding:12px;display:flex;flex-direction:column;gap:10px;background:#fff7e9;border:1px solid #bba775;border-radius:9px;box-shadow:0 4px 18px #28382b55}
 #mobileBattleDetails:not([open])>.mobile-battle-details-body{display:none}
 #hud #mobileBattleDetails :is(.run-status,.kill-count,.build,.combat-note,.target-info,.equipment-status,.combat-readout,.training-tools){position:static!important;inset:auto!important;transform:none!important;width:100%;max-width:100%;margin:0;font-size:12px;line-height:1.6;white-space:normal;pointer-events:auto}
 #hud #mobileBattleDetails .build{padding:8px;border-image-width:7px;display:block}
 #hud #mobileBattleDetails .build p{margin:0 0 6px}
 #hud #mobileBattleDetails #buildList{display:flex;max-height:none;flex-direction:column}
 #hud #mobileBattleDetails .combat-readout{display:grid;gap:8px}
 #hud #mobileBattleDetails .reserve-skills,#hud #mobileBattleDetails .combo-windows{display:flex;flex-wrap:wrap}
 #hud #mobileBattleDetails [hidden]{display:none!important}
 #hud #qixiuParty{left:var(--touch-left);top:auto;bottom:calc(var(--touch-bottom) + 135px);width:120px;max-height:155px;overflow:auto;padding:4px;font-size:10px}
 #hud #qixiuParty>button{min-height:40px;padding:3px;margin-top:3px;gap:2px}
 #hud #qixiuParty small{display:none}
 body.playing .toast{top:45%;max-width:calc(100vw - 40px);white-space:normal;font-size:12px;line-height:1.5;text-align:center;padding:7px 10px;pointer-events:none}
 body.playing #resourceNotice{bottom:auto;top:45%;max-width:calc(100vw - 24px);font-size:12px}
}
@media(pointer:coarse) and (orientation:landscape), (max-width:760px) and (orientation:landscape){
 #hud .top-hud{grid-template-columns:180px minmax(0,1fr) 100px;gap:10px}
 #hud .mission-hud{grid-column:2;grid-row:1}
 #hud .top-hud>.hud-actions{grid-column:3}
 #hud .mission-hud .journey{grid-template-columns:minmax(0,1fr) auto;padding:4px 8px}
 #hud #objective{font-size:10px;line-height:13px}
 #hud .mission-hud .boss-hud{padding:3px 8px}
 #hud .mission-hud .boss-hud>div:first-child{font-size:11px;line-height:13px;margin-bottom:2px}
 #hud .hud-tools{top:calc(var(--touch-top) + 48px);left:auto;width:100px}
 #hud .hud-tools>.gear-battle-actions{display:grid;grid-template-columns:repeat(2,1fr);width:100px;gap:4px}
 #hud .gear-battle-actions button{min-width:0;width:48px;min-height:40px;padding:4px;font-size:10px}
 #hud #interactSite{position:fixed;top:calc(var(--top-hud-bottom,86px) + 4px);right:calc(var(--touch-right) + 112px);width:100px}
 body[data-character] #hud .skills{grid-template-columns:repeat(2,56px);gap:4px;padding:4px}
 body[data-character] #hud .skills .skill{width:56px;height:56px;min-height:56px;padding:3px!important}
 body[data-character] #hud .skills .skill .skill-icon,body[data-character] #hud .skills .skill .utility-icon{width:28px!important;height:28px!important}
 #hud .joystick{width:88px;height:88px;bottom:calc(var(--touch-bottom) + 10px)}
 #hud .joystick>div{left:25px;top:25px;width:38px;height:38px}
 #hud .combo-hint{bottom:calc(var(--touch-bottom) + 8px);max-width:calc(100% - 300px)}
 #hud #qixiuParty{left:calc(var(--touch-left) + 110px);bottom:var(--touch-bottom);max-height:128px;width:112px}
 #hud #fourParty,#hud #remainingParty{left:calc(var(--touch-left) + 110px);bottom:var(--touch-bottom)}
}