/* sm-loader.css: the "Securing connection" loading screen. Flat pixel art: no alpha, no blur, no easing.
   Before any script runs: an N0 field and the HUD frame (2 css px --hud-frame, --hud-corner corners with 24 css px arms [16 on phones])
   inset 8 css px [6] from the window. Everything else is drawn on the canvas by js/sm-loader.js.
   Layout-neutral: no scrollbar-gutter. html keeps its own overflow-y so the body's inline overflow:hidden (set while the loader is up)
   does not propagate to the viewport; js/sm-loader.js blocks scrolling instead. */
.ld { display: none; }
html.ld-on { background: #010315; overflow-y: auto; }
html.ld-on .ld { display: block; animation: ld-bail 0s 6s forwards; }
@keyframes ld-bail { to { visibility: hidden; pointer-events: none; } }

.ld {
  position: fixed; inset: 0; z-index: 2147483000; background: #010315; overflow: hidden;
  touch-action: none; overscroll-behavior: contain;
  font-family: 'Unixel', monospace;
}
.ld.is-burst { background: transparent; }
.ld .sec-sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.ld .ld-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; }

.ld .ld-frame {
  --arm: 24px;
  position: absolute; inset: 8px; box-sizing: border-box;
  border: 2px solid var(--hud-frame, #064169); border-radius: 0; box-shadow: none; background: transparent;
  pointer-events: none;
}
.ld .ld-frame::before {
  --b: var(--hud-corner, #29b1da);
  content: ''; position: absolute; inset: -2px; pointer-events: none;
  background:
    linear-gradient(var(--b), var(--b)) left top / var(--arm) 2px no-repeat,
    linear-gradient(var(--b), var(--b)) left top / 2px var(--arm) no-repeat,
    linear-gradient(var(--b), var(--b)) right top / var(--arm) 2px no-repeat,
    linear-gradient(var(--b), var(--b)) right top / 2px var(--arm) no-repeat,
    linear-gradient(var(--b), var(--b)) left bottom / var(--arm) 2px no-repeat,
    linear-gradient(var(--b), var(--b)) left bottom / 2px var(--arm) no-repeat,
    linear-gradient(var(--b), var(--b)) right bottom / var(--arm) 2px no-repeat,
    linear-gradient(var(--b), var(--b)) right bottom / 2px var(--arm) no-repeat;
}
.ld .ld-frame.is-hit::before { inset: -4px; } /* the corners step 2 css px outward when the lock shuts */
.ld .ld-frame.is-gone { visibility: hidden; }
@media (max-width: 767px) { .ld .ld-frame { inset: 6px; --arm: 16px; } }

/* the Skip control is screen-reader only until it takes focus */
.ld .ld-skip:focus-visible {
  position: absolute; inset-block-end: 24px; inset-inline-start: 24px; width: auto; height: auto; margin: 0; padding: 8px 12px;
  clip: auto; clip-path: none; overflow: visible; white-space: nowrap;
  font: 25px/1 'Unixel', monospace; color: var(--hud-l3, #eaecf1); background: var(--hud-n1, #020a29);
  border: 2px solid var(--hud-ifc, #29b1da); outline: none; border-radius: 0; cursor: pointer;
}
[dir="rtl"] .ld .ld-skip:focus-visible { font-family: 'Pixel AE Full', 'Unixel', sans-serif; font-size: 20px; }