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

:root { color-scheme:dark; --bg:#090c0f; --surface:#11161b; --surface-2:#151b21; --line:#27313a; --text:#f2f6f8; --muted:#8d9aa3; --ice:#9bd8ef; --green:#62d593; --red:#ff6f68; --gold:#d8b76c; }
* { box-sizing:border-box; }
html { min-height:100%; background:var(--bg); }
body { margin:0; min-height:100vh; color:var(--text); background:radial-gradient(circle at 50% -20%,#21313b 0,#0e1418 34%,var(--bg) 72%); font-family:Manrope,system-ui,sans-serif; }
button,a { font:inherit; }
.sky { position:fixed; inset:0; pointer-events:none; opacity:.17; background-image:linear-gradient(rgba(155,216,239,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(155,216,239,.025) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(to bottom,#000,transparent 75%); }
.topbar { position:relative; z-index:1; height:84px; display:flex; align-items:center; justify-content:flex-end; max-width:1180px; margin:auto; padding:0 32px; border-bottom:1px solid rgba(255,255,255,.06); }
.brand { display:inline-flex; align-items:center; gap:12px; color:var(--text); font-weight:750; letter-spacing:-.02em; }
.brand-mark { display:grid; place-items:center; width:34px; height:34px; border:1px solid #43606e; color:var(--ice); background:#101a1f; clip-path:polygon(20% 0,80% 0,100% 20%,100% 80%,80% 100%,20% 100%,0 80%,0 20%); font-family:"DM Mono",monospace; }
.login-button { display:flex; align-items:center; gap:10px; padding:10px 15px; color:#dce7ec; text-decoration:none; border:1px solid #36434d; border-radius:8px; background:rgba(19,25,30,.72); font-size:.9rem; transition:.2s ease; }
.login-button:hover { border-color:#5d7784; background:#182127; transform:translateY(-1px); }
.login-button svg,.copy-button svg { width:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
main { position:relative; z-index:1; width:min(1116px,calc(100% - 48px)); margin:0 auto; padding:64px 0 32px; }
.eyebrow,.card-label { margin:0 0 9px; color:var(--muted); font-size:.72rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.page-intro { margin-bottom:42px; }
h1 { margin:0; font-size:clamp(3rem,7vw,6rem); line-height:.9; letter-spacing:-.065em; font-weight:800; }
h1 span { color:#78909c; }
.server-stack { display:grid; gap:20px; }
.server-panel { padding:30px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(145deg,rgba(22,29,35,.97),rgba(13,18,22,.98)); box-shadow:0 18px 50px rgba(0,0,0,.18); }
.server-panel.wyrmgard { border-color:#3a3840; background:linear-gradient(145deg,rgba(27,28,31,.97),rgba(16,18,20,.98)); }
.server-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:26px; }
.server-heading h2,.section-heading h2 { margin:0; font-size:clamp(2rem,5vw,3.7rem); line-height:.95; letter-spacing:-.055em; }
.server-meta { display:flex; flex-wrap:wrap; gap:8px; margin:11px 0 0; color:#71808a; font-family:"DM Mono",monospace; font-size:.72rem; }
.health { display:flex; align-items:center; gap:12px; min-width:190px; padding:13px 15px; border:1px solid var(--line); border-radius:10px; background:rgba(10,14,17,.55); }
.health-icon { width:12px; height:12px; border-radius:50%; background:#68737a; box-shadow:0 0 0 5px rgba(104,115,122,.1); }
.health[data-health="online"] .health-icon { background:var(--green); box-shadow:0 0 0 5px rgba(98,213,147,.12),0 0 24px rgba(98,213,147,.42); }
.health[data-health="offline"] .health-icon { background:var(--red); box-shadow:0 0 0 5px rgba(255,111,104,.12),0 0 24px rgba(255,111,104,.36); }
.health strong { font-size:.88rem; }
.server-facts { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.fact { position:relative; min-height:180px; padding:22px 24px; overflow:hidden; border:1px solid rgba(255,255,255,.075); border-radius:12px; background:rgba(8,12,15,.32); }
.card-label { display:flex; justify-content:space-between; }
.live-label { color:var(--green); font-family:"DM Mono",monospace; font-size:.66rem; }
.private-label { color:var(--gold); font-family:"DM Mono",monospace; font-size:.66rem; }
.join-code { margin:32px 0 20px; color:var(--ice); font-family:"DM Mono",monospace; font-size:clamp(1.8rem,4vw,2.75rem); line-height:1; letter-spacing:.1em; text-shadow:0 0 28px rgba(155,216,239,.18); }
.wyrmgard .join-code { color:#e0c789; text-shadow:0 0 28px rgba(216,183,108,.14); }
.copy-button { display:flex; align-items:center; gap:9px; padding:9px 13px; color:#d8e5ea; border:1px solid #394955; border-radius:7px; background:#151e24; cursor:pointer; }
.copy-button:disabled { opacity:.4; cursor:default; }
.player-count { display:flex; align-items:baseline; gap:8px; margin:22px 0 18px; }
.player-count strong { font-size:4rem; line-height:1; letter-spacing:-.06em; }
.player-count span { color:var(--muted); font-size:1.1rem; }
.player-track,.meter { height:4px; overflow:hidden; background:#263039; border-radius:99px; }
.player-track span,.meter span { display:block; width:0; height:100%; background:var(--ice); border-radius:inherit; transition:width .5s ease; }
.wyrmgard .player-track span { background:var(--gold); }
.player-fact p { margin:10px 0 0; color:var(--muted); font-size:.74rem; }
.player-details { margin-top:12px; padding-top:11px; border-top:1px solid rgba(255,255,255,.07); }
.player-details summary { display:flex; align-items:center; justify-content:space-between; color:#c8d6dc; font-size:.76rem; font-weight:650; cursor:pointer; list-style:none; }
.player-details summary::-webkit-details-marker { display:none; }
.player-details summary svg { width:17px; fill:none; stroke:var(--muted); stroke-width:1.8; }
.player-details ul { display:grid; gap:7px; margin:11px 0 0; padding:0; list-style:none; }
.player-details li { color:var(--muted); font-size:.76rem; }
.host-section { margin-top:48px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:18px; }
.section-heading h2 { font-size:2rem; }
.host-note { color:var(--muted); font-size:.76rem; }
.metrics-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.metric-card { display:grid; grid-template-columns:auto 1fr; gap:16px; min-height:128px; padding:22px; border:1px solid var(--line); border-radius:12px; background:linear-gradient(145deg,rgba(22,29,35,.95),rgba(14,19,23,.96)); }
.metric-icon { display:grid; place-items:center; width:34px; height:34px; color:#8aa7b5; border:1px solid #31404a; border-radius:7px; background:#131b20; }
.metric-icon svg { width:18px; fill:none; stroke:currentColor; stroke-width:1.5; }
.metric-card span { display:block; margin-bottom:5px; color:var(--muted); font-size:.72rem; font-weight:650; letter-spacing:.08em; text-transform:uppercase; }
.metric-card strong { font-size:1.12rem; }
.metric-card .meter { grid-column:1/-1; align-self:end; }
footer { display:flex; justify-content:center; gap:10px; padding:38px 0 0; color:#69767e; font-size:.73rem; }
.toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px); padding:10px 14px; color:#07120c; background:var(--green); border-radius:8px; font-size:.84rem; font-weight:700; opacity:0; pointer-events:none; transition:.2s ease; }
.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:760px) { .topbar { padding:0 20px; } main { width:min(100% - 32px,620px); padding-top:48px; } .server-heading { flex-direction:column; } .health { width:100%; } .server-facts,.metrics-grid { grid-template-columns:1fr; } .section-heading { align-items:flex-start; flex-direction:column; gap:8px; } }
@media (max-width:470px) { .login-button span { display:none; } .server-panel { padding:22px; } .fact { padding:20px; } .join-code { font-size:1.65rem; } footer { align-items:center; flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }