* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: #07160d;
}

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 50% 0%, #173d21 0%, #09180e 45%, #050d08 100%);
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: hidden;
}

.site-shell {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: #07160d;
}

.design-stage {
  position: relative;
  width: min(100vw, 1536px);
  aspect-ratio: 1536 / 1024;
  overflow: hidden;
  background: #06150c;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.75);
}

.design-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;
  display: block;
  user-select: none;
  pointer-events: none;
}

.hotspot {
  position: absolute;
  display: block;
  z-index: 10;
  cursor: pointer;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
}

.hotspot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 140ms ease, box-shadow 140ms ease;
  box-shadow:
    inset 0 0 0 2px rgba(255, 226, 95, 0.9),
    0 0 18px rgba(255, 194, 0, 0.7);
}

.hotspot:hover::after,
.hotspot:focus-visible::after {
  opacity: 1;
}

.hotspot:focus-visible {
  outline: none;
}

/* Main menu positions based on the supplied 1536×1024 reference */
.home {
  left: 35.7%;
  top: 3.4%;
  width: 7.4%;
  height: 7.5%;
}

.collection {
  left: 42.7%;
  top: 3.4%;
  width: 11.4%;
  height: 7.5%;
}

.mission {
  left: 53.1%;
  top: 3.4%;
  width: 9.3%;
  height: 7.5%;
}

.roadmap {
  left: 61.8%;
  top: 3.4%;
  width: 8.3%;
  height: 7.5%;
}

/* Social buttons */
.instagram {
  left: 73.6%;
  top: 2.8%;
  width: 5.5%;
  height: 9%;
}

.discord {
  left: 79.5%;
  top: 2.8%;
  width: 5.6%;
  height: 9%;
}

.telegram {
  left: 85.6%;
  top: 2.8%;
  width: 5.6%;
  height: 9%;
}

.x-social {
  left: 92%;
  top: 2.8%;
  width: 5%;
  height: 9%;
}

/* Hero buttons */
.view-collection {
  left: 7.6%;
  top: 38.3%;
  width: 14.2%;
  height: 6.4%;
}

.help-animals {
  left: 22.7%;
  top: 38.4%;
  width: 13.6%;
  height: 6.2%;
}

/* Marketplace buttons */
.opensea {
  left: 10.5%;
  top: 86%;
  width: 17.8%;
  height: 7.5%;
}

.magic-eden {
  left: 29.1%;
  top: 86%;
  width: 18.9%;
  height: 7.5%;
}

/* Anchors */
.anchor {
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.anchor-home {
  top: 0;
}

.anchor-collection {
  top: 48%;
}

.anchor-mission {
  top: 52%;
}

.anchor-roadmap {
  top: 80%;
}

/* Desktop-first faithful rendering */
@media (min-width: 1536px) {
  .design-stage {
    width: 1536px;
    height: 1024px;
  }
}

/* Tablet/mobile: preserve the exact composition rather than rearranging it */
@media (max-width: 900px) {
  .design-stage {
    width: 100vw;
  }

  .hotspot::after {
    box-shadow:
      inset 0 0 0 1px rgba(255, 226, 95, 0.85),
      0 0 8px rgba(255, 194, 0, 0.55);
  }
}


/* =========================================================
   PRODUCTION FINAL — based strictly on uploaded V1 design
   ========================================================= */

/* Exact design stays untouched. */
.design-stage {
  isolation: isolate;
}

/* TOP NAV:
   Keep click area large enough, but make visible hover smaller and centered. */
.top-small-hover::after {
  inset: 22% 10% !important;
  border-radius: 5px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 226, 95, 0.82),
    0 0 8px rgba(255, 194, 0, 0.34) !important;
}

/* SOCIALS:
   Keep click target unchanged, but visibly highlight only inner icon/button area. */
.social-small-hover::after {
  inset: 13% !important;
  border-radius: 5px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 226, 95, 0.82),
    0 0 7px rgba(255, 194, 0, 0.30) !important;
}

/* Do NOT change bottom OpenSea / Magic Eden hover — v1 behavior remains. */

/* ---------------------------------------------------------
   NFT real-image layer
   These images sit exactly inside the collection art windows.
   Clicking each one can later open its own OpenSea URL.
   --------------------------------------------------------- */
.nft-image-link {
  position: absolute;
  z-index: 8;
  display: block;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  border-radius: 2px;
  -webkit-tap-highlight-color: transparent;
}

/* Keep a clean, subtle hover entirely INSIDE the NFT picture area. */
.nft-image-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
  box-shadow: inset 0 0 0 2px rgba(255, 226, 95, 0.78);
}

.nft-image-link:hover::after,
.nft-image-link:focus-visible::after {
  opacity: 1;
}

.nft-image-link:focus-visible {
  outline: none;
}

.nft-image-link img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center bottom;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  user-select: none;
  -webkit-user-drag: none;
}

/* Positions measured against 1536×1024 v1 source */
.nft-image-1406 {
  left: 5.05%;
  top: 57.05%;
  width: 9.25%;
  height: 14.95%;
  background: #b8eec9;
}

.nft-image-1576 {
  left: 17.62%;
  top: 57.05%;
  width: 9.25%;
  height: 14.95%;
  background: #e4e4e1;
}

.nft-image-2059 {
  left: 30.08%;
  top: 57.05%;
  width: 9.25%;
  height: 14.95%;
  background: #f6ad73;
}

.nft-image-2492 {
  left: 42.64%;
  top: 57.05%;
  width: 9.25%;
  height: 14.95%;
  background: #f6b56a;
}

/* Toast for placeholder links before real URLs are added */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 1000;
  transform: translate(-50%, 18px);
  padding: 10px 14px;
  border: 1px solid rgba(255, 217, 90, .55);
  border-radius: 8px;
  background: rgba(6, 21, 12, .94);
  color: #fff4cf;
  font-size: 14px;
  line-height: 1.2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Responsive behavior keeps the whole approved V1 composition intact. */
