:root {
  --night: #01043c;
  --ink: #0a0326;
  --pink: #ff3fb4;
  --hot: #ff2bd0;
  --lav: #e9d8ff;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--night);
  overscroll-behavior: none;
}

body {
  font-family: 'Kanit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

p, h1 { margin: 0; }

#scene, #snow {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
#scene { z-index: 0; }
#snow { z-index: 3; }

.page {
  position: fixed;
  inset: 0;
  z-index: 2;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  row-gap: 0;
  justify-items: center;
  padding:
    max(env(safe-area-inset-top), clamp(10px, 2.4vh, 26px))
    16px
    max(env(safe-area-inset-bottom), clamp(8px, 1.8vh, 18px));
}

/* ---------- top ---------- */
.top {
  position: relative;
  z-index: 2;
  text-align: center;
}

h1 {
  font: italic 900 clamp(34px, min(7.4vh, 15vw), 76px) / 0.95 'Kanit', sans-serif;
  letter-spacing: 0.015em;
  padding: 0 0.1em;
  color: #fff;
  text-shadow:
    0 0 0.08em rgba(255, 255, 255, 0.7),
    0 0 0.28em var(--hot),
    0 0 0.7em var(--hot),
    0 0 1.5em #a200ff;
}

.script {
  font: 400 clamp(19px, min(3.9vh, 7.4vw), 38px) / 1 'Mr Dafoe', cursive;
  color: #ff7fd3;
  transform: rotate(-3deg);
  margin-top: -0.08em;
  text-shadow: 0 0 0.3em rgba(255, 43, 208, 0.85), 0 2px 0 rgba(10, 3, 38, 0.6);
  white-space: nowrap;
}

/* ---------- logo ---------- */
.hero {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 0;
  container-type: size;
  display: grid;
  grid-template: 100% / 100%;
  place-items: center;
}

#logo {
  /* the logo's outer ring is just sky and sea, so it is allowed to spill
     past the row: the type above and below sits in that ring */
  width: min(114cqw, 126cqh);
  height: min(114cqw, 126cqh);
  position: relative;
  /* invisible square the scene lines its sky and horizon up to */
}

#mark {
  position: absolute;
  left: 50%;
  top: 47%;
  width: 62%;
  height: auto;
  transform: translate(-50%, -50%);
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 0 22px rgba(255, 43, 208, 0.55)) drop-shadow(0 14px 26px rgba(1, 4, 60, 0.55));
  opacity: 0;
  transition: opacity 0.6s ease;
  animation: bob 7s ease-in-out infinite;
}
#mark.on { opacity: 1; }
@keyframes bob {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(-50%, calc(-50% - 1.6%)); }
}

/* ---------- counter ---------- */
.count {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 100%;
}

.kicker {
  font-weight: 600;
  font-size: clamp(12px, min(2.2vh, 3.6vw), 20px);
  letter-spacing: 0.34em;
  margin-right: -0.34em;
  text-transform: uppercase;
  color: var(--lav);
  text-shadow: 0 1px 10px rgba(1, 4, 60, 0.9), 0 0 18px rgba(255, 43, 208, 0.35);
}

