.roleta-container {
    text-align: center;
    max-width: 100%;
}
.roleta-wrapper {
    position: relative;
    display: inline-block;
}
#roletaCanvas {
    max-width: 100%;
    height: auto;
}
.roleta-seta {
    position: absolute;
    top: 50%;
    right: -35px;
    transform: translateY(-50%) rotate(180deg);
    font-size: 32px;
    color: gold;
    animation: blink 1s infinite;
    z-index: 10;
}
.roleta-seta::before {
    content: "☞";
}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
@media screen and (max-width: 600px) {
    #roletaCanvas {
        width: 300px;
        height: 300px;
    }
    .roleta-seta {
        right: -25px;
        font-size: 24px;
    }
}


/* Melhorar visual das fatias */
.wheel canvas {
    border-radius: 50%;
    border: 8px solid #ccc;
}

/* Texto dentro das fatias */
.wheel-label {
    fill: white !important;
    font-weight: bold;
    text-shadow: 1px 1px 2px black;
    font-size: 1.1em;
}

/* Adicionar bordas aos segmentos */
.wheel-segment {
    stroke: #ffffff;
    stroke-width: 2;
}

/* Tornar responsiva */
#wheel-container {
    max-width: 90vw;
    max-height: 90vw;
    margin: auto;
    position: relative;
}

@media (max-width: 768px) {
    .wheel-label {
        font-size: 0.9em;
    }

    #spin-button {
        font-size: 1.2em;
    }
}

.pointer-icon {
  position: absolute;
  top: 50%;
  right: -40px;
  transform: translateY(-50%);
  animation: blink 1s infinite;
  z-index: 9999;
  font-size: 64px; /* AQUI ESTÁ O TAMANHO DO DEDINHO */
}