/* ==========================================================================
   SPORE 五阶段复刻 · 界面样式
   风格：深空紫青 + 生物质感发光 + DNA 螺旋元素
   ========================================================================== */
:root{
  --void:#05060f;      --deep:#0b1030;     --panel:#101a3a;
  --cyan:#3fe8ff;      --cyan-dk:#128ba8;  --violet:#a56cff;
  --lime:#8cf05a;      --amber:#ffc94d;    --rose:#ff5f8f;
  --ink:#eaf4ff;       --dim:#9fb4d8;
  --glass:rgba(12,20,48,.86);
  --glass2:rgba(20,32,70,.72);
  --shadow:0 20px 50px rgba(0,0,0,.6);
  --font:"Segoe UI","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-user-select:none;user-select:none}
html,body{width:100%;height:100%;overflow:hidden;background:var(--void);font-family:var(--font);color:var(--ink)}
canvas#scene{position:fixed;inset:0;width:100%;height:100%;display:block}
.hidden{display:none !important}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input[type=range]{accent-color:var(--cyan);height:16px}

/* ---------- 滤镜层 ---------- */
#fx-vignette{position:fixed;inset:0;pointer-events:none;z-index:5;
  box-shadow:inset 0 0 220px 70px rgba(2,4,14,.6)}
#fx-flash{position:fixed;inset:0;pointer-events:none;z-index:6;opacity:0;
  background:radial-gradient(ellipse at center,transparent 30%,rgba(255,50,90,.7) 100%);
  transition:opacity .5s}
#fx-flash.on{opacity:1;transition:opacity .05s}
#fx-flash.heal{background:radial-gradient(ellipse at center,transparent 35%,rgba(90,240,140,.5) 100%)}
#fx-flash.dna{background:radial-gradient(ellipse at center,transparent 40%,rgba(80,220,255,.45) 100%)}
#fx-scan{position:fixed;inset:0;pointer-events:none;z-index:7;opacity:0;transition:opacity .4s;
  background:repeating-linear-gradient(0deg,rgba(63,232,255,.10) 0 2px,transparent 2px 5px)}
#fx-scan.on{opacity:1}

/* ---------- 通用按钮 ---------- */
.btn{position:relative;padding:13px 22px;border-radius:13px;font-size:15px;font-weight:700;letter-spacing:2.5px;
  color:#dff3ff;background:linear-gradient(180deg,rgba(58,92,180,.9),rgba(24,40,96,.95));
  border:1px solid rgba(120,190,255,.35);
  box-shadow:0 5px 0 rgba(10,20,50,.9),0 12px 24px rgba(0,0,0,.45),inset 0 1px 0 rgba(180,225,255,.25);
  transition:transform .09s,box-shadow .09s,filter .15s}
