:root {
  color-scheme: dark;
  --burrow: #1E1A2B;
  --den: #2A2440;
  --chalk: #F2EDE4;
  --mute: #B9B0C9;
  --line: rgba(242, 237, 228, .14);
  --fox: #FF7A3D;
  --leaf: #8FD37E;
  --sky: #7FB0FF;
  --sun: #FFD25E;
  --display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --text: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--burrow);
  color: var(--chalk);
  font: 400 1.0625rem/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(1120px, 100% - 3rem); margin-inline: auto; }

/* Header */
.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.5rem; }
.logo { display: flex; align-items: center; gap: .6rem; font: 800 1.35rem/1 var(--display); letter-spacing: -.02em; text-decoration: none; }
.top ul { display: flex; gap: 1.5rem; list-style: none; padding: 0; }
.top ul a { color: var(--mute); text-decoration: none; }
.top ul a:hover { color: var(--chalk); }

/* Critter (shared by board, logo and lineup) */
.bod { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 36%; background: var(--col, var(--fox)); }
.eyes { display: flex; justify-content: center; gap: 14%; width: 62%; transform: translate(var(--ex, 0), var(--ey, 0)); }
.eye { display: grid; place-items: center; width: 34%; aspect-ratio: 1; border-radius: 50%; background: #fff; }
.eye::after { content: ""; width: 52%; aspect-ratio: 1; border-radius: 50%; background: var(--burrow); transform: translate(var(--px, 0), var(--py, 0)); }
[data-dir="up"]    { --ex: 0;    --ey: -90%; --px: 0;    --py: -35%; --bx: 0;    --by: -12%; }
[data-dir="down"]  { --ex: 0;    --ey: 90%;  --px: 0;    --py: 35%;  --bx: 0;    --by: 12%; }
[data-dir="left"]  { --ex: -28%; --ey: 0;    --px: -35%; --py: 0;    --bx: -12%; --by: 0; }
[data-dir="right"] { --ex: 28%;  --ey: 0;    --px: 35%;  --py: 0;    --bx: 12%;  --by: 0; }
/* Eyes: blink, and look around slowly (right, left, up, down) before settling back */
@media (prefers-reduced-motion: no-preference) {
  .eye { animation: blink 6s infinite; animation-delay: calc(var(--c, 0) * -1.1s + var(--r, 0) * -.7s); }
  .eye::after { animation: look 11s ease-in-out infinite; animation-delay: calc(var(--c, 0) * -1.7s + var(--r, 0) * -2.3s); }
}
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }
@keyframes look {
  0%, 55%, 100% { transform: translate(var(--px, 0), var(--py, 0)); }
  62% { transform: translate(35%, 0); }
  70% { transform: translate(-35%, 0); }
  78% { transform: translate(0, -35%); }
  86% { transform: translate(0, 35%); }
  93% { transform: translate(var(--px, 0), var(--py, 0)); }
}
.mini { display: inline-block; flex: none; width: var(--size, 30px); height: var(--size, 30px); }

/* Hero */
.hero { display: grid; gap: 3.5rem; align-items: center; padding-block: 3rem 6rem; }
h1 { font: 800 clamp(2.75rem, 6.5vw, 5.25rem)/1 var(--display); letter-spacing: -.035em; max-width: 11ch; }
.lede { margin-top: 1.5rem; max-width: 34rem; color: var(--mute); font-size: 1.2rem; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.btn { display: inline-flex; padding: .85rem 1.4rem; border: 1.5px solid var(--line); border-radius: 999px; font-weight: 500; text-decoration: none; }
.btn:hover { border-color: var(--chalk); }
.btn-main { background: var(--fox); border-color: var(--fox); color: var(--burrow); }
.btn-main:hover { background: #ff8f5c; border-color: #ff8f5c; }

/* Player critter (opt-in, WASD or arrows) */
button.btn { background: none; color: inherit; font: inherit; font-weight: 500; cursor: pointer; }
.hint { margin-top: .75rem; color: var(--mute); font-size: .95rem; }
.player { --size: var(--ps, 44px); position: absolute; top: 0; left: 0; z-index: 50; pointer-events: none; }
.player.love .eye { animation: wink .5s 3; animation-delay: 0s; }
.trail { position: absolute; top: 0; left: 0; z-index: 49; width: var(--ps, 44px); height: var(--ps, 44px); border-radius: 36%; background: var(--sky); pointer-events: none; animation: trail .5s ease-out forwards; }
@keyframes trail {
  from { opacity: .35; transform: translate(var(--tx), var(--ty)) scale(.9); }
  to { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(.3); }
}
.heart { position: absolute; left: 50%; top: -4px; color: var(--fox); font-size: 1.25rem; line-height: 1; opacity: 0; animation: heart 1.4s ease-out both; }
.bod { transition: translate .5s cubic-bezier(.34, 1.56, .64, 1); }
.shoved .bod { transition: translate .12s ease-out; }
.watching[data-dir] { --px: var(--wx, 0%); --py: var(--wy, 0%); }
.watching .eye::after { animation: none; }
.critter.return { transition-timing-function: cubic-bezier(.2, .7, .3, 1); pointer-events: none; }
.bang { position: absolute; left: 50%; top: -28px; translate: -50% 0; color: var(--sun); font: 800 1.6rem/1 var(--display); animation: pop .25s ease-out; }
.player.shake { animation: shake .7s linear; }
@keyframes pop { from { opacity: 0; scale: .2; } }
@keyframes shake {
  0%, 100% { translate: 0 0; }
  15% { translate: -5px 2px; }
  30% { translate: 5px -2px; }
  45% { translate: -5px -1px; }
  60% { translate: 5px 2px; }
  75% { translate: -3px 0; }
  90% { translate: 3px 0; }
}
.ship { position: absolute; top: 0; left: 0; width: 26px; height: 10px; color: var(--mute); pointer-events: none; }
.ship::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: .35; clip-path: polygon(0 0, 100% 50%, 0 100%, 22% 50%); }
.ship::after { content: ""; position: absolute; left: 30%; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: var(--chalk); translate: -50% -50%; box-shadow: 0 0 6px 2px rgba(242, 237, 228, .5); animation: shiplight 4.5s ease-in-out infinite; }
.ghost { position: absolute; top: 0; left: 0; pointer-events: none; animation: ghost .5s ease-out forwards; }
@keyframes shiplight { 0%, 100% { opacity: .05; } 50% { opacity: .9; } }
@keyframes ghost {
  from { opacity: var(--go, .3); transform: translate(var(--gx), var(--gy)) scale(.9); }
  to { opacity: 0; transform: translate(var(--gx), var(--gy)) scale(.3); }
}
.glint { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--chalk); translate: -50% -50%; opacity: 0; box-shadow: 0 0 10px 5px rgba(242, 237, 228, .25); pointer-events: none; animation: glint 4s ease-in-out forwards; }
@keyframes glint { 0%, 100% { opacity: 0; scale: .6; } 50% { opacity: .5; scale: 1.15; } }
.stick { position: fixed; left: 50%; translate: -50% 0; bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); z-index: 60; width: 112px; height: 112px; border-radius: 50%; background: rgba(42, 36, 64, .7); border: 1.5px solid var(--line); touch-action: none; user-select: none; -webkit-touch-callout: none; }
.knob { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--sky); opacity: .55; transition: translate .15s ease-out; }
.stick.on .knob { transition: none; opacity: .85; }
.fly { position: absolute; top: 0; left: 0; border-radius: 50%; pointer-events: none; }
@keyframes wink { 50% { transform: scaleY(.1); } }
@keyframes heart {
  0% { opacity: 0; transform: translate(calc(-50% + var(--dx)), 0) scale(.6); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), -64px) scale(1.2); }
}
@keyframes heartfade { 0%, 100% { opacity: 0; } 30%, 70% { opacity: 1; } }

