/* badge art */
.badge-art { height:auto; display: block; width: 140px; max-width: 100%; transition: transform .18s ease-out; will-change: transform; }
.badge-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.badge-art.pending svg { filter: grayscale(1); opacity: .4; }
.badge-art.claimed svg { animation: kb-drop .75s cubic-bezier(.2,.9,.3,1.25) both; }
.badge-art .kb-shine { opacity: 0; transform-box: view-box; transform-origin: 120px 120px; transform: rotate(18deg) translateX(-40px); }
.badge-art.claimed .kb-shine { animation: kb-shine 1.3s .6s ease-out both; }
@keyframes kb-drop { 0% { transform: scale(.5) rotate(-12deg); opacity: 0; } 60% { transform: scale(1.07) rotate(2deg); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes kb-shine { 0% { opacity: 0; transform: rotate(18deg) translateX(-40px); } 15% { opacity: 1; } 100% { opacity: 0; transform: rotate(18deg) translateX(330px); } }
.cred .badge-art, .gtile .badge-art { margin: 0 auto; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.gtile { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 10px; cursor: pointer; }
.gtile:hover { border-color: var(--copper); }
.gtile .badge-art { width: 118px; }
.gtile.locked .badge-art svg { filter: grayscale(1) contrast(.9); opacity: .38; }
.gtile b { font-size: .88rem; line-height: 1.25; }
.ladder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ladder > div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.ladder .badge-art { width: 130px; }
@media (max-width: 700px) { .ladder { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .badge-art.claimed svg, .badge-art.claimed .kb-shine { animation: none !important; } .badge-art { transition: none; } }


.badge-art:focus-visible,.gtile:focus-visible{outline:3px solid var(--copper);outline-offset:4px}
.badge-art .kb-shine{pointer-events:none}
@media(max-width:500px){.modal .credential-art-row{flex-wrap:wrap!important}.modal .credential-art-row .badge-art{width:140px!important}.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.gtile{min-width:0}.gtile b{overflow-wrap:anywhere}.creds{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}

/* merged build: locked badges stay legible so the gallery still feels full */
.gtile.locked .badge-art svg { filter: grayscale(1) brightness(1.04) contrast(1.05); opacity: .62; }
.gtile.locked:hover .badge-art svg { filter: grayscale(.35); opacity: .9; }
.gtile.locked { position: relative; }
.gtile.locked::after { content: "Locked"; position: absolute; top: 10px; right: 10px; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #5C6772; background: #EEF1F4; border-radius: 999px; padding: 2px 8px; }
.badge-art.pending svg { filter: grayscale(.9) brightness(1.03); opacity: .6; }

.badge-art.art-locked svg { filter: grayscale(.9) brightness(1.03); opacity: .6; }
.badge-art.art-locked:hover svg { filter: grayscale(.2); opacity: .95; }