:root{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#20362e;background:#f3f4ed;font-synthesis:none;color-scheme:light;--green:#658674;--cream:#ece6d1;--ink:#20362e;--line:#d4ddd1}
*{box-sizing:border-box}body{margin:0}button,select{font:inherit}button,select{min-height:32px;border:1px solid #c8d2c5;border-radius:6px;background:#fffef8;color:var(--ink)}button{cursor:pointer;padding:5px 11px;font-size:12px;font-weight:600}button:hover:not(:disabled){background:#e9efdf}button:disabled{opacity:.42;cursor:default}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #d69e3a;outline-offset:2px}button.primary{background:#355d49;color:#fff;border-color:#355d49}button.primary:hover{background:#274d3a}.chess-app{max-width:960px;margin:auto;padding:16px 20px 10px}.app-header{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px}h1{font-size:21px;letter-spacing:-.6px;font-weight:650;margin:0}.game-actions{display:flex;gap:5px}.settings{display:flex;gap:10px;flex-wrap:wrap;align-items:end;padding-bottom:10px;border-bottom:1px solid var(--line)}.settings label{display:flex;align-items:center;gap:6px;font-size:11px;color:#53665b}.settings select{padding:4px 24px 4px 8px;font-size:12px;max-width:145px}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 160px;gap:20px}.board-panel{min-width:0}.game-status{min-height:39px;display:flex;align-items:center;gap:8px}#status{font-size:13px;font-weight:600;margin:8px 0}.thinking{width:12px;height:12px;border:2px solid #c4d2c1;border-top-color:#355d49;border-radius:50%;animation:spin .7s linear infinite}.thinking[hidden]{display:none}@keyframes spin{to{transform:rotate(360deg)}}.board{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));aspect-ratio:1;border:3px solid #354e40;border-radius:3px;overflow:hidden;isolation:isolate;box-shadow:0 3px 10px #1d382217}.square{position:relative;display:grid;place-items:center;min-height:0;min-width:0;padding:0;border:0;border-radius:0;background:var(--cream);touch-action:manipulation}.square.dark{background:var(--green)}.square:hover:not(:disabled){background:var(--cream)}.square.dark:hover:not(:disabled){background:var(--green)}.square.last-move{box-shadow:inset 0 0 0 100px #d8c64945}.square.selected{box-shadow:inset 0 0 0 4px #e6b741;z-index:1}.square.checked{background:#c98674!important}.square:focus-visible{outline:3px solid #fff0ae;outline-offset:-4px;z-index:2}.square .piece{width:88%;height:88%;pointer-events:none;filter:drop-shadow(0 1px 1px #233d2e35)}.piece{stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.piece.white{fill:#fffbed;stroke:#253d31}.piece.black{fill:#1b3428;stroke:#f1e8cd;stroke-width:.8}.piece .cut{fill:none;stroke:currentColor}.piece.white .cut{color:#253d31}.piece.black .cut{color:#f1e8cd}.coordinate{position:absolute;font-size:10px;font-weight:650;line-height:1;pointer-events:none;color:#42634e}.dark .coordinate{color:#f5f0dc}.coordinate.file{bottom:3px;right:4px}.coordinate.rank{top:3px;left:4px}.legal-dot{position:absolute;width:23%;height:23%;background:#1e432a3d;border-radius:50%;pointer-events:none}.legal-capture{position:absolute;inset:4%;border:5px solid #28533255;border-radius:50%;pointer-events:none}.notice{margin:8px 0 0;font-size:12px;color:#85502a;line-height:1.4}.moves-panel{min-width:0;margin-top:12px;display:flex;flex-direction:column;max-height:620px}.moves-panel h2{font-size:11px;text-transform:uppercase;letter-spacing:.09em;margin:0;padding:0 0 10px;color:#647268;font-weight:650;border-bottom:1px solid var(--line)}.moves{overflow:auto;scrollbar-width:thin;flex:1;max-height:540px;overscroll-behavior:contain}.no-moves{font-size:12px;color:#7b877d;margin:12px 0}.move-row{display:grid;grid-template-columns:27px 1fr 1fr;gap:3px;align-items:center;padding:6px 0;font-size:12px;border-bottom:1px solid #e4e9df}.move-number{color:#849083;font-size:11px}.move-san{padding:2px 3px;border-radius:3px;white-space:nowrap}.move-san.latest{font-weight:700;background:#dce8d4}footer{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:11px;color:#788377;font-size:10px}footer a{color:inherit;text-decoration:none}footer a:hover{text-decoration:underline}dialog{border:1px solid #c3cfbd;border-radius:10px;background:#f8f8ee;color:var(--ink);padding:20px;box-shadow:0 10px 50px #102b2333;text-align:center}dialog::backdrop{background:#122c2366}dialog h2{font-size:16px;margin:0 0 16px}.promotion-options{display:flex;gap:7px;margin-bottom:15px}.promotion-options button{width:65px;height:76px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;font-size:10px;padding:4px}.promotion-options svg{width:45px;height:45px}
[hidden]{display:none!important}.board{grid-template-rows:repeat(8,minmax(0,1fr));width:min(100%,max(240px,calc(100svh - 180px)));margin-inline:auto}.moves-panel{max-height:calc(100svh - 164px)}
@media(max-width:720px){.chess-app{max-width:560px;padding:10px 14px 9px}.game-layout{grid-template-columns:minmax(0,1fr);gap:10px}.board{width:min(100%,480px,max(240px,calc(100svh - 244px)));margin:auto}.game-status{max-width:480px;margin:auto;min-height:33px}.moves-panel{max-width:480px;width:100%;margin:0 auto;max-height:118px}.moves-panel h2{font-size:10px;padding-bottom:6px}.moves{max-height:88px}.move-row{padding:4px 0;grid-template-columns:28px 1fr 1fr}.moves{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;align-content:start}.no-moves{grid-column:1/-1;margin:8px 0}.settings{gap:9px;padding-bottom:7px}.app-header{margin-bottom:8px}.notice{max-width:480px;margin:8px auto 0}footer{max-width:480px;margin:9px auto 0}}
@media(max-width:400px){.chess-app{padding:9px 8px}.app-header{gap:4px}h1{font-size:19px}.game-actions{gap:4px}.game-actions button{font-size:11px;padding:4px 7px;min-height:30px}.settings{gap:7px}.settings label{flex-direction:column;align-items:start;gap:3px;font-size:10px}.settings select{font-size:11px;min-height:29px}.coordinate{font-size:9px}.legal-capture{border-width:3px}.promotion-options button{width:53px;height:69px}.promotion-options svg{width:40px;height:40px}dialog{padding:16px}.moves{column-gap:12px}}
@media(prefers-reduced-motion:reduce){.thinking{animation:none;border-top-color:#355d49;border-right-color:#355d49}}