:root {
  --bg:#10151f; --card:#1a2233; --line:#2a3550;
  --txt:#e8edf7; --dim:#8b96ad; --accent:#fbbf24; --ok:#4ade80; --bad:#f87171;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--bg);color:var(--txt);
  font-family:"Segoe UI","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  min-height:100vh;padding:14px;
  display:flex;align-items:flex-start;justify-content:center;
  user-select:none;
}
#app{width:100%;max-width:1180px}
.back-home{
  position:fixed;top:12px;right:16px;z-index:100;
  background:rgba(20,25,40,.88);color:var(--txt);border:1px solid var(--line);
  border-radius:999px;padding:7px 14px;font-size:13px;text-decoration:none;
  box-shadow:0 4px 14px rgba(0,0,0,.35);transition:background .15s,border-color .15s;
}
.back-home:hover{background:#2c3a5c;border-color:var(--accent)}
h1{font-size:22px;margin-bottom:10px;letter-spacing:1px}
h1 em{color:var(--accent);font-style:normal}
#layout{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start}
#left{flex:0 0 auto}
#boardWrap{
  position:relative;background:#d9b36c;border-radius:12px;padding:10px;
  box-shadow:0 10px 34px rgba(0,0,0,.5);
}
canvas{display:block;width:620px;max-width:92vw;height:auto;aspect-ratio:1/1;border-radius:8px;cursor:pointer;touch-action:none}
#toast{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%) translateY(20px);
  background:rgba(15,20,32,.94);border:1px solid var(--line);color:var(--txt);
  padding:9px 16px;border-radius:10px;font-size:14px;max-width:88%;
  opacity:0;pointer-events:none;transition:.25s;white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,.4);
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#right{flex:1 1 380px;min-width:320px;display:flex;flex-direction:column;gap:12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.card h2{font-size:15px;margin-bottom:8px;color:var(--accent)}
.row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.btn{
  background:#222d47;color:var(--txt);border:1px solid var(--line);
  border-radius:9px;padding:8px 13px;font-size:13.5px;cursor:pointer;
  transition:background .15s,transform .05s;
}
.btn:hover{background:#2c3a5c}
.btn:active{transform:scale(.96)}
.btn.primary{background:var(--accent);color:#2a1d00;border-color:transparent;font-weight:700}
.btn.primary:hover{background:#fcd34d}
.btn:disabled{opacity:.38;cursor:not-allowed}
#status{font-size:14px;font-weight:600;margin-top:8px}
#status b{color:var(--accent)}
#reason{font-size:13px;color:var(--dim);margin-top:4px;min-height:18px}
#josekiList{display:flex;flex-direction:column;gap:6px;margin-top:6px;max-height:260px;overflow-y:auto;padding-right:4px}
#josekiList::-webkit-scrollbar,#terms::-webkit-scrollbar{width:6px}
#josekiList::-webkit-scrollbar-thumb,#terms::-webkit-scrollbar-thumb{background:#2c3a5c;border-radius:3px}
.josekiItem{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  background:#1d2842;border:1px solid var(--line);border-radius:9px;padding:8px 11px;cursor:pointer;
}
.josekiItem:hover{border-color:#3a4a70}
.josekiItem.active{border-color:var(--accent)}
.josekiItem .t{font-size:14px;font-weight:600}
.josekiItem .s{font-size:11.5px;color:var(--dim)}
#demoText{font-size:13px;color:var(--txt);min-height:40px;line-height:1.7;margin-top:8px;background:#141d33;border-radius:8px;padding:8px 10px}
#demoText b{color:var(--accent)}
details{background:#1d2842;border:1px solid var(--line);border-radius:8px;padding:6px 10px;margin-bottom:6px}
details summary{cursor:pointer;font-size:13.5px;font-weight:600;color:var(--txt)}
details[open] summary{color:var(--accent)}
details p{font-size:12.5px;color:var(--dim);line-height:1.7;margin-top:5px}
#terms{max-height:220px;overflow-y:auto;padding-right:4px}
#result{
  display:none;margin-top:8px;background:#141d33;border:1px solid var(--line);
  border-radius:9px;padding:10px 12px;font-size:13.5px;line-height:1.8;
}
#result b{color:var(--ok)}
#result.lose b{color:var(--bad)}
.toggleRow{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--dim)}
input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px}
select{
  background:#222d47;color:var(--txt);border:1px solid var(--line);
  border-radius:8px;padding:6px 8px;font-size:13px;
}
footer{color:var(--dim);font-size:12px;margin-top:14px;text-align:center}
.stone-dot{display:inline-block;width:11px;height:11px;border-radius:50%;vertical-align:-1px;margin-right:3px}
.stone-dot.b{background:#111;box-shadow:0 0 0 1.5px #555}
.stone-dot.w{background:#f4f4f4;box-shadow:0 0 0 1.5px #999}
/* 死活闯关 */
#puzzleBox{display:flex;flex-direction:column;gap:6px}
.puzzleToolbar{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:2px 0}
.puzzleSearch{
  flex:1 1 160px;min-width:120px;background:#141d33;color:var(--txt);
  border:1px solid var(--line);border-radius:8px;padding:7px 9px;font-size:12.5px;outline:none;
}
.puzzleSearch:focus{border-color:var(--accent)}
.puzzleTarget{
  background:#222d47;color:var(--txt);border:1px solid var(--line);
  border-radius:8px;padding:6px 8px;font-size:12.5px;
}
.puzzleList{
  display:flex;flex-direction:column;gap:6px;max-height:340px;overflow-y:auto;
  padding-right:4px;margin-top:2px;
}
.puzzleList::-webkit-scrollbar{width:6px}
.puzzleList::-webkit-scrollbar-thumb{background:#2c3a5c;border-radius:3px}
.puzzleEmpty{font-size:12.5px;color:var(--dim);padding:8px 4px;text-align:center}
.puzzleItem{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  background:#1d2842;border:1px solid var(--line);border-radius:9px;padding:8px 11px;cursor:pointer;
}
.puzzleItem:hover{border-color:#3a4a70}
.puzzleItem.active{border-color:var(--accent)}
.puzzleItem.done{border-color:var(--ok)}
.puzzleItem .t{font-size:13.5px;font-weight:600}
.puzzleItem .s{font-size:11.5px;color:var(--dim)}
#puzzleDesc{font-size:13px;color:var(--txt);line-height:1.7;margin-top:6px;background:#141d33;border-radius:8px;padding:8px 10px}
#puzzleDesc b{color:var(--accent)}
.serverList{display:flex;flex-direction:column;gap:5px;margin-top:8px;max-height:220px;overflow-y:auto}
.serverItem{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  background:#1d2842;border:1px solid var(--line);border-radius:8px;padding:7px 10px;
  font-size:12.5px;
}
.serverItem.me{border-color:var(--accent)}
.serverItem .rank{color:var(--dim);min-width:22px}
.serverItem .name{flex:1;color:var(--txt);font-weight:600}
.serverItem .score{color:var(--ok);font-weight:700}
.puzzleHintText{
  margin-top:8px;padding:7px 9px;border:1px solid var(--line);border-left:3px solid var(--ok);
  background:#122018;border-radius:6px;font-size:12.5px;line-height:1.7;color:var(--txt);
}
.puzzleProgress{font-size:12.5px;color:var(--dim);margin-bottom:2px}
/* 进度条（定式演示 / 闯关通用） */
.bar{background:#2a3550;border-radius:4px;height:6px;overflow:hidden;margin:5px 0}
.bar .fill{background:linear-gradient(90deg,#fbbf24,#4ade80);height:100%;border-radius:4px;transition:width .3s}