/* Checkers: what only the board has. The rest comes from /rooms/room.css. */

/* a piece of each colour in the scoreboard */
.piece-icon { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin: 5px 0 1px; vertical-align: middle; box-shadow: inset 0 -2px 3px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,0.15); }
.piece-icon.black { background: radial-gradient(circle at 35% 30%, #5a5a60, #111214); }
.piece-icon.white { background: radial-gradient(circle at 35% 30%, #e0645a, #8a1610); }
.side .piece-icon { float: right; margin: 3px 0 0 8px; }

/* the games shop's swatches */
.swatch-board { background: conic-gradient(var(--dark) 0 25%, var(--light) 0 50%, var(--dark) 0 75%, var(--light) 0) 0 0 / 28px 28px;
  box-shadow: inset 0 0 0 6px var(--frame), inset 0 0 0 7px rgba(217,178,107,0.6); }
.swatch-board.marble { filter: saturate(.6) contrast(1.05); }
.swatch-pieces { gap: 12px; background: #2a1a0e; }
.swatch-pieces i { width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 -3px 5px rgba(0,0,0,.5), 0 3px 6px rgba(0,0,0,.6), inset 0 0 0 4px rgba(255,255,255,0.06); }
.swatch-pieces .b { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--b) 70%, #fff), var(--b) 60%); }
.swatch-pieces .w { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--w) 70%, #fff), var(--w) 60%); }
.swatch-pieces.glass i { opacity: .85; box-shadow: inset 0 -3px 5px rgba(0,0,0,.3), 0 0 10px rgba(255,200,120,0.25); }
.swatch-pieces.metal i { box-shadow: inset 0 -3px 5px rgba(0,0,0,.5), 0 3px 6px rgba(0,0,0,.6), inset 0 0 0 3px rgba(255,255,255,0.25); }
.swatch-crown { background: #2a1a0e; }
.swatch-crown i { position: relative; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 18px; color: var(--mark, #f1d59a);
  background: radial-gradient(circle at 35% 30%, #e0645a, #8a1610 60%); box-shadow: inset 0 -3px 5px rgba(0,0,0,.5), 0 3px 6px rgba(0,0,0,.6); }
.swatch-crown.stack i { box-shadow: inset 0 -3px 5px rgba(0,0,0,.5), 0 4px 0 #6a120c, 0 7px 8px rgba(0,0,0,.6); transform: translateY(-3px); }
.swatch-crown.crown i { text-shadow: 0 0 6px var(--jewel, transparent); }