:root {
  --ink: #17324b;
  --ink-soft: #38556c;
  --paper: #f4ead0;
  --paper-deep: #e8d6aa;
  --terracotta: #99472f;
  --terracotta-dark: #70301f;
  --gold: #b6832c;
  --gold-soft: #e8c87e;
  --olive: #586735;
  --cream: #fff9e9;
  --charcoal: #292822;
  --shadow: 0 12px 32px rgba(35, 30, 18, .16);
  --shadow-soft: 0 6px 18px rgba(35, 30, 18, .11);
  --radius: 22px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html { background: #0f273a; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--charcoal);
  background:
    linear-gradient(rgba(244,234,208,.93), rgba(244,234,208,.96)),
    url('assets/images/parchment-texture.jpg') center/cover fixed;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; display: block; }

.app-shell {
  min-height: 100vh;
  padding-bottom: calc(88px + var(--safe-bottom));
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(10px + var(--safe-top)) 16px 10px;
  color: var(--cream);
  background: linear-gradient(180deg, rgba(19,49,73,.98), rgba(19,49,73,.94));
  border-bottom: 1px solid rgba(232,200,126,.35);
  backdrop-filter: blur(12px);
}
.topbar-title { min-width: 0; }
.topbar-kicker {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--gold-soft);
  font-weight: 800;
}
.topbar h1 {
  margin: 1px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.icon-btn {
  min-width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(232,200,126,.5);
  background: rgba(255,255,255,.08);
  color: white;
  display: grid;
  place-items: center;
  font-size: 20px;
}

.screen {
  width: min(100%, 760px);
  margin: 0 auto;
  padding: 18px 16px 30px;
}
.screen.compact { padding-top: 12px; }

.hero-card {
  overflow: hidden;
  border-radius: 30px;
  background: var(--cream);
  box-shadow: var(--shadow);
  border: 1px solid rgba(105,74,32,.24);
}
.hero-art {
  min-height: 300px;
  background:
    linear-gradient(180deg, rgba(13,36,55,.03), rgba(13,36,55,.38)),
    url('assets/images/hero-journal.jpg') center/cover;
  display: flex;
  align-items: flex-end;
  padding: 22px;
}
.hero-copy {
  width: 100%;
  color: white;
  text-shadow: 0 2px 14px rgba(0,0,0,.4);
}
.hero-copy .eyebrow { color: #ffe7a7; }
.hero-copy h2 {
  max-width: 500px;
  margin: 4px 0 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(32px, 8vw, 54px);
  line-height: .95;
  letter-spacing: -.02em;
}
.hero-copy p { margin: 0; font-weight: 650; max-width: 520px; }
.hero-body { padding: 20px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--terracotta);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.lead {
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.55;
  margin: 8px 0 18px;
}

.primary-btn, .secondary-btn, .choice-btn, .small-btn {
  border: 0;
  border-radius: 16px;
  cursor: pointer;
  font-weight: 850;
  transition: transform .12s ease, filter .12s ease, opacity .12s ease;
}
.primary-btn:active, .secondary-btn:active, .choice-btn:active, .small-btn:active { transform: scale(.985); }
.primary-btn {
  width: 100%;
  min-height: 54px;
  padding: 14px 18px;
  background: linear-gradient(180deg, #a75436, #853823);
  color: white;
  box-shadow: 0 7px 16px rgba(116,48,30,.2);
}
.primary-btn.gold { background: linear-gradient(180deg, #ba8d38, #8d661f); }
.secondary-btn {
  min-height: 48px;
  padding: 12px 16px;
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(23,50,75,.25);
}
.small-btn {
  min-height: 40px;
  padding: 9px 12px;
  color: var(--ink);
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(23,50,75,.18);
}
button:disabled { opacity: .45; cursor: default; }

.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 2px; }
.pill {
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(23,50,75,.08);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}
.pill.good { background: rgba(88,103,53,.13); color: #3d4c22; }

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 2px 14px;
}
.section-head h2, .section-head h3 {
  margin: 0;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
}
.section-head h2 { font-size: 27px; }
.section-head h3 { font-size: 21px; }
.section-head p { margin: 4px 0 0; color: var(--ink-soft); font-size: 13px; }

.progress-card {
  background: rgba(255,249,233,.88);
  border: 1px solid rgba(105,74,32,.19);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
  padding: 14px;
  margin-bottom: 16px;
}
.progress-line { height: 9px; border-radius: 999px; overflow: hidden; background: rgba(23,50,75,.1); }
.progress-line > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--terracotta), var(--gold));
}
.progress-meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 9px; font-size: 12px; font-weight: 800; color: var(--ink-soft); }

