/* ────────────────────────────────────────────────────────
   thegoonergames.com — Netflix-style category rows
   ──────────────────────────────────────────────────────── */

/* fonts (self-hosted, latin subset) */
/* Variable font covering the full weight axis (100–900) in one file, so every
   weight the CSS uses (500/600/800 included) renders from real glyphs instead
   of the browser faking them — the faux-bold synthesis looked broken on
   Windows (odd a / A). */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/montserrat-var.woff2') format('woff2');
}
/* Belt-and-suspenders: never synthesize a missing weight. */
body { font-synthesis-weight: none; }

/* ── design tokens ──────────────────────────────────── */
:root {
  --bg: #0f0d11;
  --surface: #1a1614;
  --surface-alt: #231d1a;
  --surface-hi: #2a221d;
  --hairline: rgba(255, 240, 220, 0.06);
  --hairline-strong: rgba(255, 240, 220, 0.12);
  --text: #f5ede1;
  --text-muted: #a89c8b;
  --text-dim: #7a6f63;
  --heading: #fff8ec;
  --accent: #e8c074;
  --accent-hover: #f5d68a;
  --danger: #d97a6c;
  --fresh: #87b87a;

  --font: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;

  --container: 1320px;
  --container-narrow: 720px;

  --shadow-card: 0 1px 0 var(--hairline), 0 10px 24px -12px rgba(0, 0, 0, 0.6);
  --shadow-card-hover: 0 1px 0 var(--hairline-strong), 0 18px 40px -12px rgba(0, 0, 0, 0.8);
}

/* (tag palette removed — chips now use a single ghost style) */

/* ── reset / base ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; tab-size: 4; scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { border: none; background: none; padding: 0; cursor: pointer; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
h1, h2, h3, h4 { margin: 0; color: var(--heading); font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; }
p { margin: 0 0 0.8em; }

::selection { background: var(--accent); color: #1a1410; }

/* ── layout ─────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.container--narrow { max-width: var(--container-narrow); }
/* Wider shell for the catalogue so the grid uses more of the screen — same
   column count, bigger cards. */
.container--catalogue { max-width: 1600px; }
/* Game page: everything (title, tags, info, downloads, description) lines up
   at the player's width — a wide, consistent column like porngameshub. */
.container--game { max-width: min(1120px, 94vw); }
.is-hidden { display: none !important; }
.muted { color: var(--text-muted); }

/* ── topbar (minimal — just logo) ──────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(15, 13, 17, 0.78);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.topbar__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.logo { flex-shrink: 0; }

/* header instant search */
.hsearch { position: relative; flex: 1 1 auto; max-width: 640px; margin: 0 auto; min-width: 0; }
.hsearch__icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--text-muted); pointer-events: none; }
.hsearch__input {
  width: 100%; height: 40px; padding: 0 34px 0 38px;
  background: var(--surface-hi); border: 1px solid var(--hairline-strong); border-radius: 10px;
  color: var(--text); font-size: 14px; font-weight: 600; outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.hsearch__input::placeholder { color: var(--text-muted); font-weight: 500; }
.hsearch__input:focus { border-color: var(--accent); }
.hsearch__clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border: 0; background: none; color: var(--text-muted); font-size: 20px; line-height: 1; cursor: pointer; border-radius: 6px; }
.hsearch__clear:hover { color: var(--heading); background: var(--hairline); }
.hsearch__results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  max-height: min(70vh, 520px); overflow-y: auto;
  background: var(--surface-alt); border: 1px solid var(--hairline-strong); border-radius: 12px;
  box-shadow: 0 20px 50px -18px rgba(0, 0, 0, 0.85); padding: 6px; z-index: 60;
}
.hsearch__item { display: flex; align-items: center; gap: 11px; padding: 8px; border-radius: 9px; text-decoration: none; color: var(--text); }
.hsearch__item:hover, .hsearch__item.is-active { background: var(--hairline); }
.hsearch__thumb { width: 52px; height: 34px; object-fit: cover; border-radius: 6px; flex-shrink: 0; background: var(--hairline); }
.hsearch__thumb--none { display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); font-weight: 800; font-size: 15px; }
.hsearch__metacol { display: flex; flex-direction: column; min-width: 0; }
.hsearch__title { font-size: 13.5px; font-weight: 700; color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hsearch__dev { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hsearch__empty { padding: 16px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* header row 2: nav strip (Top Rated / Popular / Tags) */
.topbar__nav { border-top: 1px solid var(--hairline); position: relative; }
.topbar__nav-inner { max-width: var(--container); margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 6px; }
.tnav__link { display: inline-flex; align-items: center; gap: 7px; height: 46px; padding: 0 14px; background: none; border: 0; color: var(--text-muted); font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; border-bottom: 2px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; }
.tnav__link:hover { color: var(--heading); }
.tnav__link .tnav__ico { color: var(--accent); flex-shrink: 0; }
.tnav__tags { margin-left: auto; }
.hbrowse { position: static; }
.hbrowse__btn { display: inline-flex; align-items: center; gap: 5px; height: 38px; padding: 0 14px; background: none; border: 1px solid transparent; border-radius: 9px; color: var(--text); font-size: 14px; font-weight: 700; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.hbrowse__btn:hover, .hbrowse__btn[aria-expanded="true"] { background: var(--hairline); color: var(--heading); }
.tnav__tags[aria-expanded="true"] { color: var(--heading); }
.hbrowse__panel {
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); width: min(94vw, 680px);
  background: var(--surface-alt); border: 1px solid var(--hairline-strong); border-radius: 12px;
  box-shadow: 0 20px 50px -18px rgba(0, 0, 0, 0.85); padding: 10px; z-index: 60;
}
.hbrowse__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; max-height: min(62vh, 540px); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 760px) { .hbrowse__grid { grid-template-columns: 1fr 1fr; } }
.hbrowse__item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--text); font-size: 13.5px; font-weight: 600; }
.hbrowse__item:hover { background: var(--hairline); color: var(--heading); }
.hbrowse__count { font-size: 11px; color: var(--text-dim); font-weight: 600; }
.hbrowse__all { display: block; margin-top: 6px; padding: 9px 10px; text-align: center; border-top: 1px solid var(--hairline); color: var(--accent); font-size: 13px; font-weight: 700; text-decoration: none; }
.hbrowse__all:hover { color: var(--accent-hover); }

@media (max-width: 760px) {
  .topbar__inner { flex-wrap: wrap; row-gap: 11px; gap: 10px; }
  .hsearch { order: 3; flex: 1 1 100%; max-width: none; margin: 0; }
  .topbar__nav-inner { padding: 0 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .topbar__nav-inner::-webkit-scrollbar { display: none; }
  .tnav__link { white-space: nowrap; height: 44px; }
}

/* listing pages: /top-rated/, /popular/ */
.list-main { padding: 28px 0 64px; }
.list__head { margin-bottom: 22px; }
.list__title { font-size: 28px; font-weight: 800; color: var(--heading); letter-spacing: -0.01em; }
.list__sub { margin-top: 8px; color: var(--text-muted); font-size: 15px; max-width: 640px; }
.list-grid:not(.list-grid--ready) .tile:nth-child(n+49) { display: none; }
.list__empty { text-align: center; color: var(--text-muted); padding: 44px 0; }
.list__toggle { display: inline-flex; gap: 3px; margin-top: 14px; padding: 3px; background: var(--surface-hi); border: 1px solid var(--hairline-strong); border-radius: 10px; }
.list__toggle-btn { padding: 8px 16px; background: none; border: 0; border-radius: 8px; color: var(--text-muted); font-size: 13px; font-weight: 700; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.list__toggle-btn:hover { color: var(--heading); }
.list__toggle-btn.is-active { background: var(--accent); color: var(--bg); }
.list__more-wrap { display: flex; justify-content: center; margin-top: 30px; }
.list__more { padding: 12px 28px; background: var(--surface-hi); border: 1px solid var(--hairline-strong); border-radius: 10px; color: var(--heading); font-size: 14px; font-weight: 700; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; }
.list__more:hover { border-color: var(--accent); }
.list__more[hidden] { display: none; }
.logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--heading);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
.logo:hover { color: var(--heading); }
.logo__mark { color: var(--accent); font-size: 13px; }
.logo__word { white-space: nowrap; }

/* Image logo (when the user drops logo.png/svg/... in import/). */
.logo--img { padding: 0; }
.logo__img { display: block; height: 40px; width: auto; max-width: 220px; object-fit: contain; }
@media (max-width: 600px) {
  .logo__img { height: 34px; max-width: 180px; }
}

/* ── hero cinema (home) ─────────────────────────────── */
.hero-cinema {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  margin-bottom: 12px;
}
@media (max-width: 600px) {
  .hero-cinema { min-height: 420px; }
}
/* mediaTag() wraps the bg <img> in a <picture> for AVIF/WebP/srcset. We need
   the wrapper itself to fill the section (not just the img inside) so the
   absolute positioning + object-fit cover actually take effect. */
.hero-cinema > picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hero-cinema__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.55) saturate(0.9);
}
/* Same wrapper-needs-dimensions story for the game-page banner + tile media. */
.game__banner > picture,
.tile__media > picture {
  display: block;
  width: 100%;
  height: 100%;
}
.hero-cinema__overlay {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 100px 0 48px;
  background:
    linear-gradient(180deg, rgba(15,13,17,0) 0%, rgba(15,13,17,0) 30%, rgba(15,13,17,0.85) 80%, var(--bg) 100%),
    linear-gradient(90deg, rgba(15,13,17,0.7) 0%, rgba(15,13,17,0.2) 60%, transparent 100%);
}
.hero-cinema__kicker {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin: 0 0 14px;
}
.hero-cinema__title {
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 700;
  margin: 0 0 14px;
  line-height: 1.05;
  letter-spacing: -0.022em;
  max-width: 22ch;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
.hero-cinema__meta {
  font-size: 14px;
  color: var(--text);
  margin: 0 0 16px;
  font-weight: 400;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.hero-cinema__meta-sep { color: var(--text-dim); }
.hero-cinema__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 28px;
  max-width: 600px;
}
.hero-cinema__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hero-cinema__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--accent);
  color: #1a1410;
  padding: 14px 28px;
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.005em;
  transition: background 0.15s ease, transform 0.15s ease;
}
.hero-cinema__cta:hover { background: var(--accent-hover); color: #1a1410; transform: translateY(-1px); }
.hero-cinema__cta-icon { font-size: 13px; transform: translateY(1px); }
.hero-cinema__alt {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 248, 236, 0.1);
  color: var(--heading);
  padding: 14px 24px;
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: 15px;
  border: 1px solid var(--hairline-strong);
  transition: background 0.15s ease;
}
.hero-cinema__alt:hover { background: rgba(255, 248, 236, 0.18); color: var(--heading); }

/* ── rows ───────────────────────────────────────────── */
.rows { padding: 32px 0 80px; }
.row { margin: 0 0 44px; }
.row__head {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.row__title {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}
.row__title-mark { color: var(--accent); font-size: 12px; transform: translateY(-2px); }
.row__see {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.row__see::after { content: ' →'; }
.row__see:hover { color: var(--accent); }

.row__scroll {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding: 0 24px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 24px 16px;
  -webkit-overflow-scrolling: touch;
}
.row__scroll::-webkit-scrollbar { display: none; }

/* row card — compact, image + 2 lines of text */
.tile {
  position: relative;
  flex: 0 0 auto;
  width: 240px;
  display: flex;
  flex-direction: column;
  color: var(--text);
  text-decoration: none;
  scroll-snap-align: start;
  border: 2px solid transparent; /* reserved so hover accent adds no layout shift */
  border-radius: var(--r-md);
  transition: transform 0.2s ease;
}
.tile:hover { color: var(--text); transform: translateY(-3px); }
/* Hover/open = F95-style highlighted card: accent ring around cover+body that
   merges seamlessly into the tag panel dropping below (border-bottom removed). */
.tile:hover,
.tile--tags-open {
  z-index: 20;
  background: var(--surface);
  border-color: var(--accent);
  border-bottom-color: transparent;
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.tile__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--surface-alt);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.2s ease;
}
.tile:hover .tile__media { box-shadow: var(--shadow-card-hover); }
.tile__img {
  width: 100%;
  height: 100%;
  /* Fill the frame (no letterbox bars). Very wide banners are swapped for the
     first screenshot at build time so cover-cropping stays gentle. */
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s ease;
}
.tile__img.tile__img--zoom { object-fit: cover; object-position: center; }
.tile:hover .tile__img { transform: scale(1.04); }
.tile__img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--surface-alt) 0%, var(--surface-hi) 100%);
  color: var(--text-dim);
  font-size: 48px;
  font-weight: 700;
}
.tile__fresh {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--fresh);
  color: #142010;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
