@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap');

:root{
  --bg:#02020c;--s1:#07070f;--s2:#0c0c18;--s3:#121220;--s4:#181828;
  --b1:rgba(0,255,135,.07);--b2:rgba(0,255,135,.14);--b3:rgba(0,255,135,.25);
  --g:#00ff87;--g2:#00c9ff;--r:#ff2d55;--y:#ffd60a;--p:#a78bfa;--o:#ff9f0a;
  --t:#eeeefa;--m:rgba(238,238,250,.48);--m2:rgba(238,238,250,.22);--m3:rgba(238,238,250,.09);
  --fd:'Orbitron',monospace;--fb:'Rajdhani',sans-serif;--fm:'Share Tech Mono',monospace;
  --rr:10px;--r2:14px;--r3:20px;
  --gs:0 0 18px rgba(0,255,135,.22);
  --gs2:0 0 36px rgba(0,255,135,.12);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;}

body{
  background:var(--bg);color:var(--t);font-family:var(--fb);
  min-height:100vh;overflow-x:hidden;
  background-image:
    radial-gradient(ellipse 80% 60% at 15% 40%,rgba(0,255,135,.025) 0%,transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 20%,rgba(0,201,255,.02) 0%,transparent 60%);
}

/* GRID OVERLAY */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(0,255,135,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,255,135,.025) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse at center,rgba(0,0,0,.6) 0%,transparent 80%);
}

/* SCANLINES */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.025) 2px,rgba(0,0,0,.025) 4px);
}

/* =========================================
   NAV
========================================= */
nav{
  position:fixed;top:0;left:0;right:0;z-index:500;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;height:58px;
  background:rgba(2,2,12,.93);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid rgba(0,255,135,.1);
}
nav::after{
  content:'';position:absolute;bottom:0;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,255,135,.35),transparent);
}

.logo-w{display:flex;align-items:center;gap:9px;cursor:pointer;flex-shrink:0;}
.logo-svg{width:30px;height:30px;filter:drop-shadow(0 0 7px rgba(0,255,135,.45));}
.logo-t{display:flex;flex-direction:column;line-height:1.1;}
.logo-r{font-family:var(--fd);font-size:12px;font-weight:900;color:var(--g);letter-spacing:2px;text-shadow:0 0 12px rgba(0,255,135,.5);}
.logo-l{font-family:var(--fd);font-size:8px;color:var(--m2);letter-spacing:4px;}

.nav-right{display:flex;align-items:center;gap:5px;min-width:0;}
.nav-links{display:flex;align-items:center;gap:0px;}
.nl{
  background:none;border:none;color:var(--m);
  font-family:var(--fd);font-size:10px;font-weight:700;
  padding:6px 10px;border-radius:var(--rr);cursor:pointer;
  transition:all .2s;white-space:nowrap;letter-spacing:.5px;
}
.nl:hover,.nl.on{color:var(--g);text-shadow:var(--gs);}

