/* === VARIABLES === */
:root{
  --bg:#030311;--bg2:#0a0a2e;--card:rgba(12,12,48,.65);
  --accent:#7b2ff7;--accent2:#9d5cff;--cyan:#00d4ff;--pink:#ff2cf1;
  --txt:#e2e2f8;--dim:#8080b0;--muted:#505080;
  --gold:#ffd700;--silver:#c0c0c0;--bronze:#cd7f32;
  --ok:#00ff88;--err:#ff4466;
  --brd:rgba(123,47,247,.18);
  --glow:0 0 20px rgba(123,47,247,.25),0 0 60px rgba(123,47,247,.08);
  --r:16px;--fh:'Orbitron',sans-serif;--fb:'Inter',sans-serif;
}

/* === RESET === */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--fb);background:var(--bg);color:var(--txt);min-height:100vh;overflow-x:hidden;line-height:1.6}
a{color:var(--cyan);text-decoration:none}
img{max-width:100%;height:auto}
.container{max-width:1100px;margin:0 auto;padding:0 24px}

/* === TOAST === */
.toast{position:fixed;top:28px;left:50%;transform:translateX(-50%) translateY(-140px);background:#0c0c30;border:1px solid var(--brd);border-radius:12px;padding:14px 28px;display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500;z-index:9999;box-shadow:var(--glow);transition:transform .45s cubic-bezier(.22,1,.36,1);white-space:nowrap}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.ok{border-color:var(--ok)}.toast.ok .toast-icon::before{content:'\2714';color:var(--ok)}
.toast.err{border-color:var(--err)}.toast.err .toast-icon::before{content:'\2716';color:var(--err)}

/* === HEADER === */
.hdr{position:fixed;top:0;left:0;right:0;z-index:100;padding:0 24px;transition:background .3s,box-shadow .3s}
.hdr.scrolled{background:rgba(3,3,17,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 1px 30px rgba(0,0,0,.4)}
.hdr-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:60px}
.hdr-logo{display:flex;align-items:center;gap:10px;color:var(--txt);font-family:var(--fh);font-size:14px;font-weight:700;letter-spacing:1px;transition:opacity .3s}
.hdr-logo:hover{opacity:.8}
.hdr-logo img{width:32px;height:32px}
.hdr-nav{display:flex;gap:6px;align-items:center}

/* dropdowns */
.dd{position:relative}
.dd-btn{display:flex;align-items:center;gap:6px;padding:8px 14px;font-family:var(--fb);font-size:13px;font-weight:500;color:var(--dim);background:transparent;border:1px solid transparent;border-radius:8px;cursor:pointer;transition:all .25s}
.dd-btn:hover,.dd-btn.open{color:var(--txt);background:rgba(123,47,247,.08);border-color:var(--brd)}
.dd-btn svg{flex-shrink:0}
.dd-arr{transition:transform .25s}
.dd-btn.open .dd-arr{transform:rotate(180deg)}
.dd-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:180px;background:rgba(10,10,40,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--brd);border-radius:10px;padding:6px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .25s ease;box-shadow:0 8px 32px rgba(0,0,0,.5)}
.dd-menu.open{opacity:1;visibility:visible;transform:translateY(0)}
.dd-menu a{display:block;padding:9px 14px;font-size:13px;color:var(--dim);border-radius:6px;transition:all .2s}
.dd-menu a:hover{color:var(--txt);background:rgba(123,47,247,.12)}

/* === HERO === */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.3;filter:blur(2px) saturate(1.3)}
#particles{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero-overlay{position:absolute;inset:0;z-index:2;background:
  radial-gradient(ellipse at 50% 40%,rgba(123,47,247,.15) 0%,transparent 65%),
  linear-gradient(180deg,rgba(3,3,17,.6) 0%,rgba(3,3,17,.2) 30%,rgba(3,3,17,.2) 70%,var(--bg) 100%)}
.hero-content{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:16px;padding:80px 20px 40px;animation:fadeUp 1s ease-out}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

.hero h1{font-family:var(--fh);font-size:clamp(26px,5vw,54px);font-weight:800;letter-spacing:4px}
.hero-sub{font-size:clamp(13px,2vw,17px);color:var(--dim);max-width:460px}

