/* ============================================================================
   ui.css — HUD, action button, seed bar, toasts, panels, postcard,
   character creator, keyboard hint (moved from index.html unchanged)
============================================================================ */

/* ---- HUD: top-left ------------------------------------------------------ */
#hud { position:fixed; inset:0; z-index:20; pointer-events:none; }
#hud > * { pointer-events:auto; }
/* (2026-07-21) the dial moved into this corner above the request cards, so the
   column aligns LEFT — without this the 118px medallion stretches to the
   column's card width and its round face goes oval. */
#hud-tl {
  position:absolute; top:calc(10px + var(--sat)); left:calc(10px + var(--sal));
  display:flex; flex-direction:column; gap:8px; max-width:min(320px, 62vw);
  align-items:flex-start;
}
.chip-row { display:flex; gap:8px; }
.chip {
  display:flex; align-items:center; gap:7px;
  background:var(--cream-50); border-radius:999px; padding:7px 13px 7px 9px;
  font-family:var(--font-display); font-weight:800; font-size:15.5px;
  box-shadow:var(--pop-sm); border:2px solid rgb(43 32 25 / .14);
}
.chip .ico { font-size:16px; }
/* (Phase 4: #quest-card retired with the chain — .qico/.qtitle/.qtext live on
   in Harv's card + the request cards below)

   HUD v2 (2026-07-21, HUD v2 Big Picture H2): both card types take the
   reference's carved look — a wood border over a parchment face, a gold star
   pinned to the corner, and PIP progress instead of a "2/4" fraction (canon
   rule #1: progress is never a count). The .done gold glow is unchanged. */
#harv-quest-card, .req-card {
  position:relative; cursor:pointer;
  background:linear-gradient(180deg, var(--cream-50), var(--cream-100));
  border:3px solid var(--earth-600); border-radius:16px;
  box-shadow:var(--pop), var(--soft);
}
.qstar {
  position:absolute; right:-7px; top:-9px; font-size:19px; line-height:1;
  color:var(--gold-400); text-shadow:0 0 0 var(--earth-800),
    -1.5px -1.5px 0 var(--earth-800), 1.5px -1.5px 0 var(--earth-800),
    -1.5px 1.5px 0 var(--earth-800), 1.5px 1.5px 0 var(--earth-800);
  transform:rotate(12deg); pointer-events:none;
}
.qbody { min-width:0; }
/* pip progress — filled dots for what's in hand, empty wells for the rest */
.qpips { display:flex; gap:4px; margin-top:5px; flex-wrap:wrap; }
.pip {
  width:9px; height:9px; border-radius:50%;
  background:rgb(107 74 44 / .18); box-shadow:inset 0 0 0 1.5px rgb(107 74 44 / .35);
}
.pip.on { background:var(--gold-400); box-shadow:inset 0 0 0 1.5px var(--gold-600); }
/* (2026-07-23, Dexter) NUMBER COUNT replaces pips on quest cards — `have / need`,
   the current number in gold, a green ✓ when full (questCard.js pipRow now emits
   this). .qpips/.pip stay defined above only in case an old cached card lingers. */
.qcount { margin-top:4px; font-size:14px; font-weight:800; letter-spacing:.3px;
  color:var(--muted); font-variant-numeric:tabular-nums; }
.qcount .cur { color:var(--gold-600); }
.qcount.done { color:var(--forest-600); }
#harv-quest-card .qcount { font-size:15px; }

/* Harv's fishing request card (Canon v2.8) — same grammar as the quest card;
   display is toggled by js/quests/harvQuests.js (flex while a request lives) */
#harv-quest-card { padding:11px 15px; display:none; gap:11px; align-items:center; }
#harv-quest-card .qico { font-size:24px; filter:drop-shadow(0 2px 0 rgb(43 32 25 / .15)); }
#harv-quest-card .qtitle { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:1.1px; color:var(--sea-600, var(--forest-600)); }
#harv-quest-card .qtext { font-size:14.5px; font-weight:800; line-height:1.25; }
#harv-quest-card.done .qtitle { color:var(--gold-600); }
#harv-quest-card.done { animation:glowpulse 1.8s ease-in-out infinite; }
@keyframes glowpulse { 0%,100%{ box-shadow:var(--pop), 0 0 0 0 rgb(234 177 52 / 0);} 50%{ box-shadow:var(--pop), 0 0 22px 2px rgb(234 177 52 / .55);} }
/* The request log (Phase 3) — Pell's market asks; one small card each, same
   grammar as the quest cards (js/quests/requestLog.js owns the DOM) */
/* (2026-07-22) the opening task's own node, above Harv's card and the market
   log. Same column grammar as #request-cards — several cards on screen at once
   is intended (Dexter), so both stacks simply grow downward. */
#task-card { display:none; flex-direction:column; gap:10px; }
#request-cards { display:none; flex-direction:column; gap:10px; }
.req-card { padding:9px 14px; display:flex; gap:11px; align-items:center; }
.req-card .qico { font-size:20px; filter:drop-shadow(0 2px 0 rgb(43 32 25 / .15)); }
.req-card .qtitle { font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:var(--forest-600); }
.req-card .qtext { font-size:13.5px; font-weight:800; line-height:1.25; }
.req-card.special .qtitle { color:var(--gold-600); }
.req-card.special .qstar { color:var(--gold-200); filter:drop-shadow(0 0 5px rgb(234 177 52 / .9)); }
.req-card.done .qtitle { color:var(--gold-600); }
.req-card.done { animation:glowpulse 1.8s ease-in-out infinite; }

/* ---- HUD: top-right round buttons --------------------------------------- */
#hud-tr {
  position:absolute; top:calc(10px + var(--sat)); right:calc(10px + var(--sar));
  display:flex; flex-direction:column; gap:9px; align-items:flex-end;
}
.rbtn {
  width:46px; height:46px; border-radius:50%;
  background:var(--cream-50); border:2px solid rgb(43 32 25 / .16);
  box-shadow:var(--pop-sm); font-size:21px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform .08s ease;
}
.rbtn:active { transform:translateY(2px) scale(.96); }

/* ---- HUD: the island day dial (right side, under the round buttons) ------
   HUD v2 (2026-07-21, HUD v2 Big Picture H1): the reference's carved medallion.
   The sun/moon no longer orbits the rim — it rests on the face above the day,
   and the day's progress is carried by a 300° gauge arc with a 60° gap at the
   bottom (so midnight reads as "nearly round", never as a closed ring). Both
   --p (arc sweep) and --a (marker angle) are set on #timedial by
   js/ui/timeDial.js and inherit down; the dial still only ever READS the clock.
--------------------------------------------------------------------------- */
/* (2026-07-21) the dial leads the top-left column now, so no top margin */
#timedial { display:flex; flex-direction:column; align-items:center; }
.td-dial {
  position:relative; width:118px; height:118px; border-radius:50%;
  background:var(--cream-50); border:3px solid var(--earth-600);
  box-shadow:var(--pop), var(--soft);
}
/* the day gauge: cool dawn → warm noon → deep dusk, revealed up to --p.
   NOTE the explicit `closest-side`: a bare `circle` radial-gradient sizes to
   FARTHEST-CORNER, so on this square box 100% = the half-diagonal (~70.7px),
   not the 50px radius — percentage stops above ~71% then land outside the
   visible circle and mask the whole arc away. (The old 86px dial's 55% stop
   happened to still fall inside, which is why it looked fine.) */
