/* ═══ Gator Gold — 6×4, 4096 способов ════════════════════════════ */

.gg { --gg-green: #2f8f5b; --gg-gold: #f0b429; --gg-mud: #6b4f2a; --cell: 52px; }

.gg-stage {
  position: relative; padding: 12px; border-radius: var(--r-lg); overflow: hidden;
  background:
    radial-gradient(130% 100% at 50% -25%, rgba(47, 143, 91, .22), transparent 65%),
    var(--surface);
  box-shadow: inset 6px 6px 16px var(--shadow-dark), inset -6px -6px 16px var(--shadow-light);
}

.gg-frame {
  position: relative;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px;
}
.gg-reel {
  position: relative; height: calc(var(--cell) * 4); overflow: hidden; border-radius: 10px;
  background: var(--bg-deep);
  box-shadow: inset 0 4px 9px rgba(0, 0, 0, .32), inset 0 -4px 9px rgba(0, 0, 0, .32);
}
.gg-strip { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.gg-cell {
  height: var(--cell); display: grid; place-items: center;
  font-size: calc(var(--cell) * .5); line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45));
  transition: opacity .25s, transform .3s var(--ease-spring);
}
/* карточные символы рисуем буквами, как в настоящем слоте */
.gg-cell.royal {
  font-family: "SF Pro Display", system-ui, sans-serif;
  font-weight: 800; font-size: calc(var(--cell) * .38);
  color: var(--text-dim); letter-spacing: -.02em;
}
.gg-cell.golden { filter: drop-shadow(0 0 7px rgba(240, 180, 41, .85)); }
.gg-cell.lit { animation: ggLit .6s var(--ease-spring); }
.gg-cell.dim { opacity: .25; }
.gg-cell.covered { opacity: 0; }
@keyframes ggLit { 0% { transform: scale(1) } 45% { transform: scale(1.22) } 100% { transform: scale(1.06) } }

.gg-block {
  position: absolute; display: grid; place-items: center; border-radius: 12px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(0, 0, 0, .22));
  box-shadow: 0 6px 16px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .3);
  animation: ggBlock .5s var(--ease-spring);
  pointer-events: none;
}
.gg-block span { filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .5)); }
.gg-block.golden span { filter: drop-shadow(0 0 12px rgba(240, 180, 41, .9)); }
@keyframes ggBlock { from { transform: scale(.55); opacity: 0 } to { transform: scale(1); opacity: 1 } }

.gg-banner {
  min-height: 44px; margin-top: 10px; padding: 9px 14px; border-radius: var(--r-md);
  text-align: center; display: grid; place-items: center; gap: 2px;
  box-shadow: inset 3px 3px 9px var(--shadow-dark), inset -3px -3px 9px var(--shadow-light);
}
.gg-banner b { font-size: 18px; font-variant-numeric: tabular-nums; }
.gg-banner span { font-size: 12px; color: var(--text-dim); }
.gg-banner.win b { color: var(--green); }
.gg-banner.big b { color: var(--gg-gold); font-size: 25px; animation: pop .5s var(--ease-spring); }

/* ── Шкала стрел ── */

.gg-ladder { display: flex; align-items: center; gap: 8px; padding: 10px 4px 4px; }
.gg-ladder .step {
  flex: 1; height: 34px; border-radius: 10px; display: grid; place-items: center;
  font-size: 17px; opacity: .3; position: relative;
  background: var(--surface);
  box-shadow: inset 2px 2px 6px var(--shadow-dark), inset -2px -2px 6px var(--shadow-light);
  transition: all .4s var(--ease-spring);
}
.gg-ladder .step.done {
  opacity: 1; background: linear-gradient(160deg, #ff7ab8, #e0407f);
  box-shadow: 0 3px 10px rgba(224, 64, 127, .5);
}
.gg-ladder .step.done::after {
  content: "✕"; position: absolute; font-size: 11px; right: 4px; top: 2px; color: #fff;
}
.gg-arrows { display: flex; gap: 4px; justify-content: center; padding-bottom: 6px; }
.gg-arrows i { font-size: 15px; opacity: .22; font-style: normal; transition: opacity .3s; }
.gg-arrows i.on { opacity: 1; animation: pop .35s var(--ease-spring); }

/* ── Колесо риска ── */

#ggOverlay {
  position: fixed; inset: 0; z-index: 150; display: none; place-items: center; padding: 22px;
  background: rgba(5, 12, 8, .76); backdrop-filter: blur(16px);
}
#ggOverlay.show { display: grid; animation: fade .3s ease; }
.gg-modal {
  width: 100%; max-width: 340px; text-align: center; padding: 24px 20px;
  border-radius: var(--r-xl); background: var(--surface);
  box-shadow: 10px 10px 30px rgba(0, 0, 0, .55), inset 0 1px 0 var(--edge);
  animation: pop .45s var(--ease-spring);
}
.gg-modal .big-em { font-size: 56px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5)); }
.gg-modal h3 { margin: 8px 0 4px; font-size: 21px; }
.gg-modal p { margin: 0; color: var(--text-dim); font-size: 13.5px; line-height: 1.45; }
.gg-spins { font-size: 44px; font-weight: 800; color: var(--gg-gold); margin: 6px 0;
  font-variant-numeric: tabular-nums; }

.gg-risk { position: relative; width: 210px; height: 210px; margin: 14px auto 10px; }
.gg-risk svg { width: 100%; height: 100%; transition: transform 3.4s cubic-bezier(.16,.84,.26,1);
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .55)); }
.gg-risk .pin { position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  font-size: 24px; z-index: 2; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .6)); }

.gg-odds { display: flex; gap: 8px; margin: 14px 0 4px; }
.gg-odds > div { flex: 1; padding: 10px 6px; border-radius: 12px; text-align: center;
  box-shadow: inset 3px 3px 8px var(--shadow-dark), inset -3px -3px 8px var(--shadow-light); }
.gg-odds b { display: block; font-size: 17px; font-variant-numeric: tabular-nums; }
.gg-odds span { font-size: 11px; color: var(--text-dim); }

/* ── Ставка+ ── */

.gg-ante { display: flex; align-items: center; gap: 12px; padding: 13px 15px;
  border-radius: var(--r-md); margin-top: 11px;
  box-shadow: inset 3px 3px 9px var(--shadow-dark), inset -3px -3px 9px var(--shadow-light); }
.gg-ante .txt { flex: 1; min-width: 0; }
.gg-ante .txt b { display: block; font-size: 15px; }
.gg-ante .txt span { font-size: 12px; color: var(--text-dim); }

/* ── Таблица выплат ── */

.gg-pay { display: grid; grid-template-columns: auto 1fr auto; gap: 3px 10px; align-items: center;
  font-size: 13px; }
.gg-pay .sym { font-size: 20px; text-align: center; width: 28px; }
.gg-pay .sym.royal { font-weight: 800; font-size: 14px; color: var(--text-dim); }
.gg-pay .nm { color: var(--text-dim); font-size: 12.5px; }
.gg-pay .vals { font-variant-numeric: tabular-nums; text-align: right; font-size: 12px; }
.gg-pay .row { display: contents; }