@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root { --ink:#e8f4f5; --muted:#89a3b1; --navy:#061321; --panel:#0a2131; --line:#254457; --cyan:#3cd6e6; --lime:#7defb2; --amber:#ffc84c; --danger:#ff7f88; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:radial-gradient(circle at 68% -20%,#16455b 0,transparent 42%), #061321; font-family:"Space Grotesk",sans-serif; min-height:100vh; }
body:before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.22; background-image:linear-gradient(30deg, transparent 48%,#2b5b6a 49%,transparent 50%),linear-gradient(150deg,transparent 48%,#2b5b6a 49%,transparent 50%); background-size:128px 74px; mask-image:linear-gradient(#000,transparent 72%); }
.shell { max-width:1320px; margin:auto; padding:24px 32px 64px; position:relative; }.masthead { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); padding-bottom:19px; }.brand { color:var(--cyan); text-decoration:none; font-family:"Barlow Condensed"; font-weight:800; font-size:25px; letter-spacing:.5px; }.brand-mark { font-size:34px; vertical-align:-3px; }.brand i { color:var(--muted); font:500 12px "DM Mono"; letter-spacing:1.2px; margin-left:8px; }.connection,.source-note { color:var(--muted); font:12px "DM Mono"; }.connection span:first-child { display:inline-block; background:var(--amber); width:8px; height:8px; border-radius:50%; margin-right:7px; }.connection.online span:first-child { background:var(--lime); box-shadow:0 0 10px var(--lime); }
.intro { display:flex; justify-content:space-between; gap:60px; padding:58px 0 38px; }.eyebrow { color:var(--cyan); font:500 11px "DM Mono"; letter-spacing:1.4px; margin:0 0 9px; }.intro h1,.lobby-head h2 { font:800 clamp(36px,5vw,70px)/.87 "Barlow Condensed"; letter-spacing:-.6px; text-transform:uppercase; margin:0; }.intro h1 em { color:var(--lime); font-style:normal; }.intro-copy { max-width:360px; color:var(--muted); line-height:1.55; margin:auto 0 4px; }
.rail { display:grid; grid-template-columns:1.05fr 1.55fr 1.1fr; border:1px solid var(--line); background:#071927dd; }.group-form,.group-live,.selection { padding:21px; min-height:166px; }.group-form,.group-live { border-right:1px solid var(--line); }.group-form label,.state-picker { display:block; color:var(--muted); font:10px "DM Mono"; letter-spacing:1px; }.group-form input,.join-line input,select { width:100%; margin:7px 0 12px; padding:11px; color:var(--ink); border:1px solid #315064; background:#0a2435; font:500 14px "Space Grotesk"; outline:none; }.join-line { display:grid; grid-template-columns:1fr auto; gap:8px; }.join-line input { margin:0; text-transform:uppercase; }.primary,.quiet,.select-lobby { border:0; cursor:pointer; font:700 14px "Barlow Condensed"; letter-spacing:.5px; text-transform:uppercase; }.primary { background:var(--lime); color:#062018; padding:11px 18px; }.quiet { color:var(--ink); background:#1d3c50; padding:0 14px; }.hidden { display:none; }.group-live { display:flex; align-items:center; gap:18px; }.group-live strong { font:800 29px "Barlow Condensed"; letter-spacing:2px; }.copy,.text-button { color:var(--cyan); background:none; border:0; padding:0; margin-left:8px; cursor:pointer; font:11px "DM Mono"; }.members { flex:1; display:flex; flex-wrap:wrap; gap:7px; }.member { border:1px solid #315064; padding:6px 8px; font-size:12px; }.member.leader { border-color:var(--lime); }.member small { color:var(--muted); margin-left:4px; }.state-picker { width:120px; }.state-picker select { margin-bottom:0; padding:7px; font-size:12px; }.text-button { color:var(--danger); }.selection { background:linear-gradient(135deg,#102f3f,#0a1d2d); }.selection h3 { margin:0; font:700 24px "Barlow Condensed"; text-transform:uppercase; }.selection p { margin:4px 0; }.empty-selection { color:var(--muted); font-size:14px; }.join-leader { display:inline-block; margin-top:9px; color:#061a20; background:var(--cyan); text-decoration:none; padding:8px 10px; font:700 13px "Barlow Condensed"; text-transform:uppercase; }
.lobby-head { display:flex; justify-content:space-between; align-items:end; margin:48px 0 19px; }.lobby-head h2 { font-size:35px; }.lobby-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }.lobby-card { background:#092033; border:1px solid #24465c; min-width:0; overflow:hidden; position:relative; transition:transform .18s,border-color .18s; }.lobby-card:hover { transform:translateY(-3px); border-color:var(--cyan); }.card-top { height:42px; display:flex; justify-content:space-between; align-items:center; padding:0 13px; }.map-tag,.eta { font:700 13px "Barlow Condensed"; text-transform:uppercase; }.map-tag { color:var(--cyan); }.eta { color:#061a20; background:#74bafa; padding:4px 7px; }.terrain { height:116px; background:linear-gradient(135deg,#bdcca6,#506d77 46%,#0a1d2d 47%,#102d3e); opacity:.9; position:relative; }.terrain:after { content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 0 42%,#0c2330aa 43% 49%,transparent 50% 100%); }.card-body { padding:14px 15px 12px; }.lobby-name { margin:0; font:700 23px "Barlow Condensed"; text-transform:uppercase; }.lobby-meta { margin:2px 0 12px; color:var(--muted); font:11px "DM Mono"; text-transform:uppercase; }.card-body div { display:flex; justify-content:space-between; color:var(--muted); font:11px "DM Mono"; }.players { color:var(--lime); }.select-lobby { width:100%; color:var(--cyan); border-top:1px solid #24465c; padding:11px; background:#071927; }.select-lobby:disabled { color:var(--muted); cursor:not-allowed; }.toast { position:fixed; right:22px; bottom:22px; background:#dffdf0; color:#073323; padding:12px 16px; box-shadow:0 8px 28px #0008; transform:translateY(80px); opacity:0; transition:.25s; font-size:14px; }.toast.show { transform:translateY(0); opacity:1; }
.party-directory { margin-top:52px; border-top:1px solid var(--line); padding-top:22px; }.directory-head { display:flex; justify-content:space-between; align-items:end; margin-bottom:14px; }.directory-head h2 { margin:0; font:700 26px "Barlow Condensed"; text-transform:uppercase; }.party-list { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }.party-card { display:grid; grid-template-columns:1fr auto; gap:5px 12px; align-items:center; padding:15px; border:1px solid #254457; background:#081d2d; }.party-card:hover { border-color:#3c7790; }.party-code { display:inline-block; margin-right:9px; color:var(--cyan); font:500 11px "DM Mono"; letter-spacing:1px; }.party-card strong { font:600 17px "Space Grotesk"; }.party-card p { grid-column:1; margin:0; color:var(--muted); font:11px "DM Mono"; }.party-count { color:var(--lime); font:11px "DM Mono"; }.join-party { grid-column:2; grid-row:1 / span 2; border:1px solid #315064; background:#0e3143; color:var(--ink); padding:8px 10px; cursor:pointer; font:700 13px "Barlow Condensed"; text-transform:uppercase; }.join-party:hover { border-color:var(--cyan); color:var(--cyan); }.directory-empty { margin:0; padding:19px; border:1px dashed #315064; color:var(--muted); font-size:14px; }
@media (max-width:900px) { .rail { grid-template-columns:1fr; }.group-form,.group-live { border-right:0; border-bottom:1px solid var(--line); }.lobby-grid,.party-list { grid-template-columns:repeat(2,1fr); }.group-live { flex-wrap:wrap; }.intro { gap:25px; } } @media (max-width:570px) { .shell { padding:18px; }.intro { display:block; padding:38px 0 29px; }.intro-copy { margin-top:22px; }.lobby-grid,.party-list { grid-template-columns:1fr; }.lobby-head { align-items:start; gap:15px; }.source-note { text-align:right; }.brand i { display:none; } }