/* Balanced Pebbles: the site's one stylesheet.
   Tiers: the theme (tokens on :root, light, dark and an explicit override), then the shell, which uses tokens only.
   The CSP allows no inline styles, so every rule lives here. Contrast of every pair: tools/contrast.py. */

@font-face {
  font-family: "Fredoka";
  src: url("fonts/fredoka-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---- theme ---- */
:root {
  /* the Sunset palette (balanced-pebbles-common/Brand/palette-sunset.json) */
  --plum: #2A1B3D; --rose: #E2557F; --orange: #FF9B4A; --butter: #FFE08A; --white: #FFFFFF;
  --lilac: #E9DDF5; --pink: #F7A1BA;

  /* light */
  --bg: #FFF8F1; --surface: #FFFFFF; --fg: #2A1B3D; --sub: #5C4D70;
  --accent-text: #B0285A; --focus: #B0285A; --line: #8E7CA3; --hair: #EADFEF;
  --shadow: 0 1px 2px rgba(42, 27, 61, .08), 0 8px 24px rgba(42, 27, 61, .10);
  --review-bg: #FFF1C2; --review-fg: #2A1B3D; --review-line: #B08A1E;

  /* always plum: the header, the hero and the footer */
  --band: #2A1B3D; --band-fg: #FFFFFF; --band-sub: #E9DDF5; --band-focus: #FFE08A;

  /* the games' own colors (cards and Bumper Buddies' panel) */
  --cp-ground: #2F3542; --cp-tag: #FFC53D;
  --le-ground: #5B3624; --le-tag: #FFD27A;
  --wb-ground: #1C2A5C; --wb-tag: #FFC93C;
  --ww-ground: #2E2036; --ww-tag: #E9B949;
  --mb-ground: #0F5F6E; --mb-tag: #FFE08A;

  --display: "Fredoka", "Arial Rounded MT Bold", ui-rounded, system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* one spacing scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --radius: 24px;
  --measure: 60ch;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1E1230; --surface: #2C1E40; --fg: #FFF6EC; --sub: #DCCFEA;
    --accent-text: #FF9DBA; --focus: #FFE08A; --line: #9D8BB3; --hair: #3B2C52;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
    --review-bg: #4A3A1A; --review-fg: #FFF6EC; --review-line: #E9B949;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1E1230; --surface: #2C1E40; --fg: #FFF6EC; --sub: #DCCFEA;
  --accent-text: #FF9DBA; --focus: #FFE08A; --line: #9D8BB3; --hair: #3B2C52;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
  --review-bg: #4A3A1A; --review-fg: #FFF6EC; --review-line: #E9B949;
  color-scheme: dark;
}

/* ---- shell ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 17px/1.55 var(--body);
  overflow-wrap: break-word;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--accent-text); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
p { margin: 0 0 var(--s4); max-width: var(--measure); }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.15; margin: 0 0 var(--s3); text-wrap: balance; }
h1 { font-size: clamp(36px, 6vw, 56px); letter-spacing: -.01em; }
h2 { font-size: clamp(28px, 4vw, 38px); }
h3 { font-size: 21px; line-height: 1.25; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--s4); top: -100px; z-index: 10;
  background: var(--butter); color: var(--plum); font: 600 16px/1 var(--display);
  padding: var(--s3) var(--s4); border-radius: 999px; text-decoration: none;
}
.skip:focus { top: var(--s3); }
.wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: var(--s4); }
@media (min-width: 720px) { .wrap { padding-inline: var(--s5); } }
.section { padding-block: var(--s8); }
.eyebrow { font: 600 15px/1.2 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--sub); margin: 0 0 var(--s2); }
.lede { font-size: 19px; color: var(--sub); }

/* ---- the plum band: header, hero, footer ---- */
.band { background: var(--band); color: var(--band-fg); --focus: var(--band-focus); }
.band a { color: var(--band-fg); }
.site-header { position: relative; z-index: 3; }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s5); padding-block: var(--s3); }
.brand { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; text-decoration: none; font: 600 20px/1 var(--display); }
.brand svg { width: 34px; height: 36px; }
.home .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0 var(--s1); }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s3); border-radius: 999px; font: 600 16px/1 var(--display); text-decoration: none; }
.nav a:hover { background: rgba(255, 255, 255, .1); }
.nav a[aria-current="page"] { background: rgba(255, 255, 255, .14); }

