/* ============ RUPRO 练枪平台 ============ */
:root{
  --bg:#0b141d;
  --bg2:#0f1923;
  --panel:#121e2a;
  --panel2:#0e1822;
  --line:#1e2f3f;
  --line2:#28404f;
  --red:#ff4655;
  --red2:#d63b4c;
  --cyan:#4ef7d0;
  --gold:#ffd166;
  --txt:#dfe9f2;
  --dim:#8fa5b8;
  --xc:#4ef7d0;
  --cut:polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  --cut-s:polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);color:var(--txt);overflow:hidden;
  font-family:"Segoe UI","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  user-select:none;-webkit-user-select:none;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.hide{display:none!important}
h1,h2,h3{font-weight:700;letter-spacing:.04em}

/* ---------------- 启动动画 ---------------- */
#boot{
  position:fixed;inset:0;z-index:100;background:#000;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .65s ease;
}
#boot.out{opacity:0;pointer-events:none}
#boot.gone{display:none}
.boot-lines{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px);
}
.boot-lines::after{
  content:"";position:absolute;left:0;right:0;height:120px;top:-120px;
  background:linear-gradient(180deg,transparent,rgba(78,247,208,.06),transparent);
  animation:scan 2.6s linear infinite;
}
@keyframes scan{to{transform:translateY(calc(100vh + 240px))}}
.boot-glow{
  position:absolute;left:50%;top:50%;width:560px;height:560px;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,70,85,.10),transparent 62%);pointer-events:none;
}
.boot-ret{position:absolute;left:50%;top:50%;width:0;height:0;transition:opacity .35s ease}
#boot.s3 .boot-ret{opacity:0}
.rb{position:absolute;background:var(--red);box-shadow:0 0 8px rgba(255,70,85,.8);transition:transform .85s cubic-bezier(.2,.9,.2,1)}
.rb-t,.rb-b{width:2px;height:56px;left:-1px}
.rb-l,.rb-r{height:2px;width:56px;top:-1px}
.rb-t{transform:translate(0,-70vh)}
.rb-b{transform:translate(0,70vh)}
.rb-l{transform:translate(-70vw,0)}
.rb-r{transform:translate(70vw,0)}
#boot.s2 .rb-t{transform:translate(0,-33px)}
#boot.s2 .rb-b{transform:translate(0,33px)}
#boot.s2 .rb-l{transform:translate(-33px,0)}
#boot.s2 .rb-r{transform:translate(33px,0)}
.rb-dot{
  position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;
  background:#fff;box-shadow:0 0 10px #fff;transform:scale(0);transition:transform .5s .35s ease;
}
#boot.s2 .rb-dot{transform:scale(1)}
.boot-center{
  position:absolute;left:50%;top:calc(50% + 92px);transform:translateX(-50%);
  width:min(380px,74vw);transition:opacity .4s;
}
#boot.s3 .boot-center{opacity:0}
.boot-bar{height:3px;background:rgba(255,255,255,.10);overflow:hidden}
.boot-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--red),#ff8a94);box-shadow:0 0 12px var(--red);transition:width .18s ease}
.boot-meta{
  display:flex;justify-content:space-between;margin-top:9px;
  font-size:11px;letter-spacing:.14em;color:#7f93a6;font-family:Consolas,monospace;
}
#boot-pct{color:var(--red)}
#boot-title{
  position:absolute;text-align:center;opacity:0;filter:blur(10px);
  transform:scale(1.04);transition:opacity .8s .45s,filter .8s .45s,transform .8s .45s;
}
#boot.s3 #boot-title{opacity:1;filter:blur(0);transform:scale(1)}
#boot-title b{
  display:block;font-size:64px;font-weight:800;letter-spacing:.34em;text-indent:.34em;
  color:#fff;text-shadow:0 0 26px rgba(255,70,85,.55);
}
#boot-title b::after{content:"";display:block;height:3px;width:120px;margin:14px auto 0;background:var(--red);box-shadow:0 0 14px var(--red)}
#boot-title i{
  display:block;font-style:normal;margin-top:14px;font-size:21px;letter-spacing:.72em;text-indent:.72em;
  color:var(--cyan);
}
.boot-skip{position:absolute;right:22px;bottom:18px;font-size:11px;letter-spacing:.2em;color:#55677a}

/* ---------------- 主界面 ---------------- */
#app{display:flex;height:100vh}
#sidebar{
  width:216px;flex:0 0 216px;background:var(--bg2);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:22px 0 18px;
}
.brand{display:flex;gap:11px;align-items:center;padding:0 20px 22px;border-bottom:1px solid var(--line)}
.logo-mark{width:30px;height:30px;background:var(--red);clip-path:polygon(0 0,100% 0,100% 68%,68% 100%,0 100%);flex:0 0 30px}
.logo{font-size:19px;font-weight:800;letter-spacing:.22em}
.logo-sub{font-size:8.5px;letter-spacing:.18em;color:var(--dim);margin-top:2px}
#nav{display:flex;flex-direction:column;gap:6px;padding:18px 12px}
.nav-btn{
  text-align:left;padding:12px 14px;font-size:14.5px;letter-spacing:.1em;color:var(--dim);
  border-left:2px solid transparent;transition:.15s;
}
.nav-btn .ico{display:inline-block;width:22px;color:#5f7488}
.nav-btn:hover{color:#fff;background:rgba(255,255,255,.03)}
.nav-btn.on{color:#fff;background:rgba(255,70,85,.10);border-left-color:var(--red)}
.nav-btn.on .ico{color:var(--red)}
.side-foot{margin-top:auto;padding:16px 16px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:11px}
.side-ver{font-size:9px;letter-spacing:.16em;color:#4e6174}
#btn-clear{
  padding:10px;font-size:12.5px;letter-spacing:.08em;color:#c96a74;border:1px solid #4a2730;
  background:rgba(255,70,85,.05);clip-path:var(--cut-s);transition:.15s;
}
#btn-clear:hover{color:#fff;background:rgba(255,70,85,.22);border-color:var(--red)}

#main{flex:1;overflow:auto;padding:34px 40px 50px;background:
  radial-gradient(900px 420px at 88% -10%,rgba(255,70,85,.06),transparent 60%),var(--bg)}
.page{max-width:1180px;margin:0 auto}
.phead{margin-bottom:26px}
.phead h1{font-size:27px;text-transform:uppercase;letter-spacing:.16em}
.phead h1::after{content:"";display:block;width:54px;height:3px;background:var(--red);margin-top:10px}
.phead p{margin-top:10px;color:var(--dim);font-size:13.5px;letter-spacing:.04em}

/* 卡片 */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:18px}
.card{
  background:var(--panel);border:1px solid var(--line);padding:20px 20px 18px;cursor:pointer;
  clip-path:var(--cut);position:relative;transition:.18s;outline:none;
}
.card::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--red);transition:.25s}
.card:hover{transform:translateY(-3px);border-color:var(--line2)}
.card.on{border-color:rgba(255,70,85,.55);background:linear-gradient(180deg,rgba(255,70,85,.07),transparent 55%),var(--panel)}
.card.on::before{width:100%}
.ctag{font-size:10px;letter-spacing:.3em;color:var(--red);margin-bottom:9px}
.card h2{font-size:20px;letter-spacing:.1em}
.card p{margin-top:9px;color:#a9bccd;font-size:13px;line-height:1.65;min-height:64px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.chips span{
  font-size:11px;letter-spacing:.06em;color:var(--cyan);border:1px solid rgba(78,247,208,.3);
  padding:3px 9px;background:rgba(78,247,208,.06);clip-path:var(--cut-s);
}
.cscore{margin-top:12px;font-size:11.5px;color:#6f8497;letter-spacing:.05em}

/* 配置条 */
.config{
  margin-top:22px;background:var(--panel2);border:1px solid var(--line);padding:20px 22px;
  clip-path:var(--cut);display:flex;flex-direction:column;gap:16px;
}
.cfg-head{font-size:12px;letter-spacing:.24em;color:var(--dim)}
.cfg-head span{color:var(--red);margin-left:10px;font-weight:700}
.cfg-row{display:flex;gap:34px;flex-wrap:wrap}
.cfg-g label{display:block;font-size:11px;letter-spacing:.18em;color:#6f8497;margin-bottom:8px}
.seg{display:inline-flex;border:1px solid var(--line2);clip-path:var(--cut-s);overflow:hidden}
.seg button{padding:9px 20px;font-size:13px;color:var(--dim);background:rgba(255,255,255,.02);transition:.15s}
.seg button+button{border-left:1px solid var(--line2)}
.seg button.on{background:var(--red);color:#fff;font-weight:600}
.seg button:not(.on):hover{color:#fff;background:rgba(255,255,255,.06)}
.cfg-rule{font-size:12.5px;line-height:1.7;color:#8fa5b8;border-left:2px solid var(--line2);padding-left:12px}
.btn{
  padding:12px 26px;font-size:14px;letter-spacing:.1em;color:var(--txt);
  border:1px solid var(--line2);background:rgba(255,255,255,.03);clip-path:var(--cut-s);transition:.15s;
}
.btn:hover{border-color:#3d5a70;background:rgba(255,255,255,.07);color:#fff}
.btn.go{
  background:var(--red);border-color:var(--red);color:#fff;font-weight:700;align-self:flex-start;
  padding:13px 34px;box-shadow:0 4px 22px rgba(255,70,85,.28);
}
.btn.go:hover{background:var(--red2);border-color:var(--red2)}
.btn.danger-btn{background:rgba(255,70,85,.14);border-color:var(--red);color:#ff8f99}
.btn.danger-btn:hover{background:var(--red);color:#fff}

/* 历史 */
.hstats{
  display:flex;gap:26px;flex-wrap:wrap;background:var(--panel2);border:1px solid var(--line);
  padding:15px 20px;clip-path:var(--cut);font-size:13px;color:var(--dim);margin-bottom:16px;
}
.hstats b{color:#fff;font-size:17px;margin-right:6px}
.hstats .hs em{font-style:normal;color:var(--red);font-weight:700}
.hfilter{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.hfilter button{
  padding:8px 18px;font-size:13px;color:var(--dim);border:1px solid var(--line);
  background:var(--panel);clip-path:var(--cut-s);transition:.15s;
}
.hfilter button.on{background:rgba(255,70,85,.16);border-color:rgba(255,70,85,.6);color:#fff}
.hfilter button:hover{color:#fff}
.table-wrap{border:1px solid var(--line);background:var(--panel2);clip-path:var(--cut);overflow:auto}
.htable{width:100%;border-collapse:collapse;font-size:13px;min-width:880px}
.htable th{
  text-align:left;padding:13px 14px;font-size:10.5px;letter-spacing:.14em;color:#6f8497;
  background:rgba(255,255,255,.025);border-bottom:1px solid var(--line);white-space:nowrap;
}
.htable td{padding:11px 14px;border-bottom:1px solid rgba(30,47,63,.6);color:#c3d2e0;white-space:nowrap}
.htable tr:last-child td{border-bottom:none}
.htable tbody tr:hover td{background:rgba(255,255,255,.03)}
.htable .num{color:#fff;font-weight:600}
.htable .mode{color:var(--cyan)}
.empty{padding:44px 20px;text-align:center;color:#5f7488;font-size:14px;letter-spacing:.06em}

/* ---------------- 游戏 ---------------- */
#game{position:fixed;inset:0;z-index:40;background:#000;cursor:crosshair}
#gl{display:block;width:100%;height:100%}
#crosshair{
  position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:6;
  color:var(--xc);filter:drop-shadow(0 0 1px rgba(0,0,0,.9));
}
#crosshair .ln{position:absolute;background:currentColor}
#crosshair .ln.t{width:2px;height:7px;left:-1px;top:-10px}
#crosshair .ln.b{width:2px;height:7px;left:-1px;top:3px}
#crosshair .ln.l{height:2px;width:7px;top:-1px;left:-10px}
#crosshair .ln.r{height:2px;width:7px;top:-1px;left:3px}
#crosshair .dot{
  position:absolute;left:-1.5px;top:-1.5px;width:3px;height:3px;border-radius:50%;
  background:currentColor;box-shadow:0 0 2px rgba(0,0,0,.9);
}
#crosshair.dot .ln{display:none}
#crosshair.empty .dot{display:none}
#crosshair.empty .ln{opacity:.95}

#hitmark{
  position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;
  pointer-events:none;opacity:0;z-index:7;color:#fff;
}
#hitmark::before,#hitmark::after{
  content:"";position:absolute;left:0;top:21px;width:44px;height:2px;
  background:linear-gradient(90deg,currentColor 0 34%,transparent 34% 66%,currentColor 66% 100%);
}
#hitmark::before{transform:rotate(45deg)}
#hitmark::after{transform:rotate(-45deg)}
#hitmark.show{animation:hit .22s ease-out}
#hitmark.bad{color:var(--red)}
@keyframes hit{
  0%{opacity:1;transform:scale(1.55)}
  35%{opacity:1;transform:scale(.92)}
  100%{opacity:0;transform:scale(1.06)}
}
#floats{position:absolute;inset:0;pointer-events:none;z-index:7}
.ft{
  position:absolute;left:50%;top:calc(50% + 30px);font-size:16px;font-weight:700;
  letter-spacing:.06em;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.8);
  animation:rise .8s ease-out forwards;
}
.ft.dim{color:var(--red);font-size:13px}
@keyframes rise{
  0%{opacity:0;transform:translate(-50%,6px) scale(.9)}
  18%{opacity:1;transform:translate(-50%,0) scale(1)}
  100%{opacity:0;transform:translate(-50%,-46px) scale(1)}
}

.hud{position:absolute;inset:0;pointer-events:none;z-index:5;font-family:Consolas,"Segoe UI",monospace}
.hud-l{position:absolute;left:24px;top:18px}
.hud-mode{
  font-size:12.5px;letter-spacing:.2em;color:#cfe0ee;background:rgba(8,14,20,.55);
  border-left:3px solid var(--red);padding:8px 14px;
}
.hud-c{position:absolute;left:50%;top:14px;transform:translateX(-50%);text-align:center}
#hud-time{font-size:38px;font-weight:700;letter-spacing:.06em;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.7)}
.tbar{width:190px;height:3px;background:rgba(255,255,255,.14);margin:6px auto 0}
.tbar i{display:block;height:100%;width:100%;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.hud-r{position:absolute;right:24px;top:18px;text-align:right}
#hud-score{font-size:34px;font-weight:700;color:var(--gold);text-shadow:0 2px 12px rgba(0,0,0,.7)}
.hud-sub{font-size:11.5px;letter-spacing:.14em;color:#9fb4c6;margin-top:2px}
#hud-acc{color:var(--cyan)}

/* 覆盖层通用 */
.ovl{
  position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  background:rgba(5,10,15,.74);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
}
.panel{
  background:var(--panel);border:1px solid var(--line2);clip-path:var(--cut);
  padding:28px 32px;min-width:380px;max-width:min(92vw,560px);
  box-shadow:0 24px 70px rgba(0,0,0,.6);
}
.panel.wide{max-width:min(94vw,700px)}
.panel h3{font-size:19px;letter-spacing:.14em;text-transform:uppercase}
.panel h3::after{content:"";display:block;width:40px;height:3px;background:var(--red);margin-top:9px}
.panel p{margin-top:13px;color:#a9bccd;font-size:13.5px;line-height:1.7}
.btns{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}

/* 结果 */
.res-sub{margin-top:11px;font-size:12px;letter-spacing:.1em;color:#6f8497}
.res-big{display:flex;align-items:baseline;gap:14px;margin-top:16px}
.res-big span{font-size:12px;letter-spacing:.2em;color:var(--dim)}
.res-big strong{font-size:44px;font-weight:800;color:var(--gold);line-height:1}
.badge{
  font-size:11px;letter-spacing:.14em;padding:4px 10px;clip-path:var(--cut-s);
  background:rgba(255,209,102,.15);border:1px solid var(--gold);color:var(--gold);
}
.rtable{width:100%;border-collapse:collapse;margin-top:18px;font-size:13px}
.rtable th{
  font-size:10.5px;letter-spacing:.14em;color:#6f8497;text-align:right;padding:9px 8px;
  border-bottom:1px solid var(--line);
}
.rtable th:first-child{text-align:left}
.rtable td{padding:9px 8px;border-bottom:1px solid rgba(30,47,63,.55);text-align:right;color:#c3d2e0}
.rtable td:first-child{text-align:left;color:#9fb4c6}
.rtable .cur{color:#fff;font-weight:700}
.rtable .best{color:var(--gold)}
.rtable .good{color:#57e389}
.rtable .bad{color:#ff7b86}
.rtable .na{color:#55677a}
.res-note{margin-top:14px;font-size:11px;line-height:1.75;color:#61748a;border-left:2px solid var(--line2);padding-left:10px}

/* 设置 */
.set-row{margin-top:20px}
.set-row label{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;letter-spacing:.18em;color:#8fa5b8;margin-bottom:10px}
.set-row label em{font-style:normal;font-size:19px;color:var(--red);font-weight:700;letter-spacing:.02em}
.set-row input[type=range]{
  width:100%;appearance:none;-webkit-appearance:none;height:4px;background:#22364a;outline:none;cursor:pointer;
}
.set-row input[type=range]::-webkit-slider-thumb{
  appearance:none;-webkit-appearance:none;width:16px;height:16px;background:var(--red);
  clip-path:polygon(0 0,100% 0,100% 70%,70% 100%,0 100%);cursor:pointer;
}
.set-row input[type=range]::-moz-range-thumb{width:16px;height:16px;background:var(--red);border:none;cursor:pointer}
.hint{margin-top:8px;font-size:11.5px;color:#61748a}
.segs{display:flex;gap:10px}
.segs button{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 8px;
  font-size:12.5px;color:var(--dim);border:1px solid var(--line2);background:rgba(255,255,255,.02);
  clip-path:var(--cut-s);transition:.15s;
}
.segs button.on{border-color:var(--red);background:rgba(255,70,85,.12);color:#fff}
.xprev{
  width:22px;height:22px;display:block;--xpc:var(--xc);
  background:
    radial-gradient(circle,var(--xpc) 0 1.6px,transparent 1.7px) center/100% 100% no-repeat,
    linear-gradient(var(--xpc),var(--xpc)) top center/2px 5px no-repeat,
    linear-gradient(var(--xpc),var(--xpc)) bottom center/2px 5px no-repeat,
    linear-gradient(var(--xpc),var(--xpc)) left center/5px 2px no-repeat,
    linear-gradient(var(--xpc),var(--xpc)) right center/5px 2px no-repeat;
}
.xprev.dot{background:radial-gradient(circle,var(--xpc) 0 2.4px,transparent 2.5px) center/100% 100% no-repeat}
.xprev.empty{
  background:
    linear-gradient(var(--xpc),var(--xpc)) top center/2px 5px no-repeat,
    linear-gradient(var(--xpc),var(--xpc)) bottom center/2px 5px no-repeat,
    linear-gradient(var(--xpc),var(--xpc)) left center/5px 2px no-repeat,
    linear-gradient(var(--xpc),var(--xpc)) right center/5px 2px no-repeat;
}

/* toast */
#toast{
  position:fixed;left:50%;bottom:36px;transform:translateX(-50%);z-index:90;
  background:#16222e;border:1px solid var(--line2);color:#cfe0ee;
  padding:11px 22px;font-size:13px;letter-spacing:.08em;clip-path:var(--cut-s);
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}

/* 滚动条 */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#22364a;border:2px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}

@media (max-width:920px){
  #sidebar{width:172px;flex-basis:172px}
  #main{padding:24px 20px 40px}
  #boot-title b{font-size:42px}
}