:root{
  --bg:#060a16; --bg2:#0b1226;
  --panel:rgba(13,20,40,.62);
  --line:rgba(126,164,255,.14);
  --line2:rgba(134,176,255,.28);
  --cyan:#3fe0ff; --violet:#a78bfa; --pink:#f472b6; --amber:#fbbf24; --green:#3ef0b3;
  --text:#c6d4ee; --dim:#7686a6; --hi:#eef6ff;
  --cR:#ff5d73; --cG:#34f5c5; --cB:#4da6ff; --cW:#e6f0ff;
  --grad-hot:linear-gradient(92deg,#3fe0ff,#6fc8ff 46%,#a78bfa);
  --font-num:'Orbitron','Noto Sans SC',system-ui,sans-serif;
  --font-body:'Noto Sans SC',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{min-height:100%}
body{
  background:
    radial-gradient(1100px 640px at 14% -12%,rgba(24,54,110,.55) 0%,transparent 60%),
    radial-gradient(900px 560px at 96% 112%,rgba(84,52,158,.42) 0%,transparent 58%),
    radial-gradient(700px 420px at 78% -6%,rgba(20,88,110,.30) 0%,transparent 55%),
    var(--bg);
  color:var(--text);font-family:var(--font-body);overflow-x:hidden;
}
#bg{position:fixed;inset:0;z-index:0;pointer-events:none}
#app{position:relative;z-index:1;display:flex;flex-direction:column;min-height:100vh;max-width:1300px;margin:0 auto;padding:14px 18px 22px;gap:12px}
.panel,.navBtn,.opBtn,.poolItem,.lvCell,#settle,#toast,#selInfo{
  border:1px solid transparent;
  background:linear-gradient(var(--panel),var(--panel)) padding-box,
             linear-gradient(160deg,rgba(126,196,255,.34),rgba(126,164,255,.07) 42%,rgba(167,139,250,.22)) border-box;
}
#hud{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:10px 18px;border:1px solid transparent;border-radius:16px;
  background:linear-gradient(rgba(11,17,34,.72),rgba(11,17,34,.72)) padding-box,
             linear-gradient(120deg,rgba(63,224,255,.4),rgba(126,164,255,.08) 40%,rgba(167,139,250,.34)) border-box;
  box-shadow:0 12px 34px rgba(2,6,18,.5),inset 0 1px 0 rgba(255,255,255,.05);
}
#logo{display:flex;align-items:center;gap:11px;min-width:0}
#logoMark{width:36px;height:36px;flex:none;filter:drop-shadow(0 0 8px rgba(63,224,255,.55))}
#logoText{line-height:1.15;min-width:0}
#logoText .logoName{font-family:var(--font-num);font-size:17px;font-weight:900;letter-spacing:.16em;white-space:nowrap;
  background:linear-gradient(92deg,#eef6ff,#9fdcff 55%,#c4b5fd);-webkit-background-clip:text;background-clip:text;color:transparent}
#logoText .logoSub{font-size:10px;color:var(--dim);letter-spacing:.3em;white-space:nowrap;margin-top:2px}
#nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.navBtn{
  font-family:var(--font-num);font-size:12px;letter-spacing:.08em;color:var(--cyan);
  border-radius:10px;padding:8px 14px;cursor:pointer;transition:all .18s ease;
}
.navBtn:hover{box-shadow:0 0 14px rgba(63,224,255,.35);border-color:rgba(63,224,255,.7);color:var(--hi);transform:translateY(-1px)}
.navBtn:active{transform:translateY(0)}
.navBtn:disabled{opacity:.3;cursor:not-allowed;box-shadow:none;transform:none}
#levelTag{
  font-family:var(--font-num);font-size:13px;color:var(--hi);letter-spacing:.05em;white-space:nowrap;
  display:flex;align-items:center;gap:9px;
  padding:7px 14px;border-radius:11px;
  background:rgba(9,14,30,.55);border:1px solid var(--line2);
}
#levelTag .lv{color:var(--cyan);font-weight:700;padding-right:9px;border-right:1px solid var(--line2)}
#lvNum{color:#9fdcff;font-weight:700}
#lvName{font-family:var(--font-body);font-size:12px;color:var(--text);letter-spacing:.06em}
#stars{display:flex;gap:3px;align-items:center}
#stars svg{width:16px;height:16px;filter:drop-shadow(0 0 4px rgba(251,191,36,.5))}
#hudRight{display:flex;align-items:center;gap:0;font-family:var(--font-num)}
.hudStat{display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1.2;padding:0 16px;border-left:1px solid var(--line)}
.hudStat:first-child{border-left:none}
.hudStat b{font-size:14px;color:var(--cyan);letter-spacing:.04em}
.hudStat span{font-size:9px;color:var(--dim);letter-spacing:.22em}
#btnQuality{margin-left:14px;padding:7px 11px;font-size:11px;letter-spacing:.04em;white-space:nowrap}
@media(max-width:1180px){#hudRight .hudStat{padding:0 9px}#btnQuality{margin-left:8px;padding:6px 8px;font-size:10px}}
#main{display:flex;gap:12px;align-items:flex-start;flex:1}
#leftPanel{flex:0 0 258px;display:flex;flex-direction:column;gap:12px;min-width:0;justify-content:flex-start}
#boardPanel{
  flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  border:1px solid transparent;border-radius:20px;
  background:linear-gradient(rgba(10,15,30,.58),rgba(10,15,30,.58)) padding-box,
             linear-gradient(160deg,rgba(126,196,255,.3),rgba(126,164,255,.06) 45%,rgba(167,139,250,.26)) border-box;
  box-shadow:0 14px 40px rgba(2,6,18,.5),inset 0 1px 0 rgba(255,255,255,.04);
  padding:10px 16px 16px;min-width:0;gap:12px;
}
#boardWrap{position:relative;width:100%;max-width:760px;display:flex;justify-content:center;flex:none}
#poolPanel{width:100%;max-width:760px;flex:none}
#opsPanel{width:100%;flex:none}
canvas#board{display:block;width:100%;height:auto;touch-action:manipulation;cursor:crosshair;border-radius:10px}
#boardScan{position:absolute;inset:0;pointer-events:none;opacity:.4;
  background:linear-gradient(180deg,transparent 0%,rgba(63,224,255,.05) 46%,rgba(167,139,250,.09) 50%,rgba(63,224,255,.05) 54%,transparent 100%);
  background-size:100% 280%;animation:scan 11s linear infinite;border-radius:10px}
