/* ==========================================================================
   VELOCITY COMMUNITY — Design System
   Signature: tactical HUD / radar & ballistics, softened into rounded,
   modern shapes. Mono "readout" data type, radar-sweep motif threaded
   through every page, smooth staggered reveal-on-scroll throughout.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=JetBrains+Mono:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  /* ---- Color: night-vision graphite base, ballistic accent family ---- */
  --bg:            #0a0d0a;
  --bg-alt:        #0e120e;
  --panel:         #131811;
  --panel-2:       #171d15;
  --panel-border:  rgba(233,237,224,0.08);
  --panel-border-hi: rgba(233,237,224,0.16);

  --ink:           #e9ede2;
  --ink-dim:       #aab3a3;
  --muted:         #6d766a;

  --signal:        #ff5f1f;   /* primary — objective / mute orange   */
  --signal-ink:    #ffe4d4;
  --tactical:      #22d6b5;   /* secondary — radar teal / gag        */
  --tactical-ink:  #d3fbf3;
  --gold:          #ffb020;   /* VIP amber                           */
  --gold-ink:      #fff0d3;
  --danger:        #ff3b3b;   /* ban                                 */
  --danger-ink:    #ffdcdc;
  --purple:        #a16ae8;   /* silence                             */
  --purple-ink:    #ecdcff;
  --yellow:        #ffd23c;   /* warn                                */

  --t-color:       #d4a24c;   /* Terrorist team accent (sand)        */
  --ct-color:      #4c8fd4;   /* Counter-Terrorist team accent (blue)*/

  /* ---- Type ---- */
  --font-display:  'Anton', sans-serif;
  --font-mono:     'JetBrains Mono', monospace;
  --font-body:     'Manrope', sans-serif;

  /* ---- Shape: rounded, modern ---- */
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
  --r-xs: 8px;

  --ease: cubic-bezier(.16,.8,.24,1);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* faint radar grid + noise wash on the whole page */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:0;
  background-image:
    linear-gradient(rgba(233,237,224,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233,237,224,0.028) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 40%, transparent 85%);
}

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:400; margin:0; color:var(--ink); letter-spacing:0.01em; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
ul{ margin:0; padding:0; list-style:none; }
img{ max-width:100%; display:block; }

.mono{ font-family:var(--font-mono); }
.container{ max-width:1240px; margin:0 auto; padding:0 28px; }
@media (max-width:720px){ .container{ padding:0 18px; } }

.eyebrow{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--tactical);
  display:inline-flex;
  align-items:center;
  gap:9px;
}
.eyebrow::before{
  content:"";
  width:7px; height:7px;
  background:var(--tactical);
  box-shadow:0 0 0 3px rgba(34,214,181,0.18);
  display:inline-block;
}
.eyebrow.signal{ color:var(--signal); }
.eyebrow.signal::before{ background:var(--signal); box-shadow:0 0 0 3px rgba(255,95,31,0.18); }
.eyebrow.gold{ color:var(--gold); }
.eyebrow.gold::before{ background:var(--gold); box-shadow:0 0 0 3px rgba(255,176,32,0.18); }

/* ---- rounded panel, the recurring signature shape ---- */
.panel{
  background:linear-gradient(155deg, var(--panel-2), var(--panel));
  border:1px solid var(--panel-border);
  border-radius:var(--r-lg);
  position:relative;
  overflow:hidden;
}
.panel-sm{
  border-radius:var(--r-md);
}

/* soft glow accent drawn in the corner on panels that act like controls */
.panel-tick::after{
  content:"";
  position:absolute; top:-1px; right:-1px; width:64px; height:64px;
  background:radial-gradient(circle at top right, rgba(255,150,40,0.16), transparent 70%);
  border-radius:0 var(--r-lg) 0 0;
  pointer-events:none;
  opacity:0.8;
}

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-mono); font-weight:600; font-size:13.5px;
  letter-spacing:0.03em; text-transform:uppercase;
  padding:13px 22px;
  border:1px solid transparent;
  border-radius:var(--r-sm);
  cursor:pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{
  background:var(--signal); color:#180800;
  box-shadow:0 0 0 0 rgba(255,95,31,0.0);
}
.btn-primary:hover{ box-shadow:0 6px 24px -6px rgba(255,95,31,0.55); transform:translateY(-1px); }
.btn-ghost{
  background:transparent; color:var(--ink); border-color:var(--panel-border-hi);
}
.btn-ghost:hover{ border-color:var(--tactical); color:var(--tactical); }
.btn-tactical{ background:var(--tactical); color:#04211c; }
.btn-tactical:hover{ box-shadow:0 6px 24px -6px rgba(34,214,181,0.5); transform:translateY(-1px); }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:0.45; cursor:not-allowed; }
.btn-sm{ padding:9px 14px; font-size:12px; }
@media (max-width:400px){ .btn-sm .btn-label{ display:none; } }

/* ---- nav ---- */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(14px) saturate(140%);
  background:rgba(10,13,10,0.72);
  border-bottom:1px solid var(--panel-border);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:76px; gap:12px; }
@media (max-width:480px){ .nav-inner{ height:64px; } }
.brand{ display:flex; align-items:center; gap:11px; }
.brand-mark{
  height:54px; width:auto; flex:none;
  filter:drop-shadow(0 0 14px rgba(255,150,40,0.35));
}
@media (max-width:480px){ .brand-mark{ height:44px; } }
.nav-links{
  display:flex; align-items:center; gap:2px;
  background:rgba(255,255,255,0.03); border:1px solid var(--panel-border);
  border-radius:999px; padding:4px;
}
.nav-links a{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.03em; font-weight:600;
  color:var(--ink-dim); padding:9px 18px; position:relative;
  border-radius:999px;
  transition:color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a.active{
  color:#04211c; background:var(--tactical);
  box-shadow:0 0 18px rgba(34,214,181,0.55), 0 0 0 1px rgba(34,214,181,0.4);
}
.nav-links a.active svg{ color:#04211c; }
.nav-right{ display:flex; align-items:center; gap:12px; }
.lang-toggle{
  display:flex; font-family:var(--font-mono); font-size:12px; border:1px solid var(--panel-border-hi);
  border-radius:999px;
  overflow:hidden;
}
.lang-toggle button{ background:transparent; border:none; color:var(--muted); padding:8px 12px; cursor:pointer; }
.lang-toggle button.active{ background:var(--panel-2); color:var(--ink); }
.burger{ display:none; }

#mobileNav{ background:none !important; border:none !important; border-radius:0 !important; padding:0 0 16px !important; }
#mobileNav a{ padding:12px 18px !important; }

@media (max-width:900px){
  .nav-links{ display:none; }
  .burger{ display:flex; }
}

/* ---- hero ---- */
.hero{
  padding:0; position:relative; overflow:hidden; min-height:52vh;
  display:flex; align-items:center;
  background:#0a0d0a;
}
/* non-stop animated glow — always visible, video plays on top, keeps looping after video ends */
.hero-bg-loop{
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(112deg, #0a0d0a 0%, #0a0d0a 40%, #ff5f1f 44%, #ff8a3b 68%, #ffb020 100%);
}
.hero-bg-loop::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(233,237,224,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233,237,224,0.04) 1px, transparent 1px);
  background-size:80px 80px;
  -webkit-mask-image:linear-gradient(112deg, black 0%, black 40%, transparent 55%);
  mask-image:linear-gradient(112deg, black 0%, black 40%, transparent 55%);
}
.hero-bg-loop::after{
  content:""; position:absolute; top:-5%; right:0; width:65%; height:115%;
  background:radial-gradient(circle at 68% 44%, rgba(255,176,32,0.50), transparent 65%);
  filter:blur(22px);
  animation:heroGlow 4s ease-in-out infinite;
}
@keyframes heroGlow{
  0%,100%{ opacity:0.35; transform:scale(1); }
  50%{ opacity:0.60; transform:scale(1.08); }
}

/* video occupies only the RIGHT half — text stays clear on the left, never overlaps */
.hero-video-wrap{
  position:absolute;
  top:0; right:0;
  width:52%; height:100%;
  z-index:1;
}
.hero-video-wrap video{
  width:100%; height:100%;
  object-fit:cover; object-position:left center;
  display:block;
}
.hero-video-wrap::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg,
    rgba(10,13,10,1.0)  0%,
    rgba(10,13,10,0.85) 25%,
    rgba(10,13,10,0.40) 58%,
    transparent         80%);
}
/* full-width variant: pure video, no text overlay, so no dark gradient needed */
.hero-video-wrap.hero-video-full{ width:100%; }
.hero-video-wrap.hero-video-full video{ object-position:center; }
.hero-video-wrap.hero-video-full::after{ background:none; }

