:root{ --black:#0a0a0b; --bone:#ede7da; --orange:#ff4d00; --cyan:#5febf7; --line:rgba(237,231,218,.2) }
*{ box-sizing:border-box }
body{ min-height:100vh; margin:0; background:var(--black); color:var(--bone); font-family:'Space Mono',monospace }
.multi{ width:min(1120px,calc(100% - 32px)); margin:auto; padding:28px 0 70px }
header{ display:flex; justify-content:space-between; padding-bottom:18px; border-bottom:1px solid var(--line); letter-spacing:.18em; font-size:12px }
header a{ color:var(--orange); text-decoration:none; font-weight:700 }
.hero{ padding:clamp(38px,8vw,90px) 0 34px }
.kicker,#state{ color:rgba(237,231,218,.58); font-size:12px; letter-spacing:.22em }
h1{ margin:.25em 0; font:900 clamp(44px,9vw,112px)/.86 Arial Black,sans-serif; letter-spacing:-.05em }
h1 em{ color:var(--orange); font-style:normal }
.servers{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:12px }
.server{ display:grid; grid-template-columns:1fr auto; gap:10px; min-height:124px; padding:18px; border:1px solid var(--line); border-left:4px solid var(--cyan); color:var(--bone); text-decoration:none; background:rgba(255,255,255,.025) }
.server:hover{ border-color:var(--orange); border-left-color:var(--orange) }
.game{ color:var(--cyan); font-size:11px; letter-spacing:.2em }
.code{ font:900 28px Arial Black,sans-serif; letter-spacing:.18em }
.players{ grid-column:1/-1; color:rgba(237,231,218,.58); font-size:12px }
.create{ margin-top:34px; padding-top:24px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:center; gap:10px }
.create h2{ width:100%; font:900 18px Arial Black,sans-serif }
.create a,.create button{ border:1px solid var(--line); background:none; color:var(--bone); padding:12px 16px; text-decoration:none; font:700 11px inherit; letter-spacing:.13em; cursor:pointer }
.create a:hover,.create button:hover{ border-color:var(--orange); color:var(--orange) }
.empty{ grid-column:1/-1; padding:30px; border:1px dashed var(--line); color:rgba(237,231,218,.58) }