* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    width: 100%; height: 100%;
    background: #000; color: #fff;
    font-family: "Roboto", "Segoe UI", Arial, sans-serif;
    overflow: hidden;
    cursor: none; /* TV'de imleç gerekmez */
}
body.mouse { cursor: default; }

video {
    position: fixed; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    background: #000;
}

/* ---------- Üst / alt overlay ---------- */
.overlay-top, .overlay-bottom {
    position: fixed; left: 0; right: 0;
    padding: 2.5vh 4vw;
    opacity: 0; pointer-events: none;
    transition: opacity .3s;
}
.overlay-top    { top: 0;    background: linear-gradient(rgba(0,0,0,.7), transparent); font-size: 3vh; }
.overlay-bottom { bottom: 0; background: linear-gradient(transparent, rgba(0,0,0,.75));
                  display: flex; align-items: center; gap: 2vw; font-size: 2.4vh; }
body.ui .overlay-top, body.ui .overlay-bottom { opacity: 1; }

#bar { flex: 1; height: .8vh; background: rgba(255,255,255,.25); border-radius: 1vh; overflow: hidden; }
#barFill { height: 100%; width: 0; background: #29b6f6; }

/* ---------- Orta ikon ---------- */
#stateIcon {
    position: fixed; top: 50%; left: 50%;
    width: 14vh; height: 14vh; margin: -7vh 0 0 -7vh;
    border-radius: 50%;
    background: rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center;
    font-size: 7vh;
    opacity: 0; transform: scale(.8);
    pointer-events: none;
}
#stateIcon.show { animation: pop .8s ease forwards; }
@keyframes pop {
    0%   { opacity: 0; transform: scale(.7); }
    20%  { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.15); }
}

/* ---------- Menü butonu (dokunmatik/mouse) ---------- */
#menuBtn {
    position: fixed; top: 2vh; right: 2vw;
    width: 6vh; height: 6vh;
    border: 0; border-radius: 50%;
    background: rgba(0,0,0,.45); color: #fff; font-size: 3vh;
    opacity: 0; transition: opacity .3s;
    cursor: pointer;
}
body.ui #menuBtn { opacity: 1; }

/* ---------- Şeffaf yan menü ---------- */
#menu {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(32vw, 560px); min-width: 320px;
    padding: 4vh 2vw;
    background: linear-gradient(to left, rgba(10,10,20,.78), rgba(10,10,20,.35));
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
    border-left: 1px solid rgba(255,255,255,.12);
    transform: translateX(0);
    transition: transform .35s cubic-bezier(.2,.8,.2,1);
    display: flex; flex-direction: column;
    z-index: 10;
}
#menu.closed { transform: translateX(105%); }

#menu h2 { font-size: 3.4vh; font-weight: 500; margin-bottom: 3vh; letter-spacing: .5px; }

#list { list-style: none; flex: 1; overflow-y: auto; scrollbar-width: none; }
#list::-webkit-scrollbar { display: none; }

#list li {
    display: flex; align-items: center; gap: 1.2vw;
    padding: 1.8vh 1.2vw; margin-bottom: 1vh;
    border-radius: 1.2vh;
    font-size: 2.6vh;
    background: rgba(255,255,255,.06);
    border: .3vh solid transparent;
    outline: none;
    cursor: pointer;
    transition: background .15s, transform .15s, border-color .15s;
}
#list li .num  { width: 3vh; opacity: .6; font-size: 2.2vh; }
#list li .name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#list li .eq   { opacity: 0; color: #29b6f6; font-size: 2vh; }

/* D-pad odağı: belirgin olmalı */
#list li:focus {
    background: rgba(41,182,246,.28);
    border-color: #29b6f6;
    transform: scale(1.03);
}
#list li.playing .eq   { opacity: 1; }
#list li.playing .name { color: #29b6f6; }
#list li.empty { cursor: default; opacity: .7; }

.hint { margin-top: 2vh; font-size: 1.9vh; opacity: .55; text-align: center; }