/* Last UI layer: thumb controls and safe-area spacing on phone landscape. */
@media (orientation:landscape) and (max-height:500px) {
 body { --phone-left:calc(env(safe-area-inset-left,0px) + 12px); --phone-right:calc(env(safe-area-inset-right,0px) + 12px); --phone-bottom:calc(env(safe-area-inset-bottom,0px) + 12px); --phone-stick:108px; }
 .hud { top:calc(env(safe-area-inset-top,0px) + 6px); left:var(--phone-left); right:var(--phone-right); height:44px; gap:6px; }
 .hud .brand,.round span,.keycap { display:none; }
 .hud .chip,.hud .icon { min-height:44px; height:44px; }
 .hud .icon { min-width:44px; width:44px; }
 .round { height:36px; padding:4px 10px; }
 .player-card { top:calc(env(safe-area-inset-top,0px) + 56px); left:var(--phone-left); width:180px; padding:6px; gap:7px; }
 .player-card img { width:32px; height:32px; }
 .player-card #connection { display:none; }
 .player-card #my-status { max-width:128px; margin-top:3px; }
 #joystick,body.world-boss-active #joystick { left:var(--phone-left); bottom:var(--phone-bottom); width:108px; height:108px; }
 #stick,body.world-boss-active #stick { width:38px; height:38px; left:calc(50% - 19px); top:calc(50% - 19px); }
 .combat,#lounge-actions,body.world-boss-active .combat { display:grid; grid-template-columns:64px 64px; grid-auto-rows:64px; gap:8px; align-items:center; justify-items:center; right:var(--phone-right); bottom:var(--phone-bottom); }
 .combat .battle,.combat .battle.attack,.combat .battle.ultimate,body.world-boss-active .combat .battle,body.world-boss-active .combat .battle.attack,body.world-boss-active .combat .battle.ultimate,#lounge-actions .battle { width:64px; height:64px; padding:4px; gap:2px; }
 .combat .attack { grid-column:1; }
 .combat .ultimate { grid-column:2; }
 .combat .battle span,#lounge-actions .battle span { max-width:58px; font-size:8px; line-height:1.2; }
 #arena #emote-menu,body[data-zone=lounge] #arena #emote-menu,body[data-zone=lounge].lounge-extra-actions #arena #emote-menu,body.world-boss-active #arena #emote-menu { left:calc(50% - 44px); right:auto; bottom:var(--phone-bottom); transform:none; width:140px; padding:0; gap:4px; display:flex; }
 #arena #emote-menu button,body.world-boss-active #arena #emote-menu button { width:44px; min-width:44px; height:44px; padding:4px; }
 #arena #emote-menu canvas { width:26px; height:26px; }
 #arena #emote-menu .emote-name,#arena #emote-menu .emote-key { display:none; }
 #party-open { top:calc(env(safe-area-inset-top,0px) + 111px); left:var(--phone-left); width:145px; min-height:44px; padding:6px 9px; }
 #cat-friends-open,#cat-friends-open.has-party-entry { top:calc(env(safe-area-inset-top,0px) + 111px); left:calc(var(--phone-left) + 155px); min-height:44px; padding:6px 9px; }
 body:not([data-zone=lounge]) #cat-friends-open { display:none; }
 #event-banner { top:calc(env(safe-area-inset-top,0px) + 108px); max-width:min(420px,calc(100vw - 48px)); max-height:58px; overflow:hidden; font-size:11px; padding:5px 9px; }
 #battle-stats { top:calc(env(safe-area-inset-top,0px) + 56px); right:var(--phone-right); }
 #battle-feed { max-height:100px; }
 #duel-hud { top:calc(env(safe-area-inset-top,0px) + 55px); }
 #toast,body[data-zone=lounge].lounge-extra-actions #toast { bottom:calc(var(--phone-bottom) + 146px); max-width:min(360px,calc(100vw - 40px)); padding:5px 9px; }
 #more-menu { top:calc(env(safe-area-inset-top,0px) + 54px); right:var(--phone-right); max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 66px); }
 dialog,#party-dialog,#cat-friends-dialog,#duel-result-dialog,#result-dialog.coop-result { max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 16px); padding:12px; overflow-y:auto; touch-action:pan-y; overscroll-behavior:contain; }
 dialog .dialog-head { position:sticky; top:-12px; z-index:3; margin-bottom:10px; padding:8px 0; background:#fff8e9; }
 .dialog-head button { min-width:44px; min-height:44px; }
 #region-list { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .region-card { min-height:190px; padding:10px; }
 .region-card p { margin:6px 0; }
 .region-card canvas { margin:4px auto; }
 #ximiao-use { left:var(--phone-left); right:auto; bottom:calc(var(--phone-bottom) + var(--phone-stick) + 8px); min-height:44px; width:108px; padding:5px 6px; gap:4px; justify-content:center; font-size:10px; }
 #ximiao-use svg { width:15px; height:15px; }
 #ximiao-use-count { padding:1px 4px; }
 #ximiao-status { top:calc(env(safe-area-inset-top,0px) + 56px); right:calc(var(--phone-right) + 194px); max-width:205px; font-size:9px; padding:4px 7px; }
 #ximiao-product,#ximiao-product.compact { top:calc(env(safe-area-inset-top,0px) + 110px); right:var(--phone-right); width:210px; grid-template-columns:38px 1fr; padding:7px; gap:6px; max-height:64px; overflow-y:auto; }
 #ximiao-product-image,#ximiao-product.compact #ximiao-product-image { width:38px; height:38px; }
 #ximiao-product-intro { display:none; }
 #ximiao-product-close { min-width:32px; min-height:32px; }
 #ximiao-revive { bottom:calc(var(--phone-bottom) + 146px); min-height:44px; padding:7px 14px; font-size:11px; }
 #asset-status { bottom:calc(var(--phone-bottom) + 146px)!important; max-height:44px; }
 body.world-boss-active { --boss-top:calc(var(--battle-top) + 46px); --mechanic-top:calc(var(--battle-top) + 82px); --mechanic-clearance:58px; }
 body.world-boss-active .hud { left:var(--phone-left); right:var(--phone-right); }
 body.world-boss-active .player-card { left:calc(var(--phone-left) + 76px); width:min(180px,calc(100vw - 340px)); }
 body.world-boss-active #coop-objective { right:calc(var(--phone-right) + 96px); max-width:118px; }
 body.world-boss-active #world-boss-hud { width:min(620px,calc(100vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px) - 24px)); }
 body.world-boss-active #world-boss-mechanic { width:min(560px,calc(100vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px) - 24px)); min-height:44px; padding:5px 10px; }
 body.world-boss-active #world-boss-mechanic-title { font-size:12px; }
 body.world-boss-active #world-boss-mechanic-detail { font-size:10px; line-height:1.3; }
 body.world-boss-active #toast,body.world-boss-active #coop-intrusion { top:calc(var(--mechanic-top) + 52px); bottom:auto; }
 body[data-zone=coop].world-boss-active #coop-feed:not([hidden]) { left:calc(var(--phone-left) + 120px); bottom:calc(var(--phone-bottom) + 52px); width:94px; min-width:94px; height:44px; padding:4px; transform:none; }
 body[data-zone=coop].world-boss-active #coop-feed .keycap { display:none; }
 body[data-zone=coop].world-boss-active #coop-assist-status:not([hidden]) { left:calc(var(--phone-left) + 120px); bottom:calc(var(--phone-bottom) + 102px); max-width:140px; transform:none; }
 body.world-boss-active #ximiao-status { top:calc(var(--battle-top) + 10px); right:calc(var(--phone-right) + 230px); max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
 body.world-boss-active #ximiao-product,body.world-boss-active #ximiao-product.compact { top:calc(var(--mechanic-top) + 52px); max-height:56px; }
}
@media (orientation:landscape) and (max-height:350px) {
 body { --phone-stick:96px; }
 #joystick,body.world-boss-active #joystick { width:96px; height:96px; }
 .combat,#lounge-actions,body.world-boss-active .combat { grid-template-columns:60px 60px; grid-auto-rows:60px; }
 .combat .battle,.combat .battle.attack,.combat .battle.ultimate,body.world-boss-active .combat .battle,body.world-boss-active .combat .battle.attack,body.world-boss-active .combat .battle.ultimate,#lounge-actions .battle { width:60px; height:60px; }
 #ximiao-product,#ximiao-product.compact { max-height:50px; }
 body.world-boss-active #ximiao-product,body.world-boss-active #ximiao-product.compact { max-height:44px; }
}
body.photo-mode #ximiao-use,body.photo-mode #ximiao-status,body.photo-mode #ximiao-product { display:none!important; }

@media (orientation:landscape) and (max-height:315px) {
 body:not([data-zone=coop]) #ximiao-use { left:calc(var(--phone-left) + 120px); bottom:calc(var(--phone-bottom) + 52px); }
 body.world-boss-active #world-boss-mechanic { min-height:38px; padding:3px 8px; }
 #ximiao-product,#ximiao-product.compact,body.world-boss-active #ximiao-product,body.world-boss-active #ximiao-product.compact { left:50%; right:auto; transform:translateX(-50%); width:180px; max-height:36px; padding:4px; grid-template-columns:28px 1fr; }
 #ximiao-product-image,#ximiao-product.compact #ximiao-product-image { width:28px; height:28px; }
}

/* The mobile display module owns visibility; never override a button's hidden state. */
.hud #fullscreen-quick { flex:0 0 44px; width:44px; min-width:44px; height:44px; min-height:44px; touch-action:manipulation; }
.hud #fullscreen-quick svg { width:22px; height:22px; }
#more-menu #fullscreen-open { min-height:44px; touch-action:manipulation; }
@media (orientation:portrait) and (max-width:600px) {
 .hud { left:max(12px,env(safe-area-inset-left,0px)); right:max(12px,env(safe-area-inset-right,0px)); height:44px; gap:5px; }
 .hud .icon { flex:0 0 44px; width:44px; min-width:44px; height:44px; min-height:44px; }
 .hud #region-open { flex:0 1 76px; max-width:76px; min-width:46px; padding:0 7px; }
 .hud #region-label { min-width:0; max-width:48px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
 .hud .round { flex:1 1 66px; min-width:0; margin:0; padding:4px 6px; gap:0; }
 .hud .round strong { flex-shrink:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:17px; }
 .hud #score-open { flex:0 1 auto; min-width:30px; max-width:64px; padding:0 6px; gap:0; }
 .hud #score-open>span { display:none; }
 .hud #points { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
 #more-menu { top:calc(env(safe-area-inset-top,0px) + 64px); }
}


/* CSS landscape fallback: iPhone Safari also works with portrait lock enabled. */
body.mobile-landscape {
 position:fixed!important;left:0!important;top:0!important;margin:0!important;
 width:var(--mobile-landscape-width)!important;height:var(--mobile-landscape-height)!important;
 min-width:0!important;min-height:0!important;overflow:hidden!important;
 transform-origin:0 0!important;transform:translateX(var(--mobile-viewport-width)) rotate(90deg)!important;
}
body.mobile-landscape #arena { width:100%;height:var(--mobile-landscape-height); }
body.mobile-landscape #game { width:100%!important;height:100%!important; }
body.mobile-landscape .rotate-hint { display:none; }
body.mobile-landscape { --phone-left:calc(env(safe-area-inset-top,0px) + 12px); --phone-right:calc(env(safe-area-inset-bottom,0px) + 12px); --phone-bottom:calc(env(safe-area-inset-left,0px) + 12px); --phone-stick:108px; }
body.mobile-landscape .hud { top:calc(env(safe-area-inset-right,0px) + 6px); left:var(--phone-left); right:var(--phone-right); height:44px; gap:6px; }
body.mobile-landscape .hud .brand,body.mobile-landscape .round span,body.mobile-landscape .keycap { display:none; }
body.mobile-landscape .hud .chip,body.mobile-landscape .hud .icon { min-height:44px; height:44px; }
body.mobile-landscape .hud .icon { min-width:44px; width:44px; }
body.mobile-landscape .round { height:36px; padding:4px 10px; }
body.mobile-landscape .player-card { top:calc(env(safe-area-inset-right,0px) + 56px); left:var(--phone-left); width:180px; padding:6px; gap:7px; }
body.mobile-landscape .player-card img { width:32px; height:32px; }
body.mobile-landscape .player-card #connection { display:none; }
body.mobile-landscape .player-card #my-status { max-width:128px; margin-top:3px; }
body.mobile-landscape #joystick,body.mobile-landscape.world-boss-active #joystick { left:var(--phone-left); bottom:var(--phone-bottom); width:108px; height:108px; }
body.mobile-landscape #stick,body.mobile-landscape.world-boss-active #stick { width:38px; height:38px; left:calc(50% - 19px); top:calc(50% - 19px); }
body.mobile-landscape .combat,body.mobile-landscape #lounge-actions,body.mobile-landscape.world-boss-active .combat { display:grid; grid-template-columns:64px 64px; grid-auto-rows:64px; gap:8px; align-items:center; justify-items:center; right:var(--phone-right); bottom:var(--phone-bottom); }
body.mobile-landscape .combat .battle,body.mobile-landscape .combat .battle.attack,body.mobile-landscape .combat .battle.ultimate,body.mobile-landscape.world-boss-active .combat .battle,body.mobile-landscape.world-boss-active .combat .battle.attack,body.mobile-landscape.world-boss-active .combat .battle.ultimate,body.mobile-landscape #lounge-actions .battle { width:64px; height:64px; padding:4px; gap:2px; }
body.mobile-landscape .combat .attack { grid-column:1; }
body.mobile-landscape .combat .ultimate { grid-column:2; }
body.mobile-landscape .combat .battle span,body.mobile-landscape #lounge-actions .battle span { max-width:58px; font-size:8px; line-height:1.2; }
body.mobile-landscape #arena #emote-menu,body.mobile-landscape[data-zone=lounge] #arena #emote-menu,body.mobile-landscape[data-zone=lounge].lounge-extra-actions #arena #emote-menu,body.mobile-landscape.world-boss-active #arena #emote-menu { left:calc(50% - 44px); right:auto; bottom:var(--phone-bottom); transform:none; width:140px; padding:0; gap:4px; display:flex; }
body.mobile-landscape #arena #emote-menu button,body.mobile-landscape.world-boss-active #arena #emote-menu button { width:44px; min-width:44px; height:44px; padding:4px; }
body.mobile-landscape #arena #emote-menu canvas { width:26px; height:26px; }
body.mobile-landscape #arena #emote-menu .emote-name,body.mobile-landscape #arena #emote-menu .emote-key { display:none; }
body.mobile-landscape #party-open { top:calc(env(safe-area-inset-right,0px) + 111px); left:var(--phone-left); width:145px; min-height:44px; padding:6px 9px; }
body.mobile-landscape #cat-friends-open,body.mobile-landscape #cat-friends-open.has-party-entry { top:calc(env(safe-area-inset-right,0px) + 111px); left:calc(var(--phone-left) + 155px); min-height:44px; padding:6px 9px; }
body.mobile-landscape:not([data-zone=lounge]) #cat-friends-open { display:none; }
body.mobile-landscape #event-banner { top:calc(env(safe-area-inset-right,0px) + 108px); max-width:min(420px,calc(var(--mobile-landscape-width) - 48px)); max-height:58px; overflow:hidden; font-size:11px; padding:5px 9px; }
body.mobile-landscape #battle-stats { top:calc(env(safe-area-inset-right,0px) + 56px); right:var(--phone-right); }
body.mobile-landscape #battle-feed { max-height:100px; }
body.mobile-landscape #duel-hud { top:calc(env(safe-area-inset-right,0px) + 55px); }
body.mobile-landscape #toast,body.mobile-landscape[data-zone=lounge].lounge-extra-actions #toast { bottom:calc(var(--phone-bottom) + 146px); max-width:min(360px,calc(var(--mobile-landscape-width) - 40px)); padding:5px 9px; }
body.mobile-landscape #more-menu { top:calc(env(safe-area-inset-right,0px) + 54px); right:var(--phone-right); max-height:calc(var(--mobile-landscape-height) - env(safe-area-inset-right,0px) - env(safe-area-inset-left,0px) - 66px); }
body.mobile-landscape dialog,body.mobile-landscape #party-dialog,body.mobile-landscape #cat-friends-dialog,body.mobile-landscape #duel-result-dialog,body.mobile-landscape #result-dialog.coop-result { max-height:calc(var(--mobile-landscape-height) - env(safe-area-inset-right,0px) - env(safe-area-inset-left,0px) - 16px); padding:12px; overflow-y:auto; touch-action:pan-y; overscroll-behavior:contain; }
body.mobile-landscape dialog .dialog-head { position:sticky; top:-12px; z-index:3; margin-bottom:10px; padding:8px 0; background:#fff8e9; }
body.mobile-landscape .dialog-head button { min-width:44px; min-height:44px; }
body.mobile-landscape #region-list { grid-template-columns:repeat(3,minmax(0,1fr)); }
body.mobile-landscape .region-card { min-height:190px; padding:10px; }
body.mobile-landscape .region-card p { margin:6px 0; }
body.mobile-landscape .region-card canvas { margin:4px auto; }
body.mobile-landscape #ximiao-use { left:var(--phone-left); right:auto; bottom:calc(var(--phone-bottom) + var(--phone-stick) + 8px); min-height:44px; width:108px; padding:5px 6px; gap:4px; justify-content:center; font-size:10px; }
body.mobile-landscape #ximiao-use svg { width:15px; height:15px; }
body.mobile-landscape #ximiao-use-count { padding:1px 4px; }
body.mobile-landscape #ximiao-status { top:calc(env(safe-area-inset-right,0px) + 56px); right:calc(var(--phone-right) + 194px); max-width:205px; font-size:9px; padding:4px 7px; }
body.mobile-landscape #ximiao-product,body.mobile-landscape #ximiao-product.compact { top:calc(env(safe-area-inset-right,0px) + 110px); right:var(--phone-right); width:210px; grid-template-columns:38px 1fr; padding:7px; gap:6px; max-height:64px; overflow-y:auto; }
body.mobile-landscape #ximiao-product-image,body.mobile-landscape #ximiao-product.compact #ximiao-product-image { width:38px; height:38px; }
body.mobile-landscape #ximiao-product-intro { display:none; }
body.mobile-landscape #ximiao-product-close { min-width:32px; min-height:32px; }
body.mobile-landscape #ximiao-revive { bottom:calc(var(--phone-bottom) + 146px); min-height:44px; padding:7px 14px; font-size:11px; }
body.mobile-landscape #asset-status { bottom:calc(var(--phone-bottom) + 146px)!important; max-height:44px; }
body.mobile-landscape.world-boss-active { --boss-top:calc(var(--battle-top) + 46px); --mechanic-top:calc(var(--battle-top) + 82px); --mechanic-clearance:58px; }
body.mobile-landscape.world-boss-active .hud { left:var(--phone-left); right:var(--phone-right); }
body.mobile-landscape.world-boss-active .player-card { left:calc(var(--phone-left) + 76px); width:min(180px,calc(var(--mobile-landscape-width) - 340px)); }
body.mobile-landscape.world-boss-active #coop-objective { right:calc(var(--phone-right) + 96px); max-width:118px; }
body.mobile-landscape.world-boss-active #world-boss-hud { width:min(620px,calc(var(--mobile-landscape-width) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 24px)); }
body.mobile-landscape.world-boss-active #world-boss-mechanic { width:min(560px,calc(var(--mobile-landscape-width) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 24px)); min-height:44px; padding:5px 10px; }
body.mobile-landscape.world-boss-active #world-boss-mechanic-title { font-size:12px; }
body.mobile-landscape.world-boss-active #world-boss-mechanic-detail { font-size:10px; line-height:1.3; }
body.mobile-landscape.world-boss-active #toast,body.mobile-landscape.world-boss-active #coop-intrusion { top:calc(var(--mechanic-top) + 52px); bottom:auto; }
body.mobile-landscape[data-zone=coop].world-boss-active #coop-feed:not([hidden]) { left:calc(var(--phone-left) + 120px); bottom:calc(var(--phone-bottom) + 52px); width:94px; min-width:94px; height:44px; padding:4px; transform:none; }
body.mobile-landscape[data-zone=coop].world-boss-active #coop-feed .keycap { display:none; }
body.mobile-landscape[data-zone=coop].world-boss-active #coop-assist-status:not([hidden]) { left:calc(var(--phone-left) + 120px); bottom:calc(var(--phone-bottom) + 102px); max-width:140px; transform:none; }
body.mobile-landscape.world-boss-active #ximiao-status { top:calc(var(--battle-top) + 10px); right:calc(var(--phone-right) + 230px); max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.mobile-landscape.world-boss-active #ximiao-product,body.mobile-landscape.world-boss-active #ximiao-product.compact { top:calc(var(--mechanic-top) + 52px); max-height:56px; }
/* Modal dialogs live in the top layer, outside their transformed ancestor.
   Rotate and center that layer separately so changing cats stays usable. */
body.mobile-landscape dialog[open] {
 position:fixed!important;inset:auto!important;left:50%!important;top:50%!important;margin:0!important;
 transform:translate(-50%,-50%) rotate(90deg)!important;transform-origin:center!important;
 width:min(780px,calc(var(--mobile-landscape-width) - 24px))!important;
 max-width:calc(var(--mobile-landscape-width) - 24px)!important;
 max-height:calc(var(--mobile-landscape-height) - 24px)!important;
 overflow-y:auto!important;touch-action:pan-y;overscroll-behavior:contain;
}
body.mobile-landscape #roster { grid-template-columns:repeat(4,minmax(0,1fr)); }
body.mobile-landscape #more-menu { max-width:calc(var(--mobile-landscape-width) - 24px); }