/* ---- home: the hero ---- */
.top { overflow: hidden; }
.hero { text-align: center; padding-block: 0 var(--s7); }
.stage {
  display: block; margin: 0 auto; padding: 0; border: 0; background: none; cursor: pointer;
  width: min(300px, 74vw); color: inherit; border-radius: 32px; -webkit-tap-highlight-color: transparent;
}
.stage svg { width: 100%; height: auto; overflow: visible; }
.pb-shape { stroke: var(--plum); stroke-width: 8; stroke-linejoin: round; }
.p1 { fill: var(--rose); } .p2 { fill: var(--orange); } .p3 { fill: var(--butter); }
.face { fill: var(--plum); }
.mouth { fill: none; stroke: var(--plum); stroke-width: 4.4; stroke-linecap: round; }
.spark { fill: var(--butter); stroke: var(--plum); stroke-width: .12; stroke-linejoin: round; }
.ground-shadow { fill: #000; }
.wordmark { font-size: clamp(40px, 9vw, 64px); margin: var(--s2) 0 var(--s4); white-space: nowrap; letter-spacing: -.01em; }
.letters span { display: inline-block; }
.letters .w { white-space: nowrap; } /* a word never breaks between its letters */
.tagline { font-size: 20px; line-height: 1.45; color: var(--band-sub); margin: 0 auto var(--s5); max-width: 44ch; text-wrap: balance; }
.promise { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) var(--s3); max-width: 640px; margin: 0 auto; }
.promise li { font: 600 17px/1 var(--display); color: var(--plum); padding: 10px 16px; border-radius: 999px; }
.promise li:nth-child(1) { background: var(--butter); }
.promise li:nth-child(2) { background: var(--pink); }
.promise li:nth-child(3) { background: var(--orange); }
.promise li:nth-child(4) { background: var(--lilac); }
.promise li:nth-child(5) { background: var(--pink); }
/* Until the intro starts, the pebbles and letters wait out of sight, so the end frame never flashes first.
   No JS: noscript.css shows them; a script error: they appear at 2.5 s anyway. */
@media (prefers-reduced-motion: no-preference) {
  .hero[data-intro="pending"] .stage .actor,
  .hero[data-intro="pending"] .letters span { opacity: 0; animation: failsafe 0s 2.5s forwards; }
}
@keyframes failsafe { to { opacity: 1; } }

