/* Wanderer — public website. Bespoke dark-fantasy design: deep night blues and
   forest greens, warm lantern gold, soft glowing panels, a parchment note here and
   there. Mobile-first; everything scales up from a single column. */

:root {
  --night: #0c1220;          /* page base — deep blue night */
  --night-2: #111a2c;        /* raised surfaces */
  --pine: #16281f;           /* forest green surface */
  --panel: #14203288;        /* translucent panel over the vignette */
  --line: #2b3a52;           /* hairline borders */
  --gold: #e8c469;           /* lantern gold — accents, links, CTAs */
  --gold-deep: #b98f35;
  --moss: #7fb069;           /* healthy green accent */
  --ink: #e8e4d8;            /* body text — warm parchment white */
  --ink-dim: #a8a795;        /* secondary text */
  --parch: #e9dcb8;          /* parchment fill */
  --parch-ink: #2b2417;      /* ink on parchment */
  --radius: 14px;
  --font-display: Georgia, 'Times New Roman', serif;
  --font-body: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--night);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.65;
  /* layered night sky: soft aurora glows that sit behind everything */
  background-image:
    radial-gradient(1100px 500px at 85% -100px, #1d3a5f66 0%, transparent 60%),
    radial-gradient(900px 420px at 10% 240px, #14532d44 0%, transparent 60%),
    radial-gradient(700px 800px at 50% 105%, #3d2c6633 0%, transparent 55%);
  background-attachment: fixed;
}

a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* ---------- header ---------- */
header.site {
  position: sticky; top: 0; z-index: 50;
  background: #0c1220ee;
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
header.site .wrap { display: flex; align-items: center; gap: 18px; height: 60px; }
.logo {
  font-family: var(--font-display);
  font-size: 22px; letter-spacing: 3px; font-weight: 700;
  color: var(--ink); text-transform: uppercase;
}
.logo:hover { text-decoration: none; }
.logo .spark { color: var(--gold); }
nav.main { margin-left: auto; display: flex; gap: 4px; align-items: center; }
nav.main a {
  color: var(--ink-dim); padding: 8px 12px; border-radius: 8px; font-size: 15px;
}
nav.main a:hover { color: var(--ink); background: #ffffff10; text-decoration: none; }
nav.main a[aria-current="page"], nav.main a[aria-current="true"] { color: var(--gold); background: #e8c46910; box-shadow: inset 0 -2px var(--gold-deep); }
nav.main a:focus-visible, .logo:focus-visible, a.btn:focus-visible, button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
nav.main a.play {
  color: #1a1206; background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  font-weight: 700; padding: 8px 18px; border-radius: 999px;
  box-shadow: 0 0 18px #e8c46933;
}
nav.main a.play:hover { filter: brightness(1.08); background-image: linear-gradient(180deg, var(--gold), var(--gold-deep)); }
@media (max-width: 560px) {
  header.site .wrap { gap: 10px; padding-right: 0; }
  .logo { flex: 0 0 auto; font-size: 17px; letter-spacing: 1px; }
  nav.main { min-width: 0; overflow-x: auto; padding-right: 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  nav.main::-webkit-scrollbar { display: none; }
  nav.main a { flex: 0 0 auto; padding: 8px 10px; font-size: 14px; }
  nav.main a.play { padding: 8px 13px; }
}

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero .art {
  position: absolute; inset: 0;
  background: url('/store/feature-graphic.png') center bottom / cover no-repeat;
  opacity: 0.3; filter: saturate(1.15);
}
.hero .fade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #0c122088 0%, #0c1220cc 55%, var(--night) 100%);
}
.hero .wrap { position: relative; padding: 84px 20px 72px; text-align: center; }
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(42px, 9vw, 76px);
  letter-spacing: clamp(4px, 1.4vw, 12px);
  text-transform: uppercase; font-weight: 700;
  text-shadow: 0 2px 24px #000c, 0 0 60px #e8c46922;
}
.hero h1 .spark { color: var(--gold); }
.hero .tag {
  font-size: clamp(17px, 2.6vw, 22px); color: var(--ink);
  margin: 14px auto 10px; max-width: 620px; font-family: var(--font-display); font-style: italic;
}
.hero .sub { color: var(--ink-dim); max-width: 640px; margin: 0 auto 30px; }
.cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn {
  display: inline-block; padding: 14px 30px; border-radius: 999px; font-weight: 700;
  font-size: 17px; border: 1px solid transparent;
}
.btn:hover { text-decoration: none; filter: brightness(1.08); }
.btn.gold {
  color: #1a1206; background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  box-shadow: 0 4px 26px #e8c46940;
}
.btn.ghost { color: var(--ink); border-color: var(--line); background: #ffffff0c; }
.hero .fine { margin-top: 16px; color: var(--ink-dim); font-size: 13.5px; }

/* Homepage — production game art first */
.home-hero { min-height: 620px; }
.home-hero .art { background-image: url('/assets/home/rest-hero.webp'); background-position: center 55%; opacity: .72; filter: saturate(1.08) contrast(1.04); }
.home-hero .fade { background: linear-gradient(90deg, #08101bf2 0%, #08101bcb 42%, #08101b3d 72%), linear-gradient(0deg, var(--night), transparent 45%); }
.home-hero .wrap { z-index: 2; min-height: 620px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; padding-top: 70px; padding-bottom: 80px; }
.home-hero h1 { font-size: clamp(52px, 9vw, 84px); }
.home-hero .tag, .home-hero .sub { margin-left: 0; margin-right: 0; }.home-hero .tag { max-width: 570px; }.home-hero .sub { max-width: 560px; }
.home-hero .cta-row { justify-content: flex-start; }.home-hero .btn.ghost { background: #08101bc2; }.home-hero .fine { color: #c7c6b9; }
.home-kicker, .home-eyebrow { color: var(--gold); text-transform: uppercase; letter-spacing: .2em; font-size: 12px; font-weight: 800; }
.home-hero-sprites { position: absolute; inset: 0; max-width: 1080px; margin: auto; z-index: 1; pointer-events: none; }
.home-hero-sprites img { position: absolute; image-rendering: pixelated; filter: drop-shadow(0 8px 5px #000b); }
.home-player { right: 22%; bottom: 42px; width: 100px; height: 100px; animation: home-idle 2.1s steps(2, end) infinite; }
.home-wolf { right: 7%; bottom: 48px; width: 116px; height: 116px; opacity: .86; }
@keyframes home-idle { 50% { transform: translateY(-3px); } }
.home-feature-grid .card { padding: 0 20px 22px; overflow: hidden; }
.home-card-art { display: block; height: 142px; overflow: hidden; margin: 0 -20px 16px; border-bottom: 1px solid var(--line); background: #09101b; }
.home-card-art > img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.home-feature-grid .home-card-art + .glyph-img { position: relative; height: 36px; margin: -35px 0 8px; padding: 7px; border: 1px solid var(--line); border-radius: 9px; background: #0b1320; box-sizing: content-box; }
.home-sprite-stage, .home-item-stage, .home-building-stage { display: flex; align-items: center; justify-content: center; gap: 20px; background: radial-gradient(circle at 50% 100%, #3d573a, #0c1523 70%); }
.home-sprite-stage img { width: auto; height: 80px; object-fit: contain; filter: drop-shadow(0 8px 5px #000b); }.home-sprite-stage img:first-child { height: 64px; }.home-sprite-stage b { color: var(--gold); font: 13px var(--font-display); }
.home-item-stage { background: radial-gradient(circle, #344943, #0c1523 72%); }.home-item-stage img { width: 66px; height: 66px; object-fit: contain; filter: drop-shadow(0 7px 7px #000b); }.home-item-stage i { color: var(--gold); font-style: normal; font-size: 22px; }
.home-building-stage { align-items: end; padding-top: 8px; background: linear-gradient(#1b3151, #34532f); }.home-building-stage img { width: auto; height: 132px; object-fit: contain; filter: drop-shadow(0 8px 5px #000a); }
.home-world { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #0a111ddd; }.home-world .home-eyebrow { text-align: center; margin-bottom: 5px; }
.home-region-rail { display: grid; grid-template-columns: repeat(5, 1fr); gap: 11px; }
.home-region-rail a { min-width: 0; overflow: hidden; color: var(--ink); border: 1px solid var(--line); border-radius: 13px; background: var(--night-2); box-shadow: 0 10px 28px #0007; transition: transform .18s ease, border-color .18s ease; }
.home-region-rail a:hover { text-decoration: none; transform: translateY(-3px); border-color: var(--gold-deep); }.home-region-rail img { width: 100%; height: 190px; object-fit: cover; image-rendering: pixelated; }.home-region-rail span { display: block; min-height: 80px; padding: 11px 12px; border-top: 2px solid var(--gold-deep); }.home-region-rail b, .home-region-rail small { display: block; }.home-region-rail b { color: var(--gold); font: 16px var(--font-display); }.home-region-rail small { color: var(--ink-dim); line-height: 1.35; margin-top: 3px; }
.home-world-link { text-align: center; margin-top: 22px; }
.home-reading { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #09111c; }.home-reading .home-eyebrow { text-align: center; }.home-reading-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; margin-top: 28px; }.home-reading-grid article { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: 0 12px 30px #0005; }.home-reading-art { display: block; overflow: hidden; }.home-reading-art img { width: 100%; height: 170px; object-fit: cover; image-rendering: pixelated; transition: transform .25s ease; }.home-reading-grid article:hover .home-reading-art img { transform: scale(1.04); }.home-reading-grid article > div { padding: 18px; }.home-reading-grid small { color: var(--gold); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }.home-reading-grid h3 { margin: 6px 0 8px; font: 19px var(--font-display); line-height: 1.3; }.home-reading-grid h3 a { color: var(--ink); }.home-reading-grid p { min-height: 72px; margin-bottom: 10px; color: var(--ink-dim); font-size: 14px; }
.home-offline-panel { position: relative; min-height: 410px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #07101b; box-shadow: 0 16px 45px #0009; }.home-offline-panel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; image-rendering: pixelated; }.home-offline-panel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 30%, #07101be8 62%, #07101bf8 100%); }.home-offline-panel > div { position: relative; z-index: 1; width: 48%; min-height: 410px; margin-left: auto; display: flex; flex-direction: column; justify-content: center; padding: 38px; }.home-offline-panel h2 { font: clamp(27px, 4vw, 38px) var(--font-display); line-height: 1.15; margin: 6px 0 12px; }.home-offline-panel p:not(.home-eyebrow) { color: #cfcaba; }.home-offline-panel a { margin-top: 14px; font-weight: 700; }
@media (max-width: 850px) {
  .home-hero .fade { background: linear-gradient(90deg, #08101be9, #08101b8f 64%, #08101b42), linear-gradient(0deg, var(--night), transparent 52%); }.home-player { right: 16%; }.home-wolf { display: none; }
  .home-region-rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 20px 12px; margin: 0 -20px; }.home-region-rail a { flex: 0 0 245px; scroll-snap-align: start; }
}
@media (max-width: 600px) {
  .home-hero { min-height: 650px; }.home-hero .art { background-position: 62% center; }.home-hero .fade { background: linear-gradient(0deg, #08101bf8 8%, #08101bc2 58%, #08101b44 100%); }.home-hero .wrap { min-height: 650px; justify-content: end; padding: 220px 20px 42px; }.home-hero h1 { font-size: 48px; }.home-hero .tag { font-size: 18px; }.home-hero .sub { color: #d0ccbf; }.home-hero .btn { flex: 1 1 220px; text-align: center; }.home-hero-sprites { opacity: .6; }.home-player { right: 9%; bottom: 280px; width: 78px; height: 78px; }
  .home-offline-panel { min-height: 500px; }.home-offline-panel > img { object-position: 34% center; }.home-offline-panel::after { background: linear-gradient(0deg, #07101bfa 5%, #07101bc9 54%, transparent 100%); }.home-offline-panel > div { width: 100%; min-height: 500px; justify-content: end; padding: 28px 22px; }
}
@media (prefers-reduced-motion: reduce) { .home-player { animation: none; }.home-region-rail a { transition: none; }.home-region-rail a:hover { transform: none; } }

/* ---------- sections ---------- */
section.band { padding: 58px 0; }
section.band.alt { background: #0e1626aa; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
h2.sect {
  font-family: var(--font-display); font-size: clamp(26px, 4.5vw, 34px);
  text-align: center; margin-bottom: 8px; letter-spacing: 1px;
}
p.sect-sub { text-align: center; color: var(--ink-dim); max-width: 640px; margin: 0 auto 36px; }

/* feature cards */
.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 20px; position: relative;
  box-shadow: inset 0 1px 0 #ffffff0a, 0 6px 24px #00000040;
}
.card:hover { border-color: #3b5070; }
.card .glyph { font-size: 26px; margin-bottom: 10px; filter: drop-shadow(0 0 10px #e8c46955); }
.glyph-img { height: 44px; width: auto; image-rendering: pixelated; margin-bottom: 12px; filter: drop-shadow(0 0 12px #e8c46944); }
.card h3 { font-family: var(--font-display); font-size: 19px; margin-bottom: 6px; color: var(--gold); }
.card p { color: var(--ink-dim); font-size: 15px; }
.card a.more { font-size: 14px; display: inline-block; margin-top: 10px; }

/* gallery */
.shots { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.shot {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--night-2); box-shadow: 0 8px 30px #00000055;
}
.shot img { width: 100%; height: 190px; object-fit: cover; image-rendering: pixelated; }
.shot.wide { grid-column: 1 / -1; }
.shot.wide img { height: 150px; }
.shot figcaption { padding: 10px 14px; font-size: 14px; color: var(--ink-dim); border-top: 1px solid var(--line); }
.shot.placeholder .ph {
  height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; color: var(--ink-dim); font-size: 14px; letter-spacing: 1px;
  background:
    linear-gradient(135deg, #16223a 25%, transparent 25%, transparent 50%, #16223a 50%, #16223a 75%, transparent 75%) 0 0 / 22px 22px,
    var(--night-2);
}
.shot.placeholder .ph b { color: var(--gold); font-family: var(--font-display); font-size: 17px; letter-spacing: 2px; }

/* parchment note */
.parchment {
  background: var(--parch); color: var(--parch-ink);
  border-radius: var(--radius); padding: 26px 28px;
  border: 1px solid #b9a97c; box-shadow: 0 10px 34px #00000066, inset 0 0 60px #c9b88a55;
}
.parchment h3 { font-family: var(--font-display); margin-bottom: 8px; }
.parchment p { color: #4a3f28; }

/* ---------- article pages (about, guides, privacy…) ---------- */
.page { padding: 46px 0 30px; }
.page h1 { font-family: var(--font-display); font-size: clamp(30px, 5vw, 40px); margin-bottom: 6px; }
.page p.lede { color: var(--ink-dim); font-size: 18px; max-width: 720px; }
article.prose { max-width: 760px; margin: 26px 0 0; }
article.prose h2 { font-family: var(--font-display); font-size: 24px; margin: 34px 0 10px; color: var(--gold); }
article.prose h3 { font-size: 18px; margin: 22px 0 6px; color: var(--ink); }
article.prose p { margin: 0 0 14px; color: #cfcaba; }
article.prose ul, article.prose ol { margin: 0 0 16px 22px; color: #cfcaba; }
article.prose li { margin-bottom: 6px; }
article.prose code, .copybox {
  background: #0a0f1a; border: 1px solid var(--line); border-radius: 6px;
  padding: 1px 6px; font-size: 14.5px; color: #d8e6c8;
}

/* Illustrated headers for supporting, feature and trust pages */
.content-page-hero { position: relative; min-height: 390px; margin: -22px 0 0; overflow: hidden; border: 1px solid var(--line); border-radius: 0 0 20px 20px; background: #08101b; box-shadow: 0 16px 44px #0008; }
.content-page-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #07101bf3 0%, #07101bd2 46%, #07101b33 78%), linear-gradient(0deg, #07101bd8, transparent 50%); }
.content-page-hero picture, .content-page-hero picture img { position: absolute; inset: 0; width: 100%; height: 100%; }.content-page-hero picture img { object-fit: cover; object-position: center; image-rendering: pixelated; opacity: .8; }
.content-page-hero-copy { position: relative; z-index: 1; display: flex; min-height: 390px; max-width: 650px; flex-direction: column; justify-content: end; padding: clamp(28px, 6vw, 55px); }
.page .content-page-hero h1 { margin: 0; font-size: clamp(36px, 6vw, 54px); line-height: 1.04; text-shadow: 0 3px 18px #000; }.page .content-page-hero p.lede { margin-top: 13px; color: #eee9dc; font-size: 17px; text-shadow: 0 2px 9px #000; }
.content-page-prose { max-width: 800px; margin: 45px auto 0; }.content-page-prose h2 { padding-top: 3px; border-top: 1px solid #e8c4691e; }.content-page-prose h2:first-child { border-top: 0; }
@media (max-width: 620px) { .content-page-hero { min-height: 430px; margin-top: -30px; }.content-page-hero::after { background: linear-gradient(0deg, #07101bf8 7%, #07101bd2 60%, #07101b2e 100%); }.content-page-hero picture img { object-position: 61% center; }.content-page-hero-copy { min-height: 430px; padding: 210px 20px 28px; }.page .content-page-hero h1 { font-size: 37px; }.page .content-page-hero p.lede { font-size: 16px; }.content-page-prose { margin-top: 36px; } }

/* About */
.about-page { overflow: hidden; }
.about-hero { position: relative; min-height: 610px; overflow: hidden; border-bottom: 1px solid var(--line); background: #08101b; }
.about-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #07101bf2 0%, #07101bc9 43%, #07101b27 72%), linear-gradient(0deg, #08101be8, transparent 45%); }
.about-hero > img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 56%; image-rendering: pixelated; opacity: .8; }
.about-hero-copy { position: relative; z-index: 2; display: flex; min-height: 610px; flex-direction: column; align-items: flex-start; justify-content: center; padding-top: 64px; padding-bottom: 70px; }
.about-kicker { margin: 0 0 7px; color: var(--gold); font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.about-hero h1 { font: clamp(48px, 8vw, 76px)/1 var(--font-display); text-shadow: 0 4px 20px #000; }
.about-hero p.lede { max-width: 580px; margin-top: 14px; color: #eee9dc; font-size: clamp(18px, 2.5vw, 22px); text-shadow: 0 2px 9px #000; }
.about-hero .cta-row { justify-content: flex-start; }
.about-hero-player { position: absolute; z-index: 1; right: 17%; bottom: 17%; width: 96px; height: 96px; image-rendering: pixelated; filter: drop-shadow(0 9px 6px #000c); animation: home-wander-bob 2.2s steps(2, end) infinite; }
.about-prose { max-width: none; margin: 70px 0 25px; }
.about-prose h2 { margin-top: 0; font-size: clamp(25px, 4vw, 34px); }
.about-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .92fr); align-items: center; gap: clamp(32px, 6vw, 76px); margin: 0 0 56px; }
.about-story-reverse .about-story-copy { order: 2; }.about-story-reverse .about-figure { order: 1; }
.about-figure { position: relative; overflow: hidden; margin: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: 0 18px 45px #0008; }
.about-figure > img:first-child { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; image-rendering: pixelated; }
.about-figure figcaption { padding: 10px 14px; color: var(--ink-dim); font-size: 13px; }
.about-combat-figure > img:not(:first-child) { position: absolute; bottom: 48px; image-rendering: pixelated; filter: drop-shadow(0 6px 5px #000c); }.about-combat-player { left: 21%; }.about-combat-monster { right: 19%; }
.about-road { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 0 72px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: #09111d; }
.about-road a { position: relative; min-width: 0; overflow: hidden; border-radius: 10px; color: white; }.about-road a:hover { text-decoration: none; }.about-road img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; image-rendering: pixelated; transition: transform .25s ease; }.about-road a:hover img { transform: scale(1.05); }.about-road span { position: absolute; inset: auto 0 0; padding: 20px 9px 8px; background: linear-gradient(transparent, #05090ee8); font: 13px var(--font-display); }
.about-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 70px 0; }.about-pillars > div { padding: 25px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg, #121d2d, #0b121f); }.about-pillars img { float: right; margin: -5px 0 10px 12px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 7px 5px #000a); }.about-pillars h2 { font-size: 22px; }
.about-origin { position: relative; min-height: 470px; margin: 70px 0; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #07101b; }.about-origin > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 33% center; image-rendering: pixelated; }.about-origin::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 25%, #07101bdc 55%, #07101bfa 100%); }.about-origin > div { position: relative; z-index: 1; width: 54%; min-height: 470px; margin-left: auto; padding: 42px; display: flex; flex-direction: column; justify-content: center; }.about-origin h2 + p { margin-bottom: 24px; }
.about-maker { display: flex; align-items: center; gap: 28px; max-width: 800px; margin: 60px auto; padding: 28px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.about-maker > img { flex: 0 0 auto; image-rendering: pixelated; filter: drop-shadow(0 8px 5px #000b); }
.about-links { max-width: 800px; margin: 55px auto 0; padding: 28px 30px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }.about-links h2 { font-size: 25px; }
@media (max-width: 760px) {
  .about-hero { min-height: 570px; }.about-hero::after { background: linear-gradient(0deg, #07101bf9 7%, #07101bc9 57%, #07101b35 100%); }.about-hero > img:first-child { object-position: 62% center; }.about-hero-copy { min-height: 570px; justify-content: end; padding: 230px 20px 38px; }.about-hero h1 { font-size: 46px; }.about-hero p.lede { font-size: 17px; }.about-hero-player { right: 12%; bottom: 265px; width: 76px; height: 76px; opacity: .8; }
  .about-prose { margin-top: 48px; }.about-story { grid-template-columns: 1fr; gap: 22px; }.about-story-reverse .about-story-copy, .about-story-reverse .about-figure { order: initial; }.about-road { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-right: -20px; border-radius: 14px 0 0 14px; }.about-road a { flex: 0 0 70vw; scroll-snap-align: start; }.about-pillars { grid-template-columns: 1fr; }.about-origin { min-height: 570px; }.about-origin > img { object-position: 35% top; }.about-origin::after { background: linear-gradient(0deg, #07101bfb 8%, #07101bdf 57%, transparent 100%); }.about-origin > div { width: 100%; min-height: 570px; justify-content: end; padding: 28px 22px; }.about-maker { align-items: flex-start; padding: 22px 4px; }.about-maker > img { width: 72px; height: 72px; }.about-links { padding: 23px 21px; }
}
@media (max-width: 760px) { .home-reading-grid { grid-template-columns: 1fr; }.home-reading-grid article { display: grid; grid-template-columns: 38% 1fr; }.home-reading-art img { height: 100%; min-height: 210px; }.home-reading-grid p { min-height: 0; } }
@media (max-width: 470px) { .home-reading-grid article { display: block; }.home-reading-art img { height: 165px; min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .about-hero-player { animation: none; }.about-road img { transition: none; }.about-road a:hover img { transform: none; } }
.copybox {
  display: block; white-space: pre-wrap; padding: 16px 18px; margin: 14px 0;
  line-height: 1.55; border-radius: 10px;
}
.note {
  border-left: 3px solid var(--gold); background: #e8c46912;
  padding: 12px 16px; border-radius: 0 8px 8px 0; margin: 16px 0; color: var(--ink-dim);
}

/* guide cards grid */
.guide-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 26px; }
.guide-card {
  display: block; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px; color: var(--ink);
}
.guide-card:hover { text-decoration: none; border-color: var(--gold-deep); box-shadow: 0 0 24px #e8c46918; }
.guide-card .glyph { font-size: 24px; }
.guide-card h3 { font-family: var(--font-display); color: var(--gold); margin: 8px 0 4px; }
.guide-card p { color: var(--ink-dim); font-size: 14.5px; }

/* Guides landing page */
.guides-hero {
  position: relative; min-height: clamp(420px, 58vw, 610px); margin: -22px 0 58px;
  overflow: hidden; border: 1px solid var(--line); border-radius: 0 0 24px 24px;
  background: #09101b; box-shadow: 0 20px 55px #0009;
}
.guides-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 54% center; image-rendering: pixelated; }
.guides-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #08101bee 0%, #08101bc9 38%, #08101b29 70%), linear-gradient(0deg, #08101bbd, transparent 46%); }
.guides-hero-copy { position: relative; z-index: 1; display: flex; min-height: inherit; flex-direction: column; justify-content: end; align-items: flex-start; max-width: 610px; padding: clamp(28px, 6vw, 64px); }
.guides-kicker { color: var(--gold); text-transform: uppercase; letter-spacing: .2em; font-weight: 800; font-size: 12px; margin-bottom: 7px; }
.guides-hero h1 { font-size: clamp(38px, 7vw, 66px); line-height: 1; text-shadow: 0 3px 18px #000; }
.guides-hero p.lede { color: #e8e4d8; margin-top: 14px; max-width: 570px; text-shadow: 0 2px 9px #000; }
.guides-quick { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.guides-quick a { color: var(--ink); background: #08101bd9; border: 1px solid #e8c46966; border-radius: 999px; padding: 8px 14px; font-size: 14px; }
.guides-quick a:hover { color: var(--gold); text-decoration: none; border-color: var(--gold); }
.guide-chapter { margin: 0 0 58px; scroll-margin-top: 82px; }
.guide-chapter-head { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
.guide-chapter-head > span { flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px; color: #171007; font: 800 14px var(--font-display); border-radius: 50%; background: linear-gradient(145deg, var(--gold), var(--gold-deep)); box-shadow: 0 0 22px #e8c46932; }
.guide-chapter-head h2 { font: clamp(25px, 4vw, 32px) var(--font-display); line-height: 1.15; }
.guide-chapter-head p { color: var(--ink-dim); font-size: 14px; margin-top: 3px; }
.guide-chapter .guide-grid { margin-top: 0; }
.guide-chapter .guide-card { padding: 0 20px 22px; overflow: hidden; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.guide-chapter .guide-card:hover { transform: translateY(-4px); box-shadow: 0 15px 36px #0009, 0 0 24px #e8c46918; }
.guide-card-art { display: block; height: 148px; overflow: hidden; margin: 0 -20px 16px; border-bottom: 1px solid var(--line); background: #09101b; }
.guide-card-art > img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; transition: transform .3s ease; }
.guide-card:hover .guide-card-art > img { transform: scale(1.045); }
.guide-card .guide-card-art + .glyph-img { position: relative; width: auto; height: 38px; margin: -37px 0 8px; padding: 7px; border: 1px solid var(--line); border-radius: 9px; background: #0b1320; box-sizing: content-box; }
.item-card-art { display: flex; align-items: center; justify-content: center; gap: 30px; background: radial-gradient(circle at center, #3b4d38, #0b1421 72%); }
.item-card-art.wood { background: radial-gradient(circle at center, #385a31, #0b1421 72%); }
.item-card-art > img, .guide-card:hover .item-card-art > img { width: 82px; height: 82px; object-fit: contain; image-rendering: pixelated; transform: none; filter: drop-shadow(0 8px 8px #000b); }
@media (max-width: 620px) {
  .guides-hero { min-height: 500px; margin-top: -30px; border-radius: 0 0 18px 18px; }
  .guides-hero > img { object-position: 62% center; }
  .guides-hero::after { background: linear-gradient(0deg, #08101bf5 5%, #08101bbc 58%, #08101b33 100%); }
  .guides-hero-copy { justify-content: end; padding: 26px 20px 30px; }
  .guides-hero h1 { font-size: 42px; }
  .guides-hero p.lede { font-size: 16px; }
  .guides-quick a { padding: 7px 11px; font-size: 13px; }
  .guide-chapter-head { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .guide-chapter .guide-card, .guide-card-art > img { transition: none; }
  .guide-chapter .guide-card:hover, .guide-card:hover .guide-card-art > img { transform: none; }
}

/* Individual guide articles */
.guide-detail-hero { position: relative; min-height: 470px; margin: -22px 0 0; overflow: hidden; border: 1px solid var(--line); border-radius: 0 0 22px 22px; background: #08101b; box-shadow: 0 18px 50px #0009; }
.guide-detail-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #07101bf2 0%, #07101bcf 45%, #07101b2b 76%), linear-gradient(0deg, #07101bd9, transparent 48%); }
.guide-detail-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; image-rendering: pixelated; opacity: .82; }
.guide-detail-sprite { position: absolute; z-index: 1; right: 16%; bottom: 17%; width: 88px; height: 88px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 9px 6px #000c); animation: home-wander-bob 2.2s steps(2,end) infinite; }
.guide-detail-copy { position: relative; z-index: 2; display: flex; min-height: 470px; max-width: 620px; flex-direction: column; justify-content: end; align-items: flex-start; padding: clamp(28px, 6vw, 58px); }
.guide-detail-copy .crumb { margin: 0 0 14px; }.guide-detail-copy .crumb a { display: inline-block; padding: 6px 11px; border: 1px solid #e8c46955; border-radius: 999px; background: #07101bbd; color: #e4dfd1; }.guide-detail-copy .crumb a:hover { color: var(--gold); text-decoration: none; border-color: var(--gold); }
.page .guide-detail-copy h1 { margin: 0; font-size: clamp(39px, 7vw, 60px); line-height: 1.02; text-shadow: 0 3px 18px #000; }
.page .guide-detail-copy p.lede { max-width: 590px; margin: 14px 0 0; color: #eee9dc; font-size: 18px; text-shadow: 0 2px 9px #000; }
.guide-detail-prose { position: relative; max-width: 820px; margin: 48px auto 20px; padding: 0 30px 35px; border-left: 1px solid #e8c46924; }
.guide-detail-prose > h2 { position: relative; margin-top: 45px; padding-top: 4px; font-size: clamp(22px, 4vw, 27px); }.guide-detail-prose > h2::before { content: ''; position: absolute; left: -31px; top: 9px; width: 9px; height: 28px; border-radius: 0 5px 5px 0; background: linear-gradient(var(--gold), var(--gold-deep)); box-shadow: 0 0 14px #e8c4694a; }
.guide-detail-prose > h2:first-child { margin-top: 0; }.guide-detail-prose p { line-height: 1.72; }.guide-detail-prose strong { color: #eee8d7; }.guide-detail-prose table.data { border: 1px solid var(--line); border-radius: 11px; background: #0a121f; }.guide-detail-prose table.data th { padding-top: 10px; padding-bottom: 10px; color: var(--gold); background: #111c2c; }.guide-detail-prose .note { margin: 22px 0; padding: 17px 19px; background: linear-gradient(90deg, #e8c46917, #e8c46908); }
.guide-detail-prose ul.related { display: grid; gap: 9px; margin-left: 0; }.guide-detail-prose ul.related li { margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: #0b1320; }
@media (max-width: 620px) {
  .guide-detail-hero { min-height: 500px; margin-top: -30px; border-radius: 0 0 18px 18px; }.guide-detail-hero::after { background: linear-gradient(0deg, #07101bf8 6%, #07101bc8 58%, #07101b31 100%); }.guide-detail-bg { object-position: 58% center; }.guide-detail-sprite { right: 10%; bottom: 245px; width: 72px; height: 72px; opacity: .82; }.guide-detail-copy { min-height: 500px; padding: 230px 20px 30px; }.page .guide-detail-copy h1 { font-size: 39px; }.page .guide-detail-copy p.lede { font-size: 16px; }.guide-detail-prose { margin-top: 38px; padding: 0 7px 25px 20px; }.guide-detail-prose > h2::before { left: -21px; }
}
@media (prefers-reduced-motion: reduce) { .guide-detail-sprite { animation: none; } }

/* breadcrumb */
.crumb { font-size: 14px; color: var(--ink-dim); margin-bottom: 18px; }

/* ---------- footer ---------- */
footer.site {
  position: relative; margin-top: 60px; border-top: 1px solid var(--line);
  background: linear-gradient(180deg, #101b1a 0, #0a0f1a 42px); padding: 52px 0 40px; font-size: 14.5px;
}
footer.site::before { content: ''; position: absolute; inset: 0 0 auto; height: 22px; opacity: .4; background: linear-gradient(135deg, #334930 25%, transparent 25%) 0 0 / 22px 22px, linear-gradient(225deg, #243b29 25%, transparent 25%) 0 0 / 22px 22px; }
footer.site .cols { display: flex; flex-wrap: wrap; gap: 28px 46px; }
footer.site h4 { color: var(--ink); font-size: 14px; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 10px; }
footer.site a { display: block; color: var(--ink-dim); padding: 3px 0; }
footer.site a:hover { color: var(--gold); }
footer.site .legal { margin-top: 26px; color: #6b7383; font-size: 13px; }

/* ---------- contact form ---------- */
.contact-form label { display: block; margin-bottom: 16px; color: var(--ink-dim); font-size: 14.5px; }
.contact-form .opt { color: #6b7383; }
.contact-form input, .contact-form select, .contact-form textarea {
  display: block; width: 100%; margin-top: 6px; padding: 11px 13px;
  background: #0a0f1a; color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; font: inherit; font-size: 15.5px;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  outline: none; border-color: var(--gold-deep); box-shadow: 0 0 0 3px #e8c46922;
}
.contact-form button { cursor: pointer; margin-top: 4px; }
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
#cstatus { margin-top: 12px; color: var(--gold); min-height: 1.4em; }

/* tall phone-shot gallery */
.shots.tallgrid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.shot.tall img { height: auto; }
@media (min-width: 900px) { .shots.tallgrid { grid-template-columns: repeat(4, 1fr); } }

/* ── atlas / long-form content additions (world, play, guides expansion) ───── */
.crumbs { font-size: .82rem; opacity: .72; margin: 10px 0 -6px; }
.crumbs a { color: inherit; }
table.data { width: 100%; border-collapse: collapse; margin: 14px 0 22px; font-size: .95rem; display: block; overflow-x: auto; }
table.data th, table.data td { text-align: left; padding: 7px 12px; border-bottom: 1px solid rgba(255,255,255,.12); }
table.data th { opacity: .8; font-weight: 600; }
table.data tr:hover td { background: rgba(255,255,255,.04); }
.page-date { font-size: .8rem; opacity: .55; margin: 26px 0 4px; }
ul.related { list-style: none; padding: 0; }
ul.related li { margin: 6px 0; }
figure.shot { margin: 18px 0; }
figure.shot img { max-width: 100%; border-radius: 10px; display: block; }
figure.shot figcaption { font-size: .82rem; opacity: .65; margin-top: 6px; }
.world-map-figure { margin: 22px 0 28px; }
.world-map-scroll {
  width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain;
  border: 1px solid var(--line); border-radius: 12px; background: #09101b;
  box-shadow: 0 10px 30px #0007; scrollbar-color: var(--gold-deep) #09101b;
  cursor: grab; touch-action: pan-x; -webkit-overflow-scrolling: touch;
}
.world-map-scroll:active { cursor: grabbing; }
.world-map-scroll:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.world-map-tiles { display: flex; width: max-content; height: clamp(250px, 37vw, 410px); }
.world-map-tiles img {
  flex: none; width: auto; max-width: none; height: 100%; object-fit: contain;
  image-rendering: pixelated; border-radius: 0; display: block;
}
.world-map-figure figcaption { margin-top: 9px; color: var(--ink-dim); font-size: .86rem; text-align: center; }
.world-map-figure figcaption span { color: var(--gold); margin-right: 5px; }

/* World atlas landing */
.world-page { overflow: hidden; }
.world-hero { position: relative; min-height: 620px; overflow: hidden; border-bottom: 1px solid var(--line); background: #08101b; }
.world-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #07101bf1 0%, #07101bc7 42%, #07101b25 72%), linear-gradient(0deg, #08101be3, transparent 48%); }
.world-hero > img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; opacity: .84; }
.world-hero-copy { position: relative; z-index: 2; display: flex; min-height: 620px; flex-direction: column; align-items: flex-start; justify-content: center; padding-top: 65px; padding-bottom: 70px; }
.world-kicker { margin: 0 0 7px; color: var(--gold); font-size: 12px; font-weight: 800; letter-spacing: .19em; text-transform: uppercase; }
.world-hero h1 { max-width: 670px; font: clamp(46px, 8vw, 76px)/.98 var(--font-display); text-shadow: 0 4px 20px #000; }
.world-hero p.lede { max-width: 590px; margin: 16px 0 0; color: #eee9db; font-size: clamp(18px, 2.5vw, 22px); text-shadow: 0 2px 9px #000; }
.world-stats { display: flex; gap: 22px; margin: 24px 0; }.world-stats span { color: #d3cebf; font-size: 13px; }.world-stats strong { display: block; color: var(--gold); font: 25px var(--font-display); }
.world-hero-wanderer { position: absolute; z-index: 1; right: 17%; bottom: 16%; width: 96px; height: 96px; image-rendering: pixelated; filter: drop-shadow(0 8px 6px #000d); animation: home-wander-bob 2.2s steps(2,end) infinite; }
.world-prose { max-width: none; margin: 68px 0 0; }.world-intro { max-width: 770px; margin: 0 auto 34px; text-align: center; }.world-intro h2, .world-section-heading h2, .world-region-intro h2 { margin: 0 0 10px; font: clamp(28px, 4vw, 38px) var(--font-display); color: var(--ink); }.world-intro p:last-child { color: #cfcaba; font-size: 17px; }
.world-prose .world-map-figure { margin: 0 calc(50% - 50vw) 82px; padding: 18px max(20px, calc((100vw - 1080px) / 2)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #080e18; }
.world-map-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 12px; }.world-map-toolbar > div { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; }.world-map-toolbar strong { font: 18px var(--font-display); }.world-map-toolbar small { grid-column: 2; color: var(--ink-dim); }.world-map-compass { grid-row: 1 / 3; display: grid; place-items: center; width: 38px; height: 38px; color: #171007; border-radius: 50%; background: var(--gold); }.world-map-drag { color: var(--gold); font-size: 13px; }.world-prose .world-map-scroll { border-radius: 15px; box-shadow: 0 15px 40px #000a; }.world-prose .world-map-tiles { height: clamp(310px, 42vw, 480px); }
.world-section-heading { max-width: 720px; margin-bottom: 24px; }.world-section-heading > p:last-child { color: var(--ink-dim); }.world-region-rail { display: grid; grid-template-columns: repeat(6, 1fr); gap: 15px; }.world-region-card { position: relative; grid-column: span 2; overflow: hidden; min-height: 320px; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); color: var(--ink); box-shadow: 0 12px 30px #0005; }.world-region-card:nth-child(4), .world-region-card:nth-child(5) { grid-column: span 3; }.world-region-card:hover { text-decoration: none; border-color: var(--gold-deep); }.world-region-card > img { width: 100%; height: 190px; object-fit: cover; image-rendering: pixelated; transition: transform .28s ease; }.world-region-card:hover > img { transform: scale(1.045); }.world-region-card > div { padding: 17px 18px 19px; }.world-region-card h3 { margin: 0 0 5px; color: var(--gold); font: 19px var(--font-display); }.world-region-card p { margin: 0 0 9px; color: var(--ink-dim); font-size: 14px; }.world-region-card small { color: #ded9ca; }.world-region-number { position: absolute; top: 12px; left: 12px; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #e8c4697a; border-radius: 50%; background: #07101bdd; color: var(--gold); font: 12px var(--font-display); }
.world-region-intro { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin: 82px 0 22px; }.world-region-intro > p { max-width: 470px; color: var(--ink-dim); }.world-prose table.data { display: table; overflow: visible; border: 1px solid var(--line); border-radius: 12px; background: #0b1320; }.world-prose table.data th { padding: 12px 16px; color: var(--gold); background: #111c2c; }.world-prose table.data td { padding: 10px 16px; }.world-prose table.data tr:last-child td { border-bottom: 0; }
.world-directories { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin: 70px 0 24px; }.world-directories > a { display: flex; align-items: center; gap: 17px; min-height: 160px; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg, #121d2d, #0a121e); color: var(--ink); }.world-directories > a:hover { text-decoration: none; border-color: var(--gold-deep); transform: translateY(-3px); }.world-directories > a > span { flex: 0 0 auto; display: grid; place-items: center; width: 52px; height: 52px; color: #171007; font-size: 25px; border-radius: 12px; background: var(--gold); }.world-directories img { flex: 0 0 auto; width: 56px; height: 56px; image-rendering: pixelated; }.world-directories h2 { margin: 0 0 7px; color: var(--gold); font-size: 18px; }.world-directories p { margin: 0 0 9px; color: var(--ink-dim); font-size: 13px; }.world-directories small { color: #ded9ca; }
@media (max-width: 760px) {
  .world-hero { min-height: 590px; }.world-hero::after { background: linear-gradient(0deg, #07101bf8 7%, #07101bc6 58%, #07101b2d 100%); }.world-hero > img:first-child { object-position: 62% center; }.world-hero-copy { min-height: 590px; justify-content: end; padding: 240px 20px 38px; }.world-hero h1 { font-size: 46px; }.world-hero p.lede { font-size: 17px; }.world-stats { gap: 16px; }.world-hero-wanderer { right: 10%; bottom: 292px; width: 74px; height: 74px; opacity: .8; }.world-prose { margin-top: 48px; }.world-map-drag { display: none; }.world-prose .world-map-figure { margin-bottom: 58px; padding-left: 20px; padding-right: 0; }.world-prose .world-map-tiles { height: 310px; }.world-prose .world-map-scroll { border-radius: 13px 0 0 13px; }.world-map-figure figcaption { padding-right: 20px; }.world-region-rail { display: flex; overflow-x: auto; margin-right: -20px; padding: 0 20px 12px 0; scroll-snap-type: x mandatory; }.world-region-card, .world-region-card:nth-child(4), .world-region-card:nth-child(5) { flex: 0 0 78vw; min-height: 315px; scroll-snap-align: start; }.world-region-intro { display: block; margin-top: 58px; }.world-prose table.data { display: block; overflow-x: auto; white-space: nowrap; }.world-directories { grid-template-columns: 1fr; }.world-directories > a { min-height: 130px; }
}
@media (prefers-reduced-motion: reduce) { .world-hero-wanderer { animation: none; }.world-region-card > img { transition: none; }.world-region-card:hover > img, .world-directories > a:hover { transform: none; } }

/* Play landing page */
.play-hero {
  position: relative; min-height: clamp(480px, 62vw, 650px); margin: -22px 0 0;
  overflow: hidden; border: 1px solid var(--line); border-radius: 0 0 24px 24px;
  background: #07101c; box-shadow: 0 22px 58px #000a;
}
.play-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 57% center; image-rendering: pixelated; }
.play-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #07101cf5 0%, #07101ccc 37%, transparent 70%), linear-gradient(0deg, #07101c99, transparent 48%); }
.play-hero-copy { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-height: inherit; width: min(620px, 62%); padding: clamp(30px, 6vw, 68px); }
.play-kicker { color: var(--gold); text-transform: uppercase; letter-spacing: .2em; font-weight: 800; font-size: 12px; }
.play-hero h1 { max-width: 560px; margin: 7px 0 0; font-size: clamp(40px, 7vw, 68px); line-height: .98; text-shadow: 0 3px 18px #000; }
.play-hero p.lede { color: var(--ink); margin-top: 16px; max-width: 530px; text-shadow: 0 2px 10px #000; }
.play-hero .cta-row { justify-content: flex-start; margin-top: 24px; }
.play-hero .btn.ghost { background: #07101cbd; }
.play-assurance { margin-top: 16px; color: #c7c6b9; font-size: 13px; }
.play-facts { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 18px 64px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 15px 15px; background: #101a2be8; box-shadow: 0 12px 30px #0007; }
.play-facts div { padding: 18px 12px; text-align: center; border-right: 1px solid var(--line); }.play-facts div:last-child { border: 0; }
.play-facts strong, .play-facts span { display: block; }.play-facts strong { color: var(--gold); font: 27px var(--font-display); }.play-facts span { color: var(--ink-dim); font-size: 12px; }
.play-platforms { margin: 0 0 64px; }
.play-section-heading { text-align: center; margin-bottom: 22px; }.play-section-heading > p { color: var(--moss); text-transform: uppercase; letter-spacing: .18em; font-size: 11px; font-weight: 800; }.play-section-heading h2 { font: clamp(28px, 4vw, 36px) var(--font-display); }
.platform-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1080px; margin: auto; }
.platform-card { display: flex; gap: 18px; align-items: center; min-height: 185px; padding: 24px; color: var(--ink); border: 1px solid var(--line); border-radius: 16px; background: radial-gradient(circle at 10% 50%, #304838, #101a2b 67%); box-shadow: 0 10px 32px #0007; }
.platform-card.android { background: radial-gradient(circle at 10% 50%, #293d55, #101a2b 67%); }
.platform-card.ios { background: radial-gradient(circle at 10% 50%, #3b354f, #101a2b 67%); }
.platform-card:hover { text-decoration: none; border-color: var(--gold-deep); transform: translateY(-3px); }
.platform-card .platform-icon, .platform-card > img { flex: 0 0 auto; width: 76px; height: 76px; object-fit: contain; border-radius: 17px; }
.platform-icon { display: grid; place-items: center; color: #151006; font-size: 29px; background: linear-gradient(145deg, var(--gold), var(--gold-deep)); box-shadow: 0 0 24px #e8c46945; }
.platform-card small { color: var(--moss); text-transform: uppercase; letter-spacing: .12em; font-weight: 800; }.platform-card h3 { font: 23px var(--font-display); margin: 2px 0 5px; }.platform-card p { color: var(--ink-dim); font-size: 14px; line-height: 1.45; }.platform-card b { display: block; color: var(--gold); margin-top: 10px; font-size: 14px; }
.play-loop-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 18px 0 28px; }
.play-loop-grid a { overflow: hidden; color: var(--ink); border: 1px solid var(--line); border-radius: 13px; background: #101a2b; box-shadow: 0 8px 24px #0006; }
.play-loop-grid a:hover { text-decoration: none; border-color: var(--gold-deep); }.play-loop-grid img { width: 100%; height: 160px; object-fit: cover; image-rendering: pixelated; }.play-loop-grid span { display: block; padding: 12px 14px; color: var(--ink-dim); font-size: 14px; }.play-loop-grid b { display: block; color: var(--gold); font: 19px var(--font-display); }
.play-boss-shot img { height: auto; aspect-ratio: 16 / 9; }
@media (max-width: 720px) {
  .play-hero { min-height: 610px; margin-top: -30px; border-radius: 0 0 18px 18px; }
  .play-hero > img { object-position: 66% center; }
  .play-hero::after { background: linear-gradient(0deg, #07101cf8 5%, #07101cbd 55%, #07101c22 100%); }
  .play-hero-copy { justify-content: end; width: 100%; padding: 28px 20px 34px; }
  .play-hero h1 { font-size: 44px; }.play-hero p.lede { font-size: 16px; }.play-hero .cta-row { width: 100%; }.play-hero .btn { flex: 1 1 230px; text-align: center; }
  .play-facts { grid-template-columns: repeat(2, 1fr); margin: 0 8px 50px; }.play-facts div:nth-child(2) { border-right: 0; }.play-facts div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .platform-grid, .play-loop-grid { grid-template-columns: 1fr; }.platform-card { min-height: 160px; padding: 19px; }.platform-card .platform-icon, .platform-card > img { width: 62px; height: 62px; }
}
@media (prefers-reduced-motion: reduce) { .platform-card { transition: none; }.platform-card:hover { transform: none; } }
.faq details { border-bottom: 1px solid rgba(255,255,255,.12); padding: 10px 0; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details p { margin: 10px 0 4px; }
video.clip { max-width: 100%; border-radius: 10px; display: block; margin: 18px 0 6px; }