/* Morning Mysteries — night-garden arcade theme.
   EB Garamond (display) + Inter (UI) to match the bossgames.fun family. */

:root {
  --bg: #101b14;
  --bg-soft: #16241b;
  --card: #1c2d22;
  --card-edge: #2c4233;
  --ink: #e9e4d3;
  --ink-dim: #b3b09c;
  --ink-faint: #90937f; /* ≥4.5:1 on --card so 11-12px helper text and ✗ marks pass WCAG AA */
  --gold: #e8b94c;
  --gold-soft: rgba(232, 185, 76, 0.16);
  --leaf: #7fc97f;
  --leaf-soft: rgba(127, 201, 127, 0.14);
  --crimson: #e06a5a;
  --crimson-soft: rgba(224, 106, 90, 0.15);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --radius: 16px;
  --radius-sm: 9px;
  --font-display: 'EB Garamond', Georgia, serif;
  --font-ui: 'Inter', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(127, 201, 127, 0.07), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(232, 185, 76, 0.05), transparent 55%),
    var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.45;
  min-height: 100dvh;
}

.app {
  max-width: 980px;
  margin: 0 auto;
  padding: 14px 12px calc(40px + env(safe-area-inset-bottom));
  position: relative;
  z-index: 1;
}

/* ---------- fireflies (ambient, toggleable in Settings) ---------- */
#fireflies { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
#fireflies.off { display: none; }
.firefly {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0;
  filter: blur(0.5px);
  box-shadow: 0 0 8px 2px rgba(232, 185, 76, 0.35);
  animation: drift var(--dur) linear infinite, twinkle 3.4s ease-in-out infinite;
  animation-delay: var(--delay), calc(var(--delay) * 0.7);
}
@keyframes drift {
  from { transform: translate(var(--x0), 105vh); }
  to   { transform: translate(var(--x1), -6vh); }
}
@keyframes twinkle {
  0%, 100% { opacity: 0.05; }
  50% { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .firefly { animation: none; opacity: 0.12; }
  .goal-line em { animation: none; }
  .state-card .lantern { animation: none; } /* the loading lantern sways forever too */
}

/* ---------- header ---------- */
.mast {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; padding: 2px 4px 10px;
}
.mast h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;
  margin: 0;
  letter-spacing: 0.01em;
}
.mast .sub { color: var(--ink-dim); font-size: 12.5px; white-space: nowrap; }
.mast .streak { color: var(--gold); font-weight: 600; }
.iconbar { display: flex; gap: 6px; }
.iconbtn {
  all: unset; cursor: pointer; font-size: 17px; line-height: 1;
  padding: 9px 11px; border-radius: var(--radius-sm); /* ≈40px touch target */
  color: var(--ink-dim);
}
.iconbtn:hover, .iconbtn:focus-visible { background: var(--bg-soft); color: var(--ink); }
.iconbtn:focus-visible { outline: 2px solid var(--gold); }

/* ---------- case header card ---------- */
.case-card {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.case-card .case-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 2px;
}
.case-card .case-meta { color: var(--ink-faint); font-size: 12px; margin-bottom: 8px; }

/* ---------- difficulty chip ---------- */
.difficulty-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600;
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--band, var(--card-edge));
  background: var(--band-soft, var(--bg-soft));
  color: var(--band, var(--ink));
  margin-bottom: 10px;
}
.difficulty-pill .dlabel { letter-spacing: 0.02em; }
.difficulty-pill .dnum { color: var(--ink-dim); font-weight: 500; }
.difficulty-pill .dmeter { display: inline-flex; gap: 2px; }
.difficulty-pill .dmeter i {
  width: 5px; height: 11px; border-radius: 1.5px;
  /* empty slots need to read as a 10-segment track against the band-tinted
     pill — --card-edge alone vanished here, so the meter looked like "3 bars"
     instead of "3 of 10". A translucent band tint keeps the scale legible. */
  background: color-mix(in srgb, var(--band, var(--ink-dim)) 22%, transparent);
}
.difficulty-pill .dmeter i.on { background: var(--band, var(--gold)); }
.band-easy   { --band: var(--leaf);    --band-soft: var(--leaf-soft); }
.band-medium { --band: var(--gold);    --band-soft: var(--gold-soft); }
.band-hard   { --band: var(--crimson); --band-soft: var(--crimson-soft); }
.howto-difficulty {
  border-left: 3px solid var(--band, var(--gold));
  background: var(--band-soft, var(--gold-soft));
  padding: 7px 11px; border-radius: var(--radius-sm);
  color: var(--ink);
}
/* "Myst" underline — a misty hint in the wordmark */
.mast h1 u, .ps-brand u { text-decoration-thickness: 2px; text-underline-offset: 2px; }
.mast h1 u { text-decoration-color: var(--gold); }
.case-card .vignette {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16.5px;
  color: var(--ink-dim);
  margin: 0 0 10px;
}
.goal-line {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gold);
  background: var(--gold-soft);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  display: inline-block;
}
.goal-line em {
  font-style: normal;
  display: inline-block;
  animation: goalpulse 2.6s ease-in-out infinite;
}
/* after ~5s the goal has done its job — stop pulsing so it isn't a forever
   distraction (added by a timer in renderGame) */
