/* chess-vs-computer: board, pieces, bars, controls, overlays. Site tokens + ink borders / hard shadows to match the frame. */
body{--sage:#5f8a72;--sage-d:#4d7660;--parch:#f1e9d2;--ink:var(--color-ink,#1d232b);--acc:#2F6B57}
.cv-app{display:grid;gap:10px;margin:0 0 16px}

/* ---- board ---- */
#cv-board{position:relative;width:100%;aspect-ratio:1;border:3px solid var(--ink);border-radius:14px;overflow:hidden;background:var(--parch);
  box-shadow:0 6px 0 0 var(--ink);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;outline-offset:3px}
#cv-board:focus-visible{outline:3px solid var(--color-focus,#2563eb)}
.cv-grid{position:absolute;inset:0;display:grid;grid-template:repeat(8,1fr)/repeat(8,1fr)}
.cv-sq{position:relative;overflow:hidden}
.cv-sq.lt{background:var(--parch)}
.cv-sq.dk{background:var(--sage)}
.cv-sq i{position:absolute;font:600 9px/1 var(--font-label,monospace);font-style:normal;pointer-events:none;opacity:.85;z-index:1}
.cv-sq.lt i{color:var(--sage-d)}
.cv-sq.dk i{color:var(--parch)}
.cv-rank{top:3px;left:3px}
.cv-file{bottom:2px;right:3px}
.cv-sq.last::before{content:"";position:absolute;inset:0;background:rgba(250,204,21,.5)}
.cv-sq.sel::before{content:"";position:absolute;inset:0;background:rgba(250,204,21,.72)}
.cv-sq.hint::before{content:"";position:absolute;inset:0;background:rgba(56,189,248,.5);box-shadow:inset 0 0 0 3px #0ea5e9}
.cv-sq.check{background-image:radial-gradient(circle at 50% 50%,rgba(239,68,68,.95) 0,rgba(239,68,68,.55) 38%,rgba(239,68,68,0) 72%)}
.cv-sq.kb{box-shadow:inset 0 0 0 3px #2563eb}
.cv-sq.tgt::after{content:"";position:absolute;left:34%;top:34%;width:32%;height:32%;border-radius:50%;background:rgba(29,35,43,.34)}
.cv-sq.tgt-cap::after{content:"";position:absolute;inset:6%;border-radius:50%;box-shadow:inset 0 0 0 4px rgba(29,35,43,.38)}
.cv-pieces{position:absolute;inset:0;pointer-events:none}
.cv-piece{position:absolute;left:0;top:0;width:12.5%;height:12.5%;padding:2%;transition:transform .22s cubic-bezier(.25,.9,.3,1),opacity .2s;
  will-change:transform;filter:drop-shadow(0 2px 1px rgba(0,0,0,.35))}
.noanim .cv-piece{transition:none}
.cv-piece.dragging{transition:none;z-index:6;filter:drop-shadow(0 8px 5px rgba(0,0,0,.4))}
.cv-piece.captured{opacity:0;transform-origin:center;transition:opacity .2s}
.cv-piece.promoted{animation:cv-pop .45s ease}
.pcs{display:block;width:100%;height:100%;overflow:visible;stroke-linejoin:round;stroke-linecap:round}
.pcs.w{fill:url(#cv-gw);stroke:#2a2016;stroke-width:3;--pc-detail:#6b5a43}
.pcs.b{fill:url(#cv-gb);stroke:#04060a;stroke-width:3;--pc-detail:#cfd6e2}
.pcs.mini{width:18px;height:18px;margin-right:-7px;stroke-width:4}
@keyframes cv-pop{0%{filter:drop-shadow(0 0 0 #facc15)}50%{filter:drop-shadow(0 0 12px #facc15)}100%{filter:drop-shadow(0 2px 1px rgba(0,0,0,.35))}}
#cv-board.shake{animation:cv-shake .35s}
@keyframes cv-shake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}

/* ---- promotion picker ---- */
.cv-shield{position:absolute;inset:0;background:rgba(15,20,25,.45);z-index:8}
.cv-promo{position:absolute;z-index:9;width:12.5%;min-width:54px;display:grid;background:#fffdf6;border:3px solid var(--ink);border-radius:12px;box-shadow:0 5px 0 0 var(--ink)}
.cv-promo button{appearance:none;background:none;border:0;padding:4px;aspect-ratio:1;display:grid;place-items:center;position:relative;cursor:pointer}
.cv-promo button:hover,.cv-promo button:focus-visible{background:#fde68a;outline:none}
.cv-promo button span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---- player bars ---- */
.cv-bar{display:flex;align-items:center;gap:8px;min-height:38px;padding:4px 10px;border:2px solid var(--ink);border-radius:12px;background:var(--color-paper-2,#f2efe6);font:600 var(--text-sm,.875rem)/1 var(--font-body,system-ui)}
.cv-bar.turn{background:#fff7d6;box-shadow:0 3px 0 0 var(--acc)}
.cv-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--ink);flex:none}
.cv-dot.w{background:#fffdf6}.cv-dot.b{background:#20262e}
.cv-name{white-space:nowrap}
.cv-cap{display:flex;align-items:center;flex:1;min-width:0;padding-left:6px;overflow:hidden}
.cv-cap em{font:600 12px/1 var(--font-label,monospace);font-style:normal;margin-left:12px;color:var(--acc)}
.cv-clock{font:600 15px/1 var(--font-label,monospace);padding:6px 9px;border-radius:8px;background:var(--ink);color:#fff;min-width:58px;text-align:center}
.cv-clock.low{background:#dc2626;animation:cv-pulse 1s infinite}
@keyframes cv-pulse{50%{opacity:.65}}

/* ---- status + controls ---- */
.cv-status{min-height:1.6em;text-align:center;font:700 var(--text-md,1.0625rem)/1.3 var(--font-display,system-ui)}
.cv-status.check{color:#b91c1c}.cv-status.ok{color:var(--acc)}.cv-status.bad{color:#b91c1c}
.cv-status .dots i{display:inline-block;width:5px;height:5px;border-radius:50%;background:currentColor;margin-left:3px;animation:cv-dot 1s infinite}
.cv-status .dots i:nth-child(2){animation-delay:.15s}.cv-status .dots i:nth-child(3){animation-delay:.3s}
@keyframes cv-dot{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.cv-actions{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.cv-actions button{appearance:none;display:grid;justify-items:center;gap:3px;padding:7px 2px 6px;min-height:52px;border:2px solid var(--ink);border-radius:12px;background:#fffdf6;color:var(--ink);
  font:600 11px/1 var(--font-body,system-ui);cursor:pointer;box-shadow:0 3px 0 0 var(--ink);transition:transform .08s,box-shadow .08s}
.cv-actions button:active:not(:disabled){transform:translateY(3px);box-shadow:0 0 0 0 var(--ink)}
.cv-actions button:disabled{opacity:.4;cursor:default}
.cv-actions button[hidden]{display:none}
.cv-actions button.busy{animation:cv-pulse .8s infinite}
.cv-actions svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cv-moves{display:flex;align-items:center;gap:5px;overflow-x:auto;white-space:nowrap;padding:8px 10px;border:2px solid var(--ink);border-radius:12px;background:#fff;font:500 13px/1 var(--font-label,monospace);scrollbar-width:thin}
.cv-moves .n{opacity:.5;margin-left:6px}
.cv-moves .m{padding:3px 5px;border-radius:6px}
.cv-moves .m.cur{background:#fde68a;font-weight:600}
.cv-moves .empty{opacity:.5;font-family:var(--font-body,system-ui)}
.cv-extra{display:flex;gap:8px;flex-wrap:wrap}
.cv-extra .cv-btn{flex:1;min-width:140px}
.cv-btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:46px;padding:.6rem 1.2rem;border:2px solid var(--ink);border-radius:999px;background:var(--acc);color:#fff;
  font:700 var(--text-sm,.9rem)/1 var(--font-display,system-ui);cursor:pointer;box-shadow:0 4px 0 0 var(--ink);transition:transform .08s,box-shadow .08s}
.cv-btn:active{transform:translateY(4px);box-shadow:0 0 0 0 var(--ink)}
.cv-btn.ghost{background:#fffdf6;color:var(--ink)}
.cv-btn:focus-visible,.cv-actions button:focus-visible,.cv-chip:focus-visible{outline:3px solid var(--color-focus,#2563eb);outline-offset:2px}

/* ---- overlays ---- */
.cv-toasts{position:fixed;left:0;right:0;top:70px;display:grid;justify-items:center;gap:6px;z-index:60;pointer-events:none}
.cv-toast{padding:9px 16px;border:2px solid var(--ink);border-radius:999px;background:#fffdf6;font:700 14px/1 var(--font-body,system-ui);box-shadow:0 3px 0 0 var(--ink);animation:cv-in .25s ease}
.cv-toast.good{background:#d9f7e4}
.cv-toast.coin{background:#fde68a;font-size:16px;animation:cv-coin 3s ease forwards}
.cv-toast.coin b{font-family:var(--font-label,monospace)}
.cv-toast.out{opacity:0;transition:opacity .35s}
@keyframes cv-in{from{opacity:0;transform:translateY(-8px)}}
@keyframes cv-coin{0%{opacity:0;transform:translateY(24px) scale(.8)}15%{opacity:1;transform:translateY(0) scale(1.08)}25%{transform:scale(1)}100%{transform:translateY(-14px)}}
.cv-modal{position:fixed;inset:0;z-index:50;display:none}
.cv-modal.open{display:grid;align-items:end;justify-items:center}
.cv-backdrop{position:absolute;inset:0;background:rgba(15,20,25,.55);animation:cv-fade .2s}
@keyframes cv-fade{from{opacity:0}}
.cv-card{position:relative;width:min(100%,460px);max-height:92vh;overflow:auto;padding:20px 18px 18px;border:3px solid var(--ink);border-bottom:0;border-radius:22px 22px 0 0;background:#fffdf6;animation:cv-up .28s cubic-bezier(.2,.9,.3,1)}
@keyframes cv-up{from{transform:translateY(40px);opacity:0}}
.cv-modal.small,.cv-modal.result{align-items:center}
.cv-modal.small .cv-card,.cv-modal.result .cv-card{border-bottom:3px solid var(--ink);border-radius:22px;width:min(92%,380px);box-shadow:0 8px 0 0 var(--ink)}
.cv-card h2{font:800 var(--text-lg,1.25rem)/1.15 var(--font-display,system-ui);margin:0 0 10px}
.cv-card h3{font:600 11px/1 var(--font-label,monospace);letter-spacing:.1em;text-transform:uppercase;margin:14px 0 8px;opacity:.7}
.cv-card p{margin:0 0 10px;font-size:.95rem;line-height:1.45}
.cv-hint{opacity:.75;font-size:.85rem!important}
.cv-row{display:flex;gap:10px;margin-top:14px}
.cv-row.wrap{flex-wrap:wrap;justify-content:center}
.cv-row .cv-btn{flex:1;min-width:110px}
.cv-chips{display:flex;flex-wrap:wrap;gap:7px}
.cv-chip{appearance:none;padding:9px 13px;border:2px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font:600 .85rem/1 var(--font-body,system-ui);cursor:pointer;min-height:40px}
.cv-chip.on{background:var(--acc);color:#fff;box-shadow:0 3px 0 0 var(--ink)}
.cv-chips.lv .cv-chip{flex:1 0 28%}
.cv-rec{margin-top:14px;font-size:.85rem}
.cv-rec summary{cursor:pointer;font-weight:700}
.cv-rec table{width:100%;border-collapse:collapse;margin-top:8px;font-family:var(--font-label,monospace)}
.cv-rec th,.cv-rec td{text-align:center;padding:4px;border-bottom:1px solid var(--color-rule,#ddd)}
.cv-rec th:first-child,.cv-rec td:first-child{text-align:left}
.cv-result{text-align:center}
.cv-medal{width:76px;height:76px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;font-size:40px;border:3px solid var(--ink);background:#e5e7eb;animation:cv-medal .6s cubic-bezier(.2,1.4,.4,1)}
.cv-result.win .cv-medal{background:#fde68a}.cv-result.loss .cv-medal{background:#fecaca}.cv-result.draw .cv-medal{background:#bfdbfe}
@keyframes cv-medal{from{transform:scale(.3) rotate(-25deg);opacity:0}}
.cv-sub{opacity:.8}
.cv-lines{list-style:none;margin:6px 0 4px;padding:0;font-size:.9rem;display:grid;gap:4px}
.cv-earn{font-weight:800;color:#a16207}
.cv-cap-left{opacity:.55;font-size:.78rem}

/* ---- article ---- */
.cv-seo{max-width:680px;margin:8px auto 24px;padding:0 1rem;line-height:1.65;color:var(--color-ink-2,#333)}
.cv-seo h2{font:800 var(--text-xl,1.6rem)/1.15 var(--font-display,system-ui);margin:24px 0 10px}
.cv-seo h3{font:700 var(--text-lg,1.2rem)/1.2 var(--font-display,system-ui);margin:22px 0 8px}
.cv-seo p,.cv-seo li{font-size:1rem}
.cv-seo ul,.cv-seo ol{padding-left:1.3rem;margin:8px 0}
.cv-seo li{margin:5px 0}
.cv-seo details{border:2px solid var(--color-rule,#ddd);border-radius:12px;padding:10px 14px;margin:8px 0;background:#fff}
.cv-seo summary{cursor:pointer;font-weight:700}
.cv-seo details p{margin:8px 0 2px}
.cv-noscript{padding:1rem;text-align:center;font-weight:700}
@media (prefers-reduced-motion:reduce){.cv-piece,.cv-toast,.cv-card,.cv-medal,#cv-board.shake,.cv-status .dots i,.cv-clock.low{animation:none;transition:none}}
@media (min-width:452px){.cv-sq i{font-size:10px}}