.nb{
  background:none;border:1px solid rgba(0,255,135,.18);color:var(--m);
  font-family:var(--fd);font-size:10px;font-weight:700;
  padding:6px 12px;border-radius:var(--rr);cursor:pointer;
  transition:all .25s;white-space:nowrap;letter-spacing:.5px;flex-shrink:0;
}
.nb:hover{border-color:var(--g);color:var(--g);box-shadow:var(--gs2);}
.nb.p{background:var(--g);color:#000;border-color:var(--g);font-weight:900;box-shadow:0 3px 14px rgba(0,255,135,.3);}
.nb.p:hover{background:#00e87a;box-shadow:var(--gs);}
.nb.danger{border-color:rgba(255,45,85,.28);color:var(--r);}
.nb.danger:hover{border-color:var(--r);box-shadow:0 0 12px rgba(255,45,85,.14);}

.nav-chip{
  font-family:var(--fd);font-size:9px;color:var(--g);letter-spacing:1px;
  padding:5px 9px;border:1px solid rgba(0,255,135,.22);border-radius:var(--rr);
  cursor:pointer;transition:all .2s;
  white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 0 8px rgba(0,255,135,.4);flex-shrink:0;
}
.nav-chip:hover{background:rgba(0,255,135,.06);}

@media(max-width:800px){
  .nav-links{display:none;}
  nav{padding:0 12px;}
}
@media(max-width:480px){
  .nb.danger{display:none;}
  .nav-chip{max-width:90px;font-size:8px;}
  .nb{padding:5px 9px;font-size:9px;}
  .nb.p{padding:5px 9px;}
}
@media(max-width:360px){
  .nb.p{display:none;}
  .nav-chip{max-width:80px;}
}

/* =========================================
   PAGES
========================================= */
.app{position:relative;z-index:1;}
.page{display:none;min-height:100vh;padding-top:58px;}
.page.active{display:block;}
#home{display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:64px 20px 80px;min-height:100vh;}
#home.active{display:flex;}
#game{display:none;min-height:100vh;padding:58px 0 40px;flex-direction:column;align-items:center;}
#game.active{display:flex;}

/* =========================================
   HERO
========================================= */
.badge{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--fd);font-size:8px;letter-spacing:3px;color:var(--g);
  background:rgba(0,255,135,.06);border:1px solid rgba(0,255,135,.18);
  padding:6px 15px;border-radius:100px;margin-bottom:26px;
  animation:fadeUp .5s ease both;
  box-shadow:inset 0 0 20px rgba(0,255,135,.04);
}
.ldot{width:5px;height:5px;border-radius:50%;background:var(--g);animation:lp 1.5s infinite;box-shadow:0 0 6px var(--g);}

h1.ht{
  font-family:var(--fd);
  font-size:clamp(40px,10vw,100px);
  font-weight:900;line-height:.92;letter-spacing:-2px;
  margin-bottom:20px;animation:fadeUp .5s .08s ease both;
}
h1.ht .a{
  color:var(--g);display:block;
  text-shadow:0 0 40px rgba(0,255,135,.4),0 0 80px rgba(0,255,135,.15);
}
h1.ht .d{color:var(--m2);}

.hs{
  font-size:clamp(14px,3.5vw,17px);color:var(--m);max-width:440px;
  line-height:1.7;margin-bottom:36px;animation:fadeUp .5s .16s ease both;
}
.hb{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;animation:fadeUp .5s .22s ease both;}
.btn{
  padding:14px 28px;font-family:var(--fd);font-size:10px;letter-spacing:2px;
  font-weight:900;border-radius:var(--rr);cursor:pointer;transition:all .25s;border:none;
  display:inline-flex;align-items:center;gap:8px;
}
.btn.g{background:var(--g);color:#000;box-shadow:0 4px 20px rgba(0,255,135,.32);}
.btn.g:hover{background:#00e87a;transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,255,135,.44);}
.btn.o{background:rgba(255,255,255,.04);color:var(--t);border:1px solid rgba(255,255,255,.14);}
.btn.o:hover{border-color:var(--g);color:var(--g);}

@media(max-width:400px){.btn{width:100%;justify-content:center;padding:15px;}}

.hstats{display:flex;gap:36px;margin-top:52px;flex-wrap:wrap;justify-content:center;animation:fadeUp .5s .28s ease both;}
.hsi{text-align:center;}
.hsi-n{font-family:var(--fd);font-size:clamp(22px,5vw,30px);font-weight:900;color:var(--g);text-shadow:0 0 20px rgba(0,255,135,.3);}
.hsi-l{font-size:9px;color:var(--m);margin-top:4px;letter-spacing:2px;font-weight:600;}

/* =========================================
   SECTIONS
========================================= */
.sw{width:100%;max-width:1060px;margin:0 auto;padding:0 20px;}
.shd{text-align:center;margin-bottom:32px;}
.stag{font-family:var(--fd);font-size:8px;letter-spacing:4px;color:var(--g);margin-bottom:8px;text-shadow:0 0 8px rgba(0,255,135,.4);}
.st{font-family:var(--fd);font-size:clamp(20px,4vw,36px);font-weight:900;letter-spacing:-1px;}
.ss{color:var(--m);margin-top:8px;font-size:13px;line-height:1.6;}

/* ABOUT GRID */
.ag{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-bottom:48px;}
.ac{
  background:linear-gradient(140deg,rgba(7,7,15,.9),rgba(12,12,24,.9));
  border:1px solid rgba(0,255,135,.08);border-radius:var(--r2);padding:20px;
  transition:all .3s;position:relative;overflow:hidden;
}
.ac::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--g),transparent);transform:scaleX(0);transform-origin:center;transition:transform .4s;}
.ac::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(0,255,135,.04),transparent 70%);opacity:0;transition:opacity .3s;}
.ac:hover{border-color:rgba(0,255,135,.22);transform:translateY(-4px);box-shadow:0 10px 30px rgba(0,0,0,.35);}
.ac:hover::before{transform:scaleX(1);}
.ac:hover::after{opacity:1;}
.aci{font-size:22px;margin-bottom:10px;}
.act{font-family:var(--fd);font-size:9px;letter-spacing:1px;color:var(--g);margin-bottom:6px;}
.acd{font-size:12px;color:var(--m);line-height:1.55;}

/* RANK TABLE */
.rt{background:rgba(7,7,15,.8);border:1px solid rgba(0,255,135,.08);border-radius:var(--r2);overflow:hidden;margin-bottom:60px;}
.rr2{display:grid;grid-template-columns:44px 1fr 120px;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid rgba(255,255,255,.04);transition:background .15s;}
.rr2:last-child{border-bottom:none;}
.rr2.rh{background:rgba(0,255,135,.04);font-family:var(--fd);font-size:8px;letter-spacing:2px;color:var(--m);}
.rr2:not(.rh):hover{background:rgba(0,255,135,.03);}
.rtroph{font-size:20px;text-align:center;}
.rnm{font-family:var(--fd);font-size:11px;font-weight:700;letter-spacing:.5px;}
.rng{font-size:12px;color:var(--m);text-align:right;}

