:root {
  color-scheme: light;
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", Arial, sans-serif;
  --ink: #244e49;
  --muted: #71827e;
  --paper: #fffdf7;
  --line: #ddd3b8;
  --green: #4d9b76;
  --green-dark: #327357;
  --red: #d76f62;
  --blue: #4f91b6;
  --navy: #274f67;
  --gold: #efb84a;
  --shadow: 0 20px 46px rgba(52, 72, 66, .15);
}
* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: #f2f5e9; }
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: clip;
  color: var(--ink);
  background:
    radial-gradient(circle at 7% 10%, rgba(239, 184, 74, .18) 0 140px, transparent 143px),
    radial-gradient(circle at 94% 14%, rgba(97, 157, 142, .15) 0 185px, transparent 188px),
    linear-gradient(145deg, #f1f7e9, #fff9ef 54%, #eef2f7);
}
.page-pattern {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .18;
  background-image: radial-gradient(circle, rgba(65, 100, 88, .2) 1.2px, transparent 1.4px);
  background-size: 38px 38px;
  pointer-events: none;
}
button { color: inherit; font: inherit; }
button:not(:disabled) { cursor: pointer; }
button:disabled { cursor: default; }
button:focus-visible { outline: 4px solid rgba(239, 184, 74, .85); outline-offset: 4px; }
h1, h2, h3, p { margin-top: 0; }
.app { width: min(1120px, calc(100% - 32px)); min-height: 100vh; margin: 0 auto; padding: 20px 0 54px; }
.topbar, .brand, .topbar-actions, .hero-actions, .section-heading, .route-head, .route-foot,
.progress-row, .quiz-layout, .answer-card, .hints-heading, .feedback-card, .result-actions, .passport-heading {
  display: flex;
  align-items: center;
}
.topbar { min-height: 68px; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.brand { gap: 12px; padding: 0; text-align: left; background: transparent; border: 0; }
.brand-mark {
  display: grid;
  width: 57px;
  height: 57px;
  place-items: center;
  font-size: 29px;
  background: #fff0ca;
  border: 3px solid #dec896;
  border-radius: 19px;
  box-shadow: 0 8px 17px rgba(58, 79, 70, .13);
  rotate: -4deg;
}
.brand strong, .brand small { display: block; }
.brand strong { font-size: 24px; font-weight: 900; }
.brand small { margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.topbar-actions { gap: 9px; }
.passport-button, .sound-button, .back-button, .secondary-button {
  min-height: 49px;
  color: var(--ink);
  font-weight: 900;
  background: rgba(255, 253, 247, .95);
  border: 2px solid var(--line);
  border-radius: 17px;
}
.passport-button, .sound-button { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 15px; font-size: 13px; }
.passport-button b { color: var(--green-dark); }
.passport-button.is-active { background: #e8f2e6; border-color: #8bb89a; }
.back-button { width: 49px; padding: 0; font-size: 22px; }
.secondary-button { padding: 0 18px; }
.passport-button:hover, .sound-button:hover, .back-button:hover, .secondary-button:hover:not(:disabled) { border-color: #76a78c; }
.primary-button {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 22px;
  color: white;
  font-weight: 900;
  background: var(--green);
  border: 0;
  border-radius: 17px;
  box-shadow: 0 8px 0 var(--green-dark);
}
.primary-button:hover { background: #438f6a; }
.primary-button:active, .secondary-button:active { translate: 0 2px; }
.primary-button.compact { min-height: 45px; margin-left: auto; padding-inline: 18px; box-shadow: 0 5px 0 var(--green-dark); }
.eyebrow { margin: 0 0 8px; color: #39775e; font-family: Georgia, serif; font-size: 12px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }

.flag-wrap {
  position: relative;
  display: grid;
  width: min(100%, 430px);
  aspect-ratio: 3 / 2;
  place-items: center;
  overflow: hidden;
  background: #eee9db;
  border: 5px solid white;
  border-radius: 13px;
  box-shadow: 0 9px 18px rgba(35, 63, 69, .22);
}
.flag {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.flag.is-square { width: 66.666%; height: 100%; }
.flag-wrap.is-compact { width: 86px; border-width: 3px; border-radius: 7px; box-shadow: 0 5px 9px rgba(35, 63, 69, .18); }
.flag-russia { background: linear-gradient(to bottom, #fff 0 33.333%, #2356a2 33.333% 66.666%, #d9484c 66.666%); }
.flag-france { background: linear-gradient(to right, #1e4590 0 33.333%, #fff 33.333% 66.666%, #e4414a 66.666%); }
.flag-italy { background: linear-gradient(to right, #15915e 0 33.333%, #fff 33.333% 66.666%, #dd4044 66.666%); }
.flag-japan { background: #fff; }
.sun { position: absolute; top: 50%; left: 50%; width: 34%; aspect-ratio: 1; translate: -50% -50%; background: #cf3348; border-radius: 50%; }
.flag-germany { background: linear-gradient(to bottom, #181818 0 33.333%, #d23c40 33.333% 66.666%, #f0c64f 66.666%); }
.flag-canada { background: linear-gradient(to right, #d93843 0 25%, #fff 25% 75%, #d93843 75%); }
.maple { position: absolute; top: 50%; left: 50%; translate: -50% -50%; color: #d93843; font-size: clamp(25px, 8vw, 76px); line-height: 1; filter: saturate(1.5) hue-rotate(320deg); }
.flag-brazil { background: #25945f; }
.diamond { position: absolute; top: 50%; left: 50%; width: 48%; aspect-ratio: 1.45; translate: -50% -50%; rotate: 45deg; background: #f2cf4b; }
.diamond b { position: absolute; top: 50%; left: 50%; width: 58%; aspect-ratio: 1; translate: -50% -50%; background: #274b8f; border-radius: 50%; }
.flag-china { color: #f2cf4b; background: #dc3f43; }
.china-star { position: absolute; top: 10%; left: 9%; font-size: clamp(24px, 7vw, 70px); }
.china-stars { position: absolute; top: 9%; left: 31%; width: 26%; font-size: clamp(10px, 2.6vw, 25px); letter-spacing: .1em; line-height: 1.3; rotate: 18deg; }
.flag-india { background: linear-gradient(to bottom, #ed8a3e 0 33.333%, #fff 33.333% 66.666%, #22955f 66.666%); }
.wheel { position: absolute; top: 50%; left: 50%; translate: -50% -50%; color: #214c8c; font-size: clamp(24px, 7vw, 66px); font-style: normal; line-height: 1; }
.flag-usa { background: repeating-linear-gradient(to bottom, #c73e47 0 7.692%, #fff 7.692% 15.384%); }
.canton { position: absolute; top: 0; left: 0; width: 42%; height: 54%; padding: 3% 2%; color: white; font-size: clamp(6px, 1.5vw, 16px); font-style: normal; letter-spacing: .35em; line-height: 1.25; background: #294879; }
.flag-sweden { background: #3379aa; }
.flag-sweden::before, .flag-finland::before, .flag-norway::before { position: absolute; top: 0; bottom: 0; left: 31%; width: 12%; content: ""; background: #f2cb4f; }
.flag-sweden::after, .flag-finland::after, .flag-norway::after { position: absolute; top: 43%; right: 0; left: 0; height: 17%; content: ""; background: #f2cb4f; }
.flag-finland { background: #fff; }
.flag-finland::before, .flag-finland::after { background: #2962a1; }
.flag-norway { background: #d8444a; }
.flag-norway::before { left: 30%; width: 17%; background: white; }
.flag-norway::after { top: 39%; height: 24%; background: white; }
.flag-norway .cross-v { position: absolute; z-index: 2; top: 0; bottom: 0; left: 35%; width: 7%; background: #23477e; }
.flag-norway .cross-h { position: absolute; z-index: 2; top: 45%; right: 0; left: 0; height: 11%; background: #23477e; }
.flag-greece { background: repeating-linear-gradient(to bottom, #3475b5 0 11.111%, #fff 11.111% 22.222%); }
.greek-canton { position: absolute; top: 0; left: 0; width: 38%; height: 55.555%; background: #3475b5; }
.greek-canton::before { position: absolute; top: 0; bottom: 0; left: 41%; width: 18%; content: ""; background: white; }
.greek-canton::after { position: absolute; top: 40%; right: 0; left: 0; height: 20%; content: ""; background: white; }
.flag-spain { background: linear-gradient(to bottom, #c93943 0 25%, #f2c84f 25% 75%, #c93943 75%); }
.crest { position: absolute; top: 50%; left: 35%; translate: -50% -50%; color: #a93a3b; font-size: clamp(18px, 5vw, 49px); font-style: normal; }
.flag-united-kingdom {
  background:
    linear-gradient(30deg, transparent 43%, white 43% 49%, #d83d49 49% 53%, white 53% 59%, transparent 59%),
    linear-gradient(-30deg, transparent 43%, white 43% 49%, #d83d49 49% 53%, white 53% 59%, transparent 59%),
    #294879;
}
.uk-v { position: absolute; top: 0; bottom: 0; left: 43%; width: 14%; background: white; }
.uk-v::after { position: absolute; top: 0; bottom: 0; left: 24%; width: 52%; content: ""; background: #d83d49; }
.uk-h { position: absolute; top: 39%; right: 0; left: 0; height: 22%; background: white; }
.uk-h::after { position: absolute; top: 25%; right: 0; left: 0; height: 50%; content: ""; background: #d83d49; }
.flag-turkey { background: #d84048; }
.crescent { position: absolute; top: 50%; left: 43%; width: 39%; aspect-ratio: 1; translate: -50% -50%; background: white; border-radius: 50%; }
.crescent::after { position: absolute; top: 5%; left: 24%; width: 92%; aspect-ratio: 1; content: ""; background: #d84048; border-radius: 50%; }
.turkey-star { position: absolute; top: 50%; left: 63%; translate: -50% -50%; color: white; font-size: clamp(18px, 5vw, 48px); }
.flag-switzerland { background: #d93e47; }
.swiss-v { position: absolute; top: 20%; bottom: 20%; left: 40%; width: 20%; background: white; }
.swiss-h { position: absolute; top: 40%; right: 20%; left: 20%; height: 20%; background: white; }
.flag-argentina { background: linear-gradient(to bottom, #79c2e5 0 33.333%, #fff 33.333% 66.666%, #79c2e5 66.666%); }
.argentina-sun { position: absolute; top: 50%; left: 50%; translate: -50% -50%; color: #e6ab35; font-size: clamp(21px, 6vw, 57px); font-style: normal; line-height: 1; }
.flag-south-africa {
  background:
    linear-gradient(145deg, #1b1b1b 0 19%, #f0c642 19% 25%, transparent 25%),
    linear-gradient(145deg, transparent 0 30%, #159158 30% 57%, transparent 57%),
    linear-gradient(to bottom, #d84247 0 34%, #fff 34% 42%, #159158 42% 58%, #fff 58% 66%, #29508a 66%);
}
.flag-netherlands { background: linear-gradient(to bottom, #c9444b 0 33.333%, #fff 33.333% 66.666%, #294c86 66.666%); }
.flag-poland { background: linear-gradient(to bottom, #fff 0 50%, #d94456 50%); }
.flag-indonesia { background: linear-gradient(to bottom, #d63e47 0 50%, #fff 50%); }
.flag-austria { background: linear-gradient(to bottom, #d83e46 0 33.333%, #fff 33.333% 66.666%, #d83e46 66.666%); }
.flag-ireland { background: linear-gradient(to right, #1d955d 0 33.333%, #fff 33.333% 66.666%, #e68a3f 66.666%); }
.flag-belgium { background: linear-gradient(to right, #1c1c1c 0 33.333%, #f0ca45 33.333% 66.666%, #da4249 66.666%); }
.flag-ukraine { background: linear-gradient(to bottom, #3a84c3 0 50%, #f0ce49 50%); }
.flag-czechia { background: linear-gradient(to bottom, #fff 0 50%, #d6444c 50%); }
.flag-czechia::before { position: absolute; inset: 0 auto 0 0; width: 47%; content: ""; background: #2c5795; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.flag-australia { color: white; background: #29477f; }
.mini-uk {
  position: absolute;
  top: 0;
  left: 0;
  width: 43%;
  height: 48%;
  background:
    linear-gradient(30deg, transparent 42%, white 42% 49%, #d63f49 49% 54%, white 54% 61%, transparent 61%),
    linear-gradient(-30deg, transparent 42%, white 42% 49%, #d63f49 49% 54%, white 54% 61%, transparent 61%),
    linear-gradient(to right, transparent 40%, white 40% 60%, transparent 60%),
    linear-gradient(to bottom, transparent 36%, white 36% 64%, transparent 64%),
    #29477f;
}
.southern-stars { position: absolute; top: 18%; right: 8%; font-size: clamp(13px, 3.8vw, 35px); letter-spacing: .4em; line-height: 1.8; }
.flag-south-korea { background: #fff; }
.taegeuk { position: absolute; top: 50%; left: 50%; width: 32%; aspect-ratio: 1; translate: -50% -50%; background: linear-gradient(to bottom, #d8484d 0 50%, #3274b2 50%); border-radius: 50%; }
.trigram { position: absolute; color: #1f2529; font-size: clamp(15px, 4vw, 40px); line-height: 1; }
.trigram.one { top: 17%; left: 20%; rotate: -35deg; }
.trigram.two { right: 20%; bottom: 17%; rotate: -35deg; }

.hero {
  display: grid;
  min-height: 510px;
  align-items: center;
  grid-template-columns: .9fr 1.1fr;
  gap: 38px;
  padding: clamp(36px, 5vw, 62px);
  overflow: hidden;
  background: rgba(255, 253, 247, .97);
  border: 3px solid var(--line);
  border-radius: 46px;
  box-shadow: var(--shadow);
}
.hero h1 { margin-bottom: 18px; font-size: clamp(55px, 6.3vw, 78px); font-weight: 900; letter-spacing: -.055em; line-height: .92; }
.hero-copy > p:not(.eyebrow) { max-width: 560px; margin-bottom: 26px; color: var(--muted); font-size: 18px; font-weight: 800; line-height: 1.5; }
.hero-actions { flex-wrap: wrap; gap: 12px; }
.hero-stats { display: flex; gap: 22px; margin: 32px 0 0; padding: 0; list-style: none; }
.hero-stats b, .hero-stats small { display: block; }
.hero-stats b { font-family: Georgia, serif; font-size: 28px; }
.hero-stats small { color: var(--muted); font-size: 11px; font-weight: 900; }
.hero-board {
  position: relative;
  min-height: 390px;
  background:
    radial-gradient(circle at 53% 44%, rgba(255, 255, 255, .95) 0 8%, transparent 8.5%),
    radial-gradient(circle at 50% 50%, #a8d6c1 0 29%, transparent 29.5%),
    #dceee5;
  border: 9px solid white;
  border-radius: 40px;
  box-shadow: 0 22px 38px rgba(43, 76, 72, .22);
  rotate: 2deg;
}
.route-line { position: absolute; inset: 16% 12%; border: 4px dashed rgba(44, 107, 91, .36); border-radius: 50%; rotate: -8deg; }
.hero-flag { position: absolute; z-index: 3; padding: 7px 7px 19px; background: white; border-radius: 9px; box-shadow: 0 8px 16px rgba(42, 75, 69, .2); }
.hero-flag .flag-wrap { width: 108px; }
.hero-flag small { position: absolute; right: 0; bottom: 4px; left: 0; color: #5f726d; font-size: 8px; font-weight: 900; letter-spacing: .12em; text-align: center; }
.hero-flag.one { top: 25px; left: 28px; rotate: -7deg; }
.hero-flag.two { right: 22px; bottom: 25px; rotate: 5deg; }
.hero-flag.three { top: 38px; right: 24px; rotate: 8deg; }
.hero-globe { position: absolute; top: 50%; left: 50%; z-index: 2; translate: -50% -50%; font-size: 92px; filter: drop-shadow(0 8px 5px rgba(31, 86, 72, .2)); }
.passport-stamp { position: absolute; bottom: 26px; left: 30px; display: grid; width: 82px; height: 82px; place-items: center; align-content: center; color: #ad544b; background: rgba(255, 248, 222, .9); border: 5px double #c36d62; border-radius: 50%; rotate: -12deg; }
.passport-stamp b, .passport-stamp small { display: block; }
.passport-stamp b { font-family: Georgia, serif; font-size: 28px; }
.passport-stamp small { font-size: 10px; font-weight: 900; }
.how-note { display: grid; align-items: center; grid-template-columns: 58px 1fr; gap: 14px; margin-top: 18px; padding: 16px 20px; background: #fff3cf; border: 2px solid #e8ce82; border-radius: 23px; }
.how-note > span { display: grid; width: 52px; height: 52px; place-items: center; font-size: 28px; background: white; border-radius: 16px; }
.how-note p { margin: 0; }
.how-note strong, .how-note small { display: block; }
.how-note small { margin-top: 4px; color: #756b50; font-weight: 800; line-height: 1.4; }

.routes-section { margin-top: 48px; }
.section-heading { justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.section-heading h2 { max-width: 700px; margin: 0; font-size: clamp(34px, 4vw, 48px); letter-spacing: -.035em; }
.section-heading > p { max-width: 300px; margin: 0; color: var(--muted); font-weight: 900; line-height: 1.45; text-align: right; }
.routes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.route-card { min-height: 380px; padding: 25px; text-align: left; background: var(--paper); border: 3px solid var(--line); border-radius: 30px; box-shadow: 0 10px 0 #d8d2bd; transition: translate .2s ease, border-color .2s ease; }
.route-card:hover { translate: 0 -5px; }
.route-card.green:hover { border-color: #83b99c; }
.route-card.blue:hover { border-color: #78b3d1; }
.route-card.coral:hover { border-color: #df8e81; }
.route-head { justify-content: space-between; margin-bottom: 20px; }
.route-head em { color: var(--muted); font-size: 12px; font-style: normal; font-weight: 900; }
.route-icon { display: grid; width: 59px; height: 59px; place-items: center; font-size: 29px; background: #e7f3e8; border: 3px solid #b9d9c2; border-radius: 19px; }
.route-card.blue .route-icon { background: #e6f2f8; border-color: #bad9e8; }
.route-card.coral .route-icon { background: #fff0ed; border-color: #e8c0b8; }
.route-card > small { color: #478168; font-weight: 900; }
.route-card > strong { display: block; margin: 7px 0 10px; font-size: 25px; }
.route-card > p { min-height: 63px; margin: 0; color: var(--muted); font-size: 14px; font-weight: 800; line-height: 1.45; }
.sample-flags { display: flex; gap: 7px; margin-top: 17px; }
.sample-flags .flag-wrap { width: 65px; }
.route-foot { justify-content: space-between; margin-top: 21px; color: #c38b29; font-weight: 900; }
.route-foot b { color: var(--ink); font-size: 13px; }

.game-shell, .passport-shell { padding: clamp(25px, 4vw, 42px); background: rgba(255, 253, 247, .97); border: 3px solid var(--line); border-radius: 38px; box-shadow: var(--shadow); }
.progress-row { justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.progress-row > div > strong, .progress-row > div > small { display: block; }
.progress-row > div > strong { font-size: 18px; }
.progress-row > div > small { max-width: 760px; margin-top: 5px; color: var(--muted); font-weight: 800; line-height: 1.45; }
.round-badge { display: grid; min-width: 82px; height: 82px; place-items: center; align-content: center; color: white; font-family: Georgia, serif; font-size: 29px; font-weight: 900; background: var(--navy); border: 6px solid #cfe0e7; border-radius: 50%; }
.round-badge small { display: block; font-family: inherit; font-size: 10px; }
.quiz-layout { align-items: stretch; gap: 25px; }
.flag-desk { position: relative; display: grid; min-width: 0; flex: .88; place-items: center; padding: 48px 31px 36px; background: #dcebe2; border: 3px solid #bfd3c7; border-radius: 30px; box-shadow: inset 0 -8px 0 rgba(56, 97, 82, .08); }
.flag-desk::before { position: absolute; inset: 15px; content: ""; border: 2px dashed rgba(58, 102, 87, .22); border-radius: 21px; }
.flag-desk > .flag-wrap { z-index: 2; }
.desk-label { position: absolute; top: 16px; left: 23px; z-index: 3; color: #4a7868; font-size: 10px; font-weight: 900; letter-spacing: .15em; }
.flag-pole { position: absolute; top: 37px; bottom: 23px; left: 24px; z-index: 1; width: 8px; background: #866c4f; border-radius: 8px; }
.flag-pole::after { position: absolute; bottom: -3px; left: -13px; width: 34px; height: 9px; content: ""; background: #866c4f; border-radius: 50%; }
.desk-stamp { position: absolute; right: 17px; bottom: 14px; z-index: 3; display: grid; width: 48px; height: 48px; place-items: center; color: #b36157; font-family: Georgia, serif; font-size: 24px; font-weight: 900; border: 4px double #ca8278; border-radius: 50%; rotate: -8deg; }
.question-panel { min-width: 0; flex: 1.12; }
.question-panel h1 { margin: 4px 0 8px; font-size: clamp(35px, 4.5vw, 52px); letter-spacing: -.04em; line-height: 1.05; }
.question-panel > p { margin-bottom: 20px; color: var(--muted); font-weight: 800; line-height: 1.45; }
.answer-grid { display: grid; gap: 10px; }
.answer-card { min-height: 78px; gap: 13px; padding: 12px 15px; text-align: left; background: white; border: 3px solid #d9d5c8; border-radius: 20px; box-shadow: 0 6px 0 #d8d1bd; }
.answer-card:hover:not(:disabled) { border-color: #74a68a; translate: 0 -2px; }
.answer-card > span { display: grid; min-width: 50px; height: 50px; place-items: center; color: var(--navy); font-family: Georgia, serif; font-size: 17px; font-weight: 900; background: #edf4ea; border-radius: 15px; }
.answer-card strong { flex: 1; font-size: 19px; }
.answer-card i { font-size: 22px; font-style: normal; font-weight: 900; }
.answer-card.is-wrong { color: #8f453e; background: #fff0ed; border-color: #e49a90; box-shadow: none; }
.answer-card.is-correct { color: #286448; background: #e7f4e9; border-color: #79b18c; box-shadow: none; }
.hints-panel { margin-top: 22px; padding: 18px; background: #f8f4e7; border: 2px solid #e0d7b9; border-radius: 25px; }
.hints-heading { justify-content: space-between; gap: 15px; margin-bottom: 14px; }
.hints-heading strong, .hints-heading small { display: block; }
.hints-heading strong { font-size: 18px; }
.hints-heading small { margin-top: 3px; color: var(--muted); font-weight: 900; }
.hint-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hint-card { display: grid; min-height: 91px; align-items: center; grid-template-columns: 38px 1fr; gap: 10px; padding: 12px; background: #fff; border: 2px solid #ded8c6; border-radius: 17px; }
.hint-card > span { display: grid; width: 36px; height: 36px; place-items: center; color: white; font-family: Georgia, serif; font-weight: 900; background: #4e8e72; border-radius: 50%; }
.hint-card p { margin: 0; }
.hint-card small, .hint-card strong { display: block; }
.hint-card small { color: #8a7953; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.hint-card strong { margin-top: 4px; font-size: 12px; line-height: 1.35; }
.hint-card.is-locked { color: #9a9b94; background: #eeece4; }
.hint-card.is-locked > span { background: #b5b3aa; }
.feedback-card { gap: 14px; min-height: 84px; margin-top: 16px; padding: 15px 17px; background: #f3f6f2; border: 2px solid #d7ded5; border-radius: 22px; }
.feedback-card[data-kind="error"] { background: #fff0ed; border-color: #e5a59c; }
.feedback-card[data-kind="hint"] { background: #fff6d6; border-color: #e7cc74; }
.feedback-card[data-kind="success"] { background: #e8f5ea; border-color: #9fc9aa; }
.feedback-card > span { display: grid; min-width: 50px; height: 50px; place-items: center; font-size: 26px; background: white; border-radius: 15px; }
.feedback-card p { flex: 1; margin: 0; }
.feedback-card strong, .feedback-card small { display: block; }
.feedback-card small { margin-top: 4px; color: var(--muted); font-weight: 800; line-height: 1.4; }

.result-card { max-width: 850px; margin: 55px auto 0; padding: clamp(34px, 6vw, 64px); text-align: center; background: var(--paper); border: 3px solid var(--line); border-radius: 43px; box-shadow: var(--shadow); }
.result-stamp { display: flex; align-items: center; justify-content: center; gap: 15px; margin-bottom: 20px; padding: 12px; color: white; background: var(--navy); border-radius: 22px; }
.result-stamp span { font-size: 39px; }
.result-stamp b { font-size: 12px; letter-spacing: .16em; }
.result-card h1 { margin-bottom: 12px; font-size: clamp(40px, 6vw, 62px); line-height: 1.03; }
.result-card > p:not(.eyebrow) { color: var(--muted); font-size: 17px; font-weight: 800; line-height: 1.5; }
.stars { margin: 17px 0; font-size: 48px; letter-spacing: 7px; }
.stars span { color: #ddd8c8; }
.stars .earned { color: var(--gold); text-shadow: 0 4px 0 #cc9233; }
.result-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 24px 0; }
.result-stats span { padding: 14px; background: #eef5eb; border: 2px solid #d6e2d2; border-radius: 18px; }
.result-stats b, .result-stats small { display: block; }
.result-stats b { font-size: 25px; }
.result-stats small { margin-top: 4px; color: var(--muted); font-weight: 800; }
.result-flags { display: flex; justify-content: center; gap: 8px; margin: 20px 0 27px; }
.result-flags .flag-wrap { width: 82px; }
.result-actions { justify-content: center; flex-wrap: wrap; gap: 13px; }

.passport-heading { justify-content: space-between; gap: 25px; margin-bottom: 24px; }
.passport-heading h1 { margin-bottom: 8px; font-size: clamp(38px, 5vw, 58px); }
.passport-heading p:not(.eyebrow) { margin: 0; color: var(--muted); font-weight: 800; }
.passport-heading > strong { display: grid; min-width: 100px; height: 84px; place-items: center; align-content: center; font-family: Georgia, serif; font-size: 30px; background: #e4f0e5; border: 2px solid #bcd6bf; border-radius: 20px; }
.passport-heading > strong small { font-family: inherit; font-size: 11px; }
.passport-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }
.passport-card { position: relative; display: grid; min-height: 155px; align-items: center; grid-template-columns: 105px 1fr; gap: 15px; padding: 20px; background: #edf6ed; border: 2px solid #bed8c2; border-radius: 24px; }
.passport-card.is-locked { color: #8c928d; background: #efeee7; border-color: #d8d4c7; }
.passport-number { position: absolute; top: 9px; right: 12px; color: var(--muted); font-size: 10px; font-weight: 900; }
.passport-card .flag-wrap { width: 100px; }
.locked-flag { display: grid; width: 100px; aspect-ratio: 3 / 2; place-items: center; color: #8e8f89; font-family: Georgia, serif; font-size: 31px; font-weight: 900; background: #dedcd4; border: 4px solid white; border-radius: 10px; }
.passport-card small, .passport-card strong { display: block; }
.passport-card small { color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.passport-card strong { margin-top: 3px; font-size: 20px; }
.passport-card p { margin: 7px 0 0; color: var(--muted); font-size: 13px; font-weight: 800; line-height: 1.4; }

.qa-report { max-width: 860px; margin: 35px auto; padding: clamp(25px, 4vw, 44px); background: white; border: 3px solid #b8d5bf; border-radius: 33px; box-shadow: var(--shadow); }
.qa-report.has-failures { border-color: #e4a198; }
.qa-report h1 { margin-bottom: 8px; font-size: clamp(38px, 5vw, 58px); }
.qa-summary { color: var(--muted); font-weight: 900; }
.qa-report ul { display: grid; gap: 8px; margin: 24px 0; padding: 0; list-style: none; }
.qa-report li { display: grid; align-items: center; grid-template-columns: 30px 1fr auto; gap: 10px; padding: 11px 13px; background: #f2f8f1; border-radius: 13px; }
.qa-report li.fail { background: #fff0ed; }
.qa-report li > span { display: grid; width: 25px; height: 25px; place-items: center; color: white; font-weight: 900; background: var(--green); border-radius: 50%; }
.qa-report li.fail > span { background: var(--red); }
.qa-report li small { color: var(--muted); }
.qa-actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; }
  .hero-copy { text-align: center; }
  .hero-copy > p:not(.eyebrow) { margin-inline: auto; }
  .hero-actions, .hero-stats { justify-content: center; }
  .hero-board { width: min(650px, 100%); margin-inline: auto; }
  .routes-grid { grid-template-columns: 1fr; }
  .route-card { min-height: 0; }
  .route-card > p { min-height: 0; }
  .quiz-layout { align-items: stretch; flex-direction: column; }
  .flag-desk { min-height: 380px; }
  .flag-desk > .flag-wrap { width: min(440px, 82%); }
}

@media (max-width: 700px) {
  .app { width: min(1120px, calc(100% - 20px)); padding-top: 10px; }
  .topbar { min-height: 58px; margin-bottom: 12px; }
  .brand-mark { width: 49px; height: 49px; font-size: 24px; }
  .brand strong { font-size: 18px; }
  .brand small { display: none; }
  .passport-button, .sound-button { width: 49px; padding: 0; }
  .passport-button > span:last-child, .sound-button > span:last-child { display: none; }
  .hero { padding: 28px 20px 40px; border-radius: 32px; }
  .hero h1 { font-size: clamp(49px, 15vw, 64px); }
  .hero-copy > p:not(.eyebrow) { font-size: 16px; }
  .hero-board { min-height: 330px; border-width: 6px; border-radius: 31px; }
  .hero-flag .flag-wrap { width: 82px; }
  .hero-globe { font-size: 73px; }
  .passport-stamp { bottom: 18px; left: 18px; width: 70px; height: 70px; }
  .how-note { grid-template-columns: 48px 1fr; padding: 13px; }
  .how-note > span { width: 45px; height: 45px; }
  .section-heading, .passport-heading { align-items: flex-start; flex-direction: column; }
  .section-heading > p { text-align: left; }
  .routes-section { margin-top: 35px; }
  .route-card { padding: 21px; border-radius: 25px; }
  .game-shell, .passport-shell { margin-inline: -5px; padding: 20px 13px; border-radius: 29px; }
  .progress-row { align-items: flex-start; }
  .round-badge { min-width: 67px; height: 67px; font-size: 23px; }
  .flag-desk { min-height: 285px; padding: 42px 20px 27px; border-radius: 24px; }
  .flag-desk > .flag-wrap { width: min(390px, 85%); }
  .question-panel h1 { font-size: 34px; text-align: center; }
  .question-panel > p { text-align: center; }
  .answer-card { min-height: 70px; }
  .answer-card > span { min-width: 45px; height: 45px; }
  .hints-heading { align-items: stretch; flex-direction: column; }
  .hint-grid { grid-template-columns: 1fr; }
  .hint-card { min-height: 76px; }
  .feedback-card { align-items: flex-start; flex-wrap: wrap; }
  .feedback-card .compact { width: 100%; margin-left: 0; }
  .result-card { margin-top: 25px; padding: 32px 20px; border-radius: 32px; }
  .result-stats { grid-template-columns: 1fr; }
  .result-flags .flag-wrap:nth-child(n+4) { display: none; }
  .result-actions { align-items: stretch; flex-direction: column; }
  .passport-grid { grid-template-columns: 1fr; }
  .qa-report li { grid-template-columns: 30px 1fr; }
  .qa-report li small { grid-column: 2; }
}

@media (max-width: 410px) {
  .hero-actions > * { width: 100%; }
  .hero h1 { font-size: 51px; }
  .hero-stats { justify-content: space-between; }
  .hero-stats li { min-width: 0; }
  .hero-board { min-height: 295px; }
  .hero-flag .flag-wrap { width: 70px; }
  .hero-flag.one { left: 15px; }
  .hero-flag.two, .hero-flag.three { right: 13px; }
  .route-card > strong { font-size: 23px; }
  .sample-flags .flag-wrap { width: 58px; }
  .progress-row > div > small { font-size: 12px; }
  .flag-desk { min-height: 245px; }
  .question-panel h1 { font-size: 30px; }
  .answer-card strong { font-size: 17px; }
  .passport-card { grid-template-columns: 85px 1fr; padding: 16px; }
  .passport-card .flag-wrap, .locked-flag { width: 82px; }
  .passport-card strong { font-size: 18px; }
}

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