/* The site's own rules, and the kit every screen is built from: the type, the one button, the
 * one input, the focus ring, and the landing (src/pages/home.js) with its little board. play.css
 * builds the play shell's screens from the same pieces. Every colour, size, radius and shadow
 * is a token from tokens.css.
 */

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: var(--size-1) / 1.5 var(--font);
  -webkit-text-size-adjust: 100%;
}

/* ------------------------------------------------------------------ type */

h1,
h2,
h3,
legend,
label {
  font-family: var(--font-display);
}

h1 {
  font-size: var(--size-4);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
  overflow-wrap: anywhere;
}

h2 {
  font-weight: 600;
}

p {
  color: var(--ink-2);
}

a {
  color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.note {
  color: var(--muted);
  font-size: var(--size-0);
}

.lede {
  font-size: var(--size-2);
  color: var(--ink-2);
  margin: 0 0 var(--space-3);
}

/* ------------------------------------------------------------------ the focus ring */
/* Every control shows where the keyboard is, in one ring that no fill can hide. */

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------ the page */

.page {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-5) var(--space-3);
}

/* ------------------------------------------------------------------ the button */
/* One button: a chunky outline, a hard shadow, and a squish when it is pressed. Quiet is the
   same button on the raised surface. */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap);
  box-sizing: border-box;
  padding: var(--space-2) var(--space-4);
  border: var(--edge-1) solid var(--edge);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--shadow);
  font-family: var(--font-display);
  font-size: var(--size-2);
  font-weight: 600;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.08s ease-out, box-shadow 0.08s ease-out;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.button-quiet {
  background: var(--paper-2);
  color: var(--ink);
}

.button:active:not(:disabled) {
  transform: translateY(var(--press));
  box-shadow: var(--shadow-pressed);
}

.button:disabled {
  opacity: 0.55;
  cursor: default;
}

@media (hover: hover) {
  .button:hover:not(:disabled) {
    filter: brightness(1.06);
  }
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

/* ------------------------------------------------------------------ the input */

.join label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--size-2);
  font-weight: 600;
}

.row {
  display: flex;
  gap: var(--space-2);
}

input {
  min-height: var(--tap);
  min-width: 0;
  flex: 1;
  box-sizing: border-box;
  padding: 0 var(--space-3);
  border: var(--edge-1) solid var(--edge);
  border-radius: var(--radius);
  background: var(--paper-2);
  color: var(--ink);
  font: inherit;
  font-size: var(--size-2);
}

/* ------------------------------------------------------------------ the landing */
/* src/pages/home.js, and the play shell's own home (src/client/app.js): a lawn between two
   glowing ponds where one goose runs for home past a fence, the logo with a honk, the ways in,
   and How to play with a drawing to each line (1.4 of thoughts/shipped/2026-10-25-polish.md).
   Shapes in CSS and SVG, so it needs no script. */

.landing {
  padding-top: var(--space-4);
}

/* The logo, with a speech bubble honking over the end of it. */
.brand {
  position: relative;
  display: inline-block;
  margin: 0 0 var(--space-2);
}

.brand h1 {
  margin: 0;
  font-size: var(--size-5);
  line-height: 0.95;
}

.honk {
  position: absolute;
  right: 0;
  top: -1.6rem;
  padding: 0.1rem 0.5rem;
  border: var(--edge-2) solid var(--edge);
  border-radius: 0.75rem 0.75rem 0.75rem 0.15rem;
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--size-0);
  font-weight: 700;
  transform: rotate(-6deg);
}

/* The lawn, as wide as the page up to a size: every length in it a share of its width, so the
   geese's steps below hold at any size. A square is 16.16%, a groove 3.2%, a step 19.36%. */
.hero {
  position: relative;
  width: min(100%, 22rem);
  aspect-ratio: 1;
  margin: var(--space-3) 0 var(--space-5);
  padding: 3.2%;
  box-sizing: border-box;
  border: var(--edge-1) solid var(--edge);
  border-radius: var(--radius-lg);
  background: var(--board);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 3.2%;
}

