/* ChimpVibe design-system components, brought into the site from ChimpVibe/design-system/components.css (the Design
   tab): the pieces the Specimen Wall front page, the game tree page (/<slug>/tree) and the game page (/<slug>) use. Tokens only (/shared/cv-tokens.css), all under a .cv-ds scope.
   Differences from the Design tab copy, all wiring rather than look:
   - the Design tab's demo-only .is-hover/.is-focus/... state classes are left out;
   - its .cv-wordmark rules are left out: the site draws its own wordmark (/shared/wordmark.mjs + wordmark.css);
   - a game card is a <div> holding its links (the game, and "Open the tree") instead of one <a>, because a link cannot
     sit inside a link; .cv-card__play wraps the capture (the card's tab stop), and the name links to the game too;
   - the tree beside each capture is the site's live tree (growTree), placed in the card's second column. */

/* ---------- buttons ---------- */
.cv-ds .cv-btn{appearance:none;border:0;margin:0;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font:var(--weight-regular) var(--text-control)/1 var(--font-display);letter-spacing:var(--tracking-display);
  height:47px;padding:0 var(--space-5);border-radius:var(--radius-cap);
  background:var(--material-primary);color:var(--color-on-primary);box-shadow:var(--elevation-cap-primary);
  margin-bottom:var(--size-floor);
  transition:transform var(--duration-sink) var(--ease-standard),box-shadow var(--duration-sink) var(--ease-standard),background var(--duration-fade) var(--ease-standard)}
.cv-ds .cv-btn:hover{transform:translateY(-2px);box-shadow:var(--elevation-cap-primary-hover)}
.cv-ds .cv-btn:active{transform:translateY(var(--lift-press));box-shadow:var(--elevation-cap-pressed);transition-duration:var(--duration-press)}
.cv-ds .cv-btn:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.cv-ds .cv-btn:disabled{cursor:not-allowed;transform:none;background:var(--material-disabled);color:var(--color-disabled-text);box-shadow:var(--elevation-cap-disabled)}
/* secondary (quiet): flat tone, no floor */
.cv-ds .cv-btn--quiet{font:var(--weight-medium) var(--text-control-quiet)/1 var(--font-body);letter-spacing:0;
  height:46px;padding:0 var(--space-5) 0 20px;border-radius:var(--radius-md);margin-bottom:0;
  background:var(--material-raised);color:var(--color-primary-strong);box-shadow:none}
.cv-ds .cv-btn--quiet:hover{transform:translateY(-2px);background:var(--material-raised-hover);box-shadow:none}
.cv-ds .cv-btn--quiet:active{transform:none;background:var(--material-low);box-shadow:none}
.cv-ds .cv-btn__arrow{width:14px;height:14px;flex:none;fill:currentColor}

/* text button: mint-bright label on a 2px mint-deep bar */
.cv-ds .cv-link{appearance:none;background:none;border:0;padding:0 0 4px;margin:0;cursor:pointer;text-decoration:none;
  font:var(--weight-medium) var(--text-small)/1.2 var(--font-body);color:var(--color-link);
  box-shadow:inset 0 -2px 0 var(--color-link-underline);transition:box-shadow var(--duration-quick) var(--ease-standard),color var(--duration-quick) var(--ease-standard)}
.cv-ds .cv-link:hover{box-shadow:inset 0 -2px 0 var(--color-primary)}
.cv-ds .cv-link:active{color:var(--color-primary);box-shadow:inset 0 -2px 0 var(--color-primary)}
.cv-ds .cv-link:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset);border-radius:var(--radius-xs)}

/* ---------- tag, dots, counts ---------- */
.cv-ds .cv-tag{appearance:none;border:0;margin:0;cursor:copy;display:inline-flex;align-items:center;
  font:var(--weight-regular) 18px/1 var(--font-display);letter-spacing:var(--tracking-tag);
  padding:.66em .9em;border-radius:var(--radius-tag);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;background:var(--material-tag);color:var(--color-take);
  transition:background var(--duration-press) var(--ease-standard)}
.cv-ds .cv-tag:hover{background:var(--material-tag-hover)}
.cv-ds .cv-tag:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.cv-ds .cv-tag--sm{font-size:var(--text-small)}