.server-card-clickable{
  cursor:pointer;
  transition:border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.server-card-clickable:hover{
  border-color:var(--tactical);
  transform:translateY(-2px);
  box-shadow:0 0 0 1px var(--tactical), 0 8px 28px rgba(34,214,181,0.15);
}
.server-card-clickable:focus-visible{
  outline:2px solid var(--tactical); outline-offset:3px;
}

/* ---- loading screen ---- */
#loadScreen{
  position:fixed; inset:0; z-index:9999;
  background:#0a0d0a;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px;
  transition:opacity .65s ease, visibility .65s ease;
}
#loadScreen.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.load-logo{ font-family:var(--font-display); font-size:54px; text-transform:uppercase; letter-spacing:4px; }
.load-logo em{ font-style:normal; color:var(--signal); }
.load-sub{ font-family:var(--font-mono); font-size:12px; color:var(--muted); letter-spacing:.16em; margin-top:-14px; }
.load-bar-track{ width:260px; height:3px; background:rgba(255,255,255,0.08); border-radius:999px; overflow:hidden; }
.load-bar-fill{ height:100%; width:0%; background:linear-gradient(90deg,var(--signal),var(--tactical)); border-radius:999px; transition:width .04s linear; }
.load-pct{ font-family:var(--font-mono); font-size:11px; color:var(--muted); }

.hud-strip{ display:flex; gap:0; border:1px solid var(--panel-border); flex-wrap:wrap; border-radius:var(--r-md); overflow:hidden; }
.hud-item{ flex:1; padding:16px 20px; border-right:1px solid var(--panel-border); min-width:120px; }
.hud-item:last-child{ border-right:none; }
.hud-item .v{ font-family:var(--font-mono); font-size:22px; font-weight:700; color:var(--ink); display:flex; align-items:center; gap:8px;}
.hud-item .l{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.12em; color:var(--muted); text-transform:uppercase; margin-top:4px; }
.dot-live{ width:7px; height:7px; border-radius:50%; background:var(--tactical); box-shadow:0 0 0 3px rgba(34,214,181,0.2); animation:blip 2s ease-in-out infinite; }

/* generic responsive N-column layout — replaces ad-hoc inline grid-template-columns.
   Flexbox rather than CSS Grid throughout this file: verified to render reliably
   across engines, whereas grid support varies more between browser/webview versions. */
.grid-4{ display:flex; flex-wrap:wrap; gap:16px; }
.grid-4 > *{ flex:1 1 calc(25% - 12px); min-width:130px; }
@media (max-width:420px){
  .hud-item{ flex:1 1 50%; min-width:0; }
  .hud-item:nth-child(2){ border-right:none; }
}

/* ---- section headers ---- */
.section{ padding:88px 0; position:relative; }
.section-head{ margin-bottom:44px; max-width:640px; }
.section-head h2{ font-size:clamp(28px,3.6vw,42px); text-transform:uppercase; margin-top:14px; }
.section-head p{ color:var(--ink-dim); margin-top:14px; font-size:15.5px; }
.section-alt{ background:var(--bg-alt); border-top:1px solid var(--panel-border); border-bottom:1px solid var(--panel-border); }

/* ---- feature cards ---- */
.grid-3{ display:flex; flex-wrap:wrap; gap:22px; }
.grid-3 > *{ flex:1 1 calc(33.333% - 15px); min-width:260px; }
.grid-2{ display:flex; flex-wrap:wrap; gap:22px; max-width:820px; margin:0 auto; }
.grid-2 > *{ flex:1 1 calc(50% - 11px); min-width:260px; }
.feature-card{ padding:30px 26px; transition:transform .2s var(--ease), border-color .2s; }
.feature-card:hover{ transform:translateY(-4px); border-color:var(--panel-border-hi); }
.feature-icon{ width:46px; height:46px; display:flex; align-items:center; justify-content:center; background:rgba(255,95,31,0.1); color:var(--signal); margin-bottom:20px; border-radius:var(--r-xs); }
.feature-card:nth-child(2) .feature-icon{ background:rgba(34,214,181,0.1); color:var(--tactical); }
.feature-card:nth-child(3) .feature-icon{ background:rgba(255,176,32,0.1); color:var(--gold); }
.feature-card h3{ font-size:19px; margin-bottom:10px; text-transform:uppercase; }
.feature-card p{ color:var(--ink-dim); font-size:14.5px; margin-bottom:18px; }
.feature-link{ font-family:var(--font-mono); font-size:12.5px; color:var(--signal); display:inline-flex; gap:7px; align-items:center; }
.feature-card:nth-child(2) .feature-link{ color:var(--tactical); }
.feature-card:nth-child(3) .feature-link{ color:var(--gold); }

/* ---- ticker ---- */
.ticker{ border-top:1px solid var(--panel-border); border-bottom:1px solid var(--panel-border); overflow:hidden; background:var(--bg-alt); position:relative; }
.ticker::before,.ticker::after{ content:""; position:absolute; top:0; bottom:0; width:80px; z-index:2; }
.ticker::before{ left:0; background:linear-gradient(90deg,var(--bg-alt),transparent); }
.ticker::after{ right:0; background:linear-gradient(-90deg,var(--bg-alt),transparent); }
.ticker-track{ display:flex; gap:0; width:max-content; animation:ticker 32s linear infinite; }
.ticker:hover .ticker-track{ animation-play-state:paused; }
@keyframes ticker{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.ticker-item{ display:flex; align-items:center; gap:10px; padding:14px 26px; font-family:var(--font-mono); font-size:12.5px; color:var(--ink-dim); border-right:1px solid var(--panel-border); white-space:nowrap; }
.ticker-item b{ color:var(--ink); font-weight:600; }
.tag{ font-size:10px; padding:2px 7px; letter-spacing:0.06em; font-weight:700; }

/* ---- badges (punishment types) ---- */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:11.5px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
  padding:5px 11px 5px 9px;
  border-radius:999px;
}
.badge::before{ content:""; width:6px; height:6px; border-radius:50%; }
.badge-ban{ background:rgba(255,59,59,0.12); color:var(--danger-ink); }
.badge-ban::before{ background:var(--danger); }
.badge-mute{ background:rgba(255,95,31,0.12); color:var(--signal-ink); }
.badge-mute::before{ background:var(--signal); }
.badge-gag{ background:rgba(34,214,181,0.12); color:var(--tactical-ink); }
.badge-gag::before{ background:var(--tactical); }
.badge-silence{ background:rgba(161,106,232,0.14); color:var(--purple-ink); }
.badge-silence::before{ background:var(--purple); }
.badge-warn{ background:rgba(255,210,60,0.14); color:#fff6d6; }
.badge-warn::before{ background:var(--yellow); }
.badge-active{ background:rgba(34,214,181,0.1); color:var(--tactical); }
.badge-expired{ background:rgba(255,255,255,0.06); color:var(--muted); }
.badge-unbanned{ background:rgba(255,255,255,0.06); color:var(--muted); }

/* ---- filter bar ---- */
.filter-bar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:26px; }
.search-box{ flex:1; min-width:220px; display:flex; align-items:center; gap:10px; padding:12px 18px; background:var(--panel); border:1px solid var(--panel-border); border-radius:999px; }
.search-box input{ background:none; border:none; outline:none; color:var(--ink); font-family:var(--font-body); font-size:14px; width:100%; }
.search-box input::placeholder{ color:var(--muted); }
.chip{
  font-family:var(--font-mono); font-size:12px; padding:9px 16px; border:1px solid var(--panel-border-hi);
  color:var(--ink-dim); cursor:pointer; background:transparent; letter-spacing:0.03em;
  border-radius:999px;
  transition:all .15s;
}
.chip:hover{ color:var(--ink); border-color:var(--ink-dim); }
.chip.active{ background:var(--signal); border-color:var(--signal); color:#180800; }

/* ---- punishment table ---- */
.p-table{ border:1px solid var(--panel-border); border-radius:var(--r-md); overflow:hidden; }
.p-row{
  display:grid; grid-template-columns: 1.6fr 1fr 1.8fr 1.1fr 1fr 0.9fr;
  gap:16px; padding:16px 20px; align-items:center;
  border-bottom:1px solid var(--panel-border);
  font-size:13.5px;
}
.p-row.head{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); background:var(--bg-alt); }
.p-row:last-child{ border-bottom:none; }
.p-row:not(.head):hover{ background:rgba(255,255,255,0.02); }
.p-player{ display:flex; align-items:center; gap:10px; }
.p-avatar{ width:34px; height:34px; background:var(--panel-2); flex:none; display:flex; align-items:center; justify-content:center; color:var(--muted); font-family:var(--font-mono); font-size:12px; border-radius:var(--r-xs); }
.modal-veil{
  position:fixed; inset:0; z-index:200; background:rgba(0,0,0,0.72);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; transition:opacity .22s var(--ease);
}
.modal-veil.show{ opacity:1; }
.modal-veil .modal{ transform:scale(.94) translateY(14px); transition:transform .28s var(--ease-bounce); }
.modal-veil.show .modal{ transform:none; }

