/* AUTO-GENERATED - v10 */
/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=DM+Sans:wght@400;500;600&display=swap');

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Dark mode is the DEFAULT - no attribute needed ── */
  --bg:           #070707;
  --bg2:          #0e0e0e;
  --bg3:          #151515;
  --bg4:          #1c1c1c;
  --border:       rgba(255,255,255,0.055);
  --border2:      rgba(255,255,255,0.10);
  --text:         #f0ede8;
  --text2:        #a89f94;
  --muted:        #6d675f;   /* nudged brighter (was #5a554f) so dim text over the
                                wallpaper reads better — site-wide via this token */
  --accent:       #f85810;
  --accent2:      #ff7520;
  --accent-rgb:   248,88,16;
  --accent-dim:   rgba(var(--accent-rgb),0.13);
  --accent-glow:  rgba(var(--accent-rgb),0.38);
  --tag-bg:       rgba(var(--accent-rgb),0.10);
  --tag-text:     var(--accent);
  --header-bg:    rgba(7,7,7,0.55);
  --header-bg-scrolled: rgba(7,7,7,0.80);
  --radius:       8px;
  --radius-lg:    12px;
  --font-display: 'Barlow Condensed', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  /* ── Site Theme kit knobs (overridable via theme.css from the tool) ── */
  --nav-hl-hover: rgba(180,165,150,0.14);   /* header nav button hover fill */
  --nav-hl-active: rgba(195,180,165,0.25);  /* header nav button active fill */
  --panel-alpha:  0.5;                       /* home/pop/essentials panel bg opacity */
  --card-alpha:   0.58;                      /* mod-card / game-card bg opacity */
  --wp-blur:      16px;                       /* page wallpaper blur radius */
  --type-scale:   1;                          /* global text scale multiplier */
}
html { font-size: calc(100% * var(--type-scale)); }

/* ══════════════════════════════════════════
   THEME TOGGLE BUTTON
══════════════════════════════════════════ */
.theme-toggle {
  width: 40px; height: 22px;
  border-radius: 11px;
  background: var(--bg3);
  border: 1px solid var(--border2);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: background 0.25s, border-color 0.25s;
  padding: 0;
}

.theme-toggle-knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 0.25s cubic-bezier(0.34,1.28,0.64,1), background 0.25s;
  display: flex; align-items: center; justify-content: center;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  /* Sticky footer: keep the footer pinned to the viewport bottom when a page
     is short (e.g. a browse page with no mods) instead of leaving a dead gap
     below it. The wallpaper layers are position:fixed/absolute so they stay
     out of this flex flow. (2026-07-03) */
  display: flex;
  flex-direction: column;
}
body > main,
body > .page,
body > #mod-page-wrap,
body > .sr-main { flex: 1 0 auto; width: 100%; }  /* width:100% so max-width+margin:auto
   content (e.g. the picker's .games-page) still stretches as a flex item — a bare
   margin:auto flex child shrinks to content width and collapses the grid. */
body > footer { flex-shrink: 0; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); border-radius: 3px; }

/* ── Header ── */
header {
  background: var(--header-bg);
  /* The blur lives on ::before (not the header) so the header is NOT a
     backdrop root — that lets the nav-search dropdown's own backdrop-filter
     sample the PAGE behind it and actually blur (2026-07-03). */
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: background 0.3s ease;
}
header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  pointer-events: none;
}
header.scrolled {
  background: var(--header-bg-scrolled);
}

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

.logo { display: flex; align-items: center; gap: 11px; }

.logo-img {
  height: 44px; width: 44px;
  border-radius: 10px;
  object-fit: cover;
  transition: box-shadow 0.2s;
}

.logo:hover .logo-img { box-shadow: 0 0 0 2px var(--accent), 0 0 14px var(--accent-glow); }

.logo-wordmark {
  font-family: var(--font-display);
  font-size: 1.3rem; font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
}

.logo-wordmark em { font-style: normal; color: var(--accent); }
.logo-sub { font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }

/* Logo group - logo + quick-access icon buttons */
.logo-group { display: flex; align-items: center; gap: 6px; }

.nav-icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--muted);
  transition: color 0.18s, background 0.18s, border-color 0.18s, box-shadow 0.18s;
  flex-shrink: 0;
  cursor: pointer;
}
.nav-icon-btn:hover {
  color: var(--accent);
  background: var(--accent-dim);
  border-color: var(--accent);
}
.nav-icon-btn svg { display: block; }

nav { display: flex; align-items: center; gap: 2px; }

nav a {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 16px;
  border-radius: var(--radius);
  font-size: 0.875rem; font-weight: 500;
  color: var(--muted);
  transition: color 0.15s, background 0.15s;
  position: relative;
}
nav a svg { flex-shrink: 0; }

/* Mid-gray highlight: a black tint vanishes on really-dark backgrounds and a
   white tint reads too light — a semi-transparent mid-gray sits in between and
   stays visible on both dark and light backdrops (2026-07-03). */
nav a:hover { color: var(--text2); background: var(--nav-hl-hover); }
nav a.active { color: var(--text); background: var(--nav-hl-active); }

/* animated underline - every nav link has it; active = full (grows in on load),
   inactive = a quick hint on hover. Small lively touch. */
nav a::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 16px; right: 16px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
  box-shadow: 0 0 8px var(--accent-glow);
  transform: scaleX(0); transform-origin: center; opacity: 0.6;
  transition: transform 0.26s cubic-bezier(.3,.7,.3,1), opacity 0.26s;
}
nav a:not(.active):hover::after { transform: scaleX(0.5); opacity: 1; }
nav a.active::after { transform: scaleX(1); opacity: 1; animation: navUnderline 0.42s cubic-bezier(.3,.7,.3,1); }
@keyframes navUnderline { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  nav a::after { transition: none; }
  nav a.active::after { animation: none; }
}

/* ── Hero ── */
.hero {
  position: relative; z-index: 2;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: 5.5rem 2rem 4.5rem;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(108deg, transparent, transparent 55px, rgba(255,255,255,0.013) 55px, rgba(255,255,255,0.013) 56px);
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent) 40%, var(--accent2) 60%, transparent);
  opacity: 0.55;
}

#hero-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}

#page-canvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.hero-glow {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 720px; height: 360px;
  background: radial-gradient(ellipse at 50% 0%, rgba(var(--accent-rgb),0.12), transparent 70%);
  pointer-events: none;
}

.hero-inner { max-width: 680px; margin: 0 auto; text-align: center; position: relative; }

.hero-logo {
  width: 90px; height: 90px;
  border-radius: 20px; object-fit: cover;
  margin: 0 auto 1.1rem;
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb),0.22), 0 8px 40px rgba(0,0,0,0.65), 0 0 55px rgba(var(--accent-rgb),0.18);
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.1rem;
  padding: 5px 14px;
  border: 1px solid rgba(var(--accent-rgb),0.28);
  border-radius: 20px;
  background: var(--accent-dim);
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 800; letter-spacing: 0.025em;
  text-transform: uppercase; line-height: 1.05;
  margin-bottom: 2.5rem;
}

.hero h1 em { font-style: normal; color: var(--accent); text-shadow: 0 0 45px rgba(var(--accent-rgb),0.65); }
.hero p { color: var(--text2); font-size: 1rem; max-width: 460px; margin: 0 auto 2.25rem; line-height: 1.7; }

.stats-strip {
  width: 100%;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative; z-index: 2;
}
.stats-strip-inner {
  max-width: 1400px; margin: 0 auto;
  display: flex; align-items: stretch;
}
.stat {
  flex: 1; text-align: center;
  padding: 1rem 1rem;
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 11px;
  transition: background 0.15s;
}
.stat:hover { background: var(--bg3); }
.stat + .stat::before {
  content: ''; position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 1px; background: var(--border2);
}
.stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 2.6rem; font-weight: 900; line-height: 1;
  color: var(--accent);
  letter-spacing: -0.02em;
  text-shadow: 0 0 28px var(--accent-glow);
}
.stat span {
  font-size: 0.7rem; font-weight: 400;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.22em;
}

/* ── Page Layout ── */
.page { max-width: 1200px; margin: 0 auto; padding: 2.5rem 2rem; position: relative; z-index: 2; }

/* wrap + gap: .see-all is white-space:nowrap, so on a phone the title absorbed all
   the squeeze and broke mid-phrase ("MODS FOR 11" / "GAMES"). Wrapping lets the
   button drop to its own line instead; it only engages when the row can't fit. */
.section-header { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 1.5rem; padding-bottom: calc(1rem - 2px); border-bottom: 1px solid var(--border); }

.section-title { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }

.section-title-bar { width: 3px; height: 18px; background: var(--accent); border-radius: 2px; box-shadow: 0 0 10px var(--accent-glow); }

.see-all {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.82rem; font-weight: 600; color: var(--accent);
  background: rgba(14,14,14,0.58); border: 1px solid var(--border2);
  border-radius: var(--radius); padding: 6px 13px;
  text-decoration: none; white-space: nowrap;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.see-all:hover { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb),0.18); }

/* ── Mod Grid ── */
.mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 1rem; margin-bottom: 3rem; align-items: stretch; }

/* Cars page: 4 columns using the full width */
.cars-main .mod-grid {
  grid-template-columns: repeat(4, 1fr);
}

.mod-card {
  /* Semi-transparent "layered" fill like the ORIGINAL (NO backdrop-filter /
     blur - Jay's call). The strong 0.30 white border keeps the card readable
     over the particle field even though the fill is see-through. */
  background: rgba(14,14,14,var(--card-alpha));
  border: 1px solid rgba(255,214,190,0.12); /* warm-tinted, subtle edge (not a stark gray/white line) */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 4px 20px rgba(0,0,0,0.35);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s, background 0.2s;
  display: flex; flex-direction: column;
}

.mod-card:hover {
  border-color: rgba(var(--accent-rgb),0.75);
  transform: translateY(-3px);
  /* keep the resting fill on hover - no gray/pale lightening */
  box-shadow: 0 10px 36px rgba(0,0,0,0.50), 0 0 0 1px rgba(var(--accent-rgb),0.30), inset 0 1px 0 rgba(255,255,255,0.11);
}

.mod-thumb { width: 100%; height: 190px; background: rgba(21,21,21,0.70); position: relative; overflow: hidden; }
.mod-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.mod-card:hover .mod-thumb img { transform: scale(1.04); }

/* Track-shape silhouette overlaid in the lower-right of the preview -
   subtle (low opacity, corner-anchored) so it reads as a layout hint,
   not the main subject. pointer-events:none keeps the zoom hint clickable.
   The drop-shadow + brightness keep a white-on-transparent AC outline.png
   legible over both light and dark previews. The !important transform
   override stops it inheriting the parent img's hover zoom. */
.mod-thumb .track-outline-overlay {
  position: absolute;
  right: 10px; bottom: 10px;
  width: 34%; max-width: 132px; min-width: 64px;
  /* Cap the height too: a tall/portrait outline at 34% width would otherwise
     grow past the top of the thumb (height:auto). With both caps + contain it
     scales to fit the corner box, so small ones sit bottom-right as before and
     big ones shrink to stay in frame. */
  height: auto; max-height: 58%;
  object-fit: contain; object-position: right bottom;
  opacity: 0.82;
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.85)) brightness(1.15);
  transition: opacity 0.22s;
  transform: none !important;
}
.mod-card:hover .mod-thumb .track-outline-overlay { opacity: 0.95; }

/* In the cars 4-column grid, use a square-ish thumbnail */
.cars-main .mod-thumb { height: 185px; }                 /* browse grids: Cars/Tracks/Mods (+ game versions) */
body[data-page="search"] .mod-thumb { height: 185px; }   /* search results */

.thumb-placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; color: var(--muted); font-size: 0.78rem; letter-spacing: 0.04em;
  background: linear-gradient(135deg, var(--bg3), var(--bg2));
  position: relative;
}

.thumb-placeholder svg { opacity: 0.18; position: relative; z-index: 1; }
.thumb-placeholder span { position: relative; z-index: 1; }

.thumb-placeholder::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 24px 24px; opacity: 0.6;
}

.mod-cat-badge {
  position: absolute; top: 12px; left: 12px;
  background: var(--accent); color: #fff;
  font-family: var(--font-display); font-size: 0.68rem; font-weight: 700;
  padding: 3px 10px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: 0.1em;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5), 0 0 10px rgba(var(--accent-rgb),0.35);
  z-index: 1;
}

.mod-body { padding: 0.8rem 1.15rem 0.9rem; flex: 1; display: flex; flex-direction: column; }
.mod-title { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.4rem; line-height: 1.35; }
.mod-open-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex-shrink: 0;
  border-radius: 6px; color: var(--muted);
  background: var(--bg3); border: 1px solid var(--border);
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  text-decoration: none;
}
.mod-open-btn:hover { color: var(--accent); background: var(--accent-dim); border-color: var(--accent); }
/* Open-mod arrow removed from cards — the whole title already links to the mod
   page, so the extra chevron was redundant (frees the title row + a little space). */
.mod-open-btn { display: none; }
.mod-desc { font-size: 0.83rem; color: var(--text2); line-height: 1.45; margin-bottom: 0.25rem; flex: 0 0 auto; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Compact STATIC footer (no hover overlay — the overlay caused a hover-OUT
   repaint stall). tags+folder chips on one row, then a slim single-row action
   bar: download count (left) + Skins/Changelog/Download (right, slim). */
.mod-footer { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
/* chip row stays ONE line: tags don't shrink, folder truncates (ellipsis) so a
   long folder name never wraps to a 2nd row (which expanded the whole card). */
.mod-chiprow { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.mod-chiprow .mod-tags { flex-shrink: 0; flex-wrap: nowrap; }
.mod-chiprow .mod-folder { flex: 0 1 auto; min-width: 0; }
.mod-actionrow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
/* dl-count hugs the left; the whole button row hugs the right. When 2-3 buttons
   won't fit beside the count, the btnrow wraps as ONE unit to a full-width line
   (so the buttons stay on a single row instead of each wrapping separately). */
.mod-actionrow .dl-count { flex-shrink: 0; margin-right: auto; }
.mod-actionrow .mod-btnrow { margin-left: auto; }
.mod-btnrow { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
/* Download slimmed + order:3 so it's ALWAYS the right-most button (Skins /
   Changelog sit to its left). */
.mod-btnrow .dl-btn { padding: 5px 9px; font-size: 0.71rem; order: 3; }
/* Pin all three action buttons to the SAME height (icon sizes differ slightly,
   so padding alone left them a hair off). Single-line only — has-versions grows. */
.mod-btnrow .dl-btn:not(.has-versions),
.mod-btnrow .skins-btn, .mod-btnrow .changelog-btn {
  height: 30px; box-sizing: border-box; line-height: 1;
}
/* Skins/Changelog match the Download button EXACTLY (filled accent + same size,
   hover glow, and shine sweep) so the action row is visually consistent. */
.mod-btnrow .skins-btn, .mod-btnrow .changelog-btn {
  width: auto;
  background: linear-gradient(135deg, var(--accent2), var(--accent)); color: #fff; border: none;
  padding: 5px 9px; border-radius: var(--radius);
  font-size: 0.71rem; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; gap: 4px; white-space: nowrap;
  position: relative; overflow: hidden;
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
}
.mod-btnrow .skins-btn:hover, .mod-btnrow .changelog-btn:hover {
  /* must re-declare bg + color: the base .skins-btn:hover / .changelog-btn:hover
     rules (accent-dim wash / muted text) come later in the file and would win. */
  background: linear-gradient(135deg, var(--accent2), var(--accent)); color: #fff; border: none;
  filter: brightness(1.07); box-shadow: 0 5px 16px var(--accent-glow); transform: translateY(-1px);
}
.mod-btnrow .skins-btn > *, .mod-btnrow .changelog-btn > * { position: relative; z-index: 1; }
.mod-btnrow .skins-btn::before, .mod-btnrow .changelog-btn::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.30) 50%, transparent 62%);
  transform: translateX(-135%); transition: transform .6s ease;
}
.mod-btnrow .skins-btn:hover::before, .mod-btnrow .changelog-btn:hover::before { transform: translateX(135%); }
.mod-tags { display: flex; gap: 5px; flex-wrap: wrap; }

.mod-folder {
  display: inline-flex; align-items: center; gap: 4px;
  /* align-self:flex-start so the chip sizes to its NAME, not the column's
     cross-size. Without it the column-flex default (align-items:stretch)
     stretches the chip to full width whenever the tags wrap to a 2nd row
     (which widens the column) — leaving empty space after short names.
     max-width:100% still truncates genuinely-long names. */
  align-self: flex-start;
  font-family: 'Courier New', 'Consolas', monospace;
  font-size: 0.67rem; color: rgba(230,226,220,0.72);
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px; padding: 2px 7px;
  /* blur removed for perf (was jank on the particle bg) */
  max-width: 100%; min-width: 0; overflow: hidden;
}
.mod-folder svg { flex-shrink: 0; }
.mod-folder span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.folder-copy-btn {
  display: inline-flex; align-items: center; flex-shrink: 0;
  cursor: pointer; border-radius: 2px; padding: 1px;
  transition: color 0.15s;
}
.folder-copy-btn svg { transition: stroke 0.15s; }
.folder-copy-btn:hover { color: #f5c518; }
.folder-copy-btn.copied { color: #4caf72; }

.copy-toast {
  position: fixed;
  background: #4caf72;
  color: #fff;
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 20px;
  pointer-events: none;
  white-space: nowrap;
  z-index: 9999;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  box-shadow: 0 2px 10px rgba(76,175,114,0.35);
}

.tag {
  font-size: 0.67rem; font-weight: 600;
  background: rgba(var(--accent-rgb),0.10); color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb),0.45);
  border-radius: 6px; padding: 2px 7px;   /* match .mod-folder height/weight */
  white-space: nowrap;
}

.dl-btn {
  background: linear-gradient(135deg, var(--accent2), var(--accent)); color: #fff; border: none;
  padding: 8px 16px; border-radius: var(--radius);
  font-size: 0.8rem; font-weight: 600; cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap; flex-shrink: 0;
  font-family: var(--font-body);
}

.dl-btn:hover { background: linear-gradient(135deg, var(--accent2), var(--accent)); filter: brightness(1.07); box-shadow: 0 5px 16px var(--accent-glow); transform: translateY(-1px); }
.dl-btn:active { transform: scale(0.98); }

/* Download button - multi-version state */
.dl-btn.has-versions { flex-direction: column; align-items: center; gap: 0; padding: 3px 12px; }
.dl-btn-main { display: flex; align-items: center; gap: 6px; }
.dl-versions-sub { font-size: 0.6rem; font-weight: 400; opacity: 0.82; letter-spacing: 0.01em; white-space: nowrap; }

/* Download versions modal rows */
.dl-version-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 10px; text-decoration: none; color: var(--text);
  border-bottom: 1px solid rgba(255,255,255,0.05); transition: background 0.12s;
}
.dl-version-item:last-child { border-bottom: none; }
.dl-version-item:hover { background: rgba(255,255,255,0.05); }
.dl-version-info { flex: 1; min-width: 0; }
.dl-version-label { font-size: 0.88rem; font-weight: 700; }
.dl-version-desc  { font-size: 0.73rem; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.dl-version-get   { color: var(--accent); flex-shrink: 0; display: flex; align-items: center; padding: 0 4px; }
.dl-version-thumb { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); }
.dl-version-tag   { display: inline-block; margin-left: 6px; font-size: 0.64rem; font-weight: 700; color: var(--accent); background: rgba(255,255,255,0.06); border-radius: 5px; padding: 1px 6px; vertical-align: middle; letter-spacing: .02em; }
.dl-version-dls   { font-size: 0.67rem; color: var(--muted); margin-top: 3px; }
.dl-version-dls span { font-weight: 700; color: var(--text); }
html[data-theme="light"] .dl-version-tag { background: rgba(0,0,0,0.05) !important; }
/* User-entered per-version tag (e.g. "Hotfix") — neutral pill beside the version */
.dl-version-usertag { display: inline-block; margin-left: 5px; font-size: 0.62rem; font-weight: 700; color: var(--text2); background: rgba(255,255,255,0.08); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; vertical-align: middle; letter-spacing: .02em; }
html[data-theme="light"] .dl-version-usertag { background: rgba(0,0,0,0.06) !important; }
html[data-theme="light"] .dl-version-item { border-color: rgba(0,0,0,0.06) !important; }
html[data-theme="light"] .dl-version-item:hover { background: rgba(0,0,0,0.04) !important; }

/* ── Category Filter (legacy pill style, kept for tracks etc.) ── */
.cat-filter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 2rem; }

.cat-btn {
  padding: 7px 18px; border-radius: 20px;
  border: 1px solid var(--border2); background: transparent;
  color: var(--text2); font-size: 0.83rem; font-weight: 500;
  cursor: pointer; font-family: var(--font-body);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.cat-btn:hover { border-color: rgba(var(--accent-rgb),0.5); color: var(--text); }
.cat-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 14px var(--accent-glow); }

/* ── Cars page full-width layout ── */
.cars-page-wrap {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  align-items: start;
  /* min-height removed: it forced the content wrapper to 60vh, leaving a tall
     empty gap above the footer on browse pages. Now the footer follows the
     content like the home page. */
}

/* Sidebar flush to left edge */
.cat-sidebar-outer {
  padding: 2rem 0 2rem 2rem;
}

/* Main content area */
.cars-main {
  padding: 2rem 2rem 1rem 1.5rem;   /* tighter bottom so the footer follows content */
  min-width: 0;
}
/* browse grid: smaller bottom margin (global .mod-grid is 3rem) so the grid →
   pagination → footer stack isn't oversized vs the home page. */
.cars-main .mod-grid { margin-bottom: 1rem; }

/* ── Cars Layout (sidebar + grid) - legacy kept for tracks ── */

/* ── Category Sidebar ── */
.cat-sidebar {
  position: sticky;
  top: 84px;
  /* Semi-transparent like the cards so the page wallpaper shows through
     instead of reading as a solid black slab (Jay, 2026-07-03). */
  background: rgba(14,14,14,0.6);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  backdrop-filter: blur(16px) saturate(135%);
  border: 1px solid var(--border2);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.cat-sidebar-title {
  font-family: var(--font-display);
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
  padding: 0.85rem 1rem 0.65rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 7px;
}

.cat-sidebar-title::before {
  content: '';
  width: 3px; height: 12px;
  background: var(--accent);
  border-radius: 2px;
  box-shadow: 0 0 8px var(--accent-glow);
}

.cat-tab {
  display: block; width: 100%;
  padding: 10px 1rem;
  text-align: left;
  background: none; border: none;
  color: var(--text2);
  font-family: var(--font-body); font-size: 0.875rem; font-weight: 500;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: color 0.15s, background 0.15s;
  position: relative;
}

.cat-tab:last-child { border-bottom: none; }
.cat-tab:hover { color: var(--text); background: var(--bg3); }

.cat-tab.active {
  color: var(--accent);
  background: var(--accent-dim);
  font-weight: 600;
}

.cat-tab.active::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}

.cat-tab-skeleton {
  height: 40px;
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
  animation: pulse 1.5s ease-in-out infinite;
}

.cars-grid-wrap { min-width: 0; }

@media (max-width: 800px) {
  .cars-page-wrap {
    grid-template-columns: 1fr;
  }
  .cat-sidebar-outer {
    padding: 1rem 1rem 0;
    /* This is the grid item. Its default min-width:auto floors the 1fr track at
       the tab row's min-content — 24 brand tabs on /cars = a 1795px track and a
       page that pans sideways. Letting it shrink to the track is what lets
       .cat-sidebar's overflow-x:auto actually scroll instead of expand. */
    min-width: 0;
  }
  .cars-main {
    padding: 1rem;
  }
  /* The tabs are NOT direct children of .cat-sidebar — they sit in a
     <div id="cat-tabs"> wrapper. Making .cat-sidebar the flex row therefore gave
     it a single block-level item, so the tabs kept stacking vertically (a tall
     list beside a dead column) no matter what this block said. The row has to be
     #cat-tabs itself; .cat-sidebar just provides the horizontal scroll. */
  .cat-sidebar {
    position: static;
    overflow-x: auto;
    border-radius: var(--radius);
  }
  #cat-tabs { display: flex; flex-direction: row; }
  .cat-sidebar-title { display: none; }
  .cat-tab {
    flex-shrink: 0;
    width: auto;              /* reset the desktop `width:100%`, which pinned every
                                 tab to the wrapper's width */
    border-bottom: none;
    border-right: 1px solid var(--border);
    padding: 10px 16px;
  }
  .cat-tab:last-child { border-right: none; }
  .cat-tab.active::before {
    left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 3px;
  }
}

/* ── Page Banner ── */
.page-banner {
  /* warm radial glow (like the home hero's .hero-glow) so the banner has the
     same depth instead of reading as a flat grey strip */
  background: radial-gradient(115% 180% at 50% -25%, rgba(var(--accent-rgb),0.10), transparent 62%), var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: 2.5rem 2rem; position: relative; overflow: hidden;
}

.page-banner::before {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(108deg, transparent, transparent 55px, rgba(255,255,255,0.01) 55px, rgba(255,255,255,0.01) 56px);
  pointer-events: none;
}

.page-banner { border-bottom-color: rgba(var(--accent-rgb),0.16); }
.page-banner::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: auto; width: 25%; height: 2px; z-index: 3;
  background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 1; will-change: transform;
  animation: heroShimmer 4.5s linear infinite;
}

/* Synced cover background on the browse-page banner — same image as the game's
   home hero (games.json heroCovers[gid]||covers[gid]); the banner keeps its
   compact height, the cover sits behind a strong dim so the title stays legible. */
.page-banner-bg { display:none; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 35%; z-index:0; }
.page-banner-overlay { display:none; position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(180deg, rgba(6,6,8,0.84) 0%, rgba(6,6,8,0.74) 50%, rgba(6,6,8,0.90) 100%),
    radial-gradient(115% 180% at 50% -25%, rgba(var(--accent-rgb),0.10), transparent 62%); }
.page-banner.has-cover .page-banner-bg,
.page-banner.has-cover .page-banner-overlay { display:block; }
.page-banner.has-cover #hero-canvas { z-index:1; }
.page-banner.has-cover .page-banner-inner { z-index:2; }

.page-banner-inner { max-width: none; margin: 0; padding: 0 2rem; position: relative; z-index: 1; }

.page-banner h1 {
  font-family: var(--font-display); font-size: 2rem; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  display: flex; align-items: center; gap: 12px; margin-bottom: 0.35rem;
}

.page-banner h1 svg { color: var(--accent); }
.page-banner p { color: var(--text2); font-size: 0.9rem; padding-left: 36px; }

/* ── Loading state ── */
.loading-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 1rem;
  margin-bottom: 3rem;
}

.skeleton-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  animation: pulse 1.5s ease-in-out infinite;
}

.skeleton-thumb { height: 190px; background: var(--bg3); }
.skeleton-body { padding: 1rem 1.15rem 1.15rem; }
.skeleton-line { height: 12px; background: var(--bg3); border-radius: 4px; margin-bottom: 8px; }
.skeleton-line.short { width: 60%; }
.skeleton-line.long { width: 90%; }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* ── Empty state ── */
.empty-state { text-align: center; padding: 5rem 1rem; color: var(--muted); }
.empty-state svg { margin: 0 auto 1rem; opacity: 0.15; }
.empty-state p { font-size: 0.9rem; }

/* ── Footer ── */
footer { background: rgba(7,7,7,0.65); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border-top: 1px solid var(--border); padding: 2rem; }

.footer-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1rem; }

.footer-left { display: flex; align-items: center; gap: 10px; }
.footer-logo { width: 30px; height: 30px; border-radius: 7px; object-fit: cover; opacity: 0.75; }
.footer-brand { font-family: var(--font-display); font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); }
.footer-brand em { font-style: normal; color: var(--accent); }

/* wrap: this row (3 links + 3 toggles) is ~600px of content and used to force the
   whole document wider than a phone viewport, which is what let every page pan
   sideways. It must never be the widest thing on the page. */
.footer-links { display: flex; gap: 1.5rem; font-size: 0.82rem; align-items: center; flex-wrap: wrap; justify-content: center; }
.footer-links a { color: var(--muted); transition: color 0.15s; display: flex; align-items: center; gap: 6px; }
.footer-links a:hover { color: var(--accent); }
.footer-forum-link { font-size: 0.85rem; font-weight: 500; }
.footer-forum-link svg { flex-shrink: 0; }

/* ── Responsive ── */
/* 3-column browse grid for the mid band (laptops, landscape tablets, and a
   half-window desktop ~960px) — was jumping 4 -> 2 with nothing in between.
   Bounded range so it never fights the 4-col (>1140) or 2-col (<=768) rules. */
@media (min-width: 769px) and (max-width: 1140px) {
  .cars-main .mod-grid,
  .cars-grid-wrap .mod-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .nav-inner { padding: 0 1.25rem; height: 62px; }
  .hero { padding: 3.5rem 1.25rem 3rem; }
  .hero-logo { width: 72px; height: 72px; }
  .page { padding: 2rem 1.25rem; }
  .mod-grid, .loading-grid { grid-template-columns: repeat(2, 1fr); }
  .cars-main .mod-grid { grid-template-columns: repeat(2, 1fr); }
  .cars-grid-wrap .mod-grid { grid-template-columns: repeat(2, 1fr); }
  .stat { padding: 0 1rem; }
  .page-banner { padding: 2rem 1.25rem; }
  .footer-inner { flex-direction: column; align-items: center; }
  nav a { padding: 6px 10px; font-size: 0.82rem; }
}

@media (max-width: 480px) {
  .stats-strip-inner { flex-wrap: wrap; }
  .stat { flex: 1 1 40%; padding: 1.2rem 0.5rem; }
  .stat + .stat::before { display: none; }
  .stat strong { font-size: 2rem; }
}

/* ══════════════════════════════════════════════
   LIGHTBOX
══════════════════════════════════════════════ */

/* Clickable thumbnail upgrade */
.mod-thumb.has-image {
  cursor: zoom-in;
}

.mod-thumb.has-image .lb-zoom-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0);
  transition: background 0.22s;
  z-index: 2;
}

.mod-thumb.has-image:hover .lb-zoom-hint {
  background: rgba(0,0,0,0.38);
}

.lb-zoom-hint svg {
  opacity: 0;
  transform: scale(0.78);
  transition: opacity 0.22s, transform 0.22s;
  color: #fff;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.7));
}

.mod-thumb.has-image:hover .lb-zoom-hint svg {
  opacity: 1;
  transform: scale(1);
}

/* Backdrop */
#lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0);
  pointer-events: none;
  transition: background 0.22s ease;
}

#lightbox.lb-open {
  background: rgba(0, 0, 0, 0.88);
  pointer-events: all;
  cursor: zoom-out;
}

/* Image container */
.lb-content {
  position: relative;
  max-width: min(92vw, 1100px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transform: scale(0.88);
  opacity: 0;
  transition: transform 0.25s cubic-bezier(0.34, 1.28, 0.64, 1), opacity 0.2s ease;
  cursor: default;
}

#lightbox.lb-open .lb-content {
  transform: scale(1);
  opacity: 1;
}

.lb-img {
  max-width: 100%;
  max-height: calc(90vh - 60px);
  width: auto;
  height: auto;
  border-radius: 10px;
  display: block;
  box-shadow: 0 24px 80px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.06);
  object-fit: contain;
  user-select: none;
}

/* Caption */
.lb-caption {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.65);
  text-align: center;
  max-width: 600px;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

/* Close button */
.lb-close {
  position: fixed;
  top: 18px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(30,30,30,0.85);
  backdrop-filter: blur(10px);
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, transform 0.15s, border-color 0.15s;
  z-index: 10000;
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s, background 0.15s, color 0.15s;
}

#lightbox.lb-open .lb-close {
  opacity: 1;
  transform: scale(1);
  pointer-events: all;
}

.lb-close:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border-color: rgba(255,255,255,0.3);
  transform: scale(1.08) !important;
}

.lb-close:active {
  transform: scale(0.96) !important;
}

/* ══════════════════════════════════════════════
   MOD CARD META ROW  (Author / Country / Year)
══════════════════════════════════════════════ */
.mod-meta {
  display: block;
  overflow: hidden;           /* clip the overflow; full text via title tooltip */
  margin: 1px 0 3px;
  white-space: nowrap;
}
/* the sliding track that holds the meta items on one line */
.mod-meta-inner {
  display: inline-flex; align-items: center; flex-wrap: nowrap;
  gap: 6px 14px; white-space: nowrap;
}
/* On hover, if the meta line overflows, it BOUNCES left↔right to reveal the
   truncated part (ping-pong, not a one-way loop). JS sets --marq-x (distance)
   and --marq-dur, and adds [data-marq] only when the line actually overflows. */
@keyframes metaMarquee {
  0%, 14%   { transform: translateX(0); }
  86%, 100% { transform: translateX(var(--marq-x, 0)); }
}
.mod-card:hover .mod-meta-inner[data-marq] {
  animation: metaMarquee var(--marq-dur, 5s) ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .mod-card:hover .mod-meta-inner[data-marq] { animation: none; }
}

.mod-meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;             /* clip whole items at the edge, don't squish them */
  white-space: nowrap;
  font-size: 0.75rem;
  color: var(--text2);
}

.mod-meta-item svg {
  flex-shrink: 0;
  opacity: 0.5;
}

.mod-meta-item strong {
  font-weight: 500;
  color: var(--text);
}

/* Version badge */
.mod-version-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-family: var(--font-display, monospace);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: rgba(var(--accent-rgb),0.10);
  border: 1px solid rgba(var(--accent-rgb),0.45);
  border-radius: 6px;
  padding: 2px 7px;
  /* blur removed for perf (was jank on the particle bg) */
}

/* ══════════════════════════════════════════════
   SORT BAR
══════════════════════════════════════════════ */
.sort-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.sort-bar label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sort-select {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 0.82rem;
  padding: 6px 10px;
  cursor: pointer;
  font-family: var(--font-body);
  transition: border-color 0.15s;
  min-width: 170px;
}

.sort-select:focus { outline: none; border-color: var(--accent); }



/* ══════════════════════════════════════════════════════════════


/* ══════════════════════════════════════════════════════════════
   SEARCH BAR + SHOW ONLY BAR
══════════════════════════════════════════════════════════════ */
.filter-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 1.4rem;
}

.search-wrap {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 340px;
}

.search-input {
  width: 100%;
  background: rgba(14,14,14,0.5);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 8px 12px 8px 36px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.875rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.search-input:hover { border-color: rgba(var(--accent-rgb),0.55); }
.search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.search-input::placeholder { color: var(--muted); }

.search-icon {
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

.search-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  /* Frosted like the global nav search dropdown (Jay, 2026-07-03) - was an
     opaque slab that clashed with the wallpaper. */
  background: rgba(14,14,14,0.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  z-index: 200;
  display: none;
  max-height: min(65vh, 580px);
  overflow-y: auto;
}
.search-dropdown.open { display: block; }
/* unified orange scrollbar - was falling back to the grey default thumb
   (synced with .nav-search-dropdown + .filter-dd-panel) */
.search-dropdown { scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb),0.5) transparent; }
.search-dropdown::-webkit-scrollbar { width: 5px; }
.search-dropdown::-webkit-scrollbar-track { background: transparent; }
.search-dropdown::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb),0.5); border-radius: 3px; }
.search-dropdown::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-rgb),0.8); }

.search-result {
  padding: 9px 12px;
  font-size: 0.82rem;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}
.search-result:last-child { border-bottom: none; }
.search-result:hover { background: var(--bg3); }
.search-result-type {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); background: var(--bg3); border-radius: 3px; padding: 2px 5px; flex-shrink: 0;
}
.search-result-type.type-author { color: var(--accent); }
.search-result em { color: var(--accent); font-style: normal; font-weight: 600; }
.search-no-results { padding: 12px; font-size: 0.82rem; color: var(--muted); text-align: center; }

/* Show Only label */
.show-only-wrap { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.show-only-label { font-size: 0.78rem; font-weight: 600; color: var(--text2); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }

/* ── Custom filter dropdowns (Sort by / Show Only) ── */
.filter-dd-wrap { position: relative; flex-shrink: 0; }

.filter-dd-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: rgba(14,14,14,0.5); border: 1px solid var(--border2);
  border-radius: var(--radius); color: var(--text);
  font-size: 0.82rem; font-family: var(--font-body);
  padding: 6px 10px; min-width: 170px;
  cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s;
  white-space: nowrap; text-align: left;
}
.filter-dd-btn:hover { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb),0.18); }
.filter-dd-btn.open { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb),0.28); }
.filter-dd-btn svg { flex-shrink: 0; color: var(--muted); transition: transform 0.18s; }
.filter-dd-btn.open svg { transform: rotate(180deg); }

.filter-dd-panel {
  position: absolute; top: calc(100% + 5px); left: 0;
  min-width: 100%; z-index: 300;
  background: rgba(14,14,14,0.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--border2);
  border-radius: var(--radius); box-shadow: 0 8px 32px rgba(0,0,0,0.45);
  display: none; max-height: 280px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb),0.5) transparent;
}
.filter-dd-panel::-webkit-scrollbar { width: 5px; }
.filter-dd-panel::-webkit-scrollbar-track { background: transparent; }
.filter-dd-panel::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb),0.5); border-radius: 3px; }
.filter-dd-panel::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-rgb),0.8); border-radius: 3px; }
.filter-dd-panel.open { display: block; }

.filter-dd-item {
  padding: 8px 12px; font-size: 0.82rem; cursor: pointer;
  color: var(--text2); border-bottom: 1px solid var(--border);
  transition: background 0.12s, color 0.12s; white-space: nowrap;
}
.filter-dd-item:last-child { border-bottom: none; }
.filter-dd-item:hover { background: var(--bg3); color: var(--text); }
.filter-dd-item.active { color: var(--accent); font-weight: 600; }

.filter-dd-group {
  padding: 5px 12px 4px; font-size: 0.67rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); background: var(--bg3);
  border-bottom: 1px solid var(--border); pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   ACTIVITY LOG
══════════════════════════════════════════════════════════════ */
.faq-box {
  background: rgba(20,20,23,var(--panel-alpha));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin: 0 0 1.5rem 0;
  overflow: hidden;
}
.faq-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.8rem 1.25rem;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.faq-header:hover { background: var(--bg3); }
.faq-title {
  font-family: var(--font-display);
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text);
  display: flex; align-items: center; gap: 7px;
}
.faq-title::before {
  content: ''; width: 3px; height: 11px;
  background: var(--accent); border-radius: 2px;
  box-shadow: 0 0 6px var(--accent-glow);
}
.faq-chevron {
  color: var(--muted); transition: transform 0.25s ease; flex-shrink: 0;
}
.faq-box.open .faq-chevron { transform: rotate(180deg); }
/* grid-template-rows 0fr->1fr = butter-smooth accordion that auto-fits any
   content (incl. several expanded answers), no max-height jank, no JS height. */
.faq-body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s cubic-bezier(.4,0,.2,1);
  border-top: 0px solid var(--border);
}
.faq-body > * { overflow: hidden; min-height: 0; }
.faq-box.open .faq-body {
  grid-template-rows: 1fr;
  border-top-width: 1px;
}
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-item:last-child { border-bottom: none; }
.faq-item summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 1.25rem;
  font-size: 0.82rem; font-weight: 600; color: var(--text);
  cursor: pointer; gap: 12px;
  transition: background 0.12s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: var(--bg3); }
.faq-item summary::after {
  content: '+'; font-size: 1rem; font-weight: 400;
  color: var(--accent); flex-shrink: 0; line-height: 1;
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { content: '−'; }
.faq-item .faq-answer {
  padding: 0 1.25rem 0.85rem 1.25rem;
  font-size: 0.8rem; color: var(--text2); line-height: 1.65;
}
.faq-item .faq-answer p:last-child { margin-bottom: 0; }
html[data-theme="light"] .faq-box { background: var(--bg2) !important; border-color: var(--border) !important; }
html[data-theme="light"] .faq-header:hover { background: var(--bg3) !important; }
html[data-theme="light"] .faq-item summary:hover { background: var(--bg3) !important; }

.activity-log {
  background: rgba(20,20,23,var(--panel-alpha));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 2rem 0;
}

.activity-log-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(0.8rem - 2px) 1.25rem;
  border-bottom: 1px solid var(--border);
}

.activity-log-title {
  font-family: var(--font-display);
  /* Match .section-title (Essentials / Latest / Most Downloaded) for a
     consistent panel-title size across the home page (2026-07-03). */
  font-size: 1.1rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text);
  display: flex; align-items: center; gap: 10px;
}
.activity-log-title::before {
  content: ''; width: 3px; height: 18px;
  background: var(--accent); border-radius: 2px;
  box-shadow: 0 0 10px var(--accent-glow);
}

.activity-log-body {
  max-height: 360px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb),0.5) transparent;
}
.activity-log-body::-webkit-scrollbar { width: 5px; }
.activity-log-body::-webkit-scrollbar-track { background: transparent; }
.activity-log-body::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb),0.5); border-radius: 3px; }
.activity-log-body::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-rgb),0.8); }

.activity-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 1.25rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.78rem;
  transition: background 0.12s;
}
.activity-row:last-child { border-bottom: none; }
.activity-row:hover { background: var(--bg3); }

.activity-pill {
  flex-shrink: 0;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 4px;
}
.activity-pill.new     { background: rgba(45,164,78,0.15); color: #4caf72; }
.activity-pill.updated { background: rgba(var(--accent-rgb),0.13); color: var(--accent); border: 1px solid rgba(var(--accent-rgb),0.25); }
.activity-pill.edit    { background: rgba(var(--accent-rgb),0.13); color: var(--accent2); }
.activity-pill.new     { border: 1px solid rgba(45,164,78,0.3); }
.activity-pill.posted  { background: rgba(255,255,255,0.05); color: var(--muted); border: 1px solid var(--border2); }
/* Car / Track / Mod type tag in the activity log (outline chip, distinct from
   the filled NEW/UPDATED status pill). */
.activity-type {
  flex-shrink: 0;
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px; border: 1px solid currentColor;
}
.activity-type.type-car   { color: #5b9bd5; }
.activity-type.type-track { color: #a78bfa; }
.activity-type.type-mod   { color: #2dd4bf; }
.activity-type.type-log   { color: #d99a3a; }   /* uploadLog (manual / CSP-Pure) */
/* Light mode: the pastel pill colors wash out on the beige bg — use deeper,
   saturated tones (text + border are currentColor) so they read clearly. */
html[data-theme="light"] .activity-type.type-car   { color: #1f6fb2; }
html[data-theme="light"] .activity-type.type-track { color: #6d28d9; }
html[data-theme="light"] .activity-type.type-mod   { color: #0d8a7d; }
html[data-theme="light"] .activity-type.type-log   { color: #9c6f1a; }
html[data-theme="light"] .activity-pill.posted { background: rgba(0,0,0,0.05) !important; color: var(--muted) !important; border-color: var(--border2) !important; }

.activity-log-btn {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 0.66rem; padding: 2px 6px; border-radius: 4px; white-space: nowrap;
  transition: color 0.12s, background 0.12s; flex-shrink: 0;
  font-family: var(--font-body);
}
.activity-log-btn:hover { color: var(--accent); background: rgba(var(--accent-rgb),0.10); }

/* Changelog button on cards */
.changelog-btn {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  width: 100%; padding: 4px 11px; font-size: 0.68rem; font-weight: 500;
  background: none; border: 1px solid rgba(255,255,255,0.09);
  color: var(--muted); border-radius: 4px; cursor: pointer;
  transition: color 0.15s, border-color 0.15s; font-family: var(--font-body);
}
.changelog-btn:hover { color: var(--text2); border-color: rgba(255,255,255,0.20); }

/* Changelog modal entries */
.changelog-entry { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.changelog-entry:last-child { border-bottom: none; }
.changelog-entry-date { font-size: 0.68rem; color: var(--muted); margin-bottom: 3px; }
.changelog-entry-log  {
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.4;
  /* Preserve newlines + intentional whitespace the user typed
     into the Changelog Entry textarea (admin tool / web admin).
     Without pre-wrap, the browser collapses \n into spaces and
     the entry renders as one run-on paragraph. overflow-wrap
     also breaks very long unbroken tokens (e.g. a long URL) to
     the next line instead of forcing horizontal scroll on the
     popup. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

html[data-theme="light"] .activity-pill.updated { background: rgba(200,80,0,0.10) !important; color: var(--accent) !important; border-color: rgba(200,80,0,0.25) !important; }
html[data-theme="light"] .changelog-entry { border-color: rgba(0,0,0,0.06) !important; }
html[data-theme="light"] .changelog-btn { border-color: rgba(0,0,0,0.12) !important; }

.activity-name { font-weight: 600; color: var(--text); flex-shrink: 0; }
.activity-name:hover { text-decoration: underline !important; }
.activity-info { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.activity-meta { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 5px; flex-shrink: 1; min-width: 0; }
.activity-meta-item { display: inline-flex; align-items: center; gap: 3px; }
.activity-meta-sep { margin: 0 2px; opacity: 0.5; }
.activity-date { color: var(--muted); font-size: 0.72rem; flex-shrink: 0; white-space: nowrap; }
.activity-empty { padding: 1.2rem 1.25rem; font-size: 0.82rem; color: var(--muted); }

/* ══════════════════════════════════════════════════════════════
   LIGHT THEME - html[data-theme="light"] has higher specificity
   than any element rule, making it immune to cascade issues.
   Dark mode = :root default (no attribute), never overridden.
══════════════════════════════════════════════════════════════ */
html[data-theme="light"] {
  --bg:           #c9bdad;
  --bg2:          #c3b6a7;
  --bg3:          #b5a796;
  --bg4:          #a89787;
  --border:       rgba(0,0,0,0.10);
  --border2:      rgba(0,0,0,0.18);
  --text:         #17140f;
  --text2:        #3d3830;
  --muted:        #6e6459;
  --accent:       #d95000;
  --accent2:      #f06010;
  --accent-dim:   rgba(217,80,0,0.15);
  --accent-glow:  rgba(217,80,0,0.40);
  --tag-bg:       rgba(217,80,0,0.10);
  --tag-text:     #c45000;
  --header-bg:    rgba(210,203,193,0.72);
  --header-bg-scrolled: rgba(210,203,193,0.88);
}

/* All surfaces use the CSS variables - these explicit overrides
   handle elements whose backgrounds are set in their own rules */
html[data-theme="light"] body                { background: var(--bg) !important; color: var(--text) !important; }
html[data-theme="light"] header              { background: var(--header-bg) !important; }
html[data-theme="light"] header::before      { backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); }
html[data-theme="light"] header.scrolled     { background: var(--header-bg-scrolled) !important; }
html[data-theme="light"] .nav-icon-btn:hover { box-shadow: none !important; }
html[data-theme="light"] footer              { background: rgba(185,170,155,0.68) !important; backdrop-filter: blur(20px) saturate(180%) !important; -webkit-backdrop-filter: blur(20px) saturate(180%) !important; }
html[data-theme="light"] .hero               { background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(217,80,0,0.10) 0%, transparent 60%), var(--bg) !important; }
html[data-theme="light"] .hero::before       { background-image: repeating-linear-gradient(108deg, transparent, transparent 55px, rgba(0,0,0,0.018) 55px, rgba(0,0,0,0.018) 56px) !important; }
html[data-theme="light"] .hero h1            { color: var(--text) !important; }
html[data-theme="light"] .hero h1 em         { color: var(--accent) !important; }
html[data-theme="light"] .hero p             { color: var(--text2) !important; }
html[data-theme="light"] .hero-eyebrow       { border-color: rgba(var(--accent-rgb),0.35) !important; }
html[data-theme="light"] .page-banner        { background: var(--bg2) !important; }
html[data-theme="light"] .page-banner h1     { color: var(--text) !important; }
html[data-theme="light"] .page-banner p      { color: var(--text2) !important; }
/* When the banner/hero carries a dark cover image, its text must stay LIGHT in
   light mode too (the dark theme rules above would otherwise make it unreadable
   on the dark photo). has-cover = the dimmed cover art is showing. */
html[data-theme="light"] .page-banner.has-cover h1 { color:#fff !important; }
html[data-theme="light"] .page-banner.has-cover p  { color:rgba(228,223,216,0.82) !important; }
html[data-theme="light"] .hero-welcome.has-cover h1    { color:rgba(255,255,255,0.80) !important; }
html[data-theme="light"] .hero-welcome.has-cover h1 em { color:rgba(var(--accent-rgb),0.95) !important; }
html[data-theme="light"] .hero-welcome.has-cover p,
html[data-theme="light"] .hero-welcome.has-cover .hero-sub { color:rgba(226,221,214,0.80) !important; }
html[data-theme="light"] .hero-welcome.has-cover .hero-about-btn { color:#fff !important; }
html[data-theme="light"] .hero-welcome.has-cover .hero-about-btn:hover { color:var(--accent) !important; }
html[data-theme="light"] .mod-card           { background: rgba(214,203,189,0.62) !important; border-color: rgba(0,0,0,0.05) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 4px 18px rgba(0,0,0,0.08) !important; }
html[data-theme="light"] .mod-thumb          { background: rgba(181,167,150,0.70) !important; }
html[data-theme="light"] .thumb-placeholder  { color: var(--muted) !important; }
html[data-theme="light"] .mod-title          { color: var(--text) !important; text-shadow: none !important; }
html[data-theme="light"] .mod-desc           { color: var(--text2) !important; }
html[data-theme="light"] .mod-meta-item      { color: var(--text2) !important; }
html[data-theme="light"] .mod-meta-item strong { color: var(--text) !important; }
html[data-theme="light"] .mod-version-badge  { color: var(--accent) !important; border-color: rgba(217,80,0,0.45) !important; background: rgba(217,80,0,0.10) !important; }
/* Version pill sitting inline at the end of the card title */
.mod-version-inline { vertical-align: middle; margin-left: 0; position: relative; top: -1px; flex-shrink: 0; }
/* single-line title text with ellipsis (full title on the mod page + title attr) */
/* .mod-ttl is the clip box; .mod-ttl-inner holds the text (ellipsis when static,
   bounce-marquee on hover when it overflows — same as the meta line). */
.mod-ttl { overflow: hidden; white-space: nowrap; min-width: 0; }
.mod-ttl-inner { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.mod-card:hover .mod-ttl-inner[data-marq] {
  max-width: none; overflow: visible; text-overflow: clip;
  animation: metaMarquee var(--marq-dur, 3s) ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .mod-card:hover .mod-ttl-inner[data-marq] { animation: none; }
}
html[data-theme="light"] .mod-folder        { background: rgba(0,0,0,0.06) !important; border-color: rgba(0,0,0,0.12) !important; color: var(--text2) !important; }
html[data-theme="light"] .tag                { background: rgba(217,80,0,0.10) !important; color: #c45000 !important; border-color: rgba(217,80,0,0.45) !important; }
html[data-theme="light"] .cat-sidebar        { background: rgba(196,184,169,0.7) !important; -webkit-backdrop-filter: blur(16px) saturate(120%) !important; backdrop-filter: blur(16px) saturate(120%) !important; border-color: var(--border2) !important; }
html[data-theme="light"] .cat-sidebar-title  { color: var(--muted) !important; }
html[data-theme="light"] .cat-tab            { color: var(--text2) !important; background: transparent !important; }
html[data-theme="light"] .cat-tab:hover      { color: var(--text) !important; background: var(--bg3) !important; }
html[data-theme="light"] .cat-tab.active     { color: var(--accent) !important; background: rgba(217,80,0,0.12) !important; }
html[data-theme="light"] .cat-tab.active::before { background: var(--accent) !important; box-shadow: none !important; }
html[data-theme="light"] .sort-select        { background: var(--bg2) !important; color: var(--text) !important; border-color: var(--border2) !important; }
html[data-theme="light"] .filter-dd-btn      { background: rgba(195,182,167,0.5) !important; color: var(--text) !important; border-color: var(--border2) !important; }
html[data-theme="light"] .filter-dd-btn.open { box-shadow: 0 0 0 1px var(--accent) !important; }
html[data-theme="light"] .filter-dd-panel    { background: rgba(196,184,169,0.72) !important; border-color: var(--border2) !important; -webkit-backdrop-filter: blur(18px) saturate(120%) !important; backdrop-filter: blur(18px) saturate(120%) !important; }
html[data-theme="light"] .filter-dd-item     { color: var(--text2) !important; border-color: var(--border2) !important; }
html[data-theme="light"] .filter-dd-item:hover { background: var(--bg3) !important; color: var(--text) !important; }
html[data-theme="light"] .filter-dd-group    { background: var(--bg3) !important; color: var(--muted) !important; border-color: var(--border2) !important; }
html[data-theme="light"] .search-input       { background: rgba(195,182,167,0.5) !important; color: var(--text) !important; border-color: var(--border2) !important; }
html[data-theme="light"] .search-input:focus { box-shadow: 0 0 0 1px var(--accent) !important; }
html[data-theme="light"] .search-dropdown    { background: rgba(196,184,169,0.72) !important; border-color: var(--border2) !important; -webkit-backdrop-filter: blur(18px) saturate(120%) !important; backdrop-filter: blur(18px) saturate(120%) !important; }
html[data-theme="light"] .search-result:hover { background: var(--bg3) !important; }
html[data-theme="light"] .search-result-type { background: var(--bg3) !important; }
html[data-theme="light"] .theme-toggle       { background: var(--accent-dim) !important; border-color: rgba(217,80,0,0.35) !important; }
html[data-theme="light"] .theme-toggle-knob  { transform: translateX(18px) !important; background: var(--accent) !important; }
html[data-theme="light"] .activity-log       { background: var(--bg2) !important; border-color: var(--border) !important; }
html[data-theme="light"] .activity-log-header { border-color: var(--border) !important; }
html[data-theme="light"] .activity-log-title  { color: var(--text) !important; }
html[data-theme="light"] .activity-pill.new,
html[data-theme="light"] .activity-pill.updated { background: rgba(42,122,72,0.14) !important; color: #2a7a48 !important; }
html[data-theme="light"] .activity-row       { border-color: var(--border) !important; }
html[data-theme="light"] .activity-row:hover { background: var(--bg3) !important; }
html[data-theme="light"] .activity-name      { color: var(--text) !important; }
html[data-theme="light"] .skeleton-thumb,
html[data-theme="light"] .skeleton-line,
html[data-theme="light"] .cat-tab-skeleton   { background: var(--bg3) !important; }
html[data-theme="light"] .section-title      { color: var(--text) !important; }
html[data-theme="light"] .see-all            { color: var(--accent) !important; background: rgba(214,203,189,0.62) !important; border-color: var(--border2) !important; }
html[data-theme="light"] .stats-strip       { background: var(--bg2) !important; border-color: var(--border) !important; }
html[data-theme="light"] .stat              { }
html[data-theme="light"] .stat:hover        { background: var(--bg3) !important; }
html[data-theme="light"] .stat strong       { color: var(--accent) !important; text-shadow: none !important; }
html[data-theme="light"] .stat span         { color: var(--muted) !important; }
html[data-theme="light"] nav a               { color: var(--muted) !important; }
html[data-theme="light"] nav a:hover         { color: var(--text) !important; background: rgba(0,0,0,0.10) !important; }
html[data-theme="light"] nav a.active        { color: var(--text) !important; background: rgba(0,0,0,0.14) !important; }
html[data-theme="light"] .nav-back-chip, html[data-theme="light"] .sr-back { color: var(--muted) !important; background: transparent !important; border-color: transparent !important; }
html[data-theme="light"] .nav-back-chip:hover, html[data-theme="light"] .sr-back:hover,
html[data-theme="light"] .nav-back-chip:focus-visible, html[data-theme="light"] .sr-back:focus-visible { color: var(--text) !important; background: rgba(0,0,0,0.10) !important; box-shadow: none !important; }
html[data-theme="light"] .footer-brand       { color: var(--text) !important; }
html[data-theme="light"] .footer-links a     { color: var(--muted) !important; }
html[data-theme="light"] .footer-links a:hover { color: var(--accent) !important; }
html[data-theme="light"] .logo-sub           { color: var(--muted) !important; }
html[data-theme="light"] .sort-bar label,
html[data-theme="light"] .show-only-label    { color: var(--text2) !important; }
html[data-theme="light"] .section-header     { border-color: var(--border) !important; }
html[data-theme="light"] .logo-wordmark      { color: var(--text) !important; }
html[data-theme="light"] ::-webkit-scrollbar-track { background: transparent; }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--bg4); }


/* ══════════════════════════════════════════════════════════════
   V11 NEW STYLES
══════════════════════════════════════════════════════════════ */

/* ── Post title aura ── */
.mod-title {
  font-size: 0.95rem; font-weight: 700;
  margin-bottom: 0.35rem; line-height: 1.3;
  color: var(--text);
  position: relative;
  /* flex row: the title text (.mod-ttl) truncates to a SINGLE line with an
     ellipsis; the version badge stays put (flex-shrink:0) with an 8px gap so it
     never crowds the title. */
  display: flex; align-items: baseline; gap: 8px;
  /* width+10 offsets the -10 left margin so the box's RIGHT edge reaches the
     body content edge (same as the Download button); small right padding lets
     the truncated title use nearly the full width (was stopping ~18px short). */
  width: calc(100% + 10px);
  padding: 2px 3px 2px 10px;
  margin-left: -10px;
  border-left: 2.5px solid var(--accent);
  /* Subtle warm wash that blends into the now-opaque card (the old stronger
     gradient + heavy text-shadow read as a distracting dark "tab"). */
  background: linear-gradient(90deg, rgba(var(--accent-rgb),0.08) 0%, transparent 45%);
  border-radius: 0 4px 4px 0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* ── Download counter badge ── */
.dl-count {
  font-size: 0.68rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.dl-count svg { opacity: 0.55; }

/* ── Image carousel on card ── */
.mod-thumb { position: relative; }
.carousel-nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,0.55);
  border: none; color: #fff;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: background 0.15s, opacity 0.15s;
  opacity: 0;
}
.mod-card:hover .carousel-nav { opacity: 1; }
.carousel-nav:hover { background: rgba(0,0,0,0.8); }
.carousel-nav.prev { left: 6px; }
.carousel-nav.next { right: 6px; }
.carousel-dots {
  position: absolute;
  bottom: 6px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 4px;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.15s;
}
.mod-card:hover .carousel-dots { opacity: 1; }
.carousel-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  cursor: pointer;
  transition: background 0.15s;
}
.carousel-dot.active { background: #fff; }

/* ── Visit counter chip (footer) ── */
.visit-counter {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.72rem; color: var(--muted);
}
.visit-counter svg { opacity: 0.5; }

/* ── Header global search ── */
.nav-search-wrap {
  position: relative;
  flex-shrink: 0;
}
.nav-search-input {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 20px;
  padding: 6px 58px 6px 14px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.8rem;
  width: 200px;
  transition: width 0.25s, border-color 0.15s, box-shadow 0.15s;
}
.nav-search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); width: 280px; }
.nav-search-input::placeholder { color: var(--muted); }
.nav-search-go { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--muted); cursor: pointer; padding: 2px; border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: color 0.15s; }
.nav-search-go:hover { color: var(--accent); }
.nav-search-clear { position: absolute; right: 30px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--muted); cursor: pointer; padding: 2px; display: none; transition: color 0.15s; }
.nav-search-clear:hover { color: var(--text); }
.nav-search-clear.visible { display: flex; }
.nav-search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 100%;
  background: rgba(14,14,14,0.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--border2);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  z-index: 300;
  display: none;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: min(72vh, 680px);
  padding: 5px;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb),0.5) transparent;
}
.nav-search-dropdown::-webkit-scrollbar { width: 5px; }
.nav-search-dropdown::-webkit-scrollbar-track { background: transparent; }
.nav-search-dropdown::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb),0.5); border-radius: 3px; }
.nav-search-dropdown::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-rgb),0.8); }
.nav-search-dropdown.open { display: block; }
.nav-search-section-label {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
  padding: 8px 12px 4px;
  border-top: 1px solid var(--border);
}
.nav-search-section-label:first-child { border-top: none; }
.nav-search-result {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 0.82rem;
  transition: background 0.12s;
  text-decoration: none;
  color: var(--text);
  min-width: 0;
  overflow: hidden;
}
.nav-search-result > div:not(.nav-search-result-icon) {
  min-width: 0; overflow: hidden; flex: 1;
}
.nav-search-result > div:not(.nav-search-result-icon) > div {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-search-result:hover { background: rgba(255,255,255,0.07); }
/* rectangular preview (shows the full image, like the landing search) */
.nav-search-result-icon { width: 48px; height: 32px; border-radius: 6px; background: var(--bg3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.nav-search-result-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }

/* ── Reset filters button ── */
.btn-reset-filters {
  background: none;
  border: 1px solid var(--border2);
  color: var(--muted);
  border-radius: var(--radius);
  padding: 7px 12px;
  font-size: 0.78rem;
  font-family: var(--font-body);
  cursor: pointer;
  display: flex; align-items: center; gap: 5px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  white-space: nowrap;
}
.btn-reset-filters:hover { color: var(--accent); border-color: var(--accent); background: var(--bg3); box-shadow: 0 0 0 2px rgba(var(--accent-rgb),0.15); }
.btn-reset-filters.active-filter { color: var(--accent); border-color: rgba(var(--accent-rgb),0.4); }

/* ── Search clear X inside input ── */
.search-clear-btn {
  position: absolute;
  right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none;
  color: var(--muted); cursor: pointer;
  padding: 3px; border-radius: 50%;
  display: none; align-items: center;
  transition: color 0.15s, background 0.15s;
}
.search-clear-btn.visible { display: flex; }
.search-clear-btn:hover { color: var(--text); background: var(--bg3); }

/* ── Lightbox multi-image nav ── */
.lb-nav-btn {
  position: fixed;
  top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  width: 46px; height: 46px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 10001;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, background 0.15s, transform 0.15s;
  backdrop-filter: blur(8px);
}
#lightbox.lb-open .lb-nav-btn { opacity: 1; pointer-events: all; }
.lb-nav-btn:hover { background: rgba(255,255,255,0.15); transform: translateY(-50%) scale(1.08); }
.lb-nav-prev { left: 20px; }
.lb-nav-next { right: 20px; }
.lb-counter {
  position: fixed;
  top: 20px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.75);
  font-size: 0.78rem; padding: 4px 14px;
  border-radius: 20px;
  z-index: 10001;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s;
}
#lightbox.lb-open .lb-counter { opacity: 1; }

/* ── Nav layout with search - 3 column so search is truly centered ── */
.nav-inner {
  max-width: none;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 64px;
  gap: 1rem;
}

.nav-inner .logo-group { grid-column: 1; }

.nav-center-search {
  grid-column: 2;
  display: flex;
  justify-content: center;
}

nav {
  grid-column: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
  flex-shrink: 0;
}

/* Wider search on desktop since it's centred now — but RESPONSIVE (clamp) so
   the header never forces horizontal overflow at narrower / half-window widths. */
.nav-search-input { width: clamp(240px, 46vw, 720px); }
.nav-search-input:focus { width: clamp(240px, 46vw, 720px); }

/* Dropdown anchored to center wrapper */
.nav-center-search .nav-search-wrap { position: relative; }
.nav-center-search .nav-search-dropdown { right: 0; left: auto; transform: none; }

@media (max-width: 1140px) {
  /* Collapse the centered header search before it would overflow the row
     (raised from 760px — the 760-1290 band was scrolling sideways). */
  .nav-inner { grid-template-columns: 1fr auto; }
  .nav-center-search { display: none; }
  nav { grid-column: 2; }
}

/* Light mode overrides for new elements */
html[data-theme="light"] .nav-search-input    { background: var(--bg3) !important; color: var(--text) !important; border-color: var(--border2) !important; }
html[data-theme="light"] .nav-search-input:focus { box-shadow: 0 0 0 1px var(--accent) !important; }
html[data-theme="light"] .nav-search-dropdown { background: rgba(196,184,169,0.72) !important; border-color: var(--border2) !important; -webkit-backdrop-filter: blur(18px) saturate(120%) !important; backdrop-filter: blur(18px) saturate(120%) !important; }
html[data-theme="light"] .nav-search-result   { color: var(--text) !important; }
html[data-theme="light"] .nav-search-result:hover { background: rgba(0,0,0,0.05) !important; }
html[data-theme="light"] .nav-search-result-icon { background: var(--bg3) !important; }
html[data-theme="light"] .mod-title           { background: linear-gradient(90deg, rgba(217,80,0,0.12) 0%, transparent 80%) !important; border-left-color: var(--accent) !important; }
html[data-theme="light"] .carousel-nav        { background: rgba(0,0,0,0.35) !important; }
html[data-theme="light"] .btn-reset-filters   { color: var(--muted) !important; border-color: var(--border2) !important; }
html[data-theme="light"] .btn-reset-filters:hover { background: var(--bg3) !important; color: var(--text) !important; }

/* ── Site Notice Banner ── */
.site-notice {
  width: 100%;
  background: linear-gradient(90deg, rgba(var(--accent-rgb),0.12) 0%, rgba(var(--accent-rgb),0.06) 100%);
  border-bottom: 1px solid rgba(var(--accent-rgb),0.25);
  padding: 10px 2rem;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-size: 0.82rem; color: var(--text2);
  position: relative;
  animation: noticeSlide 0.3s ease;
}
@keyframes noticeSlide { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
.site-notice-icon { color: var(--accent); flex-shrink: 0; }
.site-notice-text { flex: 1; text-align: center; line-height: 1.5; }
.site-notice-text strong { color: var(--accent); }
.site-notice-dismiss {
  background: none; border: none; cursor: pointer;
  color: var(--muted); padding: 2px 6px; border-radius: 4px;
  flex-shrink: 0; font-size: 1rem; line-height: 1;
  transition: color 0.15s, background 0.15s;
}
.site-notice-dismiss:hover { color: var(--text); background: rgba(255,255,255,0.08); }
html[data-theme="light"] .site-notice { background: linear-gradient(90deg, rgba(var(--accent-rgb),0.08) 0%, rgba(var(--accent-rgb),0.03) 100%) !important; }

/* ── Skins Modal ─────────────────────────────────────────────────────────── */
.skins-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(6,6,10,0.66);
  display: none; align-items: center; justify-content: center; padding: 16px;
}
.skins-modal-overlay.open { display: flex; }

@keyframes skinsPopIn {
  0%   { opacity: 0; transform: scale(0.88) translateY(18px); }
  55%  { opacity: 1; transform: scale(1.03) translateY(-4px); }
  75%  { transform: scale(0.98) translateY(2px); }
  100% { transform: scale(1) translateY(0); }
}
.skins-modal-overlay.open .skins-modal-box {
  animation: skinsPopIn 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.skins-modal-box {
  background: rgba(16,16,18,0.70);
  backdrop-filter: blur(24px) saturate(135%); -webkit-backdrop-filter: blur(24px) saturate(135%);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 24px 64px rgba(0,0,0,0.6);
  border-radius: 16px;
  width: 100%; max-width: 700px; max-height: 82vh;
  display: flex; flex-direction: column; overflow: hidden;
}

.skins-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0; gap: 10px;
}
.skins-modal-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.88rem; font-weight: 600; color: var(--text); min-width: 0;
}
.skins-modal-title svg { color: var(--accent); flex-shrink: 0; }
.skins-modal-subtitle {
  font-weight: 400; color: var(--muted); font-size: 0.8rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.skins-modal-count { color: var(--muted); font-size: 0.72rem; flex-shrink: 0; }

.skins-modal-controls { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.skins-view-btn {
  background: none; border: 1px solid var(--border2); color: var(--muted);
  border-radius: 6px; padding: 5px 8px; cursor: pointer;
  display: flex; align-items: center; transition: background .15s, border-color .15s, color .15s;
}
.skins-view-btn.active  { background: var(--accent); border-color: var(--accent); color: #fff; }
.skins-view-btn:hover:not(.active) { border-color: var(--accent); color: var(--accent); }
.skins-modal-close {
  background: none; border: none; color: var(--muted); cursor: pointer;
  padding: 5px; border-radius: 6px; display: flex; align-items: center;
  transition: color 0.15s; margin-left: 2px;
}
.skins-modal-close:hover { color: var(--text); }

.skins-modal-body {
  overflow-y: auto; flex: 1; padding: 10px 12px;
  scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb),0.5) transparent;
}
.skins-modal-body::-webkit-scrollbar { width: 5px; }
.skins-modal-body::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb),0.5); border-radius: 3px; }

