/* Medal cabinet: rarity tiers, cards, detail view and the motion that gives each edition its presence.
   Loaded last so medals have a single source of truth. */

/* ---------- Rarity tokens ---------- */
[data-tier=common]    { --tier: #b0703f; }
[data-tier=uncommon]  { --tier: #7f8c99; }
[data-tier=rare]      { --tier: #2f7ad6; }
[data-tier=epic]      { --tier: #8a4dd6; }
[data-tier=legendary] { --tier: #cf9516; }
[data-tier=mythic]    { --tier: #c04fd6; }
[data-tier] { --tier-soft: color-mix(in srgb, var(--tier) 14%, var(--bg-card)); --tier-line: color-mix(in srgb, var(--tier) 38%, var(--line)); --tier-ink: color-mix(in srgb, var(--tier) 72%, var(--ink)); }

.medal-tier-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border: 1px solid var(--tier-line); border-radius: 999px; background: var(--tier-soft); color: var(--tier-ink); font-size: 11px; font-weight: 650; letter-spacing: .02em; line-height: 1.4; white-space: nowrap; }
.medal-tier-chip svg { width: 11px; height: 11px; fill: var(--tier); }
.medal-tier-chip[data-tier=mythic] { border-color: transparent; background: linear-gradient(100deg, #ffd3f0, #d4f3ff 45%, #e6dbff 75%, #fff2c7) padding-box, linear-gradient(100deg, #ff6ec7, #38d4ea, #8a4dd6, #f5c542) border-box; border: 1px solid transparent; color: #4d1f78; }
.medal-tier-chip[data-tier=mythic] svg { fill: #b03adf; }
.medal-tier-chip[data-tier=legendary] { background: linear-gradient(100deg, color-mix(in srgb, #f5c542 22%, var(--bg-card)), color-mix(in srgb, #fff4c4 30%, var(--bg-card))); }

/* ---------- Artwork ---------- */
.medal-illustration { display: block; overflow: visible; }
.medal-v3 { overflow: visible; }
.medal-v3 :is(.mv-aura, .mv-rays, .mv-orbit) { transform-box: view-box; transform-origin: 80px 80px; }
.medal-v3 :is(.mv-spark, .mv-glint) { transform-box: fill-box; transform-origin: center; opacity: 0; }
.medal-v3 .mv-sheen { will-change: transform; }

@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion=off]) .medal-v3 .mv-sheen { animation: mv-sheen var(--mv-sheen, 9s) cubic-bezier(.45, 0, .25, 1) infinite; }
  :root:not([data-motion=off]) .medal-v3[data-tier=uncommon] { --mv-sheen: 8s; }
  :root:not([data-motion=off]) .medal-v3[data-tier=rare] { --mv-sheen: 7s; }
  :root:not([data-motion=off]) .medal-v3[data-tier=epic] { --mv-sheen: 6s; }
  :root:not([data-motion=off]) .medal-v3[data-tier=legendary] { --mv-sheen: 5s; }
  :root:not([data-motion=off]) .medal-v3[data-tier=mythic] { --mv-sheen: 4.2s; }
  :root:not([data-motion=off]) .medal-v3 .mv-aura { animation: mv-aura 4.8s ease-in-out infinite; }
  :root:not([data-motion=off]) .medal-v3 .mv-rays { animation: mv-spin 46s linear infinite; }
  :root:not([data-motion=off]) .medal-v3[data-tier=legendary] .mv-rays { animation-duration: 30s; }
  :root:not([data-motion=off]) .medal-v3[data-tier=mythic] .mv-rays { animation-duration: 20s; animation-direction: reverse; }
  :root:not([data-motion=off]) .medal-v3 .mv-glint { animation: mv-twinkle 3.6s ease-in-out infinite 1.2s; }
  :root:not([data-motion=off]) .medal-v3 .mv-spark { animation: mv-twinkle 2.8s ease-in-out infinite var(--d, 0s); }
  :root:not([data-motion=off]) .medal-v3 .mv-orbit { animation: mv-spin 9s linear infinite; }
  :root:not([data-motion=off]) .medal-v3[data-tier=mythic] .mv-frame { animation: mv-hue 9s linear infinite; }
  :root:not([data-motion=off]) .medal-v3:is([data-tier=epic], [data-tier=legendary], [data-tier=mythic]) .mv-emblem-art { animation: mv-breathe 5.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  :root:not([data-motion=off]) .medal-mini:not([data-tier=legendary]):not([data-tier=mythic]) .mv-sheen { animation: none; }
}
@keyframes mv-sheen { 0%, 58% { transform: translateX(0); } 86%, 100% { transform: translateX(250px); } }
@keyframes mv-aura { 0%, 100% { opacity: .5; transform: scale(.95); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes mv-spin { to { transform: rotate(360deg); } }
@keyframes mv-twinkle { 0%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); } 45% { opacity: 1; transform: scale(1) rotate(45deg); } 60% { opacity: .9; transform: scale(.9) rotate(60deg); } }
@keyframes mv-hue { to { filter: hue-rotate(360deg); } }
@keyframes mv-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.035; } }

/* Locked medals rest in pewter until hovered; offscreen medals pause. */
.medal-locked .medal-v3 { filter: grayscale(.9) contrast(.9) brightness(1.06); opacity: .58; transition: filter .35s, opacity .35s; }
.medal-locked .medal-v3 *, .medal-grid .medal-card:not([data-live]) .medal-v3 * { animation-play-state: paused !important; }
.medal-locked :is(.medal-art-button:hover, .medal-art-button:focus-visible) .medal-v3 { filter: none; opacity: 1; }
.medal-locked[data-live] :is(.medal-art-button:hover, .medal-art-button:focus-visible) .medal-v3 * { animation-play-state: running !important; }

/* ---------- Heading and pinned showcase ---------- */
.medal-catalog-heading { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: center; padding: 8px 0 22px; }
.medal-catalog-heading h2 { margin: 10px 0 12px; font: 400 clamp(30px, 3.4vw, 40px)/1.08 var(--studio-serif, Georgia, serif); letter-spacing: -.6px; color: var(--ink); }
.medal-catalog-heading h2 em { font-weight: 400; color: var(--accent-color); }
.medal-catalog-heading p { margin: 0; max-width: 46ch; font-size: 13px; line-height: 1.7; color: var(--muted); }
#medal-pin-showcase { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 16px; min-width: 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 20px; background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent-color) 8%, var(--bg-card)), var(--bg-card) 60%); overflow: hidden; }
#medal-pin-showcase > div { display: grid; gap: 6px; justify-items: start; min-width: 0; }
#medal-pin-showcase .eyebrow { margin: 0; font-size: 10px; letter-spacing: .14em; }
#medal-pin-showcase strong { display: block; margin: 0; font: 400 21px/1.2 var(--studio-serif, Georgia, serif); color: var(--ink); overflow-wrap: anywhere; }
#medal-pin-showcase p { margin: 0; font-size: 12px; color: var(--muted); }
.medal-showcase-art { display: grid; place-items: center; width: 104px; height: 118px; padding: 0; border: 0; background: none; cursor: pointer; }
.medal-showcase-art svg { width: 104px; height: 117px; }
.medal-pin-empty { display: grid; place-items: center; width: 84px; height: 84px; margin-inline: auto; border: 1px dashed var(--line); border-radius: 50%; color: var(--muted); }
.medal-pin-empty svg { width: 28px; height: 28px; fill: color-mix(in srgb, var(--accent-color) 35%, var(--line)); }
.medal-name-preview { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink); }

/* ---------- Summary and rarity ladder ---------- */
.medal-stat-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.5fr); margin: 0 0 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-card); }
.medal-stat-strip > div { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 14px 16px; border-inline-start: 1px solid var(--line); }
.medal-stat-strip > div:first-child { border-inline-start: 0; }
.medal-stat-strip strong { display: flex; align-items: baseline; gap: 2px; min-height: 30px; font: 400 26px/1.15 var(--studio-serif, Georgia, serif); color: var(--ink); }
.medal-stat-strip strong small { font-size: 14px; color: var(--muted); }
.medal-stat-strip strong.medal-rarest { align-items: center; }
.medal-stat-strip strong .medal-tier-chip { font-family: Inter, system-ui, sans-serif; font-size: 13px; padding: 4px 11px 4px 9px; }
.medal-stat-strip span { font-size: 11.5px; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }
.medal-stat-strip .medal-next > span { font-size: 10px; font-weight: 650; letter-spacing: .12em; }
.medal-stat-strip .medal-next > strong { font-size: 18px; min-height: 0; }
.medal-stat-strip .medal-next small { font-size: 11.5px; color: var(--muted); }
.medal-rarity-ladder { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 0 0 6px; }
.medal-rung { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-card); color: var(--ink); font: inherit; text-align: start; cursor: pointer; transition: border-color .18s, background-color .18s, transform .18s, box-shadow .18s; }
.medal-rung:hover { border-color: var(--tier-line); transform: translateY(-1px); }
.medal-rung[aria-pressed=true] { border-color: var(--tier); background: var(--tier-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tier) 18%, transparent); }
.medal-rung-gem { grid-row: 1 / 3; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--tier-soft); }
.medal-rung-gem svg { width: 15px; height: 15px; fill: var(--tier); }
.medal-rung[data-tier=mythic] .medal-rung-gem { background: conic-gradient(from 90deg, #ffd3f0, #d4f3ff, #e6dbff, #fff2c7, #ffd3f0); }
.medal-rung-label { font-size: 12px; font-weight: 650; color: var(--tier-ink); }
.medal-rung-count { font-size: 12px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.medal-rung-count small { font-weight: 400; color: var(--muted); }
.medal-rung-bar { grid-column: 1 / -1; height: 4px; margin-top: 6px; overflow: hidden; border-radius: 99px; background: color-mix(in srgb, var(--tier) 12%, var(--line)); }
.medal-rung-bar i { display: block; height: 100%; border-radius: inherit; background: var(--tier); }
.medal-rung[data-tier=mythic] .medal-rung-bar i { background: linear-gradient(90deg, #ff6ec7, #38d4ea, #8a4dd6); }
#medal-status { margin: 6px 0 0; font-size: 11.5px; color: var(--muted); }
#medal-status:empty { display: none; }

/* ---------- Toolbar ---------- */
.medal-catalog-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; padding: 14px 0 8px; }
.medal-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.medal-filters button { min-height: 34px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-card); color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: background-color .15s, border-color .15s; }
.medal-filters button:hover { border-color: color-mix(in srgb, var(--accent-color) 45%, var(--line)); }
.medal-toolbar-end { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.medal-sort select { min-height: 36px; padding: 6px 30px 6px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center; color: var(--ink); font: inherit; font-size: 12.5px; appearance: none; -webkit-appearance: none; cursor: pointer; }
.medal-search { display: flex; align-items: center; gap: 8px; min-width: 180px; max-width: 240px; min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg-card); }
.medal-search:focus-within, .medal-sort select:focus-visible { border-color: var(--accent-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 14%, transparent); outline: none; }
.medal-search svg { flex-shrink: 0; width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; }
.medal-search input { width: 100%; min-width: 0; padding: 8px 0; border: 0; outline: none; background: transparent; color: var(--ink); font: inherit; font-size: 12.5px; }
.medal-results-meta { display: flex; justify-content: space-between; gap: 14px; padding: 6px 0 14px; font-size: 11.5px; color: var(--muted); }

/* ---------- Grid and cards ---------- */
#panel-medals .medal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.medal-group-heading { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 14px 0 2px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font: 400 22px/1.2 var(--studio-serif, Georgia, serif); color: var(--ink); }
.medal-group-heading:first-child { margin-top: 0; }
.medal-group-heading small { font: 500 12px/1.4 Inter, system-ui, sans-serif; color: var(--muted); }
#panel-medals .medal-grid .medal-card { position: relative; display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--bg-card); box-shadow: 0 1px 2px var(--shadow); transition: transform .22s var(--ease-out, ease), box-shadow .22s, border-color .22s; }
#panel-medals .medal-grid .medal-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px var(--shadow); }
#panel-medals .medal-grid .medal-earned { border-color: var(--tier-line); }
#panel-medals .medal-grid .medal-earned:is([data-tier=legendary], [data-tier=mythic]) { box-shadow: 0 0 0 1px color-mix(in srgb, var(--tier) 30%, transparent), 0 10px 30px color-mix(in srgb, var(--tier) 18%, transparent); }
#panel-medals .medal-grid .medal-card.medal-pinned { border-color: var(--tier); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tier) 35%, transparent); }
.medal-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 14px 0; }
.medal-state { padding: 3px 9px; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: 11px; font-weight: 600; white-space: nowrap; }
.medal-earned .medal-state { background: color-mix(in srgb, var(--positive) 14%, var(--bg-card)); color: var(--positive); }
.medal-state.pinned-state { background: var(--tier); color: #fff; }
#panel-medals .medal-art-button { position: relative; display: grid; place-items: center; width: 100%; height: 196px; margin: 0; padding: 8px; border: 0; background: radial-gradient(56% 58% at 50% 46%, color-mix(in srgb, var(--medal-bright) 16%, transparent), transparent 72%); cursor: pointer; overflow: visible; perspective: 700px; }
.medal-earned .medal-art-button { background: radial-gradient(56% 58% at 50% 46%, color-mix(in srgb, var(--tier) 22%, transparent), transparent 72%); }
#panel-medals .medal-art-button > .medal-illustration { width: 150px; height: 168px; filter: drop-shadow(0 10px 12px rgb(0 0 0 / .16)); transition: transform .45s var(--ease-out, ease), filter .35s, opacity .35s; }
#panel-medals .medal-locked .medal-art-button > .medal-illustration { filter: grayscale(.92) contrast(.88) brightness(1.08) drop-shadow(0 8px 10px rgb(0 0 0 / .1)); opacity: .55; }
#panel-medals .medal-locked .medal-art-button:is(:hover, :focus-visible) > .medal-illustration { filter: drop-shadow(0 10px 12px rgb(0 0 0 / .16)); opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion=off]) #panel-medals .medal-art-button:is(:hover, :focus-visible) > .medal-illustration { transform: rotateY(-14deg) rotateX(6deg) translateY(-4px) scale(1.04); }
}
.medal-card-copy { display: flex; flex-direction: column; flex: 1; gap: 4px; min-width: 0; padding: 4px 16px 14px; }
.medal-series { font-size: 10.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
#panel-medals .medal-card h3 { margin: 0; font: 400 21px/1.2 var(--studio-serif, Georgia, serif); overflow-wrap: anywhere; }
#panel-medals .medal-card h3 button { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
#panel-medals .medal-card p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.medal-progress { display: grid; gap: 6px; margin-top: auto; }
.medal-progress small { display: block; margin: 0; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
:is(.medal-card, .medal-detail-dialog) progress { display: block; width: 100%; height: 6px; overflow: hidden; border: 0; border-radius: 99px; background: color-mix(in srgb, var(--tier, var(--accent-color)) 12%, var(--line)); accent-color: var(--tier, var(--accent-color)); appearance: none; -webkit-appearance: none; }
:is(.medal-card, .medal-detail-dialog) progress::-webkit-progress-bar { border-radius: 99px; background: color-mix(in srgb, var(--tier, var(--accent-color)) 12%, var(--line)); }
:is(.medal-card, .medal-detail-dialog) progress::-webkit-progress-value { border-radius: 99px; background: var(--tier, var(--accent-color)); }
:is(.medal-card, .medal-detail-dialog) progress::-moz-progress-bar { border-radius: 99px; background: var(--tier, var(--accent-color)); }
.medal-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.medal-card-footer .text-button { min-height: 32px; font-size: 12px; }
.medal-pin-button { min-height: 32px; padding: 6px 12px; border: 1px solid var(--tier-line); border-radius: 10px; background: var(--tier-soft); color: var(--tier-ink); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: background-color .15s, border-color .15s; }
.medal-pin-button:hover { border-color: var(--tier); }
.medal-pin-button[aria-pressed=true] { border-color: var(--tier); background: var(--tier); color: #fff; }
.medal-empty { grid-column: 1 / -1; padding: 36px 16px; border: 1px dashed var(--line); border-radius: 18px; text-align: center; }
.medal-footnote { margin: 22px 0 4px; font-size: 11.5px; line-height: 1.6; }

/* ---------- Detail dialog ---------- */
.medal-detail-dialog { width: min(520px, calc(100vw - 28px)); max-width: none; max-height: min(92dvh, 860px); padding: 26px 28px 24px; border: 0; border-radius: 26px; background: radial-gradient(90% 46% at 50% 0%, color-mix(in srgb, var(--tier, var(--medal-bright)) 18%, var(--bg-card)), var(--bg-card) 72%); color: var(--text); text-align: center; overflow: auto; }
.medal-detail-dialog .medal-detail-close { position: absolute; inset-inline-end: 14px; top: 14px; z-index: 2; }
.medal-detail-art { position: relative; display: grid; place-items: center; height: 232px; margin: 0 0 6px; overflow: visible; }
.medal-detail-art svg { position: relative; z-index: 1; width: 196px; height: 220px; filter: drop-shadow(0 16px 18px rgb(0 0 0 / .2)); }
.medal-detail-flare { position: absolute; left: 50%; top: 46%; width: 230px; height: 230px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--tier) 40%, transparent), transparent 66%); opacity: 0; pointer-events: none; }
.medal-detail-tier { margin: 0 auto 10px; }
.medal-detail-dialog .eyebrow { margin: 0; font-size: 10.5px; letter-spacing: .14em; }
.medal-detail-dialog h2 { margin: 8px 0 10px; font: 400 32px/1.12 var(--studio-serif, Georgia, serif); color: var(--ink); }
.medal-detail-dialog > div > p { margin: 0 auto; max-width: 42ch; font-size: 13px; line-height: 1.65; color: var(--muted); }
.medal-detail-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 14px 0; font-size: 12px; color: var(--ink); }
.medal-detail-facts:empty { display: none; }
.medal-detail-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; max-width: 320px; margin: 4px auto 14px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.medal-guide-copy { display: grid; gap: 14px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); text-align: start; }
.medal-guide-copy section { padding: 0; }
.medal-guide-copy h3 { margin: 0 0 4px; font: 650 11px/1.4 Inter, system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--tier-ink, var(--ink)); }
.medal-guide-copy p { margin: 0; font-size: 12.5px; line-height: 1.65; color: var(--muted); }
.medal-profile-context { width: fit-content; margin: 12px auto; padding: 6px 12px; border-radius: 999px; background: var(--soft); color: var(--ink); font-size: 11.5px; }
.medal-detail-dialog .primary { margin-top: 16px; border-radius: 12px; }
.medal-cabinet-link { display: block; width: 100%; margin-top: 10px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-card); color: var(--ink); font: inherit; font-size: 12.5px; cursor: pointer; }
.medal-cabinet-link:hover { background: var(--soft); }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion=off]) .medal-detail-art[data-reveal] svg { animation: mv-reveal .9s cubic-bezier(.2, .9, .25, 1.15) both; }
  :root:not([data-motion=off]) .medal-detail-art[data-reveal] .medal-detail-flare { animation: mv-flare 1.4s ease-out .15s both; }
  :root:not([data-motion=off]) .medal-detail-art:is([data-tier=legendary], [data-tier=mythic])[data-reveal] .medal-detail-flare { animation: mv-flare 1.4s ease-out .15s both, mv-halo 4s ease-in-out 1.6s infinite; }
}
@keyframes mv-reveal { 0% { opacity: 0; transform: scale(.55) rotate(-14deg); } 60% { opacity: 1; transform: scale(1.06) rotate(3deg); } 100% { transform: none; } }
@keyframes mv-flare { 0% { opacity: 0; scale: .4; } 35% { opacity: 1; } 100% { opacity: .35; scale: 1; } }
@keyframes mv-halo { 0%, 100% { opacity: .35; } 50% { opacity: .7; } }

