/* Compact selections and a skill-first battle HUD. */
.setup-shell{padding:16px 20px 0}
.setup-progress{margin-bottom:14px;gap:8px}
.setup-progress button{padding:9px 8px}
.setup-mode>.topbar{height:64px;flex-basis:64px}
.setup-mode .selection-panel{padding:18px}
.setup-mode .selection-heading{margin-bottom:14px}
.setup-mode .selection-heading h2{font-size:32px;margin:6px 0}
.setup-mode .selection-heading p{font-size:12px}
.setup-mode .hero-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.setup-mode .hero-card{display:grid;grid-template-columns:62px minmax(0,1fr);align-items:center}
.setup-mode .hero-card .hero-art{height:94px;width:62px;align-self:stretch}
.setup-mode .hero-card-copy{padding:7px 8px}
.setup-mode .hero-card h3{font-size:21px;min-height:0;margin:4px 0;line-height:1.05}
.setup-mode .hero-role{font-size:9px;letter-spacing:.03em}
.setup-mode .hero-title{font-size:10px;min-height:0;line-height:1.3}
.setup-mode .chosen-badge{top:auto;bottom:4px;left:3px;right:auto;padding:3px;font-size:8px;letter-spacing:0;z-index:1}
.setup-mode .selected-skill-preview{padding-top:12px;gap:9px}
.setup-mode .preview-skill{width:46px;height:44px}
.setup-mode .preview-skill .skill-emblem{width:32px;height:32px}
.setup-mode .match-settings{padding-top:12px;margin-top:12px}
.setup-mode .match-settings-heading{margin-bottom:8px}
.setup-mode .lineup-controls{gap:9px}
.setup-mode .lineup-controls label{font-size:11px;gap:5px}
.setup-mode .lineup-controls select{font-size:12px;min-height:42px;padding:6px}
.setup-mode .difficulty-note{font-size:11px;margin-top:8px}
.setup-mode .match-roster{margin:10px 0 0;gap:6px}
.setup-mode .roster-entry{padding:5px;gap:6px}
.setup-mode .roster-entry .squad-portrait{width:25px;flex-basis:25px;height:34px}
.setup-mode .roster-entry strong{font-size:15px;margin:2px 0}
.setup-mode .roster-entry .squad-role{font-size:9px}
.setup-mode .selection-bottom{margin-top:10px;padding-top:10px}
.setup-mode .selection-summary p{font-size:12px}
.setup-mode .selection-notes{margin-top:8px}
.setup-navigation{padding:10px 14px;gap:12px}
.setup-summary strong{font-size:20px}
.setup-summary span{font-size:11px}
.setup-page>.shop-content{padding:18px}
.shop-dialog{width:min(1180px,calc(100% - 18px));padding:16px}
.shop-content .shop-header{gap:12px}
.shop-content .shop-header h2{font-size:29px;margin:5px 0 7px}
.shop-content .shop-header .eyebrow{font-size:10px;letter-spacing:.12em}
.shop-content .shop-gold{font-size:21px;padding-top:2px}
.shop-content .shop-hero-line{font-size:11px;gap:3px 10px}
.shop-content .gear-limit-note{margin:7px 0;font-size:11px;line-height:1.4;padding-left:8px}
.gear-limit-note summary{cursor:pointer;width:fit-content;padding:5px 0;color:#d2c095}
.gear-limit-note p{margin-top:4px;max-width:760px}
.shop-content .shop-category-list{padding:8px 0;gap:5px}
.shop-content .shop-category{font-size:11px;min-height:36px;padding:6px 9px}
.shop-content .shop-layout{padding:8px 0}
.shop-content .shop-catalog{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;max-height:52dvh;padding-right:4px}
.shop-content .catalog-item{padding:7px;gap:5px;min-height:102px}
.shop-content .catalog-inspect{grid-template-columns:30px minmax(0,1fr);gap:6px;min-height:36px}
.shop-content .catalog-emblem,.shop-content .catalog-item .item-emblem{width:30px;height:30px}
.shop-content .catalog-copy{gap:2px}
.shop-content .catalog-copy strong{font-size:12px;line-height:1.2}
.shop-content .catalog-copy small{display:none}
.shop-content .legendary-label{font-size:8px;margin:1px 0;letter-spacing:.03em}
.shop-content .catalog-actions{grid-template-columns:minmax(0,1fr) auto;gap:4px}
.shop-content .catalog-buy{font-size:11px;min-height:36px;padding:5px 3px}
.shop-content .catalog-details{font-size:10px;min-height:36px;padding:5px}
.shop-content .catalog-reason{font-size:9px;line-height:1.25;min-height:0}
.shop-content .shop-inventory-heading{margin:10px 0 6px}
.shop-content .shop-inventory{gap:5px}
.shop-content .shop-inventory .inventory-slot{min-height:48px;padding:4px}
.shop-content .shop-inventory .item-emblem{width:26px;height:26px}
.shop-content .shop-inventory .slot-name{font-size:9px}
.shop-content .shop-footer{padding-top:8px;gap:12px}
.shop-content .shop-footer .shop-message{font-size:10px}
.shop-dialog .shop-layout{min-height:80px;overflow-y:auto;flex:1}
.shop-dialog .shop-catalog{max-height:none;overflow:visible}
.command-bar{grid-template-columns:minmax(0,1fr) 230px 170px;grid-template-areas:'status supplies map' 'mana mana mana';gap:6px 20px;padding:10px 20px 8px;min-height:0;align-items:center}
.command-bar>.minimap-wrap{grid-area:map;padding-left:14px}
.command-bar .general-status{grid-area:status;gap:8px;padding:0;border:0;min-height:42px}
.command-bar .hud-portrait{width:30px;flex-basis:30px;height:42px}
.command-bar .level-badge{min-width:18px;height:18px;font-size:10px;padding:2px;bottom:0;box-shadow:none}
.command-bar .status-content{display:grid;grid-template-columns:minmax(100px,.7fr) minmax(120px,1.3fr) auto;gap:3px 10px;align-items:center}
.command-bar .general-name{grid-column:1;grid-row:1/3;display:block;margin:0}
.command-bar .general-name>strong{display:block;font-size:18px;line-height:1.1}
.command-bar .general-name>span{font-size:9px;letter-spacing:.03em}
.command-bar .health-meter{grid-column:2;grid-row:1;height:13px;margin:0}
.command-bar .stat-meter>span{font-size:9px;line-height:1}
.command-bar .xp-track{grid-column:2;grid-row:2;margin:0}
.command-bar .xp-label{grid-column:3;grid-row:1/3;margin:0;font-size:9px}
.command-bar .combat-stats{grid-column:3;grid-row:1;margin:0;gap:9px;font-size:10px}
.command-bar .combat-stats b{font-size:10px}
.command-bar .combat-stats .icon{width:12px;height:12px}
.command-bar .combat-stats>span:last-child{display:none}
.command-bar>.mana-meter{grid-area:mana;height:12px;margin:2px 0 0;width:100%}
.command-bar .mana-meter>i{background:linear-gradient(90deg,#326f87,#69b5c9)}
.command-bar .supply-panel{grid-area:supplies;display:flex;flex-direction:column;padding:0;gap:7px}
.command-bar .supply-actions{display:flex;flex-direction:column;gap:6px}
.command-bar .attack-button,.command-bar .supply-button{min-height:36px}
.command-bar .equipment{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
.command-bar .inventory-slot{min-height:34px}
.squad-strip{width:170px}
.squad-strip .squad-card{padding:4px 6px}
.squad-strip .squad-copy strong{font-size:11px}
.squad-strip .squad-health{height:2px}
.battlefield .battle-skill-overlay{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);width:min(440px,calc(100% - 32px));z-index:6;pointer-events:none}
.battle-skill-overlay .ability-heading{justify-content:flex-end;margin:0 0 5px;min-height:0}
.battle-skill-overlay .ability-heading .hud-label,.battle-skill-overlay .ability-hint{display:none}
.battle-skill-overlay .skill-info-button{min-height:32px;padding:5px 9px;font-size:10px;background:#10251b99;border:1px solid #c5ac6955;opacity:.8;pointer-events:auto;text-shadow:0 1px 2px #06180b}
.battle-skill-overlay .skill-info-button.points-ready{background:#cfb271bc;color:#17271b;text-shadow:none}
.battle-skill-overlay .abilities{gap:8px}
.battle-skill-overlay .ability{height:54px;margin-bottom:17px;opacity:.8;background:linear-gradient(145deg,#41543ab3,#162b2199);pointer-events:auto}
.battle-skill-overlay .ability.ability-3{background:linear-gradient(145deg,#776332bb,#302d1899)}
.battle-skill-overlay .ability .skill-emblem{width:37px;height:37px}
.battle-skill-overlay .ability-name{font-size:10px;top:calc(100% + 4px);color:#efe8cb;text-shadow:0 1px 3px #03150b,0 0 4px #03150b}
.battle-skill-overlay .quick-skill-upgrade{pointer-events:auto;opacity:.82;background:#c7a65cc9}
.battle-skill-overlay button:hover,.battle-skill-overlay button:focus-visible,.battle-skill-overlay button:active{opacity:1}
.battle-tools{top:148px;bottom:auto;left:auto;right:16px;max-width:170px}
.battle-tools .enemy-intel{max-width:none;width:170px;padding:5px 7px;font-size:10px;background:#251e1970;opacity:.65}
.respawn{top:50%;bottom:auto;transform:translate(-50%,-50%);z-index:14;width:min(340px,calc(100% - 32px));min-width:0;gap:7px;padding:16px 20px;max-height:calc(100% - 20px);overflow:auto}
.respawn>span:not(:first-child),.respawn small{font-size:14px;line-height:1.35;letter-spacing:normal;color:#d4c3a9}
.respawn .primary-button{min-height:44px;padding:10px 14px;margin-top:5px;font-size:16px;touch-action:manipulation}
.respawn .primary-button:disabled{opacity:.55;cursor:not-allowed}
#buyback-status:empty{display:none}
@media(max-width:1180px){
 .command-bar{grid-template-columns:minmax(0,1fr) 185px;grid-template-areas:'status supplies' 'mana mana';gap:6px 14px;padding:9px 14px 7px}
}


@media(max-width:1050px){
 .setup-mode .hero-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .shop-content .shop-catalog{grid-template-columns:repeat(3,minmax(0,1fr))}
 .command-bar .status-content{grid-template-columns:minmax(95px,.8fr) minmax(110px,1.2fr)}
 .command-bar .combat-stats{display:none}
 .command-bar .xp-label{grid-column:2;grid-row:3}
 .command-bar .equipment{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:640px){
 .setup-shell{padding:10px 9px 0}
 .setup-mode>.topbar{height:54px;flex-basis:54px}
 .setup-progress{margin-bottom:9px;gap:4px}
 .setup-progress button{padding:5px 2px;gap:4px}
 .setup-mode .selection-panel{padding:12px 9px}
 .setup-mode .selection-heading{margin-bottom:10px}
 .setup-mode .selection-heading h2{font-size:27px}
 .setup-mode .selection-heading .eyebrow{font-size:9px}
 .setup-mode .selection-heading p{font-size:11px}
 .setup-mode .hero-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
 .setup-mode .hero-card{grid-template-columns:42px minmax(0,1fr)}
 .setup-mode .hero-card .hero-art{width:42px;height:80px}
 .setup-mode .hero-card-copy{padding:5px 6px}
 .setup-mode .hero-card h3{font-size:17px;line-height:1.05;margin:3px 0}
 .setup-mode .hero-role{font-size:8px}
 .setup-mode .hero-title{font-size:9px}
 .setup-mode .chosen-badge{font-size:6px;padding:3px 2px;left:2px}
 .setup-mode .match-roster{grid-template-columns:repeat(2,minmax(0,1fr))}
 .setup-mode .roster-entry strong{font-size:14px}
 .setup-mode .selection-summary{gap:7px}
 .setup-mode .selection-summary p{font-size:11px}
 .setup-navigation{padding:8px 10px;gap:7px;grid-template-columns:65px minmax(0,1fr)}
 .setup-navigation .primary-button{min-height:44px;padding:9px 12px;font-size:13px}
 .setup-mode[data-page=heroes] .setup-summary strong,.setup-summary strong{font-size:18px}
 .setup-summary span{font-size:10px}
 .setup-page>.shop-content{padding:12px 9px}
 .shop-dialog{padding:12px;max-height:calc(100dvh - 12px)}
 .shop-content .shop-header h2{font-size:25px}
 .shop-content .shop-header .eyebrow{font-size:8px}
 .shop-content .shop-gold{font-size:18px}
 .shop-content .shop-hero-line{font-size:10px;gap:2px 8px}
 .shop-content .shop-category-list{padding:6px 0}
 .shop-content .shop-catalog{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;max-height:46dvh}
 .shop-content .catalog-item{min-height:98px;padding:6px;gap:4px}
 .shop-content .catalog-inspect{grid-template-columns:28px minmax(0,1fr);gap:5px}
 .shop-content .catalog-emblem,.shop-content .catalog-item .item-emblem{width:28px;height:28px}
 .shop-content .catalog-copy strong{font-size:11px}
 .shop-content .catalog-buy{font-size:10px}
 .shop-content .catalog-details{font-size:9px;padding:4px}
 .shop-dialog .shop-layout{max-height:none;min-height:80px}
 .shop-dialog .shop-catalog{max-height:none}
 .shop-content .shop-inventory .slot-name{display:none}
 .shop-content .shop-inventory .inventory-slot{min-height:40px}
 .shop-content .shop-footer{gap:6px;padding-top:7px}
 .shop-content .shop-footer .shop-message{font-size:9px}
 #app:not(.setup-mode){min-height:600px}
 .command-bar{grid-template-columns:minmax(0,1fr) 108px;grid-template-areas:'status actions' 'inventory inventory' 'mana mana';gap:5px 10px;padding:8px 12px 7px}
 .command-bar .general-status{min-height:0;gap:7px}
 .command-bar .hud-portrait{width:28px;flex-basis:28px;height:40px}
 .command-bar .status-content{display:block}
 .command-bar .general-name{margin:0 0 5px}
 .command-bar .general-name>strong{font-size:17px}
 .command-bar .general-name>#hero-role{display:none}
 .command-bar .health-meter{height:12px}
 .command-bar .xp-track{margin-top:4px}
 .command-bar .xp-label{margin-top:3px;font-size:9px}
 .command-bar .supply-panel{display:contents}
 .command-bar .supply-actions{grid-area:actions;display:flex;gap:5px}
 .command-bar .attack-button,.command-bar .supply-button{min-height:34px;padding:5px;align-self:stretch}
 .command-bar .attack-button{font-size:10px}
 .command-bar .supply-button>span:last-child{font-size:9px}
 .command-bar .equipment{grid-area:inventory;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
 .command-bar .inventory-slot{min-height:34px}
 .squad-strip{width:151px}
 .squad-strip .squad-card{padding:4px}
 .squad-strip .squad-copy strong{font-size:10px}
 .squad-strip .squad-role{font-size:8px}
 .battlefield .battle-skill-overlay{bottom:9px;width:min(340px,calc(100% - 24px))}
 .battle-skill-overlay .abilities{gap:7px}
 .battle-skill-overlay .ability{height:50px;margin-bottom:16px}
 .battle-skill-overlay .ability .skill-emblem{width:34px;height:34px}
 .battle-skill-overlay .ability-name{font-size:9px}
 .battle-skill-overlay .skill-info-button{font-size:10px;min-height:32px}
 .battle-tools{top:126px;right:12px;max-width:132px}
 .battle-tools .enemy-intel{width:132px;font-size:9px;padding:4px 5px}
}

/* Compact item rows with inline descriptions and a single purchase control. */
.shop-content .catalog-item{display:grid;grid-template-columns:minmax(0,1fr) 52px;align-items:center;gap:6px;min-height:94px;padding:8px}
.shop-content .catalog-inspect{grid-template-columns:26px minmax(0,1fr);align-items:start;gap:6px;min-height:0}
.shop-content .catalog-emblem,.shop-content .catalog-item .item-emblem{width:26px;height:26px}
.shop-content .catalog-copy{min-width:0;gap:3px}
.shop-content .catalog-copy strong{font-size:12px;line-height:1.25}
.shop-content .catalog-copy .catalog-description{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:10px;line-height:1.4;margin:0;color:#becbb5}
.shop-content .catalog-copy .catalog-price{display:block;font-size:10px;line-height:1.3;margin:0;color:#e4c47c}
.shop-content .catalog-buy{width:52px;min-height:34px;height:auto;padding:5px 2px;font-size:10px;line-height:1.3;align-self:center}

/* One small menu leaves the center of the header for the wave. */
#app>.topbar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px;height:54px;flex-basis:54px;padding:8px 14px;position:relative}
.topbar .scoreboard{grid-column:1;justify-self:start;gap:7px}
.topbar .faction{width:38px}.topbar .faction-name{font-size:10px}
.topbar .score{font-size:21px;gap:5px}.topbar .clock{font-size:10px;margin-left:2px}
.topbar .header-actions{grid-column:3;justify-self:end;margin:0}
.topbar .wave-indicator{grid-column:2;grid-row:1;position:static;max-width:none;width:auto;display:flex;align-items:center;flex-wrap:nowrap;gap:9px;margin:0;padding:0;background:none;border:0;transform:none;font-size:11px}
.topbar .wave-indicator b{font-size:19px;font-weight:600;color:#f1d79e}
.topbar #wave-countdown{display:inline;font-size:11px;white-space:nowrap}.topbar .wave-divider{display:block}
#menu-button{width:36px;height:36px;border:1px solid #b9a06955;background:#1c3023b3;border-radius:5px}
.game-menu{width:min(430px,calc(100% - 24px));max-height:calc(100dvh - 24px);padding:20px;overflow:auto}
.game-menu h1{font:600 30px/1.2 var(--serif);margin:6px 0;color:#ebd6a2}
.menu-subtitle{font-size:12px;color:#aebeaa;margin:0 0 16px}
.menu-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0}
.menu-options>button,.game-menu #relics-button{display:flex;align-items:center;justify-content:flex-start;gap:8px;width:100%;min-height:44px;height:auto;margin:0;padding:9px 10px;border:1px solid #b6a36b55;border-radius:4px;background:#173126;color:#e3dcc1;font:13px/1.3 var(--sans);text-align:left}
.menu-options>button .icon{width:17px;height:17px;flex:0 0 17px}
.menu-options>button:disabled{opacity:.4}.menu-options>button:hover{background:#294633}
.menu-difficulty-label{display:grid;gap:7px;font-size:13px;color:#d4d9c5}
.menu-difficulty-label select{min-height:42px;width:100%;background:#12281e;color:#eee3c8;border:1px solid #bda16d77;padding:8px;border-radius:3px;font:14px var(--sans)}
.game-menu .difficulty-note,.menu-setting-note{font-size:12px;line-height:1.5;color:#b9c9b1;margin:8px 0}
.game-menu>.primary-button{margin-top:14px;width:100%;min-height:42px;font-size:14px}

/* Round combat controls: Q/W/E followed by a larger ultimate on the right. */
.battlefield .battle-skill-overlay{left:auto;right:20px;bottom:29px;transform:none;width:auto;max-width:calc(100% - 32px)}
.battle-skill-overlay .abilities{gap:14px;align-items:flex-end}
.battle-skill-overlay .ability-slot{flex:0 0 50px;width:50px}
.battle-skill-overlay .ability-slot.ultimate-slot{flex-basis:68px;width:68px;margin-left:5px}
.battle-skill-overlay .ability-slot>.ability{width:50px;height:50px;margin:0;border-radius:50%;overflow:visible;opacity:.82;border-color:#b6a26899;background:#1b3021b3}
.battle-skill-overlay .ultimate-slot>.ability{width:68px;height:68px;background:#564321b3;border-color:#e4c279b3}
.battle-skill-overlay .ability:before{border-radius:50%}
.battle-skill-overlay .ability .skill-emblem{width:38px;height:38px;border-radius:50%;overflow:hidden}
.battle-skill-overlay .ultimate-slot .skill-emblem{width:53px;height:53px}
.battle-skill-overlay .ability-name{display:none}
.battle-skill-overlay .ability-key{left:0;right:0;top:5px;text-align:center;font-size:8px;text-shadow:0 1px 3px #06180b}
.battle-skill-overlay .ability-cost{bottom:5px;right:8px;font-size:8px;text-shadow:0 1px 3px #06180b}
.battle-skill-overlay .ability-rank{left:50%;right:auto;bottom:-17px;transform:translateX(-50%);white-space:nowrap;font-size:9px;letter-spacing:1px;text-shadow:0 1px 3px #06180b}
.battle-skill-overlay .ability-cooldown{border-radius:50%;background:none;font-size:18px}
.battle-skill-overlay .ability-cooldown:not(:empty){background:#0b1b1480}
.battle-skill-overlay .ability-3 .ability-cooldown{font-size:17px}
.cooldown-ring{position:absolute;left:-6px;top:-6px;width:calc(100% + 12px);height:calc(100% + 12px);overflow:visible;pointer-events:none;fill:none;stroke-width:2.5;transform:rotate(-90deg)}
.cooldown-track{stroke:#bfc9a44d}.cooldown-progress{stroke:#f1cc79;stroke-linecap:round;stroke-dasharray:var(--cooldown-progress,0) 100}
.ultimate-ready .cooldown-track{stroke:#e9cd82b3}.ability-passive .cooldown-track{stroke:#75b8a980}
.battle-skill-overlay .abilities.has-points .ability-slot{padding-top:0}
.battle-skill-overlay .quick-skill-upgrade{top:-45px;left:50%;transform:translateX(-50%);width:38px;height:34px;border-radius:16px;gap:2px;font-size:17px;padding:2px}
.battle-skill-overlay .quick-skill-upgrade small{font-size:8px}

/* Keep skill descriptions together without oversized cards or repeated locks. */
.setup-page>.skills-content{padding:16px}
.skills-dialog{width:min(920px,calc(100% - 24px));max-height:calc(100dvh - 24px);padding:18px;overflow:auto}
.skills-content>h2,.setup-page .skills-content>h2{font-size:28px;margin:4px 0 6px}
.skills-content>#skills-identity,.setup-page .skills-content>#skills-identity{font-size:12px;line-height:1.45;margin:0 0 8px}
.skills-content .progression-summary{font-size:12px!important;line-height:1.4;padding:7px 10px;margin:8px 0}
.skills-content .skill-codex,.setup-page .skill-codex{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.skills-content .codex-skill,.setup-page .codex-skill{display:flex;gap:10px;min-height:0;padding:12px;align-items:flex-start}
.skills-content .codex-emblem{flex:0 0 38px;width:38px}.skills-content .codex-emblem .skill-emblem{width:38px;height:38px}
.skills-content .codex-emblem>b{font-size:10px;margin-top:4px}
.skills-content .codex-skill h3,.setup-page .codex-skill h3{font-size:20px;line-height:1.1;margin:4px 0 6px}
.skills-content .codex-skill p,.setup-page .codex-skill p{font-size:12px;line-height:1.5;margin:0 0 8px}
.skills-content .skill-targeting{font-size:10px;line-height:1.3}.skills-content .skill-meta{gap:3px 10px;margin:0}.skills-content .skill-meta>span{font-size:10px}
.skills-content .skill-upgrade{margin-top:9px;min-height:36px;padding:6px 8px;font-size:11px}
.skills-content .upgrade-reason{min-height:0;font-size:10px;line-height:1.3;margin-top:4px}
.skills-preview .skill-upgrade,.skills-preview .upgrade-reason{display:none}
.codex-rules{font-size:12px;color:#bdcbb3;margin:10px 0}.codex-rules summary{cursor:pointer;color:#d8c28b;padding:6px 0}
.skills-content .codex-note{font-size:12px;line-height:1.5;margin:4px 0 10px}
.skills-content .guide-link{font-size:12px}.skills-content>.primary-button{min-height:38px;padding:7px 13px;font-size:13px}
@media(max-width:640px){
 #app>.topbar{height:50px;flex-basis:50px;padding:7px 10px;gap:6px}
 .topbar .faction{display:none}.topbar .scoreboard{gap:6px}.topbar .score{font-size:18px;gap:4px}.topbar .clock{font-size:9px}
 .topbar .wave-indicator{gap:6px;font-size:9px}.topbar .wave-indicator b{font-size:17px}.topbar #wave-countdown{font-size:10px}
 .topbar .wave-divider{height:10px}
 .shop-content .catalog-item{grid-template-columns:minmax(0,1fr) 44px;padding:6px;gap:5px;min-height:86px}
 .shop-content .catalog-inspect{grid-template-columns:22px minmax(0,1fr);gap:4px}
 .shop-content .catalog-emblem,.shop-content .catalog-item .item-emblem{width:22px;height:22px}
 .shop-content .catalog-copy strong{font-size:11px}
 .shop-content .catalog-copy .catalog-description,.shop-content .catalog-copy .catalog-price{font-size:9px}
 .shop-content .catalog-buy{width:44px;min-height:32px;font-size:9px;overflow-wrap:anywhere}
 .battlefield .battle-skill-overlay{right:14px;bottom:27px;width:auto}
 .battle-skill-overlay .abilities{gap:12px}
 .battle-skill-overlay .ability-slot{flex-basis:44px;width:44px}
 .battle-skill-overlay .ability-slot>.ability{width:44px;height:44px}
 .battle-skill-overlay .ability-slot.ultimate-slot{flex-basis:60px;width:60px;margin-left:4px}
 .battle-skill-overlay .ultimate-slot>.ability{width:60px;height:60px}
 .battle-skill-overlay .ability .skill-emblem{width:33px;height:33px}
 .battle-skill-overlay .ultimate-slot .skill-emblem{width:46px;height:46px}
 .battle-skill-overlay .ability-key{font-size:7px;top:4px}.battle-skill-overlay .ability-rank{font-size:8px}
 .setup-page>.skills-content{padding:12px 10px}.skills-dialog{padding:13px}
 .skills-content>h2,.setup-page .skills-content>h2{font-size:25px}
 .skills-content .skill-codex,.setup-page .skill-codex{grid-template-columns:1fr;gap:7px;margin:10px 0}
 .skills-content .codex-skill,.setup-page .codex-skill{padding:9px;gap:8px}
 .skills-content .codex-emblem{flex-basis:30px;width:30px}.skills-content .codex-emblem .skill-emblem{width:30px;height:30px}
 .skills-content .codex-skill h3,.setup-page .codex-skill h3{font-size:18px;margin:3px 0 5px}
 .skills-content .codex-skill p,.setup-page .codex-skill p{font-size:12px;line-height:1.4;margin-bottom:6px}
 .skills-content .skill-upgrade{min-height:38px}
}
/* Attack categories keep the expanded roster easy to scan. */
.hero-filters{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 5px}
.hero-filters button{min-height:34px;padding:6px 10px;border:1px solid #b5a06b66;border-radius:4px;background:#183023;color:#d2dcc6;font:12px var(--sans)}
.hero-filters button small{font-size:11px;opacity:.7;margin-left:4px}
.hero-filters button[aria-pressed="true"]{background:#536045;color:#fff0c7;border-color:#d8bd78}
.hero-filter-note{font-size:12px;line-height:1.4;color:#b5c6aa;margin:5px 0 12px}
.hero-grid>.hero-card[hidden]{display:none!important}
@media(max-width:640px){.hero-filters{gap:4px}.hero-filters button{padding:6px 7px}.hero-filter-note{margin-bottom:8px}}

/* Regular abilities on the left, ultimate on the right; empty space stays playable. */
.battlefield .battle-skill-overlay{left:20px;right:20px;bottom:29px;width:auto;max-width:none;transform:none}
.battle-skill-overlay .ability-panel,.battle-skill-overlay .abilities{width:100%}
.battle-skill-overlay .abilities{display:flex;justify-content:flex-start}
.battle-skill-overlay .ability-slot.ultimate-slot{margin-left:auto}
.shop-content .catalog-copy .catalog-effects{display:block;font-size:11px;line-height:1.4;color:#c6d6bf;white-space:normal}
.shop-content .catalog-item{height:auto;min-height:94px}
.shop-content .shop-catalog,.shop-dialog .shop-layout{overflow-anchor:none;overscroll-behavior:contain}
.shop-content button{touch-action:manipulation}
@media(max-width:640px){.battlefield .battle-skill-overlay{left:14px;right:14px;bottom:27px;width:auto}.battle-skill-overlay .ability-slot.ultimate-slot{margin-left:auto}.shop-content .catalog-copy .catalog-effects{font-size:10px}}

/* A definite dialog height prevents its flex child collapsing in mobile Safari. */
.shop-dialog[open]{height:min(820px,calc(100dvh - 24px));max-height:calc(100dvh - 24px);overflow:hidden}
.shop-dialog>.shop-content{flex:1 1 auto;min-height:0;width:100%;height:100%;overflow:hidden}
.shop-dialog .shop-content>:not(.shop-layout){flex-shrink:0}
.shop-dialog .shop-layout{flex:1 1 auto;min-height:80px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#shop-title:focus{outline:none}

/* Q/W across the top, E below Q. Diameters grow by 20%; R grows by 30%. */
.battle-skill-overlay{--skill-size:60px;--ultimate-size:88.4px;--skill-emblem-size:45.6px;--ultimate-emblem-size:68.9px}
.battle-skill-overlay .abilities{display:grid;grid-template-columns:var(--skill-size) var(--skill-size) minmax(0,1fr) var(--ultimate-size);grid-template-rows:repeat(2,var(--skill-size));column-gap:16px;row-gap:28px;align-items:end}
.battle-skill-overlay .ability-slot{width:var(--skill-size)}
.battle-skill-overlay .ability-slot:nth-child(1){grid-area:1 / 1}
.battle-skill-overlay .ability-slot:nth-child(2){grid-area:1 / 2}
.battle-skill-overlay .ability-slot:nth-child(3){grid-area:2 / 1}
.battle-skill-overlay .ability-slot.ultimate-slot{grid-area:2 / 4;width:var(--ultimate-size);margin-left:0;align-self:end}
.battle-skill-overlay .ability-slot>.ability{width:var(--skill-size);height:var(--skill-size)}
.battle-skill-overlay .ultimate-slot>.ability{width:var(--ultimate-size);height:var(--ultimate-size)}
.battle-skill-overlay .ability .skill-emblem{width:var(--skill-emblem-size);height:var(--skill-emblem-size)}
.battle-skill-overlay .ultimate-slot .skill-emblem{width:var(--ultimate-emblem-size);height:var(--ultimate-emblem-size)}
.battle-skill-overlay .abilities.has-points{row-gap:64px}
@media(max-width:640px){.battle-skill-overlay{--skill-size:52.8px;--ultimate-size:78px;--skill-emblem-size:39.6px;--ultimate-emblem-size:59.8px}.battle-skill-overlay .abilities{column-gap:12px}}
@media(max-height:600px){.shop-dialog>.shop-content{display:block;overflow-y:auto}.shop-dialog .shop-layout{height:180px;min-height:180px;overflow-y:auto}}
.home-button.heading-home{background:#345940;border-color:#d9c286;color:#fff0c9}

.ability.ability-passive:disabled{cursor:default;opacity:1}.ability.ability-passive:disabled .painted-emblem{opacity:.72}
