.badge-row{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;vertical-align:middle;max-width:100%}.badge-chip{--chip: var(--muted);--chip-bg: color-mix(in srgb, var(--chip) 14%, var(--panel));--chip-bd: color-mix(in srgb, var(--chip) 42%, var(--border));position:relative;display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border:1px solid var(--chip-bd);border-radius:999px;background:var(--chip-bg);color:var(--chip);font:600 .74rem/1.25 var(--font);white-space:nowrap;cursor:pointer;text-decoration:none;transition:border-color .12s ease,background .12s ease,transform .12s ease}.badge-chip:hover,.badge-chip:focus-visible{border-color:color-mix(in srgb,var(--chip) 70%,transparent);background:color-mix(in srgb,var(--chip) 22%,var(--panel));color:var(--chip);text-decoration:none;outline:none}.badge-chip:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}.badge-entry{scroll-margin-top:80px}.badge-entry:target{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent)}.badge-ico{font-size:.86em;line-height:1;filter:saturate(1.1)}.badge-label{letter-spacing:.1px}.badge-chip[data-tier="3"]{box-shadow:0 0 0 1px color-mix(in srgb,var(--chip) 18%,transparent) inset;font-weight:700}.badge-chip.badge-more{--chip: var(--muted);font-variant-numeric:tabular-nums}.badge-row[data-size=sm] .badge-chip{padding:2px 7px;gap:4px;font-size:.66rem;border-radius:999px}.badge-row[data-size=sm] .badge-ico{font-size:.8em}.badge-row[data-size=md] .badge-chip{padding:4px 10px;font-size:.74rem}.badge-chip[data-badge=verified]{--chip: var(--accent)}.badge-chip[data-badge=backlink]{--chip: #58a6ff}.badge-chip[data-badge=veteran]{--chip: var(--gold)}.badge-chip[data-badge=top10]{--chip: #e3b341}.badge-chip[data-badge=rising]{--chip: #f778ba}.badge-chip[data-badge=always-online]{--chip: var(--cyan)}.badge-chip[data-badge=community-loved]{--chip: #ff7b72}.badge-chip[data-badge=bedrock-ready]{--chip: #a371f7}.badge-chip[data-badge=cross-play]{--chip: #79c0ff}.badge-chip[data-badge=no-p2w]{--chip: #7ee787}.badge-chip[data-badge=active-updates]{--chip: #ffa657}.badge-chip[data-badge=big-network]{--chip: #bc8cff}.badge-chip[data-tip]:after,.badge-chip[data-tip]:before{position:absolute;bottom:calc(100% + 8px);left:50%;opacity:0;pointer-events:none;transition:opacity .14s ease,transform .14s ease;transform:translate(-50%,4px);z-index:40}.badge-chip[data-tip]:after{content:attr(data-tip);width:max-content;max-width:240px;padding:7px 10px;border:1px solid var(--border);border-radius:var(--r);background:var(--bg-elev, var(--panel));color:var(--text);font:400 .74rem/1.4 var(--font);white-space:normal;text-align:left;box-shadow:var(--shadow, 0 8px 24px rgba(0, 0, 0, .35))}.badge-chip[data-tip]:before{content:"";bottom:calc(100% + 3px);width:8px;height:8px;border:1px solid var(--border);border-top:0;border-left:0;background:var(--bg-elev, var(--panel));transform:translate(-50%,4px) rotate(45deg)}.badge-chip[data-tip]:hover:after,.badge-chip[data-tip]:hover:before,.badge-chip[data-tip]:focus-visible:after,.badge-chip[data-tip]:focus-visible:before{opacity:1;transform:translate(-50%)}.badge-chip[data-tip]:hover:before,.badge-chip[data-tip]:focus-visible:before{transform:translate(-50%) rotate(45deg)}.badge-chip[data-tip-align=start]:after{left:0;transform:translateY(4px)}.badge-chip[data-tip-align=start]:hover:after{transform:translate(0)}.badge-chip[data-tip-align=end]:after{left:auto;right:0;transform:translateY(4px)}.badge-chip[data-tip-align=end]:hover:after{transform:translate(0)}.banner-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--gap, 16px);margin:14px 0 0;padding:0;list-style:none}.banner-tile{display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid var(--border);border-radius:var(--r);background:var(--panel);transition:border-color .14s ease,transform .14s ease}.banner-tile:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}.banner-tile-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.banner-tile-title{font:600 .84rem/1.3 var(--font)}.banner-tile-dim{color:var(--muted);font:500 .7rem/1 var(--font-mono, monospace);white-space:nowrap}.banner-tile-note{color:var(--muted);font-size:.74rem;margin:-4px 0 0}.banner-preview-box{display:grid;place-items:center;min-height:84px;padding:10px;overflow:auto;border:1px solid var(--border-soft, var(--border));border-radius:var(--r-sm, 5px);background-color:var(--panel-2, var(--bg));background-image:linear-gradient(45deg,color-mix(in srgb,var(--border) 55%,transparent) 25%,transparent 25%),linear-gradient(-45deg,color-mix(in srgb,var(--border) 55%,transparent) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,color-mix(in srgb,var(--border) 55%,transparent) 75%),linear-gradient(-45deg,transparent 75%,color-mix(in srgb,var(--border) 55%,transparent) 75%);background-size:14px 14px;background-position:0 0,0 7px,7px -7px,-7px 0}.banner-preview-box img,.banner-preview-box svg{display:block;max-width:100%;height:auto}.banner-tile[data-size="160x600"] .banner-preview-box,.banner-tile[data-size="300x250"] .banner-preview-box{max-height:260px}.banner-copy{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}.banner-copy button,.banner-copy .btn-copy{flex:1 1 auto;padding:6px 10px;border:1px solid var(--border);border-radius:var(--r-sm, 5px);background:var(--panel-2, var(--bg-elev));color:var(--muted);font:600 .7rem/1 var(--font);letter-spacing:.3px;text-transform:uppercase;cursor:pointer;transition:color .12s ease,border-color .12s ease,background .12s ease}.banner-copy button:hover,.banner-copy .btn-copy:hover{color:var(--text);border-color:var(--muted);background:var(--panel)}.banner-copy button:active{transform:translateY(1px)}.banner-copy button.is-copied{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--panel))}.banner-embed{width:100%;padding:7px 9px;border:1px solid var(--border);border-radius:var(--r-sm, 5px);background:var(--bg);color:var(--muted);font:400 .7rem/1.3 var(--font-mono, monospace);overflow-x:auto;white-space:pre}.banner-filters{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}.banner-filters button{padding:5px 11px;border:1px solid var(--border);border-radius:999px;background:transparent;color:var(--muted);font:600 .72rem/1 var(--font);cursor:pointer}.banner-filters button[aria-pressed=true]{color:var(--accent-ink, var(--bg));background:var(--accent);border-color:var(--accent)}html[data-theme=light] .badge-chip{--chip-bg: color-mix(in srgb, var(--chip) 12%, #fff);--chip-bd: color-mix(in srgb, var(--chip) 38%, var(--border));color:color-mix(in srgb,var(--chip) 62%,#111a22)}html[data-theme=light] .badge-chip:hover,html[data-theme=light] .badge-chip:focus-visible{background:color-mix(in srgb,var(--chip) 20%,#fff)}html[data-theme=light] .badge-chip[data-tip]:after,html[data-theme=light] .badge-chip[data-tip]:before{background:var(--panel)}html[data-theme=light] .banner-preview-box{background-color:#fff}@media(prefers-reduced-motion:reduce){.badge-chip,.badge-chip[data-tip]:after,.badge-chip[data-tip]:before,.banner-tile,.banner-copy button{transition:none}.banner-copy button:active{transform:none}}@media(max-width:560px){.banner-picker{grid-template-columns:1fr}.badge-chip[data-tip]:after{max-width:200px}}@media print{.badge-chip[data-tip]:after,.badge-chip[data-tip]:before{display:none}.banner-copy{display:none}}.badge-note{margin-bottom:20px}.badge-note p{margin:0 0 10px;line-height:1.6}.badge-note p:last-child{margin-bottom:0}.badge-list{display:grid;gap:12px}.badge-entry{display:grid;grid-template-columns:48px 1fr auto;gap:16px;align-items:start;padding:16px 18px;background:var(--panel);border:1px solid var(--border);border-radius:12px}.badge-entry-icon{display:grid;place-items:center;width:44px;height:44px;font-size:1.35rem;border-radius:10px;color:var(--badge-ink);background:color-mix(in srgb,var(--badge-ink) 14%,transparent);border:1px solid color-mix(in srgb,var(--badge-ink) 35%,transparent)}.badge-entry-body h3{margin:0 0 4px;font-size:1rem}.badge-entry-body p{margin:0 0 6px;line-height:1.55;color:var(--muted);font-size:.9rem}.badge-entry-body p:last-child{margin-bottom:0}.badge-entry-how strong{color:var(--text)}.badge-entry-count{text-align:right;white-space:nowrap}.badge-entry-count strong{display:block;font-size:1.25rem}.badge-entry-count span{font-size:.78rem;color:var(--muted)}@media(max-width:640px){.badge-entry{grid-template-columns:40px 1fr}.badge-entry-count{grid-column:2;text-align:left}.badge-entry-count strong{display:inline;margin-right:6px}}