.p-row-clickable{ cursor:pointer; transition:background .14s, border-color .14s; }
.p-row-clickable:hover{ background:rgba(255,255,255,0.03); border-color:var(--panel-border-hi); }
.p-row-clickable:focus-visible{ outline:2px solid var(--tactical); outline-offset:2px; }
.p-name{ font-weight:600; }
.p-name a:hover{ text-decoration:underline; text-decoration-color:var(--tactical); }
.p-steamid{ font-family:var(--font-mono); font-size:11px; color:var(--muted); }
.p-reason{ color:var(--ink-dim); }
.p-admin{ color:var(--ink-dim); font-size:13px; }
.p-duration{ font-family:var(--font-mono); font-size:12.5px; }
.p-date{ font-family:var(--font-mono); font-size:11.5px; color:var(--muted); }
@media (max-width:920px){
  .p-row{ grid-template-columns:1fr; gap:8px; }
  .p-row.head{ display:none; }
  .p-row:not(.head){ padding:18px 18px; }
}

/* ---- pagination ---- */
.pager{ display:flex; justify-content:center; gap:8px; margin-top:28px; }
.pager button{ width:36px; height:36px; background:var(--panel); border:1px solid var(--panel-border); color:var(--ink-dim); cursor:pointer; font-family:var(--font-mono); font-size:13px; border-radius:var(--r-xs); }
.pager button.active{ background:var(--signal); color:#180800; border-color:var(--signal); }

/* ---- team tabs (skins page) ---- */
.team-tabs{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:32px; }
.team-tab{
  padding:20px 24px; cursor:pointer; border:1px solid var(--panel-border); background:var(--panel);
  display:flex; align-items:center; justify-content:space-between; transition:all .18s;
  border-radius:var(--r-md);
}
.team-tab .tt-name{ font-family:var(--font-display); font-size:19px; text-transform:uppercase; }
.team-tab .tt-label{ font-family:var(--font-mono); font-size:11px; color:var(--muted); letter-spacing:0.1em; }
.team-tab.t-side.active{ border-color:var(--t-color); background:linear-gradient(120deg, rgba(212,162,76,0.14), var(--panel)); }
.team-tab.t-side.active .tt-name{ color:var(--t-color); }
.team-tab.ct-side.active{ border-color:var(--ct-color); background:linear-gradient(120deg, rgba(76,143,212,0.14), var(--panel)); }
.team-tab.ct-side.active .tt-name{ color:var(--ct-color); }

.cat-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px; }

.weapon-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:14px; }
.weapon-card{ padding:16px; cursor:pointer; text-align:center; border:1px solid var(--panel-border); background:var(--panel); transition:all .15s; border-radius:var(--r-sm); }
.weapon-card:hover{ border-color:var(--panel-border-hi); transform:translateY(-2px); }
.weapon-card.equipped{ border-color:var(--tactical); }
.weapon-card img{ height:56px; object-fit:contain; margin:0 auto 12px; }
.weapon-card .wn{ font-size:12.5px; font-weight:700; }
.weapon-card .ws{ font-family:var(--font-mono); font-size:10.5px; color:var(--muted); margin-top:4px; }
.weapon-card.equipped .ws{ color:var(--tactical); }

