/* ==========================================================================
   lagoslife.xyz — stylesheet
   Direction: warm Lagos palette + Nigerian green. The game window is framed
   like an arcade bezel so it reads as a screen, not an image.
   ========================================================================== */

:root {
  --ink: #14110e;
  --ink-2: #3c342c;
  --ink-3: #6b6055;
  --cream: #faf7f2;
  --cream-2: #f3ede3;
  --line: #e2d9cb;
  --line-2: #d2c6b4;
  --green: #0e7a4d;
  --green-d: #0a5c3a;
  --green-l: #e6f4ec;
  --amber: #e07a1f;
  --amber-l: #fdf0e2;
  --lagoon: #1f6f8b;
  --white: #fff;

  --bezel: #1b1815;
  --bezel-2: #2a2521;

  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --shadow: 0 1px 2px rgba(20, 17, 14, 0.04), 0 8px 24px -12px rgba(20, 17, 14, 0.18);
  --shadow-lg: 0 24px 60px -24px rgba(20, 17, 14, 0.4);

  --wrap: 1120px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
}

img, svg, iframe { max-width: 100%; }
img, svg { height: auto; }

a { color: var(--green-d); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--amber); }

:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
.skip {
  position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff;
  padding: 12px 18px; z-index: 100; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 247, 242, 0.92);
  backdrop-filter: saturate(1.5) blur(10px);
  border-bottom: 1px solid var(--line);
}
.hdr { display: flex; align-items: center; gap: 20px; min-height: 64px; }
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 18px; letter-spacing: -0.02em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.brand:hover { color: var(--ink); }
.brand-mark { width: 30px; height: 30px; flex: none; }
/* The subtitle is drawn with a pseudo-element so it stays visually but does not
   pollute the anchor text. Every page links home with a clean "Lagos Life". */
.brand-name { display: inline-block; line-height: 1.15; }
.brand-name::after {
  content: "Guide & play";
  display: block; font-size: 11px; font-weight: 600;
  color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase;
}
.nav { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.nav a {
  padding: 8px 12px; border-radius: 999px; font-size: 15px; font-weight: 600;
  color: var(--ink-2); text-decoration: none;
}
.nav a:hover { background: var(--cream-2); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--ink); color: #fff; }
.hdr-cta {
  margin-left: 8px; padding: 9px 16px; border-radius: 999px; background: var(--green);
  color: #fff !important; font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap;
}
.hdr-cta:hover { background: var(--green-d); color: #fff !important; }

/* ---------- Hero ---------- */
.hero { padding: 40px 0 8px; }
.crumbs { font-size: 13.5px; color: var(--ink-3); margin: 0 0 18px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line-2); }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--green-d); text-decoration: underline; }

h1 {
  font-size: clamp(32px, 5.4vw, 54px); line-height: 1.06; letter-spacing: -0.035em;
  margin: 0 0 16px; font-weight: 850; text-wrap: balance;
}
.lede { font-size: clamp(17px, 2.1vw, 20px); color: var(--ink-2); margin: 0 0 22px; max-width: 62ch; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--green-d); background: var(--green-l); border: 1px solid #cbe6d8;
  padding: 6px 12px; border-radius: 999px; margin-bottom: 16px;
}
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; padding: 0; list-style: none; }
.pill {
  font-size: 13.5px; font-weight: 650; color: var(--ink-2);
  background: var(--white); border: 1px solid var(--line); padding: 6px 12px; border-radius: 999px;
}
.pill b { color: var(--green-d); }

/* ---------- Game window (core component) ---------- */
.game-shell { margin: 8px 0 8px; }

.game-stage {
  position: relative;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  aspect-ratio: 16 / 10;
  background: var(--bezel);
  border-radius: var(--r-lg);
  padding: 10px;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  border: 1px solid #000;
}
.game-screen {
  position: relative; width: 100%; height: 100%;
  border-radius: 14px; overflow: hidden; background: #0d0b09;
}

