:root {
  --cl-stage: 168px;
  --cl-stage-h: 236px;
  --cl-diorama-h: 264px;
  --cl-plot-h: 116px;
  --cl-pick-min: 92px;
  --cl-cell-min: 6.5rem;
  --cl-wide-min: 108px;
  --cl-art-h: 70px;
  --cl-swatch: 64px;
  --cl-swatch-big: 132px;
  --cl-swatch-small: 36px;
  --cl-link-min: 62px;
  --cl-node: 44px;
  --cl-road-line: 4px;
  --cl-ring: 104px;
  --cl-ring-stroke: 8px;
  --cl-mini: 52px;
  --cl-link-h: 72px;
  --cl-chip-min: 48px;
  --cl-slot-w: 4.75rem;
  --cl-hero-art: 64px;
  --cl-stat-ic: 48px;
  --cl-ic-s: 24px;
  --cl-badge-pad: 2px var(--sp-2) 2px 4px;
  --cl-grove-min: 150px;
  --cl-bed-min: 150px;
  --cl-mat-min: 84px;
  --cl-rec-min: 156px;
  --cl-like-w: 84px;
  --cl-unl-w: 5.75rem;
  --cl-parent-w: 76px;
  --cl-slotab: 82px;
  --cl-slotab-l: 96px;
  --cl-out: 76px;
  --cl-weekart: 88px;
  --cl-wneed: 58px;
  --cl-dslot: 56px;
  --heir-art: 140px;
  --heir-seed: 44px;
  --heir-trait-ic: 32px;
  --heir-trait-min: 92px;
  --cl-wslot-h: 72px;
  --cl-pip: 20px;
  --cl-dot: 12px;
  --cl-sil: brightness(0);
  --cl-sil-alpha: 0.24;
  --cl-locked: saturate(0.2);
  --cl-locked-alpha: 0.72;
  --cl-tint-alpha: 0.2;
  --cl-fly-spread: 56px;
  --cl-fly-up: 120px;
  --cl-fly-rise: 54px;
  --cl-burst: 1.5s;
  --cl-stagger: 70ms;
  --cl-ring-from: 24px;
  --cl-ring-scale: 5;
  --cl-z-burst: 35;
  --cl-glow-gold: 0 0 0 2px var(--gold), 0 0 18px rgba(247, 197, 72, 0.45);
  --cl-glow-accent: 0 0 0 3px var(--accent), 0 6px 18px rgba(0, 0, 0, 0.12);
  --cl-glass-line: rgba(255, 255, 255, 0.7);
  --cl-shade-line: rgba(0, 0, 0, 0.12);
}

.dark,
.theme-darkacademia,
.theme-cyberneon,
.theme-lofi {
  --cl-sil: brightness(0) invert(1);
  --cl-sil-alpha: 0.18;
  --cl-glass-line: rgba(255, 255, 255, 0.35);
}

.t-common { --tc: var(--tier-common); }
.t-rare { --tc: var(--tier-rare); }
.t-epic { --tc: var(--tier-epic); }
.t-legendary { --tc: var(--tier-legendary); }

.cl-gap { margin-top: var(--gap-m); }
.cl-good { color: var(--good-ink); font-weight: var(--fw-b); }
.cl-lead { margin: var(--gap-xs) 0 var(--gap-m); font-size: var(--fs-s); }
.cl-note { text-align: center; font-size: var(--fs-s); margin-top: var(--gap-l); }
.cl-faint { opacity: 0.4; }
.cl-center { justify-content: center; }

.cl-shadow canvas,
canvas.cl-shadow {
  filter: var(--cl-sil);
  opacity: var(--cl-sil-alpha);
}

.cl-body.cl-in {
  animation: cl-in var(--t-med) var(--ease);
}

.cl-hero .bar,
.cl-set > .bar,
.cl-prog > .bar,
.cl-lvhero .grow > .bar,
.cl-slot > .bar,
.row .grow > .bar {
  flex: none;
}

.cl-hero {
  background: linear-gradient(135deg, var(--accent-soft), var(--surface-2) 70%);
  display: flex;
  flex-direction: column;
  gap: var(--gap-m);
  margin-bottom: var(--gap-m);
}

.cl-hero-top {
  display: flex;
  align-items: center;
  gap: var(--gap-m);
}

.cl-hero-top .grow {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}

.cl-hero-top b {
  font-family: var(--font-display);
  font-size: var(--fs-l);
  font-weight: var(--fw-dx);
  line-height: var(--lh-tight);
}

.cl-hero-art {
  flex: none;
  width: var(--cl-hero-art);
  height: var(--cl-hero-art);
  display: grid;
  place-items: center;
  border-radius: var(--r-l);
  background: var(--surface);
  box-shadow: var(--elev-1), inset 0 0 0 1px var(--line);
}

.cl-hero-top small {
  color: var(--ink-soft);
  font-size: var(--fs-s);
}

.cl-pct {
  font-size: var(--fs-xl);
  color: var(--accent-ink);
}

.cl-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--cl-link-min), 1fr));
  gap: var(--gap-s);
}

.cl-link {
  position: relative;
  min-height: var(--cl-link-h);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--gap-s) var(--gap-xs);
  border-radius: var(--r-m);
  background: var(--surface);
  box-shadow: var(--clay);
  font-size: var(--fs-xs);
  font-weight: var(--fw-x);
  text-align: center;
  line-height: 1.15;
  transition: transform var(--t-fast) var(--ease);
}

.cl-link:active,
.cl-cell:active,
.cl-treecard:active,
.cl-mat:active,
.cl-wslot:active,
.cl-dslot:active,
.cl-pick:active,
.cl-wgame:active,
.cl-achhead:active {
  transform: scale(var(--press));
}

.cl-link.warn {
  background: var(--danger-soft);
  box-shadow: inset 0 0 0 2px var(--danger);
}

.cl-link-alert {
  position: absolute;
  top: var(--sp-1);
  right: var(--sp-1);
  width: 24px;
  height: 24px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  background: var(--danger);
  color: var(--on-danger);
}

.cl-tabs {
  --tabs-pad: var(--pad-sheet);
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--surface);
  margin: 0 calc(var(--pad-sheet) * -1);
  padding: var(--gap-xs) var(--pad-sheet) var(--gap-s);
}

