/* ggmmo.com — public site, 2026 redesign.
   One idea runs through everything: the page is coloured by the games themselves (each card and the first screen
   borrow the dominant colour of their key art), and every game is judged in short honest lines — plus and minus —
   taken from store facts. Themes switch on <html data-theme>. */

[hidden] { display: none !important; }

/* ------------------------------------------------------------------ tokens */
:root,
[data-theme="midnight"] {
  --bg: #0e0b15; --bg-2: #130f1d; --surface: #19142a; --surface-2: #221c34; --surface-3: #2b2442;
  --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .17);
  --text: #f5f1fb; --muted: #a99fbf; --faint: #776f8e;
  --accent: #ff3d9a; --accent-hover: #ff66af; --accent-ink: #20071a; --link: #ff8cc4;
  --plus: #7fe3b6; --minus: #ff8e7a;
  --ga: var(--accent);                       /* per-game accent, set inline from the cover */
  --header-bg: rgba(14, 11, 21, .84);
  --shadow: 0 24px 60px rgba(0, 0, 0, .5);
  --display: "Unbounded", "Onest", system-ui, sans-serif;
  --body: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-s: 10px; --r-m: 16px; --r-l: 22px;
  color-scheme: dark;
}
[data-theme="daylight"] {
  --bg: #f6f5fa; --bg-2: #efedf5; --surface: #ffffff; --surface-2: #f1eff7; --surface-3: #e7e4f0;
  --line: #e4e2ec; --line-2: #cfccdd;
  --text: #171320; --muted: #5d586e; --faint: #8d889c;
  --accent: #ea1f79; --accent-hover: #cf1569; --accent-ink: #ffffff; --link: #c0145f;
  --plus: #148a5d; --minus: #cd3a2a;
  --header-bg: rgba(255, 255, 255, .86);
  --shadow: 0 24px 60px rgba(31, 24, 60, .16);
  color-scheme: light;
}
[data-theme="neon"] { --bg: #0d0824; --bg-2: #130c33; --surface: #1a1140; --surface-2: #261a57; --surface-3: #31226b; --accent: #35dcff; --accent-hover: #74e8ff; --accent-ink: #061226; --link: #8fe9ff; --header-bg: rgba(13, 8, 36, .84); }
[data-theme="wilderness"] { --bg: #0d1712; --bg-2: #122019; --surface: #182a20; --surface-2: #21362a; --surface-3: #2a4435; --accent: #a9d86a; --accent-hover: #c0e78a; --accent-ink: #12200a; --link: #c8ea9c; --header-bg: rgba(13, 23, 18, .84); }

/* ------------------------------------------------------------------ base & type */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 86px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.6 var(--body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body::before { content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none; background:
  radial-gradient(1200px 500px at 8% -10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
  radial-gradient(900px 420px at 100% 30%, color-mix(in srgb, #6a4cff 10%, transparent), transparent 70%); }
body::after { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
[data-theme="daylight"] body::after { opacity: .03; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.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; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--accent); color: var(--accent-ink); padding: 10px 14px; border-radius: 8px; }
.skip:focus { top: 12px; }
.icon { width: 1.2em; height: 1.2em; flex: none; vertical-align: -.2em; fill: none; stroke: currentColor; }
.wrap { width: min(1280px, 100% - 48px); margin-inline: auto; }
@media (max-width: 600px) { .wrap { width: calc(100% - 28px); } }
h1, h2, h3 { margin: 0; line-height: 1.12; }
.display { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; }
.page-title { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -.01em; }
.section-title { font-family: var(--display); font-weight: 600; font-size: clamp(19px, 2vw, 24px); letter-spacing: -.005em; display: flex; align-items: center; gap: 12px; }
.section-title::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); flex: none; }
.page-title::before { display: none; }
.lead { color: var(--muted); max-width: 64ch; margin: 10px 0 0; font-size: 17px; }
.muted { color: var(--muted); }
main { min-height: 60vh; overflow-x: clip; }

/* ------------------------------------------------------------------ buttons, chips, tags */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid transparent;
  background: var(--accent); color: var(--accent-ink); font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .15s, border-color .15s, transform .15s; }
.btn:hover { background: var(--accent-hover); color: var(--accent-ink); }
.btn:active { transform: scale(.96); filter: brightness(.94); transition-duration: .06s; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent), 0 0 0 1px var(--accent); }
a, button, .chip, .card, .show-thumb, .fav-btn, .country-btn { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.chip:active, .country-btn:active, .show-thumb:active, .pc-spoiler summary:active { transform: scale(.96); }
.fav-btn:active { transform: scale(.86); }
.fav-btn[aria-pressed="true"] .on { animation: pop .32s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes pop { 0% { transform: scale(.4); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
.main-nav a:active, .tabbar a:active, .tabbar button:active { transform: scale(.94); }
@media (hover: none) { .card:active { transform: scale(.985); transition: transform .08s; } .fav-btn { width: 44px; height: 44px; } .card-foot .btn { min-height: 40px; } }
.btn-lg { min-height: 54px; padding: 0 30px; font-size: 17px; }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: 14px; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); border-color: var(--text); }
.btn-icon { width: 44px; padding: 0; }
.btn-sm.btn-icon { width: 36px; }
.btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips.scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 4px; -webkit-mask-image: linear-gradient(90deg, #000 94%, transparent); mask-image: linear-gradient(90deg, #000 94%, transparent); }
.chips.scroll::-webkit-scrollbar { display: none; }
.chips.scroll > * { flex: none; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 15px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line);
  color: var(--text); text-decoration: none; font-weight: 600; font-size: 14.5px; white-space: nowrap; cursor: pointer; }
.chip img { width: 24px; height: 24px; object-fit: contain; margin-left: -4px; }
.genre-title { display: flex; align-items: center; gap: 10px; }
.genre-title img { width: 36px; height: 36px; object-fit: contain; flex: none; }
.chip:hover { border-color: var(--line-2); color: var(--text); background: var(--surface-2); }
.chip, .country-btn, .show-thumb, .fav-btn { transition: transform .12s cubic-bezier(.2, .7, .2, 1), background .15s, border-color .15s, color .15s; }
.chips.scroll { scroll-snap-type: x proximity; scroll-padding-left: 24px; -webkit-overflow-scrolling: touch; }
.chips.scroll > * { scroll-snap-align: start; }
.show-strip { scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.show-thumb { scroll-snap-align: start; }
html { -webkit-text-size-adjust: 100%; }
dialog .sheet, .drawer { overscroll-behavior: contain; }
.chip[aria-current="page"], .chip.is-active { background: var(--text); border-color: var(--text); color: var(--bg); }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 6px; background: var(--surface-2); font-size: 12.5px; color: var(--muted); white-space: nowrap; text-decoration: none; }
a.tag:hover { color: var(--text); background: var(--surface-3); }

/* the honest lines: + and − from store facts */
.verdict { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14.5px; line-height: 1.4; }
.verdict li { display: grid; grid-template-columns: 14px 1fr; gap: 7px; align-items: baseline; }
.verdict li::before { font-weight: 800; font-family: var(--body); }
.verdict .plus { color: var(--plus); } .verdict .plus::before { content: "+"; }
.verdict .minus { color: var(--minus); } .verdict .minus::before { content: "–"; }
.verdict.lg { font-size: 16px; gap: 6px; }

/* ------------------------------------------------------------------ header */
.site-header::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--accent) 0%, #8b5cf6 45%, var(--plus) 100%); z-index: 1; }
.site-header { position: sticky; top: 0; z-index: 40; background: var(--header-bg); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; gap: 18px; min-height: 66px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); flex: none; }
.logo img { width: 42px; height: 42px; object-fit: contain; }
.logo-text { display: grid; line-height: 1; }
.logo-name { font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: -.02em; }
.logo-name span, .logo-name .hl { color: var(--accent); }
.logo-sub { font-size: 10px; letter-spacing: .12em; color: var(--muted); margin-top: 5px; font-weight: 600; }
.main-nav { display: flex; gap: 2px; }
.main-nav a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: 15px; padding: 8px 12px; border-radius: 10px; }
.main-nav a:hover { color: var(--text); background: var(--surface); }
.main-nav a[aria-current="page"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
.header-search { flex: 1; position: relative; max-width: 400px; margin-left: auto; }
.header-search input { width: 100%; height: 42px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); padding: 0 16px 0 42px; outline: none; transition: border-color .15s; }
.header-search input::placeholder { color: var(--faint); }
.header-search input:focus { border-color: var(--accent); }
.header-search .icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.suggest { position: absolute; left: 0; right: 0; top: calc(100% + 8px); background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--shadow); padding: 6px; display: none; z-index: 50; }
.suggest.open { display: block; }
.suggest a { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 10px; color: var(--text); text-decoration: none; }
.suggest a:hover, .suggest a.is-active { background: var(--surface-2); }
.suggest img { width: 64px; height: 36px; object-fit: cover; border-radius: 6px; }
.suggest small { display: block; color: var(--muted); }
.header-actions { display: flex; gap: 8px; align-items: center; }
.country-btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px 0 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-weight: 650; font-size: 14px; }
.country-btn:hover { border-color: var(--line-2); }
.country-btn img, .flag { width: 22px; height: 15px; border-radius: 3px; object-fit: cover; }
.flag-emoji { font-size: 18px; line-height: 1; width: 22px; text-align: center; }
.menu-btn, .search-toggle { display: none; }
@media (max-width: 1100px) { .main-nav { display: none; } .menu-btn { display: inline-flex; } }
@media (max-width: 760px) {
  .site-header .wrap { gap: 10px; min-height: 58px; }
  .header-search { display: none; } .search-toggle { display: inline-flex; }
  .logo img { width: 36px; height: 36px; } .logo-name { font-size: 16px; } .logo-sub { display: none; }
  .country-btn .country-label { display: none; }
  .header-actions { margin-left: auto; }
}
@media (max-width: 420px) { .header-actions { gap: 4px; } .header-actions .btn-icon { width: 38px; } .country-btn { padding: 0 8px; gap: 4px; } }

