:root{color-scheme:dark;--ink:#edf5ee;--muted:#b7c9c2;--mint:#c6f578;--panel:#172c2b;--line:#36504a}
*{box-sizing:border-box}
body{margin:0;background:#0d1d1e;color:var(--ink);font:16px/1.55 system-ui,sans-serif}
button,input,select{font:inherit}
button,a,input,summary{touch-action:manipulation}
button{cursor:pointer;border:1px solid var(--line);border-radius:12px;background:#243d38;color:var(--ink);padding:10px 16px;min-height:44px}
button:hover{background:#34554a}
button:disabled{opacity:.45;cursor:not-allowed}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #ffe08a;outline-offset:4px}
.primary{background:var(--mint);color:#152717;border:none;font-weight:800;padding:14px 23px}
.primary:hover{background:#dcffab}
[hidden]{display:none!important}
header{max-width:1320px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:22px 32px;border-bottom:1px solid var(--line);gap:16px}
.brand{color:var(--ink);text-decoration:none;font-weight:900;letter-spacing:.04em}
.brand small{display:block;font-size:9px;letter-spacing:.18em;color:var(--muted);margin-left:28px}
.wallet{font-size:14px;background:#23382d;border:1px solid #536539;border-radius:40px;padding:9px 18px;color:#e7f4b9}
.wallet b{font-size:22px}
main{max-width:1256px;padding:0 28px;margin:auto}
.hero{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:48px;padding:60px 0}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--mint)}
h1{font-size:clamp(36px,5vw,68px);line-height:1.04;letter-spacing:-.05em;margin:18px 0 24px}
h1 em{font-style:normal;color:var(--mint)}
.hero p:not(.eyebrow){max-width:490px;color:var(--muted)}
.hero-art{position:relative;overflow:hidden;min-height:355px;display:grid;align-content:end;text-align:center;background:linear-gradient(#719fa0 0%,#a6c3ae 66%,#547d50 66%);border-radius:140px 140px 26px 26px;border:8px solid #25403a;box-shadow:0 22px 70px #0003}
.little-house{font-size:140px;line-height:1.1;filter:drop-shadow(8px 12px 0 #355e4533)}
.friends{font-size:42px;letter-spacing:8px}
.cloud{position:absolute;font-size:60px;left:30px;top:20px;animation:drift 8s ease-in-out infinite alternate}
.sun{position:absolute;font-size:55px;right:38px;top:32px}
.art-caption{font-size:11px;letter-spacing:.08em;color:#fff;padding:10px;background:#24493280}
.map-heading,.mission-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.map-heading h2{margin-top:0}
.muted,footer{font-size:12px;color:var(--muted)}
.world{border-top:1px solid var(--line);padding:20px 0}
.world h3{margin:0 0 14px;font-size:17px}
.levels{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.level{position:relative;min-height:100px;text-align:left;padding:14px;background:var(--panel)}
.level strong{font-size:24px;display:block}
.level small{display:block;font-size:10px;color:#d0ded5}
.level.completed{border-color:#b1df6a}
.level.current{box-shadow:inset 0 0 0 2px var(--mint)}
.guide{border:1px solid var(--line);border-radius:14px;padding:16px;margin:18px 0;font-size:13px;background:var(--panel)}
summary{cursor:pointer;font-weight:700}
.mission-top{margin-top:24px}
.mission-title{font-size:32px;margin-bottom:8px}
.play-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,1fr);gap:24px;margin-top:22px}
.scene{position:relative;overflow:hidden;border-radius:22px;background:linear-gradient(#84b4c4,#d7e6ce);color:#163b40;border:1px solid #8ab0af}
.scene.snow{background:linear-gradient(#8196b1,#e6f4f9)}
.scene.wind{background:linear-gradient(#6d9999,#c4d8bf)}
.scene.dry{background:linear-gradient(#d8aa72,#f4d7a4)}
.scene.storm{background:linear-gradient(#384f69,#98abb8)}
.weather-label{position:absolute;top:16px;left:16px;border-radius:25px;padding:6px 12px;background:#102827e8;color:white;font-size:12px}
svg{display:block;width:100%;height:auto;margin-top:24px}
svg text{font-family:system-ui,sans-serif;font-weight:700}
.scene-caption{background:#153c39;color:#e5f6e8;padding:12px;font-size:12px;text-align:center}
.data-strip{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.data-strip span{border:1px solid var(--line);padding:8px 12px;border-radius:10px;font-size:12px}
.workbench{border:1px solid var(--line);border-radius:20px;padding:20px;background:var(--panel)}
.workbench>.eyebrow{margin-top:0}
.budget{font-size:14px;margin-bottom:14px;color:#e9dfb9}
.part{border:0;padding:0;margin:14px 0}
.part legend{font-size:13px;margin-bottom:6px;font-weight:700}
.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.choices button{font-size:11px;padding:7px 3px;line-height:1.4}
.choices button span{display:block;font-size:10px;color:var(--muted)}
.choices button[aria-pressed=true]{border-color:var(--mint);background:#354c31}
.position-label{font-size:12px;display:block}
input[type=range]{width:100%;accent-color:var(--mint);min-height:32px}
.prediction{border-top:1px solid var(--line);margin-top:18px;padding:12px 0}
.prediction label{font-weight:700;font-size:14px}
.answer-row{display:flex;align-items:center;gap:10px;margin-top:10px}
input[type=number]{width:140px;min-height:44px;background:#0d1d1e;color:white;border:1px solid #718b79;border-radius:8px;padding:8px}
.workbench>.primary{width:100%}
.result{border:1px solid #a6ce78;background:#20372b;padding:24px;border-radius:18px;margin-top:22px}
.result h2{margin-top:0}
.result p{margin:10px 0}
.result-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.bad{color:#ffc3a8}
.good{color:#d4f69d}
.force{stroke-dasharray:8 5;animation:flow 1s linear infinite}
.tested .animal{animation:hop .65s ease-in-out 2}
.tested .weather-icon{animation:drift 1s ease-in-out 3 alternate}
footer{padding:32px 0;text-align:center}
@keyframes drift{to{transform:translateX(18px)}
}
@keyframes flow{to{stroke-dashoffset:-26}
}
@keyframes hop{50%{transform:translateY(-8px)}
}
@media(max-width:760px){header{padding:16px}
.wallet{font-size:10px;padding:6px 10px}
.wallet span{display:block}
main{padding:0 16px}
.hero{gap:20px;padding:30px 0;grid-template-columns:1fr}
.hero-art{min-height:220px;border-radius:70px 70px 20px 20px;grid-row:2}
.little-house{font-size:95px}
.friends{font-size:30px}
.hero h1{font-size:48px}
.levels{grid-template-columns:repeat(3,1fr)}
.play-grid{grid-template-columns:1fr}
.mission-top{flex-wrap:wrap}
.mission-top .eyebrow{order:3;width:100%}
.mission-title{font-size:28px}
.workbench{padding:16px}
.map-heading{align-items:start}
.map-heading>span{font-size:12px}
.level{min-height:85px}
}
.cloud-scene{animation:drift 7s ease-in-out infinite alternate}
.snowflake{animation:snowfall 4s linear infinite}
@keyframes snowfall{to{transform:translate(15px,60px);opacity:0}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important}
}


.limit-results{display:flex;gap:24px;flex-wrap:wrap;margin:18px 0}.combo-table{overflow:auto}table{border-collapse:collapse;width:100%;font-size:13px}th,td{padding:10px;text-align:left;border-bottom:1px solid var(--line)}.guide a{color:var(--mint)}

/* Le refuge remplit son hôte ; seul le dessin garde ses proportions. */
header,main { max-width:none; width:100%; }
main { padding:0 clamp(16px,2.5vw,48px); }
body { text-align:left; }
.mission-objective { margin:18px 0; padding:18px 22px; border:1px solid #789553; border-radius:16px; background:#203528; }
.mission-objective h2 { font-size:19px; margin:0 0 8px; }
.mission-objective p { margin:6px 0; font-size:14px; }
.mission-steps { list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; }
.mission-steps li { padding:8px 12px; border:1px solid #55714d; border-radius:9px; font-size:13px; }
.mission-steps [aria-current="true"] { background:var(--mint); color:#142719; font-weight:800; }
#nextRequirement { font-weight:700; color:#d8f5ad; }
#attemptStatus { color:#edd797; }
.success-checklist { list-style:none; display:flex; gap:12px; flex-wrap:wrap; padding:0; }
.success-checklist li { border:1px solid var(--line); padding:8px 12px; border-radius:8px; }
#next:disabled { opacity:.65; }
#prediction:focus { outline:none; }
@media(min-width:1100px) { .play-grid { grid-template-columns:minmax(0,1.5fr) minmax(360px,1fr); } #structure { max-height:58dvh; } .mission-title{font-size:30px} header{padding-top:12px;padding-bottom:12px} }

.unit-note{font-size:12px;color:#c9dfd8;line-height:1.5;margin:12px 0}.weather-label{max-width:calc(100% - 32px);font-size:11px}.choices button span{overflow-wrap:anywhere}