:root {
  --cr2-mat-w: 3.25rem;
  --cr2-mat-h: 3.5rem;
  --cr2-out: 64px;
  --cr2-chip-w: 4.75rem;
  --cr2-pick-w: 3.5rem;
  --cr2-hchip-min: 9.5rem;
  --cr2-make-min: 2.75rem;
  --cr2-have-pad: 1px 5px;
  --cr2-rare-ring: rgba(170, 120, 255, 0.55);
  --cr2-part-tint: rgba(120, 90, 50, 0.08);
  --cr2-lock-op: 0.68;
  --cr2-owned-op: 0.72;
  --cr2-sep-h: 2rem;
  --cr2-party-ms: 3800;
  --cr2-party-stagger: 40ms;
  --cr2-bit-r: 2px;
  --cr2-party-dur: 2.6s;
  --cr2-party-size: 10px;
  --cr2-lantern-w: 16px;
  --cr2-lantern-h: 22px;
  --cr2-party-rise: -70vh;
  --cr2-party-fall: 80vh;
  --cr2-party-spread: 42vw;
  --cr2-c0: #ff6fa5;
  --cr2-c1: #ffd34d;
  --cr2-c2: #5fc8ff;
  --cr2-c3: #7ddc7a;
  --cr2-c4: #b98bff;
  --cr2-glow: rgba(255, 200, 90, 0.65);
  --cr2-lantern: #ff9a3c;
  --cr2-lantern-hi: #ffe08a;
  --cr2-mood-fill: var(--gold);
  --g-help-size: 44px;
}

.lc {
  --cr2-mat-w: 3.75rem;
  --cr2-mat-h: 4rem;
  --cr2-out: 72px;
  --cr2-pick-w: 4rem;
  --cr2-make-min: var(--target);
  --g-help-size: var(--target);
}

.dark,
.is-dark {
  --cr2-part-tint: rgba(255, 220, 170, 0.08);
  --cr2-rare-ring: rgba(190, 150, 255, 0.6);
  --cr2-glow: rgba(255, 210, 120, 0.55);
}

.cr2-strip {
  display: flex;
  gap: var(--target-gap);
  overflow-x: auto;
  touch-action: pan-x;
  scrollbar-width: none;
  margin: 0 calc(var(--pad-sheet) * -1) var(--sp-2);
  padding: var(--sp-1) var(--pad-sheet);
}

.cr2-strip::-webkit-scrollbar {
  display: none;
}

.cr2-mat {
  flex: none;
  width: var(--cr2-mat-w);
  min-height: var(--cr2-mat-h);
  display: grid;
  place-items: center;
  gap: 0;
  padding: var(--sp-1) 0;
  border-radius: var(--r-m);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
  font-size: var(--fs-xs);
}

.cr2-mat b {
  font-weight: var(--fw-x);
  line-height: 1;
}

.cr2-mat.part {
  background: linear-gradient(var(--cr2-part-tint), var(--cr2-part-tint)), var(--surface-2);
}

.cr2-mat.rare {
  box-shadow: inset 0 0 0 2px var(--cr2-rare-ring);
}

.cr2-mat.zero {
  opacity: var(--cr2-lock-op);
}

.cr2-sep {
  flex: none;
  align-self: center;
  width: 1px;
  height: var(--cr2-sep-h);
  background: var(--line);
}

.cr2-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-1);
}

.cr2-tools .btn {
  flex: 1 1 auto;
  min-width: min-content;
  padding: 0 var(--sp-2);
  justify-content: center;
  gap: var(--target-gap);
  white-space: normal;
  text-align: center;
  line-height: var(--lh-tight);
}

.cr2-tools .btn b,
.cr2-tools .btn small {
  font-weight: var(--fw-x);
  opacity: 0.8;
}

.cr2-sub {
  display: flex;
  gap: var(--target-gap);
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: var(--sp-2);
}

