/* The match loading screen (src/loadscreen.js), built on the design system (bh-ui.css tokens) —
   2026-10-12 (owner: the painted pieces stretched on screen looked squashed): real text and panels,
   laid out at the 1920 x 1080 reference and scaled by --bh-k (screens.js menuScale) like the menu and
   the champion select. The layer is always at least 1920 x 1080 reference pixels, so at 16:10 or 4:3
   it grows taller and at 21:9 wider: the logo, the title and the teams keep to their edges and corners.
   The map's art is only the backdrop, cropped to cover (never stretched). Nothing blurs: low-end PCs. */
#mload{position:fixed;inset:0;z-index:12;display:none;pointer-events:none;overflow:hidden;color:var(--ink);font-family:var(--font-ui);
 background:#0b0a1a;transition:opacity .4s}
#mload.out{opacity:0}
/* from the press of PLAY until the match loads (main.js waitLoad, F12): the screen takes the clicks, the menu under it waits */
#mload.is-wait{pointer-events:auto}
/* the guest waiting for the host's START (main.js roomWaitExit): the way out, above the bar */
#mload .ml-leave{position:absolute;left:50%;bottom:150px;transform:translateX(-50%);z-index:2}
/* the host's START awaited: no progress to show, the bar empty with the boot screen's sheen (#bhboot, bbsheen) */
#mload.is-hostwait .ml-bar b{transform:scaleX(0)!important}
#mload.is-hostwait .ml-bar::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;
 background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);transform:translateX(-100%);animation:bbsheen 1.3s linear infinite}
@media (prefers-reduced-motion:reduce){#mload.is-hostwait .ml-bar::after{display:none}}
:is(#mload,#bhboot) .ml-bg{position:absolute;inset:0;background:#120d26 center/cover no-repeat;
 background-image:radial-gradient(ellipse 60% 50% at 30% 30%,rgba(229,13,150,.24),transparent 70%),radial-gradient(ellipse 50% 45% at 75% 25%,rgba(3,223,255,.14),transparent 70%),linear-gradient(180deg,#1a1236,#0b0a1a)}
/* the scrim: dark at the edges where the panels sit, the map open in the middle */
:is(#mload,#bhboot) .ml-shade{position:absolute;inset:0;
 background:linear-gradient(90deg,rgba(8,9,20,.72),rgba(8,9,20,.2) 32%,rgba(8,9,20,.2) 68%,rgba(8,9,20,.72)),
  linear-gradient(180deg,rgba(8,9,20,.62),rgba(8,9,20,0) 30%,rgba(8,9,20,0) 58%,rgba(8,9,20,.88))}
:is(#mload,#bhboot) .ml-layer{position:absolute;left:0;top:0;width:calc(100vw / var(--bh-k));height:calc(100vh / var(--bh-k));
 transform:scale(var(--bh-k));transform-origin:0 0}

/* top left: the logo, in its own colours */
#mload .ml-logo{position:absolute;left:40px;top:26px;width:236px;height:auto;display:block;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}

/* top centre: mode, map */
#mload .ml-head{position:absolute;left:50%;top:52px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;text-align:center;white-space:nowrap}
#mload .ml-kicker{display:flex;align-items:center;gap:var(--space-3)}
#mload .ml-size{display:inline-flex;align-items:center;height:34px;padding:0 var(--space-3);background:var(--yellow);color:var(--on-yellow);border-radius:var(--radius-sm);
 font-size:24px;font-weight:900;letter-spacing:.04em}
#mload .ml-size:empty{display:none}
#mload .ml-mode{font-size:32px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;text-shadow:0 3px 0 rgba(0,0,0,.6)}
#mload .ml-map{margin-top:2px;font-size:148px;line-height:.9;font-weight:900;font-style:italic;letter-spacing:.005em;text-transform:uppercase;
 text-shadow:0 6px 0 rgba(0,0,0,.6),0 0 40px rgba(249,4,220,.35)}
#mload .ml-rule{display:block;width:420px;height:4px;margin-top:14px;background:linear-gradient(90deg,transparent,var(--magenta) 25%,var(--ink) 50%,var(--magenta) 75%,transparent)}

/* the two sides: mine on the left (cyan, as YOU on the HUD), theirs on the right (magenta) */
#mload .ml-team{position:absolute;top:50%;transform:translateY(-44%);width:500px;box-sizing:border-box;padding:var(--space-4) var(--space-4) var(--space-3);
 background:rgba(17,22,31,.9);border:var(--border-hair) solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-panel)}
#mload .ml-team.a{left:40px;--tc:var(--cyan)}
#mload .ml-team.b{right:40px;--tc:var(--magenta)}
#mload .ml-team h3{margin:0 0 var(--space-3);display:flex;align-items:baseline;justify-content:space-between;font-size:34px;line-height:1;font-weight:900;font-style:italic;
 letter-spacing:.02em;text-transform:uppercase;color:var(--tc)}
#mload .ml-team h3 small{font-size:max(18px,calc(11px / var(--bh-k)));font-style:normal;font-weight:800;letter-spacing:.08em;color:var(--ink-3)}
#mload .ml-rows{display:flex;flex-direction:column;gap:var(--space-2)}
#mload .ml-row{display:grid;grid-template-columns:68px 1fr auto;align-items:center;gap:var(--space-4);height:80px;padding:0 var(--space-3) 0 6px;box-sizing:border-box;
 background:var(--surface-0);border:var(--border-hair) solid var(--line);border-radius:var(--radius-md)}
