/* ==========================================================================
   THEME: EGG  (Chicks on the Menu!, working title Project Egg)

   A cute party game gets a soft, sunny skin. Colours are taken from the key
   art in assets/img/cotm-banner: chick yellow, fence wood, leaf green, fox
   orange. Corners are round, buttons are chunky and squishy, type is Fredoka.

   Applies to any section with data-theme="egg".
   ========================================================================== */

@font-face {
  font-family: "Fredoka"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../assets/fonts/fredoka-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fredoka"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../assets/fonts/fredoka-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The two grounds are set on the whole page, not only inside the game's
   sections, because the top bar fades into whichever one is under it. */
:root {
  --egg-ground:    #f2f6e5;   /* the pale green-cream of the studio's own doodle pattern */
  --egg-soil:      #ffdb80;   /* the hero's ground. Change this one value to recolour it */
  --egg-soil-ink:  #4a2e16;   /* text on that ground: dark for a light ground, #fffdf6 for a dark one */
}
[data-theme="egg"] {
  --egg-white:     #fffdf6;
  --egg-ink:       #4a2e16;   /* the brown behind the logo letters, darkened for text */
  --egg-ink-soft:  #6f5236;
  --egg-yolk:      #ffc530;
  --egg-yolk-deep: #d99412;
  --egg-leaf:      #6aa82c;
  --egg-leaf-deep: #2f6a1c;
  --egg-fox:       #ef6f1c;
  --egg-shadow:    rgb(107 74 48 / 0.2);

  /* re-point the shared tokens, so shared pieces (.copy, .note, .d-lg) follow */
  --sc-canvas: var(--egg-ground);
  --sc-surface: var(--egg-white);
  --sc-ink: var(--egg-ink);
  --sc-ink-soft: var(--egg-ink-soft);
  --sc-accent: var(--egg-yolk);
  --sc-accent-ink: var(--egg-ink);
  --sc-font-display: "Fredoka", system-ui, sans-serif;
  --hair: rgb(74 46 22 / 0.14);
  --hair-strong: rgb(74 46 22 / 0.3);

  position: relative;
  background: var(--egg-ground);
  color: var(--egg-ink);
}
[data-theme="egg"] :focus-visible { outline-color: var(--egg-ink); border-radius: 999px; }

[data-theme="egg"] .d-lg { font-weight: 700; letter-spacing: -0.01em; line-height: 1.05; }
[data-theme="egg"] .d-md { font-weight: 700; letter-spacing: 0; }
[data-theme="egg"] .lede { font-family: "Fredoka", var(--sc-font-text); font-weight: 500; }

/* ----------------------------------------------------- squishy buttons --
   A bright top, a darker lip underneath, and a real press: the button rises
   a little on hover and sinks onto its lip when pushed. */
[data-theme="egg"] .btn {
  min-height: 3.5rem; padding: 0 1.75rem; gap: 0.6rem;
  border: 0; border-radius: 999px;
  font-family: "Fredoka", var(--sc-font-text); font-weight: 600; font-size: 1.125rem;
  transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 180ms var(--ease-out), background-color 180ms var(--ease-out);
}
[data-theme="egg"] .btn--primary {
  background: var(--egg-yolk); color: var(--egg-ink);
  border: 3px solid var(--egg-ink);
  box-shadow: 0 6px 0 var(--egg-ink), 0 12px 20px var(--egg-shadow);
}
[data-theme="egg"] .btn--primary:hover { background: #ffd052; }
[data-theme="egg"] .btn--line {
  background: var(--egg-white); color: var(--egg-leaf-deep);
  border: 3px solid var(--egg-ink);
  box-shadow: 0 6px 0 var(--egg-ink), 0 12px 20px var(--egg-shadow);
}
[data-theme="egg"] .btn--line:hover { background: #ffffff; }
[data-theme="egg"] .btn:hover  { transform: translateY(-3px) rotate(-1.2deg); }
[data-theme="egg"] .btn:active { transform: translateY(5px); translate: none; transition-duration: 60ms; }
[data-theme="egg"] .btn:hover  { box-shadow: 0 9px 0 var(--egg-ink), 0 18px 24px var(--egg-shadow); }
[data-theme="egg"] .btn:active { box-shadow: 0 1px 0 var(--egg-ink), 0 3px 6px var(--egg-shadow); }
/* a little egg riding in the main button */
[data-theme="egg"] .btn--primary::before {
  content: ""; flex: none; width: 0.82em; height: 1.05em; rotate: -14deg;
  background: var(--egg-white); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  box-shadow: inset -0.12em -0.14em 0 rgb(217 148 18 / 0.35);
  transition: rotate 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
[data-theme="egg"] .btn--primary:hover::before { rotate: 16deg; }

/* ================================================================== HERO ==
   The Chicks on the Menu! scene, rebuilt from the banner's separate layers.

   .coop__stage has the banner's exact proportions (4000 x 1292) and is pinned
   to the right edge, so every layer is placed with the percentages it had in
   the source file and stays registered with the background at any size.
   The left part of the banner (where the logo sat) is allowed to crop; the
   logo is its own layer here and sits with the copy instead.

   On load the three animals arrive in a chase from the right: chick, then
   hen, then fox. The bush shakes as they pass, the leaves are blown in, and
   the logo pops last. After that everything idles gently.
   ========================================================================== */
.coop {
  --stage-h: max(min(46.2vw, 54svh), 32.4vw);   /* never narrower than the screen */
  --shift: 0px;                                   /* how far the stage hangs off the right edge */
  --logo-w: min(27.7vw, 26.7rem, 35svh);   /* the logo file includes the glow around its feather, so its lettering is a little narrower than this */
  min-height: 100svh;
  padding-bottom: calc(clamp(1.75rem, 5svh, 3.5rem) + 40px);
  overflow: clip;
  background: var(--egg-soil);
}
/* the hero's own bottom edge: the next section's pale ground rises into the
   brown in the same soft bumps as the edge under the scene */
.coop::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 44px; z-index: 3; pointer-events: none;
  background: radial-gradient(circle 40px at 50% 44px, var(--egg-ground) 39px, transparent 40px) 50% 0 / 70px 100px repeat-x;
}
.coop__scene {
  position: absolute; inset: 0 0 auto 0; height: var(--stage-h);
  overflow: clip; background: var(--egg-soil);
}
.coop__stage {
  position: absolute; top: 0; right: calc(var(--shift) * -1);
  height: 100%; aspect-ratio: 4000 / 1292;
}
.coop__plane { position: absolute; inset: 0; will-change: transform; }
.coop__bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }

/* sunbeams: the banner has them painted in; here they are light, so they can breathe */
.coop__rays {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background:
    linear-gradient(118deg, transparent 38%, rgb(255 246 190 / 0.75) 43%, rgb(255 246 190 / 0.2) 50%, transparent 55%),
    linear-gradient(118deg, transparent 58%, rgb(255 246 190 / 0.6) 62%, transparent 68%);
}

.actor, .prop, .leaf { position: absolute; }
.actor img, .prop img, .leaf img, .actor__idle, .actor__hop, .leaf__drift { display: block; width: 100%; height: auto; max-width: none; }

/* positions and sizes straight from the source layers (x/4000, y/1292, w/4000) */
.actor--chick { left: 31.475%; top: 5.573%;  width: 22.6%; }
.actor--hen   { left: 57.5%;   top: 42.337%; width: 22.925%; }
.actor--fox   { left: 79.275%; top: 3.56%;   width: 20.725%; }
.prop--bush   { left: 75.85%;  top: 61%;     width: 24.15%; transform-origin: 62% 100%; }
/* the branch hangs from whatever the top-left corner of the screen is */
.prop--branch { left: calc(100% - 100vw - var(--shift)); top: 0; width: 20.35%; transform-origin: 0 0; }

.leaf--1 { left: 21.55%; top: 8.514%;  width: 8.3%;  --dx: -12%; --dy: 16%;  --dr: -10deg; --dur: 6.4s; --in: 0.35s; }
.leaf--2 { left: 43.55%; top: 68.885%; width: 9.7%;  --dx: 8%;   --dy: -10%; --dr: 7deg;   --dur: 7.6s; --in: 0.55s; }
.leaf--3 { left: 53.35%; top: 6.347%;  width: 3.9%;  --dx: -30%; --dy: 40%;  --dr: -22deg; --dur: 5.2s; --in: 0.45s; }
.leaf--4 { left: 58.25%; top: 9.133%;  width: 2.9%;  --dx: 34%;  --dy: 30%;  --dr: 26deg;  --dur: 4.6s; --in: 0.7s; }
.leaf--5 { left: 69.15%; top: 15.325%; width: 3.0%;  --dx: -26%; --dy: 44%;  --dr: -30deg; --dur: 5.8s; --in: 0.85s; }
.leaf--6 { left: 78.15%; top: 5.108%;  width: 2.8%;  --dx: 30%;  --dy: 36%;  --dr: 24deg;  --dur: 4.9s; --in: 1.0s; }
.leaf--7 { left: 81.35%; top: 53.096%; width: 3.2%;  --dx: -36%; --dy: -30%; --dr: -20deg; --dur: 5.5s; --in: 1.1s; }

/* the scene's bottom edge: a row of soft bumps in the ground colour. It sits
   outside the clipped scene and laps 4px over its bottom edge so the join is
   covered. Whole-pixel sizes and a tile taller than the element keep the
   repeated gradient from bleeding a hairline along its own edge. */
.coop__hill {
  position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none;
  top: calc(var(--stage-h) - 40px);
  top: round(down, calc(var(--stage-h) - 40px), 1px);
  height: 46px;
  background: radial-gradient(circle 40px at 50% 44px, var(--egg-soil) 39px, transparent 40px) 50% 0 / 70px 100px repeat-x;
}

/* footprints in the dirt, the chase written on the ground. The layer covers
   the brown ground; js/site.js lays the first trail (hen prints all the way
   across, fox prints following from the right) and stamps more under the
   mouse. Older prints fade as new ones arrive. */
.coop__tracks {
  position: absolute; left: 0; top: var(--stage-h); z-index: 1; pointer-events: none;
  width: 100%; height: calc(100% - var(--stage-h)); overflow: hidden;
  color: var(--egg-ink); opacity: 0.4;
}
/* each print presses in as it is made, then fades slowly as it ages */
.coop__tracks use { transition: opacity 600ms linear; animation: print-in 240ms ease-out; }
@keyframes print-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .coop__tracks use { transition: none; animation: none; } }

/* The ground under the scene holds everything that is not art. The scene is
   the picture; the name, the line and the buttons sit below it on the plain
   colour. On wide screens the name is on the left and the buttons are a
   stacked pair on the right, lined up with the replay button above them; on
   narrow screens the buttons follow the text. */
.coop__copy {
  position: relative; z-index: 5;
  padding: calc(var(--stage-h) + 0.6rem) var(--pad-r) 0 var(--pad-l);
}
[data-theme="egg"] .kicker {
  display: inline-block; padding: 0.3rem 0.85rem; border-radius: 999px;
  background: var(--egg-white); color: var(--egg-ink);
  font-family: "Fredoka", var(--sc-font-text); font-weight: 600; font-size: 0.9375rem;
  box-shadow: 0 3px 0 var(--egg-shadow);
}
.coop__logo { margin: 0.5rem 0 0 -0.6rem; width: var(--logo-w); }
.coop__logo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 0.5rem 0.6rem rgb(60 40 10 / 0.25)); }
.coop__copy .lede { margin-top: clamp(0.4rem, 1.2svh, 0.8rem); max-width: none; color: var(--egg-soil-ink); }
.coop__copy .lede span { display: block; }
.coop__copy .actions { margin-top: 1.1rem; gap: 0.9rem; }
@media (min-width: 861px) {
  .coop__copy {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 2rem; align-items: center;
    padding-right: var(--rail-w);
  }
  .coop__id { justify-self: start; }
  .coop__copy .actions { flex-direction: column; flex-wrap: nowrap; gap: 1.2rem; width: 14.5rem; margin-top: 0; }
  .coop__copy .actions .btn { width: 100%; min-height: 3.875rem; font-size: 1.3125rem; }
}

