/* Teasel: seed-packet catalogue. Tokens first, then shell, then shared game parts.
   Game-specific rules live at the bottom, one block per game. */

@font-face { font-family: 'Zilla Slab'; font-weight: 600; font-display: swap; src: url(../fonts/zilla-slab-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Zilla Slab'; font-weight: 700; font-display: swap; src: url(../fonts/zilla-slab-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Figtree'; font-weight: 400; font-display: swap; src: url(../fonts/figtree-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Figtree'; font-weight: 600; font-display: swap; src: url(../fonts/figtree-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Figtree'; font-weight: 800; font-display: swap; src: url(../fonts/figtree-latin-800-normal.woff2) format('woff2'); }

:root {
  --paper: #F3ECDD;
  --paper-deep: #E8DEC8;
  --card: #FBF7EE;
  --ink: #2A2119;
  --ink-soft: #5E5246;
  --line: #CDBFA5;
  --line-strong: #8C7C66;
  --tomato: #AC3F29;
  --leaf: #3F6B35;
  --mustard: #835E09;
  --mustard-bright: #C99418;
  --delphinium: #3F6E9A;
  --beetroot: #7B3A5C;
  --on-ink: #FBF7EE;
  --good: #3F6B35;
  --bad: #AC3F29;
  --accent: var(--leaf);
  --accent-wash: color-mix(in srgb, var(--accent) 14%, var(--card));
  --radius: 10px;
  --shadow: 0 1px 2px rgb(42 33 25 / 0.08), 0 6px 16px -6px rgb(42 33 25 / 0.18);
  --display: 'Zilla Slab', 'Rockwell', Georgia, serif;
  --text: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1C1712; --paper-deep: #26201A; --card: #2A231C; --ink: #F1E9DA; --ink-soft: #C3B6A3;
    --line: #4A3F33; --line-strong: #7D6E5B; --tomato: #E0765C; --leaf: #86B676; --mustard: #E2B54A;
    --mustard-bright: #E2B54A; --delphinium: #84ADD6; --beetroot: #CC86A9; --on-ink: #1C1712;
    --good: #86B676; --bad: #E0765C;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 18px -8px rgb(0 0 0 / 0.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #1C1712; --paper-deep: #26201A; --card: #2A231C; --ink: #F1E9DA; --ink-soft: #C3B6A3;
  --line: #4A3F33; --line-strong: #7D6E5B; --tomato: #E0765C; --leaf: #86B676; --mustard: #E2B54A;
  --mustard-bright: #E2B54A; --delphinium: #84ADD6; --beetroot: #CC86A9; --on-ink: #1C1712;
  --good: #86B676; --bad: #E0765C; color-scheme: dark;
}

.ink-tomato { --accent: var(--tomato); }
.ink-leaf { --accent: var(--leaf); }
.ink-mustard { --accent: var(--mustard); }
.ink-delphinium { --accent: var(--delphinium); }
.ink-beetroot { --accent: var(--beetroot); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; /* keeps focused squares clear of the sticky title bar */ }
button, a, [role="button"] { touch-action: manipulation; }
.skip { position: absolute; left: 8px; top: -100px; z-index: 60; padding: 0.6rem 1rem; border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 600; }
.skip:focus { top: max(8px, env(safe-area-inset-top)); }
@media (hover: hover) and (pointer: fine) {
  button.cell:not(:disabled):hover, .hcell:hover, .letter:hover { filter: brightness(0.96); }
}
body {
  margin: 0; min-height: 100dvh; background: var(--paper); color: var(--ink);
  font: 400 1rem/1.5 var(--text); accent-color: var(--accent); caret-color: var(--accent);
  scrollbar-color: var(--line-strong) var(--paper);
  -webkit-tap-highlight-color: transparent;
}
::selection { background: color-mix(in srgb, var(--mustard-bright) 45%, transparent); }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.small { font-size: 0.875rem; color: var(--ink-soft); }
.loading { padding: 3rem 1rem; text-align: center; color: var(--ink-soft); font-family: var(--display); font-size: 1.25rem; }

/* ---- Home ---------------------------------------------------------------- */
.masthead { padding: clamp(2rem, 6vw, 4rem) 16px 1.5rem; border-bottom: 1px solid var(--line); }
.masthead-inner { max-width: 1080px; margin: 0 auto; }
.wordmark { font-size: clamp(3.5rem, 12vw, 6rem); letter-spacing: -0.03em; color: var(--leaf); line-height: 0.9; }
.masthead-line { font-size: clamp(1.05rem, 2.6vw, 1.3rem); margin: 0.75rem 0 0; max-width: 40ch; }
.issue {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0 0 1rem; padding: 0.4rem 0;
  border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); font-weight: 600; font-size: 0.9rem; font-variant-numeric: tabular-nums;
}

.catalogue { max-width: 1080px; margin: 0 auto; padding: 0 16px 3rem; }
.family { padding-top: 2.25rem; }
.family-name { font-size: 1.5rem; margin-bottom: 0.9rem; display: flex; align-items: baseline; gap: 0.75rem; }
.family-name::after { content: ''; flex: 1; border-bottom: 1px dashed var(--line-strong); transform: translateY(-0.3em); }
.packets { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
@media (min-width: 720px) { .packets { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; } }

.packet {
  display: flex; flex-direction: column; text-decoration: none; background: var(--card);
  border: 1px solid var(--line); border-radius: 6px 6px 3px 3px; box-shadow: var(--shadow); overflow: hidden;
  transition: transform 160ms cubic-bezier(.2,.8,.2,1), box-shadow 160ms;
}
.packet:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgb(42 33 25 / 0.1), 0 14px 24px -10px rgb(42 33 25 / 0.3); }
.packet:active { transform: translateY(0); }
.packet-band {
  background: var(--accent); color: var(--on-ink); padding: 0.9rem 0.85rem 0.9rem; min-height: 3.6rem; display: flex; align-items: flex-end;
  /* a deckle of little scallops along the band's bottom edge */
  -webkit-mask: radial-gradient(6px at 50% calc(100% + 1px), #0000 98%, #000) 50% / 14px 100%;
  mask: radial-gradient(6px at 50% calc(100% + 1px), #0000 98%, #000) 50% / 14px 100%;
  padding-bottom: 1.25rem;
}
.packet-name { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(1.1rem, 4.8vw, 1.6rem); line-height: 1; text-transform: uppercase; letter-spacing: 0.01em; overflow-wrap: anywhere; }
.packet-band { padding-bottom: 2.4rem; }
/* the board drawing sits in an arched window cut into the band, like a seed packet's picture */
.packet-art {
  position: relative; display: grid; place-items: center; width: min(100% - 24px, 168px); margin: -2.2rem auto 0; padding: 10px 8px 8px; color: var(--accent);
  background: var(--paper); border: 1.5px solid var(--accent); border-radius: 999px 999px 8px 8px;
}
.emblem { width: 100%; max-width: 108px; height: auto; aspect-ratio: 80 / 56; }
.packet-variety { padding: 0.35rem 0.85rem 0.1rem; color: var(--ink); flex: 1; font-size: 0.9rem; line-height: 1.3; }
.packet-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem 0.4rem; padding: 0.4rem 0.85rem 0.75rem; font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); }
.packet-foot.done { color: var(--good); }
.packet-streak { flex-basis: 100%; font-weight: 400; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.site-foot { max-width: 1080px; margin: 0 auto; padding: 2rem 16px 3rem; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 0.9rem; }
.site-foot p { margin: 0.25rem 0; }

.prose { max-width: 68ch; margin: 0 auto; padding: 2rem 16px; }
.prose h1 { font-size: 2.5rem; margin-bottom: 1rem; }
.prose h2 { font-size: 1.5rem; margin: 2rem 0 0.5rem; }
.prose li { margin-bottom: 0.5rem; }

/* ---- Game screen ----------------------------------------------------------- */
.topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; display: grid; grid-template-columns: 44px 1fr auto 44px 44px; align-items: center; gap: 8px;
  padding: 6px 8px 16px; padding-top: max(6px, env(safe-area-inset-top)); background: var(--accent); color: var(--on-ink);
  /* the same scalloped edge as the packet bands on the catalogue */
  -webkit-mask: radial-gradient(6px at 50% calc(100% + 1px), #0000 98%, #000) 50% / 14px 100%;
  mask: radial-gradient(6px at 50% calc(100% + 1px), #0000 98%, #000) 50% / 14px 100%;
}
.topbar-title { font-size: clamp(1.15rem, 5.4vw, 1.5rem); text-transform: uppercase; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.timer { font-variant-numeric: tabular-nums; font-weight: 600; padding: 0 6px; }
.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: transparent; color: inherit; cursor: pointer;
}
.icon-btn:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
.icon-spacer { width: 44px; }

.game { max-width: 620px; margin: 0 auto; padding: 10px 16px 3rem; }
.mode-line {
  display: flex; justify-content: space-between; gap: 0.25rem 1rem; flex-wrap: wrap; font-size: 0.875rem; font-weight: 600;
  color: var(--ink); margin-bottom: 12px; padding: 0.35rem 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink);
}
.mode-line a { font-weight: 600; color: var(--accent); }
/* Difficulty switch under the puzzle line */
.levels { display: flex; gap: 0; margin: -4px 0 12px; border: 1.5px solid var(--line-strong); border-radius: 999px; overflow: hidden; width: fit-content; max-width: 100%; }
.level { min-height: 44px; padding: 0 1rem; border: 0; background: var(--card); color: var(--ink); font-weight: 600; cursor: pointer; }
.level + .level { border-left: 1px solid var(--line); }
.level:hover { background: var(--paper-deep); }
.level.on { background: var(--ink); color: var(--paper); }
.mode-line .btn { min-height: 36px; padding: 0 0.8rem; font-size: 0.85rem; }
.mode-line { align-items: center; }
.resumed { font-weight: 400; color: var(--ink-soft); }
.notice { margin: 0 0 12px; padding: 0.6rem 0.8rem; border-radius: var(--radius); background: var(--accent-wash); font-size: 0.9rem; }
.board-area {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: 6px 6px 3px 3px; box-shadow: var(--shadow);
  padding: 16px 12px 20px;
}
@media (max-width: 480px) { .game { padding-inline: 10px; } .board-area { padding-inline: 4px; } }
.error { text-align: center; padding: 2rem 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 44px; padding: 0 1rem;
  border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--card); color: var(--ink);
  font-weight: 600; text-decoration: none; cursor: pointer; transition: background 120ms, transform 120ms;
  user-select: none; -webkit-user-select: none;
}
.btn:hover { background: var(--paper-deep); }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-ink); }
.btn.primary:hover { background: color-mix(in srgb, var(--accent) 86%, var(--ink)); }
.btn.quiet { border-color: var(--line); }
.btn.armed { border-color: var(--bad); color: var(--bad); }
.btn.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.status { min-height: 1.5em; text-align: center; color: var(--ink-soft); font-size: 0.95rem; margin: 0; font-variant-numeric: tabular-nums; }
.status strong { color: var(--ink); }