.td-arc {
  position:absolute; inset:6px; border-radius:50%;
  background:conic-gradient(from 210deg,
    var(--sky-300) 0deg, var(--sky-500) 55deg,
    var(--gold-200) 130deg, var(--gold-400) 205deg,
    var(--red-500) 262deg, var(--sky-600) 300deg);
  -webkit-mask:
    radial-gradient(circle closest-side, transparent 0 76%, #000 80%),
    conic-gradient(from 210deg, #000 0 var(--p, 0deg), transparent var(--p, 0deg));
  -webkit-mask-composite:source-in;
  mask:
    radial-gradient(circle closest-side, transparent 0 76%, #000 80%),
    conic-gradient(from 210deg, #000 0 var(--p, 0deg), transparent var(--p, 0deg));
  mask-composite:intersect;
}
/* the marker rides the arc's leading edge (rotated by --a) — `top` is tuned so
   the dot's CENTRE sits on the band's centre (~45px out), not proud of the rim */
.td-orbit { position:absolute; inset:7px; transform:rotate(var(--a, 210deg)); }
.td-mark {
  position:absolute; top:1px; left:50%; width:13px; height:13px; margin-left:-6.5px;
  border-radius:50%; background:var(--cream-50);
  border:2.5px solid var(--earth-600); box-shadow:0 1px 3px rgb(43 32 25 / .3);
}
.td-core {
  position:absolute; inset:21px; border-radius:50%;
  background:var(--cream-50); box-shadow:inset 0 0 0 2px rgb(43 32 25 / .07);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
}
.td-cel { font-size:19px; line-height:1.05; filter:drop-shadow(0 1px 1px rgb(43 32 25 / .3)); }
.td-day { font-family:var(--font-display); font-weight:800; font-size:19px; color:var(--earth-800); line-height:1.15; }
.td-phase { font-family:var(--font-display); font-weight:700; font-size:10.5px; letter-spacing:.5px; color:var(--muted); line-height:1; }
/* a little posy on the rim, as the reference has — parked in the gauge's own
   60° gap at the bottom, so the travelling marker never collides with it */
.td-posy {
  position:absolute; left:50%; bottom:-3px; margin-left:-9px;
  font-size:17px; line-height:1; pointer-events:none;
  filter:drop-shadow(0 1px 1px rgb(43 32 25 / .25));
}
/* ⚙️ tucks into the medallion's corner instead of the round-button stack.
   Cream, not brown: ⚙️ is a dark glyph and vanished against the earth tone. */
.td-gear {
  position:absolute; right:-4px; top:-4px; width:34px; height:34px; font-size:16px;
  background:var(--cream-50); border-color:var(--earth-600);
}

/* ---- HUD v2 (H5): the floating world prompt -----------------------------
   The verb beside the thing, not parked at the bottom. Positioned in px each
   frame by js/ui/worldPrompt.js; `transform` centres it on the target. Hidden
   on phones (!important because the module sets display inline), where the
   fixed bottom action button is the better thumb target. */
#world-prompt {
  position:fixed; z-index:21; display:none; align-items:center; gap:8px;
  padding:5px 15px 5px 5px; border-radius:999px;
  background:linear-gradient(180deg, var(--cream-50), var(--cream-100));
  border:3px solid var(--earth-600); box-shadow:var(--pop), var(--soft);
  font-family:var(--font-display); font-weight:800; font-size:14.5px;
  color:var(--earth-800); white-space:nowrap;
  transform:translate(-50%, -50%); cursor:pointer; pointer-events:auto;
}
#world-prompt:active { transform:translate(-50%, -50%) scale(.96); }
.wp-ico {
  width:28px; height:28px; border-radius:50%; background:var(--forest-500);
  display:flex; align-items:center; justify-content:center; font-size:15px;
  box-shadow:inset 0 -2px 0 rgb(0 0 0 / .18);
}
@media (max-width:600px){ #world-prompt { display:none !important; } }

/* ---- HUD v2 (H3): the backpack's own corner card — RETIRED --------------
   H3 gave the pack a named card of its own, bottom-right, instead of a 46px
   round button in a stack.
   (2026-07-21, Dexter's direction) #hud-br is RETIRED — 📔 and 🎒 went back up
   to #hud-tr as round .rbtn icons, so nothing occupies the bottom-right corner
   and the action tray owns the whole bottom edge again. HUD v2 H3's labelled
   pack-card treatment is recoverable from git if the look is ever wanted back. */

/* ---- action button (context) -------------------------------------------- */
#action-wrap {
  position:absolute; left:50%; bottom:calc(22px + var(--sab)); transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px; width:max-content; max-width:92vw;
}
#action-btn {
  display:none; align-items:center; gap:10px; font-size:18px; padding:14px 26px;
  border-radius:999px; animation:actin .18s ease;
}
#action-btn .aico { font-size:20px; }
@keyframes actin { from { transform:translateY(14px); opacity:0 } to { transform:translateY(0); opacity:1 } }

/* ---- hold to act (2026-07-22) -------------------------------------------
   Some actions want a SUSTAINED press — the harbour repair is the first
   ("holding [E] 3 sec to do repairing animation"). js/ui/panels.js sets
   --hold (0..1) on both press surfaces while the hold fills; this is the
   only thing that draws it. A warm wash sweeps left→right across the pill,
   under the label, so the button itself is the progress bar — no counter,
   no ring, nothing numeric (canon rule #1). */
/* BUGFIX 2026-07-22 (Dexter: "verb button seem bug it is very long button").
   This was ONE line — `#action-btn, #world-prompt { position:relative }` — and
   it re-declared `position` on the floating pill, which is `position:fixed`
   thirty lines above. Same specificity, later rule wins, so the pill dropped
   out of its screen-projected placement into normal flow and stretched to the
   full width of #hud: a very long button. (Its per-frame left/top in px then
   read as offsets from that static spot, so it landed nowhere near its target
   either.) The containing block for the ::after wash only needs SOME
   positioning — `fixed` already provides it — so the pill must be left alone
   and only the button, which is genuinely static, gets `relative`. */
#action-btn { position:relative; }
#action-btn, #world-prompt { overflow:hidden; }
#action-btn.holding::after, #world-prompt.holding::after {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:linear-gradient(180deg, rgb(244 215 132 / .85), rgb(230 176 74 / .78));
  clip-path:inset(0 calc(100% - var(--hold, 0) * 100%) 0 0);
  transition:clip-path .06s linear;
}
#action-btn.holding > *, #world-prompt.holding > * { position:relative; z-index:1; }

/* ---- (2026-07-21) the quick bar is REMOVED ------------------------------
   Dexter: "I want to remove the hot bar HUD as it is no relative to our game
   recently." The 4-slot tray, its slot/number/count styles and its phone
   layout rules all went with it. The backpack is the single home for carried
   things again; js/ui/quickbar.js is unwired and left on disk. -------------- */

/* ---- seed bar ------------------------------------------------------------ */
#seedbar {
  display:none; gap:8px; padding:10px; border-radius:20px;
  max-width:94vw; overflow-x:auto; scrollbar-width:none;
}
#seedbar::-webkit-scrollbar { display:none; }
.seed-chip {
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:2px;
  background:var(--cream-100); border:2px solid rgb(43 32 25 / .13); border-radius:14px;
  padding:8px 12px; cursor:pointer; min-width:74px;
  box-shadow:var(--pop-sm); transition:transform .1s ease;
  font-family:var(--font-display);
}
.seed-chip:active { transform:translateY(2px); }
.seed-chip .si { font-size:22px; }
.seed-chip .sn { font-size:11.5px; font-weight:800; line-height:1.05; text-align:center; }
.seed-chip .sc { font-size:11px; font-weight:800; color:var(--muted); }
.seed-chip.empty { opacity:.42; }
.seed-chip.cancel { background:var(--cream-200); color:var(--muted); justify-content:center; }
.seed-chip.cancel .si { font-size:18px; }

