/**
 * Roleta de prêmios — folha de estilo da página /roleta.
 *
 * Separada de pages/roleta.html porque o template passou do limite de linhas
 * do editor da CentralCart. É carregada no <head> do layout, com gate por
 * pathname: precisa ser render-blocking porque define o layout inteiro da
 * página (inclusive ocultar navbar/rodapé) — async causaria FOUC e CLS.
 *
 * Se precisar dividir de novo, o corte natural é na seção "MODAL DE PREMIOS".
 */

/* =====================================================================
   TOKENS
   Namespace --rl-* para nao colidir com as variaveis do layout.
   --rl-card-w / --rl-gap ficam em .luckzs-roleta-page e PRECISAM ser px
   literais: o Reel le os dois com getComputedStyle().getPropertyValue(),
   que nao resolve clamp()/calc() em custom property nao registrada.
   ===================================================================== */

:root {
  --rl-blue: #002bff;
  --rl-blue-500: #1e4dff;
  --rl-blue-400: #4f7bff;
  --rl-blue-line: rgba(60, 110, 255, 0.42);
  --rl-blue-wash: rgba(0, 43, 255, 0.16);

  --rl-bg: #00030f;
  --rl-panel: rgba(3, 12, 48, 0.86);
  --rl-panel-2: rgba(2, 9, 38, 0.72);
  --rl-surface: rgba(8, 20, 62, 0.62);
  --rl-line: rgba(126, 160, 255, 0.16);
  --rl-line-strong: rgba(126, 160, 255, 0.3);

  --rl-title: #fff8f2;
  --rl-text: #e4ecff;
  --rl-muted: #a9bce4;
  --rl-muted-2: #8496c2;

  --rl-green: #2be08a;
  --rl-green-soft: rgba(43, 224, 138, 0.14);
  --rl-danger: #ff5c7a;
  --rl-danger-soft: rgba(255, 92, 122, 0.12);
  --rl-warn: #ffc061;

  --rl-r-xs: 8px;
  --rl-r-sm: 12px;
  --rl-r-md: 16px;
  --rl-r-lg: 22px;
  --rl-r-xl: 30px;
  --rl-r-pill: 999px;

  --rl-s-1: 4px;
  --rl-s-2: 8px;
  --rl-s-3: 12px;
  --rl-s-4: 16px;
  --rl-s-5: 22px;
  --rl-s-6: 30px;
  --rl-s-7: 42px;
  --rl-s-8: 60px;

  --rl-shadow-panel: 0 26px 60px rgba(0, 2, 16, 0.46);
  --rl-shadow-btn: 0 14px 30px rgba(0, 43, 255, 0.32);
  --rl-shadow-pop: 0 34px 90px rgba(0, 2, 14, 0.62);
  --rl-inset-line: inset 0 1px 0 rgba(255, 255, 255, 0.07);

  --rl-t-fast: 140ms;
  --rl-t: 200ms;
  --rl-t-slow: 340ms;
  --rl-ease: cubic-bezier(0.2, 0.8, 0.3, 1);

  --rl-z-dialog: 1000;
  --rl-z-blackout: 1010;
  --rl-z-flood: 1011;
  --rl-z-reveal: 1020;

  /* estado dinamico — o JS sobrescreve nos elementos donos */
  --rl-vel: 0;
  --rl-lit: 0;
  --rl-glow: 0.1;
  --rl-spill: transparent;
  --rl-ambient: var(--rl-blue);
  --rl-shake: 0;
}

/* =====================================================================
   PAGINA SEM CROMO
   A roleta roda em tela cheia: navbar e rodape saem, e a logo central vira
   a unica rota de volta. Esta folha so e carregada em /roleta (gate por
   pathname no layout), entao os seletores globais abaixo nao vazam.
   ===================================================================== */

#announcement-bar,
.luckzs-navbar,
.luckzs-footer-wrap {
  display: none !important;
}

/* Sem barra e sem navbar fixa, o respiro do topo definido no <head> vira
   buraco. Mesmo tratamento que pages/checkout.html usa. */
main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.rl-home {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-r-lg);
  background: var(--rl-panel-2);
  box-shadow: var(--rl-inset-line);
  text-decoration: none;
  transition: transform var(--rl-t) var(--rl-ease), border-color var(--rl-t) var(--rl-ease);
}

.rl-home:hover {
  border-color: var(--rl-line-strong);
  transform: translateY(-1px);
}

.rl-home__logo {
  width: 117px;
  height: auto;
  object-fit: contain;
}

.rl-home__hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--rl-muted-2);
  font-size: 13px;
  font-weight: 600;
  transition: color var(--rl-t) var(--rl-ease);
}

.rl-home__hint svg {
  width: 14px;
  height: 14px;
}

.rl-home:hover .rl-home__hint,
.rl-home:focus-visible .rl-home__hint {
  color: var(--rl-text);
}

.rl-home:focus-visible {
  outline: 3px solid var(--rl-green);
  outline-offset: 3px;
}

/* =====================================================================
   SHELL DA PAGINA
   ===================================================================== */

.luckzs-roleta-page {
  --rl-card-w: 200px;
  --rl-card-h: 268px;
  --rl-gap: 14px;

  /* Ritmo vertical da pista. --rl-reel-top é onde o card começa; --rl-reel-pad
     é quanto a pista tem a mais que o card. O marcador é todo derivado desses
     dois, então mudar o tamanho do card não desalinha nada. */
  --rl-reel-top: 68px;
  --rl-reel-pad: 100px;
  --rl-focus-scale: 1.12;
  /* Metade do que o card central cresce ao escalar: (card-h * (escala-1)) / 2.
     Literal por breakpoint, como --rl-card-w — as setas do marcador dependem
     dele, e um calc com var aninhado que falhe derruba a regra inteira. */
  --rl-focus-grow: 16px;

  position: relative;
  width: 100%;
  overflow: hidden;
  padding: calc(28px + env(safe-area-inset-top, 0px)) 18px calc(80px + env(safe-area-inset-bottom, 0px));
  background: transparent;
  color: var(--rl-text);
}

.luckzs-roleta-page,
.luckzs-roleta-page *,
.luckzs-roleta-page *::before,
.luckzs-roleta-page *::after {
  box-sizing: border-box;
}

.luckzs-roleta-page [hidden] {
  display: none;
}

.rl-shell {
  position: relative;
  z-index: 1;
  width: min(100%, 1368px);
  margin: 0 auto;
}

