/* Chess: a glass chessboard with glossy pieces. */
.bg-tray[data-game="tactics"] { --tint: 92, 110, 150; --edge-rgb: 40, 52, 80; }
.ch-board { border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.ch-sq { position: relative; }
.ch-sq.lt { background: linear-gradient(160deg, rgba(246, 240, 226, .96), rgba(232, 224, 204, .92)); }
.ch-sq.dk { background: linear-gradient(160deg, rgba(122, 146, 190, .95), rgba(96, 120, 166, .95)); }
.ch-sq.lastmv::before { content: ''; position: absolute; inset: 0; background: rgba(245, 197, 66, .38); }
.ch-sq.incheck::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(229, 72, 77, .85), rgba(229, 72, 77, .15) 70%); }
.ch-sq.sel { box-shadow: inset 0 0 0 4px #F5C542; }
.ch-sq.capt::after { content: ""; position: absolute; inset: 6%; width: auto; aspect-ratio: auto; border-radius: 50%; border: 4px solid rgba(229, 72, 77, .7); background: none; box-shadow: none; z-index: 2; }
.my-turn .ch-sq.can { cursor: pointer; }
.ch-sq.hint { animation: hint-glow 1s ease-in-out infinite alternate; }
.ch-pc { position: relative; z-index: 1; width: 88%; height: 88%; display: flex; transition: transform .15s; }
.ch-pc svg { width: 100%; height: 100%; overflow: visible; }
.ch-pc.w svg { fill: #FBF7EC; stroke: #3A3428; stroke-width: 1.3; stroke-linejoin: round; filter: drop-shadow(0 2px 1.5px rgba(0, 0, 0, .35)); }
.ch-pc.b svg { fill: #23262E; stroke: #0B0C10; stroke-width: 1.1; stroke-linejoin: round; filter: drop-shadow(0 2px 1.5px rgba(0, 0, 0, .45)); }
.ch-pc.w .eye { fill: #3A3428; stroke: none; } .ch-pc.b .eye { fill: #C9CED8; stroke: none; }
.ch-pc .cut { fill: none; stroke-width: 1.6; } .ch-pc.w .cut { stroke: #3A3428; } .ch-pc.b .cut { stroke: #9AA1AE; }
.ch-pc::after { content: ''; position: absolute; left: 30%; top: 12%; width: 22%; height: 26%; border-radius: 50%; background: radial-gradient(rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 70%); pointer-events: none; }
.ch-pc.b::after { opacity: .5; }
.ch-sq.sel .ch-pc { transform: translateY(-6%) scale(1.06); }
.ch-pc.arrive { animation: pc-pop .32s cubic-bezier(.3, 1.6, .5, 1) both; }
.ch-file, .ch-rank { position: absolute; font: 700 clamp(8px, 1.5vw, 11px) var(--body); color: rgba(20, 33, 58, .55); pointer-events: none; z-index: 3; }
.ch-file { right: 4%; bottom: 2%; } .ch-rank { left: 4%; top: 2%; }
.ch-sq.dk .ch-file, .ch-sq.dk .ch-rank { color: rgba(255, 255, 255, .75); }