/* =========================================================
   Level UP Fly — landing page
   Tokens
   ========================================================= */
:root {
  --ink: #12162b;          /* deep navy (the "dark" of the page) */
  --ink-rgb: 18, 22, 43;
  --sun: #ffd21f;          /* logo yellow = primary accent */
  --pink: #ff3fa4;         /* logo pink  (sparingly) */
  --aqua: #3ed8e8;         /* logo cyan  (sparingly) */
  --cloud: #f6f8fc;        /* light text on dark */

  --font-display: "Bebas Neue", "Oswald", "Arial Narrow", Impact, sans-serif;
  --font-mono: "Space Mono", "JetBrains Mono", Consolas, "Courier New", monospace;

  --pad-x: clamp(20px, 3.3vw, 52px);
  --pad-y: clamp(18px, 3.2vh, 34px);
  --edge-b: clamp(28px, 7.5vh, 80px);   /* distance of bottom elements to the edge */
}

/* =========================================================
   Base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--ink);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 3px;
  border-radius: 6px;
}

/* shared type roles */
.t {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
}
.s {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.25;
  letter-spacing: .01em;
}

/* =========================================================
   Hero shell
   ========================================================= */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}

.bg {
  position: absolute; inset: 0; z-index: 0;
  background: #7ab9ee url("background.png") center / cover no-repeat;   /* poster + fallback */
}
.bg-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* a whisper of light behind the nav so dark text sits comfortably on the sky */
.bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 22%);
}

/* =========================================================
   Navigation
   ========================================================= */
.nav {
  position: relative; z-index: 6;
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* links dead-centre, "Play now" at the right edge */
  align-items: center;
  gap: 16px 28px;
  padding: var(--pad-y) var(--pad-x);
}
.nav .nav-cta { grid-column: 3; justify-self: end; }

/* ---- Sticker navbar (assets in navbar-assets/, see README there) ----
   The PNG shell carries outline + cyan offset; labels stay real text.
   Everything inside scales with the nav width (cqw), so the layout
   matches navbar-reference.png at any size.                              */
.game-nav {
  --nav-ink: #07111c;
  --nav-cyan: #08c7df;
  --nav-hover: #005f78;
  grid-column: 2;
  position: relative;
  width: clamp(320px, 42vw, 620px);
  aspect-ratio: 2185 / 396;
  container-type: inline-size;
  filter: drop-shadow(0 8px 18px rgba(0, 67, 110, .16));
}
.game-nav__shell {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: fill;
  pointer-events: none; user-select: none;
}
.game-nav__list {
  position: absolute;
  inset: 22% 7.5% 21% 7.5%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  margin: 0; padding: 0; list-style: none;
}
.game-nav__list > li { min-width: 0; height: 100%; }
.game-nav__link {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(6px, 2.2cqw, 18px);
  width: 100%; height: 100%;
  color: var(--nav-ink);
  font-family: var(--font-display);
  font-size: clamp(15px, 4.6cqw, 36px);
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .16s ease, color .16s ease;
}
.game-nav__link:hover { color: var(--nav-hover); transform: translateY(-2px); }
.game-nav__link:focus-visible { border-radius: 10px; outline: 3px solid var(--nav-cyan); outline-offset: 3px; }
.game-nav__icon {
  width: auto; height: clamp(20px, 5.6cqw, 44px);
  flex: 0 0 auto; object-fit: contain;
}
.game-nav__label { position: relative; display: inline-block; padding-top: .08em; }   /* Bebas sits high; nudge to optical centre */
.game-nav__active {                                   /* yellow marker under the label: active page (and on hover) */
  position: absolute; left: 0; bottom: -.28em;
  width: 100%; height: auto;
  opacity: 0; transform: scaleX(.6); transform-origin: center;
  transition: opacity .16s ease, transform .16s ease;
  pointer-events: none;
}
.game-nav__link.is-active .game-nav__active,
.game-nav__link[aria-current="page"] .game-nav__active,
.game-nav__link:hover .game-nav__active { opacity: 1; transform: none; }

/* =========================================================
   Image buttons (sticker PNGs: playnow / startnow / joindc)
   ========================================================= */
.img-btn {
  display: inline-block;
  line-height: 0;
  border-radius: 14px;
  filter: drop-shadow(0 12px 18px rgba(var(--ink-rgb), .28));
  transition: transform .25s cubic-bezier(.2,.7,.2,1), filter .25s ease;
}
.img-btn img { display: block; height: auto; }
.img-btn:hover { transform: translateY(-3px) scale(1.03); filter: drop-shadow(0 18px 24px rgba(var(--ink-rgb), .34)); }
.img-btn:active { transform: translateY(0) scale(.98); }

