.bg-grid{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px;display:grid}.bg-item{background:var(--bg);border:1px solid var(--border);text-align:center;border-radius:16px;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;display:flex}.bg-item[data-earned="0"]{border-style:dashed}.bg-disc{border:1px solid #0000;border-radius:50%;flex:none;justify-content:center;align-items:center;width:44px;height:44px;display:flex;position:relative}.bg-disc>svg{display:block}.bg-rung{min-width:20px;height:18px;font-family:var(--display);letter-spacing:-.02em;background:var(--bg);font-variant-numeric:tabular-nums;border:1px solid;border-radius:999px;justify-content:center;align-items:center;padding:0 5px;font-size:11px;font-weight:700;line-height:1;display:inline-flex;position:absolute;bottom:-4px;right:-6px}.bg-item[data-earned="0"] .bg-disc,.bg-disc-empty{background:var(--surface2);color:var(--muted);border-color:var(--border)}.bg-disc-empty{border-style:dashed}.bg-pink{color:var(--pink-t);background:#ff4d6d29;border-color:#ff4d6d66}.bg-violet{color:var(--violet-t);background:#7b61ff29;border-color:#7b61ff66}.bg-amber{color:var(--amber-t);background:#ffb02029;border-color:#ffb02066}.bg-teal{color:var(--teal-t);background:#2ec4b629;border-color:#2ec4b666}.bg-name{color:var(--text);font-size:13px;font-weight:600;line-height:1.2}.bg-when{letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-size:11px;font-weight:600}.bg-bar{background:var(--surface2);border-radius:999px;width:100%;height:4px;overflow:hidden}.bg-bar>span{background:linear-gradient(90deg,#ff4d6d,#7b61ff);border-radius:999px;height:100%;display:block}.bg-mark{vertical-align:-4px;border:1px solid #0000;border-radius:50%;flex:none;justify-content:center;align-items:center;width:22px;height:22px;display:inline-flex}.bg-mark>svg{display:block}h1 .bg-mark{width:30px;height:30px}h1 .bg-mark>svg{width:17px;height:17px}.bg-shown{background:var(--bg);border:1px solid var(--border);border-radius:16px;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;display:flex}.bg-pick{border:1px solid var(--border);background:var(--surface);cursor:pointer;border-radius:16px;align-items:center;gap:12px;min-height:56px;padding:10px 12px;display:flex}.bg-pick input{width:20px;height:20px;accent-color:var(--violet);flex:none;margin:0}.bg-pick:has(input:checked){border-color:var(--violet);background:#7b61ff14}.bg-pick:has(input:focus-visible){outline:2px solid var(--violet);outline-offset:2px}