/* Match rewards stack on phones and share the available width on desktop. */
#endcard,body.touch #endcard{position:fixed;inset:0;overflow:hidden;box-sizing:border-box;justify-content:center;background:var(--hud-surface-overlay);z-index:60}
#endcard #endInner{display:flex;flex-direction:column;align-items:stretch;gap:var(--hud-space-6);width:min(480px,100%);max-height:100%;margin:auto;padding:max(var(--hud-space-4),var(--sat)) max(var(--hud-space-4),var(--sar)) max(var(--hud-space-4),var(--sab)) max(var(--hud-space-4),var(--sal));box-sizing:border-box}
#endcard #endTitle{font-size:clamp(20px,4vh,32px);animation:none;margin:0}
#endProgress{display:flex;flex-direction:column;gap:var(--hud-space-4);font:var(--hud-text-body)/var(--hud-leading) var(--hud-font-body)}
.endMmr{display:flex;flex-direction:column;align-items:center;gap:var(--hud-space-1)}
#endcard .rankResult{display:block;margin:0;font:700 28px/var(--hud-leading) var(--hud-font-body);letter-spacing:normal}
#endcard .rankResult.gain{color:var(--hud-health)}
#endcard .rankResult.loss{color:var(--hud-danger)}
#endcard .rankResult.pending{font-size:var(--hud-text-body);color:var(--hud-text-muted)}
#endcard .rankResult.neutral{color:var(--hud-text-muted);font-size:var(--hud-text-sm);font-weight:var(--hud-weight-regular)}
.endMatchSummary{display:flex;justify-content:center;gap:var(--hud-space-6);margin:0;padding:var(--hud-space-2);border-block:var(--hud-border-hairline) solid var(--hud-border-subtle)}
.endMatchSummary>div{display:flex;flex-direction:column;gap:var(--hud-space-1)}
.endMatchSummary dt{font-size:var(--hud-text-sm);color:var(--hud-text-muted)}
.endMatchSummary dd{margin:0;font:var(--hud-weight-strong) var(--hud-text-count)/var(--hud-leading-title) var(--hud-font-display);font-variant-numeric:tabular-nums}
.endMmr>small,.endNoProgress{color:var(--hud-text-muted);font-size:var(--hud-text-sm);margin:0}
.endXpTrack{display:flex;flex-direction:column;gap:var(--hud-space-3);padding:var(--hud-space-4);background:var(--hud-surface-panel);border:var(--hud-border-width) solid var(--hud-border);text-align:left}
.endHeroProgress{display:flex;align-items:center;gap:var(--hud-space-3)}
.endHeroProgress>.heroPortrait{width:64px;height:64px;flex:none}
.endHeroProgress>div{display:flex;flex:1;align-items:center;justify-content:space-between;gap:var(--hud-space-2);flex-wrap:wrap}
.endHeroProgress b{font:var(--hud-weight-strong) var(--hud-text-count)/var(--hud-leading-title) var(--hud-font-display)}
.endXpTier{font-size:var(--hud-text-body);font-weight:var(--hud-weight-label)}
.endMeritEarned{color:var(--hud-accent)}
.endMeritDetail,.endMeritTarget{font-size:var(--hud-text-sm);color:var(--hud-text-muted)}
.endMeritTarget{text-align:right}
.endHeroProgress strong{font-size:24px;color:var(--hud-accent);white-space:nowrap}
.endXpTrack progress{width:100%;height:12px;accent-color:var(--hud-accent)}
.endXpDetails{display:flex;justify-content:space-between;align-items:center;gap:var(--hud-space-2);color:var(--hud-text-muted);font-size:var(--hud-text-sm)}
.endXpCount{white-space:nowrap}
.endSkinGoal{gap:var(--hud-space-1);overflow-wrap:anywhere}
.endXpDetails small{font:inherit;text-align:right}
#endcard #again{width:100%;min-height:var(--hud-target);margin:0;animation:none;font-size:var(--hud-text-xs)}
#endcard.tutorial-results #endInner,body:not(.touch) #endcard.tutorial-results #endInner{display:flex;width:min(480px,100%);overflow-y:auto}
#endcard.tutorial-results #endProgress,body:not(.touch) #endcard.tutorial-results #endProgress{display:flex}
#endcard .tutorialCompletion{padding:var(--hud-space-6);text-align:center}
#endcard .tutorialCompletion .hud-copy{margin:0;font-size:var(--hud-text-body);line-height:var(--hud-leading)}
#endcard.tutorial-results.show #again,#endcard.tutorial-results.show p{animation:none}
/* One page per result (js/end-pages.js): the page fills the card, NEXT walks on, actions wait for the last page. */
#endcard #endInner{height:100%}
#endcard #endProgress{flex:1 1 auto;justify-content:safe center}
#endProgress>[data-end-off]{display:none!important}
#endcard.endPaged:not(.endLastPage) :is(#launchResultsActions,#again){display:none}
#endPager{flex-direction:column;align-items:stretch;gap:var(--hud-space-3)}
#endPager[hidden]{display:none}
#endNext{width:100%;min-height:var(--hud-target);margin:0;font-size:var(--hud-text-xs)}
#endNext[hidden]{display:none}
/* Play again rides the pager, so a result can be left from any page. */
.endPagerDots{display:flex;justify-content:center;gap:var(--hud-space-1)}
.endPagerDot{width:var(--hud-target);height:24px;padding:0;background:none;border:0;cursor:pointer;display:grid;place-items:center}
.endPagerDot::after{content:"";width:8px;height:8px;background:var(--hud-border)}
.endPagerDot[aria-current]::after{background:var(--hud-accent);width:20px}
/* With a page to itself, the reward reads at full size. */
#endcard.endPaged #progressionSummary .progressionSummaryArt{width:96px;height:96px}
#endcard.endPaged #progressionSummary .hud-row>div>span{font:var(--hud-weight-strong) var(--hud-text-count)/var(--hud-leading-title) var(--hud-font-display)}
.endPagerDot:focus-visible{outline:var(--hud-border-width) solid var(--hud-focus)}
@media(min-width:900px) and (min-height:451px){
 body:not(.touch) #endcard #endInner{width:min(640px,96vw)}
 body:not(.touch) #endProgress>.endMmr{flex-direction:row;justify-content:center;gap:var(--hud-space-3)}
}
/* The tutorial ends on one action: Continue. */
#endcard.tutorial-results #heroMatchReward{display:none}
@media(max-height:450px){
 #endcard #endInner{width:min(560px,100%);gap:var(--hud-space-2);padding-top:max(var(--hud-space-2),var(--sat));padding-bottom:max(var(--hud-space-2),var(--sab))}
 #endProgress{gap:var(--hud-space-2)}
 .endMmr{flex-direction:row;justify-content:center;gap:var(--hud-space-2)}
 #endcard .rankResult{font-size:24px}
 .endXpTrack{gap:var(--hud-space-2);padding:var(--hud-space-2)}
 .endHeroProgress>.heroPortrait{width:44px;height:44px}
 #endcard #endInner{gap:var(--hud-space-1)}
 #progressionSummary{padding:var(--hud-space-1)}
 #progressionSummary .progressionSummaryArt{width:32px;height:32px}
 #progressionSummary .hud-row{flex-wrap:nowrap;gap:var(--hud-space-2)}
 /* Short landscape phones: the mastery card splits into progress and reward columns, and dots and NEXT share one row. */
 .endXpTrack{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--hud-space-4);align-content:start}
 .endXpTrack>*{grid-column:1}
 .endXpTrack>.endSkinGoal{grid-column:2;grid-row:1/span 3;align-self:center}
 .endXpTrack>[data-mastery-sync]{grid-column:2;grid-row:4}
 /* nowrap: with Play again beside it, wrapping dropped NEXT onto a second row
    and ate the little height a landscape phone has. */
 #endPager{flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap}
 #endNext{width:auto;flex:0 1 200px}
  .endPagerDots{justify-content:flex-start}
}