/* ---- skin picker modal ---- */
.modal-veil{ position:fixed; inset:0; background:rgba(4,6,4,0.72); backdrop-filter:blur(6px); z-index:200; display:flex; align-items:center; justify-content:center; padding:24px; }
.modal{ width:100%; max-width:760px; max-height:86vh; overflow:auto; background:var(--bg-alt); border:1px solid var(--panel-border-hi); border-radius:var(--r-lg); }
.modal-head{ display:flex; justify-content:space-between; align-items:center; padding:22px 26px; border-bottom:1px solid var(--panel-border); position:sticky; top:0; background:var(--bg-alt); z-index:2; border-radius:var(--r-lg) var(--r-lg) 0 0;}
.modal-close{ width:34px; height:34px; display:flex; align-items:center; justify-content:center; background:var(--panel); cursor:pointer; color:var(--ink-dim); border:1px solid var(--panel-border); border-radius:50%; }
.modal-body{ padding:24px 26px; }
.skin-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:12px; max-height:320px; overflow:auto; padding-right:4px; margin-bottom:24px;}
.skin-opt{ padding:12px; border:1px solid var(--panel-border); cursor:pointer; text-align:center; background:var(--panel); border-radius:var(--r-sm); }
.skin-opt:hover{ border-color:var(--panel-border-hi); }
.skin-opt.sel{ border-color:var(--signal); background:rgba(255,95,31,0.08); }
.skin-opt img{ height:44px; object-fit:contain; margin:0 auto 8px; }
.skin-opt .sn{ font-size:10.5px; color:var(--ink-dim); line-height:1.3; }
.field{ margin-bottom:18px; }
.field label{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); display:block; margin-bottom:10px; }
.field input[type=range]{ width:100%; accent-color:var(--signal); }
.field input[type=text]{ width:100%; background:var(--panel); border:1px solid var(--panel-border); color:var(--ink); padding:11px 16px; font-family:var(--font-body); border-radius:999px; }
.field-row{ display:flex; gap:20px; flex-wrap:wrap; }
.toggle{ display:inline-block; cursor:pointer; user-select:none; position:relative; }
.toggle-input{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.toggle-track{
  display:inline-block; vertical-align:middle; box-sizing:border-box;
  width:42px; height:24px; border-radius:999px;
  background:var(--panel-2); border:1px solid var(--panel-border-hi);
  position:relative; transition:background .18s var(--ease), border-color .18s var(--ease);
}
.toggle-thumb{
  width:16px; height:16px; border-radius:50%; background:var(--muted);
  position:absolute; top:2px; left:2px; transition:left .18s var(--ease), background .18s var(--ease);
}
.toggle-input:checked + .toggle-track{ border-color:var(--signal); background:rgba(255,95,31,0.16); }
.toggle-input:checked + .toggle-track .toggle-thumb{ left:21px; background:var(--signal); }
.toggle-label{ display:inline-block; vertical-align:middle; margin-left:12px; font-size:14px; line-height:1; }

.gate{ max-width:480px; margin:60px auto; padding:48px 38px; text-align:center; border-radius:var(--r-lg); }
.gate .feature-icon{ margin:0 auto 22px; }
.steam-btn{ background:#171a21; color:#c7d5e0; border:1px solid #2a3f5a; }
.steam-btn:hover{ border-color:#66c0f4; color:#66c0f4; }

/* ---- footer ---- */
footer{ border-top:1px solid var(--panel-border); padding:56px 0 30px; margin-top:60px; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px; }
@media (max-width:800px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
.foot-col h5{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin-bottom:16px; }
.foot-col a{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-dim); padding:6px 0; }
.foot-col a svg{ flex:none; opacity:0.75; }
.foot-col a:hover{ color:var(--signal); }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:26px; border-top:1px solid var(--panel-border); font-family:var(--font-mono); font-size:12px; color:var(--muted); flex-wrap:wrap; gap:14px;}
.ip-copy{ display:flex; align-items:center; gap:10px; padding:9px 16px; border:1px solid var(--panel-border-hi); font-family:var(--font-mono); font-size:12.5px; cursor:pointer; border-radius:999px; }
.ip-copy:hover{ border-color:var(--tactical); color:var(--tactical); }

/* ---- modal entrance/exit + apply feedback animations ---- */
.modal-veil{ opacity:0; transition:opacity .22s var(--ease); }
.modal-veil.show{ opacity:1; }
.modal-veil .modal{ transform:scale(.94) translateY(14px); transition:transform .28s var(--ease-bounce); }
.modal-veil.show .modal{ transform:none; }

@keyframes skinOptPop{ 0%{ transform:scale(1); } 45%{ transform:scale(1.07); } 100%{ transform:scale(1); } }
.skin-opt.sel{ animation:skinOptPop .32s var(--ease); }

.btn-applied{ background:var(--tactical) !important; border-color:var(--tactical) !important; color:#04211c !important; }

@keyframes cardAppliedGlow{
  0%{ box-shadow:0 0 0 0 rgba(34,214,181,0); border-color:var(--panel-border); }
  25%{ box-shadow:0 0 0 5px rgba(34,214,181,0.22), 0 0 26px rgba(34,214,181,0.35); border-color:var(--tactical); }
  100%{ box-shadow:0 0 0 0 rgba(34,214,181,0); }
}
.weapon-card.just-applied{ animation:cardAppliedGlow 1.1s var(--ease); }

@media (prefers-reduced-motion: reduce){
  .modal-veil, .modal-veil .modal, .skin-opt.sel, .weapon-card.just-applied{ animation:none !important; transition:none !important; }
}

/* ---- utility ---- */
.reveal{
  opacity:0; transform:translateY(28px) scale(.97);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:var(--reveal-delay, 0s);
}
.reveal.in{ opacity:1; transform:none; }

/* staggered cascade for grid/list children — each successive card/row eases
   in slightly after the previous one, instead of everything popping at once */
.grid-2 .reveal:nth-child(1), .grid-3 .reveal:nth-child(1), .grid-4 .reveal:nth-child(1){ --reveal-delay: 0s; }
.grid-2 .reveal:nth-child(2), .grid-3 .reveal:nth-child(2), .grid-4 .reveal:nth-child(2){ --reveal-delay: .09s; }
.grid-2 .reveal:nth-child(3), .grid-3 .reveal:nth-child(3), .grid-4 .reveal:nth-child(3){ --reveal-delay: .18s; }
.grid-4 .reveal:nth-child(4){ --reveal-delay: .27s; }

@media (prefers-reduced-motion: reduce){
  .reveal{ transition:none; transform:none; opacity:1; }
}
.empty-state{ text-align:center; padding:70px 20px; color:var(--muted); }
.empty-state svg{ margin:0 auto 18px; opacity:0.5; }
.toast{ position:fixed; bottom:26px; right:26px; z-index:300; background:var(--panel-2); border:1px solid var(--tactical); padding:14px 20px; font-family:var(--font-mono); font-size:13px; display:flex; align-items:center; gap:10px; transform:translateY(20px); opacity:0; transition:all .25s var(--ease); border-radius:var(--r-sm); }
.toast.show{ transform:none; opacity:1; }

/* ---- live server status card ---- */
.server-card{
  display:flex; align-items:center; gap:0; flex-wrap:wrap;
  border:1px solid var(--panel-border-hi);
  background:linear-gradient(120deg, rgba(255,95,31,0.07), var(--panel) 40%);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.server-card-main{ flex:1; min-width:240px; padding:22px 26px; display:flex; align-items:center; gap:18px; }
.server-status-dot{ width:12px; height:12px; border-radius:50%; flex:none; background:var(--muted); }
.server-status-dot.online{ background:var(--tactical); box-shadow:0 0 0 5px rgba(34,214,181,0.18); animation:blip 2s ease-in-out infinite; }
.server-status-dot.offline{ background:var(--danger); box-shadow:0 0 0 5px rgba(255,59,59,0.15); }
.server-card-name{ font-family:var(--font-display); font-size:22px; text-transform:uppercase; line-height:1; }
.server-card-sub{ font-family:var(--font-mono); font-size:11.5px; color:var(--muted); margin-top:6px; letter-spacing:.04em; }
.server-card-stats{ display:flex; }
.server-stat{ padding:22px 24px; border-left:1px solid var(--panel-border); text-align:center; min-width:100px; }
.server-stat .n{ font-family:var(--font-mono); font-size:24px; font-weight:700; }
.server-stat .l{ font-family:var(--font-mono); font-size:10px; color:var(--muted); letter-spacing:.1em; text-transform:uppercase; margin-top:4px; }
.server-card-ip{
  display:flex; align-items:center; gap:10px; padding:18px 26px;
  border-left:1px solid var(--panel-border); flex:none;
}
.server-card-ip-text{
  display:flex; align-items:center; gap:8px; cursor:pointer;
  font-family:var(--font-mono); font-size:13.5px; color:var(--ink-dim);
  padding:10px 14px; border:1px solid var(--panel-border-hi); transition:all .15s;
  border-radius:999px;
}
.server-card-ip-text:hover{ color:var(--ink); border-color:var(--tactical); }
.server-card-ip-text svg{ color:var(--muted); flex:none; }
.server-card-connect{ white-space:nowrap; }
@media (max-width:760px){
  .server-card-main, .server-card-ip{ padding:16px 20px; width:100%; border-left:none; border-top:1px solid var(--panel-border); }
  .server-card-main{ border-top:none; }
  .server-card-stats{ width:100%; }
  .server-stat{ flex:1; padding:16px 10px; }
  .server-card-ip{ justify-content:space-between; }
  .server-card-ip-text{ flex:1; justify-content:center; }
}

/* ==========================================================================
   MOBILE REFINEMENTS — phone-width pass (real device testing, not just
   tablet breakpoints). Anything not already handled above lives here.
   ========================================================================== */
@media (max-width:600px){
  .section{ padding:56px 0; }
  .hero{ min-height:38vh; }

  .gate{ margin:32px auto; padding:34px 22px; max-width:100%; }

  .modal-veil{ padding:0; align-items:flex-end; }
  .modal{ max-width:100%; max-height:92vh; width:100%; border-radius:var(--r-lg) var(--r-lg) 0 0; }
  .modal-head{ padding:18px 18px; }
  .modal-body{ padding:18px 18px 22px; }
  .skin-grid{ grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); max-height:280px; gap:9px; }
  .skin-opt img{ height:36px; }

  .weapon-grid{ grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:10px; }
  .weapon-card{ padding:12px; }
  .weapon-card img{ height:44px; }

  .team-tabs{ gap:10px; }
  .team-tab{ padding:14px 14px; }
  .team-tab .tt-name{ font-size:16px; }

  .cat-tabs{ gap:6px; flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; margin-left:-18px; margin-right:-18px; padding-left:18px; padding-right:18px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .cat-tabs::-webkit-scrollbar{ display:none; }
  .cat-tabs .chip{ flex:none; }

  .p-avatar{ width:30px; height:30px; }

  .foot-grid{ grid-template-columns:1fr 1fr; gap:30px; }
  .foot-grid .foot-col:first-child{ grid-column:1/-1; }
  .foot-bottom{ flex-direction:column; align-items:flex-start; }

  .toast{ left:16px; right:16px; bottom:16px; }
  .filter-bar select#pStatus{ flex:1 1 100%; }
}

@media (max-width:360px){
  .container{ padding:0 14px; }
  .weapon-grid{ grid-template-columns:repeat(2,1fr); }
  .skin-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ---- staff page ---- */
.staff-grid{ display:flex; flex-wrap:wrap; gap:18px; }
.staff-grid > *{ flex:1 1 calc(25% - 14px); min-width:200px; }
.staff-card{ padding:22px; text-align:center; transition:transform .2s var(--ease), border-color .2s; }
.staff-card:hover{ transform:translateY(-4px); border-color:var(--panel-border-hi); }
.staff-avatar{ width:64px; height:64px; border-radius:50%; margin:0 auto 14px; background:var(--panel-2); display:flex; align-items:center; justify-content:center; overflow:hidden; border:2px solid var(--panel-border-hi); }
.staff-avatar img{ width:100%; height:100%; object-fit:cover; }
.staff-name{ font-weight:700; font-size:14.5px; margin-bottom:6px; }
.staff-rank{ display:inline-block; }
.staff-since{ font-family:var(--font-mono); font-size:10.5px; color:var(--muted); margin-top:10px; }

/* ---- rules page ---- */
.rules-list{ counter-reset:rule; }
.rule-item{ display:flex; gap:18px; padding:22px 0; border-top:1px solid var(--panel-border); }
.rule-item:first-child{ border-top:none; }
.rule-num{ font-family:var(--font-mono); font-size:22px; font-weight:700; color:var(--signal); flex:none; width:36px; }
.rule-body h3{ font-size:15px; text-transform:uppercase; margin-bottom:6px; }
.rule-body p{ color:var(--ink-dim); font-size:14px; margin:0; }
.rule-severity{ font-family:var(--font-mono); font-size:10.5px; padding:3px 9px; border-radius:999px; margin-left:10px; vertical-align:middle; }

/* ---- player profile page ---- */
.profile-head{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; padding:26px; margin-bottom:36px; }
.profile-avatar{ width:84px; height:84px; border-radius:50%; background:var(--panel-2); flex:none; overflow:hidden; border:2px solid var(--panel-border-hi); }
.profile-avatar img{ width:100%; height:100%; object-fit:cover; }
.profile-name{ font-family:var(--font-display); font-size:26px; text-transform:uppercase; }
.profile-steamid{ font-family:var(--font-mono); font-size:12.5px; color:var(--muted); margin-top:4px; }
.profile-stats{ display:flex; gap:28px; margin-left:auto; flex-wrap:wrap; }
.profile-stat{ text-align:center; }
.profile-stat .n{ font-family:var(--font-mono); font-size:22px; font-weight:700; }
.profile-stat .l{ font-family:var(--font-mono); font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-top:3px; }
.search-hero{ max-width:520px; margin:0 auto; text-align:center; }

/* ---- legal pages (privacy / terms) ---- */
.legal-content{ max-width:760px; }
.legal-content h2{ font-size:20px; text-transform:uppercase; margin:44px 0 14px; }
.legal-content h2:first-child{ margin-top:0; }
.legal-content p{ color:var(--ink-dim); font-size:15px; margin:0 0 14px; }
.legal-content ul{ margin:0 0 14px; padding-left:0; }
.legal-content li{ color:var(--ink-dim); font-size:15px; padding:5px 0 5px 22px; position:relative; }
.legal-content li::before{ content:"—"; position:absolute; left:0; color:var(--signal); }
.legal-content strong{ color:var(--ink); }
.legal-content a{ color:var(--tactical); text-decoration:underline; text-underline-offset:2px; }
.legal-updated{ font-family:var(--font-mono); font-size:12px; color:var(--muted); margin-bottom:40px; }


/* =========================================================
   VELOCITY CLEAN V2
   Less visual noise / more breathing room
   ========================================================= */

/* Overall spacing */
.section{
  padding:68px 0;
}

.section-head{
  margin-bottom:30px;
  max-width:590px;
}

.section-head h2{
  margin-top:10px;
}

.section-head p{
  margin-top:10px;
  line-height:1.65;
}

/* Alternate sections shouldn't feel boxed in */
.section-alt{
  border-top:0;
  border-bottom:0;
  background:rgba(255,255,255,.012);
}


/* HERO --------------------------------------------------- */

.hero{
  overflow:hidden;
}

.hero-video-wrap::after{
  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.48),
      rgba(0,0,0,.15) 55%,
      rgba(0,0,0,.28)
    );
}

.hero-bg-loop{
  opacity:.6;
}


/* SERVER CARDS ------------------------------------------- */

.server-card{
  border-radius:18px;
  border-color:rgba(255,255,255,.075);
  background:rgba(255,255,255,.025);
  overflow:hidden;
  box-shadow:none;
}

.server-card-clickable:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.13);
  box-shadow:0 16px 45px rgba(0,0,0,.14);
}

.server-card-main{
  padding:20px 24px;
}

.server-card-name{
  font-size:21px;
}

.server-card-sub{
  opacity:.78;
}

.server-card-stats{
  background:rgba(255,255,255,.012);
}

.server-stat{
  padding:18px 22px;
  border-left-color:rgba(255,255,255,.06);
}

.server-stat .n{
  font-size:21px;
}

.server-stat .l{
  opacity:.7;
}

.server-card-ip{
  background:transparent;
}

.server-card-ip-text{
  background:transparent;
  border-color:rgba(255,255,255,.07);
}


/* STATUS DOT - less aggressive */
.server-status-dot.online{
  box-shadow:0 0 0 4px rgba(34,214,181,.10);
}

.server-status-dot.offline{
  box-shadow:0 0 0 4px rgba(255,59,59,.09);
}


/* HUD ---------------------------------------------------- */

.hud-strip{
  border-color:rgba(255,255,255,.065);
  border-radius:16px;
  background:rgba(255,255,255,.018);
}

.hud-item{
  padding:14px 18px;
  border-right-color:rgba(255,255,255,.055);
}

.hud-item .v{
  font-size:19px;
}

.hud-item .l{
  font-size:9.5px;
  opacity:.75;
}


/* FEATURE CARDS ------------------------------------------ */

.feature-card{
  padding:25px 23px;
  border-color:rgba(255,255,255,.065);
  background:rgba(255,255,255,.018);
  border-radius:16px;
}

.feature-card:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.12);
  background:rgba(255,255,255,.028);
}

