/* openmods design mockup.
   Dark theme in a Steam-like style, with a teal accent.
   Colors, fonts and spacing are custom properties in :root, so the look
   can change in one place. */

:root {
  color-scheme: dark;

  /* Colors */
  --color-bg: #111a24;
  --color-bg-deep: #0b1118;
  --color-bg-hero: #16263a;
  --color-surface: #182330;
  --color-surface-hover: #1f2d3d;
  --color-surface-active: #26374a;
  --color-border: #2a3a4d;
  --color-text: #dde6ef;
  --color-muted: #93a4b8;
  --color-muted-on-art: #b4c2d3;
  --color-accent: #2dd4bf;
  --color-accent-hover: #5eead4;
  --color-on-accent: #04201c;
  --color-warning: #f5c451;
  --color-danger: #f87171;
  /* Gold for "Direct downloads" (the user's choice, 2026-10-21): warm, but not the orange of
     Nexus Mods' download buttons. */
  --color-gold: #e3b341;
  --color-gold-hover: #f0c65c;
  --color-on-gold: #241a03;

  /* Fonts */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", Consolas, monospace;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;

  /* Shapes. Every corner on the site comes from these values. The site is sharp (the user's
     choice, 2026-10-17); the rounded look had 6px, 10px, 4px, 999px and 50%. */
  --radius: 0;
  --radius-large: 0;
  --radius-small: 0; /* code and button names in text */
  --radius-pill: 0; /* badges, tags, sort buttons, the account button */
  --radius-round: 0; /* avatars, step numbers */
  --shadow: 0 8px 24px rgb(0 0 0 / 35%);
  --container: 72rem;
  --header-height: 3.5rem; /* about; two rows on small screens (see "Smaller screens") */
  /* "Sign in with GitHub" and the account button share this height, so the header looks the same
     before and after the sign-in in every browser (asked by the user, 2026-10-21). */
  --header-button-height: 2.425rem;
}

/* The header stays at the top, so links to a part of a page land below it. Every page shows
   the scrollbar (inactive on short pages), so short and long pages look the same and do not
   shift sideways (asked by the user). */
html {
  scroll-padding-top: calc(var(--header-height) + var(--space-2));
  overflow-y: scroll;
}

/* Base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

/* position and isolation keep the blurred page art (z-index: -1)
   above the body background and below the content. */
body {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  font-family: var(--font-body);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
}

main {
  flex: 1;
}

h1,
h2,
h3 {
  margin: 0 0 var(--space-3);
  line-height: 1.2;
}

h1 {
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
  letter-spacing: -0.02em;
}

p {
  margin: 0 0 var(--space-3);
}

a {
  color: var(--color-accent);
  text-decoration: none;
}

a:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

