/* /games/browse/: the catalog on the discovery palette, card and genre toolbar (tagsmod-discovery.css, tagsmod-genre.css). */

/* ---- Tokens. The theme's header slides back in (fixed, 60px) when scrolling up; sticky parts move below it. ---- */
.zbui.tagsmod-browse { --tagsmod-browse-sidebar: 272px; --tagsmod-browse-header: 0px; --tagsmod-browse-sticky-ease: cubic-bezier(.77, 0, .175, 1); --tagsmod-browse-include-border: var(--zb-primary-soft-border-strong); --tagsmod-browse-exclude-border: var(--zb-danger-soft-border); --tagsmod-browse-field-shadow: 0 12px 32px -20px rgb(15 23 42 / 38%); --tagsmod-browse-frost: color-mix(in srgb, var(--zb-surface) 88%, transparent); --tagsmod-browse-glow: .5; }
[data-bs-theme="dark"] .zbui.tagsmod-browse { --tagsmod-browse-field-shadow: 0 12px 32px -18px rgb(0 0 0 / 70%); --tagsmod-browse-frost: color-mix(in srgb, var(--zb-surface) 84%, transparent); --tagsmod-browse-glow: .62; }
body:has(.site-header.navbar-sticky:not(.navbar-now)) .zbui.tagsmod-browse { --tagsmod-browse-header: 60px; }
.tagsmod-browse .tagsmod-ico { width: 16px; height: 16px; }

