*{box-sizing:border-box}
:root{
  --bg:#0c1020;
  --card:#151a2f;
  --card2:#101528;
  --text:#f5f7ff;
  --muted:#aab3d0;
  --accent:#8de3ff;
  --accent2:#ffca7a;
  --danger:#ff7d8b;
  --light-square:#e9d8b8;
  --dark-square:#8c5d38;
}
html,body{margin:0;min-height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at top,#233057 0,#0c1020 48%,#070914 100%);color:var(--text)}
a{color:var(--accent)}
.topbar,.footer{max-width:1220px;margin:0 auto;padding:18px 18px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.topbar h1{margin:0;font-size:clamp(1.4rem,3vw,2.4rem);letter-spacing:.02em}
.topbar p{margin:.25rem 0 0;color:var(--muted)}
.version{padding:8px 12px;border:1px solid rgba(255,255,255,.16);border-radius:999px;color:var(--accent);background:rgba(255,255,255,.05)}
main{max-width:1220px;margin:0 auto;padding:0 18px 24px}
.layout{display:grid;grid-template-columns:minmax(320px,760px) minmax(280px,1fr);gap:18px;align-items:start}
.card{background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.12);border-radius:22px;box-shadow:0 24px 80px rgba(0,0,0,.33);padding:18px}
.board-toolbar{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:14px}
.board-toolbar strong{display:block;font-size:1.1rem}
.board-toolbar span{display:block;color:var(--muted);font-size:.92rem;margin-top:3px}
.buttons{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
button{appearance:none;border:0;border-radius:999px;padding:10px 14px;font-weight:700;cursor:pointer;background:linear-gradient(135deg,var(--accent),#b9f2ff);color:#07101d;box-shadow:0 10px 28px rgba(141,227,255,.22);transition:transform .15s ease,filter .15s ease}
button:hover{transform:translateY(-1px);filter:brightness(1.05)}
button:active{transform:translateY(1px)}
#pauseBtn{background:linear-gradient(135deg,var(--accent2),#ffe1a8)}
#resetBtn{background:linear-gradient(135deg,#edf1ff,#cbd5ff)}
.board-wrap{position:relative;width:min(92vw,720px);margin:0 auto}
.board{position:relative;width:100%;aspect-ratio:1/1;border-radius:20px;overflow:hidden;background:#222;box-shadow:inset 0 0 0 3px rgba(255,255,255,.16),0 30px 80px rgba(0,0,0,.45)}
.square{position:absolute;width:12.5%;height:12.5%;display:flex;align-items:flex-start;justify-content:flex-start;padding:5px;font-size:.7rem;color:rgba(0,0,0,.35);font-weight:700}
.square.light{background:linear-gradient(145deg,var(--light-square),#f8ebcf)}
.square.dark{background:linear-gradient(145deg,var(--dark-square),#704222)}
.square.last-from::after,.square.last-to::after{content:"";position:absolute;inset:6px;border-radius:14px;border:3px solid rgba(141,227,255,.65);box-shadow:0 0 18px rgba(141,227,255,.45)}
.square.last-to::after{border-color:rgba(255,202,122,.85);box-shadow:0 0 22px rgba(255,202,122,.55)}
.piece{position:absolute;width:12.5%;height:12.5%;display:flex;align-items:center;justify-content:center;font-size:clamp(32px,7vw,64px);line-height:1;z-index:10;filter:drop-shadow(0 9px 8px rgba(0,0,0,.42));transition:transform .62s cubic-bezier(.2,1.4,.28,1),opacity .25s ease}
.piece.white{color:#fff;text-shadow:0 0 1px #000,0 0 16px rgba(255,255,255,.35)}
.piece.black{color:#141414;text-shadow:0 0 1px #fff,0 0 13px rgba(0,0,0,.5)}
.piece.captured{opacity:0;transform:scale(.35) rotate(16deg)!important}
.piece.moving{animation:floaty .62s ease both}
@keyframes floaty{
  0%{filter:drop-shadow(0 8px 8px rgba(0,0,0,.38))}
  45%{filter:drop-shadow(0 18px 13px rgba(141,227,255,.52));}
  100%{filter:drop-shadow(0 9px 8px rgba(0,0,0,.42))}
}
.anime-burst{position:absolute;z-index:30;font-size:46px;color:#fff4bd;text-shadow:0 0 14px #ffb347,0 0 34px #8de3ff;pointer-events:none;animation:burst .55s ease-out both}
@keyframes burst{from{transform:translate(-50%,-50%) scale(.2) rotate(-35deg);opacity:0}45%{opacity:1}to{transform:translate(-50%,-50%) scale(1.35) rotate(20deg);opacity:0}}
.side-card h2{margin:.2rem 0 .8rem;font-size:1.1rem}
.stats{display:grid;gap:10px;margin:0 0 18px}
.stats div{display:grid;grid-template-columns:95px 1fr;gap:10px;align-items:center;padding:9px 10px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(0,0,0,.12)}
dt{color:var(--muted)}
dd{margin:0;font-weight:700}
input[type=range]{width:130px;vertical-align:middle}
.move-list{height:330px;overflow:auto;margin:0;padding-left:26px;background:rgba(0,0,0,.16);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding-top:10px;padding-bottom:10px}
.move-list li{padding:4px 8px;color:#e8ecff}
.move-list li:nth-child(odd){color:#fff4ce}
.note{color:var(--muted);font-size:.92rem;line-height:1.45}
.legal{max-width:850px}
.footer{color:var(--muted);font-size:.92rem}
@media(max-width:900px){
  .layout{grid-template-columns:1fr}
  .board-toolbar{align-items:flex-start;flex-direction:column}
  .buttons{justify-content:flex-start}
  .topbar,.footer{align-items:flex-start;flex-direction:column}
}

#whiteElo,#blackElo,#strengthMode,#engineInfo{color:var(--accent);font-weight:800}