:root {
  --ink: #080514;
  --purple: #21103e;
  --violet: #7b3fb3;
  --lilac: #d9a8ff;
  --teal: #1df0e6;
  --teal-dark: #087d80;
  --cream: #fff4d8;
  --red: #ef443f;
  --panel: rgba(12, 7, 28, .82);
  --line: rgba(72, 255, 239, .28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--cream);
  background: var(--ink);
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background: linear-gradient(rgba(7, 3, 18, .74), rgba(7, 3, 18, .92)), url("assets/scene-4.png") center/cover;
  filter: saturate(.8);
}
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .1;
  background-image: repeating-radial-gradient(circle at 17% 31%, #fff 0 1px, transparent 1px 4px);
  background-size: 9px 9px;
  mix-blend-mode: overlay;
}
.cursor-glow {
  position: fixed;
  width: 24rem;
  height: 24rem;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(29, 240, 230, .14), transparent 65%);
}
a { color: inherit; }
img { display: block; max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
.topbar {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  width: min(1120px, calc(100% - 2rem));
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .65rem .7rem .65rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(8, 5, 20, .78);
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 42px rgba(0,0,0,.38), inset 0 0 30px rgba(29,240,230,.05);
}
.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; font-weight: 900; letter-spacing: .05em; }
.brand img { width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--teal); }
.topbar nav { display: flex; gap: 1.5rem; }
.topbar nav a { text-decoration: none; color: #e6cef8; font-weight: 700; font-size: .9rem; }
.topbar nav a:hover { color: var(--teal); }
.mini-buy { text-decoration: none; padding: .7rem 1rem; border-radius: 999px; background: var(--teal); color: var(--ink); font-weight: 900; font-size: .85rem; }

.hero {
  min-height: 100svh;
  position: relative;
  display: grid;
  align-items: center;
  padding: 8rem max(7vw, 2rem) 5rem;
  background: linear-gradient(90deg, rgba(7,3,18,.97) 0%, rgba(7,3,18,.68) 46%, rgba(7,3,18,.16) 76%), url("assets/banner-1500x500.png") center/cover no-repeat;
  border-bottom: 1px solid var(--line);
}
.hero::after { content:""; position:absolute; inset:auto 0 0; height: 30%; background: linear-gradient(transparent, var(--ink)); pointer-events:none; }
.hero-fog { position:absolute; inset:0; overflow:hidden; }
.hero-fog::before, .hero-fog::after { content:""; position:absolute; width:70vw; height:18rem; border-radius:50%; background:rgba(217,168,255,.12); filter:blur(45px); animation: drift 12s ease-in-out infinite alternate; }
.hero-fog::before { bottom:5%; left:-20%; }
.hero-fog::after { top:15%; right:-30%; animation-delay:-6s; }
.hero-content { position: relative; z-index: 2; width: min(650px, 100%); }
.eyebrow { color: var(--teal); font-weight: 900; letter-spacing: .18em; font-size: .78rem; }
h1, h2, h3 { margin-top: 0; line-height: .92; }
h1 { margin-bottom: 1.1rem; font-size: clamp(4.8rem, 12vw, 10rem); letter-spacing: -.075em; text-shadow: 0 0 28px rgba(29,240,230,.22), 5px 7px 0 rgba(8,5,20,.8); }
h2 { font-size: clamp(2.7rem, 6vw, 5.8rem); letter-spacing: -.06em; }
.hero-copy { max-width: 37rem; color: #e8d9f2; font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.65; }
.hero-actions, .chart-actions { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.8rem; }
.button { display:inline-flex; justify-content:center; align-items:center; min-height:3.2rem; padding:.85rem 1.25rem; border:1px solid var(--line); border-radius:999px; text-decoration:none; font-weight:900; cursor:pointer; transition:.25s ease; font:inherit; }
.button-primary { background:var(--teal); color:var(--ink); box-shadow:0 0 28px rgba(29,240,230,.24); }
.button-ghost { background:rgba(15,8,34,.68); color:var(--cream); }
.button:hover { transform:translateY(-3px); box-shadow:0 12px 30px rgba(29,240,230,.18); }
.scroll-seed { position:absolute; z-index:3; left:50%; bottom:2rem; transform:translateX(-50%); display:flex; align-items:center; gap:.7rem; text-decoration:none; color:#d9c8e6; font-weight:700; }
.scroll-seed span { width:.8rem; height:.8rem; border-radius:50%; background:var(--teal); box-shadow:0 0 20px var(--teal); animation:pulse 1.7s infinite; }

.grove { min-height: 100svh; padding: 8rem 2rem 5rem; position: relative; overflow:hidden; background:radial-gradient(circle at 50% 56%, rgba(34,230,220,.12), transparent 38%); }
.section-heading { text-align:center; width:min(760px,100%); margin:0 auto 3rem; }
.section-heading p:last-child { color:#cbbbd8; font-size:1.05rem; }
.memory-map { position:relative; width:min(900px, 90vw); height:min(680px, 74vw); min-height:600px; margin:auto; }
.map-rings { position:absolute; inset:12%; border:1px solid var(--line); border-radius:50%; box-shadow:0 0 65px rgba(29,240,230,.08), inset 0 0 65px rgba(29,240,230,.06); }
.map-rings::before, .map-rings::after { content:""; position:absolute; border:1px dashed rgba(217,168,255,.22); border-radius:50%; inset:14%; animation:spin 22s linear infinite; }
.map-rings::after { inset:-12%; animation-direction:reverse; animation-duration:31s; }
.map-core { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:9rem; aspect-ratio:1; border-radius:50%; display:grid; place-items:center; background:rgba(8,5,20,.84); border:1px solid var(--teal); box-shadow:0 0 44px rgba(29,240,230,.35); z-index:2; }
.map-core img { width:5rem; height:5rem; border-radius:50%; }
.map-core span { margin-top:-1.2rem; font-weight:900; color:var(--teal); }
.memory-node { position:absolute; width:10.5rem; padding:0; border:0; color:var(--cream); background:transparent; cursor:pointer; z-index:3; }
.memory-node img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:50%; border:3px solid rgba(255,244,216,.82); box-shadow:0 0 0 8px rgba(29,240,230,.08), 0 0 40px rgba(29,240,230,.24); transition:.25s ease; }
.memory-node span { display:inline-block; margin-top:.6rem; padding:.4rem .7rem; border-radius:99px; background:rgba(8,5,20,.82); font-weight:900; }
.memory-node:hover img, .memory-node:focus-visible img { transform:scale(1.08) rotate(-2deg); border-color:var(--teal); }
.node-1 { left:2%; top:8%; }
.node-2 { right:2%; top:5%; }
.node-3 { right:0; bottom:3%; }
.node-4 { left:3%; bottom:0; }
.node-5 { left:50%; top:0; transform:translateX(-50%); }

.lore { min-height:100svh; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr); align-items:center; gap:clamp(2rem,5vw,6rem); padding:7rem max(5vw,2rem); background:linear-gradient(120deg, rgba(7,3,18,.94), rgba(34,16,62,.84)); }
.lore-art { position:relative; }
.lore-art::before { content:""; position:absolute; inset:-1.3rem; border:1px solid var(--line); border-radius:48% 52% 43% 57% / 54% 42% 58% 46%; transform:rotate(-2deg); }
.lore-art img { position:relative; width:100%; border-radius:48% 52% 43% 57% / 54% 42% 58% 46%; box-shadow:0 35px 80px rgba(0,0,0,.5); }
.lore-card { padding:clamp(1rem,3vw,3rem); }
.lore-card p:not(.eyebrow) { color:#dfd1e7; font-size:1.05rem; line-height:1.75; }

.hunt { position:relative; min-height:90svh; display:grid; place-items:center; overflow:hidden; padding:7rem 2rem; background:linear-gradient(rgba(8,5,20,.35), rgba(8,5,20,.88)), url("assets/scene-3.png") center/cover; }
.hunt-copy { position:relative; z-index:3; width:min(560px,100%); text-align:center; padding:2rem; border:1px solid var(--line); border-radius:2rem; background:rgba(8,5,20,.75); backdrop-filter:blur(16px); }
.hunt-copy h2 { margin-bottom:1rem; }
.counter { display:flex; align-items:baseline; justify-content:center; gap:.5rem; margin:1.4rem 0; }
.counter strong { font-size:4rem; color:var(--teal); }
.reset-game { margin:auto; }
.spore-field { position:absolute; inset:0; }
.spore { position:absolute; width:clamp(2.7rem,5vw,4.8rem); aspect-ratio:1; border-radius:50%; border:1px solid rgba(255,255,255,.5); background:radial-gradient(circle at 35% 30%, white 0 7%, var(--teal) 16%, rgba(29,240,230,.24) 44%, transparent 68%); box-shadow:0 0 25px var(--teal); cursor:pointer; animation:float var(--speed) ease-in-out infinite alternate; }
.spore.caught { animation:pop .35s forwards; pointer-events:none; }
.hunt-message { position:absolute; bottom:2.2rem; z-index:4; font-weight:900; color:var(--teal); font-size:1.2rem; }

.rings { padding:8rem max(5vw,2rem); background:#0b0718; }
.ring-track { width:min(1120px,100%); margin:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.ring-track article { position:relative; min-height:250px; padding:2rem; border:1px solid var(--line); border-radius:50% 50% 1.4rem 1.4rem; background:radial-gradient(circle at 50% 0, rgba(29,240,230,.14), transparent 48%), var(--panel); }
.ring-track span { display:block; color:var(--teal); font-size:3.5rem; font-weight:900; opacity:.7; }
.ring-track h3 { margin:1rem 0; font-size:1.45rem; }
.ring-track p { color:#cdbdd8; line-height:1.6; }

.chart-zone { min-height:90svh; display:grid; grid-template-columns:.72fr 1.28fr; gap:clamp(2rem,5vw,5rem); align-items:center; padding:7rem max(5vw,2rem); background:linear-gradient(90deg, rgba(8,5,20,.95), rgba(29,14,53,.82)), url("assets/scene-5.png") center/cover; }
.chart-copy p:not(.eyebrow) { color:#d6c5e0; font-size:1.05rem; }
.portal-frame { position:relative; padding:1.2rem; border:2px solid var(--teal); border-radius:2.6rem; background:#080514; box-shadow:0 0 0 10px rgba(29,240,230,.06), 0 0 80px rgba(29,240,230,.2); overflow:hidden; }
.portal-frame iframe { display:block; width:100%; height:620px; border:0; border-radius:1.7rem; background:#080514; }

footer { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:2.2rem max(5vw,2rem); background:#05030d; border-top:1px solid var(--line); }
footer div { display:flex; gap:.7rem; align-items:center; }
footer span { color:var(--teal); }
footer p { color:#9e8dac; }
footer a { color:var(--teal); font-weight:900; }

.memory-dialog { width:min(1000px, calc(100% - 2rem)); max-height:90svh; padding:0; border:1px solid var(--line); border-radius:2rem; color:var(--cream); background:#0b0718; overflow:hidden; box-shadow:0 30px 100px #000; }
.memory-dialog::backdrop { background:rgba(4,2,10,.84); backdrop-filter:blur(10px); }
.memory-dialog[open] { display:grid; grid-template-columns:1.1fr .9fr; }
.dialog-art img { width:100%; height:100%; max-height:86svh; object-fit:cover; }
.dialog-copy { display:flex; flex-direction:column; justify-content:center; padding:clamp(2rem,5vw,4rem); }
.dialog-copy h2 { font-size:clamp(2.5rem,5vw,4.5rem); }
.dialog-copy p:last-child { color:#d4c4de; line-height:1.7; }
.dialog-close { position:absolute; right:1rem; top:1rem; z-index:2; width:2.8rem; height:2.8rem; border-radius:50%; border:1px solid var(--line); background:rgba(8,5,20,.8); color:white; font-size:1.6rem; cursor:pointer; }

@keyframes drift { to { transform:translate(30vw, -3rem) scale(1.2); } }
@keyframes pulse { 50% { transform:scale(1.5); opacity:.45; } }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes float { to { transform:translateY(-28px) scale(1.13); } }
@keyframes pop { to { transform:scale(2.3); opacity:0; } }

@media (max-width: 850px) {
  .topbar nav { display:none; }
  .brand span { font-size:.85rem; }
  .hero { background-position:68% center; }
  .hero-content { padding-top:8rem; }
  .memory-map { display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem; height:auto; min-height:0; width:min(600px,100%); }
  .map-rings, .map-core { display:none; }
  .memory-node { position:static; width:auto; transform:none; }
  .memory-node:last-child { grid-column:1 / -1; width:calc(50% - .7rem); justify-self:center; }
  .lore, .chart-zone { grid-template-columns:1fr; }
  .lore-card { order:-1; }
  .ring-track { grid-template-columns:1fr; }
  .ring-track article { min-height:auto; border-radius:1.5rem; }
  .portal-frame iframe { height:520px; }
  footer { flex-direction:column; text-align:center; }
  .memory-dialog[open] { display:block; overflow:auto; }
  .dialog-art img { max-height:52svh; }
}

@media (max-width: 540px) {
  .topbar { top:.6rem; width:calc(100% - 1rem); }
  .mini-buy { padding:.65rem .8rem; font-size:.72rem; }
  .hero { padding-inline:1.2rem; background-position:72% center; }
  h1 { font-size:clamp(4rem,24vw,6rem); }
  .grove, .rings, .chart-zone { padding-inline:1.2rem; }
  .memory-map { gap:1rem; }
  .memory-node span { font-size:.78rem; }
  .lore { padding-inline:1.2rem; }
  .hunt-copy { padding:1.4rem; }
  .portal-frame { padding:.6rem; border-radius:1.7rem; }
  .portal-frame iframe { height:460px; border-radius:1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
  .cursor-glow { display:none; }
}