/* Discovery surfaces shared by /games/ and the genre pages: one palette, card, tag tile, tab and motion language. */
:is(.zbui.tagsmod-home, .zbui.tagsmod-genre) { --tagsmod-accent: var(--zb-primary); --tagsmod-accent-text: var(--zb-primary-soft-text); --tagsmod-control-border: var(--zb-border); --tagsmod-cover-ring: inset 0 0 0 1px rgb(0 0 0 / 6%); --tagsmod-lift-shadow: 0 18px 36px -22px rgb(15 23 42 / 45%); --tagsmod-section-gap: 64px; --tagsmod-hover-surface: var(--zb-surface-sunken); color: var(--zb-text); background: var(--zb-surface); font-family: var(--zb-font-sans, system-ui, sans-serif); }
/* Text accents and borders need lighter shades than filled actions on dark surfaces. */
[data-bs-theme="dark"] :is(.zbui.tagsmod-home, .zbui.tagsmod-genre) { --tagsmod-control-border: #767f8d; --tagsmod-cover-ring: inset 0 0 0 1px rgb(255 255 255 / 8%); --tagsmod-lift-shadow: 0 18px 40px -20px rgb(0 0 0 / 70%); --tagsmod-hover-surface: var(--zb-surface-raised); --zb-text-soft: #d1d5dd; --zb-text-muted: #b3b8c2; --zb-border: #454b55; --zb-primary-hover: #2d6cdf; color-scheme: dark; scrollbar-color: var(--tagsmod-control-border) var(--zb-surface-sunken); }
:is(.tagsmod-home, .tagsmod-genre) :is(h1,h2,h3,h4,p,figure,ol,ul) { margin: 0; font-family: inherit; color: inherit; }
:is(.tagsmod-home, .tagsmod-genre) :is(ol,ul) { padding: 0; list-style: none; }
/* RiPro pads every <section> by 2rem; these pages space sections themselves. */
:is(.tagsmod-home, .tagsmod-genre) section { padding: 0; }
:is(.tagsmod-home, .tagsmod-genre) .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Section heads: title and one-line lede on the left, controls and the "more" link on the right. */
.tagsmod-section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 24px; }
.tagsmod-section-head > div:first-child { flex: 1 1 260px; min-width: 0; }
:is(.tagsmod-home, .tagsmod-genre) .tagsmod-section-head h2 { font-size: 22px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; }
:is(.tagsmod-home, .tagsmod-genre) .tagsmod-section-head h2 + p { margin-top: 6px; font-size: 13px; line-height: 1.6; color: var(--zb-text-muted); }
.tagsmod-section-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; min-width: 0; max-width: 100%; }
:is(.tagsmod-home, .tagsmod-genre) .tagsmod-more-link { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; max-width: 100%; padding: 0 12px; border-radius: var(--zb-radius-pill); color: var(--zb-text-soft); font-size: 13px; font-weight: 500; text-decoration: none; overflow-wrap: anywhere; transition: color var(--zb-duration-fast) var(--zb-ease), background-color var(--zb-duration-fast) var(--zb-ease); }
:is(.tagsmod-home, .tagsmod-genre) .tagsmod-more-link:hover { background: var(--zb-primary-soft); color: var(--tagsmod-accent-text); }
.tagsmod-more-link > .tagsmod-ico { flex-shrink: 0; width: 15px; height: 15px; transition: transform var(--zb-duration-base) var(--zb-ease-out); }
.tagsmod-more-link:hover > .tagsmod-ico { transform: translateX(3px); }