.route-map {
  position: relative;
  min-height: 350px;
  border-radius: 24px;
  overflow: hidden;
  background:
    linear-gradient(155deg, rgba(223,197,139,.3), rgba(240,229,195,.92)),
    url('assets/images/parchment-texture.jpg') center/cover;
  border: 1px solid rgba(105,74,32,.22);
  box-shadow: var(--shadow-soft);
  margin-bottom: 18px;
}
.route-map::before {
  content: "";
  position: absolute;
  inset: 20px 42% 20px 42%;
  border-left: 3px dashed rgba(112,48,31,.36);
  transform: rotate(7deg);
}
.route-node {
  position: absolute;
  width: 72%;
  max-width: 420px;
  display: grid;
  grid-template-columns: 46px 1fr 78px;
  align-items: center;
  gap: 10px;
  border: 0;
  text-align: left;
  background: rgba(255,249,233,.93);
  color: var(--charcoal);
  padding: 9px;
  border-radius: 17px;
  box-shadow: 0 5px 14px rgba(50,38,20,.12);
  border: 1px solid rgba(105,74,32,.15);
}
.route-node:nth-child(1) { top: 18px; left: 6%; }
.route-node:nth-child(2) { top: 84px; right: 5%; }
.route-node:nth-child(3) { top: 150px; left: 7%; }
.route-node:nth-child(4) { top: 216px; right: 6%; }
.route-node:nth-child(5) { top: 282px; left: 6%; }
.route-node.locked { filter: grayscale(.5); opacity: .6; }
.route-node.current { outline: 3px solid rgba(182,131,44,.35); }
.route-number {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: white; font-weight: 900; font-family: Georgia, serif;
}
.route-node.complete .route-number { background: var(--olive); }
.route-node.current .route-number { background: var(--terracotta); }
.route-label strong { display:block; color: var(--ink); font-size: 13px; }
.route-label span { display:block; margin-top: 2px; font-size: 11px; color: var(--ink-soft); }
.route-thumb { width: 78px; height: 46px; border-radius: 10px; object-fit: cover; }

.chapter-grid { display: grid; gap: 12px; }
.chapter-card {
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255,249,233,.94);
  border: 1px solid rgba(105,74,32,.18);
  box-shadow: var(--shadow-soft);
}
.chapter-card-top { display: grid; grid-template-columns: 104px 1fr; min-height: 102px; }
.chapter-card img { width: 104px; height: 100%; object-fit: cover; }
.chapter-copy { padding: 13px; }
.chapter-copy h3 { margin: 2px 0 4px; color: var(--ink); font-family: Georgia, serif; font-size: 19px; }
.chapter-copy p { margin: 0; font-size: 13px; color: var(--ink-soft); line-height: 1.4; }
.chapter-status { display:flex; align-items:center; justify-content:space-between; gap:10px; padding: 10px 13px; border-top: 1px solid rgba(105,74,32,.12); font-size: 12px; font-weight: 800; color: var(--ink-soft); }

.content-card, .mission-card, .fact-card, .clue-card, .story-card {
  border-radius: 22px;
  background: rgba(255,249,233,.95);
  border: 1px solid rgba(105,74,32,.18);
  box-shadow: var(--shadow-soft);
}
.content-card { padding: 18px; }
.story-card, .fact-card, .clue-card { padding: 15px 16px 15px 54px; position: relative; margin: 12px 0; }
.story-card::before, .fact-card::before, .clue-card::before {
  position:absolute; left:15px; top:15px; width:29px; height:29px; border-radius:9px; display:grid; place-items:center; color:white; font-size:16px;
}
.story-card::before { content:"▤"; background: var(--ink); }
.fact-card::before { content:"⌂"; background: var(--olive); }
.clue-card::before { content:"✦"; background: var(--terracotta); }
.card-label { display:block; font-size:10px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; margin-bottom:5px; }
.story-card .card-label { color: var(--ink); }
.fact-card .card-label { color: var(--olive); }
.clue-card .card-label { color: var(--terracotta); }
.story-card p, .fact-card p, .clue-card p { margin:0; line-height:1.45; font-size:14px; }

.mission-hero {
  border-radius: 24px;
  overflow: hidden;
  min-height: 190px;
  position: relative;
  display: flex;
  align-items: end;
  background: #d7c18d;
  box-shadow: var(--shadow-soft);
  margin-bottom: 14px;
}
.mission-hero img { width:100%; height:220px; object-fit:cover; }
.mission-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 40%, rgba(12,32,49,.78)); pointer-events:none; }
.mission-hero-copy { position:absolute; z-index:2; left:16px; right:16px; bottom:14px; color:white; }
.mission-hero-copy h2 { margin:2px 0; font-family:Georgia,serif; font-size:27px; }
.mission-hero-copy p { margin:0; opacity:.92; font-size:13px; }