/* Facade: zero game requests on first paint */
.game-facade {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; width: 100%; height: 100%;
  border: 0; padding: 0; cursor: pointer; background: #0d0b09; color: #fff;
  font: inherit; text-align: center;
}
.game-facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The game screenshot is bright, so the scrim is stronger to keep the play button legible */
.game-facade::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 62% 58% at 50% 46%, rgba(8, 6, 5, 0.68) 0%, rgba(8, 6, 5, 0.34) 55%, rgba(8, 6, 5, 0) 100%),
    linear-gradient(180deg, rgba(8, 6, 5, 0.34) 0%, rgba(8, 6, 5, 0.04) 32%, rgba(8, 6, 5, 0.78) 100%);
}
.facade-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 20px; }
.play-btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--green); color: #fff; font-weight: 800; font-size: clamp(16px, 2.2vw, 21px);
  padding: 16px 34px; border-radius: 999px; letter-spacing: -0.01em;
  box-shadow: 0 12px 34px -6px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.14) inset;
  transition: transform 0.15s ease, background 0.15s ease;
}
.game-facade:hover .play-btn { background: #12945e; transform: translateY(-2px); }
.play-btn svg { width: 21px; height: 21px; flex: none; }
.game-shell[data-state="playing"] .game-facade,
.game-shell[data-state="loading"] .game-facade { display: none; }

.game-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.game-shell[data-state="idle"] .game-frame { visibility: hidden; }

.gate-note {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9); background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2); padding: 4px 10px; border-radius: 999px;
}

/* Loading state */
.game-spinner {
  position: absolute; inset: 0; z-index: 4; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: #0d0b09; color: #fff;
}
.game-shell[data-state="loading"] .game-spinner { display: flex; }
.spin {
  width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.18); border-top-color: var(--green);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.spin-label { font-size: 14px; color: rgba(255, 255, 255, 0.8); }
.spin-hint { font-size: 13px; color: rgba(255, 255, 255, 0.55); max-width: 40ch; text-align: center; padding: 0 20px; }
.spin-hint a { color: #7fd8ab; }

/* Toolbar */
.game-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  width: 100%; max-width: var(--wrap); margin: 14px auto 0;
}
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: 14.5px; font-weight: 700;
  padding: 11px 17px; min-height: 44px;
  border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--white); color: var(--ink); cursor: pointer; text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.btn:hover { border-color: var(--ink-3); background: var(--cream-2); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 17px; height: 17px; flex: none; }
.btn-primary { background: var(--green); border-color: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-d); border-color: var(--green-d); color: #fff; }
.btn[hidden] { display: none; }

/* Fullscreen: the stage fills the screen */
.game-stage:fullscreen,
.game-stage:-webkit-full-screen {
  max-width: none; width: 100vw; height: 100vh; aspect-ratio: auto;
  border-radius: 0; padding: 0; border: 0;
}
.game-stage:fullscreen .game-screen,
.game-stage:-webkit-full-screen .game-screen { border-radius: 0; }
.game-stage:fullscreen .game-facade,
.game-stage:-webkit-full-screen .game-facade { border-radius: 0; }
.fs-exit {
  position: absolute; top: 14px; right: 14px; z-index: 6; display: none;
}
.game-stage:fullscreen .fs-exit,
.game-stage:-webkit-full-screen .fs-exit { display: inline-flex; }