.goal-line.settled em { animation: none; }
@keyframes goalpulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}

/* ---------- layout: two panes on desktop, tabs on mobile ---------- */
.panes { display: grid; grid-template-columns: 1fr; gap: 12px; }

.tabs {
  display: flex; gap: 4px;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  padding: 3px;
  margin-bottom: 10px;
  position: sticky; top: 8px; z-index: 5;
}
.tab {
  all: unset; cursor: pointer; flex: 1; text-align: center;
  font-size: 13px; font-weight: 500; color: var(--ink-dim);
  padding: 10px 0; border-radius: 7px; /* keeps the tap row ~42px tall */
}
.tab[aria-selected="true"] { background: var(--card); color: var(--ink); border: 1px solid var(--card-edge); }
.tab:focus-visible { outline: 2px solid var(--gold); }
.tab .count {
  background: var(--leaf-soft); color: var(--leaf);
  font-size: 10.5px; border-radius: 9px; padding: 1px 7px; margin-left: 4px;
}

.pane {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 12px;
  /* grid items refuse to shrink below the logic grid's min-content width
     without this — at ≤375px the whole page scrolled sideways */
  min-width: 0;
}
.pane h2 {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 600;
  margin: 0 0 10px; padding: 0 4px;
  color: var(--ink-dim);
}

/* must come after the .tabs/.pane base rules — same specificity, so source
   order is what hides the tabs on desktop */
@media (min-width: 760px) {
  .panes { grid-template-columns: minmax(0, 7fr) minmax(0, 6fr); align-items: start; }
  .tabs { display: none; }
  .pane { display: block !important; }
}

