:root {
  --bg: #fbf9f5;        /* warm near-white — soft, not grey, not stark */
  --paper: #ffffff;     /* clean white raised surfaces that lift off the page */
  --ink: #14110b;       /* near-black — text only */
  --muted: #9a9284;
  --accent: #1f2ae0;    /* bold editorial cobalt — brand chrome, distinct from the pastel strata */
  --accent-ink: #ffffff;
  --tile: #f2eee6;
  --tile-ink: #2a261d;
  --tile-selected: #14110b;
  --tile-selected-ink: #fbfaf6;
  --line: #ece7dc;      /* light hairline — resting borders */
  --hair: #ece7dc;      /* soft rules (was near-black — the main "worksheet" culprit) */
  --c0: #f3d96b; /* easy */
  --c1: #a8c66c; /* medium */
  --c2: #99b9e3; /* hard */
  --c3: #bb8fce; /* devious */
  --radius: 14px;       /* soft, inviting corners */
  --radius-sm: 10px;
  --radius-pill: 999px;
  --shadow: 0 1px 2px rgba(20,17,11,0.05), 0 6px 20px rgba(20,17,11,0.07);
  --shadow-sm: 0 1px 2px rgba(20,17,11,0.06);
  --shadow-press: inset 0 1px 3px rgba(20,17,11,0.12);
  --serif: "Hoefler Text", Garamond, Georgia, "Times New Roman", serif;
  --sans: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --mono: "American Typewriter", "Courier New", Courier, monospace;  /* in-game words */
  /* bold accents (OMA-ish): one per game, used as full color blocks */
  --c-trail: #1f2ae0;   /* cobalt */
  --c-dig:   #d8462b;   /* vermilion */
  --c-grow:  #128a4c;   /* green */
  --c-germ:  #e8a300;   /* ochre */
  --c-branch: #127a8c;  /* teal */
  font-size: 16px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 1.2rem 1rem 2rem;
}

header { text-align: center; margin-bottom: 1.4rem; width: 100%; max-width: 560px; }

h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(3rem, 12vw, 4.4rem);
  line-height: 0.92;
  letter-spacing: -0.025em;
  margin: 0;
  display: inline-flex;
  align-items: flex-start;
  gap: 0.12em;
}

h1 .seed { width: 0.46em; height: 0.46em; margin-top: 0.06em; flex: none; }
h1 .seed path { stroke: var(--c-grow); }

.tagline {
  margin: 0.7rem 0 0;
  color: var(--ink);
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.32em;
}

.puzzle-meta { margin: 0.3rem 0 0; color: var(--muted); font-size: 0.85rem; }

main { width: 100%; max-width: 520px; }

.instructions {
  text-align: center;
  font-size: 0.95rem;
  color: var(--tile-ink);
  margin: 0 0 0.9rem;
}

#hint-area:not(:empty) { margin-bottom: 0.7rem; }

.hint-chip {
  background: #fff8e1;
  border: 1px solid #ecd9a0;
  border-radius: 0;
  padding: 0.55rem 0.8rem;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
  animation: pop 0.25s ease;
}

/* ---- solved groups ---- */
#solved-groups:not(:empty) { margin-bottom: 0.6rem; }

.solved-group {
  border-radius: 0;
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.55rem;
  color: #2c2417;
  box-shadow: var(--shadow);
  cursor: pointer;
  animation: pop 0.35s ease;
}

.solved-group .sg-root { font-weight: 700; font-size: 0.95rem; }
.solved-group .sg-root em { font-family: Georgia, serif; }
.solved-group .sg-words {
  font-size: 0.88rem;
  margin-top: 0.15rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.solved-group .sg-more { display: none; }
.solved-group.open .sg-more { display: block; }
.solved-group .sg-notes {
  margin: 0.5rem 0 0.1rem;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  line-height: 1.45;
}

/* ---- fingerprint game ---- */
.fp-progress {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}

.fp-step {
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--tile);
}

.fp-step.step-current { border-color: var(--ink); color: var(--ink); }
.fp-step.step-done { background: #eaf3de; border-color: #639922; color: #27500a; }
.fp-step.step-failed { background: #fcebeb; border-color: #e24b4a; color: #791f1f; }

.fp-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.3rem 1.3rem;
  box-shadow: var(--shadow);
}

.fp-word {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.seg {
  appearance: none;
  font-family: var(--mono);
  font-size: 1.7rem;
  letter-spacing: 0.02em;
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius-sm);
  border: 2px dashed var(--line);
  background: var(--tile);
  color: var(--tile-ink);
  cursor: pointer;
  transition: transform 0.08s ease, background 0.12s ease;
  position: relative;
}

.seg:not(.locked):active { transform: scale(0.95); }
.seg.locked { border-style: solid; cursor: default; }
.seg.shake { animation: shake 0.35s ease; }

.seg.picked, .slot.picked {
  outline: 2.5px dashed var(--ink);
  outline-offset: 2px;
}

.seg-lock {
  position: absolute;
  top: -0.5rem;
  right: -0.4rem;
  background: #639922;
  color: #fff;
  font-size: 0.65rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, sans-serif;
}

.fp-tries {
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0.7rem 0 0.9rem;
  min-height: 1.1rem;
}

.fp-palette {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.9rem;
}

.swatch {
  appearance: none;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.44rem 0.85rem;
  border-radius: var(--radius-pill);
  border: 2px solid;
  cursor: grab;
  box-shadow: var(--shadow-sm);
  touch-action: none;   /* drag swatches on touch without scrolling the page */
  transition: transform 0.1s ease, box-shadow 0.12s ease;
}

.swatch:hover:not(:disabled) { transform: translateY(-1.5px); box-shadow: var(--shadow); }
.swatch.active { transform: scale(1.08); box-shadow: var(--shadow); }
.swatch:disabled { opacity: 0.45; cursor: default; }
.swatch.dragging { opacity: 0.35; }

.fp-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;        /* 5 actions (Undo · Hint · + Hop · Reveal · Restart) wrap on narrow screens */
  gap: 0.5rem;
}

.fp-telltale {
  margin-top: 0.9rem;
  background: #fff8e1;
  border: 1px solid #ecd9a0;
  border-radius: 0;
  padding: 0.55rem 0.8rem;
  font-size: 0.9rem;
}

.fp-reveal { margin-top: 0.9rem; }

.reveal-verdict {
  font-family: Georgia, serif;
  font-style: italic;
  margin: 0 0 0.6rem;
  text-align: center;
}

.reveal-parts {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

.reveal-parts li { margin-bottom: 0.45rem; }

.seg-chip {
  display: inline-block;
  font-family: Georgia, serif;
  padding: 0.05rem 0.45rem;
  border-radius: 0;
  border: 1.5px solid;
  margin-right: 0.15rem;
}

.part-origin {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-right: 0.2rem;
}

.reveal-story {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 0.92rem;
  margin: 0.7rem 0 0.3rem;
}

.reveal-telltale { font-size: 0.85rem; color: var(--tile-ink); margin: 0.3rem 0 0; }

.reveal-next { text-align: center; margin-top: 1rem; }

.recap-row {
  margin-bottom: 0.8rem;
  font-size: 1rem;
}

.recap-story {
  font-size: 0.82rem;
  color: var(--muted);
  font-style: italic;
  margin-top: 0.2rem;
}

/* ---- daily dig ---- */
.phase-step {
  padding: 0.34rem 0.95rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--line);
  color: var(--muted);
  background: var(--tile);
  font-size: 0.82rem;
  font-weight: 600;
}

