:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;color:#27392f;background:#f4f3ed;font-synthesis:none;--green:#284f40;--muted:#728074}*{box-sizing:border-box}body{margin:0}button,select{font:inherit}button{cursor:pointer;border:1px solid #d5dbd1;background:#fffdf8;color:var(--green);padding:10px 15px;border-radius:8px}button:hover{background:#e9efe5}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #c59b4c;outline-offset:3px}header{max-width:1240px;margin:auto;padding:25px 36px;border-bottom:1px solid #dce0d6;display:flex;align-items:center;justify-content:space-between}.brand{font-family:serif;font-size:25px;color:var(--green);text-decoration:none;letter-spacing:4px}.brand span{font:12px sans-serif;letter-spacing:2px;border-left:1px solid #b9c6b8;padding-left:18px;margin-left:10px}main{max-width:1240px;margin:auto;padding:38px 36px}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--muted);font-weight:600}h1{font-family:serif;font-size:36px;line-height:1.5;margin:12px 0}h2{font-size:18px;margin:8px 0 15px}.intro p:not(.eyebrow){font-size:14px;color:var(--muted)}.version{font-size:13px;text-align:right;line-height:2}.version span{color:var(--muted)}.layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr);gap:24px;align-items:start}.card{padding:24px;border:1px solid #dce1d6;background:#fffefa;border-radius:15px;margin-bottom:18px}.section-head{display:flex;justify-content:space-between;align-items:center}.badge{font-size:12px;background:#e9eee4;padding:7px 13px;border-radius:30px}.board{display:grid;grid-template-columns:repeat(8,1fr);border:10px solid #314d3d;border-radius:6px;overflow:hidden;box-shadow:0 8px 22px #253c2918;margin:8px 0 20px}.square{aspect-ratio:1;border:0;border-radius:0;padding:0;position:relative;display:grid;place-items:center;background:#e9dfc5;min-width:0}.square.dark{background:#6e8870}.square:hover{background:#e9dfc5}.square.dark:hover{background:#809a79}.square.selected{box-shadow:inset 0 0 0 4px #ebc568}.square.destination:after{content:'';width:24%;height:24%;border-radius:50%;background:#edd694}.square small{position:absolute;bottom:2px;left:3px;color:#314d3d;font-size:9px}.piece{width:72%;height:72%;border-radius:50%;display:grid;place-items:center;font-size:25px;box-shadow:0 4px 2px #0003,inset 0 0 0 4px #ffffff30;pointer-events:none}.piece.white{background:#fbf4df;border:2px solid #e3d6ac;color:#725e31}.piece.black{background:#273c30;border:2px solid #1c3025;color:#e4c782}.hint{font-size:13px;min-height:40px;line-height:1.7}.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.toolbar span{margin-left:auto;font-size:12px;color:var(--muted)}.muted,.notice{font-size:12px;line-height:1.9;color:var(--muted)}.moves{display:flex;gap:7px;flex-wrap:wrap;max-height:180px;overflow:auto}.moves button{font-size:12px}.history{display:flex;gap:6px;flex-wrap:wrap;max-height:180px;overflow:auto;margin-top:15px}.history button{font-size:12px}.history .active{background:var(--green);color:#fff}.replay-controls{display:flex;gap:8px}.explanation{background:#f1f2e9;padding:14px;margin-top:16px;font-size:13px;line-height:1.9;border-left:3px solid #9cae8b}.explanation button{padding:2px 8px;font-size:12px}.notice{padding:2px 12px}.notice a{color:var(--green)}footer{max-width:1168px;margin:10px auto 30px;color:var(--muted);font-size:11px;letter-spacing:1px;text-align:center}dialog{max-width:470px;width:calc(100% - 32px);border:1px solid #d1dbc9;border-radius:18px;padding:30px;background:#fffefa;color:#27392f}dialog::backdrop{background:#14271d85;backdrop-filter:blur(4px)}dialog p{font-size:14px;line-height:1.8}label{display:block;font-size:13px;margin:20px 0 8px}select{width:100%;padding:12px;border:1px solid #c9d2c3;border-radius:8px;background:white}.primary{background:var(--green);color:white}.primary:hover{background:#3c6550}#saveError{color:#9d4230}@media(max-width:760px){header{padding:20px}.brand span{display:none}main{padding:24px 16px}.intro{align-items:flex-start}.version{font-size:10px;margin-top:18px}h1{font-size:28px}.layout{grid-template-columns:1fr}.card{padding:18px}.board{border-width:7px}.piece{font-size:20px}}

