/* Слот «Олимп». Все селекторы — под #stage-slot или с префиксом slot-. */

#stage-slot {
  display: block; min-height: 0; padding: 18px;
  border-style: solid;
}

.slot-game {
  display: grid;
  grid-template-columns: minmax(0, 540px) minmax(0, 330px);
  justify-content: center; align-items: start; gap: 24px;
}
.slot-main, .slot-side { min-width: 0; }
.slot-side { display: flex; flex-direction: column; gap: 14px; }

/* ----- поле ----- */
.slot-boardwrap {
  background: #15171A; border: 1px solid var(--border);
  border-radius: var(--r-card); padding: 10px;
}
.slot-hud {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  min-height: 44px; margin-bottom: 8px;
}
.slot-idle { font-size: 13px; }
.slot-pill { font-size: 14px; padding: 6px 10px; }
.slot-fs { background: rgba(139, 92, 246, .22); color: #C9B8FF; }
.slot-mx { background: rgba(245, 197, 24, .16); color: #FFD35C; }
.slot-skip { min-height: 44px; margin-left: auto; padding: 0 14px; font-size: 14px; }

.slot-board { position: relative; }
.slot-field {
  --sl-gap: 8px;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sl-gap); padding: 6px;
  overflow: hidden;                 /* падающие ячейки прячутся за рамкой поля */
}
.slot-cell {
  position: relative; aspect-ratio: 1 / 1;
  border-radius: 8px;
  background: linear-gradient(180deg, #2A2D31, #1E2023);
  border: 1px solid #36393D;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .35);
}
.slot-sym {
  position: absolute; inset: 8%;
  display: grid; place-items: center;
}
.slot-sym svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* падение: смещение задаёт JS через --dy (в высотах ячейки плюс зазор поля) */
.slot-cell.slot-fall {
  animation: slot-fall var(--dur, 420ms) cubic-bezier(.2, .8, .25, 1) var(--d, 0ms) both;
}
@keyframes slot-fall {
  from { transform: translateY(var(--dy)); }
  to   { transform: none; }
}

/* выигрышные ячейки */
.slot-cell.slot-hit {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(245, 197, 24, .9), 0 0 18px rgba(245, 197, 24, .4);
}
.slot-cell.slot-hit .slot-sym { animation: slot-wob .32s ease-in-out infinite alternate; }
@keyframes slot-wob { from { transform: rotate(-5deg) scale(1.02); } to { transform: rotate(5deg) scale(1.02); } }

/* взрыв: символ сжимается, осколки разлетаются */
.slot-cell.slot-boom .slot-sym { animation: slot-pop .3s ease-in forwards; }
@keyframes slot-pop {
  0%   { transform: scale(1);    opacity: 1; }
  60%  { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(0);    opacity: 0; }
}
.slot-cell.slot-gone .slot-sym { opacity: 0; }
.slot-bit {
  position: absolute; left: 50%; top: 50%;
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 2px; background: var(--c, #fff);
  pointer-events: none;
  animation: slot-bit .5s ease-out forwards;
}
@keyframes slot-bit {
  to { transform: translate(var(--bx), var(--by)) rotate(var(--br)); opacity: 0; }
}

/* молнии: подсветка, когда их три и больше */
.slot-cell.slot-scatter {
  border-color: #7DA8FF;
  box-shadow: 0 0 0 2px #7DA8FF, 0 0 16px rgba(125, 168, 255, .6);
}

/* сферы-множители: круглый значок в углу клетки */
.slot-orb {
  position: absolute; top: -6px; right: -6px; z-index: 2;
  height: 36px; min-width: 36px; padding: 0 8px; border-radius: 999px;
  display: grid; place-items: center;
  font: 900 15px/1 var(--font-h); color: #241A00; white-space: nowrap;
  background: radial-gradient(circle at 35% 30%, #FFF6C2, #FFC53D 45%, #C47A00);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .45), inset 0 -3px 0 rgba(0, 0, 0, .2);
  animation: slot-orb-in .42s cubic-bezier(.2, 1.4, .4, 1) both;
}
.slot-orb.is-big {
  color: #fff;
  background: radial-gradient(circle at 35% 30%, #F3E8FF, #A77BFF 45%, #5B2BC9);
}
.slot-orb.is-dud { filter: grayscale(1) brightness(.6); }
@keyframes slot-orb-in {
  from { transform: scale(.2); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.slot-banner {
  position: absolute; left: 50%; top: 50%; z-index: 5;
  transform: translate(-50%, -50%);
  padding: 12px 18px; border-radius: var(--r-card);
  background: rgba(20, 22, 25, .92);
  border: 1px solid rgba(245, 197, 24, .5);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .6);
  color: #FFE08A; text-align: center; white-space: nowrap;
  font: 900 clamp(18px, 4vw, 26px)/1.1 var(--font-h);
  pointer-events: none;
  animation: slot-banner-in .35s ease both;
}
.slot-banner[hidden] { display: none; }
@keyframes slot-banner-in {
  from { opacity: 0; transform: translate(-50%, -40%); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* ----- персонаж ----- */
.slot-hero {
  display: grid; place-items: center; height: 200px; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--r-card);
  background:
    radial-gradient(circle at 50% 18%, rgba(245, 197, 24, .18), transparent 60%),
    var(--surface);
}
.slot-av { height: 100%; width: 100%; display: grid; place-items: center; padding: 8px 0; }
.slot-av svg { height: 100%; width: auto; max-width: 100%; }

/* ----- панель ----- */
.slot-panel { margin-bottom: 0; }
.slot-bet { margin-bottom: 10px; }
.slot-hint { font-size: 13px; min-height: 18px; margin-top: -2px; }
.slot-hint.is-bad { color: var(--red-ink); }
.slot-quick { margin-bottom: 14px; }
.slot-quick button {
  min-width: 52px; height: 44px; padding: 0 14px;
  font-size: 15px;
}
.slot-spin { min-height: 52px; font-size: 18px; }
.slot-buy { min-height: 44px; margin-top: 10px; }
.slot-err {
  color: var(--red-ink); background: rgba(247, 75, 75, .1);
  border: 1px solid rgba(247, 75, 75, .35); border-radius: var(--r-btn);
  padding: 9px 12px; font-size: 14px; margin-top: 12px;
}
.slot-err[hidden] { display: none; }
.slot-result {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
}
.slot-win { font: 900 26px/1.1 var(--font-h); color: var(--text-2); }
.slot-win.is-win { color: var(--green-ink); }
.slot-disp { font-size: 14px; }

/* ----- правила ----- */
.slot-rules { margin-bottom: 0; }
.slot-rules > summary {
  cursor: pointer; font: 800 16px/1.2 var(--font-h);
  min-height: 44px; display: flex; align-items: center;
}
.slot-rules-list { padding-left: 18px; margin: 4px 0 10px; color: var(--text-2); font-size: 14px; }
.slot-rules-list li { margin-bottom: 4px; }
.slot-rtp { font-size: 14px; }
.slot-pay { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 12px; }
.slot-pay th, .slot-pay td { padding: 6px 4px; border-bottom: 1px solid var(--border); text-align: left; }
.slot-pay th.num, .slot-pay td.num { text-align: right; font-weight: 700; white-space: nowrap; }
.slot-pay th { color: var(--text-3); font-weight: 600; }
.slot-ic { display: inline-block; width: 28px; height: 28px; vertical-align: middle; margin-right: 8px; }
.slot-ic svg { width: 100%; height: 100%; display: block; }

/* ----- телефон: поле на всю ширину, персонаж снизу ----- */
@media (max-width: 860px) {
  #stage-slot { padding: 10px; }
  .slot-game { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .slot-side { gap: 14px; }
  .slot-panel { order: 1; }
  .slot-rules { order: 2; }
  .slot-hero { order: 3; height: 170px; }
}

@media (max-width: 520px) {
  .slot-boardwrap { padding: 8px; }
  .slot-field { --sl-gap: 5px; padding: 4px; }
  .slot-orb { height: 28px; min-width: 28px; padding: 0 6px; font-size: 12px; top: -4px; right: -4px; }
  .slot-skip { min-height: 44px; padding: 0 12px; }
  .slot-spin { min-height: 52px; }
  .slot-quick { gap: 6px; }
  .slot-quick button { min-width: 0; flex: 1 1 0; padding: 0 6px; }
  .slot-hero { height: 150px; }
}