/* Markhor Meadow website v2: bright storybook valley. Fredoka (the game's face) throughout. */
@font-face{font-family:"Fredoka";src:url(/assets/fonts/fredoka-regular.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Fredoka";src:url(/assets/fonts/fredoka-semibold.woff) format("woff");font-weight:600;font-display:swap}
@font-face{font-family:"Fredoka";src:url(/assets/fonts/fredoka-bold.woff) format("woff");font-weight:700;font-display:swap}

:root{
  --sky-1:#4fb8ff;--sky-2:#8fd8ff;--sky-3:#dff5ff;--sky-ink:#1d6fb3;
  --grass-1:#7fd85a;--grass-2:#5cc44a;--grass-3:#3aa244;--grass-4:#25803a;
  --river-1:#56c8f5;--river-2:#2ea3e0;
  --cream:#fffaf0;--paper:#fff3d6;--paper-2:#ffe9b8;
  --honey:#ffc93c;--honey-2:#f5a623;--honey-edge:#c97c0a;
  --wood:#c98446;--wood-2:#9a5b2a;
  --pink:#ff7fb2;--pink-edge:#d94d87;--coral:#ff8a65;--lilac:#b9a6ff;--lilac-2:#8f78f2;--mint:#5ee0c3;
  --ink:#1f3d2b;--ink-2:#3f5e4b;--ink-3:#56705f;
  --line:rgba(31,61,43,.14);
  --r-s:12px;--r-m:20px;--r-l:32px;--r-xl:44px;
  --shadow:0 18px 40px -18px rgba(31,61,43,.35);
  --shadow-s:0 8px 20px -10px rgba(31,61,43,.35);
  --wrap:1180px;--gutter:clamp(16px,4vw,32px);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font:400 1.0625rem/1.6 "Fredoka",ui-rounded,"SF Pro Rounded",system-ui,sans-serif;color:var(--ink);background:var(--cream);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video,svg{display:block;max-width:100%}
img,video{height:auto}
a{color:var(--sky-ink);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--lilac-2)}
h1,h2,h3,h4{font-weight:600;line-height:1.12;margin:0 0 .45em;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(2.3rem,6vw,4.2rem);font-weight:700}
h2{font-size:clamp(1.9rem,4.4vw,3.1rem);font-weight:700}
h3{font-size:clamp(1.25rem,2.2vw,1.5rem)}
p{margin:0 0 1em;text-wrap:pretty}
strong{font-weight:600}
:focus-visible{outline:4px solid var(--lilac-2);outline-offset:3px;border-radius:10px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:12px}
.skip:focus{top:12px}
.wrap{width:min(100% - 2*var(--gutter),var(--wrap));margin-inline:auto}
.narrow{width:min(100% - 2*var(--gutter),780px);margin-inline:auto}

/* ---------- buttons: game "sticker" buttons that press down ---------- */
.btn{--bg:var(--grass-2);--edge:var(--grass-4);--fg:#fff;display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:52px;padding:.55em 1.3em;border:0;border-radius:999px;background:var(--bg);color:var(--fg);font:600 1.08rem/1 "Fredoka",sans-serif;text-decoration:none;cursor:pointer;box-shadow:0 5px 0 var(--edge),0 12px 22px -10px rgba(0,0,0,.35),inset 0 2px 0 rgba(255,255,255,.35);transition:transform .15s var(--ease-spring),box-shadow .15s;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none}
.btn:hover{color:var(--fg);transform:translateY(-2px);box-shadow:0 7px 0 var(--edge),0 16px 24px -10px rgba(0,0,0,.35),inset 0 2px 0 rgba(255,255,255,.35)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--edge),0 4px 10px -6px rgba(0,0,0,.35),inset 0 2px 0 rgba(255,255,255,.25)}
.btn svg,.btn img{width:1.25em;height:1.25em;flex:none}
.btn.honey{--bg:var(--honey);--edge:var(--honey-edge);--fg:#4a2e05}
.btn.pink{--bg:var(--pink);--edge:var(--pink-edge)}
.btn.sky{--bg:var(--sky-1);--edge:#2477c4}
.btn.cream{--bg:var(--cream);--edge:#d8c6a0;--fg:var(--ink)}
.btn.small{min-height:42px;font-size:.98rem;padding:.45em 1.05em}
.btn[aria-disabled=true]{filter:saturate(.6);cursor:default}
.link-arrow{font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:.35em}
.link-arrow::after{content:"→";transition:transform .2s var(--ease-spring)}
.link-arrow:hover::after{transform:translateX(4px)}

/* ---------- App Store badge (official artwork, never altered or animated) ---------- */
.store{display:inline-flex;flex-direction:column;align-items:flex-start;gap:8px;margin:0}
.store .badge{display:block;padding:calc(var(--bh,54px)/4) 0 0;line-height:0}
.store .badge img{height:var(--bh,54px);width:auto}
.store-note{display:inline-flex;align-items:center;gap:.45em;font:600 .95rem/1.2 "Fredoka",sans-serif;color:#4a2e05;background:var(--honey);border-radius:999px;padding:.38em .9em;box-shadow:0 3px 0 var(--honey-edge)}
.store-note .dot{width:.55em;height:.55em;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.45)}
.store.is-soon .badge{cursor:default}
.store.center{align-items:center}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;padding:12px 0;pointer-events:none}
.site-header .bar{pointer-events:auto;display:flex;align-items:center;gap:14px;background:rgba(255,250,240,.92);backdrop-filter:blur(10px) saturate(1.4);-webkit-backdrop-filter:blur(10px) saturate(1.4);border:2px solid #fff;border-radius:999px;padding:7px 8px 7px 10px;box-shadow:var(--shadow-s)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:700 1.18rem/1 "Fredoka",sans-serif;flex:none}
.brand img{width:42px;height:42px;border-radius:12px;box-shadow:0 3px 0 rgba(0,0,0,.12)}
.brand:hover{color:var(--ink)}
.brand:hover img{animation:wiggle .5s var(--ease-spring)}
.nav{display:flex;gap:2px;margin-left:auto}
.nav a{padding:.5em .85em;border-radius:999px;color:var(--ink);text-decoration:none;font-weight:600;font-size:1rem;transition:background .2s,color .2s}
.nav a:hover{background:var(--paper)}
.nav a[aria-current=page]{background:var(--grass-1);color:#fff;box-shadow:0 3px 0 var(--grass-3)}
.head-tools{display:flex;align-items:center;gap:8px;flex:none}
.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:0;background:var(--paper);color:var(--ink);cursor:pointer;box-shadow:0 3px 0 #e2cf9f;transition:transform .15s var(--ease-spring)}
.icon-btn:active{transform:translateY(3px);box-shadow:none}
.icon-btn svg{width:22px;height:22px}
.sound-btn[aria-pressed=true]{background:var(--mint);box-shadow:0 3px 0 #2fae93}
.menu{display:none;position:relative}
.menu summary{list-style:none}
.menu summary::-webkit-details-marker{display:none}
.menu .panel-pop{position:absolute;right:0;top:calc(100% + 12px);width:min(86vw,320px);background:var(--cream);border:3px solid #fff;border-radius:var(--r-l);box-shadow:var(--shadow);padding:12px}
.menu .panel-pop a{display:block;padding:.7em .9em;border-radius:14px;color:var(--ink);text-decoration:none;font-weight:600}
.menu .panel-pop a:hover,.menu .panel-pop a[aria-current=page]{background:var(--paper)}
@media (max-width:980px){.nav{display:none}.menu{display:block}.head-tools{margin-left:auto}}


/* ---------- section scaffolding: each band sits on its own "ground" ---------- */
.band{position:relative;padding:clamp(64px,10vw,120px) 0}
.band.sky{background:linear-gradient(180deg,var(--sky-3),#f2fbff)}
.band.meadow{background:radial-gradient(1200px 500px at 15% 0%,#a8ec7c,transparent 60%),linear-gradient(180deg,var(--grass-1),var(--grass-2));color:#10361b}
.band.river{background:linear-gradient(180deg,var(--river-1),var(--river-2));color:#fff}
.band.honey{background:radial-gradient(900px 400px at 85% 10%,#fff1c2,transparent 60%),linear-gradient(180deg,#ffe7a6,var(--honey))}
.band.paper{background:var(--paper)}
.band.cream{background:var(--cream)}
.band.lilac{background:linear-gradient(180deg,#e9e3ff,#d4c9ff)}
.band.pinkish{background:linear-gradient(180deg,#ffe5ef,#ffd1e2)}
.band.snow{background:linear-gradient(180deg,#d9ecff,#f4f9ff)}
.band .wrap{position:relative;z-index:2}
.edge{position:absolute;left:0;right:0;width:100%;height:clamp(40px,6vw,90px);z-index:1;pointer-events:none}
.edge.top{top:-1px;transform:translateY(-99%)}
.edge.bottom{bottom:-1px}
.pattern-dots{background-image:radial-gradient(rgba(255,255,255,.35) 2px,transparent 2.5px);background-size:28px 28px}

.kicker{display:inline-flex;align-items:center;gap:.5em;font:600 .95rem/1 "Fredoka",sans-serif;text-transform:none;letter-spacing:.02em;color:var(--ink);background:#fff;border-radius:999px;padding:.5em 1em .5em .6em;box-shadow:0 3px 0 rgba(0,0,0,.08);margin-bottom:16px}
.kicker img{width:26px;height:26px}
.section-head{max-width:760px;margin:0 auto clamp(32px,5vw,56px);text-align:center}
.section-head p{font-size:1.15rem;color:inherit;opacity:.88}
.sign{display:inline-block;position:relative;background:linear-gradient(#d99556,#b8723a);color:#fff8e6;border-radius:18px;padding:.32em .9em .4em;box-shadow:inset 0 -5px 0 rgba(0,0,0,.18),0 6px 0 #7d461c,0 18px 30px -16px rgba(0,0,0,.5);text-shadow:0 2px 0 rgba(0,0,0,.18);transform:rotate(-1.5deg)}
.sign::before,.sign::after{content:"";position:absolute;top:50%;width:10px;height:10px;border-radius:50%;background:#7d461c;box-shadow:inset 0 2px 0 rgba(255,255,255,.3)}
.sign::before{left:10px}.sign::after{right:10px}
.panel{background:#fff;border-radius:var(--r-l);box-shadow:var(--shadow);padding:clamp(20px,3vw,32px)}
.panel.paper{background:var(--paper);border:3px solid #fff}
.reveal{opacity:0;transform:translateY(28px) scale(.98);transition:opacity .7s ease,transform .8s var(--ease-spring)}
.reveal.in{opacity:1;transform:none}
html.no-js .reveal,html:not(.js) .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- HERO: the living valley ---------- */
.hero{--t:.45;--night:0;--dusk:0;position:relative;min-height:clamp(640px,96svh,940px);margin-top:-80px;padding-top:80px;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,var(--sky-top,#46b4ff) 0%,var(--sky-mid,#8ed8ff) 48%,var(--sky-low,#d9f4ff) 70%)}
.hero .stars{position:absolute;inset:0 0 40% 0;opacity:var(--night);background-image:radial-gradient(2px 2px at 12% 18%,#fff 50%,transparent 51%),radial-gradient(1.6px 1.6px at 28% 8%,#fff 50%,transparent 51%),radial-gradient(2px 2px at 44% 22%,#fff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 61% 12%,#fff 50%,transparent 51%),radial-gradient(2.2px 2.2px at 77% 26%,#fff 50%,transparent 51%),radial-gradient(1.6px 1.6px at 90% 9%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 6% 34%,#fff 50%,transparent 51%),radial-gradient(1.8px 1.8px at 53% 36%,#fff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 36% 40%,#fff 50%,transparent 51%),radial-gradient(1.7px 1.7px at 84% 40%,#fff 50%,transparent 51%);transition:opacity .4s}
.hero .orb{position:absolute;left:var(--orb-x,70%);top:var(--orb-y,14%);width:clamp(70px,9vw,120px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 40% 38%,#fffbe0,#ffe066 55%,#ffc93c);box-shadow:0 0 0 18px rgba(255,236,150,.35),0 0 80px 40px rgba(255,225,120,.45);transition:background .4s,box-shadow .4s;z-index:0}
.hero.is-night .orb{background:radial-gradient(circle at 60% 40%,#fbfbff,#dfe4ff 60%,#c4cbf5);box-shadow:0 0 0 14px rgba(220,226,255,.18),0 0 70px 30px rgba(200,210,255,.3)}
.hero .clouds{position:absolute;inset:0;pointer-events:none;z-index:1}
.cloud{position:absolute;width:var(--w,180px);height:calc(var(--w,180px)*.42);background:#fff;border-radius:999px;opacity:calc(.95 - var(--night)*.55);filter:drop-shadow(0 10px 0 rgba(160,210,240,.35));animation:drift var(--d,90s) linear infinite;animation-delay:var(--delay,0s)}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.cloud::before{width:55%;height:120%;left:14%;bottom:30%}
.cloud::after{width:40%;height:95%;right:14%;bottom:38%}
@keyframes drift{from{transform:translateX(-30vw)}to{transform:translateX(130vw)}}
.hero .land{position:absolute;inset:auto 0 0 0;height:62%;z-index:2;pointer-events:none;filter:brightness(calc(1 - var(--night)*.5)) saturate(calc(1 + var(--dusk)*.25)) hue-rotate(calc(var(--night)*18deg));transition:filter .4s}
.hero .land svg{position:absolute;bottom:0;left:50%;width:max(100%,1500px);height:auto;transform:translate3d(calc(-50% + var(--px,0)*var(--depth,0)*1px),calc(var(--py,0)*var(--depth,0)*.5px),0);will-change:transform}
.hero .village{position:absolute;inset:auto 0 0 0;height:62%;z-index:3;pointer-events:none;filter:brightness(calc(1 - var(--night)*.45)) hue-rotate(calc(var(--night)*12deg))}
.hero .village .house{position:absolute;bottom:var(--b);left:var(--l);width:var(--w);transform:translate3d(calc(var(--px,0)*.9px),0,0)}
.hero .village .house::after{content:"";position:absolute;left:30%;top:42%;width:40%;height:24%;border-radius:50%;background:radial-gradient(#ffd66b,rgba(255,200,80,0) 70%);opacity:calc(var(--night)*1.1);mix-blend-mode:screen}
.hero .zarif{position:absolute;z-index:4;top:16%;left:0;width:clamp(150px,20vw,280px);pointer-events:auto;cursor:pointer;border:0;padding:0;background:none;animation:fly 26s linear infinite;animation-delay:-6s}
.hero .zarif img{width:100%;animation:flap 1.6s ease-in-out infinite;filter:drop-shadow(0 16px 12px rgba(30,80,140,.25))}
@keyframes fly{0%{transform:translate(-30vw,40px) rotate(-4deg)}50%{transform:translate(55vw,-30px) rotate(3deg)}100%{transform:translate(130vw,30px) rotate(-3deg)}}
@keyframes flap{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(-2deg)}}
.hero-inner{position:relative;z-index:6;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:24px;align-items:end;min-height:inherit;padding-bottom:clamp(90px,10vw,130px)}
.hero-copy{padding-top:clamp(36px,8vh,90px);align-self:start}
.wordmark{margin:0 0 6px;font:700 clamp(3rem,8.2vw,6.4rem)/.92 "Fredoka",sans-serif;color:#fff6dc;letter-spacing:-.015em;-webkit-text-stroke:clamp(5px,.9vw,9px) #7a4518;paint-order:stroke fill;text-shadow:0 6px 0 #5b3110,0 18px 30px rgba(40,20,5,.35)}
.wordmark span{display:block}
.wordmark span:last-child{margin-left:.55em}
.tagline{display:inline-block;font:700 clamp(1.35rem,2.8vw,2rem)/1 "Fredoka",sans-serif;color:#fff;background:var(--pink);padding:.35em .8em .42em;border-radius:999px;transform:rotate(-3deg);box-shadow:0 5px 0 var(--pink-edge),0 16px 30px -12px rgba(150,20,80,.55);margin:6px 0 18px}
.hero-lede{font-size:clamp(1.08rem,1.6vw,1.28rem);max-width:30em;color:#0f3352;background:rgba(255,255,255,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:var(--r-m);padding:14px 18px;box-shadow:var(--shadow-s)}
.hero.is-night .hero-lede{background:rgba(255,255,255,.9)}
.hero-cta{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 22px;margin-top:6px}
.hero-cta .store{--bh:58px}
.hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.hero-chips li{display:inline-flex;align-items:center;gap:6px;background:#fff;border-radius:999px;padding:.32em .8em .32em .4em;font-weight:600;font-size:.95rem;box-shadow:0 3px 0 rgba(0,0,0,.08)}
.hero-chips img{width:24px;height:24px}
.hero-cast{position:relative;align-self:end;justify-self:center;width:min(100%,600px);margin-bottom:calc(-1*clamp(90px,10vw,130px));z-index:5}
.hero-cast picture img{width:100%;filter:drop-shadow(0 20px 26px rgba(20,60,30,.35));transform-origin:50% 100%}
.hero-cast.bounce picture img{animation:squash .6s var(--ease-spring)}
@keyframes squash{0%{transform:scale(1,1)}30%{transform:scale(1.04,.95)}60%{transform:scale(.98,1.03)}100%{transform:scale(1)}}
.spot{position:absolute;width:var(--s,22%);aspect-ratio:1;left:var(--x);top:var(--y);border-radius:50%;border:0;background:transparent;cursor:pointer;transform:translate(-50%,-50%);-webkit-tap-highlight-color:transparent}
.spot:focus-visible{outline-offset:-6px}
.spot::after{content:"";position:absolute;inset:38%;border-radius:50%;background:rgba(255,255,255,.0);box-shadow:0 0 0 0 rgba(255,255,255,.6);animation:ping 2.6s ease-out infinite;animation-delay:var(--pd,0s)}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,255,255,.75)}70%,100%{box-shadow:0 0 0 22px rgba(255,255,255,0)}}
.bubble{position:absolute;z-index:8;min-width:160px;max-width:min(270px,70vw);background:#fff;color:var(--ink);border-radius:22px;padding:12px 16px;font-weight:600;font-size:1rem;line-height:1.3;box-shadow:0 6px 0 rgba(0,0,0,.08),var(--shadow);transform-origin:20% 120%;animation:pop .45s var(--ease-spring)}
.bubble::after{content:"";position:absolute;left:26px;bottom:-12px;border:12px solid transparent;border-top-color:#fff;border-bottom:0}
.bubble small{display:block;color:var(--ink-3);font-weight:600;font-size:.82rem;margin-bottom:2px}
.bubble img.emote{position:absolute;right:-18px;top:-22px;width:44px;height:44px}
@keyframes pop{0%{opacity:0;transform:scale(.4) translateY(10px)}100%{opacity:1;transform:none}}
html:not(.js) .js-only{display:none!important}
@media (max-width:900px){
  .hero{min-height:auto}
  .hero-inner{grid-template-columns:1fr;gap:0;padding-bottom:0}
  .hero-copy{padding-top:24px;text-align:left}
  .hero-cast{width:min(100%,460px);margin:10px auto -2px}
  .hero .land,.hero .village{height:46%}
}
@media (max-width:520px){.hero-cta .store{--bh:50px}.hero-chips li{font-size:.88rem}}

/* ---------- quick facts strip under hero ---------- */
.facts-strip{position:relative;z-index:6;margin-top:-34px}
.facts-strip ul{list-style:none;margin:0 auto;padding:14px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;background:#fff;border-radius:var(--r-l);box-shadow:var(--shadow);max-width:var(--wrap)}
.facts-strip li{display:flex;gap:12px;align-items:center;padding:8px 10px;border-radius:var(--r-m);background:var(--cream)}
.facts-strip img{width:46px;height:46px;flex:none}
.facts-strip strong{display:block;font-size:1.05rem;line-height:1.2}
.facts-strip span{font-size:.92rem;color:var(--ink-2);line-height:1.25;display:block}
@media (max-width:900px){.facts-strip ul{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.facts-strip ul{grid-template-columns:1fr}}

/* ---------- "what is" answer block ---------- */
.answer{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,4vw,56px);align-items:center}
.answer .lead{font-size:clamp(1.15rem,1.8vw,1.35rem)}
.answer figure{margin:0;position:relative}
@media (max-width:860px){.answer{grid-template-columns:1fr}}
.polaroid{background:#fff;padding:12px 12px 16px;border-radius:24px;box-shadow:var(--shadow);transform:rotate(var(--rot,2deg));transition:transform .4s var(--ease-spring)}
.polaroid:hover{transform:rotate(0) scale(1.02)}
.polaroid img{border-radius:16px;width:100%}
.polaroid figcaption{font-weight:600;text-align:center;margin-top:10px;color:var(--ink-2)}
.sticker{position:absolute;z-index:3;width:var(--sz,74px);transform:rotate(var(--rot,-10deg));filter:drop-shadow(0 6px 6px rgba(0,0,0,.18));animation:bob 4s ease-in-out infinite;animation-delay:var(--bd,0s)}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -10px}}
@media (prefers-reduced-motion:reduce){.sticker,.cloud,.hero .zarif,.hero .zarif img,.spot::after{animation:none}.hero .zarif{transform:translate(58vw,0)}}

/* ---------- phones with real gameplay ---------- */
.phones{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,3vw,36px)}
.phone{--rot:0deg;margin:0;transform:rotate(var(--rot));transition:transform .5s var(--ease-spring)}
.phone:hover{transform:rotate(0) translateY(-6px)}
.phone .shell{position:relative;border-radius:clamp(26px,3.6vw,42px);padding:clamp(9px,1.2vw,14px);background:linear-gradient(145deg,#2b3a33,#11181a);box-shadow:0 30px 50px -24px rgba(10,40,20,.6),inset 0 0 0 2px rgba(255,255,255,.12)}
.phone .screen{position:relative;border-radius:clamp(18px,2.6vw,30px);overflow:hidden;aspect-ratio:890/442;background:#cfe9b9}
.phone video,.phone .screen>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phone figcaption{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:14px;font-weight:600;font-size:1.05rem}
.phone figcaption img{width:30px;height:30px}
.phone .play{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;border:0;background:rgba(255,255,255,.92);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-s);opacity:0;transition:opacity .2s}
.phone.paused .play{opacity:1}
.phone .play svg{width:26px;height:26px;margin-left:4px;color:var(--ink)}
@media (max-width:760px){.phones{grid-template-columns:1fr}}

/* ---------- feature rows ---------- */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;margin-bottom:clamp(56px,8vw,96px)}
.feature:last-child{margin-bottom:0}
.feature.flip .f-media{order:2}
.feature h3{font-size:clamp(1.7rem,3.2vw,2.4rem);font-weight:700}
.feature ul{padding:0;margin:0 0 1em;list-style:none}
.feature li{position:relative;padding-left:40px;margin-bottom:.65em}
.feature li img{position:absolute;left:0;top:-2px;width:30px;height:30px}
.f-media{position:relative}
@media (max-width:860px){.feature{grid-template-columns:1fr}.feature.flip .f-media{order:0}}

/* ---------- counters ---------- */
.counters{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.counters li{background:#fff;border-radius:var(--r-l);padding:22px 18px 18px;text-align:center;box-shadow:0 6px 0 rgba(0,0,0,.06),var(--shadow-s);position:relative}
.counters img{width:58px;height:58px;margin:0 auto 6px}
.counters .num{display:block;font:700 clamp(2.4rem,5vw,3.4rem)/1 "Fredoka",sans-serif;color:var(--grass-3);font-variant-numeric:tabular-nums}
.counters .lbl{display:block;font-weight:600;margin-top:6px;line-height:1.25}
.counters .sub{display:block;font-size:.88rem;color:var(--ink-3);margin-top:4px;line-height:1.3}
@media (max-width:900px){.counters{grid-template-columns:repeat(2,1fr)}}

/* ---------- cast switcher ---------- */
.cast-stage{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,4vw,48px);align-items:center;background:rgba(255,255,255,.65);border:3px solid #fff;border-radius:var(--r-xl);padding:clamp(18px,3vw,36px);box-shadow:var(--shadow)}
.cast-figure{position:relative;display:grid;place-items:end center;min-height:clamp(260px,34vw,400px);background:radial-gradient(closest-side,#fff 0%,rgba(255,255,255,0) 100%),radial-gradient(circle at 50% 100%,var(--glow,#ffe8a8),transparent 70%);border-radius:var(--r-l)}
.cast-figure img{max-height:clamp(240px,32vw,380px);width:auto;filter:drop-shadow(0 18px 18px rgba(30,60,40,.25));transform-origin:50% 100%}
.cast-figure img.pop{animation:hop .55s var(--ease-spring)}
@keyframes hop{0%{transform:translateY(30px) scale(.85,1.1);opacity:0}60%{transform:translateY(-10px) scale(1.04,.96);opacity:1}100%{transform:none}}
.cast-card h3{font-size:clamp(2rem,4vw,2.8rem);font-weight:700;margin-bottom:.1em}
.cast-card .role{font-weight:600;color:var(--grass-3);margin-bottom:.8em;font-size:1.1rem}
.say{position:relative;background:#fff;border-radius:24px;padding:16px 20px;font-size:1.18rem;font-weight:600;line-height:1.35;box-shadow:0 5px 0 rgba(0,0,0,.06);margin:0 0 16px}
.say::before{content:"";position:absolute;left:-12px;top:22px;border:12px solid transparent;border-right-color:#fff;border-left:0}
.meta-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;padding:0;list-style:none}
.meta-chips li{display:inline-flex;align-items:center;gap:6px;background:var(--paper);border-radius:999px;padding:.3em .8em .3em .35em;font-weight:600;font-size:.95rem}
.meta-chips img{width:26px;height:26px}
.cast-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:22px;padding:0;list-style:none}
.cast-row a,.cast-row button{display:grid;place-items:center;width:clamp(58px,7vw,76px);aspect-ratio:1;border-radius:50%;background:#fff;border:4px solid #fff;box-shadow:0 4px 0 rgba(0,0,0,.08);overflow:hidden;cursor:pointer;padding:0;transition:transform .25s var(--ease-spring),border-color .2s}
.cast-row img{width:88%;height:88%;object-fit:contain;object-position:50% 20%}
.cast-row a:hover,.cast-row button:hover{transform:translateY(-4px) rotate(-4deg)}
.cast-row [aria-current=true],.cast-row [aria-selected=true]{border-color:var(--honey);transform:translateY(-4px) scale(1.08)}
@media (max-width:820px){.cast-stage{grid-template-columns:1fr}.say::before{display:none}}

/* ---------- toys (Remotion players) ---------- */
.toy{background:#fff;border-radius:var(--r-xl);padding:clamp(12px,2vw,20px);box-shadow:var(--shadow);border:4px solid #fff}
.toy-stage{position:relative;border-radius:calc(var(--r-xl) - 14px);overflow:hidden;aspect-ratio:16/9;background:#bfe9ff}
.toy-stage>img,.toy-stage>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.toy-stage .player-host{position:absolute;inset:0}
.toy-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:14px 6px 4px}
.toy-controls .grow{flex:1 1 220px}
.toy-controls .slider{width:100%}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.chip{display:inline-flex;align-items:center;gap:6px;border:0;background:var(--paper);color:var(--ink);border-radius:999px;padding:.4em .9em .4em .45em;font:600 .95rem/1.1 "Fredoka",sans-serif;cursor:pointer;box-shadow:0 3px 0 #e2cf9f;transition:transform .15s var(--ease-spring)}
.chip img{width:28px;height:28px;object-fit:contain}
.chip[aria-pressed=true]{background:var(--grass-2);color:#fff;box-shadow:0 3px 0 var(--grass-4)}
.chip:active{transform:translateY(3px);box-shadow:none}
.toy-note{font-size:.95rem;color:var(--ink-3);margin:8px 6px 0}
.who{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.who li{display:flex;align-items:center;gap:10px;background:var(--cream);border-radius:16px;padding:6px 10px 6px 6px;font-size:.95rem;line-height:1.25}
.who img{width:40px;height:40px;object-fit:contain;flex:none}
.who b{display:block;font-weight:600}

/* ---------- fishing mini-game ---------- */
@keyframes shimmer{to{transform:translateX(30px)}}
.bobber{position:absolute;left:var(--bx,50%);top:var(--by,55%);width:34px;height:44px;transform:translate(-50%,-50%);transition:left .6s cubic-bezier(.2,.8,.3,1.2),top .6s cubic-bezier(.2,.8,.3,1.2)}
.bobber svg{width:100%;height:100%}
@keyframes floaty{50%{transform:translate(-50%,-44%)}}
@keyframes dip{50%{transform:translate(-50%,-10%)}}

/* ---------- village map ---------- */
.map{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:16/10;background:radial-gradient(ellipse 60% 40% at 50% 60%,#9be36f,#6fcf52 70%,#58b947);border:4px solid #fff;box-shadow:var(--shadow)}
.map .river-path{position:absolute;inset:0;width:100%;height:100%}
.map .pin{position:absolute;left:var(--x);top:var(--y);width:var(--w,15%);transform:translate(-50%,-80%);border:0;background:none;padding:0;cursor:pointer;transition:transform .3s var(--ease-spring)}
.map .pin img{width:100%;filter:drop-shadow(0 10px 8px rgba(20,60,20,.3))}
.map .pin:hover,.map .pin[aria-pressed=true]{transform:translate(-50%,-86%) scale(1.08)}
.map .pin .tag{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);white-space:nowrap;background:#fff;border-radius:999px;padding:.15em .6em;font-weight:600;font-size:clamp(.62rem,1.1vw,.85rem);box-shadow:0 2px 0 rgba(0,0,0,.08)}
.map-card{margin-top:16px}
@media (max-width:640px){.map .pin .tag{display:none}}

/* ---------- cards & grids ---------- */
.grid{display:grid;gap:clamp(14px,2vw,22px)}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.grid.c3,.grid.c4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid.c2,.grid.c3,.grid.c4{grid-template-columns:1fr}}
.card{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:var(--r-l);padding:20px;box-shadow:0 6px 0 rgba(0,0,0,.05),var(--shadow-s);color:var(--ink);text-decoration:none;transition:transform .3s var(--ease-spring),box-shadow .3s}
a.card:hover{transform:translateY(-6px) rotate(-.6deg);color:var(--ink);box-shadow:0 10px 0 rgba(0,0,0,.05),var(--shadow)}
.card .card-art{display:grid;place-items:end center;height:170px;margin:-6px -6px 12px;border-radius:calc(var(--r-l) - 8px);background:var(--bg,var(--paper))}
.card .card-art img{max-height:160px;width:auto}
.card h3{margin-bottom:.25em}
.card p{margin:0 0 .6em;color:var(--ink-2)}
.card .more{margin-top:auto;font-weight:600;color:var(--sky-ink)}
.card .tagline-s{font-weight:600;color:var(--grass-3);font-size:.95rem;margin-bottom:.4em}
.icon-card{display:flex;gap:14px;align-items:flex-start;background:#fff;border-radius:var(--r-m);padding:16px;box-shadow:0 4px 0 rgba(0,0,0,.05)}
.icon-card img{width:52px;height:52px;flex:none}
.icon-card h3{font-size:1.15rem;margin-bottom:.2em}
.icon-card p{margin:0;color:var(--ink-2);font-size:1rem}

/* ---------- page heads for subpages ---------- */
.page-head{position:relative;margin-top:-80px;padding:calc(80px + clamp(36px,6vw,72px)) 0 clamp(80px,10vw,120px);background:linear-gradient(180deg,var(--ph-1,#5cc0ff),var(--ph-2,#bfeaff));overflow:hidden}
.page-head .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:24px;align-items:center}
.page-head h1{color:#fff;text-shadow:0 4px 0 rgba(0,0,0,.14);font-size:clamp(2.2rem,5.4vw,3.8rem)}
.page-head .intro{font-size:clamp(1.1rem,1.7vw,1.3rem);color:#fff;max-width:36em;text-shadow:0 1px 0 rgba(0,0,0,.1)}
.page-head .intro a{color:#fff}
.page-head .ph-art{justify-self:center;position:relative}
.page-head .ph-art img{max-height:300px;width:auto;filter:drop-shadow(0 18px 20px rgba(0,0,0,.2));animation:bob 5s ease-in-out infinite}
.page-head.meadow{--ph-1:#6fd34f;--ph-2:#a7ea7d}
.page-head.honey{--ph-1:#ffb938;--ph-2:#ffd978}
.page-head.honey h1,.page-head.honey .intro,.page-head.honey .crumbs a,.page-head.honey .crumbs{color:#4a2e05;text-shadow:none}
.page-head.river{--ph-1:#2ea3e0;--ph-2:#69d0f7}
.page-head.lilac{--ph-1:#9a85f5;--ph-2:#c6b9ff}
.page-head.pink{--ph-1:#ff7fb2;--ph-2:#ffb3cf}
.page-head.snow{--ph-1:#7cb7ef;--ph-2:#cfe6ff}
.page-head .cloud{--w:160px;top:var(--ct,30%);opacity:.75}
@media (max-width:820px){.page-head .wrap{grid-template-columns:1fr}.page-head .ph-art img{max-height:220px}}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 14px;padding:0;font-weight:600;font-size:.95rem;color:rgba(255,255,255,.92)}
.crumbs li+li::before{content:"›";margin-right:6px;opacity:.8}
.crumbs a{color:#fff;text-decoration:none}
.crumbs a:hover{text-decoration:underline}

/* ---------- prose (guides, blog, legal) ---------- */
.prose{font-size:1.1rem}
.prose h2{font-size:clamp(1.6rem,3vw,2.1rem);margin-top:1.6em}
.prose h3{margin-top:1.3em}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin-bottom:.45em}
.prose figure{margin:1.6em 0}
.prose figure img,.prose figure video{border-radius:var(--r-m);box-shadow:var(--shadow-s);width:100%}
.prose figcaption{font-size:.95rem;color:var(--ink-3);margin-top:8px;text-align:center}
.prose blockquote{margin:1.2em 0;background:#fff;border-radius:22px;padding:14px 20px;font-weight:600;box-shadow:0 4px 0 rgba(0,0,0,.05)}
.prose table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border-radius:var(--r-m);overflow:hidden;box-shadow:0 4px 0 rgba(0,0,0,.05);font-size:1rem;margin:1em 0 1.4em}
.prose th,.prose td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{background:var(--paper);font-weight:600}
.prose tr:last-child td{border-bottom:0}
.tldr{background:var(--paper);border:3px solid #fff;border-radius:var(--r-l);padding:18px 22px;margin:0 0 1.6em;box-shadow:0 4px 0 rgba(0,0,0,.05)}
.tldr strong:first-child{display:block;color:var(--grass-3);margin-bottom:4px}
.meta{color:var(--ink-3);font-size:.95rem}
.steps{counter-reset:s;list-style:none;padding:0!important}
.steps li{counter-increment:s;position:relative;padding-left:48px;margin-bottom:.9em}
.steps li::before{content:counter(s);position:absolute;left:0;top:-3px;width:34px;height:34px;border-radius:50%;background:var(--honey);color:#4a2e05;font-weight:700;display:grid;place-items:center;box-shadow:0 3px 0 var(--honey-edge)}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(24px,4vw,56px);align-items:start}
.aside{position:sticky;top:100px;display:grid;gap:16px}
@media (max-width:900px){.two-col{grid-template-columns:minmax(0,1fr)}.aside{position:static}}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:12px}
.faq details{background:#fff;border-radius:var(--r-m);box-shadow:0 4px 0 rgba(0,0,0,.05);overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:18px 56px 18px 20px;font-weight:600;font-size:1.12rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:16px;top:50%;width:30px;height:30px;margin-top:-15px;border-radius:50%;background:var(--paper);display:grid;place-items:center;font-size:1.3rem;transition:transform .3s var(--ease-spring)}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--honey)}
.faq details>div{padding:0 20px 16px}
.faq details>div p:last-child{margin-bottom:0}

/* ---------- CTA band ---------- */
.cta-band{position:relative;overflow:hidden;text-align:center;padding:clamp(80px,11vw,140px) 0 clamp(70px,9vw,110px);background:radial-gradient(800px 380px at 50% 110%,#ffe7a6,transparent 70%),linear-gradient(180deg,#6ec8ff,#b9e8ff 70%,#e6f7ff)}
.cta-band h2{font-size:clamp(2.2rem,5.6vw,4rem)}
.cta-band p{font-size:1.2rem;max-width:34em;margin-inline:auto}
.cta-band .app-icon{width:clamp(96px,12vw,132px);height:auto;border-radius:28%;margin:0 auto 18px;box-shadow:0 8px 0 rgba(0,0,0,.08),var(--shadow);animation:bob 4s ease-in-out infinite}
.cta-band .store{--bh:62px;margin-top:8px}
.cta-band .cast-peek{position:absolute;bottom:-4px;width:clamp(110px,14vw,190px);pointer-events:none}
.cta-band .cast-peek.l{left:2%}
.cta-band .cast-peek.r{right:2%}
@media (max-width:700px){.cta-band .cast-peek{width:90px;opacity:.9}}

/* ---------- footer ---------- */
.site-footer{position:relative;background:linear-gradient(180deg,#5cc44a,#3aa244);color:#f4ffe9;padding:clamp(70px,9vw,110px) 0 28px}
.site-footer a{color:#fff;text-decoration:none}
.site-footer a:hover{text-decoration:underline;color:#fff}
.foot-grid{display:grid;grid-template-columns:1.3fr repeat(5,1fr);gap:24px}
.foot-grid h2{font-size:1.05rem;margin-bottom:.8em;color:#fff6c8}
.foot-grid ul{list-style:none;padding:0;margin:0}
.foot-grid li{margin-bottom:.5em}
.foot-brand p{max-width:26em;margin:.8em 0 1.1em}
.foot-brand .brand{color:#fff}
.foot-brand .store-note{margin-top:4px}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:40px;padding-top:20px;border-top:2px dashed rgba(255,255,255,.35);font-size:.95rem}
.foot-base p{margin:0}
.x-link{display:inline-flex;align-items:center;gap:8px}
.x-link svg{width:18px;height:18px}
@media (max-width:980px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}

/* ---------- character page ---------- */
.char-hero .ph-art img{max-height:340px}
.lines{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.lines li{display:flex;gap:12px;align-items:flex-start}
.lines .when{flex:none;width:96px;font-weight:600;color:var(--ink-3);font-size:.95rem;padding-top:14px}
.lines .say{margin:0;flex:1;font-size:1.05rem}
@media (max-width:560px){.lines li{flex-direction:column;gap:4px}.lines .when{padding-top:0}}
.schedule{display:flex;height:42px;border-radius:999px;overflow:hidden;box-shadow:inset 0 0 0 3px #fff;margin:10px 0 6px}
.schedule span{display:grid;place-items:center;font-size:.78rem;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden}
.sched-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.9rem;color:var(--ink-2);margin:0;padding:0;list-style:none}
.sched-legend i{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:6px;vertical-align:-1px}

/* ---------- misc ---------- */
.press-assets{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.press-assets figure{margin:0;background:#fff;border-radius:var(--r-m);padding:10px;box-shadow:0 4px 0 rgba(0,0,0,.05)}
.press-assets img{border-radius:12px;width:100%;aspect-ratio:16/10;object-fit:contain;background:var(--cream)}
.press-assets figcaption{font-size:.92rem;padding:8px 4px 2px;display:flex;justify-content:space-between;gap:8px;align-items:center}
.timeline{display:flex;gap:16px;overflow-x:auto;padding:8px 4px 20px;scroll-snap-type:x mandatory;list-style:none;margin:0}
.timeline li{flex:0 0 min(78vw,280px);scroll-snap-align:start;background:#fff;border-radius:var(--r-l);padding:18px;box-shadow:0 5px 0 rgba(0,0,0,.05)}
.timeline .when{display:inline-block;font-weight:700;color:#4a2e05;background:var(--honey);border-radius:999px;padding:.2em .7em;margin-bottom:8px;box-shadow:0 3px 0 var(--honey-edge)}
.post-cards .card-art{height:200px;place-items:center;overflow:hidden}
.post-cards .card-art img{max-height:none;width:100%;height:100%;object-fit:cover}
.notfound{text-align:center;padding:40px 0 100px}
.notfound img{margin:0 auto;max-width:360px;animation:bob 4s ease-in-out infinite}
@keyframes wiggle{0%,100%{transform:rotate(0)}30%{transform:rotate(-10deg)}60%{transform:rotate(8deg)}}
.confetti{position:fixed;pointer-events:none;z-index:90;width:10px;height:14px;border-radius:3px}
.pill{display:inline-block;font-weight:600;font-size:.88rem;background:var(--paper);border-radius:999px;padding:.15em .7em}
.pill.green{background:#dff6cf;color:#1e6b2c}
.center{text-align:center}
.mt{margin-top:clamp(28px,4vw,48px)}

/* ---------- v2 additions ---------- */
.store{gap:calc(var(--bh,54px)/4)}
.store .badge{padding:0}
.hero .land.front{z-index:4}
.hero .land.front svg{--depth:1}
.tap-hint{position:absolute;left:4%;top:2%;z-index:9;display:inline-flex;align-items:center;gap:6px;background:#fff;color:var(--ink);border-radius:999px;padding:.35em .9em .35em .4em;font-weight:600;font-size:.95rem;box-shadow:0 4px 0 rgba(0,0,0,.08),var(--shadow-s);transform:rotate(-6deg);animation:bob 3s ease-in-out infinite;pointer-events:none}
.tap-hint img{width:28px;height:28px}
.spot::after{display:none}
.spot:hover{background:radial-gradient(closest-side,rgba(255,255,255,.28),transparent)}
.polaroid .sticker{position:absolute;width:var(--sz,74px);height:auto;right:-22px;top:-26px;border-radius:0}
.polaroid[data-norot]{transform:none;padding:10px}
.trailer{margin:0 auto;max-width:980px}
.trailer-frame{position:relative;border-radius:var(--r-xl);padding:14px;background:linear-gradient(#d99556,#b8723a);box-shadow:inset 0 -6px 0 rgba(0,0,0,.18),0 10px 0 #7d461c,var(--shadow)}
.trailer-frame video{width:100%;border-radius:calc(var(--r-xl) - 12px);background:#bfe9ff;aspect-ratio:16/9}
.trailer figcaption{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:20px;font-weight:600;color:var(--ink-2)}
.fish-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,56px);align-items:center}
.fish-grid h2{color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.12)}
.fish-grid p{color:#f2fbff}
@media (max-width:860px){.fish-grid{grid-template-columns:1fr}}
@keyframes pulse{to{transform:translateY(-3px) scale(1.06)}}
.map-wrap{display:grid;gap:16px}
.map-card{display:grid;grid-template-columns:160px 1fr;gap:20px;align-items:center}
.map-card .mc-art{display:grid;place-items:center;background:radial-gradient(circle at 50% 70%,#e6f8d6,#fff 70%);border-radius:var(--r-m);height:160px}
.map-card .mc-art img{max-height:150px;width:auto}
.map-card h3{margin-bottom:.2em}
.map-card p{margin-bottom:.6em}
.mc-costs{display:flex;flex-wrap:wrap;gap:6px}
.pill img{display:inline-block;vertical-align:-4px}
@media (max-width:560px){.map-card{grid-template-columns:1fr}.map-card .mc-art{height:130px}}
.guide-links{list-style:none;padding:0;margin:0;display:grid;gap:4px}
.guide-links a{display:flex;align-items:center;gap:8px;padding:.45em .5em;border-radius:12px;text-decoration:none;font-weight:600;color:var(--ink)}
.guide-links a:hover{background:#fff}
.guide-links img{width:28px;height:28px}
.mid-cta .btn{font-size:1.15rem}
.card-art picture,.card-art img{display:block}
.post-cards .card-art picture{width:100%;height:100%}
.ph-art picture{display:block}
.page-head .ph-art img.pixel{image-rendering:auto}
.char-hero .ph-art img{max-height:360px}
@media (min-width:901px){.hero-cast{width:min(100%,540px);margin-bottom:-50px}}

/* ---- v2.1: showcase sections, hub pages, phone-first polish ---- */
.first-play{padding-top:clamp(36px,5vw,64px)}
.fg-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:center}
.fg-grid.flip>:first-child{order:2}
.fg-grid h3{display:flex;align-items:center;gap:.4em;font-size:clamp(1.4rem,2.6vw,1.9rem);margin:0 0 12px}
.catch-list{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.catch-list li{display:grid;grid-template-columns:52px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;background:#fff;border-radius:18px;padding:8px 12px 8px 8px;box-shadow:0 4px 0 rgba(0,0,0,.06)}
.catch-list img{grid-row:span 2;width:52px;height:52px;object-fit:contain;transition:transform .3s var(--ease-spring)}
.catch-list li:hover img{transform:rotate(-8deg) scale(1.12)}
.catch-list b{font-size:1rem;line-height:1.1}
.catch-list span{font-size:.86rem;color:var(--ink-3);line-height:1.2}
@media (max-width:860px){.fg-grid{grid-template-columns:1fr}.fg-grid.flip>:first-child{order:0}}
@media (max-width:420px){.catch-list{grid-template-columns:1fr}}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 10px;border-radius:var(--r-m);box-shadow:0 0 0 2px var(--line)}
table.compare{border-collapse:collapse;width:100%;min-width:560px;background:#fff;font-size:.95rem;line-height:1.35}
table.compare th,table.compare td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
table.compare thead th{background:var(--paper);font-weight:700;position:sticky;top:0}
table.compare tbody th{font-weight:600;color:var(--ink-2);white-space:nowrap}
table.compare td:nth-child(2),table.compare thead th:nth-child(2){background:#f0fbe6}
table.compare tr:last-child>*{border-bottom:0}
.prose .phone{max-width:520px;margin:18px auto 24px}
.prose .phone figcaption{display:flex;align-items:center;justify-content:center;gap:6px;font-weight:600;color:var(--ink-2);margin-top:10px;font-size:.95rem}
@media (max-width:600px){
  .hero-cta{gap:10px}
  .hero-chips{display:none}
  .hero-lede{font-size:1rem}
}
.catch-list li{color:var(--ink)}
.toy-stage{position:relative}
.toy-stage .stage-btn{position:absolute;right:12px;bottom:12px;z-index:3;box-shadow:0 3px 0 rgba(0,0,0,.15)}
@media (max-width:760px){
  .phones{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 calc(-1 * var(--gutter));padding:4px var(--gutter) 18px;scrollbar-width:none}
  .phones::-webkit-scrollbar{display:none}
  .phones>*{flex:0 0 86%;scroll-snap-align:center}
  .swipe-hint{display:flex}
  .who{display:flex!important;overflow-x:auto;scroll-snap-type:x proximity;gap:8px;padding-bottom:6px;scrollbar-width:none}
  .who li{flex:0 0 auto;max-width:230px;scroll-snap-align:start}
  .toy-controls .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
  .toy-controls .chips li{flex:none}
}
.swipe-hint{display:none;align-items:center;justify-content:center;gap:6px;font-weight:600;color:#10361b;opacity:.8;margin:-4px 0 0;font-size:.92rem}
.hero .zarif.dragon{width:clamp(220px,30vw,400px);top:11%;animation-name:fly-l;animation-duration:32s}
.hero .zarif.dragon img{animation:glide 3.2s ease-in-out infinite}
@keyframes fly-l{0%{transform:translate(110vw,30px) rotate(3deg)}50%{transform:translate(35vw,-20px) rotate(-2deg)}100%{transform:translate(-45vw,20px) rotate(2deg)}}
@keyframes glide{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (prefers-reduced-motion:reduce){.hero .zarif.dragon{transform:translate(52vw,0)}}
.page-head .cloud{opacity:.5;z-index:0}
.page-head .wrap{position:relative;z-index:1}
.page-head .intro{color:#0f3352;text-shadow:none;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:var(--r-m);padding:12px 16px;box-shadow:var(--shadow-s)}
.page-head .intro a{color:#0b5aa6}
.page-head.honey .intro{background:rgba(255,255,255,.55)}
#sky-dragon .f-media img{border-radius:var(--r-l);box-shadow:var(--shadow-s)}
/* contrast: white button text needs 4.5:1 */
.btn{--bg:#26803a;--edge:#1a5c29}
.btn.pink{--bg:#cc2f6e;--edge:#951f50}
.btn.sky{--bg:#1a73c4;--edge:#12569a}
.chip[aria-pressed=true]{background:#26803a;box-shadow:0 3px 0 #1a5c29}
.tagline{background:#e2407f}
.tldr strong:first-child{color:#23752e}
.site-footer .btn{color:var(--fg)}
img[src^="/assets/game/"]{object-fit:contain}
/* the sun/moon moves by transform only (no layout shift during the sunrise) */
.hero .orb{left:0;top:0;transform:translate(calc(var(--ox,70vw) - 50%),calc(var(--oy,130px) - 50%))}
.toy-note,.catch-list span{color:var(--ink-2)}
.card .tagline-s,.tagline-s{color:#23752e}
.chip img{object-fit:contain}
/* lazy stills under videos (no eager poster fetch) */
.phone .screen>video{z-index:1;background:transparent}
.trailer-frame>.clip-poster{position:absolute;inset:14px;width:calc(100% - 28px);height:calc(100% - 28px);object-fit:cover;border-radius:calc(var(--r-xl) - 12px)}
.trailer-frame video{position:relative;z-index:1;background:transparent}
/* calm hero (owner, 2026-11-05): title, one subtitle, the badge, the art */
.hero-sub{margin:4px 0 22px;max-width:22em;font:700 clamp(1.3rem,2.3vw,1.85rem)/1.2 "Fredoka",sans-serif;color:#fff6dc;-webkit-text-stroke:clamp(3px,.4vw,5px) #7a4518;paint-order:stroke fill;text-shadow:0 3px 0 #5b3110,0 10px 20px rgba(40,20,5,.3);letter-spacing:.02em;word-spacing:.06em}
.hero .wordmark{margin-bottom:14px}
.hero-cta{align-items:center;gap:14px 22px}
.hero-copy{padding-top:clamp(48px,11vh,120px)}
@media (max-width:600px){.hero-copy{padding-top:28px}.hero-sub{margin-bottom:18px}.hero-cta{gap:12px 14px}}
.intro-block{max-width:760px;margin:0 auto clamp(26px,4vw,40px);text-align:center}
.intro-lede{font-size:clamp(1.05rem,1.6vw,1.22rem);color:#0f3352;background:rgba(255,255,255,.85);border-radius:var(--r-m);padding:14px 18px;box-shadow:var(--shadow-s);margin:0 0 14px}
.intro-block .hero-chips{justify-content:center;margin:0}
@media (max-width:600px){.intro-block .hero-chips{display:flex}}
/* JS off: the browser forces native controls on videos without a poster (black boxes); show the still instead,
   and the trailer as a still with a plain link to the MP4 */
html:not(.js) video.clip,html:not(.js) .trailer-frame video{display:none}
.trailer-frame .trailer-nojs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;white-space:nowrap}
html:not(.js) .trailer-frame>.clip-poster{position:static;display:block;width:100%;height:auto;aspect-ratio:16/9}
/* until the still is copied onto it as its poster, a video would paint as a black box over the still */
video.clip:not([poster]),.trailer-frame video:not([poster]){opacity:0}
/* "Feels like" strip (home + hub index only; plain text, switch in site.config.json) */
.feels-like{max-width:760px;margin:0 auto clamp(22px,4vw,36px);background:rgba(255,250,240,.96);border:2px solid #fff;border-radius:22px;padding:14px 20px;box-shadow:var(--shadow-s);text-align:center}
.feels-like p{margin:0}
.fl-line{font-weight:600;font-size:clamp(1rem,1.6vw,1.12rem);color:var(--ink);line-height:1.45}
.fl-label{display:inline-block;font:700 .82rem/1 "Fredoka",sans-serif;text-transform:uppercase;letter-spacing:.07em;color:#fff;background:#26803a;border-radius:999px;padding:.38em .75em;margin-right:.45em;vertical-align:.12em}
.fl-note{margin-top:6px!important;font-size:.84rem;color:var(--ink-2)}
.mt+.feels-like,.grid+.feels-like{margin-top:32px}
/* two-button hero (owner, 2026-11-05): the badge and Watch the trailer, nothing else clickable */
.hero-cta{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:18px 20px;margin-top:4px}
.hero-store{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.hero-store .store .badge{padding-top:0}
.soon-caption{margin:0;font:600 .88rem/1.2 "Fredoka",sans-serif;color:#0f3352;letter-spacing:.01em}
.trailer-btn{height:58px;padding-inline:1.2em}
@media (max-width:520px){.hero-cta{flex-direction:column;gap:14px}.trailer-btn{height:50px}}
.sound-row{display:inline-flex;align-items:center;gap:10px;margin:12px 0 0!important;font-weight:600;font-size:.95rem;color:var(--ink)}
.sound-row span{background:rgba(255,250,240,.9);border-radius:999px;padding:.35em .8em}
.hero-sub span{display:block}