:root{--bg: #0b0d0a;--panel: rgba(14, 17, 12, .82);--line: rgba(196, 210, 170, .18);--line2: rgba(196, 210, 170, .45);--text: #d9dccf;--dim: #8b9182;--green: #6fd34a;--amber: #e0b43a;--side: #3c7fd9;--side2: #ffd500;--cond: "DIN Condensed", "DIN Alternate", Bahnschrift, "Roboto Condensed", "Arial Narrow", sans-serif;--mono: ui-monospace, Menlo, Consolas, monospace}body[data-side=rus]{--side: #c4302b;--side2: #9aa0a6}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);overflow:hidden;font-family:var(--cond)}button{font:inherit;color:inherit}#app{position:fixed;inset:0}.splash{position:absolute;inset:0;background:#000;display:grid;place-items:center;cursor:pointer}.logo{text-align:center;animation:logo 3.6s ease-in-out forwards}.logo img{display:block;margin:0 auto 18px;width:110px;height:auto;filter:drop-shadow(0 0 24px rgba(111,211,74,.25))}.logo .wm{font-size:clamp(30px,5vw,58px);letter-spacing:.14em;color:var(--green);line-height:1;text-shadow:0 0 18px rgba(111,211,74,.35)}@keyframes logo{0%{opacity:0;transform:scale(.97)}22%{opacity:1;transform:none}78%{opacity:1}to{opacity:0}}.backdrop{position:absolute;inset:0;overflow:hidden;background:#000}.bd{position:absolute;inset:-4%;background-size:cover;background-position:center;opacity:0;filter:brightness(.42) saturate(.55) contrast(1.05);animation:bd 36s linear infinite}@keyframes bd{0%{opacity:0;transform:scale(1.02)}6%{opacity:1}33%{opacity:1}40%{opacity:0;transform:scale(1.09)}to{opacity:0}}.scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.18) 0 1px,transparent 1px 3px),radial-gradient(ellipse 85% 75% at 40% 50%,transparent 40%,rgba(0,0,0,.65))}.btn{position:relative;display:block;background:#0a0c09b3;border:1px solid var(--line);padding:12px 20px 9px;font-size:24px;letter-spacing:.12em;text-align:left;cursor:pointer;transition:background .12s,border-color .12s,color .12s}.btn:before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:3px;background:var(--line2);transition:background .12s}.menu .btn:focus:not(:disabled),.btn:not(.menu .btn):hover:not(:disabled),.btn:focus-visible:not(:disabled){background:#6fd34a1a;border-color:var(--green);color:#fff;outline:none}.menu .btn:focus:not(:disabled):before,.btn:not(.menu .btn):hover:not(:disabled):before,.btn:focus-visible:not(:disabled):before{background:var(--green)}.btn:disabled{color:#5c6157;cursor:default}.btn .tag{float:right;margin-top:4px;font:11px var(--mono);letter-spacing:.08em;color:var(--amber);border:1px solid rgba(224,180,58,.45);padding:3px 6px 2px}.btn.small{display:inline-block;font-size:15px;padding:6px 12px 4px}.btn.wide{width:100%}.mainmenu{position:absolute;left:7vw;top:50%;transform:translateY(-50%);width:min(420px,86vw)}.title{margin:0 0 5vh;font-weight:700;font-size:clamp(40px,min(8vw,12vh),104px);line-height:.86;letter-spacing:.01em;color:#fff;text-shadow:0 3px 0 #000,0 0 40px rgba(0,0,0,.7)}.menu{display:grid;gap:8px}.foot{position:absolute;left:7vw;right:4vw;bottom:3vh;display:flex;justify-content:space-between;font:11px var(--mono);letter-spacing:.14em;color:var(--dim)}.bar{position:absolute;left:0;right:0;top:0;height:64px;display:flex;align-items:center;gap:22px;padding:0 4vw;background:linear-gradient(to bottom,#000000bf,#00000059);border-bottom:1px solid var(--line);z-index:2}.bar h2{margin:6px 0 0;font-weight:400;font-size:28px;letter-spacing:.16em}.back{background:none;border:1px solid var(--line);padding:8px 14px 5px;letter-spacing:.12em;font-size:17px;cursor:pointer}.back:hover,.back:focus-visible{border-color:var(--green);color:#fff;outline:none}.wait{position:absolute;inset:64px 0 0;display:grid;place-items:center;font:13px var(--mono);letter-spacing:.2em;color:var(--dim)}.panel{position:relative;background:var(--panel);border:1px solid var(--line);padding:16px 18px;backdrop-filter:blur(3px)}.panel h3{margin:0 0 12px;font:12px var(--mono);letter-spacing:.24em;color:var(--green)}.panel h3:before{content:"▮ "}.narrow{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:min(560px,92vw)}.row{display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);font-size:19px;letter-spacing:.04em}.row span{flex:1}.row b{font-family:var(--mono);font-weight:400;font-size:14px;color:#fff}.dim{color:var(--dim);font:13px/1.5 var(--mono)}.about{text-align:center}.about p{font:15px/1.55 var(--mono)}.skirmish{position:absolute;inset:88px 4vw 4vh;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:20px}.maps{overflow:auto}.maplist{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}.mapcard{position:relative;text-align:left;padding:0;background:#0a0c09;border:1px solid var(--line);cursor:pointer}.mapcard .thumb{display:block;aspect-ratio:16 / 10;background:#1a1e16 center / cover;filter:saturate(.7) brightness(.85)}.mapcard .mname{display:block;padding:10px 12px 2px;font-size:21px;letter-spacing:.1em}.mapcard .mmeta{display:block;padding:0 12px 10px;font:11px var(--mono);color:var(--dim);letter-spacing:.12em;min-height:1em}.mapcard:hover,.mapcard:focus-visible{border-color:var(--line2);outline:none}.mapcard.on{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}.mapcard.on .thumb{filter:none}.mapcard.on:after{content:"SELECTED";position:absolute;right:8px;top:8px;font:10px var(--mono);letter-spacing:.16em;background:var(--green);color:#000;padding:3px 6px 2px}.setup{display:flex;flex-direction:column}.setup h3+*{margin-bottom:18px}.sides{display:grid;grid-template-columns:1fr 1fr;gap:10px}.side{position:relative;padding:16px 12px 12px;text-align:left;background:#0a0c09;border:1px solid var(--line);cursor:pointer;overflow:hidden}.side .flag{display:block;height:34px;margin-bottom:12px;opacity:.55;transition:opacity .15s}.side-ukr .flag{background:linear-gradient(#0057b7 0 50%,#ffd500 50%)}.side-rus .flag{background:linear-gradient(#fff 0 33.3%,#0039a6 33.3% 66.6%,#d52b1e 66.6%)}.side .sname{display:block;font-size:24px;letter-spacing:.1em}.side .native{display:block;font:12px var(--mono);color:var(--dim);margin-top:2px}.side:hover .flag,.side.on .flag{opacity:1}.side-ukr.on{border-color:#ffd500;box-shadow:inset 0 0 0 1px #ffd500,inset 0 -40px 60px -30px #0057b78c}.side-rus.on{border-color:#d52b1e;box-shadow:inset 0 0 0 1px #d52b1e,inset 0 -40px 60px -30px #d52b1e73}.side.on:after{content:"▲";position:absolute;right:10px;top:8px;font-size:11px;color:var(--side2)}.spacer{flex:1;min-height:10px}.dl{margin-bottom:10px}.dlbar{height:3px;background:#ffffff1a}.dlbar i{display:block;height:100%;width:0;background:var(--green);transition:width .3s}.dlrow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;min-height:28px}.dlrow .getmap{border-color:var(--green);color:var(--green)}.dltext{font:11px var(--mono);letter-spacing:.1em;color:var(--dim)}.deploy{text-align:center;font-size:32px;letter-spacing:.3em;padding:16px 0 12px;background:var(--side);border-color:var(--side);color:#fff}.deploy:before{background:var(--side2);width:5px}.deploy:hover:not(:disabled),.deploy:focus-visible:not(:disabled){background:var(--side);filter:brightness(1.15);border-color:var(--side2)}.deploy:hover:before,.deploy:focus-visible:before{background:var(--side2)!important}body[data-side=rus] .deploy{color:#fff}.bg-grid{position:absolute;inset:88px 4vw 64px;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;align-content:start;overflow:auto}.ucard{position:relative;padding:9px 50px 8px 10px;border:1px solid var(--line);border-left:3px solid var(--side);background:#00000059;margin-bottom:8px}.uname{font-size:19px;letter-spacing:.05em}.umeta{font:11px var(--mono);color:var(--dim);margin-top:2px;text-transform:uppercase}.uprice{position:absolute;right:10px;top:50%;transform:translateY(-50%);font:15px var(--mono);color:var(--amber)}.note{position:absolute;left:4vw;bottom:3vh;font:12px var(--mono);color:var(--dim);letter-spacing:.06em}.loadframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}@media (max-height: 640px){.btn{font-size:19px;padding:9px 16px 6px}.menu{gap:6px}}@media (max-width: 760px){.skirmish{grid-template-columns:1fr;overflow:auto;inset:80px 16px 16px}.mainmenu{left:16px}.foot{left:16px;right:16px}.bar{padding:0 16px}.bar h2{font-size:20px}.bg-grid{inset:80px 16px 60px}}*{scrollbar-width:none}*::-webkit-scrollbar{display:none;width:0;height:0}
