/* ============================================================
   PUNTA GAMES — styles.css
   Light cinematic parallax. Brand palette from the logo pack.
   ------------------------------------------------------------
   1.  Design tokens
   2.  Reset & base
   3.  Utilities / typography
   4.  Buttons & links
   5.  Header + navigation
   6.  Hero (parallax stage)
   7.  Marquee strip
   8.  About / Our promise
   9.  Games grid + tabs
   10. Spotlight
   11. Learn through play
   12. CTA
   13. Footer + back-to-top
   14. Scroll reveal
   15. Responsive
   16. Reduced motion / print
   ============================================================ */


/* ---------- 1. DESIGN TOKENS ---------- */
:root{
  /* Brand */
  --forest:      #2F6E3C;   /* Orchard green — primary line / brand green */
  --forest-deep: #23532D;
  --leaf:        #6BA43E;   /* Lockup green */
  --gold:        #F3C53C;   /* Marigold gold */
  --yellow:      #F2D21F;   /* Brand yellow */
  --amber:       #FFB43D;   /* Warm light accent */
  --ink:         #22271F;   /* Pine ink */
  --paper:       #F6F3EA;   /* Warm paper */
  --cream:       #FFFDF7;

  /* Derived surfaces */
  --surface:      var(--cream);
  --surface-alt:  var(--paper);
  --surface-sink: #EFEADC;
  --line:         rgba(34,39,31,.10);
  --line-strong:  rgba(34,39,31,.18);

  /* Text */
  --text:        var(--ink);
  --text-soft:   rgba(34,39,31,.68);
  --text-faint:  rgba(34,39,31,.48);
  --on-dark:     #FBF8EF;
  --on-dark-soft:rgba(251,248,239,.76);

  /* Type */
  --font-display: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --font-body:    "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Fluid type scale */
  --fs-hero:  clamp(2.7rem, 1.35rem + 5.2vw, 6rem);
  --fs-h2:    clamp(2rem, 1.25rem + 2.7vw, 3.6rem);
  --fs-h3:    clamp(1.35rem, 1.1rem + .9vw, 1.9rem);
  --fs-lead:  clamp(1.05rem, .98rem + .38vw, 1.28rem);
  --fs-body:  clamp(.98rem, .94rem + .18vw, 1.06rem);
  --fs-small: .875rem;

  /* Space */
  --shell:      1240px;
  --gutter:     clamp(1.15rem, .6rem + 2.4vw, 3rem);
  --section-y:  clamp(4.5rem, 2.5rem + 7vw, 9.5rem);

  /* Radii */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-pill: 999px;

  /* Shadows — warm-tinted, never neutral grey */
  --sh-xs: 0 1px 2px rgba(47,110,60,.06), 0 2px 6px rgba(47,110,60,.05);
  --sh-sm: 0 2px 6px rgba(47,110,60,.07), 0 8px 20px rgba(47,110,60,.06);
  --sh-md: 0 6px 16px rgba(47,110,60,.09), 0 18px 44px rgba(47,110,60,.10);
  --sh-lg: 0 14px 34px rgba(47,110,60,.12), 0 40px 90px rgba(47,110,60,.14);
  --sh-glow: 0 18px 60px rgba(243,197,60,.38);

  /* Motion */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --t-fast:    .18s;
  --t-mid:     .32s;
  --t-slow:    .6s;

  --header-h: 76px;
}


/* ---------- 2. RESET & BASE ---------- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  /* The off-canvas nav is position:fixed, so body overflow can't clip it.
     `clip` where supported (no scroll container), `hidden` as the fallback. */
  overflow-x:hidden;
  overflow-x:clip;
}

body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.65;
  color:var(--text);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

body.is-locked{ overflow:hidden; }

img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.06;
  letter-spacing:-.015em;
  margin:0;
  text-wrap:balance;
}

p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

ul{ margin:0; padding:0; list-style:none; }

a{ color:inherit; text-decoration:none; }

button,input{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }

/* Inline SVG icon default: line art in the brand green */
svg{ fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }

:focus-visible{
  outline:3px solid var(--forest);
  outline-offset:3px;
  border-radius:4px;
}

::selection{ background:var(--gold); color:var(--ink); }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--forest); color:var(--on-dark);
  padding:.75rem 1.25rem; border-radius:0 0 var(--r-sm) 0;
  font-weight:600;
}
.skip-link:focus{ left:0; }

.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;
}


/* ---------- 3. UTILITIES / TYPOGRAPHY ---------- */
.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{
  position:relative;
  padding-block:var(--section-y);
}

.section__head{
  max-width:44rem;
  margin:0 auto clamp(2.5rem,1.5rem + 3vw,4.5rem);
  text-align:center;
}

.eyebrow{
  font-family:var(--font-display);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--leaf);
  margin-bottom:1rem;
  display:flex;
  align-items:center;
  gap:.65rem;
}
.section__head .eyebrow{ justify-content:center; }
.eyebrow::before{
  content:"";
  width:26px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--leaf));
}

.h2{ font-size:var(--fs-h2); }
.h3{ font-size:var(--fs-h3); }

.lead{
  font-size:var(--fs-lead);
  line-height:1.62;
  color:var(--text-soft);
  margin-top:1.25rem;
}
.lead--center{ margin-inline:auto; }

.body{ color:var(--text-soft); margin-top:1rem; }


