/* ============================================================================
   slot.css — shared "real casino" game-cabinet shell.

   Loaded AFTER common.css and after each game's own stylesheet, so it unifies
   the machine chrome (frame, reel window, control deck, modals) across all four
   games while each game keeps its grid size, symbols, bonus logic and accent.

   Each game exposes --accent / --accent-2 on :root; everything else comes from
   the shared tokens in common.css.
   ========================================================================== */

.page-body { padding: 22px 14px 46px; }

/* One calm casino-floor backdrop for every machine — replaces each game's
   busy page background so the cabinet itself is the focus. (Games keep their
   identity through the accent colour, symbols and bonus rounds.) */
body {
  background:
    radial-gradient(ellipse 75% 45% at 50% -5%, rgba(240, 198, 107, 0.08), transparent 55%),
    radial-gradient(circle at 50% 20%, #17131f 0%, var(--bg-dark) 72%);
  background-attachment: fixed;
}

/* ---------- The machine ---------- */

.cabinet {
  position: relative;
  z-index: 1;
  padding: 16px 16px 18px;
  border: 1px solid var(--line-gold);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 26%),
    linear-gradient(165deg, var(--surface-2), var(--surface));
  box-shadow:
    0 34px 80px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.cabinet .title {
  margin: 2px 0 12px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: none;
  animation: none;
  opacity: 0.92;
}

.cabinet .bonus-banner {
  margin-bottom: 12px;
  padding: 8px 12px;
  border: 1px solid var(--line-gold);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(240, 198, 107, 0.18), rgba(240, 198, 107, 0.05));
  color: var(--gold);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  animation: none;
}

/* ---------- Reel window: recessed behind glass ---------- */

.cabinet .screen {
  position: relative;
  padding: 8px;
  margin-bottom: 12px;
  border: 1px solid var(--line-gold);
  border-radius: 13px;
  background: #05060a;
  box-shadow:
    inset 0 3px 18px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(255, 255, 255, 0.03);
}
/* soft glass glare across the top of the reels */
.cabinet .screen::after {
  content: '';
  position: absolute;
  left: 6px;
  right: 6px;
  top: 6px;
  height: 34%;
  border-radius: 11px 11px 40% 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent);
  pointer-events: none;
  z-index: 4;
}

/* ---------- Reel positions: glossy tiles ---------- */