/* Board */
.play { justify-self: center; width: min(100%, 440px); }
.board {
  position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 28px;
  background: var(--den) radial-gradient(circle, rgba(242, 237, 228, .16) 2px, transparent 2.5px) 0 0 / 20% 20%;
}
.critter {
  position: absolute; width: 20%; height: 20%; padding: 1.6%;
  left: calc(var(--c) * 20%); top: calc(var(--r) * 20%);
  background: none; border: 0; cursor: pointer;
  transition: transform .5s cubic-bezier(.5, 0, .9, .4);
}
.critter:hover .bod { filter: brightness(1.08); }
.critter.nope .bod { animation: nope .3s ease-out; }
@keyframes nope { 35% { transform: translate(var(--bx), var(--by)); } }
.win { position: absolute; inset: 0; display: none; place-content: center; justify-items: center; gap: 1rem; padding: 2rem; text-align: center; }
.board.cleared .win { display: grid; }
.win p { font: 700 1.6rem/1.15 var(--display); }
.board-foot { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; color: var(--mute); font-size: .95rem; }
.link-btn { background: none; border: 0; padding: 0; color: var(--chalk); font: inherit; text-decoration: underline; cursor: pointer; }

/* Sections */
.section { padding-block: 5rem; border-top: 1px solid var(--line); }
h2 { font: 800 clamp(2rem, 4vw, 3rem)/1.05 var(--display); letter-spacing: -.03em; }
.game { display: grid; gap: 2rem; align-items: center; margin-top: 2.5rem; padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: 28px; background: var(--den); }
.game h3 { font: 700 1.75rem/1.1 var(--display); }
.game p { margin-top: .75rem; max-width: 32rem; color: var(--mute); }
.tag { display: inline-block; margin-top: 1.25rem; padding: .35rem .8rem; border-radius: 999px; background: rgba(143, 211, 126, .15); color: var(--leaf); font-size: .9rem; font-weight: 500; }
.lineup { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; --size: 64px; }
.lineup .mini:nth-child(2) { --c: 2; --r: 1; }
.lineup .mini:nth-child(3) { --c: 4; --r: 3; }
.lineup .mini:nth-child(4) { --c: 1; --r: 5; }
.mail { display: inline-block; margin-top: 1.5rem; font: 700 clamp(1.5rem, 4vw, 2.5rem)/1.1 var(--display); letter-spacing: -.02em; text-underline-offset: .2em; text-decoration-thickness: 2px; }
.mail:hover { color: var(--fox); }
.section > .wrap > p { margin-top: 1rem; max-width: 36rem; color: var(--mute); }

/* Footer */
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-block: 2rem 3rem; border-top: 1px solid var(--line); color: var(--mute); font-size: .95rem; }

/* Document pages (privacy etc.) */
.doc { max-width: 42rem; padding-block: 3rem 6rem; }
.doc h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); max-width: none; }
.doc h2 { margin-top: 2.5rem; font-size: 1.4rem; letter-spacing: -.01em; }
.doc p, .doc li { margin-top: 1rem; color: var(--mute); }
.doc ul { padding-left: 1.25rem; }
.doc .updated { margin-top: .75rem; }

@media (min-width: 900px) {
  .hero { grid-template-columns: 1.1fr 1fr; }
  .game { grid-template-columns: 1.3fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .critter { transition: none; }
  .critter.nope .bod { animation: none; }
  .heart { animation-name: heartfade; }
  .player.love .eye { animation: none; }
  .player.shake, .bang { animation: none; }
  .bod, .shoved .bod { transition: none; }
  .knob { transition: none; }
}