@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=DM+Sans:wght@400;500;600&display=swap');

:root {
  color-scheme: dark;
  --paper: #f8f4e8;
  --mist: #b7c7da;
  --ice: #dce8f4;
  --gold: #d7bb78;
  --midnight: #050a12;
}

* { box-sizing: border-box; }

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

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}

body {
  background-color: var(--midnight);
  color: var(--paper);
  font-family: "DM Sans", Arial, sans-serif;
  overflow-x: hidden;
}

.site-background {
  position: fixed;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(180deg, rgba(3, 10, 22, .46) 0%, rgba(4, 10, 20, .2) 44%, rgba(4, 7, 15, .92) 100%),
    url("../../assets/background/bg.png");
  background-position: center, center;
  background-size: cover, cover;
  pointer-events: none;
  transform: translateZ(0);
}

.launch-page {
  isolation: isolate;
  z-index: 2;
  height: 100svh;
  height: 100dvh;
  min-height: 100svh;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(1.5rem, 4vw, 4rem) clamp(1.25rem, 8vw, 7rem) max(1.6rem, env(safe-area-inset-bottom));
  background: transparent;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.launch-page::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: .33;
  background-image: radial-gradient(circle, rgba(239, 246, 255, .95) 0 1px, transparent 1.5px);
  background-size: 149px 151px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}

.atmosphere {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at 50% 39%, rgba(115, 168, 202, .18), transparent 26%), radial-gradient(circle at 83% 17%, rgba(218, 232, 248, .15), transparent 13%);
}

.side-character {
  position: absolute;
  z-index: 0;
  bottom: clamp(2rem, 4vh, 4.5rem);
  width: clamp(15.5rem, 27vw, 29rem);
  aspect-ratio: 1;
  margin: 0;
  pointer-events: none;
  filter: drop-shadow(0 1.2rem 1.3rem rgba(0, 0, 0, .34));
}

.side-character--left { left: clamp(-2rem, -4vw, 0rem); transform: scaleX(-1); }
.side-character--right { right: clamp(-7rem, -3vw, 2rem); }
.side-character img {
  position: absolute;
  left: 50%;
  bottom: 12%;
  display: block;
  width: var(--job-image-width, 100%);
  height: auto;
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
  translate: -50% 0;
  transform-origin: bottom center;
  transition: filter .28s ease, opacity .55s ease, transform .28s ease;
}
.side-character img.is-swapping { opacity: 0; }
.side-character:hover img,
.side-character:focus-visible img {
  filter: drop-shadow(0 0 .35rem rgba(220, 232, 244, .95)) drop-shadow(0 0 1.1rem rgba(215, 187, 120, .7));
  transform: scale(1.06);
}
.side-character:focus-visible { outline: 1px solid var(--gold); outline-offset: .4rem; }

.site-header, .hero, .site-footer { position: relative; z-index: 1; }
.site-header, .site-footer { display: flex; align-items: center; justify-content: space-between; }

.brand {
  color: var(--paper);
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(.8rem, 1.3vw, 1rem);
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}

.brand-mark {
  display: grid;
  width: 2rem;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(230, 216, 177, .68);
  color: var(--gold);
  font-size: 1.05rem;
}

.social-links { display: flex; gap: clamp(.55rem, 1.3vw, 1rem); }

.social-links a {
  position: relative;
  color: var(--gold);
  display: grid;
  width: 2rem;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(215, 187, 120, .6);
  border-radius: 50%;
  font-size: .98rem;
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.social-links a:hover,
.social-links a:focus-visible { border-color: #fff0b3; color: #fff0b3; box-shadow: 0 0 .65rem rgba(255, 221, 128, .82), 0 0 1.25rem rgba(215, 187, 120, .45); transform: translateY(-2px) scale(1.12); }

.social-links a::after {
  position: absolute;
  top: calc(100% + .55rem);
  left: 50%;
  padding: .28rem .45rem;
  border: 1px solid rgba(220, 232, 244, .2);
  border-radius: .2rem;
  background: rgba(6, 12, 24, .88);
  color: var(--paper);
  content: attr(data-tooltip);
  font-family: "DM Sans", Arial, sans-serif;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .06em;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -.25rem);
  transition: opacity .16s ease, transform .16s ease;
  white-space: nowrap;
}

.social-links a:hover::after, .social-links a:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

.music-menu {
  position: fixed;
  z-index: 7;
  top: auto;
  right: auto;
  bottom: max(1rem, env(safe-area-inset-bottom));
  left: clamp(.8rem, 2.5vw, 1.8rem);
}

.music-trigger {
  display: grid;
  width: 2.65rem;
  aspect-ratio: 1;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(220, 232, 244, .25);
  border-radius: 50%;
  background: rgba(6, 12, 24, .7);
  box-shadow: 0 .7rem 1.8rem rgba(0, 0, 0, .3);
  backdrop-filter: blur(5px);
  color: var(--gold);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}

.music-trigger:hover,
.music-trigger:focus-visible,
.music-menu.is-open .music-trigger { border-color: var(--gold); background: rgba(38, 44, 37, .8); transform: translateY(-.16rem) scale(1.05); }

.music-panel {
  position: absolute;
  bottom: calc(100% + .75rem);
  left: 0;
  display: grid;
  width: min(15rem, calc(100vw - 2rem));
  gap: .4rem;
  padding: .5rem;
  border: 1px solid rgba(220, 232, 246, .3);
  border-radius: .8rem;
  background: rgba(6, 12, 24, .88);
  box-shadow: 0 .9rem 2rem rgba(0, 0, 0, .35);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, .75rem, 0) scale(.96);
  transform-origin: bottom left;
  transition: opacity .2s ease, transform .26s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .26s;
  visibility: hidden;
}

.music-menu.is-open .music-panel { opacity: 1; pointer-events: auto; transform: translate3d(0, 0, 0) scale(1); transition-delay: 0s; visibility: visible; }