/* you: a warm tint and a yellow hairline, no accent stripe (owner 18/10) */
#mload .ml-row.you{border-color:rgba(253,224,43,.55);background:linear-gradient(90deg,rgba(253,224,43,.14),var(--surface-0) 60%)}
#mload .ml-av{position:relative;width:68px;height:68px;border-radius:var(--radius-sm);overflow:hidden;
 background:linear-gradient(180deg,color-mix(in srgb,var(--av,#2b2d39) 80%,#fff),color-mix(in srgb,var(--av,#2b2d39) 55%,#000))}
#mload .ml-av img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;display:block}
#mload .ml-nm{min-width:0;display:flex;flex-direction:column;gap:3px}
#mload .ml-nm b{font-size:28px;line-height:1;font-weight:800;letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#mload .ml-nm small{font-size:max(19px,calc(12px / var(--bh-k)));line-height:1;font-weight:800;letter-spacing:.06em;color:var(--av,var(--ink-2));text-transform:uppercase}
#mload .ml-row.you .ml-nm b{color:var(--yellow)}
#mload .ml-lv{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:58px;height:56px;border-radius:var(--radius-sm);
 background:var(--surface-2);border:var(--border-hair) solid var(--line)}
#mload .ml-lv small{font-size:max(14px,calc(10px / var(--bh-k)));line-height:1;font-weight:800;letter-spacing:.1em;color:var(--ink-3)}
#mload .ml-lv b{font-size:28px;line-height:1;font-weight:900;color:var(--yellow);font-variant-numeric:tabular-nums}
#mload .ml-lv:empty{visibility:hidden}
#mload .ml-row.wait{opacity:.5}
#mload .ml-row.wait .ml-av{background:none;border:2px dashed var(--line-strong);box-sizing:border-box}
#mload .ml-row.wait .ml-nm b{color:var(--ink-3)}

/* bottom centre: LOADING, the bar, the tip */
:is(#mload,#bhboot) .ml-foot{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);width:860px}
:is(#mload,#bhboot) .ml-status{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--space-2);font-size:30px;line-height:1;font-weight:900;font-style:italic;
 letter-spacing:.04em;text-shadow:0 3px 0 rgba(0,0,0,.6)}
:is(#mload,#bhboot) .ml-pct{font-style:normal;color:var(--yellow);font-variant-numeric:tabular-nums}
:is(#mload,#bhboot) .ml-bar{position:relative;height:16px;border-radius:var(--radius-pill);overflow:hidden;background:var(--surface-0);border:var(--border-strong) solid var(--line-strong)}
:is(#mload,#bhboot) .ml-bar b{position:absolute;inset:0;background:linear-gradient(90deg,var(--pink),var(--magenta));transform-origin:left center;transform:scaleX(0);transition:transform .35s ease-out}
/* the tip: one line, small, no accent stripe (owner 18/10); a longer one ends in an ellipsis */
:is(#mload,#bhboot) .ml-tip{display:flex;align-items:center;justify-content:center;gap:var(--space-3);min-height:0;margin-top:var(--space-3);padding:var(--space-2) var(--space-4);box-sizing:border-box;
 background:rgba(17,22,31,.85);border:var(--border-hair) solid var(--line);border-radius:var(--radius-md);
 font-size:max(17px,calc(12.2px / var(--bh-k)));line-height:1.2;font-weight:700;white-space:nowrap}
:is(#mload,#bhboot) .ml-tip span{min-width:0;overflow:hidden;text-overflow:ellipsis}
:is(#mload,#bhboot) .ml-tip b{flex:none;color:var(--yellow);font-weight:900;letter-spacing:.06em}

/* The startup screen (index.html #bhboot, 2026-10-17, owner: "la prima apertura è lenta"): the match screen's
   look (the backdrop, the scrim, the status line, the bar, a tip) with the logo in the middle. It is part of the
   page, so it shows before any module has loaded. The inline script in index.html moves the bar as the game's
   files arrive; src/loadscreen.js bootHome moves it on the game starting, the home showing and the champion
   standing on the home's stage, then fades it over the finished home. While it is up it covers the menu and
   takes its clicks; a failure stays on it in red. The fill is the real progress. The sheen over it is a
   compositor animation that keeps moving while the page is busy building (no main-thread work; off with
   reduced motion). */
#bhboot{position:fixed;inset:0;z-index:70;overflow:hidden;color:var(--ink);font-family:var(--font-ui);background:#0b0a1a;
 transition:opacity .45s ease-out;-webkit-font-smoothing:antialiased}
#bhboot.out{opacity:0;pointer-events:none}
#bhboot .bb-logo{position:absolute;left:50%;top:43%;width:640px;height:auto;display:block;transform:translate(-50%,-50%);
 filter:drop-shadow(0 10px 16px rgba(0,0,0,.5))}
#bhboot .bb-rule{position:absolute;left:50%;top:calc(43% + 238px);width:420px;height:4px;transform:translateX(-50%);
 background:linear-gradient(90deg,transparent,var(--magenta) 25%,var(--ink) 50%,var(--magenta) 75%,transparent)}
#bhboot .ml-status{gap:var(--space-5)}
#bhboot .bb-step{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase}
#bhboot .ml-bar b{will-change:transform;overflow:hidden}
#bhboot .ml-bar b::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;
 background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);transform:translateX(-100%);animation:bbsheen 1.3s linear infinite}
@keyframes bbsheen{to{transform:translateX(250%)}}
@media (prefers-reduced-motion:reduce){#bhboot .ml-bar b::after{display:none}}
#bhboot.is-failed .ml-bar b{background:var(--red)}
#bhboot.is-failed .ml-bar b::after{display:none}
#bhboot.is-failed .bb-step{color:var(--red)}
#bhboot.is-failed .ml-tip{border-color:rgba(232,80,90,.45);border-left-color:var(--red)}
#bhboot.is-failed .ml-tip b{color:var(--red)}