/* Compact landscape HUD: includes phones wider than the old 750px breakpoint. */
@media (orientation:landscape) and (max-height:600px) and (max-width:1100px){
 body.playing{--phone-left:max(12px,env(safe-area-inset-left));--phone-right:max(12px,env(safe-area-inset-right));--phone-bottom:max(24px,env(safe-area-inset-bottom))}
 body.playing #vitals{left:calc(var(--phone-left) + 6px)!important;top:8px!important;transform:scale(.72)!important;transform-origin:top left}
 body.playing #targetHud{left:calc(var(--phone-left) + 235px);top:8px;width:200px;height:53px;padding:6px 10px;box-sizing:border-box}
 body.playing #info,body.playing #messages{display:none!important}
 body.playing #hasteBuff{left:calc(var(--phone-left) + 235px);top:65px;padding:2px 6px;gap:3px}
 body.playing .hasteIcon{width:24px;height:24px}body.playing .hasteTime{font-size:10px}
 body.playing #bgmBtn{top:8px!important;right:var(--phone-right)!important;padding:8px!important;min-height:36px}
 body.playing #gameChat{left:var(--phone-left);top:80px;bottom:auto;width:224px;max-height:calc(100dvh - 94px);box-sizing:border-box;z-index:45}
 body.playing #gameChat header{padding:3px 7px;min-height:32px;box-sizing:border-box;gap:5px}
 body.playing #gameChat header strong{font-size:10px;letter-spacing:0}
 body.playing #chatToggle{width:40px;height:32px}
 body.playing #chatMessages{height:clamp(40px,18dvh,80px);padding:4px 8px;font-size:11px}
 body.playing #chatForm{padding:5px;gap:4px}body.playing #chatInput{font-size:16px;padding:5px;width:0}
 body.playing #chatForm button{padding:5px;min-width:40px}body.playing #chatHint{display:none}
 body.playing #adventureDock{left:50%;bottom:var(--phone-bottom);width:310px;min-height:48px;padding:3px 5px;gap:0}
 body.playing #adventureDock button{flex:1;min-width:0;height:44px;padding:2px 4px;font-size:9px;letter-spacing:0;white-space:nowrap}
 body.playing #adventureDock button b{font-size:18px;line-height:20px;margin-bottom:2px}body.playing #adventureDock button svg{width:18px;height:18px}
 body.playing .dockGold{min-width:44px;max-width:62px;padding-right:3px;font-size:9px;overflow:hidden;text-overflow:ellipsis}
 body.playing.townUIReady #pad{left:var(--phone-left);bottom:var(--phone-bottom);width:132px;height:132px}
 body.playing #pad .key{width:44px;height:44px;font-size:19px;border-width:1px}body.playing #up,body.playing #down{left:44px}body.playing #left,body.playing #right{top:44px}
 body.playing.townUIReady #sword{right:var(--phone-right)!important;bottom:var(--phone-bottom)!important;width:66px!important;height:66px!important;font-size:25px}
 body.playing .quickSlot{width:44px;height:44px}body.playing .quickSlot .itemIcon{width:34px;height:34px}
 body.playing .q0{right:calc(var(--phone-right) + 4px);bottom:calc(var(--phone-bottom) + 144px)}
 body.playing .q1{right:calc(var(--phone-right) + 56px);bottom:calc(var(--phone-bottom) + 123px)}
 body.playing .q2{right:calc(var(--phone-right) + 91px);bottom:calc(var(--phone-bottom) + 78px)}
 body.playing .q3{right:calc(var(--phone-right) + 96px);bottom:calc(var(--phone-bottom) + 25px)}
 body.playing #editQuick{right:var(--phone-right);bottom:calc(var(--phone-bottom) + 76px);min-height:36px;padding:4px 8px}
 body.playing #quickToast{right:var(--phone-right);bottom:calc(var(--phone-bottom) + 194px);max-width:230px;font-size:11px}
 body.playing #npcTalk{bottom:calc(var(--phone-bottom) + 60px);padding:9px 15px;font-size:11px}
 #townDialog{width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 24px);height:92dvh;max-height:94dvh}
 .townShell{grid-template-columns:28% 72%}.townContent{padding:14px}.townContent header{margin-bottom:12px;padding-bottom:10px}.portraitTitle{padding:25px 12px 12px}.portraitTitle h2{font-size:22px}.itemGrid{grid-template-columns:1fr 1fr}.slotGrid{grid-template-columns:repeat(3,1fr)}.slotGrid button{min-height:88px}.itemDetail>.itemIcon{width:80px;height:80px}
 #quickPicker{max-height:85dvh;padding:14px;box-sizing:border-box}
}
@media (orientation:landscape) and (max-height:600px) and (max-width:700px){
 body.playing #adventureDock{width:260px}body.playing .dockGold{display:none}
 body.playing #targetHud{width:170px}body.playing #bgmBtn{font-size:8px}
}
body.playing #menuMusicButton{display:none!important}
@media (orientation:landscape) and (max-height:600px) and (max-width:1100px){
 body.playing.townUIReady #sword{font-size:15px;white-space:nowrap;padding:0;display:grid;place-items:center}
 body.playing #sword:after{display:none}
}
@media (orientation:landscape) and (max-height:600px) and (max-width:1100px){
 body.playing #chatMessages{height:clamp(24px,calc(100dvh - 350px),60px)}
}
/* v57: reserve the field for play; expand menus only on demand. */
#phoneMenuToggle{display:none}
@media (orientation:landscape) and (max-height:600px) and (max-width:1100px){
 body.playing{--phone-left:max(7px,env(safe-area-inset-left));--phone-right:max(7px,env(safe-area-inset-right));--phone-bottom:max(18px,env(safe-area-inset-bottom))}
 body.playing #vitals{transform:scale(.55)!important;top:5px!important}
 body.playing #targetHud{left:calc(var(--phone-left) + 182px);top:5px;width:150px;height:39px;padding:3px 7px;font-size:9px}
 body.playing #targetName{font-size:9px;margin-bottom:2px}body.playing #targetTrack{height:12px}body.playing #targetValue{font-size:8px;line-height:12px}
 body.playing #hasteBuff{top:48px;left:calc(var(--phone-left) + 182px)}
 body.playing #bgmBtn{display:none!important}
 body.playing #phoneMenuToggle{display:block;position:fixed;z-index:46;right:var(--phone-right);top:6px;min-width:48px;height:34px;padding:4px 8px;background:#11212bd9;border:1px solid #a58d5866;border-radius:6px;color:#e6d5ac;font-size:10px}
 body.playing #adventureDock{display:none;left:auto;right:var(--phone-right);top:46px;bottom:auto;transform:none;width:230px;flex-wrap:wrap;min-height:44px;z-index:46}
 body.playing.phoneMenuOpen #adventureDock{display:flex}
 body.playing #adventureDock button{min-width:42px;padding:2px;height:40px;font-size:8px}body.playing #adventureDock .dockGold{display:none}
 body.playing.phoneMenuOpen #bgmBtn{display:block!important;top:98px!important;min-height:30px;padding:5px 8px!important;font-size:9px}
 body.playing #gameChat{top:52px;width:210px}
 body.playing #gameChat.collapsed{width:62px;background:#11212bb5}
 body.playing #gameChat.collapsed header{padding:0;min-height:32px}
 body.playing #gameChat.collapsed header strong,body.playing #gameChat.collapsed #chatConnection{display:none}
 body.playing #gameChat.collapsed #chatToggle{width:60px;height:32px;font-size:0;border:0}
 body.playing #gameChat.collapsed #chatToggle:after{content:'チャット';font-size:10px}
 body.playing #chatMessages{height:clamp(24px,calc(100dvh - 320px),64px)}
 body.playing.townUIReady #pad{width:108px;height:108px;opacity:.8}
 body.playing #pad .key{width:36px;height:36px;font-size:15px}body.playing #up,body.playing #down{left:36px}body.playing #left,body.playing #right{top:36px}
 body.playing.townUIReady #sword{width:54px!important;height:54px!important;font-size:12px}
 body.playing .quickSlot{width:36px;height:36px;padding:2px;opacity:.88}body.playing .quickSlot .itemIcon{width:28px;height:28px}body.playing .quickSlot .quickArt{font-size:18px}body.playing .quickSlot small{width:12px;height:12px;font-size:8px;line-height:12px}
 body.playing .q0{right:calc(var(--phone-right) + 2px);bottom:calc(var(--phone-bottom) + 117px)}
 body.playing .q1{right:calc(var(--phone-right) + 42px);bottom:calc(var(--phone-bottom) + 103px)}
 body.playing .q2{right:calc(var(--phone-right) + 73px);bottom:calc(var(--phone-bottom) + 66px)}
 body.playing .q3{right:calc(var(--phone-right) + 77px);bottom:calc(var(--phone-bottom) + 22px)}
 body.playing #editQuick{bottom:calc(var(--phone-bottom) + 61px);min-height:28px;font-size:8px;padding:3px 6px}
 body.playing #npcTalk{bottom:calc(var(--phone-bottom) + 8px);font-size:10px;padding:8px 12px}
 body.playing #expBar{height:13px}body.playing #expLabel{font-size:8px;letter-spacing:0}
}
#fieldZoom{display:none}
@media(max-width:1100px) and (max-height:600px){body.playing #fieldZoom{display:block;position:fixed;z-index:46;top:6px;right:calc(max(7px,env(safe-area-inset-right)) + 60px);height:34px;padding:4px 8px;font-size:10px;color:#e6d5ac;background:#11212bd9;border:1px solid #a58d5866;border-radius:6px}}
/* v102: keep the view control available in portrait and Safari desktop-site mode. */
@media (any-pointer:coarse), (max-width:600px), (max-width:1100px) and (max-height:600px){
 body.playing #fieldZoom{display:block;position:fixed;z-index:46;top:max(6px,env(safe-area-inset-top));right:calc(max(7px,env(safe-area-inset-right)) + 60px);height:40px;min-width:64px;padding:4px 8px;font-size:12px;color:#e6d5ac;background:#11212be8;border:1px solid #a58d58;border-radius:4px;touch-action:manipulation}
}
@media (orientation:portrait) and (any-pointer:coarse), (orientation:portrait) and (max-width:600px){
 body.playing #fieldZoom{top:calc(max(8px,env(safe-area-inset-top)) + 80px);right:max(8px,env(safe-area-inset-right))}
}