/* =========================================================
   mongSing Player v23
   custom controls / no purple
   ========================================================= */


/* 원래 Play / Next는 기능만 남기고 완전 숨김 */
html.mongsing-player .ms-native-command-v23 {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}


/* 원래 중앙 Play 완전 제거 */
html.mongsing-player .ms-native-center-v23 {
    display: none !important;
}


/* Focus 보라 테두리 제거 */
html.mongsing-player button:focus,
html.mongsing-player button:focus-visible,
html.mongsing-player button:active,
html.mongsing-player a:focus,
html.mongsing-player a:focus-visible {
    outline: none !important;
}


/* =========================================================
   mongSing 상단 버튼
   ========================================================= */

html.mongsing-player #ms-controls-v23 {
    position: fixed !important;

    left: 8px !important;
    top: 5px !important;

    display: flex !important;
    gap: 7px !important;

    z-index: 80000 !important;

    transition:
        opacity .15s ease !important;
}


html.mongsing-player .ms-button-v23 {
    position: relative !important;

    width: 38px !important;
    height: 38px !important;

    padding: 0 !important;
    margin: 0 !important;

    border:
        1px solid rgba(255,255,255,.11) !important;

    border-radius: 11px !important;

    background:
        rgba(9,15,22,.91) !important;

    background-image: none !important;

    outline: none !important;

    box-shadow:
        0 4px 15px rgba(0,0,0,.34) !important;

    cursor: pointer !important;
}


/* Play */
html.mongsing-player .ms-play-v23 {
    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    width: 0 !important;
    height: 0 !important;

    border-top:
        7px solid transparent !important;

    border-bottom:
        7px solid transparent !important;

    border-left:
        12px solid #ffffff !important;

    transform:
        translate(-38%, -50%) !important;
}


/* Pause */
html.mongsing-player .ms-pause-v23 {
    display: none !important;

    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    width: 15px !important;
    height: 18px !important;

    transform:
        translate(-50%, -50%) !important;
}


html.mongsing-player
#ms-toggle-v23.playing .ms-play-v23 {
    display: none !important;
}


html.mongsing-player
#ms-toggle-v23.playing .ms-pause-v23 {
    display: block !important;
}


html.mongsing-player .ms-pause-v23 i {
    position: absolute !important;

    top: 0 !important;

    width: 4px !important;
    height: 18px !important;

    background: #ffffff !important;

    border-radius: 1px !important;
}


html.mongsing-player .ms-pause-v23 i:first-child {
    left: 0 !important;
}


html.mongsing-player .ms-pause-v23 i:last-child {
    right: 0 !important;
}


/* Next */
html.mongsing-player .ms-next-triangle-v23 {
    position: absolute !important;

    left: 10px !important;
    top: 12px !important;

    width: 0 !important;
    height: 0 !important;

    border-top:
        7px solid transparent !important;

    border-bottom:
        7px solid transparent !important;

    border-left:
        11px solid #ffffff !important;
}


html.mongsing-player .ms-next-line-v23 {
    position: absolute !important;

    right: 9px !important;
    top: 10px !important;

    width: 3px !important;
    height: 18px !important;

    background: #ffffff !important;

    border-radius: 1px !important;
}


/* =========================================================
   화면 전체 터치 영역
   상단 72px 제외
   ========================================================= */

html.mongsing-player #ms-screen-v23 {
    position: fixed !important;

    left: 0 !important;
    right: 0 !important;

    top: 72px !important;
    bottom: 0 !important;

    background: transparent !important;

    z-index: 70000 !important;

    cursor: pointer !important;
}


/* =========================================================
   중앙 ▶
   우리가 만든 것 딱 하나
   ========================================================= */

html.mongsing-player #ms-center-v23 {
    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    display: none !important;

    width: 0 !important;
    height: 0 !important;

    border-top:
        72px solid transparent !important;

    border-bottom:
        72px solid transparent !important;

    border-left:
        122px solid #ffffff !important;

    transform:
        translate(-42%, -50%) !important;

    filter:
        drop-shadow(
            0 7px 18px rgba(0,0,0,.44)
        ) !important;

    pointer-events: none !important;
}


html.mongsing-player
#ms-screen-v23.paused
#ms-center-v23 {
    display: block !important;
}


/* =========================================================
   ★ 재생 중: 상단 전부 숨김
   ========================================================= */

html.mongsing-player.ms-playing-v23
#ms-controls-v23,
html.mongsing-player.ms-playing-v23
.ms-top-ui-v23 {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}


/* 상단 검은 바/컨테이너도 가능한 경우 숨김 */
html.mongsing-player.ms-playing-v23
header,
html.mongsing-player.ms-playing-v23
nav {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}


/* 진행바 */
html.mongsing-player input[type="range"] {
    accent-color: #70cfff !important;
}


/* volume 흰색 */
html.mongsing-player
[aria-label*="volume" i],
html.mongsing-player
[title*="volume" i],
html.mongsing-player
[aria-label*="mute" i],
html.mongsing-player
[title*="mute" i] {
    filter:
        grayscale(1)
        saturate(0)
        brightness(4) !important;
}


/* =========================================================
   v25 - custom controls completely isolated
   ========================================================= */

/* 원본 Karaoke Eternal Play / Next는 완전히 제거 */
html.mongsing-player .ms-native-command-v24 {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}


/*
 * 이제 custom control은 button이 아니라 div.
 * Karaoke Eternal의 button / focus / active / pseudo CSS를
 * 전혀 받지 않음.
 */
html.mongsing-player #ms-controls-v24 .ms-btn-v24 {
    position: relative !important;

    box-sizing: border-box !important;

    width: 38px !important;
    height: 38px !important;

    min-width: 38px !important;
    min-height: 38px !important;

    flex: 0 0 38px !important;

    padding: 0 !important;
    margin: 0 !important;

    background: rgba(8,15,22,.92) !important;
    background-image: none !important;

    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 11px !important;

    outline: none !important;

    box-shadow:
        0 4px 15px rgba(0,0,0,.34) !important;

    cursor: pointer !important;

    user-select: none !important;
    -webkit-user-select: none !important;

    -webkit-tap-highlight-color: transparent !important;
}


/* 앱 CSS가 pseudo element를 만들더라도 전부 차단 */
html.mongsing-player #ms-controls-v24 .ms-btn-v24::before,
html.mongsing-player #ms-controls-v24 .ms-btn-v24::after {
    content: none !important;
    display: none !important;

    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}


/* 클릭 효과도 보라색 없이 */
html.mongsing-player #ms-controls-v24 .ms-btn-v24:active {
    transform: scale(.92) !important;
}


/* NEXT의 우리 아이콘만 표시 */
html.mongsing-player #ms-next-v24 .ms-next-tri-v24 {
    display: block !important;
}

html.mongsing-player #ms-next-v24 .ms-next-line-v24 {
    display: block !important;
}

/* v26: custom center indicator completely disabled */
#ms-center-v21,
#ms-center-v22,
#ms-center-v23,
#ms-center-v24,
#ms-center-indicator,
#mongsing-center-play,
#mongsing-center-toggle,
#mongsing-center-resume,
#mongsing-play-indicator,
#mongsing-pause-indicator {
    display: none !important;
}

/* Native center control: remove purple/blue appearance */
html.mongsing-player button:not([id^="ms-"]) {
    -webkit-tap-highlight-color: transparent !important;
}

html.mongsing-player button:not([id^="ms-"]):focus,
html.mongsing-player button:not([id^="ms-"]):focus-visible {
    outline: none !important;
}