:root {
  --forest: #123d23;
  --forest-deep: #082515;
  --leaf: #65bd3d;
  --lime: #cffa48;
  --gold: #ffd43d;
  --orange: #f18a22;
  --cream: #fff7d6;
  --paper: rgba(255,255,255,.82);
  --ink: #24170d;
  --shadow: 0 28px 80px rgba(18,61,35,.22);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Nunito", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 4%, rgba(255,212,61,.62), transparent 24%),
    radial-gradient(circle at 94% 12%, rgba(101,189,61,.42), transparent 26%),
    linear-gradient(180deg, #edffd7, var(--cream) 42%, #dcffc0);
  overflow-x: hidden;
}
button, input { font: inherit; }
a { color: inherit; }

.ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.95) 0 2px, transparent 3px),
    radial-gradient(circle, rgba(255,212,61,.8) 0 2px, transparent 3px);
  background-size: 160px 160px, 235px 235px;
  animation: drift 22s linear infinite;
  z-index: 0;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 10px clamp(18px, 5vw, 74px);
  background: rgba(255,247,214,.82);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(18,61,35,.12);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--forest);
  font-family: "Baloo 2", sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
}
.brand img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(18,61,35,.2);
}
.nav { display: flex; align-items: center; gap: 22px; }
.nav a { text-decoration: none; color: var(--forest); font-weight: 900; }
.menu-button {
  display: none;
  border: 0;
  background: var(--forest);
  color: white;
  border-radius: 12px;
  padding: 8px 12px;
}

