/* ===== Base ===== */
:root{
  --bg:#151c28;
  --panel:#1d2533;
  --panel-2:#212a3b;
  --text:#e9eef9;
  --muted:#9aa6bb;
  --blue:#2f6df6;
  --blue-2:#2b5fde;
  --btn-dark:#2a3243;
  --ring:rgba(0,0,0,.35);
}

/* Normal scrolling: only shows when content overflows */
html { height: auto; }
body {
  min-height: 100vh;         /* fills tall screens without forcing extra scroll */
  overflow-y: auto;          /* allow scroll if needed */
  overflow-x: hidden;        /* keep horizontal scroll hidden */
}

/* (nice optional polish: keeps layout from “jumping” when scrollbar appears) */
:root { scrollbar-gutter: stable both-edges; }


body{
  background: radial-gradient(1200px 700px at 50% -200px, #1e2737 0%, #151c28 55%, #141b27 100%);
  color:var(--text);
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Wider overall shell to fit more cards per row */
.sc-shell{ max-width: 1240px; margin-inline:auto; }

/* Tighten gutters on the grid regardless of g-* class */
#servers-grid{
  --bs-gutter-x: 1rem;
  --bs-gutter-y: 1rem;
}

.text-muted-2{ color: var(--muted)!important; }

.page-wrap{ min-height:100vh; display:flex; }
.page-wrap > .sc-shell{ align-self:flex-start; width:100%; }

/* ===== Card-like wrapper ===== */
.card-like{
  position: relative;
  background: var(--panel);
  border-radius: 18px;
  box-shadow: 0 10px 30px var(--ring);
  overflow: hidden;
}
.card-like::after{
  content:""; position:absolute; inset:0; border-radius:18px; pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

/* ===== HERO ===== */
.hero{ height: 300px; display:flex; align-items:center; justify-content:center; }
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(1200px 420px at 50% 10%, rgba(0,0,0,.35), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0) 25%),
    linear-gradient(180deg, rgba(19,26,38,.85), rgba(19,26,38,.85)),
    radial-gradient(110% 60% at 0% 100%, #2c374b 0 60%, transparent 61%),
    radial-gradient(110% 65% at 35% 100%, #273345 0 60%, transparent 61%),
    radial-gradient(110% 70% at 65% 100%, #222c3d 0 60%, transparent 61%),
    radial-gradient(110% 60% at 100% 100%, #2c374b 0 60%, transparent 61%);
}
.hero-content{ position:relative; z-index:1; padding: 0 24px; max-width: 920px; margin-inline:auto; }
.hero-title{
  font-weight: 800; letter-spacing:.02em; text-transform: uppercase;
  font-size: clamp(28px, 4.6vw, 56px);
}
.hero-sub{ color: var(--muted); font-size: clamp(14px, 1.6vw, 18px); max-width: 700px; margin: 8px auto 0; }

/* CTA buttons (NOT bold) */
.btn-cta-dark{
  background: var(--btn-dark); color: #d8deeb; border: 0; padding: 12px 18px; border-radius: 10px; font-weight: 500;
}
.btn-cta-dark:hover{ filter: brightness(1.05); }
.btn-cta-primary{
  background: var(--blue); color: #fff; border:0; padding: 12px 22px; border-radius: 10px; font-weight: 500;
}
.btn-cta-primary:hover{ background: var(--blue-2); }
.btn-cta-outline{
  background: transparent; color: #d8deeb; border: 1px solid rgba(255,255,255,.2); padding: 12px 22px; border-radius: 10px; font-weight: 500;
}
.btn-cta-outline:hover{ background: rgba(255,255,255,.06); color:#fff; }

/* ===== Server Cards ===== */
.server{
  background: var(--panel-2);
  padding: 1rem;                  /* overrides p-4 -> slimmer card */
  border-radius: 16px;            /* slightly tighter radius */
}
.server-title{
  font-weight: 200;
  letter-spacing:.01em;
  font-size: 1.05rem;
  display:flex;                   /* keep dot + name aligned */
  align-items:center;
  gap:8px;                        /* spacing between dot and name */
  line-height:1.2;
  min-width:0;                    /* allow name to truncate */
}
.srv-name{
  display:block;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;         /* long names ellipsize */
}
.trend{ display:inline-block; transform: rotate(10deg); opacity:.8; }

/* JOIN (NOT bold) */
.btn-join{
  background: var(--blue); color:#fff; border:0; padding:8px 20px; border-radius: 10px; font-weight:500; letter-spacing:.02em;
}
.btn-join:hover{ background: var(--blue-2); }

/* Detail expand button */
.srv-detail-btn{
  background:none; border:none; color:var(--muted); cursor:pointer; padding:2px 4px; font-size:.9rem; border-radius:4px; transition:all .15s;
}
.srv-detail-btn:hover{ color:var(--text); background:rgba(255,255,255,.06); }
.srv-detail-btn.active{ color:#2ecc71; }

/* Detail modal overlay */
.detail-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:999;
  display:none; justify-content:center; align-items:center; padding:1rem;
  backdrop-filter:blur(4px);
}
.detail-overlay.open{ display:flex; }
.detail-modal{
  background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:16px;
  width:100%; max-width:560px; max-height:90vh; overflow-y:auto;
  padding:1.5rem; box-shadow:0 24px 80px rgba(0,0,0,.5);
}
.detail-header{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:.6rem;
}
.detail-header h3{ font-size:1rem; font-weight:600; margin:0; color:var(--text); }
.detail-dot{ width:10px; height:10px; flex-shrink:0; }
.detail-close{
  background:none; border:none; color:var(--muted); font-size:1.1rem; cursor:pointer; padding:4px 6px; border-radius:6px;
}
.detail-close:hover{ color:var(--text); background:rgba(255,255,255,.06); }
.detail-meta{
  display:flex; gap:.8rem; color:var(--muted); font-size:.8rem; margin-bottom:1rem; flex-wrap:wrap;
}
.detail-chart-wrap{
  height:160px; margin-bottom:1rem;
}
.detail-stats{
  display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:.5rem;
}
.detail-stat{ text-align:center; padding:.5rem; background:rgba(255,255,255,.03); border-radius:8px; }
.detail-stat-val{ display:block; font-size:1.1rem; font-weight:700; color:var(--text); }
.detail-stat-lbl{ display:block; color:var(--muted); font-size:.7rem; text-transform:uppercase; letter-spacing:.03em; margin-top:.15rem; }
@media(max-width:500px){
  .detail-stats{ grid-template-columns:1fr 1fr; }
  .detail-modal{ padding:1rem; }
}

/* Sparklines w/o external URLs (compact) */
.sparkline{
  width: 130px; height: 34px; border-radius:6px; position:relative; overflow:hidden;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.04) 1px, transparent 1px, transparent 12px),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
}
.sparkline::before{
  content:""; position:absolute; left:8px; right:8px; bottom:10px; height:2px;
  background:
    linear-gradient( 12deg, transparent 0 49%, rgba(47,109,246,.9) 50% 100%) left/24% 100% no-repeat,
    linear-gradient(-10deg, transparent 0 49%, rgba(47,109,246,.9) 50% 100%) 24% 0/24% 100% no-repeat,
    linear-gradient( 14deg, transparent 0 49%, rgba(47,109,246,.9) 50% 100%) 48% 0/24% 100% no-repeat,
    linear-gradient( -8deg, transparent 0 49%, rgba(47,109,246,.9) 50% 100%) 72% 0/24% 100% no-repeat;
  filter: drop-shadow(0 1px 0 rgba(47,109,246,.35));
}
.sparkline.up::before{
  background:
    linear-gradient( 8deg, transparent 0 49%, rgba(47,109,246,.9) 50% 100%) left/24% 100% no-repeat,
    linear-gradient(12deg, transparent 0 49%, rgba(47,109,246,.9) 50% 100%) 24% 0/24% 100% no-repeat,
    linear-gradient(10deg, transparent 0 49%, rgba(47,109,246,.9) 50% 100%) 48% 0/24% 100% no-repeat,
    linear-gradient( 6deg, transparent 0 49%, rgba(47,109,246,.9) 50% 100%) 72% 0/24% 100% no-repeat;
}

/* ===== Footer ===== */
.footer-real{ text-align: center; padding: 4px; }
.footer-link{ color:#8fb3ff; text-decoration:none; }
.footer-link:hover{ text-decoration:underline; }

.footer-stats{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap;
  padding:10px 12px 6px;
}

.footer-stats .stat{
  display:flex;
  align-items:center;
  gap:.5rem;
  color: var(--muted);
  font-size: 14px;
}

.footer-stats .stat .label{ opacity:.85; }

/* green numbers */
.footer-stats .value{
  color:#2ecc71;
  font-weight:400;
}

/* thin divider */
.footer-stats .sep{
  width:1px;
  height:18px;
  background: rgba(255,255,255,.08);
  border-radius:1px;
}

.metrics-box{ padding: 4px; }

/* stack gracefully on small screens */
@media (max-width: 600px){
  .footer-stats{ gap:12px; }
  .footer-stats .sep{ display:none; }
  .footer-stats .stat{
    width:100%;
    justify-content:center;
  }
}


/* Small polish */
.server .bi{ color: var(--muted); }
.server .fw-semibold{ color:#d9e3f1; }

/* Hero image file path */
.hero-bg{
  background: radial-gradient(1200px 420px at 50% 10%, rgba(0,0,0,.35), transparent 65%),
              linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0) 25%),
              linear-gradient(180deg, rgba(19,26,38,.35), rgba(19,26,38,.35)),
              url("../images/hero-bg.png") center/cover no-repeat;
}

/* Rich mini-chart slot (Chart.js) */
.chart-slot{
  width:160px; height:48px; border-radius:8px; overflow:hidden;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.04) 1px, transparent 1px, transparent 12px),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
}
/* Theme A: darker, denser grid */
.chart-slot.theme-a{
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.06) 1px, transparent 1px, transparent 8px),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
}

