:root {
  --bg: #f3f6fb;
  --card: #fff;
  --line: #dbe4f0;
  --text: #19324a;
  --muted: #61758a;
  --accent: #2b73ff;
  --accent-2: #1f5fe0;
  --good: #22a06b;
  --bad: #d63c3c;
  --warn: #f7b955;
  --shadow: 0 16px 40px rgba(20,40,70,.08);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  color: var(--text);
  background: linear-gradient(180deg, #eef4ff, #f7f9fc 240px);
}
button, input { font: inherit; }
button {
  border: 0;
  border-radius: 18px;
  padding: .95rem 1.1rem;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
button.secondary { background: #eef4ff; color: var(--text); }
input {
  width: 100%; border: 1px solid var(--line); border-radius: 16px; padding: 1rem; background: #fff;
}
.app-shell { max-width: 1500px; margin: 0 auto; padding: 1rem; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow); padding: 1rem;
}
.kid-hero {
  display: flex; justify-content: space-between; gap: 1rem; align-items: start; padding: .5rem 0 1rem;
}
.hero-copy h1 { margin: .35rem 0 .55rem; font-size: clamp(2rem, 3.6vw, 3.3rem); line-height: 1.02; max-width: 11ch; }
.hero-copy p { margin: 0; color: var(--muted); max-width: 58ch; font-size: 1.02rem; }
.eyebrow { display: inline-block; color: var(--accent); font-size: .78rem; font-weight: 900; letter-spacing: .11em; }
.hero-stats-big { display: flex; gap: .8rem; flex-wrap: wrap; justify-content: flex-end; }
.pill {
  min-width: 112px; background: rgba(255,255,255,.92); border: 1px solid var(--line); border-radius: 22px; padding: .9rem 1rem; box-shadow: var(--shadow); display: grid; gap: .15rem; text-align: center;
}
.pill span { font-size: 1.45rem; font-weight: 900; }
.pill small { color: var(--muted); font-weight: 700; }
.exam-banner {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; background: linear-gradient(90deg, #fffaf0, #fff); 
}
.exam-banner p { margin: .25rem 0 0; color: var(--muted); }
.exam-badge {
  background: #eef4ff; color: var(--text); border-radius: 999px; padding: .8rem 1rem; font-weight: 900; white-space: nowrap;
}
.kid-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1rem; align-items: start; }
.map-stage { min-height: 78vh; }
.stage-top { display: flex; justify-content: space-between; gap: 1rem; align-items: start; margin-bottom: .8rem; }
.challenge-title { color: var(--muted); font-weight: 800; margin-bottom: .35rem; }
.challenge-card { min-height: 92px; display: grid; gap: .5rem; align-content: start; }
.challenge-big { font-size: 1.6rem; font-weight: 900; line-height: 1.05; }
.challenge-sub { color: var(--muted); font-size: 1.05rem; }
.tablet-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.progress-wrap { display: grid; gap: .45rem; }
.progress-wrap-big { margin-bottom: .9rem; }
.progress-bar { height: 14px; background: #edf2f8; border-radius: 999px; overflow: hidden; }
#progressFill { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), #58a5ff); }
.map-wrapper {
  position: relative; background: radial-gradient(circle at top, #f8fbff, #eef4fb); border: 1px solid var(--line); border-radius: 20px; padding: .65rem;
}
.kid-map-wrapper { min-height: 70vh; }
#mapSvg { width: 100%; height: 70vh; display: block; }
.province { fill: #d7e7ff; stroke: #fff; stroke-width: 1.2; cursor: pointer; transition: transform .12s ease, fill .12s ease, opacity .12s ease; }
.province:hover { fill: #b7d2ff; }
.province.target { fill: #ffd36c; }
.province.correct { fill: #57c48d; }
.province.wrong { fill: #ff8f8f; }
.province.dimmed { opacity: .45; }
.community-outline { fill: none; stroke: #233f66; stroke-width: 2.2; opacity: .22; pointer-events: none; }
.floating-feedback { position: absolute; right: 1rem; top: 1rem; padding: .85rem 1rem; border-radius: 16px; font-weight: 900; color: #fff; max-width: min(380px, 70%); }
.floating-feedback.good { background: var(--good); }
.floating-feedback.bad { background: var(--bad); }
.hidden { display: none; }
.side-panel-stack { display: grid; gap: 1rem; }
.mode-grid-large { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.mode { text-align: left; background: #f4f8ff; color: var(--text); }
.mode.active { background: var(--accent); color: #fff; }
.exam-mode { background: #fff6e4; color: #8a5a00; }
.answer-actions { margin-top: .75rem; display: flex; gap: .6rem; }
.info-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: .9rem; }
.tab { background: #f4f8ff; color: var(--text); }
.tab.active { background: var(--accent); color: #fff; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.detail-box, .review-list { color: var(--muted); display: grid; gap: .6rem; }
.detail-title { font-size: 1.3rem; font-weight: 900; color: var(--text); }
.fact-grid { display: grid; gap: .45rem; }
.fact-grid div span { color: var(--text); font-weight: 700; }
.tips { margin: 0; padding-left: 1.2rem; color: var(--muted); display: grid; gap: .6rem; }
.tips-big { font-size: 1rem; }
.review-chip { display: inline-flex; background: #fff4e5; border: 1px solid #f6d49f; color: #7f5200; padding: .45rem .7rem; border-radius: 999px; margin: .15rem; font-size: .95rem; }
.exam-summary { display: grid; gap: .5rem; }
.reward-good { color: var(--good); font-weight: 900; }
.reward-warn { color: #946200; font-weight: 900; }
.reward-bad { color: var(--bad); font-weight: 900; }
@media (max-width: 1100px) {
  .kid-layout { grid-template-columns: 1fr; }
  .side-panel-stack { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .kid-hero, .stage-top, .exam-banner { flex-direction: column; }
  .side-panel-stack { grid-template-columns: 1fr; }
  .mode-grid-large { grid-template-columns: 1fr 1fr; }
  #mapSvg, .kid-map-wrapper { height: 62vh; min-height: 62vh; }
}
@media (max-width: 700px) {
  .app-shell { padding: .6rem; }
  .hero-copy h1 { font-size: 1.8rem; max-width: none; }
  .mode-grid-large { grid-template-columns: 1fr; }
  .info-tabs { grid-template-columns: 1fr 1fr 1fr; }
  #mapSvg, .kid-map-wrapper { height: 52vh; min-height: 52vh; }
}