:root{
  --neon:#00f0ff; --neonp:#b026ff; --neong:#39ff14; --gold:#ffcc4d;
  --bg0:#05060f; --bg1:#0a0e24; --glass:rgba(20,28,60,.45);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg0);overflow-x:hidden}
body{background:
  radial-gradient(1200px 700px at 80% -10%, rgba(176,38,255,.18), transparent 60%),
  radial-gradient(1000px 700px at 10% 110%, rgba(0,240,255,.16), transparent 60%),
  linear-gradient(180deg,#05060f,#0a0e24 60%,#05060f);
  min-height:100vh;}
#bg-grid{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(0,240,255,.05) 1px,transparent 1px),
  linear-gradient(90deg,rgba(0,240,255,.05) 1px,transparent 1px);
  background-size:44px 44px;mask-image:radial-gradient(circle at 50% 40%,#000 30%,transparent 80%);}

.glass{background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(120,180,255,.18);border-radius:20px;
  box-shadow:0 8px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);}
.neon-text{color:#fff;text-shadow:0 0 8px var(--neon),0 0 20px rgba(0,240,255,.6)}
.neon-p{color:#fff;text-shadow:0 0 8px var(--neonp),0 0 20px rgba(176,38,255,.6)}
.title-glow{background:linear-gradient(90deg,var(--neon),var(--neonp));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 14px rgba(0,240,255,.5));letter-spacing:.15em}

.btn{cursor:pointer;border-radius:14px;padding:.85rem 1.2rem;font-weight:700;transition:.2s;border:1px solid transparent;position:relative;overflow:hidden}
.btn-primary{background:linear-gradient(90deg,rgba(0,240,255,.9),rgba(176,38,255,.9));color:#04121a;box-shadow:0 0 20px rgba(0,240,255,.35)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 34px rgba(0,240,255,.6)}
.btn-ghost{background:rgba(255,255,255,.04);border-color:rgba(120,180,255,.25);color:#cfe8ff}
.btn-ghost:hover{background:rgba(0,240,255,.1);border-color:var(--neon)}
.btn-danger{background:rgba(255,60,90,.15);border-color:rgba(255,60,90,.5);color:#ff9db0}
.btn-danger:hover{background:rgba(255,60,90,.3)}
.input{width:100%;padding:.85rem 1rem;border-radius:12px;background:rgba(4,10,26,.7);border:1px solid rgba(120,180,255,.25);color:#eaf6ff;outline:none}
.input:focus{border-color:var(--neon);box-shadow:0 0 0 3px rgba(0,240,255,.15)}

/* ---------- Board ---------- */
#board-wrap{--cell:min(9.5vw,58px)}
.board{display:grid;grid-template-columns:repeat(9,var(--cell));grid-template-rows:repeat(9,var(--cell));
  background:linear-gradient(135deg,#1a2136,#0d1120);border-radius:12px;padding:6px;gap:2px;
  box-shadow:0 0 0 1px rgba(0,240,255,.25),0 0 40px rgba(0,240,255,.15),inset 0 0 40px rgba(0,0,0,.6)}
.cell{position:relative;display:flex;align-items:center;justify-content:center;
  background:rgba(20,28,55,.55);border-radius:6px;transition:background .15s,box-shadow .15s;cursor:pointer}
.cell:hover{background:rgba(0,240,255,.08)}
.cell.sel{background:rgba(0,240,255,.22);box-shadow:inset 0 0 0 2px var(--neon),0 0 16px rgba(0,240,255,.5)}
.cell.tgt::after{content:"";position:absolute;width:36%;height:36%;border-radius:50%;
  background:radial-gradient(circle,var(--neong),transparent 70%);box-shadow:0 0 14px var(--neong);animation:pulse 1.2s infinite}
.cell.tgt.cap::after{width:100%;height:100%;border-radius:6px;background:transparent;
  box-shadow:inset 0 0 0 3px rgba(255,60,90,.8),0 0 18px rgba(255,60,90,.5);animation:pulse 1s infinite}
.cell.last{box-shadow:inset 0 0 0 2px rgba(255,204,77,.8),0 0 14px rgba(255,204,77,.4)}
.cell.check{box-shadow:inset 0 0 0 3px rgba(255,60,90,.95),0 0 22px rgba(255,60,90,.7);animation:pulse .7s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

.piece{width:86%;height:86%;display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:calc(var(--cell)*.5);line-height:1;user-select:none;
  background:linear-gradient(160deg,#f4e4c1,#d9b878);color:#2a1a05;border-radius:4px;
  clip-path:polygon(50% 3%,88% 22%,100% 100%,0 100%,12% 22%);
  box-shadow:0 3px 6px rgba(0,0,0,.5);transition:transform .18s}
.piece.gote{transform:rotate(180deg);background:linear-gradient(160deg,#c9d6ff,#8ea2d6);color:#0b1330}
.piece.pr{color:#c0102a}
.piece.gote.pr{color:#ff3b5c}
.piece.moving{animation:drop .28s ease}
@keyframes drop{0%{transform:scale(1.4);filter:brightness(1.6)}100%{transform:scale(1)}}
.piece.gote.moving{animation:dropg .28s ease}
@keyframes dropg{0%{transform:rotate(180deg) scale(1.4);filter:brightness(1.6)}100%{transform:rotate(180deg) scale(1)}}

/* captured hand */
.hand{display:flex;flex-wrap:wrap;gap:6px;min-height:52px;align-items:center}
.hand-piece{position:relative;cursor:pointer;display:flex;align-items:center;justify-content:center;
  width:40px;height:44px;font-weight:900;font-size:20px;
  background:linear-gradient(160deg,#f4e4c1,#d9b878);color:#2a1a05;border-radius:4px;
  clip-path:polygon(50% 3%,88% 22%,100% 100%,0 100%,12% 22%);transition:.15s}
.hand-piece:hover{transform:translateY(-3px);filter:brightness(1.1)}
.hand-piece.sel{box-shadow:0 0 0 2px var(--neon),0 0 16px var(--neon)}
.hand-piece .cnt{position:absolute;bottom:-6px;right:-6px;background:var(--neonp);color:#fff;
  font-size:11px;border-radius:8px;padding:0 5px;box-shadow:0 0 8px rgba(176,38,255,.7)}

.badge{font-family:Orbitron,sans-serif;font-size:11px;letter-spacing:.1em;padding:3px 10px;border-radius:999px}
.turn-on{background:rgba(57,255,20,.15);color:#aaffa0;box-shadow:0 0 14px rgba(57,255,20,.4);border:1px solid rgba(57,255,20,.4)}
.turn-off{background:rgba(120,140,180,.12);color:#9fb2cc;border:1px solid rgba(120,140,180,.25)}

.toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:100;
  padding:.8rem 1.4rem;border-radius:14px;font-weight:700;animation:tin .3s}
@keyframes tin{from{opacity:0;transform:translate(-50%,-16px)}to{opacity:1;transform:translate(-50%,0)}}

.modal-bg{position:fixed;inset:0;z-index:90;background:rgba(3,6,18,.75);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;animation:tin .2s}
.spinner{width:40px;height:40px;border:3px solid rgba(0,240,255,.2);border-top-color:var(--neon);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.link{color:var(--neon);cursor:pointer;text-decoration:underline}