/* PlayPick — night-mode catalogue for Android / iOS / PC
   Palette: near-black slate, neon mint accent, violet secondary. */

:root {
  --ink: #e9eff7;
  --ink-2: #b4c1d2;
  --muted: #7c8a9e;
  --paper: #080b11;
  --paper-2: #0c1118;
  --card: #111823;
  --card-2: #161f2c;
  --line: #1d2735;
  --line-2: #2b3849;
  --accent: #b6a0ff;
  --accent-2: #d8ccff;
  --accent-ink: #e5dcff;
  --violet: #8b5cf6;
  --gold: #ffc247;
  --dark: #05080d;
  --dark-2: #0b1119;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow-s: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 16px rgba(0, 0, 0, .35);
  --shadow-m: 0 6px 14px rgba(0, 0, 0, .45), 0 22px 46px -18px rgba(0, 0, 0, .7);
  --shadow-l: 0 34px 80px -30px rgba(0, 0, 0, .85);
  --glow: 0 0 0 1px rgba(182, 160, 255, .28), 0 12px 34px -14px rgba(182, 160, 255, .45);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Songti SC", "Noto Serif JP", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Hiragino Sans", "Noto Sans JP", "Microsoft YaHei", sans-serif;
  --wrap: 1280px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Ambient light: two soft neon pools over a faint grid, fixed so it never
   scrolls with the content. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(182, 160, 255, .13), transparent 62%),
    radial-gradient(760px 460px at 92% 4%, rgba(139, 92, 246, .15), transparent 60%),
    radial-gradient(1100px 700px at 50% 108%, rgba(182, 160, 255, .07), transparent 65%),
    linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px) 0 0 / 100% 46px,
    linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px) 0 0 / 46px 100%;
}

body > * { position: relative; z-index: 1; }

::selection { background: rgba(182, 160, 255, .3); color: #fff; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #070a0f; }
::-webkit-scrollbar-thumb { background: #233041; border-radius: 99px; border: 2px solid #070a0f; }
::-webkit-scrollbar-thumb:hover { background: #33465e; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; letter-spacing: -.015em; margin: 0; line-height: 1.15; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.narrow { max-width: 780px; }
.center { text-align: center; }
.muted { color: var(--muted); font-size: 14px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 999; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 8px; }

/* ------------------------------------------------------------------ header */

.site-head {
  position: sticky; top: 0; z-index: 60;
  background: rgba(8, 11, 17, .72);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.site-head.is-stuck { border-bottom-color: var(--line); background: rgba(8, 11, 17, .92); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .9); }

.head-inner { display: flex; align-items: center; gap: 22px; height: 70px; }

.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand-mark { display: flex; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-text b { font-size: 17px; letter-spacing: -.02em; }
.brand-text i { font-style: normal; font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 268px; letter-spacing: .01em; }

.nav { display: flex; align-items: center; gap: 2px; }
.nav-link {
  padding: 8px 13px; border-radius: 999px; font-size: 14.5px; font-weight: 500;
  color: var(--ink-2); transition: background .16s, color .16s;
}
.nav-link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.nav-link.is-on { background: rgba(182, 160, 255, .14); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(182, 160, 255, .3); }

.head-search {
  display: flex; align-items: center; gap: 8px; margin-left: auto;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line);
  border-radius: 999px; padding: 0 14px; height: 38px; width: 230px;
  transition: border-color .16s, box-shadow .16s, width .2s;
}
.head-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(14, 143, 110, .12); width: 270px; }
.head-search svg { color: var(--muted); flex: none; }
.head-search input { border: 0; background: none; outline: none; width: 100%; font-size: 13.5px; color: var(--ink); }
.head-search input::placeholder { color: #68758a; }

.head-tools { display: flex; align-items: center; gap: 8px; }

/* language */
.lang { position: relative; }
.lang-btn {
  display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 11px;
  background: transparent; border: 1px solid var(--line); border-radius: 999px;
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-2);
  transition: border-color .16s, background .16s;
}
.lang-btn:hover { background: rgba(255, 255, 255, .07); border-color: var(--line-2); }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 208px;
  background: var(--card-2); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-m); padding: 8px; opacity: 0; visibility: hidden;
  transform: translateY(-6px); transition: .18s ease; z-index: 70;
}
.lang.is-open .lang-menu { opacity: 1; visibility: visible; transform: none; }
.lang-title { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); padding: 4px 10px 6px; }
.lang-menu a {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; font-size: 14px;
}
.lang-menu a:hover { background: var(--paper-2); }
.lang-menu a.is-on { background: rgba(182, 160, 255, .12); color: var(--accent); font-weight: 600; }
.ls-code { font-size: 11px; font-weight: 700; letter-spacing: .04em; width: 34px; color: var(--muted); }
.lang-menu a.is-on .ls-code { color: var(--accent); }
.ls-name { flex: 1; }
.lang-menu a svg { color: var(--accent); }

.menu-btn { display: none; width: 38px; height: 36px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, .05); cursor: pointer; padding: 0 10px; }
.menu-btn span { display: block; height: 1.6px; background: var(--ink); border-radius: 2px; margin: 4px 0; }

.mobile-nav { display: none; }

/* -------------------------------------------------------------------- hero */

.hero { position: relative; height: 620px; background: var(--dark); overflow: hidden; }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.slide.is-on { opacity: 1; pointer-events: auto; }

/* The banner art itself — landscape store artwork, filling the whole frame. */
.slide-photo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 38%;
  transform: scale(1.02); transition: transform 8s ease-out;
}
.slide.is-on .slide-photo { transform: scale(1.06); }
.slide-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 8, 13, .92) 0%, rgba(5, 8, 13, .62) 42%, rgba(5, 8, 13, .12) 72%),
    linear-gradient(0deg, rgba(5, 8, 13, .96) 0%, rgba(5, 8, 13, .35) 32%, rgba(5, 8, 13, .3) 100%);
}

.slide-inner {
  position: relative; height: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr);
  align-items: center; gap: 40px; padding-bottom: 132px;
}
.slide-copy { color: #f4f2ea; max-width: 640px; }
.slide-kicker {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: #b9e6d5;
}
.slide-kicker .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 0 4px rgba(20, 185, 138, .18); }
.slide-copy h2 { font-size: clamp(38px, 5.2vw, 62px); line-height: 1.02; letter-spacing: -.03em; margin-bottom: 16px; }
.slide-tag {
  font-size: 16px; line-height: 1.55; color: rgba(244, 242, 234, .78);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.slide-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 26px; }
.slide-meta span {
  font-size: 12.5px; padding: 5px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14); color: #f0ede4;
}
.slide-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.slide-poster { display: none; }

