:root { --ink:#101522; --paper:#f5f0e4; --orange:#f2592e; --acid:#d6ff37; --line:rgba(245,240,228,.22); --muted:#c4c2b9; --deployment-duration:1.08s; }
* { box-sizing:border-box; } html { min-height:100%; } body { min-height:100%; margin:0; color:var(--paper); font-family:Arial,Helvetica,sans-serif; background:#0c101b url('assets/main-menu-battlefield.png') center/cover fixed; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; background:linear-gradient(rgba(10,15,26,.89),rgba(10,15,26,.95)),repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.018) 3px 4px); }
.shell { width:min(900px,calc(100% - 40px)); margin:auto; }.construction { position:relative; min-height:calc(100vh - 42px); padding:24px 0 58px; }.topbar { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:34px; font-size:10px; font-weight:bold; letter-spacing:.13em; }.topbar-link { color:var(--paper); text-decoration:none; }.topbar-link:focus-visible,.play-button:focus-visible,.presence-retry:focus-visible { outline:3px solid var(--acid); outline-offset:5px; }.presence { display:flex; align-items:center; min-height:34px; padding:0 9px; gap:9px; border:2px solid var(--acid); background:rgba(9,15,22,.86); color:var(--acid); box-shadow:4px 4px 0 rgba(0,0,0,.45); font-size:9px; letter-spacing:.1em; white-space:nowrap; }.presence[hidden] { display:none; }.presence i { width:7px; height:7px; flex:0 0 auto; background:var(--acid); box-shadow:0 0 10px var(--acid); }.presence[aria-busy="true"] i { opacity:.5; }.presence strong { color:var(--paper); font-size:9px; }.presence strong span { color:var(--acid); }.presence-retry { min-height:28px; border:0; padding:0 6px; background:var(--acid); color:var(--ink); font:inherit; font-weight:900; letter-spacing:inherit; cursor:pointer; }
.bunker { position:relative; z-index:1; margin-top:22px; padding:clamp(42px,7vw,76px) clamp(20px,6vw,72px) 42px; text-align:center; border:1px solid var(--line); background:rgba(16,21,34,.79); box-shadow:14px 14px 0 rgba(0,0,0,.23); overflow:hidden; }.bunker::before { content:""; position:absolute; inset:10px; pointer-events:none; border:1px solid rgba(245,240,228,.07); }.site-logo { position:relative; width:min(400px,86%); max-height:125px; object-fit:contain; margin:0 auto 17px; display:block; }.kicker { position:relative; margin:0 0 15px; color:var(--acid); font-size:10px; font-weight:bold; letter-spacing:.18em; }.bunker h1 { position:relative; margin:0; font-size:clamp(42px,7vw,77px); line-height:.86; letter-spacing:-.075em; font-weight:900; }.bunker h1 em { color:var(--orange); font-style:normal; }.intro { position:relative; max-width:550px; margin:25px auto 31px; color:#dedbd2; font-size:16px; line-height:1.55; }
.battle-art { position:relative; width:min(650px,100%); margin:0 auto; border:1px solid rgba(245,240,228,.58); background:#a4432f; box-shadow:9px 9px 0 var(--orange); }.battlefield-video { display:block; width:100%; aspect-ratio:2.05; object-fit:cover; background:#111; }.art-stamp { position:absolute; top:10px; left:10px; padding:7px 9px; background:rgba(16,21,34,.88); color:var(--paper); font-size:8px; line-height:1.45; letter-spacing:.14em; text-align:left; }.art-stamp b { color:var(--acid); }.tank { position:absolute; width:70px; image-rendering:pixelated; filter:drop-shadow(5px 7px 0 rgba(0,0,0,.36)); }.tank-player { left:-29px; bottom:-31px; transform:rotate(-12deg); }.tank-enemy { right:-25px; top:-25px; transform:rotate(164deg); }.still-playing { position:relative; margin:38px 0 15px; color:var(--muted); font-size:11px; font-weight:bold; letter-spacing:.11em; }.still-playing strong { color:var(--paper); }.play-button { position:relative; display:inline-flex; align-items:center; gap:27px; min-height:52px; padding:0 21px; color:var(--ink); background:var(--acid); font-size:12px; font-weight:900; letter-spacing:.08em; text-decoration:none; transition:transform 150ms ease-out,background-color 150ms ease-out; }.play-button span { font-size:21px; }.play-button:hover { transform:translateY(-2px); background:#e2ff69; }
.battle-art { position:relative; width:min(650px,100%); margin:0 auto; border:1px solid rgba(245,240,228,.58); background:#a4432f; box-shadow:9px 9px 0 var(--orange); }.battlefield-video { display:block; width:100%; aspect-ratio:2.05; object-fit:cover; background:#111; }.art-stamp { position:absolute; top:10px; left:10px; padding:7px 9px; background:rgba(16,21,34,.88); color:var(--paper); font-size:8px; line-height:1.45; letter-spacing:.14em; text-align:left; }.art-stamp b { color:var(--acid); }.still-playing { position:relative; margin:38px 0 15px; color:var(--muted); font-size:11px; font-weight:bold; letter-spacing:.11em; }.still-playing strong { color:var(--paper); }.play-button { position:relative; display:inline-flex; align-items:center; gap:27px; min-height:52px; padding:0 21px; color:var(--ink); background:var(--acid); font-size:12px; font-weight:900; letter-spacing:.08em; text-decoration:none; transition:transform 150ms ease-out,background-color 150ms ease-out; }.play-button span { font-size:21px; }.play-button:hover { transform:translateY(-2px); background:#e2ff69; }.follow-us { position:relative; display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:10px 16px; margin-top:24px; }.follow-us>span { width:100%; color:var(--muted); font-size:9px; font-weight:bold; letter-spacing:.14em; }.follow-us a { display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:0 11px; border:1px solid var(--line); color:var(--paper); text-decoration:none; font-size:10px; letter-spacing:.07em; transition:color 150ms ease-out, border-color 150ms ease-out, transform 150ms ease-out; }.follow-us a:hover { color:var(--acid); border-color:var(--acid); transform:translateY(-1px); }.follow-us a:focus-visible { outline:3px solid var(--acid); outline-offset:3px; }
.technology { position:relative; margin-top:39px; padding-top:21px; border-top:1px solid var(--line); }.technology-line { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:8px; min-height:22px; }.technology span,.technology small { color:var(--muted); font-size:9px; font-weight:bold; letter-spacing:.11em; white-space:nowrap; }.technology i { color:var(--acid); font-style:normal; }.technology img { display:block; max-width:105px; max-height:18px; width:auto; object-fit:contain; } footer { position:relative; z-index:1; height:42px; display:grid; place-items:center; color:#a5a49e; background:#090d16; font-size:9px; font-weight:bold; letter-spacing:.14em; text-align:center; }
.reticle { position:absolute; width:56px; height:56px; border:1px solid rgba(214,255,55,.3); border-radius:50%; }.reticle::before,.reticle::after { content:""; position:absolute; background:rgba(214,255,55,.45); }.reticle::before { height:70px; width:1px; left:27px; top:-8px; }.reticle::after { width:70px; height:1px; top:27px; left:-8px; }.reticle-left { left:-29px; top:35%; }.reticle-right { right:-29px; bottom:25%; }
.deployment-overlay { position:fixed; z-index:60; inset:0; visibility:hidden; pointer-events:none; overflow:hidden; }.deployment-overlay.is-active { visibility:visible; animation:var(--deployment-duration) steps(5,end) both deployment-fade; }.deployment-door { z-index:1; width:52%; position:absolute; top:0; bottom:0; background:repeating-linear-gradient(90deg,#0a0c10 0 58px,#15171b 58px 62px,#08090d 62px 120px); border-color:#423a33; will-change:transform; }.deployment-door::before { content:""; position:absolute; inset:74px 28px 42px; border:3px solid #302a25; background:linear-gradient(transparent 49.5%,#3c332c 49.5% 50.5%,transparent 50.5%),repeating-linear-gradient(0deg,transparent 0 92px,rgba(214,255,55,.12) 92px 95px); }.deployment-door i { position:absolute; top:0; bottom:0; width:8px; background:repeating-linear-gradient(0deg,var(--acid) 0 18px,#26300b 18px 36px); }.deployment-door-left { left:-52%; border-right:5px solid #4a4038; }.deployment-door-left i { right:12px; }.deployment-door-right { right:-52%; border-left:5px solid #4a4038; }.deployment-door-right i { left:12px; }.deployment-overlay.is-active .deployment-door-left { animation:var(--deployment-duration) steps(7,end) both deployment-door-left; }.deployment-overlay.is-active .deployment-door-right { animation:var(--deployment-duration) steps(7,end) both deployment-door-right; }.deployment-readout { z-index:2; width:min(86vw,720px); position:absolute; top:50%; left:50%; display:flex; flex-direction:column; align-items:center; padding:34px; color:var(--paper); text-align:center; background:#050609; border:4px solid #54463a; opacity:0; transform:translate(-50%,-50%); box-shadow:14px 14px #000,inset 0 0 0 5px #15110e; }.deployment-overlay.is-active .deployment-readout { animation:var(--deployment-duration) steps(6,end) both deployment-readout-flash; }.deployment-readout small { color:var(--acid); font-size:10px; font-weight:700; letter-spacing:3px; }.deployment-readout b { margin-top:17px; font-size:clamp(23px,4vw,45px); line-height:1.05; letter-spacing:-.04em; text-shadow:6px 6px #182006; }.deployment-readout strong { margin-top:17px; color:var(--orange); font-size:clamp(31px,5vw,61px); line-height:1; }.deployment-readout>i { width:min(100%,470px); height:17px; margin:27px 0 16px; padding:3px; background:#12100e; border:2px solid #3e352e; }.deployment-readout>i em { display:block; height:100%; background:repeating-linear-gradient(135deg,var(--acid) 0 9px,#8ca51e 9px 18px); }.deployment-overlay.is-active .deployment-readout>i em { animation:.7s steps(8,end) both deployment-progress; }.deployment-readout span { color:#8d8175; font-size:10px; font-weight:700; letter-spacing:2px; }
@keyframes deployment-fade { 0%,100% { background:transparent; } 20%,80% { background:rgba(2,3,5,.78); } }
@keyframes deployment-door-left { 0%,100% { transform:translateX(0); } 30%,72% { transform:translateX(100%); } }
@keyframes deployment-door-right { 0%,100% { transform:translateX(0); } 30%,72% { transform:translateX(-100%); } }
@keyframes deployment-readout-flash { 0%,18%,90%,100% { opacity:0; } 30%,78% { opacity:1; } }
@keyframes deployment-progress { from { width:0; } to { width:100%; } }
@media (max-width:640px) { body { background-attachment:scroll; }.shell { width:min(100% - 28px,900px); }.construction { padding-top:14px; }.topbar { align-items:flex-start; flex-direction:column; font-size:8px; }.presence { width:100%; justify-content:center; gap:7px; font-size:7px; }.presence strong { font-size:7px; }.bunker { margin-top:14px; padding:38px 18px 31px; }.intro { font-size:14px; }.battle-art { box-shadow:5px 6px 0 var(--orange); }.still-playing { margin-top:34px; line-height:1.55; }.technology-line { gap:6px; }.technology span,.technology small { font-size:7px; }.technology img { max-width:77px; max-height:14px; }.reticle { display:none; }.deployment-readout { padding:26px 15px; }.deployment-readout span { font-size:8px; letter-spacing:1px; }.deployment-door::before { inset:66px 12px 42px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition-duration:0s !important; }.deployment-overlay,.deployment-door,.deployment-readout,.deployment-readout>i em { animation:none !important; } }