.cr2-subtab {
  flex: none;
  min-height: var(--target);
  display: inline-flex;
  align-items: center;
  gap: var(--target-gap);
  padding: 0 var(--sp-3);
  border-radius: var(--r-pill);
  color: var(--ink-soft);
  font-weight: var(--fw-b);
  font-size: var(--fs-xs);
}

.cr2-subtab.on {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.cr2-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  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;
  transition: box-shadow var(--t-fast) var(--ease);
}

.cr2-card.can {
  border-color: var(--accent);
}

.cr2-card.locked .cr2-out,
.cr2-card.locked .cr2-info {
  opacity: var(--cr2-lock-op);
}

.cr2-card.owned {
  opacity: var(--cr2-owned-op);
}

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

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

.cr2-have {
  position: absolute;
  top: 0;
  right: 0;
  padding: var(--cr2-have-pad);
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-x);
}

.cr2-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cr2-info small {
  color: var(--ink-soft);
  line-height: var(--lh-tight);
}

.cr2-right {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
}

.cr2-make {
  display: flex;
  gap: var(--target-gap);
}

.cr2-make .btn {
  min-width: var(--cr2-make-min);
  gap: 2px;
}

.cr2-lock {
  display: inline-flex;
  align-items: center;
  gap: var(--target-gap);
  color: var(--ink-soft);
  font-size: var(--fs-xs);
  font-weight: var(--fw-b);
}

.cl-need.part {
  background: linear-gradient(var(--cr2-part-tint), var(--cr2-part-tint)), var(--surface);
}

.cr2-item {
  align-items: center;
  flex-wrap: wrap;
}

.cr2-item .grow {
  flex: 1 1 var(--row-text-min);
}

.cr2-ic {
  position: relative;
  flex: none;
}

.cr2-ic .badge {
  position: absolute;
  top: -4px;
  right: -6px;
}

.cr2-acts {
  flex: none;
  margin-left: auto;
  display: flex;
  gap: var(--target-gap);
}

.cr2-auto {
  color: var(--ink-soft);
  font-weight: var(--fw-b);
}

.cr2-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.cr2-chip {
  width: var(--cr2-chip-w);
  min-height: var(--target);
  display: grid;
  place-items: center;
  gap: 0;
  padding: var(--sp-1);
  border-radius: var(--r-m);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
  text-align: center;
}

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

.cr2-chip.ghost {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line), inset 0 0 0 2px transparent;
}

.cr2-chip:disabled {
  opacity: var(--cr2-lock-op);
}

.cr2-fine {
  display: flex;
  align-items: flex-start;
  gap: var(--target-gap);
  margin: var(--sp-2) 0;
  color: var(--ink-soft);
  font-size: var(--fs-xs);
  line-height: var(--lh-tight);
}

.cr2-swaphead,
.cr2-box {
  display: flex;
  align-items: center;
  gap: var(--gap-m);
}

.cr2-swaphead .grow,
.cr2-box .grow {
  display: flex;
  flex-direction: column;
}

.cr2-left {
  color: var(--accent-ink);
  font-weight: var(--fw-b);
}

.cr2-pick {
  display: flex;
  flex-wrap: wrap;
  gap: var(--target-gap);
}

.cr2-pm {
  width: var(--cr2-pick-w);
  min-height: var(--target);
  display: grid;
  place-items: center;
  padding: var(--sp-1) 0;
  border-radius: var(--r-m);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
  font-size: var(--fs-xs);
}

.cr2-pm.on {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.cr2-pm.rare {
  box-shadow: inset 0 0 0 2px var(--cr2-rare-ring);
}

.cr2-pm.rare.on {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.cr2-pm:disabled {
  opacity: var(--cr2-lock-op);
}

.cr2-deal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-l);
  margin: var(--gap-m) 0;
}

.cr2-side {
  display: grid;
  place-items: center;
  gap: 2px;
}

.cr2-side small {
  color: var(--ink-soft);
}

.cr2-hrow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.cr2-hchip {
  flex: 1 1 var(--cr2-hchip-min);
  min-height: var(--target);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) 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: left;
}

