:root{
  --bg:#090b0f; --panel:#11151b; --panel2:#171c23; --text:#f5f7fa; --muted:#99a3ad;
  --orange:#ff9700; --gold:#ffc436; --green:#39e75f; --blue:#29a8ff; --purple:#a85cff;
  --red:#ff4f5e; --border:rgba(255,255,255,.09); --shadow:0 18px 50px rgba(0,0,0,.34);
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:
radial-gradient(circle at 20% -10%,rgba(255,151,0,.13),transparent 28%),
radial-gradient(circle at 90% 10%,rgba(255,79,94,.09),transparent 24%),
var(--bg);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif}
a{color:inherit;text-decoration:none}.wrap{width:min(1450px,95vw);margin:auto}
.topbar{position:sticky;top:0;z-index:30;background:rgba(7,9,12,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.nav{height:72px;display:flex;align-items:center;gap:26px}
.brand{font-size:19px;font-weight:950;line-height:.92;margin-right:auto;text-transform:uppercase;letter-spacing:.5px}
.brand span{color:var(--orange)} .nav a{font-size:13px;font-weight:850;color:#cdd3da;text-transform:uppercase}
.nav a:hover,.nav a.active{color:var(--orange)}
.hero{display:grid;grid-template-columns:1.25fr .9fr;gap:18px;padding:24px 0 16px}
.hero-art,.server-card,.card,.tile,.leaderboard,.activity{border:1px solid var(--border);background:linear-gradient(180deg,rgba(24,29,36,.96),rgba(12,15,19,.96));border-radius:14px;box-shadow:var(--shadow)}
.hero-art{min-height:520px;background-image:linear-gradient(90deg,rgba(0,0,0,.04),rgba(0,0,0,.36)),url('sillys-hero.jpg');background-size:cover;background-position:center;position:relative;overflow:hidden}
.hero-art:after{content:"";position:absolute;inset:auto 0 0;height:35%;background:linear-gradient(transparent,rgba(0,0,0,.7))}
.server-card{padding:24px;display:flex;flex-direction:column}
.online{display:flex;align-items:center;gap:12px;color:var(--green);font-size:25px;font-weight:950}.dot{width:17px;height:17px;border-radius:50%;background:var(--green);box-shadow:0 0 18px var(--green)}
.server-card h1{font-size:31px;margin:25px 0 5px}.subtitle{color:var(--orange);font-weight:900;letter-spacing:.7px}
.map-shot{margin:20px -24px 0;padding:24px;background:linear-gradient(90deg,#18334c,#2b5b7d,#b87330);min-height:130px;display:flex;flex-direction:column;justify-content:end}
.map-shot small{color:#d8e0e8;font-weight:700}.map-shot strong{font-size:25px}
.statline{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:18px 0;border-bottom:1px solid var(--border)}
.metric small{display:block;color:var(--muted);font-size:11px;font-weight:800}.metric b{font-size:22px}
.ip{margin:18px 0;color:#d4dae0}.ip b{font-size:20px;color:white}
.join{margin-top:auto;border:0;border-radius:8px;background:linear-gradient(90deg,var(--orange),#ff6b00);color:white;font-weight:950;font-size:16px;padding:16px;cursor:pointer;box-shadow:0 10px 28px rgba(255,121,0,.22)}
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:0 0 16px}
.tile{padding:18px;min-height:104px;transition:.2s transform,.2s border-color;position:relative;overflow:hidden}
.tile:hover{transform:translateY(-3px);border-color:rgba(255,151,0,.45)}.tile .ico{font-size:30px}.tile h3{margin:8px 0 4px;font-size:15px}.tile p{margin:0;color:var(--muted);font-size:12px;line-height:1.35}
.c-blue h3{color:var(--blue)}.c-purple h3{color:var(--purple)}.c-green h3{color:#77ef5a}.c-red h3{color:var(--red)}.c-gold h3{color:var(--gold)}
.dashboard{display:grid;grid-template-columns:1.1fr .72fr 1.1fr;gap:14px;margin-bottom:18px}
.card,.leaderboard,.activity{padding:20px} .section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.section-title h2{font-size:17px;margin:0}.tinybtn{font-size:11px;color:#ccd3da;border:1px solid var(--border);padding:7px 9px;border-radius:6px}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:11px 7px;border-bottom:1px solid var(--border);font-size:13px}th{font-size:10px;color:var(--muted);text-transform:uppercase}.rank1{color:var(--gold)}.good{color:#7df39b}.avatar{width:28px;height:28px;border-radius:50%;display:inline-grid;place-items:center;margin-right:8px;background:linear-gradient(135deg,#34495e,#161b22);font-weight:900}
.live-player{display:flex;align-items:center;gap:7px;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px}.live-player .map{margin-left:auto;color:var(--orange);font-size:11px}.live-player time{color:var(--muted);font-size:11px}
.chart{height:190px;display:flex;align-items:end;gap:7px;padding:18px 4px 0;border-bottom:1px solid var(--border)}
.bar{flex:1;background:linear-gradient(var(--orange),#6c3c00);border-radius:5px 5px 0 0;min-height:5px;position:relative}
.bar:hover:after{content:attr(data-v);position:absolute;top:-26px;left:50%;transform:translateX(-50%);background:#000;padding:4px 6px;border-radius:4px;font-size:10px}
.activity-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:15px}.activity-metrics small{display:block;color:var(--muted);font-size:9px;text-transform:uppercase}.activity-metrics strong{font-size:22px;color:var(--orange)}
.footer-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:30px}.footer-strip>div{background:#11151b;padding:20px}.footer-strip b{display:block;margin-bottom:5px}.footer-strip p{margin:0;color:var(--muted);font-size:12px;line-height:1.4}
.pagehead{padding:36px 0 18px}.pagehead h1{font-size:42px;margin:0 0 8px}.pagehead p{color:var(--muted);margin:0}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.weapon-card{padding:20px}.weapon-name{display:flex;justify-content:space-between;align-items:center}.weapon-visual{font-size:44px;padding:24px 0;text-align:center}.progress{height:8px;background:#252c35;border-radius:999px;overflow:hidden}.progress>span{display:block;height:100%;background:linear-gradient(90deg,var(--orange),var(--gold))}
.profile-hero{display:grid;grid-template-columns:1fr 2fr;gap:14px}.profile-card{padding:22px}.big-avatar{width:96px;height:96px;border-radius:50%;background:linear-gradient(135deg,#25384e,#111820);display:grid;place-items:center;font-size:34px;font-weight:950;margin-bottom:15px}.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.kpi{padding:16px;border:1px solid var(--border);border-radius:10px;background:#0f1318}.kpi small{color:var(--muted);display:block}.kpi b{font-size:24px}
@media(max-width:1050px){.hero,.dashboard,.profile-hero{grid-template-columns:1fr}.tiles{grid-template-columns:repeat(3,1fr)}.hero-art{min-height:420px}.grid3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.nav a{display:none}.tiles{grid-template-columns:repeat(2,1fr)}.hero-art{min-height:350px}.statline,.activity-metrics,.kpis{grid-template-columns:repeat(2,1fr)}.grid3{grid-template-columns:1fr}.footer-strip{grid-template-columns:1fr}.pagehead h1{font-size:32px}}