/* Layout: a game table. The page is a blue tabletop; each round of the day's run is played on a
   white board with chunky pieces that press down like real buttons. One display family (Bricolage
   Grotesque), solid offset shadows instead of soft ones, and colour reserved for the pieces.
   Round types have their own colour: One Hundred is sun yellow, The Liar is tomato. */
:root {
  --table: #3047de;
  --table-2: #2236bd;
  --table-text: #ffffff;
  --table-muted: rgba(255, 255, 255, 0.74);
  --board: #ffffff;
  --board-2: #eef0fb;
  --ink: #1c1d4f;
  --ink-2: #5b5e8a;
  --rule: #dadcf0;
  --crowd: #c5c9e2;
  --edge: #1c1d4f;
  --on-color: #ffffff;

  --sun: #ffc83d;
  --tomato: #ff5d3b;

  --blue: #3c6dff;
  --red: #ff5d3b;
  --ochre: #ffad1f;
  --green: #17b27a;
  --brown: #a5663b;
  --slate: #8e95b5;
  --c-ink: #1c1d4f;

  --font: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.3125rem;
  --step-2: 1.75rem;
  --step-3: clamp(2.1rem, 5vw, 3rem);
  --step-4: clamp(3.6rem, 11vw, 6rem);

  --r-lg: 28px;
  --r-md: 18px;
  --r-sm: 12px;
  --fig-w: 17px;
  --spring: cubic-bezier(0.25, 1.35, 0.45, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --table: #151a4d;
    --table-2: #0e1238;
    --board: #212763;
    --board-2: #2b3274;
    --ink: #f2f3ff;
    --ink-2: #b4b8e2;
    --rule: #3b427f;
    --crowd: #4d5494;
    --edge: #060821;
    --blue: #6b8fff;
    --red: #ff6f50;
    --ochre: #ffbb3d;
    --green: #2fc98f;
    --brown: #c27f52;
    --slate: #9aa1c4;
    --c-ink: #e6e8ff;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --table: #151a4d;
  --table-2: #0e1238;
  --board: #212763;
  --board-2: #2b3274;
  --ink: #f2f3ff;
  --ink-2: #b4b8e2;
  --rule: #3b427f;
  --crowd: #4d5494;
  --edge: #060821;
  --blue: #6b8fff;
  --red: #ff6f50;
  --ochre: #ffbb3d;
  --green: #2fc98f;
  --brown: #c27f52;
  --slate: #9aa1c4;
  --c-ink: #e6e8ff;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--table);
  background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1.5px, transparent 1.6px);
  background-size: 22px 22px;
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.5;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--table); }
[hidden] { display: none !important; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
button, select, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
#app:focus, #app:focus-visible { outline: none; }
h1, h2 { font-family: var(--font); line-height: 1.05; margin: 0; text-wrap: balance; }
p { margin: 0; }
.num { font-variant-numeric: tabular-nums; }

/* Ambient table life: a few clouds drift past very slowly, and now and then a chimp crosses far away. */
.ambient { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.cloud { position: absolute; left: 0; width: 180px; height: 56px; border-radius: 999px; background: #ffffff; opacity: 0.06; animation: drift linear infinite; }
.cloud::before, .cloud::after { content: ""; position: absolute; border-radius: 50%; background: inherit; }
.cloud::before { width: 80px; height: 80px; left: 30px; top: -36px; }
.cloud::after { width: 60px; height: 60px; left: 92px; top: -24px; }
.c1 { top: 14%; animation-duration: 140s; animation-delay: -30s; }
.c2 { top: 46%; animation-duration: 190s; animation-delay: -120s; transform: scale(0.7); }
.c3 { top: 72%; animation-duration: 160s; animation-delay: -75s; transform: scale(1.2); }
.c4 { top: 30%; animation-duration: 220s; animation-delay: -170s; transform: scale(0.55); }
@keyframes drift { from { translate: -260px 0; } to { translate: calc(100vw + 260px) 0; } }
.far-chimp { position: absolute; left: 0; top: 22%; width: 34px; height: 28px; opacity: 0.4; animation: far-fly 48s linear infinite; animation-delay: 6s; translate: -60px 0; }
@keyframes far-fly {
  0% { translate: -60px 0; rotate: 0deg; }
  14% { translate: calc(100vw + 60px) -30px; rotate: 360deg; }
  14.01%, 100% { translate: calc(100vw + 60px) -30px; opacity: 0; }
}
.page { position: relative; z-index: 1; }

.page {
  max-width: 920px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 0 40px;
}

/* ---------- Top bar ---------- */
.bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding-block: 20px 22px;
  color: var(--table-text);
}
.brand { justify-self: start; display: inline-flex; align-items: center; gap: 10px; border: 0; background: none; padding: 4px 6px 4px 0; cursor: pointer; color: var(--table-text); }
.brand-mark { width: 46px; height: 36px; }
.brand-name { font-weight: 800; font-size: 1.85rem; letter-spacing: -0.02em; line-height: 1; font-stretch: 85%; }
.brand:hover .brand-mark { transform: rotate(-8deg); }
.brand-mark { transition: transform 200ms var(--spring); }

/* The day picker: a dark pill at the top centre, like a phone's island. It squishes a little when the day changes. */
.island {
  justify-self: center; display: flex; align-items: center; gap: 2px; height: 50px; padding: 4px;
  background: #0b0d26; color: #ffffff; border-radius: 999px; box-shadow: 0 5px 0 rgba(6, 8, 33, 0.35);
}
.island.morph { animation: morph 420ms var(--spring); }
@keyframes morph { 0% { transform: scale(0.9, 1.08); } 60% { transform: scale(1.05, 0.96); } 100% { transform: none; } }
.island-step {
  width: 42px; height: 42px; border: 0; border-radius: 999px; background: transparent; color: #ffffff; cursor: pointer;
  font-family: system-ui, sans-serif; font-size: 1.6rem; font-weight: 700; line-height: 1;
}
.island-step:hover:not([disabled]) { background: rgba(255, 255, 255, 0.14); }
.island-step[disabled] { color: rgba(255, 255, 255, 0.25); cursor: not-allowed; }
.island-label { min-width: 132px; display: grid; justify-items: center; grid-auto-flow: row; line-height: 1.1; padding-inline: 6px; text-align: center; position: relative; }
.island-label svg { position: absolute; left: 2px; top: 50%; width: 13px; height: 13px; margin-top: -7px; fill: rgba(255, 255, 255, 0.7); }
.il-main { font-weight: 800; font-size: 1.05rem; white-space: nowrap; }
.il-sub { font-weight: 600; font-size: 0.75rem; color: rgba(255, 255, 255, 0.65); white-space: nowrap; }
.cal-btn {
  justify-self: end; display: grid; place-items: center; width: 50px; height: 50px; border: 3px solid var(--edge); border-radius: 16px;
  background: var(--board); color: #1c1d4f; box-shadow: 0 5px 0 var(--edge); cursor: pointer; transition: transform 90ms ease-out, box-shadow 90ms ease-out;
}
.cal-btn svg { width: 24px; height: 24px; fill: currentColor; }
.cal-btn:hover { transform: translateY(-2px) rotate(-4deg); box-shadow: 0 7px 0 var(--edge); }
.cal-btn:active { transform: translateY(5px); box-shadow: 0 0 0 var(--edge); }

/* ---------- The board ---------- */
main { display: block; }
.t-hundred { --type: var(--sun); }
.t-liar { --type: #ff7b5c; }
.round-card {
  background: var(--board);
  border: 3px solid var(--edge);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 0 var(--edge);
  padding: 28px clamp(16px, 4vw, 40px) 36px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 10px 24px;
  border: 3px solid var(--edge); border-radius: var(--r-sm);
  background: var(--sun); color: #1c1d4f;
  font-weight: 800; font-size: var(--step-0);
  box-shadow: 0 5px 0 var(--edge);
  cursor: pointer;
  transition: transform 90ms ease-out, box-shadow 90ms ease-out;
}
.btn:hover:not([disabled]) { transform: translateY(-2px); box-shadow: 0 7px 0 var(--edge); }
.btn:active:not([disabled]) { transform: translateY(5px); box-shadow: 0 0 0 var(--edge); }
.btn[disabled] { cursor: not-allowed; background: var(--board-2); color: var(--ink-2); border-color: var(--rule); box-shadow: 0 5px 0 var(--rule); }
.btn-quiet { background: var(--board); color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: 14px 12px; align-items: center; }

/* ---------- Puzzle heading ---------- */
.puzzle-head { display: grid; gap: 12px; }
.label { font-weight: 700; font-size: var(--step--1); color: var(--ink-2); }
.puzzle-head .label { justify-self: start; background: var(--board-2); border-radius: 999px; padding: 4px 14px; }
.puzzle-head h1 { font-size: var(--step-3); font-weight: 800; letter-spacing: -0.02em; font-stretch: 90%; }
.question { font-size: var(--step-1); max-width: 36rem; color: var(--ink-2); }
/* What a round counts and in what unit: a ruler-tagged chip under the question. */
.measure {
  justify-self: start; display: inline-flex; align-items: flex-start; gap: 8px; max-width: 40rem;
  padding: 6px 14px 6px 10px; border-radius: var(--r-sm); background: var(--board-2); border: 2px solid var(--rule);
  font-weight: 700; font-size: var(--step--1); line-height: 1.35; color: var(--ink);
}
.measure svg { flex: none; width: 18px; height: 18px; margin-top: 1px; fill: var(--ink-2); }

/* ---------- Figures ---------- */
.fig { display: block; width: var(--fig-w); flex: none; color: var(--crowd); }
.fig svg { display: block; width: 100%; aspect-ratio: 20 / 32; fill: currentColor; }
.lane .fig { color: var(--c); }

.c-blue { --c: var(--blue); }
.c-red { --c: var(--red); }
.c-ochre { --c: var(--ochre); }
.c-green { --c: var(--green); }
.c-brown { --c: var(--brown); }
.c-slate { --c: var(--slate); }
.c-ink { --c: var(--c-ink); }

/* ---------- Crowd ---------- */
.crowd-wrap {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 5;
  background: var(--board);
  padding-block: 16px 14px;
  margin-top: 20px;
  border-bottom: 3px solid var(--rule);
}
.crowd-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.crowd-title { font-weight: 700; color: var(--ink-2); }
.crowd-count {
  min-width: 3ch; text-align: center; padding: 2px 12px; border-radius: 999px;
  background: var(--ink); color: var(--board); font-size: var(--step-1); font-weight: 800;
}
.crowd { display: flex; flex-wrap: wrap; gap: 4px 3px; min-height: calc(var(--fig-w) * 1.6); }
.crowd-empty { font-weight: 600; color: var(--green); align-self: center; }

/* ---------- Lanes ---------- */
.lanes { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.lane { padding: 14px 16px; background: var(--board-2); border-radius: var(--r-md); display: grid; gap: 10px; }
.lane-head { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.swatch { width: 24px; height: 24px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.12); }
.lane-name { display: grid; min-width: 0; font-weight: 700; font-size: var(--step-1); line-height: 1.2; overflow-wrap: anywhere; hyphens: auto; }
.lane-name small { font-weight: 500; font-size: var(--step--1); color: var(--ink-2); }
.lane-figs { display: flex; flex-wrap: wrap; gap: 4px 3px; min-height: calc(var(--fig-w) * 1.6); padding-left: 36px; align-items: flex-end; }

.stepper { display: inline-flex; align-items: center; gap: 6px; }
.stepper button {
  width: 44px; height: 44px; border: 3px solid var(--edge); border-radius: var(--r-sm);
  background: var(--board); cursor: pointer; box-shadow: 0 4px 0 var(--edge);
  font-size: 1.45rem; font-weight: 800; line-height: 1;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: transform 70ms ease-out, box-shadow 70ms ease-out;
}
.stepper button[data-act="inc"] { background: var(--c); color: var(--on-color); }
.stepper button:active:not([disabled]) { transform: translateY(4px); box-shadow: 0 0 0 var(--edge); }
.stepper button[disabled] { cursor: not-allowed; background: var(--board-2); color: var(--rule); border-color: var(--rule); box-shadow: 0 4px 0 var(--rule); }
.stepper input {
  width: 3.2ch; min-width: 48px; border: 0; background: transparent;
  text-align: center; font-size: var(--step-2); font-weight: 800; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield;
}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.lock-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding-block: 22px 0; }
.how { color: var(--ink-2); max-width: 34rem; margin-top: 14px; }

/* ---------- Result ---------- */
.score-panel { display: grid; gap: 14px; margin-top: 24px; padding-bottom: 18px; border-bottom: 3px solid var(--rule); }
.score-row { display: flex; align-items: flex-end; gap: 10px 18px; flex-wrap: wrap; }
.score-big { font-weight: 800; font-size: var(--step-4); line-height: 0.82; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; min-width: 2.1ch; font-stretch: 85%; }
.score-of { font-size: var(--step-1); font-weight: 600; color: var(--ink-2); padding-bottom: 4px; }
.stamp {
  margin-left: auto;
  align-self: center;
  background: var(--sun);
  color: #1c1d4f;
  border: 3px solid var(--edge);
  border-radius: 999px;
  box-shadow: 0 5px 0 var(--edge);
  padding: 8px 22px;
  font-weight: 800; font-size: var(--step-1);
  transform: rotate(-6deg);
}
.legend { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: var(--step--1); color: var(--ink-2); align-items: center; }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend .fig { --fig-w: 11px; color: var(--ink-2); }

.fig.miss svg { fill: transparent; stroke: currentColor; stroke-width: 1.6; stroke-dasharray: 2.4 1.8; }
.fig.over { color: var(--crowd); opacity: 0.75; }
.lane-result { font-size: var(--step--1); font-weight: 600; text-align: right; white-space: nowrap; color: var(--ink-2); }
.lane-result strong { font-size: var(--step-1); color: var(--ink); font-weight: 800; }

.after { display: grid; gap: 22px; padding-top: 26px; }
.reveal-note { font-size: var(--step-1); line-height: 1.45; max-width: 38rem; font-weight: 500; }
.source { font-size: var(--step--1); color: var(--ink-2); line-height: 1.5; max-width: 40rem; }
.compare-block { display: grid; gap: 8px; }
.mini-bar { display: flex; height: 20px; max-width: 360px; border-radius: 999px; overflow: hidden; }
.mini-bar span { background: var(--c); }

@keyframes hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-9px); } }
@keyframes pop { 0% { transform: scale(0); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px) rotate(-6deg); } 75% { transform: translateX(3px) rotate(6deg); } }
@keyframes thump { 0% { transform: rotate(-6deg) scale(2.2); opacity: 0; } 60% { transform: rotate(-6deg) scale(0.92); opacity: 1; } 100% { transform: rotate(-6deg) scale(1); } }
.fig.hop { animation: hop 420ms ease-out both; }
.fig.pop { animation: pop 380ms var(--spring) both; }
.fig.shake { animation: shake 360ms ease-in-out 2 both; }
.stamp.thump { animation: thump 420ms var(--spring) both; }

