@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; }
* { 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); text-decoration:none; 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:72px 0 32px; }
.hero { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; margin-bottom:42px; }
.eyebrow,.card-label { margin:0 0 9px; color:var(--muted); font-size:.76rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(3rem,8vw,6.4rem); line-height:.88; letter-spacing:-.065em; font-weight:800; }
.health { display:flex; align-items:center; gap:13px; min-width:215px; padding:15px 17px; border:1px solid var(--line); border-radius:10px; background:rgba(15,20,24,.72); }
.health-icon { width:14px; height:14px; 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 { display:block; }
.health strong { font-size:.95rem; }
.primary-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.join-card,.players-card,.metric-card { border:1px solid var(--line); background:linear-gradient(145deg,rgba(22,29,35,.95),rgba(14,19,23,.96)); }
.join-card { position:relative; display:flex; flex-direction:column; min-height:220px; padding:28px 30px; border-radius:14px; overflow:hidden; }
.join-card:after { content:""; position:absolute; width:190px; height:190px; right:-85px; bottom:-115px; border:1px solid rgba(155,216,239,.12); border-radius:50%; box-shadow:0 0 0 28px rgba(155,216,239,.025),0 0 0 56px rgba(155,216,239,.018); }
.card-label { display:flex; align-items:center; justify-content:space-between; }
.live-label { color:var(--green); font-family:"DM Mono",monospace; font-size:.68rem; }
.join-code { margin:auto 0 20px; color:var(--ice); font-family:"DM Mono",monospace; font-size:clamp(2rem,4vw,3rem); line-height:1; letter-spacing:.14em; text-shadow:0 0 28px rgba(155,216,239,.18); }
.copy-button { position:relative; z-index:2; display:flex; align-items:center; gap:9px; padding:10px 14px; color:#d8e5ea; border:1px solid #394955; border-radius:7px; background:#151e24; cursor:pointer; }
.copy-button:disabled { opacity:.45; cursor:default; }
.players-card { display:flex; flex-direction:column; min-height:220px; padding:28px 30px; border-radius:14px; }
.player-count { display:flex; align-items:baseline; gap:8px; margin:auto 0 18px; }
.player-count strong { font-size:4.5rem; line-height:1; letter-spacing:-.06em; }
.player-count span { color:var(--muted); font-size:1.25rem; }
.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; }
.players-card p { margin:10px 0 0; color:var(--muted); font-size:.76rem; }
.metrics-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.metrics-grid>.metric-card { grid-column:span 1; }
.metrics-grid>.save-card { grid-column:span 2; }
.metric-card { min-height:150px; padding:22px; border-radius:12px; }
.metric-icon { display:grid; place-items:center; width:34px; height:34px; margin-bottom:24px; 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:4px; color:var(--muted); font-size:.75rem; font-weight:650; letter-spacing:.08em; text-transform:uppercase; }
.metric-card strong { display:block; overflow:hidden; text-overflow:ellipsis; font-size:1.1rem; font-weight:700; white-space:nowrap; }
.metric-card .meter { margin-top:18px; }
.save-card { display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start; }
.save-card .metric-icon { margin-bottom:0; }
.save-times { display:grid; gap:17px; }
.save-times>div+div { padding-top:15px; border-top:1px solid rgba(255,255,255,.07); }
.save-times strong { font-family:"DM Mono",monospace; font-size:.87rem; }
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); }
.login-page { display:grid; place-items:center; }
.login-shell { width:min(480px,calc(100% - 40px)); padding:0; }
.login-shell>.brand { margin-bottom:28px; }
.login-panel { padding:38px; border:1px solid var(--line); border-radius:14px; background:rgba(17,22,27,.96); }
.login-panel h1 { font-size:2.7rem; letter-spacing:-.05em; }
.login-panel p:not(.eyebrow) { color:var(--muted); line-height:1.6; }
.back-link { display:inline-block; margin-top:16px; color:var(--ice); text-decoration:none; }
@media (max-width:900px) { .metrics-grid { grid-template-columns:repeat(4,1fr); } }
@media (max-width:760px) { .topbar { padding:0 20px; } main { width:min(100% - 32px,620px); padding-top:52px; } .hero { align-items:flex-start; flex-direction:column; } .health { width:100%; } .primary-grid { grid-template-columns:1fr; } .metrics-grid { grid-template-columns:1fr 1fr; } .metrics-grid>.metric-card { grid-column:span 1; } .metrics-grid>.save-card { grid-column:1/-1; } .players-card { min-height:220px; } }
@media (max-width:470px) { .login-button span { display:none; } .metrics-grid { grid-template-columns:1fr; } .players-card { grid-column:1/-1; } .join-code { font-size:2rem; } footer { align-items:center; flex-direction:column; } .footer-separator { display:none; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }