/* ── Serenitrove promo site ─────────────────────────────────────
   The page is a cross-section of the game's world: sky at the top,
   then real terrain tiles all the way down to the dark.            */

:root {
  --cream: #f6eed9;
  --gold: #f7c843;
  --gold-hi: #ffd95e;
  --gold-deep: #7a5212;
  --ink-brown: #5a3a08;
  --sky-ink: #1d4a66;
  --card-bg: rgba(24, 14, 10, 0.58);
  --card-edge: rgba(0, 0, 0, 0.35);
  --pixel-font: "Pixelify Sans", "Quicksand", sans-serif;
  --body-font: "Quicksand", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--body-font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--cream);
  background: #0a0911; /* overscroll past the bottom stays dark */
  /* rapid dig-clicking shouldn't highlight text */
  -webkit-user-select: none;
  user-select: none;
}

img {
  image-rendering: pixelated;
  vertical-align: middle;
  -webkit-user-drag: none;
}

/* ── layers (strata) ──────────────────────────────────────────── */

.layer {
  position: relative;
  image-rendering: pixelated;
  border-top: 6px solid rgba(0, 0, 0, 0.28);
  box-shadow: inset 0 10px 0 rgba(0, 0, 0, 0.14);
}

.sky      { border-top: none; box-shadow: none; }
.soil     { background: #6b3a32 url("assets/soil.png") 0 0 / 80px 80px; }
.sand     { background: #d9c873 url("assets/sand.png") 0 0 / 80px 80px; }
.hardsoil { background: #7a4a38 url("assets/hardsoil.png") 0 0 / 80px 80px; }
.stone    { background: #8b8e92 url("assets/stone.png") 0 0 / 80px 80px; }
.ice      { background: #a8dcf5 url("assets/ice.png") 0 0 / 80px 80px; }

.inner {
  width: min(1040px, 92vw);
  margin-inline: auto;
  padding-block: clamp(4rem, 13vh, 7.5rem);
  text-align: center;
}
.inner-narrow { width: min(720px, 92vw); }

.layer-tag {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 5;
  font-family: var(--pixel-font);
  font-size: clamp(0.72rem, 1.9vw, 0.88rem);
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
.sand .layer-tag, .ice .layer-tag {
  color: rgba(43, 32, 8, 0.62);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.diggable { cursor: crosshair; }
.diggable a, .diggable button, .diggable .pocket, .diggable .specimen,
.diggable .shell, .diggable .chip { cursor: auto; }
.diggable a, .diggable .btn, .diggable .chest-img { cursor: pointer; }

/* ── typography ───────────────────────────────────────────────── */

h2 {
  font-family: var(--pixel-font);
  font-weight: 600;
  font-size: clamp(1.7rem, 4.6vw, 2.7rem);
  line-height: 1.2;
  margin: 0 0 0.6em;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
  text-wrap: balance;
}
.sand h2, .ice h2 {
  color: #3c2d0d;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.25);
}
.ice h2 { color: #123a52; }

.lead {
  margin: 0 auto 2.4em;
  max-width: 36em;
  font-weight: 600;
}
.sand .lead { color: #57430f; }
.stone .lead { color: #fcf7e9; } /* warm like the title, a touch lighter */

/* ── HUD ──────────────────────────────────────────────────────── */

.hud-left {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 60;
  display: flex;
  gap: 8px;
}

.hud-chip {
  font-family: var(--pixel-font);
  font-size: clamp(0.74rem, 2vw, 0.92rem);
  letter-spacing: 0.05em;
  color: var(--cream);
  background: rgba(16, 13, 22, 0.88);
  border: 2px solid rgba(246, 238, 217, 0.85);
  border-radius: 8px;
  padding: 6px 10px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
  user-select: none;
}

.hud-music {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 60;
  cursor: pointer;
}
.hud-music[aria-pressed="true"] {
  background: var(--gold);
  color: var(--ink-brown);
  border-color: var(--gold-deep);
}

.surface-btn {
  position: fixed;
  bottom: 14px;
  right: 12px;
  z-index: 60;
  cursor: pointer;
}

button.hud-chip:hover { filter: brightness(1.15); }
button.hud-chip:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }

/* ── hero / sky ───────────────────────────────────────────────── */

.sky {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  /* the game's sky: air4 #71e7ff (top row) fading to air #95edff above the
     grass; the page sky is taller, so it starts slightly bluer up top */
  background: linear-gradient(180deg,
    #4fdcff 0%, #71e7ff 25%, #81eaff 50%, #8cebff 72%, #95edff 100%);
  padding: 4.5rem 5vw 120px;
  text-align: center;
}

.sun {
  position: absolute;
  top: clamp(28px, 7vh, 64px);
  right: clamp(28px, 9vw, 110px);
  width: clamp(56px, 9vw, 92px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #fff3b0 0%, #ffd95e 58%, #f7c843 100%);
  box-shadow: 0 0 48px 14px rgba(255, 217, 94, 0.5);
}

.cloud {
  position: absolute;
  left: -200px;
  width: 96px;
  height: auto;
  opacity: 0.95;
  animation: drift linear infinite;
  will-change: transform;
}
.cloud-1 { top: 14%; animation-duration: 64s; }
.cloud-2 { top: 28%; --cloud-scale: 1.6; animation-duration: 92s; animation-delay: -36s; }
.cloud-3 { top: 7%;  --cloud-scale: 0.9; animation-duration: 75s; animation-delay: -60s; }

@keyframes drift {
  from { transform: translateX(0) scale(var(--cloud-scale, 1)); }
  to   { transform: translateX(calc(100vw + 400px)) scale(var(--cloud-scale, 1)); }
}

.hero { position: relative; z-index: 2; }

.logo { margin: 0; }

.logo img {
  width: min(86vw, 600px);
  height: auto;
  /* the logo PNG is pre-scaled pixel art; smooth downscaling keeps it even */
  image-rendering: auto;
  filter: drop-shadow(0 6px 0 rgba(58, 36, 18, 0.25)) drop-shadow(0 12px 28px rgba(0, 0, 0, 0.16));
}

.tagline {
  font-family: var(--pixel-font);
  font-size: clamp(1.05rem, 3.4vw, 1.6rem);
  color: #244b63;
  margin: 0.4em 0 0;
  letter-spacing: 0.03em;
}

.hero-sub {
  color: #2f5e7d;
  font-weight: 600;
  max-width: 34em;
  margin: 1.4em auto 2em;
}

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

/* ── buttons ──────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  font-family: var(--pixel-font);
  font-size: clamp(0.95rem, 2.4vw, 1.15rem);
  letter-spacing: 0.03em;
  text-decoration: none;
  border-radius: 10px;
}

/* 3D button: a dark base with the gold face resting 5px above it.
   Hover sinks the face partway, click sinks it flush. Only the face
   moves, so the bevel stays seamless at the rounded corners. */
.btn-gold {
  background: var(--gold-deep);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

.btn-face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  flex: 1;
  padding: 0.8em 1.35em;
  border-radius: 10px;
  border: 3px solid var(--gold-deep);
  background: linear-gradient(180deg, var(--gold-hi), #f0b62e);
  color: var(--ink-brown);
  transform: translateY(-5px);
  transition: transform 0.09s ease;
  will-change: transform;
}

@media (hover: hover) {
  .btn-gold:hover .btn-face { transform: translateY(-2px); }
}
.btn-gold:active .btn-face { transform: translateY(0); }

.btn-ghost {
  align-items: center;
  gap: 0.55em;
  padding: 0.8em 1.35em;
  background: rgba(255, 255, 255, 0.24);
  color: var(--sky-ink);
  border: 3px solid rgba(29, 74, 102, 0.45);
  transition: background-color 0.12s ease;
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.38); }

.btn-big { font-size: clamp(1.05rem, 3vw, 1.4rem); }

a:focus-visible, button:focus-visible {
  outline: 3px dashed var(--gold-hi);
  outline-offset: 3px;
}

/* ── surface strip (grass + scoot + hut) ──────────────────────── */

.surface-strip {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: url("assets/topsoil.png") 0 0 / 80px 80px repeat-x;
}

/* structures and Scoot stand on top of the topsoil row, like in the game */
.camp {
  position: absolute;
  bottom: 80px;
  left: clamp(3%, 8vw, 12%);
  display: flex;
  align-items: flex-end;
  gap: clamp(14px, 3vw, 30px);
}

.camp .dojo  { width: 144px; height: auto; }
.camp .stall { width: 96px; height: auto; }

.surface-strip .scoot {
  position: absolute;
  bottom: 80px;
  right: clamp(8%, 14vw, 20%);
  width: 76px;
  height: auto;
  cursor: pointer;
}
.scoot.hop { animation: hop 0.45s ease; }
@keyframes hop {
  0%, 100% { transform: translateY(0); }
  40%      { transform: translateY(-26px) rotate(-4deg); }
}

/* ── pockets (the loop) ───────────────────────────────────────── */

.pockets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: clamp(14px, 2.5vw, 24px);
  text-align: center;
}

.pocket {
  background: var(--card-bg);
  border: 3px solid var(--card-edge);
  border-radius: 14px;
  padding: 1.6rem 1.2rem 1.3rem;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.06), 0 6px 0 rgba(0, 0, 0, 0.22);
  transition: transform 0.18s ease;
}
@media (hover: hover) {
  .pocket:hover { transform: translateY(-4px); }
}

.pocket img {
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.4)) drop-shadow(0 0 6px rgba(0, 0, 0, 0.3));
}

.pocket h3 {
  font-family: var(--pixel-font);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  color: var(--gold-hi);
  margin: 0.7em 0 0.35em;
}

.pocket p { margin: 0; font-size: 0.97rem; line-height: 1.55; }

.dig-hint {
  margin: 2.6em 0 0;
  font-family: var(--pixel-font);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  opacity: 0.55;
}

/* ── specimens (the trove) ────────────────────────────────────── */

.specimens {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(12px, 2vw, 20px);
  max-width: 880px;
  margin-inline: auto;
}

.specimen {
  margin: 0;
  flex: 0 1 124px;
  background: var(--card-bg);
  border: 3px solid var(--card-edge);
  border-radius: 12px;
  padding: 14px 10px 12px;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.22);
  transition: transform 0.18s ease;
}
@media (hover: hover) {
  .specimen:hover { transform: translateY(-4px) rotate(-1deg); }
}

.specimen img {
  width: 72px;
  height: 72px;
  border-radius: 7px;
}

.specimen figcaption {
  font-family: var(--pixel-font);
  font-size: 0.88rem;
  letter-spacing: 0.05em;
  margin-top: 9px;
  color: var(--cream);
}

.specimen-mystery span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border: 3px dashed rgba(246, 238, 217, 0.4);
  border-radius: 7px;
  font-family: var(--pixel-font);
  font-size: 2.3rem;
  color: var(--gold-hi);
}

/* ── mud chest interstitial ───────────────────────────────────── */

.chest-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 4vw, 34px);
  flex-wrap: wrap;
}

.chest-img {
  width: 88px;
  height: 88px;
  /* sprite has ~32px of transparent headroom; nudge up onto the text's centre line */
  position: relative;
  top: -17px;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.4));
}

/* click tease: float up, rock left/right (decaying), settle back down */
.chest-img.jiggle {
  transform-origin: bottom center;
  animation: chest-jiggle 0.7s ease-in-out;
}

/* heavy: snap up fast (ease-out), rattle while held aloft, drop fast (ease-in) */
@keyframes chest-jiggle {
  0%   { transform: translateY(0)     rotate(0deg);   animation-timing-function: ease-out; }
  8%   { transform: translateY(-10px) rotate(0deg); }
  22%  { transform: translateY(-10px) rotate(-10deg); }
  38%  { transform: translateY(-10px) rotate(8deg); }
  54%  { transform: translateY(-10px) rotate(-6deg); }
  70%  { transform: translateY(-10px) rotate(4deg); }
  82%  { transform: translateY(-10px) rotate(-2deg); }
  88%  { transform: translateY(-10px) rotate(0deg);   animation-timing-function: ease-in; }
  100% { transform: translateY(0)     rotate(0deg); }
}

.chest-line p {
  font-size: clamp(1.1rem, 2.8vw, 1.35rem);
  font-weight: 600;
  text-align: left;
  margin: 0;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}
.chest-line em { font-style: normal; opacity: 0.75; font-size: 0.85em; }

/* ── shells (characters) ──────────────────────────────────────── */

.shells {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(10px, 2vw, 18px);
  max-width: 760px;
  margin-inline: auto;
}

.shell {
  margin: 0;
  width: 96px;
  background: var(--card-bg);
  border: 3px solid var(--card-edge);
  border-radius: 12px;
  padding: 12px 6px 10px;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.22);
}