/* ---------- The Liar ---------- */
.claims { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.claim {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: start;
  width: 100%; text-align: left; padding: 14px 18px 14px 14px;
  border: 3px solid var(--rule); border-radius: var(--r-md); background: var(--board); cursor: pointer;
  font-size: var(--step-1); line-height: 1.4;
  transition: transform 90ms ease-out, border-color 90ms;
}
.claim:hover:not([disabled]) { border-color: var(--ink); transform: translateY(-2px); }
.claim[aria-pressed="true"] { border-color: var(--tomato); background: color-mix(in srgb, var(--tomato) 9%, var(--board)); }
.claim[disabled] { cursor: default; }
.claim-letter {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  border: 3px solid var(--edge); box-shadow: 0 3px 0 var(--edge); background: var(--board);
  font-weight: 800; font-size: 1.45rem;
}
.claim[aria-pressed="true"] .claim-letter { background: var(--tomato); color: var(--on-color); }
.claim-body { display: grid; gap: 8px; align-content: center; min-width: 0; padding-top: 8px; }
.claim-note { font-size: var(--step-0); color: var(--ink-2); }
.verdict { justify-self: start; font-size: 0.8rem; font-weight: 800; padding: 2px 12px; border-radius: 999px; background: var(--green); color: var(--on-color); }
.claim[data-truth="lie"] { border-color: var(--tomato); background: color-mix(in srgb, var(--tomato) 12%, var(--board)); }
.claim[data-truth="lie"] .claim-letter { background: var(--tomato); color: var(--on-color); }
.claim[data-truth="lie"] .verdict { background: var(--tomato); }
.claim[data-truth="lie"] .claim-text { text-decoration: line-through; text-decoration-color: var(--tomato); text-decoration-thickness: 3px; }
.claim[data-truth="true"] .claim-letter { border-color: var(--rule); box-shadow: none; color: var(--ink-2); }
.claim[data-truth="true"][aria-pressed="true"] { border-color: var(--ink); border-style: dashed; background: var(--board); }
.claim[data-truth="true"][aria-pressed="true"] .claim-letter { background: var(--ink); border-color: var(--ink); color: var(--board); }
.your-pick { font-size: 0.8rem; font-weight: 700; color: var(--ink-2); }
.outcome { font-size: var(--step-2); font-weight: 800; }

/* ---------- Home ---------- */
.home { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; color: var(--table-text); width: 100%; max-width: 760px; margin-inline: auto; padding-top: 4px; }
/* The home screen fits the window and never scrolls. */
body[data-view="home"] { height: 100vh; height: 100dvh; overflow: hidden; }
body[data-view="home"] .page { height: 100%; display: flex; flex-direction: column; padding-bottom: 12px; }
body[data-view="home"] main { flex: 1; min-height: 0; display: grid; align-content: center; overflow-y: auto; }
body[data-view="home"] .tokens { flex-wrap: nowrap; gap: 10px; }
body[data-view="home"] .token { width: 70px; height: 82px; }
@media (max-width: 640px) {
  body[data-view="home"] .tokens { flex-wrap: wrap; }
  body[data-view="home"] .token { width: 60px; height: 70px; }
}
/* Short screens: drop the extras so the card still fits without scrolling. */
@media (max-height: 640px) {
  body[data-view="home"] .home-sub, body[data-view="home"] .colophon { display: none; }
  body[data-view="home"] .token { width: 50px; height: 58px; }
  body[data-view="home"] .token svg { width: 24px; height: 24px; }
  body[data-view="home"] .tc-art { padding: 12px; }
}
body[data-view="home"] .colophon { margin-top: 12px; font-size: 0.75rem; text-align: center; max-width: none; }
.home > * { min-width: 0; }
.home-head { display: grid; gap: 6px; padding-top: 8px; }
.home-day { font-size: clamp(4rem, 15vw, 8.5rem); font-weight: 800; letter-spacing: -0.045em; line-height: 0.85; font-stretch: 78%; }
.home-date { font-size: var(--step-3); font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-stretch: 85%; }
.home-sub { color: var(--table-muted); max-width: 32rem; }

.game-card {
  display: grid; grid-template-rows: auto 1fr;
  padding: 0; text-align: left; cursor: pointer; overflow: hidden;
  border: 3px solid var(--edge); border-radius: var(--r-lg);
  box-shadow: 0 9px 0 var(--edge);
  color: #1c1d4f;
  transition: transform 110ms ease-out, box-shadow 110ms ease-out;
}
.game-card:hover { transform: translateY(-4px) rotate(-0.4deg); box-shadow: 0 13px 0 var(--edge); }
.game-card:active { transform: translateY(7px); box-shadow: 0 2px 0 var(--edge); }
.gc-body { display: grid; gap: 10px; align-content: start; padding: 20px 22px 22px; }
.gc-title { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1; font-stretch: 88%; }
.gc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.gc-state { font-size: var(--step--1); font-weight: 700; }
.gc-cta { background: #1c1d4f; color: #ffffff; border-radius: 999px; padding: 9px 20px; font-weight: 800; }

/* Day strip: one tile per day, like a level select. */
.levels { list-style: none; margin: 0; padding: 8px 4px 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 22px 12px; justify-items: center; overflow-y: auto; }

/* Every day, as a sheet of calendar pages. */
.calendar {
  width: min(560px, calc(100vw - 32px)); max-height: min(78vh, 640px); padding: 20px 20px 8px; display: none;
  border: 3px solid var(--edge); border-radius: var(--r-lg); background: var(--table); color: var(--table-text); box-shadow: 0 9px 0 var(--edge);
}
.calendar[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; animation: rise 320ms var(--spring) both; }
.calendar::backdrop { background: rgba(6, 8, 33, 0.55); }
.cal-head { display: flex; align-items: center; justify-content: space-between; }
.cal-head h2 { font-size: var(--step-2); font-weight: 800; }
.cal-close { width: 42px; height: 42px; border: 3px solid var(--edge); border-radius: 999px; background: var(--board); color: #1c1d4f; font-size: 1.5rem; font-weight: 800; line-height: 1; cursor: pointer; box-shadow: 0 4px 0 var(--edge); }
.level {
  position: relative; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; align-items: center;
  width: 70px; height: 92px; padding: 0 0 8px; overflow: visible;
  border: 3px solid var(--edge); border-radius: var(--r-sm); background: var(--board); color: var(--ink);
  box-shadow: 0 5px 0 var(--edge); cursor: pointer;
  transition: transform 90ms ease-out, box-shadow 90ms ease-out;
}
.level:hover:not([disabled]) { transform: translateY(-2px) rotate(-1.5deg); box-shadow: 0 7px 0 var(--edge); }
.level:active:not([disabled]) { transform: translateY(5px); box-shadow: 0 0 0 var(--edge); }
/* The weekday band at the top of the calendar page. */
.level-wd {
  align-self: stretch; justify-self: stretch; display: grid; place-items: center; height: 22px;
  border-radius: 7px 7px 0 0; background: var(--edge); color: #ffffff;
  font-weight: 800; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.level-num { font-weight: 800; font-size: 1.85rem; line-height: 1; letter-spacing: -0.03em; font-stretch: 85%; }
.level-mo { font-weight: 700; font-size: 0.72rem; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.level-score {
  position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%) rotate(-4deg); min-width: 2.6em; text-align: center;
  padding: 1px 7px; border: 2px solid var(--edge); border-radius: 999px; background: var(--board); color: var(--ink);
  font-weight: 800; font-size: 0.8rem; line-height: 1.3; box-shadow: 0 2px 0 var(--edge);
}
.level[data-state="today"] { background: var(--sun); color: #1c1d4f; }
.level[data-state="today"] .level-mo { color: #1c1d4f; }
.level[data-state="today"] .level-wd { background: var(--tomato); }
.level[data-state="done"] { background: color-mix(in srgb, var(--green) 22%, var(--board)); }
.level[data-state="done"] .level-score { background: var(--green); color: #ffffff; }
.level[aria-current="true"] { outline: 3px solid var(--table-text); outline-offset: 4px; }
.level[data-state="locked"] {
  background: transparent; color: var(--table-muted);
  border: 3px dashed rgba(255, 255, 255, 0.35); box-shadow: none;
}
.level[data-state="locked"] .level-wd { background: transparent; color: var(--table-muted); }
.level[data-state="locked"] .level-mo { color: var(--table-muted); }
.level[data-state="locked"] .level-num { font-size: 1.45rem; }
.level-lock { width: 14px; height: 14px; fill: currentColor; }

.loading { color: var(--ink-2); font-weight: 600; }

/* First open: the chimp sits on a catapult that winds back and forth, then gets flung off the screen. */
.launchpad { display: grid; justify-items: center; gap: 18px; padding: clamp(48px, 14vh, 140px) 16px; color: var(--table-text); }
.lp-stage { position: relative; width: 220px; height: 150px; }
.lp-catapult { position: absolute; left: 10px; bottom: 0; width: 120px; height: 80px; }
.lp-arm { position: absolute; left: 86px; bottom: 58px; width: 64px; height: 52px; transform-origin: -30px 40px; animation: windup 900ms ease-in-out infinite alternate; }
.lp-chimp { width: 64px; height: 52px; filter: drop-shadow(0 4px 0 rgba(6, 8, 33, 0.35)); }
.lp-arc { position: absolute; inset: -10px -30px auto auto; width: 200px; height: 80px; overflow: visible; }
.lp-arc path { fill: none; stroke: var(--table-muted); stroke-width: 3; stroke-dasharray: 6 9; stroke-linecap: round; animation: march 900ms linear infinite; opacity: 0.6; }
.lp-text { font-weight: 800; font-size: var(--step-1); letter-spacing: -0.01em; }
.launchpad.is-launching .lp-arm { animation: fling 520ms cubic-bezier(.4,0,.8,.4) forwards; }
.launchpad.is-launching .lp-text { opacity: 0; transition: opacity 300ms; }
@keyframes windup { 0% { transform: rotate(4deg) translateY(0); } 100% { transform: rotate(-16deg) translateY(4px); } }
@keyframes march { to { stroke-dashoffset: -30; } }
@keyframes fling { 0% { transform: rotate(-16deg); } 100% { transform: translate(380px, -260px) rotate(560deg) scale(0.6); opacity: 0; } }
body:not([data-view="game"]) .loading { color: var(--table-muted); }
.colophon { margin-top: 48px; font-size: var(--step--1); color: var(--table-muted); max-width: 44rem; }

.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  background: #1c1d4f; color: #ffffff; padding: 12px 22px; border-radius: 999px; font-weight: 700; font-size: var(--step--1); z-index: 20;
}
.share-fallback { width: 100%; max-width: 30rem; min-height: 6.5em; font-size: var(--step--1); padding: 12px; border: 3px solid var(--edge); border-radius: var(--r-sm); background: var(--board-2); color: var(--ink); }

/* ---------- The run ---------- */
.run-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 18px; }
.run-track { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.seg {
  display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px 0 10px;
  border: 3px solid var(--edge); border-radius: 999px; background: var(--type); color: #1c1d4f;
  font-weight: 800; box-shadow: 0 4px 0 var(--edge); cursor: pointer;
  transition: transform 90ms ease-out, box-shadow 90ms ease-out;
}
.seg-icon { width: 20px; height: 20px; fill: currentColor; }
.seg-pts { min-width: 2.2ch; text-align: center; }
.seg[data-state="done"]:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--edge); }
.seg[data-state="current"] { outline: 3px solid var(--table-text); outline-offset: 3px; cursor: default; }
.seg[data-state="next"] { background: transparent; color: var(--table-muted); border: 3px dashed rgba(255, 255, 255, 0.4); box-shadow: none; cursor: default; }
.seg[disabled] { cursor: default; }
.run-total { display: inline-flex; align-items: baseline; gap: 10px; color: var(--table-text); }
.run-total-label { font-weight: 700; color: var(--table-muted); }
.run-total-num { font-size: 2.2rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; min-width: 3ch; text-align: right; }
.run-total-num .unit { font-size: 1.1rem; font-weight: 700; color: var(--table-muted); }
.score-unit { font-size: 0.42em; margin-left: 0.12em; letter-spacing: 0; }
.stat-num small { font-size: 0.55em; font-weight: 700; color: var(--ink-2); }

.round-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.round-num { font-weight: 700; font-size: var(--step--1); color: var(--ink-2); background: var(--board-2); border-radius: 999px; padding: 4px 14px; }
.type-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 14px 3px 8px; border-radius: 999px;
  background: var(--type); color: #1c1d4f; border: 2px solid var(--edge); font-weight: 800; font-size: var(--step--1);
}
.type-badge svg { width: 16px; height: 16px; fill: currentColor; }

.round-card.is-intro { padding-block: clamp(36px, 8vw, 72px); }
.round-intro { display: grid; gap: 16px; justify-items: start; animation: rise 360ms var(--spring) both; }
.round-intro h1 { font-size: clamp(2.6rem, 8vw, 4.4rem); font-weight: 800; letter-spacing: -0.035em; line-height: 0.95; font-stretch: 82%; }
.intro-rule { font-size: var(--step-1); color: var(--ink-2); max-width: 34rem; }
.intro-worth { font-weight: 600; }
.intro-worth strong { font-weight: 800; }
@keyframes rise { 0% { transform: translateY(14px) scale(0.98); opacity: 0; } 100% { transform: none; opacity: 1; } }

.round-stage { margin-top: 20px; }
.round-foot { display: grid; gap: 12px; margin-top: 26px; padding-top: 22px; border-top: 3px solid var(--rule); }
.round-points { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pts-big { font-size: clamp(2.6rem, 8vw, 3.6rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--green); }
.pts-of { font-weight: 700; color: var(--ink-2); }
.round-bench { color: var(--ink-2); }

.liar-bar { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; justify-content: space-between; margin-top: 18px; }
.liar-worth { font-weight: 600; color: var(--ink-2); }
.liar-worth strong { color: var(--ink); font-weight: 800; }
.claim.flip-in { animation: flip-in 420ms var(--spring) both; }
@keyframes flip-in { 0% { transform: rotateX(80deg); } 100% { transform: none; } }
.claims .claim[data-truth="true"] .claim-text { color: var(--ink-2); }

/* ---------- Final screen ---------- */
.final { display: grid; gap: 22px; }
.final .puzzle-head { gap: 0; }
.final-score { align-items: center; }
.final-score .score-of { padding-bottom: 0; }
.final-line { font-size: var(--step-1); font-weight: 700; }

/* The flight, 0 to 1000 m. Zones are columns of sky that get wilder further out; the dashed arc is the
   chimp's path. "You" sits above the strip, the par flag and the lazy chimp are named below it. */
.flight { position: relative; margin: 34px 0 24px; container-type: inline-size; }
.fl-sky { position: relative; height: 170px; border: 3px solid var(--edge); border-radius: var(--r-md) var(--r-md) 0 0; overflow: hidden; background: #bfe6ff; }
.zone { position: absolute; top: 0; bottom: 0; border-left: 2px dashed rgba(28, 29, 79, 0.25); }
.zone:first-child { border-left: 0; }
.zone-name { position: absolute; top: 8px; left: 8px; font-size: 0.75rem; font-weight: 800; color: #1c1d4f; white-space: nowrap; }
.z-0 { background: radial-gradient(circle at 20% 108%, #17b27a 0 26px, transparent 27px), radial-gradient(circle at 55% 112%, #13995f 0 30px, transparent 31px), radial-gradient(circle at 88% 108%, #17b27a 0 22px, transparent 23px), #cdeeff; }
.z-1 { background: linear-gradient(to top, #0f7d4f 0 18%, transparent 18%), radial-gradient(ellipse 22px 44px at 30% 74%, #17b27a 98%, transparent), radial-gradient(ellipse 20px 52px at 72% 70%, #13995f 98%, transparent), #b5e2ff; }
.z-2 { background: radial-gradient(ellipse 34px 14px at 30% 40%, #ffffff 98%, transparent), radial-gradient(ellipse 26px 11px at 70% 64%, #ffffff 98%, transparent), #93cdfb; }
.z-3 { background: repeating-linear-gradient(-14deg, transparent 0 22px, rgba(255, 255, 255, 0.35) 22px 25px), #5e8dff; }
.z-4 { background: radial-gradient(circle at 25% 30%, #fff 0 1.5px, transparent 2px), radial-gradient(circle at 70% 18%, #fff 0 1.2px, transparent 2px), radial-gradient(circle at 55% 62%, #fff 0 1.5px, transparent 2px), radial-gradient(circle at 85% 48%, #ffc83d 0 2px, transparent 2.5px), #1c1d4f; }
.z-3 .zone-name, .z-4 .zone-name { color: #ffffff; }
.fl-arc { position: absolute; inset: 14px 0 22px; width: 100%; height: calc(100% - 36px); overflow: visible; }
.fl-arc path { fill: none; stroke: #1c1d4f; stroke-width: 3; stroke-dasharray: 5 7; stroke-linecap: round; }
.fl-catapult { position: absolute; left: 2px; bottom: 6px; width: 36px; height: 24px; }
.fl-lazy, .fl-flag, .fl-chimp { position: absolute; left: var(--at); transform: translateX(-50%); }
.fl-lazy { bottom: 6px; opacity: 0.7; }
.fl-lazy svg { width: 24px; height: 24px; transform: rotate(-80deg); }
.fl-lazy .zz { position: absolute; top: -12px; right: -6px; font-weight: 800; font-size: 0.75rem; color: #1c1d4f; }
.fl-flag { bottom: 6px; transform: translateX(-3px); }
.fl-flag svg { width: 22px; height: 46px; display: block; }
.fl-chimp { bottom: calc(4px + (100% - 36px) * var(--up) / 100); }
.fl-chimp svg { width: 44px; height: 36px; display: block; transform: rotate(var(--spin, 0deg)); filter: drop-shadow(0 3px 0 rgba(6, 8, 33, 0.3)); }
.fl-chimp.landed svg { animation: bump 360ms var(--spring); }
@keyframes bump { 0% { transform: scale(1.25, 0.75); } 100% { transform: none; } }
.fl-you { position: absolute; bottom: 100%; left: clamp(52px, var(--at), calc(100% - 52px)); transform: translateX(-50%); z-index: 2; white-space: nowrap; transition: opacity 200ms; }
.fl-you.is-waiting { opacity: 0; }
.fl-you .mark-label { display: block; background: #1c1d4f; color: #ffffff; border-radius: 999px; padding: 5px 12px; font-weight: 800; font-size: var(--step--1); margin-bottom: 8px; position: relative; }
.fl-you .mark-label::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: #1c1d4f; transform: translateX(-50%) rotate(45deg); }
.fl-ground { position: relative; height: 62px; border: 3px solid var(--edge); border-top: 0; border-radius: 0 0 var(--r-md) var(--r-md); background: var(--brown); }
.fl-tag { position: absolute; left: clamp(64px, var(--at), calc(100% - 64px)); transform: translateX(-50%); white-space: nowrap; font-weight: 800; font-size: 0.8rem; color: #ffffff; }
.t-par { top: 6px; }
.t-lazy { top: 32px; color: #ffe2c4; }
.fl-end { position: absolute; bottom: -24px; font-size: 0.75rem; font-weight: 700; color: var(--ink-2); }
.fl-end.e-0 { left: 0; }
.fl-end.e-1000 { right: 0; }
@container (max-width: 520px) {
  .zone-name { display: none; }
  .fl-sky { height: 140px; }
}

.breakdown { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bd-row {
  width: 100%; display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(60px, 140px) 3.2ch; gap: 14px; align-items: center;
  padding: 10px 14px; border: 0; border-radius: var(--r-sm); background: var(--board-2); text-align: left; cursor: pointer;
}
.bd-row:hover { background: color-mix(in srgb, var(--type) 26%, var(--board-2)); }
.bd-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--type); border: 2px solid var(--edge); }
.bd-icon svg { width: 20px; height: 20px; fill: #1c1d4f; }
.bd-name { display: grid; font-weight: 700; line-height: 1.25; min-width: 0; }
.bd-name small { font-weight: 600; color: var(--ink-2); font-size: 0.8rem; }
.bd-bar { height: 10px; border-radius: 999px; background: var(--rule); overflow: hidden; }
.bd-bar span { display: block; height: 100%; background: var(--green); border-radius: 999px; }
.bd-pts { font-weight: 800; font-size: var(--step-1); text-align: right; }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stat { display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--r-md); border: 3px solid var(--rule); }
.stat-num { font-size: 2rem; font-weight: 800; line-height: 1; }
.stat-label { font-size: var(--step--1); font-weight: 600; color: var(--ink-2); }

/* ---------- Home: the day's Tally ---------- */
.tally-card { background: var(--sun); }
.tc-art { display: grid; place-items: center; min-height: 170px; padding: 24px 16px; border-bottom: 3px solid var(--edge); background: rgba(255, 255, 255, 0.32); }
.tokens { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.token {
  display: grid; place-items: center; align-content: center; gap: 2px; width: 84px; height: 96px;
  border: 3px solid var(--edge); border-radius: 20px; background: var(--type); box-shadow: 0 5px 0 var(--edge); color: #1c1d4f;
  animation: deal 420ms var(--spring) both;
}
.token svg { width: 38px; height: 38px; fill: currentColor; }
.token-pts { font-weight: 800; font-size: 1rem; min-height: 1.2em; }
.token:nth-child(odd) { transform: rotate(-4deg); }
.token:nth-child(even) { transform: rotate(3deg) translateY(-6px); }
.token:nth-child(2) { animation-delay: 70ms; }
.token:nth-child(3) { animation-delay: 140ms; }
.token:nth-child(4) { animation-delay: 210ms; }
.token:nth-child(5) { animation-delay: 280ms; }
.token.is-done { background: var(--board); }
@keyframes deal { 0% { translate: 0 -24px; scale: 0.6; opacity: 0; } 100% { translate: 0 0; scale: 1; opacity: 1; } }
.gc-state-big { font-size: var(--step-1); font-weight: 700; }


@media (max-width: 640px) {
  :root { --fig-w: 12px; }
  .bar { padding-block: 14px 16px; }
  .brand-name { display: none; }
  .island-label { min-width: 112px; }
  .home { gap: 16px; }
  .tc-art { min-height: 0; padding: 16px 12px; }
  .gc-body { padding: 16px 18px 18px; gap: 8px; }
  .gc-title { font-size: 1.6rem; }
  .round-card { padding: 20px 14px 26px; border-radius: 22px; }
  .run-head { margin-bottom: 14px; }
  .seg { height: 40px; padding: 0 10px 0 8px; gap: 4px; }
  .seg-icon { width: 16px; height: 16px; }
  .run-total-num { font-size: 1.8rem; }
  .bd-row { grid-template-columns: 36px minmax(0, 1fr) 3.2ch; }
  .bd-bar { display: none; }
  .bd-icon { width: 36px; height: 36px; }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stat { display: flex; align-items: baseline; gap: 12px; }
  .token { width: 64px; height: 76px; border-radius: 16px; }
  .token svg { width: 28px; height: 28px; }
  .lane { padding: 12px; }
  .lane-name { font-size: var(--step-0); }
  .lane-figs { padding-left: 0; gap: 3px 2px; }
  .crowd { gap: 3px 2px; }
  .stepper button { width: 40px; height: 40px; }
  .stamp { margin-left: 0; }
  .claim { grid-template-columns: 42px minmax(0, 1fr); gap: 12px; font-size: var(--step-0); }
  .claim-letter { width: 42px; height: 42px; font-size: 1.2rem; }
  .claim-body { padding-top: 6px; }
  .t-hundred .lock-row {
    position: sticky; bottom: 0; z-index: 5; background: var(--board);
    padding-block: 12px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 3px solid var(--rule); margin-top: 12px;
  }
}
/* Between rounds: the finished card is swept off, the next is dealt in. */
.round-card.leaving { animation: sweep 240ms ease-in both; }
.round-card.dealt { animation: deal-card 420ms var(--spring) both; }
@keyframes sweep { to { transform: translateX(-60px) rotate(-3deg); opacity: 0; } }
@keyframes deal-card { from { transform: translateX(70px) rotate(4deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* After a round: sparks from the points, a little pop on the track, a bump on the running distance. */
.pts-big { position: relative; display: inline-block; }
.pts-big.pop-in { animation: pop 420ms var(--spring) both; }
.pts-big.wobble { animation: shake 360ms ease-in-out 1 both; }
.burst { position: absolute; left: 50%; top: 50%; pointer-events: none; }
.burst i { position: absolute; width: 9px; height: 9px; border-radius: 3px; background: var(--c); border: 2px solid var(--edge); animation: spark 720ms cubic-bezier(.2,.8,.3,1) var(--d) both; }
@keyframes spark { 0% { transform: translate(-50%, -50%) scale(0.3); opacity: 1; } 100% { transform: translate(calc(var(--x) - 50%), calc(var(--y) - 50%)) rotate(200deg) scale(1); opacity: 0; } }
.seg.just-done { animation: pop 380ms var(--spring) both; }
.run-total-num.bump { animation: bump-num 420ms var(--spring); }
@keyframes bump-num { 40% { transform: translateY(-5px) scale(1.12); } }

/* The heckling chimp: pops up from the bottom corner with a speech bubble, then ducks away. */
.heckle { position: fixed; z-index: 30; left: max(16px, env(safe-area-inset-left, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); display: flex; align-items: flex-end; gap: 10px; max-width: min(380px, calc(100vw - 32px)); pointer-events: none; animation: heckle-in 420ms var(--spring) both; }
.heckle.is-leaving { animation: heckle-out 360ms ease-in both; }
.heckle-chimp { flex: none; width: 72px; height: 72px; filter: drop-shadow(0 5px 0 rgba(6, 8, 33, 0.35)); animation: heckle-tilt 1.2s ease-in-out 420ms infinite alternate; }
.heckle-text { position: relative; margin-bottom: 34px; padding: 12px 16px; background: #ffffff; color: #1c1d4f; border: 3px solid var(--edge); border-radius: 18px 18px 18px 4px; box-shadow: 0 5px 0 var(--edge); font-weight: 800; line-height: 1.3; }
@keyframes heckle-in { from { transform: translateY(140%) rotate(-8deg); } to { transform: none; } }
@keyframes heckle-out { to { transform: translateY(140%) rotate(6deg); opacity: 0; } }
@keyframes heckle-tilt { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }

/* Day tints: past days shift the table colour; unopened days go grey and foggy. Today keeps the defaults. */
body { transition: background-color 400ms ease; }
:root[data-tint] { --table: hsl(var(--day-hue) 62% 45%); --table-2: hsl(var(--day-hue) 62% 37%); }
:root[data-fog] { --table: hsl(231 16% 42%); --table-2: hsl(231 16% 34%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-tint] { --table: hsl(var(--day-hue) 48% 19%); --table-2: hsl(var(--day-hue) 48% 14%); }
  :root:not([data-theme="light"])[data-fog] { --table: hsl(231 12% 18%); --table-2: hsl(231 12% 13%); }
}
:root[data-theme="dark"][data-tint] { --table: hsl(var(--day-hue) 48% 19%); --table-2: hsl(var(--day-hue) 48% 14%); }
:root[data-theme="dark"][data-fog] { --table: hsl(231 12% 18%); --table-2: hsl(231 12% 13%); }

.fog-card { position: relative; cursor: default; background: #cfd3e6; }
.fog-card:hover, .fog-card:active { transform: none; box-shadow: 0 9px 0 var(--edge); }
.fog-card .gc-title, .fog-card .gc-state-big { filter: blur(0.6px); }
.fog-card .gc-cta { display: inline-flex; align-items: center; gap: 6px; background: #5b5e8a; }
.fog-card .gc-cta svg { width: 14px; height: 14px; fill: currentColor; }
.token.is-fog { background: #e6e8f3; color: #8e95b5; font-weight: 800; font-size: 1.8rem; }
.fog { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.fog i { position: absolute; inset: -40% -60%; background: radial-gradient(ellipse 30% 22% at 30% 40%, rgba(255, 255, 255, 0.85), transparent 70%), radial-gradient(ellipse 26% 20% at 70% 60%, rgba(255, 255, 255, 0.75), transparent 70%), radial-gradient(ellipse 34% 18% at 50% 85%, rgba(255, 255, 255, 0.7), transparent 70%); filter: blur(6px); animation: fog-drift 18s ease-in-out infinite alternate; }
.fog i:nth-child(2) { animation-duration: 26s; animation-delay: -8s; opacity: 0.8; transform: scaleX(-1); }
.fog i:nth-child(3) { animation-duration: 34s; animation-delay: -15s; opacity: 0.6; top: -10%; }
@keyframes fog-drift { from { translate: -12% 0; } to { translate: 12% 4%; } }

/* Easter eggs. */
.brand-mark.loop { animation: loop 900ms cubic-bezier(.3,.7,.4,1); }
@keyframes loop { 0% { transform: none; } 50% { transform: translate(40px, -30px) rotate(200deg) scale(1.3); } 100% { transform: rotate(360deg); } }
.bananas { position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; }
.bananas i { position: absolute; top: -40px; font-style: normal; font-size: 28px; animation: banana var(--t) linear var(--d) both; }
@keyframes banana { to { transform: translateY(calc(100vh + 80px)) rotate(var(--r)); } }

/* ---------- Home: the launch site ---------- */
.home .home-head { text-align: center; }
.launch {
  position: relative; height: clamp(190px, 34vh, 300px); overflow: hidden;
  border: 3px solid var(--edge); border-radius: var(--r-lg); box-shadow: 0 9px 0 var(--edge);
  background: linear-gradient(#a9dcff, #e4f4ff 75%);
}
.ls-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: #17b27a; border-top: 3px solid var(--edge); }
.ls-ground::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 12px -4px, #13995f 0 9px, transparent 10px) 0 0 / 46px 100%; }
.ls-cloud { position: absolute; width: 90px; height: 28px; border-radius: 999px; background: #ffffff; opacity: 0.9; animation: ls-drift 40s linear infinite; }
.ls-cloud::before { content: ""; position: absolute; width: 40px; height: 40px; left: 18px; top: -20px; border-radius: 50%; background: inherit; }
.ls-cloud.k1 { top: 12%; animation-delay: -6s; }
.ls-cloud.k2 { top: 34%; animation-duration: 58s; animation-delay: -30s; transform: scale(0.7); }
.ls-cloud.k3 { top: 8%; animation-duration: 70s; animation-delay: -52s; transform: scale(0.5); }
@keyframes ls-drift { from { left: -120px; } to { left: 100%; } }
.ls-arc { position: absolute; left: 0; right: 0; top: 10%; height: 68%; width: 100%; overflow: visible; }
.ls-arc path { fill: none; stroke: #1c1d4f; stroke-opacity: 0.45; stroke-width: 3; stroke-dasharray: 6 9; stroke-linecap: round; animation: march 1.2s linear infinite; }
.ls-catapult { position: absolute; left: 2%; bottom: calc(22% - 6px); width: 120px; height: 80px; }
.ls-arm { position: absolute; left: calc(2% + 82px); bottom: calc(22% + 48px); width: 64px; height: 52px; transform-origin: -34px 42px; animation: windup 1.1s ease-in-out infinite alternate; }
.ls-arm svg, .ls-landed svg { width: 100%; height: 100%; filter: drop-shadow(0 4px 0 rgba(6, 8, 33, 0.3)); }
.ls-landed { position: absolute; bottom: calc(22% - 8px); width: 58px; height: 46px; transform: translateX(-50%) rotate(-14deg); }
.ls-flag, .ls-lazy { position: absolute; bottom: 22%; }
.ls-flag { transform: translateX(-4px); }
.ls-flag svg { width: 30px; height: 60px; display: block; }
.ls-lazy { transform: translateX(-50%); }
.ls-lazy svg { width: 32px; height: 32px; display: block; transform: rotate(-80deg) translateX(-4px); opacity: 0.85; }
.zz { position: absolute; left: 70%; top: -18px; font-weight: 800; font-size: 0.8rem; color: #1c1d4f; animation: zz 2.4s ease-in-out infinite; }
.zz b { font-size: 1.05rem; margin-left: 2px; position: relative; top: -8px; }
@keyframes zz { 0%, 100% { opacity: 0.3; transform: translateY(2px); } 50% { opacity: 1; transform: translateY(-4px); } }
.ls-tag { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-weight: 800; font-size: 0.72rem; color: #ffffff; }
.ls-flag .ls-tag { left: 4px; }
.ls-say {
  position: absolute; left: calc(2% + 150px); top: 9%; max-width: min(300px, 46%);
  padding: 10px 14px; background: #ffffff; color: #1c1d4f; border: 3px solid var(--edge); border-radius: 16px 16px 16px 4px;
  box-shadow: 0 4px 0 var(--edge); font-weight: 800; font-size: 0.95rem; line-height: 1.25;
  animation: pop 420ms var(--spring) 300ms both;
}
.ls-say[data-landed] { left: 4%; }

.play-big {
  position: relative; z-index: 2; justify-self: center; margin-top: -52px;
  display: grid; justify-items: center; gap: 2px; min-width: min(360px, 84vw); padding: 16px 40px 18px;
  border: 4px solid var(--edge); border-radius: 999px; background: var(--sun); color: #1c1d4f; cursor: pointer;
  box-shadow: 0 10px 0 var(--edge); animation: breathe 2.6s ease-in-out infinite;
  transition: transform 100ms ease-out, box-shadow 100ms ease-out;
}
.play-big:hover { animation: none; transform: translateY(-3px) rotate(-1deg); box-shadow: 0 13px 0 var(--edge); }
.play-big:active { animation: none; transform: translateY(8px); box-shadow: 0 2px 0 var(--edge); }
.pb-main { font-size: clamp(2rem, 6vw, 2.8rem); font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-stretch: 88%; }
.pb-sub { font-size: 0.95rem; font-weight: 700; color: #5b4a12; }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }

.home-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 4px; height: 38px; min-width: 38px; padding: 0 8px; justify-content: center; border: 2px solid var(--edge); border-radius: 12px; background: var(--type); color: #1c1d4f; box-shadow: 0 3px 0 var(--edge); font-weight: 800; font-size: 0.85rem; }
.chip:nth-child(odd) { transform: rotate(-3deg); }
.chip:nth-child(even) { transform: rotate(2deg); }
.chip svg { width: 18px; height: 18px; fill: currentColor; }
.chip.is-done { background: var(--board); }

.stickers { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.sticker { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 2px solid var(--edge); border-radius: 999px; background: var(--board); color: #1c1d4f; font-weight: 800; font-size: 0.85rem; box-shadow: 0 3px 0 var(--edge); }
.sticker svg { width: 16px; height: 16px; }
.s-flag { transform: rotate(-2deg); }
.s-lazy { transform: rotate(1.5deg); background: #ffe2c4; }
.s-best { transform: rotate(-1deg); background: var(--green); color: #ffffff; }

@media (max-width: 640px) {
  .ls-catapult { width: 90px; height: 60px; }
  .ls-arm { left: calc(2% + 60px); bottom: calc(22% + 34px); width: 50px; height: 40px; transform-origin: -26px 34px; }
  .ls-say, .ls-say[data-landed] { left: auto; right: 4%; top: 7%; max-width: 56%; font-size: 0.8rem; padding: 8px 10px; border-radius: 14px 14px 4px 14px; }
  .ls-tag { font-size: 0.65rem; }
  .play-big { margin-top: -40px; padding: 10px 28px 12px; min-width: min(300px, 80vw); }
  .pb-main { font-size: 2rem; }
  .pb-sub { font-size: 0.85rem; }
  .launch { height: clamp(170px, 28vh, 230px); }
  .home .home-date { font-size: clamp(1.7rem, 7.5vw, 2.2rem); }
  .home-chips { gap: 5px; flex-wrap: nowrap; }
  .chip { height: 34px; min-width: 34px; padding: 0 5px; border-radius: 10px; font-size: 0.75rem; }
  .chip svg { width: 15px; height: 15px; }
  .stickers { gap: 6px; }
  .sticker { padding: 4px 10px; font-size: 0.75rem; }
  .s-best { display: none; }
  body[data-view="home"] .colophon { display: none; }
}
@media (max-height: 640px) {
  body[data-view="home"] .stickers { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ambient { display: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}