.cv-ds .cv-dot{display:inline-block;width:9px;height:9px;border-radius:var(--radius-pill);background:var(--color-idle);flex:none}
.cv-ds .cv-dot--live{background:var(--color-live);box-shadow:0 0 0 4px var(--color-live-halo)}

.cv-ds .cv-count{display:inline-flex;align-items:center;gap:6px;font:var(--weight-regular) var(--text-card-title)/1 var(--font-display);color:var(--color-text)}
.cv-ds .cv-count[hidden]{display:none}
.cv-ds .cv-count svg{width:18px;height:18px;fill:currentColor}

.cv-ds .cv-eyebrow{font:var(--weight-semibold) var(--text-eyebrow)/1 var(--font-body);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--color-primary)}

/* ---------- game card ---------- */
.cv-ds .cv-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-1) var(--space-3);align-content:start;min-width:0;color:inherit;text-decoration:none}
.cv-ds .cv-card__play{grid-column:1/-1;display:block;min-width:0;color:inherit;text-decoration:none}
.cv-ds .cv-card__play .cv-card__capture{margin-bottom:0}
.cv-ds a.cv-card__name{text-decoration:none}
.cv-ds .cv-card__capture{grid-column:1/-1;display:block;width:100%;aspect-ratio:var(--ratio-capture);object-fit:cover;border-radius:var(--radius-lg);
  background:var(--color-surface-sunken);box-shadow:var(--elevation-capture);margin-bottom:var(--space-2);
  transition:transform var(--duration-hover) var(--ease-standard)}
.cv-ds .cv-card__play{margin-bottom:var(--space-2);transition:transform var(--duration-hover) var(--ease-standard)}
.cv-ds .cv-card:has(.cv-card__play:hover,a.cv-card__name:hover) .cv-card__play{transform:translateY(var(--lift-hover))}
.cv-ds .cv-card__play:focus-visible{outline:none}
.cv-ds .cv-card__play:focus-visible .cv-card__capture{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.cv-ds .cv-card__name{display:flex;align-items:center;gap:10px;min-width:0;margin:0;font:var(--weight-regular) var(--text-card-title)/1.15 var(--font-display);letter-spacing:0;color:var(--color-text)}
.cv-ds .cv-card__name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cv-ds .cv-card__author{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--weight-regular) var(--text-meta)/1.3 var(--font-body);color:var(--color-text-muted);padding-left:19px}
.cv-ds .cv-card__end{justify-self:end;align-self:center}
.cv-ds .cv-card--slot .cv-card__capture{display:grid;place-items:center;color:var(--color-text-muted);font:var(--weight-regular) var(--text-card-title)/1 var(--font-display)}
.cv-ds .cv-card--slot .cv-card__capture svg{width:40px;height:40px;fill:var(--color-text-muted)}
.cv-ds .cv-card--slot .cv-card__name{color:var(--color-text-muted)}
.cv-ds .cv-card--slot .cv-card__author{padding-left:0}

/* ---------- Specimen Wall (front page): capture with its tree beside it, 3 columns ---------- */
.cv-ds .cv-wall{display:grid;grid-template-columns:repeat(var(--wall-columns),minmax(0,1fr));gap:var(--space-5) var(--space-6);margin:0;padding:0;list-style:none}
.cv-ds .cv-wall__item{position:relative;min-width:0}
.cv-ds .cv-wall__item .cv-card{grid-template-columns:minmax(0,1fr) var(--size-wall-tree);column-gap:var(--space-3)}
.cv-ds .cv-wall__item .cv-card__play{grid-column:1;grid-row:1}
.cv-ds .cv-wall__item .cv-card__name{grid-column:1;grid-row:2}
.cv-ds .cv-wall__item .cv-card__author{grid-column:1;grid-row:3}
.cv-ds .cv-wall__item .cv-count.cv-card__end{grid-column:2;grid-row:2}
.cv-ds .cv-wall__item .cv-card__end:last-child{grid-column:2;grid-row:3}
/* the game's real tree (site code, unchanged): only sized and placed here. It stands in the column beside the capture,
   as tall as the capture, on the capture's bottom line; every 2nd of 3 leans like the site's old index panes. */
