body {
            margin: 0;
            padding: 0;
            background-color: #000; 
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: Arial, sans-serif;
            overflow: hidden;
        }

  
        .play-container {
            position: relative;
            cursor: pointer;
            transition: transform 0.2s ease;
        }

        .play-container:hover {
            transform: scale(1.05); 
        }


        .play-button {
            width: 100px;
            height: 100px;
            background: radial-gradient(circle, #ffb347 0%, #ff8c00 100%); 
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 0 20px rgba(255, 140, 0, 0.4);
            border: none;
            outline: none;
        }

  
        .play-icon {
            width: 0;
            height: 0;
            border-top: 15px solid transparent;
            border-bottom: 15px solid transparent;
            border-left: 25px solid white;
            margin-left: 8px; 
        }


        .loader {
            display: none;
    position: absolute;
    top: -8px;
    left: -7px;
    width: 110px;
    height: 110px;
    border: 4px solid transparent;
    border-top: 4px solid #c88a3e;
    border-radius: 50%;
    animation: spin 1s 
linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

       
        .loading .play-button {
            opacity: 0.5;
            pointer-events: none;
        }

        .loading .loader {
            display: block;
        }