/* ============================================================
   ObedientAmbition, Unipessoal LDA — site styles
   Dark, premium noir aesthetic with gold accents
   ============================================================ */

:root {
  --bg:            #0a0b0d;
  --bg-elev:       #121419;
  --bg-elev-2:     #181b22;
  --line:          #262a33;
  --text:          #e9eaf0;
  --text-dim:      #9aa1ad;
  --text-faint:    #6b727e;
  --gold:          #d8b25e;
  --gold-bright:   #f0cd7a;
  --gold-soft:     rgba(216, 178, 94, 0.12);
  --danger:        #c8553d;
  --radius:        16px;
  --radius-sm:     10px;
  --maxw:          1180px;
  --ease:          cubic-bezier(0.22, 1, 0.36, 1);
  --shadow:        0 24px 60px -20px rgba(0,0,0,0.7);
  --font-display:  "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

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

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

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  font-size: 17px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Ambient background glow */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(216,178,94,0.10), transparent 60%),
    radial-gradient(700px 600px at -10% 20%, rgba(80,90,120,0.10), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

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

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }

h1, h2, h3, .display { font-family: var(--font-display); font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; }

.eyebrow {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}

.lead { color: var(--text-dim); font-size: 1.08rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.97rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  white-space: nowrap;
}
.btn-gold {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #1a1303;
  box-shadow: 0 12px 30px -12px rgba(216,178,94,0.6);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(216,178,94,0.75); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-bright); transform: translateY(-2px); }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(10,11,13,0.72);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.nav.scrolled { border-bottom-color: var(--line); background: rgba(10,11,13,0.9); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 700; letter-spacing: 0.02em; }
.brand .mark {
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  display: grid; place-items: center; color: #1a1303; font-family: var(--font-display); font-weight: 700; font-size: 19px;
  box-shadow: 0 8px 20px -8px rgba(216,178,94,0.7);
}
.brand .brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand .brand-text b { font-size: 1.02rem; }
.brand .brand-text span { font-size: 11px; color: var(--text-faint); letter-spacing: 0.16em; text-transform: uppercase; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a { color: var(--text-dim); font-size: 0.93rem; font-weight: 500; transition: color .2s; }
.nav-links a:hover { color: var(--text); }
.nav-cta { padding: 10px 20px; font-size: 0.88rem; }
.nav-toggle { display: none; background: none; border: 0; color: var(--text); cursor: pointer; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 96px 0 80px; }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 60px; align-items: center; }
.hero h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); margin-bottom: 22px; }
.hero h1 .accent { color: var(--gold-bright); font-style: italic; }
.hero p { font-size: 1.16rem; color: var(--text-dim); max-width: 540px; margin-bottom: 34px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 36px; margin-top: 44px; }
.hero-stats .stat b { font-family: var(--font-display); font-size: 1.9rem; color: var(--text); display: block; }
.hero-stats .stat span { font-size: 0.82rem; color: var(--text-faint); letter-spacing: 0.06em; text-transform: uppercase; }

/* ---------- Sections ---------- */
section { padding: 92px 0; position: relative; }
.section-head { max-width: 680px; margin-bottom: 54px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 16px; }
.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); border: 0; }

/* Hero venture collage */
.hero-collage { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hero-collage .tile {
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 20px; transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.hero-collage .tile:hover { transform: translateY(-4px); border-color: rgba(216,178,94,0.4); }
.hero-collage .tile span { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 6px; }
.hero-collage .tile b { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; }
.hero-collage .tile.gold { background: linear-gradient(160deg, rgba(216,178,94,0.14), var(--bg-elev)); border-color: rgba(216,178,94,0.35); }
.spotlight .lead { max-width: 560px; }
.spotlight-head .eyebrow { margin-bottom: 6px; }

/* About / split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.about-card {
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px; box-shadow: var(--shadow);
}
.about-card .row { display: flex; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line); }
.about-card .row:last-child { border-bottom: 0; }
.about-card .row span { color: var(--text-dim); }
.about-card .row b { color: var(--text); font-weight: 600; }

/* Sectors */
.chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chip {
  border: 1px solid var(--line); border-radius: 999px; padding: 10px 20px;
  font-size: 0.92rem; color: var(--text-dim); background: var(--bg-elev);
  transition: all .25s var(--ease);
}
.chip:hover { color: var(--gold-bright); border-color: rgba(216,178,94,0.45); }

/* Portfolio */
.port-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.port {
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; transition: transform .3s var(--ease), border-color .3s var(--ease);
  position: relative; overflow: hidden;
}
.port::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--gold), transparent);
  opacity: 0; transition: opacity .3s var(--ease);
}
.port:hover { transform: translateY(-5px); border-color: rgba(216,178,94,0.35); }
.port:hover::after { opacity: 1; }
.port .tag { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.port h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.18rem; margin: 8px 0 10px; letter-spacing: 0; }
.port p { color: var(--text-dim); font-size: 0.93rem; }
.port.featured { background: linear-gradient(160deg, rgba(216,178,94,0.10), var(--bg-elev)); border-color: rgba(216,178,94,0.35); }
.port.sandpile-card {
  background:
    radial-gradient(400px 180px at 100% 0%, rgba(89, 200, 181, 0.16), transparent 64%),
    linear-gradient(160deg, rgba(216,178,94,0.10), var(--bg-elev));
}
.port.sandpile-card::after { background: linear-gradient(90deg, #e8bc64, #59c8b5, transparent); }
.port.procesion-card {
  background:
    radial-gradient(400px 180px at 100% 0%, rgba(112, 71, 170, 0.22), transparent 64%),
    linear-gradient(160deg, rgba(230,174,65,0.10), var(--bg-elev));
}
.port.procesion-card::after { background: linear-gradient(90deg, #f0b93e, #a569d0, transparent); }
.port.imperator-card {
  background:
    radial-gradient(400px 180px at 100% 0%, rgba(116, 75, 151, 0.24), transparent 64%),
    linear-gradient(160deg, rgba(226,180,84,0.13), var(--bg-elev));
}
.port.imperator-card::after { background: linear-gradient(90deg, #e2b454, #75509a, transparent); }

/* Contact / CTA band */
.cta-band {
  background: linear-gradient(135deg, var(--bg-elev-2), var(--bg-elev));
  border: 1px solid var(--line); border-radius: 24px; padding: 60px; text-align: center;
  box-shadow: var(--shadow);
}
.cta-band h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: 14px; }
.cta-band p { color: var(--text-dim); max-width: 520px; margin: 0 auto 30px; }
.contact-row { display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; margin-top: 36px; color: var(--text-dim); font-size: 0.95rem; }
.contact-row a { color: var(--gold-bright); }

/* Google Play button */
.gplay {
  display: inline-flex; align-items: center; gap: 12px; padding: 12px 24px;
  background: #000; border: 1px solid var(--line); border-radius: 12px; transition: all .25s var(--ease);
}
.gplay:hover { border-color: var(--gold); transform: translateY(-2px); }
.gplay svg { width: 26px; height: 26px; }
.gplay .t { line-height: 1.1; }
.gplay .t small { font-size: 10px; color: var(--text-dim); display: block; letter-spacing: 0.04em; }
.gplay .t b { font-size: 1.05rem; }

/* ---------- Homepage: games showcase & nav dropdown ----------
   Games get top billing directly under the hero, above the ventures grid.
   Each card borrows its own game's accent so the row reads as four distinct
   products rather than four instances of one card.
   ------------------------------------------------------------------------ */

/* --- nav dropdown --- */
.nav-drop { position: relative; }
.nav-drop-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--text-dim);
  font-family: inherit; font-size: 0.93rem; font-weight: 500;
  transition: color .2s;
}
.nav-drop-btn:hover, .nav-drop-btn[aria-expanded="true"] { color: var(--text); }
.nav-drop-btn svg { transition: transform .25s var(--ease); }
.nav-drop-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-drop-menu {
  position: absolute; top: calc(100% + 14px); left: -18px;
  display: none;
  min-width: 268px;
  padding: 10px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.nav-drop-menu.open { display: block; }
.nav-drop-menu a {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px;
  border-radius: 9px;
  transition: background .2s;
}
.nav-drop-menu a:hover { background: rgba(216,178,94,0.09); }
.nav-drop-menu img {
  width: 34px; height: 34px; flex: none;
  border-radius: 9px;
  image-rendering: pixelated;
  border: 1px solid rgba(216,178,94,0.25);
}
.nav-drop-menu .nd-t { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.nav-drop-menu .nd-t b { color: var(--text); font-size: 0.9rem; font-weight: 600; }
.nav-drop-menu .nd-t span {
  color: var(--text-faint);
  font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase;
}
.nav-drop-menu .nd-all {
  margin-top: 4px; padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--gold); font-size: 0.84rem; font-weight: 600;
}
.nav-drop-menu .nd-all:hover { background: none; color: var(--gold-bright); }

/* --- games section --- */
.games-section {
  padding-top: 76px;
  background: linear-gradient(180deg, rgba(216,178,94,0.05), transparent 55%);
}
.games-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 30px;
  margin-bottom: 40px;
}
.games-head h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 14px; }
.games-head .lead { max-width: 620px; }
.games-count {
  flex: none;
  color: var(--text-faint);
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.games-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.game-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 28px;
  overflow: hidden;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.game-card:hover { transform: translateY(-5px); border-color: var(--gc-accent, var(--gold)); }
/* Whole-card click target. The card cannot simply be wrapped in <a>, because the
   Google Play badge is itself a link and nesting links is invalid and unusable with a
   screen reader. Instead a stretched, non-focusable hit area sits over the card at
   z-index 2, and the real action row is raised to 3 so its links still win. Keyboard
   and assistive tech use the visible links only — the hit area is aria-hidden, so no
   destination is announced twice. */
.game-card-hit { position: absolute; inset: 0; z-index: 2; border-radius: var(--radius); }
.game-card:hover { cursor: pointer; }
.game-card .game-card-actions { z-index: 3; }
.game-card-link:focus-visible { outline-offset: 5px; }
.game-card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--gc-accent, var(--gold)), transparent);
}
.game-card::after {
  content: "";
  position: absolute; top: 0; right: 0;
  width: 320px; height: 190px;
  background: radial-gradient(circle at 100% 0%, var(--gc-glow, transparent), transparent 68%);
  pointer-events: none;
}
.game-card-top { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; position: relative; z-index: 1; }
.game-card-top img {
  width: 66px; height: 66px; flex: none;
  border-radius: 15px;
  image-rendering: pixelated;
  border: 1px solid var(--gc-accent, rgba(216,178,94,0.35));
  background: #0e1014;
}
/* Monogram stand-in for games with no locally hosted icon. Google's Play CDN
   refuses hotlinked image requests from other origins, so those URLs render
   broken in the browser even though they resolve over plain HTTP. */
