:root {
  color-scheme: light;
  --ink: #294a43;
  --muted: #74817d;
  --paper: #fffdf7;
  --line: #dedcc6;
  --green: #4e826b;
  font-family: Inter, ui-rounded, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: #edf5eb; overflow-x: hidden; }
body { margin: 0; color: var(--ink); background: radial-gradient(circle at 4% 8%, #f2e8bd 0 13%, transparent 13.3%), radial-gradient(circle at 98% 41%, #d7e8ef 0 13%, transparent 13.3%), #edf5eb; overflow-x: hidden; }
button { font: inherit; color: inherit; }
button:focus-visible { outline: 4px solid #ecb944; outline-offset: 3px; }
img { display: block; max-width: 100%; }
.app { width: min(1120px, calc(100% - 32px)); min-height: 100vh; margin: 0 auto; padding: 22px 0 74px; }

.topbar { min-height: 74px; display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 24px; }
.brand { min-height: 60px; display: flex; align-items: center; gap: 13px; padding: 4px; border: 0; background: transparent; cursor: pointer; text-align: left; }
.brand-mark { position: relative; width: 62px; height: 55px; }
.brand-mark b, .brand-mark i { position: absolute; display: grid; place-items: center; border: 4px solid white; box-shadow: 0 7px 14px #4860542b; }
.brand-mark b { inset: 0 15px 10px 0; border-radius: 16px; color: white; background: #5d8c78; font-size: 23px; transform: rotate(-6deg); }
.brand-mark i { right: 0; bottom: 0; width: 36px; height: 36px; border-radius: 13px; color: #3d546a; background: #e6b94b; font-size: 12px; font-style: normal; font-weight: 900; transform: rotate(5deg); }
.brand > span:last-child { display: grid; }
.brand strong { font: 800 27px/1 Georgia, serif; }
.brand small { margin-top: 4px; color: #71817c; font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.top-actions { display: flex; align-items: center; gap: 14px; }
.spark { color: #e2b64a; font-size: 27px; }
.passport-pill { min-height: 48px; display: flex; align-items: center; gap: 9px; padding: 0 17px; border: 2px solid #d9d8c4; border-radius: 18px; background: #fffdf6d9; font-size: 13px; font-weight: 900; }
.passport-pill span { color: #a95f5a; }
.back-button { width: 50px; height: 50px; border: 2px solid #d9d8c4; border-radius: 16px; background: var(--paper); cursor: pointer; font-size: 24px; }

.hero { min-height: 610px; display: grid; grid-template-columns: 1.06fr .94fr; overflow: hidden; border: 5px solid #ded6b7; border-radius: 60px; background: var(--paper); box-shadow: 0 22px 42px #4b5d481d; }
.hero-copy { align-self: center; padding: 67px 34px 62px 77px; }
.eyebrow { margin: 0 0 17px; color: #4e8169; font: 800 14px/1.2 Georgia, serif; letter-spacing: .15em; text-transform: uppercase; }
.hero h1 { margin: 0; font: 800 clamp(49px, 6vw, 78px)/.97 Georgia, serif; letter-spacing: -.045em; }
.hero-copy > p:not(.eyebrow) { margin: 26px 0 31px; color: var(--muted); font-size: 20px; font-weight: 650; line-height: 1.5; }
.primary-button, .secondary-button { min-height: 58px; padding: 0 27px; border-radius: 19px; border: 0; cursor: pointer; font-weight: 900; }
.primary-button { color: white; background: #3f785e; box-shadow: 0 8px 0 #2d6149; }
.primary-button.compact { min-height: 48px; margin-left: auto; padding-inline: 19px; }
.secondary-button { border: 2px solid #d7d6c4; background: white; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 38px; color: var(--muted); font-weight: 800; }
.hero-facts span { display: flex; align-items: baseline; gap: 7px; }
.hero-facts strong { color: var(--ink); font: 800 35px/1 Georgia, serif; }
.hero-map { position: relative; min-height: 610px; overflow: hidden; background: linear-gradient(180deg, #dcecf0, #e9f2df); }
.hero-map::before { content: ""; position: absolute; inset: 70px 34px 90px; border-radius: 49% 42% 47% 41%; background: #c7dbad; box-shadow: inset 0 0 0 8px #eef2d8; transform: rotate(-4deg); }
.hero-map::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(#6b9381 1.5px, transparent 1.5px); background-size: 19px 19px; opacity: .16; }
.route-line { position: absolute; z-index: 1; width: 350px; height: 280px; left: 70px; top: 120px; border: 4px dashed white; border-radius: 50%; transform: rotate(18deg); }
.map-point { position: absolute; z-index: 4; display: grid; justify-items: center; gap: 3px; color: #37594f; font-weight: 900; }
.map-point b { font-size: 29px; filter: drop-shadow(0 3px 0 white); }
.map-point small { padding: 4px 7px; border-radius: 8px; background: #fffdf4; }
.map-point.london { left: 48px; top: 145px; }
.map-point.newyork { right: 41px; top: 107px; }
.map-point.singapore { right: 42px; top: 305px; }
.map-point.sydney { left: 70px; top: 339px; }
.plane { position: absolute; z-index: 4; left: 49%; top: 45%; color: white; font-size: 48px; filter: drop-shadow(0 5px 0 #4a776d); transform: rotate(18deg); }
.hero-map img { position: absolute; z-index: 5; left: 50%; bottom: 8px; width: 265px; height: 280px; object-fit: contain; transform: translateX(-50%); filter: drop-shadow(0 12px 8px #40523b36); }
.luggage { position: absolute; z-index: 6; right: 42px; bottom: 32px; width: 66px; height: 71px; display: grid; place-items: center; border: 5px solid white; border-radius: 16px; color: white; background: #ba6b5c; font-size: 30px; box-shadow: 0 7px 0 #8c4d44; }

.how-section, .journeys-section { padding-top: 78px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 28px; margin-bottom: 31px; }
.section-heading h2 { margin: 0; font: 800 clamp(35px, 5vw, 58px)/1 Georgia, serif; letter-spacing: -.035em; }
.section-heading > p { max-width: 390px; margin: 0; color: var(--muted); font-weight: 700; line-height: 1.5; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.steps-grid article { min-height: 128px; display: flex; align-items: center; gap: 18px; padding: 24px; border: 2px solid #dfdeca; border-radius: 28px; background: #fffdf8; }
.steps-grid b { flex: 0 0 53px; height: 53px; display: grid; place-items: center; border-radius: 16px; background: #e7f1e8; font: 800 24px/1 Georgia, serif; }
.steps-grid span { display: grid; gap: 6px; }
.steps-grid strong { font-size: 18px; }
.steps-grid small { color: var(--muted); line-height: 1.35; }
.journeys-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.journey-card { position: relative; min-height: 420px; display: grid; grid-template-rows: auto 160px 1fr auto; gap: 12px; padding: 24px; overflow: hidden; border: 3px solid #dedbc4; border-radius: 35px; background: #fffdf8; text-align: left; cursor: pointer; box-shadow: 0 10px 0 #6f6b4b12; }
.journey-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 220px; background: var(--sky); }
.card-top { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; }
.card-top b { font-size: 34px; }
.card-top small { padding: 7px 9px; border-radius: 10px; color: white; background: var(--accent); font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.city-art { position: relative; z-index: 1; display: flex; justify-content: center; align-items: end; }
.city-art i { position: absolute; left: 17px; bottom: 0; color: color-mix(in srgb, var(--accent), white 20%); font: 800 120px/1 Georgia, serif; opacity: .45; }
.city-art img { position: relative; z-index: 2; width: 205px; height: 175px; object-fit: contain; filter: drop-shadow(0 9px 6px #3b4c4130); }
.card-copy { position: relative; z-index: 2; align-self: end; display: grid; gap: 7px; }
.card-copy small { color: var(--accent); font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.card-copy strong { font: 800 36px/1 Georgia, serif; }
.card-copy span { color: var(--muted); line-height: 1.42; }
.card-footer { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 10px; padding-top: 15px; border-top: 2px dashed #dddbc7; }
.card-footer em { color: var(--muted); font-size: 13px; font-style: normal; font-weight: 800; }
.card-footer b { color: var(--accent); font-size: 13px; }
.journey-card.completed { border-color: color-mix(in srgb, var(--accent), white 30%); }
.adult-note { min-height: 140px; display: flex; align-items: center; gap: 24px; margin-top: 64px; padding: 24px 34px; border: 3px solid #d8d4ba; border-radius: 33px; background: #fff7d9; }
.adult-note > span { flex: 0 0 68px; height: 68px; display: grid; place-items: center; border-radius: 21px; background: white; font-size: 31px; }
.adult-note p { display: grid; gap: 7px; margin: 0; }
.adult-note strong { font: 800 23px/1 Georgia, serif; }
.adult-note small { color: var(--muted); font-size: 15px; line-height: 1.5; }

.game-head { display: flex; justify-content: space-between; align-items: end; gap: 25px; margin: 18px 0 17px; }
.game-head h1 { margin: 0; font: 800 clamp(42px, 6vw, 66px)/1 Georgia, serif; letter-spacing: -.04em; }
.game-head p:last-child { margin: 12px 0 0; color: var(--muted); font-weight: 700; }
.round-badge { flex: 0 0 92px; height: 86px; display: grid; place-items: center; align-content: center; border: 3px solid #d9d5ba; border-radius: 27px; background: var(--paper); }
.round-badge strong { font: 800 30px/1 Georgia, serif; }
.round-badge span { color: var(--muted); font-size: 12px; font-weight: 800; }
.route-progress { height: 14px; margin-bottom: 18px; border-radius: 20px; overflow: hidden; background: #d9dad0; }
.route-progress i { display: block; height: 100%; background: var(--accent); transition: width .25s ease; }
.quest-workspace { display: grid; grid-template-columns: 315px 1fr; gap: 19px; }
.route-panel, .dialogue-panel { min-width: 0; border: 3px solid #dcd8bf; border-radius: 38px; background: var(--paper); box-shadow: 0 14px 27px #44523d16; }
.route-panel { padding: 22px; }
.mini-passport { min-height: 95px; display: grid; grid-template-columns: 50px 1fr 53px; align-items: center; gap: 10px; padding: 14px; border: 2px solid color-mix(in srgb, var(--accent), white 48%); border-radius: 20px; background: color-mix(in srgb, var(--sky), white 34%); }
.mini-passport > span { font-size: 32px; }
.mini-passport p { display: grid; gap: 4px; margin: 0; }
.mini-passport small { color: var(--accent); font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.mini-passport strong { font: 800 21px/1 Georgia, serif; }
.mini-passport > b { width: 53px; height: 53px; display: grid; place-items: center; border: 3px dashed var(--accent); border-radius: 50%; color: var(--accent); transform: rotate(-6deg); }
.route-steps { position: relative; display: grid; gap: 15px; margin: 25px 0; }
.route-steps::before { content: ""; position: absolute; left: 20px; top: 20px; bottom: 20px; border-left: 3px dashed #d2d4c4; }
.route-steps > span { position: relative; z-index: 1; min-height: 45px; display: flex; align-items: center; gap: 12px; }
.route-steps b { flex: 0 0 42px; height: 42px; display: grid; place-items: center; border: 3px solid #d5d5c4; border-radius: 50%; background: white; }
.route-steps small { color: var(--muted); font-weight: 800; }
.route-steps .current b, .route-steps .done b { color: white; border-color: var(--accent); background: var(--accent); }
.route-steps .current small { color: var(--ink); }
.guide-card { display: flex; align-items: center; gap: 12px; padding: 13px; border-radius: 20px; background: #eef3e9; }
.guide-card img { flex: 0 0 76px; width: 76px; height: 82px; object-fit: contain; }
.guide-card p { display: grid; gap: 4px; margin: 0; }
.guide-card small { color: var(--accent); font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.guide-card strong { font-size: 15px; }
.guide-card span { color: var(--muted); font-size: 11px; line-height: 1.35; }
.dialogue-panel { overflow: hidden; }
.place-scene { position: relative; min-height: 315px; padding: 25px; overflow: hidden; background: linear-gradient(180deg, var(--sky) 0 72%, #c79968 72%); }
.place-scene::before { content: ""; position: absolute; width: 310px; height: 310px; right: -35px; top: 20px; border-radius: 50%; background: #fff8dc8c; }
.place-icon { position: absolute; right: 38px; bottom: 25px; font-size: 128px; filter: drop-shadow(0 10px 5px #4a4a4230); opacity: .83; }
.scene-label { position: relative; z-index: 2; display: inline-flex; min-height: 39px; align-items: center; padding: 0 13px; border-radius: 12px; color: white; background: var(--accent); font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.npc { position: absolute; z-index: 2; left: 30px; bottom: 23px; display: grid; justify-items: center; gap: 4px; }
.npc span { width: 75px; height: 75px; display: grid; place-items: center; border: 4px solid white; border-radius: 50%; background: #f7e4c4; font-size: 40px; }
.npc small { padding: 4px 8px; border-radius: 8px; background: #fff; font-weight: 800; }
.speech-bubble { position: absolute; z-index: 3; top: 80px; left: 115px; width: min(450px, calc(100% - 145px)); display: grid; gap: 8px; padding: 20px 22px; border: 4px solid #aaa8c4; border-radius: 25px; background: white; box-shadow: 0 8px 0 #4e5c4720; }
.speech-bubble small { color: var(--muted); font-weight: 800; }
.speech-bubble strong { font: 800 clamp(24px, 4vw, 35px)/1.16 Georgia, serif; }
.answer-panel { padding: 25px; }
.answer-heading { display: flex; justify-content: space-between; align-items: end; gap: 15px; }
.answer-heading h2 { margin: 0; font: 800 37px/1 Georgia, serif; }
.hint-button { min-height: 48px; padding: 0 16px; border: 0; border-radius: 15px; color: #685629; background: #fff0b9; cursor: pointer; font-weight: 900; }
.answer-list { display: grid; gap: 9px; margin-top: 20px; }
.answer { min-height: 61px; display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 12px; padding: 8px 15px; border: 2px solid #d9d8c7; border-radius: 18px; background: white; cursor: pointer; text-align: left; }
.answer > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: #edf2e9; font-weight: 900; }
.answer strong { font-size: 16px; }
.answer.wrong { border-color: #d79482; background: #fff0eb; }
.answer.correct { border-color: #70a382; background: #eaf6e9; }
.answer.hinted { border-color: #e2b247; box-shadow: 0 0 0 4px #ffdc7b55; }
.feedback { min-height: 85px; display: flex; align-items: center; gap: 13px; margin-top: 14px; padding: 13px 15px; border: 2px solid #d9d7c4; border-radius: 21px; background: #f4f2e8; }
.feedback > span { flex: 0 0 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: white; font-size: 23px; font-weight: 900; }
.feedback p { display: grid; gap: 5px; margin: 0; }
.feedback small { color: var(--muted); line-height: 1.35; }
.feedback.good { border-color: #84ac91; background: #e9f5e9; }
.feedback.retry { border-color: #d7a290; background: #fff1ec; }

.result-card { display: grid; grid-template-columns: .86fr 1.14fr; gap: 40px; padding: 55px; border: 4px solid #dcd5b8; border-radius: 48px; background: var(--paper); box-shadow: 0 18px 34px #4755421b; }
.passport-art { position: relative; min-height: 680px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; border-radius: 35px; background: linear-gradient(180deg, var(--sky), #fff0bc); }
.passport-art::before { content: ""; position: absolute; width: 310px; height: 310px; top: 145px; border: 7px dashed #ffffffa8; border-radius: 50%; }
.passport-art img { position: relative; z-index: 2; width: 370px; height: 470px; object-fit: contain; }
.stamp { position: absolute; z-index: 3; top: 32px; left: 35px; width: 180px; height: 180px; display: grid; place-items: center; align-content: center; gap: 4px; border: 6px double var(--accent); border-radius: 50%; color: var(--accent); transform: rotate(-8deg); background: #fffdf8c9; }
.stamp small { font-size: 12px; font-weight: 900; letter-spacing: .15em; }
.stamp strong { font: 900 48px/1 Georgia, serif; }
.stamp i { font-size: 31px; font-style: normal; }
.ticket { position: absolute; z-index: 4; left: 25px; right: 25px; bottom: 28px; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 18px; border: 3px solid #d2c89c; border-radius: 18px; background: white; transform: rotate(2deg); }
.ticket small { color: var(--accent); font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.ticket strong { grid-row: 2; font: 800 27px/1 Georgia, serif; }
.ticket i { grid-row: 1 / 3; align-self: center; font-style: normal; font-weight: 900; }
.result-copy { align-self: center; min-width: 0; }
.result-copy h1 { margin: 0; font: 800 clamp(49px, 6vw, 73px)/.95 Georgia, serif; letter-spacing: -.045em; }
.result-copy > p:not(.eyebrow) { color: var(--muted); font-weight: 700; line-height: 1.45; }
.phrase-book { display: grid; gap: 7px; margin: 22px 0; }
.phrase-book > span { display: grid; grid-template-columns: 37px 1fr; align-items: center; gap: 9px; padding: 9px 11px; border: 2px solid #dfddcd; border-radius: 14px; background: #f7f5ed; }
.phrase-book b { font-size: 22px; }
.phrase-book p { display: grid; gap: 2px; margin: 0; }
.phrase-book strong { font-size: 13px; }
.phrase-book small { color: var(--muted); }
.result-stars { color: #e6b73e; font-size: 35px; letter-spacing: 5px; }
.result-stars span { color: #dcd9c8; }
.result-stats { display: flex; gap: 14px; margin: 19px 0; }
.result-stats > span { min-width: 94px; display: grid; gap: 3px; padding: 12px; border-radius: 16px; background: #eef3e9; text-align: center; }
.result-stats strong { font: 800 27px/1 Georgia, serif; }
.result-stats small { color: var(--muted); font-weight: 800; }
.result-actions { display: flex; gap: 10px; }
.error-card { min-height: 420px; display: grid; place-items: center; align-content: center; gap: 18px; border-radius: 40px; background: white; }
.error-card span { font-size: 70px; }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }
  .hero-copy { padding: 55px; }
  .hero-map { min-height: 520px; }
  .steps-grid { grid-template-columns: 1fr; }
  .quest-workspace { grid-template-columns: 1fr; }
  .route-panel { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 17px; align-items: center; }
  .route-steps { grid-template-columns: repeat(5, 1fr); margin: 0; }
  .route-steps::before { left: 10%; right: 10%; top: 21px; bottom: auto; border-left: 0; border-top: 3px dashed #d2d4c4; }
  .route-steps > span { display: grid; justify-items: center; gap: 5px; }
  .route-steps small { text-align: center; font-size: 10px; }
  .result-card { grid-template-columns: 1fr; }
  .passport-art { min-height: 540px; }
}

@media (max-width: 700px) {
  .app { width: min(1120px, calc(100% - 20px)); padding-top: 10px; }
  .topbar { min-height: 64px; margin-bottom: 14px; }
  .brand-mark { width: 49px; height: 45px; }
  .brand strong { font-size: 19px; }
  .brand small { display: none; }
  .passport-pill { display: none; }
  .hero { border-width: 3px; border-radius: 37px; }
  .hero-copy { padding: 38px 24px 32px; }
  .hero h1 { font-size: clamp(43px, 14vw, 65px); }
  .hero-copy > p:not(.eyebrow) { font-size: 17px; }
  .hero-map { min-height: 440px; }
  .hero-map img { width: 220px; height: 240px; }
  .route-line { left: 20px; width: 300px; }
  .map-point.newyork, .map-point.singapore { right: 15px; }
  .map-point.london, .map-point.sydney { left: 15px; }
  .how-section, .journeys-section { padding-top: 57px; }
  .section-heading { display: grid; }
  .journeys-grid { grid-template-columns: 1fr; }
  .journey-card { min-height: 410px; }
  .adult-note { padding: 17px; align-items: flex-start; }
  .adult-note > span { flex-basis: 52px; height: 52px; }
  .game-head { align-items: start; }
  .game-head h1 { font-size: 43px; }
  .round-badge { flex-basis: 76px; height: 74px; }
  .route-panel { grid-template-columns: 1fr; padding: 14px; }
  .route-steps { order: 3; }
  .guide-card { display: none; }
  .dialogue-panel { border-radius: 30px; }
  .place-scene { min-height: 360px; padding: 15px; }
  .place-icon { right: 15px; bottom: 25px; font-size: 100px; }
  .npc { left: 15px; bottom: 18px; }
  .speech-bubble { top: 69px; left: 15px; right: 15px; width: auto; padding: 17px; }
  .answer-panel { padding: 20px 13px; }
  .answer-heading h2 { font-size: 31px; }
  .answer { min-height: 60px; grid-template-columns: 39px 1fr; padding: 8px 10px; }
  .answer strong { font-size: 14px; }
  .feedback { align-items: flex-start; flex-wrap: wrap; }
  .feedback .primary-button { width: 100%; margin-left: 0; }
  .result-card { padding: 16px 13px 28px; border-radius: 34px; }
  .passport-art { min-height: 475px; }
  .passport-art img { height: 380px; }
  .stamp { width: 140px; height: 140px; }
  .stamp strong { font-size: 38px; }
  .result-copy h1 { font-size: 51px; }
  .result-stats { flex-wrap: wrap; }
  .result-stats > span { flex: 1; }
  .result-actions { display: grid; }
  .result-actions button { width: 100%; }
}

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