/* dialogs */
dialog { border: 0; padding: 0; background: transparent; color: var(--text); max-width: none; max-height: none; }
dialog::backdrop { background: rgba(5, 3, 12, .64); backdrop-filter: blur(3px); }
.sheet { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-l); box-shadow: var(--shadow); padding: 22px; width: min(720px, calc(100vw - 24px)); max-height: 86vh; overflow: auto; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 12px; }
.sheet-head h2 { font-size: 18px; font-family: var(--display); font-weight: 600; }
.country-find { width: 100%; height: 42px; margin: 0 0 12px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); }
.country-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px; }
.country-grid a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--text); text-decoration: none; border: 1px solid transparent; }
.country-grid a:hover { background: var(--surface-2); }
.country-grid a[aria-current="true"] { border-color: var(--accent); }
.country-grid .country-name { flex: 1; min-width: 0; }
.country-grid.is-collapsed .is-more { display: none; }
.country-more { margin-top: 10px; }
.country-count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lang-row { display: flex; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); flex-wrap: wrap; align-items: center; }
.drawer { position: fixed; inset: 0 0 0 auto; height: 100%; width: min(360px, 88vw); margin: 0; background: var(--surface); border-left: 1px solid var(--line-2); padding: 22px; overflow-y: auto; }
.drawer nav { display: grid; gap: 4px; margin-top: 18px; }
.drawer nav a { color: var(--text); text-decoration: none; padding: 12px 10px; border-radius: 10px; font-weight: 600; font-size: 17px; display: flex; align-items: center; gap: 12px; }
.drawer nav a:hover { background: var(--surface-2); }
.search-sheet { position: fixed; inset: 0 0 auto 0; width: 100%; margin: 0; background: var(--surface); padding: 14px; border-bottom: 1px solid var(--line-2); }
.search-sheet form { display: flex; gap: 8px; }
.search-sheet input { flex: 1; height: 46px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg); padding: 0 18px; }

