/* === FONTS === */
@font-face{font-family:'high_speedregular';src:url('../assets/fonts/cs-font/high_speed-webfont.woff2') format('woff2'),url('../assets/fonts/cs-font/high_speed-webfont.woff') format('woff');font-weight:normal;font-style:normal;font-display:swap}

/* === TOKENS — exact hvh.gg palette === */
:root{
  --bg:#181825;
  --bg-sidebar:#161622;
  --bg-card:#1e1e30;
  --bg-row:#1c1c2e;
  --bg-row-h:#222238;
  --bg-input:#1a1a2c;
  --border:rgba(255,255,255,.055);
  --border-h:rgba(255,255,255,.1);
  --fg:#e2e2ea;
  --fg2:#7c7c96;
  --fg3:#4e4e64;
  --red:#e8443a;
  --red-bg:rgba(232,68,58,.1);
  --green:#3fba55;
  --green-bg:rgba(63,186,85,.1);
  --green-btn:#3fba55;
  --orange:#d4863a;
  --orange-bg:rgba(212,134,58,.1);
  --blue:#4a90d9;
  --blue-bg:rgba(74,144,217,.1);
  --gold:#fbbf24;
  --silver:#94a3b8;
  --bronze:#d97706;
  --sidebar-w:190px;
  --font:'Inter',system-ui,-apple-system,sans-serif;
  color-scheme:dark;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--fg);font-size:14px;line-height:1.5;display:flex;min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer}
input{font-family:inherit}

