/* Collection owns geometry; visuals reuse shared HUD tokens and components. */
.heroCollectionDialog{width:min(1000px,calc(100vw - var(--hud-space-4) - var(--sal,0px) - var(--sar,0px)));max-height:calc(100dvh - var(--hud-space-4) - var(--sat,0px) - var(--sab,0px));overflow:auto;}
.heroCollectionHead{display:flex;align-items:center;justify-content:space-between;gap:var(--hud-space-3);}
.heroCollectionHead h2{margin:0;font:var(--hud-text-body)/var(--hud-leading) var(--hud-font-label);}
.heroCollectionTools{display:flex;flex-wrap:wrap;gap:var(--hud-space-2);margin:var(--hud-space-3) 0;}
.heroCollectionTools[hidden]{display:none;}
.heroCollectionTools input{flex:1;min-width:0;}
.heroCollectionGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:var(--hud-space-3);}
.heroCollectionCard{display:flex;flex-direction:column;align-items:center;gap:var(--hud-space-2);min-width:0;white-space:normal;}
.heroCollectionCard .heroPortrait{width:72px;height:72px;}
.heroCollectionDetail{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--hud-space-4);margin-top:var(--hud-space-4);}
.heroCollectionSprite{width:200px;height:200px;max-width:100%;}
.heroCollectionDetail h3{margin:0;color:var(--hud-accent);font:var(--hud-text-body)/var(--hud-leading) var(--hud-font-label);}
.heroCollectionSkills{display:grid;gap:var(--hud-space-3);margin-top:var(--hud-space-4);}
.heroCollectionSkills .skillIcon{width:var(--hud-target);height:var(--hud-target);float:left;margin-right:var(--hud-space-2);}
.heroCollectionActions{display:flex;flex-wrap:wrap;gap:var(--hud-space-2);}
.heroCollectionStatus{color:var(--hud-accent);}
.heroCollectionBadge{display:block;margin-top:var(--hud-space-1);padding:0 var(--hud-space-2);font:var(--hud-text-xs)/var(--hud-leading) var(--hud-font-label);color:var(--hud-text-muted);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;}
/* Scrolling hero grids otherwise squeeze rows below the added badge's height. */
:is(#homeHeroPickerGrid,#heroGrid){grid-auto-rows:max-content;}
/* Owned reads as available (green check); locked reads as unavailable (grey, dimmed, dashed). */
:is(.hcard,.heroCollectionCard).isOwned .heroCollectionBadge{color:var(--hud-surface-canvas);background:var(--hud-status-online);}
:is(.hcard,.heroCollectionCard).isOwned .heroCollectionBadge::before{content:'✓ ';}
:is(.hcard,.heroCollectionCard).isOwned:not(.sel){border-color:color-mix(in srgb,var(--hud-status-online) 55%,transparent);}
:is(.hcard,.heroCollectionCard).isLocked .heroCollectionBadge{border:1px solid var(--hud-border-subtle);}
:is(.hcard,.heroCollectionCard).isLocked{border-style:dashed;}
:is(.hcard,.heroCollectionCard).isLocked :is(.heroPortrait,.nm,.rl,strong){filter:grayscale(1) brightness(.6);opacity:.75;transition:filter .12s,opacity .12s;}
:is(.hcard,.heroCollectionCard).isLocked:is(:hover,:focus-visible) :is(.heroPortrait,.nm,.rl,strong){filter:grayscale(.4) brightness(.9);opacity:1;}
.heroCollectionConfirm{max-width:420px;width:calc(100vw - var(--hud-space-6));}
.heroCollectionNotice{margin:var(--hud-space-2) 0;}
@media(max-width:520px){
  .heroCollectionDetail{grid-template-columns:1fr;}
  .heroCollectionSprite{justify-self:center;width:144px;height:144px;}
  .heroCollectionGrid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
/* The reward leads the result; existing MMR and mastery remain below it. */
#endcard #endInner{overflow-y:auto;width:min(640px,100%);gap:var(--hud-space-3);}
.heroNextReward{display:flex;align-items:center;gap:var(--hud-space-3);padding:var(--hud-space-3);min-width:0;text-align:left;}
.heroNextReward .heroPortrait{width:56px;height:56px;flex:none;}
.heroNextReward small{color:var(--hud-text-muted);font-size:var(--hud-text-sm);}
.heroRewardReveal{padding:var(--hud-space-4);text-align:left;min-width:0;}
.heroRewardReveal p{margin:0;}
.heroRewardEyebrow{font:var(--hud-weight-strong) var(--hud-title-lg)/var(--hud-leading-title) var(--hud-font-display);color:var(--hud-accent);}
.heroRewardStage{display:grid;grid-template-columns:144px minmax(0,1fr);gap:var(--hud-space-3);align-items:center;}
.heroRewardSprite{width:144px;height:144px;max-width:100%;}
.heroRewardCopy{display:flex;flex-direction:column;gap:var(--hud-space-1);min-width:0;}
.heroRewardName{font:var(--hud-weight-strong) var(--hud-title-lg)/var(--hud-leading-title) var(--hud-font-display);color:var(--hud-accent);margin:0;overflow-wrap:anywhere;}
.heroRewardAbility{font:var(--hud-text-sm)/var(--hud-leading) var(--hud-font-body);color:var(--hud-text-muted);}
.heroRewardActions{display:flex;flex-wrap:wrap;gap:var(--hud-space-2);margin-top:var(--hud-space-2);}
.heroRewardActions button{min-height:var(--hud-target);white-space:normal;flex:1;}
.heroRewardActions .primary{flex-basis:100%;}
.heroRewardNext{margin-top:var(--hud-space-2)!important;color:var(--hud-accent);}
#heroMatchReward[hidden]{display:none;}
#endcard.show #heroMatchReward :is(p,h2){animation:none;opacity:1;filter:none;transform:none;}
#heroMatchReward .heroRewardEyebrow{font:var(--hud-weight-strong) clamp(var(--hud-text-count),5vw,var(--hud-title-lg))/var(--hud-leading-title) var(--hud-font-display);}
#heroMatchReward .heroRewardCopy>.hud-copy{font:var(--hud-text-body)/var(--hud-leading) var(--hud-font-body);}
#heroMatchReward :is(.heroRewardAbility,.heroRewardNext){font:var(--hud-text-sm)/var(--hud-leading) var(--hud-font-body);}
#heroMatchReward .heroRewardName{font:var(--hud-weight-strong) var(--hud-title-lg)/var(--hud-leading-title) var(--hud-font-display);letter-spacing:var(--hud-tracking-label);}
#endcard.hasHeroReward :is(#launchResultsActions,#again){display:none;}
@media(min-width:900px) and (min-height:451px){
 body:not(.touch) #endProgress>#heroMatchReward{grid-column:1/-1;}
 body:not(.touch) #heroMatchReward.heroRewardReveal{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(250px,1fr);gap:var(--hud-space-3);}
 body:not(.touch) #heroMatchReward .heroRewardEyebrow,body:not(.touch) #heroMatchReward .heroRewardNext{grid-column:1/-1;}
 body:not(.touch) #heroMatchReward .heroRewardActions{align-content:center;margin:0;}
 body:not(.touch) #heroMatchReward>p:empty{display:none;}
}
.homeLaunch .heroRewardStage{grid-template-columns:96px minmax(0,1fr);}
.homeLaunch .heroRewardSprite{width:96px;height:96px;}
.homeLaunch .heroRewardAbility span{display:none;}
@media(max-width:420px){
 .heroRewardReveal{padding:var(--hud-space-3);}
 .heroRewardStage{grid-template-columns:96px minmax(0,1fr);}
 .heroRewardSprite{width:96px;height:96px;}
 .heroRewardAbility span{display:none;}
 #heroMatchReward .heroRewardName{font-size:var(--hud-text-count);}
}
@media(max-height:450px){
 #endcard .heroRewardStage{grid-template-columns:80px minmax(0,1fr);}
 #endcard .heroRewardSprite{width:80px;height:80px;}
 #endcard .heroRewardAbility span{display:none;}
 #endcard .heroRewardActions .primary{flex-basis:auto;}
 #endcard .heroRewardReveal{padding:var(--hud-space-2);}
 #heroMatchReward .heroRewardEyebrow,#heroMatchReward .heroRewardName{font-size:var(--hud-text-count);}
 #heroMatchReward .heroRewardCopy>.hud-copy{font-size:var(--hud-text-sm);}
}