:root {
  --ink: #173b46;
  --muted: #5f7478;
  --paper: #fffdf6;
  --teal: #0f8992;
  --teal-deep: #08616d;
  --blue: #249ccb;
  --blue-deep: #176b9b;
  --mint: #75d6c5;
  --coral: #ef755c;
  --gold: #f5b943;
  --gold-deep: #b97916;
  --energy: 0;
  --energy-glow: 16px;
  --energy-alpha: .18;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; }
body {
  margin: 0;
  min-width: 1060px;
  min-height: 700px;
  overflow: hidden;
  color: var(--ink);
  background: #e9f3ef;
  font-family: ui-rounded, "Avenir Next", "Nunito Sans", system-ui, sans-serif;
}
button, input { font: inherit; }
button:focus-visible, input:focus-visible { outline: 4px solid #102e56; outline-offset: 4px; }

.game-shell {
  width: min(1280px, calc(100vw - 48px));
  height: min(840px, calc(100vh - 34px));
  margin: 17px auto;
  display: grid;
  grid-template-rows: 48px minmax(470px, 1fr) 154px;
  gap: 13px;
}
.microbar { display: grid; grid-template-columns: 245px 1fr 52px; align-items: center; gap: 20px; }
.status-chip { display: grid; gap: 1px; padding: 5px 13px; border: 1px solid #cde0da; border-radius: 15px; background: rgba(255,255,255,.76); }
.status-chip span { color: var(--teal-deep); font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.status-chip strong { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.status-chip strong b { font-size: 18px; }
.mini-drop { width: 12px; height: 16px; display: inline-block; border-radius: 70% 45% 65% 45%; background: var(--blue); transform: rotate(45deg); box-shadow: inset 2px 2px #8fe8ff; }
.stage-rail { display: flex; justify-content: center; gap: 12px; }
.stage-rail i { width: 45px; height: 7px; border-radius: 99px; background: #cbdad5; transition: background 160ms, transform 160ms; }
.stage-rail i.is-active { background: var(--blue); transform: scaleX(1.16); }
.stage-rail i.is-done { background: var(--mint); }
.mute { width: 52px; height: 46px; border: 1px solid #c9ddd7; border-radius: 15px; background: #fffdf7; color: var(--teal-deep); box-shadow: 0 4px 0 #b4ccc5; cursor: pointer; font-size: 20px; font-weight: 900; }

.world { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.8); border-radius: 32px; background: #a9e3ec; box-shadow: 0 20px 55px rgba(35,75,76,.16); isolation: isolate; }
.sky-wash { position: absolute; inset: 0; z-index: -5; background: linear-gradient(180deg, #aeeaf3 0 58%, #d4efe0 58% 100%); transition: filter 300ms; }
.world.is-mountain .sky-wash { background: linear-gradient(180deg,#88d9eb,#d9efe3 63%); }
.world.is-dark .sky-wash { filter: saturate(.75) brightness(.8); }

.sun { position: absolute; z-index: -1; left: 7%; top: 9%; width: 106px; height: 106px; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #fff6ae 0 16%, #ffd85c 18% 58%, #ef9d27 60%); box-shadow: 0 0 var(--energy-glow) rgba(255,188,54,var(--energy-alpha)); transition: filter 200ms, box-shadow 200ms; }
.sun::before, .sun::after, .sun i::before, .sun i::after { content: ""; position: absolute; left: 43px; top: -22px; width: 19px; height: 151px; border-radius: 99px; background: #f6b63e; z-index: -1; transform-origin: center; opacity: var(--energy-alpha); }
.sun::after { transform: rotate(45deg); }
.sun i::before { transform: rotate(90deg); }
.sun i::after { transform: rotate(135deg); }

.cloud { position: absolute; z-index: 1; left: 49%; top: 10%; width: 245px; height: 95px; border-radius: 58px; background: #fffdf7; box-shadow: 0 11px 0 #d6e3e5, 0 22px 40px rgba(37,74,82,.13); opacity: .38; transform: translateY(-4px) scale(.88); transition: opacity 350ms, transform 350ms, filter 200ms; }
.cloud::before, .cloud::after, .cloud i { content: ""; position: absolute; border-radius: 50%; background: inherit; }
.cloud::before { left: 31px; top: -30px; width: 98px; height: 95px; }
.cloud::after { right: 31px; top: -42px; width: 118px; height: 112px; }
.cloud i:nth-child(1) { left: 104px; top: -47px; width: 92px; height: 87px; }
.world[data-stage="cloud"] .cloud, .world[data-stage="rain"] .cloud, .world[data-stage="runoff"] .cloud, .world[data-stage="mountain"] .cloud { opacity: 1; transform: none; }
.world.is-cooling .cloud { filter: drop-shadow(0 0 18px rgba(65,211,220,.75)); }

.mountain { position: absolute; z-index: -2; right: -2%; bottom: 17%; width: 46%; height: 62%; clip-path: polygon(0 100%, 48% 4%, 100% 100%); background: #476d7c; }
.mountain-back { right: 22%; bottom: 15%; width: 35%; height: 47%; background: #7296a2; opacity: .72; }
.mountain-front { background: linear-gradient(135deg,#486f7e 0 46%,#315867 47%); }
.snow { position: absolute; left: 39%; top: 2%; width: 24%; height: 24%; background: #f3faf8; clip-path: polygon(50% 0,100% 100%,72% 77%,57% 100%,38% 74%,18% 100%,0 100%); }
.land { position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 33%; background: linear-gradient(#68aa67,#4c885c); clip-path: polygon(0 40%,15% 19%,28% 45%,45% 14%,63% 45%,82% 20%,100% 42%,100% 100%,0 100%); }
.hill { position: absolute; bottom: 0; width: 360px; height: 150px; border-radius: 55% 55% 0 0; background: #70b66f; }
.hill.one { left: 29%; }.hill.two { right: -4%; background: #568e61; }
.lake { position: absolute; z-index: 1; left: -2%; bottom: 0; width: 49%; height: 27%; border-radius: 0 72% 0 0; background: linear-gradient(#36afd1,#1379ac); box-shadow: inset 0 8px rgba(255,255,255,.42); }
.lake i { position: absolute; left: 8%; right: 5%; height: 5px; border-radius: 99px; background: rgba(255,255,255,.5); }
.lake i:nth-child(1){top:25%}.lake i:nth-child(2){top:50%;left:21%}.lake i:nth-child(3){top:72%;right:22%}
.river { position: absolute; z-index: 2; right: 10%; bottom: 0; width: 43%; height: 31%; clip-path: polygon(88% 0,100% 0,69% 42%,50% 44%,38% 65%,0 100%,0 88%,31% 56%,46% 31%,65% 29%); background: #35b5d5; filter: drop-shadow(0 0 2px #fff); }
.river i { position: absolute; inset: 8px; clip-path: inherit; background: rgba(255,255,255,.46); }
.world[data-stage="rest"] .river, .world[data-stage="vapour"] .river, .world[data-stage="cloud"] .river { opacity: .34; }

.particle-field { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.water-particle { position: absolute; width: 12px; height: 12px; border: 2px solid #1073a5; border-radius: 50%; background: radial-gradient(circle at 35% 28%,#e2fbff 0 16%,#38bde7 20% 62%,#1578ad 66%); box-shadow: 0 2px 4px rgba(8,75,105,.28); transition: left 800ms cubic-bezier(.2,.8,.2,1), top 800ms cubic-bezier(.2,.8,.2,1), transform 450ms, opacity 200ms; }
.water-particle.is-tagged { width: 19px; height: 19px; z-index: 8; pointer-events: auto; border: 4px solid #fff6b6; background: #f5b93e; box-shadow: 0 0 0 4px #b87812, 0 0 20px #fff2a4; cursor: grab; }
.water-particle.is-tagged:active { cursor: grabbing; }
.particle-field.is-pointing .water-particle { animation: particle-pop 650ms ease-out infinite alternate; }

.energy-control { position: absolute; z-index: 8; left: 25px; bottom: 26px; width: 174px; min-height: 142px; padding: 17px 18px; display: grid; align-content: center; gap: 7px; border: 5px solid #ffd76b; border-radius: 50%; background: linear-gradient(145deg,#ffc84b,#e99b25); color: #5c3b08; box-shadow: 0 9px 0 #a96813, 0 16px 26px rgba(73,48,12,.22); text-align: center; }
.energy-control span { font-size: 12px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.energy-control b { font-size: 25px; }
.energy-control input { width: 132px; accent-color: #7b4c06; cursor: ew-resize; }
.energy-control.is-disabled { opacity: .45; pointer-events: none; }

.cool-control { position: absolute; z-index: 9; left: 22%; right: 23%; top: 19%; height: 66px; pointer-events: none; }
.cool-control input { width: 100%; height: 30px; opacity: .01; pointer-events: auto; cursor: ew-resize; }
.cool-control::before { content: ""; position: absolute; left: calc(var(--cool-pos,12) * 1% - 45px); top: 3px; width: 105px; height: 54px; border-radius: 65% 35% 70% 30%; background: rgba(106,228,218,.76); border: 3px solid #e8ffff; box-shadow: 0 0 22px rgba(83,227,220,.8); transform: rotate(-6deg); transition: left 80ms linear; }
.cool-control span { position: absolute; z-index: 2; left: calc(var(--cool-pos,12) * 1% - 6px); top: 13px; color: #086e79; font-size: 24px; pointer-events: none; transition: left 80ms linear; }
.cool-control b { position: absolute; left: 50%; top: 51px; transform: translateX(-50%); padding: 4px 10px; border-radius: 99px; background: rgba(255,255,255,.86); color: #176b74; font-size: 11px; pointer-events: none; }

.particle-lens { position: absolute; z-index: 10; right: 22px; top: 20px; width: 138px; height: 138px; border: 9px solid #f1fbf8; border-radius: 50%; background: rgba(24,103,133,.88); box-shadow: 0 7px 0 #356875, 0 14px 28px rgba(19,55,64,.25); cursor: pointer; }
.particle-lens b { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); width: max-content; color: white; font-size: 11px; }
.lens-particles i { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: #c5f8ff; transition: transform 260ms; }
.lens-particles i:nth-child(1){left:27px;top:34px}.lens-particles i:nth-child(2){left:61px;top:24px}.lens-particles i:nth-child(3){left:80px;top:48px}.lens-particles i:nth-child(4){left:43px;top:62px}.lens-particles i:nth-child(5){left:72px;top:77px}.lens-particles i:nth-child(6){left:25px;top:80px}
.particle-lens[aria-expanded="true"] .lens-particles i { transform: translate(18px,-3px) scale(1.35); background: #62d8e8; box-shadow: 0 0 0 4px rgba(255,255,255,.25); }

.coalescence { position: absolute; z-index: 8; right: 25px; bottom: 22px; width: 216px; padding: 12px; border-radius: 17px; background: rgba(255,255,255,.9); box-shadow: 0 8px 22px rgba(36,68,71,.18); }
.coalescence span { display: block; height: 10px; overflow: hidden; border-radius: 99px; background: #d6e5e2; }
.coalescence i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg,var(--mint),var(--blue)); transition: width 120ms; }
.coalescence b { display: block; margin-top: 6px; font-size: 12px; }
.impact { position: absolute; z-index: 20; left: 50%; top: 44%; transform: translate(-50%,-50%) scale(.7); opacity: 0; color: #fff; font-size: 46px; font-weight: 1000; text-shadow: 0 4px 0 var(--teal-deep), 0 12px 30px rgba(0,0,0,.2); pointer-events: none; }
.impact.is-on { animation: impact 950ms ease-out; }
.toast { position: absolute; z-index: 21; left: 50%; bottom: 18px; transform: translate(-50%,10px); opacity: 0; padding: 10px 18px; border-radius: 99px; background: #173b46; color: white; font-size: 13px; font-weight: 850; transition: opacity 160ms, transform 160ms; }
.toast.is-on { opacity: 1; transform: translate(-50%,0); }
.world.is-highlight-lake .lake, .world.is-highlight-vapour .particle-field, .world.is-highlight-cloud .cloud, .world.is-highlight-rain .mountain-front, .world.is-highlight-runoff .river { filter: drop-shadow(0 0 16px #fff36e) brightness(1.12); }

.action-tray { display: grid; grid-template-columns: minmax(320px,.8fr) minmax(590px,1.55fr); gap: 32px; align-items: center; padding: 22px 28px; border-radius: 27px; background: var(--paper); box-shadow: 0 12px 35px rgba(35,67,58,.12); }
.mission-copy span { color: var(--teal-deep); font-size: 11px; font-weight: 950; letter-spacing: .13em; text-transform: uppercase; }
.mission-copy h1 { margin: 5px 0 5px; max-width: 470px; font-size: 28px; line-height: 1.06; letter-spacing: -.03em; }
.mission-copy p { margin: 0; color: var(--muted); font-size: 13px; font-weight: 700; }
.controls { display: flex; justify-content: flex-end; align-items: center; gap: 11px; min-width: 0; }
.choice, .primary, .secondary, .hold { min-height: 62px; border: 0; border-radius: 17px; cursor: pointer; transition: transform 150ms, box-shadow 150ms; font-weight: 900; }
.choice:hover, .primary:hover, .secondary:hover, .hold:hover { transform: translateY(-3px); }
.choice:active, .primary:active, .secondary:active, .hold:active { transform: translateY(2px) scale(.98); }
.choice { min-width: 145px; max-width: 190px; padding: 11px 16px; background: #eaf1ee; color: var(--ink); }
.choice small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.primary, .hold { min-width: 205px; padding: 13px 24px; color: white; background: var(--teal); box-shadow: 0 7px 0 var(--teal-deep); font-size: 16px; }
.primary.gold { color: #523708; background: var(--gold); box-shadow: 0 7px 0 var(--gold-deep); }
.secondary { min-width: 155px; padding: 12px 18px; background: #e8f2ef; color: var(--teal-deep); box-shadow: 0 5px 0 #b7d2ca; }
.hold { background: var(--blue); box-shadow: 0 7px 0 var(--blue-deep); touch-action: none; }
.feedback { max-width: 330px; font-size: 15px; font-weight: 800; line-height: 1.35; }
.feedback strong { display: block; font-size: 21px; }

@keyframes particle-pop { to { transform: scale(1.45); filter: brightness(1.2); } }
@keyframes impact { 15% { opacity: 1; transform: translate(-50%,-50%) scale(1.12) rotate(-2deg); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-70%) scale(.95); } }

@media (max-height: 770px) {
  .game-shell { grid-template-rows: 42px minmax(430px,1fr) 136px; }
  .action-tray { padding-block: 16px; }
  .energy-control { transform: scale(.86); transform-origin: left bottom; }
  .mission-copy h1 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

.hold small { display: block; margin-top: 3px; font-size: 10px; font-weight: 750; opacity: .78; }
.hold:active, .hold:focus-visible { transform: translateY(2px); box-shadow: 0 2px 0 #315f70, 0 0 0 4px rgba(255,255,255,.9); }
.journey-control { display: flex; align-items: center; gap: 12px; }
.journey-control > span { min-width: 48px; font-size: 12px; font-weight: 900; letter-spacing: .08em; color: #586b71; }
.journey-control .primary { min-width: 210px; }