/* =========================================
   PLAY PAGE
========================================= */
#play{padding:68px 16px 60px;}
.mg{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;max-width:1060px;margin:0 auto;}
.mc{
  background:linear-gradient(145deg,rgba(7,7,15,.95),rgba(12,12,24,.9));
  border:1px solid rgba(0,255,135,.07);border-radius:var(--r2);
  padding:0;cursor:pointer;transition:all .3s;overflow:hidden;position:relative;
}
.mc::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(0,255,135,.04),transparent 65%);opacity:0;transition:opacity .3s;}
.mc:hover{border-color:rgba(0,255,135,.28);transform:translateY(-5px);box-shadow:0 14px 34px rgba(0,0,0,.44),var(--gs2);}
.mc:hover::after{opacity:1;}
.mctb{height:3px;transform:scaleX(0);transform-origin:left;transition:transform .4s;}
.mc:hover .mctb{transform:scaleX(1);}
.mch{padding:16px 14px 0;display:flex;align-items:flex-start;justify-content:space-between;}
.mcicon{width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;font-size:20px;border:1px solid rgba(255,255,255,.05);}
.mcdiff{font-size:9px;font-family:var(--fd);letter-spacing:1px;padding:3px 7px;border-radius:5px;font-weight:700;}
.mcdiff.e{background:rgba(0,255,135,.14);color:var(--g);}
.mcdiff.m{background:rgba(255,214,10,.14);color:var(--y);}
.mcdiff.h{background:rgba(255,45,85,.14);color:var(--r);}
.mcb{padding:12px 14px 16px;}
.mcn{font-family:var(--fd);font-size:12px;font-weight:700;margin-bottom:7px;letter-spacing:.5px;}
.mcd{font-size:12px;color:var(--m);line-height:1.5;}

@media(max-width:560px){
  .mg{grid-template-columns:1fr 1fr;gap:8px;}
  .mcn{font-size:10px;}
  .mcd{font-size:11px;}
  .mcicon{width:38px;height:38px;font-size:18px;}
}
@media(max-width:340px){.mg{grid-template-columns:1fr;}}
@media(min-width:1100px){.mg{grid-template-columns:repeat(4,1fr);}}

