/* Roleta novo usuário — layout referência (fundo #1a0b3d, azuis #3498db/#2980b9, detalhes #c0392b) */
#rnw-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: none;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  box-sizing: border-box;
  background: #1a0b3d;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 100%;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}
#rnw-overlay.rnw-visible {
  display: flex;
}
#rnw-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 70% at 50% 18%, rgba(52, 152, 219, 0.22) 0%, transparent 52%),
    radial-gradient(ellipse 90% 45% at 50% 5%, rgba(160, 100, 255, 0.18) 0%, transparent 45%),
    linear-gradient(180deg, #251456 0%, #1a0b3d 38%, #12082a 100%);
  pointer-events: none;
  z-index: 0;
}

/* Cortinas laterais (palco) */
.rnw-curtain {
  position: absolute;
  top: 48px;
  width: 72px;
  height: 240px;
  background: linear-gradient(180deg, rgba(45, 20, 85, 0.88) 0%, rgba(26, 11, 61, 0.25) 100%);
  z-index: 1;
  pointer-events: none;
}
.rnw-curtain-l {
  left: 0;
  border-radius: 0 0 48px 0;
  transform: skewY(-6deg);
  transform-origin: top left;
}
.rnw-curtain-r {
  right: 0;
  border-radius: 0 0 0 48px;
  transform: skewY(6deg);
  transform-origin: top right;
}

/* Holofotes (cantos superiores → centro) */
.rnw-spotlight {
  position: absolute;
  top: 32px;
  width: 130px;
  height: 280px;
  pointer-events: none;
  z-index: 2;
  opacity: 0.82;
}
.rnw-spotlight-l {
  left: -24px;
  background: conic-gradient(
    from 0deg at 100% 0%,
    transparent 0deg,
    rgba(130, 85, 255, 0.38) 26deg,
    rgba(52, 152, 219, 0.22) 48deg,
    transparent 86deg
  );
  transform: rotate(-11deg);
}
.rnw-spotlight-r {
  right: -24px;
  background: conic-gradient(
    from 0deg at 0% 0%,
    transparent 276deg,
    rgba(52, 152, 219, 0.26) 308deg,
    rgba(140, 95, 255, 0.32) 334deg,
    transparent 360deg
  );
  transform: rotate(11deg);
}

/* Header — barra escuro-azul / roxo */
.rnw-header {
  width: 100%;
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, #0f0828 0%, #120a32 100%);
  padding: 12px 14px;
  gap: 10px;
  position: relative;
  z-index: 5;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
#rnw-back {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 1.15rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
#rnw-back:hover {
  background: rgba(255, 255, 255, 0.18);
}
#rnw-title {
  flex: 1;
  text-align: center;
  color: #fff;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rnw-stage {
  position: relative;
  z-index: 3;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 16px 8px;
  min-height: min(360px, 55vh);
}

/*
 * Área da roleta: altura explícita obrigatória (só filhos absolute = caixa com height 0 se falhar).
 * Fallback 300×300 antes de min() para navegadores antigos.
 */
#rnw-wheel-wrap {
  position: relative;
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 300px;
  height: 300px;
  width: min(300px, 92vw);
  height: min(300px, 92vw);
  margin: 0 auto;
  overflow: visible;
  isolation: isolate;
}

.rnw-glow-ring {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(52, 152, 219, 0.4) 0%, transparent 68%);
  filter: blur(12px);
  pointer-events: none;
  z-index: 0;
}

/* Anel externo azul (marquee) — tons #3498db / #2980b9 */
.rnw-outer-wheel {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 1;
  background: linear-gradient(165deg, #3498db 0%, #2e86c1 40%, #2874a6 100%);
  box-shadow:
    0 0 0 2px #1a5276,
    0 0 0 4px #5dade2,
    0 16px 40px rgba(20, 80, 160, 0.45),
    inset 0 2px 0 rgba(255, 255, 255, 0.28);
}

.rnw-dots-svg {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}

#rnw-disc {
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  overflow: hidden;
  transition: transform 4.5s cubic-bezier(0.12, 0.85, 0.12, 1);
  border: 3px solid #1f618d;
  box-shadow:
    inset 0 0 28px rgba(0, 35, 80, 0.25),
    0 2px 10px rgba(0, 0, 0, 0.28);
  z-index: 2;
  background: #2980b9;
}
#rnw-disc canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Ponteiro dourado */
#rnw-pointer {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  pointer-events: none;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.4));
}
.rnw-pin-svg {
  display: block;
}