/* Theme B: dotted guide instead of lines */
.chart-slot.theme-b{
  background:
    radial-gradient(circle at 0 50%, rgba(255,255,255,.055) 1px, transparent 1px) 0 0/12px 100%,
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
}

/* Theme C: almost plain (very subtle) */
.chart-slot.theme-c{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
}
.srv-chart{ display:block; width:160px; height:48px; }

/* Online/offline status dot */
.srv-dot{
  width:8px; height:8px;
  border-radius:50%;
  flex: 0 0 8px;                 /* never shrink, never grow */
  transform: translateY(1px);    /* tiny optical nudge */
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.25);
  background:#8a93a6;            /* default/unknown */
}
.srv-dot.online  { background:#2ecc71; box-shadow: 0 0 10px rgba(46,204,113,.45), inset 0 0 0 2px rgba(0,0,0,.25); }
.srv-dot.offline { background:#ff5c5c; box-shadow: 0 0 6px rgba(255,92,92,.35),   inset 0 0 0 2px rgba(0,0,0,.25); }

/* Offline state polish */
.server.offline{ opacity:.92; }
.server.offline .chart-slot{ filter: grayscale(.6) brightness(.9); }
.server.offline .srv-status{ color:#ff8f8f; }
.server.offline .btn-join{
  background:#394152;
  pointer-events:none;
  cursor:not-allowed;
  opacity:.7;
}

/* Card body layout: chart left, meta right */
.server-body{
  display:flex;
  gap:16px;
  align-items:flex-start;
}

.chart-stack{
  flex:0 0 160px; /* same width as chart */
}

.server-meta{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

/* Tighter on small screens: stack vertically */
@media (max-width: 768px){
  .server-body{
    flex-direction:column;
  }
  .chart-stack{ flex:0 0 auto; }
  .server-meta{ width:100%; }
}

/* Make 24H GRAPH label a touch subtler */
.srv-status{
  letter-spacing:.02em;
  text-transform:uppercase;
  opacity:.9;
}

/* Flag + rank line */
.srv-extras{ display:flex; align-items:center; gap:10px; }
.srv-flag{
  font-size:14px; line-height:1;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.25));
}
.srv-rank{
  display:inline-flex; align-items:center; gap:6px;
  color:#cfd8ea;
}
.srv-rank .bi{ color:#f0c54a; } /* trophy */

/* Loading spinners for flag/rank */
.srv-flag.is-loading,
.srv-rank.is-loading .srv-rank-val{
  position: relative;
  display:inline-flex;
  width:14px; height:14px;          /* small, tidy */
  align-items:center; justify-content:center;
}

.srv-flag.is-loading::after,
.srv-rank.is-loading .srv-rank-val::after{
  content:"";
  width:12px; height:12px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.25);
  border-top-color:#8fb3ff;         /* accent */
  animation: sc-spin .8s linear infinite;
}

@keyframes sc-spin { to { transform: rotate(360deg); } }

/* ===== 404 page only ===== */
.nf-wrap{ min-height:100vh; display:flex; }
.nf-shell{ width:100%; max-width:1240px; margin-inline:auto; }

.nf-hero{
  position:relative;
  height:360px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:18px;            /* pairs nicely with .card-like */
}

.nf-bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(1200px 420px at 50% 10%, rgba(0,0,0,.35), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0) 25%),
    linear-gradient(180deg, rgba(19,26,38,.35), rgba(19,26,38,.35)),
    url("../images/hero-bg.png") center/cover no-repeat;
  filter: saturate(.95);
}