.cl-tabs .tab {
  min-height: var(--target);
  transition: background var(--t-fast), transform var(--t-fast) var(--ease);
}

.cl-tabs .tab:active {
  transform: scale(var(--press));
}

.cl-tabs .tab small {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  font-weight: var(--fw-b);
}

.cl-tabs .tab.on small {
  color: var(--on-accent);
}

.cl-tabs .tab .thumb {
  border-radius: var(--r-xs);
}

.cl-seg {
  margin: 0 0 var(--sp-3);
}

.cl-chips,
.cl-chips-row {
  display: flex;
  gap: var(--sp-2);
}

.cl-chips {
  position: relative;
  overflow-x: auto;
  touch-action: pan-x;
  scrollbar-width: none;
  padding: 2px 0 var(--gap-s);
}

.cl-chips-row {
  flex-wrap: wrap;
}

.cl-chip {
  flex: none;
  min-height: var(--cl-chip-min);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  padding: 0 var(--gap-m);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  font-size: var(--fs-s);
  font-weight: var(--fw-b);
}

.cl-chip small {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}

.cl-chip.on {
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color: var(--on-accent);
  box-shadow: var(--btn-shine);
}

.cl-chip.on small {
  color: var(--on-accent);
}

.cl-grid {
  grid-template-columns: repeat(auto-fill, minmax(var(--cl-cell-min), 1fr));
  gap: var(--gap-s);
}

.cl-grid.cl-pickgrid {
  grid-template-columns: repeat(auto-fill, minmax(var(--cl-pick-min), 1fr));
}

.cl-grid.cl-wide {
  grid-template-columns: repeat(auto-fill, minmax(var(--cl-wide-min), 1fr));
}

.cl-cell {
  min-width: 0;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease);
}

.cl-cell .name {
  width: 100%;
  justify-content: center;
}

.cl-cell .cl-art {
  position: relative;
  width: 100%;
  min-height: var(--cl-art-h);
  display: grid;
  place-items: center;
  border-radius: var(--r-s);
  isolation: isolate;
}

.cl-cell .cl-art::before,
.cl-stage::before {
  content: '';
  position: absolute;
  inset: 8%;
  border-radius: var(--r-pill);
  background: radial-gradient(closest-side, var(--tc, var(--surface-3)), transparent);
  opacity: var(--cl-tint-alpha);
  z-index: -1;
}

.cl-cell.locked {
  opacity: 1;
}

.cl-cell.locked .cl-art > canvas,
.cl-cell.locked .cl-art > .cl-swatch {
  filter: var(--cl-locked);
  opacity: var(--cl-locked-alpha);
}

.cl-cell.locked .cl-art.cl-shadow > canvas {
  filter: var(--cl-sil);
  opacity: var(--cl-sil-alpha);
}

.cl-cell.locked .name {
  color: var(--ink-soft);
}

.cl-cell.on {
  border-color: var(--accent);
  box-shadow: var(--cl-glow-accent);
}

.cl-cell .tier {
  z-index: 1;
}

.cl-breedchip {
  gap: var(--sp-2);
  padding: 0 var(--sp-2) 0 var(--sp-1);
  color: var(--ink);
}

.cl-breedchip .i {
  color: var(--ink-soft);
}

.cl-foot {
  min-height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
}

.cl-foot .price {
  font-size: var(--fs-s);
}

.cl-lv {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-b);
  color: var(--ink-soft);
}

.cl-have {
  width: 24px;
  height: 24px;
  border-radius: var(--r-pill);
  display: inline-grid;
  place-items: center;
  background: var(--good-soft);
  color: var(--good-ink);
}

.cl-cell .tier {
  top: var(--sp-2);
  left: var(--sp-2);
}

.cl-on-mark {
  position: absolute;
  top: var(--sp-1);
  right: var(--sp-1);
  width: 24px;
  height: 24px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 0 0 2px var(--surface);
  z-index: 1;
}

.cl-tierhead {
  margin-top: var(--gap-l);
}

.cl-tierhead small {
  margin-left: auto;
  color: var(--ink-soft);
  font-size: var(--fs-xs);
  font-weight: var(--fw-b);
}

.cl-tdot {
  width: var(--cl-dot);
  height: var(--cl-dot);
}

.cl-tdot.tier-common {
  border-radius: var(--r-pill);
}

.cl-set {
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
  border: 2px solid transparent;
}

.cl-set.done {
  border-color: var(--gold);
  box-shadow: var(--clay), var(--cl-glow-gold);
}

.cl-set-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-s);
}

.cl-set-head h3 {
  font-size: var(--fs-l);
}

.cl-set-head small {
  color: var(--ink-soft);
  font-weight: var(--fw-x);
}

.cl-set-items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.cl-mini {
  position: relative;
  width: var(--cl-mini);
  height: var(--cl-mini);
  border-radius: var(--r-m);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: transform var(--t-fast) var(--ease-spring);
}

.cl-mini:active {
  transform: scale(var(--press));
}

.cl-mini.have {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.cl-mini.missing canvas,
.cl-mini.missing .cl-swatch {
  filter: var(--cl-locked);
  opacity: 0.45;
}

.cl-tick {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
}

.cl-set-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-s);
}

.cl-rws {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-xs);
}

.reward.cl-rw {
  padding: 2px var(--gap-s) 2px 2px;
  background: var(--surface);
  font-size: var(--fs-s);
  gap: 2px;
}

.reward.cl-rwi {
  padding: 1px;
}

.cl-bonus {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  font-size: var(--fs-s);
  color: var(--ink-soft);
  font-weight: var(--fw-b);
}

.cl-bonus.on {
  color: var(--good-ink);
}

.cl-detail {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-s);
  text-align: center;
}

.cl-detail h3,
.cl-dtitle {
  font-family: var(--font-display);
  font-weight: var(--fw-dx);
  font-size: var(--fs-xl);
  line-height: var(--lh-tight);
}

.cl-x {
  position: absolute;
  top: calc(var(--gap-l) * -1 + var(--gap-xs));
  right: calc(var(--gap-s) * -1);
  z-index: 2;
}