/* Generic square grid used by most boards. */
.grid {
  --cols: 6; display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 4px;
  width: min(100%, var(--max, 440px)); touch-action: none; user-select: none; -webkit-user-select: none;
}
.cell {
  aspect-ratio: 1; display: grid; place-items: center; border-radius: 6px; background: var(--card);
  border: 1px solid var(--line); font-weight: 700; font-size: clamp(1rem, 5vw, 1.5rem); position: relative;
  cursor: pointer; padding: 0; color: var(--ink);
}

/* Sheets (dialogs) */
.sheet {
  border: 0; padding: 0; border-radius: 14px; background: var(--card); color: var(--ink);
  width: min(92vw, 460px); max-height: 85dvh; box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.5);
}
.sheet::backdrop { background: rgb(28 23 18 / 0.5); }
.sheet[open] { animation: sheet-in 220ms cubic-bezier(.2,.8,.2,1); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(12px); } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 8px 10px 20px; background: var(--accent); color: var(--on-ink); }
.sheet-head h2 { font-size: 1.35rem; }
.sheet-body { padding: 16px 20px 22px; overflow: auto; overscroll-behavior: contain; }
.rules { margin: 0; padding-left: 1.25rem; }
.rules li { margin-bottom: 0.6rem; }
.rules li::marker { font-family: var(--display); font-weight: 700; color: var(--accent); }

