:root {
  color-scheme: dark;
  --screen-bg: #040214;
  --text-glow: 0 0 10px rgba(170, 248, 255, 0.85), 0 0 24px rgba(62, 191, 255, 0.65);
  --field-glow: 0 0 0 2px rgba(120, 214, 255, 0.45), 0 0 24px rgba(30, 130, 255, 0.35);
  --field-invalid: 0 0 0 2px rgba(255, 76, 155, 0.85), 0 0 26px rgba(255, 76, 155, 0.5);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at top, rgba(45, 0, 120, 0.38), transparent 42%),
    radial-gradient(circle at bottom, rgba(0, 160, 255, 0.18), transparent 30%),
    var(--screen-bg);
  font-family: Arial, Helvetica, sans-serif;
}

body {
  min-height: 100vh;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 12px;
}

.poster {
  position: relative;
  width: min(calc(100vh * 0.8), 100vw);
  max-width: 1080px;
  aspect-ratio: 1080 / 1350;
  overflow: hidden;
}

.poster__bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}

.overlay-form {
  position: absolute;
  inset: 0;
}

.field {
  position: absolute;
  border: 0;
  outline: none;
  background: rgba(3, 20, 52, 0.12);
  color: #ecfcff;
  text-shadow: var(--text-glow);
  caret-color: #f8ff75;
  transition: box-shadow 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.field:focus,
.field.has-value {
  background: rgba(5, 18, 52, 0.28);
}

.field.is-invalid,
.join-choice.is-invalid {
  box-shadow: var(--field-invalid);
}

.field--name,
.field--phone {
  left: 51.1%;
  width: 44.2%;
  height: 6.05%;
  padding: 0 2.1%;
  font-size: clamp(16px, 1.72vw, 30px);
  font-weight: 700;
  letter-spacing: 0;
}

.field--name {
  top: 52.8%;
}

.field--phone {
  top: 60.22%;
}

.submit-trigger {
  position: absolute;
  left: 50.8%;
  top: 66.75%;
  width: 21.8%;
  height: 7.2%;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.submit-trigger:focus-visible .submit-trigger__glow,
.submit-trigger:hover .submit-trigger__glow {
  opacity: 1;
  transform: scale(1.03);
}

.submit-trigger[disabled] {
  cursor: progress;
}

.submit-trigger__glow {
  position: absolute;
  inset: 12%;
  border-radius: 999px;
  opacity: 0;
  transition: opacity 140ms ease, transform 140ms ease;
  box-shadow:
    0 0 12px rgba(255, 96, 225, 0.8),
    0 0 28px rgba(255, 96, 225, 0.45),
    inset 0 0 8px rgba(255, 255, 255, 0.22);
}

.join-choice {
  position: absolute;
  left: 26.7%;
  top: 83.9%;
  width: 14.2%;
  height: 12.8%;
  margin: 0;
  padding: 0;
  border: 0;
}

.join-pill {
  position: absolute;
  left: 0;
  width: 100%;
  height: 35.3%;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 140ms ease;
}

.join-pill:hover,
.join-pill:focus-within {
  transform: scale(1.02);
}

.join-pill--yes {
  top: 2.4%;
}

.join-pill--no {
  bottom: 4%;
}

.join-pill input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.join-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(34, 174, 246, 0.92);
  box-shadow:
    inset 0 0 0 2px rgba(0, 25, 82, 0.92),
    0 0 12px rgba(34, 174, 246, 0.45);
}

.join-pill::after {
  content: "";
  position: absolute;
  top: 10%;
  left: 4%;
  width: 31%;
  height: 80%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(79, 214, 255, 0.92), rgba(0, 147, 233, 0.96));
  box-shadow:
    inset 0 0 0 2px rgba(0, 5, 64, 0.82),
    0 0 8px rgba(75, 210, 255, 0.65);
  transition: left 180ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.join-pill__text {
  position: relative;
  z-index: 1;
  padding-left: 28%;
  color: #031a66;
  font-size: clamp(18px, 1.8vw, 31px);
  font-weight: 900;
  line-height: 1;
  text-shadow: none;
}

.join-pill.is-selected::before {
  background: rgba(52, 212, 255, 0.96);
  box-shadow:
    0 0 10px rgba(35, 182, 255, 0.85),
    0 0 20px rgba(35, 182, 255, 0.3),
    inset 0 0 0 2px rgba(145, 241, 255, 0.3);
}

.join-pill.is-selected::after {
  left: 65%;
  background: linear-gradient(180deg, rgba(148, 243, 255, 1), rgba(44, 186, 255, 0.96));
  box-shadow:
    inset 0 0 0 2px rgba(0, 5, 64, 0.78),
    0 0 10px rgba(84, 207, 255, 0.95);
}

.field--square {
  width: 8.7%;
  height: 6.9%;
  padding: 0;
  text-align: center;
  font-size: clamp(22px, 2.3vw, 42px);
  font-weight: 900;
  background: rgba(4, 14, 46, 0.08);
  appearance: textfield;
  -moz-appearance: textfield;
}

.field--square::-webkit-outer-spin-button,
.field--square::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.field--companions {
  left: 55.05%;
  top: 88.55%;
}

.field--padel {
  left: 79.95%;
  top: 88.7%;
}

.toast {
  position: absolute;
  left: 50%;
  top: 3%;
  transform: translateX(-50%) translateY(-12px);
  min-width: min(78%, 560px);
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(9, 10, 39, 0.82);
  color: #effdff;
  font-size: clamp(13px, 1.1vw, 18px);
  font-weight: 700;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 18px rgba(255, 64, 189, 0.38);
  transition: opacity 180ms ease, transform 180ms ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.toast[data-tone="success"] {
  box-shadow:
    0 0 14px rgba(54, 211, 255, 0.75),
    0 0 30px rgba(54, 211, 255, 0.32);
}

.toast[data-tone="error"] {
  box-shadow:
    0 0 14px rgba(255, 64, 150, 0.85),
    0 0 30px rgba(255, 64, 150, 0.4);
}

.sr-only {
  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: 720px) {
  html,
  body,
  .app-shell {
    min-height: 100dvh;
  }

  .app-shell {
    padding: 0;
  }

  .poster {
    width: 100vw;
    max-width: none;
    height: auto;
    aspect-ratio: 1080 / 1350;
  }

  .poster__bg {
    object-fit: contain;
  }

  .field--name,
  .field--phone {
    font-size: max(16px, 3.2vw);
  }

  .join-pill__text {
    font-size: max(18px, 3.6vw);
  }
}