/* Cozy Acres - site styles. Mobile first. No framework. */
:root{
  --sky:#8fd3f4; --grass:#7cc85a; --cream:#fff6df; --cream-2:#f7e6bd;
  --wood:#c98a4b; --wood-dark:#8a5528; --ink:#3b2a1a; --outline:#2d1e10;
  --green:#6cc644; --green-d:#3f8f22; --blue:#3fa9f5; --blue-d:#1f6fb8;
  --yellow:#ffc93c; --yellow-d:#c98f0a; --red:#f25f5c; --red-d:#b8403e; --purple:#a77bf3;
  --gold:#ffcd3c; --gem:#4fe0d0;
  --r-sm:14px; --r-md:18px; --r-lg:20px;
  --font-head:"Lilita One","Arial Rounded MT Bold","Trebuchet MS",sans-serif;
  --font-body:"Fredoka","Nunito","Trebuchet MS",system-ui,sans-serif;
  --wrap:1120px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;font-family:var(--font-body);font-size:1.0625rem;line-height:1.55;color:var(--ink);background:var(--cream);
  background-image:radial-gradient(rgba(201,138,75,.10) 2px,transparent 2.5px);background-size:28px 28px}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue-d);text-underline-offset:3px}
a:hover{color:var(--outline)}
h1,h2,h3,.head{font-family:var(--font-head);font-weight:400;line-height:1.1;letter-spacing:.01em;margin:0 0 .4em;text-wrap:balance}
p{margin:0 0 1em;text-wrap:pretty}
:focus-visible{outline:3px solid var(--blue-d);outline-offset:3px;border-radius:8px}
.wrap{width:min(100% - 32px,var(--wrap));margin-inline:auto}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--yellow);color:var(--outline);padding:10px 16px;border:3px solid var(--outline);border-radius:12px;font-weight:600}
.skip:focus{top:12px}

/* Outlined white heading text (game style) */
.outlined{color:#fff;-webkit-text-stroke:0;paint-order:stroke fill;
  text-shadow:0 3px 0 var(--outline),2px 2px 0 var(--outline),-2px 2px 0 var(--outline),2px -2px 0 var(--outline),-2px -2px 0 var(--outline),0 2px 0 var(--outline),0 -2px 0 var(--outline),2px 0 0 var(--outline),-2px 0 0 var(--outline),0 6px 0 var(--outline)}

/* ---------- Component: candy button ---------- */
.btn{--c:var(--green);--d:var(--green-d);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:10px 24px 14px;
  font-family:var(--font-head);font-size:1.3rem;line-height:1;color:#fff;text-decoration:none;cursor:pointer;
  background:var(--c);border:3px solid var(--outline);border-radius:var(--r-md);
  box-shadow:inset 0 -6px 0 var(--d),inset 0 3px 0 rgba(255,255,255,.35),0 5px 0 var(--outline);
  text-shadow:0 2px 0 var(--outline),2px 0 0 var(--outline),-2px 0 0 var(--outline),0 -2px 0 var(--outline),1.5px 1.5px 0 var(--outline),-1.5px 1.5px 0 var(--outline),1.5px -1.5px 0 var(--outline),-1.5px -1.5px 0 var(--outline),0 4px 0 var(--outline);
  transition:transform .08s ease,box-shadow .08s ease;-webkit-tap-highlight-color:transparent}
.btn:hover{color:#fff;filter:brightness(1.05)}
.btn:active{transform:translateY(4px);box-shadow:inset 0 -3px 0 var(--d),inset 0 3px 0 rgba(255,255,255,.35),0 1px 0 var(--outline)}
.btn img{width:28px;height:28px}
.btn--blue{--c:var(--blue);--d:var(--blue-d)}
.btn--yellow{--c:var(--yellow);--d:var(--yellow-d)}
.btn--red{--c:var(--red);--d:var(--red-d)}
.btn--wood{--c:var(--wood);--d:var(--wood-dark)}
.btn--sm{min-height:44px;padding:8px 16px 11px;font-size:1.05rem;border-radius:var(--r-sm)}
.btn--lg{min-height:62px;padding:12px 30px 17px;font-size:1.6rem}
.btn[disabled]{filter:grayscale(.6);opacity:.7;cursor:not-allowed}

/* Google Play badge slot (use the official badge artwork only) */
.play-badge{display:inline-flex;min-height:52px;align-items:center;border-radius:12px}
.play-badge img{height:62px;width:auto}

/* ---------- Component: panel ---------- */
.panel{background:var(--cream);border:5px solid var(--wood);border-radius:var(--r-lg);
  box-shadow:0 0 0 3px var(--outline),0 7px 0 3px var(--outline);padding:20px}
.panel--plain{border-color:var(--cream-2)}
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-head);font-size:1rem;padding:4px 12px 5px;border-radius:999px;
  border:2.5px solid var(--outline);background:var(--yellow);color:var(--outline);line-height:1.1}
