/* ============================================================
   VISUAL IDENTITY — EcoCity 2045 (Solarpunk)
   ============================================================ */
:root{
  --touch:56px;
  --ease:cubic-bezier(.4,0,.2,1);
  --font:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --eco-leaf:#3fae6b; --eco-leaf-dark:#1f6b41;
  --eco-gold:#f5c451; --eco-teal:#27b7c4; --ink:#13241b;
  --panel:rgba(255,255,255,.94); --panel-edge:rgba(31,107,65,.28);
  --shadow:0 10px 34px rgba(15,40,26,.28);
}
/* Stage 0 — POLLUTED */
body[data-stage="0"]{
  --sky-top:#9aa09a; --sky-mid:#b6ad9a; --sky-bot:#c9bfa6;
  --ground:#8a8068; --water:#6c7164; --glass:#9fb0a6;
  --foliage:#6f7a4d; --foliage2:#8a8a55; --accent:#9c925d; --haze:.6; --sun:#e9e1c4;
}
/* Stage 1 — RECOVERING */
body[data-stage="1"]{
  --sky-top:#79bcd6; --sky-mid:#a9d2c2; --sky-bot:#dbe6ad;
  --ground:#7fa168; --water:#3f9fb4; --glass:#bfe0e6;
  --foliage:#56a151; --foliage2:#7cc06a; --accent:#7fbf6a; --haze:.25; --sun:#fff0c2;
}
/* Stage 2 — THRIVING */
body[data-stage="2"]{
  --sky-top:#5cc6ee; --sky-mid:#9fe3da; --sky-bot:#cdf3bf;
  --ground:#46ae64; --water:#1fb3d6; --glass:#d6f6ef;
  --foliage:#33a85f; --foliage2:#74e29a; --accent:#7fe0a0; --haze:0; --sun:#fff4cf;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;font-family:var(--font);color:var(--ink);background:#0f1a14}
button{font-family:inherit;cursor:pointer}

#app{position:fixed;inset:0}
#scene{position:absolute;inset:0;transition:opacity .5s var(--ease)}
#scene.swapping{opacity:0;transform:scale(.96);transition:opacity .25s var(--ease),transform .25s var(--ease)}
#scene{transition:opacity .35s var(--ease),transform .35s var(--ease)}
.scene-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Scene title overlay — MUST be non-interactive and not a full-width block,
   otherwise it sits on top of the SVG and swallows district/source clicks. */
.scene-title{position:absolute;left:50%;top:9%;transform:translateX(-50%);width:max-content;max-width:92vw;
  text-align:center;z-index:15;pointer-events:none}
.scene-title .wordmark{display:block;margin:0 auto;max-width:90vw;height:auto}
.sky-top,.ground,.water,.glassfill,.foliagefill{transition:fill 1.2s var(--ease),stop-color 1.2s var(--ease)}

/* ---- Awakening haze ---- */
.haze{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(150,150,140,.55),rgba(120,118,100,.15));
  transition:opacity 2.6s var(--ease)}