/* ------------------------------------------------------------------ the showcase: one game, full-bleed, in its own colour */
.show { position: relative; isolation: isolate; overflow: hidden; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.show-art { position: absolute; inset: 0; z-index: -2; }
.show-art img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 28%; transition: opacity .16s ease; }
.show-art img.is-out { opacity: 0; }
.show::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 92%, transparent) 30%, color-mix(in srgb, var(--bg) 45%, transparent) 58%, color-mix(in srgb, var(--bg) 10%, transparent) 100%),
              linear-gradient(0deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 60%, transparent) 26%, transparent 60%); }
.show::after { content: ""; position: absolute; left: -10%; bottom: -30%; width: 55%; height: 90%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--ga) 32%, transparent), transparent 70%); filter: blur(10px); }
.show-in { position: relative; display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); align-items: end; min-height: clamp(420px, 48vh, 500px); padding: 32px 0 22px; gap: 24px; }
.show-copy { max-width: 640px; }
.show-kicker { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; font-weight: 600; }
.gg { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font-family: var(--display); font-weight: 800; font-size: 12px; letter-spacing: -.02em; flex: none; box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 45%, transparent); }
.gg.lg { width: 46px; height: 46px; border-radius: 12px; font-size: 18px; margin-bottom: 12px; }
.show-name { margin: 14px 0 12px; font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; font-size: clamp(32px, 4.2vw, 60px); line-height: .96; text-wrap: balance; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; padding-bottom: .06em; }
.show-name.is-long { font-size: clamp(28px, 4vw, 58px); }
.show-name a { color: var(--text); text-decoration: none; text-shadow: 0 6px 40px rgba(0, 0, 0, .55); }
.show-text { margin: 0 0 14px; max-width: 54ch; color: var(--muted); font-size: 16.5px; text-shadow: 0 2px 12px rgba(0, 0, 0, .5); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.show-lines { margin: 0 0 16px; min-height: 54px; text-shadow: 0 2px 12px rgba(0, 0, 0, .55); }
.show-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.show-actions .btn-lg { box-shadow: 0 14px 34px color-mix(in srgb, var(--accent) 40%, transparent); }
.show-actions .btn-ghost { background: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: blur(8px); box-shadow: none; }
.show-strip { display: flex; gap: 10px; justify-self: end; align-self: end; width: 100%; justify-content: flex-end; overflow-x: auto; scrollbar-width: none; padding: 4px; }
.show-side { display: none; position: absolute; right: -58px; top: 96px; bottom: 96px; align-items: center; writing-mode: vertical-rl; font-family: var(--display); font-weight: 700; font-size: 10.5px; letter-spacing: .34em; text-transform: uppercase; color: color-mix(in srgb, var(--text) 42%, transparent); pointer-events: none; white-space: nowrap; }
.show-side::before, .show-side::after { content: ""; flex: 1; width: 1px; background: color-mix(in srgb, var(--text) 18%, transparent); margin: 16px 0; }
@media (min-width: 1400px) { .show-side { display: flex; } }
.show-strip::-webkit-scrollbar { display: none; }
.show-thumb { flex: 1 1 0; min-width: 0; max-width: 150px; padding: 0; border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(10px); cursor: pointer; text-align: left; overflow: hidden; transition: transform .18s, border-color .18s; color: var(--text); -webkit-mask-image: -webkit-radial-gradient(white, black); }
.show-thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; opacity: .85; transition: opacity .18s; }
.show-thumb span { display: block; padding: 7px 9px 8px; font-size: 12.5px; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.show-thumb:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, .35); }
.show-thumb:hover img { opacity: 1; }
.show-thumb.is-active { border-color: var(--ga); box-shadow: 0 0 0 1px var(--ga), 0 12px 30px color-mix(in srgb, var(--ga) 35%, transparent); }
.show-thumb.is-active img { opacity: 1; }
@media (max-width: 1300px) { .show-thumb { flex: none; width: 132px; } .show-strip { justify-content: flex-start; mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); } }
@media (max-width: 1100px) { .show-in { grid-template-columns: minmax(0, 1fr); min-height: 500px; } .show-strip { justify-self: start; } }
@media (max-width: 900px) {
  .show-art { position: relative; inset: auto; aspect-ratio: 16 / 7; max-height: 220px; }
  .show-art img { object-position: 60% 30%; }
  .show::before { background: linear-gradient(0deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 70%, transparent) 30%, transparent 62%); }
  .show::after { display: none; }
  .show-in { min-height: 0; padding: 0 0 18px; margin-top: -82px; gap: 10px; }
  .show-name { font-size: clamp(30px, 9vw, 44px); margin: 8px 0 10px; }
  .show-text { display: none; }
  .show-kicker { align-self: flex-start; padding: 4px 12px 4px 4px; border-radius: 999px; background: color-mix(in srgb, var(--bg) 62%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--text); }
  .show-lines { margin-bottom: 12px; min-height: 50px; }
  .show-lines li:nth-child(n+3) { display: none; }
  .show-actions .btn { flex: 1 1 auto; }
  .show-thumb { flex: none; width: 124px; }
}

/* the claim under the first screen: how many games work here */
.strip { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; padding: 18px 0 6px; font-size: 15px; color: var(--muted); }
.strip strong { color: var(--text); font-weight: 700; }
.strip .claim { display: inline-flex; align-items: center; gap: 10px; }
.strip .claim .flag-emoji { font-size: 20px; }
.strip .sep { width: 1px; height: 16px; background: var(--line-2); }
.strip a, .strip .linkish { color: var(--accent); font-weight: 600; }
@media (max-width: 600px) { .strip { font-size: 14px; gap: 8px 16px; padding-top: 14px; } .strip .claim { flex: 0 0 100%; } .strip .sep { display: none; } }
.linkish { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.avail-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 16px; font-size: 14.5px; color: var(--muted); }
.avail-note a, .avail-note .linkish { color: var(--accent); }

