/* ==========================================================
   roBUBU LAB — tokens
   bg lime sampled straight from banner art, ink = sharpie black
   ========================================================== */
:root{
  --lime:      #cdf22b;
  --lime-deep: #b9e017;
  --ink:       #101109;
  --paper:     #fff8e6;
  --pink:      #ff2f92;
  --pink-deep: #d81e77;
  --blue:      #345bff;
  --yellow:    #ffd400;
  --red:       #ff3b30;

  --font-display: 'Permanent Marker', cursive;
  --font-body: 'Space Mono', monospace;

  --border: 4px solid var(--ink);
  --shadow-sm: 4px 4px 0 var(--ink);
  --shadow-md: 7px 7px 0 var(--ink);
  --shadow-lg: 11px 11px 0 var(--ink);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--lime);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

h1,h2,h3{ font-family:var(--font-display); font-weight:400; margin:0; }

.x{ display:inline-block; transform:rotate(-6deg); }

/* subtle paper-grain overlay across whole page */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:500;
  opacity:.05; mix-blend-mode:multiply;
  background-image:radial-gradient(var(--ink) 1px, transparent 1px);
  background-size:3px 3px;
}

/* ==========================================================
   Buttons — sticker style, hard offset shadow
   ========================================================== */
.btn{
  display:inline-block;
  font-family:var(--font-body);
  font-weight:700;
  text-decoration:none;
  text-transform:lowercase;
  letter-spacing:.02em;
  padding:.9rem 1.6rem;
  border:var(--border);
  border-radius:999px;
  background:var(--paper);
  color:var(--ink);
  box-shadow:var(--shadow-sm);
  transition:transform .15s ease, box-shadow .15s ease;
  cursor:pointer;
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
.btn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }

.btn--pink{ background:var(--pink); color:var(--paper); }
.btn--yellow{ background:var(--yellow); }
.btn--ghost{ background:transparent; color:var(--paper); border-color:var(--paper); }
.btn--ghost:hover{ box-shadow:6px 6px 0 var(--paper); }
.btn--ghost-dark{ background:transparent; border-color:var(--ink); }
.btn--big{ font-size:1.15rem; padding:1.15rem 2.2rem; }
.btn--small{ padding:.6rem 1.1rem; font-size:.85rem; }

/* ==========================================================
   Nav
   ========================================================== */
.nav{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; gap:1.4rem;
  padding:.9rem 1.6rem;
  background:var(--lime);
  border-bottom:var(--border);
}
.nav__logo{
  font-family:var(--font-display);
  font-size:1.3rem;
  text-decoration:none;
  color:var(--ink);
  transform:rotate(-2deg);
  margin-right:auto;
}
.nav__logo span{ color:var(--pink); }
.nav__logo em{
  font-style:normal; font-family:var(--font-body); font-weight:700;
  font-size:.65rem; letter-spacing:.04em; color:var(--ink);
  background:var(--yellow); border:2px solid var(--ink); border-radius:6px;
  padding:.15rem .4rem; margin-left:.5rem; vertical-align:middle;
  display:inline-block; transform:rotate(-3deg);
}
.footer__logo em{ background:var(--lime); }
.nav__links{ display:flex; gap:1.3rem; font-weight:700; }
.nav__links a{ text-decoration:none; position:relative; margin-left:1.3rem; }
.nav__links a:first-child{ margin-left:0; }
.nav__links a:hover::after{
  content:''; position:absolute; left:0; right:0; bottom:-4px; height:3px; background:var(--pink);
}
.nav__twitter{
  display:flex; align-items:center; gap:.4rem;
  text-decoration:none; font-weight:700; font-size:.85rem;
  border:2px solid var(--ink); border-radius:999px; padding:.35rem .7rem;
  background:var(--paper);
}
.nav__mintbtn{
  font-family:var(--font-body); font-weight:700; text-transform:lowercase;
  background:var(--pink); color:var(--paper);
  border:var(--border); border-radius:999px; padding:.55rem 1.1rem;
  box-shadow:var(--shadow-sm); cursor:pointer;
}
.nav__mintbtn:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }

@media (max-width:760px){
  .nav__links{ display:none; }
  .nav__twitter span{ display:none; }
}

/* ==========================================================
   Hero
   ========================================================== */
.hero{
  position:relative;
  min-height:92vh;
  display:flex; align-items:center;
  overflow:hidden;
  border-bottom:var(--border);
}
.hero__bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 65%;
}
.hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(16,17,9,.8) 0%, rgba(16,17,9,.68) 40%, rgba(16,17,9,.9) 100%);
}
.hero__content{
  position:relative; z-index:2;
  max-width:920px;
  padding:6.5rem 1.6rem 4rem;
  margin:0 auto;
  text-align:center;
}
.eyebrow{
  font-family:var(--font-body); font-weight:700; letter-spacing:.08em;
  color:var(--lime); text-transform:uppercase; font-size:.78rem;
  margin:0 0 1.1rem;
}
.eyebrow--dark{ color:var(--pink-deep); }

