.chess{--pad: clamp(8px, 1.6cqi, 15px);--chess-check: #c21b2e;--gap: var(--sp-2);--seat: 34px;--strip: 30px;--status: 26px;--row: 44px;--ctl: 50px;--chrome: calc(2 * var(--seat) + var(--strip) + var(--status) + var(--row) + var(--ctl) + 6 * var(--gap) + 2 * var(--pad));--fit: min(100cqi, max(calc(var(--fold, 100vh - 16rem) - var(--chrome)), 17rem), 34rem);--stage-h: calc( clamp(11rem, min(100cqi, calc(100vh - 25rem) ), 34rem) + var(--chrome) + 2 * var(--pad));--stage-h-lg: var(--stage-h);--sq: calc(var(--fit) / 8);--sq-light: #E8E1C6;--sq-dark: #43825A;--board-edge: #0C3B20;--sel: rgb(255 201 74 / .62);--last: rgb(255 201 74 / .45);--dot: rgb(16 34 22 / .34);--check: #E2542F;--mate: #C21B2E;--brass: var(--cat-board, #FFC145);--piece-w: #FBF8F0;--piece-w-line: #2E2A25;--piece-b: #262320;--piece-b-line: #0B0A09;--ease-out: cubic-bezier(.2,.8,.3,1);--ease-back: cubic-bezier(.2,.8,.3,1.2);flex-direction:column;padding:var(--pad);inline-size:100%;color:#fff;font:500 15px/1.25 inherit;font-family:inherit;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}.chess__in{flex:1;min-width:0;display:grid;gap:var(--gap);grid-template-columns:minmax(0,1fr);grid-template-rows:auto var(--row) var(--seat) auto var(--seat) minmax(var(--strip),1fr) var(--status);grid-template-areas:"ctl" "actions" "seatcpu" "board" "seatyou" "moves" "status"}.chess__seat--cpu{grid-area:seatcpu}.chess__board{grid-area:board}.chess__seat--you{grid-area:seatyou}.chess__moves{grid-area:moves}.chess__status{grid-area:status}.chess__actions{grid-area:actions}.chess__ctl{grid-area:ctl}@container (min-width: 52rem){.chess{--gap: var(--sp-3);--side: clamp(13rem, 30cqi, 22rem);--seat: 38px;--actions: 96px;--ctl: 50px;--chrome: 0px;--fit: clamp(18rem, min(calc(100cqi - var(--side) - var(--gap)), max(calc(var(--fold, 100vh - 16rem) - 2 * var(--pad)), 17rem)), 40rem);--stage-h: calc(clamp(18rem, min(calc(100cqi - var(--side) - var(--gap)), max(calc(var(--fold, 100vh - 16rem) - 2 * var(--pad)), 17rem)), 40rem) + 2 * var(--pad));--stage-h-md: var(--stage-h);--stage-h-lg: var(--stage-h)}.chess__in{grid-template-columns:var(--fit) minmax(0,1fr);grid-template-rows:var(--ctl) var(--actions) var(--seat) minmax(0,1fr) var(--seat) var(--status);grid-template-areas:"board ctl" "board actions" "board seatcpu" "board moves" "board seatyou" "board status"}}.chess__seat{display:flex;align-items:center;gap:var(--sp-2);min-width:0;padding:0 var(--sp-2) 0 var(--sp-2);border-radius:var(--r-sm);background:var(--wash-1);box-shadow:var(--ring-inset);transition:background-color .16s var(--ease-out),box-shadow .16s var(--ease-out)}.chess__seat.is-turn{background:var(--wash-3);box-shadow:var(--ring-inset-2)}.chess__disc{flex:none;width:13px;height:13px;border-radius:50%;box-shadow:0 0 0 1.5px var(--scrim-3),var(--card-shadow)}.chess__disc--w{background:var(--piece-w)}.chess__disc--b{background:#2a241e;box-shadow:0 0 0 1.5px var(--wash-6)}.chess__seat.is-turn .chess__disc{box-shadow:0 0 0 2px var(--brass),0 0 10px color-mix(in srgb,var(--cat-board) 60%,transparent)}.chess__who{display:flex;align-items:baseline;gap:var(--sp-1);flex:0 1 auto;min-width:0;overflow:hidden;font-size:var(--fs-1);font-weight:800;letter-spacing:-.01em;white-space:nowrap}.chess__who b{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:var(--fs-1);font-weight:700;color:var(--wash-6);letter-spacing:0}.chess__seat-gap{flex:1 1 auto;min-width:4px}.chess__taken-list{display:flex;align-items:center;min-width:0;overflow:hidden;flex-shrink:1}.chess__taken-list svg{width:19px;height:19px;margin-right:-6px;flex:none;filter:drop-shadow(0 1px 1px rgb(0 0 0 / .45))}.chess__taken-list svg:last-child{margin-right:0}.chess__taken-list.chess__piece--b{filter:brightness(1.55) contrast(.92)}.chess__lead{flex:none;margin-left:7px;font-size:var(--fs-1);font-weight:800;color:var(--brass);font-variant-numeric:tabular-nums}.chess__lead:empty{display:none}.chess__clock{flex:none;padding:var(--sp-1) var(--sp-2);border-radius:var(--r-sm);background:var(--scrim-2);font-size:var(--fs-1);font-weight:800;font-variant-numeric:tabular-nums;color:var(--wash-7)}.chess__seat.is-turn .chess__clock{background:var(--scrim-3);color:#fff}.chess__moves{min-width:0;border-radius:var(--r-sm);background:var(--scrim-1);box-shadow:var(--e-sink);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;display:flex;align-items:center}.chess__moves::-webkit-scrollbar{height:0;width:6px}.chess__moves-in{display:flex;align-items:center;gap:0 var(--sp-1);padding:0 var(--sp-2);white-space:nowrap;font-size:var(--fs-1);font-variant-numeric:tabular-nums}.chess__moves-in:empty:before{content:"Moves are written here as you play";color:var(--wash-6);font-weight:600}.chess__mvn{color:var(--wash-6);font-weight:700;margin-left:6px}.chess__mvn:first-child{margin-left:0}.chess__mv{padding:var(--sp-1) var(--sp-1);border-radius:var(--r-sm);font-weight:700;color:var(--wash-8)}.chess__mv.is-now{background:color-mix(in srgb,var(--cat-board) 28%,transparent);color:#fff;box-shadow:var(--ring-inset-2)}@container (min-width: 40rem){.chess__moves{display:block;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;padding:var(--sp-1) 0}.chess__moves-in{display:grid;grid-template-columns:2.6em minmax(0,1fr) minmax(0,1fr);align-content:start;gap:var(--sp-1) var(--sp-1);padding:0 var(--sp-2);white-space:normal}.chess__moves-in:empty:before{grid-column:1 / -1;white-space:normal;line-height:1.4}.chess__moves:has(.chess__moves-in:empty){display:grid;place-items:center;padding:var(--sp-3)}.chess__moves:has(.chess__moves-in:empty) .chess__moves-in:empty:before{display:block;max-inline-size:13rem;text-align:center;text-wrap:balance}.chess__mvn{margin-left:0;line-height:22px}.chess__mv{line-height:18px}}.chess__status{margin:0;display:flex;align-items:center;gap:var(--sp-1);min-width:0;font-weight:800;font-size:var(--fs-2);letter-spacing:-.01em;white-space:nowrap;overflow:hidden}.chess__saying{min-width:0;overflow:hidden;text-overflow:ellipsis}.chess__badge{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:var(--r-sm);background:var(--wash-3);color:#fff;font-size:var(--fs-1);font-weight:800;line-height:1}.chess__badge[hidden]{display:none}.chess__status.is-thinking{color:var(--wash-7)}.chess__status.is-check{color:var(--check)}.chess__status.is-check .chess__badge{background:var(--check);color:#2a0e06;animation:chess-pulse 1.1s ease-in-out infinite}.chess__status.is-over .chess__badge{background:var(--brass);color:#26180a}.chess__status.is-hint{color:var(--brass)}.chess__status.is-hint .chess__badge{background:var(--brass);color:#26180a}.chess__dots{display:inline-flex;gap:var(--sp-1);margin-left:4px}.chess__dots i{width:4px;height:4px;border-radius:50%;background:currentColor;animation:chess-blink 1.1s ease-in-out infinite}.chess__dots i:nth-child(2){animation-delay:.18s}.chess__dots i:nth-child(3){animation-delay:.36s}@keyframes chess-blink{0%,to{opacity:.25}50%{opacity:1}}.chess__actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-2)}.chess .gk-btn{min-height:44px;padding:0 var(--sp-2);font-size:var(--fs-1)}.chess .gk-btn.is-armed{background:var(--brass);border-color:var(--brass);color:#26180a}.chess__ctl{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--sp-2);min-width:0}.chess__lbl{display:none}@container (min-width: 40rem){.chess__lbl{display:block;font-size:var(--fs-1);font-weight:700;color:var(--wash-7)}}.chess__seghost{display:block;min-width:0}.chess .chess__seg{min-height:50px}.chess .chess__seg .gk-seg__opt{min-height:44px;padding:0 var(--sp-1)}.chess .chess__seg .gk-seg__opt:active{transform:scale(.94)}@container (min-width: 40rem){.chess__actions{grid-template-columns:repeat(2,minmax(0,1fr));align-content:start}.chess__actions .gk-btn:last-child{grid-column:1 / -1}.chess__ctl{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto;align-content:start}.chess__lbl{display:block;font-size:var(--fs-1);font-weight:700;color:var(--wash-7);white-space:nowrap}}.chess__board{position:relative;width:var(--fit);height:var(--fit);justify-self:center;align-self:center;border-radius:var(--r-sm);overflow:hidden;background:var(--sq-dark);box-shadow:0 0 0 1px var(--board-edge),var(--e-3);touch-action:pan-y;cursor:pointer}.chess__board:after{content:"";position:absolute;inset:0;z-index:20;pointer-events:none;border-radius:inherit;box-shadow:var(--ring-inset),inset 0 0 0 2px var(--scrim-2),var(--e-sink),inset 0 0 26px var(--scrim-1)}.chess__sq{position:absolute;width:12.5%;height:12.5%}.chess__sq--light{background:radial-gradient(120% 120% at 28% 18%,var(--wash-4),transparent 70%),var(--sq-light)}.chess__sq--dark{background:radial-gradient(120% 120% at 28% 18%,var(--wash-1),transparent 70%),var(--sq-dark)}.chess__sq:before{content:"";position:absolute;inset:0;pointer-events:none}.chess__sq.is-last:before{background:var(--last)}.chess__sq.is-selected:before{background:var(--sel)}.chess__sq.is-check:before{background:radial-gradient(circle at 50% 50%,var(--check) 0%,rgb(226 84 47 / .66) 44%,transparent 80%);animation:chess-pulse 1.1s ease-in-out infinite}.chess__sq.is-mate:before{background:radial-gradient(circle at 50% 50%,rgb(194 27 46 / .85) 0%,rgb(194 27 46 / .45) 55%,transparent 82%);box-shadow:inset 0 0 0 max(3px,calc(var(--sq) * .07)) var(--mate);animation:chess-mate .42s var(--ease-out) 1 both}@keyframes chess-pulse{0%,to{opacity:.55}50%{opacity:1}}@keyframes chess-mate{0%{transform:scale(.72);opacity:0}55%{transform:scale(1.06);opacity:1}to{transform:scale(1);opacity:1}}.chess__sq.is-press{box-shadow:inset 0 0 0 3px var(--wash-7);filter:brightness(1.08)}.chess__sq.is-refused{animation:chess-refuse .3s var(--ease-out) 1 both}@keyframes chess-refuse{0%,to{box-shadow:inset 0 0 0 0 transparent}35%{box-shadow:inset 0 0 0 4px var(--mate)}70%{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--chess-check) 50%,transparent)}}.chess__sq.is-cursor{box-shadow:inset 0 0 0 3px var(--brass),inset 0 0 0 5px var(--scrim-3);z-index:2}.chess__board:focus{outline:none}.chess__board:focus-visible{outline:3px solid var(--brass);outline-offset:2px}.chess__sq.is-dot:after{content:"";position:absolute;inset:35%;border-radius:50%;background:var(--dot);pointer-events:none}.chess__sq.is-ring:after{content:"";position:absolute;inset:3%;border-radius:50%;box-sizing:border-box;border:calc(var(--sq) * .11) solid var(--dot);pointer-events:none}.chess__sq.is-hover{box-shadow:inset 0 0 0 3px var(--wash-6)}.chess__sq.is-hover.is-dot,.chess__sq.is-hover.is-ring{box-shadow:inset 0 0 0 4px var(--wash-8)}.chess__sq.is-hover.is-dot:after{inset:30%}@media(hover:hover)and (pointer:fine){.chess__sq.is-mine:hover{box-shadow:inset 0 0 0 3px var(--wash-6);cursor:grab}.chess__sq.is-mine:hover:before{background:#ffc94a38}.chess__board:has(.is-dragging) .chess__sq.is-mine:hover{cursor:grabbing}}.chess__coord{position:absolute;font-size:max(7px,calc(var(--sq) * .155));font-weight:700;line-height:1;letter-spacing:0;pointer-events:none}.chess__coord--rank{top:5.5%;left:6%}.chess__coord--file{right:6%;bottom:3.5%}.chess__sq--light .chess__coord{color:#3c6a4a}.chess__sq--dark .chess__coord{color:#e9e2c8}.chess__pieces{position:absolute;inset:0;pointer-events:none}.chess__piece{position:absolute;width:12.5%;height:12.5%;will-change:transform;pointer-events:auto;touch-action:pan-y}.chess:not(.chess--as-b) .chess__piece--w,.chess.chess--as-b .chess__piece--b{touch-action:none}.chess__piece img{display:block;width:100%;height:100%;filter:drop-shadow(0 1px 1.2px rgb(0 0 0 / .34));transition:transform .14s var(--ease-back),filter .14s;pointer-events:none}.chess__taken-list img{width:19px;height:19px;margin-right:-6px;flex:none;display:block;filter:drop-shadow(0 1px 1px rgb(0 0 0 / .45))}.chess__taken-list img:last-child{margin-right:0}.chess__piece.is-dragging{z-index:30}.chess__piece.is-dragging img{transform:translateY(-16%) scale(1.22);filter:drop-shadow(0 12px 14px rgb(0 0 0 / .5))}.chess__board:has(.is-dragging){cursor:grabbing}.chess__piece.is-mated img{transform:rotate(72deg) translateY(-6%);transition:transform .42s var(--ease-back)}.chess__promo{position:absolute;inset:0;z-index:40}.chess__promo[hidden]{display:none}.chess__promo-shade{position:absolute;inset:0;background:#140c069e;cursor:default}.chess__promo-col{position:absolute;width:max(12.5%,44px);height:50%;display:flex;flex-direction:column}.chess__promo-col.is-last-file{margin-left:calc(12.5% - max(12.5%,44px))}.chess__promo-col.is-up{flex-direction:column-reverse}.chess__promo-btn{all:unset;box-sizing:border-box;flex:1 1 0;display:grid;place-items:center;margin:2%;border-radius:50%;background:var(--sq-dark);box-shadow:0 0 0 2px var(--wash-8),var(--e-2);cursor:pointer;transition:transform .12s var(--ease-out),background-color .12s}.chess__promo-btn svg{width:88%;height:88%}.chess__promo-btn:hover,.chess__promo-btn:focus-visible{background:var(--brass);transform:scale(1.06);outline:none}.chess__promo-btn:active{transform:scale(.94)}@media(prefers-reduced-motion:reduce){.chess__sq.is-check:before{animation:none;opacity:.9}.chess__sq.is-mate:before{animation:none}.chess__sq.is-refused{animation-duration:.12s}.chess__status.is-check .chess__badge{animation:none}.chess__dots i{animation:none;opacity:.8}.chess__piece svg,.chess__promo-btn,.chess__seat{transition:none}.chess__piece.is-mated img{transition:none}}@container (max-width: 39.9375rem){.chess--tight{--pad: 0px}.chess--tight .chess__board{border-radius:0}.chess--tight .chess__seat,.chess--tight .chess__moves,.chess--tight .chess__status,.chess--tight .chess__actions,.chess--tight .chess__ctl{margin-inline:8px}}