/* Links inside running text also need an underline, not only a color. */
p a {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
  text-underline-offset: 0.15em;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

img {
  display: block;
  max-width: 100%;
}

.container {
  width: min(100% - 2 * var(--space-3), var(--container));
  margin-inline: auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Icons are inline SVG. Filled icons use .icon; line icons add .icon-line. */

.icon {
  flex: none;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.icon-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Buttons */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.55rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

.button:hover {
  background: var(--color-accent-hover);
  color: var(--color-on-accent);
  text-decoration: none;
}

.button-secondary {
  border-color: var(--color-border);
  background: var(--color-surface-hover);
  color: var(--color-text);
}

.button-secondary:hover {
  border-color: var(--color-accent);
  background: var(--color-surface-active);
  color: var(--color-text);
}

.button-block {
  display: flex;
  width: 100%;
}

.button-large {
  padding: 0.85rem 1.25rem;
  font-size: 1.05rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Badges */

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.1rem 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-muted);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.badge-license {
  border-color: color-mix(in srgb, var(--color-accent) 50%, transparent);
  color: var(--color-accent);
}

.badge-warning {
  border-color: color-mix(in srgb, var(--color-warning) 50%, transparent);
  color: var(--color-warning);
}

/* Search field with its icon: in the header, on the catalog page and in the mockup's hero.
   It comes before them, so their own rules win. */

.search {
  position: relative;
  display: block;
  max-width: 36rem;
  margin-top: var(--space-4);
}

.search-icon {
  position: absolute;
  top: 50%;
  left: 0.9rem;
  width: 1.15rem;
  height: 1.15rem;
  color: var(--color-muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.search input {
  width: 100%;
  padding: 0.8rem 1rem 0.8rem 2.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-deep);
  color: var(--color-text);
  font: inherit;
  font-size: 1.05rem;
}

.search input::placeholder {
  color: var(--color-muted);
}

.search input:focus {
  border-color: var(--color-accent);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 25%, transparent);
}

/* Header */

/* See-through, so the page art on game and mod pages shows behind it. It stays at the top
   while you scroll; the blur keeps it calm over the page below. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-bg-deep) 70%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.header-inner {
  position: relative;
  display: grid;
  grid-template-areas: "logo nav search discord signin";
  grid-template-columns: auto 1fr minmax(10rem, 17rem) auto auto;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  padding-block: var(--space-2);
}

.logo {
  grid-area: logo;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.logo:hover {
  color: var(--color-text);
  text-decoration: none;
}

.logo-mark {
  width: 1.6rem;
  height: 1.6rem;
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2;
  stroke-linejoin: round;
}

.logo-open {
  color: var(--color-accent);
}

.site-nav {
  grid-area: nav;
  display: flex;
  gap: var(--space-4);
}

.site-nav a {
  padding-block: var(--space-1);
  border-bottom: 2px solid transparent;
  color: var(--color-muted);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-nav a:hover {
  color: var(--color-text);
  text-decoration: none;
}

.site-nav a[aria-current] {
  border-bottom-color: var(--color-accent);
  color: var(--color-text);
}

.button-signin {
  grid-area: signin;
  height: var(--header-button-height);
}

/* The search over the whole catalog, left of the sign-in button; as high as the button. */
.header-search {
  grid-area: search;
}

.header-search .search {
  max-width: none;
  margin-top: 0;
}

.header-search .search-icon {
  left: 0.75rem;
  width: 1rem;
  height: 1rem;
}

.header-search input {
  padding: 0.55rem 0.75rem 0.55rem 2.4rem;
  font-size: 1rem; /* 16 pixels, so phones do not zoom in */
  line-height: 1.2;
}

.header-search input:hover {
  border-color: var(--color-accent);
}

/* The Discord button, between the search and the sign-in button (asked by the user). */
.header-discord {
  grid-area: discord;
}

.header-discord .icon {
  width: 1.2rem;
  height: 1.2rem;
}

/* Sections */

.section {
  padding-block: var(--space-5);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
}

.section-title,
.panel-title {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section-meta {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.9rem;
}

/* Start page: hero */

.hero {
  padding-block: var(--space-6) var(--space-5);
  background:
    radial-gradient(60rem 22rem at 90% -20%, color-mix(in srgb, var(--color-accent) 16%, transparent), transparent 70%),
    linear-gradient(180deg, var(--color-bg-hero), var(--color-bg));
}

.hero h1 {
  max-width: 22ch;
}

.hero-text {
  max-width: 60ch;
  color: var(--color-muted);
  font-size: 1.1rem;
}

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-4) 0 0;
  padding: 0;
  color: var(--color-muted);
  list-style: none;
}

.hero-facts strong {
  color: var(--color-text);
}

/* Start page: game grid */

.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.game-card a {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  background: var(--color-surface);
  color: var(--color-text);
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.game-card a:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow);
  color: var(--color-text);
  text-decoration: none;
  transform: translateY(-2px);
}

/* Placeholder art: a gradient from the element's --hue, with a short name.
   Real game art needs a licensed source (see PLAYBOOK.md, section 10). */
.game-cover,
.mod-icon {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, hsl(var(--hue, 210) 45% 32%), hsl(calc(var(--hue, 210) + 40) 50% 16%));
  color: hsl(var(--hue, 210) 70% 90%);
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgb(0 0 0 / 45%);
}

.game-cover {
  position: relative;
  aspect-ratio: 460 / 215; /* Steam's header picture */
  padding: var(--space-3);
  overflow: hidden;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
}

.game-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.game-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
}

.game-name {
  font-weight: 600;
}

.mod-count {
  color: var(--color-muted);
  font-size: 0.875rem;
}

.has-mods .mod-count {
  color: var(--color-accent);
}

.no-results {
  margin-top: var(--space-3);
  color: var(--color-muted);
}

/* Start page: the featured games are bigger cards. */
.game-grid-featured {
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}

.section-link {
  font-size: 0.9rem;
  text-decoration: underline;
}

.section-actions {
  justify-content: center;
  margin-top: var(--space-4);
}

/* Start page: how it works, for players and for modders. */
.how-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.how-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  background: var(--color-surface);
}

.how-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: 1.2rem;
}

.how-title .icon {
  width: 1.3rem;
  height: 1.3rem;
  color: var(--color-accent);
}

.how-steps {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-4) 0;
  padding: 0;
  list-style: none;
  counter-reset: how-step;
}

.how-steps li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  column-gap: var(--space-3);
  counter-increment: how-step;
}

