.gp-player {
    max-width: 420px;
    margin: 20px auto;
    background: var(--gp-bg, rgba(12, 10, 10, 0.92));
    border: 1px solid var(--gp-primary-dark, #8b2e2e);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 0 25px rgba(139, 46, 46, 0.35), inset 0 0 40px rgba(0,0,0,0.6);
    color: var(--gp-text, #e6e0e0);
    font-family: 'Segoe UI', sans-serif;
}

.gp-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 900;
    font-size: 26px;
    text-align: center;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gp-primary, #c9302c);
    text-shadow: 0 0 8px rgba(201, 48, 44, 0.7), 0 0 2px #000;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--gp-border, #5a1a1a);
    padding-bottom: 12px;
}

.gp-empty {
    text-align: center;
    color: #a08d8d;
}

.gp-nowplaying {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.gp-cover {
    width: 84px;
    height: 84px;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid var(--gp-primary, #c9302c);
    background: var(--gp-bg-alt, #1a1414);
    box-shadow: 0 0 10px rgba(201, 48, 44, 0.4);
    flex-shrink: 0;
}

.gp-cover:not([src]), .gp-cover[src=""] {
    visibility: hidden;
}

.gp-meta {
    min-width: 0;
    overflow: hidden;
}

.gp-track-title {
    font-weight: bold;
    color: var(--gp-text, #e6e0e0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gp-track-artist,
.gp-track-album {
    font-size: 13px;
    color: #a08d8d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gp-select {
    width: 100%;
    background: rgba(0,0,0,0.4);
    border: 1px solid var(--gp-border, #5a1a1a);
    color: var(--gp-text, #e6e0e0);
    padding: 6px 8px;
    border-radius: 4px;
    margin-bottom: 14px;
}

.gp-select option {
    background: var(--gp-bg-alt, #1a1414);
    color: var(--gp-text, #e6e0e0);
}

.gp-progress-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.gp-time {
    font-size: 12px;
    color: #a08d8d;
    min-width: 34px;
}

/* --- Blood Flow Sliders --- */
@keyframes gp-blood-flow {
    0%   { background-position: 0% 0%; }
    100% { background-position: -200% 0%; }
}

@keyframes gp-blood-pulse {
    0%, 100% { box-shadow: 0 0 4px rgba(255, 77, 77, 0.7), 0 0 0px rgba(201, 48, 44, 0); }
    50%      { box-shadow: 0 0 10px rgba(255, 77, 77, 1), 0 0 14px rgba(201, 48, 44, 0.8); }
}

.gp-progress,
.gp-volume {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: repeating-linear-gradient(
        90deg,
        #2a0606 0%,
        #6e1616 12%,
        var(--gp-primary, #c9302c) 22%,
        #ff4d4d 28%,
        var(--gp-primary, #c9302c) 34%,
        #6e1616 44%,
        #2a0606 56%
    );
    background-size: 220% 100%;
    animation: gp-blood-flow 2.6s linear infinite;
    outline: none;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.85);
}

/* Chrome/Edge/Safari track — match the flowing gradient exactly */
.gp-progress::-webkit-slider-runnable-track,
.gp-volume::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background: transparent;
}

/* Firefox track */
.gp-progress::-moz-range-track,
.gp-volume::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: repeating-linear-gradient(
        90deg,
        #2a0606 0%,
        #6e1616 12%,
        var(--gp-primary, #c9302c) 22%,
        #ff4d4d 28%,
        var(--gp-primary, #c9302c) 34%,
        #6e1616 44%,
        #2a0606 56%
    );
    background-size: 220% 100%;
    animation: gp-blood-flow 2.6s linear infinite;
}

.gp-progress::-webkit-slider-thumb,
.gp-volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    margin-top: -4.5px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ff8080, var(--gp-primary, #c9302c) 60%, #6e1616 100%);
    border: 1px solid #ff6b6b;
    cursor: pointer;
    animation: gp-blood-pulse 1.4s ease-in-out infinite;
}

.gp-progress::-moz-range-thumb,
.gp-volume::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ff8080, var(--gp-primary, #c9302c) 60%, #6e1616 100%);
    border: 1px solid #ff6b6b;
    cursor: pointer;
    animation: gp-blood-pulse 1.4s ease-in-out infinite;
}

.gp-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 14px;
}

.gp-btn {
    background: rgba(0,0,0,0.4);
    border: 1px solid var(--gp-primary-dark, #8b2e2e);
    color: var(--gp-text, #e6e0e0);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, box-shadow 0.15s;
}

.gp-btn:hover {
    background: var(--gp-primary, #c9302c);
    box-shadow: 0 0 10px rgba(201, 48, 44, 0.6);
}

.gp-btn.gp-play {
    width: 54px;
    height: 54px;
    font-size: 20px;
    background: var(--gp-primary, #c9302c);
}
.gp-btn.gp-play:hover {
    background: #a02622;
}

.gp-btn.gp-shuffle.active {
    background: var(--gp-primary, #c9302c);
    box-shadow: 0 0 10px rgba(201, 48, 44, 0.8);
}

.gp-volume-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.gp-volume {
    max-width: 100px;
}

/* --- Donate by Crypto --- */
.gp-donate {
    max-width: 420px;
    margin: 20px auto;
    text-align: center;
}

.gp-donate-btn {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    letter-spacing: 1.5px;
    background: linear-gradient(180deg, var(--gp-primary, #c9302c), #7a1a1a);
    border: 1px solid #ff4d4d;
    color: #fff;
    padding: 14px 28px;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 0 16px rgba(201, 48, 44, 0.6);
    transition: box-shadow 0.15s, transform 0.1s;
    width: 100%;
}

.gp-donate-btn:hover {
    box-shadow: 0 0 24px rgba(255, 77, 77, 0.85);
}

.gp-donate-btn:active {
    transform: scale(0.98);
}

.gp-donate-dropdown {
    margin-top: 10px;
    background: rgba(12, 10, 10, 0.95);
    border: 1px solid var(--gp-primary-dark, #8b2e2e);
    border-radius: 8px;
    padding: 14px;
    text-align: left;
    box-shadow: 0 0 20px rgba(139, 46, 46, 0.4);
}

.gp-donate-row {
    padding: 8px 0;
    border-bottom: 1px solid #3a1010;
}
.gp-donate-row:last-child {
    border-bottom: none;
}

.gp-donate-label {
    font-weight: bold;
    color: var(--gp-primary, #c9302c);
    margin-bottom: 4px;
    font-size: 13px;
    letter-spacing: 0.5px;
}

.gp-donate-address-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gp-donate-address {
    flex: 1;
    background: rgba(0,0,0,0.4);
    border: 1px solid var(--gp-border, #5a1a1a);
    color: var(--gp-text, #e6e0e0);
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 12px;
    word-break: break-all;
}

.gp-donate-copy {
    background: rgba(0,0,0,0.4);
    border: 1px solid var(--gp-primary-dark, #8b2e2e);
    color: var(--gp-text, #e6e0e0);
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}

.gp-donate-copy:hover {
    background: var(--gp-primary, #c9302c);
}

.gp-donate-copy.gp-copied {
    background: #2e7d32;
    border-color: #2e7d32;
}

/* --- Support Us (Gremlin Wallet-branded, multi-cause) --- */
.gp-support {
    max-width: 420px;
    margin: 20px auto;
    text-align: center;
}

.gp-support-btn {
    width: 100%;
    font-family: 'Cinzel Decorative', serif;
    background: linear-gradient(180deg, var(--gp-primary, #c9302c), var(--gp-primary-dark, #8b2e2e));
    border: 1px solid var(--gp-primary, #c9302c);
    color: #fff;
    padding: 14px 28px;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 0 16px rgba(201, 48, 44, 0.6);
    transition: box-shadow 0.15s, transform 0.1s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.gp-support-btn:hover { box-shadow: 0 0 24px rgba(255, 77, 77, 0.85); }
.gp-support-btn:active { transform: scale(0.98); }
.gp-support-btn-label { font-weight: 700; letter-spacing: 1.5px; font-size: 15px; }
.gp-support-btn-badge {
    font-family: 'Segoe UI', sans-serif;
    font-weight: normal;
    font-size: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #ffd3d3;
    background: rgba(0,0,0,0.25);
    padding: 2px 8px;
    border-radius: 10px;
}

.gp-support-dropdown {
    margin-top: 10px;
    background: rgba(12, 10, 10, 0.95);
    border: 1px solid var(--gp-primary-dark, #8b2e2e);
    border-radius: 8px;
    padding: 14px;
    text-align: left;
    box-shadow: 0 0 20px rgba(139, 46, 46, 0.4);
}
.gp-support-empty { color: var(--gp-text, #e6e0e0); font-size: 13px; text-align: center; margin: 4px 0; }
.gp-support-cause-title {
    font-family: 'Cinzel Decorative', serif;
    color: var(--gp-primary, #c9302c);
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin: 14px 0 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--gp-border, #5a1a1a);
}
.gp-support-cause-title:first-child { margin-top: 0; }
.gp-support-cause-desc {
    display: block;
    font-family: 'Segoe UI', sans-serif;
    text-transform: none;
    color: #a08d8d;
    font-size: 11px;
    letter-spacing: normal;
    margin-top: 2px;
}
.gp-support-footer {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--gp-border, #5a1a1a);
    font-size: 11px;
    color: #a08d8d;
    text-align: center;
}

/* --- Social Links (unrestricted — any label, any URL) --- */
.gp-social {
    max-width: 460px;
    margin: 20px auto;
}
.gp-social-empty { text-align: center; color: #a08d8d; font-size: 13px; }
.gp-social-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.gp-social-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 24px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 13px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.3), 0 2px 6px rgba(0,0,0,0.4);
    transition: transform 0.08s, box-shadow 0.15s;
}
.gp-social-link:hover { box-shadow: 0 0 14px rgba(255,255,255,0.25), 0 2px 6px rgba(0,0,0,0.4); transform: translateY(-1px); }
.gp-social-link:active { transform: scale(0.96); }
.gp-social-icon { width: 20px; height: 20px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }