/* Password gate — deliberately the splash's quieter twin: same background,
   same logo at the same size, same orange, same letterspaced caps. One input
   line and nothing else. The still it uses IS the splash video's poster frame,
   so the hard swap from gate to splash on unlock reads as the loading line
   simply appearing, not as a second screen. */
#sb-gate {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(26px, 5vh, 54px);
  background: #050b1e center / cover no-repeat url(/static/splash/bg.jpg);
  overflow: hidden; user-select: none;
  font-family: "PF DinDisplay Pro", "Arial Black", sans-serif;
}
@media (orientation: portrait) {
  #sb-gate { background-image: url(/static/splash/bg_portrait.jpg); }
}
#sb-gate-shade { /* same darkening as the splash, so the logo sits identically */
  position: absolute; inset: 0;
  background: linear-gradient(rgba(2, 6, 20, .18), rgba(2, 6, 20, .42));
}
#sb-gate img {
  width: min(66vw, 50vh, 500px); height: auto; position: relative;
}

#sb-gate form {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: clamp(10px, 1.8vh, 16px);
}
/* A boxed field, not a bare underline. The underline read as a caption — on a
   phone especially, where there is no cursor to hover with and autofocus is
   ignored until you tap, nothing said "type here". The well, the border and the
   inset shadow are the whole affordance. */
#sb-gate input {
  box-sizing: border-box;
  width: min(72vw, 340px); min-width: 220px;
  padding: clamp(12px, 1.9vh, 17px) clamp(14px, 2vw, 20px);
  border: 1px solid rgba(255, 255, 255, .26); border-radius: 12px;
  background: rgba(4, 10, 28, .55);
  box-shadow: inset 0 1px 6px rgba(0, 0, 0, .35);
  color: #eaf6ff;
  /* max(16px, …): under 16px iOS Safari zooms the page on focus and never
     zooms back. 2.2vh alone falls under that on a phone held landscape. */
  font: inherit; font-size: max(16px, clamp(16px, 2.2vh, 19px)); line-height: 1;
  letter-spacing: .26em; text-indent: .26em; text-align: center;
  outline: none; caret-color: #ffa41c;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
#sb-gate input:focus {
  border-color: #ffa41c;
  background: rgba(4, 10, 28, .72);
  box-shadow: inset 0 1px 6px rgba(0, 0, 0, .35), 0 0 0 3px rgba(255, 164, 28, .18);
}
#sb-gate input::placeholder {
  color: rgba(255, 255, 255, .38); text-transform: uppercase; letter-spacing: .26em;
}
/* the submit control: present for the browser and for keyboard/AT users,
   never drawn — "Enter to continue" is the affordance */
#sb-gate-go {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
#sb-gate-hint {
  position: relative; min-height: 1em;
  color: rgba(255, 255, 255, .55);
  font-size: clamp(11px, 1.6vh, 13px); line-height: 1;
  letter-spacing: .18em; text-indent: .18em; text-transform: uppercase;
  transition: color .2s ease;
}
#sb-gate.sb-gate-bad #sb-gate-hint { color: #ff6b5e; }
/* wrong password: shake the line rather than pop a dialog */
#sb-gate.sb-gate-bad input {
  border-color: #ff6b5e;
  box-shadow: inset 0 1px 6px rgba(0, 0, 0, .35), 0 0 0 3px rgba(255, 107, 94, .16);
  animation: sb-gate-shake .4s ease;
}
@keyframes sb-gate-shake {
  10%, 90% { transform: translateX(-3px); }
  30%, 70% { transform: translateX(5px); }
  50% { transform: translateX(-6px); }
}
/* SpaceBlitz splash — responsive overlay, independent of the game preloader.
   Deliberately plain: background video, logo, a thin progress line and the tap
   prompt. Everything that was ornament rather than information (chamfered
   multi-layer gauge, its travelling sheen, the orange side clamps on the bar
   and the button, the floating logo, the pulsing button glow) is gone — the
   background art is the visual, and the splash should stay out of its way.

   The background is NOT here any more: it is the shared DOM layer
   (render/fx/bgVideoLayer), which lives behind the canvas and stays up when the
   splash leaves. So the splash is transparent and hides the game by hiding the
   canvas instead — `sb-splashing` below. */
@font-face {
  /* SpaceBlitz reskin: splash uses MD Nichrome Ultra too (name kept to match
     slot_fonts.json — this face duplicates the one FontLoader injects at the
     same family/weight, so it has to point at the same file or they fight). */
  font-family: "PF DinDisplay Pro";
  src: url(/static/fonts/MDNichromeTrial-Ultra.woff2) format("woff2");
  font-weight: 700; font-display: swap;
}
#sb-splash {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(26px, 5vh, 54px);
  background: transparent; /* the bg layer behind the canvas is the backdrop */
  overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: opacity .45s ease; user-select: none;
  font-family: "PF DinDisplay Pro", "Arial Black", sans-serif;
}
/* the layer failed to mount (should not happen) — paint our own backdrop */
#sb-splash.sb-nobg { background: #050b1e center / cover no-repeat url(/static/splash/bg.jpg); }
@media (orientation: portrait) {
  #sb-splash.sb-nobg { background-image: url(/static/splash/bg_portrait.jpg); }
}
#sb-splash.sb-hide { opacity: 0; pointer-events: none; }
/* While the splash is up, keep the game canvas off screen. The splash used to
   be opaque and simply cover it; now that it is transparent (so the shared
   background layer shows through), hiding the canvas is what keeps the game's
   half-built first frames from leaking out under the logo. */
body.sb-splashing > canvas { visibility: hidden; }
#sb-shade { /* just enough darkening to keep the logo and text legible */
  position: absolute; inset: 0;
  background: linear-gradient(rgba(2, 6, 20, .18), rgba(2, 6, 20, .42));
}
#sb-splash img {
  width: min(66vw, 50vh, 500px); height: auto; position: relative;
}

/* loading: a single thin line and the number, nothing else */
#sb-loadrow {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: clamp(10px, 1.6vh, 14px);
}
#sb-progress {
  position: relative; width: min(52vw, 380px); height: 3px; border-radius: 2px;
  background: rgba(255, 255, 255, .16);
  overflow: hidden;
}
#sb-progress .bar {
  position: absolute; inset: 0; width: 0%;
  background: #ffa41c;
  transition: width .25s ease-out;
}
#sb-label {
  position: relative; color: rgba(255, 255, 255, .72);
  font-size: clamp(11px, 1.6vh, 13px); line-height: 1;
  letter-spacing: .18em; text-indent: .18em;
  font-variant-numeric: tabular-nums;
}

/* start prompt: type only. The slow fade is an affordance (it reads as
   waiting for you), not decoration — it is the one thing left moving. */
#sb-start {
  display: none; position: relative;
  color: #eaf6ff;
  font-size: clamp(15px, 2.4vh, 20px); line-height: 1;
  letter-spacing: .26em; text-indent: .26em; text-transform: uppercase;
  animation: sb-breathe 2s ease-in-out infinite alternate;
}
@keyframes sb-breathe { from { opacity: .55; } to { opacity: 1; } }
#sb-splash.sb-ready #sb-loadrow { display: none; }
#sb-splash.sb-ready #sb-start { display: block; }
/* after the tap: stop breathing and dim — waiting for the game, not tappable */
#sb-splash.sb-tapped #sb-start { animation: none; opacity: .5; }