/* Reference art is a static plate. Only the inner disc is composited during
   a spin; no animated filters, backdrop blur or full-screen canvas loop. */
.roulette-screen-container.rl-reference-view {
  position: relative; display: grid; place-items: center; container-type: size;
  width: 100%; max-width: none; height: 100%; min-height: 0; padding: 0;
  margin: 0; gap: 0; border: 0; border-radius: 0; box-shadow: none;
  background: #040b14 url('../media/roulette/fortune-vault.webp') center / cover no-repeat;
  overflow: hidden; isolation: isolate;
}
.rl-reference-view::before, .rl-reference-view::after { display: none; }
.rl-scene {
  position: relative; width: min(100cqw, 56.2799cqh); aspect-ratio: 941 / 1672;
  flex: none; container-type: inline-size; overflow: hidden;
  background: none;
}
.rl-scene::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url('../media/roulette/fortune-overlay.webp') center / 100% 100% no-repeat;
  clip-path: inset(0 0 25.72% 0);
}
.rl-art-sprite { display: block; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
.rl-scene .rl-header-wrapper {
  position: absolute; left: 6.376%; top: .957%; width: 87.46%; height: 13.158%;
  margin: 0; padding: 0; display: block;
}
.rl-reference-heading { position: absolute; left: 13.122%; top: 33.182%; width: 73.876%; height: 48.182%; }
.rl-scene .rl-crown-top, .rl-scene .rl-ribbon-tail { display: none; }
.rl-scene .rl-banner-container { height: 100%; width: 100%; }
.rl-scene .rl-banner-frame {
  position: absolute; left: 8%; top: 29%; width: 84%; max-width: none;
  border: 0; padding: 0; background: none; box-shadow: none; border-radius: 0;
}
.rl-scene .rl-standard-header .rl-banner-frame { opacity: 0; }
.rl-scene .rl-super-header .rl-reference-heading { display: none; }
.rl-scene .rl-banner-inner { gap: 1cqw; }
.rl-scene .rl-banner-dice { width: 5cqw; height: 5cqw; }
.rl-scene .rl-main-title { font-size: 4.7cqw; letter-spacing: .06cqw; line-height: 1; }
.rl-scene .rl-sub-title { display: block; font-size: 2.55cqw; margin-top: 1.8cqw; color: #d5ddef; }
.rl-scene .rl-boosters-bar {
  position: absolute; top: 14.95%; left: 16.7%; width: 66.6%; height: 2.8%;
  display: flex; margin: 0; padding: 0;
}
.rl-scene .rl-booster-pill {
  width: 100%; max-width: none; border: 0; padding: 0; border-radius: 0;
  background: none; box-shadow: none; gap: 1.4cqw;
}
.rl-scene .rl-pill-shield { width: 3.6cqw; height: 3.6cqw; }
.rl-scene .rl-pill-text { font-size: 2.85cqw; color: #c6dbff; font-weight: 600; letter-spacing: 0; }
.rl-scene .rl-boosters-list { gap: 1.5cqw; padding: 0; align-items: center; scrollbar-width: none; }
.rl-scene .rl-booster-chip { padding: .4cqw 1.2cqw; gap: 1cqw; border-radius: 1cqw; }
.rl-scene .rl-b-name, .rl-scene .rl-b-time { font-size: 2.4cqw; line-height: 1; }
.rl-scene .rl-b-icon { width: 3cqw; height: 3cqw; }
.rl-scene .rl-streak-box {
  position: absolute; left: 18.1%; top: 20.35%; width: 63.8%; height: 5.5%;
  padding: 0; margin: 0;
}
.rl-scene .rl-streak-meter {
  border: 0; border-radius: 0; padding: 0; background: none; box-shadow: none;
  height: 100%; display: flex; flex-direction: column; justify-content: space-between;
}
.rl-scene .rl-streak-meter::before, .rl-scene .rl-streak-meter::after { display: none; }
.rl-scene .rl-streak-label { display: flex; justify-content: space-between; align-items: center; gap: 1cqw; white-space: nowrap; }
.rl-scene .rl-streak-title { font-size: 2.95cqw; font-weight: 700; color: #e5f6ff; letter-spacing: 0; }
.rl-scene .rl-streak-sub { font-size: 2.75cqw; color: #a9c6f8; font-weight: 600; }
.rl-scene .rl-streak-track { position: relative; height: 5.2cqw; margin: 0; border: 0; box-shadow: none; background: none; }
.rl-scene .rl-streak-groove { inset: 8% 0; height: auto; transform: none; background: #030810a8; border: 0; }
.rl-scene .rl-streak-progress { display: none; }
.rl-scene .rl-streak-nodes { position: absolute; inset: 0; display: flex; justify-content: space-between; }
.rl-scene .rl-streak-node {
  width: 5.1cqw; height: 5.1cqw; border: .25cqw solid #898c96; border-radius: 50%;
  background: linear-gradient(130deg,#666972,#27282d 45%,#343943); box-shadow: inset 0 0 0 .35cqw #191b21, 0 .3cqw .8cqw #000;
  font-size: 3cqw; color: #bfc1cc;
}
.rl-scene .rl-streak-node .node-num { font-size: 3cqw; }
.rl-scene .rl-streak-node.filled, .rl-scene .rl-streak-node.super-node {
  border-color: #ffe399; color: #fff6d5;
  background: radial-gradient(ellipse at 30% 20%,#a57431,#192128 65%);
  box-shadow: inset 0 0 0 .3cqw #4c3213, 0 0 1.2cqw #ffc65080;
}
.rl-scene .rl-streak-node .ic { width: 3.3cqw; height: 3.3cqw; }
.rl-scene .rl-wheel-wrapper {
  position: absolute; left: 14.984%; top: 29.665%; width: 70.138%; height: 39.474%;
  aspect-ratio: 1; max-width: none; max-height: none; min-height: 0; margin: 0; flex: none;
  display: block; isolation: isolate;
}
.rl-scene .rl-wheel-wrapper::before, .rl-scene .rl-wheel-wrapper::after { display: none; }
.rl-scene .rl-canvas {
  display: block; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; border-radius: 50%; filter: none; box-shadow: none; transform-origin: 50% 50%;
}
.rl-scene .rl-canvas.rl-encaje { animation: none; }
.rl-scene .rl-hub {
  position: absolute; left: 37.879%; top: 37.879%; width: 24.242%; height: 24.242%;
  transform: none; border: 0; padding: 0; border-radius: 50%; overflow: hidden;
  background: none; box-shadow: 0 0 1.3cqw #ffc24966; z-index: 3;
}
.rl-scene .rl-needle {
  position: absolute; top: -8.48%; left: 50%; width: 9.4%; height: 10.9%;
  transform: translate3d(-50%,0,0); transform-origin: 50% 8%; margin: 0; z-index: 50; filter: none;
  clip-path: polygon(0 10%,50% 0,100% 10%,50% 100%); background: none;
  pointer-events: none; backface-visibility: hidden;
}
.rl-scene .rl-needle-arrow {
  /* La flecha queda por encima del canvas: la punta de la placa fotográfica
     se usaba como decoración y terminaba debajo de la rueda al girar. */
  display: block !important;
  border-left-width: 12px;
  border-right-width: 12px;
  border-top-width: 26px;
  filter: drop-shadow(0 0 5px #fff0a0) drop-shadow(0 3px 4px rgba(0,0,0,.85));
}
.rl-scene .rl-needle.rl-tick .rl-needle-arrow {
  filter: brightness(1.65) drop-shadow(0 0 9px #fff0a0) drop-shadow(0 3px 4px rgba(0,0,0,.85));
}
.rl-scene .rl-needle.rl-tick { background: #fff2cb55; }
.rl-scene .rl-needle.rl-spinning {
  will-change: transform;
  animation: rlNeedleRattle .12s cubic-bezier(.45,0,.55,1) infinite alternate;
}
@keyframes rlNeedleRattle {
  from { transform: translate3d(-50%,0,0) rotate(-11deg); }
  to   { transform: translate3d(-50%,0,0) rotate(11deg); }
}
.rl-scene .rl-pedestal { display: none; }
.rl-scene .rl-controls {
  position: absolute; top: 74.282%; left: 0; width: 100%; height: 22%; padding: 0; margin: 0;
}
.rl-scene .rl-cta-wrap { position: absolute; inset: 0; padding: 0; margin: 0; display: block; }
.rl-scene .rl-cta-btn.btn {
  position: absolute; left: 11.583%; top: 0; width: 76.94%; height: 54.915%;
  min-height: 0; max-width: none; margin: 0; padding: 0 4%; border: 0; border-radius: 0;
  background: transparent; box-shadow: none; color: #fff2bf; overflow: hidden; isolation: isolate;
  clip-path: polygon(8% 0,92% 0,100% 25%,100% 75%,92% 100%,8% 100%,0 75%,0 25%);
  animation: none; filter: none; transform: none; text-shadow: none;
}
.rl-scene .rl-cta-btn.btn::before {
  content: ''; position: absolute; inset: 10% 2%; z-index: 2; pointer-events: none;
  background: linear-gradient(110deg,transparent 30%,#fff8c532 49%,transparent 66%);
  transform: translateX(-110%); animation: rl-gold-glint 6s ease-in-out infinite;
  border: 0; box-shadow: none; opacity: 1;
}
.rl-scene .rl-cta-btn.btn::after { display: none; }
/* Override the older global holographic rule, which paints every neutral
   .btn blue with !important and otherwise covers the photographic frame. */
.rl-reference-view .rl-scene .rl-controls .rl-cta-wrap .btn.rl-cta-btn {
  background: transparent !important; box-shadow: none !important;
}
.rl-scene .rl-cta-btn.btn:active { transform: scale(.984); }
.rl-scene .rl-cta-btn.btn:focus-visible { outline: .55cqw solid #fff7c1; outline-offset: -.8cqw; }
.rl-scene .rl-cta-btn.btn:disabled { cursor: default; opacity: .68; }
.rl-scene .rl-cta-btn.btn:disabled::before { animation: none; }
.rl-scene .rl-reference-free { position: absolute; inset: 0; z-index: 1; }
.rl-scene .rl-reference-cta { position: absolute; inset: 0; z-index: 0; }
.rl-scene .btn-free-spin .rl-cta-inner { opacity: 0; }
.rl-scene .rl-cta-inner { position: relative; display: flex; justify-content: center; align-items: center; gap: 2cqw; z-index: 1; }
.rl-scene .rl-cta-dice { width: 7cqw; height: 7cqw; flex: none; filter: none; }
.rl-scene .rl-cta-dice svg { width: 100%; height: 100%; }
.rl-scene .rl-cta-text { display: flex; flex-direction: column; gap: .8cqw; }
.rl-scene .rl-cta-title {
  font-size: 4.3cqw; line-height: 1.1; font-weight: 900; font-style: italic; letter-spacing: .1cqw;
  color: #fff1bc; -webkit-text-fill-color: #fff1bc; background: none; text-shadow: 0 .3cqw .2cqw #3b230b;
}
.rl-scene .rl-cta-sub { font-size: 2.6cqw; color: #ddfaff; letter-spacing: .16cqw; line-height: 1.3; }
.rl-scene .rl-footer-motto {
  position: absolute; top: 69.33%; left: 32.52%; width: 35.49%; height: 26.91%;
  margin: 0; padding: 0; display: block;
}
.rl-scene .rl-motto-crown-line { display: flex; justify-content: center; gap: 2cqw; margin-bottom: 1.2cqw; }
.rl-scene .rl-motto-crown { width: 5cqw; height: 4cqw; color: #dab76f; }
.rl-scene .rl-motto-crown svg { width: 100%; height: 100%; }
.rl-scene .rl-motto-line { width: 9cqw; height: 1px; }
.rl-scene .rl-motto-text { display: block; font-size: 1.8cqw; line-height: 1.6; letter-spacing: .55cqw; color: #d8bf88; text-align: center; }
.rl-scene .empty { position: absolute; top: 45%; left: 15%; width: 70%; color: white; text-align: center; }
.rl-reward-art { display: block; width: 100%; height: 100%; border-radius: 50%; }
.roulette-reward-popup .rl-reward-ico { width: 108px; height: 108px; }
.roulette-reward-popup .rl-reward-icon-box { width: 118px; height: 118px; overflow: hidden; border: 3px solid #e7b650; background: #060e19; box-shadow: 0 0 22px var(--rw), inset 0 0 0 4px #ffe1a4; }
.roulette-reward-popup .btn.rl-reward-claim { position: relative; width: 100%; aspect-ratio: 724 / 202; min-height: 80px; padding: 0; background: none; border: 0; box-shadow: none; clip-path: none; }
.popup.roulette-reward-popup .popup-foot .btn.rl-reward-claim.action { background: none !important; box-shadow: none !important; }
.roulette-reward-popup .btn.rl-reward-claim::before, .roulette-reward-popup .btn.rl-reward-claim::after { display: none; }
.roulette-reward-popup .rl-reward-claim .rl-art-sprite { position: absolute; inset: 0; }
.roulette-reward-popup .rl-reward-claim > span {
  position: relative; z-index: 5; display: block;
  color: #fff1bd !important; -webkit-text-fill-color: #fff1bd !important;
  background: none !important;
  font-size: 23px; font-weight: 900; font-style: italic;
  text-shadow: 0 2px 2px #513708, 0 0 8px rgba(255,240,175,.55);
}
.roulette-reward-popup .rl-rays { animation-duration: 20s; }
.roulette-reward-popup .rl-shock { animation-iteration-count: 1; }
.rl-art-fallback .rl-standard-header .rl-banner-frame, .rl-art-fallback .btn-free-spin .rl-cta-inner { opacity: 1; }
.rl-art-fallback .rl-reference-heading, .rl-art-fallback .rl-reference-free { display: none; }
@keyframes rl-gold-glint { 0%,65% { transform: translateX(-110%); } 90%,100% { transform: translateX(110%); } }
@media (prefers-reduced-motion: reduce) {
  .rl-scene .rl-cta-btn.btn::before, .roulette-reward-popup .rl-rays,
  .roulette-reward-popup .rl-shock, .roulette-reward-popup .rl-reward-icon-box,
  .rl-scene .rl-needle.rl-spinning { animation: none; }
}