/* Off the clock: a playable mate-in-2 from Gibin's own games, plus live chess.com stats. */
.chess-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:clamp(28px,5vw,72px);align-items:center}
@media (max-width:900px){.chess-wrap{grid-template-columns:minmax(0,1fr)}}
.h-sec .serif{font-family:var(--f-accent);font-style:italic;font-weight:400;font-stretch:100%;color:var(--amber)}
.cstats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:28px 0 0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--line)}
.cstats div{background:var(--surface);padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.cstats dt{font:500 11px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);order:2}
.cstats dd{margin:0;font-family:var(--f-display);font-stretch:112%;font-weight:800;font-size:clamp(24px,2.6vw,30px);line-height:1.05;color:var(--ink);font-variant-numeric:tabular-nums}
.cstats .live::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);margin-right:8px;vertical-align:middle;box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 20%,transparent)}
.clinks{display:flex;flex-wrap:wrap;gap:18px;margin-top:22px;font:500 13px var(--f-mono)}
.clinks a{color:var(--accent);text-decoration:none}.clinks a:hover{text-decoration:underline}
.csrc{font-size:12.5px;color:var(--muted);margin-top:12px}

.cplay{border:1px solid var(--line);border-radius:18px;background:var(--surface);padding:16px;box-shadow:0 30px 70px -45px rgba(10,20,40,.55)}
.cp-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;font:500 12px var(--f-mono);color:var(--muted)}
.cp-head b{color:var(--ink);font-weight:600}
.cp-turn{display:inline-flex;align-items:center;gap:8px}
.cp-turn::before{content:"";width:12px;height:12px;border-radius:3px;background:#F3F1EA;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.czb{position:relative;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));aspect-ratio:1;container-type:inline-size;border-radius:10px;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:none;box-shadow:0 0 0 1px var(--line)}
.czs{position:relative;display:grid;place-items:center;cursor:default}
.czs.l{background:#DCE3EE}.czs.d{background:#6F86B4}
.czs .czc{position:absolute;font:600 max(8px,1.7cqw) var(--f-mono);pointer-events:none;opacity:.75}
.czs .czc.f{right:3px;bottom:2px}.czs .czc.r{left:3px;top:2px}
.czs.l .czc{color:#6F86B4}.czs.d .czc{color:#DCE3EE}
.czp{font-family:"Segoe UI Symbol","Noto Sans Symbols2","DejaVu Sans","Apple Symbols",serif;font-size:10.5cqw;line-height:1;cursor:grab;transition:transform .15s;position:relative;z-index:1}
.czp.w{color:#FBFAF6;-webkit-text-stroke:1.2px #1B2433;text-shadow:0 2px 3px rgba(0,0,0,.35)}
.czp.b{color:#121A27;-webkit-text-stroke:.6px #000;text-shadow:0 2px 2px rgba(0,0,0,.25)}
.czp.drag{transform:scale(1.15)}
.czs.sel{box-shadow:inset 0 0 0 3px #F2A93B}
.czs.last{background-image:linear-gradient(rgba(242,169,59,.38),rgba(242,169,59,.38))}
.czs.dot::after{content:"";position:absolute;width:26%;height:26%;border-radius:50%;background:rgba(11,19,32,.32)}
.czs.cap::after{content:"";position:absolute;inset:6%;border-radius:50%;box-shadow:inset 0 0 0 4px rgba(11,19,32,.32)}
.czs.dot,.czs.cap{cursor:pointer}
.czs.hint{animation:hintp 1.1s ease-in-out 3}
@keyframes hintp{50%{box-shadow:inset 0 0 0 4px #4FD08F}}
.czs.mate .czp{animation:mate .7s ease-in-out 2}
@keyframes mate{25%{transform:rotate(-14deg)}75%{transform:rotate(14deg)}}
.czb.wrong{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.czg{position:fixed;z-index:90;pointer-events:none;transform:translate(-50%,-50%) scale(1.15)}
.cp-status{min-height:46px;margin-top:12px;padding:10px 12px;border-radius:10px;background:var(--bg);font-size:14.5px;line-height:1.45;color:var(--ink);border:1px solid var(--line);transition:border-color .3s,background .3s}
.cp-status.ok{border-color:var(--ok);background:var(--ok-soft)}
.cp-status.bad{border-color:var(--amber);background:var(--amber-soft)}
.cp-ctl{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-items:center}
.cp-ctl button{font:500 12.5px var(--f-mono);padding:8px 12px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer}
.cp-ctl button:hover{border-color:var(--accent);color:var(--accent)}
.cp-ctl button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.cp-ctl a{margin-left:auto;font:500 12.5px var(--f-mono);color:var(--accent);text-decoration:none}
.cp-ctl a:hover{text-decoration:underline}
@media (prefers-reduced-motion:reduce){.czp,.czb.wrong,.czs.mate .czp,.czs.hint{animation:none;transition:none}}