:root{
  --bg-1:#041022;
  --bg-2:#081826;
  --accent:#3df1ff;
  --muted:#8ea9bd;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:#dff3ff;
  -webkit-font-smoothing:antialiased;
  background:linear-gradient(180deg,var(--bg-1),var(--bg-2));
  overflow:auto; /* allow scrolling */
}
#bg{position:fixed;inset:0;z-index:0}
.ui{position:relative;z-index:2;min-height:100vh;display:flex;flex-direction:column;align-items:center}
.site-header{padding:42px 20px 6px;text-align:center}
.site-header h1{font-size:2.6rem;margin:0;text-shadow:0 6px 20px rgba(61,177,255,0.08);letter-spacing:0.6px}
.tagline{margin:6px 0 0;color:var(--muted)}
.controls{display:flex;gap:10px;margin:12px 0}
.chip{background:rgba(255,255,255,0.03);padding:6px 10px;border-radius:999px;color:var(--muted);font-size:0.9rem}
.chip strong{color:var(--accent)}
.panel{width:min(1100px,94%);margin-top:18px}
.hero{background:rgba(0,0,0,0.25);backdrop-filter:blur(6px);padding:28px;border-radius:10px;box-shadow:0 8px 30px rgba(2,8,15,0.6)}
.hero h2{margin:0 0 6px;font-size:1.6rem;color:#e6fbff}
.hero p{margin:0;color:var(--muted)}
footer{margin-top:auto;padding:18px;color:var(--muted)}

/* small devices */
@media (max-width:600px){
  .site-header h1{font-size:1.6rem}
  .hero{padding:18px}
}

/* Fortnite status styles */
.status-panel{margin-top:18px}
.status-list{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.status-item{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:rgba(255,255,255,0.02);border-radius:8px}
.status-name{font-size:0.98rem;color:#eafaff}
.status-badge{padding:6px 10px;border-radius:999px;font-weight:600;font-size:0.85rem}
.status-badge.online{background:linear-gradient(90deg,#19c37d,#00e5a8);color:#04221a}
.status-badge.degraded{background:linear-gradient(90deg,#ffb86b,#ff8a4b);color:#2b1408}
.status-badge.down{background:linear-gradient(90deg,#ff5b6a,#ff2e4a);color:#2b0a0f}
.status-badge.maintenance{background:linear-gradient(90deg,#9fb5ff,#6bb0ff);color:#05102a}
.status-badge.unknown{background:rgba(255,255,255,0.03);color:var(--muted)}
.muted{color:var(--muted)}

/* Clickable button styled like status badges */
.status-btn{display:inline-block;padding:6px 12px;border-radius:999px;font-weight:700;font-size:0.9rem;text-decoration:none;color:#04221a;background:linear-gradient(90deg,#19c37d,#00e5a8);box-shadow:0 8px 20px rgba(30,200,220,0.06);transition:transform .12s ease;margin-top:6px}
.status-btn.degraded{background:linear-gradient(90deg,#ffb86b,#ff8a4b);color:#2b1408}
.status-btn.down{background:linear-gradient(90deg,#ff5b6a,#ff2e4a);color:#2b0a0f}
.status-btn.maintenance{background:linear-gradient(90deg,#9fb5ff,#6bb0ff);color:#05102a}
.status-btn.unknown{background:rgba(255,255,255,0.03);color:var(--muted)}

/* Toggle button in section headers */
.toggle-btn{background:transparent;border:0;color:var(--accent);font-size:1rem;margin-left:10px;padding:4px 8px;border-radius:6px;cursor:pointer}
.toggle-btn:focus{outline:2px solid rgba(61,241,255,0.12);outline-offset:3px}

/* hide native scrollbar but keep scrolling functional */
html { scrollbar-width: none; }
body::-webkit-scrollbar{ width:0; height:0 }
.faux-scrollbar{display:none !important}