/* ==========================================================================
   Narat Games: site styles (home, legal pages and 404).
   ========================================================================== */

:root {
  --ink: #07060f;
  --ink-2: #0d0b1a;
  --ink-3: #15122a;
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.16);
  --text: #f3f1ff;
  --muted: #a8a2c8;
  --dim: #6f6992;

  --brand: #6b3cff;
  --hot: #ff4f9a;
  --sun: #ffd23f;
  --mint: #3ce0a6;
  --sky: #39c6ff;
  --grad: linear-gradient(92deg, #ffd23f 0%, #ff7a59 30%, #ff4f9a 58%, #8a5bff 100%);

  --display: 'Bungee', 'Arial Black', system-ui, sans-serif;
  --body: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --gutter: max(20px, 4vw);
  --maxw: 1240px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* Film grain over everything: cheap, and it makes the dark feel expensive. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--hot); color: #fff; }

img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; border-radius: 6px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--sun); color: var(--ink); padding: 10px 16px; border-radius: 10px; font-weight: 800;
}
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }

.grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 22px;
}
.pulse {
  width: 8px; height: 8px; border-radius: 50%; background: var(--mint);
  box-shadow: 0 0 0 0 rgba(60, 224, 166, 0.6);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(60, 224, 166, 0.55); }
  70% { box-shadow: 0 0 0 10px rgba(60, 224, 166, 0); }
  100% { box-shadow: 0 0 0 0 rgba(60, 224, 166, 0); }
}

.h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 5.2vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: 26px;
  text-wrap: balance;
}
.lede { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--muted); max-width: 640px; }

/* ----- Buttons ----- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 54px; padding: 0 28px; border-radius: 999px;
  font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s;
}
.btn-primary { background: var(--text); color: var(--ink); box-shadow: 0 10px 40px -10px rgba(255, 79, 154, 0.6); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 50px -10px rgba(255, 79, 154, 0.85); }
.btn-ghost { border: 1px solid var(--line-2); color: var(--text); backdrop-filter: blur(8px); background: rgba(255, 255, 255, 0.03); }
.btn-ghost:hover { border-color: rgba(255, 255, 255, 0.4); transform: translateY(-2px); }

/* ----- Reveal on scroll ----- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { transform: none; transition: opacity 0.4s; }
}

/* ==========================================================================
   Nav
   ========================================================================== */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: 72px; padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 28px;
  transition: background 0.3s, border-color 0.3s, backdrop-filter 0.3s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled { background: rgba(7, 6, 15, 0.72); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-color: var(--line); }
.nav-logo img { height: 26px; width: auto; }
.nav-links { display: flex; gap: 30px; margin-left: auto; }
.nav-links a {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--text); }
.nav-cta {
  font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 11px 18px; border-radius: 999px; position: relative;
  background: linear-gradient(var(--ink-2), var(--ink-2)) padding-box, var(--grad) border-box;
  border: 1px solid transparent;
  transition: transform 0.2s var(--ease);
}
.nav-cta:hover { transform: translateY(-1px); }
.nav-burger { display: none; width: 44px; height: 44px; margin-left: auto; position: relative; }
.nav-burger span { position: absolute; left: 11px; right: 11px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.3s var(--ease); }
.nav-burger span:first-child { top: 17px; }
.nav-burger span:last-child { top: 25px; }
.nav.open .nav-burger span:first-child { transform: translateY(4px) rotate(45deg); }
.nav.open .nav-burger span:last-child { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-cta { display: none; }
  .nav-burger { display: block; }
  .nav-links {
    position: absolute; top: 72px; left: 0; right: 0; margin: 0;
    flex-direction: column; gap: 0; padding: 8px var(--gutter) 20px;
    background: rgba(7, 6, 15, 0.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity 0.25s, transform 0.25s var(--ease);
  }
  .nav-links a { padding: 14px 0; font-size: 14px; border-bottom: 1px solid var(--line); }
  .nav.open .nav-links { opacity: 1; pointer-events: auto; transform: none; }
  .nav.open { background: rgba(7, 6, 15, 0.94); }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; isolation: isolate;
}
.hero-bg {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(60% 50% at 50% 55%, rgba(107, 60, 255, 0.28), transparent 70%),
    radial-gradient(40% 35% at 18% 80%, rgba(255, 79, 154, 0.18), transparent 70%),
    radial-gradient(40% 35% at 85% 20%, rgba(57, 198, 255, 0.14), transparent 70%),
    var(--ink);
}
.hero-copy {
  position: relative; z-index: 2; text-align: center;
  padding: 120px var(--gutter) 140px; max-width: 1240px;
  pointer-events: none;
}
.hero-copy::before {
  content: ''; position: absolute; inset: 18% 6% 22%; z-index: -1;
  background: radial-gradient(closest-side, rgba(7, 6, 15, 0.72), rgba(7, 6, 15, 0) 100%);
  filter: blur(20px);
}
.hero-copy a { pointer-events: auto; }
.hero-title {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2rem, 5.6vw, 5rem); line-height: 1; letter-spacing: -0.015em;
  margin-bottom: 34px;
  text-shadow: 0 6px 40px rgba(7, 6, 15, 0.6);
}
.hero-title .line { display: block; text-wrap: balance; }
/* the brand, front and centre: the wordmark itself, flat gold with one solid
   black shadow and nothing else, the same in every theme */