.cr2-hchip span {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

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

.cr2-hchip.on {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.cr2-hchip.none {
  opacity: var(--cr2-owned-op);
}

.cr2-prow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin: var(--sp-2) 0 0;
}

.cr2-prow .btn {
  gap: var(--target-gap);
}

.cr2-unranked {
  gap: var(--target-gap);
}

.g-helpers {
  grid-column: 1 / -1;
  justify-self: end;
  display: flex;
  gap: var(--target-gap);
}

.g-help {
  position: relative;
  width: var(--g-help-size);
  height: var(--g-help-size);
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--hud-glass);
  color: var(--ink);
}

.g-help b {
  position: absolute;
  right: -2px;
  bottom: -2px;
  padding: var(--cr2-have-pad);
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-x);
  line-height: 1.2;
}

.cr2-lures {
  display: flex;
  flex-direction: column;
  gap: var(--target-gap);
  margin: var(--sp-2) 0;
}

.cr2-lure {
  align-items: center;
}

.cr2-mood {
  display: flex;
  align-items: center;
  gap: var(--gap-m);
  margin-bottom: var(--sp-2);
}

.cr2-mood-l {
  display: flex;
  flex-direction: column;
  flex: none;
}

.cr2-mood-l b {
  display: inline-flex;
  align-items: center;
  gap: var(--target-gap);
}

.cr2-mood-l small {
  color: var(--ink-soft);
}

.cr2-moodbar {
  flex: 1;
}

.cr2-moodbar i {
  background: var(--cr2-mood-fill);
}

.cr2-bedrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--target-gap);
}

.cr2-fert {
  gap: 2px;
}

.cr2-party {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  overflow: hidden;
}

.cr2-party i {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: var(--cr2-party-size);
  height: var(--cr2-party-size);
  border-radius: var(--cr2-bit-r);
  opacity: 0;
  animation: var(--cr2-party-dur) var(--ease) calc(var(--i) * var(--cr2-party-stagger)) both;
}

.cr2-party i:nth-child(5n + 1) { background: var(--cr2-c0); }
.cr2-party i:nth-child(5n + 2) { background: var(--cr2-c1); }
.cr2-party i:nth-child(5n + 3) { background: var(--cr2-c2); }
.cr2-party i:nth-child(5n + 4) { background: var(--cr2-c3); }
.cr2-party i:nth-child(5n + 5) { background: var(--cr2-c4); }

.cr2-party.is-confetti i {
  top: -5%;
  animation-name: cr2-fall;
}

.cr2-party.is-fireworks i {
  left: 50%;
  top: 38%;
  border-radius: 50%;
  box-shadow: 0 0 var(--cr2-party-size) var(--cr2-glow);
  animation-name: cr2-burst;
}

.cr2-party.is-lanterns i {
  top: 100%;
  width: var(--cr2-lantern-w);
  height: var(--cr2-lantern-h);
  border-radius: 40% 40% 30% 30%;
  background: linear-gradient(var(--cr2-lantern-hi), var(--cr2-lantern));
  box-shadow: 0 0 calc(var(--cr2-party-size) * 2) var(--cr2-glow);
  animation-name: cr2-rise;
}

@keyframes cr2-fall {
  0% { opacity: 1; transform: translateY(0) rotate(0); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateY(var(--cr2-party-fall)) rotate(540deg); }
}

@keyframes cr2-burst {
  0% { opacity: 1; transform: translate(0, 0) scale(0.4); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc((var(--x) - 50) / 50 * var(--cr2-party-spread)), calc((var(--y) - 50) / 50 * var(--cr2-party-spread))) scale(1); }
}

@keyframes cr2-rise {
  0% { opacity: 0; transform: translateY(0); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translateY(var(--cr2-party-rise)); }
}

:root.reduce-motion .cr2-party i {
  animation: none;
  opacity: 1;
}

:root.reduce-motion .cr2-party.is-confetti i,
:root.reduce-motion .cr2-party.is-lanterns i {
  top: calc(var(--y) * 1%);
}

:root.reduce-motion .cr2-party.is-fireworks i {
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
}