/* The wheel's own look, on the game template (static/game.css styles the shell): the wheel (drawn by wheel.js on a
   canvas, like the roulette wheel) on the flat stage, in the Inlay pass: no pool of light behind it, the segments in the
   multiplier ladder, and the multipliers under it as cut swatches in the number face. */

.wf-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; gap: 12px; padding: 22px 14px 14px; }
.wf-table { position: relative; display: grid; place-items: center; width: 100%; }
.wf-wheel-wrap { position: relative; width: min(540px, 92%); }
.wf-wheel { display: block; width: 100%; aspect-ratio: 236 / 194; }

.wf-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 0; padding: 0; list-style: none;
  color: var(--ink-2); font: 700 17px/1 var(--f-num); font-variant-numeric: tabular-nums; }
.wf-legend li { display: inline-flex; align-items: center; gap: 7px; }
.wf-legend i { width: 12px; height: 12px; clip-path: polygon(3px 0, 100% 0, 100% 9px, 9px 100%, 0 100%, 0 3px); }

@media (max-width: 899px) {
  .gm[data-game="wheel"] .gm-play { min-height: 0; }
  .wf-stage { padding: 18px 8px 12px; gap: 10px; }
  .wf-wheel-wrap { width: 100%; }
}