/* ============================================================
   GOD THE DOG (Solana)
   Stylesheet ported from godthedog.com's compiled bundle and
   expanded back into readable form. Values are kept as-is on
   purpose — this is a structural clone. Anything added for the
   Solana build is marked ADDED.

   Removed on request (16 Sep 2026): navbar, music player, TOUCH
   GRASS sign, TEAM section. The grass field itself stays.
   ============================================================ */

:root {
  /* Lebar kolom baca untuk LORE / MISSION / HOW TO BUY.
     Aslinya 500px untuk LORE+MISSION dan 450px untuk HOW TO BUY — dilebarkan
     dan disamakan 16 Sep 2026. Ini satu-satunya tempat mengubahnya.
     Jangan lewat ~700px: font Chewy + letter-spacing .1em bikin baris jadi
     terlalu panjang untuk dibaca nyaman. */
  --measure: 620px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  /* The original ships #000 here, which shows as a black band under the grass
     whenever the viewport is taller than the content. Matched to .home instead. */
  background-color: #ffde59;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ADDED — layout rules below use display:flex/block on elements that start
   out hidden; without this the attribute loses and they leak onto the page. */
[hidden] { display: none !important; }

.home {
  position: relative;
  z-index: 0;
  background: #ffde59;
  color: #000;
  font-family: Chewy, sans-serif;
  overflow-x: hidden;
  text-align: center;
}

/* ---------------------------------------------------------- HERO */

.hero {
  position: relative;
  z-index: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.hero-bg-wrap {
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.hero-bg {
  display: block;
  width: 100vw;
  height: 100dvh;
  object-fit: cover;
}

.hero-title,
.hero-dog {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.hero-title {
  bottom: 20%;
  z-index: 2;
  width: clamp(240px, 64vw, 1020px);
}

.hero-dog {
  bottom: 6%;
  z-index: 3;
  width: clamp(100px, 24vw, 420px);
}

/* ---------------------------------------------------------- TITLES */

.wobbly-title {
  display: inline-flex;
  gap: .02em;
  color: #fff;
  font-family: Chewy, sans-serif;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
  white-space: nowrap;
}

.wobbly-title .char  { display: inline-block; will-change: transform; }
.wobbly-title .space { width: .45em; }

.about-title {
  display: block;
  z-index: 9999 !important;
  width: fit-content;
  margin: 0 auto 18px;
  color: #fff;
  font-family: Chewy, sans-serif;
  font-size: 4rem !important;
  letter-spacing: .1em;
  text-align: center;
}

/* ---------------------------------------------------------- SECTIONS */

.section {
  margin: 0 auto;
  padding: 100px 20px 40px;
}

.section h2 { font-size: 48px; margin-bottom: 20px; }
.section p  { font-size: 18px; line-height: 1.6; }

.about {
  position: relative;
  max-width: var(--measure) !important;
  padding-top: 64px !important;
}

/* The negative z-index is what lets the mascots sit in front of the paper. */
.about p,
.mission p {
  z-index: -1;
  max-width: var(--measure) !important;
  padding: 1rem;
  border: 3px solid #1a1a1a;
  border-radius: 14px;
  background-color: #fff7e8;
  box-shadow: 3px 3px 0 #1a1a1a, 0 2px 12px rgba(0, 0, 0, .08);
  font-family: Chewy, sans-serif;
  letter-spacing: .1em;
  transform: rotate(-.3deg);
}

.mission {
  position: relative;
  display: flex;
  justify-content: center;
  max-width: 1500px !important;
  margin-top: 2rem !important;
}

.mission-content {
  position: relative;
  max-width: var(--measure) !important;
}

/* ---------------------------------------------------------- HOW TO BUY */

.how-to-buy {
  max-width: 1500px !important;
  margin-top: 2rem !important;
}

.how-to-buy,
.how-to-buy-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.how-to-buy-content { max-width: var(--measure); }

.step-container {
  z-index: 10;
  width: 100%;
  margin: 12px 0;
  padding: 0 14px 14px 22px;
  border: 3px solid #1a1a1a;
  border-radius: 14px;
  background-color: #fff7e8;
  box-shadow: 3px 3px 0 #1a1a1a, 0 2px 12px rgba(0, 0, 0, .08);
  font-family: Chewy, sans-serif;
  text-align: left;
  transform: rotate(-.3deg);
}

/* ADDED — the Solana buy path has real links inside the steps. */
.step-container a { color: #7a3fd6; text-decoration: underline; }
.step-container a:hover { color: #5b2aa8; }

/* ADDED — the non-affiliation notice. Same card, different tint so it does
   not read as step 5. Never delete this block. */
.callout { background-color: #e6d8ff; padding-bottom: 0; }

.contract-address {
  display: block;
  margin-top: .5rem;
  font-family: Chewy, sans-serif;
  font-size: .95rem;
  white-space: normal;
  word-break: break-all;
}

/* ADDED — the nav CA button is gone, so copying happens here instead. */
.copy-btn {
  margin-top: .25rem;
  padding: .45rem .9rem;
  border: 3px solid #1a1a1a;
  border-radius: 10px;
  background: #9cf58a;
  box-shadow: 2px 2px 0 #1a1a1a;
  font-family: Chewy, sans-serif;
  font-size: 1rem;
  letter-spacing: .08em;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.copy-btn:hover  { transform: translateY(-2px); box-shadow: 4px 4px 0 #1a1a1a; }
.copy-btn:active { transform: translateY(1px);  box-shadow: 1px 1px 0 #1a1a1a; }

.copied-text {
  margin-left: .5rem;
  color: green;
  font-size: .8rem;
  font-weight: 700;
}

.watch-wrap {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

.watch-video-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 90%;
  padding: 12px 18px;
  border: 3px solid #1a1a1a;
  border-radius: 14px;
  background-color: #fff7e8;
  box-shadow: 3px 3px 0 #1a1a1a, 0 2px 12px rgba(0, 0, 0, .08);
  color: #1a1a1a;
  font-family: Chewy, sans-serif;
  font-size: 1.2rem;
  letter-spacing: .02em;
  text-decoration: none;
  transform: rotate(-.3deg);
  transition: transform .15s ease, box-shadow .15s ease;
}

.watch-video-btn:hover {
  box-shadow: 5px 5px 0 #1a1a1a, 0 4px 16px rgba(0, 0, 0, .12);
  transform: translateY(-2px) rotate(0deg);
}

.yt-icon { font-size: 1.35em; fill: currentColor; }

/* ---------------------------------------------------------- TOKENOMICS
   ADDED — not in the original site. Every row here is a claim that is
   permanently true on-chain (mint/freeze authority are null and can never be
   set again; a Token-2022 transfer fee cannot be added to an already
   initialised mint). Nothing here can go stale. Do not add a row that can. */

.tokenomics { max-width: var(--measure) !important; margin-top: 2rem !important; }

.tokenomics-content { max-width: var(--measure); margin: 0 auto; }

.fact-card {
  margin-bottom: 14px;
  padding: 6px 18px 14px;
  border: 3px solid #1a1a1a;
  border-radius: 14px;
  background-color: #fff7e8;
  box-shadow: 3px 3px 0 #1a1a1a, 0 2px 12px rgba(0, 0, 0, .08);
  font-family: Chewy, sans-serif;
  text-align: left;
  transform: rotate(-.3deg);
}

.fact {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 2px dashed rgba(26, 26, 26, .18);
}
.fact:last-child { border-bottom: 0; }

.fact-k { font-size: .95rem; opacity: .65; letter-spacing: .04em; }
.fact-v { font-size: 1.05rem; text-align: right; }
.fact-v b { color: #7a3fd6; }
.fact-v.ok::before { content: '✓ '; color: #1f9d55; font-weight: 700; }

.wallet-card { padding: 16px 18px; }
.wallet-card .fact-k { display: block; margin-bottom: 8px; }

.wallet-address {
  margin: 0 0 12px !important;
  padding: .5rem .6rem;
  border: 2px dashed #1a1a1a;
  border-radius: 10px;
  background: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8rem !important;
  line-height: 1.5 !important;
  word-break: break-all;
}

.wallet-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.verify-link {
  color: #7a3fd6;
  font-family: Chewy, sans-serif;
  font-size: 1rem;
  letter-spacing: .04em;
  text-decoration: underline;
}
.verify-link:hover { color: #5b2aa8; }

.wallet-note {
  margin: 12px 0 0 !important;
  font-size: .85rem !important;
  line-height: 1.55 !important;
  opacity: .7;
}

.verify-row {
  margin: 4px 0 0 !important;
  font-family: Chewy, sans-serif;
  font-size: .95rem !important;
  opacity: .8;
}

/* ---------------------------------------------------------- MEMES
   ADDED — not in the original site. Scrapbook grid: every meme gets the
   same cream paper frame as the text cards, tilted alternately so the wall
   reads pinned-up rather than laid out on a grid. All source images are
   640x640, so no cropping is needed and the grid never goes ragged. */

.memes {
  max-width: 1040px !important;
  margin-top: 2rem !important;
}

.meme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 22px;
  margin-inline: auto;
}

.meme-card {
  display: block;
  padding: 10px;
  border: 3px solid #1a1a1a;
  border-radius: 14px;
  background-color: #fff7e8;
  box-shadow: 3px 3px 0 #1a1a1a, 0 2px 12px rgba(0, 0, 0, .08);
  cursor: zoom-in;
  transition: transform .18s ease, box-shadow .18s ease;
}

.meme-card:nth-child(odd)  { transform: rotate(-1.1deg); }
.meme-card:nth-child(even) { transform: rotate(.9deg); }
.meme-card:nth-child(3n)   { transform: rotate(-.35deg); }

.meme-card:hover,
.meme-card:focus-visible {
  box-shadow: 5px 5px 0 #1a1a1a, 0 6px 18px rgba(0, 0, 0, .14);
  outline: none;
  transform: translateY(-4px) rotate(0deg) scale(1.02);
}

.meme-card img {
  display: block;
  width: 100%;
  /* `height: auto` is load-bearing. The tags carry width/height attributes so
     the browser reserves space before the file lands, but those map to a
     presentational `height: 640px` — which beats `auto`, pins both axes, and
     makes `aspect-ratio` inert. The cards then stretch to 640px tall and
     `object-fit: cover` crops every meme to a vertical sliver. */
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  background: #ffde59;
}

/* ---------------------------------------------------------- LIGHTBOX */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  background: rgba(26, 26, 26, .82);
}

.lb-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0;
  max-width: min(78vw, 720px);
}

.lb-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 78vh;
  object-fit: contain;
  border: 3px solid #1a1a1a;
  border-radius: 14px;
  background: #fff7e8;
  box-shadow: 4px 4px 0 #1a1a1a;
}

.lb-count {
  font-family: Chewy, sans-serif;
  font-size: 1rem;
  letter-spacing: .1em;
  color: #fff7e8;
}

.lb-btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 3px solid #1a1a1a;
  border-radius: 14px;
  background: #fff7e8;
  box-shadow: 3px 3px 0 #1a1a1a;
  color: #1a1a1a;
  font-family: Chewy, sans-serif;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transition: transform .15s ease;
}

.lb-btn:hover  { transform: scale(1.08); }
.lb-btn:active { transform: translateY(1px) scale(1); }

.lb-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  font-size: 1.7rem;
}

@media (max-width: 620px) {
  .lb-stage { max-width: 86vw; }
  .lb-btn { width: 42px; height: 42px; font-size: 1.6rem; }
  .lightbox { gap: 6px; padding: 12px; }
  .meme-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
}

/* ---------------------------------------------------------- SOCIALS */

/* The original renders these as bare 45px glyphs, which works when five of them
   sit in a row. With one link live, a lone glyph on open yellow reads as an
   unfinished page — so they get the same cream paper frame as every other
   interactive thing here. Works at one icon or at five. */
.socials .social-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
}

.social-icons a {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border: 3px solid #1a1a1a;
  border-radius: 14px;
  background-color: #fff7e8;
  box-shadow: 3px 3px 0 #1a1a1a, 0 2px 12px rgba(0, 0, 0, .08);
  color: #1a1a1a;
  transform: rotate(-.3deg);
  transition: transform .18s ease, box-shadow .18s ease;
}

.social-icons a:hover {
  box-shadow: 5px 5px 0 #1a1a1a, 0 6px 18px rgba(0, 0, 0, .14);
  transform: translateY(-3px) rotate(0deg);
}

.social-icons svg { width: 30px; height: 30px; fill: currentColor; }

.dex-icon {
  width: 34px;
  height: auto;
}

/* ---------------------------------------------------------- MASCOTS */

.family,
.astro {
  position: absolute;
  height: auto;
  z-index: 10;
  pointer-events: none;
  transform-origin: center bottom;
}

.family { top: 2%; left: -20%; width: 270px; }
.astro  { top: -7%; left: -80%; width: 150px; }

.skater-dog {
  position: absolute;
  top: -9%;
  right: -50%;
  z-index: 10;
  width: 120px;
  height: auto;
  pointer-events: none;
}

.karate,
.jump {
  position: absolute;
  width: 300px;
  height: auto;
  pointer-events: none;
}

.karate { bottom: -15%; right: -30%; z-index: 10; transform-origin: center bottom; }
.jump   { bottom: -20%; left: -15%;  z-index: 1000; }

/* ---------------------------------------------------------- GRASS */

.grass-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.grass-field {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: var(--grass-height, 180px);
  margin-top: 5rem;
  overflow: visible;
  background: transparent;
  pointer-events: none;
}

/* ADDED — see initSocials() in script.js. Without the socials row the page
   gets short enough that the grass crowds the last card. */
.home.no-socials .grass-field { margin-top: 10rem; }

.grass-blade {
  position: absolute;
  bottom: -25% !important;
  transform-origin: bottom center;
  transition: transform .1s ease-out;
}

/* ---------------------------------------------------------- RESPONSIVE */

@media (max-width: 1400px) {
  .hero-title { bottom: 20%; position: absolute; }
}

@media (max-width: 768px) {
  .family { top: 2%; left: -15%; }
  .karate { bottom: -14%; right: -30%; }
  .hero-title { bottom: 30%; width: 600px; }
  .hero-dog { bottom: 10%; width: 300px; }
  .watch-video-btn { width: 90%; }
}

@media (max-width: 650px) {
  .jump { bottom: -18%; left: -40%; width: 280px; }
  .how-to-buy-content { position: relative; max-width: 300px; }
}

@media (max-width: 640px) {
  .astro { top: -6%; }
}

@media (max-width: 468px) {
  .about-title { font-size: 3rem !important; }
  .family { top: 3%; left: -10%; width: 50%; }
  .karate { bottom: -8%; right: -25%; width: 200px; }
  .jump { bottom: -15%; left: -30%; width: 280px; }
  .skater-dog { top: -7%; right: -25%; }
  .astro { top: -5%; }
  .hero-dog { bottom: 10%; width: 200px; }
  .hero-title { bottom: 25%; width: 400px; }
  .socials .social-icons { gap: 15px; }
  .how-to-buy-content { position: relative; max-width: 400px !important; }
  .step-container { width: 75%; }
}

@media (prefers-reduced-motion: reduce) {
  .astro { animation: none; }
  .grass-blade { transition: none; }
}