/* ============ Snappy Teeth (brand: snappy) ============ */
body{background:var(--cream); font-weight:600}
.gh{color:var(--cream)}
.gh.is-scrolled{background:rgba(12,106,144,.72)}
.gh__brand{font-family:var(--font-display); font-weight:400; font-size:22px; letter-spacing:.01em}
.gh__brand img{height:34px}
.gh__switch{border-color:rgba(255,246,232,.35); background:rgba(14,42,71,.18)}
.gh__switch a[aria-current]{background:var(--cream); color:var(--ink)}
.gh[data-on="light"]{color:var(--ink)}
.gh[data-on="light"] .gh__switch{border-color:var(--line); background:rgba(255,246,232,.7)}
.gh[data-on="light"] .gh__switch a[aria-current]{background:var(--ink); color:var(--cream)}
.gh[data-on="light"].is-scrolled{background:rgba(255,246,232,.82)}

.h-display{font-family:var(--font-display); font-weight:400; line-height:.95; letter-spacing:.005em}
.h-3d{color:var(--cream); text-shadow:0 .045em 0 var(--ink), 0 .09em 0 rgba(14,42,71,.28)}
.h-ink{color:var(--ink); text-shadow:0 .045em 0 rgba(14,42,71,.14)}
.sky{background:linear-gradient(160deg,#0C6A90 0%,#05AAB4 52%,#58E3C4 100%)}
.sky--rev{background:linear-gradient(200deg,#58E3C4 0%,#05AAB4 48%,#0C6A90 100%)}

/* ---- hero / play ---- */
.hero{position:relative; min-height:100svh; padding-top:var(--header-h); color:var(--cream); overflow:hidden; display:flex; align-items:center}
.hero::before{content:""; position:absolute; inset:-10% -20%; background:
  radial-gradient(38% 34% at 72% 46%, rgba(255,255,255,.28), transparent 70%),
  radial-gradient(30% 26% at 18% 18%, rgba(255,255,255,.14), transparent 70%),
  radial-gradient(26% 22% at 30% 92%, rgba(255,255,255,.12), transparent 70%); pointer-events:none}
.hero__grid{display:grid; grid-template-columns:1fr; gap:22px; align-items:center; padding-block:28px 40px; position:relative}
.hero__copy .eyebrow{color:rgba(255,246,232,.85)}
.hero__title{font-size:clamp(64px, 11vw, 168px); margin:14px 0 18px}
.hero__lede{font-size:clamp(18px,1.6vw,24px); font-weight:700; max-width:22ch; line-height:1.3; text-wrap:balance}
.hero__cta{margin-top:30px; display:flex; flex-direction:column; gap:14px; align-items:flex-start}
.hero__meta{font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; opacity:.85}
@media (min-width:900px){ .hero__grid{grid-template-columns:minmax(0,6fr) minmax(0,6fr); gap:var(--gutter)} }

.stage{position:relative; width:min(100%, 640px); aspect-ratio:1/1; margin:0 auto 48px; touch-action:manipulation; user-select:none; -webkit-user-select:none}
.stage canvas{position:absolute; inset:0; width:100%!important; height:100%!important; cursor:pointer}
.stage__fallback{position:absolute; inset:12%; width:76%; height:76%; object-fit:contain; display:none; filter:drop-shadow(0 30px 40px rgba(6,40,60,.35)); animation:bob 5s ease-in-out infinite}
.stage.no-webgl canvas{display:none} .stage.no-webgl .stage__fallback{display:block}
.stage.is-chomp .stage__fallback{animation:punch .5s var(--ease-out)}
@keyframes bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)}}
@keyframes punch{0%{transform:scale(1)} 35%{transform:scale(1.12)} 100%{transform:scale(1)}}
.stage__hint{position:absolute; left:50%; bottom:-44px; transform:translateX(-50%); white-space:nowrap; font-size:13px; font-weight:800; letter-spacing:.04em; padding:9px 14px; border-radius:999px; background:rgba(14,42,71,.28); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:var(--cream); pointer-events:none}
.stage__count{position:absolute; top:8px; right:8px; font-family:var(--font-display); font-size:22px; color:var(--cream); text-shadow:0 3px 0 var(--ink); padding:8px 16px; border-radius:999px; background:var(--accent); box-shadow:0 6px 0 var(--accent-deep); pointer-events:none; transition:transform .3s var(--ease-out)}
.stage__count.pop{animation:punch .45s var(--ease-out)}

.snack{position:absolute; width:clamp(56px, 12%, 84px); aspect-ratio:1/1; translate:-50% -50%; will-change:transform; z-index:3; -webkit-tap-highlight-color:transparent}
.snack__f{width:100%; height:100%; filter:drop-shadow(0 10px 14px rgba(6,40,60,.35)); animation:float var(--fd,4s) ease-in-out var(--fdl,0s) infinite; transition:transform .35s var(--ease-out)}
.snack:hover .snack__f{transform:scale(1.14) rotate(-6deg)}
.snack.is-flying .snack__f{animation:none}
.snack svg{width:100%; height:100%; overflow:visible}
@keyframes float{0%,100%{transform:translateY(0) rotate(-3deg)} 50%{transform:translateY(-10px) rotate(3deg)}}

/* ---- game section ---- */
.game{background:var(--cream); color:var(--ink)}
.game__head{display:grid; gap:18px; margin-bottom:clamp(36px,5vw,64px)}
.game__title{font-size:clamp(44px,7vw,110px)}
.game__lede{font-size:clamp(17px,1.3vw,20px); max-width:52ch; color:var(--ink-2); line-height:1.55}
.feat{display:grid; gap:18px}
.feat__card{background:#fff; border-radius:var(--radius); padding:28px; box-shadow:0 10px 0 rgba(14,42,71,.08); border:2px solid rgba(14,42,71,.08); transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out)}
.feat__card:hover{transform:translateY(-6px); box-shadow:0 16px 0 rgba(14,42,71,.10)}
.feat__card svg{width:52px; height:52px; margin-bottom:14px}
.feat__card h3{font-family:var(--font-display); font-weight:400; font-size:28px; margin-bottom:8px; letter-spacing:.01em}
.feat__card p{color:var(--ink-2); font-size:16px; line-height:1.5}
@media (min-width:800px){ .game__head{grid-template-columns:1fr 1fr; align-items:end} .feat{grid-template-columns:repeat(3,1fr); gap:24px} }

.grow{margin-top:clamp(56px,8vw,110px); display:grid; grid-template-columns:repeat(3,1fr); align-items:end; gap:12px; text-align:center}
.grow img{margin-inline:auto; width:var(--s); height:auto; animation:bob var(--bd,5s) ease-in-out infinite}
.grow figcaption{margin-top:14px; font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--mute)}
.grow figcaption b{display:block; font-family:var(--font-display); font-weight:400; font-size:22px; letter-spacing:.01em; color:var(--ink); text-transform:none}

/* ---- gameplay section ---- */
.play{background:var(--ink); color:var(--cream)}
.play__grid{display:grid; gap:40px; align-items:center}
.play__title{font-size:clamp(44px,6.5vw,96px)}
.play__p{color:rgba(255,246,232,.78); font-size:clamp(16px,1.25vw,19px); line-height:1.6; max-width:44ch; margin-top:18px}
.play__phone{justify-self:center}
.play__phone .phone{--w:min(300px, 72vw)}
.shots{display:flex; gap:18px; margin-top:clamp(40px,6vw,80px); padding:30px 10px 40px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.shots::-webkit-scrollbar{display:none}
.shots .phone{--w:150px; scroll-snap-align:center; transform:rotate(var(--r,0deg)) translateY(var(--ty,0))}
@media (min-width:900px){ .play__grid{grid-template-columns:5fr 7fr} .shots{justify-content:center; overflow:visible} }

/* ---- download ---- */
.dl{color:var(--cream); text-align:center; position:relative; overflow:hidden}
.dl__title{font-size:clamp(52px,9vw,140px)}
.dl__p{margin:18px auto 30px; max-width:40ch; font-size:clamp(16px,1.3vw,20px); font-weight:700; opacity:.9}
.dl .stores{justify-content:center}
.dl [data-reveal] .stores{justify-content:center}
.dl__meta{margin-top:22px; font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; opacity:.85}
.dl__art{position:absolute; width:clamp(160px,22vw,340px); opacity:.55; pointer-events:none; filter:blur(0)}
.dl__art--l{left:-4%; bottom:-6%; transform:rotate(14deg)}
.dl__art--r{right:-5%; top:-8%; transform:rotate(-18deg)}

.gf{background:var(--cream); color:var(--mute)}

/* phone: keep the counter and hint outside the stage, smaller snacks */
@media (max-width:640px){
  .stage{margin-top:56px}
  .stage__count{top:-52px; right:0; font-size:19px}
  .snack{width:clamp(46px, 13%, 60px)}
}

/* ---- orbits: edibles circle each Snappy, driven by scroll ---- */
.orbits{margin-top:clamp(56px,8vw,110px); display:grid; gap:40px; justify-items:center; align-items:end}
.orbit{position:relative; width:var(--size); aspect-ratio:1/1; margin:0}
.orbit__ring{position:absolute; inset:0; z-index:2; transform:rotate(var(--a,0deg)); will-change:transform}
.orbit__item{position:absolute; left:50%; top:50%; width:var(--iw); aspect-ratio:1/1; margin:calc(var(--iw)/-2) 0 0 calc(var(--iw)/-2);
  transform:rotate(calc(var(--i)*360deg/var(--n))) translate(calc(var(--size)*.44)) rotate(calc(-1*var(--i)*360deg/var(--n) - var(--a,0deg)))}
.orbit__item svg{width:100%; height:100%; overflow:visible; filter:drop-shadow(0 6px 8px rgba(14,42,71,.18))}
.orbit__snappy{position:absolute; left:50%; top:50%; z-index:1; width:var(--snap); height:auto; translate:-50% -50%; animation:bob 5.4s ease-in-out infinite}
.orbit figcaption{position:absolute; left:50%; top:100%; transform:translateX(-50%); margin-top:8px; white-space:nowrap; text-align:center; font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--mute)}
.orbit figcaption b{display:block; font-family:var(--font-display); font-weight:400; font-size:22px; letter-spacing:.01em; color:var(--ink); text-transform:none}
.orbits::after{content:""; grid-column:1/-1; height:40px}
@media (min-width:900px){ .orbits{grid-template-columns:repeat(3,auto); gap:clamp(24px,4vw,64px); justify-content:center} }
.shots .phone{will-change:transform}

/* word wrappers must leave room for the 3D text shadow */
.h-3d .w,.h-ink .w{padding-bottom:.2em; margin-bottom:-.2em}