/* Twenty-one colours, each with a job, and an elevation ramp that has to stay distinct:
   bg < sunken < surface < surface-2 < surface-3. The stylesheet this replaced had 233
   near-identical hexes, which is exactly what makes a site look assembled rather than
   designed. Spacing is a 4px scale. Type is a fixed scale. Radii are 3px, 6px or round. */
@font-face{font-family:Barlow;src:url('/assets/barlow-400.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Barlow;src:url('/assets/barlow-600.woff2') format('woff2');font-style:normal;font-weight:600 900;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('/assets/barlow-condensed-700.woff2') format('woff2');font-style:normal;font-weight:600 900;font-display:swap}
:root{--bg:#090f19;--sunken:#0b1422;--surface:#101c2c;--surface-2:#16283e;--surface-3:#1d3a5c;--rule:#22344a;--rule-2:#2e4661;--rule-3:#3f5f83;--rule-4:#6d93b8;--text:#edf3fc;--text-2:#c9d8ec;--text-3:#a8bad0;--text-4:#8a9fb8;--text-5:#718aa5;--accent:#81c8ff;--accent-2:#addaff;--accent-3:#4a86b8;--accent-ink:#081c30;--live:#55e0a2;--warn:#e08a6c;--twitch:#a990ff;--muted:var(--text-3);--line:var(--rule-2);--heading:'Barlow Condensed','Arial Narrow',Impact,sans-serif;--body:Barlow,Arial,sans-serif;--wrap:1280px;--ease:cubic-bezier(.2,.7,.3,1);color-scheme:dark;font-family:var(--body);color:var(--text);background:var(--bg);font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:32px}body{margin:0;min-width:0}a{color:inherit;text-decoration:none}button,input{font:inherit}button{color:inherit;cursor:pointer;border:0}button:disabled{cursor:default;opacity:.55}button,a,summary{touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:5px}img{max-width:100%;display:block}svg{width:22px;height:22px;flex-shrink:0}h1,h2,h3,h4,p{margin:0}h1,h2,h3{font-family:var(--heading);font-weight:700}p{line-height:1.65}h2{font-size:clamp(2.7rem,4.5vw,4rem);line-height:1.04;letter-spacing:-.01em}::selection{background:var(--accent);color:var(--bg)}[hidden]{display:none!important}.wrap{width:calc(100% - 96px);max-width:var(--wrap);margin-inline:auto}.skip-link{position:fixed;top:10px;left:10px;z-index:100;background:var(--accent);color:var(--bg);padding:12px 20px;transform:translateY(-150%)}.skip-link:focus{transform:none}.text-link{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-size:0.9375rem;font-weight:600;color:var(--accent);padding:8px 0;background:none;border-bottom:1px solid transparent;line-height:1.5}.text-link:hover{border-color:var(--accent)}
.site-header{position:relative;z-index:20;border-bottom:1px solid var(--line);background:var(--bg)}.header-inner{min-height:94px;display:flex;flex-wrap:wrap;row-gap:4px;align-items:center;justify-content:space-between;gap:24px}.brand{display:inline-flex;flex-shrink:0}.logo-frame{display:block;position:relative;width:148px;height:88px;overflow:hidden}.site-logo{position:absolute;width:148px;height:148px;max-width:none;left:50%;top:50%;transform:translate(-50%,-47%);object-fit:contain}.desktop-nav{display:flex;align-items:center;gap:24px;font-size:0.9375rem;font-weight:600;color:var(--text-3)}.desktop-nav a{padding:16px 0;white-space:nowrap}.desktop-nav a:hover,.desktop-nav a[aria-current=page]{color:var(--accent)}.header-actions{display:flex;align-items:center;gap:16px}.steam-login{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:12px 12px;font-size:0.875rem;font-weight:600;color:var(--text-2);white-space:nowrap;border:1px solid var(--rule-2);border-radius:3px;transition:border-color .18s,color .18s,background .18s}.steam-login svg{width:17px;height:17px}.steam-login:hover{color:var(--text);border-color:var(--rule-4);background:var(--surface-2)}.steam-login.is-signed-in{color:var(--accent);border-color:var(--rule-3)}.discord-header{display:none}.button{display:inline-flex;justify-content:center;align-items:center;gap:24px;min-height:54px;padding:16px 24px;font-size:1rem;font-weight:600;line-height:1.4;border:1px solid transparent;border-radius:3px;transition:background .18s,border-color .18s}.button>span{font-size:1.5rem;line-height:1;font-weight:400}.button-primary{background:var(--accent);color:var(--accent-ink)}.button-primary:hover{background:var(--accent-2)}.button-outline{background:#101c2caa;border-color:#5c7a9c;color:var(--text)}.button-outline:hover{background:var(--surface-2);border-color:var(--rule-4)}.button-small{min-height:44px;padding:12px 16px;font-size:0.875rem;gap:16px}.button-small>span{font-size:1.25rem}.button-twitch{background:var(--twitch);color:var(--surface);min-height:48px}.button-twitch:hover{background:#c4b1ff}.menu-toggle{display:none;background:none;width:44px;height:44px;padding:8px;align-items:center;justify-content:center;flex-direction:column;gap:8px}.menu-toggle>span{height:0;width:24px;border-top:2px solid var(--text)}.menu-toggle[aria-expanded=true]>span:first-child{transform:translateY(4.5px) rotate(45deg)}.menu-toggle[aria-expanded=true]>span:last-child{transform:translateY(-4.5px) rotate(-45deg)}.mobile-nav{display:none;padding:12px 24px 24px;position:absolute;top:100%;width:100%;background:var(--surface);border-bottom:1px solid var(--line)}.mobile-nav a,.mobile-nav button{display:block;font-size:1rem;padding:16px 0;background:none;width:100%;text-align:left;border-bottom:1px solid var(--line)}
.hero{isolation:isolate;position:relative;min-height:650px;overflow:hidden;background:var(--surface)}.hero-image{position:absolute;inset:0;z-index:-4;background:url('/assets/city-life.webp') center 46%/cover;filter:grayscale(.45);opacity:.24}.hero-operators{position:absolute;z-index:-3;right:clamp(-150px,-2vw,0px);top:-15px;width:min(77vw,1100px);height:calc(100% + 125px);max-width:none;object-fit:contain;object-position:center bottom;filter:saturate(.4) contrast(1.06) brightness(1.16)}.hero-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,var(--sunken) 0%,#0b1422ea 22%,#0b142275 47%,#0b142210 75%),linear-gradient(0deg,var(--bg) 0%,#090f1900 37%)}.hero-content{position:relative;min-height:650px;display:flex;align-items:center;padding-block:64px 112px}.hero-copy{position:relative;z-index:1;width:740px;max-width:72%}.eyebrow{display:flex;align-items:center;gap:16px;margin-bottom:24px;font-size:0.875rem;font-weight:600}.mini-label{color:var(--accent);font-size:0.8125rem;letter-spacing:.11em;border:1px solid var(--text-5);padding:4px 8px}.development{color:var(--text-3);font-weight:400}.development>span:first-child{display:none}.hero h1{font-size:clamp(5.25rem,8.1vw,7.75rem);line-height:.95;letter-spacing:-.014em;font-weight:700;overflow-wrap:anywhere}.hero h1 span{color:var(--accent)}.hero-description{margin-top:24px;font-size:1.125rem;line-height:1.65;color:#b7c9e0;max-width:460px}.hero-actions{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}.hero-note{margin-top:16px;font-size:0.875rem;color:var(--text-4)}.hero-stamp{position:absolute;right:0;bottom:102px;display:flex;flex-direction:column;gap:8px;text-align:right;letter-spacing:.12em;font-size:0.875rem;font-weight:600;color:var(--text-2)}.hero-stamp span{font-size:0.75rem;color:var(--text-4);letter-spacing:.06em}.hero-bottom{position:absolute;bottom:25px;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:24px;border-top:1px solid #3f5f8355;padding-top:20px;font-size:0.75rem;letter-spacing:.09em;color:var(--text-4)}.hero-bottom>span{display:flex;align-items:center;gap:8px}.cross{font-size:1.5rem;color:var(--accent)}.hero-bottom>a{display:flex;align-items:center;gap:16px;min-height:44px;padding-left:12px}.hero-bottom>a span{font-size:1.25rem;color:var(--accent)}
.section-space{padding-block:96px}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:48px;margin-bottom:40px}.section-kicker{font-size:0.8125rem;line-height:1.5;letter-spacing:.1em;font-weight:600;margin-bottom:16px;color:var(--accent);display:flex;align-items:center;gap:16px}.section-kicker>span{color:var(--text-4)}.section-kicker>span:after{content:'/';margin-left:12px;color:#566b86}.muted-heading{color:var(--text-4)}.section-intro{font-size:1rem;color:var(--muted);max-width:365px;padding-bottom:4px}.city-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:16px}.city-card{display:flex;flex-direction:column;min-height:450px;position:relative;border-radius:6px;isolation:isolate;overflow:hidden;background:var(--surface-2);border:1px solid var(--rule-2)}.city-card>img{position:absolute;inset:0;height:100%;width:100%;object-fit:cover;z-index:-3;filter:saturate(.65)}.city-card-large>img{object-position:60% center}.card-scrim{position:absolute;inset:0;z-index:-2;background:linear-gradient(0deg,var(--sunken) 0%,#0b1422ad 48%,#0b142200 80%,#0b142244 100%)}.card-top{position:relative;margin:20px 20px 96px;display:flex;justify-content:space-between;align-items:center;gap:12px}.card-tag{font-size:0.75rem;letter-spacing:.07em;border:1px solid #c9d8ec4d;padding:4px 8px;background:#0b142277;color:var(--text-2)}.card-index{font-size:0.75rem;color:var(--text-2);white-space:nowrap}.card-content{margin-top:auto;padding:0 24px 32px}.card-category{font-size:0.75rem;font-weight:600;letter-spacing:.08em;color:var(--accent)}.card-content>h3{font-size:2.5rem;line-height:1.01;margin-top:12px}.card-content>p{font-size:1rem;color:var(--text-3);margin-top:16px;line-height:1.55;max-width:30ch}.city-card-ownership{background:linear-gradient(163deg,var(--rule) 0%,var(--surface) 62%);border-color:var(--rule-3)}.city-card-ownership .card-tag{color:var(--text-2);border-color:var(--rule-3);background:transparent}.city-card-ownership .card-index{color:var(--text-4)}.city-card-ownership .card-content{padding-bottom:64px}.ownership-number{font-family:var(--heading);font-size:12rem;color:#81c8ff14;position:absolute;top:26px;right:12px;font-weight:700;z-index:-1;letter-spacing:-.03em}.card-link{position:absolute;bottom:21px;right:23px;font-size:1.5rem;width:40px;height:40px;color:var(--accent);border:1px solid var(--rule-3);border-radius:50%;display:grid;place-items:center;transition:background .18s,border-color .18s,color .18s}.card-link:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.city-footnote{margin-top:12px;display:flex;align-items:center;justify-content:space-between;gap:24px;color:var(--text-4);font-size:0.8125rem;line-height:1.6}.city-footnote a{display:inline-flex;align-items:center;min-height:44px;color:var(--text-2)}.city-footnote a:hover{color:var(--accent)}
/* Server status readout. Everything in here is driven by /api/city, so the panel only ever
   states what the game server has actually reported. */
.city-status{position:relative;border-bottom:1px solid var(--line);background:var(--sunken);overflow:hidden}
.city-status:before{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,#edf3fc05 0 1px,transparent 1px 116px)}
.status-inner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:40px;padding-block:24px 24px}
.status-lead{min-width:0}
.status-lead .section-kicker{margin-bottom:12px;font-size:0.75rem}
.status-headline{display:flex;align-items:center;gap:12px;font-family:var(--heading);font-size:1.75rem;line-height:1.1;letter-spacing:.01em;color:var(--text)}
.status-headline strong{font-weight:700}
.status-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;background:#607590;box-shadow:0 0 0 4px #6075901f}
.city-status[data-status=live] .status-dot{background:var(--live);box-shadow:0 0 0 4px #55e0a230;animation:city-pulse 2.6s ease-out infinite}
.city-status[data-status=quiet] .status-dot{background:var(--accent);box-shadow:0 0 0 4px #81c8ff2b}
.city-status[data-status=offline] .status-dot,.city-status[data-status=unknown] .status-dot{background:var(--warn);box-shadow:0 0 0 4px #e08a6c2b}
@keyframes city-pulse{0%{box-shadow:0 0 0 0 #55e0a266}70%{box-shadow:0 0 0 9px #55e0a200}100%{box-shadow:0 0 0 0 #55e0a200}}
.status-note{margin-top:8px;font-size:0.9375rem;color:var(--muted)}
.status-stamp{margin-top:4px;font-size:0.75rem;letter-spacing:.06em;color:var(--text-5)}
.status-stamp:empty{display:none}
.status-figures{display:flex;margin:0;flex-shrink:0}
.status-figures .figure{padding-left:32px;margin-left:32px;border-left:1px solid var(--rule);min-width:96px}
.status-figures .figure:first-child{border-left:0;margin-left:0;padding-left:0}
.status-figures dt{font-size:0.75rem;letter-spacing:.09em;font-weight:600;color:var(--text-4);text-transform:uppercase}
.status-figures dd{margin:8px 0 0;font-family:var(--heading);font-size:2.5rem;font-weight:700;line-height:1;color:var(--text);font-variant-numeric:tabular-nums}
.status-figures .figure-lead dd{font-size:3rem;color:var(--accent)}
.status-figures .figure-map dd{font-family:var(--body);font-size:1.0625rem;font-weight:600;padding-top:12px;overflow-wrap:anywhere}
.status-figures dd .is-blank{color:var(--rule-3)}
.status-figures .figure-lead dd .is-blank{color:var(--rule-3)}
.city-totals{position:relative;border-top:1px solid var(--surface-2);padding-block:16px 20px}
.totals-label{font-size:0.75rem;letter-spacing:.11em;font-weight:600;color:var(--text-5);margin-bottom:12px}
.totals-row{display:flex;flex-wrap:wrap;gap:8px 48px;margin:0}
.total-cell{display:flex;align-items:baseline;gap:8px}.total-cell dd{order:-1}
.total-cell dd{margin:0;font-family:var(--heading);font-size:1.5rem;font-weight:700;color:var(--text);line-height:1;font-variant-numeric:tabular-nums}
.total-cell dt{font-size:0.8125rem;color:var(--text-4);letter-spacing:.03em}
@media(max-width:1150px){.status-inner{gap:24px}.status-figures .figure{padding-left:24px;margin-left:24px;min-width:82px}.status-figures .figure-map{display:none}.totals-row{gap:8px 32px}}
@media(max-width:850px){.status-inner{display:block;padding-block:24px 20px}.status-figures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:20px}.status-figures .figure{min-width:0}.status-figures .figure-map{display:block}.status-figures dd{font-size:2rem}.status-figures .figure-lead dd{font-size:2.5rem}}
@media(max-width:600px){.status-headline{font-size:1.5rem}.status-figures{grid-template-columns:1fr 1fr;gap:20px 0;margin-top:20px}.status-figures .figure{padding-left:20px;margin-left:20px}.status-figures .figure:nth-child(odd){border-left:0;margin-left:0;padding-left:0}.status-figures .figure-map{grid-column:1/-1;border-left:0;margin-left:0;padding-left:0}.status-figures .figure-map dd{padding-top:8px}.totals-row{gap:12px 24px}.total-cell dd{font-size:1.25rem}.total-cell dt{font-size:0.75rem}}
.live-section{padding-block:48px 0}.live-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:24px}.live-heading .section-kicker{margin-bottom:8px;font-size:0.75rem}.live-heading h2{display:flex;align-items:center;gap:16px;font-size:2.5rem;line-height:1.1}.live-count{font-family:var(--body);font-size:0.875rem;color:var(--accent);padding:2px 8px;background:var(--rule);border:1px solid var(--rule-3);border-radius:3px}.live-heading>.text-link{font-size:0.875rem}.streams-state{display:flex;align-items:center;gap:24px;padding:24px 32px;border:1px solid var(--line);border-radius:6px;background:var(--surface);min-height:126px}.broadcast-icon{height:52px;width:52px;display:grid;place-items:center;color:var(--accent);background:var(--rule);border:1px solid var(--rule-2);border-radius:3px;flex-shrink:0}.broadcast-icon svg{width:28px;height:28px}.streams-state h3{font-family:var(--body);font-size:1.0625rem;font-weight:600}.streams-state p{color:var(--muted);font-size:0.9375rem;margin-top:4px}.streams-state>.text-link{margin-left:auto;flex-shrink:0}.streams-caption{font-size:0.8125rem;color:var(--text-4);margin-top:16px}.streams-caption span{color:var(--text-3)}.streams-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.stream-card{min-width:0}.stream-thumb{width:100%;padding:0;display:block;position:relative;overflow:hidden;background:var(--surface-2);border:1px solid var(--rule-2);border-radius:6px;aspect-ratio:16/9}.stream-thumb>img{width:100%;height:100%;object-fit:cover}.stream-thumb:hover{border-color:var(--accent)}.stream-live{position:absolute;top:12px;left:12px;background:#cf343d;color:white;padding:4px 8px;border-radius:3px;font-size:0.75rem;font-weight:600;letter-spacing:.07em}.stream-viewers{position:absolute;bottom:12px;left:12px;font-size:0.75rem;padding:2px 8px;background:#090f19e6;border-radius:3px;color:var(--text)}.stream-play{position:absolute;inset:0;display:grid;place-items:center;color:var(--text);font-size:2.5rem;background:#0b142233;opacity:0;transition:opacity .2s}.stream-thumb:hover .stream-play,.stream-thumb:focus-visible .stream-play,.stream-thumb.without-preview .stream-play{opacity:1}.stream-detail{padding-top:12px;display:grid;gap:4px}.stream-name{font-size:1.0625rem;font-weight:600;color:var(--text);overflow-wrap:anywhere}.stream-name:hover{color:var(--accent)}.stream-title{font-size:0.9375rem;color:var(--text-3);line-height:1.5;overflow-wrap:anywhere}.stream-server{font-size:0.8125rem;color:var(--accent);margin-top:2px}
.join-section{padding-block:80px;border-block:1px solid var(--line);background:var(--surface)}.join-layout{display:grid;grid-template-columns:1fr 1.15fr;gap:112px}.join-intro h2>span{color:var(--accent)}.join-intro>p:not(.section-kicker){margin-top:20px;font-size:1rem;color:var(--muted)}.join-intro>.button{margin-top:24px}.join-steps{list-style:none;padding:0;margin:4px 0 0;display:flex;flex-direction:column}.join-steps>li{display:flex;gap:24px;padding:24px 0;border-bottom:1px solid var(--line)}.join-steps>li:first-child{padding-top:0}.join-steps>li:last-child{border-bottom:0;padding-bottom:0}.step-number{font-family:var(--heading);font-size:1.5rem;font-weight:700;color:var(--rule-4);line-height:1.1;padding-top:4px}.join-steps h3{font-family:var(--body);font-weight:600;font-size:1.125rem;line-height:1.4}.join-steps p{margin-top:8px;font-size:1rem;color:var(--muted)}.join-steps a{display:inline-flex;gap:16px;align-items:center;min-height:44px;font-size:0.9375rem;font-weight:600;color:var(--accent);margin-top:4px;line-height:1.6}.join-steps .text-link{margin-top:8px}.pending-label{display:inline-flex;margin-top:16px;font-size:0.75rem;font-weight:600;letter-spacing:.04em;color:var(--text-3);padding:4px 8px;border:1px solid var(--rule-2);border-radius:3px;line-height:1.5}.faq-section{display:grid;grid-template-columns:1fr 1.15fr;gap:112px}.faq-intro>p:last-child{margin-top:20px;color:var(--muted);font-size:1rem}.faq-list details{border-bottom:1px solid var(--line)}.faq-list details:first-child{border-top:1px solid var(--line)}.faq-list summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 0;cursor:pointer;font-size:1.0625rem;font-weight:600;line-height:1.4}.faq-list summary::-webkit-details-marker{display:none}.faq-toggle{position:relative;display:block;flex-shrink:0;width:16px;height:16px}.faq-toggle:before,.faq-toggle:after{content:'';position:absolute;height:0;border-top:1px solid var(--muted);width:13px;top:7px;left:1px}.faq-toggle:after{transform:rotate(90deg)}details[open] .faq-toggle:after{transform:rotate(0)}details[open] summary{color:var(--accent)}.faq-answer{padding:0 32px 24px 0;color:var(--muted);font-size:1rem}.faq-answer .text-link{margin-top:12px}.closing-section{position:relative;isolation:isolate;overflow:hidden;border-top:1px solid var(--line);background:var(--sunken);padding-block:80px}.closing-section:before{content:'';position:absolute;inset:0;z-index:-2;background:url('/assets/city-crew.webp') center 40%/cover;filter:grayscale(.7);opacity:.14}.closing-section:after{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 150% at 12% 50%,#1d3a5c99 0%,#0b142200 62%),linear-gradient(90deg,var(--sunken) 8%,#0b142288 55%,var(--sunken) 100%)}.closing-inner{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}.closing-inner .section-kicker{margin-bottom:12px}.closing-inner h2{font-size:clamp(2.9rem,5.2vw,4.6rem);line-height:.98}.closing-inner>div>p:last-child{margin-top:16px;color:var(--muted);font-size:1rem;max-width:42ch}.closing-actions{display:flex;gap:12px;flex-shrink:0;padding-bottom:4px}.site-footer{padding-top:32px;padding-bottom:24px}.footer-main{display:flex;align-items:center;gap:32px;padding-bottom:24px;border-bottom:1px solid var(--line)}.footer-main>p{font-size:0.9375rem;color:var(--text-3)}.back-top{display:flex;align-items:center;min-height:44px;gap:16px;font-size:0.75rem;letter-spacing:.07em;color:var(--text-3);margin-left:auto}.back-top>span{font-size:1.5rem;color:var(--accent)}.footer-bottom{padding-top:20px;display:flex;align-items:flex-start;gap:32px;font-size:0.8125rem;line-height:1.6;color:var(--text-4)}.footer-domain{margin-left:auto;letter-spacing:.08em}.mobile-only{display:none}
.join-dialog,.stream-dialog{margin:auto;background:var(--surface);color:var(--text);border:1px solid var(--rule-3);border-radius:6px;width:min(570px,calc(100% - 32px));max-height:calc(100svh - 40px);padding:0;box-shadow:0 30px 100px #0009;overflow:auto}.join-dialog::backdrop,.stream-dialog::backdrop{background:#090f19dc;backdrop-filter:blur(5px)}.dialog-inner{padding:40px}.dialog-close{position:absolute;right:13px;top:13px;background:transparent;width:44px;height:44px;font-size:2rem;color:var(--text-3);line-height:1}.dialog-close:hover{color:var(--accent)}.dialog-inner .section-kicker{margin-bottom:20px}.dialog-inner h2{font-size:3.5rem;line-height:1}.dialog-inner>p:not(.section-kicker):not(.discord-pending):not(.copy-feedback){color:var(--muted);font-size:1rem;margin-top:20px}.connection-panel{margin-top:24px;border:1px solid var(--rule-2);border-radius:3px;padding:20px;background:var(--sunken)}.connection-label{font-size:0.75rem;color:var(--accent);letter-spacing:.07em;display:block;margin-bottom:12px}.connection-panel>strong{font-size:1.125rem;font-weight:600;display:block}.connection-panel>p{font-size:0.9375rem;color:var(--muted);margin-top:8px}.discord-pending{font-size:0.875rem;display:flex;gap:16px;align-items:flex-start;color:var(--muted);margin-top:20px}.discord-pending strong{font-size:1rem;color:var(--text-2);font-weight:600}.pending-mark{font-size:1.5rem;color:var(--accent)}.dialog-discord{margin-top:20px;width:100%}.copy-feedback{font-size:0.9375rem;color:var(--accent);margin-top:16px}.copy-feedback:empty{margin:0}#server-address{display:block;user-select:all;overflow-wrap:anywhere;color:var(--accent);font-size:1.125rem;margin-top:16px}.connection-actions{display:flex;gap:8px;margin-top:20px}.connection-actions .button{font-size:0.875rem;padding:12px;min-height:45px;flex:1;gap:8px}.connection-help{font-size:0.875rem;color:var(--muted);margin-top:16px}.connection-help code{color:var(--text);word-break:break-word}body.dialog-open{overflow:hidden}.stream-dialog{width:min(960px,calc(100% - 32px))}.stream-dialog-heading{padding:24px 24px;position:relative}.stream-dialog-heading .section-kicker{font-size:0.75rem;margin-bottom:4px}.stream-dialog-heading h2{font-family:var(--body);font-size:1.25rem;line-height:1.4;overflow-wrap:anywhere;padding-right:32px}.stream-dialog-footer{padding:20px 24px;display:flex;align-items:center;gap:20px;justify-content:space-between}.stream-dialog-footer p{font-size:0.875rem;color:var(--muted)}.stream-dialog-footer .text-link{flex-shrink:0;font-size:0.875rem}#stream-player{background:var(--bg)}#stream-player iframe{border:0;width:100%;min-height:300px;aspect-ratio:16/9;display:block}.stream-mobile-note{padding:32px 24px;font-size:1rem;color:var(--text-3);line-height:1.6}
@media(min-width:1600px){.hero-operators{right:calc((100vw - 1550px)/2);width:1100px}}
@media(max-width:1150px){.wrap{width:calc(100% - 64px)}.desktop-nav{gap:20px}.header-actions{gap:16px}.header-actions .steam-login{padding-inline:12px;gap:0}.header-actions .steam-login [data-account-label]{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.hero-operators{width:940px;right:-230px}.hero-copy{max-width:80%}.hero-stamp{display:none}.city-grid{gap:12px}.card-content{padding-inline:20px}.card-top{margin-inline:20px}.card-index{display:none}.card-content h3{font-size:2.5rem}.join-layout,.faq-section{gap:56px}.footer-domain{display:none}}
@media(max-width:850px){.mobile-nav{display:block}.header-actions .steam-login{display:none}.header-inner{min-height:82px}.logo-frame{height:78px;width:133px}.site-logo{width:133px;height:133px}.desktop-nav{display:none}.menu-toggle{display:flex}.hero,.hero-content{min-height:650px}.hero h1{font-size:5.65rem}.hero-copy{max-width:100%}.hero-operators{right:-225px;width:940px;opacity:.75}.hero-shade{background:linear-gradient(90deg,#0b1422fa 0%,#0b1422bd 45%,#0b142244 95%),linear-gradient(0deg,var(--bg) 0%,#090f1900 42%)}.hero-bottom>span{max-width:65%;line-height:1.5}.live-heading h2{font-size:2.25rem}.streams-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.section-space{padding-block:64px}.section-heading{gap:24px}.section-intro{max-width:290px}.city-grid{grid-template-columns:1fr 1fr}.city-card{min-height:430px}.city-card-ownership{grid-column:1/-1;min-height:300px}.city-card-ownership .card-top{margin-bottom:24px}.city-card-ownership .card-content{display:grid;grid-template-columns:1fr 1fr;gap:8px 32px;padding-right:80px;padding-bottom:32px}.city-card-ownership .card-category{grid-column:1/-1}.city-card-ownership .card-content p{align-self:end;margin-top:0}.city-footnote{flex-direction:column;gap:8px}.join-layout,.faq-section{gap:40px;grid-template-columns:1fr 1.15fr}.join-section{padding-block:64px}.closing-inner h2{font-size:3rem}.footer-main>p{display:none}}
@media(max-width:600px){.wrap{width:calc(100% - 40px)}.header-inner{min-height:77px;gap:12px}.logo-frame{width:118px;height:73px}.site-logo{width:122px;height:122px}.header-actions{gap:4px}.button-small{padding:12px 12px;gap:8px}.menu-toggle{width:38px;padding-inline:4px}.hero,.hero-content{min-height:640px}.hero-content{padding-top:48px;padding-bottom:96px;align-items:flex-start}.hero-copy{width:100%}.hero h1{font-size:clamp(3.5rem,13.8vw,5.4rem);line-height:1}.eyebrow{gap:12px;margin-bottom:24px;font-size:0.8125rem}.mini-label{font-size:0.75rem}.hero-operators{right:-294px;top:18px;width:830px;height:720px;opacity:.6}.hero-shade{background:linear-gradient(90deg,#0b1422f0 0%,#0b1422c0 35%,#0b142233 100%),linear-gradient(0deg,var(--bg) 0%,#090f1966 38%,#090f1900 70%)}.hero-description{font-size:1.0625rem;max-width:290px;margin-top:24px}.desktop-break{display:none}.hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:24px}.hero-actions .button{padding:12px 12px;font-size:0.875rem;gap:8px;min-height:51px}.hero-note{font-size:0.8125rem;max-width:265px}.hero-bottom{bottom:21px;padding-top:16px;letter-spacing:.055em}.hero-bottom>span{max-width:80%}.hero-bottom>a{font-size:0;gap:0}.hero-bottom>a>span{font-size:1.5rem}.live-section{padding-top:32px}.live-heading{align-items:flex-start;gap:16px;flex-direction:column;margin-bottom:20px}.live-heading h2{font-size:2.25rem}.live-heading>.text-link{font-size:0.875rem;padding:0}.streams-state{padding:24px 20px;gap:16px;align-items:flex-start;flex-wrap:wrap}.broadcast-icon{width:43px;height:43px}.streams-state>div{flex:1;min-width:0;flex-basis:180px}.streams-state h3{font-size:1rem}.streams-state p{font-size:0.9375rem}.streams-state>.text-link{margin:0}.streams-caption{font-size:0.8125rem;line-height:1.6}.streams-caption span{display:block;margin-left:0}.streams-grid{grid-template-columns:1fr;gap:24px}.section-space{padding-block:56px}.section-heading{display:block;margin-bottom:24px}.section-intro{max-width:none;margin-top:20px}.section-kicker{margin-bottom:16px;font-size:0.8125rem}h2{font-size:3rem}.city-grid{grid-template-columns:1fr;gap:16px}.city-card{min-height:430px}.card-content{padding:0 24px 32px}.card-content h3{font-size:3rem}.card-content p{max-width:33ch}.card-top{margin:24px 24px 112px}.card-index{display:block}.city-card-ownership{grid-column:auto;min-height:370px}.city-card-ownership .card-content{display:block;padding:0 56px 56px 24px}.city-card-ownership .card-content p{margin-top:16px}.ownership-number{right:6px;top:37px;font-size:15rem}.city-footnote{font-size:0.8125rem}.join-layout,.faq-section{grid-template-columns:1fr;gap:32px}.join-section{padding-block:56px}.join-intro h2{font-size:3.5rem}.join-steps>li{gap:20px}.faq-intro h2{font-size:3rem}.faq-list summary{font-size:1.0625rem}.faq-answer{padding-right:16px}.closing-section{padding-block:56px}.closing-inner{display:block}.closing-inner h2{font-size:3rem}.closing-actions{display:grid;gap:8px;margin-top:24px}.footer-main{padding-bottom:24px}.footer-bottom{flex-direction:column;gap:12px}.mobile-only{display:block}.dialog-inner{padding:32px 24px 24px}.dialog-inner h2{font-size:3rem}.connection-panel{padding:16px}.connection-actions{flex-wrap:wrap}.stream-dialog-heading{padding:20px}.stream-dialog-footer{display:block;padding:20px 20px}.stream-dialog-footer .text-link{margin-top:12px}}
@media(max-width:360px){.wrap{width:calc(100% - 32px)}.logo-frame{width:96px}.site-logo{width:110px;height:110px}.button-small{font-size:0.8125rem;padding-inline:8px}.header-inner{gap:8px;flex-wrap:nowrap}.hero-actions{grid-template-columns:1fr;width:max-content;max-width:100%}.hero-actions .button{padding:12px;font-size:0.875rem;gap:12px}.hero,.hero-content{min-height:664px}.hero h1{font-size:3.5rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

/* Windows High Contrast and friends force background-color but keep border and outline colours,
   so anything that carried meaning through a fill alone needs a border to survive here. */
@media (forced-colors: active){
  .mini-label,.card-tag,.pending-label,.live-count,.button{border:1px solid currentColor}
  .status-dot{border:3px solid currentColor;background:none}
  .stream-live,.stream-viewers{border:1px solid currentColor}
  .skip-link{border:2px solid currentColor}
}

/* ── The rule device ───────────────────────────────────────────────────────────────────────────
   The site already had a habit worth committing to: a numbered kicker over a condensed heading.
   Making it a real device -- a 2px accent stub that repeats at the same size on every section
   kicker, on each city card, and on the status readout -- ties the page together without adding
   a motif that has nothing to do with anything. Corner ticks were tried here first and read as
   stray marks, so they are gone. */
.section-kicker,.live-heading .section-kicker,.status-lead .section-kicker{position:relative;padding-left:20px}
.section-kicker:before{content:'';position:absolute;left:0;top:.42em;width:12px;height:2px;background:var(--accent)}
.city-card:before{content:'';position:absolute;top:0;left:0;width:40px;height:2px;background:var(--accent-3);z-index:2;
  transition:width .28s var(--ease),background .28s var(--ease)}
.city-card:hover:before{width:96px;background:var(--accent)}
.faq-intro .section-kicker,.join-intro .section-kicker{padding-left:20px}

/* ── Pressed and hover states ──────────────────────────────────────────────────────────────────
   Every control now answers to a press. Without this the whole page feels like a picture of a
   site rather than a site. */
.button{transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),transform .08s var(--ease)}
.button:active,.steam-login:active,.menu-toggle:active,.refresh-button:active,.sign-out:active{transform:translateY(1px)}
.button-primary:active{background:var(--accent-3)}
.text-link{transition:color .18s var(--ease),border-color .18s var(--ease)}
.text-link:active{color:var(--accent-2)}
.desktop-nav a,.mobile-nav a,.mobile-nav button{transition:color .18s var(--ease)}
.desktop-nav a:active,.mobile-nav a:active{color:var(--accent-2)}
.city-card{transition:border-color .22s var(--ease),transform .22s var(--ease)}
.city-card:hover{border-color:var(--rule-4)}
.stream-thumb{transition:border-color .18s var(--ease),transform .18s var(--ease)}
.stream-thumb:active{transform:scale(.995)}
.stream-name,.city-footnote a,.back-top{transition:color .18s var(--ease)}
.faq-list summary{transition:color .18s var(--ease)}
.faq-list summary:active{color:var(--accent-2)}
.card-link:active{transform:translateY(1px)}

/* A press should not animate for anyone who has asked the system to stop moving things. */
@media (prefers-reduced-motion:reduce){
  .button:active,.steam-login:active,.menu-toggle:active,.refresh-button:active,
  .sign-out:active,.card-link:active,.stream-thumb:active{transform:none}
}

/* Five links since Leaderboards joined the nav (2026-09-26): measured, the header wrapped onto a
   second row between 851 and ~1000px. A tighter nav at mid widths keeps it on one line. */
@media(max-width:1150px){.desktop-nav{gap:16px;font-size:0.875rem}.header-inner{gap:16px}}