/* ═══════════════════════════════════════════════════════════════
   /rainbet-code
   The page is built from the site's own components (giveaways.css,
   rewards.css): VIP landing hero, marble stat tiles, VIP cards and
   steps. This file only adds what's unique to this page — the slot
   machine that spells the code and the ticker — plus 3-step layout.
   ═══════════════════════════════════════════════════════════════ */

/* reels: Alfa Slab One — the classic slot-machine slab look */
@font-face{
  font-family: "RC Slab";
  src: url("../fonts/AlfaSlabOne-Regular.woff2") format("woff2");
  font-display: swap;
}

.rc-page{
  /* coins fly past the edges during the win burst — never let that (or the
     hero's decorative orbs) make the page scroll sideways on phones */
  overflow-x: clip;
  /* same gold as .gw-landing__title-text */
  --rc-title-gold: linear-gradient(180deg, #fffaf0 0%, #ffe9a8 25%, #ffd166 52%, #f0b93f 78%, #d99a2b 100%);
  --rc-display: "RC Slab", "Alfa Slab One", Rockwell, Georgia, serif;
}

/* ── hero: kicker in the same style as the other landings ── */
.rc-eyebrow{
  display: inline-flex; align-items: center; gap: 12px;
  margin: 0 0 18px;
  font-size: 12px; font-weight: 900; letter-spacing: .26em; text-transform: uppercase;
  color: #ffd56a; text-shadow: 0 2px 12px rgba(0,0,0,.85);
}
.rc-eyebrow::before, .rc-eyebrow::after{
  content: ""; width: 30px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #ffd56a);
}
.rc-eyebrow::after{ background: linear-gradient(90deg, #ffd56a, transparent); }

/* the machine replaces the 3D title image */
.rc-landing .gw-landing__content{ position: relative; }
.rc-title{ line-height: normal; margin: 0 0 10px; }
.rc-machine{ position: relative; display: inline-block; max-width: 100%; }

/* cabinet: the marble-and-gold stat tile frame, scaled up */
.rc-machine__frame{
  display: block;
  padding: 10px 14px;
  border: 16px solid transparent;
  border-image: url('/assets/img/stats/inner-bg.webp') 46 fill / 16px stretch;
  filter: drop-shadow(0 0 18px rgba(255,190,70,.28)) drop-shadow(0 18px 34px rgba(0,0,0,.65));
}

/* marquee bulbs */
.rc-bulbs{ display: flex; justify-content: space-between; gap: 6px; padding: 0 4px; }
.rc-bulbs:first-child{ margin-bottom: 10px; }
.rc-bulbs:last-child{ margin-top: 10px; }
.rc-bulb{
  width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff7d6, #f5b84a 55%, #7a4d14 100%);
  opacity: .35;
  animation: rcChase 1.4s linear infinite;
}
.rc-bulb:nth-child(3n+2){ animation-delay: .47s; }
.rc-bulb:nth-child(3n+3){ animation-delay: .93s; }
@keyframes rcChase{
  0%, 30%   { opacity: 1;   box-shadow: 0 0 12px rgba(255,200,90,.95), 0 0 2px #fff; }
  34%, 100% { opacity: .32; box-shadow: none; }
}
.rc-machine.is-win .rc-bulb{ animation: rcWinFlash .26s steps(2, jump-none) 8; }
@keyframes rcWinFlash{ 0%{ opacity: 1; box-shadow: 0 0 14px #ffd77a, 0 0 2px #fff; } 100%{ opacity: .25; } }

/* reel window */
.rc-window{
  position: relative; display: block;
  padding: 8px;
  border-radius: 10px;
  background: linear-gradient(180deg, #030202, #0c0905 50%, #030202);
  box-shadow: inset 0 0 0 1px rgba(255,213,106,.32), inset 0 10px 22px rgba(0,0,0,.9), inset 0 -10px 22px rgba(0,0,0,.9);
}
.rc-reels{ display: flex; gap: 5px; }
.rc-reel{
  --rc-cell: 76px;
  position: relative; display: block;
  width: clamp(26px, 4.4vw, 56px); height: var(--rc-cell);
  overflow: hidden;
  border-radius: 7px;
  background: linear-gradient(180deg, #120d07 0%, #2a1f11 50%, #120d07 100%);
  box-shadow: inset 0 0 0 1px rgba(255,213,106,.18);
}
.rc-reel::after{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.78) 0%, transparent 30%, rgba(255,240,200,.07) 50%, transparent 70%, rgba(0,0,0,.78) 100%);
}
.rc-reel__strip{ display: flex; flex-direction: column; will-change: transform; }
.rc-reel__cell{
  display: flex; align-items: center; justify-content: center;
  height: var(--rc-cell);
  font-family: var(--rc-display); font-size: clamp(22px, 3.8vw, 46px); line-height: 1;
  background: var(--rc-title-gold); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(90,50,10,.9)) drop-shadow(0 0 10px rgba(255,190,70,.25));
}
.rc-reel__cell--blur{ filter: blur(1.4px); opacity: .85; }
.rc-reel.is-landed{ animation: rcLand .28s ease-out; }
@keyframes rcLand{ 40%{ transform: translateY(3px); } }

.rc-payline{
  position: absolute; left: 4px; right: 4px; top: 50%; height: 2px; transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(255,90,60,.55), rgba(255,213,106,.95), rgba(255,90,60,.55), transparent);
  opacity: .35; pointer-events: none; transition: opacity .3s ease;
}
.rc-machine.is-win .rc-payline{ opacity: 1; box-shadow: 0 0 14px rgba(255,190,80,.9); }

/* lever, attached to the machine's right side */
.rc-lever{
  position: absolute; top: 50%; right: -50px; margin-top: -88px;
  width: 34px; height: 150px; padding: 0; border: 0; background: none; cursor: pointer;
}
.rc-lever__stick{
  position: absolute; left: 50%; bottom: 26px; width: 7px; height: 104px; transform: translateX(-50%);
  transform-origin: 50% 100%; border-radius: 4px;
  background: linear-gradient(90deg, #6b4a22, #f3d08a 45%, #8a5d22);
  transition: transform .18s ease-in;
}
.rc-lever__knob{
  position: absolute; left: 50%; top: 0; z-index: 1; width: 30px; height: 30px; transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffb3a0, #e0302a 45%, #6d0d0a 100%);
  box-shadow: 0 0 16px rgba(255,60,40,.45), inset 0 -3px 6px rgba(0,0,0,.4);
  transition: transform .18s ease-in;
}
.rc-lever__base{
  position: absolute; left: 50%; bottom: 8px; width: 30px; height: 26px; transform: translateX(-50%);
  border-radius: 8px; background: linear-gradient(180deg, #3a2a14, #120d07); box-shadow: inset 0 0 0 1px rgba(255,213,106,.4);
}
.rc-lever:hover .rc-lever__knob{ filter: brightness(1.12); }
.rc-lever.is-pulled .rc-lever__knob{ transform: translate(-50%, 84px); }
.rc-lever.is-pulled .rc-lever__stick{ transform: translateX(-50%) scaleY(.2); }

/* coin burst */
.rc-coins{ position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.rc-coin{
  position: absolute; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6cc, #ffd77a 40%, #c9912a 75%, #7a5218 100%);
  box-shadow: 0 0 8px rgba(255,200,90,.7), inset 0 -2px 3px rgba(0,0,0,.35);
  animation: rcCoin 1.15s cubic-bezier(.2,.7,.3,1) forwards;
}
.rc-coin::after{ content: "$"; position: absolute; inset: 0; display: grid; place-items: center; font: 900 10px/1 system-ui, sans-serif; color: rgba(90,55,12,.85); }
@keyframes rcCoin{
  0%   { transform: translate(-50%, -50%) scale(.4); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)) scale(1); opacity: 0; }
}

/* hero buttons + hint */
.rc-actions{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin: 18px 0 6px; }
.rc-copy.is-copied{ filter: brightness(1.15) saturate(1.2); }
.rc-hint{ margin: 0 0 22px; font-size: 13.5px; color: rgba(248,241,228,.8); text-shadow: 0 1px 8px rgba(0,0,0,.85); min-height: 1.4em; }
.rc-hint.is-ok{ color: #8de6a8; font-weight: 700; }
.rc-spin-again{
  appearance: none; border: 0; background: none; cursor: pointer; padding: 0 0 0 8px;
  font: 850 12px/1 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #ffd56a;
}
.rc-spin-again:hover{ text-decoration: underline; }

/* ── 3 steps instead of VIP's 2 ── */
.rc-steps{ grid-template-columns: 1fr auto 1fr auto 1fr; }
.rc-step__btn{
  margin-top: 4px;
  appearance: none; border: 0; background: none; padding: 0; cursor: pointer; text-align: left;
  font-family: inherit; text-decoration: none;
}
.rc-step__btn:hover{ text-decoration: underline; }

/* ── ticker: scrolling strip under the hero, same width as the cards ── */
.rc-ticker{
  position: relative; overflow: hidden;
  width: min(80%, 1180px);
  margin: -58px auto 0;      /* tuck under the hero's 96px bottom padding → ~44px gap */
  padding: 13px 0;
  background: rgba(0,0,0,.5);
  border-block: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(255,213,106,.55) 15%, rgba(255,213,106,.55) 85%, transparent) 1;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.rc-ticker__track{ display: flex; width: max-content; animation: rcTicker 46s linear infinite; }
.rc-ticker:hover .rc-ticker__track{ animation-play-state: paused; }
.rc-ticker__list{ display: flex; margin: 0; padding: 0; list-style: none; }
.rc-ticker__list li{
  display: inline-flex; align-items: center; gap: 26px; padding-right: 26px; white-space: nowrap;
  font-size: 12.5px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase;
  color: #f0c76b;
}
.rc-ticker__list li::after{
  content: ""; width: 6px; height: 6px; transform: rotate(45deg);
  background: linear-gradient(135deg, #ffe9a8, #d99a2b); box-shadow: 0 0 8px rgba(255,205,110,.55);
}
@keyframes rcTicker{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ── legal line under the FAQ ── */
.rc-fine{
  width: min(80%, 1180px); margin: 18px auto 0; text-align: center;
  font-size: 12px; line-height: 1.7; color: rgba(248,241,228,.55);
}
.rc-fine a{ color: #f0c76b; }

/* ── responsive ── */
@media (max-width: 1100px){
  .rc-lever{ display: none; }
}
@media (max-width: 900px){
  .rc-steps{ grid-template-columns: 1fr; }
  .rc-steps .rwv-steps__arrow{ display: none; }
}
@media (max-width: 767px){
  .rc-eyebrow{ font-size: 10.5px; letter-spacing: .2em; }
  .rc-machine__frame{ padding: 6px 4px; border-width: 10px; border-image-width: 10px; }
  .rc-bulbs{ gap: 2px; padding: 0 2px; }
  .rc-bulbs:first-child{ margin-bottom: 6px; }
  .rc-bulbs:last-child{ margin-top: 6px; }
  .rc-bulb{ width: 6px; height: 6px; }
  .rc-window{ padding: 5px; }
  .rc-reels{ gap: 2px; }
  .rc-reel{ --rc-cell: 44px; width: 21px; border-radius: 4px; }
  .rc-reel__cell{ font-size: 19px; }
  .rc-ticker, .rc-fine{ width: 92%; }
  .rc-ticker{ margin-top: -42px; }   /* hero padding is 72px on phones → ~36px gap */
}
@media (max-width: 360px){
  .rc-reel{ width: 18px; }
  .rc-reel__cell{ font-size: 16px; }
}
@media (prefers-reduced-motion: reduce){
  .rc-bulb, .rc-coin, .rc-ticker__track{ animation: none !important; }
  .rc-bulb{ opacity: .8; }
  .rc-ticker__track{ width: auto; }
  .rc-ticker__list{ flex-wrap: wrap; justify-content: center; row-gap: 8px; }
  .rc-ticker__list[aria-hidden="true"]{ display: none; }
}