.shinies { max-width: 48rem; margin-inline: auto; }
.shinies h1 { margin-block: 0.75rem 0.25rem; }
.shinies__note { color: var(--ink-soft); font-size: var(--step--1); }

.shinies__mine {
  background: var(--paper);
  border: 2px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.9rem clamp(0.9rem, 3vw, 1.4rem) 1rem;
  margin-block: 1.25rem 0;
}
.shinies__mine h2 { margin: 0 0 0.6rem; }
.shinies__none { margin: 0; color: var(--ink-soft); }
.shinies__got { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
.got { display: flex; align-items: center; gap: 0.35rem; font-family: var(--font-display); font-weight: 500; }
.got .shiny__medal { width: 26px; height: 31px; }
.shinies__all { margin-block: 2rem 0; }

.shinies__group h2 { margin-block: 1.25rem 0.5rem; font-size: var(--step-1); }
.shinies__card {
  background: var(--paper);
  border: 2px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.9rem clamp(0.9rem, 3vw, 1.4rem) 1rem;
  margin-block-end: 1rem;
}
.shinies__card:nth-of-type(odd) { rotate: -0.3deg; }
.shinies__card:nth-of-type(even) { rotate: 0.3deg; }
.shinies__card h3 { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.6rem; }

.shinies__row { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.shiny { display: flex; gap: 0.6rem; align-items: flex-start; }
.shiny p { margin: 0; }
.shiny__title { font-family: var(--font-display); font-weight: 500; line-height: 1.2; }
.shiny__tier { text-transform: capitalize; color: var(--ink-soft); font-size: var(--step--1); display: block; }
.shiny__how { font-size: var(--step--1); color: var(--ink-soft); }
.shiny__when { font-size: var(--step--1); font-weight: 700; }
.shiny__medal { flex: none; }

/* Metal colours are fills only; the words beside them carry the meaning. */
.shiny--bronze { --metal: #d99a6c; --ribbon: #f3b8c8; }
.shiny--silver { --metal: #c9cedb; --ribbon: #b9d8f0; }
.shiny--gold { --metal: #f2cf5b; --ribbon: #c7b5ef; }
.shiny__ribbon { fill: var(--ribbon); stroke: #4a2545; stroke-width: 1.5; stroke-linejoin: round; }
.shiny__disc { fill: var(--metal); stroke: #4a2545; stroke-width: 2; }
.shiny__star { fill: #fff8; stroke: #4a2545; stroke-width: 1.2; stroke-linejoin: round; }

/* Not won yet: a faint outline. */
.shiny:not(.is-won) .shiny__medal { opacity: 0.35; filter: grayscale(1); }
.shiny:not(.is-won) .shiny__title { color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
  .shinies__card { rotate: none !important; }
}
.shinies__set { margin: 0.9rem 0 0.4rem; font-size: var(--step-0); color: var(--ink-soft); }
.shinies__card h3 + .shinies__set { margin-top: 0; }
.shiny__count { font-size: var(--step--1); color: var(--ink-soft); opacity: 0.8; }
.shiny__count:empty { display: none; }
.shiny.is-won .shiny__when { color: var(--ink); }