body{background-color:#070906;background-image:linear-gradient(180deg,#070a08a8 0,#080b08f2 48rem),url('assets/command-yard-v1.png');background-size:auto,cover;background-position:center top;background-attachment:fixed}body:after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#0008,transparent 28%,transparent 72%,#0008),repeating-linear-gradient(0deg,#ffffff025 0 1px,transparent 1px 4px);mix-blend-mode:screen;opacity:.35}header{position:relative;min-height:360px;align-items:center;text-shadow:0 4px 25px #000}header:after{content:"OPERATION STATUS  //  ACTIVE";position:absolute;right:0;bottom:2.7rem;padding:.45rem .7rem;border:1px solid #d8b56555;background:#0b0e0acc;color:#d8b565;font:700 .62rem ui-monospace,monospace;letter-spacing:.14em}.panel{position:relative;overflow:hidden;background:linear-gradient(145deg,#192018ef,#0e120ded);box-shadow:0 20px 70px #0008,inset 0 1px #ffffff0a}.panel:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,#ffffff06,transparent 28%);z-index:0}.panel>*{position:relative;z-index:1}.command-panel:after{content:"";position:absolute;width:420px;height:420px;left:50%;top:135px;transform:translateX(-50%);border:1px solid #95a66f24;border-radius:50%;background:repeating-radial-gradient(circle,#91a76c08 0 1px,transparent 1px 36px);pointer-events:none}#command{overflow:visible;background:radial-gradient(circle,#7f925b33,#192017 65%);border-color:#c6d39788;isolation:isolate}.command-vehicle{position:relative;z-index:2;width:142%;max-width:none;margin:-22% -21% -17%;filter:drop-shadow(0 22px 16px #000b) drop-shadow(0 0 14px #d7b65b22);pointer-events:none;animation:vehicle-idle 4s ease-in-out infinite}.vehicle-halo{position:absolute;inset:10%;border-radius:50%;background:conic-gradient(from 0deg,transparent,#b9cc7f44,transparent 30%);animation:radar 7s linear infinite;filter:blur(2px)}#command:hover .command-vehicle{filter:drop-shadow(0 24px 16px #000c) drop-shadow(0 0 22px #d7b65b66)}#command:active .command-vehicle{animation:vehicle-recoil .18s ease-out}.command-pop{position:fixed;z-index:50;color:#ffe7a4;font:900 1.05rem ui-monospace,monospace;text-shadow:0 2px 8px #000;pointer-events:none;animation:command-pop .85s ease-out forwards}.command-ring{position:absolute;inset:18%;border:2px solid #ffe399;border-radius:50%;pointer-events:none;animation:command-ring .55s ease-out forwards}.operations-strip{display:flex;align-items:center;gap:.55rem;margin:-1.4rem -1.4rem 1.2rem;padding:.55rem 1.1rem;border-bottom:1px solid #ffffff12;background:#090d09;color:#8fa274;font:700 .6rem ui-monospace,monospace;letter-spacing:.12em}.operations-strip span{width:7px;height:7px;border-radius:50%;background:#9bd36b;box-shadow:0 0 10px #9bd36b;animation:pulse 1.4s infinite}.operations-strip i{height:1px;flex:1;background:linear-gradient(90deg,#80945c44,transparent);animation:scan-line 2.4s infinite}.producer{position:relative;overflow:hidden;transition:transform .18s,border-color .18s,background .18s}.producer:not(:disabled):hover{transform:translateX(4px);background:#252d21}.producer.working .unit-icon{box-shadow:0 0 0 1px #d8b56544,0 0 16px #b4ca7525;animation:unit-working 2.2s ease-in-out infinite}.producer.working:after{content:"";position:absolute;left:0;bottom:0;height:2px;width:40%;background:linear-gradient(90deg,transparent,#d8b565,transparent);animation:production-scan 2.8s linear infinite}.upgrade{transition:transform .18s,box-shadow .18s}.upgrade:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 8px 22px #0005}.achievement.done i{animation:medal-glow 2.8s ease-in-out infinite}#ambient{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}.dust{position:absolute;width:3px;height:3px;border-radius:50%;background:#e1c68688;box-shadow:0 0 8px #e1c686;animation:dust-rise linear infinite}nav{background:#080b08a8;backdrop-filter:blur(12px);position:relative;z-index:20;padding-inline:1rem;width:min(1400px,100%)}@keyframes vehicle-idle{50%{transform:translateY(-5px) rotate(-.25deg)}}@keyframes vehicle-recoil{35%{transform:translateX(-9px) rotate(-1deg)}100%{transform:none}}@keyframes radar{to{transform:rotate(360deg)}}@keyframes command-pop{to{transform:translateY(-70px) scale(1.1);opacity:0}}@keyframes command-ring{to{inset:-5%;opacity:0}}@keyframes pulse{50%{opacity:.35;transform:scale(.75)}}@keyframes scan-line{50%{opacity:.25}}@keyframes unit-working{50%{filter:brightness(1.28);transform:scale(1.04)}}@keyframes production-scan{from{transform:translateX(-120%)}to{transform:translateX(360%)}}@keyframes medal-glow{50%{box-shadow:0 0 14px #d8b56588}}@keyframes dust-rise{from{transform:translate3d(0,8vh,0);opacity:0}15%{opacity:.55}to{transform:translate3d(35px,-110vh,0);opacity:0}}@media(max-width:700px){header{min-height:300px}header:after{display:none}.command-vehicle{width:125%;margin:-15% -12% -12%}body{background-size:auto,auto 700px;background-repeat:no-repeat}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}.dust{display:none}}


.attention{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.55rem;margin:1rem 0 -.4rem;color:#aeb79a;font:800 .6rem ui-monospace,monospace;letter-spacing:.1em}.attention>div{height:6px;background:#090c08;border:1px solid #ffffff12;overflow:hidden}.attention i{display:block;width:0;height:100%;background:linear-gradient(90deg,#899d5c,#f4cc65);box-shadow:0 0 12px #eac75b;transition:width .12s}.attention b{color:var(--gold);min-width:3.5rem;text-align:right}
#command-orbit{position:absolute;inset:-12%;z-index:4;pointer-events:none;animation:orbit-spin 18s linear infinite}#command-orbit i{--angle:calc(360deg/var(--n)*var(--i));position:absolute;left:50%;top:50%;color:#d8b565;font-style:normal;font-size:.65rem;text-shadow:0 0 8px #ffe28b;transform:rotate(var(--angle)) translateX(175px) rotate(calc(var(--angle)*-1));opacity:.85}
#production-yard{position:relative;height:310px;margin:0 0 1rem;overflow:hidden;border:1px solid #ffffff1c;background:#111 url('assets/production-yard-v2.png') center/cover no-repeat;box-shadow:inset 0 -55px 70px #050704cc}#production-yard:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 45%,#080b08b8),repeating-linear-gradient(90deg,transparent 0 79px,#d4b35a0a 80px)}.yard-status{position:absolute;z-index:8;left:1rem;right:1rem;bottom:.7rem;display:flex;justify-content:space-between;color:#d8b565;font:700 .62rem ui-monospace,monospace;letter-spacing:.09em}.yard-status span{color:#c5c9ba}
#yard-units{position:absolute;inset:0;z-index:4}.yard-piece{position:absolute;left:-50px;bottom:calc(43px + var(--lane)*19px);width:31px;height:18px;border-radius:4px 9px 4px 4px;background:#4f5d3f;border:1px solid #a7b47b66;box-shadow:0 5px 7px #000a;animation:yard-convoy var(--speed) linear infinite;animation-delay:var(--delay)}.yard-piece:before,.yard-piece:after{content:"";position:absolute;bottom:-4px;width:7px;height:7px;border-radius:50%;background:#090b08;border:1px solid #566047}.yard-piece:before{left:3px}.yard-piece:after{right:3px}.yard-piece b{position:absolute;inset:0;display:grid;place-items:center;color:#e2c676;font:800 .45rem ui-monospace,monospace}.yard-piece.tier-1{filter:hue-rotate(18deg);transform:scale(.85)}.yard-piece.tier-2{width:40px}.yard-piece.tier-3{width:48px;background:#303c32}.yard-piece.tier-4{filter:brightness(1.3)}.yard-piece.tier-5{box-shadow:0 0 12px #d8b56588}
#supply-drop{position:absolute;z-index:12;top:-25px;right:7%;width:110px;height:155px;padding:0;border:0;background:transparent;cursor:pointer;filter:drop-shadow(0 0 18px #e6c05e);animation:drop-float 2s ease-in-out infinite}#supply-drop[hidden]{display:none}#supply-drop img{width:100%;height:125px;object-fit:contain}#supply-drop span{display:block;margin-top:-8px;padding:.25rem;background:#14180fe8;border:1px solid var(--gold);color:#ffe29a;font:900 .55rem ui-monospace,monospace;letter-spacing:.1em}#supply-drop:hover{filter:drop-shadow(0 0 28px #ffe07a);transform:scale(1.08)}
@keyframes orbit-spin{to{transform:rotate(360deg)}}@keyframes yard-convoy{from{left:-60px}to{left:calc(100% + 60px)}}@keyframes drop-float{50%{transform:translateY(9px) rotate(2deg)}}
@media(max-width:700px){#production-yard{height:230px}#command-orbit i{transform:rotate(var(--angle)) translateX(135px) rotate(calc(var(--angle)*-1))}.yard-status{display:block}.yard-status span{display:block;margin-top:.25rem}}