/* Metagamez.net — editorial indie studio */

:root {
  --bg: #F6F5F1;
  --bg-2: #EDEBE4;
  --bg-3: #E2DFD5;
  --ink: #0B0B0D;
  --ink-2: #2A2A2E;
  --ink-3: #5C5C63;
  --ink-4: #8A8A92;
  --rule: #D8D5CB;
  --accent: #5B3FE4;
  --accent-ink: #FFFFFF;

  --font-display: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --step-0: 15px;
  --step-1: 17px;
  --step-2: 21px;
  --step-3: 28px;
  --step-4: 40px;
  --step-5: 64px;
  --step-6: 96px;
  --step-7: 140px;

  --pad: 32px;
  --maxw: 1280px;
  --nav-h: 64px;

  --t: 240ms cubic-bezier(.2,.7,.2,1);
}

[data-theme="dark"] {
  --bg: #0B0B0D;
  --bg-2: #131316;
  --bg-3: #1C1C21;
  --ink: #F6F5F1;
  --ink-2: #D8D5CB;
  --ink-3: #9C9CA3;
  --ink-4: #6A6A72;
  --rule: #26262C;
}

[data-theme="retro"] {
  --bg: #0A100B;
  --bg-2: #0F1810;
  --bg-3: #152018;
  --ink: #C9F6CE;
  --ink-2: #8FDC97;
  --ink-3: #5DAE66;
  --ink-4: #3B7A42;
  --rule: #1F3322;
  --accent: #C9F6CE;
  --accent-ink: #0A100B;
  --font-display: "JetBrains Mono", ui-monospace, monospace;
  --font-body: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-display);
  background: var(--bg);
  color: var(--ink);
  font-size: var(--step-1);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--t), color var(--t);
}

[data-theme="retro"] body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.18) 3px,
    rgba(0,0,0,0) 4px
  );
  z-index: 9999;
  mix-blend-mode: multiply;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { max-width: 100%; display: block; }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* NAV */
.nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--rule);
}
.nav .container {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; width: 100%;
  max-width: 100%; /* override .container max-width so nav spans the full viewport */
  padding: 0 28px;
  position: relative; /* containing block for flow-nav-wrap */
}
.nav .container .brand   { justify-self: start; }
.nav .container .nav-cta { justify-self: stretch; }
/* Flow-nav sits at the 25% mark, mirroring service-status at 75% */
.flow-nav-wrap {
  position: absolute; left: 25%; top: 50%;
  transform: translate(-50%, -50%);
}

/* FlowBoard nav embed */
.flow-nav { position: relative; }
.flow-nav-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px; border: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.06em; color: var(--ink-4);
  cursor: default; transition: border-color var(--t), color var(--t);
}
.flow-nav:hover .flow-nav-bar { border-color: var(--ink-4); color: var(--ink-3); }
.flow-nav-title { text-transform: uppercase; }
.flow-nav-track {
  width: 72px; height: 2px; background: var(--bg-3);
  position: relative; overflow: hidden;
}
.flow-nav-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); }
.flow-nav-dropdown {
  position: absolute; top: calc(100% + 10px); left: 0;
  width: 300px; z-index: 200;
  background: var(--bg); border: 1px solid var(--rule);
  box-shadow: 0 8px 32px rgba(0,0,0,0.22);
  padding: 6px; display: flex; flex-direction: column; gap: 4px;
}
.flow-nav-col-head {
  display: flex; justify-content: space-between;
  padding: 4px 8px 8px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.08em; color: var(--ink-4); text-transform: uppercase;
  border-bottom: 1px solid var(--rule-2); margin-bottom: 2px;
}
.flow-nav-card {
  padding: 8px 10px; border: 1px solid var(--rule-2);
  background: var(--bg-2); display: flex; flex-direction: column; gap: 6px;
}
.flow-nav-card-top { display: flex; align-items: flex-start; gap: 6px; }
.flow-nav-card-priority { font-size: 8px; flex-shrink: 0; margin-top: 2px; }
.flow-nav-card-title { font-size: 12px; font-weight: 500; color: var(--ink); line-height: 1.4; }
.flow-nav-prog-track { height: 2px; background: var(--bg-3); overflow: hidden; }
.flow-nav-prog-fill { height: 100%; background: var(--accent); }
.flow-nav-card-meta { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.flow-nav-chip {
  font-size: 9px; font-family: var(--font-mono);
  padding: 2px 5px; background: var(--bg-3); color: var(--ink-3); letter-spacing: 0.04em;
}
.flow-nav-subtasks { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; }
.flow-nav-subtask {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 11px; color: var(--ink-2);
}
.flow-nav-subtask.done { color: var(--ink-4); }
.flow-nav-subtask.done > span:last-child { text-decoration: line-through; }
.flow-nav-subtask-icon { font-size: 9px; color: var(--accent); flex-shrink: 0; }
.nav-account-btn {
  position: absolute; right: 28px; top: 50%; transform: translateY(-50%);
}

/* Mobile floating nav button & drawer */
.nav-fab {
  display: none;
  position: fixed; bottom: 24px; right: 24px; z-index: 200;
  width: 48px; height: 48px;
  background: var(--bg-2); border: 1px solid var(--rule);
  color: var(--ink); font-size: 20px; line-height: 1;
  align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  transition: background var(--t), border-color var(--t);
}
.nav-fab:hover { background: var(--bg-3); border-color: var(--ink-4); }
.nav-drawer-backdrop {
  display: none; position: fixed; inset: 0; z-index: 190;
  background: rgba(0,0,0,0.5);
}
.nav-drawer {
  position: fixed; bottom: 84px; right: 16px; z-index: 195;
  background: var(--bg-2); border: 1px solid var(--rule);
  padding: 16px 20px;
  display: flex; flex-direction: column; gap: 4px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.7);
  min-width: 200px;
}
.nav-drawer a, .nav-drawer button {
  display: block; width: 100%; text-align: left;
  padding: 12px 0; font-size: 16px; color: var(--ink-2);
  background: none; border: none; border-bottom: 1px solid var(--rule-2);
  cursor: pointer; text-decoration: none;
  transition: color var(--t);
}
.nav-drawer a:last-child, .nav-drawer button:last-child { border-bottom: none; }
.nav-drawer a:hover, .nav-drawer button:hover { color: var(--ink); }
.nav-drawer .drawer-signin {
  margin-top: 12px; padding: 12px; text-align: center;
  background: var(--accent); color: #fff; font-weight: 500; border-bottom: none;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; letter-spacing: -0.01em;
  font-size: 16px;
}
.brand-mark {
  width: 22px; height: 22px; position: relative;
  display: inline-grid; place-items: center;
}
.brand-mark::before {
  content: ""; position: absolute; inset: 0;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
}
.brand-mark::after {
  content: ""; width: 6px; height: 6px; background: var(--accent);
  border-radius: 50%;
  transition: background var(--t);
}
.nav-links {
  display: flex; gap: 28px; align-items: center;
  font-size: 14px; color: var(--ink-2);
}
.nav-links > a {
  position: relative; padding: 6px 0;
  transition: color var(--t);
}
.nav-links > a:hover { color: var(--ink); }
.nav-links > a.active { color: var(--ink); }
.nav-links > a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1.5px; background: var(--accent);
}

