/* CrumbJar website shell, layout + components. Pairs with brand/tokens.css (loaded first),
   which owns all colours, type and the twenty accent slots. This file adds NO new colours;
   it only arranges. Dark mode is inherited from tokens via prefers-color-scheme + data-theme.

   Performance notes (BRIEF-05):
   - No web-font request here: we use the tokens' fallback stacks so there is no font-swap
     layout shift. Self-host Fraunces/Inter (OFL) with font-display:swap before launch.
   - Ad slots reserve their height inline (min-height) so a loading creative never reflows. */

* { box-sizing: border-box; }

/* Always reserve the scrollbar gutter so pages with a scrollbar and pages without one
   line up identically (no horizontal shift when navigating between them). */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; overflow-y: scroll; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; color: var(--ink); }
a { color: var(--toast); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

/* Visible focus everywhere, keyboard navigation is a requirement, not an option. */
:focus-visible { outline: var(--focus); outline-offset: 2px; border-radius: 4px; }

/* Skip link, first tab stop. */
.cj-skip {
  position: absolute; left: -999px; top: 0; z-index: 10;
  background: var(--surface); color: var(--ink);
  padding: 12px 16px; border-radius: var(--radius);
}
.cj-skip:focus { left: 12px; top: 12px; }

/* ---------- header / footer ---------- */
.cj-header {
  display: flex; align-items: center; gap: 16px;
  padding: 0 20px; height: 66px; box-sizing: border-box; border-bottom: 1px solid var(--hairline);
  background: var(--surface); position: sticky; top: 0; z-index: 5;
}
.cj-nav__logout { margin: 0; display: inline-flex; }
.cj-nav__logout button {
  padding: 10px 12px; border: 0; background: transparent; cursor: pointer;
  color: var(--ink-muted); font: inherit; border-radius: var(--radius); min-height: 44px;
}
.cj-nav__logout button:hover { color: var(--ink); background: var(--hairline); }
.cj-brand { text-decoration: none; }
.cj-wordmark { font-family: var(--font-display); font-size: 24px; font-weight: 600; color: var(--ink); }
.cj-wordmark b { color: var(--toast); font-weight: 800; }
.cj-nav { display: flex; gap: 6px; margin-left: auto; }
.cj-nav a {
  padding: 10px 12px; border-radius: var(--radius); text-decoration: none;
  color: var(--ink-muted); min-height: var(--touch-min); display: inline-flex; align-items: center;
}
.cj-nav a[aria-current="page"] { color: var(--ink); background: var(--hairline); }
.cj-nav a:hover { color: var(--ink); }
.cj-theme-toggle {
  min-width: var(--touch-min); min-height: var(--touch-min);
  border: 1px solid var(--hairline); background: var(--surface); color: var(--ink);
  border-radius: var(--radius); font-size: 20px; cursor: pointer;
}

.cj-main { flex: 1; width: 100%; max-width: 1000px; margin: 0 auto; padding: 20px; }

.cj-footer {
  border-top: 1px solid var(--hairline); background: var(--surface);
  padding: 24px 20px; text-align: center; color: var(--ink-muted); font-size: 15px;
}
.cj-footer__line { font-family: var(--font-display); color: var(--ink); font-size: 18px; margin: 0 0 8px; }
.cj-footer__links { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; margin: 8px 0; }
.cj-footer__studio { margin: 8px 0 0; font-size: 14px; }

/* ---------- buttons ---------- */
.cj-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--touch-min); padding: 12px 18px; gap: 8px;
  border-radius: var(--radius); border: 1px solid var(--hairline);
  background: var(--surface); color: var(--ink); font: inherit; font-weight: 600;
  text-decoration: none; cursor: pointer;
}
.cj-btn:hover { border-color: var(--n-300); }
.cj-btn--primary { background: var(--toast); color: #fff; border-color: var(--toast); }
.cj-btn--primary:hover { filter: brightness(0.96); }
.cj-btn--ghost { background: transparent; }
.cj-btn--danger { background: var(--jam); color: #fff; border-color: var(--jam); }

/* ---------- home grid + cards ---------- */
.cj-home__title { font-size: clamp(28px, 6vw, 40px); margin: 0 0 4px; }
.cj-home__greet { color: var(--ink-muted); margin: 0 0 16px; }
.cj-home__ad { margin: 20px 0; }

.cj-sectionhead { margin: 24px 0 12px; }
.cj-sectionhead h2 { font-size: 22px; margin: 0; }
.cj-sectionhead__note { margin: 2px 0 0; color: var(--ink-muted); font-size: 14px; }

.cj-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.cj-grid--muted { opacity: 0.9; }

.cj-card {
  display: flex; flex-direction: column; gap: 8px; height: 100%;
  padding: 16px; border-radius: var(--radius-lg); text-decoration: none;
  background: var(--accent-tint, var(--surface)); border: 2px solid var(--accent, var(--hairline));
  color: var(--accent-deep, var(--ink)); min-height: 132px;
}
.cj-card--live { cursor: pointer; }
.cj-card--live:hover { transform: translateY(-2px); transition: transform .12s ease; }
.cj-card--soon { opacity: 0.7; filter: saturate(0.7); }
.cj-card__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cj-card__name { font-family: var(--font-display); font-weight: 700; font-size: 19px; }
.cj-card__tag { font-size: 14px; color: var(--accent-deep, var(--ink-muted)); flex: 1; }
.cj-card__foot { margin-top: auto; font-size: 13px; font-weight: 600; }
.cj-card__streak { font-variant-numeric: var(--num); font-size: 14px; }
.cj-card__done { color: var(--sage); }

/* ---------- ad slots, reserved space, no layout shift ---------- */
.cj-ad {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; width: 100%;
  border: 1px dashed var(--n-300); border-radius: var(--radius);
  background: repeating-linear-gradient(45deg, transparent, transparent 8px, var(--n-050) 8px, var(--n-050) 16px);
  color: var(--ink-muted); text-align: center; padding: 8px;
}
.cj-ad__label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.cj-ad__note { font-size: 12px; }

/* ---------- daily / rung ---------- */
.cj-back { display: inline-block; margin-bottom: 12px; color: var(--ink-muted); text-decoration: none; }
.cj-daily__title span, .cj-rung__title { color: var(--accent-deep, var(--ink-muted)); font-weight: 400; }
.cj-board-mock {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 240px; border-radius: var(--radius-lg);
  background: var(--accent-tint, var(--n-050)); border: 2px solid var(--accent, var(--hairline));
  color: var(--accent-deep, var(--ink)); font-family: var(--font-display); font-size: 24px; margin: 12px 0;
}
.cj-board-mock small { font-family: var(--font-ui); font-size: 14px; opacity: .8; }
.cj-daily__how { color: var(--accent-deep, var(--ink)); font-weight: 600; margin: 0 0 8px; }
.cj-daily__rule, .cj-daily__brute { color: var(--ink-muted); font-size: 15px; }
.cj-daily__brute { color: var(--jam); font-weight: 600; }
.cj-daily__ladder { margin-top: 24px; padding: 16px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--n-050); }
.cj-daily__ladder h2 { font-size: 18px; margin: 0 0 6px; }

.cj-rung__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.cj-rung__meta { color: var(--ink-muted); font-variant-numeric: var(--num); }
.cj-allowance { background: var(--n-050); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 12px 16px; margin: 12px 0; }
.cj-allowance__item { font-weight: 700; margin-right: 16px; font-variant-numeric: var(--num); }
.cj-allowance__note { font-size: 13px; color: var(--ink-muted); margin: 6px 0 0; }
.cj-rung__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.cj-rung__ad { margin: 16px 0; }
.cj-rung__nav { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; }
.cj-rung__end { text-align: center; margin-top: 12px; }

/* ---------- results / share / cross-promo / tip jar ---------- */
.cj-results__title { font-size: clamp(24px, 5vw, 34px); }
.cj-results__art { margin: 12px 0; }
.cj-share {
  width: 100%; height: auto; max-width: 460px; border-radius: 28px;
  display: block;
  /* Themeable colours. Defaults derive from the game accent family + base tokens; a colour theme
     (data-card-theme) overrides these below. The result is one flat, shareable, image-request-free SVG. */
  --card-field: var(--paper);
  --card-keyline: var(--accent);
  --card-name: var(--accent-deep);
  --card-ink: var(--ink);
  --card-ink-soft: var(--ink-muted);
  --card-brand: #B4531F;
}
/* Colour themes, the player-tailorable palettes (see web/pages/_shareThemes.ts). Keep ids in sync. */
.cj-share[data-card-theme="midnight"] {
  --card-field: #171310; --card-keyline: var(--accent); --card-name: #F3EADB;
  --card-ink: #F3EADB; --card-ink-soft: #B0A18C; --card-brand: #E0894E;
}
.cj-share[data-card-theme="mint"] {
  --card-field: #DAF2E6; --card-keyline: #009C8B; --card-name: #00695A;
  --card-ink: #173A2E; --card-ink-soft: #3E6B5B; --card-brand: #B4531F;
}
.cj-share[data-card-theme="berry"] {
  --card-field: #FBE4F0; --card-keyline: #B66897; --card-name: #803765;
  --card-ink: #3A1E30; --card-ink-soft: #6B4A5C; --card-brand: #B4531F;
}
.cj-share[data-card-theme="mono"] {
  --card-field: #FBF5EA; --card-keyline: #4A4A4A; --card-name: #2B2B2B;
  --card-ink: #1A1A1A; --card-ink-soft: #6A6A6A; --card-brand: #4A4A4A;
}
.cj-results__share { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 20px; }

/* Colour-theme switcher: a row of labelled swatches under the card. */
.cj-share__themes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 4px 0 12px; }
.cj-share__swatch {
  display: inline-flex; align-items: center; gap: 6px;
  border: 2px solid var(--line, #E4D9C4); border-radius: 999px;
  background: var(--paper); color: var(--ink); cursor: pointer;
  padding: 5px 12px 5px 6px; font: 600 13px/1 var(--font-ui);
}
.cj-share__swatch::before {
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  background: var(--swatch); border: 1px solid rgba(0,0,0,0.18); flex: none;
}
.cj-share__swatch[aria-pressed="true"] { border-color: var(--accent, #B4531F); box-shadow: 0 0 0 2px var(--accent-tint, #FFE4E3); }
.cj-share__swatch:focus-visible { outline: 3px solid var(--accent, #B4531F); outline-offset: 2px; }

.cj-xpromo { margin: 24px 0; }
.cj-xpromo h2 { font-size: 20px; }
.cj-xpromo__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); }
.cj-xpromo__card {
  display: flex; flex-direction: column; gap: 4px; padding: 16px; text-decoration: none;
  border-radius: var(--radius-lg); background: var(--accent-tint); border: 2px solid var(--accent); color: var(--accent-deep);
}
.cj-xpromo__lead { font-size: 13px; }
.cj-xpromo__name { font-family: var(--font-display); font-weight: 700; font-size: 19px; }
.cj-xpromo__tag { font-size: 14px; }

.cj-tipjar, .cj-about__support {
  margin: 24px 0; padding: 20px; border-radius: var(--radius-lg);
  background: var(--accent-tint, var(--n-050)); border: 1px solid var(--accent, var(--hairline)); color: var(--accent-deep, var(--ink));
}
.cj-tipjar h2, .cj-about__support h2 { margin: 0 0 8px; font-size: 20px; }
.cj-tipjar__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* ---------- leaderboards ---------- */
.cj-board { margin: 20px 0; }
.cj-board h2 { font-size: 20px; margin: 0 0 4px; }
.cj-board__note { color: var(--ink-muted); font-size: 14px; margin: 0 0 8px; }
.cj-board__list { list-style: none; margin: 0; padding: 0; }
.cj-board__row { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px;
  padding: 10px 12px; border-bottom: 1px solid var(--hairline); }
.cj-board__rank { font-variant-numeric: var(--num); color: var(--ink-muted); font-weight: 700; }
.cj-board__score { font-variant-numeric: var(--num); font-weight: 700; }
.cj-leaderboards__ad { margin: 16px 0; }

/* ---------- account / consent ---------- */
.cj-acct__title, .cj-consent__title, .cj-legal__title, .cj-about__title, .cj-legaldoc__title { font-size: clamp(26px,5vw,36px); }
.cj-acct__block { padding: 16px 0; border-bottom: 1px solid var(--hairline); }
.cj-acct__block--danger { border: 1px solid var(--jam); border-radius: var(--radius); padding: 16px; margin-top: 16px; }
.cj-acct__now { font-weight: 600; }
.cj-acct__help { color: var(--ink-muted); font-size: 14px; }
.cj-acct__optional { font-size: 12px; color: var(--ink-muted); font-weight: 400; }
.cj-acct__ages, .cj-consent__choices { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.cj-chip {
  min-height: var(--touch-min); padding: 10px 16px; border-radius: 999px;
  border: 1px solid var(--n-300); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer;
}
.cj-chip[aria-pressed="true"] { background: var(--toast); color: #fff; border-color: var(--toast); }
.cj-acct__country { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; }
.cj-acct__country input { min-height: var(--touch-min); padding: 8px 12px; border-radius: var(--radius); border: 1px solid var(--n-300); font: inherit; text-transform: uppercase; width: 5em; }
.cj-acct__follows { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cj-acct__follow { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--accent-tint); color: var(--accent-deep); border: 1px solid var(--accent); font-size: 14px; }

/* Consent: both choices share this class → equal visual weight, by construction. */
.cj-consent__choice { flex: 1 1 200px; }
.cj-consent__body { color: var(--ink-muted); }
.cj-consent__ver { font-size: 13px; color: var(--ink-muted); }

/* ---------- legal ---------- */
.cj-legal__index { list-style: none; padding: 0; }
.cj-legal__index li { padding: 12px 0; border-bottom: 1px solid var(--hairline); display: flex; flex-direction: column; }
.cj-legal__ver { font-size: 13px; color: var(--ink-muted); }
.cj-legaldoc__ver { color: var(--ink-muted); font-size: 14px; }
.cj-legaldoc__body h3 { font-size: 17px; margin: 16px 0 4px; }
.cj-legal__archive { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.cj-legal__archive ul { padding-left: 18px; }

.cj-error { text-align: center; padding: 40px 0; }

/* ---------- title mount surface (reference template styling) ---------- */
.cj-ref { margin: 12px 0; }
.cj-ref__grid { display: grid; gap: 6px; max-width: 360px; margin: 0 auto; }
.cj-ref-cell {
  aspect-ratio: 1 / 1; min-height: 40px; border-radius: 8px;
  border: 1px solid var(--n-300); background: var(--surface); cursor: pointer;
}
.cj-ref-cell[data-lit="1"] { background: var(--accent, var(--toast)); border-color: var(--accent-deep, var(--toast)); }
.cj-ref-cell[aria-pressed="true"] { outline: var(--focus); }
.cj-ref__cap { text-align: center; color: var(--ink-muted); font-size: 13px; margin: 8px 0 0; }

/* Blend, code-deduction board (BRIEF-09a / BRIEF-12). Thin, tactile, no colour-only meaning. */
.cj-blend { display: flex; flex-direction: column; gap: 12px; margin: 12px 0; }
.cj-blend__history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cj-blend__row {
  font-variant-numeric: tabular-nums; letter-spacing: 2px; font-size: 20px;
  padding: 8px 12px; background: var(--surface); border: 1px solid var(--n-300); border-radius: 10px;
}
.cj-blend__entry { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cj-blend__digit {
  width: 48px; height: 56px; text-align: center; font-size: 24px; font-variant-numeric: tabular-nums;
  border: 2px solid var(--n-300); border-radius: 10px; background: var(--surface); color: var(--ink);
}
.cj-blend__digit:focus { outline: var(--focus); border-color: var(--accent, var(--toast)); }
.cj-blend__status { min-height: 1.4em; color: var(--ink-muted); margin: 0; }
.cj-blend__nojs { color: var(--ink-muted); }

/* Pits, the minefield. Chunky, tactile, legible on a phone; the clue is a NUMBER (never colour
   alone). A warm kitchen palette; the swept cascade reads instantly. (BRIEF-09b / DR-035.) */
/* ---------- Pits: the classic minesweeper cabinet ----------
   Deliberately borrowed: the bevelled grey frame, the sunken LED counters, the face, the raised
   cells that press in when you open them. Players read this layout instantly, and the bevels do
   real work — a raised cell is obviously untouched, a sunken one obviously opened, with no colour
   involved at all, which is exactly what an accessible board wants. */
.cj-pits { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; align-items: center;
  --pits-face: #bdc3c7; --pits-lo: #7f8c8d; --pits-hi: #ecf0f1; --pits-body: #4a5459; }
.cj-pits__count { margin: 0; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* The HUD strip: sunken well, LEDs at each end, face in the middle. */
.cj-pits__hud {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: min(92vw, 460px); padding: 8px 10px; background: var(--pits-face);
  border-top: 3px solid var(--pits-lo); border-left: 3px solid var(--pits-lo);
  border-bottom: 3px solid var(--pits-hi); border-right: 3px solid var(--pits-hi);
}
.cj-pits__led {
  font: 700 26px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: .06em; color: #ff2d2d; background: #1a0000; padding: 4px 8px;
  text-shadow: 0 0 6px rgba(255,45,45,.65); font-variant-numeric: tabular-nums;
  border-top: 2px solid var(--pits-lo); border-left: 2px solid var(--pits-lo);
  border-bottom: 2px solid var(--pits-hi); border-right: 2px solid var(--pits-hi);
}
.cj-pits__face {
  width: 44px; height: 44px; padding: 0; cursor: default; background: var(--pits-face);
  border-top: 3px solid var(--pits-hi); border-left: 3px solid var(--pits-hi);
  border-bottom: 3px solid var(--pits-lo); border-right: 3px solid var(--pits-lo);
  display: grid; place-items: center; font-size: 24px; line-height: 1;
}
.cj-pits__face[data-state="won"] { background: #f6e58d; }
.cj-pits__face[data-state="lost"] { background: #e8a49a; }

/* The field sits in its own sunken well, like the original. */
.cj-pits__frame {
  padding: 8px; background: var(--pits-face);
  border-top: 3px solid var(--pits-lo); border-left: 3px solid var(--pits-lo);
  border-bottom: 3px solid var(--pits-hi); border-right: 3px solid var(--pits-hi);
}
.cj-pits__grid { display: grid; gap: 1px; background: var(--pits-lo); max-width: min(88vw, 420px); touch-action: manipulation; }
.cj-pits__cell {
  aspect-ratio: 1 / 1; min-width: 26px; padding: 0; border-radius: 0; cursor: pointer;
  background: var(--pits-face); color: #111;
  border-top: 3px solid var(--pits-hi); border-left: 3px solid var(--pits-hi);
  border-bottom: 3px solid var(--pits-lo); border-right: 3px solid var(--pits-lo);
  font: 700 clamp(13px, 3.6vw, 18px)/1 ui-monospace, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums; display: flex; align-items: center; justify-content: center;
}
.cj-pits__cell:focus-visible { outline: var(--focus); outline-offset: -3px; }
/* Opened: the bevel goes flat, which is the whole visual language of the game. */
.cj-pits__cell--open {
  background: var(--pits-face); border: 1px solid var(--pits-lo); cursor: default;
  box-shadow: none; transform: none;
}
/* The canonical clue colours, kept because experienced players read the board by them. Each is only
   ever a reinforcement of the digit itself, which is always present. */
.cj-pits__cell--open[data-n="1"] { color: #1447e6; }
.cj-pits__cell--open[data-n="2"] { color: #157f3b; }
.cj-pits__cell--open[data-n="3"] { color: #c0392b; }
.cj-pits__cell--open[data-n="4"] { color: #1b2a6b; }
.cj-pits__cell--open[data-n="5"] { color: #7b241c; }
.cj-pits__cell--open[data-n="6"] { color: #0e6b6b; }
.cj-pits__cell--open[data-n="7"] { color: #17202a; }
.cj-pits__cell--open[data-n="8"] { color: #566573; }
.cj-pits__cell--flag { background: var(--pits-face); }
.cj-pits__cell--flag::after { content: "\2691"; color: #c0392b; }
.cj-pits__cell--pit { background: #b3402e; color: #fff; }
.cj-pits__cell--pit::after { content: "\1F4A3"; }

/* The end-of-round panel: the round is over and you can see that it is. */
.cj-pits__end {
  width: min(92vw, 460px); text-align: center; padding: 18px 16px; border-radius: 14px;
  border: 2px solid var(--accent, #B4531F); background: var(--surface);
  box-shadow: 0 8px 24px -12px rgba(0,0,0,.4); animation: cj-pits-pop .28s ease-out;
}
.cj-pits__end[hidden] { display: none; }
.cj-pits__end--lost { border-color: #b3402e; }
.cj-pits__endtitle { margin: 0 0 4px; font: 800 24px/1.1 var(--font-display); color: var(--accent-deep, var(--ink)); }
.cj-pits__end--lost .cj-pits__endtitle { color: #b3402e; }
.cj-pits__endsub { margin: 0 0 14px; color: var(--ink-muted); font: 500 14px/1.4 var(--font-ui); }
@keyframes cj-pits-pop { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cj-pits__end { animation: none; } }

.cj-pits__status { min-height: 1.4em; color: var(--ink-muted); margin: 0; }
.cj-pits__nojs { color: var(--ink-muted); }

/* Recipe, cryptogram on a warm recipe card (BRIEF-09d). The board is server-rendered; recipe.js
   only fills letters in. Meaning never rides on colour alone, the cipher symbol is always shown. */
.cj-recipe {
  margin: 12px 0; padding: 18px 16px; border-radius: var(--radius-lg, 16px);
  background: var(--surface, #fff); border: 1px solid var(--hairline);
  box-shadow: inset 0 0 0 2px var(--paper), 0 1px 0 var(--hairline);
}
.cj-recipe__hint { margin: 0 0 14px; color: var(--ink-muted); font-size: 14px; }
.cj-recipe__line { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 2px; line-height: 1.9; }
.cj-recipe__space { width: 12px; display: inline-block; }
.cj-recipe__punc { color: var(--ink-muted); align-self: flex-end; padding: 0 1px 6px; font-size: 18px; }
.cj-recipe__slot { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.cj-recipe__cell {
  width: 24px; height: 30px; text-align: center; text-transform: uppercase;
  border: none; border-bottom: 2px solid var(--n-300, var(--hairline)); background: transparent;
  color: var(--ink); font-family: var(--font-display); font-size: 20px; padding: 0; border-radius: 2px;
}
.cj-recipe__cell:focus { outline: var(--focus); background: var(--n-100, var(--paper)); }
.cj-recipe__cell[data-given="1"] { color: var(--toast); border-bottom-color: var(--toast); }
.cj-recipe__cell--locked { border-bottom-color: var(--accent, var(--toast)); animation: cj-recipe-lock 120ms ease-out; }
.cj-recipe__cipher { font-size: 11px; color: var(--ink-muted); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.cj-recipe__entry { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.cj-recipe__reveals { color: var(--ink-muted); font-size: 14px; }
.cj-recipe__status { min-height: 1.4em; color: var(--ink-muted); margin: 8px 0 0; }
.cj-recipe__nojs { color: var(--ink-muted); }
@keyframes cj-recipe-lock { from { transform: translateY(-2px); opacity: .5; } to { transform: none; opacity: 1; } }

/* Peel, loop drawing / slitherlink (BRIEF-09e / DR-035). Understated dots + numbers; the drawn line
   is the hero, a glossy apple-peel ribbon. Meaning never rides on colour alone: a drawn edge is a
   solid thick segment (off is faint), and every edge button carries aria-pressed for screen readers. */
.cj-peel { display: flex; flex-direction: column; gap: 12px; margin: 12px 0; align-items: center;
  --cj-peel-dot: 8px; --cj-peel-cell: clamp(28px, 8vw, 44px); --cj-peel-line: var(--accent-deep, #b3402e); }
.cj-peel__grid { display: grid; justify-content: center; align-content: center;
  max-width: 96vw; touch-action: none; padding: 10px; }
.cj-peel__dot { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.cj-peel__dot::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--n-300, var(--hairline)); }
.cj-peel__cell { width: 100%; height: 100%; }
.cj-peel__clue { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  color: var(--ink-muted); font-variant-numeric: tabular-nums; font-weight: 600; font-size: clamp(13px, 3.4vw, 17px); }
.cj-peel__edge { border: none; background: transparent; padding: 0; margin: 0; cursor: pointer; position: relative;
  border-radius: 999px; }
.cj-peel__edge:focus-visible { outline: var(--focus); outline-offset: 1px; }
.cj-peel__edge--h { width: 100%; height: var(--cj-peel-dot); align-self: center; }
.cj-peel__edge--v { height: 100%; width: var(--cj-peel-dot); justify-self: center; }
/* The faint "you could draw here" hint, then the solid ribbon when drawn. */
.cj-peel__edge::before { content: ""; position: absolute; inset: 0; margin: auto; border-radius: 999px;
  background: var(--n-200, var(--hairline)); opacity: .35; }
.cj-peel__edge--h::before { height: 3px; }
.cj-peel__edge--v::before { width: 3px; }
.cj-peel__edge--on::before { background: var(--cj-peel-line); opacity: 1; box-shadow: 0 1px 0 rgba(0,0,0,.12);
  transition: background 120ms ease-out; }
.cj-peel__edge--h.cj-peel__edge--on::before { height: 6px; }
.cj-peel__edge--v.cj-peel__edge--on::before { width: 6px; }
.cj-peel__bar { display: flex; align-items: center; gap: 12px; }
.cj-peel__clear { border: 1px solid var(--hairline); background: var(--surface, #fff); color: var(--ink);
  border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.cj-peel__clear:focus-visible { outline: var(--focus); }
.cj-peel__status { min-height: 1.4em; color: var(--ink-muted); margin: 0; }
.cj-peel__nojs { color: var(--ink-muted); }
/* The finish: the whole ribbon gives one gentle, satisfying "peel" when the loop closes. */
.cj-peel--closed .cj-peel__edge--on::before { animation: cj-peel-close 420ms ease-out; }
@keyframes cj-peel-close { 0% { transform: scale(1); } 40% { transform: scale(1.25); filter: brightness(1.15); } 100% { transform: scale(1); } }

/* Respect reduced motion. */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media (prefers-reduced-motion: reduce) { .cj-peel--closed .cj-peel__edge--on::before { animation: none !important; } }

/* Skewer, bridge building (BRIEF-09f). Warm ingredient nodes joined by amber skewers; the whole
   board lights up in one beat when the network is complete (DR-035 twist). Meaning is never carried by
   colour alone, the number and a "satisfied" ring/shape change carry it too. */
.cj-skewer { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; align-items: center; }
.cj-skewer__hint { margin: 0; color: var(--ink-muted); font-size: 14px; max-width: 46ch; text-align: center; }
.cj-skewer__grid {
  position: relative; display: grid; gap: 0;
  width: min(92vw, 460px); aspect-ratio: 1 / 1; touch-action: manipulation;
}
.cj-skewer__links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cj-skewer__skewer { stroke: var(--accent-deep, #c07a33); stroke-width: 3; stroke-linecap: round; }
.cj-skewer__island {
  place-self: center; width: clamp(26px, 8vw, 40px); height: clamp(26px, 8vw, 40px);
  display: inline-flex; align-items: center; justify-content: center; z-index: 1;
  border: 2px solid var(--accent-deep, #c07a33); border-radius: 50%;
  background: var(--surface, #fff); color: var(--ink, #2a2016);
  font-variant-numeric: tabular-nums; font-weight: 600; font-size: clamp(13px, 4vw, 17px);
  cursor: pointer; transition: transform 120ms ease, box-shadow 120ms ease, background 160ms ease;
}
.cj-skewer__island:focus-visible { outline: var(--focus); }
.cj-skewer__island[data-selected="1"] { transform: scale(1.12); box-shadow: 0 0 0 3px var(--accent, #e6c79c); }
/* Satisfied: filled node + a ring (shape change, not colour alone). Over-connected: a warning ring. */
.cj-skewer__island[data-satisfied="1"] { background: var(--accent, #e6c79c); box-shadow: inset 0 0 0 2px var(--surface, #fff); }
.cj-skewer__island[data-over="1"] { border-color: #b3402e; color: #b3402e; box-shadow: 0 0 0 2px #b3402e; }
.cj-skewer__status { min-height: 1.4em; color: var(--ink-muted); margin: 0; }
.cj-skewer__nojs { color: var(--ink-muted); }
/* The "everything connects" finish, one satisfying beat. */
.cj-skewer[data-cj-skewer-lit="1"] .cj-skewer__island { animation: cj-skewer-glow 620ms ease; }
.cj-skewer[data-cj-skewer-lit="1"] .cj-skewer__skewer { animation: cj-skewer-lit 620ms ease; }
@keyframes cj-skewer-glow { 0% { transform: scale(1); } 45% { transform: scale(1.18); filter: brightness(1.15); } 100% { transform: scale(1); } }
@keyframes cj-skewer-lit { 0% { stroke-width: 3; } 45% { stroke-width: 5; filter: brightness(1.2); } 100% { stroke-width: 3; } }
@media (prefers-reduced-motion: reduce) { .cj-skewer[data-cj-skewer-lit="1"] .cj-skewer__island, .cj-skewer[data-cj-skewer-lit="1"] .cj-skewer__skewer { animation: none !important; } }

/* Speckle, picture-reveal / nonogram (BRIEF-09i / DR-035). Legible clue headers; the FILL is the hero
, an empty cell is a faint outline, a filled cell a solid speck. Meaning never rides on colour alone:
   a filled cell is a solid block vs an open outline, and every cell carries aria-pressed + a spoken
   "filled/empty" label. On completion the whole picture paints in with one gentle settle. */
.cj-speckle { display: flex; flex-direction: column; gap: 12px; margin: 12px 0; align-items: center;
  --cj-speckle-cell: clamp(24px, 7.5vw, 40px); --cj-speckle-ink: var(--accent-deep, #6a5138); }
.cj-speckle__board { display: grid; justify-content: center; align-content: center;
  max-width: 96vw; touch-action: none; padding: 6px; }
.cj-speckle__corner { width: 100%; height: 100%; }
.cj-speckle__cclue { display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 1px; padding: 2px 0 4px; color: var(--ink-muted); font-variant-numeric: tabular-nums; font-weight: 600;
  font-size: clamp(11px, 3vw, 15px); line-height: 1.05; }
.cj-speckle__rclue { display: flex; flex-direction: row; align-items: center; justify-content: flex-end;
  gap: 5px; padding: 0 6px 0 2px; color: var(--ink-muted); font-variant-numeric: tabular-nums; font-weight: 600;
  font-size: clamp(11px, 3vw, 15px); line-height: 1; }
.cj-speckle__cell { width: 100%; height: 100%; padding: 0; margin: 0; cursor: pointer;
  background: var(--surface, #fff); border: 1px solid var(--hairline); box-sizing: border-box; }
.cj-speckle__cell:focus-visible { outline: var(--focus); outline-offset: -2px; z-index: 1; }
/* Filled = a solid speck (shape/fill change, not colour alone). A tiny inset keeps the grid lines legible. */
.cj-speckle__cell--on { background: var(--cj-speckle-ink); box-shadow: inset 0 0 0 1px var(--surface, #fff);
  transition: background 90ms ease-out; }
.cj-speckle__bar { display: flex; align-items: center; gap: 12px; }
.cj-speckle__clear { border: 1px solid var(--hairline); background: var(--surface, #fff); color: var(--ink);
  border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.cj-speckle__clear:focus-visible { outline: var(--focus); }
.cj-speckle__status { min-height: 1.4em; color: var(--ink-muted); margin: 0; }
.cj-speckle__nojs { color: var(--ink-muted); }
/* The finish: the revealed picture settles in one gentle beat. */
.cj-speckle--done .cj-speckle__cell--on { animation: cj-speckle-paint 460ms ease-out both; }
@keyframes cj-speckle-paint { 0% { transform: scale(.78); opacity: .5; } 55% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cj-speckle--done .cj-speckle__cell--on { animation: none !important; } }

/* Measure, cross-sums / kakuro on a recipe card (BRIEF-09g / DR-035). Clues are "measuring targets":
   the down target sits low-left, the across target high-right, split by a hairline diagonal, a shape,
   never colour alone. The board is server-rendered; measure.js only fills digits in. Airy grid, legible
   sums, tabular numerals so runs line up. */
.cj-measure {
  margin: 12px 0; padding: 18px 16px; border-radius: var(--radius-lg, 16px);
  background: var(--surface, #fff); border: 1px solid var(--hairline);
  box-shadow: inset 0 0 0 2px var(--paper), 0 1px 0 var(--hairline);
  --cj-measure-cell: clamp(30px, 8.5vw, 46px);
}
.cj-measure__hint { margin: 0 0 14px; color: var(--ink-muted); font-size: 14px; }
.cj-measure__grid {
  display: grid; grid-template-columns: repeat(var(--cj-measure-n), var(--cj-measure-cell));
  justify-content: center; gap: 2px; touch-action: manipulation;
}
.cj-measure__block { width: var(--cj-measure-cell); height: var(--cj-measure-cell); background: transparent; }
.cj-measure__clue {
  position: relative; width: var(--cj-measure-cell); height: var(--cj-measure-cell);
  background: var(--toast); border-radius: 5px; overflow: hidden;
  background-image: linear-gradient(to bottom right, transparent calc(50% - 0.5px), var(--surface, #fff) calc(50% - 0.5px), var(--surface, #fff) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}
.cj-measure__down { position: absolute; left: 3px; bottom: 1px; color: #fff;
  font-size: clamp(10px, 3vw, 14px); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.cj-measure__across { position: absolute; right: 3px; top: 1px; color: #fff;
  font-size: clamp(10px, 3vw, 14px); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.cj-measure__cell {
  width: var(--cj-measure-cell); height: var(--cj-measure-cell); text-align: center; padding: 0;
  border: 1px solid var(--n-300, var(--hairline)); border-radius: 5px; background: var(--paper);
  color: var(--ink); font-family: var(--font-display); font-size: clamp(16px, 4.5vw, 22px);
  font-variant-numeric: tabular-nums; box-sizing: border-box;
}
.cj-measure__cell:focus-visible { outline: var(--focus); outline-offset: -1px; background: var(--n-100, #fff); }
.cj-measure__cell--locked { border-color: var(--accent, var(--toast)); background: var(--surface, #fff); }
.cj-measure__entry { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.cj-measure__status { min-height: 1.4em; color: var(--ink-muted); margin: 8px 0 0; }
.cj-measure__nojs { color: var(--ink-muted); }

/* Polyrhythm, rhythm toy (BRIEF-09q). Each voice is a lane of beats across one bar; the count sits to
   the left. The downbeat (◆) and any anchor beats are pre-lit and locked. Meaning never rides on colour
   alone: an on-beat is a filled bead + aria-checked, an off-beat a hollow ring, the downbeat a diamond. */
.cj-poly { display: flex; flex-direction: column; gap: 12px; margin: 12px 0; align-items: center;
  --cj-poly-cell: clamp(20px, 6.2vw, 30px); }
.cj-poly__how { margin: 0; color: var(--ink-muted); font-size: 14px; max-width: 46ch; text-align: center; }
.cj-poly__bars { display: flex; flex-direction: column; gap: 8px; width: 100%; align-items: center; }
.cj-poly__voice { display: flex; align-items: center; gap: 10px; }
.cj-poly__count { min-width: 1.3em; text-align: right; color: var(--ink-muted); font-weight: 700;
  font-variant-numeric: tabular-nums; font-size: clamp(14px, 4vw, 18px); }
.cj-poly__lane { display: flex; gap: 3px; flex-wrap: nowrap; touch-action: manipulation; }
.cj-poly__cell {
  width: var(--cj-poly-cell); height: var(--cj-poly-cell); padding: 0; cursor: pointer;
  border: 1px solid var(--hairline); border-radius: 50%; background: var(--surface, #fff);
  position: relative; transition: transform 100ms ease, background 120ms ease;
}
.cj-poly__cell:focus-visible { outline: var(--focus); outline-offset: 1px; }
/* off-beat = hollow ring; on-beat = filled bead (shape + fill, not colour alone). */
.cj-poly__cell--on { background: var(--accent-deep, var(--toast)); border-color: var(--accent-deep, var(--toast)); }
/* downbeat + anchors are pre-lit and locked (a diamond marks the shared downbeat, step 0). */
.cj-poly__cell[data-fixed="1"] { cursor: default; background: var(--accent, #e6c79c); border-color: var(--accent-deep, var(--toast)); }
.cj-poly__cell[data-step="0"]::after { content: "\25C6"; /* ◆ */ position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; font-size: .7em; color: var(--ink); }
.cj-poly__cell--final { cursor: default; }
.cj-poly__actions { display: flex; align-items: center; gap: 12px; }
.cj-poly__status { min-height: 1.4em; color: var(--ink-muted); margin: 0; font-variant-numeric: tabular-nums; }
.cj-poly__nojs { color: var(--ink-muted); }
@media (prefers-reduced-motion: reduce) { .cj-poly__cell { transition: none !important; } }

/* THE WHEEL (BRIEF-09m), rondel routing / depth. The board (10 slots, each a flour/sugar/butter
   3-vector) and the target are server-rendered and fully legible for screen readers / no-JS. wheel.js
   turns the slots into a clickable clockwise route. State is NEVER colour alone: the current slot carries
   a "you are here" dot, reachable slots a "▸" cue and a thicker outline, and every slot labels its resources
   with a letter + number (F/S/B). No layout shift, the goal panel reserves its lines. */
.cj-wheel {
  margin: 12px 0; padding: 18px 16px; border-radius: var(--radius-lg, 16px);
  background: var(--surface, #fff); border: 1px solid var(--hairline);
  box-shadow: inset 0 0 0 2px var(--paper), 0 1px 0 var(--hairline);
}
.cj-wheel__hint { margin: 0 0 14px; color: var(--ink-muted); font-size: 14px; }
.cj-wheel__goal { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: var(--paper);
  border: 1px solid var(--hairline); }
.cj-wheel__goal p { margin: 2px 0; font-size: 15px; min-height: 1.35em; }
.cj-wheel__target b, .cj-wheel__budget b { font-variant-numeric: tabular-nums; }
.cj-wheel__ring {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 4px 0 4px;
  touch-action: manipulation;
}
.cj-wheel__slot {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: clamp(58px, 17vw, 74px); min-height: 74px; padding: 8px 4px 6px; cursor: pointer;
  border: 2px solid var(--n-300, var(--hairline)); border-radius: 12px; background: var(--paper);
  color: var(--ink); font-family: var(--font-display); box-sizing: border-box;
}
.cj-wheel__slot:focus-visible { outline: var(--focus); outline-offset: 2px; }
.cj-wheel__slotno { font-size: 13px; font-weight: 700; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.cj-wheel__res { font-size: 12px; line-height: 1.25; font-variant-numeric: tabular-nums; }
.cj-wheel__slot[data-start="1"] .cj-wheel__slotno::after { content: " ▪ start"; color: var(--accent, var(--toast)); }
.cj-wheel__slot[data-reachable="1"] { border-color: var(--accent, var(--toast)); }
.cj-wheel__slot[data-reachable="1"]::after {
  content: "▸"; position: absolute; top: 2px; right: 5px; font-size: 12px; color: var(--accent, var(--toast));
}
.cj-wheel__slot[data-reachable="0"] { opacity: 0.7; }
.cj-wheel__slot[data-current="1"] { border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.cj-wheel__slot[data-current="1"]::before {
  content: "● here"; position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 700; color: var(--surface, #fff); background: var(--ink);
  padding: 1px 6px; border-radius: 8px; white-space: nowrap;
}
.cj-wheel[data-cj-wheel-lit="1"] .cj-wheel__goal { border-color: var(--accent, var(--toast)); box-shadow: 0 0 0 2px var(--accent, var(--toast)); }
.cj-wheel__entry { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.cj-wheel__status { min-height: 1.4em; color: var(--ink-muted); margin: 8px 0 0; }
.cj-wheel__nojs { color: var(--ink-muted); }

/* ── Marshaller, ordering / marshalling TOY (BRIEF-09s) ─────────────────────────────────────────
   A row of bays, each a bottom-up stack of numbered item chips. The player picks up a bay's top chip
   and sets it on another bay (a relocation, the shareable choice) or sends it to its gate in number
   order. Meaning never rides on colour alone: every chip shows its gate NUMBER and a spoken tier band,
   the top (movable) chip carries a raised border, and the picked-up bay is outlined AND announced. */
.cj-marsh { display: flex; flex-direction: column; gap: 12px; margin: 12px 0; }
.cj-marsh__how { color: var(--ink-muted); margin: 0; }
.cj-marsh__next { font-weight: 600; margin: 0; color: var(--ink); }
.cj-marsh__yard { display: flex; gap: 10px; align-items: flex-end; justify-content: center;
  flex-wrap: wrap; padding: 8px; }
.cj-marsh__bay { display: flex; flex-direction: column; align-items: stretch; }
.cj-marsh__baybtn { display: block; background: var(--surface, #fff); border: 1px solid var(--hairline);
  border-radius: 10px; padding: 6px; cursor: pointer; min-width: clamp(48px, 14vw, 68px); }
.cj-marsh__baybtn:focus-visible { outline: var(--focus); outline-offset: 2px; }
.cj-marsh__bay--held .cj-marsh__baybtn { outline: 3px solid var(--accent-deep, #6a5138); outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--surface, #fff); }
.cj-marsh__bay--full .cj-marsh__baybtn { border-style: dashed; }
.cj-marsh__stack { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column-reverse;
  gap: 4px; min-height: 4px; }
.cj-marsh__chip { display: flex; align-items: center; justify-content: center; position: relative;
  height: clamp(30px, 8vw, 40px); border: 1px solid var(--hairline); border-radius: 7px;
  background: #F4EFE6; color: #2A2016; font-variant-numeric: tabular-nums; font-weight: 700; }
.cj-marsh__chip--top { border: 2px solid var(--accent-deep, #6a5138); box-shadow: 0 1px 0 var(--hairline); }
/* The chip is always a light cream tile, so its number must be a FIXED dark ink (never --ink, which
   flips light in dark mode and would vanish on the light chip). */
.cj-marsh__gate { font-size: clamp(13px, 3.6vw, 17px); color: #2A2016; }
/* The tier band is read by screen readers (aria) and shown as a thin edge marker, never colour alone. */
.cj-marsh__band { position: absolute; left: 3px; top: 3px; bottom: 3px; width: 3px; border-radius: 2px;
  background: var(--ink-muted); opacity: .5; text-indent: -9999px; overflow: hidden; }
.cj-marsh__chip[data-tier="2"] .cj-marsh__band { opacity: .75; }
.cj-marsh__chip[data-tier="3"] .cj-marsh__band { opacity: 1; }
.cj-marsh__actions { display: flex; gap: 10px; justify-content: center; }
.cj-marsh__status { min-height: 1.4em; color: var(--ink-muted); margin: 0; text-align: center; }
.cj-marsh__nojs { color: var(--ink-muted); }

/* Segmenter, the linear-partition strip (BRIEF-09x). Tiles show their (public) value; gaps are cut
   toggles. A placed cut reads by aria-pressed AND a visible notch fill, never colour alone. */
.cj-seg { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; align-items: center; }
.cj-seg__hint { margin: 0; color: var(--ink); max-width: 40ch; text-align: center; }
.cj-seg__strip { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 0;
  max-width: min(94vw, 560px); touch-action: manipulation; }
.cj-seg__tile { display: flex; align-items: center; justify-content: center; min-width: clamp(30px, 8vw, 42px);
  height: clamp(38px, 10vw, 50px); border: 1px solid var(--hairline); border-radius: 8px;
  background: #F4EFE6; color: #2A2016; font-variant-numeric: tabular-nums; font-weight: 700; }
/* Fixed-light tile, so a FIXED dark number (never --ink, which flips in dark mode). */
.cj-seg__val { font-size: clamp(15px, 4vw, 19px); color: #2A2016; }
/* The gap between two tiles: a slim focusable toggle. Its notch fills in when a cut is placed. */
.cj-seg__gap { display: flex; align-items: center; justify-content: center; width: clamp(14px, 4vw, 20px);
  align-self: stretch; background: transparent; border: none; cursor: pointer; padding: 0; }
.cj-seg__gap:focus-visible { outline: var(--focus); outline-offset: 2px; }
.cj-seg__notch { display: block; width: 3px; height: 60%; border-radius: 2px; background: var(--hairline); }
.cj-seg__gap--cut .cj-seg__notch { width: 5px; height: 96%; background: var(--accent-deep, #6a5138); }
.cj-seg__gap[aria-pressed="true"] .cj-seg__notch { box-shadow: 0 0 0 1px var(--surface, #fff); }
.cj-seg__meter { margin: 0; color: var(--ink-muted); font-variant-numeric: tabular-nums; min-height: 1.4em; }
.cj-seg__entry { display: flex; gap: 10px; justify-content: center; }
.cj-seg__status { min-height: 1.4em; color: var(--ink-muted); margin: 0; text-align: center; }
.cj-seg__nojs { color: var(--ink-muted); }

/* ======================================================================
   DESIGN STANDARD refinements (Report 36), adopt the ChatGPT concepts
   (folder 10) as the gold standard: strapline, mascots on cards, refined
   buttons/chips/focus, ad-slot look, and per-game Unlimited/Daily/Variants tabs.
   ====================================================================== */

/* --- strapline: heart glyph + "games and puzzles", site-wide --- */
.cj-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cj-heart { color: var(--toast); vertical-align: -0.12em; }
.cj-strap { font-family: var(--font-display); display: inline-flex; align-items: center; gap: 0.28em; color: var(--ink); }
.cj-brand { display: inline-flex; flex-direction: column; line-height: 1.05; }
.cj-strap--header { font-size: 12.5px; font-weight: 600; color: var(--ink-muted); margin-top: 1px; }
.cj-strap--footer { font-size: 20px; }
.cj-footer__sub { color: var(--ink-muted); font-size: 14px; margin: 2px 0 8px; }

/* --- header: mark + lowercase wordmark, nav, Tip Jar (concept) --- */
.cj-brand { flex-direction: row; align-items: center; gap: 8px; text-decoration: none; }
.cj-brand__mark { width: 34px; height: 34px; }
.cj-wordmark { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
.cj-wordmark b { color: var(--toast); font-weight: 800; }
.cj-header__actions { display: inline-flex; align-items: center; gap: 10px; margin-left: 16px; }
.cj-tipjar { padding: 8px 14px; display: inline-flex; align-items: center; gap: 6px; }
.cj-main--wide { max-width: 1200px; }
.cj-home__more { margin: 20px 0 0; }

/* --- game cards: concept mascot on top, name + category below (concept #3) --- */
.cj-card { text-align: center; }
.cj-card__art { position: relative; display: flex; justify-content: center; align-items: flex-end; height: 108px; margin-bottom: 6px; }
.cj-card__mascot { height: 108px; width: auto; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0,0,0,.08)); }
.cj-card--live:hover .cj-card__mascot { transform: translateY(-3px); transition: transform .12s ease; }
.cj-card__name { display: block; font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.cj-card__tag { display: block; margin-top: 2px; }
.cj-card__foot { margin-top: 8px; }
.cj-card__streak { position: absolute; top: 2px; right: 6px; background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 999px; padding: 2px 8px; font-size: 12px; font-weight: 700; color: var(--ink); }
.cj-title-mascot { height: 44px; width: auto; vertical-align: -12px; margin-right: 8px; }

/* --- buttons: primary (toast), secondary (outline toast), refined --- */
.cj-btn { border-radius: 999px; font-weight: 700; }
.cj-btn--secondary { background: transparent; color: var(--toast); border-color: var(--toast); }
.cj-btn--secondary:hover { background: var(--n-050); }

/* --- chips (Daily · Easy · Streak · Logic) --- */
.cj-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.cj-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--hairline); background: var(--surface); font-size: 14px; font-weight: 600; color: var(--ink); }
.cj-chip--accent { border-color: var(--toast); color: #fff; background: var(--toast); }
.cj-chip[data-filter] { cursor: pointer; }
.cj-filter { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 14px; }

/* --- game area tile: the framed play surface, sized to be the focus of the page --- */
.cj-gamearea {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  padding: 22px 18px; margin: 12px 0 14px; width: 100%; min-height: 360px;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
}

/* --- game page ad frame: left + right rails and a bottom banner around the play area (DR-070) --- */
.cj-gameframe { display: grid; grid-template-columns: 170px minmax(0, 1fr) 170px; gap: 18px; align-items: start; }
.cj-gameframe__center { min-width: 0; }
.cj-gameframe__rail { position: sticky; top: 78px; }
.cj-gameframe__rail .cj-ad { min-height: 600px; }
.cj-gameframe__bottom { margin: 18px auto 0; max-width: 900px; }
@media (max-width: 900px) { .cj-gameframe { grid-template-columns: 1fr; } .cj-gameframe__rail { display: none; } }

/* --- Shuffle (sliding tile): big square tiles --- */
.cj-shuffle__grid { display: grid; grid-template-columns: repeat(var(--cj-shuffle-n, 3), 1fr); gap: 8px;
  width: 100%; max-width: 380px; margin: 0 auto; }
.cj-shuffle__tile, .cj-shuffle__gap { aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border-radius: 12px; font-family: var(--font-ui); font-weight: 800; font-size: clamp(22px, 8vw, 38px); }
.cj-shuffle__tile { background: var(--n-700); color: #fff; border: 1px solid var(--n-800); cursor: pointer; }
.cj-shuffle__tile:hover { background: var(--toast); border-color: var(--toast); }
.cj-shuffle__gap { background: transparent; box-shadow: inset 0 0 0 2px var(--hairline); }
.cj-shuffle__meter, .cj-shuffle__status { text-align: center; color: var(--ink-muted); }

/* --- hero jar sits in a fixed light box so it reads the same in light AND dark mode --- */
.cj-hero__art { background: #FBF5EA; border: 1px solid #EADFCB; border-radius: 26px;
  padding: 14px 20px; box-shadow: 0 2px 12px rgba(0,0,0,.06); }

/* --- Word Search (Crumb Hunt) --- */
.cj-ws__hint { color: var(--ink-muted); font-size: 15px; margin: 0 0 12px; }
.cj-ws__grid { display: grid; grid-template-columns: repeat(var(--cj-ws-w, 11), 1fr);
  gap: 3px; max-width: 480px; margin: 0 auto; }
.cj-ws__cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--hairline); border-radius: 6px; background: var(--surface);
  font-family: var(--font-ui); font-weight: 700; font-size: clamp(12px, 3.4vw, 18px);
  color: var(--ink); cursor: pointer; text-transform: uppercase; user-select: none; }
.cj-ws__cell--sel { background: var(--accent-tint, var(--n-100)); border-color: var(--accent, var(--toast)); }
.cj-ws__cell--found { background: var(--sage); border-color: var(--sage); color: #fff; }
.cj-ws__words { list-style: none; margin: 16px auto 0; padding: 0; max-width: 480px;
  display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center; }
.cj-ws__word { font-weight: 700; letter-spacing: .04em; }
.cj-ws__word--found { color: var(--ink-muted); text-decoration: line-through; }
.cj-ws__entry { text-align: center; margin: 16px 0 4px; }
.cj-ws__status { text-align: center; color: var(--ink-muted); min-height: 1.4em; margin: 6px 0 0; }
.cj-ws__nojs { color: var(--ink-muted); }

/* --- Jigsaw (Puzzle Crumbs): pieces are image slices via background-position --- */
.cj-jig__hint { color: var(--ink-muted); font-size: 15px; margin: 0 0 12px; text-align: center; }
.cj-jig__grid { display: grid; grid-template-columns: repeat(var(--cj-jig-cols, 4), 1fr); gap: 2px;
  width: 100%; max-width: 420px; margin: 0 auto; }
.cj-jig__piece { aspect-ratio: 1; padding: 0; border: 1px solid var(--hairline); cursor: pointer;
  background-color: var(--accent-tint, var(--n-050)); background-repeat: no-repeat;
  background-image: var(--cj-jig-img);
  background-size: calc(var(--cj-jig-cols) * 100%) calc(var(--cj-jig-rows) * 100%);
  background-position: calc(var(--h-col) / (var(--cj-jig-cols) - 1) * 100%) calc(var(--h-row) / (var(--cj-jig-rows) - 1) * 100%); }
.cj-jig__piece--sel { outline: 3px solid var(--toast); outline-offset: -3px; z-index: 1; }
.cj-jig__entry { text-align: center; margin: 14px 0 4px; }
.cj-jig__status { text-align: center; color: var(--ink-muted); min-height: 1.4em; margin: 6px 0 0; }
.cj-jig__nojs { color: var(--ink-muted); }

/* --- ad-blocker nudge (friendly, dismissible, never a wall) --- */
.cj-adblock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px;
  background: var(--surface); border-top: 2px solid var(--toast);
  padding: 12px 16px; box-shadow: 0 -4px 16px rgba(0,0,0,.08); }
.cj-adblock__msg { margin: 0; max-width: 640px; font-size: 15px; }
.cj-adblock__actions { display: inline-flex; gap: 8px; flex-shrink: 0; }

/* --- focus: keep the accessible toast outline, add the concept's soft-blue glow --- */
a:focus-visible, button:focus-visible, input:focus-visible, .cj-gametab:focus-visible {
  outline: var(--focus); outline-offset: 2px; box-shadow: var(--focus-glow); border-radius: 8px;
}

/* --- ad slots: clearer "Advertisement" plate (still reserves height, no shift) --- */
.cj-ad { border-radius: var(--radius); }
.cj-ad__label { color: var(--ink-muted); font-weight: 700; }
.cj-results__ad { margin: 20px 0; }

/* --- per-game tabs: Unlimited (revenue, first) · Daily · Variants --- */
.cj-gametabs { display: flex; gap: 6px; background: var(--n-100); padding: 5px; border-radius: 999px; margin: 6px 0 18px; }
.cj-gametab { flex: 1; text-align: center; padding: 10px 12px; border-radius: 999px; border: 0; background: transparent;
  font-family: var(--font-ui); font-weight: 700; font-size: 15px; color: var(--ink-muted); text-decoration: none; cursor: pointer; }
.cj-gametab:hover { color: var(--ink); }
.cj-gametab[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.10); }
.cj-gametab--unlimited { position: relative; }
.cj-gametab--unlimited[aria-current="page"] { background: var(--toast); color: #fff; }
.cj-gametab__tag { display: block; font-size: 11px; font-weight: 600; opacity: .8; }

/* --- home hero (concept #3) --- */
.cj-hero { display: flex; align-items: center; gap: 24px; margin: 8px 0 4px; }
.cj-hero__copy { flex: 1 1 340px; }
.cj-hero__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 6vw, 58px);
  line-height: 1.02; letter-spacing: -0.01em; margin: 0 0 12px; }
.cj-hero__title em { color: var(--toast); font-style: normal; }
.cj-hero__sub { font-size: 19px; color: var(--ink-muted); margin: 0 0 18px; }
.cj-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cj-hero__note { font-size: 14px; color: var(--ink-muted); margin: 0; }
.cj-hero__art { flex: 0 0 auto; display: flex; justify-content: center; }
.cj-hero__art img { width: clamp(180px, 32vw, 300px); height: auto; }
@media (max-width: 640px) { .cj-hero { flex-direction: column-reverse; align-items: flex-start; gap: 8px; }
  .cj-hero__art img { width: 190px; } }

/* --- today's line-up: a horizontal carousel --- */
.cj-lineup { margin: 16px 0; }
.cj-lineup__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px;
  border-top: 1px solid var(--hairline); padding-top: 16px; }
.cj-lineup__head h2 { font-family: var(--font-display); font-size: 24px; margin: 0; }
.cj-lineup__note { color: var(--ink-muted); font-size: 14px; }
.cj-lineup .cj-grid {
  display: flex; grid-template-columns: none; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth; padding: 6px 2px 8px; scroll-padding-left: 2px;
  scrollbar-width: none; /* Firefox: hide the bar (arrows drive it) */
}
.cj-lineup .cj-grid > li { flex: 0 0 200px; scroll-snap-align: start; }
.cj-lineup .cj-grid::-webkit-scrollbar { display: none; } /* hide the scrollbar */

/* carousel wrapper + left/right arrows */
.cj-carousel { position: relative; }
.cj-carousel__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--hairline);
  background: var(--surface); color: var(--ink); font-family: var(--font-ui); font-size: 26px; line-height: 1;
  cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.14); display: flex; align-items: center; justify-content: center; }
.cj-carousel__arrow:hover { background: var(--toast); color: #fff; border-color: var(--toast); }
.cj-carousel__arrow--prev { left: 6px; }
.cj-carousel__arrow--next { right: 6px; }
@media (max-width: 540px) { .cj-carousel__arrow { width: 38px; height: 38px; font-size: 22px; }
  .cj-carousel__arrow--prev { left: 2px; } .cj-carousel__arrow--next { right: 2px; } }

/* --- trust strip --- */
.cj-trust { list-style: none; margin: 28px 0 0; padding: 20px 0 0; border-top: 1px solid var(--hairline);
  display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.cj-trust li { font-size: 14px; }
.cj-trust b { display: block; font-family: var(--font-display); }
.cj-trust span { color: var(--ink-muted); }

/* --- variants picker page --- */
.cj-variants__grid { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.cj-variant { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: var(--radius-lg);
  background: var(--accent-tint, var(--surface)); border: 2px solid var(--accent, var(--hairline)); color: var(--accent-deep, var(--ink)); text-decoration: none; }
.cj-variant__name { font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.cj-variant__soon { align-self: flex-start; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); }

/* ---------- WAY OFF (photo geo-guess + trivia, Leaflet) board ---------- */
.cj-wo { display: flex; flex-direction: column; gap: 14px; }
.cj-wo__prompt { display: flex; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 10px; flex-wrap: wrap; }
.cj-wo__round-label { font: 700 13px/1 var(--font-ui); color: var(--ink-muted); text-transform: uppercase; letter-spacing: .05em; }
.cj-wo__hint { font: 500 14px/1.4 var(--font-ui); color: var(--ink-muted); }

/* The photo and the map ARE the game, so they get the screen. The play surface breaks out of the
   normal reading column and sizes off the viewport height, so on a laptop you get one big picture
   and one big map side by side without scrolling to see either. */
.cj-wo__game { width: min(1520px, calc(100vw - 48px)); margin-inline: calc(50% - min(760px, 50vw - 24px)); }
@media (max-width: 900px) { .cj-wo__game { width: auto; margin-inline: 0; } }
.cj-wo__stage { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
@media (max-width: 900px) { .cj-wo__stage { grid-template-columns: 1fr; gap: 12px; } }
/* Height-driven, not width-driven: both panes are the same tall box whatever the column width. */
.cj-wo__stage > * { --cj-wo-h: clamp(320px, calc(100vh - 300px), 660px); }
.cj-wo__photo { margin: 0; position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--hairline); background: #14202b; height: var(--cj-wo-h); }
.cj-wo__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cj-wo__credit { position: absolute; right: 6px; bottom: 6px; margin: 0; font: 600 10px/1 var(--font-ui); color: #e5defc; background: rgba(0,0,0,.55); padding: 2px 6px; border-radius: 5px; }
.cj-wo__mapwrap { position: relative; }
.cj-wo__map { border-radius: 16px; overflow: hidden; border: 1px solid var(--hairline); background: #0f2436; height: var(--cj-wo-h); }
.cj-wo__map .leaflet-container { height: 100%; width: 100%; background: #aad3df; }
.cj-wo__maphint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); margin: 0; z-index: 500;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 999px; padding: 8px 16px;
  font: 600 13px/1 var(--font-ui); color: var(--ink-muted); box-shadow: 0 2px 8px rgba(0,0,0,.18); pointer-events: none; white-space: nowrap; }

.cj-wo__trivia { background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; padding: 12px 14px; }
.cj-wo__tq { font-family: var(--font-display); font-size: 16px; margin: 0 0 10px; color: var(--ink); }
.cj-wo__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cj-wo__opt { border: 1px solid var(--hairline); background: var(--surface); color: var(--ink); border-radius: 10px; padding: 10px 12px; font: 700 14px/1.2 var(--font-ui); text-align: left; cursor: pointer; }
.cj-wo__opt[aria-pressed="true"] { background: var(--accent, #205693); color: #fff; border-color: var(--accent, #205693); }
@media (max-width: 520px) { .cj-wo__opts { grid-template-columns: 1fr; } }

.cj-wo__controls { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.cj-wo__status { margin: 0; font: 600 14px/1.3 var(--font-ui); color: var(--ink-muted); }
.cj-wo__nojs { color: var(--ink-muted); font-size: 14px; }
.cj-wo__nojs { color: var(--ink-muted); font-size: 14px; }

/* ---------- Crumb Match (memory) board ---------- */
.cj-mem { display: flex; flex-direction: column; gap: 14px; }
.cj-mem__channels { display: flex; gap: 6px; flex-wrap: wrap; }
.cj-mem__channel {
  border: 2px solid var(--accent, var(--hairline)); background: var(--surface); color: var(--accent-deep, var(--ink));
  border-radius: 999px; padding: 6px 14px; font: 700 13px/1 var(--font-ui); cursor: pointer;
}
.cj-mem__channel[aria-selected="true"] { background: var(--accent, #674186); color: #fff; }

.cj-mem__status { margin: 0; font: 600 15px/1.3 var(--font-ui); color: var(--ink-muted); min-height: 1.3em; }
.cj-mem__grid { display: grid; gap: 8px; max-width: 520px; }
.cj-mem__card {
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--accent, #674186); border-radius: 12px; cursor: pointer;
  background: var(--accent-tint, #F1E6FB); font-size: clamp(18px, 6vw, 30px); line-height: 1;
  transition: transform .1s ease, background .1s ease;
}
.cj-mem__card--up { background: var(--surface); }
.cj-mem__card--matched { background: #DFF1DF; border-color: #54985B; cursor: default; opacity: .85; }
.cj-mem__card:focus-visible { outline: 3px solid var(--accent, #674186); outline-offset: 2px; }
.cj-mem__face { pointer-events: none; }
.cj-mem__nojs { color: var(--ink-muted); font-size: 14px; }

/* ---------- Crumb Stacks (mahjong solitaire) board ---------- */
.cj-mah { display: flex; flex-direction: column; gap: 14px; }
.cj-mah__channels { display: flex; gap: 6px; flex-wrap: wrap; }
.cj-mah__channel {
  border: 2px solid var(--accent, var(--hairline)); background: var(--surface); color: var(--accent-deep, var(--ink));
  border-radius: 999px; padding: 6px 14px; font: 700 13px/1 var(--font-ui); cursor: pointer;
}
.cj-mah__channel[aria-selected="true"] { background: var(--accent, #00695A); color: #fff; }
.cj-mah__status { margin: 0; font: 600 15px/1.3 var(--font-ui); color: var(--ink-muted); min-height: 1.3em; }
.cj-mah__board { position: relative; margin: 0 auto; overflow-x: auto; max-width: 100%; }
.cj-mah__tile {
  position: absolute; width: 38px; height: 50px; display: flex; align-items: center; justify-content: center;
  border: 1px solid #b89b6a; border-top-color: #f4e7c9; border-left-color: #f4e7c9; border-radius: 7px;
  background: linear-gradient(#fdf6e6, #ecd9ad); font-size: 20px; line-height: 1; cursor: default;
  box-shadow: 1px 2px 2px rgba(0,0,0,.25);
}
.cj-mah__tile--free { cursor: pointer; }
.cj-mah__tile--free:hover { filter: brightness(1.05); }
.cj-mah__tile--sel { outline: 3px solid var(--accent, #00695A); outline-offset: -1px; background: linear-gradient(#fff6df, #ffe9b8); }
.cj-mah__tile[disabled] { opacity: .82; }
.cj-mah__nojs { color: var(--ink-muted); font-size: 14px; }

/* ============================================================================
   POLISH KIT (DR-072) — shared "fresh & modern" surfaces every game reuses.
   Depth + motion tokens, a tactile piece surface, a glass game HUD, and a
   channel/segmented control. New boards adopt these instead of bespoke CSS.
   ============================================================================ */
:root {
  --cj-ease: cubic-bezier(.2,.8,.2,1);
  --cj-dur: .16s;
  --cj-piece-bg: linear-gradient(158deg, #FFFEF9 0%, #F3EAD6 100%);
  --cj-piece-edge: #DECBA3;
  --cj-piece-shadow: 0 1px 1px rgba(255,255,255,.9) inset, 0 -3px 6px rgba(150,110,50,.16) inset, 0 8px 12px -6px rgba(70,45,10,.5);
  --cj-lift: 0 14px 20px -8px rgba(70,45,10,.55);
}
/* A tactile game piece (tile / card face). */
.cj-piece { background: var(--cj-piece-bg); border: 1px solid var(--cj-piece-edge); border-radius: 10px;
  box-shadow: var(--cj-piece-shadow); position: relative; overflow: hidden;
  transition: transform var(--cj-dur) var(--cj-ease), box-shadow var(--cj-dur) ease; }
.cj-piece::after { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 36%;
  background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); pointer-events: none; }
.cj-piece--play { cursor: pointer; }
.cj-piece--play:hover { transform: translateY(-4px); box-shadow: var(--cj-piece-shadow), var(--cj-lift); }
.cj-piece--sel { transform: translateY(-5px); box-shadow: 0 0 0 3px var(--accent, #E0872F), var(--cj-lift), 0 1px 1px rgba(255,255,255,.9) inset; }

/* A frosted glass game HUD strip (mark + readouts). */
.cj-gamehud { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border-radius: 14px; margin-bottom: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,251,240,.6));
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--hairline); }
.cj-gamehud__stat { display: flex; flex-direction: column; align-items: center; line-height: 1;
  background: rgba(255,255,255,.7); border: 1px solid var(--cj-piece-edge); border-radius: 12px; padding: 5px 12px; }
.cj-gamehud__k { font-size: 9px; font-weight: 800; letter-spacing: .12em; color: var(--ink-muted); }
.cj-gamehud__v { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 2px; }

/* A segmented / channel control (difficulty tabs, theme toggle). NB: named cj-segctl, NOT cj-seg,
   because the Segmenter game already owns the cj-seg prefix (a collision merged it into an
   inline-flex column and stacked the tabs vertically). */
.cj-segctl { display: inline-flex; background: #F0E4C9; border: 1px solid var(--cj-piece-edge); border-radius: 999px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.cj-segctl__b { border: 0; background: transparent; border-radius: 999px; padding: 6px 14px; font: 700 13px/1 var(--font-ui);
  color: #6E5A3C; cursor: pointer; transition: var(--cj-dur); }
.cj-segctl__b[aria-selected="true"], .cj-segctl__b.is-on { background: #fff; color: var(--brand, #B4531F); box-shadow: 0 2px 5px rgba(90,60,20,.2); }

/* Smooth, tactile buttons everywhere (safe global uplift). */
.cj-btn { transition: transform var(--cj-dur) var(--cj-ease), box-shadow var(--cj-dur) ease; }
.cj-btn:hover { transform: translateY(-1px); }

/* ---------- Crumb Stacks v2 (DR-072 tactile + two themes) ---------- */
.cj-mah__theme { display:flex; gap:8px; align-items:center; margin-left:auto; }
.cj-mah__tile { background: var(--cj-piece-bg); box-shadow: var(--cj-piece-shadow); overflow:hidden; }
.cj-mah__tile::after { content:""; position:absolute; left:0; top:0; right:0; height:34%; background:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0)); pointer-events:none; }
.cj-mah__tile.free { cursor:pointer; }
.cj-mah__tile.free:hover { transform: translateY(-4px); box-shadow: var(--cj-piece-shadow), var(--cj-lift); }
.cj-mah__tile.sel { transform: translateY(-5px); box-shadow: 0 0 0 3px var(--accent,#E0872F), var(--cj-lift), 0 1px 1px rgba(255,255,255,.9) inset; }
.cj-mah__tile img { width: 78%; height: 78%; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0,0,0,.14)); position:relative; z-index:2; }
.cj-mah__face { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; }
.cj-mah__face .top { font-family: var(--font-display); font-weight:700; font-size:15px; }
.cj-mah__face .wan { font-weight:800; font-size:19px; color:#C0392B; margin-top:1px; }
.cj-mah__face .big { font-weight:800; font-size:30px; }
.cj-mah__dots { display:grid; gap:3px; } .cj-mah__dot { width:8px; height:8px; border-radius:50%; box-shadow: inset 0 0 0 2px currentColor; }
.cj-mah__bam { display:flex; gap:4px; align-items:flex-end; } .cj-mah__bam span { width:6px; border-radius:3px; background:currentColor; }

/* ---------- Crumb Crush (match-3) board ---------- */
.cj-m3 { display: flex; flex-direction: column; gap: 12px; }
.cj-m3__status { margin: 0; font: 600 14px/1.3 var(--font-ui); color: var(--ink-muted); min-height: 1.3em; }
.cj-m3__board { display: grid; gap: 5px; max-width: 460px; margin: 0 auto; width: 100%; }
.cj-m3__tile {
  aspect-ratio: 1/1; border: none; border-radius: 26%; cursor: pointer; position: relative;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.45), inset 0 -4px 6px rgba(0,0,0,.18), 0 3px 5px -2px rgba(40,25,5,.4);
  transition: transform var(--cj-dur) var(--cj-ease);
}
.cj-m3__tile:hover { transform: translateY(-2px) scale(1.03); }
.cj-m3__tile.sel { transform: scale(1.08); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--accent,#803765), inset 0 -4px 6px rgba(0,0,0,.2); z-index: 2; }
.cj-m3__face { position: absolute; inset: 0; }
.cj-m3__face::before, .cj-m3__face::after { content: ""; position: absolute; top: 38%; width: 12%; height: 15%; background: rgba(30,20,10,.72); border-radius: 50%; }
.cj-m3__face::before { left: 30%; } .cj-m3__face::after { right: 30%; }
.cj-m3__nojs { color: var(--ink-muted); font-size: 14px; }

/* ---------- Crumbword (crossword) board ---------- */
.cj-cw { display: flex; flex-direction: column; gap: 12px; }
.cj-cw__play { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.cj-cw__grid { display: grid; gap: 2px; background: var(--cj-piece-edge); padding: 2px; border-radius: 8px; }
.cj-cw__cell { position: relative; width: 44px; height: 44px; background: var(--cj-piece-bg); border-radius: 4px; }
.cj-cw__cell--black { background: #2a2016; }
/* The cell is a fixed cream tile (--cj-piece-bg), so the number + letter must be FIXED dark ink,
   never --ink / --ink-muted (which flip light in dark mode and would vanish on the light cell). */
.cj-cw__num { position: absolute; top: 1px; left: 3px; font: 700 9px/1 var(--font-ui); color: #6E6152; pointer-events: none; }
.cj-cw__cell input { width: 100%; height: 100%; border: none; background: transparent; text-align: center;
  font: 800 20px/1 var(--font-display); color: #241E17; text-transform: uppercase; caret-color: var(--brand, #B4531F); }
.cj-cw__cell input:focus { outline: none; background: var(--accent-tint, #ECEDD7); border-radius: 4px; box-shadow: inset 0 0 0 2px var(--accent, #8B8C2E); }
.cj-cw__clues { display: flex; gap: 20px; flex: 1; min-width: 240px; }
.cj-cw__cluecol h3 { font: 700 13px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); margin: 0 0 8px; }
.cj-cw__cluecol ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.cj-cw__cluecol li { font: 500 14px/1.35 var(--font-ui); cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.cj-cw__cluecol li:hover { background: var(--accent-tint, #ECEDD7); }
.cj-cw__cluecol li b { color: var(--accent-deep, var(--ink)); margin-right: 4px; }
.cj-cw__controls { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.cj-cw__status { margin: 0; font: 600 14px/1.3 var(--font-ui); color: var(--ink-muted); }
.cj-cw__nojs { color: var(--ink-muted); font-size: 14px; }
@media (max-width: 560px) { .cj-cw__cell { width: 34px; height: 34px; } .cj-cw__cell input { font-size: 16px; } }

/* ---------- How-to-play guide panel (every game + mode) ---------- */
.cj-howto { border: 1px solid var(--hairline); border-radius: 14px; background: var(--surface); margin: 12px 0 16px;
  overflow: hidden; }
.cj-howto__summary { cursor: pointer; list-style: none; padding: 12px 16px; font: 700 15px/1 var(--font-ui);
  color: var(--accent-deep, var(--ink)); display: flex; align-items: center; gap: 8px; }
.cj-howto__summary::-webkit-details-marker { display: none; }
.cj-howto__summary::after { content: "▾"; margin-left: auto; color: var(--ink-muted); transition: transform var(--cj-dur, .16s) ease; }
.cj-howto[open] .cj-howto__summary::after { transform: rotate(180deg); }
.cj-howto__body { padding: 0 16px 14px; }
.cj-howto__mech { margin: 0 0 8px; font: 500 15px/1.5 var(--font-ui); color: var(--ink); }
.cj-howto__mode { margin: 0; font: 500 13px/1.5 var(--font-ui); color: var(--ink-muted); }

/* ---------- Unlimited run tracker + results score ---------- */
.cj-run__readout { margin: 4px 0 0; font: 700 13px/1.3 var(--font-ui); color: var(--accent-deep, var(--ink)); font-variant-numeric: tabular-nums; }
.cj-results__score { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 4px 0 16px;
  padding: 12px 16px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--surface); }
.cj-results__score-big { font: 800 34px/1 var(--font-display); color: var(--accent-deep, var(--ink)); font-variant-numeric: tabular-nums; }
.cj-results__score-lbl { font: 700 14px/1 var(--font-ui); color: var(--ink); }
.cj-results__score-time { font: 600 14px/1 var(--font-ui); color: var(--ink-muted); }

/* ---------- DR-072 tactile + smooth polish for the older live boards (CSS-only) ---------- */
.cj-pits__cell--legacy-polish { box-shadow: inset 0 2px 0 rgba(255,255,255,.22), inset 0 -3px 6px rgba(0,0,0,.16), 0 3px 5px -2px rgba(40,25,5,.4);
  transition: transform var(--cj-dur, .16s) var(--cj-ease, ease), box-shadow var(--cj-dur, .16s) ease; }
.cj-pits__cell:hover:not(.cj-pits__cell--open) { filter: brightness(1.06); }

.cj-shuffle__tile { border-radius: 8px; box-shadow: inset 0 2px 0 rgba(255,255,255,.14), 0 4px 8px -3px rgba(0,0,0,.5);
  transition: transform var(--cj-dur, .16s) var(--cj-ease, ease), box-shadow var(--cj-dur, .16s) ease; }
.cj-shuffle__tile:hover { transform: translateY(-2px); }
.cj-blend__digit { box-shadow: inset 0 1px 2px rgba(0,0,0,.08);
  transition: border-color var(--cj-dur, .16s) ease, transform var(--cj-dur, .16s) ease, box-shadow var(--cj-dur, .16s) ease; }
.cj-blend__digit:focus { transform: translateY(-1px); }
.cj-recipe__cell, .cj-measure__cell, .cj-batch__cell { transition: background var(--cj-dur, .16s) ease, box-shadow var(--cj-dur, .16s) ease; }

/* Smooth, tactile feel across the remaining boards (transitions add no layout shift; hover only on the
   clearly-clickable tiles). Completes the DR-072 polish rollout without restructuring each board. */
.cj-ws__cell, .cj-jig__piece, .cj-speckle__cell, .cj-skewer__island, .cj-poly__cell, .cj-wheel__slot,
.cj-batch__cell, .cj-batch__key, .cj-measure__cell, .cj-recipe__cell {
  transition: transform var(--cj-dur, .16s) var(--cj-ease, ease), box-shadow var(--cj-dur, .16s) ease, background var(--cj-dur, .16s) ease, border-color var(--cj-dur, .16s) ease;
}
.cj-jig__piece:hover, .cj-ws__cell:hover, .cj-wheel__slot:hover, .cj-batch__key:hover { transform: translateY(-2px); }

/* ---------- WAY OFF: difficulty-select screen + timed photo reveal ---------- */
.cj-wo__select { text-align: center; padding: 8px 0 4px; }
.cj-wo__select-title { font-family: var(--font-display); font-size: 22px; margin: 0 0 4px; color: var(--ink); }
.cj-wo__select-sub { color: var(--ink-muted); font-size: 14px; margin: 0 auto 16px; max-width: 54ch; }
.cj-wo__diffs { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; max-width: 720px; margin: 0 auto 16px; }
.cj-wo__diff { text-align: left; border: 2px solid var(--hairline); border-radius: 14px; background: var(--surface); padding: 12px 14px;
  cursor: pointer; display: flex; flex-direction: column; gap: 4px; transition: border-color var(--cj-dur, .16s) ease, transform var(--cj-dur, .16s) ease, box-shadow var(--cj-dur, .16s) ease; }
.cj-wo__diff:hover { transform: translateY(-2px); }
.cj-wo__diff[aria-pressed="true"] { border-color: var(--accent, #B4531F); box-shadow: 0 0 0 3px var(--accent-tint, #FDE9DA); }
.cj-wo__diff-name { font: 800 17px/1 var(--font-display); color: var(--accent-deep, var(--ink)); }
.cj-wo__diff-blurb { font: 500 13px/1.4 var(--font-ui); color: var(--ink-muted); }
.cj-wo__timer { font: 800 15px/1 var(--font-ui); color: var(--accent-deep, var(--ink)); font-variant-numeric: tabular-nums; }
/* the reveal overlay: dark tiles over the photo that fade centre-out over the difficulty's seconds */
.cj-wo__reveal { position: absolute; inset: 0; display: grid; pointer-events: none; z-index: 2; }
.cj-wo__rtile { background: #12202b; transition: opacity .5s ease; }
.cj-wo__rtile--gone { opacity: 0; }

/* ---------- Sign in (/login, /auth/callback) ---------- */
.cj-auth { max-width: 46rem; margin: 0 auto; }
.cj-auth h1 { font-family: var(--font-display); font-size: clamp(26px,5vw,36px); margin: 0 0 8px; }
.cj-auth__lede { color: var(--ink-muted); max-width: 56ch; margin: 0 0 20px; }
.cj-auth__oauth { display: grid; gap: 8px; margin: 0 0 4px; }
.cj-auth__provider { width: 100%; justify-content: center; }
.cj-auth__or { display: flex; align-items: center; gap: 12px; color: var(--ink-muted); font-size: 13px; margin: 14px 0; }
.cj-auth__or::before, .cj-auth__or::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
.cj-auth__form { display: grid; gap: 6px; }
.cj-auth__form label { font-weight: 600; font-size: 14px; }
.cj-auth__form input {
  min-height: var(--touch-min); padding: 10px 12px; border-radius: var(--radius);
  border: 1px solid var(--n-300); background: var(--surface); color: var(--ink); font: inherit; width: 100%;
}
.cj-auth__pwrow { display: grid; gap: 6px; }
.cj-auth__pwrow[hidden] { display: none; }
.cj-auth__buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cj-auth__status:empty { display: none; }
.cj-auth__status { margin: 10px 0 0; padding: 10px 12px; border-radius: var(--radius); background: var(--surface-2, var(--surface)); font-size: 14px; }
.cj-auth__legal, .cj-auth__note { color: var(--ink-muted); font-size: 13px; margin-top: 20px; }
.cj-auth__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cj-auth--callback { text-align: center; padding: 48px 0; }

/* ---------- Tip Jar (/tip-jar) ---------- */
.cj-tip { max-width: 46rem; margin: 0 auto; }
.cj-tip__head h1 { font-family: var(--font-display); font-size: clamp(26px,5vw,36px); margin: 0 0 8px; }
.cj-tip__lede { color: var(--ink-muted); max-width: 60ch; }
.cj-tip__block, .cj-tip__widget, .cj-tip__gate { padding: 20px 0; border-top: 1px solid var(--hairline); }
.cj-tip__block h2, .cj-tip__widget h2, .cj-tip__gate h2 { font-family: var(--font-display); font-size: 20px; margin: 0 0 8px; }
.cj-tip__options { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.cj-tip__option { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cj-tip__optnote, .cj-tip__note, .cj-tip__amounts-lede { color: var(--ink-muted); font-size: 13px; }
.cj-tip__note { margin-top: 14px; }
.cj-tip__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 8px; }
.cj-tip__gate { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 18px; background: var(--surface); }
.cj-tip__free { color: var(--ink-muted); padding-left: 1.2em; }
.cj-tip__free li { margin: 4px 0; }

/* WAY OFF: the two-step commit (DR-078). The controls sit under the stage, full width, so the
   primary action is unmissable at the size the stage now is. */
.cj-wo__controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 14px; }
.cj-wo__controls .cj-btn { min-width: 260px; justify-content: center; font-weight: 700; }
.cj-wo__status { margin: 0; color: var(--ink-muted); font: 500 14px/1.4 var(--font-ui); }
/* The question only exists after the pin is locked, so give it presence when it arrives. */
.cj-wo__trivia { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--surface); }
.cj-wo__trivia[hidden] { display: none; }
.cj-wo__tq { margin: 0 0 10px; font: 700 16px/1.3 var(--font-display); }
.cj-wo__opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.cj-wo__opt { min-height: var(--touch-min); padding: 12px 14px; border-radius: 12px; border: 1px solid var(--n-300);
  background: var(--surface); color: var(--ink); font: 600 15px/1.2 var(--font-ui); cursor: pointer; text-align: left; }
.cj-wo__opt:hover { border-color: var(--accent, #B4531F); }
.cj-wo__opt[aria-pressed="true"] { border-color: var(--accent, #B4531F); box-shadow: inset 0 0 0 2px var(--accent, #B4531F); font-weight: 700; }

/* ---------- Batch (sudoku): a conventional grid, because that's what people expect ----------
   It read as a mess of loose boxes before: no grid rules, no 3x3 emphasis, no distinction between a
   given and something you typed. A sudoku's legibility IS its heavy box rules and its still,
   evenly-weighted numerals; anything else makes a solvable puzzle feel unsolvable. */
.cj-batch { max-width: 620px; margin-inline: auto; }
.cj-batch__hint { color: var(--ink-muted); font: 500 14px/1.4 var(--font-ui); margin: 0 0 6px; }
.cj-batch__grade { margin: 0 0 10px; font: 600 14px/1 var(--font-ui); color: var(--ink-muted); }
.cj-batch__grade b { color: var(--accent-deep, var(--ink)); text-transform: capitalize; }

.cj-batch__grid {
  display: grid; aspect-ratio: 1 / 1; width: 100%;
  /* The outer rule is the same weight as the box rules, so the grid reads as nine boxes, not 81 cells. */
  border: 3px solid var(--ink); border-radius: 4px; overflow: hidden; background: var(--ink);
  gap: 1px; /* the 1px gaps ARE the thin cell rules — the dark background shows through */
}
.cj-batch__cell {
  position: relative; display: flex; align-items: center; justify-content: center;
  background: var(--surface); min-width: 0; aspect-ratio: 1 / 1;
}
.cj-batch__cell--shade { background: color-mix(in oklch, var(--accent-tint, #e8eef6) 45%, var(--surface)); }
/* Heavy rules between the 3x3 boxes, drawn as an extra 2px of the grid's own dark colour. */
.cj-batch__cell--box-r { box-shadow: 2px 0 0 0 var(--ink); z-index: 1; }
.cj-batch__cell--box-b { box-shadow: 0 2px 0 0 var(--ink); z-index: 1; }
.cj-batch__cell--box-r.cj-batch__cell--box-b { box-shadow: 2px 0 0 0 var(--ink), 0 2px 0 0 var(--ink); }

/* Givens are the puzzle; entries are yours. Weight tells them apart, colour only reinforces it. */
.cj-batch__cell--given { font: 700 clamp(18px, 4.4vw, 30px)/1 var(--font-display); color: var(--ink); }
.cj-batch__input {
  width: 100%; height: 100%; border: 0; background: transparent; text-align: center; padding: 0;
  font: 500 clamp(18px, 4.4vw, 30px)/1 var(--font-display); color: var(--accent-deep, #1d4ed8);
  caret-color: transparent; cursor: pointer;
}
.cj-batch__input:focus { outline: 0; background: color-mix(in oklch, var(--accent, #B4531F) 18%, transparent); }
.cj-batch__notes {
  position: absolute; inset: 2px; display: flex; align-items: flex-start; justify-content: flex-start;
  font: 500 clamp(8px, 1.6vw, 11px)/1.1 var(--font-ui); color: var(--ink-muted);
  letter-spacing: .12em; pointer-events: none; word-break: break-all;
}

/* Entry pad: a proper number pad, not a row of loose chips. */
.cj-batch__pad { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 14px 0 10px; }
@media (max-width: 480px) { .cj-batch__pad { grid-template-columns: repeat(5, 1fr); } }
.cj-batch__key {
  min-height: var(--touch-min); border-radius: 10px; border: 1px solid var(--n-300);
  background: var(--surface); color: var(--ink); font: 700 18px/1 var(--font-display); cursor: pointer;
}
.cj-batch__key--notes, .cj-batch__key--icons, .cj-batch__key--erase { font: 600 13px/1 var(--font-ui); }
.cj-batch__key[aria-pressed="true"] { background: var(--accent, #B4531F); border-color: var(--accent, #B4531F); color: #fff; }
.cj-batch__entry { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cj-batch__purist:not(:empty) { font: 700 13px/1 var(--font-ui); color: var(--accent-deep, var(--ink)); }
.cj-batch__status { margin: 10px 0 0; color: var(--ink-muted); font: 500 14px/1.4 var(--font-ui); }
.cj-rung__hintout:empty { display: none; }
.cj-rung__hintout { margin: 10px 0 0; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--hairline);
  background: var(--surface); font: 600 15px/1.4 var(--font-ui); color: var(--ink); }
.cj-recipe__cell--hinted { background: color-mix(in oklch, var(--accent, #B4531F) 16%, transparent); font-weight: 700; }