/* ---------- suspects strip (Type B) ---------- */
.suspects { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.suspect {
  all: unset; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 500;
  padding: 8px 12px; /* thumb-sized chips — these get tapped a lot mid-deduction */
  background: var(--bg-soft);
  border: 1px solid var(--card-edge);
  border-radius: 999px;
  color: var(--ink);
}
.suspect:focus-visible { outline: 2px solid var(--gold); }
.suspect.cleared { opacity: 0.45; text-decoration: line-through; }
.suspect.prime { border-color: var(--crimson); background: var(--crimson-soft); }
.suspect .tag { font-size: 10px; color: var(--crimson); font-weight: 700; }
.suspects-hint { font-size: 11px; color: var(--ink-faint); margin: -6px 0 10px; padding: 0 2px; }

/* ---------- grid ---------- */
.gridwrap { overflow-x: auto; padding-bottom: 4px; }
.lgrid { display: grid; gap: 3px; font-size: 10px; min-width: 0; }
.lgrid .corner { min-width: 70px; }
.lgrid .collab {
  display: flex; align-items: center; justify-content: flex-start;
  /* auto height: the grid row sizes to the longest label, so short labels
     (1st…6th) don't leave a dead band above the grid; cap the long ones */
  height: auto; max-height: 110px;
  padding-bottom: 3px;
  color: var(--ink-dim); font-weight: 500; font-size: 10.5px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  margin: 0 auto;
}
.lgrid .rowlab {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 4px; padding-right: 6px;
  color: var(--ink-dim); font-weight: 500; font-size: 12px;
  white-space: nowrap;
}
.lgrid .rowlab .emoji { font-size: 13px; }
.cell {
  all: unset; cursor: pointer;
  aspect-ratio: 1; min-width: 34px; min-height: 34px;
  background: var(--bg-soft);
  border: 1px solid var(--card-edge);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600;
  transition: background 0.12s ease, transform 0.06s ease;
}
.cell:active { transform: scale(0.94); }
.cell:focus-visible { outline: 2px solid var(--gold); }
.cell.x { color: var(--ink-faint); }
.cell.o { color: var(--leaf); background: var(--leaf-soft); border-color: rgba(127, 201, 127, 0.4); }
.cell.hl { box-shadow: inset 0 0 0 2px var(--gold); }
.cell.flash { animation: cellflash 0.9s ease; }
@keyframes cellflash {
  0% { box-shadow: inset 0 0 0 3px var(--gold); }
  100% { box-shadow: inset 0 0 0 0 transparent; }
}
.grid-help { margin: 8px 2px 0; font-size: 11px; color: var(--ink-faint); }

/* ---------- action row ---------- */
.actions { display: flex; gap: 8px; margin-top: 12px; }
.btn {
  all: unset; cursor: pointer; text-align: center;
  font-size: 14px; font-weight: 600;
  padding: 11px 16px; border-radius: 11px;
  background: var(--gold); color: #241b06;
  flex: 1;
  transition: filter 0.12s ease, transform 0.06s ease;
}
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: 2px solid var(--ink); }
.btn.secondary { background: var(--bg-soft); color: var(--ink); border: 1px solid var(--card-edge); flex: 0 0 auto; }
.btn.danger { background: var(--crimson); color: #2a0d09; }
.btn[disabled] { opacity: 0.45; cursor: default; pointer-events: none; }

/* ---------- clues ---------- */
.clue-list { list-style: none; margin: 0; padding: 0; }
.clue {
  display: flex; gap: 8px;
  padding: 9px 8px;
  border-bottom: 1px solid rgba(44, 66, 51, 0.6);
  border-radius: 7px;
  cursor: pointer;
  font-size: 13.5px;
}
.clue:hover { background: var(--bg-soft); }
.clue .num {
  flex: 0 0 auto; color: var(--ink-faint);
  font-size: 11px; font-weight: 600; padding-top: 2px; min-width: 16px;
}
.clue.struck .text { text-decoration: line-through; color: var(--ink-faint); }
.clue .attribution {
  display: block; font-size: 11.5px; color: var(--ink-faint);
  font-style: italic; margin-bottom: 1px;
}
.clue .quote { font-family: var(--font-display); font-size: 14.5px; }
.trust-note {
  font-size: 12px; color: var(--ink-dim);
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  padding: 9px 11px; margin: 0 0 10px;
}
.trust-note b { color: var(--gold); }
.clue-help { margin: 8px 2px 0; font-size: 11px; color: var(--ink-faint); }

/* ---------- modals ---------- */
dialog {
  border: 1px solid var(--card-edge);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
  padding: 20px;
  max-width: min(480px, calc(100vw - 32px));
  width: 100%;
}
dialog::backdrop { background: rgba(5, 10, 7, 0.65); backdrop-filter: blur(2px); }
dialog h2 { font-family: var(--font-display); font-size: 21px; margin: 0 0 10px; }
dialog .dialog-body { font-size: 14px; color: var(--ink-dim); }
dialog .dialog-actions { display: flex; gap: 8px; margin-top: 16px; }

.accuse-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.accuse-option {
  all: unset; cursor: pointer; text-align: center;
  padding: 12px 8px; border-radius: 11px;
  background: var(--bg-soft); border: 1px solid var(--card-edge);
  font-size: 14px; font-weight: 500;
}
.accuse-option:hover { border-color: var(--crimson); background: var(--crimson-soft); }
.accuse-option:focus-visible { outline: 2px solid var(--gold); }
.accuse-option .emoji { display: block; font-size: 22px; margin-bottom: 3px; }
.accuse-option.cleared { opacity: 0.4; }

.hint-text {
  font-size: 14px; line-height: 1.55;
  background: var(--gold-soft);
  border-radius: var(--radius-sm);
  padding: 12px 14px; margin: 10px 0 0;
}

/* one-shot celebration sparkles inside the reveal dialog */
.sparkles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: var(--radius); }
.sparkle {
  position: absolute; left: var(--sx); top: 100%;
  font-size: calc(14px * var(--ss));
  color: var(--gold);
  opacity: 0;
  animation: sparkle-rise 1.9s ease-out var(--sd) 1 forwards;
}
@keyframes sparkle-rise {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  12% { opacity: 0.95; }
  100% { transform: translateY(calc(-90vh * 0.4)) rotate(50deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sparkle { animation: none; opacity: 0; }
}

.reveal-stats { display: flex; gap: 14px; margin: 12px 0; }
.reveal-stat { text-align: center; flex: 1; background: var(--bg-soft); border-radius: var(--radius-sm); padding: 10px 6px; }
.reveal-stat .big { font-size: 19px; font-weight: 700; color: var(--gold); }
.reveal-stat .small { font-size: 11px; color: var(--ink-faint); }
.solution-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 8px 0; }
.solution-table td { padding: 5px 8px; border-bottom: 1px solid rgba(44, 66, 51, 0.6); }
.solution-table td:last-child { color: var(--leaf); font-weight: 500; text-align: right; }
.solution-table tr.culprit-row td { color: var(--crimson); font-weight: 600; }
details.explain { margin-top: 10px; }
details.explain summary { cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--gold); }
.explain ol { margin: 10px 0 0; padding-left: 20px; font-size: 13px; color: var(--ink-dim); }
.explain li { margin-bottom: 7px; }
.share-result {
  white-space: pre-wrap; word-break: break-word; font-size: 13px;
  background: var(--bg-soft); border-radius: var(--radius-sm);
  padding: 10px 12px; margin-top: 10px;
  max-height: 260px; overflow: auto; user-select: all;
}

