:root {
  --ink: #2c2419;
  --ink-soft: #645540;
  --paper: #d9bd89;
  --paper-light: #edd7ab;
  --paper-pale: #f3e4c0;
  --wood: #211b13;
  --wood-2: #302516;
  --gold: #b58a45;
  --gold-bright: #d0a65f;
  --red: #8a3928;
  --olive: #6e6a50;
  --line: rgba(65, 49, 30, .28);
  --shadow: 0 24px 60px rgba(34, 25, 14, .22);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  font-family: Inter, system-ui, sans-serif;
  background:
    radial-gradient(circle at 80% -10%, rgba(255,255,255,.32), transparent 36%),
    repeating-linear-gradient(0deg, rgba(76,56,30,.022) 0 1px, transparent 1px 4px),
    #c9ac77;
  min-height: 100vh;
}
button { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.page-noise {
  position: fixed; inset: 0; pointer-events:none; opacity:.13; z-index:50;
  background-image:
    radial-gradient(circle at 15% 20%, #000 0 .5px, transparent .7px),
    radial-gradient(circle at 85% 70%, #000 0 .6px, transparent .8px);
  background-size: 7px 7px, 11px 11px;
  mix-blend-mode:multiply;
}

.sidebar {
  width: 238px;
  position: fixed;
  inset: 0 auto 0 0;
  padding: 30px 20px 22px;
  color: #ead4a3;
  background:
    linear-gradient(rgba(255,255,255,.015), rgba(0,0,0,.12)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 6px),
    var(--wood);
  border-right: 1px solid rgba(210,169,93,.38);
  box-shadow: 14px 0 36px rgba(41,29,15,.12);
  display: flex; flex-direction: column; z-index: 20;
}
.sidebar::before { content:""; position:absolute; inset:10px; border:1px solid rgba(206,161,79,.25); pointer-events:none; }
.brand { color: inherit; text-decoration:none; display:flex; gap:14px; align-items:center; padding:15px 12px 30px; position:relative; z-index:1; }
.brand-mark { width:56px; height:56px; border:2px solid var(--gold-bright); border-radius:50%; display:grid; place-items:center; font-family:"Cormorant Garamond",serif; font-size:29px; color:#dcb86f; box-shadow: inset 0 0 0 6px rgba(181,138,69,.08); }
.brand-name { font-family:"Cormorant Garamond",serif; text-transform:uppercase; letter-spacing:.08em; font-size:17px; line-height:1.05; }
.brand-name b { font-weight:700; font-size:16px; }
.nav-list { display:grid; gap:8px; position:relative; z-index:1; }
.nav-item { border:0; background:transparent; color:#d8c49b; text-align:left; padding:13px 14px; border-radius:3px; cursor:pointer; display:flex; gap:13px; align-items:center; transition:.2s ease; }
.nav-item span { color:#d1a151; font-size:20px; width:22px; text-align:center; }
.nav-item b { font:inherit; font-weight:inherit; }
.nav-item:hover { background:rgba(196,153,82,.09); transform:translateX(2px); }
.nav-item.active { background:linear-gradient(90deg, rgba(197,153,82,.26), rgba(197,153,82,.08)); outline:1px solid rgba(209,166,92,.25); color:#f0dfbd; }
.sidebar blockquote { margin:auto 14px 20px; padding:26px 4px 0; border-top:1px solid rgba(216,174,102,.28); font-family:"Cormorant Garamond",serif; font-style:italic; font-size:18px; line-height:1.35; color:#d6bd8d; }
.sidebar-foot { font-size:10px; letter-spacing:.12em; text-transform:uppercase; opacity:.78; padding:0 14px; position:relative; z-index:1; }
.sidebar-settings {
  width:calc(100% - 28px);
  margin:0 14px;
  padding:12px 10px;
  border:1px solid rgba(208,166,95,.25);
  background:rgba(196,153,82,.08);
  color:#ead4a3;
  cursor:pointer;
  text-align:center;
}
.sidebar-settings:hover {
  background:rgba(196,153,82,.18);
  color:#f0dfbd;
}

.app-shell { margin-left:238px; min-height:100vh; position:relative; }
.app-shell::after {
  content:"";
  position:fixed;
  inset:0 0 0 238px;
  pointer-events:none;
  z-index:18;
  opacity:0;
  background:
    linear-gradient(90deg, transparent, rgba(247,227,188,.34), transparent),
    rgba(55,39,20,.08);
  transform:translateX(-16%);
}
.app-shell.route-changing::after { animation: archiveWipe .62s cubic-bezier(.2,.7,.2,1); }
@keyframes archiveWipe {
  0% { opacity:0; transform:translateX(-18%); }
  35% { opacity:1; }
  100% { opacity:0; transform:translateX(18%); }
}
body.intro-active .sidebar { display:none; }
body.intro-active .app-shell { margin-left:0; }
body.intro-active .app-shell::after { inset:0; }

/* ---------- Intro / pre-login screen ---------- */
.intro-screen {
  position:relative;
  min-height:100vh;
  overflow:hidden;
  color:#f4e4be;
  background:
    radial-gradient(circle at 50% 34%, rgba(237,215,171,.38), transparent 35%),
    radial-gradient(circle at 82% 84%, rgba(181,138,69,.28), transparent 30%),
    repeating-linear-gradient(0deg, rgba(76,56,30,.035) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #2a2116 0%, #d9bd89 43%, #c9ac77 100%);
}
.intro-screen::before {
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 5px),
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.05), transparent 22%);
  opacity:.7;
  pointer-events:none;
}
.intro-bg { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.intro-streak {
  position:absolute;
  width:78vw;
  height:4px;
  border-radius:99px;
  background:linear-gradient(90deg, transparent, rgba(208,166,95,.76), rgba(243,228,190,.28), transparent);
  box-shadow:0 0 20px rgba(181,138,69,.38);
  transform:rotate(14deg);
  animation:introStreak 7s linear infinite;
}
.intro-streak-a { left:-18vw; top:18%; }
.intro-streak-b { right:-22vw; top:56%; animation-delay:-2.3s; }
.intro-streak-c { left:-28vw; bottom:14%; animation-delay:-4.6s; }
@keyframes introStreak {
  from { translate:-20vw 0; opacity:.18; }
  35% { opacity:.7; }
  to { translate:34vw 0; opacity:.18; }
}
.intro-orbit {
  position:absolute;
  border:1px solid rgba(208,166,95,.12);
  border-radius:50%;
  transform:rotate(-18deg);
}
.intro-orbit-a { width:720px; height:230px; left:50%; top:39%; margin-left:-360px; }
.intro-orbit-b { width:980px; height:320px; left:50%; top:34%; margin-left:-490px; opacity:.55; }
.intro-nav {
  position:relative;
  z-index:2;
  height:82px;
  padding:0 48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(208,166,95,.16);
  background:rgba(33,27,19,.9);
}
.intro-brand {
  display:flex;
  align-items:center;
  gap:12px;
  color:#fff3d2;
  text-decoration:none;
  font-family:"Cormorant Garamond",serif;
  font-weight:700;
  font-size:24px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.intro-brand-mark {
  width:42px;
  height:42px;
  border:2px solid var(--gold-bright);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#dcb86f;
}
.intro-nav nav { display:flex; gap:28px; align-items:center; }
.intro-link {
  border:0;
  background:transparent;
  color:rgba(244,228,190,.58);
  cursor:pointer;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:11px;
  font-weight:700;
}
.intro-link:hover { color:#f4e4be; }
.intro-language {
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(244,228,190,.58);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:10px;
  font-weight:800;
}
.intro-language select {
  appearance:none;
  min-width:132px;
  border:1px solid rgba(208,166,95,.26);
  border-radius:3px;
  padding:10px 30px 10px 12px;
  background:
    linear-gradient(45deg, transparent 50%, #f4e4be 50%) calc(100% - 16px) 50% / 6px 6px no-repeat,
    linear-gradient(135deg, #f4e4be 50%, transparent 50%) calc(100% - 11px) 50% / 6px 6px no-repeat,
    rgba(22,17,12,.72);
  color:#f4e4be;
  font:700 11px/1 "Inter", sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
}
.intro-language select:focus-visible {
  outline:2px solid rgba(208,166,95,.58);
  outline-offset:2px;
}
.intro-hero {
  position:relative;
  z-index:1;
  min-height:calc(100vh - 82px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:72px 28px 56px;
  text-align:center;
}
.intro-welcome {
  margin:0 0 26px;
  color:#7a4a27;
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:12px;
  font-weight:700;
}
.intro-hero h1 {
  color:#2c2419;
  font-size:132px;
  line-height:.78;
  text-transform:uppercase;
  text-shadow:0 18px 48px rgba(55,39,20,.22), 0 0 34px rgba(237,215,171,.42);
}
.intro-copy {
  max-width:720px;
  margin:28px auto 0;
  color:#4f3f2b;
  font-family:"Cormorant Garamond",serif;
  font-size:22px;
  line-height:1.45;
}
.intro-player-form {
  width:min(420px, 100%);
  margin:30px auto 0;
  display:grid;
  gap:10px;
}
.intro-player-form label {
  color:rgba(44,36,25,.68);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:10px;
  font-weight:700;
}
.intro-player-form input {
  width:100%;
  min-height:54px;
  border:1px solid rgba(83,58,31,.36);
  border-radius:8px;
  padding:0 16px;
  background:rgba(255,248,232,.54);
  color:#2c2419;
  font:600 18px/1 "Inter", sans-serif;
  text-align:center;
  box-shadow:0 14px 34px rgba(55,39,20,.12);
}
.intro-player-form input:focus-visible {
  outline:2px solid rgba(138,57,40,.54);
  outline-offset:3px;
}
.intro-player-error {
  margin:0;
  color:#8a3928;
  font-size:12px;
  font-weight:700;
}
.intro-stats {
  display:grid;
  grid-template-columns:repeat(3, minmax(150px, 1fr));
  gap:0;
  width:min(680px, 100%);
  margin:42px auto 0;
}
.intro-stats div {
  padding:0 28px;
  border-right:1px solid rgba(244,228,190,.16);
}
.intro-stats div:last-child { border-right:0; }
.intro-stats span {
  display:block;
  margin-bottom:9px;
  color:rgba(44,36,25,.58);
  text-transform:uppercase;
  letter-spacing:.24em;
  font-size:10px;
  font-weight:700;
}
.intro-stats strong {
  display:block;
  color:#2c2419;
  font-size:26px;
}
.intro-stats div:last-child strong { color:#8a3928; }
.intro-actions {
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  width:min(520px, 100%);
  margin:58px auto 0;
}
.intro-mode,
.intro-leaderboard {
  min-height:96px;
  border:1px solid rgba(83,58,31,.34);
  border-radius:8px;
  background:linear-gradient(180deg, rgba(48,37,22,.88), rgba(33,27,19,.78));
  color:#fff7de;
  cursor:pointer;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-family:"Cormorant Garamond",serif;
  font-weight:700;
  box-shadow:0 22px 50px rgba(0,0,0,.26);
  transition:.24s ease;
}
.intro-mode { display:grid; place-items:center; align-content:center; gap:5px; }
.intro-mode span { font-size:31px; font-style:italic; }
.intro-mode small {
  font-family:Inter, system-ui, sans-serif;
  font-size:10px;
  letter-spacing:.14em;
  color:rgba(244,228,190,.68);
}
.intro-mode-primary {
  border-color:rgba(181,138,69,.72);
  background:linear-gradient(180deg, #b58a45, #74532a);
  box-shadow:0 18px 46px rgba(86,61,31,.34), inset 0 1px rgba(255,255,255,.18);
}
.intro-mode:hover,
.intro-leaderboard:hover {
  transform:translateY(-3px);
  border-color:rgba(208,166,95,.66);
}
.intro-leaderboard {
  grid-column:1 / -1;
  min-height:64px;
  font-family:Inter, system-ui, sans-serif;
  font-size:12px;
  letter-spacing:.24em;
}
.intro-how {
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
  width:min(860px, 100%);
  margin:48px auto 0;
}
.intro-how article {
  border:1px solid rgba(83,58,31,.24);
  background:rgba(247,227,188,.28);
  padding:18px;
  text-align:left;
}
.intro-how span {
  color:#d0a65f;
  font-size:10px;
  letter-spacing:.18em;
}
.intro-how b {
  display:block;
  margin-top:8px;
  color:#2c2419;
  font-family:"Cormorant Garamond",serif;
  font-size:21px;
}
.intro-how p {
  margin:5px 0 0;
  color:#5f4b32;
  font-size:12px;
  line-height:1.45;
}
.intro-board {
  position:absolute;
  inset:0;
  z-index:4;
  display:grid;
  place-items:center;
  padding:28px;
  background:rgba(4,3,2,.68);
  backdrop-filter:blur(7px);
}
.intro-board[hidden] { display:none; }
.intro-board-card {
  width:min(520px, 100%);
  border:1px solid rgba(208,166,95,.38);
  background:linear-gradient(180deg,#241813,#100907);
  box-shadow:0 38px 90px rgba(0,0,0,.48);
  padding:24px;
}
.intro-board-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#d0a65f;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:10px;
}
.intro-board-card ol {
  list-style:none;
  padding:0;
  margin:20px 0 0;
  display:grid;
  gap:9px;
}
.intro-board-card li {
  display:grid;
  grid-template-columns:46px 1fr 64px;
  align-items:center;
  gap:12px;
  padding:13px 0;
  border-bottom:1px solid rgba(208,166,95,.16);
}
.intro-board-card li span,
.intro-board-card li em {
  color:rgba(244,228,190,.58);
  font-size:11px;
  letter-spacing:.16em;
  font-style:normal;
}
.intro-board-card li b {
  color:#fff3d2;
  font-family:"Cormorant Garamond",serif;
  font-size:28px;
}

/* ---------- Screen router ---------- */
.screen { display:none; min-height:100vh; opacity:0; }
.screen.active { display:block; animation: screenFade .5s cubic-bezier(.2,.7,.2,1); }
@keyframes screenFade { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.screen.active { opacity:1; }

.topbar { height:70px; padding:0 42px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(83,58,31,.17); }
.topbar-plain { background:rgba(245,224,181,.35); }
.eyebrow { text-transform:uppercase; letter-spacing:.17em; font-size:10px; color:#715d40; }
.top-actions { display:flex; align-items:center; gap:12px; }
.text-button,.icon-button { border:0; background:transparent; color:#4d3d29; cursor:pointer; }
.text-button { font-family:"Cormorant Garamond",serif; font-size:18px; border-bottom:1px solid transparent; }
.text-button:hover { border-color:#4d3d29; }
.icon-button { width:36px;height:36px;border:1px solid var(--line);border-radius:50%;font-size:18px; }

.hero { min-height:190px; padding:40px 44px 34px; display:flex; justify-content:space-between; align-items:flex-end; background:rgba(245,224,181,.35); border-bottom:1px solid var(--line); }
.kicker { margin:0 0 8px; font-size:10px; letter-spacing:.19em; color:#846b42; font-weight:600; }
h1,h2,h3 { font-family:"Cormorant Garamond",Georgia,serif; margin:0; }
h1 { font-size:clamp(52px,5vw,82px); line-height:.88; letter-spacing:-.025em; font-weight:600; }
.hero-copy { max-width:720px; margin:18px 0 0; color:#69593f; line-height:1.65; font-family:"Cormorant Garamond",serif; font-size:20px; }
.compass { font-size:56px; color:#816538; opacity:.64; padding-right:25px; }

.content-grid { display:grid; grid-template-columns:minmax(0,1fr) 430px; align-items:start; }
.atlas-column { min-width:0; }
.map-card { padding:28px 34px 0; }
.section-label { font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#796446; display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.section-label span { border:1px solid rgba(93,72,44,.32); width:28px; height:22px; display:grid; place-items:center; font-size:9px; }
.map-stage { position:relative; min-height:390px; overflow:hidden; background:#6f6b52; box-shadow:inset 0 0 0 1px rgba(66,47,27,.24), var(--shadow); }
.map-stage::after { content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 55px rgba(38,30,19,.32); }
.map-stage img { width:100%;height:100%;min-height:390px;object-fit:cover;display:block;filter:saturate(.78) contrast(.95) brightness(.94); transition:transform 1.2s cubic-bezier(.2,.7,.2,1); }
.map-stage:hover img { transform:scale(1.012); }
.map-stage-link { display:block; width:100%; padding:0; border:0; text-align:left; cursor:pointer; }
.map-hint { position:absolute; left:18px; top:16px; z-index:3; background:rgba(36,28,18,.78); color:#ead8b1; padding:8px 10px; font-size:10px; letter-spacing:.12em; text-transform:uppercase; backdrop-filter:blur(5px); }
.hotspot { position:absolute; width:70px; height:70px; z-index:5; border:0; background:transparent; border-radius:50%; cursor:pointer; transform:translate(-50%,-50%); pointer-events:none; }
.hotspot span { position:absolute; width:13px;height:13px;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);background:transparent; transition:.2s ease; }
.hotspot:hover span,.hotspot.active span { box-shadow:0 0 0 7px rgba(235,190,102,.16),0 0 24px 10px rgba(235,190,102,.2); }
.hotspot-ghana { left:45%;top:65%; }
.hotspot-japan { left:84%;top:40%; }
.hotspot-vietnam { left:77.8%;top:63%; }

.game-section { padding:38px 34px 44px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:17px; }
.section-heading h2 { font-size:34px; font-weight:600; }
.section-heading p { font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:#7c684a; }
.game-cards { display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px; }
.game-card { position:relative; border:1px solid rgba(77,57,34,.3); padding:0; min-height:235px; overflow:hidden; background:#715b3d; cursor:pointer; text-align:left; box-shadow:0 12px 25px rgba(53,38,21,.12); transition:.25s ease; }
.game-card img { width:100%;height:100%;object-fit:cover;position:absolute;inset:0;filter:saturate(.72) contrast(.92); transition:.4s ease; }
.card-overlay { position:absolute;inset:0;background:linear-gradient(180deg,rgba(25,19,12,.04) 24%,rgba(23,17,10,.9) 100%); }
.card-meta { position:absolute;left:18px;right:18px;bottom:17px;color:#f3e4c3;display:grid;gap:1px; }
.card-meta small { font-size:9px;letter-spacing:.14em;color:#d1b77e; }
.card-meta strong { font-family:"Cormorant Garamond",serif;font-size:27px;font-weight:600; }
.card-meta em { font-style:normal;font-size:10px;opacity:.75; }
.card-index { position:absolute;right:12px;top:10px;color:#f2dcaa;font-size:10px;letter-spacing:.1em; }
.game-card:hover { transform:translateY(-4px);box-shadow:0 18px 32px rgba(53,38,21,.18); }
.game-card:hover img { transform:scale(1.035); }
.game-card.active { outline:2px solid rgba(144,104,45,.64); outline-offset:2px; }
.game-card.completed::after {
  content:"PASSPORT STAMPED";
  position:absolute;
  left:14px;
  top:12px;
  z-index:4;
  padding:5px 7px;
  border:1px solid rgba(208,166,95,.55);
  background:rgba(33,27,19,.72);
  color:#f0dfbd;
  font-size:8px;
  letter-spacing:.12em;
  transform:rotate(-2deg);
}
.game-card-mongolia { background:#3a2f1e; }

.exhibit { position:sticky; top:0; min-height:calc(100vh - 0px); padding:30px 30px 34px; background:linear-gradient(rgba(247,227,188,.95),rgba(225,196,143,.95)); border-left:1px solid rgba(84,57,28,.26); box-shadow:-14px 0 40px rgba(59,42,21,.09); }
.exhibit::before { content:"";position:absolute;inset:12px;border:1px solid rgba(90,64,34,.25);pointer-events:none; }
.exhibit-topline { display:flex;justify-content:space-between;font-size:9px;letter-spacing:.15em;color:#806644;margin:2px 0 24px; }
.country-title-row { display:grid;grid-template-columns:64px 1fr 48px;gap:15px;align-items:center; }
.flag-seal { width:60px;height:60px;background:var(--red);border:1px solid #6e281c;border-radius:50%;display:grid;place-items:center;color:#e8be58;font-size:29px;box-shadow:inset 0 0 0 4px rgba(255,226,166,.08),0 5px 11px rgba(72,43,19,.18); }
.country-title-row small,.game-heading small { text-transform:uppercase;letter-spacing:.12em;font-size:9px;color:#765e3c; }
.country-title-row h2 { font-size:44px;line-height:.94;font-weight:600; }
.catalogue-stamp { justify-self:end;border:1px solid rgba(137,47,33,.55);color:#983f2c;width:42px;height:42px;display:grid;place-items:center;font-family:"Cormorant Garamond",serif;font-size:18px;transform:rotate(-3deg);opacity:.78; }
.rule { height:1px;background:var(--line);margin:20px 0; }
.game-heading h3 { font-size:36px;font-weight:600;margin-top:2px; }
.game-heading p { margin:2px 0 0;font-family:"Cormorant Garamond",serif;font-size:17px;color:#6a583d;line-height:1.3; }
.preview-block,.how-block,.about-game { margin-top:20px; }
.block-title { display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;text-transform:uppercase;letter-spacing:.13em;font-size:9px;color:#715c3f;font-weight:600; }
.video-preview { width:100%;height:168px;border:1px solid rgba(59,41,22,.45);padding:0;background:#1b160f;position:relative;overflow:hidden;cursor:pointer; }
.video-preview img { width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.7) contrast(.9);transition:.35s ease; }
.video-shade { position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.55)); }
.video-preview:hover img { transform:scale(1.025);filter:saturate(.85) contrast(.95); }
.play-button { position:absolute;left:50%;top:49%;transform:translate(-50%,-50%);width:56px;height:56px;border:1px solid #ebd5a3;border-radius:50%;display:grid;place-items:center;color:#f1d99f;background:rgba(24,19,13,.6);font-size:18px;padding-left:3px; }
.video-caption { position:absolute;left:12px;bottom:9px;color:#e7d7b5;font-size:10px;letter-spacing:.03em; }
/* Static placeholder standing in for the unbuilt video feature */
.video-preview.is-static { height:auto;cursor:default;background:transparent; }
.video-preview.is-static img { height:auto;aspect-ratio:16/9;object-fit:cover;filter:none; }
.video-preview.is-static:hover img { transform:none;filter:none; }
.how-visual { position:relative;height:104px;overflow:hidden;border:1px solid rgba(76,57,34,.27);background:#ceb182; }
.how-visual img { width:100%;height:100%;object-fit:cover;filter:saturate(.68) contrast(.92); }
.step-focus { position:absolute;left:0;top:0;width:33.333%;height:100%;border:2px solid rgba(109,70,27,.73);background:rgba(243,214,160,.06);transition:left .3s ease;box-shadow:inset 0 0 20px rgba(255,225,165,.14); }
.step-controls { display:grid;grid-template-columns:32px 1fr 32px;gap:8px;align-items:center;margin-top:7px; }
.step-controls button { width:32px;height:30px;border:1px solid rgba(75,52,29,.3);background:rgba(255,244,221,.18);cursor:pointer;color:#5d482d; }
.step-controls p { margin:0;text-align:center;font-family:"Cormorant Garamond",serif;font-size:14px;line-height:1.15;color:#604c32; }
.about-game p { margin:0;color:#5f4e37;font-family:"Cormorant Garamond",serif;font-size:16px;line-height:1.36; }
.primary-cta { width:100%;margin-top:22px;padding:14px 16px;border:1px solid #7e5a2e;background:#8d6837;color:#f2dfb9;display:flex;align-items:center;justify-content:space-between;cursor:pointer;text-transform:uppercase;letter-spacing:.09em;font-family:"Cormorant Garamond",serif;font-weight:700;font-size:16px;transition:.2s ease; }
.primary-cta:hover { background:#785528;transform:translateY(-1px); }
.primary-cta b { font-size:20px;font-weight:400; }

.story-strip { border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:80px 1.1fr .9fr;align-items:center;gap:30px;padding:48px 42px;background:rgba(242,221,179,.35); }
.story-number { font-family:"Cormorant Garamond",serif;font-size:56px;color:#856c45;border-right:1px solid var(--line); }
.story-strip h2 { font-size:40px;line-height:1.05;max-width:650px; }
.story-strip>p { margin:0;color:#6a593f;line-height:1.7;font-family:"Cormorant Garamond",serif;font-size:18px; }
.timeline-section { padding:52px 42px 70px; }
.timeline-line { display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:26px;border-top:1px solid rgba(75,56,34,.38); }
.timeline-line article { padding:24px 34px 0 0;position:relative; }
.timeline-line article::before { content:"";width:9px;height:9px;background:#8a6939;border:4px solid #d3b77f;border-radius:50%;position:absolute;top:-9px;left:0; }
.timeline-line span { display:block;font-size:9px;letter-spacing:.16em;color:#826943;margin-bottom:6px; }
.timeline-line b { display:block;font-family:"Cormorant Garamond",serif;font-size:28px; }
.timeline-line p { color:#66553d;line-height:1.55;font-family:"Cormorant Garamond",serif;font-size:17px;max-width:300px; }
footer { display:flex;justify-content:space-between;padding:22px 42px;background:#2a2116;color:#d1b782;font-size:10px;letter-spacing:.1em;text-transform:uppercase; }

dialog { width:min(650px,calc(100vw - 40px));border:1px solid rgba(77,55,31,.5);padding:42px;background:#e7c994;color:#352819;box-shadow:0 40px 90px rgba(25,18,10,.42); }
dialog::backdrop { background:rgba(28,22,15,.72);backdrop-filter:blur(6px); }
dialog h2 { font-size:42px;line-height:1.02; }
dialog p:not(.kicker) { font-family:"Cormorant Garamond",serif;font-size:19px;line-height:1.55;color:#5f4b32; }
.dialog-close { position:absolute;right:14px;top:12px;border:0;background:transparent;font-family:"Cormorant Garamond",serif;font-size:32px;color:#58432c;cursor:pointer; }
.dialog-tags { display:flex;flex-wrap:wrap;gap:8px;margin-top:22px; }
.dialog-tags span { border:1px solid rgba(83,61,35,.36);padding:7px 9px;font-size:9px;letter-spacing:.13em; }

/* ================= WORLD MAP SCREEN ================= */
.worldmap-stage { position:relative; height:calc(100vh - 70px); overflow:hidden; background:
  radial-gradient(circle at 30% 20%, rgba(255,255,255,.2), transparent 42%),
  radial-gradient(circle at 72% 58%, rgba(106,70,36,.3), transparent 38%),
  linear-gradient(180deg, #d1ad75, #9f8154); }
.leaflet-map { position:absolute; inset:0; z-index:1; background:#b8915e; }
.leaflet-map::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:400;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 16% 24%, rgba(80,104,55,.32), transparent 26%),
    radial-gradient(ellipse at 34% 72%, rgba(63,103,52,.34), transparent 20%),
    radial-gradient(ellipse at 53% 53%, rgba(142,94,37,.34), transparent 26%),
    radial-gradient(ellipse at 72% 37%, rgba(129,74,44,.36), transparent 30%),
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.15), transparent 44%),
    linear-gradient(180deg, rgba(247,227,188,.06), rgba(68,46,25,.2));
  mix-blend-mode:multiply;
}
.leaflet-map::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:399;
  pointer-events:none;
  background:
    linear-gradient(112deg, transparent 0 48%, rgba(80,45,22,.2) 49%, rgba(255,244,208,.18) 50%, transparent 51%),
    radial-gradient(circle at 78% 18%, rgba(255,236,180,.18), transparent 8%),
    repeating-linear-gradient(0deg, rgba(69,49,28,.05) 0 1px, transparent 1px 62px),
    repeating-linear-gradient(90deg, rgba(69,49,28,.045) 0 1px, transparent 1px 72px);
  box-shadow:inset 0 0 80px rgba(61,38,20,.28);
}
.leaflet-map .leaflet-tile-pane { filter:sepia(.74) saturate(.7) contrast(.92) brightness(.86); }
.leaflet-map .leaflet-overlay-pane svg { filter:drop-shadow(0 10px 12px rgba(69,48,25,.18)); }
.leaflet-map .continent-wash { mix-blend-mode:multiply; }
.continent-label-marker {
  display:grid;
  place-items:center;
  color:rgba(66,47,27,.46);
  font-family:"Cormorant Garamond",serif;
  font-size:28px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-shadow:0 1px 0 rgba(255,244,209,.42), 0 9px 18px rgba(70,47,24,.16);
  pointer-events:none;
}
.continent-label-marker span {
  display:block;
  transform:rotate(-5deg);
  white-space:nowrap;
}
.leaflet-map .leaflet-control-container { font-family:"Inter",sans-serif; }
.leaflet-map .leaflet-control-zoom { border:1px solid rgba(84,58,31,.28); box-shadow:0 12px 24px rgba(35,25,14,.18); }
.leaflet-map .leaflet-control-zoom a { background:rgba(43,31,20,.88); border-color:rgba(235,190,102,.18); color:#f0dfbd; }
.leaflet-map .leaflet-control-zoom a:hover { background:#3a2818; color:#f7e3bc; }
.leaflet-map .leaflet-control-attribution { background:rgba(247,227,188,.72); color:#6a5636; font-size:10px; }
.leaflet-map .leaflet-control-attribution a { color:#6b4520; }
.map-pin { border:0; background:transparent; padding:0; cursor:pointer; transition:opacity .5s ease; animation: markerFloat 3.8s ease-in-out infinite; }
.leaflet-country-marker { display:block; overflow:visible; }
.map-pin-content {
  --marker-color:#c59952;
  --label-x:27px;
  --label-y:-6px;
  position:relative;
  display:block;
  width:18px;
  height:18px;
}
.worldmap-stage > .map-pin { position:absolute; z-index:6; transform:translate(-50%,-100%); }
.map-pin:nth-of-type(2n), .leaflet-country-marker:nth-of-type(2n) { animation-delay:.45s; }
.map-pin:nth-of-type(3n), .leaflet-country-marker:nth-of-type(3n) { animation-delay:.9s; }
@keyframes markerFloat {
  0%,100% { translate:0 0; }
  50% { translate:0 -5px; }
}
.map-pin-dot { display:block; position:relative; width:14px; height:14px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:radial-gradient(circle at 35% 35%, #f4dfa4, var(--marker-color) 62%, #4f3921); box-shadow:0 0 0 5px rgba(235,190,102,.16), 0 0 18px 6px color-mix(in srgb, var(--marker-color) 42%, transparent), 0 3px 8px rgba(30,21,10,.4); margin:0 auto; }
.map-pin-content::after { content:""; position:absolute; left:50%; bottom:-10px; width:2px; height:14px; background:rgba(66,47,27,.4); transform:translateX(-50%); }
.map-pin-label {
  position:absolute;
  left:var(--label-x);
  top:var(--label-y);
  min-width:max-content;
  padding:6px 9px;
  border:1px solid color-mix(in srgb, var(--marker-color) 65%, rgba(43,31,20,.5));
  background:linear-gradient(90deg, color-mix(in srgb, var(--marker-color) 68%, #23170e), rgba(43,31,20,.88));
  box-shadow:0 10px 20px rgba(35,25,14,.2);
  color:#f0dfbd;
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  line-height:1;
  text-transform:uppercase;
  pointer-events:auto;
  cursor:pointer;
}
.map-pin:hover .map-pin-dot, .map-pin:focus-visible .map-pin-dot { transform:rotate(-45deg) scale(1.18); }
.map-pin.active .map-pin-dot {
  box-shadow:0 0 0 7px rgba(235,190,102,.24), 0 0 26px 10px color-mix(in srgb, var(--marker-color) 58%, transparent), 0 3px 8px rgba(30,21,10,.4);
}
.map-pin.active .map-pin-label {
  background:linear-gradient(90deg, var(--marker-color), #6b4520);
  color:#fff4d4;
}
.map-pin.previewing .map-pin-dot {
  transform:rotate(-45deg) scale(1.28);
  box-shadow:0 0 0 8px rgba(235,190,102,.22), 0 0 34px 12px color-mix(in srgb, var(--marker-color) 62%, transparent), 0 3px 8px rgba(30,21,10,.4);
}
.map-pin.previewing .map-pin-label {
  background:linear-gradient(90deg, var(--marker-color), #2b1f14);
  color:#fff6d8;
}
.map-pin.completed .map-pin-dot {
  width:22px;
  height:22px;
  border-radius:50%;
  transform:rotate(0);
  background:#8a3928;
  box-shadow:0 0 0 7px rgba(235,190,102,.14), 0 0 22px rgba(235,190,102,.35);
}
.map-pin.completed .map-pin-dot::after {
  content:"✓";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#f3dfad;
  font-size:13px;
  font-weight:700;
}
.map-pin-tip { position:absolute; left:50%; bottom:calc(100% + 14px); transform:translate(-50%,6px); min-width:190px; background:linear-gradient(180deg,#f7e3bc,#e9cd97); border:1px solid rgba(84,58,31,.4); box-shadow:0 16px 30px rgba(35,25,14,.28); padding:12px 14px; display:grid; gap:3px; opacity:0; pointer-events:none; transition:.22s ease; }
.map-pin-tip::after { content:""; position:absolute; left:50%; top:100%; width:9px; height:9px; background:#e9cd97; border-right:1px solid rgba(84,58,31,.4); border-bottom:1px solid rgba(84,58,31,.4); transform:translate(-50%,-50%) rotate(45deg); }
.map-pin:hover .map-pin-tip, .map-pin:focus-visible .map-pin-tip { opacity:1; transform:translate(-50%,0); }
.map-pin-tip b { font-family:"Cormorant Garamond",serif; font-size:19px; color:var(--ink); }
.map-pin-tip em { font-style:normal; font-size:11px; color:#6a5636; }
.leaflet-tooltip.leaflet-archive-tip {
  background:linear-gradient(180deg,#f7e3bc,#e9cd97);
  border:1px solid rgba(84,58,31,.4);
  box-shadow:0 16px 30px rgba(35,25,14,.28);
  color:#6a5636;
  padding:0;
}
.leaflet-tooltip-top.leaflet-archive-tip::before { border-top-color:#e9cd97; }
.leaflet-tip-card { min-width:190px; padding:12px 14px; display:grid; gap:3px; }
.leaflet-tip-card b { font-family:"Cormorant Garamond",serif; font-size:19px; color:var(--ink); }
.leaflet-tip-card em { font-style:normal; font-size:11px; color:#6a5636; }
.leaflet-tip-card small { font-size:9px; letter-spacing:.12em; color:#8a3928; text-transform:uppercase; }
.pin-thumb { justify-self:start; margin-top:2px; width:26px; height:26px; border:1px solid rgba(84,58,31,.35); border-radius:50%; display:grid; place-items:center; font-family:"Cormorant Garamond",serif; font-style:normal; font-size:13px; color:#5c4a2f; background:rgba(255,255,255,.3); }
.pin-action { justify-self:start; margin-top:7px; color:#7b5725; font-size:9px; letter-spacing:.15em; text-transform:uppercase; }
.worldmap-caption { position:absolute; left:34px; bottom:28px; z-index:402; background:rgba(247,227,188,.74); border:1px solid rgba(84,58,31,.22); padding:14px 16px; box-shadow:0 14px 30px rgba(35,25,14,.16); }
.worldmap-caption .kicker { margin-bottom:4px; }
.worldmap-caption p:last-child { margin:0; font-family:"Cormorant Garamond",serif; font-size:15px; color:#5c4a2f; }
.atlas-status {
  margin-top:9px !important;
  font-size:10px !important;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#7b5725 !important;
}
.journey-counter {
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid rgba(84,58,31,.18);
  display:grid;
  gap:3px;
}
.journey-counter span {
  font-size:9px;
  font-weight:800;
  letter-spacing:.16em;
  color:#806d4b;
}
.journey-counter b {
  color:#3b2a17;
  font-size:11px;
  letter-spacing:.12em;
}
.finish-journey-btn {
  margin-top:10px;
  padding:0;
  color:#7b5725;
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.atlas-preview {
  position:absolute;
  top:0;
  right:0;
  z-index:404;
  width:min(430px, 34vw);
  height:100%;
  padding:34px 30px;
  background:
    linear-gradient(180deg, rgba(247,227,188,.97), rgba(219,187,128,.96)),
    var(--paper);
  border-left:1px solid rgba(84,58,31,.32);
  box-shadow:-24px 0 46px rgba(35,25,14,.24);
  overflow:auto;
  animation: atlasPanelIn .34s cubic-bezier(.2,.7,.2,1);
}
.atlas-preview[hidden] { display:none; }
@keyframes atlasPanelIn {
  from { opacity:0; transform:translateX(24px); }
  to { opacity:1; transform:translateX(0); }
}
.atlas-preview::before {
  content:"";
  position:absolute;
  inset:12px;
  border:1px solid rgba(84,58,31,.18);
  pointer-events:none;
}
.atlas-preview-close { right:18px; top:12px; }
.atlas-preview-head {
  display:grid;
  grid-template-columns:62px 1fr;
  gap:16px;
  align-items:center;
  margin:26px 0 22px;
}
.atlas-preview-seal {
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:2px solid rgba(117,71,32,.28);
  background:radial-gradient(circle at 35% 28%, #f4dfa4, #9f3e2d 70%);
  color:#f4dfa4;
  font-family:"Cormorant Garamond",serif;
  font-size:22px;
  font-weight:700;
  box-shadow:0 12px 24px rgba(85,43,24,.2);
}
.atlas-preview h2 {
  margin:0;
  color:var(--ink);
  font-size:clamp(34px, 3.4vw, 48px);
  line-height:.96;
}
.atlas-preview-head p {
  margin:8px 0 0;
  color:#6a5636;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.atlas-preview-copy {
  margin:0;
  color:#5f4b32;
  font-family:"Cormorant Garamond",serif;
  font-size:20px;
  line-height:1.48;
}
.atlas-preview-story {
  display:grid;
  gap:14px;
  margin:0 0 22px;
}
.atlas-preview-story section {
  position:relative;
  z-index:1;
  padding:13px 14px 14px;
  background:rgba(255,247,226,.38);
  border:1px solid rgba(84,58,31,.16);
  box-shadow:0 10px 22px rgba(54,36,18,.08);
}
.atlas-preview-story section:nth-child(2) {
  background:rgba(187,139,62,.14);
}
.atlas-preview-story p:not(.kicker) {
  margin:0;
  color:#5f4b32;
  font-family:"Cormorant Garamond",serif;
  font-size:18px;
  line-height:1.42;
}
.atlas-preview-story .kicker {
  margin:0 0 7px;
  color:#7b5725;
  font-size:9px;
}
.atlas-preview-meta {
  display:grid;
  gap:10px;
  margin:0 0 28px;
  padding-top:18px;
  border-top:1px solid rgba(84,58,31,.24);
}
.atlas-preview-meta div { display:grid; gap:4px; }
.atlas-preview-meta dt {
  color:#806d4b;
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.atlas-preview-meta dd {
  margin:0;
  color:#2c2116;
  font-family:"Cormorant Garamond",serif;
  font-size:21px;
  font-weight:700;
}
.atlas-preview-actions {
  display:grid;
  gap:12px;
  position:relative;
  z-index:1;
}
.atlas-preview-actions-top {
  margin:-6px 0 18px;
}
.atlas-preview-actions .primary-cta,
.atlas-preview-actions .secondary-cta {
  width:100%;
  justify-content:center;
}
.worldmap-stage.preview-open .worldmap-caption { transform:translateY(12px); opacity:.42; }
.worldmap-stage.preview-open .continent-label-marker { opacity:.18; transition:opacity .25s ease; }
.worldmap-stage.travelling .map-pin:not(.travel-target) { opacity:0; pointer-events:none; }
.worldmap-stage.travelling .map-pin.travel-target .map-pin-dot { transform:rotate(-45deg) scale(1.45); }
.worldmap-stage.travelling .worldmap-caption { opacity:0; transition:opacity .3s ease; }

@media (max-width: 980px) {
  .atlas-preview {
    top:auto;
    bottom:0;
    width:100%;
    height:min(58vh, 520px);
    border-left:0;
    border-top:1px solid rgba(84,58,31,.32);
    box-shadow:0 -24px 46px rgba(35,25,14,.24);
  }
  .worldmap-caption { left:18px; right:18px; bottom:18px; }
  .worldmap-stage.preview-open .worldmap-caption { opacity:0; pointer-events:none; }
}

/* ================= PASSPORT / WELCOME / NAME SCREENS ================= */
.passport-frame { max-width:920px; margin:0 auto; padding:60px 40px 70px; position:relative; }
.passport-frame-narrow { max-width:600px; }
.passport-motif { text-align:center; letter-spacing:.4em; color:var(--gold); font-size:12px; margin-bottom:18px; }
.passport-frame h1 { font-size:clamp(38px,4.4vw,58px); text-align:center; line-height:1.02; margin-top:6px; }
.passport-frame > .kicker { text-align:center; }
.back-link { display:block; margin:34px auto 0; text-align:center; }

.welcome-grid { display:grid; grid-template-columns:220px 1fr; gap:36px; align-items:center; margin-top:40px; border:1px solid var(--line); padding:30px; background:rgba(247,227,188,.5); position:relative; }
.welcome-grid::before { content:""; position:absolute; inset:8px; border:1px solid rgba(90,64,34,.2); pointer-events:none; }
.welcome-illustration { width:100%; aspect-ratio:1; border:1px solid rgba(90,64,34,.35); border-radius:50%; display:grid; place-items:center; font-size:64px; color:var(--gold); background:radial-gradient(circle, rgba(208,166,95,.18), transparent 70%); }
.welcome-copy small { text-transform:uppercase; letter-spacing:.12em; font-size:9px; color:#765e3c; }
.welcome-copy h2 { font-size:38px; margin-top:2px; }
.welcome-copy p { font-family:"Cormorant Garamond",serif; font-size:18px; line-height:1.55; color:#5f4b32; margin:10px 0 0; }
.welcome-prompt { margin-top:20px; padding:14px 16px; border-left:3px solid var(--gold); background:rgba(208,166,95,.12); font-family:"Cormorant Garamond",serif; font-style:italic; font-size:16px; color:#5c4a2f; }
.welcome-copy .primary-cta { margin-top:22px; }

.name-form { margin-top:36px; display:grid; gap:10px; max-width:420px; margin-inline:auto; }
.name-form label { text-transform:uppercase; letter-spacing:.12em; font-size:10px; color:#715c3f; }
.name-form input { border:1px solid rgba(75,52,29,.4); background:rgba(255,248,232,.6); padding:14px 16px; font-family:"Cormorant Garamond",serif; font-size:20px; color:var(--ink); }
.name-form input:focus { outline:2px solid rgba(181,138,69,.5); outline-offset:2px; }

.passport-card { margin:44px auto 0; max-width:460px; border:1px solid rgba(84,58,31,.45); background:linear-gradient(180deg,#f7e6c2,#ecd4a3); padding:30px 30px 34px; position:relative; box-shadow:0 26px 55px rgba(40,28,14,.24); animation: cardReveal .6s cubic-bezier(.2,.7,.2,1); }
@keyframes cardReveal { from { opacity:0; transform:translateY(16px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
.passport-card-top { display:flex; justify-content:space-between; font-size:9px; letter-spacing:.15em; color:#806646; }
.passport-lede { margin:22px 0 6px; font-family:"Cormorant Garamond",serif; font-size:15px; color:#6a583d; text-align:center; }
.passport-script { text-align:center; font-family:"Cormorant Garamond",serif; font-weight:700; font-size:clamp(30px,6vw,46px); color:#4a3419; margin:6px 0 18px; letter-spacing:.02em; word-break:break-word; }
.passport-rows { border-top:1px solid var(--line); margin:0; }
.passport-rows div { display:grid; grid-template-columns:80px 1fr; padding:9px 0; border-bottom:1px solid var(--line); }
.passport-rows dt { font-size:9px; text-transform:uppercase; letter-spacing:.1em; color:#806646; }
.passport-rows dd { margin:0; font-family:"Cormorant Garamond",serif; font-size:16px; }
.passport-seal { position:absolute; right:22px; bottom:80px; width:64px; height:64px; border:2px solid rgba(138,47,33,.6); border-radius:50%; display:grid; place-items:center; transform:rotate(-9deg); color:#8a2f21; opacity:.75; }
.passport-seal span { font-family:"Cormorant Garamond",serif; font-weight:700; font-size:15px; }
.passport-card .primary-cta { margin-top:26px; }

/* ================= GAME INTRO SCREEN ================= */
.intro-frame { max-width:980px; margin:0 auto; padding:40px 40px 80px; text-align:center; }
.intro-frame h1 { font-size:clamp(40px,5vw,64px); }
.intro-summary { font-family:"Cormorant Garamond",serif; font-size:18px; color:#5f4b32; max-width:620px; margin:14px auto 0; line-height:1.55; }
.intro-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:38px; text-align:left; }
.intro-cards-meta { grid-template-columns:repeat(3,1fr); margin-top:16px; }
.intro-card { border:1px solid var(--line); background:rgba(247,227,188,.55); padding:20px 18px; position:relative; }
.intro-card::before { content:""; position:absolute; inset:6px; border:1px solid rgba(90,64,34,.15); pointer-events:none; }
.intro-card .intro-icon { font-family:"Cormorant Garamond",serif; font-size:30px; color:var(--gold); }
.intro-card b { display:block; font-family:"Cormorant Garamond",serif; font-size:21px; margin:8px 0 4px; }
.intro-card p { margin:0; font-size:13px; line-height:1.5; color:#6a583d; }
.intro-enter { max-width:340px; margin:44px auto 0; }

/* ================= MAIN GAME SCREEN ================= */
.game-columns { display:grid; grid-template-columns:1fr 1.3fr 1fr; gap:0; min-height:calc(100vh - 70px); }
.museum-case, .game-arena, .lore-panel { padding:28px 26px 30px; }
.museum-case { border-right:1px solid var(--line); background:rgba(230,206,158,.3); display:flex; flex-direction:column; }
.lore-panel { border-left:1px solid var(--line); background:linear-gradient(rgba(247,227,188,.75),rgba(225,196,143,.75)); display:flex; flex-direction:column; }
.game-arena { display:flex; flex-direction:column; align-items:center; }

.case-stage { flex:1; min-height:280px; border:1px solid rgba(66,47,27,.3); background:radial-gradient(circle at 50% 40%,#726046,#33291d 70%,#221b13); position:relative; display:grid; place-items:center; overflow:hidden; margin-top:8px; box-shadow:inset 0 0 40px rgba(0,0,0,.4); }
.case-orbit { position:absolute; border:1px solid rgba(222,191,129,.18); border-radius:50%; pointer-events:none; }
.case-orbit-a { width:78%; aspect-ratio:1; }
.case-orbit-b { width:96%; aspect-ratio:2.4; transform:rotate(-25deg); }
.bone3d { width:130px; height:80px; cursor:grab; user-select:none; transform-style:preserve-3d; transition:transform .15s ease-out; position:relative; }
.bone-face { position:absolute; inset:0; background:linear-gradient(160deg,#f1e2bd,#c9ac74 55%,#8f7345); clip-path:polygon(18% 8%,38% 0%,48% 20%,62% 4%,82% 12%,96% 34%,86% 58%,96% 78%,74% 96%,54% 82%,42% 98%,18% 88%,4% 62%,14% 40%,2% 22%); box-shadow:0 18px 34px rgba(0,0,0,.45), inset 0 0 18px rgba(255,255,255,.25); }
.case-controls { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:14px; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#6a583d; }
.case-controls button { width:30px; height:30px; border:1px solid rgba(75,52,29,.35); background:rgba(255,244,221,.3); cursor:pointer; font-size:15px; color:#5d482d; }
.case-reset { width:auto !important; padding:0 12px; font-size:9px !important; letter-spacing:.08em; }
.case-label dl { margin:20px 0 0; border-top:1px solid var(--line); }
.case-label dl div { display:grid; grid-template-columns:100px 1fr; padding:10px 0; border-bottom:1px solid var(--line); }
.case-label dt { font-size:9px; text-transform:uppercase; letter-spacing:.1em; color:#806646; }
.case-label dd { margin:0; font-family:"Cormorant Garamond",serif; font-size:14px; line-height:1.4; }

.arena-tray { width:100%; max-width:520px; flex:1; min-height:300px; border:1px solid rgba(66,47,27,.3); background:radial-gradient(circle at 50% 60%, #8a7048, #4a3a22 85%); position:relative; margin-top:8px; box-shadow:inset 0 0 50px rgba(0,0,0,.35); }
.shagai-piece { position:absolute; width:56px; height:36px; left:calc(50% - 28px); top:calc(50% - 18px); }
.shagai-piece:nth-child(1) { transform:translate(-70px,-40px) rotate(-12deg); }
.shagai-piece:nth-child(2) { transform:translate(30px,-55px) rotate(8deg); }
.shagai-piece:nth-child(3) { transform:translate(-40px,45px) rotate(20deg); }
.shagai-piece:nth-child(4) { transform:translate(60px,30px) rotate(-18deg); }
.piece-face { position:absolute; inset:0; background:linear-gradient(160deg,#f1e2bd,#c9ac74 55%,#8f7345); clip-path:polygon(18% 8%,38% 0%,48% 20%,62% 4%,82% 12%,96% 34%,86% 58%,96% 78%,74% 96%,54% 82%,42% 98%,18% 88%,4% 62%,14% 40%,2% 22%); box-shadow:0 10px 18px rgba(0,0,0,.4); }
.shagai-piece .piece-label { position:absolute; left:50%; bottom:-20px; transform:translateX(-50%); font-size:9px; text-transform:uppercase; letter-spacing:.08em; color:#f0dfbd; opacity:0; transition:opacity .4s ease .3s; white-space:nowrap; }
.shagai-piece.settled .piece-label { opacity:1; }
.shagai-piece.throwing { animation: tumble .9s cubic-bezier(.2,.6,.3,1) forwards; }
@keyframes tumble {
  0% { transform: translate(var(--tx0,0),var(--ty0,0)) rotate(var(--tr0,0deg)) scale(1); }
  30% { transform: translate(var(--tx1),var(--ty1)) rotate(var(--tr1)) scale(1.15); }
  60% { transform: translate(var(--tx2),var(--ty2)) rotate(var(--tr2)) scale(.95); }
  100% { transform: translate(var(--txf),var(--tyf)) rotate(var(--trf)) scale(1); }
}
.throw-cta { margin-top:22px; padding:16px 34px; border:1px solid #7e5a2e; background:#8d6837; color:#f2dfb9; cursor:pointer; text-transform:uppercase; letter-spacing:.1em; font-family:"Cormorant Garamond",serif; font-weight:700; font-size:18px; display:flex; align-items:center; gap:12px; transition:.2s ease; }
.throw-cta:hover { background:#785528; transform:translateY(-1px); }
.throw-cta:disabled { opacity:.5; cursor:default; transform:none; }
.arena-hint { margin-top:10px; font-size:11px; letter-spacing:.05em; color:#6a583d; text-align:center; }

.lore-block { margin-top:18px; }
.lore-block:first-child { margin-top:10px; }
.lore-block small { text-transform:uppercase; letter-spacing:.12em; font-size:9px; color:#765e3c; }
.lore-result { font-family:"Cormorant Garamond",serif; font-size:22px; margin-top:4px; color:#4a3419; }
.lore-block h3 { font-size:26px; margin-top:4px; }
.lore-block p { margin:6px 0 0; font-family:"Cormorant Garamond",serif; font-size:15px; line-height:1.5; color:#5f4b32; }
.lore-fact { margin-top:18px; padding:14px; border:1px solid var(--line); background:rgba(255,248,232,.35); }
.lore-fact small { text-transform:uppercase; letter-spacing:.12em; font-size:9px; color:#765e3c; }
.lore-fact p { margin:6px 0 0; font-size:12px; line-height:1.5; color:#6a583d; }
.lore-finish { margin-top:auto; padding-top:14px; }
.lore-finish:disabled { opacity:.48; cursor:default; transform:none; }

/* ================= COMPLETION SCREEN ================= */
.completion-frame { text-align:center; }
.stamp-card { display:flex; align-items:center; gap:26px; margin:40px auto 0; max-width:460px; text-align:left; }
.stamp-circle { width:130px; height:130px; flex:none; border:3px double rgba(138,47,33,.65); border-radius:50%; display:grid; place-items:center; text-align:center; color:#8a2f21; transform:rotate(-6deg); animation: stampIn .5s cubic-bezier(.2,.8,.2,1) .1s both; }
@keyframes stampIn { from { opacity:0; transform:rotate(-6deg) scale(1.6); } to { opacity:.85; transform:rotate(-6deg) scale(1); } }
.stamp-circle span { font-family:"Cormorant Garamond",serif; font-weight:700; font-size:30px; display:block; }
.stamp-circle small { font-size:7px; letter-spacing:.1em; display:block; margin-top:4px; }
.stamp-copy dt { font-size:9px; text-transform:uppercase; letter-spacing:.1em; color:#806646; margin-top:10px; }
.stamp-copy dd { margin:2px 0 0; font-family:"Cormorant Garamond",serif; font-size:20px; }
.completion-takeaway { max-width:560px; margin:30px auto 0; font-family:"Cormorant Garamond",serif; font-size:17px; line-height:1.6; color:#5f4b32; }
.completion-actions { display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:32px; }
.completion-actions .primary-cta { max-width:320px; }

/* ================= QUESTION / COLLECTION / SUMMARY ================= */
.question-frame { text-align:center; }
.question-country { margin:12px 0 0; color:#7b5725; font-size:11px; letter-spacing:.16em; text-transform:uppercase; }
.question-card {
  margin:30px auto 0;
  max-width:640px;
  padding:24px;
  border:1px solid rgba(84,58,31,.24);
  background:rgba(255,248,232,.38);
  box-shadow:0 18px 40px rgba(54,36,18,.1);
}
.question-card h2 { font-size:30px; line-height:1.05; }
.answer-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:22px; }
.answer-grid button {
  min-height:58px;
  border:1px solid rgba(84,58,31,.25);
  background:rgba(247,227,188,.7);
  color:#3b2a17;
  cursor:pointer;
  font-family:"Cormorant Garamond",serif;
  font-size:20px;
}
.answer-grid button:hover { background:rgba(235,206,150,.86); }
.answer-grid button.correct { border-color:rgba(72,106,58,.56); background:rgba(111,130,77,.28); }
.answer-grid button.incorrect { border-color:rgba(138,57,40,.52); background:rgba(138,57,40,.16); }
.answer-feedback {
  margin:18px 0 0;
  padding:13px;
  border:1px solid rgba(84,58,31,.2);
  font-family:"Cormorant Garamond",serif;
  font-size:18px;
  line-height:1.4;
}
.answer-feedback.correct { color:#41582f; }
.answer-feedback.incorrect { color:#7c3528; }
#collectCardBtn { margin:20px auto 0; }

.collection-page { padding:46px 44px 64px; }
.collection-heading {
  display:grid;
  gap:8px;
  max-width:820px;
  margin-bottom:30px;
}
.collection-heading h1 { max-width:720px; }
.collection-heading b {
  margin-top:6px;
  color:#7b5725;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.collection-grid,
.summary-cards {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:18px;
}
.archive-card {
  perspective:1000px;
  min-height:330px;
}
.archive-card-inner {
  position:relative;
  min-height:330px;
  transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.2,.7,.2,1);
}
.archive-card.flipped .archive-card-inner { transform:rotateY(180deg); }
.archive-card-face {
  position:absolute;
  inset:0;
  overflow:hidden;
  backface-visibility:hidden;
  border:1px solid rgba(77,57,34,.3);
  background:linear-gradient(180deg, rgba(247,227,188,.96), rgba(211,177,116,.94));
  box-shadow:0 14px 34px rgba(53,38,21,.16);
}
.archive-card-back { transform:rotateY(180deg); overflow:auto; }
.archive-card-art {
  height:160px;
  position:relative;
  background:#715b3d;
}
.archive-card-art img {
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  padding:22px;
  background:
    linear-gradient(180deg, rgba(247,227,188,.9), rgba(211,177,116,.82)),
    var(--paper);
  filter:saturate(.86) contrast(.96);
}
.archive-card-body {
  padding:17px;
  display:grid;
  gap:8px;
}
.archive-card-body small {
  color:#7b5725;
  font-size:9px;
  letter-spacing:.16em;
  font-weight:800;
}
.archive-card-body h2 { font-size:30px; line-height:1; }
.archive-card-body em {
  font-style:normal;
  color:#8a3928;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.archive-card-body p {
  margin:0;
  color:#5f4b32;
  font-family:"Cormorant Garamond",serif;
  font-size:16px;
  line-height:1.36;
}
.archive-card-body p b {
  display:block;
  color:#7b5725;
  font-family:Inter,system-ui,sans-serif;
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:4px;
}
.archive-card-body time {
  color:#806d4b;
  font-size:10px;
}
.archive-card.locked { opacity:.62; }
.archive-card.locked .archive-card-face { background:linear-gradient(180deg, rgba(217,189,137,.52), rgba(159,132,84,.42)); }
.locked-mark {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:rgba(59,42,23,.4);
  font-family:"Cormorant Garamond",serif;
  font-size:78px;
}
.collection-explore { justify-self:start; padding:0; color:#7b5725; font-size:10px; letter-spacing:.16em; }

.card-unlock {
  position:fixed;
  inset:0;
  z-index:78;
  display:grid;
  place-items:center;
  padding:32px;
}
.card-unlock[hidden] { display:none; }
.card-unlock-backdrop { position:absolute; inset:0; background:rgba(30,21,12,.72); backdrop-filter:blur(7px); }
.card-unlock-panel {
  position:relative;
  z-index:1;
  display:grid;
  justify-items:center;
  gap:16px;
  width:min(520px, 94vw);
  padding:26px;
  background:linear-gradient(180deg, rgba(43,31,20,.96), rgba(30,23,16,.94));
  border:1px solid rgba(208,166,95,.38);
  box-shadow:0 34px 80px rgba(0,0,0,.48);
  color:#f0dfbd;
}
.card-unlock-panel::before {
  content:"";
  position:absolute;
  inset:10px;
  border:1px solid rgba(208,166,95,.16);
  pointer-events:none;
}
.card-unlock-panel > * {
  position:relative;
  z-index:1;
}
.unlock-card {
  width:min(390px, 88vw);
  animation:cardReveal .62s cubic-bezier(.2,.7,.2,1) both;
}
.unlock-card.travelling { animation:cardToCollection .62s cubic-bezier(.2,.7,.2,1) both; }
.card-unlock-actions { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.card-unlock-actions .text-button { color:#f0dfbd; }
@keyframes cardReveal {
  from { opacity:0; transform:scale(.72) rotateY(-60deg); }
  to { opacity:1; transform:scale(1) rotateY(0); }
}
@keyframes cardToCollection {
  to { opacity:0; transform:translate(-42vw, 32vh) scale(.18) rotate(-8deg); }
}

.summary-frame { text-align:center; }
.summary-stats {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  max-width:720px;
  margin:34px auto 0;
}
.summary-stats div {
  padding:18px;
  border:1px solid rgba(84,58,31,.22);
  background:rgba(255,248,232,.32);
}
.summary-stats strong {
  display:block;
  font-family:"Cormorant Garamond",serif;
  font-size:44px;
}
.summary-stats span {
  display:block;
  font-size:10px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:#7b5725;
}
.summary-discoveries { max-width:720px; margin:34px auto 0; text-align:left; }
.summary-list { display:grid; gap:9px; margin-top:12px; }
.summary-list div {
  display:flex;
  gap:12px;
  align-items:center;
  padding:10px 12px;
  border:1px solid rgba(84,58,31,.16);
  background:rgba(255,248,232,.28);
}
.summary-cards { margin:32px 0 0; text-align:left; }
.summary-quote {
  max-width:560px;
  margin:34px auto 0;
  font-family:"Cormorant Garamond",serif;
  font-size:24px;
  line-height:1.3;
}
.summary-actions { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:30px; }
.danger-link { color:#8a3928; }

/* ================= CERTIFICATE CELEBRATION ================= */
.certificate-celebration { position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:34px; }
.certificate-celebration[hidden] { display:none; }
.certificate-backdrop { position:absolute; inset:0; background:rgba(30,21,12,.76); backdrop-filter:blur(8px); }
.certificate-panel {
  position:relative;
  z-index:1;
  width:min(960px, 94vw);
  max-height:92vh;
  display:grid;
  gap:14px;
  justify-items:center;
  padding:28px;
  overflow:auto;
  background:linear-gradient(180deg, rgba(247,227,188,.97), rgba(211,177,116,.96)), var(--paper);
  border:1px solid rgba(208,166,95,.48);
  box-shadow:0 34px 80px rgba(12,8,4,.46);
  animation:certificatePanelIn .34s ease-out both;
}
.certificate-panel::before { content:""; position:absolute; inset:12px; border:1px solid rgba(84,58,31,.22); pointer-events:none; }
.certificate-close { right:18px; top:12px; z-index:2; }
.certificate-panel h2 { max-width:760px; margin:0 34px 4px; text-align:center; font-size:clamp(32px,4.4vw,54px); line-height:1; color:var(--ink); }
.certificate-panel img {
  width:min(760px, 86vw);
  aspect-ratio:3 / 2;
  object-fit:contain;
  background:rgba(255,248,232,.42);
  border:1px solid rgba(84,58,31,.24);
  box-shadow:0 18px 42px rgba(55,35,16,.28);
  transform-origin:center;
  animation:certificateImageGrow .78s cubic-bezier(.17,.84,.24,1.12) .12s both;
}
.certificate-action { margin-top:6px; position:relative; z-index:1; }
@keyframes certificatePanelIn { from { opacity:0; } to { opacity:1; } }
@keyframes certificateImageGrow {
  0% { opacity:0; transform:scale(.18) rotate(-2deg); }
  70% { opacity:1; transform:scale(1.04) rotate(.4deg); }
  100% { opacity:1; transform:scale(1) rotate(0); }
}

@media (max-width:1200px){
  .sidebar{width:190px}.app-shell{margin-left:190px}.app-shell::after{left:190px}.content-grid{grid-template-columns:1fr}.exhibit{position:relative;min-height:0;border-top:1px solid var(--line);border-left:0}.game-cards{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}.hotspot-ghana{left:45%}.hotspot-japan{left:84%}.hotspot-vietnam{left:78%}
}
@media (max-width:820px){
  .sidebar{position:relative;width:100%;height:auto;display:block;padding:15px}.sidebar::before,.sidebar blockquote,.sidebar-foot{display:none}.brand{padding:5px 8px 12px}.brand-mark{width:42px;height:42px;font-size:22px}.nav-list{display:flex;overflow:auto}.nav-item{white-space:nowrap;padding:9px 12px}.app-shell{margin:0}.app-shell::after{inset:0}.topbar{padding:0 20px}.hero{padding:32px 22px}.compass{display:none}.content-grid{display:block}.map-card,.game-section{padding-left:18px;padding-right:18px}.game-cards{grid-template-columns:1fr}.game-card{min-height:205px}.story-strip{grid-template-columns:1fr;padding:35px 22px}.story-number{border-right:0}.timeline-section{padding:40px 22px}.timeline-line{grid-template-columns:1fr;gap:24px;border-top:0}.timeline-line article{border-top:1px solid var(--line)}.timeline-line article::before{top:-9px}footer{padding:20px;gap:20px;flex-direction:column}.hotspot{width:52px;height:52px}
  .welcome-grid{grid-template-columns:1fr}.welcome-illustration{max-width:150px;margin:0 auto}
  .intro-cards,.intro-cards-meta{grid-template-columns:1fr 1fr}
  .game-columns{grid-template-columns:1fr}.museum-case,.lore-panel{border:0;border-top:1px solid var(--line)}
  .stamp-card{flex-direction:column;text-align:center}.stamp-copy dt{margin-top:6px}
  .passport-frame{padding:40px 20px 50px}
  .intro-nav{height:auto;align-items:flex-start;gap:18px;flex-direction:column;padding:18px 22px}.intro-nav nav{gap:14px;flex-wrap:wrap}.intro-language{width:100%;justify-content:space-between}.intro-language select{min-width:160px}.intro-hero{min-height:calc(100vh - 130px);padding:44px 20px}.intro-hero h1{font-size:68px}.intro-player-form{margin-top:24px}.intro-stats{grid-template-columns:1fr;gap:16px;margin-top:34px}.intro-stats div{border-right:0;border-bottom:1px solid rgba(244,228,190,.14);padding:0 0 16px}.intro-actions{grid-template-columns:1fr;margin-top:34px}.intro-leaderboard{grid-column:auto}.intro-how{grid-template-columns:1fr}
}