:root {
  --bg: oklch(0.15 0.012 265);
  --fg: oklch(0.95 0.008 265);
  --accent: oklch(0.74 0.17 45);
  --accent-hover: oklch(0.86 0.12 45);
  --accent-btn-hover: oklch(0.82 0.15 45);
  --muted-1: oklch(0.76 0.01 265);
  --muted-2: oklch(0.72 0.01 265);
  --muted-3: oklch(0.68 0.01 265);
  --muted-4: oklch(0.6 0.01 265);
  --muted-5: oklch(0.58 0.01 265);
  --muted-6: oklch(0.5 0.01 265);
  --border-1: oklch(0.24 0.012 265);
  --border-2: oklch(0.26 0.012 265);
  --border-3: oklch(0.28 0.015 265);
  --border-4: oklch(0.32 0.015 265);
  --border-5: oklch(0.34 0.015 265);
  --border-6: oklch(0.36 0.015 265);
  --card-bg: oklch(0.18 0.012 265 / 0.9);
  --track-bg: oklch(0.3 0.012 265);
  --shadow: oklch(0.05 0.02 265 / 0.9);
  --gutter: 40px;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
}

body {
  color: var(--fg);
  font-family: 'Space Grotesk', Helvetica, sans-serif;
  overflow-x: clip;
}

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

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

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px var(--gutter);
  /* Belt-and-braces: without a cap, an oversized child (e.g. a logo image
     rendering unstyled) grows this box instead of being clipped by it. */
  max-height: 54px;
  overflow: hidden;
  /* Solid enough that page content scrolling underneath stays out of the way. */
  background: oklch(0.15 0.012 265 / 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: none;
}

.logo-mark {
  display: block;
  height: 1em;
  width: auto;
}

.nav {
  display: flex;
  gap: 28px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

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

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

/* ---------- Homepage icon wall ---------- */

.wall-stage {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  /* minmax(0, 1fr) stops the very wide icon rows from stretching the
     column (and pushing the text box off-screen). */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  padding: 64px var(--gutter) 40px;
  overflow: hidden;
}

.icon-flow {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(18px, 3vh, 34px);
  margin: 0 calc(var(--gutter) * -1);
  padding: 12px 0 28px;
  /* Icons fade in and out at the screen edges rather than being cut off. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.flow-lane {
  overflow: hidden;
  padding: 14px 0;
}

.flow-track {
  display: flex;
  gap: calc(var(--size) * 0.45);
  width: max-content;
  animation: flow-left var(--dur) linear infinite;
}

.lane-reverse .flow-track {
  animation-name: flow-right;
}

.flow-icon {
  flex: none;
  width: var(--size);
  aspect-ratio: 1;
  border: 1px solid var(--border-4);
  border-radius: 24%;
  overflow: hidden;
  box-shadow: 0 14px 34px var(--shadow);
  transform: rotate(var(--r));
  animation: flow-bob 5s ease-in-out infinite;
  animation-delay: var(--d);
}

.flow-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The track holds four copies of the row, so sliding it by half lands
   exactly where it started and the loop is seamless. */
@keyframes flow-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes flow-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

@keyframes flow-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

@media (prefers-reduced-motion: reduce) {
  .flow-track,
  .flow-icon {
    animation: none;
  }
}

.wall-info {
  position: relative;
  display: grid;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.wall-intro {
  border: 1px solid var(--border-3);
  background: var(--card-bg);
  padding: 20px 26px 18px;
}

.wall-intro h1 {
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin: 0;
}

.store-btn.wall-cta {
  flex: 0 1 260px;
}

/* ---------- Menu ---------- */

.menu-toggle {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border: none;
  background: none;
  color: var(--fg);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.menu-toggle:hover {
  color: var(--accent);
}

.menu-toggle-bars,
.menu-toggle-bars::before {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
}

.menu-toggle-bars {
  position: relative;
  transform: translateY(-3px);
}

.menu-toggle-bars::before {
  content: '';
  position: absolute;
  top: 6px;
}

.menu {
  position: fixed;
  inset: 0;
  z-index: 100;
}

.menu[hidden] {
  display: none;
}

.menu-backdrop {
  position: absolute;
  inset: 0;
  background: oklch(0.05 0.02 265 / 0.6);
}

.menu-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 100%);
  overflow-y: auto;
  background: var(--bg);
  border-left: 1px solid var(--border-3);
  padding: 22px var(--gutter) 40px;
  display: flex;
  flex-direction: column;
}

.menu-close {
  align-self: flex-end;
  margin-bottom: 28px;
  padding: 6px 0;
  border: none;
  background: none;
  color: var(--muted-3);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.menu-close:hover {
  color: var(--accent);
}

.menu-games,
.menu-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-games a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 0;
  color: var(--fg);
  font-size: 17px;
  font-weight: 500;
}

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

.menu-games img {
  width: 40px;
  height: 40px;
  border-radius: 24%;
  border: 1px solid var(--border-4);
  object-fit: cover;
}

.menu-all {
  margin: 12px 0 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.menu-links {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border-1);
}

.menu-links a {
  display: block;
  padding: 8px 0;
  color: var(--fg);
  font-size: 17px;
  font-weight: 500;
}

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

.menu-open {
  overflow: hidden;
}

/* ---------- Contact ---------- */

.contact-email {
  display: inline-grid;
  margin: 8px 0 24px;
  padding: 14px 22px;
  text-decoration: none !important;
}

.contact-email .store-main {
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0.04em;
}

.art-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10%;
  background: linear-gradient(160deg, oklch(0.21 0.014 265), oklch(0.16 0.012 265));
  color: var(--muted-6);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.5;
}

.card-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}