/* settings */
.setting-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 11px 2px;
  border-bottom: 1px solid rgba(44, 66, 51, 0.6);
  font-size: 14px;
}
.setting-row .desc { font-size: 11.5px; color: var(--ink-faint); }
.switch { position: relative; width: 40px; height: 23px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; position: absolute; z-index: 2; }
.switch .knob {
  position: absolute; inset: 0; border-radius: 999px;
  background: var(--bg-soft); border: 1px solid var(--card-edge);
  transition: background 0.15s ease;
}
.switch .knob::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--ink-dim); transition: transform 0.15s ease, background 0.15s ease;
}
.switch input:checked + .knob { background: var(--leaf-soft); }
.switch input:checked + .knob::after { transform: translateX(17px); background: var(--leaf); }
.switch input:focus-visible + .knob { outline: 2px solid var(--gold); }

/* ---------- state cards (loading / error / done) ---------- */
.state-card {
  text-align: center;
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 48px 20px;
  margin: 18vh auto 0;
  max-width: 420px;
}
.state-card .lantern { font-size: 40px; animation: sway 2.2s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.state-title { font-family: var(--font-display); font-size: 22px; margin: 12px 0 6px; }
.state-sub { color: var(--ink-dim); font-size: 14px; margin: 0 0 14px; }
.state-card .btn { max-width: 220px; margin: 0 auto; display: block; }
.error-detail {
  text-align: left; font-size: 11px; color: var(--ink-faint);
  background: var(--bg-soft); border-radius: var(--radius-sm);
  padding: 8px 10px; margin-top: 14px; word-break: break-word;
}

/* solved banner above the panes */
.solved-banner {
  background: var(--leaf-soft);
  border: 1px solid rgba(127, 201, 127, 0.4);
  color: var(--leaf);
  font-weight: 600; font-size: 13.5px;
  border-radius: var(--radius-sm);
  padding: 10px 14px; margin-bottom: 12px;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.solved-banner .linkish {
  all: unset; cursor: pointer; text-decoration: underline; font-weight: 500; font-size: 12.5px;
  white-space: nowrap; /* keep "View results" on one line — it was breaking mid-phrase */
  /* expanded hit area without shifting layout */
  padding: 10px 6px; margin: -10px -6px;
}

/* version tag (best-practices.md) */
.version-tag {
  position: fixed; right: 6px; bottom: calc(5px + env(safe-area-inset-bottom));
  font-size: 9.5px; color: var(--ink-dim);
  /* a faint backing pill so the tag reads as a deliberate build marker instead
     of text bleeding through the grid cells it sits over on mobile */
  background: rgba(16, 27, 20, 0.72);
  padding: 2px 6px; border-radius: 999px;
  opacity: 0.6; pointer-events: none; z-index: 50;
  font-family: var(--font-ui);
}

/* toast */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  background: var(--ink); color: var(--bg);
  font-size: 13px; font-weight: 500;
  padding: 9px 16px; border-radius: 999px;
  box-shadow: var(--shadow); z-index: 100;
  animation: toastin 0.18s ease;
}
@keyframes toastin { from { opacity: 0; transform: translate(-50%, 8px); } }

@media (max-width: 759px) {
  .pane { display: none; }
  .pane.active { display: block; }
}

/* --- admin tools (settings) ---------------------------------------------------- */
.admin-wrap { margin-top: 4px; }
.admin-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-faint); margin: 0 0 8px;
}
.admin-login { display: flex; gap: 8px; }
.admin-pass {
  flex: 1; padding: 9px 11px; font: inherit; font-size: 14px;
  border: 1px solid var(--card-edge); border-radius: var(--radius-sm);
  background: var(--bg-soft); color: var(--ink);
}
.admin-pass:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.admin-err { color: var(--crimson); font-size: 12.5px; margin-top: 6px; min-height: 1em; }
.ps-rule { border: none; border-top: 1px solid var(--card-edge); margin: 16px 0 12px; }

