:root{--ink:#f5fff8;--muted:#b6c6bc;--panel:rgba(12,29,21,.92);--line:rgba(255,255,255,.15);--green:#71e28e;--green2:#b7f36d;--yellow:#ffd45c;--red:#ff6b6b;--blue:#6cc8ff;--shadow:0 18px 55px rgba(0,0,0,.4)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#08110d;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;touch-action:none}button,input{font:inherit}.hidden{display:none!important}
#game{position:fixed;inset:0;width:100%;height:100%;display:block;background:#53685c;image-rendering:pixelated;image-rendering:crisp-edges}
#rotate{position:fixed;inset:0;z-index:200;display:none;place-items:center;padding:26px;text-align:center;background:#08110d}.rotate-card{max-width:420px;padding:28px;border:1px solid var(--line);border-radius:24px;background:#10231a}.rotate-phone{font-size:3rem;animation:turn 1.8s ease-in-out infinite}@keyframes turn{50%{transform:rotate(90deg)}}
#hud{position:fixed;left:0;right:0;top:0;z-index:20;display:flex;align-items:flex-start;justify-content:space-between;gap:clamp(4px,1.2vmin,10px);padding:max(4px,env(safe-area-inset-top)) clamp(6px,2vmin,12px) 4px;pointer-events:none}.hud-group{display:flex;gap:8px;align-items:center}.chip{min-width:clamp(58px,16vmin,92px);padding:clamp(3px,1vmin,7px) clamp(6px,2vmin,11px);border:1px solid var(--line);border-radius:clamp(9px,2.4vmin,14px);background:var(--panel);box-shadow:var(--shadow);backdrop-filter:blur(12px)}.chip small{display:block;color:var(--muted);font-size:clamp(.46rem,1.5vmin,.62rem);font-weight:800;letter-spacing:.08em;text-transform:uppercase}.chip strong{display:block;margin-top:1px;font-variant-numeric:tabular-nums;font-size:clamp(.68rem,2.4vmin,.98rem)}.meter{width:clamp(56px,19vmin,130px);height:clamp(3px,1.1vmin,7px);margin-top:2px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.1)}.meter>i{display:block;height:100%;width:12%;border-radius:inherit;background:linear-gradient(90deg,var(--red),var(--yellow),var(--green));transition:width .5s}
.icon-btn{pointer-events:auto;width:clamp(44px,9vmin,48px);height:clamp(44px,9vmin,48px);border:1px solid var(--line);border-radius:clamp(8px,2.4vmin,13px);font-size:clamp(.72rem,2.4vmin,1rem);color:var(--ink);font-weight:900;background:var(--panel);box-shadow:var(--shadow)}
#questCard{position:fixed;left:50%;top:calc(max(6px,env(safe-area-inset-top)) + clamp(26px,7.5vmin,44px));z-index:18;transform:translateX(-50%);width:min(520px,calc(100% - clamp(120px,34vmin,230px)));padding:clamp(3px,1vmin,7px) clamp(8px,2.4vmin,14px);display:flex;flex-direction:column;gap:0;border:1px solid var(--line);border-radius:clamp(9px,2.6vmin,15px);background:rgba(8,22,16,.88);box-shadow:var(--shadow);backdrop-filter:blur(10px);pointer-events:none}#questCard small{color:var(--green);font-weight:900;letter-spacing:.07em;text-transform:uppercase;font-size:clamp(.42rem,1.3vmin,.58rem);line-height:1.1;opacity:.85}#questText{margin-top:0;font-size:clamp(.6rem,2vmin,.85rem);font-weight:800;line-height:1.2}#questProgress{color:var(--yellow);font-size:clamp(.46rem,1.5vmin,.68rem);line-height:1.15}
#narrator{position:fixed;z-index:45;left:50%;bottom:calc(max(4px,env(safe-area-inset-bottom)) + clamp(34px,10vmin,56px));transform:translateX(-50%);display:flex;align-items:center;gap:clamp(6px,2vmin,12px);width:min(720px,calc(100% - clamp(150px,42vmin,260px)));padding:clamp(6px,2vmin,12px) clamp(9px,2.6vmin,16px);border:1px solid rgba(113,226,142,.45);border-radius:clamp(11px,3vmin,18px);background:rgba(8,26,17,.95);box-shadow:var(--shadow);backdrop-filter:blur(12px);cursor:pointer}.narrator-face{display:grid;place-items:center;flex:0 0 clamp(28px,8vmin,48px);height:clamp(28px,8vmin,48px);border-radius:50%;color:#0d2818;font-size:clamp(.8rem,3vmin,1.3rem);font-weight:1000;background:linear-gradient(145deg,var(--green2),var(--green))}.narrator-copy strong{display:block;color:var(--green);font-size:clamp(.5rem,1.7vmin,.72rem);letter-spacing:.1em;text-transform:uppercase}.narrator-copy p{margin:2px 0 0;line-height:1.3;font-size:clamp(.64rem,2.1vmin,.95rem)}.narrator-next{margin-left:auto;color:var(--muted);font-size:clamp(.48rem,1.6vmin,.72rem);white-space:nowrap}
#joystick{position:fixed;left:max(10px,env(safe-area-inset-left));bottom:max(10px,env(safe-area-inset-bottom));z-index:25;width:clamp(78px,26vmin,126px);height:clamp(78px,26vmin,126px);border:2px solid rgba(255,255,255,.18);border-radius:50%;background:rgba(7,20,14,.45);box-shadow:inset 0 0 35px rgba(0,0,0,.3);touch-action:none}.joy-knob{position:absolute;left:30%;top:30%;width:40%;height:40%;border-radius:50%;background:linear-gradient(145deg,#d8f9df,#70d58a);box-shadow:0 8px 20px rgba(0,0,0,.35)}
#actionWrap{position:fixed;right:max(10px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));z-index:25;display:grid;justify-items:center;gap:clamp(3px,1vmin,7px);max-width:44vw}.action-label{padding:clamp(3px,1vmin,5px) clamp(5px,1.8vmin,9px);border-radius:8px;color:#dfeae3;font-size:clamp(.5rem,1.7vmin,.72rem);font-weight:900;background:rgba(7,20,14,.8);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#actionBtn{width:clamp(56px,18vmin,88px);height:clamp(56px,18vmin,88px);border:clamp(3px,1vmin,5px) solid rgba(255,255,255,.25);border-radius:50%;color:#0b2616;font-size:clamp(1rem,4.6vmin,1.65rem);font-weight:1000;background:linear-gradient(145deg,var(--green2),var(--green));box-shadow:0 13px 28px rgba(0,0,0,.36)}#actionBtn.pulse{animation:apulse 1s infinite}@keyframes apulse{50%{transform:scale(1.07);box-shadow:0 0 0 12px rgba(113,226,142,.12)}}
#miniMap{position:fixed;right:12px;top:72px;z-index:17;width:128px;height:70px;border:1px solid var(--line);border-radius:13px;background:rgba(8,22,16,.86);box-shadow:var(--shadow);pointer-events:none}#miniMap canvas{width:100%;height:100%;border-radius:inherit}
.modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:clamp(6px,2vmin,16px);background:rgba(2,8,5,.82)}.panel{position:relative;width:min(680px,100%);max-height:94vh;overflow:auto;padding:clamp(14px,3.4vmin,24px);border-radius:0;border-style:solid;border-width:clamp(16px,4.2vmin,26px);border-image:url('assets/img/panel-frame.png') 8 / clamp(16px,4.2vmin,26px) / 0 repeat;image-rendering:pixelated;background:#16241c;box-shadow:0 10px 40px rgba(0,0,0,.55)}.panel h2{margin:1px 0 clamp(4px,1.4vmin,9px);font-size:clamp(.95rem,3.2vmin,1.3rem);line-height:1.15;font-weight:800;letter-spacing:-.01em}.panel p{color:#d4e0d8;line-height:1.4;font-size:clamp(.7rem,2.3vmin,1rem);margin:clamp(4px,1.2vmin,10px) 0}.eyebrow{margin:0;color:#6f8a78;font-size:clamp(.5rem,1.6vmin,.66rem);font-weight:900;letter-spacing:.11em;text-transform:uppercase}.close{position:absolute;right:clamp(6px,2vmin,12px);top:clamp(6px,2vmin,12px);width:clamp(30px,8vmin,38px);height:clamp(30px,8vmin,38px);z-index:5;border:1px solid var(--line);border-radius:50%;color:var(--ink);font-size:1.3rem;background:rgba(255,255,255,.06)}.primary,.secondary{border:0;border-radius:0;padding:clamp(7px,2vmin,12px) clamp(12px,3vmin,18px);font-weight:900;font-size:clamp(.72rem,2.3vmin,1rem);letter-spacing:.02em;transition:transform .08s steps(2),box-shadow .08s steps(2);position:relative;top:0}.primary{color:#0d2410;background:#8ed36a;box-shadow:inset 0 3px 0 #b9ef8f, inset 0 -4px 0 #4f8f3d, 0 4px 0 #2c5423}.primary:active{top:3px;box-shadow:inset 0 3px 0 #b9ef8f, inset 0 -3px 0 #4f8f3d, 0 1px 0 #2c5423}.secondary{color:var(--ink);background:#31463a;box-shadow:inset 0 3px 0 #4a6153, inset 0 -4px 0 #1d2c24, 0 4px 0 #14201a}.secondary:active{top:3px;box-shadow:inset 0 3px 0 #4a6153, inset 0 -3px 0 #1d2c24, 0 1px 0 #14201a}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.dialogue-speaker{display:flex;align-items:center;gap:12px;margin-bottom:12px}.portrait{width:clamp(44px,12vmin,64px);height:clamp(44px,12vmin,64px);border-radius:0;background:#1d3226;image-rendering:pixelated;display:block;box-shadow:inset 0 0 0 2px #3d5a45, 0 3px 0 #101c15}.dialogue-options{display:grid;gap:9px;margin-top:15px}.dialogue-options button{text-align:left}
.start-panel{text-align:center}.logo{display:grid;place-items:center;width:88px;height:88px;margin:0 auto 12px;border-radius:26px;color:#092514;font-weight:1000;background:linear-gradient(145deg,var(--green2),var(--green));box-shadow:0 16px 40px rgba(113,226,142,.25)}.avatar-row{display:flex;justify-content:center;gap:12px;margin:16px 0}.avatar-choice{display:grid;place-items:center;width:70px;height:70px;border:3px solid transparent;border-radius:18px;background:#294236}.avatar-choice img{image-rendering:pixelated}.avatar-choice.selected{border-color:var(--green);transform:translateY(-3px)}.feature-list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:15px 0;text-align:left}.feature{padding:10px;border-radius:12px;background:rgba(255,255,255,.05);color:#d5e2d9;font-size:.83rem}
.task-box{padding:clamp(7px,2.2vmin,15px);border-radius:clamp(10px,2.8vmin,16px);background:rgba(0,0,0,.18)}#taskIntro{font-size:clamp(.66rem,2vmin,.86rem);line-height:1.35;margin:clamp(2px,.8vmin,8px) 0;color:#93a89b;font-weight:400}
.tap-game{position:relative;width:100%;height:clamp(110px,26vh,240px);overflow:hidden;border-radius:16px;background:url('assets/img/bg-tap.jpg') center/cover}
.tap-target{position:absolute;display:grid;place-items:center;width:clamp(48px,14vw,72px);height:clamp(48px,14vw,72px);border:0;border-radius:50%;font-size:clamp(1.2rem,4vw,1.7rem);background:#75d6ff;box-shadow:0 0 30px rgba(117,214,255,.45)}
.progressbar{height:12px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.1)}.progressbar i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--blue),var(--green));transition:width .2s}
.pipe-grid{display:grid;grid-template-columns:repeat(3,minmax(56px,92px));justify-content:center;gap:clamp(6px,2vw,10px);margin:18px 0}
.pipe{position:relative;width:100%;aspect-ratio:1;border:1px solid var(--line);border-radius:16px;background:url('assets/img/bg-pipe.jpg') center/cover}
.pipe i{position:absolute;left:42%;top:8%;width:16%;height:84%;border-radius:8px;background:#7ad2f6;transform-origin:center;transition:transform .18s}
.pipe.correct{outline:3px solid var(--green)}
.build-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.04)}.build-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;font-size:1.7rem;background:#294236}.cost{color:var(--yellow);font-weight:1000}
.traffic-game{position:relative;width:100%;height:clamp(120px,30vh,280px);overflow:hidden;border-radius:16px;background:url('assets/img/bg-traffic.jpg') center/cover}
.road-h,.road-v{position:absolute;background:#3d4541}.road-h{left:0;right:0;top:40%;height:21%}.road-v{top:0;bottom:0;left:calc(50% - 11%);width:22%}
.traffic-light{position:absolute;z-index:3;width:clamp(42px,11vw,58px);height:clamp(42px,11vw,58px);border:3px solid #17231d;border-radius:50%;font-weight:1000;display:grid;place-items:center;font-size:clamp(1.1rem,3.5vw,1.5rem)}
.light-h{left:7%;top:39%}.light-v{left:calc(50% - 11.5%);top:7%}
.greenlight{background:#65dd7c}.redlight{background:#ef6868}
.car{position:absolute;width:38px;height:20px;border-radius:6px;background:#e6aa4d}.traffic-stats{display:flex;justify-content:space-between;margin-top:10px}
.dust-map{position:relative;width:100%;height:clamp(115px,28vh,260px);border-radius:16px;background:url('assets/img/bg-dust.jpg') center/cover}
.dust-spot{position:absolute;width:clamp(50px,15vw,76px);height:clamp(50px,15vw,76px);border:2px dashed rgba(255,255,255,.55);border-radius:16px;color:white;font-size:clamp(1.1rem,3.5vw,1.5rem);background:rgba(68,54,40,.35);display:grid;place-items:center}
.dust-spot.done{border-style:solid;background:rgba(72,170,93,.55)}
.drain-scene{position:relative;width:100%;height:clamp(120px,30vh,280px);border-radius:16px;overflow:hidden;background:linear-gradient(#3a4a42,#26332c)}
.drain-hole{position:absolute;left:50%;top:16%;transform:translateX(-50%);width:clamp(88px,26%,150px);aspect-ratio:1;display:grid;place-items:center;pointer-events:none}.drain-hole img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;display:block}
.drain-item{position:absolute;width:clamp(34px,9vw,48px);height:clamp(34px,9vw,48px);transform:translate(-50%,-50%);background-color:transparent;background-size:contain;background-repeat:no-repeat;background-position:center;image-rendering:pixelated;border:0;padding:0;cursor:grab;touch-action:none;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5));transition:filter .15s}
.drain-item.dragging{cursor:grabbing;z-index:20;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6)) brightness(1.15)}
.drain-item.gone{opacity:0;transform:scale(.2)!important;transition:opacity .25s,transform .25s}
.waste-pile{position:absolute;right:3%;bottom:4%;width:clamp(60px,18vw,90px);height:clamp(50px,15vw,72px);border:3px dashed rgba(255,212,92,.65);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;padding:4px 4px 6px;background-image:url('assets/img/bucket-badge.png');background-size:56% auto;background-repeat:no-repeat;background-position:center 22%;image-rendering:pixelated}.waste-pile span{font-size:.62rem;font-weight:800;color:rgba(255,255,255,.75);text-align:center;line-height:1.15}
.waste-pile.hover{border-color:#b7f36d;background:rgba(183,243,109,.18);transform:scale(1.05)}
.flush-btn{margin-top:10px}
.flush-anim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(108,200,255,0) 0%,rgba(108,200,255,.55) 50%,rgba(108,200,255,0) 100%);transform:translateY(-100%);animation:flushwave 1.1s ease-in-out}
@keyframes flushwave{to{transform:translateY(100%)}}
.toast{position:fixed;left:50%;bottom:130px;z-index:60;transform:translateX(-50%);padding:10px 14px;border:1px solid var(--line);border-radius:13px;background:rgba(8,25,17,.93);box-shadow:var(--shadow);font-weight:800;pointer-events:none}
.certificate{padding:18px;background:#e9e3cb;color:#173326}.cert-inner{min-height:420px;padding:35px;border:8px double #31704b;text-align:center;background:#fffdf4}.cert-inner h2{font-family:Georgia,serif;font-size:2.3rem}.cert-name{width:min(430px,100%);padding:8px;text-align:center;color:#173326;font:2rem Georgia,serif;border:0;border-bottom:2px solid #31704b;background:transparent}.cert-seal{display:grid;place-items:center;width:95px;height:95px;margin:25px auto 0;border-radius:50%;color:white;font-weight:1000;background:#31704b;box-shadow:0 0 0 8px #d7c876,0 0 0 12px #31704b}
@media(max-width:850px){.chip{min-width:78px;padding:7px 8px}.chip small{font-size:.54rem}.chip strong{font-size:.82rem}.meter{width:90px}#questCard{width:min(480px,calc(100% - 230px));top:66px}#miniMap{display:none}.feature-list{grid-template-columns:1fr}.panel{padding:18px}.pipe-grid{grid-template-columns:repeat(3,72px)}.pipe{width:72px;height:72px}.pipe i{left:29px;top:5px;height:62px}}

.meter-wrap{margin:clamp(4px,1.2vmin,10px) 0}.meter-label{display:flex;justify-content:space-between;font-weight:900;font-size:.82rem;margin-bottom:4px;color:#d4e0d8}
.bigbar{height:14px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.12)}
.bigbar>i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--blue),var(--green));transition:width .3s cubic-bezier(.2,.8,.3,1)}
.bigbar.danger>i{transition:width .5s linear,background .3s}
.tap-target{transition:transform .08s cubic-bezier(.34,1.56,.64,1)}.tap-target:active{transform:scale(.9)}
.pipe{transition:outline-color .18s,transform .1s}.pipe:active{transform:scale(.94)}
.pipe.correct{outline:3px solid var(--green);box-shadow:0 0 18px rgba(113,226,142,.35)}
.dust-spot{transition:transform .18s cubic-bezier(.34,1.56,.64,1),background .2s}.dust-spot:active{transform:scale(.92)}
.dust-spot.done{transform:scale(1.06)}
.traffic-light{transition:opacity .3s,transform .12s}.traffic-light:active{transform:scale(.92)}
.primary,.secondary{transition:transform .1s}.primary:active,.secondary:active{transform:scale(.96)}
.icon-btn{transition:transform .1s}.icon-btn:active{transform:scale(.9)}
#actionBtn{transition:transform .1s}#actionBtn:active{transform:scale(.93)}
@media(max-width:850px){.pipe-grid{grid-template-columns:repeat(3,80px)}.pipe{width:80px;height:80px}.pipe i{left:33px;top:6px;height:68px}.dust-spot{width:76px;height:76px}}