@media (max-width: 900px) {
  .top-small-hover::after {
    inset: 25% 12% !important;
  }

  .social-small-hover::after {
    inset: 16% !important;
  }

  .nft-image-link::after {
    box-shadow: inset 0 0 0 1px rgba(255, 226, 95, .75);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}


/* =========================================================
   V2 FIX — keep NFT artwork EXACTLY as original V1 design
   Only clickable/hover zones are added above the baked artwork.
   ========================================================= */

/* Disable the visual NFT image overlays from the previous production build. */
.nft-image-link,
.nft-image-link img {
  display: none !important;
}

/* Transparent NFT click zones */
.nft-click {
  position: absolute;
  z-index: 12;
  display: block;
  cursor: pointer;
  text-decoration: none;
  background: transparent;
  border-radius: 4px;
  -webkit-tap-highlight-color: transparent;
}

/* Slightly taller hover area — extended upward as requested.
   The visual glow stays inside each NFT card/image area. */
.nft-click::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 3px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
  box-shadow:
    inset 0 0 0 2px rgba(255, 226, 95, 0.82),
    inset 0 0 10px rgba(255, 194, 0, 0.14);
}

.nft-click:hover::after,
.nft-click:focus-visible::after {
  opacity: 1;
}

.nft-click:focus-visible {
  outline: none;
}

/* Exact NFT card image zones from V1, made a little taller/upward */
.nft-click-1406 {
  left: 4.60%;
  top: 54.85%;
  width: 10.20%;
  height: 18.20%;
}

.nft-click-1576 {
  left: 17.18%;
  top: 54.85%;
  width: 10.20%;
  height: 18.20%;
}

.nft-click-2059 {
  left: 29.63%;
  top: 54.85%;
  width: 10.20%;
  height: 18.20%;
}

.nft-click-2492 {
  left: 42.18%;
  top: 54.85%;
  width: 10.20%;
  height: 18.20%;
}


/* =========================================================
   V3 — FINAL HOVER POSITION TUNING
   Visual design is untouched; only interactive hover zones change.
   ========================================================= */

/* TOP NAV:
   move the hover/click zones a little DOWN and LEFT.
   Keep the glow contained inside the navigation banner. */
.hotspot-home,
.hotspot-collection,
.hotspot-mission,
.hotspot-roadmap {
  transform: translate(-3px, 4px);
}

/* SOCIALS:
   move hover/click zones DOWN and RIGHT and make the frame slightly larger. */
.hotspot-instagram,
.hotspot-discord,
.hotspot-telegram,
.hotspot-x {
  transform: translate(3px, 4px) scale(1.045);
  transform-origin: center;
}

/* NFT COLLECTION:
   Hover/click now covers the WHOLE visible NFT frame,
   not just the artwork/image area. */
.nft-click {
  border-radius: 5px;
}

.nft-click::after {
  inset: 1px;
  border-radius: 5px;
  box-shadow:
    inset 0 0 0 2px rgba(255, 226, 95, 0.90),
    inset 0 0 12px rgba(255, 194, 0, 0.18);
}

/* Full frame bounds — each zone extends from the top frame
   through the rarity panel and lower frame. */
.nft-click-1406 {
  left: 3.78%;
  top: 52.80%;
  width: 12.15%;
  height: 27.10%;
}

.nft-click-1576 {
  left: 16.34%;
  top: 52.80%;
  width: 12.15%;
  height: 27.10%;
}

.nft-click-2059 {
  left: 28.82%;
  top: 52.80%;
  width: 12.15%;
  height: 27.10%;
}

.nft-click-2492 {
  left: 41.34%;
  top: 52.80%;
  width: 12.15%;
  height: 27.10%;
}

/* On NFT hover, emphasize the complete frame area without moving
   or altering the baked NFT artwork itself. */
.nft-click:hover::after,
.nft-click:focus-visible::after {
  opacity: 1;
}


/* =========================================================
   V4 — PIXEL-CALIBRATED HOVER ALIGNMENT
   Calibrated against the original 1536×1024 V1 artwork
   and the user's hover screenshots.
   Bottom OpenSea / Magic Eden remain untouched.
   ========================================================= */

/* IMPORTANT:
   Do not move/scale the actual clickable elements on hover.
   Every visible highlight is an INNER outline only. */
.hotspot,
.nft-click {
  transform: none !important;
  filter: none !important;
}

/* ---------------------------------------------------------
   TOP NAV — exact word/button hit areas
   Slightly lower and left relative to the earlier version.
   --------------------------------------------------------- */
.home {
  left: 36.30% !important;
  top: 5.15% !important;
  width: 5.25% !important;
  height: 5.05% !important;
}

.collection {
  left: 42.55% !important;
  top: 5.15% !important;
  width: 9.35% !important;
  height: 5.05% !important;
}

.mission {
  left: 52.05% !important;
  top: 5.15% !important;
  width: 7.35% !important;
  height: 5.05% !important;
}

.roadmap {
  left: 60.45% !important;
  top: 5.15% !important;
  width: 9.05% !important;
  height: 5.05% !important;
}

/* Only one neat inner hover line around each word area. */
.home::after,
.collection::after,
.mission::after,
.roadmap::after {
  inset: 2px !important;
  border-radius: 5px !important;
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 225, 92, .88),
    inset 0 0 7px rgba(255, 196, 34, .12) !important;
}

/* ---------------------------------------------------------
   SOCIALS — exact outer button frames.
   Shifted down/right compared with the original generic map,
   while keeping the highlight inside each visible frame.
   --------------------------------------------------------- */
.instagram {
  left: 73.10% !important;
  top: 3.18% !important;
  width: 6.15% !important;
  height: 9.55% !important;
}

.discord {
  left: 79.32% !important;
  top: 3.18% !important;
  width: 6.05% !important;
  height: 9.55% !important;
}

.telegram {
  left: 85.45% !important;
  top: 3.18% !important;
  width: 6.05% !important;
  height: 9.55% !important;
}

.x-social {
  left: 91.55% !important;
  top: 3.18% !important;
  width: 5.95% !important;
  height: 9.55% !important;
}

.instagram::after,
.discord::after,
.telegram::after,
.x-social::after {
  inset: 3px !important;
  border-radius: 4px !important;
  box-shadow:
    inset 0 0 0 2px rgba(255, 225, 92, .86),
    inset 0 0 8px rgba(255, 196, 34, .13) !important;
}

/* ---------------------------------------------------------
   HERO BUTTONS — calibrated to the actual outer gold/green frames.
   --------------------------------------------------------- */
.view-collection {
  left: 7.45% !important;
  top: 37.55% !important;
  width: 14.55% !important;
  height: 6.70% !important;
}

.help-animals {
  left: 22.65% !important;
  top: 37.55% !important;
  width: 13.80% !important;
  height: 6.70% !important;
}

