.collection {
  --collection-ink: #1c3039;
  --collection-muted: #4c6469;
  --collection-line: #e7dbcd;
  --collection-paper: #fffdf8;
  --collection-teal: #096961;
  --collection-pink: #af1750;
  color: var(--collection-ink);
}

.collection h1,
.collection h2,
.collection h3,
.collection p { margin-block: 0; }
.collection h2 { line-height: 1.12; }
.collection h3 { line-height: 1.18; }

.collection-heading,
.collection-resultline,
.collection-details-header,
.collection-swap-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.collection .collection-heading { margin-bottom: .7rem; }

.collection-count {
  display: grid;
  flex-shrink: 0;
  gap: .22rem;
  justify-items: end;
  color: var(--collection-muted);
  text-align: right;
  font-size: .82rem;
}

.collection-count strong {
  color: var(--collection-teal);
  font-family: var(--display, "Barlow Condensed", sans-serif);
  font-size: clamp(1.55rem, 3vw, 2.2rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.collection-count strong span { color: var(--collection-muted); font-weight: 650; }

.collection-tabs {
  display: flex;
  border-bottom: 1px solid var(--collection-line);
  gap: clamp(.75rem, 3vw, 1.8rem);
  margin: .5rem 0 1rem;
}

.collection-tabs button {
  color: var(--collection-muted);
  padding: .75rem .16rem;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  font-size: .94rem;
  font-weight: 760;
  white-space: nowrap;
  cursor: pointer;
}

.collection-tabs button:hover,
.collection-tabs button[aria-pressed="true"] { color: var(--collection-pink); }
.collection-tabs button[aria-pressed="true"] { border-bottom-color: var(--collection-pink); }

.collection-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  padding: .35rem 0;
}

.collection-filter-box { margin-bottom: .75rem; }
.collection-filter-box summary,
.collection-inline-details summary {
  width: fit-content;
  padding: .45rem .08rem;
  color: var(--collection-teal);
  cursor: pointer;
  font-size: .84rem;
  font-weight: 780;
}

.collection-filters button {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: .4rem .72rem;
  color: #385159;
  background: var(--collection-paper);
  border: 1px solid #e1d4c7;
  border-radius: 18px;
  font-size: .78rem;
  font-weight: 750;
  cursor: pointer;
}

.collection-filters button:hover { background: #f4e9df; }
.collection-filters button[aria-pressed="true"] {
  color: #fff;
  border-color: var(--collection-teal);
  background: var(--collection-teal);
}

.collection-resultline { margin: 1.1rem 0 .8rem; }
.collection-resultline > span {
  color: var(--collection-muted);
  font-size: .83rem;
  font-weight: 730;
  text-align: right;
}

.collection-resultline h2 { font-size: clamp(1.2rem, 2.45vw, 1.8rem); }
.collection-resultline p {
  max-width: 45rem;
  margin-top: .35rem;
  color: var(--collection-muted);
  font-size: .88rem;
}

.collection-kind-shot { --kind-ink: #922547; --kind-background: #ffeaee; --kind-line: #e298af; }
.collection-kind-tempo { --kind-ink: #795204; --kind-background: #fff1be; --kind-line: #dfaf46; }
.collection-kind-ball { --kind-ink: #24598a; --kind-background: #e6f2ff; --kind-line: #9abce2; }
.collection-kind-perimeter { --kind-ink: #714892; --kind-background: #f5eafb; --kind-line: #c4a3db; }
.collection-kind-rim { --kind-ink: #934719; --kind-background: #ffecde; --kind-line: #e9a67a; }
.collection-kind-glass { --kind-ink: #096358; --kind-background: #e0f4ee; --kind-line: #81c7b5; }

.collection-grid,
.collection-featured,
.collection-mission-list,
.collection-hand-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .9rem;
}

.collection-card,
.collection-mission,
.collection-hand,
.collection-book,
.collection-details {
  min-width: 0;
  background: var(--collection-paper);
  border: 1px solid var(--collection-line);
  border-radius: 14px;
}

.collection-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.collection-card-art {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  min-height: 35px;
  padding: .4rem .85rem;
  color: var(--kind-ink);
  background: var(--kind-background);
}

.collection-card-art > span:first-child {
  font-size: .71rem;
  font-weight: 820;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.collection-card-art strong { flex: none; font-size: .78rem; font-weight: 820; }

.collection-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: .55rem;
  padding: .85rem;
}

.collection-card-body h3 { font-size: 1.06rem; }
.collection-impact {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .2rem .5rem;
}
.collection-impact strong {
  color: var(--kind-ink, var(--collection-teal));
  font-size: 1.34rem;
  font-variant-numeric: tabular-nums;
  font-weight: 850;
}
.collection-impact span { color: var(--collection-muted); font-size: .8rem; line-height: 1.3; }
.collection-impact abbr, .collection-stat-list abbr { text-decoration: none; }
.collection-effect-note {
  color: var(--collection-ink);
  font-size: .83rem;
  line-height: 1.4;
}

.collection-card footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem .75rem;
  margin-top: auto;
  padding-top: .58rem;
  border-top: 1px solid #efe5d9;
}

.collection-status {
  display: inline-block;
  justify-self: start;
  padding: .25rem .49rem;
  border-radius: 6px;
  font-size: .7rem;
  font-weight: 800;
  line-height: 1.15;
}

.collection-status.available { color: #0b5850; background: #e2f3ed; }
.collection-status.locked { color: #5f5451; background: #f2eae3; }

.collection-link {
  color: var(--collection-teal);
  border: 0;
  padding: .3rem 0;
  text-align: left;
  background: transparent;
  font-size: .8rem;
  font-weight: 780;
  cursor: pointer;
}

.collection-link:hover { text-decoration: underline; }
.collection-details {
  margin-bottom: 1.25rem;
  padding: 1.1rem;
  border: 1px solid var(--kind-line);
  background: var(--kind-background);
}

.collection-details h2 { margin-top: .12rem; overflow-wrap: anywhere; }
.collection-details-header .btn { flex-shrink: 0; }
.collection-detail-level {
  display: inline-block;
  margin-top: .36rem;
  color: var(--kind-ink);
  font-size: .82rem;
  font-weight: 820;
}

.collection-risk {
  color: var(--collection-muted);
  font-size: .83rem;
}

.collection-detail-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem;
  margin-top: .9rem;
}

.collection-detail-body > * {
  display: grid;
  align-content: start;
  gap: .5rem;
  padding: .9rem;
  border-radius: 9px;
  background: var(--collection-paper);
}

.collection-stat-list {
  display: grid;
  margin: .15rem 0 .55rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--collection-line);
}
.collection-stat-list > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  padding: .4rem 0;
  font-size: .87rem;
}
.collection-stat-list dd { flex: none; margin: 0; font-weight: 820; }
.collection-stat-list .positive { color: var(--collection-teal); }
.collection-stat-list .negative { color: var(--collection-pink); }
.collection-levels ol {
  display: grid;
  gap: .33rem;
  margin: .2rem 0 .3rem;
  padding: 0;
  list-style: none;
}
.collection-levels li {
  display: grid;
  grid-template-columns: minmax(6.5rem, .85fr) minmax(0, 1.4fr);
  align-items: center;
  gap: .4rem;
  padding: .55rem .65rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #f8f3eb;
}
.collection-levels li[aria-current] { border-color: var(--kind-line); background: var(--kind-background); }
.collection-levels li > div:first-child { display: grid; gap: .1rem; font-size: .85rem; }
.collection-levels li small { color: var(--collection-muted); font-size: .71rem; line-height: 1.3; }
.collection-levels .collection-impact strong { font-size: 1.02rem; }
.collection-levels .collection-impact span { font-size: .74rem; }
.collection-max-level { color: var(--collection-teal); font-size: .82rem; font-weight: 780; }
.collection-detail-mission {
  display: grid;
  gap: .45rem;
  max-width: 41rem;
  margin-top: .9rem;
  padding: .9rem;
  border-radius: 9px;
  background: var(--collection-paper);
}
.collection-detail-mission > p { color: var(--collection-muted); font-size: .88rem; }

.collection-mission-intro { margin: .1rem 0 .95rem; }
.collection-featured { margin-bottom: .95rem; }
.collection-mission-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.collection-disclosure {
  margin-top: 1rem;
  padding: 0 .95rem;
  border: 1px solid var(--collection-line);
  border-radius: 12px;
  background: var(--collection-paper);
}
.collection-disclosure summary {
  padding: .75rem 0;
  color: var(--collection-teal);
  font-weight: 800;
}
.collection-disclosure summary span {
  float: right;
  color: var(--collection-muted);
  font-weight: 650;
}
.collection-disclosure > div { padding-bottom: .95rem; }

.collection-mission {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: .55rem;
  padding: .9rem;
  border-top: 4px solid var(--kind-line);
}

.collection-mission:not(.compact) { background: var(--kind-background); }

.collection-mission-heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .25rem .6rem;
}

.collection-mission-heading > strong { line-height: 1.24; }
.collection-requirement { color: var(--collection-muted); font-size: .82rem; line-height: 1.45; }

.collection-meter {
  display: flex;
  align-items: center;
  gap: .72rem;
  margin: .14rem 0;
  color: var(--collection-ink);
  font-size: .73rem;
  font-variant-numeric: tabular-nums;
  font-weight: 780;
}

.collection-meter > span { flex: 0 0 auto; }
.collection-meter.complete > span { color: var(--collection-teal); }

.collection-meter progress {
  width: 100%;
  height: .48rem;
  appearance: none;
  border: 0;
  border-radius: 10px;
  background: #e9dfd6;
  color: var(--collection-teal);
  accent-color: var(--collection-teal);
}
.collection-meter progress::-webkit-progress-bar { border-radius: 10px; background: #e9dfd6; }
.collection-meter progress::-webkit-progress-value { border-radius: 10px; background: var(--collection-teal); }
.collection-meter progress::-moz-progress-bar { border-radius: 10px; background: var(--collection-teal); }

.collection-reward {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .68rem;
  min-width: 0;
  padding: .55rem .65rem;
  border-radius: 8px;
  background: var(--collection-paper);
}

.collection-mission.compact .collection-reward { background: #faf4ea; }

.collection-reward > div,
.collection-candidates > article > div {
  display: grid;
  gap: .16rem;
}

.collection-reward span { color: var(--collection-muted); font-size: .7rem; }
.collection-reward strong { font-size: .87rem; line-height: 1.2; }

.collection-playbook { display: grid; gap: .95rem; }
.collection-hand { padding: .85rem; }
.collection-hand > header { margin-bottom: .65rem; }
.collection-hand h2 { font-size: clamp(1.02rem, 2vw, 1.27rem); }
.collection-hand { background: #fcf5e6; }

.collection-hand-grid > article {
  display: grid;
  align-content: start;
  gap: .34rem;
  min-width: 0;
  padding: .8rem;
  border: 1px solid var(--kind-line);
  border-radius: 9px;
  background: var(--kind-background);
}

.collection-hand-grid strong { font-size: .98rem; line-height: 1.25; }
.collection-hand-grid span { color: var(--collection-muted); font-size: .78rem; }
.collection-book { margin-top: 0; }
.collection-book[open] { padding-bottom: .85rem; }
.collection-book-earn { margin-top: .55rem; }

.collection-book-list {
  display: grid;
  gap: .3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.collection-book-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .65rem;
  padding: .48rem .6rem;
  border: 1px solid #ede3d8;
  border-radius: 8px;
  background: #fdf8f0;
}

.collection-book-row.is-removing { background: #ffedf3; border-color: #da799a; }
.collection-book-dot { width: .68rem; height: .68rem; border-radius: 50%; background: var(--kind-line); }
.collection-book-copy { display: grid; gap: .12rem; }
.collection-book-link {
  justify-self: start;
  border: 0;
  padding: 0;
  text-align: left;
  background: transparent;
  font-size: .88rem;
  font-weight: 820;
}
.collection-book-link:hover { text-decoration: underline; }
.collection-book-copy span { color: var(--collection-muted); font-size: .73rem; }

.collection-book-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .37rem;
  align-items: center;
  justify-content: flex-end;
}

.collection-book-actions .btn,
.collection-swap .btn {
  min-width: auto;
  min-height: 36px;
  padding: .36rem .62rem;
  white-space: nowrap;
  font-size: .74rem;
}

.collection .collection-book-note { margin-block: .2rem .65rem; color: var(--collection-muted); font-size: .83rem; }

.collection-swap {
  grid-column: 1 / -1;
  padding: .65rem;
  border: 1px solid #d396a8;
  border-radius: 11px;
  background: #fff0f4;
}

.collection-candidates { display: grid; gap: .45rem; margin-top: .75rem; }

.collection-candidates > article {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .55rem .65rem;
  border: 1px solid var(--kind-line);
  border-radius: 8px;
  background: var(--kind-background);
}

.collection-candidates span { color: var(--kind-ink); font-size: .73rem; }

@media (max-width: 910px) {
  .collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .collection-featured { grid-template-columns: minmax(0, 1fr); }
  .collection-mission.compact { padding: .75rem; }
  .collection-hand-grid { gap: .4rem; }
  .collection-hand-grid > article { padding: .55rem; }
  .collection-hand-grid strong { font-size: .85rem; }
}
@media (max-width: 490px) {
  .collection-tabs { gap: .9rem; }
  .collection-grid,
  .collection-mission-list,
  .collection-detail-body,
  .collection-hand-grid { grid-template-columns: minmax(0, 1fr); }
  .collection-hand-grid > article { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
  .collection-hand-grid span { text-align: right; }
  .collection-book-row { grid-template-columns: auto minmax(0, 1fr); }
  .collection-book-actions { grid-column: 2; justify-content: flex-start; }
  .collection-details-header { align-items: flex-start; }
}