/* Backgammon: what only its board has. The rest comes from /rooms/room.css. */

/* a checker 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.white { background: radial-gradient(circle at 35% 30%, #f4ead2, #b9a67e); }
.piece-icon.black { background: radial-gradient(circle at 35% 30%, #5a5a60, #111214); }
.side .piece-icon { float: right; margin: 3px 0 0 8px; }

/* the games shop's swatches: a strip of points, a few checkers, a pair of dice */
.swatch-bg-board { gap: 0; align-items: stretch; justify-content: center; padding: 6px 10px; background: var(--field);
  box-shadow: inset 0 0 0 6px var(--frame), inset 0 0 0 7px rgba(217,178,107,0.55); }
.swatch-bg-board i { width: 18px; margin-bottom: 18px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.swatch-bg-board i.d { background: var(--dark); }
.swatch-bg-board i.l { background: var(--light); }
.swatch-bg-board.marble { filter: saturate(.7) contrast(1.05); }
.swatch-bg-checkers { gap: 8px; background: #1d2a20; }
.swatch-bg-checkers i { width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 -3px 5px rgba(0,0,0,.45), 0 3px 6px rgba(0,0,0,.6), inset 0 0 0 5px rgba(255,255,255,0.07); }
.swatch-bg-checkers .b { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--b) 70%, #fff), var(--b) 60%); }
.swatch-bg-checkers .w { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--w) 70%, #fff), var(--w) 60%); }
.swatch-bg-checkers.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-bg-checkers.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.3); }
.swatch-bg-checkers.wood i { box-shadow: inset 0 -3px 5px rgba(0,0,0,.45), 0 3px 6px rgba(0,0,0,.6), inset 0 0 0 4px rgba(0,0,0,0.12), inset 0 0 0 9px rgba(255,255,255,0.05); }
.swatch-bg-dice { gap: 12px; background: #1d2a20; }
.swatch-bg-dice i { --p: radial-gradient(circle, var(--pip) 0 3px, transparent 3.6px); width: 30px; height: 30px; border-radius: 6px; background-color: var(--body);
  box-shadow: inset 0 -3px 4px rgba(0,0,0,.35), 0 4px 7px rgba(0,0,0,.6); background-repeat: no-repeat; background-size: 10px 10px; }
.swatch-bg-dice i.five { background-image: var(--p), var(--p), var(--p), var(--p), var(--p); background-position: 4px 4px, 16px 4px, 10px 10px, 4px 16px, 16px 16px; transform: rotate(-12deg); }
.swatch-bg-dice i.three { background-image: var(--p), var(--p), var(--p); background-position: 4px 4px, 10px 10px, 16px 16px; transform: rotate(9deg) translateY(4px); }
.swatch-bg-dice.glass i { opacity: .88; box-shadow: inset 0 -3px 4px rgba(0,0,0,.25), 0 0 10px rgba(255,120,120,0.25); }
.swatch-bg-dice.metal i { box-shadow: inset 0 -3px 4px rgba(0,0,0,.35), inset 0 2px 3px rgba(255,255,255,.4), 0 4px 7px rgba(0,0,0,.6); }