body {
    color: #273238;
}

.lucky-wheel-page {
    width: min(1120px, calc(100% - 32px));
    padding: 34px 0 56px;
}

.lucky-wheel-page[hidden] {
    display: none;
}

.wheel-stage {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.1fr);
    align-items: center;
    gap: 36px;
    min-height: calc(100vh - 210px);
}

.wheel-copy {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.eyebrow {
    margin: 0;
    color: #0d7a74;
    font-size: 0.95rem;
    font-weight: 700;
}

.wheel-copy h1 {
    margin: 0;
    color: #1d2b34;
    font-size: clamp(2.2rem, 6vw, 4.8rem);
    line-height: 1.05;
}

.wheel-subtitle {
    max-width: 520px;
    margin: 0;
    color: #50616b;
    font-size: 1.08rem;
    line-height: 1.8;
}

.status-panel {
    max-width: 520px;
    padding: 16px 18px;
    border: 1px solid rgba(70, 98, 113, 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 18px 45px rgba(64, 92, 104, 0.1);
}

.status-panel p {
    margin: 0;
    color: #344955;
    line-height: 1.7;
}

.status-panel p + p {
    color: #6d7d85;
    font-size: 0.94rem;
}

.wheel-area {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 560px;
}

.wheel-pointer {
    position: absolute;
    top: 28px;
    z-index: 4;
    width: 0;
    height: 0;
    border-left: 22px solid transparent;
    border-right: 22px solid transparent;
    border-top: 44px solid #263238;
    filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.18));
}

.wheel-disc {
    position: relative;
    width: min(78vw, 480px);
    aspect-ratio: 1;
    border: 12px solid rgba(255, 255, 255, 0.94);
    border-radius: 50%;
    background:
        conic-gradient(
            from 0deg,
            #f96f8f 0deg 45deg,
            #f7c85f 45deg 90deg,
            #4db6ac 90deg 135deg,
            #7e8ce0 135deg 180deg,
            #6cc4ef 180deg 225deg,
            #9ccd68 225deg 270deg,
            #e95a76 270deg 315deg,
            #8d6edc 315deg 360deg
        );
    box-shadow:
        0 28px 70px rgba(70, 78, 95, 0.26),
        inset 0 0 0 2px rgba(255, 255, 255, 0.55),
        inset 0 0 30px rgba(255, 255, 255, 0.25);
    transform: rotate(0deg);
    transition: transform 5.2s cubic-bezier(0.14, 0.88, 0.16, 1);
}

.wheel-disc::before {
    content: "";
    position: absolute;
    inset: 15%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 0 24px rgba(255, 255, 255, 0.22);
}

.wheel-disc::after {
    content: "";
    position: absolute;
    inset: 39%;
    border-radius: 50%;
    background: #fff8ef;
    box-shadow: 0 12px 30px rgba(46, 56, 67, 0.22);
}

.wheel-label {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 132px;
    margin-left: -66px;
    margin-top: -14px;
    color: #18242b;
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-shadow: 0 1px 10px rgba(255, 255, 255, 0.82);
    transform-origin: 66px 14px;
}

.wheel-label.rare {
    color: #fff;
    text-shadow: 0 2px 10px rgba(48, 38, 70, 0.42);
}

.label-0 { transform: rotate(22.5deg) translateY(-172px) rotate(-22.5deg); }
.label-1 { transform: rotate(67.5deg) translateY(-172px) rotate(-67.5deg); }
.label-2 { transform: rotate(112.5deg) translateY(-172px) rotate(-112.5deg); }
.label-3 { transform: rotate(157.5deg) translateY(-172px) rotate(-157.5deg); }
.label-4 { transform: rotate(202.5deg) translateY(-172px) rotate(-202.5deg); }
.label-5 { transform: rotate(247.5deg) translateY(-172px) rotate(-247.5deg); }
.label-6 { transform: rotate(292.5deg) translateY(-172px) rotate(-292.5deg); }
.label-7 { transform: rotate(337.5deg) translateY(-172px) rotate(-337.5deg); }

