:root {
  --ink: #294e47;
  --muted: #71817b;
  --paper: #fffdf7;
  --cream: #fff4d7;
  --green: #519773;
  --green-dark: #34715a;
  --gold: #d8a647;
  --coral: #df755e;
  --line: #ded4b7;
  --shadow: 0 22px 54px rgba(46, 72, 58, .13);
  --route-color: #5f9a6f;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 14%, rgba(239, 185, 86, .18) 0 76px, transparent 77px),
    radial-gradient(circle at 92% 9%, rgba(91, 159, 120, .15) 0 98px, transparent 99px),
    #f4f1df;
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", Arial, sans-serif;
}
button, a { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible { outline: 4px solid rgba(70, 128, 171, .34); outline-offset: 3px; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
.app { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 22px 0 48px; }
.game-bar {
  display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 18px;
  margin-bottom: 16px; padding: 9px 13px; border: 1px solid rgba(111, 104, 75, .18);
  border-radius: 24px; background: rgba(255, 253, 247, .93); box-shadow: 0 12px 30px rgba(52, 76, 61, .08);
}
.game-brand { display: inline-flex; align-items: center; gap: 12px; padding: 3px; color: inherit; text-decoration: none; border-radius: 17px; }
.game-brand:hover { color: var(--green-dark); background: #edf5e8; }
.game-brand:focus-visible { outline-offset: 1px; }
.game-brand > span:last-child { display: grid; gap: 2px; }
.game-brand strong { font-size: 18px; }
.game-brand small { color: var(--muted); font-size: 12px; }
.game-icon { display: grid; width: 50px; height: 50px; place-items: center; border: 1px solid #c7ddd0; border-radius: 16px; background: #e8f3e9; }
.game-icon svg { width: 40px; height: 40px; }
.icon-path { fill: none; stroke: #d4b374; stroke-width: 7; stroke-linecap: round; }
.icon-gate { fill: none; stroke: #875c39; stroke-width: 3.2; stroke-linecap: round; }
.age-pill { flex: none; padding: 10px 15px; border-radius: 999px; background: #fff0bd; font-size: 13px; }
.screen { display: none; }
.screen.is-active { display: block; }
.home-screen, .routes-screen, .play-screen, .result-screen { border: 1px solid var(--line); border-radius: 34px; background: var(--paper); box-shadow: var(--shadow); overflow: hidden; }
.home-screen { display: none; grid-template-columns: 1.05fr .95fr; min-height: 648px; position: relative; }
.home-screen.is-active { display: grid; }
.hero-scene { position: relative; min-height: 500px; overflow: hidden; background: linear-gradient(155deg, #e7f2df 0 50%, #f7f0dd 50%); }
.hero-scene::before, .hero-scene::after { content: ""; position: absolute; border-radius: 50%; background: #8ebe79; border: 7px solid #6f7550; box-shadow: inset 0 0 0 5px rgba(255,255,255,.18); }
.hero-scene::before { width: 166px; height: 126px; left: 44px; bottom: 62px; }
.hero-scene::after { width: 134px; height: 104px; right: 35px; top: 50px; }
.hero-path { position: absolute; z-index: 1; height: 24px; border-radius: 999px; background: #d5bb82; box-shadow: inset 0 0 0 2px rgba(120,91,50,.14); }
.path-main { width: 430px; left: 58px; top: 275px; transform: rotate(-24deg); }
.path-side { width: 205px; left: 205px; top: 267px; transform: rotate(59deg); }
.hero-gate, .result-gate { position: absolute; z-index: 3; width: 76px; height: 70px; }
.hero-gate { left: 280px; top: 288px; transform: rotate(-30deg); }
.hero-gate i, .result-gate i { position: absolute; bottom: 0; width: 10px; height: 68px; border-radius: 5px 5px 2px 2px; background: #875a36; box-shadow: inset 2px 0 rgba(255,255,255,.2); }
.hero-gate i:first-child, .result-gate i:first-child { left: 4px; }
.hero-gate i:nth-child(2), .result-gate i:nth-child(2) { right: 4px; }
.hero-gate b, .result-gate b { position: absolute; left: 8px; right: 8px; height: 12px; border-radius: 4px; background: #a87340; border: 2px solid #6f482d; }
.hero-gate b:nth-of-type(1), .result-gate b:nth-of-type(1) { top: 17px; }
.hero-gate b:nth-of-type(2), .result-gate b:nth-of-type(2) { top: 40px; }
.hero-child { position: absolute; z-index: 4; width: 134px; left: 68px; bottom: 42px; }
.hero-parent { position: absolute; z-index: 4; width: 116px; right: 32px; top: 41px; transform: scaleX(-1); }
.hero-hedgehog { position: absolute; z-index: 4; width: 105px; left: 304px; bottom: 58px; transform: scaleX(-1); }
.hero-copy { position: relative; z-index: 4; display: flex; flex-direction: column; justify-content: center; padding: 46px 50px 156px; background: linear-gradient(145deg, rgba(255,253,247,.98), rgba(231,241,218,.96)); }
.eyebrow { margin-bottom: 10px; color: #8a6640; font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.hero-copy h1 { max-width: 520px; margin-bottom: 20px; font-size: clamp(40px, 4.6vw, 65px); line-height: .98; letter-spacing: -.045em; }
.hero-copy > p:not(.eyebrow) { max-width: 480px; margin-bottom: 22px; color: var(--muted); font-size: 17px; line-height: 1.55; }
.hero-facts, .result-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.hero-facts span, .result-facts span { padding: 8px 12px; border: 1px solid #dfe4d6; border-radius: 999px; background: rgba(255,255,255,.88); font-size: 12px; }
.primary-button, .secondary-button, .hint-button, .next-button, .route-button { min-height: 50px; border: 0; border-radius: 15px; font-weight: 800; cursor: pointer; transition: transform .18s, box-shadow .18s, filter .18s; }
.primary-button { padding: 0 22px; color: white; background: var(--green); box-shadow: 0 10px 20px rgba(52,113,90,.2); }
.hero-copy .primary-button { align-self: flex-start; }
.primary-button:hover, .route-button:hover { transform: translateY(-2px); filter: brightness(1.04); }
.secondary-button { padding: 0 20px; border: 1px solid #cfc5a8; background: #fffdf7; }
.how-strip { position: absolute; z-index: 5; display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; left: 38px; right: 38px; bottom: 28px; }
.how-strip article { display: flex; min-height: 82px; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid #ded3b4; border-radius: 18px; background: rgba(255,253,247,.96); }
.how-strip b { display: grid; width: 40px; height: 40px; flex: none; place-items: center; border-radius: 12px; color: #fff; background: var(--coral); }
.how-strip span { display: grid; gap: 3px; }
.how-strip strong { font-size: 13px; }
.how-strip small { color: var(--muted); font-size: 11px; }
.routes-screen, .play-screen { padding: 32px; }
.section-title, .task-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.section-title { margin-bottom: 24px; }
.section-title h2, .task-head h2 { margin-bottom: 0; font-size: clamp(31px,4vw,44px); letter-spacing: -.035em; }
.section-title > p { color: var(--muted); font-weight: 800; }
.route-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; align-items: stretch; }
.route-card { display: flex; min-width: 0; flex-direction: column; padding: 16px; border: 1px solid color-mix(in srgb, var(--route-color) 35%, #d7d0b9); border-radius: 24px; background: color-mix(in srgb, var(--route-color) 7%, #fffdf7); }
.route-art { position: relative; height: 156px; margin-bottom: 18px; overflow: hidden; border-radius: 18px; background-size: cover; background-position: center; }
.route-art::before { content: ""; position: absolute; width: 190px; height: 18px; left: 14px; top: 82px; border-radius: 50%; background: #d8bc80; transform: rotate(-18deg); }
.route-art::after { content: ""; position: absolute; width: 86px; height: 13px; left: 90px; top: 76px; border-radius: 50%; background: #d8bc80; transform: rotate(62deg); }
.mini-gate { position: absolute; z-index: 2; width: 42px; height: 39px; left: 112px; top: 63px; }
.mini-gate i { position: absolute; bottom: 0; width: 5px; height: 38px; background: #75492f; }
.mini-gate i:first-child { left: 0; }.mini-gate i:nth-child(2) { right: 0; }
.mini-gate b { position: absolute; left: 2px; right: 2px; height: 7px; background: #a06c3d; border: 1px solid #6e462d; }
.mini-gate b:nth-of-type(1) { top: 10px; }.mini-gate b:nth-of-type(2) { top: 24px; }
.route-art img { position: absolute; z-index: 2; width: 92px; right: 4px; bottom: -4px; }
.route-number { margin-bottom: 11px; color: var(--route-color); font-size: 11px; font-weight: 900; letter-spacing: .14em; }
.route-card h3 { min-height: 58px; margin-bottom: 8px; font-size: 23px; }
.route-card > p:not(.route-number) { min-height: 50px; margin-bottom: 18px; color: var(--muted); line-height: 1.45; }
.route-meta { display: flex; justify-content: space-between; margin-top: auto; margin-bottom: 9px; color: var(--route-color); font-size: 12px; font-weight: 800; }
.route-progress, .route-progress-line, .gate-meter > i { height: 8px; overflow: hidden; border-radius: 999px; background: #e7e8df; }
.route-progress i { display: block; width: var(--progress); height: 100%; background: var(--route-color); }
.route-button { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding: 0 16px; color: white; background: var(--route-color); }
.back-link { margin-top: 28px; border: 0; color: var(--green-dark); background: transparent; font-weight: 800; cursor: pointer; }
.task-head { justify-content: flex-start; }
.task-head > div { flex: 1; }
.round-button { display: grid; width: 52px; height: 52px; flex: none; place-items: center; border: 1px solid #d7ccb0; border-radius: 16px; background: #fff; cursor: pointer; }
.counter { padding: 10px 14px; border-radius: 999px; background: color-mix(in srgb, var(--route-color) 12%, #fff); font-weight: 800; }
.route-progress-line { margin: 16px 0; }
.route-progress-line i { display: block; width: 0; height: 100%; background: var(--route-color); transition: width .25s; }
.mission-strip { display: grid; grid-template-columns: 94px 1fr auto; align-items: center; gap: 18px; margin-bottom: 16px; padding: 15px 20px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(110deg,#eef5e6,#fff9e9); }
.mission-strip img { width: 82px; height: 82px; object-fit: contain; }
.mission-strip div > span { color: #8b6742; font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.mission-strip h3 { margin: 6px 0; font-size: 23px; }
.mission-strip p { margin-bottom: 0; color: var(--muted); }
.mission-strip > b { padding: 12px 14px; border-radius: 999px; color: #fff; background: var(--route-color); font-size: 12px; }
.map-card { padding: 16px; border: 1px solid var(--line); border-radius: 24px; background: #fffdf8; }
.trail-map { position: relative; width: min(860px,100%); aspect-ratio: 10 / 7; margin: 0 auto; overflow: hidden; border: 4px solid #fff; border-radius: 22px; background-image: linear-gradient(rgba(33,79,62,.09),rgba(33,79,62,.09)), var(--map-bg); background-size: cover; background-position: center; box-shadow: 0 0 0 1px #c7bda1; }
.trail-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.trail-shadow { fill: none; stroke: rgba(77,57,34,.24); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.trail-line { fill: none; stroke: #dfc589; stroke-width: 5.2; stroke-linecap: round; stroke-linejoin: round; }
.branch-line { stroke: #d8ba79; }
.map-character, .map-target { position: absolute; z-index: 4; width: 11%; height: 16%; object-fit: contain; transform: translate(-50%,-50%); filter: drop-shadow(0 5px 4px rgba(44,51,34,.22)); }
.map-target { width: 8.5%; height: 13%; }
.map-parent { width: 12%; height: 18%; }
.is-flipped { transform: translate(-50%,-50%) scaleX(-1); }
.gate-slot { position: absolute; z-index: 6; display: grid; width: 58px; height: 46px; place-items: center; transform: translate(-50%,-50%) rotate(var(--angle)); border: 3px dashed rgba(255,255,255,.95); border-radius: 14px; background: rgba(74,145,170,.45); box-shadow: 0 0 0 2px rgba(59,109,112,.5), 0 5px 9px rgba(45,58,45,.2); cursor: pointer; }
.gate-slot::before { content: "+"; display: grid; width: 30px; height: 30px; place-items: center; border-radius: 10px; color: white; background: rgba(55,124,132,.78); font-size: 24px; font-weight: 900; }
.gate-slot:not(.is-selected)::before { transform: rotate(calc(-1 * var(--angle))); }
.gate-slot:hover { filter: brightness(1.1); }
.gate-slot.is-selected { border-style: solid; border-color: #f5cf64; background: rgba(235,191,72,.42); }
.gate-slot.is-selected::before { content: ""; width: 42px; height: 35px; border-radius: 3px; background: repeating-linear-gradient(90deg,#a96f3b 0 5px,#6e482d 5px 7px); box-shadow: inset 0 0 0 3px #70482c, 0 0 0 3px #e8c25c; }
.gate-slot.is-wrong { animation: gate-shake .35s 2; box-shadow: 0 0 0 5px rgba(221,105,82,.48); }
.gate-slot.is-hinted { animation: gate-pulse .7s 2; }
.traveler { position: absolute; z-index: 8; width: 11%; height: 16%; pointer-events: none; transform: translate(-50%,-50%); transition: left .24s linear, top .24s linear; }
.traveler img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 5px 4px rgba(44,51,34,.25)); }
.map-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; padding-top: 12px; color: var(--muted); font-size: 11px; }
.map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.map-legend i { display: inline-block; width: 24px; height: 11px; }
.legend-path { border-radius: 999px; background: #d8bc7d; }
.legend-slot { border: 2px dashed #5e9ba5; border-radius: 4px; }
.legend-gate { background: repeating-linear-gradient(90deg,#a96f3b 0 4px,#6e482d 4px 6px); border: 1px solid #71492c; border-radius: 2px; }
.control-panel { display: grid; grid-template-columns: 1.35fr .72fr 1fr; gap: 14px; margin-top: 16px; }
.control-copy, .gate-meter, .feedback { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: #fffdf8; }
.control-copy h3 { margin-bottom: 9px; font-size: 23px; }
.control-copy p:last-child { margin-bottom: 0; color: var(--muted); line-height: 1.45; }
.gate-meter { display: flex; flex-direction: column; justify-content: center; }
.gate-meter span { margin-bottom: 8px; color: var(--muted); font-size: 12px; }
.gate-meter strong { margin-bottom: 13px; font-size: 21px; }
.gate-meter > i b { display: block; width: 0; height: 100%; background: var(--route-color); transition: width .2s; }
.feedback { display: flex; flex-direction: column; justify-content: center; border-left: 6px solid #e3b245; background: #fff2c9; }
.feedback b { margin-bottom: 7px; }.feedback span { font-size: 12px; line-height: 1.45; }
.feedback[data-tone="error"] { border-left-color: #dc6e58; background: #fde5de; }
.feedback[data-tone="success"] { border-left-color: #4f9a70; background: #e4f3e4; }
.feedback[data-tone="hint"] { border-left-color: #4f90b7; background: #e4f0f8; }
.control-actions { display: grid; grid-column: 1 / -1; grid-template-columns: 1fr .78fr; gap: 10px; }
.hint-button { border: 2px solid #e6ab3c; color: #936318; background: #fff2c8; }
.next-button { grid-column: 1 / -1; color: white; background: var(--route-color); }
.task-tabs { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; margin-top: 14px; }
.task-tabs button { min-height: 42px; border: 1px solid #ddd1b4; border-radius: 12px; background: #f8f4e9; cursor: pointer; }
.task-tabs button.is-current { color: #fff; background: var(--route-color); }
.task-tabs button.is-done { background: #e4f0e5; }
.result-screen { grid-template-columns: 1fr 1fr; min-height: 470px; }
.result-screen.is-active { display: grid; }
.result-scene { position: relative; overflow: hidden; background: linear-gradient(145deg,#cce8b7,#edf5dd); }
.result-path { position: absolute; width: 470px; height: 38px; left: 20px; top: 220px; border-radius: 999px; background: #d8ba7e; transform: rotate(-18deg); }
.result-gate { left: 230px; top: 158px; transform: rotate(24deg); }
.result-child, .result-parent { position: absolute; z-index: 4; width: 170px; height: 170px; object-fit: contain; bottom: 34px; }
.result-child { left: 40px; }.result-parent { right: 34px; transform: scaleX(-1); }
.result-copy { display: flex; flex-direction: column; justify-content: center; padding: 48px; }
.result-copy h2 { margin-bottom: 18px; font-size: clamp(38px,5vw,58px); line-height: 1.02; }
.result-copy > p:not(.eyebrow) { color: var(--muted); font-size: 17px; line-height: 1.55; }
.result-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@keyframes gate-shake { 25%{transform:translate(-50%,-50%) rotate(calc(var(--angle) - 5deg))} 75%{transform:translate(-50%,-50%) rotate(calc(var(--angle) + 5deg))} }
@keyframes gate-pulse { 50%{box-shadow:0 0 0 8px rgba(78,145,184,.35)} }
@media (max-width: 920px) {
  .home-screen.is-active { grid-template-columns: 1fr; }
  .hero-scene { min-height: 380px; }.hero-copy { padding: 38px 34px 230px; }
  .how-strip { grid-template-columns: 1fr; left: 25px; right: 25px; bottom: 24px; }
  .how-strip article { min-height: 58px; padding: 8px 12px; }.how-strip b { width: 34px; height: 34px; }
  .route-grid { grid-template-columns: 1fr; }.route-card h3,.route-card > p:not(.route-number) { min-height: 0; }
  .route-art { height: 200px; }
  .control-panel { grid-template-columns: 1fr 1fr; }.feedback { grid-column: 1 / -1; }
  .result-screen.is-active { grid-template-columns: 1fr; }.result-scene { min-height: 340px; }
}
@media (max-width: 600px) {
  .app { width: min(100% - 20px,1120px); padding-top: 10px; }
  .game-bar { min-height: 62px; border-radius: 18px; }.game-icon { width: 42px; height: 42px; border-radius: 13px; }.game-icon svg { width: 34px; height: 34px; }
  .game-brand { gap: 8px; }.game-brand strong { font-size: 15px; }.game-brand small { display: none; }.age-pill { padding: 8px 10px; font-size: 11px; }
  .home-screen,.routes-screen,.play-screen,.result-screen { border-radius: 26px; }
  .hero-scene { min-height: 300px; }.path-main { width: 300px; left: 25px; top: 170px; }.path-side { width: 140px; left: 120px; top: 175px; }
  .hero-scene::before { width: 110px; height: 84px; left: 15px; bottom: 30px; }.hero-scene::after { width: 96px; height: 72px; right: 14px; top: 26px; }
  .hero-child { width: 92px; left: 28px; bottom: 18px; }.hero-parent { width: 80px; right: 18px; top: 20px; }.hero-hedgehog { width: 72px; left: 198px; bottom: 28px; }
  .hero-gate { left: 175px; top: 172px; transform: scale(.72) rotate(-30deg); }
  .hero-copy { padding: 28px 20px 230px; }.hero-copy h1 { font-size: 40px; }.hero-copy > p:not(.eyebrow) { font-size: 15px; }
  .how-strip { left: 16px; right: 16px; bottom: 16px; }.routes-screen,.play-screen { padding: 16px; }
  .section-title { align-items: flex-start; }.section-title h2,.task-head h2 { font-size: 29px; }.section-title > p { max-width: 90px; text-align: right; font-size: 12px; }
  .route-art { height: 160px; }.task-head { gap: 10px; }.round-button { width: 44px; height: 44px; }.counter { padding: 8px 10px; font-size: 12px; }
  .mission-strip { grid-template-columns: 68px 1fr; gap: 10px; padding: 12px; }.mission-strip img { width: 64px; height: 64px; }.mission-strip h3 { font-size: 19px; }.mission-strip p { font-size: 12px; }.mission-strip > b { grid-column: 1 / -1; justify-self: start; padding: 8px 11px; }
  .map-card { padding: 8px; }.trail-map { border-width: 2px; border-radius: 17px; }
  .gate-slot { width: 38px; height: 32px; border-width: 2px; border-radius: 10px; }.gate-slot::before { width: 22px; height: 22px; border-radius: 7px; font-size: 18px; }.gate-slot.is-selected::before { width: 29px; height: 24px; }
  .map-character { width: 13%; height: 19%; }.map-target { width: 10%; height: 15%; }.map-parent { width: 14%; height: 20%; }
  .map-legend { gap: 8px 12px; font-size: 9px; }.control-panel { grid-template-columns: 1fr; }.feedback { grid-column: auto; }.control-copy,.gate-meter,.feedback { padding: 14px; }.control-copy h3 { font-size: 21px; }
  .control-actions { grid-template-columns: 1fr; }.hint-button,.next-button { grid-column: auto; }.task-tabs { grid-template-columns: repeat(2,1fr); }.task-tabs button:first-child { grid-column: 1 / -1; }
  .result-scene { min-height: 280px; }.result-copy { padding: 30px 22px; }.result-copy h2 { font-size: 38px; }.result-child,.result-parent { width: 120px; height: 120px; }.result-path { top: 150px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }