/* ===========================================================================
   SIMULATION LOADER (.sl-*) — the brand sequence that covers a simulator run.
   Markup: templates/_simload.html. Motion: static/simload.js (every frame is
   driven from there; this file only holds the stage and the type).

   The veil sits over a page that keeps working underneath: results render
   behind it while the logo pulls back, so the closing blink reveals them.
   =========================================================================== */

.sl[hidden] { display: none; }

.sl {
  position: fixed; inset: 0; z-index: 9998;
  background:
    radial-gradient(70vmax 60vmax at 50% 44%, #0d1a24 0%, #0a0e14 58%),
    #0a0e14;
  /* opacity is driven by simload.js on the same clock as the rest of the
     sequence: a CSS transition here started late on a page that was still
     loading, and the page showed through the first second */
  opacity: 0;
  cursor: progress;
  overflow: hidden;
  contain: strict;
}

/* the page must not scroll under the veil while it is up */
html.sl-lock, html.sl-lock body { overflow: hidden; }

.sl-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; overflow: visible;
}

.sl-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---- the fight, under the cage ------------------------------------------ */
.sl-hud {
  position: absolute; left: 16px; right: 16px;
  bottom: max(7vh, 36px);
  display: grid; justify-items: center; gap: 10px;
  text-align: center; pointer-events: none;
  opacity: 0;               /* simload.js fades it in as the cage arrives */
}
.sl-names {
  margin: 0; max-width: 22ch;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
  column-gap: .42em; row-gap: 2px;
  font-family: var(--disp, "Inter Tight", "Helvetica Neue", Arial, sans-serif);
  font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em;
  font-size: clamp(22px, 3.6vw, 40px); line-height: 1.02;
  color: #dbe4f0; text-wrap: balance;
}
/* corner colours match the simulator's own A/B (green / blue) */
.sl-a { color: #dbe4f0; }
.sl-a::before, .sl-b::after {
  content: ""; display: inline-block; width: .32em; height: .32em;
  border-radius: 1px; vertical-align: .18em;
}
.sl-a::before { background: var(--accent, #00e5a0); margin-right: .34em; }
.sl-b::after  { background: var(--blue, #4aa8ff); margin-left: .34em; }
.sl-vs {
  font: 600 max(11px, .34em) var(--mono, ui-monospace, monospace);
  letter-spacing: .18em; color: #7d8a9c; text-transform: uppercase;
}
.sl-meta {
  margin: 0;
  font: 600 11px/1.4 var(--mono, ui-monospace, monospace);
  letter-spacing: .2em; text-transform: uppercase;
  color: #8796aa; font-variant-numeric: tabular-nums;
}

.sl-skip {
  position: absolute; right: 12px; bottom: 12px;
  min-height: 44px; min-width: 44px; padding: 0 16px;
  border: 0; border-radius: 6px; background: transparent;
  color: #7d8a9c; cursor: pointer;
  font: 600 11px var(--mono, ui-monospace, monospace);
  letter-spacing: .18em; text-transform: uppercase;
  transition: color .16s ease;
}
.sl-skip:focus-visible { outline: 2px solid var(--accent, #00e5a0); outline-offset: 2px; color: #dbe4f0; }
@media (hover: hover) and (pointer: fine) {
  .sl-skip:hover { color: #dbe4f0; }
}

@media (max-width: 640px) {
  .sl-hud { bottom: max(9vh, 64px); }
  .sl-meta { font-size: 10px; letter-spacing: .16em; }
}

/* Reduced motion: no camera, no spin, no blink. The logo and the matchup sit
   still on the veil and only opacity changes; simload.js reads the query. */