:root{--ink:#183a3b;--paper:#fff8e7;--teal:#1c6669;--water:#3c9fc0;--deep:#176783;--green:#5f8d54;--gold:#e5b84d;--sand:#caa165;--clay:#c96d52;--shadow:0 16px 38px rgba(48,44,31,.2)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#d9d0bd;color:var(--ink);font-family:"Avenir Next","Trebuchet MS",sans-serif}
button{font:inherit}
button:focus-visible,[role="button"]:focus-visible{outline:4px solid var(--gold);outline-offset:4px}
.game-shell{min-height:100vh;display:grid;grid-template-rows:76px minmax(560px,1fr) 176px;overflow:hidden}
.topbar{display:grid;grid-template-columns:250px 1fr 175px 48px;align-items:center;gap:20px;padding:11px 30px;background:#174e51;color:#fff}
.topbar>div:first-child{display:flex;flex-direction:column}
.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#f1c969}
.topbar strong{font-size:20px}
.route{display:flex;justify-content:center;gap:8px}
.route i{width:34px;height:8px;border-radius:99px;background:#4e7779}
.route i.current{background:#fff}
.route i.done{background:var(--gold)}
.water-total{text-align:right;display:flex;flex-direction:column}
.water-total span{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#bed5d3}
.water-total b{color:#f1c969}
.mute{width:42px;height:42px;border:1px solid #638486;border-radius:50%;background:#255b5e;color:#fff;cursor:pointer}
.studio{position:relative;overflow:hidden;padding:18px 28px;background:linear-gradient(#dfe8d7 0 72%,#ad8255 72%)}
.placard{position:absolute;z-index:12;left:30px;top:18px;padding:9px 14px;border-radius:12px;background:rgba(255,248,231,.94);box-shadow:0 6px 16px rgba(46,42,30,.14);display:flex;gap:9px;align-items:baseline}
.placard b{font:700 17px Georgia,serif}
.placard span{font-size:11px;color:#65736d}
.sand-table{position:absolute;left:4%;right:27%;top:76px;height:365px;border:15px solid #8c6845;border-radius:28px;background:linear-gradient(158deg,#79955d 0 34%,#cbaa70 35% 100%);box-shadow:inset 0 0 0 8px #b78d5b,var(--shadow);overflow:hidden}
.ridge{position:absolute;z-index:1;background:linear-gradient(135deg,#758b55,#a88b5b);filter:drop-shadow(0 8px 5px rgba(70,55,37,.22))}
.left-ridge{left:-2%;top:5%;width:46%;height:58%;clip-path:polygon(0 0,69% 12%,100% 100%,0 82%)}
.right-ridge{right:-2%;top:1%;width:46%;height:60%;clip-path:polygon(31% 10%,100% 0,100% 82%,0 100%)}
.divide{position:absolute;z-index:5;left:47%;top:6%;height:48%;border-left:4px dashed rgba(255,248,215,.9);transform:rotate(-4deg)}
.divide span{position:absolute;left:8px;top:5px;width:100px;color:#fff8d7;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.tributary{position:absolute;z-index:3;height:7px;background:var(--water);border-radius:99px;transform-origin:left center}
.tributary.one{left:16%;top:39%;width:35%;transform:rotate(17deg)}
.tributary.two{right:13%;top:34%;width:37%;transform:rotate(157deg)}
.river{position:absolute;z-index:4;left:47%;top:33%;width:27%;height:78%;border:17px solid var(--water);border-left-color:transparent;border-right-color:transparent;border-radius:49%;transform:rotate(-13deg)}
.river i{position:absolute;left:-7px;top:23%;width:41px;height:43%;border:10px solid #2787aa;border-top-color:transparent;border-bottom-color:transparent;border-radius:49%}
.floodplain{position:absolute;z-index:2;left:38%;top:47%;width:42%;height:45%;border-radius:50%;background:rgba(118,176,163,.32);transition:transform .3s,opacity .3s}
.clouds{position:absolute;z-index:8;left:8%;right:8%;top:2%;display:flex;justify-content:space-around}
.clouds i{width:72px;height:26px;border-radius:99px;background:#edf3e9;box-shadow:21px -9px 0 3px #edf3e9,-17px -5px 0 #edf3e9}
.clouds.raining i{background:#b9cbca}
.clouds span{position:absolute;inset:20px 0 auto;height:130px;opacity:0;background:repeating-linear-gradient(102deg,transparent 0 34px,rgba(53,150,190,.7) 35px 38px,transparent 39px 67px)}
.clouds.raining span{opacity:1;animation:rain .65s linear 2}
.wetland,.levee,.vegetation,.pond{display:none;position:absolute;z-index:7}
.wetland.on{display:block;left:30%;bottom:7%;width:150px;height:70px;border-radius:50%;background:#5e9e91;border:5px solid #346f6a}
.wetland i{display:inline-block;width:4px;height:32px;margin:5px 16px;background:#3c6d47}
.wetland b,.levee b,.vegetation b,.pond b{position:absolute;white-space:nowrap;font-size:9px;text-transform:uppercase;letter-spacing:.07em}
.wetland b{left:16px;bottom:7px;color:#fff}
.levee.on{display:flex;left:62%;top:48%;height:115px;gap:7px}
.levee i{width:10px;background:#97713f;border-radius:8px}
.levee b{left:19px;top:-17px}
.vegetation.on{display:flex;left:13%;top:28%;gap:16px}
.vegetation i{width:6px;height:62px;background:#416e45;border-radius:5px}
.vegetation i:before{content:"";display:block;width:27px;height:27px;margin-left:-10px;border-radius:50%;background:#568c51}
.vegetation b{left:0;top:70px}
.pond.on{display:block;right:18%;bottom:7%;width:105px;height:58px;border-radius:50%;background:#438eaa;border:6px solid #6b9c71}
.pond b{top:60px}
.city{position:absolute;z-index:8;right:5%;bottom:12%;display:flex;align-items:flex-end;gap:4px;transition:right .35s}
.city.far{right:1%;transform:translateX(10px)}
.city span{width:30px;height:62px;background:#e2d4b2;border:4px solid #695b4b;box-shadow:inset 0 0 0 7px #b36d4c}
.city span:nth-child(2){height:85px}
.city b{position:absolute;left:0;bottom:-18px;width:100px;font-size:10px}
.outlet{position:absolute;z-index:9;right:4%;bottom:5%;color:#fff;text-shadow:0 1px 3px #234}
.outlet i{font-style:normal;font-size:30px}
.grain{display:none;position:absolute;z-index:11;width:32px;height:32px;border-radius:50%;place-items:center;border:3px solid #fff;box-shadow:0 4px 8px rgba(40,35,30,.3);transition:left .8s ease-out,top .8s ease-out}
.grain.on{display:grid}
.grain b{color:#fff}
.grain span{position:absolute;top:33px;font-size:9px;font-weight:900}
.grain.clay{left:48%;top:32%;background:#a94f67}
.grain.sand{left:43%;top:40%;background:#df9d37}
.grain.gravel{left:54%;top:36%;background:#5f6770}
.grain.clay.moved{left:84%;top:72%}
.grain.sand.moved{left:57%;top:66%}
.grain.gravel.moved{left:42%;top:48%}
.meander-board{position:absolute;z-index:10;left:4%;right:4%;top:92px;height:320px;display:none;align-items:center;justify-content:center;gap:18px}
.meander-board.on{display:flex}
.stage-card{position:relative;width:25%;height:230px;padding:24px 16px;border-radius:20px;background:#fff8e7;box-shadow:var(--shadow);opacity:.42}
.stage-card.active{opacity:1}
.stage-card span{position:absolute;left:12px;top:10px;display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:var(--teal);color:#fff;font-weight:900}
.stage-card svg{width:100%;height:150px}
.stage-card path{fill:none;stroke:var(--water);stroke-width:14;stroke-linecap:round}
.stage-card ellipse{fill:rgba(60,159,192,.45);stroke:#2787aa;stroke-width:5}
.stage-card b{display:block;text-align:center}
.downstream-proof{position:absolute;right:7%;bottom:-16px;padding:10px 15px;border-radius:14px;background:#174e51;color:#fff}
.downstream-proof i{font-style:normal;font-size:25px}
.wave-board{position:absolute;z-index:10;left:7%;right:7%;top:115px;height:260px;display:none;align-items:center;justify-content:center;gap:27px}
.wave-board.on{display:flex}
.wave-card{width:320px;min-height:205px;padding:18px;border-radius:21px;background:#fff8e7;box-shadow:var(--shadow)}
.wave-card span,.wave-card b,.wave-card small{display:block}
.wave-card span{font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.wave-card b{margin-top:8px;font:700 20px Georgia,serif}
.wave-card i{display:block;height:80px;background:linear-gradient(168deg,transparent 0 38%,#2f8eb0 39% 47%,transparent 48% 53%,#52abc0 54% 60%,transparent 61%)}
.wave-card.after i.lower{background:linear-gradient(172deg,transparent 0 48%,#3c9fc0 49% 56%,transparent 57%)}
.wave-card.after i.higher{background:linear-gradient(163deg,transparent 0 27%,#d97842 28% 39%,transparent 40%)}
.wave-arrow{font-size:38px}
.tradeoff{position:absolute;bottom:-42px;left:50%;transform:translateX(-50%);width:520px;text-align:center;font-weight:850}
.intervention-dock{position:absolute;z-index:14;right:2%;top:75px;width:23%;padding:12px;border-radius:17px;background:rgba(255,248,231,.96);box-shadow:var(--shadow)}
.intervention-dock>span{display:block;margin-bottom:8px;font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:#526863}
.intervention-dock button{width:100%;display:grid;grid-template-columns:35px 1fr;grid-template-rows:auto auto;text-align:left;margin:6px 0;padding:8px;border:2px solid transparent;border-radius:12px;background:#e9e2d1;color:var(--ink);cursor:pointer}
.intervention-dock button i{grid-row:1/3;display:grid;place-items:center;font-style:normal;font-size:21px}
.intervention-dock button b{font-size:12px}
.intervention-dock button small{color:#60716b}
.intervention-dock button.selected{border-color:#174e51;background:#d9eadc}
.intervention-dock.hidden{display:none}
.ledger{position:absolute;z-index:15;left:4%;right:4%;bottom:16px;display:flex;gap:8px;padding:9px;border-radius:15px;background:#174e51;color:#fff;box-shadow:var(--shadow)}
.ledger div{flex:1;display:flex;justify-content:space-between;padding:7px 9px;border-radius:9px;background:#245f62}
.ledger span{font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:#c8dcda}
.ledger b{color:#f1c969}
.impact{position:absolute;z-index:30;left:46%;top:46%;font:900 42px Georgia,serif;color:#fff;text-shadow:0 5px 12px rgba(0,0,0,.4);opacity:0;transform:translate(-50%,-50%) scale(.7)}
.impact.on{animation:impact .8s ease-out}
.toast{position:absolute;z-index:30;right:28px;bottom:80px;max-width:400px;padding:12px 17px;border-radius:13px;background:#174e51;color:#fff;opacity:0;transform:translateY(8px);transition:.16s}
.toast.on{opacity:1;transform:none}
.studio.highlight .sand-table,.studio.highlight .wave-board,.studio.highlight .meander-board{filter:drop-shadow(0 0 13px #fff)}
.action-tray{display:grid;grid-template-columns:minmax(370px,.86fr) minmax(500px,1.14fr);align-items:center;gap:30px;padding:23px 38px;background:var(--paper);border-top:1px solid #d1c4aa}
.mission-copy span{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.15em;color:#a34c38}
.mission-copy h1{font:700 clamp(24px,2.25vw,35px)/1.06 Georgia,serif;margin:6px 0}
.mission-copy p{margin:0;color:#66746d}
.controls{display:flex;justify-content:flex-end;align-items:center;gap:10px;flex-wrap:wrap}
.choice,.primary,.quiet{min-height:48px;border:0;border-radius:14px;padding:11px 17px;font-weight:850;cursor:pointer;transition:transform .15s ease-out}
.choice{background:#e6dece}
.choice small{display:block;font-size:10px;color:#65736d}
.primary{background:#174e51;color:#fff}
.primary.gold{background:var(--gold);color:#193b3c}
.quiet{background:transparent;border:1px solid #bcb19c}
.drop-hint{max-width:470px;padding:12px 16px;border:2px dashed #b68d45;border-radius:14px;background:#fff8e7;font-weight:850}
.choice:hover,.primary:hover,.quiet:hover{transform:translateY(-2px)}
@keyframes rain{from{transform:translateY(-20px)}
to{transform:translateY(55px)}
}
@keyframes impact{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}
35%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}
100%{opacity:0;transform:translate(-50%,-50%) scale(1.24)}
}
@media(max-width:980px){.game-shell{grid-template-rows:72px minmax(650px,1fr) auto}
.topbar{grid-template-columns:1fr auto auto}
.route,.water-total{display:none}
.studio{min-width:940px}
.action-tray{grid-template-columns:1fr;padding:22px}
.controls{justify-content:flex-start}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Raster watershed plate + semantic, manipulable simulation layers. */
.sand-table{background:#8d704d;isolation:isolate;touch-action:none}
.sand-table>.scene-art{position:absolute;z-index:0;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 50%;pointer-events:none;user-select:none;filter:saturate(1.05) contrast(1.02)}
.sand-table.context-only{left:2%;right:2%;top:60px;height:405px;border-width:10px}
.sand-table.context-only>.scene-art{opacity:.72;filter:saturate(.9) contrast(.96)}
.sand-table::after{position:absolute;z-index:2;left:var(--sculpt-x,47%);top:5%;width:16px;height:52%;border-radius:50%;content:"";pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,223,154,.84),transparent);filter:blur(2px);opacity:.35;transform:rotate(-4deg);transition:left .14s ease}
.sand-table.is-sculpting::after{width:38px;opacity:.9;box-shadow:0 0 28px rgba(255,218,128,.7)}
.ridge{opacity:.22}.tributary,.river{mix-blend-mode:screen;opacity:.78}.floodplain{opacity:.42}.city{filter:drop-shadow(0 4px 5px rgba(29,35,30,.28))}
.clouds{cursor:pointer;touch-action:manipulation}.clouds::after{position:absolute;left:50%;top:33px;padding:6px 10px;border-radius:999px;content:"Tap to rain";color:#173e41;background:rgba(255,248,231,.92);font-size:9px;font-weight:950;text-transform:uppercase;transform:translateX(-50%)}
.intervention-zone{display:none;position:absolute;z-index:13;min-width:104px;min-height:54px;border:3px dashed rgba(255,248,231,.95);border-radius:18px;color:#fff;background:rgba(23,78,81,.72);font-size:10px;font-weight:950;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;box-shadow:0 7px 20px rgba(26,47,43,.24)}
.sand-table.planning .intervention-zone{display:block}
.hillslope-zone{left:12%;top:31%}.channel-zone{left:46%;top:45%}.floodplain-zone{right:12%;top:63%}
.intervention-zone.is-drop-ready{color:#173e41;background:#f1c969;box-shadow:0 0 0 8px rgba(241,201,105,.28);transform:scale(1.07)}
.grain-tray{position:absolute;z-index:14;left:15px;bottom:18px;display:flex;gap:7px;padding:8px;border-radius:15px;background:rgba(23,78,81,.9);box-shadow:0 8px 20px rgba(37,31,24,.25)}
.grain-tray button{width:58px;height:58px;border:4px solid #fff;border-radius:50%;color:#fff;background:#a94f67;font-size:10px;font-weight:950;cursor:pointer;box-shadow:0 5px 0 rgba(36,31,28,.35)}
.grain-tray button:nth-child(2){background:#df9d37}.grain-tray button:nth-child(3){background:#5f6770}.grain-tray button:hover{transform:translateY(-3px) rotate(-4deg)}
.stage-card{cursor:pointer;touch-action:manipulation}.stage-card:focus-visible{outline:4px solid var(--gold);outline-offset:4px}.stage-card:not(.active):hover{opacity:.7;transform:translateY(-4px)}
.intervention-dock button{touch-action:none}.intervention-dock button.armed{border-color:#e5b84d;background:#fff0b2;box-shadow:0 0 0 4px rgba(229,184,77,.22)}.intervention-ghost{position:fixed;z-index:1000;width:180px;padding:14px;border:4px solid #fff;border-radius:18px;color:#173e41;background:#f5d36c;box-shadow:0 18px 40px rgba(25,37,35,.34);font:900 14px "Avenir Next",sans-serif;pointer-events:none;transform:translate(-50%,-50%) rotate(-4deg)}
.intervention-ghost i{margin-right:9px;font-size:24px}.intervention-ghost small{display:block;margin-top:4px}
.city-token{position:absolute;z-index:15;left:50%;bottom:20px;width:170px;height:82px;display:flex;align-items:flex-end;justify-content:center;gap:5px;padding:9px 12px 25px;border:4px solid #fff;border-radius:18px;color:#fff;background:#174e51;box-shadow:0 9px 0 #0a3638;touch-action:none;cursor:grab;transform:translateX(-50%)}
.city-token i{width:28px;height:36px;background:#e2d4b2;border:3px solid #8b5f42}.city-token i:nth-child(2){height:52px}.city-token b{position:absolute;bottom:6px;font-size:10px}.city-token.is-dragging{cursor:grabbing;box-shadow:0 16px 28px rgba(32,42,36,.32);transition:none}