:root {
  --bg:#06110e;
  --panel:rgba(7,22,18,.9);
  --line:rgba(131,207,175,.16);
  --green:#77f2b0;
  --muted:#718a80;
  --red:#ff4d67;
  --blue:#42a5ff;
  --gold:#ffc85a;
}
* { box-sizing:border-box; }
html { min-height:100%; background:var(--bg); }
body { min-height:100vh; margin:0; color:#d8e7e0; background:radial-gradient(circle at 50% -20%, #153a2e 0, var(--bg) 42%); font-family:Inter,Segoe UI,Arial,sans-serif; overflow-x:hidden; }
button, a { font:inherit; }
.world-grid { position:fixed; inset:0; pointer-events:none; opacity:.24; background-image:linear-gradient(rgba(119,242,176,.06) 1px, transparent 1px),linear-gradient(90deg, rgba(119,242,176,.06) 1px, transparent 1px); background-size:72px 72px; mask-image:linear-gradient(to bottom, #000, transparent 85%); }
.glow { position:fixed; width:500px; height:500px; border-radius:50%; filter:blur(130px); opacity:.08; pointer-events:none; }
.glow-red { left:-240px; top:25%; background:var(--red); }
.glow-blue { right:-240px; top:5%; background:var(--blue); }
main { position:relative; width:min(1120px, calc(100% - 40px)); margin:0 auto; padding:72px 0 34px; }
.hero { max-width:790px; margin-bottom:68px; }
.eyebrow { display:flex; align-items:center; gap:9px; color:#87a99a; font-size:10px; font-weight:800; letter-spacing:.2em; }
.eyebrow i,.network-status i { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 12px var(--green); }
h1 { margin:18px 0 12px; font-size:clamp(48px,8vw,92px); line-height:.88; letter-spacing:-.055em; }
h1 span { color:transparent; -webkit-text-stroke:1px rgba(119,242,176,.8); text-shadow:0 0 40px rgba(119,242,176,.08); }
.hero > p { max-width:670px; margin:0; color:#82988f; font-size:15px; line-height:1.75; }
.network-status { display:flex; align-items:center; gap:10px; width:max-content; margin-top:24px; padding:9px 10px 9px 13px; border:1px solid var(--line); background:rgba(2,12,9,.62); color:#9bb0a7; font-size:10px; letter-spacing:.08em; }
.network-status.offline i { background:var(--red); box-shadow:0 0 12px var(--red); }
#refresh { margin-left:8px; padding:6px 9px; border:1px solid rgba(119,242,176,.22); color:var(--green); background:rgba(119,242,176,.04); font-size:8px; font-weight:900; letter-spacing:.12em; cursor:pointer; }
#refresh:disabled { opacity:.45; cursor:wait; }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:18px; }
.section-head span { color:var(--green); font-size:9px; font-weight:800; letter-spacing:.2em; }
.section-head h2 { margin:7px 0 0; font-size:25px; letter-spacing:-.025em; }
.section-head small { color:#61766d; font-size:9px; letter-spacing:.08em; }
.browser-toolbar { display:flex; align-items:flex-end; gap:12px; margin-bottom:10px; padding:14px; border:1px solid var(--line); background:rgba(4,15,12,.72); }
.filter-group { display:flex; flex:1 1 220px; flex-direction:column; gap:7px; }
.filter-group label { color:#6f897e; font-size:8px; font-weight:900; letter-spacing:.16em; }
.filter-group select { width:100%; min-height:39px; padding:0 34px 0 12px; border:1px solid rgba(131,207,175,.18); border-radius:0; color:#d8e7e0; background:#0a1c17; font-size:11px; font-weight:700; color-scheme:dark; cursor:pointer; }
.filter-group select:focus-visible,.reset-filters:focus-visible,.empty-state button:focus-visible,.join:focus-visible,#refresh:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
.reset-filters { min-height:39px; padding:0 15px; border:1px solid rgba(119,242,176,.22); color:var(--green); background:rgba(119,242,176,.04); font-size:8px; font-weight:900; letter-spacing:.12em; cursor:pointer; }
.reset-filters:disabled { opacity:.38; cursor:default; }
.results-summary { min-height:17px; margin:0 0 12px; color:#6c8279; font-size:9px; letter-spacing:.08em; }
.server-list { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
.server-list-head,.server-row { display:grid; grid-template-columns:minmax(170px,1.5fr) minmax(125px,.9fr) 105px 92px 130px 180px; align-items:center; gap:16px; }
.server-list-head { padding:0 17px 8px; color:#536a60; font-size:8px; font-weight:900; letter-spacing:.14em; }
.server-row { --accent:var(--green); position:relative; min-height:72px; padding:12px 16px; border:1px solid var(--line); background:rgba(6,22,17,.86); overflow:hidden; }
.server-row::before { content:""; position:absolute; inset:0 auto 0 0; width:2px; background:var(--accent); box-shadow:0 0 16px var(--accent); }
.server-row.offline { opacity:.66; --accent:#66736e; }
.server-row.full,.server-row.ending { --accent:var(--gold); }
.server-row h3 { margin:4px 0 0; overflow:hidden; font-size:15px; line-height:1.15; text-overflow:ellipsis; white-space:nowrap; }
.server-row .mode-badge { justify-self:start; }
.players strong,.match span,.match strong { display:block; }
.players strong,.match strong { font-size:13px; font-variant-numeric:tabular-nums; }
.match span { margin-bottom:4px; color:#61776e; font-size:7px; letter-spacing:.1em; }
.server-row .capacity { max-width:78px; margin-top:6px; }
.server-row .join { min-height:38px; }
.server-identity { min-width:0; }
.server-number { color:#526860; font-size:9px; font-weight:900; letter-spacing:.18em; }
.mode-badge { padding:5px 7px; border:1px solid currentColor; color:var(--green); background:rgba(119,242,176,.04); font-size:7px; font-weight:950; letter-spacing:.1em; white-space:nowrap; }
.mode-badge.capture { color:#62c9ff; background:rgba(66,165,255,.06); }
.mode-badge.elimination { color:#ffb56b; background:rgba(255,181,107,.05); }
.state { display:flex; align-items:center; gap:7px; color:var(--green); font-size:8px; font-weight:900; letter-spacing:.13em; }
.state i { width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 9px currentColor; }
.full .state { color:var(--gold); }
.ending .state { color:var(--gold); }
.offline .state { color:#788680; }
.capacity { display:block; width:100%; height:3px; margin-top:8px; border:0; background:#14251f; overflow:hidden; appearance:none; }
.capacity::-webkit-progress-bar { background:#14251f; }
.capacity::-webkit-progress-value { background:var(--accent,var(--green)); }
.capacity::-moz-progress-bar { background:var(--accent,var(--green)); }
.join { display:flex; align-items:center; justify-content:space-between; width:100%; padding:11px 13px; border:1px solid rgba(119,242,176,.28); color:#07130f; background:var(--green); text-decoration:none; font-size:9px; font-weight:950; letter-spacing:.15em; transition:transform .15s,box-shadow .15s; }
.join:hover { transform:translateY(-1px); box-shadow:0 8px 25px rgba(119,242,176,.16); }
.join.disabled { pointer-events:none; border-color:rgba(140,155,149,.18); color:#788680; background:rgba(130,145,139,.08); }
.empty-state { display:flex; align-items:center; gap:18px; min-height:150px; padding:24px; border:1px dashed rgba(131,207,175,.22); background:rgba(4,15,12,.55); }
.empty-symbol { display:grid; flex:0 0 46px; width:46px; height:46px; place-items:center; border:1px solid rgba(119,242,176,.18); color:#658077; font-size:22px; }
.empty-state h3 { margin:0 0 6px; font-size:17px; }
.empty-state p { margin:0; color:#6c8279; font-size:11px; }
.empty-state button { margin-left:auto; min-height:36px; padding:0 13px; border:1px solid rgba(119,242,176,.28); color:var(--green); background:rgba(119,242,176,.05); font-size:8px; font-weight:900; letter-spacing:.12em; cursor:pointer; }
.skeleton { animation:pulse 1.2s ease-in-out infinite alternate; }
@keyframes pulse { to { opacity:.45; } }
footer { display:flex; justify-content:space-between; gap:20px; margin-top:35px; padding-top:18px; border-top:1px solid var(--line); color:#50655d; font-size:8px; letter-spacing:.12em; }
@media (max-width:720px) {
  main { width:min(100% - 24px,560px); padding-top:42px; }
  .hero { margin-bottom:45px; }
  .browser-toolbar { align-items:stretch; flex-direction:column; }
  .filter-group { flex-basis:auto; }
  .server-list-head { display:none; }
  .server-row { grid-template-columns:1fr 1fr; gap:12px 16px; padding:16px; }
  .server-row .server-identity,.server-row .join { grid-column:1 / -1; }
  .server-row .mode-badge,.server-row .state { justify-self:start; }
  .empty-state { align-items:flex-start; flex-wrap:wrap; }
  .empty-state button { width:100%; margin-left:0; }
  .section-head { align-items:flex-start; gap:12px; flex-direction:column; }
  footer { flex-direction:column; }
}
@media (min-width:721px) and (max-width:1020px) {
  .server-list-head { display:none; }
  .server-row { grid-template-columns:minmax(180px,1.5fr) 135px 105px 90px 120px; }
  .server-row .join { grid-column:1 / -1; min-height:34px; }
}
@media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; } }