/* btg-labs.com — site stylesheet  ·  redesigned 2026-06-20
   Fonts: Cinzel (display headings) · Barlow Condensed (bold display labels)
          · Public Sans (body)  — loaded via Google Fonts in each page <head>
   Palette: ink / hull / gold / ember / paper — nautical ledger theme
   Mobile-responsive · prefers-reduced-motion aware
   Single stylesheet — no inline <style> blocks anywhere in the site.
   ─────────────────────────────────────────────────────────────────── */

:root {
  --bg:            #090a0c;   /* ink */
  --bg-panel:      #121418;   /* hull */
  --bg-elevated:   #16181d;
  --fg:            #d4cfc3;   /* paper */
  --fg-dim:        #a09585;
  --fg-faint:      #7a7885;
  --border:        #1f2227;
  --accent:        #c5a059;   /* gold */
  --accent-bright: #d9b87a;
  --accent-glow:   197, 160, 89;
  --ember:         #e26e2e;   /* orange — CTA band only */
  --max:           1120px;
  --max-narrow:    760px;
}

/* Game page gold shifts slightly warmer */
body.game-pt {
  --accent:        #c8a04a;
  --accent-bright: #dfc07a;
  --accent-glow:   200, 160, 74;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); text-decoration: none; transition: color .15s; }
a:hover { color: var(--accent-bright); }

/* ── Header ─────────────────────────────────────────────────────── */

header {
  background: rgba(9, 10, 12, 0.90);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--border);
}
.scroll-progress {
  position: absolute;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-bright) 100%);
  box-shadow: 0 0 10px rgba(var(--accent-glow), 0.55);
  pointer-events: none;
  transition: width 0.08s linear;
  z-index: 1;
}
header .inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.brand { display: flex; align-items: center; }
.brand a { display: inline-flex; align-items: center; color: var(--fg); transition: opacity .2s; }
.brand a:hover { opacity: 0.85; }
.brand .logo { height: 28px; width: auto; display: block; }

nav { display: flex; align-items: center; flex-wrap: wrap; gap: 0; }
nav a {
  font-size: 13px;
  margin-left: 28px;
  color: var(--fg-dim);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 3px;
}
nav a:first-child { margin-left: 0; }
nav a:hover { color: var(--fg); }
nav a.current { color: var(--accent); }
nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .3s cubic-bezier(.16,.84,.44,1);
}
nav a:hover::after, nav a.current::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* Wishlist button in nav */
.nav-wishlist {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 24px;
  padding: 8px 16px;
  background: rgba(197, 160, 89, 0.10);
  border: 1px solid rgba(197, 160, 89, 0.25);
  border-radius: 4px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background .2s, color .2s;
}
.nav-wishlist::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.nav-wishlist:hover {
  background: rgba(197, 160, 89, 0.20);
  color: var(--accent-bright);
}
/* nav-wishlist overrides the ::after underline from nav a */
.nav-wishlist::after { display: none; }

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

main { flex: 1; width: 100%; }

/* constrained content column */
section {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 32px;
}

/* ── Typography ──────────────────────────────────────────────────── */

h1 {
  font-family: 'Cinzel', 'Palatino Linotype', Palatino, serif;
  font-size: 60px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-weight: 700;
  margin-bottom: 24px;
  color: var(--fg);
}
h2 {
  font-family: 'Cinzel', 'Palatino Linotype', Palatino, serif;
  font-size: 28px;
  line-height: 1.2;
  margin: 80px 0 20px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--fg);
}
h3 {
  font-size: 18px;
  margin: 28px 0 10px;
  color: var(--accent);
  font-weight: 600;
}
p { margin-bottom: 18px; color: var(--fg); }
p.lead {
  font-size: 19px;
  line-height: 1.6;
  color: var(--fg-dim);
  margin-bottom: 40px;
  max-width: 640px;
}
ul, ol { margin: 0 0 24px 24px; }
li { margin-bottom: 10px; }
strong { color: var(--fg); font-weight: 600; }
.legal strong { color: var(--accent); }

/* ── Full-viewport hero (homepage) ──────────────────────────────── */