.music-option,
.music-volume-option {
  display: grid;
  grid-template-columns: 1.25rem 1fr auto;
  align-items: center;
  gap: .55rem;
  width: 100%;
  min-height: 2.5rem;
  padding: .55rem .65rem;
  border: 1px solid transparent;
  border-radius: .5rem;
  background: transparent;
  color: rgba(231, 237, 241, .92);
  cursor: pointer;
  font: 600 .73rem "DM Sans", Arial, sans-serif;
  letter-spacing: .04em;
  text-align: left;
  transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}

.music-option i,
.music-volume-option i { color: var(--gold); text-align: center; }
.music-option:hover,
.music-option:focus-visible,
.music-volume-option:focus-within { border-color: rgba(215, 187, 120, .55); background: rgba(215, 187, 120, .1); color: var(--paper); transform: translateX(.15rem); }
.music-option[aria-pressed="false"] { color: rgba(183, 199, 218, .64); }
.music-option[aria-pressed="false"] i { color: var(--mist); }

#music-volume {
  width: 5.25rem;
  height: .85rem;
  accent-color: var(--gold);
  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;
}

.hero {
  width: min(100%, 68rem);
  margin: auto;
  padding: 3rem 0;
  pointer-events: none;
  text-align: center;
}

.eyebrow {
  margin: 0 0 1.2rem;
  color: var(--gold);
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .27em;
  text-transform: uppercase;
}

.pre-registration-controls {
  position: fixed;
  z-index: 6;
  top: max(.75rem, env(safe-area-inset-top));
  left: 50%;
  display: grid;
  justify-items: center;
  gap: .5rem;
  pointer-events: none;
  transform: translateX(-50%);
  transition: left .62s cubic-bezier(.22, 1, .36, 1), right .62s cubic-bezier(.22, 1, .36, 1), top .62s cubic-bezier(.22, 1, .36, 1), transform .62s cubic-bezier(.22, 1, .36, 1);
}

.pre-registration-card {
  display: inline-grid;
  justify-items: center;
  gap: .28rem;
  min-width: clamp(11rem, 18vw, 14rem);
  margin: 0;
  padding: .85rem 1.35rem .8rem;
  border: 1px solid rgba(220, 232, 246, .24);
  border-radius: .8rem;
  background: linear-gradient(135deg, rgba(15, 34, 55, .64), rgba(7, 16, 31, .48));
  box-shadow: 0 .6rem 2.2rem rgba(0, 0, 0, .2), inset 0 1px rgba(255, 255, 255, .06);
  color: inherit;
  pointer-events: none;
  transition: border-color .22s ease, box-shadow .22s ease;
}

.pre-registration-number {
  color: var(--gold);
  display: inline-block;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  line-height: .95;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .35);
}

.pre-registration-number.is-counting {
  animation: pre-registration-count-pop .65s cubic-bezier(.22, 1, .36, 1);
  will-change: transform, opacity;
}