/* ---- Bumper Buddies, featured ---- */
.feature { padding-block: var(--s8) var(--s7); }
.panel {
  background: var(--cp-ground); color: var(--white); border-radius: 32px; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); padding: var(--s6) var(--s5);
  --focus: var(--butter);
}
.panel a { color: var(--white); }
.panel .eyebrow { color: var(--cp-tag); }
.panel h2 { display: flex; align-items: center; gap: var(--s3); font-size: clamp(36px, 5vw, 52px); }
.panel h2 img { width: 64px; height: 64px; border-radius: 15px; }
.panel p { font-size: 19px; }
@media (min-width: 880px) {
  .panel { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; padding: var(--s7); }
}
.store { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); margin: var(--s5) 0 var(--s4); }
/* The App Store slot: the badge goes here when Bumper Buddies' link exists (see DEPLOY.md). Same height as the badge. */
.store-slot { min-height: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.store-soon {
  display: inline-flex; align-items: center; gap: var(--s2); margin: 0; min-height: 48px; padding: 0 20px 0 14px;
  border-radius: 14px; background: var(--cp-tag); color: var(--plum); font: 600 17px/1.1 var(--display);
}
@media (max-width: 400px) { .store-soon { font-size: 16px; padding: 0 14px 0 12px; } }
.store-soon svg { width: 22px; height: 22px; flex: none; }
.platforms { margin: 0; font: 600 16px/1.3 var(--display); color: inherit; opacity: 1; }
.more { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; font: 600 18px/1 var(--display); }
.more svg { width: 18px; height: 18px; transition: transform .2s; }
.more:hover svg { transform: translateX(3px); }

/* a fan of phone screenshots */
.fan { display: flex; justify-content: center; align-items: flex-end; padding-block: var(--s2) var(--s4); }
.fan figure { margin: 0 -18px; width: min(36%, 200px); flex: none; transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.fan figure:nth-child(1) { transform: rotate(-6deg) translateY(10px); }
.fan figure:nth-child(2) { position: relative; z-index: 1; width: min(42%, 224px); }
.fan figure:nth-child(3) { transform: rotate(6deg) translateY(10px); }
.fan:hover figure:nth-child(1) { transform: rotate(-9deg) translate(-12px, 4px); }
.fan:hover figure:nth-child(3) { transform: rotate(9deg) translate(12px, 4px); }
.fan:hover figure:nth-child(2) { transform: translateY(-8px); }
.shot { border-radius: 18px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .22), 0 12px 30px rgba(0, 0, 0, .4); background: #1B1F27; }

/* ---- more games ---- */
.games { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); margin-top: var(--s5); }
@media (min-width: 560px) { .games { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .games { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.game {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2);
  padding: var(--s5); border-radius: var(--radius); color: var(--white);
  transition: transform .3s cubic-bezier(.3, 1.5, .5, 1), box-shadow .3s; cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.game h3 { margin: var(--s2) 0 0; font-size: 23px; }
.game p { margin: 0; font-size: 16px; line-height: 1.45; }
.game .tag { margin-top: auto; padding-top: var(--s3); }
.tag span { display: inline-block; font: 600 14px/1 var(--display); color: var(--plum); padding: 7px 12px; border-radius: 999px; }
.game-icon { width: 80px; height: 80px; border-radius: 19px; box-shadow: 0 6px 16px rgba(0, 0, 0, .3); transform-origin: 50% 80%; }
.game--whirly-bolts { background: var(--le-ground); } .game--whirly-bolts .tag span { background: var(--le-tag); }
.game--wobble-brawl { background: var(--wb-ground); } .game--wobble-brawl .tag span { background: var(--wb-tag); }
.game--windup-works { background: var(--ww-ground); } .game--windup-works .tag span { background: var(--ww-tag); }
.game--banana-bridge { background: var(--mb-ground); } .game--banana-bridge .tag span { background: var(--mb-tag); }
/* a little life on hover, or on a tap (site.js adds .poke) */
@media (prefers-reduced-motion: no-preference) {
  .game:hover, .game.poke { transform: translateY(-4px); box-shadow: var(--shadow); }
  .game--whirly-bolts:hover .game-icon, .game--whirly-bolts.poke .game-icon { animation: unscrew .9s cubic-bezier(.3, 1.3, .5, 1); }
  .game--wobble-brawl:hover .game-icon, .game--wobble-brawl.poke .game-icon { animation: wobble .9s ease-in-out; }
  .game--windup-works:hover .game-icon, .game--windup-works.poke .game-icon { animation: windup 1s ease-in-out; }
  .game--banana-bridge:hover .game-icon, .game--banana-bridge.poke .game-icon { animation: sway 1.1s ease-in-out; }
}
@keyframes unscrew { 0% { transform: none; } 45% { transform: translateY(-10px) rotate(-200deg); } 100% { transform: none; } }
@keyframes wobble { 0%, 100% { transform: none; } 20% { transform: rotate(-10deg) scale(1.05); } 40% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } 80% { transform: rotate(3deg); } }
@keyframes windup { 0%, 100% { transform: none; } 15%, 45% { transform: rotate(-8deg); } 30%, 60% { transform: rotate(8deg); } 80% { transform: translateY(-12px); } }
@keyframes sway { 0%, 100% { transform: none; } 25% { transform: translate(-5px, -6px) rotate(-6deg); } 50% { transform: translate(0, -2px); } 75% { transform: translate(5px, -6px) rotate(6deg); } }

/* ---- Play Balance on the home page, and its demo ---- */
.pb-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); align-items: center; }
@media (min-width: 880px) { .pb-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.demo {
  background: var(--surface); border: 2px solid var(--hair); border-radius: 28px; padding: var(--s5);
  box-shadow: var(--shadow); max-width: 440px; width: 100%; justify-self: center;
}
.demo-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); margin-bottom: var(--s4); }
.demo-title { font: 600 20px/1.2 var(--display); margin: 0; }
.demo-time { font: 600 18px/1.2 var(--display); color: var(--sub); margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.demo-pebbles { display: flex; flex-wrap: wrap; gap: 8px 6px; align-items: center; min-height: 76px; padding: var(--s2) 0; }
.demo-pebbles svg { width: 50px; height: 34px; overflow: visible; }
.peb-fill { stroke: var(--plum); stroke-width: 5; }
.demo-pebbles .peb-empty { fill: none; stroke: var(--line); stroke-width: 4; stroke-dasharray: 7 6; }
.demo-pebbles .new { animation: pop .45s cubic-bezier(.3, 1.7, .5, 1); }
.demo-note { font: 600 16px/1.3 var(--display); color: var(--sub); margin: 0; }
.demo-controls { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s4); }
.demo-controls button {
  width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface);
  color: var(--fg); font: 600 26px/1 var(--display); cursor: pointer; display: grid; place-items: center;
}
.demo-controls button:disabled { opacity: .4; cursor: default; }
.demo-controls button:active:not(:disabled) { transform: scale(.94); }
.demo-controls .demo-hint { margin: 0 0 0 var(--s2); font-size: 15px; color: var(--sub); }
.p-rose { fill: var(--rose); } .p-orange { fill: var(--orange); } .p-butter { fill: var(--butter); }
@keyframes pop { 0% { transform: translateY(-14px) scale(.2); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .demo-pebbles .new { animation: none; } }

/* ---- inner pages ---- */
.page-head { padding-block: var(--s7) var(--s5); }
.page-head .lede { margin-bottom: 0; }
.game-head { background: var(--cp-ground); color: var(--white); --focus: var(--butter); }
.game-head .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); padding-block: var(--s7); }
.game-head a { color: var(--white); }
.game-head .lede { color: #E4E7EE; }
.game-head .eyebrow { color: var(--cp-tag); }
.game-head h1 { display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s4); }
.game-head h1 img { width: 88px; height: 88px; border-radius: 21px; box-shadow: 0 8px 20px rgba(0, 0, 0, .35); }
.scroller { overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--s4) * -1); border-radius: 8px; }
.gallery { list-style: none; display: flex; gap: var(--s4); width: max-content; padding: var(--s2) var(--s4) var(--s5); }
.gallery li { flex: none; width: 200px; scroll-snap-align: center; }
@media (min-width: 1100px) {
  .scroller { overflow: visible; margin-inline: 0; }
  .gallery { width: 100%; justify-content: space-between; padding-inline: 0; }
  .gallery li { width: calc((100% - 4 * var(--s4)) / 5); }
}
.gallery figure { margin: 0; }
.gallery figcaption, .screens figcaption { font: 600 16px/1.3 var(--display); margin-top: var(--s3); }
.gallery .shot { box-shadow: 0 0 0 1px var(--hair), var(--shadow); }
.scroller:focus-visible { outline-offset: -3px; }
.scroll-hint { font-size: 15px; color: var(--sub); margin: 0; }
@media (min-width: 1100px) { .scroll-hint { display: none; } }
.steps { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); counter-reset: step; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.steps li { display: flex; gap: var(--s3); align-items: flex-start; }
.steps .num { flex: none; width: 56px; height: 39px; }
.num-t { font: 600 34px/1 var(--display); fill: var(--plum); }
.steps b, .facts b { display: block; font: 600 20px/1.25 var(--display); }
.steps p { margin: 2px 0 0; color: var(--sub); }
.facts { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); margin-top: var(--s5); }
@media (min-width: 680px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s7); } }
.facts li { display: flex; gap: var(--s4); align-items: flex-start; }
.facts svg { flex: none; width: 40px; height: 27px; margin-top: -1px; }
.facts + .note { max-width: none; margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--hair); }
.facts p { margin: 2px 0 0; color: var(--sub); }
.alt { background: var(--surface); border-block: 1px solid var(--hair); }
.note { color: var(--sub); font-size: 16px; }
.screens { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s4); }
@media (min-width: 760px) { .screens { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.screens figure { margin: 0; max-width: 240px; }
.screens .shot { box-shadow: 0 0 0 1px var(--hair), var(--shadow); }
.screens p { font-size: 15px; color: var(--sub); margin: var(--s1) 0 0; }

/* policy pages: plain reading */
.prose { max-width: 70ch; }
.prose h2 { font-size: 27px; margin-top: var(--s7); }
.prose h3 { margin-top: var(--s5); }
.prose ul { padding-left: 1.2em; margin: 0 0 var(--s4); }
.prose li { margin-bottom: var(--s2); }
.prose p, .prose li { max-width: 66ch; }
.short { background: var(--surface); border: 2px solid var(--hair); border-radius: var(--radius); padding: var(--s5); margin-block: var(--s5); }
.short h2 { margin-top: 0; font-size: 22px; }
.short ul { margin: 0; }
.dated { color: var(--sub); font-size: 16px; }
.contact {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4);
  background: var(--surface); border: 2px solid var(--hair); border-radius: var(--radius); padding: var(--s5); margin-block: var(--s5);
}
.contact .mail { font: 600 clamp(20px, 5vw, 26px)/1.2 var(--display); }
.contact p { margin: 0; }
.faq h3 { margin-top: var(--s6); }

/* review notes: visible on purpose; every one is removed before deploying (DEPLOY.md, step 1) */
.review {
  border: 2px dashed var(--review-line); background: var(--review-bg); color: var(--review-fg);
  border-radius: 14px; padding: var(--s3) var(--s4); margin: var(--s3) 0 var(--s4); font-size: 15px; line-height: 1.45; max-width: 66ch;
}
.review::before { content: "For review · "; font: 600 15px/1 var(--display); }
.panel .review, .game-head .review { --review-bg: #4A3A1A; --review-fg: #FFF6EC; --review-line: #E9B949; }

/* ---- footer ---- */
.site-footer { padding-block: var(--s6); }
.site-footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); }
.site-footer ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0 var(--s1); }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s3); font: 600 16px/1 var(--display); }
.site-footer p { margin: 0; color: var(--band-sub); font-size: 15px; }
.foot-brand { display: inline-flex; align-items: center; gap: var(--s2); font: 600 18px/1 var(--display); }
.foot-brand svg { width: 28px; height: 30px; }
.site-footer .legal { font-size: 13px; line-height: 1.45; margin-top: var(--s4); max-width: 80ch; }