/* ---- Ambient animations (compositor-friendly: transform/opacity) ---- */
.amb{will-change:transform}
@keyframes drift{from{transform:translateX(-240px)}to{transform:translateX(1240px)}}
@keyframes drift2{from{transform:translateX(-360px)}to{transform:translateX(1360px)}}
@keyframes walk{from{transform:translateX(-80px)}to{transform:translateX(1080px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes sway{from{transform:rotate(-2.4deg)}to{transform:rotate(2.4deg)}}
@keyframes bob{from{transform:translateY(0)}to{transform:translateY(-7px)}}
@keyframes shimmer{0%,100%{opacity:.25;transform:translateX(0)}50%{opacity:.7;transform:translateX(18px)}}
@keyframes rays{to{transform:rotate(360deg)}}
@keyframes floatleaf{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(60px,40px) rotate(140deg)}}
@keyframes pulseGlow{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.8;transform:scale(1.12)}}

.cloud{animation:drift 70s linear infinite}
.cloud.slow{animation:drift2 110s linear infinite}
.turbine .blades{transform-box:fill-box;transform-origin:center;animation:spin 7s linear infinite}
.tree{transform-box:fill-box;transform-origin:bottom center;animation:sway 5.5s ease-in-out infinite alternate}
.tree.b{animation-duration:6.8s}
.walker{animation:walk 17s linear infinite}
.walker.w2{animation-duration:22s;animation-delay:-6s}
.walker.w3{animation-duration:13s;animation-delay:-3s}
.boat{transform-box:fill-box;transform-origin:center;animation:bob 3.2s ease-in-out infinite alternate}
.shimmer{animation:shimmer 5s ease-in-out infinite}
.sunrays{transform-box:fill-box;transform-origin:center;animation:rays 90s linear infinite}
.leaf-fall{animation:floatleaf 9s linear infinite}

/* ---- Art Pass 1.5: lighting direction (sun upper-right -> shadow lower-left) ---- */
.soft{filter:drop-shadow(-5px 8px 6px rgba(8,24,14,.30))}
.softsm{filter:drop-shadow(-3px 5px 4px rgba(8,24,14,.26))}
.warm{mix-blend-mode:soft-light;pointer-events:none}
@keyframes spinrev{to{transform:rotate(-360deg)}}
.lmrings{transform-box:fill-box;transform-origin:center;animation:spin 30s linear infinite}
.lmrings.r2{animation:spinrev 40s linear infinite}
.lmcore{transform-box:fill-box;transform-origin:center;animation:pulseGlow 4.5s ease-in-out infinite}
/* ---- Crisis state: visible at stage 0, dissolves as the city heals ---- */
.crisis{transition:opacity 2.4s var(--ease)}
body:not([data-stage="0"]) .crisis{opacity:0;pointer-events:none}
body[data-stage="0"] .landmark .lmcore{opacity:.28}
body[data-stage="0"] .landmark .canopy{opacity:.72}

/* ---- Transformation sequence overlays (visible only during the demonstration) ---- */
.tcaption{position:absolute;left:50%;top:60%;transform:translateX(-50%);max-width:80%;text-align:center;
  color:#fff;font-size:clamp(15px,2.7vw,23px);font-weight:600;line-height:1.4;
  text-shadow:0 2px 18px rgba(0,0,0,.65);opacity:0;transition:opacity .7s var(--ease);pointer-events:none;z-index:18}
.tcaption.show{opacity:1}
.cta-row{transition:opacity .6s var(--ease)}
.lmhero{transition:opacity .7s var(--ease);pointer-events:none}
.lmhero.show{opacity:1}
@keyframes heroPulse{0%{transform:scale(.8)}55%{transform:scale(1.12)}100%{transform:scale(1)}}
.lmhero.show .hglow{transform-box:fill-box;transform-origin:center;animation:heroPulse 1.9s ease-out}
.hrays{transform-box:fill-box;transform-origin:center;animation:rays 60s linear infinite}
@keyframes hleafRise{0%{transform:translateY(8px) rotate(0);opacity:0}25%{opacity:1}100%{transform:translateY(-98px) rotate(130deg);opacity:0}}
.lmhero.show .hleaf{transform-box:fill-box;transform-origin:center;animation:hleafRise 2.9s ease-out infinite}

/* ============================================================
   MENTOR SYSTEM
   ============================================================ */
#mentor{position:fixed;top:16px;left:16px;z-index:40;max-width:min(360px,72vw);
  background:var(--panel);border:1px solid var(--panel-edge);border-radius:20px;
  box-shadow:var(--shadow);backdrop-filter:blur(7px);overflow:hidden;
  transition:transform .35s var(--ease)}
