/* ============================================================
   GameTown VI: Last Copy — play.gametownvi.com holding page
   Same design system as gametownvi.com: midnight violet base,
   pink / cyan / gold accents, brush display face. One screen.
   ============================================================ */

:root {
  --midnight: #070218;
  --midnight-2: #14042e;
  --pink: #ff2d9e;
  --cyan: #35e0ff;
  --gold: #ffc21a;
  --violet: #b44bff;
  --paper: #f4ecff;
  --dim: #a89ac4;

  --display: "Luckiest Guy", "Arial Black", sans-serif;
  --body: "Rubik", "Helvetica Neue", Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  background: var(--midnight);
  background-image:
    radial-gradient(ellipse 90% 60% at 50% -10%, #1d0640 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 50% 115%, #12033a 0%, transparent 55%);
  color: var(--paper);
  font-family: var(--body);
  overflow: hidden;
}

.stage {
  position: relative;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: clamp(0.5rem, 1.5vh, 1.25rem) clamp(1rem, 4vw, 3rem);
  text-align: center;
}

.glow {
  position: absolute;
  width: 42vmin;
  height: 42vmin;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.22;
  pointer-events: none;
  z-index: 0;
}

.glow-pink { background: var(--pink); top: 6%; left: 8%; }
.glow-cyan { background: var(--cyan); bottom: 10%; right: 6%; }

.hero {
  z-index: 1;
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: clamp(0.25rem, 1vh, 0.75rem);
}

.logo {
  height: min(48dvh, 78vw);
  width: auto;
  max-width: 92vw;
  border-radius: clamp(10px, 2vmin, 18px);
  box-shadow:
    0 0 40px rgba(180, 75, 255, 0.35),
    0 0 120px rgba(255, 45, 158, 0.18);
}

.pitch { z-index: 1; }

.tagline {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.4rem, 4dvh, 2.4rem);
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--gold);
  text-shadow:
    0 0 18px rgba(255, 194, 26, 0.45),
    0 2px 0 rgba(0, 0, 0, 0.6);
}

.sub {
  margin-top: clamp(0.3rem, 1dvh, 0.6rem);
  font-size: clamp(0.85rem, 2dvh, 1.05rem);
  font-weight: 600;
  color: var(--dim);
  letter-spacing: 0.04em;
}

.back {
  margin-top: clamp(0.6rem, 1.8dvh, 1.1rem);
}

.back a {
  display: inline-block;
  font-weight: 800;
  font-size: clamp(0.8rem, 1.9dvh, 1rem);
  letter-spacing: 0.06em;
  color: var(--cyan);
  text-decoration: none;
  border: 1px solid rgba(53, 224, 255, 0.5);
  border-radius: 6px;
  padding: 0.5em 1.1em;
  background: var(--midnight-2);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}

.back a:hover,
.back a:focus-visible {
  color: var(--paper);
  border-color: var(--cyan);
  box-shadow: 0 0 22px rgba(53, 224, 255, 0.3);
  outline: none;
}

.back a:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.footer {
  z-index: 1;
  max-width: 70ch;
}

.footer p {
  font-size: clamp(0.55rem, 1.3dvh, 0.7rem);
  line-height: 1.5;
  color: var(--dim);
  opacity: 0.85;
}

@media (max-height: 560px) {
  .logo { height: min(38dvh, 70vw); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}