.hero-full {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  /* override the generic section rule so the hero bleeds edge-to-edge */
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}
.hero-full .bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.25);       /* JS drives scale on scroll; start zoomed in */
  will-change: transform;
  transition: transform 0.25s ease-out;
  z-index: 0;
}
.hero-full::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(9,10,12,0.20) 0%,
    rgba(9,10,12,0.50) 45%,
    rgba(9,10,12,0.95) 100%
  );
  z-index: 1;
}
.hero-full::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 60%, rgba(197,160,89,0.08) 0%, transparent 60%);
  z-index: 1;
  animation: heroGlow 6s ease-in-out infinite;
  pointer-events: none;
}
.hero-full .inner {
  position: relative;
  z-index: 2;
  max-width: 880px;
  padding: 0 32px;
  animation: fadeUp 1.1s cubic-bezier(.16,.84,.44,1) 0.1s both;
  transition: transform 0.1s ease-out; /* smooths JS parallax updates */
}
.hero-full .meta { margin-bottom: 20px; font-size: 11px; letter-spacing: 0.3em; }

/* Big condensed display title — game name in hero */
.display-title {
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-size: clamp(80px, 14vw, 156px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.9;
  color: var(--accent);
  margin-bottom: 32px;
  text-shadow: 0 0 80px rgba(197, 160, 89, 0.18);
  /* titleReveal: dramatic entrance (lifts in, letter-spacing contracts);
     titleGlow: ongoing gold-pulse loop after entrance completes */
  animation: titleReveal 1.4s cubic-bezier(.16,.84,.44,1) 0.1s both,
             titleGlow 5s ease-in-out 1.8s infinite;
}

.hero-full p.lead {
  color: rgba(212, 207, 195, 0.72);
  max-width: 520px;
  margin: 0 auto 40px;
}
.hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.scroll-hint {
  position: absolute;
  bottom: 96px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: rgba(212, 207, 195, 0.25);
  font-size: 10px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  animation: scrollBounce 2.5s ease-in-out infinite;
  pointer-events: none;
  user-select: none;
}

/* ── Hero atmospheric overlay (fog + light sweep) ───────────────── */

.hero-fog {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.hero-fog::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 160% 80% at 20% 45%, rgba(197,160,89,0.04) 0%, transparent 62%),
    radial-gradient(ellipse 120% 60% at 78% 62%, rgba(197,160,89,0.025) 0%, transparent 55%);
  animation: fogDrift 18s ease-in-out infinite alternate;
}
.hero-fog::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -140%;
  width: 55%;
  background: linear-gradient(
    108deg,
    transparent 0%,
    rgba(197,160,89,0.025) 38%,
    rgba(197,160,89,0.055) 50%,
    rgba(197,160,89,0.025) 62%,
    transparent 100%
  );
  animation: lightSweep 12s ease-in-out 3s infinite;
}

/* ── Hero banner (game page) ─────────────────────────────────────── */

.hero-banner {
  position: relative;
  width: 100%;
  min-height: 60vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-image: none !important; /* bg set on .hero-banner .bg */
}
.hero-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(9,10,12,0.10) 0%,
    rgba(9,10,12,0.45) 55%,
    rgba(9,10,12,1.00) 100%
  );
  z-index: 1;
}
.hero-banner .bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 38%;
  animation: slowZoom 16s ease-in-out infinite alternate;
  z-index: 0;
}
.hero-banner .inner {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  padding: 64px 32px 72px;
  width: 100%;
  animation: fadeUp 1.1s cubic-bezier(.16,.84,.44,1) 0.15s both;
}
.hero-logo {
  max-width: 500px;
  width: 80%;
  display: block;
  margin-bottom: 20px;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.6));
  animation: fadeUp 1.2s cubic-bezier(.16,.84,.44,1) 0.35s both,
             shimmer 4.5s ease-in-out 1.5s infinite;
}

/* ── Ember CTA band ──────────────────────────────────────────────── */