.how-steps li::before {
  content: counter(how-step);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-round);
  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
  color: var(--color-accent);
  font-weight: 700;
}

.how-steps strong {
  color: var(--color-text);
}

.how-steps span {
  color: var(--color-muted);
}

.how-steps code {
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* Both buttons sit at the bottom of their cards. */
.how-card .button {
  margin-top: auto;
}

/* Catalog page: the search, the genre and the page buttons. */
.catalog-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  max-width: 48rem;
  margin-top: var(--space-4);
}

.catalog-form .search {
  flex: 1 1 18rem;
  margin-top: 0;
}

.catalog-genre select {
  padding: 0.8rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-deep);
  color: var(--color-text);
  font: inherit;
}

.catalog-genre select:focus {
  border-color: var(--color-accent);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 25%, transparent);
}

.pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.pagination [rel="next"] {
  justify-self: end;
}

.pagination-page {
  color: var(--color-muted);
}

/* Game and mod pages: the game's art as a large, blurred background that
   fades into the page. Without an image, the --hue tint shows instead. */

.page-art {
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  height: 40rem;
  overflow: hidden;
  background: linear-gradient(180deg, hsl(var(--hue, 210) 35% 16%), transparent);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 35%, transparent);
  mask-image: linear-gradient(180deg, #000 35%, transparent);
}

/* With an image, the tint is not needed, and it would make bright images too light. */
.page-art:has(img) {
  background: none;
}

/* Any game image can be bright. At opacity 0.5, brightness(0.5) keeps even
   a white image dark enough for the text on top (4.5:1 with --color-muted-on-art).
   The light blur keeps the picture recognizable (asked by the user). */
.page-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  filter: blur(6px) brightness(0.5) saturate(1.3);
  transform: scale(1.12);
}

/* Small gray text on top of the art needs a lighter gray. */
.page-art ~ main .page-hero,
.page-art ~ main .section-head {
  --color-muted: var(--color-muted-on-art);
}

/* The games banner on the start, tutorial and rules pages: the user's picture below the
   header, behind a dark layer that fades into the page background. */
main {
  position: relative;
}

.page-banner {
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  height: 31.25rem; /* the picture is 500 pixels high */
  overflow: hidden;
  pointer-events: none;
}

.page-banner img {
  position: absolute;
  top: 0;
  left: 50%;
  width: max(100%, 135rem); /* 2160 pixels; wider screens stretch it */
  max-width: none;
  height: 100%;
  object-fit: cover;
  transform: translateX(-50%);
}

/* At least 75% page color lies on the picture, and 100% from 30rem down. */
.page-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-bg) 75%, transparent), var(--color-bg) 30rem);
}

/* The start page hero lets the banner show through; small gray text needs the lighter gray. */
.page-banner ~ .hero {
  background: none;
}

.page-banner ~ .hero,
.page-banner ~ .page-hero {
  --color-muted: var(--color-muted-on-art);
}

.page-hero {
  padding-block: var(--space-4) var(--space-5);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  color: var(--color-muted);
  font-size: 0.9rem;
}

.breadcrumb a {
  color: var(--color-muted);
}

.breadcrumb a:hover {
  color: var(--color-text);
}

/* Game page */

.game-head {
  display: grid;
  grid-template-columns: 15rem 1fr auto;
  align-items: center;
  gap: var(--space-4);
}

.game-head h1,
.mod-head h1 {
  margin-bottom: var(--space-2);
}

.game-cover-large {
  border: 1px solid var(--color-border); /* the same outline as the cards (asked by the user) */
  border-radius: var(--radius-large);
  box-shadow: var(--shadow);
  font-size: 1.4rem;
}

.game-meta {
  margin: 0;
  color: var(--color-muted);
}

.sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-muted);
  font-size: 0.9rem;
}

.sort select {
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-deep);
  color: var(--color-text);
  font: inherit;
}

.mod-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mod-row a {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  background: var(--color-surface);
  color: var(--color-text);
  transition: background-color 0.15s, border-color 0.15s;
}

.mod-row a:hover {
  border-color: var(--color-accent);
  background: var(--color-surface-hover);
  color: var(--color-text);
  text-decoration: none;
}

.mod-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius);
  font-size: 1rem;
  letter-spacing: 0.04em;
}

.mod-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.mod-title-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.mod-name {
  font-size: 1.05rem;
  font-weight: 700;
}

.mod-desc {
  color: var(--color-muted);
}

.mod-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-1);
  color: var(--color-muted);
  font-size: 0.85rem;
}

.mod-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
}

