/* Landscape combat: a live battlefield surrounded by thumb controls. */
:root{--gold:#d6b777;--panel:#10141c;--panel-deep:#080c12;--ink:#080c12;--text:#f1e4c7;--muted:#b7b5ac}
#app:not(.setup-mode){height:100dvh;min-height:0;max-width:none;position:relative;overflow:hidden;background:#080b10;--skill:clamp(44px,9.8vh,80px);--ult:calc(var(--skill)*1.3)}
#app:not(.setup-mode)>.battlefield{position:absolute;inset:0;min-height:0;border:0;width:100%;height:100%}
#app:not(.setup-mode)>.topbar{position:absolute;inset:0 0 auto;z-index:8;height:88px;padding:10px max(18px,env(safe-area-inset-right)) 10px max(18px,env(safe-area-inset-left));background:linear-gradient(#06090ee8,#06090e70,transparent);border:0;pointer-events:none;display:block}
#app:not(.setup-mode) .scoreboard{position:static;display:block}
#app:not(.setup-mode) .faction{position:absolute;top:12px;width:clamp(115px,19vw,300px);gap:4px}
#app:not(.setup-mode) .faction.shu{left:max(18px,env(safe-area-inset-left));text-align:left;color:#e9d9ad}
#app:not(.setup-mode) .faction.wei{right:150px;text-align:right;color:#e9d9ad}
#app:not(.setup-mode) .faction-name{font:600 clamp(14px,2vw,27px)/1 Georgia,serif;letter-spacing:.05em}
#app:not(.setup-mode) .base-meter{height:8px;border:1px solid #c6a55e;border-radius:2px;background:#111720;box-shadow:0 1px 3px #000}
.shu .base-meter i{background:linear-gradient(#55caff,#0875c8)}.wei .base-meter i{background:linear-gradient(#ff6e69,#bb1b27)}
.base-number{font:12px/1.2 Georgia,serif;font-variant-numeric:tabular-nums}
#app:not(.setup-mode) .score{position:absolute;top:68px;left:max(18px,env(safe-area-inset-left));font-size:14px;gap:7px;color:#d9cda9}
#app:not(.setup-mode) .topbar .wave-indicator{position:absolute;left:50%;top:0;transform:translateX(-50%);display:flex;flex-direction:column;gap:4px;padding:9px 20px 11px;background:linear-gradient(#0b1019f5,#0b1019b0);border:1px solid #ad8d48;border-top:0;border-radius:0 0 22px 22px;font:clamp(14px,2vw,24px) Georgia,serif}
#app:not(.setup-mode) .wave-indicator b{font-size:inherit}.wave-indicator .clock{font-size:12px;margin:0;color:#ddc99a}
#app:not(.setup-mode) #wave-countdown,#app:not(.setup-mode) .wave-divider{display:none}
#app:not(.setup-mode) .header-actions{position:absolute;top:10px;right:max(12px,env(safe-area-inset-right));display:flex;gap:6px;pointer-events:auto}
#shop-button{width:auto;min-width:72px;min-height:44px;background:#090d16d9;border:1px solid #9b804b;color:#eed398;border-radius:3px;display:flex;flex-direction:column;justify-content:center;padding:4px 8px;gap:1px;font-size:12px}
#shop-button>span:first-child{display:flex;align-items:center;gap:4px}#shop-button>span:last-child{font-size:12px}#shop-button .icon{width:15px;height:15px}#shop-button>span:last-child{font-size:0}#shop-button>span:last-child:after{content:'Shop';font-size:12px}
#menu-button{width:44px;height:44px;background:#090d16d9;border-color:#9b804b}
#app>.command-bar,#app>.control-strip{display:none}
.battlefield .map-title,.battlefield .camera-note,.battlefield .battle-tools,.battlefield .squad-strip{display:none}
.battlefield .map-vignette{box-shadow:inset 0 -130px 90px -50px #03070eee,inset 0 80px 65px -55px #03070e}
.battlefield .mobile-hud{position:absolute;inset:0;z-index:5;pointer-events:none}
.mobile-brand{position:absolute;bottom:16px;left:24px;text-align:center;font:600 clamp(14px,2.1vw,30px)/.9 Georgia,serif;color:#e1c282;text-shadow:0 2px 4px #000;letter-spacing:.05em}.mobile-brand small{display:block;font-size:.6em;letter-spacing:.2em;margin-top:5px}
.joystick{position:absolute;bottom:70px;left:max(22px,env(safe-area-inset-left));width:clamp(105px,22vh,196px);aspect-ratio:1;border:1px solid #d9cca35c;border-radius:50%;background:radial-gradient(circle,#18232e6e,#060b1670);box-shadow:inset 0 0 0 7px #cbb67c0c,0 4px 20px #0005;touch-action:none;pointer-events:auto;user-select:none;-webkit-user-select:none}
.joystick-ring{position:absolute;inset:22%;border:1px solid #dad4b333;border-radius:50%}.joystick-knob{position:absolute;inset:33%;border-radius:50%;border:2px solid #c5c3b790;background:radial-gradient(circle at 40% 30%,#6d7378dd,#18202bf0);box-shadow:0 5px 12px #0009;transform:translate(var(--stick-x,0px),var(--stick-y,0px))}.joystick.engaged{border-color:#f2d393;background-color:#35435544}
.basic-attack{position:absolute;bottom:max(20px,env(safe-area-inset-bottom));right:max(20px,env(safe-area-inset-right));width:calc(var(--skill)*1.65);height:calc(var(--skill)*1.65);border:2px solid #d9bd7b;border-radius:50%;background:radial-gradient(circle at 35% 20%,#494031,#0a1019 70%);box-shadow:0 0 0 4px #0c111dd9,inset 0 0 0 3px #d6b77730,0 4px 15px #000a;pointer-events:auto;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;color:#f5dfaf;font:12px Georgia,serif}
.basic-attack .icon{width:44%;height:44%}.basic-attack:active{filter:brightness(1.4)}.basic-attack:disabled{opacity:.5}
.battlefield>#home-button{position:absolute;right:max(20px,env(safe-area-inset-right));bottom:calc(var(--skill)*1.65 + 42px);z-index:7;width:54px;min-height:48px;padding:5px;display:flex;flex-direction:column;gap:3px;border:1px solid #bda267;background:#080d17db;font-size:12px}.battlefield>#home-button kbd{display:none}
.battlefield .battle-skill-overlay{left:auto;right:calc(var(--skill)*1.65 + 40px);bottom:max(24px,env(safe-area-inset-bottom));width:calc(var(--skill)*3 + 24px);transform:none;z-index:6;--skill-size:var(--skill);--ultimate-size:var(--ult);--skill-emblem-size:calc(var(--skill)*.76);--ultimate-emblem-size:calc(var(--ult)*.77)}
.battlefield .battle-skill-overlay .abilities,.battlefield .battle-skill-overlay .abilities.has-points{display:grid;grid-template-columns:repeat(3,var(--skill));grid-template-rows:var(--ult) var(--skill);gap:36px 12px;align-items:end}
.battle-skill-overlay .ability-slot:nth-child(1){grid-area:2/1}.battle-skill-overlay .ability-slot:nth-child(2){grid-area:2/2}.battle-skill-overlay .ability-slot:nth-child(3){grid-area:2/3}
.battle-skill-overlay .ability-slot.ultimate-slot{grid-area:1/3;justify-self:end;align-self:end}
.battle-skill-overlay .ability-slot>.ability{margin:0;opacity:1;border:1px solid #c9ae6d;background:#0b1322;box-shadow:0 0 0 3px #0a0c13,0 3px 12px #0008}.battle-skill-overlay .ability-key{font-size:12px;top:auto;bottom:-20px;color:#f4e6c8}.battle-skill-overlay .ability-name,.battle-skill-overlay .ability-cost{display:none}.battle-skill-overlay .ability-rank{bottom:3px;font-size:8px}.battle-skill-overlay .quick-skill-upgrade{height:28px;min-height:28px;top:-30px;width:44px;left:50%;transform:translateX(-50%);padding:0;opacity:1;font-size:16px;background:#624919;color:#fff0bd}.battle-skill-overlay .quick-skill-upgrade small{display:none}
.battlefield>.general-status{position:absolute;left:clamp(145px,23vw,390px);bottom:max(17px,env(safe-area-inset-bottom));z-index:6;width:clamp(180px,29vw,400px);display:grid;grid-template-columns:clamp(44px,7vw,90px) minmax(0,1fr);gap:7px 10px;border:0;padding:0;background:none;min-height:0}
.battlefield .hud-portrait{width:100%;height:auto;aspect-ratio:1;grid-row:1/3;border:2px solid #c3a667;border-radius:50%;outline:2px solid #11151c;box-shadow:0 4px 10px #0009;align-self:center}
.battlefield .level-badge{bottom:-5px;right:0;background:#080e17;border:1px solid #d6b777;border-radius:50%;min-width:24px;height:24px;padding:3px;font:14px Georgia,serif}
.battlefield .status-content{display:flex;flex-direction:column;gap:3px;min-width:0}.battlefield .general-name{margin:0;display:flex;align-items:center;gap:5px}.battlefield .general-name strong{font:clamp(12px,1.3vw,18px) Georgia,serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.battlefield #hero-role{display:none}
.battlefield .stat-meter,.battlefield .xp-track{height:5px;margin:0;border:1px solid #cec5a338;border-radius:4px;overflow:visible;background:#181b22;width:100%}.battlefield .stat-meter>i,.battlefield .xp-track>i{border-radius:3px;height:100%}.battlefield #health-fill{background:linear-gradient(#ff6866,#c7192e)}.battlefield #mana-fill{background:linear-gradient(#65d0ff,#187bd7)}.battlefield #xp-fill{background:linear-gradient(#ffe77a,#d5a518)}
.battlefield .stat-meter>span,.battlefield .xp-label{display:none}
/* Keep the player's live values readable on all three resource bars. */
#app .battle-dock .stat-meter,#app .battle-dock .xp-track{position:relative;height:15px;overflow:hidden}
#app .battle-dock .stat-meter>span,#app .battle-dock .xp-track>.xp-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;color:#fff;font:600 12px/1 Arial,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:0;white-space:nowrap;text-shadow:-1px -1px 1px #000,1px 1px 2px #000}
.battlefield #hud-inventory{grid-column:2;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;padding:0;margin:0}.battlefield #hud-inventory .inventory-slot{height:auto;min-height:0;aspect-ratio:1;width:100%;padding:0;border:1px solid #9c875e;border-radius:2px;background:#0a101acc}.battlefield #hud-inventory .item-emblem{width:100%;height:100%}.battlefield #hud-inventory .slot-number{display:none}.battlefield #hud-inventory .empty-slot{font-size:14px;color:#ac946147}
.battlefield #battle-map{position:absolute;top:94px;left:max(18px,env(safe-area-inset-left));right:auto;z-index:3;width:clamp(84px,10vw,160px);opacity:.85}.battlefield #battle-map .minimap-wrap{width:100%;margin:0;padding:0;border:1px solid #c5a56377;background:#080d17}.battlefield #battle-map .hud-label{display:none}.battlefield #minimap{position:relative;inset:auto;display:block;width:100%;height:auto;aspect-ratio:320/152;touch-action:none}
.battlefield .battle-messages{top:80px;left:25%;right:25%;bottom:auto;width:50%;max-width:none;transform:none;pointer-events:none}.battlefield .toast{font-size:12px;max-width:100%;padding:8px 12px}
#app.setup-mode{background:radial-gradient(ellipse at 50% 0,#28324466,transparent 70%),#090e16}.setup-mode>.topbar{display:none!important}.setup-mode .selection-panel,.setup-page>.skills-content,.setup-page>.shop-content{background:linear-gradient(125deg,#1c2330f9,#0d131dfb 65%);border-color:#a58a50}
.game-dialog{background:linear-gradient(120deg,#1b2431,#0b1019);border-color:#b3975a}.menu-options>button,.game-menu #relics-button{background:#121c2a}.menu-options>a{color:#e5ca91;padding:10px;font-size:14px}
@media(max-height:500px) and (orientation:landscape){#app:not(.setup-mode)>.topbar{height:64px}.base-number{font-size:12px}#app:not(.setup-mode) .faction{width:18vw}#app:not(.setup-mode) .faction.wei{right:135px}#app:not(.setup-mode) .score{top:61px}.battlefield #battle-map{top:83px;width:88px}.joystick{bottom:50px}.mobile-brand{bottom:14px;font-size:16px}.battlefield .battle-messages{top:66px}.battlefield>.general-status{left:23%;width:29%;bottom:14px;grid-template-columns:42px minmax(0,1fr);gap:5px}.battlefield .battle-skill-overlay{bottom:26px}.battlefield #hud-inventory{gap:3px}.battlefield .hud-portrait{grid-row:1/3}.battlefield .battle-skill-overlay .abilities,.battlefield .battle-skill-overlay .abilities.has-points{gap:32px 10px;grid-template-columns:repeat(3,var(--skill))}.battlefield .battle-skill-overlay{width:calc(var(--skill)*3 + 20px);right:calc(var(--skill)*1.65 + 32px)}.game-dialog{max-height:calc(100dvh - 16px);padding:16px}.game-menu{width:580px}.menu-options{grid-template-columns:repeat(3,1fr);margin:10px 0}.game-menu h1{font-size:24px}.setup-shell{padding-top:12px}.setup-mode .hero-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.setup-mode .hero-art{height:140px}.setup-mode .hero-card h3{font-size:22px;min-height:48px}.setup-navigation{padding:8px 16px}.setup-progress{margin-bottom:10px}.setup-mode .selection-panel{padding:20px}.setup-mode .selection-heading h2{font-size:32px}}
@media(max-width:720px) and (orientation:landscape){#app:not(.setup-mode) .faction.wei{right:124px;width:17vw}#app:not(.setup-mode) .wave-indicator{left:46%}.battlefield>.general-status{left:22%;width:28%;grid-template-columns:34px minmax(0,1fr)}.battlefield .battle-skill-overlay{right:98px}.basic-attack{right:14px}.battlefield>#home-button{right:16px}.battlefield .level-badge{font-size:12px;min-width:21px;height:21px}.battlefield .general-name strong{font-size:12px}.joystick{width:100px;left:16px}}


/* Shared grid tracks own the HUD geometry, including phone safe-area insets. */
#app:not(.setup-mode){--hud-left:max(16px,env(safe-area-inset-left));--hud-right:max(16px,env(safe-area-inset-right));--hud-bottom:max(12px,env(safe-area-inset-bottom));--skill:clamp(44px,9vh,72px);--ult:clamp(58px,11.7vh,94px);--attack:clamp(72px,14vh,116px);--control-gap:18px}
#app:not(.setup-mode)>.topbar{display:grid;grid-template-columns:minmax(0,1fr) 116px minmax(0,1fr);grid-template-rows:auto;column-gap:18px;align-items:start;justify-content:normal;height:auto;min-height:74px;padding:8px var(--hud-right) 12px var(--hud-left);inset:0 0 auto;flex-wrap:nowrap}
#app:not(.setup-mode) .topbar .scoreboard{display:contents}
#app:not(.setup-mode) .topbar .faction{position:static;inset:auto;display:flex;flex-direction:column;align-items:stretch;gap:4px;width:100%;max-width:280px;min-width:0;margin:0;transform:none}
#app:not(.setup-mode) .topbar .faction.shu{grid-area:1/1;justify-self:start;text-align:left}
#app:not(.setup-mode) .topbar .faction.wei{max-width:280px;text-align:right;justify-self:end}
#app:not(.setup-mode) .topbar .faction-name{font-size:clamp(14px,1.75vw,24px);line-height:1.1;letter-spacing:.025em;white-space:nowrap}
#app:not(.setup-mode) .topbar .base-meter{width:100%;height:6px;flex-shrink:0}
#app:not(.setup-mode) .topbar .base-number{font:12px/1.1 Georgia,serif;white-space:nowrap}
#app:not(.setup-mode) .topbar .faction-resources{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:3px 8px;min-width:0}
#app:not(.setup-mode) .topbar .faction.wei .faction-resources{flex-direction:row-reverse}
#app:not(.setup-mode) .topbar .team-gold{display:inline-flex;align-items:center;gap:3px;min-width:0;white-space:nowrap;color:#f1cc7d;font:11px/1.1 Arial,sans-serif;font-variant-numeric:tabular-nums}
#app:not(.setup-mode) .topbar .team-gold .icon{width:12px;height:12px}
#app:not(.setup-mode) .topbar .team-gold>span{font-size:8px;letter-spacing:.04em;color:#d5bf8a}
#app:not(.setup-mode) .topbar .enemy-header{grid-area:1/3;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:start;min-width:0}
#app:not(.setup-mode) .topbar .header-actions{position:static;inset:auto;grid-area:auto;display:flex;gap:6px;margin:0;justify-self:end;align-items:start;pointer-events:auto}
#app:not(.setup-mode) .topbar #shop-button{min-width:66px;min-height:44px;width:auto;padding:4px 6px;flex-shrink:0}
#app:not(.setup-mode) .topbar #menu-button{width:44px;height:44px;flex-shrink:0}
#app:not(.setup-mode) .topbar .wave-indicator{grid-area:1/2;position:static;inset:auto;transform:none;width:116px;min-width:0;max-width:116px;margin:-8px 0 0;padding:9px 6px 8px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;font:18px/1.1 Georgia,serif;border-radius:0 0 14px 14px}
#app:not(.setup-mode) .topbar .wave-indicator>span{white-space:nowrap}
#app:not(.setup-mode) .topbar .match-meta{display:flex;align-items:center;justify-content:center;gap:10px}
#app:not(.setup-mode) .topbar .match-meta .clock{font:12px/1 Arial,sans-serif;letter-spacing:0;margin:0}
#app:not(.setup-mode) .topbar .match-meta .score{position:static;inset:auto;display:flex;align-items:center;gap:3px;font:12px/1 Arial,sans-serif;margin:0;color:#d9cda9}
#app:not(.setup-mode) .topbar .score-divider{font:12px/1 Arial,sans-serif}
#app .battlefield .battle-dock{position:absolute;z-index:6;left:var(--hud-left);right:var(--hud-right);bottom:var(--hud-bottom);display:grid;grid-template-columns:clamp(100px,22vh,176px) minmax(0,1fr) auto;gap:clamp(14px,2.5vw,40px);align-items:end;pointer-events:none}
#app .battle-dock .mobile-hud{position:static;inset:auto;display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;height:auto;min-width:0;pointer-events:none;grid-area:1/1}
#app .battle-dock .joystick{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1;flex-shrink:0;order:0}
#app .battle-dock .mobile-brand{position:static;inset:auto;order:1;font-size:clamp(14px,1.8vw,25px);width:100%;line-height:1;margin:0}
#app .battle-dock .general-status{position:static;inset:auto;grid-area:1/2;display:grid;grid-template-columns:clamp(34px,6vw,72px) minmax(0,1fr);grid-template-rows:auto auto;gap:8px;align-self:end;align-items:center;justify-self:center;width:min(100%,370px);min-width:0;margin:0 0 4px;padding:0;border:0;pointer-events:none}
#app .battle-dock .hud-portrait{grid-area:1/1;width:100%;height:auto;aspect-ratio:1;min-width:0;min-height:0;margin:0;box-sizing:border-box;border-radius:50%;background-size:cover;background-repeat:no-repeat}
#app .battle-dock .level-badge{left:50%;right:auto;bottom:-5px;transform:translateX(-50%);color:#fff0c9}
#app .battle-dock .status-content{grid-area:1/2;min-width:0;gap:4px}
#app .battle-dock .general-name strong{font-size:clamp(12px,1.3vw,18px)}
#app .battle-dock #hud-inventory{grid-area:2/1/3/3;width:100%;min-width:0;gap:4px;pointer-events:auto}
#app .battle-dock #hud-inventory .inventory-slot{min-width:0;max-width:none;min-height:0;height:auto;aspect-ratio:1;padding:0}
#app .battle-dock .combat-controls{grid-area:1/3;display:grid;grid-template-columns:var(--skill) var(--skill) var(--ult) var(--attack);grid-template-rows:var(--ult) var(--attack);column-gap:var(--control-gap);row-gap:48px;align-items:end;justify-items:center;padding:36px 6px 24px;pointer-events:none}
#app .combat-controls .battle-skill-overlay,#app .combat-controls #abilities,#app .combat-controls #abilities.has-points{display:contents;position:static;inset:auto;transform:none;width:auto;max-width:none;margin:0;padding:0}
#app .combat-controls .ability-slot{position:relative;grid-row:2;align-self:end;justify-self:center;width:var(--skill);height:var(--skill);margin:0;padding:0;min-width:0}
#app .combat-controls .ability-slot:nth-child(1){grid-area:2/1}
#app .combat-controls .ability-slot:nth-child(2){grid-area:2/2}
#app .combat-controls .ability-slot:nth-child(3){grid-area:2/3}
#app .combat-controls .ability-slot.ultimate-slot{grid-area:1/4;align-self:end;justify-self:center;width:var(--ult);height:var(--ult);margin:0;padding:0}
#app .combat-controls .ability-slot>.ability{display:flex;align-items:center;justify-content:center;position:relative;width:100%;height:100%;min-width:0;min-height:0;margin:0;padding:0;pointer-events:auto}
#app .combat-controls .ability .skill-emblem{width:76%;height:76%}
#app .combat-controls .ability-key{top:auto;bottom:-22px;left:-8px;right:-8px;line-height:14px;font-size:12px}
#app .combat-controls .ability-rank{bottom:3px}
#app .combat-controls .quick-skill-upgrade{position:absolute;top:-36px;left:50%;width:44px;height:28px;min-height:28px;margin:0;transform:translateX(-50%);z-index:2;pointer-events:auto}
#app .combat-controls #basic-attack{position:relative;inset:auto;grid-area:2/4;align-self:end;justify-self:center;width:var(--attack);height:var(--attack);margin:0;padding:6px;pointer-events:auto}
#app .combat-controls #home-button{position:relative;inset:auto;grid-area:1/4;align-self:center;justify-self:center;display:flex;flex-direction:column;align-items:center;justify-content:center;width:54px;min-width:0;height:48px;min-height:48px;margin:0;padding:4px;gap:3px;background:#080d17db;border:1px solid #bda267;font-size:12px;pointer-events:auto}
#app .combat-controls #home-button kbd{display:none}
#app .battlefield #battle-map{top:78px;left:var(--hud-left);right:auto;width:clamp(80px,10vw,138px)}
#app .battlefield .battle-messages{position:absolute;top:78px;bottom:auto;left:50%;right:auto;transform:translateX(-50%);width:min(420px,46vw);max-width:none;display:flex;flex-direction:column;gap:6px;pointer-events:none}
#app .battlefield .battle-messages .toast{position:static;inset:auto;transform:none;width:100%;max-width:100%;max-height:none;height:auto;margin:0;padding:6px 10px;overflow:visible;font-size:12px;line-height:1.35}
#app .battlefield .battle-messages .toast:empty{display:none}
@media(max-height:500px) and (orientation:landscape){
 #app .battle-dock{column-gap:18px}
 #app .battle-dock .mobile-hud{gap:10px}
 #app .battle-dock .general-status{width:min(100%,280px);gap:6px;grid-template-columns:38px minmax(0,1fr)}
 #app .battle-dock .combat-controls{row-gap:40px}
 #app .battlefield .battle-messages{top:70px}
 #app .battlefield #battle-map{top:74px}
}
@media(max-width:760px) and (orientation:landscape){
 #app:not(.setup-mode){--control-gap:14px;--attack:68px;--ult:58px;--skill:44px}
 #app:not(.setup-mode)>.topbar{grid-template-columns:minmax(0,1fr) 94px minmax(0,1fr);column-gap:12px}
 #app:not(.setup-mode) .topbar .wave-indicator{width:94px;max-width:94px;font-size:16px}
 #app:not(.setup-mode) .topbar .enemy-header{gap:10px}
 #app:not(.setup-mode) .topbar #shop-button{min-width:52px;padding:4px}
 #app:not(.setup-mode) .topbar .header-actions{gap:4px}
 #app:not(.setup-mode) .topbar .faction-name{font-size:14px;letter-spacing:0}
 #app .battlefield .battle-dock{grid-template-columns:92px minmax(0,1fr) auto;gap:12px}
 #app .battle-dock .general-status{grid-template-columns:30px minmax(0,1fr);gap:5px}
 #app .battle-dock #hud-inventory{gap:3px}
 #app .battle-dock .combat-controls{padding-left:6px;padding-right:6px}
}
@media(max-width:640px) and (orientation:landscape){
 #app .battle-dock .general-status{grid-template-columns:minmax(0,1fr)}
 #app .battle-dock .hud-portrait{display:none}
 #app .battle-dock .status-content{grid-area:1/1}
 #app .battle-dock #hud-inventory{grid-area:2/1}
 #app:not(.setup-mode)>.topbar{grid-template-columns:minmax(0,1fr) 86px minmax(0,1fr);column-gap:8px}
 #app:not(.setup-mode) .topbar .wave-indicator{width:86px;max-width:86px}
 #app:not(.setup-mode) .topbar .enemy-header{gap:6px}
 #app:not(.setup-mode) .topbar .base-number{font-size:10px}
 #app:not(.setup-mode) .topbar .team-gold{font-size:10px}
}

/* Compact two-row cards keep more of the battlefield visible. */
#app .battlefield #squad-strip{display:grid;position:absolute;top:74px;left:var(--hud-left);right:auto;bottom:auto;grid-template-columns:1fr;gap:3px;width:clamp(118px,12vw,152px);max-width:none;z-index:4;pointer-events:none}
#app #squad-strip .squad-card{display:block;position:relative;padding:4px 5px;border:1px solid #ccb97a38;border-left:2px solid #90c7a7;border-radius:3px;background:#07121b66;opacity:1;backdrop-filter:blur(3px);min-height:0;margin:0}
#app #squad-strip .enemy-squad{background:#21101766;border-left-color:#d78c85}
#app #squad-strip .squad-fallen{opacity:.5}
#app #squad-strip .squad-portrait,#app #squad-strip .squad-level{display:none}
#app #squad-strip .squad-copy{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:3px 5px;min-width:0}
#app #squad-strip .squad-copy strong{grid-area:1/1;font:10.5px/1.1 Georgia,serif;margin:0;min-height:0;max-height:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#f3e8cf}
#app #squad-strip .squad-role{grid-area:1/2;font:8px/1 Arial,sans-serif;letter-spacing:0;display:block}
#app #squad-strip .squad-resources{grid-area:2/1/3/3;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5px;margin:0}
#app #squad-strip .squad-health,#app #squad-strip .squad-mana{grid-area:auto;display:flex;flex-direction:column;gap:2px;height:auto;background:none;margin:0;color:#e3e4df;font:9px/1 Arial,sans-serif;min-width:0;white-space:nowrap}
#app #squad-strip .squad-health i,#app #squad-strip .squad-mana i{display:block;height:2px;max-width:100%;min-width:0}
#app #squad-strip .squad-health i{background:#e87979}#app #squad-strip .squad-mana i{background:#58bbff}
#app .battlefield #squad-strip .enemy-squad .squad-resources{grid-template-columns:minmax(0,1fr)}
#app .battlefield #squad-strip .enemy-squad .squad-mana{display:none}
#app .battlefield #battle-map{left:calc(var(--hud-left) + clamp(118px,12vw,152px) + 10px);top:76px;width:70px;opacity:.65}
@media(max-height:390px) and (orientation:landscape){#app .battlefield #squad-strip{top:67px;gap:3px}#app #squad-strip .squad-card{padding:3px 5px}#app .battlefield #battle-map{top:68px;width:60px}}
/* The informational minimap shares the status column, away from the left panel. */
#app .battle-dock #battle-map{position:static;inset:auto;transform:none;grid-area:1/1/2/3;justify-self:center;width:84px;max-width:100%;opacity:.7;margin:0 0 5px;pointer-events:none}
#app .battle-dock .hud-portrait{grid-area:2/1}
#app .battle-dock .status-content{grid-area:2/2}
#app .battle-dock #hud-inventory{grid-area:3/1/4/3}
@media(max-width:640px) and (orientation:landscape){#app .battle-dock #battle-map{grid-area:1/1;width:70px}#app .battle-dock .status-content{grid-area:2/1}#app .battle-dock #hud-inventory{grid-area:3/1}}

/* Size preferences also resize grid tracks, preserving space between controls. */
#app:not(.setup-mode){--skill:min(8vw,max(50px,calc(clamp(50px,10.35vh,83px)*var(--skills-scale,1))));--ult:calc(var(--skill)*1.3);--joystick-size:min(19vw,calc(clamp(100px,22vh,176px)*var(--joystick-scale,1)))}
#app .battlefield .battle-dock{grid-template-columns:var(--joystick-size) minmax(0,1fr) auto}
.controls-dialog{width:460px;background:#0b1421ed}
.controls-dialog label{display:flex;justify-content:space-between;margin-top:18px;color:#f3dfb5}
.controls-dialog input[type=range]{width:100%;min-height:44px;accent-color:#dab96f}
.control-actions{display:flex;justify-content:space-between;gap:16px;margin-top:16px}
.control-note{font-size:12px;opacity:.7}
.controls-dialog select{display:block;width:100%;min-height:44px;margin-top:8px;padding:10px 12px;border:1px solid #b99b60;border-radius:3px;background:#142033;color:#f3dfb5;font-size:16px}
#movement-mode-description{font-size:14px;line-height:1.5;opacity:.9}
.controls-dialog input:disabled{opacity:.4}

/* Mouse controls free the left side of the battlefield for ground commands. */
#app[data-control-mode="pc"] .battle-dock .mobile-hud{display:none}
#app[data-control-mode="pc"] .battlefield .battle-dock{grid-template-columns:minmax(0,1fr) auto}
#app[data-control-mode="pc"] .battle-dock .general-status{grid-area:1/1;justify-self:start}
#app[data-control-mode="pc"] .battle-dock .combat-controls{grid-area:1/2}

/* Floating movement starts at the left thumb; only the active pointer owns it. */
#app .battle-dock .mobile-hud .floating-joystick{position:fixed;left:var(--joystick-x,25vw);top:var(--joystick-y,65vh);right:auto;bottom:auto;width:var(--joystick-size);height:var(--joystick-size);transform:translate(-50%,-50%);visibility:hidden;pointer-events:none;z-index:20}
#app .battle-dock .mobile-hud .floating-joystick.engaged{visibility:visible}
#app .combat-controls .ability-slot>.ability{overflow:visible;touch-action:none}
#app .battlefield,#app .combat-controls button{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#start-battle-button{white-space:nowrap;min-height:44px}
#app .combat-controls .ability-slot>.ability::after{content:"";position:absolute;inset:-6px;border-radius:50%;pointer-events:auto;background:transparent}

/* Hold progress and a labelled, glowing ring distinguish manual from auto hits. */
#app .combat-controls #basic-attack{overflow:visible;gap:2px;-webkit-touch-callout:none}
#app .combat-controls #basic-attack>.icon{width:36%;height:36%}
#basic-attack>span{font-size:12px;line-height:1.1}
#attack-mode-label{font:700 8px/1.2 Arial,sans-serif;letter-spacing:.08em;color:#d5c9ac;white-space:nowrap}
#basic-attack .attack-mode-ring{position:absolute;inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px);fill:none;stroke-width:3;pointer-events:none;transform:rotate(-90deg)}
.attack-ring-track{stroke:#a38c5566}.attack-ring-progress{stroke:#ffda81;stroke-linecap:round;stroke-dasharray:var(--attack-hold-progress,0) 100}
.attack-ring-orbit{display:none;stroke:#e2fff1;stroke-linecap:round;stroke-dasharray:8 92}
#basic-attack.attack-holding .attack-ring-track{stroke:#b9964e99}
#basic-attack.attack-holding #attack-mode-label{color:#ffe09b}
#app .combat-controls #basic-attack:is([data-attack-mode="auto"],[data-attack-mode="repeat"]){border-color:#8ce7b1;box-shadow:0 0 0 3px #10261d,0 0 14px #61e59b66,inset 0 0 16px #3b955733}
#basic-attack:is([data-attack-mode="auto"],[data-attack-mode="repeat"]) .attack-ring-progress{stroke:#78eca8;filter:drop-shadow(0 0 2px #66eea8)}
#basic-attack:is([data-attack-mode="auto"],[data-attack-mode="repeat"]) .attack-ring-orbit{display:block;animation:attack-auto-orbit 2s linear infinite}
#basic-attack:is([data-attack-mode="auto"],[data-attack-mode="repeat"]) #attack-mode-label{color:#aaffcd}
#basic-attack:disabled .attack-ring-orbit{animation-play-state:paused}
@keyframes attack-auto-orbit{to{stroke-dashoffset:-100}}
@media(prefers-reduced-motion:reduce){#basic-attack:is([data-attack-mode="auto"],[data-attack-mode="repeat"]) .attack-ring-orbit{animation:none}}
#basic-attack.attack-holding:is([data-attack-mode="auto"],[data-attack-mode="repeat"]) .attack-ring-progress{stroke:#ffda81;filter:none}
#basic-attack.attack-holding:is([data-attack-mode="auto"],[data-attack-mode="repeat"]) .attack-ring-orbit{display:none}
#app .ability.skill-aiming{border-color:#ffe1b2;box-shadow:0 0 0 3px #faaa6844,0 0 20px #ff713566;touch-action:none}
#app .ability.skill-cancelling{border-color:#ff657c;box-shadow:0 0 0 3px #ff395344}
.skill-aim-cancel{position:absolute;z-index:15;right:24px;top:72px;width:106px;height:84px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;padding:4px;border:1px dashed #e6b69a;border-radius:18px;background:#171c23df;color:#ffdbc5;pointer-events:auto;touch-action:none;text-align:center;font:14px/1.3 sans-serif}
.skill-aim-cancel b{font-size:30px;line-height:1}.skill-aim-cancel.active{background:#6f1b35e8;color:#fff;border-color:#ff6882}.skill-aim-cancel.hidden{display:none}
@media(max-height:500px){.skill-aim-cancel{top:38px;right:24px;width:100px;height:65px}}