/* Tabs reuse the catalog's segmented control, shaped and selected like the browse page's sort bar. */
.tagsmod-seg--soft { gap: 2px; padding: 3px; border-color: var(--zb-border); border-radius: 10px; background: var(--zb-surface); }
.tagsmod-seg--soft .tagsmod-seg-item { flex: none; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 7px; font-size: 13px; line-height: 1.2; text-decoration: none; }
.tagsmod-seg--soft .tagsmod-seg-item:hover { background: var(--zb-muted); color: var(--zb-text); }
.tagsmod-seg--soft .tagsmod-seg-item:is(.is-active, [aria-current="page"], [aria-current="true"], [aria-selected="true"]) { background: var(--zb-primary-soft); color: var(--tagsmod-accent-text); font-weight: 600; box-shadow: none; }
.tagsmod-seg--soft .tagsmod-seg-item .tagsmod-ico { width: 15px; height: 15px; }
/* Page link resets would otherwise win over the catalog's control colours; keep focus inside the scroller. */
:is(.tagsmod-home, .tagsmod-genre) a.tagsmod-seg-item { color: var(--zb-text-soft); }
:is(.tagsmod-home, .tagsmod-genre) .tagsmod-seg .tagsmod-seg-item:focus-visible { outline: 2px solid var(--tagsmod-accent); outline-offset: -2px; box-shadow: none; }
.tagsmod-seg-count { color: var(--zb-text-muted); font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; }
.tagsmod-seg-item:is(.is-active, [aria-current], [aria-selected="true"]) .tagsmod-seg-count { color: inherit; opacity: .75; }
.tagsmod-seg--soft { scrollbar-width: none; }
.tagsmod-seg--soft::-webkit-scrollbar { display: none; }
@media (pointer: coarse) { .tagsmod-seg--soft .tagsmod-seg-item { min-height: 40px; padding-inline: 14px; } }

/* One game card everywhere: a 4:3 cover that lifts, two title lines, then maker and date on one row. */
.tagsmod-discovery-card { position: relative; min-width: 0; }
.tagsmod-discovery-cover { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--zb-radius-lg); background: var(--zb-surface-sunken); box-shadow: var(--zb-shadow-card); isolation: isolate; transition: transform var(--zb-duration-slow) var(--zb-ease-out), box-shadow var(--zb-duration-slow) var(--zb-ease-out); }
.tagsmod-discovery-cover::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; box-shadow: var(--tagsmod-cover-ring); pointer-events: none; }
.tagsmod-discovery-cover img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--zb-ease-out); }
:is(.tagsmod-home, .tagsmod-genre) .tagsmod-discovery-name { margin-top: 12px; font-size: 15px; font-weight: 600; line-height: 1.5; }
.tagsmod-discovery-name a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; color: inherit; text-decoration: none; transition: color var(--zb-duration-fast) var(--zb-ease); }
.tagsmod-discovery-meta { display: flex; align-items: baseline; gap: 12px; margin-top: 4px; min-width: 0; font-size: 12.5px; line-height: 1.6; }
:is(.tagsmod-home, .tagsmod-genre) .tagsmod-discovery-credit { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--zb-text-soft); }
.tagsmod-discovery-credit a { color: inherit; text-decoration: none; }
.tagsmod-discovery-credit a:hover { color: var(--tagsmod-accent-text); }
:is(.tagsmod-home, .tagsmod-genre) .tagsmod-discovery-date { flex: none; color: var(--zb-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tagsmod-cover-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; background: radial-gradient(circle at 30% 20%, var(--zb-primary-soft), transparent 70%), var(--zb-surface-sunken); color: var(--zb-text-muted); font-size: 12px; line-height: 1.5; text-align: center; }
.tagsmod-cover-placeholder .tagsmod-ico { flex-shrink: 0; width: 28px; height: 28px; opacity: .8; }
.tagsmod-cover-placeholder > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) {
    .tagsmod-discovery-card:hover .tagsmod-discovery-cover { transform: translateY(-4px); box-shadow: var(--tagsmod-lift-shadow); }
    .tagsmod-discovery-card:hover .tagsmod-discovery-cover img { transform: scale(1.05); }
    .tagsmod-discovery-card:hover .tagsmod-discovery-name a { color: var(--tagsmod-accent-text); }
}

