/* Games look: A + C, "Porch Light on yellow" (Justin's pick, 2026-10-03: "I like A most, but I like the yellow
   background of C, and I like the idea of the smiley face getting drawn in a game-like animation.").
   Mock: seats/geese-games/brand-ac.html. Branding's final files replace these at the same paths.
   No inline styles anywhere (the hub CSP is style-src 'self'); the animation is CSS only (no script runs here). */
@font-face { font-family: "Fraunces"; font-weight: 600; font-display: swap; src: url("/fonts/fraunces-600.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-weight: 400 700; font-display: swap; src: url("/fonts/publicsans-400.woff2") format("woff2"); }

:root {
  --yellow: #FABB41;  /* porch yellow: the field */
  --night: #141A15;   /* night ink: mark and type */
  --ink2: #3A3220;    /* softer ink for small text on yellow */
  --card: #FFF6DF;
  --serif: "Fraunces", ui-serif, Georgia, serif;
  --sans: "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--yellow); }
/* backstop: nothing may make the page slide sideways (mobile-optimization §6) */
html, body { max-width: 100%; overflow-x: hidden; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background: var(--yellow); color: var(--night);
  font: 1.0625rem/1.5 var(--sans);
  overflow-x: hidden; position: relative;
}
/* porch-light glow behind the mark, and chalk lines on the street */
body::before {
  /* capped at the screen width: a fixed 560px glow widened a 375px phone page to 467px (measured 2026-10-03) */
  content: ""; position: absolute; width: min(560px, 100vw); height: min(560px, 100vw); border-radius: 50%;
  left: 50%; top: 140px; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.38), rgba(255,255,255,0) 62%);
}
body::after {
  content: ""; position: fixed; left: 0; right: 0; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); height: 2px; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(20,26,21,.16) 0 26px, transparent 26px 48px);
}
.shelf { position: relative; margin: 0 auto; max-width: 46rem; text-align: center;
  padding: calc(3rem + env(safe-area-inset-top, 0px)) calc(1rem + env(safe-area-inset-right, 0px))
           calc(4.5rem + env(safe-area-inset-bottom, 0px)) calc(1rem + env(safe-area-inset-left, 0px)); }

/* ---- the smile draws itself in, once ---- */
.smile { display: block; width: clamp(104px, 24vw, 150px); height: auto; margin: 0 auto; overflow: visible; }
.smile .ring, .smile .mouth { fill: none; stroke: var(--night); stroke-width: 8; stroke-linecap: round; }
/* each line stays invisible until its own draw starts: a round line-cap paints a dot even at zero length */
.smile .ring  { stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0;
  animation: show 0s linear .25s forwards, draw .9s cubic-bezier(.6,.05,.25,1) .25s forwards; }
.smile .mouth { stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0;
  animation: show 0s linear 1.55s forwards, draw .38s ease-out 1.55s forwards; }
.smile .eye { fill: var(--night); transform-box: fill-box; transform-origin: center; transform: scale(0);
  animation: pop .34s cubic-bezier(.34,1.8,.5,1) 1.12s forwards; }
.smile .eye.r { animation: pop .34s cubic-bezier(.34,1.8,.5,1) 1.26s forwards, wink .32s ease-in-out 2.5s; }
.spark { fill: var(--night); opacity: 0; transform-box: fill-box; transform-origin: center;
  animation: spark .6s ease-out 1.9s forwards; }
.s1 { --dx: 0px;   --dy: -14px; }
.s2 { --dx: 12px;  --dy: -10px; }
.s3 { --dx: -12px; --dy: -10px; }
.s4 { --dx: 14px;  --dy: 2px; }
.s5 { --dx: -14px; --dy: 2px; }
@keyframes show  { to { opacity: 1; } }
@keyframes draw  { to { stroke-dashoffset: 0; } }
@keyframes pop   { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes wink  { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.15, .12); } }
@keyframes spark { 0% { opacity: 0; transform: translate(0,0) scale(.4); } 40% { opacity: 1; }
                   100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1); } }

.kick, h1, .label, .games, .about, .more { opacity: 0; animation: rise .5s ease-out forwards; }
.kick  { animation-delay: 1.9s;  margin: 1.4rem 0 .5rem; font: 700 .8rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
h1     { animation-delay: 2.0s;  margin: 0 0 .6rem; font: 600 clamp(2.1rem, 6.5vw, 3.2rem)/1.02 var(--serif); text-wrap: balance; }
.label { animation-delay: 2.1s;  margin: 0 auto; max-width: 40ch; color: var(--ink2); }
.games { animation-delay: 2.25s; }
.about { animation-delay: 2.4s;  margin: 2.2rem auto 0; max-width: 44ch; font-size: .9rem; color: var(--ink2); text-wrap: pretty; }
.more  { animation-delay: 2.4s;  margin: .1rem 0 0; font-size: .9rem; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- the directory ---- */
.games { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); text-align: left; }
.game a {
  display: grid; grid-template-columns: 64px 1fr; gap: .25rem 1rem; align-items: center;
  padding: 1.1rem 1.15rem; border-radius: 18px; text-decoration: none; color: var(--night);
  background: var(--card); border: 2px solid var(--night); box-shadow: 0 5px 0 var(--night);
  transition: transform .12s ease, box-shadow .12s ease;
}
.game a:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--night); }
.game a:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--night); }
/* a game that isn't open yet: same card shape, flat, not a link */
.game .card {
  display: grid; grid-template-columns: 64px 1fr; gap: .25rem 1rem; align-items: center;
  padding: 1.1rem 1.15rem; border-radius: 18px; color: var(--night);
  border: 2px dashed rgba(20,26,21,.45); background: rgba(255,246,223,.45);
}
.game.soon .play { color: var(--ink2); }
.game img { grid-row: span 2; width: 64px; height: 64px; border-radius: 14px; display: block; }
.game .name { font: 600 1.35rem/1.15 var(--serif); }
.game .play { font: 700 .78rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; }

a { color: var(--night); font-weight: 700; text-underline-offset: .2em; }
a:focus-visible { outline: 3px solid var(--night); outline-offset: 4px; }
.more a { display: inline-block; padding: .6rem .25rem; min-height: 44px; line-height: 1.5; } /* 44px tap target */
.game a { -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.about, .label { user-select: text; -webkit-user-select: text; }

/* pages that shouldn't make anyone wait (the 404): everything shown at once, smile already drawn */
.still .smile .ring, .still .smile .mouth { animation: none; stroke-dashoffset: 0; opacity: 1; }
.still .smile .eye, .still .smile .eye.r { animation: none; transform: none; }
.still .kick, .still h1, .still .label, .still .games, .still .about, .still .more { animation: none; opacity: 1; }

/* short screens (a phone held sideways, ~390px tall): the game buttons must show without scrolling.
   Measured 2026-10-03 at 844x390: the first button started at 441px. */
@media (max-height: 500px) {
  .shelf { padding-top: calc(1rem + env(safe-area-inset-top, 0px)); }
  .smile { width: 64px; }
  .kick { margin: .6rem 0 .25rem; }
  h1 { font-size: 1.9rem; margin-bottom: .35rem; }
  .label { font-size: .88rem; max-width: 60ch; }
  .games { margin-top: 1rem; }
  body::before { top: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  .smile .ring, .smile .mouth { animation: none; stroke-dashoffset: 0; opacity: 1; }
  .smile .eye, .smile .eye.r { animation: none; transform: none; }
  .spark { display: none; }
  .kick, h1, .label, .games, .about, .more { animation: none; opacity: 1; }
  .game a { transition: none; }
}