:root {
  --gold: #f8d57a;
  --gold-deep: #9b6718;
  --ink: #ffffff;
  --error: #ffdb76;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 18%, rgba(188, 135, 40, 0.22), transparent 28%),
    linear-gradient(180deg, #070401 0%, #15100a 48%, #040404 100%);
}

button,
input {
  font: inherit;
}

.page {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: start center;
  padding: 0;
}

.poster {
  position: relative;
  width: min(100vw, 724px);
  aspect-ratio: 724 / 2172;
  min-height: 100vh;
  background:
    image-set(
      url("./assets/poster.webp") type("image/webp"),
      url("./assets/poster.png") type("image/png")
    )
    top center / 100% auto no-repeat;
  overflow: hidden;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.65);
}

.signup-form {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.session-picker {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
}

.session-choice {
  position: absolute;
  left: 7.3%;
  width: 10%;
  height: 3.25%;
  cursor: pointer;
  pointer-events: auto;
  z-index: 3;
}

.session-choice input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.session-choice span[aria-hidden="true"] {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 38%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 2px solid transparent;
  border-radius: 50%;
  background: transparent;
}

.session-choice input:checked + span[aria-hidden="true"] {
  border-color: #ffe19a;
  background:
    radial-gradient(circle at 50% 50%, #fff1bd 0 30%, #d99a25 33% 54%, rgba(20, 12, 0, 0.28) 58% 100%);
  box-shadow:
    0 0 0 2px rgba(46, 25, 0, 0.6) inset;
}

.session-choice input:focus-visible + span[aria-hidden="true"] {
  outline: 0;
}

.session-01 {
  top: 24.86%;
}

.session-02 {
  top: 30.79%;
}

.session-03 {
  top: 36.75%;
}

.session-04 {
  top: 42.7%;
}

.session-05 {
  top: 48.18%;
}

.field {
  position: absolute;
  left: 8%;
  width: 55.2%;
  height: 2.34%;
  z-index: 4;
}

.field-name {
  top: 55.48%;
}

.field-phone {
  top: 58.1%;
}

.field input {
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  color: #fff7dc;
  background: transparent;
  padding: 0 6% 0 34%;
  font-size: clamp(13px, 3vw, 22px);
  font-weight: 700;
  line-height: 1.2;
}

.field input::placeholder {
  color: transparent;
}

.field:focus-within {
  box-shadow: none;
}

.submit-btn {
  position: absolute;
  left: 65.61%;
  top: 56.03%;
  width: 26%;
  height: 4.14%;
  z-index: 4;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

.submit-btn:focus-visible,
.submit-btn:hover {
  outline: 0;
  box-shadow: none;
}

.submit-btn[disabled] {
  cursor: wait;
}

.form-message {
  position: absolute;
  left: 8%;
  top: 60.72%;
  width: 79%;
  min-height: 20px;
  margin: 0;
  z-index: 5;
  pointer-events: none;
  color: var(--error);
  font-size: clamp(11px, 3.2vw, 18px);
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.85);
}

.success-panel {
  position: absolute;
  z-index: 3;
  left: 8%;
  top: 53.55%;
  width: 79%;
  min-height: 7.2%;
  padding: 2.3% 4%;
  border: 1px solid rgba(255, 211, 105, 0.8);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(26, 16, 2, 0.94), rgba(4, 4, 4, 0.93));
  box-shadow: 0 0 28px rgba(255, 203, 93, 0.45);
  text-align: center;
}

.success-panel h1 {
  margin: 0;
  color: var(--gold);
  font-size: clamp(26px, 8vw, 48px);
  line-height: 1.1;
}

.success-panel p {
  margin: 10px 0 14px;
  color: #fff7dc;
  font-size: clamp(13px, 4vw, 22px);
  line-height: 1.45;
}

.success-panel button {
  min-height: 36px;
  padding: 0 18px;
  border: 1px solid rgba(255, 226, 153, 0.7);
  border-radius: 6px;
  color: #251600;
  background: linear-gradient(180deg, #ffe1a0 0%, #c58a2b 100%);
  font-weight: 900;
  cursor: pointer;
}

.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 (min-width: 725px) {
  .poster {
    margin: 0 auto;
  }
}