:root{
  --ink:#15342f;--paper:#fffdf2;--leaf:#247b42;--leaf-dark:#15532f;--sun:#ffd66b;
  --sea:#0f7685;--coral:#ee7356;--muted:#60756d;--shadow:0 18px 50px #062f37aa;
}
*{box-sizing:border-box}
.home-link{position:fixed;z-index:100;left:14px;bottom:14px;padding:10px 15px;border-radius:999px;background:rgba(5,67,77,.9);color:#fff;text-decoration:none;font-weight:800;box-shadow:0 8px 24px rgba(0,0,0,.22);backdrop-filter:blur(8px)}
.home-link:hover,.home-link:focus-visible{background:#074e5a;outline:3px solid #ffd76e;outline-offset:2px}
html,body{margin:0;min-height:100%;font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;background:#0c5363;color:var(--ink)}
button{font:inherit}
button:focus-visible{outline:4px solid #fff;outline-offset:3px}
.app{min-height:100vh;background:radial-gradient(circle at 50% -20%,#4fc5c1 0,#0d7180 48%,#073e51 100%);padding:14px}
.shell{width:min(1180px,100%);margin:auto}
.hud{display:grid;grid-template-columns:minmax(230px,1fr) minmax(250px,1.35fr) auto;align-items:center;gap:14px;color:#fff;margin:0 2px 12px}
.brand{display:flex;align-items:center;gap:10px}.brand-mark{font-size:36px;filter:drop-shadow(0 3px 4px #003b)}
.brand h1{font-family:Georgia,serif;font-size:clamp(20px,3vw,30px);margin:0;line-height:1}.brand p{margin:4px 0 0;color:#d8f4e9;font-size:14px}
.progress-wrap{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px}.progress{height:13px;background:#002d3766;border:1px solid #ffffff55;border-radius:20px;overflow:hidden}.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffe58b,#ffb43d);transition:width .6s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 10px #ffd66b}.progress-label{font-weight:800;font-size:14px;white-space:nowrap}.hud-actions{display:flex;align-items:center;gap:7px}.pause-btn{border:1px solid #ffffff66;background:#063f5088;color:white;border-radius:12px;padding:10px 12px;cursor:pointer;font-weight:850;white-space:nowrap}.pause-btn:hover{background:#0b5969}.sound{border:1px solid #ffffff66;background:#063f5088;color:white;border-radius:50%;width:44px;height:44px;cursor:pointer;font-size:20px;flex:0 0 auto}
.chapters{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 12px}.chapter{border:1px solid #ffffff66;background:#073f4c99;color:#d7eeee;border-radius:13px;padding:8px 10px;font-weight:850;cursor:pointer}.chapter span{display:inline-grid;place-items:center;width:24px;height:24px;margin-right:7px;border-radius:50%;background:#ffffff20}.chapter.active{background:#fff9df;color:#17443c;border-color:#fff}.chapter.active span{background:#ffd66b}.chapter.done{color:#fff}.chapter:disabled{opacity:.38;cursor:not-allowed}
.play-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,390px);gap:16px;align-items:stretch}.play-grid.starting{grid-template-columns:1fr}
.island{position:relative;isolation:isolate;aspect-ratio:1440/809;min-height:420px;border:5px solid #ffffffcc;border-radius:28px;overflow:hidden;box-shadow:var(--shadow);background:#bdebea}
.base-map{position:absolute;inset:-2px;z-index:0;background:var(--map) center/cover no-repeat;filter:saturate(.28) brightness(.68) contrast(.9);transform:scale(1.01);transition:filter .8s}
.island::after{content:"";position:absolute;inset:0;z-index:8;pointer-events:none;background:linear-gradient(180deg,#ffffff33,transparent 12%,transparent 80%,#073c4933)}
.water-shimmer{position:absolute;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(105deg,transparent 0 28px,#d9ffff18 30px 34px,transparent 36px 62px);animation:water 9s linear infinite;mix-blend-mode:screen}
@keyframes water{to{transform:translateX(68px)}}
.reveal{position:absolute;inset:0;z-index:2;background:var(--map) center/cover no-repeat;opacity:0;animation:reveal .9s ease-out forwards;pointer-events:none}
.reveal.building-now{z-index:7;animation:build-reveal 1.2s cubic-bezier(.18,.75,.2,1) forwards}
@keyframes reveal{from{opacity:0;filter:saturate(2) brightness(1.6)}to{opacity:1;filter:none}}
@keyframes build-reveal{0%{opacity:0;filter:brightness(2.2) saturate(1.8);transform:scale(.88)}45%{opacity:1;filter:brightness(1.55) saturate(1.5);transform:scale(1.025)}100%{opacity:1;filter:none;transform:none}}
.r0{clip-path:circle(17% at 29% 31%)}.r1{clip-path:circle(12% at 55% 44%)}.r2{clip-path:circle(15% at 77% 40%)}.r3{clip-path:circle(14% at 31% 51%)}.r4{clip-path:circle(17% at 28% 77%)}.r5{clip-path:circle(15% at 61% 43%)}
.spot{position:absolute;z-index:9;transform:translate(-50%,-50%);width:clamp(42px,5vw,64px);height:clamp(42px,5vw,64px);border:0;border-radius:50%;display:grid;place-items:center;font-size:clamp(21px,2.6vw,31px);cursor:pointer;background:#173d36cc;color:white;box-shadow:0 5px 14px #0029;border:2px solid #ffffffaa;transition:.25s}
.spot:hover{transform:translate(-50%,-50%) scale(1.08)}.spot.current{background:#ffe58b;color:#15342f;animation:pulse 1.5s ease-in-out infinite;box-shadow:0 0 0 8px #ffe58b44,0 5px 14px #0029}.spot.locked{filter:grayscale(1);opacity:.72;cursor:not-allowed}.spot .tip{position:absolute;top:calc(100% + 7px);left:50%;transform:translateX(-50%);padding:5px 9px;border-radius:12px;background:#123d36e8;color:white;font-size:12px;white-space:nowrap;font-weight:800;opacity:0;transition:.2s;pointer-events:none}.spot:hover .tip,.spot:focus-visible .tip{opacity:1}
@keyframes pulse{50%{transform:translate(-50%,-50%) scale(1.08);box-shadow:0 0 0 15px #ffe58b16,0 5px 14px #0029}}
.cloud{position:absolute;z-index:6;width:18%;aspect-ratio:2.25;border-radius:50%;background:#f9ffffe0;filter:drop-shadow(0 6px 12px #315a6288);animation:drift 7s ease-in-out infinite alternate;pointer-events:none}.cloud::before,.cloud::after{content:"";position:absolute;border-radius:50%;background:inherit}.cloud::before{width:48%;aspect-ratio:1;left:12%;top:-42%}.cloud::after{width:58%;aspect-ratio:1;right:9%;top:-55%}.cloud.dissolve{animation:dissolve 1.15s ease-out forwards}.cloud-label{position:absolute;z-index:2;left:50%;top:48%;transform:translate(-50%,-50%);font-size:clamp(10px,1.2vw,13px);font-weight:900;color:#40605f;white-space:nowrap}.c0{left:20%;top:26%}.c1{left:47%;top:39%;animation-delay:-2s}.c2{left:68%;top:34%;animation-delay:-4s}.c3{left:23%;top:48%;animation-delay:-1s}.c4{left:19%;top:72%;animation-delay:-5s}.c5{left:55%;top:39%;animation-delay:-3s}
@keyframes drift{to{transform:translate(10px,-5px)}}
@keyframes dissolve{to{opacity:0;transform:scale(1.45) translateY(-14px);filter:blur(12px)}}
.mission{position:relative;z-index:20;min-height:420px;max-height:min(70vh,660px);overflow:auto;background:linear-gradient(155deg,#fffdf5,#f4edd1);border:1px solid #fff;border-radius:22px;box-shadow:0 14px 35px #062c35aa;padding:clamp(16px,2.3vw,25px)}
.mission .eyebrow{font-size:13px;text-transform:uppercase;letter-spacing:.12em;font-weight:900;color:var(--leaf)}.mission h2{font-family:Georgia,serif;font-size:clamp(24px,3vw,34px);margin:5px 0 8px}.mission p{font-size:16px;line-height:1.45;margin:8px 0}.brief{background:#e7f3d5;border-left:5px solid #75a94d;padding:9px 11px;border-radius:8px}.choices{display:grid;gap:8px;margin-top:12px}.choice{border:2px solid #c7c9af;background:white;color:var(--ink);border-radius:12px;padding:10px 12px;text-align:left;cursor:pointer;font-weight:750;line-height:1.25}.choice:hover{border-color:var(--leaf);background:#f4fae8}.choice.correct{background:#dff3d5;border-color:#4c9a53}.choice.wrong{background:#ffe1d7;border-color:#df735a}.feedback{min-height:23px;font-weight:800;margin:9px 0;color:#9a3d30}.feedback.ok{color:#26753d}.actions{display:flex;gap:9px;justify-content:flex-end;margin-top:10px}.primary,.secondary{border:0;border-radius:12px;padding:11px 15px;font-weight:900;cursor:pointer}.primary{background:linear-gradient(#3c9a55,#23733e);color:white;box-shadow:0 4px 0 #15512e}.primary:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}.secondary{background:#e9e5cf;color:#43544d}.tiny{font-size:13px;color:var(--muted)}
.order-row{display:grid;grid-template-columns:1fr auto auto;gap:5px;align-items:stretch}.order-row .choice{margin:0;cursor:default}.order-arrow{border:1px solid #c7c9af;background:#fff;color:var(--ink);border-radius:10px;min-width:38px;cursor:pointer;font-weight:900}.order-arrow:hover{border-color:var(--leaf);background:#f4fae8}.order-arrow:disabled{opacity:.3;cursor:not-allowed}
.challenge-count{display:inline-block;margin-top:10px;padding:4px 9px;border-radius:20px;background:#e8e3ca;color:#51645b;font-size:13px;font-weight:900}.task-list{margin:10px 0;padding:12px 12px 12px 32px;border-radius:12px;background:#fff;border:2px dashed #c3b992;line-height:1.45}.task-list li{margin:5px 0}.chapter-complete{display:grid;place-items:center;text-align:center}
.intro{position:absolute;inset:0;z-index:30;display:grid;place-items:center;background:linear-gradient(90deg,#053844bb,#05384433);padding:20px}.intro-card{width:min(470px,92%);margin-left:min(-42%,0px);background:#fffdf2eb;border:1px solid white;border-radius:24px;padding:clamp(22px,4vw,38px);box-shadow:var(--shadow)}.intro-card h2,.final-card h2{font:700 clamp(31px,5vw,52px)/1 Georgia,serif;margin:4px 0 12px}.intro-card p{font-size:18px;line-height:1.5}.start{font-size:17px;padding:14px 19px}
.build-fx{position:absolute;z-index:40;transform:translate(-50%,-50%);width:150px;height:150px;pointer-events:none}.puff{position:absolute;left:50%;top:50%;width:38px;height:38px;border-radius:50%;background:#fffbe8;box-shadow:0 0 22px #fff;animation:puff .95s ease-out forwards}.puff:nth-child(2){animation-delay:.08s}.puff:nth-child(3){animation-delay:.16s}.spark{position:absolute;left:50%;top:50%;font-size:25px;animation:spark 1s ease-out forwards}.s2{transform:rotate(90deg)}.s3{transform:rotate(200deg)}
@keyframes puff{to{transform:translate(var(--x,35px),var(--y,-40px)) scale(2.4);opacity:0}}
@keyframes spark{to{transform:translate(var(--sx,55px),var(--sy,-55px)) rotate(160deg);opacity:0}}
.toast{position:absolute;z-index:45;left:50%;bottom:5%;transform:translateX(-50%);background:#143f35ee;color:white;border:2px solid #ffe58b;border-radius:16px;padding:11px 18px;font-weight:900;box-shadow:0 8px 25px #0029;animation:toast 2.4s both}
@keyframes toast{0%{opacity:0;transform:translate(-50%,18px)}15%,80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
.final-card{position:relative;z-index:20;min-height:420px;display:grid;place-items:center;text-align:center;background:#fffdf2f2;border:1px solid white;border-radius:24px;padding:25px;box-shadow:var(--shadow)}.final-card h2{font-size:clamp(28px,3.5vw,42px)}.final-card .checklist{display:grid;grid-template-columns:1fr;gap:7px;text-align:left;margin:16px auto;max-width:620px}.final-card .score{font:900 25px Georgia,serif;color:var(--leaf)}
.replay-panel{position:relative;min-height:420px;display:grid;place-items:center;text-align:center;background:linear-gradient(155deg,#fffdf5,#f4edd1);border:1px solid #fff;border-radius:24px;padding:25px;box-shadow:var(--shadow)}.replay-panel h2{font:700 clamp(28px,3.5vw,42px)/1.05 Georgia,serif;margin:8px 0}.replay-counter{display:inline-block;margin-top:18px;padding:9px 14px;border-radius:20px;background:#174f43;color:white;font-weight:900}.replay-pop{animation:replay-pop .48s cubic-bezier(.2,1.35,.35,1) both}.pause-card .resume{margin-top:14px}.pause-card p{font-size:17px;line-height:1.5}
@keyframes replay-pop{0%{opacity:0;transform:scale(.55);filter:brightness(2)}70%{opacity:1;transform:scale(1.07)}100%{opacity:1;transform:none;filter:none}}
@media(max-width:900px){.play-grid{grid-template-columns:1fr}.island{min-height:0}.mission,.final-card{min-height:0;max-height:none}.final-card .checklist{grid-template-columns:1fr 1fr}}
@media(max-width:600px){
 html,body{height:100%;overflow:hidden;overscroll-behavior:none}
 .app{height:100vh;height:100dvh;min-height:0;overflow:hidden;padding:7px}
 .shell{height:100%;min-height:0;display:flex;flex-direction:column}
 .hud{flex:0 0 auto;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:5px 8px;margin:0 2px 6px}
 .brand{min-width:0}.brand-mark{font-size:28px}.brand h1{font-size:19px;white-space:nowrap}.brand p{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .progress-wrap{grid-column:1/-1;grid-row:2;gap:7px}.progress{height:10px}.progress-label{font-size:12px}
 .hud-actions{grid-column:2;grid-row:1;justify-content:flex-end}.pause-btn{width:42px;height:42px;padding:0;font-size:0;border-radius:50%}.pause-btn::before{content:"⏸";font-size:18px}.sound{width:42px;height:42px;font-size:18px}
 .chapters{flex:0 0 auto;display:flex;gap:5px;margin:0 0 6px;overflow-x:auto;scrollbar-width:none}.chapters::-webkit-scrollbar{display:none}.chapter{flex:1 0 82px;min-width:0;font-size:12px;padding:6px 3px;white-space:nowrap}.chapter span{width:20px;height:20px;margin-right:3px}
 .play-grid{flex:1 1 auto;min-height:0;overflow:hidden;grid-template-columns:1fr;grid-template-rows:minmax(150px,28dvh) minmax(0,1fr);gap:7px}
 .play-grid.starting{grid-template-rows:minmax(0,1fr)}
 .island{width:100%;height:100%;min-height:0;aspect-ratio:auto;border-width:4px;border-radius:16px}
 .spot{width:38px;height:38px;font-size:18px}.cloud-label{display:none}
 .mission,.final-card,.replay-panel{height:100%;min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;border-radius:16px;padding:14px 14px 72px;scrollbar-width:thin;scrollbar-color:#75a94d #efe8cf}
 .mission::-webkit-scrollbar,.final-card::-webkit-scrollbar,.replay-panel::-webkit-scrollbar{width:8px}.mission::-webkit-scrollbar-thumb,.final-card::-webkit-scrollbar-thumb,.replay-panel::-webkit-scrollbar-thumb{background:#75a94d;border-radius:9px}
 .mission h2{font-size:25px}.mission p{font-size:16px}.choice{min-height:50px;padding:12px;font-size:16px}.actions{justify-content:stretch}.actions button{flex:1;min-height:48px}
 .intro{overflow-y:auto;padding:12px}.intro-card{margin:0;width:96%;padding:20px}.intro-card h2{font-size:34px}.intro-card p{font-size:16px}.final-card .checklist{grid-template-columns:1fr}
 .home-link{left:10px;bottom:9px;padding:9px 13px;font-size:14px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}