/* ---- fishing gauge (Canon v2.6: catch-mechanic depth pulled to M1) ------- */
#fish-gauge {
  display:none; flex-direction:column; align-items:center; gap:8px;
  padding:12px 16px; border-radius:20px; width:min(280px, 84vw);
}
#fish-gauge.rare { border-color:var(--gold-400); box-shadow:0 0 0 3px rgb(234 177 52 / .3), var(--pop-sm); }
.fg-label { font-family:var(--font-hand); font-size:15.5px; color:var(--forest-700); text-align:center; }
.fg-track {
  position:relative; width:100%; height:16px; border-radius:999px;
  background:var(--cream-300); overflow:hidden;
}
.fg-zone {
  position:absolute; top:0; bottom:0; background:var(--forest-500); border-radius:999px; opacity:.85;
}
.fg-marker {
  position:absolute; top:-3px; width:6px; height:22px; border-radius:3px;
  background:var(--ink); box-shadow:var(--pop-sm); transform:translateX(-50%); transition:background .1s ease;
}
.fg-track.flash-hit .fg-marker { background:var(--forest-600); }
.fg-track.flash-miss .fg-marker { background:var(--red-600); }
.fg-pips { display:flex; gap:6px; }
.fg-pip { width:9px; height:9px; border-radius:50%; background:var(--cream-300); }
.fg-pip.used { background:var(--red-600); }

/* ---- HUD v2 H6: the two things to hit while fishing ----------------------
   Dexter's playtest note — the tug and the strike each needed an icon of
   their own rather than a text button down at the bottom of the screen.
   Both are owned by js/care/fishing.js. */
/* the tug: appears the instant the line goes tight, in the same spot the
   gauge is about to occupy, so the finger is already there for the strike */
#fish-tug {
  display:none; align-items:center; gap:10px; cursor:pointer;
  padding:9px 20px 9px 9px; border-radius:999px;
  background:linear-gradient(180deg, var(--gold-300), var(--gold-400));
  border:3px solid var(--earth-800);
  box-shadow:0 4px 0 0 var(--gold-600), var(--soft);
  font-family:var(--font-display); font-weight:800; font-size:17px; color:var(--earth-800);
  animation:tugpulse .55s ease-in-out infinite;
}
#fish-tug:active { transform:translateY(3px); box-shadow:0 1px 0 0 var(--gold-600); }
.ft-ico {
  width:36px; height:36px; border-radius:50%; background:var(--red-500);
  display:flex; align-items:center; justify-content:center; font-size:19px;
  box-shadow:inset 0 -2px 0 rgb(0 0 0 / .22);
}
@keyframes tugpulse {
  0%,100% { transform:scale(1);    box-shadow:0 4px 0 0 var(--gold-600), var(--soft); }
  50%     { transform:scale(1.06); box-shadow:0 4px 0 0 var(--gold-600), 0 0 22px 3px rgb(234 177 52 / .7); }
}
/* the strike: sits on the gauge itself, beside the miss pips */
.fg-row { display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; }
#fg-strike {
  display:flex; align-items:center; gap:8px; cursor:pointer;
  padding:8px 16px 8px 8px; border-radius:999px;
  background:var(--forest-600); border:3px solid var(--forest-700);
  box-shadow:0 4px 0 0 var(--forest-700), var(--soft);
  font-family:var(--font-display); font-weight:800; font-size:15px; color:var(--cream-50);
  transition:transform .07s ease;
}
#fg-strike:active { transform:translateY(3px); box-shadow:0 1px 0 0 var(--forest-700); }
.fgs-ico {
  width:30px; height:30px; border-radius:50%; background:var(--cream-50);
  display:flex; align-items:center; justify-content:center; font-size:16px;
  box-shadow:inset 0 -2px 0 rgb(0 0 0 / .15);
}
#fish-gauge.rare #fg-strike { background:var(--gold-400); border-color:var(--gold-600); color:var(--earth-800); box-shadow:0 4px 0 0 var(--gold-600), var(--soft); }
#fish-gauge.rare #fg-strike:active { box-shadow:0 1px 0 0 var(--gold-600); }