.cl-stage {
  position: relative;
  width: var(--cl-stage);
  height: var(--cl-stage);
  display: grid;
  place-items: center;
  isolation: isolate;
}

.cl-stage::before {
  inset: 0;
  opacity: calc(var(--cl-tint-alpha) * 2);
}

.t-epic .cl-stage::after,
.t-legendary .cl-stage::after {
  content: '';
  position: absolute;
  inset: -6%;
  border-radius: var(--r-pill);
  background: repeating-conic-gradient(from 0deg, var(--tc) 0deg 6deg, transparent 6deg 24deg);
  -webkit-mask: radial-gradient(closest-side, transparent 45%, #000 60%, transparent 100%);
  mask: radial-gradient(closest-side, transparent 45%, #000 60%, transparent 100%);
  opacity: var(--cl-tint-alpha);
  z-index: -1;
  animation: spin 18s linear infinite;
}

.cl-tier {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 3px var(--sp-3) 3px var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--tc, var(--line-strong));
  font-size: var(--fs-xs);
  font-weight: var(--fw-x);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
}

.cl-tier .tier {
  position: static;
  flex: none;
}

.cl-how {
  display: flex;
  align-items: center;
  gap: var(--gap-s);
  padding: var(--gap-s) var(--gap-m);
  border-radius: var(--r-m);
  background: var(--surface-2);
  font-size: var(--fs-s);
  font-weight: var(--fw-b);
  text-align: left;
}

.cl-how.have {
  color: var(--good-ink);
  background: var(--good-soft);
}

.cl-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-xs);
  margin-top: var(--gap-s);
}

.cl-actions .btn .price b {
  font-weight: var(--fw-x);
}

.cl-short {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--danger-ink);
  font-size: var(--fs-xs);
  font-weight: var(--fw-b);
}

.cl-prog {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  font-weight: var(--fw-b);
  color: var(--ink-soft);
}

.cl-attract {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  color: var(--ink-soft);
}

.cl-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-xs);
}

.cl-facts span {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  padding: 2px var(--gap-m) 2px var(--gap-xs);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  font-size: var(--fs-s);
}

.cl-likes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
}

.cl-like {
  position: relative;
  width: var(--cl-like-w);
  min-height: var(--target);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--gap-xs);
  border-radius: var(--r-m);
  background: var(--surface-2);
  border: 2px solid transparent;
  font-size: var(--fs-xs);
  line-height: 1.1;
}

.cl-like.have {
  border-color: var(--accent);
}

.cl-like-have {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--on-accent);
}

.cl-just {
  animation: cl-pop var(--t-slow) var(--ease-bounce);
}

.cl-burst {
  position: fixed;
  width: 0;
  height: 0;
  z-index: var(--cl-z-burst);
  pointer-events: none;
}

.cl-fly {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px var(--gap-m) 3px 3px;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--clay);
  font-weight: var(--fw-x);
  white-space: nowrap;
  opacity: 0;
  animation: cl-fly var(--cl-burst) var(--ease) forwards;
  animation-delay: calc(var(--i) * var(--cl-stagger));
}

.cl-ring {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--cl-ring-from);
  height: var(--cl-ring-from);
  border-radius: var(--r-pill);
  border: 3px solid var(--gold);
  transform: translate(-50%, -50%);
  animation: cl-ring var(--t-slow) var(--ease) forwards;
}

.cl-stagebox {
  position: relative;
  height: var(--cl-stage-h);
  border-radius: var(--r-l);
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 100%, var(--accent-soft), var(--surface-2) 70%);
  box-shadow: inset 0 -18px 30px var(--cl-shade-line);
}

.cl-stagebox canvas {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}

.cl-stagebox.bump canvas {
  animation: cl-bump var(--t-slow) var(--ease-bounce);
}

.cl-glow {
  position: absolute;
  left: 50%;
  bottom: 2%;
  width: 60%;
  height: 16%;
  transform: translateX(-50%);
  border-radius: var(--r-pill);
  background: radial-gradient(closest-side, var(--cl-glass-line), transparent);
}

.cl-namebar {
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
  margin: var(--gap-m) 0 var(--gap-s);
}

.cl-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
}

.cl-tags .tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
}

.cl-namebar .cl-tags {
  justify-content: flex-start;
}

.tag.cl-persona {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface-2);
  color: var(--ink);
  padding: 3px var(--gap-m) 3px var(--gap-xs);
  min-height: 28px;
}

.cl-stat .grow b {
  font-size: var(--fs-m);
}

.cl-stat-ic {
  flex: none;
  width: var(--cl-stat-ic);
  height: var(--cl-stat-ic);
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  background: var(--surface);
  box-shadow: var(--elev-1), inset 0 0 0 1px var(--line);
}

.cl-stat .bar {
  margin-top: var(--gap-xs);
  flex: none;
}

.cl-wslots {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  touch-action: pan-x;
  scrollbar-width: none;
  padding: 2px 2px var(--sp-1);
  margin: 0 -2px var(--sp-3);
}

.cl-wslots::-webkit-scrollbar {
  display: none;
}

.cl-wslot {
  flex: 1 0 var(--cl-slot-w);
  min-height: var(--cl-wslot-h);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--gap-xs) 0;
  border-radius: var(--r-m);
  background: var(--surface-2);
  border: 2px dashed var(--surface-3);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-x);
  min-width: 0;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast);
}

.cl-wslot small {
  max-width: 100%;
  padding: 0 var(--sp-1);
  text-align: center;
  line-height: var(--lh-tight);
}

.cl-wslot.full {
  border-style: solid;
  border-color: transparent;
  background: var(--surface);
  box-shadow: var(--clay);
}

.cl-wslot.on {
  border: 2px solid var(--accent);
  background: var(--accent-soft);
  box-shadow: var(--glow-accent);
}

.cl-none .cl-dash {
  color: var(--ink-soft);
}

.cl-grove-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--cl-grove-min), 1fr));
  gap: var(--sp-2);
}

.cl-treecard {
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--gap-s);
  text-align: center;
  border: 2px solid transparent;
  min-width: 0;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease);
}

.cl-treecard.on {
  border-color: var(--accent);
  box-shadow: var(--cl-glow-accent);
}

