:root { --bg:#050b12; --panel:rgba(10,20,34,.88); --panel-2:#0d1a2a; --text:#edf5ff; --muted:#8fa2b8; --line:rgba(255,255,255,.1); --blue:#28a9e8; --red:#ef5966; --gold:#d6ad55; }
* { box-sizing:border-box; }
body { min-height:100vh; margin:0; color:var(--text); font-family:Inter,Arial,sans-serif; background:linear-gradient(rgba(4,10,18,.88),rgba(4,10,18,.96)),url("../assets/bg.jpeg") center/cover fixed; }
button,input,select { font:inherit; }
.topbar { min-height:68px; padding:0 clamp(18px,4vw,64px); display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--line); background:rgba(4,10,18,.76); backdrop-filter:blur(16px); }
.brand { display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-weight:800; }
.brand img { width:34px; height:34px; object-fit:contain; }
nav { display:flex; gap:24px; }
nav a { color:var(--muted); text-decoration:none; font-size:.9rem; font-weight:600; }
nav a:hover,nav a[aria-current="page"] { color:var(--gold); }
main { width:min(1380px,calc(100% - 32px)); margin:0 auto; padding:54px 0 70px; }
.hero { text-align:center; margin-bottom:34px; }
.eyebrow { margin:0 0 8px; color:var(--gold); font-size:.76rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(2.5rem,6vw,4.7rem); line-height:1; letter-spacing:-.05em; }
.hero>p:last-child { max-width:620px; margin:16px auto 0; color:var(--muted); }
.lobby { overflow:hidden; border:1px solid var(--line); border-radius:16px; background:var(--panel); box-shadow:0 30px 90px rgba(0,0,0,.38); backdrop-filter:blur(20px); }
.lobby-head,.lobby-footer { min-height:70px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 22px; border-bottom:1px solid var(--line); color:var(--muted); font-size:.88rem; }
.status-dot { display:inline-block; width:8px; height:8px; margin-right:8px; border-radius:50%; background:#52cf8a; box-shadow:0 0 12px #52cf8a; }
.lobby-actions { display:flex; gap:10px; }
button { border:0; cursor:pointer; }
.secondary { padding:9px 13px; color:var(--text); border:1px solid var(--line); border-radius:7px; background:rgba(255,255,255,.04); font-size:.82rem; font-weight:700; }
.secondary:hover { background:rgba(255,255,255,.09); }
.secondary.danger:hover { color:#ff8d96; border-color:rgba(239,89,102,.45); }
.teams { display:grid; grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr); padding:28px 22px 30px; }
.team-heading,.team-heading>div { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.team-heading { margin-bottom:16px; }
.team-heading h2 { margin:0; font-size:1.05rem; }
.team-mark { width:4px; height:22px; border-radius:4px; background:var(--blue); box-shadow:0 0 14px var(--blue); }
.red-team .team-mark { background:var(--red); box-shadow:0 0 14px var(--red); }
.team-count { color:var(--muted); font-size:.78rem; font-weight:700; }
.roster { display:grid; gap:10px; }
.player-slot { min-width:0; display:grid; grid-template-columns:38px minmax(0,1fr) 30px; align-items:center; gap:10px; padding:12px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.025); transition:border-color .2s,transform .2s; }
.blue-team .player-slot:focus-within { border-color:rgba(40,169,232,.65); transform:translateY(-1px); }
.red-team .player-slot:focus-within { border-color:rgba(239,89,102,.65); transform:translateY(-1px); }
.slot-number { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; color:var(--muted); background:rgba(255,255,255,.06); font-size:.78rem; font-weight:800; }
.player-slot.filled .slot-number { color:white; background:rgba(40,169,232,.22); }
.red-team .player-slot.filled .slot-number { background:rgba(239,89,102,.22); }
.player-fields { min-width:0; }
label span { display:block; margin-bottom:4px; color:var(--muted); font-size:.64rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
input,select { width:100%; min-width:0; color:var(--text); border:1px solid transparent; border-radius:6px; outline:none; background:#09131f; }
input { height:34px; padding:0 10px; font-weight:700; }
select { height:30px; padding:0 24px 0 8px; color:#c6d3df; font-size:.72rem; }
input:focus,select:focus { border-color:var(--gold); }
.select-row { display:grid; grid-template-columns:.8fr 1.2fr; gap:8px; margin-top:8px; }
.remove-player { width:28px; height:28px; color:#65788e; border-radius:50%; background:transparent; font-size:1.35rem; line-height:1; }
.remove-player:hover { color:white; background:rgba(255,255,255,.08); }
.versus { display:grid; place-items:center; }
.versus span { width:44px; height:44px; display:grid; place-items:center; color:var(--gold); border:1px solid rgba(214,173,85,.35); border-radius:50%; background:#0b1521; font-size:.76rem; font-weight:900; box-shadow:0 0 30px rgba(214,173,85,.1); }
.lobby-footer { border-top:1px solid var(--line); border-bottom:0; }
.lobby-footer p { margin:0; }
.ready-button { min-width:190px; padding:12px 20px; color:#071019; border-radius:7px; background:var(--gold); font-weight:900; }
.ready-button:disabled { cursor:not-allowed; color:#77818c; background:#27313c; }
.ready-button:not(:disabled):hover { filter:brightness(1.1); }
footer { padding:22px; color:#65788e; text-align:center; font-size:.78rem; }
@media (max-width:900px) { .teams { grid-template-columns:1fr; gap:28px; } .versus { display:none; } }
@media (max-width:650px) { .topbar { align-items:flex-start; flex-direction:column; padding:14px 18px; } nav { width:100%; gap:16px; overflow-x:auto; padding-bottom:2px; } main { padding-top:34px; } .lobby-head,.lobby-footer { align-items:stretch; flex-direction:column; } .lobby-actions { display:grid; grid-template-columns:1fr 1fr; } .ready-button { width:100%; } .teams { padding:22px 12px; } .player-slot { grid-template-columns:32px minmax(0,1fr) 26px; padding:10px 8px; gap:7px; } }