.view-collection::after,
.help-animals::after {
  inset: 2px !important;
  border-radius: 6px !important;
  box-shadow:
    inset 0 0 0 2px rgba(255, 226, 95, .90),
    inset 0 0 10px rgba(255, 194, 0, .14) !important;
}

/* ---------------------------------------------------------
   NFT COLLECTION — whole card/frame, not only the picture.
   Bounds end INSIDE the neighboring gap so highlights never overlap.
   --------------------------------------------------------- */
.nft-click {
  border-radius: 4px !important;
}

.nft-click-1406 {
  left: 3.72% !important;
  top: 55.05% !important;
  width: 12.05% !important;
  height: 26.35% !important;
}

.nft-click-1576 {
  left: 16.73% !important;
  top: 55.05% !important;
  width: 11.90% !important;
  height: 26.35% !important;
}

.nft-click-2059 {
  left: 29.60% !important;
  top: 55.05% !important;
  width: 11.85% !important;
  height: 26.35% !important;
}

.nft-click-2492 {
  left: 42.35% !important;
  top: 55.05% !important;
  width: 11.85% !important;
  height: 26.35% !important;
}

/* Full-card hover follows the inside edge of the frame.
   No glow is allowed outside the card. */
.nft-click::after {
  inset: 3px !important;
  border-radius: 4px !important;
  box-shadow:
    inset 0 0 0 2px rgba(255, 225, 92, .90),
    inset 0 0 11px rgba(255, 194, 0, .12) !important;
}

/* ---------------------------------------------------------
   Make all non-bottom hover effects deterministic.
   No scale, no movement, no outer glow.
   --------------------------------------------------------- */
.home:hover,
.collection:hover,
.mission:hover,
.roadmap:hover,
.instagram:hover,
.discord:hover,
.telegram:hover,
.x-social:hover,
.view-collection:hover,
.help-animals:hover,
.nft-click:hover,
.home:focus-visible,
.collection:focus-visible,
.mission:focus-visible,
.roadmap:focus-visible,
.instagram:focus-visible,
.discord:focus-visible,
.telegram:focus-visible,
.x-social:focus-visible,
.view-collection:focus-visible,
.help-animals:focus-visible,
.nft-click:focus-visible {
  transform: none !important;
  filter: none !important;
  outline: none !important;
}

/* Bottom marketplace buttons are intentionally NOT overridden here. */


/* =========================================================
   V5 — FINAL MICRO-ALIGNMENT
   ONLY changed:
   1) Social media hover frames
   2) EPIC NFT card hover
   3) LEGENDARY NFT card hover
   Everything else remains exactly as V4.
   ========================================================= */

/* Social buttons: micro-adjust each visible frame independently */
.instagram {
  left: 73.18% !important;
  top: 3.28% !important;
  width: 5.92% !important;
  height: 9.30% !important;
}
.discord {
  left: 79.38% !important;
  top: 3.28% !important;
  width: 5.86% !important;
  height: 9.30% !important;
}
.telegram {
  left: 85.50% !important;
  top: 3.28% !important;
  width: 5.86% !important;
  height: 9.30% !important;
}
.x-social {
  left: 91.62% !important;
  top: 3.28% !important;
  width: 5.72% !important;
  height: 9.30% !important;
}

.instagram::after,
.discord::after,
.telegram::after,
.x-social::after {
  inset: 3px !important;
  border-radius: 4px !important;
}

/* NFT #2059 EPIC — slight inward/right correction */
.nft-click-2059 {
  left: 29.68% !important;
  top: 55.10% !important;
  width: 11.68% !important;
  height: 26.22% !important;
}

/* NFT #2492 LEGENDARY — slight inward/right correction */
.nft-click-2492 {
  left: 42.43% !important;
  top: 55.10% !important;
  width: 11.66% !important;
  height: 26.22% !important;
}


/* =========================================================
   V6 — ONLY SOCIALS + EPIC + LEGENDARY
   Common/Rare and every other button are untouched.
   ========================================================= */

/* SOCIALS
   Re-aligned to the visible outer gold frames in the original V1 artwork.
   The hover line now follows the actual button frame instead of sitting
   too far inside or drifting between neighboring buttons. */
.instagram {
  left: 73.35% !important;
  top: 3.00% !important;
  width: 6.15% !important;
  height: 9.65% !important;
}

.discord {
  left: 79.55% !important;
  top: 3.00% !important;
  width: 6.15% !important;
  height: 9.65% !important;
}

.telegram {
  left: 85.75% !important;
  top: 3.00% !important;
  width: 6.15% !important;
  height: 9.65% !important;
}

.x-social {
  left: 91.95% !important;
  top: 3.00% !important;
  width: 6.05% !important;
  height: 9.65% !important;
}

.instagram::after,
.discord::after,
.telegram::after,
.x-social::after {
  inset: 2px !important;
  border-radius: 5px !important;
  box-shadow:
    inset 0 0 0 2px rgba(255, 225, 92, .88),
    inset 0 0 8px rgba(255, 196, 34, .12) !important;
}

/* EPIC
   Matched to the same full-frame treatment used by Common/Rare:
   moved left and expanded so the hover follows both frame edges. */
.nft-click-2059 {
  left: 29.30% !important;
  top: 55.05% !important;
  width: 12.05% !important;
  height: 26.35% !important;
}

/* LEGENDARY
   Moved left and expanded to cover the complete card frame,
   matching the Common/Rare proportions. */
.nft-click-2492 {
  left: 41.90% !important;
  top: 55.05% !important;
  width: 12.05% !important;
  height: 26.35% !important;
}


/* =========================================================
   V7 — PROFESSIONAL SCALE HOVER
   No visible hover border.
   Exact approved artwork crop gently scales on hover.
   ========================================================= */

/* Remove all old outline/glow hover visuals. */
.hotspot::after,
.nft-click::after,
.top-small-hover::after,
.social-small-hover::after {
  display: none !important;
  content: none !important;
}

/* Keep clickable hit zones fixed. */
.hotspot,
.nft-click {
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
}

/* Every interactive item gets an exact crop clone from the approved design. */
.hotspot::before,
.nft-click::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 80;
  display: block;
  pointer-events: none;

  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;

  opacity: 0;
  transform: scale(1);
  transform-origin: center center;

  transition:
    transform 150ms cubic-bezier(.2,.8,.2,1),
    opacity 90ms ease,
    filter 150ms ease,
    box-shadow 150ms ease;

  border-radius: inherit;
}