/* ------------------------------------------------------------------ sections */
.section { padding-block: 36px 6px; }
.spot + .section { padding-top: 10px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.section-head a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 2px; }
.section-head a:hover { color: var(--text); }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--muted); margin: 20px 0 12px; padding: 0; list-style: none; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--faint); }

/* ------------------------------------------------------------------ game cards */
.grid-games { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1100px) { .grid-games { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .grid-games { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 560px) { .grid-games { gap: 10px; } }
.card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m);
  transition: transform .22s cubic-bezier(.2, .7, .2, 1), box-shadow .22s, border-color .15s; transform-origin: 50% 0; }
.card-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.card-media { position: relative; aspect-ratio: 16 / 9; background: var(--surface-2); overflow: hidden; border-radius: calc(var(--r-m) - 1px) calc(var(--r-m) - 1px) 0 0;
  /* zoom and screenshot fades run on their own compositor layers, which ignore overflow+radius while animating: clip explicitly */
  clip-path: inset(0 round calc(var(--r-m) - 1px) calc(var(--r-m) - 1px) 0 0); isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black); /* Safari drops the radius of animating layers without a mask */ }
.card-media > img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.card.is-open .card-media > img { transform: scale(1.04); }
.card-gg { position: absolute; left: 10px; bottom: 10px; z-index: 2; opacity: .92; }
.card-blank { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(90% 120% at 15% 0%, color-mix(in srgb, var(--ga) 55%, var(--surface-2)), var(--surface-2) 70%); }
.card-blank b { font-family: var(--display); font-weight: 800; font-size: clamp(30px, 4vw, 48px); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--text) 48%, transparent); text-transform: uppercase; line-height: 1; }
.card-gg .gg { width: 26px; height: 26px; font-size: 10.5px; border-radius: 7px; }
.card-shots { position: absolute; inset: 0; }
.card-shots img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s ease; }
.card-shots img.on { opacity: 1; }
.card-dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 5px; opacity: 0; transition: opacity .2s; }
.card-dots i { width: 14px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .45); }
.card-dots i.on { background: #fff; }
.card-badge { position: absolute; right: 10px; top: 10px; z-index: 2; padding: 3px 9px; border-radius: 6px; background: rgba(10, 8, 16, .72); color: #fff; font-size: 12px; font-weight: 650; backdrop-filter: blur(6px); }
.card-body { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; flex: 1; }
.card-title { font-size: 16.5px; font-weight: 700; line-height: 1.25; }
.card-sub { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; min-height: 20px; }
.card-sub .plats { display: inline-flex; gap: 6px; color: var(--faint); margin-left: auto; }
.card-sub .plats .icon { width: 16px; height: 16px; }
.card .verdict { min-height: 44px; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 4px; position: relative; z-index: 2; }
.card-foot .btn { min-height: 36px; padding: 0 16px; font-size: 14px; }
.card-note { font-size: 12.5px; color: var(--faint); }
/* phones: games that work only on a computer */
.card.is-pc .card-media img { filter: grayscale(1) contrast(.92); }
.card.is-pc { background: color-mix(in srgb, var(--surface) 70%, var(--bg)); }
.card.is-pc .card-title { color: var(--muted); }
.card.is-pc .card-gg, .card.is-pc .card-badge { display: none; }
.pc-tag { display: inline-flex; align-items: center; gap: 5px; }
.pc-tag .icon { width: 14px; height: 14px; }
.pc-spoiler summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--r-m); background: var(--surface); cursor: pointer; list-style: none; }
.pc-spoiler summary::-webkit-details-marker { display: none; }
.pc-spoiler summary > .icon { grid-column: 2; grid-row: 1; transition: transform .2s; color: var(--muted); }
.pc-spoiler summary > .muted { grid-column: 1 / -1; }
.section-head > a { white-space: nowrap; }
.pc-spoiler[open] summary { margin-bottom: 14px; }
.pc-spoiler[open] summary > .icon { transform: rotate(180deg); }
.pc-spoiler-title { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 600; font-size: 15px; }
.pc-spoiler-n { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--surface-3); font-family: var(--body); font-size: 12.5px; }
.fav-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; color: var(--muted); display: inline-grid; place-items: center; cursor: pointer; }
.fav-btn:hover { color: var(--accent); border-color: var(--accent); }
.fav-btn[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
.fav-btn .on { display: none; }
.fav-btn[aria-pressed="true"] .on { display: block; }
.fav-btn[aria-pressed="true"] .off { display: none; }
/* the expansion: extra facts slide out below the card; the card itself grows a little over its neighbours */
.card-more { display: none; position: absolute; left: -1px; right: -1px; top: 100%; z-index: 2; padding: 0 14px 14px; background: var(--surface); border: 1px solid var(--line-2); border-top: 0; border-radius: 0 0 var(--r-m) var(--r-m); color: var(--muted); font-size: 14px; }
.card-more p { margin: 0 0 10px; }
.card-more .row { display: flex; flex-wrap: wrap; gap: 6px; }
.card.is-open { z-index: 6; transform: scale(1.045); border-color: var(--line-2); border-bottom-color: transparent; border-radius: var(--r-m) var(--r-m) 0 0;
  box-shadow: 0 28px 60px color-mix(in srgb, var(--ga) 28%, rgba(0, 0, 0, .55)); }
.card.is-open .card-more { display: block; box-shadow: 0 28px 60px color-mix(in srgb, var(--ga) 28%, rgba(0, 0, 0, .55)); }
.card.is-open .card-dots { opacity: 1; }
.card.is-open .card-media { border-radius: var(--r-m) var(--r-m) 0 0; }
.grid-games.has-lead .card.is-wide { grid-column: span 2; }
.card.is-wide .card-media { aspect-ratio: 21 / 9; }
.card.is-wide .card-title { font-size: 22px; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: -.01em; }
.card.is-wide .verdict { font-size: 15px; }
@media (max-width: 820px) { .card.is-wide .card-media { aspect-ratio: 16 / 9; } .card.is-wide .card-title { font-size: 17px; } }
@media (max-width: 560px) {
  .card-body { padding: 10px 10px 12px; gap: 6px; } .card-title { font-size: 14.5px; }
  .card .verdict { font-size: 13px; min-height: 0; } .card .verdict li:nth-child(n+2) { display: none; }
  .card-sub .tag:nth-child(n+2) { display: none; } .card-foot .btn { padding: 0 12px; }
}

/* wide editorial tiles (collections, promo) */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1000px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .tiles { grid-template-columns: 1fr; } }
.tile { position: relative; display: grid; align-content: end; min-height: 220px; padding: 22px; border-radius: var(--r-l); overflow: hidden; color: #fff; text-decoration: none; background: var(--surface-2); isolation: isolate; border: 1px solid var(--line); }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .5s ease; }
.tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 8, 16, .05) 20%, rgba(10, 8, 16, .9) 100%); }
.tile:hover img { transform: scale(1.04); }
.tile h3 { font-family: var(--display); font-weight: 700; font-size: 20px; margin-bottom: 6px; }
.tile p { margin: 0; color: rgba(255, 255, 255, .78); font-size: 14.5px; }
.tile .tile-n { position: absolute; top: 16px; right: 16px; padding: 3px 10px; border-radius: 999px; background: rgba(10, 8, 16, .6); font-size: 12.5px; backdrop-filter: blur(6px); }
.promo { display: grid; grid-template-columns: 1.1fr 1fr; border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--line-2); background: var(--surface); }
.promo-copy { padding: 30px; display: grid; align-content: center; gap: 12px; justify-items: start; }
.promo-copy .row-wrap { display: flex; gap: 10px; flex-wrap: wrap; }
.promo-copy h2 { font-family: var(--display); font-weight: 600; font-size: clamp(22px, 2.4vw, 28px); }
.promo-copy p { color: var(--muted); margin: 0 0 6px; }
.promo-art { position: relative; min-height: 220px; background: var(--surface-2); }
.promo-wall { overflow: hidden; background: radial-gradient(70% 90% at 50% 55%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 72%), var(--surface-2); }
.promo-wall .poster { position: absolute; left: 50%; top: 50%; width: 42%; aspect-ratio: 16 / 9; margin: -11.8% 0 0 -21%; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 24px 50px rgba(0, 0, 0, .5), 0 0 0 1px color-mix(in srgb, var(--ga) 30%, transparent); background: var(--surface); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.promo-wall .poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.promo-wall .poster:nth-child(1) { transform: translate(-56%, 10%) rotate(-12deg); z-index: 1; }
.promo-wall .poster:nth-child(2) { transform: translate(-28%, -1%) rotate(-6deg); z-index: 2; }
.promo-wall .poster:nth-child(3) { transform: translate(0, -6%); z-index: 3; }
.promo-wall .poster:nth-child(4) { transform: translate(28%, -1%) rotate(6deg); z-index: 2; }
.promo-wall .poster:nth-child(5) { transform: translate(56%, 10%) rotate(12deg); z-index: 1; }
.promo:hover .poster:nth-child(1) { transform: translate(-64%, 12%) rotate(-14deg); } .promo:hover .poster:nth-child(2) { transform: translate(-32%, -2%) rotate(-7deg); }
.promo:hover .poster:nth-child(3) { transform: translate(0, -9%) scale(1.04); } .promo:hover .poster:nth-child(4) { transform: translate(32%, -2%) rotate(7deg); } .promo:hover .poster:nth-child(5) { transform: translate(64%, 12%) rotate(14deg); }
.promo-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .promo { grid-template-columns: 1fr; } .promo-art { min-height: 180px; order: -1; } }

/* ------------------------------------------------------------------ catalog */
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 18px 0 22px; }
.select { position: relative; }
.select select { appearance: none; height: 40px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); padding: 0 38px 0 16px; font-weight: 600; font-size: 14px; cursor: pointer; }
.select .icon { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--muted); }
.pager { display: flex; gap: 8px; justify-content: center; align-items: center; margin: 34px 0 10px; flex-wrap: wrap; }
.pager a, .pager span { min-width: 42px; height: 42px; display: inline-grid; place-items: center; border-radius: 12px; border: 1px solid var(--line); color: var(--text); text-decoration: none; padding: 0 12px; font-weight: 600; }
.pager a:hover { border-color: var(--line-2); }
.pager [aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.empty { padding: 48px 20px; text-align: center; color: var(--muted); border: 1px dashed var(--line-2); border-radius: var(--r-m); }

/* ------------------------------------------------------------------ game page */
.game-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 36px; align-items: start; padding: 10px 0 8px; }
.game-hero::before { content: ""; position: absolute; inset: -40px -12% 30% -12%; z-index: -1; background: radial-gradient(60% 70% at 30% 20%, color-mix(in srgb, var(--ga) 22%, transparent), transparent 70%); pointer-events: none; }
.game-cover { position: relative; border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); aspect-ratio: 16 / 9; box-shadow: 0 30px 70px color-mix(in srgb, var(--ga) 30%, rgba(0, 0, 0, .45)); }
.game-cover img { width: 100%; height: 100%; object-fit: cover; }
.game-cover.is-small::before { content: ""; position: absolute; inset: -30px; background: var(--cover-bg) center / cover no-repeat; filter: blur(26px) brightness(.55) saturate(1.2); }
.game-cover.is-small img { position: relative; object-fit: contain; }
.game-info h1 { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(26px, 3.2vw, 42px); margin: 6px 0 12px; letter-spacing: -.015em; line-height: 1.02; text-wrap: balance; }
.game-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.game-short { color: var(--muted); font-size: 17px; margin: 0 0 18px; }
.game-info .verdict { margin: 0 0 20px; }
.cta-box { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-m); padding: 16px; display: grid; gap: 12px; }
.cta-row { display: flex; gap: 10px; align-items: center; }
.cta-row .btn-lg { flex: 1; }
.cta-note { font-size: 12.5px; color: var(--faint); margin: 0; }
.works-in { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.works-in .flag-emoji { font-size: 17px; }
.notice { display: flex; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface-2); }
.notice .icon { color: var(--plus); margin-top: 2px; }
.notice p { margin: 2px 0 0; color: var(--muted); font-size: 14.5px; }
.platforms { display: flex; gap: 10px; flex-wrap: wrap; }
.platform { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--muted); }
.game-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; margin-top: 36px; }
.game-grid > *, .game-hero > *, .article-layout > * { min-width: 0; }
.game-grid .section-title { margin-bottom: 14px; }
.facts { border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; background: var(--surface); }
.facts h2 { font-size: 15px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-family: var(--display); font-weight: 600; }
.facts dl { margin: 0; display: grid; grid-template-columns: auto 1fr; }
.facts dt, .facts dd { padding: 9px 16px; border-bottom: 1px solid var(--line); margin: 0; font-size: 14.5px; }
.facts dt { color: var(--muted); }
.facts dd { text-align: right; font-weight: 600; }
.facts dl > :nth-last-child(-n+2) { border-bottom: 0; }
.facts-src { margin: 0; padding: 10px 16px; color: var(--muted); font-size: 13px; border-top: 1px solid var(--line); }
.features { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 14px 0 8px; padding: 0; list-style: none; }
.features li { padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--ga); }
.features strong { display: block; margin-bottom: 4px; }
.features p { margin: 0; color: var(--muted); font-size: 14.5px; }
.gallery { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 44%); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; margin-top: 14px; scrollbar-width: thin; }
.gallery button { padding: 0; border: 0; border-radius: 14px; overflow: hidden; cursor: zoom-in; scroll-snap-align: start; background: var(--surface-2); aspect-ratio: 16 / 9; }
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.lightbox img { max-width: 94vw; max-height: 88vh; border-radius: 12px; }
.proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.proscons div { padding: 16px; border: 1px solid var(--line); border-radius: 14px; }
.proscons ul { margin: 8px 0 0; padding-left: 18px; }
.sticky-cta { display: none; }
/* phones: a bottom tab bar, like an app */
.tabbar { display: none; }
@media (max-width: 820px) {
  :root { --tabbar-h: 60px; }
  body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: var(--header-bg); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); border-top: 1px solid var(--line); }
  .tabbar a, .tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 10.5px; font-weight: 600; letter-spacing: .01em; text-decoration: none; border-radius: 12px; transition: transform .12s, color .15s; padding: 0; min-height: 44px; cursor: pointer; }
  .tabbar .icon { width: 24px; height: 24px; }
  .tabbar a[aria-current="page"] { color: var(--accent); }
  .tabbar a[aria-current="page"] .icon { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 55%, transparent)); }
  .has-sticky .sticky-cta { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: 10px; }
  .site-header .wrap { min-height: 58px; }
  .site-header .header-actions .search-toggle, .site-header .header-actions a[href$="/my/"], .site-header .menu-btn { display: none; }
}
@media (max-width: 960px) {
  .game-hero { grid-template-columns: 1fr; gap: 18px; }
  .game-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .proscons { grid-template-columns: 1fr; }
  .sticky-cta { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; gap: 10px; align-items: center; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: var(--header-bg); backdrop-filter: blur(12px); border-top: 1px solid var(--line-2); transform: translateY(110%); transition: transform .2s ease; }
  .sticky-cta.show { transform: none; }
  .sticky-cta .btn { flex: 1; }
  .sticky-cta strong { font-size: 14px; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ------------------------------------------------------------------ prose, articles, pages */
.prose { font-size: 17px; line-height: 1.7; max-width: 70ch; }
.prose h2 { font-family: var(--display); font-weight: 600; font-size: 22px; margin: 1.6em 0 .5em; }
.prose h3 { font-size: 19px; margin: 1.4em 0 .4em; }
.prose p { margin: 0 0 1em; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1em; }
.prose li { margin: .3em 0; }
.prose img, .prose video { border-radius: 14px; margin: 1.2em 0; width: 100%; background: #000; }
.prose a.ginfo__play, .prose a[rel~="sponsored"] { display: inline-flex; align-items: center; gap: .5em; min-height: 44px; padding: 0 22px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); text-decoration: none; font-weight: 700; margin: .4em 0 1.2em; }
.prose blockquote { margin: 1.2em 0; padding: 4px 18px; border-left: 3px solid var(--accent); color: var(--muted); }
.prose table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 15px; }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: left; }
.article-head { max-width: 860px; margin: 0 auto; }
.article-head h1 { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 3.6vw, 42px); margin: 6px 0 14px; letter-spacing: -.01em; }
.article-meta { color: var(--muted); font-size: 14px; display: flex; gap: 14px; flex-wrap: wrap; }
.article-cover { max-width: 1040px; margin: 26px auto; border-radius: var(--r-l); overflow: hidden; aspect-ratio: 16 / 8; background: var(--surface-2); }
.article-cover img { width: 100%; height: 100%; object-fit: cover; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; max-width: 1140px; margin: 0 auto; }
.article-aside h2 { font-size: 15px; margin-bottom: 12px; font-family: var(--display); font-weight: 600; }
.mini-list { display: grid; gap: 8px; }
.mini { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; text-decoration: none; color: var(--text); padding: 6px; border-radius: 12px; }
.mini:hover { background: var(--surface); color: var(--text); }
.mini img { width: 96px; height: 54px; object-fit: cover; border-radius: 8px; }
.mini strong { font-size: 14.5px; line-height: 1.3; display: block; }
.mini small { color: var(--muted); }
@media (max-width: 960px) { .article-layout { grid-template-columns: 1fr; } }
.sources { font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); margin-top: 32px; padding-top: 14px; }
.sources ol { padding-left: 18px; }
.grid-articles { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.a-card { position: relative; display: flex; flex-direction: column; border-radius: var(--r-m); overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.a-card .card-media { aspect-ratio: 16 / 9; border-radius: 0; }
.a-card .card-media:empty { display: none; }
.a-card h3 { font-size: 17px; line-height: 1.3; margin: 0; }
.a-card h3 a { color: var(--text); text-decoration: none; }
.a-card h3 a::after { content: ""; position: absolute; inset: 0; }
.a-card p { color: var(--muted); font-size: 14.5px; margin: 0; }
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.about p { color: var(--muted); }
@media (max-width: 860px) { .about { grid-template-columns: 1fr; gap: 20px; } }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 15px 34px 15px 0; font-weight: 650; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg); transition: transform .15s; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { margin: 0 0 16px; color: var(--muted); }

/* ------------------------------------------------------------------ quiz, my list, archive, 404 */
.quiz { max-width: 760px; margin: 0 auto; }
.quiz-progress { height: 5px; border-radius: 6px; background: var(--surface-2); overflow: hidden; margin: 18px 0 26px; }
.quiz-progress span { display: block; height: 100%; background: var(--accent); width: 0; transition: width .25s ease; }
.quiz-q h2 { font-family: var(--display); font-weight: 600; font-size: clamp(21px, 2.8vw, 28px); margin-bottom: 18px; }
.quiz-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.quiz-options button { text-align: left; padding: 16px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface); cursor: pointer; display: grid; gap: 4px; }
.quiz-options button:hover { border-color: var(--accent); }
.quiz-options button[aria-pressed="true"] { border-color: var(--accent); background: var(--surface-2); }
.quiz-options small { color: var(--muted); }
.quiz-nav { display: flex; justify-content: space-between; margin-top: 22px; gap: 12px; }
.list-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0; }
.arch-group { margin-top: 22px; }
.arch-group h2 { margin: 0 0 8px; font-size: 18px; color: var(--muted); }
.arch-group ul { list-style: none; margin: 0; padding: 0; columns: 3 220px; column-gap: 24px; }
.arch-group li { padding: 3px 0; break-inside: avoid; }
.notfound { text-align: center; padding: 70px 0 30px; }
.notfound h1 { font-family: var(--display); font-weight: 800; font-size: clamp(34px, 6vw, 64px); margin-bottom: 10px; }