.cl-active {
  position: absolute;
  top: var(--gap-s);
  left: var(--gap-s);
  z-index: 1;
}

.cl-tree-art {
  width: 100%;
  display: grid;
  place-items: center;
  border-radius: var(--r-m);
  background: radial-gradient(90% 70% at 50% 100%, var(--accent-soft), transparent 70%);
}

.cl-tname {
  font-family: var(--font-display);
  font-size: var(--fs-m);
  font-weight: var(--fw-dx);
  max-width: 100%;
}

.cl-treecard small {
  font-size: var(--fs-xs);
  max-width: 100%;
}

.cl-hp {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  margin: var(--gap-xs) 0 2px;
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

.cl-hp .bar {
  height: 8px;
}

.cl-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px;
}

.cl-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: var(--cl-badge-pad);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-x);
  line-height: var(--lh-tight);
}

.cl-badge.good { background: var(--good-soft); color: var(--good-ink); box-shadow: none; }
.cl-badge.warn { background: var(--warn-soft); color: var(--warn-ink); box-shadow: none; }
.cl-badge.bad { background: var(--danger); color: var(--on-danger); box-shadow: none; }
.cl-badge.gold { background: var(--gold); color: var(--on-gold); box-shadow: none; }

.cl-slot {
  min-height: 236px;
  justify-content: center;
  gap: var(--gap-xs);
}

.cl-slot.free {
  background: transparent;
  border: 2px dashed var(--accent);
  box-shadow: none;
}

.cl-slot-ic {
  width: var(--target);
  height: var(--target);
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  background: var(--surface);
  color: var(--ink-soft);
  box-shadow: inset 0 0 0 1px var(--line);
  margin-bottom: var(--sp-1);
}

.cl-slot-ic.plus {
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color: var(--on-accent);
  box-shadow: var(--btn-shine), var(--elev-1);
}

.cl-slot.heir-slot {
  background: var(--warn-soft);
  border-color: var(--gold-2);
}

.heir-slot .cl-slot-ic.plus {
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
  color: var(--on-gold);
}

.cl-slot.locked {
  background: var(--surface-2);
  opacity: 0.9;
}

.cl-slot.locked .bar {
  width: 70%;
  flex: none;
}

.cl-howto {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-m);
  margin-bottom: var(--gap-m);
}

.cl-howto .grow {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}

.cl-howto small {
  color: var(--ink-soft);
  font-size: var(--fs-s);
}

.cl-cross {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-s);
  margin: var(--gap-s) 0;
}

.cl-slotab {
  width: var(--cl-slotab);
  height: var(--cl-slotab);
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border: 3px dashed var(--surface-3);
  font-size: var(--fs-xl);
  color: var(--ink-faint);
  transition: border-color var(--t-med), background var(--t-med);
}

.cl-slotab.set {
  border: 3px solid var(--accent);
  background: var(--accent-soft);
}

.cl-slotab.result {
  width: var(--cl-slotab-l);
  height: var(--cl-slotab-l);
}

.cl-slotab.result.set {
  border-color: var(--gold);
  box-shadow: var(--cl-glow-gold);
}

.cl-op {
  flex: none;
  display: inline-grid;
  place-items: center;
  color: var(--ink-soft);
}

.cl-cross-msg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  text-align: center;
  font-size: var(--fs-s);
  color: var(--ink-soft);
  font-weight: var(--fw-b);
  margin-bottom: var(--gap-s);
}

.cl-cross-msg.ok {
  color: var(--good-ink);
}

.cl-needs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-top: var(--sp-1);
}

.cl-need {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px var(--sp-2) 2px 3px;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: var(--fs-s);
  font-variant-numeric: tabular-nums;
}

.cl-need.short {
  box-shadow: inset 0 0 0 1px var(--danger-ink);
}

.cl-need-ok {
  color: var(--good-ink);
  margin-left: 2px;
}

.cl-need b {
  font-weight: var(--fw-x);
}

.cl-need.ok b { color: var(--good-ink); }
.cl-need.short b { color: var(--danger-ink); }

.cl-pick {
  width: 100%;
  color: var(--ink);
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: var(--gap-m);
  padding: var(--gap-s) var(--gap-m);
  border-radius: var(--r-m);
  background: var(--surface-2);
  border: 2px solid transparent;
  text-align: left;
  box-shadow: var(--clay);
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast);
}

.cl-pick .grow {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.cl-pick .grow small {
  color: var(--ink-soft);
  font-size: var(--fs-xs);
}

.cl-pick.on {
  border-color: var(--accent);
}

.cl-pick.off {
  opacity: 0.5;
  box-shadow: none;
}

.cl-pick-dot {
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 2px var(--line-strong);
}

.cl-pick small {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.cl-ab {
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: var(--fw-x);
}

.cl-recipes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--cl-rec-min), 1fr));
  gap: var(--sp-2);
}

.cl-rec {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--sp-1);
  border-radius: var(--r-m);
  background: var(--surface-2);
  color: var(--ink-soft);
  box-shadow: var(--clay);
  transition: transform var(--t-fast) var(--ease-spring);
}

.cl-rec:active {
  transform: scale(var(--press));
}

.cl-recipe-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-xs);
}

.cl-parent {
  width: var(--cl-parent-w);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-b);
  line-height: 1.1;
  text-align: center;
}

.cl-parent:not(.have) canvas {
  filter: var(--cl-locked);
  opacity: 0.6;
}

.cl-parent.cl-shadow canvas {
  filter: var(--cl-sil);
  opacity: var(--cl-sil-alpha);
}

.cl-result {
  padding: var(--gap-xs);
  border-radius: var(--r-m);
  background: var(--surface);
}

.cl-hybrid {
  border: 2px solid transparent;
}

.cl-hybrid.found {
  border-color: var(--gold);
}

.cl-hy-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-s);
  margin-top: var(--gap-s);
}

.cl-meter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-m);
  font-weight: var(--fw-b);
}

.cl-meter i {
  display: flex;
  gap: 4px;
}

.cl-meter > span {
  flex: 1;
}

.cl-meter b {
  width: 20px;
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--surface-sunk);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.cl-meter small {
  min-width: 2.5em;
  text-align: right;
  color: var(--ink-soft);
  font-size: var(--fs-xs);
}