.result { text-align: center; }
.stamp {
  display: inline-grid; place-items: center; margin: 0.5rem auto 0.25rem; padding: 0.4rem 1.1rem;
  border: 3px double var(--accent); border-radius: 8px; color: var(--accent); transform: rotate(-6deg);
  font-family: var(--display); font-weight: 700; font-size: 1.9rem; text-transform: uppercase; letter-spacing: 0.06em;
  animation: stamp 420ms cubic-bezier(0.16, 1, 0.3, 1) both 120ms;
}
@keyframes stamp { from { opacity: 0; transform: rotate(-6deg) scale(2.2); filter: blur(4px); } }
.result-title { font-family: var(--display); font-size: 1.6rem; font-weight: 700; margin: 0.5rem 0 0; }
.result-time { font-size: 2.2rem; font-weight: 800; font-variant-numeric: tabular-nums; margin: 0.25rem 0 0; }
.result-line { margin: 0.25rem 0; }
.result-streak { margin: 0; color: var(--ink-soft); min-height: 1em; }
.result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 1rem; }

#toast {
  position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translate(-50%, 20px); opacity: 0;
  background: var(--ink); color: var(--paper); padding: 0.6rem 1rem; border-radius: 999px; font-weight: 600;
  transition: opacity 160ms, transform 200ms cubic-bezier(.2,.8,.2,1); pointer-events: none; z-index: 50;
  max-width: calc(100vw - 32px); text-align: center;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Text input used by Common Ground, Trellis and Rootword */
.field {
  min-height: 48px; padding: 0 0.9rem; border: 1.5px solid var(--line-strong); border-radius: var(--radius);
  background: var(--card); color: var(--ink); font: 600 1.1rem var(--text); width: 100%;
}
textarea.field { padding: 0.6rem 0.9rem; font: 400 0.9rem/1.4 var(--text); resize: vertical; }
.field::placeholder { color: var(--ink-soft); font-weight: 400; }
.input-row { display: flex; gap: 8px; width: 100%; }
.input-row .field { flex: 1; min-width: 0; }

/* On-screen number pad (Seed Tray, Greenhouse) */
.pad { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 6px; width: min(100%, var(--max, 440px)); }
.pad .btn { padding: 0; font-size: 1.25rem; border-radius: var(--radius); }
@media (max-width: 480px) { .pad.n9 { grid-template-columns: repeat(5, 1fr); } }