.cabinet .cell {
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 42%),
    linear-gradient(180deg, var(--accent-2, #1a2131), #0a0d15);
  box-shadow: inset 0 -12px 20px rgba(0, 0, 0, 0.45);
}

.cabinet .cell .symbol {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
}

.cabinet .cell.win {
  animation: slot-winframe 0.85s ease-in-out infinite;
  border-color: var(--accent, var(--win-green));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 45%),
    linear-gradient(180deg, var(--accent-2, #1a2131), #0a0d15);
}
@keyframes slot-winframe {
  0%, 100% { box-shadow: 0 0 0 2px var(--accent, var(--win-green)), 0 0 14px -2px var(--accent, var(--win-green)); }
  50%      { box-shadow: 0 0 0 2px var(--accent, var(--win-green)), 0 0 24px 1px var(--accent, var(--win-green)); }
}

/* ---------- Scrolling reels (reels.js) ---------- */

.cabinet .cell.reel-blank .symbol { opacity: 0; }

.reel-spin {
  position: absolute;
  z-index: 3;
  overflow: hidden;
  border-radius: 8px;
  background: #06070c;
  pointer-events: none;
}
.reel-strip {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  will-change: transform;
}
.reel-strip.reel-blurring { filter: blur(1px); }
.reel-cell {
  display: grid;
  place-items: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 42%),
    linear-gradient(180deg, var(--accent-2, #1a2131), #0a0d15);
  border-bottom: 1px solid rgba(0, 0, 0, 0.35);
}
.reel-cell .symbol { width: 100%; height: 100%; display: grid; place-items: center; }
.reel-cell .sym { width: 82%; height: 82%; }

/* motion-blur streak while the strip is moving fast */
.reel-strip.reel-blurring .reel-cell .symbol {
  filter: blur(1.4px);
  transform: scaleY(1.35);
  opacity: 0.92;
}

.cabinet .cell.anticipating {
  animation: reel-anticipate 0.5s ease-in-out infinite alternate;
  z-index: 2;
}
@keyframes reel-anticipate {
  from { box-shadow: 0 0 0 2px var(--gold), 0 0 14px -2px var(--gold); }
  to   { box-shadow: 0 0 0 2px var(--gold), 0 0 26px 2px var(--gold); }
}

/* ---------- Status line ---------- */

.cabinet .message {
  min-height: 20px;
  margin-bottom: 12px;
  font-size: 0.82rem;
  letter-spacing: 0.3px;
  color: var(--muted);
}

/* ---------- Readout row (Credits / Bet / Win) ---------- */

.cabinet .hud {
  display: flex;
  gap: 1px;
  padding: 0;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--line);
  overflow: hidden;
}
.cabinet .stat {
  flex: 1;
  align-items: center;
  gap: 2px;
  padding: 9px 6px 8px;
  background: #0b0d13;
}
.cabinet .stat label {
  color: var(--muted);
  font-size: 0.58rem;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.cabinet .stat span {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.cabinet .stat:nth-child(2) span { color: var(--gold); }

/* ---------- Control deck ---------- */

.cabinet .controls {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 88px;
  gap: 8px;
  align-items: stretch;
}

/* Base button look — unscoped so modal / confirm / gamble buttons match too.
   slot.css loads last, so this wins over each game's .btn without !important. */
.btn {
  font-family: inherit;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 9px 10px;
  color: var(--text);
  background: linear-gradient(180deg, #262b38, #171a23);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
  transition: transform 0.08s, filter 0.15s;
}
.btn:hover { filter: brightness(1.16); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; filter: none; }
.btn.small { font-size: 0.74rem; }

/* the SPIN button — big round gold on the right of the deck */
.cabinet .btn.spin {
  grid-column: 4;
  grid-row: 1 / 3;
  order: 0;
  align-self: center;
  justify-self: center;
  width: 82px;
  height: 82px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 0.95rem;
  letter-spacing: 1px;
  color: #1a1206;
  background: var(--gold-grad);
  box-shadow:
    0 8px 24px -4px var(--gold),
    inset 0 2px 6px rgba(255, 255, 255, 0.45),
    inset 0 -10px 16px rgba(0, 0, 0, 0.28);
}
.cabinet .btn.spin:hover { filter: brightness(1.06); }
.cabinet .btn.spin:disabled { opacity: 0.55; }

/* buy-bonus — feature pill spanning its own row beneath the deck */
.cabinet .btn.buy-bonus {
  grid-column: 1 / -1;
  grid-row: 3;
  order: 0;
  border: 1px solid var(--gold);
  border-radius: 10px;
  background: linear-gradient(180deg, #ff6a5a, #b3241c);
  color: #fff;
  letter-spacing: 0.5px;
}
.cabinet .btn.buy-bonus:hover { filter: brightness(1.1); }

@media (max-width: 430px) {
  .cabinet .controls { grid-template-columns: repeat(3, 1fr) 74px; }
  .cabinet .btn.spin { width: 72px; height: 72px; font-size: 0.82rem; }
}

/* ---------- Modals ---------- */

.modal {
  background: rgba(4, 5, 8, 0.8);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 60;
}
.modal-content {
  border: 1px solid var(--line-gold);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.modal-content h2 {
  font-family: var(--font-display);
  color: var(--gold);
}
.modal-content .hint { color: var(--muted); }
.paytable-list li { border-bottom-color: var(--line); }
.paytable-list li span:last-child { color: var(--gold); }

/* ---------- Autoplay ---------- */

.cabinet .btn.auto {
  grid-column: 1 / -1;
  grid-row: 4;
  order: 0;
  border: 1px solid var(--line-gold);
  border-radius: 10px;
  background: linear-gradient(180deg, #2b3242, #1b1f2a);
  color: var(--gold);
  letter-spacing: 0.5px;
}
.cabinet .btn.auto:hover { filter: brightness(1.12); }
.cabinet .btn.auto.running {
  background: linear-gradient(180deg, #ff6a5a, #b3241c);
  color: #fff;
  border-color: var(--gold);
}

#autoplayModal .modal-content { max-height: 90vh; overflow-y: auto; }

.auto-field { margin: 14px 0; text-align: left; }
.auto-field > label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--muted);
}

.auto-opts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.auto-opt {
  flex: 1 1 auto;
  min-width: 50px;
  padding: 8px 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: filter 0.12s, border-color 0.12s;
}
.auto-opt:hover { border-color: var(--line-gold); }
.auto-opt.active {
  background: var(--gold-grad);
  color: #1a1206;
  border-color: var(--gold);
}

#autoplayModal input[type="number"] {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg-1);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
}
#autoplayModal input[type="number"]:focus { outline: none; border-color: var(--gold); }

#autoplayModal .btn.spin {
  display: block;
  width: 100%;
  height: auto;
  margin: 6px 0 8px;
  padding: 12px;
  border-radius: 10px;
  font-size: 0.95rem;
}
#autoplayModal .btn.small { width: 100%; }