/* ==========================================================================
   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. js/site.js lays the
   first trail (hen prints, then fox prints after them) and stamps more under
   the mouse. Older prints fade as new ones arrive.
   The layer covers all of the ground, bumps included: it starts 40px above
   the ground line, where the bumps start (.coop__hill), and is masked to the
   same row of bumps, so a print can sit on a bump but never on the picture
   between two of them. It is drawn after the hill so prints show on the bumps.
   The 40 / 44 / 70 here are the hill's numbers; js/site.js (tracks) uses them too. */
.coop__tracks {
  position: absolute; left: 0; z-index: 2; pointer-events: none;
  top: calc(var(--stage-h) - 40px);
  top: round(down, calc(var(--stage-h) - 40px), 1px);
  width: 100%; height: calc(100% - var(--stage-h) + 40px); overflow: hidden;
  color: var(--egg-ink); opacity: 0.4;
  -webkit-mask:
    radial-gradient(circle 40px at 50% 44px, #000 39px, transparent 40px) 50% 0 / 70px 100px repeat-x,
    linear-gradient(#000 0 0) 0 40px / 100% 100% no-repeat;
          mask:
    radial-gradient(circle 40px at 50% 44px, #000 39px, transparent 40px) 50% 0 / 70px 100px repeat-x,
    linear-gradient(#000 0 0) 0 40px / 100% 100% no-repeat;
}
/* 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; }
/* The head is two columns: the three-line hook on the left, and on the right,
   level with its last line, three facts and the pitch. */
.roles__head {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end;
  gap: 1.5rem clamp(2.5rem, 7vw, 7rem);
}
.roles__head .d-lg span { display: block; white-space: nowrap; }   /* one sentence to a line */
.roles__pitch { max-width: 34rem; padding-bottom: 0.35rem; }
.roles__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.roles__facts li {
  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);
}
.roles__pitch .copy { margin-top: 1rem; max-width: none; font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); color: var(--egg-ink); }
@media (max-width: 860px) {
  .roles__head { grid-template-columns: 1fr; }
  .roles__head .d-lg span { white-space: normal; }
}

.roles__grid {
  margin-top: clamp(7rem, 17vh, 10rem);
  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(8.5rem, 15vw, 14rem); --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%;
}
/* the fox is the big animal here: the hen is drawn at about two thirds of
   the fox's height, and the chick at about half of the hen's */
.team--hen .team__art img { height: calc((100% + var(--pop)) * 0.72); }
.team--hen .team__art .team__small { height: calc((100% + var(--pop)) * 0.38); max-width: 30%; margin-left: -4%; margin-bottom: 3%; }
.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(5rem, 8.5vw, 8rem); }
.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__more { margin-top: clamp(2.25rem, 5vh, 3.25rem); }

@media (max-width: 860px) {
  .roles__grid { grid-template-columns: 1fr; gap: 6rem; margin-top: 6.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--egg { --art-h: clamp(14rem, 31vw, 31rem); }   /* the picture's height; the chase layer starts from it */
.gp-hero__art { position: relative; height: var(--art-h); 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 stage is the whole banner at its own proportions (4000 x 1292), never
   narrower than the page and never shorter than the picture. It hangs from
   the picture's top right corner, so the picture shows the banner's top
   right and crops the rest: on a wide screen the hen's legs go behind the
   ground, on a narrow one the left of the banner is off the page. --crop is
   how much of the sideways overflow is taken off the right-hand side. */
.gp-stage {
  --crop: 0;
  position: absolute; top: 0; aspect-ratio: 4000 / 1292;
  width: max(100%, calc(var(--art-h) * 3.096));
  right: calc((max(100%, var(--art-h) * 3.096) - 100%) * var(--crop) * -1);
}
/* the forest drifts against the mouse, the animals with it, a little more */
.gp-hero__bg {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  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; height: auto; max-width: none;
  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);
}
/* positions and sizes straight from the banner's layers, the same as the homepage hero */
.gp-actor--chick { left: 31.475%; top: 5.573%;  width: 22.6%; }
.gp-actor--hen   { left: 57.5%;   top: 42.337%; width: 22.925%; }
.gp-actor--fox   { left: 79.275%; top: 3.56%;   width: 20.725%; }
@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(-3%) rotate(-1.5deg); } }

/* the strip: logo and status on the left; the rest of the ground is the
   chase's, with prints in the same brown as the homepage hero's */
.gp-hero__copy { position: relative; z-index: 4; min-height: clamp(8rem, 12vw, 10.5rem); }
/* --logo-w is the logo's width. The block is pulled up by 0.3 of it, which
   puts CHICKS over the picture and "on the" and MENU on the ground. */
.gp-hero--egg { --logo-w: min(26rem, 34vw); }
.gp-hero__id {
  position: relative; z-index: 1; width: max-content;
  display: flex; flex-direction: column; align-items: center;
  margin-top: calc(var(--logo-w) * -0.3);
}
.gp-hero__logo img { display: block; width: var(--logo-w); height: auto; filter: drop-shadow(0 6px 0 rgb(74 46 22 / 0.22)); }
/* the status is a small tag under the logo here, not the big sticker it is on the All games tile */
.gp-hero--egg .game__status {
  margin-top: -0.35rem; padding: 0.3rem 0.75rem 0.3rem 0.6rem; gap: 0.4rem;
  font-size: 0.8125rem; border-width: 2.5px; box-shadow: 0 3px 0 var(--egg-ink);
}
.gp-hero--egg .game__dot { width: 0.45rem; height: 0.45rem; }
/* The chase layer (js/site.js, chase). It covers the ground from the top of
   the bumps under the picture (40px above the picture's bottom edge) to the
   bottom of the hero, and is masked to the ground's shape: the same row of
   bumps as .gp-hero__art::after, one px smaller all round, and everything
   below them. z-index 3 puts it over those bumps and, coming before the
   hero's own ::after, under the pale bumps at the bottom.
   Each print fades in, holds and fades away by itself. --life is how long
   that takes; the next chase waits for the last print to finish. */
.gp-chase {
  --life: 3.4s;
  position: absolute; left: 0; z-index: 3; pointer-events: none;
  top: calc(var(--art-h) - 40px); width: 100%; height: calc(100% - var(--art-h) + 40px); overflow: hidden;
  color: var(--egg-ink); opacity: 0.42;
  -webkit-mask:
    radial-gradient(circle 39px at 50% 41px, #000 38px, transparent 39px) 50% 0 / 70px 100px repeat-x,
    linear-gradient(#000 0 0) 0 41px / 100% 100% no-repeat;
          mask:
    radial-gradient(circle 39px at 50% 41px, #000 38px, transparent 39px) 50% 0 / 70px 100px repeat-x,
    linear-gradient(#000 0 0) 0 41px / 100% 100% no-repeat;
}
.gp-chase use { animation: gp-print var(--life) linear forwards; }
@keyframes gp-print {
  0% { opacity: 0; } 6% { opacity: var(--o, 1); } 45% { opacity: var(--o, 1); } 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .gp-chase use { animation: none; opacity: var(--o, 1); } }
@media (max-width: 860px) {
  .gp-hero--egg { --art-h: 15rem; }
  .gp-stage { --crop: 0.2; }
  .gp-hero__id { margin-inline: auto; }
  .gp-hero--egg { --logo-w: min(20rem, 84vw); }
}

/* 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); }

/* ------------------------------------------------------ how it plays --
   One panel per team, in the team colours of the homepage cards. Each panel
   says how that team wins, then its three steps in order. */
.gp-head { max-width: 58rem; }
.gp-head .d-lg { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.6rem); }
.gp-badge {
  flex: none; display: grid; place-items: center; width: 3.25rem; height: 3.25rem;
  border-radius: 50%; background: var(--egg-ink);
}
.gp-badge::before {
  content: ""; width: 62%; height: 62%; background: var(--egg-white);
  -webkit-mask: var(--glyph) center / contain no-repeat;
          mask: var(--glyph) center / contain no-repeat;
}
.gp-badge--hen { --glyph: url("../assets/icons/hen.webp"); }
.gp-badge--fox { --glyph: url("../assets/icons/fox.webp"); }

.gp-sides {
  margin-top: clamp(2rem, 5vh, 3rem);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 2.6vw, 2.25rem);
}
.gp-side {
  padding: clamp(1.4rem, 2.6vw, 2.25rem);
  border: 3px solid var(--egg-ink); border-radius: 1.75rem;
  box-shadow: 0 8px 0 var(--egg-ink), 0 22px 36px var(--egg-shadow);
}
.gp-side--hen { background: #fff0b0; }
.gp-side--fox { background: #ffc27a; }
.gp-side__head { display: flex; align-items: center; gap: 0.9rem; }
.gp-side__win {
  margin: 1.1rem 0 0; padding-bottom: 1.1rem; border-bottom: 2px dashed var(--hair-strong);
  font-family: "Fredoka", var(--sc-font-text); font-weight: 600; font-size: 1.1875rem; line-height: 1.35;
}
.gp-steps { list-style: none; margin: 1.25rem 0 0; padding: 0; counter-reset: step; display: grid; gap: 1.1rem; }
.gp-steps li { counter-increment: step; position: relative; padding-left: 3.25rem; }
.gp-steps li::before {
  content: counter(step); position: absolute; left: 0; top: -0.3rem;
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border: 3px solid var(--egg-ink); border-radius: 50%; background: var(--egg-white);
  font-family: "Fredoka", var(--sc-font-text); font-weight: 700; font-size: 1.0625rem; line-height: 1;
}
:is(.gp-steps, .gp-trick, .gp-river, .gp-spot, .gp-notes) :is(h3, h4) {
  margin: 0; font-family: "Fredoka", var(--sc-font-text); font-weight: 700; font-size: 1.25rem; line-height: 1.25;
}
:is(.gp-steps, .gp-trick, .gp-river, .gp-spot) p { margin: 0.3rem 0 0; line-height: 1.6; }

/* the jailbreak: a white card with a cell at one end, a hen behind its bars */
.gp-jail {
  margin-top: clamp(1.25rem, 2.6vw, 2.25rem);
  display: grid; grid-template-columns: clamp(5.5rem, 11vw, 9rem) minmax(0, 1fr);
  border: 3px solid var(--egg-ink); border-radius: 1.75rem; overflow: hidden;
  background: var(--egg-white); box-shadow: 0 8px 0 var(--egg-ink), 0 22px 36px var(--egg-shadow);
}
.gp-jail__cell { position: relative; min-height: 7rem; background: #fff0b0; border-right: 3px solid var(--egg-ink); }
.gp-jail__cell::before {
  content: ""; position: absolute; inset: 22% 18%; background: var(--egg-ink);
  -webkit-mask: url("../assets/icons/hen.webp") center / contain no-repeat;
          mask: url("../assets/icons/hen.webp") center / contain no-repeat;
}
.gp-jail__cell::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 14px, var(--egg-ink) 14px 20px) 50% 0 / 100% 100%;
}
.gp-jail__text { padding: clamp(1.25rem, 2.6vw, 2rem) clamp(1.4rem, 3vw, 2.5rem); }
.gp-jail__text .copy { margin-top: 0.5rem; max-width: 70ch; color: var(--egg-ink); }

/* --------------------------------------------------------- abilities --
   Three cards per team, each row under that team's badge. */
.gp-tricks { margin-top: clamp(2rem, 5vh, 3rem); }
.gp-tricks__who {
  margin: 0; display: flex; align-items: center; gap: 0.75rem;
  font-family: "Fredoka", var(--sc-font-text); font-weight: 700; font-size: 1.375rem; line-height: 1.2;
}
.gp-tricks__who .gp-badge { width: 2.5rem; height: 2.5rem; }
.gp-tricks__row + .gp-tricks__who { margin-top: clamp(2rem, 4.5vh, 2.75rem); }
.gp-tricks__row {
  list-style: none; margin: 1rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem);
}
.gp-trick {
  padding: 1.25rem 1.4rem 1.4rem;
  border: 3px solid var(--egg-ink); border-radius: 1.5rem; box-shadow: 0 6px 0 var(--egg-ink);
}
.gp-tricks__row--hen .gp-trick { background: #fff0b0; }
.gp-tricks__row--fox .gp-trick { background: #ffc27a; }

/* what is still to come: a dashed card, like the screenshots that are still to come */
.gp-more {
  margin: clamp(1.25rem, 2.6vw, 1.75rem) 0 0; padding: 1rem 1.4rem;
  display: flex; align-items: center; justify-content: center; gap: 0.75rem; text-align: center;
  border: 3px dashed var(--hair-strong); border-radius: 1.5rem;
  font-family: "Fredoka", var(--sc-font-text); font-weight: 600; font-size: 1.125rem; color: var(--egg-ink-soft);
}
.gp-more__egg {
  flex: none; width: 1.05rem; height: 1.35rem; rotate: -12deg;
  background: var(--egg-white); border: 2.5px solid var(--egg-ink-soft);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
/* the small print at the foot of the game's own sections, before the press kit */
.gp-disclaimer {
  margin: clamp(2.5rem, 6vh, 3.5rem) 0 0; text-align: center;
  font-size: 0.9375rem; line-height: 1.5; color: var(--egg-ink-soft);
}

/* --------------------------------------------------------- the ranch --
   What the map does to you. The river is one wide card with a strip of water
   at its end; the other features are small cards in a grid, each with a word
   above its name for what it is good (or bad) for; then two plain notes. */
.gp-river {
  margin-top: clamp(2rem, 5vh, 3rem);
  display: grid; grid-template-columns: clamp(5.5rem, 11vw, 9rem) minmax(0, 1fr);
  border: 3px solid var(--egg-ink); border-radius: 1.75rem; overflow: hidden;
  background: var(--egg-white); box-shadow: 0 8px 0 var(--egg-ink), 0 22px 36px var(--egg-shadow);
}
/* the water: three wavy lines, the same drawing as the rail's icon for this section */
.gp-river__water { position: relative; min-height: 6.5rem; background: #bfe6e4; border-right: 3px solid var(--egg-ink); }
.gp-river__water::before {
  content: ""; position: absolute; inset: 0; background: #2f8f98;
  -webkit-mask: url("../assets/icons/water.svg") 50% 50% / 3.25rem auto repeat;
          mask: url("../assets/icons/water.svg") 50% 50% / 3.25rem auto repeat;
}
.gp-river__text { padding: clamp(1.25rem, 2.6vw, 2rem) clamp(1.4rem, 3vw, 2.5rem); }
.gp-river__text p:last-child { max-width: 70ch; }
.gp-spots {
  list-style: none; margin: clamp(1rem, 2vw, 1.75rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem);
}
.gp-spot {
  padding: 1.2rem 1.4rem 1.4rem;
  border: 3px solid var(--egg-ink); border-radius: 1.5rem; background: var(--egg-white);
  box-shadow: 0 6px 0 var(--egg-ink);
}
:is(.gp-river, .gp-spot) .gp-spot__use {
  margin: 0 0 0.35rem;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; line-height: 1.3; text-transform: uppercase; color: var(--egg-fox);
}
.gp-notes {
  margin-top: clamp(2rem, 5vh, 3rem);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem clamp(2rem, 5vw, 4.5rem);
}
.gp-notes .copy { margin-top: 0.4rem; color: var(--egg-ink); }
.gp-about__text .lede { color: var(--egg-ink); max-width: 30ch; }

@media (max-width: 1100px) { .gp-spots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .gp-sides, .gp-tricks__row, .gp-spots, .gp-notes { grid-template-columns: 1fr; }
  .gp-river { grid-template-columns: 1fr; }
  .gp-river__water { min-height: 3.5rem; border-right: 0; border-bottom: 3px solid var(--egg-ink); }
  .gp-jail { grid-template-columns: 1fr; }
  .gp-jail__cell { min-height: 5rem; border-right: 0; border-bottom: 3px solid var(--egg-ink); }
  .gp-jail__cell::before { inset: 14% 38%; }
}

[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, .gp-foot[data-theme="egg"] .contact__write .btn svg { display: none; }
.contact--egg .contact__write .btn, .gp-foot[data-theme="egg"] .contact__write .btn { font-size: 1.125rem; }
.contact--egg .contact__write .btn, .gp-foot[data-theme="egg"] .contact__write .btn,
.contact--egg .contact__write .btn:hover, .gp-foot[data-theme="egg"] .contact__write .btn:hover,
.contact--egg .contact__write .btn:active, .gp-foot[data-theme="egg"] .contact__write .btn:active { translate: none; }
.contact--egg .contact__mail, .gp-foot[data-theme="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, .gp-foot[data-theme="egg"] .contact__mail:hover { color: var(--egg-fox); text-decoration-color: var(--egg-fox); }
.contact--egg .contact__label, .gp-foot[data-theme="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, .gp-foot[data-theme="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, .gp-foot[data-theme="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, .gp-foot[data-theme="egg"] .social:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--egg-ink); }
/* in whole pixels, so the ring keeps to the middle of its icon */
.contact--egg .social__icon::before, .gp-foot[data-theme="egg"] .social__icon::before { rotate: 0deg; inset: 2px; border-radius: 50%; border: 2px solid var(--egg-ink); background: #ffdb80; }
.contact--egg .social:hover .social__icon::before, .gp-foot[data-theme="egg"] .social:hover .social__icon::before { background: var(--egg-fox); border-color: var(--egg-ink); }
.contact--egg .social:hover .social__icon svg, .gp-foot[data-theme="egg"] .social:hover .social__icon svg { color: #fffdf6; }
.contact--egg .social__name, .gp-foot[data-theme="egg"] .social__name { font-family: "Fredoka", var(--sc-font-text); font-weight: 700; font-size: 1.15rem; letter-spacing: 0; }
.contact--egg .social__handle, .gp-foot[data-theme="egg"] .social__handle { color: var(--egg-ink-soft); }
.contact--egg .social::after, .gp-foot[data-theme="egg"] .social::after { color: var(--egg-ink-soft); }
.contact--egg .social:hover::after, .gp-foot[data-theme="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); }

/* GAME PAGE FOOTER: the same block on the dark wood. Cream letters, and the
   cards keep their cream faces with a lip dark enough to show. */
.gp-foot[data-theme="egg"] .gp-kicker { color: #ffdb80; }
.gp-foot[data-theme="egg"] .copy { color: rgb(255 253 246 / 0.78); font-size: 1.0625rem; }
.gp-foot[data-theme="egg"] .contact__mail { color: #fffdf6; text-decoration-color: rgb(255 253 246 / 0.4); }
.gp-foot[data-theme="egg"] .contact__mail:hover { color: #ffdb80; text-decoration-color: #ffdb80; }
.gp-foot[data-theme="egg"] .contact__label { color: rgb(255 253 246 / 0.7); }
.gp-foot[data-theme="egg"] .social { border-color: #1f1207; box-shadow: 0 6px 0 #1f1207, 0 14px 22px rgb(0 0 0 / 0.3); }
.gp-foot[data-theme="egg"] .social:hover { box-shadow: 0 9px 0 #1f1207, 0 18px 26px rgb(0 0 0 / 0.3); }
.gp-foot[data-theme="egg"] .social:active { box-shadow: 0 1px 0 #1f1207; }