.shell img { width: 56px; height: 56px; }

.shell figcaption {
  font-family: var(--pixel-font);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  margin-top: 8px;
  color: rgba(246, 238, 217, 0.55);
}

.shell-known { border-color: rgba(247, 200, 67, 0.65); }
.shell-known img { filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.4)); }
.shell-known figcaption { color: var(--gold-hi); }

.shell .sil { filter: brightness(0.07) saturate(0.5); opacity: 0.85; }

/* ── Scoot card: cursor-driven 3D tilt + parallax pop (fine pointers) ──
   main.js sets the live vars while the cursor is over the card:
   --rx/--ry card tilt, --cz card lift, --irx/--iry the turtle's extra
   tilt. The turtle leans a touch further than the frame, so the two
   layers split into a parallax. Only the unlocked shell reacts. */
@media (hover: hover) and (pointer: fine) {
  .shell-known {
    position: relative;
    transform-style: preserve-3d;
    transform:
      perspective(600px)
      translateZ(var(--cz, 0px))
      rotateX(var(--rx, 0deg))
      rotateY(var(--ry, 0deg));
    transition: transform 0.45s cubic-bezier(.22, .61, .36, 1),
                box-shadow 0.45s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
  }

  /* turtle + caption ride raised planes; the turtle also out-tilts the
     frame (--irx/--iry) for a layered parallax */
  .shell-known img {
    transition: transform 0.45s cubic-bezier(.22, .61, .36, 1),
                filter 0.45s ease;
  }
  .shell-known figcaption {
    transition: transform 0.45s cubic-bezier(.22, .61, .36, 1);
  }

  /* active — JS adds .tilting while the cursor is over the card */
  /* the resting 0 5px 0 crisp shadow blurs + lifts (one shadow, not two) */
  .shell-known.tilting {
    transition: transform 0.09s linear, box-shadow 0.3s ease;
    box-shadow: 0 14px 18px -2px rgba(0, 0, 0, 0.45);
  }
  .shell-known.tilting img {
    transform:
      translateZ(24px)
      rotateX(var(--irx, 0deg))
      rotateY(var(--iry, 0deg));
    transition: transform 0.09s linear, filter 0.4s ease;
    /* same drop shadow as rest, just blurred + dropped further -> pop */
    filter: drop-shadow(0 11px 14px rgba(0, 0, 0, 0.38));
  }
  .shell-known.tilting figcaption { transform: translateZ(16px); }
}