/* Nav items with dropdowns */
.nav-item {
  position: relative;
}
.nav-item > a {
  position: relative; padding: 6px 0;
  display: flex; align-items: center; gap: 4px;
  transition: color var(--t); color: var(--ink-2);
}
.nav-item > a:hover,
.nav-item:hover > a { color: var(--ink); }
.nav-item > a.active { color: var(--ink); }
.nav-item > a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1.5px; background: var(--accent);
}
.nav-caret {
  font-size: 9px; opacity: 0.45; line-height: 1;
  transition: transform var(--t);
}
.nav-item:hover .nav-caret { transform: rotate(180deg); }

/* Dropdown panel */
.nav-dropdown {
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  padding-top: 10px; /* invisible bridge so cursor can travel to panel */
  opacity: 0; pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 200;
}
.nav-item:hover .nav-dropdown {
  opacity: 1; pointer-events: auto;
}
.nav-dropdown-inner {
  background: var(--bg);
  border: 1px solid var(--rule);
  padding: 5px;
  min-width: 160px;
  display: flex; flex-direction: column; gap: 1px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.14);
}
.nav-dropdown a {
  display: block; padding: 8px 12px;
  border-radius: 5px; white-space: nowrap;
  font-size: 13px; color: var(--ink-2);
  position: relative;
  transition: background var(--t), color var(--t);
}
.nav-dropdown a:hover { background: var(--bg-2); color: var(--ink); }
.nav-dropdown a.active { background: var(--bg-2); color: var(--ink); }
.nav-dropdown a::after { display: none; } /* suppress the underline indicator */

/* STATUS DOT */
.nav-cta-link {
  display: flex; align-items: center; gap: 8px;
  color: var(--ink-4); text-decoration: none;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  transition: color var(--t);
}
.nav-cta-link:hover { color: var(--ink-2); }

.status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block; flex-shrink: 0;
}
.status-dot--live {
  background: #16a34a;
  animation: sdot-live 2.4s ease-in-out infinite;
}
.status-dot--unstable {
  background: #ea580c;
  animation: sdot-unstable 2.4s ease-in-out infinite;
}
.status-dot--offline {
  background: #dc2626;
  animation: sdot-offline 2.4s ease-in-out infinite;
}
@keyframes sdot-live {
  0%,100% { box-shadow: 0 0 0 0 rgba(22,163,74,0.5); }
  50%      { box-shadow: 0 0 0 5px rgba(22,163,74,0); }
}
@keyframes sdot-unstable {
  0%,100% { box-shadow: 0 0 0 0 rgba(234,88,12,0.5); }
  50%      { box-shadow: 0 0 0 5px rgba(234,88,12,0); }
}
@keyframes sdot-offline {
  0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,0.5); }
  50%      { box-shadow: 0 0 0 5px rgba(220,38,38,0); }
}

