.slots-board {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  height: 100%;
  min-height: 560px;
  padding: 18px 24px 20px;
  background:
    radial-gradient(700px 420px at 50% 40%, rgb(255 59 87 / 0.14), transparent 70%),
    linear-gradient(180deg, #1c0a12, var(--bg-0) 75%);
  transition: background 400ms;
}
.slots-board[data-machine="classic"] {
  background: radial-gradient(700px 420px at 50% 40%, rgb(255 197 61 / 0.12), transparent 70%), linear-gradient(180deg, #1b1406, var(--bg-0) 75%);
}
.slots-board[data-machine="tumble"] {
  background: radial-gradient(700px 420px at 50% 40%, rgb(183 125 255 / 0.16), transparent 70%), linear-gradient(180deg, #150a26, var(--bg-0) 75%);
}

.slots-board__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.slot-tabs { width: min(360px, 100%); }
.slot-tabs button:disabled { cursor: not-allowed; }

.slot-stage { display: grid; place-items: center; min-height: 0; }

/* ---------- Cabinet ---------- */

.slot-cabinet {
  --cell: clamp(64px, 9vw, 104px);
  position: relative;
  padding: 14px;
  border-radius: 22px;
  background: linear-gradient(180deg, #3a0716, #200410);
  box-shadow:
    inset 0 0 0 3px #ffc53d,
    inset 0 0 0 6px #7a4a00,
    0 24px 60px rgb(0 0 0 / 0.5),
    0 0 60px rgb(255 59 87 / 0.18);
}
.slot-cabinet--classic { --cell: clamp(80px, 11vw, 124px); background: linear-gradient(180deg, #2a2206, #140f02); }
.slot-cabinet--tumble {
  --cell: clamp(48px, 6.4vw, 78px);
  background: linear-gradient(180deg, #24103d, #120822);
  box-shadow: inset 0 0 0 3px #b77dff, inset 0 0 0 6px #3d0f80, 0 24px 60px rgb(0 0 0 / 0.5), 0 0 60px rgb(183 125 255 / 0.2);
}

.reels {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--reels), var(--cell));
  gap: 8px;
}
.reel {
  position: relative;
  height: calc(var(--cell) * var(--rows));
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(180deg, #d9d3dd, #fff 18%, #fff 82%, #d9d3dd);
  box-shadow: inset 0 8px 14px rgb(0 0 0 / 0.25), inset 0 -8px 14px rgb(0 0 0 / 0.25);
}
.slot-cabinet--video .reel, .slot-cabinet--classic .reel {
  background: linear-gradient(180deg, #1a1d2b, #262a3d 18%, #262a3d 82%, #1a1d2b);
}
.reel__strip { will-change: transform; }
.reel__strip.is-spinning { filter: blur(1.6px) brightness(1.08); }
.reel.is-landed { animation: reel-bump 260ms var(--ease-out); }
@keyframes reel-bump { 40% { transform: translateY(3px); } }
.reel.is-anticipating {
  box-shadow: inset 0 0 0 3px #ffc53d, 0 0 30px rgb(255 197 61 / 0.6);
  animation: anticipate 300ms ease-in-out infinite alternate;
}
@keyframes anticipate { to { box-shadow: inset 0 0 0 3px #fff4cf, 0 0 44px rgb(255 197 61 / 0.9); } }

.slot-cell {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--cell);
  height: var(--cell);
  transition: filter 200ms, opacity 200ms;
}
.slot-cell__art { display: grid; width: 78%; height: 78%; }
.slot-cell__art .symbol { width: 100%; height: 100%; filter: drop-shadow(0 3px 4px rgb(0 0 0 / 0.35)); }
.slot-cabinet.has-wins .slot-cell:not(.is-win) { filter: brightness(0.45) saturate(0.6); }
.slot-cell.is-win .slot-cell__art { animation: symbol-win 700ms var(--ease-in-out) infinite alternate; }
.slot-cell.is-win::before {
  content: "";
  position: absolute;
  inset: 5%;
  border-radius: 14px;
  box-shadow: inset 0 0 0 2px rgb(255 197 61 / 0.8), 0 0 20px rgb(255 197 61 / 0.45);
  animation: fade-in 200ms;
}
.slot-cell.is-scatter::before { box-shadow: inset 0 0 0 2px #ff6fb1, 0 0 24px rgb(255 111 177 / 0.6); }
@keyframes symbol-win { to { transform: scale(1.12); } }

.paylines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.payline {
  filter: drop-shadow(0 0 5px rgb(0 0 0 / 0.6));
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: draw-line 520ms var(--ease-out) forwards;
  opacity: 0.9;
}
@keyframes draw-line { to { stroke-dashoffset: 0; } }

/* ---------- Tumble ---------- */

.tumble-field {
  position: relative;
  width: calc(var(--cell) * var(--cols));
  height: calc(var(--cell) * var(--rows));
  overflow: hidden;
  border-radius: 14px;
  background:
    linear-gradient(rgb(255 255 255 / 0.03) 1px, transparent 1px) 0 0 / 100% var(--cell),
    linear-gradient(90deg, rgb(255 255 255 / 0.03) 1px, transparent 1px) 0 0 / var(--cell) 100%,
    #1a0d2e;
}
.tumble-cell {
  position: absolute;
  left: calc(var(--c) * var(--cell));
  top: calc(var(--r) * var(--cell));
  transition: top 0ms;
}
.tumble-cell.is-win .slot-cell__art { animation: symbol-win 260ms var(--ease-in-out) infinite alternate; }
.tumble-cell.is-win::before { box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.8), 0 0 18px rgb(183 125 255 / 0.7); }
.tumble-cell.is-popping { animation: pop-out 240ms var(--ease-out) forwards; }
@keyframes pop-out { to { transform: scale(1.5); opacity: 0; } }
.slot-cell__orb {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: calc(var(--cell) * 0.24);
  text-shadow: 0 2px 0 #3d0f80, 0 0 10px rgb(224 184 255 / 0.8);
}
.slot-cell.is-orb-fire .slot-cell__art { animation: orb-fire 400ms ease-in-out infinite alternate; }
@keyframes orb-fire { to { transform: scale(1.2); filter: drop-shadow(0 0 16px #e0b8ff); } }

/* ---------- Banner and win bar ---------- */

.slot-banner {
  position: absolute;
  top: 42%;
  left: 50%;
  z-index: 5;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 12px 28px;
  border-radius: 16px;
  background: rgb(11 17 29 / 0.92);
  box-shadow: 0 0 0 2px var(--accent), 0 20px 40px rgb(0 0 0 / 0.5), 0 0 40px rgb(255 197 61 / 0.3);
  translate: -50% -50%;
  pointer-events: none;
  white-space: nowrap;
}
.slot-banner strong { font-family: var(--font-display); font-size: 22px; font-weight: 900; color: var(--accent); }
.slot-banner span { color: var(--text-2); font-weight: 650; font-size: 13px; }
.slot-banner.is-in { animation: result-in 420ms var(--ease-spring); }

.slot-winbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  border-radius: var(--radius-l);
  background: rgb(11 17 29 / 0.7);
  box-shadow: inset 0 0 0 1px var(--line);
}
.slot-winbar__label { color: var(--text-2); font-weight: 650; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-winbar__amount { display: flex; align-items: baseline; gap: 10px; color: var(--text-3); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.slot-winbar__amount strong { font-family: var(--font-display); font-size: 22px; color: var(--text); letter-spacing: 0; transition: color 200ms; }
.slot-winbar.is-win .slot-winbar__amount strong { color: var(--win); }
.slot-winbar.is-win { box-shadow: inset 0 0 0 1px rgb(34 224 143 / 0.5), 0 0 24px rgb(34 224 143 / 0.12); }

/* ---------- Paytable ---------- */

.paytable { display: grid; gap: 14px; }
.paytable__table td:first-child { display: flex; align-items: center; gap: 10px; }
.paytable__symbol { display: grid; width: 30px; height: 30px; }
.paytable__symbol .symbol { width: 100%; height: 100%; }
.paytable__rules { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--text-2); font-size: 13px; }

@media (max-width: 1000px) {
  .slots-board { min-height: 0; padding: 14px; }
  .slot-cabinet { --cell: min(15vw, 84px); padding: 10px; }
  .slot-cabinet--classic { --cell: min(24vw, 110px); }
  .slot-cabinet--tumble { --cell: min(13vw, 64px); }
}
@media (max-width: 480px) {
  .reels { gap: 4px; }
  .slot-cabinet { --cell: 15.5vw; padding: 8px; }
  .slot-cabinet--tumble { --cell: 13.6vw; }
  .slot-banner strong { font-size: 18px; }
}