/* The real game page shows the mods as portrait cards (asked by the user, 2026-10-17), like big
   mod sites: the cover on top, then the name, the author, the tags, the dates and the summary,
   and a bar with the numbers at the bottom. Their corners follow --radius-large, like every box.
   (The rows above stay for the mockup's game page.) */
.mod-grid {
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--space-3);
}

.mod-card a {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  background: var(--color-surface);
  color: var(--color-text);
  transition: background-color 0.15s, border-color 0.15s;
}

.mod-card a:hover {
  border-color: var(--color-accent);
  background: var(--color-surface-hover);
  color: var(--color-text);
  text-decoration: none;
}

/* Without a cover (or for an adult mod): the --hue placeholder with the initials. */
.mod-card-cover {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(135deg, hsl(var(--hue, 210) 45% 32%), hsl(calc(var(--hue, 210) + 40) 50% 16%));
  color: hsl(var(--hue, 210) 70% 90%);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 8px rgb(0 0 0 / 45%);
}

.mod-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mod-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--space-3);
}

.mod-card-name {
  display: -webkit-box;
  overflow: hidden;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.mod-card-author {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  color: var(--color-muted);
  font-size: 0.9rem;
}

.mod-card-author img {
  width: 1.25rem;
  height: 1.25rem;
  background: var(--color-surface-active);
}

/* Fork and Archived sit on the cover's corner. */
.mod-card-flags {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  display: flex;
  gap: var(--space-1);
}

.mod-card-flags .badge {
  background: color-mix(in srgb, var(--color-bg-deep) 85%, transparent);
}

.mod-card-tags,
.mod-card-dates {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  font-size: 0.85rem;
}

/* The tags read like a category line: "Gameplay · Locations". */
.mod-card .tag {
  padding: 0;
  background: none;
  color: var(--color-text);
  font-size: inherit;
}

.mod-card .tag + .tag::before {
  content: "·";
  margin-inline: 0.4em;
  color: var(--color-muted);
}

.mod-card .tag-adult {
  outline: none;
  color: var(--color-warning);
}

.mod-card-dates {
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-2);
  color: var(--color-muted);
}

.mod-card-dates > span,
.mod-card-stats > span {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
}

.mod-card-summary {
  display: -webkit-box;
  overflow: hidden;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: 0.9rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.mod-card-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: color-mix(in srgb, var(--color-bg-deep) 55%, var(--color-surface));
  color: var(--color-muted);
  font-size: 0.85rem;
}

.mod-card-stats .badge-license {
  margin-left: auto;
}

.empty-state {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-4);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-large);
  background: var(--color-surface);
  text-align: center;
}

.empty-icon {
  width: 3rem;
  height: 3rem;
  color: var(--color-accent);
}

.empty-state h3 {
  margin: 0;
  font-size: 1.4rem;
}

.empty-state p {
  max-width: 48ch;
  margin: 0;
  color: var(--color-muted);
}

.empty-state .actions {
  justify-content: center;
}

/* Mod page */

.mod-head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--space-4);
}

.mod-icon-large {
  width: 6rem;
  height: 6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow);
  font-size: 1.6rem;
}

.mod-tagline {
  max-width: 60ch;
  font-size: 1.1rem;
}

.mod-byline {
  color: var(--color-muted);
}

/* The badges and the tags are two rows: keep a gap between them. */
.mod-head .badges + .tag-list {
  margin-top: var(--space-2);
}

.mod-layout {
  display: grid;
  grid-template-areas: "readme sidebar";
  grid-template-columns: minmax(0, 1fr) 20rem;
  align-items: start;
  gap: var(--space-5);
  padding-block: var(--space-5);
}

.mod-sidebar {
  grid-area: sidebar;
  display: grid;
  gap: var(--space-3);
}

.panel {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  background: var(--color-surface);
}

.panel-note {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.8rem;
  text-align: center;
}

/* "Direct downloads": a gold button that opens the files of the latest release
   (details and summary, so it works without scripts). */
.button-gold {
  background: var(--color-gold);
  color: var(--color-on-gold);
}

.button-gold:hover {
  background: var(--color-gold-hover);
  color: var(--color-on-gold);
}

.direct-downloads {
  display: grid;
  gap: var(--space-2);
}

.direct-downloads > summary {
  list-style: none;
}

.direct-downloads > summary::-webkit-details-marker {
  display: none;
}

/* A small arrow that turns when the list is open. */
.direct-downloads > summary::after {
  content: "";
  width: 0.45em;
  height: 0.45em;
  margin-left: 0.15em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-20%) rotate(45deg);
  transition: transform 0.15s;
}

.direct-downloads[open] > summary::after {
  transform: translateY(20%) rotate(-135deg);
}