.game-mark {
  display: grid; place-items: center;
  width: 66px; height: 66px; flex: none;
  border-radius: 15px;
  background: linear-gradient(140deg, rgba(216,178,94,0.22), var(--bg-elev-2));
  border: 1px solid var(--gc-accent, rgba(216,178,94,0.35));
  color: var(--gold-bright);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
}
.nav-drop-menu .nd-mark {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: none;
  border-radius: 9px;
  background: linear-gradient(140deg, rgba(216,178,94,0.22), var(--bg-elev-2));
  border: 1px solid rgba(216,178,94,0.25);
  color: var(--gold-bright);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.86rem;
}
.game-card h3 {
  font-family: var(--font-body);
  font-weight: 700; font-size: 1.22rem;
  letter-spacing: 0;
  margin-bottom: 6px;
}
.game-status {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--gc-accent, var(--gold));
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.game-status i {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}
.game-status.soon { color: var(--text-faint); }
.game-status.soon i { background: var(--text-faint); box-shadow: none; }
.game-card p { color: var(--text-dim); font-size: 0.95rem; position: relative; z-index: 1; }
.game-card-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: auto; padding-top: 22px;
  position: relative; z-index: 1;
}
.game-card-link {
  color: var(--text);
  font-size: 0.9rem; font-weight: 600;
  border-bottom: 1px solid var(--gc-accent, var(--gold));
  padding-bottom: 2px;
  transition: color .2s;
}
.game-card-link:hover { color: var(--gc-accent, var(--gold-bright)); }
.game-card .gplay { padding: 7px 14px; }
.game-card .gplay svg { width: 20px; height: 20px; }
.game-card .gplay .t b { font-size: 0.9rem; }
.game-card .gplay .t small { font-size: 9px; }