/* replay: a small round button in the scene's bottom right corner, just left
   of the rail and above the ground's bumps, that runs the chase again */
.coop__replay {
  --size: 3rem;
  position: absolute; z-index: 5;
  right: var(--rail-w); top: calc(var(--stage-h) - 40px - var(--size) - 1rem);
  display: grid; place-items: center; width: var(--size); height: var(--size); padding: 0;
  border: 3px solid var(--egg-ink); border-radius: 50%;
  background: var(--egg-white); color: var(--egg-ink); cursor: pointer;
  box-shadow: 0 4px 0 var(--egg-ink), 0 10px 16px rgb(40 24 6 / 0.25);
  transition: translate 160ms var(--ease-out), box-shadow 160ms var(--ease-out), background-color 160ms;
}
.coop__replay[hidden] { display: none; }
.coop__replay:hover  { translate: 0 -2px; background: #fff3c4; box-shadow: 0 6px 0 var(--egg-ink), 0 14px 20px rgb(40 24 6 / 0.25); }
.coop__replay:active { translate: 0 3px; box-shadow: 0 1px 0 var(--egg-ink), 0 3px 6px rgb(40 24 6 / 0.25); }
.coop__replay svg { display: block; }
@media (max-width: 860px) { .coop__replay { display: none; } }   /* no replay on small screens */

/* phones held upright: a taller scene, cropped to the hen, chick tucked above her */
@media (max-width: 860px) and (max-aspect-ratio: 1 / 1) {
  .coop {
    --stage-h: 43svh;
    /* show the banner from about 52% to 84% across: the hen in the middle */
    --shift: calc(var(--stage-h) * 3.096 * 0.16);
    --logo-w: min(62vw, 16rem);
  }
  /* the chick is airborne, so it can go anywhere: tuck it above the hen */
  .actor--chick { left: 52.5%; top: 8%; width: 13.2%; }   /* low enough that the top bar does not hide its face */
  .actor--fox   { left: 70.5%; }
  .prop--bush   { left: 69%; top: 66%; }
  .prop--branch { width: 12%; }
  .coop__copy .actions .btn { flex: 1 1 auto; }
}

/* ------------------------------------------------------- the chase --
   Everything below only runs with JavaScript (html.js) and without a
   reduced-motion preference. js/site.js adds .is-go once the art has loaded,
   and .is-live while the hero is on screen so the idle loops rest otherwise. */
@media (prefers-reduced-motion: no-preference) {
  html.js .coop:not(.is-go) :is(.actor, .leaf, .coop__logo, .kicker, .lede, .actions, .coop__replay) { opacity: 0; }
  html.js .coop.is-go:not(.is-live) * { animation-play-state: paused !important; }

  .coop.is-go .coop__bg { animation: coop-settle 1600ms var(--ease-out) both; transform-origin: 70% 60%; }
  .coop.is-go .coop__rays { animation: rays 7s ease-in-out 1s infinite alternate; }

  .coop.is-go .actor--chick { animation: chick-in 1250ms cubic-bezier(0.33, 0.55, 0.45, 1) 150ms both; }
  .coop.is-go .actor--hen   { animation: hen-in 1150ms cubic-bezier(0.33, 0.55, 0.45, 1) 480ms both; }
  .coop.is-go .actor--fox   { animation: fox-in 1050ms cubic-bezier(0.33, 0.55, 0.45, 1) 900ms both; }
  .coop.is-go .actor--hen .actor__hop { animation: hops 1150ms ease-in-out 480ms both; }

  .coop.is-go .actor--chick .actor__idle { animation: chick-float 2.9s ease-in-out 1.5s infinite alternate; }
  .coop.is-go .actor--hen .actor__idle   { animation: hen-trot 1.7s ease-in-out 1.8s infinite alternate; transform-origin: 50% 90%; }
  .coop.is-go .actor--fox .actor__idle   { animation: fox-lunge 2.3s ease-in-out 2.1s infinite alternate; transform-origin: 60% 80%; }

  .coop.is-go .prop--bush   { animation: rustle 520ms ease-in-out 250ms 3, bush-sway 4.6s ease-in-out 1.9s infinite alternate; }
  .coop.is-go .prop--branch { animation: gust 1700ms ease-in-out 350ms, branch-sway 5.6s ease-in-out 2.1s infinite alternate; }

  .coop.is-go .leaf { animation: leaf-in 1700ms cubic-bezier(0.16, 0.8, 0.3, 1) var(--in) both; }
  .coop.is-go .leaf__drift { animation: leaf-drift var(--dur) ease-in-out calc(var(--in) + 1.7s) infinite alternate; }

  .coop.is-go .kicker     { animation: egg-rise 700ms var(--ease-out) 1150ms both; }
  .coop.is-go .coop__logo { animation: logo-pop 800ms cubic-bezier(0.3, 1.35, 0.5, 1) 1350ms both; transform-origin: 30% 70%; }
  .coop.is-go .lede       { animation: egg-rise 700ms var(--ease-out) 1750ms both; }
  .coop.is-go .actions    { animation: egg-rise 700ms var(--ease-out) 1900ms both; }
  .coop.is-go .coop__replay { animation: replay-in 500ms linear 2400ms backwards; }

  /* a replay runs the scene again and leaves the logo, text and buttons alone */
  .coop.is-go.is-replay :is(.kicker, .coop__logo, .lede, .actions, .coop__replay) { animation: none; }
  .coop__replay.is-spun svg { animation: replay-spin 650ms var(--ease-out); }
}

@keyframes replay-in { from { opacity: 0; } }
@keyframes replay-spin { from { rotate: 0deg; } to { rotate: -360deg; } }
@keyframes coop-settle { from { transform: scale(1.05); } to { transform: none; } }
@keyframes rays { from { opacity: 0.55; } to { opacity: 1; } }

@keyframes chick-in {
  0%   { transform: translate3d(95vw, -22%, 0) rotate(30deg); }
  58%  { transform: translate3d(-5%, 4%, 0) rotate(-10deg); }
  78%  { transform: translate3d(2%, -1.5%, 0) rotate(3deg); }
  100% { transform: none; }
}
@keyframes hen-in {
  0%   { transform: translate3d(75vw, 0, 0) rotate(7deg); }
  62%  { transform: translate3d(-4%, 0, 0) rotate(-4deg); }
  82%  { transform: translate3d(1.2%, 0, 0) rotate(1.5deg); }
  100% { transform: none; }
}
@keyframes hops {
  0%, 26%, 52%, 78%, 100% { transform: translate3d(0, 0, 0); }
  13% { transform: translate3d(0, -9%, 0); }
  39% { transform: translate3d(0, -7%, 0); }
  65% { transform: translate3d(0, -4%, 0); }
}
@keyframes fox-in {
  0%   { transform: translate3d(50vw, -26%, 0) rotate(16deg); }
  58%  { transform: translate3d(-6%, 3%, 0) rotate(-5deg); }
  80%  { transform: translate3d(1.6%, -1%, 0) rotate(1.6deg); }
  100% { transform: none; }
}
@keyframes chick-float { from { transform: translate3d(0, 0, 0) rotate(0.8deg); } to { transform: translate3d(0, -2.6%, 0) rotate(-2deg); } }
@keyframes hen-trot    { from { transform: translate3d(0, 0, 0) rotate(0); }      to { transform: translate3d(-0.8%, -1.5%, 0) rotate(-1.3deg); } }
@keyframes fox-lunge   { from { transform: translate3d(0, 0, 0) rotate(0); }      to { transform: translate3d(-2%, 0.6%, 0) rotate(-1.6deg); } }

@keyframes rustle {
  0%, 100% { transform: none; }
  20% { transform: rotate(-3.2deg) scale(1.03, 0.97); }
  45% { transform: rotate(2.6deg) scale(0.98, 1.03); }
  70% { transform: rotate(-1.4deg); }
}
@keyframes bush-sway   { from { transform: rotate(-0.7deg); } to { transform: rotate(0.9deg) scale(1.008); } }
@keyframes gust {
  0%, 100% { transform: none; }
  22% { transform: rotate(5.5deg); }
  48% { transform: rotate(-2.6deg); }
  72% { transform: rotate(1.3deg); }
}
@keyframes branch-sway { from { transform: rotate(-1.1deg); } to { transform: rotate(1.4deg); } }

@keyframes leaf-in {
  0%   { transform: translate3d(60vw, -35vh, 0) rotate(300deg); opacity: 0; }
  12%  { opacity: 1; }
  100% { transform: none; opacity: 1; }
}
@keyframes leaf-drift {
  from { transform: translate3d(0, 0, 0) rotate(0); }
  to   { transform: translate3d(var(--dx), var(--dy), 0) rotate(var(--dr)); }
}
@keyframes logo-pop {
  0%   { transform: scale(0.5) rotate(-8deg); opacity: 0; }
  55%  { transform: scale(1.08) rotate(2deg); opacity: 1; }
  78%  { transform: scale(0.98) rotate(-0.6deg); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
@keyframes egg-rise { from { transform: translate3d(0, 16px, 0); opacity: 0; } to { transform: none; opacity: 1; } }

/* ========================================================== HOW IT PLAYS ==
   Two teams, two cards. The studio's own doodle pattern runs behind them.
   ========================================================================== */
.roles { padding-top: clamp(2rem, 5vh, 3.25rem); }
@media (max-width: 860px) {
  /* no forced full-screen height here: on a narrow screen it only added empty space */
  .coop { min-height: 0; }
  .roles { padding-top: 2.75rem; }
}
.roles::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.42;
  background: url("../assets/img/pattern-01-tile.webp") 50% 0 / 30rem auto repeat;
  -webkit-mask: linear-gradient(to bottom, transparent 0, #000 14rem);
          mask: linear-gradient(to bottom, transparent 0, #000 14rem);
}
.roles { overflow-x: clip; }   /* a guard: art that pokes out sideways is cut, never scrolled to */
.roles > .wrap { position: relative; }
.roles__head > * + * { margin-top: 1.1rem; }
.roles__head .copy { max-width: 46ch; font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); }

.roles__grid {
  margin-top: clamp(6rem, 16vh, 9rem);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: stretch;
}
.team {
  position: relative; padding: 0 clamp(1.5rem, 2.6vw, 2.5rem) clamp(1.75rem, 2.6vw, 2.5rem);
  border-radius: 2.25rem;
}
.team--fox { background: #ffc27a; box-shadow: 0 10px 0 #ee9a3e, 0 26px 40px var(--egg-shadow); }
.team--hen { background: #fff0b0; box-shadow: 0 10px 0 #ebc85a, 0 26px 40px var(--egg-shadow); }
/* The art stands on the card and pokes out of the top. Both cards reserve the
   same height for it (--art-h) and differ only in how far it pokes out
   (--pop), so the two titles sit on one line. */
.team { --art-h: clamp(8rem, 14vw, 11.5rem); --pop: clamp(3.5rem, 6vw, 5rem); }
.team__art {
  display: flex; align-items: flex-end; justify-content: center; gap: 0;
  height: var(--art-h);
  transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1); transform-origin: 50% 100%;
}
/* Each image has a height and a share of the card's width, whichever is
   tighter; object-fit keeps its proportions. Without the width share the art
   was wider than the card on small phones and made the whole page too wide. */
.team__art img {
  display: block; height: calc(100% + var(--pop)); width: auto; flex: 0 1 auto; min-width: 0;
  max-width: 74%; object-fit: contain; object-position: 50% 100%;
}
.team__art .team__small { height: calc((100% + var(--pop)) * 0.52); max-width: 34%; margin-left: -6%; margin-bottom: 4%; }
.team--fox .team__art img { max-width: 82%; object-position: 0 100%; }
/* The fox was painted running in from the banner's edge, so its tail is cut
   there. In its card it does the same thing: it leaps in from the card's left
   edge, bigger than the other art, and the cut sits on that edge. The image
   file (fox-card.webp) is already mirrored and has the soft fade over the cut
   built in; a CSS mask or flip made Firefox draw hairlines around it. The
   hen and chick are mirrored the same way (hen-card.webp, chick-card.webp). */
.team--fox { --pop: clamp(4.5rem, 7.5vw, 6.5rem); }
.team--fox .team__art {
  justify-content: flex-start;
  margin-left: calc(clamp(1.5rem, 2.6vw, 2.5rem) * -1);
  transform-origin: 0 100%;
}
.team:hover .team__art { transform: rotate(-2.5deg) scale(1.03); }
.team--fox:hover .team__art { transform: translateX(3%) scale(1.03); }
.team .d-md { margin-top: 1.25rem; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); }
.team .copy { margin-top: 0.6rem; max-width: 34ch; color: var(--egg-ink); }
.roles .note { margin-top: clamp(2rem, 5vh, 3rem); font-size: 1rem; }

@media (max-width: 860px) {
  .roles__grid { grid-template-columns: 1fr; gap: 5.5rem; margin-top: 5.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .team__art { transition: none; }
  .team:hover .team__art, .team--fox:hover .team__art, .team--hen:hover .team__art { transform: none; }
}

/* the way out: a cracked shell edge into the studio's black */
.crack {
  position: relative; z-index: 1; height: clamp(1.75rem, 4vw, 3.25rem);
  margin-top: clamp(4rem, 12vh, 8rem); margin-bottom: -2px;   /* overlap the seam */
  background: #0b0a08;
  clip-path: polygon(0 100%, 0 46%, 5% 8%, 9% 62%, 15% 20%, 21% 74%, 27% 12%, 33% 58%, 38% 26%, 45% 82%, 51% 14%, 57% 66%, 63% 30%, 69% 78%, 75% 10%, 81% 60%, 87% 22%, 93% 70%, 97% 18%, 100% 50%, 100% 100%);
}

/* ============================================================= GAME PAGE ==
   chicks-on-the-menu.html. The layout is in css/site.css (GAME PAGES);
   this is the egg skin on it: the banner's forest on top and a short strip
   of soil under it, the studio's doodle ground for the middle, and a dark
   wood footer behind the same cracked-shell edge as the homepage.
   ========================================================================== */
.gp-hero--egg { overflow: clip; background: var(--egg-soil); padding-bottom: calc(clamp(1rem, 2.5vh, 1.75rem) + 40px); }
/* the same soft bumps as the homepage hero, into the pale ground below */
.gp-hero--egg::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 44px; z-index: 3; pointer-events: none;
  background: radial-gradient(circle 40px at 50% 44px, var(--egg-ground) 39px, transparent 40px) 50% 0 / 70px 100px repeat-x;
}
.gp-hero__art { position: relative; height: clamp(14rem, 31vw, 28rem); overflow: clip; }
.gp-hero__art::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 44px; z-index: 3; pointer-events: none;
  background: radial-gradient(circle 40px at 50% 44px, var(--egg-soil) 39px, transparent 40px) 50% 0 / 70px 100px repeat-x;
}
/* the forest drifts against the mouse, the animals with it, a little more */
.gp-hero__bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%;
  scale: 1.06;
  translate: calc((var(--px, 0.5) - 0.5) * -1.6%) calc((var(--py, 0.5) - 0.5) * -1.6%);
  transition: translate 900ms var(--ease-out);
}
.gp-actor {
  position: absolute; z-index: 2; width: auto;
  translate: calc((var(--px, 0.5) - 0.5) * -3.5%) calc((var(--py, 0.5) - 0.5) * -3.5%);
  transition: translate 700ms var(--ease-out);
}
.gp-actor--chick { left: 30%; bottom: 30%; height: 46%; }
.gp-actor--hen   { left: 52%; bottom: 13%; height: 40%; }
.gp-actor--fox   { right: 7%; bottom: 18%; height: 66%; }
@media (prefers-reduced-motion: no-preference) {
  .gp-actor--chick { animation: gp-bob 1.9s ease-in-out infinite; }
  .gp-actor--hen   { animation: gp-bob 1.6s ease-in-out 0.3s infinite; }
  .gp-actor--fox   { animation: gp-bob 2.3s ease-in-out 0.6s infinite; }
}
@keyframes gp-bob { 0%, 100% { transform: none; } 50% { transform: translateY(-5%) rotate(-2deg); } }

/* the strip: logo and status on the left; the rest of the ground is the
   chase's (js/site.js, chase), with prints in the same brown as the hero's */
.gp-hero__copy { position: relative; z-index: 4; min-height: clamp(8rem, 12vw, 10.5rem); }
.gp-hero__id {
  position: relative; z-index: 1; width: max-content;
  display: flex; flex-direction: column; align-items: center;
  margin-top: calc(clamp(3.5rem, 7vw, 6rem) * -1);
}
.gp-hero__logo img { display: block; width: min(20rem, 30vw); height: auto; filter: drop-shadow(0 6px 0 rgb(74 46 22 / 0.22)); }
.gp-hero--egg .game__status { margin-top: -0.2rem; }
.gp-chase {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none;
  color: var(--egg-ink); opacity: 0.4;
}
.gp-chase use { transition: opacity 600ms linear; animation: print-in 240ms ease-out; }
@media (max-width: 860px) {
  .gp-hero__art { height: 13rem; }
  .gp-actor--chick { left: 12%; }
  .gp-actor--fox { right: 2%; }
  .gp-hero__id { margin-inline: auto; }
  .gp-hero__logo img { width: min(16rem, 70vw); }
}

/* the doodle ground behind the middle of the page. It is drawn once, on
   .gp-ground around the screenshots, about and press kit, so the pattern
   runs on across their edges instead of starting over in each one. */
.gp-ground { position: relative; overflow-x: clip; }
.gp-ground::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.3;
  background: url("../assets/img/pattern-01-tile.webp") 50% 0 / 30rem auto repeat;
}
.gp-ground > section { background: transparent; }
.gp-block > .wrap { position: relative; }
[data-theme="egg"] .gp-kicker { font-family: "Fredoka", var(--sc-font-text); font-size: 0.9375rem; letter-spacing: 0.12em; color: var(--egg-fox); }

