:root {
  --bg:#09090b; --panel:#111114; --panel2:#151519; --border:#29292e;
  --text:#f4f4f5; --muted:#a1a1aa; --green:#4ade80; --yellow:#facc15;
  --red:#f87171; --blue:#60a5fa;
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 50% -20%,#1c1c22 0,var(--bg) 42%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
a{color:inherit;text-decoration:none}
.topbar{height:70px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:rgba(9,9,11,.72);backdrop-filter:blur(18px);position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:.08em;font-size:13px}
.brand-mark{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--border);border-radius:9px;background:var(--panel2)}
.header-meta{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:12px}
.icon-button{width:34px;height:34px;border-radius:9px;border:1px solid var(--border);background:var(--panel);color:var(--text);font-size:20px;cursor:pointer}
.container{max-width:980px;margin:0 auto;padding:58px 22px 50px}
.hero{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:30px 0 44px}
.eyebrow,.section-title{color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
h1{margin:8px 0;font-size:clamp(30px,5vw,48px);letter-spacing:-.04em}
.hero p{margin:0;color:var(--muted);font-size:15px}
.overall-badge{display:flex;align-items:center;gap:10px;padding:12px 15px;border-radius:999px;background:var(--panel);border:1px solid var(--border);white-space:nowrap;font-size:13px;font-weight:700}
.status-dot{width:9px;height:9px;border-radius:50%;background:var(--muted);box-shadow:0 0 0 4px rgba(161,161,170,.08)}
.overall-badge.operational .status-dot,.dot.operational{background:var(--green)}
.overall-badge.scheduled .status-dot,.dot.scheduled{background:var(--yellow)}
.overall-badge.outage .status-dot,.dot.outage{background:var(--red)}
.section{margin-top:28px}.section-title{margin-bottom:10px}
.card,.uptime-card{border:1px solid var(--border);background:linear-gradient(180deg,var(--panel2),var(--panel));border-radius:14px;overflow:hidden}
.card{padding:19px 20px;margin-bottom:10px}
.card-row{display:flex;justify-content:space-between;gap:20px}
.card-main{min-width:0}.card-name{font-weight:750;font-size:16px;display:flex;align-items:center;gap:9px}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:0 0 auto}
.card-description{color:var(--muted);font-size:13px;margin-top:7px}
.card-right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.status-text{font-size:12px;font-weight:700}.operational-text{color:var(--green)}.scheduled-text{color:var(--yellow)}.outage-text{color:var(--red)}.unknown-text{color:var(--muted)}
.node-info,.meta{color:var(--muted);font-size:12px}
.metrics{display:flex;gap:16px;margin-top:16px;padding-top:15px;border-top:1px solid rgba(255,255,255,.06);flex-wrap:wrap}
.metric{min-width:95px}.metric b{display:block;font-size:13px;margin-top:4px}
.restart{margin-top:12px;padding:9px 11px;border:1px solid rgba(250,204,21,.16);background:rgba(250,204,21,.05);border-radius:8px;color:#fde68a;font-size:12px}
.uptime-card{padding:20px}.uptime-summary{display:flex;gap:36px;align-items:end;margin-bottom:20px;flex-wrap:wrap}.uptime-summary strong{display:block;font-size:28px;margin-top:4px}.summary-stat{display:flex;flex-direction:column;gap:5px}
.uptime-grid{display:grid;grid-template-columns:repeat(90,1fr);gap:3px;height:40px;align-items:end}.uptime-day{min-width:0;height:27px;border-radius:3px;background:#27272a}.uptime-day.operational{background:var(--green)}.uptime-day.scheduled{background:var(--yellow)}.uptime-day.outage{background:var(--red)}
.chart-head{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;margin:23px 0 7px}.latency-chart{height:90px;border:1px solid rgba(255,255,255,.05);border-radius:8px;display:flex;align-items:flex-end;gap:2px;padding:8px;background:rgba(0,0,0,.12)}
.latency-bar{flex:1;min-width:2px;border-radius:2px 2px 0 0;background:var(--blue);opacity:.85}.latency-bar.empty{background:#27272a;height:2px}
.legend{display:flex;gap:18px;margin-top:14px;color:var(--muted);font-size:11px}.legend i{display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:5px;background:#27272a}.legend i.operational{background:var(--green)}.legend i.scheduled{background:var(--yellow)}.legend i.outage{background:var(--red)}
.incident{border:1px solid var(--border);background:var(--panel);border-radius:12px;padding:15px 17px;margin-bottom:9px}.incident-title{font-weight:700;font-size:13px}.incident-time{color:var(--muted);font-size:11px;margin-top:6px}.incident.active{border-color:rgba(248,113,113,.35)}.incident.active .incident-title{color:var(--red)}
.empty{padding:20px;color:var(--muted);border:1px dashed var(--border);border-radius:14px}
footer{display:flex;justify-content:space-between;color:#52525b;font-size:11px;margin-top:60px;padding:0 2px}
@media(max-width:650px){.topbar{padding:0 16px}.header-meta span{display:none}.hero{flex-direction:column;align-items:flex-start}.card-row{flex-direction:column}.card-right{align-items:flex-start;text-align:left}.uptime-grid{gap:2px}.uptime-summary{gap:22px}footer{flex-direction:column;gap:6px}}
.network-card{padding:19px 20px}
.network-summary{display:flex;gap:28px;flex-wrap:wrap;margin-top:17px;padding:14px 0;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.network-summary div{display:flex;flex-direction:column;gap:4px}
.network-summary b{font-size:14px}
.network-services{margin-top:4px}
.network-service{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.network-service:last-child{border-bottom:0}


.game-tabs-section { margin-top: 28px; }
.game-tabs {
  display: flex;
  gap: 6px;
  padding: 5px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  background: rgba(17,17,20,.78);
  border-radius: 12px;
  width: fit-content;
}
.game-tab {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  border-radius: 8px;
  padding: 9px 14px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.game-tab:hover { color: var(--text); }
.game-tab.active {
  color: var(--text);
  background: var(--panel2);
  border-color: var(--border);
}
.game-tab-panel[hidden] { display: none; }
@media(max-width:650px){
  .game-tabs { width:100%; }
  .game-tab { flex:1; }
}

.discord-card {
  position: relative;
}
.discord-card .card-name::first-letter {
  color: #60a5fa;
}
@media(max-width:650px){
  .game-tabs {
    overflow-x: auto;
    justify-content: flex-start;
  }
  .game-tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

.error-detail {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(220, 38, 38, 0.08);
  color: var(--muted, #8f98a8);
  font-size: 0.82rem;
  word-break: break-word;
}

.admin-link{color:var(--muted);text-decoration:none;font-size:11px;font-weight:700}.admin-link:hover{color:var(--text)}
.maintenance-text{color:var(--yellow)}
.overall-badge.maintenance .status-dot{background:var(--yellow)}
.maintenance-banner{margin-top:12px;padding:9px 11px;border:1px solid rgba(250,204,21,.18);background:rgba(250,204,21,.055);border-radius:9px;color:#fde68a;font-size:12px}
.incident-comments-public{margin-top:10px;padding-top:9px;border-top:1px solid rgba(255,255,255,.05);display:grid;gap:6px}
.incident-comment-public{font-size:11px;color:#d4d4d8;padding:7px 9px;background:#111114;border-radius:8px}
.incident-comment-public span{display:block;color:var(--muted);font-size:9px;margin-top:3px}