/* Each goose's pond, glowing in its colour: the first goose's at the top, the second's below. */
.hero-pond {
  position: absolute;
  left: 3.2%;
  right: 3.2%;
  height: 1.8%;
  border-radius: var(--radius-pill);
}

.hero-pond-1 {
  top: 0.7%;
  background: var(--pawn-1);
  box-shadow: 0 0 0.6rem 0.1rem var(--pawn-1);
}

.hero-pond-2 {
  bottom: 0.7%;
  background: var(--pawn-2);
  box-shadow: 0 0 0.6rem 0.1rem var(--pawn-2);
}

.hero-square {
  border-radius: 12%;
  background: var(--square);
}

.hero-square:nth-child(5n + 2),
.hero-square:nth-child(5n + 4) {
  background: var(--square-2);
}

/* A fence: a run of field stones, two painted in the colour of the goose that put it down. Each
   drops in on its turn of the game in scripts/hero.mjs. */
.hero-wall {
  --paint: var(--pawn-1);
  position: absolute;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg,
    var(--stone) 0 15%, var(--stone-edge) 15% 17%, var(--paint) 17% 29%, var(--stone-edge) 29% 31%,
    var(--stone-2) 31% 49%, var(--stone-edge) 49% 51%, var(--stone-3) 51% 63%, var(--stone-edge) 63% 65%,
    var(--paint) 65% 79%, var(--stone-edge) 79% 81%, var(--stone) 81%);
  border: 1px solid var(--stone-edge);
  width: 35.52%;
  height: 2.6%;
  box-sizing: border-box;
  animation: 24s ease-out infinite;
}

/* Under row 3 at columns 2 and 3, under row 3 at 0 and 1, and under row 1 at 2 and 3. */
.hero-wall-1 { left: 41.92%; top: 77.74%; animation-name: hero-wall-1; }
.hero-wall-2 { left: 3.2%; top: 77.74%; animation-name: hero-wall-2; }
.hero-wall-3 { --paint: var(--pawn-2); left: 41.92%; top: 39%; animation-name: hero-wall-3; }

/* Two geese taking turns, a step (96.8% of their own size) at a time: the game in
   scripts/hero.mjs, slow enough to follow. A goose's feet stay on the ground as it squashes. */
.hero-pawn {
  position: absolute;
  width: 20%;
  height: 20%;
  left: 40%;
  bottom: 3%;
  overflow: visible;
  transform-origin: 50% 85%;
  animation: hero-run 24s ease-in-out infinite;
}

.hero-pawn-2 {
  bottom: auto;
  top: 1%;
  animation-name: hero-run-2;
}

.hero-pond-1 { animation: hero-splash 24s ease-out infinite; }

/* A goose that honks on the app's home (src/client/chatter.js) throws its head about, and says
   so in a bubble over it. */