/* STATUS PAGE */
.st-page { max-width: 860px; margin: 0 auto; padding: 48px 24px 96px; }
.st-page-header { margin-bottom: 24px; }
.st-banner {
  padding: 16px 24px; border-radius: 6px; margin-bottom: 32px;
  font-family: var(--font-mono); font-size: 14px; font-weight: 600;
  letter-spacing: 0.04em; color: #fff;
}
.st-section { margin-bottom: 32px; }
.st-section-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px;
}
.st-uptime-label {
  font-size: 12px; color: var(--ink-3); text-align: right; margin-bottom: 8px;
}
.st-services {
  border: 1px solid var(--rule); border-radius: 8px;
}
.st-service-card {
  padding: 16px 20px; border-bottom: 1px solid var(--rule);
  background: var(--bg);
}
.st-service-card:first-child { border-radius: 8px 8px 0 0; }
.st-service-card:last-child  { border-radius: 0 0 8px 8px; border-bottom: none; }
.st-service-card:only-child  { border-radius: 8px; }
.st-service-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 2px;
}
.st-service-name { font-weight: 600; font-size: 15px; }
.st-service-badge { font-size: 13px; font-weight: 600; }
.st-service-desc { font-size: 13px; color: var(--ink-3); margin-bottom: 8px; }
.st-bars { display: flex; gap: 2px; height: 34px; margin: 10px 0 4px; position: relative; }
.st-bar {
  flex: 1; border-radius: 2px; min-width: 2px; cursor: default;
  transition: filter 0.15s;
}
.st-bar:hover { filter: brightness(1.25); }
.st-bar-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 8px 10px;
  font-size: 11px;
  font-family: var(--font-mono);
  white-space: normal;
  z-index: 20;
  pointer-events: none;
  min-width: 140px;
  max-width: 260px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.st-bar-tooltip-date {
  font-weight: 600; color: var(--ink); margin-bottom: 6px;
}
.st-bar-tooltip-row {
  display: flex; justify-content: space-between; gap: 20px;
  color: var(--ink-3); line-height: 1.7;
  white-space: nowrap;
}
.st-bar-tooltip-events {
  border-top: 1px solid var(--rule);
  margin-top: 6px; padding-top: 6px;
}
.st-bar-tooltip-events-label {
  font-size: 9px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-4); margin-bottom: 3px;
}
.st-bar-tooltip-event {
  color: var(--ink-2); line-height: 1.5; margin-bottom: 3px;
}
.st-bar-tooltip-event:last-child { margin-bottom: 0; }
.st-bar-labels {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--ink-4); font-family: var(--font-mono);
}
.st-incident {
  background: var(--bg); border: 1px solid var(--rule); border-radius: 8px;
  padding: 16px 20px; margin-bottom: 10px;
}
.st-incident-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.st-incident-title { font-weight: 600; font-size: 15px; }
.st-incident-status {
  font-size: 11px; font-family: var(--font-mono); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.st-incident-body {
  font-size: 14px; color: var(--ink-2); margin: 0 0 10px; line-height: 1.6;
}
.st-incident-update {
  border-top: 1px solid var(--rule); padding-top: 10px; margin-top: 10px;
}
.st-update-status {
  display: block; font-size: 11px; font-family: var(--font-mono);
  text-transform: uppercase; font-weight: 700; color: var(--ink-3); margin-bottom: 3px;
}
.st-update-body { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 3px; }
.st-update-time { font-size: 11px; color: var(--ink-4); font-family: var(--font-mono); }
.st-incident-time { font-size: 11px; color: var(--ink-4); font-family: var(--font-mono); margin-top: 10px; }
.st-player-count {
  display: flex; align-items: baseline; gap: 10px;
  padding: 16px 20px;
  background: var(--bg-1);
  border: 1px solid var(--rule);
  border-radius: 6px;
  margin-bottom: 16px;
}
.st-player-num {
  font-size: 32px; font-weight: 600; letter-spacing: -0.03em; line-height: 1;
}
.st-player-label {
  font-size: 13px; color: var(--ink-3);
}
.st-announcement {
  background: var(--bg-1);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 14px 18px;
  margin-bottom: 10px;
}
.st-announcement-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.st-announcement-title { font-weight: 600; font-size: 15px; }
.st-announcement-pin {
  font-size: 10px; font-family: var(--font-mono); letter-spacing: 0.08em;
  color: var(--accent); border: 1px solid var(--accent);
  border-radius: 3px; padding: 1px 6px;
}
.st-announcement-body { font-size: 13px; color: var(--ink-2); margin: 0 0 6px; line-height: 1.55; }

.nav-cta {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--ink-3);
}

/* TYPOGRAPHY UTILITIES */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.h-display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.95;
}
.h1 { font-size: clamp(48px, 8vw, 120px); }
.h2 { font-size: clamp(32px, 4.5vw, 56px); letter-spacing: -0.03em; line-height: 1.02; font-weight: 500;}
.h3 { font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.02em; line-height: 1.2; font-weight: 500;}
.lede {
  font-family: var(--font-body);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 62ch;
}

.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }
.divider-label {
  display: flex; align-items: center; gap: 16px;
  color: var(--ink-3);
}
.divider-label::before, .divider-label::after {
  content: ""; flex: 1; height: 1px; background: var(--rule);
}

