.reels {
  --cell: clamp(4rem, 17vw, 6.5rem);
  position: relative;
  display: flex;
  gap: 0.75rem;
}

/* Frame around the middle row, the only one that pays. */
.reels::after {
  content: "";
  position: absolute;
  inset: var(--cell) -0.5rem;
  border: 3px solid var(--brass);
  border-radius: 14px;
  pointer-events: none;
}

.reels.won::after {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brass) 35%, transparent);
}

.reel {
  width: var(--cell);
  height: calc(var(--cell) * 3);
  overflow: hidden;
  border-radius: 14px;
  /* Ivory reel strips, the same in both themes. */
  background: #f8f4e9;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.25);
  mask-image: linear-gradient(rgb(0 0 0 / 0.35), #000 30%, #000 70%, rgb(0 0 0 / 0.35));
}

.strip {
  will-change: transform;
}

.cell {
  display: grid;
  place-items: center;
  height: var(--cell);
  font-size: calc(var(--cell) * 0.55);
  line-height: 1;
}

.paytable {
  width: min(100%, 30rem);
  font-size: 0.9375rem;
}

.paytable p {
  margin-bottom: 0.35rem;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 600;
}

.paytable ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.25rem 2.5rem;
}

.paytable li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.paytable span {
  letter-spacing: 0.1em;
}

.paytable b {
  font-weight: 700;
}