@font-face{font-family:pixel;src:url(font.woff2)}*{box-sizing:border-box}body{margin:0;background:#020406;color:#b4cfe5;font-family:pixel,monospace;min-height:100dvh;display:grid;place-items:center}#game{width:min(100vw,960px,calc((100dvh - 26px)*1.4545));aspect-ratio:960/660;background:#02060b;box-shadow:0 0 70px #000}#field{position:relative;height:72.73%}#world{display:block;width:100%;height:100%;image-rendering:pixelated;cursor:crosshair}.topline{position:absolute;top:7px;left:14px;right:14px;display:flex;align-items:center;gap:20px;font-size:12px;text-shadow:2px 2px #000}.topline b{font-weight:normal;color:#d0d0ba}.topline b span{color:#56b9e5}.preview-label{font-size:10px;color:#c6bc82}.resources{margin-left:auto;display:flex;align-items:center;gap:10px;color:#66ba91}.crystal{width:14px;height:17px;background:linear-gradient(120deg,#8ad2ef,#2586be 50%,#155472);clip-path:polygon(35% 0,80% 15%,100% 70%,55% 100%,0 75%,10% 20%)}.gas{width:14px;height:14px;background:#44a866;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}#hint{position:absolute;bottom:12px;left:20px;font-size:10px;color:#b7bcbb;text-shadow:1px 1px #000;background:#0008;padding:4px 7px}footer{height:27.27%;position:relative;display:grid;grid-template-columns:20% 44% 13% 23%;padding:15px 11px 8px;background:radial-gradient(ellipse at 50% 5%,#277196 0,transparent 55%),repeating-linear-gradient(90deg,#08213a 0 4px,#174465 4px 6px,#091e35 6px 28px);border-top:10px ridge #b3a157;box-shadow:inset 0 3px #16170a,inset 0 12px 9px #090c09}.crest{position:absolute;top:-25px;left:36%;width:28%;height:25px;background:linear-gradient(170deg,#e6d578 5%,#a59039 35%,#f0dd82 47%,#645525 60%,#bcaa55 90%);clip-path:polygon(0 32%,18% 20%,30% 50%,44% 0,56% 0,70% 50%,82% 20%,100% 32%,94% 90%,62% 80%,50% 100%,38% 80%,6% 90%)}.map-frame{position:relative;border:4px ridge #a78e44;border-radius:11px 5px 3px 3px;background:#05080b;box-shadow:0 0 0 2px #062949;margin-top:-34px;padding:22px 5px 5px}.map-tools{position:absolute;top:2px;left:5px;right:5px;color:#c7b34d;background:#073654;border:1px solid #487888;font-size:10px;height:16px;text-align:center}#minimap{display:block;width:100%;height:100%;image-rendering:pixelated;cursor:pointer;border:1px solid #31455a}.stats{background:linear-gradient(90deg,#081329,#010608 12% 88%,#0a2035);border:3px ridge #2c6187;border-radius:10px 10px 1px 1px;padding:5px 12px;margin:0 8px;position:relative;box-shadow:0 0 0 2px #071322,inset 0 0 0 2px #0a2946}.stats:before,.stats:after{content:'';position:absolute;top:15px;bottom:15px;width:6px;border:1px solid #477298;border-radius:5px}.stats:before{left:2px}.stats:after{right:2px}h1{font-size:12px;text-align:center;color:#cad0d3;margin:3px 0 6px;font-weight:normal}.unit-info{display:flex;gap:12px;align-items:center;justify-content:center}#wireframe{width:80px;height:72px;image-rendering:pixelated}.unit-info p{font-size:10px;line-height:1.5;color:#6fa9ca;margin:0}.unit-info small{font-size:9px;color:#707b80}#selection{height:27px;display:flex;gap:5px;padding:4px 0}#selection i{width:23px;height:20px;border:2px ridge #2c7197;background:#041220}.readout{position:absolute;bottom:4px;left:15px;right:15px;height:3px;background:repeating-linear-gradient(90deg,#123450 0 20px,#010608 20px 24px)}.portrait-frame{padding:4px 5px;background:linear-gradient(90deg,#041221,#165375 50%,#06182b);border:3px ridge #295c79}.portrait-frame>span{display:block;text-align:center;font-size:8px;color:#b8b583;height:12px}#portrait{display:block;width:100%;height:calc(100% - 34px);image-rendering:pixelated;border:3px ridge #405768;background:#000}.portrait-frame button{height:18px;display:block;width:100%;font-size:9px;margin-top:2px}.commands{padding:1px 7px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:3px;background:linear-gradient(90deg,#123a5b,#03080d)}button{font-family:pixel;color:#d6ca62;background:radial-gradient(ellipse at top,#193e59,#050a12);border:3px ridge #32678a;cursor:pointer;position:relative;padding:0;box-shadow:inset 0 0 0 1px #03060a}button:hover,button[aria-pressed=true]{border-color:#6d94a4;background:radial-gradient(ellipse at top,#305664,#080d15)}button:active{border-style:inset}button>span{font-family:Arial,sans-serif;font-size:25px;line-height:1;color:#e8d860;text-shadow:1px 1px #616128;display:block}button small{position:absolute;right:2px;bottom:0;color:#a3b6b5;font-size:7px}.caption{height:24px;display:flex;justify-content:space-between;font-size:9px;padding:6px 5px;color:#777f84}.caption span{color:#677575}@media(max-width:650px){.topline{font-size:8px;gap:9px;top:4px;left:7px;right:7px}.preview-label{font-size:7px}.resources{gap:4px}.crystal,.gas{width:8px;height:10px}footer{padding:7px 4px 4px;border-top-width:5px}.crest{height:13px;top:-13px}.map-frame{margin-top:-16px;padding:12px 2px 2px;border-width:2px}.map-tools{height:9px;font-size:6px;top:0;left:2px;right:2px}.stats{padding:2px 4px;margin:0 3px;border-width:2px}.stats:before,.stats:after{display:none}h1{font-size:8px;margin:0 0 3px}.unit-info{gap:3px}#wireframe{width:40px;height:38px}.unit-info p,.unit-info small{font-size:6px}#selection{height:15px;padding:2px 0}#selection i{width:13px;height:12px}.portrait-frame{padding:2px;border-width:1px}.portrait-frame>span{font-size:5px;height:8px}#portrait{height:calc(100% - 22px);border-width:1px}.portrait-frame button{font-size:6px;height:12px}.commands{padding:0 2px;gap:1px}button{border-width:2px}button>span{font-size:14px}button small{font-size:5px}#hint{font-size:6px;left:8px;bottom:6px}.caption{font-size:7px}}