.card-pitch {
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted-1);
  margin: 11px auto 0;
  max-width: 50ch;
  text-wrap: pretty;
}

.card-links {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 14px;
}

.store-btn {
  display: grid;
  gap: 4px;
  justify-items: center;
  flex: 0 1 170px;
  border: 1px solid var(--border-6);
  color: var(--fg);
  padding: 10px 8px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.store-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.store-btn-primary {
  background: var(--accent);
  color: var(--bg);
  border: none;
  font-weight: 500;
}

.store-btn-primary:hover {
  background: var(--accent-btn-hover);
  color: var(--bg);
}

.store-sub {
  font-size: 9.5px;
  opacity: 0.6;
}

.store-btn-primary .store-sub {
  opacity: 0.75;
}

.store-main {
  font-size: 12px;
}

/* ---------- Small screens ---------- */

@media (max-width: 640px) {
  :root {
    --gutter: 20px;
  }

  .site-header {
    padding: 12px var(--gutter);
  }

  .card-links {
    gap: 6px;
  }

  .store-btn {
    padding: 8px 4px;
  }

  .store-sub {
    font-size: 8px;
  }

  .store-main {
    font-size: 10.5px;
  }

  .wall-stage {
    padding-top: 56px;
  }

  .flow-lane {
    --size: 84px !important;
  }
}

/* ---------- Legal pages ---------- */

.legal {
  max-width: 720px;
  margin: 0 auto;
  padding: 130px var(--gutter) 100px;
}

.legal .eyebrow {
  margin: 0 0 18px;
}

.legal h1 {
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin: 0 0 8px;
}

.legal .legal-updated {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted-4);
  margin: 0 0 48px;
}

.legal h2 {
  font-size: 22px;
  letter-spacing: -0.01em;
  font-weight: 700;
  margin: 40px 0 14px;
}

.legal p,
.legal li {
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted-1);
  margin: 0 0 16px;
  text-wrap: pretty;
}

.legal ul {
  margin: 0 0 16px;
  padding-left: 22px;
}

.legal a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-back {
  display: inline-block;
  margin-top: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.analytics-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid var(--border-3);
  background: var(--card-bg);
  padding: 18px 22px;
  margin: 20px 0 10px;
}

.analytics-toggle-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 4px;
}

.analytics-toggle-desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted-3);
  margin: 0;
}

.toggle-switch {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 25px;
  padding: 0;
  border: 1px solid var(--border-5);
  border-radius: 999px;
  background: var(--border-2);
  cursor: pointer;
}

.toggle-switch[aria-checked="true"] {
  background: var(--accent);
  border-color: var(--accent);
}

.toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--fg);
  transition: transform 0.15s ease;
}

.toggle-switch[aria-checked="true"] .toggle-knob {
  transform: translateX(19px);
  background: var(--bg);
}

/* ---------- Consent banner ---------- */

.consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px var(--gutter);
  background: oklch(0.12 0.012 265 / 0.97);
  border-top: 1px solid var(--border-3);
  backdrop-filter: blur(8px);
}

.consent-text {
  margin: 0;
  max-width: 640px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted-1);
}

.consent-text a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.consent-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.consent-btn {
  border: 1px solid var(--border-6);
  background: transparent;
  color: var(--fg);
  padding: 10px 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.consent-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.consent-btn-primary {
  background: var(--accent);
  color: var(--bg);
  border: none;
  font-weight: 500;
}

.consent-btn-primary:hover {
  background: var(--accent-btn-hover);
  color: var(--bg);
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--border-1);
  padding: 44px var(--gutter) 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* ---------- Games catalogue ---------- */

.games-page {
  max-width: 1040px;
  margin: 0 auto;
  padding: 130px var(--gutter) 100px;
}

.games-page .eyebrow {
  margin: 0 0 18px;
}

.games-page h1 {
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin: 0 0 12px;
}

.games-page-intro {
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted-1);
  max-width: 60ch;
  margin: 0 0 36px;
  text-wrap: pretty;
}

.category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}

.category-tab {
  border: 1px solid var(--border-5);
  background: transparent;
  color: var(--muted-2);
  padding: 9px 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.category-tab:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.category-tab[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  font-weight: 500;
}

.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.game-tile {
  border: 1px solid var(--border-3);
  background: var(--card-bg);
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Same specificity as .game-tile's own "display: flex", so without this the
   [hidden] attribute the filter script sets has no visual effect at all —
   .game-tile's rule wins the cascade just by coming later in the file. */
.game-tile {
  scroll-margin-top: 80px;
}

.game-tile:target {
  border-color: var(--accent);
}

.game-tile[hidden] {
  display: none;
}

.game-tile-icon {
  width: 84px;
  height: 84px;
  border-radius: 24%;
  overflow: hidden;
  border: 1px solid var(--border-4);
  margin-bottom: 18px;
}

.game-tile-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.game-tile-icon.art-placeholder {
  padding: 8%;
  font-size: 9px;
}

.game-tile-category {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 8px;
}

.game-tile h2 {
  font-size: 20px;
  letter-spacing: -0.01em;
  font-weight: 700;
  margin: 0 0 8px;
}

.game-tile-pitch {
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted-1);
  margin: 0 0 16px;
  flex-grow: 1;
  text-wrap: pretty;
}

.game-tile .card-links {
  justify-content: center;
  align-self: stretch;
  margin-top: 0;
}

.game-tile .store-btn {
  flex: 0 1 140px;
}