.direct-files {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.direct-files a {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-deep);
  color: var(--color-text);
  font-size: 0.9rem;
}

.direct-files a:hover {
  border-color: var(--color-gold);
  color: var(--color-text);
  text-decoration: none;
}

.file-name {
  overflow-wrap: anywhere;
}

.file-size {
  color: var(--color-muted);
  white-space: nowrap;
}

.panel-quiet {
  background: transparent;
  color: var(--color-muted);
  font-size: 0.9rem;
}

.panel-quiet p {
  margin: 0;
}

.facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-3);
  margin: var(--space-2) 0 0;
  font-size: 0.9rem;
}

.facts dt {
  color: var(--color-muted);
}

.facts dd {
  margin: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

/* README: GitHub renders it to HTML; these rules style the plain elements inside. */

.readme {
  grid-area: readme;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  background: var(--color-surface);
}

.readme-label {
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-deep);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.readme-body {
  padding: var(--space-5);
  line-height: 1.7;
}

.readme-body > :first-child {
  margin-top: 0;
}

.readme-body h2 {
  margin: var(--space-5) 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  font-size: 1.6rem;
}

.readme-body h3 {
  margin: var(--space-5) 0 var(--space-2);
  font-size: 1.2rem;
}

.readme-body ul,
.readme-body ol {
  margin: 0 0 var(--space-3);
  padding-left: 1.4rem;
}

.readme-body li + li {
  margin-top: var(--space-1);
}

.readme-body code,
.doc code {
  padding: 0.1em 0.35em;
  border-radius: var(--radius-small);
  background: var(--color-bg-deep);
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.readme-body pre {
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-deep);
  line-height: 1.5;
}

.readme-body pre code {
  padding: 0;
  background: none;
}

/* A link whose unsafe address the cleaner removed is plain text now. */
.readme-body a:not([href]) {
  color: inherit;
  text-decoration: none;
}

.readme-body blockquote {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
}

.readme-body blockquote p {
  margin: 0;
}

.readme-body table {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 0 0 var(--space-3);
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.95rem;
}

/* The min-width keeps narrow cells readable. A table that is too wide
   for the screen scrolls sideways inside its own box. */
.readme-body th,
.readme-body td {
  min-width: 7rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  text-align: left;
}

.readme-body th {
  background: var(--color-bg-deep);
}

.readme-image,
.image-placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  margin: 0 0 var(--space-3);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  background: repeating-linear-gradient(45deg, transparent 0 12px, rgb(255 255 255 / 2%) 12px 24px);
  color: var(--color-muted);
}

/* Signed-in header */

/* display: flex, not inline-flex: inline, the summary sat in a text line, and an avatar picture
   (no text baseline) made that line 0.5 to 1 pixel taller than the button. */
.account {
  grid-area: signin;
  display: flex;
  height: var(--header-button-height);
  align-items: center;
  gap: var(--space-2);
  padding: 0.25rem 0.85rem 0.25rem 0.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface-hover);
  color: var(--color-text);
  font-weight: 600;
}

.account:hover {
  border-color: var(--color-accent);
  color: var(--color-text);
  text-decoration: none;
}

/* 1.8rem: with the account button's padding and border, exactly as high as "Sign in with GitHub"
   (a .button), so the header does not grow after the sign-in (asked by the user, 2026-10-21). */
.avatar {
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: var(--radius-round);
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
  color: var(--color-on-accent);
  font-size: 0.9rem;
  font-weight: 800;
}

/* Account menu: a disclosure (details and summary), so it works without scripts. */

.account-menu {
  grid-area: signin;
  position: relative;
}

.account-menu > summary {
  list-style: none;
  cursor: pointer;
}

.account-menu > summary::-webkit-details-marker {
  display: none;
}

img.avatar {
  object-fit: cover;
}

.account-dropdown {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: 20;
  min-width: 12rem;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  background: var(--color-surface);
  box-shadow: var(--shadow);
}

.menu-item {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.menu-item:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
  text-decoration: none;
}

/* Intro text under a page's h1 */

.page-intro {
  max-width: 62ch;
  color: var(--color-muted);
  font-size: 1.1rem;
}

/* Add-mod page: form and messages */

.form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  align-items: start;
  gap: var(--space-5);
  padding-bottom: var(--space-5);
}

.form-card {
  gap: var(--space-3);
  padding: var(--space-5);
}

.form-title {
  margin: 0;
  font-size: 1.25rem;
}

.form-aside {
  display: grid;
  gap: var(--space-3);
}

.field-label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: 600;
}

