:root{
  --bg:#070A12;
  --bg2:#0b1220;
  --card1: rgba(13,23,38,.78);
  --card2: rgba(13,23,38,.40);
  --text:#e9f0ff;
  --muted:#a9b6cf;
  --shadow: 0 18px 55px rgba(0,0,0,.45);
  --r:20px;
  --line: rgba(255,255,255,.08);
  --btn: rgba(0,0,0,.18);
  --tile: rgba(0,0,0,.14);
}
body.light{
  --bg:#f3f6ff;
  --bg2:#e9f0ff;
  --card1: rgba(255,255,255,.85);
  --card2: rgba(255,255,255,.60);
  --text:#0b1220;
  --muted:#445067;
  --shadow: 0 16px 42px rgba(12,18,32,.15);
  --line: rgba(12,18,32,.10);
  --btn: rgba(255,255,255,.75);
  --tile: rgba(255,255,255,.65);
}

*{box-sizing:border-box}
html,body{overflow-x:hidden}
body{
  margin:0;
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  min-height:100vh;
  background:
    radial-gradient(1200px 600px at 15% 10%, rgba(139,92,246,.35), transparent 60%),
    radial-gradient(1000px 600px at 85% 20%, rgba(34,211,238,.22), transparent 60%),
    radial-gradient(900px 500px at 35% 90%, rgba(139,92,246,.16), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2) 60%);
  position:relative;
}
body:before, body:after{
  content:"";
  position:fixed;
  inset:-30%;
  pointer-events:none;
  background:
    radial-gradient(closest-side, rgba(34,211,238,.10), transparent 70%),
    radial-gradient(closest-side, rgba(139,92,246,.10), transparent 70%);
  filter: blur(28px);
  opacity:.55;
  transform: translate3d(0,0,0);
  animation: floatBG 14s ease-in-out infinite;
}
body:after{
  opacity:.35;
  animation-duration:19s;
  animation-direction:reverse;
}
@keyframes floatBG{
  0%{ transform: translate(-2%, -1%) scale(1.02); }
  50%{ transform: translate(2%, 1%) scale(1.06); }
  100%{ transform: translate(-2%, -1%) scale(1.02); }
}

.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:18px 14px 70px;
  position:relative;
  z-index:1;
}

.top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:14px 16px;
  border-radius:24px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, var(--card1), var(--card2));
  box-shadow:var(--shadow);
  backdrop-filter: blur(10px);
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:240px;
}
.brand .logo{
  width:52px;
  height:52px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-shadow:0 0 25px rgba(139,92,246,.25);
}
body.light .brand .logo{
  border-color: rgba(12,18,32,.10);
  background: rgba(255,255,255,.7);
}
.brand .logo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.brand b{
  font-size:18px;
  display:block;
}
.brand span{
  display:block;
  color:var(--muted);
  font-size:13px;
  margin-top:2px;
}

