/* Phone-only landscape viewport. Desktop and tablet layouts stay unchanged. */
:root{--phone-safe-top:env(safe-area-inset-top,0px);--phone-safe-right:env(safe-area-inset-right,0px);--phone-safe-bottom:env(safe-area-inset-bottom,0px);--phone-safe-left:env(safe-area-inset-left,0px)}
.phone-game-shell,.phone-game-shell body{margin:0;width:100%;height:100dvh;overflow:hidden;overscroll-behavior:none;background:#080c12;touch-action:none}
.phone-game-shell body>:not(#phone-game-frame){display:none}
#phone-game-frame{position:fixed;left:0;top:0;display:block;width:100vw;height:100dvh;border:0;max-width:none;transform-origin:0 0;touch-action:none}
@media(orientation:portrait){#phone-game-frame{width:100dvh;height:100vw;transform:translateX(100vw) rotate(90deg)}}
.phone-game,.phone-game body{overscroll-behavior:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
.phone-game #app:not(.setup-mode){--hud-left:max(12px,var(--game-safe-left,0px));--hud-right:max(12px,var(--game-safe-right,0px));--hud-bottom:max(12px,var(--game-safe-bottom,0px));--phone-top:max(8px,var(--game-safe-top,0px));--status-width:clamp(204px,30vw,284px);--skill:min(clamp(44px,calc(12dvh*var(--skills-scale,1)),58px),calc((100vw - var(--hud-left) - var(--hud-right) - var(--status-width) - var(--attack) - var(--control-gap)*3 - 20px)/3));--ult:calc(var(--skill) + 12px);--attack:clamp(68px,20dvh,86px);--control-gap:14px;--joystick-size:clamp(94px,calc(27dvh*var(--joystick-scale,1)),124px)}
/* Small strategic information at the edges, with no panel across the action. */
.phone-game #app:not(.setup-mode)>.topbar{left:var(--hud-left);right:var(--hud-right);top:var(--phone-top);padding:0;min-height:0;grid-template-columns:minmax(0,1fr) 78px minmax(0,1fr);gap:10px;pointer-events:none}
.phone-game #app:not(.setup-mode) .topbar .faction{gap:3px;max-width:150px}
.phone-game #app:not(.setup-mode) .topbar .faction-name{font:600 12px/1.1 Georgia,serif;letter-spacing:0}
.phone-game #app:not(.setup-mode) .topbar .base-meter{height:5px}
.phone-game #app:not(.setup-mode) .topbar .base-number{display:none}
.phone-game #app:not(.setup-mode) .topbar .team-gold{font-size:11px}
.phone-game #app:not(.setup-mode) .topbar .team-gold>span{display:none}
.phone-game #app:not(.setup-mode) .topbar .enemy-header{display:flex;justify-content:flex-end;padding-right:112px}
.phone-game #app:not(.setup-mode) .topbar .wave-indicator{width:78px;max-width:none;margin:calc(-1*var(--phone-top)) 0 0;padding:8px 4px 6px;gap:4px;font:600 12px/1.1 Georgia,serif;border-radius:0 0 10px 10px}
.phone-game #app:not(.setup-mode) .topbar .match-meta{gap:7px}
.phone-game #app:not(.setup-mode) .topbar .match-meta .clock,.phone-game #app:not(.setup-mode) .topbar .match-meta .score{font-size:12px}
.phone-game #app:not(.setup-mode) .topbar .header-actions{position:fixed;top:var(--phone-top);right:var(--hud-right);gap:6px}
.phone-game #app:not(.setup-mode) .topbar #shop-button{min-width:58px;min-height:44px;font-size:14px;background:#09121bdd}
.phone-game #app:not(.setup-mode) .topbar #menu-button{width:44px;height:44px}
.phone-game #app .battlefield #battle-map{position:absolute;left:auto;right:var(--hud-right);top:calc(var(--phone-top) + 52px);width:112px;opacity:.95}
.phone-game #app .battlefield #squad-strip{top:calc(var(--phone-top) + 42px);left:var(--hud-left);width:140px;grid-template-columns:1fr;gap:3px}
.phone-game #app #squad-strip .squad-card{display:block;padding:4px 5px;border-left-width:2px;background:#10251bc9}
.phone-game #app #squad-strip .enemy-squad{background:#30251ec9}
.phone-game #app #squad-strip .squad-portrait{display:none}
.phone-game #app #squad-strip .squad-copy{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 5px;padding:0}
.phone-game #app #squad-strip .squad-copy strong{display:block;font-size:11px}
.phone-game #app #squad-strip .squad-role{display:block;font-size:9px}
.phone-game #app #squad-strip .squad-health-value,.phone-game #app #squad-strip .squad-mana-value{display:block;font-size:10px}
.phone-game #app #squad-strip .squad-resources{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5px}
.phone-game #app .battlefield .battle-messages{top:calc(var(--phone-top) + 48px);width:min(340px,46vw)}
.phone-game #app .battlefield .battle-messages .toast{font-size:12px;padding:4px 8px;background:#0b1726bb}
.phone-game #app .battlefield .map-vignette{box-shadow:inset 0 -80px 70px -60px #03070ecc,inset 0 50px 40px -35px #03070e}
/* Six equipment slots stay at lower left, while the readout is positioned
   independently. The joystick still floats at a touch. */
.phone-game #app .battlefield .battle-dock{position:absolute;inset:0;display:block;margin:0;padding:0;pointer-events:none}
.phone-game #app .battle-dock .mobile-hud{display:block}
.phone-game #app[data-control-mode="pc"] .battle-dock .mobile-hud{display:none}
.phone-game #app .battle-dock .mobile-brand{display:none}
.phone-game #app .battle-dock .general-status{position:absolute;left:var(--hud-left);bottom:var(--hud-bottom);display:grid;grid-template-columns:52px minmax(0,1fr);grid-template-rows:auto auto;gap:7px 8px;width:var(--status-width);min-height:0;margin:0;pointer-events:none}
.phone-game #app .battle-dock .hud-portrait{display:block;grid-area:1/1;width:52px;height:52px;border-width:2px}
.phone-game #app .battle-dock .level-badge{font:12px/18px Arial,sans-serif;width:20px;min-width:20px;height:20px;padding:0;bottom:-4px}
.phone-game #app .battle-dock .status-content{grid-area:1/2;gap:3px}
.phone-game #app .battle-dock .general-name strong{font-size:12px;line-height:1.2}
.phone-game #app .battle-dock #hud-inventory{display:grid;grid-area:2/1/3/3;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;pointer-events:auto}
.phone-game #app .battle-dock #hud-inventory .inventory-slot{min-width:0;height:auto;min-height:0;aspect-ratio:1;pointer-events:auto}
.phone-game #app .battle-dock .status-utilities{position:absolute;left:calc(50% - 22px);bottom:calc(100% + 8px);display:block}
.phone-game #app .battle-dock .status-utilities #home-button{width:44px;min-width:44px;height:44px;min-height:44px;border-radius:3px;font-size:11px;gap:0}
.phone-game #app .status-utilities #home-button .icon{width:19px;height:19px}
.phone-game #app .battle-dock .combat-controls{position:absolute;right:var(--hud-right);bottom:var(--hud-bottom);display:block;width:calc(var(--attack) + var(--skill)*3 + var(--control-gap)*3);height:calc(var(--attack) + var(--ult) + 44px);margin:0;padding:0}
.phone-game #app .combat-controls .ability-slot{position:absolute;inset:auto;display:block;width:var(--skill);height:var(--skill);margin:0}
.phone-game #app .combat-controls .ability-slot:nth-child(1){right:calc(var(--attack) + var(--control-gap) + (var(--skill) + var(--control-gap))/2);bottom:calc(var(--attack) + 68px)}
.phone-game #app .combat-controls .ability-slot:nth-child(2){right:calc(var(--attack) + var(--skill) + var(--control-gap)*2);bottom:0}
.phone-game #app .combat-controls .ability-slot:nth-child(3){right:calc(var(--attack) + var(--control-gap));bottom:0}
.phone-game #app .combat-controls .ability-slot.ultimate-slot{right:calc((var(--attack) - var(--ult))/2);bottom:calc(var(--attack) + 44px);width:var(--ult);height:var(--ult)}
.phone-game #app .combat-controls #basic-attack{position:absolute;right:0;bottom:0;width:var(--attack);height:var(--attack);padding:6px}
.phone-game #app .combat-controls .ability-key{display:none}
.phone-game #app .combat-controls .ability-rank{bottom:3px;font-size:8px}
.phone-game #app .combat-controls .ability-cooldown{font-size:16px}
.phone-game #app .combat-controls .quick-skill-upgrade{width:44px;height:32px;min-height:32px;top:-38px;border-radius:16px;font-size:21px;line-height:1}
.phone-game #app .skill-aim-cancel{top:calc(var(--phone-top) + 52px);right:var(--hud-right);width:82px;height:54px;font-size:12px}
.phone-game #app .skill-aim-cancel b{font-size:24px}
/* Landscape hero selection keeps the roster, artwork and confirmation visible. */
.phone-game #app[data-page="heroes"] #selection .selection-panel{grid-template-rows:52px minmax(0,1fr) 38px;padding:var(--game-safe-top,0px) max(12px,var(--game-safe-right,0px)) var(--game-safe-bottom,0px) max(12px,var(--game-safe-left,0px));gap:6px 12px}
.phone-game .selection-screen-header p,.phone-game .selection-screen-footer>span,.phone-game .realm-labels{display:none}
.phone-game #app .selection-screen-header h2{font-size:22px;margin:0}
.phone-game .selection-logo{font-size:20px}
.phone-game #app[data-page="heroes"] .hero-filters button{min-height:32px;font-size:11px}
.phone-game #app[data-page="heroes"] .hero-grid{grid-auto-rows:100px}
.phone-game .selection-details{padding:8px;gap:6px}
.phone-game #selection-name{font-size:21px;margin:3px 0}
.phone-game #select-hero-button{min-height:44px;font-size:17px}
.phone-game .selection-screen-footer>a{min-height:32px;padding:5px 14px}
.phone-game .selection-screen-footer{grid-template-columns:1fr auto}
.phone-game .has-selection-party #app[data-page="heroes"] #selection .selection-panel{grid-template-rows:44px 68px minmax(0,1fr) 34px}
.phone-game .selection-party-seat img{height:50px;width:34px}
.phone-game .selection-party-seat small,.phone-game .selection-party-seat span{font-size:11px}
.phone-game .selection-party-seat strong{font-size:12px}
@media(max-width:700px){
 .phone-game #app:not(.setup-mode)>.topbar{gap:6px}
 .phone-game #app:not(.setup-mode) .topbar .enemy-header{padding-right:108px}
 .phone-game #app .battlefield #battle-map{width:100px}
 .phone-game #app .battlefield #squad-strip{width:130px}
 .phone-game #app .battle-dock .status-utilities{left:calc(100% - 44px)}
}

/* The two arrow-marked groups move independently of the rest of the HUD. */
#app .battle-dock .hero-readout{grid-area:2/1/3/3;display:grid;grid-template-columns:clamp(34px,6vw,72px) minmax(0,1fr);align-items:center;column-gap:8px;width:100%;min-width:0;pointer-events:none}
#app .battle-dock .hero-readout .hud-portrait{grid-area:1/1}
#app .battle-dock .hero-readout .status-content{grid-area:1/2}
html:not(.phone-game) #app .battle-dock .combat-controls{position:relative}
html:not(.phone-game) #app .combat-controls .ability-slot:nth-child(1){position:absolute;grid-area:auto;right:calc(6px + var(--attack) + var(--control-gap)*1.5 + var(--ult)*.75 - var(--skill)*.25);bottom:calc(var(--attack) + 40px)}
.phone-game #app .battle-dock .hero-readout{grid-area:1/1/2/3;grid-template-columns:52px minmax(0,1fr)}
@media(max-width:700px){.phone-game #app .battle-dock .hero-readout{width:180px}}