/* ── 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 { 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; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.4)); }

.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 0 9px rgba(247, 200, 67, 0.55)); }
.shell-known figcaption { color: var(--gold-hi); }

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

/* ── 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;
}

.bottom .inner { padding-block: clamp(5rem, 16vh, 9rem) 0; }

.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: clamp(4rem, 10vh, 6rem);
  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; }
}