@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root { color-scheme: dark; --lime:#c8ff39; --paper:#e9edf2; --muted:#79818f; --ink:#090b10; }
* { box-sizing:border-box; }
html, body { margin:0; width:100%; height:100%; overflow:hidden; background:#090b10; font-family:'IBM Plex Mono', monospace; }
body { cursor:crosshair; }
body.playing { cursor:none; }
#game { position:fixed; inset:0; width:100%; height:100%; display:block; }
.menu { position:fixed; inset:0; display:flex; flex-direction:column; justify-content:center; gap:clamp(24px,4vh,48px); padding:5vh 6vw 4vh; background:linear-gradient(90deg,rgba(8,10,15,.97),rgba(8,10,15,.75) 62%,rgba(8,10,15,.92)); transition:opacity .45s ease, transform .45s ease; }
.menu.hidden { opacity:0; transform:scale(1.025); pointer-events:none; }
.brand .eyebrow { color:var(--muted); font-size:11px; letter-spacing:.2em; margin-bottom:14px; }
.live-dot { display:inline-block; width:7px; height:7px; margin-right:9px; border-radius:50%; background:var(--lime); box-shadow:0 0 14px var(--lime); }
h1 { margin:0; color:var(--paper); font:clamp(45px,7vw,104px)/.84 'Archivo Black', sans-serif; letter-spacing:-.07em; }
h1 span { color:var(--lime); }
.brand p { margin:18px 0 0; color:#808896; font-size:clamp(11px,1.1vw,15px); letter-spacing:.04em; }
.brand b { color:#d9dee6; font-weight:500; }
.loadout { display:grid; grid-template-columns:repeat(5,1fr); width:min(1120px,88vw); border-top:1px solid #272c35; border-left:1px solid #272c35; }
.class-card { position:relative; min-height:190px; padding:18px; text-align:left; border:0; border-right:1px solid #272c35; border-bottom:1px solid #272c35; background:rgba(17,20,27,.75); color:#68707e; font:inherit; cursor:pointer; transition:background .18s,color .18s,transform .18s; overflow:hidden; }
.class-card:hover { background:#171b22; color:#b9c0ca; transform:translateY(-3px); }
.class-card.selected { background:var(--paper); color:#0b0d11; box-shadow:0 0 0 1px var(--paper); z-index:2; }
.class-card.selected::after { content:"SELECTED"; position:absolute; top:14px; right:-28px; width:100px; padding:3px; color:#0a0c10; background:var(--lime); font-size:8px; font-weight:600; text-align:center; transform:rotate(45deg); }
.key { display:block; font-size:9px; opacity:.5; }
.cursor-icon { display:block; margin:17px 0 18px; font-size:31px; line-height:1; transform:rotate(-45deg); transform-origin:center; }
.tank-icon { font-size:45px; } .assassin-icon { font-size:24px; } .sniper-icon { filter:drop-shadow(18px 0 0 currentColor); } .portal-icon { color:#5df0ff; filter:drop-shadow(-12px 0 #a77cff); } .hacker-icon { text-shadow:3px 0 #ff2e76,-3px 0 #45eaff; }
.class-card strong { display:block; font:16px 'Archivo Black', sans-serif; letter-spacing:-.03em; }
.class-card small { display:block; margin-top:5px; font-size:8px; letter-spacing:.12em; opacity:.6; }
.class-card i { display:block; width:58px; height:2px; margin-top:24px; background:#303640; }
.class-card i em { display:block; height:100%; background:currentColor; }
.class-card label { display:block; margin-top:5px; font-size:7px; letter-spacing:.15em; opacity:.45; }
.launch { display:flex; align-items:flex-end; gap:15px; width:min(660px,88vw); }
.name-field { flex:1; border-bottom:1px solid #3c424c; padding:8px 0; }
.name-field label { display:block; color:#59616f; font-size:8px; letter-spacing:.2em; }
.name-field input { width:100%; border:0; outline:0; background:transparent; color:var(--paper); font:600 16px 'IBM Plex Mono'; text-transform:uppercase; }
#start-btn { height:54px; min-width:260px; padding:0 20px; border:0; background:var(--lime); color:#090b10; font:600 11px 'IBM Plex Mono'; letter-spacing:.12em; cursor:pointer; transition:filter .15s, transform .15s; }
#start-btn:hover { filter:brightness(1.15); transform:translateY(-2px); }
#start-btn span { float:right; font-size:18px; margin-left:35px; }
.controls { display:flex; flex-wrap:wrap; gap:22px; color:#555e6c; font-size:8px; letter-spacing:.1em; }
kbd { padding:4px 7px; border:1px solid #303640; color:#aab1bc; background:#14171d; font:inherit; }
.connection { position:fixed; top:20px; right:24px; color:#727b8a; font-size:8px; letter-spacing:.16em; pointer-events:none; }
.connection span { display:inline-block; width:5px; height:5px; margin-right:7px; border-radius:50%; background:#ffbc42; }
.connection.online span { background:var(--lime); box-shadow:0 0 8px var(--lime); }
.capture { position:fixed; inset:0; z-index:10; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; width:100%; border:0; background:rgba(7,9,13,.78); color:var(--paper); font-family:'IBM Plex Mono',monospace; cursor:pointer; backdrop-filter:blur(5px); }
.capture.hidden { display:none; }
.capture span { color:var(--lime); font-size:9px; letter-spacing:.22em; }
.capture strong { font:clamp(21px,3vw,42px) 'Archivo Black',sans-serif; letter-spacing:-.04em; }
.capture small { color:#747d8b; font-size:9px; letter-spacing:.08em; }
@media(max-width:800px) { .loadout{grid-template-columns:repeat(5,150px);overflow-x:auto;width:94vw}.class-card{min-height:160px}.menu{padding-left:4vw}.controls{display:none}.launch{width:94vw} }