/* PurrBawlz · immersive landing */
@font-face { font-family: "Lilita One"; src: url("fonts/lilita-one-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/figtree-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/figtree-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --night: #171543; --night-2: #221d5c; --night-3: #2e2873;
  --blue: #2c58c7; --blue-dark: #1b3a8c;
  --red: #c43a2f; --red-dark: #8f2219;
  --gold: #e2ac45; --gold-dark: #a8761f;
  --cream: #f4e4c3; --cream-2: #e2cc9c;
  --ink: #2a2350; --text: #ece6ff; --quiet: #b9b1dc;
  --display: "Lilita One", "Arial Rounded MT Bold", system-ui, sans-serif;
  --body: "Figtree", system-ui, -apple-system, sans-serif;
  --holo: conic-gradient(from 200deg, #ff8fd8, #ffd36b, #8dffb5, #7fd8ff, #b59bff, #ff8fd8);
  --tint: 23 21 67;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; overflow-x: clip; background: var(--night); color: var(--text); font: 400 18px/1.55 var(--body); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.02; margin: 0; letter-spacing: 0.01em; }
h2 { font-size: clamp(40px, 6vw, 76px); color: var(--cream); }
p { margin: 0; }
.wrap { width: min(1160px, 100% - 48px); margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lead { color: var(--quiet); max-width: 48ch; margin-top: 16px; font-size: 19px; }

/* Twinkling stars behind everything */
.starfield { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
main, .foot { position: relative; z-index: 1; }

/* ---------- Keycap buttons: the painted in-game keys, 9-sliced ---------- */
.key {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 400 21px/1 var(--display); letter-spacing: 0.02em; text-decoration: none; color: #fff;
  min-height: 74px; padding: 6px 18px 4px; cursor: pointer; background: none;
  border-style: solid; border-width: 15px 22px 30px;
  border-image: url("img/ui/key-blue.webp") 34 50 66 50 fill / 15px 22px 30px stretch;
  text-shadow: 0 2px 0 rgb(10 20 70 / 0.55), 0 0 1px rgb(10 20 70 / 0.8);
  filter: drop-shadow(0 12px 14px rgb(6 3 30 / 0.45));
  transition: transform 0.08s ease, filter 0.08s ease;
}
.key:active { transform: translateY(4px) scale(0.985); filter: drop-shadow(0 4px 6px rgb(6 3 30 / 0.45)) brightness(0.96); }
.key.red { border-image-source: url("img/ui/key-red.webp"); text-shadow: 0 2px 0 rgb(90 15 10 / 0.6), 0 0 1px rgb(90 15 10 / 0.8); }
.key.cream { border-image-source: url("img/ui/key-cream.webp"); color: var(--ink); text-shadow: none; }
.key.soon { cursor: default; }
.key.soon:active { transform: none; filter: drop-shadow(0 12px 14px rgb(6 3 30 / 0.45)); }

/* Round painted buttons (sound, socials) */
.round {
  width: 54px; height: 56px; display: grid; place-items: center; padding: 0 0 4px; border: 0; cursor: pointer;
  background: url("img/ui/round-cream.webp") center / contain no-repeat; color: var(--ink);
  filter: drop-shadow(0 8px 10px rgb(6 3 30 / 0.45)); transition: transform 0.08s ease;
}
.round:active { transform: translateY(3px) scale(0.96); }
.round.gold { background-image: url("img/ui/round-gold.webp"); }
.round svg { width: 22px; height: 22px; }

.cta-row { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

/* ---------- HUD ---------- */
.hud {
  position: fixed; inset: 0 0 auto; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px clamp(14px, 3vw, 28px); pointer-events: none;
}
.hud > * { pointer-events: auto; }
.hud-logo { width: 116px; opacity: 0; transform: translateY(-8px); transition: opacity 0.4s ease, transform 0.4s ease; }
.hud.scrolled .hud-logo { opacity: 1; transform: none; }
.hud-right { display: flex; gap: 10px; align-items: center; }
.rescue { display: flex; gap: 6px; }
.socket {
  width: 50px; height: 52px; display: grid; place-items: center; padding-bottom: 4px;
  background: url("img/ui/round-cream.webp") center / contain no-repeat;
  filter: drop-shadow(0 6px 8px rgb(6 3 30 / 0.45));
}
.slot { width: 30px; height: 30px; border-radius: 50%; opacity: 0.28; filter: grayscale(1); transition: opacity 0.4s ease, filter 0.4s ease, transform 0.45s cubic-bezier(.3,1.7,.5,1); }
.slot.got { width: 40px; height: 40px; opacity: 1; filter: none; transform: scale(1.06); }
@media (max-width: 560px) {
  .hud-logo { width: 92px; }
  .socket { width: 44px; height: 46px; }
}

/* ---------- HERO ---------- */
.hero { position: relative; }
.hero-stage { position: relative; height: 100svh; overflow: hidden; isolation: isolate; }
.layer { position: absolute; inset: 0; will-change: transform; }
.sky img, .sky-mobile img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transform: scale(1.12); }
.sky-mobile { display: none; }
.rays { /* disco light sweeping from the mirror ball */
  pointer-events: none; mix-blend-mode: screen; opacity: 0.55;
  background: conic-gradient(from 0deg at 82% 8%, transparent 0 8deg, rgb(160 180 255 / 0.25) 10deg 13deg, transparent 15deg 40deg, rgb(255 210 150 / 0.22) 42deg 45deg, transparent 47deg 80deg, rgb(200 170 255 / 0.22) 82deg 86deg, transparent 88deg 360deg);
  animation: sweep 14s ease-in-out infinite alternate;
  transform-origin: 82% 8%;
}
@keyframes sweep { from { transform: rotate(-12deg); } to { transform: rotate(18deg); } }
.hero-stage::after { content: ""; position: absolute; inset: auto 0 0; height: 34%; background: linear-gradient(transparent, var(--night)); z-index: 3; pointer-events: none; }
.hero-copy { display: grid; place-content: center; text-align: center; padding: 0 20px 18vh; z-index: 4; pointer-events: none; }
.hero-copy .cta-row { pointer-events: auto; }
.hero-logo { width: min(600px, 84vw); margin: 0 auto 6px; filter: drop-shadow(0 14px 34px rgb(8 4 40 / 0.65)); }
.tagline { font: 400 clamp(24px, 3.2vw, 40px)/1.1 var(--display); color: var(--cream); text-shadow: 0 2px 16px rgb(8 4 40 / 0.85); }
.sub { margin: 10px auto 30px; color: var(--text); text-shadow: 0 1px 12px rgb(8 4 40 / 0.95); }
.field { z-index: 5; pointer-events: none; }
.nap { z-index: 6; inset: auto 0 -4vh; display: grid; grid-template-columns: repeat(3, 1fr); width: min(1000px, 100%); margin-inline: auto; align-items: end; pointer-events: none; }
.nap img { width: 100%; filter: drop-shadow(0 12px 20px rgb(6 3 30 / 0.6)); }
.nap img:nth-child(2) { transform: translateY(10px) scale(0.92); }
.rocket { position: absolute; z-index: 5; width: 92px; left: -120px; bottom: 30%; pointer-events: none; filter: drop-shadow(0 0 18px rgb(255 190 110 / 0.6)); }
.hint { position: absolute; z-index: 7; right: 28px; bottom: 22px; text-align: center; font-size: 14px; color: var(--quiet); letter-spacing: 0.02em; white-space: nowrap; }
.hint::after { content: ""; display: block; width: 2px; height: 26px; margin: 8px auto 0; background: linear-gradient(var(--gold), transparent); animation: drip 1.8s ease-in-out infinite; }
@keyframes drip { 0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.4; } 50% { transform: scaleY(1); opacity: 1; } }

/* Poppable bubbles */
.bubble {
  position: absolute; width: var(--s, 72px); aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer;
  pointer-events: auto; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.bubble img { width: 100%; height: 100%; filter: drop-shadow(0 8px 14px rgb(6 3 30 / 0.45)); pointer-events: none; }
.bubble:focus-visible { border-radius: 50%; }
.spark { position: absolute; width: 22px; height: 22px; pointer-events: none; z-index: 30; }
.ring { position: absolute; border-radius: 50%; border: 3px solid rgb(255 255 255 / 0.8); pointer-events: none; z-index: 30; }

/* Trapped kittens: real in-game sprite sheets, 5x5 frames */
.trapped {
  position: absolute; z-index: 8; width: clamp(110px, 13vw, 170px); aspect-ratio: 1; border: 0; padding: 0; background: none;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.trapped .sprite, .clear-cats .sprite { display: block; width: 100%; height: 100%; background-size: 500% 500%; background-repeat: no-repeat; filter: drop-shadow(0 10px 18px rgb(6 3 30 / 0.55)); }
.trapped::after { /* little "tap me" halo so it reads as interactive */
  content: ""; position: absolute; inset: -6%; border-radius: 50%; border: 2px dashed rgb(226 172 69 / 0.7);
  animation: halo 6s linear infinite; pointer-events: none;
}
.trapped.freed::after { display: none; }
@keyframes halo { to { transform: rotate(360deg); } }
.k-comet { left: 7%; top: 26%; }


/* ---------- HOW A RESCUE WORKS ---------- */
.play { background: linear-gradient(transparent, rgb(34 29 92 / 0.85) 20%, rgb(34 29 92 / 0.85) 80%, transparent); }
.play-stage { height: 100svh; display: grid; grid-template-columns: 1fr auto; gap: clamp(40px, 7vw, 110px); align-items: center; width: min(1160px, 100% - 48px); margin-inline: auto; }
.steps { list-style: none; counter-reset: s; padding: 0; margin: 40px 0 0; display: grid; gap: 14px; }
.steps li {
  counter-increment: s; display: grid; grid-template-columns: 58px 1fr; column-gap: 18px; padding: 16px 18px; border-radius: 16px;
  opacity: 0.4; transition: opacity 0.35s ease;
}
.steps li::before {
  content: counter(s); grid-row: span 2; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  font: 400 28px/1 var(--display); color: var(--ink);
  background: url("img/ui/round-cream.webp") center / contain no-repeat; padding-bottom: 4px;
}
.steps li.on::before { background-image: url("img/ui/round-gold.webp"); }
.steps li.on { opacity: 1; }
.steps strong { font: 400 26px/1.1 var(--display); color: var(--cream); margin-top: 4px; }
.steps span { color: var(--quiet); }
.phone { width: clamp(240px, 26vw, 340px); border-radius: 40px; padding: 11px; background: #0f0d2e; border: 3px solid var(--gold); box-shadow: 0 40px 70px rgb(6 3 30 / 0.65), 0 0 0 10px rgb(226 172 69 / 0.08); }
.screen { position: relative; aspect-ratio: 640 / 1129; border-radius: 30px; overflow: hidden; }
.screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.screen img:first-child { opacity: 1; }

.phone-wrap { position: relative; }
.cluster .o { position: absolute; filter: drop-shadow(0 22px 26px rgb(6 3 30 / 0.6)); }
.phone-wrap .cluster { position: absolute; inset: -14% -45%; pointer-events: none; aspect-ratio: auto; z-index: 0; }
.phone-wrap .phone { position: relative; z-index: 1; }
.phone-wrap .o1 { width: 34%; left: 64%; top: 52%; }
.phone-wrap .o2 { width: 24%; left: 2%; top: 8%; }
.phone-wrap .o3 { width: 20%; left: 70%; top: 2%; }
.phone-wrap .o4 { width: 22%; left: 6%; top: 66%; bottom: auto; }
.k-nova { left: -38%; top: 34%; z-index: 2; }
.k-pip { right: 8%; left: auto; top: 18%; }
/* ---------- FINAL ---------- */
.final { text-align: center; padding: 16vh 0 12vh; }
.final .icon { width: 140px; border-radius: 32px; margin: 0 auto 28px; border: 3px solid var(--gold); box-shadow: 0 20px 34px rgb(6 3 30 / 0.6); }
.final .lead { margin: 16px auto 32px; }
.socials { display: flex; justify-content: center; gap: 12px; margin-top: 30px; }

.foot { padding: 30px 0 44px; color: var(--quiet); font-size: 15px; border-top: 1px solid rgb(255 255 255 / 0.08); }
.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 26px; }
.foot nav { display: flex; gap: 22px; flex-wrap: wrap; }
.foot a { text-decoration: none; }

/* ---------- LEVEL CLEAR ---------- */
.clear { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgb(10 8 36 / 0.72); backdrop-filter: blur(6px); }
.clear[hidden] { display: none; }
.clear-card { width: min(420px, 100%); min-width: 0; padding: 10px; border-radius: 26px; background: var(--holo); box-shadow: 0 40px 80px rgb(0 0 0 / 0.6); }
.clear-inner { border-radius: 18px; background: radial-gradient(circle at 50% 0%, #3b3393, var(--night) 70%); border: 3px solid var(--gold); padding: 26px 24px 28px; text-align: center; display: grid; gap: 16px; justify-items: center; }
.clear h2.banner { font-size: 40px; color: var(--cream); text-shadow: 0 3px 0 var(--red-dark); width: 100%; max-width: 330px; padding: 22px 30px 26px; background: url("img/ui/banner-red.webp") center / 100% 100% no-repeat; }
.clear p { color: var(--text); }
.stars { display: flex; gap: 8px; align-items: end; }
.stars img { width: 64px; }
.stars img:nth-child(2) { width: 82px; }
.clear-cats { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; max-width: 330px; }
.clear-cats .sprite { width: 100%; height: auto; aspect-ratio: 1; transform: scale(1.45); transform-origin: 50% 70%; }

/* ---------- Small screens ---------- */
@media (max-width: 860px) {
  .sky { display: none; }
  .sky-mobile { display: block; }
  .nap { display: none; }
  .hero-copy { padding-bottom: 26vh; }
  .hint { right: auto; left: 50%; transform: translateX(-50%); }
  .hero-copy::before { content: ""; position: absolute; inset: 10% -10% 30%; z-index: -1; background: radial-gradient(closest-side, rgb(18 14 52 / 0.7), transparent); }
  .k-comet { left: 4%; top: auto; bottom: 13%; width: 104px; }
  .k-nova { right: 2%; top: auto; bottom: 0; width: 104px; }
  .k-pip { left: auto; right: 4%; top: 2%; width: 96px; }
  .phone-wrap .cluster { inset: -6% -38%; }
  .k-nova { left: -44%; top: 52%; width: 92px; }
  .play-stage { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 18px; align-content: center; justify-items: center; padding-top: 88px; }
  .play-copy { text-align: left; width: 100%; }
  .play-copy h2 { font-size: 36px; text-align: center; }
  .steps { margin-top: 14px; gap: 6px; }
  .steps li { grid-template-columns: 40px 1fr; padding: 8px 12px; column-gap: 12px; }
  .steps li::before { width: 40px; height: 40px; font-size: 20px; }
  .steps li:not(.on) span { display: none; }
  .steps strong { font-size: 20px; }
  .steps span { font-size: 15px; }
  .phone { width: min(200px, 48vw); border-radius: 30px; padding: 8px; order: -1; }
  .screen { border-radius: 23px; }
  .ranks-grid, .ob-stage { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- Reduced motion: everything readable, nothing moving ---------- */
@media (prefers-reduced-motion: reduce) {
  .rays, .hint::after, .trapped::after { animation: none; }
  .steps li { opacity: 1; }
  .bigname span:first-child { opacity: 1; }
}
.static .play-stage { height: auto; padding: 100px 0; }
.unused-ghost { background: none; border: 0; color: var(--cream); font: 700 16px/1 var(--body); text-decoration: underline; text-underline-offset: 4px; padding: 10px 14px; cursor: pointer; }