@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&display=swap');

/* ═══════════════════════════════════════════════════
   DEV-MS.RO LAUNCHER v9.1
   FIX: html/body overflow nu mai blochează ACP scroll
   FIX: maps strip nu mai apare dublu
   ═══════════════════════════════════════════════════ */

:root {
  --g:   #de9b35;
  --g2:  #f0b04a;
  --g3:  #c4872a;
  --g4:  #a0691a;
  --b0:  #060709;
  --b1:  #090a0e;
  --b2:  #0d0f15;
  --b3:  #11141c;
  --b4:  #161b26;
  --t1:  #d4d6e4;
  --t2:  #6b6f8a;
  --t3:  #2e3250;
  --t4:  #1a1e32;
  --grn: #3ddc84;
  --red: #f04a4a;
  --blu: #4a90f0;
  --sb:  46px;
  --tp:  40px;
  --ms:  50px;
  --glow-g: 0 0 24px rgba(222,155,53,.22);
  --r: 8px;
  --r2: 12px;
}

/* ── BASE ─────────────────────────────────────────────
   FIX: overflow:hidden eliminat de pe html/body
   Era cauza principală pentru care ACP nu se putea derula.
   overflow:hidden rămâne DOAR pe .lnc-wrap (launcher)
   ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }
body {
  min-height: 100%;
  font-family: 'Rajdhani', 'Segoe UI', sans-serif;
  background: var(--b0);
  color: var(--t1);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: var(--b1); }
::-webkit-scrollbar-thumb { background: var(--g4); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--g); }

/* ── LAYOUT ───────────────────────────────────────── */
.lnc-wrap {
  display: grid;
  grid-template-columns: var(--sb) 1fr;
  height: 100vh;
  height: 100dvh;
  overflow: hidden; /* overflow:hidden DOAR AICI - nu pe html/body */
}

/* ── SIDEBAR ──────────────────────────────────────── */
.lnc-sb {
  background: var(--b1);
  border-right: 1px solid rgba(222,155,53,.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
  gap: 2px;
  position: relative;
  z-index: 50;
}
.lnc-sb::after {
  content: '';
  position: absolute; right: 0; top: 20%; bottom: 20%; width: 1px;
  background: linear-gradient(180deg, transparent, var(--g), transparent);
  opacity: .5;
}
.lnc-logo {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--g), var(--g3));
  border-radius: 6px;
  margin-bottom: 10px;
  box-shadow: 0 2px 16px rgba(222,155,53,.4);
  flex-shrink: 0;
}
.lnc-nav { display: flex; flex-direction: column; align-items: center; gap: 1px; flex: 1; width: 100%; }
.sb-btn {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 7px;
  color: var(--t3);
  transition: color .15s, background .15s;
}
.sb-btn:hover { color: var(--g); background: rgba(222,155,53,.07); }
.sb-btn.on { color: var(--g); background: rgba(222,155,53,.1); }
.sb-btn.on::before {
  content: '';
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 2px; height: 20px; border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg, var(--g2), var(--g3));
  box-shadow: 0 0 10px rgba(222,155,53,.7);
}
.lnc-nav-b {
  display: flex; flex-direction: column; align-items: center;
  gap: 1px; border-top: 1px solid rgba(222,155,53,.1);
  padding-top: 6px; margin-top: auto; width: 100%;
}

/* ── MAIN ─────────────────────────────────────────── */
.lnc-main {
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--b0);
}

/* ── TOPBAR ───────────────────────────────────────── */
.lnc-top {
  height: var(--tp);
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px;
  background: var(--b1);
  border-bottom: 1px solid rgba(222,155,53,.08);
  flex-shrink: 0;
  position: relative;
}
.lnc-top::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--g3) 20%, var(--g) 50%, var(--g3) 80%, transparent 100%);
  opacity: .25;
}
.lnc-pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--grn);
  box-shadow: 0 0 10px rgba(61,220,132,.8);
  flex-shrink: 0;
  animation: lnc-pulse 2s ease-in-out infinite;
}
@keyframes lnc-pulse { 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.5; transform:scale(1.4); } }
.top-now {
  font-size: 10px; font-weight: 700;
  color: var(--t3); letter-spacing: .5px; white-space: nowrap; flex-shrink: 0;
  font-family: 'Share Tech Mono', monospace;
}
.top-now b { color: var(--g); }
.top-ticker { flex: 1; overflow: hidden; position: relative; }
.top-ticker::before, .top-ticker::after {
  content: '';
  position: absolute; top: 0; bottom: 0; width: 30px; z-index: 2; pointer-events: none;
}
.top-ticker::before { left: 0; background: linear-gradient(90deg, var(--b1), transparent); }
.top-ticker::after  { right: 0; background: linear-gradient(270deg, var(--b1), transparent); }
.ticker-inner {
  display: flex; gap: 36px; width: max-content;
  animation: ticker-scroll 24s linear infinite;
}
@keyframes ticker-scroll { 0%{ transform: translateX(0); } 100%{ transform: translateX(-50%); } }
.ticker-item { font-size: 10px; color: var(--t3); white-space: nowrap; }
.ticker-item b { color: var(--t2); }
.top-brand {
  font-family: 'Orbitron', monospace;
  font-size: 10px; font-weight: 700;
  letter-spacing: 3px; color: var(--g);
  opacity: .5; flex-shrink: 0;
}

