/* ============================================
   Indie Games Show — dense dark game-store interface

   The proportions follow the conventions of every
   game storefront: dark surfaces, boxy panels,
   capsule art, small radii, uppercase labels.
   Those are generic and safe to share.

   The identity deliberately is not: teal accent and
   an amber primary action, on a cooler near-neutral
   slate. Nobody should mistake this for Steam, whose
   look is a light blue (#66c0f4) and a lime-green
   button (#a4d007) on a blue-leaning grey (#1b2838).

   No build step — edit this file directly.
   ============================================ */

:root {
  /* Surfaces — cooler and darker than a blue-grey store palette */
  --bg-darkest: #11161d;   /* header, footer */
  --bg: #171e27;           /* page */
  --panel: #141a22;        /* cards, sidebars */
  --panel-2: #1c242e;      /* raised */
  --panel-3: #27323e;      /* hover, active */

  /* Accents */
  --accent: #4fd6c1;       /* teal — links, headings, emphasis */
  --accent-bright: #6ee7d3;
  --accent-deep: #1f8a7b;
  --amber: #e8a33d;        /* primary action */
  --amber-dark: #a8701c;

  --warn: #e8a33d;
  --bad: #e05a5a;
  --ok: #5cc98f;

  /* Text */
  --fg: #c3ced8;
  --fg-strong: #ffffff;
  --fg-muted: #8b96a2;
  --fg-dim: #67727d;
  --fg-faint: #3a444e;

  --line: rgba(0, 0, 0, 0.35);
  --line-soft: rgba(255, 255, 255, 0.06);
  --line-strong: rgba(79, 214, 193, 0.35);

  /* Buttons */
  --btn-amber: linear-gradient(to bottom, #e8a33d 5%, #a8701c 95%);
  --btn-amber-hover: linear-gradient(to bottom, #f5b555 5%, #c2851f 95%);
  --btn-teal: linear-gradient(to right, #4fd6c1 0%, #1f8a7b 65%);
  --btn-grey: linear-gradient(to bottom, rgba(96, 112, 130, 0.5) 5%, rgba(52, 64, 78, 0.5) 95%);

  --radius: 3px;
  --radius-sm: 2px;
  --shadow: 0 0 12px rgba(0, 0, 0, 0.55);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

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

body {
  margin: 0;
  /* Page wash: a touch lighter at the top, settling into the base slate. */
  background: var(--bg);
  background-image: linear-gradient(to bottom, #1c242e 0, var(--bg) 320px);
  background-repeat: no-repeat;
  color: var(--fg);
  font-family: Outfit, ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 { margin: 0; line-height: 1.2; font-weight: 400; color: var(--fg-strong); }
h1 { font-size: clamp(1.7rem, 4vw, 2.6rem); }
h2 { font-size: clamp(1.15rem, 2.4vw, 1.5rem); }
h3 { font-size: 1rem; }
p { margin: 0 0 0.7rem; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--accent); color: #0e1319; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #141a22; }
::-webkit-scrollbar-thumb { background: #495663; }
::-webkit-scrollbar-thumb:hover { background: #4fd6c1; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 0.6rem 1rem; background: var(--btn-teal); color: #fff; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ── Layout ──────────────────────────────── */

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.section { padding: 34px 0; }
.center { text-align: center; }
.narrow { max-width: 720px; margin-inline: auto; }
.narrow-text { max-width: 66ch; }
.right { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.stack > * + * { margin-top: 8px; }
.full { width: 100%; }

.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.surface {
  border: 1px solid var(--line-soft);
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.pad { padding: 18px; }
.rule { border: 0; height: 1px; margin: 14px 0; background: rgba(255, 255, 255, 0.08); }

/* No gradient text anywhere; the teal accent carries emphasis instead. */
.grad { color: var(--accent); }

.grid-lines { display: none; }

/* Flat washes rather than blurred glow orbs — this interface stays flat. */
.orb { position: absolute; pointer-events: none; opacity: 0.5; }
.orb-violet { inset: 0; background: radial-gradient(120% 90% at 10% 0%, rgba(79, 214, 193, 0.1), transparent 60%); }
.orb-azure  { inset: 0; background: radial-gradient(100% 80% at 95% 10%, rgba(31, 138, 123, 0.22), transparent 62%); }
.orb-aqua   { inset: 0; background: radial-gradient(90% 70% at 0% 100%, rgba(79, 214, 193, 0.08), transparent 60%); }

.muted { color: var(--fg-muted); }
.small { font-size: 0.85rem; }
.dim { color: var(--fg-dim); }
.fineprint { color: var(--fg-dim); font-size: 0.76rem; line-height: 1.45; margin: 5px 0 0; }
.star { color: var(--accent); }

/* ── Buttons ─────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 0; border-radius: var(--radius-sm);
  padding: 9px 15px; font: inherit; font-size: 0.86rem; font-weight: 400;
  color: var(--fg-strong); cursor: pointer; transition: all 0.15s linear; text-align: center;
}
.btn:disabled { opacity: 0.45; pointer-events: none; }
.btn-lg { padding: 12px 22px; font-size: 0.95rem; }
.btn.small { padding: 6px 11px; font-size: 0.78rem; }

/* Amber is the "do the thing" button. */
.btn-primary { background: var(--btn-amber); color: #2a1e08; }
.btn-primary:hover { background: var(--btn-amber-hover); color: #fff; }

.btn-ghost { background: var(--btn-grey); color: var(--fg); }
.btn-ghost:hover { background: linear-gradient(to bottom, rgba(79, 214, 193, 0.5) 5%, rgba(31, 138, 123, 0.5) 95%); color: #fff; }

.btn-quiet { background: transparent; color: var(--fg-muted); }
.btn-quiet:hover { color: var(--fg-strong); background: rgba(79, 214, 193, 0.1); }

.btn-ok { background: var(--btn-amber); color: #2a1e08; }
.btn-ok:hover { background: var(--btn-amber-hover); color: #fff; }
.btn-bad { background: linear-gradient(to bottom, rgba(224, 90, 90, 0.75) 5%, rgba(120, 30, 30, 0.75) 95%); color: #ffd9d9; }
.btn-bad:hover { background: linear-gradient(to bottom, #e05a5a 5%, #8e2222 95%); color: #fff; }

.link-btn { background: none; border: 0; color: var(--accent); font: inherit;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0; }

/* ── Navigation ──────────────────────────── */

.nav { position: sticky; top: 0; z-index: 50; background: var(--bg-darkest);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.5); }
.nav.is-scrolled { background: #0e1319; }
.nav-inner { display: flex; align-items: center; gap: 12px; height: 58px; }

.brand { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: var(--radius); background: linear-gradient(to bottom, #27323e, #141a22);
  border: 1px solid rgba(79, 214, 193, 0.25); font-size: 14px; }
.brand-text { font-size: 17px; font-weight: 300; letter-spacing: 0.01em; color: var(--fg-strong); }

.nav-links { display: none; gap: 0; margin-left: 12px; }
.nav-links a { padding: 8px 12px; font-size: 0.82rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg); transition: color 0.12s; }
.nav-links a:hover { color: var(--accent); }

.nav-search { display: none; margin-left: auto; }
.nav-search input { width: 190px; padding: 6px 11px; font-size: 0.82rem;
  border-radius: 12px; background: linear-gradient(to right, #1c242e, #171e27); }
.nav-search input:focus { width: 240px; }

.nav-cta { display: flex; gap: 7px; margin-left: auto; }
.nav-toggle { margin-left: 6px; width: 36px; height: 36px; padding: 0; }

.account { position: relative; margin-left: auto; }
.account-btn { display: flex; align-items: center; gap: 7px; padding: 4px 9px 4px 4px;
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius);
  background: var(--panel-2); color: var(--fg); font: inherit; cursor: pointer; }
.account-btn:hover { border-color: var(--line-strong); color: var(--fg-strong); }
.account-name { display: none; font-size: 0.82rem; }

.menu { position: absolute; right: 0; top: calc(100% + 6px); width: 230px; z-index: 60;
  border: 1px solid rgba(0, 0, 0, 0.6); border-radius: var(--radius);
  background: var(--panel-2); box-shadow: var(--shadow); overflow: hidden; }
.menu-head { padding: 12px 13px; border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  display: grid; gap: 2px; background: var(--panel); }
.menu-head strong { color: var(--fg-strong); font-weight: 500; }
.menu-head span { font-size: 0.78rem; color: var(--fg-dim); }
.menu-head .chip { justify-self: start; margin-top: 5px; }
.menu > a { display: block; padding: 8px 13px; font-size: 0.84rem; color: var(--fg); }
.menu > a:hover { background: var(--panel-3); color: var(--fg-strong); }
.menu-form { border-top: 1px solid rgba(0, 0, 0, 0.5); }
.menu-danger { width: 100%; text-align: left; padding: 9px 13px; border: 0;
  background: none; color: var(--bad); font: inherit; font-size: 0.84rem; cursor: pointer; }
.menu-danger:hover { background: rgba(224, 90, 90, 0.15); }

.nav-mobile { background: var(--bg-darkest); border-top: 1px solid rgba(0, 0, 0, 0.5); }
.nav-mobile .container { display: grid; gap: 1px; padding-block: 10px; }
.nav-mobile a { padding: 9px 11px; color: var(--fg); text-transform: uppercase;
  font-size: 0.82rem; letter-spacing: 0.04em; }
.nav-mobile a:hover { background: var(--panel-3); color: var(--accent); }

@media (min-width: 900px) {
  .nav-links, .nav-search { display: flex; }
  .nav-toggle { display: none; }
  .account-name { display: block; }
  .nav-search { margin-left: auto; }
  .nav-cta, .account { margin-left: 0; }
}

/* ── Banners ─────────────────────────────── */

.banner { font-size: 0.83rem; border-bottom: 1px solid rgba(0, 0, 0, 0.4); }
.banner .container { padding-block: 9px; }
.banner-inner { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  justify-content: space-between; }
.banner-warn { background: #4a3a15; color: #e5c07b; }
.banner-ok { background: #3c5411; color: #2a1e08; }
.banner-bad { background: #4a1e1e; color: #f0a0a0; }

/* ── Hero ────────────────────────────────── */

.hero { position: relative; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-inner { position: relative; display: grid; gap: 36px; padding: 48px 16px 60px;
  align-items: center; }
.hero-compact .container { position: relative; padding-block: 52px 40px; }
.lede { color: var(--fg-muted); font-size: 0.98rem; max-width: 58ch; margin-top: 16px; }
.hero-compact .lede { margin-inline: auto; }

.badge { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
  padding: 5px 12px 5px 5px; border: 1px solid rgba(79, 214, 193, 0.2);
  border-radius: var(--radius); background: rgba(79, 214, 193, 0.08);
  font-size: 0.76rem; color: var(--accent); }
.badge-new { padding: 2px 7px; border-radius: var(--radius-sm);
  background: var(--btn-teal); color: #fff; font-size: 0.66rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.hero-actions.center { justify-content: center; }

.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  max-width: 440px; margin: 34px 0 0; padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.07); }
.hero-stats dd { margin: 0; font-size: 1.4rem; color: var(--fg-strong);
  font-variant-numeric: tabular-nums; }
.hero-stats dt { margin-top: 2px; font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--fg-dim); }

.hero-visual { display: none; position: relative; aspect-ratio: 16 / 10;
  max-width: 460px; margin-inline: auto; width: 100%; }
.ring { display: none; }
.hero-card { position: absolute; inset: 0; display: flex; flex-direction: column;
  border: 1px solid rgba(0, 0, 0, 0.6); border-radius: var(--radius);
  overflow: hidden; box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
  transition: box-shadow 0.15s linear; }
.hero-card:hover { box-shadow: 0 0 0 2px var(--accent), 0 0 24px rgba(0, 0, 0, 0.7); }
.hero-card-art { position: relative; flex: 1; display: grid; place-items: center;
  overflow: hidden; font-size: 3.4rem; }
.hero-card-art img { width: 100%; height: 100%; object-fit: cover; }
.hero-card-art::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.25) 45%, transparent); }
.hero-card-body { position: absolute; inset-inline: 0; bottom: 0; display: grid; gap: 2px;
  padding: 14px; }
.hero-card-kicker { font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--accent); }
.hero-card-body strong { font-size: 1.05rem; font-weight: 400; color: var(--fg-strong); }
.hero-card-body span:last-child { font-size: 0.78rem; color: var(--fg-muted); }

@media (min-width: 1000px) {
  .hero-inner { grid-template-columns: 1.1fr 1fr; }
  .hero-visual { display: block; }
}

/* ── Section headings ────────────────────── */

.section-head { display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 12px; margin-bottom: 16px;
  padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.section-head.center { justify-content: center; text-align: center; border-bottom: 0; }
.section-head h2 { font-weight: 300; letter-spacing: 0.01em; }
.section-head p { color: var(--fg-muted); font-size: 0.86rem; margin-top: 6px; max-width: 62ch; }
.section-link { color: var(--accent); font-size: 0.82rem; padding: 4px 8px;
  border-radius: var(--radius-sm); background: rgba(79, 214, 193, 0.08); }
.section-link:hover { background: var(--accent); color: #0e1319; }

.eyebrow { display: block; margin-bottom: 6px; font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); }
.eyebrow.aqua { color: #8fd6a0; }
.eyebrow.violet { color: var(--accent); }

/* ── Cards ───────────────────────────────── */

.rail { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px;
  scrollbar-width: thin; }

.card { display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.4); background: var(--panel);
  border-radius: var(--radius); transition: all 0.12s linear; }
.card:hover { background: var(--panel-3); box-shadow: 0 0 0 1px var(--accent); }
.card-sm { width: 200px; flex: 0 0 200px; }
.card-lg { flex-direction: row; }

.card-art { position: relative; overflow: hidden; background: #0e1319; }
/* Wide capsule proportions rather than a tall poster — the format every
   store settled on because it fits a screenshot. */
.card-sm .card-art { aspect-ratio: 460 / 215; }
.card-md .card-art { aspect-ratio: 460 / 215; }
.card-lg .card-art { flex: 0 0 240px; }
.card-art img { width: 100%; height: 100%; object-fit: cover; }
.card-glyph { position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 2.4rem; opacity: 0.75; }
.card-scrim { position: absolute; inset-inline: 0; bottom: 0; height: 50%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent); }

.card-body { display: flex; flex-direction: column; flex: 1; padding: 11px 12px; gap: 4px; }
.card-lg .card-body { padding: 18px; justify-content: center; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; }
.card-head h3 { font-size: 0.94rem; font-weight: 400; color: var(--fg-strong); }
.card-sm .card-head h3 { font-size: 0.86rem; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.card-lg .card-head h3 { font-size: 1.2rem; }
.card:hover .card-head h3 { color: var(--accent); }
.card-studio { margin: 0; font-size: 0.74rem; color: var(--fg-dim); }
.card-desc { margin: 3px 0 0; font-size: 0.83rem; color: var(--fg-muted); flex: 1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.card-sm .card-foot { border-top: 0; padding-top: 2px; margin-top: 2px; }
.votes { font-size: 0.74rem; color: var(--fg-dim); white-space: nowrap; }
.score { display: inline-flex; align-items: baseline; gap: 3px; font-size: 0.8rem;
  color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 640px) {
  .card-lg { flex-direction: column; }
  .card-lg .card-art { flex: none; aspect-ratio: 460 / 215; }
}

/* ── Chips and pills ─────────────────────── */

.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px;
  border-radius: var(--radius-sm); background: rgba(96, 112, 130, 0.28);
  font-size: 0.72rem; color: #4fd6c1; white-space: nowrap; }
.chip-plain { color: var(--fg-muted); }
.chip-violet { background: rgba(79, 214, 193, 0.18); color: var(--accent); }
.chip-ok { background: rgba(92, 201, 143, 0.16); color: var(--ok); }
.chip-warn { background: rgba(232, 163, 61, 0.16); color: var(--warn); }
.chip-bad { background: rgba(224, 90, 90, 0.18); color: #f0a0a0; }
a.chip:hover { background: var(--accent); color: #0e1319; }

.pill { position: absolute; top: 8px; left: 8px; z-index: 2;
  padding: 3px 8px; border-radius: var(--radius-sm); font-size: 0.64rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  background: rgba(0, 0, 0, 0.75); }
.pill-pick { left: auto; right: 8px; color: var(--accent); }
.pill-released { color: var(--ok); }
.pill-demo_available { color: var(--accent); }
.pill-in_development { color: var(--warn); }
.pill-coming_soon { color: #9fb4c9; }

.chips .pill, .game-hero-text .pill { position: static; background: rgba(96, 112, 130, 0.28); }

.pill-link { padding: 5px 11px; border-radius: var(--radius-sm);
  background: rgba(96, 112, 130, 0.2); font-size: 0.78rem; color: var(--fg);
  transition: all 0.12s linear; }
.pill-link:hover { background: rgba(79, 214, 193, 0.25); color: var(--fg-strong); }
.pill-link.is-active { background: var(--btn-teal); color: #fff; }

.avatar { display: inline-grid; place-items: center; width: 26px; height: 26px;
  border-radius: var(--radius-sm); background: linear-gradient(to bottom, #27323e, #141a22);
  border: 1px solid rgba(79, 214, 193, 0.25);
  font-size: 0.66rem; font-weight: 700; color: var(--accent); flex-shrink: 0; }
.avatar-xl { width: 84px; height: 84px; font-size: 1.6rem; border-radius: var(--radius); }
/* A supplied picture fills the same box the initials would. */
.avatar-img { object-fit: cover; background: var(--panel-2); }

/* ── Steps / promises ────────────────────── */

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.steps li { display: flex; gap: 12px; }
.steps > li > span { display: grid; place-items: center; width: 28px; height: 28px;
  flex-shrink: 0; border-radius: var(--radius-sm); background: rgba(96, 112, 130, 0.25);
  font-size: 0.72rem; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.steps strong { display: block; font-size: 0.9rem; color: var(--fg-strong); font-weight: 500; }
.steps p { margin: 2px 0 0; font-size: 0.85rem; color: var(--fg-muted); }

.promise-icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 12px;
  border-radius: var(--radius); background: rgba(96, 112, 130, 0.22); font-size: 1.1rem; }
.promise h3 { margin-bottom: 6px; font-weight: 500; }

.media-table { margin: 18px 0 0; gap: 12px; }
.media-table > div { padding: 14px; border-radius: var(--radius); background: var(--panel-2); }
.media-table dt { font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--accent); }
.media-table dd { margin: 5px 0 0; font-size: 0.85rem; color: var(--fg-muted); }

/* ── CTA ─────────────────────────────────── */

.cta { position: relative; overflow: hidden; border-radius: var(--radius);
  background: linear-gradient(to right, #141a22, #1f3a52); box-shadow: var(--shadow); }
.cta-bg { position: absolute; inset: 0; pointer-events: none; }
.cta-inner { position: relative; max-width: 660px; margin: 0 auto; padding: 46px 24px;
  text-align: center; }
.cta-inner p { margin-top: 14px; color: var(--fg-muted); }

/* ── Game page ───────────────────────────── */

.game-hero { position: relative; overflow: hidden; background: var(--panel); }
.game-hero-bg { position: absolute; inset: 0; opacity: 0.5; filter: blur(24px) saturate(1.2); }
.game-hero-scrim { position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(27, 40, 56, 0.7), var(--bg) 92%); }
.game-hero-inner { position: relative; padding-block: 26px 34px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px;
  font-size: 0.78rem; color: var(--fg-dim); }
.crumbs a { color: var(--accent); }
.crumbs a:hover { text-decoration: underline; }
.game-hero-main { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; }
.game-cover { position: relative; width: 184px; aspect-ratio: 460 / 215; flex-shrink: 0;
  display: grid; place-items: center; overflow: hidden; font-size: 2.4rem;
  border: 1px solid rgba(0, 0, 0, 0.6); border-radius: var(--radius);
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.6); }
.game-cover img { width: 100%; height: 100%; object-fit: cover; }
.game-hero-text { flex: 1 1 320px; min-width: 0; }
.game-hero-text h1 { margin-top: 10px; font-weight: 300; }
.tagline { margin-top: 6px; font-size: 1rem; color: var(--accent); }
.game-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px;
  font-size: 0.84rem; color: var(--fg-muted); align-items: center; }
.studio { display: inline-flex; align-items: center; gap: 7px; }
.studio strong { color: var(--accent); font-weight: 400; }
.verified { color: var(--ok); }

.game-layout { display: grid; gap: 26px; padding-block: 28px; }
@media (min-width: 1000px) { .game-layout { grid-template-columns: minmax(0, 1fr) 324px; } }
.game-side { display: grid; gap: 14px; align-content: start; }
@media (min-width: 1000px) { .game-side { position: sticky; top: 74px; } }

.block { margin-bottom: 32px; }
.block h2 { margin-bottom: 12px; padding-bottom: 6px; font-size: 1.05rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.prose p { color: var(--fg); margin-bottom: 12px; }
.devnote { margin: 0; padding: 18px; border-left: 3px solid var(--accent);
  border-radius: var(--radius); background: var(--panel); }
.devnote p { font-style: italic; color: var(--fg); }
.devnote footer { margin-top: 12px; font-size: 0.78rem; color: var(--fg-dim); font-style: normal; }

.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.shots a { overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: var(--radius); aspect-ratio: 16 / 9; }
.shots img { width: 100%; height: 100%; object-fit: cover; }
.shots a:hover { box-shadow: 0 0 0 2px var(--accent); }

.score-big { margin: 6px 0 3px; font-size: 2.1rem; color: var(--accent);
  font-variant-numeric: tabular-nums; }
.stars { display: inline-flex; gap: 2px; color: var(--fg-faint); }
.stars .on { color: var(--accent); }

.btn-vote { width: 100%; padding: 12px 15px; }
.btn-vote.is-voted { background: var(--btn-grey); color: var(--accent); }
.btn-vote .count { margin-left: auto; opacity: 0.85; font-variant-numeric: tabular-nums; }

.storelinks { display: grid; gap: 6px; margin-top: 10px; }
.storelink-form { margin: 0; }
.storelink { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px;
  border: 0; border-radius: var(--radius-sm); background: rgba(96, 112, 130, 0.2);
  color: var(--fg); font: inherit; font-size: 0.85rem; cursor: pointer;
  transition: all 0.12s linear; }
.storelink:hover { background: var(--btn-teal); color: #fff; }
.storelink .dim { margin-left: auto; }

.details { display: grid; gap: 8px; margin: 10px 0 0; font-size: 0.84rem; }
.details > div { display: flex; justify-content: space-between; gap: 14px;
  padding-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.details > div:last-child { border-bottom: 0; padding-bottom: 0; }
.details dt { color: var(--fg-dim); flex-shrink: 0; }
.details dd { margin: 0; text-align: right; color: var(--accent); }

.reviews { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.review-head { display: flex; align-items: center; gap: 10px; }
.review-head > div { flex: 1; min-width: 0; }
.review-head strong { display: block; font-size: 0.9rem; color: var(--accent); font-weight: 400; }
.review-head .muted { font-size: 0.74rem; }
.reviews p { margin-top: 10px; font-size: 0.88rem; color: var(--fg); }

/* ── Trailer ─────────────────────────────── */

.trailer { position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.5); border-radius: var(--radius); background: #000; }
.trailer-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.trailer-scrim { position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.3)); }
.trailer-play { position: absolute; inset: 0; display: grid; place-items: center;
  border: 0; background: none; cursor: pointer; }
.trailer-play span { display: grid; place-items: center; width: 66px; height: 46px;
  border-radius: var(--radius); background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.25); color: #fff; font-size: 1.1rem;
  padding-left: 3px; transition: all 0.12s linear; }
.trailer:hover .trailer-play span { background: var(--btn-teal); border-color: transparent; }
.trailer-foot { position: absolute; inset-inline: 0; bottom: 0; display: flex;
  align-items: flex-end; justify-content: space-between; gap: 10px; padding: 12px;
  font-size: 0.84rem; pointer-events: none; }
.trailer-foot a { pointer-events: auto; }
.trailer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.trailer-preview { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px;
  border-radius: var(--radius); background: rgba(92, 201, 143, 0.1);
  border-left: 3px solid var(--ok); }
.trailer-preview.is-hidden { display: none; }
.trailer-preview img { width: 104px; height: 58px; object-fit: cover;
  border-radius: var(--radius-sm); background: #0e1319; }
.trailer-preview strong { display: block; color: var(--ok); font-size: 0.88rem; font-weight: 500; }
.trailer-preview code { font-size: 0.74rem; color: var(--fg-dim); }
.trailer-preview small { display: block; font-size: 0.76rem; color: var(--fg-muted); }

/* ── Forms ───────────────────────────────── */

input, textarea, select {
  width: 100%; padding: 9px 11px; font: inherit; font-size: 0.88rem;
  color: var(--fg-strong); background: #1c242e;
  background: linear-gradient(to bottom, #111820, #182029);
  border: 1px solid rgba(0, 0, 0, 0.5); border-radius: var(--radius-sm);
  transition: border-color 0.12s, box-shadow 0.12s;
}
input::placeholder, textarea::placeholder { color: var(--fg-dim); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent); }
textarea { resize: vertical; min-height: 80px; }
input[type="checkbox"], input[type="radio"] { width: auto; }

.label { display: block; margin: 16px 0 5px; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--accent); }
.label:first-child { margin-top: 0; }

fieldset { margin: 0 0 16px; border: 1px solid rgba(255, 255, 255, 0.06); }
fieldset.surface { border-radius: var(--radius); }
legend { padding: 0 7px; font-size: 0.76rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.11em; color: var(--accent); }

.form-narrow { max-width: 720px; }
.form-page { max-width: 820px; margin-inline: auto; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 14px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.07); }
.form-error { padding: 9px 12px; margin-bottom: 14px; border-left: 3px solid var(--bad);
  border-radius: var(--radius-sm); background: rgba(224, 90, 90, 0.12);
  color: #f0a0a0; font-size: 0.86rem; }
.field-error { margin: 5px 0 0; font-size: 0.79rem; color: #f0a0a0; }
.field-warn { margin: 8px 0 0; font-size: 0.79rem; color: var(--warn); }

.chip-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-check input { position: absolute; opacity: 0; pointer-events: none; }
.chip-check span { display: inline-block; padding: 6px 12px; border-radius: var(--radius-sm);
  background: rgba(96, 112, 130, 0.2); font-size: 0.79rem; color: var(--fg);
  cursor: pointer; transition: all 0.12s linear; }
.chip-check:hover span { background: rgba(79, 214, 193, 0.25); color: var(--fg-strong); }
.chip-check input:checked + span { background: var(--btn-teal); color: #fff; }
.chip-check input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

[data-repeat] { display: grid; gap: 6px; margin-bottom: 6px; }

.role-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border: 0; padding: 0; }
.role-picker legend { padding: 0; margin-bottom: 5px; }
.role-option input { position: absolute; opacity: 0; pointer-events: none; }
.role-option span { display: block; padding: 11px; border-radius: var(--radius);
  background: var(--panel-2); cursor: pointer; transition: all 0.12s linear;
  border: 1px solid transparent; }
.role-option strong { display: block; font-size: 0.88rem; color: var(--fg-strong); font-weight: 500; }
.role-option small { display: block; margin-top: 2px; font-size: 0.75rem; color: var(--fg-dim); }
.role-option input:checked + span { border-color: var(--accent); background: var(--panel-3); }

.stars-input { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 3px; }
.stars-input input { position: absolute; opacity: 0; pointer-events: none; }
.stars-input label { font-size: 1.6rem; line-height: 1; color: var(--fg-faint);
  cursor: pointer; transition: color 0.12s; }
.stars-input label:hover, .stars-input label:hover ~ label,
.stars-input input:checked ~ label { color: var(--accent); }
.stars-input input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }

.search-bar { display: flex; gap: 8px; margin-bottom: 18px; }
.search-bar input { flex: 1; }

.facets { display: grid; gap: 9px; margin-bottom: 24px; padding: 14px;
  border-radius: var(--radius); background: var(--panel); }
.facet-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.facet-label { width: 50px; flex-shrink: 0; font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--fg-dim); }

.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 28px; }
.pager-status { font-size: 0.84rem; color: var(--fg-muted); }

/* ── Auth ────────────────────────────────── */

.auth-wrap { position: relative; display: grid; place-items: center;
  min-height: calc(100vh - 58px); padding: 34px 16px; overflow: hidden; }
.auth-bg { position: absolute; inset: 0; pointer-events: none; }
.auth-card-wrap { position: relative; width: 100%; max-width: 420px; }
.auth-brand { justify-content: center; margin-bottom: 24px; }
.auth-card h1 { font-size: 1.5rem; font-weight: 300; }
.auth-card > .muted { margin-top: 5px; font-size: 0.88rem; }
.auth-card form { margin-top: 18px; }
.auth-card .btn { margin-top: 18px; }
.auth-foot { margin-top: 16px; text-align: center; font-size: 0.88rem; }
.auth-foot a { color: var(--accent); }
.auth-foot a:hover { text-decoration: underline; }

/* ── Profile / admin ─────────────────────── */

.profile-hero { position: relative; overflow: hidden; background: var(--panel);
  border-bottom: 1px solid rgba(0, 0, 0, 0.4); }
.profile-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.profile-hero-inner { position: relative; display: flex; flex-wrap: wrap; gap: 18px;
  align-items: center; padding-block: 28px; }
.profile-id { flex: 1 1 260px; min-width: 0; }
.profile-id h1 { font-size: 1.5rem; font-weight: 300; }
.bio { margin-top: 6px; max-width: 58ch; color: var(--fg-muted); font-size: 0.88rem; }
.profile-stats { display: flex; gap: 26px; margin: 0; }
.profile-stats dd { margin: 0; font-size: 1.2rem; color: var(--accent);
  font-variant-numeric: tabular-nums; }
.profile-stats dt { margin-top: 1px; font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--fg-dim); }

.tabs { display: flex; gap: 0; overflow-x: auto; background: var(--panel);
  border-radius: var(--radius) var(--radius) 0 0; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; padding: 11px 18px; font-size: 0.84rem;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-muted); white-space: nowrap; }
.tab:hover { color: var(--accent); }
.tab.is-active { color: var(--fg-strong); background: var(--panel-3); }
.dot { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 5px;
  border-radius: var(--radius-sm); background: var(--bad); font-size: 0.64rem;
  font-weight: 700; color: #fff; }

.tiles { margin-bottom: 22px; }
.tile { padding: 14px; border-radius: var(--radius); background: var(--panel); }
.tile span { display: block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--fg-dim); }
.tile strong { display: block; margin-top: 4px; font-size: 1.45rem; font-weight: 400;
  color: var(--accent); font-variant-numeric: tabular-nums; }
.tile small { display: block; margin-top: 1px; font-size: 0.75rem; color: var(--fg-muted); }

.stack-list { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.row-main { flex: 1 1 260px; min-width: 0; }
.row-title { color: var(--fg-strong); font-weight: 500; }
a.row-title:hover { color: var(--accent); }
.row-stats { display: flex; gap: 16px; font-size: 0.84rem; color: var(--fg-muted); }

.bars { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 15px; }
.bar-head { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 5px;
  font-size: 0.85rem; }
.bar-head span:last-child { color: var(--accent); font-variant-numeric: tabular-nums; }
.bar { height: 9px; border-radius: var(--radius-sm); background: rgba(0, 0, 0, 0.4); overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--btn-teal); }
.bar-foot { margin-top: 4px; font-size: 0.73rem; color: var(--fg-dim); }

.note { display: flex; gap: 10px; align-items: flex-start; }
.note-dot { width: 7px; height: 7px; margin-top: 7px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0; }
.note > div { flex: 1; min-width: 0; }
.note strong { color: var(--fg-strong); font-weight: 500; }
.note-link { font-size: 0.79rem; color: var(--accent); white-space: nowrap; }
.unread { border-left: 3px solid var(--accent); }

.queue-item { display: grid; gap: 12px; }
.queue-cover { position: relative; display: grid; place-items: center; width: 96px;
  aspect-ratio: 460 / 215; flex-shrink: 0; overflow: hidden;
  border-radius: var(--radius); background: #0e1319; font-size: 1.3rem; }
.queue-cover img { width: 100%; height: 100%; object-fit: cover; }
.checks { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.07); }
.queue-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.reject summary { display: inline-flex; align-items: center; padding: 9px 15px;
  border-radius: var(--radius-sm);
  background: linear-gradient(to bottom, rgba(224, 90, 90, 0.7) 5%, rgba(120, 30, 30, 0.7) 95%);
  color: #ffd9d9; font-size: 0.86rem; cursor: pointer; list-style: none; }
.reject summary::-webkit-details-marker { display: none; }
.reject[open] summary { margin-bottom: 10px; }
.reject form { min-width: min(420px, 100%); }
.reject .btn { margin-top: 10px; }

/* ── Empty states ────────────────────────── */

.empty { display: grid; place-items: center; gap: 5px; padding: 46px 20px; text-align: center;
  border-radius: var(--radius); background: var(--panel); }
.empty p { color: var(--fg-muted); max-width: 46ch; }
.empty .btn { margin-top: 12px; }
.empty-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 4px;
  border-radius: var(--radius); background: rgba(96, 112, 130, 0.22); font-size: 1.3rem; }
.empty-icon.big { width: auto; height: auto; background: none; font-size: 2.8rem; }
.center-page { display: grid; place-items: center; gap: 7px; min-height: 58vh; text-align: center; }

/* ── Footer ──────────────────────────────── */

.footer { margin-top: 56px; background: var(--bg-darkest);
  border-top: 1px solid rgba(0, 0, 0, 0.5); }
.footer-grid { display: grid; gap: 28px; padding-block: 36px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.footer-brand { grid-column: span 2; max-width: 330px; }
.footer-brand p { margin-top: 12px; font-size: 0.85rem; color: var(--fg-dim); }
.footer h3 { margin-bottom: 10px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.13em; color: var(--fg-muted); }
.footer > .container > div > a { display: block; margin-bottom: 7px; font-size: 0.85rem;
  color: var(--fg-dim); }
.footer > .container > div > a:hover { color: var(--accent); }
.footer-legal { border-top: 1px solid rgba(255, 255, 255, 0.05); }
.footer-legal-inner { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between;
  padding-block: 15px; font-size: 0.76rem; color: var(--fg-faint); }

@media (max-width: 640px) {
  .footer-brand { grid-column: span 2; }
  .role-picker { grid-template-columns: 1fr; }
  .profile-stats { gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Staff panels ────────────────────────────
   Moderation queue and admin. Dense on purpose: these are working screens,
   not marketing ones. */

.staff-bar { border-bottom: 1px solid var(--line); background: var(--panel); }
.staff-bar-inner { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap;
  padding-block: 10px; }
.staff-bar .tabs { display: flex; flex-wrap: wrap; gap: 2px; min-width: 0; }
/* Pushed to its own line once the tabs fill the row, rather than being
   overlapped by them. */
.staff-bar .fineprint { white-space: nowrap; margin-left: auto; }
@media (max-width: 1100px) {
  .staff-bar .fineprint { margin-left: 0; width: 100%; }
}

.admin-row { display: grid; gap: 14px; }
.admin-row-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.admin-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px;
  padding-top: 12px; border-top: 1px solid var(--line); }
.admin-actions .reject { min-width: 220px; }

.inline-form { display: flex; align-items: center; gap: 6px; }
/* Action labels are short; wrapping one onto two lines just looks broken. */
.admin-actions .btn, .admin-actions summary { white-space: nowrap; }
.inline-form select { padding: 7px 10px; font: inherit; font-size: 0.85rem; color: var(--fg-strong);
  background: linear-gradient(to bottom, #111820, #182029);
  border: 1px solid rgba(0, 0, 0, 0.5); border-radius: 2px; }

/* Wide tables scroll inside their own box rather than pushing the page sideways. */
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.admin-table th, .admin-table td { padding: 9px 12px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line); }
.admin-table thead th { font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--accent); }
.admin-table tbody tr:last-child th, .admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table th { color: var(--fg-muted); font-weight: 600; white-space: nowrap; }
.admin-table code { font-size: 0.85em; }

.nowrap { white-space: nowrap; }
/* Long URLs in the inspection view must wrap instead of stretching the column. */
.break { overflow-wrap: anywhere; word-break: break-word; }
.inspect-cover { width: 100%; max-width: 460px; border-radius: 3px; }

/* ── Language switcher ───────────────────────
   Two plain links rather than a dropdown: with only two locales, a menu
   costs a click and buys nothing. */

.lang-switch { display: inline-flex; align-items: center; flex: 0 0 auto;
  padding: 2px; border: 1px solid var(--line-soft); border-radius: 3px;
  background: linear-gradient(to bottom, #111820, #182029); }
.lang-opt { padding: 5px 9px; border-radius: 2px; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.06em; color: var(--fg-dim); text-decoration: none; line-height: 1; }
.lang-opt:hover { color: var(--fg-strong); background: var(--panel-3); }
.lang-opt.is-active { color: #10241f; background: var(--accent); cursor: default; }

.nav-mobile .lang-switch { margin-top: 10px; }

/* ── Longer labels ───────────────────────────
   Turkish runs about 20% longer than English, and "GELİŞTİRİCİLER İÇİN" was
   wrapping onto two lines inside a fixed-height bar. Nothing in the nav should
   wrap; it gets tighter instead, and the search field yields space first. */

.nav-links a,
.nav-cta .btn,
.account-name,
.lang-opt { white-space: nowrap; }

.nav-links a { padding-inline: 9px; }
.nav-search input { width: 150px; }
.nav-search input:focus { width: 220px; }

@media (max-width: 1180px) {
  .nav-links a { padding-inline: 7px; font-size: 0.78rem; letter-spacing: 0.02em; }
  .nav-search { display: none; }
}

/* ── Founder action grid ─────────────────────
   Five maintenance buttons read as a set of choices, not a queue to work
   through, so they sit side by side rather than stacked. */

.action-grid { align-items: stretch; }
.action-card { display: flex; flex-direction: column; gap: 8px; }
.action-card strong { color: var(--fg-strong); font-weight: 600; }
.action-card p { flex: 1; margin: 0; }
.action-card form { margin: 0; }

/* ── Banner slots ────────────────────────────
   Nothing is rendered while a slot is off, so an unused site pays nothing
   for having them. */

.ad-slot { display: block; margin: 28px auto; text-align: center; max-width: 970px; }
.ad-slot img { max-width: 100%; height: auto; border-radius: var(--radius); }
.ad-label { display: block; margin-bottom: 4px; font-size: 0.62rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--fg-faint); }
.ad-slot-side { margin: 0 0 18px; max-width: none; }
/* Sized like a card so it sits in the grid rather than breaking it. */
.ad-slot-card { margin: 0; max-width: none; }
.ad-slot-card img { width: 100%; aspect-ratio: 460 / 215; object-fit: cover; }

/* The rails live in the margin either side of the 1200px container. Below
   1500px that margin is doing real work, so they are not rendered as far as
   the reader is concerned — display:none, no request, no reflow. */
.ad-rail { position: fixed; top: 96px; z-index: 20; margin: 0; max-width: 160px; }
.ad-rail-left  { left: max(12px, calc((100vw - 1200px) / 2 - 176px)); }
.ad-rail-right { right: max(12px, calc((100vw - 1200px) / 2 - 176px)); }
@media (max-width: 1499px) {
  .ad-rail { display: none; }
}

/* ── Traffic ─────────────────────────────────
   A bar per day, drawn with divs. A chart library for six numbers would be
   more bytes than the page it sits on. */

.spark { display: flex; align-items: flex-end; gap: 2px; height: 120px;
  padding: 12px; border-radius: var(--radius); background: var(--panel-2); overflow-x: auto; }
.spark-bar { flex: 1 0 6px; min-width: 4px; border-radius: 2px 2px 0 0;
  background: linear-gradient(to top, var(--accent-deep), var(--accent)); }
.spark-bar.is-empty { background: var(--line-soft); }

/* ── Donate page ─────────────────────────── */

.donate-note { margin: 18px 0 28px; }
.donate-promise { display: grid; gap: 14px; justify-items: start; }
.donate-promise p { margin: 0; }

/* ── Staff panels: card grid ─────────────────
   Queues and lists in the staff panels are cards in a grid rather than full
   width rows. Two reasons: a moderator comparing four submissions can see
   four at once instead of one, and a row that spans 1200px puts its actions
   a long way from the thing they act on. */

.panel-grid { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px)  { .panel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1500px) { .panel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Two columns even on the widest screens, for cards that carry more text. */
.panel-grid-wide { grid-template-columns: 1fr; }
@media (min-width: 1000px) { .panel-grid-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* A card fills its cell and keeps its actions pinned to the bottom, so a row
   of cards lines up however uneven the text above is. */
.panel-grid > .admin-row,
.panel-grid > .queue-item {
  display: flex; flex-direction: column; gap: 12px; height: 100%; margin: 0;
}
.panel-grid > .admin-row > .row,
.panel-grid > .queue-item > .row { flex: 1; }
.panel-grid .admin-actions,
.panel-grid .queue-actions { margin-top: auto; }

/* Inside a narrow card the cover sits above the text rather than beside it. */
.panel-grid .row { flex-direction: column; gap: 10px; }
.panel-grid .queue-cover { width: 100%; aspect-ratio: 460 / 215; }
.panel-grid .queue-cover img { width: 100%; height: 100%; object-fit: cover; }

/* Actions wrap instead of overflowing the card. */
.panel-grid .admin-actions,
.panel-grid .queue-actions { flex-wrap: wrap; gap: 8px; }
.panel-grid .admin-actions .reject,
.panel-grid .queue-actions .reject { min-width: 100%; }
.panel-grid .inline-form { flex-wrap: wrap; }

/* ── Remits ──────────────────────────────────
   What each rank is for. The ✓/✕ carries the meaning, so it is a real
   character rather than a coloured bullet an assistive reader would skip. */

.remit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.remit-list li { position: relative; padding-left: 20px; font-size: 0.86rem; line-height: 1.45;
  color: var(--fg); }
.remit-list li::before { content: "·"; position: absolute; left: 6px; top: 0;
  font-weight: 700; color: var(--accent); }
.remits { margin-bottom: 22px; }