/* The end-of-match summary (src/matchsummary.js; P1-5 round 2, round 3 of the build: layout 1, centred). Design system:
   the bh-ui.css tokens (--ink, --ink-2, --yellow, --pink-bright, --red, --radius-pill, --font-ui), .bh-btn-primary and
   the .bh-xp chip; the coins are the rewards' coin art (assets/rewards/coins.webp, as in the battle pass's claims and the
   level popup), the level is the popup's crown and number, a level's rewards the popup's cards (rewardfx.css
   .rwlv-card, sized by --k). Sizes in --u: 10 px of the 1920 x 1080 reference on a PC, 8.4 px of the phone's
   1172 x 542 (set by the module); texts keep 11 px and the button 44 px on small phones. Only transform and opacity
   animate (the module's rAF, ~4 s). */
.msum{--u:10px;--k:.83;position:fixed;inset:0;z-index:30;overflow:hidden;background:rgba(8,10,14,.86);font-family:var(--font-ui);font-weight:700;color:var(--ink);
	-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none;touch-action:manipulation;cursor:default}
.msum [hidden]{display:none!important}
.msum .bh-num{font-variant-numeric:tabular-nums}
/* the match's HUD and touch controls step aside while the summary is up */
body:has(> #msum) #hud,body:has(> #msum) #bhTouch{visibility:hidden}

/* the intro: the big verdict. B308 (owner 31/10, variant B of «Effetto della vittoria»: white on the yellow stripe read at
   1.3:1): no stripe; Barlow 900 italic in the verdict's colour (--yellow, --red, --ink), an --on-yellow outline and a stepped
   extrusion in the colour's dark tone, the logo's --magenta crown on a win. Contrast 14.8 / 5.3 / 19.5 : 1 on the outline */
.ms-vbig{position:absolute;left:0;right:0;top:38%;text-align:center;font:italic 900 calc(24*var(--u))/.85 var(--font-ui);text-transform:uppercase;
	--vc:var(--yellow);--ex:color-mix(in srgb,var(--vc) 45%,#000);color:var(--vc);-webkit-text-stroke:calc(1.2*var(--u)) var(--on-yellow);paint-order:stroke fill;
	text-shadow:calc(.35*var(--u)) calc(.7*var(--u)) 0 var(--ex),calc(.7*var(--u)) calc(1.4*var(--u)) 0 var(--ex),calc(1.05*var(--u)) calc(2.1*var(--u)) 0 var(--ex),
		calc(1.4*var(--u)) calc(2.8*var(--u)) 0 var(--on-yellow),0 calc(4*var(--u)) calc(3*var(--u)) rgba(0,0,0,.6);opacity:0;pointer-events:none}
.ms-vbig.lose{--vc:var(--red)}.ms-vbig.draw{--vc:var(--ink)}
.ms-vbig > span{display:block}
.ms-vbig .ms-vcrown{display:block;width:calc(12*var(--u));height:auto;margin:0 auto calc(-3.2*var(--u));transform:translateX(calc(-6*var(--u))) rotate(-12deg);
	color:var(--magenta);filter:drop-shadow(calc(.4*var(--u)) calc(.8*var(--u)) 0 var(--on-yellow))}
.ms-vbig .ms-vcrown *{fill:var(--magenta)}

/* the column: verdict, the level and its bar, the two gains (and a level's rewards), CONTINUE */
.ms-col{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(5*var(--u));opacity:0;
	padding:max(calc(3*var(--u)),env(safe-area-inset-top)) max(calc(4*var(--u)),env(safe-area-inset-right)) max(calc(3*var(--u)),env(safe-area-inset-bottom)) max(calc(4*var(--u)),env(safe-area-inset-left))}
.ms-verdict{font:italic 900 calc(14*var(--u))/.85 var(--font-ui);text-transform:uppercase;letter-spacing:.01em}
.ms-verdict.win{color:var(--yellow)}.ms-verdict.lose{color:var(--red)}.ms-verdict.draw{color:var(--ink)}

/* the level: the level popup's crown over its number */
.ms-lrow{display:flex;align-items:center;gap:calc(3.6*var(--u))}
.ms-lvl{flex:none;display:flex;flex-direction:column;align-items:center;width:calc(14*var(--u))}
.ms-lvl .rwlv-crown{width:calc(6.6*var(--u));height:auto;filter:drop-shadow(0 calc(.3*var(--u)) 0 rgba(0,0,0,.45))}
.ms-ln{margin-top:calc(-.6*var(--u));font:900 calc(10*var(--u))/.86 var(--font-ui);color:#fff;-webkit-text-stroke:calc(.6*var(--u)) var(--pink-bright);paint-order:stroke fill}
.ms-lbox{width:calc(84*var(--u))}
.ms-lu{height:calc(5.4*var(--u));font:italic 900 calc(5*var(--u))/1 var(--font-ui);text-transform:uppercase;color:var(--yellow);opacity:0;transform-origin:left center}
.ms-bar{position:relative;height:calc(3*var(--u));margin-top:calc(1*var(--u));border-radius:var(--radius-pill);background:rgba(5,7,10,.9);overflow:hidden}
.ms-bar i{position:absolute;top:0;bottom:0;left:0;border-radius:inherit;transform-origin:0 50%}
/* where the two parts meet, square edges (owner 28/10): the XP from before ends flat and this match's starts flat, so they read
   as one bar; the bar's own ends stay round (the track clips them) and the yellow's front keeps its round cap */
.ms-bar .ms-bw{width:100%;background:#fff;transform:scaleX(0);border-radius:0}
.ms-bar .ms-by{background:var(--yellow);transform:scaleX(0);border-radius:0 var(--radius-pill) var(--radius-pill) 0}
.ms-bar .ms-bf{right:0;background:#fff;opacity:0}
.ms-xr{margin-top:calc(1*var(--u));text-align:right;font-size:max(12px,calc(2.6*var(--u)));font-weight:800;letter-spacing:.04em;color:var(--ink-2)}

/* the rewards (B232, owner 29/10: «tutte dentro i rettangoli con l'icona, come per il gold»): one row of the level popup's
   cards (rewardfx.css .rwlv-card: the glow, the border, the art over the value and the label), sized here in --u: the
   match's XP, all of it (the pixel XP star, --pink-bright glow), the match's coins, the first win's and the quests' coins,
   the levels' coins; they come in one after the other (matchsummary.js, variant C) */
.msum .ms-cards{width:auto;margin:0;gap:calc(2*var(--u));flex-wrap:nowrap}
.msum .ms-card{flex:0 0 auto;width:calc(21*var(--u));max-width:none;gap:calc(.5*var(--u));padding:calc(1*var(--u)) calc(1*var(--u)) calc(1.6*var(--u));
	border-width:calc(.3*var(--u));border-radius:var(--radius-lg);box-shadow:0 0 calc(2.4*var(--u)) color-mix(in srgb,var(--glow) 30%,transparent),inset 0 calc(-.4*var(--u)) 0 rgba(0,0,0,.35)}
.msum .ms-card .rwlv-art{height:calc(11*var(--u))}
.msum .ms-card .rwlv-art img{filter:drop-shadow(0 calc(.6*var(--u)) 0 rgba(0,0,0,.4))}
.msum .ms-card .rwlv-art .bh-i{font-size:calc(9*var(--u))}
.ms-xpart{height:86%;width:auto}
.msum .ms-card .rwlv-x-n{font-size:calc(5.6*var(--u));-webkit-text-stroke-width:calc(.4*var(--u));white-space:nowrap}
.msum .ms-card b{font-size:max(11px,calc(2.2*var(--u)));text-align:center;white-space:nowrap}
/* B382 (owner 02/11: «non fare più vedere i placeholder: fai vedere direttamente questa parte quando è pronta»): until the
   rewards are known (is-pending) the level, its bar and the cards keep their room but do not show; three small dots in
   the level's room after the intro (--ink-2, the HUD's quiet tone), breathing; a late summary with nothing known
   (is-empty): no card, «Your rewards are on their way» there instead, the same words as before */
.msum.is-pending :is(.ms-lvl,.ms-lbox),.msum.is-pending .ms-cards,.msum.is-empty :is(.ms-lvl,.ms-lbox),.msum.is-empty .ms-cards{visibility:hidden}
.ms-lrow{position:relative}
.ms-wait{position:absolute;inset:0;display:none;align-items:center;justify-content:center;gap:calc(1.2*var(--u));color:var(--ink-2)}
.ms-wait i{width:max(6px,calc(1.2*var(--u)));height:max(6px,calc(1.2*var(--u)));border-radius:var(--radius-pill);background:currentColor;animation:ms-dot 1.2s ease-in-out infinite}
.ms-wait i:nth-child(2){animation-delay:.2s}.ms-wait i:nth-child(3){animation-delay:.4s}
.ms-wait span{display:none;font-size:max(12px,calc(2.6*var(--u)));font-weight:700;white-space:nowrap}
.msum.is-pending.is-waiting .ms-wait,.msum.is-empty .ms-wait{display:flex}
.msum.is-empty .ms-wait i{display:none}.msum.is-empty .ms-wait span{display:inline}
@keyframes ms-dot{0%,100%{opacity:.25}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.ms-wait i{animation:none;opacity:.6}}
.ms-note{font-size:max(12px,calc(2.6*var(--u)));font-weight:700;color:var(--ink-2)}
.msum .ms-go{font-family:var(--font-ui);flex:none;height:max(44px,calc(8*var(--u)));min-width:max(140px,calc(36*var(--u)));padding:0 calc(6*var(--u));font-size:max(16px,calc(3.4*var(--u)));font-weight:900;opacity:0}

.ms-cubes{position:absolute;inset:0;pointer-events:none}
.ms-cube{position:absolute;left:0;top:0;width:calc(1.6*var(--u));height:calc(1.6*var(--u));margin:calc(-.8*var(--u)) 0 0 calc(-.8*var(--u));border-radius:2px;background:var(--pink-bright);opacity:0;will-change:transform}
.ms-cube.y{background:var(--yellow)}

/* ---- the phone: the same column on the phone's unit, smaller; a level's rewards beside the gains ---- */
/* B369 (owner 01/11: «la scritta VICTORY non appare bene al centro nel mobile»): on a phone the big verdict's word sat 28-50 px
   under the middle (its box began at 38 % with the crown on top). Here the word itself is centred in the window (the box
   fills it, so the intro's scale grows from the middle too) and the crown rides above it out of the flow, where it was.
   The letters' own middle (measured on their fill colour, 667-932 px phones) sits right of the line box by the italic's
   overhang, which depends on the word (VICTORY's Y 1.5 --u, DEFEAT 0.65, DRAW 0.7), and 1.05 --u under it (capitals low in
   the line): the word steps back by that much, the crown (a win's) with it */
.msum.is-phone .ms-vbig{top:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.msum.is-phone .ms-vbig > span{position:relative;left:calc(-1.5*var(--u));top:calc(-1.05*var(--u))}
.msum.is-phone .ms-vbig.lose > span{left:calc(-.65*var(--u))}
.msum.is-phone .ms-vbig.draw > span{left:calc(-.7*var(--u))}
.msum.is-phone .ms-vbig .ms-vcrown{position:absolute;left:calc(50% - 1.5*var(--u));bottom:calc(50% + 8.05*var(--u));margin:0;transform:translateX(calc(-50% - 6*var(--u))) rotate(-12deg)}
.msum.is-phone .ms-col{gap:calc(2.8*var(--u))}
.msum.is-phone .ms-verdict{font-size:calc(10*var(--u))}
.msum.is-phone .ms-lrow{gap:calc(3*var(--u))}
.msum.is-phone .ms-lvl{width:calc(11*var(--u))}
.msum.is-phone .ms-lvl .rwlv-crown{width:calc(5.4*var(--u))}
.msum.is-phone .ms-ln{font-size:calc(7.6*var(--u))}
.msum.is-phone .ms-lbox{width:calc(66*var(--u))}
.msum.is-phone .ms-lu{height:calc(4.4*var(--u));font-size:calc(4*var(--u))}
.msum.is-phone .ms-bar{height:calc(2.4*var(--u))}
.msum.is-phone .ms-xr{font-size:max(12px,calc(2.2*var(--u)))}
.msum.is-phone .ms-go{height:max(44px,calc(7.2*var(--u)));min-width:max(140px,calc(30*var(--u)));font-size:max(16px,calc(3*var(--u)))}
.msum.is-phone .ms-cards{gap:calc(1.4*var(--u))}
.msum.is-phone .ms-card{width:calc(18*var(--u));padding:calc(.6*var(--u)) calc(.8*var(--u)) calc(1*var(--u))}
.msum.is-phone .ms-card .rwlv-art{height:calc(7.4*var(--u))}
.msum.is-phone .ms-card .rwlv-x-n{font-size:max(14px,calc(4.4*var(--u)))}
/* the phone's height (874 x 402 down to 667 x 375): the column tighter */
.msum.is-phone .ms-col{gap:calc(2*var(--u))}
.msum.is-phone .ms-card .rwlv-art{height:calc(5.6*var(--u))}
.msum.is-phone .ms-card .rwlv-x-n{font-size:max(14px,calc(3.8*var(--u)))}

/* B273 · CrazyGames' small desktop windows: the level cards' captions never under ~11 px real (the summary is not scaled:
   its --u follows the window; 11 px was this rule's floor); 1920 and touch screens unchanged */
html:not(.bh-touch) .msum .ms-card b{font-size:max(11.2px,calc(2.2*var(--u)))}