/* ── MAPS STRIP ───────────────────────────────────────
   FIX: animatia merge la -50% (exact primul set)
   clona e generata dinamic de JS ca sa nu apara dublu
   cand sunt putine servere
   ─────────────────────────────────────────────────── */
.maps-strip {
  height: var(--ms);
  background: var(--b1);
  border-bottom: 1px solid rgba(222,155,53,.07);
  display: flex; align-items: center; gap: 10px;
  padding: 0 12px;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}
.maps-strip::before, .maps-strip::after {
  content: '';
  position: absolute; top: 0; bottom: 0; width: 50px; z-index: 2; pointer-events: none;
}
.maps-strip::before { left: 82px; background: linear-gradient(90deg, var(--b1), transparent); }
.maps-strip::after  { right: 0;   background: linear-gradient(270deg, var(--b1), transparent); }
.ms-label {
  font-family: 'Orbitron', monospace;
  font-size: 8px; font-weight: 700; letter-spacing: 3px;
  color: var(--g);
  background: rgba(222,155,53,.08);
  border: 1px solid rgba(222,155,53,.2);
  padding: 4px 9px; border-radius: 4px;
  white-space: nowrap; flex-shrink: 0; z-index: 3;
}
.ms-overflow { flex: 1; overflow: hidden; }
.ms-track {
  display: flex; gap: 7px;
  width: max-content;
  /* animatia e setata din JS dupa ce stim dimensiunea reala */
}
.ms-track.animating {
  animation: ms-move var(--ms-dur, 20s) linear infinite;
}
@keyframes ms-move { 0%{ transform: translateX(0); } 100%{ transform: translateX(var(--ms-offset, -50%)); } }
.ms-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px;
  background: var(--b3);
  border: 1px solid rgba(222,155,53,.08);
  border-radius: 6px;
  cursor: pointer; flex-shrink: 0;
  transition: border-color .2s, box-shadow .2s;
}
.ms-item:hover { border-color: rgba(222,155,53,.35); box-shadow: var(--glow-g); }
.ms-thumb {
  width: 38px; height: 28px; border-radius: 4px;
  background-size: cover; background-position: center;
  border: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}
.ms-nm { font-size: 10px; font-weight: 700; color: var(--t1); letter-spacing: .3px; }
.ms-pl { font-size: 9px; color: var(--g); font-family: 'Share Tech Mono', monospace; }