.badges{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.badge{
  display:inline-block;
  padding:9px 12px;
  border-radius:999px;
  white-space:nowrap;
  border:1px solid rgba(255,255,255,.10);
  background:var(--btn);
  font-size:13px;
  color:rgba(233,240,255,.86);
  text-decoration:none;
}
body.light .badge{
  color: rgba(12,18,32,.92);
  border-color: rgba(12,18,32,.12);
}
.badge.primary{
  background:linear-gradient(90deg,#8b5cf6,#22d3ee);
  color:#fff;
  font-weight:700;
  box-shadow:0 0 24px rgba(139,92,246,.28);
}
.badge.btn{ cursor:pointer; }
.badge.small{
  padding:7px 10px;
  font-size:12.5px;
}

.hero{
  margin-top:16px;
  border:1px solid var(--line);
  border-radius:26px;
  padding:18px;
  box-shadow:var(--shadow);
  backdrop-filter: blur(10px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  position:relative;
  overflow:hidden;
  background:linear-gradient(90deg, rgba(139,92,246,.18), rgba(34,211,238,.10));
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--hero-map-bg, url('/assets/maps/default.jpg'));
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:.40;
  filter:saturate(1.18) contrast(1.08) brightness(1.06);
  z-index:0;
  transition: opacity .25s ease;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(7,10,18,.72), rgba(7,10,18,.42)),
    linear-gradient(180deg, rgba(139,92,246,.08), rgba(34,211,238,.04));
  z-index:0;
}
body.light .hero::after{
  background:
    linear-gradient(90deg, rgba(243,246,255,.70), rgba(233,240,255,.42)),
    linear-gradient(180deg, rgba(139,92,246,.04), rgba(34,211,238,.03));
}
.hero > *{
  position:relative;
  z-index:1;
}
.hero .left{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:260px;
}
.hero .mark{
  width:64px;
  height:64px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  overflow:hidden;
}
body.light .hero .mark{
  border-color: rgba(12,18,32,.10);
  background: rgba(255,255,255,.65);
}
.hero .mark img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.hero h1{
  margin:0;
  font-size:20px;
}
.hero p{
  margin:6px 0 0;
  color:rgba(233,240,255,.82);
  font-size:13.5px;
  line-height:1.45;
}
body.light .hero p{
  color: rgba(12,18,32,.80);
}
.hero .right{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}
.mini{
  color:rgba(233,240,255,.76);
  font-size:12.5px;
}
body.light .mini{
  color: rgba(12,18,32,.70);
}

.statusBadge{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.statusDot{
  width:8px;
  height:8px;
  border-radius:999px;
  display:inline-block;
}
.status-ok{
  background:#22c55e;
  box-shadow:0 0 12px rgba(34,197,94,.45);
}
.status-warn{
  background:#f59e0b;
  box-shadow:0 0 12px rgba(245,158,11,.45);
}
.status-bad{
  background:#ef4444;
  box-shadow:0 0 12px rgba(239,68,68,.45);
}

.badge.clickable{
  position:relative;
  border-color: rgba(120,170,255,.35);
  animation:pulseGlow 2.2s ease-in-out infinite;
  cursor:pointer;
}
@keyframes pulseGlow{
  0%{ box-shadow:0 0 0 rgba(139,92,246,0); }
  50%{ box-shadow:0 0 18px rgba(139,92,246,.25); }
  100%{ box-shadow:0 0 0 rgba(139,92,246,0); }
}
.dot{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:99px;
  background:#22d3ee;
  margin-right:8px;
  vertical-align:middle;
  box-shadow:0 0 14px rgba(34,211,238,.35);
  animation: dotBlink 1.35s ease-in-out infinite;
}
@keyframes dotBlink{
  0%,100%{opacity:.55}
  50%{opacity:1}
}

.grid{
  display:grid;
  grid-template-columns: 1fr 380px;
  gap:16px;
  margin-top:16px;
}
.card{
  border:1px solid var(--line);
  background:linear-gradient(180deg, var(--card1), var(--card2));
  border-radius:var(--r);
  padding:16px;
  box-shadow:var(--shadow);
  backdrop-filter: blur(10px);
}
.card.wide{ grid-column: 1 / -1; }

.h1 h2{
  margin:0;
  font-size:18px;
}
.h1 p{
  margin:6px 0 0;
  color:var(--muted);
  line-height:1.5;
}
.hr{
  height:1px;
  background:var(--line);
  margin:14px 0;
}

.tiles{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
@media(max-width:560px){
  .tiles{grid-template-columns:1fr}
}
.tile{
  display:block;
  text-decoration:none;
  color:var(--text);
  border:1px solid rgba(255,255,255,.08);
  background:var(--tile);
  border-radius:18px;
  padding:12px;
  transition:transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
  position:relative;
  overflow:hidden;
}
.tile > *{ position:relative; z-index:1; }
body.light .tile{
  border-color: rgba(12,18,32,.10);
}
.tile::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:18px;
  opacity:0;
  background:linear-gradient(90deg, rgba(139,92,246,.26), rgba(34,211,238,.20));
  transition:opacity .18s ease;
  z-index:0;
}
.tile:hover{
  transform:translateY(-3px);
  border-color:rgba(120,170,255,.45);
  background:linear-gradient(90deg, rgba(139,92,246,.10), rgba(34,211,238,.06));
}
.tile:hover::after{ opacity:1; }
.tile b{
  display:block;
  font-size:14.5px;
}
.tile span{
  display:block;
  color:var(--muted);
  font-size:12.5px;
  margin-top:4px;
  line-height:1.35;
}
.pill{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  font-size:12.5px;
  color:rgba(233,240,255,.84);
  margin-top:10px;
}
body.light .pill{
  border-color: rgba(12,18,32,.10);
  background: rgba(255,255,255,.75);
  color: rgba(12,18,32,.82);
}

.newsitem{
  border:1px solid rgba(255,255,255,.08);
  background:var(--tile);
  border-radius:18px;
  padding:12px;
  margin-top:10px;
}
body.light .newsitem{
  border-color: rgba(12,18,32,.10);
}
.newsitem .meta{
  color:var(--muted);
  font-size:12.5px;
}
.newsitem .text{
  margin-top:6px;
  line-height:1.45;
}
.a{
  color:rgba(233,240,255,.90);
  text-decoration:none;
  border-bottom:1px dashed rgba(233,240,255,.35);
}
body.light .a{
  color: rgba(12,18,32,.90);
  border-bottom-color: rgba(12,18,32,.30);
}

.chartWrap{
  margin-top:10px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.14);
  border-radius:18px;
  padding:12px;
}
body.light .chartWrap{
  border-color: rgba(12,18,32,.10);
  background: rgba(255,255,255,.55);
}
.chartHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:8px;
}
.chartLegend{
  color:var(--muted);
  font-size:12px;
}
#onlineChart{
  width:100%;
  height:220px;
  display:block;
  border-radius:14px;
}
.chartMeta{
  margin-top:8px;
  color:var(--muted);
  font-size:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.chatLine{
  margin-bottom:6px;
  line-height:1.45;
}
.chatTime{
  color:var(--muted);
}
.chatNameBlue{
  color:#60a5fa;
  font-weight:700;
}
.chatNameRed{
  color:#f87171;
  font-weight:700;
}
.chatNameWhite{
  color:#f3f4f6;
  font-weight:700;
}
body.light .chatNameWhite{
  color:#111827;
}

@media (min-width: 981px){
  .card.socials{
    position: sticky;
    top: 16px;
    align-self: start;
  }
}

#playersBody .plist{
  max-height:52vh;
  overflow-y:auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
#playersBody .plist::-webkit-scrollbar{ width:10px; }
#playersBody .plist::-webkit-scrollbar-thumb{
  background: rgba(233,240,255,.18);
  border-radius:999px;
  border: 2px solid rgba(0,0,0,.25);
}
#playersBody .plist::-webkit-scrollbar-track{
  background: rgba(0,0,0,.08);
  border-radius:999px;
}