.rl-decor {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.rl-decor--left,
.rl-decor--right {
  border-radius: var(--rl-r-pill);
  filter: blur(130px);
}

.rl-decor--left {
  width: 460px;
  height: 460px;
  left: -220px;
  top: 90px;
  background: rgba(0, 43, 255, 0.34);
}

.rl-decor--right {
  width: 520px;
  height: 520px;
  right: -260px;
  bottom: 80px;
  background: rgba(0, 43, 255, 0.22);
}

/* Trama diagonal discreta — ecoa o corte das faixas do logo. */
.rl-decor--grid {
  inset: 0;
  opacity: 0.5;
  background-image: repeating-linear-gradient(
    116deg,
    rgba(126, 160, 255, 0.05) 0px,
    rgba(126, 160, 255, 0.05) 1px,
    transparent 1px,
    transparent 46px
  );
  mask-image: radial-gradient(120% 70% at 50% 24%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 70% at 50% 24%, #000 0%, transparent 72%);
}

.rl-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.rl-num {
  font-variant-numeric: tabular-nums;
}

/* =====================================================================
   INTRODUCAO
   ===================================================================== */

/* Logo à esquerda, discurso no meio, conta à direita. */
.rl-intro {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--rl-s-5);
  margin-bottom: var(--rl-s-5);
}

.rl-intro__lead {
  justify-self: center;
  min-width: 0;
  max-width: 820px;
  text-align: center;
}

.rl-seal {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--rl-s-4);
  padding: 6px 16px 6px 6px;
  border: 1px solid rgba(43, 224, 138, 0.42);
  border-radius: var(--rl-r-pill);
  background: linear-gradient(100deg, var(--rl-green-soft), rgba(43, 224, 138, 0.04));
  color: var(--rl-green);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.9px;
  line-height: 1;
  text-transform: uppercase;
}

.rl-seal__mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--rl-r-pill);
  background: rgba(43, 224, 138, 0.16);
  color: var(--rl-green);
}

.rl-seal__icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.rl-seal__icon-fallback {
  width: 17px;
  height: 17px;
}

/* Uma linha só, em qualquer largura: o clamp encolhe a fonte em vez de quebrar.
   O texto ocupa ~17,2em, então 42px pede ~720px e 16px pede ~275px — cabe da
   coluna do meio no desktop até 320px de viewport. */
.rl-intro__title {
  margin: 0;
  color: var(--rl-title);
  font-size: clamp(16px, 4.3vw, 42px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.rl-intro__title em {
  font-style: normal;
  color: var(--rl-blue-400);
}

.rl-intro__lede {
  max-width: 52ch;
  margin: var(--rl-s-3) auto 0;
  color: var(--rl-muted);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.rl-intro__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--rl-s-2);
}

/* ---------- logo + carteira de giros ---------- */

.rl-wallet {
  min-width: 264px;
  padding: 14px 18px 16px;
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-r-lg);
  background: var(--rl-panel-2);
  box-shadow: var(--rl-inset-line);
}

.rl-wallet[data-state="ready"] {
  border-color: rgba(43, 224, 138, 0.34);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(43, 224, 138, 0.12), transparent 60%),
    var(--rl-panel-2);
}

.rl-wallet__who {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--rl-line);
  color: var(--rl-muted);
  font-size: 14px;
  font-weight: 600;
}

.rl-wallet__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  overflow: hidden;
  border-radius: var(--rl-r-pill);
  background: linear-gradient(180deg, var(--rl-blue-500), var(--rl-blue));
  color: #ffffff;
}

.rl-wallet__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rl-wallet__avatar svg {
  width: 16px;
  height: 16px;
}

.rl-wallet__name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.rl-wallet__count {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  color: var(--rl-text);
  font-size: 15px;
  font-weight: 600;
}

.rl-wallet__value {
  color: var(--rl-title);
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -1.2px;
}

.rl-wallet[data-state="ready"] .rl-wallet__value {
  color: var(--rl-green);
}

.rl-wallet[data-state="loading"] .rl-wallet__value {
  animation: rl-pulse 1.4s ease-in-out infinite;
}

.rl-wallet__lead,
.rl-wallet__label {
  color: var(--rl-muted);
}

/* ---------- ferramentas ---------- */

.rl-tools {
  display: flex;
  align-items: center;
  gap: var(--rl-s-2);
}

.rl-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-r-pill);
  background: var(--rl-surface);
  color: var(--rl-text);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--rl-t) var(--rl-ease), border-color var(--rl-t) var(--rl-ease), color var(--rl-t) var(--rl-ease);
}

.rl-tool svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.rl-tool:hover {
  border-color: var(--rl-line-strong);
  background: rgba(20, 40, 96, 0.72);
  color: #ffffff;
}

.rl-tool--icon {
  width: 44px;
  padding: 0;
}

.rl-tool[data-state="on"] {
  border-color: rgba(43, 224, 138, 0.4);
  color: var(--rl-green);
}

/* =====================================================================
   PAINEL DA ROLETA
   ===================================================================== */

.rl-stage {
  position: relative;
  padding: var(--rl-s-4) var(--rl-s-4) var(--rl-s-5);
  border: 1px solid var(--rl-blue-line);
  border-radius: var(--rl-r-xl);
  background:
    radial-gradient(90% 60% at 50% -10%, rgba(0, 43, 255, 0.3), transparent 68%),
    linear-gradient(180deg, rgba(6, 18, 60, 0.92), rgba(2, 8, 34, 0.92));
  box-shadow: var(--rl-inset-line), var(--rl-shadow-panel);
}

/* Recorte de canto: liga o painel ao tratamento angular do restante do site. */
.rl-stage::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 168px;
  height: 3px;
  transform: translateX(-50%);
  border-radius: var(--rl-r-pill);
  background: linear-gradient(90deg, transparent, var(--rl-blue-400), transparent);
  opacity: 0.75;
}

.rl-stage [hidden] {
  display: none;
}

/* ---------- premio maximo ---------- */

.rl-jackpot {
  display: flex;
  align-items: center;
  gap: var(--rl-s-3);
  margin-bottom: var(--rl-s-3);
  padding: 8px 14px 8px 8px;
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-r-md);
  background: var(--rl-panel-2);
}

.rl-jackpot__shot {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: var(--rl-r-sm);
  background: #030818;
}

.rl-jackpot__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rl-jackpot__tile {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--rl-green);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.5px;
}

.rl-jackpot__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.rl-jackpot__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--rl-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.rl-jackpot__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: var(--rl-r-pill);
  background: var(--rl-green);
  box-shadow: 0 0 12px rgba(43, 224, 138, 0.8);
}