@keyframes pre-registration-count-pop {
  from {
    opacity: .4;
    transform: translateY(.24rem) scale(.94);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.pre-registration-label {
  color: rgba(231, 237, 241, .93);
  font-size: clamp(.86rem, 1.25vw, 1.05rem);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.pre-register-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-width: 16rem;
  padding: 1rem 1.8rem;
  border: 1px solid rgba(215, 187, 120, .72);
  border-radius: .65rem;
  background: linear-gradient(135deg, rgba(125, 95, 40, .82), rgba(63, 43, 20, .78));
  box-shadow: 0 .55rem 1.5rem rgba(0, 0, 0, .26), 0 0 1.1rem rgba(215, 187, 120, .18);
  color: #fff5d7;
  font-family: Cinzel, Georgia, serif;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .1em;
  pointer-events: auto;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.pre-register-link:hover,
.pre-register-link:focus-visible { border-color: #ffebb1; box-shadow: 0 .75rem 1.8rem rgba(0, 0, 0, .32), 0 0 1.7rem rgba(215, 187, 120, .42); transform: translateY(-.15rem); }
.pre-register-link:focus-visible { outline: 2px solid var(--paper); outline-offset: .2rem; }

.timer-is-docked .pre-registration-controls {
  top: clamp(.75rem, 2vw, 1.4rem);
  right: clamp(.8rem, 2.5vw, 2rem);
  left: auto;
  display: grid;
  justify-items: center;
  gap: .5rem;
  transform: none;
}

.milestones-section {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 100svh;
  min-height: 100dvh;
  place-items: center;
  overflow: hidden;
  padding: clamp(7rem, 12vh, 9rem) clamp(1.25rem, 8vw, 7rem) clamp(4rem, 7vh, 6rem);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.milestones-panel {
  position: relative;
  width: min(68rem, calc(100vw - 2rem));
  max-height: none;
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--paper);
  box-shadow: none;
}

.milestone-dialog__content {
  position: relative;
  z-index: 1;
  width: 67%;
  min-height: clamp(29rem, 50vw, 35rem);
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
}

.milestone-dialog__character {
  position: absolute;
  z-index: 0;
  right: -2%;
  bottom: -1.5rem;
  width: min(43%, 28rem);
  max-height: 96%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 1.2rem 1.4rem rgba(0, 0, 0, .45));
  pointer-events: none;
}

.milestones-panel h2 {
  max-width: 28rem;
  margin: 0 auto;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1.55rem, 4vw, 2.5rem);
  font-weight: 600;
  line-height: 1.25;
}

.milestone-dialog__intro { max-width: 30rem; margin: 1rem auto 1.5rem; color: rgba(231, 237, 241, .78); line-height: 1.65; }

.milestone-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.milestone-list li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: .35rem;
  padding: 1.5rem .4rem .8rem;
  border: 1px solid rgba(220, 232, 246, .16);
  border-radius: .65rem;
  background: rgba(2, 8, 19, .24);
  text-align: center;
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}

.milestone-icon { position: absolute; top: -.52rem; left: 50%; width: 1.04rem; aspect-ratio: 1; border: 1px solid rgba(129, 166, 207, .72); background: linear-gradient(135deg, #1d4d76, #0b203c); box-shadow: inset 0 0 .3rem rgba(164, 207, 245, .16); transform: translateX(-50%) rotate(45deg); transition: border-color .3s ease, background .3s ease, box-shadow .3s ease; }
.milestone-list li.is-reached { border-color: rgba(255, 228, 137, .92); background: rgba(215, 187, 120, .13); box-shadow: 0 0 1.2rem rgba(255, 222, 121, .7), inset 0 0 1rem rgba(215, 187, 120, .12); }
.milestone-list li.is-reached .milestone-icon { border-color: #fff1bd; background: linear-gradient(135deg, #fff0a6, #b98226); box-shadow: 0 0 .5rem #fff0b0, 0 0 1.15rem rgba(255, 203, 91, .95), inset 0 0 .28rem rgba(255, 255, 225, .85); }
.milestone-list strong { color: var(--gold); font-family: Cinzel, Georgia, serif; font-size: 1.2rem; }
.milestone-list span { color: rgba(231, 237, 241, .9); font-size: .72rem; font-weight: 600; line-height: 1.3; }
.milestone-list em { color: var(--mist); font-size: .55rem; font-style: normal; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.milestone-progress { display: grid; gap: .55rem; margin: 0 auto 1rem; text-align: left; }
.milestone-progress__heading { --milestone-value-size: clamp(1.1rem, 2vw, 1.45rem); display: flex; align-items: center; justify-content: center; color: var(--mist); font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-align: center; text-transform: uppercase; }
.milestone-progress__heading strong,
.milestone-progress__heading strong.is-complete { flex-shrink: 0; color: var(--gold); font-family: Cinzel, Georgia, serif; font-size: var(--milestone-value-size); letter-spacing: .04em; line-height: 1; white-space: nowrap; }
.milestone-progress__track { position: relative; display: block; height: 1.05rem; overflow: visible; border: 1px solid rgba(220, 232, 246, .26); border-radius: 999px; background: rgba(1, 7, 17, .62); box-shadow: inset 0 1px .35rem rgba(0, 0, 0, .34); }
.milestone-progress__fill { position: relative; display: block; width: 0%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #b9974e, #f3d994); box-shadow: 0 0 1rem rgba(215, 187, 120, .72); transition: width .5s cubic-bezier(.22, 1, .36, 1); }
.milestone-progress__fill::after { position: absolute; top: 50%; right: -.48rem; width: .92rem; aspect-ratio: 1; content: "✦"; display: grid; place-items: center; color: #fff7cf; font-size: .78rem; line-height: 1; text-shadow: 0 0 .32rem #fff4b3, 0 0 .85rem #ffd75a, 0 0 1.45rem rgba(255, 203, 74, .9); transform: translateY(-50%); animation: milestone-progress-spark 1.3s ease-in-out infinite; }

@keyframes milestone-progress-spark {
  0%, 100% { opacity: .7; transform: translateY(-50%) scale(.78) rotate(0deg); }
  50% { opacity: 1; transform: translateY(-50%) scale(1.2) rotate(40deg); }
}

.milestone-test-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; margin: 0 auto 1.5rem; }
.milestone-test-controls[hidden] { display: none; }
.milestone-test-controls button { padding: .4rem .65rem; border: 1px solid rgba(220, 232, 246, .28); border-radius: .4rem; background: rgba(5, 16, 31, .5); color: var(--mist); cursor: pointer; font: 700 .58rem "DM Sans", Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.milestone-test-controls button:hover,
.milestone-test-controls button:focus-visible { border-color: var(--gold); color: var(--paper); }

#main-content .eyebrow {
  margin-bottom: 1.35rem;
  font-size: clamp(.9rem, 1.45vw, 1.2rem);
  font-weight: 800;
  letter-spacing: .2em;
}

h1 {
  margin: 0;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(2.15rem, 6.4vw, 5.7rem);
  font-weight: 600;
  letter-spacing: clamp(.08em, .45vw, .22em);
  line-height: 1.15;
  text-indent: .2em;
  text-transform: uppercase;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .45);
}

.launch-date {
  margin: 1rem 0 2.7rem;
  color: var(--mist);
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(.76rem, 1.3vw, 1rem);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.countdown {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(.55rem, 2vw, 2rem);
  transform-origin: top center;
  transition: background .7s cubic-bezier(.2, .75, .25, 1), box-shadow .7s cubic-bezier(.2, .75, .25, 1), padding .7s cubic-bezier(.2, .75, .25, 1), transform .7s cubic-bezier(.2, .75, .25, 1);
  will-change: transform;
}

.time-unit { min-width: clamp(3.6rem, 9vw, 7.9rem); display: grid; gap: .45rem; }

.number {
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(2.5rem, 7vw, 6.2rem);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: .9;
  text-shadow: 0 2px 28px rgba(5, 10, 20, .75);
}

.label { color: var(--mist); font-size: clamp(.52rem, .8vw, .66rem); font-weight: 600; letter-spacing: .17em; text-transform: uppercase; }
.divider { width: 1px; height: clamp(2.5rem, 5vw, 4rem); background: linear-gradient(transparent, rgba(216, 232, 246, .48), transparent); }

.intro { max-width: 37rem; margin: 3.5rem auto 1.5rem; color: rgba(231, 237, 241, .82); font-size: clamp(.9rem, 1.4vw, 1.06rem); line-height: 1.8; }

.site-footer {
  position: fixed;
  z-index: 6;
  bottom: max(.85rem, env(safe-area-inset-bottom));
  left: 50%;
  width: max-content;
  max-width: calc(100vw - 2rem);
  margin: 0;
  color: rgba(183, 199, 218, .82);
  font-size: .67rem;
  letter-spacing: .06em;
  text-align: center;
  transform: translateX(-50%);
}

.page-navigation {
  position: fixed;
  z-index: 6;
  bottom: calc(max(.85rem, env(safe-area-inset-bottom)) + 1.8rem);
  left: 50%;
  display: grid;
  width: 3.4rem;
  height: 2.5rem;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--paper);
  cursor: pointer;
  opacity: 1;
  transform: translateX(-50%);
  transition: color .2s ease, filter .12s ease, opacity .2s ease, transform .2s ease;
}

.page-navigation:hover,
.page-navigation:focus-visible { color: #fff7d9; filter: drop-shadow(0 0 .42rem rgba(255, 227, 130, .95)) drop-shadow(0 0 1rem rgba(215, 187, 120, .72)); transform: translate(-50%, -.15rem) scale(1.1); }
.page-navigation:active { color: #fff; filter: brightness(1.55) drop-shadow(0 0 .6rem rgba(255, 245, 194, .95)); transform: translate(-50%, -.05rem) scale(.98); }
.page-navigation:focus-visible { outline: 2px solid var(--paper); outline-offset: .2rem; }
.page-navigation-symbol { width: 1rem; height: 1rem; }
.page-navigation-symbol::after { display: block; width: 100%; height: 100%; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; content: ""; transform: rotate(45deg); }
.page-navigation--previous { top: calc(max(.85rem, env(safe-area-inset-top)) + .25rem); bottom: auto; }
.page-navigation--previous .page-navigation-symbol::after { transform: rotate(225deg); }
.page-navigation[hidden] { display: none; }
.timer-is-docked .countdown {
  position: fixed;
  z-index: 5;
  top: clamp(.75rem, 2vw, 1.4rem);
  left: clamp(.8rem, 2.5vw, 2rem);
  width: min(23rem, calc(100vw - 7rem));
  gap: clamp(.3rem, .8vw, .65rem);
  padding: .55rem .75rem;
  border: 1px solid rgba(220, 232, 244, .2);
  border-radius: .75rem;
  background: rgba(5, 10, 20, .72);
  box-shadow: 0 .7rem 2rem rgba(0, 0, 0, .32);
  backdrop-filter: blur(6px);
  transform: none;
}

.timer-is-docked .time-unit { min-width: 0; flex: 1 1 0; gap: .2rem; }
.timer-is-docked .number { font-size: clamp(1.55rem, 2.5vw, 2.25rem); }
.timer-is-docked .label { font-size: .45rem; letter-spacing: .08em; }
.timer-is-docked .divider {
  display: block;
  flex: 0 0 1px;
  height: 2.75rem;
}

.servers-section {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100svh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  padding: clamp(7rem, 12vh, 9rem) clamp(1.25rem, 8vw, 7rem) clamp(4rem, 7vh, 6rem);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.timer-is-docked .servers-section { padding-top: clamp(7rem, 12vh, 9rem); }

.servers-section::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(239, 246, 255, .55) 0 1px, transparent 1.5px);
  background-size: 127px 139px;
  opacity: .25;
  mask-image: linear-gradient(to bottom, black, transparent 88%);
}

.servers-intro { position: relative; z-index: 1; max-width: 43rem; margin: 0 auto; text-align: center; }
.servers-intro .eyebrow { margin-bottom: 1rem; }

.servers-intro h2 {
  margin: 0;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(2.15rem, 5.4vw, 4.5rem);
  letter-spacing: .1em;
  line-height: 1.12;
  text-transform: uppercase;
}

.servers-intro h2 { font-weight: 400; }

.servers-intro > p:last-child { max-width: 34rem; margin: 1rem auto 0; color: var(--mist); line-height: 1.7; }

.server-grid {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2.5rem);
  width: min(100%, 78rem);
  margin: clamp(1.5rem, 3vh, 2.5rem) auto 0;
}

.server-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(18rem, 25vw, 24rem);
  overflow: visible;
  padding: clamp(1.5rem, 4vw, 2.8rem);
  border: 2px solid rgba(220, 232, 244, .32);
  background: linear-gradient(145deg, rgba(53, 88, 113, .5), rgba(9, 28, 46, .55));
  box-shadow: 0 1.4rem 3rem rgba(0, 0, 0, .22);
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}

.server-card:hover { z-index: 20; border-color: rgba(215, 187, 120, .82); box-shadow: 0 1.7rem 3.8rem rgba(0, 0, 0, .38); transform: translateY(-.45rem); }
.server-card--loki { background-color: rgba(21, 55, 75, .3); }
.server-card--chaos { background-color: rgba(38, 66, 80, .3); }
.server-card--iris { background-color: rgba(51, 67, 113, .3); }
.server-card--chaos .server-npc { z-index: 4; }

.server-npc {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  filter: brightness(.78) drop-shadow(0 1.2rem 1.2rem rgba(0, 0, 0, .35));
  transition: transform .45s cubic-bezier(.2, .75, .25, 1), filter .45s ease;
}

.server-card:hover .server-npc {
  filter: brightness(1.04) drop-shadow(0 1.2rem 1.2rem rgba(0, 0, 0, .35));
  transform: scale(1.16) translateY(-.65rem);
}

.server-label {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: .8rem;
  max-width: 18rem;
  text-shadow: 0 .15rem 1.2rem rgba(0, 0, 0, .7);
  transform-origin: left bottom;
  transform: translate3d(-50%, -.55rem, 0) scale(1);
  will-change: left, transform;
  transition: left .26s cubic-bezier(.22, 1, .36, 1), transform .26s cubic-bezier(.22, 1, .36, 1);
}

.server-label h3 {
  display: inline-block;
  margin: 0;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .2s ease;
}

.server-card:hover .server-label {
  left: .8rem;
  transform: translate3d(0, 0, 0) scale(.68);
}

.server-card:hover .server-label h3 { color: var(--gold); }

.ambient-mist {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
  transition: opacity .3s ease, visibility 0s linear 0s;
}

body.mist-is-hidden .ambient-mist {
  visibility: hidden;
  opacity: 0;
  transition-delay: 0s, .3s;
}

body.mist-is-hidden .ambient-mist * { animation-play-state: paused; }

.mist-cloud {
  position: absolute;
  display: block;
  width: min(54rem, 90vw);
  height: min(24rem, 42vw);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(242, 205, 111, .16) 0%, rgba(223, 172, 70, .08) 42%, transparent 74%);
  opacity: .36;
  will-change: transform, opacity;
}

.mist-cloud--one { top: 8%; left: -35%; animation: mist-wander-one 26s ease-in-out infinite alternate; }
.mist-cloud--two { top: 48%; right: -38%; width: min(48rem, 80vw); height: min(21rem, 38vw); opacity: .26; animation: mist-wander-two 31s ease-in-out -7s infinite alternate; }
.mist-cloud--three { display: none; }

.mist-fairy {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 4rem;
  aspect-ratio: 1;
  will-change: transform;
  animation: fairy-roam 34s cubic-bezier(.42, 0, .58, 1) infinite alternate;
}

.fairy-light {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: .7rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff5c8;
  box-shadow: 0 0 .45rem #fff3b6, 0 0 1.3rem rgba(255, 220, 111, .95), 0 0 2.8rem rgba(238, 180, 78, .75);
  transform: translate(-50%, -50%);
  animation: fairy-pulse 1.9s ease-in-out infinite alternate;
}

.fairy-light::before,
.fairy-light::after {
  position: absolute;
  top: 50%;
  width: 1.35rem;
  height: .72rem;
  border: 1px solid rgba(255, 243, 196, .7);
  border-radius: 90% 18% 90% 18%;
  background: linear-gradient(135deg, rgba(255, 252, 221, .78), rgba(238, 194, 108, .08));
  box-shadow: 0 0 .75rem rgba(255, 222, 132, .5);
  content: "";
  transform-origin: 0 50%;
  animation: fairy-wing-left .45s ease-in-out infinite alternate;
}

.fairy-light::before { right: 45%; transform: rotate(-26deg); }
.fairy-light::after { left: 45%; transform: scaleX(-1) rotate(-26deg); animation-name: fairy-wing-right; }

.fairy-spark {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: .22rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffe9a5;
  box-shadow: 0 0 .55rem rgba(255, 229, 148, .95);
  opacity: 0;
  animation: fairy-spark-drift 2.8s ease-out infinite;
}

.fairy-spark--one { animation-delay: -.2s; }
.fairy-spark--two { animation-delay: -.8s; }
.fairy-spark--three { animation-delay: -1.4s; }

.mist-particle {
  position: absolute;
  top: var(--y);
  left: var(--x);
  display: block;
  width: var(--size);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffe9a5;
  box-shadow: 0 0 .45rem rgba(255, 222, 130, .95), 0 0 1rem rgba(217, 175, 77, .75);
  opacity: 0;
  will-change: transform, opacity;
  animation: mist-particle-drift var(--duration) linear var(--delay) infinite;
}

.settings-menu {
  position: fixed;
  z-index: 7;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
}

.settings-trigger {
  display: grid;
  width: 2.65rem;
  aspect-ratio: 1;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(220, 232, 246, .3);
  border-radius: 50%;
  background: rgba(6, 12, 24, .7);
  box-shadow: 0 .7rem 1.8rem rgba(0, 0, 0, .3);
  color: var(--gold);
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}

.settings-trigger:hover,
.settings-trigger:focus-visible,
.settings-menu.is-open .settings-trigger { border-color: var(--gold); background: rgba(38, 44, 37, .8); transform: translateY(-.16rem) scale(1.05) rotate(18deg); }

.settings-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + .75rem);
  display: grid;
  width: min(15rem, calc(100vw - 2rem));
  gap: .4rem;
  padding: .5rem;
  border: 1px solid rgba(220, 232, 246, .3);
  border-radius: .8rem;
  background: rgba(6, 12, 24, .88);
  box-shadow: 0 .9rem 2rem rgba(0, 0, 0, .35);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, .75rem, 0) scale(.96);
  transform-origin: bottom right;
  transition: opacity .2s ease, transform .26s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .26s;
  visibility: hidden;
}