/* ---------- Prose ---------- */
.section { padding: 40px 0; }
.section + .section { border-top: 1px solid var(--line); }
h2 {
  font-size: clamp(24px, 3.4vw, 34px); line-height: 1.15; letter-spacing: -0.028em;
  margin: 0 0 14px; font-weight: 820; text-wrap: balance;
}
h3 { font-size: clamp(19px, 2.4vw, 22px); line-height: 1.25; letter-spacing: -0.018em; margin: 30px 0 10px; font-weight: 780; }
h4 { font-size: 17px; margin: 22px 0 8px; font-weight: 750; }
.prose > *:first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol { margin: 0 0 16px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: 7px; }
.prose li::marker { color: var(--green); font-weight: 700; }
.prose strong { font-weight: 750; }
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em;
  background: var(--cream-2); border: 1px solid var(--line); padding: 1px 6px; border-radius: 5px;
}
.measure { max-width: 72ch; }
/* When .measure and .wrap share an element, keep the outer box at wrap width so
   it stays centred, and cap each direct child at 72ch. This keeps prose aligned
   with the headings in the sections around it. */
.wrap.measure { max-width: var(--wrap); }
.prose.measure > * { max-width: 72ch; }
.prose.measure > .table-wrap { max-width: 100%; }

.callout {
  border-left: 4px solid var(--amber); background: var(--amber-l);
  padding: 16px 20px; border-radius: 0 var(--r) var(--r) 0; margin: 24px 0;
}
.callout.warn { border-color: #c0392b; background: #fdecea; }
.callout.ok { border-color: var(--green); background: var(--green-l); }
.callout p:last-child { margin-bottom: 0; }
.callout strong { display: block; margin-bottom: 4px; }

/* ---------- Cards ---------- */
.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 24px 0; padding: 0; list-style: none; }
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  padding: 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px;
  text-decoration: none; color: inherit; transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
a.card:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--shadow-lg); color: inherit; }
.card h3 { margin: 0; font-size: 18px; }
.card p { margin: 0; font-size: 15px; color: var(--ink-2); }
.card .more { margin-top: auto; padding-top: 10px; font-size: 14px; font-weight: 750; color: var(--green-d); }
.card-icon { font-size: 24px; line-height: 1; }

/* ---------- GEO: citable answer block ---------- */
.answer {
  background: var(--white); border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  padding: 30px 34px; box-shadow: var(--shadow);
}
.answer-kicker {
  margin: 0 0 6px; font-size: 12.5px; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-d);
}
.answer h2 { margin-top: 0; }
.answer-lede {
  font-size: 18.5px; line-height: 1.62; color: var(--ink);
  margin: 0 0 24px; max-width: 78ch; font-weight: 450;
}
.answer-foot {
  margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 14px; line-height: 1.6; color: var(--ink-3);
}

/* Facts list: easy for answer engines to extract, still readable for people */
.facts { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.fact {
  display: grid; grid-template-columns: minmax(140px, 200px) 1fr;
  gap: 6px 20px; padding: 11px 0; border-bottom: 1px solid var(--line);
}
.fact dt { font-size: 13.5px; font-weight: 750; color: var(--ink-3); letter-spacing: 0.01em; }
.fact dd { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--ink); }

/* Key questions */
.keyanswers { margin: 24px 0 0; display: grid; gap: 0; }
.keyanswers .qa { padding: 16px 0; border-bottom: 1px solid var(--line); }
.keyanswers dt { font-weight: 750; font-size: 16.5px; margin-bottom: 5px; letter-spacing: -0.01em; }
.keyanswers dd { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }

/* ---------- Content figures ---------- */
figure.shot { margin: 26px 0; }
figure.shot img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r); border: 1px solid var(--line-2);
  background: var(--cream-2); box-shadow: var(--shadow);
}
figure.shot figcaption {
  margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--ink-3);
}
.prose.measure > figure.shot { max-width: 100%; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; margin: 22px 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); }
table { border-collapse: collapse; width: 100%; font-size: 15.5px; min-width: 520px; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--cream-2); font-weight: 750; font-size: 14px; letter-spacing: 0.01em; }
tbody tr:last-child td { border-bottom: 0; }
td strong { color: var(--green-d); }