/* ---------- 4. BUTTONS & LINKS ---------- */
.btn{
  --btn-bg:var(--forest);
  --btn-fg:var(--on-dark);
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding:.85rem 1.55rem;
  border-radius:var(--r-pill);
  font-family:var(--font-display);
  font-weight:600;
  font-size:.98rem;
  letter-spacing:.005em;
  background:var(--btn-bg);
  color:var(--btn-fg);
  box-shadow:var(--sh-sm);
  overflow:hidden;
  isolation:isolate;
  transition:transform var(--t-mid) var(--ease-out),
             box-shadow var(--t-mid) var(--ease-out),
             background-color var(--t-mid) var(--ease);
  will-change:transform;
}
/* Sliding sheen */
.btn::after{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.32) 50%,transparent 75%);
  transform:translateX(-110%);
  transition:transform .65s var(--ease-out);
}
.btn:hover::after,.btn:focus-visible::after{ transform:translateX(110%); }
.btn:hover{ transform:translateY(-2px); box-shadow:var(--sh-md); }
.btn:active{ transform:translateY(0); }

.btn__icon{ width:18px; height:18px; transition:transform var(--t-mid) var(--ease-out); }
.btn:hover .btn__icon{ transform:translateX(4px); }

.btn--primary{ --btn-bg:var(--forest); --btn-fg:var(--on-dark); }
.btn--primary:hover{ background:var(--forest-deep); }

.btn--gold{ --btn-bg:var(--gold); --btn-fg:var(--ink); box-shadow:var(--sh-glow); }
.btn--gold:hover{ background:var(--yellow); }

.btn--ghost{
  --btn-bg:transparent; --btn-fg:var(--forest);
  box-shadow:inset 0 0 0 2px rgba(47,110,60,.28);
}
.btn--ghost:hover{ background:rgba(47,110,60,.06); box-shadow:inset 0 0 0 2px var(--forest); }

.btn--sm{ padding:.62rem 1.15rem; font-size:.88rem; }
.btn--lg{ padding:1.05rem 2.1rem; font-size:1.05rem; }

.link-arrow{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-top:1.75rem;
  font-family:var(--font-display); font-weight:600;
  color:var(--forest);
  border-bottom:2px solid transparent;
  transition:gap var(--t-mid) var(--ease-out), border-color var(--t-mid) var(--ease);
}
.link-arrow svg{ width:18px; height:18px; }
.link-arrow:hover{ gap:.85rem; border-bottom-color:var(--gold); }
.link-arrow--sm{ margin-top:1.1rem; font-size:.92rem; }


/* ---------- 5. HEADER + NAVIGATION ---------- */
.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  height:var(--header-h);
  display:flex;
  align-items:center;
  transition:background-color var(--t-mid) var(--ease),
             box-shadow var(--t-mid) var(--ease),
             backdrop-filter var(--t-mid) var(--ease),
             transform var(--t-mid) var(--ease-out);
}
.site-header.is-stuck{
  background:rgba(255,253,247,.86);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  box-shadow:0 1px 0 var(--line), var(--sh-sm);
}
/* Auto-hide on downward scroll, reveal on up */
.site-header.is-hidden{ transform:translateY(-100%); }

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  width:100%;
}

.brand{
  display:inline-flex; align-items:center; gap:.65rem;
  transition:transform var(--t-mid) var(--ease-out);
}
.brand:hover{ transform:scale(1.03); }
.brand__mark{ width:42px; height:auto; }
.brand__text{ display:flex; flex-direction:column; line-height:.98; }
.brand__name{
  font-family:var(--font-display); font-weight:700; font-size:1.28rem;
  color:var(--leaf); letter-spacing:.01em;
}
.brand__sub{
  font-family:var(--font-display); font-weight:600; font-size:.68rem;
  letter-spacing:.28em; text-transform:uppercase; color:var(--gold);
}

.nav{ display:flex; align-items:center; gap:2rem; }
.nav__list{ display:flex; align-items:center; gap:.35rem; }

