:root {
  --ink: #06080d;
  --panel: #0c1119;
  --line: rgba(255, 255, 255, 0.09);
  --muted: #8d98aa;
  --text: #f4f7fb;
  --cyan: #58e5e0;
  --blue: #5b84ff;
  --violet: #a866ff;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--ink); color: var(--text); font-family: Inter, "Segoe UI", Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }

.site-header { position: absolute; z-index: 20; top: 0; left: 50%; width: min(1240px, calc(100% - 48px)); height: 90px; transform: translateX(-50%); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 11px; min-width: 210px; }
.brand-mark { position: relative; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(88,229,224,.45); border-radius: 50%; box-shadow: inset 0 0 18px rgba(88,229,224,.16); }
.brand-mark::before, .brand-mark::after { content: ""; position: absolute; border: 1px solid rgba(88,229,224,.38); border-radius: 50%; transform: rotate(-32deg); }
.brand-mark::before { width: 46px; height: 19px; }
.brand-mark::after { width: 29px; height: 46px; }
.brand-mark i { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); }
.brand strong { display: block; font-size: 18px; line-height: 1; letter-spacing: .18em; }
.brand small { display: block; margin-top: 5px; color: var(--muted); font-size: 8px; letter-spacing: .22em; }
.site-header nav { display: flex; gap: 38px; color: #aeb6c2; font-size: 13px; }
.site-header nav a { transition: color .2s; }
.site-header nav a:hover { color: var(--cyan); }
.header-cta { padding: 12px 18px; border: 1px solid rgba(88,229,224,.36); border-radius: 999px; color: var(--cyan); font-size: 12px; font-weight: 700; letter-spacing: .05em; }

.hero { position: relative; min-height: 780px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 150px max(48px, calc((100vw - 1240px)/2)) 70px; background: radial-gradient(circle at 75% 43%, rgba(83,76,180,.16), transparent 29%), linear-gradient(180deg, #070a11 0%, #080b11 100%); }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(88,229,224,.28), transparent); }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.hero-glow-one { width: 340px; height: 340px; right: 8%; top: 25%; background: rgba(91,132,255,.12); }
.hero-glow-two { width: 260px; height: 260px; right: 27%; bottom: 4%; background: rgba(168,102,255,.09); }
.hero-content { position: relative; z-index: 2; max-width: 610px; }
.eyebrow, .kicker { margin: 0 0 22px; color: var(--cyan); font-size: 11px; font-weight: 700; letter-spacing: .22em; }
.eyebrow { display: flex; align-items: center; gap: 11px; }
.eyebrow span { width: 24px; height: 1px; background: var(--cyan); box-shadow: 0 0 9px var(--cyan); }
.hero h1 { margin: 0; font-size: clamp(66px, 7.1vw, 108px); line-height: .84; letter-spacing: -.072em; font-weight: 680; }
.hero h1 em { color: transparent; font-style: normal; -webkit-text-stroke: 1px rgba(255,255,255,.74); }
.hero-copy { max-width: 510px; margin: 34px 0 0; color: #a0aaba; font-size: 17px; line-height: 1.75; }
.hero-actions { display: flex; gap: 12px; margin-top: 32px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 20px; min-height: 50px; padding: 0 22px; border-radius: 5px; font-size: 12px; font-weight: 720; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--cyan); color: #061012; box-shadow: 0 10px 30px rgba(88,229,224,.14); }
.button-quiet { border: 1px solid var(--line); background: rgba(255,255,255,.025); color: #dbe0e8; }
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #63f2a8; box-shadow: 0 0 10px rgba(99,242,168,.9); }
.server-offline .status-dot { background: #ff6f77 !important; box-shadow: 0 0 10px rgba(255,111,119,.7) !important; }
.server-stale:not(.server-offline) .status-dot { background: #f3c56c !important; box-shadow: 0 0 10px rgba(243,197,108,.7) !important; }
.hero-meta { display: flex; align-items: center; gap: 16px; margin-top: 42px; color: #788395; font-size: 11px; }
.hero-meta b { color: #cbd2dc; font-weight: 600; }
.hero-meta i { width: 3px; height: 3px; border-radius: 50%; background: #485262; }

.orbital { position: relative; z-index: 1; width: min(560px, 46vw); aspect-ratio: 1; justify-self: end; }
.planet { position: absolute; inset: 18%; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 32% 27%, rgba(213,235,255,.82), rgba(94,122,255,.44) 16%, rgba(55,62,132,.7) 35%, #15172d 67%, #080a12 78%); box-shadow: inset -48px -40px 80px rgba(0,0,0,.76), -18px 10px 70px rgba(104,116,255,.2), 22px -18px 90px rgba(88,229,224,.12); }
.planet::before, .planet::after { content: ""; position: absolute; border-radius: 50%; filter: blur(2px); opacity: .6; }
.planet::before { width: 47%; height: 28%; left: 9%; top: 22%; background: linear-gradient(145deg, rgba(119,244,222,.45), rgba(76,102,145,.1)); transform: rotate(-18deg); }
.planet::after { width: 56%; height: 20%; right: -3%; bottom: 23%; background: linear-gradient(145deg, rgba(172,112,255,.32), rgba(76,102,145,.08)); transform: rotate(17deg); }
.planet-light { position: absolute; inset: 6%; border-radius: 50%; border-top: 1px solid rgba(255,255,255,.25); transform: rotate(-28deg); }
.planet-grid { position: absolute; inset: 0; opacity: .14; background: repeating-linear-gradient(6deg, transparent 0 14px, rgba(255,255,255,.2) 15px 16px); }
.orbit { position: absolute; inset: 7%; border: 1px solid rgba(143,162,255,.22); border-radius: 50%; transform: rotate(-32deg) scaleY(.49); }
.orbit-one i { position: absolute; top: 43%; right: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 18px var(--cyan); }
.orbit-two { inset: 0; transform: rotate(45deg) scaleY(.76); border-color: rgba(255,255,255,.07); }
.orbit-two i { position: absolute; top: 4%; left: 28%; width: 5px; height: 5px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 12px var(--violet); }
.floating-tag { position: absolute; padding: 8px 11px; border: 1px solid var(--line); background: rgba(8,11,18,.78); color: #8c98a9; font-family: Consolas, monospace; font-size: 9px; letter-spacing: .12em; backdrop-filter: blur(8px); }
.tag-one { left: 2%; top: 26%; }
.tag-two { right: -2%; bottom: 24%; color: #b8c3cf; }
.tag-two span { display: inline-block; width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background: #63f2a8; }
.tag-two b { font-weight: 500; }

.section { width: min(1160px, calc(100% - 48px)); margin: 0 auto; padding: 108px 0; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 43px; }
.section-heading .kicker { margin-bottom: 12px; }
.section-heading h2, .connect-copy h2, .discord-section h2 { margin: 0; font-size: clamp(36px, 4vw, 54px); letter-spacing: -.055em; line-height: 1.03; }
.refresh-copy { display: flex; align-items: center; gap: 9px; margin: 0; color: var(--muted); font-size: 11px; }
.status-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(290px, .75fr); gap: 18px; }
.server-card, .world-card { border: 1px solid var(--line); background: linear-gradient(145deg, rgba(18,25,37,.86), rgba(9,13,20,.92)); }
.server-card { padding: 28px; }
.server-card-top { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 25px; border-bottom: 1px solid var(--line); }
.server-label { margin: 0 0 7px; color: var(--cyan); font-size: 9px; font-weight: 700; letter-spacing: .19em; }
.server-card h3, .world-card h3 { margin: 0; font-size: 22px; letter-spacing: -.03em; }
.online-pill, .count-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid rgba(99,242,168,.2); border-radius: 3px; background: rgba(99,242,168,.055); color: #72eeac; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.online-pill i { width: 6px; height: 6px; border-radius: 50%; background: #63f2a8; box-shadow: 0 0 9px #63f2a8; }
.online-pill.offline { border-color: rgba(255,111,119,.22); color: #ff8a90; background: rgba(255,111,119,.06); }
.metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 24px 0; background: var(--line); }
.metrics-grid > div { min-width: 0; padding: 10px 18px 14px 0; background: #0c1119; }
.metrics-grid > div:not(:first-child) { padding-left: 18px; }
.metrics-grid small { display: block; margin-bottom: 10px; color: #697589; font-size: 8px; font-weight: 700; letter-spacing: .14em; }
.metrics-grid strong { display: block; font-size: 26px; letter-spacing: -.04em; }
.metrics-grid strong span:not(.metric-main) { color: #697589; font-size: 12px; font-weight: 500; }
.meter { height: 2px; margin-top: 11px; overflow: hidden; background: #27303d; }
.meter i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--blue), var(--cyan)); box-shadow: 0 0 9px var(--cyan); transition: width .45s ease; }
.meter-0 { width: 0 !important; } .meter-5 { width: 5% !important; } .meter-10 { width: 10% !important; } .meter-15 { width: 15% !important; }
.meter-20 { width: 20% !important; } .meter-25 { width: 25% !important; } .meter-30 { width: 30% !important; } .meter-35 { width: 35% !important; }
.meter-40 { width: 40% !important; } .meter-45 { width: 45% !important; } .meter-50 { width: 50% !important; } .meter-55 { width: 55% !important; }
.meter-60 { width: 60% !important; } .meter-65 { width: 65% !important; } .meter-70 { width: 70% !important; } .meter-75 { width: 75% !important; }
.meter-80 { width: 80% !important; } .meter-85 { width: 85% !important; } .meter-90 { width: 90% !important; } .meter-95 { width: 95% !important; } .meter-100 { width: 100% !important; }
.chart-card { padding: 16px 18px 0; border: 1px solid var(--line); background: rgba(3,7,12,.38); }
.chart-card > div { display: flex; justify-content: space-between; color: #687487; font-size: 8px; letter-spacing: .12em; }
.chart-card > div b { color: #a5f5ef; font-size: 9px; }
.fps-chart { display: block; width: 100%; height: 72px; margin-top: 10px; overflow: visible; }
.fps-chart rect { fill: url("#fpsGradient"); fill: rgba(88,229,224,.46); }
.server-footer { display: flex; gap: 28px; margin-top: 18px; color: #657185; font-size: 9px; letter-spacing: .08em; }
.server-footer b { color: #b5bdc8; font-weight: 550; }
.world-card { position: relative; overflow: hidden; min-height: 390px; padding: 30px; display: flex; flex-direction: column; justify-content: flex-end; }
.world-card::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 55% 22%, rgba(88,229,224,.1), transparent 31%); pointer-events: none; }
.world-visual { position: absolute; top: 22px; left: 50%; width: 185px; height: 185px; transform: translateX(-50%); }
.world-core { position: absolute; inset: 28%; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #a2fff5, #486d94 30%, #171d34 65%); box-shadow: 0 0 42px rgba(88,229,224,.14); }
.world-ring { position: absolute; inset: 17%; border: 1px solid rgba(88,229,224,.35); border-radius: 50%; transform: rotate(-31deg) scaleY(.38); box-shadow: 0 0 15px rgba(88,229,224,.08); }
.world-card .kicker { position: relative; z-index: 1; margin: 175px 0 8px; font-size: 8px; }
.world-card h3, .world-card p, .world-line { position: relative; z-index: 1; }
.world-card > p:not(.kicker) { margin: 10px 0 24px; color: #8490a1; font-size: 12px; line-height: 1.65; }
.world-line { display: flex; justify-content: space-between; padding-top: 15px; border-top: 1px solid var(--line); color: #687487; font-size: 9px; }
.world-line b { color: #b8c2ce; }

.players-section { padding-top: 32px; }
.count-pill { border-color: var(--line); background: rgba(255,255,255,.025); color: #8995a6; }
.player-list { border-top: 1px solid var(--line); }
.player-row { display: grid; grid-template-columns: 46px 1fr auto 90px; gap: 16px; align-items: center; min-height: 84px; border-bottom: 1px solid var(--line); }
.avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; font-size: 13px; font-weight: 700; }
.avatar-peach { background: linear-gradient(145deg, #ffbb92, #ce5e79); color: #2f1118; }
.avatar-blue { background: linear-gradient(145deg, #75dce6, #5266c3); color: #0d1c2b; }
.avatar-violet { background: linear-gradient(145deg, #d091ff, #5d4cc3); color: #190c2b; }
.avatar-mint { background: linear-gradient(145deg, #89f0c3, #3f8b82); color: #09211c; }
.player-row h3 { margin: 0 0 4px; font-size: 14px; }
.player-row p { margin: 0; color: #6f7b8d; font-size: 10px; }
.level { color: #788497; font-family: Consolas, monospace; font-size: 10px; }
.ping { color: #8a95a6; font-size: 10px; }
.ping i { display: inline-block; width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background: #f3c56c; }
.ping.good i { background: #63f2a8; }
.empty-players { padding: 58px 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; }
.empty-players h3 { margin: 18px 0 7px; font-size: 16px; }
.empty-players p { margin: 0; color: #697589; font-size: 11px; }
.empty-orbit { position: relative; display: inline-block; width: 36px; height: 36px; border: 1px solid rgba(88,229,224,.35); border-radius: 50%; }
.empty-orbit::after { content: ""; position: absolute; inset: 7px -12px; border: 1px solid rgba(88,229,224,.2); border-radius: 50%; transform: rotate(-24deg); }
.privacy-note { margin: 14px 0 0; color: #5f6a7a; font-size: 9px; text-align: right; }

.connect-section { padding: 105px 0; background: linear-gradient(120deg, rgba(12,19,31,.95), rgba(8,12,19,.98)), radial-gradient(circle at 8% 50%, rgba(91,132,255,.1), transparent 35%); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.connect-inner { width: min(1160px, calc(100% - 48px)); margin: 0 auto; display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; align-items: start; }
.connect-copy { position: sticky; top: 35px; }
.connect-copy .kicker { margin-bottom: 14px; }
.connect-copy > p:not(.kicker) { max-width: 390px; margin: 24px 0 0; color: #8792a3; font-size: 14px; line-height: 1.75; }
.connect-copy .password-note { padding-left: 14px; border-left: 2px solid var(--cyan); color: #aeb7c4; font-size: 11px; }
.connect-panels { display: grid; gap: 14px; }
.connect-card { padding: 29px; border: 1px solid var(--line); background: #0d131d; }
.connect-card.featured { border-color: rgba(88,229,224,.22); box-shadow: inset 3px 0 0 rgba(88,229,224,.58); }
.platform-label { color: var(--cyan); font-size: 9px; font-weight: 760; letter-spacing: .16em; }
.connect-card h3 { margin: 9px 0 22px; font-size: 20px; }
.connect-card ol { display: grid; gap: 12px; margin: 0 0 22px; padding: 0; list-style: none; }
.connect-card li { display: flex; align-items: center; gap: 12px; color: #8995a6; font-size: 11px; }
.connect-card li b { width: 23px; height: 23px; display: grid; flex: 0 0 auto; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: #d1d7e0; font-size: 9px; }
.connect-card li strong { color: #c4cbd5; }
.address-box { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 0 8px 0 17px; border: 1px solid rgba(255,255,255,.12); background: #080c13; }
.address-box code { color: #dce6ef; font-size: 12px; }
.address-box button { border: 0; padding: 10px 13px; background: rgba(88,229,224,.1); color: var(--cyan); font-size: 9px; font-weight: 750; cursor: pointer; }
.connection-help { display: flex; justify-content: space-between; padding: 14px 4px 0; color: #657185; font-size: 10px; }
.connection-help a { color: #a7b0bd; }

.heading-copy { max-width: 360px; margin: 0; color: #778395; font-size: 13px; line-height: 1.6; }
.rules-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rules-grid article { min-height: 216px; padding: 29px 25px; border-right: 1px solid var(--line); }
.rules-grid article:first-child { border-left: 1px solid var(--line); }
.rules-grid span { color: var(--cyan); font-family: Consolas, monospace; font-size: 9px; }
.rules-grid h3 { margin: 45px 0 11px; font-size: 14px; }
.rules-grid p { margin: 0; color: #778294; font-size: 11px; line-height: 1.7; }

.discord-section { width: min(1160px, calc(100% - 48px)); margin: 0 auto 92px; padding: 54px 60px; display: flex; align-items: center; justify-content: space-between; gap: 30px; background: linear-gradient(115deg, #6756e7, #7d58d9 54%, #4a78d4); box-shadow: 0 24px 80px rgba(70,78,190,.14); }
.discord-section .kicker { margin-bottom: 10px; color: rgba(255,255,255,.63); }
.discord-section h2 { font-size: 35px; }
.discord-section p:last-child { margin: 10px 0 0; color: rgba(255,255,255,.7); font-size: 12px; }
.button-light { flex-shrink: 0; background: #fff; color: #242438; }
.button-light[aria-disabled="true"] { opacity: .65; cursor: not-allowed; }

footer { width: min(1160px, calc(100% - 48px)); min-height: 125px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); color: #596577; font-size: 9px; }
footer .brand { min-width: 0; transform: scale(.86); transform-origin: left; }
footer b { color: #929cac; }
noscript { display: block; padding: 16px; background: #742f35; color: white; text-align: center; }
.clipboard-helper { position: fixed; left: -9999px; top: -9999px; }

@media (max-width: 900px) {
  .site-header nav { display: none; }
  .hero { min-height: 860px; grid-template-columns: 1fr; padding-top: 145px; align-content: start; }
  .hero-content { max-width: 560px; }
  .orbital { position: absolute; right: -12%; bottom: 0; width: 520px; opacity: .67; }
  .status-layout, .connect-inner { grid-template-columns: 1fr; }
  .connect-inner { gap: 54px; }
  .connect-copy { position: static; }
  .rules-grid { grid-template-columns: repeat(2, 1fr); }
  .rules-grid article { border-bottom: 1px solid var(--line); }
}

@media (max-width: 620px) {
  .site-header { width: calc(100% - 32px); height: 76px; }
  .brand { min-width: 0; }
  .header-cta { padding: 10px 12px; font-size: 9px; }
  .hero { min-height: 790px; padding: 125px 20px 50px; }
  .hero h1 { font-size: 62px; }
  .hero-copy { font-size: 15px; }
  .hero-actions { align-items: stretch; flex-direction: column; width: 100%; }
  .hero-meta { align-items: flex-start; flex-direction: column; gap: 8px; }
  .hero-meta i { display: none; }
  .orbital { right: -41%; bottom: -4%; width: 480px; }
  .section, .connect-inner, .discord-section, footer { width: calc(100% - 32px); }
  .section { padding: 78px 0; }
  .section-heading { align-items: flex-start; flex-direction: column; margin-bottom: 28px; }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .metrics-grid > div { padding: 10px 12px 14px 0; }
  .metrics-grid > div:not(:first-child) { padding-left: 12px; }
  .server-card { padding: 20px; }
  .server-footer { flex-wrap: wrap; gap: 12px; }
  .player-row { grid-template-columns: 42px 1fr auto; }
  .player-row .ping { display: none; }
  .privacy-note { text-align: left; }
  .connect-section { padding: 78px 0; }
  .connect-card { padding: 23px 19px; }
  .address-box { align-items: stretch; flex-direction: column; gap: 10px; padding: 13px; }
  .address-box button { text-align: center; }
  .connection-help { align-items: flex-start; flex-direction: column; gap: 7px; }
  .rules-grid { grid-template-columns: 1fr; }
  .rules-grid article { min-height: 170px; }
  .rules-grid h3 { margin-top: 28px; }
  .discord-section { align-items: flex-start; flex-direction: column; padding: 38px 28px; }
  footer { align-items: flex-start; flex-direction: column; gap: 16px; padding: 30px 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}