/* ---- toasts -------------------------------------------------------------- */
#toasts {
  position:absolute; top:calc(12px + var(--sat)); left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px; width:max-content; max-width:88vw;
  pointer-events:none;
}
.toast {
  font-family:var(--font-hand); font-size:18px; color:var(--ink);
  background:var(--cream-50); border-radius:999px; padding:9px 20px;
  border:2px solid rgb(43 32 25 / .13);
  box-shadow:var(--pop-sm); text-align:center; max-width:88vw;
  animation:toastin .35s cubic-bezier(.34,1.56,.64,1);
  transition:opacity .5s ease, transform .5s ease;
}
.toast.gold { background:linear-gradient(180deg,#fdf3d3,#f9e6ac); }
.toast.out { opacity:0; transform:translateY(-10px); }
@keyframes toastin { from { transform:translateY(-16px) scale(.9); opacity:0 } to { transform:translateY(0) scale(1); opacity:1 } }

/* ---- panels (inventory / settings / postcard) ----------------------------- */
.panel-wrap {
  position:fixed; inset:0; z-index:70; display:none;
  align-items:flex-end; justify-content:center;
  background:rgb(31 26 22 / .35); backdrop-filter:blur(2px);
  padding:12px;
}
@media (min-width:640px){ .panel-wrap { align-items:center; } }
/* Panels v2 (2026-07-21, Panels v2 Big Picture P1): every panel takes the
   references' carved look — a thick wood frame over a parchment face. Applied
   to .panel itself (which always rides with .card), so the settings, chest,
   pool and confirm panels inherit the same furniture for free. */
.panel {
  width:min(560px, 100%); max-height:min(74vh, 620px); overflow-y:auto;
  border-radius:24px; padding:16px 16px calc(16px + var(--sab));
  animation:panelin .28s cubic-bezier(.34,1.4,.64,1);
  background:linear-gradient(180deg, #f8eed6, #f0e1c0);
  border:5px solid var(--earth-600);
  box-shadow:
    inset 0 0 0 2px rgb(122 84 44 / .28),
    inset 0 3px 0 rgb(255 255 255 / .5),
    var(--pop), var(--soft);
}
@keyframes panelin { from { transform:translateY(30px); opacity:0 } to { transform:translateY(0); opacity:1 } }
/* the title sits on its own carved plate across the top of the frame */
.panel h3 {
  font-family:var(--font-display); font-weight:800; font-size:20px; margin:-4px -4px 12px;
  /* wraps rather than overflows: at 320px the title + capacity + coins + ✕ do
     not fit on one line, and a plate that spills is worse than a two-row one */
  display:flex; align-items:center; gap:9px; flex-wrap:wrap; color:var(--cream-50);
  background:linear-gradient(180deg, #7d5730, var(--earth-600));
  border:2px solid var(--earth-800); border-radius:16px;
  padding:9px 10px 9px 14px;
  box-shadow:inset 0 2px 0 rgb(255 255 255 / .16), var(--pop-sm);
  text-shadow:0 2px 0 rgb(43 32 25 / .35);
}
.panel h3 .spacer { flex:1; }
.panel .close-x {
  width:34px; height:34px; border-radius:50%; border:2px solid var(--earth-800); cursor:pointer;
  background:var(--cream-100); font-size:15px; font-weight:800; color:var(--muted);
  box-shadow:var(--pop-sm); flex:0 0 auto;
}
/* the gold coin chip the shop references wear in the frame's corner — shared so
   Miro's shop and Harv's crate can never drift apart */
.coin-chip {
  display:flex; align-items:center; gap:5px; flex:0 0 auto;
  font-family:var(--font-display); font-weight:800; font-size:15px; color:var(--earth-800);
  background:linear-gradient(180deg, var(--gold-200), var(--gold-300));
  border:2px solid var(--earth-800); border-radius:999px; padding:4px 12px 4px 9px;
  box-shadow:inset 0 2px 0 rgb(255 255 255 / .45);
  text-shadow:none;
}
/* the references' reading pane: one detail card the selected cell fills in.
   Nothing is ever shown here that the grid didn't already have. */
.pane-detail {
  margin-top:11px; padding:12px 14px; border-radius:16px;
  background:linear-gradient(180deg, var(--cream-50), var(--cream-100));
  border:3px solid rgb(122 84 44 / .34);
  box-shadow:inset 0 2px 0 rgb(255 255 255 / .6);
  display:flex; gap:13px; align-items:flex-start;
}
.pane-detail.empty { justify-content:center; }
.pd-ico { font-size:40px; line-height:1; flex:0 0 auto; filter:drop-shadow(0 3px 1px rgb(43 32 25 / .2)); }
.pd-body { flex:1; min-width:0; }
.pd-name { font-family:var(--font-display); font-weight:800; font-size:17px; color:var(--earth-800); line-height:1.15; }
.pd-note { font-family:var(--font-hand); font-size:15.5px; color:var(--muted); line-height:1.35; margin-top:2px; }
.pd-hint { font-family:var(--font-hand); font-size:16px; color:var(--muted); text-align:center; padding:6px 4px; }
.pd-price {
  display:inline-flex; align-items:center; gap:4px; margin-top:6px;
  font-family:var(--font-display); font-weight:800; font-size:15px; color:var(--gold-600);
}
.pd-actions { display:flex; gap:7px; flex-wrap:wrap; margin-top:9px; }
/* the counters' one verb is the pane's whole point — it reads as a button, not
   as one more chip in a row (the backpack's chips are a genuine CHOICE between
   verbs and stay equal-weight) */
.pd-actions .inv-action[data-buy],
.pd-actions .inv-action[data-buyrare],
.pd-actions .inv-action[data-buybait],
.pd-actions .inv-action[data-sell] {
  font-size:14px; padding:9px 20px; border-radius:13px;
  background:linear-gradient(180deg, var(--gold-300), var(--gold-400));
  border:2px solid var(--earth-800); color:var(--earth-800);
  box-shadow:0 3px 0 0 var(--gold-600);
}
.pd-actions .inv-action[data-buy]:active,
.pd-actions .inv-action[data-buyrare]:active,
.pd-actions .inv-action[data-buybait]:active,
.pd-actions .inv-action[data-sell]:active { transform:translateY(2px); box-shadow:0 1px 0 0 var(--gold-600); }
.inv-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(96px,1fr)); gap:9px; }
.inv-cell {
  background:var(--cream-100); border-radius:15px; border:2px solid rgb(43 32 25 / .1);
  padding:10px 6px; text-align:center;
}
.inv-cell .ii { font-size:26px; }
.inv-cell .in { font-family:var(--font-display); font-weight:700; font-size:12px; line-height:1.1; margin-top:3px; }
.inv-cell .ic { font-weight:800; font-size:13px; color:var(--muted); }
.inv-cell.zero { opacity:.38; }
.inv-cell.actionable { cursor:pointer; }
.inv-cell.expanded { grid-column:1 / -1; }
/* the Backpack's cells read as bag pockets, not compendium slots (2026-07-15
   directive: the panel looked like a memory/collection board) — scoped to
   #inv-wrap so Miro's shop grid keeps the plain card look.
   Panels v2 (P2): a fixed 5-wide grid of square pockets, count in the corner,
   no label — the name and the verbs moved to the reading pane below. */
/* Panels v2 (P2) + Giving M4: the pocket treatment is a REUSABLE class, not an
   #inv-wrap rule, so the Home chest wears exactly the same pockets the backpack
   does (Dexter, 2026-07-21: "make sure the chest slot uses the same thing as
   the Backpack slot"). Any grid that wants pockets adds .pocket-grid. */
.pocket-grid { grid-template-columns:repeat(5, 1fr); gap:8px; }
.pocket-grid .inv-cell {
  position:relative; aspect-ratio:1; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, #f6e9cf, #efdcba);
  border:2px solid rgb(122 84 44 / .28); border-radius:14px;
  box-shadow:inset 0 2px 0 rgb(255 255 255 / .55), inset 0 -3px 0 rgb(122 84 44 / .12);
  transition:transform .08s ease;
}
.pocket-grid .inv-cell.actionable:active { transform:translateY(2px) scale(.97); }
/* an empty pocket is ROOM — never a silhouette of something undiscovered (E4) */
.pocket-grid .inv-cell.pocket {
  background:rgb(122 84 44 / .13); border-style:dashed; border-color:rgb(122 84 44 / .26);
  box-shadow:none;
}
/* the selected pocket wears the gold ring, same language as the equipped bait */
.pocket-grid .inv-cell.sel {
  border-color:var(--gold-400);
  box-shadow:inset 0 2px 0 rgb(255 255 255 / .55), 0 0 0 3px rgb(234 177 52 / .5);
}
.pocket-grid .inv-cell .ii { font-size:30px; filter:drop-shadow(0 2px 1px rgb(43 32 25 / .18)); }
.pocket-grid .inv-cell .ic {
  position:absolute; right:3px; bottom:2px;
  font-family:var(--font-display); font-weight:800; font-size:12.5px; color:var(--earth-800);
  text-shadow:0 1px 0 #f6e9cf, 0 -1px 0 #f6e9cf, 1px 0 0 #f6e9cf, -1px 0 0 #f6e9cf;
}
.pd-n { font-size:14px; color:var(--muted); }
/* the header's capacity chip — the pip row's job, in four characters */
.cap-chip {
  display:flex; align-items:center; gap:4px; flex:0 0 auto;
  font-family:var(--font-display); font-weight:800; font-size:14px; color:var(--cream-50);
  background:rgb(43 32 25 / .3); border:2px solid rgb(43 32 25 / .35);
  border-radius:999px; padding:3px 11px;
}
@media (max-width:420px){
  .pocket-grid { gap:6px; }
  .pocket-grid .inv-cell .ii { font-size:25px; }
  /* tuned at 320px so the title + capacity + coins + ✕ land on TWO rows, not
     three — measured, not guessed (286px of client width to play with) */
  .panel h3 { font-size:16px; gap:5px; padding:8px 8px 8px 11px; }
  .cap-chip, .coin-chip { font-size:11.5px; padding:3px 7px; gap:3px; }
  .panel .close-x { width:30px; height:30px; font-size:13px; }
  /* the flex:1 spacer eats the whole first row and forces EVERY chip onto its
     own line (a 3-row title plate at 320px). Drop it here and let the ✕ hold
     the right edge on its own, so the plate wraps only when it truly must. */
  .panel h3 .spacer { display:none; }
  .panel h3 .close-x { margin-left:auto; }
  /* #inv-coins must NEVER be hidden here: the HUD's own coins chip was retired
     on 2026-07-21 and hud.js updateHUD() writes this element instead, so it is
     the game's only coin readout. The title plate wraps to two rows on phones
     rather than dropping it. */
}
.inv-empty {
  grid-column:1 / -1; text-align:center; padding:26px 10px;
  font-family:var(--font-hand); font-size:17px; color:var(--muted);
}
/* (Panels v2 P2) the .pack-slots pip row retired — the grid's empty pockets
   state capacity directly now, and the header carries the x/y chip. */
/* the storage chest — two columns, tap to move (Phase 2) */
.cart-actions { display:flex; justify-content:center; margin:0 0 10px; }
.chest-cols { display:flex; gap:14px; align-items:flex-start; }
.chest-col { flex:1 1 0; min-width:0; }
.chest-col-h { font-family:var(--font-display); font-weight:800; font-size:14px; margin:0 0 8px; display:flex; align-items:center; gap:6px; }
.chest-col-h .cap { font-size:12px; color:var(--muted); font-weight:700; }
/* (M4) two narrow columns side by side, so the pockets run 4 across rather than
   the backpack's 5 — the chest's 24 slots then read as a deep, tidy box */
#chest-wrap .pocket-grid { grid-template-columns:repeat(4, 1fr); gap:6px; }
#chest-wrap .pocket-grid .inv-cell .ii { font-size:23px; }
@media (max-width:560px){ .chest-cols { flex-direction:column; } }
/* "New find!" pop — the first-time-ever discovery card (hud.js firstFind) */
#find-pop {
  position:fixed; left:50%; top:calc(20% + var(--sat)); transform:translateX(-50%);
  z-index:60; pointer-events:auto; cursor:pointer;
  background:linear-gradient(180deg, #fff7e6, #f6e6c4);
  border:3px solid rgb(122 84 44 / .35); border-radius:20px;
  padding:14px 26px 12px; text-align:center; box-shadow:var(--soft);
  animation:findPop .45s cubic-bezier(.34,1.56,.64,1) both;
}
#find-pop .fp-icon { font-size:44px; line-height:1.1; filter:drop-shadow(0 3px 2px rgb(43 32 25 / .22)); }
#find-pop .fp-head {
  font-family:var(--font-display); font-weight:800; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; color:#a5761f; margin-top:2px;
}
#find-pop .fp-name { font-family:var(--font-display); font-weight:800; font-size:19px; color:var(--ink); }
#find-pop .fp-note { font-family:var(--font-hand); font-size:14px; color:var(--muted); margin-top:1px; }
#find-pop.out { transition:opacity .5s ease, transform .5s ease; opacity:0; transform:translateX(-50%) translateY(-12px); }
/* (2026-07-22, Dexter: "the new fish will have the new effect around the fish
   ui card") EVERY catch shows this card now, so the celebration has to live on
   the NEW-species variant alone — otherwise landing a fifth Silverling looks
   exactly like a discovery. A golden rim, a breathing halo behind the card and
   a warmer fill; a repeat catch keeps the plain frame above. */
#find-pop.is-new {
  border-color:rgb(212 160 46 / .85);
  background:linear-gradient(180deg, #fffaf0, #f9e9c0);
  box-shadow:var(--soft), 0 0 0 3px rgb(244 215 132 / .45), 0 0 26px 6px rgb(244 200 96 / .38);
}
#find-pop.is-new::before {
  content:''; position:absolute; inset:-10px; border-radius:26px; z-index:-1;
  background:radial-gradient(closest-side, rgb(255 214 110 / .55), rgb(255 214 110 / 0));
  animation:findGlow 1.5s ease-in-out infinite;
}
#find-pop.is-new .fp-icon { animation:findBob 1.4s ease-in-out infinite; }
@keyframes findGlow { 0%,100%{ opacity:.55; transform:scale(.96) } 50%{ opacity:1; transform:scale(1.06) } }
@keyframes findBob  { 0%,100%{ transform:translateY(0) rotate(-3deg) } 50%{ transform:translateY(-5px) rotate(3deg) } }
@media (prefers-reduced-motion:reduce){
  #find-pop.is-new::before, #find-pop.is-new .fp-icon { animation:none; }
}
@keyframes findPop {
  from { opacity:0; transform:translateX(-50%) translateY(14px) scale(.85); }
  to   { opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
}
.inv-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin-top:9px; }
.inv-action {
  font-family:var(--font-display); font-weight:800; font-size:12px;
  padding:7px 11px; border-radius:11px; border:2px solid rgb(43 32 25 / .13);
  background:var(--cream-50); box-shadow:var(--pop-sm); cursor:pointer; transition:transform .1s ease;
}
.inv-action:active { transform:translateY(2px); }
/* ---- Panels v2 (P3): the sellers' stock grid ------------------------------
   Miro's stall and Harv's crate share one renderer (paintStock) and one look:
   square goods with the price on a small plate, the name/flavour/verb in the
   reading pane. Real stock only — the grid is never padded out with ghosts. */
.stock-grid { grid-template-columns:repeat(5, 1fr); gap:8px; }
.inv-cell.stock {
  position:relative; aspect-ratio:1; padding:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  background:linear-gradient(180deg, var(--cream-50), #f0e3c8);
  border:2px solid rgb(122 84 44 / .28); border-radius:14px;
  box-shadow:inset 0 2px 0 rgb(255 255 255 / .6);
  transition:transform .08s ease;
}
.inv-cell.stock:active { transform:translateY(2px) scale(.97); }
.inv-cell.stock.sel {
  border-color:var(--gold-400);
  box-shadow:inset 0 2px 0 rgb(255 255 255 / .6), 0 0 0 3px rgb(234 177 52 / .5);
}
.inv-cell.stock .ii { font-size:27px; line-height:1; filter:drop-shadow(0 2px 1px rgb(43 32 25 / .18)); }
.inv-cell.stock .price {
  font-family:var(--font-display); font-weight:800; font-size:11px; color:var(--gold-600);
  line-height:1; white-space:nowrap;
}
@media (max-width:420px){
  .stock-grid { gap:6px; }
  .inv-cell.stock .ii { font-size:22px; }
  .inv-cell.stock .price { font-size:9.5px; }
}
.shop-tabs { display:flex; gap:8px; margin-bottom:10px; }
.shop-tab {
  flex:1; font-family:var(--font-display); font-weight:800; font-size:14px;
  padding:9px; border-radius:12px; border:2px solid rgb(43 32 25 / .13);
  background:var(--cream-100); color:var(--muted); cursor:pointer; transition:transform .1s ease;
}
.shop-tab.active { background:var(--forest-600); color:var(--cream-50); border-color:var(--forest-700); }
.shop-tab:active { transform:translateY(2px); }
.shop-coins {
  font-family:var(--font-display); font-weight:800; font-size:15px; color:var(--gold-600);
  text-align:center; margin-bottom:10px;
}
.journal-entry {
  font-family:var(--font-hand); font-size:17px; line-height:1.5; color:var(--forest-700);
  padding:10px 0; border-bottom:1px solid rgb(43 32 25 / .08);
}
.journal-entry:last-child { border-bottom:none; }
.journal-entry.empty { color:var(--muted); font-style:italic; }
.panel .section-label {
  font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:1.2px;
  color:var(--muted); margin:16px 2px 8px;
}
.decor-row {
  display:flex; align-items:center; gap:11px; background:var(--cream-100);
  border-radius:15px; padding:10px 12px; margin-bottom:8px; border:2px solid rgb(43 32 25 / .1);
}
.decor-row .di { font-size:26px; }
.decor-row .dm { flex:1; }
.decor-row .dn { font-family:var(--font-display); font-weight:800; font-size:14.5px; }
.decor-row .dd { font-size:12.5px; font-weight:700; color:var(--muted); line-height:1.25; }
.decor-row .btn { padding:9px 14px; font-size:14px; border-radius:12px; }
.decor-row.owned { opacity:.62; }
.settings-row {
  display:flex; align-items:center; gap:12px; padding:11px 4px;
  border-bottom:2px dashed var(--cream-300); font-weight:800; font-size:15.5px;
}
.settings-row:last-child { border-bottom:none; }
.settings-row .sm { flex:1; }
.settings-row .sd { display:block; font-size:12.5px; color:var(--muted); font-weight:700; }
.tog {
  width:58px; height:32px; border-radius:999px; border:none; cursor:pointer; position:relative;
  background:var(--cream-300); transition:background .2s ease; box-shadow:inset 0 2px 4px rgb(43 32 25 /.18);
}
.tog::after {
  content:""; position:absolute; top:4px; left:4px; width:24px; height:24px; border-radius:50%;
  background:var(--cream-50); box-shadow:0 2px 4px rgb(43 32 25 /.3); transition:left .2s ease;
}
.tog.on { background:var(--forest-500); }
.tog.on::after { left:30px; }
.danger-link { font-size:13px; font-weight:800; color:var(--red-600); background:none; border:none; cursor:pointer; padding:8px 2px; }
.credits { font-family:var(--font-hand); text-align:center; color:var(--muted); font-size:15px; margin-top:14px; }

/* ---- the letter (M1-S4; the postcard sharing these rules was retired
   2026-07-23 — the mailbox window is the mailbox's one surface now) --------- */
#letter .panel { background:linear-gradient(180deg, #fffdf6, var(--cream-100)); }
#letter-body {
  font-family:var(--font-hand); font-size:19px; line-height:1.5; color:var(--earth-800);
  background:
    linear-gradient(transparent 0, transparent calc(100% - 2px), rgb(43 32 25 / .07) 0) 0 0 / 100% 32px,
    var(--cream-50);
  border-radius:14px; padding:16px 18px; border:2px solid rgb(43 32 25 / .1);
}
#letter-body .stamp { float:right; font-size:30px; margin:-2px 0 6px 10px;
  background:var(--cream-200); border-radius:8px; padding:6px 8px; border:2px dashed rgb(43 32 25 / .25); }
#letter-body .from { display:block; margin-top:10px; color:var(--muted); }

/* ---- M2-S5: guest book + sign picker (same hand-written idiom as letters) -- */
#guestbook-body .gb-entry { padding:10px 2px; border-bottom:2px dashed rgb(43 32 25 / .15); font-style:italic; }
#guestbook-body .gb-entry:last-child { border-bottom:none; }
#guestbook-body .gb-entry .stamp { float:right; font-size:22px; margin:-2px 0 4px 8px; }
#guestbook-body .gb-entry .from { display:block; margin-top:4px; color:var(--muted); font-style:normal; }
#guestbook-body .gb-later { padding-left:18px; }
/* M3-S3: margin notes — a past visitor's small scrawl beside someone else's
   entry (Bible §6.1: reputation heard back, never counted) */
#guestbook-body .gb-margin { padding:2px 2px 8px 26px; font-size:13px; color:var(--muted); font-style:italic; border-bottom:2px dashed rgb(43 32 25 / .15); }
.signpick-body { display:flex; flex-direction:column; gap:10px; margin-top:8px; }

/* the bed's sleep confirm — two buttons side by side (Sleep till dawn / Not yet) */
.confirm-actions { display:flex; gap:10px; justify-content:center; margin-top:10px; }

/* ---- character creator ------------------------------------------------------ */
#creator {
  position:fixed; z-index:40; display:none;
  left:50%; transform:translateX(-50%);
  bottom:calc(14px + var(--sab));
  width:min(640px, calc(100vw - 20px));
}
#creator .panel-inner { padding:16px 16px 14px; border-radius:24px; }
#creator h3 {
  font-family:var(--font-display); font-weight:800; font-size:clamp(19px,4.6vw,24px);
  margin:0 0 2px; color:var(--forest-700);
}
#creator .hint { font-family:var(--font-hand); font-size:16px; color:var(--muted); margin:0 0 10px; }
.cr-row { display:flex; align-items:center; gap:8px; margin-bottom:9px; flex-wrap:wrap; }
.cr-label { font-size:11px; font-weight:800; letter-spacing:1.1px; text-transform:uppercase; color:var(--muted); width:58px; flex:0 0 58px; }
.cr-opts { display:flex; gap:7px; flex-wrap:wrap; flex:1; }
.cr-chip {
  font-family:var(--font-display); font-weight:700; font-size:13.5px; cursor:pointer;
  background:var(--cream-100); border:2px solid rgb(43 32 25 / .14); color:var(--ink);
  padding:8px 13px; border-radius:999px; box-shadow:var(--pop-sm); transition:all .12s ease;
}
.cr-chip.sel { background:var(--forest-600); color:var(--cream-50); border-color:var(--forest-700); }
.cr-swatch {
  width:34px; height:34px; border-radius:50%; cursor:pointer; border:3px solid rgb(43 32 25 / .16);
  box-shadow:var(--pop-sm); transition:transform .12s ease;
}
.cr-swatch.sel { border-color:var(--gold-400); transform:scale(1.14); box-shadow:0 0 0 3px rgb(234 177 52 / .35), var(--pop-sm); }
#cr-name {
  font-family:var(--font-display); font-weight:800; font-size:16px; color:var(--ink);
  background:var(--cream-100); border:2px solid rgb(43 32 25 / .16); border-radius:12px;
  padding:9px 12px; width:min(220px, 48vw); outline:none;
}
#cr-name:focus { border-color:var(--forest-500); }
#creator .cr-actions { display:flex; gap:10px; margin-top:12px; align-items:center; }
#cr-random { font-size:14px; padding:11px 16px; }
#cr-start { flex:1; font-size:18px; }

