/* Puso Checkers — Island Crossing (v110). Adapted from the package
   playable UI style block (~/workspace/puso-games/checkers/src/index.html).
   Every rule here is scoped to checkers classes, so nothing leaks
   onto other panels. Board fit is the package fit note: the board
   caps at 480px centred, the wrap at 680px on wide screens, and at
   420px and under the board gap is 1px with 2px padding — at a
   390px phone that is about 45.4px a square, above the 44px target.
   On a folded cover width near 344px the same arithmetic gives
   about 39.6px a square: honestly below the 44px target, above the
   24px minimum. That folded width is carried as owed Website
   verification, never claimed as a live pass, and the board is not
   shrunk below this fit note to hide it. */
.checkers-wrap { max-width: 520px; margin: 0 auto; padding: 8px; color: #fff; }
.checkers-wrap.checkers-day { color: #2b1a2a; }
.checkers-wrap h4 { font-size: 17px; margin: 8px 0 4px; }
.checkers-card { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); border-radius: 16px; padding: 12px; margin: 10px 0; }
.checkers-day .checkers-card { background: rgba(255, 255, 255, .75); border-color: #d8bfa0; }
.checkers-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 6px 0; }
.checkers-board { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; background: rgba(43, 26, 42, .13); border-radius: 12px; padding: 4px; max-width: 480px; margin: 10px auto; }
.checkers-sq { aspect-ratio: 1; border: 0; border-radius: 8px; position: relative; padding: 0; cursor: pointer; }
.checkers-sq:disabled { cursor: default; opacity: .9; }
.checkers-sq.checkers-sea { background: #cfe8e2; }
.checkers-day .checkers-sq.checkers-sea { background: #d9efe9; }
.checkers-sq.checkers-island { background: #5a2d52; box-shadow: inset 0 0 0 2px #e8b84b; }
.checkers-sq.checkers-last { box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px #e8b84b; }
.checkers-sq.checkers-dest { box-shadow: inset 0 0 0 3px #e8b84b; }
.checkers-sq.checkers-dest::after { content: ""; position: absolute; left: 38%; top: 38%; width: 24%; height: 24%; border-radius: 50%; background: #e8b84b; }
.checkers-sq.checkers-chain { box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px #e8b84b; }
.checkers-piece { width: 86%; height: 86%; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: auto; font-size: 22px; border: 2px solid; }
.checkers-piece.checkers-coral { background: #f2767f; border-color: #ffd9a0; color: #fff; }
.checkers-piece.checkers-gold { background: #f2c14e; border-color: #5a2d52; color: #3b1f3a; }
.checkers-piece.checkers-forced { box-shadow: 0 0 0 3px #e8b84b, 0 0 12px #e8b84b; }
.checkers-piece.checkers-king { box-shadow: inset 0 0 0 3px #fff; }
.checkers-piece.checkers-king::after { content: "✦"; position: absolute; top: -2px; right: 6px; font-size: 12px; color: #fff; }
.checkers-piece svg { width: 55%; height: 55%; }
.checkers-status { font-weight: 700; min-height: 22px; }
.checkers-msg { min-height: 20px; font-size: 14px; }
.checkers-small { font-size: 12px; opacity: .85; }
.checkers-hidden { display: none; }
.checkers-shore { font-size: 12px; opacity: .85; text-align: center; margin: 2px 0; }
.checkers-live { font-size: 13px; margin: 6px 0; }
.checkers-compare { height: 14px; border-radius: 7px; overflow: hidden; display: flex; background: rgba(255, 255, 255, .2); margin: 6px 0; }
.checkers-compare div { height: 100%; }
.checkers-compare .checkers-cc { background: #f2767f; }
.checkers-compare .checkers-gg { background: #f2c14e; }
.checkers-legend { display: flex; gap: 8px; align-items: center; margin: 6px 0; font-size: 14px; }
.checkers-legend svg { width: 34px; height: 34px; flex: none; }
.checkers-wrap.checkers-contrast .checkers-sq { box-shadow: inset 0 0 0 3px #000; }
.checkers-wrap.checkers-contrast .checkers-piece { border-width: 4px; }
.checkers-wrap.checkers-contrast .checkers-sq.checkers-island { background: #2b1a2a; }
.checkers-wrap.checkers-contrast .checkers-sq.checkers-sea { background: #fff; }
.checkers-wrap.checkers-large .checkers-piece { width: 92%; height: 92%; font-size: 26px; }
.checkers-wrap.checkers-large .checkers-board { gap: 1px; padding: 2px; }
.checkers-wrap.checkers-motion * { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) { .checkers-wrap * { transition: none !important; animation: none !important; } }
@media (max-width: 420px) { .checkers-wrap { padding: 8px; } .checkers-board { gap: 1px; padding: 2px; } }
@media (min-width: 700px) { .checkers-wrap { max-width: 680px; } }