.cta-band {
  position: relative;
  background: var(--ember);
  overflow: hidden;
  padding: 48px 0;
  margin-top: -80px;
  z-index: 2;
}
.cta-band::after {
  content: "2026";
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-size: 200px;
  font-weight: 700;
  line-height: 1;
  color: rgba(0, 0, 0, 0.10);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.cta-band .inner {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.cta-band-text h2 {
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-size: 34px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--bg);
  margin: 0 0 6px;
  font-style: normal;
}
.cta-band-text p {
  color: rgba(9, 10, 12, 0.70);
  font-size: 15px;
  font-weight: 500;
  margin: 0;
}
.cta-band .cta {
  background: var(--bg);
  color: var(--ember);
  border-color: var(--bg);
  flex-shrink: 0;
  font-size: 13px;
  letter-spacing: 0.10em;
}
.cta-band .cta:hover {
  background: var(--bg-panel);
  border-color: var(--bg-panel);
  color: var(--ember);
  box-shadow: none;
}

/* ── Wide screenshot strip ───────────────────────────────────────── */

.wide-screenshot {
  width: 100%;
  position: relative;
  overflow: hidden;
  background: var(--bg);
  line-height: 0;
}
.wide-screenshot img {
  width: 100%;
  display: block;
  max-height: 520px;
  object-fit: cover;
  object-position: center 30%;
}
.wide-screenshot::before,
.wide-screenshot::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 100px;
  z-index: 1;
  pointer-events: none;
}
.wide-screenshot::before {
  top: 0;
  background: linear-gradient(to bottom, var(--bg) 0%, transparent 100%);
}
.wide-screenshot::after {
  bottom: 0;
  background: linear-gradient(to top, var(--bg) 0%, transparent 100%);
}

/* ── Manifest / features section (homepage) ──────────────────────── */

.manifest-wrap {
  padding: 80px 0;
}
.manifest-wrap .inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 32px;
}
.manifest-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 72px;
  align-items: start;
}
.manifest-art {
  position: sticky;
  top: 80px;
}
.manifest-art img {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--border);
  display: block;
  box-shadow: 0 24px 64px -20px rgba(0,0,0,0.7);
}
.manifest-art figcaption {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin: 12px 0 0;
  text-align: center;
}
.manifest-content h2 { margin-top: 0; }
.manifest-divider {
  width: 40px;
  height: 2px;
  background: var(--accent);
  opacity: 0.45;
  margin: 16px 0 48px;
}

/* Numbered feature rows */
.feature-list { list-style: none; padding: 0; margin: 0 0 48px; }
.feature-item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  align-items: start;
  margin: 0 0 36px;
}
.feature-item:last-child { margin-bottom: 0; }
.feature-no {
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  opacity: 0.45;
  line-height: 1.5;
  text-align: right;
}
.feature-body h4 {
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-size: 19px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg);
  margin: 0 0 6px;
}
.feature-body p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--fg-dim);
  margin: 0;
}

/* Captain's Directive sidebar card */
.captain-card {
  background: var(--bg-panel);
  border: 1px solid rgba(197, 160, 89, 0.15);
  border-radius: 10px;
  padding: 28px;
  margin-bottom: 16px;
}
.card-label {
  font-family: 'Cinzel', 'Palatino Linotype', Palatino, serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent);
  font-weight: 700;
  margin: 0 0 20px;
  display: block;
}
.directive-list { list-style: none; padding: 0; margin: 0 0 24px; }
.directive-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.directive-row:last-child { border-bottom: none; }
.directive-row dt {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-faint);
  font-weight: 500;
}
.directive-row dd {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-dim);
  font-weight: 600;
}
.captain-quote {
  font-style: italic;
  font-size: 13px;
  color: var(--fg-faint);
  line-height: 1.65;
  margin: 0;
}

/* Additional feature panels grid */
.more-features {
  display: grid;
  gap: 1px;
  background: var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.more-feature {
  background: var(--bg-panel);
  padding: 22px 24px;
}
.more-feature h4 {
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg);
  margin: 0 0 6px;
}
.more-feature p { font-size: 14px; color: var(--fg-dim); margin: 0; line-height: 1.6; }

/* ── Studio section (full-width dark band) ───────────────────────── */