.btn:hover{filter:brightness(1.16)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(10,20,50,.9),0 6px 12px rgba(0,0,0,.4)}
.btn.primary{color:#04222b;background:linear-gradient(180deg,#8ff6ff,#2fd0e8 55%,#12a3bd);
  border-color:rgba(200,250,255,.6);box-shadow:0 5px 0 #0a6577,0 12px 26px rgba(20,200,230,.28),inset 0 1px 0 rgba(255,255,255,.6)}
.btn.primary:active{box-shadow:0 1px 0 #0a6577,0 6px 12px rgba(0,0,0,.4)}
.btn.small{padding:8px 15px;font-size:13px;letter-spacing:1px;border-radius:10px}
.btn:disabled{filter:grayscale(.75) brightness(.6);cursor:not-allowed}

/* ---------- 加载 ---------- */
#loader{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 40%,#182a6e 0%,#0a1030 45%,#04050e 100%);transition:opacity .7s}
#loader.out{opacity:0;pointer-events:none}
.ldr-inner{text-align:center;width:min(560px,88vw)}
.helix{position:relative;height:110px;margin-bottom:14px}
.helix i{position:absolute;top:50%;left:50%;width:13px;height:13px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 14px var(--cyan);animation:hx 2.4s linear infinite}
.helix i:nth-child(even){background:var(--violet);box-shadow:0 0 14px var(--violet)}
.helix i:nth-child(1){animation-delay:0s}   .helix i:nth-child(2){animation-delay:-.2s}
.helix i:nth-child(3){animation-delay:-.4s} .helix i:nth-child(4){animation-delay:-.6s}
.helix i:nth-child(5){animation-delay:-.8s} .helix i:nth-child(6){animation-delay:-1s}
.helix i:nth-child(7){animation-delay:-1.2s}.helix i:nth-child(8){animation-delay:-1.4s}
.helix i:nth-child(9){animation-delay:-1.6s}.helix i:nth-child(10){animation-delay:-1.8s}
.helix i:nth-child(11){animation-delay:-2s} .helix i:nth-child(12){animation-delay:-2.2s}
@keyframes hx{
  0%{transform:translate(-140px,-50%) scale(.5);opacity:.25}
  25%{transform:translate(-70px,-140%) scale(1);opacity:1}
  50%{transform:translate(0,-50%) scale(.5);opacity:.25}
  75%{transform:translate(70px,40%) scale(1);opacity:1}
  100%{transform:translate(140px,-50%) scale(.5);opacity:.25}}
.ldr-title{font-size:56px;font-weight:900;letter-spacing:18px;
  background:linear-gradient(180deg,#eafcff,#3fe8ff 55%,#a56cff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 24px rgba(63,232,255,.4))}
.ldr-sub{margin-top:8px;font-size:13px;letter-spacing:6px;color:var(--dim)}
.ldr-bar{margin:26px auto 10px;height:10px;border-radius:20px;background:rgba(0,0,0,.5);overflow:hidden;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.7),0 0 0 1px rgba(120,200,255,.3)}
.ldr-bar i{display:block;height:100%;width:2%;border-radius:20px;transition:width .3s;
  background:linear-gradient(90deg,var(--violet),var(--cyan),var(--lime));box-shadow:0 0 16px var(--cyan)}
.ldr-text{font-size:13px;letter-spacing:2px;color:var(--dim)}

/* ---------- 覆盖层 ---------- */
.overlay{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  background:rgba(4,6,18,.74);backdrop-filter:blur(8px)}

/* ---------- 主菜单 ---------- */
#menu{background:radial-gradient(ellipse at 50% 20%,#1d2f78 0%,#0a1030 45%,#04050e 100%)}
.menu-bg{position:absolute;inset:0;pointer-events:none;opacity:.6;
  background:
   radial-gradient(2px 2px at 12% 22%,#fff,transparent),
   radial-gradient(1.6px 1.6px at 78% 16%,#cfe,transparent),
   radial-gradient(2px 2px at 34% 72%,#fff,transparent),
   radial-gradient(1.4px 1.4px at 62% 58%,#bdf,transparent),
   radial-gradient(2.4px 2.4px at 88% 78%,#fff,transparent),
   radial-gradient(1.6px 1.6px at 22% 46%,#eef,transparent),
   radial-gradient(ellipse at 70% 30%,rgba(165,108,255,.20),transparent 60%),
   radial-gradient(ellipse at 25% 70%,rgba(63,232,255,.16),transparent 60%);
  animation:twinkle 7s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.45}to{opacity:.8}}
.menu-card{position:relative;z-index:3;text-align:center;padding:12px 22px}
.big-logo{font-size:84px;font-weight:900;letter-spacing:22px;line-height:1;
  background:linear-gradient(180deg,#f2fdff,#3fe8ff 50%,#a56cff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 8px 30px rgba(63,232,255,.45))}
.big-sub{margin-top:10px;font-size:14px;letter-spacing:8px;color:var(--dim)}
.stage-strip{display:flex;align-items:center;justify-content:center;gap:10px;margin:28px 0 8px}
.sst{width:74px;padding:10px 4px;border-radius:14px;background:var(--glass2);
  border:1px solid rgba(120,190,255,.22)}
.sst b{display:block;font-size:26px}
.sst span{display:block;font-size:11.5px;letter-spacing:2px;color:var(--dim);margin-top:3px}
.sarrow{color:var(--cyan);font-size:20px;opacity:.7}
.menu-btns{margin-top:26px;display:flex;flex-direction:column;gap:12px;width:330px;margin-left:auto;margin-right:auto}
.menu-foot{margin-top:26px;font-size:12px;letter-spacing:1px;color:var(--dim);opacity:.7}

.guide{position:absolute;z-index:6;width:min(820px,93vw);max-height:86vh;overflow:auto;
  padding:26px 28px 22px;border-radius:20px;background:var(--glass);
  border:1px solid rgba(120,200,255,.32);box-shadow:var(--shadow);text-align:center}
.guide h3{font-size:20px;letter-spacing:6px;margin-bottom:18px;color:var(--cyan)}
.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:13px;line-height:1.75;text-align:left}
.guide-grid>div{padding:11px 13px;border-radius:12px;background:rgba(8,16,44,.6);
  border:1px solid rgba(120,190,255,.14)}
.guide-grid b{color:var(--amber);margin-right:6px}
.guide-grid .gtip{grid-column:1/-1;border-color:rgba(140,240,90,.3)}
.guide .btn{margin-top:18px}
.skip-grid{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.skip-note{margin-top:14px;font-size:12px;color:var(--dim)}

/* ---------- HUD ---------- */
#crosshair{position:fixed;left:50%;top:50%;translate:-50% -50%;z-index:12;pointer-events:none}
#crosshair i{display:block;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.9);
  box-shadow:0 0 8px rgba(0,0,0,.9),0 0 14px var(--cyan)}
#crosshair.hide{display:none}

#topbar{position:fixed;left:50%;top:14px;translate:-50% 0;z-index:11;display:flex;align-items:center;gap:12px;
  padding:8px 14px;border-radius:16px;background:var(--glass);border:1px solid rgba(120,200,255,.24);
  box-shadow:0 10px 26px rgba(0,0,0,.45)}
.stage-badge{display:flex;align-items:center;gap:8px;padding:4px 12px;border-radius:11px;
  background:linear-gradient(180deg,rgba(165,108,255,.35),rgba(60,30,120,.4));
  border:1px solid rgba(190,150,255,.4)}
.stage-badge b{font-size:20px}
.stage-badge span{font-size:13px;font-weight:700;letter-spacing:2px}
.res{display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:11px;background:rgba(6,14,38,.7);
  border:1px solid rgba(120,200,255,.2);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.res b{font-size:16px}
#res-dna span{color:var(--cyan)}
#res-money span{color:var(--amber)}
.progwrap{display:flex;flex-direction:column;gap:4px;min-width:190px}
.prog{height:12px;border-radius:8px;background:rgba(0,0,0,.55);overflow:hidden;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.7),0 0 0 1px rgba(120,200,255,.22)}
.prog i{display:block;height:100%;width:0;border-radius:8px;transition:width .4s;
  background:linear-gradient(90deg,var(--violet),var(--cyan),var(--lime));box-shadow:0 0 12px var(--cyan)}
#prog-label{font-size:10.5px;letter-spacing:2px;color:var(--dim);text-align:center}

#objective{position:fixed;left:20px;top:18px;z-index:11;width:268px;padding:12px 14px;border-radius:14px;
  background:var(--glass);border:1px solid rgba(120,200,255,.2);box-shadow:0 8px 22px rgba(0,0,0,.4)}
.obj-t{font-size:11px;letter-spacing:3px;color:var(--amber);margin-bottom:6px}
.obj-b{font-size:12.8px;line-height:1.65;color:#dceaff}
.obj-b b{color:var(--cyan)}

#bars{position:fixed;left:20px;bottom:104px;z-index:11;display:flex;flex-direction:column;gap:7px}
.barrow{display:flex;align-items:center;gap:8px}
.barrow .bl{width:52px;font-size:11px;color:var(--dim);text-align:right}
.barrow .bb{width:170px;height:12px;border-radius:7px;background:rgba(3,8,24,.8);overflow:hidden;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.7),0 0 0 1px rgba(120,200,255,.16)}
.barrow .bb i{display:block;height:100%;border-radius:7px;transition:width .25s}
.barrow .bn{font-size:11px;color:var(--dim);width:52px;font-variant-numeric:tabular-nums}

#stage-hud{position:fixed;right:18px;top:78px;z-index:11;width:284px;max-height:64vh;overflow:auto;
  display:flex;flex-direction:column;gap:9px}
#stage-hud::-webkit-scrollbar{width:7px}
#stage-hud::-webkit-scrollbar-thumb{background:rgba(120,200,255,.3);border-radius:7px}
.card{padding:11px 13px;border-radius:13px;background:var(--glass);border:1px solid rgba(120,200,255,.18);
  box-shadow:0 6px 18px rgba(0,0,0,.36);font-size:12.4px;line-height:1.6}
.card h4{font-size:11.5px;letter-spacing:2.5px;color:var(--cyan);margin-bottom:7px;font-weight:700}
.card .kv{display:flex;justify-content:space-between;gap:8px;padding:2px 0}
.card .kv b{color:var(--ink)}
.card .row{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.chip{font-size:11px;padding:3px 9px;border-radius:8px;background:rgba(63,232,255,.14);
  border:1px solid rgba(63,232,255,.3);color:#d6f6ff}
.chip.bad{background:rgba(255,95,143,.15);border-color:rgba(255,95,143,.35);color:#ffd0dd}
.chip.good{background:rgba(140,240,90,.14);border-color:rgba(140,240,90,.34);color:#e0ffd0}
.chip.warn{background:rgba(255,201,77,.14);border-color:rgba(255,201,77,.34);color:#fff0cc}
.card .mini{height:8px;border-radius:5px;background:rgba(0,0,0,.5);overflow:hidden;margin-top:4px}
.card .mini i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--lime))}
.card button{font-size:11.5px;padding:5px 10px;border-radius:9px;background:rgba(58,92,180,.55);
  border:1px solid rgba(120,190,255,.3);color:#dff3ff;margin:2px 3px 0 0}
.card button:hover{background:rgba(90,140,240,.7)}
.card button:disabled{filter:grayscale(.7) brightness(.6);cursor:not-allowed}

#actions{position:fixed;left:50%;bottom:18px;translate:-50% 0;z-index:11;display:flex;gap:9px}
.act{position:relative;min-width:82px;padding:9px 12px 8px;border-radius:13px;text-align:center;cursor:pointer;
  background:linear-gradient(180deg,rgba(30,54,120,.9),rgba(10,20,52,.92));
  border:1.5px solid rgba(120,200,255,.28);box-shadow:0 7px 18px rgba(0,0,0,.5);transition:.13s}
.act:hover{transform:translateY(-4px);border-color:var(--cyan);box-shadow:0 12px 24px rgba(0,0,0,.55)}
.act.on{border-color:var(--lime);box-shadow:0 0 0 3px rgba(140,240,90,.2),0 8px 20px rgba(0,0,0,.5)}
.act.off{filter:grayscale(.8) brightness(.6);cursor:not-allowed}
.act .k{position:absolute;left:6px;top:3px;font-size:10px;color:var(--amber);font-weight:800}
.act .ico{font-size:22px;line-height:1.1}
.act .lb{font-size:11.5px;margin-top:2px;letter-spacing:1px}
.act .ds{position:absolute;bottom:110%;left:50%;translate:-50% 0;width:190px;padding:8px 10px;border-radius:10px;
  font-size:11.5px;line-height:1.55;background:rgba(6,12,32,.96);border:1px solid rgba(120,200,255,.3);
  opacity:0;pointer-events:none;transition:.15s;color:#cfe6ff}
.act:hover .ds{opacity:1}

#toasts{position:fixed;right:20px;bottom:22px;z-index:14;display:flex;flex-direction:column;gap:7px;align-items:flex-end}
.toast{display:flex;align-items:center;gap:9px;padding:9px 14px;border-radius:12px;font-size:13px;
  background:var(--glass);border-left:3px solid var(--cyan);box-shadow:0 8px 20px rgba(0,0,0,.5);
  animation:tin .3s cubic-bezier(.2,1.4,.4,1);max-width:330px}
.toast.good{border-left-color:var(--lime)}
.toast.bad{border-left-color:var(--rose)}
.toast.warn{border-left-color:var(--amber)}
.toast.out{animation:tout .3s forwards}
@keyframes tin{from{opacity:0;transform:translateX(46px)}to{opacity:1;transform:none}}
@keyframes tout{to{opacity:0;transform:translateX(40px)}}

#floaters{position:fixed;inset:0;z-index:13;pointer-events:none}
.float{position:absolute;font-size:15px;font-weight:800;text-shadow:0 2px 6px #000;
  animation:fup 1.1s ease-out forwards}
.float.dmg{color:#ff8fa8}.float.heal{color:#9cf78a}.float.dna{color:var(--cyan)}.float.money{color:var(--amber)}
@keyframes fup{0%{opacity:0;transform:translateY(0) scale(.7)}
  20%{opacity:1;transform:translateY(-10px) scale(1.1)}
  100%{opacity:0;transform:translateY(-52px) scale(1)}}

/* ---------- 对话框 ---------- */
.dlg{width:min(560px,93vw);max-height:88vh;overflow:auto;padding:26px 26px 22px;border-radius:20px;text-align:center;
  background:linear-gradient(180deg,rgba(18,32,78,.97),rgba(6,12,32,.98));
  border:1.5px solid rgba(120,200,255,.34);box-shadow:var(--shadow)}
.dlg-t{font-size:22px;letter-spacing:6px;color:var(--cyan);margin-bottom:14px}
.dlg-b{font-size:13.5px;line-height:1.8;color:#dceaff;text-align:left;margin-bottom:18px}
.dlg-b b{color:var(--amber)}
.dlg-btns{display:flex;flex-direction:column;gap:10px}
.dlg.dead .dlg-t{color:var(--rose)}
.pause-sliders{display:flex;flex-direction:column;gap:8px;font-size:12px;text-align:left;margin-bottom:16px;color:var(--dim)}
.pause-sliders label{display:flex;align-items:center;gap:10px}
.pause-sliders input{flex:1}
.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.statgrid div{padding:7px 10px;border-radius:9px;background:rgba(6,14,38,.7);font-size:12.5px}
.statgrid b{color:var(--cyan);float:right}

/* ---------- 阶段过渡 ---------- */
#panel-stage{background:radial-gradient(ellipse at 50% 45%,rgba(40,70,170,.9),rgba(4,6,18,.97) 70%)}
.stg{text-align:center;animation:stgIn .8s cubic-bezier(.2,1.2,.3,1)}
@keyframes stgIn{from{opacity:0;transform:scale(.9)}to{opacity:1}}
.stg-ico{font-size:96px;filter:drop-shadow(0 0 40px var(--cyan))}
.stg-name{font-size:40px;font-weight:900;letter-spacing:14px;margin-top:8px;
  background:linear-gradient(180deg,#f2fdff,#3fe8ff 55%,#a56cff);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.stg-desc{margin:16px auto 26px;max-width:540px;font-size:14px;line-height:1.9;color:#cfe4ff;text-align:left;
  padding:16px 20px;border-radius:14px;background:rgba(8,16,44,.7);border:1px solid rgba(120,200,255,.22)}
.stg-desc b{color:var(--amber)}

/* ==========================================================================
   生物编辑器
   ========================================================================== */
#panel-editor{position:fixed;inset:0;z-index:70;pointer-events:none}
#panel-editor.hidden{display:none}
#panel-editor>*{pointer-events:auto}
.ed-top{position:absolute;left:50%;top:14px;translate:-50% 0;display:flex;align-items:center;gap:18px;
  padding:10px 18px;border-radius:16px;background:var(--glass);border:1px solid rgba(120,200,255,.3);
  box-shadow:0 10px 26px rgba(0,0,0,.5)}
.ed-title b{font-size:17px;letter-spacing:3px;color:var(--cyan)}
.ed-title span{display:block;font-size:11.5px;color:var(--dim);margin-top:2px}
.ed-dna{font-size:13px;color:var(--dim)}
.ed-dna b{color:var(--cyan);font-size:17px;margin-left:5px;font-variant-numeric:tabular-nums}

.ed-left{position:absolute;left:16px;top:88px;bottom:56px;width:262px;display:flex;flex-direction:column;gap:9px}
.ed-cats{display:flex;gap:5px;flex-wrap:wrap}
.ed-cats button{padding:6px 11px;border-radius:9px;font-size:11.5px;background:rgba(10,20,50,.8);
  border:1px solid rgba(120,200,255,.2);color:var(--dim)}
.ed-cats button.on{background:linear-gradient(180deg,#8ff6ff,#2fd0e8);color:#04222b;font-weight:800;border-color:#bff}
.ed-parts{flex:1;overflow:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start;
  padding:10px;border-radius:14px;background:var(--glass);border:1px solid rgba(120,200,255,.18)}
.ed-parts::-webkit-scrollbar{width:7px}
.ed-parts::-webkit-scrollbar-thumb{background:rgba(120,200,255,.3);border-radius:7px}
.pcell{position:relative;padding:9px 6px 7px;border-radius:11px;text-align:center;cursor:pointer;
  background:linear-gradient(180deg,rgba(30,54,120,.75),rgba(8,16,44,.9));
  border:1.5px solid rgba(120,200,255,.16);transition:.13s}
.pcell:hover{transform:translateY(-3px);border-color:var(--cyan);box-shadow:0 8px 16px rgba(0,0,0,.5)}
.pcell.no{filter:grayscale(.8) brightness(.6)}
.pcell .pi{font-size:24px}
.pcell .pn{font-size:11px;margin-top:3px}
.pcell .pc{font-size:10.5px;color:var(--cyan);margin-top:2px}
.pcell .pt{position:absolute;left:104%;top:0;width:210px;padding:9px 11px;border-radius:10px;z-index:5;
  font-size:11.5px;line-height:1.6;text-align:left;background:rgba(6,12,32,.97);
  border:1px solid rgba(120,200,255,.3);opacity:0;pointer-events:none;transition:.15s}
.pcell:hover .pt{opacity:1}
.pt em{color:var(--lime);font-style:normal}

.ed-right{position:absolute;right:16px;top:88px;bottom:56px;width:272px;overflow:auto;
  display:flex;flex-direction:column;gap:9px}
.ed-right::-webkit-scrollbar{width:7px}
.ed-right::-webkit-scrollbar-thumb{background:rgba(120,200,255,.3);border-radius:7px}
.ed-card{padding:11px 13px;border-radius:13px;background:var(--glass);border:1px solid rgba(120,200,255,.18)}
.ed-ct{font-size:11px;letter-spacing:3px;color:var(--cyan);margin-bottom:8px}
.ed-row{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--dim);margin-bottom:6px}
.ed-row span{width:34px}
.ed-row input{flex:1}
.ed-pats{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap}
.ed-pats button{padding:4px 9px;border-radius:8px;font-size:11px;background:rgba(10,20,50,.8);
  border:1px solid rgba(120,200,255,.2);color:var(--dim)}
.ed-pats button.on{background:var(--violet);color:#fff;border-color:#d5b8ff}
.abrow{display:flex;align-items:center;gap:7px;margin-bottom:5px;font-size:11.5px}
.abrow .an{width:34px;color:var(--dim)}
.abpips{display:flex;gap:3px}
.abpips i{width:13px;height:9px;border-radius:3px;background:rgba(255,255,255,.14)}
.abpips i.on{background:linear-gradient(90deg,var(--cyan),var(--lime));box-shadow:0 0 7px rgba(63,232,255,.6)}
.abpips i.soc.on{background:linear-gradient(90deg,var(--violet),var(--rose));box-shadow:0 0 7px rgba(165,108,255,.6)}
.stline{display:flex;justify-content:space-between;font-size:11.5px;padding:2px 0;color:var(--dim)}
.stline b{color:var(--ink)}
.ed-list{display:flex;flex-wrap:wrap;gap:5px}
.ed-list span{font-size:11px;padding:3px 8px;border-radius:8px;cursor:pointer;
  background:rgba(63,232,255,.13);border:1px solid rgba(63,232,255,.3)}
.ed-list span:hover{background:rgba(255,95,143,.3);border-color:var(--rose)}
.ed-hint{position:absolute;left:50%;bottom:14px;translate:-50% 0;font-size:11.5px;color:var(--dim);
  padding:6px 16px;border-radius:10px;background:rgba(6,12,32,.7)}

@media (max-width:1100px){
  .ed-left,.ed-right{width:220px}
  .guide-grid{grid-template-columns:1fr}
  .big-logo{font-size:56px;letter-spacing:12px}
  #stage-hud{width:230px}
}