.mission-list { display:grid; gap:10px; }
.mission-row {
  width:100%; border:0; text-align:left; display:grid; grid-template-columns: 43px 1fr auto; gap:11px; align-items:center;
  padding: 12px; border-radius:17px; background:rgba(255,249,233,.94); color:var(--charcoal);
  border:1px solid rgba(105,74,32,.17); box-shadow: 0 4px 12px rgba(45,35,20,.08);
}
.mission-row.locked { opacity:.52; }
.mission-row.complete { background:rgba(242,246,228,.92); }
.mission-icon { width:43px; height:43px; border-radius:12px; display:grid; place-items:center; background:rgba(23,50,75,.09); color:var(--ink); font-size:20px; }
.mission-row.complete .mission-icon { background:rgba(88,103,53,.15); color:var(--olive); }
.mission-row strong { display:block; color:var(--ink); font-size:14px; }
.mission-row span { display:block; color:var(--ink-soft); font-size:11px; margin-top:2px; }
.mission-chevron { font-weight:900; color:var(--gold); }

.choice-list { display:grid; gap:10px; margin:16px 0; }
.choice-btn {
  width:100%; min-height:52px; padding:13px 15px; text-align:left; color:var(--ink); background:rgba(255,255,255,.6);
  border:1px solid rgba(23,50,75,.17);
}
.choice-btn.selected { border-color:var(--gold); background:rgba(232,200,126,.2); }
.choice-btn.correct { border-color:#687846; background:rgba(88,103,53,.14); }
.choice-btn.wrong { border-color:#a45036; background:rgba(153,71,47,.11); }

.feedback {
  margin: 12px 0;
  border-radius: 16px;
  padding: 13px 14px;
  font-size: 14px;
  line-height: 1.45;
  background: rgba(23,50,75,.07);
  color: var(--ink);
}
.feedback.success { background:rgba(88,103,53,.13); color:#35431e; }
.feedback.try { background:rgba(153,71,47,.1); color:#6f3323; }

.hint-box { margin-top:14px; padding-top:14px; border-top:1px dashed rgba(105,74,32,.28); }
.hint-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.hint-copy { margin-top:10px; color:var(--ink-soft); font-size:13px; line-height:1.45; }

.order-pool, .order-answer { display:flex; flex-wrap:wrap; gap:8px; min-height:54px; padding:10px; border-radius:15px; margin:10px 0; }
.order-pool { background:rgba(23,50,75,.05); }
.order-answer { background:rgba(182,131,44,.09); border:1px dashed rgba(182,131,44,.45); }
.order-token { border:0; border-radius:12px; padding:10px 12px; background:white; color:var(--ink); font-weight:800; box-shadow:0 2px 8px rgba(40,30,18,.09); }

.match-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:14px 0; }
.match-card { border:1px solid rgba(23,50,75,.16); border-radius:15px; padding:12px; min-height:68px; background:rgba(255,255,255,.56); color:var(--ink); text-align:left; }
.match-card.active { outline:3px solid rgba(182,131,44,.35); }
.match-card.done { background:rgba(88,103,53,.12); border-color:rgba(88,103,53,.35); }
.match-card strong { display:block; font-size:13px; }
.match-card small { display:block; margin-top:4px; color:var(--ink-soft); }

.observe-panel { text-align:center; padding:18px; border-radius:20px; background:rgba(23,50,75,.06); margin:14px 0; }
.observe-symbol { font-size:50px; line-height:1; }
.observe-panel h3 { font-family:Georgia,serif; color:var(--ink); margin:10px 0 6px; }
.observe-panel p { margin:0; color:var(--ink-soft); line-height:1.5; }

.artefact-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.artefact-card {
  min-height:155px; border-radius:19px; padding:15px; text-align:center; background:rgba(255,249,233,.95); border:1px solid rgba(105,74,32,.18); box-shadow:var(--shadow-soft);
}
.artefact-card.locked { filter:grayscale(1); opacity:.48; }
.artefact-emblem { width:68px; height:68px; border-radius:50%; margin:0 auto 10px; display:grid; place-items:center; font-size:34px; background:radial-gradient(circle at 35% 30%, #e0b860, #8f5b1f); color:#fff7dc; border:4px double #f3d58f; box-shadow: inset 0 0 0 2px rgba(91,52,18,.25); }
.artefact-card h3 { margin:0 0 4px; font-family:Georgia,serif; color:var(--ink); font-size:16px; }
.artefact-card p { margin:0; color:var(--ink-soft); font-size:11px; line-height:1.4; }

.seal-row { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; margin:14px 0; }
.seal-piece { aspect-ratio:1; border-radius:50%; display:grid; place-items:center; border:2px dashed rgba(105,74,32,.26); color:rgba(23,50,75,.4); background:rgba(255,255,255,.4); font-weight:900; }
.seal-piece.earned { border-style:solid; color:#fff0ba; background:radial-gradient(circle at 35% 30%, #b65738, #6e2c1d); box-shadow:0 4px 10px rgba(80,40,20,.16); }

.journal-entry { padding:15px 0; border-bottom:1px dashed rgba(105,74,32,.25); }
.journal-entry:last-child { border-bottom:0; }
.journal-entry strong { color:var(--ink); }
.journal-entry p { margin:5px 0 0; color:var(--ink-soft); font-size:13px; line-height:1.45; }

.certificate {
  border-radius:24px;
  padding:22px;
  text-align:center;
  color:var(--ink);
  background:
    linear-gradient(rgba(255,249,233,.91), rgba(255,249,233,.91)),
    url('assets/images/parchment-texture.jpg') center/cover;
  border:4px double rgba(112,48,31,.55);
  box-shadow:var(--shadow);
}
.certificate .seal-large { width:108px; height:108px; margin:0 auto 12px; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle at 35% 30%, #c46240, #722d1f); border:7px double #e8c87e; color:#ffe9a5; font-size:45px; }
.certificate h2 { margin:3px 0 4px; font-family:Georgia,serif; font-size:30px; }
.certificate h3 { margin:4px 0 14px; color:var(--terracotta); font-family:Georgia,serif; font-size:20px; }
.certificate p { color:var(--ink-soft); line-height:1.5; }

.memory-options { display:grid; gap:9px; margin-top:12px; }
.memory-btn { border:1px solid rgba(23,50,75,.16); border-radius:15px; background:rgba(255,255,255,.55); color:var(--ink); padding:12px; text-align:left; font-weight:800; }
.memory-btn.selected { outline:3px solid rgba(182,131,44,.34); background:rgba(232,200,126,.15); }

.navbar {
  position:fixed;
  z-index:50;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:min(100%,760px);
  padding:8px 10px calc(8px + var(--safe-bottom));
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:5px;
  background:rgba(19,49,73,.97);
  border-top:1px solid rgba(232,200,126,.35);
  backdrop-filter:blur(14px);
}
.nav-btn { border:0; background:transparent; color:rgba(255,255,255,.72); min-height:52px; border-radius:13px; display:flex; flex-direction:column; gap:3px; align-items:center; justify-content:center; font-size:11px; font-weight:800; }
.nav-btn .nav-icon { font-size:21px; line-height:1; }
.nav-btn.active { color:#ffe1a0; background:rgba(255,255,255,.08); }

.modal-backdrop { position:fixed; inset:0; z-index:80; background:rgba(8,22,33,.55); display:flex; align-items:flex-end; justify-content:center; padding:20px 16px calc(20px + var(--safe-bottom)); }
.sheet { width:min(100%,600px); border-radius:26px; background:var(--paper); box-shadow:0 20px 60px rgba(0,0,0,.3); padding:20px; max-height:82vh; overflow:auto; }
.sheet h2 { margin:0 0 8px; font-family:Georgia,serif; color:var(--ink); }
.sheet p { color:var(--ink-soft); line-height:1.5; }
.setting-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-top:1px solid rgba(105,74,32,.15); }
.switch { min-width:56px; border:0; border-radius:999px; padding:5px; background:rgba(23,50,75,.16); }
.switch span { display:block; width:22px; height:22px; border-radius:50%; background:white; transition:transform .15s ease; box-shadow:0 2px 5px rgba(0,0,0,.16); }
.switch.on { background:var(--olive); }
.switch.on span { transform:translateX(24px); }

.toast { position:fixed; z-index:100; left:50%; transform:translateX(-50%); bottom:calc(92px + var(--safe-bottom)); width:min(calc(100% - 32px),520px); padding:12px 14px; border-radius:14px; color:white; background:rgba(19,49,73,.96); box-shadow:var(--shadow); font-size:13px; font-weight:750; text-align:center; animation:toastIn .22s ease; }
@keyframes toastIn { from { opacity:0; transform:translate(-50%,12px); } }

.offline-badge { display:inline-flex; gap:6px; align-items:center; font-size:11px; color:var(--olive); font-weight:850; }
.offline-badge::before { content:"●"; font-size:8px; }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (min-width: 700px) {
  .screen { padding-left:24px; padding-right:24px; }
  .chapter-grid { grid-template-columns:1fr 1fr; }
  .artefact-grid { grid-template-columns:repeat(4,1fr); }
  .route-map { min-height:370px; }
  .hero-art { min-height:390px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behaviour:auto !important; }
}