:root {
  color-scheme: light; --ink:#102f2c; --forest:#176b4d; --leaf:#51b84d; --lime:#b8e94e; --sun:#ffd54a; --coral:#f26b47; --sky:#42bce5; --cream:#fff9e7; --paper:#f2f7e9;
  font-family:"Avenir Next Rounded","Nunito","Trebuchet MS",system-ui,sans-serif; font-synthesis:none;
}
*{box-sizing:border-box} [hidden]{display:none!important} html,body{width:100%;height:100%;min-width:1100px;min-height:700px;overflow:hidden} body{margin:0;color:var(--ink);background:#dcedca} button{color:inherit;font:inherit;cursor:pointer} button:focus-visible{outline:4px solid #fff;outline-offset:3px;box-shadow:0 0 0 7px #1268e8!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

.game{width:100%;height:100%;display:grid;grid-template-rows:minmax(0,1fr) 190px;gap:12px;padding:14px 16px 16px;background:linear-gradient(#d9efc8,#eff7dd)}
.world{position:relative;min-height:0;overflow:hidden;border:4px solid #174b3d;border-radius:28px;background:#78c94f;box-shadow:0 9px 0 #0f382f,0 20px 40px rgba(18,54,40,.24);isolation:isolate}
.world-art{position:absolute;inset:0;z-index:-3;background:url("art/world-01.webp") center 47%/cover no-repeat;filter:saturate(1.04)}
.world::after{position:absolute;inset:0;z-index:-2;content:"";background:linear-gradient(180deg,rgba(6,40,42,.05),rgba(4,35,31,.23)),radial-gradient(circle at 60% 45%,transparent 0 32%,rgba(10,44,36,.12) 100%);pointer-events:none}
.world.is-ocean .world-art{filter:hue-rotate(12deg) saturate(1.15)}.sun-glow{position:absolute;z-index:-1;right:16%;top:-80px;width:300px;height:220px;border-radius:50%;background:rgba(255,248,174,.28);filter:blur(26px);pointer-events:none}
.hud{position:absolute;z-index:20;left:18px;right:18px;top:15px;height:64px;display:flex;align-items:center;gap:12px}.mission-badge,.hud-stats,.difficulty{border:2px solid rgba(12,55,44,.3);background:rgba(255,255,246,.94);box-shadow:0 5px 0 rgba(15,58,47,.3),0 8px 18px rgba(14,48,38,.12);backdrop-filter:blur(8px)}
.mission-badge{min-width:184px;padding:9px 16px;border-radius:16px}.mission-badge span,.hud-stats span,.difficulty span{display:block;color:#39705c;font-size:10px;font-weight:950;letter-spacing:.09em;text-transform:uppercase}.mission-badge strong{display:block;margin-top:1px;font-size:17px}.hud-stats{display:flex;border-radius:16px}.hud-stats>div{min-width:76px;padding:8px 14px;border-right:1px solid #c8d9bf;text-align:center}.hud-stats>div:last-child{border:0}.hud-stats strong{display:block;font-size:20px;line-height:1.05}.streak-stat i{color:#ee9f00;font-style:normal}.difficulty{width:220px;padding:9px 13px;border-radius:16px}.difficulty>span{display:flex;justify-content:space-between}.difficulty em{color:var(--ink);font-size:12px;font-style:normal}.difficulty>div{height:8px;margin-top:7px;overflow:hidden;border-radius:99px;background:#dce6d4}.difficulty i{display:block;width:18%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--leaf),var(--sun),var(--coral));transition:width .35s ease-out}

.ranger{position:absolute;z-index:12;left:18px;bottom:8px;width:250px;height:392px;pointer-events:none;transition:transform .2s ease-out}.ranger img{position:absolute;left:-68px;bottom:-105px;width:310px;height:310px;object-fit:contain;filter:drop-shadow(0 8px 5px rgba(6,39,30,.28))}.speech{position:absolute;left:103px;top:3px;width:178px;padding:12px 14px 13px;border:3px solid var(--ink);border-radius:18px 18px 18px 4px;background:#fffdf0;box-shadow:5px 6px 0 rgba(16,47,44,.24)}.speech span{color:var(--forest);font-size:10px;font-weight:950;letter-spacing:.07em;text-transform:uppercase}.speech p{margin:3px 0 0;font-size:12px;font-weight:800;line-height:1.32}.ranger.is-happy{animation:rangerHop .55s ease-out}.ranger.is-concerned img{transform:rotate(-2deg)}

.field-board{position:absolute;z-index:5;inset:91px 24px 20px 290px;overflow:hidden;border:3px solid rgba(13,63,54,.78);border-radius:24px;background:rgba(243,255,229,.82);box-shadow:0 8px 0 rgba(11,57,47,.45),inset 0 0 0 3px rgba(255,255,255,.52);backdrop-filter:blur(4px)}
.board-topline{height:48px;display:flex;align-items:center;gap:12px;padding:0 16px;border-bottom:2px solid rgba(19,78,61,.2);background:rgba(255,255,244,.78)}.board-topline>span{padding:5px 9px;border-radius:8px;color:#fff;background:var(--forest);font-size:9px;font-weight:950;letter-spacing:.08em;text-transform:uppercase}.board-topline>strong{font-size:18px}.hint-button{margin-left:auto;min-height:34px;padding:0 12px;border:2px solid #31725c;border-radius:10px;background:#fffdf2;color:#225f4b;font-size:11px;font-weight:900;box-shadow:0 3px 0 #aac7a7}.hint-button:active{transform:translateY(2px);box-shadow:0 1px 0 #aac7a7}
.web{position:absolute;inset:48px 8px 4px}.links{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.energy-link{fill:none;stroke:#ffbf19;stroke-width:8;stroke-linecap:round;stroke-dasharray:12 10;marker-end:url(#arrow);filter:url(#glow);animation:energyFlow 1.1s linear infinite;transition:opacity .25s,stroke-width .2s}.energy-link.is-new{stroke:#f58d2d}.energy-link.is-disrupted{opacity:.16;filter:none}.energy-link.is-pulsing{stroke:#fff;width:12;animation:linkPulse .55s ease-out 3}.species-layer{position:absolute;inset:0}.species{--x:50%;--y:50%;--tone:var(--leaf);position:absolute;left:var(--x);top:var(--y);width:126px;display:grid;justify-items:center;padding:4px 8px 8px;transform:translate(-50%,-50%);border:0;background:transparent;transition:transform .16s ease-out,opacity .25s,filter .25s}.species:hover{transform:translate(-50%,-55%) scale(1.04)}.species .creature{position:relative;width:78px;height:78px;display:grid;place-items:center;border:4px solid var(--ink);border-radius:28px 28px 24px 24px;background:linear-gradient(#fff,#e7f5d3);box-shadow:0 6px 0 color-mix(in srgb,var(--tone),#102f2c 42%),0 11px 18px rgba(16,47,44,.2);font-size:47px;line-height:1}.species .creature::after{position:absolute;right:-8px;top:-8px;width:22px;height:22px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:50%;content:"";background:var(--tone)}.species[data-role="consumer"]{--tone:var(--sky)}.species[data-role="predator"]{--tone:var(--coral)}.species.is-selected .creature{animation:selectPop .45s ease-out;box-shadow:0 0 0 6px #fff,0 0 0 11px var(--sun),0 9px 20px rgba(16,47,44,.22)}.species.is-highlighted .creature{animation:nodePulse .55s ease-out 3}.species.is-removed{opacity:.25;filter:grayscale(1)}.species .name{margin-top:8px;padding:3px 8px;border-radius:8px;background:rgba(255,255,245,.9);font-size:13px;font-weight:950}.population{width:100px;height:9px;margin-top:5px;overflow:hidden;border:2px solid rgba(16,47,44,.4);border-radius:99px;background:#e8eddd}.population i{display:block;width:var(--population);height:100%;border-radius:inherit;background:var(--tone);transition:width .7s cubic-bezier(.2,.8,.2,1)}.species small{display:flex;align-items:center;gap:5px;margin-top:3px;padding:2px 7px;border-radius:8px;background:rgba(255,255,245,.88);font-size:11px}.species small em{font-style:normal;font-size:9px}.species small .up{color:#16834e}.species small .down{color:#d4472d}.species small .steady{color:#7c8c82}
.energy-key{position:absolute;left:50%;bottom:2px;display:flex;align-items:center;gap:8px;padding:6px 12px;transform:translateX(-50%);border:2px solid rgba(18,73,59,.25);border-radius:99px;background:rgba(255,255,245,.93);font-size:10px;font-weight:900}.energy-key i{width:34px;height:5px;border-radius:99px;background:var(--sun);box-shadow:0 0 8px var(--sun)}.energy-key span{color:#7b6b25;text-transform:uppercase;letter-spacing:.08em}.ripple-label{position:absolute;z-index:10;left:50%;top:8px;max-width:620px;padding:9px 17px;transform:translateX(-50%);border:3px solid var(--ink);border-radius:13px;background:var(--sun);box-shadow:4px 5px 0 rgba(16,47,44,.3);font-size:12px;font-weight:950;text-align:center}

.briefing{position:absolute;z-index:40;inset:42px 13% 34px;display:grid;grid-template-columns:1fr 46%;align-items:center;overflow:hidden;border:4px solid var(--ink);border-radius:30px;background:linear-gradient(130deg,#fffce8 0 60%,#bde889 60%);box-shadow:0 13px 0 rgba(16,47,44,.38),0 30px 55px rgba(7,35,27,.35)}.briefing::before{position:absolute;inset:11px;content:"";border:2px dashed rgba(23,107,77,.28);border-radius:20px;pointer-events:none}.briefing-copy{z-index:2;padding:38px 12px 38px 54px}.briefing-copy>span{color:var(--forest);font-size:11px;font-weight:950;letter-spacing:.11em;text-transform:uppercase}.briefing h1{max-width:500px;margin:10px 0 12px;font-size:48px;line-height:.96;letter-spacing:-.045em}.briefing p{max-width:460px;margin:0 0 25px;color:#466159;font-size:16px;font-weight:700;line-height:1.45}.briefing button,.primary{min-width:230px;min-height:56px;padding:10px 24px;border:3px solid var(--ink);border-radius:15px;color:#fff;background:var(--coral);box-shadow:0 6px 0 var(--ink);font-weight:950}.briefing button:hover,.primary:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--ink)}.briefing button:active,.primary:active{transform:translateY(4px);box-shadow:0 2px 0 var(--ink)}.briefing>img{align-self:end;width:min(100%,440px);max-height:440px;object-fit:contain;filter:drop-shadow(0 10px 7px rgba(16,47,44,.28));transform:translate(5%,11%)}

.console{min-height:0;display:grid;grid-template-columns:minmax(290px,.72fr) minmax(0,1.8fr);align-items:center;gap:28px;padding:18px 24px 18px 28px;border:3px solid var(--ink);border-radius:22px;background:#fffdf0;box-shadow:0 7px 0 #9fc28f}.console-copy>span{color:var(--forest);font-size:10px;font-weight:950;letter-spacing:.1em;text-transform:uppercase}.console-copy h2{margin:4px 0 5px;font-size:24px;line-height:1.08;letter-spacing:-.025em}.console-copy p{margin:0;color:#5f746c;font-size:12px;font-weight:750}.actions{min-width:0;display:flex;align-items:center;justify-content:center;gap:16px}.choice-grid{width:100%;display:grid;gap:10px}.prediction-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.choice{min-height:105px;padding:11px 13px;border:3px solid #b4cdb0;border-radius:15px;background:#f9ffed;box-shadow:0 4px 0 #b4cdb0;text-align:left;transition:transform .15s ease-out,border-color .15s}.choice:hover{transform:translateY(-3px);border-color:var(--forest);box-shadow:0 7px 0 #a4c29e}.prediction{display:grid;grid-template-columns:46px 1fr;align-items:center;gap:10px}.prediction>i{width:44px;height:44px;display:grid;place-items:center;border:3px solid var(--ink);border-radius:13px;background:var(--sun);font-size:22px;font-style:normal;font-weight:950}.prediction strong{display:block;font-size:13px;line-height:1.15}.prediction small{display:block;margin-top:4px;color:#63766e;font-size:10px;font-weight:750;line-height:1.2}.explain-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.explain{min-height:75px;font-size:13px;font-weight:900;line-height:1.3;text-align:center}.primary{display:grid;place-items:center;align-content:center;min-width:310px;background:var(--coral);text-align:center}.primary strong{font-size:18px}.primary small{display:block;margin-top:2px;opacity:.84;font-size:10px}.link-count{display:flex;align-items:center;gap:10px;padding:9px 16px;border:3px solid #b4cdb0;border-radius:15px;background:#eff8df}.link-count>span{font-size:34px;font-weight:950}.link-count>span b{font-size:17px;color:#63816f}.link-count p{margin:0;max-width:80px;font-size:11px;font-weight:900;line-height:1.15}.watching{display:flex;align-items:center;gap:13px;color:var(--forest);font-size:17px;font-weight:950}.watching i{width:22px;height:22px;border:5px solid #bbd8b5;border-top-color:var(--forest);border-radius:50%;animation:scanSpin .8s linear infinite}

.toast{position:absolute;z-index:70;left:50%;bottom:18px;max-width:70%;padding:10px 18px;opacity:0;transform:translate(-50%,12px);border:3px solid #fff;border-radius:99px;color:#fff;background:var(--ink);box-shadow:0 5px 0 rgba(5,35,27,.35);pointer-events:none;font-size:12px;font-weight:900;transition:opacity .15s,transform .15s}.toast.show{opacity:1;transform:translate(-50%,0)}
.burst{position:absolute;z-index:80;left:56%;top:48%;width:260px;height:260px;opacity:0;transform:translate(-50%,-50%) scale(.4);pointer-events:none}.burst.show{opacity:1;animation:burstIn .8s ease-out}.burst i{position:absolute;left:50%;top:50%;width:12px;height:75px;border-radius:99px;background:var(--sun);transform-origin:50% 0}.burst i:nth-child(2){transform:rotate(60deg)}.burst i:nth-child(3){transform:rotate(120deg)}.burst i:nth-child(4){transform:rotate(180deg)}.burst i:nth-child(5){transform:rotate(240deg)}.burst i:nth-child(6){transform:rotate(300deg)}.burst b{position:absolute;left:50%;top:50%;padding:15px 22px;transform:translate(-50%,-50%) rotate(-4deg);border:4px solid var(--ink);border-radius:15px;background:var(--sun);box-shadow:6px 7px 0 var(--ink);font-size:22px;white-space:nowrap}.game.is-celebrating .world{animation:worldCelebrate .55s ease-out}.console.shake{animation:gentleShake .4s ease-out}

@keyframes energyFlow{to{stroke-dashoffset:-22}}@keyframes linkPulse{50%{opacity:.25;stroke-width:13}}@keyframes nodePulse{50%{transform:scale(1.16)}}@keyframes selectPop{50%{transform:scale(1.14)}}@keyframes scanSpin{to{transform:rotate(360deg)}}@keyframes rangerHop{50%{transform:translateY(-12px) rotate(1deg)}}@keyframes gentleShake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}@keyframes worldCelebrate{50%{filter:saturate(1.28) brightness(1.05)}}@keyframes burstIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(-15deg)}35%{opacity:1;transform:translate(-50%,-50%) scale(1.12) rotate(4deg)}100%{opacity:0;transform:translate(-50%,-55%) scale(1) rotate(0)}}

@media(max-height:780px){.game{grid-template-rows:minmax(0,1fr) 172px}.field-board{inset-top:82px}.ranger{bottom:-18px}.ranger img{width:280px}.speech{top:25px}.species .creature{width:68px;height:68px;font-size:40px}.briefing{inset-top:25px;inset-bottom:25px}.briefing h1{font-size:42px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}