/* The battlefield stays visible until the curtain covers the results handoff. */
.match-finale {
  position:fixed; inset:0; z-index:110; display:grid; place-items:center;
  padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
  box-sizing:border-box; overflow:hidden; background:rgba(3,10,17,0);
  visibility:hidden; opacity:0; pointer-events:none; outline:none;
  transition:opacity 600ms ease,background-color 350ms ease;
}
.match-finale.is-active { visibility:visible; opacity:1; pointer-events:auto; background:rgba(3,10,17,.8); }
.match-finale__content { width:min(760px,100%); max-height:100%; text-align:center; color:#f4eee0; }
.match-finale__eyebrow,.match-finale__footer { font:600 11px/1.4 sans-serif; letter-spacing:.2em; margin:0 0 14px; color:#a6bfc4; }
.match-finale__title,.match-finale__champion,.match-finale__row {
  font-family:'Tideglass Bangers',Impact,sans-serif; font-weight:400;
  -webkit-text-stroke:3px #14212b; paint-order:stroke fill; text-shadow:2px 4px 0 #14212b;
}
.match-finale__title { font-size:clamp(56px,10vw,128px); line-height:1; color:#ffe6a2; margin:0; transform:rotate(-3deg); animation:finale-slam 550ms both; }
.match-finale__champion { font-size:clamp(26px,4vw,44px); line-height:1.1; color:#89e5db; margin:16px 0 26px; overflow-wrap:anywhere; animation:finale-slam 450ms 180ms both; }
.match-finale__rankings { display:grid; gap:7px; list-style:none; padding:0 5px; margin:0 auto; max-height:48dvh; overflow:auto; }
.match-finale__row { display:grid; grid-template-columns:60px minmax(0,1fr) auto; align-items:center; gap:12px; text-align:left; padding:6px 16px; background:rgba(22,40,48,.92); border:1px solid #344951; border-radius:8px; font-size:clamp(22px,2.5vw,26px); line-height:1.1; animation:finale-rank 360ms var(--place-delay) both; }
.match-finale__place { color:#a6bfc4; font-size:1.15em; }
.match-finale__name { overflow-wrap:anywhere; }
.match-finale__score { font-size:.7em; color:#bdd0d4; white-space:nowrap; }
.match-finale__row.is-champion { background:#51402b; border-color:#ba8c4c; }
.match-finale__row.is-champion .match-finale__place { color:#ffe6a2; }
.match-finale__row.is-you { border-color:#89e5db; }
.match-finale__you { color:#89e5db; font:600 10px/1 sans-serif; text-shadow:none; -webkit-text-stroke:0; vertical-align:middle; white-space:nowrap; }
.match-finale__footer { margin:18px 0 0; letter-spacing:.08em; }
.match-finale.is-curtain { background:#030a11; }
.match-finale.is-curtain .match-finale__content { opacity:0; transition:opacity 300ms ease; }
.match-finale.is-leaving { opacity:0; }
body.match-finishing :is(#hud,#social-root,#announcement,#match-warning) { visibility:hidden; }
@keyframes finale-slam { 0% { opacity:0; scale:.45; } 65% { opacity:1; scale:1.08; } 100% { opacity:1; scale:1; } }
@keyframes finale-rank { from { opacity:0; transform:translateX(-24px) scale(.92); } to { opacity:1; transform:none; } }
@media(max-width:520px) {
  .match-finale__title { font-size:clamp(44px,12vw,62px); }
  .match-finale__champion { margin:12px 0 20px; }
  .match-finale__row { grid-template-columns:38px minmax(0,1fr) auto; gap:6px; padding:8px; font-size:23px; }
  .match-finale__rankings { max-height:54dvh; gap:5px; }
}
@media(max-height:550px) {
  .match-finale__eyebrow,.match-finale__footer { display:none; }
  .match-finale__title { font-size:48px; }
  .match-finale__champion { font-size:26px; margin:8px 0 12px; }
  .match-finale__rankings { grid-template-columns:repeat(2,minmax(0,1fr)); max-height:60dvh; }
  .match-finale__row { grid-template-columns:34px minmax(0,1fr) auto; font-size:21px; padding:7px; gap:5px; }
}
@media(prefers-reduced-motion:reduce) {
  .match-finale__title,.match-finale__champion,.match-finale__row { animation:none; transform:none; }
  .match-finale { transition-duration:150ms; }
}

.match-finale__content { position:relative; z-index:1; }
.victory-confetti { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.victory-confetti i { position:absolute; top:-24px; left:var(--x); width:8px; height:15px; border-radius:2px; background:var(--color); animation:confetti-fall var(--fall) var(--delay) ease-in both; }
.victory-confetti i:nth-child(3n) { border-radius:50%; width:10px; height:10px; }
@keyframes confetti-fall { from { transform:translate3d(0,-30px,0) rotate(0); opacity:1; } 85% { opacity:1; } to { transform:translate3d(var(--drift),105dvh,0) rotate(var(--spin)); opacity:0; } }
@media(prefers-reduced-motion:reduce) { .victory-confetti { display:none; } }