.studio-band {
  background: #070809;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.studio-band .inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 80px 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.studio-band h2 { margin: 0 0 20px; font-size: 26px; }
.studio-band p { font-size: 15px; color: var(--fg-dim); line-height: 1.8; margin: 0; }
.studio-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.studio-stat {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 22px;
}
.studio-stat .stat-val {
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--accent);
  display: block;
  margin-bottom: 5px;
  text-transform: uppercase;
  line-height: 1;
}
.studio-stat .stat-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--fg-faint);
  font-weight: 500;
  line-height: 1.4;
}
.studio-stat.wide { grid-column: span 2; }

/* ── Panels & cards ──────────────────────────────────────────────── */

.panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 32px;
  margin: 32px 0;
}
.intro-spacer { padding-top: 80px; }

/* Feature card (legacy — piratetwist page doesn't use manifest layout) */
.feature-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 48px 0 24px;
  transition: transform .35s cubic-bezier(.16,.84,.44,1),
              border-color .35s, box-shadow .35s;
}
.feature-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: 0 18px 48px -20px rgba(var(--accent-glow), 0.35);
}
.feature-card .art {
  min-height: 340px;
  background-size: cover;
  background-position: center;
  transition: transform .9s cubic-bezier(.16,.84,.44,1);
}
.feature-card:hover .art { transform: scale(1.04); }
.feature-card .body {
  padding: 48px 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.feature-card .body h2 { margin: 12px 0 16px; font-size: 28px; }
.feature-card .body h2 a { color: var(--fg); }
.feature-card .body h2 a:hover { color: var(--accent); }
.feature-card .body .cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }

/* ── Contact grid ────────────────────────────────────────────────── */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 40px 0 16px;
}
.contact-grid .contact-card { margin: 0; display: flex; flex-direction: column; }
.contact-grid .contact-card .cta { align-self: flex-start; margin-top: auto; }

/* ── Social follow grid ──────────────────────────────────────────── */

.social-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin: 40px 0 16px;
}
.social-grid .panel { margin: 0; display: flex; flex-direction: column; }
.social-grid .panel .cta { align-self: flex-start; margin-top: auto; }

/* ── Launch countdown strip ──────────────────────────────────────── */

.launch-strip {
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  padding: 52px 32px;
  text-align: center;
}
.launch-strip .meta { margin-bottom: 10px; }
.launch-strip h2 { margin: 0 0 36px; font-size: 28px; }
.countdown {
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: stretch;
  margin-bottom: 40px;
}
.countdown-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 28px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  min-width: 96px;
}
.countdown-block .num {
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-size: 52px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  min-width: 2ch;
  text-align: center;
  letter-spacing: -0.02em;
}
.countdown-sep {
  display: flex;
  align-items: center;
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-size: 40px;
  color: var(--accent);
  opacity: 0.3;
  padding: 0 2px;
  margin-top: -6px;
}
.countdown-block .cd-label {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-top: 10px;
  font-weight: 600;
}

/* ── CTAs ────────────────────────────────────────────────────────── */

.cta {
  display: inline-block;
  background: var(--accent);
  color: var(--bg);
  padding: 13px 26px;
  border-radius: 5px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 2px solid var(--accent);
  margin-top: 12px;
  position: relative;
  overflow: hidden;
  transition: background .15s, color .15s, border-color .15s,
              transform .2s, box-shadow .25s;
}
.cta:hover {
  background: var(--accent-bright);
  border-color: var(--accent-bright);
  color: var(--bg);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -10px rgba(var(--accent-glow), 0.55);
}
.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.25) 50%, transparent 100%);
  transform: translateX(-110%);
  transition: transform .55s ease;
}
.cta:hover::after { transform: translateX(110%); }
.cta.secondary {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}
.cta.secondary:hover {
  background: var(--accent);
  color: var(--bg);
}

/* ── Meta label ──────────────────────────────────────────────────── */

.meta {
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: block;
}

/* ── Tags ────────────────────────────────────────────────────────── */

.tags { margin: 16px 0 32px; }
.tag {
  display: inline-block;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--fg-dim);
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 12px;
  letter-spacing: 0.04em;
  margin-right: 6px;
  margin-bottom: 8px;
  font-weight: 500;
  transition: transform .2s, color .2s, border-color .2s;
}
.tag:hover { transform: translateY(-2px); color: var(--accent); border-color: var(--accent); }