@keyframes scan{0%{background-position:0 0}100%{background-position:0 280%}}
#rightPanel{flex:0 0 280px;display:flex;flex-direction:column;gap:12px;min-width:0}
#main.colFit #leftPanel>.panel,#main.colFit #rightPanel>.panel{display:flex;flex-direction:column;flex:none}
#main.colFit #leftPanel>.panel>h2,#main.colFit #rightPanel>.panel>h2{flex:none}
#main.colFit #helpBox.show{max-height:none;flex:1 1 auto;min-height:0}
#main.colFit #levelList{max-height:none;flex:1 1 auto;min-height:0}
.panel{
  border-radius:16px;backdrop-filter:blur(8px);padding:14px 14px 16px;
  box-shadow:0 10px 28px rgba(2,6,18,.4),inset 0 1px 0 rgba(255,255,255,.045);
}
.panel h2{
  font-family:var(--font-num);font-size:11px;font-weight:700;letter-spacing:.26em;color:var(--cyan);
  margin-bottom:11px;padding-bottom:9px;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:baseline;
}
.panel h2::before{content:"";width:4px;height:12px;border-radius:2px;margin-right:9px;align-self:center;
  background:var(--grad-hot);box-shadow:0 0 8px rgba(63,224,255,.7);flex:none}
.panel h2 span:first-child{flex:1}
.panel h2 .aux{font-family:var(--font-body);font-weight:400;font-size:10px;color:var(--dim);letter-spacing:.08em}
#objText{font-size:13px;line-height:1.8;color:var(--text)}
#objText b{color:var(--hi)}
#objText .goal{color:var(--amber)}
#objProg{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
#objProg:empty{display:none}
#objProg .pgLbl{font-size:10px;letter-spacing:.22em;color:var(--dim)}
#objProg .pg{
  display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;
  border:1px solid var(--c);background:rgba(9,15,28,.55);
  font-family:var(--font-num);font-size:12px;color:var(--dim);
}
#objProg .pg i{width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
#objProg .pg b{color:var(--hi);font-weight:600}
#objProg .pg.on{border-color:transparent;background:var(--c)}
#objProg .pg.on i{background:rgba(4,16,30,.85);box-shadow:none}
#objProg .pg.on b{color:#04101e}
#objProg .pg.z{border-color:rgba(148,163,184,.45)}
#objProg .pg.z i{background:rgba(148,163,184,.6);box-shadow:none}
#objProg .pg.z b{color:var(--dim)}
#objProg .pg.wait{border-style:dashed;border-color:rgba(251,191,36,.8);background:rgba(251,191,36,.13)}
#objProg .pg.wait i{background:var(--amber);box-shadow:0 0 8px rgba(251,191,36,.9)}
#objProg .pg.wait b{color:var(--amber)}
#objProg .pg .ord{font-style:normal;color:var(--c);margin-right:1px}
#hintLine{font-size:11px;color:var(--dim);line-height:1.65;margin-top:9px;min-height:2.2em;
  padding:8px 10px;border-radius:9px;background:rgba(9,14,30,.5);border:1px solid var(--line)}