.board-commentary{margin-top:24px;padding-top:20px;border-top:1px solid #dce1d6}.board-commentary h2{margin-bottom:10px}.board-commentary .explanation{margin-top:0}.explanation button{margin-left:8px}

.play .board{margin-bottom:12px}.board-commentary{margin-top:0;padding-top:0;border-top:0}.board-commentary h2{font-size:15px;margin:0 0 8px}.play .hint{margin:10px 0;min-height:0}

.workspace-tools label{margin-top:0}.workspace-tools>select{max-width:460px}.workspace-tools>div{margin-top:14px}.record-tools{margin-top:16px}.file-label{font-size:13px}input[type=file]{display:block;max-width:100%;margin-top:6px}.replay-controls{flex-wrap:wrap;margin-bottom:8px}#last,#autoplay{margin:0 6px 8px 0}#playStatus{display:block;font-size:12px;color:var(--muted)}.game-summary{margin-top:18px}.game-summary p{font-size:13px;line-height:1.8}.review-row{border-top:1px solid #dce1d6;padding:16px 0}.review-row button{margin:5px 6px 0 0;font-size:12px}#summary{overflow-wrap:anywhere}.line-preview{color:#8c612c}.workspace-tools [hidden]{display:none}

.square.destination:after{display:none}.route-marker{position:absolute;z-index:2;background:#f4d476;color:#27392f;font-size:16px;font-weight:700;border:2px solid #fff6d9;width:28px;height:28px;border-radius:50%;display:grid;place-items:center}.step-score{font-weight:600;margin:0 0 10px}.position-image{width:min(100%,320px);height:auto;border-radius:6px;display:block;margin-bottom:12px}

.route-marker{width:18px;height:18px;background:#f4d476;border:2px solid #fff6d9;box-shadow:0 1px 4px #27392f30}

.history{display:block}.history-turn{display:grid;grid-template-columns:30px minmax(0,1fr) minmax(0,1fr);align-items:baseline;gap:8px;padding:4px 0}.history button{border:0;background:transparent;border-radius:0;box-shadow:none;text-align:left;padding:7px 4px;overflow-wrap:anywhere;font-size:14px}.history button:hover{background:transparent;color:#947025;text-decoration:underline}.history button.active{background:transparent;color:#976b13;font-weight:700;text-decoration:underline;text-underline-offset:4px}.history .turn-number,.turn-empty{font-size:12px;color:var(--muted)}.history-opening{margin-bottom:4px}
.history-turn{grid-template-columns:22px max-content max-content;column-gap:12px;padding:1px 0}.history button{padding:4px 2px}.history-opening{margin-bottom:2px}.history{max-height:220px}

.move-reasons{margin:12px 0}.move-reasons p{margin:8px 0;font-weight:400;line-height:1.85}

/* Keep short moves compact while allowing long capture paths to wrap. */
.layout>*,.history,.history-turn,.record-tools>*{min-width:0}
.history-turn{grid-template-columns:28px minmax(0,max-content) minmax(0,max-content);max-width:100%;column-gap:10px}
.history-turn button{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere}
.explanation,.hint,dialog p{overflow-wrap:anywhere}
@media(max-width:400px){.intro{gap:10px;flex-wrap:wrap}.version{text-align:left;margin-top:0}dialog{padding:20px}.replay-controls{gap:5px}.replay-controls button{padding:9px 12px}#last,#autoplay{margin:0}.record-tools input{width:100%}}

.board{position:relative}.capture-ghost{position:absolute;left:0;top:0;z-index:4;pointer-events:none;margin:0}

/* Compact replay controls directly beneath the board. */
.play .replay-controls{display:flex;justify-content:center;gap:4px;margin:0 0 10px}.play .replay-controls button{width:36px;height:32px;padding:0;border:0;background:transparent;border-radius:5px;font-size:16px;line-height:1}.play .replay-controls button:hover{background:#e9efe5}.play #playStatus{display:block;font-size:12px;color:var(--muted)}.play #playStatus:empty,.play .hint:empty{display:none}