/* ---- small screens tune ------------------------------------------------------ */
@media (max-width:520px){
  #harv-quest-card .qtext { font-size:13.5px; }
  .chip { font-size:14px; padding:6px 11px 6px 8px; }
  .rbtn { width:44px; height:44px; font-size:19px; }
  .panel .close-x { width:44px; height:44px; }
  .cr-swatch { width:40px; height:40px; }
  .cr-chip { padding:11px 15px; }
  .decor-row .btn { padding:12px 16px; }
}

/* ============================================================================
   THE COOKING FIRE (2026-07-23) — the cook window's own furniture. Owned by
   js/crafting/kitchen.js, which renders all of it inside #kitchen-grid, so
   nothing here is shared with another panel and nothing else can drift it.
   Note the class prefix: `ck-`. An earlier draft used a bare `.tool`, which
   collided with the recipe header's own tool chip at equal specificity and
   silently repainted it — prefix everything.
============================================================================ */
/* (2026-07-28 BUGFIX) #kitchen-grid still carries the old `.inv-grid` class in
   index.html (display:grid, 96px columns) from the recipe-cell days. The cook
   window's children — stage, cook button, gauge, rows, rack — are a VERTICAL
   STACK, not grid cells, and the grid was crushing them into 96px columns (the
   cook button rendered 96px wide × 400px tall). The ID selector outranks the
   class, so this restores normal block flow without touching the shared markup. */
#kitchen-grid { display:block; }
.ck-stage { display:flex; gap:12px; align-items:flex-start; padding:12px;
  background:var(--cream-50); border:2px solid rgb(43 32 25 / .16); border-radius:18px; box-shadow:var(--pop-sm); }
.ck-art { font-size:46px; line-height:1; flex:0 0 auto; filter:drop-shadow(0 4px 0 rgb(43 32 25 / .12)); }
.ck-meta { min-width:0; }
.ck-name { font-family:var(--font-display); font-weight:800; font-size:17px; }
.ck-desc { font-family:var(--font-hand); font-size:15.5px; color:var(--muted); line-height:1.3; margin:1px 0 7px; }
.ck-chips { display:flex; flex-wrap:wrap; gap:5px; }
.ck-chip { display:inline-flex; align-items:center; gap:4px; font-family:var(--font-display); font-weight:800;
  font-size:12.5px; color:var(--muted); background:var(--cream-200);
  border:2px solid rgb(43 32 25 / .12); border-radius:999px; padding:2px 9px; }