/* BUTTONS */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--bg);
  font-size: 14px;
  font-weight: 500;
  border-radius: 0;
  transition: transform var(--t), background var(--t), color var(--t);
}
.btn:hover { transform: translateY(-1px); }
.btn.primary {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
.btn.ghost {
  background: transparent; color: var(--ink); border-color: var(--rule);
}
.btn.ghost:hover { border-color: var(--ink); }
.btn .arrow { transition: transform var(--t); }
.btn:hover .arrow { transform: translateX(3px); }

.kbd {
  font-family: var(--font-mono); font-size: 11px;
  padding: 2px 6px; border: 1px solid var(--rule); border-radius: 4px;
  color: var(--ink-3);
}

/* HERO */
.hero {
  padding: clamp(48px, 8vw, 120px) 0 clamp(60px, 8vw, 120px);
  position: relative;
}

/* variant: editorial (default) */
.hero.editorial .hero-grid {
  display: grid; grid-template-columns: 1fr; gap: 48px;
}
.hero.editorial .hero-head {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end;
}
.hero.editorial h1 {
  margin: 0;
}
.hero.editorial .hero-meta {
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-3);
  display: flex; flex-direction: column; gap: 10px;
}
.hero.editorial .hero-meta .row {
  display: flex; justify-content: space-between; padding: 8px 0;
  border-top: 1px solid var(--rule);
}
.hero.editorial .hero-visual {
  aspect-ratio: 21/9;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  position: relative; overflow: hidden;
}

/* variant: fullbleed */
.hero.fullbleed {
  padding: 0;
  height: auto;
  min-height: 560px;
  min-height: calc(100dvh - var(--nav-h));
  position: relative;
}
.hero.fullbleed .hero-bg {
  position: absolute; inset: 0; overflow: hidden;
}
.hero.fullbleed .hero-content {
  position: relative; z-index: 2;
  height: auto;
  min-height: 560px;
  min-height: calc(100dvh - var(--nav-h));
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--pad);
  max-width: var(--maxw);
  margin: 0 auto;
}
.hero.fullbleed h1 { color: #fff; margin: 0 0 16px; max-width: 14ch;}
.hero.fullbleed .lede { color: rgba(255,255,255,0.82); }
.hero.fullbleed .hero-meta-row {
  margin-top: 40px; display: flex; justify-content: space-between;
  align-items: flex-end; gap: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.7);
  font-family: var(--font-mono); font-size: 12px;
}

/* variant: split */
.hero.split .hero-grid {
  display: grid; grid-template-columns: 1.1fr 1fr;
  min-height: calc(100vh - var(--nav-h));
}
.hero.split .hero-left {
  padding: clamp(32px, 5vw, 72px);
  display: flex; flex-direction: column; justify-content: center; gap: 28px;
  border-right: 1px solid var(--rule);
}
.hero.split .hero-right {
  background: var(--bg-2);
  position: relative; overflow: hidden;
}
.hero.split h1 { margin: 0; font-size: clamp(40px, 6vw, 88px);}

/* KEY ART — the friendly face
   Replaces the earlier accent-glow placeholder. Three layers over black:
   the face, two shadow passes crossing it, and a vignette. container-type is
   required — .face-stage sizes itself in cqw/cqh so the face scales with
   whatever box it lands in (hero, game card, game detail) rather than needing
   a size per context. */
.key-art {
  position: absolute; inset: 0;
  overflow: hidden;
  background: #000;
  container-type: size;
}
.key-art .face-stage {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(102cqw, 102cqh); height: min(102cqw, 102cqh);
}
.key-art .face-stage > * { position: absolute; }

/* screen blend drops the artwork's black background out against the black
   stage, so the face reads as light rather than as a pasted rectangle. */
.key-art .ff-base {
  inset: 0;
  background: url("assets/friendly-face.png") center / 100% 100% no-repeat;
  opacity: .96;
  mix-blend-mode: screen;
}

/* Two shadow passes. The periods (17s and 26s) are deliberately not multiples
   of each other, and .b runs reversed and offset, so they drift in and out of
   phase instead of landing on a visible loop. */
.key-art .ff-pass {
  top: -20%; height: 140%; width: 70%;
  mix-blend-mode: multiply;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(0,0,0,0) 0%, rgba(0,0,0,.9) 45%, rgba(0,0,0,.9) 55%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%);
}
.key-art .ff-pass.a { animation: ffPass 17s cubic-bezier(.45,0,.55,1) infinite; }
.key-art .ff-pass.b {
  width: 45%;
  animation: ffPass 26s cubic-bezier(.45,0,.55,1) infinite reverse;
  animation-delay: -9s;
}
@keyframes ffPass {
  0%   { transform: translateX(-110%) rotate(-8deg); }
  100% { transform: translateX(240%)  rotate(-8deg); }
}