/* Show exact visual clone and gently enlarge it. */
.hotspot:hover::before,
.hotspot:focus-visible::before,
.nft-click:hover::before,
.nft-click:focus-visible::before {
  opacity: 1;
  transform: scale(1.045);
  filter: brightness(1.035);
  box-shadow: 0 7px 18px rgba(0,0,0,.28);
}

/* NFT cards: slightly calmer enlargement because they are large. */
.nft-click:hover::before,
.nft-click:focus-visible::before {
  transform: scale(1.025);
  filter: brightness(1.025);
  box-shadow: 0 8px 20px rgba(0,0,0,.24);
}

/* Social icons can feel a bit more lively. */
.instagram:hover::before,
.discord:hover::before,
.telegram:hover::before,
.x-social:hover::before,
.instagram:focus-visible::before,
.discord:focus-visible::before,
.telegram:focus-visible::before,
.x-social:focus-visible::before {
  transform: scale(1.06);
}

/* Bottom marketplace buttons: polished but still subtle. */
.opensea:hover::before,
.magic-eden:hover::before,
.opensea:focus-visible::before,
.magic-eden:focus-visible::before {
  transform: scale(1.035);
}

/* Exact crop images */
.home::before { background-image: url("assets/hover-home.png"); }
.collection::before { background-image: url("assets/hover-collection.png"); }
.mission::before { background-image: url("assets/hover-mission.png"); }
.roadmap::before { background-image: url("assets/hover-roadmap.png"); }

.instagram::before { background-image: url("assets/hover-instagram.png"); }
.discord::before { background-image: url("assets/hover-discord.png"); }
.telegram::before { background-image: url("assets/hover-telegram.png"); }
.x-social::before { background-image: url("assets/hover-x-social.png"); }

.view-collection::before { background-image: url("assets/hover-view-collection.png"); }
.help-animals::before { background-image: url("assets/hover-help-animals.png"); }

.nft-click-1406::before { background-image: url("assets/hover-nft-click-1406.png"); }
.nft-click-1576::before { background-image: url("assets/hover-nft-click-1576.png"); }
.nft-click-2059::before { background-image: url("assets/hover-nft-click-2059.png"); }
.nft-click-2492::before { background-image: url("assets/hover-nft-click-2492.png"); }

.opensea::before { background-image: url("assets/hover-opensea.png"); }
.magic-eden::before { background-image: url("assets/hover-magic-eden.png"); }

/* Keyboard focus remains visible through the same scale effect. */
.hotspot:focus-visible,
.nft-click:focus-visible {
  outline: none !important;
}

/* Press feedback: slight compression, still using the exact crop. */
.hotspot:active::before,
.nft-click:active::before {
  transform: scale(1.015);
  transition-duration: 60ms;
}

/* Respect reduced-motion accessibility preference. */
@media (prefers-reduced-motion: reduce) {
  .hotspot::before,
  .nft-click::before {
    transition: opacity 1ms linear !important;
    transform: none !important;
  }

  .hotspot:hover::before,
  .hotspot:focus-visible::before,
  .nft-click:hover::before,
  .nft-click:focus-visible::before {
    transform: none !important;
  }
}


/* =========================================================
   V9 — Roadmap extension
   The approved main page above is intentionally untouched.
   ========================================================= */
html {
  scroll-behavior: smooth;
}

.roadmap-extension {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #061d0d;
  overflow: hidden;
}

.roadmap-separator,
.roadmap-section {
  width: 100%;
  margin: 0;
  padding: 0;
  line-height: 0;
}

.roadmap-separator img,
.roadmap-section img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  user-select: none;
  -webkit-user-drag: none;
}

#roadmap {
  scroll-margin-top: 0;
}


/* =========================================================
   V9.1 FIX — main page -> separator -> roadmap VERTICALLY
   ========================================================= */
body {
  display: block !important;
}

main {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
}

.design-stage {
  display: block;
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
}

