.gate {
  --red: #d40000;
  background: #000;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Background video, scaled to cover the screen at any aspect ratio.
   The iframe stays 16:9 and overflows whichever side is too long, plus
   an extra --crop px on every edge so YouTube's title bar and corner
   buttons (fixed pixel size inside the player) land off-screen. */
.bg {
  --crop: 110px;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  container-type: size;
  opacity: 0;
  transition: opacity 1.5s ease;
}
.bg iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  height: calc(max(100vh, 56.25vw) + 2 * var(--crop));
  height: calc(max(100cqh, 56.25cqw) + 2 * var(--crop));
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
  border: 0;
}
/* Held black until the player's start-up overlay has faded. */
.bg.on { opacity: 1 }

.gate main {
  position: relative;
  z-index: 2;
  text-align: center;
}

#form {
  position: relative;
  display: inline-block;
}

/* fake caret for mobile, where the input isn't focused until tapped */
#form::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 50%;
  margin-top: -7px;
  width: 7px;
  height: 14px;
  background: var(--red);
  pointer-events: none;
  animation: blink 1.06s steps(1) infinite;
}
#form:focus-within::after { display: none }

@keyframes blink {
  0%, 50%      { opacity: 1 }
  50.01%, 100% { opacity: 0 }
}

@media (prefers-reduced-motion: reduce) {
  #form::after { animation: none }
}

#key {
  width: 190px;
  padding: 3px 5px;
  background: rgba(0, 0, 0, .6);
  border: 1px solid var(--red);
  color: var(--red);
  caret-color: var(--red);
  font: 13px/1.4 ui-monospace, monospace;
  letter-spacing: .3em;
  outline: none;
}
#key:focus { box-shadow: 0 0 0 1px var(--red) }

.name {
  margin: 30px 0 0;
  font: 13px/1 "Times New Roman", Times, serif;
  letter-spacing: .5em;
  text-indent: .5em;
  color: var(--red);
  text-shadow: 0 0 4px #000;
}

/* click-to-start overlay (needed to unlock sound) */
.veil {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.veil p {
  margin: 0;
  font: 11px/1 ui-monospace, monospace;
  letter-spacing: .5em;
  text-indent: .5em;
  color: #6a6a6a;
}
.veil .coarse { display: none }
@media (hover: none), (pointer: coarse) {
  .veil .fine   { display: none }
  .veil .coarse { display: inline }
}
.veil.gone { display: none }