:root {
  color-scheme: dark;
  --bg: #111312;
  --surface: #191c1a;
  --surface-raised: #202420;
  --text: #f1f0e9;
  --muted: #a6aca5;
  --quiet: #888f87;
  --gold: #00bfa5;
  --gold-dim: #e8faf7;
  --line: #30362f;
  --radius: 14px;
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(ellipse at 80% -15%, #282820 0, transparent 43%), var(--bg); }
button, input, a { -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
button, input { color: inherit; }
a { color: inherit; text-decoration: none; }
button { border: 0; }
svg { display: block; width: 22px; height: 22px; flex-shrink: 0; }
[data-icon] { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
button, a { transition: background-color .2s, color .2s, border-color .2s, transform .2s; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 20; transform: translateY(-160%); background: var(--gold); color: var(--bg); padding: 10px 18px; border-radius: 8px; }
.skip-link:focus { transform: none; }
.site-header { border-bottom: 1px solid var(--line); }
.header-inner, main, .site-footer { width: min(1240px, calc(100% - 80px)); margin: auto; }
.header-inner { min-height: 116px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 17px; }
.brand-mark { width: 49px; height: 54px; display: grid; place-items: center; background: var(--gold); color: #1b211a; clip-path: polygon(0 0, 100% 0, 100% 76%, 50% 100%, 0 76%); }
.brand-mark svg { fill: currentColor; width: 30px; height: 30px; margin-top: -6px; }
.brand h1 { font-size: clamp(22px, 2.3vw, 29px); margin: 0; font-weight: 700; letter-spacing: 1px; line-height: 1.35; }
.brand-caption { display: flex; align-items: center; gap: 9px; color: var(--muted); letter-spacing: 1.5px; font-size: 10px; margin-top: 8px; }
.brand-caption i { width: 3px; height: 3px; border-radius: 50%; background: var(--quiet); }
.support-link { display: flex; align-items: center; gap: 12px; border: 1px solid #dfe5e8; background: #ffffff; padding: 10px 17px; border-radius: 10px; font-size: 14px; }
.support-link > [data-icon] { color: var(--gold); }
.support-link > [data-icon="qq"] svg { width: 29px; height: 34px; }
.support-sub { display: block; color: var(--muted); font-size: 10px; letter-spacing: .7px; }
.support-arrow svg { width: 16px; height: 16px; margin-left: 12px; }
.support-link:hover { background: #effbf9; border-color: var(--gold); }
main { min-height: calc(100vh - 250px); outline: none; }
.notice { display: grid; grid-template-columns: 172px 1fr auto; align-items: center; gap: 28px; margin: 30px 0 46px; padding: 27px 30px; border: 1px solid #464132; border-radius: var(--radius); background: linear-gradient(115deg, #28281f, #1d211c); position: relative; overflow: hidden; }
.notice::before { content: ""; position: absolute; left: 0; top: 26px; bottom: 26px; width: 3px; background: var(--gold); border-radius: 0 4px 4px 0; }
.notice-heading { display: flex; align-items: center; gap: 14px; }
.notice-symbol { color: var(--gold); }
.notice-symbol svg { width: 28px; height: 28px; }
.eyebrow { color: var(--quiet); font-size: 10px; font-weight: 600; letter-spacing: 1.8px; margin: 0 0 10px; line-height: 1.5; }
.notice .eyebrow { color: #008f7c; font-size: 9px; letter-spacing: 1.2px; margin-bottom: 5px; }
.notice h2 { font-size: 19px; letter-spacing: 1px; margin: 0; }
.notice-list { margin: 0; padding: 0 0 0 24px; list-style: none; border-left: 1px solid #d7efeb; display: grid; gap: 9px; }
.notice-list li { display: flex; align-items: baseline; gap: 13px; font-size: 13px; color: #dddccf; }
.step-number { color: #008f7c; font-size: 11px; font-variant-numeric: tabular-nums; }
.bookmark-button { display: flex; gap: 9px; align-items: center; white-space: nowrap; padding: 12px 14px; border: 1px solid #8edfd3; color: var(--gold); border-radius: 7px; background: transparent; font-size: 12px; min-height: 44px; }
.bookmark-button svg { width: 17px; height: 17px; }
.bookmark-button:hover { background: #dff8f3; }
.catalog-heading, .catalog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.catalog-heading { margin-bottom: 28px; }
.catalog-title > div { display: flex; gap: 17px; align-items: center; }
.catalog-title .eyebrow { letter-spacing: 2px; }
.catalog-title h2 { font-size: clamp(23px, 2.2vw, 29px); margin: 0; font-weight: 600; letter-spacing: 1px; line-height: 1.4; }
.accent { color: var(--gold); }
.total-count { border-left: 1px solid var(--line); padding-left: 15px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.search-field { display: flex; align-items: center; gap: 12px; padding: 0 15px; height: 48px; width: 288px; border: 1px solid #373d35; border-radius: 8px; background: #1b1f1b; color: var(--quiet); flex-shrink: 0; }
.search-field:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px #00bfa512; }
.search-field svg { width: 18px; height: 18px; }
.search-field input { width: 100%; min-width: 0; background: transparent; border: 0; outline: 0; padding: 0; font-size: 14px; color: var(--text); }
.search-field input::placeholder { color: var(--muted); }
.search-field kbd { font-family: inherit; font-size: 12px; border: 1px solid #41463e; border-radius: 4px; padding: 0 7px; }
.catalog-toolbar { padding: 18px 0 22px; border-top: 1px solid var(--line); align-items: flex-start; }
.filter-rows { display: grid; gap: 14px; min-width: 0; }
.filter-row { display: flex; align-items: flex-start; gap: 17px; }
.category-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-label { display: inline-flex; align-items: center; min-height: 46px; flex-shrink: 0; color: var(--muted); font-size: 12px; letter-spacing: 1px; padding: 0 2px; }
.version-example-note { color: var(--muted); font-size: 12px; margin: -6px 0 22px; }
.category-filters button { min-height: 46px; display: flex; gap: 9px; align-items: center; padding: 10px 18px; border-radius: 7px; border: 1px solid transparent; background: transparent; color: var(--muted); font-size: 15px; }
.category-filters button span { font-size: 12px; opacity: .8; font-variant-numeric: tabular-nums; }
.category-filters button:hover { color: var(--text); background: #242821; }
.category-filters button[aria-pressed="true"] { background: var(--gold); color: #22241d; font-weight: 600; }
.category-filters button.version-filter { border-color: #b9e9e1; color: #008675; }
.category-filters button.version-filter[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #22241d; }
.version-filters button { min-width: 115px; justify-content: center; }
.catalog-hint { display: flex; align-items: center; gap: 8px; font-size: 11px; white-space: nowrap; color: var(--quiet); }
.catalog-hint svg { width: 14px; height: 14px; }
.game-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 20px; }
.game-card { display: block; border-radius: var(--radius); overflow: hidden; background: var(--surface); border: 1px solid var(--line); min-width: 0; position: relative; }
.game-card:hover { transform: translateY(-4px); border-color: #63cdbc; box-shadow: 0 10px 26px #0003; }
.cover-wrap { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #242b24; }
.cover-wrap img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .35s ease; }
.cover-wrap img[src*="zhengtu-2"] { object-position: 0% 50%; }
.cover-wrap img[src*="xiaoyao-waizhuan"], .detail-hero > img[src*="xiaoyao-waizhuan"] { object-position: 100% 50%; }
.cover-wrap img[src*="zhangjian-chuanshuo"], .detail-hero > img[src*="zhangjian-chuanshuo"] { object-position: 0% 50%; }
.cover-wrap img[src*="chaoxi-shouwang"], .detail-hero > img[src*="chaoxi-shouwang"] { object-position: 0% 50%; }
.cover-wrap img[src*="huanjing-linghuashi"], .detail-hero > img[src*="huanjing-linghuashi"] { object-position: 0% 50%; }
.cover-wrap img[src*="shuishijie-paopao"], .detail-hero > img[src*="shuishijie-paopao"] { object-position: 100% 50%; }
.cover-wrap img[src*="yueding-zhiri"], .detail-hero > img[src*="yueding-zhiri"] { object-position: 25% 50%; }
.cover-wrap img[src*="tianlongbabu-3-71-erengu"], .detail-hero > img[src*="tianlongbabu-3-71-erengu"] { object-position: 85% 50%; }
.game-card:hover img { transform: scale(1.035); }
.cover-wrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #070d0880, transparent 55%); pointer-events: none; }
.cover-category { position: absolute; left: 14px; top: 14px; color: #f4f1e5; font-size: 13px; font-weight: 600; letter-spacing: .5px; border: 1px solid #ffffff30; background: #132019ed; border-radius: 5px; padding: 5px 10px; z-index: 1; }
.cover-category.version-public { color: #c1efd4; background: #16352bed; border-color: #669a7b; }
.cover-category.version-beta { color: #f5dba4; background: #45321aed; border-color: #a58b57; }
.cover-category.version-pending { color: #ddd; background: #292e2ced; border-color: #818b84; }
.cover-number { position: absolute; right: 14px; bottom: 10px; font-size: 10px; color: #eeeee1b0; letter-spacing: 2px; z-index: 1; }
.card-body { padding: 18px 17px 13px; }
.card-title-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-title-line h4 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: .4px; }
.card-type-line { display: flex; align-items: center; gap: 8px; margin-top: 9px; font-size: 11px; }
.card-genre { color: var(--muted); }
.card-arrow { border: 1px solid #3a4137; border-radius: 50%; width: 26px; height: 26px; display: grid; place-items: center; color: var(--muted); flex-shrink: 0; }
.card-arrow svg { width: 13px; height: 13px; }
.game-card:hover .card-arrow { color: #192218; border-color: var(--gold); background: var(--gold); }
.card-subtitle { color: var(--muted); font-size: 11px; margin: 7px 0 16px; }
.card-resources { display: flex; justify-content: space-between; gap: 4px; padding-top: 13px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; letter-spacing: .2px; }
.card-resources i { font-style: normal; color: #555e51; }
.catalog-end { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 36px 0 44px; }
.catalog-end span { width: 48px; height: 1px; background: var(--line); }
.catalog-end p { font-size: 11px; letter-spacing: 1px; color: var(--quiet); }
.site-footer { border-top: 1px solid var(--line); padding: 26px 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; color: var(--quiet); font-size: 10px; }
.site-footer > div { display: grid; gap: 5px; }
.footer-wordmark { color: #c9c9ba; font-size: 11px; letter-spacing: 2px; font-weight: 600; }
.site-footer p { margin: 0; }
.site-footer a { display: flex; align-items: center; gap: 8px; min-height: 44px; white-space: nowrap; }
.site-footer a svg { width: 16px; height: 16px; }
.site-footer a:hover { color: var(--gold); }
.empty-state { padding: 76px 20px; text-align: center; border: 1px dashed #41493b; border-radius: var(--radius); color: var(--muted); }
.empty-state > [data-icon] { color: var(--gold); margin-bottom: 10px; }
.empty-state h3, .empty-state h2 { color: var(--text); font-size: 23px; margin: 10px 0; }
.empty-state p { font-size: 14px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 11px 20px; border-radius: 7px; min-height: 46px; font-size: 13px; font-weight: 600; text-decoration: none; border: 1px solid transparent; }
.button-primary { color: #1d241a; background: var(--gold); }
.button-primary:hover { background: #43ddc5; }
.button-secondary { color: var(--gold); border-color: #9ddfd4; background: #edfaf8; }
.button-secondary:hover { background: #dff6f2; }
.button[disabled] { cursor: not-allowed; color: #a6ab9f; background: #2e332b; border-color: #434b3d; }
.button svg { width: 17px; height: 17px; }
.detail-view { padding-bottom: 60px; }
.breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 15px; padding: 25px 0; font-size: 12px; color: var(--muted); }
.breadcrumbs a { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.breadcrumbs a:hover { color: var(--gold); }
.breadcrumbs svg { width: 16px; height: 16px; }
.detail-hero { display: grid; grid-template-columns: 1fr 1.1fr; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: linear-gradient(120deg, #25281e, #1a1e19); }
.detail-hero > img { width: 100%; height: 100%; min-height: 310px; object-fit: cover; }
.detail-intro { padding: 35px 42px; display: flex; align-items: flex-start; flex-direction: column; justify-content: center; }
.detail-intro .eyebrow { margin-bottom: 17px; }
.detail-category { color: var(--gold); font-size: 12px; }
.detail-intro h2 { font-size: clamp(27px, 3vw, 38px); line-height: 1.4; margin: 6px 0 14px; letter-spacing: 1px; }
#gameSummary { font-size: 14px; color: var(--muted); margin: 0 0 18px; max-width: 44ch; }
.detail-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.detail-tags span { font-size: 14px; color: #c5c9bb; padding: 5px 12px; border: 1px solid #454b3d; border-radius: 5px; }
.detail-caption { margin: 22px 0 0; color: var(--quiet); font-size: 11px; letter-spacing: 1px; }
.detail-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 28px; gap: 6px; padding: 6px; background: #1b1f1a; border: 1px solid var(--line); border-radius: 10px; }
.detail-tabs button { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; background: transparent; border: 1px solid transparent; border-radius: 6px; color: var(--muted); font-size: 15px; }
.detail-tabs button svg { width: 19px; height: 19px; }
.detail-tabs button:hover { background: #2a3026; color: var(--text); }
.detail-tabs button[aria-selected="true"] { background: #e5f9f5; border-color: #8edfd3; color: var(--gold); }
.tab-panel { margin-top: 18px; border: 1px solid var(--line); background: var(--surface); padding: 34px; border-radius: var(--radius); min-height: 325px; }
.panel-grid { display: grid; grid-template-columns: 1fr 280px; gap: 52px; }
.panel-label { color: var(--gold); font-size: 11px; letter-spacing: 1.4px; margin: 0 0 8px; }
.panel-main h3 { font-size: 25px; margin: 0 0 10px; }
.panel-description { color: #c9cebe; font-size: 15px; margin: 0 0 18px; }
.panel-main p:not(.panel-label):not(.panel-description) { font-size: 14px; color: var(--muted); white-space: pre-line; overflow-wrap: anywhere; }
.panel-steps { padding: 0; list-style: none; display: grid; gap: 13px; margin: 26px 0 0; counter-reset: steps; }
.panel-steps li { counter-increment: steps; display: flex; align-items: center; gap: 12px; font-size: 13px; color: #c9cebe; }
.panel-steps li::before { content: counter(steps, decimal-leading-zero); font-size: 10px; display: grid; place-items: center; border: 1px solid #9ddfd4; color: var(--gold); width: 28px; height: 28px; flex-shrink: 0; border-radius: 5px; }
.panel-side { border-left: 1px solid var(--line); padding-left: 28px; }
.panel-side h4 { margin: 0 0 16px; font-size: 13px; color: var(--muted); font-weight: 500; }
.resource-item { display: grid; gap: 7px; margin-bottom: 16px; }
.resource-item .button { width: 100%; }
.resource-item small { text-align: center; font-size: 10px; color: var(--quiet); overflow-wrap: anywhere; }
.not-found { margin: 30px 0 70px; }
.noscript { padding: 30px; }
.info-dialog { width: min(430px, calc(100% - 36px)); max-height: calc(100dvh - 40px); border: 1px solid #5a5038; background: #20251e; color: var(--text); border-radius: 17px; padding: 36px; box-shadow: 0 25px 90px #0009; text-align: center; }
.info-dialog::backdrop { background: #080c0bc9; backdrop-filter: blur(5px); }
.dialog-close { position: absolute; right: 8px; top: 8px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; background: transparent; color: var(--muted); }
.dialog-close:hover { color: var(--text); background: #353c2f; }
.dialog-icon { width: 60px; height: 60px; border: 1px solid #8edfd3; color: var(--gold); background: #e5f9f5; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 24px; }
.dialog-icon svg { width: 28px; height: 28px; }
.info-dialog h2 { font-size: 24px; margin: 0 0 12px; }
#dialogText { font-size: 14px; line-height: 1.9; white-space: pre-line; margin: 0 0 25px; color: #b6bcae; }
.info-dialog .button { width: 100%; }
@media (min-width: 1600px) { .header-inner, main, .site-footer { width: min(1360px, calc(100% - 112px)); } }
@media (max-width: 1100px) {
  .header-inner, main, .site-footer { width: calc(100% - 48px); }
  .notice { grid-template-columns: 140px 1fr; gap: 18px; padding: 22px; }
  .bookmark-button { grid-column: 2; justify-self: start; margin-left: 24px; padding: 6px 12px; }
  .notice-heading { align-self: start; padding-top: 8px; }
  .notice-list { grid-column: 2; grid-row: 1 / span 1; }
  .game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .catalog-hint { display: none; }
  .detail-intro { padding: 28px; }
}
@media (max-width: 760px) {
  .header-inner, main, .site-footer { width: calc(100% - 36px); }
  .header-inner { min-height: 102px; gap: 14px; }
  .brand { gap: 10px; }
  .brand-mark { width: 35px; height: 40px; flex-shrink: 0; }
  .brand-mark svg { width: 24px; height: 24px; margin-top: -4px; }
  .brand h1 { font-size: 21px; letter-spacing: .2px; }
  .brand-caption { font-size: 8px; letter-spacing: 1px; gap: 6px; }
  .support-link { padding: 10px; }
  .support-link > span:not([data-icon]) { display: none; }
  .support-arrow { display: none; }
  .support-link svg { width: 21px; height: 21px; }
  .support-link { min-width: 48px; min-height: 48px; justify-content: center; }
  .support-link > [data-icon="qq"] svg { width: 25px; height: 29px; }
  .notice { display: block; margin: 23px 0 32px; padding: 20px; }
  .notice-heading { padding: 0; margin-bottom: 17px; }
  .notice-heading > div { display: flex; flex-direction: row-reverse; align-items: center; gap: 14px; }
  .notice-heading h2 { font-size: 17px; }
  .notice-heading .eyebrow { margin: 0; font-size: 8px; }
  .notice-symbol svg { width: 21px; height: 21px; }
  .notice-list { border: 0; padding: 0; gap: 11px; }
  .notice-list li { font-size: 12px; gap: 10px; }
  .bookmark-button { margin: 16px 0 0; }
  .catalog-heading { align-items: flex-start; flex-direction: column; gap: 22px; margin-bottom: 16px; }
  .catalog-title h2 { font-size: 24px; }
  .catalog-title .eyebrow { font-size: 9px; }
  .search-field { width: 100%; }
  .search-field input { font-size: 16px; }
  .category-filters { gap: 5px; }
  .filter-row { flex-direction: column; gap: 8px; }
  .filter-label { min-height: 0; font-size: 12px; }
  .filter-rows { width: 100%; gap: 18px; }
  .version-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .version-filters button { min-width: 0; padding: 10px 8px; }
  .category-filters button { font-size: 14px; padding: 10px 13px; gap: 7px; }
  .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 13px; }
  .card-body { padding: 12px 12px 11px; }
  .card-title-line h4 { font-size: 15px; }
  .card-arrow { width: 22px; height: 22px; }
  .card-arrow svg { width: 11px; height: 11px; }
  .card-subtitle { font-size: 10px; margin-bottom: 12px; }
  .cover-category { left: 10px; top: 10px; font-size: 12px; padding: 4px 8px; }
  .card-resources { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); font-size: 12px; letter-spacing: 0; gap: 7px 5px; }
  .card-resources i { display: none; }
  .cover-number { right: 10px; bottom: 7px; font-size: 9px; }
  .site-footer { flex-wrap: wrap; gap: 16px; }
  .site-footer p { order: 3; width: 100%; font-size: 10px; }
  .detail-hero { grid-template-columns: 1fr; }
  .detail-hero > img { min-height: 0; aspect-ratio: 8 / 4.2; }
  .detail-intro { padding: 25px; }
  .detail-intro h2 { font-size: 30px; }
  .detail-tabs { gap: 2px; padding: 4px; margin-top: 22px; }
  .detail-tabs button { flex-direction: column; gap: 6px; padding: 10px 4px; font-size: 13px; min-height: 68px; }
  .tab-panel { padding: 23px; }
  .panel-grid { grid-template-columns: 1fr; gap: 25px; }
  .panel-side { padding: 23px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .panel-main h3 { font-size: 22px; }
}

/* Player Nation editorial refresh */
body { background: linear-gradient(180deg, #fbfaf7 0, #ffffff 520px); }
.site-header { position: sticky; top: 0; z-index: 15; background: #fffffff2; backdrop-filter: blur(18px); border-color: #ebe7df; }
.header-inner { min-height: 92px; }
.brand-mark { border-radius: 5px 5px 16px 16px; box-shadow: 0 8px 22px #8b5a1830; }
.brand h1 { letter-spacing: .06em; }
.brand-caption { color: #776f64; letter-spacing: .18em; }
.support-link { border-radius: 999px; padding: 9px 16px 9px 12px; box-shadow: 0 8px 24px #1d2b3a0a; }

.feature-stage { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(250px, .75fr); gap: 16px; margin: 28px 0 18px; }
.feature-stage a { position: relative; overflow: hidden; color: #fff; }
.feature-main { min-height: 430px; display: flex; align-items: flex-end; padding: clamp(28px, 4.5vw, 58px); border-radius: 24px; background: radial-gradient(circle at 74% 34%, #edb957 0 3%, transparent 3.5%), radial-gradient(circle at 73% 33%, #b27b2880 0 14%, transparent 35%), linear-gradient(135deg, #111923 4%, #1d3140 48%, #9b5d19 150%); box-shadow: 0 24px 70px #16233424; isolation: isolate; }
.feature-main::before { content: ""; position: absolute; width: 320px; height: 320px; right: 6%; top: 4%; border-radius: 45% 55% 48% 52%; background: linear-gradient(145deg, #f6d58f, #8d5518 58%, #142432 59%); opacity: .88; transform: rotate(-12deg); box-shadow: inset 20px 18px 60px #fff2, 0 22px 80px #050b1073; z-index: -2; }
.feature-main::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0d1723 5%, #0d1723c7 42%, transparent 74%), linear-gradient(0deg, #0a111bd9, transparent 55%); z-index: -1; }
.feature-kicker { position: absolute; left: clamp(28px, 4.5vw, 58px); top: 34px; font-size: 11px; font-weight: 700; letter-spacing: .22em; color: #e9c680; }
.feature-copy { display: grid; align-items: start; justify-items: start; max-width: 520px; position: relative; z-index: 2; }
.feature-status { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #dce6eb; }
.feature-status i { width: 7px; height: 7px; border-radius: 50%; background: #67d79c; box-shadow: 0 0 0 5px #67d79c20; }
.feature-copy strong { margin-top: 13px; font-size: clamp(38px, 5.2vw, 70px); line-height: 1.05; letter-spacing: .04em; }
.feature-description { margin-top: 18px; max-width: 390px; color: #e3e8e9; font-size: 15px; line-height: 1.8; }
.feature-action { display: inline-flex; align-items: center; gap: 14px; margin-top: 27px; min-height: 48px; padding: 0 21px; border: 1px solid #ffffff59; border-radius: 999px; background: #ffffff12; backdrop-filter: blur(8px); font-size: 13px; font-weight: 700; }
.feature-action > span { font-size: 18px; }
.feature-index { position: absolute; right: 28px; bottom: 20px; color: #ffffff6b; font-size: 13px; letter-spacing: .2em; }
.feature-orbit { position: absolute; right: 7%; top: 7%; width: 300px; height: 300px; border: 1px solid #fff3; border-radius: 50%; z-index: -1; }
.feature-orbit-two { width: 390px; height: 390px; right: 1%; top: -3%; border-color: #00bfa524; }
.feature-side { display: grid; gap: 16px; }
.feature-mini { min-height: 207px; display: flex; flex-direction: column; justify-content: flex-end; padding: 26px; border-radius: 22px; box-shadow: 0 16px 44px #1623341c; isolation: isolate; }
.feature-mini::before { content: ""; position: absolute; width: 180px; height: 180px; right: -34px; top: -38px; border-radius: 38% 62% 58% 42%; transform: rotate(22deg); background: #ffffff14; box-shadow: inset 0 0 0 1px #ffffff21; z-index: -1; }
.feature-mini-space { background: radial-gradient(circle at 82% 18%, #b97254, transparent 28%), linear-gradient(135deg, #34304c, #152737 70%); }
.feature-mini-fantasy { background: radial-gradient(circle at 78% 20%, #f2c46a78, transparent 26%), linear-gradient(135deg, #284e46, #122922 72%); }
.feature-mini-label { position: absolute; top: 23px; left: 25px; font-size: 10px; font-weight: 700; letter-spacing: .18em; color: #f0d7a6; }
.feature-mini strong { font-size: 24px; line-height: 1.25; }
.feature-mini > span:last-child { margin-top: 8px; color: #dce5e3; font-size: 12px; }
.feature-stage a:hover { transform: translateY(-3px); box-shadow: 0 26px 70px #16233435; }
.feature-stage a:active { transform: scale(.99); }

.notice { margin: 18px 0 54px; border-radius: 18px; padding: 20px 24px; box-shadow: none; }
.notice::before { top: 20px; bottom: 20px; }
.notice-list { grid-template-columns: repeat(3, minmax(0, 1fr)); border-left: 0; padding: 0; gap: 12px; }
.notice-list li { min-height: 50px; align-items: center; padding: 8px 14px; border-left: 1px solid #d7efeb; line-height: 1.5; }
.bookmark-button { border-radius: 999px; padding-inline: 18px; }

.catalog-heading { margin-bottom: 22px; }
.catalog-title h2 { font-size: clamp(29px, 3vw, 42px); letter-spacing: -.02em; }
.search-field { width: min(360px, 100%); height: 52px; border-radius: 999px; padding-inline: 19px; box-shadow: 0 8px 24px #1f30400a; }
.catalog-toolbar { padding: 20px 0 24px; }
.category-filters button { border-radius: 999px; min-height: 44px; padding: 9px 17px; }
.category-filters button.version-filter { min-width: 108px; }
.version-section-heading { margin-bottom: 20px; }
.version-section-heading h3 { font-size: 25px; letter-spacing: -.02em; }
.game-grid { gap: 22px 18px; }
.game-card { border-radius: 18px; border-color: #e7e2da; box-shadow: 0 8px 30px #1f30400b; }
.game-card:hover { transform: translateY(-6px); border-color: #7bdacb; box-shadow: 0 18px 48px #26384a20; }
.cover-wrap { aspect-ratio: 16 / 11; background: #e9e6df; }
.cover-wrap::after { background: linear-gradient(0deg, #08111aa6, transparent 62%); }
.cover-number { padding: 4px 8px; border-radius: 999px; background: #0d17235c; backdrop-filter: blur(6px); }
.cover-category { border-radius: 999px; box-shadow: 0 5px 16px #0710192b; }
.card-body { padding: 19px 18px 15px; }
.card-title-line h4 { font-size: 19px; letter-spacing: 0; }
.card-type-line { margin-top: 10px; }
.card-subtitle { margin: 8px 0 18px; line-height: 1.65; }
.card-resources { font-size: 12px; }
.card-arrow { width: 30px; height: 30px; }

@media (max-width: 900px) {
  .feature-stage { grid-template-columns: 1fr; }
  .feature-side { grid-template-columns: 1fr 1fr; }
  .feature-main { min-height: 390px; }
  .feature-mini { min-height: 170px; }
  .notice-list { grid-template-columns: 1fr; }
  .notice-list li { border-left: 0; border-top: 1px solid #d7efeb; }
}
@media (max-width: 760px) {
  .site-header { position: static; }
  .feature-stage { margin: 14px 0 14px; gap: 10px; }
  .feature-main { min-height: 280px; padding: 22px 18px; border-radius: 18px; }
  .feature-main::before { width: 190px; height: 190px; right: -12%; top: 4%; }
  .feature-orbit { width: 190px; height: 190px; }
  .feature-orbit-two { width: 250px; height: 250px; }
  .feature-kicker { left: 18px; top: 18px; font-size: 9px; }
  .feature-copy strong { margin-top: 8px; font-size: clamp(30px, 10vw, 38px); }
  .feature-status { font-size: 11px; }
  .feature-description { margin-top: 10px; max-width: 78%; font-size: 12px; line-height: 1.55; }
  .feature-action { min-height: 44px; margin-top: 14px; padding: 0 16px; }
  .feature-index { right: 16px; bottom: 14px; }
  .feature-side { grid-template-columns: 1fr 1fr; gap: 10px; }
  .feature-mini { min-height: 116px; padding: 16px; border-radius: 16px; }
  .feature-mini::before { width: 130px; height: 130px; }
  .feature-mini-label { top: 14px; left: 16px; font-size: 9px; }
  .feature-mini strong { font-size: 17px; }
  .feature-mini > span:last-child { margin-top: 5px; font-size: 10px; }
  .notice { margin-bottom: 38px; }
  .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .cover-wrap { aspect-ratio: 4 / 5; }
  .card-body { padding: 14px 13px 12px; }
  .card-title-line h4 { font-size: 16px; }
  .card-resources { overflow: hidden; font-size: 10px; }
}
@media (max-width: 430px) {
  .feature-main { min-height: 260px; }
  .feature-description { max-width: 88%; }
}
@media (prefers-reduced-motion: reduce) {
  .feature-stage a:hover, .feature-stage a:active { transform: none; }
}

/* TapTap-inspired home palette */
:root {
  --bg: #f5f7f8;
  --surface: #ffffff;
  --surface-raised: #f7f9fa;
  --text: #20252b;
  --muted: #69737d;
  --quiet: #87919a;
  --gold: #00bfa5;
  --gold-dim: #e8faf7;
  --line: #e8ecef;
}
body { background: linear-gradient(180deg, #f4f7f8 0, #ffffff 620px); }
:focus-visible { outline-color: #00bfa5; }
.site-header { background: #fffffff2; border-color: #e8ecef; }
.brand-mark { background: linear-gradient(145deg, #25d4bc, #00a98f); color: #ffffff; box-shadow: 0 10px 28px #00bfa52c; }
.brand h1 { color: #20252b; }
.brand-caption { color: #7a858e; }
.brand-caption i { background: #00bfa5; }
.support-link { background: #ffffff; border-color: #e2e7ea; color: #2b3339; }
.support-link:hover { background: #effbf9; border-color: #7cddcf; }

.feature-main { background: radial-gradient(circle at 75% 32%, #71f0dc 0 3%, transparent 3.5%), radial-gradient(circle at 73% 33%, #00c9aa59 0 15%, transparent 36%), linear-gradient(135deg, #17272c 4%, #164a4b 54%, #00a98f 150%); box-shadow: 0 24px 65px #0b4a4428; }
.feature-main::before { background: linear-gradient(145deg, #75ebd8, #00b99d 58%, #14383c 59%); box-shadow: inset 20px 18px 60px #fff3, 0 22px 80px #06181772; }
.feature-main::after { background: linear-gradient(90deg, #14282d 5%, #14282dd0 42%, transparent 74%), linear-gradient(0deg, #0a2125dd, transparent 55%); }
.feature-kicker { color: #7df1df; }
.feature-status i { background: #48e4c9; box-shadow: 0 0 0 5px #48e4c925; }
.feature-action { background: #00bfa5; border-color: #00bfa5; color: #092d2a; }
.feature-action:hover { background: #43ddc5; }
.feature-mini-space { background: radial-gradient(circle at 82% 18%, #4cdcc7, transparent 29%), linear-gradient(135deg, #33494f, #17373c 72%); }
.feature-mini-fantasy { background: radial-gradient(circle at 78% 20%, #74efd980, transparent 28%), linear-gradient(135deg, #21766f, #123c3a 74%); }
.feature-mini-label { color: #8af0e1; }
.feature-stage a:hover { box-shadow: 0 25px 64px #0b4a4435; }

.notice { border-color: #cdeee8; background: linear-gradient(115deg, #edfbf8, #ffffff); }
.notice::before { background: #00bfa5; }
.notice .eyebrow, .step-number { color: #008f7c; }
.notice-list { border-color: #d7efeb; }
.notice-list li { border-color: #d7efeb; color: #334047; }
.notice-symbol { color: #00a990; }
.bookmark-button { border-color: #95ddcf; color: #007e6e; background: #ffffff; }
.bookmark-button:hover { background: #dff8f3; }

.accent, .detail-category, .panel-label { color: #00a990; }
.search-field { background: #ffffff; border-color: #dfe5e8; }
.search-field:focus-within { border-color: #00bfa5; box-shadow: 0 0 0 4px #00bfa51c; }
.search-field kbd { border-color: #dfe5e8; background: #f4f7f8; }
.category-filters button:hover { color: #008f7c; background: #e9f9f6; }
.category-filters button[aria-pressed="true"],
.category-filters button.version-filter[aria-pressed="true"] { background: #00bfa5; border-color: #00bfa5; color: #ffffff; box-shadow: 0 7px 18px #00bfa52b; }
.category-filters button.version-filter { border-color: #b9e9e1; color: #008675; background: #f2fcfa; }
.game-card { border-color: #e5eaed; box-shadow: 0 8px 28px #2030390a; }
.game-card:hover { border-color: #7bdacb; box-shadow: 0 18px 46px #16443e1b; }
.cover-category.version-public { background: #00a98fe8; border-color: #88ebda; }
.cover-category.version-beta { background: #42545be8; border-color: #a8b8bd; color: #ffffff; }
.game-card:hover .card-arrow { color: #ffffff; border-color: #00bfa5; background: #00bfa5; }
.card-arrow { border-color: #d9e1e4; color: #64717a; }
.group-count { border-color: #dfe6e8; background: #f7f9fa; }
.catalog-end span { background: #dfe6e8; }
.button-primary { background: #00bfa5; color: #ffffff; }
.button-primary:hover { background: #00a990; }
.button-secondary { color: #008675; border-color: #9ddfd4; background: #edfaf8; }
.button-secondary:hover { background: #dff6f2; }
.site-footer a:hover { color: #00a990; }

/* Final handheld density overrides. */
@media (max-width: 760px) {
  .notice { margin: 14px 0 24px; padding: 15px 16px; }
  .notice-heading { margin-bottom: 9px; }
  .notice-list { gap: 0; }
  .notice-list li { min-height: 44px; padding: 7px 2px; gap: 9px; font-size: 13px; line-height: 1.45; }
  .bookmark-button { min-height: 44px; margin-top: 10px; padding: 8px 14px; }

  .catalog-heading { gap: 12px; margin-bottom: 10px; }
  .catalog-title { width: 100%; }
  .catalog-title .eyebrow { margin-bottom: 5px; font-size: 8px; letter-spacing: 1.4px; }
  .catalog-title > div { flex-direction: row; align-items: baseline; gap: 8px; }
  .catalog-title h2 { font-size: 22px; line-height: 1.25; }
  .total-count { padding-left: 8px; font-size: 11px; white-space: nowrap; }
  .search-field { height: 44px; padding-inline: 14px; }
  .search-field input { font-size: 15px; }

  .catalog-toolbar { padding: 12px 0 14px; }
  .filter-rows { gap: 10px; }
  .filter-row { gap: 5px; }
  .filter-label { min-height: 0; font-size: 11px; line-height: 1.2; }
  .version-filters { min-height: 44px; }
  .version-filters button,
  .glass-radio-group button.version-filter { min-height: 44px; padding: 6px 4px; font-size: 13px; }
  .category-filters:not(.version-filters) {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    gap: 4px;
    padding: 4px;
    border: 1px solid #d9eeea;
    border-radius: 14px;
    background: #f6fbfa;
  }
  .category-filters:not(.version-filters) button {
    min-width: 0;
    min-height: 44px;
    justify-content: center;
    padding: 6px 2px;
    border-radius: 10px;
    font-size: 13px;
    white-space: nowrap;
  }
  .catalog-version-note { margin: 0 0 14px; font-size: 11px; line-height: 1.5; }
}

@media (max-width: 390px) {
  .notice { padding: 14px; }
  .catalog-title h2 { font-size: 21px; }
  .category-filters:not(.version-filters) button { font-size: 12px; }
}

/* Mobile-first catalog density for handheld gaming visitors. */
@media (max-width: 760px) {
  .catalog-heading {
    gap: 12px;
    margin-bottom: 10px;
  }
  .catalog-title { width: 100%; }
  .catalog-title .eyebrow {
    margin-bottom: 5px;
    font-size: 8px;
    letter-spacing: 1.4px;
  }
  .catalog-title > div {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
  }
  .catalog-title h2 {
    font-size: 22px;
    line-height: 1.25;
  }
  .total-count {
    padding-left: 8px;
    font-size: 11px;
    white-space: nowrap;
  }
  .search-field {
    height: 44px;
    padding-inline: 14px;
  }
  .search-field input { font-size: 15px; }
  .catalog-toolbar { padding: 12px 0 14px; }
  .filter-rows { gap: 10px; }
  .filter-row { gap: 5px; }
  .filter-label {
    min-height: 0;
    font-size: 11px;
    line-height: 1.2;
  }
  .version-filters { min-height: 44px; }
  .version-filters button,
  .glass-radio-group button.version-filter {
    min-height: 44px;
    padding: 6px 4px;
    font-size: 13px;
  }
  .category-filters:not(.version-filters) {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    gap: 4px;
    padding: 4px;
    border: 1px solid #d9eeea;
    border-radius: 14px;
    background: #f6fbfa;
  }
  .category-filters:not(.version-filters) button {
    min-width: 0;
    min-height: 44px;
    justify-content: center;
    padding: 6px 2px;
    border-radius: 10px;
    font-size: 13px;
    white-space: nowrap;
  }
  .catalog-version-note {
    margin: 0 0 14px;
    font-size: 11px;
    line-height: 1.5;
  }
}

@media (max-width: 390px) {
  .catalog-title h2 { font-size: 21px; }
  .category-filters:not(.version-filters) button { font-size: 12px; }
}

/* Compact mobile notice: preserve readable text and a 44px touch target. */
@media (max-width: 760px) {
  .notice {
    margin: 14px 0 28px;
    padding: 15px 16px;
    border-radius: 16px;
  }
  .notice::before { top: 15px; bottom: 15px; }
  .notice-heading { margin-bottom: 9px; gap: 10px; }
  .notice-heading > div { gap: 9px; }
  .notice-heading h2 { font-size: 16px; }
  .notice-heading .eyebrow { font-size: 7px; letter-spacing: 1px; }
  .notice-symbol svg { width: 19px; height: 19px; }
  .notice-list { gap: 0; }
  .notice-list li {
    min-height: 44px;
    padding: 7px 2px;
    gap: 9px;
    font-size: 13px;
    line-height: 1.45;
  }
  .step-number { flex: 0 0 22px; font-size: 10px; }
  .bookmark-button {
    min-height: 44px;
    margin: 10px 0 0;
    padding: 8px 14px;
  }
}

@media (max-width: 390px) {
  .notice { padding: 14px; }
}

/* Smooth glass selectors: catalog and game details */
.glass-radio-group::before { will-change: transform; transition: transform .28s cubic-bezier(.22, 1, .36, 1), box-shadow .22s ease; }
.glass-detail-tabs {
  position: relative;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 4px;
  overflow: hidden;
  isolation: isolate;
  border-color: #d9eeea;
  border-radius: 16px;
  background: rgba(247, 250, 250, .88);
  backdrop-filter: blur(12px);
  box-shadow: inset 1px 1px 4px #ffffff, inset -1px -1px 6px #16443e0d, 0 5px 16px #16443e0d;
}
.glass-detail-tabs::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / 4);
  border-radius: 12px;
  background: linear-gradient(135deg, #dff8f3, #c9f3ec);
  border: 1px solid #8edfd3;
  box-shadow: 0 5px 16px #00bfa51c, inset 0 0 10px #ffffffa8;
  transform: translateX(0%);
  will-change: transform;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1), box-shadow .22s ease;
}
.glass-detail-tabs[data-active-index="1"]::before { transform: translateX(100%); }
.glass-detail-tabs[data-active-index="2"]::before { transform: translateX(200%); }
.glass-detail-tabs[data-active-index="3"]::before { transform: translateX(300%); }
.glass-detail-tabs button { position: relative; z-index: 1; border-color: transparent; background: transparent; }
.glass-detail-tabs button:hover { color: #007e6e; background: transparent; }
.glass-detail-tabs button[aria-selected="true"] { color: #007e6e; background: transparent; border-color: transparent; box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .glass-radio-group::before, .glass-detail-tabs::before { transition-duration: .01ms; }
}

/* Unified TapTap interaction states */
a:active, button:active { transform: scale(.98); }
.support-link > [data-icon], .breadcrumbs a:hover, .empty-state > [data-icon] { color: #00a990; }
.support-link:hover { color: #007e6e; background: #effbf9; border-color: #7cddcf; }
.bookmark-button:hover { color: #007e6e; background: #dff8f3; border-color: #72d3c4; }
.detail-tabs:not(.glass-detail-tabs) button:hover { color: #007e6e; background: #eaf9f6; }
.detail-tabs:not(.glass-detail-tabs) button[aria-selected="true"] { color: #007e6e; background: #dff8f3; border-color: #72d3c4; box-shadow: 0 6px 16px #00bfa51c; }
.panel-steps li::before { color: #008675; border-color: #8edfd3; background: #f2fcfa; }
.info-dialog { border-color: #9ddfd4; }
.dialog-icon { color: #008675; border-color: #8edfd3; background: #e5f9f5; }
.dialog-close:hover { color: #007e6e; background: #eaf9f6; }
.resource-item a:hover { box-shadow: 0 8px 20px #00bfa52b; }
.card-arrow, .detail-tabs button, .bookmark-button, .support-link { transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; }

/* Clearer TapTap-style typography */
:root {
  --text: #101820;
  --muted: #46515b;
  --quiet: #66727c;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
}
body { color: #101820; font-weight: 400; }
.brand h1, .catalog-title h2, .version-section-heading h3, .card-title-line h4,
.detail-intro h2, .panel-main h3, .empty-state h2, .empty-state h3 { color: #101820; font-weight: 750; }
.brand h1 { letter-spacing: .035em; }
.feature-copy strong, .feature-mini strong { font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei UI", sans-serif; font-weight: 800; }
.notice h2 { color: #172129; font-weight: 750; }
.notice-list li, .card-genre, .card-subtitle, .card-resources,
.catalog-version-note, .filter-label, .panel-description,
.panel-main p:not(.panel-label):not(.panel-description), .panel-steps li { color: #3f4b55; }
.category-filters button, .detail-tabs button, .breadcrumbs, .total-count { color: #46515b; font-weight: 500; }
.search-field input { color: #101820; font-weight: 500; }
.search-field input::placeholder { color: #66727c; }
.eyebrow, .feature-kicker, .feature-mini-label, .panel-label { font-weight: 700; }
.button, .bookmark-button { font-weight: 650; }

/* Glass sliding selector adapted from the supplied Uiverse pattern */
.glass-radio-group {
  --glass-bg: rgba(255, 255, 255, .72);
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: fit-content;
  padding: 4px;
  gap: 0;
  overflow: hidden;
  border: 1px solid #d9eeea;
  border-radius: 16px;
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  box-shadow: inset 1px 1px 4px #ffffffcc, inset -1px -1px 6px #16443e12, 0 5px 16px #16443e12;
  isolation: isolate;
}
.glass-radio-group::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / 3);
  border-radius: 12px;
  background: linear-gradient(135deg, #4be0c8, #00bfa5);
  box-shadow: 0 5px 18px #00bfa548, inset 0 0 10px #a5fff160;
  transform: translateX(0%);
  will-change: transform;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1), background-color .22s ease, box-shadow .22s ease;
}
.glass-radio-group[data-active-index="1"]::before { transform: translateX(100%); }
.glass-radio-group[data-active-index="2"]::before { transform: translateX(200%); }
.glass-radio-group button.version-filter {
  position: relative;
  z-index: 1;
  min-width: 116px;
  min-height: 46px;
  padding: 8px 15px;
  border: 0;
  border-radius: 12px;
  color: #40505a;
  background: transparent;
  box-shadow: none;
  transition: color .25s ease, transform .2s ease;
}
.glass-radio-group button.version-filter:hover { color: #007e6e; background: transparent; }
.glass-radio-group button.version-filter[aria-pressed="true"] { color: #ffffff; background: transparent; border-color: transparent; box-shadow: none; }

/* Final motion overrides: keep the glass gliders crisp and free of overshoot. */
.glass-radio-group::before,
.glass-detail-tabs::before {
  will-change: transform;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1), box-shadow .22s ease;
}
.glass-detail-tabs button:hover,
.glass-detail-tabs button[aria-selected="true"] {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  .glass-radio-group::before,
  .glass-detail-tabs::before { transition-duration: .01ms; }
}
.glass-radio-group button.version-filter[aria-pressed="true"] span { color: #e8fffb; opacity: .92; }
@media (max-width: 760px) {
  .glass-radio-group { width: 100%; }
  .glass-radio-group button.version-filter { min-width: 0; padding-inline: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .glass-radio-group::before { transition-duration: .01ms; }
}
.detail-tabs button[aria-selected="true"] { background: #e5f9f5; border-color: #8edfd3; color: #008675; }
.detail-tabs button[aria-selected="true"] { background: #e5f9f5; border-color: #8edfd3; color: #008675; }
@media (max-width: 390px) {
  .header-inner, main, .site-footer { width: calc(100% - 28px); }
  .brand h1 { font-size: 18px; }
  .brand-caption { letter-spacing: .3px; font-size: 7px; }
  .brand-mark { width: 31px; height: 37px; }
  .header-inner { min-height: 94px; }
  .game-grid { gap: 13px 10px; }
  .card-title-line h4 { font-size: 13px; }
  .card-body { padding: 12px 10px 10px; }
  .card-arrow { display: none; }
  .card-resources i { display: none; }
  .card-subtitle { min-height: 32px; }
  .notice { padding: 18px; }
  .notice-heading > div { gap: 10px; }
  .total-count { padding-left: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .game-card:hover, .game-card:hover img { transform: none; }
}

/* Light catalog theme: high contrast surfaces keep the game artwork prominent. */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-raised: #f7f9fb;
  --text: #151c28;
  --muted: #485363;
  --quiet: #667181;
  --gold: #00a990;
  --gold-dim: #fff3df;
  --line: #dfe4e9;
}
body { background: #ffffff; color: var(--text); }
.site-header { background: #ffffff; }
.brand-mark { color: #ffffff; background: var(--gold); }
.brand-caption { color: var(--muted); }
.support-link { border-color: #d8dee5; background: #f7f9fb; color: var(--text); }
.support-link > [data-icon] { color: #1d4f91; }
.support-link:hover { background: #eef4fb; border-color: #9db8d8; }
.notice { border-color: #cdeee8; background: linear-gradient(115deg, #f2fcfa, #fffdf9); box-shadow: 0 8px 24px #7d5e2412; }
.notice .eyebrow { color: #00a990; }
.notice-list { border-color: #d7efeb; }
.notice-list li { color: #303b49; font-size: 14px; }
.step-number { color: #00a990; }
.bookmark-button { border-color: #9ddfd4; color: #008675; background: #f2fcfa; }
.bookmark-button:hover { background: #e1f7f3; }
.accent, .detail-category, .panel-label { color: #00a990; }
.total-count { border-color: var(--line); color: var(--muted); font-size: 13px; font-weight: 600; }
.catalog-title h2 { font-weight: 700; }
.catalog-version-note { margin: 0 0 24px; color: var(--muted); font-size: 13px; }
.catalog-groups { display: grid; gap: 42px; }
.version-section-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.version-section-heading h3 { font-size: 23px; margin: 0; color: var(--text); }
.group-count { padding: 2px 10px; border: 1px solid var(--line); border-radius: 20px; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.game-card { display: flex; flex-direction: column; }
.card-body { display: flex; flex-direction: column; flex: 1; }
.card-resources { margin-top: auto; }
.card-title-line { align-items: flex-start; }
.card-title-line h4 { overflow-wrap: anywhere; }
.catalog-title > div { flex-wrap: wrap; gap: 10px 17px; }
.search-field { border-color: #cfd7df; background: #f8fafc; color: var(--quiet); }
.search-field:focus-within { border-color: #00a990; box-shadow: 0 0 0 3px #00a9901c; }
.search-field input { color: var(--text); }
.search-field input::placeholder { color: #667181; }
.search-field kbd { border-color: #cbd4de; color: var(--muted); }
.catalog-toolbar { border-color: var(--line); }
.filter-label { color: var(--muted); }
.category-filters button { color: #485363; }
.category-filters button:hover { color: var(--text); background: #eef2f6; }
.category-filters button[aria-pressed="true"] { background: #00a990; color: #ffffff; }
.category-filters button.version-filter { border-color: #9ddfd4; color: #008675; background: #f2fcfa; }
.category-filters button.version-filter[aria-pressed="true"] { background: #00a990; border-color: #00a990; color: #ffffff; }
.version-example-note { color: #485363; font-size: 13px; line-height: 1.8; }
.game-card { background: #ffffff; border-color: #dfe4e9; box-shadow: 0 6px 18px #26384a0b; }
.game-card:hover { border-color: #7bdacb; box-shadow: 0 12px 28px #26384a1a; }
.cover-wrap { background: #e8edf2; aspect-ratio: 4 / 5; }
.cover-category { color: #ffffff; background: #17304be8; border-color: #ffffff70; font-size: 14px; padding: 6px 11px; }
.cover-category.version-public { color: #eafff1; background: #14633be8; border-color: #76c69a; }
.cover-category.version-beta { color: #fff7e8; background: #855010ed; border-color: #e5b86f; }
.cover-category.version-pending { color: #f4f7fa; background: #405061ed; border-color: #a9b6c4; }
.card-title-line h4 { color: #151c28; font-size: 18px; font-weight: 700; }
.card-genre { color: #485363; font-size: 13px; font-weight: 600; }
.card-arrow { border-color: #cbd4de; color: #485363; }
.game-card:hover .card-arrow { color: #ffffff; border-color: #00a990; background: #00a990; }
.card-subtitle { color: #485363; font-size: 12px; }
.card-resources { border-color: var(--line); color: #485363; }
.card-resources i { color: #a1aab5; }
.catalog-end span { background: var(--line); }
.catalog-end p { color: #667181; }
.site-footer { border-color: var(--line); color: #667181; }
.footer-wordmark { color: #485363; }
.site-footer a:hover { color: #00a990; }
.empty-state { border-color: #cbd4de; color: #485363; }
.empty-state h3, .empty-state h2 { color: #151c28; }
.button-primary { color: #ffffff; background: #00a990; }
.button-primary:hover { background: #007e6e; }
.button-secondary { color: #008675; border-color: #9ddfd4; background: #f2fcfa; }
.button-secondary:hover { background: #e1f7f3; }
.button[disabled] { color: #7b8794; background: #edf1f4; border-color: #d5dde5; }
.detail-hero { border-color: #dfe4e9; background: linear-gradient(120deg, #f7f9fb, #ffffff); box-shadow: 0 8px 24px #26384a0d; }
.detail-tags span { color: #485363; border-color: #cbd4de; background: #f7f9fb; }
.detail-caption { color: #667181; }
.detail-tabs { background: #f3f6f8; border-color: #dfe4e9; }
.detail-tabs button { color: #485363; }
.detail-tabs button:hover { background: #e8eef4; color: #151c28; }
.detail-tabs button[aria-selected="true"] { background: #e5f9f5; border-color: #9ddfd4; color: #008675; }
.tab-panel { border-color: #dfe4e9; background: #ffffff; box-shadow: 0 8px 24px #26384a0a; }
.panel-description { color: #344253; }
.panel-main p:not(.panel-label):not(.panel-description) { color: #485363; }
.panel-steps li { color: #344253; }
.panel-steps li::before { border-color: #9ddfd4; color: #00a990; }
.panel-side { border-color: #dfe4e9; }
.panel-side h4 { color: #485363; }
.resource-item small { color: #667181; }
.event-plan-grid { grid-template-columns: minmax(0, 1fr); }
.event-plan-main { min-width: 0; }
.event-plan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.event-plan-card { padding: 18px; border: 1px solid #cdeee8; border-radius: 14px; background: linear-gradient(135deg, #f2fcfa, #ffffff); }
.event-plan-card:first-child, .event-plan-card:nth-child(2), .event-plan-card:last-child { grid-column: 1 / -1; }
.event-plan-card h4 { margin: 0 0 11px; color: #007e6e; font-size: 15px; font-weight: 750; }
.event-plan-card ul { display: grid; gap: 8px; margin: 0; padding-left: 19px; color: #344253; font-size: 14px; line-height: 1.65; }
.event-plan-card li::marker { color: #00a990; }
@media (max-width: 760px) {
  .event-plan { grid-template-columns: 1fr; gap: 10px; margin-top: 16px; }
  .event-plan-card, .event-plan-card:first-child, .event-plan-card:nth-child(2), .event-plan-card:last-child { grid-column: auto; padding: 15px; }
  .event-plan-card h4 { font-size: 14px; }
  .event-plan-card ul { font-size: 13px; line-height: 1.58; }
}
.info-dialog { border-color: #9ddfd4; background: #ffffff; color: #151c28; box-shadow: 0 25px 90px #26384a33; }
.info-dialog::backdrop { background: #15223280; }
.dialog-close { color: #667181; }
.dialog-close:hover { color: #151c28; background: #eef2f6; }
.dialog-icon { border-color: #9ddfd4; color: #00a990; background: #e5f9f5; }
#dialogText { color: #485363; }
@media (max-width: 760px) {
  .cover-category { font-size: 13px; padding: 5px 9px; }
  .card-title-line h4 { font-size: 16px; }
  .version-section-heading h3 { font-size: 21px; }
  .catalog-groups { gap: 30px; }
  .catalog-title > div { align-items: flex-start; flex-direction: column; gap: 8px; }
  .total-count { border-left: 0; padding-left: 0; }
  .version-filters button { padding: 10px 6px; gap: 6px; white-space: nowrap; }
}

/* Final TapTap color overrides */
.brand-mark { background: linear-gradient(145deg, #25d4bc, #00a98f); color: #fff; box-shadow: 0 10px 28px #00bfa52c; }
.brand-caption { color: #7a858e; }
.brand-caption i { background: #00bfa5; }
.support-link:hover { background: #effbf9; border-color: #7cddcf; }
.notice { border-color: #cdeee8; background: linear-gradient(115deg, #edfbf8, #fff); }
.notice::before { background: #00bfa5; }
.notice .eyebrow, .step-number, .notice-symbol { color: #008f7c; }
.notice-list, .notice-list li { border-color: #d7efeb; }
.notice-list li > span:not(.step-number) { color: #163f3a; font-weight: 600; }
.bookmark-button { border-color: #95ddcf; color: #007e6e; background: #fff; }
.bookmark-button:hover { background: #dff8f3; }
.accent, .detail-category, .panel-label { color: #00a990; }
.search-field { background: #fff; border-color: #dfe5e8; }
.search-field:focus-within { border-color: #00bfa5; box-shadow: 0 0 0 4px #00bfa51c; }
.category-filters button:hover { color: #008f7c; background: #e9f9f6; }
.category-filters button[aria-pressed="true"], .category-filters button.version-filter[aria-pressed="true"] { background: #00bfa5; border-color: #00bfa5; color: #fff; box-shadow: 0 7px 18px #00bfa52b; }
.category-filters button.version-filter { border-color: #b9e9e1; color: #008675; background: #f2fcfa; }
.game-card { border-color: #e5eaed; box-shadow: 0 8px 28px #2030390a; }
.game-card:hover { border-color: #7bdacb; box-shadow: 0 18px 46px #16443e1b; }
.cover-category.version-public { background: #00a98fe8; border-color: #88ebda; }
.cover-category.version-beta { background: #42545be8; border-color: #a8b8bd; color: #fff; }

/* Compact status badges keep the artwork as the primary focus. */
.cover-category { font-size: 11px; line-height: 1.2; padding: 4px 8px; }
.cover-category.version-public,
.cover-category.version-beta,
.cover-category.version-pending { color: #ffffff; background: #111111e8; border-color: #ffffff40; }
@media (max-width: 760px) {
  .cover-category { font-size: 10px; padding: 3px 7px; }
}
.game-card:hover .card-arrow { color: #fff; border-color: #00bfa5; background: #00bfa5; }
.button-primary { background: #00bfa5; color: #fff; }
.button-primary:hover { background: #00a990; }
.button-secondary { color: #008675; border-color: #9ddfd4; background: #edfaf8; }
.button-secondary:hover { background: #dff6f2; }
.site-footer a:hover { color: #00a990; }