.nav__link{
  position:relative;
  display:block;
  padding:.5rem .8rem;
  border-radius:var(--r-pill);
  font-weight:500;
  font-size:.95rem;
  color:var(--text-soft);
  transition:color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.nav__link::after{
  content:"";
  position:absolute; left:50%; bottom:.28rem;
  width:0; height:3px; border-radius:3px;
  background:var(--gold);
  transform:translateX(-50%);
  transition:width var(--t-mid) var(--ease-out);
}
.nav__link:hover{ color:var(--text); background:rgba(47,110,60,.05); }
.nav__link.is-active{ color:var(--forest); font-weight:600; }
.nav__link.is-active::after{ width:18px; }

.nav-toggle{
  display:none;
  width:46px; height:46px;
  border-radius:var(--r-sm);
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  background:rgba(255,253,247,.7);
  box-shadow:inset 0 0 0 1px var(--line);
}
.nav-toggle__bar{
  width:20px; height:2px; border-radius:2px; background:var(--forest);
  transition:transform var(--t-mid) var(--ease-out), opacity var(--t-fast) var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav-scrim{
  position:fixed; inset:0; z-index:90;
  background:rgba(34,39,31,.42);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; transition:opacity var(--t-mid) var(--ease);
}
.nav-scrim.is-open{ opacity:1; }

.scroll-progress{
  position:absolute; left:0; bottom:0;
  height:3px; width:0%;
  background:linear-gradient(90deg,var(--leaf),var(--gold));
  transition:width .1s linear;
}


/* ---------- 6. HERO ---------- */
.hero{
  position:relative;
  min-height:100svh;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding-top:calc(var(--header-h) + clamp(2rem,6vh,5rem));
  padding-bottom:clamp(6rem,15vh,10rem);
  overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% 0%,   #FFFDF6 0%, #FCF7E9 42%, #F4EFDF 100%),
    var(--paper);
  isolation:isolate;
}

.hero__stage{
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
}
.layer{
  position:absolute; inset:0;
  will-change:transform;
  transform:translate3d(0,0,0);
}

/* L1 — warm wash */
.layer--wash{
  background:
    radial-gradient(60% 45% at 78% 14%, rgba(255,180,61,.30), transparent 62%),
    radial-gradient(52% 42% at 16% 26%, rgba(107,164,62,.20), transparent 66%),
    radial-gradient(80% 55% at 50% 108%, rgba(243,197,60,.28), transparent 70%);
}

/* L2 — glow orbs */
.orb{
  position:absolute;
  border-radius:50%;
  filter:blur(60px);
  opacity:.55;
}
.orb--gold{ width:34vw; height:34vw; min-width:260px; min-height:260px; top:6%;  right:4%;  background:radial-gradient(circle,var(--gold),transparent 68%); }
.orb--leaf{ width:28vw; height:28vw; min-width:220px; min-height:220px; bottom:12%; left:-4%; background:radial-gradient(circle,var(--leaf),transparent 68%); opacity:.4; }
.orb--amber{ width:22vw; height:22vw; min-width:180px; min-height:180px; top:44%; left:44%; background:radial-gradient(circle,var(--amber),transparent 66%); opacity:.32; }

/* L3 / L6 — hills */
.layer--hills-far,
.layer--hills-near{ top:auto; bottom:-2px; height:auto; }
.layer--hills-far svg{ width:100%; height:clamp(180px,26vh,340px); }
.layer--hills-near svg{ width:100%; height:clamp(120px,18vh,240px); }
.layer--hills-far path{ fill:rgba(107,164,62,.16); stroke:none; }
.layer--hills-near path{ fill:rgba(47,110,60,.10); stroke:none; }

/* L4 — sparkles (built by JS) */
.spark{
  position:absolute;
  width:var(--s,7px); height:var(--s,7px);
  border-radius:50%;
  background:var(--c,var(--gold));
  opacity:var(--o,.5);
  box-shadow:0 0 12px currentColor;
  animation:twinkle var(--d,5s) var(--ease) infinite alternate;
  animation-delay:var(--delay,0s);
}
@keyframes twinkle{
  from{ opacity:calc(var(--o,.5) * .25); transform:scale(.7); }
  to  { opacity:var(--o,.5);              transform:scale(1.15); }
}

/* L5 — product showcase */
.layer--product{ display:block; }
.prod{
  position:absolute;
  margin:0;
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--sh-lg);
  background:var(--cream);
  transform-origin:center;
}
.prod img{ width:100%; height:100%; object-fit:cover; }

/* The showcase lives in the right half; the copy owns the left half.
   Percentages keep the two columns from colliding at any width. */
.prod--hero{
  right:-6%;
  top:50%;
  width:min(46vw,700px);
  aspect-ratio:3/2;
  transform:translateY(-46%) rotate(-1.5deg);
  border-radius:var(--r-xl);
}
.prod--left{
  right:30%;
  bottom:5%;
  width:clamp(110px,12vw,190px);
  aspect-ratio:1;
  transform:rotate(-7deg);
  box-shadow:var(--sh-md);
}
.prod--right{
  right:5%;
  bottom:4%;
  width:clamp(92px,9vw,152px);
  aspect-ratio:2/3;
  transform:rotate(6deg);
  box-shadow:var(--sh-md);
}

/* L7 — mascot */
.layer--mascot img{
  position:absolute;
  top:12%; right:30%;
  width:clamp(58px,6vw,104px);
  filter:drop-shadow(0 14px 26px rgba(47,110,60,.25));
}

/* Floating idle motion */
.float-slow   { animation:bob 7s   ease-in-out infinite alternate; }
.float-slower { animation:bob 9.5s ease-in-out infinite alternate; }
.float-fast   { animation:bob 4.5s ease-in-out infinite alternate; }
@keyframes bob{
  from{ transform:translateY(0)     rotate(var(--rot,0deg)); }
  to  { transform:translateY(-16px) rotate(var(--rot,0deg)); }
}
.prod--left  { --rot:-7deg; }
.prod--right { --rot:6deg; }

/* Hero foreground */
/* The shell stays full width and centred; the copy column is constrained
   inside it so it hugs the left and never runs under the showcase art. */
.hero__content{
  position:relative;
  z-index:2;
  will-change:transform;
}
.hero__content > *{ max-width:min(54%, 38rem); }

.hero__title{
  font-size:var(--fs-hero);
  font-weight:600;
  letter-spacing:-.03em;
  line-height:.94;
  margin-bottom:1.5rem;
}
.hero__title-line{ display:block; }
.hero__title-line--accent{
  background:linear-gradient(96deg,var(--leaf) 0%,var(--forest) 38%,var(--gold) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  padding-bottom:.08em;   /* stop descenders clipping */
}

.hero__sub{
  font-size:var(--fs-lead);
  color:var(--text-soft);
  max-width:34rem;
  text-shadow:0 1px 0 rgba(255,255,255,.5);
}

.hero__actions{
  display:flex; flex-wrap:wrap; gap:.9rem;
  margin-top:2.25rem;
}

.hero__stats{
  display:flex; flex-wrap:wrap;
  gap:clamp(1.25rem,3vw,2.75rem);
  margin-top:2.5rem;
  padding-top:1.65rem;
  border-top:1px solid var(--line);
  max-width:34rem;
}
.hero__stats li{ display:flex; flex-direction:column; }
.hero__stats strong{
  font-family:var(--font-display);
  font-size:clamp(1.65rem,1.2rem + 1.4vw,2.4rem);
  font-weight:600;
  line-height:1;
  color:var(--forest);
  font-variant-numeric:tabular-nums;
}
.hero__stats span{
  font-size:.82rem;
  letter-spacing:.04em;
  color:var(--text-faint);
  margin-top:.35rem;
}

.hero__scroll{
  position:absolute;
  left:var(--gutter); bottom:1.5rem;
  z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.55rem;
  color:var(--text-faint);
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  transition:color var(--t-mid) var(--ease);
}
.hero__scroll:hover{ color:var(--forest); }
.hero__scroll-dot{
  width:24px; height:38px;
  border-radius:var(--r-pill);
  box-shadow:inset 0 0 0 2px currentColor;
  position:relative;
}
.hero__scroll-dot::after{
  content:"";
  position:absolute; left:50%; top:8px;
  width:4px; height:7px; border-radius:2px;
  background:currentColor;
  transform:translateX(-50%);
  animation:scrollDot 1.9s var(--ease) infinite;
}
@keyframes scrollDot{
  0%{ opacity:0; transform:translate(-50%,-4px); }
  35%{ opacity:1; }
  75%,100%{ opacity:0; transform:translate(-50%,14px); }
}


/* ---------- 7. MARQUEE STRIP ---------- */
.strip{
  background:var(--forest);
  color:var(--on-dark);
  padding-block:1.15rem;
  overflow:hidden;
}
.marquee{ display:flex; overflow:hidden; }
.marquee__track{
  display:flex; align-items:center; gap:2.25rem;
  white-space:nowrap;
  will-change:transform;
  animation:slide 34s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(-50%); } }
.marquee__item{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(.95rem,.9rem + .3vw,1.15rem);
  letter-spacing:.03em;
}
.marquee__dot{ color:var(--gold); font-size:.85rem; }


/* ---------- 8. ABOUT / OUR PROMISE ---------- */
.section--about{ background:var(--surface); }

.about__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2.5rem,3vw,5rem);
  align-items:center;
}

