@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600;700&display=swap');
:root{color-scheme:dark;font-family:'IBM Plex Mono',monospace;background:#0b0e0c;color:#d9e2c6}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 5%,#26352a 0,#101611 42%,#090c0a 100%);min-height:100vh}main{max-width:1150px;margin:auto;padding:34px 28px}header{display:flex;justify-content:space-between;align-items:end;margin-bottom:24px}.eyebrow,.label{font-size:10px;letter-spacing:.2em;color:#9cae86}h1{font-size:clamp(24px,4vw,43px);letter-spacing:.06em;margin:9px 0 0;font-weight:700}h1 em{font-style:normal;color:#c7e975}.signal{font-size:10px;color:#e18b70;letter-spacing:.12em;padding-bottom:6px}.frame{border:1px solid #54634d;background:#111a13;box-shadow:0 18px 60px #0009}.screen-head,.screen-foot{display:flex;justify-content:space-between;gap:10px;padding:11px 16px;font-size:10px;letter-spacing:.12em;color:#a7b996}.screen-head{border-bottom:1px solid #475641}.screen-foot{border-top:1px solid #475641;color:#c5dd9d}canvas{display:block;width:100%;height:auto;image-rendering:pixelated;background:#111b19}.below{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding:25px 2px;color:#b7c4a8;font-size:12px;line-height:1.6}.below p{margin:8px 0}b{color:#e0e9ce;font-weight:600}footer{border-top:1px solid #354236;padding-top:14px;color:#71816c;font-size:10px;letter-spacing:.13em;display:flex;justify-content:space-between}@media(max-width:650px){main{padding:20px 12px}.below{grid-template-columns:1fr;gap:10px}.signal{display:none}.screen-head,.screen-foot{font-size:8px;letter-spacing:0}}

.header-tools{display:flex;align-items:center;gap:18px}#sound{font:inherit;font-size:10px;letter-spacing:.1em;color:#c7e975;background:#18241b;border:1px solid #54634d;padding:9px 12px;cursor:pointer}#sound:hover,#sound:focus-visible{background:#304433;outline:1px solid #c7e975}

#diary{width:min(520px,calc(100% - 32px));padding:30px;border:1px solid #8da579;background:#17231b;color:#e1ebd2;font:inherit;box-shadow:0 20px 80px #000}#diary::backdrop{background:#030805cc}#diary h2{font-size:20px;color:#c7e975;margin:18px 0}#diary p{line-height:1.8;font-size:14px;margin:0 0 24px}#diary button{font:inherit;font-size:11px;color:#dbeac6;background:#314634;border:1px solid #8da579;padding:11px 16px;cursor:pointer}#diary button:focus-visible{outline:2px solid #e1f6ae}

.order-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.order-buttons button{font:inherit;font-size:10px;letter-spacing:.05em;color:#dbeac6;background:#24372a;border:1px solid #607653;padding:9px 12px;cursor:pointer}.order-buttons button:hover,.order-buttons button:focus-visible{background:#3c563d;outline:1px solid #c7e975}#order-status{font-size:10px;color:#a7b996}

.ticker{overflow:hidden;border:1px solid #344537;border-top:0;background:#111a13;color:#839a7c;font-size:9px;letter-spacing:.12em;white-space:nowrap;padding:7px 0}.ticker span{display:inline-block;min-width:100%;padding-left:100%;animation:transmission 32s linear infinite}.signal{animation:signal-glow 3s ease-in-out infinite}@keyframes transmission{to{transform:translateX(-100%)}}@keyframes signal-glow{0%,100%{opacity:1}50%{opacity:.62}}@media(prefers-reduced-motion:reduce){.ticker span,.signal{animation:none}.ticker span{padding-left:12px}}

#base-panel{margin:16px 0}.order-buttons button:disabled{opacity:.4;cursor:not-allowed}.order-buttons button:disabled:hover{background:#24372a;outline:none}

.economy-help{font-size:11px;line-height:1.6;color:#b7c4a8;margin:8px 0 10px}.economy-help b{color:#dbeac6}

.frame{position:relative}#start-overlay{position:absolute;inset:34px 0 35px;display:grid;place-items:center;background:#08100bb8}#start-overlay[hidden]{display:none}#begin,#start-level{width:270px;max-width:90%;border:1px solid #c7e975;background:#18291deF;color:#e4f4c2;font:700 15px inherit;letter-spacing:.12em;padding:20px 26px;cursor:pointer;box-shadow:0 8px 35px #0009}#begin small,#start-level small{display:block;margin-top:10px;color:#a6bb99;font:11px monospace;letter-spacing:.04em}#begin:hover,#begin:focus-visible,#start-level:hover,#start-level:focus-visible{outline:2px solid #e4f4c2;background:#2e492f}

.sid-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:-6px 0 16px;color:#9cae86;font-size:10px}.sid-controls input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}.sid-select,.sid-controls button{font:inherit;letter-spacing:.08em;color:#c7e975;background:#18241b;border:1px solid #54634d;padding:9px 12px;cursor:pointer}.sid-controls:has(input:focus-visible) .sid-select,.sid-select:hover,.sid-controls button:focus-visible{outline:2px solid #c7e975}.sid-controls button[hidden]{display:none}#sid-status{overflow-wrap:anywhere}

#sid-song-label[hidden]{display:none}#sid-song{font:inherit;color:#dbeac6;background:#18241b;border:1px solid #54634d;padding:7px;margin-left:5px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

#open-settings{font:inherit;font-size:10px;letter-spacing:.1em;color:#c7e975;background:#18241b;border:1px solid #54634d;padding:9px 12px;cursor:pointer}#open-settings:hover,#open-settings:focus-visible{background:#304433;outline:1px solid #c7e975}#settings-dialog{width:min(500px,calc(100% - 32px));max-height:calc(100% - 32px);overflow:auto;padding:30px;border:1px solid #8da579;background:#17231b;color:#e1ebd2;font:inherit;box-shadow:0 20px 80px #000}#settings-dialog::backdrop{background:#030805d9}.settings-heading h2{font-size:24px;color:#c7e975;margin:14px 0 8px}.settings-heading p,.volume-setting small{font-size:11px;line-height:1.6;color:#a7b996}.volume-setting{display:grid;grid-template-columns:1fr auto;gap:8px;margin:24px 0}.volume-setting label{font-size:13px;font-weight:700}.volume-setting output{color:#c7e975;font-size:13px}.volume-setting input{grid-column:1/-1;width:100%;accent-color:#c7e975;cursor:pointer}.volume-setting small{grid-column:1/-1}.settings-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:28px}.settings-actions button{font:inherit;font-size:10px;letter-spacing:.06em;color:#dbeac6;background:#314634;border:1px solid #8da579;padding:11px 14px;cursor:pointer}.settings-actions button:hover,.settings-actions button:focus-visible{outline:2px solid #e1f6ae;background:#3c563d}@media(max-width:650px){.header-tools{gap:6px}#open-settings,#sound{padding:8px;font-size:9px}#settings-dialog{padding:22px}}

.construction-panel{border-top:1px solid #354c38;margin-top:18px;padding-top:16px}.construction-panel .order-buttons button{min-width:170px}
/* Keep the playing field and its status visible on typical laptop screens. */
canvas{width:auto;max-width:100%;max-height:max(220px,calc(100vh - 230px));margin-inline:auto}

#start-level[hidden],#begin[hidden]{display:none}

/* Shared text alignment for in-game dialogs. */
#diary,#settings-dialog{text-align:left;overflow-wrap:anywhere}#diary{max-height:calc(100vh - 32px);overflow-y:auto}.volume-setting output{text-align:right}#diary button,.settings-actions button{text-align:center}

/* Compact command controls directly beneath the game field. */
.command-bar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px}
.command-bar:has(#base-panel[hidden]):has(#squad-orders[hidden]){display:none}
#base-panel:not([hidden]){display:contents}
.command-group{min-width:0;padding:10px;border:1px solid #354c38;background:#17231b}
.command-group .order-buttons{gap:5px;margin-top:6px}
.command-group .order-buttons button,.construction-panel .order-buttons button{flex:1 1 auto;min-width:0;padding:7px 9px;font-size:9px}
.construction-panel{margin:0;padding:10px;border:1px solid #354c38}
#order-status{margin:8px 0 0;line-height:1.4}
.command-help{margin-top:7px;color:#a7b996;font-size:10px}
.command-help summary{cursor:pointer;color:#a7b996}
.command-help .economy-help{margin-bottom:0}
@media(max-width:800px){.command-bar{grid-template-columns:1fr 1fr}#squad-orders{grid-column:1/-1}}
@media(max-width:500px){.command-bar{grid-template-columns:1fr}#squad-orders{grid-column:auto}}

/* Leave room for the command bar while the base is active. */
body:has(#base-panel:not([hidden])) canvas{max-height:max(180px,calc(100vh - 430px))}

#retry-base{margin:10px 0;padding:12px 16px;background:#18291d;color:#e4f4c2;border:1px solid #c7e975;cursor:pointer;font:700 12px monospace}#retry-base:hover,#retry-base:focus-visible{background:#2e492f;outline:2px solid #e4f4c2}#retry-base[hidden]{display:none}