/* ── ice chips (cozy pitch) ───────────────────────────────────── */

.chips {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.chip {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(10, 34, 48, 0.66);
  border: 3px solid rgba(8, 28, 40, 0.3);
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 600;
  color: #eaf7ff;
  box-shadow: 0 4px 0 rgba(8, 28, 40, 0.25);
}

.chip img { width: 30px; height: 30px; flex: none; }

.chip-note { opacity: 0.65; font-size: 0.86em; font-weight: 500; }

/* ── the deep ─────────────────────────────────────────────────── */

.deep {
  background-color: #0a0911;
  background-image: linear-gradient(180deg,
    #54565e 0%, #2e3037 12%, rgba(22, 20, 28, 0.97) 32%,
    #15101d 62%, #0a0911 100%);
  overflow: hidden;
}

.deep::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 34%; height: 30%;
  background: url("assets/magma.png") 0 0 / 80px 80px;
  opacity: 0.14;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  pointer-events: none;
}

.deep::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0; height: 32%;
  background: url("assets/obsidian.png") 0 0 / 80px 80px;
  opacity: 0.18;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 55%, #000 78%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 55%, #000 78%, transparent);
  pointer-events: none;
}

.deep .inner { position: relative; z-index: 2; padding-block: clamp(7rem, 22vh, 13rem); }