.field-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.input {
  flex: 1 1 16rem;
  min-width: 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-deep);
  color: var(--color-text);
  font: inherit;
}

.input::placeholder {
  color: var(--color-muted);
}

.input:focus {
  border-color: var(--color-accent);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 25%, transparent);
}

.input[aria-invalid="true"] {
  border-color: var(--color-danger);
}

.help {
  margin: var(--space-2) 0 0;
  color: var(--color-muted);
  font-size: 0.9rem;
}

.check-result:not(:empty) {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.check-result .panel {
  background: var(--color-bg-deep);
}

.added-message {
  margin-bottom: var(--space-3);
}

.message-warning {
  border-color: color-mix(in srgb, var(--color-warning) 45%, transparent);
  border-left-color: var(--color-warning);
}

.message-warning .message-icon,
.message-warning .message-title {
  color: var(--color-warning);
}

.problem-list {
  margin: 0;
  padding-left: 1.2rem;
}

.preview-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  object-fit: cover;
}

img.mod-icon {
  object-fit: cover;
}

/* Mod page (real site) */

.mod-cover-large {
  width: 15rem;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--color-border); /* the same outline as the cards (asked by the user) */
  border-radius: var(--radius-large);
  box-shadow: var(--shadow);
  object-fit: cover;
}

span.mod-cover-large {
  font-size: 1.1rem;
}

.mod-content {
  grid-area: readme;
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.mod-content > .readme {
  grid-area: auto;
}

.badge a {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
}

.no-release {
  margin: 0;
  color: var(--color-muted);
}

.no-release strong {
  color: var(--color-text);
}

.panel-subtitle {
  margin: var(--space-3) 0 var(--space-1);
  font-size: 0.9rem;
}

.plain-list {
  margin: 0;
  padding-left: 1.2rem;
  font-size: 0.9rem;
}

.link-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.link-list a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Game page: a mod's cover as a small wide picture */
.mod-thumb {
  width: 6.5rem;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  object-fit: cover;
}

@media (max-width: 48rem) {
  .mod-head {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 40rem) {
  .mod-thumb {
    width: 4.5rem;
  }
}

/* Tags from openmods.json */

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tag {
  padding: 0.05rem 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface-active);
  color: var(--color-text);
  font-size: 0.75rem;
  font-weight: 600;
}

.message {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: var(--color-bg-deep);
}

.message-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.message-body > * {
  margin: 0;
}

.message-body > * + * {
  margin-top: var(--space-2);
}

.message-title {
  font-weight: 700;
}

.message-error {
  border-color: color-mix(in srgb, var(--color-danger) 45%, transparent);
  border-left-color: var(--color-danger);
}

.message-success {
  border-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
  border-left-color: var(--color-accent);
}

.message-error .message-icon,
.message-error .message-title {
  color: var(--color-danger);
}

.message-success .message-icon,
.message-success .message-title {
  color: var(--color-accent);
}

.checklist {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.checklist li {
  position: relative;
  padding-left: 1.6rem;
}

.checklist li::before {
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: 800;
  content: "✓";
  content: "✓" / "";
}

.preview-head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-3);
}

.preview-head p {
  margin: 0;
}

/* Mockup-only helpers sit in a dashed box, so nobody takes them for real features. */

.mockup-note {
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--color-warning);
  border-radius: var(--radius-large);
  color: var(--color-muted);
  font-size: 0.9rem;
}

.mockup-note > * {
  margin: 0;
}

.mockup-note > * + * {
  margin-top: var(--space-2);
}

.mockup-label {
  color: var(--color-warning);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sample-list {
  display: grid;
  gap: var(--space-1);
  padding: 0;
  list-style: none;
}

.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-accent);
  font: inherit;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
  text-underline-offset: 0.15em;
  cursor: pointer;
}

.link-button:hover {
  color: var(--color-accent-hover);
}

/* Text pages: tutorial and rules */

.doc-layout {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  align-items: start;
  gap: var(--space-5);
  padding-bottom: var(--space-5);
}

.toc {
  position: sticky;
  top: calc(var(--header-height) + var(--space-3));
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  background: var(--color-surface);
}

.toc :is(ol, ul) {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding-left: 1.2rem;
  color: var(--color-muted);
}

.toc a {
  color: var(--color-text);
}

.toc a:hover {
  color: var(--color-accent-hover);
}

.doc {
  max-width: 48rem;
}

.doc-page {
  padding-bottom: var(--space-5);
}

.doc h2 {
  margin: var(--space-5) 0 var(--space-3);
  font-size: 1.4rem;
}

.doc > section:first-child > h2 {
  margin-top: 0;
}