.key-art .ff-vignette {
  inset: 0;
  background: radial-gradient(ellipse at 50% 42%,
    rgba(0,0,0,0) 34%, rgba(0,0,0,.45) 76%, #000 100%);
}

/* Hero: the face sits a little high so the headline below it lands on clean
   black, and the vignette gets an extra bottom fade to carry into the copy. */
.hero.fullbleed .key-art .face-stage { top: 44%; }
.hero.fullbleed .key-art .ff-vignette {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(0,0,0,0) 26%, rgba(0,0,0,.42) 70%, #000 100%),
    linear-gradient(to top, #000 0%, rgba(0,0,0,.25) 34%, rgba(0,0,0,0) 58%);
}

/* Game cards are small and wide, so the face is scaled up and pushed down to
   crop to the eyes rather than shrinking the whole face into a letterbox. */
.game-card .key-art .face-stage {
  --s: min(max(150cqh, 60cqw), 118cqw);
  width: var(--s); height: var(--s);
  top: calc(50% + 0.2 * var(--s));
}
.game-card .key-art .grid-lines { display: none; }

/* Ripple ring travelling out across the grid. --r is animated (hence @property,
   which makes a custom property interpolate instead of snapping), and --px/--py
   are set from JS in the KeyArt component on every loop so it never starts from
   the same place twice. */
@property --r { syntax: "<percentage>"; inherits: false; initial-value: 0%; }

.key-art .grid-lines > i {
  content: ""; position: absolute; inset: 0;
  /* Lightened accent: the accent alone is too dark for a 1px line on black. */
  --ripple: color-mix(in srgb, var(--accent) 65%, #fff);
  background-image:
    linear-gradient(color-mix(in srgb, var(--ripple) 50%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ripple) 50%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at var(--px, 50%) var(--py, 46%),
    transparent 0,
    transparent calc(var(--r, 0%) - 9%),
    #000 var(--r, 0%),
    transparent calc(var(--r, 0%) + 9%),
    transparent 100%);
  animation: ffGridPulse 7s cubic-bezier(.25,.6,.3,1) infinite;
}
@keyframes ffGridPulse {
  0%        { --r: 0%;  opacity: 0; }
  8%        {           opacity: .9; }
  62%       {           opacity: .35; }
  70%, 100% { --r: 78%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .key-art .grid-lines > i { animation: none; opacity: 0; }
}
.game-card:not(.featured) .key-art .ff-base { opacity: .7; }

@media (prefers-reduced-motion: reduce) {
  .key-art .ff-pass { animation: none; }
}

/* Still used by .page-keyart-bg, which keeps the older glow treatment for the
   full-page backgrounds behind blog, posts and custom pages. These were defined
   alongside the key-art placeholder that the face replaced; they live here now
   so that removal did not silently stop those backgrounds animating. */
@keyframes spin  { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes drift { to { background-position: 400px 400px; } }

.key-art .grid-lines {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.key-art .badge {
  position: absolute; top: 20px; left: 20px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.8);
  display: flex; align-items: center; gap: 8px;
}
.key-art .badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #ff5c5c; animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.3; } }

/* PAGE KEYART BACKGROUND
   Full-page atmospheric version of the hero KeyArt. Rendered as a fixed div that
   covers the viewport while the page component is mounted. More subtle than the
   hero version — glows are softer, stars are dimmer, disc spins slower.
   The base uses var(--bg) so it respects the active theme. */
.page-keyart-bg {
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none; overflow: hidden;
  background:
    radial-gradient(ellipse at 22% 30%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 52%),
    radial-gradient(ellipse at 76% 65%, color-mix(in srgb, var(--accent) 6%, rgba(210,70,160,0.13)), transparent 55%),
    var(--bg);
}
.page-keyart-bg::before {
  /* drifting starfield — same dots as hero, lower opacity */
  content: "";
  position: absolute; inset: -20%;
  background-image:
    radial-gradient(1px 1px at 20% 30%, #fff, transparent),
    radial-gradient(1px 1px at 70% 80%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 40% 60%, #fff, transparent),
    radial-gradient(1px 1px at 85% 15%, #fff, transparent),
    radial-gradient(1px 1px at 15% 75%, #fff, transparent),
    radial-gradient(1px 1px at 55% 25%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 90% 55%, #fff, transparent),
    radial-gradient(1px 1px at 30% 90%, #fff, transparent),
    radial-gradient(1px 1px at 65% 45%, #fff, transparent),
    radial-gradient(1px 1px at 5% 50%, #fff, transparent);
  background-size: 400px 400px;
  opacity: 0.35;
  animation: drift 80s linear infinite;
}
.page-keyart-bg::after {
  /* slowly rotating conic disc — offset toward top-right, more blurred */
  content: "";
  position: absolute;
  left: 68%; top: 22%;
  width: 55%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, transparent 0deg,
      color-mix(in srgb, var(--accent) 26%, rgba(200,140,255,0.1)) 90deg,
      transparent 180deg,
      color-mix(in srgb, var(--accent) 12%, rgba(210,70,160,0.16)) 270deg,
      transparent 360deg);
  filter: blur(50px);
  animation: spin 70s linear infinite;
}
/* Content rendered above the page keyart background */
.page-keyart-content {
  position: relative; z-index: 2;
}

/* Hero fullbleed — floating screenshot cards over the KeyArt background */
.hero-shot-layer {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none; overflow: hidden;
}
.hero-shot-card {
  position: absolute;
  border-radius: 8px; overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.1);
  aspect-ratio: 16/9;
}
.hero-shot-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Split left/right, with weight increasing downward: the smallest card sits
   highest and the largest lowest, so nothing heavy lands at eye level. They
   previously all sat right and reached to 49% — card 2's left edge landed on
   the right eye, and the key art read as texture rather than as a face.
   Measured at 1920x1040: 2-23% x 6-31% (21%), 72-98% x 21-51% (26%),
   66-97% x 43-79% (31%), with the centre column clear.
   The left card stays high on purpose. Everything below roughly half-height on
   that side belongs to the headline, so a left card cannot move down without
   running over "Project Riptide." — an earlier attempt put its bottom 62px
   past the eyebrow. */
.hero-shot-card:nth-child(1) { top: 22%;    right: 2%; width: 26%; transform: rotate(-1.5deg); opacity: 0.90; }
.hero-shot-card:nth-child(2) { top: 7%;     left: 2%;  width: 21%; transform: rotate(2deg);    opacity: 0.85; }
/* Anchored from the BOTTOM, not the top: the button row sits at the foot of the
   hero, so a top-anchored card drifts into it as the hero grows. This holds its
   distance from the buttons at any height — 106px clear at 1920x1040. */
.hero-shot-card:nth-child(3) { bottom: 22%; right: 3%; width: 31%; transform: rotate(-1deg);   opacity: 0.80; }
/* fade: protects the headline and status row. This darkens from the BOTTOM
   rather than from the left edge, which the earlier right-aligned layout used —
   a left-edge ramp would smother the left-hand card. Same text protection,
   both top corners left bright for the cards. */
.hero-shot-fade {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top,    rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.32) 32%, transparent 58%),
    linear-gradient(to bottom, rgba(0,0,0,0.42) 0%, transparent 20%);
}

/* Game hero — KeyArt always behind; video/image centred at natural ratio */
.game-hero-media {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.game-hero-media .key-art { position: absolute; inset: 0; }
.game-hero-media .media-frame {
  position: relative; z-index: 1;
  width: 100%;
  max-width: min(100%, calc((100vh - var(--nav-h, 64px)) * 16 / 9));
  aspect-ratio: 16/9;
  border-radius: 4px; overflow: hidden;
  box-shadow: 0 0 80px rgba(0,0,0,0.5);
}
.game-hero-media .media-frame iframe,
.game-hero-media .media-frame video,
.game-hero-media .media-frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; border: none; display: block;
}

/* image placeholder — striped */
.img-ph {
  position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(135deg,
      var(--bg-2) 0, var(--bg-2) 8px,
      var(--bg-3) 8px, var(--bg-3) 16px);
  border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.1em; text-transform: uppercase;
}

/* SECTIONS */
section.block { padding: clamp(64px, 9vw, 140px) 0; }
.section-head {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
  align-items: end;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 48px;
}
.section-head .kicker { display: flex; flex-direction: column; gap: 8px;}

/* GAMES GRID */
.games-grid {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px;
}
.game-card {
  grid-column: span 6;
  display: flex; flex-direction: column; gap: 16px;
  cursor: pointer;
  position: relative;
}
.game-card.featured { grid-column: span 12; }
.game-card.small { grid-column: span 4; }
.game-card .cover {
  aspect-ratio: 16/9;
  position: relative; overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  transition: transform var(--t);
}
.game-card.featured .cover { aspect-ratio: 21/9; }
.game-card.small .cover { aspect-ratio: 4/5; }
.game-card:hover .cover { transform: translateY(-4px); }
.game-card .meta {
  display: flex; justify-content: space-between; align-items: baseline;
}
.game-card h3 { margin: 0; }
.game-card .year {
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-3);
}
.game-card .tagline {
  color: var(--ink-3); font-size: 15px; max-width: 50ch;
}
.game-card .platforms {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* BLOG */
.posts-grid {
  display: grid; grid-template-columns: 1fr; gap: 0;
}
.post-row {
  display: grid; grid-template-columns: 120px 1fr 1.4fr 160px 100px;
  gap: 32px; align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  transition: padding var(--t);
}
.post-row:hover { padding-left: 8px; }
.post-row:first-child { border-top: 1px solid var(--rule); }
.post-row .date {
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-3);
}
.post-row .type-chip {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 4px 8px; border: 1px solid var(--rule); border-radius: 3px;
  color: var(--ink-2);
  display: inline-block; width: max-content;
}
.post-row .type-chip.devlog { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent);}
.post-row .type-chip.patch { color: #3e8f3e; border-color: color-mix(in srgb, #3e8f3e 40%, transparent);}
.post-row .type-chip.essay { color: #b35b00; border-color: color-mix(in srgb, #b35b00 40%, transparent);}
.post-row .type-chip.release { color: #b33050; border-color: color-mix(in srgb, #b33050 40%, transparent);}
.post-row .type-chip.gallery { color: #5e50c0; border-color: color-mix(in srgb, #5e50c0 40%, transparent);}
.post-row .type-chip.video { color: #b33050; border-color: color-mix(in srgb, #b33050 40%, transparent);}
.post-row .title-col h3 {
  margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -0.01em;
}
.post-row .excerpt { color: var(--ink-3); font-size: 14px; }
.post-row .read-time { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4);}
.post-row .arrow-col { text-align: right; color: var(--ink-3); }

/* POST READER */
.post-article {
  max-width: 720px; margin: 0 auto; padding: 80px 24px 120px;
}
.post-article .post-header {
  padding-bottom: 40px; border-bottom: 1px solid var(--rule); margin-bottom: 48px;
}
.post-article h1 {
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: -0.03em; line-height: 1.02;
  margin: 16px 0 24px;
  font-weight: 500;
}
.post-article .post-meta {
  display: flex; gap: 16px; align-items: center;
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-3);
}
.post-article .post-body {
  font-family: var(--font-body);
  font-size: 19px; line-height: 1.65;
  color: var(--ink-2);
}
.post-article .post-body p { margin: 0 0 1.2em; }
.post-article .post-body h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 28px; letter-spacing: -0.02em;
  margin: 2em 0 0.6em; color: var(--ink);
}
.post-article .post-body h3 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 21px; letter-spacing: -0.015em;
  margin: 1.6em 0 0.4em; color: var(--ink);
}
.post-article .post-body figure {
  margin: 0;
}
.post-article .post-body img {
  margin: 1.5em 0;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}
.post-article .post-body .img-ph {
  margin: 2em 0; aspect-ratio: 16/9;
  border: 1px solid var(--rule);
}
.post-article .post-body blockquote {
  margin: 2em 0; padding-left: 24px;
  border-left: 2px solid var(--accent);
  font-style: italic; color: var(--ink);
}
.post-article .post-body ul {
  padding-left: 22px;
}
.post-article .post-body li { margin: 0.3em 0; }
.post-article .post-body code {
  font-family: var(--font-mono); font-size: 0.88em;
  background: var(--bg-2); padding: 2px 6px; border-radius: 3px;
}
.post-article .post-body pre {
  font-family: var(--font-mono); font-size: 14px;
  background: var(--bg-2); border: 1px solid var(--rule);
  padding: 20px; overflow-x: auto; line-height: 1.5;
  margin: 1.6em 0;
}
.post-article .post-body .video-embed {
  aspect-ratio: 16/9; background: #000; margin: 2em -60px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; position: relative; overflow: hidden;
  border: 1px solid var(--rule);
}
.post-article .post-body .video-embed::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at center, #2a1a3a, #000);
}
.post-article .post-body .video-embed .play {
  position: relative; z-index: 2;
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.3);
  display: grid; place-items: center;
  backdrop-filter: blur(10px);
}
.post-article .post-body .video-embed .play::after {
  content: ""; border-left: 14px solid #fff;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 4px;
}
.post-article .gallery-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
  margin: 2em -60px;
}
.post-article .gallery-grid .img-ph { margin: 0; aspect-ratio: 4/3; }
.post-article .gallery-grid .img-ph.span-2 { grid-column: span 2; aspect-ratio: 16/7; }

.prev-next {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  margin-top: 64px; padding-top: 40px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-display);
}
.prev-next a {
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px; border: 1px solid var(--rule);
  transition: border-color var(--t), background var(--t);
}
.prev-next a:hover { border-color: var(--ink); background: var(--bg-2); }
.prev-next .label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
}
.prev-next .title { font-weight: 500; letter-spacing: -0.01em; }
.prev-next a:last-child { text-align: right; }

/* GAME DETAIL */
.game-hero {
  position: relative;
  height: 70vh; min-height: 520px;
  overflow: hidden;
}
.game-hero .key-art { position: absolute; inset: 0; }
.game-hero .overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.75), transparent 50%);
  z-index: 1;
}
.game-hero .game-title-block {
  position: absolute; left: 0; right: 0; bottom: 40px; z-index: 2;
  padding: 0 var(--pad);
  max-width: var(--maxw); margin: 0 auto;
  color: #fff;
}
.game-hero h1 {
  margin: 0; font-size: clamp(56px, 9vw, 140px);
  letter-spacing: -0.04em; line-height: 0.9; font-weight: 500;
}
.game-hero .subtitle {
  font-family: var(--font-mono); font-size: 13px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-bottom: 12px;
}
.game-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--rule); border-left: 0; border-right: 0;
  margin-top: 0;
}
.game-stats .stat {
  padding: 24px var(--pad);
  border-left: 1px solid var(--rule);
}
.game-stats .stat:first-child { border-left: 0; }
.game-stats .stat .label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 6px;
}
.game-stats .stat .value {
  font-size: 18px; font-weight: 500; letter-spacing: -0.01em;
}