.deep h2 { color: #efeaff; }

.deep-copy {
  color: #cfc8e8;
  line-height: 1.85;
  font-weight: 500;
  margin: 0 auto;
  max-width: 34em;
}

.glint {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #bfe9ff;
  box-shadow: 0 0 7px 1px rgba(191, 233, 255, 0.7);
  animation: twinkle 3.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.08; }
  50%      { opacity: 0.95; }
}

/* ── bottom (the call) ────────────────────────────────────────── */

.bottom {
  border-top: none;
  box-shadow: none;
  background: linear-gradient(180deg, #0a0911 0%, #07141b 55%, #0b2c33 100%);
  text-align: center;
  /* fill the last screen and centre the content in the space ABOVE the
     footer; the footer (after the divider) is pinned to the bottom and
     stays out of the centring math */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.bottom .inner { padding-block: clamp(2.5rem, 7vh, 5rem); margin-block: auto; }

.big-chest {
  width: 116px;
  height: 116px;
  filter: drop-shadow(0 0 16px rgba(247, 200, 67, 0.45));
  animation: chest-glow 2.4s ease-in-out infinite;
}

@keyframes chest-glow {
  0%, 100% { filter: drop-shadow(0 0 12px rgba(247, 200, 67, 0.35)); }
  50%      { filter: drop-shadow(0 0 26px rgba(247, 200, 67, 0.7)); }
}

.bottom h2 { margin-top: 0.8em; }

.fine {
  font-family: var(--pixel-font);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: #9fb8bf;
  margin: 1.6em 0 0;
}

.site-footer {
  margin-top: 0; /* pinned to the section bottom by the inner's auto margins */
  border-top: 2px solid rgba(255, 255, 255, 0.08);
  padding: 1.3rem 5vw 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 0.86rem;
  color: #8aa3ab;
}
.site-footer p { margin: 0; }
.site-footer a { color: var(--gold-hi); }

/* ── dig particles (spawned by JS) ────────────────────────────── */

.debris {
  position: fixed;
  width: 5px;
  height: 5px;
  z-index: 70;
  pointer-events: none;
}

.floaty {
  position: fixed;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--pixel-font);
  font-size: 1rem;
  color: var(--gold-hi);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
.floaty img { width: 22px; height: 22px; }

/* ── scroll reveals ───────────────────────────────────────────── */

html.js .rv {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
html.js .rv.in {
  opacity: 1;
  transform: none;
}

/* ── small screens ────────────────────────────────────────────── */

@media (max-width: 900px) {
  .pockets { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { justify-content: center; }
  .camp { left: 4%; gap: 12px; }
  .camp .dojo { width: 108px; }
  .camp .stall { width: 72px; }
  .surface-strip .scoot { width: 60px; right: 8%; }
  .chest-line p { text-align: center; }
  .shell { width: 84px; }
  .chip { font-size: 0.95rem; }
  .hud-left { gap: 6px; }
  /* keep the fixed SURFACE button clear of the footer link */
  .site-footer { flex-wrap: wrap; padding-bottom: 76px; }
}

@media (max-width: 480px) {
  .pockets { grid-template-columns: 1fr; }
  .specimen { flex-basis: 108px; }
}

/* ── reduced motion ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cloud, .scoot, .big-chest, .glint { animation: none !important; }
  html.js .rv { opacity: 1; transform: none; transition: none; }
  .pocket, .specimen, .btn, .btn-face, .btn-ghost { transition: none; }
  .shell-known, .shell-known img, .shell-known figcaption { transition: none; }
}