/* ═══════════════════════════════════════════════════════════════════════
   FIELD PRESS — the app is a two-ink risograph print shop.
   Same rules as the flower plates: locked green, warm cream stock, one
   accent ink that changes per screen. Halftone on everything, display type
   set slightly off-register, crop marks on the sheet.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* rarity reads the same everywhere: earthy common, saturated uncommon,
     fluorescent rare — the same families the flower plates are printed in */
  --t-common: #6c7a68;
  --t-uncommon: #2f4e8f;
  --t-rare: #d6006e;
  --t-new: #b0431f;
  --paper: #f0e7d3;
  --paper-2: #e7dcc2;
  --paper-3: #ddd0b1;
  --ink: #23402c; /* the locked green — plate one */
  --ink-soft: #6c7a68;
  --line: #c3b591;
  --accent: #8e3b5a; /* plate two, overridden per screen */
  --display: 400 1em/0.95 'Archivo Black', 'Helvetica Neue', Impact, sans-serif;
  --mono: 11px/1.35 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

[data-plate='garden'] { --accent: #8e3b5a; }
[data-plate='book'] { --accent: #b0431f; }
[data-plate='group'] { --accent: #2f4e8f; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: #b9ad92;
  color: var(--ink);
  font: 400 15px/1.5 Archivo, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* the printed sheet */
#app {
  position: relative;
  max-width: 460px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--paper);
  padding: 20px 0 30px;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.25);
}

/* halftone stock — one composited layer over the whole sheet */
#app::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: radial-gradient(rgba(35, 64, 44, 0.55) 0.55px, transparent 0.6px);
  background-size: 3px 3px;
  opacity: 0.2;
  mix-blend-mode: multiply;
}
#app > *:not(.bed) { position: relative; z-index: 2; }

/* crop marks */
.crop { position: absolute; width: 15px; height: 15px; z-index: 3; opacity: 0.5; }
.crop.tl { top: 6px; left: 6px; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.crop.tr { top: 6px; right: 6px; border-top: 1px solid var(--ink); border-right: 1px solid var(--ink); }
.crop.bl { bottom: 6px; left: 6px; border-bottom: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.crop.br { bottom: 6px; right: 6px; border-bottom: 1px solid var(--ink); border-right: 1px solid var(--ink); }

.muted { color: var(--ink-soft); }
.fine { color: var(--ink-soft); font-size: 12px; line-height: 1.5; margin: 8px 18px 0; }

/* ── masthead ───────────────────────────────────────────────────────── */

.masthead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 4px 18px 12px;
}
.mast-title {
  font: var(--display);
  font-size: 27px;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  /* off-register: the accent plate printed 2px adrift */
  text-shadow: 2px 2px 0 var(--accent);
}
.mast-sub {
  font: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
  margin-top: 6px;
}
.mast-right { display: flex; gap: 5px; }
.chip {
  font: var(--mono);
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--ink);
  padding: 4px 8px;
  background: var(--paper-2);
}

/* ── tabs, as printed file tabs ─────────────────────────────────────── */