.feature-icon{
  width:40px;
  height:40px;
  margin-bottom:16px;
  border-radius:10px;
}

.feature-card h3{
  font-size:18px;
  margin-bottom:8px;
}

.feature-card p{
  font-size:13.5px;
  line-height:1.65;
  margin-bottom:14px;
}

.feature-link{
  font-size:11.5px;
}


/* TICKER ------------------------------------------------- */

.ticker{
  border-top-color:rgba(255,255,255,.045);
  border-bottom-color:rgba(255,255,255,.045);
  background:rgba(255,255,255,.01);
}

.ticker-item{
  padding:11px 22px;
  font-size:11px;
  opacity:.78;
  border-right-color:rgba(255,255,255,.045);
}

.ticker::before{
  background:linear-gradient(90deg,var(--bg-alt),transparent);
}

.ticker::after{
  background:linear-gradient(-90deg,var(--bg-alt),transparent);
}


/* Generic panels */
.panel{
  box-shadow:none;
}


/* Buttons slightly calmer */
.btn{
  box-shadow:none;
}

.btn:hover{
  transform:translateY(-1px);
}


/* Footer gets more separation, less noise */
footer{
  margin-top:20px;
}


/* MOBILE ------------------------------------------------- */

@media(max-width:760px){

  .section{
    padding:52px 0;
  }

  .section-head{
    margin-bottom:24px;
  }

  .server-card-main{
    padding:18px;
  }

  .server-card-stats{
    width:100%;
    border-top:1px solid rgba(255,255,255,.055);
  }

  .server-stat{
    flex:1;
    min-width:0;
    padding:15px 10px;
  }

  .hud-item{
    min-width:50%;
    padding:13px 14px;
  }

  .feature-card{
    padding:22px 20px;
  }

  /* activity ticker is useful on desktop but noisy on mobile */
  .ticker{
    display:none;
  }
}


/* =========================================================
   VELOCITY SKIN CHANGER POLISH
   ========================================================= */

body.skin-modal-open {
    overflow: hidden;
}

/* sakrij scrollbar, ali scroll ostaje */
#skinModal .modal,
#skinModal .skin-grid {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#skinModal .modal::-webkit-scrollbar,
#skinModal .skin-grid::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* backdrop */
#skinModal.modal-veil {
    background:
        radial-gradient(
            circle at 50% 18%,
            rgba(255,95,31,.09),
            transparent 35%
        ),
        rgba(3,5,4,.82);

    backdrop-filter: blur(13px);
}

/* glavni modal */
#skinModal .modal {
    max-width: 980px;
    max-height: 90vh;

    border:
        1px solid rgba(255,255,255,.12);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.004)
        ),
        var(--bg-alt);

    box-shadow:
        0 30px 90px rgba(0,0,0,.55),
        0 0 0 1px rgba(255,255,255,.025);

    overflow-y: auto;
}

