.csmpe-maj{--cm-accent:#1e88e5;--cm-line:rgba(127,127,127,.35);--cm-soft:rgba(127,127,127,.12);line-height:1.4}
.cm-muted{opacity:.7}.cm-error{color:#c62828}.cm-notice{background:#fff3cd;color:#5a4600;padding:.5rem .7rem;border-radius:6px}
.cm-title{margin:.4rem 0 .5rem}.cm-title .cm-muted{font-weight:400}.cm-result{font-size:1.05rem}
.cm-main{display:flex;flex-direction:column;gap:.8rem}
.cm-boardwrap{width:100%;container-type:inline-size}
.cm-status p{margin:.2rem 0}.cm-turn{font-size:1.05rem}
.cm-board{display:grid;grid-template-columns:repeat(8,1fr);width:100%;aspect-ratio:1;border:1px solid #777;user-select:none}
.cm-sq{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:clamp(1.5rem,6vw,2.4rem);line-height:1}
.cm-light{background:#f0d9b5}.cm-dark{background:#b58863}
.cm-last{box-shadow:inset 0 0 0 3px rgba(155,199,0,.7)}
.cm-pick{box-shadow:inset 0 0 0 4px rgba(30,136,229,.85)}
.cm-from{background:#f6f669 !important}
.cm-movable{cursor:pointer}
.cm-target{cursor:pointer}.cm-target::after{content:"";position:absolute;width:28%;height:28%;border-radius:50%;background:rgba(20,85,30,.45)}
.cm-coord{position:absolute;font-size:.6rem;opacity:.65;color:#333}.cm-rank{top:2px;left:3px}.cm-file{bottom:1px;right:3px}
.cm-check{color:#c62828;font-weight:600}
.cm-offer{background:var(--cm-soft);padding:.35rem .6rem;border-radius:6px}
.cm-counts{list-style:disc;padding-left:1.3em;margin:.4rem 0}.cm-counts .cm-san{font-weight:600}
.cm-counts>li{padding:.3rem 0;border-bottom:1px solid var(--cm-line)}
.cm-countrow{display:grid;grid-template-columns:minmax(6em,auto) 1fr 2.5em;gap:.6rem;align-items:center}
.cm-livecomments{list-style:none;margin:.25rem 0 0 .5rem;padding:0;font-size:.9em;opacity:.85}.cm-livecomments li{margin:.1rem 0}
.cm-counts li.cm-clickable{cursor:pointer}.cm-counts li.cm-clickable:hover .cm-san{text-decoration:underline}
.cm-bar{background:var(--cm-soft);height:.7rem;border-radius:4px;overflow:hidden}.cm-bar span{display:block;height:100%;background:var(--cm-accent)}
.cm-n{text-align:right;font-weight:600}
.cm-form{border:1px solid var(--cm-line);border-radius:8px;padding:.6rem .8rem;margin-top:.6rem}
.cm-form textarea{width:100%;box-sizing:border-box;font:inherit;margin:.4rem 0}
.cm-form .cm-check{color:inherit;font-weight:400;display:block}
.cm-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.cm-btn{font:inherit;padding:.45rem .8rem;border:1px solid var(--cm-line);border-radius:6px;background:var(--cm-soft);color:inherit;cursor:pointer}
.cm-btn:disabled{opacity:.45;cursor:default}
.cm-primary{background:var(--cm-accent);border-color:var(--cm-accent);color:#fff}.cm-ghost{background:none}
.cm-link{background:none;border:0;padding:0;font:inherit;color:var(--cm-accent);cursor:pointer;text-decoration:underline}
.cm-movetable{border-collapse:collapse;width:100%}.cm-movetable td{vertical-align:top;padding:.2rem .5rem .2rem 0;width:48%}.cm-movetable td.cm-num{width:2.5em;opacity:.7;text-align:right;padding-right:.6rem}
.cm-ply{font-weight:600}.cm-comments summary{cursor:pointer;font-size:.85em;opacity:.75}.cm-comments ul{margin:.2rem 0 .4rem 1rem;font-size:.9em}
.cm-pgn textarea{width:100%;box-sizing:border-box;font-family:monospace;font-size:.85rem}
.cm-archive,.cm-login,.cm-pgn{margin-top:1rem}.cm-archive summary,.cm-login summary,.cm-pgn summary{cursor:pointer}
.cm-login form{display:flex;gap:.4rem;margin-top:.4rem;flex-wrap:wrap}.cm-login input{font:inherit;padding:.4rem;flex:1;min-width:10rem}
.cm-foot{margin-top:1.2rem;font-size:.85em}

.cm-opts{display:flex;flex-wrap:wrap;gap:.3rem 1.5rem;margin:.2rem 0 .5rem}
.cm-opt{display:flex;align-items:center;gap:.45rem;cursor:pointer}
.cm-opt input{margin:0}
/* Options look like radio buttons but stay deselectable (checkboxes, mutually exclusive in JS). */
.cm-opt input[type=checkbox]{-webkit-appearance:none;appearance:none;width:1.05em;height:1.05em;border:2px solid #767676;border-radius:50%;background:#fff;display:inline-grid;place-content:center;cursor:pointer;flex:none}
.cm-opt input[type=checkbox]::before{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--cm-accent);transform:scale(0);transition:transform .1s}
.cm-opt input[type=checkbox]:checked{border-color:var(--cm-accent)}
.cm-opt input[type=checkbox]:checked::before{transform:scale(1)}
.cm-opt input[type=checkbox]:focus-visible{outline:2px solid var(--cm-accent);outline-offset:2px}

/* Pieces scale with the board, which now spans the text column. */
@supports (font-size:1cqw){.cm-sq{font-size:9cqw}.cm-coord{font-size:max(.6rem,1.6cqw)}}
.cm-tb{font-size:.9em;border-left:3px solid var(--cm-accent);padding:.2rem .6rem;margin:.3rem 0 .6rem}
.cm-rules{margin:.2rem 0 .8rem}.cm-rules summary{cursor:pointer}.cm-rules ul{margin:.4rem 0 0 1.2em}
.cm-pill{display:inline-block;padding:.05em .75em;border-radius:999px;border:1.5px solid #222;font-weight:600;line-height:1.5}
.cm-pill-w{background:#fff;color:#111}.cm-pill-b{background:#111;color:#fff}
.cm-pw{width:100%;box-sizing:border-box;font:inherit;padding:.4rem;margin:.2rem 0 .5rem}
.cm-loginbox{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}.cm-loginbox .cm-pw{flex:1;min-width:12rem;margin:0;width:auto}
.cm-vs{font-weight:400;font-style:italic;margin:0 .2em}
.cm-hr{border:0;border-top:1px solid var(--cm-line);margin:.3rem 0 .8rem}
.cm-fen{font-size:.85em;margin:.4rem 0 0;word-break:break-all}.cm-fen code{font-size:1em;user-select:all}
/* FEN: slightly smaller than the text; wraps after a rank ("/") when the board is too narrow for one line. */
.cm-fen{font-size:.8rem;white-space:normal;word-break:normal;overflow-wrap:normal}
/* FEN on the left, "copier" pushed to the right edge of the board. */
.cm-fen{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .4em}.cm-fen code{flex:1 1 auto;min-width:0}.cm-fen .cm-link{margin-left:auto}
.cm-title .cm-pill{font-size:.85em;vertical-align:.08em}