.soc{ display:flex; align-items:center; gap:12px; }
.ico{
  width:42px;
  height:42px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.16);
}
body.light .ico{
  border-color: rgba(12,18,32,.10);
}
.titleRow{ display:flex; align-items:center; gap:8px; }
.tagPlatform{
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  color:rgba(233,240,255,.78);
}
body.light .tagPlatform{
  border-color: rgba(12,18,32,.10);
  background: rgba(255,255,255,.75);
  color: rgba(12,18,32,.70);
}

@keyframes neonPulse{
  0%{ box-shadow:0 0 0 transparent; }
  50%{ box-shadow:0 0 14px currentColor; }
  100%{ box-shadow:0 0 0 transparent; }
}
.tile.vk:hover{ border-color:#4a76a8; box-shadow:0 0 18px rgba(74,118,168,.60); color:#4a76a8; animation: neonPulse 1.8s infinite; }
.tile.tg:hover{ border-color:#2ca5e0; box-shadow:0 0 18px rgba(44,165,224,.60); color:#2ca5e0; animation: neonPulse 1.8s infinite; }
.tile.ds:hover{ border-color:#5865F2; box-shadow:0 0 18px rgba(88,101,242,.65); color:#5865F2; animation: neonPulse 1.8s infinite; }

.tile.sec:hover{ animation: neonPulse 1.8s infinite; }
.tile.sec.stats:hover{ border-color:#22d3ee; box-shadow:0 0 18px rgba(34,211,238,.60); color:#22d3ee; }
.tile.sec.donate:hover{ border-color:#8b5cf6; box-shadow:0 0 18px rgba(139,92,246,.60); color:#8b5cf6; }
.tile.sec.anticheat:hover{ border-color:#f97316; box-shadow:0 0 18px rgba(249,115,22,.60); color:#f97316; }
.tile.sec.bans:hover{ border-color:#ef4444; box-shadow:0 0 18px rgba(239,68,68,.60); color:#ef4444; }
.tile.sec.rules:hover{ border-color:#a3e635; box-shadow:0 0 18px rgba(163,230,53,.60); color:#a3e635; }
.tile.sec.admin:hover{ border-color:#60a5fa; box-shadow:0 0 18px rgba(96,165,250,.60); color:#60a5fa; }
.tile.sec.music:hover{ border-color:#f472b6; box-shadow:0 0 18px rgba(244,114,182,.65); color:#f472b6; }
.tile.sec.models:hover{ border-color:#fbbf24; box-shadow:0 0 18px rgba(251,191,36,.65); color:#fbbf24; animation: neonPulse 1.8s infinite; }

.promo{
  border:1px solid var(--line);
  background:linear-gradient(90deg, rgba(139,92,246,.18), rgba(34,211,238,.10));
  border-radius:18px;
  padding:12px;
}
.promo b{ font-size:14px; }
.promo .t{
  color: var(--muted);
  margin-top:6px;
  font-size:12.5px;
}

#preloader{
  position:fixed;
  inset:0;
  z-index:9999;
  background:linear-gradient(180deg, var(--bg), var(--bg2));
  display:flex;
  align-items:center;
  justify-content:center;
}
#preloader .box{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
  padding:18px 20px;
  border-radius:22px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, var(--card1), var(--card2));
  box-shadow: var(--shadow);
}
#preloader .img{
  width:64px;
  height:64px;
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
}
#preloader .img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
#preloader .bar{
  width:160px;
  height:8px;
  border-radius:99px;
  background:rgba(255,255,255,.10);
  overflow:hidden;
}
#preloader .bar i{
  display:block;
  height:100%;
  width:40%;
  background:linear-gradient(90deg, rgba(34,211,238,.8), rgba(139,92,246,.8));
  border-radius:99px;
  animation: loadbar 1.2s ease-in-out infinite;
}
@keyframes loadbar{
  0%{ transform: translateX(-60%); }
  50%{ transform: translateX(70%); }
  100%{ transform: translateX(220%); }
}

.footer{
  margin-top:18px;
  color:rgba(233,240,255,.62);
  font-size:12.5px;
  text-align:center;
}
body.light .footer{
  color: rgba(12,18,32,.60);
}

.nw-embed{ max-width:100%; margin:0; }
.nw-embed-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:6px;
}
.nw-embed-title{
  font-weight:900;
  font-size:14px;
}
.nw-embed-sub{ display:none; }
.nw-embed-nav{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.nw-embed-btn{
  cursor:pointer;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: rgba(233,240,255,.90);
  border-radius:999px;
  padding:7px 10px;
  font-size:12.5px;
  line-height:1;
}
body.light .nw-embed-btn{
  background: rgba(255,255,255,.75);
  border-color: rgba(12,18,32,.10);
  color: rgba(12,18,32,.90);
}
.nw-embed-count{
  font-size:12px;
  color: var(--muted);
}
.nw-embed-card{
  margin-top:8px;
  border:1px solid rgba(255,255,255,.08);
  background: var(--tile);
  border-radius:18px;
  overflow:hidden;
}
body.light .nw-embed-card{
  border-color: rgba(12,18,32,.10);
}
.nw-embed-top{ padding:12px; }
.nw-embed-meta{
  color: var(--muted);
  font-size:12.5px;
}
.nw-embed-h3{
  margin-top:6px;
  font-weight:900;
  font-size:14.5px;
}
.nw-embed-textbox{
  margin-top:8px;
  padding:10px 10px;
  border-radius:14px;
  background: rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.08);
}
body.light .nw-embed-textbox{
  background: rgba(255,255,255,.65);
  border-color: rgba(12,18,32,.10);
}
.nw-embed-text{ line-height:1.55; }
.nw-embed-media{
  display:block;
  margin:0 12px 12px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  text-decoration:none;
}
body.light .nw-embed-media{
  background: rgba(255,255,255,.65);
  border-color: rgba(12,18,32,.10);
}
.nw-embed-img{
  width:100%;
  height:auto;
  display:block;
  object-fit: contain;
  background: rgba(0,0,0,.18);
}

@media (max-width: 520px){
  .nw-embed-head{ align-items:flex-start; }
  .nw-embed-nav{ width:100%; justify-content:space-between; }
  .nw-embed-btn{ flex: 1 1 auto; text-align:center; padding:9px 10px; }
  .nw-embed-count{ flex: 0 0 auto; }
}

@keyframes btnGlow{
  0%   { box-shadow: 0 0 0 rgba(0,0,0,0); }
  50%  { box-shadow: 0 0 26px rgba(139,92,246,.22), 0 0 18px rgba(34,211,238,.16); }
  100% { box-shadow: 0 0 0 rgba(0,0,0,0); }
}
body.desktop .badge.btn,
body.desktop .badge.primary,
body.desktop .nw-embed-btn{
  position:relative;
  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease;
}
body.desktop .badge.btn:hover,
body.desktop .badge.primary:hover,
body.desktop .nw-embed-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(120,170,255,.45);
}
body.desktop .badge.primary{
  animation: btnGlow 2.6s ease-in-out infinite;
}
body.desktop .badge.btn{
  box-shadow: 0 0 0 rgba(0,0,0,0);
}
body.desktop .badge.btn:hover{
  box-shadow: 0 0 18px rgba(139,92,246,.18);
}

.bottomSupport{
  margin-top:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.bottomSupport .txt{ min-width:240px; }

/* mobile fixes */
.newsitem .text,
#serverChat,
#eventLog,
#recordsBox,
#adminsOnline,
#topFrags,
#mapHistory{
  word-break: break-word;
}

#statNow,
#statRecord,
#statMap,
#statPing,
#statUp,
#statTopMap{
  flex: 1 1 calc(50% - 10px);
  min-width: 150px;
  text-align:center;
}

@media (max-width: 980px){
  .wrap{
    padding:12px 10px 56px;
  }

  .grid{
    grid-template-columns:1fr;
  }

  .card.sections{ order:1; }
  .card.socials{ order:2; }
  .card.faq{ order:3; }

  .top{
    padding:12px;
    border-radius:20px;
  }

  .brand{
    min-width:0;
    width:100%;
  }

  .brand .logo{
    width:46px;
    height:46px;
    border-radius:14px;
    flex:0 0 46px;
  }

  .brand b{
    font-size:16px;
    line-height:1.2;
  }

  .brand span{
    font-size:12.5px;
  }

  .badges{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .badges .badge{
    width:100%;
    text-align:center;
    justify-content:center;
    margin:0;
  }

  .hero{
    padding:14px;
    border-radius:20px;
  }

  .hero .left{
    width:100%;
    min-width:0;
    align-items:flex-start;
  }

  .hero .mark{
    width:56px;
    height:56px;
    border-radius:18px;
    flex:0 0 56px;
  }

  .hero h1{
    font-size:18px;
    line-height:1.2;
  }

  .hero p{
    font-size:13px;
    line-height:1.45;
  }

  .hero .right{
    width:100%;
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    justify-content:stretch;
  }

  .hero .right .badge,
  .hero .right .statusBadge{
    width:100%;
    justify-content:center;
    text-align:center;
  }

  .hero .mini{
    width:100%;
    text-align:left;
    white-space:normal;
    line-height:1.45;
    padding:10px 12px;
    border:1px solid var(--line);
    border-radius:14px;
    background:rgba(0,0,0,.12);
  }

  body.light .hero .mini{
    background:rgba(255,255,255,.65);
  }

  .card{
    padding:14px;
    border-radius:18px;
  }

  .newsitem{
    padding:10px;
    border-radius:16px;
  }

  .chartWrap{
    padding:10px;
    border-radius:16px;
  }

  #onlineChart{
    height:190px;
  }

  .bottomSupport{
    align-items:stretch;
  }

  .bottomSupport .txt{
    min-width:0;
    width:100%;
  }

  .bottomSupport .badge.primary{
    width:100%;
    text-align:center;
  }

  #playersModal > div{
    margin:2vh auto;
    padding:0 10px;
  }
}

@media (max-width: 640px){
  .wrap{
    padding:10px 8px 50px;
  }

  .top,
  .hero,
  .card,
  .promo{
    border-radius:16px;
  }

  .badges{
    grid-template-columns:1fr;
  }

  .badge,
  .badge.small,
  .badge.primary,
  .badge.btn{
    padding:10px 12px;
    font-size:13px;
  }

  .tiles{
    grid-template-columns:1fr;
  }

  .hero .left{
    gap:12px;
  }

  .hero .mark{
    width:52px;
    height:52px;
    border-radius:16px;
    flex:0 0 52px;
  }

  .hero h1{
    font-size:17px;
  }

  .hero p{
    font-size:12.5px;
  }

  .chartHead{
    align-items:flex-start;
  }

  .chartMeta{
    display:grid;
    grid-template-columns:1fr;
    gap:6px;
  }

  #statNow,
  #statRecord,
  #statMap,
  #statPing,
  #statUp,
  #statTopMap{
    flex: 1 1 100%;
    min-width:0;
  }

  .pill{
    word-break:break-word;
  }

  .soc{
    align-items:flex-start;
  }

  .ico{
    width:40px;
    height:40px;
    border-radius:12px;
    flex:0 0 40px;
  }

  .titleRow{
    flex-wrap:wrap;
  }

  #onlineChart{
    height:175px;
  }
}

@media (max-width: 420px){
  .wrap{
    padding:8px 6px 44px;
  }

  .brand b{
    font-size:15px;
  }

  .brand span{
    font-size:12px;
  }

  .hero{
    padding:12px;
  }

  .hero .mark{
    width:48px;
    height:48px;
    border-radius:14px;
    flex:0 0 48px;
  }

  .hero h1{
    font-size:16px;
  }

  .hero p{
    font-size:12px;
  }

  .badge,
  .badge.small,
  .badge.primary,
  .badge.btn{
    font-size:12.5px;
    padding:9px 11px;
  }

  .card{
    padding:12px;
  }

  .newsitem{
    padding:9px;
  }

  .chartWrap{
    padding:8px;
  }

  #onlineChart{
    height:160px;
  }

  #playersModal > div{
    padding:0 6px;
  }

  #playersBody .plist > div{
    grid-template-columns: 1fr 70px 78px !important;
    gap:6px !important;
    font-size:12px;
  }
}

@media (max-width: 520px){
  #playersBody .plist > div{ grid-template-columns: 1fr 80px 90px !important; }
}