/* header modala */
#skinModal .modal-head {
    padding: 20px 25px;

    background:
        linear-gradient(
            180deg,
            rgba(20,22,20,.97),
            rgba(14,16,14,.94)
        );

    border-bottom:
        1px solid rgba(255,255,255,.08);

    backdrop-filter: blur(18px);
}

/* X button */
#skinModal .modal-close {
    width: 38px;
    height: 38px;

    border:
        1px solid rgba(255,255,255,.1);

    background:
        rgba(255,255,255,.04);

    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease;
}

#skinModal .modal-close:hover {
    transform: rotate(90deg);

    background:
        rgba(255,95,31,.12);

    border-color:
        rgba(255,95,31,.45);

    color: var(--signal);
}

/* search */
#skinModal .vc-search-box {
    min-height: 50px;

    border-radius: 12px;

    background:
        rgba(255,255,255,.025);

    border:
        1px solid rgba(255,255,255,.09);
}

#skinModal .vc-search-box:focus-within {
    border-color:
        rgba(255,95,31,.65);

    box-shadow:
        0 0 0 3px rgba(255,95,31,.08);
}

/* grid */
#skinModal .skin-grid {
    grid-template-columns:
        repeat(auto-fill,minmax(150px,1fr));

    gap: 14px;

    max-height: 440px;

    padding:
        4px 3px 12px;
}

/* skin card */
#skinModal .skin-opt {
    min-height: 130px;

    padding: 15px;

    position: relative;

    overflow: hidden;

    border:
        1px solid rgba(255,255,255,.075);

    border-radius: 12px;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(255,255,255,.045),
            transparent 55%
        ),
        rgba(255,255,255,.018);

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

#skinModal .skin-opt::before {
    content: "";

    position: absolute;

    left: 18px;
    right: 18px;
    bottom: 0;

    height: 2px;

    border-radius: 10px 10px 0 0;

    background: var(--signal);

    opacity: 0;

    transform: scaleX(.3);

    transition:
        opacity .2s ease,
        transform .2s ease;
}

#skinModal .skin-opt:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(255,255,255,.18);

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(255,255,255,.065),
            transparent 60%
        ),
        rgba(255,255,255,.025);

    box-shadow:
        0 14px 30px rgba(0,0,0,.25);
}

#skinModal .skin-opt:hover::before {
    opacity: .45;

    transform: scaleX(1);
}

#skinModal .skin-opt.sel {
    border-color:
        var(--signal);

    background:
        linear-gradient(
            145deg,
            rgba(255,95,31,.11),
            rgba(255,95,31,.025)
        ),
        var(--panel);

    box-shadow:
        0 0 0 1px rgba(255,95,31,.15),
        0 15px 35px rgba(255,95,31,.08);
}

#skinModal .skin-opt.sel::before {
    opacity: 1;
    transform: scaleX(1);
}

/* slike skinova */
#skinModal .skin-opt img {
    width: 100%;

    max-width: 135px;

    height: 70px !important;

    object-fit: contain;

    margin:
        0 auto 12px !important;

    filter:
        drop-shadow(
            0 9px 12px rgba(0,0,0,.3)
        );

    transition:
        transform .2s ease;
}

#skinModal .skin-opt:hover img {
    transform: scale(1.07);
}

/* naziv skina */
#skinModal .skin-opt .sn {
    color: var(--ink-dim);

    font-size: 11px !important;

    font-weight: 600;

    line-height: 1.35;

    transition:
        color .18s ease;
}

#skinModal .skin-opt:hover .sn,
#skinModal .skin-opt.sel .sn {
    color: var(--ink);
}


/* WEAPON CARDS */

.weapon-card {
    border-radius: 12px !important;

    border:
        1px solid rgba(255,255,255,.075) !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.03),
            rgba(255,255,255,.005)
        ),
        var(--panel) !important;
}

.weapon-card:hover {
    border-color:
        rgba(255,255,255,.17) !important;

    box-shadow:
        0 15px 35px rgba(0,0,0,.22);
}

.weapon-card.equipped {
    border-color:
        rgba(34,214,181,.5) !important;

    box-shadow:
        inset 0 0 25px rgba(34,214,181,.025);
}


/* TEAM TABS */

.team-tab {
    border-radius:
        12px !important;
}

.team-tab.active {
    transform:
        translateY(-2px);
}


/* mobile */

@media (max-width:700px) {

    #skinModal .modal {
        max-height: 94vh;
    }

    #skinModal .skin-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        max-height: 390px;

        gap: 10px;
    }

    #skinModal .skin-opt {
        min-height: 112px;

        padding: 11px;
    }

    #skinModal .skin-opt img {
        height:
            54px !important;
    }
}


/* =========================================================
   VC LOGIN + SKIN PICKER V2
   ========================================================= */


/* ---------- Steam login card ---------- */

.skin-login-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding: 30px !important;

    border:
        1px solid rgba(255,255,255,.10) !important;

    border-radius:
        18px !important;

    background:
        radial-gradient(
            circle at 88% 0%,
            rgba(255,95,31,.12),
            transparent 35%
        ),
        radial-gradient(
            circle at 0% 100%,
            rgba(34,214,181,.055),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.008)
        ),
        var(--panel) !important;

    box-shadow:
        0 22px 65px rgba(0,0,0,.22);
}


.skin-login-card::before {
    content: "";

    position: absolute;
    z-index: -1;

    width: 240px;
    height: 240px;

    right: -100px;
    top: -130px;

    border-radius: 50%;

    background:
        rgba(255,95,31,.12);

    filter:
        blur(45px);

    pointer-events: none;
}


.skin-login-glow {
    opacity: .8;
}


.skin-login-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 68px !important;
    height: 68px !important;

    flex: none;

    border:
        1px solid rgba(255,255,255,.11);

    border-radius:
        17px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.07),
            rgba(255,255,255,.015)
        );

    box-shadow:
        inset 0 1px rgba(255,255,255,.06),
        0 14px 30px rgba(0,0,0,.18);
}


.skin-login-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 8px;

    color:
        var(--signal) !important;

    font-family:
        var(--font-mono);

    font-size:
        10px !important;

    font-weight: 700;

    letter-spacing:
        .11em;

    text-transform:
        uppercase;
}


.skin-login-copy h2,
.skin-login-copy h3 {
    margin-bottom:
        8px;
}


.skin-login-copy p {
    max-width:
        650px;

    color:
        var(--ink-dim);

    line-height:
        1.65;
}


.skin-login-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top:
        14px;
}


.skin-login-badges > * {
    border:
        1px solid rgba(255,255,255,.08);

    border-radius:
        999px;

    padding:
        6px 10px;

    background:
        rgba(255,255,255,.025);
}


.skin-steam-btn {
    position:
        relative;

    overflow:
        hidden;

    min-height:
        48px;

    border-radius:
        12px !important;

    box-shadow:
        0 12px 30px rgba(0,0,0,.20);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}


.skin-steam-btn::after {
    content: "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            105deg,
            transparent 20%,
            rgba(255,255,255,.10) 50%,
            transparent 80%
        );

    transform:
        translateX(-130%);

    transition:
        transform .55s ease;

    pointer-events:
        none;
}


.skin-steam-btn:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 16px 36px rgba(0,0,0,.28);
}


.skin-steam-btn:hover::after {
    transform:
        translateX(130%);
}


.skin-login-note {
    margin-top:
        13px;

    color:
        var(--muted);

    font-size:
        11px;

    line-height:
        1.5;
}



/* ---------- Weapon selection ---------- */

.weapon-card {
    isolation:
        isolate;
}


.weapon-card .wn {
    margin-top:
        1px;
}


.weapon-card.equipped::before {
    content:
        "✓";

    position:
        absolute;

    top:
        10px;

    right:
        10px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        22px;

    height:
        22px;

    border-radius:
        50%;

    background:
        var(--tactical);

    color:
        #031814;

    font-size:
        12px;

    font-weight:
        900;

    box-shadow:
        0 5px 15px rgba(34,214,181,.22);
}



/* ---------- Skin picker ---------- */

#skinModal .modal {
    border-radius:
        18px;
}


