/* FIREFORCE status — dark, minimalist, ember accent */

:root{
  --bg:#0a0a0c;
  --bg-elev:#131317;
  --bg-elev-2:#191920;
  --line:#26262e;
  --line-soft:#1f1f26;
  --txt:#ececed;
  --txt-dim:#a2a2ad;
  --txt-faint:#71717d;
  --ember:#ff6a1a;
  --ember-soft:rgba(255,106,26,.14);
  --ok:#3ddc84;
  --ok-soft:rgba(61,220,132,.12);
  --bad:#ff5a5f;
  --bad-soft:rgba(255,90,95,.12);
  --warn:#f5b02e;
  --warn-soft:rgba(245,176,46,.13);
  --r:14px;
  --font:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --mono:ui-monospace,"Cascadia Mono","SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:var(--font);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:10;
  background:var(--ember);color:#150800;padding:.6rem 1rem;border-radius:0 0 var(--r) 0;
  font-weight:700;text-decoration:none;
}
.skip-link:focus{left:0}

:focus-visible{
  outline:2px solid var(--ember);
  outline-offset:3px;
  border-radius:6px;
}

.wrap{
  max-width:720px;
  margin:0 auto;
  padding:2rem 1rem 3rem;
  padding-left:max(1rem,env(safe-area-inset-left));
  padding-right:max(1rem,env(safe-area-inset-right));
}

/* ---------- header ---------- */
.site-header{margin:0 0 1.75rem}
.wordmark{
  margin:0;
  font-size:clamp(2rem,10vw,3rem);
  line-height:1;
  font-weight:800;
  letter-spacing:.06em;
}
.wm-a{color:var(--ember)}
.wm-b{color:var(--txt)}
.tagline{
  margin:.5rem 0 0;
  color:var(--txt-faint);
  font-size:.8125rem;
  letter-spacing:.18em;
  text-transform:uppercase;
}

/* ---------- cards ---------- */
.card{
  background:var(--bg-elev);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:1.25rem;
  margin:0 0 .875rem;
}
.card-title{
  margin:0 0 .875rem;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--txt-faint);
}

/* ---------- status ---------- */
.status-live{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  margin-bottom:1rem;
}
.badge{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.4rem .85rem .4rem .7rem;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--bg-elev-2);
  color:var(--txt-dim);
  font-size:.9375rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.badge-dot{
  width:9px;height:9px;border-radius:50%;
  background:currentColor;flex:0 0 auto;
}
.badge.is-online{color:var(--ok);background:var(--ok-soft);border-color:rgba(61,220,132,.35)}
.badge.is-offline{color:var(--bad);background:var(--bad-soft);border-color:rgba(255,90,95,.35)}
.badge.is-loading{color:var(--txt-faint)}

.chip{
  display:inline-flex;align-items:center;
  padding:.3rem .65rem;border-radius:999px;
  font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.chip-stale{color:var(--warn);background:var(--warn-soft);border:1px solid rgba(245,176,46,.4)}

.server-name{
  margin:0 0 1.25rem;
  font-size:1.0625rem;
  font-weight:600;
  color:var(--txt);
  word-break:break-word;
  overflow-wrap:anywhere;
}

.occ-nums{
  margin:0;
  font-family:var(--mono);
  line-height:1;
  display:flex;align-items:baseline;gap:.15rem;
}
.occ-now{font-size:clamp(2.5rem,14vw,3.25rem);font-weight:700;color:var(--ember)}
.occ-now.is-dim{color:var(--txt-faint)}
.occ-sep{font-size:1.5rem;color:var(--txt-faint);margin:0 .2rem}
.occ-max{font-size:1.5rem;color:var(--txt-dim)}
.occ-label{
  margin:.4rem 0 0;
  font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-faint);
}
.bar{
  margin-top:.9rem;
  height:6px;border-radius:999px;background:var(--bg-elev-2);
  border:1px solid var(--line-soft);
  overflow:hidden;
}
.bar-fill{
  display:block;height:100%;width:0;
  background:var(--ember);
  border-radius:999px;
  transition:width .35s ease;
}

/* ---------- connect ---------- */
.connect-row{display:flex;flex-wrap:wrap;align-items:center;gap:.625rem}
.address{
  flex:1 1 auto;min-width:0;
  font-family:var(--mono);font-size:1rem;
  color:var(--txt);
  background:var(--bg-elev-2);
  border:1px solid var(--line-soft);
  border-radius:10px;
  padding:.6rem .75rem;
  overflow-wrap:anywhere;
  user-select:all;
}
.btn-copy{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  min-height:44px;padding:.6rem 1rem;
  font:inherit;font-size:.875rem;font-weight:700;
  color:var(--ember);
  background:var(--ember-soft);
  border:1px solid rgba(255,106,26,.42);
  border-radius:10px;
  cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.btn-copy:hover{background:rgba(255,106,26,.22)}
.btn-copy:active{transform:translateY(1px)}
.btn-copy.is-copied{color:var(--ok);background:var(--ok-soft);border-color:rgba(61,220,132,.42)}
.ico{flex:0 0 auto}

/* ---------- channels ---------- */
.channels{display:flex;flex-direction:column;gap:.75rem}
.channel{
  background:var(--bg-elev-2);
  border:1px solid var(--line-soft);
  border-left:3px solid var(--ember);
  border-radius:10px;
  padding:.8rem .9rem;
}
.ch-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;
  margin-bottom:.6rem;
}
.ch-name{
  margin:0;font-size:.9375rem;font-weight:700;color:var(--txt);
  overflow-wrap:anywhere;
}
.ch-count{
  flex:0 0 auto;
  font-family:var(--mono);font-size:.75rem;font-weight:700;
  color:var(--txt-faint);
  white-space:nowrap;
}
.nicks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.nick{
  display:inline-block;max-width:100%;
  padding:.3rem .6rem;
  border-radius:999px;
  background:#0f0f13;
  border:1px solid var(--line);
  font-size:.8125rem;
  color:var(--txt-dim);
  overflow-wrap:anywhere;
}
.empty{
  margin:0;
  padding:1.25rem .25rem;
  text-align:center;
  color:var(--txt-faint);
  font-size:.9375rem;
}

/* ---------- footer ---------- */
.site-footer{margin-top:1.5rem;text-align:center}
.updated{margin:0;font-size:.8125rem;color:var(--txt-faint)}
.updated.is-stale{color:var(--warn)}
.conn-warn{
  margin:.6rem 0 0;
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.75rem;color:var(--warn);
}
.warn-dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}

/* ---------- larger screens ---------- */
@media (min-width:640px){
  .wrap{padding:3rem 1.5rem 4rem}
  .card{padding:1.5rem}
  .nicks{gap:.45rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}