.chip--blue{background:var(--blue);color:#fff;text-shadow:0 1px 0 var(--outline)}
.chip--green{background:var(--green);color:var(--outline)}

/* ---------- Component: site header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--cream);border-bottom:4px solid var(--outline);
  box-shadow:0 4px 0 rgba(45,30,16,.12)}
.site-header::after{content:"";display:block;height:8px;background:var(--wood);border-top:3px solid var(--wood-dark)}
.site-header__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:68px}
.site-header__logo img{height:46px;width:auto}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;align-items:center}
.site-nav a:not(.btn){display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:12px;font-weight:600;color:var(--ink);text-decoration:none}
.site-nav a:not(.btn):hover,.site-nav a[aria-current="page"]{background:var(--cream-2)}
.menu{position:relative}
.menu>summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:3px solid var(--outline);border-radius:14px;background:var(--yellow);box-shadow:inset 0 -4px 0 var(--yellow-d);cursor:pointer}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary span{display:block;width:22px;height:3px;background:var(--outline);border-radius:2px;box-shadow:0 -7px 0 var(--outline),0 7px 0 var(--outline)}
.menu[open] .site-nav{position:absolute;right:0;top:58px;min-width:220px}
.menu .site-nav ul{flex-direction:column;align-items:stretch;background:var(--cream);border:3px solid var(--outline);border-radius:16px;padding:8px;box-shadow:0 6px 0 var(--outline)}
.menu .site-nav .btn{margin-top:6px}
.site-header__desktop{display:none}
@media (min-width:860px){.menu{display:none}.site-header__desktop{display:block}}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:760px;display:flex;align-items:flex-start;
  background:url("/assets/img/hero-mobile-1080x1350.jpg") center bottom/100% auto no-repeat,linear-gradient(#8fd3f4,#a9dcf2 60%,#bfe3ee);
  border-bottom:4px solid var(--outline)}
.hero__inner{padding:28px 0 0}
.hero__logo{width:min(320px,82vw);margin:0 auto 10px}
.hero h1{font-size:clamp(2.1rem,7vw,3.6rem);text-align:center;margin-bottom:12px}
.hero__line{background:rgba(255,246,223,.94);border:3px solid var(--outline);border-radius:16px;padding:10px 16px;font-weight:500;text-align:center;max-width:460px;margin:0 auto 18px}
.hero__cta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px}
@media (min-width:420px){.hero{min-height:820px}}
@media (min-width:900px){
  .hero{min-height:680px;align-items:center;background:url("/assets/img/hero-2400x1200.jpg") 62% bottom/cover no-repeat,var(--sky)}
  .hero__inner{padding:40px 0 120px}
  .hero__content{max-width:520px}
  .hero__logo{margin:0 0 6px;width:360px}
  .hero h1,.hero__line{text-align:left}
  .hero__line{margin-left:0}
  .hero__cta{justify-content:flex-start}
}

/* ---------- Sections ---------- */
.section{padding:56px 0}
.section__head{text-align:center;margin-bottom:28px}
.section__head h2{font-size:clamp(1.9rem,5vw,2.6rem);color:var(--ink)}
.section__head p{max-width:560px;margin-inline:auto}
.section--grass{background:var(--grass);border-block:4px solid var(--outline)}
.section--grass .section__head h2{color:#fff;text-shadow:0 3px 0 var(--outline),2px 2px 0 var(--outline),-2px 2px 0 var(--outline),2px -2px 0 var(--outline),-2px -2px 0 var(--outline),0 5px 0 var(--outline)}
.section--grass .section__head p{color:var(--outline);font-weight:500}
.section--sky{background:var(--sky);border-block:4px solid var(--outline)}
.section--sky .section__head h2{color:#fff;text-shadow:0 3px 0 var(--outline),2px 2px 0 var(--outline),-2px 2px 0 var(--outline),2px -2px 0 var(--outline),-2px -2px 0 var(--outline),0 5px 0 var(--outline)}
.grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}

/* ---------- Component: feature card ---------- */
.feature-card{display:flex;gap:14px;align-items:center;text-align:left}
.feature-card__art{flex:0 0 108px;width:108px;height:108px;margin:-6px 0 -6px -8px}
.feature-card h3{font-size:1.45rem;margin-bottom:.2em}
.feature-card p{margin:0;font-size:1rem}
@media (min-width:700px){.feature-card{flex-direction:column;text-align:center}.feature-card__art{width:150px;height:150px;flex-basis:auto;margin:-10px auto 0}}

/* ---------- Screenshot carousel ---------- */
.carousel{position:relative}
.carousel__track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 16px 26px;margin:0;list-style:none;scrollbar-width:thin}
.carousel__track>li{scroll-snap-align:center;flex:0 0 auto}
.phone{width:min(230px,62vw);aspect-ratio:9/16;border:10px solid var(--outline);border-radius:34px;background:var(--cream-2);overflow:hidden;
  box-shadow:0 8px 0 rgba(45,30,16,.25)}
.phone img{width:100%;height:100%;object-fit:cover}
.carousel__nav{display:flex;justify-content:center;gap:12px}
.carousel__nav .btn{width:56px;padding:0 0 4px}

/* ---------- Component: update card ---------- */
.update-card{display:flex;flex-direction:column;gap:10px}
.update-card__top{display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:space-between}
.update-card h3{font-size:1.6rem;margin:0}
.update-card time{font-size:.95rem;color:#6b4a2b;font-weight:500}
.update-card__note{display:flex;gap:8px;align-items:center;background:#ffe9ec;border:2.5px solid var(--outline);border-radius:12px;padding:6px 10px;font-weight:500;font-size:.98rem}
.update-card__note img{width:22px;height:22px;flex:0 0 22px}
.update-card ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.update-card li{display:flex;gap:8px;align-items:flex-start}
.update-card li::before{content:"";flex:0 0 22px;height:22px;margin-top:2px;background:url("/assets/icons/seedling.svg") center/contain no-repeat}
.update-card--latest{border-color:var(--yellow)}

/* ---------- Component: leaderboard ---------- */
.leaderboard{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:760px){.leaderboard{grid-template-columns:repeat(5,minmax(0,1fr))}}
.lb-row{display:flex;align-items:center;gap:12px;background:var(--cream);border:3px solid var(--outline);border-radius:18px;padding:10px 14px;box-shadow:0 5px 0 var(--outline)}
@media (min-width:760px){.lb-row{flex-direction:column;text-align:center;padding:16px 10px}}
.lb-row__avatar{position:relative;width:64px;height:64px;flex:0 0 64px;border-radius:50%;border:3px solid var(--outline);background:var(--sky);display:grid;place-items:center}
.lb-row__avatar>img{width:40px;height:40px}
.lb-row__medal{position:absolute;right:-10px;bottom:-8px;width:32px;height:32px}
.lb-row__rank{position:absolute;right:-8px;bottom:-6px;width:28px;height:28px;border-radius:50%;background:var(--cream-2);border:2.5px solid var(--outline);font-family:var(--font-head);display:grid;place-items:center;font-size:.95rem}
.lb-row__name{font-family:var(--font-head);font-size:1.2rem;line-height:1.1;overflow-wrap:anywhere}
.lb-row__level{font-size:.95rem;font-weight:600;color:#6b4a2b}
.lb-row--1 .lb-row__avatar{background:#ffe08a}.lb-row--2 .lb-row__avatar{background:#dfe6ee}.lb-row--3 .lb-row__avatar{background:#f2c39b}

/* ---------- Footer ---------- */
.site-footer{background:var(--wood-dark);color:var(--cream);border-top:4px solid var(--outline);padding:40px 0 28px;margin-top:0}
.site-footer::before{content:"";display:block}
.site-footer__grid{display:grid;gap:24px;justify-items:center;text-align:center}
.site-footer img.site-footer__logo{width:220px}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 8px}
.site-footer a{color:var(--cream);display:inline-flex;align-items:center;min-height:44px;padding:0 10px;font-weight:600}
.site-footer a:hover{color:#fff}
.site-footer__love{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 8px;margin:0}
.site-footer__love img{width:22px;height:22px}
.site-footer small{opacity:.9;font-size:.92rem}

/* ---------- Long-form (privacy) ---------- */
.page-head{background:var(--sky);border-bottom:4px solid var(--outline);padding:40px 0 34px;text-align:center}
.page-head h1{font-size:clamp(2.1rem,6vw,3rem)}
.page-head p{margin:0 auto;max-width:560px;font-weight:500}
.prose{max-width:720px;margin:0 auto}
.prose h2{font-size:1.6rem;margin-top:1.6em}
.prose h3{font-size:1.25rem;margin-top:1.2em}
.prose ul{padding-left:1.3em}
.prose li{margin:.3em 0}
.prose .panel{margin:24px 0}
.toc{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0}
.toc a{display:inline-flex;min-height:44px;align-items:center;padding:0 12px;border:2.5px solid var(--outline);border-radius:12px;background:#fff;text-decoration:none;color:var(--ink);font-weight:600}

/* ---------- Forms (delete data) ---------- */
.field{display:grid;gap:8px;margin-bottom:18px}
.field label{font-family:var(--font-head);font-size:1.2rem}
.field__hint{font-size:.95rem;color:#6b4a2b;margin:0}
.input{width:100%;min-height:56px;padding:10px 16px;font:600 1.3rem/1.2 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  background:#fff;border:3px solid var(--outline);border-radius:14px;box-shadow:inset 0 4px 0 rgba(45,30,16,.08)}
.input::placeholder{color:#9b8571;letter-spacing:.06em}
.input[aria-invalid="true"]{border-color:var(--red-d);background:#fff1f0}
.check{display:flex;gap:10px;align-items:flex-start;min-height:44px;font-weight:500}
.check input{width:24px;height:24px;margin-top:2px;accent-color:var(--red-d);flex:0 0 24px}
.status{display:flex;gap:12px;align-items:flex-start;border:3px solid var(--outline);border-radius:16px;padding:14px 16px;margin-top:18px}
.status img{width:36px;height:36px;flex:0 0 36px}
.status h3{font-size:1.25rem;margin:0 0 4px}
.status p{margin:0}
.status--ok{background:#e4f6d8}
.status--err{background:#ffe5e3}
.status[hidden]{display:none}

/* ---------- FAQ accordion ---------- */
.faq{display:grid;gap:14px;max-width:760px;margin:0 auto}
.faq details{background:var(--cream);border:3px solid var(--outline);border-radius:18px;box-shadow:0 5px 0 var(--outline)}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;padding:12px 18px;cursor:pointer;font-family:var(--font-head);font-size:1.2rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:0 0 34px;height:34px;border-radius:10px;border:2.5px solid var(--outline);background:var(--yellow);display:grid;place-items:center;font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"-"}
.faq details>div{padding:0 18px 16px}
.contact-card{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;max-width:760px;margin:32px auto 0}
.contact-card h2{font-size:1.6rem;margin:0}

/* ---------- 404 ---------- */
.lost{text-align:center;padding:40px 0 64px}
.lost img{width:min(380px,86vw);margin:0 auto}
.lost h1{font-size:clamp(2.2rem,8vw,3.4rem);margin-top:6px}

/* ---------- Component: store links ---------- */
.stores{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.store{display:inline-flex;flex-direction:column;justify-content:center;min-height:52px;padding:6px 16px;border:3px solid var(--outline);border-radius:14px;
  background:var(--outline);color:var(--cream);text-decoration:none;line-height:1.15;box-shadow:0 4px 0 rgba(45,30,16,.35)}
.store__name{font-family:var(--font-head);font-size:1.15rem}
.store__note{font-size:.78rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--yellow)}
a.store:hover{color:#fff}
.store--soon{background:rgba(255,246,223,.94);color:var(--ink);border-style:dashed}
.store--soon .store__note{color:#9c2f2c}
@media (min-width:900px){.hero .stores{justify-content:flex-start}}

.contact-card .btn{max-width:100%;font-size:1.05rem;padding-inline:14px;overflow-wrap:anywhere;text-align:left}