.game-body {
  display: grid; grid-template-columns: 1fr 300px;
  gap: 80px;
  padding: 80px 0 120px;
}
.game-body .sidebar {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--ink-3);
}
.game-body .sidebar .sb-row {
  padding: 12px 0; border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between;
}
.game-body .sidebar .sb-row:last-child { border-bottom: 1px solid var(--rule); }
.game-body .sidebar .label { color: var(--ink-4); }
.game-body .sidebar .value { color: var(--ink); }
.game-body .prose {
  font-family: var(--font-body);
  font-size: 18px; line-height: 1.6; color: var(--ink-2);
  max-width: 62ch;
}
.game-body .prose p { margin: 0 0 1.2em; }
.game-body .prose h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 32px; letter-spacing: -0.02em;
  margin: 2em 0 0.6em; color: var(--ink);
}

.screenshots {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px;
  padding-bottom: 120px;
}
.screenshots .img-ph {
  grid-column: span 4; aspect-ratio: 4/3;
}
.screenshots .img-ph.wide { grid-column: span 8; aspect-ratio: 16/9; }

/* Real screenshot wrappers — match placeholder sizing */
.screenshots .shot-wrap {
  grid-column: span 4; aspect-ratio: 4/3;
  overflow: hidden; border-radius: 4px;
  cursor: zoom-in; position: relative;
}
.screenshots .shot-wrap.wide { grid-column: span 8; aspect-ratio: 16/9; }
.screenshots .shot-wrap img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.3s ease;
}
.screenshots .shot-wrap:hover img { transform: scale(1.03); }