.settings-menu.is-open .settings-panel { opacity: 1; pointer-events: auto; transform: translate3d(0, 0, 0) scale(1); transition-delay: 0s; visibility: visible; }

.settings-option {
  display: grid;
  grid-template-columns: 1.25rem 1fr auto;
  align-items: center;
  gap: .55rem;
  width: 100%;
  min-height: 2.5rem;
  padding: .55rem .65rem;
  border: 1px solid transparent;
  border-radius: .5rem;
  background: transparent;
  color: rgba(231, 237, 241, .92);
  cursor: pointer;
  font: 600 .73rem "DM Sans", Arial, sans-serif;
  letter-spacing: .04em;
  text-align: left;
  transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}

.settings-option i { color: var(--gold); text-align: center; }
.settings-option:hover,
.settings-option:focus-visible { border-color: rgba(215, 187, 120, .55); background: rgba(215, 187, 120, .1); color: var(--paper); transform: translateX(-.15rem); }
.settings-option[aria-pressed="false"] { color: rgba(183, 199, 218, .64); }
.settings-option[aria-pressed="false"] i,
.settings-option[aria-pressed="false"] .toggle-indicator { background: rgba(183, 199, 218, .28); }

.toggle-indicator {
  position: relative;
  width: 2.15rem;
  height: 1.1rem;
  border: 1px solid rgba(220, 232, 246, .28);
  border-radius: 999px;
  background: rgba(215, 187, 120, .56);
  transition: background .18s ease, border-color .18s ease;
}