.btn-hero{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:13px 34px;font-family:var(--fh);font-size:13px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,var(--accent),var(--cyan));border-radius:50px;transition:all .35s;box-shadow:0 4px 20px rgba(123,47,247,.35)}
.btn-hero:hover{transform:translateY(-3px);box-shadow:0 8px 32px rgba(123,47,247,.5),0 0 60px rgba(0,212,255,.12)}
.btn-hero svg{animation:bob 2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* === SERVER STATUS WIDGET === */
.srv{display:flex;align-items:center;justify-content:space-between;gap:18px;background:rgba(8,8,36,.7);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--brd);border-radius:14px;padding:16px 22px;margin-bottom:20px;min-width:min(420px,85vw);transition:border-color .3s}
.srv:hover{border-color:var(--accent2)}
.srv-left{display:flex;align-items:center;gap:14px}
.srv-icon{width:48px;height:48px;border-radius:8px;background:var(--bg);image-rendering:pixelated;flex-shrink:0}
.srv-info{display:flex;flex-direction:column;gap:3px}
.srv-name{font-family:var(--fh);font-size:13px;font-weight:700;letter-spacing:.5px}
.srv-status{display:flex;align-items:center;gap:6px;font-size:12px}
.srv-dot{width:8px;height:8px;border-radius:50%;background:var(--muted);flex-shrink:0;transition:background .3s,box-shadow .3s}
.srv-dot.on{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.srv-dot.off{background:var(--err);box-shadow:0 0 8px var(--err)}
.srv-text{color:var(--dim)}
.srv-bar-wrap{width:100%;height:4px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden;margin-top:1px}
.srv-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--cyan));border-radius:2px;transition:width .8s ease}
.srv-players{font-size:11px;color:var(--muted)}
.srv-play{flex-shrink:0;padding:10px 22px;font-family:var(--fh);font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,var(--ok),#00b85e);border-radius:10px;transition:all .3s;box-shadow:0 2px 12px rgba(0,255,136,.2)}
.srv-play:hover{transform:translateY(-2px);box-shadow:0 4px 20px rgba(0,255,136,.35);color:#fff}

/* === GLITCH === */
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%;font:inherit;letter-spacing:inherit}
.glitch::before{color:var(--cyan);z-index:-1;animation:g1 3s infinite linear alternate-reverse}
.glitch::after{color:var(--pink);z-index:-2;animation:g2 2s infinite linear alternate-reverse}
@keyframes g1{0%,90%,100%{clip-path:inset(0);transform:translate(0)}92%{clip-path:inset(20% 0 40% 0);transform:translate(-3px,1px)}94%{clip-path:inset(60% 0 10% 0);transform:translate(3px,-1px)}96%{clip-path:inset(40% 0 30% 0);transform:translate(-2px,0)}98%{clip-path:inset(10% 0 70% 0);transform:translate(2px,1px)}}
@keyframes g2{0%,88%,100%{clip-path:inset(0);transform:translate(0)}90%{clip-path:inset(50% 0 20% 0);transform:translate(3px,-2px)}93%{clip-path:inset(10% 0 60% 0);transform:translate(-3px,2px)}96%{clip-path:inset(70% 0 5% 0);transform:translate(2px,-1px)}}

/* === SECTIONS === */
.section{position:relative;z-index:1;padding:80px 0}
.sec-title{font-family:var(--fh);font-size:clamp(18px,3vw,30px);font-weight:700;text-align:center;margin-bottom:40px;letter-spacing:2px;background:linear-gradient(135deg,var(--txt),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* === REVEAL === */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s,transform .7s}
.reveal.vis{opacity:1;transform:translateY(0)}

/* === CARD === */
.card{position:relative;background:var(--card);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--brd);border-radius:var(--r);box-shadow:var(--glow);overflow:hidden}
.card-shine{position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(from 0deg,transparent,var(--accent),transparent,var(--cyan),transparent);opacity:.035;animation:spin 12s linear infinite;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* === PURCHASE CARD === */
.purchase-card{max-width:520px;margin:0 auto;padding:40px 36px}
.field{margin-bottom:22px}
.field label{display:block;font-family:var(--fh);font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--dim);margin-bottom:7px}
.input-box{position:relative}
.input-box .ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--muted);pointer-events:none}
.input-box input{width:100%;padding:13px 14px 13px 44px;background:rgba(5,5,24,.8);border:1px solid var(--brd);border-radius:10px;color:var(--txt);font-family:var(--fb);font-size:15px;outline:none;transition:border-color .3s,box-shadow .3s}
.input-box input:focus{border-color:var(--accent);box-shadow:0 0 8px rgba(123,47,247,.35)}
.input-box input::placeholder{color:var(--muted)}

.range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--cyan));outline:none;margin-top:12px;cursor:pointer}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--txt);box-shadow:0 0 10px var(--accent);cursor:pointer;transition:box-shadow .3s}
.range::-webkit-slider-thumb:hover{box-shadow:0 0 18px var(--accent),0 0 40px rgba(123,47,247,.25)}
.range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--txt);box-shadow:0 0 10px var(--accent);cursor:pointer;border:none}
.range-labels{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:4px}

