:root{--ink:#17493e;--muted:#60766f;--paper:#fffdf7;--cream:#f7f0de;--line:#d8cda9;--green:#4e9a73;--green-dark:#2f7759;--coral:#e4765e;--blue:#4d91ad;--shadow:0 18px 42px rgba(66,78,52,.13)}
.observation[data-tone="dark-scene"] .observation-bg{filter:brightness(.42) saturate(.72)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;background:radial-gradient(circle at 12% 8%,#eef5e5 0 18%,transparent 40%),linear-gradient(135deg,#f8f1df,#eef4e4);color:var(--ink);font-family:"Segoe UI",Arial,sans-serif}button{font:inherit;color:inherit}.app{width:min(1120px,calc(100% - 32px));margin:24px auto 40px}.game-topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}.game-home-link{display:inline-flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;border-radius:20px;padding:6px 10px 6px 6px;transition:.18s ease}.game-home-link:hover{background:rgba(255,255,255,.62);transform:translateY(-1px)}.game-home-link:focus-visible{outline:4px solid rgba(77,145,173,.35);outline-offset:3px}.game-home-link>span:last-child{display:grid;gap:1px}.game-home-link strong{font-size:22px}.game-home-link small{color:var(--muted);font-size:13px}.game-icon{width:54px;height:54px;display:grid;place-items:center;border-radius:18px;background:#fff5ce;border:2px solid #e6bc57;box-shadow:0 6px 13px rgba(91,85,42,.13)}.game-icon svg{width:39px;height:39px;fill:#75aa73;stroke:#17493e;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}.age-pill,.hero-facts span{white-space:nowrap;border:1px solid rgba(23,73,62,.15);background:rgba(255,255,255,.72);border-radius:999px;padding:10px 16px}.screen{display:none}.screen.is-active{display:block}.hero-card{display:grid;grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);min-height:466px;overflow:hidden;border:1px solid #d7d7b9;border-radius:40px;background:rgba(255,255,249,.86);box-shadow:var(--shadow)}.hero-art{min-height:466px}.hero-art img{width:100%;height:100%;object-fit:cover;display:block}.hero-copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:48px clamp(32px,5vw,62px)}.eyebrow{font-size:13px;font-weight:900;letter-spacing:.13em;color:#4c8b68}.hero-copy h1{font-size:clamp(36px,4.2vw,58px);line-height:1.03;margin:12px 0 18px;letter-spacing:-.035em}.hero-copy p{margin:0;color:var(--muted);font-size:19px;line-height:1.55}.hero-facts{display:flex;gap:9px;flex-wrap:wrap;margin:24px 0}.hero-facts span{padding:8px 13px;font-size:14px}.primary-button,.hint-button,.quiet-button,.back-button{border:0;cursor:pointer;font-weight:800;border-radius:17px;transition:.18s ease}.primary-button{background:var(--green);color:white;padding:15px 23px;box-shadow:0 8px 18px rgba(53,130,90,.2)}.primary-button:hover{background:var(--green-dark);transform:translateY(-2px)}.primary-button:focus-visible,.hint-button:focus-visible,.quiet-button:focus-visible,.back-button:focus-visible,.route-card:focus-visible,.statement:focus-visible{outline:4px solid rgba(77,145,173,.38);outline-offset:3px}.hero-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;list-style:none;padding:0;margin:18px 0 34px}.hero-steps li{min-height:112px;display:flex;align-items:center;gap:15px;background:rgba(255,253,247,.9);border:1px solid var(--line);border-radius:28px;padding:18px}.hero-steps b{flex:0 0 48px;height:48px;display:grid;place-items:center;border-radius:16px;background:var(--coral);color:#fff;font-size:23px}.hero-steps span{display:grid;gap:4px}.hero-steps strong{font-size:17px}.hero-steps small{color:var(--muted);line-height:1.35}.routes-section{padding-top:2px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:18px}.section-heading h2{margin:7px 0 0;font-size:31px}.section-heading p{margin:0;color:var(--muted);font-weight:700}.route-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}.route-card{display:grid;grid-template-rows:auto auto 1fr auto auto;gap:10px;min-height:270px;text-align:left;border:1px solid var(--line);border-radius:28px;background:var(--paper);padding:24px;cursor:pointer;color:var(--ink);box-shadow:0 10px 24px rgba(70,75,51,.08);transition:.18s ease}.route-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.route-badge{width:50px;height:50px;display:grid;place-items:center;border-radius:17px;color:white;font-size:22px;font-weight:900;background:var(--route-color)}.route-card h3{font-size:23px;margin:0}.route-card p{color:var(--muted);line-height:1.45;margin:0}.route-progress{height:9px;background:#e6eadf;border-radius:999px;overflow:hidden}.route-progress i{display:block;height:100%;width:var(--done);background:var(--route-color);border-radius:inherit}.route-status{font-size:14px;font-weight:800;color:var(--route-color)}.play-card{border:1px solid #d8d2b4;border-radius:36px;background:rgba(255,253,247,.96);padding:clamp(18px,3vw,34px);box-shadow:var(--shadow)}.play-head{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center}.back-button{width:48px;height:48px;background:#edf3e8;font-size:26px}.play-head small{font-weight:900;color:var(--green);letter-spacing:.1em}.play-head h2{margin:3px 0 0;font-size:27px}.play-head>span{font-weight:900;color:var(--muted)}.progress-track{height:10px;margin:18px 0 25px;background:#e5e9df;border-radius:999px;overflow:hidden}.progress-track i{display:block;width:0;height:100%;background:linear-gradient(90deg,#73aa72,#e1b84f);border-radius:inherit;transition:width .25s ease}.task-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:15px}.task-heading h3{font-size:29px;margin:6px 0 0}.task-heading p{margin:0;color:var(--muted);font-weight:700}.observations{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.observation{position:relative;aspect-ratio:4/3;border:3px solid #e4dcc1;border-radius:24px;overflow:hidden;background:var(--scene-tone,#f7f0de);box-shadow:inset 0 0 0 4px rgba(255,255,255,.45);transition:.2s ease}.observation.is-hint{border-color:#e7a83d;box-shadow:0 0 0 5px rgba(231,168,61,.22)}.observation::after{content:attr(data-number);position:absolute;left:10px;top:10px;width:31px;height:31px;border-radius:10px;display:grid;place-items:center;background:rgba(255,253,247,.9);font-weight:900;color:#795d2a;z-index:5}.observation-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.observation-item{position:absolute;width:53%;height:72%;left:50%;bottom:3%;transform:translateX(-50%);object-fit:contain;filter:drop-shadow(0 5px 5px rgba(51,54,38,.17))}.observation-item.single{width:55%;height:62%;bottom:18%}.observation-item.wide{width:80%;height:67%;bottom:8%}.observation-item.small{width:43%;height:59%;left:62%}.observation-item.corner{width:26%;height:30%;left:24%;bottom:8%}.observation-item.wide-hero{width:76%;height:75%}.observation-item.flip{transform:translateX(-50%) scaleX(-1)}.observation-item.sky-object{width:45%;height:38%;left:66%;bottom:53%}.observation-item.left{width:35%;height:45%;left:30%;bottom:16%}.observation-item.middle{width:30%;height:40%;left:52%;bottom:36%}.observation-item.right{width:30%;height:39%;left:72%;bottom:13%}.observation-item.bottom{width:72%;height:33%;bottom:0}.observation-item.tilt{transform:translateX(-50%) rotate(24deg)}.observation-item.crop-bloom{width:100%;height:100%;object-fit:cover;object-position:50% 8%;bottom:0}.observation-item.crop-stem{width:95%;height:140%;bottom:-58%;object-fit:contain}.observation-item.crop-spines{width:105%;height:135%;bottom:-12%;object-fit:contain}.observation[data-tone="cream"]{--scene-tone:#fff3d2}.observation[data-tone="mint"]{--scene-tone:#e4f2df}.observation[data-tone="blue"]{--scene-tone:#dfeef2}.observation[data-tone="sand"]{--scene-tone:#f2dfb8}.observation[data-tone="night"]{--scene-tone:#263d52}.observation[data-tone="rose"]{--scene-tone:#f5dfdc}.observation[data-tone="sky"]{--scene-tone:#dceff2}.observation[data-tone="soil"]{--scene-tone:linear-gradient(#e7f1dd 0 46%,#b78058 46%)}.answer-heading{display:flex;justify-content:space-between;gap:16px;margin:23px 0 10px}.answer-heading span{font-weight:900;letter-spacing:.09em;font-size:13px}.answer-heading small{color:var(--muted)}.statement-list{display:grid;gap:10px}.statement{position:relative;width:100%;min-height:62px;text-align:left;border:2px solid #ddd7bc;background:#fff;border-radius:19px;padding:13px 18px 13px 56px;cursor:pointer;font-weight:750;font-size:16px;line-height:1.35}.statement::before{content:"";position:absolute;left:18px;top:50%;width:20px;height:20px;border:3px solid #9caf9f;border-radius:50%;transform:translateY(-50%)}.statement:hover{border-color:#8bb39a;background:#fbfff9}.statement.is-selected{border-color:#4d91ad;background:#eef7fa}.statement.is-selected::before{border-color:#4d91ad;box-shadow:inset 0 0 0 4px #eef7fa;background:#4d91ad}.statement.is-correct{border-color:#56a16f;background:#ecf7ed}.statement.is-wrong{border-color:#e17b65;background:#fff0ec}.statement:disabled{cursor:default;color:var(--ink);opacity:1}.feedback{display:flex;gap:8px;align-items:baseline;min-height:58px;margin-top:14px;border-radius:17px;padding:14px 17px;background:#eef2e9;color:var(--muted)}.feedback b{color:var(--ink);white-space:nowrap}.feedback[data-tone="wrong"]{background:#fff0e8}.feedback[data-tone="success"]{background:#e7f5e9}.feedback[data-tone="hint"]{background:#fff5d7}.play-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:14px}.hint-button,.quiet-button{padding:14px 20px;background:#ecf1e9}.hint-button:hover,.quiet-button:hover{background:#dde8dc}.task-tabs{display:flex;justify-content:center;gap:8px;margin-top:18px}.task-tabs button{width:35px;height:10px;border:0;border-radius:999px;background:#dce3d9;cursor:pointer}.task-tabs button.is-current{background:var(--green)}.task-tabs button.is-done{background:#e0b64f}.result-card{max-width:720px;margin:44px auto;text-align:center;border:1px solid #d7d1ae;border-radius:38px;background:var(--paper);padding:50px clamp(24px,6vw,70px);box-shadow:var(--shadow)}.result-symbol{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:18px}.result-symbol span{width:26px;height:26px;border-radius:9px;background:#8eb789;color:transparent}.result-symbol b{width:45px;height:45px;border-radius:15px;display:grid;place-items:center;background:#e3b755;color:#fff;font-size:28px}.result-card h2{font-size:40px;margin:12px 0}.result-card>p{color:var(--muted);font-size:19px;line-height:1.55}.result-stats{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:25px 0}.result-stats span{background:#edf3e8;border-radius:17px;padding:12px 16px}.result-card .quiet-button{display:block;margin:12px auto 0}.qa-focus{outline:5px solid #ff9b33!important;outline-offset:2px}
@media(max-width:800px){.hero-card{grid-template-columns:1fr}.hero-art{min-height:0;aspect-ratio:3/2}.hero-copy{padding:32px}.hero-steps{grid-template-columns:1fr}.route-grid{grid-template-columns:1fr}.route-card{min-height:0}.observations{gap:8px}.observation{border-radius:18px}.task-heading{align-items:flex-start}.task-heading p{max-width:180px}.feedback{align-items:flex-start;flex-direction:column}.answer-heading small{display:none}}
@media(max-width:560px){.app{width:min(100% - 20px,1120px);margin-top:12px}.game-topbar{align-items:flex-start}.game-home-link{padding-left:0}.game-home-link strong{font-size:18px}.game-home-link small{font-size:11px}.game-icon{width:46px;height:46px}.age-pill{padding:8px 10px;font-size:13px}.hero-card,.play-card{border-radius:27px}.hero-copy{padding:26px 22px}.hero-copy h1{font-size:35px}.hero-copy p{font-size:17px}.hero-facts{margin:18px 0}.section-heading{align-items:flex-start;flex-direction:column}.section-heading h2{font-size:27px}.play-card{padding:14px 12px}.play-head{grid-template-columns:auto 1fr}.play-head>span{grid-column:2}.play-head h2{font-size:22px}.task-heading{display:block}.task-heading h3{font-size:25px}.task-heading p{margin-top:5px}.observations{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.observation{border-width:2px;border-radius:13px}.observation::after{width:23px;height:23px;border-radius:7px;left:5px;top:5px;font-size:12px}.statement{font-size:14px;padding:11px 11px 11px 44px}.statement::before{left:13px;width:18px;height:18px}.feedback{font-size:14px}.play-actions{display:grid;grid-template-columns:1fr 1fr}.play-actions button{padding:13px 10px}.play-actions [data-next]{grid-column:1/-1}.task-tabs button{width:25px}.result-card{margin:22px auto;padding:36px 20px}.result-card h2{font-size:32px}}