.brand-logo{display:block;width:min(190px,62%);height:auto;margin:2px auto 10px;filter:brightness(0) invert(1);opacity:.95}
.brand-note{margin:12px 0 0;font-size:.66rem;line-height:1.5;color:#8fa89a;text-align:center}
#brandMark{position:fixed;left:50%;bottom:max(4px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:16;display:flex;flex-direction:column;align-items:center;gap:1px;padding:clamp(3px,1vmin,6px) clamp(8px,2.4vmin,14px);border-radius:clamp(8px,2.4vmin,14px);background:rgba(6,16,11,.78);border:1px solid rgba(183,243,109,.4);backdrop-filter:blur(8px);pointer-events:none}#brandMark img{width:clamp(64px,18vmin,110px);height:auto;filter:brightness(0) invert(1);opacity:.98;display:block}#brandMark span{font-size:clamp(.4rem,1.3vmin,.58rem);font-weight:900;letter-spacing:.05em;color:#b7f36d;text-transform:uppercase;white-space:nowrap;line-height:1.1}


.fs-row{display:flex;align-items:center;gap:9px;justify-content:center;margin:0 0 clamp(8px,2vmin,14px);
 padding:clamp(7px,1.8vmin,11px) clamp(10px,2.4vmin,14px);background:#1d3226;
 box-shadow:inset 0 2px 0 #2c4433, inset 0 -3px 0 #121f18;cursor:pointer;text-align:left}
.fs-row input{width:18px;height:18px;accent-color:#8ed36a;flex:0 0 auto}
.fs-row span{font-size:clamp(.68rem,2.1vmin,.84rem);font-weight:800;color:#dfeae3;line-height:1.25}
.fs-row em{display:block;font-style:normal;font-weight:600;font-size:clamp(.56rem,1.7vmin,.7rem);color:#8fa89a}
#fsBtn{font-size:clamp(.8rem,2.6vmin,1.1rem)}

.start-panel h1{font-size:clamp(1.05rem,4.2vmin,2rem);margin:clamp(2px,.8vmin,8px) 0}
.start-panel>p{font-size:clamp(.6rem,1.9vmin,.9rem);line-height:1.3;margin:clamp(2px,.8vmin,8px) 0}
.brand-logo{width:min(150px,44%);margin:0 auto clamp(4px,1.2vmin,10px)}
.avatar-row{gap:clamp(6px,2vmin,12px);margin:clamp(6px,1.6vmin,14px) 0}
.avatar-choice{width:clamp(46px,13vmin,70px);height:clamp(46px,13vmin,70px);border-radius:0}
.avatar-choice img{width:80%;height:80%}
.brand-note{font-size:clamp(.46rem,1.4vmin,.62rem);margin-top:clamp(5px,1.4vmin,10px)}
/* the feature list is the biggest space cost and adds least on a phone */
@media(max-height:460px){.feature-list{display:none}}
@media(orientation:portrait){#rotate{display:grid}}
@media print{body *{visibility:hidden}.certificate,.certificate *{visibility:visible}.certificate{position:absolute;inset:0;padding:0}}