/* List view */
.skin-list-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px; border-radius: 10px; text-decoration: none; color: var(--text);
  border-bottom: 1px solid rgba(255,255,255,0.05); transition: background 0.12s;
}
.skin-list-item:last-child { border-bottom: none; }
.skin-list-item:hover { background: rgba(255,255,255,0.05); }
.skin-list-img {
  width: 130px; height: 82px; flex-shrink: 0; border-radius: 10px; overflow: hidden;
  background: var(--bg3); display: flex; align-items: center; justify-content: center;
}
.skin-list-img img { width: 100%; height: 100%; object-fit: cover; }
.skin-img-ph { font-size: 1.5rem; }
.skin-list-info { flex: 1; min-width: 0; }
.skin-list-name { font-size: 0.84rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skin-list-meta { font-size: 0.71rem; color: var(--muted); margin-top: 3px; }
.skin-list-version { display: inline-block; margin-left: 6px; padding: 1px 5px; font-size: 0.65rem; background: rgba(var(--accent-rgb),0.15); color: var(--accent); border-radius: 4px; border: 1px solid rgba(var(--accent-rgb),0.25); }
.skin-list-dl { color: var(--accent); flex-shrink: 0; display: flex; align-items: center; padding: 0 4px; text-decoration: none; }

/* ── Skin previews gallery (multi-image) ── */
button.skin-list-img { border: 0; position: relative; cursor: zoom-in; }
.skin-list-img.skin-shot, .skin-grid-img.skin-shot { cursor: zoom-in; }
.skin-count-badge {
  position: absolute; right: 6px; bottom: 6px; z-index: 2;
  background: rgba(0,0,0,0.72); color: #fff; font-size: 0.66rem; font-weight: 600;
  line-height: 1; padding: 3px 6px; border-radius: 999px; pointer-events: none;
  border: 1px solid rgba(255,255,255,0.20);
}
.skin-grid-dl {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 0; text-decoration: none; color: var(--accent);
  font-size: 0.74rem; font-weight: 600;
  border-top: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.02);
  transition: background 0.12s;
}
.skin-grid-dl:hover { background: rgba(var(--accent-rgb),0.10); }
html[data-theme="light"] .skin-grid-dl { border-color: rgba(0,0,0,0.08) !important; }

/* Grid / collage view */
.skins-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 500px) { .skins-grid { grid-template-columns: 1fr; } }
.skin-grid-item {
  display: block; text-decoration: none; border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08); transition: transform 0.15s, border-color 0.15s;
}
.skin-grid-item:hover { transform: translateY(-2px); border-color: rgba(var(--accent-rgb),0.5); }
.skin-grid-img { position: relative; aspect-ratio: 16/10; background: var(--bg3); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.skin-grid-img img { width: 100%; height: 100%; object-fit: cover; }
.skin-grid-ph { font-size: 2rem; }
.skin-grid-overlay {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 8px 9px;
  background: linear-gradient(transparent, rgba(0,0,0,0.80));
}
.skin-grid-name { font-size: 0.76rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skin-grid-meta { font-size: 0.64rem; color: rgba(255,255,255,0.62); margin-top: 1px; }
.skin-grid-dls { display:inline-flex; align-items:center; gap:2px; }
.skin-grid-dls svg { vertical-align:middle; opacity:0.85; position:relative; top:-0.5px; }

/* Skins button - mod card */
.skins-btn {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  width: 100%; padding: 5px 11px; font-size: 0.72rem; font-weight: 600;
  background: none; border: 1px solid rgba(var(--accent-rgb),0.32);
  color: var(--accent); border-radius: 4px; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap; font-family: var(--font-body);
}
.skins-btn:hover { background: var(--accent-dim); border-color: rgba(var(--accent-rgb),0.5); }

/* Skins button - mod detail sidebar */
.skins-sidebar-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 11px 16px; margin-top: 10px; margin-bottom: 16px;

  background: rgba(var(--accent-rgb),0.08); border: 1px solid rgba(var(--accent-rgb),0.30);
  color: var(--accent); border-radius: 10px; cursor: pointer;
  font-size: 0.86rem; font-weight: 600; font-family: var(--font-body);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.skins-sidebar-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Light-mode overrides */
/* Lighten the scrim so the box's backdrop-blur actually shows the page behind
   (over the old near-black scrim it read as a flat solid card), + make the box
   more translucent so it reads as frosted glass like the dark theme. */
html[data-theme="light"] .skins-modal-overlay     { background: rgba(40,32,24,0.42) !important; }
html[data-theme="light"] .skins-modal-box         { background: rgba(204,192,177,0.82) !important; border-color: rgba(0,0,0,0.10) !important; }
html[data-theme="light"] .skins-modal-header       { border-color: rgba(0,0,0,0.08) !important; }
html[data-theme="light"] .skin-list-item           { border-color: rgba(0,0,0,0.06) !important; }
html[data-theme="light"] .skin-list-item:hover     { background: rgba(0,0,0,0.04) !important; }
html[data-theme="light"] .skin-grid-item           { border-color: rgba(0,0,0,0.10) !important; }

/* ============================================================================
   MULTI-GAME LAYER + post-title animation - re-applied on top of the ORIGINAL
   design (2026-06-17). Original look preserved; only adds: game picker, the
   welcome/AC hero (logo mark), nav chips, and an animated underline on the
   existing post title (original font kept).
   ============================================================================ */

/* ── nav (picker label + back-to-games chip) ── */
.nav-games-label { display:flex; align-items:center; gap:7px; font-family:var(--font-display); text-transform:uppercase; letter-spacing:0.1em; font-size:1rem; font-weight:600; color:var(--text2); }
/* Back buttons (Games / Back, incl. the search page) - styled like the nav
   links, but the signature animation is an accent ring that EXPANDS to wrap the
   whole button on hover (instead of the nav links' underline). */
/* "< Games" / "< Back" back buttons — styled to MATCH the header nav links
   (nav a) for consistency (Jay, 2026-07-03): muted text, no border/pill at rest,
   subtle translucent hover fill. Keeps a small chevron nudge on hover. */
.nav-back-chip, .sr-back {
  position: relative;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 16px; border-radius: var(--radius);
  font-family: var(--font-body); font-size: 0.875rem; font-weight: 500;
  color: var(--muted); background: transparent; border: 1px solid transparent;
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
.nav-back-chip:hover, .sr-back:hover,
.nav-back-chip:focus-visible, .sr-back:focus-visible {
  color: var(--text2); background: var(--nav-hl-hover); border-color: transparent;
  box-shadow: none;
}
.nav-back-chip svg, .sr-back svg { color: currentColor; transition: transform 0.22s ease; }
.nav-back-chip:hover svg, .sr-back:hover svg,
.nav-back-chip:focus-visible svg, .sr-back:focus-visible svg { transform: translateX(-3px); }   /* back nudge */
/* animated accent underline on hover — matches the header nav links (nav a::after) */
.nav-back-chip::after, .sr-back::after {
  content: ''; position: absolute; bottom: -1px; left: 16px; right: 16px; height: 2px;
  background: var(--accent); border-radius: 2px 2px 0 0; box-shadow: 0 0 8px var(--accent-glow);
  transform: scaleX(0); transform-origin: center; opacity: 0.6;
  transition: transform 0.26s cubic-bezier(.3,.7,.3,1), opacity 0.26s;
}
.nav-back-chip:hover::after, .sr-back:hover::after,
.nav-back-chip:focus-visible::after, .sr-back:focus-visible::after { transform: scaleX(0.5); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .nav-back-chip:hover svg, .sr-back:hover svg { transform: none; }
  .nav-back-chip::after, .sr-back::after { transition: none; }
}

/* ── welcome / AC hero (logo mark) - uses .hero base from original ── */
.hero-welcome .hero-inner { display:flex; flex-direction:column; align-items:center; }
.hero-mark { width:92px; height:92px; border-radius:22px; object-fit:cover; margin-bottom:1.2rem; box-shadow:0 0 0 1px var(--border2), 0 16px 40px rgba(0,0,0,0.6), 0 0 44px var(--accent-glow); transition:transform .4s cubic-bezier(.2,.7,.3,1); }
.hero-mark:hover { transform:translateY(-4px) scale(1.03); }
.hero-welcome h1 { margin-bottom:0.55rem; }
.hero-welcome p { margin:0 auto; color:var(--text2); font-size:1.02rem; max-width:540px; line-height:1.6; }

/* ── cover-banner hero variant (per-game): cover art as a dimmed backdrop with
      the title anchored bottom-left over it. Activated by JS adding .has-cover. ── */
.hero-cover-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:0; display:none; opacity:0; transition:opacity 1.4s ease, filter .45s ease, transform .45s ease; }
.hero-cover-bg.show { opacity:1; }
.hero-cover-overlay { position:absolute; inset:0; z-index:1; display:none;
  background:
    linear-gradient(180deg, rgba(6,6,8,0.88) 0%, rgba(6,6,8,0.79) 35%, rgba(6,6,8,0.92) 78%, rgba(6,6,8,0.98) 100%),
    radial-gradient(ellipse 90% 80% at 50% 120%, rgba(var(--accent-rgb),0.13), transparent 62%); }
/* Light mode: a cold near-black slab reads as "off" on the warm light page.
   Warm the overlay toward the theme AND feather its bottom (empty padding zone,
   below the content) into the page bg so the hero dissolves into the page
   instead of ending on a hard horizontal line. */
html[data-theme="light"] .hero-welcome.has-cover .hero-cover-overlay {
  /* Even dark dim for title legibility — NO fade to the page colour at the
     bottom (that beige ramp looked muddy). The cover image runs full-height
     and stops at a clean straight bottom edge / border line. */
  background:
    linear-gradient(180deg,
      rgba(24,18,12,0.80) 0%,
      rgba(28,21,15,0.52) 55%,
      rgba(32,25,18,0.66) 100%);
}
/* The left-aligned, bottom-anchored layout is the DEFAULT for every game hero
   (covered or not); the cover image / dimming overlay / translucent title are
   layered on only when .has-cover is present. */
.hero-welcome { min-height:420px; padding:0; display:flex; align-items:flex-end; justify-content:center; overflow:hidden; }
.hero-welcome .hero-mark { display:none; }
.hero-welcome .hero-inner { position:relative; z-index:3; width:100%; max-width:1200px; text-align:left; align-items:flex-start; margin:0; padding:0 clamp(1.5rem,5vw,4rem) 2.6rem; }
.hero-welcome h1 { margin-bottom:0.45rem; font-size:clamp(2.5rem,6vw,4.2rem); }
.hero-welcome .hero-inner p { margin:0; max-width:600px; }
.hero-welcome.has-cover .hero-cover-bg,
.hero-welcome.has-cover .hero-cover-overlay { display:block; }
.hero-welcome.has-cover #hero-canvas { display:block; z-index:2; }   /* particles drift over the dimmed cover */
.hero-welcome.has-cover .hero-glow { display:none; }
.hero-welcome.has-cover h1 { color:rgba(255,255,255,0.74); text-shadow:0 2px 16px rgba(0,0,0,0.5); }
.hero-welcome.has-cover h1 em { color:rgba(var(--accent-rgb),0.78); text-shadow:0 2px 16px rgba(0,0,0,0.5); }
.hero-welcome.has-cover p { color:rgba(220,214,207,0.66); text-shadow:0 2px 12px rgba(0,0,0,0.55); }
/* hero stat pills + external-link buttons (sit over the cover).
   NB: named .gh-* — the picker page reuses .hero-stat(s) for its own grouped bar. */
.gh-stats { display:flex; flex-wrap:wrap; gap:8px; margin:1.2rem 0 1rem; }
.gh-stat { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:99px; background:rgba(255,255,255,0.055); border:1px solid rgba(255,255,255,0.11); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); font-size:0.8rem; color:rgba(228,224,218,0.64); }
.gh-stat b { color:#fff; font-weight:700; font-size:0.86rem; }
/* Poster layout: the full vertical box-art sits on the LEFT (rounded all round,
   vertically centred), with the title / description / stats / links to its right. */
.hero-poster { display:none; }
.hero-welcome.has-poster { align-items:center; justify-content:center; gap:clamp(1.4rem,4vw,3rem); padding:2.4rem clamp(1.5rem,5vw,4rem); }
.hero-welcome.has-poster .hero-poster { display:block; position:static; flex-shrink:0; z-index:3; height:clamp(230px,56vh,360px); width:auto; border-radius:14px; box-shadow:0 16px 46px rgba(0,0,0,0.62), 0 0 0 1px rgba(255,255,255,0.09); }
.hero-welcome.has-poster .hero-inner { max-width:660px; width:auto; margin:0; padding:0; }
@media (max-width:860px) {
  .hero-welcome.has-poster { flex-direction:column; align-items:flex-end; justify-content:center; padding:0; gap:0; }
  .hero-welcome.has-poster .hero-poster { display:none; }
  .hero-welcome.has-poster .hero-inner { max-width:1200px; padding:0 clamp(1.5rem,5vw,4rem) 2.6rem; }
  /* .hero-inner has NO top padding — on desktop that's invisible because the hero
     is 420px tall and align-items:flex-end parks the content at the bottom. On a
     phone the content (breadcrumb + title + description + stats + links) is taller
     than the hero, so it filled the box and the breadcrumb ended up glued to the
     header. Give it a real top gap. */
  .hero-welcome .hero-inner,
  .hero-welcome.has-poster .hero-inner { padding-top:1.6rem; }
}
.hero-links { display:flex; flex-wrap:wrap; gap:8px; }
.hero-link { display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:9px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); color:rgba(230,226,220,0.82); font-size:0.78rem; font-weight:600; text-decoration:none; transition:background .2s, border-color .2s, color .2s, transform .2s; }
.hero-link svg { opacity:0.8; flex-shrink:0; }
.hero-link:hover { background:rgba(var(--accent-rgb),0.16); border-color:rgba(var(--accent-rgb),0.7); color:#fff; transform:translateY(-1px); }
.hero-link:hover svg { opacity:1; }
/* About button + glass overlay panel — expands OVER the hero without resizing it */
.hero-about-btn { display:inline-flex; align-items:center; gap:5px; margin:0.15rem 0 0; padding:0; background:none; border:none; color:rgba(230,226,220,0.6); font-family:inherit; font-size:0.82rem; font-weight:600; cursor:pointer; transition:color .2s; }
.hero-about-btn:hover { color:var(--accent); }
.hero-about-btn svg { transition:transform .2s; }
.hero-about-btn:hover svg { transform:translateX(2px); }
.hero-welcome.about-open .hero-cover-bg { filter:blur(8px) brightness(0.4); }
.hero-about { position:absolute; inset:0; z-index:6; display:flex; align-items:center; justify-content:center; padding:clamp(1.5rem,5vw,4rem); opacity:0; pointer-events:none; transition:opacity .32s ease; }
.hero-about.open { opacity:1; pointer-events:auto; }
.hero-about-card { position:relative; width:100%; max-width:780px; max-height:84%; overflow-y:auto; padding:1.9rem 2rem; border-radius:16px; background:rgba(14,14,16,0.66); border:1px solid rgba(255,255,255,0.12); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); box-shadow:0 24px 64px rgba(0,0,0,0.6); transform:translateY(12px); transition:transform .32s ease; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.2) transparent; }
/* inset the scrollbar track so it clears the card's rounded corners */
.hero-about-card::-webkit-scrollbar { width:9px; }
.hero-about-card::-webkit-scrollbar-track { background:transparent; margin:16px 0; }
.hero-about-card::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.16); border-radius:6px; }
.hero-about-card::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.28); }
.hero-about.open .hero-about-card { transform:translateY(0); }
.hero-about-close { position:absolute; top:12px; right:12px; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:8px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); color:var(--text2); cursor:pointer; transition:background .2s, border-color .2s, color .2s; }
.hero-about-close:hover { background:rgba(var(--accent-rgb),0.18); border-color:var(--accent); color:#fff; }
.hero-about-kicker { font-size:0.72rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); margin-bottom:0.75rem; }
.hero-about-body { color:rgba(228,224,218,0.86); font-size:0.95rem; line-height:1.7; white-space:pre-line; }
/* Light mode: the About modal kept the dark-theme frosted values — give it the
   light frosted-beige treatment + dark body text + dark close button. */
html[data-theme="light"] .hero-about-card { background:rgba(212,203,189,0.90) !important; border-color:rgba(0,0,0,0.10) !important; box-shadow:0 24px 64px rgba(0,0,0,0.26) !important; scrollbar-color:rgba(0,0,0,0.28) transparent !important; }
html[data-theme="light"] .hero-about-card::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.18); }
html[data-theme="light"] .hero-about-body { color:var(--text2) !important; }
html[data-theme="light"] .hero-about-close { background:rgba(0,0,0,0.06) !important; border-color:rgba(0,0,0,0.14) !important; color:var(--text2) !important; }
html[data-theme="light"] .hero-about-close:hover { background:rgba(var(--accent-rgb),0.18) !important; border-color:var(--accent) !important; color:#fff !important; }
/* shimmering accent divider along the hero's bottom edge: a faint persistent
   line + a highlight bar that sweeps across via a GPU transform. The bar is a
   fixed width (25%) and travels from fully off-screen left to fully off-screen
   right, so the loop's reset happens out of view — no visible stutter/jump.
   (The old version animated background-position on a non-tiling gradient, whose
   wrap was visible.) */
.hero-welcome { border-bottom-color:rgba(var(--accent-rgb),0.16); }
.hero-welcome::after { left:0; right:auto; bottom:0; width:25%; height:2px; opacity:1; z-index:4;
  background:linear-gradient(90deg, transparent, var(--accent), transparent); will-change:transform;
  animation:heroShimmer 4.5s linear infinite; }
@keyframes heroShimmer { 0% { transform:translateX(-100%); } 100% { transform:translateX(400%); } }
@media (prefers-reduced-motion: reduce) { .hero-welcome::after { animation:none; opacity:0; } }
/* Light mode: the 2px accent shimmer line vanishes against the feathered edge —
   make it thicker, brighter (accent2) and give it a glow so it stays visible. */
html[data-theme="light"] .hero-welcome.has-cover::after {
  height:3px;
  background:linear-gradient(90deg, transparent, var(--accent2) 45%, var(--accent) 55%, transparent);
  box-shadow:0 0 4px rgba(var(--accent-rgb),0.30);
}
/* The welcome / game-picker hero (data-page="games") is NOT an in-game hero — it
   opts out of the left-aligned banner styling and keeps the original centered
   logo-mark layout. Higher specificity than the .hero-welcome defaults above. */
body[data-page="games"] .hero-welcome { min-height:0; padding:5.5rem 2rem 4.5rem; display:block; border-bottom-color:var(--border); }
body[data-page="games"] .hero-welcome .hero-mark { display:block; }
body[data-page="games"] .hero-welcome .hero-inner { max-width:680px; margin:0 auto; padding:0; text-align:center; align-items:center; }
body[data-page="games"] .hero-welcome h1 { font-size:clamp(1.6rem,4vw,2.6rem); margin-bottom:0.55rem; }
body[data-page="games"] .hero-welcome .hero-inner p { margin:0 auto; max-width:540px; }
body[data-page="games"] .hero-welcome::after { left:0; right:0; width:auto; height:1px; transform:none; animation:none; opacity:0.55;
  background:linear-gradient(90deg, transparent, var(--accent) 40%, var(--accent2) 60%, transparent); }

/* ── game picker ── */
.games-page { max-width:1560px; margin:0 auto; }
/* Site-wide FAQ panel under the game grid (game-picker page). */
.faq-home { max-width:1080px; width:100%; margin:0 auto; padding:0.5rem 2rem 4rem; }
/* AC-only sort options (Country/Year) — hidden on non-AC games (which set
   data-game; AC pages have no data-game attribute), e.g. RE/BeamNG mods have
   no country/year. */
html[data-game] .sort-aconly { display:none; }
.game-grid { display:grid; grid-template-columns:repeat(5, 1fr); gap:1.05rem; }
@media (max-width:880px){ .game-grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:680px){ .game-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:480px){ .game-grid{ grid-template-columns:repeat(2,1fr); } }
/* .game-grid columns auto-fill for poster cards */
/* */
/* Poster tile: the cover art fills the WHOLE card; the title/count ride on a
   gradient scrim overlaid at the bottom (no separate meta half eating space). */
.game-card { position:relative; display:block; aspect-ratio:2/3; background:rgba(14,14,14,var(--card-alpha)); border:1px solid var(--border2); border-radius:16px; overflow:hidden; box-shadow:inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 20px rgba(0,0,0,0.35); transition:transform .28s cubic-bezier(.2,.7,.3,1), border-color .28s, box-shadow .28s; }
html[data-theme="light"] .game-card { background: rgba(214,203,189,0.62); }
.game-card:not(.soon):hover { transform:translateY(-6px); border-color:var(--accent); box-shadow:0 16px 38px rgba(0,0,0,0.5); }
/* bottom scrim for legibility of the overlaid title plate (top stays clean) */
.game-card::before { content:''; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit;
  background:linear-gradient(to top, rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.55) 20%, rgba(0,0,0,0.04) 46%, transparent 62%); }