.about__media{ position:relative; margin:0; }
.about__media-frame{
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--sh-lg);
  background:var(--surface-alt);
  will-change:transform;
}
.about__media-frame img{ width:100%; }
.about__media::before{   /* warm halo behind the frame */
  content:"";
  position:absolute; inset:-14% -10% -18% -10%;
  z-index:-1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(243,197,60,.34),transparent 66%);
  filter:blur(40px);
}
.about__badge{
  position:absolute;
  left:-1rem; bottom:-1.4rem;
  display:flex; align-items:center; gap:.6rem;
  padding:.7rem 1.15rem;
  border-radius:var(--r-pill);
  background:var(--cream);
  box-shadow:var(--sh-md);
  font-family:var(--font-display); font-weight:600; font-size:.86rem;
  color:var(--forest);
}
.about__badge img{ width:30px; }

.promise__title{
  margin-top:clamp(4rem,3rem + 4vw,7rem);
  margin-bottom:2.25rem;
  text-align:center;
}

.promise{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(1.1rem,1vw + .6rem,1.75rem);
}
.promise__card{
  position:relative;
  padding:2.25rem 1.9rem;
  border-radius:var(--r-lg);
  background:var(--surface-alt);
  box-shadow:var(--sh-xs);
  overflow:hidden;
  transition:transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out);
}
.promise__card::before{
  content:"";
  position:absolute; inset:auto -30% -60% -30%;
  height:60%;
  background:radial-gradient(circle at 50% 100%,rgba(243,197,60,.32),transparent 70%);
  opacity:0;
  transition:opacity var(--t-slow) var(--ease);
}
.promise__card:hover{ transform:translateY(-6px); box-shadow:var(--sh-md); }
.promise__card:hover::before{ opacity:1; }

.promise__icon{
  display:grid; place-items:center;
  width:54px; height:54px;
  border-radius:var(--r-md);
  background:linear-gradient(145deg,var(--gold),var(--yellow));
  color:var(--forest-deep);
  box-shadow:0 8px 20px rgba(243,197,60,.34);
  margin-bottom:1.4rem;
}
.promise__icon svg{ width:26px; height:26px; stroke-width:1.7; }

.promise__card h4{
  font-size:1.22rem;
  margin-bottom:.6rem;
}
.promise__card p{ color:var(--text-soft); font-size:.98rem; }


/* ---------- 9. GAMES GRID + TABS ---------- */
.section--games{
  background:linear-gradient(180deg,var(--surface) 0%,var(--surface-alt) 22%,var(--surface-alt) 100%);
}

.tabs{ display:flex; justify-content:center; margin-bottom:clamp(2.25rem,2vw + 1rem,3.5rem); }
.tabs__list{
  position:relative;
  display:inline-flex;
  gap:.25rem;
  padding:.4rem;
  border-radius:var(--r-pill);
  background:var(--cream);
  box-shadow:var(--sh-sm), inset 0 0 0 1px var(--line);
}
.tab{
  position:relative;
  z-index:1;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.72rem 1.5rem;
  border-radius:var(--r-pill);
  font-family:var(--font-display); font-weight:600; font-size:.98rem;
  color:var(--text-soft);
  transition:color var(--t-mid) var(--ease);
}
.tab.is-active{ color:var(--on-dark); }
.tab__count{
  display:inline-grid; place-items:center;
  min-width:22px; height:22px; padding-inline:.35rem;
  border-radius:var(--r-pill);
  background:rgba(34,39,31,.09);
  font-size:.74rem; line-height:1;
  transition:background-color var(--t-mid) var(--ease), color var(--t-mid) var(--ease);
}
.tab.is-active .tab__count{ background:rgba(255,255,255,.24); color:var(--on-dark); }

.tabs__indicator{
  position:absolute;
  top:.4rem; left:0;          /* JS translates it to the active tab */
  height:calc(100% - .8rem);
  border-radius:var(--r-pill);
  background:linear-gradient(135deg,var(--leaf),var(--forest));
  box-shadow:0 6px 16px rgba(47,110,60,.32);
  transition:transform var(--t-mid) var(--ease-out), width var(--t-mid) var(--ease-out);
}

.tabpanel{ outline:none; }
.tabpanel[hidden]{ display:none; }
.tabpanel.is-entering > *{ animation:panelIn .42s var(--ease-out) both; }
@keyframes panelIn{
  from{ opacity:0; transform:translateY(14px); }
  to  { opacity:1; transform:none; }
}

.games{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:clamp(1.2rem,1vw + .8rem,2rem);
}

.game{ min-width:0; }