#hintLine .ok{color:var(--green)}
#hintLine .warn{color:var(--amber)}
#pool{display:flex;flex-wrap:wrap;gap:9px;min-height:44px}
.poolItem{
  position:relative;border-radius:13px;height:84px;width:74px;flex:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease;
  touch-action:none;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
}
.poolItem img,.poolItem canvas{-webkit-user-drag:none;user-drag:none}
.poolItem.dragging{opacity:.4;transform:scale(.94)}
.poolItem.dragging::after{content:"";position:absolute;inset:0;border-radius:13px;
  border:1px dashed rgba(63,224,255,.7);pointer-events:none}
#dragGhost{
  position:fixed;left:0;top:0;z-index:70;display:none;pointer-events:none;
  filter:drop-shadow(0 8px 20px rgba(3,8,22,.7)) drop-shadow(0 0 10px rgba(63,224,255,.5));
}
#dragGhost.on{display:block}
#dragGhost.bad{opacity:.42}
.poolItem::before{content:"";position:absolute;inset:5px 5px 20px;border-radius:9px;
  background:radial-gradient(70% 62% at 50% 38%,rgba(63,150,255,.16),rgba(10,16,34,.4) 78%);
  pointer-events:none}
.poolItem:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(3,8,22,.55),0 0 14px rgba(63,224,255,.28);border-color:rgba(63,224,255,.55)}
.poolItem.sel{border-color:rgba(167,139,250,.85);box-shadow:0 0 16px rgba(167,139,250,.45);
  background:linear-gradient(rgba(40,32,78,.72),rgba(40,32,78,.72)) padding-box,
             linear-gradient(160deg,rgba(167,139,250,.75),rgba(99,80,200,.28)) border-box}
.poolItem.sel::after{content:"";position:absolute;inset:5px 5px 20px;border-radius:9px;border:1px solid rgba(196,181,253,.5);pointer-events:none}
.poolItem canvas{width:48px;height:48px;pointer-events:none;display:block;position:relative}
.poolItem .pname{font-size:10.5px;color:var(--text);line-height:1.2;font-weight:500;pointer-events:none;letter-spacing:.05em;position:relative}
.poolItem i{
  position:absolute;top:-9px;right:-9px;font-style:normal;font-family:var(--font-num);
  font-size:13px;font-weight:800;line-height:1.15;letter-spacing:.01em;font-variant-numeric:tabular-nums;
  border-radius:10px;padding:3px 9px;white-space:nowrap;pointer-events:none;
}
.poolItem i span{opacity:.7;font-weight:600}
.poolItem i.full{color:#d8e6fd;background:rgba(16,26,50,.96);border:1px solid rgba(126,164,255,.46);box-shadow:none}
.poolItem i.part{color:#1c1206;background:linear-gradient(92deg,#ffd166,#ffa53c);border:1px solid rgba(255,209,102,.9);
  box-shadow:0 2px 10px rgba(251,191,36,.5)}
.poolItem i.last{color:#1c1206;background:linear-gradient(92deg,#ffe49a,#ff9d24);border:1px solid rgba(255,214,110,.95);
  animation:poolLast 1.7s ease-in-out infinite}
@keyframes poolLast{
  0%,100%{box-shadow:0 2px 12px rgba(251,191,36,.55),0 0 0 3px rgba(251,191,36,.18)}
  50%{box-shadow:0 2px 16px rgba(251,191,36,.95),0 0 0 7px rgba(251,191,36,.05)}
}
.poolItem i.out{color:#7e8da8;background:rgba(10,16,32,.94);border:1px solid rgba(126,164,255,.18);
  box-shadow:none;text-decoration:line-through}
.poolItem.lastOne:not(.sel){outline:2px solid rgba(255,209,102,.55);outline-offset:-1px}
.poolItem.out{opacity:.38;filter:saturate(.25);cursor:not-allowed}
.poolItem.out:hover{transform:none;box-shadow:none}
.poolItem.out .pname{color:var(--dim)}
@media (prefers-reduced-motion:reduce){.poolItem i.last{animation:none;box-shadow:0 2px 14px rgba(251,191,36,.8)}}
#poolEmpty{font-size:12px;color:var(--dim);padding:14px 4px;line-height:1.7}
#selInfo{font-size:11px;color:var(--text);line-height:1.7;margin-top:10px;padding:8px 11px 8px 13px;border-radius:10px;position:relative;overflow:hidden;
  white-space:nowrap;text-overflow:ellipsis} 
