/* ═══════════════════════════════════════
   SERVER INFO — DESTINY PLAYGROUND
   server-info.css — link on server-info.html only
   ═══════════════════════════════════════ */

/* ── PAGE HERO ── */
.si-hero {
  position: relative; padding: 10rem 3rem 5rem; overflow: hidden;
}
.si-hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 70% at 90% 50%, rgba(201,168,76,.04) 0%, transparent 60%),
    linear-gradient(180deg, #0a0906 0%, #0d0b07 60%, #0a0906 100%);
}
.si-hero-grid {
  position: absolute; inset: 0; opacity: .04;
  background-image:
    linear-gradient(rgba(201,168,76,.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,.4) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 60% 90% at 100% 50%, black 20%, transparent 80%);
}
.si-hero-inner { position: relative; max-width: 1100px; margin: 0 auto; }
.si-hero-eyebrow {
  font-size: .68rem; letter-spacing: .35em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.2rem;
  display: flex; align-items: center; gap: 1rem;
}
.si-hero-eyebrow::before { content: ''; width: 32px; height: .5px; background: var(--gold-dim); }
.si-hero-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--white); line-height: 1.1; margin-bottom: 1.5rem;
}
.si-hero-title span { color: var(--gold); }
.si-hero-desc {
  font-size: 1rem; line-height: 1.9; color: var(--body-text);
  font-weight: 300; max-width: 560px;
}

/* ── LAYOUT ── */
.si-layout { max-width: 1100px; margin: 0 auto; padding: 0 3rem 6rem; }

/* ── QUICK STATS BAR ── */
.si-stats-bar {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1.5px; background: var(--border); margin-bottom: 1.5px;
}
.si-stat {
  background: var(--dark); padding: 1.8rem 2rem;
  display: flex; flex-direction: column; gap: .4rem;
  position: relative; overflow: hidden; transition: background .2s;
}
.si-stat:hover { background: rgba(201,168,76,.025); }
.si-stat::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 1.5px; background: linear-gradient(to right, transparent, var(--stat-color, var(--gold)), transparent);
  opacity: 0; transition: opacity .3s;
}
.si-stat:hover::after { opacity: 1; }
.si-stat-label {
  font-size: .58rem; letter-spacing: .28em; text-transform: uppercase; color: var(--muted);
}
.si-stat-value {
  font-family: 'Cinzel', serif; font-size: 1.3rem; font-weight: 700;
  color: var(--stat-color, var(--gold)); letter-spacing: .06em;
}
.si-stat-sub {
  font-size: .7rem; color: var(--muted); letter-spacing: .06em; font-weight: 300;
}