/* per-game accents */
.gc-chairman { --gc-accent: #d8b25e; --gc-glow: rgba(216,178,94,0.16); }
.gc-soul     { --gc-accent: #e2b454; --gc-glow: rgba(107,63,160,0.30); }
.gc-sandpile { --gc-accent: #59c8b5; --gc-glow: rgba(89,200,181,0.20); }
.gc-procesion{ --gc-accent: #f0b93e; --gc-glow: rgba(112,71,170,0.30); }

@media (max-width: 900px) {
  .games-grid { grid-template-columns: 1fr; }
  .games-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .games-count { order: -1; }
}
@media (max-width: 1000px) {
  /* inside the collapsed mobile menu the dropdown becomes a plain list */
  .nav-links.open .nav-drop { width: 100%; }
  .nav-links.open .nav-drop-menu {
    position: static; display: block; min-width: 0;
    margin-top: 12px; padding: 0;
    background: none; border: 0; box-shadow: none;
  }
  .nav-links.open .nav-drop-menu a { padding: 8px 0; }
  .nav-links.open .nav-drop-btn { display: none; }
}
@media (max-width: 560px) {
  .game-card { padding: 22px; }
  .game-card-top img { width: 56px; height: 56px; }
}

/* ---------- SandPile game page ---------- */
.sandpile-page {
  --sand-amber: #e8bc64;
  --sand-teal: #59c8b5;
  --sand-violet: #8a79d8;
}
.sandpile-page::before {
  background:
    radial-gradient(780px 520px at 82% 8%, rgba(89,200,181,0.10), transparent 62%),
    radial-gradient(720px 560px at 8% 28%, rgba(232,188,100,0.10), transparent 64%),
    radial-gradient(600px 520px at 82% 70%, rgba(138,121,216,0.08), transparent 66%);
}

/* ---------- SandPile game page (per-game identity) ----------
   Bright, tactile and playful — the opposite register to Soul of Rome.
   A warm sand-cream band carries the middle of the page, rounded forms
   throughout, and the five modes each get their own colour. Rounded
   display face (Fredoka) matches the game's own chunky wordmark.
   Scoped to .sp-page.
   ------------------------------------------------------------------ */
.sp-page {
  --sp-amber:  #e8bc64;
  --sp-orange: #f0913e;
  --sp-teal:   #59c8b5;
  --sp-violet: #8a79d8;
  --sp-pink:   #e876a8;
  --sp-sand:      #f6ecd8;
  --sp-sand-edge: #ead9b8;
  --sp-sand-ink:  #2e2418;
  --sp-sand-dim:  #6d5f4c;
  --font-round: "Fredoka", "Nunito", var(--font-body);
  background: #0b0d12;
}
.sp-page::before {
  background:
    radial-gradient(820px 540px at 84% 4%, rgba(89,200,181,0.14), transparent 62%),
    radial-gradient(700px 560px at 6% 26%, rgba(232,188,100,0.13), transparent 64%),
    radial-gradient(620px 520px at 74% 74%, rgba(138,121,216,0.12), transparent 66%);
}
.sp-page section { position: relative; z-index: 1; }
.sp-page h2, .sp-page h3 { font-family: var(--font-round); font-weight: 600; letter-spacing: -0.01em; }
.sp-page .eyebrow { color: var(--sp-amber); }
.sp-page .btn-gold {
  color: #2a1a05;
  background: linear-gradient(135deg, #f7d089, var(--sp-orange));
  box-shadow: 0 12px 30px -12px rgba(240,145,62,0.7);
}

/* --- hero --- */
.sp-hero { padding: 72px 0 0; overflow: hidden; }
.sp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 50px;
  align-items: center;
}
.sp-lockup { display: flex; align-items: center; gap: 20px; margin-bottom: 22px; }
.sp-lockup img {
  width: 104px; height: 104px; flex: none;
  border-radius: 24px;
  border: 1px solid rgba(232,188,100,0.4);
  box-shadow: 0 20px 44px -18px rgba(240,145,62,0.75);
}
.sp-lockup h1 {
  font-family: var(--font-round);
  font-weight: 600;
  font-size: clamp(2.9rem, 6.4vw, 4.9rem);
  line-height: 1;
  letter-spacing: -0.03em;
  background: linear-gradient(100deg, #ffe1a8, var(--sp-orange) 55%, var(--sp-pink));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.sp-lockup p {
  margin-top: 8px;
  color: var(--sp-teal);
  font-family: var(--font-round);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.sp-lead { max-width: 600px; margin-bottom: 28px; color: var(--text-dim); font-size: 1.14rem; }
.sp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.sp-actions.center { justify-content: center; }
.sp-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 36px; padding-top: 28px;
  border-top: 1px solid rgba(232,188,100,0.16);
}
.sp-stats b {
  display: block;
  font-family: var(--font-round); font-weight: 600; font-size: 2rem; line-height: 1;
  color: #fff;
}
.sp-stats span { display: block; margin-top: 7px; color: var(--text-faint); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; }

/* --- phone fan --- */
.sp-fan { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: center; }
.sp-fan figure { min-width: 0; }
.sp-fan img {
  width: 100%; height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 22px;
  background: #05070f;
  border: 1px solid rgba(232,188,100,0.28);
  box-shadow: 0 26px 60px -26px rgba(0,0,0,0.95);
  transition: transform .4s var(--ease);
}
.sp-fan figure:nth-child(1) img { transform: rotate(-4deg) translateY(14px); }
.sp-fan figure:nth-child(3) img { transform: rotate(4deg) translateY(14px); }
.sp-fan figure:nth-child(2) img { border-color: rgba(232,188,100,0.55); box-shadow: 0 30px 70px -24px rgba(0,0,0,0.95), 0 0 46px -26px rgba(240,145,62,0.8); }
.sp-fan figure:hover img { transform: translateY(-6px); }

/* --- five modes --- */
.sp-modes-section { padding: 84px 0 0; }
.sp-modes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.sp-mode {
  min-width: 0;
  padding: 24px 20px 26px;
  border-radius: 18px;
  background: linear-gradient(170deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.08);
  border-top: 3px solid var(--m, var(--sp-amber));
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.sp-mode:hover { transform: translateY(-5px); border-color: var(--m, var(--sp-amber)); }
.sp-mode b {
  display: block; margin-bottom: 8px;
  font-family: var(--font-round); font-weight: 600; font-size: 1.16rem;
  color: var(--m, var(--sp-amber));
}
.sp-mode span { color: var(--text-dim); font-size: 0.9rem; }
.sp-m-rush  { --m: var(--sp-orange); }
.sp-m-daily { --m: var(--sp-amber); }
.sp-m-endl  { --m: var(--sp-teal); }
.sp-m-zen   { --m: #7fd6a8; }
.sp-m-chaos { --m: var(--sp-pink); }

/* --- sand band --- */
.sp-sand-band {
  margin-top: 84px;
  padding: 82px 0 86px;
  color: var(--sp-sand-ink);
  background:
    radial-gradient(760px 340px at 12% 0%, rgba(255,255,255,0.75), transparent 62%),
    linear-gradient(180deg, var(--sp-sand), var(--sp-sand-edge));
  border-block: 1px solid rgba(232,188,100,0.55);
}
.sp-sand-band .eyebrow { color: #a8761f; }
.sp-sand-band h2 { color: #241b10; }
.sp-sand-band .lead { color: var(--sp-sand-dim); }
.sp-head { max-width: 720px; margin-bottom: 44px; }
.sp-head.center { margin-inline: auto; text-align: center; }
.sp-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-bottom: 14px; }

.sp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sp-step {
  min-width: 0;
  padding: 28px 24px 30px;
  border-radius: 20px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(46,36,24,0.12);
}
.sp-step-mark {
  display: grid; place-items: center;
  width: 52px; height: 52px; margin-bottom: 18px;
  border-radius: 16px;
  background: var(--sm, var(--sp-orange));
  color: #fff;
  font-family: var(--font-round); font-weight: 600; font-size: 1.3rem;
  box-shadow: 0 10px 22px -10px var(--sm, var(--sp-orange));
}
.sp-step:nth-child(1) { --sm: var(--sp-orange); }
.sp-step:nth-child(2) { --sm: var(--sp-teal); }
.sp-step:nth-child(3) { --sm: var(--sp-violet); }
.sp-step h3 { font-size: 1.24rem; margin-bottom: 8px; }
.sp-step p { color: var(--sp-sand-dim); font-size: 0.96rem; }

.sp-extras {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 40px; padding-top: 34px;
  border-top: 1px solid rgba(46,36,24,0.14);
}
.sp-extras span {
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(46,36,24,0.13);
  color: var(--sp-sand-ink);
  font-size: 0.88rem; font-weight: 500;
}

/* --- four worlds --- */
.sp-worlds-section { padding: 84px 0 0; }
.sp-worlds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sp-world {
  min-width: 0;
  position: relative;
  padding: 26px 22px 28px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(165deg, var(--w1), var(--w2));
  border: 1px solid rgba(255,255,255,0.12);
  transition: transform .3s var(--ease);
}
.sp-world:hover { transform: translateY(-5px); }
.sp-world b {
  display: block; margin-bottom: 6px;
  font-family: var(--font-round); font-weight: 600; font-size: 1.2rem;
  color: #fff;
}
.sp-world span { color: rgba(255,255,255,0.78); font-size: 0.9rem; }
.sp-world i {
  position: absolute; right: -26px; bottom: -26px;
  width: 96px; height: 96px; border-radius: 50%;
  background: rgba(255,255,255,0.14);
}
.sp-w-dunes   { --w1: #b8862f; --w2: #6d4a15; }
.sp-w-caverns { --w1: #2f7f8f; --w2: #143c52; }
.sp-w-peaks   { --w1: #4d5b93; --w2: #232a4e; }
.sp-w-forge   { --w1: #b8492f; --w2: #5f1c14; }

/* --- gallery --- */
.sp-gallery-section { padding: 84px 0 0; }
.sp-shots { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.sp-shots figure { flex: 0 1 calc((100% - 36px) / 3); min-width: 0; max-width: 340px; }
.sp-shots img {
  width: 100%; height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 20px;
  background: #000;
  border: 1px solid rgba(232,188,100,0.22);
  transition: transform .35s var(--ease), border-color .35s var(--ease);
}
.sp-shots figure:hover img { transform: translateY(-5px); border-color: rgba(232,188,100,0.5); }

/* --- cta --- */
.sp-cta-section { padding: 84px 0 92px; }
.sp-cta {
  padding: 54px 40px 48px;
  text-align: center;
  border-radius: 26px;
  border: 1px solid rgba(232,188,100,0.28);
  background:
    radial-gradient(520px 240px at 50% 0%, rgba(240,145,62,0.20), transparent 70%),
    linear-gradient(140deg, #17181f, #101218);
}
.sp-cta h2 { margin-bottom: 14px; font-size: clamp(1.9rem, 3.6vw, 2.7rem); }
.sp-cta p { max-width: 620px; margin: 0 auto 28px; color: var(--text-dim); }

/* --- responsive --- */
@media (max-width: 1000px) {
  .sp-hero-grid { grid-template-columns: 1fr; gap: 46px; }
  .sp-fan { max-width: 640px; margin: 0 auto; }
  .sp-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sp-worlds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-shots figure { flex-basis: calc((100% - 18px) / 2); }
}
@media (max-width: 700px) {
  .sp-hero { padding-top: 52px; }
  .sp-lockup { gap: 15px; }
  .sp-lockup img { width: 78px; height: 78px; border-radius: 18px; }
  .sp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .sp-stats b { font-size: 1.7rem; }
  .sp-modes { grid-template-columns: 1fr; }
  .sp-steps { grid-template-columns: 1fr; }
  .sp-sand-band { margin-top: 62px; padding: 60px 0 64px; }
  .sp-modes-section, .sp-worlds-section, .sp-gallery-section { padding-top: 62px; }
  .sp-cta-section { padding: 62px 0 68px; }
  .sp-cta { padding: 40px 22px 38px; border-radius: 20px; }
  .sp-shots figure { flex-basis: 100%; max-width: 420px; }
}
@media (max-width: 460px) {
  .sp-worlds { grid-template-columns: 1fr; }
}

/* ---------- Soul of Rome game page ----------
   Identity: imperial porphyry + Tyrian purple + gold leaf, cut with a
   travertine-marble band so the page has light/dark rhythm instead of
   one unbroken black scroll. Roman inscriptional headings (Cinzel);
   the game's own pixel wordmark (Silkscreen) stays the brand mark.
   Scoped to .soul-page so the legal pages (.imperator-page) keep only
   the palette, not the layout.
   ------------------------------------------------------------------ */
.imperator-page {
  --imperator-ink: #150f1e;
  --imperator-purple: #6b3fa0;
  --imperator-purple-bright: #a879c9;
  --imperator-gold: #e2b454;
  --imperator-gold-pale: #f1d98d;
  --sand-amber: var(--imperator-gold);
  --sand-teal: var(--imperator-purple-bright);
  background: var(--imperator-ink);
}
.imperator-page::before {
  background:
    radial-gradient(840px 560px at 80% 4%, rgba(107,63,160,0.28), transparent 64%),
    radial-gradient(680px 480px at 6% 34%, rgba(226,180,84,0.10), transparent 66%),
    linear-gradient(rgba(226,180,84,0.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(226,180,84,0.016) 1px, transparent 1px);
  background-size: auto, auto, 18px 18px, 18px 18px;
}
.imperator-page .eyebrow { color: var(--imperator-gold); }
.imperator-page .btn-gold {
  color: #211506;
  background: linear-gradient(135deg, var(--imperator-gold-pale), var(--imperator-gold));
  box-shadow: 0 12px 30px -12px rgba(226,180,84,0.72);
}
.imperator-page .release-pill span {
  background: var(--imperator-gold);
  box-shadow: 0 0 14px rgba(226,180,84,0.75);
}
/* index.html ventures card accent */
.imperator-card { border-color: rgba(226,180,84,0.30) !important; }

.soul-page {
  --soul-marble:      #efe7d6;
  --soul-marble-edge: #ded2b8;
  --soul-marble-ink:  #241b2e;
  --soul-marble-dim:  #63566f;
  --font-roman: "Cinzel", Georgia, "Times New Roman", serif;
}
.soul-page section { position: relative; z-index: 1; }
.soul-page h2 {
  font-family: var(--font-roman);
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1.16;
  font-size: clamp(1.85rem, 3.4vw, 2.85rem);
}
.soul-page h3 { font-family: var(--font-roman); font-weight: 600; }

/* --- section heads --- */
.soul-head { max-width: 760px; margin-bottom: 46px; }
.soul-head.center { margin-inline: auto; text-align: center; }
.soul-head h2 { color: var(--imperator-gold-pale); margin-bottom: 14px; }
.soul-head .lead { color: var(--text-dim); }

/* --- hero --- */
.soul-hero { padding: 74px 0 0; overflow: hidden; }
.soul-hero-inner { max-width: 820px; }
.soul-lockup { display: flex; align-items: center; gap: 22px; }
.soul-icon {
  width: 104px; height: 104px; flex: none;
  border-radius: 23px;
  image-rendering: pixelated;
  border: 1px solid rgba(226,180,84,0.48);
  box-shadow: 0 20px 46px -18px rgba(168,121,201,0.9);
}
.soul-lockup h1 {
  font-family: "Silkscreen", monospace;
  font-weight: 700;
  font-size: clamp(2.3rem, 6.2vw, 4.6rem);
  line-height: 0.98;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: var(--imperator-gold-pale);
  text-shadow: 0 0 34px rgba(226,180,84,0.28);
}
.soul-sub {
  display: flex; align-items: center; gap: 14px;
  margin: 20px 0 0;
  font-family: "Silkscreen", monospace;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--imperator-gold);
}
.soul-sub i { color: var(--imperator-purple-bright); font-size: 0.5rem; font-style: normal; }
.soul-sub::after {
  content: ""; flex: 1; height: 1px; min-width: 30px;
  background: linear-gradient(90deg, rgba(226,180,84,0.5), transparent);
}
.soul-lead {
  max-width: 660px;
  margin: 26px 0 32px;
  color: var(--text-dim);
  font-size: 1.14rem;
}
.soul-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.soul-actions.center { justify-content: center; }

/* --- the frieze of five --- */
.soul-frieze {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px;
  margin: 62px 0 0;
  padding: 2px 0;
  background: linear-gradient(90deg, transparent, rgba(226,180,84,0.42), transparent);
  border-block: 1px solid rgba(226,180,84,0.24);
}
.soul-frieze figure { min-width: 0; position: relative; background: var(--imperator-ink); overflow: hidden; }
.soul-frieze img {
  width: 100%; height: auto;
  image-rendering: pixelated;
  filter: saturate(0.9) brightness(0.88);
  transition: filter .4s var(--ease), transform .4s var(--ease);
}
.soul-frieze figure:hover img { filter: none; transform: scale(1.03); }
.soul-frieze figcaption {
  position: absolute; inset: auto 0 0;
  padding: 26px 10px 9px;
  background: linear-gradient(transparent, rgba(21,15,30,0.94) 62%);
  color: var(--imperator-gold-pale);
  font-family: "Silkscreen", monospace;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}

/* --- hero stats --- */
.soul-stats {
  display: flex; flex-wrap: wrap; gap: 54px;
  padding: 34px 0 78px;
}
.soul-stats b {
  display: block;
  font-family: var(--font-roman);
  font-size: 2.1rem;
  line-height: 1;
  color: var(--imperator-gold-pale);
}
.soul-stats span {
  display: block; margin-top: 8px;
  color: var(--text-faint);
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* --- marble band --- */
.soul-marble {
  padding: 84px 0 88px;
  color: var(--soul-marble-ink);
  background:
    radial-gradient(900px 400px at 15% 0%, rgba(255,255,255,0.7), transparent 60%),
    linear-gradient(180deg, var(--soul-marble), var(--soul-marble-edge));
  border-block: 1px solid rgba(226,180,84,0.5);
}
.soul-marble .eyebrow { color: #8a6a1f; }
.soul-marble h2 { color: #1b1226; }
.soul-marble .lead { color: var(--soul-marble-dim); }

/* --- the four powers --- */
.soul-powers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.soul-power {
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 22px 30px;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(36,27,46,0.13);
  border-top: 3px solid var(--imperator-purple);
}
.soul-power-mark {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  margin-bottom: 18px;
  border: 1px solid rgba(107,63,160,0.4);
  border-radius: 50%;
  font-family: var(--font-roman);
  font-weight: 700;
  color: var(--imperator-purple);
}
.soul-power h3 {
  font-size: 1.16rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.soul-power-risk { color: var(--soul-marble-dim); font-size: 0.95rem; margin-bottom: 22px; }
.soul-meter {
  display: block; margin-top: auto;
  height: 7px;
  background: rgba(36,27,46,0.12);
  border-radius: 999px;
  overflow: hidden;
}
.soul-meter i {
  display: block; height: 100%; width: var(--v, 50%);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--imperator-purple), var(--imperator-gold));
}
.soul-note {
  margin-top: 16px;
  color: rgba(99,86,111,0.85);
  font-size: 0.8rem;
  font-style: italic;
}

/* --- how a turn works --- */
.soul-turn {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 56px;
  padding-top: 34px;
  border-top: 1px solid rgba(36,27,46,0.16);
  list-style: none;
  counter-reset: turn;
}
.soul-turn li {
  min-width: 0;
  counter-increment: turn;
  padding: 0 24px;
  border-left: 1px solid rgba(36,27,46,0.13);
}
.soul-turn li:first-child { padding-left: 0; border-left: 0; }
.soul-turn li::before {
  content: counter(turn, upper-roman);
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-roman);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  color: #8a6a1f;
}
.soul-turn b {
  display: block; margin-bottom: 6px;
  font-family: var(--font-roman);
  font-size: 1.02rem;
  letter-spacing: 0.03em;
}
.soul-turn span { color: var(--soul-marble-dim); font-size: 0.93rem; }

/* --- the dynasty --- */
.soul-dynasty { padding: 88px 0 84px; }
.soul-succession {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 72px;
  padding: 0;
  list-style: none;
}
.soul-reign {
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  padding-bottom: 22px;
  border: 1px solid rgba(226,180,84,0.20);
  background: linear-gradient(180deg, rgba(107,63,160,0.16), rgba(21,15,30,0.6));
  transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.soul-reign:hover { border-color: rgba(226,180,84,0.5); transform: translateY(-4px); }
.soul-reign img {
  width: 100%; height: auto;
  image-rendering: pixelated;
  border-bottom: 1px solid rgba(226,180,84,0.28);
}
.soul-reign-ord {
  position: absolute; top: 10px; left: 12px;
  display: grid; place-items: center;
  min-width: 28px; height: 28px;
  padding: 0 7px;
  background: rgba(21,15,30,0.86);
  border: 1px solid rgba(226,180,84,0.55);
  color: var(--imperator-gold-pale);
  font-family: var(--font-roman);
  font-weight: 700;
  font-size: 0.78rem;
}
.soul-reign h3 {
  margin: 18px 18px 2px;
  font-size: 1.24rem;
  letter-spacing: 0.05em;
  color: var(--imperator-gold-pale);
}
.soul-reign-years {
  display: block;
  margin: 0 18px 12px;
  color: var(--imperator-purple-bright);
  font-family: "Silkscreen", monospace;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
}
.soul-reign p { margin: 0 18px; color: var(--text-dim); font-size: 0.93rem; }
.soul-reign::after {
  content: "Free to play";
  align-self: flex-start;
  margin: auto 18px 0;
  padding: 4px 10px;
  background: rgba(226,180,84,0.12);
  border: 1px solid rgba(226,180,84,0.42);
  color: var(--imperator-gold-pale);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.07em;
}
.soul-reign-locked::after {
  content: "Full-game unlock";
  background: rgba(168,121,201,0.13);
  border-color: rgba(168,121,201,0.5);
  color: var(--imperator-purple-bright);
}

/* --- free/unlock split --- */
.soul-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 46px;
  align-items: center;
}
.soul-tablet {
  padding: 30px 32px;
  border: 1px solid rgba(226,180,84,0.30);
  background:
    radial-gradient(420px 220px at 100% 0%, rgba(107,63,160,0.22), transparent 70%),
    rgba(24,17,33,0.9);
  box-shadow: 10px 10px 0 rgba(58,37,76,0.55);
}
.soul-tablet .row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(226,180,84,0.14);
}
.soul-tablet .row:last-child { border-bottom: 0; padding-bottom: 0; }
.soul-tablet .row span { color: var(--text-dim); font-size: 0.95rem; }
.soul-tablet .row b { color: var(--imperator-gold-pale); text-align: right; font-size: 0.95rem; }
.soul-split-copy h3 {
  margin-bottom: 14px;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  color: var(--imperator-gold-pale);
}
.soul-split-copy p { color: var(--text-dim); margin-bottom: 22px; }

/* --- screenshots --- */
.soul-gallery-section {
  padding: 84px 0 88px;
  background: linear-gradient(180deg, rgba(107,63,160,0.10), transparent 60%);
  border-top: 1px solid rgba(226,180,84,0.12);
}
/* flex-wrap rather than a 5-up grid: the screenshots carry their own
   headline text, so they need to be large enough to read. Odd last row
   centres instead of stranding an orphan on the left. */
.soul-shots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.soul-shots figure { flex: 0 1 calc((100% - 40px) / 3); min-width: 0; max-width: 360px; }
.soul-shots img {
  width: 100%; height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: #000;
  border: 1px solid rgba(226,180,84,0.24);
  transition: transform .35s var(--ease), border-color .35s var(--ease);
}
.soul-shots figure:hover img { transform: translateY(-4px); border-color: rgba(226,180,84,0.55); }

/* --- release --- */
.soul-release { padding: 0 0 92px; }
.soul-cta {
  padding: 54px 40px 48px;
  text-align: center;
  border: 1px solid rgba(226,180,84,0.30);
  background:
    radial-gradient(500px 240px at 50% 0%, rgba(107,63,160,0.3), transparent 70%),
    linear-gradient(135deg, #1f1629, #120e1b);
}
.soul-cta > img {
  width: 88px; height: 88px;
  margin: 0 auto 24px;
  border-radius: 20px;
  image-rendering: pixelated;
  border: 1px solid rgba(226,180,84,0.42);
}
.soul-cta h2 { color: var(--imperator-gold-pale); margin-bottom: 14px; }
.soul-cta p { max-width: 620px; margin: 0 auto 28px; color: var(--text-dim); }

/* --- responsive --- */
@media (max-width: 980px) {
  .soul-powers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .soul-turn { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; }
  .soul-turn li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .soul-succession { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .soul-split { grid-template-columns: 1fr; gap: 32px; }
  .soul-shots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .soul-hero { padding-top: 54px; }
  .soul-lockup { gap: 16px; }
  .soul-icon { width: 76px; height: 76px; }
  .soul-frieze { margin-top: 44px; }
  .soul-frieze figcaption { font-size: 0.44rem; padding: 20px 4px 7px; }
  .soul-stats { gap: 30px; padding-bottom: 56px; }
  .soul-marble { padding: 62px 0 66px; }
  .soul-powers { grid-template-columns: 1fr; }
  .soul-power-risk { min-height: 0; }
  .soul-turn { grid-template-columns: 1fr; }
  .soul-turn li { padding-left: 0; border-left: 0; }
  .soul-succession { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .soul-dynasty { padding: 62px 0 60px; }
  .soul-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .soul-cta { padding: 40px 22px 38px; }
}
@media (max-width: 460px) {
  .soul-succession { grid-template-columns: 1fr; }
  .soul-shots { grid-template-columns: 1fr; }
}

/* ---------- Procesión game page ---------- */
.procesion-page {
  --process-purple: #3b245d;
  --process-purple-bright: #a569d0;
  --process-gold: #f0b93e;
  --process-cream: #fff0c5;
  --process-wine: #7d1437;
}
.procesion-page::before {
  background:
    radial-gradient(780px 540px at 78% 5%, rgba(118,67,159,0.22), transparent 64%),
    radial-gradient(620px 440px at 14% 34%, rgba(240,185,62,0.10), transparent 62%),
    linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px);
  background-size: auto, auto, 12px 12px, 12px 12px;
}
.procesion-page .eyebrow { color: var(--process-gold); }
.procesion-page .btn-gold {
  background: linear-gradient(135deg, #ffd66a, var(--process-gold));
  color: #261506;
  box-shadow: 0 12px 30px -12px rgba(240,185,62,0.7);
}
.procesion-page .game-lead strong { color: var(--process-cream); }
.release-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 17px;
  color: var(--text-dim);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.release-pill span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--process-gold);
  box-shadow: 0 0 14px rgba(240,185,62,0.75);
}
.procesion-world-intro .lead { max-width: 650px; }
.procesion-art .lead { margin-bottom: 20px; }

/* ---------- Procesión game page (per-game identity) ----------
   Candlelit and nocturnal: deep Sevillian night, candle amber, and a
   whitewashed-façade band for the middle of the page. Headings in
   Cormorant Garamond — warm and slightly ecclesiastical, the opposite
   of Soul of Rome's carved capitals and SandPile's rounded sans.
   The game's own pixel lettering (Silkscreen) stays for in-world labels.
   Scoped to .pr-page.
   ------------------------------------------------------------------ */
.pr-page {
  --pr-night:   #150c26;
  --pr-night-2: #0e0819;
  --pr-violet:  #4c2a7a;
  --pr-violet-br: #9a6fd4;
  --pr-candle:  #f0b93e;
  --pr-candle-pale: #ffdf9b;
  --pr-rose:    #c8567f;
  --pr-wall:      #f4ece0;
  --pr-wall-edge: #e6d9c6;
  --pr-wall-ink:  #2b2018;
  --pr-wall-dim:  #6b5a4b;
  --font-seville: "Cormorant Garamond", Georgia, serif;
  background: var(--pr-night);
}
.pr-page::before {
  background:
    radial-gradient(760px 520px at 50% -6%, rgba(240,185,62,0.20), transparent 62%),
    radial-gradient(820px 560px at 82% 30%, rgba(76,42,122,0.34), transparent 66%),
    radial-gradient(680px 520px at 8% 62%, rgba(200,86,127,0.14), transparent 68%);
}
.pr-page section { position: relative; z-index: 1; }
.pr-page .eyebrow { color: var(--pr-candle); }
.pr-page h2, .pr-page h3 { font-family: var(--font-seville); font-weight: 700; letter-spacing: 0; }
.pr-page h2 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); line-height: 1.1; }
.pr-page .btn-gold {
  color: #2a1c02;
  background: linear-gradient(135deg, var(--pr-candle-pale), var(--pr-candle));
  box-shadow: 0 12px 32px -12px rgba(240,185,62,0.75);
}

.pr-head { max-width: 760px; margin-bottom: 44px; }
.pr-head.center { margin-inline: auto; text-align: center; }
.pr-head h2 { color: var(--pr-candle-pale); margin-bottom: 14px; }
.pr-head .lead { color: var(--text-dim); }

/* --- hero --- */
.pr-hero { padding: 72px 0 0; overflow: hidden; }
.pr-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  gap: 50px;
  align-items: center;
}
.pr-lockup { display: flex; align-items: center; gap: 20px; margin-bottom: 22px; }
.pr-lockup img {
  width: 112px; height: 112px; flex: none;
  border-radius: 26px;
  image-rendering: pixelated;
  border: 1px solid rgba(240,185,62,0.42);
  box-shadow: 0 22px 50px -18px rgba(240,185,62,0.6);
}
.pr-lockup h1 {
  font-family: var(--font-seville);
  font-weight: 700;
  font-size: clamp(3rem, 6.6vw, 5.2rem);
  line-height: 0.98;
  color: var(--pr-candle-pale);
  text-shadow: 0 0 40px rgba(240,185,62,0.32);
}
.pr-lockup p {
  margin-top: 10px;
  color: var(--pr-violet-br);
  font-family: "Silkscreen", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pr-lead { max-width: 610px; margin-bottom: 28px; color: var(--text-dim); font-size: 1.14rem; }
.pr-lead strong { color: var(--pr-candle-pale); }
.pr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.pr-actions.center { justify-content: center; }
.pr-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px; margin-top: 36px; padding-top: 28px;
  border-top: 1px solid rgba(240,185,62,0.18);
}
.pr-stats b {
  display: block;
  font-family: var(--font-seville); font-weight: 700; font-size: 2.1rem; line-height: 1;
  color: var(--pr-candle-pale);
}
.pr-stats span { display: block; margin-top: 7px; color: var(--text-faint); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; }

/* --- framed pixel screen --- */
.pr-screen {
  position: relative;
  padding: 10px;
  background: var(--pr-night-2);
  border: 1px solid rgba(240,185,62,0.4);
  box-shadow: 14px 14px 0 rgba(76,42,122,0.5), 0 34px 80px -26px rgba(0,0,0,0.95);
}
.pr-screen img { width: 100%; height: auto; image-rendering: pixelated; }
.pr-screen figcaption {
  padding: 13px 8px 5px;
  color: var(--text-faint);
  font-family: "Silkscreen", monospace;
  font-size: 0.54rem; letter-spacing: 0.06em; text-align: center; text-transform: uppercase;
}

/* --- marquee --- */
.pr-marquee {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px;
  margin-top: 62px; padding: 17px 24px;
  background: linear-gradient(90deg, transparent, rgba(76,42,122,0.6), transparent);
  border-block: 1px solid rgba(240,185,62,0.22);
  font-family: "Silkscreen", monospace;
  font-size: 0.6rem; letter-spacing: 0.12em;
  color: var(--pr-candle-pale);
}
.pr-marquee i { color: var(--pr-rose); font-style: normal; font-size: 0.5rem; }

/* --- the three calls (whitewashed band) --- */
.pr-wall {
  margin-top: 0;
  padding: 84px 0 88px;
  color: var(--pr-wall-ink);
  background:
    radial-gradient(780px 360px at 50% 0%, rgba(255,255,255,0.8), transparent 62%),
    linear-gradient(180deg, var(--pr-wall), var(--pr-wall-edge));
  border-bottom: 1px solid rgba(240,185,62,0.5);
}
.pr-wall .eyebrow { color: #a8781f; }
.pr-wall h2 { color: #241a12; }
.pr-wall .lead { color: var(--pr-wall-dim); }
.pr-calls {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  position: relative;
}
/* the compás line running behind the three beats */
.pr-calls::before {
  content: "";
  position: absolute; top: 42px; left: 12%; right: 12%;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(43,32,24,0.28) 0 8px, transparent 8px 18px);
}
.pr-call { min-width: 0; text-align: center; position: relative; }
.pr-call-beat {
  display: grid; place-items: center;
  width: 84px; height: 84px; margin: 0 auto 22px;
  border-radius: 50%;
  background: linear-gradient(160deg, #fff, var(--pr-wall-edge));
  border: 2px solid var(--pc, var(--pr-violet));
  color: var(--pc, var(--pr-violet));
  font-size: 1.7rem;
  box-shadow: 0 12px 28px -12px rgba(43,32,24,0.4);
}
.pr-call:nth-child(1) { --pc: var(--pr-violet); }
.pr-call:nth-child(2) { --pc: #b8862f; }
.pr-call:nth-child(3) { --pc: var(--pr-rose); }
.pr-call-word {
  display: block; margin-bottom: 9px;
  font-family: "Silkscreen", monospace;
  font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pc, var(--pr-violet));
}
.pr-call h3 { font-size: 1.5rem; margin-bottom: 8px; }
.pr-call p { color: var(--pr-wall-dim); font-size: 0.96rem; }
.pr-call em { color: var(--pr-wall-ink); font-style: italic; }

/* --- the world --- */
.pr-world { padding: 88px 0 0; }
.pr-world-intro {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 40px; align-items: end;
  margin-bottom: 40px;
}
.pr-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.pr-facts div { padding: 18px 16px; border-left: 1px solid rgba(240,185,62,0.2); }
.pr-facts div:first-child { border-left: 0; padding-left: 0; }
.pr-facts b {
  display: block;
  font-family: var(--font-seville); font-weight: 700; font-size: 1.5rem;
  color: var(--pr-candle-pale);
}
.pr-facts span { display: block; margin-top: 4px; color: var(--text-faint); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; }

.pr-wide {
  position: relative;
  margin: 0 0 68px;
  border-block: 1px solid rgba(240,185,62,0.3);
  background: var(--pr-night-2);
}
.pr-wide img { width: 100%; height: auto; image-rendering: pixelated; }
.pr-wide figcaption {
  padding: 13px 8px;
  color: var(--text-faint);
  font-family: "Silkscreen", monospace;
  font-size: 0.54rem; letter-spacing: 0.06em; text-align: center; text-transform: uppercase;
}

.pr-stories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pr-story {
  min-width: 0;
  padding: 30px 26px 32px;
  background: linear-gradient(170deg, rgba(76,42,122,0.26), rgba(21,12,38,0.7));
  border: 1px solid rgba(240,185,62,0.18);
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.pr-story:hover { border-color: rgba(240,185,62,0.45); transform: translateY(-4px); }
.pr-story-kicker {
  display: block; margin-bottom: 14px;
  font-family: "Silkscreen", monospace;
  font-size: 0.52rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--pr-candle);
}
.pr-story h3 { font-size: 1.42rem; margin-bottom: 10px; color: var(--pr-candle-pale); }
.pr-story p { color: var(--text-dim); font-size: 0.95rem; }

/* --- pasos --- */
.pr-art { padding: 88px 0 0; }
.pr-art-grid {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 46px; align-items: center;
}
.pr-note {
  margin-top: 18px; padding-left: 18px;
  border-left: 2px solid rgba(240,185,62,0.4);
  color: var(--text-faint); font-size: 0.95rem; font-style: italic;
}
.pr-pasos {
  padding: 14px;
  background: linear-gradient(180deg, rgba(76,42,122,0.4), var(--pr-night-2));
  border: 1px solid rgba(240,185,62,0.32);
  box-shadow: 0 30px 70px -28px rgba(0,0,0,0.95);
}
.pr-pasos img { width: 100%; height: auto; image-rendering: pixelated; }
.pr-pasos figcaption {
  padding: 14px 8px 4px;
  color: var(--pr-candle);
  font-family: "Silkscreen", monospace;
  font-size: 0.54rem; letter-spacing: 0.1em; text-align: center; text-transform: uppercase;
}

/* --- release --- */
.pr-release { padding: 88px 0 92px; }
.pr-cta {
  padding: 54px 40px 48px;
  text-align: center;
  border: 1px solid rgba(240,185,62,0.3);
  background:
    radial-gradient(520px 250px at 50% 0%, rgba(240,185,62,0.2), transparent 70%),
    linear-gradient(140deg, #241546, #140c22);
}
.pr-cta > img {
  width: 88px; height: 88px; margin: 0 auto 24px;
  border-radius: 20px; image-rendering: pixelated;
  border: 1px solid rgba(240,185,62,0.42);
}
.pr-cta h2 { color: var(--pr-candle-pale); margin-bottom: 14px; }
.pr-cta p { max-width: 620px; margin: 0 auto 28px; color: var(--text-dim); }

/* --- responsive --- */
@media (max-width: 1000px) {
  .pr-hero-grid { grid-template-columns: 1fr; gap: 46px; }
  .pr-screen { max-width: 820px; margin: 0 auto; }
  .pr-world-intro { grid-template-columns: 1fr; gap: 28px; align-items: start; }
  .pr-art-grid { grid-template-columns: 1fr; gap: 34px; }
  .pr-stories { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .pr-hero { padding-top: 52px; }
  .pr-lockup { gap: 15px; }
  .pr-lockup img { width: 82px; height: 82px; border-radius: 19px; }
  .pr-marquee { margin-top: 44px; gap: 12px; font-size: 0.5rem; }
  .pr-wall { padding: 62px 0 66px; }
  .pr-calls { grid-template-columns: 1fr; gap: 34px; }
  .pr-calls::before { display: none; }
  .pr-world, .pr-art { padding-top: 62px; }
  .pr-wide { margin-bottom: 48px; }
  .pr-release { padding: 62px 0 68px; }
  .pr-cta { padding: 40px 22px 38px; }
  .pr-facts { grid-template-columns: 1fr; }
  .pr-facts div { border-left: 0; border-top: 1px solid rgba(240,185,62,0.2); padding-left: 0; }
  .pr-facts div:first-child { border-top: 0; }
}

/* ---------- Focus & skip link (accessibility) ----------
   :focus-visible only, so pointer users never see a ring but keyboard users
   always do. Each game page overrides --focus to its own accent below.
   ------------------------------------------------------------------------ */
:root { --focus: var(--gold-bright); }
.soul-page { --focus: var(--imperator-gold-pale); }
.sp-page   { --focus: var(--sp-teal); }
.pr-page   { --focus: var(--pr-candle-pale); }

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.gplay:focus-visible,
.nav-drop-btn:focus-visible,
.nav-toggle:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
/* on the light bands a gold ring washes out — use ink instead */
.soul-marble a:focus-visible, .soul-marble button:focus-visible,
.sp-sand-band a:focus-visible, .sp-sand-band button:focus-visible,
.pr-wall a:focus-visible, .pr-wall button:focus-visible {
  outline-color: #2b2018;
}

.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 200;
  padding: 12px 20px;
  border-radius: 0 0 10px 10px;
  background: var(--gold-bright);
  color: #1a1303;
  font-weight: 700;
  transition: top .18s var(--ease);
}
.skip-link:focus { top: 0; }

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

/* ---------- Trailer (click-to-load facade) ----------
   No YouTube iframe, script or cookie is loaded until the visitor presses
   play, so a normal page view makes no request to Google on their behalf.
   The embed then uses youtube-nocookie.com.
   ------------------------------------------------------------------ */
.trailer-band { padding-top: 0; }
.trailer-inner { max-width: 900px; margin: 0 auto; text-align: center; }
.trailer-inner .eyebrow { margin-bottom: 12px; }
.trailer-inner h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: 12px; }
.trailer-inner .lead { max-width: 620px; margin: 0 auto 30px; }
.trailer-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: #000;
  box-shadow: var(--shadow);
}
.trailer-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.trailer-facade {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 0; margin: 0;
  border: 0; cursor: pointer;
  background: none;
}
.trailer-facade img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease), filter .4s var(--ease);
  filter: brightness(0.78) saturate(0.95);
}
.trailer-facade:hover img { transform: scale(1.03); filter: brightness(0.9); }
.trailer-play {
  position: relative;
  display: grid; place-items: center;
  width: 84px; height: 84px;
  border-radius: 50%;
  background: rgba(10,11,13,0.72);
  border: 2px solid var(--gold-bright);
  box-shadow: 0 12px 40px -10px rgba(0,0,0,0.9);
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.trailer-facade:hover .trailer-play { transform: scale(1.08); background: var(--gold-bright); }
.trailer-play svg { margin-left: 5px; fill: var(--gold-bright); transition: fill .3s var(--ease); }
.trailer-facade:hover .trailer-play svg { fill: #1a1303; }
.trailer-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 40px 20px 16px;
  background: linear-gradient(transparent, rgba(10,11,13,0.92));
  color: var(--text);
  font-size: 0.86rem;
  letter-spacing: 0.04em;
}
.trailer-note { margin-top: 14px; color: var(--text-faint); font-size: 0.8rem; }
@media (max-width: 560px) {
  .trailer-play { width: 62px; height: 62px; }
  .trailer-play svg { width: 22px; height: 22px; }
}

/* ---------- Footer ---------- */
footer { border-top: 1px solid var(--line); padding: 60px 0 40px; background: var(--bg-elev); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.foot-grid p { color: var(--text-dim); font-size: 0.92rem; max-width: 320px; margin-top: 14px; }
.foot-col h4 { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 16px; }
.foot-col a { display: block; color: var(--text-dim); font-size: 0.93rem; padding: 5px 0; transition: color .2s; }
.foot-col a:hover { color: var(--gold-bright); }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 26px; border-top: 1px solid var(--line); color: var(--text-faint); font-size: 0.85rem; }
.foot-bottom .legal-links { display: flex; gap: 20px; }
.foot-bottom .legal-links a:hover { color: var(--gold-bright); }

/* ---------- Legal pages ---------- */
.legal { padding: 70px 0 90px; }
.legal .wrap { max-width: 820px; }
.legal h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); margin-bottom: 12px; }
.legal .updated { color: var(--text-faint); font-size: 0.9rem; margin-bottom: 14px; }
.legal .intro { color: var(--text-dim); font-size: 1.05rem; margin-bottom: 40px; padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.legal h2 { font-family: var(--font-body); font-weight: 700; font-size: 1.3rem; margin: 38px 0 12px; letter-spacing: 0; color: var(--text); }
.legal h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; margin: 24px 0 8px; letter-spacing: 0; }
.legal p, .legal li { color: var(--text-dim); margin-bottom: 12px; }
.legal ul { padding-left: 22px; margin-bottom: 16px; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--gold-bright); text-decoration: underline; text-underline-offset: 3px; }
.legal strong { color: var(--text); }
.back-link { display: inline-flex; align-items: center; gap: 8px; color: var(--text-dim); font-size: 0.92rem; margin-bottom: 30px; }
.back-link:hover { color: var(--gold-bright); }

/* ---------- Reveal animation (JS-gated: content is always visible without JS) ---------- */
.reveal { transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal { opacity: 0; transform: translateY(24px); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; gap: 50px; }
  .device { max-width: 320px; margin: 0 auto; transform: none; }
  .spotlight { padding: 28px; }
  .split { grid-template-columns: 1fr; gap: 36px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .game-hero-grid { grid-template-columns: 1fr; gap: 54px; }
  .sandpile-showcase { width: 100%; max-width: 690px; min-height: 650px; margin: 0 auto; }
  .sandpile-card { width: min(38%, 260px); }
  .sandpile-card-main { width: min(47%, 320px); }
  .game-feature-grid { grid-template-columns: repeat(2, 1fr); }
  .imperator-feature-art { width: 100%; max-width: 820px; margin: 0 auto; }
  .procesion-hero-grid { grid-template-columns: 1fr; gap: 58px; }
  .procesion-screen { width: 100%; max-width: 820px; margin: 0 auto; }
  .procesion-world-intro { grid-template-columns: 1fr; gap: 28px; }
  .procesion-art-grid { grid-template-columns: 1fr; }
}

/* Nav collapses to a menu a bit earlier so links never crowd the brand */
@media (max-width: 1000px) {
  .nav-links { display: none; }
  .nav-links.open {
    display: flex; flex-direction: column; position: absolute; top: 72px; left: 0; right: 0;
    background: var(--bg-elev); border-bottom: 1px solid var(--line); padding: 20px 24px; gap: 18px; align-items: flex-start;
  }
  .nav-links.open .nav-cta { margin-top: 4px; }
  .nav-toggle { display: block; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  section { padding: 64px 0; }
  .hero { padding: 60px 0 50px; }
  .hero-stats { gap: 24px; }
  .cta-band { padding: 38px 22px; }
  .foot-grid { grid-template-columns: 1fr; }
  .foot-bottom { flex-direction: column; align-items: flex-start; }
  .imperator-model .row { align-items: flex-start; gap: 18px; }
  .imperator-model .row b { max-width: 52%; }
}