/* ---------- FAQ ---------- */
.faq { border: 1px solid var(--line); border-radius: var(--r); background: var(--white); overflow: hidden; margin: 22px 0; }
.faq details + details { border-top: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: 16px 20px; font-weight: 700; font-size: 16.5px;
  display: flex; align-items: flex-start; gap: 12px; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; color: var(--green); font-weight: 800; font-size: 20px; line-height: 1.2; flex: none; }
.faq details[open] summary::before { content: "−"; }
.faq summary:hover { background: var(--cream-2); }
.faq .answer { padding: 0 20px 18px 44px; color: var(--ink-2); }
.faq .answer p:first-child { margin-top: 0; }
.faq .answer p:last-child { margin-bottom: 0; }

/* ---------- Notice ---------- */
.notice {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--white); border: 1px dashed var(--line-2); border-radius: var(--r);
  padding: 14px 18px; font-size: 14.5px; color: var(--ink-2); margin: 26px 0;
}
.notice strong { color: var(--ink); }

/* ---------- End cap ---------- */
.endcap {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  background: linear-gradient(135deg, var(--green-l) 0%, var(--white) 62%);
  border: 1px solid #cbe6d8; border-radius: var(--r-lg);
  padding: 26px 30px; box-shadow: var(--shadow);
}
.endcap-copy { flex: 1 1 340px; min-width: 260px; }
.endcap-copy h2 { margin: 0 0 8px; font-size: clamp(21px, 2.6vw, 27px); }
.endcap-copy p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); max-width: 62ch; }
.endcap-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.site-footer { margin-top: 56px; background: var(--ink); color: #cfc6ba; padding: 48px 0 32px; }
.site-footer a { color: #e8e0d4; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.f-grid { display: grid; gap: 32px; grid-template-columns: 1.4fr repeat(3, 1fr); }
.f-brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 800; font-size: 17px; margin-bottom: 12px; }
.f-brand svg { width: 26px; height: 26px; }
.f-about { font-size: 14px; line-height: 1.6; color: #a89e91; max-width: 40ch; }
.f-col h3 { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.1em; color: #8d8377; margin: 0 0 12px; font-weight: 800; }
.f-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14.5px; }
.f-bottom {
  margin-top: 36px; padding-top: 22px; border-top: 1px solid #332d27;
  font-size: 13px; color: #8d8377; display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center;
}
.f-bottom p { margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .f-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  body { font-size: 16.5px; }
  .hero { padding: 26px 0 4px; }
  /* Mobile header: brand and CTA on row one, nav wraps to a scrollable row two */
  .hdr { flex-wrap: wrap; gap: 10px; min-height: 0; padding-block: 10px; }
  .brand-name::after { display: none; }
  .hdr-cta { margin-left: auto; padding: 9px 16px; font-size: 15px; }
  .nav {
    order: 3; flex-basis: 100%; margin: 0;
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: none; white-space: nowrap; padding: 8px 12px; font-size: 14.5px; }
  /* Mobile: a taller game window so the city map is not squashed */
  .game-stage { aspect-ratio: 1 / 1; padding: 7px; border-radius: var(--r); }
  .game-screen { border-radius: 10px; }
  .game-toolbar { gap: 8px; }
  .btn { flex: 1 1 auto; justify-content: center; font-size: 14px; padding: 11px 14px; }
  .section { padding: 30px 0; }
  .endcap { padding: 20px; gap: 18px; border-radius: var(--r); }
  .endcap-actions { width: 100%; }
  .endcap-actions .btn { flex: 1 1 auto; justify-content: center; }
  .answer { padding: 22px 20px; border-radius: 0 var(--r) var(--r) 0; }
  .answer-lede { font-size: 17px; }
  .fact { grid-template-columns: 1fr; gap: 2px; }
  .f-grid { grid-template-columns: 1fr; gap: 28px; }
  .faq .answer { padding-left: 20px; }
}
@media (max-width: 420px) {
  .game-toolbar .btn span.lbl-long { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}
@media print {
  .site-header, .game-shell, .site-footer, .notice { display: none; }
}