/* Base / pódio sob a roda */
.rnw-platform {
  width: min(268px, 82vw);
  height: 14px;
  margin-top: -1px;
  border-radius: 8px;
  background: linear-gradient(180deg, #1e4070 0%, #152d52 55%, #0f2240 100%);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(100, 180, 255, 0.12);
  flex-shrink: 0;
}

/*
 * Botão GO: sem ::after — pseudo-elementos cobriam o texto em alguns navegadores.
 * Aro metálico só com sombras + borda.
 */
#rnw-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 88px;
  height: 88px;
  border-radius: 50%;
  z-index: 15;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.45);
  background: radial-gradient(circle at 35% 28%, #ff5a4a 0%, #e62e2d 42%, #b71c1c 78%, #7f1212 100%);
  box-shadow:
    0 0 0 3px #8b949e,
    0 0 0 5px #e8ecf0,
    0 0 0 8px #5a6268,
    0 7px 0 0 rgba(0, 0, 0, 0.32),
    inset 0 2px 8px rgba(255, 255, 255, 0.22),
    inset 0 -4px 10px rgba(0, 0, 0, 0.28);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.rnw-go-ring {
  display: none;
}
.rnw-go-txt {
  position: relative;
  z-index: 2;
  font-size: 1.5rem;
  letter-spacing: 0.14em;
  line-height: 1;
  pointer-events: none;
}
#rnw-center:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Moedas na base */
.rnw-coins {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
  padding-bottom: 4px;
  min-height: 50px;
}
.rnw-coin-stack {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 54px;
  height: 46px;
}
.rnw-coin-stack-mid {
  width: 62px;
  height: 54px;
}
.rnw-coin {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.45));
}
.rnw-coin-big {
  z-index: 3;
}
.rnw-coin-back {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-54%) rotate(-10deg) scale(0.9);
  z-index: 1;
  opacity: 0.92;
}

/* Moeda dourada (base da roleta) */
.rnw-gold-coin {
  position: relative;
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  box-sizing: border-box;
  background: radial-gradient(circle at 32% 28%, #fff8dc 0%, #ffe066 22%, #ffd700 45%, #daa520 72%, #b8860b 100%);
  border: 2px solid #8b6914;
  box-shadow:
    inset 0 2px 5px rgba(255, 255, 255, 0.55),
    inset 0 -3px 6px rgba(0, 0, 0, 0.18),
    0 2px 8px rgba(0, 0, 0, 0.35);
}
.rnw-gold-coin::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.45) 0%, transparent 42%);
  pointer-events: none;
}
.rnw-coin-big .rnw-gold-coin {
  width: 46px;
  height: 46px;
  border-width: 2px;
}
.rnw-coin-back .rnw-gold-coin {
  width: 34px;
  height: 34px;
}

/* Detalhes do evento — caixa #c0392b, borda dourada (referência) */
#rnw-carpet {
  width: calc(100% - 28px);
  max-width: 420px;
  margin-top: auto;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(180deg, #cd6155 0%, #c0392b 35%, #a93226 100%);
  padding: 14px 16px 18px;
  flex-shrink: 0;
  position: relative;
  z-index: 4;
  border-radius: 10px;
  border: 2px solid #d4af37;
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
#rnw-carpet-title {
  color: #fff;
  font-size: 1.06rem;
  font-weight: 700;
  margin: 0 0 10px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.02em;
}
#rnw-carpet-text {
  color: rgba(255, 255, 255, 0.96);
  font-size: 0.78rem;
  line-height: 1.68;
}
#rnw-close {
  display: none;
  margin-top: 12px;
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: none;
  background: #fff;
  color: #c62828;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.9rem;
}
#rnw-close.rnw-show {
  display: block;
}
#rnw-close:hover {
  background: #f5f5f5;
}