.phase-step.step-current { border-color: transparent; color: #fff; background: var(--ink); }
.phase-step.step-done { background: #eaf3de; border-color: #639922; color: #27500a; }
.phase-step.step-failed { background: #fcebeb; border-color: #e24b4a; color: #791f1f; }

.cut-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  padding: 0.4rem 0;
}

.cut-letter {
  font-family: var(--mono);
  font-size: 1.8rem;
  padding: 0.1rem 0.05rem;
}

.cut-gap {
  appearance: none;
  width: 9px;
  height: 2.4rem;
  margin: 0 1px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
  flex: 0 0 auto;
}

.cut-gap::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 15%;
  bottom: 15%;
  width: 3px;
  border-radius: 0;
  background: var(--line);
}

.cut-gap:hover::after { background: var(--muted); }
.cut-gap.placed::after { background: var(--ink); top: 0; bottom: 0; border-radius: 999px; }
/* a placed cut is removable — the × only appears on hover (clicking the gap removes the cut) */
.cut-gap.placed::before {
  content: "×"; position: absolute; top: -0.9rem; left: 50%; transform: translateX(-50%);
  font-family: var(--sans); font-size: 0.8rem; font-weight: 700; line-height: 1; color: #b0472c;
  opacity: 0; transition: opacity 0.12s ease; pointer-events: none;
}
.cut-gap.placed:hover::before { opacity: 1; }
.cut-gap.placed:hover::after { background: #b0472c; }
.cut-gap.locked { cursor: default; }
.cut-gap.locked::after { background: #639922; top: 0; bottom: 0; border-radius: 999px; }

.cut-feedback {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.cut-chip {
  background: #faece7;
  color: #712b13;
  border: 1px solid #d85a30;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 0;
  animation: pop 0.25s ease;
}

.gloss-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.gloss-piece {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.gloss-piece .seg-chip { font-size: 1.3rem; }

.seg-chip.undug { background: var(--tile); color: var(--tile-ink); border-color: var(--line); }

.piece-origin {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  animation: pop 0.3s ease;
}

.slot {
  appearance: none;
  font-family: inherit;
  font-size: 0.85rem;
  min-width: 5.2rem;
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-sm);
  border: 1.5px dashed var(--line);
  background: var(--tile);
  color: var(--muted);
  cursor: pointer;
}

.slot.filled { border-style: solid; border-color: var(--ink); color: var(--ink); background: #fffdf8; }
.slot.locked { border-style: solid; border-color: #639922; color: #27500a; background: #eaf3de; cursor: default; }

.mcard {
  appearance: none;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  cursor: grab;
  box-shadow: var(--shadow-sm);
  touch-action: none;   /* let us drag cards on touch without the page scrolling */
  transition: transform 0.1s ease, box-shadow 0.12s ease;
}

.mcard:hover:not(:disabled) { transform: translateY(-1.5px); box-shadow: var(--shadow); }
.mcard.active { transform: scale(1.07); box-shadow: var(--shadow); }
.mcard.used { opacity: 0.4; }
.mcard:disabled { opacity: 0.4; cursor: default; }
.mcard.dragging { opacity: 0.35; }

/* the floating card that follows the pointer while dragging a meaning */
.drag-ghost {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  transform: translate(-50%, -150%);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--ink);
  background: var(--ink);
  color: var(--bg);
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(60, 50, 30, 0.35);
}
.slot.drop-hover, .seg.drop-hover { outline: 2.5px solid var(--ink); outline-offset: 2px; }

.literal {
  font-family: Georgia, serif;
  font-size: 1.25rem;
  text-align: center;
  margin: 0.2rem 0 0.8rem;
}

@media (max-width: 420px) {
  .cut-letter { font-size: 1.3rem; }
  .cut-gap { width: 7px; height: 1.9rem; }
}

/* ---- grow mode ---- */
/* nav = four themed image tiles, each with a white label box (set in chrome.js) */
.modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));   /* fits 4–5 tiles; wraps on narrow screens */
  gap: 6px;
  margin-top: 1.1rem;
}

.mode {
  position: relative;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background-size: cover;
  background-position: center;
  border: 1.5px solid var(--hair);
}
.mode-label {
  background: #fff;
  color: #000;
  padding: 0.26rem 0.5rem;
  font-family: var(--sans);
  font-size: clamp(0.5rem, 2.2vw, 0.62rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 1.5px solid var(--hair);
  white-space: nowrap;
}

/* "beta" token, top-right of a game's icon (Branch is under development) */
.mode-beta {
  position: absolute; top: 5px; right: 5px; z-index: 2; pointer-events: none;
  font-family: var(--sans); font-size: 0.5rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: #5a4500; background: #f4c84a; border: 1px solid #c99a1c;
  border-radius: 999px; padding: 0.04rem 0.42rem; line-height: 1.5;
}
.game-card { position: relative; }   /* host the beta token over the card art */

/* active tile = a bold colored frame per game (no grey-on-black) */
.mode.active { border-width: 3px; }
.beta-badge {
  display: inline-block;
  margin-left: 0.25em;
  padding: 0.05em 0.4em;
  font-family: var(--sans);
  font-size: 0.6em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
  color: #fff;
  background: var(--c-trail, #D85A30);
  border-radius: 999px;
}
.mode.active.m-graft { border-color: var(--c-trail); }
.mode.active.m-dig   { border-color: var(--c-dig); }
.mode.active.m-grow  { border-color: var(--c-grow); }
.mode.active.m-germ  { border-color: var(--c-germ); }
.mode.active.m-branch { border-color: var(--c-branch); }
.mode.active.m-graftg { border-color: #1f2ae0; }
.mode.active .mode-label { border-color: currentColor; }
.mode.active.m-graft .mode-label { box-shadow: inset 0 -3px 0 var(--c-trail); }
.mode.active.m-dig   .mode-label { box-shadow: inset 0 -3px 0 var(--c-dig); }
.mode.active.m-grow  .mode-label { box-shadow: inset 0 -3px 0 var(--c-grow); }
.mode.active.m-germ  .mode-label { box-shadow: inset 0 -3px 0 var(--c-germ); }
.mode.active.m-branch .mode-label { box-shadow: inset 0 -3px 0 var(--c-branch); }
.mode.active.m-graftg .mode-label { box-shadow: inset 0 -3px 0 #1f2ae0; }

.root-card { text-align: center; margin-bottom: 0.35rem; }

.root-pill {
  display: inline-block;
  font-family: Georgia, serif;
  font-size: 1.15rem;
  padding: 0.4rem 1rem;
  border-radius: 0;
  border: 1.5px solid;
}

.grow-count {
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  margin-bottom: 0.9rem;
}

/* clean progress line — a single rounded track that fills in the root's colour, with
   centred milestone ticks; the fill springs forward with a glowing leading edge */
.grow-bar { margin: 0.3rem 0.2rem 1.1rem; }
.grow-track {
  position: relative;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--tile);
  box-shadow: inset 0 0 0 1px var(--hair);
  overflow: visible;
}
.grow-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  min-width: 0.5rem;
  border-radius: 999px;
  background: var(--fill, #a8c66c);
  box-shadow: 0 0 6px -1px var(--fill, #a8c66c);
  transition: width 0.55s cubic-bezier(0.34, 1.5, 0.5, 1);   /* springy, whimsical advance */
}
/* a soft glow bead riding the leading edge */
.grow-fill::after {
  content: ""; position: absolute; right: -1px; top: 50%; transform: translateY(-50%);
  width: 0.72rem; height: 0.72rem; border-radius: 999px;
  background: var(--fill, #a8c66c); box-shadow: 0 0 8px 1px var(--fill, #a8c66c); opacity: 0.9;
}
.grow-fill.just-grew::after { animation: grow-bead 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes grow-bead { 0% { transform: translateY(-50%) scale(0.5); } 55% { transform: translateY(-50%) scale(1.7); } 100% { transform: translateY(-50%) scale(1); } }
/* milestone ticks sit ON the line, centred vertically */
.grow-tick { position: absolute; top: 50%; width: 2px; height: 0.9rem; transform: translate(-50%, -50%); border-radius: 2px; z-index: 2; }
.grow-tick.win { background: var(--ink); opacity: 0.55; }
.grow-tick.flourish { background: var(--muted); opacity: 0.5; height: 0.66rem; }

/* "want to try another game?" — a white button with a crisp rainbow rim (the six strata
   colours) that slowly undulates around the edge. The two-background trick paints white on
   the padding-box and the rotating conic gradient on the border-box, so the rim is exactly
   the 2.5px border — no glow, no bleed. */
@property --gg-ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.btn.grow-another {
  position: relative;
  display: block; width: 100%; margin-top: 0.6rem;
  color: var(--ink);
  border: 3.5px solid transparent;
  border-radius: var(--radius-pill);
  background:
    linear-gradient(#fff, #fff) padding-box,
    conic-gradient(from var(--gg-ang), #639922, #378ADD, #D85A30, #D4537E, #7F77DD, #EF9F27, #639922) border-box;
  box-shadow: var(--shadow-sm);
  animation: gg-rim 7s linear infinite;
}
/* a soft rainbow glow pooling behind the button, gently breathing to catch the eye */
.btn.grow-another::before {
  content: ""; position: absolute; inset: -4px; z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from var(--gg-ang), #639922, #378ADD, #D85A30, #D4537E, #7F77DD, #EF9F27, #639922);
  filter: blur(10px);
  animation: gg-rim 7s linear infinite, gg-glow 3.4s ease-in-out infinite;
}
.btn.grow-another:hover { transform: translateY(-1.5px); box-shadow: var(--shadow); }
.btn.grow-another:active { transform: translateY(0); box-shadow: var(--shadow-press); }
@keyframes gg-rim { to { --gg-ang: 360deg; } }
@keyframes gg-glow { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.72; } }

.grow-tools { text-align: center; margin-bottom: 0.7rem; }

.grow-tools .btn { font-size: 0.8rem; padding: 0.4rem 0.9rem; }

#branch-map {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  margin-bottom: 0.9rem;
}
/* the [hidden] attr is display:none, but the #id rule above outranks it — restore it
   so the Hide button actually hides the map */
#branch-map[hidden] { display: none; }

.bm-head {
  flex-basis: 100%;
  font-family: var(--sans);
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--muted);
  text-align: center;
  margin-bottom: 0.15rem;
}
.bm-head b { color: var(--ink); font-weight: 700; }
.bm-warn { color: #a8760f; font-weight: 700; }
.bm-chip {
  background: #fff8e1;
  border: 1px solid #ecd9a0;
  border-radius: 999px;
  font-size: 0.85rem;
  padding: 0.25rem 0.7rem;
}

.bm-chip strong { font-family: Georgia, serif; }

.grow-form {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

#grow-input {
  flex: 1;
  font-family: Georgia, serif;
  font-size: 1.05rem;
  padding: 0.55rem 0.9rem;
  border-radius: 0;
  border: 1.5px solid var(--line);
  background: #fffdf8;
  color: var(--ink);
  min-width: 0;
}

#grow-input:focus { outline: none; border-color: var(--ink); }
#grow-input.shake { animation: shake 0.35s ease; }

#leaves { display: flex; flex-direction: column; gap: 0.4rem; }

.leaf {
  border-radius: 0;
  padding: 0.5rem 0.8rem;
  font-size: 0.92rem;
  text-align: left;
}

.leaf.found {
  background: #eaf3de;
  color: #27500a;
  border: 1px solid #a8c66c;
  animation: pop 0.3s ease;
}

.leaf.found.missed { background: #fcebeb; color: #791f1f; border-color: #f09595; }
.leaf-missed { float: right; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7; }

.leaf.bonus { background: #e1f5ee; color: #085041; border: 1px solid #5dcaa5; animation: pop 0.3s ease; }
/* a verified relative beyond the curated tree: lighter, dashed — still a real find */

.leaf-word { font-weight: 700; }
.leaf-note { font-style: italic; opacity: 0.9; }

.wikt {
  color: inherit;
  opacity: 0.55;
  text-decoration: none;
  font-size: 0.85em;
}

.wikt:hover { opacity: 1; }

.source-line { text-align: center; font-size: 0.78rem; margin: 0.5rem 0 0; }
.source-line .wikt { text-decoration: underline; }

.hidden-leaf {
  appearance: none;
  font-family: inherit;
  width: 100%;
  border: 1.5px dashed var(--line);
  background: var(--tile);
  color: var(--muted);
  cursor: pointer;
}

.hidden-leaf.mono { font-family: ui-monospace, Menlo, monospace; letter-spacing: 0.06em; }
.hidden-leaf .leaf-clue { font-family: -apple-system, sans-serif; letter-spacing: 0; font-style: italic; }
.hidden-leaf .leaf-hint-cta { float: right; font-size: 0.72rem; opacity: 0.6; font-family: -apple-system, sans-serif; letter-spacing: 0; }

.bonus-title {
  margin-top: 0.9rem;
  margin-bottom: 0.4rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

#bonus-area .leaf { margin-bottom: 0.4rem; }

.trap-chip {
  margin-top: 0.6rem;
  background: #faeeda;
  color: #633806;
  border: 1px solid #ef9f27;
  border-radius: 0;
  padding: 0.5rem 0.8rem;
  font-size: 0.88rem;
  animation: pop 0.3s ease;
}

.grow-footer { text-align: center; margin-top: 1rem; }

/* ---- trail mode ---- */
.trail-goal {
  text-align: center;
  margin-bottom: 1.1rem;
}
/* prominent one-line goal: "There are N ways to get from SEED to TARGET" */
.goal-sentence {
  font-family: var(--serif, Georgia, serif);
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--ink);
}
.goal-sentence strong { font-weight: 700; }
.goal-arrow { color: var(--muted); }

/* hint button level pips: ●●● used / ○○○ remaining */
.hint-pips {
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  vertical-align: 0.04em;
}

.trail-word {
  font-family: var(--mono);
  font-size: 1.05rem;
  padding: 0.2rem 0.55rem;
  border-radius: 0;
  background: var(--tile);
  color: var(--tile-ink);
  white-space: nowrap;
}
.trail-word.is-target { box-shadow: inset 0 0 0 2px var(--ink); }
.trail-word.is-current { background: var(--ink); color: var(--bg); }

#chain {
  --lane-step: min(3.4rem, 15vw);   /* horizontal spread between root-lanes */
  margin: 0 auto 0.9rem;
  min-height: 2rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--mono);
  font-size: 1.15rem;
  line-height: 1.4;
}

/* ---- graph-node board ---- */
/* each word is a boxed node, shifted left/right into the lane of the root it arrived by
   (style="--lane:n"), so the column reads as the path taken through root-space. */
.gnode {
  transform: translateX(calc(var(--lane, 0) * var(--lane-step)));
  max-width: 80vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.18rem;
  padding: 0.32rem 0.6rem;
  border: 1.5px solid var(--hair);
  background: var(--paper, #fffdf8);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
  transition: transform 0.18s ease;
}
.gnode .gn-head { display: flex; align-items: center; gap: 0.3rem; }
.gnode.is-seed, .gnode.is-target { border-color: var(--ink); border-width: 2px; }
.gnode.is-seed .gn-head, .gnode.is-target .gn-head { font-weight: 700; color: var(--ink); }
.gnode.is-frontier { border-style: dashed; }
.gnode.is-frontier.active { border-style: solid; border-color: var(--ink); background: var(--tile); }
.gn-roots { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2rem; font-family: var(--sans); font-size: 0.58rem; line-height: 1.1; }

/* connector between two stacked nodes — a short rule with the linking root's chip */
.gconn { display: flex; flex-direction: column; align-items: center; gap: 0.12rem; padding: 0.05rem 0; }
.gconn .gc-line { width: 1.5px; height: 0.5rem; background: var(--line); }
.gconn .gc-root {
  display: inline-flex; align-items: baseline; gap: 0.22rem;
  font-family: var(--sans); font-size: 0.62rem; line-height: 1.1;
  padding: 0.04rem 0.4rem; border: 1px solid rgba(0,0,0,0.16);
}
.gconn .gc-root .rt-key { font-family: var(--mono); font-weight: 700; }
.gconn .gc-root .rt-gloss { opacity: 0.85; font-style: italic; }

.gslot-dot { color: var(--muted); opacity: 0.4; letter-spacing: 0.4em; line-height: 1; }

/* on-board hop controls (replaced the −Hop/+Hop action buttons) */
.board-hop { display: flex; gap: 0.4rem; justify-content: center; margin: 0.35rem 0 0.1rem; }
.hop-btn {
  font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.01em;
  padding: 0.2rem 0.7rem; cursor: pointer;
  border: 1.5px dashed var(--line); border-radius: 0;
  background: transparent; color: var(--muted);
}
.hop-btn:hover { border-style: solid; border-color: var(--ink); color: var(--ink); }
.chain-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  color: var(--tile-ink);
  border-radius: 0;
  padding: 0.05rem 0.3rem;
}
.chain-line .cw { white-space: pre; }
/* etymological roots shown as chips emanating toward the join (down for the top half,
   up for the bottom half). key = mono (debug), gloss = meaning (play). */
.word-roots {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 0.25rem; font-family: var(--sans); font-size: 0.6rem; line-height: 1.1;
  margin: 0 auto; max-width: 92vw;
}
.word-roots.roots-down { margin: -0.05rem auto 0.35rem; }
.word-roots.roots-up { margin: 0.35rem auto -0.05rem; }
.wr-arrow { color: var(--muted); font-size: 0.72rem; }
.root-tag {
  display: inline-flex; align-items: baseline; gap: 0.22rem;
  padding: 0.03rem 0.32rem; border: 1px solid rgba(0,0,0,0.14);
}
.root-tag .rt-key { font-family: var(--mono); font-weight: 700; letter-spacing: -0.01em; }
.root-tag .rt-gloss { opacity: 0.82; font-style: italic; }
.root-tag.is-via { outline: 1.6px solid currentColor; outline-offset: -1px; }
.chain-line.is-current { font-weight: 700; }
.chain-line.is-seed,
.chain-line.is-target { font-weight: 700; color: var(--ink); }
.chain-line.is-frontier { outline: 1.5px dashed var(--line); }
.chain-line.is-frontier.active { outline: 2px solid var(--ink); background: var(--tile); }
.chain-x {
  border: none;
  background: none;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.1rem 0.25rem;
  border-radius: 0;
  opacity: 0.55;
}
.chain-x:hover { opacity: 1; color: #c0392b; background: #f6e3df; }
.chain-slot {
  white-space: pre;
  text-align: center;
  color: var(--muted);
  opacity: 0.45;
  letter-spacing: 0.5em;
}
.chain-slot::before { content: "· · ·"; }

/* a fillable frontier slot is an inline input — click it and type */
.chain-slot.is-fill { opacity: 1; letter-spacing: normal; position: relative; }
.chain-slot.is-fill::before { content: none; }
.slot-in {
  font-family: var(--mono);
  font-size: 1.05rem;
  text-align: center;
  width: 11rem;
  max-width: 70vw;
  padding: 0.3rem 0.5rem;
  border: 1.5px dashed var(--line);
  border-radius: 0;
  background: #fffdf8;
  color: var(--ink);
}
.slot-in:focus { outline: none; border-style: solid; border-color: var(--ink); background: var(--tile); }
.slot-in.shake { animation: shake 0.35s ease; }
/* tier-3 hint: the first letter is pre-filled; the prompt names the length (no blanks to count) */
.chain-slot.is-hint { display: inline-block; }
.chain-slot.is-hint .slot-in { border-style: solid; border-color: var(--ink); background: #fff3cf; }
/* inline error, shown directly under the active slot so it clears the on-screen keyboard */
.slot-err {
  margin: 0.4rem auto 0;
  max-width: 22rem;
  padding: 0.4rem 0.6rem;
  font-family: var(--sans);
  font-size: 0.82rem;
  line-height: 1.3;
  color: var(--c-trail, #712B13);
  background: #fbeae3;
  border: 1px solid var(--c-trail, #D85A30);
  border-radius: 4px;
}
.via-hi {
  border-radius: 0;
  padding: 0.05rem 0;
}

/* ---- morpheme underlines ---- */
/* words render plainly; a morpheme that's been grafted to a neighbour gets a thin
   stratum-coloured underline (set inline). Two adjacent words sharing a morpheme
   show the same underline on the same letters — that IS the visible connection. */
.wtiles { display: inline-flex; align-items: baseline; white-space: pre; }
.wt-neu { padding: 0; }
.wt { padding: 0 0 0.04rem; }

/* worked example inside the How-to modal — reuses the underline vocabulary */
.howto-eg-label { margin: 1.1rem 0 0.5rem; }
.howto-eg {
  font-family: var(--mono);
  font-size: 1.05rem;
  text-align: center;
  width: fit-content;
  margin: 0 auto;
  padding: 0.6rem 1rem;
  border: 1.5px solid var(--hair);
  background: var(--paper);
}
.howto-eg .chain-line { font-weight: 400; }
.howto-eg .chain-line.is-seed, .howto-eg .chain-line.is-target { font-weight: 700; color: var(--ink); }
.howto-eg-cap { margin: 0.6rem 0 0; font-size: 0.82rem; color: var(--muted); }
/* connector arrow in the how-to example, naming the shared morpheme */
.eg-arrow { font-size: 0.78rem; color: var(--muted); line-height: 1.2; }
.eg-arrow em { font-style: normal; font-family: var(--mono); }
/* animated playthrough: rows/rungs fade in one by one (JS adds .show in sequence) */
.howto-eg.animate > * { opacity: 0; transform: translateY(6px); transition: opacity 0.3s ease, transform 0.3s ease; }
.howto-eg.animate > .show { opacity: 1; transform: none; }

/* bidirectional frontier toggle */
.trail-dir {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 0.6rem;
}
.dir-btn {
  flex: 1 1 0;
  min-width: 0;
  font-family: Georgia, serif;
  font-size: 0.9rem;
  padding: 0.4rem 0.6rem;
  border-radius: 0;
  border: 1.5px solid var(--line);
  background: #fffdf8;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dir-btn.active { border-color: var(--ink); background: var(--ink); color: var(--bg); }

#trail-input {
  flex: 1;
  font-family: Georgia, serif;
  font-size: 1.05rem;
  padding: 0.55rem 0.9rem;
  border-radius: 0;
  border: 1.5px solid var(--line);
  background: #fffdf8;
  color: var(--ink);
  min-width: 0;
}
#trail-input:focus { outline: none; border-color: var(--ink); }
#trail-input.shake { animation: shake 0.35s ease; }

.hint-scaffold {
  text-align: center;
  background: #fff8e1;
  border: 1px solid #ecd9a0;
  border-radius: 0;
  padding: 0.5rem 0.8rem;
  font-size: 0.95rem;
  margin-bottom: 0.9rem;
}
.hint-scaffold .blanks {
  font-family: ui-monospace, Menlo, monospace;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.hint-scaffold .blank-len { color: var(--muted); font-size: 0.82rem; }
.hint-scaffold .hint-cycle { display: inline-block; margin-top: 0.2rem; font-size: 0.78rem; color: var(--muted); font-family: var(--sans); letter-spacing: 0.02em; }

/* morpheme breakdown note (why two look-alike words don't connect) */
.morph-note {
  border: 1.5px solid var(--hair);
  background: var(--paper);
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.9rem;
  font-size: 0.95rem;
}
.morph-note .mn-row { margin: 0.15rem 0; font-family: var(--mono); }
.morph-note .mn-row b { font-weight: 700; }
.morph-note .mc {
  display: inline-block;
  padding: 0.02rem 0.4rem;
  margin: 0 0.1rem;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,0.18);
  font-family: var(--mono);
}
.morph-note .mc:hover { outline: 1.5px solid var(--ink); }
.morph-note .mc-plus { color: var(--muted); margin: 0 0.1rem; }
.morph-note .mc-none { color: var(--muted); font-style: italic; }
.morph-note .mn-tip { margin: 0.4rem 0 0; font-size: 0.8rem; color: var(--muted); font-family: var(--sans); }
.morph-note .mn-flag { display: inline-block; margin-top: 0.45rem; font-size: 0.8rem; }
.morph-note .mn-flag[disabled] { color: var(--muted); cursor: default; }
/* the <form> wrapping each slot input must not generate its own box (preserve slot layout) */
.slot-form { display: contents; }

.tok {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.72rem;
  padding: 0.12rem 0.4rem;
  border-radius: 0;
  border: 1.5px solid;
}
.tok-prefix { background: var(--tile); color: var(--muted); border-color: var(--line); }

.trail-prompt {
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 0.7rem;
}

.ngroup {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-top: 1px solid var(--line);
}
.ngroup:first-child { border-top: none; }
.ngroup .tok { margin-top: 0.25rem; flex: 0 0 auto; }
.nwords { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.nword {
  appearance: none;
  font-family: Georgia, serif;
  font-size: 0.92rem;
  padding: 0.28rem 0.6rem;
  border-radius: 0;
  border: 1.5px solid var(--line);
  background: #fffdf8;
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.08s ease, background 0.12s ease;
}
.nword:active { transform: scale(0.96); }
.nword.is-target { border-color: var(--ink); border-width: 2px; font-weight: 700; }
.nword.hinted { background: #fff8e1; border-color: #ecd9a0; animation: pop 0.3s ease; }

.trail-deadend { text-align: center; color: var(--muted); font-size: 0.9rem; font-style: italic; }

#trail-actions { margin-top: 1rem; }

/* ---- field guide ---- */
.modal-wide { max-width: 480px; }

.guide-intro { color: var(--muted); margin-top: -0.3rem; }

#guide-map svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  margin-bottom: 0.9rem;
}

.guide-label {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 13px;
  font-weight: 700;
  paint-order: stroke;
  stroke: rgba(250, 247, 240, 0.9);
  stroke-width: 3px;
}

#guide-strata {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.guide-card {
  border: 1.5px solid;
  border-radius: 0;
  padding: 0.6rem 0.7rem;
}

.guide-name { font-weight: 700; font-size: 0.9rem; }
.guide-blurb { font-size: 0.78rem; margin-top: 0.15rem; line-height: 1.4; }
.guide-cues { font-size: 0.72rem; margin-top: 0.3rem; opacity: 0.85; font-family: ui-monospace, Menlo, monospace; }

@media (max-width: 420px) {
  #guide-strata { grid-template-columns: 1fr; }
  .seg { font-size: 1.35rem; }
}
.solved-group .sg-notes strong { text-transform: capitalize; }
.solved-group .sg-expand {
  font-size: 0.75rem;
  opacity: 0.65;
  margin-top: 0.2rem;
}

.g0 { background: var(--c0); }
.g1 { background: var(--c1); }
.g2 { background: var(--c2); }
.g3 { background: var(--c3); }

/* ---- grid ---- */
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}

.tile {
  appearance: none;
  border: none;
  background: var(--tile);
  color: var(--tile-ink);
  border-radius: 0;
  min-height: 4.6rem;
  padding: 0.3rem 0.25rem;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 0.08s ease, background 0.12s ease, color 0.12s ease;
  word-break: break-word;
  line-height: 1.15;
}

.tile.long { font-size: 0.74rem; }
.tile.verylong { font-size: 0.62rem; }

.tile:active { transform: scale(0.96); }

.tile.selected {
  background: var(--tile-selected);
  color: var(--tile-selected-ink);
}

.tile.shake { animation: shake 0.35s ease; }
.cut-row.shake, .gloss-row.shake { animation: shake 0.35s ease; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

@keyframes pop {
  0% { transform: scale(0.92); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.btn {
  appearance: none;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.62rem 1.25rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.1s ease, box-shadow 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.btn:hover:not(:disabled) { transform: translateY(-1.5px); box-shadow: var(--shadow); border-color: #dcd5c6; }
.btn:active:not(:disabled) { transform: translateY(0); box-shadow: var(--shadow-press); }

.btn:disabled { opacity: 0.4; cursor: default; box-shadow: none; }
.btn.armed { background: var(--c-trail, #D85A30); color: #fff; border-color: var(--c-trail, #D85A30); }
/* greyed-but-clickable: hint button when off-par. Looks disabled; a tap still explains why. */
.btn.is-locked { opacity: 0.4; border-style: dashed; }
.btn.is-locked .hint-pips { opacity: 0.7; }

.btn-primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-primary:hover:not(:disabled) { background: #2c2618; border-color: #2c2618; }

.link-btn {
  appearance: none;
  border: none;
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
}

footer {
  margin-top: 1.4rem;
  display: flex;
  gap: 0.6rem;
  align-items: center;
  color: var(--line);
}

/* ---- cookie-consent banner (consent.js) ---- */
.consent-banner {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  width: min(640px, calc(100% - 1.6rem));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  padding: 0.85rem 1.1rem;
  background: #fffdf8;
  border: 1.5px solid var(--line);
  border-radius: 0;
  box-shadow: 0 6px 24px rgba(60, 50, 30, 0.18);
  z-index: 40;
  animation: pop 0.2s ease;
}
.consent-text {
  margin: 0;
  flex: 1 1 16rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--tile-ink);
}
.consent-text a { color: var(--ink); }
.consent-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
.consent-actions .btn { font-size: 0.82rem; padding: 0.45rem 1rem; }

/* ---- prose pages (privacy policy) ---- */
.prose { max-width: 42rem; line-height: 1.6; }
.prose-meta { color: var(--muted); font-size: 0.85rem; margin-top: 0; }
.prose h2 { font-size: 1.05rem; margin: 1.6rem 0 0.4rem; }
.prose h3 { font-size: 0.95rem; margin: 1.3rem 0 0.3rem; color: var(--accent, inherit); letter-spacing: 0.01em; }

/* Branch reveal honesty markers — a lineage that folds an attested in-between
   stage, or whose deeper history Wiktionary itself hedges on, says so. */
.bw-flag { display: inline-block; margin-left: 0.45em; padding: 0 0.5em; border: 1px solid currentColor; border-radius: 999px; font-size: 0.78em; vertical-align: middle; }
.bw-flag-disputed { opacity: 0.75; }
.bw-flag-simplified { opacity: 0.55; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin: 0.3rem 0; }
.prose a { color: var(--ink); }

/* ---- toast ---- */
.toast {
  position: fixed;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--ink);
  color: #fff;
  padding: 0.7rem 1.35rem;
  border-radius: var(--radius-pill);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  max-width: min(20rem, 84vw);
  box-shadow: 0 10px 30px rgba(20, 17, 11, 0.28);
  animation: toast-pop 0.28s cubic-bezier(0.2, 1.3, 0.4, 1);
  z-index: 30;
}
@keyframes toast-pop {
  0% { transform: translate(-50%, -46%) scale(0.9); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* ---- modals ---- */
.modal-backdrop[hidden] { display: none; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(40, 34, 24, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 20;
}

.modal {
  position: relative;
  background: var(--bg);
  border-radius: 0;
  max-width: 420px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 1.5rem 1.4rem 1.3rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
  animation: pop 0.25s ease;
}

.modal h2 { font-family: Georgia, serif; margin: 0 0 0.5rem; }
.modal p, .modal li { font-size: 0.93rem; line-height: 1.5; }
.modal ul { padding-left: 1.2rem; }

.modal-close {
  position: absolute;
  top: 0.6rem;
  right: 0.8rem;
  border: none;
  background: none;
  font-size: 1.5rem;
  color: var(--muted);
  cursor: pointer;
}

.modal-actions { text-align: center; margin-top: 1rem; }

.share-grid { font-size: 1.25rem; line-height: 1.35; text-align: center; letter-spacing: 0.1em; }

.stats {
  display: flex;
  justify-content: space-around;
  margin-top: 1rem;
  text-align: center;
}

.stat .num { font-size: 1.6rem; font-weight: 700; display: block; font-family: Georgia, serif; }
.stat .label { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }

.next-puzzle { text-align: center; color: var(--muted); font-size: 0.85rem; margin-top: 1rem; }

.dot { display: inline-block; width: 0.75em; height: 0.75em; border-radius: 0; vertical-align: baseline; }
.dot.d0 { background: var(--c0); }
.dot.d3 { background: var(--c3); }

@media (max-width: 420px) {
  h1 { font-size: 2.1rem; }
  .tile { min-height: 4.2rem; font-size: 0.8rem; }
  .tile.long { font-size: 0.66rem; }
  .tile.verylong { font-size: 0.56rem; }
  .btn { padding: 0.55rem 0.9rem; font-size: 0.85rem; }
}

/* ===== Graft β — grid variant ===== */
.gg-head { text-align: center; margin-bottom: 0.9rem; }
.gg-head-line { font-family: var(--serif, Georgia, serif); font-size: 1.02rem; line-height: 1.45; color: var(--ink); }
.gg-head-line b { font-weight: 700; }
.gg-end-w { font-family: var(--mono); font-weight: 700; padding: 0.12rem 0.5rem; background: var(--tile); border: none; border-radius: var(--radius-sm); }
.gg-arrow { color: var(--muted); }
.gg-head-sub { display: block; margin-top: 0.3rem; font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
/* progress: three dots, lit as each route is locked in */
.gg-chips { display: flex; gap: 0.4rem; justify-content: center; align-items: center; margin-top: 0.5rem; }
.gg-chip {
  display: inline-flex; align-items: center; justify-content: center; width: 1.45rem; height: 1.45rem;
  border-radius: 50%; font-size: 0.82rem; border: 1.5px solid var(--line); color: var(--muted); background: #fffdf8;
}
.gg-chip.on { border-color: var(--c-grow, #128a4c); color: var(--c-grow, #128a4c); background: #eaf3ec; }
.gg-chip.missed { border-color: #d8a72e; color: #9a6a0a; background: #fbf3da; }
.gg-chips-n { font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-left: 0.25rem; }
/* two clearly-separated counters: routes found  |  lives left (so the "0/3" never reads as a heart count) */
.gg-stat { display: inline-flex; align-items: center; gap: 0.4rem; }
.gg-stat-dots { display: inline-flex; gap: 0.4rem; }
.gg-stat-lbl { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.gg-stat-sep { width: 1px; height: 1.2rem; background: var(--line); margin: 0 0.5rem; }

/* prominent "tip" pill — invites newcomers into the etymology guide, front and centre */
.gg-tipbar { text-align: center; margin: 0 0 1rem; }
.gg-tip-btn { appearance: none; cursor: pointer; font-family: var(--sans); font-size: 0.85rem; font-weight: 600; color: #7a5a12; background: #fbf3da; border: 1.5px solid #d8a72e; border-radius: 999px; padding: 0.42rem 0.95rem; }
.gg-tip-btn:hover { background: #f6e9bf; }

/* how-to demo — an example 4-hop path drawing itself in */
.gg-demo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.25rem; margin: 0.9rem auto; padding: 0.7rem; border: 1.5px solid var(--hair); background: var(--paper, #fffdf8); }
.gg-demo .gg-dnode { font-family: var(--mono); font-size: 0.9rem; padding: 0.24rem 0.5rem; border: 1.5px solid var(--hair); background: #fff; }
.gg-demo .gg-dnode.is-end { border-color: var(--ink); border-width: 2px; font-weight: 700; }
.gg-demo .gg-dnode.is-fin { border-color: var(--c-grow, #128a4c); background: #eaf3ec; color: var(--c-grow, #128a4c); }
.gg-demo .gg-dconn { color: var(--muted); font-family: var(--sans); font-size: 0.6rem; font-style: italic; padding: 0 0.2rem; }
.gg-demo .gg-dstep { display: inline-flex; align-items: center; gap: 0.25rem; }
.gg-demo.animate .gg-dstep { opacity: 0; transform: translateX(6px); transition: opacity 0.3s ease, transform 0.3s ease; }
.gg-demo.animate .gg-dstep.show { opacity: 1; transform: none; }
.gg-demo-cap { margin: 0.5rem 0 0; font-size: 0.82rem; color: var(--muted); text-align: center; }

/* lives (♥) in the header */
.gg-lives { letter-spacing: 0.06em; }
.gg-life { color: #c0392b; font-size: 0.95rem; }
.gg-life.lost { color: var(--line); }

/* etymology guide */
.etym-h { margin: 1.05rem 0 0.3rem; font-family: var(--serif, Georgia, serif); font-size: 1.02rem; color: var(--ink); }
.etym-list { margin: 0.2rem 0 0.5rem; padding-left: 1.1rem; line-height: 1.55; font-size: 0.92rem; }
.etym-list li { margin: 0.12rem 0; }
.etym-list b { font-family: var(--mono); font-weight: 700; }

/* locked, solved chains stacked above the active builder */
.gg-found { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.8rem; }
.gg-found:empty { margin-bottom: 0; }
.gg-found-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.4rem 0.5rem; border: 1.5px solid var(--c-grow, #128a4c); background: #eef5f0; }
.gg-found-tag { font-family: var(--sans); font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-grow, #128a4c); white-space: nowrap; }
/* routes the player missed (revealed on a loss) — yellow, clearly "not solved" */
.gg-found-row.missed { border-color: #d8a72e; background: #fbf3da; }
.gg-found-row.missed .gg-found-tag { color: #9a6a0a; }
.gg-found-row.missed .gg-node.is-end { border-color: #b9851c; }
.gg-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 0.22rem; }

/* the tappable finish word */
.gg-node.is-finish { appearance: none; cursor: pointer; font-family: var(--mono); }
.gg-node.is-finish.ready { border-color: var(--c-grow, #128a4c); background: #eaf3ec; box-shadow: 0 0 0 2px rgba(18,138,76,0.18); }
.gg-allfound { font-family: var(--serif, Georgia, serif); color: var(--c-grow, #128a4c); font-weight: 700; padding: 0.6rem; }
.gg-allfound.gg-lost { color: #9a6a0a; }
.gg-goal {
  display: flex; flex-direction: column; gap: 0.2rem; text-align: left;
  padding: 0.5rem 0.6rem; cursor: pointer;
  border: 1.5px solid var(--line); background: #fffdf8; color: var(--ink);
}
.gg-goal.active { border-color: var(--ink); border-width: 2px; background: var(--tile); }
.gg-goal.done { border-color: var(--c-grow, #128a4c); background: #eaf3ec; }
.gg-goal-h { font-family: var(--sans); font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; display: flex; justify-content: space-between; align-items: center; }
.gg-goal.done .gg-goal-h { color: var(--c-grow, #128a4c); }
.gg-goal-prog { font-weight: 600; color: var(--muted); }
.gg-goal-ends { font-family: var(--mono); font-size: 0.78rem; line-height: 1.3; word-break: break-word; }

/* the active chain tray — horizontal node graph */
.gg-tray {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.25rem; min-height: 2.4rem; margin-bottom: 0.6rem;
  padding: 0.6rem 0.4rem; border: 1.5px solid var(--hair); background: var(--paper, #fffdf8);
}
.gg-node {
  font-family: var(--mono); font-size: 0.92rem; padding: 0.3rem 0.6rem;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; position: relative; white-space: nowrap;
}
.gg-node.is-end { background: var(--ink); color: #fff; border-color: var(--ink); border-width: 1.5px; font-weight: 700; }
.gg-node.is-finish.is-done { border-color: var(--c-grow, #128a4c); background: #eaf3ec; }
.gg-node.is-slot { border-style: dashed; color: var(--muted); min-width: 1.6rem; text-align: center; }
.gg-node.is-pick { cursor: pointer; padding-right: 1.3rem; }
.gg-node .gg-x { position: absolute; right: 0.28rem; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 0.8rem; }
.gg-node.is-pick:hover { border-color: #c0392b; }
.gg-node.is-pick:hover .gg-x { color: #c0392b; }
/* the two consecutive hops that reuse the same root — flagged amber, no penalty */
.gg-node.gg-reuse { border-color: #d8a72e; background: #fbf3da; color: #7a5a12; box-shadow: 0 0 0 2px rgba(216,167,46,0.28); }
.gg-conn { display: inline-flex; align-items: center; }
.gg-conn-line { color: var(--muted); opacity: 0.5; padding: 0 0.1rem; }
.gg-root {
  display: inline-flex; align-items: baseline; gap: 0.2rem;
  font-family: var(--sans); font-size: 0.6rem; line-height: 1.1;
  padding: 0.04rem 0.36rem; border: 1px solid rgba(0,0,0,0.16);
}
.gg-root .rt-key { font-family: var(--mono); font-weight: 700; }
.gg-root .rt-gloss { opacity: 0.85; font-style: italic; }

.gg-prompt { text-align: center; color: var(--muted); font-size: 0.9rem; min-height: 1.2rem; margin-bottom: 0.5rem; }
/* persistent feedback (does NOT auto-dismiss, so the rules are learnable). warn = a mistake
   that cost a life (red); info = a harmless nudge (amber). */
.gg-error {
  margin: 0 auto 0.9rem; max-width: 30rem; padding: 0.5rem 0.75rem;
  font-family: var(--sans); font-size: 0.85rem; line-height: 1.4; text-align: center;
  border: 1.5px solid; border-radius: 4px;
}
.gg-error.warn { color: #9a1c14; background: #fde7e3; border-color: #c0392b; }
.gg-error.info { color: #7a5a12; background: #fbf3da; border-color: #d8a72e; }
.gg-error b { font-family: var(--mono); }
.gg-err-lives { display: inline-block; margin-left: 0.3rem; font-weight: 700; }
/* a placed hop's root label on the connector — one small chip, far less clutter than per-word tags */
.gg-conn .gg-via {
  font-family: var(--sans); font-size: 0.6rem; font-style: italic; color: var(--muted);
  padding: 0 0.28rem; white-space: nowrap;
}
.gg-prompt b { color: var(--ink); }
.gg-ok { color: var(--c-grow, #128a4c); font-weight: 700; }

/* the word board — a calm, evenly-spaced grid of equal-feeling tiles */
.gg-board { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem; margin: 0.2rem auto 1.1rem; max-width: 30rem; }
.gg-board.shake { animation: shake 0.35s ease; }
.gg-tile {
  appearance: none; font-family: var(--mono); font-size: 0.95rem; text-align: center;
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.28rem;
  min-width: 6rem; padding: 0.55rem 0.8rem; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm);
  transition: transform 0.1s ease, background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.gg-tile:hover { transform: translateY(-1.5px); box-shadow: var(--shadow); border-color: #dcd5c6; }
.gg-tile:active { transform: translateY(0); box-shadow: var(--shadow-press); }
.gg-tile.is-used { opacity: 0.4; cursor: default; }
.gg-tile.is-used:hover { border-color: var(--line); background: #fffdf8; }
/* scouted roots pinned onto a word — an italic etymon chip, matching the via labels */
.gg-tile.has-pins { border-color: #d8c39a; background: #fffdf6; }
.gg-pins { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.22rem; }
.gg-pin { font-family: var(--serif); font-style: italic; font-size: 0.62rem; line-height: 1.3; color: #7a5a12;
  background: #f6ecd4; border: 1px solid #e0c98f; border-radius: 999px; padding: 0.06rem 0.4rem; text-decoration: none; }

/* ---- hints & tutorial highlights (blue = guidance, distinct from green/amber/red) ---- */
.gg-node.is-lead { border-color: #2f7fce; box-shadow: 0 0 0 2px rgba(55,138,221,0.28); }
.gg-tile.is-cand { border-color: #2f7fce; background: #eaf2fc; box-shadow: 0 0 0 2px rgba(55,138,221,0.22); }
.gg-tile.is-dim { opacity: 0.38; }
.gg-tile.is-target { border-color: #2f7fce; background: #eaf2fc; animation: gg-pulse 1.3s ease-in-out infinite; }
.gg-node.is-finish.is-target { animation: gg-pulse 1.3s ease-in-out infinite; }
@keyframes gg-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(55,138,221,0.0); } 50% { box-shadow: 0 0 0 5px rgba(55,138,221,0.3); } }
@media (prefers-reduced-motion: reduce) { .gg-tile.is-target, .gg-node.is-finish.is-target { animation: none; box-shadow: 0 0 0 3px rgba(55,138,221,0.3); } }

/* tutorial chrome */
.gg-tut-badge { display: inline-block; font-family: var(--sans); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #2f7fce; border: 1.5px solid #2f7fce; border-radius: 999px; padding: 0.05rem 0.45rem; margin-right: 0.3rem; vertical-align: middle; }
.gg-tut-say { display: block; font-size: 0.95rem; line-height: 1.5; }
.gg-tut-ctl { display: block; margin-top: 0.7rem; }

/* welcome gate — stacked, full-width choices */
.modal-welcome { text-align: center; }
.modal-actions-stack { flex-direction: column; gap: 0.55rem; }
.modal-actions-stack .btn { width: 100%; }

@media (max-width: 480px) {
  .gg-goal-ends { font-size: 0.68rem; }
  .gg-goal-h { font-size: 0.66rem; }
  .gg-tile { font-size: 0.86rem; padding: 0.36rem 0.55rem; }
}

/* ===== Home — game directory ===== */
header h1 a { color: inherit; text-decoration: none; }
.home-intro { text-align: center; font-family: var(--sans); color: var(--muted); font-size: 0.95rem; margin: 0.3rem 0 0; }
.game-grid { display: grid; grid-template-columns: 1fr; gap: 0.9rem; max-width: 34rem; margin: 1.3rem auto 0; }
@media (min-width: 560px) { .game-grid { grid-template-columns: 1fr 1fr; } }
.game-card { display: flex; flex-direction: column; border: 1.5px solid var(--ink); background: #fffdf8; color: var(--ink); text-decoration: none; overflow: hidden; transition: transform 0.09s ease, box-shadow 0.12s ease; }
.game-card:hover { transform: translateY(-2px); box-shadow: 0 5px 0 rgba(20,17,11,0.12); }
.game-card:active { transform: translateY(0); box-shadow: none; }
.game-card-art { display: block; height: 96px; background-size: cover; background-position: center; border-bottom: 1.5px solid var(--ink); }
.game-card-body { padding: 0.7rem 0.9rem 0.85rem; }
.game-card-label { display: block; font-family: var(--serif, Georgia, serif); font-size: 1.2rem; font-weight: 700; line-height: 1.1; }
.game-card-tag { display: block; font-family: var(--sans); font-size: 0.8rem; color: var(--muted); margin-top: 0.2rem; line-height: 1.35; }
.game-card .beta-badge { margin-left: 0.4rem; vertical-align: middle; }
/* a thin per-game colour accent under the art */
.game-card.m-graft  .game-card-art { box-shadow: inset 0 -3px 0 var(--c-trail, #1f2ae0); }
.game-card.m-dig    .game-card-art { box-shadow: inset 0 -3px 0 var(--c-dig); }
.game-card.m-grow   .game-card-art { box-shadow: inset 0 -3px 0 var(--c-grow); }
.game-card.m-germ   .game-card-art { box-shadow: inset 0 -3px 0 var(--c-germ); }
.game-card.m-graftg .game-card-art { box-shadow: inset 0 -3px 0 #1f2ae0; }

/* Graft action bar — clearly set apart from the board tiles (these are controls, not words) */
#gg-actions { margin-top: 0.5rem; padding-top: 0.9rem; border-top: 1px solid var(--hair); gap: 0.6rem; }
#gg-actions .btn { font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0.02em; padding: 0.45rem 1.1rem; }
#btn-hint { color: #2f7fce; border-color: #2f7fce; background: #eaf2fc; }
#btn-hint:hover { background: #dcebfb; }

/* ---- Branch (prototype): generative family-tree game ---- */
.root-pill.trunk { background: var(--tile); color: var(--ink); border-color: var(--ink); }

#branch-input {
  flex: 1;
  font-family: Georgia, serif;
  font-size: 1.05rem;
  padding: 0.55rem 0.9rem;
  border-radius: 0;
  border: 1.5px solid var(--line);
  background: #fffdf8;
  color: var(--ink);
  min-width: 0;
}
#branch-input:focus { outline: none; border-color: var(--ink); }
#branch-input.shake { animation: shake 0.35s ease; }

#branch-tree { display: flex; flex-direction: column; gap: 0.7rem; }

.branch-sec { border: 1.5px solid var(--line); background: #fffdf8; }
.branch-sec:not(.lit) .branch-head { filter: grayscale(0.7); opacity: 0.65; }

.branch-head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--sans); font-size: 0.74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0.4rem 0.6rem; border-bottom: 1.5px solid;
}
.branch-tally { font-family: Georgia, serif; letter-spacing: 0; opacity: 0.85; }

.branch-body { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.5rem; }

.branch-empty { font-size: 0.85rem; color: var(--muted); font-style: italic; text-align: center; padding: 0.3rem; }

.branch-rem { font-size: 0.9rem; color: var(--muted); letter-spacing: 0.15em; }
.branch-rem span { font-size: 0.75rem; letter-spacing: 0; margin-left: 0.3rem; font-style: italic; }


/* ---- Branch β (prototype): sort words back to their roots ---- */
.proto-switch { text-align: center; font-size: 0.82rem; color: var(--muted); margin: -0.2rem 0 0.9rem; }
.proto-switch a { color: var(--accent, #1f2ae0); }

.beta-status { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; color: var(--muted); margin-bottom: 0.7rem; }
.beta-status .gg-life { font-size: 1rem; }

.beta-bins { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin-bottom: 0.9rem; }
.beta-bin { display: flex; flex-direction: column; justify-content: flex-end; border: 1.5px solid var(--line); background: #fffdf8; min-height: 7.5rem; }
.beta-canopy { display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 0.45rem; align-content: flex-start; flex: 1; }
.beta-drop { font-size: 0.78rem; color: var(--muted); font-style: italic; margin: auto; }
.beta-trunk { text-align: center; font-size: 0.82rem; padding: 0.35rem; border-top: 1.5px solid var(--line); background: var(--tile); }
.beta-trunk em { font-family: Georgia, serif; font-style: italic; font-weight: 700; }

.beta-pool { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin-bottom: 1rem; min-height: 2rem; }

.beta-tile {
  font-family: var(--mono, "Courier New", monospace);
  font-size: 0.92rem; font-weight: 600;
  padding: 0.4rem 0.6rem; border: 1.5px solid; border-radius: 0;
  cursor: pointer; appearance: none;
}
.beta-tile.sel { box-shadow: 0 0 0 3px var(--ink); }
.beta-tile.locked { cursor: default; box-shadow: inset 0 0 0 2px rgba(20,17,11,0.45); }
.beta-tile.wrong { animation: shake 0.35s ease; }

.beta-fam { margin: 0.5rem 0; }
.beta-fam-root { font-size: 0.9rem; margin-bottom: 0.25rem; }
.beta-fam-root em { font-family: Georgia, serif; font-weight: 700; }
.beta-fam-words { display: flex; flex-wrap: wrap; gap: 0.3rem; }

/* ---- Branch β v2: cognate-grouping (Connections-style) ---- */
.beta-mistakes { font-size: 0.85rem; color: var(--muted); }
.beta-dot { color: var(--line); }
.beta-dot.used { color: #c0392b; }

.beta-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; margin-bottom: 0.5rem; }
.beta-grid .beta-tile {
  width: 100%; text-align: center; padding: 0.6rem 0.15rem;
  font-size: 0.8rem; background: #fffdf8; color: var(--ink); border-color: var(--line);
  overflow: hidden; min-width: 0;
}
.beta-grid .beta-tile.sel { background: var(--ink); color: var(--bg); border-color: var(--ink); box-shadow: none; }

.beta-msg { min-height: 1.2rem; text-align: center; font-weight: 600; font-size: 0.9rem; color: var(--ink); margin: 0.2rem 0 0.7rem; }

.beta-solved { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.5rem; }
.beta-solved:empty { margin: 0; }
.beta-solved-row { border: 1.5px solid; padding: 0.4rem 0.55rem; }
.beta-solved-head { font-size: 0.8rem; font-weight: 700; display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.beta-solved-head em { font-family: Georgia, serif; font-style: italic; }
.beta-solved-head b { font-family: Georgia, serif; }
.beta-missed { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: #9a6a0a; margin-left: auto; }
.beta-solved-tiles { display: flex; flex-wrap: wrap; gap: 0.25rem 0.7rem; margin-top: 0.25rem; }
.beta-stile { font-family: var(--mono, "Courier New", monospace); font-size: 0.82rem; }
.beta-stile i { font-style: normal; font-family: var(--sans); font-size: 0.64rem; opacity: 0.7; margin-left: 0.15rem; }

/* Branch β two-step: step header + step-1 reference during step 2 */
.beta-step { font-size: 0.8rem; font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: 0.03em; }
.beta-ref { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.6rem; opacity: 0.8; }
.beta-ref:empty { margin: 0; }
.beta-ref-cap { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.beta-ref-row { font-size: 0.76rem; border: 1px dashed var(--line); padding: 0.25rem 0.45rem; }
.beta-ref-row em { font-family: Georgia, serif; font-style: italic; }
.beta-ref-row b { font-family: Georgia, serif; }
.beta-ref-row .beta-stile { font-size: 0.74rem; }

/* Branch β: the two-axis matrix (rows = roots, columns = languages) */
.beta-prompt { text-align: center; font-size: 0.88rem; color: var(--ink); margin: 0.1rem 0 0.7rem; }
.beta-matrix { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 0.6rem; }
.beta-matrix:empty { margin: 0; }
.beta-colhead { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }
.beta-colhead span { text-align: center; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); min-height: 0.85rem; }
.beta-mrow { display: flex; flex-direction: column; gap: 0.25rem; }
.beta-mrow-label { font-size: 0.72rem; font-weight: 700; }
.beta-mrow-label em { font-family: Georgia, serif; font-style: italic; }
.beta-mrow-label b { font-family: Georgia, serif; }
.beta-mrow-cells { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }
.beta-cell {
  font-family: var(--mono, "Courier New", monospace); font-size: 0.78rem;
  padding: 0.5rem 0.15rem; text-align: center; border: 1.5px solid; border-radius: 0;
  cursor: pointer; overflow: hidden; min-width: 0;
}
.beta-cell.static { cursor: default; }
.beta-cell.sel { box-shadow: 0 0 0 3px var(--ink); }
.beta-cell.col-locked { box-shadow: inset 0 0 0 2px rgba(20,17,11,0.32); }

/* Branch β: tree-level tag on a solved family */
.beta-level { font-family: var(--sans); font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.05rem 0.3rem; border: 1px solid currentColor; border-radius: 0; opacity: 0.85; }

/* ============================================================
   Branch γ — the brick wall (trace a lineage PIE → English)
   ============================================================ */
.bw-wall { position: relative; display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.4rem; }
.bw-paths { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: visible; }
/* course title lives in a fixed LEFT column so connector lines (centre-right)
   never cross it */
.bw-row { position: relative; z-index: 1; display: grid; grid-template-columns: 6rem 1fr; align-items: center; column-gap: 0.6rem; }
.bw-row + .bw-row { padding-top: 0.4rem; border-top: 1px dashed var(--line); }
.bw-label { font-family: var(--sans); font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); text-align: left; line-height: 1.2; }
.bw-note { display: block; font-family: var(--serif); font-style: italic; font-size: 0.6rem; letter-spacing: 0; text-transform: none; color: var(--muted); margin: 0.15rem 0 0; font-weight: 400; }
.bw-bricks { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0.35rem; }
.bw-row.odd .bw-bricks { padding-left: 1.1rem; }   /* masonry stagger */

/* once a tile is chosen, the row becomes a centred SPINE: the pick sits dead-centre
   (same x in every row → the trace is a clean vertical line) and the rest slide aside */
.bw-bricks.bw-spine { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.35rem; padding-left: 0; }
.bw-spine .bw-aside { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; justify-content: flex-end; }
.bw-spine .bw-aside-r { justify-content: flex-start; }
.bw-spine .bw-aside .bw-brick, .bw-spine .bw-aside .bw-skip { opacity: 0.6; }   /* dim the set-aside tiles so the spine reads */
.bw-spine .bw-pick { display: flex; justify-content: center; }
.bw-spine .bw-pick .bw-brick, .bw-spine .bw-pick .bw-skip { animation: bw-pop 0.22s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes bw-pop { from { transform: translateY(3px) scale(0.9); } to { transform: none; } }

.bw-brick {
  position: relative; z-index: 1;
  font: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 0.05rem;
  min-width: 4.2rem; padding: 0.4rem 0.62rem;
  background: var(--paper); color: var(--tile-ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transition: transform 0.1s ease, box-shadow 0.12s ease;
}
.bw-brick:hover:not(:disabled) { transform: translateY(-1.5px); box-shadow: var(--shadow); }
.bw-form { font-family: var(--mono); font-size: 0.92rem; font-weight: 600; line-height: 1.05; }
.bw-stem { font-style: normal; font-size: 0.7rem; color: var(--muted); }
.bw-lang { font-family: var(--sans); font-size: 0.52rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.72; }
.bw-brick.sel { border-color: var(--ink); box-shadow: 0 0 0 3px var(--ink); transform: translateY(-1px); }
.bw-brick.revealed { opacity: 0.55; }
.bw-brick:disabled { cursor: default; }
/* the SKIP tile — pick it for a course your path leaps over (a borrowed route bypasses it) */
.bw-skip {
  position: relative; z-index: 1; font: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 0.05rem;
  min-width: 4.2rem; padding: 0.4rem 0.62rem;
  background: repeating-linear-gradient(135deg, transparent, transparent 5px, rgba(20,17,11,0.04) 5px, rgba(20,17,11,0.04) 10px);
  color: var(--muted); border: 1.5px dashed var(--line); border-radius: var(--radius-sm);
  transition: transform 0.1s ease, box-shadow 0.12s ease;
}
.bw-skip:hover:not(:disabled) { transform: translateY(-1.5px); border-color: var(--muted); }
.bw-skip.sel { border-color: var(--ink); color: var(--ink); box-shadow: 0 0 0 3px var(--ink); transform: translateY(-1px); }
.bw-skipghost { font-size: 0.95rem; line-height: 1; opacity: 0.8; }
.bw-skiplab { font-family: var(--sans); font-size: 0.52rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }

/* ============================================================
   Mint (/mint) — coin words from roots
   ============================================================ */
.mt-goal { margin-bottom: 0.9rem; }
.mt-goal-top { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; }
.mt-lives { letter-spacing: 0.08em; white-space: nowrap; }
.mt-rank { display: flex; flex-direction: column; gap: 0.02rem; min-width: 0; }
.mt-rank-eyebrow { font-family: var(--sans); font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); }
.mt-tier { font-family: var(--serif); font-size: clamp(1.3rem, 6vw, 1.7rem); font-weight: 800; line-height: 1.02;
  color: #a8760f; letter-spacing: -0.01em; }
.mt-tier-pop { animation: mt-tierpop 0.7s cubic-bezier(0.2, 1.4, 0.4, 1); transform-origin: left center; }
@keyframes mt-tierpop { 0% { transform: scale(1); } 35% { transform: scale(1.16); color: #d89a1e; } 100% { transform: scale(1); } }
.mt-tally { font-family: var(--sans); font-size: 0.78rem; color: var(--muted); margin-top: 0.25rem; }
.mt-tally b { color: var(--ink); font-size: 0.95rem; }
.mt-next b { color: #a8760f; }
.mt-next-max { color: #a8760f; font-weight: 700; }
/* a line of coin-slots that fill as you coin — like Spelling Bee's rank track, but for mint */
.mt-dots { display: flex; flex-wrap: wrap; align-items: center; gap: 0.36rem; margin: 0.55rem 0 0.15rem; }
.mt-dot { width: 0.62rem; height: 0.62rem; border-radius: 999px; background: transparent;
  border: 1.5px solid color-mix(in srgb, #b8923f 55%, transparent); box-sizing: border-box; transition: background 0.2s, border-color 0.2s; }
.mt-dot.on { background: radial-gradient(circle at 50% 32%, #f7e6b6, #d9ab52); border-color: #b8923f;
  box-shadow: inset 0 0 0 1px #f0dca6, 0 1px 1.5px rgba(20,17,11,0.18); }
/* a rank checkpoint — a larger diamond so you can see "next badge is N dots away" */
.mt-dot-ckpt { width: 0.86rem; height: 0.86rem; border-radius: 3px; transform: rotate(45deg); border-width: 2px; }
.mt-dot-pop { animation: mt-dotpop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes mt-dotpop { 0% { transform: scale(0.2); } 55% { transform: scale(1.5); } 100% { transform: scale(1); } }
.mt-cite { color: var(--muted); font-style: italic; font-size: 0.85em; }

/* the press — where you assemble + the live entry */
.mt-press { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(58%, 13rem); display: flex; flex-direction: column; gap: 0.45rem; z-index: 3; }
.mt-press .btn-primary { width: 100%; }
.mt-build { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; min-height: 2.6rem; padding: 0.3rem; border-bottom: 1.5px dashed var(--line); }
.mt-placeholder { color: var(--muted); font-style: italic; font-size: 0.9rem; }
.mt-plus { color: var(--muted); font-weight: 700; }
.mt-chip { font: inherit; cursor: pointer; display: inline-flex; flex-direction: column; align-items: center; line-height: 1.05; padding: 0.28rem 0.5rem; border: 1.5px solid; border-radius: 5px; }
.mt-cf { font-family: var(--mono); font-weight: 700; font-size: 0.92rem; }
.mt-cg { font-family: var(--sans); font-size: 0.5rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.7; }
.mt-chip.mt-root { background: #e3efe8; border-color: #2f7d4f; color: #1d5836; }
.mt-chip.mt-end  { background: #f6ecd6; border-color: #9a6b1a; color: #6e4c12; }

/* dictionary entry (live preview + collected) */
.mt-entry { padding: 0.7rem 0.2rem 0.2rem; min-height: 3rem; }
.mt-entry-empty { color: var(--muted); font-style: italic; font-size: 0.86rem; }
.mt-card { padding: 0.5rem 0; }
.mt-card-live { }
.mt-word { font-family: var(--serif); font-size: 1.3rem; font-weight: 700; }
.mt-pos { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 0.9rem; color: var(--muted); margin-left: 0.2rem; }
.mt-def { font-family: var(--serif); font-size: 1rem; margin-top: 0.15rem; }
.mt-etym { font-family: var(--sans); font-size: 0.68rem; color: var(--muted); margin-top: 0.25rem; letter-spacing: 0.01em; }
.mt-seal { font-family: var(--sans); font-size: 0.56rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #9a6b1a; border: 1.5px solid #cdab63; border-radius: 999px; padding: 0.08rem 0.4rem; margin-left: 0.45rem; vertical-align: middle; white-space: nowrap; }
.mt-card-real .mt-word { color: #6e4c12; }

.mt-msg { min-height: 1.2rem; margin-top: 0.4rem; font-size: 0.84rem; }
.mt-warn { color: #a8351d; }
.mt-ok { color: #1d5836; }

.mt-actions { display: flex; gap: 0.5rem; margin-top: 0.7rem; }
.mt-actions .btn-primary { margin-left: auto; }
.mt-icon { font-size: 1rem; }

/* typed-input row */
.mt-input { width: 100%; min-width: 0; text-align: center; font-family: var(--mono); font-size: 1rem; font-weight: 600; padding: 0.5rem 0.5rem; border: 1.5px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); box-shadow: 0 2px 8px rgba(20,17,11,0.1); }
.mt-input::placeholder { font-family: var(--sans); font-weight: 400; color: var(--muted); font-size: 0.9rem; }
.mt-input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 14%, transparent); }
.mt-full { color: #9a6b1a; font-weight: 700; }

/* rack of available morphemes (reference + tap-to-insert) */
/* the mint dial — the day's roots laid in a ring of coins around the central press
   (reference only; you type, you don't tap) */
.mt-ring { position: relative; height: 20.5rem; max-width: 25rem; margin: 0.6rem auto 0.4rem; }
.mt-coins { position: absolute; inset: 0; }
.mt-coin { position: absolute; transform: translate(-50%, -50%) rotate(var(--r, 0deg)); transform-origin: center;
  display: inline-flex; flex-direction: column; align-items: center; line-height: 1.05; white-space: nowrap;
  padding: 0.36rem 0.62rem; border-radius: 999px; border: 1.5px solid #b8923f; color: #5f4611;
  background: radial-gradient(circle at 50% 32%, #fbf3dc, #efdfb6);
  box-shadow: inset 0 0 0 1.5px #e9d6a4, 0 2px 2px rgba(20,17,11,0.16); z-index: 1; cursor: default; }
.mt-tf { font-family: var(--mono); font-weight: 700; font-size: 0.84rem; }
.mt-tg { font-family: var(--sans); font-size: 0.46rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.72; margin-top: 0.05rem; }
@media (max-width: 420px) { .mt-ring { height: 19rem; } .mt-coin { padding: 0.32rem 0.5rem; } .mt-tf { font-size: 0.78rem; } .mt-tg { font-size: 0.44rem; } }

/* your coinages — each minted word kept as a little coin chip (no definition; the
   meaning is yours to ponder) */
.mt-shelf { margin-top: 1.5rem; }
.mt-shelf-h { font-family: var(--sans); font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 0.8rem; margin-bottom: 0.2rem; }
.mt-coinlist { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.55rem; }
.mt-card-word { display: inline-flex; }
.mt-card-word .mt-word { font-family: var(--serif); font-weight: 700; font-size: 0.95rem; color: #5f4611; border: 1.5px solid #b8923f; border-radius: 999px; padding: 0.26rem 0.72rem;
  background: radial-gradient(circle at 50% 30%, #fbf3dc, #efdfb6); box-shadow: inset 0 0 0 1.5px #e9d6a4; }
.mt-card.mt-justminted { animation: mt-stamp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes mt-stamp { 0% { opacity: 0; transform: scale(1.18) rotate(-3deg); } 60% { opacity: 1; } 100% { transform: scale(1); } }
/* the two tokens that struck the word flare like a die stamping metal */
.mt-coin.mt-struck { animation: mt-strike 0.62s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 2; }
@keyframes mt-strike {
  0% { transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(1); box-shadow: inset 0 0 0 1.5px #e9d6a4, 0 2px 2px rgba(20,17,11,0.16); }
  35% { transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(1.22);
    background: radial-gradient(circle at 50% 32%, #fff7dd, #f4d888);
    box-shadow: inset 0 0 0 1.5px #fff1c2, 0 0 0 4px rgba(216,154,30,0.35), 0 3px 8px rgba(20,17,11,0.2); }
  100% { transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(1); box-shadow: inset 0 0 0 1.5px #e9d6a4, 0 2px 2px rgba(20,17,11,0.16); }
}

.mt-share-card { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem; margin: 0.5rem 0; }
.mt-chiplet { font-family: var(--serif); font-weight: 700; font-size: 0.9rem; background: #fbf3dc; border: 1.5px solid #cbab63; color: #5f4611; border-radius: 999px; padding: 0.22rem 0.62rem; }

/* ---- tailored solve reactions — a different whimsy per game ---- */
@keyframes dig-unearth { 0% { transform: translateY(5px) scale(0.88); } 55% { transform: translateY(-2px) scale(1.07); } 100% { transform: none; } }
@keyframes germ-bloom { 0% { transform: scale(0.8); } 55% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes grow-in { 0% { transform: scale(0.9); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes graft-take { 0% { transform: scale(0.95); opacity: 0.3; } 60% { transform: scale(1.03); } 100% { transform: none; opacity: 1; } }
.slot.just-locked { animation: dig-unearth 0.42s cubic-bezier(0.34, 1.56, 0.64, 1); }   /* Dig: the piece surfaces */
.seg.just-bloom { animation: germ-bloom 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }        /* Germinate: the part blooms */
.leaf.just-grew { animation: grow-in 0.42s cubic-bezier(0.22, 1, 0.36, 1); transform-origin: left center; } /* Grow: a leaf grows in from the stem — a calm, confident settle, not a slam */
.gg-found-row.just-grafted { animation: graft-take 0.5s cubic-bezier(0.2, 0.9, 0.3, 1); } /* Graft: the graft takes */
@media (prefers-reduced-motion: reduce) {
  .slot.just-locked, .seg.just-bloom, .leaf.just-grew, .gg-found-row.just-grafted,
  .mt-coin.mt-struck, .mt-dot-pop, .grow-fill.just-grew::after { animation: none; }
  .grow-fill { transition: none; }
  .btn.grow-another, .btn.grow-another::before { animation: none; }
}

/* Saturday rest-day intermission (shared across all games) */
.restday { text-align: center; padding: 3rem 1.5rem; }
.restday-mark { font-size: 2.6rem; line-height: 1; }
.restday-title { font-family: var(--serif); font-size: 1.6rem; margin: 0.8rem 0 0.5rem; }
.restday-msg { max-width: 30rem; margin: 0 auto; color: var(--muted); font-size: 1rem; line-height: 1.5; }
.restday-next { margin-top: 1.4rem; font-family: var(--sans); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
/* a just-completed lineage settles down toward the solved list, trace line fading
   with it, then the solution row grows in below */
.bw-brick.bw-floatoff { animation: bw-float 0.62s cubic-bezier(0.4,0,0.2,1) forwards; pointer-events: none; z-index: 3; }
@keyframes bw-float { 30% { opacity: 1; } to { opacity: 0; transform: translateY(26px) scale(0.94); } }
#bw-paths.fade { opacity: 0; transition: opacity 0.62s ease; }
/* shwoomp: light up (grow + gold glow), hold a beat, then collapse down + shrink into the box.
   the higher-specificity selector beats `.bw-spine .bw-pick .bw-brick`'s appear-pop (0,3,0). */
.bw-brick.bw-shwoomp,
.bw-spine .bw-pick .bw-brick.bw-shwoomp { animation: bw-shwoomp 0.8s cubic-bezier(0.5, 0, 0.4, 1) forwards; pointer-events: none; z-index: 5; }
@keyframes bw-shwoomp {
  0%   { transform: none; opacity: 1; box-shadow: var(--shadow-sm); }
  28%  { transform: scale(1.07); opacity: 1; box-shadow: 0 0 0 2px #d8b45f, 0 0 14px 3px rgba(216,180,95,0.65); }
  40%  { transform: scale(1.07); box-shadow: 0 0 0 2px #d8b45f, 0 0 14px 3px rgba(216,180,95,0.6); }
  100% { transform: translateY(34px) scale(0.38); opacity: 0; box-shadow: 0 0 18px 4px rgba(216,180,95,0); }
}
#bw-paths.bw-shwoomp { animation: bw-paths-shwoomp 0.8s ease forwards; }
@keyframes bw-paths-shwoomp { 0% { opacity: 1; } 35% { opacity: 1; filter: drop-shadow(0 0 4px rgba(216,180,95,0.85)); } 100% { opacity: 0; filter: none; } }
/* the green box grows in to "catch" the collapsing path, with a gentle overshoot */
.beta-solved-row.bw-justsolved { animation: bw-rowin 0.55s cubic-bezier(0.2,0.7,0.2,1) both; }
@keyframes bw-rowin { 0% { opacity: 0; transform: translateY(18px) scale(0.96); } 70% { transform: translateY(-2px) scale(1.012); } 100% { opacity: 1; transform: none; } }

/* the puzzle's shape, stated up front so structure isn't guessed */
.bw-shape { font-family: var(--serif); font-style: italic; font-size: 0.82rem; color: var(--muted); text-align: center; margin: 0 0 0.5rem; }
.bw-shape:empty { margin: 0; }

/* how-many-paths badge on a root brick */
.bw-badge { font-family: var(--sans); font-size: 0.5rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #fff; background: var(--muted); padding: 0.04rem 0.28rem; margin-top: 0.05rem; }
.bw-badge.full { background: var(--c-grow); }

/* running count of lineages left to trace */
.bw-remaining { font-family: var(--sans); font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); text-align: center; min-height: 0.9rem; margin: 0.1rem 0 0.3rem; }
.bw-remaining:empty { margin: 0; min-height: 0; }

/* false-friend decoy, shown only on reveal */
.bw-brick.bw-trap { border-style: dashed; }
.bw-traprow { border-style: dashed !important; }

/* Grimm's-law key in the how-to */
.bw-grimm { margin: 0.7rem 0; padding: 0.55rem 0.65rem; border: 1px solid var(--line); background: #faf7ef; }
.bw-grimm-h { font-family: var(--sans); font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 0.3rem; }
.bw-grimm p { font-size: 0.82rem; margin: 0 0 0.45rem; }
.bw-shifts { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.bw-shift { display: flex; flex-direction: column; align-items: center; font-family: var(--mono); font-size: 0.82rem; font-weight: 700; padding: 0.25rem 0.5rem; border: 1px solid var(--line); background: var(--paper); }
.bw-shift i { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 0.62rem; color: var(--muted); margin-top: 0.12rem; }

/* solved-lineage rows reuse .beta-solved-row; γ extras */
#gam-solved:not(:empty) { margin-top: 1rem; }
.bw-branch { font-family: var(--sans); font-size: 0.55rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.05rem 0.3rem; border: 1px solid currentColor; opacity: 0.8; }
.bw-chain { font-family: var(--mono); font-size: 0.78rem; margin-top: 0.25rem; }
.bw-lnote { font-family: var(--serif); font-style: italic; font-size: 0.72rem; color: var(--muted); margin-top: 0.15rem; }

@media (prefers-reduced-motion: reduce) {
  .bw-brick.bw-floatoff, .bw-brick.bw-shwoomp { animation: none; opacity: 0; }
  #bw-paths.bw-shwoomp { animation: none; opacity: 0; }
  .beta-solved-row.bw-justsolved { animation: none; }
}
@media (max-width: 480px) {
  .bw-row { grid-template-columns: 4.4rem 1fr; column-gap: 0.4rem; }
  .bw-label { font-size: 0.52rem; }
  .bw-brick { min-width: 3.4rem; padding: 0.3rem 0.4rem; }
  .bw-form { font-size: 0.82rem; }
  .bw-row.odd .bw-bricks { padding-left: 0.7rem; }
}

/* ── content pages: archive + learn (crawlable etymology reference) ───────── */
main.content-main { max-width: 640px; }
.page-h1 { font-family: var(--sans); font-size: 1.7rem; font-weight: 800; letter-spacing: -0.01em; margin: 0.2rem 0 0.5rem; }
.page-lead { color: var(--ink); font-size: 1rem; line-height: 1.6; margin: 0 0 1.2rem; }
.page-lead a, .learn-section a, .arc-src { color: #1f2ae0; }

/* archive — one card per excavated word */
.arc-count { color: var(--muted); font-size: 0.85rem; margin: 0 0 1.1rem; text-transform: uppercase; letter-spacing: 0.05em; }
.arc-list { display: flex; flex-direction: column; gap: 0.9rem; }
.arc-word { border: 1.5px solid var(--line); border-radius: 8px; background: #fffdf8; padding: 0.85rem 1rem 0.7rem; }
.arc-head { font-family: var(--mono); font-size: 1.15rem; font-weight: 700; margin: 0 0 0.6rem; }
.arc-lit { font-family: var(--sans); font-size: 0.82rem; font-weight: 400; font-style: italic; color: var(--muted); }
.arc-pieces { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.arc-pieces li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; line-height: 1.4; }
.arc-chip { font-family: var(--mono); font-size: 0.9rem; font-weight: 700; padding: 0.12rem 0.5rem; border-radius: 999px; border: 1.5px solid; }
.arc-gloss { font-size: 0.92rem; color: var(--ink); }
.arc-note { font-size: 0.82rem; color: var(--muted); }
.arc-tell { font-family: var(--serif); font-style: italic; font-size: 0.9rem; color: var(--muted); margin: 0.6rem 0 0; line-height: 1.5; }
.arc-foot { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; margin: 0.7rem 0 0; padding-top: 0.55rem; border-top: 1px dashed var(--line); }
.arc-date { font-size: 0.76rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.arc-src { font-size: 0.8rem; text-decoration: none; white-space: nowrap; }
.arc-src:hover { text-decoration: underline; }

/* learn — the field guide */
.learn-section { margin: 0 0 1.8rem; }
.learn-section h2 { font-family: var(--sans); font-size: 1.2rem; font-weight: 800; margin: 0 0 0.5rem; }
.learn-section p { line-height: 1.6; margin: 0 0 0.7rem; }
.learn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.7rem; margin-top: 0.9rem; }
.learn-card { border: 1.5px solid; border-radius: 8px; padding: 0.7rem 0.85rem; }
.learn-card-name { font-size: 1rem; font-weight: 800; margin: 0 0 0.3rem; }
.learn-card-blurb { font-size: 0.9rem; line-height: 1.45; margin: 0 0 0.45rem; }
.learn-card-cues { font-size: 0.8rem; line-height: 1.4; margin: 0; opacity: 0.85; }
.learn-table { width: 100%; border-collapse: collapse; margin: 0.6rem 0 0.8rem; font-size: 0.92rem; }
.learn-table th, .learn-table td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--line); }
.learn-table th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.learn-shift { font-family: var(--mono); font-weight: 700; white-space: nowrap; }
.learn-back { margin-top: 1.5rem; }
.learn-back a { color: #1f2ae0; text-decoration: none; }

/* ── homepage: intro + "what you'll learn" ───────────────────────────────── */
.home-about { margin: 2rem 0 0.5rem; text-align: left; }
.home-about h2 { font-family: var(--sans); font-size: 1.15rem; font-weight: 800; margin: 0 0 0.5rem; }
.home-about p { line-height: 1.6; margin: 0 0 0.8rem; }
.home-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.home-link { color: #1f2ae0; text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.home-link:hover { text-decoration: underline; }

/* contact page — the email, made prominent */
.contact-email { font-family: var(--mono); font-size: 1.15rem; margin: 0.3rem 0 1.4rem; }
.contact-email a { color: #1f2ae0; }

/* footer copyright + terms page */
.copyright { width: 100%; margin: 0.85rem 0 0; font-size: 0.72rem; color: var(--muted); letter-spacing: 0.03em; }
.terms-updated { color: var(--muted); font-size: 0.82rem; margin: 0 0 1.1rem; }
.terms-foot { margin-top: 1.5rem; color: var(--muted); }

/* persistent share button, directly below the game box */
.share-bar { display: flex; flex-direction: column; align-items: center; gap: 0.85rem; margin: 1rem auto 0.4rem; max-width: 34rem; }
.share-bar .btn { min-width: 12rem; }

/* Shared share artifact — spoiler-free, branded result card (the thing you screenshot) */
.share-card { display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
  padding: 0.95rem 1.5rem 1.1rem; border: 1px solid var(--line); border-radius: 14px;
  background: var(--paper); box-shadow: 0 1px 0 var(--line); width: fit-content;
  max-width: 100%; margin: 0 auto; text-align: center; box-sizing: border-box; }
.share-card-head { font-family: var(--sans); font-size: 0.7rem; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.share-card-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 15rem; }
.dt { width: 28px; height: 28px; border-radius: 7px; display: inline-block;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,0.12); }
.dt-clean { background: #639922; }    /* solved unaided — Rootles green */
.dt-scrappy { background: #e0a52e; }  /* solved, but cost a life or hint — amber */
.dt-missed { background: #b98a5e; }   /* revealed to you — clay */
.share-card-sub { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2rem 0.7rem;
  font-family: var(--sans); font-size: 0.82rem; font-weight: 700; }
.dcb { color: var(--muted); }
.dcb.ok { color: #4e7d13; }
.dcb.no { color: #c0503a; }
/* the results modal centers the same card */
#modal-grid:not(:empty) { display: flex; justify-content: center; }

/* per-game explainer section (crawlable content below each game) */
.game-more { max-width: 34rem; margin: 2.4rem auto 0.5rem; text-align: left; border-top: 1px solid var(--line); padding-top: 1.5rem; }
.game-more h2 { font-family: var(--sans); font-size: 1.15rem; font-weight: 800; margin: 0 0 0.6rem; }
.game-more p { line-height: 1.62; margin: 0 0 0.85rem; color: var(--ink); font-size: 0.97rem; }
.game-more a { color: #1f2ae0; }
/* learn page lists */
.learn-list { margin: 0.5rem 0 0.9rem; padding-left: 1.2rem; line-height: 1.75; }
.learn-list li { margin-bottom: 0.25rem; }