/* Featured card spans two columns on wide screens */
@media (min-width:900px){
  .game.is-featured{ grid-column:span 2; }
  .game.is-featured .game__link{ flex-direction:row; }
  .game.is-featured .game__body{ padding:2.25rem 2rem; }
  /* The featured panel is portrait while box mockups are square, so `cover`
     would slice the product. Show it whole on a near-white bed instead. */
  .game.is-featured .game__media{
    flex:0 0 50%;
    aspect-ratio:auto;
    background:linear-gradient(160deg,#FFFFFF,#F4F0E4);
  }
  .game.is-featured .game__media img{
    object-fit:contain;
    padding:clamp(1rem,2vw,2.25rem);
  }
  .game.is-featured .game__title{ font-size:clamp(1.4rem,1.1rem + .9vw,2rem); }
  .game.is-featured .game__desc{ font-size:1.02rem; }
}

.game__link{
  display:flex;
  flex-direction:column;
  height:100%;
  border-radius:var(--r-lg);
  background:var(--cream);
  box-shadow:var(--sh-xs);
  overflow:hidden;
  transition:transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out);
}
.game__link:hover{ transform:translateY(-8px); box-shadow:var(--sh-lg); }

.game__media{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:linear-gradient(160deg,var(--surface-alt),var(--surface-sink));
}
.game__media img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .8s var(--ease-out);
}
.game__link:hover .game__media img{ transform:scale(1.06); }

/* Glow sweep across the artwork on hover */
.game__media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);
  transform:translateX(-100%);
  transition:transform .85s var(--ease-out);
}
.game__link:hover .game__media::after{ transform:translateX(100%); }

/* For portrait artwork in the landscape grid slot — keeps the title visible. */
.game__media--top img{ object-position:50% 16%; }

.game__media--contain{ background:linear-gradient(160deg,#FFFDF7,var(--surface-sink)); }
.game__media--contain img{ object-fit:contain; padding:1.5rem; }

.game__media--placeholder{
  display:grid; place-items:center;
  background:
    radial-gradient(circle at 50% 40%,rgba(243,197,60,.30),transparent 62%),
    linear-gradient(160deg,var(--surface-alt),var(--surface-sink));
}
.game__media--placeholder img{
  width:clamp(72px,22%,120px); height:auto;
  object-fit:contain;
  opacity:.85;
  animation:bob 6s ease-in-out infinite alternate;
}

.game__flag{
  position:absolute; top:.9rem; left:.9rem;
  z-index:1;
  padding:.4rem .85rem;
  border-radius:var(--r-pill);
  background:var(--forest);
  color:var(--on-dark);
  font-family:var(--font-display); font-weight:600; font-size:.74rem;
  letter-spacing:.06em; text-transform:uppercase;
  box-shadow:var(--sh-sm);
}
.game__flag--soon{ background:var(--gold); color:var(--ink); }

.game__body{
  display:flex; flex-direction:column;
  flex:1;
  padding:1.6rem 1.5rem 1.75rem;
}
.game__title{
  font-size:1.2rem;
  line-height:1.18;
  margin-bottom:.6rem;
}
.game__desc{
  color:var(--text-soft);
  font-size:.95rem;
  margin-bottom:1.1rem;
}
.game__meta{
  display:flex; flex-wrap:wrap; gap:.45rem;
  margin-top:auto;
  padding-bottom:1.1rem;
}
.game__meta li{
  padding:.32rem .7rem;
  border-radius:var(--r-pill);
  background:rgba(107,164,62,.12);
  color:var(--forest);
  font-size:.76rem; font-weight:600;
  letter-spacing:.02em;
}
.game__cta{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--font-display); font-weight:600; font-size:.92rem;
  color:var(--forest);
  transition:gap var(--t-mid) var(--ease-out);
}
.game__cta svg{ width:17px; height:17px; }
.game__link:hover .game__cta{ gap:.8rem; }

.game--soon .game__link{ background:var(--surface-alt); }


/* ---------- 9b. CATS VS GOBLINS (Adults panel) ----------
   The grown-ups' game has its own dark fantasy palette. Going dark here is
   deliberate: it separates the adult title from the kids' shelf and lets the
   card art carry the section. */
.cvsg{
  --cat-accent:    #F7A23B;   /* warm cat orange */
  --gob-accent:    #8FD14F;   /* acid goblin green */
  --dungeon:       #241C2B;
  --dungeon-deep:  #150F1B;
  display:grid;
  gap:clamp(2.5rem,2rem + 3vw,4.5rem);
}

/* ---- Feature panel ---- */
.cvsg__feature{
  position:relative;
  display:grid;
  place-items:center;
  min-height:clamp(24rem,44vw,34rem);
  padding:clamp(2.75rem,2rem + 4vw,5.5rem) clamp(1.25rem,1rem + 2vw,3.5rem);
  border-radius:var(--r-xl);
  background:
    radial-gradient(90% 70% at 22% 22%, rgba(247,162,59,.20), transparent 60%),
    radial-gradient(90% 70% at 80% 78%, rgba(143,209,79,.18), transparent 60%),
    linear-gradient(155deg, var(--dungeon) 0%, var(--dungeon-deep) 100%);
  box-shadow:var(--sh-lg);
  overflow:hidden;
  isolation:isolate;
  text-align:center;
}

.cvsg__bg{ position:absolute; inset:0; z-index:-1; pointer-events:none; }

.cvsg__glow{
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  will-change:transform;
}
.cvsg__glow--cats{
  width:38vw; height:38vw; min-width:260px; min-height:260px;
  top:-14%; left:-8%;
  background:radial-gradient(circle, rgba(247,162,59,.55), transparent 68%);
}
.cvsg__glow--goblins{
  width:34vw; height:34vw; min-width:230px; min-height:230px;
  bottom:-16%; right:-6%;
  background:radial-gradient(circle, rgba(143,209,79,.45), transparent 68%);
}

/* Card backs float in as depth layers, dimmed so the copy stays readable */
.cvsg__back{
  position:absolute;
  width:clamp(140px,17vw,248px);
  border-radius:var(--r-md);
  opacity:.42;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  will-change:transform;
}
.cvsg__back--cats{    top:9%;    left:1%;  rotate:-9deg; }
.cvsg__back--goblins{ bottom:7%; right:1%; rotate:8deg;  }

.cvsg__intro{
  position:relative;
  max-width:38rem;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.cvsg__logo{
  width:clamp(230px,34vw,430px);
  height:auto;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.55));
}