.price-box{background:rgba(5,5,24,.5);border:1px solid var(--brd);border-radius:12px;padding:14px 18px;margin-bottom:26px}
.price-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;font-size:14px;color:var(--dim)}
.price-row .val{font-family:var(--fh);font-size:14px;font-weight:600;color:var(--txt)}
.price-row.total{border-top:1px solid var(--brd);margin-top:8px;padding-top:12px}
.price-row.total .val{font-size:22px;color:var(--cyan);text-shadow:0 0 14px rgba(0,212,255,.4)}

.btn-buy{width:100%;padding:15px;font-family:var(--fh);font-size:15px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,var(--accent),#5516c7);border:none;border-radius:12px;cursor:pointer;position:relative;overflow:hidden;transition:all .35s;box-shadow:0 4px 20px rgba(123,47,247,.3)}
.btn-buy::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);transition:left .5s}
.btn-buy:hover{transform:translateY(-2px);box-shadow:0 6px 30px rgba(123,47,247,.5)}
.btn-buy:hover::before{left:100%}
.btn-buy.loading .btn-t{opacity:0}
.btn-buy.loading .btn-spin{opacity:1}
.btn-spin{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}
.btn-spin::after{content:'';width:22px;height:22px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* === SLIDER === */
.slider-mask{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.slider{display:flex;gap:16px;width:max-content;animation:scroll 20s linear infinite}
.slider:hover{animation-play-state:paused}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

.sl-item{flex-shrink:0;width:220px;background:var(--card);backdrop-filter:blur(16px);border:1px solid var(--brd);border-radius:12px;padding:18px;text-align:center;transition:border-color .3s,box-shadow .3s}
.sl-item:hover{border-color:var(--accent2);box-shadow:0 0 8px rgba(123,47,247,.35)}
.sl-nick{font-family:var(--fh);font-size:13px;font-weight:600;color:var(--cyan);margin-bottom:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-info{font-size:13px;color:var(--dim);line-height:1.5}
.sl-info b{color:var(--txt)}
.sl-time{font-size:11px;color:var(--muted);margin-top:7px}
.empty{text-align:center;color:var(--muted);padding:20px;font-size:15px}

/* === LEADERBOARD === */
.board{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:8px}
.lb{display:flex;align-items:center;gap:14px;background:var(--card);backdrop-filter:blur(16px);border:1px solid var(--brd);border-radius:12px;padding:13px 18px;transition:all .3s}
.lb:hover{border-color:var(--accent2);box-shadow:0 0 8px rgba(123,47,247,.35);transform:translateX(4px)}
.lb-r{font-family:var(--fh);font-size:18px;font-weight:800;width:34px;text-align:center;flex-shrink:0}
.lb:nth-child(1) .lb-r{color:var(--gold);text-shadow:0 0 12px rgba(255,215,0,.5)}
.lb:nth-child(2) .lb-r{color:var(--silver);text-shadow:0 0 12px rgba(192,192,192,.4)}
.lb:nth-child(3) .lb-r{color:var(--bronze);text-shadow:0 0 12px rgba(205,127,50,.4)}
.lb:nth-child(1){border-color:rgba(255,215,0,.2)}
.lb:nth-child(2){border-color:rgba(192,192,192,.15)}
.lb:nth-child(3){border-color:rgba(205,127,50,.15)}
.lb-av{width:36px;height:36px;border-radius:6px;background:var(--bg);overflow:hidden;flex-shrink:0}
.lb-av img{width:100%;height:100%;image-rendering:pixelated}
.lb-n{flex:1;font-family:var(--fh);font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-v{font-family:var(--fh);font-size:13px;font-weight:700;color:var(--cyan);text-shadow:0 0 10px rgba(0,212,255,.3);white-space:nowrap}

/* === FOOTER === */
.footer{position:relative;z-index:1;border-top:1px solid var(--brd);padding:36px 0;text-align:center}
.foot-logo{width:44px;opacity:.45;margin-bottom:10px}
.footer p{font-size:13px;color:var(--muted)}

/* === RESPONSIVE === */
@media(max-width:640px){
  .purchase-card{padding:26px 18px}
  .section{padding:50px 0}
  .srv{flex-direction:column;min-width:0;gap:12px;padding:14px 16px}
  .srv-play{width:100%;text-align:center}
  .lb{padding:11px 12px}.lb-av{display:none}
  .hdr-logo span{display:none}
}