.cv-ds .cv-wall__tree{grid-column:2;grid-row:1;display:flex;align-items:flex-end;justify-content:center;width:var(--size-wall-tree);align-self:stretch;contain:size;margin-bottom:var(--space-2);color:inherit}
.cv-ds .cv-wall__tree > svg{display:block;width:auto;height:100%;max-width:100%}
.cv-ds .cv-wall__item:nth-child(3n+2) .cv-wall__tree{transform:rotate(-5deg)}
.cv-ds .cv-wall__item:nth-child(3n) .cv-wall__tree{transform:rotate(4deg)}
.cv-ds a.cv-wall__tree:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset);border-radius:var(--radius-lg)}
@media (max-width:900px){.cv-ds .cv-wall{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}}

/* ---------- header / masthead ---------- */
.cv-ds .cv-masthead{display:grid;gap:var(--space-5);max-width:600px}
.cv-ds .cv-lead{margin:0;font:var(--weight-regular) var(--text-lead)/var(--leading-lead) var(--font-body);color:var(--color-text-muted);max-width:40ch}
.cv-ds .cv-lead b,.cv-ds .cv-lead strong{font-weight:var(--weight-medium);color:var(--color-text)}
.cv-ds .cv-lead em{font-style:normal;color:var(--color-primary)}
.cv-ds .cv-stat{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-2) var(--space-6);align-items:center}
.cv-ds .cv-stat__n{font:var(--weight-regular) var(--text-stat)/.8 var(--font-display);letter-spacing:var(--tracking-stat);color:var(--color-take)}
.cv-ds .cv-stat__say{margin:0;font:var(--weight-regular) 22px/1.4 var(--font-body);color:var(--color-text)}
.cv-ds .cv-actions{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:flex-start}
.cv-ds .cv-section-head{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-6);align-items:center;justify-content:space-between}
.cv-ds .cv-section-title{margin:0;font:var(--weight-regular) var(--text-heading)/var(--leading-heading) var(--font-display);letter-spacing:var(--tracking-heading);color:var(--color-text)}
.cv-ds .cv-steps{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-4);align-items:center;margin:0;padding:0;list-style:none;
  font:var(--weight-regular) 17px/1.2 var(--font-body);color:var(--color-text)}
.cv-ds .cv-steps li{display:inline-flex;align-items:center;gap:var(--space-2)}
.cv-ds .cv-steps svg{width:24px;height:24px}
.cv-ds .cv-steps .cv-steps__arrow{width:16px;height:16px;fill:var(--color-text-muted)}
/* the step icons' colours (the Design tab sets them inline; the site's CSP allows no inline style) */
.cv-ds .cv-steps .is-primary{fill:var(--color-primary)}
.cv-ds .cv-steps .is-primary-strong{fill:var(--color-primary-strong)}
.cv-ds .cv-steps .is-primary-edge{fill:var(--color-primary-edge)}
.cv-ds .cv-steps .is-take{fill:var(--color-take)}
.cv-ds .cv-steps .is-stem{fill:none;stroke:var(--color-primary)}

/* ---------- footer ---------- */
.cv-ds .cv-footer{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-6);align-items:center;justify-content:space-between;
  padding:var(--space-6) 0;font:var(--weight-regular) var(--text-xs)/1.4 var(--font-body);color:var(--color-text-muted)}
.cv-ds .cv-footer nav{display:flex;flex-wrap:wrap;gap:var(--space-5)}
.cv-ds .cv-footer .cv-link{font-size:var(--text-xs)}
/* the made-with-AI note: its own quiet line under the footer text, in the footer's muted colour (it will become a link to the terms of use) */
.cv-ds .cv-footer__ai-note{display:block;margin-top:var(--space-1)}

/* ---------- game tree page (/<slug>/tree): the head, the fruit list and its rows, status badges, the count line, the
   empty and loading states, the fruit card and the copy toast. The tree itself is the site's own (shared/tree-grow.js),
   untouched; the page's grid and sizes live in /tree.css. ---------- */