/* Fanned tag tile: up to three covers splay wider on hover. The newest cover sits in front. */
.tagsmod-tag-tile { min-width: 0; }
.tagsmod-tag-tile > a { position: relative; display: flex; flex-direction: column; height: 100%; padding: 14px 16px 16px; border: 1px solid var(--zb-border); border-radius: var(--zb-radius-xl); background: linear-gradient(180deg, var(--zb-surface-sunken), var(--zb-surface) 78%); color: inherit; text-decoration: none; overflow: hidden; isolation: isolate; transition: border-color var(--zb-duration-base) var(--zb-ease), box-shadow var(--zb-duration-slow) var(--zb-ease-out), transform var(--zb-duration-slow) var(--zb-ease-out); }
.tagsmod-tag-tile > a::before { content: ''; position: absolute; inset: -40% -20% auto; z-index: -1; height: 80%; background: radial-gradient(closest-side, var(--zb-primary-soft), transparent); opacity: 0; transition: opacity var(--zb-duration-slow) var(--zb-ease-out); }
.tagsmod-tag-stack { position: relative; display: block; aspect-ratio: 16 / 9.5; margin: 2px 0 14px; }
.tagsmod-tag-cover { position: absolute; top: 9%; left: 50%; width: 56%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--zb-radius-sm); background: var(--zb-surface-sunken); box-shadow: 0 12px 24px -14px rgb(15 23 42 / 55%), var(--tagsmod-cover-ring); transform: translateX(-50%); transition: transform 520ms var(--zb-ease-spring), box-shadow var(--zb-duration-slow) var(--zb-ease-out); }
.tagsmod-tag-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tagsmod-tag-cover--center { z-index: 3; }
.tagsmod-tag-cover--left { z-index: 1; transform: translateX(-50%) translate(-36%, 7%) rotate(-8deg) scale(.86); }
.tagsmod-tag-cover--right { z-index: 2; transform: translateX(-50%) translate(36%, 7%) rotate(8deg) scale(.86); }
[data-tag-covers="2"] .tagsmod-tag-cover--center { transform: translateX(-50%) translate(16%, 2%) rotate(4deg); }
[data-tag-covers="2"] .tagsmod-tag-cover--left { transform: translateX(-50%) translate(-20%, 4%) rotate(-6deg) scale(.92); }
[data-tag-covers="1"] .tagsmod-tag-cover--center { width: 62%; transform: translateX(-50%) rotate(-2deg); }
.tagsmod-tag-empty { position: absolute; inset: 8% 14%; display: grid; place-items: center; border: 1px dashed var(--zb-chip-border); border-radius: var(--zb-radius-lg); color: var(--tagsmod-accent-text); background: var(--zb-primary-soft); }
.tagsmod-tag-empty .tagsmod-ico { width: 34px; height: 34px; stroke-width: 1.5; transform: rotate(-12deg); }
.tagsmod-tag-tile-body { display: grid; gap: 2px; min-width: 0; margin-top: auto; }
.tagsmod-tag-tile-category { overflow: hidden; color: var(--zb-text-muted); font-size: 12px; line-height: 1.6; white-space: nowrap; text-overflow: ellipsis; }
:is(.tagsmod-home, .tagsmod-genre) .tagsmod-tag-tile-name { overflow: hidden; font-size: 17px; font-weight: 700; line-height: 1.4; letter-spacing: -.01em; white-space: nowrap; text-overflow: ellipsis; transition: color var(--zb-duration-fast) var(--zb-ease); }
/* The official-name line is always reserved so names line up across a row. */
.tagsmod-tag-tile-original { min-height: 1.6em; overflow: hidden; color: var(--zb-text-muted); font-size: 12px; line-height: 1.6; white-space: nowrap; text-overflow: ellipsis; }
.tagsmod-tag-tile-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; color: var(--zb-text-muted); font-size: 12.5px; line-height: 1.6; }
.tagsmod-tag-tile-meta strong { color: var(--zb-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.tagsmod-tag-tile-arrow { position: absolute; right: 14px; bottom: 16px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--zb-primary-soft); color: var(--tagsmod-accent-text); opacity: 0; transform: translateX(-6px); transition: opacity var(--zb-duration-base) var(--zb-ease), transform var(--zb-duration-base) var(--zb-ease-out); }
.tagsmod-tag-tile-arrow .tagsmod-ico { width: 15px; height: 15px; }
@media (hover: hover) and (pointer: fine) {
    .tagsmod-tag-tile > a:hover { border-color: var(--zb-primary-soft-border-strong); box-shadow: var(--tagsmod-lift-shadow); transform: translateY(-3px); }
    .tagsmod-tag-tile > a:hover::before { opacity: 1; }
    .tagsmod-tag-tile > a:hover .tagsmod-tag-tile-name { color: var(--tagsmod-accent-text); }
    .tagsmod-tag-tile > a:hover .tagsmod-tag-tile-arrow { opacity: 1; transform: none; }
    .tagsmod-tag-tile > a:hover .tagsmod-tag-cover--center { transform: translateX(-50%) translateY(-5%) scale(1.04); box-shadow: 0 18px 30px -14px rgb(15 23 42 / 60%), var(--tagsmod-cover-ring); }
    .tagsmod-tag-tile > a:hover .tagsmod-tag-cover--left { transform: translateX(-50%) translate(-50%, 9%) rotate(-13deg) scale(.86); }
    .tagsmod-tag-tile > a:hover .tagsmod-tag-cover--right { transform: translateX(-50%) translate(50%, 9%) rotate(13deg) scale(.86); }
    .tagsmod-tag-tile > a:hover [data-tag-covers="2"] .tagsmod-tag-cover--center { transform: translateX(-50%) translate(26%, -2%) rotate(7deg); }
    .tagsmod-tag-tile > a:hover [data-tag-covers="2"] .tagsmod-tag-cover--left { transform: translateX(-50%) translate(-30%, 4%) rotate(-9deg) scale(.92); }
    .tagsmod-tag-tile > a:hover [data-tag-covers="1"] .tagsmod-tag-cover--center { transform: translateX(-50%) translateY(-4%) rotate(0) scale(1.04); }
}
.tagsmod-tag-tile > a:focus-visible { outline: 2px solid var(--tagsmod-accent); outline-offset: 3px; }
.tagsmod-tag-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }

/* Tag chips use the catalog's pill recipe with a muted hash and count. */
.tagsmod-tag-cloud { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
:is(.tagsmod-home, .tagsmod-genre) .tagsmod-tag-cloud .tagsmod-chip { min-height: 36px; padding: 0 6px 0 14px; color: var(--zb-text-soft); font-size: 13px; text-decoration: none; }
:is(.tagsmod-home, .tagsmod-genre) .tagsmod-tag-cloud .tagsmod-chip:hover { color: var(--tagsmod-accent-text); background: var(--zb-primary-soft); border-color: var(--zb-primary-soft-border); }
.tagsmod-chip-hash { margin-right: -1px; color: var(--zb-text-subtle); }
.tagsmod-tag-cloud .tagsmod-chip-count { min-width: 24px; height: 24px; padding: 0 7px; margin-left: 4px; color: var(--zb-text-muted); font-variant-numeric: tabular-nums; }

/* Role badges name what a creator did on a game: on creator cards, entity profiles and their game cards. */
.tagsmod-role-badge { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: var(--zb-radius-pill); background: var(--zb-primary-soft); color: var(--zb-primary-soft-text); font-size: 12px; font-weight: 600; }
.tagsmod-role-badge .tagsmod-ico { flex-shrink: 0; width: 13px; height: 13px; }
.tagsmod-role-badge[data-creator-role="illustrators"] { background: var(--zb-success-soft); color: var(--zb-success-soft-text); }
.tagsmod-role-badge[data-creator-role="voice_actors"] { background: var(--zb-danger-soft); color: var(--zb-danger-soft-text); }

/* Rise-in reveal. Only armed by the script, never for reduced motion, so content is always reachable. */
@keyframes tagsmod-rise { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
.is-reveal-ready [data-reveal]:not(.is-revealed) { opacity: 0; }
.is-reveal-ready [data-reveal].is-revealed:not(.is-instant) { animation: tagsmod-rise 620ms var(--zb-ease-out) backwards; }
.is-reveal-ready [data-reveal]:not(.is-revealed) [data-reveal-stagger] > * { opacity: 0; }
.is-reveal-ready [data-reveal].is-revealed:not(.is-instant) [data-reveal-stagger] > * { animation: tagsmod-rise 560ms var(--zb-ease-out) backwards; }
.is-reveal-ready [data-reveal].is-revealed:not(.is-instant) [data-reveal-stagger] > :nth-child(1) { animation-delay: 80ms; }
.is-reveal-ready [data-reveal].is-revealed:not(.is-instant) [data-reveal-stagger] > :nth-child(2) { animation-delay: 140ms; }
.is-reveal-ready [data-reveal].is-revealed:not(.is-instant) [data-reveal-stagger] > :nth-child(3) { animation-delay: 200ms; }
.is-reveal-ready [data-reveal].is-revealed:not(.is-instant) [data-reveal-stagger] > :nth-child(4) { animation-delay: 260ms; }
.is-reveal-ready [data-reveal].is-revealed:not(.is-instant) [data-reveal-stagger] > :nth-child(5) { animation-delay: 320ms; }
.is-reveal-ready [data-reveal].is-revealed:not(.is-instant) [data-reveal-stagger] > :nth-child(6) { animation-delay: 380ms; }
.is-reveal-ready [data-reveal].is-revealed:not(.is-instant) [data-reveal-stagger] > :nth-child(n+7) { animation-delay: 440ms; }

@media (max-width: 1023.98px) {
    :is(.zbui.tagsmod-home, .zbui.tagsmod-genre) { --tagsmod-section-gap: 48px; }
    .tagsmod-tag-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    :is(.zbui.tagsmod-home, .zbui.tagsmod-genre) { --tagsmod-section-gap: 40px; }
    /* Phones keep the "more" link beside the title; tab strips take their own full-width row below. */
    .tagsmod-section-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 8px; margin-bottom: 18px; }
    .tagsmod-section-actions { display: contents; }
    .tagsmod-section-actions > .tagsmod-seg { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
    .tagsmod-section-actions > .tagsmod-more-link { grid-column: 2; grid-row: 1; align-self: end; }
    :is(.tagsmod-home, .tagsmod-genre) .tagsmod-section-head h2 { font-size: 20px; }
    :is(.tagsmod-home, .tagsmod-genre) .tagsmod-section-head h2 + p { font-size: 12.5px; }
    :is(.tagsmod-home, .tagsmod-genre) .tagsmod-more-link { min-height: 44px; padding-inline: 10px; font-size: 12.5px; }
    :is(.tagsmod-home, .tagsmod-genre) .tagsmod-discovery-name { margin-top: 10px; font-size: 14px; }
    .tagsmod-tag-tile > a { padding: 12px 12px 14px; }
    :is(.tagsmod-home, .tagsmod-genre) .tagsmod-tag-tile-name { font-size: 15px; }
    .tagsmod-tag-tile-meta { gap: 2px 8px; font-size: 12px; }
    .tagsmod-tag-tile-arrow { display: none; }
    /* Two rows of chips that scroll sideways, instead of a tall wall of pills. Positioned so the hidden count text clips with the scroller rather than widening the page. */
    .tagsmod-tag-cloud { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: max-content; grid-template-rows: repeat(2, auto); justify-content: start; gap: 8px; margin-inline: -16px; padding: 2px 16px 8px; overflow-x: auto; scroll-padding-inline: 16px; scrollbar-width: none; }
    .tagsmod-tag-cloud::-webkit-scrollbar { display: none; }
    :is(.tagsmod-home, .tagsmod-genre) .tagsmod-tag-cloud .tagsmod-chip { min-height: 40px; white-space: nowrap; }
    .tagsmod-tag-cloud > .tagsmod-more-link { grid-row: 1 / span 2; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
    :is(.tagsmod-home, .tagsmod-genre) *, :is(.tagsmod-home, .tagsmod-genre) *::before, :is(.tagsmod-home, .tagsmod-genre) *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .tagsmod-discovery-card:hover .tagsmod-discovery-cover, .tagsmod-discovery-card:hover .tagsmod-discovery-cover img, .tagsmod-tag-tile > a:hover, .tagsmod-more-link:hover > .tagsmod-ico { transform: none; }
}
@media (forced-colors: active) {
    .tagsmod-seg--soft .tagsmod-seg-item:is(.is-active, [aria-current], [aria-selected="true"]) { outline: 2px solid Highlight; }
    .tagsmod-tag-tile > a { border-color: CanvasText; }
}