.wheel-button {
    position: absolute;
    z-index: 5;
    width: 132px;
    height: 132px;
    border: 0;
    border-radius: 50%;
    background: #fff8ef;
    color: #d83c63;
    font-size: 1.08rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 16px 34px rgba(46, 56, 67, 0.24);
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.wheel-button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 20px 40px rgba(46, 56, 67, 0.28);
}

.wheel-button:disabled {
    cursor: not-allowed;
    opacity: 0.64;
}

.wheel-button.is-spinning {
    opacity: 1;
}

.result-section {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 8px;
}

.result-card,
.prize-card,
.history-section {
    border: 1px solid rgba(70, 98, 113, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 18px 45px rgba(64, 92, 104, 0.1);
}

.result-card,
.prize-card {
    padding: 18px;
}

.result-kicker {
    display: block;
    margin-bottom: 8px;
    color: #0d7a74;
    font-size: 0.86rem;
    font-weight: 800;
}

.result-card strong,
.prize-card strong {
    display: block;
    color: #1e2c34;
    font-size: 1.28rem;
    line-height: 1.4;
}

.result-card p,
.prize-card p {
    margin: 8px 0 0;
    color: #66767e;
    line-height: 1.7;
}

.history-section {
    margin-top: 16px;
    padding: 18px;
}

.history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.history-header h2 {
    margin: 0;
    color: #1e2c34;
    font-size: 1.35rem;
}

.history-header span {
    color: #66767e;
    font-size: 0.95rem;
}

.history-list {
    display: grid;
    gap: 10px;
}

.history-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid rgba(70, 98, 113, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.64);
}

.history-prize {
    color: #1e2c34;
    font-weight: 800;
}

.history-meta {
    margin-top: 4px;
    color: #708089;
    font-size: 0.9rem;
}

.rare-badge {
    padding: 5px 9px;
    border-radius: 999px;
    background: #d83c63;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
}

.empty-history {
    margin: 0;
    color: #66767e;
}

@media (max-width: 860px) {
    .lucky-wheel-page {
        width: min(100% - 24px, 620px);
        padding-top: 22px;
    }

    .wheel-stage,
    .result-section {
        grid-template-columns: 1fr;
    }

    .wheel-stage {
        gap: 22px;
        min-height: 0;
    }

    .wheel-area {
        min-height: 430px;
    }

    .wheel-pointer {
        top: 8px;
        border-left-width: 18px;
        border-right-width: 18px;
        border-top-width: 36px;
    }

    .wheel-disc {
        width: min(92vw, 360px);
        border-width: 9px;
    }

    .wheel-label {
        width: 96px;
        margin-left: -48px;
        font-size: 0.76rem;
        transform-origin: 48px 14px;
    }

    .label-0 { transform: rotate(22.5deg) translateY(-128px) rotate(-22.5deg); }
    .label-1 { transform: rotate(67.5deg) translateY(-128px) rotate(-67.5deg); }
    .label-2 { transform: rotate(112.5deg) translateY(-128px) rotate(-112.5deg); }
    .label-3 { transform: rotate(157.5deg) translateY(-128px) rotate(-157.5deg); }
    .label-4 { transform: rotate(202.5deg) translateY(-128px) rotate(-202.5deg); }
    .label-5 { transform: rotate(247.5deg) translateY(-128px) rotate(-247.5deg); }
    .label-6 { transform: rotate(292.5deg) translateY(-128px) rotate(-292.5deg); }
    .label-7 { transform: rotate(337.5deg) translateY(-128px) rotate(-337.5deg); }

    .wheel-button {
        width: 106px;
        height: 106px;
        font-size: 0.95rem;
    }

    .history-item {
        grid-template-columns: 1fr;
    }

    .rare-badge {
        width: max-content;
    }
}