/* ============================================================
   slotmachine.css — Riva Rocci · Easter Egg Slot Machine
   ============================================================ */

/* ── FLOATING TRIGGER ── */
.slot-trigger {
  position: fixed;
  bottom: 1.75rem;
  right: 1.75rem;
  z-index: 300;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(13, 12, 10, .92);
  border: 1px solid rgba(240, 235, 224, .12);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .2s, transform .15s;
  -webkit-tap-highlight-color: transparent;
}
.slot-trigger:hover {
  border-color: rgba(240, 235, 224, .3);
  transform: scale(1.06);
}
.slot-trigger-icon {
  font-size: 1.15rem;
  line-height: 1;
  user-select: none;
  pointer-events: none;
  transition: transform .15s;
}
/* Shake animation — plays on interval */
@keyframes slot-shake {
  0%   { transform: rotate(0deg); }
  15%  { transform: rotate(-12deg); }
  30%  { transform: rotate(12deg); }
  45%  { transform: rotate(-8deg); }
  60%  { transform: rotate(8deg); }
  75%  { transform: rotate(-4deg); }
  90%  { transform: rotate(4deg); }
  100% { transform: rotate(0deg); }
}
.slot-trigger.shaking .slot-trigger-icon {
  animation: slot-shake .55s ease-in-out;
}

/* ── OVERLAY ── */
.slot-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(13, 12, 10, .85);
  backdrop-filter: blur(18px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.slot-overlay.open {
  opacity: 1;
  pointer-events: all;
}

/* ── MACHINE BODY ── */
.slot-machine {
  position: relative;
  width: min(420px, 92vw);
  background: var(--warm);
  border: 1px solid rgba(240, 235, 224, .14);
  border-radius: 20px;
  padding: 2rem 1.75rem 1.75rem;
  transform: translateY(28px) scale(.95);
  transition: transform .3s cubic-bezier(.22,1,.36,1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.slot-overlay.open .slot-machine {
  transform: translateY(0) scale(1);
}

/* Top decorative strip */
.slot-machine::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--blue) 0%, var(--green) 50%, var(--yel) 100%);
  border-radius: 20px 20px 0 0;
}

/* Close button */
.slot-close {
  position: absolute;
  top: .9rem; right: 1rem;
  background: none; border: none;
  color: rgba(240, 235, 224, .35);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: .2rem .4rem;
  border-radius: 6px;
  transition: color .15s;
}
.slot-close:hover { color: var(--cream); }

/* Header */
.slot-header {
  width: 100%;
  text-align: center;
  margin-bottom: 1.5rem;
}
.slot-title {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 900;
  font-size: 1.4rem;
  color: var(--cream);
  letter-spacing: -.01em;
}
.slot-subtitle {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(240, 235, 224, .35);
  margin-top: .2rem;
}

/* ── ROCCI'S BALANCE BAR ── */
.slot-balance-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1.1rem;
  position: relative;
}
.slot-balance {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  font-family: 'DM Sans', sans-serif;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(240,235,224,.08);
  border-radius: 100px;
  padding: .45rem 1.1rem;
}
.rocci-coin {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
.slot-balance-amount {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  min-width: 1.5ch;
  text-align: right;
}
.slot-balance-label {
  font-size: .7rem;
  font-weight: 600;
  color: rgba(240, 235, 224, .4);
  letter-spacing: .05em;
}
.slot-balance-delta {
  position: absolute;
  top: -1.2rem;
  font-size: .72rem;
  font-weight: 700;
  color: var(--grn-l);
  opacity: 0;
  pointer-events: none;
}
@keyframes delta-pop {
  0%   { opacity: 0; transform: translateY(0px); }
  15%  { opacity: 1; transform: translateY(-6px); }
  70%  { opacity: 1; transform: translateY(-10px); }
  100% { opacity: 0; transform: translateY(-14px); }
}
.slot-balance-delta--pop {
  animation: delta-pop 1.1s ease-out forwards;
}

/* ── REELS CONTAINER ── */
.slot-reels-wrap {
  width: 100%;
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(240, 235, 224, .08);
  border-radius: 12px;
  padding: .75rem;
  margin-bottom: 1.25rem;
  position: relative;
}

/* Gradient masks — cover top and bottom rows, leaving only the centre bright */
.slot-reels-wrap::before,
.slot-reels-wrap::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 76px;
  z-index: 2;
  pointer-events: none;
}
.slot-reels-wrap::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(13,12,10,.92) 40%, rgba(13,12,10,.55) 75%, transparent 100%);
  border-radius: 12px 12px 0 0;
}
.slot-reels-wrap::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(13,12,10,.92) 40%, rgba(13,12,10,.55) 75%, transparent 100%);
  border-radius: 0 0 12px 12px;
}