/* ---------- puzzle-type switcher (top of hierarchy, under the masthead) ---------- */
.mode-block { margin: 0 0 12px; }

/* custom-generation indicator (URL overrides active) */
.override-chip {
  display: inline-block;
  font-size: 11.5px; font-weight: 600;
  color: var(--crimson); background: var(--crimson-soft);
  border: 1px solid var(--crimson);
  border-radius: 999px; padding: 4px 10px;
  margin: 0 0 10px 8px; vertical-align: middle;
}
.mode-switch {
  display: flex; flex-wrap: wrap; gap: 6px;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  padding: 4px;
}
.mode-chip {
  all: unset; cursor: pointer; box-sizing: border-box;
  flex: 1 1 auto; text-align: center;
  font-size: 12.5px; font-weight: 600; color: var(--ink-dim);
  padding: 8px 10px; border-radius: 7px; white-space: nowrap;
}
.mode-chip:hover { color: var(--ink); }
.mode-chip:focus-visible { outline: 2px solid var(--gold); }
.mode-chip.current {
  background: var(--card); color: var(--gold);
  border: 1px solid var(--card-edge);
}
.mode-blurb { font-size: 12px; color: var(--ink-faint); margin: 6px 4px 0; }
.howto-mode {
  background: var(--bg-soft); border-radius: var(--radius-sm);
  padding: 7px 11px;
}

/* ---------- dual-mode sub-grid switcher ---------- */
.cat-tabs { display: flex; gap: 6px; margin: 0 0 10px; }
.cat-tab {
  all: unset; cursor: pointer; box-sizing: border-box;
  font-size: 13px; font-weight: 600; color: var(--ink-dim);
  padding: 8px 13px; border-radius: var(--radius-sm);
  border: 1px solid var(--card-edge); background: var(--bg-soft);
}
.cat-tab:focus-visible { outline: 2px solid var(--gold); }
.cat-tab.current { color: var(--gold); border-color: var(--gold); background: var(--gold-soft); }

/* ---------- directional-mode camp map ---------- */
.camp-map-wrap { margin: 0 0 12px; }
.camp-map {
  display: block; width: 100%; max-width: 420px; margin: 0 auto;
  background: var(--bg-soft);
  border: 1px solid var(--card-edge); border-radius: var(--radius-sm);
}
.map-path { stroke: var(--card-edge); stroke-width: 0.8; }
.map-pin { fill: var(--gold); stroke: var(--bg); stroke-width: 0.6; }
.map-label { font-size: 4.2px; fill: var(--ink-dim); font-family: var(--font-ui); }
.map-compass { font-size: 5px; fill: var(--ink-faint); font-weight: 600; }
.map-help { font-size: 11.5px; color: var(--ink-faint); margin: 6px 4px 0; text-align: center; }