.rl-jackpot__text strong {
  overflow: hidden;
  color: var(--rl-title);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.3px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.rl-jackpot__stock {
  flex: none;
  margin-left: auto;
  padding: 6px 12px;
  border: 1px solid rgba(43, 224, 138, 0.34);
  border-radius: var(--rl-r-pill);
  background: var(--rl-green-soft);
  color: var(--rl-green);
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* =====================================================================
   REEL
   ===================================================================== */

.rl-reel {
  position: relative;
  height: calc(var(--rl-card-h) + var(--rl-reel-pad));
  overflow: hidden;
  border-radius: var(--rl-r-lg);
  contain: layout paint;
}

.rl-reel__ambient {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  width: 120%;
  height: 260%;
  transform: translate3d(-50%, -50%, 0);
  background: radial-gradient(closest-side, var(--rl-ambient), transparent 72%);
  opacity: calc(var(--rl-glow) + var(--rl-vel) * 0.18 + var(--rl-lit) * 0.26);
  filter: blur(52px);
  pointer-events: none;
  transition: background 90ms linear, opacity 90ms linear;
}

/* flex-start + margin no track deixa a posicao do card deterministica: com
   align-items:center a margem contaria pela metade e o marcador desalinharia. */
.rl-reel__viewport {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  perspective: 1400px;
  perspective-origin: 50% 46%;
  transition: opacity var(--rl-t) linear;
}

.rl-reel__viewport[data-fade="1"] {
  opacity: 0;
}

.rl-reel__track {
  display: flex;
  margin-top: var(--rl-reel-top);
  gap: var(--rl-gap);
  transform: translate3d(0, 0, 0);
  transform-style: preserve-3d;
  will-change: transform;
}

.rl-reel__blur {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: calc(var(--rl-vel) * 0.45);
  pointer-events: none;
  background: repeating-linear-gradient(
    90deg,
    rgba(0, 4, 24, 0) 0px,
    rgba(0, 4, 24, 0) 5px,
    rgba(0, 4, 24, 0.5) 6px,
    rgba(0, 4, 24, 0) 8px
  );
}

.rl-reel__fade {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(2, 8, 34, 0.96) 0%,
    rgba(2, 8, 34, 0) 17%,
    rgba(2, 8, 34, 0) 83%,
    rgba(2, 8, 34, 0.96) 100%
  );
}

.rl-demo-chip {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 6;
  padding: 6px 13px;
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-r-pill);
  background: rgba(2, 9, 38, 0.86);
  color: var(--rl-muted);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  pointer-events: none;
}

/* =====================================================================
   INDICADOR CENTRAL
   ===================================================================== */

.rl-marker {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  z-index: 5;
  width: calc(var(--rl-card-w) + 16px);
  transform: translateX(-50%);
  pointer-events: none;
}