/* the head: the bare tree mark centred, the game's name in caps with a small mint PLAY link */
.cv-ds .cv-tree-head{display:grid;justify-items:center;gap:var(--space-2)}
.cv-ds .cv-tree-head__mark{display:inline-block;border-radius:var(--radius-xs)}
.cv-ds .cv-tree-head__mark img{display:block;width:clamp(4rem,9vw,6rem);max-height:2.5rem;object-fit:contain}
.cv-ds .cv-tree-head__mark:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.cv-ds .cv-tree-head__name{margin:0;font:var(--weight-regular) clamp(28px,2.4vw,40px)/1.05 var(--font-display);letter-spacing:.04em;text-align:center;text-transform:uppercase;color:var(--color-text)}
.cv-ds .cv-tree-head__name a{display:inline-flex;align-items:baseline;gap:var(--space-3);color:var(--color-text);text-decoration:none;border-radius:var(--radius-xs);transition:color var(--duration-quick) var(--ease-standard)}
.cv-ds .cv-tree-head__play{padding-bottom:3px;font:var(--weight-semibold) var(--text-eyebrow)/1 var(--font-body);letter-spacing:var(--tracking-eyebrow);color:var(--color-primary);box-shadow:inset 0 -2px 0 var(--color-primary-edge);transition:box-shadow var(--duration-quick) var(--ease-standard),color var(--duration-quick) var(--ease-standard)}
.cv-ds .cv-tree-head__name a:hover{color:var(--color-primary-strong)}
.cv-ds .cv-tree-head__name a:hover .cv-tree-head__play{color:var(--color-primary-strong);box-shadow:inset 0 -2px 0 var(--color-primary)}
.cv-ds .cv-tree-head__name a:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}

/* status badge: a variant of the tag (its flat tint and display face) as small caps on a pill, and not a control.
   New is the tag's own coin; Playing now is neon (the running version's blue); Start is quiet; In progress is orange. */
.cv-ds .cv-tag--badge,.cv-ds .cv-tag--badge:hover{padding:5px 8px;border-radius:var(--radius-pill);font-size:11px;line-height:1;letter-spacing:.06em;text-transform:uppercase;cursor:default;
  background:var(--cv-badge-tint,var(--material-tag));color:var(--cv-badge-ink,var(--color-take))}
.cv-ds .cv-tag--live{--cv-badge-tint:var(--color-accent-tint);--cv-badge-ink:var(--color-accent)}
.cv-ds .cv-tag--start{--cv-badge-tint:var(--color-surface-raised);--cv-badge-ink:var(--color-text-muted)}
.cv-ds .cv-tag--busy{--cv-badge-tint:color-mix(in srgb,var(--color-in-progress) 14%,transparent);--cv-badge-ink:var(--color-in-progress)}

/* the count line: the big coin number inline, with words beside it (the orchard widget's 34px stat) */
.cv-ds .cv-stat--inline{display:flex;align-items:baseline;gap:var(--space-2);margin:0}
.cv-ds .cv-stat--inline .cv-stat__n{font-size:clamp(26px,1.8vw,34px);line-height:1}
.cv-ds .cv-stat--inline .cv-stat__say{font:var(--weight-regular) var(--text-body)/1.3 var(--font-body);color:var(--color-text-muted)}
.cv-ds .cv-stat--inline .cv-stat__say strong{font-weight:var(--weight-medium);color:var(--color-text)}

/* empty state: the ranking table's empty box; --inset sits one tone up inside a panel, with smaller words */
.cv-ds .cv-rank-empty{display:grid;justify-items:start;gap:var(--space-3);padding:var(--space-6);border-radius:var(--radius-lg);background:var(--color-surface-sunken)}
.cv-ds .cv-rank-empty__title{margin:0;font:var(--weight-regular) var(--text-lead)/1.2 var(--font-display);color:var(--color-text)}
.cv-ds .cv-rank-empty p{margin:0;color:var(--color-text-muted);max-width:52ch}
.cv-ds .cv-rank-empty--inset{gap:var(--space-2);padding:var(--space-4);background:var(--color-surface)}
.cv-ds .cv-rank-empty--inset p{font-size:var(--text-xs);line-height:var(--leading-body)}
.cv-ds .cv-rank-empty--inset .cv-rank-empty__title{font-size:var(--text-lead);line-height:1.2;color:var(--color-text)}

