@font-face {
    font-family: "KfnLyrics";
    src: url("fonts/kfn-lyrics.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.kfn-dl-hidden { display: none !important; }

.kfn-noscroll, .kfn-pfs-on, .kfn-pfs-on body { overflow: hidden !important; }

.kfn-overlay {
    position: fixed; inset: 0; z-index: 999999;
    background: rgba(0, 0, 0, .8);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
.kfn-modal { width: min(1100px, 100%, calc((100vh - 140px) * 16 / 9)); }

.kfn-player {
    --kfn-active: #ffff00;
    --kfn-inactive: #ffffff;
    background: #000;
    color: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
    display: flex; flex-direction: column;
    font-family: Arial, sans-serif;
}

/* ---------- верхняя панель ---------- */

.kfn-top {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; background: #0b0f1a;
}
.kfn-title { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kfn-tracks { background: #222; color: #fff; border: 1px solid #444; border-radius: 4px; padding: 4px 6px; font-size: 13px; max-width: 45%; }
.kfn-btn {
    flex: none;
    background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 4px; width: 36px; height: 32px; cursor: pointer; font-size: 16px; line-height: 1; padding: 0;
}
.kfn-btn:hover, .kfn-btn.kfn-on { background: rgba(255, 255, 255, .18); }

/* ---------- сцена ---------- */

.kfn-stage {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #000;
    container-type: inline-size;
    text-align: center;
}
.kfn-bg { position: absolute; inset: 0; z-index: 0; isolation: isolate; }
.kfn-video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; transform-origin: center center;
}
.kfn-video.kfn-additive { mix-blend-mode: screen; mix-blend-mode: plus-lighter; }
.kfn-bgvid { opacity: 0; transition: opacity .8s ease; }
.kfn-bgvid.kfn-on { opacity: 1; }

/* затемнение под текстом, чтобы он читался на любом видео */
.kfn-stage::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; z-index: 1;
    background: linear-gradient(to top, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .35) 55%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}
.kfn-pos-center .kfn-stage::after {
    top: 0; height: auto;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .15) 70%);
}

.kfn-lyrics {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center;
    justify-content: flex-end;
    gap: .2em;
    padding: 0 3% 5%;
    line-height: 1.15;
    font-size: 6vw;   /* до расчёта в JS; дальше размер задаёт плеер по настройкам */
}
/* защита от стилей темы сайта */
.kfn-player .kfn-line, .kfn-player .kfn-syl {
    letter-spacing: normal !important;
    text-transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.kfn-player .kfn-line { font-size: inherit !important; }
.kfn-player .kfn-syl { font-size: inherit !important; line-height: inherit !important; font-family: inherit !important; }
.kfn-pos-center .kfn-lyrics { justify-content: center; padding-bottom: 0; }

.kfn-font-plugin .kfn-stage { font-family: "KfnLyrics", "Arial Black", Arial, sans-serif; }

.kfn-line {
    min-height: 1.15em;
    white-space: nowrap;
    /* чёрная обводка + тень: текст читается на светлом и тёмном фоне */
    filter:
        drop-shadow(0 0 .025em #000)
        drop-shadow(0 0 .025em #000)
        drop-shadow(0 0 .02em #000)
        drop-shadow(0 .05em .04em rgba(0, 0, 0, .9));
}

.kfn-syl {
    --p: 0%;
    background: linear-gradient(90deg, var(--kfn-active) var(--p), var(--kfn-inactive) var(--p));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.kfn-status {
    position: absolute; left: 8px; right: 8px; top: 8px; z-index: 3;
    font-size: 13px; color: #ddd; text-shadow: 0 1px 2px #000;
}

.kfn-audio { width: 100%; display: block; background: #000; }

/* ---------- полноэкранный режим ---------- */

.kfn-player:fullscreen, .kfn-player:-webkit-full-screen {
    width: 100%; height: 100%; border-radius: 0;
}
.kfn-player:fullscreen .kfn-stage, .kfn-player:-webkit-full-screen .kfn-stage { flex: 1; aspect-ratio: auto; min-height: 0; }

/* «псевдо» полноэкранный режим (iPhone и браузеры без Fullscreen API) */
.kfn-player.kfn-pfs {
    position: fixed; z-index: 2147483647;
    top: 0; left: 0;
    width: 100vw; height: 100vh; height: 100dvh;
    border-radius: 0; box-shadow: none;
}
.kfn-player.kfn-pfs .kfn-stage { flex: 1; aspect-ratio: auto; min-height: 0; }

/* телефон в вертикальном положении — разворачиваем картинку горизонтально */
@media (orientation: portrait) {
    .kfn-player.kfn-pfs {
        width: 100vh; width: 100dvh;
        height: 100vw;
        transform-origin: top left;
        transform: translateX(100vw) rotate(90deg);
    }
}

/* ---------- нет доступа ---------- */

.kfn-denied {
    position: absolute; inset: 0; z-index: 4;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
    background: rgba(0, 0, 0, .6); padding: 24px;
    font-family: Arial, sans-serif;
}
.kfn-denied-text { font-size: 22px; font-weight: 600; }
.kfn-denied-btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.kfn-cta {
    display: inline-block; padding: 10px 22px; border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, .6); color: #fff !important; text-decoration: none !important; font-size: 16px;
}
.kfn-cta-main { background: #ff3b4e; border-color: #ff3b4e; }
.kfn-cta:hover { filter: brightness(1.1); }

/* ---------- мобильные ---------- */

@media (max-width: 600px) {
    .kfn-overlay { padding: 0; }
    .kfn-modal { width: 100%; }
    .kfn-player { border-radius: 0; }
    .kfn-title { font-size: 13px; }
    .kfn-btn { width: 40px; height: 36px; font-size: 18px; }
}