.rl-marker__label {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 12px;
  border: 1px solid rgba(43, 224, 138, 0.4);
  border-radius: var(--rl-r-pill);
  background: rgba(3, 24, 20, 0.86);
  color: var(--rl-green);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Geometria travada no card central: track tem margin-top 62px e a pista tem
   84px a mais que o card, logo o card ocupa de 62px a 62px + --rl-card-h. */
.rl-marker__line {
  position: absolute;
  left: 50%;
  top: calc(var(--rl-reel-top) - var(--rl-focus-grow) - 2px);
  bottom: calc(var(--rl-reel-pad) - var(--rl-reel-top) - var(--rl-focus-grow) - 2px);
  width: 2px;
  transform: translateX(-1px);
  border-radius: var(--rl-r-pill);
  background: linear-gradient(180deg, transparent, var(--rl-green) 14%, var(--rl-green) 86%, transparent);
  opacity: 0.85;
  box-shadow: 0 0 14px rgba(43, 224, 138, 0.5);
}

.rl-marker__cap {
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  transform: translateX(-7px);
  filter: drop-shadow(0 0 8px rgba(43, 224, 138, 0.55));
}

.rl-marker__cap--top {
  top: calc(var(--rl-reel-top) - var(--rl-focus-grow) - 10px);
  border-top: 10px solid var(--rl-green);
}

.rl-marker__cap--bottom {
  bottom: calc(var(--rl-reel-pad) - var(--rl-reel-top) - var(--rl-focus-grow) - 10px);
  border-bottom: 10px solid var(--rl-green);
}

.rl-marker__frame {
  position: absolute;
  left: 50%;
  top: calc(var(--rl-reel-top) - 5px);
  width: calc(var(--rl-card-w) + 10px);
  height: calc(var(--rl-card-h) + 10px);
  transform: translateX(-50%) scale(var(--rl-focus-scale));
  border: 1px solid rgba(43, 224, 138, 0.34);
  border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(2, 9, 38, 0.6);
}

.rl-marker__spot {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  width: calc(var(--rl-card-w) * 2.2);
  height: 120%;
  transform: translate3d(-50%, -50%, 0);
  background: radial-gradient(closest-side, rgba(43, 224, 138, 0.16), transparent 74%);
  opacity: calc(0.5 + var(--rl-lit) * 0.5);
  filter: blur(26px);
  pointer-events: none;
}

/* =====================================================================
   CARDS
   ===================================================================== */

.rl-card {
  --rl-tier: var(--rl-blue-400);
  --rl-ink: #ffffff;
  position: relative;
  flex: none;
  display: grid;
  grid-template-rows: 28px 1fr auto;
  width: var(--rl-card-w);
  height: var(--rl-card-h);
  overflow: hidden;
  border: 1.5px solid var(--rl-line);
  border-radius: var(--rl-r-md);
  background: linear-gradient(180deg, #0a1130, #060b22);
  /* Contexto próprio: nenhum filho consegue pintar sobre o vizinho, mesmo
     dentro do preserve-3d da pista. */
  isolation: isolate;
  opacity: calc(1 - var(--rl-vel) * 0.4);
  transform: translate3d(0, 0, 0);
  transition: transform 280ms var(--rl-ease), opacity var(--rl-t-fast) linear;
}

.rl-card__strip {
  grid-row: 1;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  background: var(--rl-tier);
  color: var(--rl-ink);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(0, 0, 0, 0.28);
}

.rl-card__tier {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Numeral romano: a raridade nao depende so da cor. */
.rl-card__pips {
  flex: none;
  padding: 2px 5px;
  border-radius: var(--rl-r-xs);
  background: rgba(0, 0, 0, 0.24);
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.5px;
}

.rl-card__shot {
  grid-row: 2;
  position: relative;
  z-index: 1;
  min-height: 0;
  overflow: hidden;
  border-bottom: 1px solid rgba(126, 160, 255, 0.14);
  background: #04081a;
}

.rl-card__img,
.rl-card__tile {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

/* contain, não cover: cover ampliava a arte até preencher e cortava o topo do
   produto logo abaixo da faixa — o que lê como se a faixa estivesse por cima.
   O respiro deixa a imagem dentro da própria área, sem encostar na faixa. */
.rl-card__img {
  padding: 7px;
  object-fit: contain;
}

.rl-card__tile {
  display: grid;
  place-items: center;
  color: var(--rl-tier);
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -1.5px;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--rl-tier) 18%, transparent), transparent 68%);
}

.rl-card__mat {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.rl-card__body {
  grid-row: 3;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 12px 14px;
  text-align: center;
  background: linear-gradient(180deg, rgba(10, 17, 48, 0.6), #060b22);
}

.rl-card__name {
  display: -webkit-box;
  min-height: 2.4em;
  overflow: hidden;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.2px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.rl-card__odds {
  color: var(--rl-muted);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.rl-chip {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  padding: 4px 14px;
  transform: translate(-50%, -50%);
  border-radius: var(--rl-r-xs);
  background: #8f1330;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

.rl-card[data-stock="0"] .rl-card__shot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.6);
}

/* ---------- profundidade por distancia do centro ----------
   data-dist vem COM sinal do applyFocus: negativo a esquerda, positivo a
   direita. Cada lado gira em direcao ao centro e recua no eixo Z, formando um
   corredor. O translateX puxa de volta o vao que a rotacao abre.

   So e aplicado parado ou no fim da frenagem — em velocidade alta os cards
   ficam planos (sem data-dist), o que evita distorcao e custo de perspectiva
   justamente quando ha mais quadros para desenhar. */

.rl-card[data-dist="0"] {
  transform: scale(var(--rl-focus-scale));
  border-color: color-mix(in srgb, var(--rl-tier) 55%, var(--rl-line-strong));
}

.rl-card[data-dist="-1"] {
  transform: translate3d(7px, 0, -44px) rotateY(15deg);
}

.rl-card[data-dist="1"] {
  transform: translate3d(-7px, 0, -44px) rotateY(-15deg);
}

.rl-card[data-dist="-2"] {
  transform: translate3d(16px, 0, -105px) rotateY(22deg);
  opacity: 0.86;
}

.rl-card[data-dist="2"] {
  transform: translate3d(-16px, 0, -105px) rotateY(-22deg);
  opacity: 0.86;
}

.rl-card[data-dist="-3"] {
  transform: translate3d(26px, 0, -170px) rotateY(27deg);
  opacity: 0.68;
}

.rl-card[data-dist="3"] {
  transform: translate3d(-26px, 0, -170px) rotateY(-27deg);
  opacity: 0.68;
}

/* ---------- materiais por raridade ---------- */

.rl-card[data-rank="1"] {
  border-color: var(--rl-line);
}

.rl-card[data-rank="2"] {
  border-color: color-mix(in srgb, var(--rl-tier) 34%, var(--rl-line));
}

.rl-card[data-rank="2"] .rl-card__mat {
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.05) 0px,
    rgba(255, 255, 255, 0.05) 1px,
    transparent 1px,
    transparent 5px
  );
}

.rl-card[data-rank="3"] {
  border: 1.5px solid color-mix(in srgb, var(--rl-tier) 58%, transparent);
}

.rl-card[data-rank="3"] .rl-card__mat {
  background: radial-gradient(120% 80% at 50% 100%, color-mix(in srgb, var(--rl-tier) 20%, transparent) 0%, transparent 70%);
}

.rl-card[data-rank="4"] {
  border: 2px solid color-mix(in srgb, var(--rl-tier) 68%, transparent);
  outline: 1px solid color-mix(in srgb, var(--rl-tier) 32%, transparent);
  outline-offset: 3px;
}

.rl-card[data-rank="4"] .rl-card__mat::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200%;
  aspect-ratio: 1;
  transform: translate3d(-50%, -50%, 0) rotate(0deg);
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    color-mix(in srgb, var(--rl-tier) 24%, transparent) 60deg,
    transparent 120deg,
    transparent 240deg,
    color-mix(in srgb, var(--rl-tier) 14%, transparent) 300deg,
    transparent 360deg
  );
  animation: rl-refract 9s linear infinite;
}

.rl-card[data-rank="5"] {
  border: 2px solid color-mix(in srgb, var(--rl-tier) 72%, transparent);
  box-shadow: 0 0 34px -6px color-mix(in srgb, var(--rl-tier) 58%, transparent);
}

.rl-card[data-rank="5"] .rl-card__mat {
  background: radial-gradient(130% 90% at 50% 100%, color-mix(in srgb, var(--rl-tier) 26%, transparent) 0%, transparent 72%);
}

.rl-card[data-rank="5"] .rl-card__mat::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--rl-tier);
  animation: rl-edge 1.8s ease-in-out infinite;
}

.rl-card[data-rank="6"] {
  border: 2px solid var(--rl-tier);
  box-shadow: 0 0 46px -8px color-mix(in srgb, var(--rl-tier) 68%, transparent);
}

.rl-card[data-rank="6"] .rl-card__mat {
  background: linear-gradient(180deg, transparent 38%, color-mix(in srgb, var(--rl-tier) 30%, transparent) 100%);
}

@keyframes rl-refract {
  to {
    transform: translate3d(-50%, -50%, 0) rotate(360deg);
  }
}

@keyframes rl-edge {
  0%,
  100% {
    opacity: 0.25;
  }
  50% {
    opacity: 1;
  }
}

/* ---------- estados do reel ---------- */

.rl-reel[data-mythic="1"] .rl-card:not([data-rank="6"]) {
  opacity: calc((1 - var(--rl-vel) * 0.4) * 0.45);
  transition: opacity var(--rl-t-fast) linear;
}

.rl-card[data-spill="1"] {
  border-color: color-mix(in srgb, var(--rl-spill) 40%, var(--rl-line));
  box-shadow: 0 0 30px -6px color-mix(in srgb, var(--rl-spill) 62%, transparent);
}

.rl-reel[data-won="1"] .rl-card {
  opacity: 0.22;
  transition: opacity var(--rl-t-fast) linear;
}

.rl-reel[data-won="1"] .rl-card[data-winner="1"] {
  z-index: 3;
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1.18);
  box-shadow: 0 0 54px -6px color-mix(in srgb, var(--rl-tier) 72%, transparent);
  animation: rl-winner 900ms var(--rl-ease) 120ms;
}

