/* Gin Rummy: what only the card room has. The rest comes from /rooms/room.css. */

/* hands won, as boxes on the score line */
.boxes { display: flex; gap: 3px; margin: 6px 0 2px; min-height: 9px; }
.boxes i { width: 9px; height: 9px; border-radius: 2px; background: linear-gradient(180deg, #f1d59a, #c99b4f); box-shadow: 0 0 4px rgba(217,178,107,0.5); }

.dock .go.knock { background: linear-gradient(180deg, #ffd38a, #d9902d); }
.dock .go.gin { background: linear-gradient(180deg, #ffe8a8, #e0a93a); box-shadow: 0 0 18px rgba(240,190,90,0.55); letter-spacing: .03em; }

/* the card room shop's swatches */
.swatch-backs { gap: 10px; background: #0d2a18; }
.swatch-backs canvas { border-radius: 4px; box-shadow: 0 3px 6px rgba(0,0,0,.55); }
.swatch-backs canvas:last-child { transform: rotate(8deg) translateX(-14px); }
.swatch-cloth { background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--cloth) 80%, #fff 12%), var(--cloth)); box-shadow: inset 0 0 0 6px #3b2312; }
.swatch-pad { background: #4a2e18; }
.swatch-pad i { display: flex; flex-direction: column; align-items: center; width: 52px; height: 46px; padding-top: 3px; font-style: normal; background: repeating-linear-gradient(180deg, var(--paper) 0 10px, var(--rule) 10px 11px);
  color: var(--ink); font: 11px/1.05 var(--gu-serif); box-shadow: 0 3px 6px rgba(0,0,0,.5); transform: rotate(-4deg); }
.swatch-pad b { font-style: italic; font-size: 12px; }