.gold { color: var(--brass); font-variant-numeric: tabular-nums; }

.sol {
  --cw: clamp(40px, 11.4vw, 96px);
  --h: calc(var(--cw) * 1.4);
  display: grid; grid-template-columns: repeat(7, var(--cw)); justify-content: space-between;
  row-gap: calc(var(--h) * .35);
  padding: clamp(10px, 2.4vw, 24px);
  border: 10px solid var(--wood); border-radius: 22px;
  background: radial-gradient(ellipse at 50% 30%, var(--felt) 0%, var(--felt-deep) 100%);
  box-shadow: inset 0 0 0 2px var(--brass-dim), inset 0 0 60px rgba(0, 0, 0, .45), 0 18px 40px rgba(0, 0, 0, .5);
  user-select: none; -webkit-user-select: none;
}
.sol .pile { position: relative; width: var(--cw); min-height: var(--h); border-radius: calc(var(--cw) * .1); }
.sol .slot { border: 1.5px dashed rgba(236, 227, 203, .25); display: grid; place-items: center; color: rgba(236, 227, 203, .28); font-size: calc(var(--cw) * .5); }
.sol .pile .card { position: absolute; left: 0; cursor: pointer; }
.sol .card.back { cursor: default; }
.sol .pile[data-pile="stock"] .card.back, .sol .pile[data-pile="stock"] { cursor: pointer; }
.sol .card.sel { outline: 3px solid var(--brass); outline-offset: 1px; box-shadow: 0 0 18px rgba(209, 168, 79, .55); z-index: 5; }
.sol .recycle { font-size: calc(var(--cw) * .45); }
.sol .stock-count { position: absolute; left: 0; right: 0; bottom: 4%; text-align: center; font-size: 11px; font-weight: 800; color: var(--paper); text-shadow: 0 1px 2px #000; pointer-events: none; }
.p-stock { grid-column: 1; grid-row: 1; }
.p-waste { grid-column: 2; grid-row: 1; }
.p-found0 { grid-column: 4; grid-row: 1; }
.p-found1 { grid-column: 5; grid-row: 1; }
.p-found2 { grid-column: 6; grid-row: 1; }
.p-found3 { grid-column: 7; grid-row: 1; }

.sol-foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; color: var(--muted); font-size: 13px; }
.sol-foot p { margin: 0; max-width: 60ch; }
.sol-foot .b { padding: 10px 18px; }