.ck-chip.miss { opacity:.42; filter:grayscale(.7); }
.ck-chip.tool { background:linear-gradient(180deg, var(--gold-200), var(--gold-300));
  border-color:var(--gold-600); color:#5a3f14; }

.ck-cook { display:block; width:100%; margin:11px 0 2px; font-family:var(--font-display); font-weight:800;
  font-size:17px; border:none; border-radius:16px; padding:13px; cursor:pointer; color:var(--ink);
  background:var(--gold-400); box-shadow:0 4px 0 0 var(--gold-600), var(--soft);
  transition:transform .08s ease;
  /* hold-to-cook: keep a long press from selecting text, scrolling, or raising
     the mobile callout menu (2026-07-28) */
  touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.ck-cook:active { transform:translateY(3px); box-shadow:0 1px 0 0 var(--gold-600); }
.ck-cook:disabled { filter:grayscale(.55) opacity(.62); cursor:default; transform:none; }
.ck-cook.armed { background:var(--forest-500); color:var(--cream-50); box-shadow:0 4px 0 0 var(--forest-700), var(--soft); }

.ck-gauge { display:none; margin:9px 0 2px; }
.ck-gauge.on { display:block; }
.ck-trough { position:relative; height:32px; border-radius:12px; overflow:hidden; cursor:pointer;
  background:#4b3623; border:3px solid var(--earth-800); box-shadow:inset 0 3px 8px rgb(0 0 0 / .45); }
.ck-band { position:absolute; top:0; bottom:0; }
.ck-band.great { background:rgb(238 194 83 / .5); }
.ck-band.perfect { background:var(--forest-500); }
.ck-marker { position:absolute; top:-4px; bottom:-4px; width:7px; transform:translateX(-50%);
  background:var(--cream-50); border:2px solid var(--earth-800); border-radius:5px;
  box-shadow:0 0 8px rgb(255 240 200 / .8); }
.ck-hint { font-family:var(--font-hand); font-size:15px; color:var(--muted); text-align:center; margin:5px 0 0; }

.ck-result { display:none; }
.ck-result.on { display:block; margin:9px 0 2px; text-align:center; padding:10px;
  background:var(--cream-50); border:2px solid rgb(43 32 25 / .16); border-radius:16px; box-shadow:var(--pop-sm);
  animation:ckpop .32s cubic-bezier(.34,1.5,.64,1) both; }
.ck-result.perfect { border-color:var(--forest-500); background:#eef7ee; }
@keyframes ckpop { from { transform:scale(.92); opacity:0 } to { transform:scale(1); opacity:1 } }
.ck-rtitle { font-family:var(--font-display); font-weight:800; font-size:16px; }
.ck-rstars { font-size:18px; letter-spacing:2px; }
.ck-rline { font-family:var(--font-hand); font-size:15px; color:var(--muted); margin-top:3px; }

.ck-cap { font-family:var(--font-hand); font-size:15.5px; color:var(--muted); margin:12px 2px 6px; }
.ck-rows { display:flex; flex-direction:column; gap:6px; }
.ck-row { display:flex; gap:9px; align-items:center; width:100%; text-align:left; cursor:pointer; font:inherit;
  background:var(--cream-50); border:2px solid rgb(43 32 25 / .12); border-radius:15px; padding:8px 10px;
  box-shadow:var(--pop-sm); }
.ck-row.on { border-color:var(--forest-500); background:#eef7ee; }
.ck-ri { font-size:24px; line-height:1; flex:0 0 auto; }
.ck-rt { min-width:0; }
.ck-rn { font-family:var(--font-display); font-weight:800; font-size:14px; display:block; line-height:1.15; }
.ck-rq { display:flex; gap:4px; flex-wrap:wrap; margin-top:3px; }
.ck-rq span { font-size:11.5px; font-weight:800; color:var(--muted); background:var(--cream-200);
  border:1.5px solid rgb(43 32 25 / .1); border-radius:999px; padding:1px 6px; }
.ck-rq span.miss { opacity:.4; filter:grayscale(.7); }
.ck-ok { margin-left:auto; color:var(--forest-600); font-size:15px; }

.ck-rack { margin-top:13px; padding-top:11px; border-top:3px dashed rgb(107 74 44 / .3);
  display:flex; gap:9px; align-items:center; flex-wrap:wrap; }
.ck-tool { display:flex; flex-direction:column; align-items:center; gap:2px; cursor:pointer; font:inherit;
  background:var(--cream-100); border:3px solid var(--earth-600); border-radius:16px; padding:7px 13px;
  box-shadow:var(--pop-sm); }
.ck-tool.on { background:linear-gradient(180deg, var(--gold-200), var(--gold-300)); border-color:var(--gold-600); }
.ck-tool.locked { opacity:.5; filter:grayscale(.6); }
.ck-te { font-size:24px; line-height:1; }
.ck-tl { font-family:var(--font-display); font-weight:800; font-size:11.5px; color:var(--muted); }

/* ---- THE GARDEN BOARD (Farming Depth G5, 2026-07-23) — the slate by the farm
   fence. The one place in the game that shows counts and times, by Dexter's
   scoped ruling; it reports and offers no verb. ---- */
.gb-summary { font-family:var(--font-hand); font-size:15.5px; color:var(--muted);
  background:var(--cream-100); border:2px solid rgb(43 32 25 / .1); border-radius:14px;
  padding:7px 11px; margin-bottom:11px; }
.gb-bed { margin-bottom:11px; }
.gb-bed.locked { opacity:.45; }
.gb-bedname { font-family:var(--font-display); font-weight:800; font-size:12.5px;
  color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin:0 2px 5px; }
.gb-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:7px; }
.gb-cell { display:flex; flex-direction:column; align-items:center; gap:1px; text-align:center;
  background:var(--cream-50); border:2px solid rgb(43 32 25 / .12); border-radius:15px;
  padding:8px 6px; box-shadow:var(--pop-sm); min-width:0; }
.gb-cell.ready { border-color:var(--gold-600); background:linear-gradient(180deg, var(--gold-200), var(--gold-300)); }
.gb-cell.empty { border-style:dashed; box-shadow:none; background:transparent; }
.gb-cell.locked { border-style:dashed; box-shadow:none; background:transparent; color:var(--muted); }
.gb-i { font-size:22px; line-height:1.1; }
.gb-n { font-family:var(--font-display); font-weight:800; font-size:12.5px; line-height:1.15;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.gb-t { font-family:var(--font-hand); font-size:13.5px; color:var(--muted); }
.gb-cell.ready .gb-t { color:var(--earth-600); font-weight:800; }
.gb-more { font-size:11px; font-weight:800; color:var(--muted); background:var(--cream-200);
  border:1.5px solid rgb(43 32 25 / .1); border-radius:999px; padding:1px 6px; margin-top:2px; }
.gb-foot { font-family:var(--font-hand); font-size:14px; color:var(--muted);
  border-top:3px dashed rgb(107 74 44 / .3); padding-top:9px; margin-top:3px; }

/* (2026-07-28) actionable cells — a ripe patch and an empty patch are now
   buttons; reset the browser chrome and give a gentle press so they read as
   tappable without breaking the tidy slate look */
button.gb-cell { font:inherit; color:inherit; cursor:pointer; width:100%;
  transition:transform .08s ease, box-shadow .08s ease; touch-action:manipulation; }
button.gb-cell:hover { border-color:var(--gold-600); }
button.gb-cell:active { transform:translateY(2px); box-shadow:none; }
.gb-cell.empty .gb-i { color:var(--muted); font-weight:800; }
button.gb-cell.ready .gb-t { text-transform:uppercase; letter-spacing:.05em; font-size:12px; }

/* the inline seed picker that replaces the beds while planting one quarter */
.gb-pickhead { font-family:var(--font-display); font-weight:800; font-size:13px;
  color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin:2px 2px 9px; }
.gb-seeds { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:7px; margin-bottom:11px; }
@media (max-width:400px){ .gb-seeds { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.gb-seed { display:flex; flex-direction:column; align-items:center; gap:1px; text-align:center;
  font:inherit; color:inherit; cursor:pointer; touch-action:manipulation;
  background:var(--cream-50); border:2px solid rgb(43 32 25 / .12); border-radius:15px;
  padding:9px 6px; box-shadow:var(--pop-sm); transition:transform .08s ease; }
.gb-seed:hover { border-color:var(--gold-600); }
.gb-seed:active { transform:translateY(2px); box-shadow:none; }
.gb-back { font-family:var(--font-display); font-weight:800; font-size:13px; cursor:pointer;
  background:var(--cream-200); color:var(--muted); border:none; border-radius:12px;
  padding:9px 14px; touch-action:manipulation; }

/* THE SECOND FLOATING VERB (2026-07-23) — the campfire offers "Warm up" and
   "Cook" at once (Dexter: "the verb at the campfire should be warm up first
   then the second verb will be cook"). It is a sibling pill created by
   ui/worldPrompt.js and sits directly beneath the primary.
   These properties are duplicated rather than folded into #world-prompt's own
   selector on purpose: that rule sits in the middle of a file another session
   edits, and appending never collides with an in-flight change. */
#world-prompt-2 {
  position:fixed; z-index:21; display:none; align-items:center; gap:8px;
  padding:5px 15px 5px 5px; border-radius:999px;
  background:linear-gradient(180deg, var(--gold-200), var(--gold-300));
  border:3px solid var(--gold-600); box-shadow:var(--pop), var(--soft);
  font-family:var(--font-display); font-weight:800; font-size:14.5px;
  color:#5a3f14; white-space:nowrap;
  transform:translate(-50%, -50%); cursor:pointer; pointer-events:auto;
}
#world-prompt-2:active { transform:translate(-50%, -50%) scale(.96); }
#world-prompt-2 .wp-ico { background:var(--earth-600); }
@media (max-width:600px){ #world-prompt-2 { display:none !important; } }