/* ---- Hero: a soft wash and dot grid behind the title, the search console and popular tags. ---- */
.tagsmod-browse-hero { position: relative; overflow: clip; border-bottom: 1px solid var(--zb-border); background: radial-gradient(55% 130% at 92% 0%, var(--zb-primary-soft), transparent 70%), var(--zb-surface); isolation: isolate; }
.tagsmod-browse-hero-ambience { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--zb-text) 16%, transparent) 1px, transparent 0); background-size: 22px 22px; -webkit-mask-image: radial-gradient(60% 90% at 85% 15%, #000, transparent 72%); mask-image: radial-gradient(60% 90% at 85% 15%, #000, transparent 72%); }
.tagsmod-browse-hero-ambience::before, .tagsmod-browse-hero-ambience::after { content: ''; position: absolute; border-radius: 50%; filter: blur(48px); opacity: .7; }
.tagsmod-browse-hero-ambience::before { top: -30%; right: 8%; width: 340px; height: 340px; background: color-mix(in srgb, var(--zb-primary) 20%, transparent); }
.tagsmod-browse-hero-ambience::after { top: 20%; right: 30%; width: 260px; height: 260px; background: rgb(137 104 226 / 16%); }
@media (prefers-reduced-motion: no-preference) {
    .tagsmod-browse-hero-ambience::before { animation: tagsmod-browse-drift 26s var(--zb-ease) infinite alternate; }
    .tagsmod-browse-hero-ambience::after { animation: tagsmod-browse-drift 34s var(--zb-ease) -9s infinite alternate-reverse; }
}
@keyframes tagsmod-browse-drift { to { transform: translate3d(-48px, 28px, 0) scale(1.08); } }
.tagsmod-browse-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 272px; align-items: end; gap: 48px; }
.tagsmod-browse-hero-main { min-width: 0; }
.tagsmod-browse-heading { animation: tagsmod-genre-enter var(--zb-duration-slow) var(--zb-ease-out) backwards; }
/* Shortcuts balance the hero: announced releases, official Chinese and recent popularity, one click each. */
.tagsmod-browse-shortcuts { display: grid; gap: 10px; padding-bottom: 30px; }
.tagsmod-browse-shortcut { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 14px; border: 1px solid var(--zb-border); border-radius: 14px; background: color-mix(in srgb, var(--zb-surface) 82%, transparent); box-shadow: var(--zb-shadow-card); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: border-color var(--zb-duration-fast) var(--zb-ease), transform var(--zb-duration-slow) var(--zb-ease-out), box-shadow var(--zb-duration-slow) var(--zb-ease-out); animation: tagsmod-genre-enter 520ms var(--zb-ease-out) backwards; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
.tagsmod-browse-shortcut-icon { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--zb-primary-soft); color: var(--tagsmod-accent-text); }
.tagsmod-browse .tagsmod-browse-shortcut-icon .tagsmod-ico { width: 18px; height: 18px; }
.tagsmod-browse-shortcut--chinese .tagsmod-browse-shortcut-icon { background: var(--zb-success-soft); color: var(--zb-success-soft-text); }
.tagsmod-browse-shortcut--popular .tagsmod-browse-shortcut-icon { background: rgb(255 106 61 / 14%); color: #e8501f; }
.tagsmod-browse-shortcut--rated .tagsmod-browse-shortcut-icon { background: rgb(245 166 35 / 16%); color: #c27803; }
.tagsmod-browse-shortcut-text { display: grid; flex: 1; gap: 2px; min-width: 0; }
.tagsmod-browse-shortcut-text strong { color: var(--zb-text); font-size: 14px; font-weight: 650; }
.tagsmod-browse-shortcut-text span { overflow: hidden; color: var(--zb-text-muted); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.tagsmod-browse .tagsmod-browse-shortcut-arrow { width: 15px; height: 15px; color: var(--zb-text-subtle); transition: transform var(--zb-duration-base) var(--zb-ease-out), color var(--zb-duration-fast) var(--zb-ease); }
.tagsmod-browse-shortcut:hover { border-color: var(--zb-primary-soft-border-strong); box-shadow: var(--tagsmod-lift-shadow); transform: translateY(-2px); }
.tagsmod-browse-shortcut:hover .tagsmod-browse-shortcut-arrow { color: var(--tagsmod-accent-text); transform: translateX(3px); }
.tagsmod-browse-shortcut.is-selected { border-color: var(--tagsmod-browse-include-border); background: var(--zb-primary-soft); }
.tagsmod-browse-shortcut.is-selected:hover .tagsmod-browse-shortcut-arrow { transform: rotate(90deg); }
.tagsmod-browse .tagsmod-browse-title { font-size: clamp(30px, 3.4vw, 42px); font-weight: 750; line-height: 1.2; letter-spacing: -.02em; }
.tagsmod-browse .tagsmod-browse-stat { margin-top: 10px; color: var(--zb-text-soft); font-size: 14.5px; line-height: 1.7; }
.tagsmod-browse-stat strong { color: var(--tagsmod-accent-text); font-weight: 700; font-variant-numeric: tabular-nums; }

/* The search console: scope, keyword and submit in one field. */
.tagsmod-browse-search { display: flex; align-items: stretch; max-width: 780px; margin-top: 22px; padding: 5px; border: 1px solid var(--zb-field-border); border-radius: 16px; background: var(--zb-field); box-shadow: var(--tagsmod-browse-field-shadow); transition: border-color var(--zb-duration-fast) var(--zb-ease), box-shadow var(--zb-duration-base) var(--zb-ease); animation: tagsmod-genre-enter var(--zb-duration-slow) var(--zb-ease-out) 60ms backwards; }
.tagsmod-browse-search:hover { border-color: var(--zb-primary-soft-border-strong); }
.tagsmod-browse-search:focus-within { border-color: var(--tagsmod-accent); box-shadow: var(--zb-focus-ring), var(--tagsmod-browse-field-shadow); }
.tagsmod-browse-scope { position: relative; display: flex; flex: none; align-items: center; }
.tagsmod-browse-scope::after { content: ''; width: 1px; height: 22px; background: var(--zb-border); }
.tagsmod-browse-scope select { height: 100%; min-height: 46px; margin: 0; padding: 0 30px 0 14px; border: 0; border-radius: 11px; appearance: none; background: transparent; color: var(--zb-text); font-size: 14px; font-weight: 600; color-scheme: light; transition: background-color var(--zb-duration-fast) var(--zb-ease); }
[data-bs-theme="dark"] .tagsmod-browse-scope select { color-scheme: dark; }
.tagsmod-browse-scope select option { color: var(--zb-text); background: var(--zb-field); }
.tagsmod-browse-scope select:hover, .tagsmod-browse .tagsmod-browse-scope select:focus-visible { outline: none; background: var(--zb-muted); }
.tagsmod-browse .tagsmod-browse-scope > .tagsmod-ico { position: absolute; right: 12px; width: 14px; height: 14px; color: var(--zb-text-muted); pointer-events: none; }
.tagsmod-browse-query { position: relative; display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; padding: 0 6px 0 14px; }
.tagsmod-browse .tagsmod-browse-query > .tagsmod-ico { width: 18px; height: 18px; color: var(--zb-text-muted); }
.tagsmod-browse-query input { flex: 1; width: 100%; min-width: 0; height: 46px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--zb-text); font-size: 15px; outline: none; box-shadow: none; }
.tagsmod-browse-query input::placeholder { color: var(--zb-text-subtle); opacity: 1; }
.tagsmod-browse .tagsmod-browse-query input:focus-visible { outline: none; }
.tagsmod-browse-kbd { display: none; flex: none; min-width: 22px; height: 22px; padding: 0 6px; border: 1px solid var(--zb-border); border-bottom-width: 2px; border-radius: 6px; background: var(--zb-surface-sunken); box-shadow: none; color: var(--zb-text-muted); font: 600 11.5px/19px var(--zb-font-sans, system-ui, sans-serif); text-align: center; }
@media (hover: hover) and (pointer: fine) {
    .tagsmod-browse.is-enhanced .tagsmod-browse-query:not(:focus-within) input:placeholder-shown ~ .tagsmod-browse-kbd { display: inline-block; }
}
.tagsmod-browse-clear { display: grid; flex: none; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--zb-text-muted); transition: background-color var(--zb-duration-fast) var(--zb-ease), color var(--zb-duration-fast) var(--zb-ease); }
.tagsmod-browse-clear:hover { background: var(--zb-muted); color: var(--zb-text); }
.tagsmod-browse-submit { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 6px; min-width: 92px; padding: 0 22px; border: 0; border-radius: 12px; background: var(--zb-primary); color: var(--zb-on-primary); font-size: 15px; font-weight: 600; box-shadow: var(--zb-shadow-action); transition: background-color var(--zb-duration-fast) var(--zb-ease), transform var(--zb-duration-fast) var(--zb-ease); }
.tagsmod-browse-submit:hover { background: var(--zb-primary-hover); }
.tagsmod-browse-submit:active { transform: scale(.97); }
.tagsmod-browse .tagsmod-browse-submit .tagsmod-ico { display: none; width: 18px; height: 18px; }

/* Popular tags: the same tri-state chips as the filter, a little larger. */
.tagsmod-browse-hot { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px 12px; padding: 16px 0 30px; }
.tagsmod-browse-hot:empty { padding-bottom: 22px; }
.tagsmod-browse-hot-label { display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: 34px; color: var(--zb-text-muted); font-size: 12.5px; white-space: nowrap; }
.tagsmod-browse .tagsmod-browse-hot-label .tagsmod-ico { width: 14px; height: 14px; color: #ff6a3d; }
.tagsmod-browse-hot-list { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.tagsmod-browse-hot .tagsmod-browse-tag { min-height: 34px; padding: 0 12px; box-shadow: var(--zb-shadow-card); font-size: 13px; animation: tagsmod-genre-enter 520ms var(--zb-ease-out) backwards; }
.tagsmod-browse-hot .tagsmod-browse-tag:nth-child(2) { animation-delay: 40ms; }
.tagsmod-browse-hot .tagsmod-browse-tag:nth-child(3) { animation-delay: 80ms; }
.tagsmod-browse-hot .tagsmod-browse-tag:nth-child(4) { animation-delay: 120ms; }
.tagsmod-browse-hot .tagsmod-browse-tag:nth-child(n+5) { animation-delay: 160ms; }

/* ---- Layout: a sticky filter sidebar beside the results. ---- */
.tagsmod-browse-body { padding-top: 28px; padding-bottom: 72px; }
.tagsmod-browse-layout { display: grid; grid-template-columns: var(--tagsmod-browse-sidebar) minmax(0, 1fr); align-items: start; gap: 36px; }
.tagsmod-browse-sidebar { position: sticky; top: calc(var(--tagsmod-browse-header) + 16px); max-height: calc(100vh - var(--tagsmod-browse-header) - 32px); margin-right: -8px; padding-right: 8px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: transparent transparent; transition: top .3s var(--tagsmod-browse-sticky-ease), max-height .3s var(--tagsmod-browse-sticky-ease); }
.tagsmod-browse-sidebar:is(:hover, :focus-within) { scrollbar-color: var(--zb-border) transparent; }
.tagsmod-browse-sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding-bottom: 6px; border-bottom: 1px solid var(--zb-border); }
.tagsmod-browse .tagsmod-browse-sidebar-head h2 { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; }
.tagsmod-browse .tagsmod-browse-sidebar-head h2 .tagsmod-ico { color: var(--tagsmod-accent-text); }
.tagsmod-browse-sidebar-close { display: none; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 10px; background: var(--zb-primary); color: var(--zb-on-primary) !important; font-size: 14px; font-weight: 600; }

/* ---- Filter panel ---- */
.tagsmod-browse-panel { min-width: 0; }
.tagsmod-browse .tagsmod-browse-panel-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; padding: 12px; border-radius: 12px; background: var(--zb-surface-sunken); color: var(--zb-text-muted); font-size: 13px; line-height: 1.7; }
.tagsmod-browse-section { border-bottom: 1px solid var(--zb-border); }
.tagsmod-browse-section-head { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 2px; list-style: none; user-select: none; }
.tagsmod-browse-section-head::-webkit-details-marker { display: none; }
.tagsmod-browse .tagsmod-browse-section-title { flex: 1; font-size: 14px; font-weight: 650; }
.tagsmod-browse-section-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--zb-radius-pill); background: var(--zb-primary); color: var(--zb-on-primary); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tagsmod-browse .tagsmod-browse-section-chevron { width: 16px; height: 16px; color: var(--zb-text-muted); transition: transform var(--zb-duration-base) var(--zb-ease); }
.tagsmod-browse-section:not([open]) .tagsmod-browse-section-chevron { transform: rotate(-90deg); }
.tagsmod-browse-section-head:hover .tagsmod-browse-section-chevron { color: var(--zb-text); }
.tagsmod-browse-section-body { padding: 0 0 18px; }
@supports (interpolate-size: allow-keywords) {
    .tagsmod-browse-panel { interpolate-size: allow-keywords; }
    .tagsmod-browse-section::details-content { height: 0; overflow: clip; transition: height .28s var(--zb-ease-out), content-visibility .28s allow-discrete; }
    .tagsmod-browse-section[open]::details-content { height: auto; }
    .tagsmod-browse-panel.is-restoring .tagsmod-browse-section::details-content { transition: none; }
}