/* ---- 404 ---- */
.lost { min-height: 100svh; display: flex; flex-direction: column; }
.lost main { flex: 1; display: grid; place-items: center; text-align: center; padding: var(--s6) var(--s4) var(--s8); }
.lost svg.oops { width: min(320px, 80vw); margin: 0 auto var(--s4); overflow: visible; }
.lost h1 { font-size: clamp(32px, 7vw, 48px); }
.lost p { margin-inline: auto; color: var(--band-sub); }
.home-link { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--butter); color: var(--plum) !important; font: 600 18px/1 var(--display); text-decoration: none; margin-top: var(--s3); }
@media (prefers-reduced-motion: no-preference) {
  .oops .fallen { animation: rock 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
}
@keyframes rock { 0%, 70%, 100% { transform: none; } 78% { transform: rotate(-7deg); } 86% { transform: rotate(5deg); } 93% { transform: rotate(-2deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* ---- print: plain pages, no bands ---- */
@media print {
  .band, .game-head, .panel { background: none !important; color: #000 !important; }
  .band a, .panel a, .game-head a { color: #000 !important; }
  .nav, .skip, .demo, .stage, .fan, .site-footer ul { display: none !important; }
  .section { padding-block: 16px; }
  .gallery { overflow: visible; flex-wrap: wrap; }
  .review { border-color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 12px; }
}

/* paths on the support page: wrap anywhere, so a long one never scrolls a phone sideways */
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; background: var(--hair); padding: 1px 6px; border-radius: 6px; overflow-wrap: anywhere; }

/* ---- home: the family ---- */
.family { padding-block: var(--s8); text-align: center; }
.family-art { width: 168px; height: auto; margin: 0 auto var(--s4); overflow: visible; }
.family h2 { font-size: clamp(26px, 4vw, 32px); margin-bottom: var(--s2); }
.family p { margin: 0 auto; font: 600 20px/1.4 var(--display); color: var(--sub); }
.mouth-sm { fill: none; stroke: var(--plum); stroke-width: 3.4; stroke-linecap: round; }
@media (prefers-reduced-motion: no-preference) {
  .family:hover .fam-peb { animation: hop .6s cubic-bezier(.3, 1.6, .5, 1); }
  .family-art > g:nth-child(2) .fam-peb { animation-delay: .1s; }
  .family-art > g:nth-child(3) .fam-peb { animation-delay: .2s; }
}
@keyframes hop { 0%, 100% { transform: none; } 40% { transform: translateY(-14px); } }
.names { font: 600 18px/1.3 var(--display); color: var(--butter); margin: calc(var(--s3) * -1) auto var(--s5); max-width: none; }