@keyframes rl-winner {
  0% {
    transform: translate3d(0, 0, 0) scale(1.02);
  }
  38% {
    transform: translate3d(0, -8px, 0) scale(1.24);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1.18);
  }
}

.rl-reel[data-demo="1"] .rl-card {
  opacity: 0.86;
}

.rl-reel[data-demo="1"] .rl-card[data-dist="0"] {
  opacity: 1;
}

.rl-card--skeleton {
  background: linear-gradient(180deg, rgba(24, 40, 92, 0.5), rgba(8, 16, 44, 0.5));
  animation: rl-pulse 1.4s ease-in-out infinite;
}

.rl-card--skeleton .rl-card__mat {
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.06) 45%, transparent 70%);
}

@keyframes rl-pulse {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 0.75;
  }
}

/* =====================================================================
   LEGENDA DE RARIDADES
   ===================================================================== */

.rl-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--rl-s-2);
  margin-top: var(--rl-s-4);
}

.rl-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border: 1px solid color-mix(in srgb, var(--rl-tier) 32%, var(--rl-line));
  border-radius: var(--rl-r-pill);
  background: color-mix(in srgb, var(--rl-tier) 8%, var(--rl-panel-2));
  color: var(--rl-text);
  font-size: 12.5px;
  font-weight: 700;
}

.rl-legend__mark {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--rl-r-xs);
  background: var(--rl-tier);
  color: var(--rl-ink, #ffffff);
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.4px;
}

/* =====================================================================
   ACOES
   ===================================================================== */

.rl-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rl-s-3);
  margin-top: var(--rl-s-5);
}

.rl-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--rl-r-md);
  color: #ffffff;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--rl-t) var(--rl-ease), filter var(--rl-t) var(--rl-ease), opacity var(--rl-t) var(--rl-ease), background-color var(--rl-t) var(--rl-ease);
}

.rl-btn__icon {
  width: 20px;
  height: 20px;
  flex: none;
}

.rl-btn--primary {
  background: linear-gradient(180deg, var(--rl-blue-500) 0%, var(--rl-blue) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), var(--rl-shadow-btn);
}

.rl-btn--soft {
  border-color: var(--rl-line);
  background: var(--rl-surface);
  color: var(--rl-text);
  font-weight: 700;
}

.rl-btn--soft:hover:not(:disabled) {
  border-color: var(--rl-line-strong);
  color: #ffffff;
}

.rl-btn--ghost {
  min-height: 40px;
  padding: 0 16px;
  border-color: var(--rl-line-strong);
  background: transparent;
  color: var(--rl-text);
  font-size: 14px;
}

.rl-btn--ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
}

.rl-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.07);
}

.rl-btn:active:not(:disabled) {
  transform: translateY(0);
}

.rl-btn:disabled {
  opacity: 0.5;
  box-shadow: none;
  cursor: not-allowed;
}

.rl-btn:focus-visible,
.rl-tool:focus-visible,
.rl-tab:focus-visible,
.rl-dialog__close:focus-visible,
.rl-reveal__close:focus-visible,
.rl-history__row:focus-visible {
  outline: 3px solid var(--rl-green);
  outline-offset: 3px;
}

.rl-btn__spinner {
  display: none;
  flex: none;
  width: 17px;
  height: 17px;
  border: 2px solid rgba(255, 255, 255, 0.32);
  border-top-color: #ffffff;
  border-radius: var(--rl-r-pill);
  animation: rl-spin-loop 700ms linear infinite;
}

@keyframes rl-spin-loop {
  to {
    transform: rotate(360deg);
  }
}

.rl-btn[data-loading="1"] .rl-btn__spinner {
  display: block;
}

.rl-btn[data-loading="1"] .rl-btn__icon {
  display: none;
}

#rl-spin {
  min-width: 300px;
  min-height: 62px;
  border-radius: 18px;
  font-size: 18px;
}

.rl-shell[data-status="ready"] #rl-spin {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 16px 38px rgba(0, 43, 255, 0.42), 0 0 0 6px rgba(0, 43, 255, 0.12);
}

.rl-actions__note {
  max-width: 46ch;
  margin: 0;
  color: var(--rl-muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}

/* Durante o giro, o resto do painel recua. */
.rl-shell[data-status="spinning"] .rl-legend,
.rl-shell[data-status="spinning"] .rl-jackpot,
.rl-shell[data-status="spinning"] .rl-tools,
.rl-shell[data-status="spinning"] .rl-steps {
  opacity: 0.4;
  transition: opacity var(--rl-t-slow) var(--rl-ease);
}

.rl-shell[data-status="spinning"] .rl-marker__label {
  background: rgba(3, 24, 20, 0.96);
}

/* ---------- alerta ---------- */

.rl-alert {
  display: flex;
  align-items: center;
  gap: var(--rl-s-3);
  margin-top: var(--rl-s-4);
  padding: 14px 16px;
  border: 1px solid rgba(255, 92, 122, 0.42);
  border-radius: var(--rl-r-md);
  background: var(--rl-danger-soft);
  color: #ffdfe6;
}

.rl-alert__icon {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--rl-danger);
}

.rl-alert__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.rl-alert__title {
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
}

.rl-alert__text {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}

.rl-alert__retry {
  flex: none;
  margin-left: auto;
  border-color: rgba(255, 92, 122, 0.5);
  color: #ffdfe6;
}

/* =====================================================================
   COMO FUNCIONA
   ===================================================================== */

.rl-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--rl-s-3);
  margin: var(--rl-s-6) 0 0;
  padding: 0;
  list-style: none;
}

.rl-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--rl-s-3);
  padding: 18px 20px;
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-r-lg);
  background: var(--rl-panel-2);
}

.rl-step__num {
  position: absolute;
  top: 14px;
  right: 16px;
  color: rgba(126, 160, 255, 0.34);
  font-size: 13px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}

.rl-step__icon {
  flex: none;
  width: 30px;
  height: 30px;
  padding: 5px;
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-r-sm);
  background: var(--rl-blue-wash);
  color: var(--rl-blue-400);
}

.rl-step__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 22px;
  color: var(--rl-muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.42;
}

.rl-step__body strong {
  color: var(--rl-title);
  font-size: 15.5px;
  font-weight: 800;
}

/* =====================================================================
   BANNER DE SIMULACAO
   ===================================================================== */

.rl-mock-banner {
  margin-bottom: var(--rl-s-4);
  padding: 12px 18px;
  border: 1px solid rgba(255, 192, 97, 0.45);
  border-radius: var(--rl-r-md);
  background: rgba(255, 192, 97, 0.1);
  color: var(--rl-warn);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-align: center;
}