/* ABOUT */
.about-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start;
}
.about-grid .portrait {
  aspect-ratio: 4/5;
}
.about-grid .bio {
  font-family: var(--font-body); font-size: 19px; line-height: 1.6;
  color: var(--ink-2);
}
.about-grid .bio p { margin: 0 0 1em; }
.timeline {
  margin-top: 32px;
  font-family: var(--font-mono); font-size: 13px;
}
.timeline .t-row {
  display: grid; grid-template-columns: 80px 1fr;
  gap: 24px; padding: 10px 0;
  border-top: 1px solid var(--rule);
}
.timeline .t-row:last-child { border-bottom: 1px solid var(--rule); }
.timeline .year { color: var(--ink-3); }

/* CONTACT */
.contact-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start;
}
.contact-form {
  display: flex; flex-direction: column; gap: 16px;
}
.contact-form .field {
  display: flex; flex-direction: column; gap: 6px;
}
.contact-form label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
}
.contact-form input, .contact-form textarea, .contact-form select {
  font: inherit; font-size: 15px;
  background: transparent;
  color: var(--ink);
  border: 0; border-bottom: 1px solid var(--rule);
  padding: 10px 0;
  transition: border-color var(--t);
  outline: none;
}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus {
  border-color: var(--accent);
}
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form .submit-row {
  margin-top: 16px;
  display: flex; justify-content: space-between; align-items: center;
}

