body {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--space-5);
  overflow-x: hidden;
}

#background-gif {
  position: fixed;
  inset: 0;
  z-index: -2;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  filter: blur(12px) brightness(0.55);
  pointer-events: none;
}

#overlay {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: oklch(0.17 0.012 286 / 0.55);
  backdrop-filter: blur(10px);
}

.auth-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  inline-size: min(52rem, 100%);
  border: 1px solid oklch(1 0 0 / 0.10);
  border-radius: var(--radius-lg);
  background: oklch(0.25 0.013 286 / 0.55);
  backdrop-filter: blur(16px);
  box-shadow: 0 1.5rem 3rem oklch(0 0 0 / 0.45);
  overflow: hidden;
}

.auth-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-7) var(--space-6);
  text-align: center;
}

.auth-card .rule {
  block-size: auto;
  margin-block: var(--space-6);
  background: oklch(1 0 0 / 0.10);
}

.auth-art {
  display: grid;
  place-items: center;
  padding: var(--space-5);
}

.auth-art img {
  max-block-size: 22rem;
  border-radius: var(--radius-md);
}

.auth-logo {
  inline-size: 13rem;
  margin: 0 auto var(--space-5);
  object-fit: contain;
}

.auth-form h1 {
  margin: 0 0 var(--space-6);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.auth-form form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  text-align: start;
}

.field input {
  inline-size: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid oklch(1 0 0 / 0.14);
  border-radius: var(--radius-md);
  background: oklch(1 0 0 / 0.08);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-md);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.field input::placeholder {
  color: oklch(0.80 0.005 286 / 0.75);
}

.field input:hover {
  border-color: oklch(1 0 0 / 0.24);
}

.field input:focus {
  outline: none;
  border-color: var(--accent);
  background: oklch(1 0 0 / 0.12);
}

.field input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.captcha {
  display: flex;
  justify-content: center;
  inline-size: 100%;
  min-block-size: 66px;
}

.captcha .cf-turnstile {
  inline-size: 100%;
}

.auth-note {
  margin: 0 0 var(--space-6);
  color: oklch(0.82 0.006 286 / 0.85);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.auth-links {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
  margin-block-start: var(--space-6);
  font-size: var(--text-sm);
}

.auth-links a {
  color: var(--accent);
  font-weight: 500;
  text-decoration: none;
}

.auth-links a:hover {
  text-decoration: underline;
}

#slide-alert {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-alert);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-block-size: 3rem;
  padding: var(--space-3) var(--space-5);
  border-block-end: 1px solid var(--warn-line);
  background: var(--warn-bg);
  color: var(--warn-ink);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
  translate: 0 -100%;
  transition: translate var(--dur-slow) var(--ease);
}

#slide-alert.show {
  translate: 0 0;
}

#slide-alert svg {
  flex-shrink: 0;
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.waves {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: -1;
  block-size: 11rem;
  overflow: hidden;
  pointer-events: none;
}

/*
  Shore wash. The base is pinned three rem below the fold and only scaleY runs
  from the bottom edge, so the waterline rises and recedes while the very bottom
  stays covered — it never lifts and leaves a gap. A small per-layer tilt about
  the low-left corner keeps the left side higher, so it reads as a sloped
  shoreline rather than a symmetric bulge. `alternate` + `ease-in-out` reverses
  smoothly, so there is no snap, and the tall container leaves room so the crest
  never clips at the top.
*/
.wave {
  position: absolute;
  inset-block-end: -3rem;
  inset-inline-start: -20%;
  inline-size: 140%;
  block-size: 7rem;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: oklch(1 0 0 / 0.22);
  transform-origin: left bottom;
  animation: shore 5s ease-in-out infinite alternate;
}

.wave:nth-child(1) {
  --tilt: 2deg;
  opacity: 0.35;
  animation-duration: 5s;
}

.wave:nth-child(2) {
  --tilt: 3.5deg;
  opacity: 0.15;
  animation-duration: 7s;
  animation-delay: -1.5s;
}

.wave:nth-child(3) {
  --tilt: 1.5deg;
  opacity: 0.2;
  animation-duration: 6s;
  animation-delay: -3s;
}

@keyframes shore {
  from {
    transform: rotate(var(--tilt, 2deg)) scaleY(0.88);
  }

  to {
    transform: rotate(var(--tilt, 2deg)) scaleY(1.14);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wave {
    animation: none;
    transform: rotate(var(--tilt, 2deg));
  }
}

@media (max-width: 52rem) {
  .auth-card {
    grid-template-columns: minmax(0, 1fr);
    inline-size: min(26rem, 100%);
  }

  .auth-card .rule {
    block-size: 1px;
    inline-size: auto;
    margin-block: 0;
    margin-inline: var(--space-6);
  }

  .auth-art {
    order: -1;
    padding-block-end: 0;
  }

  .auth-art img {
    max-block-size: 12rem;
  }
}

@media (max-width: 26rem) {
  .auth-form {
    padding: var(--space-6) var(--space-5);
  }

  .auth-logo {
    inline-size: 9rem;
  }
}