/* ————————————————————————————————————————————————
   Critter Camp — site styles
   Warm camp palette drawn from the app: cream paper,
   forest green, gold, bark wood, pastel puzzle tiles.
   ———————————————————————————————————————————————— */

:root{
  --cream:#faf3e2;
  --paper:#fffdf6;
  --ink:#33281c;
  --muted:#6f6350;
  --forest:#1e5b37;
  --forest-deep:#123b23;
  --forest-night:#0d2b1a;
  --gold:#e7a62b;
  --gold-deep:#b97f13;
  --bark:#5e4025;
  --bark-deep:#3a2814;
  --tile-rose:#f6dcd2;
  --tile-sage:#deeac9;
  --tile-sky:#d6e4f0;
  --tile-lilac:#e5daf1;
  --tile-teal:#cfe7dd;
  --tile-butter:#f6e7b8;
  --line:#e6d9c1;
  --shadow:0 14px 40px rgba(62,44,24,.14);
  --shadow-soft:0 6px 18px rgba(62,44,24,.10);
  --r-lg:26px;
  --r-md:18px;
  --display:"Fredoka","Arial Rounded MT Bold","Trebuchet MS",sans-serif;
  --body:"Nunito","Avenir Next","Segoe UI",sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
section[id],[id="crew"],[id="modes"],[id="trail"]{scroll-margin-top:84px}
body{
  margin:0;
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  color:var(--ink);
  background:var(--cream);
}
img{max-width:100%;display:block}
a{color:var(--forest)}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.15;letter-spacing:.01em}
.wrap{width:min(1100px,calc(100% - 40px));margin:0 auto}

