/* Four in a Row: what only the frame has. The rest comes from /rooms/room.css. */

/* each player's disc in the scoreboard */
.disc-icon { display: inline-block; width: 13px; height: 13px; border-radius: 50%; vertical-align: middle;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--disc) 65%, #fff), var(--disc) 62%);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--disc) 70%, #000), 0 0 0 1px rgba(255,255,255,0.15); }
.side .disc-icon { float: right; margin: 3px 0 0 8px; }

/* the toy shop's swatches */
.swatch-discs { gap: 8px; background: #16213f; }
.swatch-discs i { width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 4px rgba(0,0,0,0.22), inset 0 0 0 7px rgba(255,255,255,0.08), 0 3px 6px rgba(0,0,0,.5); }
.swatch-discs .one { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--one) 70%, #fff), var(--one) 60%); }
.swatch-discs .two { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--two) 70%, #fff), var(--two) 60%); }
.swatch-discs.metal i { box-shadow: inset 0 0 0 3px rgba(255,255,255,0.35), inset 0 -4px 6px rgba(0,0,0,.4), 0 3px 6px rgba(0,0,0,.5); }
.swatch-discs.glow i { box-shadow: 0 0 12px color-mix(in srgb, var(--one) 60%, transparent), inset 0 0 0 4px rgba(0,0,0,0.2); }
.swatch-frame { background: #2a1a0e; }
.swatch-frame b { display: grid; grid-template-columns: repeat(4, 12px); gap: 4px; padding: 6px; border-radius: 4px; background: var(--frame);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 3px 8px rgba(0,0,0,.5); }
.swatch-frame i { width: 12px; height: 12px; border-radius: 50%; background: #120c08; box-shadow: inset 0 2px 3px rgba(0,0,0,.8); }
.swatch-frame.metal b { background: linear-gradient(135deg, color-mix(in srgb, var(--frame) 60%, #fff), var(--frame) 50%, color-mix(in srgb, var(--frame) 70%, #000)); }
.swatch-frame.wood b { background: repeating-linear-gradient(100deg, var(--frame) 0 6px, color-mix(in srgb, var(--frame) 80%, #000) 6px 9px); }
.swatch-room { background: linear-gradient(var(--wall) 0 45%, #6a4326 45%); }
.swatch-room.cloth { background: linear-gradient(var(--wall) 0 45%, var(--cloth) 45%); }
.swatch-room i { width: 34px; height: 30px; border-radius: 3px; background: #0b2a7a; box-shadow: 0 4px 6px rgba(0,0,0,.5);
  -webkit-mask: radial-gradient(circle 4px, transparent 98%, #000) 0 0 / 11px 10px; mask: radial-gradient(circle 4px, transparent 98%, #000) 0 0 / 11px 10px; }