/* Option tiles: types and languages toggle; a check replaces the icon once chosen. */
.tagsmod-browse-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.tagsmod-browse-option { display: flex; align-items: center; gap: 7px; min-width: 0; min-height: 38px; padding: 0 10px; border: 1px solid var(--zb-border); border-radius: 10px; background: var(--zb-surface); color: var(--zb-text-soft); font-size: 13px; line-height: 1.2; transition: border-color var(--zb-duration-fast) var(--zb-ease), background-color var(--zb-duration-fast) var(--zb-ease), color var(--zb-duration-fast) var(--zb-ease), transform var(--zb-duration-fast) var(--zb-ease); }
a.tagsmod-browse-option:hover { border-color: var(--zb-primary-soft-border-strong); color: var(--zb-text); }
a.tagsmod-browse-option:active { transform: scale(.97); }
.tagsmod-browse-check { display: none; flex: none; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--zb-primary); color: var(--zb-on-primary); }
.tagsmod-browse .tagsmod-browse-check .tagsmod-ico { width: 11px; height: 11px; stroke-width: 3.2; }
.tagsmod-browse .tagsmod-browse-option-icon { width: 15px; height: 15px; color: var(--zb-text-muted); }
.tagsmod-browse-option-label { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tagsmod-browse-option-count { flex: none; color: var(--zb-text-muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.tagsmod-browse-option.is-selected { border-color: var(--tagsmod-browse-include-border); background: var(--zb-primary-soft); color: var(--zb-primary-soft-text); font-weight: 600; }
.tagsmod-browse-option.is-selected .tagsmod-browse-check { display: inline-grid; animation: tagsmod-browse-pop 320ms var(--zb-ease-spring); }
.tagsmod-browse-option.is-selected .tagsmod-browse-option-icon { display: none; }
.tagsmod-browse-option.is-selected .tagsmod-browse-option-count { color: inherit; opacity: .75; }
.tagsmod-browse-option.is-disabled, .tagsmod-browse-tag.is-disabled, .tagsmod-seg-item.is-disabled, .tagsmod-browse-switch.is-disabled, .tagsmod-browse-quick.is-disabled { opacity: .42; cursor: default; }
.tagsmod-browse-status { display: flex; width: 100%; }
.tagsmod-browse-status .tagsmod-seg-item { flex: 1; gap: 4px; padding: 0 8px; }
.tagsmod-browse-years { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tagsmod-browse-years .tagsmod-browse-option { min-height: 34px; border-radius: var(--zb-radius-pill); }
.tagsmod-browse-years .tagsmod-browse-option-label { flex: none; }
.tagsmod-browse-years-more { display: contents; }
.tagsmod-browse-years-more > summary { display: inline-flex; align-items: center; gap: 4px; min-height: 34px; padding: 0 10px; color: var(--tagsmod-accent-text); font-size: 12.5px; font-weight: 600; list-style: none; }
.tagsmod-browse-years-more > summary::-webkit-details-marker { display: none; }
.tagsmod-browse .tagsmod-browse-years-more > summary .tagsmod-ico { width: 14px; height: 14px; }
.tagsmod-browse-years-more[open] > summary { display: none; }
.tagsmod-browse-years-older { display: contents; }
.tagsmod-browse-switch { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--zb-text-soft); font-size: 13px; line-height: 1.5; }
.tagsmod-browse-switch-track { position: relative; flex: none; width: 40px; height: 24px; border: 1px solid var(--zb-chip-border); border-radius: var(--zb-radius-pill); background: var(--zb-muted); transition: background-color var(--zb-duration-base) var(--zb-ease), border-color var(--zb-duration-base) var(--zb-ease); }
.tagsmod-browse-switch-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--zb-surface); box-shadow: 0 1px 3px rgb(15 23 42 / 30%); transition: transform var(--zb-duration-slow) var(--zb-ease-spring); }
.tagsmod-browse-switch.is-selected .tagsmod-browse-switch-track { border-color: transparent; background: var(--zb-primary); }
.tagsmod-browse-switch.is-selected .tagsmod-browse-switch-track::after { background: var(--zb-on-primary); transform: translateX(16px); }
.tagsmod-browse-switch-label { flex: 1; min-width: 0; }
.tagsmod-browse-switch:hover .tagsmod-browse-switch-label { color: var(--zb-text); }

/* Tri-state tag chips: include in the accent colour with a check, exclude in red with a ban mark and a strike. */
.tagsmod-browse .tagsmod-browse-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-bottom: 12px; color: var(--zb-text-muted); font-size: 12px; line-height: 1.6; }
.tagsmod-browse-hint > span { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; }
.tagsmod-browse-hint-include { background: var(--zb-primary-soft); color: var(--zb-primary-soft-text); }
.tagsmod-browse-hint-exclude { margin-left: 6px; background: var(--zb-danger-soft); color: var(--zb-danger-soft-text); }
.tagsmod-browse .tagsmod-browse-hint .tagsmod-ico { width: 10px; height: 10px; stroke-width: 3; }
.tagsmod-browse .tagsmod-browse-hint--warn { padding: 8px 10px; border-radius: 10px; background: var(--zb-warning-soft); color: var(--zb-warning-soft-text); }
.tagsmod-browse-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tagsmod-browse-tag { position: relative; display: inline-flex; align-items: center; gap: 2px; max-width: 100%; min-height: 32px; padding: 0 10px; border: 1px solid var(--zb-border); border-radius: var(--zb-radius-pill); background: var(--zb-surface); color: var(--zb-text-soft); font-size: 12.5px; line-height: 1; user-select: none; -webkit-tap-highlight-color: transparent; transition: border-color var(--zb-duration-fast) var(--zb-ease), background-color var(--zb-duration-fast) var(--zb-ease), color var(--zb-duration-fast) var(--zb-ease), transform var(--zb-duration-fast) var(--zb-ease); }
a.tagsmod-browse-tag:hover { border-color: var(--zb-primary-soft-border-strong); color: var(--zb-text); }
a.tagsmod-browse-tag:active { transform: scale(.95); }
/* The state mark is drawn once here rather than as two inline icons in each of hundreds of chips. */
.tagsmod-browse-tag-mark { display: none; flex: none; width: 13px; height: 13px; margin-right: 3px; background: currentColor; -webkit-mask: var(--tagsmod-browse-mark) center / contain no-repeat; mask: var(--tagsmod-browse-mark) center / contain no-repeat; forced-color-adjust: none; }
.tagsmod-browse-tag[data-state="include"] { --tagsmod-browse-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m20 6-11 11-5-5'/%3E%3C/svg%3E"); }
.tagsmod-browse-tag[data-state="exclude"] { --tagsmod-browse-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m5.3 5.3 13.4 13.4'/%3E%3C/svg%3E"); }
.tagsmod-browse-tag-hash { color: var(--zb-text-subtle); }
.tagsmod-browse-tag-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tagsmod-browse-tag-count { margin-left: 4px; color: var(--zb-text-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.tagsmod-browse-tag[data-state="include"], .tagsmod-browse-tag[data-state="exclude"] { font-weight: 600; }
.tagsmod-browse-tag[data-state="include"] { border-color: var(--tagsmod-browse-include-border); background: var(--zb-primary-soft); color: var(--zb-primary-soft-text); }
.tagsmod-browse-tag[data-state="exclude"] { border-color: var(--tagsmod-browse-exclude-border); background: var(--zb-danger-soft); color: var(--zb-danger-soft-text); }
.tagsmod-browse-tag:is([data-state="include"], [data-state="exclude"]) .tagsmod-browse-tag-mark { display: inline-block; }
.tagsmod-browse-tag:is([data-state="include"], [data-state="exclude"]) .tagsmod-browse-tag-hash { display: none; }
.tagsmod-browse-tag[data-state="include"] .tagsmod-browse-tag-count { color: inherit; opacity: .7; }
.tagsmod-browse-tag[data-state="exclude"] .tagsmod-browse-tag-name { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.tagsmod-browse-tag[data-state="exclude"] .tagsmod-browse-tag-count { display: none; }
.tagsmod-browse-tag.is-pending { animation: tagsmod-browse-pending 900ms var(--zb-ease) infinite; }
.tagsmod-browse-tag.is-pending .tagsmod-browse-tag-mark { animation: tagsmod-browse-pop 360ms var(--zb-ease-spring); }
.tagsmod-browse-tag.is-refused { animation: tagsmod-browse-shake 360ms var(--zb-ease); }
.tagsmod-browse-tag-selected { margin-bottom: 14px; padding: 10px; border: 1px solid var(--zb-border); border-radius: 14px; background: var(--zb-surface-sunken); }
.tagsmod-browse-tag-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.tagsmod-browse-mode .tagsmod-seg-item { min-height: 30px; padding: 0 10px; font-size: 12px; }
.tagsmod-browse .tagsmod-browse-text-link { display: inline-flex; align-items: center; min-height: 32px; padding: 0 8px; border-radius: 8px; color: var(--tagsmod-accent-text); font-size: 12.5px; font-weight: 600; white-space: nowrap; transition: background-color var(--zb-duration-fast) var(--zb-ease); }
.tagsmod-browse .tagsmod-browse-text-link:hover { background: var(--zb-primary-soft); }
.tagsmod-browse-tag-tools { display: grid; gap: 10px; margin-bottom: 14px; }
.tagsmod-browse-tag-search { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 10px; border: 1px solid var(--zb-field-border); border-radius: 10px; background: var(--zb-field); transition: border-color var(--zb-duration-fast) var(--zb-ease), box-shadow var(--zb-duration-fast) var(--zb-ease); }
.tagsmod-browse-tag-search:focus-within { border-color: var(--tagsmod-accent); box-shadow: var(--zb-focus-ring); }
.tagsmod-browse .tagsmod-browse-tag-search > .tagsmod-ico { width: 15px; height: 15px; color: var(--zb-text-muted); }
.tagsmod-browse-tag-search input { flex: 1; width: 100%; min-width: 0; height: 36px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--zb-text); font-size: 13px; outline: none; box-shadow: none; }
.tagsmod-browse .tagsmod-browse-tag-search input:focus-visible { outline: none; }
.tagsmod-browse-tag-search input::placeholder { color: var(--zb-text-subtle); opacity: 1; }
/* Tag groups wrap inside a segmented tray, so a mouse reaches every group without scrolling sideways. Each button
   reserves the width of its bold label (the hidden ::after), so marking another group never reflows the rows. */
.tagsmod-browse-tag-filters { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--zb-border); border-radius: 10px; background: var(--zb-surface); }
.tagsmod-browse-tag-filters button { display: inline-flex; flex: none; flex-direction: column; align-items: center; justify-content: center; min-height: 30px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--zb-text-soft); font-size: 12.5px; white-space: nowrap; transition: background-color var(--zb-duration-fast) var(--zb-ease), color var(--zb-duration-fast) var(--zb-ease); }
.tagsmod-browse-tag-filters button::after { content: attr(data-label); height: 0; overflow: hidden; font-weight: 600; visibility: hidden; }
.tagsmod-browse-tag-filters button:hover { background: var(--zb-muted); color: var(--zb-text); }
.tagsmod-browse-tag-filters button[aria-pressed="true"] { background: var(--zb-primary-soft); color: var(--tagsmod-accent-text); font-weight: 600; }
.tagsmod-browse .tagsmod-browse-tag-filters button:focus-visible { outline-offset: -2px; }
/* Touch screens swipe a single row instead, which keeps the tag list higher in the phone sheet. */
@media (hover: none) and (pointer: coarse) {
    .tagsmod-browse-tag-filters { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; }
    .tagsmod-browse-tag-filters::-webkit-scrollbar { display: none; }
    .tagsmod-browse-tag-filters button { min-height: 34px; padding: 0 12px; }
}
.tagsmod-browse .tagsmod-browse-tag-empty { padding: 14px 0; color: var(--zb-text-muted); font-size: 12.5px; text-align: center; }
.tagsmod-browse-tag-group + .tagsmod-browse-tag-group { margin-top: 16px; }
.tagsmod-browse .tagsmod-browse-tag-group h4 { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; color: var(--zb-text-muted); font-size: 12px; font-weight: 600; }
.tagsmod-browse-tag-group h4 span { font-weight: 400; font-variant-numeric: tabular-nums; }
.tagsmod-browse:not(.is-enhanced) [data-tag-group="popular"], .tagsmod-browse:not(.is-enhanced) .tagsmod-browse-tag-tools { display: none; }
.tagsmod-browse.is-enhanced .tagsmod-browse-section--tags:not(.is-searching) .tagsmod-browse-tag-group h4 { display: none; }
.tagsmod-browse.is-enhanced .tagsmod-browse-section--tags:not(.is-searching) .tagsmod-browse-tag-group + .tagsmod-browse-tag-group { margin-top: 0; }
.tagsmod-browse-tag-more > summary { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; margin-top: 6px; color: var(--tagsmod-accent-text); font-size: 12.5px; font-weight: 600; list-style: none; }
.tagsmod-browse-tag-more > summary::-webkit-details-marker { display: none; }
.tagsmod-browse .tagsmod-browse-tag-more > summary .tagsmod-ico { width: 14px; height: 14px; }
.tagsmod-browse-tag-more[open] > summary { display: none; }
.tagsmod-browse-tag-more > .tagsmod-browse-tags { margin-top: 6px; }

/* ---- Results: summary and tools, active conditions, then the cards. ---- */
.tagsmod-browse-results { position: relative; min-width: 0; }
.tagsmod-browse-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; min-height: 50px; padding-bottom: 12px; border-bottom: 1px solid var(--zb-border); }
.tagsmod-browse .tagsmod-browse-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 14.5px; font-weight: 600; scroll-margin-top: 110px; }
.tagsmod-browse-summary strong { margin: 0 2px; color: var(--zb-text); font-size: 22px; font-weight: 750; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.tagsmod-browse-summary-page { color: var(--zb-text-muted); font-size: 13px; font-weight: 400; }
.tagsmod-browse-tools { display: flex; align-items: center; gap: 8px; }
.tagsmod-browse-menu { position: relative; }
.tagsmod-browse-menu-button { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px; border: 1px solid var(--zb-border); border-radius: 10px; background: var(--zb-surface); color: var(--zb-text); font-size: 13px; white-space: nowrap; list-style: none; user-select: none; transition: border-color var(--zb-duration-fast) var(--zb-ease); }
.tagsmod-browse-menu-button::-webkit-details-marker { display: none; }
.tagsmod-browse-menu-button:hover, .tagsmod-browse-menu[open] > .tagsmod-browse-menu-button { border-color: var(--zb-primary-soft-border-strong); }
.tagsmod-browse .tagsmod-browse-menu-button .tagsmod-ico { width: 15px; height: 15px; color: var(--zb-text-muted); }
.tagsmod-browse .tagsmod-browse-menu-chevron { transition: transform var(--zb-duration-base) var(--zb-ease); }
.tagsmod-browse-menu[open] .tagsmod-browse-menu-chevron { transform: rotate(180deg); }
.tagsmod-browse-menu-list { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; display: grid; min-width: 172px; padding: 6px; border: 1px solid var(--zb-border); border-radius: 12px; background: var(--zb-surface-raised); box-shadow: var(--zb-shadow-overlay); transform-origin: top right; animation: tagsmod-browse-menu-in 160ms var(--zb-ease-out); }
.tagsmod-browse-menu-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 38px; padding: 0 10px; border-radius: 8px; color: var(--zb-text-soft); font-size: 13.5px; white-space: nowrap; transition: background-color var(--zb-duration-fast) var(--zb-ease), color var(--zb-duration-fast) var(--zb-ease); }
.tagsmod-browse-menu-item:hover { background: var(--tagsmod-hover-surface); color: var(--zb-text); }
.tagsmod-browse-menu-item.is-selected { color: var(--tagsmod-accent-text); font-weight: 600; }
.tagsmod-browse .tagsmod-browse-menu-item .tagsmod-ico { width: 15px; height: 15px; }
.tagsmod-browse .tagsmod-browse-menu-item:focus-visible { outline-offset: -2px; }
.tagsmod-browse-view { display: inline-flex; padding: 3px; border: 1px solid var(--zb-border); border-radius: 10px; background: var(--zb-surface); }
.tagsmod-browse-view button { display: grid; place-items: center; width: 32px; height: 30px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--zb-text-muted); transition: background-color var(--zb-duration-fast) var(--zb-ease), color var(--zb-duration-fast) var(--zb-ease); }
.tagsmod-browse-view button:hover { color: var(--zb-text); }
.tagsmod-browse-view button[aria-pressed="true"] { background: var(--zb-primary-soft); color: var(--tagsmod-accent-text); }
.tagsmod-browse .tagsmod-browse-view button:focus-visible { outline-offset: -2px; }
.tagsmod-browse:not(.is-enhanced) .tagsmod-browse-view { display: none; }
.tagsmod-browse-random { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px; border-radius: 10px; color: var(--zb-text-soft); font-size: 13px; white-space: nowrap; transition: background-color var(--zb-duration-fast) var(--zb-ease), color var(--zb-duration-fast) var(--zb-ease); }
.tagsmod-browse-random:hover { background: var(--zb-primary-soft); color: var(--tagsmod-accent-text); }
.tagsmod-browse .tagsmod-browse-random .tagsmod-ico { transition: transform 420ms var(--zb-ease-spring); }
.tagsmod-browse-random:hover .tagsmod-ico { transform: rotate(-20deg) scale(1.08); }
.tagsmod-browse-random.is-rolling .tagsmod-ico { animation: tagsmod-browse-roll 700ms var(--zb-ease-out) infinite; }
.tagsmod-browse-progress { position: relative; height: 2px; margin-top: -1px; overflow: hidden; opacity: 0; transition: opacity var(--zb-duration-base) var(--zb-ease); }
.tagsmod-browse-progress > span { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--zb-primary) 50%, transparent); transform: translateX(-100%); }
.tagsmod-browse.is-loading .tagsmod-browse-progress { opacity: 1; }
.tagsmod-browse.is-loading .tagsmod-browse-progress > span { animation: tagsmod-browse-progress 1s var(--zb-ease) infinite; }
.tagsmod-browse-chips { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 14px; }
.tagsmod-browse-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 32px; padding: 0 8px 0 12px; border: 1px solid var(--zb-border); border-radius: var(--zb-radius-pill); background: var(--zb-surface-sunken); color: var(--zb-text-soft); font-size: 12.5px; transition: border-color var(--zb-duration-fast) var(--zb-ease), background-color var(--zb-duration-fast) var(--zb-ease), transform var(--zb-duration-fast) var(--zb-ease); animation: tagsmod-browse-chip-in 260ms var(--zb-ease-out) backwards; }
.tagsmod-browse-chip > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tagsmod-browse .tagsmod-browse-chip .tagsmod-ico { width: 13px; height: 13px; flex: none; }
.tagsmod-browse .tagsmod-browse-chip > .tagsmod-ico:last-child { opacity: .6; transition: opacity var(--zb-duration-fast) var(--zb-ease), transform var(--zb-duration-base) var(--zb-ease); }
.tagsmod-browse-chip:hover { border-color: var(--zb-primary-soft-border-strong); }
.tagsmod-browse-chip:hover > .tagsmod-ico:last-child { opacity: 1; transform: rotate(90deg); }
.tagsmod-browse-chip:active { transform: scale(.96); }
.tagsmod-browse-chip--include { border-color: var(--zb-primary-soft-border); background: var(--zb-primary-soft); color: var(--zb-primary-soft-text); }
.tagsmod-browse-chip--exclude { border-color: var(--tagsmod-browse-exclude-border); background: var(--zb-danger-soft); color: var(--zb-danger-soft-text); }
.tagsmod-browse-chip--search { background: var(--zb-surface); color: var(--zb-text); }
.tagsmod-browse-chip--invalid { border-style: dashed; border-color: var(--zb-warning-soft-border, var(--zb-border)); background: var(--zb-warning-soft); color: var(--zb-warning-soft-text); }
.tagsmod-browse .tagsmod-browse-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding-top: 12px; color: var(--zb-text-muted); font-size: 12.5px; }
.tagsmod-browse-suggest-label { display: inline-flex; align-items: center; gap: 4px; }
.tagsmod-browse .tagsmod-browse-suggest-label .tagsmod-ico { width: 13px; height: 13px; }
.tagsmod-browse-suggest > a { display: inline-flex; align-items: center; gap: 2px; min-height: 30px; padding: 0 10px; border: 1px dashed var(--zb-primary-soft-border-strong); border-radius: var(--zb-radius-pill); color: var(--tagsmod-accent-text); font-weight: 600; transition: background-color var(--zb-duration-fast) var(--zb-ease); }
.tagsmod-browse-suggest > a:hover { background: var(--zb-primary-soft); }
.tagsmod-browse-suggest-count { margin-left: 4px; color: var(--zb-text-muted); font-size: 11px; font-weight: 400; }
.tagsmod-browse .tagsmod-browse-notice { display: flex; align-items: center; gap: 6px; padding-top: 12px; color: var(--zb-text-muted); font-size: 12.5px; }
.tagsmod-browse-empty { margin-top: 22px; }
.tagsmod-browse-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.tagsmod-browse .tagsmod-browse-empty .tagsmod-genre-action { margin-top: 0; }
.tagsmod-browse-empty-actions:empty { display: none; }
.tagsmod-browse-secondary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--zb-border); border-radius: var(--zb-radius-md); background: var(--zb-surface); color: var(--zb-text); font-size: 13.5px; font-weight: 600; transition: border-color var(--zb-duration-fast) var(--zb-ease); }
.tagsmod-browse-secondary:hover { border-color: var(--zb-primary-soft-border-strong); color: var(--tagsmod-accent-text); }