/* the fruit list: a flat sunken panel; its head stays put and only the list scrolls, fading at both ends */
.cv-ds .cv-fruit-list{display:flex;flex-direction:column;min-width:0;overflow:hidden;border-radius:var(--radius-xl);background:var(--color-surface-sunken)}
.cv-ds .cv-fruit-list [hidden]{display:none}
.cv-ds .cv-fruit-list__head{display:grid;gap:var(--space-3);padding:var(--space-5) var(--space-5) var(--space-3)}
.cv-ds .cv-fruit-list__top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3)}
.cv-ds .cv-fruit-list__title{margin:0}
.cv-ds .cv-fruit-list__order{font:var(--weight-regular) var(--text-eyebrow)/1 var(--font-body);color:var(--color-text-muted)}
.cv-ds .cv-fruit-list__list{flex:1 1 auto;min-height:0;margin:0;padding:0 var(--space-3) var(--space-3);list-style:none;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--color-surface-raised) transparent;
  -webkit-mask-image:linear-gradient(#0000,#000 var(--space-3),#000 calc(100% - var(--space-6)),#0000);mask-image:linear-gradient(#0000,#000 var(--space-3),#000 calc(100% - var(--space-6)),#0000)}
.cv-ds .cv-fruit-list__list li+li{margin-top:2px}

/* one fruit: dot · title · status, then who · when · #n and the lines it changed. A button: it opens the fruit's card */
.cv-ds .cv-fruit-row{appearance:none;display:grid;grid-template-columns:10px minmax(0,1fr) auto;grid-template-areas:"dot what badges" ". meta diff";column-gap:var(--space-3);row-gap:3px;align-items:center;
  width:100%;margin:0;padding:var(--space-3);border:0;border-radius:var(--radius-md);background:transparent;color:var(--color-text);font:inherit;text-align:left;cursor:pointer;
  transition:background var(--duration-fade) var(--ease-standard),box-shadow var(--duration-fade) var(--ease-standard)}
.cv-ds .cv-fruit-row:hover{background:var(--material-low-hover)}
.cv-ds .cv-fruit-row:focus-visible{outline:var(--focus-ring);outline-offset:-3px}
/* the fruit whose card is open: one tone up, with a bar in the tree's own fruit colour (neon for the running one) */
.cv-ds .cv-fruit-row.is-current{background:var(--color-surface);box-shadow:inset 3px 0 0 var(--t3,var(--color-primary))}
.cv-ds .cv-fruit-row.is-current.is-live{box-shadow:inset 3px 0 0 var(--color-accent)}
/* the dot is the fruit: the tree's fruit colour with its glow; neon for the version playing now; orange while someone
   builds on it (on the running fruit only its ring turns orange, as on the tree) */
.cv-ds .cv-fruit-row__dot{grid-area:dot;width:10px;height:10px;border-radius:var(--radius-pill);background:var(--t3,var(--color-primary));box-shadow:0 0 8px var(--t3,var(--color-primary))}
.cv-ds .cv-fruit-row.is-live .cv-fruit-row__dot{background:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-tint),0 0 10px var(--color-accent)}
.cv-ds .cv-fruit-row.is-busy .cv-fruit-row__dot{background:var(--color-in-progress);box-shadow:0 0 8px var(--color-in-progress)}
.cv-ds .cv-fruit-row.is-live.is-busy .cv-fruit-row__dot{background:var(--color-accent);box-shadow:0 0 0 3px var(--color-in-progress)}
.cv-ds .cv-fruit-row__what{grid-area:what;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--weight-medium) var(--text-xs)/1.3 var(--font-body);color:var(--color-text)}
.cv-ds .cv-fruit-row__badges{grid-area:badges;display:inline-flex;gap:var(--space-1);justify-self:end}
.cv-ds .cv-fruit-row__meta{grid-area:meta;display:flex;align-items:baseline;gap:var(--space-2);min-width:0;overflow:hidden;white-space:nowrap;font:var(--weight-regular) 13px/1.35 var(--font-body);color:var(--color-text-muted)}
.cv-ds .cv-fruit-row__meta>*+*::before{content:"·";margin-right:var(--space-2);color:var(--color-text-muted);opacity:.45}
.cv-ds .cv-fruit-row__meta>:not(.cv-fruit-row__who){flex:none}
.cv-ds .cv-fruit-row__who{min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:var(--weight-medium);color:var(--color-text)}
.cv-ds .cv-fruit-row__who--unknown{font-weight:var(--weight-regular);font-style:italic;color:var(--color-text-muted)}
.cv-ds .cv-fruit-row.is-nodiff .cv-fruit-row__meta{grid-column:2/-1}
.cv-ds .cv-fruit-row .diff{grid-area:diff;justify-self:end;font:var(--weight-regular) 13px/1.35 var(--font-body);white-space:nowrap}
.cv-ds .cv-fruit-row .diff__add{color:var(--color-primary)}
.cv-ds .cv-fruit-row .diff__del{color:var(--color-danger)}
/* narrow (one column, a phone): no room for a one-line title beside a badge, so up to two lines */
.cv-ds .cv-fruit-list--narrow .cv-fruit-row__what{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;align-self:start;white-space:normal}
.cv-ds .cv-fruit-list--narrow .cv-fruit-row__dot{align-self:start;margin-top:5px}
.cv-ds .cv-fruit-list--narrow .cv-fruit-row__badges{align-self:start}
/* loading: flat placeholder bars in the row's own grid (as the ranking table's loading rows) */
.cv-ds .cv-fruit-row--loading,.cv-ds .cv-fruit-row--loading:hover{cursor:default;background:transparent}
.cv-ds .cv-fruit-row--loading .cv-fruit-row__dot{background:var(--color-surface);box-shadow:none}
.cv-ds .cv-fruit-row--loading .cv-skel{display:block;height:12px;border-radius:var(--radius-xs);background:var(--color-surface)}
.cv-ds .cv-fruit-row--loading .cv-fruit-row__what{width:72%;height:14px}
.cv-ds .cv-fruit-row--loading .cv-fruit-row__meta{grid-column:2/-1;width:44%}
@media (prefers-reduced-motion:no-preference){.cv-ds .cv-fruit-row--loading .cv-skel{animation:cv-pulse var(--duration-glow) var(--ease-standard) infinite alternate}}
@keyframes cv-pulse{to{background:var(--color-surface-raised)}}