/* ── BODY ─────────────────────────────────────────── */
.lnc-body {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 14px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* ── HERO ─────────────────────────────────────────── */
.hero {
  position: relative; border-radius: var(--r2); overflow: hidden;
  height: 165px; margin-bottom: 12px;
  background: var(--b2);
  border: 1px solid rgba(222,155,53,.1);
}
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,.12) 3px, rgba(0,0,0,.12) 4px);
}
#hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero-bg-img {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse at 75% 50%, rgba(222,155,53,.07) 0%, transparent 60%),
              radial-gradient(ellipse at 15% 85%, rgba(200,130,40,.05) 0%, transparent 50%);
}
.hero::after {
  content: '';
  position: absolute; top: 8px; right: 8px; width: 16px; height: 16px;
  border-top: 2px solid rgba(222,155,53,.4);
  border-right: 2px solid rgba(222,155,53,.4);
  z-index: 3; pointer-events: none;
}
.hero-corner-bl {
  position: absolute; bottom: 8px; left: 8px; width: 16px; height: 16px;
  border-bottom: 2px solid rgba(222,155,53,.4);
  border-left: 2px solid rgba(222,155,53,.4);
  z-index: 3; pointer-events: none;
}
.hero-shine {
  position: absolute; top: 0; left: -100%; width: 60%; height: 100%; z-index: 2;
  background: linear-gradient(105deg, transparent 40%, rgba(222,155,53,.04) 50%, transparent 60%);
  animation: hero-shine 6s ease-in-out infinite;
}
@keyframes hero-shine { 0%{ left: -100%; } 60%,100%{ left: 150%; } }
.hero-fade-b {
  position: absolute; bottom: 0; left: 0; right: 0; height: 65%; z-index: 2;
  background: linear-gradient(to top, var(--b2), transparent);
}
.hero-fade-l {
  position: absolute; top: 0; left: 0; bottom: 0; width: 45%; z-index: 2;
  background: linear-gradient(to right, var(--b2), transparent);
}
.hero-body {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; justify-content: center;
  padding: 18px 20px;
}
.hero-eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.hero-badge {
  font-family: 'Orbitron', monospace;
  font-size: 8px; font-weight: 700; letter-spacing: 2px;
  color: var(--g);
  background: rgba(222,155,53,.1);
  border: 1px solid rgba(222,155,53,.25);
  padding: 3px 9px; border-radius: 3px;
}
.hero-live {
  display: flex; align-items: center; gap: 4px;
  font-size: 9px; font-weight: 700; letter-spacing: 2px; color: var(--grn);
}
.hero-title {
  font-family: 'Orbitron', monospace;
  font-size: 36px; font-weight: 900; letter-spacing: -1px;
  color: #fff; line-height: 1; margin-bottom: 5px;
  text-shadow: 0 2px 20px rgba(0,0,0,.9);
}
.hero-title span { color: var(--g); text-shadow: 0 0 30px rgba(222,155,53,.6); }
.hero-desc { font-size: 11px; color: var(--t2); margin-bottom: 10px; max-width: 250px; }
.hero-btns { display: flex; gap: 7px; flex-wrap: wrap; }
.btn-play {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 15px;
  background: linear-gradient(135deg, var(--g), var(--g3));
  color: #000; font-size: 10px; font-weight: 900; letter-spacing: 2px;
  border-radius: 5px; font-family: 'Orbitron', monospace;
  box-shadow: 0 3px 16px rgba(222,155,53,.45);
  transition: all .2s;
}
.btn-play:hover { transform: translateY(-1px); box-shadow: 0 5px 22px rgba(222,155,53,.6); }
.btn-servers {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 13px;
  background: rgba(222,155,53,.07);
  border: 1px solid rgba(222,155,53,.3);
  color: var(--g); font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
  border-radius: 5px; font-family: 'Orbitron', monospace;
  transition: all .2s;
}
.btn-servers:hover { background: rgba(222,155,53,.14); }

/* ── STATS BAR ────────────────────────────────────── */
.statsbar {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 1px; background: rgba(222,155,53,.08);
  border-radius: var(--r); overflow: hidden;
  border: 1px solid rgba(222,155,53,.08);
  margin-bottom: 12px;
}
.stat {
  background: var(--b2);
  padding: 9px 10px;
  display: flex; flex-direction: column; align-items: center;
  transition: background .15s;
  position: relative;
}
.stat::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--g3), transparent);
  opacity: 0; transition: opacity .2s;
}
.stat:hover { background: var(--b3); }
.stat:hover::after { opacity: .5; }
.stat-v {
  font-family: 'Orbitron', monospace;
  font-size: 20px; font-weight: 700; color: #fff; line-height: 1;
}
.stat-v.gold { color: var(--g); }
.stat-l {
  font-size: 8px; font-weight: 700; letter-spacing: 2px;
  color: var(--t4); text-transform: uppercase; margin-top: 2px;
}

/* ── GLOBAL CHART ─────────────────────────────────── */
.global-chart-wrap {
  background: var(--b2); border: 1px solid rgba(222,155,53,.08);
  border-radius: var(--r); padding: 11px 13px; margin-bottom: 12px;
}
.global-chart-hdr {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px;
}
.global-chart-title {
  font-family: 'Orbitron', monospace;
  font-size: 8px; font-weight: 700; letter-spacing: 2px;
  color: var(--t4); text-transform: uppercase;
}