.nav-cta img { width: clamp(150px, 12.5vw, 190px); }

.cta-row {
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center;
  gap: clamp(8px, 1.2vw, 18px);
}
.cta-row img { width: clamp(168px, 15vw, 224px); }

/* =========================================================
   Center: logo, tagline, CTA
   ========================================================= */
.center {
  position: relative; z-index: 5;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 var(--pad-x) clamp(60px, 12vh, 140px);   /* slight upward bias */
}
.logo-wrap { margin: 0; line-height: 0; }
.logo {
  width: clamp(280px, 52vw, 880px);
  height: auto;
  filter: drop-shadow(0 28px 26px rgba(var(--ink-rgb), .38));
  animation: float 7s ease-in-out infinite;
  will-change: transform;
}
.tagline {
  max-width: 31ch;
  margin: clamp(10px, 2vh, 22px) 0 clamp(16px, 3vh, 30px);
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.6;
  text-shadow: 0 0 16px rgba(255,255,255,.9), 0 0 2px rgba(255,255,255,.9);
}

/* =========================================================
   Register modal — PNG layers from model-assets/ (see README there)
   modal-shell.png is the base (994×1270, yellow head band baked in);
   title, labels, inputs and button text are real HTML laid over it.
   All positions are % of the shell, type sizes use cqw, so the modal
   matches reference-modal.png at any width.
   ========================================================= */