/* ── Screenshot strip ────────────────────────────────────────────── */

.screenshot-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 32px 0 24px;
}
.screenshot-strip img,
.screenshot-strip .placeholder {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
  display: block;
}

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

footer {
  border-top: 1px solid var(--border);
  background: var(--bg-panel);
  margin-top: 0;
}
.footer-main {
  max-width: var(--max);
  margin: 0 auto;
  padding: 60px 32px 48px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
}
.footer-brand { display: flex; flex-direction: column; gap: 20px; max-width: 360px; }
.footer-logo { height: 56px; width: auto; display: block; }
.footer-desc { font-size: 14px; color: var(--fg-dim); margin: 0 0 8px; line-height: 1.6; }
.footer-email {
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: rgba(197, 160, 89, 0.35);
  text-underline-offset: 6px;
  transition: color .15s;
}
.footer-email:hover { color: var(--accent); }
.footer-cols { display: flex; gap: 52px; }
.footer-col-heading {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--fg-faint);
  font-weight: 600;
  display: block;
  margin-bottom: 18px;
}
.footer-cols ul { list-style: none; padding: 0; margin: 0; }
.footer-cols li { margin-bottom: 10px; }
.footer-cols a { font-size: 14px; color: var(--fg-dim); transition: color .15s; }
.footer-cols a:hover { color: var(--accent); }
.footer-bottom {
  border-top: 1px solid var(--border);
  padding: 18px 32px;
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-copy {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-faint);
  margin: 0;
}
.footer-dots { display: flex; gap: 6px; align-items: center; }
.footer-dots span {
  width: 6px; height: 6px;
  border-radius: 50%;
  display: block;
}
.footer-dots span:first-child { background: rgba(197, 160, 89, 0.45); }
.footer-dots span:nth-child(2),
.footer-dots span:nth-child(3) { background: var(--border); }

/* ── Legal pages ─────────────────────────────────────────────────── */

.legal {
  max-width: var(--max-narrow);
  margin: 0 auto;
  padding: 80px 32px 64px;
}
.legal h1 { font-size: 44px; }
.legal h2 { font-size: 22px; margin: 48px 0 12px; }
.legal h3 { font-size: 17px; color: var(--fg); margin: 28px 0 8px; }
.legal p, .legal li { font-size: 15px; line-height: 1.7; }
.legal code {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  padding: 2px 7px;
  border-radius: 4px;
  font-family: Menlo, Consolas, "Courier New", monospace;
  font-size: 13px;
  color: var(--accent);
}

/* ── Contact / inner page hero ───────────────────────────────────── */

.studio-hero {
  position: relative;
  padding-top: 80px;
  padding-bottom: 40px;
  overflow: hidden;
}
.studio-hero::before {
  content: "";
  position: absolute;
  width: 540px; height: 540px;
  top: -220px; right: -180px;
  background: radial-gradient(circle, rgba(197,160,89,0.10) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  animation: drift1 24s ease-in-out infinite alternate;
}

/* ── Animations ──────────────────────────────────────────────────── */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes slowZoom {
  from { transform: scale(1.04); }
  to   { transform: scale(1.12); }
}
@keyframes shimmer {
  0%, 100% { opacity: 0.8; }
  50%       { opacity: 1; }
}
@keyframes drift1 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-60px, 40px) scale(1.1); }
}
@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.3; }
  50%       { transform: translateX(-50%) translateY(8px); opacity: 0.55; }
}
@keyframes titleReveal {
  0%   { opacity: 0; transform: translateY(64px) scale(0.92); letter-spacing: 0.10em; }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); letter-spacing: -0.01em; }
}
@keyframes titleGlow {
  0%, 100% { text-shadow: 0 0 80px rgba(197, 160, 89, 0.15); }
  50%       { text-shadow: 0 0 120px rgba(197, 160, 89, 0.40), 0 0 60px rgba(197, 160, 89, 0.20); }
}
@keyframes heroGlow {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1; }
}
@keyframes fogDrift {
  from { transform: translateX(-28px) scale(1.05); }
  to   { transform: translateX(28px) scale(1.0); }
}
@keyframes lightSweep {
  0%        { transform: translateX(0); }
  33%, 100% { transform: translateX(500%); }
}