/* clue-list speaker sections — never ambiguous who is talking */
.clue-section {
  list-style: none;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-faint);
  padding: 10px 4px 4px;
  border-bottom: 1px solid var(--card-edge);
  margin-bottom: 6px;
}
.clue-section:first-child { padding-top: 0; }
.ps-clues { list-style: none; padding-left: 4px; }
.ps-cluenum { font-weight: 700; }
.ps-clue-section {
  list-style: none; font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: #444; border-bottom: 1px solid #bbb;
  margin: 8px 0 4px; padding-bottom: 2px;
}

/* ---------- paired-mode clue list ---------- */
.clue .paired-line { display: block; }
.clue .paired-tag {
  display: inline-block; margin-top: 4px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--gold); background: var(--gold-soft);
  border-radius: 9px; padding: 2px 8px;
}

/* solution table with a category header row (dual mode) */
.solution-table .solution-head th {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-faint); text-align: left; padding: 4px 8px;
}

/* admin: which mode the bench generates in */
.admin-status-note { font-size: 11.5px; color: var(--ink-faint); margin: 2px 0 6px; }

/* print: map + per-category grid headers */
.ps-map { max-width: 320px; margin: 6px 0; background: #fff; border: 1px solid #999; }
#print-sheet .map-path { stroke: #bbb; }
#print-sheet .map-pin { fill: #222; stroke: #fff; }
#print-sheet .map-label { fill: #222; }
#print-sheet .map-compass { fill: #555; }
.ps-cathead { font-weight: 700; font-size: 12.5px; margin: 10px 0 2px; }

/* plain printable variant — just clues and visuals, system serif, no flourish */
.ps-plain { font-family: Georgia, 'Times New Roman', serif; }
.ps-plain .ps-brand { font-family: inherit; }
.ps-plain .ps-title { font-family: inherit; font-size: 20px; }
.ps-rules { font-size: 12.5px; line-height: 1.55; margin: 6px 0 12px; }
.ps-plain .ps-clues { font-size: 12.5px; }
.ps-plain .ps-clue-section { color: #222; }

/* ---------- scratch pad (optional, below the puzzle) ---------- */
.scratchpad {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 12px;
  margin-top: 12px;
}
.scratchpad h2 {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 600;
  margin: 0 0 10px; padding: 0 4px;
  color: var(--ink-dim);
}
.scratch-notes {
  width: 100%; box-sizing: border-box; resize: vertical;
  min-height: 64px; padding: 10px 12px;
  font: inherit; font-size: 14px; line-height: 1.45;
  color: var(--ink); background: var(--bg-soft);
  border: 1px solid var(--card-edge); border-radius: var(--radius-sm);
}
.scratch-notes::placeholder { color: var(--ink-faint); }
.scratch-notes:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.scratch-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin: 12px 0 6px;
}
.scratch-hint { font-size: 12px; color: var(--ink-faint); }
.sketch-wrap {
  border: 1px dashed var(--card-edge); border-radius: var(--radius-sm);
  background: var(--bg-soft); overflow: hidden;
}
.sketch-canvas {
  display: block; width: 100%; height: 180px;
  touch-action: none; /* don't scroll the page while sketching */
  cursor: crosshair;
}

/* admin test bench */
.admin-sub {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-faint); margin: 14px 0 7px;
}
.admin-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* the answer-key/print pair: let each button grow to share the row, and wrap
   to full width when "Print with answer" can't fit beside its sibling */