#selInfo::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad-hot)}
#selInfo b{color:var(--cyan)}
.opHint{font-size:10px;color:var(--dim);margin-top:7px;line-height:1.65;letter-spacing:.02em}
#ops{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.opBtn{
  flex:1 1 104px;
  font-family:var(--font-num);font-size:11px;letter-spacing:.08em;color:var(--text);
  border-radius:10px;padding:10px 4px;cursor:pointer;transition:all .16s ease;text-align:center;
}
.opBtn:hover:not(:disabled){border-color:rgba(63,224,255,.6);color:var(--hi);box-shadow:0 0 12px rgba(63,224,255,.26);transform:translateY(-1px)}
.opBtn:disabled{opacity:.28;cursor:not-allowed}
.opBtn.accent{color:var(--amber);border-color:rgba(251,191,36,.4)}
.opBtn.accent:hover:not(:disabled){border-color:var(--amber);box-shadow:0 0 12px rgba(251,191,36,.3)}
.opBtn.primary{flex:1 1 100%;color:#04101e;background:var(--grad-hot);border:none;font-weight:700;letter-spacing:.14em;padding:11px 4px}
.opBtn.primary:hover:not(:disabled){box-shadow:0 6px 22px rgba(63,224,255,.45);transform:translateY(-1px)}
.opBtn.primary:disabled{opacity:.4}
#levelList{display:flex;flex-direction:column;gap:6px;max-height:268px;overflow-y:auto;padding-right:3px}
.chapHead{
  display:flex;align-items:center;gap:7px;padding:7px 9px;border-radius:9px;cursor:pointer;
  background:rgba(18,30,52,.75);border:1px solid rgba(126,164,255,.14);
  font-size:11px;color:var(--text);transition:all .15s ease;
}
.chapHead:hover{border-color:rgba(63,224,255,.55);color:var(--hi)}
.chapHead.cur{background:var(--grad-hot);border-color:transparent;color:#04101e;font-weight:700}
.chapHead .cw{font-family:var(--font-num);font-size:10px;opacity:.9;flex:0 0 auto}
.chapHead .cn{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chapHead .cp{font-family:var(--font-num);font-size:10px;flex:0 0 auto}
.chapHead .car{font-size:9px;flex:0 0 auto;opacity:.85}
.chapBody{display:none;grid-template-columns:repeat(6,1fr);gap:6px;padding:2px 1px 4px}
.chapBody.open{display:grid}
.lvCell{
  font-family:var(--font-num);font-size:10px;color:var(--dim);text-align:center;padding:7px 0;
  border-radius:8px;cursor:pointer;transition:all .15s ease;line-height:1.4;
}
.lvCell:hover{border-color:rgba(63,224,255,.6);color:var(--hi);transform:translateY(-1px)}
.lvCell.cur{color:#04101e;font-weight:700;background:var(--grad-hot);border-color:transparent;box-shadow:0 4px 14px rgba(63,224,255,.4)}
.lvCell.done{color:var(--green);border-color:rgba(62,240,179,.4)}
.lvCell.locked{opacity:.25;cursor:not-allowed}
#levelList::-webkit-scrollbar{width:6px}
#levelList::-webkit-scrollbar-thumb{background:rgba(126,164,255,.35);border-radius:3px}
#levelList::-webkit-scrollbar-track{background:transparent}
#overlay{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;background:rgba(3,6,14,.8);backdrop-filter:blur(6px)}
#overlay.show{display:flex}
#settle{
  width:min(430px,92vw);border-radius:22px;padding:30px 26px 24px;text-align:center;
  box-shadow:0 30px 80px rgba(2,6,18,.7),0 0 46px rgba(63,224,255,.16);
  animation:pop .38s cubic-bezier(.2,.9,.3,1.25);
}
@keyframes pop{from{transform:scale(.86) translateY(10px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
#settle h3{font-family:var(--font-num);font-size:16px;letter-spacing:.3em;margin-bottom:8px;
  background:var(--grad-hot);-webkit-background-clip:text;background-clip:text;color:transparent}
#settleTitle{font-size:15px;color:var(--hi);margin-bottom:6px;letter-spacing:.06em}
#settleStars{display:flex;justify-content:center;gap:12px;margin:14px 0 12px}
#settleStars svg{width:46px;height:46px;filter:drop-shadow(0 0 10px rgba(251,191,36,.55));animation:starPop .5s cubic-bezier(.2,.9,.3,1.4) backwards}
#settleStars svg:nth-child(2){animation-delay:.12s}
#settleStars svg:nth-child(3){animation-delay:.24s}
@keyframes starPop{from{transform:scale(0) rotate(-30deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
#settleStats{font-family:var(--font-num);font-size:12px;color:var(--dim);letter-spacing:.06em;margin-bottom:20px}
#settleStats b{color:var(--cyan)}
#settleBtns{display:flex;gap:10px;justify-content:center}
#settleBtns button{
  font-family:var(--font-num);font-size:12px;letter-spacing:.1em;padding:11px 22px;border-radius:11px;cursor:pointer;
  color:var(--text);transition:all .16s ease;
  background:linear-gradient(rgba(16,24,48,.85),rgba(16,24,48,.85)) padding-box,
             linear-gradient(160deg,rgba(126,196,255,.35),rgba(126,164,255,.08) 45%,rgba(167,139,250,.25)) border-box;
}
#settleBtns button:hover{border-color:rgba(63,224,255,.6);color:var(--hi);box-shadow:0 0 14px rgba(63,224,255,.32);transform:translateY(-1px)}
#settleBtns button.primary{color:#04101e;background:var(--grad-hot);border:none;font-weight:700}
#settleBtns button.primary:hover{box-shadow:0 6px 22px rgba(63,224,255,.45)}
#toast{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);z-index:60;
  color:var(--hi);font-size:12.5px;letter-spacing:.03em;
  padding:11px 20px 11px 16px;border-radius:12px;opacity:0;pointer-events:none;transition:all .25s ease;
  box-shadow:0 12px 32px rgba(2,6,18,.6);max-width:86vw;
}
#toast::before{content:"";display:inline-block;width:3px;height:12px;border-radius:2px;margin-right:9px;vertical-align:-1px;background:var(--grad-hot)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#selfcheck{font-family:var(--font-num);font-size:10px;letter-spacing:.08em}
#helpBox{display:none;padding:0 2px;font-size:12px;line-height:1.8;color:var(--dim)}
#helpBox ul{padding-left:2px;margin:0;list-style:none}
#helpBox li{display:flex;align-items:center;gap:8px;margin:0;padding:7px 2px;border-bottom:1px solid rgba(126,164,255,.1)}
#helpBox li:last-child{border-bottom:none}
#helpBox li span{flex:1;line-height:1.55}
.mechIcon{width:30px;height:30px;flex:0 0 30px;background:rgba(10,16,34,.8);border:1px solid rgba(126,164,255,.24);border-radius:8px;padding:2px;box-sizing:border-box}
.mechFx{width:46px;height:34px;flex:0 0 46px;background:rgba(6,12,26,.85);border:1px solid rgba(126,164,255,.16);border-radius:7px;padding:2px;box-sizing:border-box}
#helpBox b{color:var(--text)}
#helpBox.show{display:block;max-height:min(48vh,430px);overflow-y:auto;
  overscroll-behavior:contain;padding-inline-end:6px;scrollbar-width:thin}
#helpBox.show::-webkit-scrollbar{width:6px}
#helpBox.show::-webkit-scrollbar-thumb{background:rgba(126,164,255,.26);border-radius:3px}
#helpBox.show::-webkit-scrollbar-track{background:transparent}
#helpToggle{cursor:pointer}
@media (max-width:960px){
  #main{flex-direction:column;align-items:stretch}
  #leftPanel,#rightPanel{flex:none;width:100%}
  #boardPanel{order:-1}
  #levelList{max-height:300px}
  .chapBody{grid-template-columns:repeat(10,1fr)}
}
@media (max-width:560px){
  #app{padding:8px}
  #hud{padding:8px 12px}
  #logoText .logoName{font-size:13px}
  #logoText .logoSub{font-size:9px}
  #levelTag{font-size:11px;padding:6px 10px}
  .navBtn{padding:6px 9px;font-size:11px}
  .hudStat{padding:0 10px}
  #objText{font-size:12px}
  #pool{grid-template-columns:repeat(auto-fill,66px);gap:7px}
  .poolItem{height:82px}
  #ops{grid-template-columns:repeat(2,1fr)}
  .opBtn.primary{grid-column:span 2}
}
.poolImg{width:48px;height:48px;pointer-events:none;display:block;position:relative}