.doc :is(ul, ol):not([class]) {
  margin: 0 0 var(--space-3);
  padding-left: 1.4rem;
}

.doc :is(ul, ol):not([class]) > li + li {
  margin-top: var(--space-2);
}

/* Tables in text pages, for example the cookies on the privacy page. A table that is too wide
   for the screen scrolls sideways inside its own box (tabindex="0", so keyboards can scroll it). */
.doc table {
  display: block;
  max-width: 100%;
  margin: 0 0 var(--space-3);
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.doc th,
.doc td {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.doc th {
  background: var(--color-bg-deep);
}

/* "My mods": each date stays on one line. Phones get narrower cells; a table that is still too
   wide scrolls inside its own box. */
.my-mods td:last-child {
  white-space: nowrap;
}

@media (max-width: 40rem) {
  .my-mods :is(th, td) {
    padding-inline: var(--space-2);
  }
}

/* Links in the running text of lists need an underline too (see "p a"). */
.doc li a:not(.button) {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
  text-underline-offset: 0.15em;
}

.doc-section {
  scroll-margin-top: var(--space-4);
}

/* The ready prompt for AI agents on the tutorial page, with its copy button. */
.prompt-box {
  margin: 0 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  background: var(--color-bg-deep);
}

.prompt-box pre {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.prompt-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-4) var(--space-3);
}

.prompt-actions:has(button[hidden]) {
  display: none;
}

.copy-status {
  color: var(--color-accent);
}

.steps {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  background: var(--color-surface);
  scroll-margin-top: var(--space-4);
}

.step h2 {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: 0;
  font-size: 1.35rem;
}

.step > :last-child {
  margin-bottom: 0;
}

.step-number {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-round);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 1.1rem;
  font-weight: 800;
}

/* A button or menu name on GitHub, for example "New repository". */
.ui {
  padding: 0.05em 0.4em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-bg-deep);
  font-size: 0.92em;
  font-weight: 600;
  white-space: nowrap;
}

.tip {
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
}

.license-choice {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.license-choice > div {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-deep);
}

.license-choice h3 {
  margin: 0 0 var(--space-1);
  color: var(--color-accent);
  font-size: 1rem;
}

.license-choice p {
  margin: 0;
  color: var(--color-muted);
}

.done {
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
  border-radius: var(--radius-large);
  background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface));
}

.done h2 {
  margin-top: 0;
}

.done > :last-child {
  margin-bottom: 0;
}

.rule-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-3);
}

.rule-card {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  background: var(--color-surface);
}

.rule-card .icon {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--color-danger);
}

.rule-card h3 {
  margin: var(--space-2) 0 var(--space-1);
  font-size: 1.1rem;
}

.rule-card p {
  margin: 0;
  color: var(--color-muted);
}

/* Footer */

.site-footer {
  margin-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-deep);
  color: var(--color-muted);
  font-size: 0.9rem;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-5);
}

.footer-brand .logo {
  font-size: 1.1rem;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: var(--space-2) var(--space-4);
}

.footer-nav a {
  color: var(--color-muted);
}

.footer-nav a:hover {
  color: var(--color-text);
}

/* Game page: the filter column, the sort buttons and the mod list */

/* The count and the sort buttons sit in their own row above the cards, so the filter box and
   the first cards start at the same height (asked by the user, 2026-10-17). */
.browse {
  display: grid;
  grid-template-areas:
    ". head"
    "filters main";
  grid-template-columns: 15rem minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3) var(--space-4);
}

.browse-filters {
  grid-area: filters;
}

.browse > .list-head {
  grid-area: head;
  margin-bottom: 0;
}

.browse-main {
  grid-area: main;
}

/* On large screens the filter is always open, so its "Filter" button is not needed. */
.filter-toggle {
  display: none;
  list-style: none;
}

.filter-toggle::-webkit-details-marker {
  display: none;
}

.filter-body {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  background: var(--color-surface);
}

.filter-body > .panel-title {
  margin-bottom: var(--space-3);
}

.filter-group {
  margin: 0 0 var(--space-3);
  padding: 0;
  border: 0;
}

.filter-group legend {
  margin-bottom: var(--space-1);
  padding: 0;
  color: var(--color-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.filter-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.2rem 0;
  cursor: pointer;
}

.filter-option input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--color-accent);
}

.filter-label {
  flex: 1;
}

.filter-count {
  color: var(--color-muted);
  font-size: 0.85rem;
}

.filter-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.filter-clear {
  font-size: 0.9rem;
  text-decoration: underline;
}

.filter-badge {
  display: inline-grid;
  place-items: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.35rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 0.8rem;
  font-weight: 700;
}