.cl-meter.grow b.on { background: var(--accent); box-shadow: none; }
.cl-meter.water b.on { background: var(--need-water-2); box-shadow: none; }

.cl-traits {
  display: flex;
  flex-direction: column;
  gap: var(--gap-m);
}

.cl-trait {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px var(--sp-3) 4px var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-xs);
  font-weight: var(--fw-b);
}

.cl-trait.good { background: var(--good-soft); color: var(--good-ink); }
.cl-trait.warn { background: var(--warn-soft); color: var(--warn-ink); }

.cl-trait-line {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}

.cl-trait-line > small {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  color: var(--ink-soft);
  font-weight: var(--fw-b);
}

.cl-facts-card {
  margin-top: var(--gap-m);
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
  background: linear-gradient(135deg, var(--accent-soft), var(--surface-2) 80%);
}

.cl-eco {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-s);
}

.cl-eco i {
  color: var(--ink-soft);
}

.cl-perk {
  font-size: var(--fs-m);
  line-height: var(--lh);
}

.cl-full {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}

.cl-plant {
  gap: var(--gap-m);
}

.heir-art {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--heir-art);
  height: var(--heir-art);
  border-radius: var(--r-pill);
  background: radial-gradient(circle at 50% 45%, var(--gold-hi), var(--warn-soft) 70%);
  box-shadow: var(--cl-glow-gold);
}

.heir-seed {
  position: absolute;
  right: calc(var(--sp-1) * -1);
  bottom: calc(var(--sp-1) * -1);
  width: var(--heir-seed);
  height: var(--heir-seed);
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--elev-2);
}

.heir-traits {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--heir-trait-min), 1fr));
  gap: var(--sp-2);
}

.heir-trait {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  min-height: var(--target);
  padding: var(--sp-2);
  border-radius: var(--r-m);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
  text-align: center;
}

.heir-trait b {
  font-size: var(--fs-s);
}

.heir-trait small {
  font-size: var(--fs-2xs);
  color: var(--ink-soft);
  line-height: var(--lh-tight);
}

.heir-trait.on {
  background: var(--warn-soft);
  box-shadow: inset 0 0 0 2px var(--gold-2);
}

.heir-trait-ic {
  width: var(--heir-trait-ic);
  height: var(--heir-trait-ic);
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--gold-ink);
}

.cl-diorama {
  position: relative;
  height: var(--cl-diorama-h);
  border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: var(--clay);
  margin-bottom: var(--gap-s);
  background: var(--surface-3);
}

.cl-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cl-dtree {
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
}

.cl-dslot {
  --sz: var(--cl-dslot);
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: var(--sz);
  height: var(--sz);
  transform: translate(-50%, -50%);
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  background: var(--hud-glass);
  border: 2px dashed var(--cl-glass-line);
  color: var(--ink);
  font-size: var(--fs-l);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-med);
}

.cl-dslot.full {
  border-style: solid;
  border-color: transparent;
  background: transparent;
}

.cl-dslot.on {
  border: 3px solid var(--accent);
  box-shadow: var(--glow-accent);
  background: var(--hud-glass);
}

.cl-dslot.pick {
  animation: cl-pulse 1.4s var(--ease) infinite;
  border-color: var(--accent);
}

.cl-dslot.s0 { --x: 23; --y: 33; }
.cl-dslot.s1 { --x: 77; --y: 33; }
.cl-dslot.s2 { --x: 11; --y: 59; }
.cl-dslot.s3 { --x: 89; --y: 59; }
.cl-dslot.s4 { --x: 30; --y: 85; }
.cl-dslot.s5 { --x: 70; --y: 85; }

.cl-dhint {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-s);
  padding: var(--gap-xs) var(--gap-xs) var(--gap-xs) var(--gap-m);
  border-radius: var(--r-m);
  background: var(--surface-2);
  font-size: var(--fs-s);
}

.cl-dhint.pick {
  background: var(--accent-soft);
  padding-left: var(--gap-xs);
}

.cl-dhint-ic {
  flex: none;
  color: var(--accent-ink);
  display: grid;
}

.cl-dhint span:not(.cl-dhint-ic) {
  flex: 1;
}

.cl-dhint span {
  min-width: 0;
}

.section small {
  margin-left: auto;
  color: var(--ink-soft);
  font-size: var(--fs-xs);
}

.badge.cl-at {
  top: var(--gap-xs);
  right: var(--gap-xs);
  z-index: 1;
}

.cl-swatch {
  position: relative;
  display: block;
  width: var(--cl-swatch);
  height: var(--cl-swatch);
  border-radius: var(--r-m);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line);
}

.cl-swatch.small {
  width: var(--cl-swatch-small);
  height: var(--cl-swatch-small);
  border-radius: var(--r-xs);
}

.cl-swatch.big {
  width: var(--cl-swatch-big);
  height: var(--cl-swatch-big);
  border-radius: var(--r-l);
}

.cl-swatch i {
  position: absolute;
  display: block;
}

.cl-swatch .s-bg {
  inset: 0;
  background: linear-gradient(160deg, var(--bg), var(--surface-3));
}

.cl-swatch .s-card {
  left: 12%;
  right: 12%;
  top: 16%;
  bottom: 16%;
  border-radius: var(--r-s);
  background: var(--surface);
  box-shadow: var(--clay);
}

.cl-swatch .s-card b {
  position: absolute;
  left: 12%;
  top: 8%;
  color: var(--ink);
  font-weight: var(--fw-x);
  font-size: 0.8em;
}

.cl-swatch.big .s-card b {
  font-size: var(--fs-xl);
}

.cl-swatch .s-pill {
  left: 12%;
  right: 30%;
  bottom: 14%;
  height: 18%;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
}

.cl-swatch .s-dot {
  right: 10%;
  top: 10%;
  width: 22%;
  height: 22%;
  border-radius: var(--r-pill);
  background: var(--pop);
}

.cl-swatch.theme-fresh {
  --bg: #f6f1e7;
  --surface: #fffaf2;
  --surface-3: #e7dece;
  --accent: #2a8240;
  --accent-2: #1f6b33;
  --pop: #cf3369;
}

