/* Graycells Games: the playful layer on top of site.css. Cream paper with game doodles, sticker cards with ink
   outlines and hard shadows, Fredoka for headings and Figtree for text (both self-hosted, SIL Open Font License). */
@font-face { font-family: Fredoka; src: url(fonts/fredoka-latin-500-normal.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: Fredoka; src: url(fonts/fredoka-latin-600-normal.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: Fredoka; src: url(fonts/fredoka-latin-700-normal.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: Figtree; src: url(fonts/figtree-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Figtree; src: url(fonts/figtree-latin-600-normal.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: Figtree; src: url(fonts/figtree-latin-800-normal.woff2) format('woff2'); font-weight: 800; font-display: swap; }

/* One light theme everywhere (it replaces site.css's dark mode). */
:root, :root:not(#x) {
  color-scheme: light;
  --bg: #FFF6E6; --band: #FFFFFF; --text: #2B2F36; --muted: #5E636B; --rule: #2B2F36; --link: #D9502F;
  --nav: rgba(255, 246, 230, .88); --ink: #2B2F36; --sun: #FFC23D; --coral: #FF6B4A;
  --c-guzhi: #E8871E; --c-uhloud: #7C3AED; --c-layers: #3B82F6; --c-ballpark: #22A35A; --c-sincewhen: #C2479F; --c-duenorth: #EF4444;
}
/* The footer sits at the bottom of the window even on short pages. */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > * { width: 100%; }
.footer { margin-top: auto !important; }
body { background: var(--bg) url(doodles.svg) 0 0 / 360px; color: var(--text);
  font-family: Figtree, -apple-system, "Helvetica Neue", Arial, sans-serif; letter-spacing: 0; }
h1, h2, h3, summary, .nav .brand, .badge, .platform, .pick, .footer .help { font-family: Fredoka, Figtree, sans-serif; letter-spacing: 0; }
.nav { border-bottom: 2px solid var(--ink); }
.nav .brand { font-weight: 600; }
.nav a.item { color: var(--ink); opacity: 1; font-size: 15px; font-weight: 600; }
.hero h1 { font-weight: 700; color: var(--ink); }
.crumbs, .crumbs a { color: var(--muted); }

/* Stickers */
.sticker, .stage .tile, .shot img, .section.band > .in, .doc { background: #fff; border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink); border-radius: 24px; }
.hero .icon, .product .appicon { border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); }
.badge { border: 2px solid var(--ink); color: var(--ink); background: var(--sun); transform: rotate(-2deg); }

/* Pill buttons: the first link is filled, the rest outlined. Each game sets --g; elsewhere it's coral. */
.links { gap: 12px; }
.links a { display: inline-block; font-weight: 700; padding: 9px 18px; border-radius: 999px; font-size: 16px; white-space: nowrap;
  color: var(--g, var(--coral)); background: #fff; box-shadow: inset 0 0 0 2px var(--g, var(--coral)); transition: transform .12s; }
.links a:first-child { background: var(--g, var(--coral)); color: #fff; box-shadow: none; }
.links a:hover { text-decoration: none; transform: translateY(-2px); }
.links .chev::after { content: ""; }
.links a[data-trailer]::before { content: "▶ "; font-size: .8em; }
.guzhi, .pick.guzhi { --g: var(--c-guzhi); } .uhloud { --g: var(--c-uhloud); } .layers { --g: var(--c-layers); }
.ballpark { --g: var(--c-ballpark); } .sincewhen { --g: var(--c-sincewhen); } .duenorth { --g: var(--c-duenorth); }

/* Home: the tagline stands in for the title (the h1 stays for screen readers and search). */
.home .hero { padding: 40px 22px 34px; }
.home .hero h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.home .hero p.lede { font-family: Fredoka, Figtree, sans-serif; font-weight: 600; font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.3; color: var(--ink); }
.home .hero p.lede .b { color: var(--coral); display: inline-block; transform: rotate(-1.5deg); }

/* Home: a shelf of six logo stickers; the box underneath shows the game you point at. */
.picker { width: fit-content; max-width: calc(100% - 32px); margin: 0 auto 64px; }
.shelf { display: flex; gap: 22px; justify-content: center; }
.pick { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 96px; color: var(--ink);
  font-weight: 600; font-size: 15px; text-align: center; line-height: 1.15; }
.pick span { white-space: nowrap; }
.pick:hover { text-decoration: none; }
.pick img { width: 88px; height: 88px; border-radius: 22px; border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink);
  background: #fff; transition: transform .16s ease, box-shadow .16s ease; }
.pick:hover img, .pick:focus-visible img, .pick.on img { transform: translate(-2px, -4px) rotate(-4deg); box-shadow: 7px 9px 0 var(--ink); }
.pick.on span { color: var(--g); }
/* Every game sits in the same grid cell, so the box keeps one height and nothing jumps as you move along. */
.stage { position: relative; display: grid; margin-top: 30px; }
.stage .tile { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity .15s; padding: 26px 34px 24px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--g) 16%, #fff) 0%, color-mix(in srgb, var(--g) 7%, #fff) 100%); }
.stage .tile.uhloud { background: linear-gradient(180deg, #E6D9FF 0%, #F1EAFF 100%); }
.stage .tile[data-active] { visibility: visible; opacity: 1; }
.stage .tile h2 { color: var(--g); font-size: 30px; margin-bottom: 6px; }
.stage .tile p.sub { max-width: 640px; font-size: 17px; line-height: 1.4; }
.stage .platform { margin-bottom: 6px; }
.stage .badge { margin: 14px 0 0 !important; font-size: 11px; }
.stage .links { margin-top: auto; padding-top: 18px; }
/* A short line in the game's color sits under the chosen logo and glides to the next one. */
.stage::before { content: ""; position: absolute; top: -16px; left: var(--x, 50%); width: 30px; height: 4px; border-radius: 2px;
  background: var(--g, var(--ink)); transform: translateX(-50%); transition: left .25s ease, background-color .25s; }
/* Without JavaScript the games are simply listed. */
.no-js .stage .tile { grid-area: auto; visibility: visible; opacity: 1; margin-bottom: 18px; }
.no-js .stage::before { display: none; }
/* Phones: all six logos in one row, so the line always sits right under the game it points at. The names hide
   (the box shows the name) but stay readable by screen readers. */
@media (max-width: 760px) {
  .picker { width: auto; }
  .shelf { gap: 0; justify-content: space-between; padding: 0 18px; }
  .pick { min-width: 0; gap: 0; }
  .pick span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pick img { width: 48px; height: 48px; border-radius: 13px; border-width: 2px; box-shadow: 3px 3px 0 var(--ink); }
  .pick:hover img, .pick:focus-visible img, .pick.on img { transform: translateY(-3px) rotate(-5deg); box-shadow: 4px 6px 0 var(--ink); }
  .stage { margin-top: 24px; }
  .stage .tile { padding: 22px 18px; }
}
@media (max-width: 360px) { .pick img { width: 42px; height: 42px; border-radius: 11px; } }

/* Inner pages (Guzhi, How to Play, Privacy) */
.hero .icon { border-radius: 28px; }
.shot img { border-radius: 20px; }
.section.band { background: transparent; }
.section.band > .in { padding: 34px 30px; }
.doc { margin: 0 auto 64px; padding: 16px 30px 34px; max-width: 760px; }
.doc .card { background: #FFF6E6; border: 2px solid var(--ink); }
details { border-color: color-mix(in srgb, var(--ink) 25%, transparent); }

/* Footer: support links, then the copyright line. */
.footer { background: var(--ink); color: #d6d8dc; }
.footer .inner { padding: 26px 22px 22px; text-align: center; }
.footer .help { font-size: 17px; color: #fff; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; }
.footer .help a { color: var(--sun); font-weight: 600; } .footer .help a:hover { color: #fff; }
.footer .help .dot { color: #8a9099; }
.footer .row { justify-content: center; border-top-color: #444a54; color: #aeb3bb; font-size: 13px; }
@media (max-width: 480px) { .footer .help .dot { display: none; } .footer .help { flex-direction: column; align-items: center; } }

@media (prefers-reduced-motion: reduce) { .stage::before, .pick img, .stage .tile, .links a { transition: none; } }