/* zaraza.net — Zombie Escape TF2 */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&family=Rubik:wght@400;500;700&display=swap');

:root{
  --ink:#120f0b; --ink2:#1b1610; --panel:#241d15; --panel2:#2c241a;
  --line:#3d3126; --line2:#54432f;
  --tan:#ece0c8; --tan-dim:#b6a88c; --muted:#8a7c66;
  --red:#b8383b; --red-hot:#d24a3d; --blood:#8e1b17;
  --blu:#5885a2; --tox:#9dc24a; --tox-dim:#6d8c33;
  --amber:#e0a134;
  --r:4px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ink); color:var(--tan);
  font:16px/1.65 Rubik,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
body::before{ /* grain */
  content:''; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wrap{width:min(1100px,92vw); margin:0 auto}
h1,h2,h3,.dsp{font-family:Oswald,Impact,sans-serif; font-weight:700; letter-spacing:.02em; margin:0}
a{color:var(--amber); text-decoration:none}
a:hover{color:var(--tox)}

/* ---------- nav ---------- */
nav{
  position:sticky; top:0; z-index:40; background:rgba(18,15,11,.93);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.nav-in{display:flex; align-items:center; gap:28px; height:62px}
.brand{font-family:Oswald; font-weight:700; font-size:21px; letter-spacing:.06em; color:var(--tan); display:flex; align-items:center; gap:9px}
.brand b{color:var(--red-hot)}
.nav-links{display:flex; gap:22px; margin-left:auto; font-size:14px; text-transform:uppercase; letter-spacing:.09em}
.nav-links a{color:var(--tan-dim); font-weight:500}
.nav-links a:hover{color:var(--tan)}
.live{
  display:flex; align-items:center; gap:7px; font-family:Oswald; font-size:14px;
  padding:6px 12px; border:1px solid var(--line2); border-radius:99px; background:var(--panel);
  letter-spacing:.05em; white-space:nowrap;
}
.dot{width:8px; height:8px; border-radius:50%; background:var(--muted)}
.dot.on{background:var(--tox); box-shadow:0 0 0 0 rgba(157,194,74,.7); animation:pulse 2.2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(157,194,74,0)}100%{box-shadow:0 0 0 0 rgba(157,194,74,0)}}

/* ---------- hero ---------- */
header.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line);
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(184,56,59,.20), transparent 60%),
    radial-gradient(90% 70% at 8% 100%, rgba(109,140,51,.16), transparent 60%),
    linear-gradient(180deg,#191410,#0f0c09);
}
.hero-in{position:relative; z-index:2; padding:88px 0 76px}
.eyebrow{font-family:Oswald; letter-spacing:.34em; text-transform:uppercase; font-size:13px; color:var(--red-hot); margin-bottom:18px}
h1{font-size:clamp(50px,9vw,104px); line-height:.92; text-transform:uppercase}
h1 .n{color:var(--red-hot)}
.tag{font-size:clamp(17px,2.3vw,21px); color:var(--tan-dim); max-width:56ch; margin:22px 0 34px}
.cta{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.btn{
  display:inline-flex; align-items:center; gap:10px; font-family:Oswald; font-weight:600;
  font-size:16px; letter-spacing:.08em; text-transform:uppercase; padding:14px 26px;
  border-radius:var(--r); border:1px solid transparent; cursor:pointer; transition:.16s;
}
.btn-red{background:var(--red); color:#fff; border-color:#d8595a;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 6px 18px rgba(142,27,23,.42)}
.btn-red:hover{background:var(--red-hot); color:#fff; transform:translateY(-1px)}
.btn-ghost{background:var(--panel); color:var(--tan); border-color:var(--line2)}
.btn-ghost:hover{background:var(--panel2); color:var(--tan); border-color:var(--tan-dim)}
.ipbox{
  display:inline-flex; align-items:center; gap:12px; background:#100d09; border:1px dashed var(--line2);
  border-radius:var(--r); padding:12px 16px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:16px; color:var(--tox);
}
.ipbox button{background:none; border:0; color:var(--tan-dim); cursor:pointer; font-size:12px;
  text-transform:uppercase; letter-spacing:.1em; font-family:Oswald; padding:0}
.ipbox button:hover{color:var(--tan)}
.biohaz{position:absolute; right:-90px; top:-40px; width:560px; opacity:.055; z-index:1; color:var(--tan)}

/* ---------- sections ---------- */
section{padding:76px 0; border-bottom:1px solid var(--line); position:relative; z-index:2}
.kicker{font-family:Oswald; letter-spacing:.28em; text-transform:uppercase; font-size:12px; color:var(--tox-dim); margin-bottom:12px}
h2{font-size:clamp(30px,4.4vw,44px); text-transform:uppercase; margin-bottom:16px}
.lede{color:var(--tan-dim); max-width:66ch; margin-bottom:38px}
.grid3{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px}
.card{background:linear-gradient(180deg,var(--panel),var(--ink2)); border:1px solid var(--line);
  border-radius:var(--r); padding:26px; position:relative; overflow:hidden}
.card::before{content:''; position:absolute; inset:0 auto 0 0; width:3px; background:var(--accent,var(--red))}
.card h3{font-size:21px; text-transform:uppercase; margin-bottom:9px}
.card p{color:var(--tan-dim); font-size:15px; margin:0}
.num{font-family:Oswald; font-size:13px; letter-spacing:.2em; color:var(--muted); margin-bottom:14px}

/* ---------- server panel ---------- */
.server{display:grid; grid-template-columns:1.15fr .85fr; gap:20px}
.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.stat{background:var(--panel); padding:22px 24px}
.stat .k{font-family:Oswald; font-size:12px; letter-spacing:.19em; text-transform:uppercase; color:var(--muted)}
.stat .v{font-family:Oswald; font-size:30px; margin-top:4px; word-break:break-all}
.stat .v.small{font-size:19px}
.bar{height:6px; background:#100d09; border-radius:99px; margin-top:12px; overflow:hidden}
.bar i{display:block; height:100%; background:linear-gradient(90deg,var(--tox-dim),var(--tox)); width:0; transition:width .5s}
.plist{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:22px 24px}
.plist h3{font-size:15px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:14px}
.plist ol{list-style:none; margin:0; padding:0; font-size:14px}
.plist li{display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px dashed var(--line)}
.plist li:last-child{border:0}
.plist .sc{color:var(--amber); font-family:ui-monospace,monospace}
.empty{color:var(--muted); font-size:14px; font-style:italic}

/* ---------- steps / code ---------- */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px}
code.blk{display:block; background:#0c0a07; border:1px solid var(--line); border-left:3px solid var(--tox-dim);
  border-radius:var(--r); padding:15px 18px; font-family:ui-monospace,Menlo,monospace; font-size:14px;
  color:var(--tox); overflow-x:auto; margin-top:12px}
ul.rules{list-style:none; padding:0; margin:0; display:grid; gap:12px}
ul.rules li{padding-left:30px; position:relative; color:var(--tan-dim)}
ul.rules li::before{content:'✖'; position:absolute; left:0; top:0; color:var(--red); font-size:14px}

/* ---------- maps ---------- */
.maps{display:grid; gap:12px}
.map{display:flex; align-items:center; gap:16px; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); padding:16px 20px}
.map .mn{font-family:ui-monospace,monospace; font-size:15px; color:var(--tan)}
.map .badge{margin-left:auto; font-family:Oswald; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  padding:4px 11px; border-radius:99px; border:1px solid var(--line2); color:var(--muted); white-space:nowrap}
.map .badge.work{color:var(--amber); border-color:#5c4620; background:rgba(224,161,52,.09)}
.map .badge.live{color:var(--tox); border-color:var(--tox-dim); background:rgba(157,194,74,.09)}

footer{padding:44px 0 56px; color:var(--muted); font-size:14px}
.foot{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:center}

@media(max-width:820px){
  .server{grid-template-columns:1fr}
  .nav-links{display:none}
  .hero-in{padding:62px 0 54px}
  section{padding:56px 0}
}

/* ---------- chart ---------- */
.chart-wrap{margin-top:20px; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); padding:22px 24px 18px}
.chart-head{display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:16px}
.chart-head h3{font-size:15px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.chart-head .peak{font-family:Oswald; font-size:14px; letter-spacing:.08em; color:var(--amber)}
#chart{width:100%; height:150px; display:block; overflow:visible}
.chart-axis{display:flex; justify-content:space-between; margin-top:9px;
  font-family:Oswald; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.chart-empty{fill:var(--muted); font-family:Rubik,sans-serif; font-size:13px; font-style:italic}