.cl-swatch:is(.theme-fresh, .theme-cottagecore, .theme-kawaii, .theme-y2k, .theme-vaporwave, .theme-goblincore) {
  --ink: #2a2521;
}

.cl-packets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-xs);
}

.cl-packet {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px var(--sp-2) 2px 2px;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: var(--fs-s);
}

.cl-beds {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--cl-bed-min), 1fr));
  gap: var(--sp-2);
}

.cl-bed {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  padding: 0 0 var(--gap-s);
  overflow: hidden;
  border: 2px solid transparent;
}

.cl-bed .cl-plot {
  display: block;
  width: 100%;
  height: var(--cl-plot-h);
  background: linear-gradient(180deg, transparent, var(--accent-soft));
}

.cl-bed-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-xs);
  padding: 0 var(--gap-s);
  text-align: center;
  font-size: var(--fs-s);
}

.cl-bed-info > small {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.cl-bed-info > small.cl-good {
  color: var(--good-ink);
}

.cl-bed-info [data-bar] {
  width: 100%;
  display: flex;
}

.cl-bed.st-ready {
  border-color: var(--gold);
  animation: cl-glow 2.4s var(--ease) infinite;
}

.cl-bed.st-locked .cl-bed-info > b {
  color: var(--ink-soft);
}

.cl-bedlock {
  position: absolute;
  left: 50%;
  top: calc(var(--cl-plot-h) * 0.45);
  transform: translate(-50%, -50%);
  width: var(--target);
  height: var(--target);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-soft);
  box-shadow: var(--clay);
  display: grid;
  place-items: center;
}

.cl-sowrow {
  width: 100%;
  text-align: left;
  transition: transform var(--t-fast) var(--ease);
}

.cl-sowrow:active {
  transform: scale(var(--press));
}

.cl-sowrow.off {
  opacity: 0.5;
}

.cl-sowrow .grow small {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.cl-mats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--cl-mat-min), 1fr));
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.cl-mat {
  position: relative;
  color: var(--ink);
  min-height: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: var(--gap-xs) 2px;
  border-radius: var(--r-m);
  background: var(--surface-2);
  box-shadow: var(--clay);
  border: 2px solid transparent;
  transition: transform var(--t-fast) var(--ease);
}

.cl-mat b {
  font-size: var(--fs-m);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.cl-mat small {
  font-size: var(--fs-2xs);
  color: var(--ink-soft);
}

.cl-mat.rare {
  border-color: var(--tier-epic);
}

.cl-rare-mark {
  position: absolute;
  top: var(--sp-1);
  right: var(--sp-1);
  width: 20px;
  height: 20px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  background: var(--tier-epic);
  color: var(--on-accent);
}

.cl-mat small {
  line-height: var(--lh-tight);
  text-align: center;
}

.cl-mat.zero canvas,
.cl-mat.zero b {
  opacity: 0.45;
}

.cl-recipe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-s) var(--gap-m);
  padding: var(--gap-s) var(--gap-m) var(--gap-s) var(--gap-s);
  border: 2px solid transparent;
}

.cl-recipe > .btn,
.cl-recipe > .tag {
  margin-left: auto;
}

.cl-recipe .grow {
  flex: 1 1 var(--row-text-min);
  min-width: 0;
}

.cl-recipe.can {
  border-color: var(--accent);
}

.cl-recipe.owned {
  opacity: 0.72;
}

.cl-recipe.cl-focus {
  box-shadow: var(--clay), var(--cl-glow-gold);
}

.cl-out {
  position: relative;
  flex: none;
  width: var(--cl-out);
  height: var(--cl-out);
  box-shadow: inset 0 0 0 1px var(--line);
  display: grid;
  place-items: center;
  border-radius: var(--r-m);
  background: var(--surface);
}

.cl-qty {
  position: absolute;
  right: 4px;
  bottom: 2px;
  font-size: var(--fs-s);
  font-weight: var(--fw-x);
}

.cl-dotn {
  min-width: 20px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--pop);
  color: var(--on-pop);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-x);
  opacity: 1;
}

.cl-tabs .tab .cl-dotn {
  color: var(--on-pop);
}

.cl-tabs .tab.on .cl-dotn {
  background: var(--surface);
  color: var(--accent-ink);
}

.cl-srcs {
  width: 100%;
}

.cl-srcs .row {
  width: 100%;
  text-align: left;
}

.cl-quest {
  padding: var(--gap-s) var(--gap-m) var(--gap-s) var(--gap-s);
  border: 2px solid transparent;
  transition: box-shadow var(--t-med) var(--ease);
}

.cl-quest {
  flex-wrap: wrap;
}

.cl-quest > .grow + * {
  margin-left: auto;
}

.cl-quest .grow {
  gap: var(--gap-xs);
  flex: 1 1 var(--row-text-min);
}

.cl-quest .grow > b {
  line-height: 1.2;
  text-wrap: pretty;
}

.cl-qic {
  flex: none;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--clay);
}

.cl-qbar {
  display: flex;
  align-items: center;
  gap: var(--gap-s);
}

.cl-qbar small {
  flex: none;
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

.cl-quest.ready {
  border-color: var(--gold);
  box-shadow: var(--clay), var(--cl-glow-gold);
}

.cl-quest.done {
  opacity: 0.6;
}

.cl-claim {
  animation: cl-wiggle 2.6s var(--ease) infinite;
}

.cl-reroll {
  flex: none;
  min-width: 56px;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  min-height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border-radius: var(--r-m);
  background: var(--surface);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-b);
  color: var(--ink-soft);
  transition: transform var(--t-fast) var(--ease);
}

.cl-reroll:active {
  transform: rotate(-20deg) scale(var(--press));
}

.cl-reroll[disabled] {
  opacity: 0.45;
}

.cl-reroll .price {
  font-size: var(--fs-2xs);
}

.cl-done {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--good-soft);
  color: var(--good-ink);
}

.cl-qhead {
  flex-wrap: wrap;
}

.cl-qhead > small.muted {
  margin-left: 0;
}

.cl-reset {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-b);
  color: var(--ink-soft);
}

