/* P'INC Audio Player v1.0.0 */
.audio-player {
    /* === THEME === */
    --player-color-focus: #667eea;

    /* === BUTTON === */
    --player-btn-size: 80px;
    --player-btn-bg: #ffffff;
    --player-btn-icon-color: #000000;
    --player-btn-icon-size: 20px;
    --player-btn-hover-scale: 1.05;
    --player-btn-active-scale: 0.95;
    --player-btn-disabled-opacity: 0.5;

    /* === PROGRESS === */
    --player-track-height: 5px;
    --player-track-bg: rgba(255, 255, 255, 0.2);
    --player-track-fill: rgba(255, 255, 255, 1);
    --player-track-scrub-scale: 2;

    /* === LOADING SPINNER === */
    --player-spinner-size: 24px;
    --player-spinner-width: 3px;
    --player-spinner-bg: rgba(255, 255, 255, 0.3);
    --player-spinner-color: #000000;

    /* === TYPOGRAPHY === */
    --player-time-size: 12px;
    --player-time-color: #ffffff;

    /* === SPACING === */
    --player-gap: 20px;
    --player-time-margin-top: 10px;

    display: flex;
    flex-direction: column;
    gap: var(--player-gap);
    align-items: center;
}

/* Play/Pause Button */
.play-button {
    width: var(--player-btn-size);
    height: var(--player-btn-size);
    border-radius: 50%;
    background-color: var(--player-btn-bg);
    color: var(--player-btn-icon-color);
    border: none;
    cursor: pointer;
    position: relative;
    transition: transform 0.2s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.play-button:hover:not(:disabled) {
    transform: scale(var(--player-btn-hover-scale));
}

.play-button:active:not(:disabled) {
    transform: scale(var(--player-btn-active-scale));
}

.play-button:disabled {
    opacity: var(--player-btn-disabled-opacity);
    cursor: not-allowed;
}

.play-button:focus-visible {
    outline: 2px solid var(--player-color-focus);
    outline-offset: 5px;
}

/* Shared Icon Base */
.play-button.paused::after,
.play-button.playing::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: var(--player-btn-icon-size);
    height: var(--player-btn-icon-size);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Play Icon (currentColor via CSS mask) */
.play-button.paused::after {
    background: currentColor;
    -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjggMjgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTI3LjQwNjI1IDEyLjU1NDQ4NjM3LTE5LTEyLjI1Yy0uNTYyNTAyOTgtLjI5MTY2OTg1LTEuMTA0MTY0LS4zNjQ1ODAxNi0xLjYyNS0uMjE4NzUtLjUyMDgzNTkxLjE0NTgzMDE1LS43ODEyNS43NjA0MTAzMS0uNzgxMjUgMS44NDM3NXYyNC4xMjVjMCAxLjAwMDAwNTAxLjI3NjAzODg5IDEuNjA0MTY1NjIuODI4MTI1IDEuODEyNS41NTIwODYuMjA4MzM0MzkgMS4wNzgxMjI5Ny4xNDU4MzUwMSAxLjU3ODEyNS0uMTg3NWwxOS0xMi4yNWMuMzk1ODM5NjktLjM5NTgzOTY5LjU5Mzc1LS44NzUuNTkzNzUtMS40Mzc1cy0uMTk3OTEwMzEtMS4wNDE2NjAzMS0uNTkzNzUtMS40Mzc1eiIgZmlsbD0id2hpdGUiLz48L3N2Zz4=');
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjggMjgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTI3LjQwNjI1IDEyLjU1NDQ4NjM3LTE5LTEyLjI1Yy0uNTYyNTAyOTgtLjI5MTY2OTg1LTEuMTA0MTY0LS4zNjQ1ODAxNi0xLjYyNS0uMjE4NzUtLjUyMDgzNTkxLjE0NTgzMDE1LS43ODEyNS43NjA0MTAzMS0uNzgxMjUgMS44NDM3NXYyNC4xMjVjMCAxLjAwMDAwNTAxLjI3NjAzODg5IDEuNjA0MTY1NjIuODI4MTI1IDEuODEyNS41NTIwODYuMjA4MzM0MzkgMS4wNzgxMjI5Ny4xNDU4MzUwMSAxLjU3ODEyNS0uMTg3NWwxOS0xMi4yNWMuMzk1ODM5NjktLjM5NTgzOTY5LjU5Mzc1LS44NzUuNTkzNzUtMS40Mzc1cy0uMTk3OTEwMzEtMS4wNDE2NjAzMS0uNTkzNzUtMS40Mzc1eiIgZmlsbD0id2hpdGUiLz48L3N2Zz4=');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

/* Pause Icon (currentColor via CSS mask) */
.play-button.playing::after {
    background: currentColor;
    -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjggMjgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3QgeD0iNCIgeT0iMiIgd2lkdGg9IjYiIGhlaWdodD0iMjQiIHJ4PSIyIiByeT0iMiIgZmlsbD0id2hpdGUiLz48cmVjdCB4PSIxOCIgeT0iMiIgd2lkdGg9IjYiIGhlaWdodD0iMjQiIHJ4PSIyIiByeT0iMiIgZmlsbD0id2hpdGUiLz48L3N2Zz4=');
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjggMjgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3QgeD0iNCIgeT0iMiIgd2lkdGg9IjYiIGhlaWdodD0iMjQiIHJ4PSIyIiByeT0iMiIgZmlsbD0id2hpdGUiLz48cmVjdCB4PSIxOCIgeT0iMiIgd2lkdGg9IjYiIGhlaWdodD0iMjQiIHJ4PSIyIiByeT0iMiIgZmlsbD0id2hpdGUiLz48L3N2Zz4=');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

/* Loading Spinner */
.play-button.loading::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: var(--player-spinner-size);
    height: var(--player-spinner-size);
    border: var(--player-spinner-width) solid var(--player-spinner-bg);
    border-top-color: var(--player-spinner-color);
    border-radius: 50%;
    animation: pinc-audio-spin 0.8s linear infinite;
}

@keyframes pinc-audio-spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Progress Container */
.progress-container {
    width: 100%;
    position: relative;
    cursor: pointer;
    touch-action: none;
    padding: 30px 0 0 0;
    margin: -30px 0 0 0;
}

.progress-container:focus-visible {
    outline: 2px solid var(--player-color-focus);
    outline-offset: 5px;
    border-radius: 5px;
}

.progress-track {
    width: 100%;
    height: var(--player-track-height);
    background-color: var(--player-track-bg);
    position: relative;
    overflow: hidden;
    transition: transform 0.2s;
    transform-origin: center;
}

.progress-container.scrubbing .progress-track {
    transform: scaleY(var(--player-track-scrub-scale));
}

.progress-bar {
    height: 100%;
    background: var(--player-track-fill);
    width: 0%;
    transition: width 0.1s linear;
    pointer-events: none;
    will-change: width;
}

/* Zeitanzeige */
.time-display {
    height: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--player-time-size);
    color: var(--player-time-color);
    margin-top: var(--player-time-margin-top);
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}