#mentor .m-head{display:flex;align-items:center;gap:10px;padding:9px 10px}
#mentor .m-avatar{width:44px;height:44px;border-radius:50%;flex:0 0 auto;border:2px solid #fff;
  box-shadow:0 2px 8px rgba(0,0,0,.18);overflow:hidden;background:#bfe9c8}
#mentor .m-name{font-weight:700;font-size:14px;flex:1;line-height:1.15}
#mentor .m-name small{display:block;font-weight:500;opacity:.6;font-size:11px}
#mentor .m-toggle{min-width:var(--touch);min-height:var(--touch);border:0;border-radius:14px;
  background:transparent;display:flex;align-items:center;justify-content:center;color:var(--eco-leaf-dark)}
#mentor .m-body{padding:0 14px 14px;font-size:14px;line-height:1.45;max-width:340px}
#mentor.collapsed .m-body{display:none}
#mentor.collapsed{max-width:max-content}

/* ============================================================
   NAVIGATION SYSTEM
   ============================================================ */
#nav{position:fixed;right:16px;bottom:16px;z-index:40;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
#nav button{min-width:var(--touch);min-height:var(--touch);padding:0 16px 0 14px;border:1px solid var(--panel-edge);
  border-radius:16px;background:var(--panel);box-shadow:var(--shadow);font-size:14px;font-weight:600;color:var(--ink);
  display:flex;align-items:center;gap:9px;transition:transform .15s var(--ease)}
#nav button:active{transform:scale(.93)}
#nav svg{width:22px;height:22px;flex:0 0 auto}
.ic{fill:none;stroke:var(--eco-leaf-dark);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Mission replay control — scene-level restart only; bottom-left, clear of mentor (top-left) and #nav (bottom-right). */
#replayBtn{position:fixed;left:16px;bottom:16px;z-index:40;display:none;min-height:var(--touch);padding:0 16px 0 14px;
  border:1px solid var(--panel-edge);border-radius:16px;background:var(--panel);box-shadow:var(--shadow);
  font-size:14px;font-weight:600;color:var(--ink);align-items:center;gap:9px;cursor:pointer;transition:transform .15s var(--ease)}
#replayBtn.show{display:flex}
#replayBtn:active{transform:scale(.93)}
#replayBtn svg{width:22px;height:22px;flex:0 0 auto}

/* ---- CTA buttons ---- */
.cta-row{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);display:flex;gap:16px;z-index:20}
.cta{min-height:var(--touch);padding:0 30px;border-radius:30px;border:0;font-size:17px;font-weight:700;
  display:flex;align-items:center;gap:10px;box-shadow:var(--shadow);transition:transform .15s var(--ease)}
