* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #061321; }
body {
  min-height: 100vh;
  min-height: 100svh;
  color: #f5f8ff;
  font-family: Arial, Helvetica, sans-serif;
}
.landing {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background-image: url("/assets/subzero-background.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.login-panel {
  position: absolute;
  left: 50%;
  top: 50.8%;
  width: min(37vw, 610px);
  transform: translateX(-50%);
}
#invite-form { display: flex; flex-direction: column; gap: 38px; }
#invite-code {
  width: 100%;
  height: 78px;
  border: 2px solid #36cfff;
  border-radius: 17px;
  outline: none;
  padding: 0 34px 0 96px;
  color: #f5f8ff;
  background: rgba(7, 21, 36, .94);
  box-shadow: 0 0 15px rgba(0, 174, 255, .28), inset 0 0 18px rgba(0, 125, 255, .08);
  font: 500 24px Arial, Helvetica, sans-serif;
  letter-spacing: .2px;
}
#invite-code::placeholder { color: #9aa9bd; opacity: 1; }
#invite-code:focus {
  border-color: #76e4ff;
  box-shadow: 0 0 22px rgba(0, 190, 255, .42);
}
button {
  height: 78px;
  width: 100%;
  border: 1px solid #05c8ff;
  border-radius: 17px;
  color: white;
  background: linear-gradient(105deg, #05baf4 0%, #0879f4 52%, #0750d5 100%);
  box-shadow: 0 0 16px rgba(0, 132, 255, .26);
  font: 700 29px Arial, Helvetica, sans-serif;
  letter-spacing: 2px;
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
}
button:hover { filter: brightness(1.12); }
button:active { transform: translateY(1px); }
button:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.form-message {
  min-height: 22px;
  margin: -25px 0 0;
  text-align: center;
  color: #b9d9ef;
  font-size: 14px;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
@media (max-width: 900px) {
  .login-panel { width: min(58vw, 610px); top: 51.5%; }
  #invite-form { gap: 22px; }
  #invite-code { height: 64px; padding-left: 62px; font-size: 19px; border-radius: 13px; }
  button { height: 64px; font-size: 23px; border-radius: 13px; }
}
@media (max-width: 600px) {
  .landing {
    background-position: 42% center;
  }
  .login-panel {
    width: calc(100vw - 42px);
    top: auto;
    bottom: 17%;
  }
  #invite-form { gap: 16px; }
  #invite-code { height: 58px; padding-left: 58px; font-size: 17px; }
  button { height: 58px; font-size: 20px; }
  .form-message { font-size: 12px; }
}