.toggle-indicator::after {
  position: absolute;
  top: 50%;
  left: calc(100% - .94rem);
  width: .72rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 .08rem .3rem rgba(0, 0, 0, .35);
  content: "";
  transform: translateY(-50%);
  transition: left .18s cubic-bezier(.22, 1, .36, 1), background .18s ease;
}

.settings-option[aria-pressed="false"] .toggle-indicator::after,
.music-option[aria-pressed="false"] .toggle-indicator::after { left: .18rem; background: var(--mist); }
.music-option[aria-pressed="false"] .toggle-indicator { background: rgba(183, 199, 218, .28); }

html.animations-disabled { scroll-behavior: auto; }
body.background-effects-disabled .atmosphere,
body.background-effects-disabled .launch-page::before,
body.background-effects-disabled .servers-section::before { display: none; }
body.blur-effects-disabled .music-trigger,
body.blur-effects-disabled .music-panel,
body.blur-effects-disabled .timer-is-docked .countdown,
body.blur-effects-disabled .settings-trigger,
body.blur-effects-disabled .settings-panel,
body.animations-disabled .side-character img,
body.animations-disabled .server-npc { transition: none; }
body.animations-disabled .side-character:hover img,
body.animations-disabled .side-character:focus-visible img,
body.animations-disabled .server-card:hover .server-npc { transform: none; }
body.animations-disabled .server-card,
body.animations-disabled .server-label,
body.animations-disabled .server-label h3,
body.animations-disabled .settings-panel,
body.animations-disabled .settings-trigger,
body.animations-disabled .settings-option,
body.animations-disabled .music-panel,
body.animations-disabled .music-trigger,
body.animations-disabled .music-option,
body.animations-disabled .pre-registration-number.is-counting,
body.animations-disabled .milestone-progress__fill::after { animation: none; transition: none; }