/* the fruit card, design-system look: a flat raised surface, no outline, Rubik and Russo One, the coin tag button.
   A modifier on the shared .card: /shared/card.css keeps its placement, tip, pinning and bloom. Only an element that
   carries .cv-fruit-card changes (the public tree page's card), so the operator app's cards keep their look. */
.cv-ds .cv-fruit-card{--card-accent:var(--t3,var(--color-primary));width:min(320px,calc(100vw - 16px));padding:var(--space-4);border:0;border-radius:var(--radius-lg);
  background:var(--color-surface-raised);color:var(--color-text);font:var(--weight-regular) var(--text-xs)/var(--leading-body) var(--font-body);box-shadow:none}
.cv-ds .cv-fruit-card [hidden]{display:none}
.cv-ds .cv-fruit-card.card--pinned{box-shadow:inset 0 -4px 0 var(--card-accent)}
.cv-ds .cv-fruit-card .card__eyebrow{margin:0 0 var(--space-2);font:var(--weight-semibold) var(--text-eyebrow)/1 var(--font-body);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--color-text-muted)}
.cv-ds .cv-fruit-card .card__author{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin:0 0 var(--space-2);padding-right:var(--space-6);font:var(--weight-medium) var(--text-small)/1.2 var(--font-body);letter-spacing:0;text-transform:none;color:var(--color-text)}
.cv-ds .cv-fruit-card .card__laurel{width:18px;height:18px;object-fit:contain;flex:none}
.cv-ds .cv-fruit-card .card__author-name{min-width:0;overflow-wrap:anywhere}
.cv-ds .cv-fruit-card .card__badges{display:flex;align-items:center;gap:6px;margin-left:auto}
/* NEW (coin) and ACTIVE (neon: the version playing now): the status badge's flat tints */
.cv-ds .cv-fruit-card .card__author :is(.badge--new,.badge--active){position:static;display:inline-flex;margin-left:0;padding:5px 8px;border:0;border-radius:var(--radius-pill);font:var(--weight-regular) var(--text-eyebrow)/1 var(--font-display);letter-spacing:var(--tracking-display);box-shadow:none}
.cv-ds .cv-fruit-card .card__author .badge--new{background:var(--color-take-tint);color:var(--color-take)}
.cv-ds .cv-fruit-card .card__author .badge--active{background:var(--color-accent-tint);color:var(--color-accent)}
.cv-ds .cv-fruit-card .card__title,.cv-ds .cv-fruit-card:hover .card__title,.cv-ds .cv-fruit-card:focus-within .card__title{margin:0 0 var(--space-2);font:var(--weight-regular) var(--text-meta)/var(--leading-snug) var(--font-display);letter-spacing:var(--tracking-heading);color:var(--color-text)}
.cv-ds .cv-fruit-card .card__blurb{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden;margin:0 0 var(--space-2);font:var(--weight-regular) var(--text-xs)/var(--leading-body) var(--font-body);color:var(--color-text-muted)}
.cv-ds .cv-fruit-card .card__blurb.card__blurb--open{display:block;max-height:40vh;overflow-y:auto;-webkit-line-clamp:none}
.cv-ds .cv-fruit-card .card__build,.cv-ds .cv-fruit-card .card__meta{margin:0 0 var(--space-1);font:var(--weight-regular) var(--text-eyebrow)/1.4 var(--font-body);color:var(--color-text-muted);overflow-wrap:anywhere}
.cv-ds .cv-fruit-card .card__build-label{opacity:.7}
.cv-ds .cv-fruit-card .diff{font-family:var(--font-body);white-space:nowrap}
.cv-ds .cv-fruit-card .card__meta .diff{margin-left:6px}
.cv-ds .cv-fruit-card .diff__add{color:var(--color-primary)}
.cv-ds .cv-fruit-card .diff__del{color:var(--color-danger)}
/* "More": the design system's text link, small */
.cv-ds .cv-fruit-card .card__more{display:block;width:fit-content;margin:0 0 var(--space-2);padding:0 0 2px;border:0;background:none;font:var(--weight-medium) var(--text-eyebrow)/1.2 var(--font-body);letter-spacing:0;text-transform:none;color:var(--color-link);box-shadow:inset 0 -2px 0 var(--color-link-underline);cursor:pointer;transform:none}
.cv-ds .cv-fruit-card .card__more:hover,.cv-ds .cv-fruit-card .card__more:focus-visible{color:var(--color-link);text-decoration:none;box-shadow:inset 0 -2px 0 var(--color-primary);transform:none}
.cv-ds .cv-fruit-card .card__more:focus-visible{outline:var(--focus-ring);outline-offset:2px}
/* close: a small round quiet button (shows once the card is pinned) */
.cv-ds .cv-fruit-card .card__close{position:absolute;top:var(--space-3);right:var(--space-3);display:none;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:var(--radius-pill);
  background:var(--color-surface);color:var(--color-primary-strong);font:var(--weight-medium) var(--text-meta)/1 var(--font-body);cursor:pointer;box-shadow:none;transform:none}