.game-cover { position:absolute; inset:0; width:100%; height:100%; display:grid; place-items:center; overflow:hidden; }
.game-cover.ac { background:linear-gradient(135deg, #3a1402, #f85810 140%); }
.game-cover.beamng { background:linear-gradient(135deg, #3a2402, #ff8c42 150%); }
.game-cover::after { content:""; position:absolute; inset:0; background:radial-gradient(120% 80% at 50% 120%, rgba(0,0,0,0.5), transparent 60%); }
.game-cover-name { position:relative; z-index:1; font-family:var(--font-display); font-weight:800; font-size:clamp(1.05rem,2.2vw,1.55rem); text-transform:uppercase; letter-spacing:0.04em; color:#fff; text-shadow:0 4px 24px rgba(0,0,0,0.5); text-align:center; padding:0 1rem; }
.game-cover-name em { font-style:normal; color:#fff; }
.game-cover.has-cover-img .game-cover-name { display:none; }   /* custom cover art = its own title */
/* Resident Evil series covers (placeholder gradients). */
.game-cover.re2 { background:linear-gradient(135deg, #2a0808, #a83232 150%); }
.game-cover.re3 { background:linear-gradient(135deg, #0c2236, #3a7bbf 150%); }
.game-cover.re4 { background:linear-gradient(135deg, #1f1405, #b07a2e 150%); }
.game-cover.re7 { background:linear-gradient(135deg, #1f1206, #7a4a1e 150%); }
.game-cover.re8 { background:linear-gradient(135deg, #241d08, #9e7f2e 150%); }
.game-cover.re9 { background:linear-gradient(135deg, #220308, #8b1a2a 150%); }
.game-cover.re .game-cover-name { font-size:clamp(0.85rem,1.8vw,1.15rem); line-height:1.1; }
.game-cover.re .game-cover-name em { display:block; font-size:clamp(1.3rem,2.8vw,1.9rem); margin-top:2px; }
.game-badge { position:absolute; top:14px; right:14px; z-index:2; font-size:0.62rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; padding:5px 11px; border-radius:999px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.game-badge.live { background:rgba(70,192,123,0.25); color:#7ff0ab; border:1px solid rgba(70,192,123,0.5); }
.game-badge.soon { background:rgba(255,255,255,0.12); color:#fff; border:1px solid var(--border2); }
/* Title plate overlaid on the cover: name/type bottom-left, count bottom-right.
   Slides up on hover to reveal the "Browse Mods" hint beneath it. */
.game-meta { position:absolute; left:0; right:0; bottom:0; z-index:3; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding:13px 15px; transition:transform .28s cubic-bezier(.2,.7,.3,1); }
.game-name { font-family:var(--font-display); font-weight:700; font-size:1.0rem; line-height:1.12; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,0.75); }
.game-types { font-size:0.74rem; color:rgba(255,255,255,0.74); margin-top:2px; text-shadow:0 1px 8px rgba(0,0,0,0.7); }
/* placeholder cards already show the big stylized name on the cover — don't
   repeat it in the plate; show just the type + count there. */
.game-cover:not(.has-cover-img) ~ .game-meta .game-name { display:none; }
.game-count { text-align:center; line-height:1.05; flex-shrink:0; }
/* live count gets a polished accent-tinted chip backdrop (not the "In the works" one) */
.game-count:not(.muted) { display:inline-flex; flex-direction:column; align-items:center; gap:0; padding:4px 11px; border-radius:10px; background:linear-gradient(180deg, rgba(var(--accent-rgb,248,88,16),0.26), rgba(var(--accent-rgb,248,88,16),0.12)); border:1px solid rgba(var(--accent-rgb,248,88,16),0.42); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); box-shadow:inset 0 1px 0 rgba(255,255,255,0.10), 0 2px 12px rgba(0,0,0,0.5); }
.game-count strong { display:block; font-family:var(--font-display); font-size:1.06rem; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,0.5); }
.game-count span { font-size:0.58rem; text-transform:uppercase; letter-spacing:0.08em; color:rgba(255,255,255,0.78); }
.game-count.muted span { color:var(--text2); text-transform:none; letter-spacing:0; font-size:0.8rem; }
.game-go { position:absolute; left:0; right:0; bottom:0; z-index:4; display:flex; align-items:center; justify-content:flex-start; gap:7px; padding:0 15px 12px; font-weight:700; font-size:0.8rem; color:var(--accent); text-shadow:0 1px 8px rgba(0,0,0,0.65); opacity:0; transform:translateY(7px); pointer-events:none; transition:opacity .25s, transform .25s; }
.game-card:not(.soon):hover .game-meta { transform:translateY(-22px); }
.game-card:not(.soon):hover .game-go { opacity:1; transform:none; }
.game-go svg { transition:transform .25s; }
.game-card:hover .game-go svg { transform:translateX(5px); }
.game-card.soon { opacity:0.62; cursor:default; }
.game-card.soon .game-go, .game-go.disabled { color:var(--muted); }
@media (max-width:640px){ .game-cover-name{ font-size:1.3rem; } }

/* ── post title: keep the ORIGINAL "aura" (left-bar + gradient) + subtle hover ── */
.mod-title { transition: color .2s ease, background .32s ease, box-shadow .25s ease; }
/* hover animation:
   (1) GRADIENT FILL        - the warm aura deepens into a richer accent gradient
   (2) LEFT-BAR GROW + GLOW  - the orange bar thickens (inset) and glows out */
.mod-title:hover, .mod-card:hover .mod-title {
  color: var(--accent);
  background: linear-gradient(90deg, rgba(var(--accent-rgb),0.20) 0%, rgba(var(--accent-rgb),0.05) 55%, transparent 82%);
  box-shadow: inset 2.5px 0 0 0 var(--accent), -2px 0 18px -7px var(--accent-glow);
}

/* ── download button shine sweep (all pages) ── */
.dl-btn { position:relative; overflow:hidden; }
.dl-btn > * { position:relative; z-index:1; }
.dl-btn::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.30) 50%, transparent 62%); transform:translateX(-135%); transition:transform .6s ease; }
.dl-btn:hover::before { transform:translateX(135%); }


/* ============================================================================
   MOD DETAIL PAGE (mod.html) - moved out of the page's inline <style> into the
   shared stylesheet (2026-06-17) so the detail view is native to the design
   system. Uses the original tokens + the gradient/shine download button.
   ============================================================================ */
    /* ── Mod detail page specific styles ── */
    .mod-detail-wrap {
      max-width: 1380px;
      margin: 2.5rem auto;
      padding: 0 2rem;
    }
    .mod-detail-back {
      display: inline-flex; align-items: center; gap: 7px;
      font-size: 0.82rem; color: var(--muted);
      margin-bottom: 1.75rem;
      transition: color 0.15s;
      text-decoration: none;
    }
    .mod-detail-back:hover { color: var(--accent); }

    /* Hero gallery */
    .mod-gallery {
      position: relative;
      border-radius: var(--radius-lg);
      overflow: hidden;
      background: var(--bg2);
      border: 1px solid var(--border);
      margin-bottom: 0.75rem;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 240px;
    }
    .mod-gallery-main {
      width: 100%;
      height: auto;
      max-height: 540px;
      object-fit: contain;
      cursor: zoom-in;
      display: block;
      transition: transform 0.3s;
    }
    .mod-gallery:hover .mod-gallery-main { transform: scale(1.01); }
    /* Track-shape silhouette overlaid subtly in the hero's lower-right. */
    .mod-gallery .track-outline-overlay {
      position: absolute;
      right: 16px; bottom: 16px;
      width: 26%; max-width: 200px; min-width: 90px;
      height: auto; max-height: 46%;
      object-fit: contain; object-position: right bottom;
      opacity: 0.82;
      pointer-events: none;
      z-index: 2;
      filter: drop-shadow(0 1px 4px rgba(0,0,0,0.85)) brightness(1.15);
      transition: opacity 0.22s;
    }
    .mod-gallery:hover .track-outline-overlay { opacity: 0.95; }
    /* Zoom hint overlay */
    .mod-gallery-zoom-hint {
      position: absolute;
      top: 10px; right: 10px;
      width: 32px; height: 32px;
      background: rgba(0,0,0,0.55);
      border-radius: 6px;
      display: flex; align-items: center; justify-content: center;
      color: #fff; opacity: 0;
      transition: opacity 0.2s;
      pointer-events: none;
    }
    .mod-gallery:hover .mod-gallery-zoom-hint { opacity: 1; }
    .mod-gallery-placeholder {
      width: 100%; height: 100%;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 10px; color: var(--muted);
      font-size: 0.85rem;
    }
    .mod-gallery-thumbs {
      display: flex; gap: 8px;
      margin-top: 8px;
      margin-bottom: 1.5rem;
      flex-wrap: wrap;
    }
    /* Thumb = a CELL (holds the border/active ring, never blurred) wrapping the
       IMG (blurred when NSFW; the cell's overflow:hidden clips it). Keeps the
       accent outline sharp even while the image is blurred. */
    .mod-gallery-thumb-cell {
      width: 80px; height: 56px;
      border-radius: 6px;
      border: 2px solid transparent;
      overflow: hidden;
      cursor: pointer;
      flex-shrink: 0;
      display: block;
      transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
    }
    .mod-gallery-thumb-cell:hover { transform: scale(1.05); }
    .mod-gallery-thumb-cell:has(.mod-gallery-thumb.active) { border-color: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
    .mod-gallery-thumb {
      width: 100%; height: 100%;
      border-radius: 4px;
      object-fit: cover;
      display: block;
    }

    /* Content layout */
    .mod-detail-content {
      display: grid;
      grid-template-columns: minmax(0, 960px) minmax(320px, 1fr);
      gap: 2rem;
      align-items: start;
    }
    /* The info sidebar is kept at least as tall as the gallery column (main
       preview + thumbnail strip) via a ResizeObserver in shared.js (min-height),
       so it aligns at the bottom with the thumbnails and never leaves a dead gap
       — but it still grows past the gallery when its OWN content is taller. */
    .mod-gallery-col { min-width: 0; display: flex; flex-direction: column; }

    /* Left: info */
    .mod-detail-badge {
      display: inline-flex; align-items: center;
      font-family: var(--font-display);
      font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
      background: var(--accent); color: #fff;
      padding: 3px 10px; border-radius: 4px;
      margin-bottom: 0.75rem;
    }
    .mod-detail-title {
      font-family: var(--font-display);
      font-size: 1.65rem; font-weight: 800; letter-spacing: 0.03em;
      line-height: 1.18;
      margin-bottom: 1rem;
      color: var(--text);
    }
    .mod-detail-meta {
      display: flex; flex-wrap: wrap; gap: 8px 18px;
      margin-bottom: 1.25rem;
      font-size: 0.82rem;
    }
    .mod-detail-meta-item {
      display: flex; align-items: center; gap: 6px;
      color: var(--text2);
    }
    .mod-detail-meta-item strong { color: var(--text); font-weight: 600; }
    .mod-detail-meta-item svg { color: var(--muted); flex-shrink: 0; }
    .mod-version-pill {
      background: var(--accent-dim);
      color: var(--accent);
      border: 1px solid rgba(var(--accent-rgb),0.25);
      padding: 2px 10px; border-radius: 4px;
      font-size: 0.75rem; font-weight: 600; font-family: var(--font-display);
      letter-spacing: 0.06em;
    }
    .mod-detail-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 1.5rem; }
    .mod-detail-desc {
      font-size: 0.9rem; color: var(--text2);
      line-height: 1.7;
      white-space: pre-wrap;
    }

    /* Right: sidebar actions */
    .mod-detail-sidebar {
      position: relative;
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 1.4rem 1.4rem 3.6rem;   /* extra bottom room for the corner share button */
    }
    .mod-dl-btn {
      width: 100%;
      background: linear-gradient(135deg, var(--accent2), var(--accent)); color: #fff; border: none;
      padding: 14px; border-radius: 11px;
      font-family: var(--font-body); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.01em;
      cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 9px;
      text-decoration: none;
      position: relative; overflow: hidden;
      transition: box-shadow 0.2s, transform 0.12s, filter 0.2s;
      box-shadow: 0 4px 13px rgba(var(--accent-rgb),0.22), inset 0 1px 0 rgba(255,255,255,0.2);
      margin-bottom: 1rem;
    }
    .mod-dl-btn > * { position: relative; z-index: 1; }
    .mod-dl-btn::before {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.32) 50%, transparent 65%);
      transform: translateX(-130%); transition: transform 0.65s ease;
    }
    .mod-dl-btn:hover::before { transform: translateX(130%); }
    .mod-dl-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.28); filter: brightness(1.06); }
    .mod-dl-btn:active { transform: translateY(0) scale(0.98); }
    .mod-dl-btn.has-versions { flex-direction: column; align-items: center; gap: 2px; }
    .mod-dl-count-line {
      text-align: center; font-size: 0.78rem; color: var(--muted);
      display: flex; align-items: center; justify-content: center; gap: 5px;
      margin-bottom: 1.25rem;
    }
    .mod-sidebar-divider { border: none; border-top: 1px solid var(--border); margin: 1rem 0; }
    .mod-sidebar-stat {
      display: flex; align-items: center; justify-content: space-between;
      font-size: 0.78rem; padding: 5px 0;
    }
    .mod-sidebar-stat-label { color: var(--muted); display: flex; align-items: center; gap: 6px; }
    .mod-sidebar-stat-val { color: var(--text); font-weight: 600; }

    /* Skeleton */
    .mod-detail-skeleton .skel-title { height: 36px; background: var(--bg3); border-radius: 6px; margin-bottom: 12px; animation: pulse 1.5s infinite; }
    .mod-detail-skeleton .skel-line { height: 14px; background: var(--bg3); border-radius: 4px; margin-bottom: 8px; animation: pulse 1.5s infinite; }
    .mod-detail-skeleton .skel-line.w60 { width: 60%; }
    .mod-detail-skeleton .skel-line.w80 { width: 80%; }

    @media (max-width: 720px) {
      .mod-detail-content { grid-template-columns: 1fr; }
      .mod-detail-sidebar { position: static; }
      .mod-detail-title { font-size: 1.5rem; }
    }

    /* Light mode */
    html[data-theme="light"] .mod-detail-sidebar { background: var(--bg2) !important; border-color: var(--border) !important; }
    html[data-theme="light"] .mod-gallery { background: var(--bg3) !important; border-color: rgba(0,0,0,0.05) !important; }
    html[data-theme="light"] .mod-detail-title { color: var(--text) !important; }

/* ============================================================================
   SEARCH PAGE (search.html) - moved out of the page's inline <style> into the
   shared stylesheet (2026-06-17). Minimal search header + grid/list results.
   ============================================================================ */
    /* ── Search page chrome ────────────────────────────────────────────── */
    .sr-header {
      position: sticky; top: 0; z-index: 200;
      background: var(--header-bg);
      backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
      border-bottom: 1px solid var(--border);
      padding: 0;
    }
    .sr-header-inner {
      max-width: none; margin: 0; padding: 0 2rem;   /* full-width like the standard header → back button at the same 2rem-from-edge spot */
      display: flex; align-items: center; gap: 14px;
      height: 64px;   /* match the standard header (.nav-inner is 64px, not 68) */
    }
    /* .sr-back is now styled with .nav-back-chip (expanding-ring back button) above. */
    .sr-brand {
      font-family: var(--font-display); font-weight: 900;
      font-size: 1.05rem; letter-spacing: 0.04em; text-transform: uppercase;
      text-decoration: none; color: var(--text); flex-shrink: 0;
      display: none;
    }
    .sr-brand em { color: var(--accent); font-style: normal; }
    @media (min-width: 640px) { .sr-brand { display: block; } }

    .sr-search-wrap {
      flex: 1; max-width: 680px; margin: 0 auto;  /* same size + centered, like the home nav search */
      position: relative; display: flex; align-items: center;
      min-width: 0;
    }
    /* fade the results in on each search / view change (and the View-Transitions
       cross-page fade applies to the whole page on navigation). */
    @keyframes srFade { from { opacity: 0; transform: translateY(8px); } }
    .sr-grid, .sr-list { animation: srFade 0.3s ease; }
    @media (prefers-reduced-motion: reduce) { .sr-grid, .sr-list { animation: none; } }
    .sr-search-wrap svg {
      position: absolute; left: 11px; color: var(--muted); pointer-events: none; flex-shrink: 0;
    }
    .sr-search-wrap input {
      width: 100%; padding: 7px 38px 7px 36px;
      background: var(--bg3); border: 1px solid var(--border2);
      border-radius: 20px; color: var(--text);   /* thin rounded pill - matches the nav/cars search */
      font-size: 0.85rem; outline: none;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .sr-search-wrap input:hover { border-color: rgba(var(--accent-rgb),0.55); }
    .sr-search-wrap input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 2px rgba(var(--accent-rgb,248,88,16),0.15);
    }
    .sr-search-clear {
      position: absolute; right: 8px; background: none; border: none;
      color: var(--muted); cursor: pointer; font-size: 0.8rem;
      padding: 4px; border-radius: 4px; display: none; line-height: 1;
      transition: color 0.12s;
    }
    .sr-search-clear:hover { color: var(--text); }
    .sr-search-clear.visible { display: block; }

    .sr-actions {
      display: flex; align-items: center; gap: 10px; flex-shrink: 0;
    }
    .sr-count {
      font-size: 0.75rem; color: var(--accent); font-weight: 700;
      white-space: nowrap; display: none;
    }
    .sr-count.visible { display: block; }
    .sr-view-toggle {
      display: flex; gap: 3px;
      background: var(--bg3); border: 1px solid var(--border);
      border-radius: 7px; padding: 3px;
    }
    .sr-view-btn {
      display: flex; align-items: center; justify-content: center;
      width: 28px; height: 28px; border-radius: 5px;
      background: none; border: none; color: var(--muted);
      cursor: pointer; transition: background 0.12s, color 0.12s;
    }
    .sr-view-btn.active { background: var(--accent); color: #fff; }
    .sr-view-btn:not(.active):hover { color: var(--text); }

    /* ── Content area ──────────────────────────────────────────────────── */
    .sr-main {
      max-width: 1600px; margin: 0 auto;
      padding: 1.5rem 2rem 3rem;
    }
    .sr-section-header {
      display: flex; align-items: center; gap: 10px;
      margin: 1.5rem 0 0.85rem;
    }
    .sr-section-label {
      font-family: var(--font-display);
      font-size: 1.1rem; font-weight: 700;   /* match home .section-title */
      letter-spacing: 0.07em; text-transform: uppercase;
      color: var(--text);
    }
    .sr-section-label::before {
      content: ''; display: inline-block;
      width: 3px; height: 18px; background: var(--accent);
      border-radius: 2px; margin-right: 10px;
      box-shadow: 0 0 10px var(--accent-glow);
      vertical-align: -3px;
    }
    .sr-section-count {
      font-size: 0.78rem; font-weight: 700; color: var(--accent);
      background: var(--bg3); border: 1px solid rgba(var(--accent-rgb),0.30);
      border-radius: 20px; padding: 2px 9px;
    }

    /* ── Grid view ─────────────────────────────────────────────────────── */
    .sr-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 1.1rem;
    }
    /* Type pill on card thumb */
    .sr-type-pill {
      position: absolute; bottom: 8px; right: 8px;
      font-size: 0.6rem; font-weight: 800; letter-spacing: 0.1em;
      text-transform: uppercase; border-radius: 4px;
      padding: 2px 6px; line-height: 1.5;
    }
    .sr-type-car  { background: var(--accent); color: #fff; }
    .sr-type-track { background: #2a7; color: #fff; }

    /* ── List view ─────────────────────────────────────────────────────── */
    .sr-list {
      display: flex; flex-direction: column;
      gap: 0; border: 1px solid var(--border);
      border-radius: var(--radius-lg); overflow: hidden;
    }
    .sr-row {
      display: flex; align-items: center; gap: 12px;
      padding: 10px 14px;
      border-bottom: 1px solid var(--border);
      background: var(--bg2);
      transition: background 0.12s;
    }
    .sr-row:last-child { border-bottom: none; }
    .sr-row:hover { background: var(--bg3); }
    .sr-row-type {
      font-size: 0.58rem; font-weight: 800; letter-spacing: 0.1em;
      text-transform: uppercase; border-radius: 4px;
      padding: 2px 5px; flex-shrink: 0;
    }
    .sr-thumb-wrap {
      width: 56px; height: 40px; border-radius: 5px;
      overflow: hidden; flex-shrink: 0; background: var(--bg3);
      display: flex; align-items: center; justify-content: center;
    }
    .sr-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; }
    .sr-thumb-ph { font-size: 1.1rem; }
    .sr-row-info {
      flex: 1; min-width: 0;
      display: flex; flex-direction: column; gap: 2px;
    }
    .sr-row-title {
      font-size: 0.84rem; font-weight: 600; color: var(--text);
      text-decoration: none; white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis;
      transition: color 0.12s;
    }
    .sr-row-title:hover { color: var(--accent); }
    .sr-row-meta {
      font-size: 0.72rem; color: var(--muted); white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis;
    }
    .sr-row-tags { display: flex; gap: 4px; flex-shrink: 0; flex-wrap: wrap; }
    .sr-row-tags .tag {
      font-size: 0.62rem; padding: 2px 6px;
    }
    .sr-row-dl {
      flex-shrink: 0; font-size: 0.76rem !important;
      padding: 6px 13px !important;
    }

    /* ── Empty state ───────────────────────────────────────────────────── */
    .sr-empty {
      display: flex; flex-direction: column; align-items: center;
      justify-content: center; padding: 5rem 1rem;
      color: var(--muted); text-align: center;
    }
    .sr-empty-icon { font-size: 2.5rem; margin-bottom: 1rem; opacity: 0.5; }
    .sr-empty-title { font-size: 1.1rem; font-weight: 700; color: var(--text); margin-bottom: 0.4rem; }
    .sr-empty-sub { font-size: 0.85rem; }

    /* ── Light theme ───────────────────────────────────────────────────── */
    html[data-theme="light"] .sr-search-wrap input { background: var(--bg2) !important; }
    html[data-theme="light"] .sr-list { background: var(--bg2) !important; }
    html[data-theme="light"] .sr-row { background: var(--bg2) !important; }
    html[data-theme="light"] .sr-row:hover { background: var(--bg3) !important; }

/* ============================================================================
   PARTICLE BACKGROUND (sitewide) - #page-canvas added to cars / tracks / mod
   via particles.js (2026-06-17). Keep page content above the canvas (z-index:1)
   so the field shows behind/around the cards, matching the hub. Header stays at
   its own z-index:100, so it is intentionally excluded here.
   ============================================================================ */
/* NOTE: footer is intentionally NOT here. Giving it z-index:2 lifted it ABOVE
   the particle canvas (z-index:1), so the blur only frosted the dim particles
   behind it and it read opaque. Left at z-index:auto (like the home page) the
   particles paint OVER the footer → the same semi-transparent look. */
body[data-page="cars"] > .page-banner,
body[data-page="cars"] > main,
body[data-page="tracks"] > .page-banner,
body[data-page="tracks"] > main,
body[data-page="mods"] > .page-banner,
body[data-page="mods"] > main,
#mod-page-wrap { position: relative; z-index: 2; }
/* The 88px bottom room is ONLY for the mod DETAIL page (it reserves space for
   the sticky bottom download bar). Browse pages have no sticky bar, so the
   padding just created a tall empty gap above the footer — scope it out. */
#mod-page-wrap { padding-bottom: 88px; }
/* The magnify hint overlapped the favourite heart (both top-right); the whole
   gallery is click-to-zoom anyway, so the hint is redundant. */
.mod-gallery-zoom-hint { display: none !important; }

/* ============================================================================
   PAGE WALLPAPER (2026-07-03) - settable per-game full-page background that
   replaces the particle field. shared.js injects #page-wallpaper (fixed,
   blurred + tinted image) and #page-wallfade (document-tall gradient that
   darkens toward the bottom of the page) when games.json pageBg[gid] is set,
   adding .has-wallpaper to <body>. Content containers are lifted above both
   layers; the header (z-index:100) already clears them.
   ============================================================================ */
#page-wallpaper {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
#page-wallpaper .pw-img {
  position: absolute;
  inset: -60px;                 /* bleed so the blur never reveals bare edges */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: blur(var(--wp-blur)) saturate(1.05) brightness(0.9);
  transform: scale(1.06);
}
#page-wallpaper .pw-tint {
  position: absolute;
  inset: 0;
  /* Dim the whole wallpaper to the home hero's cover level (~0.8), a touch
     darker, so the top of the page reads like the hero instead of bright.
     + a faint warm accent wash near the top. */
  background:
    radial-gradient(90% 60% at 50% -10%, rgba(var(--accent-rgb),0.07), transparent 60%),
    rgba(6,8,8,0.84);
}
/* Dim MODE (games.json pageBgTint[gid] = lighter|light|dark|darker). The base
   rule above is "dark"; these adjust the base darkening so dark covers can show
   more (lighter/light) or bright covers can be dimmed harder (darker). */
#page-wallpaper[data-tint="lighter"] .pw-tint {
  background:
    radial-gradient(90% 60% at 50% -10%, rgba(var(--accent-rgb),0.06), transparent 60%),
    rgba(6,8,8,0.35);
}
#page-wallpaper[data-tint="light"] .pw-tint {
  background:
    radial-gradient(90% 60% at 50% -10%, rgba(var(--accent-rgb),0.06), transparent 60%),
    rgba(6,8,8,0.52);
}
#page-wallpaper[data-tint="darker"] .pw-tint {
  background:
    radial-gradient(90% 60% at 50% -10%, rgba(var(--accent-rgb),0.08), transparent 60%),
    rgba(6,8,8,0.93);
}
/* "None": no dim overlay at all - just the blurred image + the bottom fade. */
#page-wallpaper[data-tint="none"] .pw-tint,
html[data-theme="light"] #page-wallpaper[data-tint-light="none"] .pw-tint { background: transparent; }
html[data-theme="light"] #page-wallpaper[data-tint-light="lighter"] .pw-tint { background: rgba(198,187,173,0.42); }
html[data-theme="light"] #page-wallpaper[data-tint-light="light"]   .pw-tint { background: rgba(198,187,173,0.5); }
html[data-theme="light"] #page-wallpaper[data-tint-light="darker"]  .pw-tint { background: rgba(198,187,173,0.68); }
/* Document-tall fade: starts darkening high on the page and reaches full black
   by the bottom, so the already-dim wallpaper deepens smoothly down-page. */
#page-wallfade {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(6,8,8,0)    0%,
    rgba(6,8,8,0.18) 22%,
    rgba(6,8,8,0.55) 55%,
    rgba(6,8,8,0.88) 82%,
    rgba(6,8,8,1)    100%
  );
}
/* Body is the containing block for the document-tall fade. */
body.has-wallpaper { position: relative; }
/* Lift real content above the wallpaper layers (mirrors the old particle
   z-index:2 lift, generalised to every wallpaper page + the home hero). */
body.has-wallpaper > .hero,
body.has-wallpaper > .page-banner,
body.has-wallpaper > main,
body.has-wallpaper > footer,
body.has-wallpaper > #mod-page-wrap { position: relative; z-index: 2; }

/* Light theme: fade out into the tan page background instead of near-black. */
/* Light mode: the wallpaper photo was bleeding through as a colourful (reddish)
   wash that made everything look muddy/inconsistent. Desaturate + brighten it to
   a pale near-neutral texture and dim it harder so light mode reads as a clean,
   calm cream surface. */
html[data-theme="light"] #page-wallpaper .pw-img {
  /* Fully grayscale (the red car was still reading as a pink cast) + brighten;
     the tan .pw-tint on top re-warms it to a neutral cream texture. */
  filter: blur(var(--wp-blur)) grayscale(1) brightness(1.45) contrast(0.9);
}
html[data-theme="light"] #page-wallpaper .pw-tint {
  background:
    radial-gradient(90% 60% at 50% -10%, rgba(var(--accent-rgb),0.03), transparent 60%),
    rgba(198,187,173,0.6);
}
html[data-theme="light"] #page-wallfade {
  background: linear-gradient(
    180deg,
    rgba(201,189,173,0)    0%,
    rgba(201,189,173,0.22) 35%,
    rgba(201,189,173,0.68) 76%,
    rgba(201,189,173,0.95) 100%
  );
}

/* ============================================================================
   LIGHT MODE - restore accent hover/select outlines (2026-06-17).
   The base html[data-theme="light"] rules set border-color !important, which
   was beating the non-!important :hover/:focus accent rules → no orange outline
   on hover and dim 1px focus rings. These higher-specificity :hover/:focus
   overrides bring the light theme in sync with dark.
   ============================================================================ */
/* cards */
html[data-theme="light"] .mod-card:hover {
  border-color: #f85810 !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.14), 0 0 0 1px rgba(248,88,16,0.6), inset 0 1px 0 rgba(255,255,255,0.55) !important;
}
html[data-theme="light"] .mod-title:hover,
html[data-theme="light"] .mod-card:hover .mod-title {
  color: var(--accent) !important;
  background: linear-gradient(90deg, rgba(217,80,0,0.16) 0%, transparent 60%) !important;
  box-shadow: inset 2.5px 0 0 0 var(--accent), -2px 0 16px -7px var(--accent-glow) !important;
}
/* search inputs (cars/tracks toolbar, nav, search page) */
html[data-theme="light"] .search-input:hover        { border-color: var(--accent) !important; }
html[data-theme="light"] .search-input:focus        { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-dim) !important; }
html[data-theme="light"] .nav-search-input:hover     { border-color: var(--accent) !important; }
html[data-theme="light"] .nav-search-input:focus     { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-dim) !important; }
html[data-theme="light"] .sr-search-wrap input:hover { border-color: var(--accent) !important; }
html[data-theme="light"] .sr-search-wrap input:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-dim) !important; }
/* filter dropdown + reset */
html[data-theme="light"] .filter-dd-btn:hover { border-color: var(--accent) !important; box-shadow: 0 0 0 2px var(--accent-dim) !important; }
html[data-theme="light"] .filter-dd-btn.open  { border-color: var(--accent) !important; box-shadow: 0 0 0 2px var(--accent-dim) !important; }
html[data-theme="light"] .btn-reset-filters:hover { border-color: var(--accent) !important; color: var(--accent) !important; box-shadow: 0 0 0 2px var(--accent-dim) !important; }
/* page-banner warm glow (the light .page-banner !important bg had wiped it) */
html[data-theme="light"] .page-banner {
  background: radial-gradient(115% 180% at 50% -25%, rgba(217,80,0,0.10), transparent 62%), var(--bg2) !important;
}

/* ============================================================================
   LIGHT MODE - keep the branded orange scrollbars (2026-06-18).
   The global `html[data-theme="light"] ::-webkit-scrollbar-thumb` grey rule
   out-specifies the per-element scrollbars, greying them in light mode only.
   These higher-specificity overrides keep the dropdown/panel scrollbars orange
   and identical to dark mode (search dropdown, nav search, category dropdown,
   activity log, skins modal).
   ============================================================================ */
html[data-theme="light"] .search-dropdown::-webkit-scrollbar-thumb,
html[data-theme="light"] .nav-search-dropdown::-webkit-scrollbar-thumb,
html[data-theme="light"] .filter-dd-panel::-webkit-scrollbar-thumb,
html[data-theme="light"] .activity-log-body::-webkit-scrollbar-thumb,
html[data-theme="light"] .skins-modal-body::-webkit-scrollbar-thumb { background: var(--accent) !important; }
html[data-theme="light"] .search-dropdown::-webkit-scrollbar-thumb:hover,
html[data-theme="light"] .nav-search-dropdown::-webkit-scrollbar-thumb:hover,
html[data-theme="light"] .filter-dd-panel::-webkit-scrollbar-thumb:hover,
html[data-theme="light"] .activity-log-body::-webkit-scrollbar-thumb:hover,
html[data-theme="light"] .skins-modal-body::-webkit-scrollbar-thumb:hover { background: var(--accent2) !important; }
html[data-theme="light"] .search-dropdown::-webkit-scrollbar-track,
html[data-theme="light"] .nav-search-dropdown::-webkit-scrollbar-track,
html[data-theme="light"] .filter-dd-panel::-webkit-scrollbar-track { background: var(--bg3) !important; }

/* ── Game picker: theme toggle relocated into the footer (no header here) ── */
.footer-theme { display: inline-flex; align-items: center; gap: 9px; }
.footer-theme-label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; color: var(--text2); text-transform: uppercase; }
html[data-theme="light"] .footer-theme-label { color: var(--text2) !important; }

/* ── Picker hero: unified totals bar (Visits · Downloads · Mods - accumulates across all games) ── */
.hero-stats {
  display: inline-flex; align-items: stretch;
  margin-top: 1.6rem;
  background: rgba(14,14,14,var(--card-alpha));
  border: 1px solid var(--border2);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 6px 22px rgba(0,0,0,0.32);
  overflow: hidden;
}
.hero-stat {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 11px 24px; position: relative;
}
.hero-stat + .hero-stat::before {
  content: ''; position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 1px; background: var(--border2);
}
.hero-stat strong {
  font-family: var(--font-display); font-weight: 800; font-size: 1.3rem;
  color: var(--accent); letter-spacing: 0.02em; line-height: 1;
}
.hero-stat-label {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--muted); font-weight: 600;
}
.hero-stat-pulse {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0;
  animation: heroPulse 2.2s ease-out infinite;
}
@keyframes heroPulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0.5); }
  70%  { box-shadow: 0 0 0 6px rgba(var(--accent-rgb),0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0); }
}
@media (prefers-reduced-motion: reduce) { .hero-stat-pulse { animation: none; } }
@media (max-width: 560px) {
  .hero-stat { padding: 9px 14px; }
  .hero-stat strong { font-size: 1.1rem; }
  .hero-stat-label { font-size: 0.55rem; letter-spacing: 0.05em; }
}
html[data-theme="light"] .hero-stats { background: rgba(214,203,189,0.62) !important; border-color: var(--border2) !important; }
html[data-theme="light"] .hero-stat-label { color: var(--muted) !important; }
html[data-theme="light"] .hero-stat + .hero-stat::before { background: var(--border2) !important; }

/* ============================================================================
   LIVELINESS PASS 2 (2026-06-18) - view transitions + micro-animations.
   (Jay: try them all, prune later.) All honor prefers-reduced-motion below.
   ============================================================================ */
/* cross-page fade between same-origin pages (View Transitions, Chromium) */
@view-transition { navigation: auto; }

/* logo breathing glow (hero mark - picker + AC hub) */
@keyframes logoBreath {
  0%,100% { box-shadow: 0 0 0 1px var(--border2), 0 16px 40px rgba(0,0,0,0.6), 0 0 34px var(--accent-glow); }
  50%     { box-shadow: 0 0 0 1px var(--border2), 0 16px 40px rgba(0,0,0,0.6), 0 0 58px var(--accent-glow); }
}
.hero-mark { animation: logoBreath 4.6s ease-in-out infinite; }

/* "NEW" activity pill subtle green pulse */
@keyframes newPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(45,164,78,0); } 50% { box-shadow: 0 0 9px 0 rgba(45,164,78,0.45); } }
.activity-pill.new { animation: newPulse 2.8s ease-in-out infinite; }

/* dropdown panels scale/slide in on open */
@keyframes ddIn { from { opacity: 0; transform: translateY(-6px) scale(0.98); } }
.filter-dd-panel.open, .search-dropdown.open, .nav-search-dropdown.open { animation: ddIn 0.16s ease; transform-origin: top; }

/* download count "bump" when it ticks up (class toggled by recordDownload) */
@keyframes countBump { 0% { transform: scale(1); } 40% { transform: scale(1.35); color: var(--accent); } 100% { transform: scale(1); } }
.count-bump { display: inline-block; animation: countBump 0.5s ease; }

/* scroll-reveal: elements rise + fade as they enter the viewport (class added by JS) */
.reveal { opacity: 0; transform: translateY(16px); }
.reveal.reveal-in { opacity: 1; transform: none; transition: opacity 0.55s ease, transform 0.55s cubic-bezier(.2,.7,.3,1); }