body.performance-mode .launch-page::before,
body.performance-mode .servers-section::before,
body.performance-mode .atmosphere,
body.performance-mode .mist-cloud--two,
body.performance-mode .mist-particle,
body.performance-mode .fairy-spark { display: none; }
body.performance-mode .mist-fairy { animation-duration: 54s; }
body.performance-mode .fairy-light { animation: none; box-shadow: 0 0 .8rem rgba(255, 225, 139, .82); }
body.performance-mode .fairy-light::before,
body.performance-mode .fairy-light::after { animation: none; }
body.performance-mode .music-trigger,
body.performance-mode .music-panel,
body.performance-mode .timer-is-docked .countdown,
body.performance-mode .settings-trigger,
body.performance-mode .settings-panel { backdrop-filter: none; }
body.performance-mode .side-character,
body.performance-mode .server-npc { filter: none; }
body.performance-mode .side-character:hover img,
body.performance-mode .side-character:focus-visible img,
body.performance-mode .server-card:hover .server-npc { filter: none; }

@media (max-width: 1024px) {
  html { scroll-snap-type: none; }
  .viewport-page { touch-action: pan-x pinch-zoom; }
  .site-header { transition: opacity .22s ease, visibility .22s ease; }
  body:not([data-active-page="0"]) .site-header { opacity: 0; pointer-events: none; visibility: hidden; }
}

@keyframes mist-wander-one {
  from { transform: translate3d(-4%, -3%, 0) scale(.92); }
  to { transform: translate3d(98%, 18%, 0) scale(1.12); }
}

@keyframes mist-wander-two {
  from { transform: translate3d(12%, 8%, 0) scale(.95); }
  to { transform: translate3d(-98%, -22%, 0) scale(1.1); }
}

@keyframes mist-wander-three {
  from { transform: translate3d(-24%, 6%, 0) scale(.92); }
  to { transform: translate3d(68%, -36%, 0) scale(1.13); }
}

@keyframes mist-particle-drift {
  from { transform: translate3d(-1rem, 2rem, 0) scale(.5); opacity: 0; }
  18% { opacity: .85; }
  76% { opacity: .5; }
  to { transform: translate3d(4rem, -8rem, 0) scale(1.3); opacity: 0; }
}

@keyframes fairy-roam {
  0% { transform: translate3d(6vw, 72vh, 0) scale(.8); }
  20% { transform: translate3d(30vw, 35vh, 0) scale(1.05); }
  48% { transform: translate3d(72vw, 18vh, 0) scale(.9); }
  72% { transform: translate3d(86vw, 64vh, 0) scale(1.12); }
  100% { transform: translate3d(48vw, 82vh, 0) scale(.86); }
}

@keyframes fairy-pulse {
  from { opacity: .7; filter: brightness(.95); transform: translate(-50%, -50%) scale(.82); }
  to { opacity: 1; filter: brightness(1.3); transform: translate(-50%, -50%) scale(1.14); }
}

@keyframes fairy-wing-left {
  from { transform: rotate(-26deg) scaleY(.72); }
  to { transform: rotate(20deg) scaleY(1.06); }
}

@keyframes fairy-wing-right {
  from { transform: scaleX(-1) rotate(-26deg) scaleY(.72); }
  to { transform: scaleX(-1) rotate(20deg) scaleY(1.06); }
}

@keyframes fairy-spark-drift {
  from { transform: translate3d(-.2rem, -.15rem, 0) scale(.45); opacity: 0; }
  18% { opacity: .95; }
  to { transform: translate3d(-3.2rem, 2.6rem, 0) scale(1.25); opacity: 0; }
}

.custom-cursor { display: none; }

@media (hover: hover) and (pointer: fine) {
  .custom-cursor {
    --cursor-x: 0px;
    --cursor-y: 0px;
    --cursor-offset-x: 0px;
    --cursor-offset-y: 0px;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    display: block;
    opacity: 0;
    pointer-events: none;
    user-select: none;
    transform: translate3d(
      calc(var(--cursor-x) + var(--cursor-offset-x)),
      calc(var(--cursor-y) + var(--cursor-offset-y)),
      0
    );
    will-change: transform;
  }

  .custom-cursor.is-visible { opacity: 1; }
  .custom-cursor.is-normal { --cursor-offset-x: 0px; --cursor-offset-y: 0px; }
  .custom-cursor.is-hover-normal,
  .custom-cursor.is-hover-pressed { --cursor-offset-x: -1px; --cursor-offset-y: -1px; }

  html.custom-cursor-active,
  html.custom-cursor-active * { cursor: none !important; }
}

