.wwds-wheel-wrap {
    max-width: 560px;
    margin: 24px auto;
    padding: 20px 18px 22px;
    border: 1px solid #dce2ef;
    border-radius: 20px;
    background: #f8faff;
    box-shadow: 0 10px 24px rgba(26, 35, 55, 0.08);
    text-align: center;
}

.wwds-wheel-title {
    margin: 0 0 16px;
    font-size: clamp(1.2rem, 2.6vw, 1.55rem);
    line-height: 1.2;
    color: #1d2433;
}

.wwds-wheel-area {
    display: flex;
    justify-content: center;
}

.wwds-wheel {
    --wwds-total: 10;
    --wwds-label-radius: min(34vw, 150px);
    position: relative;
    width: min(86vw, 420px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 4px solid #ffffff;
    overflow: hidden;
    background: conic-gradient(
        from -90deg,
        #f6c453 0deg 36deg,
        #f26d6d 36deg 72deg,
        #6ec6ff 72deg 108deg,
        #8ee6c8 108deg 144deg,
        #c69cff 144deg 180deg,
        #ff9f6e 180deg 216deg,
        #d8ef6f 216deg 252deg,
        #7fd1b9 252deg 288deg,
        #f59edb 288deg 324deg,
        #9bbcff 324deg 360deg
    );
    box-shadow: 0 14px 28px rgba(21, 32, 58, 0.2);
}

.wwds-wheel::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 33%, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0) 54%);
    pointer-events: none;
}

.wwds-wheel-labels {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.wwds-wheel-label {
    --wwds-angle: calc((360deg / var(--wwds-total)) * var(--wwds-index) + (180deg / var(--wwds-total)) - 90deg);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: rotate(var(--wwds-angle)) translate(0, calc(-1 * var(--wwds-label-radius))) rotate(calc(-1 * var(--wwds-angle)));
    width: 78px;
    margin-left: -39px;
    font-size: clamp(0.72rem, 2.4vw, 0.95rem);
    font-weight: 700;
    color: #1d2433;
    text-align: center;
    line-height: 1.05;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

.wwds-pointer {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 24px;
    height: 46%;
    transform: translate(-50%, -50%) rotate(var(--wwds-angle, 0deg));
    transform-origin: 50% 50%;
    z-index: 4;
    pointer-events: none;
}

.wwds-pointer-line {
    position: absolute;
    left: 50%;
    bottom: 50%;
    width: 8px;
    height: 48%;
    transform: translateX(-50%);
    border-radius: 999px;
    background: linear-gradient(180deg, #36578f 0%, #1b2d4f 100%);
    box-shadow: 0 2px 5px rgba(13, 18, 31, 0.3);
}

.wwds-pointer-head {
    position: absolute;
    left: 50%;
    top: 2px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 20px solid #fffbf0;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

.wwds-center-dot {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 38px;
    height: 38px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 3px solid #ffffff;
    background: radial-gradient(circle at 33% 30%, #7b8eb7, #2a3f66 72%);
    box-shadow: 0 4px 10px rgba(10, 15, 27, 0.28);
    z-index: 5;
}

.wwds-spin-button {
    margin-top: 22px;
    min-width: 220px;
    border: 0;
    border-radius: 999px;
    padding: 13px 24px;
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(135deg, #2f61c4 0%, #5f86df 100%);
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
    box-shadow: 0 8px 18px rgba(47, 97, 196, 0.32);
}

.wwds-spin-button:hover:not(:disabled),
.wwds-spin-button:focus-visible:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(47, 97, 196, 0.37);
}

.wwds-spin-button:disabled {
    cursor: not-allowed;
    opacity: 0.68;
    box-shadow: none;
}

.wwds-result {
    margin-top: 16px;
    min-height: 72px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid #d6deef;
    background: #ffffff;
    color: #1d2433;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
}

.wwds-public-feed {
    margin-top: 18px;
    text-align: left;
}

.wwds-public-feed-title {
    margin: 0 0 10px;
    font-size: 1rem;
    color: #1d2433;
    text-align: center;
}

.wwds-public-feed-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wwds-public-feed-item,
.wwds-public-feed-empty {
    margin-bottom: 8px;
    padding: 10px 12px;
    border: 1px solid #d6deef;
    border-radius: 12px;
    background: #ffffff;
    color: #1d2433;
    font-size: 0.94rem;
    line-height: 1.35;
}

.wwds-public-feed-empty {
    text-align: center;
    color: #657089;
    font-style: italic;
}

@media (max-width: 480px) {
    .wwds-wheel-wrap {
        padding: 16px 14px 18px;
    }

    .wwds-wheel {
        --wwds-label-radius: min(32vw, 126px);
    }

    .wwds-wheel-label {
        width: 64px;
        margin-left: -32px;
    }

    .wwds-spin-button {
        width: 100%;
        min-width: 0;
    }
}