/* ============================================================
   FERALS — pixel forest
   Every visible surface is pixel art: the background is a
   low-res canvas, the type is bitmap, the cursor is a sprite.
   No smooth gradients anywhere.
   ============================================================ */

:root {
  --ink: #3b2d26;
  --ink-deep: #2a1f1a;
  --ink-blue: #26343d;
  --paper: #e9f7ff;
  --cream: #fdf3e3;
  --parchment: #f6ecd2;
  --parchment-2: #ecdfbc;
  --wood: #6e4a2f;
  --wood-d: #54381f;
  --gold: #f2c94c;
  --leaf: #76a843;
  --leaf-d: #4e7a2a;
  --fox: #e07b39;
  --sky-btn: #6aa5c4;
  --berry: #d9806a;

  --font-pixel: 'Press Start 2P', monospace;
  --font-body: 'VT323', monospace;
}

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

html, body { height: 100%; }

body {
  font-family: var(--font-body);
  font-size: 22px;
  color: var(--ink);
  overflow-x: hidden;
  background: #f4dc91; /* flash color while the canvas boots */
}

body.page-home { overflow: hidden; }

::selection { background: var(--gold); color: var(--ink); }

canvas { image-rendering: pixelated; image-rendering: crisp-edges; }

a { color: inherit; text-decoration: none; }

.px { font-family: var(--font-pixel); }

/* ---- the painted world ---- */
.scene { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
#sky { position: absolute; top: 0; left: 0; }

/* ============================================================
   LANDING
   ============================================================ */
.hero {
  position: relative; z-index: 2;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding-top: 13svh;
}

/* logo: hand-mapped letters stamped in pixel ink on a canvas */
.hero-title {
  line-height: 0;
  animation: hop 4s steps(2, end) infinite;
}
#logo { display: block; }
/* stepped animation — moves in whole pixels, never floats smoothly */
@keyframes hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* pixel-ink text: dark ink with a light paper halo */
.hero-links {
  margin-top: 30px;
  display: flex; gap: 18px; justify-content: center; align-items: center; flex-wrap: wrap;
  font-family: var(--font-pixel);
  font-size: clamp(10px, 1.4vw, 13px);
  letter-spacing: 3px;
  color: var(--ink-blue);
  text-shadow: -2px 0 0 var(--paper), 2px 0 0 var(--paper), 0 -2px 0 var(--paper), 0 2px 0 var(--paper);
}
.hero-links a:hover { color: var(--berry); }
.hero-links .dot { color: var(--berry); }

.supply-line {
  margin-top: 22px;
  font-family: var(--font-pixel);
  font-size: 9px; letter-spacing: 3px;
  color: var(--ink-blue);
  text-shadow: -2px 0 0 var(--paper), 2px 0 0 var(--paper), 0 -2px 0 var(--paper), 0 2px 0 var(--paper);
}

/* the big sky-blue pill — impossible to miss */
.apply-cta {
  display: inline-block;
  margin-top: 7svh;
  font-family: var(--font-pixel);
  font-size: clamp(15px, 2.4vw, 25px);
  letter-spacing: 2px;
  color: #ffffff;
  background: #41b7f1;
  padding: clamp(20px, 3vw, 30px) clamp(34px, 6vw, 64px);
  border: 5px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 9px 0 var(--ink), 0 9px 0 4px rgba(42, 31, 26, .25);
  text-shadow: 0 3px 0 rgba(42, 31, 26, .35);
  animation: ctaPulse 2.6s steps(2, end) infinite;
}
.apply-cta:hover {
  color: #fff;
  background: #5ec5f5;
  transform: translateY(-3px);
  box-shadow: 0 12px 0 var(--ink), 0 12px 0 4px rgba(42, 31, 26, .25);
}
.apply-cta:active { transform: translateY(4px); box-shadow: 0 3px 0 var(--ink); }
@keyframes ctaPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }

/* creatures in the clearing */
.creature {
  position: absolute; z-index: 3;
  animation: bob 3.4s steps(2, end) infinite;
}
.creature.c2 { animation-duration: 4.2s; }
.creature.c3 { animation-duration: 2.9s; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* sound UI — Hollows style, all pixel art drawn on canvases:
   speaker badge top right (sfx on/off), cloud player below it
   (◀ restart · ⏯ play/pause · ▶ restart), bobbing note above */
.speaker-btn {
  position: fixed; bottom: 218px; right: 26px; z-index: 50;
  background: transparent; border: none; padding: 0; cursor: inherit;
  line-height: 0;
}
.speaker-btn:hover { transform: translateY(-2px); }
.speaker-btn.off { opacity: .45; filter: grayscale(1); }
.speaker-btn canvas { display: block; }

.cloud-player {
  position: fixed; bottom: 22px; right: 18px; z-index: 50;
  line-height: 0;
}
.cloud-player .note {
  display: block; margin: 0 auto 4px;
  animation: noteBob 2.2s steps(2, end) infinite;
}
.cloud-player .note.off { opacity: .35; filter: grayscale(1); animation: none; }
@keyframes noteBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.cloud-player .hit {
  position: absolute; bottom: 8%; height: 58%; width: 28%;
  background: transparent; border: none; cursor: inherit; padding: 0;
}
.cloud-player .hit.left { left: 4%; }
.cloud-player .hit.mid { left: 34%; }
.cloud-player .hit.right { left: 64%; }
.cloud-player .hit:hover { background: rgba(255,255,255,.12); }

/* clicks pass through page wrappers to the animals on the canvas */
.hero { pointer-events: none; }
.hero a, .hero button { pointer-events: auto; }

@media (max-width: 680px) {
  .cloud-player { transform: scale(.72); transform-origin: top right; }
}

/* COMING SOON — wooden sign that drops from the top */
.toast {
  position: fixed; top: 0; left: 50%; z-index: 60;
  transform: translate(-50%, -130%);
  transition: transform .25s steps(5, end);
  pointer-events: none;
}
.toast.show { transform: translate(-50%, 26px); }
.toast span {
  display: inline-block;
  font-family: var(--font-pixel);
  font-size: clamp(11px, 2vw, 15px);
  letter-spacing: 3px;
  color: var(--cream);
  background: var(--wood);
  border: 4px solid var(--wood-d);
  box-shadow: 0 0 0 3px var(--ink-deep), 0 6px 0 rgba(42,31,26,.4);
  padding: 16px 26px;
  text-shadow: 0 3px 0 var(--wood-d);
}
/* sign post ropes */
.toast::before, .toast::after {
  content: ''; position: absolute; top: -30px; width: 4px; height: 30px;
  background: var(--ink-deep);
}
.toast::before { left: 22%; }
.toast::after { right: 22%; }

/* ============================================================
   PIXEL BUTTONS
   ============================================================ */
.btn {
  display: inline-block;
  font-family: var(--font-pixel);
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  padding: 15px 22px;
  color: var(--cream);
  background: var(--sky-btn);
  border: 3px solid var(--ink);
  box-shadow: 0 5px 0 var(--ink);
  cursor: inherit;
  text-shadow: 0 2px 0 rgba(42,31,26,.4);
  transition: none; /* pixel UIs snap, they don't ease */
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--ink); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.btn.fox   { background: var(--fox); }
.btn.gold  { background: var(--gold); color: var(--ink); text-shadow: none; }
.btn.leaf  { background: var(--leaf); color: var(--ink); text-shadow: none; }
.btn[disabled] { opacity: .5; filter: grayscale(.5); }
.btn.done { background: var(--leaf); color: var(--ink); text-shadow: none; }

/* ============================================================
   WHITELIST QUEST — carved wooden sign in the forest
   ============================================================ */
.wl-wrap {
  position: relative; z-index: 2;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 70px 16px 60px;
}

.home-link {
  position: fixed; top: 16px; left: 20px; z-index: 50;
  font-family: var(--font-pixel); font-size: 12px; letter-spacing: 3px;
  color: var(--ink-blue);
  text-shadow: -2px 0 0 var(--paper), 2px 0 0 var(--paper), 0 -2px 0 var(--paper), 0 2px 0 var(--paper);
}
.home-link:hover { color: var(--berry); }

.wl-wrap { pointer-events: none; }
.wl-card, .wl-foot { pointer-events: auto; }

.wl-card {
  width: min(640px, 94vw);
  background: var(--parchment);
  border: 4px solid var(--wood-d);
  box-shadow:
    0 0 0 4px var(--wood),
    0 0 0 8px var(--wood-d),
    0 14px 0 rgba(42, 31, 26, .4);
  padding: 34px clamp(18px, 4vw, 44px) 40px;
  position: relative;
}
/* quit button — leaves the quest, back to the forest */
.wl-close {
  position: absolute; top: -18px; right: -18px; z-index: 5;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  font-family: var(--font-pixel); font-size: 15px;
  color: var(--cream);
  background: var(--berry);
  border: 3px solid var(--ink);
  box-shadow: 0 4px 0 var(--ink);
}
.wl-close:hover { color: #fff; filter: brightness(1.12); transform: translateY(-1px); }
.wl-close:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }

/* nail heads in the corners of the sign */
.wl-card .nail {
  position: absolute; width: 10px; height: 10px;
  background: var(--ink); box-shadow: inset -2px -2px 0 var(--ink-deep), inset 2px 2px 0 #8a7a64;
}
.wl-card .nail.tl { top: 8px; left: 8px; }
.wl-card .nail.tr { top: 8px; right: 8px; }
.wl-card .nail.bl { bottom: 8px; left: 8px; }
.wl-card .nail.br { bottom: 8px; right: 8px; }

.wl-banner {
  background: var(--wood);
  border: 4px solid var(--wood-d);
  box-shadow: 0 5px 0 rgba(42,31,26,.3);
  padding: 18px 12px;
  text-align: center;
  margin: -6px 4px 18px;
}
.wl-banner h1 {
  font-family: var(--font-pixel);
  font-size: clamp(15px, 3.4vw, 24px);
  letter-spacing: 2px;
  color: var(--cream);
  text-shadow: 0 3px 0 var(--wood-d);
}

.wl-stats {
  text-align: center;
  font-family: var(--font-pixel);
  font-size: 9px; letter-spacing: 2px;
  color: var(--berry);
  margin-bottom: 22px;
}
.wl-stats b { color: var(--ink); font-weight: 400; }

.wl-sub { text-align: center; color: var(--wood); font-size: 23px; margin-bottom: 8px; }

.quest {
  margin-top: 18px;
  background: var(--cream);
  border: 3px solid var(--wood-d);
  box-shadow: 0 4px 0 rgba(42,31,26,.25);
  padding: 16px;
  position: relative;
}
.quest .q-dot {
  position: absolute; top: -8px; left: -8px;
  width: 16px; height: 16px;
  border: 3px solid var(--ink);
  background: var(--parchment-2);
}
.quest.done .q-dot { background: var(--leaf); }
.quest .q-label {
  font-family: var(--font-pixel); font-size: 8px; letter-spacing: 2px;
  color: var(--wood); margin-bottom: 12px;
}
.quest .q-row { display: flex; gap: 10px; align-items: stretch; }
.quest .btn { width: 100%; }
.quest input {
  flex: 1; min-width: 0;
  background: #fffdf6;
  border: 3px solid var(--wood-d);
  color: var(--ink);
  font-family: var(--font-body); font-size: 22px;
  padding: 12px 14px; outline: none;
  cursor: inherit;
}
.quest input:focus { border-color: var(--leaf-d); }
.quest input.bad { border-color: var(--berry); }
.quest .save { width: auto; padding: 12px 18px; }
.q-hint { margin-top: 10px; font-size: 18px; color: #9a8a70; }
.q-hint.err { color: var(--berry); }
.q-hint.ok { color: var(--leaf-d); }

/* locked quests: visible but inert until the previous one clears */
.quest.locked { opacity: .55; }
.quest.locked .q-hint { display: none; }
.q-lock {
  display: none;
  margin-top: 10px;
  font-family: var(--font-pixel); font-size: 8px; letter-spacing: 1px;
  color: var(--berry);
}
.quest.locked .q-lock { display: block; }
.quest input[disabled] { opacity: .6; }

.wl-submit { margin-top: 26px; }
.wl-submit .btn { width: 100%; padding: 18px; font-size: 13px; }

/* success state */
.wl-success { text-align: center; padding: 8px 0 4px; }
.wl-success .got {
  font-family: var(--font-pixel); font-size: 10px; letter-spacing: 3px;
  color: var(--berry);
}
.wl-success .app-num {
  font-family: var(--font-pixel);
  font-size: clamp(38px, 8vw, 60px);
  margin: 24px 0 10px;
  color: var(--ink);
  text-shadow: 0 5px 0 var(--parchment-2), 0 8px 0 rgba(42,31,26,.25);
}
.wl-success .pos-line { color: var(--wood); font-size: 22px; letter-spacing: 1px; }
.wl-success .note { margin: 18px auto 24px; color: var(--wood); font-size: 20px; max-width: 420px; }
.wl-success .share-x { width: 100%; padding: 18px; font-size: 12px; }

.wl-foot {
  margin-top: 26px;
  font-family: var(--font-pixel); font-size: 8px; letter-spacing: 2px;
  color: var(--ink-blue);
  text-shadow: -2px 0 0 var(--paper), 2px 0 0 var(--paper), 0 -2px 0 var(--paper), 0 2px 0 var(--paper);
  text-align: center;
}

/* creatures peeking at the bottom of the quest page */
.wl-side { position: fixed; bottom: -10px; z-index: 1; pointer-events: none; }
.wl-side.left { left: 3vw; }
.wl-side.right { right: 3vw; }

/* ---- responsive ---- */
@media (max-width: 680px) {
  body { font-size: 20px; }
  .wl-side { display: none; }
  .hero { padding-top: 10svh; }
  .hero-links { gap: 12px; }
}