/* Cards: the shared discovery card with badges, a sort-aware date and genre chips. */
.tagsmod-browse-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 22px; padding-top: 22px; transition: opacity var(--zb-duration-base) var(--zb-ease); }
.tagsmod-browse.is-loading .tagsmod-browse-grid { opacity: .55; }
.tagsmod-browse-card { display: flex; flex-direction: column; isolation: isolate; }
/* Cards rise in on arrival; a grid that a view transition already animated is marked settled and stays still. */
@media (prefers-reduced-motion: no-preference) {
    .tagsmod-browse-card, .tagsmod-browse-grid[data-settled] > .tagsmod-browse-card.is-appended { animation: tagsmod-browse-card-in 520ms var(--zb-ease-out) backwards; animation-delay: calc(min(var(--i, 0), 12) * 32ms + 40ms); }
    .tagsmod-browse.is-view-transition .tagsmod-browse-card, .tagsmod-browse-grid[data-settled] > .tagsmod-browse-card { animation: none; }
}
.tagsmod-browse-card-body { min-width: 0; }
/* On a narrow cover a long release date wraps below the language badge, which keeps the top-right corner. */
.tagsmod-browse-badges { position: absolute; top: 10px; right: 10px; left: 10px; z-index: 2; display: flex; flex-wrap: wrap-reverse; justify-content: space-between; gap: 6px; pointer-events: none; }
.tagsmod-browse-badge { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 7px; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .02em; line-height: 1; white-space: nowrap; box-shadow: 0 4px 12px -6px rgb(0 0 0 / 50%); }
.tagsmod-browse .tagsmod-browse-badge .tagsmod-ico { width: 12px; height: 12px; }
.tagsmod-browse-badge--new { background: linear-gradient(135deg, #ff8a3d, #ff3d6e); }
.tagsmod-browse-badge--upcoming { background: rgb(15 23 42 / 66%); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.tagsmod-browse-badge--zh { margin-left: auto; background: rgb(255 255 255 / 90%); color: #1a4fba; }
.tagsmod-browse-date-label { margin-right: 4px; color: var(--zb-text-subtle); }
/* Under 好评优先 the date slot reads the approval instead. */
.tagsmod-browse-rating { display: inline-flex; align-items: center; gap: 4px; color: var(--tagsmod-accent-text); font-weight: 600; }
.tagsmod-browse .tagsmod-browse-rating .tagsmod-ico { width: 12px; height: 12px; }

/* ---- Ratings announcement: 「新」 on the two rating sorts and the 玩家好评 shortcut, a dot on the sort button ----
 * Server-rendered only while the 新功能 board's 前台引导 is on; gone once this browser has seen them. The look follows
 * the theme's 「新」 badge and beacon on its game search tab. */
.tagsmod-new-badge { display: inline-flex; flex: none; align-items: center; height: 18px; margin-left: 6px; padding: 0 6px; border-radius: var(--zb-radius-pill); background: var(--zb-primary-soft); color: var(--zb-primary-soft-text); font-size: 11.5px; font-weight: 600; line-height: 1; vertical-align: 1px; }
.tagsmod-browse-menu-item .tagsmod-new-badge { margin: 0 auto 0 -6px; }
.tagsmod-browse-menu-button { position: relative; }
.tagsmod-new-dot { position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--zb-accent); box-shadow: 0 0 0 2px var(--zb-surface); pointer-events: none; }
.tagsmod-new-dot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--zb-accent); animation: tagsmod-new-beacon 1400ms var(--zb-ease-out) 3; }
@keyframes tagsmod-new-beacon { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }
.tagsmod-browse[data-ratings-seen] [data-ratings-new] { display: none !important; }
.tagsmod-browse-dates, .tagsmod-browse-excerpt { display: none; }
.tagsmod-browse-card-tags { display: flex; flex-wrap: wrap; gap: 6px; height: 24px; margin-top: 10px; overflow: hidden; }
.tagsmod-browse-card-tags :is(a, span.is-active) { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 7px; background: var(--zb-muted); color: var(--zb-text-muted); font-size: 11.5px; white-space: nowrap; transition: background-color var(--zb-duration-fast) var(--zb-ease), color var(--zb-duration-fast) var(--zb-ease); }
.tagsmod-browse-card-tags a:hover { background: var(--zb-primary-soft); color: var(--tagsmod-accent-text); }
.tagsmod-browse-card-tags span.is-active { background: var(--zb-primary-soft); color: var(--zb-primary-soft-text); font-weight: 600; }
/* Hovering a card lets its cover bleed a soft glow beneath it (the script adds the layer on first hover). */
.tagsmod-browse-glow { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 18px; opacity: 0; filter: blur(26px) saturate(1.7); transform: translateY(6px) scale(.9); transition: opacity 450ms var(--zb-ease-out), transform 450ms var(--zb-ease-out); pointer-events: none; }
.tagsmod-browse-glow img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) and (pointer: fine) {
    .tagsmod-browse-card:hover .tagsmod-browse-glow { opacity: var(--tagsmod-browse-glow); transform: translateY(16px) scale(.98); }
}