.adult-switch {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.empty-state .adult-switch {
  width: 100%;
  max-width: 24rem;
}

.adult-switch p {
  margin: 0 0 var(--space-2);
  color: var(--color-muted);
  font-size: 0.9rem;
}

.list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
}

.list-count {
  margin: 0;
  color: var(--color-muted);
}

.sort-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}

.sort-label {
  margin-right: var(--space-1);
  color: var(--color-muted);
  font-size: 0.9rem;
}

.sort-nav a {
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font-size: 0.9rem;
}

.sort-nav a:hover {
  border-color: var(--color-accent);
  text-decoration: none;
}

.sort-nav a[aria-current] {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
  color: var(--color-accent);
  font-weight: 600;
}

.filter-empty {
  padding: var(--space-5) var(--space-4);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-large);
  color: var(--color-muted);
  text-align: center;
}

.filter-empty p {
  margin: 0 0 var(--space-2);
}

/* The content warning tag: never a plain category chip. */
.tag-adult {
  outline: 1px solid color-mix(in srgb, var(--color-warning) 60%, transparent);
  color: var(--color-warning);
}

/* Smaller screens */

/* Below 72rem the Discord button shows only the logo. */
@media (max-width: 72rem) {
  .discord-long {
    display: none;
  }

  .header-discord {
    padding-inline: 0.7rem;
  }
}

/* Below 64rem the header has no room for the full search field: it shrinks to its icon and
   grows over the header while you type (:focus-within). The sign-in button gets shorter, and
   the account menu shows only the avatar. */
@media (max-width: 64rem) {
  .header-inner {
    grid-template-columns: auto 1fr auto auto auto;
  }

  .header-search {
    width: 2.5rem;
  }

  .header-search input {
    padding-right: 0;
    cursor: pointer;
  }

  .header-search input::placeholder {
    color: transparent;
  }

  .header-search input::-webkit-search-cancel-button {
    display: none;
  }

  .header-search:focus-within .search {
    position: absolute;
    top: var(--space-2);
    right: 0;
    left: 0;
    z-index: 1;
  }

  .header-search:focus-within input {
    padding-right: 0.75rem;
    cursor: text;
  }

  .header-search:focus-within input::placeholder {
    color: var(--color-muted);
  }

  .signin-long {
    display: none;
  }

  .account {
    padding-right: 0.25rem;
  }

  /* Hidden from view only: screen readers still read the account name. */
  .account-name {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}

@media (max-width: 56rem) {
  .mod-layout {
    grid-template-areas:
      "sidebar"
      "readme";
    grid-template-columns: minmax(0, 1fr);
  }

  .form-layout,
  .doc-layout,
  .browse {
    grid-template-columns: minmax(0, 1fr);
  }

  /* One column: the "Filter" button, then the count and the sort buttons, then the cards. */
  .browse {
    grid-template-areas:
      "filters"
      "head"
      "main";
  }

  .toc {
    position: static;
  }

  /* On phones the filter opens with its "Filter" button above the list. */
  .filter-toggle {
    display: inline-flex;
  }

  .filter-panel[open] > .filter-body {
    margin-top: var(--space-2);
  }
}

/* Two header rows: the logo, the search icon and the sign-in button, then the menu and the
   Discord logo. */
@media (max-width: 48rem) {
  :root {
    --header-height: 6rem;
  }

  /* The sign-in button spans two columns, so the Discord logo below it takes only its own width
     and the menu keeps its room. */
  .header-inner {
    grid-template-areas:
      "logo search signin signin"
      "nav nav nav discord";
    grid-template-columns: 1fr auto auto auto;
    column-gap: var(--space-2);
  }

  /* In the menu row, the Discord link is a plain logo, as low as the menu links. */
  .header-discord {
    justify-self: end;
    padding: var(--space-1);
    border-color: transparent;
    background: none;
    color: var(--color-muted);
  }

  .header-discord:hover {
    border-color: transparent;
    background: none;
    color: var(--color-text);
  }

  .game-head {
    grid-template-columns: 1fr;
  }

  .game-cover-large {
    max-width: 18rem;
  }

  .how-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 40rem) {
  .hide-on-phone {
    display: none;
  }

  .page-art {
    height: 28rem;
  }

  .mod-icon-large {
    width: 4rem;
    height: 4rem;
    font-size: 1.1rem;
  }

  .readme-body {
    padding: var(--space-3);
  }

  .form-card,
  .step,
  .done {
    padding: var(--space-3);
  }
}

@media (max-width: 30rem) {
  .game-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .game-cover {
    font-size: 0.8rem;
  }
}