:root{--paper:#faf3e6;--ink:#2b2118;--ink-soft:#6b5a49;--light-sq:#f3dfb8;--dark-sq:#a9683a;--accent:#e8590c;--panel:#fffdf7;--line:#e6d8c0;--hint:#e8590c73;--lastmove:#d69e2e80;--check:#c92a2a8c}*{box-sizing:border-box}body{background:var(--paper);color:var(--ink);margin:0;font-family:Avenir Next,Segoe UI,system-ui,sans-serif}main{max-width:900px;margin:0 auto;padding:24px 16px 48px}header h1{letter-spacing:-.02em;margin:0;font-size:2.2rem}.accent{color:var(--accent)}.tagline{color:var(--ink-soft);margin:4px 0 0;font-size:.95rem}.layout{flex-wrap:wrap;gap:20px;margin-top:24px;display:flex}.board-wrap{flex:524px;min-width:0;max-width:524px;container-type:inline-size}#board{border:6px solid var(--dark-sq);-webkit-user-select:none;user-select:none;border-radius:8px;grid-template-columns:repeat(8,1fr);width:min(100%,524px);display:grid;box-shadow:0 8px 24px #2b21182e}.sq{aspect-ratio:1;cursor:pointer;justify-content:center;align-items:center;font-size:clamp(20px,9.5cqw,46px);line-height:1;display:flex;position:relative}.sq.light{background:var(--light-sq)}.sq.dark{background:var(--dark-sq)}.sq.last{box-shadow:inset 0 0 0 100vmax var(--lastmove)}.sq.selected{box-shadow:inset 0 0 0 4px var(--accent)}.sq.check{box-shadow:inset 0 0 0 100vmax var(--check)}.sq .dot{background:var(--hint);border-radius:50%;width:26%;height:26%;position:absolute}.sq .ring{border:4px solid var(--hint);border-radius:50%;position:absolute;inset:6%}.sq .coord{opacity:.6;font-size:10px;font-weight:700;position:absolute}.sq .coord.file{bottom:2px;right:3px}.sq .coord.rank{top:2px;left:3px}.piece.white{color:#fffdf5;text-shadow:0 1px #8a5a33,0 0 3px #0000008c}.piece.black{color:#33241a;text-shadow:0 1px #ffffff59}.under-board{max-width:520px;margin-top:10px}#move-input{border:1px solid var(--line);background:var(--panel);width:100%;color:var(--ink);font:inherit;border-radius:8px;padding:9px 12px;font-size:.9rem}#move-input:focus{outline:2px solid var(--accent);border-color:#0000}#status{min-height:1.2em;color:var(--ink-soft);margin:8px 2px 0;font-size:.95rem}#status.big{color:var(--accent);font-weight:700}aside{flex-direction:column;flex:240px;gap:14px;min-width:240px;display:flex}.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px}.panel h2{letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 10px;font-size:.72rem}.btn-row{flex-wrap:wrap;gap:8px;margin-bottom:8px;display:flex}.btn-row:last-child{margin-bottom:0}button{font:inherit;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;border-radius:8px;padding:6px 12px;font-size:.85rem}button:hover{border-color:var(--accent)}button.mode.on{background:var(--accent);border-color:var(--accent);color:#fff}select{width:100%;font:inherit;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:8px;padding:7px 10px;font-size:.85rem}select+select,.replay-controls{margin-top:8px}.replay-controls button{flex:1}.moves-panel{flex:1;min-height:120px}#movelist{column-gap:12px;max-height:300px;margin:0;padding:0 0 0 28px;font-size:.88rem;overflow-y:auto}#movelist li{margin-bottom:2px}#movelist .mv{border-radius:5px;margin-right:2px;padding:1px 5px}#movelist .mv.clickable{cursor:pointer}#movelist .mv.clickable:hover{background:var(--light-sq)}#movelist .mv.current{background:var(--accent);color:#fff;font-weight:700}footer{border-top:1px solid var(--line);color:var(--ink-soft);margin-top:28px;padding-top:14px;font-size:.8rem}footer a{color:var(--accent)}