body{margin:0;padding:0;height:100vh;overflow:hidden;background:#000;font-family:Roboto,Arial,sans-serif;font-size:11pt}canvas{display:block;width:100%;height:100%}#instructions{color:#fff;text-align:center}#controls{color:#fff;padding:10px}#controls label{display:block;margin:5px 0}#extractor-menu{position:absolute;background:#333;color:#fff;border:1px solid #fff;padding:10px;display:none;z-index:10}.ui-widget{position:absolute;background:#0000007f;border:1px solid rgb(163 0 0 / 46%);border-radius:0;padding:8px;color:#fff}.ui-widget h3{margin:0 0 10px;font-size:16px;text-transform:uppercase}.ui-resource{display:grid;grid-template-columns:20px 48px 48px 48px;align-items:center;margin-bottom:2px}.ui-resource span:nth-child(1){font-size:16px}.ui-resource span:nth-child(2),span:nth-child(3){font-size:12px}.ui-resource span.number{text-align:right}.ui-resource .delta{font-size:12px}.ui-resource .delta.positive{color:#0f0}.ui-resource .delta.negative{color:red}.ui-toggle{cursor:pointer}.widget-button{position:relative;display:flex;align-items:center;justify-content:center;gap:0;margin:0;border:1px solid rgba(255,255,255,.5);background:#0000007f;width:48px;height:48px;cursor:pointer;overflow:hidden}.health-bar{position:absolute;top:0;left:0;height:4px;width:0%}.widget-button img{max-width:100%;max-height:100%;width:auto!important;height:auto!important}.widget-button:hover{background:#fff3}.widget-button.active{background:#ffffff4d}.widget-button.disabled{opacity:.5;cursor:not-allowed}.unit-number{position:absolute;bottom:0;right:0;font-size:10px;color:#fff;padding:1px 3px}.ui-build-btn .build-specs{text-align:right}.ui-unit-button{cursor:pointer}.warning{animation:pulse 1s infinite}@keyframes pulse{0%{box-shadow:0 0 #ff000080}50%{box-shadow:0 0 10px red}to{box-shadow:0 0 #ff000080}}.pulsing{animation:healthPulse 2s infinite}@keyframes healthPulse{0%{opacity:0}50%{opacity:1}to{opacity:0}}.rate-arrow{font-size:14px;margin-left:5px}.rate-arrow.up{color:#0f0;content:"↑"}.rate-arrow.down{color:red;content:"↓"}.concentric-container{position:relative;background:none;border:none;padding:0}.ui-site{display:flex;justify-content:space-between;align-items:center;margin:5px 0;background:#ffffff1a;padding:5px;border-radius:5px}.ui-site span{flex:1}.ui-site button{margin-left:10px;padding:5px 10px;background:#fff3;border:1px solid #fff;color:#fff;cursor:pointer}.ui-active-site{display:flex;align-items:center;background:#00000080;padding:5px;margin:5px 0;border-radius:5px;font-size:14px;gap:0}.ui-active-site button{margin-left:auto;padding:2px 5px;font-size:12px;background:#fff3;border:1px solid #fff;color:#fff;cursor:pointer}.ui-restart-button{display:inline-block;padding:5px 10px 5px 0;background:none;border:none;color:#fff;cursor:pointer;font-size:12px;text-align:center;transition:background .3s,border-color .3s}.ui-restart-button:hover{background:#fff3}.ui-restart-button.confirm{background:#ff00004d;border-color:red}.ui-restart-button.confirm:hover{background:#f006}#life{position:absolute;bottom:10px;left:10px}#tech{position:absolute;bottom:10px;right:10px}#status{top:10px;right:10px}#res{top:10px;left:10px}#widget-bar{position:absolute;bottom:10px;left:50%;transform:translate(-50%);display:flex;align-items:flex-end;justify-content:center}.unit-widget{display:flex;flex-direction:row;background:none;border:none;padding:0}.unit-widget .ui-unit-button{display:flex;align-items:center;justify-content:center;width:48px;height:48px;font-size:20px;margin:0;padding:0;border:1px solid rgba(255,255,255,.5);background-size:cover}.construction-widget{display:flex;flex-direction:row;background:none;border:none;padding:0}.construction-tab{background:#323232cc;color:#fff;font-size:11pt;padding:2px 12px;display:inline-block}.construction-content{display:flex;flex-wrap:wrap;gap:4px;max-width:256px;background:#323232cc;padding:8px}.active-constructions-widget{position:absolute;left:10px;bottom:160px;background:none;border:none;padding:0}#game-over{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#0009;padding:20px;border-radius:10px;display:none;text-align:center;color:#fff}#game-over.visible{display:flex;align-items:center}#game-over.win-mode{flex-direction:column;align-items:center}#game-over:not(.win-mode){flex-direction:column}#game-over-message{font-size:18px;line-height:1.5;color:#fff}#game-over.win-mode #game-over-message{color:#0f0;text-shadow:0 0 13px #00ff00}.ui-gameover-button{display:inline-block;margin-top:10px;padding:10px 20px;background:#fff;color:#000;border:none;border-radius:5px;cursor:pointer}.continue-button{margin-right:10px}.hidden{display:none}#extractor-menu button{display:block;margin:5px 0}#extractor-menu.visible{display:block}#health-warning-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#ff00004d;opacity:0;pointer-events:none;transition:opacity .5s}#infra-flyout{position:absolute;top:10px;left:200px;display:none}#infra-flyout.visible{display:block}#sustain-progress{position:absolute;bottom:120px;left:50%;transform:translate(-50%);width:200px;background:none;border:none;padding:0}.progress-label{text-align:center;color:#fff;font-size:14px;margin-bottom:5px}.progress-bar{background:#333;height:10px;border-radius:5px;overflow:hidden}.progress-fill{background:#0f0;height:100%;width:0%;transition:width .5s ease}#infra-flyout .ui-resource-delta,#infra-flyout .ui-extra-info{font-size:12px;margin-top:4px;margin-bottom:4px}.contrib-line{display:flex;justify-content:space-between;font-size:12px;margin:2px 0;gap:8px}.contrib-name{cursor:pointer}.contrib-name:hover{text-decoration:underline}.contrib-value{text-align:right}.prod-value{color:#228b22;font-weight:700}.cons-value{color:#b22222;font-weight:700}.prod-total{color:#228b22;font-weight:700}.cons-total{color:#b22222;font-weight:700}.widget-container{position:relative}.widget-tab{background:#323232cc;color:#fff;font-size:11pt;padding:2px 12px;display:inline-block}.widget-content{display:flex;flex-wrap:wrap;gap:4px;max-width:256px;background:#323232cc;padding:8px}.unit-widget{position:relative}.unit-tab{background:#323232cc;color:#fff;font-size:11pt;padding:2px 12px;display:inline-block}.unit-content{display:flex;flex-wrap:wrap;gap:4px;max-width:256px;background:#323232cc;padding:8px}.ui-modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000000b3}.modal-content{background-color:#222;color:#fff;margin:5% auto;padding:20px;border:1px solid #888;width:80%;max-width:800px;border-radius:10px;font-size:.8rem;line-height:1.5}.close-button{color:#aaa;float:right;font-size:28px;font-weight:700;cursor:pointer;margin:0 0 0 1rem}.close-button:hover,.close-button:focus{color:#fff;text-decoration:none;cursor:pointer}.ui-help-button{display:inline-block;margin-left:5px;padding:.3rem .4rem;background:#1e90ff;border-radius:50%;border:none;color:#fff;box-shadow:0 0 18px;cursor:pointer;font-size:12px;text-align:center;transition:background .3s}.ui-help-button:hover{background:#fff3}.modal-header{display:flex;align-items:baseline}.modal-header .spacer{flex:1}.modal-header .titles{display:flex;align-items:baseline}.modal-header .titles h1{margin:0 10px 0 0}.modal-header .titles h2{margin:0}.modal-header .creator{flex:1;text-align:right}.modal-header .creator a{color:#fff}@media (max-width: 600px){#widget-bar{position:fixed;bottom:0;left:0;width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;display:flex;flex-direction:row;transform:none;justify-content:flex-start;align-items:flex-end}#widget-bar::-webkit-scrollbar{display:none}.widget-container{display:flex;flex-direction:row;background:none;border:none;padding:0}.widget-tab{display:none}.widget-content{display:flex;flex-wrap:nowrap;max-width:none;background:none;padding:0;gap:4px}#life{width:100%;top:56px;bottom:unset;left:unset;display:flex;flex-direction:column;padding:4px;box-sizing:border-box;background:#000c}.life-bar{display:flex;align-items:center;margin:0}.life-label{min-width:65px;font-size:12px;color:#fff}.bar-container{flex:1;background:#333;height:10px;border-radius:5px;overflow:hidden;position:relative}.bar-fill{height:100%}.bar-value{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:10px;color:#fff;text-shadow:1px 1px 2px #000}#res{top:28px;left:0;width:100%;padding:0;border:none}#res h3{display:none}#res-inner{display:flex;width:95%;margin:5px auto 0;justify-content:space-between}.ui-resource{display:flex;align-items:flex-end}.ui-resource span:nth-child(2){display:none}.ui-resource .delta{font-size:9px;padding:0 0 1em .3em;color:#aaa}#status{top:0;right:0;left:0;padding:2px 4px;font-size:.8rem;display:flex;justify-content:space-between;align-items:center;border:none;border-bottom:1px solid rgb(163 0 0 / 46%)}.ui-restart-button,.ui-help-button{font-size:1.1em;margin-top:0;padding:5px}#infra-flyout{top:62px;left:0}.ui-help-button{width:1.5em;height:1.5em;line-height:1.5em;padding:0;text-align:center;border-radius:50%}.modal-header{flex-direction:column;align-items:center}.modal-header .spacer{display:none}.modal-header .titles{flex-direction:column;align-items:center}.modal-header .titles h1,.modal-header .titles h2{margin:0}.modal-header .creator{text-align:center;margin-top:5px;flex:none}}.ui-resource:hover{background:#ffffff1a;cursor:pointer}