/* Reduced motion: no movement, but feedback stays (fades and outlines instead). */
@media (prefers-reduced-motion: reduce) {
  .packet, .btn, #toast { transition-property: opacity, background-color; }
  .packet:hover { transform: none; }
  .sheet[open] { animation: fade-in 160ms ease-out; }
  .stamp { animation: fade-in 300ms ease-out both; }
  .tile.shake { animation: none; outline: 3px solid var(--bad); outline-offset: 2px; border-radius: 10px; }
  #toast { transform: translate(-50%, 0); }
}
@keyframes fade-in { from { opacity: 0; } }

/* ---- Word-path games (Tendril, Thicket) ----------------------------------- */
.trace-wrap { position: relative; width: min(100%, var(--max, 400px)); }
.trace-wrap .grid { width: 100%; }
.trace-lines { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.letter { border-radius: 50%; background: transparent; border-color: transparent; text-transform: uppercase; z-index: 1; font-size: clamp(1.1rem, 6vw, 1.6rem); }
.letter.on { background: var(--accent); color: var(--on-ink); }
.letter.found { background: var(--accent-wash); color: var(--ink); }
.letter.found-span { background: var(--mustard-bright); color: #2A2119; }
.letter.hinted { box-shadow: inset 0 0 0 2px var(--accent); }
.word-slots { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; }
.slot { display: flex; gap: 2px; }
.slot i { width: 14px; height: 18px; border-bottom: 2px solid var(--line-strong); font-style: normal; font-size: 0.8rem; font-weight: 700; text-align: center; text-transform: uppercase; }
.slot.found i { border-color: var(--accent); color: var(--accent); }
.current-word { font-family: var(--display); font-size: 1.6rem; min-height: 2rem; letter-spacing: 0.08em; text-transform: uppercase; }
.theme-clue { text-align: center; }
.theme-clue small { display: block; color: var(--ink-soft); font-size: 0.85rem; }
.theme-clue strong { font-family: var(--display); font-size: 1.5rem; }

/* ---- Runner ------------------------------------------------------------- */
.runner .cell { border-radius: 4px; }
.runner .cell.path { background: var(--accent-wash); }
.runner .marker {
  width: 62%; height: 62%; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper);
  font-size: clamp(0.9rem, 4vw, 1.15rem); z-index: 2;
}
.runner .cell.path .marker { background: var(--accent); color: var(--on-ink); }
.runner svg { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: visible; }

/* ---- Leaf & Bloom ----------------------------------------------------- */
.lb-wrap { position: relative; width: min(100%, 420px); }
.lb-wrap .grid { width: 100%; gap: 6px; }
.lb .cell.given { background: var(--paper-deep); cursor: default; }
.lb .cell.bad { box-shadow: inset 0 0 0 2px var(--bad); }
.lb .cell svg { width: 62%; height: 62%; }
.lb-link {
  position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; display: grid; place-items: center;
  background: var(--paper); color: var(--ink); font-size: 0.85rem; font-weight: 800; line-height: 1; z-index: 2; pointer-events: none; border: 1px solid var(--line-strong);
}
.lb-link.bad { background: var(--bad); color: #fff; border-color: var(--bad); }

/* ---- Scarecrows ------------------------------------------------------ */
.sc .grid { gap: 0; border: 2px solid var(--ink); border-radius: 6px; overflow: hidden; }
.sc .cell { border-radius: 0; border: 0; box-shadow: inset 0 0 0 0.5px rgb(42 33 25 / 0.25); }
.sc .cell.b-t { border-top: 2px solid var(--ink); }
.sc .cell.b-l { border-left: 2px solid var(--ink); }
.sc .cell svg { width: 64%; height: 64%; }
.sc .cell.bad { color: var(--bad); }
.sc .cell.bad::after { content: ''; position: absolute; inset: 3px; border: 2px solid var(--bad); border-radius: 50%; }
.sc .dot { width: 18%; height: 18%; border-radius: 50%; background: rgb(42 33 25 / 0.45); }

/* ---- Sudoku family --------------------------------------------------- */
.sudoku { gap: 0; border: 2.5px solid var(--ink); border-radius: 6px; overflow: hidden; background: var(--card); }
.sudoku .cell { border-radius: 0; border: 0; box-shadow: inset 0 0 0 0.5px var(--line-strong); font-size: clamp(1.05rem, 5.5vw, 1.6rem); font-weight: 600; color: var(--accent); }
.sudoku.n9 .cell { font-size: clamp(0.95rem, 4.4vw, 1.4rem); }
.sudoku .cell.given { color: var(--ink); font-weight: 800; }
.sudoku .cell.box-r { border-right: 2px solid var(--ink); }
.sudoku .cell.box-b { border-bottom: 2px solid var(--ink); }
.sudoku .cell.peer { background: color-mix(in srgb, var(--accent) 7%, var(--card)); }
.sudoku .cell.same { background: color-mix(in srgb, var(--accent) 18%, var(--card)); }
.sudoku .cell.sel { background: color-mix(in srgb, var(--accent) 30%, var(--card)); }
.sudoku .cell.bad { color: var(--bad); }
.sudoku .cell.bad::after { content: ''; position: absolute; left: 25%; right: 25%; bottom: 12%; height: 2px; background: var(--bad); }
.notes { position: absolute; inset: 2px; display: grid; grid-template-columns: repeat(3, 1fr); font-size: clamp(0.6rem, 2.2vw, 0.72rem); color: var(--ink-soft); font-weight: 600; line-height: 1; }
.notes span { display: grid; place-items: center; }

/* ---- Allotment -------------------------------------------------------- */
.allot-wrap { position: relative; width: min(100%, 440px); }
.allot-wrap .grid { width: 100%; gap: 0; border: 2px solid var(--ink); border-radius: 6px; }
.allot .cell { border-radius: 0; border: 0; box-shadow: inset 0 0 0 0.5px var(--line); background: var(--card); }
.allot .clue {
  display: inline-flex; align-items: center; justify-content: center; gap: 1px; min-width: 74%; height: 74%; padding: 0 3px; border-radius: 999px;
  background: var(--paper); border: 1.5px solid var(--ink); font-size: clamp(0.9rem, 4.5vw, 1.25rem); z-index: 2; position: relative;
}
.allot .clue svg { width: 0.75em; height: 0.75em; flex: none; }
.plot { position: absolute; border-radius: 4px; pointer-events: none; border: 2.5px solid var(--ink); z-index: 1; }
.plot.bad { border-style: dashed; border-color: var(--bad); }
.plot.ghost { border-style: dashed; background: color-mix(in srgb, var(--accent) 22%, transparent); }

/* ---- Halves ------------------------------------------------------------ */
.halves-board { position: relative; width: min(100%, 420px); aspect-ratio: 1; }
.halves-board .hcell { position: absolute; border-radius: 4px; background: var(--card); border: 1px solid var(--line); cursor: pointer; padding: 0; }
.halves-board .hcell.pending { background: var(--accent-wash); box-shadow: inset 0 0 0 2px var(--accent); }
.halves-board .bed { position: absolute; pointer-events: none; border: 2px dashed var(--line-strong); border-radius: 8px; z-index: 1; }
.halves-board .bed.ok { border-style: solid; border-color: var(--good); }
.halves-board .bed.bad { border-style: solid; border-color: var(--bad); }
.halves-board .badge {
  position: absolute; z-index: 4; transform: translate(-30%, -30%); background: var(--ink); color: var(--paper); border-radius: 999px;
  font-size: 0.78rem; font-weight: 800; padding: 1px 7px; pointer-events: none; white-space: nowrap;
}
.halves-board .bed.ok + .badge, .badge.ok { background: var(--good); color: var(--on-ink); }
.badge.bad { background: var(--bad); color: #fff; }
.domino { display: inline-flex; border: 2px solid var(--ink); border-radius: 8px; background: var(--card); padding: 0; cursor: pointer; }
.domino .face { width: 40px; height: 40px; display: grid; place-items: center; }
.domino .face + .face { border-left: 1.5px solid var(--ink); }
.domino.sel { box-shadow: 0 0 0 3px var(--accent); }
.domino.placed { position: absolute; z-index: 3; }
.domino.vertical { flex-direction: column; }
.domino.vertical .face + .face { border-left: 0; border-top: 1.5px solid var(--ink); }
.tray { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; min-height: 48px; }
.pips { width: 78%; height: 78%; }

/* ---- Strata ------------------------------------------------------------ */
.strata { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: min(100%, 440px); }
.tile {
  aspect-ratio: 1; position: relative; border: 0; padding: 0; background: transparent; cursor: pointer;
}
.tile .layer { position: absolute; inset: 0; border-radius: 10px; border: 1.5px solid rgb(42 33 25 / 0.35); display: grid; place-items: center; }
.tile .layer svg { width: 52%; height: 52%; }
.tile.empty { cursor: default; }
.tile.empty .slot-mark { position: absolute; inset: 0; border: 1.5px dashed var(--line); border-radius: 10px; }
.tile.sel .layer.top { box-shadow: 0 0 0 3px var(--card), 0 0 0 6px var(--ink); }
.tile.shake { animation: shake 300ms; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* ---- Common Ground ----------------------------------------------------- */
.clues { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 8px; }
.clues li { display: flex; align-items: center; gap: 12px; padding: 0.75rem 1rem; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); font-weight: 600; font-size: 1.1rem; }
.clues li .n { font-family: var(--display); color: var(--accent); width: 1.2em; }
.clues li.hidden { color: var(--ink-soft); background: transparent; border-style: dashed; font-weight: 400; }
.guesses { width: 100%; margin: 0; padding: 0; list-style: none; color: var(--ink-soft); font-size: 0.9rem; }
.guesses li { display: flex; align-items: center; gap: 6px; }
.guesses li .icon { color: var(--bad); }
.answer { text-align: center; font-family: var(--display); font-size: 1.4rem; }

/* ---- Trellis --------------------------------------------------------- */
.rungs { width: 100%; display: grid; gap: 8px; }
.rung { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 8px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.rung.locked { background: transparent; border-style: dashed; }
.rung.solved { border-color: var(--accent); }
.rung-clue { font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 4px; }
.rung-word { display: flex; gap: 4px; }
.rung-word input {
  width: 2.75rem; height: 2.75rem; text-align: center; text-transform: uppercase; font: 700 1.25rem var(--text);
  border: 1.5px solid var(--line-strong); border-radius: 6px; background: var(--paper); color: var(--ink); padding: 0;
}
.rung.solved .rung-word input { background: var(--accent); color: var(--on-ink); border-color: var(--accent); }
.rung-moves { display: flex; gap: 4px; }
.rung-moves .icon-btn { width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--line); }
.rung-moves .icon-btn:disabled { opacity: 0.3; }
.rung-moves .up svg { transform: rotate(90deg); }
.rung-moves .down svg { transform: rotate(-90deg); }

/* ---- Sorting Shed -------------------------------------------------- */
.shed { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: 100%; container-type: inline-size; }
.word-tile {
  min-height: 64px; border-radius: 8px; border: 1.5px solid var(--line-strong); background: var(--paper); font-weight: 800;
  /* shrink long words to fit their tile, but never below 11px */
  font-size: clamp(11px, calc(25cqw / var(--len, 6) * 1.2), 15px); text-transform: uppercase; cursor: pointer; padding: 4px 3px; overflow-wrap: anywhere; line-height: 1.15;
}
.word-tile.sel { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.shelf { grid-column: 1 / -1; border-radius: 8px; padding: 0.6rem 0.8rem; text-align: center; color: #FBF7EE; }
.shelf strong { display: block; font-family: var(--display); font-size: 1.15rem; }
.shelf span { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.shelf.l1 { background: #3F6B35; } .shelf.l2 { background: #3F6E9A; } .shelf.l3 { background: #7B3A5C; } .shelf.l4 { background: #2A2119; }
.mistakes { display: flex; gap: 6px; align-items: center; font-size: 0.9rem; color: var(--ink-soft); }
.mistakes i { width: 12px; height: 12px; border-radius: 50%; background: var(--ink); display: inline-block; }
.mistakes i.used { background: transparent; border: 1.5px solid var(--line-strong); }

/* ---- Rootword ------------------------------------------------------- */
.rw-letters { display: grid; grid-template-columns: repeat(3, 72px); gap: 10px; justify-content: center; }
.rw-letter {
  height: 64px; border-radius: 12px 12px 12px 12px; border: 1.5px solid var(--line-strong); background: var(--card);
  font: 700 1.8rem var(--display); text-transform: uppercase; cursor: pointer;
}
.rw-root-row { display: flex; justify-content: center; width: 100%; padding-top: 10px; border-top: 3px solid color-mix(in srgb, var(--ink-soft) 50%, transparent); margin-top: 4px; }
.rw-letter.root { width: 96px; background: var(--accent); color: var(--on-ink); border-color: var(--accent); border-radius: 12px 12px 40px 40px; }
.rw-entry { font-family: var(--display); font-size: 2rem; min-height: 2.6rem; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; }
.rw-entry .r { color: var(--accent); }
.rank { width: 100%; }
.rank-bar { display: flex; gap: 3px; margin-top: 4px; }
.rank-bar i { flex: 1; height: 8px; border-radius: 4px; background: var(--line); }
.rank-bar i.on { background: var(--accent); }
.found-list { width: 100%; columns: 3 7rem; font-size: 0.95rem; text-transform: capitalize; margin: 0; padding: 0; list-style: none; }
.found-list li.bloom { font-weight: 800; color: var(--accent); }

/* ---- Three Fences --------------------------------------------------- */
.fences { width: min(100%, 380px); touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.fences .fence { stroke: var(--ink); stroke-width: 3; fill: var(--card); }
.fences .post circle { fill: var(--card); stroke: var(--ink); stroke-width: 2; cursor: pointer; }
.fences .post circle.hit { fill: transparent; stroke: none; }
.fences .post:focus-visible { outline: none; }
.fences .post:focus-visible circle:not(.hit) { stroke: var(--accent); stroke-width: 4; }
.fences .post.used circle:not(.hit) { fill: var(--accent-wash); }
.fences .post.cur circle:not(.hit) { fill: var(--accent); stroke: var(--accent); }
.fences .post text { font: 700 20px var(--text); fill: var(--ink); text-transform: uppercase; pointer-events: none; }
.fences .post.cur text { fill: var(--on-ink); }
.fences .trail { stroke: var(--accent); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: 0.55; }
.fences .trail.live { opacity: 1; stroke-dasharray: 6 5; }
.chain { font-family: var(--display); font-size: 1.25rem; text-transform: uppercase; text-align: center; letter-spacing: 0.03em; }

/* ---- Spadework ------------------------------------------------------ */
.sw-scores { display: flex; justify-content: space-between; width: 100%; gap: 8px; }
.sw-score { flex: 1; padding: 0.5rem 0.75rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); }
.sw-score.turn { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.sw-score b { display: block; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.sw-board { --cols: 11; gap: 2px; width: min(100%, 520px, max(300px, calc(100dvh - 420px))); touch-action: manipulation; } /* board and rack fit on one screen */
.sw-board .cell { border-radius: 3px; font-size: clamp(0.6rem, 2.4vw, 0.75rem); font-weight: 800; color: var(--ink-soft); }
.sw-board .cell.L2 { background: color-mix(in srgb, var(--delphinium) 22%, var(--card)); }
.sw-board .cell.L3 { background: color-mix(in srgb, var(--delphinium) 50%, var(--card)); color: var(--ink); }
.sw-board .cell.W2 { background: color-mix(in srgb, var(--tomato) 22%, var(--card)); }
.sw-board .cell.W3 { background: color-mix(in srgb, var(--tomato) 50%, var(--card)); color: var(--ink); }
.sw-board .cell.centre { background: color-mix(in srgb, var(--leaf) 30%, var(--card)); }
.sw-tile {
  width: 100%; height: 100%; border-radius: 3px; background: #E9D9B4; color: #2A2119; display: grid; place-items: center; position: relative;
  font: 700 clamp(0.85rem, 3.6vw, 1.15rem) var(--display); text-transform: uppercase; box-shadow: inset 0 -2px 0 rgb(42 33 25 / 0.2);
}
.sw-tile sub { position: absolute; right: 2px; bottom: 0; font: 700 clamp(0.5rem, 2vw, 0.6rem) var(--text); }
.sw-tile.fresh { background: var(--mustard-bright); }
.sw-tile.last { box-shadow: inset 0 0 0 2px var(--leaf); }
.sw-rack { display: flex; gap: 6px; justify-content: center; min-height: 52px; }
.sw-rack .sw-tile { width: 46px; height: 50px; font-size: 1.5rem; cursor: pointer; border: 0; }
.sw-rack .sw-tile sub { font-size: 0.75rem; right: 4px; bottom: 2px; }
.sw-rack .sw-tile.sel { transform: translateY(-6px); box-shadow: 0 0 0 3px var(--accent); }
.sw-rack .sw-tile.swap { opacity: 0.4; }
.sw-log { width: 100%; font-size: 0.85rem; color: var(--ink-soft); max-height: 6.5em; overflow: auto; margin: 0; padding: 0; list-style: none; }
.sw-key { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 0.8rem; color: var(--ink-soft); justify-content: center; }
.sw-key span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.sw-key .k-L2::before { background: color-mix(in srgb, var(--delphinium) 22%, var(--card)); }
.sw-key .k-L3::before { background: color-mix(in srgb, var(--delphinium) 50%, var(--card)); }
.sw-key .k-W2::before { background: color-mix(in srgb, var(--tomato) 22%, var(--card)); }
.sw-key .k-W3::before { background: color-mix(in srgb, var(--tomato) 50%, var(--card)); }

/* Legends: the real badges, each with its meaning (Halves, Allotment) */
.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 0; padding: 0; list-style: none; font-size: 0.875rem; color: var(--ink-soft); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend .badge-chip { background: var(--ink); color: var(--paper); border-radius: 999px; font-size: 0.78rem; font-weight: 800; padding: 1px 8px; }
.legend svg { width: 16px; height: 16px; color: var(--ink); }
.packet-foot.growing { color: var(--accent); }

/* ---- Harvest: packet morph and stamp ---------------------------------- */
::view-transition-group(*) { animation-duration: 420ms; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; }
.packet-stamp {
  position: absolute; left: 50%; top: 52%; translate: -50% -50%; rotate: -8deg; padding: 2px 8px;
  border: 2.5px double var(--accent); border-radius: 6px; background: color-mix(in srgb, var(--paper) 82%, transparent);
  color: var(--accent); font: 700 0.95rem/1.1 var(--display); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap;
}
.packet-stamp.fresh { animation: packet-stamp 520ms cubic-bezier(0.16, 1, 0.3, 1) 450ms both; }
@keyframes packet-stamp {
  0% { opacity: 0; scale: 2.4; filter: blur(3px); }
  60% { opacity: 1; scale: 0.94; filter: blur(0); }
  100% { opacity: 1; scale: 1; }
}
@media (prefers-reduced-motion: reduce) { .packet-stamp.fresh { animation: fade-in 300ms ease-out both; } }

/* ---- Your garden ------------------------------------------------------- */
.garden { max-width: 760px; margin: 0 auto; padding: 1.5rem 16px 3rem; }
.garden h1 { font-size: 2.5rem; }
.garden-summary { font-size: 1.15rem; margin: 0.5rem 0 0; max-width: 60ch; }
.garden-bed { padding-top: 1.75rem; }
.garden-rows, .garden-recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.garden-row {
  display: grid; grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr) 2.5rem; grid-template-areas: "name bar count" "name best best";
  align-items: center; gap: 2px 12px; padding: 8px 0; border-bottom: 1px dashed var(--line);
}
.garden-name { grid-area: name; font-family: var(--display); font-weight: 700; font-size: 1.1rem; color: var(--accent); text-decoration: none; }
.garden-name:hover { text-decoration: underline; }
.garden-bar { grid-area: bar; height: 12px; background: var(--paper-deep); border-radius: 999px; overflow: hidden; }
.garden-bar span { display: block; height: 100%; background: var(--accent); border-radius: 999px; min-width: 0; }
.garden-count { grid-area: count; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.garden-best { grid-area: best; font-size: 0.85rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.garden-recent li { padding: 4px 0; font-variant-numeric: tabular-nums; }
.garden-recent a { font-weight: 600; color: var(--ink); }
.issue a { color: inherit; text-underline-offset: 0.2em; }

/* ---- Generative teasel in the masthead ------------------------------------ */
.masthead-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.masthead-row > div { min-width: 0; }
.teasel-head { flex: none; width: clamp(64px, 18vw, 120px); height: auto; margin-bottom: -1.5rem; overflow: visible; }
.th-stem, .th-sweep, .th-spine, .th-floret { fill: none; stroke-linecap: round; }
.th-stem { stroke: var(--leaf); stroke-width: 2.4; }
.th-leaf { fill: color-mix(in srgb, var(--leaf) 70%, var(--paper)); }
.th-sweep { stroke: var(--leaf); stroke-width: 1.6; opacity: 0.85; }
.th-spine { stroke: var(--leaf); stroke-width: 1.3; }
.th-back { opacity: 0.4; }
.th-floret { stroke: var(--beetroot); stroke-width: 2.2; }
@media (prefers-reduced-motion: no-preference) {
  .th-spine, .th-floret, .th-sweep { animation: th-grow 500ms cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: var(--d, 0ms); }
  .th-stem { stroke-dasharray: 400; animation: th-draw 700ms cubic-bezier(0.16, 1, 0.3, 1) both; }
}
@keyframes th-grow { from { opacity: 0; } }
@keyframes th-draw { from { stroke-dashoffset: 400; } }

/* ---- Everything is physical ---------------------------------------------- */
/* The board card holds the packet that tears open, so its falling pieces are
   clipped to the card instead of spilling over the page. */
.board-area { position: relative; overflow: clip; overflow-clip-margin: 14px; }
.packet-front { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.pf-strip, .pf-body { position: absolute; inset: 0; will-change: translate, rotate; }
.pf-strip { background: color-mix(in srgb, var(--accent) 78%, #000); border-radius: 6px 6px 0 0; }
.pf-body {
  background: var(--card); display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding-top: 76px; box-shadow: var(--shadow);
}
.pf-body::before { content: ''; position: absolute; inset: 0 0 auto; height: 150px; background: var(--accent); z-index: -1; }
.pf-name { font: 700 clamp(1.8rem, 8vw, 2.6rem)/1 var(--display); text-transform: uppercase; color: var(--on-ink); letter-spacing: 0.02em; }
.pf-body .emblem { width: min(60%, 240px); max-width: none; color: var(--accent); background: var(--paper); border: 2px solid var(--accent); border-radius: 999px 999px 12px 12px; padding: 18px 16px 12px; box-sizing: content-box; }

/* A piece being dragged floats above everything with a deeper shadow. */
.lifted { position: relative; z-index: 30; cursor: grabbing; box-shadow: 0 18px 28px -10px rgb(28 23 18 / 0.45) !important; }
.domino, .sw-rack .sw-tile, .sw-tile.fresh, .rung.middle .rung-clue { cursor: grab; touch-action: none; }
.halves-board .hcell.drop { background: color-mix(in srgb, var(--accent) 30%, var(--card)) !important; box-shadow: inset 0 0 0 2px var(--accent); }
.rung.middle .rung-clue::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px;
  background: radial-gradient(circle, var(--line-strong) 1.2px, transparent 1.4px) 0 0 / 5px 5px; }
.ghost-fling { will-change: translate, rotate, opacity; }
.sound-btn[aria-pressed="true"] { background: color-mix(in srgb, currentColor 16%, transparent); }
@media (prefers-reduced-motion: reduce) { .lifted { box-shadow: 0 6px 12px -6px rgb(28 23 18 / 0.4) !important; } }
/* Parts of a drawing scale and turn around their own centre, not the drawing's corner. */
.fences .post, .fences .post circle { transform-box: fill-box; transform-origin: center; }