.hero {
  position: relative;
  min-height: calc(100vh - 74px);
  padding: 70px clamp(18px, 5vw, 74px) 130px;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  gap: 50px;
  z-index: 1;
}
.hero-copy, .hero-art { position: relative; z-index: 2; }
.eyebrow {
  margin: 0 0 12px;
  color: var(--forest);
  font-size: .88rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.eyebrow.light { color: var(--gold); }
h1, h2, h3 { font-family: "Baloo 2", sans-serif; }
h1 {
  margin: 0 0 22px;
  color: var(--forest);
  font-size: clamp(3.5rem, 7vw, 7.6rem);
  line-height: .82;
  letter-spacing: -.06em;
}
h1 span { color: var(--orange); text-shadow: 0 8px 0 rgba(255,212,61,.36); }
h2 {
  margin: 0 0 12px;
  color: var(--forest);
  font-size: clamp(2.45rem, 5vw, 4.9rem);
  line-height: .95;
  letter-spacing: -.045em;
}
h3 { line-height: 1; }
.lead {
  max-width: 680px;
  font-size: 1.1rem;
  line-height: 1.7;
}
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.button {
  border: 0;
  border-radius: 999px;
  padding: 14px 21px;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  font-weight: 900;
  transition: transform .2s, box-shadow .2s;
}
.button:hover { transform: translateY(-3px) scale(1.02); }
.primary {
  color: #3b210c;
  background: linear-gradient(135deg, var(--orange), var(--gold));
  box-shadow: 0 14px 34px rgba(241,138,34,.34);
}
.secondary { color: white; background: var(--forest); box-shadow: 0 14px 34px rgba(18,61,35,.24); }

.hero-art {
  padding: 14px;
  border-radius: 44px;
  background: rgba(255,255,255,.52);
  box-shadow: var(--shadow);
  animation: heroFloat 5s ease-in-out infinite;
}
.hero-art img { display: block; width: 100%; border-radius: 32px; }
.sunburst {
  position: absolute;
  inset: -100px;
  background: radial-gradient(circle, rgba(255,212,61,.65), transparent 62%);
  filter: blur(24px);
  z-index: -1;
  animation: pulse 5s ease-in-out infinite;
}
.floating-acorn { position: absolute; font-size: clamp(2rem, 4vw, 4rem); filter: drop-shadow(0 15px 12px rgba(0,0,0,.2)); }
.a1 { left: -30px; top: 8%; animation: bob 3s ease-in-out infinite; }
.a2 { right: -20px; top: 40%; animation: bob 3.8s ease-in-out infinite reverse; }
.a3 { left: 36%; bottom: -32px; animation: bob 4.2s ease-in-out infinite; }

.timmy-walk { position: absolute; bottom: 22px; left: -150px; z-index: 3; animation: walkAcross 18s linear infinite; }
.timmy { position: relative; width: 128px; height: 142px; animation: steps .5s ease-in-out infinite; }
.tail { position: absolute; left: -16px; top: 29px; width: 76px; height: 106px; border-radius: 80% 38% 72% 44%; background: #a95d27; box-shadow: inset -10px -8px rgba(0,0,0,.1); animation: tailWag 1s ease-in-out infinite; }
.body { position: absolute; left: 47px; top: 57px; width: 60px; height: 76px; background: #aa5b28; border-radius: 50%; }
.belly { position: absolute; left: 62px; top: 79px; width: 31px; height: 43px; background: #ffd68a; border-radius: 50%; }
.head { position: absolute; left: 42px; top: 15px; width: 74px; height: 65px; background: #b9662f; border-radius: 52% 52% 48% 48%; }
.ear { position: absolute; top: -15px; width: 25px; height: 25px; background: #8f451f; border-radius: 50%; }
.ear.left { left: 5px; } .ear.right { right: 5px; }
.eye { position: absolute; top: 25px; width: 9px; height: 13px; background: #120d08; border-radius: 50%; }
.eye.left { left: 23px; } .eye.right { right: 23px; }
.nose { position: absolute; left: 32px; top: 39px; width: 10px; height: 7px; background: #201408; border-radius: 50%; }
.smile { position: absolute; left: 28px; top: 47px; width: 18px; height: 10px; border-bottom: 3px solid #201408; border-radius: 0 0 20px 20px; }
.held-acorn { position: absolute; right: -3px; bottom: 8px; font-size: 2rem; }

.section {
  position: relative;
  z-index: 1;
  padding: clamp(65px, 8vw, 110px) clamp(18px, 5vw, 74px);
}
.section-heading { max-width: 820px; margin-bottom: 34px; }
.section-heading p:last-child { font-size: 1.08rem; line-height: 1.65; }

.social-grid { display: grid; grid-template-columns: .75fr .75fr 1.5fr; gap: 22px; }
.social-card, .episode-card, .character-card, .product {
  border: 1px solid rgba(18,61,35,.13);
  border-radius: 30px;
  box-shadow: 0 18px 48px rgba(18,61,35,.1);
  transition: transform .22s, box-shadow .22s;
}
.social-card:hover, .character-card:hover, .product:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
.social-card {
  min-height: 270px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  background: var(--paper);
}
.social-card h3 { margin: 10px 0 4px; font-size: 2rem; }
.social-card p { margin: 0; }
.social-icon { font-size: 3rem; font-weight: 900; }
.tiktok { background: linear-gradient(145deg, #151515, #333); color: white; }
.instagram { background: linear-gradient(145deg, #ffdc80, #f77737 45%, #c13584); color: white; }
.episode-card {
  min-height: 350px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(8,37,21,.92), rgba(8,37,21,.32)),
    url("assets/acorn-adventures-official.png") center/cover;
}
.episode-overlay { max-width: 500px; padding: 38px; color: white; }
.episode-overlay h3 { margin: 5px 0 12px; font-size: clamp(2rem, 4vw, 4rem); }
.light-button { background: white; color: var(--forest); margin-top: 14px; }

.characters-section { background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(101,189,61,.18)); }
.character-grid, .product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.character-card, .product { padding: 24px; background: var(--paper); }
.character-avatar { width: 82px; height: 82px; display: grid; place-items: center; border-radius: 26px; background: linear-gradient(135deg, #fff3a8, #aaef7e); font-size: 3rem; }
.character-card h3, .product h3 { margin: 20px 0 8px; font-size: 1.65rem; }
.character-card p, .product p { line-height: 1.6; }
.character-card span { color: var(--forest); font-weight: 900; }

.countdown-section {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 45px;
  align-items: center;
  color: white;
  background: linear-gradient(135deg, var(--forest-deep), #28703c);
}
.countdown-section h2 { color: white; }
.count-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.count-grid div { padding: 25px 12px; text-align: center; border-radius: 25px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16); }
.count-grid strong { display: block; font-family: "Baloo 2"; font-size: clamp(2.5rem, 5vw, 4.8rem); line-height: 1; }
.count-grid span { color: var(--gold); font-weight: 900; }

.game-shell { padding: 18px; border-radius: 38px; background: rgba(255,255,255,.62); box-shadow: var(--shadow); }
.game-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 8px 8px 18px; font-size: 1.15rem; }
.game-board {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  border-radius: 30px;
  background:
    radial-gradient(circle at 20% 15%, rgba(255,212,61,.55), transparent 23%),
    linear-gradient(180deg, #6dc7e8, #95db64 58%, #27713e);
}
.acorn-target { position: absolute; left: 45%; top: 44%; padding: 0; border: 0; background: transparent; font-size: 4.2rem; cursor: pointer; filter: drop-shadow(0 15px 12px rgba(0,0,0,.2)); transition: transform .15s; }
.acorn-target:hover { transform: scale(1.14) rotate(8deg); }
#game-message { position: absolute; left: 20px; bottom: 10px; color: white; font-weight: 900; }

.merch-section { background: linear-gradient(180deg, rgba(255,212,61,.08), rgba(255,212,61,.25)); }
.product-grid { grid-template-columns: repeat(3, 1fr); }
.product { position: relative; overflow: hidden; }
.product-tag { position: absolute; right: 18px; top: 18px; padding: 7px 11px; border-radius: 999px; background: var(--forest); color: white; font-size: .78rem; font-weight: 900; }
.product-art { height: 185px; display: grid; place-items: center; border-radius: 25px; font-size: 5rem; background: linear-gradient(135deg, #fff2a5, #a9ed7d); }
.merch-button { width: 100%; }

.fanclub {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 45px;
  align-items: center;
  color: white;
  background: linear-gradient(135deg, #4f872c, var(--forest-deep));
}
.fanclub h2 { color: white; }
.fan-form { display: grid; gap: 12px; }
.fan-form input { width: 100%; border: 0; border-radius: 999px; padding: 16px 18px; }
.form-message { min-height: 24px; margin: 0; color: var(--gold); font-weight: 900; }

.chat-toggle {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 70;
  border: 0;
  border-radius: 999px;
  padding: 14px 18px;
  color: white;
  background: var(--forest);
  box-shadow: var(--shadow);
  font-weight: 900;
  cursor: pointer;
}
.chatbot {
  position: fixed;
  right: 20px;
  bottom: 82px;
  z-index: 75;
  width: min(370px, calc(100vw - 40px));
  overflow: hidden;
  border-radius: 28px;
  background: #fff9df;
  border: 1px solid rgba(18,61,35,.16);
  box-shadow: var(--shadow);
  transform: translateY(20px) scale(.96);
  opacity: 0;
  pointer-events: none;
  transition: .25s;
}
.chatbot.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
.chat-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 17px; color: white; background: var(--forest); }
.chat-header div { display: grid; }
.chat-header span { font-size: .78rem; color: #c9efb1; }
.chat-header button { border: 0; color: white; background: transparent; font-size: 1.6rem; cursor: pointer; }
.chat-messages { max-height: 285px; overflow-y: auto; padding: 14px; display: grid; gap: 10px; }
.message { padding: 11px 13px; border-radius: 17px; line-height: 1.45; }
.timmy-message { background: white; }
.user-message { justify-self: end; max-width: 85%; background: var(--lime); }
.chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid rgba(18,61,35,.12); }
.chat-form input { flex: 1; min-width: 0; border: 1px solid rgba(18,61,35,.18); border-radius: 999px; padding: 11px 13px; }
.chat-form button { border: 0; border-radius: 999px; padding: 11px 14px; color: white; background: var(--forest); cursor: pointer; }

footer {
  position: relative;
  z-index: 1;
  padding: 35px clamp(18px, 5vw, 74px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
  color: var(--cream);
  background: var(--forest-deep);
}
footer img { width: 58px; height: 58px; object-fit: cover; border-radius: 17px; }
footer div { display: flex; gap: 18px; }
footer a { color: var(--gold); font-weight: 900; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@keyframes drift { to { background-position: 160px 160px, -235px 235px; } }
@keyframes heroFloat { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-18px) rotate(1deg); } }
@keyframes pulse { 0%,100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-18px) rotate(8deg); } }
@keyframes walkAcross { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 280px)); } }
@keyframes steps { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes tailWag { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(8deg); } }

@media (max-width: 1050px) {
  .hero, .countdown-section, .fanclub { grid-template-columns: 1fr; }
  .hero-copy { max-width: 800px; }
  .social-grid { grid-template-columns: 1fr 1fr; }
  .episode-card { grid-column: 1 / -1; }
  .character-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 730px) {
  .menu-button { display: block; }
  .nav {
    position: absolute;
    top: 74px;
    left: 16px;
    right: 16px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 18px;
    border-radius: 22px;
    background: #fff9df;
    box-shadow: var(--shadow);
  }
  .nav.open { display: flex; }
  .hero { padding-top: 48px; }
  .social-grid, .character-grid, .product-grid, .count-grid { grid-template-columns: 1fr; }
  .episode-card { grid-column: auto; }
  footer { flex-direction: column; text-align: center; }
  .chatbot { right: 12px; width: calc(100vw - 24px); }
}