#skinModal .modal-head {
    min-height:
        76px;
}


#modalWeaponName {
    margin-bottom:
        4px;

    color:
        var(--muted) !important;
}


#modalPaintName {
    max-width:
        700px;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    color:
        var(--ink);
}


.vc-skin-modal-search {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}


.vc-skin-modal-search .vc-search-box {
    flex:
        1;
}


.vc-skin-count {
    flex:
        none;

    padding:
        7px 10px;

    border:
        1px solid var(--panel-border);

    border-radius:
        999px;

    background:
        var(--panel);

    color:
        var(--muted);

    font:
        10px var(--font-mono);

    text-transform:
        uppercase;

    letter-spacing:
        .07em;
}


#skinModal .skin-opt {
    isolation:
        isolate;
}


.vc-pick-mark {
    position:
        absolute;

    top:
        8px;

    right:
        8px;

    width:
        23px;

    height:
        23px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid rgba(255,255,255,.08);

    border-radius:
        50%;

    background:
        rgba(5,7,6,.72);

    color:
        transparent;

    font-size:
        11px;

    font-weight:
        900;

    opacity:
        0;

    transform:
        scale(.75);

    transition:
        .16s ease;
}


#skinModal .skin-opt:hover .vc-pick-mark {
    opacity:
        .5;

    color:
        var(--muted);

    transform:
        scale(1);
}


#skinModal .skin-opt.sel .vc-pick-mark {
    opacity:
        1;

    transform:
        scale(1);

    border-color:
        var(--signal);

    background:
        var(--signal);

    color:
        #1d0800;

    box-shadow:
        0 6px 18px rgba(255,95,31,.24);
}


#skinModal .skin-opt.sel .sn {
    color:
        #fff !important;

    font-weight:
        700;
}


#skinModal .field {
    padding-top:
        4px;
}


#skinModal #saveSkinBtn {
    min-height:
        50px;

    border-radius:
        12px;

    font-weight:
        800;

    box-shadow:
        0 12px 30px rgba(255,95,31,.11);

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}


#skinModal #saveSkinBtn:not(:disabled):hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 16px 35px rgba(255,95,31,.18);
}


@media (max-width: 700px) {

    .skin-login-card {
        padding:
            22px !important;
    }

    .skin-login-icon {
        width:
            58px !important;

        height:
            58px !important;
    }

    .vc-skin-modal-search {
        align-items:
            stretch;

        flex-direction:
            column;
    }

    .vc-skin-count {
        align-self:
            flex-start;
    }

    #modalPaintName {
        max-width:
            260px;
    }
}



/* =========================================================
   VC T / CT LOADOUT PREVIEW
   ========================================================= */

.vc-loadout-preview {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:15px;
    margin:-12px 0 28px;
}

.vc-loadout-card {
    min-width:0;
    display:grid;
    grid-template-columns:150px minmax(0,1fr);
    min-height:230px;
    position:relative;
    overflow:hidden;
    cursor:pointer;

    border:1px solid var(--panel-border);
    border-radius:17px;

    background:
        linear-gradient(
            140deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.006)
        ),
        var(--panel);

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.vc-loadout-card:hover {
    transform:translateY(-3px);
    box-shadow:0 18px 45px rgba(0,0,0,.22);
}

.vc-loadout-card.ct.active {
    border-color:rgba(76,143,212,.65);
    box-shadow:
        0 0 0 2px rgba(76,143,212,.06),
        0 18px 45px rgba(76,143,212,.08);
}

.vc-loadout-card.t.active {
    border-color:rgba(212,162,76,.65);
    box-shadow:
        0 0 0 2px rgba(212,162,76,.06),
        0 18px 45px rgba(212,162,76,.08);
}

.vc-loadout-agent {
    position:relative;
    min-height:230px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    overflow:hidden;
}

.vc-loadout-card.ct .vc-loadout-agent {
    background:
        radial-gradient(
            circle at 50% 60%,
            rgba(76,143,212,.16),
            transparent 62%
        );
}

.vc-loadout-card.t .vc-loadout-agent {
    background:
        radial-gradient(
            circle at 50% 60%,
            rgba(212,162,76,.15),
            transparent 62%
        );
}

.vc-loadout-agent-img {
    display:block;
    max-width:145px;
    width:100%;
    max-height:220px;
    object-fit:contain;
    object-position:center bottom;
    filter:drop-shadow(0 18px 18px rgba(0,0,0,.34));
    transition:transform .22s ease;
}

.vc-loadout-card:hover .vc-loadout-agent-img {
    transform:scale(1.035);
}

.vc-loadout-team-tag {
    position:absolute;
    z-index:2;
    top:12px;
    left:12px;

    min-width:34px;
    height:25px;
    padding:0 9px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(255,255,255,.1);
    border-radius:999px;

    background:rgba(5,7,6,.65);
    backdrop-filter:blur(10px);

    font:700 10px var(--font-mono);
    letter-spacing:.1em;
}

.vc-loadout-card.ct .vc-loadout-team-tag {
    color:var(--ct-color);
}

.vc-loadout-card.t .vc-loadout-team-tag {
    color:var(--t-color);
}

.vc-loadout-agent-empty {
    margin:auto;
    color:var(--muted);
    font:700 34px var(--font-display);
    opacity:.35;
}

.vc-loadout-info {
    min-width:0;
    padding:20px 18px 17px 6px;
    display:flex;
    flex-direction:column;
}

.vc-loadout-title {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}

.vc-loadout-title span,
.vc-loadout-label {
    display:block;
    margin-bottom:4px;

    color:var(--muted);
    font:9.5px var(--font-mono);
    text-transform:uppercase;
    letter-spacing:.1em;
}

.vc-loadout-title strong {
    display:block;
    max-width:240px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    color:var(--ink);
    font-size:14px;
}

.vc-change-agent {
    flex:none;
    padding:7px 9px;

    border:1px solid var(--panel-border-hi);
    border-radius:9px;

    background:rgba(255,255,255,.025);
    color:var(--ink-dim);

    font:9px var(--font-mono);
    cursor:pointer;

    transition:.15s ease;
}

.vc-change-agent:hover {
    color:var(--ink);
    border-color:var(--signal);
    background:rgba(255,95,31,.06);
}

.vc-loadout-label {
    margin-top:17px;
    margin-bottom:8px;
}

.vc-loadout-items {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
}

.vc-loadout-item {
    min-width:0;
    min-height:69px;
    padding:7px 6px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(255,255,255,.065);
    border-radius:9px;

    background:rgba(255,255,255,.018);
}

.vc-loadout-item img {
    display:block;
    max-width:100%;
    width:64px;
    height:35px;
    object-fit:contain;
    margin-bottom:4px;

    filter:drop-shadow(0 5px 7px rgba(0,0,0,.26));
}

.vc-loadout-item span {
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    color:var(--muted);
    font-size:8.5px;
}

.vc-loadout-empty {
    grid-column:1/-1;

    min-height:68px;
    display:flex;
    align-items:center;

    color:var(--muted);
    font:10px var(--font-mono);
    line-height:1.5;
}

.vc-loadout-hint {
    margin-top:auto;
    padding-top:12px;

    color:var(--muted);
    font:9px var(--font-mono);
}

.vc-glove-data-error {
    grid-column:1/-1;
    min-height:130px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:7px;

    padding:24px;

    border:1px dashed rgba(255,95,31,.35);
    border-radius:12px;

    background:rgba(255,95,31,.035);

    text-align:center;
}

.vc-glove-data-error strong {
    color:var(--ink);
    font-size:13px;
}

.vc-glove-data-error span {
    color:var(--muted);
    font-size:11px;
}


@media (max-width:900px) {

    .vc-loadout-preview {
        grid-template-columns:1fr;
    }

    .vc-loadout-card {
        grid-template-columns:135px minmax(0,1fr);
    }
}