.contact-info .info-row {
  padding: 20px 0; border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: baseline;
}
.contact-info .info-row:last-child { border-bottom: 1px solid var(--rule); }
.contact-info .info-row .label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
}
.contact-info .info-row .value { font-size: 16px; font-weight: 500; }

/* FOOTER */
.footer {
  border-top: 1px solid var(--rule);
  padding: 60px 0 40px;
}
.footer .footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 24px;
}
.footer h4 {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 16px; font-weight: 500;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px;}
.footer ul a { font-size: 14px; color: var(--ink-2); transition: color var(--t);}
.footer ul a:hover { color: var(--ink); }
.footer .footer-bottom {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-4);
}

/* TWEAKS PANEL */
.tweaks-toggle {
  position: fixed; bottom: 20px; right: 20px; z-index: 100;
  background: var(--ink); color: var(--bg);
  padding: 10px 16px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  display: none; align-items: center; gap: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.tweaks-toggle.visible { display: inline-flex; }
.tweaks-panel {
  position: fixed; bottom: 20px; right: 20px; z-index: 110;
  width: 300px;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--ink);
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  font-family: var(--font-display);
  transform: translateY(20px); opacity: 0; pointer-events: none;
  transition: transform var(--t), opacity var(--t);
}
.tweaks-panel.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.tweaks-panel header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.tweaks-panel .body { padding: 16px; display: flex; flex-direction: column; gap: 20px; max-height: 70vh; overflow-y: auto;}
.tweaks-panel .group .group-label {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 8px;
}
.tweaks-panel .seg {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  border: 1px solid var(--rule);
}
.tweaks-panel .seg button {
  padding: 8px 10px; font-size: 12px;
  border-right: 1px solid var(--rule);
  color: var(--ink-3);
  transition: background var(--t), color var(--t);
}
.tweaks-panel .seg button:last-child { border-right: 0; }
.tweaks-panel .seg button.on { background: var(--ink); color: var(--bg); }
.tweaks-panel .swatches {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
}
.tweaks-panel .swatch {
  aspect-ratio: 1; border-radius: 50%;
  border: 2px solid transparent;
  transition: border-color var(--t), transform var(--t);
  cursor: pointer;
}
.tweaks-panel .swatch:hover { transform: scale(1.1); }
.tweaks-panel .swatch.on { border-color: var(--ink); }
.tweaks-panel .font-opts {
  display: flex; flex-direction: column; gap: 4px;
}
.tweaks-panel .font-opt {
  padding: 10px 12px; border: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; cursor: pointer;
  transition: border-color var(--t);
}
.tweaks-panel .font-opt.on { border-color: var(--ink); }
.tweaks-panel .font-opt .sample {
  font-size: 11px; color: var(--ink-3); font-family: var(--font-mono);
}
.tweaks-panel .close {
  font-family: var(--font-mono); font-size: 14px; color: var(--ink-3);
  padding: 0 4px;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .nav .container {
    display: flex; justify-content: space-between;
  }
  .hero.editorial .hero-head,
  .hero.split .hero-grid,
  .about-grid, .contact-grid,
  .section-head {
    grid-template-columns: 1fr;
  }
  .game-card, .game-card.small, .game-card.featured { grid-column: span 12; }
  .game-stats { grid-template-columns: repeat(2, 1fr); }
  .game-stats .stat:nth-child(3) { border-left: 0; }
  .game-body { grid-template-columns: 1fr; gap: 40px; }
  .screenshots .img-ph,
  .screenshots .shot-wrap { grid-column: span 6; }
  .screenshots .shot-wrap.wide { grid-column: span 12; }
  .post-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .post-row .arrow-col { display: none; }
  .footer .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none; }
  .nav-fab { display: flex; }
  .nav-drawer-backdrop.open { display: block; }
  .nav .container { padding: 0 16px; }
  .nav-account-btn { display: none; }
  .flow-nav-wrap { display: none; }
  /* Hero fullbleed — mobile */
  .hero.fullbleed .hero-content { padding: 48px var(--pad) 40px; }
  .hero.fullbleed .hero-meta-row { flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 24px; }
  .hero-shot-card { display: none; }
  .post-article .post-body .video-embed,
  .post-article .gallery-grid { margin-left: 0; margin-right: 0; }
}