@media (max-width: 760px) {
  .viewport-page {
    width: var(--mobile-viewport-width, 100vw);
    height: var(--mobile-viewport-height, 100svh);
    min-height: var(--mobile-viewport-height, 100svh);
    overflow-x: hidden;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .site-background {
    background-color: #071727;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .launch-page {
    display: block;
    height: var(--mobile-viewport-height, 100svh);
    min-height: var(--mobile-viewport-height, 100svh);
    padding: 0;
  }

  .site-header {
    position: fixed;
    z-index: 7;
    top: calc(var(--mobile-viewport-top, 0px) + .65rem + env(safe-area-inset-top));
    right: auto;
    left: calc(var(--mobile-viewport-left, 0px) + .65rem);
    width: calc(var(--mobile-viewport-width, 100vw) - 1.3rem);
    height: 9.75rem;
  }
  .brand { position: absolute; top: 0; left: 0; }
  .brand > span:last-child { display: none; }
  .social-links { position: absolute; top: 0; right: 0; left: auto; flex-direction: column; gap: .45rem; }
  .social-links a { width: 2.05rem; font-size: 1rem; }
  .side-character { bottom: calc(max(3.75rem, 6.5svh) - 12px); width: var(--mobile-character-width, min(15rem, 45vw)); opacity: 1; }
  .side-character--left { left: var(--mobile-viewport-left, 0px); }
  .side-character--right { right: auto; left: calc(var(--mobile-viewport-right, 100vw) - var(--mobile-character-width, min(15rem, 45vw))); }
  .music-menu {
    top: calc(var(--mobile-viewport-top, 0px) + var(--mobile-viewport-height, 100svh) - 3.75rem - env(safe-area-inset-bottom));
    bottom: auto;
    left: calc(var(--mobile-viewport-left, 0px) + .65rem);
  }
  .settings-menu {
    top: calc(var(--mobile-viewport-top, 0px) + var(--mobile-viewport-height, 100svh) - 3.75rem - env(safe-area-inset-bottom));
    right: auto;
    bottom: auto;
    left: calc(var(--mobile-viewport-right, 100vw) - 3.3rem);
  }
  .music-panel { width: min(14rem, calc(var(--mobile-viewport-width, 100vw) - 1.3rem)); }
  #music-volume { width: 4.4rem; }
  .timer-is-docked .countdown { top: calc(var(--mobile-viewport-top, 0px) + .35rem + env(safe-area-inset-top)); left: var(--mobile-docked-timer-left, .75rem); width: var(--mobile-docked-timer-width, calc(100vw - 1.5rem)); gap: .1rem; padding: .25rem .3rem; }
  .timer-is-docked .number { font-size: clamp(1.05rem, 5.2vw, 1.4rem); }
  .timer-is-docked .label { font-size: .35rem; letter-spacing: .06em; }
  .timer-is-docked .divider { display: none; }
  .hero {
    display: grid;
    position: absolute;
    top: var(--mobile-viewport-top, 0px);
    left: var(--mobile-viewport-left, 0px);
    width: var(--mobile-viewport-width, 100vw);
    height: var(--mobile-viewport-height, 100svh);
    min-height: 0;
    margin: 0;
    padding: clamp(5.75rem, 13dvh, 8rem) 1.1rem clamp(6.5rem, 14dvh, 8.5rem);
    place-items: center;
    align-content: center;
    text-align: center;
    transform: none;
  }
  .pre-registration-controls { top: calc(var(--mobile-viewport-top, 0px) + .55rem + env(safe-area-inset-top)); right: auto; left: var(--mobile-viewport-left, 0px); width: var(--mobile-viewport-width, 100vw); transform: none; }
  .pre-registration-card { min-width: 8.25rem; padding: .52rem .78rem; }
  .pre-registration-number { font-size: 1.8rem; }
  .pre-registration-label { font-size: .58rem; letter-spacing: .08em; }
  .timer-is-docked .pre-registration-controls {
    top: calc(var(--mobile-viewport-top, 0px) + 3.75rem + env(safe-area-inset-top));
    right: auto;
    left: var(--mobile-viewport-left, 0px);
    display: flex;
    width: var(--mobile-viewport-width, 100vw);
    align-items: stretch;
    justify-content: center;
    gap: .35rem;
  }
  .timer-is-docked .pre-registration-card {
    min-width: 5.15rem;
    padding: .28rem .48rem;
    border-radius: .45rem;
  }
  .timer-is-docked .pre-registration-number { font-size: 1.05rem; line-height: .95; }
  .timer-is-docked .pre-registration-label { font-size: .31rem; letter-spacing: .045em; }
  .timer-is-docked .pre-register-link {
    min-width: 6.15rem;
    padding: .28rem .48rem;
    border-radius: .45rem;
    font-size: .43rem;
    letter-spacing: .05em;
  }
  .pre-register-link { min-width: 10.75rem; padding: .62rem .95rem; font-size: .63rem; }
  .milestones-section {
    height: var(--mobile-viewport-height, 100svh);
    min-height: var(--mobile-viewport-height, 100svh);
    overflow: hidden;
    padding: calc(7rem + env(safe-area-inset-top)) 1.1rem calc(4.5rem + env(safe-area-inset-bottom));
  }
  .milestones-panel {
    display: grid;
    width: min(calc(var(--mobile-viewport-width, 100vw) - 2.2rem), 31rem);
    justify-items: center;
    align-content: center;
    overflow: visible;
    transform: translateY(-1rem);
  }
  .milestone-dialog__content { width: 100%; min-height: 0; padding: .85rem .25rem; }
  .milestone-dialog__character {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(20rem, calc(var(--mobile-viewport-width, 100vw) - 2.4rem));
    max-height: 30svh;
    margin: .35rem auto 0;
    object-position: center top;
    opacity: .88;
  }
  .milestones-panel h2 { font-size: clamp(1.3rem, 6.8vw, 1.8rem); }
  .milestone-dialog__intro { margin: .6rem auto .8rem; font-size: .78rem; line-height: 1.45; }
  .milestone-progress { gap: .35rem; margin-bottom: .6rem; }
  .milestone-progress__heading { --milestone-value-size: .9rem; font-size: .5rem; }
  .milestone-progress__track { height: .72rem; }
  .milestone-test-controls { gap: .35rem; margin-bottom: .85rem; }
  .milestone-test-controls button { padding: .3rem .46rem; font-size: .48rem; }
  .milestone-list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .24rem; }
  .milestone-list li { grid-template-columns: none; gap: .18rem; padding: .72rem .1rem .4rem; border-radius: .4rem; }
  .milestone-icon { top: -.36rem; width: .72rem; }
  .milestone-list strong { font-size: .88rem; }
  .milestone-list span { font-size: .43rem; line-height: 1.2; }
  .milestone-list em { grid-column: auto; font-size: .36rem; letter-spacing: .03em; }
  #main-content .eyebrow { margin-bottom: .8rem; }
  h1 { font-size: clamp(1.95rem, 9vw, 2.65rem); letter-spacing: .07em; text-indent: 0; }
  .launch-date { margin: .7rem 0 1.5rem; }
  .countdown { gap: clamp(.32rem, 2.2vw, .62rem); }
  .countdown .divider { display: block; flex: 0 0 1px; height: clamp(1.8rem, 10vw, 2.8rem); background: linear-gradient(transparent, rgba(216, 232, 246, .8), transparent); }
  .countdown > .time-unit { min-width: 0; flex: 1 1 0; transform: translateY(.2rem); }
  .timer-is-docked .time-unit { transform: none; }
  .number { font-size: clamp(1.95rem, 9.5vw, 3rem); }
  .intro { margin: clamp(1.35rem, 5vw, 2rem) auto .7rem; font-size: .84rem; line-height: 1.55; }
  .site-footer {
    top: calc(var(--mobile-viewport-top, 0px) + var(--mobile-viewport-height, 100svh) - 1.55rem - env(safe-area-inset-bottom));
    bottom: auto;
    left: var(--mobile-viewport-center-x, 50vw);
    margin: 0;
    text-align: center;
  }
  .page-navigation:not(.page-navigation--previous) {
    top: calc(var(--mobile-viewport-top, 0px) + var(--mobile-viewport-height, 100svh) - 5.25rem - env(safe-area-inset-bottom));
    bottom: auto;
    left: var(--mobile-viewport-center-x, 50vw);
  }
  .page-navigation--previous { top: calc(var(--mobile-viewport-top, 0px) + .85rem + env(safe-area-inset-top)); left: var(--mobile-viewport-center-x, 50vw); }
  .servers-section { height: var(--mobile-viewport-height, 100svh); min-height: var(--mobile-viewport-height, 100svh); overflow: hidden; padding: 5rem 1.1rem 5.5rem; }
  .timer-is-docked .servers-section { padding-top: calc(8.25rem + env(safe-area-inset-top)); }
  .servers-intro h2 { font-size: clamp(1.5rem, 8vw, 2rem); }
  .servers-intro > p:last-child { margin-top: .55rem; font-size: .74rem; line-height: 1.45; }
  .server-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .42rem; margin-top: 1.25rem; }
  .server-card { min-height: clamp(10.75rem, 43vw, 14rem); padding: .55rem; border-width: 1px; }
  .server-label { bottom: .35rem; max-width: 100%; }
  .server-label h3 { font-size: clamp(.85rem, 5.6vw, 1.25rem); letter-spacing: .03em; }
  .server-card:hover .server-label { left: .4rem; }
  .server-card--chaos .server-npc { transform: scale(1.2); }
  .server-card--chaos:hover .server-npc { transform: scale(1.3) translateY(-.45rem); }
}