.roadmap-extension {
  display: block !important;
  position: relative !important;
  clear: both !important;
  width: 100% !important;
  max-width: none !important;
  flex: 0 0 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.roadmap-separator,
.roadmap-section {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.roadmap-separator img,
.roadmap-section img {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
}

/* V9.2 — seamless transition + correct Roadmap target */
.roadmap-extension,
.roadmap-separator,
.roadmap-section {
  line-height: 0 !important;
  background: #061b10 !important;
}
.roadmap-separator {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.roadmap-section {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  scroll-margin-top: 0 !important;
}
.roadmap-separator img,
.roadmap-section img {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  vertical-align: top !important;
}

/* V9.3 — remove any subpixel seam between Journey and Roadmap */
.roadmap-separator { margin-bottom: -1px !important; }
.roadmap-section { margin-top: 0 !important; }

/* V9.4 — Journey/Roadmap are physically joined; no white source pixels remain */
.roadmap-separator { margin-bottom: -2px !important; }
.roadmap-section { margin-top: 0 !important; transform: translateY(-1px); }
.roadmap-extension { overflow: hidden !important; }

/* =========================================================
   V10 — exact crop assembly
   Approved artwork is used as two untouched pixel crops.
   ========================================================= */
.roadmap-separator { margin: 0 !important; }
.roadmap-section { margin: 0 !important; transform: none !important; }
.roadmap-separator img,
.roadmap-section img { display:block !important; width:100% !important; height:auto !important; }

/* V13 — seamless join between the approved home artwork and Journey artwork.
   The separator asset itself has its baked top seam cropped away. */
.design-stage { margin-bottom: 0 !important; }
.roadmap-extension { margin-top: -1px !important; }
.roadmap-separator { margin: 0 !important; overflow: hidden !important; }
.roadmap-separator img { display: block !important; margin: 0 !important; transform: translateY(0) !important; }

/* =========================================================
   FINAL COLLECTION SELECTOR — 4 collection slots
   Keeps the approved outer frames; replaces only card interiors.
   ========================================================= */
.collection-slot {
  position: absolute;
  z-index: 12;
  top: 57.45%;
  width: 9.35%;
  height: 23.55%;
  overflow: hidden;
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform-origin: center;
  transition: transform 150ms ease, filter 150ms ease;
  box-shadow: inset 0 0 0 1px rgba(12, 33, 18, .55);
}
.collection-slot:hover,
.collection-slot:focus-visible {
  transform: scale(1.025);
  filter: brightness(1.05);
  outline: none;
}
.collection-slot-1 { left: 5.00%; background: linear-gradient(#c8f4d3, #93dfae); }
.collection-slot-2 { left: 17.55%; background: radial-gradient(circle at 50% 35%, #253027 0%, #0a0e0b 70%); }
.collection-slot-3 { left: 30.05%; background: radial-gradient(circle at 50% 35%, #2b251f 0%, #0b0c0b 70%); }
.collection-slot-4 { left: 42.58%; background: radial-gradient(circle at 50% 35%, #2b241c 0%, #0a0c0a 70%); }

.collection-slot img {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 96%;
  height: 98%;
  transform: translateX(-50%);
  object-fit: contain;
  object-position: center bottom;
  image-rendering: pixelated;
  user-select: none;
  pointer-events: none;
}

.collection-slot.locked img {
  filter: brightness(0) blur(.45px);
  opacity: .96;
}

.collection-slot.locked::after {
  content: "?";
  position: absolute;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-family: Arial Black, Arial, Helvetica, sans-serif;
  font-size: clamp(26px, 4.3vw, 72px);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 4px 0 #000, 3px 0 0 #000, -3px 0 0 #000, 0 -3px 0 #000;
  pointer-events: none;
}

/* Hide the legacy transparent NFT click zones; new collection slots own clicks. */
.nft-click { display: none !important; }

/* V15 — collection artwork is baked directly into the main design image.
   These elements are click-only hotspots; they no longer draw or cover artwork. */
.collection-slot {
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  transition: none !important;
}
.collection-slot:hover,
.collection-slot:focus-visible {
  transform: none !important;
  filter: none !important;
  outline: none !important;
}
.collection-slot img,
.collection-slot.locked img,
.collection-slot.locked::after { display: none !important; content: none !important; }

/* =========================================================
   FINAL MYSTERY COLLECTION ARTWORK
   The approved 1688×932 image is the actual base design.
   No NFT artwork is visually overlaid by HTML.
   ========================================================= */
.design-stage {
  width: min(100vw, 1688px) !important;
  height: auto !important;
  aspect-ratio: 1688 / 932 !important;
}
.design-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
@media (min-width: 1688px) {
  .design-stage { width: 1688px !important; height: 932px !important; }
}

/* Approved artwork button positions */
.view-collection { left: 7.45% !important; top: 21.4% !important; width: 14.5% !important; height: 8.8% !important; }
.help-animals { left: 22.6% !important; top: 21.4% !important; width: 14.3% !important; height: 8.8% !important; }
.opensea { left: 10.5% !important; top: 80.6% !important; width: 18.2% !important; height: 10.0% !important; }
.magic-eden { left: 29.3% !important; top: 80.6% !important; width: 18.6% !important; height: 10.0% !important; }

/* Collection cards: invisible click areas only; no visual overlays. */
.collection-slot {
  position: absolute;
  z-index: 12;
  display: block;
  cursor: pointer;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 4px;
  -webkit-tap-highlight-color: transparent;
}
.collection-slot::before,
.collection-slot::after { content: none !important; display: none !important; }
.collection-slot-1 { left: 3.7%; top: 43.2%; width: 12.4%; height: 31.8%; }
.collection-slot-2 { left: 16.8%; top: 43.2%; width: 12.4%; height: 31.8%; }
.collection-slot-3 { left: 29.7%; top: 43.2%; width: 12.4%; height: 31.8%; }
.collection-slot-4 { left: 42.6%; top: 43.2%; width: 12.4%; height: 31.8%; }

/* Disable every legacy NFT visual layer/highlight from older builds. */
.nft-image-link, .nft-image-link img, .nft-click, [data-nft-link] { display: none !important; }

.anchor-collection { top: 35% !important; }
.anchor-mission { top: 36% !important; }

/* V18 — exact approved header added above the untouched base design */
.site-shell {
  flex-direction: column;
  align-items: center;
}
.top-header {
  position: relative;
  width: min(100vw, 1688px);
  aspect-ratio: 1536 / 154;
  overflow: hidden;
  flex: 0 0 auto;
  background: #07160d;
}
.header-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
  user-select: none;
  pointer-events: none;
}
.header-hotspot {
  position: absolute;
  z-index: 20;
  display: block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 140ms ease, filter 140ms ease;
  transform-origin: center;
}
.header-hotspot:hover,
.header-hotspot:focus-visible {
  transform: scale(1.045);
  filter: brightness(1.08);
  outline: none;
}
.nav-home { left: 35.0%; top: 20%; width: 7.5%; height: 61%; }
.nav-collection { left: 42.7%; top: 20%; width: 10.4%; height: 61%; }
.nav-mission { left: 53.1%; top: 20%; width: 8.7%; height: 61%; }
.nav-roadmap { left: 61.8%; top: 20%; width: 8.5%; height: 61%; }
.social-instagram { left: 73.6%; top: 13%; width: 5.8%; height: 72%; }
.social-discord { left: 79.5%; top: 13%; width: 5.8%; height: 72%; }
.social-telegram { left: 85.6%; top: 13%; width: 5.8%; height: 72%; }
.social-x { left: 92.0%; top: 13%; width: 5.2%; height: 72%; }

/* =========================================================
   V19 — header divider + visible hover states
   No base artwork/layout changes.
   ========================================================= */

/* A compact pixel-art wooden divider between the header and hero. */
.top-header::after {
  content: "";
  position: absolute;
  z-index: 15;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(5px, .62vw, 10px);
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      #e7a72d 0 16%,
      #8a4c13 16% 34%,
      #4a280d 34% 70%,
      #a86419 70% 86%,
      #2a1709 86% 100%);
  border-top: 1px solid rgba(255, 211, 75, .8);
  border-bottom: 2px solid rgba(15, 8, 2, .95);
  box-shadow: 0 2px 0 rgba(0,0,0,.55);
}

/* Visible hover/focus for Home / Collection / Mission / Roadmap. */
.header-hotspot::after {
  content: "";
  position: absolute;
  inset: 9% 7%;
  border-radius: 5px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease, background 120ms ease, box-shadow 120ms ease;
  background: rgba(255, 194, 40, .06);
  box-shadow:
    inset 0 0 0 2px rgba(255, 222, 92, .92),
    inset 0 0 12px rgba(255, 184, 0, .16),
    0 0 10px rgba(255, 178, 0, .30);
}

.header-hotspot:hover::after,
.header-hotspot:focus-visible::after {
  opacity: 1;
}

/* Social buttons already have decorative frames in the artwork;
   keep the highlight tucked inside those frames. */
.social-instagram::after,
.social-discord::after,
.social-telegram::after,
.social-x::after {
  inset: 8%;
  border-radius: 7px;
}

/* NFT Collection cards: visible hover only; artwork stays untouched. */
.collection-slot::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 2px;
  border-radius: 5px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
  box-shadow:
    inset 0 0 0 3px rgba(255, 221, 77, .94),
    inset 0 0 16px rgba(255, 181, 0, .16),
    0 0 12px rgba(255, 181, 0, .28) !important;
}

.collection-slot:hover::after,
.collection-slot:focus-visible::after {
  opacity: 1;
}

.collection-slot:focus-visible { outline: none; }

/* =========================================================
   V20 — unified gentle SCALE hover
   User-approved artwork stays unchanged. Hover behaves like
   OpenSea/Magic Eden: the exact visual gently enlarges.
   ========================================================= */

/* Remove V19 outline/glow treatment. */
.header-hotspot::after,
.collection-slot::after {
  display: none !important;
  content: none !important;
}

/* Header nav + social: show an exact crop of the existing header and scale it. */
.header-hotspot {
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
}
.header-hotspot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 25;
  display: block;
  pointer-events: none;
  opacity: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  transform: scale(1);
  transform-origin: center;
  transition: transform 150ms cubic-bezier(.2,.8,.2,1), opacity 80ms ease, filter 150ms ease, box-shadow 150ms ease;
}
.header-hotspot:hover::before,
.header-hotspot:focus-visible::before {
  opacity: 1;
  transform: scale(1.025);
  filter: brightness(1.025);
  box-shadow: 0 5px 12px rgba(0,0,0,.20);
}
.social-instagram:hover::before,
.social-discord:hover::before,
.social-telegram:hover::before,
.social-x:hover::before,
.social-instagram:focus-visible::before,
.social-discord:focus-visible::before,
.social-telegram:focus-visible::before,
.social-x:focus-visible::before {
  transform: scale(1.03);
}
.nav-home::before { background-image: url("assets/v20-nav-home.png"); }
.nav-collection::before { background-image: url("assets/v20-nav-collection.png"); }
.nav-mission::before { background-image: url("assets/v20-nav-mission.png"); }
.nav-roadmap::before { background-image: url("assets/v20-nav-roadmap.png"); }
.social-instagram::before { background-image: url("assets/v20-social-instagram.png"); }
.social-discord::before { background-image: url("assets/v20-social-discord.png"); }
.social-telegram::before { background-image: url("assets/v20-social-telegram.png"); }
.social-x::before { background-image: url("assets/v20-social-x.png"); }

/* NFT cards: exact baked card crop gently enlarges, with no border/glow. */
.collection-slot {
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
}
.collection-slot::before {
  content: "" !important;
  position: absolute;
  inset: 0;
  z-index: 30;
  display: block !important;
  pointer-events: none;
  opacity: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  transform: scale(1);
  transform-origin: center;
  transition: transform 150ms cubic-bezier(.2,.8,.2,1), opacity 80ms ease, filter 150ms ease, box-shadow 150ms ease;
}
.collection-slot:hover::before,
.collection-slot:focus-visible::before {
  opacity: 1;
  transform: scale(1.018);
  filter: brightness(1.018);
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
}
.collection-slot-1::before { background-image: url("assets/v20-collection-1.png"); }
.collection-slot-2::before { background-image: url("assets/v20-collection-2.png"); }
.collection-slot-3::before { background-image: url("assets/v20-collection-3.png"); }
.collection-slot-4::before { background-image: url("assets/v20-collection-4.png"); }

/* Existing hero + marketplace button hover: same behavior, slightly calmer. */
.view-collection:hover::before,
.help-animals:hover::before,
.view-collection:focus-visible::before,
.help-animals:focus-visible::before {
  transform: scale(1.025) !important;
  filter: brightness(1.025) !important;
  box-shadow: 0 5px 12px rgba(0,0,0,.20) !important;
}
.opensea:hover::before,
.magic-eden:hover::before,
.opensea:focus-visible::before,
.magic-eden:focus-visible::before {
  transform: scale(1.022) !important;
  filter: brightness(1.02) !important;
  box-shadow: 0 5px 12px rgba(0,0,0,.20) !important;
}

@media (prefers-reduced-motion: reduce) {
  .header-hotspot::before,
  .collection-slot::before { transition: opacity 1ms linear !important; transform: none !important; }
  .header-hotspot:hover::before,
  .header-hotspot:focus-visible::before,
  .collection-slot:hover::before,
  .collection-slot:focus-visible::before { transform: none !important; }
}

/* =========================================================
   FINAL FOOTER — compact fourth section
   Clean dark-green background + supplied AVAnimals logo.
   ========================================================= */
.site-footer {
  width: 100%;
  min-height: 178px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 24px 28px 28px;
  text-align: left;
  color: #f8e8a4;
  background: linear-gradient(180deg, rgba(7,34,22,.96) 0%, rgba(3,20,13,.98) 100%);
  border-top: 8px solid #38260f;
  box-shadow:
    inset 0 3px 0 #a76a16,
    inset 0 7px 0 #171108,
    inset 0 10px 0 rgba(215,159,45,.45);
}
.footer-mark {
  width: 112px;
  height: 112px;
  object-fit: contain;
  flex: 0 0 auto;
}
.footer-copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: Arial, Helvetica, sans-serif;
  text-shadow: 2px 2px 0 #000;
}
.footer-copy strong {
  font-size: 20px;
  letter-spacing: .5px;
  color: #ffd55d;
}
.footer-copy span {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.6px;
}
.footer-copy small {
  margin-top: 5px;
  font-size: 12px;
  color: #d8d2b7;
}
@media (max-width: 700px) {
  .site-footer {
    min-height: 150px;
    gap: 14px;
    padding: 20px 16px 22px;
  }
  .footer-mark { width: 82px; height: 82px; }
  .footer-copy strong { font-size: 17px; }
  .footer-copy span { font-size: 10px; letter-spacing: 1px; }
  .footer-copy small { font-size: 10px; }
}


/* FINAL V28 — approved stone divider between Roadmap and footer. */
.footer-stone-divider {
  width: 100%;
  line-height: 0;
  overflow: hidden;
  background: #05281b;
}
.footer-stone-divider img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  user-select: none;
  pointer-events: none;
}
/* The supplied logo is kept as the same artwork, with only its outer black square removed. */
.footer-mark {
  background: transparent !important;
}

/* FINAL V29 — seamless Roadmap -> stone divider -> footer join. */
.roadmap-section {
  margin-bottom: 0 !important;
  line-height: 0 !important;
}
.roadmap-section img {
  margin-bottom: 0 !important;
  vertical-align: bottom !important;
}
.footer-stone-divider {
  position: relative;
  margin-top: -1px !important;
  margin-bottom: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  line-height: 0 !important;
  background: #062317 !important;
  overflow: hidden !important;
}
.footer-stone-divider img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  vertical-align: bottom !important;
}
.site-footer {
  margin: 0 !important;
  border-top: 0 !important;
  box-shadow: none !important;
  background: linear-gradient(180deg, #052317 0%, #03140d 100%) !important;
}


/* FINAL V30 — wooden beam below the stone wall + slightly lower footer content. */
.footer-wood-beam {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 18px;
  margin: -1px 0 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  background:
    linear-gradient(180deg,
      #241508 0%,
      #6e4516 11%,
      #c48a2a 22%,
      #8a5719 35%,
      #4c2d0d 51%,
      #9b641c 66%,
      #d19a31 77%,
      #604015 88%,
      #211507 100%);
  border-top: 2px solid #171006;
  border-bottom: 2px solid #171006;
  box-shadow:
    inset 0 1px 0 rgba(255,213,91,.58),
    inset 0 -1px 0 rgba(0,0,0,.72),
    0 2px 0 rgba(0,0,0,.38);
}
.footer-wood-beam::before,
.footer-wood-beam::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  pointer-events: none;
}
.footer-wood-beam::before { top: 4px; background: rgba(255,198,58,.28); }
.footer-wood-beam::after { bottom: 4px; background: rgba(29,16,5,.58); }
.footer-wood-beam span {
  position: absolute;
  inset: 0;
  opacity: .22;
  background: repeating-linear-gradient(90deg, transparent 0 110px, rgba(29,15,4,.55) 111px 113px, transparent 114px 205px);
}
.site-footer {
  padding-top: 34px !important;
  padding-bottom: 30px !important;
  min-height: 198px !important;
}
@media (max-width: 700px) {
  .footer-wood-beam { height: 13px; }
  .site-footer { padding-top: 27px !important; min-height: 168px !important; }
}

/* =========================================================
   FINAL V31 — launch readiness + responsive hardening
   Approved visual design is unchanged.
   Only sizing, touch behavior and small-screen reliability are improved.
   ========================================================= */
html, body {
  width: 100%;
  max-width: 100%;
}

img {
  max-width: 100%;
}

/* Prevent browser text/image selection from disturbing the game-like UI. */
.header-image,
.design-image,
.roadmap-separator img,
.roadmap-section img,
.footer-stone-divider img,
.footer-mark {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Touch screens should click immediately without a persistent hover zoom. */
@media (hover: none), (pointer: coarse) {
  .header-hotspot:hover::before,
  .collection-slot:hover::before {
    opacity: 0 !important;
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
  }

  .hotspot:hover::after {
    opacity: 0;
  }
}

/* Keep the approved composition intact on tablets and phones. */
@media (max-width: 900px) {
  .top-header,
  .design-stage,
  .roadmap-extension,
  .footer-stone-divider,
  .footer-wood-beam,
  .site-footer {
    width: 100% !important;
    max-width: 100% !important;
  }

  .top-header {
    min-width: 0;
  }

  .design-stage {
    min-width: 0;
  }

  .site-footer {
    flex-wrap: nowrap;
  }
}

/* Compact footer proportionally while preserving the exact footer design. */
@media (max-width: 520px) {
  .site-footer {
    min-height: 138px !important;
    gap: 11px;
    padding: 22px 12px 20px !important;
  }

  .footer-mark {
    width: 70px;
    height: 70px;
  }

  .footer-copy {
    gap: 3px;
    min-width: 0;
  }

  .footer-copy strong {
    font-size: 15px;
    white-space: nowrap;
  }

  .footer-copy span {
    font-size: 8px;
    letter-spacing: .8px;
    white-space: nowrap;
  }

  .footer-copy small {
    margin-top: 3px;
    font-size: 8px;
    white-space: nowrap;
  }
}

/* =========================================================
   FINAL V32 — MOBILE OPTIMIZATION
   Desktop artwork/layout is untouched. These rules only apply
   to phones and improve touch reliability, section scrolling,
   footer proportions and safe-area spacing.
   ========================================================= */
@media (max-width: 600px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: 8px;
  }

  body {
    min-width: 0;
    width: 100%;
    overflow-x: clip;
    overscroll-behavior-x: none;
  }

  .site-shell {
    width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  /* Keep the approved artwork perfectly proportional. */
  .top-header,
  .design-stage,
  .roadmap-extension,
  .roadmap-separator,
  .roadmap-section,
  .footer-stone-divider {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  .header-image,
  .design-image,
  .roadmap-separator img,
  .roadmap-section img,
  .footer-stone-divider img {
    width: 100% !important;
    height: auto !important;
  }

  /* Faster, cleaner taps on mobile without desktop hover artifacts. */
  .header-hotspot,
  .hotspot,
  .collection-slot {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* Internal navigation lands with a little breathing room. */
  #home, #collection, #mission, #roadmap {
    scroll-margin-top: 8px;
  }

  /* Footer was visually oversized on phones in V31. Keep the same
     approved footer, only scale its spacing/type to the mobile canvas. */
  .footer-wood-beam {
    height: 9px !important;
  }

  .site-footer {
    min-height: 112px !important;
    gap: 10px !important;
    padding: 16px 10px 17px !important;
    padding-left: max(10px, env(safe-area-inset-left)) !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
    padding-bottom: max(17px, env(safe-area-inset-bottom)) !important;
  }

  .footer-mark {
    width: 62px !important;
    height: 62px !important;
    flex: 0 0 62px;
  }

  .footer-copy {
    gap: 2px !important;
    min-width: 0;
  }

  .footer-copy strong {
    font-size: clamp(12px, 3.7vw, 16px) !important;
    line-height: 1.08;
    white-space: nowrap;
  }

  .footer-copy span {
    font-size: clamp(7px, 2.15vw, 9px) !important;
    line-height: 1.15;
    letter-spacing: .65px !important;
    white-space: nowrap;
  }

  .footer-copy small {
    margin-top: 3px !important;
    font-size: clamp(7px, 2.05vw, 9px) !important;
    line-height: 1.15;
    white-space: nowrap;
  }
}

@media (max-width: 360px) {
  .site-footer {
    min-height: 102px !important;
    gap: 8px !important;
    padding-top: 14px !important;
  }
  .footer-mark {
    width: 54px !important;
    height: 54px !important;
    flex-basis: 54px;
  }
}

/* =========================================================
   FINAL V33 — TRUE MOBILE LAYOUT
   Desktop remains byte-for-byte visually unchanged. On phones,
   approved artwork is cropped/recomposed into readable panels.
   ========================================================= */
.mobile-layout { display: none; }

@media (max-width: 600px) {
  .design-stage,
  .roadmap-extension { display: none !important; }

  .mobile-layout {
    display: block;
    width: 100%;
    background: #052317;
    overflow: hidden;
  }

  .mobile-panel,
  .mobile-roadmap-panel,
  .mobile-journey {
    position: relative;
    width: 100%;
    margin: 0;
    line-height: 0;
    overflow: hidden;
    background: #052317;
  }

  .mobile-panel img,
  .mobile-roadmap-panel img,
  .mobile-journey img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    user-select: none;
    pointer-events: none;
  }

  /* Collection and mission are intentionally enlarged compared with V32. */
  .mobile-collection-panel,
  .mobile-mission-panel {
    border-top: 2px solid #6e4a18;
    border-bottom: 2px solid #171006;
  }

  .mobile-journey img { width: 118%; margin-left: -9%; }

  .mobile-hit {
    position: absolute;
    z-index: 20;
    display: block;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* Hero crop: original 1688×335 */
  .mobile-view { left: 7.2%; top: 59%; width: 14.5%; height: 24%; }
  .mobile-help { left: 22.2%; top: 59%; width: 14.8%; height: 24%; }

  /* Collection crop: original x0..920, y335..932 */
  .mobile-collection-one { left: 4%; top: 12%; width: 27%; height: 50%; }
  .mobile-opensea { left: 11%; top: 70%; width: 40%; height: 14%; }
  .mobile-magic { left: 54%; top: 70%; width: 39%; height: 14%; }

  #mobile-home,
  #mobile-collection,
  #mobile-mission,
  #mobile-roadmap { scroll-margin-top: 8px; }
}

/* =========================================================
   FINAL V34 — MOBILE ALIGNMENT / CLEAN SEAMS
   Desktop is untouched. Mobile panels share one exact canvas,
   consistent edges, and clean joins from top to footer.
   ========================================================= */
@media (max-width: 600px) {
  html, body, main { width: 100%; max-width: 100%; overflow-x: hidden; }
  .mobile-layout { width: 100vw; max-width: 100%; margin: 0; padding: 0; }
  .mobile-panel,
  .mobile-roadmap-panel,
  .mobile-journey {
    width: 100%; max-width: 100%; margin: 0 !important; padding: 0 !important;
    border-left: 0 !important; border-right: 0 !important;
    box-sizing: border-box; overflow: hidden;
  }
  .mobile-panel img,
  .mobile-roadmap-panel img,
  .mobile-journey img {
    display: block; width: 100% !important; max-width: none; height: auto;
    margin: 0 !important; padding: 0 !important; vertical-align: bottom;
  }
  .mobile-journey img { width: 100% !important; margin-left: 0 !important; }
  .mobile-collection-panel,
  .mobile-mission-panel { border-top: 0 !important; border-bottom: 0 !important; }
  .mobile-roadmap-panel { background: #052317; line-height: 0; }
  .footer-stone-divider { margin-top: -1px !important; }
  .footer-wood-beam { margin-top: -1px !important; }
  .site-footer {
    width: 100%; margin: 0 !important; box-sizing: border-box;
    justify-content: center; padding-left: 18px !important; padding-right: 18px !important;
  }
}

/* =========================================================
   FINAL V35 — MOBILE SEAM ALIGNMENT
   Only mobile joins are adjusted. Desktop remains untouched.
   ========================================================= */
@media (max-width: 600px) {
  /* Pull the mission artwork into the collection's lower stone ledge so
     the two decorative frames read as one continuous section. */
  .mobile-mission-panel {
    margin-top: -10px !important;
    position: relative;
    z-index: 2;
  }

  /* Keep the landscape transition tight against Impact. */
  .mobile-journey {
    margin-top: -2px !important;
    position: relative;
    z-index: 3;
  }

  /* The roadmap artwork contains a small dark top gutter. Hide it under
     the Journey frame instead of showing an empty horizontal stripe. */
  .mobile-roadmap-panel {
    margin-top: -8px !important;
    position: relative;
    z-index: 2;
  }

  /* Keep the final stone divider visually attached to roadmap. */
  .footer-stone-divider {
    margin-top: -2px !important;
    position: relative;
    z-index: 3;
  }
}

/* =========================================================
   FINAL V36 — MOBILE CLEAN JOINS
   Remove V35 negative overlaps. Every mobile section occupies
   its own row and meets the next section edge-to-edge.
   Desktop remains untouched.
   ========================================================= */
@media (max-width: 600px) {
  .mobile-collection-panel,
  .mobile-mission-panel,
  .mobile-journey,
  .mobile-roadmap-panel {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .mobile-collection-panel { z-index: 1 !important; }
  .mobile-mission-panel    { z-index: 1 !important; }
  .mobile-journey          { z-index: 1 !important; }
  .mobile-roadmap-panel    { z-index: 1 !important; }

  .mobile-layout > div {
    display: block;
    width: 100% !important;
    clear: both;
    transform: none !important;
  }

  .mobile-layout > div > img {
    display: block;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
    vertical-align: top !important;
  }

  /* One-pixel anti-alias seam cover only; this does not overlap artwork. */
  .mobile-layout { background: #052317 !important; }
  .footer-stone-divider { margin-top: 0 !important; }
}