@media (max-width:520px) {

    .vc-loadout-card {
        grid-template-columns:110px minmax(0,1fr);
        min-height:205px;
    }

    .vc-loadout-agent {
        min-height:205px;
    }

    .vc-loadout-agent-img {
        max-width:110px;
        max-height:195px;
    }

    .vc-loadout-info {
        padding:16px 12px 14px 3px;
    }

    .vc-loadout-title {
        flex-direction:column;
        gap:8px;
    }

    .vc-loadout-items {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .vc-loadout-title strong {
        max-width:170px;
    }
}



/* =========================================================
   VC LOADOUT PREVIEW FINAL ALIGNMENT
   ========================================================= */

/* T uvijek lijevo */
.vc-loadout-card.t {
    order: 1;
}

/* CT uvijek desno */
.vc-loadout-card.ct {
    order: 2;
}


/* default item oznaka */
.vc-default-item {
    display:block;

    margin-top:3px;

    color:var(--muted);

    font:
        7px var(--font-mono);

    letter-spacing:.09em;

    opacity:.55;
}


/*
 * Default item je malo zatamnjen.
 * Kada dobije pravi skin, više nema
 * .vc-default-item oznaku.
 */
.vc-loadout-item:has(.vc-default-item) {
    opacity:.78;
}


.vc-loadout-item:has(.vc-default-item) img {
    filter:
        saturate(.8)
        drop-shadow(
            0 5px 7px
            rgba(0,0,0,.26)
        );
}


/* T kartica vizuelno odgovara lijevoj strani */
.vc-loadout-card.t .vc-loadout-info {
    text-align:left;
}


/* CT ostaje desna kartica */
.vc-loadout-card.ct .vc-loadout-info {
    text-align:left;
}


/* malo ljepši prijelaz kada se skin promijeni */
.vc-loadout-item img {
    transition:
        transform .2s ease,
        filter .2s ease,
        opacity .2s ease;
}

.vc-loadout-item:hover img {
    transform:
        scale(1.06);
}


/* mobile redoslijed također T -> CT */
@media (max-width:900px) {

    .vc-loadout-card.t {
        order:1;
    }

    .vc-loadout-card.ct {
        order:2;
    }

}


/* =========================================================
   PLAYER SEARCH
   ========================================================= */

body.vc-player-modal-open {
    overflow:hidden;
}

.vc-player-modal[hidden] {
    display:none !important;
}

.vc-player-modal {
    position:fixed;
    inset:0;
    z-index:9999;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:22px;
}

.vc-player-backdrop {
    position:absolute;
    inset:0;

    background:
        rgba(2,4,3,.84);

    backdrop-filter:
        blur(12px);
}

.vc-player-dialog {
    position:relative;
    z-index:2;

    width:min(720px,100%);
    max-height:min(760px,90vh);

    display:flex;
    flex-direction:column;

    overflow:hidden;

    border:
        1px solid
        rgba(255,255,255,.11);

    border-radius:
        18px;

    background:
        radial-gradient(
            circle at 80% 0%,
            rgba(76,143,212,.10),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.005)
        ),
        var(--bg-alt);

    box-shadow:
        0 35px 100px
        rgba(0,0,0,.55);
}

.vc-player-head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;

    padding:
        23px 25px 19px;

    border-bottom:
        1px solid
        rgba(255,255,255,.075);
}

.vc-player-kicker {
    margin-bottom:6px;

    color:
        var(--ct-color, #4c8fd4);

    font:
        9px var(--font-mono);

    font-weight:700;

    letter-spacing:.12em;
}

.vc-player-head h2 {
    margin:0;

    color:var(--ink);

    font-family:
        var(--font-display);

    font-size:
        22px;
}

.vc-player-subtitle {
    margin:
        6px 0 0;

    color:
        var(--muted);

    font-size:
        12px;

    line-height:
        1.5;
}

.vc-player-close {
    width:38px;
    height:38px;
    flex:none;

    display:flex;
    align-items:center;
    justify-content:center;

    border:
        1px solid
        var(--panel-border);

    border-radius:50%;

    background:
        rgba(255,255,255,.025);

    color:
        var(--ink-dim);

    font-size:23px;

    cursor:pointer;

    transition:
        .17s ease;
}

.vc-player-close:hover {
    color:var(--ink);

    border-color:
        var(--ct-color, #4c8fd4);

    background:
        rgba(76,143,212,.07);

    transform:
        rotate(90deg);
}

.vc-player-search {
    margin:
        19px 22px 13px;

    min-height:50px;

    display:flex;
    align-items:center;
    gap:11px;

    padding:
        0 17px;

    border:
        1px solid
        var(--panel-border-hi);

    border-radius:
        12px;

    background:
        rgba(255,255,255,.022);

    color:
        var(--muted);

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.vc-player-search:focus-within {
    border-color:
        var(--ct-color, #4c8fd4);

    box-shadow:
        0 0 0 3px
        rgba(76,143,212,.08);
}

.vc-player-search input {
    width:100%;

    border:0;
    outline:0;

    background:none;

    color:var(--ink);

    font:
        14px var(--font-body);
}

.vc-player-search input::placeholder {
    color:var(--muted);
}

.vc-player-results {
    padding:
        2px 22px 22px;

    overflow-y:auto;

    scrollbar-width:none;
}

.vc-player-results::-webkit-scrollbar {
    display:none;
}

.vc-player-state {
    min-height:170px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;

    color:var(--muted);

    font:
        11px var(--font-mono);

    text-align:center;
}

.vc-player-loader {
    width:24px;
    height:24px;

    border:
        2px solid
        rgba(255,255,255,.09);

    border-top-color:
        var(--ct-color, #4c8fd4);

    border-radius:50%;

    animation:
        vcPlayerSpin .75s linear infinite;
}

@keyframes vcPlayerSpin {
    to {
        transform:rotate(360deg);
    }
}

.vc-player-row {
    min-height:68px;

    display:grid;

    grid-template-columns:
        46px
        minmax(0,1fr)
        auto;

    align-items:center;

    gap:13px;

    margin-bottom:8px;

    padding:
        10px 12px;

    border:
        1px solid
        rgba(255,255,255,.065);

    border-radius:
        11px;

    background:
        rgba(255,255,255,.018);

    transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease;
}

.vc-player-row:hover {
    transform:
        translateY(-1px);

    border-color:
        rgba(76,143,212,.30);

    background:
        rgba(76,143,212,.035);
}

.vc-player-avatar {
    width:43px;
    height:43px;

    position:relative;

    overflow:hidden;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius:50%;

    background:
        var(--panel);
}

.vc-player-avatar img,
.vc-player-avatar-fallback {
    width:100%;
    height:100%;
}

.vc-player-avatar img {
    display:block;

    object-fit:cover;
}

.vc-player-avatar-fallback {
    display:flex;
    align-items:center;
    justify-content:center;

    color:
        var(--ct-color, #4c8fd4);

    font-weight:800;
}

.vc-player-info {
    min-width:0;

    display:flex;
    flex-direction:column;

    gap:4px;
}

.vc-player-info strong {
    overflow:hidden;

    color:var(--ink);

    font-size:13px;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.vc-player-info span {
    overflow:hidden;

    color:var(--muted);

    font:
        9.5px var(--font-mono);

    text-overflow:ellipsis;
    white-space:nowrap;
}

.vc-player-profile {
    padding:
        7px 9px;

    border:
        1px solid
        var(--panel-border);

    border-radius:
        8px;

    color:
        var(--ink-dim)
        !important;

    text-decoration:none;

    font:
        9px var(--font-mono);

    white-space:nowrap;

    transition:
        .15s ease;
}

.vc-player-profile:hover {
    color:
        var(--ct-color, #4c8fd4)
        !important;

    border-color:
        var(--ct-color, #4c8fd4);
}


/* =========================================================
   GLOVE IMAGE FALLBACK
   ========================================================= */

.weapon-card[data-key^="g"] img {
    min-width:80px;

    object-fit:contain;

    filter:
        drop-shadow(
            0 8px 10px
            rgba(0,0,0,.28)
        );
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:600px) {

    .vc-player-modal {
        padding:0;

        align-items:flex-end;
    }

    .vc-player-dialog {
        max-height:92vh;

        border-radius:
            18px 18px 0 0;
    }

    .vc-player-head {
        padding:
            19px 18px 16px;
    }

    .vc-player-search {
        margin:
            15px 16px 11px;
    }

    .vc-player-results {
        padding:
            2px 16px 18px;
    }

    .vc-player-row {
        grid-template-columns:
            42px
            minmax(0,1fr);
    }

    .vc-player-profile {
        grid-column:2;

        justify-self:start;
    }
}


/* VC_GLOBAL_UI_V3_END */