.tabs {
  display: flex;
  padding: 0 18px;
  border-bottom: 2px solid var(--ink);
}
.tabs button {
  flex: 1;
  text-align: center;
  font: var(--mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 9px 6px 8px;
  border: 2px solid var(--ink);
  border-bottom: none;
  background: var(--paper-2);
  color: var(--ink-soft);
  cursor: pointer;
  margin-right: -2px;
  margin-bottom: -2px;
}
.tabs button.on { background: var(--ink); color: var(--paper); position: relative; z-index: 2; }

.tab { display: none; }
.tab.on { display: block; }

.hd {
  font: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-soft);
  margin: 24px 18px 9px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.hd span { letter-spacing: 0.06em; }

/* ── the day sheet: two numbered jobs ───────────────────────────────── */

.daysheet { margin: 18px 18px 0; }
.ds-rule { border-top: 2px solid var(--ink); }

.job {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  text-align: left;
  font: inherit;
  background: none;
  border: none;
  border-bottom: 1px dotted var(--line);
  padding: 15px 2px;
  cursor: pointer;
  color: inherit;
}
.job-static { cursor: default; }
.job:last-of-type { border-bottom: none; }

.job-no {
  flex: 0 0 36px;
  height: 36px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: var(--mono);
  font-size: 14px;
  font-weight: 700;
}
.job-body { flex: 1; min-width: 0; }
.job-name {
  display: block;
  font: var(--display);
  font-size: 27px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.job-note {
  display: block;
  font: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  margin-top: 3px;
}
.job-go { font-size: 21px; color: var(--accent); padding-right: 4px; }

/* live job — the accent plate lights it up */
.job.live .job-no { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.job.live .job-name { text-shadow: 1.5px 1.5px 0 var(--accent); }
.job.live .job-note { color: var(--accent); }

/* done job — struck through and ticked */
.job.done { opacity: 0.32; }
.job.done .job-name { text-decoration: line-through; text-decoration-thickness: 2px; }
.job.done .job-no { font-size: 0; }
.job.done .job-no::after { content: '✓'; font-size: 15px; }
.job.done .job-go { visibility: hidden; }

.job-slots { display: flex; gap: 5px; padding-right: 2px; }
.slot-hole { width: 13px; height: 13px; border: 1.5px solid var(--ink-soft); border-radius: 50%; }
.slot-hole.filled { background: var(--ink); border-color: var(--ink); }

/* ── seed packets ───────────────────────────────────────────────────── */

.packets {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 14px 18px 0;
}
.packet {
  position: relative;
  border: 1.5px solid var(--ink);
  background: var(--paper-2);
  padding: 7px 8px 9px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}
.packet:disabled { opacity: 0.5; cursor: default; }
.packet:disabled .pk-name { color: var(--ink-soft); }
.packet .tear { border-bottom: 2px dashed var(--ink); opacity: 0.35; margin: 0 -2px 3px; }
.packet .pk-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
.packet .pk-name {
  font: var(--display);
  font-size: 14.5px;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.packet .pk-swatch {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid rgba(35, 64, 44, 0.35);
}
.packet .pk-art { height: 88px; margin: 2px 0 0; overflow: hidden; display: grid; place-items: center; }
.packet .pk-art svg { max-height: 88px; width: auto; }
.packet .pk-cut { max-height: 88px; max-width: 100%; height: auto; width: auto; display: block; }
.packet .pk-meta {
  font: var(--mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  padding-top: 5px;
}
/* ── extras: quiet on purpose ───────────────────────────────────────── */

.boxline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: calc(100% - 36px);
  margin: 20px 18px 0;
  padding: 9px 0;
  border: none;
  border-top: 1px dotted var(--line);
  border-bottom: 1px dotted var(--line);
  background: none;
  color: var(--ink-soft);
  font: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.boxline:disabled { opacity: 0.4; cursor: default; }
.boxline-price { color: var(--ink); white-space: nowrap; }

/* ── the plot: specimen cards ───────────────────────────────────────── */

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; padding: 0 18px; }
.tile {
  position: relative;
  aspect-ratio: 5 / 6;
  border: 1.5px solid var(--ink);
  overflow: hidden;
  background: var(--paper-2);
  cursor: pointer;
  padding: 0;
  display: block;
}
.tile svg { display: block; width: 100%; height: 100%; }
.tile::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(35, 64, 44, 0.5) 0.6px, transparent 0.7px);
  background-size: 3px 3px;
  opacity: 0.24;
  mix-blend-mode: multiply;
}
.tile.empty {
  display: grid;
  place-items: center;
  font: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--paper-3);
  border-style: dashed;
  border-color: var(--ink-soft);
}
.tile .cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3px 4px 4px;
  background: var(--paper);
  border-top: 1px solid var(--ink);
  font: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}