/* the reel: picture frames with a wooden lip, round buttons */
[data-theme="egg"] .reel { color: var(--egg-ink); }
[data-theme="egg"] .reel__slide {
  border: 3px solid var(--egg-ink); border-radius: 1.5rem; background: var(--egg-white);
  box-shadow: 0 8px 0 var(--egg-ink);
}
[data-theme="egg"] .reel__slide:focus-visible { outline-color: var(--egg-fox); border-radius: 1.5rem; }
[data-theme="egg"] .reel__slide--soon {
  border-style: dashed; box-shadow: none; color: var(--egg-ink-soft);
  font-family: "Fredoka", var(--sc-font-text);
}
[data-theme="egg"] .gp-soon__icon {
  background: var(--egg-white); border: 3px solid var(--egg-ink);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; width: 2.1rem; height: 2.7rem; rotate: -10deg;
}
[data-theme="egg"] :is(.reel__nav, .lightbox__nav) {
  border: 3px solid var(--egg-ink); border-radius: 50%; background: var(--egg-white); color: var(--egg-ink);
  box-shadow: 0 4px 0 var(--egg-ink);
  transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1), background-color 180ms;
}
[data-theme="egg"] :is(.reel__nav, .lightbox__nav):hover { background: #ffd052; transform: translateY(-2px); }
[data-theme="egg"] :is(.reel__nav, .lightbox__nav):active { transform: translateY(3px); box-shadow: 0 1px 0 var(--egg-ink); }

[data-theme="egg"] .gp-facts {
  background: var(--egg-white); border: 3px solid var(--egg-ink); border-radius: 1.5rem;
  box-shadow: 0 8px 0 var(--egg-ink), 0 22px 36px var(--egg-shadow);
}
[data-theme="egg"] .gp-facts dt { color: var(--egg-fox); }

[data-theme="egg"] .gp-press__card {
  background: linear-gradient(170deg, #fff6c9, #ffe28a);
  border: 3px solid var(--egg-ink); border-radius: 1.75rem;
  box-shadow: 0 8px 0 var(--egg-ink), 0 22px 36px var(--egg-shadow);
}
[data-theme="egg"] .gp-press__note { color: var(--egg-ink-soft); }
/* the press kit ends in the cracked-shell edge, in the footer's colour */
.gp-press[data-theme="egg"] { padding-bottom: 0; }
.gp-press .crack { margin-top: clamp(3rem, 8vh, 5rem); }
.crack--foot { background: #3a2410; }

/* the footer: dark wood, cream letters */
.gp-foot[data-theme="egg"] {
  --sc-ink: #fffdf6; --sc-ink-soft: rgb(255 253 246 / 0.7);
  --hair: rgb(255 253 246 / 0.16); --hair-strong: rgb(255 253 246 / 0.32);
  background: #3a2410; color: #fffdf6;
}
.gp-foot[data-theme="egg"] .d-lg { color: #fffdf6; }
.gp-foot[data-theme="egg"] .btn { box-shadow: 0 6px 0 #1f1207, 0 12px 20px rgb(0 0 0 / 0.3); border-color: #1f1207; }
.gp-foot[data-theme="egg"] .btn:hover { box-shadow: 0 9px 0 #1f1207, 0 18px 24px rgb(0 0 0 / 0.3); }
.gp-foot[data-theme="egg"] .btn:active { box-shadow: 0 1px 0 #1f1207; }
.gp-foot[data-theme="egg"] .gp-foot__studio { color: #ffdb80; }
.gp-foot[data-theme="egg"] .gp-foot__base { font-family: "Fredoka", var(--sc-font-text); }
.gp-foot[data-theme="egg"] :focus-visible { outline-color: #ffdb80; }

/* the lightbox */
.lightbox--egg img { border: 4px solid #4a2e16; border-radius: 1.5rem; background: #fffdf6; }
.lightbox--egg .lightbox__close {
  border-radius: 999px; border: 3px solid #4a2e16; background: #fffdf6; color: #4a2e16;
  box-shadow: 0 4px 0 #4a2e16; font-family: "Fredoka", var(--sc-font-text); letter-spacing: 0.04em;
}
.lightbox--egg .lightbox__nav {
  border: 3px solid #4a2e16; border-radius: 50%; background: #fffdf6; color: #4a2e16; box-shadow: 0 4px 0 #4a2e16;
}
.lightbox--egg .lightbox__nav:hover { background: #ffd052; }

/* ====================================================== HOMEPAGE CONTACT ==
   The homepage's last screen in the Chicks on the Menu! skin: the pale
   doodle ground hangs down into the black of All games in soft bumps, the
   buttons are the squishy ones, the social links are cream cards with a
   wooden lip, and the footer is a strip of dark wood.
   ========================================================================== */
.contact--egg { background: var(--egg-ground); color: var(--egg-ink); }
/* the doodle pattern, in place of the studio's diamond floor */
.contact--egg::before {
  opacity: 0.32;
  background: url("../assets/img/pattern-01-tile.webp") 50% 0 / 30rem auto repeat;
  -webkit-mask: none; mask: none;
}
/* the black of the section above, ending in bumps */
.contact--egg::after {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 44px; z-index: 1; pointer-events: none;
  background: radial-gradient(circle 40px at 50% 0, #0b0a08 39px, transparent 40px) 50% 0 / 70px 100px repeat-x;
}
.contact--egg .shelf__kicker { font-family: "Fredoka", var(--sc-font-text); font-size: 0.9375rem; letter-spacing: 0.14em; color: var(--egg-fox); }
.contact--egg .d-lg { color: var(--egg-ink); }
.contact--egg .copy { color: var(--egg-ink-soft); font-size: 1.0625rem; }
/* the egg button carries its own little egg, so the envelope steps aside */
.contact--egg .contact__write .btn svg { display: none; }
.contact--egg .contact__write .btn { font-size: 1.125rem; }
.contact--egg .contact__write .btn,
.contact--egg .contact__write .btn:hover,
.contact--egg .contact__write .btn:active { translate: none; }
.contact--egg .contact__mail {
  font-family: "Fredoka", var(--sc-font-text); font-weight: 700; letter-spacing: 0;
  color: var(--egg-ink); text-decoration-color: rgb(74 46 22 / 0.35);
}
.contact--egg .contact__mail:hover { color: var(--egg-fox); text-decoration-color: var(--egg-fox); }
.contact--egg .contact__label { font-family: "Fredoka", var(--sc-font-text); letter-spacing: 0.16em; color: var(--egg-ink-soft); }

/* social links: cream cards with a round plate and a wooden lip */
.contact--egg .social {
  border: 3px solid var(--egg-ink); border-radius: 1.25rem; background: var(--egg-white); color: var(--egg-ink);
  box-shadow: 0 6px 0 var(--egg-ink), 0 14px 22px var(--egg-shadow);
  transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 180ms var(--ease-out), background-color 180ms;
}
.contact--egg .social:hover { translate: none; transform: translateY(-3px) rotate(-0.8deg); background: #fff8dc; box-shadow: 0 9px 0 var(--egg-ink), 0 18px 26px var(--egg-shadow); }
.contact--egg .social:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--egg-ink); }
.contact--egg .social__icon::before { rotate: 0deg; inset: 0.15rem; border-radius: 50%; border: 2px solid var(--egg-ink); background: #ffdb80; }
.contact--egg .social:hover .social__icon::before { background: var(--egg-fox); border-color: var(--egg-ink); }
.contact--egg .social:hover .social__icon svg { color: #fffdf6; }
.contact--egg .social__name { font-family: "Fredoka", var(--sc-font-text); font-weight: 700; font-size: 1.15rem; letter-spacing: 0; }
.contact--egg .social__handle { color: var(--egg-ink-soft); }
.contact--egg .social::after { color: var(--egg-ink-soft); }
.contact--egg .social:hover::after { color: var(--egg-fox); }

/* the footer: a strip of dark wood across the bottom */
.contact--egg > .wrap:last-child { position: relative; margin-top: clamp(3.5rem, 8vh, 5rem); background: #3a2410; }
/* the cracked-shell edge on top of the wood, as on the game pages */
.contact--egg > .wrap:last-child::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: clamp(1.75rem, 4vw, 3.25rem);
  background: #3a2410;
  clip-path: polygon(0 100%, 0 46%, 5% 8%, 9% 62%, 15% 20%, 21% 74%, 27% 12%, 33% 58%, 38% 26%, 45% 82%, 51% 14%, 57% 66%, 63% 30%, 69% 78%, 75% 10%, 81% 60%, 87% 22%, 93% 70%, 97% 18%, 100% 50%, 100% 100%);
}
.contact--egg .foot { margin-top: 0; border-top: 0; color: rgb(255 253 246 / 0.75); font-family: "Fredoka", var(--sc-font-text); }
.contact--egg .foot .link { color: #fffdf6; text-decoration-color: rgb(255 253 246 / 0.4); }
.contact--egg .foot .link:hover { text-decoration-color: #ffdb80; }
.contact--egg .foot__est { font-family: "Fredoka", var(--sc-font-text); letter-spacing: 0.14em; color: #ffdb80; }
.contact--egg :focus-visible { outline-color: var(--egg-ink); }