/* ── HEATMAP ──────────────────────────────────────── */
.heatmap-wrap { background: var(--b2); border: 1px solid rgba(222,155,53,.08); border-radius: var(--r); padding: 11px 13px; margin-bottom: 12px; }
.heatmap-title {
  font-family: 'Orbitron', monospace;
  font-size: 8px; font-weight: 700; letter-spacing: 2px;
  color: var(--t4); text-transform: uppercase; margin-bottom: 7px;
  display: flex; align-items: center; gap: 5px;
}
.heatmap-grid { display: grid; grid-template-columns: repeat(24,1fr); gap: 2px; height: 22px; }
.hm-bar { border-radius: 2px; cursor: default; transition: transform .1s; }
.hm-bar:hover { transform: scaleY(1.2); }

/* ── SECTION ──────────────────────────────────────── */
.sec { margin-bottom: 12px; }
.sec-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sec-title {
  font-family: 'Orbitron', monospace;
  font-size: 9px; font-weight: 700; letter-spacing: 3px;
  color: var(--t3); text-transform: uppercase;
  display: flex; align-items: center; gap: 7px;
}
.sec-title::before {
  content: ''; display: inline-block; width: 14px; height: 2px;
  background: linear-gradient(90deg, var(--g), var(--g2));
  border-radius: 1px;
}
.sec-more {
  font-size: 10px; color: var(--g);
  background: rgba(222,155,53,.07); border: 1px solid rgba(222,155,53,.2);
  padding: 4px 10px; border-radius: 4px;
  font-family: 'Rajdhani', sans-serif; font-weight: 700;
  transition: all .15s;
}
.sec-more:hover { background: rgba(222,155,53,.14); }

/* ═══════════════════════════════════════════════════
   SERVER CARDS
   ═══════════════════════════════════════════════════ */