.tile .cap b {
  display: block;
  font-size: 9.5px;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tile .plate-no {
  position: absolute;
  top: 4px;
  left: 5px;
  font: var(--mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}
.tile .drop {
  position: absolute;
  top: 4px;
  right: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-soft);
}
.tile .drop.on { background: var(--ink); border-color: var(--ink); }
.tile.ready { border-width: 3px; }
.tile .badge {
  position: absolute;
  top: 15px;
  left: -6px;
  font: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
  background: var(--accent);
  color: var(--paper);
  padding: 2px 8px;
  transform: rotate(-4deg);
}

/* ── stamps ─────────────────────────────────────────────────────────── */

.stamp {
  display: block;
  width: calc(100% - 36px);
  margin: 24px 18px 0;
  font: var(--display);
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 15px;
  border: 3px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transform: rotate(-0.5deg);
}
.stamp.hot { background: var(--ink); color: var(--paper); box-shadow: 3px 3px 0 var(--accent); }

/* ── the press (book) ───────────────────────────────────────────────── */

.sheet-head { padding-top: 4px; }
.book { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 4px 18px 0; }
.bslot {
  aspect-ratio: 5 / 6;
  border: 1px solid var(--line);
  background: var(--paper-2);
  overflow: hidden;
  position: relative;
}
.bslot::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(35, 64, 44, 0.5) 0.6px, transparent 0.7px);
  background-size: 3px 3px;
  opacity: 0.22;
  mix-blend-mode: multiply;
}
.bslot.empty { background: var(--paper-3); border-style: dashed; border-color: var(--ink-soft); }
.bslot svg { display: block; width: 100%; height: 100%; }
.bslot .tape {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%) rotate(-2.5deg);
  width: 48%;
  height: 10px;
  background: rgba(196, 180, 142, 0.85);
}
.bslot.gift { border: 1.5px solid var(--accent); }
.bslot.secret { border: 2px solid #b8860b; }
.bslot .from {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font: var(--mono);
  font-size: 7.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  padding: 2px 1px;
  background: var(--paper);
  border-top: 1px solid var(--line);
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bslot .hp {
  position: absolute;
  top: 3px;
  right: 3px;
  font: var(--mono);
  font-size: 7.5px;
  background: var(--ink);
  color: var(--paper);
  padding: 1px 3px;
}

.archive { padding: 20px 18px 0; }
.chapter {
  border-top: 1px solid var(--ink);
  padding: 9px 0;
  font: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: flex;
  justify-content: space-between;
}

/* ── the round ──────────────────────────────────────────────────────── */

.friends { padding: 18px 18px 0; }
.friend {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px dotted var(--line);
  font: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.log { padding: 0 18px; }
.entry {
  font: var(--mono);
  font-size: 10.5px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  padding: 6px 0;
  border-bottom: 1px dotted var(--line);
  color: var(--ink-soft);
  text-transform: uppercase;
}
.entry b { color: var(--accent); }

/* ── colour bar, like a press test strip ────────────────────────────── */

.colourbar { display: flex; height: 9px; margin: 26px 18px 0; border: 1px solid var(--ink); }
.colourbar span { flex: 1; }

/* ── modal ──────────────────────────────────────────────────────────── */

.modal[hidden] { display: none; }
.modal {
  position: fixed;
  inset: 0;
  background: rgba(35, 64, 44, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 40;
}
.sheet {
  background: var(--paper);
  width: 100%;
  max-width: 460px;
  border-top: 3px solid var(--ink);
  padding: 18px 18px 28px;
  max-height: 90vh;
  overflow-y: auto;
}
.sheet h3 {
  margin: 0;
  font: var(--display);
  font-size: 27px;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 var(--accent);
}
.sheet .step {
  font: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 5px;
}
.harvest-art {
  position: relative;
  width: 110px;
  margin: 10px auto;
  border: 1.5px solid var(--ink);
  overflow: hidden;
}
.harvest-art svg { display: block; width: 100%; }
.harvest-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(35, 64, 44, 0.5) 0.6px, transparent 0.7px);
  background-size: 3px 3px;
  opacity: 0.24;
  mix-blend-mode: multiply;
}
.choice {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 14px;
  padding: 11px 12px;
  margin-top: 6px;
  border: 1.5px solid var(--line);
  background: var(--paper-2);
  cursor: pointer;
  color: inherit;
}
.choice.primary { border-color: var(--ink); border-width: 2px; }
/* a dead button that looks live reads as a broken button */
.choice:disabled {
  opacity: 0.5;
  cursor: default;
  border-style: dashed;
  background: transparent;
}
.choice:disabled small { color: var(--ink-soft); }
.choice-done {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  margin-top: 6px;
  border: 1.5px solid var(--line);
  background: transparent;
  font: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.choice-done b {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-size: 10px;
  flex: 0 0 auto;
}
.choice small {
  display: block;
  font: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-top: 3px;
  text-transform: uppercase;
}
.choice .tag {
  float: right;
  font: var(--mono);
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  padding: 2px 6px;
}
.tag.needs { background: var(--accent); color: var(--paper); }
.tag.upgrade { background: #b8860b; color: #fff; }
.tag.has { background: var(--paper); color: var(--ink-soft); border: 1px solid var(--line); }

.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--paper);
  padding: 9px 15px;
  font: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 60;
  max-width: 92vw;
  text-align: center;
  border: 1px solid var(--paper);
}

/* ── admin ──────────────────────────────────────────────────────────── */

.admin { margin: 30px 18px 0; padding: 12px; border: 1px dashed var(--ink-soft); position: relative; opacity: 0.8; }
.admin-tag {
  position: absolute;
  top: -7px;
  left: 9px;
  background: var(--paper);
  padding: 0 6px;
  font: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.admin-row { display: flex; gap: 5px; }
.admin-row button {
  flex: 1;
  font: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 8px 3px;
  border: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--ink);
  cursor: pointer;
}
.admin-row button:disabled { opacity: 0.5; cursor: progress; }
.admin-auto {
  display: flex;
  align-items: center;
  gap: 6px;
  font: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 9px;
}
.admin-reset {
  display: block;
  width: 100%;
  margin-top: 8px;
  font: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px;
  border: none;
  background: none;
  color: var(--ink-soft);
  text-decoration: underline;
  cursor: pointer;
}

/* named blanks — you should always know exactly what you're still chasing */
.bslot.empty { display: grid; place-items: center; padding: 4px; }
.bslot.empty .wanted {
  font: var(--mono);
  font-size: 8px;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-soft);
  z-index: 2;
}
.bslot.empty .ghost {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  opacity: 0.5;
}

/* ── real riso plates ───────────────────────────────────────────────── */

.plate-img {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--paper);
  position: relative;
}
.plate-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 50% 62%;
  transition: transform 0.25s ease;
}
.plate-img.pressed img { filter: saturate(0.88) contrast(1.04); }
.packet .pk-art img { object-fit: contain; max-height: 88px; max-width: 100%; height: auto; width: auto; }