/* ---------- Pinned badges beside names ---------- */
.pinned-medal-badge { display: inline-grid; flex: none; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; vertical-align: middle; cursor: pointer; overflow: visible; }
.pinned-medal-badge .medal-illustration { width: 28px; height: 28px; filter: drop-shadow(0 2px 2px rgb(0 0 0 / .16)); transition: transform .2s var(--ease-out, ease); }
.pinned-medal-badge:hover .medal-illustration { transform: translateY(-2px) rotate(-6deg) scale(1.08); }
.pinned-medal-badge:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.header-account-button > .pinned-medal-badge, .header-profile-decorations .pinned-medal-badge { width: 26px; height: 26px; }
.header-profile-decorations .pinned-medal-badge .medal-illustration { width: 24px; height: 24px; }

/* ---------- Medals elsewhere in the account ---------- */
.journey-featured-medal .medal-illustration { width: 132px; height: 148px; }
.journey-goal-art .medal-illustration { width: 100%; height: 100%; }
.journey-shelf-medal .medal-illustration { width: 96px; height: 108px; }
.verification-medal-reward .medal-illustration { overflow: visible; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .medal-rarity-ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #panel-medals .medal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .medal-catalog-heading { grid-template-columns: minmax(0, 1fr); }
  .medal-stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .medal-stat-strip > div:nth-child(3) { border-inline-start: 0; }
  .medal-stat-strip > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 600px) {
  .medal-rarity-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .medal-rung { padding: 8px 10px; }
  .medal-catalog-toolbar { align-items: stretch; }
  .medal-filters { flex-wrap: nowrap; overflow-x: auto; padding: 2px 0; scrollbar-width: none; }
  .medal-filters::-webkit-scrollbar { display: none; }
  .medal-filters button { flex: 0 0 auto; }
  .medal-toolbar-end { width: 100%; }
  .medal-search { flex: 1; max-width: none; }
  .medal-search input, .medal-sort select { font-size: 16px; }
  #panel-medals .medal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #panel-medals .medal-art-button { height: 156px; }
  #panel-medals .medal-art-button > .medal-illustration { width: 118px; height: 132px; }
  .medal-card-top { padding: 10px 10px 0; flex-wrap: wrap; }
  .medal-card-copy { padding: 2px 12px 12px; }
  #panel-medals .medal-card h3 { font-size: 17px; }
  #panel-medals .medal-card p { font-size: 11.5px; }
  .medal-card-footer { flex-wrap: wrap; }
  .medal-card-footer > * { flex: 1 1 100%; text-align: center; }
  #medal-pin-showcase { grid-template-columns: 84px minmax(0, 1fr); padding: 14px; }
  .medal-showcase-art, .medal-showcase-art svg { width: 84px; height: 96px; }
  .medal-detail-dialog { padding: 22px 18px 18px; }
  .medal-detail-art { height: 200px; }
  .medal-detail-art svg { width: 168px; height: 188px; }
  .medal-detail-dialog h2 { font-size: 27px; }
}
@media (max-width: 380px) {
  #panel-medals .medal-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  #panel-medals .medal-grid .medal-card, .medal-rung { transition: none; }
  #panel-medals .medal-grid .medal-card:hover, .medal-rung:hover { transform: none; }
}
:root[data-motion=off] #panel-medals .medal-grid .medal-card:hover, :root[data-motion=off] .medal-rung:hover, :root[data-motion=off] .pinned-medal-badge:hover .medal-illustration { transform: none; }