/* =====================================================================
   MODAL DE PREMIOS / HISTORICO
   ===================================================================== */

.rl-dialog {
  position: fixed;
  inset: 0;
  z-index: var(--rl-z-dialog);
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0, 2, 14, 0.84);
}

.rl-dialog *,
.rl-reveal * {
  box-sizing: border-box;
}

.rl-dialog [hidden],
.rl-reveal [hidden] {
  display: none;
}

.rl-dialog[data-state="open"] {
  animation: rl-fade-in var(--rl-t) ease forwards;
}

.rl-dialog[data-state="closed"] {
  animation: rl-fade-out var(--rl-t) ease forwards;
}

@keyframes rl-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes rl-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.rl-dialog__panel {
  display: flex;
  flex-direction: column;
  width: min(100%, 960px);
  max-height: min(88vh, 820px);
  overflow: hidden;
  border: 1px solid var(--rl-blue-line);
  border-radius: var(--rl-r-xl);
  background:
    radial-gradient(90% 50% at 50% 0%, rgba(0, 43, 255, 0.24), transparent 64%),
    rgba(2, 9, 38, 0.98);
  box-shadow: var(--rl-shadow-pop);
}

.rl-dialog__head {
  display: flex;
  align-items: center;
  gap: var(--rl-s-2);
  padding: 16px 18px;
  border-bottom: 1px solid var(--rl-line);
}

.rl-dialog__tabs {
  display: flex;
  gap: 6px;
}

.rl-tab {
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--rl-r-pill);
  background: transparent;
  color: var(--rl-muted);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--rl-t) var(--rl-ease), color var(--rl-t) var(--rl-ease);
}

.rl-tab[aria-selected="true"] {
  border-color: var(--rl-blue-line);
  background: var(--rl-blue-wash);
  color: #ffffff;
}

.rl-dialog__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-r-pill);
  background: var(--rl-surface);
  color: var(--rl-text);
  cursor: pointer;
  transition: background-color var(--rl-t) var(--rl-ease), color var(--rl-t) var(--rl-ease);
}

.rl-dialog__close svg {
  width: 20px;
  height: 20px;
}

.rl-dialog__close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.rl-dialog__body {
  padding: 20px 18px 26px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.rl-modal__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: var(--rl-s-5) 0 var(--rl-s-3);
  color: var(--rl-tier, var(--rl-muted));
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.rl-modal__eyebrow:first-child {
  margin-top: 0;
}

.rl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: var(--rl-s-3);
}

.rl-grid .rl-card {
  width: auto;
  height: 214px;
  opacity: 1;
}

.rl-card[data-stock="0"] {
  opacity: 0.62;
  filter: saturate(0.25);
}

.rl-history {
  display: flex;
  flex-direction: column;
}

.rl-history__row {
  display: flex;
  align-items: center;
  gap: var(--rl-s-3);
  padding: 15px 12px;
  border-bottom: 1px solid var(--rl-line);
  border-radius: var(--rl-r-sm);
  color: #ffffff;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--rl-t) var(--rl-ease);
}

.rl-history__row:hover {
  background: rgba(255, 255, 255, 0.05);
}

.rl-history__tier {
  min-width: 96px;
  color: var(--rl-tier, var(--rl-muted));
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.rl-history__at {
  margin-left: auto;
  color: var(--rl-muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.rl-empty {
  padding: 44px 0;
  color: var(--rl-muted);
  font-size: 15px;
  text-align: center;
}

/* =====================================================================
   REVELACAO
   ===================================================================== */

.rl-blackout {
  position: fixed;
  inset: 0;
  z-index: var(--rl-z-blackout);
  background: var(--rl-bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 90ms linear;
}

.rl-blackout[data-on="1"] {
  opacity: 1;
}

.rl-blackout .rl-card {
  position: fixed;
  opacity: 1;
}

.rl-flood {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: var(--rl-z-flood);
  width: 260vmax;
  height: 260vmax;
  margin: -130vmax 0 0 -130vmax;
  border-radius: 50%;
  background: var(--rl-tier, var(--rl-blue));
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
}

.rl-flood[data-on="1"] {
  animation: rl-flood 500ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

@keyframes rl-flood {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  24% {
    transform: scale(1);
    opacity: 0.2;
  }
  100% {
    transform: scale(0);
    opacity: 0.2;
  }
}

.rl-reveal {
  position: fixed;
  inset: 0;
  z-index: var(--rl-z-reveal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
  background: rgba(0, 2, 14, 0.9);
}

.rl-reveal[data-state="open"] {
  display: flex;
  animation: rl-fade-in 200ms ease both;
}

.rl-reveal[data-state="open"] .rl-reveal__panel {
  animation: rl-panel-in 380ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

@keyframes rl-panel-in {
  from {
    transform: translate3d(0, 28px, 0) scale(0.93);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
}

.rl-reveal__panel {
  --rl-tier: var(--rl-blue);
  --rl-gift-t: 1;
  --rl-gift-ring: 0;
  /* Espera o painel pousar antes de abrir a caixa: sem isso a tampa pula
     enquanto o modal ainda entra, e lê como duas animações soltas. */
  --rl-gift-lead: 260ms;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rl-s-3);
  width: min(100%, 460px);
  padding: 30px 26px 22px;
  border: 1px solid color-mix(in srgb, var(--rl-tier) 50%, var(--rl-line));
  border-radius: var(--rl-r-xl);
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--rl-tier) 26%, transparent), transparent 48%),
    rgba(2, 9, 38, 0.98);
  box-shadow: var(--rl-inset-line), var(--rl-shadow-pop);
  text-align: center;
}

.rl-gift {
  position: relative;
  display: grid;
  place-items: center;
  width: 240px;
  max-width: 100%;
  height: 200px;
}

.rl-gift__box {
  position: absolute;
  bottom: 0;
  width: 150px;
  height: 130px;
  overflow: visible;
}

.rl-gift__lid,
.rl-gift__base {
  transform-box: fill-box;
  transform-origin: center;
}

.rl-gift__fill {
  fill: color-mix(in srgb, var(--rl-tier) 22%, rgba(0, 8, 50, 0.9));
}

.rl-gift__edge {
  fill: none;
  stroke: var(--rl-tier);
  stroke-width: 2;
}

.rl-gift__band {
  fill: color-mix(in srgb, var(--rl-tier) 58%, transparent);
}

.rl-gift__beam {
  position: absolute;
  bottom: 24px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--rl-tier), transparent 70%);
  opacity: 0;
  transform: scale(0.2);
  pointer-events: none;
}

.rl-gift__ring {
  position: absolute;
  bottom: 40px;
  width: 190px;
  height: 190px;
  border: 2px solid var(--rl-tier);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.25);
  pointer-events: none;
}

.rl-gift__prize {
  position: relative;
  z-index: 2;
  width: 172px;
  height: 172px;
  max-width: 100%;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--rl-tier) 32%, transparent);
  border-radius: 24px;
  background: rgba(2, 9, 38, 0.55);
  object-fit: contain;
  opacity: 0;
  transform: translate3d(0, 42px, 0) scale(0.35);
}