.hero__title{
  color:var(--paper);
  font-size:clamp(2.3rem, 6vw, 4.6rem);
  line-height:1.05;
  text-shadow:3px 3px 0 var(--ink);
}
.hero__sub{
  color:var(--paper);
  max-width:600px; margin:1.4rem auto 2rem;
  font-size:1.02rem;
}
.hero__cta{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.hero__ticker-note{
  margin-top:1.6rem; color:var(--lime);
  font-size:.8rem; letter-spacing:.03em;
}
.hero__scroll{
  position:absolute; bottom:1.4rem; left:50%; transform:translateX(-50%);
  color:var(--paper); font-size:.78rem; letter-spacing:.05em;
  animation:bob 2s ease-in-out infinite;
  z-index:2;
}
@keyframes bob{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,6px);} }

.doodle{
  position:absolute; z-index:2; color:var(--yellow);
  font-size:2.4rem; user-select:none; pointer-events:none;
  animation:wiggle 4.5s ease-in-out infinite;
}
.doodle--star1{ top:14%; left:8%; animation-delay:.2s; }
.doodle--star2{ top:22%; right:10%; color:var(--pink); font-size:1.8rem; animation-delay:1.1s; }
.doodle--circle{
  width:60px; height:60px; border:3px solid var(--paper); border-radius:50%;
  top:60%; right:6%; opacity:.5;
}
.doodle--star3{ top:-18px; left:8%; font-size:2rem; }
@keyframes wiggle{ 0%,100%{ transform:rotate(-8deg);} 50%{ transform:rotate(8deg);} }

/* ==========================================================
   Marquee
   ========================================================== */
.marquee{
  background:var(--ink); color:var(--lime);
  border-bottom:var(--border);
  overflow:hidden; white-space:nowrap;
  padding:.85rem 0;
}
.marquee__track{
  display:inline-flex; gap:1.4rem; align-items:center;
  animation:scroll 26s linear infinite;
  font-family:var(--font-display);
  font-size:1rem;
}
.marquee__track span{ padding:0 .2rem; }
@keyframes scroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ==========================================================
   Stats
   ========================================================== */
.stats{
  display:flex; flex-wrap:wrap; justify-content:center; gap:2.2rem;
  padding:3.4rem 1.6rem;
  background:var(--lime);
}
.stat{
  background:var(--paper);
  border:var(--border); border-radius:50%;
  width:160px; height:160px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem;
  box-shadow:var(--shadow-md);
  text-align:center;
}
.stat--rot1{ transform:rotate(-4deg); }
.stat--rot2{ transform:rotate(3deg); }
.stat--rot3{ transform:rotate(-2deg); }
.stat--rot4{ transform:rotate(4deg); }
.stat__label{
  font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:var(--pink-deep);
}
.stat__value{
  font-family:var(--font-display); font-size:1.5rem; color:var(--ink);
}
.stat__value small{ font-size:.85rem; }

/* ==========================================================
   Section title shared
   ========================================================== */
.section-title{
  font-size:clamp(2rem, 5vw, 3.2rem);
  text-align:center;
  margin-bottom:2.6rem;
  line-height:1.15;
}
.section-title span{ font-family:var(--font-body); font-size:1rem; font-weight:700; display:block; margin-top:.5rem; }
.section-title--light{ color:var(--paper); }

/* ==========================================================
   Lore
   ========================================================== */
.lore{
  position:relative;
  padding:5rem 1.6rem 6rem;
  max-width:1180px; margin:0 auto;
}
.lore__deco{
  position:absolute; top:1rem; left:50%; transform:translateX(-50%) rotate(-2deg);
  font-family:var(--font-body); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--pink-deep); font-weight:700; opacity:.7;
}
.lore__grid{
  display:grid;
  grid-template-columns:1.3fr .9fr;
  gap:1.6rem;
  align-items:start;
}
.bubble{
  background:var(--paper);
  border:var(--border);
  border-radius:26px 26px 26px 4px;
  padding:1.6rem 1.8rem;
  box-shadow:var(--shadow-sm);
  position:relative;
}
.bubble p{ margin:0; }
.bubble--1{ transform:rotate(-1.2deg); }
.bubble--2{ grid-column:1; transform:rotate(1deg); }
.bubble--3{ grid-column:1; background:var(--yellow); transform:rotate(-.6deg); border-radius:4px 26px 26px 26px; }

.lore__frame{
  grid-row:1 / span 2;
  grid-column:2;
  background:var(--ink);
  border:var(--border);
  border-radius:14px;
  padding:1.2rem;
  text-align:center;
  transform:rotate(2deg);
  box-shadow:var(--shadow-md);
}
.lore__frame img{ margin:0 auto; border-radius:6px; }
.lore__frame-cap{
  display:block; color:var(--lime); font-size:.78rem; margin-top:1rem; line-height:1.5;
}

