/* Velocity V10 — approved-reference polish */

/* ---------- GLOBAL SCALE / HEADER ---------- */
.v9-topbar{
  height:64px!important;
  background:rgba(2,10,17,.985)!important;
  border-bottom:1px solid rgba(54,135,198,.28)!important;
  box-shadow:0 10px 34px rgba(0,0,0,.28)!important;
}
.v9-topbar-inner{
  height:64px!important;
  max-width:1520px!important;
  grid-template-columns:236px minmax(590px,1fr) auto!important;
  gap:18px!important;
  padding:0 2px!important;
}
.v9-brand{gap:12px!important;min-width:220px!important}
.v9-brand-logo{
  width:62px!important;
  height:50px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 0 12px rgba(28,156,255,.42))!important;
}
.v9-brand-copy{transform:none!important;line-height:.98!important}
.v9-brand-copy b{
  font-size:21px!important;
  font-weight:900!important;
  letter-spacing:.15px!important;
  color:#fff!important;
  text-shadow:0 2px 12px rgba(0,0,0,.35)!important;
}
.v9-brand-copy small{
  margin-top:6px!important;
  font-size:8.5px!important;
  font-weight:700!important;
  letter-spacing:3.7px!important;
  color:#829bb0!important;
}
.v9-nav{
  height:50px!important;
  border-radius:10px!important;
  padding:0 8px!important;
  border-color:rgba(78,145,196,.28)!important;
  background:linear-gradient(180deg,rgba(7,25,40,.91),rgba(3,15,25,.85))!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.015),0 8px 24px rgba(0,0,0,.12)!important;
}
.v9-nav-link{padding:0 16px!important;font-size:13px!important;font-weight:700!important;gap:8px!important}
.v9-nav-link svg{width:16px!important;height:16px!important;filter:drop-shadow(0 0 7px rgba(38,154,255,.18))}
.v9-nav-link.is-active:after{height:3px!important;left:11px!important;right:11px!important;bottom:-1px!important}
.v9-actions{gap:9px!important}
.v9-search{width:195px!important;height:40px!important;border-radius:8px!important;background:#03101b!important}
.v9-search input{font-size:12px!important;height:38px!important}
.v9-lang{height:40px!important;border-radius:8px!important}
.v9-discord,.v9-login{height:40px!important;border-radius:8px!important;font-size:12px!important;padding:0 14px!important}

/* ---------- HERO: full-width wallpaper + bigger center artwork ---------- */
.v9-home{overflow:hidden}
.v9-hero{
  height:360px!important;
  width:100%!important;
  overflow:hidden!important;
  background:#04121f!important;
  isolation:isolate;
}
.v9-hero-scene{
  inset:-8px -18px!important;
  background:
    linear-gradient(90deg,rgba(1,10,18,.20) 0%,rgba(1,10,18,.08) 36%,rgba(1,10,18,.03) 69%,rgba(1,10,18,.22) 100%),
    url('/assets/img/velocity-home-bg.webp') center 48%/cover no-repeat!important;
  filter:saturate(1.18) brightness(.66) contrast(1.08)!important;
  transform:scale(1.035)!important;
  z-index:0!important;
}
.v9-hero-scene:after{
  background:
    radial-gradient(circle at 56% 38%,rgba(11,125,230,.27),transparent 28%),
    linear-gradient(90deg,rgba(2,13,23,.72) 0%,rgba(2,13,23,.34) 29%,rgba(1,10,18,.02) 49%,rgba(1,10,18,.03) 76%,rgba(1,10,18,.28) 100%)!important;
}
.v9-hero:before{
  background:
    linear-gradient(90deg,rgba(2,11,19,.18) 0%,rgba(2,11,19,.02) 58%,rgba(2,11,19,.14) 100%),
    linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.17))!important;
  z-index:1!important;
}
.v9-hero-characters{
  height:360px!important;
  width:970px!important;
  max-width:none!important;
  left:50%!important;
  top:0!important;
  transform:translateX(-155px)!important;
  object-fit:cover!important;
  object-position:center 46%!important;
  z-index:2!important;
  opacity:1!important;
  filter:saturate(1.12) contrast(1.07) brightness(1.02) drop-shadow(0 18px 34px rgba(0,0,0,.34))!important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 7%,#000 16%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 7%,#000 16%,#000 100%);
}
.v9-hero-inner{width:min(1520px,calc(100% - 48px))!important;max-width:none!important}
.v9-hero-copy{left:8px!important;top:27px!important;width:510px!important;z-index:6!important}
.v9-kicker{font-size:10.5px!important;letter-spacing:4.4px!important;margin-bottom:9px!important;color:#37c3ff!important}
.v9-hero-copy h1{
  font-family:Inter,"Arial Black",Impact,"Segoe UI",sans-serif!important;
  font-style:normal!important;
  line-height:.88!important;
  letter-spacing:-2.4px!important;
  font-weight:950!important;
  filter:drop-shadow(0 5px 10px rgba(0,0,0,.30));
}
.v9-hero-copy h1 span,.v9-hero-copy h1 strong{font-size:58px!important}
.v9-hero-copy h1 span{color:#f4f7fb!important;text-shadow:0 3px 0 rgba(255,255,255,.04),0 8px 20px rgba(0,0,0,.38)!important}
.v9-hero-copy h1 strong{color:#139cff!important;text-shadow:0 0 27px rgba(18,146,255,.25),0 8px 20px rgba(0,0,0,.30)!important}
.v9-hero-copy h2{font-size:23px!important;margin:10px 0 8px!important;letter-spacing:.35px!important;font-weight:950!important}
.v9-hero-copy p{width:465px!important;font-size:12.6px!important;line-height:1.52!important;color:#b4c6d5!important}
.v9-hero-buttons{margin-top:15px!important;gap:12px!important}
.v9-btn{height:50px!important;min-width:164px!important;border-radius:8px!important;box-shadow:0 12px 28px rgba(0,0,0,.18)!important}
.v9-btn b{font-size:12.5px!important}.v9-btn small{font-size:7.6px!important}
.v9-btn svg{width:19px!important;height:19px!important}

/* live status is pinned to the far-right edge of the main canvas */
.v9-live-panel{
  right:0!important;
  top:37px!important;
  width:205px!important;
  height:238px!important;
  padding:18px 18px 15px!important;
  z-index:8!important;
  border-radius:9px!important;
  background:linear-gradient(180deg,rgba(3,15,25,.96),rgba(3,16,27,.91))!important;
  border:1px solid rgba(74,157,218,.50)!important;
  box-shadow:0 22px 52px rgba(0,0,0,.42),inset 0 0 34px rgba(13,99,167,.08)!important;
  backdrop-filter:blur(10px)!important;
}
.v9-live-head{font-size:11px!important;margin-bottom:13px!important}.v9-live-head em{font-size:10px!important}
.v9-live-row{height:31px!important;font-size:11px!important}.v9-live-row strong{font-size:11.5px!important}
.v9-live-panel blockquote{font-size:12.3px!important;line-height:1.5!important;color:#d1dde7!important}

/* ---------- STATS / GENERAL UI: larger, cleaner icon treatment ---------- */
.v9-stat-strip{height:72px!important}
.v9-stat-grid{height:72px!important;border-radius:9px!important;box-shadow:0 16px 38px rgba(0,0,0,.25)!important}
.v9-stat{grid-template-columns:58px 1fr 28px!important;padding:0 19px!important}
.v9-stat i{
  width:44px!important;height:44px!important;border-radius:10px!important;
  background:linear-gradient(145deg,rgba(12,67,111,.88),rgba(5,33,57,.92))!important;
  border:1px solid rgba(44,146,221,.36)!important;
  color:#22a8ff!important;
  box-shadow:inset 0 0 18px rgba(32,151,245,.08),0 0 16px rgba(14,119,207,.08)!important;
}
.v9-stat i svg{width:24px!important;height:24px!important;filter:drop-shadow(0 0 7px rgba(31,165,255,.25))}
.v9-stat strong{font-size:20px!important}.v9-stat span{font-size:9px!important;margin-top:7px!important}.v9-stat em{font-size:10.5px!important}
.v9-section{width:min(1520px,calc(100% - 48px))!important}
.v9-section-head{height:50px!important}.v9-section-head h3{font-size:18px!important;gap:11px!important}.v9-section-head h3 i{height:27px!important;width:6px!important}.v9-section-head p{font-size:11px!important;margin-left:36px!important}.v9-section-head>a,.v9-section-head>span{font-size:10.8px!important}

/* ---------- SERVERS: large cards with visible map artwork ---------- */
.v9-servers{padding-top:15px!important}
.v9-server-grid{gap:26px!important}
.v9-server-card{
  height:150px!important;
  border-radius:9px!important;
  background:#061725!important;
  border:1px solid rgba(76,156,218,.48)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.20),inset 0 0 0 1px rgba(255,255,255,.012)!important;
  isolation:isolate;
}
.v9-server-card:before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:42%;
  background-position:center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  z-index:0;
  filter:saturate(1.12) contrast(1.05) brightness(.92);
}
.v9-server-mirage{background-image:none!important}
.v9-server-deathrun{background-image:none!important}
.v9-server-mirage:before{background-image:url('/assets/img/velocity-map-mirage.png')!important}
.v9-server-deathrun:before{background-image:url('/assets/img/velocity-map-deathrun.png')!important}
.v9-server-overlay{
  z-index:1!important;
  background:linear-gradient(90deg,rgba(3,13,22,.07) 0%,rgba(3,13,22,.18) 25%,rgba(3,14,24,.84) 44%,rgba(3,14,24,.93) 100%)!important;
}
.v9-server-content{z-index:2!important;padding:18px 18px 14px 30%!important}
.v9-server-title b{font-size:17px!important;letter-spacing:.1px!important}.v9-server-title span{font-size:9.5px!important}
.v9-server-ip{font-size:10.8px!important;margin-top:8px!important;color:#b3c5d5!important}.v9-server-ip svg{color:#70c8ff!important}
.v9-server-meta{right:18px!important;top:48px!important}.v9-server-meta span{font-size:9.8px!important}
.v9-server-bottom{left:30%!important;right:18px!important;bottom:13px!important}
.v9-server-tags{gap:8px!important}.v9-server-tags span{height:27px!important;padding:0 10px!important;font-size:9.6px!important;border-radius:6px!important;background:rgba(2,12,20,.75)!important}
.v9-server-tags svg{color:#9edbff!important}
.v9-play{height:42px!important;min-width:150px!important;border-radius:6px!important;font-size:10.7px!important;box-shadow:0 0 23px rgba(15,139,246,.28)!important}

/* ---------- WHY VELOCITY ---------- */
.v9-why{padding-top:10px!important}.v9-why .v9-section-head{height:52px!important}
.v9-why-grid{gap:15px!important}
.v9-why-grid article{height:78px!important;border-radius:9px!important;padding:11px 15px!important;gap:14px!important;background:linear-gradient(180deg,rgba(7,26,43,.92),rgba(4,17,29,.94))!important;box-shadow:inset 0 0 20px rgba(23,97,154,.035)!important}
.v9-why-grid article>i{
  width:52px!important;height:52px!important;border-radius:14px!important;
  background:linear-gradient(145deg,rgba(12,65,109,.94),rgba(4,31,54,.96))!important;
  border:1px solid rgba(43,135,204,.28)!important;color:#22a6ff!important;
  box-shadow:inset 0 0 16px rgba(29,150,241,.08),0 0 18px rgba(14,109,190,.06)!important;
}
.v9-why-grid article>i svg{width:27px!important;height:27px!important;filter:drop-shadow(0 0 7px rgba(32,165,255,.24))}
.v9-why-grid b{font-size:12px!important}.v9-why-grid p{font-size:9.7px!important;line-height:1.4!important;color:#8ea4b7!important}

/* footer gets a touch more breathing room so the larger UI stays balanced */
.v9-community-banner{margin-top:15px!important}
.v9-footer{min-height:82px!important}.v9-footer-inner{min-height:82px!important}

@media (max-width:1450px){
  .v9-topbar-inner{max-width:calc(100% - 28px)!important;grid-template-columns:210px minmax(520px,1fr) auto!important}
  .v9-nav-link{padding:0 11px!important;font-size:12px!important}
  .v9-search{width:160px!important}
  .v9-hero-inner{width:calc(100% - 34px)!important}
  .v9-hero-copy{left:4px!important;width:470px!important}
  .v9-hero-copy h1 span,.v9-hero-copy h1 strong{font-size:52px!important}
  .v9-hero-copy p{width:430px!important}
  .v9-hero-characters{width:900px!important;transform:translateX(-150px)!important}
  .v9-live-panel{right:2px!important}
}
@media (max-width:1180px){
  .v9-topbar-inner{grid-template-columns:190px 1fr auto!important}
  .v9-hero{height:390px!important}
  .v9-hero-characters{width:800px!important;height:360px!important;left:51%!important;transform:translateX(-125px)!important;opacity:.90!important}
  .v9-live-panel{right:10px!important;top:42px!important;width:190px!important}
  .v9-hero-copy h1 span,.v9-hero-copy h1 strong{font-size:48px!important}
  .v9-server-content{padding-left:27%!important}.v9-server-bottom{left:27%!important}.v9-server-card:before{width:38%!important}
}
@media (max-width:860px){
  .v9-hero{min-height:650px!important;height:auto!important}
  .v9-hero-characters{top:305px!important;width:760px!important;height:345px!important;left:50%!important;transform:translateX(-50%)!important;opacity:.78!important}
  .v9-live-panel{right:14px!important;bottom:14px!important;top:auto!important;width:205px!important}
  .v9-server-card{height:165px!important}
  .v9-server-card:before{width:48%!important}
  .v9-server-content{padding-left:32%!important}.v9-server-bottom{left:32%!important}
}
@media (max-width:520px){
  .v9-brand-logo{width:48px!important;height:42px!important}.v9-brand-copy b{font-size:17px!important}
  .v9-live-panel{right:50%!important;transform:translateX(50%)!important;width:calc(100% - 28px)!important}
  .v9-server-card{height:190px!important}.v9-server-card:before{width:100%!important;opacity:.55}.v9-server-overlay{background:linear-gradient(90deg,rgba(3,14,24,.78),rgba(3,14,24,.72))!important}.v9-server-content{padding:18px!important}.v9-server-bottom{left:18px!important}
}

/* VC_V16_HIDE_LIVE_PANEL */
.v9-live-panel,
.v10-live-panel,
.v11-live-panel,
.v12-live-panel,
.v13-live-panel,
.v14-live-panel,
.v15-live-panel {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* VC_SERVER_MODAL_V18_START */
.v9-server-card{
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,filter .18s ease!important
}
.v9-server-card:hover{
  transform:translateY(-3px);
  border-color:rgba(76,182,255,.76)!important;
  box-shadow:0 18px 44px rgba(0,0,0,.28),0 0 28px rgba(22,139,245,.12)!important;
  filter:saturate(1.06)
}
.v9-server-card:focus-visible{
  outline:2px solid #39b7ff;
  outline-offset:4px
}
.v9-server-card:after{
  content:"KLIKNI ZA DETALJE";
  position:absolute;
  top:12px;
  left:16px;
  z-index:5;
  padding:5px 8px;
  border-radius:6px;
  border:1px solid rgba(91,174,231,.28);
  background:rgba(4,15,25,.72);
  color:#b9d9ee;
  font-size:8px;
  font-weight:900;
  letter-spacing:.9px;
  opacity:0;
  transform:translateY(-3px);
  transition:.18s ease;
  pointer-events:none
}
.v9-server-card:hover:after{opacity:1;transform:none}
.vc-srv18-backdrop{
  position:fixed;
  inset:0;
  z-index:99990;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,6,13,.78);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;
  visibility:hidden;
  transition:opacity .18s ease,visibility .18s ease
}
.vc-srv18-backdrop.is-open{opacity:1;visibility:visible}
.vc-srv18-modal{
  position:relative;
  width:min(760px,100%);
  max-height:min(760px,calc(100vh - 40px));
  overflow:hidden;
  border:1px solid rgba(79,165,227,.38);
  border-radius:18px;
  background:radial-gradient(circle at 82% 0,rgba(21,126,229,.18),transparent 36%),linear-gradient(155deg,#081d2c 0%,#06131f 57%,#071724 100%);
  box-shadow:0 35px 95px rgba(0,0,0,.62),0 0 40px rgba(23,132,230,.10);
  transform:translateY(10px) scale(.985);
  transition:transform .18s ease
}
.vc-srv18-backdrop.is-open .vc-srv18-modal{transform:none}
.vc-srv18-head{position:relative;padding:24px 64px 20px 24px;border-bottom:1px solid rgba(83,135,174,.18)}
.vc-srv18-kicker{display:flex;align-items:center;gap:8px;color:#3db7ff;font-size:10px;font-weight:950;letter-spacing:1.9px}
.vc-srv18-kicker i{width:7px;height:7px;border-radius:50%;background:#25e59f;box-shadow:0 0 11px rgba(37,229,159,.5)}
.vc-srv18-head h3{margin:7px 0 3px;color:#f4f9fd;font-size:27px;line-height:1.05;letter-spacing:.2px}
.vc-srv18-ip{color:#879fb3;font-size:12px}
.vc-srv18-close{position:absolute;right:18px;top:18px;width:36px;height:36px;border-radius:9px;border:1px solid rgba(91,150,193,.24);background:rgba(7,23,35,.75);color:#c9dcea;font-size:21px;cursor:pointer}
.vc-srv18-meta{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid rgba(83,135,174,.18)}
.vc-srv18-meta>div{padding:15px 20px;border-right:1px solid rgba(83,135,174,.14)}
.vc-srv18-meta>div:last-child{border-right:0}
.vc-srv18-meta small{display:block;color:#617b90;font-size:9px;font-weight:900;letter-spacing:1.3px}
.vc-srv18-meta strong{display:block;margin-top:4px;color:#dcebf5;font-size:16px;font-weight:850}
.vc-srv18-list-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 10px}
.vc-srv18-list-head b{font-size:13px;color:#f0f7fb}.vc-srv18-list-head span{font-size:10px;color:#6f8799}
.vc-srv18-players{padding:0 14px 16px;max-height:405px;overflow:auto}
.vc-srv18-row{display:grid;grid-template-columns:38px minmax(0,1fr) 95px 110px;align-items:center;min-height:54px;padding:7px 10px;margin:6px 0;border:1px solid rgba(79,132,170,.15);border-radius:10px;background:rgba(8,28,42,.54)}
.vc-srv18-row:hover{border-color:rgba(69,159,224,.30);background:rgba(10,36,54,.72)}
.vc-srv18-num{width:27px;height:27px;display:grid;place-items:center;border-radius:7px;color:#62c6ff;background:rgba(18,127,209,.12);border:1px solid rgba(52,157,229,.20);font-size:10px;font-weight:900}
.vc-srv18-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e3eef5;font-size:13px;font-weight:750}
.vc-srv18-score,.vc-srv18-time{color:#8ea6b8;font-size:10px;text-align:right;white-space:nowrap}
.vc-srv18-empty{margin:8px;padding:34px 18px;text-align:center;border:1px dashed rgba(91,146,185,.22);border-radius:12px;color:#7890a2;font-size:12px}
.vc-srv18-loading{padding:42px 20px;text-align:center;color:#87a3b7;font-size:12px}
.vc-srv18-loading:before{content:"";display:block;width:27px;height:27px;margin:0 auto 12px;border:2px solid rgba(71,159,222,.18);border-top-color:#31aef7;border-radius:50%;animation:vcSrv18Spin .75s linear infinite}
@keyframes vcSrv18Spin{to{transform:rotate(360deg)}}
.vc-srv18-actions{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px 18px;border-top:1px solid rgba(83,135,174,.15)}
.vc-srv18-actions a,.vc-srv18-actions button{height:38px;padding:0 15px;border-radius:8px;border:1px solid rgba(74,157,216,.28);background:#0a2233;color:#cce4f4;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;cursor:pointer;text-decoration:none}
.vc-srv18-actions .is-primary{background:linear-gradient(180deg,#1ca5fb,#077fdc);border-color:#3cb7ff;color:#fff}
@media(max-width:650px){
  .vc-srv18-backdrop{padding:10px}
  .vc-srv18-modal{max-height:calc(100vh - 20px)}
  .vc-srv18-head h3{font-size:23px}
  .vc-srv18-meta>div{padding:12px 10px}
  .vc-srv18-row{grid-template-columns:34px minmax(0,1fr) 90px}
  .vc-srv18-score{display:none}
  .v9-server-card:after{display:none}
}
/* VC_SERVER_MODAL_V18_END */

/* VC_SINGLE_SERVER_DETAILS_FIX */
.v9-server-card::after{
    content:none!important;
    display:none!important;
}