.hero-logo { margin: 0 auto 22px; }
.hero-logo img { display: block; width: clamp(240px, 38vw, 620px); height: auto; margin: 0 auto; filter: drop-shadow(0 clamp(4px, 0.6vw, 9px) 0 #000); }
.hero-title .grad { text-shadow: none; filter: drop-shadow(0 6px 30px rgba(255, 79, 154, 0.25)); }
.hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.hero-foot {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 26px;
  display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--dim);
  pointer-events: none;
}
.scroll-cue { width: 22px; height: 34px; border: 1.5px solid var(--dim); border-radius: 12px; position: relative; }
.scroll-cue i { position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--muted); animation: cue 1.8s infinite var(--ease); }
@keyframes cue { 0% { opacity: 0; transform: translateY(-3px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(10px); } }

@media (max-width: 860px) {
  .hero-copy { padding: 96px var(--gutter) 120px; }
  .hero-copy::before { inset: 0 0 10%; }
  .hero-ctas .btn { height: 50px; padding: 0 22px; }
  .hero-foot { display: none; }
}

/* ==========================================================================
   Marquee
   ========================================================================== */
.marquee { position: relative; z-index: 3; padding: 70px 0; overflow: hidden; margin-top: -40px; }
.marquee-row { white-space: nowrap; overflow: hidden; padding: 16px 0; }
.marquee-a { background: var(--sun); color: var(--ink); transform: rotate(-2.5deg); box-shadow: 0 20px 60px -20px rgba(255, 210, 63, 0.4); }
.marquee-b { background: var(--brand); color: #fff; transform: rotate(1.8deg); margin-top: -46px; box-shadow: 0 20px 60px -20px rgba(107, 60, 255, 0.6); }
.marquee-track { display: inline-flex; animation: marquee 48s linear infinite; will-change: transform; }
.marquee-b .marquee-track { animation-direction: reverse; animation-duration: 56s; }
.marquee-track span { font-family: var(--display); font-size: clamp(1.4rem, 2.6vw, 2.2rem); line-height: 1; padding: 0 0.6em; text-transform: uppercase; }
.marquee-track span.star { padding: 0; opacity: 0.55; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ==========================================================================
   The slate: rows of tall game cards drifting sideways (js/site.js). They
   loop, pause under the mouse, can be dragged or swiped, and the page scroll
   simply passes over them, however many games there are.
   ========================================================================== */
.slate { padding-top: clamp(60px, 8vw, 110px); padding-bottom: clamp(50px, 7vw, 100px); }
.slate-head { margin-bottom: clamp(26px, 3.4vw, 44px); }
.slate-rows { display: grid; gap: clamp(6px, 1vw, 14px); }
.slate-row { overflow: hidden; padding: 10px 0 22px; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.slate-row.dragging { cursor: grabbing; }
.slate-track { display: flex; gap: clamp(16px, 1.9vw, 28px); width: max-content; will-change: transform; }
.panel {
  --c: #8a5bff;
  position: relative; flex: none; width: clamp(240px, 25vw, 370px); aspect-ratio: 25 / 32;
  border-radius: 30px; overflow: hidden; background: var(--ink-3);
  box-shadow: 0 30px 60px -40px var(--c), 0 0 0 1px rgba(255, 255, 255, 0.07) inset;
  isolation: isolate; transition: transform 0.3s var(--ease);
}
.slate-row:not(.dragging) .panel:hover { transform: translateY(-6px); }
.panel video, .panel .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; pointer-events: none; }
/* only a light shade at the foot, so the art stays the show */
html body .slate-row .panel::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(7, 6, 15, 0.28) 0%, rgba(7, 6, 15, 0) 26%); }
.slate-genre { position: absolute; top: 16px; left: 16px; z-index: 1; }
.panel .slate-store { position: absolute; top: 16px; right: 16px; z-index: 1; height: 28px; padding: 0 11px; gap: 6px; font-size: 10px; letter-spacing: 0.12em; }
/* the label: name and line in the bottom-left corner, as small as its words */
.panel-body {
  position: absolute; left: 14px; bottom: 14px; max-width: calc(100% - 28px); padding: 9px 13px;
  border-radius: 14px; background: rgba(8, 7, 18, 0.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
html body .slate-row .panel-name { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(1rem, 1.25vw, 1.2rem); line-height: 1.05; margin: 0 0 3px; }
html body .slate-row .panel-hook { color: #e4e0f6; font-size: 0.8rem; line-height: 1.25; margin: 0; }
/* pixel themes: square label, and a shadow that suits small type */
html.pixel-theme .slate-row .panel-body { border-radius: 0; }
html.pixel-theme .slate-row .panel-name { text-shadow: 2px 2px 0 #000; }
.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 999px;
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(7, 6, 15, 0.45); backdrop-filter: blur(6px);
}
.chip-soon { border-color: color-mix(in srgb, var(--c) 70%, white 0%); color: #fff; }
.chip-soon::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 12px var(--c); animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: 0.35; } }
.chip-live { border-color: rgba(60, 224, 166, 0.7); color: #fff; text-decoration: none; transition: background 0.2s, border-color 0.2s; }
.chip-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 12px var(--mint); }
.chip-live:hover { background: rgba(60, 224, 166, 0.16); border-color: var(--mint); }
.chip-live svg { opacity: 0.8; }

/* A game with no header video on the site: its icon, blown up, is the art. */
.panel-art { background: radial-gradient(120% 90% at 50% 30%, color-mix(in srgb, var(--c) 55%, #000 45%), var(--ink-2) 75%); }
.panel-art-bg {
  position: absolute; z-index: -2; left: 50%; top: 16%; width: 68%; aspect-ratio: 1;
  transform: translateX(-50%) rotate(-6deg); border-radius: 22%;
  background-size: cover; background-position: center;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

@media (max-width: 860px) {
  .panel { width: 70vw; border-radius: 24px; }
  .slate-row { padding: 6px 0 16px; }
}

/* ==========================================================================
   Gameplay wall: tilted columns of screenshots drifting past
   ========================================================================== */
.peek { padding-top: clamp(100px, 13vw, 180px); overflow: hidden; }
.peek-stage {
  position: relative; height: clamp(560px, 92vh, 920px); margin-top: 30px; overflow: hidden;
  perspective: 1800px;
}
.peek-wall {
  position: absolute; left: 50%; top: 50%; width: max(1700px, 128vw);
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 24px; align-items: start;
  transform: translate(-50%, -46%) rotateX(22deg) rotateZ(-9deg);
}
.peek-col { animation: peek-up 70s linear infinite; will-change: transform; }
.peek-col:nth-child(even) { animation-name: peek-down; }
@keyframes peek-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes peek-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
/* A thin soft edge where the wall meets the sections above and below, in
   their colours (each theme sets its own), so the line breaks without hiding
   the screens. Pixel themes step it in bands instead of a smooth fade. */
.peek-stage { --peek-top: #07060e; --peek-bottom: #07060e; }
.peek-stage::before, .peek-stage::after { content: ''; position: absolute; left: 0; right: 0; z-index: 2; height: clamp(26px, 2.8vw, 40px); pointer-events: none; }
.peek-stage::before { top: 0; background: linear-gradient(180deg, var(--peek-top), transparent); }
.peek-stage::after { bottom: 0; background: linear-gradient(0deg, var(--peek-bottom), transparent); }
html.pixel-theme .peek-stage::before { background: linear-gradient(180deg, var(--peek-top) 0 25%, color-mix(in srgb, var(--peek-top) 60%, transparent) 25% 50%, color-mix(in srgb, var(--peek-top) 28%, transparent) 50% 75%, transparent 75%); }
html.pixel-theme .peek-stage::after { background: linear-gradient(0deg, var(--peek-bottom) 0 25%, color-mix(in srgb, var(--peek-bottom) 60%, transparent) 25% 50%, color-mix(in srgb, var(--peek-bottom) 28%, transparent) 50% 75%, transparent 75%); }

.shot {
  position: relative; margin: 0 0 24px; aspect-ratio: 600 / 1299; border-radius: 24px; overflow: hidden;
  background: var(--ink-3);
  box-shadow: 0 40px 70px -34px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.1);
  transition: transform 0.4s var(--ease), box-shadow 0.4s;
}
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot:hover { transform: scale(1.035); box-shadow: 0 50px 90px -30px rgba(107, 60, 255, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.25); }
.shot.locked img { filter: blur(16px) saturate(1.25) brightness(0.55); transform: scale(1.2); }
.shot-lock {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 12px, transparent 12px 24px);
}
.shot-lock svg { width: 46px; height: auto; filter: drop-shadow(0 0 16px rgba(255, 79, 154, 0.7)); }
.shot-lock b {
  font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase;
  color: #ffd1e6; padding: 7px 12px; border: 1.5px solid rgba(255, 143, 192, 0.8); border-radius: 8px; transform: rotate(-8deg);
}
/* the game's name on each screen, in the theme's own chip; it wraps rather than cuts */
.peek .shot .shot-name {
  position: absolute; left: 12px; bottom: 12px; z-index: 1; max-width: calc(100% - 24px);
  height: auto; min-height: 28px; padding: 5px 12px; line-height: 1.15; white-space: normal; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .peek-col { animation: none; } }
@media (max-width: 860px) {
  .peek-stage { height: 560px; }
  .peek-wall { width: 190vw; grid-template-columns: repeat(5, 1fr); gap: 12px; transform: translate(-50%, -46%) rotateX(18deg) rotateZ(-9deg); }
  .peek-col:nth-child(n+6) { display: none; }
  .shot { border-radius: 14px; margin-bottom: 12px; }
  .shot-lock svg { width: 30px; }
  .shot-lock b { font-size: 9px; padding: 5px 8px; letter-spacing: 0.18em; }
  /* the screens are small here: the whole chip shrinks, so each theme's font keeps its proportions */
  .peek .shot .shot-name { left: 7px; bottom: 7px; max-width: calc((100% - 14px) / 0.6); transform: scale(0.6); transform-origin: left bottom; }
}

/* ==========================================================================
   The machine
   ========================================================================== */
.machine { padding: clamp(100px, 13vw, 180px) 0 clamp(70px, 9vw, 120px); }
.machine { position: relative; }
.rocket-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.flow { margin-top: 60px; position: relative; }
.flow-canvas { width: 100%; height: 200px; }
.stages { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; margin-top: 8px; }
.stages li { border-top: 1px solid var(--line-2); padding-top: 18px; }
.stage-n { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; color: var(--dim); }
.stages h3 { font-family: var(--display); font-weight: 400; font-size: 1.15rem; text-transform: uppercase; margin: 6px 0 8px; letter-spacing: 0.01em; }
.stages p { color: var(--muted); font-size: 15px; line-height: 1.55; }
.stages li:nth-child(3) h3 { color: var(--hot); }
.stages li:nth-child(5) h3 { color: var(--sun); }

.os {
  margin-top: 70px; display: flex; gap: 28px; align-items: center;
  padding: 30px 34px; border-radius: 24px;
  background: linear-gradient(var(--ink-2), var(--ink-2)) padding-box, linear-gradient(120deg, rgba(255, 210, 63, 0.6), rgba(255, 79, 154, 0.5), rgba(107, 60, 255, 0.7)) border-box;
  border: 1px solid transparent;
}
.os-badge { flex: none; padding: 9px 14px; border-radius: 10px; background: rgba(107, 60, 255, 0.16); color: #c6b5ff; font-weight: 600; }
.os p { color: #d9d5f0; font-size: clamp(1rem, 1.5vw, 1.18rem); }
.os b { color: var(--text); }
@media (max-width: 860px) {
  .flow-canvas { height: 150px; }
  .stages { grid-template-columns: 1fr; gap: 0; }
  .stages li { display: grid; grid-template-columns: 44px 1fr; column-gap: 8px; padding: 16px 0; }
  .stages li .stage-n { grid-row: span 2; padding-top: 4px; }
  .stages h3 { margin-top: 0; }
  .os { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; }
}

/* ==========================================================================
   The pipeline wall
   ========================================================================== */
.pipeline { padding: clamp(70px, 9vw, 120px) 0 clamp(90px, 12vw, 160px); }
.wall { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(14px, 2vw, 26px); margin-top: 54px; perspective: 900px; }
.tile { --rx: 0deg; --ry: 0deg; --c: #8a5bff; position: relative; }
.tile-face {
  position: relative; aspect-ratio: 1; border-radius: 22%; overflow: hidden;
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 0.35s var(--ease), box-shadow 0.35s;
  box-shadow: 0 22px 50px -24px var(--c), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.tile:hover .tile-face { box-shadow: 0 30px 70px -20px var(--c), 0 0 0 1px rgba(255, 255, 255, 0.2); }
.tile-face img { width: 100%; height: 100%; object-fit: cover; }
.tile-face::after { /* glare */
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at var(--gx, 30%) var(--gy, 20%), rgba(255, 255, 255, 0.35), transparent 45%);
  opacity: 0; transition: opacity 0.3s;
}
.tile:hover .tile-face::after { opacity: 1; }
.tile-name { margin-top: 14px; font-family: var(--display); font-size: 0.95rem; text-transform: uppercase; line-height: 1.1; }
.tile-meta { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); margin-top: 4px; }
.tile-live { display: inline-flex; align-items: center; gap: 5px; color: var(--mint); text-decoration: none; }
.tile-live:hover { text-decoration: underline; }

.tile.locked .tile-face {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 10px, transparent 10px 20px),
    radial-gradient(circle at 50% 45%, rgba(255, 79, 154, 0.22), transparent 60%),
    var(--ink-3);
  display: grid; place-items: center;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}
.tile.locked .tile-face::before { /* scanline */
  content: ''; position: absolute; left: 0; right: 0; height: 30%; top: -30%;
  background: linear-gradient(180deg, transparent, rgba(255, 79, 154, 0.16), transparent);
  animation: scan 3.2s linear infinite;
}
.tile.locked:nth-child(odd) .tile-face::before { animation-delay: -1.6s; }
@keyframes scan { to { top: 100%; } }
.tile.locked svg { width: 34%; height: auto; opacity: 0.85; }
.tile.locked .tile-name { color: var(--dim); letter-spacing: 0.06em; }
@media (prefers-reduced-motion: reduce) { .tile.locked .tile-face::before { animation: none; } }
@media (max-width: 960px) { .wall { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .wall { grid-template-columns: repeat(3, 1fr); } .tile-name { font-size: 0.78rem; } .tile-meta { display: none; } }

/* ==========================================================================
   Thesis
   ========================================================================== */
.thesis {
  padding: clamp(110px, 15vw, 210px) 0; text-align: center; position: relative; overflow: hidden;
  background: radial-gradient(50% 60% at 50% 50%, rgba(107, 60, 255, 0.2), transparent 70%);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.thesis-big { font-family: var(--display); text-transform: uppercase; font-size: clamp(2.3rem, 6.4vw, 5.6rem); line-height: 0.98; margin-bottom: 34px; text-wrap: balance; }
.thesis .lede { margin: 0 auto; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact { padding: clamp(100px, 13vw, 180px) 0 clamp(80px, 10vw, 130px); }
.mail-main {
  margin-top: 54px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: clamp(26px, 4vw, 46px); border-radius: 28px; position: relative; overflow: hidden;
  background: linear-gradient(var(--ink-2), var(--ink-2)) padding-box, var(--grad) border-box;
  border: 1px solid transparent;
}
.mail-main .mono { color: var(--muted); margin-bottom: 10px; }
.mail-big { font-weight: 800; font-size: clamp(1.4rem, 4.4vw, 3.4rem); letter-spacing: -0.02em; line-height: 1.1; word-break: break-all; }
/* hover only changes the colour, like the smaller addresses below: no glow, no underline */
.mail-big { transition: color 0.2s; }
.mail-big:hover { color: var(--sun); }
.mails { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 18px; }
/* label and Copy share the top row; the address gets its own full-width line, so they never overlap */
.mail { padding: 22px 24px; border-radius: 20px; background: var(--ink-2); border: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; position: relative; }
.mail .mono { grid-column: 1; grid-row: 1; margin: 0; }
.mail a { grid-column: 1 / -1; grid-row: 2; }
.mail .mono { color: var(--dim); }
.mail a { font-weight: 700; font-size: 1.05rem; word-break: break-all; }
.mail a:hover { color: var(--sun); }
.mail .copy { grid-column: 2; grid-row: 1; padding: 6px 10px; font-size: 10px; }
.copy {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line-2); color: var(--muted);
  transition: color 0.2s, border-color 0.2s, background 0.2s; flex: none;
}
.copy:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.4); }
.copy.done { color: var(--ink); background: var(--mint); border-color: var(--mint); }
@media (max-width: 1180px) { .mails { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) {
  .mails { grid-template-columns: 1fr; }
  .mail-main { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.foot { border-top: 1px solid var(--line); padding: 40px 0 48px; }
.foot-inner { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.foot-logo { height: 24px; width: auto; opacity: 0.9; }
.foot-legal { display: flex; gap: 22px; flex-wrap: wrap; }
.foot-legal a { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.foot-legal a:hover { color: var(--text); }
.foot-copy { margin-left: auto; color: var(--dim); font-size: 14px; }
@media (max-width: 860px) { .foot-copy { margin-left: 0; width: 100%; } }

/* ==========================================================================
   Legal pages (privacy, terms, cookies): the words are the originals,
   only the dress is new.
   ========================================================================== */
.legal-main { position: relative; padding: 150px 0 110px; isolation: isolate; }
.legal-main::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 620px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(50% 70% at 20% 0%, rgba(107, 60, 255, 0.26), transparent 70%),
    radial-gradient(40% 60% at 85% 10%, rgba(255, 79, 154, 0.14), transparent 70%);
}
.legal-head { max-width: 860px; margin-bottom: 64px; }
.legal-back {
  display: block; width: fit-content; margin-bottom: 34px; color: var(--muted); text-decoration: none;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
}
.legal-back:hover { color: var(--text); }
.legal-h1 {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2.5rem, 7vw, 5.2rem); line-height: 0.98; margin-bottom: 22px;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.legal-meta { color: var(--muted); font-size: 15px; line-height: 1.8; }
.legal-meta strong { color: var(--text); font-weight: 700; }
.legal-switch { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.legal-switch a {
  padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); text-decoration: none;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.legal-switch a:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.4); }
.legal-switch a[aria-current="page"] { color: var(--ink); background: var(--text); border-color: var(--text); }

.legal-grid { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 64px; align-items: start; }
.legal-toc { position: sticky; top: 104px; }
.legal-toc .mono { color: var(--dim); margin-bottom: 14px; }
.legal-toc ol { list-style: none; }
.legal-toc a {
  display: block; padding: 7px 0 7px 16px; border-left: 2px solid var(--line); color: var(--muted);
  font-size: 14px; line-height: 1.4; text-decoration: none; transition: color 0.2s, border-color 0.2s;
}
.legal-toc a:hover { color: var(--text); }
.legal-toc a.on { color: var(--text); border-left-color: var(--hot); }

.legal-content { max-width: 760px; color: #d6d2ee; font-size: 17px; line-height: 1.75; }
.legal-section { padding: 34px 0; border-top: 1px solid var(--line); }
.legal-section:first-child { border-top: 0; padding-top: 0; }
.legal-content h2 {
  font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em;
  color: var(--text); font-size: clamp(1.15rem, 2.2vw, 1.45rem); line-height: 1.2; margin-bottom: 16px; scroll-margin-top: 100px;
}
.legal-content h3 { color: var(--text); font-size: 1.05rem; font-weight: 800; margin: 22px 0 8px; }
.legal-content p { margin-bottom: 12px; }
.legal-content ul { list-style: none; margin: 8px 0 14px; }
.legal-content li { position: relative; padding-left: 24px; margin: 8px 0; }
.legal-content li::before {
  content: ''; position: absolute; left: 4px; top: 0.72em; width: 8px; height: 8px; border-radius: 2px;
  background: var(--grad);
}
.legal-content strong { color: var(--text); font-weight: 700; }
.legal-content a { color: var(--sun); text-decoration: underline; text-underline-offset: 3px; }
.legal-info-box {
  margin: 20px 0 8px; padding: 22px 24px; border-radius: 18px;
  background: linear-gradient(var(--ink-2), var(--ink-2)) padding-box, linear-gradient(120deg, rgba(255, 210, 63, 0.5), rgba(255, 79, 154, 0.4), rgba(107, 60, 255, 0.6)) border-box;
  border: 1px solid transparent;
}
.legal-info-box h3 { margin-top: 0; }
.legal-info-box p:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
  .legal-main { padding: 112px 0 80px; }
  .legal-head { margin-bottom: 36px; }
  .legal-grid { grid-template-columns: 1fr; gap: 0; }
  .legal-toc { display: none; }
  .legal-content { font-size: 16px; }
  .legal-switch { gap: 8px; }
  .legal-switch a { padding: 8px 12px; font-size: 11px; letter-spacing: 0.08em; }
}

/* ==========================================================================
   404
   ========================================================================== */
.lost { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 100px var(--gutter); position: relative; overflow: hidden; }
.lost-code { font-family: var(--display); font-size: clamp(7rem, 30vw, 22rem); line-height: 0.85; }
.lost h1 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.6rem, 4vw, 2.6rem); margin: 18px 0 14px; }
.lost p { color: var(--muted); margin: 0 auto 34px; max-width: 460px; }
.lost-continue { font-family: var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--sun); margin-bottom: 26px; font-size: 14px; }

/* ==========================================================================
   Pixel themes (Retro, Sierra, LucasArts): js/pixel.js redraws pictures,
   video and canvases at a quarter size; these let them scale up as hard pixels
   ========================================================================== */
html.pixel-theme .px-video { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; image-rendering: pixelated; }
html.pixel-theme .flow-canvas, html.pixel-theme .rocket-layer { image-rendering: pixelated; }
/* no 3D tilts: the browser smooths anything it rotates, which would soften the pixels */
html.pixel-theme .peek-wall { transform: translate(-50%, -48%) !important; }
html.pixel-theme .tile-face { transform: none !important; }
html.pixel-theme .tile-face::after { display: none; }
/* the Sierra score sits in the top bar only in that theme */
.nav-score { display: none; }

/* The machine's easter eggs (js/flow-skins.js) say things over the section;
   each theme styles the words. */
.flow-say {
  position: absolute; z-index: 4; transform: translate(-50%, -100%); pointer-events: none;
  max-width: min(460px, 88vw); text-align: center; line-height: 1.2;
  animation: flow-say 2.2s ease both;
}
@keyframes flow-say {
  0% { opacity: 0; transform: translate(-50%, -80%) scale(0.85); }
  10% { opacity: 1; transform: translate(-50%, -100%) scale(1); }
  85% { opacity: 1; transform: translate(-50%, -100%); }
  100% { opacity: 0; transform: translate(-50%, -120%); }
}