.cvsg__kicker{
  margin:1.1rem 0 0;
  font-family:var(--font-display);
  font-weight:600;
  font-size:.82rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold);
}

.cvsg__lead{
  margin-top:1.35rem;
  font-size:var(--fs-lead);
  line-height:1.6;
  color:rgba(255,252,244,.8);
}

.cvsg__meta{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.5rem;
  margin-top:1.85rem;
}
.cvsg__meta li{
  padding:.4rem .95rem;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.09);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  color:rgba(255,252,244,.9);
  font-size:.79rem; font-weight:600;
  letter-spacing:.03em;
}

.cvsg__intro .btn{ margin-top:2.1rem; }

/* ---- Roster ---- */
.cvsg__roster{
  display:grid;
  gap:clamp(2.25rem,1.75rem + 2.5vw,3.75rem);
}

.faction{ position:relative; }

.faction__head{
  display:flex; align-items:center; gap:1rem;
  margin-bottom:1.5rem;
  padding-bottom:1.1rem;
  border-bottom:1px solid var(--line);
}
.faction__crest{
  display:grid; place-items:center;
  flex:0 0 auto;
  width:52px; height:52px;
  border-radius:var(--r-md);
  font-size:1.9rem;
  line-height:1;
  color:var(--cream);
}
.faction--cats    .faction__crest{ background:linear-gradient(145deg,#F7A23B,#E4761B); box-shadow:0 8px 20px rgba(228,118,27,.32); }
.faction--goblins .faction__crest{ background:linear-gradient(145deg,#8FD14F,#4E7B2A); box-shadow:0 8px 20px rgba(78,123,42,.32); }

.faction__name{ font-size:1.35rem; line-height:1.15; }
.faction__blurb{
  margin:.3rem 0 0;
  font-size:.94rem;
  color:var(--text-soft);
}

/* 6 tracks at desktop — both factions field 6 pieces, so each roster fills
   exactly one row. */
.roster{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(162px,1fr));
  gap:clamp(1rem,.75rem + 1vw,1.6rem);
}

.roster__card figure{
  display:flex;
  flex-direction:column;
  height:100%;
  margin:0;
  border-radius:var(--r-md);
  background:var(--cream);
  box-shadow:var(--sh-xs);
  overflow:hidden;
  transition:transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out);
}
.roster__card:hover figure{ transform:translateY(-6px); box-shadow:var(--sh-md); }

/* Source cards are square with the name banner and flavour scroll printed
   across the bottom third. Cropping to the top 2/3 keeps just the character
   art, so the caption below is the only place the name appears. */
.roster__card img{
  width:100%;
  aspect-ratio:3/2;
  object-fit:cover;
  object-position:50% 0%;
  background:var(--surface-sink);
}

.roster__card figcaption{
  display:flex;
  flex-direction:column;
  gap:.3rem;
  flex:1;
  padding:.95rem 1rem 1.15rem;
  border-top:3px solid transparent;
}
.faction--cats    .roster__card figcaption{ border-top-color:#F7A23B; }
.faction--goblins .roster__card figcaption{ border-top-color:#8FD14F; }

.roster__piece{
  font-family:var(--font-display);
  font-weight:600;
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--text-faint);
}
.roster__name{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1rem;
  line-height:1.2;
  color:var(--text);
}
.roster__quote{
  font-size:.85rem;
  line-height:1.45;
  color:var(--text-soft);
  font-style:italic;
}
.roster__quote::before{ content:"\201C"; }
.roster__quote::after { content:"\201D"; }


/* ---------- 10. SPOTLIGHT ---------- */
.section--spotlight{
  background:var(--surface-alt);
  overflow:hidden;
}
.spotlight{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1fr);
  gap:clamp(2.5rem,3vw,5.5rem);
  align-items:center;
}

.spotlight__media{ position:relative; }
.spotlight__glow{
  position:absolute; inset:-16%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(243,197,60,.45),rgba(107,164,62,.14) 48%,transparent 70%);
  filter:blur(44px);
}
.spotlight__box{
  position:relative;
  width:100%;
  border-radius:var(--r-xl);
  box-shadow:var(--sh-lg);
  will-change:transform;
}
.spotlight__chip{
  position:absolute;
  right:-6%; bottom:-8%;
  width:clamp(110px,32%,200px);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-md);
  border:5px solid var(--cream);
}

.box-list{
  display:grid;
  gap:.85rem;
  margin-top:2rem;
  margin-bottom:2.5rem;
}
.box-list li{
  position:relative;
  padding-left:2.1rem;
  color:var(--text-soft);
  font-size:.98rem;
}
.box-list li::before{
  content:"";
  position:absolute; left:0; top:.5em;
  width:12px; height:12px;
  border-radius:4px;
  background:linear-gradient(140deg,var(--gold),var(--leaf));
  box-shadow:0 3px 8px rgba(243,197,60,.4);
}
.box-list strong{
  display:block;
  font-family:var(--font-display); font-weight:600;
  color:var(--text);
  font-size:1.02rem;
  line-height:1.3;
}


/* ---------- 11. LEARN THROUGH PLAY ---------- */
.section--learn{ background:var(--surface); }

