.ch-badge-grid{--badge-size:140px;display:grid;grid-template-columns:repeat(auto-fill,var(--badge-size));gap:10px;align-content:start;justify-content:start;min-width:0}
.ch-badge-home{max-height:294px;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;flex:none!important;padding:2px 6px 2px 2px}
/* No visible border/background here: the front face is the complete badge-tile
   image itself, which already carries its own frame and outer boundary. This is
   only the semantic interaction container (button, flip, focus, perspective). */
.ch-badge{position:relative;box-sizing:border-box;width:var(--badge-size);height:var(--badge-size);padding:0;border:0;border-radius:0;background:transparent;color:#ebf5ff;font-family:var(--font-body,system-ui);cursor:pointer;perspective:600px;text-align:center;overflow:hidden}
.ch-badge:focus-visible{outline:3px solid #6fdaff;outline-offset:2px}
.ch-badge-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;backface-visibility:hidden;transition:transform .28s ease}
.ch-badge-front{transform:rotateY(0)}.ch-badge-back{transform:rotateY(180deg);padding:9px;gap:5px;justify-content:center;background:#06111e;border-radius:11px}
.ch-badge[aria-pressed=true] .ch-badge-front{transform:rotateY(-180deg)}.ch-badge[aria-pressed=true] .ch-badge-back{transform:rotateY(0)}
/* The art fills the whole front face -- the tile's own baked-in frame and name
   are the only visible boundary, so nothing here should reframe it. */
.ch-badge-art{width:100%;height:100%;display:block;flex:none}.ch-badge-art img{display:block;width:100%;height:100%;object-fit:contain}
.ch-badge-tier{position:absolute;top:5px;right:5px;min-width:22px;padding:2px 4px;border-radius:5px;background:#0b2435;border:1px solid #64cbe9;color:#f4ce68;font-size:12px;font-weight:750}
.ch-badge.locked .ch-badge-art{opacity:.58}.ch-badge-state{position:absolute;top:4px;left:6px;font-size:10px;color:#adc3d8;background:#06111e;padding:1px 3px;border-radius:3px}
.ch-badge-back b{font-size:11px;line-height:1.2}.ch-badge-back span{font-size:11px;line-height:1.25}.ch-badge-back progress{width:100%;height:6px;accent-color:#6cd0e8}.ch-badge-detail{font-size:12px;margin-top:10px;padding:10px 0;color:var(--text-secondary,#b8c9d9);max-width:65ch}
.ch-badge-detail:empty{display:none}.ch-badge-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}.ch-badge-summary h2{margin:0}.ch-badge-count{font-size:12px;color:var(--text-secondary,#b8c9d9)}
.ch-badge-link{margin-top:10px}.ch-badge-note{font-size:12px;color:var(--text-secondary,#b8c9d9);margin:8px 0}.ch-badge-confirm{margin:10px 0;display:flex;align-items:start;gap:8px;font-size:13px}.ch-badge-confirm input{width:auto!important;flex:none;margin-top:3px}
@media(max-width:600px){.ch-badge-grid{--badge-size:132px;gap:8px}.ch-badge-home{max-height:276px}}
@media(prefers-reduced-motion:reduce){.ch-badge-face{transition:none;transform:none!important}.ch-badge-back{visibility:hidden}.ch-badge[aria-pressed=true] .ch-badge-front{visibility:hidden}.ch-badge[aria-pressed=true] .ch-badge-back{visibility:visible}}

.ch-badge-progress{color:#c4e5f1}.ch-badge-back{gap:4px}.ch-badge-state{font-size:10px}.ch-badge-detail{max-height:70px;overflow-y:auto}

#portfolioBadgeCard{scroll-margin-top:190px}@media(min-width:1101px){#portfolioBadgeCard{scroll-margin-top:20px}}

.ch-badge-gallery{max-height:594px;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:2px 6px 2px 2px}@media(max-width:600px){.ch-badge-gallery{max-height:556px}}

#chBadgeGalleryDialog{padding:0;border:0;background:transparent;margin:auto;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);color:var(--text)}
#chBadgeGalleryDialog::backdrop{background:rgba(4,8,18,.78);backdrop-filter:blur(8px)}
#chBadgeGalleryDialog .feedbackpanel{width:min(760px,calc(100vw - 32px));max-height:calc(100dvh - 32px);box-sizing:border-box}
.ch-badge-link{background:none;border:0;padding:6px 0;color:var(--accent);font:inherit;font-size:12px;text-decoration:underline;cursor:pointer}

/* Shared navy treatment across milestones, Portfolio and the badge gallery. */
.ch-badge-art img{filter:url(#badge-navy-background)}