/* Every slot machine's own look, on the game template (static/game.css styles the shell): the machine is drawn on one
   canvas (static/slots.js: the strip, the reel wells and the symbols, on the flat stage); the bonus buy and the player's
   free spins sit in the panel as hairline buttons; the paytable under the game draws each symbol as on the reels. */

.sl-stage { position: relative; flex: 1; min-height: 340px; }
.sl-stage canvas { position: absolute; inset: 0; display: block; touch-action: manipulation; }

@media (max-width: 899px) {
  .gm:has(.sl-stage) .gm-play { min-height: 0; }
  .sl-stage { flex: none; min-height: 0; height: 300px; }                /* 5 reels of 3 */
  .sl-stage[data-mode="tumble"] { height: 360px; }                        /* 6 x 5 */
  .sl-stage[data-mode="cluster"] { height: 400px; }                       /* 7 x 7 */
}
@media (max-width: 380px) { .sl-stage { height: 276px; } .sl-stage[data-mode="tumble"] { height: 330px; } .sl-stage[data-mode="cluster"] { height: 370px; } }

/* the bonus buy and the free spins: hairline buttons in the panel (the gold fill is the Spin's alone) */
.sl-buy, .sl-free { --k: 10px; --fill: var(--panel); --lnc: rgb(216 165 72 / .55); position: relative; isolation: isolate;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; height: 48px; padding: 0 16px;
  border: 0; border-radius: 0; background: var(--lnc); color: var(--ink); font: 600 15px/1 var(--f-ui); cursor: pointer;
  clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k));
  transition: transform var(--t-press) var(--e-out); }
.sl-buy::after, .sl-free::after { content: ""; position: absolute; inset: 1.5px; z-index: -1; background: var(--fill); transition: background-color var(--t-hover);
  clip-path: polygon(calc(var(--k) - .88px) 0, 100% 0, 100% calc(100% - calc(var(--k) - .88px)), calc(100% - calc(var(--k) - .88px)) 100%, 0 100%, 0 calc(var(--k) - .88px)); }
.sl-buy b, .sl-free b { font: 700 17px/1 var(--f-num); font-variant-numeric: tabular-nums; color: var(--gold); }
.sl-buy:hover:not(:disabled), .sl-free:hover:not(:disabled) { --lnc: var(--gold-line); --fill: var(--cell); }
.sl-buy:active:not(:disabled), .sl-free:active:not(:disabled) { transform: scale(.98); }
.sl-buy:disabled, .sl-free:disabled { cursor: default; opacity: .45; }
.sl-buy.armed { --lnc: var(--gold); --fill: var(--cell-hi); }
.sl-buy.armed b { color: var(--gold-hi); }
.sl-free { --lnc: rgb(30 226 127 / .55); margin-top: 8px; }
.sl-free[hidden] { display: none; }
.sl-free b { color: var(--win); }
.sl-free:hover:not(:disabled) { --lnc: var(--win); }

/* the paytable: the symbols drawn as on the reels */
.sl-pays { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sl-pays th { padding: 6px 8px; color: var(--muted); font-size: 13px; font-weight: 600; text-align: right; }
.sl-pays td { padding: 4px 8px; border-top: 1px solid var(--line); text-align: right; font-weight: 600; }
.sl-pays td:first-child { text-align: left; }
.sl-face { display: block; width: 36px; height: 36px; }
.sl-face.sm { display: inline-block; width: 20px; height: 20px; vertical-align: -5px; }
.sl-pays-note { margin-top: 10px; }
@media (max-width: 480px) {  /* the cluster table's six columns fit a phone */
  .sl-pays th, .sl-pays td { padding: 4px 3px; font-size: 13px; }
}
@media (max-width: 420px) { .gm:has(.sl-stage) .gm-title canvas { display: none; } }  /* the machine's name gets the room */