/* CSGOTUNE · neon layer — blue / black.
   Pure CSS overlay: no layout, markup, config or JS is touched.
   To go back to the previous look, delete the <link> to neon.css in index.html (and the neon-fonts/ folder if you like). */

/* ---------- fonts (self-hosted, latin + cyrillic) ---------- */
@font-face{font-family:"Exo 2";font-style:normal;font-weight:600;font-display:swap;src:url(./neon-fonts/exo-2-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Exo 2";font-style:normal;font-weight:700;font-display:swap;src:url(./neon-fonts/exo-2-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Exo 2";font-style:normal;font-weight:800;font-display:swap;src:url(./neon-fonts/exo-2-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Exo 2";font-style:normal;font-weight:600;font-display:swap;src:url(./neon-fonts/exo-2-cyrillic-600-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Exo 2";font-style:normal;font-weight:700;font-display:swap;src:url(./neon-fonts/exo-2-cyrillic-700-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Exo 2";font-style:normal;font-weight:800;font-display:swap;src:url(./neon-fonts/exo-2-cyrillic-800-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

/* ---------- tokens ---------- */
:root{
  --void:#03060d;                 /* page */
  --bg:#03060d;--bg2:#060c1a;
  --panel:#08122a;--panel2:#0c1936;--panel3:#112146;
  --line:#12264a;--line2:#1b3868;
  --edge:rgba(47,155,255,.24);   /* neon hairline */
  --ice:#3fa9ff;--ice2:#8fdcff;--iced:#1f7fe0;--on-ice:#02101f;
  --neon:#3fa9ff;--neon2:#7fe3ff;
  --text:#e8f1ff;--mut:#8aa0c6;--dim:#5a7099;
  --display:"Exo 2",Inter,system-ui,sans-serif;
}
body{
  background-color:var(--void);
  background-image:
    radial-gradient(1100px 420px at 50% -160px,rgba(47,155,255,.16),transparent 70%),
    linear-gradient(rgba(63,169,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(63,169,255,.04) 1px,transparent 1px);
  background-size:auto,46px 46px,46px 46px;
  background-attachment:fixed;
}

/* ---------- display type ---------- */
h1,h2,h3,.logo-t,.stat b,.rtot,.rstat b,.mi,.btn,.tabs button,.chip,.filters button,.side-g,.step span{font-family:var(--display)}
h1,h2,h3{font-weight:700;letter-spacing:.005em}

/* ---------- header + logo ---------- */
.top{background:rgba(3,7,16,.92);border-bottom:1px solid var(--edge);box-shadow:0 10px 36px -18px rgba(47,155,255,.55)}
.logo{gap:10px}
.logo svg{display:none}
.logo:before{content:"";flex:0 0 auto;width:30px;height:30px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 2l12 7v14l-12 7-12-7V9z' fill='%2308122a' stroke='%233fa9ff' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M17.6 7.5L10.5 17h4.6l-1.2 7.5L21.5 14.8h-4.7z' fill='%238fdcff'/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 0 7px rgba(63,169,255,.9))}
.logo-t{font-weight:800;font-size:21px;letter-spacing:.05em;color:#fff;text-shadow:0 0 14px rgba(63,169,255,.55)}
.logo-t b{color:var(--neon2);text-shadow:0 0 14px rgba(127,227,255,.85)}

/* ---------- live ticker ---------- */
.ticker{border-top:1px solid var(--edge);background:rgba(4,9,20,.7)}
.live-label{font-family:var(--display);font-weight:700;color:var(--neon2)}
.live-label i{background:var(--neon2)!important;box-shadow:0 0 10px var(--neon2)}
.tkbtn{background:transparent;border-color:var(--edge)}

/* ---------- left menu ---------- */
.side{background:rgba(3,8,18,.82);border-right:1px solid var(--edge)}
.side-g{color:var(--dim);letter-spacing:.14em}
.mi{font-weight:600;color:#9db3da;border-radius:9px;transition:background .15s,color .15s,box-shadow .15s}
.mi:hover{background:rgba(63,169,255,.09);color:#fff}
.mi.on{background:linear-gradient(90deg,rgba(63,169,255,.24),rgba(63,169,255,.03));color:#fff;box-shadow:inset 3px 0 0 var(--neon),0 0 26px -8px rgba(63,169,255,.8)}
.mi.on svg{color:var(--neon2);filter:drop-shadow(0 0 5px var(--neon2))}
.mi.small{font-family:Inter,system-ui,sans-serif;font-weight:500;color:var(--mut)}

/* ---------- buttons ---------- */
.btn{font-weight:700;letter-spacing:.02em;border-radius:9px;background:rgba(63,169,255,.07);border:1px solid rgba(63,169,255,.38);color:#d4e6ff}
.btn:not(.primary):not(.bad):hover{background:rgba(63,169,255,.16);border-color:var(--neon2);box-shadow:0 0 20px -5px rgba(63,169,255,.8);color:#fff}
.btn.primary,.brow .btn.primary,.brow .b-act .btn.primary{background:var(--neon);color:#02101f;border:1px solid rgba(143,220,255,.7);box-shadow:0 0 22px -3px rgba(63,169,255,.85)}
.btn.primary:not(:disabled):hover,.brow .btn.primary:not(:disabled):hover{background:var(--ice2);border-color:#fff;box-shadow:0 0 30px -2px rgba(127,227,255,.95)}
.btn.primary:disabled{box-shadow:none;background:#0d1a36;border-color:#1b3868;color:#4d6591}
.btn.ghost{background:transparent}
.icon-btn{border-radius:9px;border-color:var(--edge)}
.icon-btn:hover{border-color:var(--neon2);box-shadow:0 0 16px -4px rgba(63,169,255,.8)}
.chip.on,.tabs button.on,.filters button.on{background:rgba(63,169,255,.16);border-color:var(--neon);color:#fff;box-shadow:0 0 16px -5px rgba(63,169,255,.9)}
input:focus,select:focus,textarea:focus{border-color:var(--neon);box-shadow:0 0 0 2px rgba(63,169,255,.2),0 0 18px -4px rgba(63,169,255,.7)}
.ribbon{box-shadow:0 0 16px rgba(63,169,255,.7)}

/* ---------- panels ---------- */
.panel,.step,.rcol,.rbar,.dropdown,.modal-box,.chat-lock{background:linear-gradient(180deg,rgba(11,24,52,.82),rgba(6,13,30,.9));border-color:var(--edge)}
.modal-box{box-shadow:0 0 60px -14px rgba(63,169,255,.55)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;border-radius:18px;border:1px solid rgba(63,169,255,.4);padding:40px 44px;
  background:radial-gradient(620px 320px at 86% 46%,rgba(47,155,255,.30),transparent 70%),linear-gradient(160deg,#0a1634,#04091a 72%);
  box-shadow:0 0 70px -24px rgba(47,155,255,.75),inset 0 1px 0 rgba(143,220,255,.18)}
.hero:before{content:"";position:absolute;left:8%;right:8%;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--neon2),transparent);box-shadow:0 0 16px 1px rgba(127,227,255,.8)}
@media(min-width:1001px){.hero{grid-template-columns:1.55fr .45fr}}
.hero h1{font-weight:800;font-size:clamp(32px,3.7vw,52px);line-height:1.04;color:#fff;text-wrap:balance;text-shadow:0 0 30px rgba(63,169,255,.5)}
.hero p{color:#9fb6de}
.hero .tag.ice,.tag.ice{background:rgba(127,227,255,.08);color:var(--neon2);border:1px solid rgba(127,227,255,.5);box-shadow:0 0 16px -5px rgba(127,227,255,.8)}
.hero-art svg{filter:drop-shadow(0 0 26px rgba(63,169,255,.75)) drop-shadow(0 0 70px rgba(63,169,255,.4));animation:neonPulse 5.5s ease-in-out infinite}
@keyframes neonPulse{0%,100%{filter:drop-shadow(0 0 22px rgba(63,169,255,.6)) drop-shadow(0 0 60px rgba(63,169,255,.3))}50%{filter:drop-shadow(0 0 34px rgba(63,169,255,.95)) drop-shadow(0 0 90px rgba(63,169,255,.5))}}

/* ---------- stats: one strip, not four cards ---------- */
.stats{gap:0;margin-top:14px;border:1px solid var(--edge);border-radius:14px;overflow:hidden;background:rgba(5,12,28,.82)}
.stat{background:transparent;border:0;border-right:1px solid var(--edge);border-radius:0;padding:16px 22px}
.stat:last-child{border-right:0}
.stat b{font-size:28px;font-weight:800;color:#fff;text-shadow:0 0 16px rgba(63,169,255,.5)}
.stat b.good{color:var(--neon2);text-shadow:0 0 16px rgba(127,227,255,.7)}
.stat span{color:var(--mut)}

/* ---------- section titles ---------- */
.sec h2{font-size:23px;font-weight:700;color:#fff}
.sec a{color:var(--neon2)}

/* ---------- game modes ---------- */
.mode{--mc:#3fa9ff;position:relative;overflow:hidden;padding:24px;border-radius:14px;border:1px solid var(--edge);background:linear-gradient(180deg,rgba(13,28,60,.8),rgba(5,11,26,.92));transition:border-color .2s,box-shadow .2s}
.mode:nth-child(2){--mc:#19e3ff}
.mode:nth-child(3){--mc:#9a78ff}
.mode:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--mc);box-shadow:0 0 16px 1px var(--mc)}
.mode svg{width:30px;height:30px;color:var(--mc);filter:drop-shadow(0 0 8px var(--mc))}
.mode h3{font-size:21px;font-weight:700;color:#fff}
.mode:hover{border-color:var(--mc);box-shadow:0 0 34px -12px var(--mc);transform:none}

/* ---------- how it works ---------- */
.step span{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--neon);color:var(--neon2);font-weight:800;box-shadow:0 0 14px -2px rgba(63,169,255,.8),inset 0 0 10px rgba(63,169,255,.25)}

/* ---------- battles + cases ---------- */
.brow,.ccard,.stat,.fairbox{border-color:var(--edge)}
.brow{background:linear-gradient(90deg,rgba(11,24,52,.85),rgba(6,13,30,.9))}
.brow.wait{border-left-color:var(--neon);box-shadow:inset 3px 0 18px -10px var(--neon)}
.brow.start{box-shadow:inset 3px 0 18px -10px var(--good)}
.ccard{background:linear-gradient(180deg,rgba(12,26,56,.85),rgba(5,11,26,.92));transition:border-color .2s,box-shadow .2s}
.ccard:hover{border-color:var(--neon);box-shadow:0 0 28px -10px rgba(63,169,255,.9)}
.reel{border-color:var(--edge);box-shadow:inset 0 0 60px rgba(0,0,0,.7),0 0 40px -22px rgba(63,169,255,.7)}
.rtot{font-weight:800;text-shadow:0 0 14px rgba(79,214,143,.5)}
.rcol.win{box-shadow:0 0 0 1px var(--gold),0 0 30px -8px var(--gold)}

/* ---------- fairness code box ---------- */
.fcode{border:1px solid var(--edge);background:rgba(2,6,16,.8)}

/* ---------- chat ---------- */
.chat{background:rgba(3,8,18,.88);border-left:1px solid var(--edge)}
.chat-head,.chat-form{border-color:var(--edge)}

/* ---------- footer ---------- */
.foot{background:rgba(2,5,12,.92);border-top:1px solid var(--edge)}

/* ---------- scrollbars ---------- */
*{scrollbar-color:rgba(63,169,255,.4) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:rgba(63,169,255,.35);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:rgba(63,169,255,.6)}

/* ---------- small screens ---------- */
@media(max-width:820px){
  .hero{padding:24px 20px}
  .stat{padding:13px 16px}
  .stat:nth-child(2n){border-right:0}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--edge)}
}

/* ---------- motion: respect the user's setting ---------- */
@media(prefers-reduced-motion:reduce){.hero-art svg{animation:none}}