:root{--ink:#174d43;--muted:#5f7772;--paper:#fffaf0;--line:#e2d5b4;--green:#3ea184;--green-dark:#197c67;--coral:#f17663;--yellow:#f3bb3f;--shadow:#d8cfb6}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;overflow-x:hidden;background:#fbf4df;color:var(--ink);font-family:"Trebuchet MS",Arial,sans-serif;background-image:radial-gradient(#e8dcb9 1.2px,transparent 1.2px);background-size:20px 20px}
button{font:inherit}
button:focus-visible{outline:4px solid #f3bb3f;outline-offset:3px}
.app{width:min(1120px,calc(100% - 32px));margin:32px auto 52px}
.hero{display:grid;grid-template-columns:46% 54%;min-height:530px;overflow:hidden;border:3px solid var(--line);border-radius:46px;background:#fffaf2;box-shadow:0 18px 0 rgba(212,201,169,.55),0 30px 52px rgba(75,73,45,.13)}
.hero-copy{display:flex;flex-direction:column;justify-content:center;padding:58px 54px;position:relative;z-index:2}
.eyebrow,.card-kicker{font-family:Georgia,serif;font-weight:800;letter-spacing:.16em;color:#a96529;font-size:15px}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif}
h1{font-size:clamp(56px,6.1vw,84px);line-height:.94;margin:24px 0 26px;letter-spacing:-.025em}
.hero-copy p{font-size:23px;line-height:1.55;color:var(--muted);margin-bottom:30px}
.hero-art{min-width:0;background:#dff3e9}
.hero-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.primary-button,.secondary-button{border:0;border-radius:22px;padding:18px 28px;font-weight:900;font-size:19px;cursor:pointer;box-shadow:0 8px 0 var(--green-dark);transition:transform .18s}
.primary-button{align-self:flex-start;background:var(--coral);color:#fff;box-shadow:0 8px 0 #c84f40}
.primary-button:hover,.secondary-button:hover{transform:translateY(-2px)}
.how-to{display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr;gap:14px;align-items:center;margin:28px 0 70px;padding:20px 24px;background:rgba(255,250,240,.9);border:2px dashed #d8c494;border-radius:28px}
.how-to div{display:grid;gap:3px}.how-to b{font-size:16px}.how-to span:not(.how-icon){color:var(--muted);font-size:14px;line-height:1.35}.how-icon{width:44px;height:44px;border-radius:15px;display:grid;place-items:center;background:#e3f1df;font-size:21px;color:var(--green-dark)}
.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:24px}.section-heading h2{font-size:56px;margin:12px 0 0}.section-heading p{color:var(--muted);font-size:18px}
.route-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.route-card{min-width:0;overflow:hidden;border:3px solid var(--line);border-radius:34px;background:var(--paper);box-shadow:0 12px 0 rgba(207,199,173,.6);display:flex;flex-direction:column}
.route-scene{height:220px;position:relative;background-size:cover;background-position:center;overflow:hidden;border-bottom:3px solid var(--line)}
.preview-animal{position:absolute;width:35%;height:58%;object-fit:contain;filter:drop-shadow(0 8px 7px rgba(38,63,50,.18))}.preview-animal--1{left:3%;bottom:5%}.preview-animal--2{left:33%;bottom:3%}.preview-animal--3{right:2%;bottom:4%}
.route-copy{padding:25px 25px 28px;background:linear-gradient(140deg,var(--route-color) 0,var(--paper) 42%);display:flex;flex:1;flex-direction:column}.route-copy>span{font-weight:900;letter-spacing:.13em;color:#a96529}.route-copy h3{font-size:32px;line-height:1.05;margin:12px 0}.route-copy p{color:var(--muted);line-height:1.45;min-height:84px}.route-progress{height:10px;flex:0 0 10px;border-radius:10px;background:#e6ecd9;overflow:hidden;margin:auto 0 18px}.route-progress i{display:block;height:100%;background:var(--green);border-radius:inherit}
.route-copy button{width:100%;display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:center;border:0;border-radius:18px;padding:17px 18px;background:var(--green);color:#fff;cursor:pointer;box-shadow:0 7px 0 var(--green-dark);text-align:left}.route-copy button span{font-weight:800}.route-copy button i{font-size:22px}.route-copy button:hover{background:#329477}
.play-section{margin-top:56px;padding:30px;border:3px solid var(--line);border-radius:42px;background:rgba(255,250,240,.97);box-shadow:0 15px 0 rgba(213,204,179,.5)}
.play-head{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center}.play-head h2{font-size:42px;margin:7px 0 0}.back-button{width:58px;height:58px;border-radius:50%;border:2px solid var(--line);background:#fff;color:var(--ink);font-size:28px;cursor:pointer}.task-count{display:grid;place-items:center;width:80px;height:68px;border:2px solid #bdddcf;border-radius:18px;background:#fff}.task-count b{font-size:23px}.task-count span{font-size:13px;color:var(--muted)}
.progress-track{height:12px;border-radius:10px;background:#e2eadc;overflow:hidden;margin:24px 0 28px}.progress-track span{display:block;height:100%;background:linear-gradient(90deg,#46ae91,#4e8fcb);transition:width .25s}
.task-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:26px;align-items:stretch}.animal-card,.answer-panel{border:2px solid #cfe2d6;border-radius:30px}.animal-card{padding:22px;background:#e8f5ef;text-align:center;display:flex;flex-direction:column}.animal-stage{height:270px;display:grid;place-items:center;margin:10px 0;background:#fff;border-radius:24px;overflow:hidden}.animal-stage img{width:92%;height:92%;object-fit:contain;filter:drop-shadow(0 9px 8px rgba(44,71,55,.17))}.animal-card h3{font-size:34px;margin:6px 0 8px}.animal-card p{color:var(--muted);line-height:1.45;margin:0;font-size:17px}
.answer-panel{padding:22px;background:#fff8df}.answer-copy h3{font-size:32px;margin:6px 0 18px}.habitat-grid{display:grid;gap:12px}.habitat-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}.habitat-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}.habitat-grid--6{grid-template-columns:repeat(3,minmax(0,1fr))}
.habitat-option{min-width:0;padding:0;overflow:hidden;border:3px solid #ded5bd;border-radius:20px;background:#fff;cursor:pointer;color:var(--ink);box-shadow:0 6px 0 #d9d2bb;transition:transform .16s,border-color .16s}.habitat-option:hover{transform:translateY(-2px);border-color:#8ac8b5}.habitat-option:disabled{cursor:default}.habitat-picture{display:block;aspect-ratio:16/9;overflow:hidden;background:#dfeee7}.habitat-picture img{display:block;width:100%;height:100%;object-fit:cover}.habitat-label{display:block;padding:10px 10px 12px}.habitat-label b{display:block;font-size:17px}.habitat-label small{display:none;color:var(--muted);line-height:1.25;margin-top:5px}.habitat-grid--3 .habitat-label small,.habitat-grid--4 .habitat-label small{display:block}.habitat-option.is-wrong{border-color:#ed796a;animation:shake .25s}.habitat-option.is-correct{border-color:#38a681;box-shadow:0 6px 0 #1f8167}.habitat-option.is-hint{border-color:#f1b82e;box-shadow:0 0 0 5px rgba(241,184,46,.2),0 6px 0 #d6a020}
.hint-button{display:block;margin:18px auto 0;border:2px solid #e8c25e;border-radius:18px;background:#fff0b5;color:#79530c;padding:14px 22px;font-weight:900;cursor:pointer}.hint-button:hover:not(:disabled){background:#ffe798}.hint-button:disabled{opacity:.55;cursor:default}
.feedback{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;margin-top:24px;padding:18px 20px;border:2px solid #add4c4;border-radius:24px;background:#e5f4ed}.feedback.is-error{background:#fff0ec;border-color:#efb6aa}.feedback.is-hint{background:#fff4ca;border-color:#e9ca67}.feedback-icon{width:54px;height:54px;display:grid;place-items:center;border-radius:17px;background:#fff;font-size:27px;font-weight:900}.feedback b{font-size:20px}.feedback p{margin:4px 0 0;color:var(--muted);line-height:1.4}.next-button{border:0;border-radius:17px;background:var(--green);color:#fff;padding:16px 22px;font-weight:900;cursor:pointer;box-shadow:0 6px 0 var(--green-dark)}
.finish-section{display:grid;grid-template-columns:42% 58%;margin-top:60px;overflow:hidden;border:3px solid var(--line);border-radius:42px;background:#fffaf2;box-shadow:0 15px 0 rgba(213,204,179,.5)}.finish-art{display:flex;align-items:end;justify-content:center;gap:2px;min-height:390px;padding:44px 20px;background:url('../assets/scene-library/backgrounds/bamboo-grove.webp') center/cover}.finish-art span{width:34%;height:58%;display:grid;place-items:center}.finish-art img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 7px rgba(29,59,44,.2))}.finish-copy{display:flex;flex-direction:column;justify-content:center;padding:48px}.finish-copy h2{font-size:48px;line-height:1.05;margin:14px 0}.finish-copy p{font-size:19px;line-height:1.55;color:var(--muted)}.finish-actions{display:flex;gap:15px;margin-top:14px}.secondary-button{background:#fff;color:var(--ink);border:2px solid var(--green);box-shadow:0 8px 0 #bfdbd2}
[hidden]{display:none!important}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media(max-width:1024px){.hero{grid-template-columns:52% 48%;min-height:480px}.hero-copy{padding:44px 36px}h1{font-size:58px}.hero-copy p{font-size:19px}.route-grid{gap:14px}.route-scene{height:180px}.route-copy{padding:20px}.route-copy h3{font-size:27px}.task-layout{grid-template-columns:260px 1fr}.animal-stage{height:235px}.habitat-label small{display:none!important}}
@media(max-width:850px){.hero{grid-template-columns:1fr}.hero-copy{min-height:430px}.hero-art{height:370px}.how-to{grid-template-columns:auto 1fr}.route-grid{grid-template-columns:1fr}.route-card{display:grid;grid-template-columns:42% 58%}.route-scene{height:auto;min-height:285px;border-bottom:0;border-right:3px solid var(--line)}.route-copy p{min-height:0}.task-layout{grid-template-columns:1fr}.animal-card{display:grid;grid-template-columns:170px 1fr;grid-template-rows:auto auto 1fr;text-align:left;gap:0 20px}.animal-card .card-kicker{grid-column:1/-1}.animal-stage{grid-row:2/4;height:190px}.animal-card h3{align-self:end}.answer-panel{padding:18px}.finish-section{grid-template-columns:1fr}.finish-art{min-height:330px}.finish-copy{padding:36px}}
@media(max-width:620px){.app{width:min(100% - 16px,1120px);margin-top:14px}.hero,.play-section,.finish-section{border-radius:30px}.hero-copy{padding:38px 25px;min-height:420px}h1{font-size:49px}.hero-copy p{font-size:18px}.hero-art{height:300px}.how-to{margin-bottom:48px;padding:16px}.section-heading{align-items:start;gap:12px}.section-heading h2{font-size:42px}.section-heading p{text-align:right;font-size:14px}.route-card{grid-template-columns:1fr}.route-scene{min-height:220px;border-right:0;border-bottom:3px solid var(--line)}.play-section{padding:18px 12px}.play-head{gap:10px}.back-button{width:46px;height:46px}.play-head h2{font-size:27px}.task-count{width:62px;height:58px}.animal-card{display:block;text-align:center;padding:17px}.animal-stage{height:230px}.habitat-grid--3,.habitat-grid--4,.habitat-grid--6{grid-template-columns:repeat(2,minmax(0,1fr))}.habitat-picture{aspect-ratio:4/3}.habitat-label b{font-size:15px}.feedback{grid-template-columns:auto 1fr}.next-button{grid-column:1/-1;width:100%}.finish-copy{padding:30px 22px}.finish-copy h2{font-size:38px}.finish-actions{flex-direction:column}.finish-actions button{width:100%;align-self:stretch}.finish-art{min-height:270px}}
@media(max-width:390px){h1{font-size:43px}.hero-copy{padding-inline:20px}.hero-art{height:260px}.section-heading h2{font-size:38px}.habitat-grid--3,.habitat-grid--4,.habitat-grid--6{gap:9px}.habitat-option{border-radius:16px}.habitat-label{padding:8px 5px 10px}.animal-stage{height:205px}.answer-copy h3{font-size:27px}.play-section{padding-inline:9px}}