/* ------------------------------------------------------------------ footer */
.site-footer { margin-top: 72px; border-top: 1px solid var(--line); background: var(--bg-2); padding: 40px 0 26px; font-size: 14.5px; position: relative; overflow: hidden; }
.site-footer::before { content: "GG"; position: absolute; right: -2vw; bottom: -6vw; font-family: var(--display); font-weight: 800; font-size: clamp(160px, 26vw, 420px); line-height: 1; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--text) 10%, transparent); pointer-events: none; letter-spacing: -.06em; }
.footer-claim { font-family: var(--display); font-weight: 700; font-size: 20px; margin: 10px 0 6px; }
.footer-claim .gg { vertical-align: -8px; margin-right: 8px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; }
.site-footer h2 { font-size: 13px; color: var(--muted); font-weight: 650; margin-bottom: 10px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.site-footer a { color: var(--text); text-decoration: none; }
.site-footer a:hover { color: var(--accent); }
.footer-note { color: var(--muted); margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 960px) { body.has-sticky .site-footer { padding-bottom: 96px; } }

/* ------------------------------------------------------------------ motion */
@media (prefers-reduced-motion: no-preference) {
  .spot-art img { animation: spot-in .9s cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes spot-in { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .card.is-open { transform: none; }
}

/* ------------------------------------------------------------------ collections */
.tile-tall { min-height: 260px; }
.col-head { position: relative; isolation: isolate; padding: 8px 0 26px; }
.col-head.is-cinema { background: var(--bg-2); border-block: 1px solid var(--line); padding: 36px 0; margin-bottom: 10px; overflow: hidden; }
.col-head.is-cinema::before { content: ""; position: absolute; inset: -60px; z-index: -2; background: var(--col-bg) center / cover no-repeat; filter: blur(44px) saturate(1.2); opacity: .35; }
.col-head.is-cinema::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 70%, transparent), var(--bg)); }
.col-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.col-head .page-title { max-width: 24ch; text-wrap: balance; }
.col-intro { margin-top: 14px; }
.col-toc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.col-toc a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); text-decoration: none; font-size: 13.5px; }
.col-toc a:hover { color: var(--text); border-color: var(--line-2); }
.col-toc b { color: var(--accent); font-weight: 800; }
.col-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.col-item { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); gap: 26px; align-items: start; padding: 0 0 22px; border-bottom: 1px solid var(--line); scroll-margin-top: 90px; }
.col-item:last-child { border-bottom: 0; }
.col-art { display: block; aspect-ratio: 16 / 9; border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); box-shadow: 0 18px 44px color-mix(in srgb, var(--ga) 22%, rgba(0, 0, 0, .35)); }
.col-art img { width: 100%; height: 100%; object-fit: cover; }
.col-copy { position: relative; display: grid; gap: 10px; }
.col-copy h2 { font-family: var(--display); font-weight: 700; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.1; }
.col-copy h2 a { color: var(--text); text-decoration: none; }
.col-copy h2 a:hover { color: var(--accent); }
.col-n { font-family: var(--display); font-weight: 800; font-size: 40px; line-height: .9; color: var(--ga); letter-spacing: -.03em; }
.is-cinematic .col-item { grid-template-columns: 1fr; gap: 14px; }
.is-cinematic .col-art { aspect-ratio: 21 / 9; }
.is-cinematic .col-n { position: absolute; right: 0; top: -4px; font-size: 64px; opacity: .55; }
.col-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.col-blurb { margin: 0; font-size: 16.5px; line-height: 1.6; max-width: 62ch; }
.col-who { margin: 0; font-size: 14.5px; }
.col-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.col-shots img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; }
.col-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.col-notes { display: grid; gap: 18px; margin-top: 30px; max-width: 70ch; }
.col-note h2 { font-size: 19px; margin-bottom: 6px; }
.col-note p { margin: 0 0 6px; }
.col-outro { margin-top: 34px; }
.col-faq { margin-top: 34px; max-width: 70ch; }
.col-faq .section-title { margin-bottom: 6px; }
.compare-t { border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: 14.5px; }
.compare-t th, .compare-t td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; min-width: 180px; }
.compare-t thead th { background: var(--surface); position: sticky; top: 66px; z-index: 1; }
.compare-t thead th:first-child, .compare-t tbody th { min-width: 120px; color: var(--muted); font-weight: 600; background: var(--bg); position: sticky; left: 0; }
.compare-t thead a { display: grid; gap: 8px; color: var(--text); text-decoration: none; }
.compare-t thead img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; }
@media (max-width: 760px) {
  .col-item { grid-template-columns: 1fr; gap: 12px; }
  .col-n { font-size: 30px; }
  .is-cinematic .col-n { font-size: 44px; }
  .col-actions .btn { flex: 1 1 auto; }
}

