.eco-game-section{padding:84px clamp(24px,6vw,92px) 92px;background:#031219;color:#e5f5ef}
.eco-game-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:35px}
.eco-game-heading h2{font-size:clamp(42px,5vw,72px);font-weight:400;letter-spacing:-.055em;line-height:1;margin:13px 0 19px}
.eco-game-heading p:last-child{max-width:690px;color:#adc4bf;font-size:17px;line-height:1.6;margin:0}
.eco-game-heading-side{flex:none;border:1px solid #28524d;padding:17px 21px;font:10px/1.8 monospace;letter-spacing:.12em;color:#84beb0}
.eco-game-heading-side b{display:block;color:#e7f5ed;font-weight:400}
.eco-game{border:3px solid #60bda8;background:#061a22;box-shadow:0 24px 80px #0008;font-family:monospace}
.eco-game *{box-sizing:border-box}
.eco-game-status{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:12px 18px;background:#071e27;border-bottom:3px solid #2c7068}
.eco-game-status>div{display:flex;gap:14px;align-items:baseline}
.eco-game-status span{color:#8ab6aa;font-size:10px;letter-spacing:.08em}
.eco-game-status b{color:#d9fff0;font-size:14px;font-weight:400}
.eco-game-scene{position:relative;height:450px;overflow:hidden;isolation:isolate;background:#0a313c}
.eco-fragment-scene,.eco-prep-scene,.eco-crane-scene,.eco-underwater-scene{position:absolute;inset:0;overflow:hidden}
.eco-fragment-scene{background:repeating-linear-gradient(0deg,transparent 0 35px,#9b6d494d 36px 38px),linear-gradient(120deg,#584a39,#2e3a37 70%)}
.eco-fragment-mat{position:absolute;width:min(52%,480px);left:27%;top:24%;text-align:center}
.eco-fragment-button{position:absolute;right:4%;top:17%;display:flex;flex-direction:column;align-items:center;gap:10px;width:190px;padding:24px 12px;border:3px solid #f3ce75;background:#0b3437;color:#fff5ce;box-shadow:5px 5px #17302b;cursor:url('./scalpel-cursor.svg') 3 3,pointer;font:700 12px monospace;letter-spacing:.05em;text-align:center}
.eco-fragment-button *{cursor:inherit}
.eco-fragment-button:hover{background:#23565a;transform:translateY(-2px)}
.eco-fragment-button .eco-sponge-sprite{position:static;width:70px;height:70px;filter:drop-shadow(3px 4px #102c28)}
.eco-fragment-button small{color:#9bcabd;font:10px monospace}
.eco-prep-scene{background:repeating-linear-gradient(0deg,transparent 0 35px,#9b6d494d 36px 38px),linear-gradient(120deg,#584a39,#2e3a37 70%)}
.eco-prep-scene:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,#252b2a44 0 3px,transparent 3px 100px);pointer-events:none}
.eco-deck-lines{position:absolute;inset:24px;border:2px dashed #c9a06366}
.eco-prep-worker{position:absolute;top:17%;left:12%;width:44px;height:48px;background:#f48d4c;border:5px solid #1a3437;box-shadow:8px 8px 0 #182c2f}
.eco-prep-worker i{position:absolute;left:7px;top:-21px;width:24px;height:18px;background:#f5d675;border:4px solid #203d3e}
.eco-prep-worker b{position:absolute;left:14px;top:5px;width:8px;height:25px;background:#ffe29b;transform:rotate(42deg)}
.eco-prep-mat{position:absolute;width:min(52%,480px);left:27%;top:23%;text-align:center}
.eco-lifting-frame{padding:11px;border:8px solid #e2ad4a;background:#a46f2e;box-shadow:6px 7px 0 #192b29,0 0 0 4px #6b4c2a}
.eco-lifting-frame:before,.eco-lifting-frame:after{content:"";position:absolute;width:15px;height:15px;border:4px solid #f2ca75;border-radius:50%;top:-13px;background:#253c38}
.eco-lifting-frame:before{left:10%}.eco-lifting-frame:after{right:10%}
.eco-scene-caption{display:block;margin-top:17px;color:#d2eddf;font-size:12px;letter-spacing:.14em;text-shadow:2px 2px #112722}
.eco-mat-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:3px;aspect-ratio:2/1;width:100%;background:#384942;padding:3px;border:2px solid #a8b1a6}
.eco-block{position:relative;display:block;min-width:0;min-height:0;border:2px solid #4e625b;border-radius:0;background-color:#79847c;background-image:var(--eco-shell);background-position:center;background-size:cover;background-repeat:no-repeat;image-rendering:pixelated;box-shadow:inset 2px 2px #d5d7bc88,2px 2px #172922}
.eco-block.shell-variant-0{--eco-shell:url('./ecomat-shell-top-0.svg')}.eco-block.shell-variant-1{--eco-shell:url('./ecomat-shell-top-1.svg')}.eco-block.shell-variant-2{--eco-shell:url('./ecomat-shell-top-2.svg')}.eco-block.shell-variant-3{--eco-shell:url('./ecomat-shell-top-3.svg')}.eco-block.shell-variant-4{--eco-shell:url('./ecomat-shell-top-4.svg')}.eco-block.shell-variant-5{--eco-shell:url('./ecomat-shell-top-5.svg')}.eco-block.shell-variant-6{--eco-shell:url('./ecomat-shell-top-6.svg')}.eco-block.shell-variant-7{--eco-shell:url('./ecomat-shell-top-7.svg')}
.eco-block.is-seeded{background-image:linear-gradient(#14342c66,#14342c66),var(--eco-shell);border-color:#f0ad75}
.eco-sponge-sprite{position:absolute;z-index:2;left:25%;top:24%;width:50%;height:50%;overflow:visible;filter:drop-shadow(2px 3px 0 #102c28) drop-shadow(0 0 3px #ffc279)}
.eco-block.is-seeded .eco-sponge-sprite{animation:eco-sponge-snap .18s steps(2,end)}
.eco-mat-grid.is-interactive .eco-block{cursor:pointer}
.eco-mat-grid.is-interactive .eco-block.is-target:not(.is-seeded){outline:2px dashed #aafde3;outline-offset:-5px}
.eco-mat-grid.is-interactive .eco-block.is-awaiting{animation:eco-pulse 1s steps(2,end) infinite}
.eco-mat-grid.is-interactive .eco-block:hover{filter:brightness(1.25)}
.eco-mat-grid.is-interactive .eco-block:focus-visible,.eco-sponge-tray button:focus-visible,.eco-game button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.eco-sponge-tray{position:absolute;right:4%;top:20%;width:175px;padding:13px;background:#092c33;border:3px solid #6faba0;box-shadow:5px 5px #132724;text-align:center;color:#cce7db}
.eco-sponge-tray small,.eco-sponge-tray b{display:block;font-size:10px;letter-spacing:.12em;font-weight:400}
.eco-sponge-tray>span{display:block;margin:6px 0 12px;color:#e8d9a0;font:10px monospace}
.eco-fragment-tray-sprite{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin:12px auto;padding:5px;width:75px;height:75px;background:#17463f;border:2px solid #76dabb}
.eco-fragment-tray-sprite .eco-sponge-sprite{position:static;width:18px;height:18px;filter:none}
.eco-sponge-tray button{display:flex;flex-direction:column;align-items:center;gap:9px;width:100%;margin:10px 0;padding:11px 5px;border:2px solid #76dabb;background:#184841;color:#effff3;font:10px monospace;cursor:pointer}
.eco-sponge-tray button:disabled{opacity:.55;cursor:default}
.eco-sponge-tray button.selected{background:#38694f;border-color:#f5e094}
.eco-sponge-tray button .eco-sponge-sprite{position:static;width:32px;height:32px;filter:drop-shadow(2px 2px 0 #18332e)}
.eco-crane-scene{background:#0c5e70}
.eco-crane-sky{position:absolute;inset:0 0 68%;background:linear-gradient(#91c9d5,#c0dacf)}
.eco-crane-water{position:absolute;inset:32% 0 0;background:repeating-linear-gradient(0deg,#0b5464 0 12px,#187488 12px 17px,#0d6173 17px 28px)}
.eco-crane-water:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0e708644,#2bb0bd22,#063e5144)}
.eco-crane-water i{position:absolute;top:15%;left:15%;width:90px;height:3px;background:#b5e3d8;box-shadow:180px 45px #8dc8c5,380px 110px #8dc8c5}
.eco-crane-barge{position:absolute;right:0;top:24%;height:145px;width:34%;background:linear-gradient(#4b5650 0 44%,#9e5740 44% 76%,#5b3230 76%);border-left:7px solid #1e3332;border-bottom:12px solid #2e3633;box-shadow:-6px 6px #082e3a;color:#f6e2c2;text-align:center;padding-top:80px;font-size:12px;letter-spacing:.17em}
.eco-crane-barge:before{content:"";position:absolute;left:16%;top:-21%;width:25%;height:65px;background:#e9a333;border:6px solid #37443d}
.eco-barge-crew{position:absolute;inset:0;z-index:4}
.eco-barge-worker{position:absolute;top:-25px;left:19%;width:34px;height:53px;filter:drop-shadow(3px 3px 0 #17333a)}
.eco-barge-worker:nth-child(2){left:44%}
.eco-barge-worker:nth-child(3){left:68%}
.eco-crane-console{position:absolute;left:81%;top:5px;width:33px;height:27px;border:3px solid #233b40;background:#d8a84d;box-shadow:2px 3px #1a3338}
.eco-crane-console i{position:absolute;left:5px;top:4px;width:15px;height:7px;background:#2c6571;border:2px solid #142e36}
.eco-crane-console b{position:absolute;right:3px;top:-11px;width:3px;height:13px;background:#233b40;transform:rotate(20deg)}
.eco-crane-rigging{position:absolute;inset:0;z-index:2;width:100%;height:100%;overflow:visible;pointer-events:none}
.eco-crane-rigging line{vector-effect:non-scaling-stroke;stroke-linecap:square}
.eco-crane-boom-shadow{stroke:#182b2f;stroke-width:15}
.eco-crane-boom{stroke:#59605b;stroke-width:8}
.eco-crane-main-cable{stroke:#192f33;stroke-width:3}
.eco-crane-lifting-cable{stroke:#1c3233;stroke-width:2}
.eco-crane-hook{fill:#e8b24a;stroke:#243337;stroke-width:2;vector-effect:non-scaling-stroke}
.eco-crane-mat{position:absolute;width:min(26%,250px);z-index:3;transition:left .18s steps(3),top .18s steps(3),transform .18s steps(3)}
.eco-crane-mat .eco-lifting-frame{padding:4px;border-width:5px}.eco-crane-mat .eco-mat-grid{gap:2px;padding:2px;border-width:1px}.eco-crane-mat .eco-block{border-width:1px}
.eco-crane-caption{position:absolute;left:22px;bottom:20px;background:#062a35;padding:9px 12px;border:2px solid #69a9a2;color:#e7f7eb;font-size:11px;letter-spacing:.12em}
.eco-underwater-scene{background:linear-gradient(#146b7a,#094656 47%,#0a3b45 77%,#3c493b 78%)}
.eco-underwater-surface{position:absolute;inset:4% 0 auto;height:4px;background:#9cddd0;box-shadow:0 0 22px 7px #7bdac14d}
.eco-water-grid{position:absolute;inset:0;background-image:linear-gradient(#85d4c513 1px,transparent 1px),linear-gradient(90deg,#85d4c513 1px,transparent 1px);background-size:32px 32px}
.eco-fish-school{position:absolute;inset:0;z-index:2;pointer-events:none}
.eco-swimming-fish{position:absolute;width:34px;height:20px;transition:left .1s linear,top .16s ease-out,transform .1s steps(1);filter:drop-shadow(2px 2px 0 #07333e)}
.eco-pixel-fish-sprite{display:block;width:100%;height:100%;animation:eco-fish-swim 2.6s ease-in-out infinite alternate}
.eco-swimming-fish:nth-child(2n) .eco-pixel-fish-sprite{animation-delay:-1.3s}
.eco-underwater-scene:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 64% 20%,#87d8c32a,transparent 38%)}
.eco-underwater-scene.difficulty-2:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#06242b6b,#102f3277 42%,#09202b9c);mix-blend-mode:multiply}
.eco-underwater-scene.difficulty-2 .eco-water-grid{opacity:.45}
.eco-obstacle{position:absolute;right:1%;bottom:20%;z-index:2;width:7%;height:19%;background:#293f3a;border:6px solid #647964;box-shadow:6px 5px #1b3735}
.eco-obstacle:before{content:"OBSTACLE";position:absolute;left:0;top:-24px;color:#f6d783;font:10px monospace;letter-spacing:.1em}
.eco-obstacle i{position:absolute;width:20%;height:35%;background:#58725d;top:-15%}.eco-obstacle i:nth-child(1){left:6%}.eco-obstacle i:nth-child(2){left:40%;height:50%;top:-30%}.eco-obstacle i:nth-child(3){right:4%}
.eco-seabed{position:absolute;left:0;right:0;bottom:0;height:21%;background:repeating-linear-gradient(90deg,#3e5342 0 30px,#4d634c 30px 58px,#384b3d 58px 89px);border-top:7px solid #829779}
.eco-seabed i{position:absolute;top:-12px;width:11px;height:13px;background:#7bbaa0}.eco-seabed i:nth-child(1){left:12%}.eco-seabed i:nth-child(2){left:31%;height:20px;top:-20px}.eco-seabed i:nth-child(3){left:78%}.eco-seabed i:nth-child(4){left:91%;height:17px;top:-17px}
.eco-installed-site,.eco-target-outline,.eco-suspended-mat{position:absolute;width:18%;z-index:2}
.eco-installed-site{opacity:.87;transform:translate(-50%,-50%)}
.eco-installed-site .eco-mat-grid{border:4px solid #2b615c}
.eco-target-outline{transform:translate(-50%,-50%);aspect-ratio:2/1;border:4px dashed #f27569;background:#f2756920;box-shadow:0 0 18px #f2756950}
.eco-target-outline span{position:absolute;bottom:-24px;left:0;color:#d2e9de;font-size:10px;white-space:nowrap;letter-spacing:.1em}
.eco-target-outline.near{border-color:#f5d16b;background:#f5d16b1d;box-shadow:0 0 20px #f5d16b55}
.eco-target-outline.good{border-color:#86f6b8;background:#86f6b820;box-shadow:0 0 24px #86f6b866}
.eco-suspended-mat{z-index:3;transition:left .17s steps(2),top .17s steps(2),transform .17s steps(2)}
.eco-suspended-mat .eco-lifting-frame{padding:4px;border-width:5px;box-shadow:4px 7px #092f32}
.eco-suspended-mat .eco-mat-grid{gap:2px;padding:2px;border-width:1px}.eco-suspended-mat .eco-block{border-width:1px}
.eco-suspended-mat:before,.eco-suspended-mat:after{content:"";position:absolute;bottom:100%;height:80px;width:2px;background:#233638;z-index:-1}.eco-suspended-mat:before{left:13%}.eco-suspended-mat:after{right:13%}
.eco-suspended-mat.landed:before,.eco-suspended-mat.landed:after{opacity:0}
.eco-diver{position:absolute;right:3%;top:32%;z-index:4;width:100px;animation:eco-swim 3s ease-in-out infinite}
.eco-diver svg{width:100%;filter:drop-shadow(4px 5px 0 #06323b)}
.eco-diver-bubble{position:absolute;right:58%;top:-26px;min-width:70px;padding:5px 8px;background:#d8f9e8;color:#083d42;border:3px solid #0b5c61;font:bold 11px monospace;white-space:nowrap;text-align:center;box-shadow:4px 4px #0a393f}
.eco-game-panel{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(300px,1.2fr);gap:22px;padding:18px;background:#061820;border-top:3px solid #2c7068}
.eco-game-guidance{min-height:95px;padding:14px 17px;border:1px solid #30635a;background:#0a2730}
.eco-game-guidance>span{display:block;color:#70dabb;font-size:10px;letter-spacing:.14em;margin-bottom:9px}
.eco-game-guidance strong{display:block;color:#e3f3e7;font-size:13px;line-height:1.4;font-weight:400}
.eco-alignment{display:grid;grid-template-columns:1fr auto;gap:5px;margin-top:11px;color:#f1a27e;font-size:10px}
.eco-alignment.near{color:#eed37c}.eco-alignment.good{color:#9af6c1}
.eco-alignment>i{grid-column:1/3;display:block;height:6px;background:#122f34}.eco-alignment>i>i{display:block;height:100%;background:currentColor}
.eco-game-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.eco-direction-controls,.eco-rotation-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.eco-direction-controls{grid-template-rows:repeat(2,minmax(0,1fr))}
.eco-direction-controls button{grid-row:1/3}
.eco-game-controls button,.eco-stage-button{border:2px solid #3c8074;background:#0e3440;color:#d7f6e7;padding:8px;cursor:pointer;font:16px monospace}
.eco-game-controls button:hover,.eco-stage-button:hover:not(:disabled){background:#225a59;border-color:#90e3bd}
.eco-game-controls button span{font-size:9px;margin-left:4px;letter-spacing:.06em}
.eco-game-controls .eco-lower-button,.eco-stage-button{background:#e9b956;color:#0d2c32;border-color:#f7dd83;font-weight:700}
.eco-game-controls>small{grid-column:1/3;text-align:center;color:#8fb5aa;font-size:9px;letter-spacing:.04em;margin-top:3px}
.eco-stage-button{grid-column:2;align-self:center;width:100%;min-height:53px;font-size:13px;letter-spacing:.08em}
.eco-stage-button:disabled{background:#344744;border-color:#577168;color:#a2b9ae;cursor:default}
.eco-complete-actions{grid-column:2;display:flex;gap:8px;align-self:center}
.eco-complete-actions .eco-stage-button{grid-column:auto;min-width:0}
.eco-complete-actions .eco-replay-button{background:#0e3440;border-color:#3c8074;color:#d7f6e7}
.eco-game-footnote{margin:15px 0 0;color:#8daaa1;font-size:12px;line-height:1.5}
.eco-results-overlay{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px;background:#001016dc;backdrop-filter:blur(5px)}
.eco-results{position:relative;display:grid;grid-template-columns:minmax(280px,.85fr) minmax(390px,1.15fr);gap:28px;width:min(100%,1000px);max-height:calc(100dvh - 40px);overflow:auto;padding:32px;border:3px solid #6ad0b1;background:#081f27;box-shadow:0 28px 100px #000b;font-family:monospace}
.eco-results-close{position:absolute;right:12px;top:10px;width:34px;height:34px;border:1px solid #4c8d7a;background:#102f35;color:#e5f5ef;cursor:pointer;font:26px/1 monospace}
.eco-results-close:hover{background:#2c5a55}
.eco-results-summary>span,.eco-results form label,.eco-leaderboards h4{color:#78e0c2;font:11px monospace;letter-spacing:.12em}
.eco-results h3{margin:12px 0;color:#e5f5ef;font-family:inherit;font-size:clamp(25px,3vw,38px);font-weight:400;line-height:1.1}
.eco-results-summary p{color:#afc8be;line-height:1.5}.eco-results-summary p strong{color:#f5cf73}
.eco-results form{margin-top:25px}.eco-results form>label{display:block;margin:14px 0 7px}
.eco-results form>input{display:block;width:100%;min-width:0;padding:12px;border:1px solid #528c7c;border-radius:0;background:#04151d;color:#e5f5ef;font:15px monospace}
.eco-results .eco-email-explainer{margin:9px 0 14px;color:#acc9bf;font:11px/1.45 monospace}
.eco-results form button{display:block;width:100%;padding:12px 14px;border:1px solid #f2d578;border-radius:0;background:#e9b956;color:#0d2c32;cursor:pointer;font:700 11px monospace}
.eco-results form button:disabled{opacity:.65;cursor:default}.eco-results .eco-score-error{color:#ffb9a0}.eco-results .eco-score-saved{color:#8ef5cd}
.eco-leaderboards{display:grid;grid-template-columns:1fr 1fr;gap:16px}.eco-leaderboards>div{border:1px solid #315e59;padding:15px;background:#061820}.eco-leaderboards h4{margin:0 0 13px}
.eco-leaderboards ol{margin:0;padding-left:27px;color:#83b4a6}.eco-leaderboards li{padding:7px 0;border-top:1px solid #24433e;font-size:12px}.eco-leaderboards li span{display:inline-block;width:48%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap;color:#e7f5ed}.eco-leaderboards li b{color:#f5cf73}.eco-leaderboards li small{float:right;color:#a3c7bb}.eco-leaderboards p{font-size:12px;color:#91b5a8}
@keyframes eco-pulse{50%{filter:brightness(1.45)}}
@keyframes eco-sponge-snap{from{transform:scale(.5)}to{transform:scale(1)}}
@keyframes eco-swim{50%{transform:translateY(8px)}}
@keyframes eco-fish-swim{to{transform:translateX(12px) translateY(3px)}}
@media(max-width:900px){.eco-game-heading{display:block}.eco-game-heading-side{display:none}.eco-game-panel,.eco-results{grid-template-columns:1fr}.eco-stage-button,.eco-complete-actions{grid-column:1}}
@media(max-width:650px){.eco-game-section{padding:64px 16px}.eco-game-heading h2{font-size:43px}.eco-game-heading p:last-child{font-size:15px}.eco-game-status{gap:5px;padding:9px}.eco-game-status>div{display:block}.eco-game-status span,.eco-game-status b{display:block;font-size:9px}.eco-game-status b{font-size:11px;margin-top:3px}.eco-game-scene{height:340px}.eco-prep-mat{width:70%;left:8%;top:30%}.eco-sponge-tray{right:3%;top:4%;width:132px;padding:8px}.eco-sponge-tray button{padding:5px;margin:5px 0;font-size:8px}.eco-sponge-tray button .eco-sponge-sprite{width:20px;height:20px}.eco-prep-worker{left:7%;top:9%;transform:scale(.7)}.eco-lifting-frame{padding:5px;border-width:5px}.eco-mat-grid{gap:2px;padding:2px}.eco-block{border-width:1px}.eco-scene-caption{font-size:9px}.eco-crane-barge{width:40%;height:105px;font-size:8px;padding-top:55px}.eco-barge-worker{top:-20px;width:27px;height:42px}.eco-crane-console{width:23px;height:21px;left:80%}.eco-crane-mat{width:38%}.eco-installed-site,.eco-target-outline,.eco-suspended-mat{width:18%}.eco-diver{right:0;top:38%;width:65px}.eco-diver-bubble{font-size:9px}.eco-game-controls button{padding:9px 2px;font-size:13px}.eco-game-controls button span{display:block;margin:3px 0 0;font-size:8px}.eco-game-panel{padding:11px}.eco-game-controls>small{line-height:1.4}}
@media(prefers-reduced-motion:reduce){.eco-diver,.eco-pixel-fish-sprite,.eco-mat-grid.is-interactive .eco-block.is-awaiting{animation:none}.eco-suspended-mat,.eco-crane-mat,.eco-swimming-fish{transition:none}}
@media(max-width:650px){.eco-fragment-mat{width:70%;left:8%;top:39%}.eco-fragment-button{right:3%;top:4%;width:145px;padding:9px;font-size:9px}.eco-fragment-button .eco-sponge-sprite{width:30px;height:30px}.eco-fragment-button small{font-size:8px}.eco-results-overlay{padding:9px}.eco-results{max-height:calc(100dvh - 18px);padding:23px 16px}.eco-leaderboards{grid-template-columns:1fr}.eco-complete-actions{flex-direction:column}}

@media(max-width:650px){
.eco-game-shell,.eco-game-panel,.eco-game-scene,.eco-game-controls,.eco-results,.eco-results>*{min-width:0;max-width:100%;box-sizing:border-box}
.eco-game-scene{height:420px}.eco-fragment-mat,.eco-prep-mat{left:5%;width:90%;top:50%}
.eco-fragment-button{right:5%;top:5%;width:160px;min-height:100px}.eco-sponge-tray{right:5%;top:4%;width:160px}
.eco-game-controls button{min-height:48px;touch-action:manipulation}.eco-game-status{flex-wrap:wrap}
.eco-results{grid-template-columns:minmax(0,1fr)}.eco-results input{font-size:16px}
}

/* Keep the underwater playfield and its complete controls visible on phones. */
@media(max-width:650px){
.phase-align .eco-game-scene,.phase-crane .eco-game-scene,.phase-installed .eco-game-scene,.phase-complete .eco-game-scene{height:280px}
.eco-game-status{display:grid;grid-template-columns:minmax(0,1.8fr) repeat(3,minmax(0,1fr));gap:5px}
.eco-game-status b{font-size:9px;line-height:1.3}.eco-game-status span{font-size:8px}
.eco-game-panel{gap:10px;padding:10px}.eco-game-guidance strong{font-size:11px;line-height:1.35}.eco-game-guidance>span{font-size:9px}
.eco-game-controls{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.eco-direction-controls,.eco-rotation-controls{display:contents}.eco-direction-controls button{grid-row:auto}
.eco-game-controls button{height:48px;min-height:48px;padding:5px;font-size:15px}.eco-game-controls button span{font-size:8px;margin:2px 0 0}
.eco-game-controls>small{display:none}
.eco-installed-site,.eco-target-outline,.eco-suspended-mat{width:26%;box-sizing:border-box}
.eco-target-outline{aspect-ratio:auto;height:calc(13% + 10px);border-width:2px}
.eco-target-outline span{font-size:8px;bottom:-18px;letter-spacing:0}
.eco-suspended-mat .eco-lifting-frame,.eco-installed-site .eco-lifting-frame{padding:2px;border-width:3px;box-shadow:3px 4px #092f32}
.eco-suspended-mat .eco-mat-grid,.eco-installed-site .eco-mat-grid{padding:1px;gap:1px;box-sizing:border-box}
.eco-suspended-mat .eco-lifting-frame:before,.eco-suspended-mat .eco-lifting-frame:after{width:8px;height:8px;border-width:2px;top:-8px}
.eco-suspended-mat:before,.eco-suspended-mat:after{height:55px}
.eco-diver{width:48px;top:34%}.eco-diver-bubble{font-size:8px}
}