:root {
  --red: #f23846;
  --red-dark: #a91222;
  --green: #45ed95;
  --ink: #08090c;
  --panel: rgba(12, 13, 18, .92);
  --line: rgba(255, 255, 255, .12);
  --muted: #9699a2;
  --white: #f5f3ef;
  --top: 78px;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { width: 100%; height: 100%; overflow: hidden; background: var(--ink); scroll-behavior: smooth; }
body { width: 100%; height: 100%; margin: 0; overflow: hidden; color: var(--white); background: var(--ink); font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
::selection { background: var(--red); color: white; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -80px; z-index: 999; padding: 12px 18px; background: white; color: black; font-weight: 800; }
.skip:focus { top: 16px; }

.launcher { position: relative; width: 100%; height: 100svh; min-height: 0; overflow: hidden; background: #090a0d; isolation: isolate; }
.scene { position: absolute; inset: 0; z-index: -5; background: url("freekill-yard-v2.jpg") 58% center / cover no-repeat; transform: scale(1.015); animation: scene-in 1.3s ease both; }
.launcher::before { content: ""; position: absolute; inset: 0; z-index: -4; background: linear-gradient(90deg, rgba(5,6,9,.93) 0%, rgba(5,6,9,.74) 29%, rgba(5,6,9,.22) 57%, rgba(5,6,9,.56) 100%), linear-gradient(180deg, rgba(5,6,9,.42), transparent 35%, rgba(5,6,9,.66)); }
.launcher::after { content: ""; position: absolute; inset: 0; z-index: -3; box-shadow: inset 0 0 180px 35px rgba(0,0,0,.7); pointer-events: none; }
.scanlines { position: absolute; inset: 0; z-index: 10; pointer-events: none; opacity: .16; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.025) 4px); mix-blend-mode: screen; }

.topbar { position: relative; z-index: 20; height: var(--top); display: grid; grid-template-columns: 270px 1fr 330px; align-items: center; border-bottom: 1px solid var(--line); background: rgba(7,8,11,.74); backdrop-filter: blur(16px); }
.brand { height: 100%; display: flex; align-items: center; gap: 12px; padding-left: 30px; border-right: 1px solid var(--line); }
.brand svg { width: 43px; height: 43px; color: var(--red); }
.brand svg>path:first-child,.brand__inner { fill: none; stroke: currentColor; stroke-width: 2; }.brand__inner { opacity: .4; }.brand text { fill: currentColor; font: italic 900 22px Arial; }
.brand>span { display: flex; flex-direction: column; line-height: 1; }.brand b { font-size: 16px; font-style: italic; letter-spacing: .17em; }.brand small { margin-top: 6px; color: #7e818a; font-size: 7px; font-weight: 800; letter-spacing: .28em; }
.topnav { justify-self: center; height: 100%; display: flex; align-items: center; gap: 42px; }
.topnav a,.topnav button { position: relative; border: 0; background: none; padding: 0; cursor: pointer; color: #94969f; font-size: 9px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.topnav a:hover,.topnav button:hover,.topnav .is-active { color: white; }.topnav .is-active::after { content:""; position:absolute; left:0; right:0; bottom:-29px; height:2px; background:var(--red); }
.topbar__right { height: 100%; display: flex; align-items: center; justify-content: flex-end; gap: 24px; padding-right: 24px; border-left: 1px solid var(--line); }
.network { color: #888b94; font-size: 7px; font-weight: 900; letter-spacing: .17em; }.network i,.statusbar__state i,.server-box__title i { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.top-play { display: flex; align-items: center; gap: 20px; min-height: 40px; padding: 0 17px; background: var(--red); font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; transition: background .2s, transform .2s; }.top-play:hover { background: #ff4a57; transform: translateY(-1px); }

.hero { min-height: calc(100svh - var(--top) - 42px); display: grid; grid-template-columns: minmax(440px, 1fr) minmax(440px, 520px); align-items: center; gap: clamp(30px, 5vw, 80px); padding: 65px clamp(35px, 5vw, 88px) 78px clamp(75px, 8vw, 140px); }
.hero__content { position: relative; z-index: 3; align-self: center; max-width: 760px; animation: rise .8s .15s ease both; }
.mission-code { display: flex; align-items: center; width: min(380px, 100%); margin-bottom: 32px; color: #7e818a; font: 800 7px/1 Arial; letter-spacing: .19em; }.mission-code i { flex: 1; height: 1px; margin: 0 15px; background: rgba(255,255,255,.15); }
.kicker { margin: 0 0 18px; color: #d1d2d6; font-size: 9px; font-weight: 900; letter-spacing: .23em; }.kicker span { display: inline-block; width: 28px; height: 1px; margin: 0 11px 3px 0; background: var(--red); }
.hero h1 { margin: 0; font: 900 clamp(70px, 8.5vw, 132px)/.83 Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; letter-spacing: .018em; text-transform: uppercase; text-shadow: 0 18px 50px rgba(0,0,0,.7); }.hero h1 em { color: var(--red); font-style: normal; }
.hero__lead { max-width: 560px; margin: 30px 0 34px; color: #c0c2c9; font-size: clamp(14px, 1.15vw, 18px); line-height: 1.6; text-shadow: 0 2px 16px black; }
.hero__facts { display: flex; width: min(570px,100%); border-block: 1px solid var(--line); background: rgba(7,8,11,.23); backdrop-filter: blur(4px); }.hero__facts>div { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 70px; padding: 0 18px; border-right: 1px solid var(--line); }.hero__facts>div:last-child { border-right: 0; }.hero__facts strong { font: italic 900 20px/1 Arial; }.hero__facts span { color: #93959e; font-size: 7px; font-weight: 800; letter-spacing: .12em; line-height: 1.5; text-transform: uppercase; }

.telemetry { position: absolute; z-index: 2; top: 20%; left: 58%; display: flex; flex-direction: column; color: rgba(255,255,255,.38); font: 700 6px/1.7 monospace; letter-spacing: .12em; }.telemetry>span { color: var(--red); }.telemetry i { width: 70px; height: 1px; margin: 8px 0; background: rgba(255,255,255,.2); }.telemetry small { font: inherit; }

.command { position: relative; z-index: 5; align-self: center; overflow: hidden; border: 1px solid rgba(255,255,255,.16); background: linear-gradient(145deg,rgba(19,20,27,.95),rgba(8,9,13,.96)); box-shadow: 0 35px 100px rgba(0,0,0,.55); backdrop-filter: blur(18px); animation: slide-in .8s .25s ease both; }
.command::before { content:""; position:absolute; left:-1px; top:-1px; width:115px; height:3px; background:var(--red); }
.command__head { min-height: 105px; display: flex; justify-content: space-between; align-items: center; padding: 25px 28px; border-bottom: 1px solid var(--line); }.command__head>div>span { color: var(--red); font-size: 7px; font-weight: 900; letter-spacing: .19em; }.command__head h2 { margin: 6px 0 0; font: 900 25px/1 Impact, sans-serif; letter-spacing: .04em; text-transform: uppercase; }.command__version { color: #60626b; font: 800 8px monospace; }
.game-mode { position: relative; display: grid; grid-template-columns: 48px 1fr 24px; align-items: center; gap: 14px; min-height: 97px; margin: 10px 12px; padding: 17px; border: 1px solid var(--line); background: rgba(255,255,255,.025); transition: border-color .2s, background .2s, transform .2s; }.game-mode:hover { transform: translateX(3px); border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.06); }.game-mode--primary { min-height: 108px; border-color: transparent; background: var(--red); }.game-mode--primary:hover { background:#ff3f4d; border-color:transparent; }.game-mode__icon { width: 46px; height: 46px; display: grid; place-items: center; background: rgba(0,0,0,.22); }.game-mode__icon svg { width: 22px; height: 22px; fill:none;stroke:currentColor;stroke-width:1.7; }.game-mode--primary .game-mode__icon svg { fill:currentColor;stroke:none; }.game-mode__copy { display:flex;min-width:0;flex-direction:column; }.game-mode__copy small { margin-bottom:3px;color:#7f828b;font-size:6px;font-weight:900;letter-spacing:.17em; }.game-mode--primary .game-mode__copy small { color:rgba(255,255,255,.62); }.game-mode__copy strong { font-size:15px;letter-spacing:.06em;text-transform:uppercase; }.game-mode__copy>span { margin-top:3px;color:#888b94;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }.game-mode--primary .game-mode__copy>span { color:rgba(255,255,255,.68); }.game-mode__arrow { color:#6e7079;font-size:20px; }.game-mode--primary .game-mode__arrow { color:white; }
.server-box { margin: 15px 12px 12px; padding: 20px; border-top: 1px solid var(--line); background: rgba(0,0,0,.18); }.server-box__title { display:flex;justify-content:space-between;color:#7e818a;font-size:6px;font-weight:900;letter-spacing:.16em; }.server-box__title span { display:flex;align-items:center; }.server-box__title i { width:5px;height:5px; }.server-box>strong { display:block;margin:13px 0 9px;font-size:12px;letter-spacing:.04em; }.server-box__address { display:flex;align-items:stretch;border:1px solid var(--line);background:#08090c; }.server-box__address code { flex:1;padding:12px 14px;color:#d6d7db;font:800 12px monospace; }.server-box__address button { width:44px;border:0;border-left:1px solid var(--line);background:transparent;cursor:pointer;color:#999ca5; }.server-box__address button:hover { color:white;background:var(--red); }.server-box__address svg { width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5; }.copy-feedback { display:block;min-height:14px;padding-top:3px;color:var(--green);font-size:7px; }
.server-box.is-highlighted { animation: server-highlight 1.2s ease; }
.command__footer { display:flex;align-items:center;gap:15px;min-height:51px;padding:0 16px;border-top:1px solid var(--line);color:#656871;font-size:6px;font-weight:800;letter-spacing:.1em;text-transform:uppercase; }.command__footer kbd { padding:3px 5px;border:1px solid #52545c;color:#aaa;background:#17181d;font:inherit; }.command__footer button { margin-left:auto;border:0;background:none;padding:0;cursor:pointer;color:#9a9ca4;font:inherit;text-transform:inherit;letter-spacing:inherit; }.command__footer button:hover,.command__footer a:hover { color:white; }.command__footer button b,.command__footer a b { margin-left:5px;color:var(--red); }.command__footer a { color:#9a9ca4; }

.statusbar { position: absolute; z-index: 20; inset: auto 0 0; height: 42px; display: grid; grid-template-columns: 260px 1fr 120px; align-items: center; border-top: 1px solid var(--line); background: rgba(7,8,11,.88); backdrop-filter: blur(12px); }.statusbar__state { height:100%;display:flex;align-items:center;padding-left:31px;border-right:1px solid var(--line);color:#8c8f98;font-size:6px;font-weight:900;letter-spacing:.16em; }.statusbar__state i { width:5px;height:5px; }.ticker { display:flex;justify-content:center;gap:20px;color:#757780;font-size:6px;font-weight:900;letter-spacing:.17em; }.ticker i { color:var(--red);font-style:normal; }.statusbar__time { height:100%;display:flex;align-items:center;justify-content:center;gap:7px;border-left:1px solid var(--line);font:800 11px monospace; }.statusbar__time small { color:#686a73;font-size:6px; }
.rail { position:absolute;z-index:6;left:17px;top:50%;display:flex;align-items:center;gap:10px;transform:translate(-50%,-50%) rotate(-90deg);color:#666972;font-size:5px;font-weight:900;letter-spacing:.24em; }.rail i { width:70px;height:1px;background:rgba(255,255,255,.16); }

.guide { width:min(540px,calc(100% - 32px));padding:34px;border:1px solid rgba(255,255,255,.16);color:white;background:#101117;box-shadow:0 40px 120px rgba(0,0,0,.8); }.guide::backdrop { background:rgba(3,4,6,.8);backdrop-filter:blur(8px); }.guide__close { position:absolute;right:17px;top:13px;border:0;background:none;color:#858891;font-size:28px;cursor:pointer; }.guide__close:hover { color:white; }.guide>p { margin:0;color:var(--red);font-size:7px;font-weight:900;letter-spacing:.2em; }.guide h2 { margin:9px 0 25px;font:900 34px Impact;text-transform:uppercase;letter-spacing:.04em; }.guide ol { list-style:none;margin:0;padding:0;border-top:1px solid var(--line); }.guide li { display:grid;grid-template-columns:40px 1fr;gap:15px;padding:18px 0;border-bottom:1px solid var(--line); }.guide li>span { color:var(--red);font:900 10px monospace; }.guide li strong { font-size:12px;text-transform:uppercase;letter-spacing:.08em; }.guide li p { margin:4px 0 0;color:#8f919a;font-size:11px;line-height:1.5; }.guide>a { display:flex;justify-content:space-between;margin-top:25px;padding:16px 18px;background:var(--red);font-size:9px;font-weight:900;letter-spacing:.12em;text-transform:uppercase; }

@keyframes scene-in { from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:scale(1.015)} }
@keyframes rise { from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none} }
@keyframes slide-in { from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none} }
@keyframes server-highlight { 0%,100%{box-shadow:none;background:rgba(0,0,0,.18)} 35%{box-shadow:inset 3px 0 var(--red),0 0 32px rgba(242,56,70,.24);background:rgba(242,56,70,.08)} }

@media (max-width: 1080px) {
  .topbar { grid-template-columns: 240px 1fr 250px; }.network { display:none; }.hero { grid-template-columns:minmax(350px,1fr) minmax(390px,460px);padding-left:70px;padding-right:35px;gap:28px; }.hero h1 { font-size:clamp(65px,9vw,100px); }.telemetry { display:none; }.ticker { gap:10px; }
}

@media (max-width: 820px) {
  :root{--top:68px}.scene{background-position:67% center}.topbar{grid-template-columns:1fr auto;height:var(--top)}.brand{padding-left:20px;border-right:0}.brand svg{width:38px;height:38px}.topnav{display:none}.topbar__right{border-left:0;padding-right:16px}.top-play{min-height:38px}.hero{height:calc(100svh - var(--top) - 42px);min-height:0;grid-template-columns:minmax(0,.74fr) minmax(370px,1.26fr);padding:20px 18px 26px 30px;gap:18px}.hero__content{padding:0}.mission-code{display:none}.hero h1{font-size:clamp(46px,8.4vw,66px)}.hero__lead{max-width:330px;margin:18px 0 20px;font-size:12px;line-height:1.45}.hero__facts{max-width:330px}.hero__facts>div{min-height:56px;padding:0 9px;gap:5px}.hero__facts strong{font-size:15px}.hero__facts span{font-size:5px}.command{width:100%;max-width:470px;max-height:100%;justify-self:center}.command__head{min-height:72px;padding:16px 20px}.command__head h2{font-size:21px}.game-mode{min-height:72px;margin:6px 8px;padding:11px 13px}.game-mode--primary{min-height:78px}.game-mode__icon{width:40px;height:40px}.server-box{margin:8px;padding:12px 14px}.server-box>strong{margin:8px 0 6px}.server-box__address code{padding:9px 11px}.copy-feedback{min-height:9px}.command__footer{min-height:39px;padding:0 12px}.statusbar{grid-template-columns:1fr auto;height:42px}.statusbar__state{border-right:0}.ticker{display:none}.statusbar__time{width:110px}.rail,.telemetry{display:none}
}

@media (max-width: 520px) {
  :root{--top:58px}.brand{padding-left:14px}.brand>span{display:none}.brand svg{width:34px;height:34px}.topbar__right{padding-right:10px}.top-play{min-height:34px;padding-inline:11px}.hero{height:calc(100svh - var(--top) - 34px);display:flex;align-items:center;justify-content:center;padding:8px 7px 12px}.hero__content{display:none}.command{width:min(100%,460px);max-height:100%}.command__head{min-height:62px;padding:12px 15px}.command__head h2{font-size:19px}.game-mode{grid-template-columns:38px 1fr 18px;min-height:65px;margin:5px 6px;padding:8px 10px;gap:10px}.game-mode--primary{min-height:69px}.game-mode__icon{width:36px;height:36px}.game-mode__icon svg{width:18px;height:18px}.game-mode__copy strong{font-size:13px}.game-mode__copy>span{font-size:7px}.server-box{margin:6px;padding:9px 10px}.server-box>strong{margin:6px 0 5px;font-size:10px}.server-box__address code{padding:8px 9px;font-size:10px}.server-box__address button{width:38px}.copy-feedback{min-height:7px}.command__footer{min-height:34px;gap:8px;padding-inline:8px}.command__footer span:nth-child(3),.command__footer span:nth-child(2){display:none}.statusbar{height:34px}.statusbar__state{padding-left:14px}.statusbar__time{width:90px}
}

@media (max-height: 640px) {
  .command__head{min-height:54px;padding-block:9px}.game-mode{min-height:57px}.game-mode--primary{min-height:61px}.server-box{padding-block:7px}.server-box__title{display:none}.server-box>strong{margin-top:0}.command__footer{min-height:30px}.game-mode__copy>span{display:none}
}

@media (prefers-reduced-motion: reduce) { .scene,.hero__content,.command{animation:none}html{scroll-behavior:auto} }