.srv-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.srv-card-wrap {
  height: 210px;
  position: relative;
  border-radius: var(--r2);
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(222,155,53,.1);
  background: var(--b2);
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.srv-card-wrap::before, .srv-card-wrap::after {
  content: '';
  position: absolute;
  width: 10px; height: 10px;
  z-index: 5; pointer-events: none;
  transition: opacity .25s;
  opacity: 0;
}
.srv-card-wrap::before {
  top: 6px; right: 6px;
  border-top: 1.5px solid var(--g); border-right: 1.5px solid var(--g);
}
.srv-card-wrap::after {
  bottom: 6px; left: 6px;
  border-bottom: 1.5px solid var(--g); border-left: 1.5px solid var(--g);
}
.srv-card-wrap:hover {
  border-color: rgba(222,155,53,.35);
  box-shadow: 0 0 0 1px rgba(222,155,53,.1), var(--glow-g);
  transform: translateY(-2px);
}
.srv-card-wrap:hover::before, .srv-card-wrap:hover::after { opacity: 1; }
.srv-card-wrap.offline { opacity: .5; filter: grayscale(.5); }

.sc-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .4;
  transition: opacity .3s, transform .4s;
}
.srv-card-wrap:hover .sc-img { opacity: .55; transform: scale(1.05); }
.sc-grad {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, var(--b2) 0%, rgba(9,10,14,.75) 45%, rgba(9,10,14,.25) 100%),
    linear-gradient(to right, var(--b2) 0%, transparent 50%);
}
.sc-accent {
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, transparent, var(--g), transparent);
  opacity: 0; transition: opacity .25s;
  z-index: 4;
}
.srv-card-wrap:hover .sc-accent { opacity: 1; }
.sc-top {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 11px; z-index: 3;
}
.sc-play {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(0,0,0,.6); border: 1.5px solid rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.srv-card-wrap:hover .sc-play {
  background: var(--g); border-color: var(--g);
  box-shadow: 0 0 16px rgba(222,155,53,.6);
}
.sc-dot { width: 7px; height: 7px; border-radius: 50%; transition: box-shadow .2s; }
.sc-dot.on { background: var(--grn); box-shadow: 0 0 8px rgba(61,220,132,.8); }
.sc-dot.off { background: var(--t4); }
.sc-fav {
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.1);
  font-size: 11px; display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.sc-fav:hover { color: var(--g); border-color: rgba(222,155,53,.5); }
.sc-body {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 10px 11px;
  z-index: 3;
  background: linear-gradient(to top, var(--b2) 0%, rgba(9,10,14,.95) 70%, transparent 100%);
}
.sc-name {
  font-size: 12px; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 4px; letter-spacing: .2px;
  text-shadow: 0 1px 6px rgba(0,0,0,.9);
}
.sc-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.sc-map { font-size: 9px; color: var(--t2); }
.sc-plr { font-size: 10px; font-weight: 900; font-family: 'Share Tech Mono', monospace; }
.sc-plr.ok   { color: var(--g); }
.sc-plr.low  { color: var(--t3); }
.sc-plr.full { color: var(--red); }
.sc-bar { height: 2px; background: rgba(255,255,255,.07); border-radius: 1px; overflow: hidden; margin-bottom: 4px; }
.sc-fill { height: 100%; background: linear-gradient(90deg, var(--g4), var(--g)); border-radius: 1px; transition: width .4s; }
.sc-fill.full { background: linear-gradient(90deg, #c44, var(--red)); }
.sc-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.sc-ip { font-size: 8px; color: var(--t4); font-family: 'Share Tech Mono', monospace; }
.sc-up { font-size: 8px; font-weight: 700; padding: 1px 5px; border-radius: 3px; }
.sc-up.high { color: var(--grn); background: rgba(61,220,132,.1); }
.sc-up.mid  { color: var(--g);   background: rgba(222,155,53,.1); }
.sc-up.low  { color: var(--red); background: rgba(240,74,74,.1); }

/* JOIN — apare la hover desktop, mereu vizibil pe mobil */
.sc-join {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 8px;
  background: linear-gradient(135deg, var(--g), var(--g3));
  color: #000;
  font-family: 'Orbitron', monospace;
  font-size: 10px; font-weight: 700; letter-spacing: 2px;
  border-radius: 5px;
  text-decoration: none;
  box-shadow: 0 3px 14px rgba(222,155,53,.35);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s, transform .25s, box-shadow .2s;
}
.srv-card-wrap:hover .sc-join { opacity: 1; transform: translateY(0); }
.sc-join:hover { box-shadow: 0 5px 20px rgba(222,155,53,.55); }

/* ── FOOTER ───────────────────────────────────────── */
.lnc-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 0 4px;
  border-top: 1px solid rgba(222,155,53,.07);
  margin-top: 4px;
}
.lnc-foot a { font-size: 10px; color: var(--t4); transition: color .15s; }
.lnc-foot a:hover { color: var(--g); }
.foot-r { margin-left: auto; font-size: 10px; color: var(--t4); font-family: 'Share Tech Mono', monospace; }

/* ═══ SERVERS PAGE ═══════════════════════════════════ */
.toolbar { display: flex; align-items: center; gap: 6px; padding: 8px 0; margin-bottom: 8px; flex-wrap: wrap; }
.srch {
  display: flex; align-items: center; gap: 7px;
  background: var(--b2); border: 1px solid rgba(222,155,53,.1);
  border-radius: 7px; padding: 0 10px; flex: 1; min-width: 130px;
  transition: border-color .2s, box-shadow .2s;
}
.srch:focus-within { border-color: rgba(222,155,53,.4); box-shadow: var(--glow-g); }
.srch input {
  flex: 1; background: none; border: none; outline: none;
  padding: 7px 0; font-size: 12px; color: var(--t1); font-family: 'Rajdhani', sans-serif; font-weight: 600;
}
.srch input::placeholder { color: var(--t4); }
.srch svg { color: var(--t4); flex-shrink: 0; }
.fil-btn {
  padding: 5px 10px; border-radius: 5px; font-size: 10px; font-weight: 700;
  color: var(--t3); background: var(--b2); border: 1px solid rgba(222,155,53,.08);
  letter-spacing: .5px; transition: all .15s; white-space: nowrap; font-family: 'Rajdhani', sans-serif;
}
.fil-btn:hover { border-color: rgba(222,155,53,.3); color: var(--g); }
.fil-btn.fil-on { background: rgba(222,155,53,.1); border-color: rgba(222,155,53,.35); color: var(--g); }
.srv-count { font-size: 10px; color: var(--t4); font-family: 'Share Tech Mono', monospace; margin-left: auto; white-space: nowrap; }
.ref-btn {
  width: 30px; height: 30px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: var(--b2); border: 1px solid rgba(222,155,53,.1);
  color: var(--t3); flex-shrink: 0; transition: all .15s;
}
.ref-btn:hover { border-color: rgba(222,155,53,.35); color: var(--g); }
.srv-cat-sec { margin-bottom: 14px; }
.srv-cat-hdr {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 7px; padding-bottom: 5px;
  border-bottom: 1px solid rgba(222,155,53,.07);
}
.srv-cat-nm {
  font-family: 'Orbitron', monospace;
  font-size: 9px; font-weight: 700; letter-spacing: 3px;
  color: var(--t3); text-transform: uppercase;
}
.srv-cat-cnt {
  font-size: 9px; color: var(--g);
  background: rgba(222,155,53,.1); border: 1px solid rgba(222,155,53,.2);
  padding: 1px 7px; border-radius: 3px; font-family: 'Share Tech Mono', monospace;
}
.srv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 9px;
}

/* ── QC / SETTINGS ────────────────────────────────── */
.qc-wrap, .set-wrap { max-width: 440px; padding: 4px 0; }
.qc-title, .set-title { font-family: 'Orbitron', monospace; font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.qc-sub, .set-sub { font-size: 12px; color: var(--t2); margin-bottom: 12px; }
.qc-card, .set-card { background: var(--b2); border: 1px solid rgba(222,155,53,.1); border-radius: var(--r); padding: 13px; margin-bottom: 9px; }
.set-card-t { font-size: 12px; font-weight: 700; color: #fff; margin-bottom: 2px; }
.set-card-s { font-size: 11px; color: var(--t2); margin-bottom: 9px; }
.qc-row { display: flex; gap: 7px; }
.qc-input {
  flex: 1; background: var(--b3); border: 1px solid rgba(222,155,53,.1);
  border-radius: 6px; padding: 8px 11px;
  font-size: 12px; color: var(--t1); outline: none; font-family: 'Share Tech Mono', monospace;
  transition: border-color .2s;
}
.qc-input:focus { border-color: rgba(222,155,53,.4); }
.btn-qc {
  padding: 8px 14px;
  background: linear-gradient(135deg, var(--g), var(--g3));
  color: #000; font-size: 10px; font-weight: 900; letter-spacing: 1px;
  border-radius: 6px; font-family: 'Orbitron', monospace;
  box-shadow: 0 2px 10px rgba(222,155,53,.35);
  transition: all .2s;
}
.btn-qc:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(222,155,53,.5); }
.btn-ch {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px; border-radius: 5px;
  background: rgba(222,155,53,.07); border: 1px solid rgba(222,155,53,.2);
  color: var(--g); font-size: 10px; font-weight: 700; letter-spacing: 1px;
  font-family: 'Rajdhani', sans-serif;
  transition: all .15s;
}
.btn-ch:hover { background: rgba(222,155,53,.15); border-color: rgba(222,155,53,.4); }
.empty { text-align: center; padding: 38px 20px; color: var(--t4); font-size: 12px; }

/* ── ANIM ─────────────────────────────────────────── */
.spinning { animation: spin .6s linear infinite; }
@keyframes spin { to{ transform: rotate(360deg); } }
.tab-fade { animation: fadein .2s ease; }
@keyframes fadein { from{ opacity:0; transform:translateY(5px); } to{ opacity:1; transform:translateY(0); } }
.num-animate { animation: num-pop .3s ease; }
@keyframes num-pop { 0%{ transform:scale(1.25); } 100%{ transform:scale(1); } }

/* ── NOTIF ────────────────────────────────────────── */
.notif-banner {
  position: fixed; top: 0; left: var(--sb); right: 0; z-index: 300;
  padding: 10px 16px; display: flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700;
  transform: translateY(-100%); transition: transform .3s;
  pointer-events: none; backdrop-filter: blur(12px);
}
.notif-banner.show { transform: translateY(0); pointer-events: all; }
.notif-banner.down { background: rgba(240,74,74,.12); border-bottom: 1px solid rgba(240,74,74,.2); color: #f87171; }
.notif-banner.up   { background: rgba(61,220,132,.1);  border-bottom: 1px solid rgba(61,220,132,.2); color: var(--grn); }

/* ═══ DETAIL PANEL ═══════════════════════════════════ */
.sd-ov {
  position: fixed; inset: 0; background: rgba(0,0,0,.7);
  z-index: 400; opacity: 0; pointer-events: none;
  backdrop-filter: blur(3px);
  transition: opacity .3s;
}
.sd-ov.open { opacity: 1; pointer-events: all; }
.srv-detail {
  position: fixed; right: 0; top: 0; bottom: 0;
  width: 340px; max-width: calc(100vw - var(--sb));
  background: var(--b1);
  border-left: 1px solid rgba(222,155,53,.15);
  z-index: 500; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.srv-detail.open { transform: translateX(0); }
.srv-detail::before {
  content: '';
  position: absolute; top: 10px; right: 10px;
  width: 12px; height: 12px;
  border-top: 1.5px solid rgba(222,155,53,.4);
  border-right: 1.5px solid rgba(222,155,53,.4);
  z-index: 2;
}
.sd-hero { position: relative; height: 145px; flex-shrink: 0; }
.sd-hero-img { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .45; }
.sd-hero-grad { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(9,10,14,.3) 0%, var(--b1) 100%); }
.sd-hero::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,.1) 3px, rgba(0,0,0,.1) 4px);
}
.sd-hero-top {
  position: absolute; top: 10px; left: 12px; right: 12px;
  display: flex; align-items: center; justify-content: space-between; z-index: 3;
}
.sd-close {
  width: 26px; height: 26px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.65); border: 1px solid rgba(255,255,255,.1);
  color: var(--t2); font-size: 12px; transition: all .15s;
}
.sd-close:hover { background: rgba(240,74,74,.2); border-color: rgba(240,74,74,.4); color: #f87171; }
.sd-body { padding: 13px; }
.sd-name { font-family: 'Orbitron', monospace; font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 2px; line-height: 1.25; }
.sd-ip { font-size: 10px; color: var(--t4); font-family: 'Share Tech Mono', monospace; margin-bottom: 11px; }
.sd-stats-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-bottom: 11px; }
.sd-stat { background: var(--b3); border: 1px solid rgba(222,155,53,.08); border-radius: 7px; padding: 8px; text-align: center; }
.sd-stat:hover { border-color: rgba(222,155,53,.25); }
.sd-stat-v { font-family: 'Orbitron', monospace; font-size: 14px; font-weight: 700; color: #fff; }
.sd-stat-v.gold   { color: var(--g); }
.sd-stat-v.green  { color: var(--grn); }
.sd-stat-v.red    { color: var(--red); }
.sd-stat-v.orange { color: var(--g); }
.sd-stat-l { font-size: 8px; color: var(--t4); letter-spacing: 1px; margin-top: 1px; text-transform: uppercase; }
.sd-bar-wrap { margin-bottom: 11px; }
.sd-bar-lbl { display: flex; justify-content: space-between; font-size: 9px; color: var(--t4); margin-bottom: 4px; }
.sd-bar { height: 2px; background: rgba(255,255,255,.06); border-radius: 1px; overflow: hidden; }
.sd-bar-fill { height: 100%; background: linear-gradient(90deg, var(--g4), var(--g)); border-radius: 1px; transition: width .5s; }
.sd-bar-fill.full { background: linear-gradient(90deg, #c44, var(--red)); }
.sd-chart-wrap { margin-bottom: 11px; }
.sd-chart-lbl, .sd-maps-lbl {
  font-family: 'Orbitron', monospace;
  font-size: 8px; font-weight: 700; letter-spacing: 2px; color: var(--t4);
  text-transform: uppercase; margin-bottom: 6px;
}
.sd-maps-row { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 2px; }
.sd-map-item { flex-shrink: 0; text-align: center; }
.sd-map-img { width: 46px; height: 34px; border-radius: 4px; background-size: cover; background-position: center; border: 1px solid rgba(222,155,53,.1); margin-bottom: 2px; }
.sd-map-nm { font-size: 8px; color: var(--t4); font-family: 'Share Tech Mono', monospace; max-width: 46px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-join {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px; margin-bottom: 9px;
  background: linear-gradient(135deg, var(--g), var(--g3));
  color: #000; font-family: 'Orbitron', monospace;
  font-size: 11px; font-weight: 700; letter-spacing: 2px;
  border-radius: 7px; text-transform: uppercase;
  box-shadow: 0 4px 20px rgba(222,155,53,.4);
  transition: all .2s; position: relative; overflow: hidden;
}
.sd-join::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.15), transparent); opacity: 0; transition: opacity .2s; }
.sd-join:hover { transform: translateY(-1px); box-shadow: 0 6px 26px rgba(222,155,53,.55); }
.sd-join:hover::before { opacity: 1; }
.sd-cmd { display: flex; align-items: center; justify-content: space-between; padding: 8px 11px; margin-bottom: 9px; background: var(--b3); border: 1px solid rgba(222,155,53,.08); border-radius: 6px; cursor: pointer; transition: all .15s; }
.sd-cmd:hover { border-color: rgba(222,155,53,.3); }
.sd-copied { font-size: 10px; color: var(--grn); text-align: center; margin-bottom: 8px; }
.sd-info-box { background: var(--b3); border: 1px solid rgba(222,155,53,.08); border-radius: 7px; overflow: hidden; }
.sd-info-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 11px; border-bottom: 1px solid rgba(255,255,255,.03); }
.sd-info-row:last-child { border-bottom: none; }
.sd-info-label { font-size: 9px; color: var(--t4); }
.sd-info-val { font-size: 10px; font-weight: 700; color: var(--t1); font-family: 'Share Tech Mono', monospace; }
.sd-info-val.green  { color: var(--grn); }
.sd-info-val.orange { color: var(--g); }
.sd-info-val.red    { color: var(--red); }

