.dwrap { display: flex; flex-direction: column; align-items: center; gap: 20px;
         padding: 36px 30px; border-radius: var(--r-lg); background: var(--panel); width: min(100%, 620px); }

.gems { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.gem {
  width: clamp(46px, 7vw, 68px);
  aspect-ratio: 1;
  border-radius: var(--r);
  background: var(--panel-2);
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(.7);
}
.gem.in { animation: gemin .3s var(--ease) forwards; }
.gem.best { box-shadow: 0 0 0 2px var(--green); }
@keyframes gemin { to { opacity: 1; transform: scale(1); } }
.gem svg { width: 62%; height: 62%; }

.dwrap > b { font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); }
.dwrap > b.win { color: var(--green); }
.dwrap .note { font-size: 13.5px; color: var(--faint); text-align: center; }

.paytable { display: flex; flex-direction: column; gap: 1px; border-radius: var(--r-sm); overflow: hidden; }
.paytable .prow { display: flex; align-items: center; justify-content: space-between; gap: 10px;
                  padding: 7px 12px; background: var(--panel-2); font-size: 12.5px; color: var(--muted); }
.paytable .prow b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.paytable .prow.landed { background: var(--green-dim); }
.paytable .prow.landed b { color: var(--green); }
#deal { width: 100%; }