:root { --ink: #edf0ea; --muted: #9da49d; --acid: #d8ff52; --orange: #ff5c38; --panel: rgba(19, 24, 27, .84); --line: rgba(237,240,234,.18); }
* { box-sizing: border-box; }
html, body, #app { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #101317; color: var(--ink); font-family: "Noto Sans SC", sans-serif; }
button, input { font: inherit; }
.lobby-screen { position: relative; min-height: 100%; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr); align-items: center; gap: 7vw; padding: clamp(32px, 7vw, 108px); background: radial-gradient(circle at 77% 24%, rgba(216,255,82,.14), transparent 20%), linear-gradient(115deg, #111516 0 52%, #202823 52% 100%); isolation: isolate; }
.lobby-screen::before { content:""; position:absolute; inset:0; background: linear-gradient(90deg, transparent 0 67%, rgba(216,255,82,.08) 67% 67.1%, transparent 67.1%), repeating-linear-gradient(0deg, transparent 0 79px, rgba(255,255,255,.025) 80px); pointer-events:none; }
.grain { position:absolute; inset:0; opacity:.22; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); mix-blend-mode:soft-light; pointer-events:none; z-index:-1; }
.lobby-copy { position:relative; z-index:1; max-width:660px; }
.eyebrow { display:flex; align-items:center; gap:10px; margin:0 0 25px; color:var(--acid); font-size:12px; letter-spacing:2px; }
.eyebrow span, .status-dot { width:8px; height:8px; border-radius:50%; display:inline-block; background:var(--acid); box-shadow:0 0 16px var(--acid); }
h1 { margin:0; font:800 clamp(82px, 15vw, 185px)/.68 "Barlow Condensed", sans-serif; letter-spacing:-5px; color:#eff0e8; }
h1 i { color:var(--acid); font-style:normal; margin-left:13vw; }
.tagline { margin:45px 0 28px; color:#c5c8c0; line-height:1.8; font-size:clamp(15px, 1.5vw, 19px); }
.feature-row { display:flex; flex-wrap:wrap; gap:11px 25px; color:var(--muted); font:500 13px "Barlow Condensed", sans-serif; letter-spacing:1px; }
.join-card { position:relative; z-index:1; width:min(100%, 410px); padding:30px; border:1px solid var(--line); background:var(--panel); backdrop-filter:blur(10px); box-shadow:20px 20px 0 rgba(0,0,0,.12); }
.join-heading { display:flex; gap:10px; align-items:center; margin-bottom:28px; font:600 19px "Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:1.4px; }
.join-card label { display:block; margin:16px 0; color:var(--muted); font-size:11px; letter-spacing:1px; }
.join-card input { width:100%; margin-top:8px; padding:13px 0; border:0; border-bottom:1px solid rgba(237,240,234,.35); outline:0; background:transparent; color:var(--ink); font-size:16px; transition:border-color .2s; }
.join-card input:focus { border-color:var(--acid); }
.join-card input::placeholder { color:#647069; }
.join-card button { width:100%; margin-top:16px; padding:15px 18px; border:0; background:var(--acid); color:#182016; cursor:pointer; text-align:left; font-weight:700; letter-spacing:1px; transition:transform .15s, background .15s; }
.join-card button:hover { background:#ecff9d; transform:translateY(-2px); }.join-card button b { float:right; font-size:21px; line-height:14px; }
.hint, .lobby-error { margin:15px 0 0; font-size:12px; line-height:1.6; color:var(--muted); }.lobby-error { color:#ff8d72; min-height:0; }
.lobby-screen footer { position:absolute; bottom:28px; left:clamp(32px,7vw,108px); color:#788078; font:500 10px "Barlow Condensed",sans-serif; letter-spacing:1.4px; }
.game-screen { position:relative; width:100%; height:100%; background:#15191a; }.game-screen canvas { display:block; width:100%; height:100%; }
.hud { position:absolute; inset:0; pointer-events:none; text-shadow:0 2px 4px #000; font-family:"Barlow Condensed", "Noto Sans SC",sans-serif; }.topbar { position:absolute; top:20px; left:50%; transform:translateX(-50%); display:flex; align-items:stretch; background:rgba(8,11,12,.68); border:1px solid rgba(255,255,255,.13); }.team-score { min-width:119px; padding:7px 14px; display:flex; gap:11px; align-items:center; font-weight:700; letter-spacing:1px; }.team-score strong { font-size:29px; line-height:1; }.team-score span { font-size:13px; }.team-score.red { border-bottom:2px solid var(--orange); }.team-score.blue { border-bottom:2px solid #4dc3ff; justify-content:flex-end; }.round { min-width:115px; padding:6px 16px; border-inline:1px solid rgba(255,255,255,.13); text-align:center; }.round small { display:block; color:#b7c0b7; font-size:11px; letter-spacing:.6px; }.round strong { display:block; font-size:21px; line-height:1.05; }.round em { display:block; margin-top:2px; color:var(--acid); font-size:9px; font-style:normal; letter-spacing:1px; }.objective { position:absolute; top:105px; left:50%; transform:translateX(-50%); color:rgba(238,241,232,.65); font-size:12px; letter-spacing:.8px; white-space:nowrap; }
.radar { position:absolute; top:22px; left:24px; width:135px; height:135px; overflow:hidden; border:1px solid rgba(216,255,82,.5); border-radius:50%; background:rgba(7,13,12,.46); box-shadow:inset 0 0 35px rgba(216,255,82,.08); }.radar::after { content:""; position:absolute; inset:17%; border:1px solid rgba(216,255,82,.16); border-radius:50%; }.radar-n { position:absolute; top:5px; left:calc(50% - 3px); color:var(--acid); font-size:9px; }.radar-line { position:absolute; background:rgba(216,255,82,.2); }.radar-line.x { width:100%; height:1px; top:50%; }.radar-line.y { height:100%; width:1px; left:50%; }.radar-dot { position:absolute; width:6px; height:6px; margin:-3px; border-radius:50%; background:#58ccff; box-shadow:0 0 5px currentColor; }.radar-dot.enemy { background:#ff6847; }.radar-dot.self { width:9px; height:9px; margin:-4.5px; background:var(--acid); }
.kill-feed { position:absolute; right:27px; top:23px; width:220px; display:grid; justify-items:end; gap:5px; }.kill-item { padding:4px 7px; background:rgba(4,7,8,.4); border-right:2px solid var(--acid); font:500 13px "Noto Sans SC",sans-serif; }.kill-item.red { border-color:var(--orange); }.kill-item.blue { border-color:#4dc3ff; }.system-message { position:absolute; bottom:116px; left:50%; transform:translateX(-50%); color:#e0e6dc; font-size:14px; opacity:0; transition:opacity .25s; white-space:nowrap; }.system-message.show { opacity:1; }.bottom-hud { position:absolute; bottom:28px; left:28px; right:28px; display:flex; align-items:end; justify-content:space-between; }.health { display:grid; grid-template-columns:auto 1fr; column-gap:10px; align-items:end; color:var(--acid); }.health b { grid-row:span 2; font-size:49px; line-height:.8; }.health span { padding-bottom:1px; color:#e7eee3; font-size:13px; letter-spacing:1px; }.weapon { text-align:right; }.weapon small { display:block; color:#b7c0b7; letter-spacing:1.2px; }.weapon strong { display:block; font-size:28px; letter-spacing:1px; line-height:.95; }.weapon span { color:var(--acid); font-size:22px; font-weight:700; }.weapon i { color:#9da49d; font-style:normal; }.crosshair { position:absolute; top:50%; left:50%; width:28px; height:28px; transform:translate(-50%,-50%); transition:width .06s,height .06s; }.crosshair i { position:absolute; display:block; background:rgba(244,249,238,.9); box-shadow:0 0 2px #000; }.crosshair i:nth-child(1),.crosshair i:nth-child(2) { left:13px; width:2px; height:7px; }.crosshair i:nth-child(1){top:0}.crosshair i:nth-child(2){bottom:0}.crosshair i:nth-child(3),.crosshair i:nth-child(4) { top:13px; width:7px; height:2px; }.crosshair i:nth-child(3){left:0}.crosshair i:nth-child(4){right:0}.controls-tip { position:absolute; left:50%; bottom:12px; transform:translateX(-50%); color:rgba(237,240,234,.48); font:12px "Noto Sans SC",sans-serif; white-space:nowrap; }.controls-tip kbd { margin:0 2px; padding:1px 4px; border:1px solid rgba(255,255,255,.24); border-radius:2px; font:11px "Barlow Condensed",sans-serif; }.damage-vignette { position:absolute; inset:0; opacity:0; pointer-events:none; background:radial-gradient(transparent 40%,rgba(230,28,17,.78) 125%); transition:opacity .12s; }.damage-vignette.hit { opacity:1; }.respawn-overlay { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); padding:21px 33px; text-align:center; background:rgba(7,9,10,.8); border-top:2px solid var(--orange); }.respawn-overlay small,.respawn-overlay span { display:block; color:#bbc1ba; font-size:12px; letter-spacing:1px; }.respawn-overlay strong { display:block; margin:4px 0; font-size:34px; color:#fff; }
@media (max-width:720px) { .lobby-screen { grid-template-columns:1fr; align-content:center; gap:50px; padding:38px 26px 60px; }.lobby-copy { max-width:100%; } h1 { font-size:100px; } h1 i { margin-left:12vw; }.tagline { margin-top:34px; }.join-card { width:100%; }.lobby-screen footer { left:26px; }.radar { transform:scale(.72); transform-origin:top left; }.topbar { top:11px; transform:translateX(-50%) scale(.82); }.objective{ top:84px; font-size:10px; }.kill-feed{ top:125px; right:8px; transform:scale(.8); transform-origin:top right; }.controls-tip{ display:none; }.bottom-hud{ bottom:18px; left:18px; right:18px; }.health b{ font-size:39px; }.weapon strong{ font-size:23px; } }