@media (max-width: 380px) {
  .launch-page { padding-inline: 0; }
  .hero { padding-inline: .8rem; }
  .social-links { gap: .35rem; }
  .social-links a { width: 1.8rem; font-size: .86rem; }
  .eyebrow { font-size: .56rem; letter-spacing: .18em; }
  .pre-registration-number { font-size: 1.55rem; }
  .pre-registration-label { font-size: .48rem; letter-spacing: .06em; }
  h1 { font-size: clamp(1.72rem, 10.3vw, 2.15rem); letter-spacing: .08em; }
  .launch-date { margin: .8rem 0 1.8rem; font-size: .64rem; letter-spacing: .1em; }
  .label { font-size: .47rem; letter-spacing: .08em; }
  .pre-registration-card { min-width: 7.25rem; }
  .pre-register-link { min-width: 9.25rem; font-size: .55rem; }
  .side-character { bottom: calc(2.2rem - 12px); width: min(11.5rem, var(--mobile-character-width, 42vw)); opacity: 1; }
  .side-character--left { left: var(--mobile-viewport-left, 0px); }
  .side-character--right { right: auto; left: calc(var(--mobile-viewport-right, 100vw) - min(11.5rem, var(--mobile-character-width, 42vw))); }
  .music-trigger { width: 2.25rem; }
  #music-volume { width: 3.5rem; }
  .site-footer { font-size: .58rem; }
  .timer-is-docked .number { font-size: clamp(1.05rem, 5.5vw, 1.35rem); }
  .timer-is-docked .countdown { right: auto; gap: .05rem; padding-inline: .28rem; }
  .timer-is-docked .label { font-size: .32rem; }
  .servers-section { padding-inline: .8rem; }
  .server-card { min-height: 9.65rem; padding: .35rem; }
  .server-card:hover .server-label { left: .3rem; }
  .server-label h3 { font-size: .82rem; }
}

@media (max-height: 540px) and (orientation: landscape) {
  .launch-page { padding: 1rem 1.4rem calc(4.5rem + env(safe-area-inset-bottom)); }
  .hero { margin: 0 auto; padding: 1.1rem 0; }
  .eyebrow { margin-bottom: .65rem; }
  h1 { font-size: clamp(1.65rem, 5.2vw, 2.7rem); }
  .launch-date { margin: .6rem 0 1.1rem; }
  .number { font-size: clamp(2.1rem, 7.2vw, 3.6rem); }
  .intro { margin: 1.35rem auto .5rem; line-height: 1.5; }
  .side-character { bottom: 2rem; width: min(12rem, 28vw); opacity: .9; }
  .site-footer { margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .ambient-mist, .ambient-mist * { animation: none !important; }
}