.cl-bonusq {
  display: flex;
  align-items: center;
  gap: var(--gap-m);
  margin-bottom: var(--gap-s);
  background: linear-gradient(135deg, var(--gem), var(--gem-2));
  color: var(--on-gem);
}

.cl-bonusq .grow {
  display: flex;
  flex-direction: column;
}

.cl-bonusq small {
  color: var(--on-gem);
}

.cl-achg {
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
}

.cl-achg.all {
  border-color: var(--gold);
  background: linear-gradient(135deg, var(--surface-2), var(--surface) 60%);
}

.cl-achhead {
  width: 100%;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: var(--gap-m);
  padding: var(--gap-s) var(--gap-m) var(--gap-s) var(--gap-s);
  text-align: left;
  transition: transform var(--t-fast) var(--ease);
}

.cl-achhead .grow {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cl-achhead .grow > small {
  color: var(--ink-soft);
  font-size: var(--fs-s);
}

.cl-achic {
  position: relative;
  flex: none;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--clay);
}

.cl-achg.eco .cl-achic {
  background: var(--accent-soft);
}

.cl-achg.all .cl-achic {
  box-shadow: var(--clay), var(--cl-glow-gold);
}

.cl-eco-dot {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: grid;
  padding: 3px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 0 0 2px var(--surface);
}

.tag.cl-green {
  font-size: var(--fs-2xs);
  vertical-align: middle;
}

.cl-medals {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.cl-medals i {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-style: normal;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-x);
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-soft);
  box-shadow: inset 0 0 0 1px var(--line);
}

.cl-medals i.on {
  background: var(--gold);
  color: var(--on-gold);
  box-shadow: none;
}

.cl-achside {
  flex: none;
  max-width: 38%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-1);
}

.cl-achchev {
  color: var(--ink-soft);
}

.cl-achstate {
  flex: none;
  display: grid;
  color: var(--ink-soft);
}

.cl-achrow.done .cl-achstate {
  color: var(--good-ink);
}

.cl-achlist {
  padding: 0 var(--gap-m) var(--gap-s);
  animation: cl-in var(--t-med) var(--ease);
}

.cl-achrow {
  display: flex;
  align-items: center;
  gap: var(--gap-s);
  padding: var(--gap-s) 0;
  border-top: 1px solid var(--line);
  font-size: var(--fs-s);
}

.cl-achrow .grow {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.cl-achrow .grow small {
  color: var(--ink-soft);
  font-size: var(--fs-xs);
}

.cl-achrow.done b {
  color: var(--good-ink);
}

.cl-special {
  background: linear-gradient(135deg, var(--pop-soft), var(--surface-2) 70%);
}

.cl-lvhero {
  display: flex;
  align-items: center;
  gap: var(--gap-l);
  background: linear-gradient(135deg, var(--accent-soft), var(--surface-2) 70%);
}

.cl-lvhero .grow {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}

.cl-lvhero .grow small {
  font-size: var(--fs-s);
  font-variant-numeric: tabular-nums;
}

.cl-lvring {
  position: relative;
  flex: none;
  width: var(--cl-ring);
  height: var(--cl-ring);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cl-lvring svg {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}

.cl-lvring circle {
  fill: none;
  stroke-width: var(--cl-ring-stroke);
}

.cl-lvring .track { stroke: var(--surface-3); }
.cl-lvring .fill { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset var(--t-slow) var(--ease); }

.cl-lvring b {
  font-size: var(--fs-xxl);
  font-weight: var(--fw-x);
  line-height: 1;
}

.cl-lvring small {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  font-weight: var(--fw-b);
}

.cl-unls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-s);
}

.cl-unl {
  width: var(--cl-unl-w);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-b);
  line-height: 1.1;
  text-align: center;
}

.cl-road {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.cl-road::before {
  content: '';
  position: absolute;
  left: calc(var(--cl-node) / 2 - var(--cl-road-line) / 2);
  top: var(--gap-m);
  bottom: var(--gap-m);
  width: var(--cl-road-line);
  border-radius: var(--r-pill);
  background: var(--surface-3);
}

.cl-node {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--gap-m);
}

.cl-lvnum {
  position: relative;
  z-index: 1;
  flex: none;
  width: var(--cl-node);
  height: var(--cl-node);
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border: 3px solid var(--surface-3);
  font-size: var(--fs-s);
}

.cl-node.mid .cl-lvnum {
  border-color: var(--gem);
}

.cl-node.big .cl-lvnum {
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
  border-color: var(--gold);
  color: var(--on-gold);
  box-shadow: var(--cl-glow-gold);
}

.cl-node.here .cl-lvnum {
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  border-color: var(--accent);
  color: var(--on-accent);
}

.cl-nodebody {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
  padding: var(--gap-s);
  border-radius: var(--r-m);
  background: var(--surface-2);
}

.cl-node.big .cl-nodebody {
  box-shadow: inset 0 0 0 2px var(--gold);
}

.cl-node.here .cl-nodebody {
  background: transparent;
  justify-content: center;
  min-height: var(--cl-node);
}

.cl-node.here .cl-nodebody b {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--accent-ink);
}

.cl-mail {
  align-items: flex-start;
  flex-wrap: wrap;
}

.cl-mail .grow {
  gap: var(--gap-xs);
  flex: 1 1 var(--row-text-min);
}

.cl-mail > .btn {
  margin-left: auto;
}

.cl-mailic {
  flex: none;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--clay);
}

.cl-mail.gift .cl-mailic {
  background: var(--pop-soft);
}

.cl-mailtext {
  white-space: pre-line;
}

.cl-mail .btn {
  align-self: center;
  flex: none;
}

.cl-ago {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.cl-mail.gift {
  box-shadow: var(--clay), inset 0 0 0 2px var(--gold);
}

.cl-week {
  display: flex;
  align-items: center;
  gap: var(--gap-m);
  background: linear-gradient(135deg, var(--pop-soft), var(--accent-soft));
}

.cl-week .grow {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cl-weekart {
  flex: none;
  width: var(--cl-weekart);
  height: var(--cl-weekart);
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--clay);
}

.cl-weekname {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-dx);
  line-height: var(--lh-tight);
}

.cl-wgames {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-s);
}

.cl-wgame {
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  transition: transform var(--t-fast) var(--ease);
}