/* === SIDEBAR === */
.sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-w);background:var(--bg-sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:50;overflow-y:auto}
.sb-logo-area{padding:20px 16px 14px}
.sb-logo{display:block;margin-bottom:16px}
.sb-logo-svg{display:block}
.sb-online{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;margin-bottom:8px}
.sb-online-num{color:var(--fg)}
.sb-online-txt{color:var(--fg3);font-weight:400;font-size:12px}
.dot-live{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 6px var(--red);flex-shrink:0;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.sb-peaks{display:flex;justify-content:space-between;font-size:10px;color:var(--fg3);letter-spacing:.06em;text-transform:uppercase;padding-bottom:14px;border-bottom:1px solid var(--border)}
.sb-peaks b{color:var(--fg2);font-weight:600}

.sb-nav{flex:1;padding:8px 6px;display:flex;flex-direction:column;gap:1px}
.sb-item{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:7px;font-size:12px;color:var(--fg2);transition:background .12s,color .12s;font-weight:500}
.sb-item i,.sb-item svg{flex-shrink:0;opacity:.5;width:16px;text-align:center;font-size:14px}
.sb-item:hover{background:var(--bg-card);color:var(--fg)}
.sb-item.active{background:var(--bg-card);color:var(--fg);font-weight:600}
.sb-item.active svg,.sb-item.active i{opacity:.9}

.sb-foot{padding:12px 16px;border-top:1px solid var(--border)}
.sb-socials{display:flex;gap:12px;margin-bottom:8px}
.sb-socials a{color:var(--fg3);font-size:14px;transition:color .15s}
.sb-socials a:hover{color:var(--fg)}
.sb-copy{font-size:10px;color:var(--fg3)}

/* === MOBILE === */
.m-head{display:none;position:fixed;top:0;left:0;right:0;height:52px;background:var(--bg-sidebar);border-bottom:1px solid var(--border);z-index:60;padding:0 14px;align-items:center;justify-content:space-between}
.m-burger{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:4px}
.m-burger span{width:20px;height:2px;background:var(--fg);border-radius:1px;transition:transform .3s,opacity .3s}

/* === MAIN === */
.main{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-width:0}

/* === TOPBAR === */
.topbar{display:flex;align-items:center;gap:12px;padding:10px 18px;border-bottom:1px solid var(--border);background:var(--bg)}
.tb-search{display:flex;align-items:center;gap:8px;background:var(--bg-input);border:1px solid var(--border);border-radius:8px;padding:8px 12px;flex:1}
.tb-search svg{flex-shrink:0}
.tb-input{background:none;border:none;outline:none;color:var(--fg);font-size:12px;width:100%}
.tb-input::placeholder{color:var(--fg3)}
.tb-steam{display:flex;align-items:center;gap:7px;background:var(--green-btn);color:#fff;font-weight:700;font-size:12px;padding:8px 18px;border-radius:8px;white-space:nowrap;transition:opacity .15s}
.tb-steam:hover{opacity:.88}

/* === CONTENT === */
.content{display:flex;flex:1;min-height:0}
.center{flex:1;min-width:0;padding:14px 18px}
.rpanel{width:300px;flex-shrink:0;border-left:1px solid var(--border);padding:14px;display:flex;flex-direction:column}

/* === GAME TABS === */
.game-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:12px}
.gtab{display:flex;align-items:center;gap:6px;padding:9px 18px;font-size:13px;font-weight:600;color:var(--fg2);border-bottom:2px solid transparent;transition:color .15s}
.gtab:hover{color:var(--fg)}
.gtab.active{color:var(--fg);border-bottom-color:var(--fg)}
.gtab svg{opacity:.6}

/* === SERVER FILTERS === */
.srv-filters{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.sf-search{display:flex;align-items:center;gap:6px;background:var(--bg-input);border:1px solid var(--border);border-radius:7px;padding:6px 10px;flex:1;min-width:180px}
.sf-input{background:none;border:none;outline:none;color:var(--fg);font-size:12px;width:100%}
.sf-input::placeholder{color:var(--fg3)}
.sf-slash{color:var(--fg3);font-size:10px;border:1px solid var(--border);border-radius:3px;padding:0 4px;font-weight:500}
.sf-dropdowns{display:flex;gap:5px;flex-shrink:0}
.sf-drop{display:flex;align-items:center;gap:4px;background:none;border:1px solid var(--border);border-radius:7px;padding:6px 10px;font-size:11px;color:var(--fg2);transition:border-color .15s,color .15s;white-space:nowrap}
.sf-drop:hover{border-color:var(--border-h);color:var(--fg)}
.sf-drop svg:last-child{opacity:.4}

/* === MODE TAGS === */
.mode-tags{display:flex;gap:6px;margin-bottom:6px;flex-wrap:wrap}
.mtag{display:inline-flex;align-items:center;gap:5px;padding:5px 14px;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;transition:opacity .12s}
.mtag:hover{opacity:.85}
.mtag b{font-weight:800;margin-left:4px;font-size:13px}
.mtag-green{background:var(--green-bg);color:var(--green)}
.mtag-red{background:var(--red-bg);color:var(--red)}
.mtag-orange{background:var(--orange-bg);color:var(--orange)}

.sub-tags{margin-bottom:8px;gap:5px}
.stag-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:5px;font-size:11px;font-weight:500;border:1px solid var(--border);cursor:pointer;transition:opacity .12s}
.stag-pill:hover{opacity:.8}
.stag-pill.stag-red{color:var(--red);border-color:rgba(232,68,58,.15)}
.stag-pill.stag-blue{color:var(--blue);border-color:rgba(74,144,217,.15)}
.stag-pill.stag-green{color:var(--green);border-color:rgba(63,186,85,.15)}
.stag-pill.stag-purple{color:#a78bfa;border-color:rgba(167,139,250,.15)}

.srv-count{font-size:11px;color:var(--fg3);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border)}

/* === SERVER ROW === */
.srv-row{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--bg-row);border:1px solid var(--border);border-radius:8px;transition:background .12s,border-color .12s}
.srv-row:hover{background:var(--bg-row-h);border-color:var(--border-h)}
.srv-flag{font-size:16px;flex-shrink:0}
.srv-rank{font-size:10px;font-weight:700;color:var(--fg3);min-width:18px;text-align:center}
.srv-ico{flex-shrink:0}
.srv-info{flex:1;min-width:0}
.srv-name{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
.srv-stags{display:flex;gap:4px;flex-wrap:wrap}
.st{padding:1px 7px;border-radius:4px;font-size:10px;font-weight:600}
.st-green{background:var(--green-bg);color:var(--green)}
.st-red{background:var(--red-bg);color:var(--red)}
.st-blue{background:var(--blue-bg);color:var(--blue)}
.st-orange{background:var(--orange-bg);color:var(--orange)}

.srv-map{display:flex;align-items:center;gap:8px;flex-shrink:0}
.srv-map-img{width:34px;height:34px;background:var(--bg);border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden}
.srv-map-name{font-size:12px;font-weight:600}
.srv-map-code{font-size:9px;color:var(--fg3)}

.srv-players{text-align:right;flex-shrink:0;min-width:50px}
.sp-cur{font-size:15px;font-weight:800}
.sp-max{font-size:11px;color:var(--fg3)}
.sp-bar{width:50px;height:3px;background:var(--border);border-radius:2px;margin-top:3px}
.sp-bar-fill{height:100%;background:var(--green-btn);border-radius:2px;transition:width .4s}

.btn-join{display:inline-flex;align-items:center;gap:4px;background:var(--green-btn);color:#fff;font-weight:700;font-size:11px;padding:5px 13px;border-radius:5px;border:none;white-space:nowrap;transition:opacity .15s}
.btn-join:hover{opacity:.85}

.srv-act{background:none;border:none;color:var(--fg3);font-size:14px;padding:3px;transition:color .15s}
.srv-act:hover{color:var(--fg)}

/* === PANELS === */
.panel{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:14px 16px}
.panel-title{font-size:13px;font-weight:700;margin-bottom:12px}

/* === RULES === */
.rules-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rule-col{background:var(--bg-row);border:1px solid var(--border);border-radius:8px;padding:12px}
.rule-col h4{font-size:11px;font-weight:700;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.rule-yes h4{color:var(--green)}
.rule-no h4{color:var(--red)}
.rule-col li{padding:3px 0 3px 12px;position:relative;font-size:11px;color:var(--fg2)}
.rule-col li::before{content:'';position:absolute;left:0;top:10px;width:4px;height:4px;border-radius:50%}
.rule-yes li::before{background:var(--green)}
.rule-no li::before{background:var(--red)}

/* === COMMUNITY STATS === */
.cstats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cs-box{background:var(--bg-row);border:1px solid var(--border);border-radius:8px;padding:12px;text-align:center}
.cs-val{display:block;font-size:18px;font-weight:800;margin-bottom:2px}
.cs-lbl{font-size:9px;color:var(--fg3);text-transform:uppercase;letter-spacing:.05em}

/* === LEADERBOARD TABLE === */
.lb-wrap{overflow-x:auto;border-radius:8px;border:1px solid var(--border)}
.lb-tbl{width:100%;border-collapse:collapse;font-size:11px}
.lb-tbl thead{background:rgba(255,255,255,.02)}
.lb-tbl th{text-align:left;padding:8px 10px;font-size:9px;font-weight:700;color:var(--fg3);text-transform:uppercase;letter-spacing:.06em}
.lb-tbl td{padding:7px 10px;border-top:1px solid var(--border)}
.lb-tbl tr:hover td{background:rgba(255,255,255,.015)}
.lb-tbl .c-rank{font-weight:700;color:var(--fg3);width:28px}
.lb-tbl .c-name{font-weight:600}
.lb-tbl .c-rating{color:var(--green-btn);font-weight:700}
.lb-tbl .c-mono{font-variant-numeric:tabular-nums}
.lb-empty{text-align:center;color:var(--fg3);padding:24px !important}

/* === RIGHT PANEL === */
.rp-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.rp-title{font-size:10px;font-weight:700;letter-spacing:.07em;color:var(--fg2)}
.rp-sort{font-size:9px;color:var(--fg3);letter-spacing:.06em}
.rp-list{flex:1;display:flex;flex-direction:column;gap:1px;overflow-y:auto}
.rp-empty{text-align:center;color:var(--fg3);font-size:11px;padding:36px 0}

.rp-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:7px;transition:background .12s}
.rp-row:hover{background:var(--bg-row-h)}
.rp-avatar{width:36px;height:36px;background:var(--bg-card);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--fg3);overflow:hidden;flex-shrink:0}
.rp-avatar img{width:100%;height:100%;object-fit:cover}
.rp-info{flex:1;min-width:0}
.rp-name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-sub{font-size:9px;color:var(--fg3);display:flex;align-items:center;gap:3px;margin-top:1px}
.rp-sub b{color:var(--fg2)}
.rp-right{text-align:right;flex-shrink:0}
.rp-rating{font-size:14px;font-weight:800}
.rp-kd{font-size:10px;color:var(--green-btn);font-weight:600}
.rp-join-sm{display:inline-flex;align-items:center;gap:3px;background:var(--red);color:#fff;font-size:9px;font-weight:700;padding:2px 8px;border-radius:4px;border:none;margin-top:2px;transition:opacity .12s}
.rp-join-sm:hover{opacity:.85}

.rp-see-more{display:block;text-align:right;font-size:11px;font-weight:600;color:var(--fg3);padding:10px 0;margin-top:6px;transition:color .12s;letter-spacing:.03em}
.rp-see-more:hover{color:var(--fg)}
.rp-bottom{display:flex;align-items:center;gap:6px;padding-top:8px;border-top:1px solid var(--border);margin-top:6px;font-size:11px;color:var(--fg2)}
.rp-bottom b{color:var(--fg);font-weight:700}
.rp-comm-link{margin-left:auto;font-size:10px;color:var(--fg3);transition:color .12s}
.rp-comm-link:hover{color:var(--fg)}

/* === MODE CARDS (rehvh.cc style) === */
.mode-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.mc-card{position:relative;border-radius:10px;overflow:hidden;height:140px;cursor:pointer;border:1px solid var(--border);transition:transform .15s,border-color .2s}
.mc-card:hover{transform:translateY(-2px);border-color:var(--border-h)}
.mc-overlay{position:absolute;inset:0;z-index:1}
.mc-content{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:12px;height:100%}
.mc-title{font-family:'high_speedregular','Inter',sans-serif;font-size:15px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;text-shadow:0 2px 8px rgba(0,0,0,.5);white-space:nowrap}
.mc-meta{font-size:10px;color:var(--fg2);margin-top:2px;display:flex;align-items:center;gap:4px}
.mc-online{font-size:11px;font-weight:600;margin-top:4px;display:flex;align-items:center;gap:5px}
.mc-online .dot-live{width:6px;height:6px}

.mc-spread{background:linear-gradient(135deg,#1a3a2a 0%,#0d2818 50%,#162d1e 100%)}
.mc-spread .mc-overlay{background:linear-gradient(180deg,transparent 30%,rgba(15,40,25,.9) 100%)}
.mc-spread .mc-title{color:var(--green)}
.mc-spread .mc-online{color:var(--green)}

.mc-nospread{background:linear-gradient(135deg,#3a1a1a 0%,#280d0d 50%,#2d1616 100%)}
.mc-nospread .mc-overlay{background:linear-gradient(180deg,transparent 30%,rgba(40,15,15,.9) 100%)}
.mc-nospread .mc-title{color:var(--red)}
.mc-nospread .mc-online{color:var(--red)}

.mc-dm{background:linear-gradient(135deg,#2a2a1a 0%,#28200d 50%,#2d2516 100%)}
.mc-dm .mc-overlay{background:linear-gradient(180deg,transparent 30%,rgba(40,30,15,.9) 100%)}
.mc-dm .mc-title{color:var(--orange)}
.mc-dm .mc-online{color:var(--orange)}

.mc-arena{background:linear-gradient(135deg,#1a1a3a 0%,#0d0d28 50%,#16162d 100%)}
.mc-arena .mc-overlay{background:linear-gradient(180deg,transparent 30%,rgba(15,15,40,.9) 100%)}
.mc-arena .mc-title{color:var(--blue)}
.mc-arena .mc-online{color:var(--blue)}

/* === PODIUM (santahvh.ru style) === */
.podium-panel .panel-title i{color:var(--gold);margin-right:5px}
.podium{display:flex;align-items:flex-end;justify-content:center;gap:8px;padding:10px 0}
.pod-col{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;max-width:140px}
.pod-crown{font-size:20px;animation:float 2s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.pod-avatar{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;color:rgba(255,255,255,.5);border:2px solid}
.pod-gold{border-color:var(--gold);background:rgba(251,191,36,.1)}
.pod-silver{border-color:var(--silver);background:rgba(148,163,184,.1)}
.pod-bronze{border-color:var(--bronze);background:rgba(217,119,6,.1)}
.pod-medal{font-size:16px}
.pod-name{font-size:11px;font-weight:700;color:var(--fg);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pod-score{font-size:10px;color:var(--fg3);font-weight:600}
.pod-bar{width:100%;text-align:center;font-weight:900;font-size:18px;color:rgba(255,255,255,.15);border-radius:6px 6px 0 0}
.bar-1{background:linear-gradient(180deg,rgba(251,191,36,.2) 0%,rgba(251,191,36,.05) 100%);height:70px;line-height:70px}
.bar-2{background:linear-gradient(180deg,rgba(148,163,184,.15) 0%,rgba(148,163,184,.05) 100%);height:50px;line-height:50px}
.bar-3{background:linear-gradient(180deg,rgba(217,119,6,.15) 0%,rgba(217,119,6,.05) 100%);height:36px;line-height:36px}

/* === PROMO BANNER === */
.promo-banner{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#1e1030 0%,#2a1540 50%,#1a1035 100%);border:1px solid rgba(167,139,250,.15);border-radius:10px;padding:18px 22px;gap:16px}
.promo-text{flex:1}
.promo-title{font-family:'high_speedregular','Inter',sans-serif;font-size:18px;font-weight:800;color:#a78bfa;letter-spacing:.03em}
.promo-sub{font-size:12px;color:var(--fg2);margin-top:4px}
.promo-sub b{color:var(--gold)}
.promo-btn{display:inline-flex;align-items:center;gap:6px;background:var(--red);color:#fff;font-weight:700;font-size:12px;padding:8px 18px;border-radius:7px;white-space:nowrap;transition:opacity .15s}
.promo-btn:hover{opacity:.85}

/* === STORE === */
.store-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.store-card{background:var(--bg-row);border:1px solid var(--border);border-radius:8px;padding:16px;text-align:center;transition:border-color .15s,transform .15s}
.store-card:hover{border-color:var(--border-h);transform:translateY(-2px)}
.store-icon{font-size:28px;margin-bottom:8px}
.store-card:nth-child(1) .store-icon{color:var(--gold)}
.store-card:nth-child(2) .store-icon{color:#a78bfa}
.store-card:nth-child(3) .store-icon{color:var(--red)}
.store-name{font-size:14px;font-weight:800;margin-bottom:4px;letter-spacing:.03em}
.store-desc{font-size:10px;color:var(--fg3);margin-bottom:10px;line-height:1.4}
.store-price{font-size:13px;font-weight:700;color:var(--green);background:var(--green-bg);display:inline-block;padding:3px 12px;border-radius:5px}

/* === BANS TABLE === */
.bans-tbl td:first-child{font-size:10px;color:var(--fg3);white-space:nowrap}

/* === PANEL TITLE ICONS === */
.panel-title i{margin-right:5px;opacity:.6}

/* === SCROLLBAR === */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:3px}

/* === RESPONSIVE === */
@media(max-width:1100px){.rpanel{width:260px}}
@media(max-width:900px){
  .sidebar{display:none}.sidebar.open{display:flex}
  .m-head{display:flex}.m-burger{display:flex}
  .main{margin-left:0;padding-top:52px}
  .content{flex-direction:column}
  .rpanel{width:100%;border-left:none;border-top:1px solid var(--border)}
  .sf-dropdowns{display:none}
  .srv-map{display:none}
  .cstats{grid-template-columns:1fr 1fr}
  .mode-cards{grid-template-columns:1fr 1fr}
  .store-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .topbar{flex-direction:column;gap:10px;padding:10px 14px}
  .center{padding:12px}
  .rules-grid{grid-template-columns:1fr}
  .srv-row{flex-wrap:wrap;gap:8px}
  .srv-players{order:10;width:100%;display:flex;align-items:center;gap:10px}
  .sp-bar{flex:1}
  .btn-join{order:11}
  .mode-cards{grid-template-columns:1fr 1fr}.mc-card{height:120px}
  .promo-banner{flex-direction:column;text-align:center}
  .podium{gap:4px}
  .pod-avatar{width:40px;height:40px;font-size:16px}
}