.wheelWrap {
  width: 100%;
  position: relative;
}

.wheel {
  width: 100%;
  background: #FFFFFF;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

/* Faixa de pontos no topo — oculta no novo design */
.wheel__dots { display: none; }

/* Track — faixa única contínua */
.wheel__track {
  width: 100%;
  overflow: hidden;
  padding: 14px 0;
  position: relative;
  background: #fff;
}

.wheel__strip {
  display: flex;
  align-items: center;
  will-change: transform;
  gap: 12px;
}

/* ── Tiles ── faixa contínua sem separação visual */
.tile {
  flex: 0 0 148px;
  width: 148px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: transparent;
  border-right: none;
}

.tile--win   { background: transparent; }
.tile--lose  { background: transparent; }
.tile--retry { background: transparent; }

.tile.is-active .ticket { box-shadow: 0 0 0 2px #151e2c; }

.tile-cut-r { display: none; }
.tile__ico  { display: none; }

/* ── Ticket shape ── */
.ticket {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 128px;
  height: 42px;
  padding: 0 14px;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 0.55rem;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
  border-radius: 10px;
  overflow: visible;
  flex-shrink: 0;
}

.tile--win   .ticket { background: #eaf8f0; color: #1e7a4a; }
.tile--lose  .ticket { background: #fef9e7; color: #8a6000; }
.tile--retry .ticket { background: #eef1fc; color: #2c3e9e; }

/* recortes semicirculares laterais */
.ticket::before,
.ticket::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

/* os recortes usam o fundo branco do .wheel__track */
.ticket::before { left: -6px;  background: #fff; }
.ticket::after  { right: -6px; background: #fff; }

/* ── Ponteiro central — VERMELHO ── */
.wheel__centerLine {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  transform: translateX(-50%);
  background: #E53935;
  z-index: 4;
  pointer-events: none;
}

/* Triângulo vermelho apontando para baixo no topo */
.wheel__centerLine::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 13px solid #E53935;
}

.wheel__centerLine::after { display: none; }

/* Gradiente nas bordas laterais */
.wheel__frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    to right,
    #FFFFFF 0%,
    transparent 16%,
    transparent 84%,
    #FFFFFF 100%
  );
}

/* ── Float Bubbles ── */
.floatBubbles {
  display: block;
  z-index: 9998; /* abaixo do loading (9999) mas acima de tudo mais */
}

.floatBubble {
  position: absolute;
  width: 52px;
  height: 52px;
}

/* Inner: flutua + perspectiva */
.floatBubble__inner {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 50%;
  animation: floatBubbleAnim 5s ease-in-out infinite;
}

.floatBubble__inner.m-a { animation-duration: 5s; }
.floatBubble__inner.m-b { animation-duration: 6.5s;  animation-delay: -2s; }
.floatBubble__inner.m-c { animation-duration: 4.8s;  animation-delay: -3.5s; }

/* Coin image — dentro da bolha */
.floatBubble__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
  z-index: 0;
}

/* Camada de bolha transparente por cima da imagem */
.floatBubble__inner::after,
.floatBubble__inner::before {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

/* Corpo da bolha — gradiente translúcido sobre a moeda */
.floatBubble__inner::after {
  inset: 0;
  z-index: 2;
  background: radial-gradient(
    circle at 50% 55%,
    rgba(226,234,250,0.55),
    rgba(226,234,250,0.45) 40%,
    rgba(226,234,250,0.25) 60%,
    rgba(15,108,238,0.12)
  );
}

/* Reflexo de luz — brilho superior esquerdo */
.floatBubble__inner::before {
  width: 80%;
  height: 80%;
  top: 5%;
  left: 10%;
  z-index: 3;
  background: radial-gradient(
    circle at 50% 80%,
    rgba(255,255,255,0) 74%,
    rgba(255,255,255,0.9) 80%,
    rgba(255,255,255,0.9) 84%,
    rgba(255,255,255,0) 100%
  );
  filter: blur(1.5px);
  transform: rotateZ(30deg);
}

@keyframes floatBubbleAnim {
  0%   { transform: scale(1)    translate(0, 0px);  }
  20%  { transform: scaleY(0.95) scaleX(1.05);      }
  50%  { transform: scaleY(0.98) scaleX(0.92) translate(0, 10px); }
  100% { transform: scale(1)    translate(0, 0px);  }
}