/* game-card cursor glow-follow (picker; --mx/--my set by JS) - wide, soft, subtle.
   @property lets --mx/--my transition so the glow eases behind the cursor. */
@property --mx { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
@property --my { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
/* glow tinted to each game's accent */
.game-card[data-game="ac"]     { --glow: 255,150,90; }   /* orange */
.game-card[data-game="beamng"] { --glow: 255,170,110; }  /* light orange */
.game-card[data-game="re2"]    { --glow: 210,90,90; }    /* red */
.game-card[data-game="re3"]    { --glow: 120,180,255; }  /* blue */
.game-card[data-game="re4"]    { --glow: 210,165,95; }   /* amber */
.game-card[data-game="re7"]    { --glow: 220,160,100; }  /* orangy-brown */
.game-card[data-game="re8"]    { --glow: 235,205,120; }  /* gold */
.game-card[data-game="re9"]    { --glow: 205,95,115; }   /* crimson */

/* ── Per-game accent (each game's cover color = its accent). Applies to the
   game's PAGES (html[data-game]) AND its welcome card (.game-card[data-game]),
   so every var(--accent)/var(--accent-rgb) re-themes automatically. AC keeps
   the trademark orange via the :root default. ── */
html[data-game="beamng"], .game-card[data-game="beamng"] { --accent:#ff8c42; --accent2:#ffa869; --accent-rgb:255,140,66; --accent-glow:rgba(var(--accent-rgb),0.38); }
html[data-game="re2"],    .game-card[data-game="re2"]    { --accent:#a83232; --accent2:#c84a4a; --accent-rgb:168,50,50; --accent-glow:rgba(var(--accent-rgb),0.38); }
html[data-game="re3"],    .game-card[data-game="re3"]    { --accent:#3a7bbf; --accent2:#5a9bd8; --accent-rgb:58,123,191; --accent-glow:rgba(var(--accent-rgb),0.38); }
html[data-game="re4"],    .game-card[data-game="re4"]    { --accent:#b07a2e; --accent2:#d49a4a; --accent-rgb:176,122,46; --accent-glow:rgba(var(--accent-rgb),0.38); }
html[data-game="re7"],    .game-card[data-game="re7"]    { --accent:#bd7333; --accent2:#d98f4a; --accent-rgb:189,115,51; --accent-glow:rgba(var(--accent-rgb),0.38); }
html[data-game="re8"],    .game-card[data-game="re8"]    { --accent:#c8a02e; --accent2:#e2bd52; --accent-rgb:200,160,46; --accent-glow:rgba(var(--accent-rgb),0.38); }
html[data-game="re9"],    .game-card[data-game="re9"]    { --accent:#8b1a2a; --accent2:#b83545; --accent-rgb:139,26,42; --accent-glow:rgba(var(--accent-rgb),0.38); }
/* acevo (tool-added game) */
.game-cover.acevo { background:linear-gradient(135deg, #1c0401, #e81e07 150%); }
.game-card[data-game="acevo"]    { --glow: 242,131,118; }
html[data-game="acevo"],    .game-card[data-game="acevo"]    { --accent:#e81e07; --accent2:#ec4634; --accent-rgb:232,30,7; --accent-glow:rgba(var(--accent-rgb),0.38); }
/* wwe25 (tool-added game) */
.game-cover.wwe25 { background:linear-gradient(135deg, #0e0201, #751106 150%); }
.game-card[data-game="wwe25"]    { --glow: 179,124,118; }
html[data-game="wwe25"],    .game-card[data-game="wwe25"]    { --accent:#751106; --accent2:#8e3c33; --accent-rgb:117,17,6; --accent-glow:rgba(var(--accent-rgb),0.38); }
/* wwe26 (tool-added game) */
.game-cover.wwe26 { background:linear-gradient(135deg, #020608, #10303f 150%); }
.game-card[data-game="wwe26"]    { --glow: 123,141,149; }
html[data-game="wwe26"],    .game-card[data-game="wwe26"]    { --accent:#10303f; --accent2:#3b5562; --accent-rgb:16,48,63; --accent-glow:rgba(var(--accent-rgb),0.38); }
/* @GAME_ACCENTS@ */
.game-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3; border-radius: inherit;
  opacity: 0; transition: opacity 0.45s ease, --mx 0.2s ease, --my 0.2s ease;
  background: radial-gradient(380px circle at var(--mx,50%) var(--my,0%),
              rgba(var(--glow,255,255,255),0.15) 0%, rgba(var(--glow,255,255,255),0.06) 42%, transparent 70%);
}
/* cover mouse-follow glow removed — too much (was: opacity 1 on hover) */
.game-card:hover::after { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .hero-mark, .activity-pill.new,
  .filter-dd-panel.open, .search-dropdown.open, .nav-search-dropdown.open,
  .count-bump { animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: 0.001s !important; }
}

/* ── Polish: back-to-top button ── */
.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 900;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px 9px 13px; border-radius: 999px;
  background: var(--bg2); border: 1px solid var(--border2); color: var(--accent);
  font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.01em;
  cursor: pointer; white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
  opacity: 0; transform: translateY(12px) scale(0.95); pointer-events: none;
  transition: opacity 0.25s, transform 0.25s, background 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.to-top svg { transition: transform 0.2s; }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
/* On the mod page, when the sticky download bar is up, keep Back-to-top in the
   viewport's right corner (its normal spot) but drop it down so it sits level
   with the sticky bar instead of above it. */
body:has(.mod-sticky-dl.show) .to-top { bottom: 11px; }
.to-top:hover {
  background: var(--bg3); border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.5), 0 0 0 1px rgba(var(--accent-rgb),0.18), inset 0 1px 0 rgba(255,255,255,0.08);
}
.to-top:hover svg { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .to-top { transition: opacity 0.2s; } .to-top:hover svg { transform: none; } }

/* ── Polish: BeamNG "coming soon" shimmer over the cover ── */
.game-card.soon .game-cover { position: relative; overflow: hidden; }
.game-card.soon .game-cover::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,0.07) 50%, transparent 58%);
  transform: translateX(-130%); animation: comingShimmer 3.6s ease-in-out infinite;
}
@keyframes comingShimmer { 0% { transform: translateX(-130%); } 55%, 100% { transform: translateX(130%); } }
@media (prefers-reduced-motion: reduce) { .game-card.soon .game-cover::before { animation: none; } }

/* ── Polish: richer empty state ── */
.empty-state-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--text2); margin: 0 0 0.3rem; letter-spacing: 0.02em; }

/* ── Essentials section (required mods: CSP, Pure) ── */
/* Wrap Essentials in the same background panel as Trending / Upload Log / Latest
   sections for consistency (2026-07-03). NB: can't reuse the .home-panel class —
   its :not(:has(.mod-card)) auto-collapse rule would hide Essentials (it holds
   .essential-cards, not .mod-cards). */
.essentials-section {
  background: rgba(20,20,23,var(--panel-alpha));
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px 22px 24px;
  margin: 0 0 2.25rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.essentials-section > .section-header { margin-top: 0; }
html[data-theme="light"] .essentials-section { background: var(--bg2); border-color: var(--border2); }
@media (max-width:640px){ .essentials-section { padding: 12px 13px 18px; border-radius: 14px; } }
.essentials-sub { font-size: 0.82rem; color: var(--muted); }

/* ── Base-game download card (games.json gameFiles) ── */
.gamedl-section { margin-bottom: 2rem; }
.gamedl-card {
  display: flex; align-items: center; gap: 16px;
  padding: 15px 18px; border-radius: 16px;
  background: linear-gradient(120deg, rgba(var(--accent-rgb),0.12), rgba(14,14,14,0.55) 70%);
  border: 1px solid rgba(var(--accent-rgb),0.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 4px 20px rgba(0,0,0,0.30);
}
.gamedl-ico {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center; color: var(--accent);
  background: rgba(var(--accent-rgb),0.14); border: 1px solid rgba(var(--accent-rgb),0.32);
}
.gamedl-info { flex: 1; min-width: 0; }
.gamedl-title { font-size: 1rem; font-weight: 700; color: var(--text); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.gamedl-ver { font-size: 0.7rem; font-weight: 600; color: var(--accent); background: rgba(var(--accent-rgb),0.12); border: 1px solid rgba(var(--accent-rgb),0.4); border-radius: 6px; padding: 1px 7px; }
.gamedl-sub { font-size: 0.8rem; color: var(--muted); margin-top: 3px; }
.gamedl-btn {
  flex: 0 0 auto; display: flex; align-items: center; gap: 7px;
  background: linear-gradient(135deg, var(--accent2), var(--accent)); color: #fff; border: none;
  padding: 9px 18px; border-radius: var(--radius); font-size: 0.85rem; font-weight: 600; cursor: pointer;
  transition: filter 0.15s, box-shadow 0.15s, transform 0.1s; white-space: nowrap;
}
.gamedl-btn:hover { filter: brightness(1.07); box-shadow: 0 5px 16px var(--accent-glow); transform: translateY(-1px); }
.gamedl-count { font-size: 0.68rem; font-weight: 500; opacity: 0.85; }
@media (max-width: 560px) { .gamedl-card { flex-wrap: wrap; } .gamedl-btn { width: 100%; justify-content: center; } }
html[data-theme="light"] .gamedl-card { background: linear-gradient(120deg, rgba(var(--accent-rgb),0.14), rgba(195,182,167,0.5) 70%); }
.essentials-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 760px) { .essentials-grid { grid-template-columns: 1fr; } }

.essential-card {
  position: relative; overflow: hidden;
  display: flex; gap: 1.1rem; padding: 1.25rem 1.35rem;
  background: rgba(14,14,14,var(--card-alpha));
  border: 1px solid var(--border2); border-radius: var(--radius-lg);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
/* Soft accent wash - fills the card and fades to transparent WITHIN the bounds
   (inset:0 + border-radius:inherit) so overflow:hidden never hard-clips it. */
.essential-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(460px circle at 14% -25%, rgba(var(--eac-rgb,248,88,16),0.13), transparent 58%);
  opacity: 0; transition: opacity .25s;
}
.essential-card:hover {
  border-color: rgba(var(--eac-rgb,248,88,16),0.8);
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.4);
}
.essential-card:hover::before { opacity: 1; }

.essential-icon {
  flex-shrink: 0; width: 56px; height: 56px; border-radius: 15px;
  display: grid; place-items: center;
  background: rgba(var(--eac-rgb,248,88,16),0.12); color: var(--eac,var(--accent));
  border: 1px solid rgba(var(--eac-rgb,248,88,16),0.28);
}

.essential-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.essential-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.essential-names { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.essential-name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--text); letter-spacing: 0.01em; }
.essential-abbr { font-size: 0.72rem; font-weight: 600; color: var(--muted); background: var(--bg3); padding: 1px 7px; border-radius: 5px; }
.essential-badge { flex-shrink: 0; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.essential-badge.req { background: var(--accent); color: #fff; box-shadow: 0 0 14px rgba(var(--accent-rgb),0.35); }
.essential-badge.rec { background: rgba(120,180,255,0.14); color: #7ab8ff; border: 1px solid rgba(120,180,255,0.3); }

.essential-desc { font-size: 0.85rem; color: var(--text2); line-height: 1.5; margin: 0.5rem 0 0.95rem; }
/* foot is a column: the Versions button (optional) sits on top; the bottom row
   keeps "Latest vN" on the left and Download pinned to the bottom-right corner
   (so Download is in the same spot whether or not versions exist). */
.essential-foot { margin-top: auto; display: flex; flex-direction: column; gap: 9px; }
.essential-foot-versions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Hi-Res / Low resolution switch - lives IN the existing versions row so it adds
   no card height. Active segment tints with the essential's accent (--eac). */
.ess-res-toggle { display: inline-flex; align-items: center; border: 1px solid var(--border2); border-radius: 9px; overflow: hidden; flex: none; }
.ess-res-opt { font-size: 0.74rem; font-weight: 600; color: var(--muted); background: none; border: 0; cursor: pointer; padding: 7px 12px; line-height: 1; transition: color .18s, background .18s; }
.ess-res-opt + .ess-res-opt { border-left: 1px solid var(--border2); }
.ess-res-opt.on { color: #fff; background: var(--eac, var(--accent)); }
.ess-res-opt:not(.on):hover { color: var(--text2); }

/* ── Share menu ── */
.mp-share-btn svg { flex:none; }
.mp-share-pop { position: fixed; z-index: 9999; width: 300px; max-width: calc(100vw - 16px);
  background: var(--bg2); border: 1px solid var(--border2); border-radius: 14px;
  box-shadow: 0 18px 52px rgba(0,0,0,0.55); padding: 12px; animation: ddIn .14s ease; }
.mp-share-head { font-weight: 700; font-size: 0.82rem; color: var(--text); margin: 2px 4px 10px; }
.mp-share-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mp-share-item { display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 4px; border-radius: 10px; background: var(--bg3); border: 1px solid transparent;
  color: var(--text2); cursor: pointer; font-size: 0.62rem; font-weight: 600; line-height: 1;
  transition: transform .14s, background .14s, color .14s, border-color .14s; }
.mp-share-item svg { width: 20px; height: 20px; }
.mp-share-item:hover { color: #fff; background: var(--sc, var(--accent));
  border-color: var(--sc, var(--accent)); transform: translateY(-2px); }
.mp-share-copyrow { display: flex; gap: 6px; margin-top: 11px; }
.mp-share-url { flex: 1; min-width: 0; background: var(--bg3); border: 1px solid var(--border2);
  border-radius: 8px; padding: 8px 10px; color: var(--text2); font-size: 0.72rem; }
.mp-share-copy, .mp-share-native { display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; border: 0; cursor: pointer; font-weight: 600; border-radius: 8px;
  background: linear-gradient(135deg, var(--accent2), var(--accent)); color: #fff; }
.mp-share-copy { padding: 8px 13px; font-size: 0.72rem; flex: none; }
.mp-share-copy svg, .mp-share-native svg { width: 14px; height: 14px; }
.mp-share-native { width: 100%; margin-top: 9px; padding: 9px; font-size: 0.78rem;
  background: var(--bg3); color: var(--text2); border: 1px solid var(--border2); }
.mp-share-native:hover { border-color: var(--accent); color: var(--text); }
#mp-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(18px);
  background: #141414; color: #fff; border: 1px solid var(--border2); border-radius: 11px;
  padding: 11px 18px; font-size: 0.84rem; max-width: min(90vw, 420px); text-align: center;
  box-shadow: 0 14px 40px rgba(0,0,0,0.5); opacity: 0; pointer-events: none; z-index: 10001;
  transition: opacity .25s, transform .25s; }
#mp-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
html[data-theme="light"] #mp-toast { background: #fff; color: #1a1a1a; }
/* Compact icon-only share button, tucked into the bottom-right corner of the
   mod info panel (below the stats), distinct from the full-width action buttons. */
.mod-share-foot { position: absolute; right: 1.4rem; bottom: 1.4rem; }
.mp-share-icon { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; background: var(--bg3); border: 1px solid var(--border2); color: var(--text2);
  cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .15s; }
.mp-share-icon:hover, .mp-share-icon.open { color: #fff; background: var(--accent);
  border-color: var(--accent); transform: scale(1.07); }
@media (max-width: 720px) { .mod-share-foot { position: static; margin-top: 16px; display: flex; justify-content: flex-end; } }
/* wrap: on a phone this row has ~203px for ~317px of content, which crushed
   .essential-meta to 80px — and because it only has min-width:0 (no clipping) its
   "Latest v0.3.0 Preview445 / 13,432 downloads" spilled straight under the
   Download button. Wrapping is self-limiting: it only engages when the row can't
   fit, so the desktop 2-up grid still lays out on one line. */
.essential-foot-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.essential-meta { display: flex; align-items: center; gap: 10px; font-size: 0.76rem; color: var(--muted); min-width: 0; flex-wrap: wrap; }
.essential-ver strong { color: var(--text2); font-weight: 700; }
.essential-vcount { background: var(--bg3); padding: 2px 8px; border-radius: 20px; }

.essential-actions { display: flex; align-items: center; gap: 8px; }
/* Active download uses the shared .dl-btn (same shine + glow as the car cards).
   Only the not-yet-added "Coming soon" state needs a muted style. */
.ess-dl-disabled {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.8rem; font-weight: 600;
  padding: 8px 16px; border-radius: var(--radius);
  background: var(--bg3); color: var(--muted); cursor: default;
}
.ess-ver-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.8rem; font-weight: 600; color: var(--text2); cursor: pointer;
  padding: 8px 13px; border-radius: 9px; background: none; border: 1px solid var(--border2);
  transition: border-color .18s, color .18s, background .18s;
}
.ess-ver-btn:hover, .ess-ver-btn.open { border-color: var(--accent); color: var(--accent); background: var(--bg2); }
.ess-ver-btn svg { transition: transform 0.2s ease; }
.ess-ver-btn.open svg { transform: rotate(180deg); }
.dl-version-item.disabled { cursor: default; opacity: 0.7; }

/* ── Versions dropdown (anchored popover) ── */
.ess-ver-pop {
  position: absolute; z-index: 1000;
  min-width: 220px; max-width: 320px;
  background: rgba(14,14,14,0.72); -webkit-backdrop-filter: blur(18px) saturate(135%); backdrop-filter: blur(18px) saturate(135%);
  border: 1px solid var(--border2);
  border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
  overflow: hidden; animation: essPopIn 0.16s ease;
}
@keyframes essPopIn { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .ess-ver-pop { animation: none; } }
.ess-ver-pop-head {
  font-size: 0.64rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); padding: 10px 14px 7px; border-bottom: 1px solid var(--border);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ess-ver-pop-list { max-height: 280px; overflow-y: auto; padding: 5px; scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb),0.5) transparent; }
.ess-ver-pop-list::-webkit-scrollbar { width: 5px; }
.ess-ver-pop-list::-webkit-scrollbar-track { background: transparent; }
.ess-ver-pop-list::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb),0.5); border-radius: 3px; }
.ess-ver-pop-list::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-rgb),0.8); border-radius: 3px; }
.ess-ver-row {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 8px;
  font-size: 0.82rem; color: var(--text2); text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.ess-ver-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ess-ver-row svg { color: var(--muted); flex-shrink: 0; transition: color 0.12s; }
.ess-ver-row:hover { background: var(--bg3); color: var(--accent); }
.ess-ver-row:hover svg { color: var(--accent); }
.ess-ver-row.latest { color: var(--text); font-weight: 600; }
.ess-ver-row.latest::after {
  content: 'LATEST'; margin-left: auto; flex-shrink: 0;
  font-size: 0.55rem; font-weight: 800; letter-spacing: 0.06em;
  color: var(--accent); background: var(--accent-dim);
  padding: 2px 6px; border-radius: 10px;
}
.ess-ver-row.disabled { color: var(--muted); cursor: default; }
.ess-ver-row.disabled em { margin-left: auto; font-style: normal; font-size: 0.64rem; opacity: 0.7; }
html[data-theme="light"] .ess-ver-pop { background: rgba(196,184,169,0.72); -webkit-backdrop-filter: blur(18px) saturate(120%); backdrop-filter: blur(18px) saturate(120%); box-shadow: 0 16px 38px rgba(0,0,0,0.18); }
html[data-theme="light"] .ess-ver-row:hover { background: var(--bg3); }

/* Light mode: clean warm surface that's LIGHTER than the page (the default bg2
   is darker than the page → looked sunken/muddy), white icon tiles, readable
   badge, and a gentle hover wash (the 0.13 orange was muddy on the warm bg). */
html[data-theme="light"] .essential-card {
  background: rgba(214,203,189,0.62);
  border-color: rgba(0,0,0,0.10);
  box-shadow: 0 4px 20px rgba(0,0,0,0.10);
}
html[data-theme="light"] .essential-card:hover {
  border-color: rgba(var(--eac-rgb,217,80,0),0.7);
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}
html[data-theme="light"] .essential-card::before {
  background: radial-gradient(460px circle at 14% -25%, rgba(var(--eac-rgb,217,80,0),0.08), transparent 58%);
}
html[data-theme="light"] .essential-icon {
  background: rgba(var(--eac-rgb,217,80,0),0.14);
  border-color: rgba(var(--eac-rgb,217,80,0),0.32);
}
html[data-theme="light"] .essential-badge.rec {
  background: rgba(40,100,180,0.14); color: #245696; border: 1px solid rgba(40,100,180,0.45);
}
html[data-theme="light"] .essential-abbr,
html[data-theme="light"] .essential-vcount { background: #ded3c4; }

/* ── Essentials per-version download counts ── */
.essential-dls { display: inline-flex; align-items: center; gap: 4px; font-size: 0.76rem; color: var(--muted); }
.essential-dls svg { color: var(--muted); flex-shrink: 0; }
.ess-ver-dls { margin-left: auto; flex-shrink: 0; font-size: 0.72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.ess-ver-row.latest .ess-ver-dls { color: var(--text2); }

/* ── Mod-page detail extras (specs, power/torque curve, skins strip, related) ── */
.mod-block { margin-top: 1.15rem; }
.mod-section-h { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.6rem; }
.changelog-side-btn { margin-top: 8px; background: none; border-color: var(--border); color: var(--muted); }
.changelog-side-btn:hover { background: rgba(var(--accent-rgb),0.12); color: var(--text); border-color: rgba(var(--accent-rgb),0.5); }

.mod-feature-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 1rem; }
.feat-chip { font-size: 0.72rem; font-weight: 600; padding: 4px 9px; border-radius: 6px; background: rgba(255,255,255,0.05); color: rgba(230,226,220,0.85); border: 1px solid rgba(255,255,255,0.12); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html[data-theme="light"] .feat-chip { background: rgba(0,0,0,0.045); border-color: rgba(0,0,0,0.12); color: var(--text2); }
/* Decrypted/Unencrypted chip — frosted like the others, but orange-accented so it stands apart */
.feat-chip-tag { background: rgba(var(--accent-rgb),0.10); border-color: rgba(var(--accent-rgb),0.45); color: var(--accent); }
html[data-theme="light"] .feat-chip-tag { background: rgba(var(--accent-rgb),0.10); border-color: rgba(var(--accent-rgb),0.45); color: var(--accent); }

.spec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.spec-cell { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: var(--bg2); border: 1px solid var(--border); border-radius: 9px; }
.spec-val { font-size: 0.95rem; font-weight: 700; color: var(--text); font-family: var(--font-display, inherit); line-height: 1.2; }
.spec-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }

.curve-svg { width: 100%; height: auto; display: block; background: var(--bg2); border: 1px solid var(--border); border-radius: 9px; }
.curve-grid { stroke: var(--border); stroke-width: 1; opacity: 0.55; }
.curve-power { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.curve-torque { fill: none; stroke: #4a9eff; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 4 3; }
.curve-legend { display: flex; gap: 14px; margin-top: 7px; font-size: 0.72rem; }
.curve-legend .lg { display: inline-flex; align-items: center; gap: 6px; color: var(--text2); }
.curve-legend .lg::before { content: ''; width: 14px; height: 2px; border-radius: 2px; }
.curve-legend .lg-power::before { background: var(--accent); }
.curve-legend .lg-torque::before { background: #4a9eff; }
.curve-axis { display: flex; justify-content: space-between; margin-top: 2px; font-size: 0.64rem; color: var(--muted); letter-spacing: 0.04em; }

.mod-skins-strip { margin-top: 1.1rem; }
.skin-thumb-row { display: flex; flex-wrap: wrap; gap: 7px; }
.skin-thumb { width: 64px; height: 40px; border-radius: 7px; overflow: hidden; border: 1px solid var(--border); cursor: pointer; transition: border-color .15s, transform .15s; background: var(--bg2); }
.skin-thumb:hover { border-color: var(--accent); transform: translateY(-2px); }
.skin-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mod-more { margin-top: 16px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.4rem; }
.mod-more-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.more-card { display: flex; flex-direction: column; gap: 7px; text-decoration: none; color: inherit; }
.more-thumb { aspect-ratio: 16/10; border-radius: 10px; overflow: hidden; background: var(--bg2); border: 1px solid var(--border); transition: border-color .15s, transform .15s; }
.more-card:hover .more-thumb { border-color: var(--accent); transform: translateY(-3px); }
.more-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.more-title { font-size: 0.82rem; font-weight: 600; color: var(--text2); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; padding: 2px 4px 2px 9px; border-radius: 4px; transition: color .2s ease, background .32s ease, box-shadow .25s ease; }
.more-card:hover .more-title {
  color: var(--accent);
  background: linear-gradient(90deg, rgba(var(--accent-rgb),0.20) 0%, rgba(var(--accent-rgb),0.05) 55%, transparent 82%);
  box-shadow: inset 2.5px 0 0 0 var(--accent), -2px 0 18px -7px var(--accent-glow);
}
.mod-detail-sidebar .mod-detail-badge { margin: 3px 0 11px; }

/* Disable all transitions during a theme switch (prevents the box-shadow/
   transform transitions on a large card list from animating at once → stutter) */
html.theme-switching * { transition: none !important; }

/* Mod-page gallery prev/next navigation arrows + counter */
.mod-gallery { position: relative; }
.gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.45); color: #fff; border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%; cursor: pointer; opacity: 0; z-index: 6;
  transition: opacity .2s ease, background .2s ease;
}
.mod-gallery:hover .gallery-nav { opacity: 1; }
.gallery-nav:hover { background: rgba(0,0,0,0.72); border-color: rgba(255,255,255,0.32); }
.gallery-prev { left: 14px; }
.gallery-next { right: 14px; }
.gallery-counter {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.55); color: #fff; font-size: 0.74rem; font-weight: 600;
  padding: 3px 11px; border-radius: 999px; z-index: 6; pointer-events: none;
  font-variant-numeric: tabular-nums;
}
@media (hover: none) { .gallery-nav { opacity: 1; } }

/* Cars pagination controls */
.pagination { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 1.25rem 0 1rem; }
.page-info { font-size: 0.8rem; color: var(--muted); letter-spacing: 0.02em; }
.page-btns { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.page-btn { min-width: 38px; height: 38px; padding: 0 11px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg2); color: var(--text2); border: 1px solid var(--border); border-radius: 9px; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.page-btn:hover:not(:disabled):not(.active) { border-color: var(--accent); color: var(--text); }
.page-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); cursor: default; }
.page-btn:disabled { opacity: 0.4; cursor: default; }
.page-ellipsis { color: var(--muted); padding: 0 2px; }

/* Smooth expand/collapse for each FAQ item (native <details>). Uses the modern
   ::details-content pseudo + interpolate-size so height animates to/from auto.
   Chromium 131+ / current Brave; older browsers just snap open (no animation). */
.faq-item { interpolate-size: allow-keywords; }
.faq-item::details-content {
  height: 0; overflow: clip;
  transition: height 0.3s cubic-bezier(.4,0,.2,1), content-visibility 0.3s allow-discrete;
}
.faq-item[open]::details-content { height: auto; }

/* Car-brand logo beside the brand name (cards, mod detail, brand dropdown) */
.brand-logo {
  height: 1.05em; width: auto; max-width: 2em;
  vertical-align: -0.18em;
  object-fit: contain; display: inline-block; flex-shrink: 0;
}
/* Card meta is flex (its gap handles spacing, matching the SVG icons). The brand
   dropdown + mod-detail stat are inline, so they get a small explicit margin. */
.filter-dd-item .brand-logo, .mod-sidebar-stat-val .brand-logo { margin-right: 6px; }
/* Dark/monochrome logos get a light backing chip so they show on dark mode;
   light mode already has the contrast, so no chip there. */
/* Dark/monochrome logos: render as a flat WHITE silhouette on dark mode so they
   show (no backing chip). Light mode keeps the original logo. */
.brand-logo-onlight { filter: brightness(0) invert(1); }
html[data-theme="light"] .brand-logo-onlight { filter: none; }
/* Brand dropdown rows: a fixed logo slot so rows with + without a logo align. */
.filter-dd-item.has-logo-slot { display: flex; align-items: center; gap: 8px; }
.filter-dd-item.has-logo-slot .dd-logo-slot { width: 20px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: flex-start; }
.filter-dd-item.has-logo-slot .brand-logo { margin-right: 0; max-width: 20px; }
/* Country flags (self-hosted R2 /img/flags). Used in the country dropdown +
   card meta + list + mod-page stat. em-sized so it adapts per context (like
   .brand-logo); the 1px ring keeps light flags (e.g. Japan) readable. */
.country-flag { height: 0.85em; width: auto; max-width: 1.5em; vertical-align: -0.15em; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.18); object-fit: cover; display: inline-block; flex-shrink: 0; }
.filter-dd-item.has-logo-slot .country-flag { display: block; height: 14px; max-width: 20px; vertical-align: unset; }
.mod-sidebar-stat-val .country-flag { margin-right: 6px; }
.sr-row-meta .country-flag { margin-right: 4px; }

/* Logos with extra transparent right-padding in the PNG: pull the name closer
   (only affects card meta; dropdown slot + stat margins override this). */
.brand-logo-tight { margin-right: -3px; }

/* Brand logo in the global search dropdown results */
.nav-search-result .brand-logo { margin-right: 5px; }

/* "More from author" → horizontal scroll row + arrows + view-all link */
.mod-more-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 0.7rem; }
.mod-more-head .mod-section-h { margin-bottom: 0; }
.mod-more-head-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.mod-more-viewall { font-size: 0.78rem; font-weight: 600; color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.mod-more-viewall:hover { text-decoration: underline; }
.mod-more-wrap { position: relative; }
.mod-more-row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; padding: 2px 2px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mod-more-row::-webkit-scrollbar { display: none; }
.mod-more-row .more-card { width: 165px; flex-shrink: 0; scroll-snap-align: start; }
/* Scroll arrows live in the section header (top-right) so they never overlap cards */
.mod-more-arrows { display: inline-flex; gap: 5px; }
.more-nav { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: var(--bg2); color: var(--text2); border: 1px solid var(--border); border-radius: 7px; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.more-nav:hover { border-color: var(--accent); color: var(--text); }

/* Tight-logo overrides where the context uses a positive margin (so the
   PNG-padding compensation still applies there). */
.nav-search-result .brand-logo-tight { margin-right: 2px; }
.mod-sidebar-stat-val .brand-logo-tight { margin-right: 3px; }

/* Brand logo in the search list (row) view meta */
.sr-row-meta .brand-logo { margin-right: 4px; }
.sr-row-meta .brand-logo-tight { margin-right: 1px; }

/* Description + Specs as horizontal panels below the hero (same card look as the
   right info panel). More From is also a panel (see .mod-more above). */
.mod-panels-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; margin-top: 16px; }
.mod-panels-row > .mod-panel { flex: 1 1 320px; min-width: 0; }
.mod-panel-desc { flex-grow: 1.5; }
.mod-panel { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.4rem; }
.mod-panel > .mod-block:first-child { margin-top: 0; }
.mod-panel .mod-detail-desc { margin: 0; }

/* ============================================================================
   DISCOVERY POLISH (2026-06-23) — favorites, skeletons, sticky DL, breadcrumbs,
   richer empty states, popular badges. Per-game accent aware.
   ============================================================================ */
/* Favorites heart (sits on a card thumb / mod hero) */
.fav-btn { position:absolute; top:9px; right:9px; z-index:4; width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(8,8,10,0.55); border:1px solid rgba(255,255,255,0.16); color:rgba(255,255,255,0.78); cursor:pointer; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:background .18s, color .18s, transform .18s, border-color .18s, opacity .18s; opacity:0; }
/* Card share button - mirrors the favourite heart, sits just left of it. */
.card-share-btn { position:absolute; top:9px; right:47px; z-index:4; width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(8,8,10,0.55); border:1px solid rgba(255,255,255,0.16); color:rgba(255,255,255,0.78); cursor:pointer; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:background .18s, color .18s, transform .18s, border-color .18s, opacity .18s; opacity:0; }
.mod-card:hover .card-share-btn, .card-share-btn:focus-visible, .card-share-btn.open { opacity:1; }
.card-share-btn svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.card-share-btn:hover { transform:scale(1.12); color:#fff; border-color:var(--accent); }
.card-share-btn.open { color:#fff; background:var(--accent); border-color:var(--accent); }
@media (hover:none) { .card-share-btn { opacity:1; } }
.mod-card:hover .fav-btn, .fav-btn.on, .fav-btn:focus-visible { opacity:1; }
.fav-btn svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.fav-btn:hover { transform:scale(1.12); color:#fff; border-color:var(--accent); }
.fav-btn.on { color:#fff; background:var(--accent); border-color:var(--accent); }
.fav-btn.on svg { fill:#fff; stroke:#fff; animation:favPop .3s ease; }
@keyframes favPop { 0%{transform:scale(1)} 40%{transform:scale(1.4)} 100%{transform:scale(1)} }
@media (hover:none) { .fav-btn { opacity:1; } }
.fav-filter-btn { display:inline-flex; align-items:center; gap:6px; }
.fav-filter-btn.on { color:var(--accent); border-color:var(--accent); }
.fav-filter-btn svg { fill:none; stroke:currentColor; stroke-width:2; width:14px; height:14px; }
.fav-filter-btn.on svg { fill:var(--accent); }

/* Popular badge */
.pop-badge { display:inline-flex; align-items:center; gap:3px; font-size:0.62rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--accent); padding:2px 7px; border-radius:999px; background:rgba(var(--accent-rgb),0.14); border:1px solid rgba(var(--accent-rgb),0.32); }

/* Loading skeletons */
@keyframes skShimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
.sk { background:linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.075) 37%, rgba(255,255,255,0.03) 63%); background-size:200% 100%; animation:skShimmer 1.4s linear infinite; border-radius:8px; }
.sk-card { border:1px solid var(--border2); border-radius:14px; overflow:hidden; background:rgba(14,14,14,0.45); }
.sk-thumb { width:100%; aspect-ratio:16/10; border-radius:0; }
.sk-line { height:12px; margin:11px 13px; }
.sk-line.short { width:52%; }
.sk-line.tiny { width:34%; height:9px; }

/* Sticky download bar (mod page) */
.mod-sticky-dl { position:fixed; left:0; right:0; bottom:0; z-index:95; transform:translateY(115%); transition:transform .32s cubic-bezier(.2,.7,.3,1); background:rgba(14,14,16,0.82); -webkit-backdrop-filter:blur(18px) saturate(130%); backdrop-filter:blur(18px) saturate(130%); border-top:1px solid rgba(255,255,255,0.1); box-shadow:0 -8px 30px rgba(0,0,0,0.45); }
.mod-sticky-dl.show { transform:translateY(0); }
.mod-sticky-inner { max-width:1180px; margin:0 auto; padding:9px 1.5rem; display:flex; align-items:center; gap:14px; }
.mod-sticky-thumb { width:38px; height:38px; border-radius:8px; object-fit:cover; flex-shrink:0; }
.mod-sticky-title { font-weight:700; font-size:0.9rem; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex:1; }
.mod-sticky-inner .mod-dl-btn, .mod-sticky-inner .dl-btn { flex-shrink:0; margin:0; width:auto; }
/* keep the footer clear of the fixed bottom download bar (mod detail page) */
body:has(.mod-sticky-dl) footer { margin-bottom: 76px; }
/* blur the sticky bar's thumbnail when Blur NSFW is on for an nsfw mod */
html.mp-nsfw-page .mod-sticky-thumb,
html.mp-blur-armed .mod-sticky-thumb { filter: blur(8px); clip-path: inset(0 round 8px); }
html[data-theme="light"] .mod-sticky-dl { background:rgba(214,206,196,0.86); border-top-color:var(--border2); box-shadow:0 -8px 30px rgba(0,0,0,0.12); }

/* Breadcrumbs */
.crumbs { display:flex; width:100%; align-items:center; justify-content:flex-start; gap:7px; font-size:0.78rem; color:var(--muted); margin:0 0 1.25rem; padding:9px 15px; flex-wrap:wrap; background:var(--bg2); border:1px solid var(--border); border-radius:10px; box-shadow:inset 0 1px 0 rgba(255,255,255,0.04); }
.crumbs a { color:var(--muted); text-decoration:none; transition:color .15s; }
.crumbs a:hover { color:var(--accent); }
.crumbs svg { opacity:0.45; flex-shrink:0; }
.crumbs .crumb-cur { color:var(--text2); }

/* Richer empty state */
.empty-rich { display:flex; flex-direction:column; align-items:center; text-align:center; padding:3rem 1.5rem; gap:0.5rem; }
.empty-rich-icon { width:62px; height:62px; border-radius:18px; display:grid; place-items:center; background:rgba(var(--accent-rgb),0.10); border:1px solid rgba(var(--accent-rgb),0.22); color:var(--accent); margin-bottom:0.4rem; }
.empty-rich-icon svg { width:28px; height:28px; }
.empty-rich-title { font-weight:700; font-size:1.05rem; color:var(--text); }
.empty-rich-sub { color:var(--muted); font-size:0.88rem; max-width:400px; line-height:1.55; }
.empty-rich-cta { margin-top:0.7rem; display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:9px; background:rgba(var(--accent-rgb),0.14); border:1px solid rgba(var(--accent-rgb),0.4); color:var(--accent); font-size:0.82rem; font-weight:600; text-decoration:none; transition:background .2s, color .2s; }
.empty-rich-cta:hover { background:var(--accent); color:#fff; }

/* clickable tag/brand/author chips become links */
a.tag, a.mod-meta-item { text-decoration:none; transition:color .15s, border-color .15s, background .15s; }
a.tag:hover { color:var(--accent); border-color:rgba(var(--accent-rgb),0.5); }
a.mod-meta-item:hover { color:var(--accent); }
/* mod-page favorites heart (always visible on the gallery) */
.mod-gallery { position:relative; }
.mod-gallery > .fav-btn { opacity:1; top:12px; right:12px; width:34px; height:34px; }
.mod-gallery > .fav-btn svg { width:17px; height:17px; }
/* Frosted glass on dropdowns (match the About panel) */
.filter-dd-panel { background:rgba(14,14,14,0.72) !important; -webkit-backdrop-filter:blur(18px) saturate(135%); backdrop-filter:blur(18px) saturate(135%); }
/* The header's blur now lives on header::before, so the header is no longer a
   backdrop root and THIS dropdown's backdrop-filter can sample the page behind
   it → real frosted glass at a translucent opacity (2026-07-03). */
.nav-search-dropdown { background:rgba(14,14,14,0.72) !important; -webkit-backdrop-filter:blur(18px) saturate(135%); backdrop-filter:blur(18px) saturate(135%); }
/* Per-game tint: faint accent wash behind the browse banner title area */
.page-banner.has-cover .page-banner-inner h1 { text-shadow:0 1px 12px rgba(0,0,0,0.5); }
/* Mobile polish (new hero + extras) */
@media (max-width: 640px) {
  .gh-stats { gap:6px; margin:1rem 0 0.85rem; }
  .gh-stat { padding:5px 11px; font-size:0.74rem; }
  .hero-links { gap:6px; }
  .hero-link { padding:6px 10px; font-size:0.74rem; }
  .hero-link span { display:inline; }
  .mod-sticky-inner { padding:8px 1rem; gap:9px; }
  .mod-sticky-thumb { display:none; }
  .crumbs { font-size:0.72rem; }
  .hero-about-card { padding:1.4rem 1.2rem; max-height:88%; }
  .fav-btn { opacity:1; }
}
/* Collections row + cards */
.collections-row { display:flex; gap:14px; flex-wrap:wrap; }
.collection-card { position:relative; flex:1 1 240px; min-height:118px; max-width:340px; border:1px solid var(--border2); border-radius:14px; overflow:hidden; background:rgba(14,14,14,0.6); background-size:cover; background-position:center; cursor:pointer; text-align:left; padding:14px 16px; display:flex; flex-direction:column; justify-content:flex-end; transition:transform .25s, border-color .25s, box-shadow .25s; }
.collection-card:hover { transform:translateY(-4px); border-color:var(--accent); box-shadow:0 12px 32px rgba(0,0,0,0.45), 0 0 26px var(--accent-glow); }
.collection-card-name { position:relative; font-family:var(--font-display); font-weight:800; font-size:1.05rem; color:#fff; letter-spacing:0.02em; text-shadow:0 1px 6px rgba(0,0,0,0.72); }
.collection-card-meta { position:relative; font-size:0.76rem; color:rgba(230,226,220,0.78); margin-top:3px; text-shadow:0 1px 5px rgba(0,0,0,0.65);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.4; }
.collection-card-meta .cc-count { color:#fff; font-weight:700; }
/* modal rows — thumbnail + title + author (matches the site's mod-row language) */
.coll-modal-item { display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:9px; color:var(--text); text-decoration:none; transition:background .15s; }
/* Hover matches the nav-search dropdown (subtle neutral wash, no accent recolor). */
.coll-modal-item:hover { background:rgba(255,255,255,0.07); }
html[data-theme="light"] .coll-modal-item:hover { background:rgba(0,0,0,0.05); }
.coll-modal-item > svg { opacity:0.5; flex-shrink:0; }
.coll-modal-thumb { width:48px; height:34px; border-radius:6px; object-fit:cover; flex-shrink:0; background:var(--bg3); }
.coll-modal-thumb-ph { display:inline-block; }
.coll-modal-info { display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.coll-modal-ttl-row { display:flex; align-items:center; gap:6px; min-width:0; }
.coll-modal-ttl { font-size:0.9rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.coll-modal-ttl-row .mod-version-badge,
.coll-modal-ttl-row .nav-nsfw-tag { flex-shrink:0; }
/* Slim the version pill to the title-row height (same fix as the search dropdown). */
.coll-modal-ttl-row .mod-version-badge { padding:0 6px; font-size:0.6rem; line-height:1.45; }
.coll-modal-sub { font-size:0.72rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Clickable info area (thumb + title → mod page) + a dedicated Download button. */
.coll-modal-link { display:flex; align-items:center; gap:12px; min-width:0; flex:1; color:var(--text); text-decoration:none; }
.coll-modal-link:hover .coll-modal-ttl { color:var(--accent); }
.coll-modal-dl { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:36px; height:32px; border:0; padding:0; cursor:pointer; border-radius:8px; background:var(--accent); color:#fff; text-decoration:none; transition:filter .15s, transform .1s; }
.coll-modal-dl:hover { filter:brightness(1.08); }
.coll-modal-dl:active { transform:scale(0.94); }
.coll-modal-dl svg { display:block; }
.coll-modal-item:hover .coll-modal-sub { color:inherit; opacity:0.8; }

/* ── Recent searches dropdown ─────────────────────────────────────────────── */
.nav-search-recent-head{display:flex;align-items:center;justify-content:space-between;
  padding:9px 14px 6px;font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-dim);font-weight:600;}
.nav-recent-clear{background:none;border:none;color:var(--text-dim);font-size:11px;
  cursor:pointer;padding:2px 4px;border-radius:5px;transition:color .15s,background .15s;}
.nav-recent-clear:hover{color:var(--accent);background:rgba(var(--accent-rgb),0.12);}
.nav-search-result.nav-recent{color:var(--text-soft);}
.nav-search-result.nav-recent svg{opacity:.55;flex:none;}
.nav-search-result.nav-recent span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ── Home "Latest ..." sections → contained panels ────────────────────────── */
.home-panel { background:rgba(20,20,23,var(--panel-alpha)); border:1px solid var(--border); border-radius:18px;
  padding:14px 22px 24px; margin:0 0 1.7rem; box-shadow:inset 0 1px 0 rgba(255,255,255,0.04); }
.home-panel > .section-header { margin-top:0; }
.home-panel .mod-grid, .home-panel .loading-grid { margin-bottom:0; }
/* Collapse a panel that rendered empty (e.g. cars/tracks on a mods-only game page) */
.home-panel:not(:has(.mod-card)):not(:has(.skeleton-card)):not(:has(.trend-card)):not(:has(.collection-card)) { display:none; }
html[data-theme="light"] .home-panel { background:var(--bg2); border-color:var(--border2); }
@media (max-width:640px){ .home-panel { padding:12px 13px 18px; border-radius:14px; } }

/* Dim-text legibility over the wallpaper: rather than a text-shadow halo (which
   smeared in light mode + Jay preferred a cleaner look), the dim text is just a
   notch brighter — see the brightened `--muted` token. (2026-07-03) */

/* ── Most Downloaded → slim auto-scrolling rank strip ─────────────────────── */
.pop-panel { background:rgba(20,20,23,var(--panel-alpha)); border:1px solid var(--border); border-radius:18px;
  padding:11px 20px 16px; margin:0 0 1.7rem; box-shadow:inset 0 1px 0 rgba(255,255,255,0.04); }
.pop-panel > .section-header { margin:0 0 11px; }
.pop-panel-hint { font-size:0.72rem; color:var(--muted); font-weight:600; letter-spacing:0.02em; }
html[data-theme="light"] .pop-panel { background:var(--bg2); border-color:var(--border2); }
html[data-theme="light"] .pop-item { background:rgba(214,203,189,0.62); border-color:rgba(0,0,0,0.10); }
html[data-theme="light"] .pop-item:hover { border-color:var(--accent); box-shadow:0 7px 16px rgba(0,0,0,0.14); }
html[data-theme="light"] .pop-thumb { background:rgba(181,167,150,0.70); }
html[data-theme="light"] .pop-m strong { color:var(--text); }

.pop-marquee { position:relative; overflow:hidden; padding:9px 0 11px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3.5%,#000 96.5%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 3.5%,#000 96.5%,transparent); }
.pop-track { display:flex; gap:13px; width:max-content; animation:popMarquee 70s linear infinite; will-change:transform; }
.pop-marquee:hover .pop-track { animation-play-state:paused; }
@keyframes popMarquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .pop-track { animation:none; }
  .pop-marquee { overflow-x:auto; scrollbar-width:none; }
  .pop-marquee::-webkit-scrollbar { display:none; }
}

.pop-item { flex:0 0 auto; display:flex; align-items:center; gap:12px; width:340px; min-height:86px;
  padding:9px 14px 9px 9px; background:rgba(14,14,14,0.58); border:1px solid var(--border2);
  border-radius:13px; text-decoration:none; transition:border-color .2s, transform .2s, box-shadow .2s; }
.pop-item:hover { border-color:var(--accent); transform:translateY(-3px); box-shadow:0 7px 16px rgba(0,0,0,0.4); }
.pop-thumb { width:108px; height:70px; border-radius:8px; object-fit:cover; flex:none; background:var(--bg3); }
.pop-thumb-ph { background:linear-gradient(135deg,var(--bg3),var(--bg2)); }
.pop-info { min-width:0; flex:1; display:flex; flex-direction:column; gap:4px; }
.pop-title { font-size:0.84rem; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pop-meta { display:flex; flex-wrap:wrap; align-items:center; gap:4px 9px; font-size:0.68rem; color:var(--muted); line-height:1.3; }
.pop-m { display:inline-flex; align-items:center; gap:3px; max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pop-m strong { color:var(--text2); font-weight:600; }
.pop-m svg, .pop-m img { width:11px; height:11px; opacity:0.85; flex:none; border-radius:2px; }
.pop-ver { font-size:0.62rem; font-weight:700; color:var(--accent); padding:1px 6px; border:1px solid rgba(var(--accent-rgb),0.4); border-radius:5px; }
.pop-dl { display:flex; align-items:center; gap:4px; font-size:0.72rem; font-weight:700; color:var(--accent); }
.pop-dl svg { opacity:0.9; }
@media (max-width:640px){ .pop-panel { padding:11px 12px 14px; border-radius:14px; } .pop-item { width:300px; } }

/* ── Search result cards carry no description → group title/meta/footer tightly
   (the shared .mod-footer margin-top:auto otherwise strands the meta row). ─── */
.sr-grid .mod-title, .sr-list .mod-title { margin-bottom: calc(0.4rem - 3px); }  /* tighten title→meta gap */
.sr-grid .mod-meta, .sr-list .mod-meta { margin: 2px 0 0; }
.sr-grid .mod-footer, .sr-list .mod-footer { margin-top: 6px; gap: 8px; }        /* tighten meta→pill gap (-3px) */
/* List view — narrow, centered panel (rows + their section headers). */
#sr-results.view-list .sr-list,
#sr-results.view-list .sr-section-header { max-width: 1000px; margin-left: auto; margin-right: auto; }


/* ── Hero breadcrumb (Games > Game) ── */
.hero-breadcrumb { display:flex; align-items:center; justify-content:flex-start; gap:10px; margin-bottom:0.75rem; font-size:0.8rem; font-weight:600; position:relative; z-index:3; flex-wrap:wrap; }
.hero-breadcrumb a { color:rgba(228,228,233,0.7); text-decoration:none; transition:color .15s; }
.hero-breadcrumb a:hover { color:var(--accent); }
.hero-bc-sep { color:rgba(228,228,233,0.55); font-size:1.15rem; line-height:1; font-weight:400; }
.hero-bc-cur { color:rgba(255,255,255,0.92); }
/* Breadcrumbs are <nav>s → light mode's `nav a{color:var(--muted)!important}` was
   darkening the LINKS (Games/Assetto Corsa) to unreadable on the dark banner,
   while the separators/current-item (spans) stayed light = the inconsistency.
   Force the links light on the dark banner/cover in light mode. */
html[data-theme="light"] .hero-breadcrumb a { color: rgba(228,228,233,0.7) !important; }
html[data-theme="light"] .hero-breadcrumb a:hover { color: var(--accent) !important; background: transparent !important; }
/* home hero WITHOUT a cover = light bg, so dark breadcrumb text there. */
html[data-theme="light"] .hero-welcome:not(.has-cover) .hero-breadcrumb a { color: var(--text2) !important; }
html[data-theme="light"] .hero-welcome:not(.has-cover) .hero-breadcrumb a:hover { color: var(--accent) !important; }
html[data-theme="light"] .hero-welcome:not(.has-cover) .hero-bc-cur { color:var(--text); }

/* ── Trending panel (NexusMods-style overlay cards) ── */
.trending-section { max-width:1200px; margin:0 auto 2.6rem; padding:1.6rem clamp(1rem,4vw,2rem) 0; }
.trending-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.05rem; }
.trending-title { display:flex; align-items:center; gap:9px; font-size:1.28rem; font-weight:800; letter-spacing:-0.01em; color:var(--text); }
.trending-title svg { color:#ff7a2f; }
.trending-viewall { color:var(--text2); font-size:0.84rem; font-weight:600; text-decoration:none; display:flex; align-items:center; gap:4px; transition:color .15s; }
.trending-viewall:hover { color:var(--accent); }
.trending-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(232px,1fr)); gap:14px; }
.trend-card { position:relative; display:block; border-radius:14px; overflow:hidden; aspect-ratio:16/10; text-decoration:none; border:1px solid var(--border); background:var(--bg3); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.trend-card:hover { transform:translateY(-3px); box-shadow:0 6px 18px rgba(0,0,0,0.3); border-color:var(--accent); }
html[data-theme="light"] .trend-card:hover { box-shadow:0 5px 16px rgba(0,0,0,0.13); border-color:#f85810 !important; }
/* Light mode hover outlines: the muted light --accent (#d95000) read faded;
   use the vivid orange + a visible ring so hover pops like dark mode. */
html[data-theme="light"] .see-all:hover { border-color:#f85810 !important; box-shadow:0 0 0 2px rgba(248,88,16,0.26) !important; }
html[data-theme="light"] .game-card:not(.soon):hover { border-color:#f85810 !important; }
html[data-theme="light"] .essential-card:hover { border-color:#f85810 !important; box-shadow:0 12px 28px rgba(0,0,0,0.12), 0 0 0 1px rgba(248,88,16,0.4) !important; }

.trend-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.trend-card:hover img { transform:scale(1.05); }
.trend-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(6,6,9,0.94) 0%, rgba(6,6,9,0.55) 36%, rgba(6,6,9,0.05) 66%, transparent 100%); display:flex; flex-direction:column; justify-content:flex-end; padding:12px 13px; }
.trend-badge { position:absolute; top:9px; right:9px; display:inline-flex; align-items:center; gap:3px; background:rgba(0,0,0,0.52); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); color:#ff8a3d; font-size:0.64rem; font-weight:800; text-transform:uppercase; letter-spacing:0.04em; border-radius:6px; padding:3px 7px; }
.trend-badge-upd { color:#5aa9ff; }
.trend-name { color:#fff; font-size:0.92rem; font-weight:700; line-height:1.25; margin-bottom:4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-shadow:0 1px 6px rgba(0,0,0,0.6); }
.trend-meta { color:rgba(232,232,237,0.78); font-size:0.75rem; display:flex; align-items:center; gap:7px; min-width:0; flex-wrap:nowrap; }
/* Author truncates with an ellipsis so a long name never wraps or shoves the
   version/downloads off the line; the version + right-side stats stay put. */
.trend-meta strong { color:var(--accent); font-weight:600; min-width:0; flex:0 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.trend-ver { color:rgba(232,232,237,0.6); font-weight:500; white-space:nowrap; flex:none; }
.trend-dls { display:inline-flex; align-items:center; gap:3px; opacity:0.85; }
.trend-right { margin-left:auto; display:inline-flex; align-items:center; gap:9px; flex:none; padding-left:4px; }
.trend-when { opacity:0.7; white-space:nowrap; font-size:0.72rem; }

.page-breadcrumb { margin-bottom:0.65rem; }
.page-banner-inner .page-breadcrumb a { color:rgba(228,228,233,0.75); }
/* Breadcrumbs are <nav>s, so they inherit the header nav-button hover PILL
   (nav a:hover background). Strip it so the hero + browse breadcrumbs are
   consistent = orange text + orange underline on hover, no grey pill box
   (2026-07-03). The browse one also needs its accent hover restored (the
   .page-banner-inner override above was beating it). */
.hero-breadcrumb a:hover { background: transparent; }
.page-banner-inner .page-breadcrumb a:hover { color: var(--accent); }
/* Breadcrumb links also inherit nav a's 7px 16px padding, which made the gaps
   uneven (links padded, separators + current-item span not). Zero it so the
   flex `gap` alone spaces every item evenly; re-anchor the hover underline to
   the (now unpadded) link width. */
.hero-breadcrumb a { padding: 0; border-radius: 0; font-size: 0.8rem; }
.hero-breadcrumb a::after { left: 0; right: 0; }

/* Match the other panel titles (.section-title = 1.1rem/700/0.07em) for uniformity. */
.section-title.trending-title { font-size:1.1rem; font-weight:700; letter-spacing:0.07em; gap:10px; }
.section-title.trending-title svg { color:#ff7a2f; flex-shrink:0; }


/* ══════════════════════ HOMEPAGE (index picker) REDESIGN v1 ══════════════════════ */
.mph { max-width:1560px; margin:0 auto; width:100%; padding:0 clamp(1.2rem,4vw,2.4rem); }

/* — compact masthead (deliberately NOT a game hero) — */
.mph-mast { display:flex; align-items:center; gap:0.9rem; flex-wrap:wrap; min-height:64px; padding:1rem 0 0.9rem; }
.mph-mark { width:52px; height:52px; border-radius:13px; flex:none; overflow:hidden;
  background:linear-gradient(135deg,var(--accent),#a83100); display:grid; place-items:center;
  box-shadow:0 6px 18px rgba(var(--accent-rgb),0.30); }
.mph-mark img { width:100%; height:100%; object-fit:cover; }
.mph-mast-txt h1 { margin:0; font-size:clamp(1.25rem,2.5vw,1.6rem); font-weight:800; letter-spacing:-0.02em; line-height:1.1; }
.mph-mast-txt h1 em { font-style:normal; color:var(--accent); }
.mph-tag { margin:1px 0 0; color:var(--text2); font-size:0.85rem; }
.mph-stats { margin-left:auto; display:flex; gap:0.6rem; }
.mph-stat { background:rgba(14,14,14,0.58); border:1px solid var(--border); border-radius:11px;
  padding:0.38rem 0.9rem; text-align:center; min-width:76px; backdrop-filter:blur(8px); }
html[data-theme="light"] .mph-stat { background:rgba(214,203,189,0.62); }
.mph-stat strong { display:block; font-size:1.0rem; font-weight:800; color:var(--text); }
.mph-stat span { font-size:0.64rem; text-transform:uppercase; letter-spacing:0.07em; color:var(--muted); }
.mph-stat .pulse { width:6px; height:6px; border-radius:50%; background:#3fca6b; display:inline-block;
  margin-right:4px; box-shadow:0 0 0 3px rgba(63,202,107,0.2); vertical-align:middle; }

/* — section band + head — */
.mph-band { padding:1.4rem 0; }
.mph-bandhead { display:flex; align-items:baseline; gap:0.7rem; margin:0 0 0.9rem; flex-wrap:wrap; }
.mph-bandhead h2 { margin:0; font-size:1.25rem; font-weight:800; letter-spacing:-0.01em; }
.mph-bandhead .sub { color:var(--muted); font-size:0.85rem; }
.mph-all { margin-left:auto; font-size:0.8rem; font-weight:600; color:var(--accent); text-decoration:none;
  border:1px solid var(--border2); background:rgba(14,14,14,0.58); border-radius:20px; padding:5px 14px; transition:border-color .16s,box-shadow .16s; }
html[data-theme="light"] .mph-all { background:rgba(214,203,189,0.62); }
.mph-all:hover { border-color:var(--accent); }
html[data-theme="light"] .mph-all:hover { border-color:#f85810; box-shadow:0 0 0 2px rgba(248,88,16,0.26); }

/* — horizontal strip — */
.mph-sec { margin:0 0 1.7rem; }
.mph-strip-wrap { position:relative; }
/* top headroom INSIDE the scroller so hover-lifted cards don't get beheaded
   (overflow-x:auto clips vertical overflow); negative margin keeps the rhythm */
.mph-strip { display:flex; gap:0.85rem; overflow-x:auto; scroll-behavior:smooth; padding:14px 4px 10px;
  margin-top:-10px; scrollbar-width:none; -ms-overflow-style:none; }
.mph-strip::-webkit-scrollbar { display:none; }
.mph-arrow { position:absolute; top:74px; transform:translateY(-50%); z-index:6; width:42px; height:42px;
  border-radius:50%; background:rgba(16,16,19,0.94); border:1px solid var(--border2); color:var(--text);
  display:grid; place-items:center; cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,0.55);
  transition:opacity .18s, background .18s, border-color .18s, color .18s; backdrop-filter:blur(6px); }
.mph-arrow:hover { border-color:var(--accent); color:var(--accent); background:rgba(16,16,19,1); transform:translateY(-50%) scale(1.06); }
/* on wide screens the arrows sit fully in the side gutter (no card overlap);
   on narrower/half-window they tuck to the panel edge. */
.mph-arrow-l { left:-54px; } .mph-arrow-r { right:-54px; }
@media (max-width:1690px){ .mph-arrow-l { left:-16px; } .mph-arrow-r { right:-16px; } }
.mph-arrow[hidden] { display:none; }
html[data-theme="light"] .mph-arrow { background:rgba(224,215,203,0.92); color:var(--text); }
html[data-theme="light"] .mph-arrow:hover { border-color:#f85810; color:#f85810; }

/* — strip card — */
.hcard { flex:0 0 256px; scroll-snap-align:start; background:rgba(14,14,14,0.58); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden; transition:transform .18s,border-color .18s,box-shadow .18s;
  backdrop-filter:blur(8px); text-decoration:none; color:inherit; display:flex; flex-direction:column; }
html[data-theme="light"] .hcard { background:rgba(214,203,189,0.62); }
.hcard:hover { transform:translateY(-3px); border-color:var(--accent); box-shadow:0 12px 30px rgba(0,0,0,0.35); }
html[data-theme="light"] .hcard:hover { border-color:#f85810; box-shadow:0 10px 26px rgba(0,0,0,0.16); }
.hcard-prev { height:140px; background:#181820 center/cover no-repeat; position:relative; }
html[data-theme="light"] .hcard-prev { background-color:#b7ab9b; }
.hcard-badge { position:absolute; top:8px; left:8px; font-size:0.63rem; font-weight:700; letter-spacing:0.03em;
  padding:3px 9px; border-radius:20px; color:#fff; background:rgba(0,0,0,0.55); backdrop-filter:blur(4px);
  max-width:calc(100% - 16px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hcard-new { position:absolute; bottom:8px; left:8px; font-size:0.6rem; font-weight:700; color:#fff;
  background:var(--accent); padding:2px 7px; border-radius:5px; letter-spacing:0.04em; }
.hcard-rank { position:absolute; top:8px; right:8px; min-width:24px; height:24px; padding:0 5px; border-radius:7px;
  background:rgba(0,0,0,0.62); color:var(--accent2); font-weight:800; display:grid; place-items:center; font-size:0.8rem; }
.hcard-body { padding:0.6rem 0.75rem 0.75rem; flex:1; display:flex; flex-direction:column; }
.hcard-ttl { font-weight:700; font-size:0.9rem; margin:0 0 3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hcard-meta { color:var(--muted); font-size:0.75rem; display:flex; gap:5px; align-items:center; min-width:0; }
.hcard-meta .who { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hcard-meta .r { margin-left:auto; color:var(--text2); font-weight:600; white-space:nowrap; flex:none; }

/* — featured spotlight — */
.mph-spot { display:grid; grid-template-columns:1.25fr 1fr; border:1px solid var(--border2); border-radius:16px;
  overflow:hidden; background:rgba(14,14,14,0.58); backdrop-filter:blur(10px); text-decoration:none; color:inherit;
  transition:border-color .18s,box-shadow .18s; }
html[data-theme="light"] .mph-spot { background:rgba(214,203,189,0.62); }
.mph-spot:hover { border-color:var(--accent); box-shadow:0 14px 34px rgba(0,0,0,0.32); }
html[data-theme="light"] .mph-spot:hover { border-color:#f85810; box-shadow:0 12px 28px rgba(0,0,0,0.16); }
.mph-spot-prev { min-height:360px; background:#181820 center/cover no-repeat; }
.mph-spot-info { padding:1.7rem 1.9rem; display:flex; flex-direction:column; justify-content:center; }
.mph-spot-info .chip { align-self:flex-start; background:var(--accent); color:#fff; font-size:0.66rem; font-weight:700;
  padding:3px 11px; border-radius:20px; margin-bottom:0.8rem; }
.mph-spot-info h3 { margin:0 0 0.5rem; font-size:1.45rem; font-weight:800; letter-spacing:-0.02em; line-height:1.15; }
.mph-spot-info p { margin:0 0 1.1rem; color:var(--text2); font-size:0.9rem; line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.mph-spot-btns { display:flex; gap:0.6rem; }
.mph-spot-btns .b { padding:8px 22px; border-radius:9px; font-weight:700; font-size:0.88rem; }
.mph-spot-btns .view { background:var(--accent); color:#fff; }
.mph-spot:hover .mph-spot-btns .view { background:var(--accent2); }

@media (max-width:720px){
  .mph-stats { margin-left:0; width:100%; }
  .mph-spot { grid-template-columns:1fr; }
  .mph-spot-prev { min-height:180px; }
}


/* — homepage strip refinements: reuse the site's pop-panel/marquee language — */
.mph-home-sections { margin-top:0.4rem; }
.mph-featured { margin:0 0 1.7rem; }
.pop-game { display:inline-flex; align-items:center; font-size:0.6rem; font-weight:800; letter-spacing:0.03em;
  color:#fff; padding:2px 8px; border-radius:20px; text-transform:uppercase; white-space:nowrap; flex:none; }
.pop-when { font-size:0.72rem; font-weight:700; color:var(--muted); }


/* ══ Home collage wallpaper: 5 random game-art stripes, blurred together (seams
   masked) + dark accent tint + document-tall bottom fade. Mirrors #page-wallpaper. ══ */
body.home-bg { position:relative; }
body.home-bg > header, body.home-bg > main, body.home-bg > div.mph,
body.home-bg > section, body.home-bg > footer { position:relative; z-index:2; }
#home-collage { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; background:#0b0b0d; }
#home-collage .hc-blur { position:absolute; inset:-60px; display:flex;
  filter:blur(var(--wp-blur)) saturate(1.05) brightness(0.9); transform:scale(1.08); }
#home-collage .hc-strip { flex:1 1 0; background:#0b0b0d center/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent); }
#home-collage .hc-strip:not(:first-child){ margin-left:-5%; }
#home-collage .hc-tint { position:absolute; inset:0;
  background:radial-gradient(90% 60% at 50% -10%, rgba(var(--accent-rgb),0.07), transparent 60%), rgba(6,8,8,0.82); }
#home-wallfade { position:absolute; top:0; bottom:0; left:0; right:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(6,8,8,0) 0%, rgba(6,8,8,0.18) 22%, rgba(6,8,8,0.55) 55%, rgba(6,8,8,0.88) 82%, rgba(6,8,8,1) 100%); }
html[data-theme="light"] #home-collage { background:#c9bdad; }
html[data-theme="light"] #home-collage .hc-blur { filter:blur(var(--wp-blur)) grayscale(1) brightness(1.45) contrast(0.9); }
html[data-theme="light"] #home-collage .hc-strip { background-color:#c9bdad; }
html[data-theme="light"] #home-collage .hc-tint {
  background:radial-gradient(90% 60% at 50% -10%, rgba(var(--accent-rgb),0.03), transparent 60%), rgba(198,187,173,0.6); }
html[data-theme="light"] #home-wallfade {
  background:linear-gradient(180deg, rgba(201,189,173,0) 0%, rgba(201,189,173,0.3) 40%, rgba(201,189,173,0.7) 75%, rgba(201,189,173,1) 100%); }


/* featured spotlight minimal icon-stats row (author / downloads / date) */
.mph-spot-stats { display:flex; flex-wrap:wrap; gap:8px 18px; margin:0.15rem 0 1.15rem; }
.ms-stat { display:inline-flex; align-items:center; gap:6px; font-size:0.82rem; color:var(--text2); font-weight:600; }
.ms-stat svg { width:14px; height:14px; opacity:0.85; color:var(--accent); flex:none; }
.ms-stat span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px; }


/* featured: preview + title are links, plus a secondary Download button */
.mph-spot-prev { display:block; }
.mph-spot-title { color:inherit; text-decoration:none; }
.mph-spot-title:hover { color:var(--accent); }
.mph-spot-btns .b { text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.mph-spot-btns .dl { border:1px solid var(--border2); color:var(--text); }
.mph-spot-btns .dl:hover { border-color:var(--accent); color:var(--accent); }
.mph-spot-btns .dl svg { width:14px; height:14px; }


/* NexusMods-style minimal stat row below each game card (mods + downloads) */
.game-cell { display:flex; flex-direction:column; }
.game-cell > .game-card { width:100%; }
.game-stats { display:flex; align-items:center; gap:16px; padding:9px 3px 2px; }
.game-stats .gs { display:inline-flex; align-items:center; gap:5px; font-size:0.8rem; font-weight:600; color:var(--muted); }
.game-stats .gs svg { width:12px; height:12px; opacity:0.9; color:var(--text2); flex:none; }
/* the below-card row now carries the mod count, so drop the in-poster badge */
.game-card .game-count { display:none; }


/* ═══ Game Picker modal (NexusMods-style game browse in a modal) ═══ */
.mph-all { cursor:pointer; }
.gp-modal { position:fixed; inset:0; z-index:1200; display:none; align-items:center; justify-content:center; padding:min(4vh,30px) min(4vw,30px); }
.gp-modal.open { display:flex; }
.gp-scrim { position:absolute; inset:0; background:rgba(0,0,0,0.5); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
/* Frosted-glass box matching the hero About modal (translucent + blur), a touch
   more opaque so the content stays readable. Was a near-solid rgba(…,0.97). */
.gp-box { position:relative; z-index:1; width:min(1240px,97vw); height:min(90vh,940px); display:flex; flex-direction:column;
  background:rgba(16,16,19,0.78); border:1px solid rgba(255,255,255,0.12); border-radius:16px; overflow:hidden;
  -webkit-backdrop-filter:blur(22px) saturate(130%); backdrop-filter:blur(22px) saturate(130%);
  box-shadow:0 40px 90px rgba(0,0,0,0.6); }
html[data-theme="light"] .gp-box { background:rgba(216,207,193,0.86); border-color:rgba(0,0,0,0.10); }
.gp-head { display:flex; align-items:center; gap:12px; padding:10px 20px; border-bottom:1px solid var(--border); }
.gp-title { font-family:inherit; font-size:1.12rem; font-weight:800; letter-spacing:-0.005em; color:var(--text); display:flex; align-items:baseline; gap:10px; }
.gp-sub { font-size:0.8rem; font-weight:600; color:var(--muted); letter-spacing:0; }
.gp-close { margin-left:auto; width:30px; height:30px; border-radius:8px; background:rgba(255,255,255,0.06); border:1px solid var(--border2); color:var(--text); display:grid; place-items:center; cursor:pointer; transition:all .14s; }
.gp-close:hover { border-color:var(--accent); color:var(--accent); }
html[data-theme="light"] .gp-close { background:rgba(0,0,0,0.05); }
.gp-azbar { display:flex; flex-wrap:wrap; gap:3px; padding:9px 20px; border-bottom:1px solid var(--border); }
.gp-az { min-width:26px; height:26px; padding:0 6px; border-radius:7px; background:transparent; border:1px solid transparent; color:var(--text2); font-size:0.8rem; font-weight:700; cursor:pointer; transition:all .14s; }
.gp-az:hover { background:rgba(255,255,255,0.06); color:var(--text); }
html[data-theme="light"] .gp-az:hover { background:rgba(0,0,0,0.06); }
.gp-az.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.gp-body { flex:1; display:flex; min-height:0; }
.gp-sidebar { width:228px; flex:none; border-right:1px solid var(--border); padding:16px; overflow-y:auto; display:flex; flex-direction:column; gap:18px; }
.gp-side-label { display:block; font-size:0.7rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.gp-search { width:100%; padding:8px 11px; border-radius:9px; background:rgba(0,0,0,0.28); border:1px solid var(--border2); color:var(--text); font:inherit; font-size:0.85rem; }
.gp-search:focus { outline:none; border-color:var(--accent); }
html[data-theme="light"] .gp-search { background:rgba(255,255,255,0.5); }
.gp-genres { display:flex; flex-direction:column; gap:5px; }
.gp-genre { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 10px; border-radius:8px; background:transparent; border:1px solid var(--border); color:var(--text2); font-size:0.85rem; font-weight:600; cursor:pointer; transition:all .14s; text-align:left; }
.gp-genre:hover { border-color:var(--border2); color:var(--text); }
.gp-genre.active { background:var(--accent-dim); border-color:var(--accent); color:var(--accent); }
.gp-gcount { font-size:0.75rem; color:var(--muted); font-weight:700; }
.gp-genre.active .gp-gcount { color:var(--accent); }
.gp-reset { margin-top:auto; padding:8px; border-radius:8px; background:transparent; border:1px solid var(--border2); color:var(--text2); font:inherit; font-size:0.8rem; font-weight:600; cursor:pointer; }
.gp-reset:hover { border-color:var(--accent); color:var(--accent); }
.gp-main { flex:1; min-width:0; display:flex; flex-direction:column; overflow-y:auto; scrollbar-gutter:stable; }
.gp-toolbar { display:flex; align-items:center; gap:12px; padding:13px 20px 6px; position:sticky; top:0; z-index:2; background:rgba(18,18,21,0.98); }
html[data-theme="light"] .gp-toolbar { background:rgba(226,217,205,0.99); }
.gp-results { font-size:0.9rem; font-weight:700; color:var(--text); }
.gp-sortwrap { display:flex; align-items:center; gap:7px; font-size:0.8rem; color:var(--muted); }
.gp-sort { -webkit-appearance:none; appearance:none; padding:6px 30px 6px 11px; border-radius:8px;
  background-color:rgba(0,0,0,0.28); border:1px solid var(--border2); color:var(--text); font:inherit; font-size:0.82rem; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23999'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='6%209%2012%2015%2018%209'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 9px center; background-size:11px; }
.gp-sort:focus { outline:none; border-color:var(--accent); }
html[data-theme="light"] .gp-sort { background-color:rgba(255,255,255,0.5); }
.gp-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; padding:12px 20px 18px; }
.gp-card { display:flex; flex-direction:column; text-decoration:none; color:inherit; }
.gp-card-art { aspect-ratio:2/3; border-radius:12px; background:#181820 center/cover no-repeat; border:1px solid var(--border); transition:transform .18s, border-color .18s, box-shadow .18s; }
.gp-card:hover .gp-card-art { transform:translateY(-4px); border-color:var(--accent); box-shadow:0 12px 26px rgba(0,0,0,0.4); }
html[data-theme="light"] .gp-card:hover .gp-card-art { box-shadow:0 10px 22px rgba(0,0,0,0.16); }
.gp-card-name { margin:9px 2px 4px; font-weight:700; font-size:0.9rem; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gp-card-stats { display:flex; align-items:center; gap:11px; padding:0 2px; }
.gp-card-stats span { display:inline-flex; align-items:center; gap:4px; font-size:0.74rem; font-weight:600; color:var(--muted); }
.gp-card-stats svg { width:11px; height:11px; opacity:0.85; color:var(--text2); flex:none; }
.gp-empty { grid-column:1/-1; padding:40px; text-align:center; color:var(--muted); }
.gp-pagination { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; padding:4px 20px 22px; }
.gp-pg { min-width:34px; height:34px; padding:0 10px; border-radius:8px; background:transparent; border:1px solid var(--border2); color:var(--text2); font:inherit; font-size:0.85rem; font-weight:600; cursor:pointer; transition:all .14s; }
.gp-pg:hover:not(:disabled){ border-color:var(--accent); color:var(--accent); }
.gp-pg.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.gp-pg:disabled { opacity:0.4; cursor:default; }
@media (max-width:720px){
  /* Stacking .gp-body alone wasn't enough: .gp-sidebar and .gp-main each kept
     their OWN overflow-y:auto, so the filters held their full natural height and
     the games grid was left with a ~150px scrap to scroll in. On a phone the
     whole body must be ONE scroller, so the filters simply scroll away and the
     grid gets the modal's full height. .gp-toolbar's position:sticky now resolves
     against .gp-body, so the sort/view bar still pins while the grid scrolls. */
  .gp-body { flex-direction:column; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .gp-sidebar { width:auto; flex:none; overflow:visible; border-right:none; border-bottom:1px solid var(--border); }
  .gp-main { flex:none; overflow:visible; }
  .gp-reset { margin-top:0; }
  /* 26 letters wrapped to 3 rows ate ~120px of a phone modal permanently — the
     azbar is outside .gp-body so it can't scroll away. One scrollable row. */
  .gp-azbar { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .gp-az { flex:none; }
}


/* #1 Game Picker pop-in (matches skins/changelog modals) */
@keyframes gpScrimIn { from { opacity:0; } to { opacity:1; } }
.gp-modal.open .gp-scrim { animation:gpScrimIn .25s ease both; }
.gp-modal.open .gp-box { animation:skinsPopIn 0.38s cubic-bezier(0.34,1.56,0.64,1) both; }
/* #2 responsive columns as the modal narrows */
@media (max-width:1000px){ .gp-grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:760px){ .gp-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .gp-grid{ grid-template-columns:repeat(2,1fr); } }
/* #6 grid/list view toggle */
.gp-viewtoggle { margin-left:auto; display:flex; gap:3px; background:rgba(0,0,0,0.22); border:1px solid var(--border2); border-radius:9px; padding:2px; }
html[data-theme="light"] .gp-viewtoggle { background:rgba(255,255,255,0.4); }
.gp-viewbtn { width:30px; height:28px; border:none; background:transparent; color:var(--muted); border-radius:7px; display:grid; place-items:center; cursor:pointer; transition:all .14s; }
.gp-viewbtn:hover { color:var(--text); }
.gp-viewbtn.active { background:var(--accent); color:#fff; }
/* #6 list view rows */
.gp-list { display:flex; flex-direction:column; gap:8px; padding:12px 20px 18px; }
.gp-row { display:flex; align-items:center; gap:14px; padding:8px 12px; border-radius:11px; background:rgba(255,255,255,0.03); border:1px solid var(--border); text-decoration:none; color:inherit; transition:border-color .15s, background .15s; }
.gp-row:hover { border-color:var(--accent); background:rgba(var(--accent-rgb),0.06); }
html[data-theme="light"] .gp-row { background:rgba(0,0,0,0.03); }
.gp-row-art { width:44px; height:60px; border-radius:7px; background:#181820 center/cover no-repeat; flex:none; border:1px solid var(--border); }
.gp-row-main { min-width:0; flex:1; }
.gp-row-name { font-weight:700; font-size:0.95rem; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gp-row-sub { font-size:0.78rem; color:var(--muted); margin-top:2px; }
.gp-row-stats { display:flex; align-items:center; gap:16px; flex:none; }
.gp-row-stats span { display:inline-flex; align-items:center; gap:5px; font-size:0.8rem; font-weight:600; color:var(--muted); }
.gp-row-stats svg { width:12px; height:12px; opacity:0.85; color:var(--text2); flex:none; }
@media (max-width:560px){ .gp-row-stats { gap:10px; } }
/* #5 sort option colors */
.gp-sort option { background:#1a1a1e; color:#eee; }
html[data-theme="light"] .gp-sort option { background:#e0d7cb; color:#17140f; }


/* ══════════════════ HOMEPAGE REDESIGN v2 — cinematic hero + top nav (2026-07-06) ══════════════════
   Home-only. The hero keeps DARK art + scrim in BOTH themes (same precedent as the
   game heroes with cover images), so text inside it uses fixed light colors. */

/* — home nav: reuses the shared header shell; home-bg's `position:relative` on
   body>header would kill stickiness, so re-assert it — */
body.home-bg > header#home-nav { position:sticky; top:0; z-index:100; }
#home-nav .nav-inner { max-width:1560px; }
/* Logo + Game Picker button share the left grid column of the home nav. */
#home-nav .home-nav-left { grid-column:1; display:flex; align-items:center; gap:16px; min-width:0; }
.nav-gamepicker { display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:9px;
  background:rgba(255,255,255,0.05); border:1px solid var(--border2); color:var(--text2);
  font:inherit; font-size:0.82rem; font-weight:600; cursor:pointer; white-space:nowrap;
  transition:background .18s, border-color .18s, color .18s; }
.nav-gamepicker:hover { background:var(--accent-dim); border-color:var(--accent); color:var(--accent); }
.nav-gamepicker svg { flex:none; }
html[data-theme="light"] .nav-gamepicker { background:rgba(0,0,0,0.04); }
@media (max-width:720px){ .nav-gamepicker span { display:none; } .nav-gamepicker { padding:7px 9px; } }
#home-nav nav .theme-toggle { margin-left:10px; }

/* — hero shell — overflow stays VISIBLE so the search dropdown can extend past
   the hero's bottom edge; only the bg layer clips (contains the Ken Burns zoom) */
.mph-hero { position:relative; isolation:isolate; border-bottom:1px solid var(--border);
  min-height:520px; display:flex; align-items:center; }
body.home-bg > section.mph-hero { z-index:5; }  /* above main, so the dropdown wins */
.mph-hero-bg { position:absolute; inset:0; z-index:-2; background:#0a0a0c; overflow:hidden; }
.mph-hero-slide { position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.4s ease; transform:scale(1.05); animation:mphKb 20s ease-in-out infinite alternate; }
.mph-hero-slide.on { opacity:1; }
@keyframes mphKb { from { transform:scale(1.04); } to { transform:scale(1.13); } }
@media (prefers-reduced-motion:reduce){ .mph-hero-slide { animation:none; transform:none; transition:none; } }
.mph-hero-scrim { position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(75% 90% at 50% 108%, rgba(var(--accent-rgb),0.14), transparent 55%),
    radial-gradient(120% 120% at 50% 50%, rgba(7,7,7,0.32), rgba(7,7,7,0.80) 78%),
    linear-gradient(0deg, rgba(7,7,7,0.94) 0%, rgba(7,7,7,0.28) 26%, rgba(7,7,7,0.28) 78%, rgba(7,7,7,0.62) 100%); }
.mph-hero-in { max-width:860px; width:100%; margin:0 auto; padding:3.6rem 1.4rem 3rem;
  display:flex; flex-direction:column; align-items:center; text-align:center; }

/* — eyebrow / headline / sub — */
.mph-eyebrow { display:inline-flex; align-items:center; gap:9px; font-size:0.78rem; font-weight:600; letter-spacing:0.13em;
  text-transform:uppercase; color:var(--accent2); background:rgba(var(--accent-rgb),0.10);
  border:1px solid rgba(var(--accent-rgb),0.30); padding:6px 14px; border-radius:100px; margin-bottom:1.3rem;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.mph-eyebrow .pulse { width:7px; height:7px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 10px 1px var(--accent-glow); animation:mphPulse 2s infinite; }
@keyframes mphPulse { 0%,100% { opacity:1; } 50% { opacity:0.35; } }
.mph-hero h1 { font-family:var(--font-display); font-weight:800; text-transform:uppercase; line-height:1.02;
  letter-spacing:0.012em; font-size:clamp(2rem,4.6vw,3.3rem); margin:0 0 1.5rem;
  color:#f0ede8; text-shadow:0 2px 28px rgba(0,0,0,0.55); }
.mph-hero h1 .g { color:var(--accent); text-shadow:0 0 36px var(--accent-glow); }
.mph-sub { font-size:clamp(0.98rem,1.4vw,1.15rem); color:#c9c0b4; max-width:56ch; margin:0 0 1.9rem; line-height:1.6; }

/* — hero search + results dropdown (searches the aggregated cross-game list) — */
.mph-search { position:relative; width:100%; max-width:720px; margin:0 auto 1rem; }
.mph-search > svg { position:absolute; left:18px; top:50%; transform:translateY(-50%); color:#8d8579; pointer-events:none; }
.mph-search input { width:100%; height:48px; border-radius:13px; border:1px solid rgba(255,255,255,0.14);
  background:rgba(12,12,14,0.72); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  color:#f0ede8; padding:0 18px 0 50px; font:inherit; font-size:1rem; transition:border-color .18s, box-shadow .18s; }
.mph-search input::placeholder { color:#8d8579; }
.mph-search input:focus { outline:none; border-color:rgba(var(--accent-rgb),0.65); box-shadow:0 0 0 4px rgba(var(--accent-rgb),0.14); }
/* Landing hero search dropdown — frosted glass (matches the nav-search dropdown),
   left-aligned rows: thumb · [title + version + NSFW / badge + type · author] · downloads */
.mph-search-dd { position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:30; border-radius:14px; text-align:left;
  background:rgba(14,14,16,0.72); border:1px solid var(--border2); box-shadow:0 24px 60px rgba(0,0,0,0.55);
  backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  padding:6px; max-height:min(430px,62vh); overflow-y:auto; scrollbar-width:none; -ms-overflow-style:none; }
.mph-search-dd::-webkit-scrollbar { display:none; }
.mph-search-dd[hidden] { display:none; }
.mps-row { display:flex; align-items:center; gap:12px; padding:8px 12px; border-radius:10px; text-decoration:none; color:#f0ede8; transition:background .14s; }
.mps-row:hover { background:rgba(255,255,255,0.07); }
.mps-thumb { width:54px; height:36px; border-radius:7px; background:#181820 center/cover no-repeat; flex:none; border:1px solid rgba(255,255,255,0.08); }
.mps-main { min-width:0; flex:1; display:flex; flex-direction:column; align-items:flex-start; gap:3px; }
.mps-titlerow { display:flex; align-items:center; gap:7px; min-width:0; max-width:100%; }
.mps-ttl { min-width:0; flex:0 1 auto; font-weight:700; font-size:0.9rem; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mps-ver { flex:none; font-family:var(--font-display,monospace); font-weight:700; font-size:0.6rem; letter-spacing:.04em; color:var(--accent); background:rgba(var(--accent-rgb),0.12); border:1px solid rgba(var(--accent-rgb),0.42); border-radius:5px; padding:1px 6px; line-height:1.45; }
.mps-nsfw { flex:none; font-weight:800; font-size:0.55rem; letter-spacing:.07em; color:#fff; background:#c8202e; border-radius:4px; padding:2px 5px; }
.mps-sub { display:flex; align-items:center; gap:7px; font-size:0.73rem; color:var(--muted); white-space:nowrap; overflow:hidden; min-width:0; max-width:100%; }
.mps-badge { flex:none; display:inline-flex; align-items:center; font-size:0.58rem; font-weight:800; text-transform:uppercase;
  padding:2px 7px; border-radius:6px; letter-spacing:.02em; background:rgba(0,0,0,0.42); }
html[data-theme="light"] .mps-badge { background:rgba(0,0,0,0.10); }
.mps-type { overflow:hidden; text-overflow:ellipsis; }
.mps-dl { display:inline-flex; align-items:center; gap:4px; margin-left:auto; font-size:0.78rem; font-weight:700; color:var(--muted); flex:none; }
.mps-empty { padding:16px; text-align:center; color:var(--muted); font-size:0.85rem; }

/* — quick-jump game chips — */
.mph-chips { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 1.9rem; }
.mph-chips .lbl { font-size:0.8rem; color:#8d8579; margin-right:2px; }
.mph-chip { display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:100px; font-size:0.84rem; font-weight:600;
  background:rgba(255,255,255,0.055); border:1px solid rgba(255,255,255,0.13); color:#d6cec2; text-decoration:none;
  transition:color .16s, border-color .16s, background .16s; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.mph-chip:hover { color:#fff; border-color:rgba(var(--accent-rgb),0.55); background:rgba(var(--accent-rgb),0.12); }
.mph-chip .gd { width:8px; height:8px; border-radius:3px; flex:none; }

/* — hero stats: separate glass cards, centered BETWEEN the slogan and the search — */
.mph-hero-stats { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:0 auto 1.4rem; width:100%; max-width:720px; }
.mph-hero-stats .mph-stat { flex:1 1 0; display:flex; align-items:center; gap:12px; text-align:left; min-width:150px;
  background:rgba(12,12,14,0.55); border:1px solid rgba(255,255,255,0.11); border-radius:14px;
  padding:0.65rem 1.05rem; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 10px 34px -16px rgba(0,0,0,0.8); }
html[data-theme="light"] .mph-hero-stats .mph-stat { background:rgba(12,12,14,0.55); }  /* stays dark over the hero art */
.mph-hero-stats .mph-stat .ic { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; flex:none;
  background:rgba(var(--accent-rgb),0.14); color:var(--accent2); }
.mph-hero-stats .mph-stat > div:not(.ic) { display:flex; flex-direction:column; justify-content:center; gap:2px; }
.mph-hero-stats .mph-stat strong { display:block; font-family:var(--font-display); font-size:1.45rem; font-weight:700; color:#fff; line-height:1; }
.mph-hero-stats .mph-stat span { font-size:0.62rem; text-transform:uppercase; letter-spacing:0.09em; color:#9a927f; line-height:1; }

/* — genre tag on the poster game cards — */
.game-genre-tag { position:absolute; top:10px; left:10px; z-index:3; font-size:0.62rem; font-weight:700; text-transform:uppercase;
  letter-spacing:0.08em; padding:4px 9px; border-radius:6px; color:#e8e2d8; background:rgba(7,7,7,0.55);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,0.14); pointer-events:none; }

/* — home section headers: bigger, more cinematic (scoped so game pages keep theirs) — */
body[data-page="games"] .section-title { font-size:1.45rem; letter-spacing:0.02em; }
body[data-page="games"] .section-title-bar { width:4px; height:24px;
  background:linear-gradient(180deg,var(--accent2),var(--accent)); box-shadow:0 0 14px -2px var(--accent-glow); }

/* — strip + featured polish (home) — */
body[data-page="games"] .hcard:hover { transform:translateY(-5px); border-color:var(--accent);
  box-shadow:0 16px 36px rgba(0,0,0,0.45), 0 0 0 1px var(--accent), 0 0 22px -4px var(--accent-glow); }
body[data-page="games"] .hcard-new { background:linear-gradient(180deg,var(--accent2),var(--accent));
  box-shadow:0 3px 10px -2px var(--accent-glow); }
body[data-page="games"] .mph-spot-info h3 { font-family:var(--font-display); text-transform:uppercase;
  font-size:1.9rem; letter-spacing:0.01em; line-height:1.02; }
body[data-page="games"] .mph-spot-info .chip { background:rgba(var(--accent-rgb),0.10); color:var(--accent2);
  border:1px solid rgba(var(--accent-rgb),0.32); text-transform:uppercase; letter-spacing:0.09em; }
body[data-page="games"] .mph-spot-prev { position:relative; }
body[data-page="games"] .mph-spot-prev::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, transparent 60%, rgba(14,14,14,0.55) 100%); }
html[data-theme="light"] body[data-page="games"] .mph-spot-prev::after {
  background:linear-gradient(90deg, transparent 60%, rgba(214,203,189,0.5) 100%); }

/* — mobile — */
@media (max-width:720px){
  .mph-hero { min-height:0; }
  .mph-hero-in { padding:3rem 1.2rem 2.6rem; }
  .mph-hero h1 { font-size:clamp(2.3rem,11vw,3rem); }
  .mph-hero-stats { gap:8px; }
  .mph-hero-stats .mph-stat { flex:1 1 calc(50% - 8px); min-width:132px; }
  #home-nav nav a { padding:7px 10px; }
}

/* — footer legal bar (© + Copyright / ToS / Privacy → /legal) — */
.footer-legal { display:flex; align-items:center; justify-content:space-between; gap:10px 18px; flex-wrap:wrap;
  margin-top:14px; padding-top:13px; border-top:1px solid var(--border); font-size:0.76rem; color:var(--muted); }
.footer-legal-links { display:inline-flex; align-items:center; gap:14px; }
.footer-legal-links a { color:var(--muted); transition:color .15s; }
.footer-legal-links a:hover { color:var(--accent); }

/* ══════════ HOME POLISH SLICE (2026-07-06, hero5): trust band · dice · skeletons
   · NSFW groundwork · per-game hover accents ══════════ */

/* — search action buttons: dice (random mod) + go (accent search) — */
body[data-page="games"] .mph-search input { padding-right:108px; }
.mph-dice { position:absolute; right:56px; top:7px; bottom:7px; width:42px; display:grid; place-items:center;
  border-radius:10px; cursor:pointer; color:var(--accent2); background:rgba(var(--accent-rgb),0.13);
  border:1px solid rgba(var(--accent-rgb),0.32); transition:background .15s, color .15s, box-shadow .15s; }
.mph-dice:hover { background:linear-gradient(180deg,var(--accent2),var(--accent)); color:#1a0c02;
  border-color:transparent; box-shadow:0 8px 22px -8px var(--accent-glow); }
.mph-go { position:absolute; right:7px; top:7px; bottom:7px; width:42px; display:grid; place-items:center;
  border:none; border-radius:10px; cursor:pointer; color:#1a0c02;
  background:linear-gradient(180deg,var(--accent2),var(--accent));
  box-shadow:0 8px 22px -8px var(--accent-glow); transition:transform .15s, box-shadow .15s; }
.mph-go:hover { transform:translateY(-1px); box-shadow:0 12px 28px -8px var(--accent-glow); }

/* — "How the Palace works" trust band — */
.mph-trust { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:0.4rem 0 2rem; }
@media (max-width:980px){ .mph-trust { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .mph-trust { grid-template-columns:1fr; } }
.trust-card { display:flex; gap:13px; align-items:flex-start; padding:15px 17px; border-radius:14px;
  border:1px solid var(--border); background:rgba(14,14,14,0.55); backdrop-filter:blur(8px);
  color:inherit; text-decoration:none; transition:border-color .16s, transform .16s; }
html[data-theme="light"] .trust-card { background:rgba(214,203,189,0.55); }
a.trust-card:hover { border-color:var(--accent); transform:translateY(-3px); }
.trust-card .ic { width:38px; height:38px; border-radius:10px; flex:none; display:grid; place-items:center;
  background:rgba(var(--accent-rgb),0.13); color:var(--accent2); }
.trust-card h4 { margin:0; font-size:0.92rem; font-weight:700; color:var(--text); }
.trust-card p { margin:2px 0 0; font-size:0.78rem; color:var(--muted); line-height:1.5; }

/* — strip skeletons (shimmer while game JSONs load) — */
.hcard-skel { pointer-events:none; }
.hcard-skel .hs-prev { height:140px; background:var(--bg3); }
.hcard-skel .hs-l1, .hcard-skel .hs-l2 { height:11px; border-radius:5px; background:var(--bg3); margin:10px 12px 0; }
.hcard-skel .hs-l2 { width:55%; margin-bottom:14px; }
.hcard-skel .hs-prev, .hcard-skel .hs-l1, .hcard-skel .hs-l2 { position:relative; overflow:hidden; }
@keyframes mpShimmer { from { transform:translateX(-100%); } to { transform:translateX(100%); } }
.hcard-skel .hs-prev::after, .hcard-skel .hs-l1::after, .hcard-skel .hs-l2::after { content:"";
  position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.055),transparent);
  animation:mpShimmer 1.2s infinite; }
html[data-theme="light"] .hcard-skel .hs-prev::after, html[data-theme="light"] .hcard-skel .hs-l1::after,
html[data-theme="light"] .hcard-skel .hs-l2::after { background:linear-gradient(90deg,transparent,rgba(0,0,0,0.05),transparent); }
@media (prefers-reduced-motion:reduce){ .hcard-skel .hs-prev::after, .hcard-skel .hs-l1::after, .hcard-skel .hs-l2::after { animation:none; } }

/* — NSFW: blurred preview + tag; hover reveals; toggle lives in the footer — */
.hcard-prev.is-nsfw::after, .mph-spot-prev.is-nsfw::after { content:"NSFW"; position:absolute; inset:0; z-index:3;
  display:grid; place-items:center; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  background:rgba(7,7,7,0.35); color:#fff; font-weight:800; font-size:0.72rem; letter-spacing:0.14em;
  border-radius:inherit; transition:opacity .25s; pointer-events:none; }
.hcard:hover .hcard-prev.is-nsfw::after, .mph-spot-prev.is-nsfw:hover::after { opacity:0; }
.theme-toggle.tt-on { background:rgba(var(--accent-rgb),0.25); border-color:rgba(var(--accent-rgb),0.5); }
.theme-toggle.tt-on .theme-toggle-knob { transform:translateX(18px); background:var(--accent); }
/* the NSFW toggle must NOT follow the light-theme knob rule (its on-state is .tt-on, not the theme) */
html[data-theme="light"] #nsfw-toggle:not(.tt-on),
html[data-theme="light"] #nsfw-blur-toggle:not(.tt-on),
html[data-theme="light"] #nsfw-blur-side:not(.tt-on) { background:var(--bg3) !important; border-color:var(--border2) !important; }
html[data-theme="light"] #nsfw-toggle:not(.tt-on) .theme-toggle-knob,
html[data-theme="light"] #nsfw-blur-toggle:not(.tt-on) .theme-toggle-knob,
html[data-theme="light"] #nsfw-blur-side:not(.tt-on) .theme-toggle-knob { transform:none !important; background:var(--muted) !important; }

/* — per-game accent on game-tile hover: each .game-card[data-game] already carries
   its official --accent override (the per-game accent block), so plain var(--accent)
   re-themes per card — AC orange, BeamNG amber, each RE its own hue — */
body[data-page="games"] .game-card:not(.soon):hover { border-color:var(--accent);
  box-shadow:0 16px 38px rgba(0,0,0,0.5), 0 0 24px -6px var(--accent); }

/* ══════════ V3 FULL PORT (2026-07-06, hero6): game dock · download charts duo ══════════ */

/* — hero game dock: one glass bar, poster thumbs + names, same width as search — */
/* Bookmarked-games dock — slim, minimal, sized to its content (hidden when empty) */
.mph-dock[hidden] { display:none; }
.mph-dock { display:flex; align-items:stretch; width:fit-content; max-width:100%; margin:2px auto 0; border-radius:12px;
  border:1px solid rgba(255,255,255,0.09); background:rgba(10,10,12,0.42); backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px); overflow:hidden; box-shadow:0 12px 34px -18px rgba(0,0,0,0.75); }
.mph-dock .lbl { display:flex; align-items:center; padding:6px 13px; font-size:0.58rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.13em; color:#8d8579; border-right:1px solid rgba(255,255,255,0.06); flex:none; }
.mph-dock a { position:relative; flex:0 0 auto; min-width:0; display:flex; align-items:center; justify-content:center;
  gap:8px; padding:6px 13px; font-size:0.8rem; font-weight:600; color:#d6cec2; text-decoration:none;
  transition:background .15s, color .15s; }
.mph-dock a+a { border-left:1px solid rgba(255,255,255,0.07); }
.mph-dock a:hover { background:rgba(var(--accent-rgb),0.12); color:#fff; }
.mph-dock a::after { content:""; position:absolute; left:12px; right:12px; bottom:0; height:2px;
  border-radius:2px 2px 0 0; background:var(--accent); box-shadow:0 0 8px var(--accent-glow);
  transform:scaleX(0); transition:transform .2s; }
.mph-dock a:hover::after { transform:scaleX(1); }
.mph-dock .pt { width:20px; height:26px; border-radius:4px; background:#181820 center/cover no-repeat;
  flex:none; box-shadow:0 0 0 1px rgba(255,255,255,0.10); }
.mph-dock .nm { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Game-card bookmark toggle (top-right of the poster) */
.game-bm-btn { position:absolute; top:8px; right:8px; z-index:4; width:30px; height:30px; display:grid; place-items:center;
  border-radius:8px; border:1px solid rgba(255,255,255,0.15); background:rgba(8,8,10,0.5); color:rgba(255,255,255,0.78);
  cursor:pointer; opacity:0; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:opacity .16s, background .16s, color .16s, border-color .16s, transform .16s; }
.game-card:hover .game-bm-btn, .game-bm-btn.on, .game-bm-btn:focus-visible { opacity:1; }
.game-bm-btn:hover { background:rgba(8,8,10,0.72); color:#fff; border-color:rgba(255,255,255,0.3); transform:translateY(-1px); }
.game-bm-btn.on { color:var(--accent); border-color:rgba(var(--accent-rgb),0.55); background:rgba(var(--accent-rgb),0.16); }
.game-bm-btn.on svg { fill:currentColor; }
@media (max-width:640px){
  .mph-dock .lbl { display:none; }
  .mph-dock a { gap:0; padding:8px 6px; }
  .mph-dock .nm { display:none; }
  .mph-dock .pt { width:28px; height:38px; }
}

/* — download charts: leaderboard + featured, equal-height panels — */
.mph-duo { display:grid; grid-template-columns:1.08fr 0.92fr; gap:20px; align-items:stretch; }
.mph-duo.solo { grid-template-columns:1fr; }
@media (max-width:980px){ .mph-duo { grid-template-columns:1fr; } }
.mph-panel { display:flex; flex-direction:column; background:rgba(14,14,14,0.6); border:1px solid var(--border);
  border-radius:16px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); overflow:hidden; }
html[data-theme="light"] .mph-panel { background:rgba(214,203,189,0.62); }
.mph-panel-head { display:flex; align-items:center; gap:11px; padding:15px 18px 12px; border-bottom:1px solid var(--border); }
.mph-panel-head .bar { width:4px; height:20px; border-radius:3px; flex:none;
  background:linear-gradient(180deg,var(--accent2),var(--accent)); box-shadow:0 0 12px -2px var(--accent-glow); }
.mph-panel-head h3 { margin:0; font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:1.15rem; letter-spacing:0.03em; color:var(--text); }
.mph-panel-head .hint { margin-left:auto; font-size:0.74rem; color:var(--muted); }
/* leaderboard rows: rank / thumb / title / downloads, proportional fill bars */
.mph-lb { display:flex; flex-direction:column; flex:1; }
.lb-row { position:relative; flex:1 1 auto; display:grid; grid-template-columns:38px 80px 1fr auto; gap:12px;
  align-items:center; padding:10px 16px; overflow:hidden; text-decoration:none; color:inherit; transition:background .14s; }
.lb-row:not(:last-child){ border-bottom:1px solid var(--border); }
.lb-row:hover { background:rgba(var(--accent-rgb),0.07); }
.lb-fill { position:absolute; left:0; top:0; bottom:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(var(--accent-rgb),0.10), transparent); }
.lb-rank { position:relative; font-family:var(--font-display); font-weight:800; font-size:1.35rem;
  color:var(--muted); text-align:center; }
.lb-row:nth-child(1) .lb-rank { color:var(--accent); text-shadow:0 0 14px var(--accent-glow); }
.lb-row:nth-child(2) .lb-rank, .lb-row:nth-child(3) .lb-rank { color:var(--text2); }
.lb-thumb { position:relative; width:80px; height:48px; border-radius:8px; background:#181820 center/cover no-repeat;
  border:1px solid var(--border); overflow:hidden; }
html[data-theme="light"] .lb-thumb { background-color:#b7ab9b; }
.lb-thumb.is-nsfw::after { content:""; position:absolute; inset:0; backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px); background:rgba(7,7,7,0.3); }
.lb-main { position:relative; min-width:0; }
.lb-ttl { display:block; font-weight:700; font-size:0.9rem; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lb-sub { display:flex; align-items:center; gap:8px; font-size:0.72rem; color:var(--muted); margin-top:2px;
  white-space:nowrap; overflow:hidden; }
.lb-badge { display:inline-flex; align-items:center; font-size:0.56rem; font-weight:800; text-transform:uppercase;
  padding:1px 7px; border-radius:6px; flex:none; letter-spacing:.02em; background:rgba(0,0,0,0.42); }
html[data-theme="light"] .lb-badge { background:rgba(0,0,0,0.10); }
.lb-dl { position:relative; display:inline-flex; align-items:center; gap:5px; font-weight:700; font-size:0.82rem;
  color:var(--text2); flex:none; }
.lb-dl svg { color:var(--accent2); }
@media (max-width:560px){ .lb-row { grid-template-columns:30px 64px 1fr auto; gap:9px; padding:9px 12px; }
  .lb-thumb { width:64px; height:40px; } }
/* featured panel: art on top (flexes to equalize height), buttons bottom-right */
.mph-feat { display:flex; flex-direction:column; flex:1; }
.mph-feat-art { position:relative; display:block; flex:1 1 auto; min-height:250px;
  background:#181820 center/cover no-repeat; }
html[data-theme="light"] .mph-feat-art { background-color:#b7ab9b; }
.mph-feat-art::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg, rgba(14,14,14,0.85), transparent 50%); }
html[data-theme="light"] .mph-feat-art::after { background:linear-gradient(0deg, rgba(214,203,189,0.8), transparent 50%); }
.mph-feat-art .chip { position:absolute; top:12px; left:12px; z-index:2; font-size:0.64rem; font-weight:700;
  letter-spacing:0.09em; text-transform:uppercase; color:var(--accent2); background:rgba(var(--accent-rgb),0.12);
  border:1px solid rgba(var(--accent-rgb),0.35); padding:5px 12px; border-radius:100px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
/* (old center-text + hover-reveal removed — the NSFW pill + opt-in blur handle this now) */
.mph-feat-body { display:flex; flex-direction:column; padding:16px 18px 18px; }
.mph-feat-body h3 { margin:0 0 0.45rem; font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:1.6rem; line-height:1.02; letter-spacing:0.01em; }
.mph-feat-body p { margin:0 0 0.9rem; color:var(--text2); font-size:0.88rem; line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.mph-feat-btns { justify-content:flex-end; margin-top:auto; }

/* — home footer: link columns above the toggles row (v3 footer) — */
.mph-footgrid { max-width:1200px; margin:0 auto 1.4rem; padding-bottom:1.4rem; border-bottom:1px solid var(--border);
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:28px; }
@media (max-width:860px){ .mph-footgrid { grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .mph-footgrid { grid-template-columns:1fr; } }
.fg-brand .bt { font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:1.3rem; color:var(--text); }
.fg-brand .bt em { font-style:normal; color:var(--accent); }
.fg-brand p { margin:8px 0 0; color:var(--muted); font-size:0.82rem; line-height:1.6; max-width:34ch; }
.fg-col h5 { margin:0 0 10px; font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:0.9rem; letter-spacing:0.06em; color:var(--text2); }
.fg-col a { display:block; color:var(--muted); font-size:0.84rem; padding:3px 0; transition:color .14s; }
.fg-col a:hover { color:var(--accent); }

/* — home FAQ: subtle centered accordion (v3 design; no outer collapse box) — */
body[data-page="games"] .faq-home { max-width:920px; scroll-margin-top:90px; }
.faq-head2 { text-align:center; margin-bottom:18px; }
.faq-head2 h2 { margin:0; font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:1.35rem; letter-spacing:0.03em; color:var(--text2); }
.faq-head2 p { margin:2px 0 0; color:var(--muted); font-size:0.82rem; }
body[data-page="games"] .faq-item { border:1px solid var(--border); border-radius:12px;
  background:rgba(14,14,14,0.5); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  margin-bottom:9px; overflow:hidden; transition:border-color .18s; }
html[data-theme="light"] body[data-page="games"] .faq-item { background:rgba(214,203,189,0.55); }
body[data-page="games"] .faq-item[open] { border-color:rgba(var(--accent-rgb),0.4); }
body[data-page="games"] .faq-item summary { padding:14px 18px; font-weight:600; font-size:0.93rem;
  color:var(--text2); background:transparent; transition:color .15s; }
body[data-page="games"] .faq-item summary:hover { color:var(--text); background:transparent; }
body[data-page="games"] .faq-item[open] summary { color:var(--accent); }
body[data-page="games"] .faq-item .faq-answer { padding:0 18px 15px; }

/* — v3 fresh cards: full-art overlay tiles (title rides a scrim on the image) — */
.fcard { position:relative; flex:0 0 300px; aspect-ratio:16/10; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--border); background:rgba(14,14,14,0.7); display:block; text-decoration:none; color:inherit;
  transition:transform .2s, border-color .2s, box-shadow .2s; scroll-snap-align:start; }
.fcard:hover { transform:translateY(-5px); border-color:var(--fc-accent, var(--accent));
  box-shadow:0 18px 40px -16px rgba(0,0,0,0.9), 0 0 0 1px var(--fc-accent, var(--accent)), 0 0 22px -4px color-mix(in srgb, var(--fc-accent, var(--accent)) 42%, transparent); }
.fcard-art { position:absolute; inset:0; background:#181820 center/cover no-repeat; transition:transform .5s ease; }
html[data-theme="light"] .fcard-art { background-color:#b7ab9b; }
.fcard:hover .fcard-art { transform:scale(1.06); }
.fcard::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg, rgba(7,7,7,0.94) 0%, rgba(7,7,7,0.3) 46%, transparent 66%); }
.fcard-top { position:absolute; top:10px; left:10px; right:10px; z-index:2; display:flex;
  justify-content:flex-start; align-items:center; gap:6px; pointer-events:none; }
/* NSFW pill now rides inline to the RIGHT of the game badge (was stacked below) */
.fcard-top .nsfw-pill { position:static; top:auto; left:auto; }
/* Latest-Mods sort pills (NexusMods-style: one panel, re-sorted in place) */
.latest-pills { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 15px; }
.lpill { display:inline-flex; align-items:center; gap:6px; padding:7px 16px; border-radius:99px;
  background:rgba(255,255,255,0.05); border:1px solid var(--border2); color:var(--text2);
  font:inherit; font-size:0.82rem; font-weight:700; cursor:pointer; white-space:nowrap;
  transition:background .16s, border-color .16s, color .16s; }
.lpill:hover { border-color:var(--accent); color:var(--text); }
.lpill.active { background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 4px 14px -4px var(--accent-glow); }
.lpill svg { flex:none; }
html[data-theme="light"] .lpill { background:rgba(0,0,0,0.04); }
html[data-theme="light"] .lpill.active { color:#fff; }

.fcard-top .fnew { margin-left:auto; }
/* Flag pill — matches the per-game home Trending/Updated badge (translucent
   dark chip + icon). Orange "New" on Trending, blue "Updated" on Recently Updated. */
.fcard-top .fflag { margin-left:auto; }
.fflag { display:inline-flex; align-items:center; gap:3px; font-size:0.6rem; font-weight:800;
  letter-spacing:0.05em; text-transform:uppercase; color:#ff8a3d; background:rgba(0,0,0,0.52);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); border-radius:6px; padding:3px 7px;
  box-shadow:0 2px 8px -2px rgba(0,0,0,0.5); }
.fflag svg { flex:none; }
.fflag-upd { color:#5aa9ff; }
html[data-theme="light"] .fflag { background:rgba(0,0,0,0.62); }
/* Game badge = frosted chip carrying the game's accent as TEXT (color set inline),
   matching the Updated/New flag pills. Was a solid, over-intense accent fill. */
.fbadge { display:inline-flex; align-items:center; font-size:0.6rem; font-weight:800; letter-spacing:0.04em; text-transform:uppercase;
  padding:3px 8px; border-radius:6px; background:rgba(0,0,0,0.52); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  box-shadow:0 2px 8px -2px rgba(0,0,0,0.5); max-width:60%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
html[data-theme="light"] .fbadge { background:rgba(0,0,0,0.62); }
.fnew { font-size:0.6rem; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; color:#1a0c02;
  padding:3px 9px; border-radius:20px; background:linear-gradient(180deg,var(--accent2),var(--accent));
  box-shadow:0 3px 12px -2px var(--accent-glow); }
.fcard-body { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:12px 14px; }
.fcard-ttl { font-weight:700; font-size:0.96rem; line-height:1.22; color:#fff;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.fcard-meta { display:flex; align-items:center; gap:8px; margin-top:5px; font-size:0.74rem; color:rgba(255,255,255,0.72); }
.fcard-meta .who { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fcard-meta .when { margin-left:auto; flex:none; color:rgba(255,255,255,0.5); display:inline-flex; align-items:center; gap:4px; }
/* (.fcard-nsfw blur is defined in the consolidated NSFW block; old center-text +
   hover-reveal removed — the NSFW pill labels it and blur is opt-in) */
/* skeleton variant */
.fcard-skel { pointer-events:none; border-color:var(--border); }
.fcard-skel .fs-shimmer { position:absolute; inset:0; background:var(--bg3); overflow:hidden; }
.fcard-skel .fs-shimmer::after { content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.055),transparent); animation:mpShimmer 1.2s infinite; }
html[data-theme="light"] .fcard-skel .fs-shimmer::after {
  background:linear-gradient(90deg,transparent,rgba(0,0,0,0.05),transparent); }
.fcard-skel::after { display:none; }

/* — v3 game tiles: stats ON the poster plate + slow art zoom on hover — */
.game-meta-text .game-stats { display:flex; align-items:center; gap:12px; padding:0; margin-top:7px; }
.game-meta-text .game-stats .gs { display:inline-flex; align-items:center; gap:4px; font-size:0.74rem;
  font-weight:600; color:rgba(255,255,255,0.75); text-shadow:0 1px 8px rgba(0,0,0,0.7); }
.game-meta-text .game-stats .gs svg { color:var(--accent2); opacity:0.95; flex:none; }
body[data-page="games"] .game-cover { transition:transform .5s ease; }
body[data-page="games"] .game-card:not(.soon):hover .game-cover { transform:scale(1.045); }
body[data-page="games"] .game-card:not(.soon):hover .game-meta { transform:translateY(-24px); }

/* ══════════ NSFW gating — site-wide (shared.js + landing inline) ══════════
   DEFAULT: nsfw posts SHOW, UNBLURRED, with a small "NSFW" pill. Footer toggles
   opt IN to Hide / Blur. Card surfaces: .mod-card (browse/home/search grids),
   .trend-card (Trending), .pop-item (Most Downloaded), .nav-search-result (nav
   dropdown). `.mp-nsfw-card` = tag pill (always when shown); `.mp-nsfw-blurred`
   = blur (only when the Blur toggle is on). No hover-reveal on cards — clicking a
   card goes to the detail page, which has an explicit Reveal button. */

/* NSFW tag pill — always shown on visible nsfw cards */
.mod-card.mp-nsfw-card .mod-thumb,
.trend-card.mp-nsfw-card,
.pop-item.mp-nsfw-card,
.nav-search-result.mp-nsfw-card,
.fcard, .mph-feat-art, .lb-thumb { position: relative; }
.mod-card.mp-nsfw-card .mod-thumb::before,
.trend-card.mp-nsfw-card::before,
.pop-item.mp-nsfw-card::before,
.nsfw-pill {
  content:"NSFW"; position:absolute; top:7px; left:7px; z-index:7;
  background:#c8202e; color:#fff; font-weight:800; font-size:0.58rem; line-height:1;
  letter-spacing:.09em; padding:3px 6px; border-radius:5px; pointer-events:none;
  box-shadow:0 1px 5px rgba(0,0,0,.45);
}
/* per-card position so the pill never overlaps an existing badge/fav button */
.mod-card.mp-nsfw-card .mod-thumb::before { top:auto; bottom:8px; left:8px; }   /* cat-badge is top-left, fav top-right */
.fcard > .nsfw-pill { top:38px; left:10px; }                                    /* below the fcard-top badge row */
.mph-feat-art > .nsfw-pill { top:auto; bottom:12px; left:12px; }                /* chip is top-left */

/* Blur — only when the Blur toggle is on (opt-in) */
.mod-card.mp-nsfw-blurred .mod-thumb { overflow:hidden; }
.mod-card.mp-nsfw-blurred .mod-thumb > img,
.mod-card.mp-nsfw-blurred .mod-thumb .thumb-placeholder { filter: blur(20px); transform: scale(1.08); }
.trend-card.mp-nsfw-blurred { overflow:hidden; }
.trend-card.mp-nsfw-blurred > img { filter: blur(20px); transform: scale(1.08); }
.pop-item.mp-nsfw-blurred .pop-thumb { filter: blur(12px); clip-path: inset(0 round 8px); }
.nav-search-result.mp-nsfw-blurred .nav-search-result-icon { overflow:hidden; }
.nav-search-result.mp-nsfw-blurred .nav-search-result-icon img,
.nav-search-result.mp-nsfw-blurred .nav-search-result-icon { filter: blur(10px); }
.nav-search-result.mp-nsfw-blurred .nav-search-result-icon img { clip-path: inset(0 round 6px); }
/* landing blur classes (added inline only when Blur is on) — blur only, no text */
.fcard-nsfw .fcard-art { filter: blur(18px); transform: scale(1.06); }
.mph-feat-art.is-nsfw { filter: blur(20px); }
.lb-thumb.is-nsfw { filter: blur(10px); }

/* Search LIST view rows (.sr-row) — inline NSFW tag rides after the title
   (rendered in buildRow), so no thumb pill here; just the blur. */
.sr-row.mp-nsfw-blurred .sr-thumb-wrap { overflow:hidden; }
.sr-row.mp-nsfw-blurred .sr-thumb-wrap img,
.sr-row.mp-nsfw-blurred .sr-thumb-wrap .sr-thumb { filter: blur(12px); clip-path: inset(0 round 5px); }

/* Search LIST row title line: title (ellipsized) + version badge + NSFW tag inline */
.sr-row-titlerow { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sr-row-titlerow .sr-row-title { min-width: 0; flex: 0 1 auto; }
.sr-row-titlerow .mod-version-badge,
.sr-row-titlerow .nav-nsfw-tag { flex-shrink: 0; }
/* slimmer version pill in the list view so it matches the title line height */
.sr-row-titlerow .mod-version-badge { padding: 0 6px; font-size: 0.62rem; line-height: 1.45; }

/* Nav-search dropdown: title row = title (ellipsized) + version pill + NSFW tag */
.nav-result-title { display:flex; align-items:center; gap:6px; min-width:0; }
.nav-result-title .nav-result-ttl { min-width:0; flex:0 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-result-title .mod-version-badge,
.nav-result-title .nav-nsfw-tag { flex-shrink:0; }
.nav-result-title .mod-version-badge { padding:0 6px; font-size:0.6rem; line-height:1.45; }
.nav-nsfw-tag { display:inline-block; vertical-align:middle;
  background:#c8202e; color:#fff; font-weight:800; font-size:0.52rem; line-height:1;
  letter-spacing:.07em; padding:2px 5px; border-radius:4px; }

/* Blocked lightbox on blurred cards: clicking a blurred thumb must NOT open the
   unblurred image viewer. Hide the zoom hint + kill the thumb's click target. */
.mp-nsfw-blurred .lb-zoom-hint { display: none !important; }
.mp-nsfw-blurred .sr-thumb-wrap { pointer-events: none; }

/* Pre-blur ALL card thumbs while Blur is on and cards are still being classified
   (mp-cards-armed, lifted by shared.js once nsfw ids resolve) — no flash. */
html.mp-cards-armed .mod-card .mod-thumb > img,
html.mp-cards-armed .mod-card .mod-thumb .thumb-placeholder,
html.mp-cards-armed .trend-card > img,
html.mp-cards-armed .pop-item .pop-thumb,
html.mp-cards-armed .nav-search-result .nav-search-result-icon img,
html.mp-cards-armed .sr-row .sr-thumb-wrap img,
html.mp-cards-armed .fcard-art,
html.mp-cards-armed .mph-feat-art,
html.mp-cards-armed .lb-thumb { filter: blur(16px); }

/* Mod detail page — blur the gallery behind a centered Reveal button (shared.js
   injects .mp-nsfw-reveal into .mod-gallery). Click reveals for THIS pageview. */
#mod-content.mp-nsfw-detail .mod-gallery { position:relative; }
#mod-content.mp-nsfw-detail #gallery-main,
#mod-content.mp-nsfw-detail .mod-gallery-main { filter:blur(26px); }
/* thumbnails: smaller blur + clip-path so each tile has SHARP edges (no halo
   bleeding into neighbours) and stays aligned */
#mod-content.mp-nsfw-detail .mod-gallery-thumb { filter:blur(8px); clip-path:inset(0 round 6px); }
/* pre-reveal: hide the gallery chrome (fav heart, arrows, counter, zoom hint) */
#mod-content.mp-nsfw-detail .fav-btn,
#mod-content.mp-nsfw-detail .gallery-nav,
#mod-content.mp-nsfw-detail .gallery-counter,
#mod-content.mp-nsfw-detail .mod-gallery-zoom-hint { display:none !important; }
/* synchronous pre-blur (kills the load flash before shared.js resolves) */
html.mp-blur-armed #gallery-main,
html.mp-blur-armed .mod-gallery-main { filter:blur(26px); }
html.mp-blur-armed .mod-gallery-thumb { filter:blur(8px); clip-path:inset(0 round 6px); }
html.mp-blur-armed .mod-gallery { pointer-events:none; }
html.mp-blur-armed .mod-gallery .fav-btn,
html.mp-blur-armed .gallery-nav,
html.mp-blur-armed .gallery-counter,
html.mp-blur-armed .mod-gallery-zoom-hint { display:none !important; }
/* "Blur NSFW" toggle at the bottom of the mod detail sidebar */
.mod-sidebar-nsfw { display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--border, rgba(255,255,255,.08)); }
.mod-sidebar-nsfw .footer-theme-label { font-size:0.82rem; color:var(--muted, rgba(255,255,255,.6)); }
.mp-nsfw-reveal { position:absolute; inset:0; z-index:30; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:16px; text-align:center; cursor:default;
  background:rgba(16,7,9,.30); border-radius:inherit; }
.mp-nsfw-reveal-ttl { font-weight:800; font-size:1.15rem; letter-spacing:.1em; color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.75); }
.mp-nsfw-reveal-btn { cursor:pointer; font-weight:700; font-size:0.95rem; color:#fff;
  background:#c8202e; border:none; border-radius:10px; padding:11px 22px;
  box-shadow:0 6px 18px rgba(0,0,0,.45); transition:background .2s, transform .15s; }
.mp-nsfw-reveal-btn:hover { background:#e0343f; transform:translateY(-1px); }

/* Smooth blur fade when toggling Blur NSFW — transition lives on the BASE element
   so both blur-on and blur-off animate. Re-declares each element's existing
   transform transition + adds filter (appended last so it wins at equal specificity). */
.mod-thumb img { transition: transform 0.4s, filter 0.3s ease; }
.mod-gallery-main { transition: transform 0.3s, filter 0.3s ease; }
.mod-gallery-thumb { transition: border-color 0.15s, transform 0.15s, filter 0.3s ease; }
.trend-card img { transition: transform 0.35s ease, filter 0.3s ease; }
.fcard-art { transition: transform 0.5s ease, filter 0.3s ease; }
.pop-thumb, .nav-search-result-icon img, .mod-sticky-thumb,
.sr-thumb-wrap img, .sr-thumb-wrap .sr-thumb, .mph-feat-art, .lb-thumb { transition: filter 0.3s ease; }

/* ══════════════════════════════════════════════
   MOBILE NAV DRAWER  (<= 700px)
   The header's inline <nav> needs ~355px, which does not fit beside the logo in
   the ~350px row a phone gives it: the `auto` nav column won its min-content, the
   logo's `1fr` column collapsed to zero, and the logo painted on top of the links
   while the row pushed the document wider than the screen. Below 700px the inline
   row is swapped for a burger + slide-in drawer. shared.js builds both from the
   existing <nav>, so every page gets it without touching 67 HTML files.
══════════════════════════════════════════════ */
.nav-burger {
  display: none;              /* shown only under the breakpoint, below */
  grid-column: 2; justify-self: end;
  align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none; padding: 0;
  border-radius: 9px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border2);
  color: var(--text); cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
}
.nav-burger:hover { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
html[data-theme="light"] .nav-burger { background: rgba(0,0,0,0.04); }

.nav-drawer-scrim {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.6);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
.nav-drawer-scrim.open { opacity: 1; pointer-events: auto; }

.nav-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 201;
  width: min(310px, 84vw);
  display: flex; flex-direction: column;
  background: var(--bg2); border-left: 1px solid var(--border);
  transform: translateX(100%); transition: transform .24s ease;
  overflow-y: auto; overscroll-behavior: contain;
}
.nav-drawer.open { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .nav-drawer, .nav-drawer-scrim { transition: none; }
}

.nav-drawer-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 62px; flex: none; padding: 0 12px 0 18px;
  border-bottom: 1px solid var(--border);
}
.nav-drawer-title { font-family: var(--font-display); font-size: 0.88rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); }
.nav-drawer-title em { font-style: normal; color: var(--accent); }
.nav-drawer-close {
  width: 36px; height: 36px; flex: none; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; color: var(--text2);
  border-radius: 8px; cursor: pointer; transition: background .14s, color .14s;
}
.nav-drawer-close:hover { background: rgba(255,255,255,0.06); color: var(--text); }

/* drawer search — the only search surface on a phone for game pages */
.nav-drawer-search {
  display: flex; align-items: center; gap: 6px; flex: none;
  margin: 14px 16px 2px; padding: 0 4px 0 12px; height: 40px;
  border-radius: 9px; background: rgba(0,0,0,0.28);
  border: 1px solid var(--border2);
  transition: border-color .15s;
}
.nav-drawer-search:focus-within { border-color: var(--accent); }
html[data-theme="light"] .nav-drawer-search { background: rgba(255,255,255,0.5); }
.nav-drawer-search input {
  flex: 1; min-width: 0; height: 100%;
  background: none; border: 0; outline: none;
  color: var(--text); font: inherit; font-size: 0.9rem;
}
.nav-drawer-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.nav-drawer-search button {
  flex: none; width: 32px; height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; color: var(--muted);
  border-radius: 7px; cursor: pointer; transition: color .14s, background .14s;
}
.nav-drawer-search button:hover { color: var(--accent); background: rgba(255,255,255,0.06); }

.nav-drawer-links { display: flex; flex-direction: column; padding: 10px 0; }
/* the drawer's links are clones of the header's <nav> anchors, so they arrive
   with their icon + label + .active state already correct */
.nav-drawer-links a {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 18px; font-size: 0.94rem; font-weight: 600;
  color: var(--text2); text-decoration: none;
  border-left: 3px solid transparent;
  transition: background .14s, color .14s, border-color .14s;
}
.nav-drawer-links a svg { flex: none; width: 17px; height: 17px; opacity: 0.72; }
.nav-drawer-links a:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.nav-drawer-links a.active { color: var(--accent); border-left-color: var(--accent); background: var(--accent-dim); }
.nav-drawer-links a.active svg { opacity: 1; }

.nav-drawer-sep { height: 1px; background: var(--border); margin: 8px 18px; flex: none; }
.nav-drawer-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 18px 18px; flex: none;
}
.nav-drawer-row > span { font-size: 0.88rem; font-weight: 600; color: var(--text2); }
/* the header's theme button is cloned in here; its knob is driven purely by
   html[data-theme], so the clone stays in sync with no extra wiring */
.nav-drawer-row .theme-toggle { margin: 0; }

html.nav-drawer-lock, html.nav-drawer-lock body { overflow: hidden; }

/* Gated on .has-burger, which shared.js sets only once the burger actually
   exists — so a page that doesn't load shared.js (legal.html) keeps its inline
   nav instead of being left with no navigation at all. */
@media (max-width: 700px) {
  .nav-inner.has-burger > nav { display: none; }
  .nav-inner.has-burger .nav-burger { display: inline-flex; }
  /* .to-top is fixed 22px above the viewport bottom, so at the end of the page it
     lands on the footer's last row — which, now that .footer-links wraps, is the
     NSFW toggles. Hit-testing confirmed it swallowed their clicks. Keep the row
     clear of it (to-top occupies ~22-60px up from the bottom edge). */
  footer { padding-bottom: 84px; }
}
/* above the breakpoint the inline nav is back — make sure a drawer left open by a
   resize can never sit over the desktop layout */
@media (min-width: 701px) {
  .nav-drawer, .nav-drawer-scrim { display: none; }
}

/* build: 20260708hero39 */