.lore__arrow-block{
  grid-column:2;
  display:flex; flex-direction:column; align-items:center; gap:.8rem;
  text-align:center; padding:0 .5rem;
}
.lore__arrow-img{ transform:rotate(3deg); }
.lore__arrow-block p{ margin:0; font-size:.85rem; font-weight:700; }

@media (max-width:820px){
  .lore__grid{ grid-template-columns:1fr; }
  .lore__frame, .lore__arrow-block{ grid-column:1; grid-row:auto; }
}

/* ==========================================================
   Gallery
   ========================================================== */
.gallery{
  background:var(--ink);
  padding:5.5rem 1.6rem 6rem;
  background-image:
    radial-gradient(circle, rgba(205,242,43,.14) 1.4px, transparent 1.4px);
  background-size:16px 16px;
}
.gallery__sub{
  text-align:center; color:var(--lime); max-width:560px; margin:-1.6rem auto 3rem;
  font-size:.92rem;
}
.gallery__grid{
  max-width:1180px; margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1.8rem;
}
.card{
  background:var(--paper);
  border:var(--border);
  border-radius:18px;
  padding:1.1rem 1.1rem 1.4rem;
  box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{ transform:translate(-3px,-5px) rotate(0deg) !important; box-shadow:var(--shadow-md); }
.card--1{ transform:rotate(-2.4deg); }
.card--2{ transform:rotate(1.6deg); }
.card--3{ transform:rotate(-1deg); }
.card--4{ transform:rotate(2.2deg); }
.card--5{ transform:rotate(-1.8deg); }
.card--6{ transform:rotate(1.2deg); }

.card__img{
  background:var(--lime);
  border:3px solid var(--ink);
  border-radius:12px;
  overflow:hidden;
  margin-bottom:.9rem;
  aspect-ratio:1/1;
}
.card__img img{ width:100%; height:100%; object-fit:cover; }
.card h3{ font-size:1.1rem; margin-bottom:.3rem; }
.card .tag{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700;
  color:var(--pink-deep); margin:0 0 .5rem;
}
.card p:not(.tag){ font-size:.86rem; margin:0; }

.card--cta{
  background:var(--pink);
  color:var(--paper);
  display:flex; flex-direction:column; justify-content:center; gap:.8rem;
  text-align:center;
}
.card--cta h3{ font-size:1.3rem; line-height:1.2; }
.card--cta p{ font-size:.85rem; }

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

/* ==========================================================
   Mint
   ========================================================== */
.mint{
  position:relative;
  padding:6rem 1.6rem;
  display:flex; justify-content:center;
  background:var(--lime);
  overflow:hidden;
}
.mint__panel{
  position:relative;
  max-width:640px; width:100%;
  background:var(--paper);
  border:var(--border);
  border-radius:30px;
  padding:3rem 2.4rem;
  text-align:center;
  box-shadow:var(--shadow-lg);
}
.mint__title{
  font-size:clamp(2.4rem,6vw,3.6rem);
  color:var(--pink-deep);
  line-height:1;
  margin:.4rem 0 1rem;
}
.mint__sub{ max-width:460px; margin:0 auto 2rem; font-size:.92rem; }
.mint__row{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-bottom:2rem;
}
.mint__box{
  background:var(--lime);
  border:3px solid var(--ink);
  border-radius:14px;
  padding:.8rem 1.3rem;
  min-width:130px;
}
.mint__box span{ display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; margin-bottom:.2rem; }
.mint__box strong{ font-family:var(--font-display); font-size:1.25rem; font-weight:400; }
.mint__cta{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.mint__fine{ margin-top:1.6rem; font-size:.72rem; opacity:.65; }

/* ==========================================================
   Footer
   ========================================================== */
.footer{
  background:var(--ink); color:var(--lime);
  padding:2.4rem 1.6rem 3rem;
  text-align:center;
}
.footer__top{
  display:flex; align-items:center; justify-content:center; gap:1.6rem;
  flex-wrap:wrap; margin-bottom:1.2rem;
}
.footer__logo{ color:var(--paper); }
.footer__logo span{ color:var(--pink); }
.footer__twitter{
  display:inline-flex; align-items:center; gap:.4rem;
  text-decoration:none; font-weight:700; font-size:.85rem;
  border:2px solid var(--lime); border-radius:999px; padding:.35rem .8rem;
}
.footer__fine{
  max-width:560px; margin:0 auto; font-size:.72rem; line-height:1.6; opacity:.65;
}

/* ==========================================================
   Reduced motion
   ========================================================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .doodle, .hero__scroll, .marquee__track{ animation:none !important; }
  .btn, .card{ transition:none; }
}