.hero-goose {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.hero-goose.is-honking { animation: hero-honk 0.45s ease-in-out 2; }

@keyframes hero-honk {
  0%, 100% { transform: rotate(0) scale(1); }
  30% { transform: rotate(-7deg) scale(1.05, 0.97); }
  65% { transform: rotate(5deg) scale(0.98, 1.04); }
}

.hero-says {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  fill: var(--ink);
  stroke: var(--paper-2);
  stroke-width: 3px;
  paint-order: stroke;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
  .hero-goose.is-honking { animation: none; }
}

/* From scripts/hero.mjs. */
@keyframes hero-run {
  0% { transform: translate(0%, 0%) scale(1, 1); }
  3.33% { transform: translate(0%, 0%) scale(1, 1); }
  3.67% { transform: translate(0%, 0%) scale(1.08, 0.88); }
  4.48% { transform: translate(0%, -76.4%) scale(0.95, 1.07); }
  5.42% { transform: translate(0%, -96.8%) scale(1.07, 0.9); }
  5.92% { transform: translate(0%, -96.8%) scale(1, 1); }
  15.83% { transform: translate(0%, -96.8%) scale(1, 1); }
  16.17% { transform: translate(0%, -96.8%) scale(1.08, 0.88); }
  16.98% { transform: translate(0%, -173.2%) scale(0.95, 1.07); }
  17.92% { transform: translate(0%, -193.6%) scale(1.07, 0.9); }
  18.42% { transform: translate(0%, -193.6%) scale(1, 1); }
  53.33% { transform: translate(0%, -193.6%) scale(1, 1); }
  53.67% { transform: translate(0%, -193.6%) scale(1.08, 0.88); }
  54.48% { transform: translate(-48.4%, -221.6%) scale(0.95, 1.07); }
  55.42% { transform: translate(-96.8%, -193.6%) scale(1.07, 0.9); }
  55.92% { transform: translate(-96.8%, -193.6%) scale(1, 1); }
  65.83% { transform: translate(-96.8%, -193.6%) scale(1, 1); }
  66.17% { transform: translate(-96.8%, -193.6%) scale(1.08, 0.88); }
  66.98% { transform: translate(-96.8%, -270%) scale(0.95, 1.07); }
  67.92% { transform: translate(-96.8%, -290.4%) scale(1.07, 0.9); }
  68.42% { transform: translate(-96.8%, -290.4%) scale(1, 1); }
  78.33% { transform: translate(-96.8%, -290.4%) scale(1, 1); }
  78.67% { transform: translate(-96.8%, -290.4%) scale(1.08, 0.88); }
  79.48% { transform: translate(-96.8%, -366.8%) scale(0.95, 1.07); }
  80.42% { transform: translate(-96.8%, -387.2%) scale(1.07, 0.9); }
  80.92% { transform: translate(-96.8%, -387.2%) scale(1, 1); }
  84.17% { transform: translate(-96.8%, -387.2%) scale(1, 1); }
  84.79% { transform: translate(-96.8%, -401.2%) scale(0.97, 1.05); }
  85.42% { transform: translate(-96.8%, -387.2%) scale(1.04, 0.95); }
  85.83% { transform: translate(-96.8%, -387.2%) scale(1, 1); }
  87.5% { transform: translate(-96.8%, -387.2%) scale(1, 1); }
  88.13% { transform: translate(-96.8%, -401.2%) scale(0.97, 1.05); }
  88.75% { transform: translate(-96.8%, -387.2%) scale(1.04, 0.95); }
  89.17% { transform: translate(-96.8%, -387.2%) scale(1, 1); }
  97.5% { transform: translate(-96.8%, -387.2%) scale(1, 1); }
  97.54% { transform: translate(0%, 0%) scale(1, 1); }
  100% { transform: translate(0%, 0%) scale(1, 1); }
  0%, 100% { opacity: 0; }
  2%, 95% { opacity: 1; }
  97.5% { opacity: 0; }
}

@keyframes hero-run-2 {
  0% { transform: translate(0%, 0%) scale(1, 1); }
  9.58% { transform: translate(0%, 0%) scale(1, 1); }
  9.92% { transform: translate(0%, 0%) scale(1.08, 0.88); }
  10.73% { transform: translate(0%, 20.4%) scale(0.95, 1.07); }
  11.67% { transform: translate(0%, 96.8%) scale(1.07, 0.9); }
  12.17% { transform: translate(0%, 96.8%) scale(1, 1); }
  22.08% { transform: translate(0%, 96.8%) scale(1, 1); }
  22.42% { transform: translate(0%, 96.8%) scale(1.08, 0.88); }
  23.8% { transform: translate(0%, 118.6%) scale(0.95, 1.07); }
  25.21% { transform: translate(0%, 290.4%) scale(1.07, 0.9); }
  25.71% { transform: translate(0%, 290.4%) scale(1, 1); }
  34.58% { transform: translate(0%, 290.4%) scale(1, 1); }
  34.92% { transform: translate(0%, 290.4%) scale(1.08, 0.88); }
  35.73% { transform: translate(-48.4%, 262.4%) scale(0.95, 1.07); }
  36.67% { transform: translate(-96.8%, 290.4%) scale(1.07, 0.9); }
  37.17% { transform: translate(-96.8%, 290.4%) scale(1, 1); }
  59.58% { transform: translate(-96.8%, 290.4%) scale(1, 1); }
  59.92% { transform: translate(-96.8%, 290.4%) scale(1.08, 0.88); }
  60.73% { transform: translate(-48.4%, 262.4%) scale(0.95, 1.07); }
  61.67% { transform: translate(0%, 290.4%) scale(1.07, 0.9); }
  62.17% { transform: translate(0%, 290.4%) scale(1, 1); }
  72.08% { transform: translate(0%, 290.4%) scale(1, 1); }
  72.42% { transform: translate(0%, 290.4%) scale(1.08, 0.88); }
  73.23% { transform: translate(48.4%, 262.4%) scale(0.95, 1.07); }
  74.17% { transform: translate(96.8%, 290.4%) scale(1.07, 0.9); }
  74.67% { transform: translate(96.8%, 290.4%) scale(1, 1); }
  97.5% { transform: translate(96.8%, 290.4%) scale(1, 1); }
  97.54% { transform: translate(0%, 0%) scale(1, 1); }
  100% { transform: translate(0%, 0%) scale(1, 1); }
  0%, 100% { opacity: 0; }
  2%, 95% { opacity: 1; }
  97.5% { opacity: 0; }
}

@keyframes hero-wall-1 {
  0%, 28.33% { opacity: 0; transform: translateY(-400%) scale(1.15); }
  29.58% { opacity: 1; transform: translateY(15%) scale(1); }
  30.08%, 95% { opacity: 1; transform: translateY(0) scale(1); }
  97.5%, 100% { opacity: 0; transform: translateY(0) scale(1); }
}

@keyframes hero-wall-2 {
  0%, 40.83% { opacity: 0; transform: translateY(-400%) scale(1.15); }
  42.08% { opacity: 1; transform: translateY(15%) scale(1); }
  42.58%, 95% { opacity: 1; transform: translateY(0) scale(1); }
  97.5%, 100% { opacity: 0; transform: translateY(0) scale(1); }
}

@keyframes hero-wall-3 {
  0%, 47.08% { opacity: 0; transform: translateY(-400%) scale(1.15); }
  48.33% { opacity: 1; transform: translateY(15%) scale(1); }
  48.83%, 95% { opacity: 1; transform: translateY(0) scale(1); }
  97.5%, 100% { opacity: 0; transform: translateY(0) scale(1); }
}

@keyframes hero-splash {
  0%, 80.21% { box-shadow: 0 0 0.6rem 0.1rem var(--pawn-1); transform: scaleY(1); }
  81.04% { box-shadow: 0 0 1.6rem 0.6rem var(--pawn-1); transform: scaleY(2.4); }
  87.08%, 100% { box-shadow: 0 0 0.6rem 0.1rem var(--pawn-1); transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-pawn, .hero-wall, .hero-pond { animation: none; }
  .hero-pawn { transform: translate(-96.8%, -387.2%); }
  .hero-pawn-2 { transform: translate(96.8%, 290.4%); }
}
/* End of scripts/hero.mjs. */

/* The ways in: the computer across the top, the other two side by side under it. */
.actions-home {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.actions-home > :first-child {
  grid-column: 1 / -1;
  min-height: 3.5rem;
}

.actions-home > :not(:first-child) {
  padding-inline: var(--space-2);
  font-size: var(--size-1);
}

/* Joining with a code, set apart: a friend's code, typed big. */
.join {
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--paper-3);
}

.join input {
  font-family: var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.how-title {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--size-3);
}

.how {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.how li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: var(--edge-2) solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-2);
  color: var(--ink-2);
}

/* A line's drawing: a strip of lawn from goose-art.js (HOW_ART). */
.how-art {
  flex: none;
  width: 5.5rem;
  height: 3.25rem;
  overflow: visible;
}

.how-ground { fill: var(--board); }
.how-square { fill: var(--square); }
.how-square-2 { fill: var(--square-2); }
.how-mark { opacity: 0.55; }

.how-arc {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.6;
  stroke-dasharray: 3 3;
  stroke-linecap: round;
}

/* A goal pond's glint, on the board and in a drawing. */
.pond-glint {
  fill: var(--pond-glint);
  opacity: 0.55;
}

.how strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
}

