/* The medals: stage + shelf (choose one). Static fallback is .medal-list. */
.medals-block { margin-top: calc(var(--figure-gap) * 1.5); }
.medals-block > h3 { margin-bottom: 12px; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.medals-block > .medals-intro { max-width: 760px; font-size: 17px; line-height: 1.65; }
.medal-name { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(30px, 3vw, 40px); line-height: 1.05; letter-spacing: -.03em; }
.medal-name span { font-family: var(--reading); font-size: 14px; letter-spacing: 0; color: var(--muted); margin-left: 6px; }
.medal-credit { margin-top: 8px; font-size: 12px; color: var(--muted); }
.medal-src { margin-top: 14px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.medal-src a { color: var(--muted); text-decoration-color: var(--line); }

/* Static list (no JS) */
.medal-list { margin-top: 32px; border-top: 1px solid var(--line); }
.medal-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.medal-item img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: contain; background: var(--soft); }
.medal-item p { margin-top: 10px; font-size: 16px; line-height: 1.6; }
.is-interactive .medal-list { display: none; }

/* Stage */
.medal-stage, .medal-shelf { display: none; }
.is-interactive .medal-stage { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: center; margin-top: 36px;
  transition: opacity 420ms cubic-bezier(.32, .72, 0, 1), transform 620ms cubic-bezier(.32, .72, 0, 1); }
.medal-stage.is-waiting { opacity: 0; transform: translateY(28px); }
.medal-stage .medal-figure, .medal-stage .medal-text { transition: opacity 260ms cubic-bezier(.23, 1, .32, 1), transform 420ms cubic-bezier(.32, .72, 0, 1); }
.medal-stage.is-leaving .medal-figure { opacity: 0; transform: scale(.965); }
.medal-stage.is-leaving .medal-text { opacity: 0; transform: translateY(8px); }
.medal-stage.is-entering .medal-figure { opacity: 0; transform: scale(1.035); transition: none; }
.medal-stage.is-entering .medal-text { opacity: 0; transform: translateY(-8px); transition: none; }
.medal-frame { position: relative; overflow: hidden; background: var(--paper); aspect-ratio: 4 / 3.4; transform-style: preserve-3d;
  transition: transform 520ms cubic-bezier(.23, 1, .32, 1); }
.medal-frame.is-tilting { transition: transform 120ms cubic-bezier(.23, 1, .32, 1); }
.medal-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.medal-glare { position: absolute; inset: -40%; pointer-events: none; opacity: 0; background: radial-gradient(circle at center, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 45%);
  transform: translate(var(--gx, 0), var(--gy, 0)); transition: opacity 300ms cubic-bezier(.23, 1, .32, 1); mix-blend-mode: soft-light; }
.medal-frame.is-tilting .medal-glare { opacity: 1; }
.medal-text p:not(.medal-src) { margin-top: 14px; font-size: 17px; line-height: 1.65; max-width: 46ch; }
.medal-views { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 16px; }
.medal-views button { min-height: 44px; display: inline-flex; align-items: center; gap: 9px; font-size: 15px; color: var(--muted); }
.medal-views button::before { content: ''; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid #8d979c; transition: background var(--feedback), border-color var(--feedback); }
.medal-views button[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
.medal-views button[aria-pressed="true"]::before { background: var(--accent); border-color: var(--accent); }

/* Shelf: nine round thumbnails, selected ringed in coral */
.is-interactive .medal-shelf { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 12px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); }
.medal-pick { width: 100%; display: grid; justify-items: center; gap: 8px; padding: 4px 0; font-size: 13px; color: var(--muted); }
.medal-pick img { width: min(76px, 100%); aspect-ratio: 1; border-radius: 50%; object-fit: cover; background: var(--soft);
  box-shadow: 0 0 0 1px var(--line); transition: transform 320ms cubic-bezier(.32, .72, 0, 1), box-shadow 200ms cubic-bezier(.23, 1, .32, 1); }
.medal-pick:hover img { transform: translateY(-3px); }
.medal-pick[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
.medal-pick[aria-pressed="true"] img { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent); }
.medal-pick:focus-visible { outline: none; }
.medal-pick:focus-visible img { outline: 3px solid var(--accent); outline-offset: 4px; }

@media (max-width: 899px) {
  .is-interactive .medal-stage { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .medal-item { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  /* Nine picks scroll sideways on phones; snap keeps each whole. */
  .is-interactive .medal-shelf { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 24px 8px 8px; scroll-padding-inline: 8px; }
  .medal-shelf li { flex: 0 0 72px; scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) {
  .medal-stage, .medal-stage *, .medal-frame { transition: none !important; transform: none !important; }
}