.cv-ds .cv-fruit-card.card--pinned .card__close{display:grid}
.cv-ds .cv-fruit-card .card__close:hover{background:var(--color-surface-sunken);color:var(--color-primary-strong)}
.cv-ds .cv-fruit-card .card__close:focus-visible{outline:var(--focus-ring);outline-offset:2px}
/* the tag: the design system's coin tag, full width; the only coin text on the card */
.cv-ds .cv-fruit-card .card__tag{margin-top:var(--space-3);min-width:0}
.cv-ds .cv-fruit-card .tag{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;width:100%;max-width:100%;min-height:44px;padding:.66em .9em;border:0;border-radius:var(--radius-tag);
  background:var(--color-take-tint);color:var(--color-take);font:var(--weight-regular) var(--text-small)/1.2 var(--font-display);letter-spacing:var(--tracking-tag);text-transform:none;text-align:center;
  cursor:copy;box-shadow:none;transform:none;transition:background var(--duration-press) var(--ease-standard)}
.cv-ds .cv-fruit-card .tag :is(.tag__prefix,.tag__name){color:var(--color-take)}
.cv-ds .cv-fruit-card .tag__name{min-width:0;overflow-wrap:anywhere}
.cv-ds .cv-fruit-card button.tag:hover,.cv-ds .cv-fruit-card button.tag:active{background:var(--color-take-tint-hover);border:0;box-shadow:none;transform:none}
.cv-ds .cv-fruit-card button.tag:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset);box-shadow:none}
.cv-ds .cv-fruit-card button.tag--copied,.cv-ds .cv-fruit-card button.tag--copied:hover{background:var(--color-take);color:var(--color-on-take)}
.cv-ds .cv-fruit-card .tag--copied .tag__copied{color:var(--color-on-take)}
.cv-ds .cv-fruit-card .tag--none{cursor:default;color:var(--color-text-muted);background:var(--color-surface-sunken);font-family:var(--font-body);font-size:var(--text-xs)}
.cv-ds .cv-fruit-card .card__hint{margin:var(--space-2) 0 0;font:var(--weight-regular) var(--text-eyebrow)/1.4 var(--font-body);color:var(--color-text-muted);text-align:center}
/* who is building on this fruit (the live activity section) */
.cv-ds .cv-fruit-card .card__activity{display:grid;gap:var(--space-2);max-height:44vh;overflow-y:auto;margin:var(--space-2) 0 0;padding-top:var(--space-2);border-top:0;scrollbar-width:thin;scrollbar-color:var(--color-surface) transparent}
.cv-ds .cv-fruit-card .card__section{display:grid;gap:6px;min-width:0}
.cv-ds .cv-fruit-card .card__section-title{display:flex;align-items:center;gap:6px;margin:0;font:var(--weight-semibold) var(--text-eyebrow)/1 var(--font-body);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--color-text-muted)}
.cv-ds .cv-fruit-card .card__section--progress .card__section-title{color:var(--color-in-progress)}
.cv-ds .cv-fruit-card .card__section--progress .card__section-title::before{content:"";width:8px;height:8px;flex:none;border:2px solid var(--color-in-progress);border-right-color:transparent;border-radius:var(--radius-pill)}
.cv-ds .cv-fruit-card .card__section-count{margin-left:auto;color:var(--color-text-muted);letter-spacing:0}
.cv-ds .cv-fruit-card .card__row{margin:0;font:var(--weight-regular) var(--text-xs)/1.4 var(--font-body);color:var(--color-text);overflow-wrap:anywhere}
.cv-ds .cv-fruit-card .card__who{font-weight:var(--weight-medium)}
/* narrow screens: in flow under the tree (shared/card.js), the full width of the tree column */
.cv-ds .cv-fruit-card.card--inline{width:100%;max-width:none;margin:var(--space-4) 0 0}

