/* Dominoes: what only the snug has. The rest comes from /rooms/room.css. */

/* the race to 100, in the scoreboard */
.score-bar { display: block; height: 4px; margin: 6px 0 2px; border-radius: 2px; background: rgba(255,255,255,0.1); overflow: hidden; }
.score-bar i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #c99b4f, #f1d59a); transition: width .6s ease; }

/* the games shop's swatches */
.swatch-tiles { gap: 14px; background: #10301c; }
.swatch-tiles .tile { position: relative; width: 26px; height: 46px; border-radius: 4px; background: var(--face); box-shadow: 0 3px 6px rgba(0,0,0,.6), inset 0 -2px 0 var(--back);
  display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr) 2px repeat(2, 1fr); padding: 4px; gap: 1px; place-items: center; }
.swatch-tiles .tile b { width: 5px; height: 5px; border-radius: 50%; background: #111; }
.swatch-tiles.dark .tile b { background: #eee; }
.swatch-tiles .tile span { grid-column: 1 / 3; width: 100%; height: 1px; background: rgba(0,0,0,0.5); }
.swatch-tiles.dark .tile span { background: rgba(255,255,255,0.4); }
.swatch-pips { gap: 10px; background: #d6cdb4; }
.swatch-pips i { width: 12px; height: 12px; border-radius: 50%; background: #111; box-shadow: inset 0 1px 2px rgba(0,0,0,.6); }
.swatch-pips.colour .n1 { background: #2a5bd6; } .swatch-pips.colour .n2 { background: #c42020; } .swatch-pips.colour .n3 { background: #1d8a35; }
.swatch-pips.colour .n4 { background: #9a2fa0; } .swatch-pips.colour .n5 { background: #e07a10; } .swatch-pips.colour .n6 { background: #111; }
.swatch-pips.gold i { background: radial-gradient(circle at 35% 30%, #fff3cf, #d9a54e 60%, #8a5d1f); }
.swatch-table { background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--cloth) 80%, #fff 10%), var(--cloth)); box-shadow: inset 0 0 0 6px #4a2a14; }
.swatch-table.oak { background: repeating-linear-gradient(95deg, #7a4f26 0 6px, #6b431f 6px 9px, #84592c 9px 15px); }