/* Thumbnail strip doubles as the slide selector. */
.hero-nav {
  position: absolute; left: 0; right: 0; bottom: 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  z-index: 5; pointer-events: none;
}
.hero-nav > * { pointer-events: auto; }
.hero-thumbs { display: flex; gap: 10px; overflow: hidden; }
.hero-thumb {
  display: flex; align-items: center; gap: 9px; padding: 5px 12px 5px 5px;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px;
  background: rgba(8, 12, 18, .55); backdrop-filter: blur(10px);
  cursor: pointer; max-width: 230px; transition: border-color .18s, background .18s;
}
.hero-thumb img { width: 46px; height: 26px; border-radius: 6px; object-fit: cover; flex: none; }
.hero-thumb span { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.hero-thumb b {
  font-size: 12.5px; font-weight: 600; color: #eef3f9; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.hero-thumb i { font-style: normal; font-size: 10.5px; color: rgba(233, 239, 247, .55); }
.hero-thumb:hover { border-color: rgba(182, 160, 255, .5); background: rgba(8, 12, 18, .75); }
.hero-thumb.is-on {
  border-color: var(--accent); background: rgba(182, 160, 255, .14);
  box-shadow: 0 0 0 1px rgba(182, 160, 255, .35);
}
.hero-thumb.is-on i { color: var(--accent); }
.hero-arrows { display: flex; gap: 8px; flex: none; }
.hero-arrows button {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); color: #f4f2ea;
  display: grid; place-items: center; transition: background .16s;
}
.hero-arrows button:hover { background: rgba(255, 255, 255, .22); }

/* ------------------------------------------------------------------- bands */

.band { padding: 64px 0; }
.band-tight { padding: 34px 0 64px; }
.band-alt { background: var(--paper-2); }
.band-stats { padding: 0; background: var(--paper); }
.band-dark { background: var(--dark); color: #f2efe6; }

/* ------------------------------------------------------- platform switcher */

.band-plat { padding: 30px 0 8px; }
.plat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.plat-tab {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--card-2), var(--card));
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.plat-tab:hover {
  transform: translateY(-3px); border-color: rgba(182, 160, 255, .45); box-shadow: var(--glow);
}
.plat-ico {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: grid; place-items: center;
}
.plat-android { background: linear-gradient(140deg, #1c4b32, #0d2a1c); color: #6ee7a8; }
.plat-ios { background: linear-gradient(140deg, #2a3350, #141a2c); color: #9db4ff; }
.plat-pc { background: linear-gradient(140deg, #452a52, #21132b); color: #d5a3ff; }
.plat-all { background: linear-gradient(140deg, #123c3c, #0a2222); color: #d8ccff; }
.plat-txt { display: flex; flex-direction: column; min-width: 0; }
.plat-txt b { font-size: 14.5px; font-weight: 650; letter-spacing: -.01em; }
.plat-txt i { font-style: normal; font-size: 12px; color: var(--muted); }

/* ------------------------------------------------------------------ chart */

.chart-list { display: flex; flex-direction: column; gap: 8px; }
.chart-row {
  display: grid; grid-template-columns: 38px 68px minmax(0, 1fr) auto;
  align-items: center; gap: 16px; padding: 12px 18px 12px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--card-2), var(--card));
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.chart-row:hover {
  transform: translateX(4px); border-color: rgba(182, 160, 255, .4); box-shadow: var(--glow);
}
.chart-no {
  font-family: var(--serif); font-size: 26px; color: #44526a; text-align: center; letter-spacing: -.03em;
}
.chart-row:nth-child(1) .chart-no { color: var(--gold); }
.chart-row:nth-child(2) .chart-no { color: #cfd8e5; }
.chart-row:nth-child(3) .chart-no { color: #c08457; }
.chart-art { width: 68px; height: 68px; border-radius: 12px; overflow: hidden; background: #131c28; flex: none; }
.chart-art img { width: 100%; height: 100%; object-fit: cover; }
.chart-main { display: flex; flex-direction: column; min-width: 0; }
.chart-main b { font-size: 16.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chart-main i {
  font-style: normal; font-size: 12.5px; color: var(--muted); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chart-stat { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.chart-stat b { font-size: 18px; font-weight: 700; color: var(--accent); line-height: 1.1; }
.chart-stat b i { font-style: normal; font-size: 11px; color: var(--gold); margin-left: 1px; }
.chart-stat em { font-style: normal; font-size: 12px; color: var(--muted); margin-top: 2px; }

.stat-row {
  display: flex; align-items: center; gap: 40px; flex-wrap: wrap;
  padding: 26px 0; border-bottom: 1px solid var(--line);
}
.stat { display: flex; align-items: baseline; gap: 8px; }
.stat b { font-family: var(--serif); font-size: 30px; letter-spacing: -.02em; }
.stat span { font-size: 13px; color: var(--muted); }
.stat-note {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--accent); background: rgba(182, 160, 255, .1);
  border: 1px solid rgba(182, 160, 255, .25); padding: 7px 13px; border-radius: 999px;
}

.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.sec-head h2 { font-size: clamp(25px, 3vw, 33px); letter-spacing: -.02em; }
.sec-head p { color: var(--muted); font-size: 14.5px; margin-top: 8px; max-width: 540px; }
.sec-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--accent); white-space: nowrap; padding-bottom: 2px; border-bottom: 1px solid rgba(182, 160, 255, .32); }
.sec-link:hover { border-bottom-color: var(--accent); }

.split { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: 48px; align-items: start; }

/* ------------------------------------------------------------------- cards */

.grid { display: grid; gap: 22px; }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card { display: flex; flex-direction: column; gap: 12px; }
.card-art {
  position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius);
  overflow: hidden; background: #131c28; box-shadow: var(--shadow-s);
  transition: transform .28s cubic-bezier(.2, .8, .3, 1), box-shadow .28s;
}
.card:hover .card-art { transform: translateY(-4px); box-shadow: var(--glow); }
.card-img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card:hover .card-img { transform: scale(1.045); }

/* Mobile entries ship a square icon, not portrait key art. Show it padded on a
   tinted plate instead of cropping a store screenshot to 4:5. */
.card-art-icon {
  display: grid; place-items: center;
  background: #0a0f16;
}
.card-art-icon .card-img {
  width: 54%; height: auto; aspect-ratio: 1;
  border-radius: 24px; object-fit: cover;
  box-shadow: 0 22px 44px -16px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .12);
  position: relative; z-index: 2;
}
.card-art-icon:hover .card-img { transform: scale(1.04); }
.cover-glow {
  position: absolute; inset: -25%; z-index: 0;
  background-size: cover; background-position: center;
  filter: blur(40px) saturate(1.5) brightness(.34); opacity: .8;
}
/* Keep the plate dark even when the icon itself is white (Roblox, Fortnite). */
.card-art-icon::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(70% 60% at 50% 45%, rgba(5, 8, 13, .05), rgba(5, 8, 13, .72) 100%),
    linear-gradient(180deg, rgba(5, 8, 13, .3), rgba(5, 8, 13, .1) 40%, rgba(5, 8, 13, .85));
}
.card-art-icon .card-sheen {
  background: linear-gradient(180deg, rgba(5, 8, 13, .12) 0%, rgba(5, 8, 13, 0) 45%, rgba(5, 8, 13, .78) 100%);
  z-index: 3;
}

.card-badge {
  position: absolute; left: 10px; top: 10px; z-index: 4;
  font-size: 11px; font-weight: 600; letter-spacing: .01em;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(5, 8, 13, .72); color: #e9eff7;
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(6px);
}
.card-plat {
  position: absolute; right: 10px; bottom: 10px; z-index: 4;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 6px;
}
.card-plat.plat-pc { background: rgba(139, 92, 246, .22); color: #d5b8ff; border: 1px solid rgba(139, 92, 246, .45); }
.card-plat.plat-ios { background: rgba(99, 132, 255, .18); color: #a8bcff; border: 1px solid rgba(99, 132, 255, .4); }
.card-plat.plat-android { background: rgba(182, 160, 255, .16); color: #d8ccff; border: 1px solid rgba(182, 160, 255, .38); }
.card-sheen {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12, 21, 18, .18) 0%, rgba(12, 21, 18, 0) 38%, rgba(12, 21, 18, .62) 100%);
}
.card-icon {
  position: absolute; left: 12px; bottom: 12px; width: 40px; height: 40px; border-radius: 11px;
  overflow: hidden; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .6), 0 0 0 2px rgba(255, 255, 255, .18);
}
.card-icon-img { width: 100%; height: 100%; object-fit: cover; }
.rate {
  position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 3px;
  background: rgba(12, 21, 18, .62); color: #f7f5ef; backdrop-filter: blur(6px);
  font-size: 11.5px; font-weight: 600; padding: 4px 8px; border-radius: 999px;
}
.rate svg { color: var(--gold); }

.card-body h3 { font-size: 16px; font-family: var(--sans); font-weight: 650; letter-spacing: -.01em; line-height: 1.3; }
.card-meta { font-size: 12px; color: var(--muted); margin-top: 3px; }
.card-tag {
  font-size: 12.5px; color: var(--muted); margin-top: 6px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ------------------------------------------------------------------ panels */

.panel { background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-s); }
.panel + .panel { margin-top: 20px; }
.panel h3 { font-size: 17px; margin-bottom: 4px; }
.panel-sub { font-size: 12.5px; color: var(--muted); margin-bottom: 14px; }
.panel-dark { background: linear-gradient(160deg, #0e1a24, #070b10); border-color: #1c2836; color: #e9eff7; }
.panel-dark h3 { font-size: 19px; margin-bottom: 14px; }
.panel-kicker { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }

.trend-list { display: flex; flex-direction: column; }
.trend { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.trend:first-child { border-top: 0; }
.trend:hover b { color: var(--accent-ink); }
.trend-no { font-family: var(--serif); font-size: 13px; color: #56657a; width: 18px; flex: none; }
.trend-icon { width: 34px; height: 34px; border-radius: 10px; overflow: hidden; flex: none; background: var(--paper-2); }
.trend-icon img { width: 100%; height: 100%; object-fit: cover; }
.trend-text { display: flex; flex-direction: column; min-width: 0; }
.trend-text b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trend-text i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.trend-rate { margin-left: auto; font-size: 12px; font-weight: 650; color: var(--accent); background: rgba(182, 160, 255, .12); padding: 2px 7px; border-radius: 6px; }

/* --------------------------------------------------------------- chips etc */

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--line-2); font-size: 13px; color: var(--ink-2); background: transparent;
  transition: background .16s, border-color .16s, color .16s;
}
.chip:hover { background: rgba(182, 160, 255, .12); border-color: var(--accent); color: var(--accent); }
.chip.is-on { background: var(--accent); border-color: var(--accent); color: #04140e; font-weight: 600; }
.chip .n { font-size: 11px; opacity: .6; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 600;
  border: 1px solid transparent; cursor: pointer; transition: transform .16s, background .16s, box-shadow .16s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: linear-gradient(180deg, #45f0b4, #17c98a); color: #04140e; box-shadow: 0 10px 24px -12px rgba(182, 160, 255, .75); }
.btn-primary:hover { background: linear-gradient(180deg, #5cf8c0, #1ddc98); }
.btn-outline { border-color: var(--line-2); color: var(--ink); background: transparent; }
.btn-outline:hover { background: rgba(255, 255, 255, .07); border-color: var(--accent); color: var(--accent); }
.btn-ghost { border-color: rgba(255, 255, 255, .28); color: #f4f2ea; background: rgba(255, 255, 255, .06); }
.btn-ghost:hover { background: rgba(255, 255, 255, .16); }
.btn-light { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .2); }
.btn-light:hover { background: rgba(255, 255, 255, .18); }
.btn-lg { height: 50px; padding: 0 24px; font-size: 15px; }

.link-btn {
  display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--accent-ink); padding: 0;
}

/* ------------------------------------------------------------- collections */

.col-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.col-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.col-card { background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-s); transition: transform .26s, box-shadow .26s; }
.col-card:hover { transform: translateY(-3px); box-shadow: var(--glow); }
.col-art { position: relative; height: 168px; background: linear-gradient(135deg, #102b3d, #2a1a4d); }
.col-art-i { position: absolute; border-radius: 12px; overflow: hidden; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .6); }
.col-art-i img { width: 100%; height: 100%; object-fit: cover; }
.col-art-0 { width: 78px; height: 138px; left: 22px; bottom: -18px; transform: rotate(-5deg); }
.col-art-1 { width: 86px; height: 152px; left: 96px; bottom: -10px; z-index: 2; }
.col-art-2 { width: 78px; height: 138px; left: 176px; bottom: -20px; transform: rotate(5deg); }
.col-body { padding: 40px 20px 20px; }
.col-body h3 { font-size: 18px; margin-bottom: 4px; }
.col-body p { font-size: 13px; color: var(--muted); }
.col-count { display: inline-block; margin-top: 12px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); }

/* ------------------------------------------------------------------ guides */

.guide-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.guide-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.guide-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-s); transition: transform .26s, box-shadow .26s; }
.guide-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-m); }
.guide-art { position: relative; height: 176px; overflow: hidden; background: #0d1420; }
.guide-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; transition: transform .5s ease; }
.guide-card:hover .guide-art img { transform: scale(1.05); }
.guide-art-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5, 8, 13, .1) 0%, rgba(5, 8, 13, .05) 40%, rgba(5, 8, 13, .85) 100%);
}
.guide-tag {
  position: absolute; left: 14px; top: 13px;
  font-size: 14px; font-weight: 700; letter-spacing: .01em;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(182, 160, 255, .16); color: var(--accent);
  border: 1px solid rgba(182, 160, 255, .4); backdrop-filter: blur(8px);
}
.guide-body { padding: 16px 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.guide-meta { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--muted); }
.guide-meta span { color: var(--accent); font-weight: 600; }
.guide-meta i { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.guide-body h3 { font-size: 17.5px; line-height: 1.28; }
.guide-card:hover h3 { color: var(--accent); }
.guide-body p { font-size: 13px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ------------------------------------------------------------- page header */

.page-head { padding: 34px 0 30px; background: linear-gradient(180deg, var(--paper) 0%, rgba(246, 244, 238, .4) 100%); border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: clamp(31px, 4.2vw, 46px); margin: 14px 0 12px; letter-spacing: -.03em; }
.lede { font-size: 16px; color: var(--muted); max-width: 640px; }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); }
.crumbs a:hover { color: var(--accent-ink); }
.crumbs span[aria-hidden] { opacity: .45; }
.crumbs .cur { color: var(--ink-2); font-weight: 500; }

.big-search { display: flex; gap: 8px; margin-top: 22px; max-width: 560px; }
.big-search input { flex: 1; height: 46px; border-radius: 999px; border: 1px solid var(--line-2); padding: 0 18px; font-size: 14.5px; background: #fff; outline: none; }
.big-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(14, 143, 110, .12); }
.big-search button { height: 46px; padding: 0 22px; border-radius: 999px; border: 0; background: var(--ink); color: #f7f5ef; font-size: 14px; font-weight: 600; cursor: pointer; }

.pager { display: flex; justify-content: center; gap: 6px; margin-top: 44px; }
.pager a { min-width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line-2); font-size: 14px; }
.pager a.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }

.empty { text-align: center; padding: 60px 20px; }
.empty p { color: var(--muted); margin-bottom: 18px; }

/* ------------------------------------------------------------------ detail */

.detail-hero {
  position: relative; z-index: 1; overflow: hidden;
  background: linear-gradient(180deg, rgba(12, 21, 18, .9) 0%, rgba(12, 21, 18, .84) 55%, var(--paper) 100%);
  color: #f4f2ea; padding: 28px 0 44px;
}
.detail-hero::before {
  content: ""; position: absolute; inset: -70px; z-index: 0;
  background-image: var(--art); background-size: cover; background-position: center 28%;
  filter: blur(56px) saturate(1.5) brightness(.5); transform: scale(1.14);
}
.detail-hero > .wrap { position: relative; z-index: 2; }
.detail-hero .crumbs { color: rgba(244, 242, 234, .6); }
.detail-hero .crumbs a:hover { color: #fff; }
.detail-hero .crumbs .cur { color: #f4f2ea; }

.detail-top { display: flex; gap: 26px; align-items: flex-start; margin-top: 22px; }
.dh-icon { width: 116px; height: 116px; border-radius: 26px; overflow: hidden; flex: none; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .14); }
.dh-icon img { width: 100%; height: 100%; object-fit: cover; }
.dh-copy { min-width: 0; }
.dh-copy h1 { font-size: clamp(30px, 4vw, 44px); letter-spacing: -.03em; }
.dh-dev { font-size: 13.5px; color: rgba(244, 242, 234, .68); margin-top: 6px; }
.dh-tag {
  font-size: 15px; color: rgba(244, 242, 234, .82); margin-top: 14px; max-width: 640px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dh-metas { display: flex; flex-wrap: wrap; gap: 26px; margin: 22px 0; }
.dh-metas > span { display: flex; flex-direction: column; gap: 2px; }
.dh-metas b { font-family: var(--serif); font-size: 21px; font-weight: 600; }
.dh-metas em { font-style: normal; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: rgba(244, 242, 234, .55); }
.dh-metas .hm-rate { flex-direction: row; align-items: baseline; gap: 5px; }
.dh-metas .hm-rate i { color: var(--gold); font-style: normal; font-size: 14px; }
.dh-metas .hm-rate em { margin-left: 4px; }
/* Metacritic badge — Steam has no star rating, so the score reads as a chip. */
.dh-metas .hm-mc { align-items: center; gap: 7px; }
.dh-metas .hm-mc b {
  font-size: 17px; line-height: 1; padding: 4px 9px; border-radius: 7px;
  background: rgba(255, 194, 71, .14); color: var(--gold);
  border: 1px solid rgba(255, 194, 71, .34);
}
.dh-metas .hm-mc em { color: rgba(255, 194, 71, .72); }
.dh-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.detail-hero .btn-outline { border-color: rgba(255, 255, 255, .3); color: #f4f2ea; }
.detail-hero .btn-outline:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .5); }

.detail-body { padding: 8px 0 70px; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: 48px; align-items: start; }

/* gallery */
.gallery { margin-bottom: 44px; }
.gallery-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.gallery-head h2 { font-size: 22px; }
.rail-wrap { position: relative; }
.gallery-rail {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 2px 12px; scrollbar-width: none;
}
.gallery-rail::-webkit-scrollbar { display: none; }
.shot {
  position: relative; flex: none; width: 194px; height: 345px; border-radius: 14px;
  overflow: hidden; border: 0; padding: 0; cursor: zoom-in; background: #141a17;
  scroll-snap-align: start; box-shadow: var(--shadow-s);
  transition: transform .22s, box-shadow .22s;
}
/* 商店截图画幅不一（19.5:9 / 16:9），contain 保证不下裁 */
.shot img { width: 100%; height: 100%; object-fit: contain; }
.shot:hover { transform: translateY(-3px); box-shadow: var(--shadow-m); }
.shot-zoom {
  position: absolute; right: 8px; bottom: 8px; width: 28px; height: 28px; border-radius: 8px;
  background: rgba(12, 21, 18, .62); color: #fff; display: grid; place-items: center;
  opacity: 0; transition: opacity .2s; backdrop-filter: blur(6px);
}
.shot:hover .shot-zoom { opacity: 1; }
.rail-btn {
  position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%;
  background: rgba(12, 21, 18, .72); color: #fff; border: 0; display: grid; place-items: center;
  cursor: pointer; z-index: 3; opacity: 0; transition: opacity .2s, background .2s; backdrop-filter: blur(6px);
}
.rail-wrap:hover .rail-btn { opacity: 1; }
.rail-btn:hover { background: var(--ink); }
.rail-btn[disabled] { opacity: 0 !important; pointer-events: none; }
.rail-prev { left: -10px; }
.rail-next { right: -10px; }

/* prose */
.prose-block { padding: 30px 0; border-top: 1px solid var(--line); }
.prose-block:first-of-type { border-top: 0; padding-top: 0; }
.prose-block h2 { font-size: 23px; margin-bottom: 16px; }
.prose-block p { font-size: 15px; color: var(--ink-2); margin-bottom: 14px; line-height: 1.7; }
.prose-block p.overview { font-size: 16.5px; color: var(--ink); border-left: 3px solid var(--accent); padding-left: 16px; }
.prose-block h3.about-sub {
  font-family: var(--sans); font-size: 12.5px; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; color: var(--accent);
  margin: 26px 0 6px;
}
.prose-block h3.about-sub + p { margin-top: 0; }
.prose-block p:last-child { margin-bottom: 0; }

.feature-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
.feature-list li { display: flex; gap: 10px; font-size: 14.5px; color: var(--ink-2); align-items: flex-start; }
.tick { flex: none; width: 20px; height: 20px; border-radius: 50%; background: rgba(14, 143, 110, .12); color: var(--accent); display: grid; place-items: center; font-size: 11px; font-weight: 700; margin-top: 2px; }

.step-list { display: flex; flex-direction: column; gap: 14px; counter-reset: none; }
.step-list li { display: flex; gap: 14px; align-items: flex-start; }
.step-no { flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--ink); color: #f7f5ef; display: grid; place-items: center; font-size: 12px; font-weight: 700; font-family: var(--serif); }
.step-list p { font-size: 14.5px; color: var(--ink-2); }

.notes { font-size: 14px; color: var(--ink-2); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px 20px; line-height: 1.7; max-height: 320px; overflow: auto; }

.inline-col { display: flex; flex-direction: column; gap: 3px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); }
.inline-col:hover { border-color: var(--accent); }
.inline-col b { font-size: 15px; }
.inline-col span { font-size: 13px; color: var(--muted); }

/* spec panel */
.spec-list { display: flex; flex-direction: column; }
.spec { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13px; }
.spec:first-child { border-top: 0; }
.spec dt { color: var(--muted); }
.spec dd { margin: 0; text-align: right; font-weight: 550; word-break: break-all; }
.spec-note { font-size: 11.5px; color: var(--muted); margin-top: 14px; line-height: 1.5; }

.mini-list { display: flex; flex-direction: column; }
.mini-list a { padding: 11px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.mini-list a:first-of-type { border-top: 0; padding-top: 4px; }
.mini-list b { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.mini-list i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.mini-list a:hover b { color: var(--accent-ink); }

/* article */
.article-wrap { max-width: 1120px; padding-top: 30px; }
.article-head { max-width: 820px; }
.article h1 { font-size: clamp(28px, 3.8vw, 44px); margin: 14px 0 12px; letter-spacing: -.03em; }
.article-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.article-tags span {
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent); background: rgba(182, 160, 255, .1);
  border: 1px solid rgba(182, 160, 255, .28); padding: 4px 10px; border-radius: 999px;
}
.article-meta { display: flex; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 26px; }
.article-hero {
  height: clamp(200px, 32vw, 400px); border-radius: var(--radius); overflow: hidden;
  margin: 0 0 34px; border: 1px solid var(--line); background: #0b1017;
}
.article-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }

.article-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; }
.article-body { font-size: 16.5px; line-height: 1.82; color: var(--ink-2); max-width: 720px; }
.article-body p { margin-bottom: 18px; }
.article-lede {
  font-size: 19px !important; line-height: 1.6 !important; color: var(--ink) !important;
  border-left: 3px solid var(--accent); padding-left: 18px; margin-bottom: 34px !important;
}
.article-body h2 {
  font-family: var(--sans); font-size: 15px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent);
  margin: 34px 0 10px; padding-top: 8px;
}
.article-body h2:first-of-type { margin-top: 8px; }
.article-side .mini-list a { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.article-side .mini-list a i { font-style: normal; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.article-src { margin-top: 28px; font-size: 14px; }
.article-src a { color: var(--accent); border-bottom: 1px solid rgba(182, 160, 255, .32); }

/* dark cta */
.dark-cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 48px; align-items: center; }
.dark-cta h2 { font-size: clamp(26px, 3vw, 34px); color: #f4f2ea; }
.dark-cta p { color: rgba(244, 242, 234, .66); margin-top: 12px; font-size: 14.5px; max-width: 480px; }
.dark-list { display: flex; flex-direction: column; gap: 4px; }
.dark-list a { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.dark-list a:first-child { border-top: 0; }
.dark-list a:hover b { color: #8fd7bd; }
.dl-icon { width: 38px; height: 38px; border-radius: 11px; overflow: hidden; flex: none; }
.dl-icon img { width: 100%; height: 100%; object-fit: cover; }
.dark-list span:last-child { display: flex; flex-direction: column; }
.dark-list b { font-size: 14px; color: #f4f2ea; }
.dark-list i { font-style: normal; font-size: 11.5px; color: rgba(244, 242, 234, .55); }

/* -------------------------------------------------------------------- foot */

.site-foot { background: var(--dark); color: rgba(244, 242, 234, .72); padding: 56px 0 22px; position: relative; }
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
.foot-brand p { font-size: 13.5px; margin-top: 12px; max-width: 300px; color: rgba(244, 242, 234, .55); }
.brand-foot b { color: #f4f2ea; font-size: 16px; }
.foot-langs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.foot-langs a { font-size: 12px; padding: 4px 9px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); }
.foot-langs a.is-on { background: rgba(30, 203, 143, .16); border-color: rgba(30, 203, 143, .4); color: #9fe8cf; }
.foot-col { display: flex; flex-direction: column; gap: 9px; }
.foot-col h4 { font-family: var(--sans); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(244, 242, 234, .45); margin-bottom: 4px; font-weight: 600; }
.foot-col a { font-size: 13.5px; }
.foot-col a:hover { color: #9fe8cf; }
.foot-base { margin-top: 40px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .1); display: flex; flex-direction: column; gap: 8px; }
.foot-base p { font-size: 11.5px; color: rgba(244, 242, 234, .4); max-width: 900px; line-height: 1.6; }
.foot-base .muted { color: rgba(244, 242, 234, .3); }

.to-top {
  position: fixed; right: 22px; bottom: 22px; width: 42px; height: 42px; border-radius: 50%;
  background: var(--ink); color: #f7f5ef; border: 0; display: grid; place-items: center; cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: .22s; z-index: 40; box-shadow: var(--shadow-m);
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }

/* ---------------------------------------------------------------- lightbox */

.lb {
  position: fixed; inset: 0; z-index: 200; background: rgba(8, 13, 11, .96);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 56px 72px 96px; opacity: 0; transition: opacity .22s;
}
.lb[hidden] { display: none; }
.lb.is-open { opacity: 1; }
.lb-stage { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; max-height: 100%; }
.lb-stage img {
  max-height: calc(100vh - 248px); max-width: min(1100px, 88vw); width: auto; height: auto;
  object-fit: contain; border-radius: 12px; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9);
  animation: lbIn .26s ease;
}
@keyframes lbIn { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
.lb-stage figcaption { font-size: 12.5px; color: rgba(244, 242, 234, .6); letter-spacing: .06em; }
.lb-close {
  position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); color: #f4f2ea;
  display: grid; place-items: center; cursor: pointer;
}
.lb-close:hover { background: rgba(255, 255, 255, .18); }
.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); color: #f4f2ea;
  display: grid; place-items: center; cursor: pointer;
}
.lb-nav:hover { background: rgba(255, 255, 255, .18); }
.lb-prev { left: 18px; }
.lb-next { right: 18px; }
.lb-rail { position: absolute; bottom: 16px; left: 0; right: 0; display: flex; gap: 8px; justify-content: center; padding: 0 24px; overflow-x: auto; }
.lb-rail button { flex: none; width: 52px; height: 72px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; padding: 0; cursor: pointer; opacity: .5; background: #1a2420; }
.lb-rail button img { width: 100%; height: 100%; object-fit: cover; }
.lb-rail button.is-on { border-color: var(--accent-2); opacity: 1; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .split, .detail-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .split-side { order: -1; }
  .detail-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .detail-side .panel + .panel { margin-top: 0; }
  .foot-grid { grid-template-columns: 1fr 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
  .head-search { width: 180px; }
  .head-search:focus-within { width: 210px; }
}

@media (max-width: 860px) {
  .nav, .head-search { display: none; }
  .menu-btn { display: block; }
  .head-tools { margin-left: auto; }
  .mobile-nav {
    display: none; flex-direction: column; gap: 4px; padding: 10px 20px 18px;
    background: var(--paper); border-bottom: 1px solid var(--line);
  }
  .mobile-nav.is-open { display: flex; }
  .mobile-nav .nav-link { padding: 11px 12px; border-radius: 10px; font-size: 15px; }
  .mobile-search { display: flex; gap: 8px; margin-bottom: 8px; }
  .mobile-search input { flex: 1; height: 42px; border-radius: 999px; border: 1px solid var(--line-2); padding: 0 16px; background: #fff; outline: none; }
  .mobile-search button { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; display: grid; place-items: center; }

  .hero { height: 560px; }
  /* .wrap 的横向 padding 会覆盖 padding-bottom，这里提高优先级保证导航条留白 */
  .wrap.slide-inner {
    grid-template-columns: minmax(0, 1fr); align-content: center; gap: 0;
    padding: 10px 20px 150px;
  }
  .slide-poster { display: none; }
  .hero-thumbs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .hero-thumb span { display: none; }
  .hero-thumb { padding: 4px; max-width: none; }
  .hero-thumb img { width: 54px; height: 30px; }
  .plat-grid { grid-template-columns: 1fr 1fr; }
  .chart-row { grid-template-columns: 28px 52px minmax(0, 1fr) auto; gap: 10px; padding: 8px 10px; }
  .chart-art { width: 52px; height: 52px; }
  .chart-no { font-size: 18px; }
  .slide-copy h2 { font-size: clamp(32px, 9vw, 46px); }
  .slide-copy { max-width: none; }
  .slide-bg { filter: blur(30px) saturate(1.4) brightness(.58); background-position: center 25%; }
  .slide-veil {
    background:
      radial-gradient(120% 80% at 50% 18%, rgba(12, 21, 18, .12), rgba(12, 21, 18, .72) 70%),
      linear-gradient(180deg, rgba(12, 21, 18, .18) 0%, rgba(12, 21, 18, .5) 46%, rgba(12, 21, 18, .96) 100%);
  }
  .hero-nav { bottom: 20px; }

  .band { padding: 46px 0; }
  .grid-4, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .col-row, .guide-row { grid-template-columns: 1fr; }
  .article-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .article-hero { height: 220px; }
  .stat-row { gap: 22px; }
  .stat-note { margin-left: 0; width: 100%; }
  .detail-top { flex-direction: column; gap: 16px; }
  .dh-icon { width: 84px; height: 84px; border-radius: 20px; }
  .dh-metas { gap: 18px; }
  .dh-metas b { font-size: 18px; }
  .feature-list { grid-template-columns: 1fr; }
  .detail-side { grid-template-columns: 1fr; }
  .dark-cta { grid-template-columns: 1fr; gap: 26px; }
  .gallery-main { max-height: 420px; }
  .lb { padding: 52px 12px 92px; }
  .lb-nav { width: 40px; height: 40px; }
  .lb-prev { left: 6px; }
  .lb-next { right: 6px; }
  .lb-stage img { max-width: 94vw; max-height: calc(100vh - 200px); }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
}

@media (max-width: 520px) {
  .wrap { padding: 0 18px; }
  .brand-text i { display: none; }
  .hero { height: 540px; }
  .wrap.slide-inner { padding: 8px 18px 146px; }
  .slide-copy h2 { margin-bottom: 12px; }
  .slide-meta { margin: 16px 0 20px; }
  .slide-tag { -webkit-line-clamp: 2; font-size: 15px; }
  .grid-4, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-body h3 { font-size: 14.5px; }
  .card-tag { display: none; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .guide-row-3 { grid-template-columns: 1fr; }
  .col-art { height: 140px; }
  .col-art-0 { width: 66px; height: 118px; left: 16px; }
  .col-art-1 { width: 72px; height: 128px; left: 82px; }
  .col-art-2 { width: 66px; height: 118px; left: 152px; }
  .shot { width: 150px; height: 267px; }
  .band { padding: 38px 0; }
  .foot-grid { grid-template-columns: 1fr; }
  .to-top { right: 14px; bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* Discovery controls */
.discovery-filters{display:flex;flex-wrap:wrap;align-items:end;gap:12px;margin-top:24px}
.discovery-filters label{display:grid;gap:7px;flex:1 1 150px;font-size:13px;color:var(--muted,#aab7c9)}
.discovery-filters select{width:100%;min-height:44px;padding:10px 12px;background:#111823;color:#edf4ff;border:1px solid #344254;border-radius:10px;font:inherit;color-scheme:dark}
.discovery-filters :focus-visible{outline:2px solid #b6a0ff;outline-offset:3px}
.discovery-filters .btn{min-height:44px}.filter-note{font-size:12px;line-height:1.7;color:#aab7c9;margin-top:12px}.filter-count{margin-top:12px;font-weight:600}.empty-results{padding:40px 16px;text-align:center;border:1px dashed #344254;border-radius:12px}
@media(max-width:540px){.discovery-filters label{flex-basis:calc(50% - 12px)}.discovery-filters .btn{flex:1}}

/* Orbit / second-generation discovery layout */
:root{--muted:#a0aec3;--serif:var(--sans)}
h1,h2,h3,h4{font-family:var(--sans);font-weight:750;letter-spacing:-.035em}
.site-head{background:rgba(7,11,20,.91);backdrop-filter:blur(22px);border-bottom:1px solid rgba(132,155,194,.17)}
.brand-mark{filter:drop-shadow(0 0 12px rgba(182,160,255,.25))}.brand-text i{color:#a0aec3}
.head-inner{gap:18px}.nav-link{font-size:13px;padding:9px 12px}.nav-link.is-on{background:rgba(182,160,255,.1);color:#d8ccff;box-shadow:inset 0 -2px #b6a0ff}
.quick-nav{display:none}
.page-head{background:radial-gradient(ellipse at 88% 0,rgba(116,72,239,.15),transparent 60%),radial-gradient(ellipse at 5% 15%,rgba(182,160,255,.07),transparent 55%),#0a0e18;border-bottom:1px solid #212b40;padding:40px 0 28px}
.catalog-heading{display:flex;align-items:center;justify-content:space-between;gap:24px}.catalog-eyebrow{color:#d8ccff;font-size:10px;font-weight:750;letter-spacing:.24em;margin-top:22px}.catalog-heading h1{font-size:clamp(36px,5vw,62px);line-height:1.1;margin:12px 0 16px}
.catalog-orbit{width:88px;height:88px;display:grid;place-items:center;flex:none;border-radius:26px;color:#9efbdd;font-size:52px;border:1px solid #495a77;background:linear-gradient(135deg,rgba(182,160,255,.15),rgba(139,92,246,.23));box-shadow:0 0 60px -12px rgba(139,92,246,.45);transform:rotate(-9deg)}
.catalog-panel{margin-top:26px;padding:22px;border:1px solid #28364c;border-radius:20px;background:linear-gradient(125deg,rgba(23,34,51,.94),rgba(15,20,35,.94));box-shadow:0 16px 48px -30px #000}
.catalog-panel .chip-row{gap:8px;flex-wrap:wrap}.chip{border-color:#354159;background:#111a2a;color:#bbc9df;transition:background .2s,transform .2s}.chip:hover{transform:translateY(-2px);border-color:#b6a0ff}.chip.is-on{color:#061910;background:#50e3b3;border-color:#50e3b3;box-shadow:0 0 18px -9px #b6a0ff}
.discovery-filters{padding-top:20px;border-top:1px solid #2b364a;margin-top:20px;gap:14px}.discovery-filters label{color:#c4d0e3;font-size:12px;font-weight:600;flex-basis:140px}.discovery-filters select{background:#0b1220;border-color:#35425b;min-height:46px;border-radius:10px}.discovery-filters .btn{min-height:46px;border-radius:10px;font-size:13px}.filter-note{font-size:12px;max-width:960px;color:#a2afc5}.filter-count{font-size:13px;color:#d8ccff;margin-top:15px}
.card{border:1px solid #263147;background:linear-gradient(145deg,#141d2c,#0e1420);padding:9px;border-radius:18px;overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s;gap:0;height:100%}.card:hover{transform:translateY(-6px);border-color:#5d8d88;box-shadow:0 18px 50px -24px rgba(182,160,255,.45)}.card-art{border-radius:12px}.card-body{padding:15px 8px 12px}.card-body h3{line-height:1.4;font-size:16px;letter-spacing:-.02em}.card-meta{font-size:11px;color:#8edbc3;margin-top:7px}.card-tag{font-size:12px;line-height:1.65;color:#9eacc1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:9px}.card-plat{font-size:10px;backdrop-filter:blur(12px)}
.card-art-icon{aspect-ratio:1.4;height:auto}.card-art-icon .card-img{width:46%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:22%;box-shadow:0 18px 28px -12px #000}.grid-4{gap:22px}.band{padding:48px 0}.band-tight{padding-top:28px}.sec-head h2{font-size:clamp(24px,3vw,34px)}
.hero{border-bottom:1px solid #2b3449}.slide-veil{background:linear-gradient(90deg,rgba(5,9,17,.96),rgba(5,9,17,.55) 48%,rgba(5,9,17,.1)),linear-gradient(0deg,#080b11,transparent 60%)}.slide-copy h2{font-family:var(--sans);font-weight:800}.hero-thumb{border-radius:14px}.hero-thumb.is-on{box-shadow:0 0 0 1px #b6a0ff,0 0 22px -10px #b6a0ff}.home-apps{background:radial-gradient(ellipse at 90% 50%,rgba(139,92,246,.07),transparent 60%)}
@media(max-width:1180px){.nav-link{padding:9px}.head-search{width:150px}.head-search:focus-within{width:170px}.brand-text i{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
@media(max-width:960px){.nav,.head-search{display:none}.quick-nav{display:flex;gap:5px;padding:0 22px 11px;overflow-x:auto;white-space:nowrap;scrollbar-width:none}.quick-nav .nav-link{flex:none;padding:7px 14px;font-size:13px;border-radius:9px}.head-inner{min-height:68px}.site-head{position:sticky;top:0}.page-head{padding-top:24px}.catalog-heading h1{font-size:40px}.catalog-orbit{width:70px;height:70px;font-size:40px}.catalog-panel{padding:18px}.grid-4{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.wrap{padding-left:18px;padding-right:18px}.quick-nav{padding-left:12px;padding-right:12px}.brand-text i{font-size:10px}.catalog-eyebrow{font-size:9px}.catalog-heading h1{font-size:36px}.catalog-orbit{width:56px;height:56px;border-radius:18px;font-size:35px}.catalog-panel{padding:15px;border-radius:16px;margin-top:22px}.catalog-panel .chip-row{gap:7px}.chip{padding:7px 11px;font-size:12px}.discovery-filters{gap:12px;margin-top:16px;padding-top:16px}.discovery-filters label{flex:1 1 calc(50% - 12px);min-width:0}.discovery-filters .btn{flex:1 1 calc(50% - 12px)}.grid-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.card{padding:6px;border-radius:14px}.card-body{padding:11px 5px 9px}.card-body h3{font-size:13px}.card-art-icon .card-img{width:52%}.card-tag{display:none}.card-meta{font-size:10px}.card-plat{padding:4px 6px}.lede{font-size:14px;line-height:1.8}.band{padding:32px 0}.band-tight{padding-top:22px}}
@media(prefers-reduced-motion:reduce){.card:hover,.chip:hover{transform:none}}

.pager{flex-wrap:wrap;gap:7px;max-width:100%}.pager-gap{padding:7px 3px;color:#92a0b8}.pager a{min-width:36px;min-height:38px;padding:7px 11px;display:grid;place-items:center}.pager a[rel]{font-size:12px}
@media(max-width:620px){.pager a{padding:7px 9px;min-width:32px}.pager{gap:5px}.catalog-panel .filter-note{font-size:11px}.catalog-panel .filter-count{font-size:12px}}

.big-search input{background:#0c1422;color:#e9eff7;border-color:#35425b;min-width:0}.big-search button{background:#b6a0ff;color:#06271d}.big-search{max-width:100%}

.slide{background:radial-gradient(ellipse at 80% 25%,rgba(105,65,220,.36),transparent 60%),radial-gradient(ellipse at 60% 90%,rgba(26,191,148,.18),transparent 65%),#0b1220}.slide-photo{background-color:transparent}.card-art-landscape{aspect-ratio:1.6}.card-art-landscape .card-img{object-fit:cover}.hero-thumb img{background:linear-gradient(135deg,#203b45,#292046)}
@media(max-width:620px){.hero{height:540px}.slide-copy h2{font-size:34px}.slide-tag{font-size:13px}.slide-inner{padding-top:46px}}

img.image-fallback{object-fit:contain!important;padding:24px;background:linear-gradient(135deg,#182c35,#211c3e)}

/* Store-aware discovery and local cinematic media */
[hidden]{display:none!important}.home-category-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.home-category-head>span{font-size:13px;color:#a4b4cb;font-weight:650;letter-spacing:.03em}.home-category-head .chip-row{margin:0}.home-category-head button{cursor:pointer;font:inherit}.home-category-head+.plat-grid{margin-top:0}
.chart-controls{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:15px 0 20px}.chart-controls .chip-row{margin:0;gap:7px}.chart-controls a{font-size:12px}.chart-more{display:inline-flex;margin-top:22px}.chart-main .store-price{margin-top:5px;display:inline-block;font-size:11px}.store-price{display:inline-block;width:fit-content;font-size:11px;font-weight:650;line-height:1.5;padding:3px 8px;border:1px solid #334356;border-radius:6px;margin:9px 0 0;color:#b9c5d7;background:#151e2d}.price-paid{color:#ffdc8e;border-color:#64502b;background:#2b2318}.price-free{color:#8ae5c5;border-color:#285748;background:#102c26}.price-unknown{color:#a2aec2}.card-meta{margin-top:8px}.chart-main{min-width:0}.chart-stat{flex:none}
.slide-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s;pointer-events:none}.slide-video.is-playing{opacity:1}.hero-motion{position:absolute;z-index:5;top:18px;right:28px;border:1px solid #6d7d8f;border-radius:99px;background:rgba(5,11,21,.65);backdrop-filter:blur(10px);color:#e5f7ef;font-size:11px;padding:8px 13px;cursor:pointer}.hero-motion[aria-pressed=true]{border-color:#b6a0ff;color:#d8ccff}.spotlight-source{font-size:11px;color:#b5c7da;margin:12px 0}.spotlight-source a{text-decoration:underline;text-underline-offset:3px}.slide-copy .slide-kicker{color:#d8ccff}.hero-thumbs .hero-thumb img{object-fit:cover}.chart-row{min-height:96px}
@media(min-width:961px){.nav-link{padding:8px 10px;font-size:12px}.head-search{width:155px}.brand-text i{max-width:175px}}
@media(max-width:620px){.hero-motion{right:18px;top:15px}.home-category-head{align-items:flex-start}.chart-controls{align-items:flex-start;flex-direction:column}.chart-row{gap:10px;padding:14px 0}.chart-no{font-size:17px;min-width:20px}.chart-main b{font-size:13px}.chart-stat b{font-size:14px}.chart-stat em{font-size:10px}.chart-art{width:44px;height:44px}.chart-main .store-price{font-size:10px}.store-price{font-size:10px}.spotlight-source{font-size:10px;max-width:90%}.quick-nav{gap:0}.quick-nav .nav-link{padding:7px 11px}.slide-copy h2{max-width:100%}}
.guide-context{padding:18px 20px;background:#101e25;border-left:3px solid #b6a0ff;border-radius:0 12px 12px 0;margin-bottom:22px}.guide-context strong{color:#8ae5c5;font-size:13px}.guide-context p{font-size:13px;line-height:1.8;color:#adbdcc;margin:8px 0}.guide-context small{color:#7c9ca9;font-size:11px}.guide-toc{padding:20px;border:1px solid #2a384c;border-radius:14px;margin-bottom:28px;background:#101724;display:grid;gap:9px}.guide-toc strong{font-size:13px;color:#b6c6db;margin-bottom:3px}.guide-toc a{font-size:13px;color:#8fe4c8}.article-body h2{scroll-margin-top:150px}.guide-sources{border-top:1px solid #2a384c;padding-top:24px;margin-top:28px}.guide-sources h2{font-size:20px;margin-bottom:16px}.guide-sources li{margin-bottom:10px;font-size:13px;color:#83dcc0}.article-side .panel{position:sticky;top:130px}
/* Panoramic atmosphere: native HD background, no transform enlargement. */
.hero{height:clamp(570px,48vw,740px)}
.slide-photo{filter:none;opacity:1;background-size:cover;background-position:var(--video-focus,center 45%);transform:none}
.slide.is-on .slide-photo{transform:none}
.slide-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--video-focus,center 45%);transform:none;filter:none;pointer-events:none}
.slide-veil{background:linear-gradient(90deg,rgba(5,9,17,.9) 0%,rgba(5,9,17,.68) 30%,rgba(5,9,17,.18) 66%,rgba(5,9,17,.06)),linear-gradient(0deg,rgba(5,9,17,.9),transparent 45%)}
.wrap.slide-inner{position:relative;display:grid;grid-template-columns:1fr;align-content:center;align-items:center;height:100%;gap:0;padding-top:35px;padding-bottom:120px}
.slide-copy{max-width:580px;min-width:0;width:52%}.slide-copy h2{font-size:clamp(36px,4.5vw,62px);line-height:1.06}.slide-tag{font-size:15px;-webkit-line-clamp:3}.slide-meta{margin:20px 0}.hero-motion{top:18px}
@media(min-width:1600px){.hero{height:720px}}
@media(max-width:860px){.hero{height:600px}.wrap.slide-inner{display:grid;grid-template-columns:1fr;align-content:center;padding:48px 20px 120px}.slide-copy{width:80%;max-width:570px}.slide-copy h2{font-size:clamp(31px,6vw,45px)}.slide-tag{font-size:14px;-webkit-line-clamp:3}.slide-video,.slide-photo{object-position:60% center;background-position:60% center}.slide-veil{background:linear-gradient(90deg,rgba(5,9,17,.82),rgba(5,9,17,.35)),linear-gradient(0deg,rgba(5,9,17,.9),transparent 60%)} }
@media(max-width:540px){.hero{height:570px}.slide-copy{width:100%}.slide-copy h2{font-size:32px}.slide-tag{font-size:13px;-webkit-line-clamp:3}.slide-meta{margin:15px 0}.spotlight-source{font-size:10px}.slide-kicker{font-size:10px}.hero-nav{bottom:18px}.slide-actions .btn-lg{font-size:12px;padding:12px 17px}}

/* Discovery channels and acquisition decision summary */
.channel-section{padding:28px 0;background:linear-gradient(120deg,#101d23,#101a17)}.channel-label{color:#a8bbbf;font-size:12px;margin:0 0 14px}.channel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.channel-card{display:flex;align-items:center;gap:18px;padding:24px;border:1px solid #30453e;border-radius:16px;background:linear-gradient(135deg,#1b302c99,#14202b99);transition:transform .2s,border-color .2s}.channel-card:hover{transform:translateY(-3px);border-color:#b6a0ff}.channel-card h2{font-size:20px;margin:0 0 5px}.channel-card p{font-size:12px;color:#a8b9bc;margin:0}.channel-no{font-size:12px;color:#d8ff75}.channel-card>span:last-child{margin-left:auto;color:#d8ff75;font-size:24px}.decision-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:16px 18px;background:#142923b3;border:1px solid #385248;border-radius:14px;margin:20px 0 8px}.decision-strip small{display:block;color:#a7bdb3;font-size:11px;margin-bottom:5px}.decision-strip b{font-size:14px;color:#eef9f3;overflow-wrap:anywhere}.decision-note{font-size:12px;color:#b3c3bd;line-height:1.7;max-width:680px;margin:8px 0 18px}@media(max-width:760px){.channel-grid{grid-template-columns:1fr}.channel-card{padding:18px}.channel-card h2{font-size:18px}.channel-section{padding:22px 0}.decision-strip{padding:14px;gap:8px}.decision-strip b{font-size:12px}}

.version-note{display:block;font-size:10px;color:#a7bcb3;margin:5px 0}.version-picker{border:1px solid #365347;background:linear-gradient(130deg,#142a22,#141e2b);border-radius:18px;padding:24px;margin:0 0 24px}.version-picker h2{font-size:21px;margin:0 0 8px}.version-picker>p{font-size:13px;color:#b1c3ba;line-height:1.7}.version-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:18px}.version-option{display:flex;flex-direction:column;gap:8px;padding:15px;border:1px solid #3a4c44;border-radius:12px;background:#101c1b}.version-option.is-on{border-color:#b6a0ff;box-shadow:inset 0 0 0 1px #b6a0ff}.version-option span{font-size:13px}.version-option small{font-size:11px;color:#b8c7c1}.card-plat{max-width:90%}@media(max-width:540px){.version-picker{padding:16px}.version-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
#applications{scroll-margin-top:90px}

/* PlayPick identity: violet play mark, electric lime editorial accents. */
:root{--paper:#0b0a11;--paper-2:#11101a;--card:#181622;--card-2:#211c31;--line:#302b40;--accent:#b6a0ff;--accent-2:#d8ff75;--radius:20px}.brand-text b{font-size:22px;font-weight:850;letter-spacing:-.9px}.brand-text i{font-size:10px;letter-spacing:1.2px}.brand-mark{filter:drop-shadow(0 4px 14px #ad8aff33)}.site-head{background:#0b0a11ed;border-bottom:1px solid #ffffff12}.btn-primary{background:linear-gradient(120deg,#c2b0ff,#a88aef);color:#1a102e;box-shadow:0 8px 30px -12px #b6a0ff99}.btn-primary:hover{background:#d8ccff}.chip.is-on{background:#b6a0ff;color:#160f26;border-color:#b6a0ff}.card{border-color:#343042;background:linear-gradient(155deg,#1b1926,#111019)}.card:hover{border-color:#a88aef;box-shadow:0 14px 40px -20px #ad8aff66}.channel-section{background:#100e18}.channel-card{background:linear-gradient(125deg,#2b2241,#17141f);border-color:#443655}.channel-card:hover{border-color:#b6a0ff}.channel-no{color:#d8ff75}.channel-label{color:#cec1e5;letter-spacing:1px}.decision-strip,.version-picker{background:linear-gradient(135deg,#251d36,#14121e);border-color:#4c3e61}.version-option{background:#15101f;border-color:#49395c}.decision-strip small{color:#c4b7d7}.pick-intro{background:#100e18;border-bottom:1px solid #ffffff0e}.pick-intro-inner{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:24px;padding-top:26px;padding-bottom:26px}.pick-label{font-size:10px;letter-spacing:2.8px;color:#d8ff75;grid-column:1}.pick-intro h1{font-size:clamp(24px,2.4vw,36px);line-height:1.25;letter-spacing:-1px;margin:8px 0}.pick-intro p{font-size:13px;color:#bcb2c9;margin:0}.pick-intro a{grid-column:2;grid-row:1/4;padding:12px 20px;border:1px solid #6a577e;border-radius:99px;font-size:12px;color:#e2d9ed}.pick-intro a:hover{border-color:#d8ff75;color:#d8ff75}.hero{border-radius:0 0 28px 28px;overflow:hidden}.band-plat{background:linear-gradient(130deg,#171020aa,#10101aaa)}.sec-head h2{letter-spacing:-.7px}.channel-card>span:last-child{color:#d8ff75}@media(max-width:620px){.pick-intro-inner{grid-template-columns:1fr;padding-top:20px;padding-bottom:20px}.pick-intro a{display:none}.pick-intro h1{font-size:25px}.brand-text b{font-size:20px}}

.channel-categories{padding:25px 0;border-bottom:1px solid #ffffff0c;background:#15101e}.channel-categories .chip-row{flex-wrap:wrap}.quick-nav{justify-content:center}#channel-chart{scroll-margin-top:100px}

/* Consistent compact PC releases, ranked lists and guide conversion paths. */
.pc-fresh-grid{align-items:stretch;gap:16px}.pc-fresh-grid .card{height:auto;min-height:0}.pc-fresh-grid .card-art{aspect-ratio:16/9;flex:none;height:auto}.pc-fresh-grid .card-body{padding:10px 6px}.pc-fresh-grid .card-body h3{font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:39px}.pc-fresh-grid .card-tag{display:none}.pc-fresh-grid .card-icon{display:none}.pc-fresh-grid .card-meta{margin:5px 0;font-size:10px}.ranked-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;margin-top:18px}.ranked-row{display:flex;align-items:center;gap:13px;padding:17px 0;border-bottom:1px solid #ffffff16;min-width:0}.rank-number{color:#b6a0ff;font-weight:800;font-size:24px;min-width:32px}.rank-icon{width:58px;height:58px;object-fit:cover;border-radius:10px}.rank-title{min-width:0;flex:1}.rank-title b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rank-title small{display:block;color:#b7a8cc;font-size:11px;margin-top:5px}.rank-score{font-size:12px;color:#d8ff75;max-width:110px;text-align:right}.guide-downloads{padding:24px;border:1px solid #57456e;border-radius:18px;background:#1a1425;margin-bottom:28px}.guide-downloads h2{margin-top:0}.guide-downloads>p{font-size:13px;color:#bfb0cc}.guide-download-row{padding:16px 0;border-top:1px solid #ffffff18}.guide-download-row>div:first-child{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}.guide-download-icon{height:42px;width:42px;object-fit:cover;border-radius:8px}.guide-download-row small{color:#c5b5d5}.guide-download-row .btn{font-size:12px}.guide-download-row>div:last-child{display:flex;gap:8px;flex-wrap:wrap}@media(max-width:700px){.ranked-list{grid-template-columns:1fr}.pc-fresh-grid{gap:12px}.rank-score{font-size:11px}.guide-downloads{padding:16px}.pc-fresh-grid .card-body h3{font-size:12px;min-height:34px}}

/* Article reading layout with a single download rail. */
.article-wrap{max-width:1200px}.article-grid{grid-template-columns:minmax(0,1fr) 320px;gap:32px}.article-main{min-width:0}.article-side{position:sticky;top:100px;align-self:start;max-height:calc(100vh - 120px);overflow:auto;scrollbar-width:thin}.article-side .guide-downloads{padding:21px;margin:0;border-radius:16px;background:linear-gradient(145deg,#21192f,#15121e)}.article-side .guide-downloads h2{font-size:20px;margin:0 0 10px}.article-side .guide-downloads>p{font-size:12px;line-height:1.8}.article-side .guide-download-row>div:first-child{display:grid;grid-template-columns:44px minmax(0,1fr);gap:7px 12px}.article-side .guide-download-icon{grid-row:1/3;width:44px;height:44px}.article-side .guide-download-row strong{font-size:14px;line-height:1.5}.article-side .guide-download-row small{font-size:11px}.article-side .guide-download-row>div:last-child{display:grid;grid-template-columns:1fr}.article-side .guide-download-row .btn{text-align:center;justify-content:center}.article-main .article-body{font-size:17px;line-height:1.95}.article-hero{max-height:380px;overflow:hidden}.article-hero img{width:100%;max-height:380px;object-fit:cover}.article-head{max-width:900px}.article-head h1{line-height:1.25;letter-spacing:-.8px}@media(max-width:900px){.article-grid{grid-template-columns:minmax(0,1fr)}.article-side{position:static;max-height:none;overflow:visible;grid-row:1}.article-main{grid-row:2}.article-side .guide-download-row>div:last-child{display:flex}.article-side .guide-download-row .btn{flex:1}.article-hero,.article-hero img{max-height:250px}.article-grid{gap:24px}}

.channel-guide-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.channel-guide-list .guide-card{display:grid;grid-template-columns:155px minmax(0,1fr);border:1px solid #342c43;background:#171320;border-radius:15px;overflow:hidden}.channel-guide-list .guide-art{height:100%;min-height:160px;aspect-ratio:auto;border-radius:0}.channel-guide-list .guide-art img{height:100%;width:100%;object-fit:cover}.channel-guide-list .guide-body{padding:18px}.channel-guide-list .guide-body h3{font-size:17px;line-height:1.5;margin:8px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.channel-guide-list .guide-body p{font-size:12px;line-height:1.8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.channel-guide-list .guide-meta{font-size:10px}.sec-head{padding-bottom:16px;border-bottom:1px solid #ffffff10}.article-head{padding-bottom:22px;border-bottom:1px solid #ffffff12;margin-bottom:24px}@media(max-width:900px){.channel-guide-list{grid-template-columns:1fr}}@media(max-width:540px){.channel-guide-list .guide-card{grid-template-columns:105px minmax(0,1fr)}.channel-guide-list .guide-body{padding:12px}.channel-guide-list .guide-body h3{font-size:14px}.channel-guide-list .guide-art{min-height:140px}}

/* Fixed editorial card geometry; source image dimensions never size the row. */
.channel-guide-list{grid-auto-rows:180px;align-items:stretch}.channel-guide-list .guide-card{height:180px;min-height:0;max-height:180px;grid-template-columns:160px minmax(0,1fr);grid-template-rows:minmax(0,1fr)}.channel-guide-list .guide-art{height:100%;min-height:0;min-width:0;position:relative;overflow:hidden;isolation:isolate;background:#181322}.channel-guide-list .guide-art::before{content:"";position:absolute;inset:-18px;background-image:var(--guide-cover);background-size:cover;background-position:center;filter:blur(15px) brightness(.45);z-index:-1}.channel-guide-list .guide-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;transform:none!important}.channel-guide-list .guide-art-veil{display:none}.channel-guide-list .guide-body{min-height:0;min-width:0;overflow:hidden;box-sizing:border-box;padding:17px}.channel-guide-list .guide-meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:17px}.channel-guide-list .guide-body h3{height:51px;max-height:51px;margin:8px 0;font-size:16px;line-height:1.55}.channel-guide-list .guide-body p{max-height:44px;margin:0;font-size:12px;line-height:1.8}@media(max-width:540px){.channel-guide-list{grid-auto-rows:168px}.channel-guide-list .guide-card{height:168px;max-height:168px;grid-template-columns:108px minmax(0,1fr)}.channel-guide-list .guide-art{min-height:0}.channel-guide-list .guide-body{padding:12px}.channel-guide-list .guide-body h3{height:44px;max-height:44px;font-size:14px}.channel-guide-list .guide-body p{font-size:11px;max-height:40px}}

/* PC discovery prototype: a compact feature, library rail and ranked sidebar. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.channel-title-bar{display:flex;align-items:center;justify-content:space-between;padding-top:24px;padding-bottom:10px}.channel-title-bar h1{font-size:26px;margin:0}.channel-title-bar a{font-size:12px;color:#d8ccff}.channel-page .band{padding:32px 0}.channel-pc .hero{height:510px;border-radius:0}.channel-pc .slide-copy h2{font-size:clamp(32px,3.4vw,48px)}.channel-pc .slide-copy{width:55%;max-width:600px}.channel-pc .slide-tag{-webkit-line-clamp:2;font-size:13px}.channel-pc .slide-meta{margin:13px 0}.channel-pc .wrap.slide-inner{padding-top:24px;padding-bottom:90px}.channel-pc .hero-nav{bottom:18px}.channel-pc .hero-thumb{padding:6px 9px}.channel-categories{padding:15px 0}.channel-categories .chip-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;padding-bottom:3px}.channel-categories .chip{white-space:nowrap;flex:none;padding:7px 12px}.discovery-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;padding-top:30px;padding-bottom:26px;align-items:start}.channel-latest,.channel-ranking{min-width:0}.discovery-layout .sec-head{margin-bottom:18px;gap:12px;align-items:center}.discovery-layout .sec-head h2{font-size:24px}.discovery-layout .sec-head p{font-size:11px}.discovery-layout .sec-link{font-size:11px;white-space:nowrap}.channel-latest .grid{gap:14px}.channel-latest .card{border-radius:13px;padding:6px}.channel-latest .card-art{border-radius:8px}.channel-latest .card-body{padding:9px 4px}.channel-latest .card-body h3{font-size:12px;min-height:34px;margin:0 0 6px}.channel-latest .store-price{font-size:10px}.channel-latest .card-meta{font-size:9px}.channel-latest .card-plat{font-size:9px;padding:3px 5px}.channel-ranking{background:#17131f;border:1px solid #342c43;border-radius:16px;padding:18px}.channel-ranking .sec-head h2{font-size:21px}.channel-ranking .sec-head{padding-bottom:14px;margin-bottom:0}.channel-ranking .sec-head p{display:none}.channel-ranking .ranked-list{display:block;margin-top:0}.channel-ranking .ranked-row{gap:10px;padding:13px 0;min-height:72px}.channel-ranking .rank-number{font-size:19px;min-width:24px}.channel-ranking .rank-icon{width:43px;height:43px;object-fit:cover}.channel-ranking .rank-title b{font-size:12px}.channel-ranking .rank-title small{font-size:10px}.channel-ranking .rank-score{font-size:10px;max-width:55px}.channel-ranking .ranked-row:nth-child(-n+3) .rank-number{color:#d8ff75}.channel-ranking .ranked-row:last-child{border-bottom:0}.rank-platforms{margin-top:14px}.channel-page .col-art{height:155px}.channel-page .sec-head h2{font-size:26px}@media(min-width:1500px){.channel-pc .hero{height:540px}}@media(max-width:1050px){.discovery-layout{grid-template-columns:minmax(0,1fr) 270px;gap:18px}.channel-latest .grid-4{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:800px){.discovery-layout{grid-template-columns:1fr}.channel-latest .grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.channel-ranking .ranked-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:22px}.channel-pc .hero{height:460px}.channel-pc .slide-copy{width:90%}}@media(max-width:540px){.channel-latest .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.channel-ranking .ranked-list{grid-template-columns:1fr}.channel-pc .hero{height:450px}.channel-pc .slide-copy{width:100%}.channel-pc .slide-copy h2{font-size:32px}.discovery-layout{padding-top:24px}.channel-page .band{padding:26px 0}.channel-title-bar h1{font-size:22px}}

/* Higher-density discovery and catalogue cards. */
.channel-page .grid-4,.band-tight .grid-4{gap:12px;align-items:stretch}.channel-page .grid-4 .card,.band-tight .grid-4 .card{height:auto;min-height:0;padding:5px;border-radius:12px;gap:0}.channel-page .grid-4 .card-art,.band-tight .grid-4 .card-art{aspect-ratio:16/9;flex:none;height:auto;min-height:0;border-radius:8px}.channel-page .grid-4 .card-art-icon .card-img,.band-tight .grid-4 .card-art-icon .card-img{width:36%;height:auto;aspect-ratio:1}.channel-page .grid-4 .card-icon,.band-tight .grid-4 .card-icon{display:none}.channel-page .grid-4 .card-body,.band-tight .grid-4 .card-body{padding:8px 5px 6px;min-width:0}.channel-page .grid-4 .card-body h3,.band-tight .grid-4 .card-body h3{font-size:13px;line-height:1.4;min-height:36px;height:36px;margin:0 0 4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.channel-page .grid-4 .card-tag,.band-tight .grid-4 .card-tag{display:none}.channel-page .grid-4 .card-meta,.band-tight .grid-4 .card-meta{font-size:10px;margin:4px 0 0;line-height:1.4}.channel-page .grid-4 .store-price,.band-tight .grid-4 .store-price{font-size:10px;padding:3px 6px;margin:0}.channel-page .grid-4 .version-note,.band-tight .grid-4 .version-note{font-size:9px;line-height:1.3;margin:4px 0}.channel-page .grid-4 .card-plat,.band-tight .grid-4 .card-plat{font-size:9px;padding:3px 5px}.channel-page .band{padding:26px 0}.discovery-layout{gap:22px;padding-top:24px;padding-bottom:20px}.channel-page .sec-head{margin-bottom:16px;padding-bottom:12px}.channel-guide-list{gap:12px;grid-auto-rows:164px}.channel-guide-list .guide-card{height:164px;max-height:164px;grid-template-columns:145px minmax(0,1fr)}.channel-guide-list .guide-body{padding:13px}.channel-guide-list .guide-body h3{font-size:15px;height:46px;max-height:46px;margin:6px 0}.channel-guide-list .guide-body p{font-size:11px;max-height:40px}@media(min-width:1180px){.channel-page .grid-4{grid-template-columns:repeat(5,minmax(0,1fr))}.band-tight .grid-4{grid-template-columns:repeat(6,minmax(0,1fr))}}@media(min-width:801px) and (max-width:1179px){.channel-latest .grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:540px){.channel-page .grid-4,.band-tight .grid-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.channel-page .grid-4 .card-body h3,.band-tight .grid-4 .card-body h3{font-size:12px;height:34px;min-height:34px}.channel-guide-list .guide-card{grid-template-columns:100px minmax(0,1fr)}.channel-guide-list .guide-body h3{font-size:13px;height:41px;max-height:41px}.channel-guide-list .guide-body{padding:11px}}

/* Open product tiles: landscape artwork, icon/name/category and download action. */
:root{--wrap:1540px}.wrap{width:100%;max-width:var(--wrap);margin-left:auto;margin-right:auto;padding-left:32px;padding-right:32px}.article-wrap{max-width:1200px}.narrow{max-width:800px}.channel-page .grid-4 .product-tile,.band-tight .grid-4 .product-tile,.product-tile{display:block;border:0;background:transparent;box-shadow:none;padding:0!important;border-radius:0;overflow:visible;height:auto;transform:none}.product-tile:hover{background:transparent;box-shadow:none;transform:none;border:0}.product-art{position:relative;display:block;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:#20192c}.product-cover{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.product-art:hover .product-cover{transform:scale(1.035);transition:transform .25s}.product-info{display:flex;align-items:center;gap:10px;padding-top:11px}.product-icon-link{flex:none;display:block}.product-icon{display:block;width:39px;height:39px;border-radius:9px;object-fit:cover;background:#21192d}.product-copy{min-width:0;flex:1}.product-copy h3{font-size:14px;font-weight:700;line-height:1.4;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.product-copy p{font-size:11px;color:#a99db9;line-height:1.5;margin:3px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.product-download{display:flex;align-items:center;justify-content:center;width:29px;height:34px;flex:none;color:#c4adff;border-radius:7px}.product-download:hover{background:#b6a0ff20;color:#d8ff75}.product-download svg{width:21px;height:21px}.product-price{padding-left:49px;font-size:10px;line-height:1.4;margin-top:5px;color:#c5b6d5}.product-price .price-free{color:#b5e0b7}.product-price .price-paid{color:#e6c687}.channel-page .grid-4,.band-tight .grid-4{gap:22px 20px}.discovery-layout{grid-template-columns:minmax(0,1fr) 310px;gap:28px}.channel-guide-list{grid-auto-rows:146px;gap:16px 20px}.channel-guide-list .guide-card{height:146px;max-height:146px;grid-template-columns:208px minmax(0,1fr);grid-template-rows:minmax(0,1fr)}.channel-guide-list .guide-art{min-height:0;height:100%;background:#191320}.channel-guide-list .guide-art::before{display:none}.channel-guide-list .guide-art img{object-fit:cover;object-position:center;position:absolute;inset:0;width:100%;height:100%}.channel-guide-list .guide-body{padding:15px;display:flex;flex-direction:column;justify-content:flex-start;gap:7px;min-width:0}.channel-guide-list .guide-meta{flex:none;font-size:10px;height:auto;line-height:1.4}.channel-guide-list .guide-body h3{height:auto;min-height:0;max-height:44px;margin:0;font-size:15px;line-height:1.45;flex:none;-webkit-line-clamp:2}.channel-guide-list .guide-body p{margin:0;line-height:1.6;font-size:12px;max-height:39px;flex:none;-webkit-line-clamp:2}.channel-page .sec-head h2{font-size:26px}@media(min-width:1700px){:root{--wrap:1720px}}@media(max-width:1180px){.wrap{padding-left:24px;padding-right:24px}.channel-guide-list .guide-card{grid-template-columns:170px minmax(0,1fr)}.discovery-layout{grid-template-columns:minmax(0,1fr) 270px;gap:22px}}@media(max-width:800px){.discovery-layout{grid-template-columns:1fr}.channel-guide-list .guide-card{grid-template-columns:190px minmax(0,1fr)}}@media(max-width:540px){.wrap{padding-left:16px;padding-right:16px}.channel-page .grid-4,.band-tight .grid-4{gap:18px 12px}.product-info{gap:7px;padding-top:8px}.product-icon{width:30px;height:30px;border-radius:7px}.product-copy h3{font-size:12px}.product-copy p{font-size:9px}.product-download{width:23px}.product-download svg{width:17px}.product-price{padding-left:37px;font-size:9px}.channel-guide-list{grid-auto-rows:132px}.channel-guide-list .guide-card{height:132px;max-height:132px;grid-template-columns:125px minmax(0,1fr)}.channel-guide-list .guide-body{padding:11px;gap:6px}.channel-guide-list .guide-body h3{font-size:13px;max-height:39px}.channel-guide-list .guide-body p{font-size:11px;max-height:35px}.channel-guide-list .guide-meta{font-size:9px}}
.product-info{align-items:flex-start}.product-copy h3{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:39px}.product-download{align-self:center}.channel-latest .product-icon{width:32px;height:32px}.channel-latest .product-info{gap:8px}.channel-latest .product-download{width:23px}.channel-latest .product-price{padding-left:40px}@media(min-width:801px) and (max-width:1499px){.channel-latest .grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:540px){.channel-latest .product-icon{width:30px;height:30px}.channel-latest .product-price{padding-left:38px}}

/* Official chart provenance must remain visible at every viewport. */
.channel-ranking .sec-head p{display:block;font-size:10px;line-height:1.65;color:#a6a0b5;margin:8px 0 0}.channel-ranking .sec-head{align-items:flex-start}.chart-empty{padding:16px 0;color:#aaa4b8;font-size:12px;line-height:1.7}.brand-mark svg{display:block;flex:none}

/* Aligned metadata and store symbols; balanced final rows across screen sizes. */
.platform-symbol{display:inline-flex;vertical-align:middle;color:#bca5f7;align-items:center;justify-content:center;flex:none;width:17px;height:17px}.platform-symbol svg{display:block;width:16px;height:16px}.platform-symbols{display:inline-flex;gap:6px;align-items:center}.product-copy p{display:flex;gap:8px;align-items:center;margin:4px 0 0;height:18px}.product-copy h3{height:40px;min-height:40px;max-height:40px;line-height:20px}.product-price{height:19px;margin-top:4px;display:flex;align-items:center}.product-price .platform-symbol{width:13px;height:13px}.product-price svg{width:12px;height:12px}.product-info{min-height:69px}.channel-latest .product-info{min-height:69px}.channel-page .balanced-products{display:flex;flex-wrap:wrap;gap:22px 20px}.channel-page .balanced-products>.product-tile{flex:1 1 calc((100% - 80px)/5);min-width:0}.product-art{aspect-ratio:16/10}.rank-platforms .chip{min-width:48px;display:inline-flex;justify-content:center}.version-option b .platform-symbol{width:24px;height:24px}.version-option b svg{width:22px;height:22px}
@media(min-width:801px) and (max-width:1499px){.channel-latest .balanced-products>.product-tile{flex-basis:calc((100% - 60px)/4)}}
@media(max-width:1179px){.channel-page .balanced-products>.product-tile{flex-basis:calc((100% - 40px)/3)}}
@media(max-width:800px){.channel-page .balanced-products>.product-tile{flex-basis:calc((100% - 40px)/3)}}
@media(max-width:540px){.channel-page .balanced-products{gap:18px 12px}.channel-page .balanced-products>.product-tile{flex-basis:calc((100% - 12px)/2)}.product-copy h3{font-size:12px}.product-copy p{font-size:9px}.platform-symbol,.platform-symbol svg{width:14px;height:14px}.product-info{gap:7px}.product-price{font-size:9px}}

.channel-page .balanced-products .product-art{aspect-ratio:auto;height:clamp(135px,10vw,200px)}.channel-latest .balanced-products .product-art{height:clamp(120px,8vw,170px)}.channel-categories .chip-row{scrollbar-width:none}.channel-categories .chip-row::-webkit-scrollbar{display:none}@media(max-width:540px){.channel-page .balanced-products .product-art{height:125px}.channel-latest .balanced-products .product-art{height:115px}}

/* Standard brand marks, drawn without strokes so small details stay open. */
.platform-symbol{width:24px;height:24px;border-radius:6px;background:#252333;color:#f4f5fa}.platform-symbol svg{width:18px;height:18px;fill:currentColor;stroke:none}.platform-android{color:#3ddc84}.product-copy p{height:24px;gap:9px}.product-copy .platform-symbol{width:24px;height:24px}.product-copy .platform-symbol svg{width:18px;height:18px}.platform-symbols{gap:5px}.product-price .platform-symbol{background:transparent}.rank-platforms .platform-symbol{background:transparent}.product-copy p>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.product-copy .platform-symbols{overflow:visible;flex:none}@media(max-width:540px){.product-copy .platform-symbol{width:22px;height:22px}.product-copy .platform-symbol svg{width:17px;height:17px}}

/* Mobile store screenshots are portrait UI, not landscape covers. */
.product-app-art .product-art{display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 35%,#302544,#191522 75%);border:1px solid #ffffff08}.product-app-art .product-cover{width:auto;height:68%;max-width:68%;aspect-ratio:1;object-fit:contain;object-position:center;border-radius:22%;filter:drop-shadow(0 8px 13px #0005)}.product-app-art .product-art:hover .product-cover{transform:scale(1.035)}.product-app-art .product-icon-link{display:none}.product-app-art .product-info{gap:8px}.product-app-art .product-price{padding-left:0}.product-app-art .product-copy{min-width:0}.product-app-art .product-copy h3{height:40px}.product-app-art .product-art .rate{position:absolute;right:9px;top:9px}

/* Mobile games and apps: native store icon with a concise text summary. */
.channel-page .balanced-products>.compact-store-card{flex-basis:calc((100% - 60px)/4)}.band-tight .grid-4:has(>.compact-store-card){grid-template-columns:repeat(4,minmax(0,1fr))}.product-tile.compact-store-card,.channel-page .grid-4 .compact-store-card,.band-tight .grid-4 .compact-store-card{display:grid;grid-template-columns:64px minmax(0,1fr) 24px;gap:12px;padding:16px!important;border:1px solid #ffffff0b;background:#17131e;border-radius:14px;align-items:start}.compact-store-card:hover{background:#201a2b;border-color:#b6a0ff40}.compact-store-icon{display:block;width:64px;height:64px}.compact-store-icon img{display:block;width:100%;height:100%;object-fit:contain;border-radius:14px;background:#20192c}.compact-store-body{min-width:0}.compact-store-body h3{font-size:14px;line-height:19px;height:38px;margin:0 0 5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.compact-store-summary{font-size:12px;line-height:18px;height:36px;margin:0;color:#a9a3b6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}.compact-store-meta{display:flex;align-items:center;gap:8px;margin-top:9px;font-size:10px;color:#aaa0bc;min-height:22px}.compact-store-meta>span:first-child{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.compact-store-footer{display:flex;align-items:center;gap:10px;justify-content:space-between;min-height:20px;margin-top:4px;font-size:10px}.compact-store-footer .rate{position:static;background:none;padding:0;font-size:10px}.compact-store-card .product-download{margin-top:2px;width:24px}.compact-store-footer .price-free{color:#b5e0b7}.compact-store-footer .price-paid{color:#e6c687}.compact-store-footer .platform-symbol{background:none;width:12px;height:12px}.compact-store-footer .platform-symbol svg{width:12px;height:12px}.compact-store-meta .platform-symbol{width:21px;height:21px}.compact-store-meta .platform-symbol svg{width:16px;height:16px}@media(max-width:1300px){.channel-page .balanced-products>.compact-store-card{flex-basis:calc((100% - 40px)/3)}.band-tight .grid-4:has(>.compact-store-card){grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:1000px){.channel-page .balanced-products>.compact-store-card{flex-basis:calc((100% - 20px)/2)}.band-tight .grid-4:has(>.compact-store-card){grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.channel-page .balanced-products>.compact-store-card{flex-basis:100%}.band-tight .grid-4:has(>.compact-store-card){grid-template-columns:minmax(0,1fr)}.product-tile.compact-store-card,.channel-page .grid-4 .compact-store-card,.band-tight .grid-4 .compact-store-card{grid-template-columns:60px minmax(0,1fr) 26px;padding:13px!important;gap:12px}.compact-store-icon{width:60px;height:60px}}

/* The PC games channel has a single store; omit repeated Steam badges. */
.channel-pc .platform-steam{display:none}.channel-pc .product-copy .platform-symbols:has(>.platform-steam:only-child){display:none}.channel-pc .hero-thumb i:has(>.platform-steam:only-child){display:none}

/* Stable store grids: never stretch incomplete rows into oversized cards. */
.channel-page .balanced-products:has(>.compact-store-card){display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:stretch}.channel-page .balanced-products>.compact-store-card{width:auto;min-width:0;max-width:100%;flex:none}.compact-store-card .compact-store-body{display:flex;flex-direction:column;align-items:stretch}.compact-store-card .compact-store-body h3{margin:0 0 5px;height:38px;min-height:38px}.compact-store-card .compact-store-summary{height:36px;min-height:36px}.compact-store-card .compact-store-meta{margin-top:9px}.compact-store-card .compact-store-footer{margin-top:4px}.compact-store-card .product-download{align-self:start!important;margin-top:0}.compact-store-meta>span:first-child{text-transform:capitalize}@media(max-width:1300px){.channel-page .balanced-products:has(>.compact-store-card){grid-template-columns:repeat(3,minmax(0,1fr))}}

@media(max-width:1000px){.channel-page .balanced-products:has(>.compact-store-card){grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.channel-page .balanced-products:has(>.compact-store-card){grid-template-columns:minmax(0,1fr);gap:12px}}

.rank-platforms .chip{display:inline-flex;align-items:center;gap:7px;padding:7px 12px}.rank-platforms .chip>span:last-child{font-size:12px}

.catalogue-summary{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:22px;padding-bottom:22px}.catalogue-summary strong{display:block;font-size:20px}.catalogue-summary span{display:block;color:var(--muted,#a6a0b4);font-size:13px;margin-top:5px}.catalogue-summary .btn{white-space:nowrap}.channel-categories .category-count{opacity:.65;margin-left:5px;font-size:11px}@media(max-width:540px){.catalogue-summary{align-items:flex-start;flex-direction:column;gap:12px}.catalogue-summary strong{font-size:18px}.catalogue-summary .btn{width:100%;justify-content:center}}

.selection-notes{background:#171824;border:1px solid #37324c;border-radius:16px;padding:24px;margin-bottom:24px}.editorial-kicker{font-size:10px;letter-spacing:2px;color:#c8b5ff;margin:0 0 10px}.selection-notes h2{font-size:24px;margin:0 0 14px}.selection-verdict{font-size:17px;line-height:1.6;color:#ece5ff}.selection-notes p,.selection-notes li{line-height:1.75}.selection-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:20px 0}.selection-pair>div{background:#ffffff05;padding:17px;border-radius:10px}.selection-notes h3{font-size:15px;margin:12px 0 8px}.selection-pair p{margin:0;font-size:13px;color:#b9b3c8}.editorial-facts{border-block:1px solid #37324c;padding:14px 0}.editorial-facts>div{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:7px 0;font-size:13px}.editorial-facts dt{color:#b1a8c3}.editorial-facts dd{margin:0}.editorial-method{font-size:11px;color:#aaa1ba;margin-top:20px}.editorial-sources{padding-left:18px;font-size:12px}.editorial-sources a{color:#c4afff}.comparison-scroll{overflow-x:auto}.selection-table{width:100%;border-collapse:collapse;margin-top:20px;font-size:13px;text-align:left}.selection-table th,.selection-table td{padding:15px 12px;vertical-align:top;border-bottom:1px solid #37324c;line-height:1.65}.selection-table thead{color:#d4c6f4}.selection-table tbody th{min-width:130px}.selection-table a{color:#c5b0ff}@media(max-width:600px){.selection-pair{grid-template-columns:1fr}.selection-notes{padding:18px}.selection-notes h2{font-size:21px}.selection-table{min-width:620px}}

.home-channels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding-top:25px;padding-bottom:12px}.home-channel{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:22px;background:#17131f;border:1px solid #383047;border-radius:14px;text-decoration:none;color:#eee9f8}.home-channel strong{display:block;font-size:21px}.home-channel small{display:block;font-size:11px;color:#b4a9c5;margin-top:7px}.home-channel-count{color:#c8b0ff;font-size:17px;white-space:nowrap}.home-channel-count b{padding-left:8px}.home-channel:hover{border-color:#b6a0ff;background:#211a30}.aggregate-home .hero{border-radius:0}.aggregate-home .band{padding:30px 0}@media(max-width:800px){.home-channels{grid-template-columns:1fr}.home-channel{padding:16px 20px}.home-channel strong{font-size:18px}}

.pc-releases{padding-top:28px;padding-bottom:28px}.home-rank-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.home-rank-panel{min-width:0;background:#17131f;border:1px solid #373047;border-radius:16px;padding:20px}.home-rank-panel>header{display:flex;align-items:center;justify-content:space-between;gap:12px}.home-rank-panel h3{font-size:21px;margin:0}.home-rank-panel header a{font-size:11px;color:#c6b0ff;white-space:nowrap}.home-rank-note{font-size:11px;color:#aaa1bb;line-height:1.6;min-height:35px}.home-rank-panel .ranked-list{display:block}.home-rank-panel .ranked-row{padding:12px 0;gap:10px;min-height:72px}.home-rank-panel .rank-icon{width:40px;height:40px;object-fit:cover;border-radius:9px}.home-rank-panel .rank-number{min-width:23px;font-size:18px;color:#baa5ff}.home-rank-panel .ranked-row:nth-child(-n+3) .rank-number{color:#d8ff75}.home-rank-panel .rank-title{min-width:0;flex:1}.home-rank-panel .rank-title b{font-size:12px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.home-rank-panel .rank-title small{font-size:10px;display:block;margin-top:5px}.home-rank-panel .rank-score{font-size:10px;max-width:60px;text-align:right}.home-rank-panel .ranked-row:last-child{border-bottom:0}@media(max-width:1000px){.home-rank-grid{grid-template-columns:1fr}.home-rank-note{min-height:0}.home-rank-panel .rank-title b{font-size:14px}}

.rank-metrics{display:flex;flex-direction:column;gap:7px;min-width:98px;flex:none}.rank-metrics>span{display:grid;grid-template-columns:1fr auto;align-items:center;gap:9px;white-space:nowrap}.rank-metrics small{font-size:9px;color:#a49bb2}.rank-metrics b{font-size:11px;font-weight:500;color:#d8ef91}.home-rank-panel .rank-title b{font-size:12px}.home-rank-panel .ranked-row{gap:8px}.home-rank-panel .rank-title small{font-size:10px}@media(min-width:1001px) and (max-width:1250px){.home-rank-grid{gap:12px}.home-rank-panel{padding:15px}.rank-metrics{min-width:85px}.home-rank-panel .rank-icon{width:32px;height:32px}}