/* "for you" row */
.for-you { margin-top: 10px; }

/* ------------------------------------------------------------------ game DNA */
.dna-head { display: grid; justify-items: start; gap: 4px; margin-top: 6px; }
.dna-head .lead { margin-top: 6px; }
.dna-card { position: relative; margin-top: 26px; padding: 26px; border-radius: var(--r-l); background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%); border: 1px solid var(--line-2); overflow: hidden; }
.dna-card::after { content: "GG"; position: absolute; right: -10px; top: -30px; font-family: var(--display); font-weight: 800; font-size: 180px; line-height: 1; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--accent) 35%, transparent); pointer-events: none; }
.dna-card.is-shared { border-color: var(--accent); }
.dna-arch { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 8px 0 2px; }
.dna-arch-k { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(26px, 4vw, 44px); letter-spacing: -.02em; background: linear-gradient(90deg, var(--accent), #8f6bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dna-arch-2 { font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--muted); }
.dna-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 10px; }
.dna-h { font-size: 14px; color: var(--muted); margin-bottom: 8px; font-weight: 600; }
.dna-genres { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dna-genres li { display: grid; grid-template-columns: 110px 1fr 44px; gap: 10px; align-items: center; font-size: 14.5px; }
.dna-genres i { display: block; height: 8px; border-radius: 99px; background: var(--surface-3); position: relative; overflow: hidden; }
.dna-genres i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--accent); border-radius: inherit; }
.dna-genres b { text-align: right; font-variant-numeric: tabular-nums; }
.dna-axes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.dna-axes li { display: grid; grid-template-columns: 90px 1fr 90px; gap: 10px; align-items: center; font-size: 13.5px; color: var(--muted); }
.dna-axes li span:last-child { text-align: right; }
.dna-axes i { position: relative; display: block; height: 6px; border-radius: 99px; background: var(--surface-3); }
.dna-axes i::after { content: ""; position: absolute; top: 50%; left: var(--v); width: 16px; height: 16px; border-radius: 50%; background: var(--accent); transform: translate(-50%, -50%); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
.dna-saved { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 16px; }
.dna-saved a { display: block; width: 92px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--surface-3); border: 1px solid var(--line); }
.dna-saved img { width: 100%; height: 100%; object-fit: cover; }
.dna-saved span { display: grid; place-items: center; height: 100%; font-size: 11px; padding: 4px; text-align: center; color: var(--muted); }
.row-wrap { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 700px) { .dna-grid { grid-template-columns: 1fr; } .dna-card { padding: 18px; } .dna-card::after { font-size: 120px; } }
.cta-links { display: flex; gap: 14px; font-size: 14px; }
.cta-links a { color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.cta-links a:hover { color: var(--text); }
.compare-games thead th { min-width: 220px; }
.compare-games thead a span { font-family: var(--display); font-weight: 700; font-size: 16px; }

/* Country list scrolls independently; language choices always remain visible. */
#country-sheet .sheet { display: flex; flex-direction: column; overflow: hidden; max-height: min(86dvh, 860px); }
#country-sheet .sheet-head, #country-sheet .country-find { flex-shrink: 0; }
.country-scroll { overflow-y: auto; min-height: 0; overscroll-behavior: contain; scrollbar-gutter: stable; }
#country-sheet .lang-row { flex-shrink: 0; margin: 16px -22px -22px; padding: 16px 22px max(18px, env(safe-area-inset-bottom)); background: var(--surface-2); border-top: 1px solid var(--line-2); gap: 6px; }
#country-sheet .lang-row > .muted { width: 100%; font-size: 12px; font-weight: 650; letter-spacing: .04em; }
#country-sheet .lang-row .chip { font-size: 12px; padding: 6px 10px; }
@media (max-width: 480px) { #country-sheet .sheet { max-height: 90dvh; padding: 16px; } #country-sheet .lang-row { margin: 12px -16px -16px; padding: 12px 16px max(14px, env(safe-area-inset-bottom)); } }

.show + .section { padding-top: 16px; }

.show-lines li:nth-child(n+3) { display: none; }
@media (max-width: 900px) {
  .show-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 45%, var(--bg) 100%); }
}