/* List view: wide rows with both dates, the intro and genres. */
.tagsmod-browse[data-view="list"] .tagsmod-browse-grid { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 6px; }
.tagsmod-browse[data-view="list"] .tagsmod-browse-card { display: grid; grid-template-columns: 228px minmax(0, 1fr); align-items: start; gap: 22px; padding: 18px 0; border-bottom: 1px solid var(--zb-border); }
.tagsmod-browse[data-view="list"] .tagsmod-browse-glow { width: 228px; top: 18px; }
.tagsmod-browse[data-view="list"] .tagsmod-discovery-name { margin-top: 2px; font-size: 16px; }
.tagsmod-browse[data-view="list"] .tagsmod-discovery-name a { -webkit-line-clamp: 1; }
.tagsmod-browse[data-view="list"] .tagsmod-discovery-date { display: none; }
.tagsmod-browse[data-view="list"] .tagsmod-browse-dates { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; color: var(--zb-text-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.tagsmod-browse-dates > span { display: inline-flex; align-items: center; gap: 4px; }
.tagsmod-browse .tagsmod-browse-dates .tagsmod-ico { width: 13px; height: 13px; }
.tagsmod-browse[data-view="list"] .tagsmod-browse-excerpt { display: -webkit-box; margin-top: 8px; overflow: hidden; color: var(--zb-text-soft); font-size: 13px; line-height: 1.75; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.tagsmod-browse[data-view="list"] .tagsmod-browse-card-tags { height: auto; max-height: 24px; }

/* ---- Paging: numbers and a page jump on wide screens, "load more" on phones. ---- */
.tagsmod-browse-pager { display: grid; justify-items: center; gap: 16px; margin-top: 44px; }
.tagsmod-browse .tagsmod-browse-pager .tagsmod-genre-pagination { margin-top: 0; }
.tagsmod-browse-more { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; min-height: 54px; border: 1px solid var(--zb-border); border-radius: 14px; background: var(--zb-surface); color: var(--zb-text); font-size: 14.5px; font-weight: 600; transition: border-color var(--zb-duration-fast) var(--zb-ease), background-color var(--zb-duration-fast) var(--zb-ease); }
.tagsmod-browse-more:hover { border-color: var(--zb-primary-soft-border-strong); }
.tagsmod-browse-more-count { color: var(--zb-text-muted); font-size: 12px; font-weight: 400; }
.tagsmod-browse-more.is-loading { pointer-events: none; color: var(--zb-text-muted); }
.tagsmod-browse .tagsmod-browse-end { display: none; color: var(--zb-text-subtle); font-size: 12.5px; }
.tagsmod-browse-jump { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; color: var(--zb-text-muted); font-size: 13px; }
.tagsmod-browse-jump input { width: 72px; height: 36px; margin: 0; padding: 0 8px; border: 1px solid var(--zb-field-border); border-radius: 8px; background: var(--zb-field); color: var(--zb-text); font-size: 14px; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.tagsmod-browse-jump input::-webkit-inner-spin-button, .tagsmod-browse-jump input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.tagsmod-browse-jump button { height: 36px; padding: 0 14px; border: 1px solid var(--zb-border); border-radius: 8px; background: var(--zb-surface); color: var(--zb-text); font-size: 13px; transition: border-color var(--zb-duration-fast) var(--zb-ease); }
.tagsmod-browse-jump button:hover { border-color: var(--zb-primary-soft-border-strong); }

/* ---- Quick bar for screens without the sidebar ---- */
.tagsmod-browse-quickbar { display: none; }
.tagsmod-browse-quick { display: inline-flex; flex: none; align-items: center; gap: 5px; min-height: 36px; padding: 0 12px; border: 1px solid var(--zb-border); border-radius: var(--zb-radius-pill); background: var(--zb-surface); color: var(--zb-text-soft); font-size: 13px; white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: border-color var(--zb-duration-fast) var(--zb-ease), background-color var(--zb-duration-fast) var(--zb-ease), color var(--zb-duration-fast) var(--zb-ease), transform var(--zb-duration-fast) var(--zb-ease); }
a.tagsmod-browse-quick:active { transform: scale(.96); }
.tagsmod-browse .tagsmod-browse-quick .tagsmod-ico { width: 14px; height: 14px; }
.tagsmod-browse-quick.is-selected { border-color: var(--zb-primary-soft-border); background: var(--zb-primary-soft); color: var(--tagsmod-accent-text); font-weight: 600; }
.tagsmod-browse-quick--filter { color: var(--zb-text); font-weight: 600; }
.tagsmod-browse-quick-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--zb-primary); color: var(--zb-on-primary); font-size: 11px; font-variant-numeric: tabular-nums; }
.tagsmod-browse-quick-scroll { position: relative; display: flex; flex: 1; gap: 8px; min-width: 0; margin-right: -16px; padding-right: 16px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-inline: contain; }
.tagsmod-browse-quick-scroll::-webkit-scrollbar { display: none; }

/* ---- The filter sheet: a bottom sheet on phones and a right-hand drawer on tablets. ---- */
.tagsmod-browse-sheet { max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--zb-surface); color: var(--zb-text); }
.tagsmod-browse-sheet[open] { position: fixed; inset: auto 0 0; display: flex; flex-direction: column; width: 100%; height: auto; max-height: min(88dvh, calc(100% - 40px)); border-radius: 20px 20px 0 0; box-shadow: 0 -20px 50px -24px rgb(15 23 42 / 45%); overflow: hidden; animation: tagsmod-browse-sheet-in 340ms cubic-bezier(.2, .8, .2, 1); }
.tagsmod-browse-sheet::backdrop { background: rgb(15 23 42 / 46%); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: tagsmod-browse-fade 340ms ease; }
.tagsmod-browse-sheet.is-closing { animation: tagsmod-browse-sheet-out 240ms cubic-bezier(.4, 0, 1, 1) forwards; }
.tagsmod-browse-sheet.is-closing::backdrop { animation: tagsmod-browse-fade 240ms ease reverse forwards; }
.tagsmod-browse-sheet.is-dragging { animation: none; transition: none; }
.tagsmod-browse-sheet-handle { display: grid; flex: none; place-items: center; height: 22px; touch-action: none; cursor: grab; }
.tagsmod-browse-sheet-handle span { width: 40px; height: 4px; border-radius: 2px; background: var(--zb-chip-border); }
.tagsmod-browse-sheet-head { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px 6px; touch-action: none; }
.tagsmod-browse .tagsmod-browse-sheet-head h2 { font-size: 18px; font-weight: 700; }
.tagsmod-browse-sheet-close { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--zb-muted); color: var(--zb-text-soft); }
.tagsmod-browse .tagsmod-browse-sheet-close .tagsmod-ico { width: 18px; height: 18px; }
.tagsmod-browse-sheet-index { position: relative; display: flex; flex: none; gap: 6px; padding: 4px 16px 10px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--zb-border); }
.tagsmod-browse-sheet-index::-webkit-scrollbar { display: none; }
.tagsmod-browse-sheet-index button { flex: none; min-height: 32px; padding: 0 14px; border: 0; border-radius: var(--zb-radius-pill); background: var(--zb-muted); color: var(--zb-text-soft); font-size: 13px; }
.tagsmod-browse-sheet-index button[aria-current="true"] { background: var(--zb-primary-soft); color: var(--tagsmod-accent-text); font-weight: 600; }
.tagsmod-browse-sheet-body { flex: 1; min-height: 0; padding: 0 16px; overflow-y: auto; overscroll-behavior: contain; scroll-padding-top: 8px; }
.tagsmod-browse-sheet-body .tagsmod-browse-section:last-child { border-bottom: 0; }
@media (min-width: 480px) {
    .tagsmod-browse-sheet-body .tagsmod-browse-options--types { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.tagsmod-browse-sheet-body .tagsmod-browse-tag, .tagsmod-browse-sheet-body .tagsmod-browse-option { min-height: 38px; }
.tagsmod-browse-sheet-foot { display: flex; flex: none; align-items: center; gap: 12px; padding: 12px 16px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--zb-border); background: var(--zb-surface); }
.tagsmod-browse-sheet-reset { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border: 1px solid var(--zb-border); border-radius: 12px; color: var(--zb-text); font-size: 14.5px; }
.tagsmod-browse-sheet-reset.is-disabled { opacity: .45; pointer-events: none; }
.tagsmod-browse-sheet-done { flex: 1; min-height: 46px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--zb-primary); color: var(--zb-on-primary); font-size: 15px; font-weight: 600; box-shadow: var(--zb-shadow-action); }
.tagsmod-browse-sheet-done strong { margin: 0 2px; font-variant-numeric: tabular-nums; }
html:has(.tagsmod-browse-sheet[open]) { overflow: hidden; }
@media (min-width: 768px) {
    .tagsmod-browse-sheet[open] { inset: 0 0 0 auto; width: min(420px, 92vw); height: 100%; max-height: none; border-radius: 20px 0 0 20px; box-shadow: -20px 0 50px -24px rgb(15 23 42 / 45%); animation-name: tagsmod-browse-drawer-in; }
    .tagsmod-browse-sheet.is-closing { animation-name: tagsmod-browse-drawer-out; }
    .tagsmod-browse-sheet-handle { display: none; }
    .tagsmod-browse-sheet-head { padding-top: 14px; }
}