/* ---------- game page (/<slug>): the slim bar (concept A). The mark, the game's name in caps, the coin tag of the
   version playing (game.js adds it before the links), TREE and INDEX as text links. The page's grid, the frame, the
   tag's states and the "new version" notice live in /game.css. ---------- */
.cv-ds .cv-game-bar{display:flex;align-items:center;gap:var(--space-4);height:60px;padding:0 var(--space-5);border-bottom:1px solid var(--color-surface-raised);background:var(--color-bg)}
.cv-ds .cv-game-bar__mark{display:inline-flex;flex:none;border-radius:var(--radius-xs)}
.cv-ds .cv-game-bar__mark img{display:block;width:auto;height:30px}
.cv-ds .cv-game-bar__mark:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.cv-ds .cv-game-bar__name{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--weight-regular) 24px/1 var(--font-display);letter-spacing:.04em;text-transform:uppercase;color:var(--color-text)}
.cv-ds .cv-game-bar__links{display:flex;flex:none;align-items:center;gap:var(--space-5);margin-left:auto}
.cv-ds .cv-game-bar__link{text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);font-weight:var(--weight-semibold);font-size:var(--text-eyebrow)}
@media (max-width:600px){
  .cv-ds .cv-game-bar{gap:var(--space-3);height:56px;padding:0 var(--space-3)}
  .cv-ds .cv-game-bar__name{font-size:19px}
  .cv-ds .cv-game-bar__links{gap:var(--space-4)}
}

/* the copy toast: shown only when the browser refuses to copy a tag ("select + copy"); shared/card.js places it */
.cv-ds .cv-toast{position:fixed;z-index:40;left:var(--toast-left,50%);top:var(--toast-top,8px);transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);margin:0;padding:var(--space-3) var(--space-5);
  border:0;border-radius:var(--radius-pill);background:var(--color-surface-raised);color:var(--color-text);font:var(--weight-regular) var(--text-small)/1.3 var(--font-body);text-align:center;
  opacity:0;pointer-events:none;transition:opacity var(--duration-fade) var(--ease-standard)}
.cv-ds .cv-toast.toast--shown{opacity:1}

@media (prefers-reduced-motion:reduce){
  .cv-ds .cv-btn,.cv-ds .cv-card__play,.cv-ds .cv-link,.cv-ds .cv-tag{transition:none}
  .cv-ds .cv-fruit-row,.cv-ds .cv-fruit-card .tag,.cv-ds .cv-toast,.cv-ds .cv-tree-head__name a,.cv-ds .cv-tree-head__play{transition:none}
}