/* Neon Othello — DOM board, neon skin (#0a0a18 base, cyan/violet/pink) */
html,body{margin:0;padding:0;min-height:100%;background:radial-gradient(120% 90% at 50% 0%,#141d42 0%,#0a0a18 70%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:system-ui,sans-serif;color:#e2e8f0;user-select:none;-webkit-user-select:none;touch-action:manipulation}
#hud{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap;justify-content:center}
#hud .chip{background:rgba(20,26,53,.85);border:1px solid #2b3564;border-radius:999px;
  padding:4px 12px;font-size:.85rem;display:flex;gap:5px;align-items:center}
#hud .chip b{color:#22d3ee;text-shadow:0 0 8px rgba(34,211,238,.5)}
#hud .chip b.pink{color:#f472b6;text-shadow:0 0 8px rgba(244,114,182,.5)}
#hud .chip b.gold{color:#facc15;text-shadow:0 0 8px rgba(250,204,21,.5)}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.dR{background:#22d3ee;box-shadow:0 0 6px rgba(34,211,238,.8)}
.dB{background:#f472b6;box-shadow:0 0 6px rgba(244,114,182,.8)}
#board{position:relative;display:grid;grid-template-columns:repeat(8,1fr);gap:0;
  background:rgba(20,26,53,.92);padding:6px;border-radius:12px;
  border:1px solid rgba(34,211,238,.2);box-shadow:0 0 28px rgba(34,211,238,.12),0 10px 40px rgba(0,0,0,.5);
  width:min(98vw,520px)}
#board.shake{animation:bshake .45s ease-out}
@keyframes bshake{0%,100%{transform:none}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.cell{aspect-ratio:1;position:relative;min-height:44px;perspective:260px;background:#101736;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(34,211,238,.12)}
.cell:nth-child(-n+8){border-top-left-radius:6px}
.cell:hover{background:#16204a}
.cell.last{background:#1a2452;box-shadow:inset 0 0 0 1px rgba(124,77,255,.5)}
.cell.last::before{content:'';position:absolute;inset:6%;border-radius:6px;pointer-events:none;
  border:2px solid rgba(124,77,255,.75);box-shadow:0 0 10px rgba(124,77,255,.4) inset}
.cell.kcur{outline:2px dashed rgba(226,232,240,.7);outline-offset:-2px;border-radius:6px}
.cell .hint{position:absolute;left:50%;top:50%;width:30%;height:30%;margin:-15% 0 0 -15%;border-radius:50%;
  background:rgba(34,211,238,.35);border:2px solid rgba(34,211,238,.9);box-shadow:0 0 10px rgba(34,211,238,.5);
  pointer-events:none;animation:hpulse 1s ease-in-out infinite}
@keyframes hpulse{0%,100%{transform:scale(.85);opacity:.7}50%{transform:scale(1.08);opacity:1}}
.piece{position:absolute;inset:8%;border-radius:50%;z-index:2;transform-style:preserve-3d;
  transition:transform .26s cubic-bezier(.35,.1,.3,1.2)}
.piece.d1,.piece.d2{transform:rotateY(0deg)}
.piece.d2{transform:rotateY(180deg)}
.piece .face{position:absolute;inset:0;border-radius:50%;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.piece .f1{background:radial-gradient(circle at 35% 35%,#67e8f9,#0e7490);box-shadow:0 0 10px rgba(34,211,238,.5)}
.piece .f2{background:radial-gradient(circle at 35% 35%,#f9a8d4,#be185d);box-shadow:0 0 10px rgba(244,114,182,.5);transform:rotateY(180deg)}
.piece.placed{animation:landsquash .3s cubic-bezier(.3,.7,.4,1.25)}
@keyframes landsquash{0%{transform:scale(1.2) rotateY(0)}60%{transform:scale(.94) rotateY(0)}100%{transform:scale(1) rotateY(0)}}
.piece.d2.placed{animation:landsquash2 .3s cubic-bezier(.3,.7,.4,1.25)}
@keyframes landsquash2{0%{transform:scale(1.2) rotateY(180deg)}60%{transform:scale(.94) rotateY(180deg)}100%{transform:scale(1) rotateY(180deg)}}
.spark{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;
  pointer-events:none;z-index:4;animation:fly .55s ease-out forwards}
@keyframes fly{0%{transform:translate(0,0) scale(1);opacity:1}
  100%{transform:translate(var(--dx),var(--dy)) scale(.15);opacity:0}}
.cf{position:absolute;top:-4%;width:7px;height:11px;border-radius:2px;pointer-events:none;z-index:6;
  animation:cfall 1.1s ease-in forwards}
@keyframes cfall{0%{transform:translate(0,0) rotate(0);opacity:1}
  100%{transform:translate(var(--dx),46vh) rotate(540deg);opacity:0}}
#msg{margin:8px 0 6px;font-size:.95rem;min-height:1.4em;font-weight:600;text-align:center}
#msg.must{color:#facc15;text-shadow:0 0 8px rgba(250,204,21,.5)}
#msg.winmsg{background:linear-gradient(135deg,#facc15,#f97316);-webkit-background-clip:text;background-clip:text;color:transparent}
#ctrl{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
#ctrl .row{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
#ctrl button{font:inherit;font-size:.8rem;min-height:44px;padding:6px 12px;border:1px solid #2b3564;
  background:rgba(20,26,53,.85);color:#e2e8f0;border-radius:999px;cursor:pointer;
  transition:border-color .15s,background .15s}
#ctrl button.on{background:linear-gradient(135deg,#22d3ee,#a78bfa);border-color:transparent;color:#0b1020;font-weight:700}
#ctrl button:hover{border-color:rgba(34,211,238,.4)}
#toast{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);background:rgba(20,26,53,.95);
  border:1px solid rgba(250,204,21,.6);color:#facc15;padding:8px 18px;border-radius:999px;font-size:.9rem;
  z-index:20;pointer-events:none;animation:tin .2s ease-out}
@keyframes tin{from{opacity:0;transform:translateX(-50%) translateY(8px)}to{opacity:1;transform:translateX(-50%)}}
#panel{position:fixed;inset:0;background:rgba(6,8,24,.82);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;z-index:15}
#panel[hidden]{display:none}
#ptitle{font-size:1.7rem;font-weight:800;background:linear-gradient(135deg,#facc15,#f97316);
  -webkit-background-clip:text;background-clip:text;color:transparent;text-align:center}
#pdetail{color:#aab4d4;font-size:.95rem;text-align:center;max-width:86vw;white-space:pre-line}
#panel button{font:inherit;font-size:1rem;min-height:44px;padding:10px 26px;border:none;border-radius:999px;
  background:linear-gradient(135deg,#22d3ee,#a78bfa);color:#0b1020;font-weight:700;cursor:pointer}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}