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

/* pegs left, large, at the top; the board, the time under it */
.pg-score { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 3; pointer-events: none;
  display: grid; justify-items: center; text-shadow: 0 0 18px rgba(255, 210, 140, .35); }
.pg-score:empty { display: none; }
.pg-score strong { font: 300 44px/1 "Segoe UI", Arial, sans-serif; color: #fff4dc; font-variant-numeric: tabular-nums; }
.pg-score small { font-size: 12px; color: #d8c08a; letter-spacing: .12em; text-transform: uppercase; margin-top: 3px; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .pg-score { top: calc(64px + env(safe-area-inset-top, 0px)); }
  .pg-score strong { font-size: 36px; }
}


/* the shop */
.swatch-marbles { display: flex; gap: 8px; align-items: center; justify-content: center; min-height: 90px; height: 100%; background: radial-gradient(circle at 50% 40%, #3a2a1c, #120c08); }
.swatch-marbles i { width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0, var(--c) 30%, #0008 100%); box-shadow: 0 3px 6px #0008; }
.swatch-marbles.glass i { background: radial-gradient(circle at 35% 30%, #fff 0, var(--c) 25%, var(--c) 60%, #0006 100%); box-shadow: 0 3px 6px #0008, inset 0 0 6px #fff6; opacity: .92; }
.swatch-pegboard { min-height: 90px; height: 100%; display: grid; place-items: center; background: #0b0807; }
.swatch-pegboard b { width: 74px; height: 74px; border-radius: 50%; border: 4px solid var(--rim);
  background: radial-gradient(circle, #0009 0 3px, transparent 4px) 0 0 / 14px 14px, var(--wood); }
.swatch-desk { min-height: 90px; height: 100%; background: linear-gradient(180deg, var(--wall) 0 35%, var(--desk) 35% 100%); }