.game-checkers{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:center;max-width:1200px;margin:0 auto}.game-checkers.compact{gap:32px;max-width:980px}.game-checkers-text{text-align:left}.game-checkers-text h2{font-size:clamp(2rem,4vw,3.4rem);line-height:1.08;margin:.35em 0 .55em}.game-checkers-text .lead{color:#d6ebfdbf;font-size:1.05rem;line-height:1.55;margin:0 0 1em}.game-checkers-instruction{color:#00d892d9;font-size:.92rem;margin:0}.game-checkers-stage{width:100%;max-width:520px}.game-checkers-stage .game-stat-box{min-width:88px}#checkers-turn{display:inline-block;min-width:4.2em;text-align:center}.checkers-btn{appearance:none;background:#00d892;color:#000;border:none;border-radius:4px;padding:7px 14px;font-size:.9rem;font-weight:500;cursor:pointer;transition:filter .15s ease,transform .1s ease;margin-left:auto}.checkers-btn:hover{filter:brightness(1.15)}.checkers-btn:active{transform:scale(.97)}.checkers-board{position:relative;width:100%;aspect-ratio:1 / 1;background:#0006;border:1px solid rgba(214,235,253,.12);border-radius:6px;overflow:hidden;touch-action:none;outline:none;box-shadow:0 0 28px #0000004d}.checkers-board:focus-visible{outline:2px solid rgba(0,216,146,.6);outline-offset:3px}.checkers-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr)}.checkers-square{position:relative;width:100%;height:100%}.checkers-square.light{background:transparent}.checkers-square.dark{background:#b4bec838}.checkers-pieces-layer{position:absolute;inset:0;pointer-events:none}.checkers-piece{position:absolute;width:11%;height:11%;border-radius:50%;pointer-events:auto;cursor:grab;transition:left .45s cubic-bezier(.45,.05,.55,.95),top .45s cubic-bezier(.45,.05,.55,.95),transform .15s ease;will-change:left,top,transform;display:flex;align-items:center;justify-content:center}.checkers-piece.dragging{cursor:grabbing;transition:none;z-index:50;filter:brightness(1.08)}.checkers-piece.disabled{cursor:default}.checkers-piece.green{background:radial-gradient(circle at 50% 34%,#ffffff2e,#ffffff0a 42%,#0000001a 74%,#00000042),radial-gradient(circle at 50% 50%,#6f9d81,#578468 55%,#43664f 84%,#38543f);box-shadow:0 3px #00000059,0 6px 8px #00000073,inset 0 1px 1px #ffffff40,inset 0 -2px 3px #00000038}.checkers-piece.orange{background:radial-gradient(circle at 50% 34%,#fff3,#ffffff0d 42%,#0000001a 74%,#00000042),radial-gradient(circle at 50% 50%,#d2a06b,#b07a44 55%,#91612f 84%,#7a5026);box-shadow:0 3px #00000059,0 6px 8px #00000073,inset 0 1px 1px #ffffff47,inset 0 -2px 3px #00000038}.checkers-piece:before{content:"";position:absolute;width:72%;height:72%;border-radius:50%;border:1px solid rgba(0,0,0,.22);box-shadow:inset 0 1px 1px #ffffff1f,inset 0 -1px 2px #00000024;pointer-events:none}.checkers-piece:after{content:"";position:absolute;width:44%;height:44%;border-radius:50%;border:1px solid rgba(0,0,0,.16);box-shadow:inset 0 1px 1px #ffffff1a;pointer-events:none}.checkers-piece.king{box-shadow:0 3px #0000004d,0 6px #0003,0 9px 10px #00000080,inset 0 1px 1px #ffffff47,inset 0 -2px 3px #00000038,inset 0 0 0 2px #ffe09666}.checkers-piece.king:before{width:64%;height:64%;border:1px solid rgba(255,224,150,.45);box-shadow:inset 0 1px 1px #ffffff24,inset 0 -1px 2px #00000029}.checkers-piece.king:after{width:38%;height:38%;border:1px solid rgba(255,224,150,.35)}.checkers-piece .checkers-crown{position:absolute;font-size:clamp(.62rem,1.8vw,.95rem);color:#ffd977;z-index:3;line-height:1;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.75),0 0 3px rgba(0,0,0,.45)}.checkers-overlay[hidden]{display:none}.checkers-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#000000d1;border-radius:6px;z-index:100;text-align:center}.checkers-overlay-content{padding:24px}.checkers-overlay h3{font-size:1.65rem;margin:0 0 .4em}.checkers-overlay p{color:#d6ebfdbf;margin:0 0 1.2em}@media(max-width:860px){.game-checkers{grid-template-columns:1fr;gap:28px}.game-checkers-text{text-align:center}.game-checkers-stage{max-width:520px;margin:0 auto}}@media(max-width:520px){.checkers-overlay h3{font-size:1.4rem}}