@font-face{font-family:'Gridfire Pixel';src:url('assets/gridfire-pixel.ttf') format('truetype');font-display:swap} *{box-sizing:border-box}body{margin:0;background:#13151a;color:#fff;font-family:'Gridfire Pixel',monospace;min-height:100dvh}button{font:inherit;font-weight:bold;color:#fff;background:#494c47;border:1px solid #81857c;padding:10px 24px;cursor:pointer}button:hover{background:#62665d}button:focus-visible{outline:2px solid #fff;outline-offset:2px}button:disabled{opacity:.45;cursor:default}[hidden]{display:none!important}.space{position:fixed;inset:0;overflow:hidden;z-index:-1;background:#13151a}.star{position:absolute;pointer-events:none}.planet{position:absolute;opacity:.55;filter:brightness(.6);background-size:contain;background-repeat:no-repeat;background-position:center}.p1{width:350px;height:350px;top:5%;left:12%}.p2{width:300px;height:300px;right:5%;top:38%}.p3{width:180px;height:180px;bottom:-30px;left:40%}#menu{min-height:100dvh;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px}h1{font-size:clamp(40px,9vw,86px);margin:0}#start{font-size:22px;padding:12px 50px}header{height:60px;background:#a5a8a1;padding:10px 16px;border-bottom:3px solid #656a61}#grid{display:grid;grid-template-columns:repeat(15,1fr);width:min(64vh,600px,calc(100vw - 32px));aspect-ratio:1;margin:28px auto;background:transparent;border:1px solid #89927f;user-select:none}#grid button{padding:0;min-width:0;aspect-ratio:1;border:0;border-right:1px solid #555e51;border-bottom:1px solid #555e51;border-radius:0;background:transparent;overflow:hidden}#grid button:nth-child(15n){border-right:0}#grid button:nth-child(n+211){border-bottom:0}#grid button:hover{background:#b0ba9b33}#grid img{width:100%;height:100%;display:block;pointer-events:none}#inventory{margin:20px 16px}h2{font-size:16px;margin:0 0 10px}#slots{display:flex;gap:8px}.slot{width:65px;height:65px;padding:6px;position:relative;background:#33382e}.slot img{width:100%;height:100%;display:block}.slot.selected{outline:2px solid #fff;outline-offset:1px}.amount{position:absolute;bottom:2px;right:3px;background:#33382e;padding:1px 3px;font-size:12px}dialog{width:min(430px,calc(100vw - 30px));background:#292d26;color:#fff;border:1px solid #999e92;padding:20px}dialog::backdrop{background:#000a}.dialog-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.dialog-head h2{margin:0}.dialog-head button{padding:5px 10px}.shop-item{display:flex;gap:12px;align-items:center;margin:12px 0}.shop-item img{width:48px;height:48px}.shop-item span{flex:1;font-size:13px}.shop-item button{padding:8px 12px;font-size:13px}

#launch-row{text-align:center;margin:0 auto 20px}#launch{min-width:150px;font-size:20px;padding:8px 28px}#flight{position:fixed;inset:0;width:100vw;height:100dvh;z-index:2;background:#13151a}#grid{margin-bottom:18px}

body,button,h1,h2{font-family:'Gridfire Pixel',monospace;font-weight:normal}h1{font-size:clamp(40px,9vw,80px)}button{line-height:1.3}#slots{width:100%;overflow-x:auto;overflow-y:hidden;padding:4px 3px 8px;touch-action:pan-x;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#bbb #494c47;cursor:grab}#slots.dragging{cursor:grabbing;user-select:none}.slot{flex:0 0 65px;touch-action:pan-x}.slot img{pointer-events:none}#block-tools{position:fixed;left:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;z-index:1}#tool-panel{width:48px;height:220px;background:#aaa;border:3px solid #eee;display:flex;flex-direction:column;gap:20px;padding:2px}#tool-panel button{width:38px;height:34px;padding:7px;background:#494c47;border:0}#tool-panel button.active{outline:2px solid white;outline-offset:-2px;background:#686c62}#tool-panel svg{width:100%;height:100%;fill:#eee;shape-rendering:crispEdges}#toggle-tools{padding:12px 6px;background:#aaa;border:2px solid #eee;border-left:0;color:#333}#grid[data-tool="delete"] button{cursor:crosshair}#grid[data-tool="rotate"] button{cursor:pointer}#grid[data-tool="delete"] button:hover{background:#8336}#grid[data-tool="rotate"] button:hover{background:#77883366}

.placement-smoke{position:fixed;pointer-events:none;z-index:3;animation:block-smoke 0.6s ease-out forwards}@keyframes block-smoke{from{opacity:0.75;transform:translate(0,0) scale(0.6)}to{opacity:0;transform:translate(var(--smoke-x),var(--smoke-y)) scale(1.7)}}

#grid button{position:relative}#grid img.insert-art{position:absolute;left:50%;top:50%}#flight-meters{position:fixed;bottom:max(18px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(620px,calc(100vw - 32px));z-index:3;display:flex;gap:20px;pointer-events:none}.resource{flex:1;min-width:0;background:#292d26;border:2px solid #81857c;padding:10px}.meter-label{display:flex;justify-content:space-between;gap:8px;font-size:12px;margin-bottom:8px}.meter{height:20px;border:2px solid #a5a8a1;background:#0b0e0b;padding:2px}.meter-fill{height:100%;width:0;background:repeating-linear-gradient(to right,#ac2828 0,#ac2828 12px,#0b0e0b 12px,#0b0e0b 14px)}#electricity-fill{background:repeating-linear-gradient(to right,#d2ac4b 0,#d2ac4b 12px,#0b0e0b 12px,#0b0e0b 14px)}@media(max-width:420px){#flight-meters{gap:10px}.resource{padding:8px}.meter-label{font-size:10px}}

#grid-wrap{position:relative;width:min(64vh,600px,calc(100vw - 32px));margin:28px auto 18px}#grid-wrap #grid{width:100%;margin:0}#shield-preview{position:absolute;inset:0;pointer-events:none}.hologram-preview{position:absolute;width:calc(100% / 15);height:calc(100% / 15);opacity:.58;filter:drop-shadow(0 0 3px #88fff0);pointer-events:none}

#minimap{position:fixed;top:max(16px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));width:160px;height:160px;z-index:3;background:#292d26;border:2px solid #81857c;pointer-events:none;image-rendering:pixelated}@media(max-width:480px){#minimap{width:120px;height:120px;top:12px;left:12px}}

header{display:flex;align-items:center;justify-content:space-between;gap:16px}#screw-counter{display:flex;align-items:center;gap:8px;background:#292d26;border:2px solid #81857c;height:40px;padding:3px 12px;font-size:16px}#screw-counter img{width:30px;height:30px;object-fit:contain}.shop-item .buy-block{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:68px}.shop-item .buy-block span{flex:none}.shop-item .buy-block img{width:24px;height:24px;object-fit:contain}

#give-up{position:fixed;top:max(16px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:4;font-size:14px;padding:10px 18px;background:#292d26;border:2px solid #81857c}#give-up:hover{background:#494c47}

#ship-saves-dialog,#ship-load-dialog{max-height:calc(100dvh - 32px);overflow-y:auto}#ship-saves-dialog label{font-size:12px}.ship-save-form{display:flex;gap:8px;margin:10px 0}.ship-save-form input{min-width:0;flex:1;font:inherit;font-size:12px;padding:10px;background:#13151a;color:#fff;border:1px solid #81857c}.ship-save-form button,.saved-ship button,.ship-load-actions button{font-size:12px;padding:8px 12px}.ship-note{font-size:11px;line-height:1.6;color:#bec4b4}.saved-ship{display:flex;align-items:center;gap:12px;border-top:1px solid #656a61;padding:12px 0;font-size:13px}.saved-ship span{flex:1;min-width:0;overflow-wrap:anywhere}#saved-ships{max-height:40dvh;overflow-y:auto}#ship-load-message,#ship-load-total{font-size:13px;line-height:1.6;overflow-wrap:anywhere}.ship-material{display:flex;align-items:center;gap:8px;margin:10px 0;font-size:12px}.ship-material>img{width:36px;height:36px;object-fit:contain}.ship-material>span{flex:1;min-width:0}.ship-material .material-cost{flex:none}.ship-material .material-screw{width:24px;height:24px}.ship-load-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}

#editor-tools{display:flex;flex-direction:column;gap:20px}#tool-panel.paint-open{width:232px;height:auto;max-height:calc(100dvh - 32px);overflow-y:auto;padding:10px;gap:0}#paint-panel{display:flex;flex-direction:column;gap:8px}#paint-panel button{width:auto;height:auto;font-size:11px;padding:6px;border:1px solid #81857c}#paint-wheel{width:180px;height:180px;align-self:center;touch-action:none;cursor:crosshair}.paint-row{display:flex;align-items:center;justify-content:space-between;gap:8px}#paint-current{width:32px;height:28px;border:2px solid #fff}#pipette-tool{display:flex;align-items:center;gap:6px}#pipette-tool svg{width:16px;height:16px}#pipette-tool[aria-pressed="true"]{outline:2px solid #fff}#paint-panel h2,.paint-label{font-size:11px;margin:0;color:#242823}#paint-brightness{width:100%;margin:0;accent-color:#494c47}#recent-colours{display:flex;flex-wrap:wrap;gap:6px;min-height:24px}#recent-colours button{width:24px;height:24px;padding:0;border:2px solid #fff}#grid[data-tool="paint"] button{cursor:crosshair}#screw-password{width:100%;font:inherit;font-size:14px;background:#13151a;color:#fff;border:1px solid #81857c;padding:10px}.dialog-head .shop-heading{background:none;border:0;padding:0;font-size:16px}

#launch-checklist{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:1;width:210px;background:#292d26;border:2px solid #81857c;border-right:0;padding:12px}.checklist-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.checklist-head h2{font-size:12px;line-height:1.5;margin:0}#toggle-checklist{padding:3px 7px;min-width:28px;font-size:16px}.checklist-item{display:flex;align-items:center;gap:9px;font-size:11px;line-height:1.6;margin-top:16px;color:#bec4b4}.checklist-item>span:first-child{font-size:18px;min-width:20px;text-align:center}.checklist-item[data-ready="true"]{color:#a4c889}@media(max-width:700px){#launch-checklist{top:74px;transform:none;width:170px;padding:8px}.checklist-head h2,.checklist-item{font-size:10px}.checklist-item{margin-top:10px}}

#shop-dialog{max-height:calc(100dvh - 32px);overflow-y:auto}.shop-category{border-top:1px solid #656a61;padding-top:16px;margin-top:18px}.shop-category:first-child{border-top:0;padding-top:0;margin-top:0}.shop-category h2{font-size:13px;color:#bec4b4;margin-bottom:12px}

#flight-menu{position:fixed;top:calc(max(16px,env(safe-area-inset-top)) + 168px);left:max(16px,env(safe-area-inset-left));width:160px;z-index:3;font-size:14px;padding:8px;background:#292d26;border:2px solid #81857c}#flight-menu:hover{background:#494c47}@media(max-width:480px){#flight-menu{top:140px;left:12px;width:120px;font-size:12px}}

.builder-actions{display:flex;gap:8px;align-items:center}#flight{touch-action:none}#guide-dialog{width:min(650px,calc(100vw - 30px));max-height:calc(100dvh - 32px);overflow-y:auto}#guide-dialog .dialog-head{gap:12px;position:sticky;top:-20px;background:#292d26;padding:8px 0;z-index:1}#guide-title{flex:1}#guide-content{font-size:13px;line-height:1.8}#guide-content p{margin:12px 0 18px}#guide-content section+section{border-top:1px solid #656a61;margin-top:24px;padding-top:20px}.guide-card{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:14px;margin:10px 0;font-size:13px}.guide-icons{display:flex;align-items:center;gap:4px;flex-shrink:0}.guide-icons img{width:48px;height:48px;object-fit:contain;image-rendering:pixelated}.guide-card .guide-icons img{width:36px;height:36px}.guide-block-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}.guide-block-list .guide-card{margin:0;gap:10px;flex-direction:column;align-items:flex-start}.guide-section-head{display:flex;align-items:center;gap:12px}.guide-section-head h3{font:inherit;font-size:14px;margin:0;color:#d4dcc9}@media(max-width:480px){header{gap:8px;padding:10px}.builder-actions button{font-size:12px;padding:8px 12px}#screw-counter{font-size:13px;padding:3px 8px;gap:4px}#guide-dialog{padding:16px}#guide-dialog .dialog-head{top:-16px}#guide-content{font-size:11px}.guide-card{font-size:11px;gap:10px}.guide-icons img{width:40px;height:40px}.guide-card .guide-icons img{width:28px;height:28px}}

#servers{min-height:100dvh;background:#13151a}#servers header{height:auto;min-height:60px}#servers-title{margin:0;color:#fff}#server-list,.server-top,#server-status{width:min(760px,calc(100vw - 32px));margin:20px auto}.server-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.server-top span{flex:1}.server-top button{font-size:11px;padding:7px 10px}.server-card{display:flex;justify-content:space-between;align-items:center;gap:16px;background:#292d26;border:2px solid #81857c;padding:18px;margin-bottom:12px}.server-card h3{font:inherit;font-size:15px;margin:0 0 10px;overflow-wrap:anywhere}.server-card p{font-size:11px;line-height:1.8;margin:0;color:#c7ccbd}.server-actions{display:flex;gap:8px;flex-wrap:wrap}.server-actions button{padding:8px 12px;font-size:12px}.connection-note{font-size:10px;line-height:1.8;color:#c7ccbd}.builder-connection{margin:8px 16px}.builder-connection:empty{display:none}body:has(#game[hidden]) .builder-connection{display:none}.auth-choice{display:flex;flex-direction:column;gap:12px}#auth-form,#server-form{display:flex;flex-direction:column;gap:12px}#auth-form label,#server-form label{font-size:12px}#auth-form input,#server-form input:not([type=checkbox]){font:inherit;font-size:14px;color:#fff;background:#13151a;border:1px solid #81857c;padding:10px;width:100%}.checkbox-label{display:flex;align-items:center;gap:10px;line-height:1.6}.checkbox-label input{width:20px;height:20px;accent-color:#a5a8a1}.form-error{font-size:11px;color:#ffc9b6;line-height:1.8}.form-error:empty{display:none}#online-hud{position:fixed;top:16px;right:16px;z-index:3;pointer-events:none;display:flex;flex-direction:column;align-items:flex-end;gap:8px;font-size:10px;text-shadow:2px 2px #13151a;max-width:45vw;text-align:right;line-height:1.8}#online-room-name{overflow-wrap:anywhere}@media(max-width:480px){#servers header{padding:10px;gap:8px}#servers header button{font-size:10px;padding:8px 10px}.server-card{padding:12px;gap:10px}.server-card h3{font-size:12px}.server-card p{font-size:10px}.server-actions{flex-direction:column}.server-actions button{font-size:10px}#online-hud{right:12px;top:12px;font-size:9px}}

#mobile-shoot{display:none;position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);min-width:100px;min-height:48px;padding:10px 18px;background:#292d26;border:2px solid #a5a8a1;font-size:14px;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#mobile-shoot[aria-pressed="true"]{background:#62665d;border-color:#fff}
@media(any-pointer:coarse){#mobile-shoot{display:block}}
@media(pointer:coarse){
 #game{display:flex;flex-direction:column;min-height:100dvh;padding-bottom:calc(112px + env(safe-area-inset-bottom));overflow-x:hidden}
 #game>header{order:0;height:52px;flex:none;padding:6px 12px;gap:8px}
 .builder-actions button{font-size:11px;padding:8px 12px;min-height:36px}
 #screw-counter{height:36px;font-size:13px;padding:3px 8px;gap:4px}
 #screw-counter img{width:24px;height:24px}
 #launch-checklist{order:1;position:relative;right:auto;top:auto;transform:none;align-self:flex-end;width:min(320px,calc(100% - 24px));margin:8px 12px 0;border:2px solid #81857c;padding:8px}
 .checklist-head h2{font-size:10px}
 #checklist-items{display:flex;gap:12px}
 .checklist-item{flex:1;min-width:0;font-size:9px;line-height:1.5;gap:5px;margin-top:8px}
 .checklist-item>span:first-child{font-size:16px;min-width:16px}
 #grid-wrap{order:2;width:min(560px,calc(100vw - 40px),calc(100dvh - 318px - env(safe-area-inset-bottom)));margin:12px auto 8px;flex:none}
 #launch-row{order:3;margin:0 auto 12px}
 #launch{font-size:16px;min-height:38px;padding:7px 24px}
 #inventory{position:fixed;left:0;right:0;bottom:0;height:calc(112px + env(safe-area-inset-bottom));margin:0;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:#292d26;border-top:2px solid #81857c;z-index:1}
 #inventory h2{font-size:12px;margin-bottom:6px}
 #slots{gap:8px;padding:4px 3px 8px}
 .slot{flex-basis:56px;width:56px;height:56px;padding:4px}
 #tool-panel{height:188px}
 #editor-tools{gap:12px}
 #tool-panel.paint-open{height:auto}
 #flight-meters{gap:10px;bottom:max(12px,env(safe-area-inset-bottom));width:min(620px,calc(100vw - 24px))}
 .resource{padding:8px}
 .meter-label{font-size:10px}
}
@media(pointer:coarse) and (orientation:landscape) and (max-height:600px){
 #game{display:grid;grid-template-columns:1fr minmax(160px,28vw);grid-template-rows:52px auto auto 1fr;align-content:start}
 #game>header{grid-column:1/-1;grid-row:1}
 #grid-wrap{grid-column:1;grid-row:2/5;width:min(calc(100dvh - 184px - env(safe-area-inset-bottom)),calc(72vw - 40px));margin:8px auto}
 #launch-checklist{grid-column:2;grid-row:2;width:calc(100% - 12px);align-self:start;margin:8px 12px 0 0}
 #checklist-items{display:block}
 #launch-row{grid-column:2;grid-row:3;margin:12px 12px 12px 0}
 #block-tools{top:calc(52px + (100dvh - 164px)/2)}
}

@media(max-width:1150px),(pointer:coarse){
 #game:has(#tool-panel.paint-open:not([hidden])){display:flex;flex-direction:column;overflow-x:hidden}
 #game:has(#tool-panel.paint-open:not([hidden]))>header{order:0;flex:none}
 #game:has(#tool-panel.paint-open:not([hidden]))>#launch-checklist{order:1;position:relative;top:auto;right:auto;transform:none;align-self:flex-end;width:min(320px,calc(100% - 24px));margin:8px 12px 0;border:2px solid #81857c;padding:8px}
 #game:has(#tool-panel.paint-open:not([hidden])) #checklist-items{display:flex;gap:12px}
 #game:has(#tool-panel.paint-open:not([hidden])) .checklist-item{flex:1;min-width:0;font-size:9px;gap:5px;margin-top:8px}
 #game:has(#tool-panel.paint-open:not([hidden]))>#block-tools{order:2;position:relative;top:auto;left:auto;transform:none;align-self:center;width:min(420px,calc(100% - 24px));margin:10px auto 0;flex:none}
 #game:has(#tool-panel.paint-open:not([hidden]))>#grid-wrap{order:3;flex:none}
 #game:has(#tool-panel.paint-open:not([hidden]))>#launch-row{order:4}
 #game:has(#tool-panel.paint-open:not([hidden]))>#inventory{order:5}
 #game #tool-panel.paint-open{width:calc(100% - 24px);height:auto;max-height:none;overflow:visible;padding:10px;flex:none}
 #game #paint-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:6px 10px;align-items:center}
 #game #paint-wheel{grid-column:1;grid-row:1/7;width:100%;max-width:140px;height:auto;aspect-ratio:1;justify-self:center;align-self:center}
 #game #paint-back{grid-column:2;grid-row:1}
 #game .paint-row{grid-column:2;grid-row:2;gap:6px}
 #game #paint-current{width:24px;height:24px;flex:none}
 #game #pipette-tool{font-size:9px;padding:4px;gap:4px}
 #game #pipette-tool svg{width:14px;height:14px}
 #game .paint-label{grid-column:2;grid-row:3}
 #game #paint-brightness{grid-column:2;grid-row:4;min-width:0}
 #game #paint-panel h2{grid-column:2;grid-row:5}
 #game #recent-colours{grid-column:2;grid-row:6;max-height:60px;overflow-y:auto}
}

#menu h1{width:min(680px,calc(100vw - 40px),115dvh);line-height:0}#menu h1 img{width:100%;height:auto;display:block}
#flight-joystick{display:none;position:absolute;left:calc(100% + 12px);bottom:0;width:116px;height:116px;padding:0;border:3px solid #a5a8a1;border-radius:50%;background:#292d26d9;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.joystick-cross{position:absolute;inset:20px;background:linear-gradient(transparent 48%,#81857c66 48%,#81857c66 52%,transparent 52%),linear-gradient(90deg,transparent 48%,#81857c66 48%,#81857c66 52%,transparent 52%);pointer-events:none}
.joystick-thumb{position:absolute;left:50%;top:50%;width:44px;height:44px;background:#62665d;border:3px solid #d5d8d1;border-radius:50%;transform:translate(calc(-50% + var(--stick-x,0px)),calc(-50% + var(--stick-y,0px)));pointer-events:none}
#flight-joystick[aria-pressed="true"]{border-color:#fff}
@media(any-pointer:coarse){#flight-joystick{display:block}#flight-meters{left:max(12px,env(safe-area-inset-left));transform:none;width:min(620px,calc(100vw - 152px - env(safe-area-inset-right)));gap:8px;bottom:max(12px,env(safe-area-inset-bottom))}.resource{padding:6px}.meter-label{font-size:10px}}
@media(any-pointer:coarse) and (max-width:480px){.meter-label{flex-direction:column;gap:4px;font-size:clamp(7px,2.25vw,9px)}.meter{height:18px}}

@media(any-pointer:coarse){#flight-joystick{position:fixed;left:auto;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom))}}

#sand-background{display:none;position:fixed;inset:0;background-image:var(--sand-art);background-size:256px 256px;image-rendering:pixelated;z-index:-1}.ground-active #sand-background{display:block}.ground-active .space{display:none}.ground-active #grid{background:transparent;border-color:#745b3c}.ground-active #grid button{border-color:#917047}.ground-active #grid button:hover{background:#fff3}.slot[hidden],.shop-item[hidden]{display:none!important}

.ground-active #servers{background:transparent}@media(max-width:480px),(pointer:coarse){.builder-actions{gap:6px}}

#area{padding:9px 12px}#area-dialog{width:min(520px,calc(100vw - 24px))}.area-options{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.area-options button{padding:16px 8px;display:flex;align-items:center;flex-direction:column;gap:12px;min-width:0}.area-options img{width:80px;height:80px;object-fit:contain}.area-options [aria-pressed="true"]{outline:2px solid #fff}.ground-active[data-area="earth"] #sand-background{background-image:var(--earth-art);background-size:512px 512px}.ground-active[data-area="earth"] #grid{border-color:#a4ba87}.ground-active[data-area="earth"] #grid button{border-color:#7b965f}#server-area{width:100%;padding:10px;font:inherit;background:#13151a;color:#fff;border:1px solid #81857c;margin-bottom:16px}@media(max-width:480px){.area-options{gap:8px}.area-options img{width:64px;height:64px}#area{padding:6px 8px}}

/* Split shop: block shelf and vertically centred selected part. */
#shop-dialog{width:min(900px,calc(100vw - 24px));height:min(880px,calc(100dvh - 24px));max-height:calc(100dvh - 24px);padding:0;border:3px solid #909787;background:#292d26;overflow:hidden;box-shadow:0 0 0 3px #151914}
#shop-dialog .shop-head{height:54px;margin:0;padding:10px 16px;border-bottom:3px solid #151914;background:#777f6d}
#shop-dialog .shop-heading{font-size:19px;text-shadow:2px 2px #30382b}
#shop-dialog #close-shop{width:34px;height:34px;padding:0;border:2px solid #181e15;background:#494f40;font-size:20px}
.shop-layout{display:grid;grid-template-columns:46% 54%;height:calc(100% - 54px);min-height:0}
#shop-items{min-width:0;overflow-y:auto;overscroll-behavior:contain;padding:18px;scrollbar-color:#818c70 #292d26;border-right:3px solid #151914}
#shop-items .shop-category{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;border:0;margin:0 0 24px;padding:0}
#shop-items .shop-category h2{grid-column:1/-1;margin:0 0 2px;color:#d6ddcc;font-size:13px}
#shop-items .shop-item{margin:0;min-width:0;display:block}
#shop-items .shop-tile{display:block;width:100%;aspect-ratio:1;padding:12px;background:#3b4232;border:2px solid #747f61;box-shadow:inset 3px 3px #555f45,inset -3px -3px #1b2116;touch-action:manipulation}
#shop-items .shop-tile img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
#shop-items .shop-tile:hover{background:#4c563f}
#shop-items .shop-tile.selected{outline:2px solid #d4eaa9;outline-offset:2px;background:#586447;border-color:#c2d79c}
#shop-detail{min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:20px 24px;display:flex;flex-direction:column;align-items:stretch;gap:14px;scrollbar-color:#818c70 #292d26}
.shop-preview{min-height:132px;height:clamp(132px,21dvh,190px);display:flex;align-items:center;justify-content:center;flex-shrink:0}
#shop-preview-art{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
#shop-block-name{text-align:center;font-size:clamp(16px,2.4vw,24px);line-height:1.3;margin:0}
.shop-health{display:flex;align-items:center;gap:12px;font-size:14px}
#shop-health-value{white-space:nowrap}
#shop-health-bar{flex:1;height:18px;border:2px solid #131810;background:#1c2415;padding:2px}
#shop-health-bar>span{display:block;height:100%;background:#91b36a;box-shadow:inset 0 3px #bacd91}
.shop-description{border:2px solid #707e5d;padding:12px;background:#20251c;min-height:122px;flex:1}
.shop-description h3{font-size:14px;margin:0 0 10px;color:#d4e3bf}
#shop-description-text{font-size:12px;line-height:1.6;max-height:154px;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:#818c70 #20251c}
#shop-description-text p{margin:0 0 12px}#shop-description-text p:last-child{margin:0}
#shop-buy{min-height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:12px;font-size:19px;border:2px solid #b6c79d;background:#5c7142;box-shadow:inset 0 3px #849b66,inset 0 -3px #344524}
#shop-buy:hover{background:#748c53}#shop-buy:disabled{opacity:.5;background:#4a5042}
#shop-buy img{width:28px;height:28px;object-fit:contain;image-rendering:pixelated}
.shop-head-actions{display:flex;align-items:center;gap:16px;min-width:0}
#shop-balance{display:flex;align-items:center;gap:8px;min-width:0;font-size:18px}#shop-balance-icon{width:30px;height:30px;object-fit:contain;image-rendering:pixelated}#shop-screw-value{max-width:150px;overflow:hidden;text-overflow:ellipsis}
.shop-detail-content{display:flex;flex-direction:column;gap:14px;margin-block:auto;flex-shrink:0;width:100%}.shop-detail-content .shop-description{flex:none}
@media(max-width:600px){
 #shop-dialog{width:calc(100vw - 12px);height:calc(100dvh - 12px);max-height:calc(100dvh - 12px)}
 #shop-dialog .shop-head{height:44px;padding:5px 10px}.shop-layout{height:calc(100% - 44px);grid-template-columns:43% 57%}
 #shop-items{padding:12px 9px}#shop-items .shop-category{gap:10px;margin-bottom:20px}#shop-items .shop-category h2{font-size:10px}#shop-items .shop-tile{padding:6px}
 #shop-detail{padding:12px 10px;gap:10px}.shop-preview{height:clamp(92px,18dvh,160px);min-height:92px}#shop-block-name{font-size:15px}
 .shop-health{gap:7px;font-size:10px}#shop-health-bar{height:15px}.shop-description{padding:9px;min-height:105px}.shop-description h3{font-size:11px}#shop-description-text{font-size:10px;max-height:142px;line-height:1.5}
 #shop-buy{font-size:15px;gap:8px;min-height:40px;padding:6px}#shop-buy img{width:22px;height:22px}.shop-head-actions{gap:10px}#shop-balance{font-size:14px;gap:5px}#shop-balance-icon{width:24px;height:24px}.shop-detail-content{gap:10px}
}
@media(max-height:580px){#shop-detail{gap:10px}.shop-preview{min-height:80px;height:90px}.shop-description{flex:none}}

.area-options{grid-template-columns:repeat(4,minmax(0,1fr))}#area-dialog{width:min(650px,calc(100vw - 24px))}.ground-active[data-area="valos"] #sand-background{background-image:var(--valos-art);background-size:512px 512px}.ground-active[data-area="valos"] #grid{border-color:#79b2c7}.ground-active[data-area="valos"] #grid button{border-color:#538599}@media(max-width:480px){.area-options{grid-template-columns:repeat(2,minmax(0,1fr))}}

.shop-damage{display:flex;align-items:center;gap:12px;font-size:14px}#shop-damage-value{white-space:nowrap}#shop-damage-bar{flex:1;height:18px;border:2px solid #131810;background:#2c1515;padding:2px}#shop-damage-bar>span{display:block;height:100%;background:#d25e55;box-shadow:inset 0 3px #ed8b80}
@media(max-width:600px){.shop-damage{gap:7px;font-size:10px}#shop-damage-bar{height:15px}}
@media(pointer:coarse){
 #game>#block-tools,#game:has(#tool-panel.paint-open:not([hidden]))>#block-tools{order:3;position:relative;top:auto;left:auto;transform:none;align-self:center;display:flex;flex-direction:column;align-items:center;width:auto;max-width:calc(100vw - 24px);margin:0 auto 8px;flex:none;z-index:1}
 #game>#grid-wrap,#game:has(#tool-panel.paint-open:not([hidden]))>#grid-wrap{order:2;width:min(560px,calc(100vw - 40px),max(220px,calc(100dvh - 354px - env(safe-area-inset-bottom))));margin:12px auto 8px}
 #game>#launch-row,#game:has(#tool-panel.paint-open:not([hidden]))>#launch-row{order:4;margin:0 auto 12px}
 #game #tool-panel{width:auto;height:auto;max-width:100%;padding:4px;gap:0;flex:none}
 #game #editor-tools{flex-direction:row;gap:8px}#game #editor-tools button{width:40px;height:38px}
 #game #toggle-tools{width:44px;height:28px;padding:3px 8px;border:2px solid #eee;font-size:0}#game #toggle-tools::before{content:'▲';font-size:16px}#game #toggle-tools[aria-expanded="true"]::before{content:'▼'}
 #game #tool-panel.paint-open{width:min(420px,calc(100vw - 24px));height:auto;padding:10px;max-height:none;overflow:visible}
}
@media(pointer:coarse) and (orientation:landscape) and (max-height:600px){
 #game{grid-template-rows:52px auto auto auto 1fr}#game>#grid-wrap{grid-column:1;grid-row:2/6;width:min(calc(100dvh - 184px - env(safe-area-inset-bottom)),calc(72vw - 40px));margin:8px auto}
 #game>#block-tools{grid-column:2;grid-row:3;margin:8px 12px 8px 0}#game #editor-tools{gap:4px}#game #editor-tools button{width:34px;height:34px;padding:6px}
 #game>#launch-row{grid-column:2;grid-row:4;margin:0 12px 12px 0}
}

#crafting-dialog{width:min(820px,94vw);max-height:88dvh;overflow:auto}
#crafting-resources{display:flex;flex-wrap:wrap;gap:12px;position:sticky;top:0;background:#252b24;padding:10px;z-index:1;border:2px solid #737e68}
.craft-ingredient{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.craft-ingredient img{width:30px;height:30px;object-fit:contain;image-rendering:pixelated}
#crafting-recipes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.craft-card{padding:12px;border:2px solid #69715e;background:#30372d;display:flex;flex-direction:column;gap:10px}
.craft-card[hidden]{display:none}.craft-head{display:flex;align-items:center;gap:10px}.craft-head img{width:52px;height:52px;object-fit:contain;image-rendering:pixelated}.craft-head h3{font-size:15px;margin:0}.craft-cost{display:flex;flex-wrap:wrap;gap:8px;font-size:12px}.craft-cost .missing{color:#ff9e91}.craft-card button{align-self:flex-end}.craft-card .ship-note{margin:0}
@media(max-width:600px){#crafting-recipes{grid-template-columns:1fr}.builder-actions{flex-wrap:wrap;gap:5px}.builder-actions button{font-size:12px;padding:7px 8px}#crafting-resources{gap:8px;font-size:12px}}

@media(max-width:600px){#game>header{height:auto;min-height:52px}.builder-actions{flex:1;min-width:0}#screw-counter{flex-shrink:0}}
@media(max-width:360px){.builder-actions button{font-size:10px;padding:7px}.builder-actions{gap:4px}}
@media(max-width:760px){#game>header{height:auto;min-height:52px}.builder-actions{flex-wrap:wrap;gap:5px;flex:1;min-width:0}#screw-counter{flex-shrink:0}.builder-actions button{font-size:11px;padding:7px 8px}}
@media(max-width:600px){}

#start:disabled{cursor:progress}

.password-head-actions{display:flex;align-items:center;gap:8px}#download-apk{display:flex;align-items:center;justify-content:center;width:36px;height:32px;color:#fff;background:#494c47;border:1px solid #81857c}#download-apk:hover{background:#62665d}#download-apk:focus-visible{outline:2px solid #fff;outline-offset:2px}

.star-field{position:absolute;inset:0;pointer-events:none;animation:star-drift 200s linear infinite;will-change:transform}.star-depth-1{animation-duration:140s;opacity:.75}@keyframes star-drift{from{transform:translateX(0)}to{transform:translateX(-100%)}}

/* Guide navigation uses the editor's monochrome square-pixel icon style. */
.guide-card .guide-tool-icon{width:36px;height:40px;object-fit:contain;image-rendering:pixelated;flex:0 0 auto;pointer-events:none}
@media(max-width:480px){.guide-card .guide-tool-icon{width:28px;height:32px}}
#builder-controls{display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap;margin:8px 12px;position:relative;z-index:2}#builder-controls button,#builder-controls select{font:inherit;font-size:10px;padding:8px;min-height:36px;background:#33363b;color:#eee;border:2px solid #777b82}#builder-controls label{font-size:10px;display:flex;align-items:center;gap:5px}#builder-controls button[aria-pressed="true"]{background:#60656c;border-color:#eee}#build-preview{position:absolute;inset:0;pointer-events:none;z-index:5}.build-ghost{position:absolute;width:6.666667%;height:6.666667%;background:#ffffff1c;border:1px solid #c4ead4}.build-ghost img{width:100%;height:100%;opacity:.45;image-rendering:pixelated}.build-ghost.invalid{border-color:#ed887b;background:#ad34272c}.build-ghost.invalid img{opacity:.25}.thrust-arrow{position:absolute;inset:0;display:grid;place-items:center;color:#ffe5a9;font-size:18px;text-shadow:1px 1px #111}#builder-mass{position:absolute;transform:translate(-50%,-50%);color:#ffdb80;text-shadow:1px 1px #111;background:#111a;font-size:24px;pointer-events:none;z-index:6;line-height:1}#builder-stage::before,#builder-stage::after{content:'';position:absolute;pointer-events:none;z-index:4;display:none}#builder-stage[data-symmetry="x"]::before,#builder-stage[data-symmetry="both"]::before{display:block;left:50%;top:0;bottom:0;border-left:1px dashed #b7bec9}#builder-stage[data-symmetry="y"]::after,#builder-stage[data-symmetry="both"]::after{display:block;top:50%;left:0;right:0;border-top:1px dashed #b7bec9}.save-thumbnail{width:66px;height:66px;object-fit:contain;image-rendering:pixelated;background:#17191d;border:1px solid #666;flex-shrink:0}.saved-ship>span{flex:1;overflow-wrap:anywhere}.craft-batch{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:12px 0}.craft-batch input{width:56px;text-align:center;font:inherit;background:#17191c;border:1px solid #777;color:#fff;padding:8px}.craft-batch button{min-width:36px;min-height:36px;padding:8px;font-size:11px}#ship-load-total{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}@media(max-width:600px){#builder-controls{order:1;gap:4px;margin:6px 8px}#builder-controls button,#builder-controls select{font-size:8px;padding:6px}#builder-controls label{font-size:8px}.save-thumbnail{width:50px;height:50px}}
#flight-actions{position:fixed;bottom:calc(94px + env(safe-area-inset-bottom));left:12px;right:calc(126px + env(safe-area-inset-right));display:flex;gap:5px;overflow-x:auto;max-height:76px;z-index:5;scrollbar-width:none}#flight-actions button{flex:0 0 62px;padding:5px;background:#25282ee8;border:2px solid #747a82;min-height:58px;font-size:8px;display:flex;flex-direction:column;align-items:center;gap:4px}#flight-actions img{width:28px;height:28px;image-rendering:pixelated}#flight-actions[hidden]{display:none}@media(hover:hover) and (pointer:fine){#flight-actions{right:auto;max-width:55vw;bottom:94px}}@media(max-width:600px){#flight-actions{bottom:calc(82px + env(safe-area-inset-bottom));max-height:70px}}
.server-invite-entry{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:12px 0}.server-invite-entry input{width:min(200px,50vw);font:inherit;color:#eee;background:#16181c;border:2px solid #666;padding:10px;text-transform:uppercase}.invite-selected{border-color:#ddd!important}#room-password-dialog,#invite-dialog,#players-dialog{width:min(430px,calc(100vw - 24px));max-height:calc(100dvh - 30px);overflow:auto}#room-password-dialog input,#invite-dialog input,#server-password{display:block;width:100%;background:#17191e;color:#fff;border:2px solid #6c727b;font:inherit;padding:10px;margin:8px 0 14px}#players-list{list-style:none;margin:12px 0;padding:0}#players-list li{display:flex;justify-content:space-between;gap:12px;padding:12px 8px;border-bottom:1px solid #555;overflow-wrap:anywhere}#players-list li span:last-child{color:#b8bec7;font-size:10px;white-space:nowrap}#players-button{position:fixed;top:calc(226px + env(safe-area-inset-top));left:16px;font-size:10px;padding:8px 12px;z-index:5}@media(max-width:600px){#players-button{top:calc(181px + env(safe-area-inset-top));left:12px;font-size:9px;padding:7px}}
.builder-thrust-direction{position:absolute;inset:0;display:grid;place-items:center;font-size:14px;color:#ffe3a1;text-shadow:1px 1px #191919;pointer-events:none;opacity:.8}#flight-actions .quick-drone{font-size:21px}#flight-actions .quick-drone span{font-size:9px}@media(hover:none) and (pointer:coarse){#drone-toggle{display:none!important}}

.craft-selected-actions{flex-wrap:wrap}.craft-selected-actions .craft-batch{flex:1 0 100%}#players-button{min-height:36px}#server-password-clear-label[hidden]{display:none}
.mass-short{display:none}.server-details h3.locked{position:relative;padding-left:20px}.server-details h3.locked::before{content:'';position:absolute;left:0;top:4px;width:12px;height:10px;background:#d7dbe1;box-shadow:0 -5px 0 -2px #d7dbe1}.server-details h3.locked::after{content:'';position:absolute;left:5px;top:7px;width:2px;height:4px;background:#25282c}@media(max-width:600px){#builder-controls button,#builder-controls select,#builder-controls label{font-size:10px}.mass-full{display:none}.mass-short{display:inline}}

/* Building options live inside the editor, including its paint/back flow. */
#game #tool-panel:not(.paint-open){width:194px;height:auto;padding:8px;max-height:calc(100dvh - 180px);overflow:auto}
#game #editor-tools{display:flex;flex-direction:column;gap:10px}
.editor-icons{display:flex;justify-content:center;gap:4px}
#game #editor-tools .editor-icons button{width:38px;height:38px;padding:7px;flex:none}
#game #builder-controls{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0;position:static}
#game #editor-tools #builder-controls button{width:auto;height:auto;min-height:38px;padding:7px;font-size:10px}
#game #builder-controls label,#game #builder-mass-toggle{grid-column:1/-1}
#game #builder-controls label{justify-content:space-between}
#game #builder-controls select{min-width:0;width:112px;font-size:9px;padding:6px}
#game #builder-controls .mass-full{display:inline}#game #builder-controls .mass-short{display:none}

@media(pointer:coarse){
 #game #tool-panel:not(.paint-open){width:min(300px,calc(100vw - 24px));max-height:none;overflow:visible}
 #game #editor-tools{flex-direction:column;gap:8px}
 #game #editor-tools .editor-icons button{width:40px;height:40px}
 #game #builder-controls{grid-template-columns:1fr 1fr}
}

.settings-entry{display:inline-flex;align-items:center;justify-content:center;gap:10px}
.settings-icon{width:24px;height:24px;fill:currentColor;shape-rendering:crispEdges;flex:none}
#menu-settings{min-height:48px;font-size:15px;padding:10px 24px}
.builder-actions .settings-icon-button{padding:8px;min-width:40px;min-height:40px}
#settings-dialog{width:min(440px,calc(100vw - 24px));max-height:calc(100dvh - 32px);overflow-y:auto}
.settings-section{border-top:1px solid #686c73;padding:16px 0 4px}
.settings-section h3{font:inherit;font-size:13px;margin:0 0 14px}
#settings-dialog .haptic-setting{display:flex;align-items:center;justify-content:space-between;flex-direction:row-reverse;gap:16px;font-size:13px;min-height:44px;margin:0;cursor:pointer}
#settings-dialog .haptic-setting input{width:24px;height:24px;accent-color:#91979e;margin:0;flex:none}
.settings-note{font-size:11px;line-height:1.7;color:#c4c7cc;margin:8px 0 12px;overflow-wrap:anywhere}
#settings-dialog #sign-out{min-height:44px;width:100%;font-size:12px}
#settings-status:empty{display:none}
@media(max-width:360px){.builder-actions .settings-icon-button{min-width:36px;min-height:36px;padding:6px}.settings-icon-button .settings-icon{width:20px;height:20px}}

#editor-drawer{overflow:hidden;flex:none;max-width:100%}
#toggle-tools{flex:none;transition:background-color 140ms ease}
@media(pointer:fine){
 #game:has(#tool-panel.paint-open:not([hidden])){display:block}
 #game>#block-tools,#game:has(#tool-panel.paint-open:not([hidden]))>#block-tools{position:fixed;left:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:row;align-items:center;justify-content:flex-start;width:auto;max-width:none;margin:0;z-index:2}
 #game #tool-panel.paint-open{width:232px;max-height:calc(100dvh - 180px);overflow-y:auto;padding:10px}
 #game #paint-panel{display:flex;flex-direction:column}
 #game #paint-wheel{width:180px;max-width:180px;height:180px;align-self:center}
 #game:has(#tool-panel.paint-open:not([hidden]))>#launch-checklist{position:fixed;right:0;top:50%;transform:translateY(-50%);width:210px;margin:0}
 #game:has(#tool-panel.paint-open:not([hidden])) #checklist-items{display:block}
}
@media(pointer:coarse){#editor-drawer{width:min(300px,calc(100vw - 24px))}}