/* ═══ THE BED ════════════════════════════════════════════════════════════
   Six spots standing on the paper itself — no cards, no frames, no
   backgrounds. The plants are cut out of their stock (public/flowers/cut)
   so they share the sheet with everything else, and the whole band sits at
   the foot of the screen so the garden is always the thing in front.      */

.bed {
  margin: 0;
  pointer-events: none;
}


.bed-plants {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 156px;
  padding: 0 10px;
  pointer-events: auto;
  /* the paper fades up so plants rise out of the page rather than off a shelf */
  /* the bed is foreground: the page has to stop behind it, not show through */
  background: linear-gradient(
    to top,
    var(--paper) 0%,
    var(--paper) 72%,
    rgba(240, 231, 211, 0.92) 88%,
    rgba(240, 231, 211, 0) 100%
  );
}

.spot {
  flex: 1;
  position: relative;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.spot img {
  width: auto;
  max-width: 148%;
  object-fit: contain;
  object-position: bottom center;
  transition: height 0.4s ease;
  filter: drop-shadow(0 1px 0 rgba(35, 64, 44, 0.22));
}
.spot.ready img { filter: drop-shadow(1.5px 1.5px 0 var(--accent)); }

.spot-tag {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  font: var(--mono);
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--paper);
  padding: 1px 5px;
  white-space: nowrap;
}
.spot-drop {
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  z-index: 3;
}
.spot-drop.on { background: var(--ink); }
.spot-more {
  position: absolute;
  bottom: 2px;
  right: 8%;
  font: var(--mono);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  padding: 3px 5px;
  z-index: 4;
}
.bed-hint {
  position: relative;
  z-index: 2;
  font: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0.45;
}

/* an empty bed is a dashed hole waiting in the soil */
.spot.vacant::after {
  content: '';
  width: 26px;
  height: 11px;
  border: 1.5px dashed var(--ink-soft);
  border-radius: 50%;
  margin-bottom: 4px;
  opacity: 0.65;
}