.rl-gift__tile {
  display: grid;
  place-items: center;
  color: var(--rl-tier);
  font-size: 62px;
  font-weight: 900;
  letter-spacing: -2px;
}

.rl-gift__sparks {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.rl-spark {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 6px;
  height: 6px;
  border-radius: var(--rl-r-pill);
  background: var(--rl-tier);
  opacity: 0;
}

.rl-reveal[data-state="open"] .rl-gift__lid {
  animation: rl-lid calc(var(--rl-gift-t) * 380ms) cubic-bezier(0.3, 0, 0.2, 1) calc(var(--rl-gift-lead) + var(--rl-gift-t) * 60ms) both;
}

.rl-reveal[data-state="open"] .rl-gift__base {
  animation: rl-boxout calc(var(--rl-gift-t) * 300ms) ease-in calc(var(--rl-gift-lead) + var(--rl-gift-t) * 420ms) both;
}

.rl-reveal[data-state="open"] .rl-gift__beam {
  animation: rl-beam calc(var(--rl-gift-t) * 520ms) ease-out calc(var(--rl-gift-lead) + var(--rl-gift-t) * 200ms) both;
}

.rl-reveal[data-state="open"] .rl-gift__ring {
  animation: rl-ring calc(var(--rl-gift-t) * 560ms) ease-out calc(var(--rl-gift-lead) + var(--rl-gift-t) * 320ms) both;
}

.rl-reveal[data-state="open"] .rl-gift__prize {
  animation: rl-prize calc(var(--rl-gift-t) * 640ms) cubic-bezier(0.16, 0.9, 0.3, 1) calc(var(--rl-gift-lead) + var(--rl-gift-t) * 240ms) both;
}

.rl-reveal[data-state="open"] .rl-reveal__hail,
.rl-reveal[data-state="open"] .rl-reveal__name,
.rl-reveal[data-state="open"] .rl-reveal__tier,
.rl-reveal[data-state="open"] .rl-reveal__status,
.rl-reveal[data-state="open"] .rl-reveal__claim,
.rl-reveal[data-state="open"] .rl-reveal__again,
.rl-reveal[data-state="open"] .rl-reveal__close {
  animation: rl-rise calc(var(--rl-gift-t) * 320ms) var(--rl-ease) both;
}

.rl-reveal[data-state="open"] .rl-reveal__hail {
  animation-delay: calc(var(--rl-gift-lead) + var(--rl-gift-t) * 520ms);
}

.rl-reveal[data-state="open"] .rl-reveal__name {
  animation-delay: calc(var(--rl-gift-lead) + var(--rl-gift-t) * 560ms);
}

.rl-reveal[data-state="open"] .rl-reveal__tier {
  animation-delay: calc(var(--rl-gift-lead) + var(--rl-gift-t) * 600ms);
}

.rl-reveal[data-state="open"] .rl-reveal__status {
  animation-delay: calc(var(--rl-gift-lead) + var(--rl-gift-t) * 640ms);
}

.rl-reveal[data-state="open"] .rl-reveal__claim {
  animation-delay: calc(var(--rl-gift-lead) + var(--rl-gift-t) * 690ms);
}

.rl-reveal[data-state="open"] .rl-reveal__again {
  animation-delay: calc(var(--rl-gift-lead) + var(--rl-gift-t) * 730ms);
}

.rl-reveal[data-state="open"] .rl-reveal__close {
  animation-delay: calc(var(--rl-gift-lead) + var(--rl-gift-t) * 760ms);
}

@keyframes rl-lid {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 1;
  }
  26% {
    transform: translate3d(0, -7px, 0) rotate(-1deg);
    opacity: 1;
  }
  100% {
    transform: translate3d(18px, -68px, 0) rotate(17deg);
    opacity: 0;
  }
}

@keyframes rl-boxout {
  to {
    transform: translate3d(0, 12px, 0) scale(0.84);
    opacity: 0;
  }
}

@keyframes rl-beam {
  0% {
    transform: scale(0.2);
    opacity: 0;
  }
  32% {
    opacity: 0.72;
  }
  100% {
    transform: scale(1.45);
    opacity: 0;
  }
}

@keyframes rl-ring {
  0% {
    transform: scale(0.25);
    opacity: var(--rl-gift-ring);
  }
  100% {
    transform: scale(1.75);
    opacity: 0;
  }
}