.num {
  --digits: 1;
  position: relative;
  isolation: isolate;
  display: inline-block;
  font: italic 900 min(clamp(54px, 15vh, 160px), calc(140vw / var(--digits))) / 0.98 'Kanit', sans-serif;
  letter-spacing: 0.01em;
  padding: 0 0.16em;
  font-variant-numeric: tabular-nums;
}
.num::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  padding: inherit;
  z-index: -1;
  color: var(--ink);
  -webkit-text-stroke: 0.13em var(--ink);
  text-shadow: 0 0 0.14em var(--hot), 0 0 0.42em rgba(255, 43, 208, 0.75), 0 0.05em 0 var(--ink);
}
.num span {
  background: linear-gradient(180deg, #fff 28%, #f7d4ff 66%, #ff9fe2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding: 0 0.08em;
  margin: 0 -0.08em;
}

.eq {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(6px, 1.2vw, 14px);
  margin-top: clamp(8px, 1.8vh, 18px);
}
.eq i {
  align-self: center;
  font-style: normal;
  font-weight: 600;
  font-size: clamp(16px, 2.6vh, 24px);
  color: #ff7fd3;
  text-shadow: 0 0 10px rgba(255, 43, 208, 0.7);
}
.tile {
  min-width: clamp(92px, 13vw, 168px);
  padding: clamp(6px, 1.1vh, 10px) clamp(8px, 1.4vw, 18px);
  border-radius: 14px;
  background: rgba(6, 4, 46, 0.55);
  border: 1px solid rgba(255, 127, 211, 0.3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.15;
}
.tile b {
  font-weight: 600;
  font-size: clamp(16px, min(2.9vh, 5vw), 26px);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.tile span {
  font-size: clamp(9px, min(1.4vh, 2.6vw), 11.5px);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(233, 216, 255, 0.7);
  white-space: nowrap;
}
.tile.hot {
  border-color: rgba(255, 127, 211, 0.85);
  box-shadow: 0 0 22px rgba(255, 43, 208, 0.35), inset 0 0 18px rgba(255, 43, 208, 0.18);
}
.tile.hot b { color: #ffd6f3; }

.goal {
  width: min(100%, 520px);
  margin: clamp(8px, 1.7vh, 16px) auto 0;
}
.goalrow {
  display: flex;
  justify-content: space-between;
  font-size: clamp(10px, min(1.55vh, 3vw), 12.5px);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(233, 216, 255, 0.82);
  text-shadow: 0 1px 8px rgba(1, 4, 60, 0.9);
  margin-bottom: 6px;
}
.track {
  height: 10px;
  border-radius: 999px;
  background: rgba(6, 4, 46, 0.7);
  border: 1px solid rgba(255, 127, 211, 0.35);
  overflow: hidden;
}
.fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #a200ff, #ff2bd0 55%, #ff9a4d);
  box-shadow: 0 0 14px rgba(255, 43, 208, 0.8);
  transition: width 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- bottom ---------- */
.bottom {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 760px;
  text-align: center;
  padding-top: clamp(8px, 2vh, 20px);
}

.bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.mcap {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  height: 42px;
  line-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  background: rgba(6, 4, 46, 0.55);
  border: 1px solid rgba(255, 127, 211, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.mcap .lbl {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(233, 216, 255, 0.7);
}
.mcap .val {
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 20px;
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.04em;
  border: 1px solid rgba(255, 127, 211, 0.35);
  background: rgba(6, 4, 46, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.btn.icon { width: 42px; padding: 0; }
.btn.buy {
  border-color: transparent;
  background: linear-gradient(135deg, #ff2bd0, #ff5a8a 60%, #ff9a4d);
  box-shadow: 0 0 22px rgba(255, 43, 208, 0.45);
  text-shadow: 0 1px 0 rgba(10, 3, 38, 0.35);
}
.btn:hover { transform: translateY(-1px); border-color: rgba(255, 127, 211, 0.8); }
.btn.buy:hover { box-shadow: 0 0 30px rgba(255, 43, 208, 0.7); }
.btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.btn[aria-disabled='true'] { display: none; } /* no link set yet */
.btn[aria-disabled='true']:hover { transform: none; }

.legal {
  margin-top: clamp(6px, 1.3vh, 12px);
  font-size: clamp(9.5px, 1.45vh, 11.5px);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(233, 216, 255, 0.55);
  text-wrap: balance;
}

/* short screens: tighten so nothing ever scrolls */
@media (max-height: 560px) {
  .script { display: none; }
  .eq, .goal { display: none; }
  .mcap, .btn { height: 34px; line-height: 34px; font-size: 13px; }
  .btn.icon { width: 34px; }
  .mcap .val { font-size: 14px; }
}

@media (max-width: 420px) {
  .mcap { padding: 0 14px; gap: 8px; }
  .mcap .lbl { letter-spacing: 0.16em; font-size: 10px; }
  .btn { padding: 0 16px; }
}

@media (prefers-reduced-motion: reduce) {
  #mark { transition: none; animation: none; }
}