/* Recall sits with hero status; Ultimate owns the upper-right combat position. */
#app .battle-dock .status-utilities{grid-area:1/1/2/3;display:flex;align-items:center;justify-content:center;gap:12px;min-width:0;pointer-events:none}
#app .battle-dock .status-utilities #battle-map{flex:0 1 84px;min-width:0;width:84px;margin:0}
#app .battle-dock .status-utilities #home-button{position:static;inset:auto;display:flex;flex:0 0 54px;flex-direction:column;align-items:center;justify-content:center;width:54px;height:48px;min-height:48px;min-width:0;margin:0;padding:4px;gap:3px;background:#080d17e6;border:1px solid #bda267;border-radius:6px;color:#edd9aa;pointer-events:auto;touch-action:none;font:12px/1.1 Arial,sans-serif}
#app .status-utilities #home-button .icon{width:22px;height:22px}
#app .status-utilities #home-button kbd{display:none}
#app .status-utilities #home-button.heading-home{border-color:#8ce2bd;box-shadow:0 0 12px #7cdbb650;color:#b3f4d3}

/* Keep the overview above combat controls, opposite the squad strip. */
#app .battlefield #battle-map{position:absolute;inset:auto var(--hud-right) auto auto;top:clamp(84px,9vh,104px);width:clamp(140px,13vw,160px);z-index:5;opacity:1;pointer-events:none}
#app .battlefield #battle-map .minimap-wrap{display:block!important;width:100%;margin:0;padding:0;border:1px solid #c5a56377;background:#080d17e8;box-shadow:0 4px 14px #0007}
#app .battlefield #battle-map #minimap{display:block;width:100%;height:auto;aspect-ratio:320/152;border:0}
@media(max-width:760px) and (orientation:landscape){#app .battlefield #battle-map{top:78px;width:140px}}
@media(max-width:640px) and (orientation:landscape){#app .battlefield #battle-map{top:82px;width:120px}}
@media(orientation:portrait) and (max-width:800px){#app .battlefield #battle-map{top:max(138px,calc(env(safe-area-inset-top) + 128px));width:120px}}
@media(orientation:portrait) and (max-width:400px){#app .battlefield #battle-map{width:110px}}
@media(max-width:760px) and (orientation:landscape){#app .battle-dock .status-utilities{gap:6px}#app .battle-dock .status-utilities #battle-map{flex-basis:64px;width:64px}#app .battle-dock .status-utilities #home-button{flex-basis:48px;width:48px}}
@media(max-width:640px) and (orientation:landscape){#app .battle-dock .status-utilities{grid-area:1/1;flex-wrap:wrap}#app .battle-dock .status-utilities #battle-map{flex-basis:60px;width:60px}}

/* Preparation presents the complete catalogue with readable stats and prices. */
#shop-dialog.preparing-battle{width:min(940px,calc(100% - 24px));max-height:calc(100dvh - 24px);padding:20px;background:linear-gradient(135deg,#152235,#090f1b 80%);color:#eee4ce;border-color:#bfa267}
#shop-dialog.preparing-battle .shop-content{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}
.preparing-battle .shop-header{flex-shrink:0}
.preparing-battle .shop-header h2{font:30px/1.15 Georgia,serif;margin:4px 0 10px}
.preparing-battle .shop-header .eyebrow{font-size:12px;color:#ccb276}
.preparing-battle #shop-hero-line{font-size:14px;padding-bottom:4px}
.preparing-battle #shop-hero-line>span,.preparing-battle .gear-limit-note{display:none}
.preparing-battle .shop-category-list{padding:8px 0;flex-shrink:0}
.preparing-battle .shop-category{font-size:14px;min-height:44px}
#shop-dialog.preparing-battle .shop-layout{display:block;flex:1 1 auto;height:auto;max-height:none;overflow-y:auto;min-height:80px;padding:12px 0;scrollbar-width:thin}
.preparing-battle .shop-catalog{display:grid;max-height:none;overflow:visible;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));padding:0;gap:10px;align-content:start}
.preparing-battle .catalog-item{height:auto;min-height:104px;display:grid;grid-template-columns:minmax(0,1fr) 76px;align-items:center;gap:12px;padding:12px;background:#101c2c;border-color:#98835855}
.preparing-battle .catalog-inspect{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:start;gap:10px;min-height:0;min-width:0}
.preparing-battle .catalog-item .item-emblem,.preparing-battle .catalog-emblem{width:40px;height:40px}
.preparing-battle .catalog-copy strong{font-size:16px;line-height:1.3}
.preparing-battle .catalog-copy small,.preparing-battle .catalog-copy .catalog-price{font-size:14px;line-height:1.4}
.preparing-battle .catalog-copy .catalog-effects{display:block;font-size:14px;line-height:1.45;color:#c6d6bf;white-space:normal;overflow:visible;-webkit-line-clamp:unset;margin:5px 0}
.preparing-battle .catalog-buy{width:76px;min-width:76px;min-height:44px;padding:8px 4px;border-radius:4px;font-size:14px;white-space:nowrap;overflow-wrap:normal;word-break:normal}
.preparing-battle .shop-inventory-heading{margin:10px 0 6px;font-size:12px}
.preparing-battle .shop-inventory-heading>span:last-child{font-size:12px}
.preparing-battle .shop-inventory{gap:6px}
.preparing-battle .shop-inventory .inventory-slot{min-height:44px;height:48px;padding:3px;display:flex;align-items:center;justify-content:center;gap:4px}
.preparing-battle .shop-inventory .item-emblem{width:34px;height:34px;flex-shrink:0}
.preparing-battle .shop-inventory .slot-name{font-size:12px;max-width:90px}.preparing-battle .shop-inventory .slot-number{display:none}
.preparing-battle .shop-inventory .inventory-slot:not(.occupied) .slot-name{display:none}
.preparing-battle .shop-footer{flex-wrap:wrap;gap:8px 12px;padding-top:12px;flex-shrink:0}
.preparing-battle .shop-footer .shop-message{flex:1 1 100%;font-size:14px;line-height:1.4;margin:0;color:#b8c4d3}
.preparing-battle .shop-footer>a{display:none}
.preparing-battle .shop-footer>button{min-height:46px;font-size:16px;white-space:nowrap;flex:1;padding:10px 14px}
@media(max-width:600px){
 #shop-dialog.preparing-battle{padding:16px}
 .preparing-battle .shop-header h2{font-size:28px}
 .preparing-battle .shop-inventory .slot-name{display:none}
 .preparing-battle .shop-inventory-heading>span:last-child{display:none}
 .preparing-battle .shop-header .eyebrow{letter-spacing:.08em}
}
@media(max-height:500px) and (orientation:landscape){
 #shop-dialog.preparing-battle{padding:12px 18px;max-height:calc(100dvh - 12px)}
 .preparing-battle .shop-header h2{font-size:25px;margin:0 0 4px}.preparing-battle .shop-header .eyebrow{display:none}
 .preparing-battle #shop-hero-line{padding:0}.preparing-battle .shop-category-list{padding:4px 0}.preparing-battle .shop-category{min-height:36px;padding:6px 10px}
 #shop-dialog.preparing-battle .shop-layout{padding:8px 0;min-height:70px}
 .preparing-battle .shop-inventory-heading{display:none}.preparing-battle .shop-inventory{margin-top:6px}.preparing-battle .shop-inventory .inventory-slot{height:36px;min-height:36px}
 .preparing-battle .shop-footer{padding-top:8px}.preparing-battle .shop-footer .shop-message{display:none}
}

/* A readable battle report with export actions always within reach. */
#app #end-overlay{position:fixed;padding:16px;background:#050b16df;align-items:center;overflow:hidden;z-index:30}
#end-overlay .end-panel{width:min(960px,100%);height:min(820px,100%);max-height:100%;padding:0;display:flex;flex-direction:column;overflow:hidden;text-align:left;margin:auto;background:linear-gradient(135deg,#1a2940,#09131f);border:1px solid #bda165;color:#f1e8d5;box-shadow:0 18px 80px #0009}
.result-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 28px 16px;border-bottom:1px solid #b79a5b55;flex-shrink:0}
.result-heading .eyebrow{font-size:12px;letter-spacing:.12em;color:#d7ba7d}
#end-overlay .end-panel h2{font:52px/1 Georgia,serif;color:#f0d695;margin:10px 0}
#end-overlay .end-panel[data-outcome=defeat] h2{color:#eeaba5}
.result-heading p{font-size:14px;color:#b7c5d8;margin:0;line-height:1.4}
.result-score{display:flex;align-items:center;gap:12px;color:#e8dcbd}
.result-score span{font-size:12px;letter-spacing:.05em}.result-score span:first-child{color:#99dbbe}.result-score span:last-child{color:#e7a1a0}
.result-score strong{font:30px/1 Georgia,serif;white-space:nowrap}
.result-scroll{touch-action:pan-y;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:20px 28px}
.result-player{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.result-player img{width:64px;height:76px;object-fit:cover;border:1px solid #bda469;border-radius:4px}
.result-player h3{font:27px/1.15 Georgia,serif;color:#f5e8ce;margin:4px 0}
.result-player span{font-size:14px;color:#b7c5d8}
#end-overlay .end-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:0 0 12px;text-align:left}
#end-overlay .end-stats>div{padding:12px 14px;background:#102135;border:1px solid #88744966;border-radius:4px}
#end-overlay .end-stats strong{display:block;font:32px/1.1 Georgia,serif;color:#f3dfab}
#end-overlay .end-stats span{display:block;font-size:14px;color:#b8c7d8;margin-top:5px}
.result-meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px;color:#b7c5d8;margin:0 0 18px;line-height:1.5}
.result-equipment h3,.result-teams h3{font:18px/1.2 Georgia,serif;color:#e4ca93;margin:0 0 12px}
.result-items{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:20px}
.result-item{min-width:0;display:flex;align-items:center;gap:6px;flex-direction:column}
.result-item>.item-emblem,.result-empty-slot{width:48px;height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border:1px solid #8b764655;background:#0b1422}
.result-item>span:not(.result-empty-slot){font-size:12px;line-height:1.35;text-align:center;color:#cbd4df}
.result-table-scroll{touch-action:pan-x pan-y;overflow-x:auto}
.result-teams table{width:100%;border-collapse:collapse;font-size:14px;table-layout:fixed}
.result-teams thead th{font-weight:normal;text-align:center;color:#b7c5d8;padding:0 6px 9px;font-size:12px}
.result-teams thead th:first-child{width:27%;text-align:left}.result-teams thead th:last-child{width:34%;text-align:left}.result-teams thead th:nth-child(2),.result-teams thead th:nth-child(3){width:9%}
.result-teams tbody th,.result-teams td{padding:10px 6px;border-top:1px solid #b69b5750;background:#15313055;text-align:center;vertical-align:middle}
.result-teams tbody th{font-weight:normal;text-align:left;border-left:2px solid #87b99d}.result-teams tbody th strong{font-size:14px;line-height:1.3;display:block}.result-teams small{display:block;font-size:12px;color:#a4c0b1;margin-top:4px}
.result-teams .result-enemy>*{background:#40243350}.result-teams .result-enemy th{border-left-color:#ca8b8a}.result-teams .result-enemy small{color:#d3a5a6}
.result-teams .result-you>*{background:#ac944627}.result-teams .result-you th{border-left-color:#e6c875}
.result-earned{color:#e4c67f;font-variant-numeric:tabular-nums}
.result-team-items{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
.result-team-items .result-item>.item-emblem,.result-team-items .result-empty-slot{width:100%;height:auto;aspect-ratio:1;max-width:36px}
.result-gold-note{font-size:12px;line-height:1.5;color:#a6b7cc;margin:14px 0 0}
.result-footer{padding:16px 28px;background:#0b1625;border-top:1px solid #bda46966;flex-shrink:0}
.result-actions{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap}
.result-actions button,.result-actions a{font-size:14px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:10px 12px;margin:0;cursor:pointer}
.result-actions #share-result-button{padding:10px 26px;margin-right:auto}
#result-share-status{font-size:12px;line-height:1.4;margin:8px 0 0;color:#bcd4c7}#result-share-status:empty{display:none}
@media(max-width:700px){
 .result-heading{padding:18px;align-items:flex-start;gap:10px}.result-score{flex-direction:column;gap:5px}.result-score span{font-size:12px}
 .result-scroll{padding:16px}.result-footer{padding:12px 16px}.result-items{gap:8px}.result-item>.item-emblem,.result-empty-slot{width:40px;height:40px}
 .result-teams table{min-width:540px}.result-actions{gap:6px}.result-actions button,.result-actions a{font-size:12px;padding:8px}
 #end-overlay .end-stats{gap:6px}#end-overlay .end-stats>div{padding:10px 8px}#end-overlay .end-stats strong{font-size:26px}#end-overlay .end-stats span{font-size:12px}
}
@media(max-height:500px) and (orientation:landscape){
 #app #end-overlay{padding:8px}.result-heading{padding:12px 18px}.result-heading .eyebrow{font-size:12px}
 #end-overlay .end-panel h2{font-size:34px;margin:5px 0}.result-heading p{display:none}.result-score{flex-direction:row}
 .result-scroll{padding:14px 18px}.result-footer{padding:8px 18px}.result-player{margin-bottom:12px}.result-player img{width:48px;height:54px}.result-player h3{font-size:22px}
 .result-actions #share-result-button{min-height:44px}.result-actions{gap:6px 12px}
}

/* Portrait uses a compact control cluster and leaves the center open to play. */
@media(orientation:portrait) and (max-width:800px){
 #app:not(.setup-mode){--hud-left:max(12px,env(safe-area-inset-left));--hud-right:max(12px,env(safe-area-inset-right));--skill:min(14vw,max(44px,calc(48px*var(--skills-scale,1))));--ult:calc(var(--skill)*1.25);--attack:min(20vw,max(62px,calc(68px*var(--skills-scale,1))));--joystick-size:min(34vw,calc(120px*var(--joystick-scale,1)));--control-gap:12px}
 #app:not(.setup-mode)>.topbar{grid-template-columns:minmax(0,1fr) 82px minmax(0,1fr);gap:8px;padding-top:max(10px,env(safe-area-inset-top))}
 #app:not(.setup-mode) .topbar .wave-indicator{width:82px;max-width:82px;font-size:16px;padding:9px 3px}
 #app:not(.setup-mode) .topbar .enemy-header{grid-template-columns:minmax(0,1fr);gap:8px}
 #app:not(.setup-mode) .topbar .faction-name{font-size:14px;letter-spacing:0}
 #app:not(.setup-mode) .topbar #shop-button{min-width:50px}
 #app:not(.setup-mode) .topbar .header-actions{gap:6px}
 #app .battlefield #squad-strip{top:100px;width:118px}
 #app .battlefield .battle-messages{top:200px;width:calc(100% - 32px)}
 #app .battlefield .battle-dock{grid-template-columns:minmax(78px,1fr) auto;gap:8px;bottom:max(16px,env(safe-area-inset-bottom))}
 #app .battle-dock .mobile-hud{position:absolute;width:0;height:0;bottom:130px;left:0}
 #app .battle-dock .mobile-brand{display:none}
 #app .battle-dock .general-status{grid-area:1/1;grid-template-columns:32px minmax(0,1fr);width:min(100%,160px);gap:6px;justify-self:start}
 #app .battle-dock .status-utilities{gap:6px;flex-wrap:wrap}
 #app .battle-dock .status-utilities #battle-map{flex-basis:64px;width:64px}
 #app .battle-dock .status-utilities #home-button{flex-basis:48px;width:48px}
 #app .battle-dock .combat-controls{grid-area:1/2;grid-template-columns:var(--skill) var(--skill) var(--attack);grid-template-rows:var(--ult) var(--attack);column-gap:12px;row-gap:44px;padding:36px 6px 24px}
 #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:1/2}
 #app .combat-controls .ability-slot.ultimate-slot{grid-area:1/3}
 #app .combat-controls #basic-attack{grid-area:2/3}
 #app .battle-dock #hud-inventory{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
}