.modal {
  --m-ink: #080c14;
  --m-yellow: #ffd300;
  --m-cyan: #09c8dc;
  --m-pink: #ff1493;
  width: min(92vw, 470px, calc((100svh - 32px) * .7827));   /* whole sticker always fits: 994/1270 */
  max-width: none; max-height: none;
  margin: auto;
  padding: 0; border: 0;
  background: transparent;
  overflow: visible;
  color: var(--m-ink);
}
.modal::backdrop {
  background: rgba(var(--ink-rgb), .62);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
body:has(dialog[open]) { overflow: hidden; }

.reg-shell {
  position: relative;
  container-type: inline-size;
  filter: drop-shadow(0 0 26px rgba(9, 200, 220, .45)) drop-shadow(0 26px 40px rgba(0, 0, 0, .4));
}
.reg-shell__bg { width: 100%; height: auto; display: block; user-select: none; pointer-events: none; }

/* head band: title + close sticker */
.reg-title {
  position: absolute; left: 9%; right: 19.6%; top: 3.1%; height: 13.5%;
  display: flex; align-items: center; justify-content: center;
  margin: 0; padding-top: .06em;
  font-family: var(--font-display); font-weight: 400;
  font-size: 7.9cqw; line-height: 1; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap;
}
.reg-close {
  position: absolute; top: 4.3%; right: 3.4%; width: 10%;
  padding: 0; border: 0; background: none; cursor: pointer;
  transition: transform .2s ease;
}
.reg-close img { width: 100%; height: auto; display: block; }
.reg-close:hover { transform: scale(1.08) rotate(-8deg); }
.reg-close:focus-visible { outline: 3px solid var(--m-cyan); outline-offset: 2px; border-radius: 12px; }

/* body column (inside the white plate) */
.reg-body { position: absolute; top: 21%; left: 11.1%; width: 75%; bottom: 2.5%; }

.field { display: block; margin: 0 0 4cqw; }
.field-label {
  display: block; margin: 0 0 1.2cqw .4cqw;
  font-family: var(--font-display); font-size: 4.4cqw; line-height: 1; letter-spacing: .04em; text-transform: uppercase;
}
.field-box { position: relative; display: block; width: 100%; aspect-ratio: 2024 / 359; }
.field-bg  { position: absolute; inset: 0; width: 100%; height: 100%; transition: filter .2s ease; }
.field-ico {                                     /* pale-blue compartment: x 1.7–15.9 %, y 8.9–83.6 % of the field */
  position: absolute; left: 1.7%; width: 14.2%; top: 26%; height: 40%;
  object-fit: contain; pointer-events: none;
}
.field input {
  position: absolute; left: 18.5%; right: 3%; top: 9%; height: 74.7%;
  border: 0; outline: 0; background: transparent;
  padding: 0 1cqw;
  font: 400 max(13px, 2.9cqw)/1.2 "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: .01em;
  color: var(--m-ink);
}
.field input::placeholder { color: #2a3140; opacity: .85; }
.field input[type="password"] { letter-spacing: .14em; }
.field input[type="password"]::placeholder { letter-spacing: .01em; }
.field-box:focus-within .field-bg { filter: drop-shadow(0 0 .5cqw var(--m-yellow)) drop-shadow(0 0 .2cqw var(--m-yellow)); }
.field.invalid .field-bg         { filter: drop-shadow(0 0 .5cqw var(--m-pink))   drop-shadow(0 0 .2cqw var(--m-pink)); }

.form-msg {                                      /* sits between the fields and the button; grows only when it has text */
  margin: -.6cqw 0 .8cqw; min-height: 2cqw;
  font-size: max(11px, 2.4cqw); line-height: 1.25; text-align: center;
  color: #c4106f;
}

/* primary button: base sticker + arrow badge + live text */
.btn-reg {
  position: relative; display: block;
  width: 96%; margin: 0 0 0 2.6%;
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--m-ink); text-decoration: none;
  transition: transform .2s ease, opacity .2s ease;
}
.btn-reg__bg  { width: 100%; height: auto; display: block; pointer-events: none; }
.btn-reg__ico { position: absolute; left: 6%; top: 50%; width: 13.5%; height: auto; transform: translateY(-50%); pointer-events: none; }
.btn-reg-label {                                 /* yellow body of the base: y 18.8–80.6 % */
  position: absolute; inset: 18.8% 14% 19.4% 20%;
  display: flex; align-items: center; justify-content: center;
  padding-top: .06em;
  font-family: var(--font-display); font-size: 7.9cqw; line-height: 1; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap;
}
.btn-reg:hover  { transform: translateY(-2px); }
.btn-reg:active { transform: translate(2px, 2px); }
.btn-reg[disabled] { opacity: .7; cursor: progress; transform: none; }
.btn-reg:focus-visible { outline: 3px solid var(--m-cyan); outline-offset: -2px; border-radius: 18px; }

/* success state (replaces the form inside the same column) */
.reg-done {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.reg-done[hidden] { display: none; }
.reg-done p { margin: 0 0 5cqw; font-size: max(12px, 2.9cqw); line-height: 1.6; }
.reg-done .btn-reg-label { inset-inline: 10%; }
.link-btn {
  display: block; margin: 4cqw auto 0;
  border: 0; background: none; cursor: pointer;
  font: 700 max(11px, 2.4cqw)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--m-ink);
  text-decoration: underline; text-underline-offset: 4px;
}

@keyframes modal-in { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes fade-in  { from { opacity: 0; } to { opacity: 1; } }
.modal[open] { animation: modal-in .42s cubic-bezier(.2, .9, .3, 1.15) both; }
.modal[open]::backdrop { animation: fade-in .3s ease both; }

/* =========================================================
   Motion
   ========================================================= */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
  50%      { box-shadow: 0 0 0 8px rgba(46, 229, 107, .08); }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes bloom {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: none; }
}
.nav       { animation: rise .9s cubic-bezier(.2,.7,.2,1) both .1s; }
.logo-wrap { animation: bloom 1.1s cubic-bezier(.2,.7,.2,1) both .25s; }
.tagline   { animation: rise .9s cubic-bezier(.2,.7,.2,1) both .5s; }
.cta-row   { animation: rise .9s cubic-bezier(.2,.7,.2,1) both .62s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bg-video { display: none; }                      /* still image instead of the loop */
  .logo, .nav, .logo-wrap, .tagline, .cta-row { animation: none; }
  .modal[open], .modal[open]::backdrop { animation: none; }
  .reg-close, .btn-reg, .field-bg { transition: none; }
  .img-btn, .game-nav__link, .game-nav__active { transition: none; }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-height: 720px) and (min-width: 881px) {
  .logo { width: clamp(260px, 44vw, 600px); }
  .center { padding-bottom: clamp(40px, 9vh, 80px); }
}

@media (max-width: 880px) {
  .hero { min-height: 100svh; }

  .nav { grid-template-columns: 1fr; gap: 12px 16px; }
  .game-nav { grid-column: 1; grid-row: 2; justify-self: center; width: min(560px, 100%); }
  .nav .nav-cta { grid-column: 1; grid-row: 1; }
  .nav-cta img { width: 150px; }

  .center { padding: 10px var(--pad-x) 28px; }

  .logo { width: min(88vw, 520px); }
  .tagline { font-size: 13px; max-width: 34ch; }

}

@media (max-width: 480px) {
  .nav { padding-inline: 10px; }                    /* let the shell use nearly the full width */
  .game-nav__list { inset-inline: 6%; }
  .game-nav__link { letter-spacing: .02em; }
}