:root {
  --ink: #244e49;
  --muted: #6d817b;
  --paper: #fffdf7;
  --cream: #f8f0dc;
  --line: #ded1ad;
  --green: #4b9b79;
  --green-dark: #256c58;
  --gold: #dda94b;
  --gold-soft: #fff0bd;
  --coral: #d96c5e;
  --purple: #7869a0;
  --shadow: 0 18px 42px rgba(73, 68, 47, .13);
}

* { box-sizing: border-box; }
html {
  min-width: 320px;
  overflow-y: scroll;
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 12%, rgba(247, 207, 102, .2), transparent 25rem),
    radial-gradient(circle at 90% 28%, rgba(141, 198, 176, .22), transparent 30rem),
    #f8f5e9;
  color: var(--ink);
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", Arial, sans-serif;
}
button, input { font: inherit; }
button { color: inherit; }
.page-pattern {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .34;
  pointer-events: none;
  background-image: radial-gradient(#d9c89b 1px, transparent 1px);
  background-size: 24px 24px;
}
.app {
  width: min(1120px, calc(100% - 32px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 20px 0 48px;
}
.topbar {
  display: flex;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}
.brand-mark {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 2px solid var(--line);
  border-radius: 17px;
  background: var(--paper);
  box-shadow: 0 6px 0 rgba(123, 99, 57, .13);
}
.brand-mark svg { width: 43px; height: 43px; }
.brand strong, .brand small { display: block; }
.brand strong { font-family: Georgia, serif; font-size: 14px; letter-spacing: .13em; }
.brand small { margin-top: 3px; color: #8c7049; font-size: 11px; }
.sound-button, .primary-button, .secondary-button, .hint-button {
  min-height: 48px;
  border-radius: 15px;
  cursor: pointer;
  font-weight: 700;
}
.sound-button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 18px;
  border: 2px solid var(--line);
  background: var(--paper);
}
.sound-button:hover, .secondary-button:hover, .hint-button:hover:not(:disabled) { border-color: #bca873; background: #fffaf0; }
.sound-button:focus-visible, .primary-button:focus-visible, .secondary-button:focus-visible, .hint-button:focus-visible, .choice-card:focus-visible, .route-card button:focus-visible {
  outline: 4px solid rgba(65, 145, 119, .28);
  outline-offset: 3px;
}
.hero {
  display: grid;
  min-height: 480px;
  grid-template-columns: 1.08fr .92fr;
  overflow: hidden;
  border: 3px solid var(--line);
  border-radius: 38px;
  background: var(--paper);
  box-shadow: var(--shadow);
}
.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 54px;
}
.eyebrow {
  margin: 0 0 10px;
  color: #8d6b3e;
  font-family: Georgia, serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.hero h1 {
  max-width: 650px;
  margin: 0;
  font-size: clamp(46px, 5.4vw, 68px);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.02;
}
.hero-copy > p:not(.eyebrow) {
  max-width: 580px;
  margin: 22px 0 27px;
  color: var(--muted);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.55;
}
.hero-actions, .result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.primary-button, .secondary-button, .hint-button {
  padding: 13px 21px;
  border: 2px solid transparent;
}
.primary-button {
  border-color: var(--green);
  background: var(--green);
  box-shadow: 0 7px 0 var(--green-dark);
  color: #fff;
}
.primary-button:hover { background: #438d70; }
.primary-button:active { box-shadow: 0 3px 0 var(--green-dark); }
.secondary-button { border-color: var(--line); background: var(--paper); }
.hint-button { border-color: #d9b65c; background: #fff6d9; color: #805a1d; }
.hint-button:disabled { cursor: default; opacity: .48; }
.hero-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}
.hero-progress strong { color: var(--ink); font: 700 31px Georgia, serif; }
.hero-art {
  position: relative;
  display: grid;
  min-width: 0;
  place-items: center;
  padding: 35px;
  background: linear-gradient(150deg, #f7e7b9, #e7eee0);
}
.hero-art .pyramid-scene {
  width: min(430px, 100%);
  filter: drop-shadow(0 18px 15px rgba(71, 58, 34, .18));
}
.plan-stamp {
  position: absolute;
  right: 32px;
  bottom: 30px;
  padding: 10px 14px;
  border: 2px solid #b8843c;
  background: #fff4ce;
  color: #8c6332;
  font: 700 11px/1.35 Georgia, serif;
  letter-spacing: .11em;
  text-align: center;
  rotate: -4deg;
}
.safety-note {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0 48px;
  padding: 16px 20px;
  border: 2px solid #e5c97f;
  border-radius: 22px;
  background: #fff5d5;
}
.safety-note > span { font-size: 27px; color: #b67c31; }
.safety-note p, .safety-note strong, .safety-note small { display: block; margin: 0; }
.safety-note strong { margin-bottom: 3px; font-size: 15px; }
.safety-note small { color: #7c765f; font-size: 13px; line-height: 1.45; }
.section-heading, .journal-heading, .choices-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}
.section-heading h2, .journal-heading h2, .choices-heading h2 {
  margin: 0;
  font-size: clamp(31px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -.035em;
}
.section-heading > p, .choices-heading > p { max-width: 360px; margin: 0; color: var(--muted); line-height: 1.45; text-align: right; }
.routes-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 17px;
  margin-top: 22px;
}
.route-card {
  min-width: 0;
  padding: 22px;
  border: 3px solid var(--line);
  border-radius: 28px;
  background: var(--paper);
  box-shadow: 0 9px 0 rgba(119, 98, 54, .15);
}
.route-head, .route-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.route-head > span {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 17px;
  background: #f3ddb0;
  color: #8e632f;
  font: 700 28px Georgia, serif;
}
.route-2 .route-head > span { background: #e8d9c8; color: #9a623d; }
.route-3 .route-head > span { background: #e3def1; color: #68598f; }
.route-head b { color: var(--muted); font-size: 13px; }
.route-card > .eyebrow { margin-top: 18px; }
.route-card h3 { margin: 0; font-size: 25px; font-weight: 700; line-height: 1.12; }
.route-card > p:not(.eyebrow) { min-height: 68px; margin: 10px 0 4px; color: var(--muted); font-size: 15px; font-weight: 400; line-height: 1.48; }
.mini-pyramid { height: 105px; overflow: hidden; margin: 12px 0; border-radius: 18px; }
.mini-pyramid svg { width: 100%; height: 165px; transform: translateY(-22px); }
.route-foot { padding-top: 15px; border-top: 1px dashed #d9ccb0; }
.route-foot > span { color: #a87b36; font-size: 12px; }
.route-foot button {
  min-height: 44px;
  padding: 9px 14px;
  border: 0;
  border-radius: 13px;
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  font-weight: 700;
}
.journal { margin-top: 58px; }
.journal-heading strong { color: var(--green-dark); font: 700 25px Georgia, serif; }
.journal-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
}
.journal-item {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 2px dashed #ddd3bb;
  border-radius: 16px;
  background: rgba(255, 253, 247, .72);
  color: #9a988d;
}
.journal-item > span {
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 10px;
  background: #eee9dc;
  font-size: 12px;
  font-weight: 700;
}
.journal-item small, .journal-item b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.journal-item small { font-size: 9px; }
.journal-item b { margin-top: 3px; font-size: 12px; }
.journal-item.is-open { border-style: solid; border-color: #a9ccb8; background: #edf7ef; color: var(--ink); }
.journal-item.is-open > span { background: var(--green); color: #fff; }

.game-shell {
  padding: 28px;
  border: 3px solid var(--line);
  border-radius: 36px;
  background: var(--paper);
  box-shadow: var(--shadow);
}
.game-heading, .progress-box, .game-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.game-heading h1 { margin: 0; font-size: clamp(34px, 4.2vw, 48px); font-weight: 700; letter-spacing: -.035em; }
.progress-box { min-width: 330px; }
.progress-box > span { width: 100%; height: 12px; overflow: hidden; border-radius: 999px; background: #e7e4d8; }
.progress-box i { display: block; height: 100%; border-radius: inherit; background: var(--green); transition: width .25s ease; }
.progress-box b { font-size: 17px; }
.challenge {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  overflow: hidden;
  margin: 25px 0;
  border: 3px solid var(--line);
  border-radius: 27px;
  background: #fbf7eb;
}
.challenge-art { display: grid; min-width: 0; place-items: center; padding: 20px; background: #eee2c5; }
.challenge-art svg { width: min(390px, 100%); }
.challenge-copy { display: flex; flex-direction: column; justify-content: center; padding: 32px; }
.challenge-copy h2 { margin: 0; font-size: clamp(25px, 3vw, 36px); font-weight: 700; line-height: 1.22; }
.question {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding: 14px;
  border: 2px solid #ddb960;
  border-radius: 16px;
  background: #fff5d3;
}
.question > span {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 11px;
  background: #c18a32;
  color: #fff;
  font: 700 20px Georgia, serif;
}
.question b { font-size: 16px; line-height: 1.35; }
.choices-heading { margin-top: 8px; }
.choices-heading h2 { font-size: 33px; }
.choices-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.choice-card {
  position: relative;
  min-width: 0;
  min-height: 240px;
  padding: 15px;
  border: 3px solid #ddd5c2;
  border-radius: 24px;
  background: #fff;
  cursor: pointer;
  text-align: left;
}
.choice-card:hover:not(:disabled) { border-color: #b99a58; background: #fffaf0; box-shadow: 0 7px 18px rgba(98, 78, 44, .11); }
.choice-card:disabled { cursor: default; opacity: 1; }
.choice-number {
  position: absolute;
  top: 11px;
  left: 11px;
  z-index: 2;
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border-radius: 9px;
  background: #8f6d43;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.choice-art { display: block; height: 112px; }
.choice-art svg { width: 100%; height: 100%; }
.choice-copy b, .choice-copy small { display: block; }
.choice-copy b { margin-top: 10px; font-size: 19px; font-weight: 700; line-height: 1.18; }
.choice-copy small { margin-top: 8px; color: var(--muted); font-size: 13px; font-weight: 400; line-height: 1.4; }
.choice-card.is-wrong { border-color: #dc857d; background: #fff0ed; }
.choice-card.is-hinted { border-color: #e0b13f; box-shadow: 0 0 0 5px rgba(232, 185, 64, .16); }
.choice-card.is-correct { border-color: #6aaa89; background: #edf8ef; box-shadow: 0 0 0 5px rgba(75, 155, 121, .14); }
.feedback-zone { margin-top: 18px; }
.feedback {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 17px;
  padding: 18px;
  border: 3px solid;
  border-radius: 23px;
}
.feedback-icon {
  display: grid;
  width: 55px;
  height: 55px;
  place-items: center;
  border-radius: 17px;
  color: #fff;
  font: 700 28px Georgia, serif;
}
.feedback strong, .feedback p, .feedback small { display: block; margin: 0; }
.feedback strong { font-size: 18px; }
.feedback p { margin-top: 4px; color: var(--muted); line-height: 1.45; }
.feedback small { margin-top: 6px; color: #7d6b4a; line-height: 1.4; }
.feedback.error { border-color: #df948c; background: #fff0ed; }
.feedback.error .feedback-icon { background: var(--coral); }
.feedback.hint { border-color: #e3bd60; background: #fff7dc; }
.feedback.hint .feedback-icon { background: #bd8731; }
.feedback.success { border-color: #87b99d; background: #edf8ef; }
.feedback.success .feedback-icon { background: var(--green); }
.primary-button.compact { white-space: nowrap; }
.game-actions { margin-top: 18px; }

.result {
  max-width: 910px;
  margin: 25px auto;
  padding: 42px;
  border: 3px solid var(--line);
  border-radius: 38px;
  background: var(--paper);
  box-shadow: var(--shadow);
  text-align: center;
}
.result-art { width: min(420px, 100%); margin: 0 auto 20px; overflow: hidden; border-radius: 24px; }
.result-art svg { display: block; width: 100%; }
.result h1 { margin: 0; font-size: clamp(38px, 5vw, 58px); font-weight: 700; letter-spacing: -.04em; line-height: 1.05; }
.result > p:not(.eyebrow) { max-width: 700px; margin: 18px auto; color: var(--muted); font-size: 17px; line-height: 1.5; }
.stars span { color: #ddd6c5; font-size: 52px; }
.stars .earned { color: #e7ae3d; text-shadow: 0 4px 0 #bf7f24; }
.result-stats { display: flex; justify-content: center; gap: 12px; margin: 24px 0; }
.result-stats > span { min-width: 145px; padding: 14px; border-radius: 17px; background: #eff4e9; }
.result-stats b, .result-stats small { display: block; }
.result-stats b { font-size: 27px; }
.result-stats small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.result-actions { justify-content: center; }

@media (max-width: 920px) {
  .hero { grid-template-columns: 1fr; }
  .hero-copy { padding: 45px; text-align: center; }
  .hero-copy > p:not(.eyebrow) { margin-inline: auto; }
  .hero-actions, .hero-progress { justify-content: center; }
  .hero-art { min-height: 390px; }
  .routes-grid { grid-template-columns: 1fr 1fr; }
  .route-card:last-child { grid-column: 1 / -1; }
  .journal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .game-heading { align-items: flex-start; flex-direction: column; }
  .progress-box { width: 100%; min-width: 0; }
  .challenge { grid-template-columns: 1fr; }
  .challenge-art { min-height: 300px; }
}

@media (max-width: 700px) {
  .app { width: min(1120px, calc(100% - 20px)); padding-top: 8px; }
  .topbar { min-height: 56px; margin-bottom: 10px; }
  .brand-mark { width: 48px; height: 48px; }
  .brand-mark svg { width: 38px; height: 38px; }
  .brand strong { font-size: 12px; }
  .brand small, .sound-button b { display: none; }
  .sound-button { width: 48px; padding: 0; justify-content: center; }
  .hero { min-height: 0; border-radius: 29px; }
  .hero-copy { padding: 34px 20px; }
  .hero h1 { font-size: clamp(41px, 13vw, 55px); }
  .hero-copy > p:not(.eyebrow) { margin: 18px 0 23px; font-size: 16px; }
  .hero-actions { flex-direction: column; }
  .hero-actions button { width: 100%; }
  .hero-art { min-height: 290px; padding: 18px; }
  .plan-stamp { right: 18px; bottom: 17px; }
  .safety-note { align-items: flex-start; margin-bottom: 38px; padding: 14px; }
  .section-heading, .journal-heading, .choices-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .section-heading > p, .choices-heading > p { text-align: left; }
  .routes-grid, .journal-grid { grid-template-columns: 1fr; }
  .route-card:last-child { grid-column: auto; }
  .route-card > p:not(.eyebrow) { min-height: 0; }
  .journal-item small, .journal-item b { white-space: normal; }
  .game-shell { padding: 17px 10px; border-radius: 28px; }
  .game-heading { padding: 0 6px; }
  .game-heading h1 { font-size: 35px; }
  .challenge { margin: 18px 0; border-radius: 23px; }
  .challenge-art { min-height: 240px; padding: 8px; }
  .challenge-copy { padding: 23px 17px; }
  .challenge-copy h2 { font-size: 27px; }
  .question { align-items: flex-start; }
  .choices-heading { padding: 0 6px; }
  .choices-heading h2 { font-size: 28px; }
  .choices-grid { grid-template-columns: 1fr; }
  .choice-card { display: grid; min-height: 0; grid-template-columns: 105px 1fr; align-items: center; gap: 10px; padding: 12px; }
  .choice-number { top: 8px; left: 8px; }
  .choice-art { height: 90px; }
  .choice-copy b { margin-top: 0; font-size: 17px; }
  .choice-copy small { font-size: 12px; }
  .feedback { grid-template-columns: auto 1fr; align-items: start; padding: 14px; }
  .feedback .compact { grid-column: 1 / -1; width: 100%; }
  .feedback-icon { width: 46px; height: 46px; }
  .game-actions { align-items: stretch; flex-direction: column-reverse; }
  .game-actions button { width: 100%; }
  .result { margin: 18px auto; padding: 24px 14px; border-radius: 29px; }
  .result h1 { font-size: 39px; }
  .result-stats { flex-wrap: wrap; }
  .result-stats > span { min-width: 92px; flex: 1; }
  .result-actions { flex-direction: column; }
  .result-actions button { width: 100%; }
}

@media (max-width: 420px) {
  .brand { gap: 8px; }
  .brand strong { font-size: 10px; letter-spacing: .09em; }
  .hero-copy { padding-inline: 16px; }
  .route-card { padding: 18px; }
  .choice-card { grid-template-columns: 92px 1fr; }
}