/* Center line — subtle tint + borders to frame the active row */
.slot-centerline {
  position: absolute;
  left: .75rem; right: .75rem;
  top: 50%;
  transform: translateY(-50%);
  height: 64px;
  background: rgba(240, 235, 224, .04);
  border-top: 1px solid rgba(240, 235, 224, .22);
  border-bottom: 1px solid rgba(240, 235, 224, .22);
  z-index: 1;
  pointer-events: none;
  border-radius: 4px;
}

.slot-reels {
  display: flex;
  gap: .5rem;
}

/* Individual reel */
.slot-reel {
  flex: 1;
  height: 192px;
  overflow: hidden;
  position: relative;
  border-radius: 8px;
}
.slot-reel-inner {
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.slot-symbol {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  flex-shrink: 0;
  user-select: none;
}

/* Spinning state */
.slot-reel.spinning .slot-reel-inner {
  animation: reel-spin var(--spin-duration, .9s) linear infinite;
}
@keyframes reel-spin {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(-1 * var(--strip-height, 448px))); }
}

/* ── RESULT MESSAGE ── */
.slot-result {
  width: 100%;
  text-align: center;
  min-height: 1.6rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(240, 235, 224, .4);
  transition: color .2s;
  margin-bottom: 1rem;
}
.slot-result.win-small { color: var(--blue-l); }
.slot-result.win-big   { color: var(--yel-l); }
.slot-result.jackpot   { color: var(--grn-l); }

/* ── SPIN BUTTON ── */
.slot-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: .85rem 2rem;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 100px;
  font-family: 'DM Sans', sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, transform .1s;
  position: relative;
  overflow: hidden;
}
.slot-btn:hover:not(:disabled) { background: #2e5fff; transform: translateY(-1px); }
.slot-btn:active:not(:disabled) { transform: scale(.98); }
.slot-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* ── FOOTER ROW (credits + cooldown) ── */
.slot-footer-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: .9rem;
  min-height: 16px;
  width: 100%;
}

/* ── CREDITS ── */
.slot-credits {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.slot-credit-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(240, 235, 224, .12);
  transition: background .2s;
}
.slot-credit-dot.used { background: var(--blue); }

/* ── COOLDOWN BADGE ── */
.slot-cooldown {
  position: absolute;
  right: 0;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(240, 235, 224, .28);
  opacity: 0;
  transition: opacity .4s;
  font-family: 'DM Sans', sans-serif;
  font-variant-numeric: tabular-nums;
}
.slot-cooldown.visible {
  opacity: 1;
}

/* ── JACKPOT FLASH ── */
@keyframes jackpot-flash {
  0%   { background: rgba(13,12,10,.85); }
  10%  { background: rgba(26,79,255,.2); }
  20%  { background: rgba(11,122,16,.2); }
  30%  { background: rgba(240,194,0,.2); }
  40%  { background: rgba(26,79,255,.2); }
  50%  { background: rgba(11,122,16,.2); }
  60%  { background: rgba(240,194,0,.2); }
  70%  { background: rgba(26,79,255,.15); }
  80%  { background: rgba(11,122,16,.15); }
  90%  { background: rgba(240,194,0,.15); }
  100% { background: rgba(13,12,10,.85); }
}
.slot-overlay.jackpot-anim {
  animation: jackpot-flash 1.4s ease-in-out;
}

@keyframes jackpot-border {
  0%   { border-color: rgba(240,235,224,.14); }
  25%  { border-color: var(--blue); }
  50%  { border-color: var(--green); }
  75%  { border-color: var(--yel); }
  100% { border-color: rgba(240,235,224,.14); }
}
.slot-machine.jackpot-anim {
  animation: jackpot-border 1.4s ease-in-out;
}

/* ── CONFETTI PARTICLES ── */
.slot-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 20px;
}
.slot-confetti-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 0;
}
@keyframes confetti-fall {
  0%   { transform: translateY(-10px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(220px) rotate(360deg); opacity: 0; }
}

/* ── MOBILE ADJUSTMENTS ── */
@media (max-width: 480px) {
  .slot-trigger {
    bottom: 1.2rem;
    right: 1.2rem;
    width: 42px;
    height: 42px;
  }
  .slot-machine {
    padding: 1.6rem 1.25rem 1.4rem;
  }
  .slot-symbol { font-size: 1.7rem; }
}