.admin-actions .btn.secondary { flex: 1 1 46%; min-width: 150px; }
.admin-date {
  flex: 1; min-width: 120px; padding: 8px 10px; font: inherit; font-size: 13px;
  border: 1px solid var(--card-edge); border-radius: var(--radius-sm);
  background: var(--bg-soft); color: var(--ink); color-scheme: dark;
}
.admin-date:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.admin-status { font-size: 12px; color: var(--ink-dim); margin-top: 6px; min-height: 1em; }
.admin-select, .admin-variant {
  padding: 8px 10px; font: inherit; font-size: 13px;
  border: 1px solid var(--card-edge); border-radius: var(--radius-sm);
  background: var(--bg-soft); color: var(--ink); color-scheme: dark;
}
.admin-select:focus-visible, .admin-variant:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.admin-variant { width: 92px; }
.btn.band-easy   { border-color: var(--leaf); color: var(--leaf); }
.btn.band-medium { border-color: var(--gold); color: var(--gold); }
.btn.band-hard   { border-color: var(--crimson); color: var(--crimson); }
.btn.tiny { font-size: 12px; padding: 6px 10px; }
.bench-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.bench-chip {
  all: unset; cursor: pointer; box-sizing: border-box;
  font-size: 12.5px; padding: 7px 11px; border-radius: var(--radius-sm);
  border: 1px solid var(--card-edge); background: var(--bg-soft); color: var(--ink-dim);
}
.bench-chip:hover, .bench-chip:focus-visible { color: var(--ink); border-color: var(--ink-faint); }
.bench-chip:focus-visible { outline: 2px solid var(--gold); }
.bench-chip.current { border-color: var(--gold); color: var(--ink); }
.bench-chip.band-easy   { border-left: 3px solid var(--leaf); }
.bench-chip.band-medium { border-left: 3px solid var(--gold); }
.bench-chip.band-hard   { border-left: 3px solid var(--crimson); }

/* --- print sheet (off-screen until printing) ----------------------------------- */
#print-sheet { display: none; }

@media print {
  body > *:not(#print-sheet) { display: none !important; }
  #print-sheet { display: block !important; }
  html, body { background: #fff !important; }
  @page { margin: 14mm; }
}

#print-sheet { color: #111; font-family: var(--font-ui); line-height: 1.45; }
.ps-page { page-break-after: always; }
.ps-page:last-child { page-break-after: auto; }
.ps-answer { page-break-before: always; }
.ps-head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1.5px solid #111; padding-bottom: 6px; margin-bottom: 12px;
}
.ps-brand { font-weight: 700; font-size: 15px; }
.ps-sub { font-size: 11px; color: #555; }
.ps-title { font-family: var(--font-display); font-size: 23px; margin: 8px 0 2px; }
.ps-meta {
  font-size: 11px; color: #555; text-transform: uppercase;
  letter-spacing: 0.05em; margin-bottom: 10px;
}
.ps-vignette {
  font-family: var(--font-display); font-style: italic; font-size: 14px;
  line-height: 1.5; margin: 0 0 10px;
}
.ps-goal { font-weight: 700; font-size: 13.5px; margin-bottom: 14px; }
.ps-h2 { font-size: 14px; margin: 16px 0 7px; border-bottom: 1px solid #bbb; padding-bottom: 3px; }
.ps-grid { border-collapse: collapse; margin: 6px 0 4px; }
.ps-grid th, .ps-grid td { border: 1px solid #333; }
.ps-corner { width: 132px; }
.ps-colh { height: 86px; vertical-align: bottom; padding: 4px 0; }
.ps-colh span {
  display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 11px; white-space: nowrap;
}
.ps-rowh { text-align: left; padding: 5px 8px; font-size: 12.5px; white-space: nowrap; font-weight: 600; }
.ps-cell { width: 26px; height: 26px; text-align: center; font-size: 14px; }
.ps-cell.ps-yes { font-weight: 700; }
.ps-gridhelp { font-size: 11px; color: #666; margin: 2px 0 4px; }
.ps-clues { margin: 4px 0; padding-left: 22px; font-size: 12.5px; line-height: 1.55; }
.ps-clues li { margin-bottom: 6px; }
.ps-attr { font-style: italic; color: #444; }
.ps-proof { margin: 4px 0; padding-left: 22px; font-size: 12px; line-height: 1.5; }
.ps-proof li { margin-bottom: 4px; }
.ps-culprit { font-weight: 700; font-size: 16px; margin: 10px 0 6px; }
.ps-lie { font-size: 13px; margin-bottom: 12px; }
.ps-foot { margin-top: 16px; padding-top: 6px; border-top: 1px solid #bbb; font-size: 10px; color: #888; }