.cl-wgame small {
  color: var(--ink-soft);
}

.cl-wplay {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--accent-ink) !important;
  font-weight: var(--fw-x);
}

.cl-wgame.locked {
  background: var(--surface-sunk);
  box-shadow: inset 0 0 0 1px var(--line);
}

.cl-wgame.locked canvas.ic {
  filter: grayscale(0.85);
  opacity: 0.55;
}

.cl-wcard {
  padding: var(--gap-l) var(--gap-l) var(--gap-m);
}

.cl-wtrack {
  position: relative;
  display: flex;
  align-items: center;
  height: 24px;
}

.cl-wtrack .bar {
  height: 12px;
}

.cl-wpip {
  position: absolute;
  top: 50%;
  left: calc(var(--p) * 100%);
  width: var(--cl-pip);
  height: var(--cl-pip);
  transform: translate(-50%, -50%);
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 3px solid var(--line-strong);
}

.cl-wpip.on {
  background: var(--gold);
  border-color: var(--gold-2);
  color: var(--on-gold);
}

.cl-wprize {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-s);
  margin-top: var(--gap-m);
  font-weight: var(--fw-b);
  color: var(--ink-soft);
}

.cl-wstep {
  padding: var(--gap-s) var(--gap-m) var(--gap-s) var(--gap-s);
  border: 2px solid transparent;
}

.cl-wneed {
  flex: none;
  min-width: var(--cl-wneed);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.cl-wneed b {
  font-size: var(--fs-l);
}

.cl-wneed small {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}

.cl-wstep.ready {
  border-color: var(--gold);
  box-shadow: var(--clay), var(--cl-glow-gold);
}

.cl-wstep.done {
  opacity: 0.6;
}

.cl-wstep.final {
  background: linear-gradient(135deg, var(--surface-2), var(--pop-soft));
}

.cl-wrw {
  flex: 1;
  min-width: 0;
}

.cl-wstep > small {
  flex: none;
  font-variant-numeric: tabular-nums;
}

@keyframes cl-in {
  from { opacity: 0; transform: translateY(10px); }
}

@keyframes cl-pop {
  0% { transform: scale(0.92); }
  50% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

@keyframes cl-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.05, 0.95); }
  70% { transform: scale(0.98, 1.03); }
  100% { transform: scale(1); }
}

@keyframes cl-fly {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  18% { opacity: 1; transform: translate(calc(-50% + (var(--i) - (var(--n) - 1) / 2) * var(--cl-fly-spread)), calc(-50% - var(--cl-fly-rise))) scale(1.1); }
  70% { opacity: 1; transform: translate(calc(-50% + (var(--i) - (var(--n) - 1) / 2) * var(--cl-fly-spread)), calc(-50% - var(--cl-fly-up) * 0.8)) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + (var(--i) - (var(--n) - 1) / 2) * var(--cl-fly-spread)), calc(-50% - var(--cl-fly-up))) scale(0.9); }
}

@keyframes cl-ring {
  from { opacity: 1; transform: translate(-50%, -50%) scale(0.3); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(var(--cl-ring-scale)); }
}

@keyframes cl-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent); }
  50% { box-shadow: 0 0 0 6px transparent; }
}

@keyframes cl-glow {
  0%, 100% { box-shadow: var(--clay); }
  50% { box-shadow: var(--clay), var(--cl-glow-gold); }
}

@keyframes cl-wiggle {
  0%, 84%, 100% { transform: rotate(0); }
  88% { transform: rotate(-4deg); }
  92% { transform: rotate(4deg); }
  96% { transform: rotate(-2deg); }
}

.reduce-motion .cl-fly {
  animation-duration: 1.2s !important;
  animation-name: cl-fade;
}

@keyframes cl-fade {
  0% { opacity: 0; transform: translate(calc(-50% + (var(--i) - (var(--n) - 1) / 2) * var(--cl-fly-spread)), calc(-50% - var(--cl-fly-rise))); }
  15%, 80% { opacity: 1; transform: translate(calc(-50% + (var(--i) - (var(--n) - 1) / 2) * var(--cl-fly-spread)), calc(-50% - var(--cl-fly-rise))); }
  100% { opacity: 0; transform: translate(calc(-50% + (var(--i) - (var(--n) - 1) / 2) * var(--cl-fly-spread)), calc(-50% - var(--cl-fly-rise))); }
}

.cl-link span,
.cl-mat small,
.cl-wslot small,
.cl-unl small,
.cl-like small {
}

.text-l .cl-links {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.text-l .cl-mats {
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--cl-mat-min) * 1.7), 1fr));
}

.text-l .cl-wslot {
  flex-basis: calc(var(--cl-slot-w) * 1.7);
}

.text-l .cl-grid,
.text-l .cl-grid.cl-pickgrid,
.text-l .cl-grid.cl-wide {
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--cl-cell-min) * 1.45), 1fr));
}

.text-l .cl-grove-grid,
.text-l .cl-beds,
.text-l .cl-recipes,
.text-l .cl-wgames {
  grid-template-columns: minmax(0, 1fr);
}

.text-l .cl-unl,
.text-l .cl-like,
.text-l .cl-parent {
  width: calc(var(--cl-unl-w) * 1.5);
}

.text-l .cl-hero-top,
.text-l .cl-recipe,
.text-l .cl-wstep,
.text-l .cl-mail,
.text-l .cl-week,
.text-l .cl-lvhero,
.text-l .cl-achhead {
  flex-wrap: wrap;
}

.text-l .cl-achside {
  max-width: none;
  flex-direction: row;
  align-items: center;
}

.text-l .cl-recipe-row,
.text-l .cl-cross {
  flex-wrap: wrap;
}

.cl-hint {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-1);
  margin: var(--sp-2) 0 0;
  color: var(--ink-soft);
  font-size: var(--fs-s);
  font-style: italic;
}

.cl-hint .i {
  flex: none;
  color: var(--gold-ink);
}

.cl-rare-note {
  display: block;
  text-align: center;
}

.cl-reroll {
  padding: 0 var(--sp-2);
}

.cl-reroll small {
  white-space: nowrap;
}

.q-go {
  flex: none;
  color: var(--ink-soft);
}