/* ————————— header / plank nav ————————— */
header.site{
  position:sticky;top:0;z-index:40;
  background:linear-gradient(180deg,#6a4826 0%,#57381b 55%,#42280f 100%);
  background-image:url("/assets/img/plank.webp");
  background-size:cover;background-position:center;
  box-shadow:0 6px 22px rgba(30,18,6,.45);
  border-bottom:3px solid #2e1c0a;
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;min-height:66px;padding:6px 0;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{height:52px;width:auto;filter:drop-shadow(0 3px 6px rgba(0,0,0,.4))}
.brand .badge{
  display:none;
}
.brand span{
  font-family:var(--display);font-weight:600;font-size:22px;color:#ffe9b8;
  text-shadow:0 2px 0 rgba(46,28,10,.8);
}
header.site nav{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
header.site nav a{
  font-family:var(--display);font-weight:500;font-size:16px;
  color:#f7ecd4;text-decoration:none;padding:8px 13px;border-radius:12px;
  text-shadow:0 1px 0 rgba(46,28,10,.7);
  transition:background .15s ease,color .15s ease;
}
header.site nav a:hover,header.site nav a:focus-visible{background:rgba(255,233,184,.16);color:#ffe9b8}
header.site nav a.cta{
  background:var(--gold);color:#3a2508;text-shadow:none;font-weight:600;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.18);
}
header.site nav a.cta:hover{background:#f2b53e;color:#3a2508}
@media(max-width:760px){
  header.site nav a.hide-m{display:none}
  .brand img{height:44px}
  .brand span{font-size:19px}
}

/* ————————— hero ————————— */
.hero{
  position:relative;color:#fff;
  background:var(--forest-night) url("/assets/img/hero-1920.webp") center/cover no-repeat;
  min-height:min(88vh,760px);
  display:flex;align-items:center;
  overflow:hidden;
}
@media(max-width:900px){
  .hero{background-image:url("/assets/img/hero-1200.webp");background-position:62% center;min-height:0}
  .hero::before{background:linear-gradient(100deg,rgba(10,26,15,.82) 0%,rgba(10,26,15,.62) 55%,rgba(10,26,15,.35) 100%)}
  .hero-inner{padding:48px 0 96px}
}
.hero::before{ /* readability scrim, left side */
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(10,26,15,.78) 0%,rgba(10,26,15,.45) 34%,rgba(10,26,15,0) 62%);
  pointer-events:none;
}
.hero::after{ /* fade into cream page below */
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:90px;
  background:linear-gradient(180deg,rgba(250,243,226,0) 0%,var(--cream) 96%);
  pointer-events:none;
}
.hero-inner{position:relative;z-index:2;padding:72px 0 120px}
.hero-logo{width:min(380px,72vw);height:auto;margin:0 0 26px;filter:drop-shadow(0 10px 24px rgba(0,0,0,.45))}
.hero h1{
  margin:0 0 14px;max-width:12ch;
  font-size:clamp(38px,5.4vw,62px);font-weight:700;color:#fdf4dc;
  text-shadow:0 3px 0 rgba(20,32,18,.85),0 10px 28px rgba(0,0,0,.5);
}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero .lead{
  max-width:44ch;font-size:clamp(17px,1.7vw,20px);font-weight:600;color:#f2ead4;
  text-shadow:0 2px 6px rgba(0,0,0,.55);margin:0 0 28px;
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.pill{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--display);font-weight:600;font-size:17px;
  padding:13px 22px;border-radius:999px;text-decoration:none;
  box-shadow:0 8px 20px rgba(0,0,0,.35),inset 0 -3px 0 rgba(0,0,0,.18);
}
.pill.gold{background:var(--gold);color:#3a2508}
.pill.gold:hover{background:#f2b53e}
.pill.ghost{
  background:rgba(18,59,35,.72);color:#eaf4e6;border:2px solid rgba(234,244,230,.55);
  backdrop-filter:blur(2px);
}
.pill.ghost:hover{background:rgba(18,59,35,.9)}
.hero-note{margin:16px 2px 0;font-size:14px;color:#d8d2bd;text-shadow:0 1px 4px rgba(0,0,0,.6)}

/* fireflies */
.fireflies{position:absolute;inset:0;z-index:1;pointer-events:none}
.ff{
  position:absolute;width:6px;height:6px;border-radius:50%;
  background:#ffe9a3;
  box-shadow:0 0 8px 3px rgba(255,224,130,.85),0 0 22px 8px rgba(255,200,80,.35);
  opacity:0;
  animation:ffdrift var(--dur,11s) ease-in-out var(--delay,0s) infinite;
}
@keyframes ffdrift{
  0%{transform:translate(0,0) scale(.7);opacity:0}
  12%{opacity:.95}
  45%{transform:translate(var(--dx,22px),var(--dy,-34px)) scale(1);opacity:.55}
  70%{opacity:.9}
  100%{transform:translate(calc(var(--dx,22px)*1.7),calc(var(--dy,-34px)*1.9)) scale(.6);opacity:0}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ff{animation:none;opacity:.55}
}

/* ————————— shared section chrome ————————— */
section.band{padding:74px 0}
.eyebrow{
  font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-deep);margin:0 0 10px;
}
.band h2{font-size:clamp(28px,3.4vw,40px);margin:0 0 12px;color:var(--forest-deep)}
.band .sub{max-width:62ch;color:var(--muted);font-size:18px;margin:0 0 36px}
.center{text-align:center}
.center .sub{margin-left:auto;margin-right:auto}

/* ————————— how to play ————————— */
.how{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
@media(max-width:860px){.how{grid-template-columns:1fr;gap:34px}}
.rule-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-soft);padding:22px 24px;margin-top:22px;
  display:flex;gap:14px;align-items:flex-start;font-weight:600;
}
.rule-card .dot{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  background:var(--forest);color:#fff;display:grid;place-items:center;
  font-family:var(--display);font-size:18px;
}
.board-wrap{display:flex;justify-content:center}
.board{
  --cell:74px;
  display:grid;grid-template-columns:repeat(4,var(--cell));
  grid-auto-rows:var(--cell);
  background:var(--bark-deep);border:6px solid var(--bark-deep);border-radius:20px;
  gap:0;box-shadow:var(--shadow);
}
@media(max-width:420px){.board{--cell:62px}}
.cell{
  display:grid;place-items:center;position:relative;
  border:1px solid rgba(58,40,20,.25);
}
.cell.bt{border-top:4px solid var(--bark-deep)}
.cell.bl{border-left:4px solid var(--bark-deep)}
.cell img{width:78%;height:78%;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.cell .x{font-family:var(--display);font-weight:600;font-size:26px;color:rgba(58,40,20,.55)}
.board-caption{margin-top:14px;text-align:center;color:var(--muted);font-size:15px}

/* ————————— mode cards ————————— */
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:960px){.modes{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.modes{grid-template-columns:1fr}}
.mode{
  position:relative;border-radius:var(--r-lg);border:3px solid var(--bark);
  box-shadow:var(--shadow-soft);padding:22px 20px 0;overflow:hidden;
  display:flex;flex-direction:column;min-height:300px;
  transition:transform .18s ease,box-shadow .18s ease;
}
.mode:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.mode h3{margin:0 0 6px;font-size:23px;color:var(--forest-deep)}
.mode p{margin:0;font-size:15.5px;color:#4d4231;font-weight:600;max-width:34ch}
.mode .art{
  margin:auto auto 0;height:150px;display:flex;align-items:flex-end;justify-content:center;
}
.mode .art img{height:150px;width:auto;filter:drop-shadow(0 6px 10px rgba(58,40,20,.3))}
.mode .prem{
  position:absolute;top:14px;right:-40px;transform:rotate(38deg);
  background:var(--gold);color:#3a2508;font-family:var(--display);font-weight:600;
  font-size:13px;letter-spacing:.06em;padding:5px 46px;
  box-shadow:0 3px 8px rgba(0,0,0,.22);
}
.mode.rose{background:var(--tile-rose)}
.mode.sage{background:var(--tile-sage)}
.mode.sky{background:var(--tile-sky)}
.mode.lilac{background:var(--tile-lilac)}
.mode.teal{background:var(--tile-teal)}
.mode.butter{background:var(--tile-butter)}

/* ————————— screenshots band ————————— */
.trail{
  background:
    radial-gradient(1200px 500px at 50% -200px,rgba(46,110,68,.5),rgba(0,0,0,0) 60%),
    linear-gradient(180deg,var(--forest-deep),var(--forest-night));
  color:#eef4e4;
}
.trail .eyebrow{color:var(--gold)}
.trail h2{color:#fdf4dc}
.trail .sub{color:#c9d6bf}
.shots{
  display:grid;grid-template-columns:repeat(4,1fr);gap:26px;align-items:start;
}
@media(max-width:980px){
  .shots{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;
    -webkit-overflow-scrolling:touch}
  .shots figure{flex:0 0 240px;scroll-snap-align:center}
}
.shots figure{margin:0}
.phone{
  border-radius:34px;border:7px solid #101d13;background:#101d13;
  box-shadow:0 16px 40px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06);
  overflow:hidden;
}
.phone img{width:100%;height:auto}
.shots figcaption{
  margin-top:12px;text-align:center;font-family:var(--display);font-weight:500;
  font-size:15.5px;color:#e8dfc4;
}
.shots figcaption .tag{
  display:inline-block;margin-left:6px;background:var(--gold);color:#3a2508;
  font-size:12px;font-weight:600;border-radius:999px;padding:1px 9px;vertical-align:2px;
}

/* ————————— crew grid ————————— */
.crew{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
@media(max-width:980px){.crew{grid-template-columns:repeat(4,1fr)}}
@media(max-width:640px){.crew{grid-template-columns:repeat(3,1fr);gap:12px}}
@media(max-width:420px){.crew{grid-template-columns:repeat(2,1fr)}}
.camper{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-soft);padding:16px 10px 12px;text-align:center;
  transition:transform .18s ease;
}
.camper:hover{transform:translateY(-4px) rotate(-1deg)}
.camper img{height:118px;width:auto;margin:0 auto 8px;filter:drop-shadow(0 4px 6px rgba(58,40,20,.22))}
.camper span{font-family:var(--display);font-weight:500;font-size:15px;color:var(--forest-deep)}

/* ————————— closing CTA ————————— */
.cta-band{
  background:var(--cream);
  padding:20px 0 90px;
}
.cta-card{
  position:relative;overflow:hidden;text-align:center;
  background:linear-gradient(180deg,#276b41,var(--forest-deep));
  border-radius:var(--r-lg);box-shadow:var(--shadow);
  padding:56px 26px 150px;color:#fdf4dc;
}
.cta-card h2{color:#fdf4dc;font-size:clamp(26px,3vw,36px);margin:0 0 10px}
.cta-card p{color:#cfdcc4;font-weight:600;max-width:52ch;margin:0 auto 26px}
.cta-fire{
  position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
  width:150px;pointer-events:none;
  filter:drop-shadow(0 0 26px rgba(255,170,60,.55));
}
@media(prefers-reduced-motion:no-preference){
  .cta-fire{animation:flick 2.6s ease-in-out infinite}
  @keyframes flick{
    0%,100%{filter:drop-shadow(0 0 22px rgba(255,170,60,.45))}
    50%{filter:drop-shadow(0 0 34px rgba(255,190,80,.7))}
  }
}

/* ————————— footer ————————— */
footer.site{
  background:var(--forest-night);color:#b9c7ae;padding:34px 0;
  border-top:3px solid #0a2113;
}
.footer-row{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.footer-row .fbrand{display:flex;align-items:center;gap:10px}
.footer-row .fbrand img{height:34px}
.footer-row .fbrand span{font-family:var(--display);font-weight:500;color:#e8dfc4}
.footer-links{display:flex;gap:20px;flex-wrap:wrap}
.footer-links a{color:#d9e2cd;text-decoration:none;font-weight:700}
.footer-links a:hover{color:#fdf4dc;text-decoration:underline}
footer.site small{display:block;width:100%;margin-top:6px;font-size:13.5px;color:#8fa385}

/* ————————— legal / support docs ————————— */
main.main{padding:56px 0 80px}
.doc{
  width:min(880px,calc(100% - 40px));margin:0 auto;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-soft);padding:clamp(26px,5vw,54px);
}
.doc .eyebrow{color:var(--gold-deep)}
.doc h1{font-size:clamp(30px,4vw,42px);color:var(--forest-deep);margin:.1em 0 .35em}
.doc h2{font-size:22px;color:var(--forest-deep);margin:1.7em 0 .5em}
.doc .lead{font-size:19px;color:var(--muted);font-weight:600}
.doc .meta{color:var(--muted);font-size:15px;margin:0 0 1.4em}
.doc ul{padding-left:22px}
.doc li{margin:.35em 0}
.doc .callout{
  background:var(--tile-butter);border:1px solid #e3cf8d;border-radius:var(--r-md);
  padding:16px 18px;margin:1em 0;
}
.doc a{font-weight:700}