.cta:active{transform:scale(.95)}
.cta.primary{background:linear-gradient(180deg,#54c47f,var(--eco-leaf-dark));color:#fff;position:relative}
.cta.primary::after{content:"";position:absolute;inset:-4px;border-radius:32px;border:2px solid rgba(255,255,255,.5);
  animation:pulseGlow 2.6s ease-in-out infinite;pointer-events:none}
.cta.ghost{background:var(--panel);color:var(--ink)}
.cta svg{width:22px;height:22px}
.cta.primary svg .ic{stroke:#fff}

/* ---- District vignettes ---- */
.district{cursor:pointer}
.vig{transform-box:fill-box;transform-origin:center bottom;transition:transform .2s var(--ease);filter:drop-shadow(-3px 6px 5px rgba(8,24,14,.24))}
.district:active .vig{transform:scale(.95)}
.district.locked .vig{filter:grayscale(.85) brightness(.78)}
.district.active .glowring{animation:pulseGlow 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.dplate{fill:rgba(12,30,20,.62)}
.dlabel{font-size:13px;font-weight:700;fill:#fff}
.startTag{font-size:11px;font-weight:800;fill:#0f3a22}
.doneTag{font-size:11px;font-weight:800;fill:#eafff1}

/* ---- Mission complete: appreciation banner before auto-advance ---- */
.mcele{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%) scale(.7);opacity:0;z-index:30;
  background:linear-gradient(180deg,#54c47f,#1f6b41);color:#fff;font-weight:800;
  font-size:clamp(16px,3.2vw,26px);padding:14px 30px;border-radius:20px;box-shadow:var(--shadow);
  pointer-events:none;text-align:center;letter-spacing:.5px}
.mcele small{display:block;font-size:13px;font-weight:600;opacity:.9;margin-top:5px;letter-spacing:.3px}
@keyframes mceleAnim{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}12%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}22%{transform:translate(-50%,-50%) scale(1)}88%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
.mcele.go{animation:mceleAnim 4s var(--ease) forwards}

/* ---- Mission 1: Jejak Sampah (additive) ---- */
.msrc{cursor:pointer}
.msrc .mglow{transform-box:fill-box;transform-origin:center;animation:pulseGlow 2.2s ease-in-out infinite}
.mtrash,.mpatch{transition:opacity .9s var(--ease)}
.msrc.cleaned{pointer-events:none}
.msrc.cleaned .mtrash{opacity:0}
.msrc.cleaned .mglow{opacity:0;animation:none}
.msrc.cleaned .mpatch{opacity:1}
.mdots{position:absolute;left:50%;top:13%;transform:translateX(-50%);display:flex;gap:9px;z-index:18}
.mdot{width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.5);border:2px solid #fff;transition:background .3s var(--ease)}
.mdot.on{background:var(--eco-leaf)}
.mcard-wrap{position:absolute;inset:0;z-index:55;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(10,18,14,.5);backdrop-filter:blur(3px);opacity:0;transition:opacity .25s var(--ease)}
.mcard-wrap.show{opacity:1}
.mcard{background:#fff;border-radius:24px;max-width:430px;width:100%;padding:22px 24px 20px;box-shadow:var(--shadow)}
.mcard h3{margin:0 0 8px;color:var(--eco-leaf-dark);font-size:20px;display:flex;align-items:center;gap:10px}
.mcard h3 svg{width:30px;height:30px}
.mcard .mrow{margin:6px 0;font-size:14px;line-height:1.45}
.mcard .mrow b{color:var(--ink)}
.mcard .mq{margin:14px 0 10px;font-weight:700;font-size:15px}
.mcats{display:flex;flex-direction:column;gap:10px}
.mbtn{min-height:var(--touch);border:1px solid var(--panel-edge);border-radius:14px;background:#f3faf5;
  font-size:16px;font-weight:700;color:var(--ink);display:flex;align-items:center;justify-content:center;gap:10px;padding:0 16px;
  transition:transform .15s var(--ease)}
.mbtn:active{transform:scale(.97)}
.mhint{margin-top:10px;font-size:13px;color:#b8543f;min-height:18px;text-align:center}
.mfinish{position:absolute;left:50%;bottom:11%;transform:translateX(-50%);z-index:20;display:flex;flex-direction:column;
  align-items:center;gap:14px;opacity:0;pointer-events:none;transition:opacity .8s var(--ease)}
.mfinish.show{opacity:1;pointer-events:auto}
.mdots{pointer-events:none}
#mSmog,#mRiverClear{pointer-events:none}

/* ---- Mission 2: Pilah Cerdas (additive) ---- */
.m2item{transition:transform .7s var(--ease),opacity .4s var(--ease);cursor:pointer}
.m2item .mglow{transform-box:fill-box;transform-origin:center;animation:pulseGlow 2.2s ease-in-out infinite}
.m2hit{cursor:pointer}
.m2station{cursor:pointer}
.m2glow{transform-box:fill-box;transform-origin:center;opacity:0;transition:opacity .3s var(--ease)}
.m2station.pick .m2glow{opacity:1;animation:pulseGlow 2.1s ease-in-out infinite}
.m2dark{transition:opacity .7s var(--ease)}
.m2station.on .m2dark{opacity:0}
.m2product{opacity:0;transform-box:fill-box;transform-origin:center bottom;transform:scale(.4);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.m2station.on .m2product{opacity:1;transform:scale(1)}
.m2gear{transform-box:fill-box;transform-origin:center}
.m2station.on .m2gear{animation:spin 4s linear infinite}
.m2dim{pointer-events:none;transition:opacity 1s var(--ease)}
.m2belt path{stroke-dasharray:14 12;animation:beltmove 1.1s linear infinite}
@keyframes beltmove{to{stroke-dashoffset:-26}}

/* ---- Mission 3: Daur Ulang Kreatif (additive) ---- */
.m3mat{transform-box:fill-box;transform-origin:center}
@keyframes m3morph{0%{transform:scale(1)}40%{transform:scale(1.2)}100%{transform:scale(1)}}
.m3mat.morphing{animation:m3morph .5s var(--ease)}
.m3dim{pointer-events:none;transition:opacity 1s var(--ease)}
.m3bloom{pointer-events:none;opacity:0;transform-box:fill-box;transform-origin:center}
.m3bloom.go{animation:m3bloomgo 2.6s var(--ease) forwards}
@keyframes m3bloomgo{0%{opacity:0;transform:scale(.2)}25%{opacity:.8}100%{opacity:0;transform:scale(3)}}
.m3tools{position:absolute;left:50%;bottom:15%;transform:translateX(-50%);display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:90vw;z-index:20}
.m3tool{min-height:56px;min-width:104px;border:1px solid var(--panel-edge);border-radius:14px;background:#f3faf5;font-size:15px;font-weight:700;color:var(--ink);display:flex;align-items:center;justify-content:center;gap:9px;padding:0 14px;transition:transform .15s var(--ease)}
.m3tool:active{transform:scale(.96)}
.m3tool svg{width:20px;height:20px;flex:0 0 auto}
.m3tool .m3lab{display:flex;flex-direction:column;align-items:flex-start;line-height:1.05;text-align:left}
.m3tool .m3lab small{font-weight:600;font-size:11px;opacity:.65}

/* ---- Mission 4: Sungai Kehidupan (additive) ---- */
.m4water{transition:fill 1.6s var(--ease)}
.m4cleanup{cursor:pointer}
.m4life{opacity:0;transition:opacity 1.1s var(--ease)}
.m4life.show{opacity:1}
.m4sway{transform-box:fill-box;transform-origin:bottom center;animation:sway 5s ease-in-out infinite alternate}
@keyframes m4swim{from{transform:translateX(0)}to{transform:translateX(820px)}}
.m4fish1{animation:m4swim 7s linear infinite}
.m4fish2{animation:m4swim 9.5s linear infinite;animation-delay:-3.5s}
.m4chain{position:absolute;left:50%;bottom:11%;transform:translateX(-50%);display:flex;gap:10px;z-index:20;flex-wrap:wrap;justify-content:center;max-width:92vw}
/* All not-yet-restored links look identical (no "available" highlight) so the
   learner must reason which life the river can support now; done links go green. */
.m4link{min-height:58px;min-width:92px;border:1px solid var(--panel-edge);border-radius:14px;background:#f3faf5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:6px 10px;font-size:13px;font-weight:700;color:var(--ink);opacity:1;transition:transform .15s var(--ease),background .3s var(--ease)}
.m4link.done{background:#dff5e6;border-color:var(--eco-leaf)}

/* ---- Mission 5: Ekonomi Sirkular (additive) ---- */
.m5node{cursor:pointer}
.m5node .m5ring{opacity:0;transition:opacity .2s var(--ease)}
.m5node.sel .m5ring{opacity:1}
.m5link{stroke:var(--eco-leaf);stroke-width:5;fill:none;stroke-linecap:round;stroke-dasharray:9 10;animation:m5flow 1s linear infinite}
@keyframes m5flow{to{stroke-dashoffset:-19}}
.m5benefit{opacity:0;transition:opacity .8s var(--ease)}
.m5benefit.show{opacity:1}
.m5bloom{pointer-events:none;opacity:0;transform-box:fill-box;transform-origin:center}
.m5bloom.go{animation:m3bloomgo 2.8s var(--ease) forwards}
.m5loop{opacity:0;transform-box:fill-box;transform-origin:center;transition:opacity .6s var(--ease)}
.m5loop.go{opacity:.55;animation:spin 10s linear infinite}
.m5token{offset-rotate:0deg;animation:m5orbit 6s linear infinite}
@keyframes m5orbit{to{offset-distance:100%}}

/* ---- Mission 6: Kota Tanpa Sampah (additive) ---- */
.m6site{cursor:pointer}
.m6halo{fill:var(--eco-leaf);opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.m6site.placed .m6halo{opacity:.15}
.m6site.placed .m6marker{opacity:.22}
.m6site .m6post{opacity:0;transition:opacity .3s var(--ease)}
.m6site.placed .m6post{opacity:1}
.m6disk{transition:fill .6s var(--ease)}
.m6zone.served .m6disk{fill:var(--eco-leaf)}
.m6litter{transition:opacity .5s var(--ease)}
.m6zone.served .m6litter{opacity:0}
.m6tray{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);display:flex;gap:8px;align-items:center;z-index:20;background:var(--panel);border:1px solid var(--panel-edge);border-radius:16px;padding:7px 14px;box-shadow:var(--shadow);font-size:13px;font-weight:700;color:var(--ink)}
.m6trayicon{width:28px;height:28px;opacity:.28;transition:opacity .3s var(--ease)}
.m6trayicon.have{opacity:1}
.m6net{stroke:var(--eco-gold);stroke-width:4;fill:none;stroke-dasharray:9 9;animation:m5flow 1s linear infinite}
.m6bloom{pointer-events:none;opacity:0;transform-box:fill-box;transform-origin:center}
.m6bloom.go{animation:m3bloomgo 2.8s var(--ease) forwards}
/* mastery payoff: city-wide sweep + collection trucks + Network Online */
.m6sweep{pointer-events:none}
.m6sweepbar{opacity:0}
.m6sweep.go .m6sweepbar{animation:m6wipe 1.8s ease-out forwards}
@keyframes m6wipe{0%{transform:translateX(-320px);opacity:0}15%{opacity:1}100%{transform:translateX(1080px);opacity:0}}
.m6sparkle{opacity:0;transform-box:fill-box;transform-origin:center}
.m6sweep.go .m6sparkle{animation:m6spark 1.1s ease-out forwards}
@keyframes m6spark{0%{opacity:0;transform:scale(.3)}45%{opacity:1;transform:scale(1.25)}100%{opacity:0;transform:scale(1)}}
.m6truck{pointer-events:none;offset-rotate:auto;animation:m5orbit 5s linear infinite}
.m6online{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%) scale(.7);opacity:0;z-index:25;background:linear-gradient(180deg,#54c47f,#1f6b41);color:#fff;font-weight:800;font-size:clamp(15px,3vw,23px);padding:12px 26px;border-radius:18px;box-shadow:var(--shadow);pointer-events:none;text-align:center;letter-spacing:.5px}
.m6online.go{animation:m6onlineanim 2.8s var(--ease) forwards}
@keyframes m6onlineanim{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}16%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}28%{transform:translate(-50%,-50%) scale(1)}82%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
.m4link:active{transform:scale(.96)}
.m4link svg{width:24px;height:24px}

/* ---- Modal ---- */
#modal{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;
  background:rgba(10,18,14,.55);backdrop-filter:blur(3px);padding:20px}
#modal.show{display:flex}
#modal .card{background:#fff;border-radius:24px;max-width:440px;width:100%;padding:24px 26px 20px;box-shadow:var(--shadow);max-height:86vh;overflow-y:auto}
#modal h2{margin:0 0 4px;color:var(--eco-leaf-dark);display:flex;align-items:center;gap:10px}
#modal h2 svg{width:26px;height:26px}
#modal p{margin:8px 0;line-height:1.5;font-size:14px}
#modal .close{margin-top:14px;min-height:var(--touch);width:100%;border:0;border-radius:14px;
  background:var(--eco-leaf);color:#fff;font-weight:700;font-size:15px}

/* ---- Mission 7: EcoCity Metropolis — Stewardship (additive) ---- */
.m7aspect{cursor:pointer}
.m7glow{opacity:0;transform-box:fill-box;transform-origin:center;transition:opacity .5s var(--ease)}
.m7veil,.m7life{transition:opacity .6s var(--ease)}
.m7aspect.lush .m7veil{opacity:0}.m7aspect.wilt .m7veil{opacity:.30}.m7aspect.faded .m7veil{opacity:.58}
.m7aspect.lush .m7life{opacity:1}.m7aspect.wilt .m7life{opacity:.5}.m7aspect.faded .m7life{opacity:.16}
.m7aspect.lush .m7glow{opacity:.5}
.m7season{position:absolute;left:50%;top:19%;transform:translateX(-50%);z-index:18;background:var(--panel);border:1px solid var(--panel-edge);border-radius:14px;padding:5px 16px;font-size:13px;font-weight:800;color:var(--eco-leaf-dark);box-shadow:var(--shadow)}
.m7care{position:absolute;left:50%;bottom:13%;transform:translateX(-50%);display:flex;gap:8px;align-items:center;z-index:20;background:var(--panel);border:1px solid var(--panel-edge);border-radius:16px;padding:7px 14px;box-shadow:var(--shadow);font-size:13px;font-weight:700;color:var(--ink)}
.m7care svg{width:24px;height:24px}
.m7heart{opacity:.25;transition:opacity .3s var(--ease)}.m7heart.have{opacity:1}
.m7bloom{pointer-events:none;opacity:0;transform-box:fill-box;transform-origin:center}.m7bloom.go{animation:m3bloomgo 3s var(--ease) forwards}
.m7banner{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%) scale(.7);opacity:0;z-index:26;background:linear-gradient(180deg,#54c47f,#1f6b41);color:#fff;font-weight:800;font-size:clamp(17px,3.6vw,28px);padding:14px 28px;border-radius:20px;box-shadow:var(--shadow);pointer-events:none;text-align:center;letter-spacing:.5px}.m7banner.go{animation:m6onlineanim 3s var(--ease) forwards}
.m7sparkle{opacity:0;transform-box:fill-box;transform-origin:center}.m7cele.go .m7sparkle{animation:m6spark 1.2s ease-out forwards}
.m7thumb{display:inline-block;margin:4px 6px;border-radius:8px;overflow:hidden;vertical-align:middle;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.m7thumb span{display:block;text-align:center;font-size:11px;font-weight:700;padding:2px}

@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

/* ---- Audio-synced feedback: brief animation tied to each sound cue ---- */
@keyframes sfxPulse{0%{transform:scale(1)}45%{transform:scale(1.09)}100%{transform:scale(1)}}
.sfx-pulse{animation:sfxPulse .3s var(--ease)}
#audioFlash{position:fixed;inset:0;z-index:70;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 45%,rgba(63,183,196,.30),transparent 60%)}
#audioFlash.gold{background:radial-gradient(circle at 50% 45%,rgba(245,196,81,.38),transparent 60%)}
@keyframes audioFlashGo{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
#audioFlash.go{animation:audioFlashGo .6s var(--ease)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---- Layar sempit (ponsel): CTA halaman awal menumpuk di kiri agar tidak
   tertutup kolom navigasi di kanan-bawah. ---- */
@media (max-width:640px){
  .cta-row{left:12px;right:auto;transform:none;bottom:11%;flex-direction:column;align-items:flex-start;gap:10px}
  .cta{font-size:14px;padding:0 18px}
}