Chess

<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Chess</title>
<style>
:root{--ls:#f0d9b5;--ds:#b58863;--lm:rgba(255,255,80,.45);--lc:rgba(255,50,50,.55);--sel:rgba(100,200,100,.5);--bg:#1a1a2e;--pn:#16213e;--tx:#e0e0e0;--ac:#e94560;--bd:#0f3460}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:sans-serif;background:var(--bg);color:var(--tx);display:flex;justify-content:center;min-height:100vh;padding:20px}
#app{display:flex;gap:24px}
#board{display:grid;grid-template-columns:repeat(8,72px);grid-template-rows:repeat(8,72px);border:4px solid var(--bd);border-radius:4px;box-shadow:0 4px 20px rgba(0,0,0,.5);user-select:none}
#board.flipped{direction:rtl}
.sq{width:72px;height:72px;display:flex;align-items:center;justify-content:center;font-size:52px;position:relative;cursor:pointer}
.sq.lf{background:var(--ls)}.sq.dk{background:var(--ds)}
.sq.sel{background:var(--sel)!important}.sq.lm{background:var(--lm)!important}
.sq.ic{box-shadow:inset 0 0 14px 5px var(--lc)}
.sq.ld::after{content:'';position:absolute;width:26%;height:26%;background:rgba(0,0,0,.25);border-radius:50%}
.sq.lc::after{content:'';position:absolute;width:86%;height:86%;border:4px solid rgba(0,0,0,.25);border-radius:50%;background:transparent}
.cl{position:absolute;font-size:9px;font-weight:700;pointer-events:none;z-index:1}
.fl{bottom:2px;right:4px;font-size:8px}.rl{top:2px;left:4px;font-size:8px}
.sq.lf .cl{color:var(--ds)}.sq.dk .cl{color:var(--ls)}
#pn{width:260px;background:var(--pn);border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 4px 20px rgba(0,0,0,.3)}
#pn h2{text-align:center;color:var(--ac);font-size:18px;border-bottom:1px solid #333;padding-bottom:8px}
.sd{display:flex;flex-direction:column;gap:6px}
.sd h3{font-size:12px;color:#888;text-transform:uppercase;letter-spacing:1px}
#ti{text-align:center;font-size:16px;font-weight:bold;padding:8px;border-radius:6px;background:#1a1a2e}
#ti .ic{display:inline-block;width:14px;height:14px;border-radius:50%;vertical-align:middle;margin-right:6px;border:2px solid #666}
.cic.w{background:#fff}.cic.b{background:#222}
.ml{max-height:200px;overflow-y:auto;background:#0f1a30;border-radius:6px;padding:8px;font-family:monospace;font-size:12px;line-height:1.7}
.ml::-webkit-scrollbar{width:6px}.ml::-webkit-scrollbar-thumb{background:#333;border-radius:3px}
.mr{display:flex;gap:8px}.mn{color:#666;min-width:28px}.mw,.mb{min-width:55px}
#st{text-align:center;font-size:15px;font-weight:bold;padding:8px;border-radius:6px;background:var(--ac);display:none}#st.show{display:block}
.cr{display:flex;gap:6px}
.cr button,.cr select{padding:7px 10px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:600;background:#0f3460;color:var(--tx);border:none;flex:1}
.cr button:hover,.cr select:hover{background:#1a4a80}.cr button.dg{background:var(--ac)}
select option{background:#0f3460}
#pd{position:fixed;z-index:2000;background:var(--pn);border:2px solid var(--ac);border-radius:8px;padding:12px 8px;display:none;box-shadow:0 8px 32px rgba(0,0,0,.6)}
#pd.show{display:flex;gap:8px}
.pp{width:52px;height:52px;display:flex;align-items:center;justify-content:center;font-size:40px;cursor:pointer;border-radius:6px;background:#0f1a30}
.pp:hover{background:var(--ac)}
.dragging{position:fixed;z-index:9999;font-size:52px;pointer-events:none}
</style>
</head>
<body>
<div id="app">
<div id="board"></div>
<div id="pn">
<h2>&#9820; Chess</h2>
<div id="ti"><span class="cic w"></span>White</div>
<div id="st"></div>
<div class="sd"><h3>Captured</h3>
<div>By <span id="cwl"></span>:</div><div id="cpw"></div>
<div>By <span id="cbl"></span>:</div><div id="cpb"></div></div>
<div class="sd"><h3>Moves</h3><div class="ml" id="ml"></div></div>
<div class="sd"><h3>Settings</h3>
<div class="cr"><label>Play as:</label><select id="pSel"><option value="1">White</option><option value="2">Black</option></select></div>
<div class="cr"><label>AI Depth:</label><select id="aSel"><option value="1">1</option><option value="2">2</option><option value="3" selected>3</option></select></div>
<div class="cr"><button id="bF">Flip</button><button id="bU">Undo</button></div>
<div class="cr"><button class="dg" id="bN">New Game</button><button id="bS">Sound</button></div>
</div></div></div>
<div id="pd"></div>
<script>