.bed-soil {
  display: grid;
  text-align: center;
  align-content: center;
  gap: 2px;
  width: 100%;
  min-height: 34px;
  padding: 6px 0 7px;
  border: none;
  border-top: 2px solid var(--ink);
  background: var(--ink);
  pointer-events: auto;
  position: relative;
  cursor: pointer;
  font: inherit;
}
.bed-soil::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(240, 231, 211, 0.5) 0.6px, transparent 0.7px);
  background-size: 4px 4px;
  opacity: 0.5;
}
.soil-label:empty { display: none; }
.soil-label {
  position: relative;
  z-index: 2;
  font: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0.6;
}
.soil-label.settled { opacity: 1; font-weight: 700; }

/* the day only turns over because this is a prototype */
.nextday {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 8px;
  font: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 10px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.nextday-tag {
  position: absolute;
  top: -7px;
  left: 12px;
  background: var(--paper);
  padding: 0 6px;
  font-size: 8.5px;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
}

/* keep the page scrollable clear of the bed */


/* ── packet front: labelled, not cryptic ────────────────────────────── */

.packet { cursor: default; }
.packet.off { opacity: 0.55; }
.packet.off .pk-name { color: var(--ink-soft); }
.pk-specs {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1px 8px;
  margin: 0;
  padding-top: 5px;
  border-top: 1px solid var(--line);
  font: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pk-specs dt { color: var(--ink-soft); }
.pk-specs dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.pk-sow {
  margin-top: 7px;
  font: var(--display);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 7px;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
}
.pk-sow:disabled { background: transparent; color: var(--ink-soft); border-color: var(--line); cursor: default; }
.pk-info {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-soft);
  background: var(--paper);
  color: var(--ink-soft);
  font: var(--mono);
  font-size: 10px;
  font-style: italic;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

/* ── the back of the card ───────────────────────────────────────────── */

.latin {
  font: 13px/1.3 Georgia, 'Times New Roman', serif;
  font-style: italic;
  color: var(--accent);
  margin: 3px 0 0;
}
.back-art {
  position: relative;
  width: 128px;
  margin: 12px auto;
  border: 1.5px solid var(--ink);
  overflow: hidden;
  box-shadow: 3px 3px 0 var(--accent);
}
.back-art .plate-img,
.back-art svg { display: block; width: 100%; }
.back-note { font-size: 14px; line-height: 1.5; margin: 0 0 10px; }
.back-care {
  font: var(--mono);
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-left: 2px solid var(--accent);
  padding-left: 9px;
  margin: 0 0 14px;
}
.back-care span { display: block; color: var(--ink); }
.specs {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 12px;
  margin: 0;
  font: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.specs dt { color: var(--ink-soft); padding: 4px 0; border-top: 1px dotted var(--line); }
.specs dd {
  margin: 0;
  padding: 4px 0;
  text-align: right;
  border-top: 1px dotted var(--line);
  font-variant-numeric: tabular-nums;
}
.ink-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: -1px;
  border: 1px solid rgba(35, 64, 44, 0.3);
}
.prov {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 2px solid var(--ink);
  font-size: 13px;
  line-height: 1.5;
}
.prov b { color: var(--accent); }
.bslot { cursor: pointer; }

/* ── struck coin / drop marks ───────────────────────────────────────── */

.coin {
  width: 0.92em;
  height: 0.92em;
  vertical-align: -0.13em;
  margin-right: 3px;
  display: inline-block;
}
.chip .coin { margin-right: 4px; }

/* a flower you have never had keeps its picture to itself */
.back-art.unseen {
  display: grid;
  place-items: center;
  aspect-ratio: 5 / 6;
  box-shadow: none;
  border-style: dashed;
  border-color: var(--ink-soft);
  background: repeating-linear-gradient(45deg, #e9dfc7 0 5px, #e3d8bd 5px 10px);
}
.unseen-mark {
  font: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.6;
  color: var(--ink-soft);
}


/* ── rarity tags ────────────────────────────────────────────────────────
   On their own line rather than floating over the artwork, and colour-coded
   by ink family so a rare reads as rare on a packet, on a card back and in
   the plot without anyone having to learn a legend.                        */

.pk-flags { display: flex; gap: 4px; flex-wrap: wrap; margin: 1px 0 2px; }
.tier-tag {
  display: inline-block;
  font: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 3px 6px 2px;
  color: var(--paper);
  background: var(--t-common);
  white-space: nowrap;
}
.t-common { background: var(--t-common); }
.t-uncommon { background: var(--t-uncommon); }
.t-rare { background: var(--t-rare); }
.t-secret { background: #b8860b; }
.t-new { background: none; color: var(--t-new); box-shadow: inset 0 0 0 1.5px var(--t-new); }

.sheet .step .tier-tag { margin-right: 6px; vertical-align: 1px; }

/* ── how it works, and the headers in the cutting sheet ─────────────────
   Both use the same rule: a display-weight header, a mono subheader that
   says the one thing you need to know, then the prose.                   */

.chip-btn {
  cursor: pointer;
  font-weight: 700;
  padding: 4px 9px;
  color: var(--ink);
}

.guide { margin-top: 4px; }
.guide-lede {
  font-size: 15px;
  line-height: 1.5;
  margin: 10px 0 4px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--ink);
}
.guide h4,
.cut-h {
  font: var(--display);
  font-size: 17px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 22px 0 1px;
  text-shadow: 1.5px 1.5px 0 var(--accent);
}
.guide-sub,
.cut-sub {
  font: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px dotted var(--line);
}
.guide p:not(.guide-sub):not(.guide-lede) {
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0;
}
.cut-h { margin: 20px 0 1px; font-size: 15px; }
.cut-h:first-of-type { margin-top: 16px; }
.cut-sub { margin-bottom: 6px; }

/* ── screen two: the point of it ────────────────────────────────────── */

.guide-next { width: 100%; margin: 22px 0 0; }
.guide-back {
  display: block;
  width: 100%;
  margin-top: 10px;
  font: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px;
  border: none;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
}

.goal { margin-top: 6px; }
.goal-big {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0 16px;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  margin: 12px 0 16px;
}
.goal-num {
  font: var(--display);
  font-size: 92px;
  line-height: 0.78;
  letter-spacing: -0.05em;
  text-shadow: 4px 4px 0 var(--accent);
}
.goal-cap {
  font: var(--mono);
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.goal-cap b { color: var(--ink); }
.goal-say {
  font: var(--display);
  font-size: 25px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.goal-say b { color: var(--accent); }
.goal-rule { border-top: 1px dotted var(--line); margin: 16px 0 12px; }
.goal-kicker {
  font: var(--display);
  font-size: 25px;
  text-shadow: 2px 2px 0 var(--accent);
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 0;
}

/* the secret gets no explanation, because there isn't one to give */
.guide-shh {
  font-size: 40px;
  line-height: 1;
  text-align: center;
  margin: 12px 0 4px;
}

/* ── watering ───────────────────────────────────────────────────────────
   Three drops fall and the plant takes a breath. No blur, no glow — the
   drops are halftone dots in plate one, same as everything else.          */

.spot img { transform-origin: 50% 100%; }

.spot.watering img {
  animation: drink 640ms cubic-bezier(0.34, 1.4, 0.5, 1);
}
@keyframes drink {
  0% { transform: scaleY(1) scaleX(1); }
  26% { transform: scaleY(0.945) scaleX(1.03); }
  62% { transform: scaleY(1.03) scaleX(0.985); }
  100% { transform: scaleY(1) scaleX(1); }
}

.drops {
  position: absolute;
  left: 50%;
  bottom: 38%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 4;
}
.drops i {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0;
  animation: fall 520ms ease-in forwards;
}
.drops i:nth-child(1) { left: -9px; animation-delay: 0ms; }
.drops i:nth-child(2) { left: 0px; animation-delay: 70ms; }
.drops i:nth-child(3) { left: 8px; animation-delay: 140ms; }

@keyframes fall {
  0% { transform: translateY(-30px); opacity: 0; }
  25% { opacity: 0.85; }
  80% { opacity: 0.85; }
  100% { transform: translateY(6px); opacity: 0; }
}

/* the pip filling is part of the same beat */
.spot.watering .spot-drop { animation: pip 420ms ease-out 180ms both; }
@keyframes pip {
  0% { transform: translateX(-50%) scale(0.35); }
  60% { transform: translateX(-50%) scale(1.25); }
  100% { transform: translateX(-50%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .spot.watering img,
  .spot.watering .spot-drop,
  .drops i { animation: none; }
}