/* F95-style tag panel: drops BELOW the card on hover/open, showing every tag as
   accent pills. It overlaps the tiles beneath (absolute, high z-index) and its
   accent border continues seamlessly from the card's ring above. */
.tile__tags {
  position: absolute;
  top: 100%;
  /* absolute insets resolve against the padding box (inside the tile's 2px
     border), so pull out 2px each side to line up with the card's accent ring */
  left: -2px;
  right: -2px;
  z-index: 21;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 10px;
  max-height: min(440px, 72vh);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: var(--surface);
  border: 2px solid var(--accent);
  border-top: none;
  border-radius: 0 0 var(--r-md) var(--r-md);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  pointer-events: none;
}
.tile:hover .tile__tags,
.tile--tags-open .tile__tags {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.tile__tags::-webkit-scrollbar { width: 6px; }
.tile__tags::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.25); border-radius: 3px; }
/* our users' average rating badge on a card */
.tile__rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--heading);
  font-variant-numeric: tabular-nums;
}
.tile__rating[hidden] { display: none; }
.tile__rating-star { color: var(--accent); font-size: 13px; line-height: 1; }
.tile__rating-cnt { color: var(--text-muted); font-weight: 500; font-size: 11.5px; }
/* right-side cluster on a card: like count + rating badge */
.tile__botend { margin-left: auto; display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; }
.tile__botend .tile__rating { margin-left: 0; }
.tile__like {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--heading);
  font-variant-numeric: tabular-nums;
}
.tile__like[hidden] { display: none; }
.tile__like-heart { color: #ff5c7a; font-size: 12.5px; line-height: 1; }

.tile__tag {
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.3;
  color: #1a1410;
  background: var(--accent);
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Tap-to-reveal tag button — touch only (hidden on hover-capable devices) */
.tile__tags-toggle {
  display: none;
}
@media (hover: none) {
  /* No hover: tags stay hidden (and non-blocking) until the tag button is tapped.
     Sticky-hover on tap must not leave an invisible overlay eating taps. The
     :not(.tile--tags-open) is critical — a tap makes the tile BOTH sticky-hover
     AND open, and this higher-specificity rule would otherwise re-hide the panel. */
  .tile:hover:not(.tile--tags-open) .tile__tags { opacity: 0; transform: translateY(8px); pointer-events: none; }
  .tile--tags-open .tile__tags {
    opacity: 1;
    transform: translateY(0);
  }
  .tile__tags-toggle {
    position: absolute;
    right: 6px;
    bottom: 6px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #fff;
    background: rgba(10, 8, 12, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    pointer-events: auto;
    touch-action: manipulation;
  }
  /* Invisible extended hit area (~62px) so a slightly-off tap still hits the
     button instead of the underlying game link. Visible circle stays 40px. */
  .tile__tags-toggle::before { content: ''; position: absolute; inset: -11px; border-radius: 50%; }
  .tile__tags-toggle svg { width: 17px; height: 17px; position: relative; }
  .tile--tags-open .tile__tags-toggle {
    background: var(--color-primary, #ff0060);
  }
}

.tile__body {
  padding: 10px 4px 2px;
}
.tile__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--heading);
  line-height: 1.25;
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tile__dev {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 400;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Corner overlays: flush into the cover's corners like little signboards
   (status top-left, size top-right) rather than floating glassy pills. */
.tile__overlay {
  position: absolute;
  top: 0;
  z-index: 2;
  display: flex;
  gap: 5px;
  pointer-events: none;
}
.tile__overlay--tl { left: 0; }
.tile__overlay--tr { right: 0; }

/* Signboard look: solid gradient plaque, crafted edge (inset highlight + drop
   shadow), only the inner corner rounded so it reads as attached to the corner. */
.tile__status,
.tile__dlsize {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.5;
  padding: 4px 9px;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
/* Size: neutral dark plaque; only the play icon is coloured (erogames-style) */
.tile__dlsize {
  border-radius: 0 0 0 9px;
  background: rgba(9, 8, 10, 0.9);
}
.tile__dlsize-icon { width: 14px; height: 14px; flex: none; }
/* Status: solid coloured badge, F95-style */
.tile__status {
  border-radius: 0 0 9px 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.tile__status--done { background: #3f9d52; }
.tile__status--hold { background: #e08a2b; }
.tile__status--dead { background: #cf4b4b; }
.tile__status--early { background: #7c6bd6; }
/* Screenshot counter (1/7) shown bottom-left of the cover, updated on hover-cycle */
.tile__counter {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: #fff;
  background: rgba(10, 8, 12, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 2px 7px;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.tile:hover .tile__counter,
.tile--tags-open .tile__counter { opacity: 1; }
.tile__dlsize--sm .tile__dlsize-icon { color: #4ade80; }
.tile__dlsize--md .tile__dlsize-icon { color: #fbbf24; }
.tile__dlsize--lg .tile__dlsize-icon { color: #f87171; }

/* Body meta row: just the version now (status/size moved onto the image) */
/* bottom info row: engine/version on the left, our rating filling the empty
   space on the right (so the rating adds no extra line) */
.tile__botrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 7px 0 0;
}
.tile__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.tile__engine {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface-hi);
}
.tile__ver {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

/* Tile platform row — itch-style at-a-glance OS / browser indicators */
.tile__platforms {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tile__oses {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tile__os {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  line-height: 1;
}
.tile__os svg, .tile__os img {
  width: 14px;
  height: 14px;
  display: block;
}
/* All 4 OS icons ship as <img> referencing Phosphor SVG files. The SVGs
   declare fill="currentColor" but <img> doesn't see CSS color, so we use
   filter chains to recolor: invert(1) for light-on-dark contexts (tile,
   play button), no-invert for dark-on-light (download button on gold). */
.tile__os img { filter: brightness(0) invert(1) opacity(0.7); }
.cta-btn--dl .cta-btn__os img { filter: brightness(0) opacity(0.85); }
.cta-btn--play .cta-btn__os img { filter: brightness(0) invert(1) opacity(0.85); }
.tile__play {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 6px;
  background: rgba(255, 248, 236, 0.08);
  color: var(--heading);
  border: 1px solid var(--hairline-strong);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.4;
}
.tile__play svg { width: 9px; height: 9px; }

@media (min-width: 600px) { .tile { width: 260px; } }
@media (max-width: 480px) { .tile { width: 200px; } }

/* ── chips (tags) — ghost style, compact ───────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.5;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--hairline-strong);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
  text-transform: lowercase;
}
.chip:hover {
  color: var(--accent);
  border-color: var(--accent);
}
/* Subtle visibility modifier: gay tag gets accent text + heavier weight so
   visitors scanning a long tag-chip row spot it instantly, without the chip
   screaming for attention. */
.chip--gay {
  color: var(--accent);
  font-weight: 700;
}
.chip--gay:hover {
  color: var(--accent-hover);
  border-color: var(--accent);
}
.chip__count {
  font-size: 10.5px;
  color: var(--text-dim);
  font-weight: 400;
}

/* ── section heading (legacy: used by SEO + FAQ sections) ── */
.section__heading {
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 700;
  margin: 0 0 24px;
  letter-spacing: -0.015em;
}

/* ── tag page header ───────────────────────────────── */
.hero {
  padding: 28px 0 18px;
  border-bottom: 1px solid var(--hairline);
  text-align: center;
}
.hero__kicker {
  margin: 0 auto 8px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  max-width: 760px;
}
.hero__title {
  margin: 0 auto 8px;
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.022em;
  max-width: 22ch;
}
.hero__subtitle {
  margin: 0 auto;
  max-width: 70ch;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
}
.hero__subtitle strong { color: var(--text); font-weight: 600; }

/* ── catalogue grid (tag pages) ────────────────────── */
.catalogue { padding: 18px 0 80px; }
.catalogue__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.catalogue__head .section__heading { margin: 0; }
.catalogue__count {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
}
/* Filter bar shown when ?tag= is active. Sits between the heading and the
   grid; pill-shaped active-tag indicator + clear button. */
.catalogue__filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 20px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
}
.catalogue__filter-bar[hidden] { display: none; }
.catalogue__filter-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.catalogue__filter-tag {
  padding: 3px 10px;
  background: var(--accent);
  color: #1a1410;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-transform: capitalize;
}
.catalogue__filter-clear {
  margin-left: auto;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--text);
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.catalogue__filter-clear:hover { background: var(--hairline); }
.catalogue__empty {
  margin: 0 0 20px;
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px dashed var(--hairline);
  border-radius: var(--r-sm);
}
.catalogue__empty[hidden] { display: none; }

/* ── catalogue layout with sidebar ──────────────────────────── */
/* Desktop: main grid on the LEFT, filter sidebar on the RIGHT. The aside is
   first in the source for accessibility / mobile drawer behaviour, so we
   place it explicitly via grid-column on desktop. */
.catalogue__layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 24px;
  align-items: start;
  align-content: start;
}
.catalogue__main { min-width: 0; grid-column: 1; grid-row: 1; align-self: start; }
.cat-sidebar { grid-column: 2; grid-row: 1; align-self: start; }
@media (max-width: 768px) {
  .catalogue__layout { grid-template-columns: 1fr; gap: 0; }
  .catalogue__main { grid-column: auto; }
  .cat-sidebar { grid-column: auto; }
}

.cat-sidebar {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 16px;
}
.cat-sidebar__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cat-sidebar__title { font-size: 14px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.cat-sidebar__close { display: none; background: transparent; border: 0; color: var(--text); font-size: 28px; cursor: pointer; padding: 0 6px; }
.cat-sidebar__section { margin-bottom: 18px; }
/* Quick on/off switch to hide AI-generated games */
.cat-ai-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  background: var(--surface-alt);
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.cat-ai-toggle:hover { border-color: var(--accent); }
.cat-ai-toggle.is-on { border-color: var(--accent); }
.cat-ai-toggle__label { flex: 1; text-align: left; }
.cat-ai-toggle__switch {
  position: relative;
  flex: none;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: var(--hairline-strong);
  transition: background 0.18s ease;
}
.cat-ai-toggle.is-on .cat-ai-toggle__switch { background: var(--accent); }
.cat-ai-toggle__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.18s ease;
}
.cat-ai-toggle.is-on .cat-ai-toggle__knob { transform: translateX(14px); }

/* ── Reviews ─────────────────────────────────────────── */
.reviews { margin: 44px 0 8px; }
.reviews__title { font-size: 22px; font-weight: 800; margin: 0 0 16px; }
.reviews__loading, .reviews__empty { color: var(--text-muted); margin: 0; }
.reviews__summary { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.reviews__avg-num { font-size: 34px; font-weight: 800; line-height: 1; color: var(--heading); }
.reviews__count { color: var(--text-muted); font-size: 14px; }
.rev-stars { display: inline-flex; gap: 2px; color: #46403a; font-size: 16px; line-height: 1; }
.rev-star.is-on { color: var(--accent); }
.rev-stars--pick { font-size: 30px; gap: 5px; }
.rev-stars--pick .rev-star { cursor: pointer; transition: transform 0.1s ease; }
.rev-stars--pick .rev-star:hover { transform: scale(1.15); }
.reviews__cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: var(--r-md); padding: 16px 18px; }
.reviews__cta span { color: var(--text-muted); }
.reviews__login { display: inline-flex; align-items: center; gap: 8px; background: #5865f2; color: #fff; border: 0; border-radius: 8px; padding: 10px 16px; font-weight: 700; font-size: 14px; cursor: pointer; transition: background 0.15s ease; }
.reviews__login:hover { background: #4752c4; }
.reviews__form { background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: var(--r-md); padding: 16px 18px; }
.reviews__form-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.reviews__form-title { font-weight: 700; }
.reviews__pick { margin-bottom: 12px; }
.reviews__textarea { width: 100%; min-height: 78px; resize: vertical; background: var(--surface-alt); border: 1px solid var(--hairline-strong); border-radius: 8px; color: var(--text); padding: 10px 12px; font: inherit; font-size: 14px; }
.reviews__textarea:focus { outline: none; border-color: var(--accent); }
.reviews__form-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.reviews__error { color: #f87171; font-size: 13px; flex: 1; }
.reviews__submit { background: var(--accent); color: #1a1410; border: 0; border-radius: 8px; padding: 9px 18px; font-weight: 800; cursor: pointer; transition: background 0.15s ease; }
.reviews__submit:hover { background: var(--accent-hover); }
.reviews__submit:disabled { opacity: 0.6; cursor: default; }
.rev-link { background: none; border: 0; color: var(--text-muted); cursor: pointer; font-size: 13px; text-decoration: underline; padding: 0; }
.rev-link:hover { color: var(--text); }
.rev-link--danger { color: #e07575; }
.reviews__list { margin-top: 24px; display: flex; flex-direction: column; gap: 18px; }
.rev-item { display: flex; gap: 12px; }
.rev-item__avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; object-fit: cover; background: var(--surface-alt); }
.rev-item__avatar--none { display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--text-muted); }
.rev-item__main { flex: 1; min-width: 0; }
.rev-item__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rev-item__name { font-weight: 700; }
.rev-item__date { color: var(--text-dim); font-size: 12px; }
.rev-item__body { margin: 6px 0 0; color: var(--text); font-size: 14px; line-height: 1.55; word-break: break-word; }

/* ── Auth page (/login/) ─────────────────────────────── */
.auth-main { padding: 40px 0 80px; }
.auth { max-width: 400px; margin: 0 auto; }
.auth__back { display: inline-block; color: var(--text-muted); text-decoration: none; font-size: 13px; margin-bottom: 18px; }
.auth__back:hover { color: var(--text); }
.auth__title { font-size: 26px; font-weight: 800; margin: 0 0 6px; }
.auth__sub { color: var(--text-muted); font-size: 14px; margin: 0 0 22px; }
.auth__providers { display: flex; flex-direction: column; gap: 10px; }
.auth__provider { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px 14px; background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: 10px; color: var(--text); font-weight: 600; font-size: 14px; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; }
.auth__provider:hover { border-color: var(--accent); background: var(--surface-alt); }
.auth__provider svg { flex: none; }
.auth__divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--text-dim); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.auth__divider::before, .auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--hairline-strong); }
.auth__form { display: flex; flex-direction: column; gap: 10px; }
.auth__input { width: 100%; padding: 11px 13px; background: var(--surface-alt); border: 1px solid var(--hairline-strong); border-radius: 10px; color: var(--text); font: inherit; font-size: 14px; }
.auth__input:focus { outline: none; border-color: var(--accent); }
.auth__captcha { display: flex; justify-content: center; }
.auth__captcha:empty { display: none; }
.auth__error { color: #f87171; font-size: 13px; min-height: 16px; }
.auth__notice { color: var(--text); font-size: 14px; background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: 10px; padding: 14px; margin: 0; }
.auth__submit { width: 100%; padding: 12px; background: var(--accent); color: #1a1410; border: 0; border-radius: 10px; font-weight: 800; font-size: 15px; cursor: pointer; transition: background 0.15s ease; }
.auth__submit:hover { background: var(--accent-hover); }
.auth__submit:disabled { opacity: 0.6; cursor: default; }
.auth__toggle { text-align: center; color: var(--text-muted); font-size: 13px; margin: 18px 0 0; }
.auth__toggle-btn { background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; }
.auth__toggle-btn:hover { text-decoration: underline; }

/* ── Community: star rating + comments ───────────────── */
.community { margin: 44px 0 8px; }
.rating { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: var(--r-md); padding: 18px 20px; margin-bottom: 30px; }
.rating__loading { color: var(--text-muted); margin: 0; }
.rating__score { display: flex; align-items: baseline; gap: 4px; }
.rating__num { font-size: 40px; font-weight: 800; line-height: 1; color: var(--heading); }
.rating__outof { color: var(--text-dim); font-size: 14px; font-weight: 600; }
.rating__meta { display: flex; flex-direction: column; gap: 4px; }
.rating__count { color: var(--text-muted); font-size: 13px; }
.rating__yours { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.rating__yours-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.rating__signin { margin-left: auto; color: var(--accent); text-decoration: none; font-weight: 700; font-size: 14px; }
.rating__signin:hover { text-decoration: underline; }
.c-stars { display: inline-flex; gap: 2px; color: #46403a; font-size: 18px; line-height: 1; }
.c-star.is-on { color: var(--accent); }
.c-stars--pick { font-size: 26px; gap: 4px; }
.c-stars--pick .c-star { cursor: pointer; transition: transform 0.1s ease; }
.c-stars--pick .c-star:hover { transform: scale(1.12); }

/* description + rating panel side by side (stacks below on mobile) */
.game__body { display: flex; gap: 28px; align-items: flex-start; margin: 0 0 8px; }
.game__body .game__desc { flex: 1 1 auto; min-width: 0; margin: 0; }
.rpanel {
  flex: 0 0 316px;
  width: 316px;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: 14px;
  padding: 18px;
}
.rpanel__loading { color: var(--text-muted); font-size: 13px; margin: 0; }
.rpanel__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 15px; flex-wrap: wrap; }
.rpanel__title { font-size: 17px; font-weight: 800; color: var(--heading); }
.rpanel__nums { display: flex; gap: 14px; font-size: 12.5px; color: var(--text-muted); }
.rpanel__nums b { color: var(--heading); font-weight: 700; }
.rpanel__bars { display: flex; flex-direction: column; gap: 8px; }
.rpanel__row { display: flex; align-items: center; gap: 10px; }
/* bigger, denser row stars with visible empty stars (like the reference) */
.rpanel .c-stars { color: #5e564d; }
.rpanel__row .c-stars { flex-shrink: 0; font-size: 15px; letter-spacing: 2px; white-space: nowrap; }
.rpanel__track { flex: 1; height: 8px; background: var(--surface-hi); border-radius: 6px; overflow: hidden; }
.rpanel__track i { display: block; height: 100%; background: var(--accent); border-radius: 6px; }
.rpanel__num { flex-shrink: 0; min-width: 30px; text-align: right; font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.rpanel__rate { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--hairline); }
.rpanel__rate-label { font-size: 13px; font-weight: 600; color: var(--heading); }
@media (max-width: 860px) {
  .game__body { flex-direction: column; gap: 22px; }
  .rpanel { width: 100%; flex-basis: auto; }
}
.comments__title { font-size: 22px; font-weight: 800; margin: 0 0 16px; }
.comments__loading, .comments__empty { color: var(--text-muted); margin: 14px 0 0; }
.cm-signin { display: inline-block; color: var(--accent); text-decoration: none; font-weight: 700; font-size: 14px; }
.cm-signin:hover { text-decoration: underline; }
.cm-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.cm-form__name { width: 100%; max-width: 260px; padding: 9px 12px; background: var(--surface-alt); border: 1px solid var(--hairline-strong); border-radius: 9px; color: var(--text); font: inherit; font-size: 14px; }
.cm-form__name:focus { outline: none; border-color: var(--accent); }
.cm-form__text { width: 100%; min-height: 80px; resize: vertical; background: var(--surface-alt); border: 1px solid var(--hairline-strong); border-radius: 10px; color: var(--text); padding: 11px 13px; font: inherit; font-size: 14px; }
.cm-form__text:focus { outline: none; border-color: var(--accent); }
.cm-form__captcha:empty { display: none; }
.cm-form__actions { display: flex; align-items: center; gap: 12px; }
.cm-form__error { color: #f87171; font-size: 13px; flex: 1; }
.cm-form__submit { background: var(--accent); color: #1a1410; border: 0; border-radius: 9px; padding: 9px 18px; font-weight: 800; cursor: pointer; transition: background 0.15s ease; }
.cm-form__submit:hover { background: var(--accent-hover); }
.cm-form__submit:disabled { opacity: 0.6; cursor: default; }
.cm-list { display: flex; flex-direction: column; gap: 20px; }
.cm-more {
  margin-top: 20px;
  padding: 10px 18px;
  border-radius: 10px;
  background: var(--surface-alt);
  border: 1px solid var(--hairline-strong);
  color: var(--heading);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.cm-more:hover { border-color: var(--accent); background: var(--surface-hi); }
.cm-item { display: flex; gap: 12px; }
.cm-item__avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; object-fit: cover; background: var(--surface-alt); }
.cm-item__avatar--none { display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--text-muted); }
.cm-item__main { flex: 1; min-width: 0; }
.cm-item__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cm-item__name { font-weight: 700; }
.cm-item__date { color: var(--text-dim); font-size: 12px; }
.cm-item__del { margin-left: auto; }
.cm-item__flag { width: 20px; height: 15px; border-radius: 2px; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(255,255,255,0.12); }
.cm-item__body { margin: 5px 0 0; color: var(--text); font-size: 14px; line-height: 1.55; word-break: break-word; }
/* comment footer: like / dislike / report */
.cm-item__foot { display: flex; align-items: center; gap: 6px; margin-top: 9px; }
.cm-vote {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  color: var(--text-muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 4px 9px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.cm-vote svg { flex-shrink: 0; }
.cm-vote:hover { color: var(--heading); border-color: var(--hairline); }
.cm-vote.is-up { color: var(--accent); border-color: var(--accent); }
.cm-vote.is-down { color: #ff5a6a; border-color: #ff5a6a; }
.cm-reply-link {
  background: none;
  border: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.cm-reply-link:hover { color: var(--accent); }
.cm-report-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-dim);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}
.cm-report-link:hover { color: var(--text); }
/* threaded replies: each nested node carries its own indent (capped in JS);
   a left rail shows the thread relationship. */
.cm-node--reply { border-left: 2px solid var(--hairline-strong); padding-left: 14px; }
/* highlight the comment a notification links to */
.cm-node--flash { animation: cmFlash 2.4s ease; border-radius: 10px; }
@keyframes cmFlash {
  0%, 30% { background: rgba(233, 192, 116, 0.16); box-shadow: 0 0 0 6px rgba(233, 192, 116, 0.16); }
  100% { background: transparent; box-shadow: 0 0 0 6px transparent; }
}
.cm-replyform { margin-top: 12px; margin-bottom: 4px; display: flex; flex-direction: column; gap: 10px; }
.cm-form__cancel {
  background: none;
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  cursor: pointer;
}
.cm-form__cancel:hover { color: var(--heading); border-color: var(--hairline); }

/* ── Header account ── */
.topbar__account { margin-left: auto; position: relative; display: flex; align-items: center; gap: 6px; }
/* notification bell */
.topbar__bell-wrap { position: relative; }
.topbar__bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: none; border: 0; color: var(--text-muted); cursor: pointer; border-radius: 9px; transition: color 0.15s ease, background 0.15s ease; }
.topbar__bell:hover { color: var(--heading); background: var(--hairline); }
.topbar__bell-badge { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #ff3b52; color: #fff; font-size: 10.5px; font-weight: 800; line-height: 16px; text-align: center; }
.topbar__bell-badge[hidden] { display: none; }
.notif-drop { position: absolute; right: 0; top: calc(100% + 8px); width: 320px; max-width: 88vw; max-height: 60vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: 12px; padding: 6px; box-shadow: 0 16px 40px -8px rgba(0,0,0,0.7); z-index: 40; }
.notif-drop[hidden] { display: none; }
.notif-drop__empty { color: var(--text-muted); font-size: 13px; margin: 0; padding: 14px; text-align: center; }
.notif-item { display: flex; gap: 10px; align-items: flex-start; text-decoration: none; padding: 10px 11px; border-radius: 9px; }
.notif-item:hover { background: var(--surface-alt); }
.notif-item.is-unread { background: rgba(233,192,116,0.07); }
.notif-item__avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; object-fit: cover; background: var(--surface-alt); }
.notif-item__avatar--none { display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--text-muted); font-size: 13px; }
.notif-item__body { min-width: 0; flex: 1; }
.notif-item__text { display: block; color: var(--text); font-size: 13px; }
.notif-item__text b { color: var(--heading); }
.notif-item__snippet { display: block; color: var(--text-muted); font-size: 12px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-item__date { display: block; color: var(--text-dim); font-size: 11px; margin-top: 3px; }
.topbar__signin { color: var(--text); text-decoration: none; font-weight: 700; font-size: 14px; padding: 8px 16px; border: 1px solid var(--hairline-strong); border-radius: 8px; transition: border-color 0.15s ease; }
.topbar__signin:hover { border-color: var(--accent); }
.topbar__user { display: flex; align-items: center; gap: 8px; background: none; border: 0; cursor: pointer; color: var(--text); font: inherit; font-weight: 700; font-size: 14px; padding: 4px; }
.topbar__avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: var(--surface-alt); }
.topbar__avatar--none { display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--text-muted); font-size: 13px; }
.topbar__uname { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar__menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: 10px; padding: 6px; min-width: 140px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); z-index: 30; }
.topbar__menu[hidden] { display: none; }
.topbar__logout { width: 100%; text-align: left; background: none; border: 0; color: var(--text); cursor: pointer; font: inherit; font-size: 14px; padding: 8px 10px; border-radius: 6px; }
.topbar__logout:hover { background: var(--surface-alt); }

/* ── Account page ── */
.acct { max-width: 440px; margin: 0 auto; }
.acct__title { font-size: 26px; font-weight: 800; margin: 0 0 20px; }
.acct__loading, .acct-signedout { color: var(--text-muted); }
.acct-card { background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: 12px; padding: 18px; margin-bottom: 14px; }
.acct-card--slim { padding: 13px 18px; }
.acct-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: rgba(232, 192, 116, 0.12); border: 1px solid var(--accent); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; font-size: 14px; }
.acct-banner__btn { background: var(--accent); color: #1a1410; border: 0; border-radius: 7px; padding: 6px 12px; font-weight: 700; cursor: pointer; }
.acct-avatar-row { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.acct-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; background: var(--surface-alt); }
.acct-avatar--none { display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800; color: var(--text-muted); }
.acct-upload { display: inline-block; background: var(--surface-alt); border: 1px solid var(--hairline-strong); border-radius: 8px; padding: 8px 14px; font-weight: 700; font-size: 13px; cursor: pointer; transition: border-color 0.15s ease; }
.acct-upload:hover { border-color: var(--accent); }
.acct-hint { color: var(--text-dim); font-size: 12px; margin-top: 6px; }
.acct-label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 6px; }
.acct-input { width: 100%; padding: 11px 13px; background: var(--surface-alt); border: 1px solid var(--hairline-strong); border-radius: 9px; color: var(--text); font: inherit; font-size: 14px; }
.acct-input:focus { outline: none; border-color: var(--accent); }
.acct-email { margin-top: 10px; color: var(--text-muted); font-size: 13px; }
.acct-verified { color: #4ade80; font-weight: 700; }
.acct-actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.acct-msg { flex: 1; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.acct-msg--error { color: #ff5a6a; }
.acct-msg--ok { color: #35d07f; }
.acct-save { background: var(--accent); color: #1a1410; border: 0; border-radius: 8px; padding: 9px 20px; font-weight: 800; cursor: pointer; transition: background 0.15s ease; }
.acct-save:hover { background: var(--accent-hover); }
.acct-save:disabled { opacity: 0.6; cursor: default; }
.cat-sidebar__label { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.cat-sidebar__section--collapsible { padding: 0; }
.cat-sidebar__section--collapsible > .cat-checks { margin-top: 8px; }
.cat-sidebar__label--summary {
  cursor: pointer;
  list-style: none;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cat-sidebar__label--summary::-webkit-details-marker { display: none; }
.cat-sidebar__label--summary::after {
  content: '+';
  font-size: 18px;
  color: var(--accent);
  font-weight: 700;
  line-height: 1;
  transition: transform 0.15s ease;
}
.cat-sidebar__section--collapsible[open] > .cat-sidebar__label--summary::after { transform: rotate(45deg); }
.cat-sidebar__sublabel { color: var(--text-muted); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 11px; }
.cat-sidebar__input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: 14px;
  padding: 8px 12px;
  outline: none;
}
.cat-sidebar__input:focus { border-color: var(--accent); }
.cat-sidebar__results {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
}
.cat-sidebar__clear {
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--r-sm);
  padding: 5px 10px;
  cursor: pointer;
}
.cat-sidebar__clear:hover { background: var(--hairline); }
.cat-sidebar__apply { display: none; margin-top: 14px; }
.cat-sidebar__apply-btn {
  width: 100%;
  background: var(--accent);
  border: 0;
  color: #1a1410;
  font-weight: 800;
  font-size: 14px;
  border-radius: var(--r-sm);
  padding: 12px;
  cursor: pointer;
}

/* Tag pickers — input with autosuggest dropdown + chip list */
.cat-tagpicker { position: relative; }
.cat-tagpicker__chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.cat-tagpicker__chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--accent);
  color: #1a1410;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: capitalize;
}
.cat-tagpicker--exclude .cat-tagpicker__chip { background: #c84f4f; color: #fff; }
.cat-tagpicker__chip-x { cursor: pointer; border: 0; background: transparent; color: inherit; font-size: 14px; padding: 0; line-height: 1; }
.cat-tagpicker__input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: 13px;
  padding: 7px 10px;
  outline: none;
}
.cat-tagpicker__input:focus { border-color: var(--accent); }
.cat-tagpicker__panel {
  position: absolute;
  top: 100%; left: 0; right: 0;
  margin-top: 4px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  max-height: 220px;
  overflow-y: auto;
  z-index: 20;
  box-shadow: 0 8px 16px rgba(0,0,0,0.4);
}
.cat-tagpicker__option {
  display: flex; justify-content: space-between;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  text-transform: capitalize;
}
.cat-tagpicker__option:hover, .cat-tagpicker__option.is-active { background: var(--surface); color: var(--accent); }
.cat-tagpicker__option small { color: var(--text-muted); font-weight: 600; }

/* Engine / Platform checkbox row */
.cat-checks { display: flex; flex-direction: column; gap: 6px; }
.cat-checks label {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  text-transform: capitalize;
}
.cat-checks input[type="checkbox"] { accent-color: var(--accent); }
.cat-checks small { color: var(--text-muted); margin-left: auto; }

/* Filters trigger (desktop = hidden; mobile = visible button) */
.cat-filters-trigger {
  display: none;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: #1a1410;
  border: 0;
  border-radius: var(--r-sm);
  padding: 10px 14px;
  font-weight: 800;
  font-size: 14px;
  margin: 0 0 14px;
  cursor: pointer;
}
.cat-filters-trigger__count {
  background: rgba(0,0,0,0.18);
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 12px;
}

@media (max-width: 768px) {
  .cat-filters-trigger { display: inline-flex; }
  .cat-sidebar {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(360px, 92vw);
    max-height: 100vh;
    border-radius: 0;
    border: 0;
    border-left: 1px solid var(--hairline);
    transform: translateX(100%);
    transition: transform 0.22s ease;
    z-index: 60;
  }
  .cat-sidebar.is-open { transform: translateX(0); }
  .cat-sidebar__close { display: inline-flex; }
  .cat-sidebar__apply { display: block; }
  .cat-sidebar-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 50;
  }
  body.cat-sidebar-locked { overflow: hidden; }
}

/* Default grid: 1 col mobile, 3 col desktop (porngameshub-style). */
.catalogue__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 720px) { .catalogue__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

/* ── Pagination visibility (filter-aware) ────────────────────────────
   The build renders the FULL listing (all matching games) into every
   paginated page so the sidebar filter can scan everything — not just
   the 36 visible tiles. Each tile carries a tile--p<N> class for its
   pagination chunk; the grid carries cat-grid--show<N> for the chunk
   currently displayed. The pair below hides every tile except those
   tagged for the current page. When the filter is active, JS adds
   `cat-grid--filtering` to the grid which lifts the chunk constraint
   so all matching tiles can be shown via inline style.

   Cap: 60 chunks (60 * 36 = 2160 games) — comfortably above the home's
   ~1500 today. Extend if a single listing ever crosses that ceiling. */
.catalogue__grid:not(.cat-grid--filtering) .tile[class*="tile--p"] { display: none; }
.cat-grid--show1:not(.cat-grid--filtering) .tile.tile--p1,
.cat-grid--show2:not(.cat-grid--filtering) .tile.tile--p2,
.cat-grid--show3:not(.cat-grid--filtering) .tile.tile--p3,
.cat-grid--show4:not(.cat-grid--filtering) .tile.tile--p4,
.cat-grid--show5:not(.cat-grid--filtering) .tile.tile--p5,
.cat-grid--show6:not(.cat-grid--filtering) .tile.tile--p6,
.cat-grid--show7:not(.cat-grid--filtering) .tile.tile--p7,
.cat-grid--show8:not(.cat-grid--filtering) .tile.tile--p8,
.cat-grid--show9:not(.cat-grid--filtering) .tile.tile--p9,
.cat-grid--show10:not(.cat-grid--filtering) .tile.tile--p10,
.cat-grid--show11:not(.cat-grid--filtering) .tile.tile--p11,
.cat-grid--show12:not(.cat-grid--filtering) .tile.tile--p12,
.cat-grid--show13:not(.cat-grid--filtering) .tile.tile--p13,
.cat-grid--show14:not(.cat-grid--filtering) .tile.tile--p14,
.cat-grid--show15:not(.cat-grid--filtering) .tile.tile--p15,
.cat-grid--show16:not(.cat-grid--filtering) .tile.tile--p16,
.cat-grid--show17:not(.cat-grid--filtering) .tile.tile--p17,
.cat-grid--show18:not(.cat-grid--filtering) .tile.tile--p18,
.cat-grid--show19:not(.cat-grid--filtering) .tile.tile--p19,
.cat-grid--show20:not(.cat-grid--filtering) .tile.tile--p20,
.cat-grid--show21:not(.cat-grid--filtering) .tile.tile--p21,
.cat-grid--show22:not(.cat-grid--filtering) .tile.tile--p22,
.cat-grid--show23:not(.cat-grid--filtering) .tile.tile--p23,
.cat-grid--show24:not(.cat-grid--filtering) .tile.tile--p24,
.cat-grid--show25:not(.cat-grid--filtering) .tile.tile--p25,
.cat-grid--show26:not(.cat-grid--filtering) .tile.tile--p26,
.cat-grid--show27:not(.cat-grid--filtering) .tile.tile--p27,
.cat-grid--show28:not(.cat-grid--filtering) .tile.tile--p28,
.cat-grid--show29:not(.cat-grid--filtering) .tile.tile--p29,
.cat-grid--show30:not(.cat-grid--filtering) .tile.tile--p30,
.cat-grid--show31:not(.cat-grid--filtering) .tile.tile--p31,
.cat-grid--show32:not(.cat-grid--filtering) .tile.tile--p32,
.cat-grid--show33:not(.cat-grid--filtering) .tile.tile--p33,
.cat-grid--show34:not(.cat-grid--filtering) .tile.tile--p34,
.cat-grid--show35:not(.cat-grid--filtering) .tile.tile--p35,
.cat-grid--show36:not(.cat-grid--filtering) .tile.tile--p36,
.cat-grid--show37:not(.cat-grid--filtering) .tile.tile--p37,
.cat-grid--show38:not(.cat-grid--filtering) .tile.tile--p38,
.cat-grid--show39:not(.cat-grid--filtering) .tile.tile--p39,
.cat-grid--show40:not(.cat-grid--filtering) .tile.tile--p40,
.cat-grid--show41:not(.cat-grid--filtering) .tile.tile--p41,
.cat-grid--show42:not(.cat-grid--filtering) .tile.tile--p42,
.cat-grid--show43:not(.cat-grid--filtering) .tile.tile--p43,
.cat-grid--show44:not(.cat-grid--filtering) .tile.tile--p44,
.cat-grid--show45:not(.cat-grid--filtering) .tile.tile--p45,
.cat-grid--show46:not(.cat-grid--filtering) .tile.tile--p46,
.cat-grid--show47:not(.cat-grid--filtering) .tile.tile--p47,
.cat-grid--show48:not(.cat-grid--filtering) .tile.tile--p48,
.cat-grid--show49:not(.cat-grid--filtering) .tile.tile--p49,
.cat-grid--show50:not(.cat-grid--filtering) .tile.tile--p50,
.cat-grid--show51:not(.cat-grid--filtering) .tile.tile--p51,
.cat-grid--show52:not(.cat-grid--filtering) .tile.tile--p52,
.cat-grid--show53:not(.cat-grid--filtering) .tile.tile--p53,
.cat-grid--show54:not(.cat-grid--filtering) .tile.tile--p54,
.cat-grid--show55:not(.cat-grid--filtering) .tile.tile--p55,
.cat-grid--show56:not(.cat-grid--filtering) .tile.tile--p56,
.cat-grid--show57:not(.cat-grid--filtering) .tile.tile--p57,
.cat-grid--show58:not(.cat-grid--filtering) .tile.tile--p58,
.cat-grid--show59:not(.cat-grid--filtering) .tile.tile--p59,
.cat-grid--show60:not(.cat-grid--filtering) .tile.tile--p60 { display: flex; }

/* ── Pagination footer (porngameshub-style numbered pager) ───────── */
.pag { padding: 32px 0 40px; }
.pag__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.pag__num, .pag__nav, .pag__current, .pag__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}
.pag__num, .pag__nav {
  color: var(--color-text, #d8d4dc);
  background: var(--color-surface, #1a1820);
  border: 1px solid var(--color-border, #2a2632);
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.pag__num:hover, .pag__nav:hover {
  background: var(--color-surface-hover, #221f2a);
  border-color: var(--color-primary, #e91e63);
  color: var(--color-text-strong, #fff);
}
.pag__current {
  color: #fff;
  background: var(--color-primary, #e91e63);
  border: 1px solid var(--color-primary, #e91e63);
}
.pag__ellipsis {
  color: var(--color-text-muted, #7a7480);
  min-width: 24px;
  padding: 0 4px;
}
.pag__nav { font-size: 18px; }

/* Compact density: 2 cols mobile, 5 cols PC */
.catalogue__grid--compact { grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 600px) { .catalogue__grid--compact { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 920px) { .catalogue__grid--compact { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1180px) { .catalogue__grid--compact { grid-template-columns: repeat(5, 1fr); } }

/* Comfort density: 1 col mobile, 3 cols PC */
.catalogue__grid--comfort { grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 600px) { .catalogue__grid--comfort { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (min-width: 920px) { .catalogue__grid--comfort { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) { .catalogue__grid--comfort { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1440px) { .catalogue__grid--comfort { grid-template-columns: repeat(3, 1fr); } }

/* Density toggle + count row in catalogue head */
.catalogue__head-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
/* When the head-right is the only child of catalogue__head (tag pages,
   after removing the redundant tag H2), align it to the right edge. */
.catalogue__head-right--solo { margin-left: auto; }
.density-toggle {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.density-toggle__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 30px;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.density-toggle__btn:hover { color: var(--text); }
.density-toggle__btn + .density-toggle__btn { border-left: 1px solid var(--hairline); }
.density-toggle__btn.is-active { background: var(--accent); color: #1a1410; }
/* The .tile component was designed for the horizontal-scroll row layout
   (.row__scroll) with a fixed 240–260px width. When reused inside a CSS grid
   it would overflow its 1fr column on narrow viewports. Reset to auto. */
.catalogue__grid .tile { width: auto; }

.tag-h2 { color: var(--accent); }

/* ── tag page SEO content + FAQ section ──────────── */
.tag-seo {
  padding: 36px 0 8px;
  border-top: 1px solid var(--hairline);
}
.tag-seo .prose {
  max-width: 78ch;
  margin: 0 auto;
  color: var(--text-muted);
  font-size: 14.5px;
  line-height: 1.65;
}
.tag-seo .section__heading {
  text-align: center;
  margin: 0 0 16px;
  font-size: 22px;
  color: var(--heading);
}
.tag-seo .prose p { margin: 0 0 0.9em; }
.tag-seo .prose p:last-child { margin-bottom: 0; }
.tag-seo .prose strong { color: var(--heading); font-weight: 600; }
.tag-seo .prose h3 {
  margin: 22px 0 8px;
  font-size: 15.5px;
  color: var(--heading);
  font-weight: 700;
}

.tag-faq {
  padding: 40px 0 64px;
  border-top: 1px solid var(--hairline);
}
.tag-faq .section__heading { text-align: center; margin: 0 0 18px; }
.tag-faq .faq__item {
  border-top: 1px solid var(--hairline);
  padding: 4px 0;
}
.tag-faq .faq__item:last-child { border-bottom: 1px solid var(--hairline); }
.tag-faq .faq__q {
  cursor: pointer;
  list-style: none;
  padding: 14px 0;
  font-weight: 700;
  color: var(--heading);
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.tag-faq .faq__q::-webkit-details-marker { display: none; }
.tag-faq .faq__q::after {
  content: '+';
  font-size: 22px;
  color: var(--accent);
  font-weight: 700;
  line-height: 1;
  transition: transform 0.2s ease;
}
.tag-faq .faq__item[open] .faq__q::after { transform: rotate(45deg); }
.tag-faq .faq__a {
  padding: 0 0 14px;
  color: var(--text-muted);
  font-size: 14.5px;
  max-width: 78ch;
}
.tag-faq .faq__a p { margin: 0 0 0.8em; }
.tag-faq .faq__a strong { color: var(--heading); }

/* ── seo / faq sections ─────────────────────────────── */
.prose {
  max-width: 68ch;
  color: var(--text);
  font-size: 15.5px;
  line-height: 1.7;
}
.prose h2 { margin: 1.6em 0 0.4em; font-size: clamp(20px, 2.4vw, 24px); font-weight: 700; }
.prose h2:first-child { margin-top: 0; }
/* In-content h3 (used as section divider inside long descriptions). Kept
   editorial / magazine style on purpose: white heading colour, slightly
   larger than body copy, with a thin hairline underneath as the only visual
   break. Avoids the "labelled SEO encart" look — feels like prose, not a
   marketing block. */
.prose h3 {
  margin: 2em 0 0.6em;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--hairline);
  font-size: 18px;
  font-weight: 700;
  color: var(--heading);
}
.prose p { margin: 0 0 1em; }
.prose strong { color: var(--heading); font-weight: 700; }
.prose ol, .prose ul { margin: 0 0 1em; padding-left: 1.4em; }

/* Mobile: long descriptions read as a wall of text without extra breathing
   room between paragraphs. Bump paragraph gap + line-height a notch. */
@media (max-width: 600px) {
  .game__desc { font-size: 15px; line-height: 1.8; }
  .game__desc p { margin: 0 0 1.5em; }
  .game__desc ol, .game__desc ul { margin: 0 0 1.5em; }
}

.seo-section {
  padding: 48px 0 24px;
  border-top: 1px solid var(--hairline);
}
.seo-section .prose { margin-bottom: 40px; }
.seo-section .prose:last-child { margin-bottom: 0; }

.faq-section { padding: 32px 0 80px; }
.faq__item {
  border-top: 1px solid var(--hairline);
  padding: 16px 0;
}
.faq__item:last-child { border-bottom: 1px solid var(--hairline); }
.faq__q {
  font-weight: 700;
  font-size: 16px;
  color: var(--heading);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: '+';
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--accent);
  transition: transform 0.2s ease;
  font-weight: 400;
}
.faq__item[open] .faq__q::after { transform: rotate(45deg); }
.faq__a {
  margin-top: 10px;
  color: var(--text-muted);
  font-size: 14.5px;
  line-height: 1.65;
}

/* ── footer ─────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--hairline);
  padding: 40px 0 56px;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}
.footer__disclaimer {
  margin: 0 auto 20px;
  max-width: 80ch;
  line-height: 1.6;
}
.footer .footer__browse,
.footer .footer__browse-row,
.footer .footer__browse-links,
.footer__links { justify-content: center; }
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 14px;
}
.footer__links a { color: var(--text-muted); }
.footer__links a:hover { color: var(--text); }
.footer__browse {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 16px;
  padding: 0;
}
.footer__browse-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 14px;
  font-size: 13px;
  color: var(--text-muted);
}
.footer__browse-label {
  font-weight: 600;
  letter-spacing: 0.02em;
}
.footer__browse-label::after { content: ":"; margin-left: 1px; }
.footer__browse-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.footer__browse-links a {
  color: var(--text-muted);
  text-decoration: none;
}
.footer__browse-links a:hover { color: var(--text); text-decoration: underline; }
.footer__contact {
  margin: 0 0 14px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.footer__copyright {
  margin: 0;
  color: var(--text-dim);
  font-size: 12px;
}

/* ── game page (vertical stack) ─────────────────────── */
.game-main { padding: 0 0 80px; }
.game { padding: 32px 0 0; }
.game__crumbs {
  margin: 0 0 20px;
  font-size: 13px;
  color: var(--text-muted);
}
.game__crumbs a { color: var(--text-muted); }
.game__crumbs a:hover { color: var(--accent); }

/* tag chips above title */
.game__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 18px;
}

/* title + rating row */
.game__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
  margin: 0 0 28px;
}
/* ── In-browser playable embed ────────────────────────
   States:
     - idle      : thumbnail + play button + tips, game NOT loaded yet
     - loaded    : iframe + toolbar (Maximize, Fullscreen, Close)
     - maximized : container goes fixed-fullscreen over the viewport
     - fullscreen: native browser fullscreen, toolbar hidden
   JS: initEmbed() in script.js drives state transitions. */
.game-embed {
  margin-block: 24px 36px;
  /* The whole game page is now player-width (.container--game), so the player
     just fills the column — no breakout needed. */
  width: 100%;
}
.game-embed__heading {
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}
.game-embed__heading-hl {
  background: color-mix(in srgb, var(--accent) 28%, transparent);
  padding: 2px 8px;
}
.game-embed__toolbar-version {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-left: 8px;
  padding: 2px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--fg) 10%, transparent);
}
.game-embed__title-hint .game-embed__toolbar-version {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-left: 10px;
  padding: 3px 10px;
  background: var(--accent);
}
.game-embed__container {
  position: relative;
  width: 100%;
  /* Cap at the game's native width (never exceed 1280). RPG Maker MZ on
     desktop renders its canvas at native size centered — if the frame is
     wider than native, the game sits centered with black bars around it.
     Sizing the frame to the native width makes the game fill it exactly
     (and stays pixel-perfect, no upscale blur). Games wider than 1280 are
     capped at 1280 and scale down to fit. */
  max-width: min(1280px, var(--embed-native-width, 1280px));
  margin: 0 auto;
  aspect-ratio: var(--embed-aspect, 16 / 9);
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--hairline);
}
/* Responsive HTML games (Twine/SugarCube): no fixed aspect ratio — a
   full-width, generous fixed-height frame that scrolls internally. */
.game-embed__container--responsive {
  aspect-ratio: auto;
  max-width: 1280px;
  height: min(85vh, 900px);
}
.game-embed__container--maximized {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  max-width: none;
  z-index: 100;
  aspect-ratio: auto;
  border-radius: 0;
  border: 0;
  display: flex;
  flex-direction: column;
}
body.embed-locked { overflow: hidden; }

/* Idle state */
.game-embed__idle {
  position: absolute;
  inset: 0;
  display: block;
}
.game-embed__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.55);
}
.game-embed__idle-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.68) 100%);
}
/* erogames-style call-to-action: a big red play-circle + "START PLAYING",
   both visible by default, that scale up and glow brighter on hover. */
.game-embed__play {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: transform 0.28s cubic-bezier(0.34, 1.4, 0.5, 1);
}
/* Icon wrapper carries the always-on attention animation: expanding "sonar"
   rings that radiate out continuously so it's unmistakably a clickable play
   button, plus a soft breathing scale. Hover pauses the breathing and gives
   the crisp pop. */
.game-embed__play-icon {
  position: relative;
  display: inline-flex;
}
.game-embed__play-icon::before,
.game-embed__play-icon::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 3px solid rgba(255,0,96,0.7);
  animation: gg-sonar 2.1s ease-out infinite;
  pointer-events: none;
}
.game-embed__play-icon::after { animation-delay: 1.05s; }
@keyframes gg-sonar {
  0%   { transform: scale(0.82); opacity: 0.75; }
  100% { transform: scale(1.7);  opacity: 0; }
}
.game-embed__play-circle {
  width: 96px;
  height: 96px;
  color: #ff0060;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,0.55));
  transition: transform 0.28s cubic-bezier(0.34, 1.4, 0.5, 1), color 0.25s ease, filter 0.25s ease;
  animation: gg-play-breathe 2.1s ease-in-out infinite;
}
@keyframes gg-play-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}
.game-embed__play:hover .game-embed__play-circle { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .game-embed__play-icon::before,
  .game-embed__play-icon::after,
  .game-embed__play-circle { animation: none; }
}
.game-embed__play-text {
  color: #fff;
  font-family: inherit;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-shadow: 0 2px 10px rgba(0,0,0,0.75);
}
.game-embed__play:hover { transform: translateY(-3px); }
.game-embed__play:hover .game-embed__play-circle {
  transform: scale(1.14);
  color: #ff2a77;
  filter: drop-shadow(0 10px 30px rgba(255,0,96,0.6));
}
@media (max-width: 600px) {
  .game-embed__play-circle { width: 72px; height: 72px; }
  .game-embed__play-text { font-size: 22px; }
}
.game-embed__subtitle {
  margin: 2px 0 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  text-shadow: 0 1px 6px rgba(0,0,0,0.75);
}
.game-embed__title-hint {
  margin: 4px 0 0;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}
.game-embed__tips {
  list-style: none;
  margin: 6px 0 0;
  padding: 14px 18px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.9);
  text-align: left;
}
.game-embed__tips li::before { content: "•  "; color: rgba(255,255,255,0.4); }

/* Chapter / version selector — pills that wrap. Shown on the idle screen for
   games released as multiple standalone builds. */
.game-embed__chapters {
  margin: 12px 0 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 92%;
}
.game-embed__chapters-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}
.game-embed__chapters-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.game-embed__chapter {
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.game-embed__chapter:hover { border-color: rgba(255,255,255,0.55); }
.game-embed__chapter:active { transform: scale(0.96); }
.game-embed__chapter.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Loaded state — `display: flex` would otherwise override the [hidden]
   attribute so we re-assert display:none for both states when hidden. */
.game-embed__idle[hidden],
.game-embed__loaded[hidden] { display: none !important; }
.game-embed__loaded {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}
.game-embed__container--maximized .game-embed__loaded { position: static; flex: 1; }
.game-embed__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 14px;
  background: #0a0a12;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
}
.game-embed__toolbar--hidden { display: none; }
.game-embed__toolbar-title {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.game-embed__toolbar-actions { display: flex; gap: 8px; flex-shrink: 0; }
.game-embed__btn[hidden] { display: none !important; }
.game-embed__perf-notice[hidden] { display: none !important; }
/* Small note under the player. "download" is a clear link that jumps to the
   download section further down the page. */
.game-embed__perf-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  margin: 14px auto 0;
  max-width: 660px;
  line-height: 1.5;
}
.game-embed__dl-link {
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.game-embed__dl-link:hover { color: var(--accent-hover); }
.game-embed__perf-notice-text { }
.game-embed__perf-close {
  flex-shrink: 0;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1;
  padding: 0 6px;
  cursor: pointer;
  opacity: 0.7;
}
.game-embed__perf-close:hover { opacity: 1; color: var(--text); }
.game-embed__mobile-warn {
  text-align: center;
  font-size: 13px;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 0 auto 14px;
  max-width: 600px;
}
.game-embed__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.game-embed__btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.game-embed__btn:hover { background: var(--accent); border-color: var(--accent); }
.game-embed__btn--close:hover { background: #c81e3a; border-color: #c81e3a; }
.game-embed__frame-wrap {
  position: relative;
  flex: 1;
  background: #000;
}
.game-embed__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.game__title {
  margin: 0;
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.05;
  flex: 1 1 auto;
  min-width: 0;
}
.game__rating {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex-shrink: 0;
}
.game__rating-star { color: var(--accent); font-size: 18px; line-height: 1; }
.game__rating-value {
  color: var(--heading);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.game__rating-meta {
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 400;
}
.game__rating-source {
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-strong);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.game__rating-source:hover {
  color: var(--heading);
  border-bottom-color: var(--hairline);
}
.game__ratings {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  flex-shrink: 0;
}
/* the hidden attribute must win over .game__rating's inline-flex display */
.game__rating[hidden] { display: none !important; }
/* our own users' rating: a plain, non-link "on this site" tag */
.game__rating-source--ours {
  border-bottom: none;
  font-style: italic;
}
/* When our own users have rated, our score becomes the prominent badge and the
   third-party score shrinks to a small companion beside it. Only applied once
   script.js confirms cnt > 0; a third-party-only header stays untouched. */
.game__ratings--has-ours .game__rating--ours {
  order: -1;
  align-items: baseline;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 11px;
  background: var(--surface-hi);
  border: 1px solid var(--accent);
  box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.7);
}
.game__ratings--has-ours .game__rating--ours .game__rating-star,
.game__ratings--has-ours .game__rating--ours .game__rating-value { font-size: 21px; }
.game__ratings--has-ours .game__rating--ours .game__rating-meta { font-size: 13px; }
.game__ratings--has-ours .game__rating:not(.game__rating--ours) { opacity: 0.72; }
.game__ratings--has-ours .game__rating:not(.game__rating--ours) .game__rating-star,
.game__ratings--has-ours .game__rating:not(.game__rating--ours) .game__rating-value { font-size: 14px; }
.game__ratings--has-ours .game__rating:not(.game__rating--ours) .game__rating-meta { font-size: 11.5px; }

/* bookmark: small icon that flows at the end of the title text */
.game__title-bm { white-space: nowrap; }
.game-bookmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: baseline;
  position: relative;
  top: 0.08em;
  margin-left: 0.35em;
  padding: 6px;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 8px;
  transition: color 0.15s ease, background 0.15s ease;
}
.game-bookmark:hover { color: var(--accent); background: var(--hairline); }
.game-bookmark__icon { width: 0.74em; height: 0.74em; display: block; }
/* default = "add" (outline + plus); hide the filled "saved" icon */
.game-bookmark__icon--saved { display: none; }
.game-bookmark.is-on { color: var(--accent); }
.game-bookmark.is-on .game-bookmark__icon--add { display: none; }
.game-bookmark.is-on .game-bookmark__icon--saved { display: block; }

/* rating + public like button share a row under the title */
.game__head-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.game-like {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--hairline);
  background: var(--surface-hi);
  color: var(--text);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.game-like:hover { border-color: #ff5c7a; transform: translateY(-1px); }
.game-like__icon { width: 17px; height: 17px; display: block; fill: currentColor; color: var(--text-muted); transition: color 0.15s ease; }
.game-like:hover .game-like__icon { color: #ff5c7a; }
.game-like__count { line-height: 1; }
.game-like.is-on { border-color: #ff5c7a; background: rgba(255, 92, 122, 0.12); color: #ff7a92; }
.game-like.is-on .game-like__icon { color: #ff5c7a; }

/* transient confirmation toast */
.tgg-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(12px);
  background: var(--surface-hi);
  color: var(--heading);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 11px 18px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.75);
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.tgg-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* report buttons (embed toolbar + download card) + modal */
/* download-card report: compact button pushed to the right of the card head */
.dl-report {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  background: var(--surface-alt);
  border: 1px solid var(--hairline-strong);
  color: var(--text-muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 11px;
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.dl-report:hover { color: var(--heading); border-color: var(--accent); background: var(--surface-hi); }
.dl-report svg { opacity: 0.85; }
/* embed toolbar report: hide the word on small screens, keep the flag icon */
@media (max-width: 600px) {
  .game-embed__btn--report .game-embed__btn-label { display: none; }
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.66);
  backdrop-filter: blur(2px);
}
.modal__box {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.8);
}
.modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
}
.modal__close:hover { color: var(--heading); }
.modal__title { font-size: 18px; margin: 0 0 2px; color: var(--heading); }
.modal__sub { font-size: 13px; color: var(--text-muted); margin: 0 0 16px; }
.modal__label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-muted); margin: 12px 0 6px; }
.modal__select,
.modal__textarea {
  width: 100%;
  background: var(--surface-alt);
  border: 1px solid var(--hairline-strong);
  border-radius: 9px;
  color: var(--heading);
  font: inherit;
  font-size: 14px;
  padding: 10px 12px;
}
.modal__select:focus,
.modal__textarea:focus { outline: none; border-color: var(--accent); }
.modal__textarea { min-height: 80px; resize: vertical; }
.modal__actions { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.modal__error { flex: 1; font-size: 12.5px; font-weight: 600; color: #ff5a6a; }
.modal__submit {
  background: var(--accent);
  border: none;
  border-radius: 9px;
  color: #1a1410;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 18px;
  cursor: pointer;
}
.modal__submit:hover { background: var(--accent-hover); }
.modal__submit:disabled { opacity: 0.6; cursor: default; }

/* account: bookmarks list (thumbnail cards) */
.acct-subtitle { font-size: 15px; margin: 0 0 14px; color: var(--heading); }
.acct-bm { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.acct-bm__item { display: flex; align-items: center; gap: 8px; }
.acct-bm__card {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
  padding: 10px;
  border-radius: 12px;
  background: var(--surface-alt);
  border: 1px solid var(--hairline);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.acct-bm__card:hover { border-color: var(--accent); background: var(--surface-hi); }
.acct-bm__thumb {
  width: 104px;
  height: 66px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 8px;
  background: var(--surface);
}
.acct-bm__thumb--none {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-weight: 700;
  font-size: 24px;
}
.acct-bm__title {
  color: var(--heading);
  font-weight: 600;
  font-size: 15.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .acct-bm__thumb { width: 84px; height: 54px; }
  .acct-bm__title { font-size: 14.5px; }
}
.acct-bm__card:hover .acct-bm__title { color: var(--accent); }
.acct-bm__remove {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  flex-shrink: 0;
}
.acct-bm__remove:hover { color: #ff5a6a; }
.acct-bm__empty { color: var(--text-muted); font-size: 13.5px; margin: 0; }
/* account tabs */
.acct-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--hairline); }
.acct-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 9px 12px;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.acct-tab:hover { color: var(--heading); }
.acct-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.acct-panel[hidden] { display: none; }
/* ratings history */
.acct-rate { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.acct-rate__item { display: flex; align-items: center; gap: 12px; }
.acct-rate__link { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; text-decoration: none; }
.acct-rate__title { color: var(--heading); font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-rate__link:hover .acct-rate__title { color: var(--accent); }
.acct-rate__stars { flex-shrink: 0; font-size: 14px; }
/* comments history */
.acct-cmt { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.acct-cmt__item { border-bottom: 1px solid var(--hairline); }
.acct-cmt__item:last-child { border-bottom: none; }
.acct-cmt__link { display: block; padding: 10px 2px; text-decoration: none; }
.acct-cmt__link:hover { background: var(--surface-alt); border-radius: 8px; }
.acct-cmt__body { display: block; color: var(--text); font-size: 13.5px; }
.acct-cmt__meta { display: block; color: var(--text-dim); font-size: 11.5px; margin-top: 3px; }
.acct-bm__count { color: var(--text-muted); font-size: 12.5px; margin: 0 0 10px; }
/* pager */
.acct-pg { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 16px; }
.acct-pg__btn {
  min-width: 34px;
  height: 34px;
  padding: 0 9px;
  border-radius: 8px;
  background: var(--surface-alt);
  border: 1px solid var(--hairline-strong);
  color: var(--heading);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.acct-pg__btn:hover:not(:disabled) { border-color: var(--accent); background: var(--surface-hi); }
.acct-pg__btn.is-active { background: var(--accent); border-color: var(--accent); color: #1a1410; }
.acct-pg__btn:disabled { opacity: 0.4; cursor: default; }
.acct-pg__gap { display: inline-flex; align-items: center; color: var(--text-muted); padding: 0 2px; }

/* big banner image — full image visible (no crop), height matches source ratio */
.game__banner {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-alt);
  border: 1px solid var(--hairline);
  margin: 0 0 28px;
}
.game__banner > picture {
  height: auto;
}
.game__banner-img {
  width: 100%;
  height: auto;
  display: block;
}

/* meta row: dev, devlink, updated, language, version */
.meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0 0 28px;
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
}
.meta__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.meta__label {
  color: var(--text-dim);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}
.meta-row a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-strong);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.meta-row a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.meta__devlinks { gap: 8px; flex-wrap: wrap; }
.meta__devlink {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.meta__ext { color: var(--text-dim); font-size: 11px; transition: color 0.15s ease; }
.meta-row a:hover .meta__ext { color: var(--accent); }
.meta__sep { color: var(--text-dim); user-select: none; }

/* ── Developer support zone ─────────────────────────── */
.devzone {
  margin: 0 0 28px;
  background: linear-gradient(180deg, var(--surface-hi), var(--surface));
  border: 1px solid var(--hairline-strong);
  border-radius: 14px;
  padding: 16px 18px;
}
.devzone__head { display: flex; align-items: center; gap: 12px; }
.devzone__heart { color: var(--accent); flex-shrink: 0; }
.devzone__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.devzone__by { font-size: 16px; color: var(--text); }
.devzone__by strong { color: var(--heading); font-weight: 800; }
.devzone__msg { font-size: 12.5px; color: var(--text-muted); }
.devzone__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.devzone__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 9px;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  color: var(--heading);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.devzone__link:hover { border-color: var(--accent); background: var(--surface-hi); }
.devzone__link svg { width: 16px; height: 16px; flex-shrink: 0; }
.devzone__ext { color: var(--text-dim); font-size: 12px; }
.devzone__link:hover .devzone__ext { color: var(--accent); }
@media (max-width: 600px) {
  .devzone__link { width: 100%; justify-content: flex-start; }
  .devzone__ext { margin-left: auto; }
}

/* ── Download takedown notice + Copyright & Terms dropdown ────────── */
.dl-notice { margin: -20px 0 22px; }
.dl-notice__short { font-size: 12px; color: var(--text-dim); line-height: 1.6; margin: 0 0 6px; }
.dl-notice__short strong { color: var(--text-muted); font-weight: 700; }
.dl-notice__more > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  padding: 4px 0;
}
.dl-notice__more > summary::-webkit-details-marker { display: none; }
.dl-notice__more > summary::before { content: '+'; color: var(--text-dim); font-weight: 800; }
.dl-notice__more[open] > summary::before { content: '−'; }
.dl-notice__more > summary:hover { color: var(--heading); }
.dl-notice__body { font-size: 12px; color: var(--text-dim); line-height: 1.65; }
.dl-notice__body p { margin: 8px 0 0; }
.dl-notice__body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* ── Compact facts line (Updated / Status / Language / Engine) ─────── */
.game__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0 0 30px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  font-size: 13.5px;
  color: var(--text);
}
.game__fact { display: inline-flex; align-items: center; gap: 6px; }
.game__fact-label {
  color: var(--text-dim);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}
.game__fact-link { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--hairline-strong); transition: color 0.15s ease, border-color 0.15s ease; }
.game__fact-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.game__fact-sep { color: var(--text-dim); user-select: none; }

.meta__rating {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.meta__rating-star { color: var(--accent); font-size: 13px; }
.meta__rating-value { color: var(--heading); font-weight: 700; }
.meta__rating-count { color: var(--text-dim); font-size: 12.5px; }

/* One-line heads-up shown when itch.io's pay-what-you-want popup is
   active on a game (set the payWhatYouWant flag in custom.json). */
.pwyw {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent);
  background: color-mix(in oklab, var(--accent) 7%, var(--surface));
  border-radius: var(--r-sm);
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
}
.pwyw__icon { font-size: 16px; line-height: 1; flex-shrink: 0; }
.pwyw strong { color: var(--heading); font-weight: 700; }
.pwyw em { font-style: italic; }

/* CTA row — one button per OS (Download) + optional Play button (online) */
.game__cta-row { margin: 0 0 16px; }

/* ── Download card (flat games): header + OS tabs + primary CTA ── */
.dl-card {
  margin: 14px 0 34px;
  padding: 20px;
  background: linear-gradient(180deg, var(--surface-hi), var(--surface));
  border: 1px solid var(--accent-soft, rgba(232, 192, 116, 0.22));
  border-radius: 14px;
  box-shadow: 0 16px 38px -20px rgba(0, 0, 0, 0.8);
}
.dl-card__head { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.dl-card__icon {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; flex: none;
  border-radius: 12px;
  background: rgba(232, 192, 116, 0.14);
  color: var(--accent);
}
.dl-card__icon svg { width: 23px; height: 23px; }
.dl-card__titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dl-card__title { font-size: 17px; font-weight: 800; color: var(--heading); }
.dl-card__sub { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.dl-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.dl-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px;
  background: var(--surface-alt);
  border: 1px solid var(--hairline-strong);
  border-radius: 9px;
  color: var(--text-muted);
  font: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.dl-tab svg, .dl-tab img { width: 15px; height: 15px; }
/* /os/*.svg are black — invert to white on dark tabs, keep dark on the gold active tab */
.dl-tab img { filter: brightness(0) invert(1) opacity(0.85); }
.dl-tab.is-active img { filter: brightness(0); }
/* OS selector: click an OS → its links appear (nothing shown by default) */
.dl-os-select { display: flex; flex-wrap: wrap; gap: 8px; }
.dl-os-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: var(--surface-alt);
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  color: var(--text);
  font: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.dl-os-btn img, .dl-os-btn svg { width: 17px; height: 17px; }
.dl-os-btn img { filter: brightness(0) invert(1) opacity(0.85); }
.dl-os-btn:hover { border-color: var(--accent); }
.dl-os-btn.is-active { background: var(--accent); color: #1a1410; border-color: var(--accent); }
.dl-os-btn.is-active img { filter: brightness(0); }
.dl-os-panel { margin-top: 15px; }
.dl-os-panel[hidden] { display: none; }
.dl-tab:hover { color: var(--text); border-color: var(--accent); }
.dl-tab.is-active { background: var(--accent); color: #1a1410; border-color: var(--accent); }
.dl-tab.is-active svg { color: #1a1410; }
.dl-panel { display: none; }
.dl-panel.is-active { display: block; }
.dl-primary {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 15px 20px;
  background: var(--accent); color: #1a1410;
  border-radius: 11px;
  font-weight: 800; font-size: 16px;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.08s ease;
}
.dl-primary:hover { background: var(--accent-hover); }
.dl-primary:active { transform: translateY(1px); }
.dl-primary svg { width: 20px; height: 20px; flex: none; }
.dl-primary__text { display: inline-flex; align-items: baseline; gap: 8px; }
.dl-primary__via { font-size: 12px; font-weight: 600; opacity: 0.72; }
.dl-alts { margin-top: 15px; }
.dl-alts__label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 9px; }
.dl-alts__list { display: flex; flex-wrap: wrap; gap: 8px; }
/* Mirror list = all links for an OS, as equal buttons */
.dl-mirror-list { display: flex; flex-wrap: wrap; gap: 9px; }
.dl-mirror-list .dl-mirror { padding: 11px 15px; font-size: 13px; }
/* Mobile: one host per line for a cleaner column */
@media (max-width: 560px) {
  .dl-mirror-list { flex-direction: column; align-items: stretch; }
  .dl-mirror-list .dl-mirror { width: 100%; }
  .dl-mirror-list .dl-mirror__ext { margin-left: auto; }
}
/* One-link-per-OS: a labelled row per platform */
.dl-os-rows { display: flex; flex-direction: column; gap: 18px; }
.dl-os-row__os { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 800; color: var(--heading); margin-bottom: 14px; }
.dl-os-row__os svg, .dl-os-row__os img { width: 20px; height: 20px; }
.dl-os-row__os img { filter: brightness(0) invert(1); }
/* Multi-build versions → collapsible sub-blocks inside the card */
.dl-sec { border-top: 1px solid var(--hairline); }
.dl-sec:first-child { border-top: 0; }
.dl-sec__summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 8px;
  padding: 13px 0 11px;
  font-weight: 800; font-size: 14px; color: var(--heading);
}
.dl-sec__summary::-webkit-details-marker { display: none; }
.dl-sec__summary::before {
  content: "+"; flex: none;
  width: 26px; height: 26px; line-height: 24px; text-align: center;
  font-size: 19px;
  border: 1px solid var(--hairline-strong); border-radius: 6px;
  color: var(--accent); font-weight: 700;
}
.dl-sec[open] > .dl-sec__summary::before { content: "\2212"; }
.dl-sec__body { display: flex; flex-direction: column; gap: 16px; padding: 2px 0 14px; }
/* Backup mirrors folded under the gold itch download buttons */
.dl-card__backup { margin-top: 20px; padding-top: 4px; border-top: 1px solid var(--hairline); }

/* ── download mirrors / older builds ──────────────────
   Native <details>-driven accordion sitting between the primary CTA row and
   the rest of the page. Two shapes:
   - .dl-mirrors          → wrapper for nested section structures (F95-style:
                            current build + older builds + extras).
   - .dl-mirrors-flat     → wrapper for flat single-section structures that
                            only need to collapse because they have many hosts. */
.dl-mirrors { margin: 0 0 28px; }
.dl-mirrors__heading {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}
/* Flat variant: no nested sections, just one or a few platform groups with
   their mirrors. Renders inline (no accordion) inside a bordered card so the
   user doesn't have to click to see what's downloadable. */
.dl-mirrors--flat {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: 14px 16px;
}
.dl-mirrors--flat .dl-mirrors__heading { margin: 0 0 8px; }

/* Backup mirrors variant: rendered as a <details> accordion (closed by
   default) — the dev has provided primary download buttons (e.g. Patreon
   posts) and these are alternative mirrors users only need if the primary
   fails. */
.dl-mirrors-backup {
  margin: 0 0 28px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: 0 16px;
}
.dl-mirrors-flat__summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 0;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.dl-mirrors-flat__summary::-webkit-details-marker { display: none; }
.dl-mirrors-flat__summary::before {
  content: '+';
  display: inline-block;
  width: 22px;
  margin-right: 10px;
  color: var(--accent);
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
  text-align: center;
  transition: transform 0.2s ease;
}
.dl-mirrors-backup[open] .dl-mirrors-flat__summary::before { transform: rotate(45deg); }
.dl-mirrors-flat__body { padding: 4px 0 14px; }

.dl-section {
  margin: 0 0 10px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.dl-section__summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 800;
  color: var(--heading);
  letter-spacing: -0.005em;
  background: linear-gradient(180deg, rgba(232, 192, 116, 0.08), rgba(232, 192, 116, 0));
  border-bottom: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.dl-section__summary:hover { background: linear-gradient(180deg, rgba(232, 192, 116, 0.14), rgba(232, 192, 116, 0)); }
.dl-section[open] > .dl-section__summary { border-bottom-color: var(--hairline); }
.dl-section__summary::-webkit-details-marker { display: none; }
.dl-section__summary::before {
  content: '+';
  display: inline-block;
  width: 22px;
  margin-right: 10px;
  color: var(--accent);
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
  text-align: center;
  transition: transform 0.2s ease;
}
.dl-section[open] > .dl-section__summary::before { transform: rotate(45deg); }
.dl-section__body { padding: 8px 16px 16px; }
.dl-section--depth-1 { margin: 8px 0 0; background: rgba(255,255,255,0.02); }
.dl-section--depth-1 > .dl-section__summary {
  font-size: 14px;
  padding: 11px 14px;
  background: none;
}

/* Always stack the OS label above the hosts row. Previous side-by-side
   flexbox flipped to wrapped depending on how many hosts fit, which made
   rows with 4 hosts look inline and rows with 5 look weirdly wrapped. */
.dl-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px dashed var(--hairline);
}
.dl-group:first-child { border-top: 0; padding-top: 6px; }
.dl-group__os {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 800;
  color: var(--heading);
  letter-spacing: -0.005em;
}
.dl-group__os svg, .dl-group__os img {
  width: 18px;
  height: 18px;
  /* /os/*.svg files are black — invert + tint to the accent gold so they're
     visible on the dark surface background. */
  filter: brightness(0) saturate(100%) invert(80%) sepia(35%) saturate(450%) hue-rotate(0deg);
}
.dl-group__hosts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dl-mirror {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  background: rgba(255,255,255,0.045);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.dl-mirror:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.dl-mirror__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 4px;
  object-fit: contain;
}
.dl-mirror__icon--generic { border-radius: 0; color: var(--text-muted); }
.dl-mirror__name { white-space: nowrap; }
.dl-mirror__ext { color: var(--text-muted); font-size: 12px; margin-left: 1px; }
.dl-mirror:hover .dl-mirror__ext { color: var(--accent); }
.dl-mirror--itch {
  background: #fa5c5c;
  border-color: #fa5c5c;
  color: #fff;
  text-transform: none;
  font-size: 14px;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: 10px;
  gap: 8px;
}
.dl-mirror--itch:hover {
  background: #e54444;
  border-color: #e54444;
  color: #fff;
}
.dl-mirror--itch svg,
.dl-mirror--itch img {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
  flex-shrink: 0;
}
.dl-mirror__action {
  font-weight: 700;
}
.dl-mirror__dest {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 5px;
  padding: 3px 7px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
@media (max-width: 600px) {
  .dl-group { flex-direction: column; align-items: flex-start; gap: 6px; }
  .dl-group__os { min-width: 0; }
}
/* Destination indicator inside each button — pink itch face + "itch.io"
   wordmark. Replaces the action arrow because the action label already says
   what the button does; users need to see WHERE they're going more than HOW. */
.cta-btn__dest {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 3px 7px;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1;
  flex-shrink: 0;
}
.cta-btn__dest svg, .cta-btn__dest img { width: 13px; height: 13px; }
.cta-btn__dest--itch {
  background: #fa5c5c;
  color: #fff;
}
.cta-btn__dest--itch img {
  /* SVG file is pink #fa5c5c — invert to pure white so it shows on the pink pill */
  filter: brightness(0) invert(1);
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cta-browse {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 10px;
  font-size: 12.5px;
}
.cta-browse__link {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.12s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cta-browse__link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}
.cta-browse__arrow {
  font-weight: 600;
  letter-spacing: -0.02em;
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 14px;
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
  min-width: 215px;
  border: 1px solid transparent;
}
.cta-btn:hover { transform: translateY(-1px); }
/* Mobile: itch.io download buttons stack one per line (like the host list).
   Must override the flex-basis (flex-basis wins over width in flexbox), and be
   more specific than the .cta-btn 50%-column rule further down. */
@media (max-width: 600px) {
  .cta-row .cta-btn { flex: 1 1 100%; min-width: 0; }
}

/* Download — primary, gold */
.cta-btn--dl {
  background: var(--accent);
  color: #1a1410;
}
.cta-btn--dl:hover { background: var(--accent-hover); color: #1a1410; }
.cta-btn--dl .cta-btn__action { color: rgba(26, 20, 16, 0.7); }

/* Play (online) — same gold styling as download, the "Play" label + globe
   icon are enough to distinguish action without a separate colour scheme. */
.cta-btn--play {
  background: var(--accent);
  color: #1a1410;
}
.cta-btn--play:hover { background: var(--accent-hover); color: #1a1410; }
.cta-btn--play .cta-btn__action { color: rgba(26, 20, 16, 0.7); }

/* "More mirrors" — outline/ghost button in the brand accent colour. Sits
   alongside the primary CTAs but visually secondary; used when the dev's
   official download page is short on mirrors and there's a fuller list
   hosted elsewhere. */
.cta-btn--more {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  box-shadow: none;
}
.cta-btn--more:hover {
  background: var(--accent);
  color: #1a1410;
}
.cta-btn--more .cta-btn__action { color: rgba(232, 192, 116, 0.7); }
.cta-btn--more:hover .cta-btn__action { color: rgba(26, 20, 16, 0.7); }
.cta-btn--more .cta-btn__dest { color: var(--accent); opacity: 0.85; }
.cta-btn--more:hover .cta-btn__dest { color: #1a1410; opacity: 0.7; }
.cta-btn--more .cta-btn__os img { filter: brightness(0) saturate(100%) invert(80%) sepia(40%) saturate(400%) hue-rotate(0deg); opacity: 0.9; }
.cta-btn--more:hover .cta-btn__os img { filter: brightness(0) opacity(0.85); }

/* OS cluster (4 icons in a tight 2x2 square) for the "More mirrors" button.
   Double-class selector boosts specificity above the base .cta-btn__os rule
   so the display:grid + dimensions actually apply. */
.cta-btn__os.cta-btn__os--cluster {
  display: grid;
  grid-template-columns: 14px 14px;
  grid-template-rows: 14px 14px;
  gap: 0;
  width: 28px;
  height: 28px;
  place-items: center;
  flex-shrink: 0;
}
.cta-btn__os.cta-btn__os--cluster img { width: 12px; height: 12px; }

.cta-btn__os {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.cta-btn__os svg { width: 22px; height: 22px; }
.cta-btn__label {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  gap: 1px;
  text-align: left;
}
.cta-btn__action {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
}
.cta-btn__os-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.005em;
}
.cta-btn__action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  width: 16px;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .cta-btn { min-width: 0; }
  /* The itch download buttons are full-width (one per line) on mobile, so the
     full "itch.io" wordmark + logo fits — same as desktop. */
}

/* steam widget */
.steam {
  margin: 0 0 36px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
}
.steam__heading {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0 0 12px;
}
.steam iframe {
  display: block;
  width: 100%;
  border: 0;
  border-radius: var(--r-sm);
  overflow: hidden;
}

/* YouTube trailer embed — 16:9 responsive */
.trailer { margin: 0 0 36px; }
.trailer__heading {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0 0 12px;
}
.trailer__embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--hairline);
}
.trailer__embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* gallery */
.screens {
  margin: 22px 0 36px;
  width: 100%;
}
.screens__title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}
/* Horizontal carousel (porngameshub-style): a scroll-snapping strip of
   thumbnails with prev/next arrows. Swipeable on touch, arrow-driven on
   desktop. */
/* One-image-at-a-time slider (porngameshub-style): swipeable, dot indicators,
   plus prev/next arrows. Full-width slides give each item a deterministic width
   (= carousel width) so index math works even before lazy images load. */
.screens__carousel { position: relative; }
.screens__strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px;
}
.screens__strip::-webkit-scrollbar { display: none; }
.screens__item {
  /* 3 per view on desktop (2 gaps of 10px). Taller 3:2 frame = bigger visual
     area at the same width, so the served image file is unchanged (no extra
     load). */
  flex: 0 0 calc((100% - 20px) / 3);
  aspect-ratio: 3 / 2;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-alt);
  scroll-snap-align: start;
  cursor: zoom-in;
  -webkit-user-drag: none;
}
@media (max-width: 900px) { .screens__item { flex-basis: calc((100% - 10px) / 2); } }
@media (max-width: 600px) { .screens__item { flex-basis: 82%; } }
.screens__item img,
.screens__item picture { width: 100%; height: 100%; display: block; }
.screens__item img { object-fit: cover; }
/* Route clicks to the <a> and kill native image drag — rapid arrow/image
   clicking could otherwise start a drag that swallows subsequent clicks and
   leaves the cursor stuck as a zoom-in. */
.screens__item img,
.screens__item picture,
.screens__item source { pointer-events: none; -webkit-user-drag: none; user-select: none; }
.screens__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(0,0,0,0.62);
  color: #fff;
  cursor: pointer;
  opacity: 0.9;
  transition: background 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}
.screens__nav:hover { background: rgba(0,0,0,0.85); transform: translateY(-50%) scale(1.06); }
.screens__nav svg { width: 22px; height: 22px; }
.screens__nav--prev { left: 10px; }
.screens__nav--next { right: 10px; }
/* Dot indicators */
.screens__dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}
.screens__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--hairline-strong);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.screens__dot:hover { background: var(--text-muted); }
.screens__dot--active { background: var(--accent); transform: scale(1.3); }
@media (max-width: 600px) {
  .screens__nav { width: 36px; height: 36px; }
  .screens__nav svg { width: 18px; height: 18px; }
}

.game__desc { max-width: none; }

/* Extra sections — collapsible accordion (F95-spoiler style). Closed by
   default to keep the page scannable; click expands the content. */
.extras {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 32px;
}
.extra {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.extra[open] { border-color: var(--hairline-strong); }
.extra__title {
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: 0.005em;
  color: var(--heading);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 13px 16px;
  user-select: none;
  transition: background 0.15s ease;
}
.extra__title:hover { background: var(--surface-alt); }
.extra__title::-webkit-details-marker { display: none; }
.extra__title::after {
  content: '+';
  font-family: var(--font-mono);
  font-size: 26px;
  line-height: 1;
  color: var(--accent);
  font-weight: 700;
  transition: transform 0.2s ease;
}
.extra[open] .extra__title::after { transform: rotate(45deg); }
.extra__body {
  padding: 0 16px 16px;
  color: var(--text-muted);
  font-size: 14.5px;
  line-height: 1.65;
}
.extra__body p { margin: 0 0 0.8em; }
.extra__body p:last-child { margin-bottom: 0; }
.extra__body strong { color: var(--heading); font-weight: 700; }
.extra__body ol, .extra__body ul { padding-left: 1.4em; margin: 0 0 0.8em; }
.extra__body li { margin: 0 0 0.3em; }
.extra__video { position: relative; padding-bottom: 56.25%; height: 0; margin: 0.8em 0; border-radius: 8px; overflow: hidden; }
.extra__video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.extra__video + .extra__video { margin-top: 1.2em; }
.extra__body a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(232, 192, 116, 0.4);
  text-underline-offset: 2px;
}
.extra__body a:hover { color: var(--accent-hover); text-decoration-color: var(--accent); }
.extra__body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: 0.9em;
  padding: 1px 5px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  color: var(--heading);
}

/* Same link styling inside the main description prose for consistency. */
.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(232, 192, 116, 0.4);
  text-underline-offset: 2px;
}
.prose a:hover { color: var(--accent-hover); text-decoration-color: var(--accent); }
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: 0.9em;
  padding: 1px 5px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
}

/* ── similar games ──────────────────────────────────── */
.similar {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--hairline);
}
.similar .section__heading { margin: 0 0 20px; }
.similar__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (min-width: 600px)  { .similar__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 920px)  { .similar__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .similar__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* min-width:0 lets the grid items shrink below their content's intrinsic width,
   preventing horizontal overflow (esp. after a landscape → portrait rotation). */
.similar__grid .tile { width: auto; min-width: 0; }

/* ── legal pages ────────────────────────────────────── */
.legal { padding: 56px 0 80px; }
.legal__title {
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 700;
  margin: 0 0 32px;
}

/* ── 404 ────────────────────────────────────────────── */
.notfound { padding: 120px 0; text-align: center; }
.notfound__kicker {
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: 13px;
  letter-spacing: 0.1em;
  margin: 0 0 14px;
}
.notfound__title { font-size: clamp(32px, 5vw, 48px); margin: 0 0 14px; }
.notfound__sub { color: var(--text-muted); margin: 0 0 28px; }

/* ── lightbox ───────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox__stage {
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox__media {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--r-md);
}
.lightbox__close, .lightbox__nav {
  position: absolute;
  background: rgba(15, 13, 17, 0.78);
  color: #fff;
  font-family: var(--font-mono);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.lightbox__close { top: 16px; right: 20px; font-size: 26px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); font-size: 30px; font-weight: 700; line-height: 1; }
.lightbox__close:hover, .lightbox__nav:hover {
  background: rgba(15, 13, 17, 0.92);
  border-color: var(--accent);
  color: var(--accent);
}
.lightbox__nav:hover { transform: translateY(-50%) scale(1.06); }
.lightbox__prev { left: 16px; }
.lightbox__next { right: 16px; }
@media (max-width: 600px) {
  .lightbox__nav { width: 46px; height: 46px; font-size: 26px; }
  .lightbox__prev { left: 8px; }
  .lightbox__next { right: 8px; }
}

/* ── responsive tweaks ──────────────────────────────── */
@media (max-width: 600px) {
  .container { padding: 0 20px; }
  .row__head { padding: 0 20px; }
  .row__scroll { padding-left: 20px; padding-right: 20px; }
  .hero { padding: 48px 0 24px; }
  .topbar__inner { padding: 12px 20px; }
  .game__title { font-size: clamp(26px, 8vw, 36px); }
  /* Tighter tag chips on mobile — 40+ tags eat too much vertical space */
  .chip {
    padding: 1px 7px;
    font-size: 10px;
    gap: 4px;
  }
  .game__chips,
  .hero-cinema__chips,
  .hero__chips { gap: 3px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── related tag pages (internal-linking block) ──── */
.related-tags {
  padding: 36px 0 56px;
  border-top: 1px solid var(--hairline);
}
.related-tags .section__heading {
  text-align: center;
  margin: 0 0 20px;
  font-size: 20px;
  color: var(--heading);
}
.related-tags__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  justify-content: center;
  max-width: 78ch;
  margin: 0 auto;
}
.related-tag {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface);
  color: var(--heading);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.related-tag:hover {
  border-color: var(--accent);
  background: var(--surface-2, var(--surface));
  transform: translateY(-1px);
}