/* Cozy Checkers (checkers.html, checkersapp.js), on top of boardgame.css: mascot's painted tokens (acorn,
   pinecone; Pip and Wick as kings), the crowning square, a jump's path and a piece that has to jump. As the
   approved mockups (previews/games/checkers). */
/* the pieces are mascot's painted tokens (checkers/{128,256}): the disc, its rim and the picture in one image,
   kings with Pip or Wick and their crown. 256 px on the board, 128 in the player chips. */
.ck-board .gm-pc, .gm-who .gm-pc { background: center / contain no-repeat; border: 0; box-shadow: none; filter: drop-shadow(0 4cqh 3cqh rgba(0, 0, 0, .35)); }
.ck-board .gm-pc.lift { box-shadow: none; filter: drop-shadow(0 12cqh 7cqh rgba(0, 0, 0, .4)); }
.ck-board .gm-pc > span, .gm-who .gm-pc > span { display: none; }
.ck-board .gm-pc.a { background-image: url("/play/assets/checkers/256/acorn.png"); }
.ck-board .gm-pc.p { background-image: url("/play/assets/checkers/256/pinecone.png"); }
.ck-board .gm-pc.a.k { background-image: url("/play/assets/checkers/256/pip-king.png"); }
.ck-board .gm-pc.p.k { background-image: url("/play/assets/checkers/256/wick-king.png"); }
.gm-who .gm-pc.a { background-image: url("/play/assets/checkers/128/acorn.png"); }
.gm-who .gm-pc.p { background-image: url("/play/assets/checkers/128/pinecone.png"); }
.gm-who .gm-pc.a.k { background-image: url("/play/assets/checkers/128/pip-king.png"); }
.gm-who .gm-pc.p.k { background-image: url("/play/assets/checkers/128/wick-king.png"); }
.ck-board .gm-pc.k { width: 90%; height: 90%; }
/* a square that crowns: a honey dot with a crown */
.ck-board .gm-sq.to.crown::after { width: 52%; height: 52%; background: var(--pw-honey) center / 62% no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M2 14 1 3l6 5 5-7 5 7 6-5-1 11z' fill='%233B2A20'/%3E%3C/svg%3E");
  box-shadow: 0 0 0 3px var(--pw-cream); }
/* a piece that has to jump: a dashed honey ring */
.ck-board .gm-pc.must { outline: 3cqh dashed var(--pw-honey); outline-offset: 4cqh; }
/* a jump's path: a dashed honey line over the board (an SVG the app draws, in board squares) */
.ck-path { position: absolute; z-index: 4; pointer-events: none; overflow: visible; }
.ck-path path { fill: none; stroke: var(--pw-honey); stroke-width: .09; stroke-dasharray: .16 .14; stroke-linecap: round; stroke-linejoin: round; }
/* five pills: Wick's four levels and two players */
/* widths by label, so the longest ("Legendary", "2 players") get room and the short ones ("Easy", "Hard") don't
   take more than they need */
.ck-app .gm-levels { grid-template-columns: .85fr 1.1fr .85fr 1.25fr 1.15fr; gap: 4px; }
.ck-app .gm-levels .btn { font-size: 12.5px; padding: 8px 0; letter-spacing: -.01em; }
/* TV: the five pills in two rows of three, so each label has room at 2.4vh */
body.tv .ck-app .gm-levels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.tv .ck-app .gm-levels .btn { font-size: 2.4vh; padding: 1.1vh .3vh; letter-spacing: 0; }