.ohana-music-player {
    position: relative;
    z-index: 20;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
}

.ohana-music-player + .discord-button {
    margin-left: 0;
}

.ohana-music-play {
    order: 1;
    min-height: 38px;
    max-width: 190px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 8px;
    padding: 4px 9px 4px 5px;
    border: 1px solid rgba(31, 241, 255, 0.34);
    border-radius: 12px;
    color: #f5f7ff;
    background:
        linear-gradient(135deg, rgba(31, 241, 255, 0.10), rgba(191, 73, 255, 0.12)),
        rgba(9, 17, 29, 0.94);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.ohana-music-play:hover,
.ohana-music-play:focus-visible,
.ohana-music-player.is-playing .ohana-music-play {
    border-color: rgba(31, 241, 255, 0.72);
    box-shadow: 0 0 18px rgba(31, 241, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.ohana-music-play:hover {
    transform: translateY(-1px);
}

.ohana-music-disc {
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    color: #071018;
    font-size: 15px;
    background:
        radial-gradient(circle at center, #f7d768 0 12%, #10151f 13% 26%, transparent 27%),
        repeating-radial-gradient(circle at center, #1ff1ff 0 2px, #713ee9 3px 5px);
    box-shadow: 0 0 12px rgba(31, 241, 255, 0.32);
}

.ohana-music-player.is-playing .ohana-music-disc {
    animation: ohana-disc-spin 3.4s linear infinite;
}

.ohana-music-copy {
    min-width: 0;
    display: grid;
    line-height: 1.05;
    text-align: left;
}

.ohana-music-copy strong {
    overflow: hidden;
    color: #f7f8ff;
    font-size: 12px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ohana-music-copy small {
    margin-top: 3px;
    color: rgba(210, 218, 235, 0.68);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ohana-music-state {
    color: #35ff8a;
    font-size: 13px;
    text-align: center;
}

.ohana-music-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 270px;
    padding: 11px 12px;
    display: grid;
    gap: 9px;
    border: 1px solid rgba(31, 241, 255, 0.26);
    border-radius: 13px;
    background: rgba(7, 14, 27, 0.98);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.48), 0 0 24px rgba(31, 241, 255, 0.10);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    pointer-events: none;
    transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
}

.ohana-music-inline-controls {
    order: 2;
    display: flex;
    gap: 6px;
    align-items: center;
}

.ohana-music-inline-controls button {
    width: 34px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(31,241,255,.28);
    border-radius: 10px;
    color: #f1f3ff;
    background: rgba(9,17,29,.94);
    cursor: pointer;
    transition: border-color 150ms ease, color 150ms ease, background 150ms ease, transform 150ms ease;
}

.ohana-music-inline-controls button:hover,
.ohana-music-inline-controls button:focus-visible { transform: translateY(-1px); border-color: rgba(31,241,255,.75); }
.ohana-music-inline-controls button.active { color: #071018; border-color: #35ff8a; background: #35ff8a; }
.ohana-music-inline-controls [data-ohana-music-prev] { order: 1; }
.ohana-music-inline-controls [data-ohana-music-shuffle] { order: 2; }
.ohana-music-inline-controls [data-ohana-music-next] { order: 3; }
.ohana-music-inline-controls [data-ohana-music-rate="1"] { order: 4; }
.ohana-music-inline-controls [data-ohana-music-rate="-1"] { order: 5; }
.ohana-music-inline-controls [data-ohana-music-rate="-1"].active { color: #fff; border-color: #ff4f67; background: #d92f48; }

.ohana-music-player:hover .ohana-music-popover,
.ohana-music-player:focus-within .ohana-music-popover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.ohana-music-timeline,
.ohana-music-volume {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 7px;
}

.ohana-music-volume {
    grid-template-columns: 30px minmax(0, 1fr) 34px;
}

.ohana-music-time,
.ohana-music-volume-value {
    color: rgba(220, 226, 241, 0.72);
    font-size: 10px;
    font-weight: 800;
    text-align: center;
}

.ohana-music-seek,
.ohana-music-volume-slider {
    width: 100%;
    accent-color: #35ff8a;
    cursor: pointer;
}

.ohana-music-mute {
    width: 30px;
    height: 28px;
    padding: 0;
    border: 1px solid rgba(191, 73, 255, 0.30);
    border-radius: 8px;
    color: #f1f3ff;
    background: rgba(191, 73, 255, 0.10);
    cursor: pointer;
}

.ohana-music-player.is-unavailable {
    display: none;
}

@keyframes ohana-disc-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 900px) {
    .ohana-music-player {
        width: 100%;
        margin-left: 0;
        flex-wrap: wrap;
    }

    .ohana-music-play {
        flex: 1 1 190px;
        width: auto;
        max-width: none;
        grid-template-columns: 30px minmax(0, 1fr) 24px;
        justify-content: center;
    }

    .ohana-music-inline-controls {
        flex: 0 0 auto;
        margin-left: auto;
    }

    .ohana-music-popover {
        position: static;
        width: 100%;
        margin-top: 6px;
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .ohana-music-player:focus-within .ohana-music-popover {
        display: grid;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ohana-music-player.is-playing .ohana-music-disc {
        animation: none;
    }
}