/* ── STATUS INDICATOR ── */
.si-status-dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; margin-right: .5rem; vertical-align: middle;
  animation: si-pulse 2.5s ease-in-out infinite;
}
.si-status-dot.online { background: #5dca8a; box-shadow: 0 0 6px rgba(93,202,138,.5); }
.si-status-dot.offline { background: #ca5d5d; box-shadow: 0 0 6px rgba(202,93,93,.5); animation: none; }
.si-status-dot.unknown { background: var(--muted); animation: none; }
@keyframes si-pulse {
  0%, 100% { opacity: 1; } 50% { opacity: .4; }
}

/* ── SECTION BLOCKS ── */
.si-blocks { display: flex; flex-direction: column; gap: 1.5px; background: var(--border); }
.si-block { background: var(--dark); }
.si-block-header {
  display: flex; align-items: center; gap: 1.5rem;
  padding: 2rem 2.5rem 1.5rem;
  border-bottom: .5px solid rgba(201,168,76,.07);
}
.si-block-icon {
  width: 36px; height: 36px; flex-shrink: 0;
  border: .5px solid rgba(201,168,76,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; color: var(--gold-dim);
}
.si-block-label {
  font-size: .58rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .3rem;
}
.si-block-title {
  font-family: 'Cinzel', serif; font-size: 1.1rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--white);
}
.si-block-body { padding: 2rem 2.5rem; }
.si-block-body p {
  font-size: .92rem; line-height: 1.85; color: var(--body-text);
  font-weight: 300; margin-bottom: 1rem;
}
.si-block-body p:last-child { margin-bottom: 0; }

/* ── INFO TABLE ── */
.si-info-table {
  display: flex; flex-direction: column;
  gap: 1.5px; background: var(--border); margin: 1rem 0;
}
.si-info-row {
  display: flex; align-items: center; gap: 1.5rem;
  background: var(--dark); padding: .85rem 1.4rem;
}
.si-info-label {
  font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); flex-shrink: 0; width: 140px;
}
.si-info-value {
  font-family: 'Rajdhani', sans-serif; font-size: .92rem;
  font-weight: 500; letter-spacing: .05em; color: var(--white); flex: 1;
}
.si-info-value.mono {
  font-family: 'Courier New', monospace; font-size: .85rem;
  color: var(--gold); letter-spacing: .08em;
}
.si-copy-btn {
  font-size: .58rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); border: .5px solid rgba(201,168,76,.15);
  background: none; padding: .28rem .65rem; cursor: pointer;
  transition: all .2s; flex-shrink: 0;
}
.si-copy-btn:hover { color: var(--gold); border-color: var(--gold-dim); }
.si-copy-btn.copied { color: #5dca8a; border-color: rgba(93,202,138,.4); }

/* ── RULES LIST ── */
.si-rules-list {
  display: flex; flex-direction: column; gap: 1.5px;
  background: var(--border); margin: 1rem 0;
}
.si-rule {
  display: flex; gap: 1.4rem; align-items: flex-start;
  background: var(--dark); padding: 1.3rem 1.5rem;
  transition: background .2s;
}
.si-rule:hover { background: rgba(201,168,76,.025); }
.si-rule-num {
  font-family: 'Cinzel', serif; font-size: .75rem; font-weight: 700;
  color: var(--gold); flex-shrink: 0; width: 24px;
  padding-top: .1rem;
}
.si-rule-content {}
.si-rule-title {
  font-family: 'Rajdhani', sans-serif; font-size: .88rem;
  font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--white); margin-bottom: .3rem;
}
.si-rule-desc {
  font-size: .85rem; line-height: 1.72; color: var(--body-text);
  font-weight: 300;
}
.si-rule-severity {
  margin-left: auto; flex-shrink: 0; align-self: flex-start;
  font-size: .55rem; letter-spacing: .2em; text-transform: uppercase;
  padding: .25rem .65rem; border: .5px solid; margin-top: .1rem;
}
.si-rule-severity.low { color: #5dca8a; border-color: rgba(93,202,138,.3); }
.si-rule-severity.med { color: #e8a830; border-color: rgba(232,168,48,.3); }
.si-rule-severity.high { color: #ca5d5d; border-color: rgba(202,93,93,.3); }

/* ── GOOD TO KNOW ── */
.si-tips-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1.5px; background: var(--border); margin: 1rem 0;
}
.si-tip {
  background: var(--dark); padding: 1.5rem 1.8rem;
  display: flex; gap: 1rem; align-items: flex-start;
  transition: background .2s;
}
.si-tip:hover { background: rgba(201,168,76,.025); }
.si-tip-icon {
  font-size: .8rem; color: var(--gold-dim); flex-shrink: 0;
  width: 26px; height: 26px; border: .5px solid rgba(201,168,76,.2);
  display: flex; align-items: center; justify-content: center;
  margin-top: .1rem;
}
.si-tip-title {
  font-family: 'Rajdhani', sans-serif; font-size: .82rem;
  font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--white); margin-bottom: .35rem;
}
.si-tip-desc {
  font-size: .82rem; line-height: 1.7; color: var(--body-text); font-weight: 300;
}

/* ── HELP CTA ROW ── */
.si-help-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.5px; background: var(--border); margin-top: 1.5px;
}
.si-help-card {
  background: var(--dark); padding: 2.2rem 2.5rem;
  display: flex; flex-direction: column; gap: 1rem;
  transition: background .2s; text-decoration: none; color: inherit;
}
.si-help-card:hover { background: rgba(201,168,76,.03); }
.si-help-card-label {
  font-size: .58rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold);
}
.si-help-card-title {
  font-family: 'Cinzel', serif; font-size: 1rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--white);
}
.si-help-card-desc {
  font-size: .85rem; line-height: 1.7; color: var(--body-text); font-weight: 300; flex: 1;
}
.si-help-card-link {
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-dim); display: flex; align-items: center; gap: .5rem;
  transition: color .2s;
}
.si-help-card:hover .si-help-card-link { color: var(--gold); }
.si-help-card-link::after { content: '→'; }

/* ── NOTE ── */
.si-note {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1rem 1.4rem;
  border-left: 2px solid rgba(201,168,76,.35);
  background: rgba(201,168,76,.03);
  margin: 1rem 0;
}
.si-note-icon { font-size: .7rem; color: var(--gold); flex-shrink: 0; margin-top: .15rem; }
.si-note p {
  font-size: .87rem; line-height: 1.75; color: var(--muted);
  font-weight: 300; margin: 0 !important;
}
.si-note p strong { color: var(--white); font-weight: 600; }
.si-note p a { color: var(--gold-dim); }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .si-stats-bar { grid-template-columns: repeat(2, 1fr); }
  .si-tips-grid { grid-template-columns: 1fr; }
  .si-help-row { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .si-hero { padding: 8rem 1.5rem 3rem; }
  .si-layout { padding: 0 1.5rem 4rem; }
  .si-stats-bar { grid-template-columns: 1fr 1fr; }
  .si-block-header { padding: 1.5rem 1.5rem 1.2rem; }
  .si-block-body { padding: 1.5rem; }
  .si-info-label { width: 100px; }
  .si-rule { flex-wrap: wrap; }
  .si-rule-severity { margin-left: 0; }
}
@media (max-width: 480px) {
  .si-stats-bar { grid-template-columns: 1fr; }
}