* { margin: 0; padding: 0; box-sizing: border-box; }

    body {
        font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        margin: 0;
        background: radial-gradient(ellipse at center, #1a0a2e 0%, #0d0015 100%);
        overflow-x: hidden;
        min-height: 100vh;
    }

    .light-rays {
        position: fixed; top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        width: 300vmax; height: 300vmax;
        background: conic-gradient(from 0deg, transparent, rgba(255,215,0,0.06), transparent, rgba(255,215,0,0.03), transparent);
        z-index: 0; pointer-events: none;
    }

    .sparkle-container {
        position: fixed; top: 0; left: 0;
        width: 100%; height: 100%;
        z-index: 1; pointer-events: none;
    }
    .sparkle {
        position: absolute; width: 3px; height: 3px;
        background: radial-gradient(circle, #FFD700, #FFA500);
        border-radius: 50%;
    }

    .container {
        position: relative; z-index: 10;
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        min-height: 100vh; padding: 80px 20px 80px;
    }

    .back-btn {
        position: fixed;
        top: 48px;
        left: 12px;
        width: 36px;
        height: 36px;
        background: rgba(139,90,43,0.7);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        cursor: pointer;
        z-index: 100;
        border: 1.5px solid rgba(212,175,55,0.3);
        color: #FFD700;
    }
    .back-btn:active { transform: scale(0.92); }

    .header { text-align: center; margin-bottom: 15px; position: relative; z-index: 2; width: 100%; }
    .source-tag {
        display: inline-block;
        background: linear-gradient(135deg, #FFD700, #FFA500);
        color: #1a0a2e;
        padding: 6px 16px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: bold;
        margin-bottom: 10px;
        box-shadow: 0 3px 15px rgba(255,165,0,0.4);
    }
    .title {
        font-size: 26px;
        color: #FFD700;
        text-shadow: 0 0 20px rgba(255,215,0,0.8), 0 0 40px rgba(255,215,0,0.4);
        margin: 0; letter-spacing: 3px; font-weight: bold;
    }
    .subtitle {
        color: rgba(255,215,0,0.7);
        font-size: 12px;
        margin-top: 6px;
        letter-spacing: 2px;
    }

    .status-bar {
        width: 320px;
        background: linear-gradient(135deg, rgba(139,90,43,0.3), rgba(60,40,20,0.5));
        border: 1.5px solid rgba(212,175,55,0.4);
        border-radius: 12px;
        padding: 12px 16px;
        margin-bottom: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        z-index: 2;
    }
    .status-item {
        text-align: center;
        flex: 1;
    }
    .status-item .label {
        font-size: 11px;
        color: rgba(255,215,0,0.6);
        margin-bottom: 3px;
        letter-spacing: 1px;
    }
    .status-item .value {
        font-size: 18px;
        font-weight: bold;
        color: #FFD700;
        text-shadow: 0 0 10px rgba(255,215,0,0.5);
    }
    .status-divider {
        width: 1px;
        height: 30px;
        background: rgba(212,175,55,0.3);
    }

    .slot-machine {
        width: 320px;
        background: linear-gradient(180deg, #3d2a0f 0%, #2a1a08 50%, #3d2a0f 100%);
        border: 4px solid #D4AF37;
        border-radius: 20px;
        padding: 20px;
        position: relative; z-index: 2;
        box-shadow: 0 0 60px rgba(255,215,0,0.3), 0 20px 60px rgba(0,0,0,0.5), inset 0 0 30px rgba(255,215,0,0.1);
    }
    .slot-machine::before {
        content: '';
        position: absolute; top: 8px; left: 8px; right: 8px; bottom: 8px;
        border: 1px solid rgba(255,215,0,0.4);
        border-radius: 14px; pointer-events: none;
    }

    .reels-container {
        background: linear-gradient(180deg, #1a0a00 0%, #0d0500 100%);
        border: 3px solid #D4AF37;
        border-radius: 12px;
        padding: 15px; margin-bottom: 15px;
        position: relative;
    }

    .win-line {
        position: absolute; top: 50%; left: 0; right: 0;
        height: 80px; transform: translateY(-50%);
        border: 2px solid #FFD700;
        border-radius: 8px;
        background: rgba(255,215,0,0.1);
        box-shadow: 0 0 20px rgba(255,215,0,0.5);
        pointer-events: none; z-index: 5;
        opacity: 0;
    }
    .win-line.show { opacity: 1; animation: winLineFlash 0.6s ease-in-out infinite; }
    @keyframes winLineFlash {
        0%, 100% { box-shadow: 0 0 20px rgba(255,215,0,0.5); }
        50% { box-shadow: 0 0 40px rgba(255,215,0,0.9); }
    }

    .reels {
        display: flex; gap: 8px; justify-content: center;
        height: 80px; position: relative; z-index: 2;
    }

    .reel {
        width: 80px; height: 80px;
        overflow: hidden;
        border: 2px solid #8B7355;
        border-radius: 8px;
        position: relative;
        background: #0d0500;
    }

    .reel-track {
        position: absolute;
        left: 0; top: 0; width: 100%;
        will-change: transform;
    }

    .symbol {
        width: 100%; height: 80px;
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        font-size: 40px;
        color: #FFD700;
        text-shadow: 0 2px 4px rgba(0,0,0,0.5);
        text-align: center; line-height: 1;
        border: 1px solid transparent;
        border-radius: 4px;
        box-sizing: border-box;
    }
    .symbol.amount {
        background: linear-gradient(135deg, rgba(255,215,0,0.3), rgba(255,165,0,0.2));
        border: 2px solid #FFD700;
        border-radius: 6px;
        box-sizing: border-box;
        box-shadow: 0 0 12px rgba(255,215,0,0.6), inset 0 0 8px rgba(255,215,0,0.3);
    }
    .symbol.amount .amount-num {
        font-size: 24px; font-weight: bold;
        color: #FFD700;
        text-shadow: 0 0 8px rgba(255,215,0,0.8), 0 0 20px rgba(255,165,0,0.5);
        display: block; margin-bottom: 2px;
        line-height: 1.1;
    }
    .symbol.amount .amount-unit {
        font-size: 14px; color: #FF6347;
        font-weight: bold;
        line-height: 1.1;
        text-shadow: 0 0 5px rgba(255,99,71,0.5);
    }

    .reel.winning {
        border-color: #FFD700 !important;
        box-shadow: 0 0 20px #FFD700, 0 0 40px rgba(255,215,0,0.5);
        animation: winPulse 0.5s ease-in-out infinite;
    }
    @keyframes winPulse {
        0%, 100% { transform: scale(1); box-shadow: 0 0 20px #FFD700, 0 0 40px rgba(255,215,0,0.5); }
        50% { transform: scale(1.08); box-shadow: 0 0 30px #FFD700, 0 0 60px rgba(255,215,0,0.7); }
    }

    .lights-wrapper { display: flex; justify-content: center; gap: 20px; margin-bottom: 10px; }
    .light-string { display: flex; gap: 8px; }
    .light {
        width: 12px; height: 12px;
        border-radius: 50%;
        background: #333; transition: all 0.2s;
    }
    .slot-machine.lights-on .light {
        background: #FFD700 !important;
        box-shadow: 0 0 15px #FFD700, 0 0 30px #FFA500 !important;
        animation: blink 0.5s infinite;
    }
    @keyframes blink { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

    .control-area { display: flex; justify-content: center; }
    .spin-btn {
        background: linear-gradient(135deg, #FFD700, #FFA500);
        color: #1a0a2e; border: none;
        padding: 15px 50px; border-radius: 30px;
        font-size: 18px; font-weight: bold; cursor: pointer;
        box-shadow: 0 5px 25px rgba(255,165,0,0.5);
        transition: transform 0.2s, box-shadow 0.2s; letter-spacing: 3px;
    }
    .spin-btn:active { transform: scale(0.95); }
    .spin-btn:disabled {
        background: linear-gradient(135deg, #8B7355, #6B5344);
        cursor: not-allowed; box-shadow: none;
        color: #3a2818;
    }

    .remaining {
        color: rgba(255,215,0,0.8);
        font-size: 13px; margin-top: 15px;
        text-align: center; position: relative; z-index: 2;
    }
    .remaining strong { color: #FFD700; font-size: 18px; margin: 0 4px; }

    .round-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-bottom: 12px;
        position: relative;
        z-index: 2;
    }
    .round-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: rgba(139,90,43,0.5);
        border: 1.5px solid rgba(212,175,55,0.3);
        transition: all 0.3s;
    }
    .round-dot.done {
        background: rgba(255,215,0,0.3);
        border-color: rgba(255,215,0,0.6);
    }
    .round-dot.current {
        background: #FFD700;
        border-color: #FFD700;
        box-shadow: 0 0 10px rgba(255,215,0,0.8);
        animation: dotPulse 1s ease-in-out infinite;
    }
    @keyframes dotPulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.2); }
    }

    .modal-overlay {
        position: fixed; inset: 0;
        background: rgba(0,0,0,0.85);
        z-index: 1000;
        display: flex; align-items: center; justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s;
    }
    .modal-overlay.show {
        opacity: 1;
        pointer-events: all;
    }
    .modal {
        background: linear-gradient(160deg, #FFF8DC 0%, #F5DEB3 50%, #FFE4B5 100%);
        border: 4px solid #D4AF37;
        border-radius: 22px;
        padding: 30px 25px; text-align: center;
        max-width: 320px; width: 90%;
        transform: scale(0.7);
        transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s;
        box-shadow: 0 0 80px rgba(255,215,0,0.7);
        position: relative; overflow: visible;
    }
    .modal-overlay.show .modal { transform: scale(1); opacity: 1; }

    .modal-close {
        position: absolute; top: 10px; right: 12px;
        background: rgba(139,69,19,0.1);
        border: none; width: 32px; height: 32px;
        border-radius: 50%; font-size: 22px;
        color: #8B4513; cursor: pointer; line-height: 1;
        z-index: 10;
        transition: background 0.2s;
    }
    .modal-close:hover { background: rgba(139,69,19,0.2); }
    .modal-close:active { transform: scale(0.9); }

    .modal-emoji {
        font-size: 70px; margin-bottom: 10px;
        animation: bounce 1s ease-in-out infinite;
    }
    @keyframes bounce {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }
    .modal-title {
        font-size: 22px; color: #8B4513; font-weight: bold;
        margin-bottom: 10px; letter-spacing: 3px;
    }
    .modal-desc {
        font-size: 14px; color: #A0522D; margin-bottom: 15px;
        letter-spacing: 1px;
    }
    .modal-value {
        font-size: 22px; color: #FF6347; font-weight: bold;
        margin-bottom: 20px;
    }
    .modal-value .val-num {
        color: #FFD700; font-size: 44px;
        text-shadow: 0 0 15px rgba(255,215,0,0.7);
        margin: 0 4px;
    }
    .modal-share-btn {
        background: linear-gradient(135deg, #FFD700, #FFA500);
        color: #1a0a2e; border: none;
        padding: 14px 35px; border-radius: 28px;
        font-size: 16px; font-weight: bold;
        cursor: pointer;
        box-shadow: 0 5px 20px rgba(255,165,0,0.6);
        transition: transform 0.2s; letter-spacing: 3px;
    }
    .modal-share-btn:active { transform: scale(0.95); }

    .explosion-effect {
        position: fixed; top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        width: 10px; height: 10px;
        z-index: 999; pointer-events: none;
    }
    .explosion-particle {
        position: absolute; top: 50%; left: 50%;
        width: 10px; height: 10px;
        border-radius: 50%; transform: translate(-50%, -50%);
    }
    @keyframes particleFly {
        0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
        100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0); opacity: 0; }
    }
    .burst-glow {
        position: absolute; top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        width: 20px; height: 20px; border-radius: 50%;
        background: radial-gradient(circle, rgba(255,215,0,1) 0%, rgba(255,165,0,0.5) 30%, transparent 70%);
        animation: burstGlow 1s ease-out forwards;
    }
    @keyframes burstGlow {
        0% { width: 20px; height: 20px; opacity: 1; }
        50% { width: 600px; height: 600px; opacity: 0.8; }
        100% { width: 800px; height: 800px; opacity: 0; }
    }
    .light-beam {
        position: absolute; top: 50%; left: 50%;
        width: 4px; height: 0;
        background: linear-gradient(to top, transparent, #FFD700, #FF6347, transparent);
        transform-origin: bottom center;
        transform: translate(-50%, -100%) rotate(var(--angle));
        animation: beamOut 1.2s ease-out forwards;
    }
    @keyframes beamOut {
        0% { height: 0; opacity: 0; }
        30% { opacity: 1; }
        100% { height: 500px; opacity: 0; }
    }
    .confetti-piece {
        position: absolute; top: 50%; left: 50%;
        width: 12px; height: 12px; border-radius: 2px;
    }
    @keyframes confettiFly {
        0% { transform: translate(-50%, -50%) rotate(0deg); opacity: 1; }
        100% { transform: translate(calc(-50% + var(--cx)), calc(-50% + var(--cy))) rotate(720deg); opacity: 0; }
    }

    .floating-text {
        position: fixed; top: 40%; left: 50%;
        transform: translate(-50%, -50%);
        color: #FFD700; font-size: 24px; font-weight: bold;
        text-shadow: 0 0 20px rgba(255,215,0,0.8);
        z-index: 2000; pointer-events: none;
        animation: floatUp 2s ease-out forwards;
        letter-spacing: 2px; text-align: center;
    }
    @keyframes floatUp {
        0% { transform: translate(-50%, -30%); opacity: 1; }
        100% { transform: translate(-50%, -150%); opacity: 0; }
    }

    .no-win-toast {
        position: fixed; top: 30%; left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(139,90,43,0.85);
        color: #FFD700;
        padding: 12px 30px; border-radius: 30px;
        font-size: 15px; letter-spacing: 2px;
        z-index: 500; pointer-events: none;
        animation: toastFade 1.5s ease-out forwards;
        border: 1px solid rgba(255,215,0,0.4);
    }
    @keyframes toastFade {
        0% { opacity: 0; transform: translate(-50%, -30%) scale(0.8); }
        20% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
        80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
        100% { opacity: 0; transform: translate(-50%, -70%) scale(0.9); }
    }