@keyframes rl-prize {
  0% {
    transform: translate3d(0, 42px, 0) scale(0.35);
    opacity: 0;
  }
  42% {
    opacity: 1;
  }
  72% {
    transform: translate3d(0, -7px, 0) scale(1.07);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
}

@keyframes rl-rise {
  from {
    transform: translate3d(0, 14px, 0);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rl-reveal__hail {
  margin: 0;
  color: var(--rl-muted);
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.rl-reveal__name {
  margin: 0;
  color: var(--rl-title);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -1px;
}

.rl-reveal__tier {
  padding: 5px 13px;
  border: 1px solid color-mix(in srgb, var(--rl-tier) 52%, transparent);
  border-radius: var(--rl-r-pill);
  background: color-mix(in srgb, var(--rl-tier) 14%, transparent);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.rl-reveal__status {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: var(--rl-s-1) 0 0;
  padding: 12px 14px;
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-r-md);
  background: var(--rl-surface);
  color: var(--rl-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
}

.rl-reveal__status-icon {
  flex: none;
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.rl-reveal__claim,
.rl-reveal__again {
  width: 100%;
}

.rl-reveal__claim {
  min-height: 56px;
  margin-top: var(--rl-s-1);
  font-size: 17px;
}

.rl-reveal__close {
  min-height: 40px;
  padding: 8px 16px;
  border: none;
  border-radius: var(--rl-r-sm);
  background: none;
  color: var(--rl-muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--rl-t) var(--rl-ease);
}

.rl-reveal__close:hover {
  color: #ffffff;
}

/* ---------- tremor do painel ---------- */

.rl--shake {
  animation: rl-shake 220ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes rl-shake {
  0% {
    transform: translate3d(calc(var(--rl-shake) * 1px), 0, 0);
  }
  18% {
    transform: translate3d(calc(var(--rl-shake) * -0.82px), calc(var(--rl-shake) * 0.3px), 0);
  }
  36% {
    transform: translate3d(calc(var(--rl-shake) * 0.6px), calc(var(--rl-shake) * -0.24px), 0);
  }
  54% {
    transform: translate3d(calc(var(--rl-shake) * -0.4px), 0, 0);
  }
  72% {
    transform: translate3d(calc(var(--rl-shake) * 0.22px), 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

.rl-fps {
  position: absolute;
  top: 12px;
  right: 18px;
  z-index: 7;
  padding: 4px 10px;
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-r-pill);
  background: rgba(2, 9, 38, 0.88);
  color: var(--rl-green);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* =====================================================================
   RESPONSIVO
   ===================================================================== */

@media (max-width: 1080px) {
  .luckzs-roleta-page {
    --rl-card-w: 176px;
    --rl-card-h: 236px;
    --rl-gap: 12px;
    --rl-reel-top: 66px;
    --rl-reel-pad: 96px;
    --rl-focus-grow: 14px;
  }

  .rl-intro {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .rl-home {
    justify-self: start;
  }

  .rl-intro__side {
    align-items: stretch;
    width: 100%;
  }

  .rl-wallet {
    flex: 1;
    min-width: 0;
  }

  .rl-tools {
    flex-wrap: wrap;
  }

  .rl-tool:not(.rl-tool--icon) {
    flex: 1;
  }
}

@media (max-width: 768px) {
  .luckzs-roleta-page {
    --rl-card-w: 150px;
    --rl-card-h: 206px;
    --rl-gap: 10px;
    --rl-reel-top: 62px;
    --rl-reel-pad: 92px;
    --rl-focus-scale: 1.1;
    --rl-focus-grow: 10px;
    padding: calc(20px + env(safe-area-inset-top, 0px)) 14px calc(56px + env(safe-area-inset-bottom, 0px));
  }

  .rl-intro__lede {
    font-size: 15px;
  }

  .rl-stage {
    margin: 0 -8px;
    padding: var(--rl-s-3) var(--rl-s-3) var(--rl-s-4);
    border-radius: var(--rl-r-lg);
  }

  .rl-jackpot__stock {
    display: none;
  }

  .rl-legend {
    gap: 6px;
  }

  .rl-legend__item {
    font-size: 12px;
  }

  #rl-spin {
    width: 100%;
    min-width: 0;
    min-height: 58px;
    font-size: 17px;
  }

  .rl-alert {
    flex-wrap: wrap;
  }

  .rl-alert__retry {
    width: 100%;
    margin-left: 0;
  }

  .rl-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .rl-dialog {
    padding: 10px;
  }

  .rl-dialog__panel {
    max-height: 92vh;
    border-radius: var(--rl-r-lg);
  }

  .rl-reveal {
    padding: 12px;
  }

  .rl-reveal__panel {
    padding: 24px 18px 18px;
    border-radius: var(--rl-r-lg);
  }

  .rl-gift {
    width: 200px;
    height: 172px;
  }

  .rl-gift__prize {
    width: 142px;
    height: 142px;
  }

  .rl-reveal__name {
    font-size: 24px;
  }
}

@media (max-width: 420px) {
  .luckzs-roleta-page {
    --rl-card-w: 128px;
    --rl-card-h: 178px;
    --rl-gap: 9px;
    --rl-reel-top: 62px;
    --rl-reel-pad: 92px;
    --rl-focus-grow: 9px;
  }

  .rl-marker__label {
    font-size: 9.5px;
    letter-spacing: 0.8px;
  }

  .rl-seal {
    font-size: 11.5px;
    letter-spacing: 0.6px;
  }
}

/* No mobile a logo deixa de ser cartao: vira so a marca no topo, discreta. */
@media (max-width: 768px) {
  .rl-home {
    flex-direction: row;
    gap: 8px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .rl-home:hover {
    border: none;
    transform: none;
  }

  .rl-home__logo {
    width: 74px;
  }

  .rl-home__hint {
    font-size: 11.5px;
  }

  .rl-home__hint svg {
    width: 12px;
    height: 12px;
  }
}


/* =====================================================================
   PREFERENCIAS DO SISTEMA
   ===================================================================== */

@media (prefers-contrast: more) {
  :root {
    --rl-muted: #cfdcff;
    --rl-line: rgba(160, 190, 255, 0.42);
    --rl-line-strong: rgba(190, 214, 255, 0.62);
  }

  .rl-card,
  .rl-step,
  .rl-wallet,
  .rl-tool {
    border-width: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rl--shake,
  .rl-flood[data-on="1"],
  .rl-card[data-rank="4"] .rl-card__mat::before,
  .rl-card[data-rank="5"] .rl-card__mat::after,
  .rl-reel[data-won="1"] .rl-card[data-winner="1"],
  .rl-card--skeleton,
  .rl-wallet[data-state="loading"] .rl-wallet__value,
  .rl-btn__spinner,
  .rl-reveal[data-state="open"] .rl-gift__lid,
  .rl-reveal[data-state="open"] .rl-gift__base,
  .rl-reveal[data-state="open"] .rl-gift__beam,
  .rl-reveal[data-state="open"] .rl-gift__ring,
  .rl-reveal[data-state="open"] .rl-gift__prize,
  .rl-reveal[data-state="open"] .rl-reveal__hail,
  .rl-reveal[data-state="open"] .rl-reveal__name,
  .rl-reveal[data-state="open"] .rl-reveal__tier,
  .rl-reveal[data-state="open"] .rl-reveal__status,
  .rl-reveal[data-state="open"] .rl-reveal__claim,
  .rl-reveal[data-state="open"] .rl-reveal__again,
  .rl-reveal[data-state="open"] .rl-reveal__close {
    animation: none;
  }

  .rl-reel__blur,
  .rl-blackout,
  .rl-flood,
  .rl-gift__box,
  .rl-gift__beam,
  .rl-gift__ring,
  .rl-gift__sparks {
    display: none;
  }

  .rl-card,
  .rl-card--skeleton {
    opacity: 1;
  }

  /* A profundidade continua (é layout, não movimento), mas sem assentar. */
  .rl-card {
    transition: none;
  }

  .rl-reel[data-mythic="1"] .rl-card:not([data-rank="6"]) {
    opacity: 0.45;
  }

  .rl-gift {
    height: auto;
  }

  .rl-gift__prize {
    opacity: 1;
    transform: none;
  }

  .rl-btn:hover:not(:disabled) {
    transform: none;
  }
}