.learn{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(1.1rem,1vw + .6rem,1.6rem);
}
.learn__card{
  position:relative;
  display:flex; flex-direction:column;
  padding:2.1rem 1.75rem;
  border-radius:var(--r-lg);
  background:var(--surface-alt);
  box-shadow:var(--sh-xs);
  overflow:hidden;
  cursor:pointer;
  transition:transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out), background-color var(--t-mid) var(--ease);
}
.learn__card::after{
  content:"";
  position:absolute; left:0; top:0;
  width:100%; height:4px;
  background:linear-gradient(90deg,var(--leaf),var(--gold));
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-slow) var(--ease-out);
}
.learn__card:hover{ transform:translateY(-6px); box-shadow:var(--sh-md); background:var(--cream); }
.learn__card:hover::after{ transform:scaleX(1); }

.learn__num{
  font-family:var(--font-display); font-weight:600;
  font-size:.82rem; letter-spacing:.18em;
  color:var(--gold);
  margin-bottom:1rem;
}
.learn__card h3{ font-size:1.18rem; line-height:1.22; margin-bottom:.7rem; }
.learn__card p{ color:var(--text-soft); font-size:.95rem; flex:1; }


/* ---------- 12. CTA ---------- */
.cta{
  position:relative;
  padding-block:clamp(5rem,4rem + 6vw,9rem);
  background:linear-gradient(150deg,var(--forest) 0%,var(--forest-deep) 55%,#1B4224 100%);
  color:var(--on-dark);
  overflow:hidden;
  isolation:isolate;
}
.cta__bg{ position:absolute; inset:0; z-index:-1; }
.cta__orb{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  will-change:transform;
}
.cta__orb--a{
  width:44vw; height:44vw; min-width:320px; min-height:320px;
  top:-18%; right:-8%;
  background:radial-gradient(circle,rgba(243,197,60,.55),transparent 66%);
}
.cta__orb--b{
  width:36vw; height:36vw; min-width:260px; min-height:260px;
  bottom:-20%; left:-6%;
  background:radial-gradient(circle,rgba(107,164,62,.55),transparent 66%);
}

.cta__inner{ position:relative; text-align:center; max-width:46rem; }
.cta__mark{ width:clamp(64px,8vw,100px); margin:0 auto 1.75rem; }

.cta__title{
  font-size:var(--fs-h2);
  line-height:1.04;
  color:var(--on-dark);
}
.cta__sub{
  font-size:var(--fs-lead);
  color:var(--on-dark-soft);
  margin-top:1.25rem;
}

.cta__form{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem;
  margin-top:2.5rem;
}
.cta__input{
  flex:1 1 20rem;
  max-width:24rem;
  padding:1.05rem 1.4rem;
  border:0;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.12);
  box-shadow:inset 0 0 0 1.5px rgba(251,248,239,.28);
  color:var(--on-dark);
  transition:box-shadow var(--t-mid) var(--ease), background-color var(--t-mid) var(--ease);
}
.cta__input::placeholder{ color:rgba(251,248,239,.5); }
.cta__input:focus{
  outline:none;
  background:rgba(255,255,255,.18);
  box-shadow:inset 0 0 0 2px var(--gold);
}
.cta__input[aria-invalid="true"]{ box-shadow:inset 0 0 0 2px #F08A6C; }

.cta__note{
  flex:1 0 100%;
  min-height:1.4em;
  margin:.35rem 0 0;
  font-size:var(--fs-small);
  color:var(--gold);
}
.cta__note.is-error{ color:#FFB9A3; }

.cta__alt{
  margin-top:1.75rem;
  font-size:var(--fs-small);
  color:var(--on-dark-soft);
}
.cta__alt a{
  color:var(--gold);
  border-bottom:1px solid rgba(243,197,60,.4);
  transition:border-color var(--t-fast) var(--ease);
}
.cta__alt a:hover{ border-bottom-color:var(--gold); }


/* ---------- 13. FOOTER + BACK TO TOP ---------- */
.footer{
  background:var(--surface-alt);
  padding-top:clamp(3.5rem,3rem + 3vw,5.5rem);
  border-top:1px solid var(--line);
}
.footer__grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1.2fr 1fr;
  gap:clamp(2rem,3vw,3.5rem);
  padding-bottom:clamp(2.5rem,2vw + 1.5rem,4rem);
}

.footer__brand img{ width:clamp(110px,10vw,148px); height:auto; }
.footer__tagline{
  margin-top:1.1rem;
  font-family:var(--font-display); font-weight:500;
  color:var(--text-soft);
  font-size:1rem;
}

.footer__col h3{
  font-size:.8rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--leaf);
  margin-bottom:1.15rem;
}
.footer__col li + li{ margin-top:.55rem; }
.footer__col a{
  color:var(--text-soft);
  font-size:.95rem;
  transition:color var(--t-fast) var(--ease);
}
.footer__col a:hover{ color:var(--forest); }
.footer__col address{ font-style:normal; color:var(--text-soft); font-size:.95rem; }
.footer__col address p{ margin-bottom:.9rem; }

.social{ display:flex; flex-wrap:wrap; gap:.55rem; }
.social li{ margin:0 !important; }
.social a{
  display:grid; place-items:center;
  width:42px; height:42px;
  border-radius:var(--r-md);
  background:var(--cream);
  color:var(--forest);
  box-shadow:var(--sh-xs);
  transition:transform var(--t-mid) var(--ease-out), background-color var(--t-mid) var(--ease), color var(--t-mid) var(--ease);
}
.social a svg{ width:19px; height:19px; }
.social a:hover{
  transform:translateY(-3px);
  background:var(--forest);
  color:var(--on-dark);
}
.footer__small{
  margin-top:1.1rem;
  font-size:var(--fs-small);
  color:var(--text-faint);
}

