/* NAVIGATION */

/* DISPLAY MENU BUTTON */
#display-menu {background: none;border: none;cursor: pointer;display: flex;flex-direction: column;gap: 4px;padding: 5px;}
#display-menu span {display: block;height: 3px;width: 22px;background: var(--white);border-radius: 2px;transition: 0.3s;}
#display-menu.active span:nth-child(1) {transform: translateY(7px) rotate(45deg);}
#display-menu.active span:nth-child(2) {opacity: 0;}
#display-menu.active span:nth-child(3) {transform: translateY(-7px) rotate(-45deg);}

/* DISPLAY NAVIGATION PANEL */
#display-menu-panel {position: fixed;top: var(--display-bar-height);left: 0;width: 100%;background: var(--midnight-navy);display: flex;flex-direction: column;border-bottom: 3px solid var(--accent-pink);z-index: 999;opacity: 0;visibility: hidden;transform: translateY(-10px);pointer-events: none;transition:opacity .8s ease,transform .8s ease,visibility .8s ease;}
#display-menu-panel.active {opacity: 1;visibility: visible;transform: translateY(0);pointer-events: auto;}

/* MENU CONTENT */
#display-menu-content {position: relative;width: 100%;}

/* CLOSE BUTTON */
#display-menu-close {position: absolute;top: 8px;right: 10px;width: 32px;height: 32px;padding: 0;border: none;outline: none;background: transparent;color: var(--white);font-size: 28px;line-height: 1;cursor: pointer;}
#display-menu-close:hover {color: var(--accent-pink);}

/* DISPLAY STATUS */
#display-status {padding: 14px 20px 12px;padding-right: 50px;border-bottom: 1px solid rgba(255,255,255,0.1);display: flex;flex-direction: column;gap: 3px;}
#display-status-title {display: block;color: var(--white);font-size: 14px;font-weight: 700;line-height: 1.2;}
#display-status-detail {display: block;color: var(--text-muted);font-size: 12px;line-height: 1.2;}

/* DISPLAY CONTROLS */
#display-controls {padding: 0 20px 18px;}
#display-controls > button {display: block;width: 100%;padding: 10px 0;margin: 0;border: 0;border-top: 1px solid rgba(255,255,255,0.1);background: transparent;color: var(--white);font-family: inherit;font-size: 14px;text-align: left;cursor: pointer;transition:background 0.2s,color 0.2s;}
#display-controls > button:hover {background: rgba(var(--accent-pink-rgb),0.15);color: var(--accent-pink);}
#display-controls > button:disabled {opacity: 0.6;cursor: default;}

/* PLAY / PAUSE */
#display-pause {border-top: 0 !important;}
#display-pause .pause-icon {font-family: "Noto Color Emoji", "Segoe UI Emoji", sans-serif;}

/* PREVIOUS / NEXT */
#display-navigation {display: flex;flex-direction: column;width: 100%;}
#display-navigation button {display: block;width: 100%;padding: 10px 0;margin: 0;border: 0;border-top: 1px solid rgba(255,255,255,0.1);background: transparent;color: var(--white);font-family: inherit;font-size: 14px;text-align: left;cursor: pointer;transition:background 0.2s,color 0.2s;}
#display-navigation button:hover {background: rgba(var(--accent-pink-rgb),0.15);color: var(--accent-pink);}

/* SPEED CONTROLS */
#display-speed {display: flex;align-items: center;gap: 6px;width: 100%;padding: 10px 0;border-top: 1px solid rgba(255,255,255,0.1);}
#display-speed span {margin-right: auto;color: var(--white);font-size: 14px;}
#display-speed button {min-width: 42px;padding: 7px 6px;border: 1px solid rgba(255,255,255,0.2);border-radius: 4px;background: transparent;color: var(--white);font-family: inherit;font-size: 13px;cursor: pointer;transition:background 0.2s,color 0.2s,border-color 0.2s;}
#display-speed button:hover,
#display-speed button.active {background: rgba(var(--accent-pink-rgb),0.15);border-color: var(--accent-pink);color: var(--accent-pink);}

/* RESTART */
#display-restart {border-top: 1px solid rgba(255,255,255,0.1);}

/* UPDATE PLAYLIST */
#display-update {border-top: 1px solid rgba(255,255,255,0.1);}

/* DESKTOP / TV WIDTH */
@media (min-width: 700px) {
#display-menu-panel {width: 300px;left: auto;right: 1px;border-radius: 0 0 8px 8px;box-shadow: 0 6px 18px rgba(0,0,0,.25);}}