*{box-sizing:border-box}body{color:#f0f0f0;background:#0a0d14;margin:0;font-family:Inter,Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif}button{font:inherit}.app-shell{color:#eee;background:linear-gradient(130deg,#111 0%,#1f2330 45%,#1a2639 100%);flex-direction:column;align-items:center;min-height:100vh;padding:1rem 0;display:flex}.app-header{text-align:center;margin-bottom:1rem}.app-header h1{margin:0;font-size:2rem}.app-header p{color:#ced6e0;margin:.2rem 0 0}.board-area{width:100%;max-width:620px}:root{--sq:64px;--board-light:#f0d9b5;--board-dark:#b58863}@media (width<=560px){:root{--sq:44px}}.chess-container{-webkit-user-select:none;user-select:none;flex-direction:column;align-items:flex-start;gap:.85rem;padding:1rem;display:flex}.board-layout{align-items:flex-start;gap:1rem;display:flex}.sidebar{flex-direction:column;gap:.75rem;min-width:220px;max-width:320px;display:flex}.sidebar .engine-controls{width:100%}.reset-btn{color:#ccc;cursor:pointer;background:#1a1a2e;border:1px solid #444;border-radius:6px;padding:.35rem .75rem;font-size:.85rem;transition:background .15s,color .15s}.reset-btn:hover{color:#fff;background:#2a2a4a}.board-area{align-items:stretch;gap:4px;display:flex}.rank-labels{flex-direction:column;justify-content:space-around;padding-bottom:2px;display:flex}.rank-label{color:#777;text-align:center;font-size:.7rem;line-height:var(--sq);height:var(--sq);width:14px}.board-column{flex-direction:column;gap:4px;display:flex}.board-grid{grid-template-columns:repeat(8, var(--sq));border:2px solid #3a3a3a;border-radius:2px;display:grid;overflow:hidden}.square{width:var(--sq);height:var(--sq);cursor:pointer;box-sizing:border-box;justify-content:center;align-items:center;display:flex;position:relative}.square.light{background:var(--board-light)}.square.dark{background:var(--board-dark)}.square.light.selected{background:#f6f669}.square.dark.selected{background:#d3d34c}.square.hovered{filter:brightness(1.12)}.square.drag-over{filter:brightness(1.25)}.square.drag-over:before{content:"";z-index:3;pointer-events:none;background:#50be6459;position:absolute;inset:0}.square.legal-empty:after{content:"";z-index:4;pointer-events:none;background:#00000038;border-radius:50%;width:32%;height:32%;position:absolute}.square.legal-capture{box-shadow:inset 0 0 0 4px #d22d2dd9}.piece{object-fit:contain;pointer-events:none;z-index:1;width:100%;height:100%;position:relative}.drag-ghost{pointer-events:none;z-index:1000;object-fit:contain;filter:drop-shadow(0 6px 12px #0009);position:fixed;transform:scale(1.12)}.coord{opacity:.75;z-index:5;pointer-events:none;font-size:.62rem;font-weight:700;line-height:1;position:absolute}.rank-coord{top:2px;left:2px}.file-coord{bottom:2px;right:3px}.square.light .coord{color:var(--board-dark)}.square.dark .coord{color:var(--board-light)}.engine-toggle-btn{color:#ccc;cursor:pointer;background:#1a1a2e;border:1px solid #444;border-radius:6px;padding:.35rem .75rem;font-size:.82rem;transition:background .15s,color .15s,border-color .15s}.engine-toggle-btn:hover{color:#fff;background:#2a2a4a}.engine-controls{width:calc(var(--sq) * 8 + 22px + 24px);background:#ffffff0a;border:1px solid #ffffff14;border-radius:8px;flex-direction:column;gap:.45rem;padding:.55rem .85rem;display:flex}.engine-status-row{align-items:center;gap:.5rem;display:flex}.engine-ready-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.engine-ready-dot.ready{background:#4caf50;box-shadow:0 0 4px #4caf50}.engine-ready-dot.loading{background:#ff9800;animation:1s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.engine-label{color:#aaa;font-size:.8rem}.engine-depth-badge{color:#7ec8e3;background:#4e90d926;border:1px solid #4e90d94d;border-radius:4px;margin-left:auto;padding:.1rem .4rem;font-size:.72rem}.skill-row{flex-direction:column;gap:.2rem;display:flex}.skill-label{color:#bbb;font-size:.78rem}.skill-label strong{color:#ddd}.skill-slider{accent-color:#4a90d9;cursor:pointer;width:100%}.hint-toggle{color:#aaa;cursor:pointer;align-items:center;gap:.4rem;font-size:.78rem;display:flex}.hint-toggle input{accent-color:#4a90d9;cursor:pointer}.board-with-eval{align-items:stretch;gap:6px;display:flex}.square.best-from{background:#64c86473!important}.square.best-to:after{content:"";z-index:4;pointer-events:none;background:#64c86466;border-radius:2px;position:absolute;inset:0}.eval-bar{border:1px solid #ffffff1f;border-radius:3px;flex-direction:column;flex-shrink:0;width:26px;display:flex;position:relative;overflow:hidden}.eval-bar-black{background:#1a1a1a;width:100%;transition:height .4s}.eval-bar-white{background:#f0f0f0;justify-content:center;align-items:flex-start;width:100%;transition:height .4s;display:flex;position:relative}.eval-score{letter-spacing:-.01em;white-space:nowrap;pointer-events:none;font-size:.68rem;font-weight:700;line-height:1;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.eval-score-white{color:#000}.eval-score-black{color:#fff}.game-status{justify-content:space-between;align-items:center;width:100%;display:flex}.turn-info{color:#ddd;align-items:center;gap:.5rem;font-size:.95rem;font-weight:500;display:flex}.turn-info.gameover{color:#f4c542;font-weight:700}.turn-dot{border:2px solid #fff6;border-radius:50%;flex-shrink:0;width:13px;height:13px}.dot-white{background:#f8f8f8}.dot-black{background:#1a1a1a}.status-controls{align-items:center;gap:.5rem;display:flex}.reset-btn,.engine-toggle-btn{color:#ccc;cursor:pointer;background:#1a1a2e;border:1px solid #444;border-radius:6px;padding:.35rem .75rem;font-size:.85rem;transition:background .15s,color .15s,border-color .15s}.reset-btn:hover,.engine-toggle-btn:hover{color:#fff;background:#2a2a4a}.engine-toggle-btn.active{color:#7ec8e3;background:#1e3a5f;border-color:#4a90d9}.move-history{background:#ffffff0a;border:1px solid #ffffff12;border-radius:8px;padding:.6rem .75rem}.move-history-title{text-transform:uppercase;letter-spacing:.07em;color:#888;margin-bottom:.45rem;font-size:.75rem;font-weight:600}.move-list{scrollbar-width:thin;scrollbar-color:#444 transparent;flex-wrap:wrap;gap:.1rem .5rem;max-height:100px;display:flex;overflow-y:auto}.move-row{gap:.35rem;min-width:90px;display:flex}.move-num{color:#555;font-size:.82rem}.move-san{color:#ccc;font-size:.82rem}.no-moves{color:#555;font-size:.8rem}