.footer__bar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1rem;
  padding-block:1.5rem;
  border-top:1px solid var(--line);
  font-size:var(--fs-small);
  color:var(--text-faint);
}
.footer__bar p{ margin:0; }
.footer__legal{ display:flex; gap:1.4rem; }
.footer__legal a{ transition:color var(--t-fast) var(--ease); }
.footer__legal a:hover{ color:var(--forest); }

.to-top{
  position:fixed;
  right:clamp(1rem,3vw,2rem);
  bottom:clamp(1rem,3vw,2rem);
  z-index:80;
  display:grid; place-items:center;
  width:48px; height:48px;
  border-radius:50%;
  background:var(--forest);
  color:var(--on-dark);
  box-shadow:var(--sh-md);
  opacity:0; transform:translateY(12px) scale(.9);
  transition:opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease-out), background-color var(--t-mid) var(--ease);
}
.to-top.is-visible{ opacity:1; transform:none; }
.to-top:hover{ background:var(--forest-deep); transform:translateY(-3px); }
.to-top svg{ width:20px; height:20px; }


/* ---------- 14. SCROLL REVEAL ---------- */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .72s var(--ease-out), transform .72s var(--ease-out);
  transition-delay:var(--reveal-delay,0ms);
}
.reveal.is-visible{ opacity:1; transform:none; }
/* Never hide content if JS fails to run */
.no-js .reveal{ opacity:1; transform:none; }


/* ---------- 15. RESPONSIVE ---------- */
@media (max-width:1100px){
  .footer__grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:960px){
  :root{ --header-h:68px; }

  .nav{
    position:fixed;
    inset:0 0 0 auto;
    z-index:95;
    width:min(23rem,86vw);
    flex-direction:column;
    align-items:stretch;
    justify-content:center;
    gap:2rem;
    padding:5rem 2rem;
    background:var(--cream);
    box-shadow:-20px 0 60px rgba(47,110,60,.16);
    transform:translateX(100%);
    transition:transform .4s var(--ease-out);
    overflow-y:auto;
  }
  .nav.is-open{ transform:translateX(0); }
  .nav__list{ flex-direction:column; align-items:stretch; gap:.25rem; }
  .nav__link{
    padding:.85rem 1rem;
    font-family:var(--font-display);
    font-size:1.25rem;
    font-weight:600;
    color:var(--text);
    border-radius:var(--r-md);
  }
  .nav__link::after{ display:none; }
  .nav__link.is-active{ background:rgba(107,164,62,.12); }
  .nav__cta{ justify-content:center; }
  /* Must sit above the open drawer, or there is no visible close button. */
  .nav-toggle{ display:flex; position:relative; z-index:96; }

  .about__grid{ grid-template-columns:1fr; }
  .about__media{ order:-1; }
  .spotlight{ grid-template-columns:1fr; }
  .spotlight__media{ max-width:26rem; margin-inline:auto; }

  /* Hero: the copy goes full width here, so the showcase drops back to being
     a lit backdrop rather than a card competing with the text. */
  .prod--hero{
    right:-22%;
    width:min(72vw,560px);
    transform:translateY(-34%) rotate(-1.5deg);
    opacity:.42;
    box-shadow:0 20px 60px rgba(47,110,60,.10);
  }
  .prod--left{ left:auto; right:4%; bottom:4%; width:clamp(96px,15vw,150px); opacity:.85; }
  .prod--right{ display:none; }
  .layer--mascot img{ top:7%; right:12%; }
  .hero__content > *{ max-width:100%; }
  .hero__sub{ max-width:34rem; }
}

/* Short viewports: the scroll cue would crowd the stats */
@media (max-height:720px){
  .hero__scroll{ display:none; }
}

@media (max-width:760px){
  .hero{ min-height:auto; padding-top:calc(var(--header-h) + 4rem); padding-bottom:7rem; }
  .hero__stats{ gap:1.5rem 2rem; }
  .hero__stats li{ flex:1 1 7rem; }
  .hero__scroll{ display:none; }

  .games{ grid-template-columns:1fr; }
  .game.is-featured .game__link{ flex-direction:column; }

  .footer__grid{ grid-template-columns:1fr; gap:2.5rem; }
  .footer__bar{ flex-direction:column; align-items:flex-start; }

  .about__badge{ left:auto; right:0; bottom:-1.1rem; }
  .spotlight__chip{ right:-4%; width:34%; }

  /* Cats vs Goblins: card backs become a faint backdrop, roster goes 2-up */
  .cvsg__back{ width:clamp(120px,32vw,190px); opacity:.28; }
  .cvsg__back--cats{ top:3%; left:-6%; }
  .cvsg__back--goblins{ bottom:2%; right:-6%; }
  .roster{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .faction__head{ gap:.8rem; }
  .faction__crest{ width:44px; height:44px; font-size:1.6rem; }
}

@media (max-width:460px){
  .hero__actions .btn{ width:100%; }
  /* Column flex: flex-basis would be read as a height, so reset it. */
  .cta__form{ flex-direction:column; align-items:stretch; }
  .cta__input{ flex:0 0 auto; width:100%; max-width:none; }
  .cta__note{ flex:0 0 auto; }
  .tab{ padding:.65rem 1.1rem; font-size:.9rem; }
}

/* Coarse pointers: parallax tilt is off, so keep the art calm */
@media (hover:none){
  .game__link:hover{ transform:none; box-shadow:var(--sh-xs); }
  .game__link:hover .game__media img{ transform:none; }
}


/* ---------- 16. REDUCED MOTION / PRINT ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
  .layer{ transform:none !important; }
  .marquee__track{ animation:none; }
}

@media print{
  .site-header,.hero__stage,.hero__scroll,.to-top,.strip,.cta__bg,.nav-toggle{ display:none !important; }
  body{ background:#fff; color:#000; }
  .reveal{ opacity:1; transform:none; }
  .section{ padding-block:1.5rem; break-inside:avoid; }
}