/* ------------------------------------------------------------------ geese

   A goose as src/client/goose-art.js draws it, on the board, by a name and on the landing: its
   parts and the four players' colours. How a goose moves is play.css's. */

.goose-outline {
  stroke: var(--pawn-edge);
  stroke-width: 4.5;
  stroke-linejoin: round;
}

.goose-fill {
  stroke: none;
}

.goose-foot,
.goose-beak,
.goose-beak-low {
  fill: var(--beak);
  stroke: var(--pawn-edge);
  stroke-width: 1.3;
  stroke-linejoin: round;
}

.goose-wing {
  fill: none;
  stroke: var(--pawn-edge);
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0.5;
}

.goose-wing-shade {
  fill: var(--pawn-edge);
  opacity: 0.14;
}

.goose-belly {
  fill: var(--goose-cheek);
  opacity: 0.4;
}

.goose-cheek,
.goose-glint {
  fill: var(--goose-cheek);
}

.goose-blush {
  fill: var(--goose-blush);
  opacity: 0.85;
}

.goose-eye {
  fill: var(--goose-eye);
}

.goose-eye-shut,
.goose-brow {
  display: none;
  fill: none;
  stroke: var(--goose-eye);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.hat {
  fill: var(--hat);
  stroke: var(--pawn-edge);
  stroke-width: 1.4;
  stroke-linejoin: round;
}

.hat-band {
  stroke: var(--pawn-edge);
  stroke-width: 1;
}

/* A dry-stone fence: grey field stones, and the painted ones in whatever colour holds them. */
.stone {
  stroke: var(--stone-edge);
  stroke-width: 1;
}

.stone-1 { fill: var(--stone); }
.stone-2 { fill: var(--stone-2); }
.stone-3 { fill: var(--stone-3); }

.goose-icon,
.goose-badge {
  overflow: visible;
}

/* A badge: the goose's head in a cream disc, in a ring of its colour. */
.badge-ring {
  stroke: var(--pawn-edge);
  stroke-width: 1.6;
}

.badge-disc {
  fill: var(--hat);
}

.pawn-fill-1 { fill: var(--pawn-1); }
.pawn-fill-2 { fill: var(--pawn-2); }
.pawn-fill-3 { fill: var(--pawn-3); }
.pawn-fill-4 { fill: var(--pawn-4); }
.pawn-fill-5 { fill: var(--pawn-5); }
.pawn-fill-6 { fill: var(--pawn-6); }
.pawn-fill-7 { fill: var(--pawn-7); }
.pawn-fill-8 { fill: var(--pawn-8); }
.pawn-stroke-1 { stroke: var(--pawn-1); }
.pawn-stroke-2 { stroke: var(--pawn-2); }
.pawn-stroke-3 { stroke: var(--pawn-3); }
.pawn-stroke-4 { stroke: var(--pawn-4); }
.pawn-stroke-5 { stroke: var(--pawn-5); }
.pawn-stroke-6 { stroke: var(--pawn-6); }
.pawn-stroke-7 { stroke: var(--pawn-7); }
.pawn-stroke-8 { stroke: var(--pawn-8); }