#checkers-screen{position:relative;isolation:isolate;background:radial-gradient(ellipse at 50% 62%,#183c69 0,#0b183b 57%,#090f2a 100%);color:#ecf5ff;overflow:hidden;max-width:none;min-height:100dvh}
#checkers-screen:before,#checkers-screen:after{content:'';position:absolute;inset:-15%;z-index:-1;pointer-events:none}
#checkers-screen:before{background:radial-gradient(circle at 22% 18%,#9fd5ff 0 1px,transparent 2px),radial-gradient(circle at 72% 31%,#fff 0 1px,transparent 2px),radial-gradient(circle at 42% 74%,#b7cbff 0 1px,transparent 2px),radial-gradient(circle at 84% 82%,#fff 0 1.5px,transparent 3px);background-size:121px 133px,181px 161px,159px 209px,223px 187px;opacity:.65;animation:checkers-stars 44s linear infinite alternate}
#checkers-screen:after{background:radial-gradient(ellipse at 15% 65%,#5155bd36,transparent 48%),radial-gradient(ellipse at 84% 26%,#2cb8da2c,transparent 44%),radial-gradient(ellipse at 63% 84%,#ea536022,transparent 50%);animation:checkers-nebula 18s ease-in-out infinite alternate}
#checkers-screen .family-game-head h1{color:#fff;text-shadow:0 3px 0 #385a8e,0 0 25px #9abff6}
#checkers-screen .home-kicker{color:#b9daff}
#checkers-screen .family-nav button{background:linear-gradient(#e6f5ff,#abc7e1);color:#214267;box-shadow:0 4px #55799e}
#checkers-screen .family-game-panel{position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 50% 25%,#254b78d9,#101f48ec 67%,#09122e);border-color:#b5d9f7;box-shadow:inset 0 1px #fff9,0 8px 0 #30587b,0 22px 42px #020714a1}
#checkers-screen .family-game-panel:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 19% 20%,#fff 0 1px,transparent 2px),radial-gradient(circle at 68% 58%,#a9dafe 0 1px,transparent 2px),radial-gradient(circle at 81% 87%,#fff 0 1px,transparent 2px);background-size:103px 109px,157px 143px,211px 167px;opacity:.7;animation:checkers-stars 30s linear infinite alternate}
#checkers-screen .family-mode-note{color:#bfe7ff;letter-spacing:.05em}
#checkers-screen .family-status{color:#fff;text-shadow:0 2px 5px #061634,0 0 12px #79c8ff}
#checkers-screen .family-rule{color:#d5e9ff}
.checkers-stage{position:relative;width:min(100%,520px);margin:0 auto;isolation:isolate}
#checkers-screen .checkers-board{position:relative;width:100%;border:clamp(7px,1vw,10px) solid #90b9dc;border-radius:18px;background:#0b1c3b;box-shadow:inset 0 0 0 2px #c1e8ff,0 7px 0 #355b83,0 13px 22px #020b1d9c,0 0 33px #5cacec70}
#checkers-screen .checker-square.light{background:linear-gradient(145deg,#6584a3db,#8fb3cece)}
#checkers-screen .checker-square.dark{background:linear-gradient(145deg,#122950,#233b68)}
#checkers-screen .checker-square.selected{background:linear-gradient(145deg,#5b56a7,#625cbd);box-shadow:inset 0 0 0 3px #b8e9ff}
#checkers-screen .checker-square.legal:after{width:35%;background:#baf7ffaf;box-shadow:0 0 0 2px #8deaff,0 0 14px #8deaff}
#checkers-screen .checker-square.capture:after{width:48%;background:#ffda7bc2;box-shadow:0 0 0 3px #ffe49b,0 0 17px #ffcb5f}
#checkers-screen .checker-square.can-capture .checker-piece{outline:2px solid #ffe38b;outline-offset:0;filter:drop-shadow(0 0 5px #ffd978)}
#checkers-screen .checker-piece{width:83%;border:0;border-radius:0;background:center/contain no-repeat!important;box-shadow:none!important;filter:drop-shadow(0 3px 2px #030d22b0) drop-shadow(0 0 3px #cceaff87);font-size:0;transform-origin:center;transition:filter .18s,scale .18s}
#checkers-screen .checker-piece.red{background-image:url('checkers-art/red-ship.svg')!important}
#checkers-screen .checker-piece.black{background-image:url('checkers-art/silver-ship.svg')!important;rotate:180deg}
#checkers-screen .checker-piece:empty:after{display:none}
#checkers-screen .checker-piece.king{color:transparent;text-shadow:none}
#checkers-screen .checker-piece.king:after{content:'★';position:absolute;left:36%;top:31%;width:28%;height:28%;display:grid;place-items:center;border-radius:50%;background:radial-gradient(#fffad0,#e5ad41);color:#694417;box-shadow:0 0 0 2px #fff4bb,0 0 9px #ffd76f;font:900 clamp(10px,1.7vw,18px)/1 system-ui;rotate:0deg}
#checkers-screen .checker-piece.black.king:after{rotate:180deg}
#checkers-screen .checker-square.selected .checker-piece{filter:drop-shadow(0 0 9px #b5ebff) drop-shadow(0 4px 2px #061331)}
#checkers-screen .checker-square:focus-visible{outline:3px solid #fff19a;outline-offset:-3px;z-index:3}
#checkers-screen .checker-end-turn{background:linear-gradient(#b8ffec,#74cfb8);color:#174b4c;box-shadow:0 4px #3f9c91}
#checkers-screen #checkers-again{background:linear-gradient(#fef4c8,#facb78);color:#684225;box-shadow:0 4px #c59251}
#checkers-screen .checkers-effects{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:4;border-radius:14px}
.checker-blast{position:absolute;left:var(--blast-x);top:var(--blast-y);width:0;height:0;pointer-events:none}
.checker-blast:before{content:'';position:absolute;width:16px;height:16px;left:-8px;top:-8px;border-radius:50%;background:#fff;box-shadow:0 0 0 7px #c9ecff,0 0 0 14px #ffb653,0 0 25px 18px #f47635;animation:checker-core .48s ease-out both}
.checker-blast:after{content:'';position:absolute;width:20px;height:20px;left:-10px;top:-10px;border:3px solid #fff1ba;border-radius:50%;box-shadow:0 0 0 3px #fca457;animation:checker-ring .6s ease-out both}
.checker-blast i{position:absolute;left:-2px;top:-2px;width:4px;height:9px;border-radius:3px;background:linear-gradient(#fff8c1,#f5813f);box-shadow:0 0 6px #ffc76a;transform:rotate(var(--angle));animation:checker-spark .62s ease-out both}
@keyframes checkers-stars{to{transform:translate(24px,-19px)}}
@keyframes checkers-nebula{to{opacity:.65;transform:scale(1.06)}}
@keyframes checker-core{0%{opacity:1;scale:.3}35%{opacity:1;scale:1.3}100%{opacity:0;scale:2.3}}
@keyframes checker-ring{0%{opacity:1;scale:.25}100%{opacity:0;scale:5}}
@keyframes checker-spark{0%{opacity:1;translate:0 0}100%{opacity:0;translate:var(--dx) var(--dy)}}
@media(max-width:760px){#checkers-screen .family-game-panel{padding:13px}#checkers-screen .checkers-board{width:100%}.checkers-stage{width:100%}#checkers-screen .checker-piece.king:after{font-size:clamp(9px,3vw,14px)}}
@media(min-width:700px) and (min-height:600px){body.roomy-play #checkers-screen .checkers-stage{grid-column:1;grid-row:1/7;width:min(100%,calc(var(--play-height,calc(100dvh - 170px)) - 26px));max-width:none;margin:auto}body.roomy-play #checkers-screen .checkers-board{width:100%}}
@media(min-width:700px) and (min-height:600px) and (orientation:portrait){body.roomy-play #checkers-screen .checkers-stage{grid-column:1/-1;grid-row:2;width:min(100%,calc(var(--play-height,calc(100dvh - 170px)) - 156px))}}
@media(prefers-reduced-motion:reduce){#checkers-screen:before,#checkers-screen:after,#checkers-screen .family-game-panel:before{animation:none}.checker-blast{display:none}#checkers-screen .checker-piece{transition:none}}
#checkers-screen .checkers-turn{display:inline-flex;align-items:center;justify-content:center;gap:11px;min-height:48px;padding:8px 19px;border:2px solid #ffd2d7;border-radius:18px;background:linear-gradient(145deg,#793143,#b95161);box-shadow:0 4px 0 #4d2032,0 0 22px #ee71836b;color:#fff;font-size:18px;font-weight:900;letter-spacing:.11em;text-shadow:0 2px #5a2531}
#checkers-screen .checkers-turn i{width:25px;height:25px;background:url('checkers-art/red-ship.svg') center/contain no-repeat;filter:drop-shadow(0 1px 2px #1b172d)}
#checkers-screen .checkers-turn.black{border-color:#c4e1f7;background:linear-gradient(145deg,#334d6e,#697f9f);box-shadow:0 4px 0 #1a2b44,0 0 22px #a8d6f766;text-shadow:0 2px #263a53}
#checkers-screen .checkers-turn.black i{background-image:url('checkers-art/silver-ship.svg');rotate:180deg}
#checkers-screen .checkers-turn.finished{background:linear-gradient(145deg,#65468b,#9174b5);border-color:#e4d7ff;box-shadow:0 4px 0 #443060}
#checkers-screen .checkers-turn.finished i{display:none}
#checkers-screen .checkers-board,#checkers-screen .checker-square,#checkers-screen .checker-piece{touch-action:none}
#checkers-screen .checker-square.drag-over{box-shadow:inset 0 0 0 4px #fff4aa,0 0 20px #fff0a8;z-index:2}
#checkers-screen .checker-square.drag-over:after{scale:1.28}
#checkers-screen .checker-square.drag-source .checker-piece{opacity:.32}
#checkers-screen .checker-drag-ghost{position:fixed;z-index:1000;width:60px;height:60px;pointer-events:none;filter:drop-shadow(0 10px 12px #020817) drop-shadow(0 0 12px #a9e7ff);transform:scale(1.12)}
#checkers-screen .checker-square.can-move .checker-piece,#checkers-screen .checker-square.can-capture.can-move .checker-piece{outline:2px solid #69cfff;outline-offset:1px;filter:drop-shadow(0 0 4px #39bdff) drop-shadow(0 0 10px #258dff) drop-shadow(0 3px 2px #030d22b0)}
#checkers-screen .checker-square.can-move.selected .checker-piece{outline-color:#c4f6ff;filter:drop-shadow(0 0 10px #a6f4ff) drop-shadow(0 0 17px #2b9fff)}
@media(max-width:760px){#checkers-screen .checkers-turn{min-height:43px;padding:6px 12px;font-size:15px;letter-spacing:.07em}#checkers-screen .checkers-turn i{width:22px;height:22px}}