/* CodePen CSS 栏：迁星棋域 vCC */
:root{
  --bg:#111827;
  --panel:#1f2937;
  --panel2:#0f172a;
  --grid:#243244;
  --grid2:#2c3e55;
  --border:#475569;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --a:#60a5fa;
  --b:#f87171;
  --move:#22c55e;
  --range:#fb7185;
  --skill:#a78bfa;
  --end:#facc15;
  --test:#c084fc;
}

*{box-sizing:border-box}
body{
  margin:0;
  background:linear-gradient(160deg,#0f172a,#111827 55%,#030712);
  color:var(--text);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  min-height:100vh;
}
button{
  border:0;
  border-radius:10px;
  padding:8px 10px;
  background:#334155;
  color:var(--text);
  font-size:14px;
  cursor:pointer;
}
button:active{transform:scale(.98)}
button.primary{background:#0284c7}
button.end{background:#a16207;color:#fff}
button.skill{background:#4c1d95}
button.skill.selected{background:#be185d}
button.test{background:#7e22ce}
button.danger{background:#991b1b}
button.ghost{background:#33415588;border:1px solid #475569}
button:disabled{opacity:.45;cursor:not-allowed}

.app{
  max-width:1100px;
  margin:0 auto;
  padding:10px;
}
.title{
  font-weight:800;
  letter-spacing:.12em;
  text-align:center;
  font-size:22px;
  margin:8px 0 10px;
}
.menu,.panel,.status,.log,.modal{
  background:rgba(31,41,55,.92);
  border:1px solid rgba(71,85,105,.8);
  border-radius:14px;
  box-shadow:0 12px 35px rgba(0,0,0,.25);
}
.menu{
  padding:16px;
}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.col{display:flex;flex-direction:column;gap:8px}
.hint{font-size:12px;color:var(--muted);line-height:1.45}
.h2{font-size:16px;font-weight:700;margin:8px 0}
.small{font-size:12px;color:var(--muted)}
.chars{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.charCard{
  padding:12px;
  border-radius:12px;
  background:#0f172a;
  border:1px solid #334155;
}
.charCard.selectedA{outline:2px solid var(--a)}
.charCard.selectedB{outline:2px solid var(--b)}
.layout{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:10px;
}
.status{
  padding:8px;
  font-size:13px;
  margin-bottom:8px;
}
.boardWrap{
  overflow:auto;
  padding:8px;
  background:rgba(15,23,42,.5);
  border-radius:14px;
  border:1px solid #334155;
}
.board{
  display:grid;
  grid-template-columns:24px repeat(9, minmax(42px, 58px));
  grid-template-rows:24px repeat(9, minmax(42px, 58px));
  gap:3px;
  width:max-content;
  margin:auto;
}
.coord{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#94a3b8;
  font-size:12px;
}
.cell{
  position:relative;
  background:var(--grid);
  border:1px solid #334155;
  border-radius:8px;
  min-width:42px;
  min-height:42px;
  overflow:hidden;
}
.cell.center{background:var(--grid2)}
.cell.move{outline:2px solid var(--move);background:#14532d}
.cell.range{outline:2px solid var(--range);background:#4c1d1d}
.cell.line{outline:2px solid #f59e0b;background:#5b3a12}
.cell.locked{box-shadow:inset 0 0 0 2px #eab308}
.cell.fx-poison{background:linear-gradient(135deg,#243244,#14532d)}
.cell.fx-vortex{background:radial-gradient(circle,#581c87,#243244 65%)}
.cell.fx-frost{background:linear-gradient(135deg,#164e63,#243244)}
.cell.fx-time{background:linear-gradient(135deg,#1e3a8a,#243244)}
.cell.fx-black{background:radial-gradient(circle,#000 0 30%,#243244 70%)}
.cell.fx-aurora{box-shadow:inset 0 0 12px #67e8f9}
.cell.fx-boundary{box-shadow:inset 0 0 0 3px #f0abfc}

.piece{
  position:absolute;
  inset:3px;
  border-radius:8px;
  padding:3px 2px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-size:10px;
  line-height:1.05;
  font-weight:700;
  color:#020617;
  text-shadow:0 1px 0 rgba(255,255,255,.25);
}
.piece.A{background:linear-gradient(135deg,#93c5fd,#38bdf8)}
.piece.B{background:linear-gradient(135deg,#fca5a5,#fb7185)}
.piece.special{background:linear-gradient(135deg,#ddd6fe,#a78bfa)}
.piece.dead{opacity:.25;filter:grayscale(1)}
.piece.selected{outline:3px solid #facc15}
.badge{
  position:absolute;
  right:2px;
  bottom:2px;
  font-size:9px;
  color:#fff;
  background:#0008;
  border-radius:6px;
  padding:1px 3px;
}
.panel{
  padding:10px;
  max-height:78vh;
  overflow:auto;
}
.skillBox{
  background:#0f172a;
  border:1px solid #334155;
  border-radius:12px;
  padding:8px;
  margin:7px 0;
}
.skillName{font-size:14px;font-weight:800}
.skillDesc{font-size:12px;color:#cbd5e1;line-height:1.35;margin-top:4px;white-space:pre-wrap}
.log{
  margin-top:8px;
  padding:8px;
  font-size:12px;
  height:140px;
  overflow:auto;
  color:#cbd5e1;
}
.feedback{
  position:fixed;
  left:50%;
  top:18%;
  transform:translateX(-50%);
  background:rgba(15,23,42,.92);
  border:1px solid #38bdf8;
  border-radius:14px;
  padding:14px 18px;
  font-size:22px;
  font-weight:900;
  z-index:30;
  box-shadow:0 10px 35px rgba(0,0,0,.35);
  pointer-events:none;
  animation:pop 1.2s forwards;
}
@keyframes pop{
  0%{opacity:0;transform:translateX(-50%) scale(.88)}
  12%{opacity:1;transform:translateX(-50%) scale(1)}
  80%{opacity:1}
  100%{opacity:0}
}
.modalShade{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:50;
}
.modal{
  width:min(92vw,520px);
  padding:16px;
}
@media(max-width:860px){
  .layout{grid-template-columns:1fr}
  .panel{max-height:none}
  .board{
    grid-template-columns:20px repeat(9, 42px);
    grid-template-rows:20px repeat(9, 42px);
    gap:2px;
  }
  .cell{min-width:42px;min-height:42px;border-radius:6px}
  .piece{font-size:9px}
}