/* Diamonds' own look, on the game template (static/game.css styles the shell and the .gm-cell primitive): five cut
   cells for the gems, the gold brackets that join matches under them, and the pay cells with the ladder drawn as a gold
   underline (silver for the pair, the money-back hand; gold for five of a kind, the top). */

.dm-stage { position: relative; flex: 1; min-height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: 12px; container-type: inline-size; }
.dm-stage .gm-cell { pointer-events: none; cursor: default; }
.dm-top { position: relative; width: min(100cqw - 28px, 500px); }
.dm-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.dm-row .gm-cell { aspect-ratio: 1; }
.dm-row .gm-cell > i svg { width: 62%; height: 62%; }
.dm-row .gm-cell.ghost > i { opacity: .45; }
.dm-br { display: block; width: 100%; height: 30px; overflow: visible; }
.dm-br path { fill: none; stroke: var(--gold-line); stroke-width: 1.5; stroke-linejoin: round; transition: stroke .2s; }
.dm-br path.b-win { stroke: var(--win); } .dm-br path.b-back { stroke: var(--back); }
.dm-pay { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; width: min(100cqw - 28px, 640px); }
.dm-pay .gm-cell { --k: 8px; height: 60px; }
.dm-pay .gm-cell > i { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.dm-pay small { font: 500 13px/1 var(--f-ui); color: var(--ink-2); white-space: nowrap; }
.dm-pay b { font: 800 20px/1 var(--f-num); font-variant-numeric: tabular-nums; color: var(--ink); }
.dm-pay .gm-cell > i::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: var(--u); background: var(--gold); }
.dm-pay .bk b { color: var(--back); } .dm-pay .tp b { color: var(--gold); }
.dm-pay .gm-cell.is-win { --fill: var(--cell); } .dm-pay .gm-cell.is-win b { color: var(--win); }
.dm-pay .gm-cell.is-back { --fill: var(--cell); }
.dm-pay.done .gm-cell:not(.is-win):not(.is-back) b { color: var(--ink-3); }
.dm-pay .gm-cell.is-win > i::after, .dm-pay .gm-cell.is-back > i::after { opacity: 0; }
.dm-pay.done .gm-cell:not(.is-win):not(.is-back) > i::after { opacity: .35; }

@media (max-width: 899px) {
  .gm[data-game="diamonds"] .gm-play { min-height: 0; }
  .dm-stage { gap: 12px; min-height: 320px; }
  .dm-row { gap: 8px; }
  .dm-pay { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dm-pay .gm-cell { height: 54px; }
}