/* ---- Motion ---- */
@keyframes tagsmod-browse-pop { from { opacity: 0; transform: scale(.3); } }
@keyframes tagsmod-browse-pending { 50% { opacity: .62; } }
@keyframes tagsmod-browse-shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@keyframes tagsmod-browse-menu-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
@keyframes tagsmod-browse-chip-in { from { opacity: 0; transform: scale(.92); } }
@keyframes tagsmod-browse-card-in { from { opacity: 0; transform: translate3d(0, 14px, 0); } }
@keyframes tagsmod-browse-progress { to { transform: translateX(100%); } }
@keyframes tagsmod-browse-roll { to { transform: rotate(360deg); } }
@keyframes tagsmod-browse-fade { from { opacity: 0; } }
@keyframes tagsmod-browse-sheet-in { from { transform: translateY(100%); } }
@keyframes tagsmod-browse-sheet-out { to { transform: translateY(100%); } }
@keyframes tagsmod-browse-drawer-in { from { transform: translateX(100%); } }
@keyframes tagsmod-browse-drawer-out { to { transform: translateX(100%); } }
/* Filter changes glide the cards that stay to their new places (the script names them for the transition). */
::view-transition-group(.tagsmod-browse-card) { animation-duration: 420ms; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-old(.tagsmod-browse-card), ::view-transition-new(.tagsmod-browse-card) { height: 100%; object-fit: cover; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; }

/* ---- Below the sidebar breakpoint: the quick bar and the sheet take over. ---- */
@media (max-width: 1023.98px) {
    .tagsmod-browse-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .tagsmod-browse-shortcuts { display: none; }
    .tagsmod-browse-layout { grid-template-columns: minmax(0, 1fr); }
    .tagsmod-browse-sidebar { display: none; }
    .tagsmod-browse-quickbar { position: sticky; top: var(--tagsmod-browse-header); z-index: 40; display: flex; align-items: center; gap: 8px; margin: -12px -16px 6px; padding: 10px 16px; background: var(--tagsmod-browse-frost); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); transition: top .3s var(--tagsmod-browse-sticky-ease), box-shadow var(--zb-duration-base) var(--zb-ease); }
    .tagsmod-browse-quickbar.is-stuck { box-shadow: 0 1px 0 var(--zb-border), 0 10px 20px -16px rgb(15 23 42 / 40%); }
    .tagsmod-browse-sort--results { display: none; }
    .tagsmod-browse-sort--quick .tagsmod-browse-menu-button { min-height: 36px; border-radius: var(--zb-radius-pill); }
    .tagsmod-browse-sort--quick .tagsmod-browse-menu-list { right: auto; left: 0; transform-origin: top left; }
    .tagsmod-browse-toolbar { min-height: 44px; }
    /* Without the script, the sidebar opens as a full-screen layer through its fragment link. ZBUI isolates the
       page root, so the layer could not rise above the theme's header and tab bar until that is lifted. */
    .zbui.tagsmod-browse:not(.is-enhanced):has(.tagsmod-browse-sidebar:target, .tagsmod-browse-sidebar :target) { isolation: auto; }
    .tagsmod-browse:not(.is-enhanced) .tagsmod-browse-sidebar:is(:target, :has(:target)) { position: fixed; inset: 0; z-index: 100000; display: block; max-height: none; margin: 0; padding: 12px 16px 40px; background: var(--zb-surface); }
    .tagsmod-browse:not(.is-enhanced) .tagsmod-browse-sidebar:is(:target, :has(:target)) .tagsmod-browse-sidebar-close { display: inline-flex; }
}
@media (max-width: 767.98px) {
    .tagsmod-browse-breadcrumb { min-height: 48px; }
    .tagsmod-browse .tagsmod-browse-title { font-size: 28px; }
    .tagsmod-browse .tagsmod-browse-stat { margin-top: 6px; font-size: 13.5px; }
    .tagsmod-browse-search { margin-top: 16px; padding: 4px; border-radius: 14px; }
    .tagsmod-browse-scope select { min-height: 44px; padding: 0 26px 0 10px; font-size: 16px; }
    .tagsmod-browse .tagsmod-browse-scope > .tagsmod-ico { right: 8px; }
    .tagsmod-browse-query { gap: 6px; padding-left: 10px; }
    .tagsmod-browse .tagsmod-browse-query > .tagsmod-ico { display: none; }
    .tagsmod-browse-query input { height: 44px; font-size: 16px; }
    .tagsmod-browse-submit { min-width: 0; padding: 0 16px; border-radius: 10px; }
    .tagsmod-browse-hot { position: relative; display: flex; flex-wrap: nowrap; align-items: center; margin: 0 -16px; padding: 14px 16px 22px; overflow-x: auto; scrollbar-width: none; }
    .tagsmod-browse-hot::-webkit-scrollbar { display: none; }
    .tagsmod-browse-hot-list { flex-wrap: nowrap; }
    .tagsmod-browse-hot .tagsmod-browse-tag { flex: none; min-height: 36px; }
    .tagsmod-browse-body { padding-top: 12px; padding-bottom: 40px; }
    .tagsmod-browse-summary strong { font-size: 19px; }
    .tagsmod-browse-random span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
    .tagsmod-browse-random { position: relative; padding: 0 10px; }
    .tagsmod-browse-chips { flex-wrap: nowrap; margin: 0 -16px; padding: 12px 16px 2px; overflow-x: auto; scrollbar-width: none; }
    .tagsmod-browse-chips::-webkit-scrollbar { display: none; }
    .tagsmod-browse-chip, .tagsmod-browse-chips .tagsmod-browse-text-link { flex: none; }
    .tagsmod-browse-suggest { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding-inline: 16px; position: relative; scrollbar-width: none; }
    .tagsmod-browse-suggest > * { flex: none; }
    .tagsmod-browse-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; padding-top: 16px; }
    .tagsmod-browse .tagsmod-discovery-name { margin-top: 9px; font-size: 14px; }
    .tagsmod-browse .tagsmod-discovery-meta { gap: 8px; font-size: 12px; }
    .tagsmod-browse-card-tags { display: none; }
    .tagsmod-browse-badges { top: 8px; right: 8px; left: 8px; }
    .tagsmod-browse-badge { height: 20px; padding: 0 6px; font-size: 10.5px; }
    .tagsmod-browse[data-view="list"] .tagsmod-browse-card { grid-template-columns: 116px minmax(0, 1fr); gap: 12px; padding: 14px 0; }
    .tagsmod-browse[data-view="list"] .tagsmod-discovery-name { margin-top: 0; font-size: 14.5px; }
    .tagsmod-browse[data-view="list"] .tagsmod-discovery-name a { -webkit-line-clamp: 2; }
    .tagsmod-browse[data-view="list"] .tagsmod-browse-dates { gap: 2px 10px; font-size: 11.5px; }
    .tagsmod-browse[data-view="list"] .tagsmod-browse-excerpt { display: none; }
    .tagsmod-browse[data-view="list"] .tagsmod-browse-card-tags { display: flex; margin-top: 8px; }
    .tagsmod-browse[data-view="list"] .tagsmod-browse-badge--zh { display: none; }
    .tagsmod-browse.is-enhanced .tagsmod-browse-more { display: flex; }
    .tagsmod-browse.is-enhanced .tagsmod-browse-end { display: block; }
    .tagsmod-browse.is-enhanced :is(.tagsmod-browse-pagination, .tagsmod-browse-jump) { display: none; }
    .tagsmod-browse-pager { margin-top: 28px; }
}
@media (max-width: 359.98px) {
    .tagsmod-browse-grid { gap: 18px 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .tagsmod-browse-sheet, .tagsmod-browse-sheet::backdrop, .tagsmod-new-dot::after { animation: none !important; }
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
@media (forced-colors: active) {
    .tagsmod-browse-tag[data-state="include"], .tagsmod-browse-option.is-selected, .tagsmod-browse-quick.is-selected, .tagsmod-browse-tag-filters button[aria-pressed="true"] { outline: 2px solid Highlight; }
    .tagsmod-browse-tag[data-state="exclude"], .tagsmod-browse-chip--exclude { outline: 2px dashed Highlight; }
    .tagsmod-browse-switch.is-selected .tagsmod-browse-switch-track { background: Highlight; }
    .tagsmod-browse-search:focus-within, .tagsmod-browse-tag-search:focus-within { outline: 2px solid Highlight; outline-offset: 2px; }
}