.reveal { animation: fadeUp 0.9s cubic-bezier(.16,.84,.44,1) both; }
.reveal-fast { animation-duration: 0.55s; }
.reveal-slow { animation-duration: 1.4s; }

/* Scroll-triggered reveals (IntersectionObserver) */
.scroll-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s cubic-bezier(.16,.84,.44,1),
              transform 0.75s cubic-bezier(.16,.84,.44,1);
}
/* Directional variants — .visible clears all of them */
.scroll-reveal--left  { transform: translateX(-48px); }
.scroll-reveal--far   { transform: translateY(60px); }
.scroll-reveal--scale { transform: scale(0.93) translateY(20px); }
.scroll-reveal.visible {
  opacity: 1;
  transform: none;
}

/* ── Reduced motion ──────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .scroll-reveal { opacity: 1 !important; transform: none !important; }
  .hero-fog::before, .hero-fog::after { animation: none !important; }
}

/* ── Responsive ──────────────────────────────────────────────────── */

@media (max-width: 960px) {
  .manifest-layout { grid-template-columns: 1fr; }
  .manifest-art { position: static; display: none; }
  .studio-band .inner { grid-template-columns: 1fr; gap: 40px; }
  .studio-stats { grid-template-columns: 1fr 1fr; }
  .studio-stat.wide { grid-column: span 2; }
  .footer-cols { gap: 32px; }
}
@media (max-width: 820px) {
  h1 { font-size: 42px; }
  h2 { font-size: 24px; margin-top: 56px; }
  p.lead { font-size: 17px; }
  .display-title { font-size: clamp(64px, 18vw, 80px); }
  .hero-full .inner { padding: 0 24px; }
  .hero-banner { min-height: 52vh; }
  .hero-banner .inner { padding: 48px 24px 48px; }
  .hero-logo { max-width: 300px; width: 86%; }
  header .inner { padding: 14px 24px; }
  nav a { margin-left: 16px; font-size: 12px; }
  .nav-wishlist { margin-left: 16px; padding: 7px 14px; }
  section { padding: 0 24px; }
  .feature-card { grid-template-columns: 1fr; }
  .feature-card .art { min-height: 240px; }
  .feature-card .body { padding: 32px; }
  .launch-strip { padding: 40px 24px; }
  .countdown-block { padding: 16px 18px; min-width: 72px; }
  .countdown-block .num { font-size: 40px; }
  .cta-band { padding: 36px 0; }
  .cta-band .inner { flex-direction: column; align-items: flex-start; padding: 0 24px; }
  .cta-band-text h2 { font-size: 26px; }
  .screenshot-strip { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .social-grid { grid-template-columns: 1fr; }
  .legal { padding: 48px 24px 48px; }
  .legal h1 { font-size: 32px; }
  .footer-main { padding: 40px 24px 32px; flex-direction: column; gap: 36px; }
  .footer-bottom { padding: 16px 24px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .manifest-wrap { padding: 56px 0; }
  .manifest-wrap .inner { padding: 0 24px; }
  .studio-band .inner { padding: 56px 24px; }
}
@media (max-width: 540px) {
  .studio-stats { grid-template-columns: 1fr; }
  .studio-stat.wide { grid-column: auto; }
  .footer-cols { flex-direction: column; gap: 28px; }
  .countdown { gap: 2px; }
  .countdown-block { padding: 14px 14px; min-width: 60px; }
  .countdown-block .num { font-size: 32px; }
  .countdown-sep { font-size: 28px; }
}

/* ============ Pirate Twist — scroll-sailing roadmap ============ */
.roadmap { width: min(100vw, 1920px); margin: 0 auto; padding: 8px 0 0; box-sizing: border-box; }
.roadmap h2 { margin-bottom: 6px; padding: 0 32px; }
.rm-caveat { color: var(--fg-dim); width: 100%; padding: 0 32px; box-sizing: border-box; margin: 0 0 24px; font-size: 15px; line-height: 1.6; }
.rm-caveat strong { color: var(--accent-bright); font-weight: 600; }

/* the sea the page scrolls through — no max-height; full width but capped at 1920px */
.rm-stage {
  position: relative;
  width: 100%;
  overflow: hidden;                   /* clip the ship at the edges, no h-scroll */
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: #0b2733 url("images/pt-roadmap-water.jpg") repeat;   /* downscaled v5_calm, tiled like the game — crisp at any DPR */
  background-size: 512px 512px;
  animation: rm-sea-drift 26s ease-in-out infinite alternate;   /* calm-sea ambient drift */
  box-shadow: inset 0 0 160px rgba(0,0,0,0.55);
}
@keyframes rm-sea-drift {
  from { background-position: 0px 0px; }
  to   { background-position: 64px 40px; }
}

.rm-track { position: relative; width: 100%; padding: 0 0 42vh; }

/* serpentine dashed route (SVG path injected by JS, echoes the in-game map edges) */
.rm-path { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.rm-path path { fill: none; stroke: rgba(255, 226, 170, 0.4); stroke-width: 3; stroke-dasharray: 2 15; stroke-linecap: round; }

/* month cards — mahogany + brass, alternating sides so the ship weaves toward each */
.rm-card {
  position: relative;
  z-index: 2;
  width: min(42%, 440px);
  margin-top: 34vh;
  background: rgba(22, 16, 11, 0.9);
  border: 1px solid rgba(255, 196, 76, 0.28);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  padding: 20px 22px;
  box-shadow: 0 16px 44px rgba(0,0,0,0.5);
  backdrop-filter: blur(2px);
}
.rm-card.rm-right { margin-left: auto;  margin-right: 8vw; }
.rm-card.rm-left  { margin-left: 8vw;   margin-right: auto; }
.rm-card .rm-month { color: var(--accent-bright); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; margin: 0 0 6px; }
.rm-card h3 { margin: 0 0 8px; font-size: 20px; }
.rm-card p { margin: 0; color: var(--fg-dim); font-size: 14.5px; line-height: 1.55; }
.rm-card .rm-flag { display: inline-block; margin-top: 12px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-faint); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; }

/* the ship — JS sails it down the sea on page scroll, weaving toward each side's card */
.rm-ship {
  position: absolute;
  left: 50%; top: 46vh;
  width: clamp(78px, 11vw, 132px);
  z-index: 3;
  transform: translate(-50%, -50%) rotate(180deg);
  filter: drop-shadow(0 10px 14px rgba(0,0,0,0.55));
  will-change: top, left, transform;
  pointer-events: none;
}

@media (max-width: 820px) {
  .rm-card { width: 78%; }
  .rm-card.rm-right { margin-right: 4vw; }
  .rm-card.rm-left  { margin-left: 4vw; }
  .rm-ship { width: 64px; }
  .roadmap { padding: 8px 24px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rm-stage { animation: none; }
  .rm-ship { position: sticky; left: 50% !important; top: 40vh !important; transform: translate(-50%, -50%) rotate(180deg) !important; }
}

/* ── piratetwistgame.com — multi-page additions ── */
.brand-word { font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif; font-weight:700; font-size:22px; letter-spacing:0.10em; text-transform:uppercase; color:var(--accent); line-height:1; }
.brand a { gap:10px; }
.brand a:hover .brand-word { color:var(--accent-bright); }
.page-head { max-width:var(--max); margin:0 auto; padding:64px 32px 4px; }
.page-head .meta { margin-bottom:10px; }
.page-head h1 { font-size:clamp(40px,7vw,60px); margin-bottom:14px; }
.page-head .lead { margin-bottom:8px; }
/* announcements list */
.news-item { border-top:1px solid var(--border); padding:30px 0; }
.news-item:first-of-type { border-top:none; padding-top:16px; }
.news-date { color:var(--accent); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; font-weight:700; margin-bottom:8px; }
.news-item h3 { margin:0 0 10px; color:var(--fg); font-size:23px; }
.news-item p:last-child { margin-bottom:0; }
/* roadmap-teaser cta row */
.cta-row { display:flex; flex-wrap:wrap; gap:14px; margin:24px 0 8px; }