/* ═══════════════════════════════════════════════════
   RESPONSIVE — TABLET
   ═══════════════════════════════════════════════════ */
@media (max-width: 900px) {
  :root { --sb: 42px; --tp: 38px; --ms: 46px; }
  .hero { height: 148px; }
  .hero-title { font-size: 28px; }
  .statsbar { grid-template-columns: repeat(2,1fr); }
  .srv-cards { grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 9px; }
  .srv-card-wrap { height: 195px; }
  .srv-detail { width: 310px; }
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — MOBILE
   ═══════════════════════════════════════════════════ */
@media (max-width: 640px) {
  :root { --sb: 0px; --tp: 38px; --ms: 44px; }

  /* Sidebar → bottom nav */
  .lnc-sb {
    position: fixed; bottom: 0; left: 0; right: 0; top: auto;
    width: 100%; height: 52px;
    flex-direction: row; justify-content: center;
    border-right: none; border-top: 1px solid rgba(222,155,53,.1);
    z-index: 200; padding: 0 8px; gap: 0;
    background: rgba(9,10,14,.97);
    backdrop-filter: blur(16px);
  }
  .lnc-sb::after { display: none; }
  .lnc-logo { display: none; }
  .lnc-nav { flex-direction: row; justify-content: center; flex: 1; gap: 0; }
  .sb-btn { width: 50px; height: 48px; border-radius: 7px; }
  .sb-btn.on::before {
    top: auto; left: 50%; bottom: 0; transform: translateX(-50%);
    width: 20px; height: 2px;
    border-radius: 2px 2px 0 0;
  }
  .lnc-nav-b { flex-direction: row; border-top: none; border-left: 1px solid rgba(222,155,53,.1); padding: 0 8px; margin-top: 0; width: auto; }

  .lnc-wrap { grid-template-columns: 1fr; padding-bottom: 52px; }

  .lnc-top { padding: 0 10px; gap: 7px; }
  .top-brand { display: none; }
  .top-now { font-size: 9px; }

  .ms-item { padding: 4px 7px; }
  .ms-thumb { width: 32px; height: 24px; }

  .lnc-body { padding: 10px; }

  .hero { height: 135px; }
  .hero-title { font-size: 24px; }
  .hero-desc { font-size: 10px; max-width: 190px; margin-bottom: 8px; }
  .btn-play, .btn-servers { padding: 6px 11px; font-size: 9px; }
  .hero-btns { gap: 6px; }

  .statsbar { grid-template-columns: repeat(2,1fr); }
  .stat-v { font-size: 17px; }
  .stat-l { font-size: 7px; }

  .srv-cards { grid-template-columns: repeat(2,1fr); gap: 7px; }
  .srv-card-wrap { height: 190px; }
  .sc-name { font-size: 10px; }
  /* JOIN mereu vizibil pe mobile */
  .sc-join { opacity: 1 !important; transform: translateY(0) !important; }

  .toolbar { gap: 5px; }
  .srch { min-width: 105px; }
  .fil-btn { padding: 4px 8px; font-size: 9px; }

  .srv-grid { grid-template-columns: repeat(2,1fr); gap: 7px; }

  .srv-detail {
    width: 100%; max-width: 100%;
    border-left: none; border-top: 1px solid rgba(222,155,53,.1);
    top: var(--tp); bottom: 52px;
  }

  .qc-wrap, .set-wrap { max-width: 100%; }
  .qc-title, .set-title { font-size: 15px; }
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — SMALL MOBILE
   ═══════════════════════════════════════════════════ */
@media (max-width: 400px) {
  .srv-cards { grid-template-columns: 1fr; }
  .srv-card-wrap { height: 195px; }
  .srv-grid { grid-template-columns: 1fr; }
  .hero { height: 125px; }
  .hero-title { font-size: 20px; }
  .hero-body { padding: 12px 14px; }
  .statsbar { grid-template-columns: repeat(4,1fr); }
  .stat-v { font-size: 14px; }
  .stat-l { font-size: 6px; letter-spacing: .5px; }
}