/* =========================================
   GAME INTRO
========================================= */
.gi{
  position:fixed;inset:0;z-index:450;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(2,2,12,.97);opacity:0;pointer-events:none;
  transition:opacity .3s;text-align:center;padding:20px;
  background-image:radial-gradient(ellipse at center,rgba(0,255,135,.04) 0%,transparent 65%);
}
.gi.show{opacity:1;pointer-events:all;}
.gi-icon{font-size:60px;margin-bottom:16px;animation:ip 1.4s infinite;filter:drop-shadow(0 0 14px rgba(0,255,135,.35));}
.gi-title{font-family:var(--fd);font-size:clamp(22px,6vw,46px);font-weight:900;margin-bottom:10px;text-shadow:0 0 24px rgba(0,255,135,.3);}
.gi-sub{font-size:13px;color:var(--m);margin-bottom:28px;max-width:360px;line-height:1.6;}
.gi-diff{display:flex;gap:8px;margin-bottom:22px;flex-wrap:wrap;justify-content:center;}
.gi-d{padding:9px 19px;border-radius:var(--rr);font-family:var(--fd);font-size:10px;letter-spacing:1px;cursor:pointer;border:1px solid rgba(255,255,255,.11);background:none;color:var(--m);transition:all .2s;}
.gi-d.sel{font-weight:900;color:#000;}
.gi-d.e.sel{background:var(--g);border-color:var(--g);box-shadow:0 0 16px rgba(0,255,135,.32);}
.gi-d.m.sel{background:var(--y);border-color:var(--y);box-shadow:0 0 16px rgba(255,214,10,.32);}
.gi-d.h.sel{background:var(--r);border-color:var(--r);box-shadow:0 0 16px rgba(255,45,85,.32);}
.gi-d.x.sel{background:var(--p);border-color:var(--p);box-shadow:0 0 16px rgba(167,139,250,.32);}
.gi-start{padding:14px 42px;background:var(--g);border:none;border-radius:var(--rr);font-family:var(--fd);font-size:12px;font-weight:900;letter-spacing:2px;color:#000;cursor:pointer;transition:all .25s;box-shadow:0 4px 18px rgba(0,255,135,.36);}
.gi-start:hover{background:#00e87a;transform:scale(1.03);box-shadow:0 6px 26px rgba(0,255,135,.5);}

/* LEAVE WARNING */
.lw{position:fixed;inset:0;z-index:600;background:rgba(2,2,12,.92);backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;padding:16px;}
.lw.show{display:flex;}
.lwb{background:rgba(7,7,15,.98);border:1px solid rgba(255,45,85,.28);border-radius:var(--r3);padding:28px 24px;max-width:320px;text-align:center;box-shadow:0 0 40px rgba(255,45,85,.1);}
.lwt{font-family:var(--fd);font-size:15px;font-weight:900;margin-bottom:8px;}
.lws{font-size:13px;color:var(--m);margin-bottom:20px;line-height:1.5;}
.lwbtns{display:flex;gap:8px;justify-content:center;}
.lwbtn{padding:10px 24px;border-radius:var(--rr);font-family:var(--fd);font-size:10px;letter-spacing:1px;cursor:pointer;font-weight:900;transition:all .2s;border:none;}
.lwbtn.stay{background:var(--g);color:#000;box-shadow:0 3px 12px rgba(0,255,135,.3);}
.lwbtn.leave{background:rgba(255,45,85,.1);color:var(--r);border:1px solid rgba(255,45,85,.28);}

/* =========================================
   GAME LAYOUT
========================================= */
.ghd{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;width:100%;max-width:660px;
}
.gbk{
  background:none;border:1px solid rgba(255,45,85,.22);color:var(--r);
  font-family:var(--fd);font-size:10px;font-weight:700;padding:7px 14px;
  border-radius:var(--rr);cursor:pointer;transition:all .2s;letter-spacing:.5px;
}
.gbk:hover{background:rgba(255,45,85,.07);border-color:var(--r);}
.gml{font-family:var(--fd);font-size:9px;letter-spacing:3px;color:var(--g);text-align:center;text-shadow:0 0 8px rgba(0,255,135,.4);}
.gdl{font-size:10px;color:var(--m);text-align:center;margin-top:2px;}
.grt{background:none;border:1px solid rgba(0,255,135,.18);color:var(--g);font-family:var(--fd);font-size:10px;font-weight:700;padding:7px 14px;border-radius:var(--rr);cursor:pointer;transition:all .2s;letter-spacing:.5px;}
.grt:hover{background:rgba(0,255,135,.06);}

.sb2{display:flex;align-items:center;gap:8px;justify-content:center;margin:4px 0;min-height:20px;}
.sdot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.08);transition:all .3s;}
.sdot.hit{background:var(--r);box-shadow:0 0 8px rgba(255,45,85,.6);}
.slbl{font-family:var(--fd);font-size:8px;letter-spacing:2px;color:var(--m2);}

.gl{width:100%;max-width:620px;margin:0 auto;padding:0 14px;}

/* DIGITAL TIMER */
.dt{
  font-family:var(--fm);font-size:clamp(22px,5vw,42px);
  color:var(--g);letter-spacing:3px;text-align:center;
  text-shadow:0 0 18px rgba(0,255,135,.28);min-height:46px;
  display:flex;align-items:center;justify-content:center;
}
.dt.ya{color:var(--y);text-shadow:0 0 18px rgba(255,214,10,.28);}
.dt.ra{color:var(--r);text-shadow:0 0 18px rgba(255,45,85,.28);}
.ttrack{width:100%;height:3px;background:rgba(255,255,255,.05);border-radius:2px;overflow:hidden;margin-top:5px;}
.tfill{height:100%;border-radius:2px;transition:width .05s linear;}

/* BIG CLICK BUTTON */
.cbtn{
  width:100%;padding:clamp(26px,5vw,42px) 20px;
  border-radius:var(--r3);font-family:var(--fd);
  font-size:clamp(15px,3.5vw,21px);font-weight:900;letter-spacing:3px;
  cursor:pointer;transition:background .1s,border-color .1s,color .1s;
  border:2px solid rgba(0,255,135,.12);
  background:linear-gradient(135deg,rgba(7,7,15,.95),rgba(12,12,24,.9));
  color:var(--m2);
  user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  position:relative;overflow:hidden;
}
.cbtn.waiting{border-color:rgba(255,214,10,.4);color:var(--y);}
.cbtn.go{border-color:var(--g);color:var(--g);background:rgba(0,255,135,.04);box-shadow:var(--gs),var(--gs2);}
.cbtn.early{border-color:rgba(255,45,85,.4);color:var(--r);}

/* RESULT */
.res-w{text-align:center;padding:10px 0;animation:fadeUp .3s ease;}
.rbig{font-family:var(--fd);font-size:clamp(42px,10vw,82px);font-weight:900;letter-spacing:-2px;margin:10px 0 4px;}
.rlbl{font-family:var(--fd);font-size:9px;letter-spacing:3px;color:var(--m);}
.rrank{font-family:var(--fd);font-size:13px;margin-top:7px;letter-spacing:1px;}
.rprog{width:100%;max-width:370px;margin:11px auto 0;}
.rpbar{height:4px;background:rgba(255,255,255,.05);border-radius:3px;overflow:hidden;}
.rpfill{height:100%;border-radius:3px;transition:width 1s cubic-bezier(.4,0,.2,1);}
.rpll{display:flex;justify-content:space-between;font-family:var(--fd);font-size:8px;color:var(--m2);margin-top:4px;}

/* WORLD RECORD */
.wrc{
  background:linear-gradient(135deg,rgba(255,214,10,.07),rgba(0,255,135,.05));
  border:1px solid rgba(255,214,10,.28);border-radius:var(--r2);
  padding:16px;margin:12px 0;text-align:center;display:none;
  box-shadow:0 0 28px rgba(255,214,10,.09);animation:wrPop .5s cubic-bezier(.175,.885,.32,1.275);
}
.wrc-icon{font-size:30px;margin-bottom:6px;}
.wrc-title{font-family:var(--fd);font-size:10px;letter-spacing:2px;color:var(--y);margin-bottom:4px;text-shadow:0 0 10px rgba(255,214,10,.4);}
.wrc-score{font-family:var(--fd);font-size:34px;font-weight:900;color:var(--y);text-shadow:0 0 18px rgba(255,214,10,.4);}
.wrc-msg{font-size:12px;color:var(--m);margin-top:4px;line-height:1.5;}

/* COMPARE CARD */
.ccard{background:rgba(7,7,15,.85);border:1px solid rgba(0,255,135,.09);border-radius:var(--r2);padding:13px;margin:10px 0;text-align:left;}
.cc-t{font-family:var(--fd);font-size:8px;letter-spacing:2px;color:var(--m);margin-bottom:8px;}
.cc-i{display:flex;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.03);}
.cc-i:last-child{border-bottom:none;}
.cc-n{font-size:11px;color:var(--m);}
.cc-bf{font-size:9px;font-family:var(--fd);padding:2px 7px;border-radius:4px;background:rgba(0,255,135,.11);color:var(--g);}
.cc-bs{font-size:9px;color:var(--m2);}

.arow{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;margin:10px 0;}
.chip{font-size:9px;padding:3px 9px;border-radius:5px;border:1px solid rgba(255,255,255,.07);background:rgba(7,7,15,.8);color:var(--m);font-family:var(--fd);}
.chip.best{border-color:var(--g);color:var(--g);background:rgba(0,255,135,.05);}

.gacts{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin-top:12px;}
.gb2{padding:9px 18px;border-radius:var(--rr);cursor:pointer;font-family:var(--fd);font-size:9px;letter-spacing:1px;font-weight:700;transition:all .2s;border:none;}
.gb2.p{background:var(--g);color:#000;box-shadow:0 3px 12px rgba(0,255,135,.24);}
.gb2.p:hover{background:#00e87a;}
.gb2.s{background:rgba(7,7,15,.8);color:var(--t);border:1px solid rgba(255,255,255,.09);}
.gb2.s:hover{border-color:var(--g);color:var(--g);}
.gb2.dl{background:rgba(7,7,15,.8);color:var(--g2);border:1px solid rgba(0,201,255,.18);}
@media(max-width:380px){.gacts{gap:5px;}.gb2{padding:8px 11px;font-size:8px;}}

/* F1 */
.f1l{display:flex;gap:12px;justify-content:center;margin:16px 0;}
.fl{width:50px;height:50px;border-radius:50%;background:#0d0000;border:3px solid #1a0000;transition:all .12s;}
.fl.on{background:var(--r);border-color:#ff5555;box-shadow:0 0 24px rgba(255,45,85,.75),0 0 50px rgba(255,45,85,.3);}
.f1cd{font-family:var(--fd);font-size:66px;font-weight:900;text-align:center;min-height:80px;display:flex;align-items:center;justify-content:center;}
.f1st{text-align:center;font-family:var(--fd);font-size:9px;letter-spacing:3px;color:var(--m);margin-bottom:12px;}
@media(max-width:380px){.fl{width:38px;height:38px;}.f1l{gap:7px;}.f1cd{font-size:52px;}}

/* COLOR MATCH */
.scrow{display:flex;gap:9px;justify-content:center;margin-bottom:12px;flex-wrap:wrap;}
.scbox{text-align:center;background:rgba(7,7,15,.85);border:1px solid rgba(0,255,135,.09);border-radius:var(--rr);padding:8px 14px;}
.sv{font-family:var(--fd);font-size:21px;font-weight:900;}
.sl{font-size:9px;color:var(--m);letter-spacing:1px;margin-top:2px;}
.rw{position:relative;width:66px;height:66px;flex-shrink:0;}
.rbg{fill:none;stroke:rgba(255,255,255,.05);stroke-width:6;}
.rfill{fill:none;stroke-width:6;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset .9s linear,stroke .3s;}
.rtxt{font-family:var(--fd);font-size:14px;font-weight:900;fill:var(--t);}
.cprompt{font-family:var(--fd);font-size:9px;letter-spacing:3px;color:var(--m);text-align:center;margin-bottom:8px;}
.cword{font-family:var(--fd);font-size:clamp(36px,8vw,60px);font-weight:900;text-align:center;margin-bottom:18px;line-height:1;}
.copts{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.copt{height:clamp(52px,10vw,64px);border-radius:var(--r2);border:2px solid transparent;cursor:pointer;transition:all .12s;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:11px;letter-spacing:1px;font-weight:700;-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.copt:hover{transform:scale(1.02);}
.copt.correct{transform:scale(1.03);}
.copt.wrong{transform:scale(.97);opacity:.6;}

/* NUMBER */
.swd{font-family:var(--fm);font-size:clamp(22px,5vw,46px);color:var(--g);text-align:center;letter-spacing:3px;text-shadow:0 0 14px rgba(0,255,135,.22);}
.ngrid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:12px 0;}
.nbtn{aspect-ratio:1;border-radius:var(--rr);background:rgba(7,7,15,.85);border:1px solid rgba(0,255,135,.07);color:var(--t);font-family:var(--fd);font-size:clamp(11px,2.5vw,14px);font-weight:700;cursor:pointer;transition:all .12s;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.nbtn:hover{border-color:rgba(0,255,135,.28);color:var(--g);}
.nbtn.clicked{background:rgba(0,255,135,.09);border-color:var(--g);color:var(--g);}
.nbtn.wn{background:rgba(255,45,85,.09);border-color:var(--r);color:var(--r);animation:shk .25s;}
.nbtn:disabled{cursor:default;}

/* AIM */
.aarena{position:relative;width:100%;height:clamp(220px,38vw,290px);background:rgba(7,7,15,.85);border:1px solid rgba(0,255,135,.09);border-radius:var(--r2);overflow:hidden;cursor:crosshair;}
.atgt{position:absolute;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;animation:ta .15s ease;}
.ainn{border-radius:50%;}

/* BALL */
.barena{position:relative;width:100%;height:clamp(220px,38vw,290px);background:rgba(7,7,15,.85);border:1px solid rgba(0,255,135,.09);border-radius:var(--r2);overflow:hidden;}
.ball{position:absolute;border-radius:50%;cursor:pointer;animation:ba .15s ease;-webkit-tap-highlight-color:transparent;touch-action:manipulation;}

/* MEMORY */
.memg{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;max-width:270px;margin:0 auto;}
.memc{aspect-ratio:1;border-radius:var(--r2);border:2px solid rgba(255,255,255,.07);cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;font-size:20px;-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.memc.flash{transform:scale(1.1);}
.memc.wc{border-color:var(--r)!important;background:rgba(255,45,85,.09)!important;}

/* MATH */
.meq{font-family:var(--fd);font-size:clamp(30px,7vw,58px);font-weight:900;text-align:center;margin:12px 0;text-shadow:0 0 18px rgba(0,255,135,.18);}
.mopts{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px;}
.mopt{padding:14px;border-radius:var(--r2);border:2px solid rgba(0,255,135,.1);background:rgba(7,7,15,.85);font-family:var(--fd);font-size:clamp(15px,3.5vw,20px);font-weight:900;cursor:pointer;transition:all .15s;text-align:center;color:var(--t);-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.mopt:hover{border-color:rgba(0,255,135,.28);color:var(--g);}
.mopt.correct{background:rgba(0,255,135,.07);border-color:var(--g);color:var(--g);}
.mopt.wrong{background:rgba(255,45,85,.07);border-color:var(--r);color:var(--r);}

/* =========================================
   LEADERBOARD
========================================= */
#leaderboard{padding:68px 16px 60px;}
.lbtabs{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:16px;}
.lbtab{padding:6px 11px;border-radius:7px;background:rgba(7,7,15,.85);border:1px solid rgba(0,255,135,.09);color:var(--m);font-family:var(--fd);font-size:9px;letter-spacing:1px;cursor:pointer;transition:all .2s;font-weight:700;}
.lbtab.on{background:var(--g);color:#000;border-color:var(--g);box-shadow:0 3px 12px rgba(0,255,135,.24);}
.lblive{display:flex;align-items:center;gap:6px;font-family:var(--fd);font-size:8px;letter-spacing:2px;color:var(--g);margin-bottom:12px;}
.lbldot{width:5px;height:5px;border-radius:50%;background:var(--g);animation:lp 1.5s infinite;box-shadow:0 0 5px var(--g);}
.lbrow{display:grid;grid-template-columns:38px 1fr 82px 64px;align-items:center;gap:7px;padding:10px 11px;border-radius:var(--rr);border:1px solid transparent;margin-bottom:4px;transition:all .2s;}
.lbrow:hover{background:rgba(0,255,135,.025);border-color:rgba(0,255,135,.09);}
.lbrow.t1{background:rgba(255,214,10,.04);border-color:rgba(255,214,10,.18);}
.lbrow.t2{background:rgba(180,180,180,.03);border-color:rgba(180,180,180,.1);}
.lbrow.t3{background:rgba(200,120,60,.03);border-color:rgba(200,120,60,.1);}
.lbrow.you{border-color:rgba(0,255,135,.2);background:rgba(0,255,135,.02);}
.lbrnk{font-family:var(--fd);font-size:11px;font-weight:900;text-align:center;}
.gold{color:var(--y);text-shadow:0 0 7px rgba(255,214,10,.4);}
.silver{color:#bbb;}.bronze{color:#c8864a;}
.lbu{display:flex;align-items:center;gap:8px;min-width:0;}
.lbav{width:28px;height:28px;border-radius:50%;background:rgba(7,7,15,.9);border:1px solid rgba(0,255,135,.13);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;font-family:var(--fd);}
.lbnm{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lbtier{font-size:8px;font-family:var(--fd);letter-spacing:.5px;color:var(--g);margin-top:1px;}
.lbsc{font-family:var(--fd);font-size:14px;font-weight:900;color:var(--g);text-align:right;text-shadow:0 0 9px rgba(0,255,135,.2);}
.lbsc span{font-size:8px;color:var(--m);}
.lbmd{font-size:8px;color:var(--m2);text-align:right;font-family:var(--fd);}
.lbempty{text-align:center;padding:38px 20px;}
.lbei{font-size:38px;margin-bottom:10px;}
.lbet{font-family:var(--fd);font-size:11px;letter-spacing:2px;margin-bottom:5px;}
.lbes{font-size:13px;color:var(--m);margin-bottom:16px;}
.lbpromo{background:rgba(0,255,135,.04);border:1px solid rgba(0,255,135,.13);border-radius:var(--r2);padding:14px;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.lbpt{font-size:12px;color:var(--m);line-height:1.5;}
.lbpt strong{color:var(--t);}
@media(max-width:580px){.lbrow{grid-template-columns:34px 1fr 70px;}.lbmd{display:none;}}

/* =========================================
   PROFILE
========================================= */
#profile{padding:68px 16px 60px;}
.pw{max-width:800px;margin:0 auto;}
.phd{display:flex;gap:14px;align-items:center;background:rgba(7,7,15,.85);border:1px solid rgba(0,255,135,.1);border-radius:var(--r3);padding:18px;margin-bottom:16px;flex-wrap:wrap;}
.pav{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--g),var(--g2));display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:900;color:#000;font-family:var(--fd);flex-shrink:0;box-shadow:0 0 18px rgba(0,255,135,.28);}
.pnm{font-family:var(--fd);font-size:clamp(15px,3.5vw,19px);font-weight:900;margin-bottom:4px;letter-spacing:1px;}
.ptier{font-family:var(--fd);font-size:10px;letter-spacing:2px;color:var(--g);text-shadow:0 0 7px rgba(0,255,135,.3);}
.psub{font-size:12px;color:var(--m);margin-top:3px;}
.psg{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:7px;margin-bottom:16px;}
.psc{background:rgba(7,7,15,.85);border:1px solid rgba(0,255,135,.09);border-radius:var(--r2);padding:13px;cursor:pointer;transition:all .2s;}
.psc:hover{border-color:rgba(0,255,135,.22);transform:translateY(-2px);}
.pscv{font-family:var(--fd);font-size:21px;font-weight:900;color:var(--g);}
.pscl{font-size:9px;color:var(--m);margin-top:3px;letter-spacing:1px;}
.pscs{font-size:9px;color:var(--g2);margin-top:4px;font-family:var(--fd);}
.achg{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:7px;margin-bottom:18px;}
.achc{background:rgba(7,7,15,.85);border:1px solid rgba(0,255,135,.07);border-radius:var(--r2);padding:13px;text-align:center;position:relative;}
.achc.un{border-color:rgba(255,214,10,.22);background:rgba(255,214,10,.02);}
.achc.lk{opacity:.33;filter:grayscale(1);}
.acht{font-size:26px;margin-bottom:6px;}
.achn{font-family:var(--fd);font-size:9px;letter-spacing:1px;margin-bottom:3px;}
.achd{font-size:10px;color:var(--m);line-height:1.4;}
.achub{position:absolute;top:5px;right:5px;font-size:8px;background:rgba(255,214,10,.13);color:var(--y);padding:2px 5px;border-radius:4px;font-family:var(--fd);}
.hi{display:flex;align-items:center;justify-content:space-between;padding:9px 11px;border-radius:var(--rr);border:1px solid rgba(0,255,135,.07);margin-bottom:4px;background:rgba(7,7,15,.85);transition:all .2s;}
.hi:hover{border-color:rgba(0,255,135,.18);}
.him{font-family:var(--fd);font-size:9px;letter-spacing:1px;}
.hisc{font-family:var(--fd);font-size:13px;font-weight:900;color:var(--g);}
.hid{font-size:10px;color:var(--m);}
.slbl2{font-family:var(--fd);font-size:8px;letter-spacing:2px;color:var(--m);margin-bottom:9px;}
@media(max-width:560px){.achg{grid-template-columns:repeat(2,1fr);}.psg{grid-template-columns:repeat(2,1fr);}}

/* ACHIEVEMENT NOTIF */
.achn2{position:fixed;top:66px;right:14px;z-index:700;background:rgba(7,7,15,.97);border:1px solid rgba(255,214,10,.28);border-radius:var(--r2);padding:12px 15px;transform:translateX(320px);opacity:0;transition:all .4s cubic-bezier(.175,.885,.32,1.275);pointer-events:none;max-width:250px;box-shadow:0 0 28px rgba(255,214,10,.09);}
.achn2.show{transform:translateX(0);opacity:1;}
.antop{display:flex;align-items:center;gap:7px;margin-bottom:5px;}
.ant{font-size:18px;}
.anl{font-family:var(--fd);font-size:8px;letter-spacing:2px;color:var(--y);text-shadow:0 0 7px rgba(255,214,10,.4);}
.ann{font-size:12px;font-weight:600;}
.and{font-size:10px;color:var(--m);}

/* MODALS */
.mo{display:none;position:fixed;inset:0;z-index:600;background:rgba(2,2,12,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);align-items:center;justify-content:center;padding:14px;}
.mo.open{display:flex;}
.modal{background:rgba(7,7,15,.99);border:1px solid rgba(0,255,135,.13);border-radius:var(--r3);padding:26px 22px;max-width:390px;width:100%;position:relative;animation:mi .25s ease;box-shadow:0 0 50px rgba(0,0,0,.5);}
.mclose{position:absolute;top:9px;right:9px;background:none;border:none;color:var(--m);font-size:17px;cursor:pointer;padding:4px 7px;transition:color .2s;}
.mclose:hover{color:var(--t);}
.mt{font-family:var(--fd);font-size:15px;font-weight:900;margin-bottom:5px;letter-spacing:.5px;}
.ms2{font-size:12px;color:var(--m);margin-bottom:20px;line-height:1.5;}
.fg{margin-bottom:11px;}
.flbl{font-size:9px;letter-spacing:1.5px;color:var(--m);margin-bottom:4px;display:block;font-weight:600;}
.fi{width:100%;padding:10px 13px;background:rgba(12,12,24,.9);border:1px solid rgba(0,255,135,.11);border-radius:var(--rr);color:var(--t);font-family:var(--fb);font-size:14px;transition:border-color .2s;outline:none;}
.fi:focus{border-color:var(--g);box-shadow:0 0 9px rgba(0,255,135,.1);}
.fhint{font-size:10px;color:var(--m2);margin-top:3px;}
.fmsg{font-size:10px;margin-top:3px;min-height:13px;}
.fmsg.ok{color:var(--g);}
.fmsg.err{color:var(--r);}
.fsub{width:100%;padding:11px;background:var(--g);border:none;border-radius:var(--rr);color:#000;font-family:var(--fd);font-size:10px;font-weight:900;letter-spacing:1.5px;cursor:pointer;margin-top:7px;transition:all .2s;box-shadow:0 3px 12px rgba(0,255,135,.24);}
.fsub:hover{background:#00e87a;box-shadow:0 5px 18px rgba(0,255,135,.34);}
.ftog{text-align:center;margin-top:11px;font-size:12px;color:var(--m);}
.ftog a{color:var(--g);cursor:pointer;}
.ferr{font-size:11px;color:var(--r);margin-top:4px;min-height:15px;}
.shsc{font-family:var(--fd);font-size:50px;font-weight:900;color:var(--g);margin:10px 0 2px;text-align:center;text-shadow:0 0 18px rgba(0,255,135,.3);}
.shmd{font-size:9px;color:var(--m);letter-spacing:2px;margin-bottom:9px;text-align:center;font-family:var(--fd);}
.shrk{font-size:12px;text-align:center;margin-bottom:13px;font-family:var(--fd);}
.shopts{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;}
.shbtn{padding:8px 14px;border-radius:var(--rr);cursor:pointer;font-family:var(--fd);font-size:9px;letter-spacing:1px;font-weight:700;border:1px solid rgba(0,255,135,.13);background:rgba(7,7,15,.85);color:var(--t);transition:all .2s;}
.shbtn:hover{border-color:var(--g);color:var(--g);}
.shbtn.dl{color:var(--g2);border-color:rgba(0,201,255,.17);}
.shnote{font-size:10px;color:var(--m);margin-top:9px;text-align:center;}
.pms{font-family:var(--fd);font-size:42px;font-weight:900;color:var(--g);margin:9px 0 3px;text-shadow:0 0 18px rgba(0,255,135,.3);}
.pmod{font-size:10px;color:var(--m);letter-spacing:2px;margin-bottom:14px;font-family:var(--fd);}
.pmb{background:rgba(12,12,24,.9);border-radius:var(--r2);padding:12px;margin-bottom:14px;text-align:left;}
.pmbi{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--m);margin-bottom:7px;}
.pmbi:last-child{margin-bottom:0;}
.pmbi span{font-size:14px;}

/* STATIC */
.stp{max-width:680px;margin:0 auto;padding:68px 20px 60px;}
.stt{font-family:var(--fd);font-size:clamp(18px,4vw,34px);font-weight:900;margin-bottom:7px;}
.sts{color:var(--m);font-size:13px;margin-bottom:28px;line-height:1.6;}
.stsc{margin-bottom:22px;}
.stsc h3{font-family:var(--fd);font-size:10px;letter-spacing:1px;color:var(--g);margin-bottom:8px;text-shadow:0 0 7px rgba(0,255,135,.3);}
.stsc p{font-size:13px;color:var(--m);line-height:1.7;margin-bottom:5px;}
.stsc a{color:var(--g);text-decoration:none;}

/* TOAST */
.toast{
  position:fixed;bottom:18px;left:50%;
  transform:translateX(-50%) translateY(60px);
  z-index:900;background:rgba(7,7,15,.97);border:1px solid rgba(0,255,135,.18);
  border-radius:var(--rr);padding:10px 18px;font-size:12px;opacity:0;
  transition:all .3s cubic-bezier(.175,.885,.32,1.275);pointer-events:none;
  width:calc(100% - 28px);max-width:310px;display:flex;align-items:center;gap:8px;font-weight:500;
}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1;}
.toast.success{border-color:rgba(0,255,135,.28);color:var(--g);}
.toast.error{border-color:rgba(255,45,85,.28);color:var(--r);}
.toast.info{border-color:rgba(0,201,255,.28);color:var(--g2);}
.toast.warning{border-color:rgba(255,214,10,.28);color:var(--y);}
.ticon{font-size:13px;flex-shrink:0;}

/* RT NOTIF */
.rtn{position:fixed;bottom:66px;left:14px;z-index:800;background:rgba(7,7,15,.97);border:1px solid rgba(0,255,135,.16);border-radius:var(--r2);padding:10px 13px;transform:translateX(-300px);opacity:0;transition:all .4s cubic-bezier(.175,.885,.32,1.275);pointer-events:none;max-width:240px;}
.rtn.show{transform:translateX(0);opacity:1;}
.rtntop{display:flex;align-items:center;gap:5px;margin-bottom:4px;}
.rtndot{width:5px;height:5px;border-radius:50%;background:var(--g);animation:lp 1.5s infinite;box-shadow:0 0 5px var(--g);}
.rtnl{font-family:var(--fd);font-size:7px;letter-spacing:2px;color:var(--g);}
.rtnm{font-size:11px;color:var(--t);line-height:1.4;font-weight:500;}
.rtns{font-size:9px;color:var(--m);margin-top:1px;}

/* CHEAT */
.cf{position:fixed;inset:0;z-index:400;pointer-events:none;border:4px solid var(--r);opacity:0;transition:opacity .1s;}
.cf.show{opacity:1;animation:cfa .35s forwards;}
#sc-canvas{display:none;}

/* =========================================
   ANIMATIONS
========================================= */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes lp{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.25;transform:scale(.55)}}
@keyframes cfa{0%{opacity:.5}100%{opacity:0}}
@keyframes shk{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@keyframes ip{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes mi{from{opacity:0;transform:scale(.94) translateY(6px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes ta{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes ba{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes wrPop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}