/* Badge medals (see shared/badge-medals.js). Rim metal = tier, scene colour = family,
   dim plate + grey rim = locked. The SVG is drawn in a 279-unit space and scales with the width. */
.wdm {
    --wdm-hi: #f87171; --wdm-glyph: #f87171;
    --wdm-s0: #7f1d1d; --wdm-s1: #2a0a0f;
    --wdm-r0: #f3f4f6; --wdm-r1: #9ca3af; --wdm-r2: #4b5563;
    position: relative; display: inline-block; flex: 0 0 auto;
    width: 76px; aspect-ratio: 279 / 296; line-height: 0;
    color: var(--wdm-glyph);
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--wdm-hi) 38%, transparent));
}
.wdm svg { display: block; width: 100%; height: 100%; overflow: visible; }
.wdm-r0 { stop-color: var(--wdm-r0); } .wdm-r1 { stop-color: var(--wdm-r1); } .wdm-r2 { stop-color: var(--wdm-r2); }
.wdm-s0 { stop-color: var(--wdm-s0); } .wdm-s1 { stop-color: var(--wdm-s1); }
.wdm-b0 { stop-color: var(--wdm-hi); stop-opacity: .4; } .wdm-b1 { stop-color: var(--wdm-hi); stop-opacity: 0; }
.wdm-tyre { fill: #0b1018; }
.wdm-ticks rect { fill: #fff; fill-opacity: .19; }
.wdm-arc { fill: none; stroke: var(--wdm-hi); stroke-width: 12; stroke-linecap: round; }
.wdm-chip rect { fill: #0b1018; stroke: var(--wdm-hi); stroke-width: 2; }
.wdm-chip text { font-family: "JetBrains Mono", ui-monospace, monospace; }
.wdm-value { fill: var(--wdm-hi); font-weight: 700; }
.wdm-unit { fill: #fff; fill-opacity: .69; }

.wdm--speed  { --wdm-hi: #f87171; --wdm-glyph: #f87171; --wdm-s0: #7f1d1d; --wdm-s1: #2a0a0f; }
.wdm--dist   { --wdm-hi: #60a5fa; --wdm-glyph: #60a5fa; --wdm-s0: #1e3a8a; --wdm-s1: #0a1330; }
.wdm--climb  { --wdm-hi: #34d399; --wdm-glyph: #34d399; --wdm-s0: #065f46; --wdm-s1: #04170f; }
.wdm--elec   { --wdm-hi: #fbbf24; --wdm-glyph: #fbbf24; --wdm-s0: #78350f; --wdm-s1: #241203; }
.wdm--rhythm { --wdm-hi: #a78bfa; --wdm-glyph: #a78bfa; --wdm-s0: #4c1d95; --wdm-s1: #150a2e; }
.wdm--bronze   { --wdm-r0: #f0b27a; --wdm-r1: #b45309; --wdm-r2: #5a2e0e; }
.wdm--silver   { --wdm-r0: #f3f4f6; --wdm-r1: #9ca3af; --wdm-r2: #4b5563; }
.wdm--gold     { --wdm-r0: #fde68a; --wdm-r1: #d97706; --wdm-r2: #78350f; }
.wdm--platinum { --wdm-r0: #e0f2fe; --wdm-r1: #38bdf8; --wdm-r2: #0c4a6e; }
.wdm--obsidian { --wdm-r0: #e9d5ff; --wdm-r1: #8b5cf6; --wdm-r2: #2e1065; }
.wdm--locked {
    --wdm-glyph: #566176; --wdm-r0: #4b5563; --wdm-r1: #2a3341; --wdm-r2: #171e29;
    --wdm-s0: #1b2230; --wdm-s1: #0c1018; filter: none;
}
.wdm--locked .wdm-burst { display: none; }
.wdm-mystery { fill: #2f3a4b; font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 700; }
.wdm--locked .wdm-chip rect { stroke: #3a4556; }
.wdm--locked .wdm-value { fill: var(--wdm-hi); }

/* Sizes: sm = leaderboard rows (disc and rim only), md = catalogue grid, lg = latest-badge feature. */
.wdm--sm { width: 32px; aspect-ratio: 1; filter: none; }
.wdm--md { width: 76px; }
.wdm--lg { width: 128px; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--wdm-hi) 45%, transparent)); }
.wdm--sm.wdm--locked, .wdm--lg.wdm--locked { filter: none; }

/* A one-off "stamp" when a badge is freshly earned; skipped for reduced motion. */
@keyframes wdm-stamp { from { transform: scale(.78); opacity: 0; } 60% { transform: scale(1.06); opacity: 1; } to { transform: scale(1); } }
.wdm--new { animation: wdm-stamp .26s ease-out both; }
@media (prefers-reduced-motion: reduce) { .wdm--new { animation: none; } }

/* ---- Badge tile: medal + name + progress (dashboard, rider profile) ---- */
.wdb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 1rem .6rem; }
.wdb-tile { display: flex; flex-direction: column; align-items: center; gap: .4rem; min-width: 0; text-align: center; }
.wdb-tile--locked .wdb-name { color: var(--wd-muted, #96a0af); }
.wdb-name { max-width: 100%; overflow: hidden; color: var(--wd-text, #f7f8fa); font-size: .72rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
/* What sets a locked badge apart from another with the same target ("held 10 s"). */
.wdb-cond { max-width: 100%; overflow: hidden; color: var(--wdm-glyph, var(--wd-muted, #96a0af)); font-size: .62rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.wdb-sub { max-width: 100%; color: var(--wd-muted, #96a0af); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .6rem; }
.wdb-tile:not(.wdb-tile--locked) .wdb-sub { color: var(--wdm-glyph); }
.wdb-bar { width: 4.5rem; height: 3px; overflow: hidden; border-radius: 2px; background: var(--wd-border, #293241); }
.wdb-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--wdm-hi); }
.wdb-family { margin: 1.1rem 0 .55rem; color: var(--wd-muted, #96a0af); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; }
.wdb-family:first-child { margin-top: 0; }
.wdb-feature { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; padding: .9rem 1rem; border-radius: 12px; background: rgba(255,255,255,.035); }
.wdb-feature .wdb-kicker { color: var(--wdm-glyph); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; }
.wdb-feature .wdb-title { margin: .25rem 0 .15rem; font-size: 1.05rem; font-weight: 800; }
.wdb-feature .wdb-desc { color: var(--wd-muted, #96a0af); font-size: .74rem; }
/* An earned medal that opens the big view (WDBadges h.view + WDBadgeCelebrate.bind). */
.wdb-open { display: inline-flex; padding: 0; border: 0; border-radius: 50%; background: none; line-height: 0; cursor: zoom-in; transition: transform .15s ease; }
.wdb-open:hover { transform: scale(1.06); }
.wdb-open:focus-visible { outline: 2px solid var(--wdm-hi); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .wdb-open { transition: none; } .wdb-open:hover { transform: none; } }

/* ---- "Badge unlocked" window (see shared/badge-celebrate.js) ---- */
.wdc { position: fixed; inset: 0; z-index: 2100; display: flex; align-items: center; justify-content: center; padding: 1rem; background: radial-gradient(circle at 50% 40%, rgba(12,18,30,.88), rgba(2,4,8,.94)); opacity: 0; transition: opacity .18s ease; }
.wdc.is-open { opacity: 1; }
.wdc-card { display: flex; flex-direction: column; align-items: center; width: min(360px, 100%); text-align: center; color: var(--wd-text, #f7f8fa); }
.wdc-stage { position: relative; display: grid; place-items: center; width: 260px; height: 260px; }
.wdc-stage > * { position: absolute; pointer-events: none; }
.wdc-medal { position: relative; width: 200px; aspect-ratio: 279 / 296; }
.wdc-medal .wdm { position: absolute; inset: 0; width: 100%; filter: drop-shadow(0 0 26px color-mix(in srgb, var(--wdm-hi) 55%, transparent)); }
.wdc-medal .wdc-locked .wdm { filter: brightness(1.9); }
.wdc-rays { width: 420px; height: 420px; border-radius: 50%; opacity: 0;
    background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--wdm-hi) 38%, transparent) 0 6deg, transparent 6deg 20deg);
    -webkit-mask: radial-gradient(circle, #000 12%, transparent 68%); mask: radial-gradient(circle, #000 12%, transparent 68%);
    animation: wdc-rays 7s linear 1.05s infinite, wdc-fade .5s ease 1.05s both; }
.wdc-ring { width: 200px; height: 200px; border-radius: 50%; border: 3px solid var(--wdm-hi); opacity: 0; animation: wdc-ring .9s ease-out 1.05s forwards; }
.wdc-ring--2 { animation-delay: 1.22s; border-width: 1.5px; }
.wdc-flash { width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, #fff, transparent 65%); opacity: 0; animation: wdc-flash .5s ease-out 1s both; }
.wdc-sparks i { position: absolute; left: 50%; top: 50%; width: var(--s); height: var(--s); margin: calc(var(--s) / -2); border-radius: 50%; background: var(--wdm-hi); box-shadow: 0 0 8px var(--wdm-hi); opacity: 0; animation: wdc-spark .95s cubic-bezier(.1,.7,.3,1) calc(1.05s + var(--t)) forwards; }
.wdc-locked { animation: wdc-shake .9s ease-in 0s both; }
.wdc-earned { animation: wdc-reveal .75s cubic-bezier(.2,1.3,.4,1) 1.05s both; }
.wdc-kicker { margin-top: .6rem; color: var(--wdm-glyph); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; animation: wdc-up .5s ease 1.5s both; }
.wdc-title { margin: .35rem 0 .3rem; font-size: 1.6rem; font-weight: 850; animation: wdc-up .5s ease 1.6s both; }
.wdc-desc { margin: 0 0 1.2rem; max-width: 30ch; color: var(--wd-muted, #96a0af); font-size: .85rem; line-height: 1.45; animation: wdc-up .5s ease 1.7s both; }
.wdc-btn { min-width: 140px; padding: .7rem 1.2rem; border: 1px solid var(--wdm-hi); border-radius: 999px; background: color-mix(in srgb, var(--wdm-hi) 18%, #0b1018); color: var(--wd-text, #f7f8fa); font: inherit; font-weight: 800; cursor: pointer; animation: wdc-up .5s ease 1.9s both; }
.wdc-btn:hover, .wdc-btn:focus-visible { background: color-mix(in srgb, var(--wdm-hi) 34%, #0b1018); outline: none; }
@keyframes wdc-shake { 0% { transform: scale(.7); opacity: 0; } 15% { transform: scale(1); opacity: 1; } 30% { transform: translateX(-5px) rotate(-3deg); } 45% { transform: translateX(5px) rotate(3deg); } 60% { transform: translateX(-6px) rotate(-4deg); } 75% { transform: translateX(6px) rotate(4deg); } 92% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1.1); opacity: 0; } }
@keyframes wdc-reveal { from { opacity: 0; transform: perspective(600px) rotateY(180deg) scale(.5); } 60% { opacity: 1; transform: perspective(600px) rotateY(-12deg) scale(1.12); } to { opacity: 1; transform: none; } }
@keyframes wdc-flash { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: .95; } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes wdc-ring { from { opacity: .9; transform: scale(.55); } to { opacity: 0; transform: scale(2.1); } }
@keyframes wdc-spark { from { opacity: 1; transform: rotate(var(--a)) translateX(30px); } to { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) scale(.3); } }
@keyframes wdc-rays { to { transform: rotate(360deg); } }
@keyframes wdc-fade { from { opacity: 0; } to { opacity: .85; } }
@keyframes wdc-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* The big view of an earned medal: the same stage without the unlock, a larger medal, slow rays,
   the earned date, and previous / close / next. */
.wdc-card--show .wdc-stage { width: min(340px, 86vw); height: min(340px, 86vw); }
.wdc-card--show .wdc-medal { width: min(280px, 70vw); animation: wdc-swap .35s cubic-bezier(.2,1.2,.4,1) both; }
.wdc-card--show .wdc-rays { animation: wdc-rays 14s linear infinite, wdc-fade .6s ease both; }
.wdc-card--show .wdc-kicker, .wdc-card--show .wdc-title, .wdc-card--show .wdc-desc, .wdc-card--show .wdc-date, .wdc-card--show .wdc-nav { animation: wdc-up .35s ease both; }
.wdc-card--show .wdc-desc { margin-bottom: .45rem; }
.wdc-date { margin: 0 0 1.2rem; color: var(--wdm-glyph); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .68rem; }
.wdc-nav { display: flex; align-items: center; gap: .75rem; }
.wdc-nav .wdc-btn { animation: none; }
.wdc-step { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; padding: 0; border: 1px solid var(--wd-border, #293241); border-radius: 50%; background: #0b1018; color: var(--wd-text, #f7f8fa); cursor: pointer; }
.wdc-step:hover, .wdc-step:focus-visible { border-color: var(--wdm-hi); color: var(--wdm-hi); outline: none; }
.wdc-step svg { width: 1.1rem; height: 1.1rem; }
.wdc-step--next svg { transform: scaleX(-1); }
@keyframes wdc-swap { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: none; } }
/* Reduced motion: no shake, flash or particles; the earned medal and text are simply there. */
.wdc--still .wdc-locked, .wdc--still .wdc-flash, .wdc--still .wdc-ring, .wdc--still .wdc-sparks, .wdc--still .wdc-rays { display: none; }
.wdc--still .wdc-earned, .wdc--still .wdc-kicker, .wdc--still .wdc-title, .wdc--still .wdc-desc, .wdc--still .wdc-btn,
.wdc--still .wdc-medal, .wdc--still .wdc-date, .wdc--still .wdc-nav { animation: none; }
@media (prefers-reduced-motion: reduce) { .wdc { transition: none; } }