.nf-content{ position:relative; z-index:1; text-align:center; padding:0 24px; }
.nf-title{
  font-weight:800; letter-spacing:.02em;
  font-size: clamp(28px, 4.6vw, 56px);
  text-transform: uppercase;
}
.nf-sub{ color:var(--muted); font-size:clamp(14px,1.6vw,18px); margin-top:8px; }
.nf-actions{ margin-top:18px; }

/* utility */
.no-underline { text-decoration: none; }
.no-underline:hover,
.no-underline:focus { text-decoration: none; }  /* keep it off on hover/focus */

/* ===== Server address line (below title) ===== */
.srv-addr-row {
  line-height: 1;
}

.srv-addr {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* little dot to echo the status dot, but neutral/secondary */
.addr-dot{
  display:inline-block;
  width:8px; height:8px;
  border-radius:50%;
  margin-right:2px;
  translate: 0 1px; /* align with text baseline */
  background: #7ea2c9;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.25);
  opacity: .9;
}

/* optional hover emphasis if the row is clickable later */
.srv-addr-row:hover .addr-dot {
  box-shadow: 0 0 8px rgba(126,162,201,.45), inset 0 0 0 2px rgba(0,0,0,.25);
}

/* Address line icon */
.addr-ico{
  font-size: .9rem;
  color: var(--muted);
  opacity: .95;
  translate: 0 .5px; /* align with text baseline */
}

.chip-link{ font-size:.9rem; text-decoration:none; color:#cfe0ff; }
.chip-link:hover{ color:#dbe9ff; }

.footer-stats .stat:last-child { padding-left: 8px; }   /* tiny breathing room */

@media (max-width:560px){
  .footer-stats .stat:last-child { order: 99; width:100%; text-align:center; padding-left:0; }
  .footer-stats .sep:last-of-type { display:none; }    /* hide the last pipe on wrap */
}