/* /Pages/about.cshtml.rz.scp.css */
/* CSS for about view */
/* =========================================
   ABOUT
========================================= */

.about-title[b-twl2nn60om] {
    max-width: 1100px;
    margin: 100px auto 60px;
    padding: 0 25px;
    position: relative;
}


    /* маленькая красная метка */

    .about-title[b-twl2nn60om]::before {
        content: "";
        position: absolute;
        left: 25px;
        top: -20px;
        width: 35px;
        height: 1px;
        background: #8f0000;
    }


.about-text[b-twl2nn60om] {
    color: #ddd;
    font-size: 32px;
    font-weight: 500;
    letter-spacing: 2px;
}


.muted-about[b-twl2nn60om] {
    margin-top: 6px;
    color: #555;
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
}


/* =========================================
   CONTAINER
========================================= */

.about-container[b-twl2nn60om] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 25px 120px;
}


/* =========================================
   PART
========================================= */

.about-part[b-twl2nn60om] {
    position: relative;
    display: grid;
    grid-template-columns: 70px 220px minmax(250px, 1fr) 280px;
    align-items: center;
    gap: 30px;
    min-height: 330px;
    padding: 45px 0;
    border-top: 1px solid rgba(255,255,255,.07);
}


    .about-part:last-child[b-twl2nn60om] {
        border-bottom: 1px solid rgba(255,255,255,.07);
    }


/* =========================================
   NUMBER
========================================= */

.about-number[b-twl2nn60om] {
    align-self: start;
    padding-top: 5px;
    color: #8f0000;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}


/* =========================================
   TITLE
========================================= */

.title-card[b-twl2nn60om] {
    color: #ddd;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 1.3;
}


    /* красная линия */

    .title-card[b-twl2nn60om]::after {
        content: "";
        display: block;
        width: 25px;
        height: 1px;
        margin-top: 12px;
        background: #8f0000;
        transition: width .3s ease;
    }


.about-part:hover .title-card[b-twl2nn60om]::after {
    width: 50px;
}


/* =========================================
   TEXT
========================================= */

.text-card[b-twl2nn60om] {
    max-width: 400px;
    color: #666;
    font-size: 12px;
    line-height: 1.8;
}


    .text-card p[b-twl2nn60om] {
        margin: 0 0 12px;
    }


        .text-card p:last-of-type[b-twl2nn60om] {
            margin-bottom: 15px;
        }


/* =========================================
   TAG
========================================= */

.card-tag[b-twl2nn60om] {
    display: inline-block;
    margin-top: 3px;
    color: #555;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2px;
    transition: color .25s ease;
}


.about-part:hover .card-tag[b-twl2nn60om] {
    color: #8f0000;
}


/* =========================================
   IMAGE
========================================= */

.image-card[b-twl2nn60om] {
    position: relative;
    width: 280px;
    height: 210px;
    overflow: hidden;
    background: #080808;
    border: 1px solid rgba(255,255,255,.08);
    transition: transform .4s ease, border-color .4s ease;
}


    .image-card img[b-twl2nn60om] {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        filter: grayscale(70%) brightness(.65);
        transition: transform .6s ease, filter .6s ease;
    }


    .image-card[b-twl2nn60om]::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 135deg, rgba(120,0,0,.15), transparent 55% );
        pointer-events: none;
    }


.about-part:hover .image-card[b-twl2nn60om] {
    border-color: rgba(143,0,0,.5);
    transform: translateY(-5px);
}


    .about-part:hover .image-card img[b-twl2nn60om] {
        transform: scale(1.05);
        filter: grayscale(20%) brightness(.8);
    }


/* =========================================
   IMAGE LABEL
========================================= */

.image-label[b-twl2nn60om] {
    position: absolute;
    left: 12px;
    bottom: 10px;
    z-index: 2;
    color: rgba(255,255,255,.55);
    font-size: 8px;
    letter-spacing: 2px;
}


/* =========================================
   CURRENT
========================================= */

.about-part.current[b-twl2nn60om] {
    background: linear-gradient( 90deg, rgba(80,0,0,.04), transparent 60% );
}


.current .title-card[b-twl2nn60om] {
    color: #eee;
}


.current .text-card[b-twl2nn60om] {
    color: #777;
}


.accent-text[b-twl2nn60om] {
    color: #999 !important;
    font-style: italic;
}

/* =========================================
   REVERSE
========================================= */

.about-part.reverse[b-twl2nn60om] {
    grid-template-columns: 70px 280px minmax(250px, 1fr) 220px;
}


    .about-part.reverse .image-card[b-twl2nn60om] {
        grid-column: 2;
        grid-row: 1;
    }


    .about-part.reverse .title-card[b-twl2nn60om] {
        grid-column: 4;
        grid-row: 1;
    }


    .about-part.reverse .text-card[b-twl2nn60om] {
        grid-column: 3;
        grid-row: 1;
    }


    .about-part.reverse .about-number[b-twl2nn60om] {
        grid-column: 1;
        grid-row: 1;
    }

@media (max-width: 700px) {

    .about-title[b-twl2nn60om] {
        margin-top: 60px;
        margin-bottom: 40px;
        padding: 0 18px;
    }


        .about-title[b-twl2nn60om]::before {
            left: 18px;
        }


    .about-text[b-twl2nn60om] {
        font-size: 25px;
        letter-spacing: 1px;
    }


    .muted-about[b-twl2nn60om] {
        font-size: 8px;
        letter-spacing: 2px;
    }


    .about-container[b-twl2nn60om] {
        padding: 0 18px 80px;
    }


    /* =========================
       PART
    ========================= */

    .about-part[b-twl2nn60om],
    .about-part.reverse[b-twl2nn60om] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        min-height: auto;
        padding: 35px 0;
    }


    /* =========================
       NUMBER
    ========================= */

    .about-number[b-twl2nn60om] {
        padding: 0;
        font-size: 9px;
    }


    /* =========================
       TITLE
    ========================= */

    .title-card[b-twl2nn60om],
    .about-part.reverse .title-card[b-twl2nn60om] {
        order: 2;
        font-size: 18px;
    }


    /* =========================
       TEXT
    ========================= */

    .text-card[b-twl2nn60om],
    .about-part.reverse .text-card[b-twl2nn60om] {
        order: 3;
        max-width: none;
        font-size: 11px;
        line-height: 1.75;
    }


    /* =========================
       IMAGE
    ========================= */

    .image-card[b-twl2nn60om],
    .about-part.reverse .image-card[b-twl2nn60om] {
        order: 4;
        width: 100%;
        height: 220px;
        margin-top: 10px;
    }


    /* =========================
       NUMBER
    ========================= */

    .about-number[b-twl2nn60om] {
        order: 1;
    }


    /* =========================
       HOVER
    ========================= */

    .about-part:hover .image-card[b-twl2nn60om] {
        transform: none;
    }


        .about-part:hover .image-card img[b-twl2nn60om] {
            transform: none;
            filter: grayscale(50%) brightness(.7);
        }
}

@media (max-width: 400px) {

    .about-text[b-twl2nn60om] {
        font-size: 22px;
    }


    .image-card[b-twl2nn60om] {
        height: 190px;
    }


    .text-card[b-twl2nn60om] {
        font-size: 10.5px;
    }
}
/* /Pages/Album.cshtml.rz.scp.css */
/* CSS for Album view */
/* =========================================================
   ROCKHONEST
   ALBUM
   ========================================================= */

.album-page[b-uwsqsmqf5t] {
    width: min(1100px, calc(100% - 40px));
    margin: 0 auto;
    padding: 60px 0 120px;
    color: #d0d0d0;
}


/* =========================================================
   HEADER
   ========================================================= */

.album-header[b-uwsqsmqf5t] {
    position: relative;
    max-width: 700px;
    padding-left: 24px;
    margin-bottom: 70px;
}


    .album-header[b-uwsqsmqf5t]::before {
        content: "";
        position: absolute;
        left: 0;
        top: 4px;
        bottom: 4px;
        width: 2px;
        background: linear-gradient( to bottom, transparent, #8f0000 20%, #8f0000 80%, transparent );
    }


/* Назад */

.album-back[b-uwsqsmqf5t] {
    margin-bottom: 35px;
}


    .album-back a[b-uwsqsmqf5t] {
        color: #555;
        text-decoration: none;
        font-size: 8px;
        letter-spacing: 2px;
        transition: color .2s ease;
    }


        .album-back a:hover[b-uwsqsmqf5t] {
            color: #aaa;
        }


/* Label */

.album-meta[b-uwsqsmqf5t] {
    margin-bottom: 12px;
    color: #8f0000;
    font-size: 8px;
    letter-spacing: 4px;
    font-weight: 700;
}


.album-header h1[b-uwsqsmqf5t] {
    margin: 0;
    color: #ddd;
    font-size: clamp(40px, 7vw, 72px);
    line-height: 1;
    font-weight: 300;
    letter-spacing: -3px;
}


.album-description[b-uwsqsmqf5t] {
    max-width: 560px;
    margin: 25px 0 25px;
    color: #555;
    font-size: 11px;
    line-height: 1.8;
}


/* Информация */

.album-info[b-uwsqsmqf5t] {
    display: flex;
    gap: 25px;
    color: #3f3f3f;
    font-size: 7px;
    letter-spacing: 2px;
}


/* =========================================================
   GALLERY
   ========================================================= */

.album-gallery[b-uwsqsmqf5t] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 280px;
    gap: 8px;
}


/* Фото */

.album-photo[b-uwsqsmqf5t] {
    position: relative;
    overflow: hidden;
    background: #080808;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,.04);
    transition: border-color .3s ease;
}


    .album-photo:hover[b-uwsqsmqf5t] {
        border-color: rgba(143,0,0,.35);
    }


    .album-photo img[b-uwsqsmqf5t] {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        filter: grayscale(15%) brightness(.78);
        transform: scale(1);
        transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .4s ease;
    }


    .album-photo:hover img[b-uwsqsmqf5t] {
        transform: scale(1.05);
        filter: grayscale(0%) brightness(.95);
    }


/* =========================================================
   BIG PHOTO
   ========================================================= */

.album-photo-large[b-uwsqsmqf5t] {
    grid-column: span 2;
    grid-row: span 2;
}


/* Затемнение */

.album-photo[b-uwsqsmqf5t]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient( to top, rgba(0,0,0,.65), transparent 35% );
    opacity: 0;
    transition: opacity .3s ease;
}


.album-photo:hover[b-uwsqsmqf5t]::after {
    opacity: 1;
}


/* Номер */

.photo-number[b-uwsqsmqf5t] {
    position: absolute;
    left: 12px;
    bottom: 10px;
    z-index: 2;
    color: #aaa;
    font-size: 7px;
    letter-spacing: 2px;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity .3s ease, transform .3s ease;
}


.album-photo:hover .photo-number[b-uwsqsmqf5t] {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   FOOTER
   ========================================================= */

.album-footer[b-uwsqsmqf5t] {
    display: flex;
    gap: 25px;
    margin-top: 100px;
    padding: 40px 0;
}


.album-footer-line[b-uwsqsmqf5t] {
    width: 2px;
    min-width: 2px;
    background: linear-gradient( to bottom, #8f0000, transparent );
}


.album-footer span[b-uwsqsmqf5t] {
    color: #8f0000;
    font-size: 7px;
    letter-spacing: 3px;
}


.album-footer h2[b-uwsqsmqf5t] {
    max-width: 500px;
    margin: 15px 0 20px;
    color: #aaa;
    font-size: 30px;
    font-weight: 300;
    line-height: 1.25;
}


.album-footer p[b-uwsqsmqf5t] {
    max-width: 500px;
    margin: 0;
    color: #4d4d4d;
    font-size: 10px;
    line-height: 1.8;
}


/* =========================================================
   LIGHTBOX
   ========================================================= */

.album-lightbox[b-uwsqsmqf5t] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    background: rgba(0,0,0,.94);
    backdrop-filter: blur(15px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}


    .album-lightbox.active[b-uwsqsmqf5t] {
        opacity: 1;
        pointer-events: auto;
    }


.lightbox-content[b-uwsqsmqf5t] {
    max-width: min(90vw, 1100px);
    max-height: 90vh;
    text-align: center;
}


    .lightbox-content img[b-uwsqsmqf5t] {
        max-width: 100%;
        max-height: 82vh;
        display: block;
        object-fit: contain;
        box-shadow: 0 20px 80px rgba(0,0,0,.6);
    }


.lightbox-counter[b-uwsqsmqf5t] {
    margin-top: 12px;
    color: #555;
    font-size: 8px;
    letter-spacing: 3px;
}


/* Кнопки */

.lightbox-close[b-uwsqsmqf5t],
.lightbox-prev[b-uwsqsmqf5t],
.lightbox-next[b-uwsqsmqf5t] {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 0 !important;
    color: #666 !important;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}


    .lightbox-close:hover[b-uwsqsmqf5t],
    .lightbox-prev:hover[b-uwsqsmqf5t],
    .lightbox-next:hover[b-uwsqsmqf5t] {
        color: #ddd !important;
        border-color: rgba(143,0,0,.5) !important;
        background: rgba(143,0,0,.08) !important;
    }


.lightbox-close[b-uwsqsmqf5t] {
    top: 25px;
    right: 25px;
    font-size: 22px;
}


.lightbox-prev[b-uwsqsmqf5t] {
    left: 25px;
    top: 50%;
    transform: translateY(-50%);
}


.lightbox-next[b-uwsqsmqf5t] {
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .album-page[b-uwsqsmqf5t] {
        width: calc(100% - 24px);
        padding: 40px 0 80px;
    }


    .album-header[b-uwsqsmqf5t] {
        padding-left: 17px;
        margin-bottom: 45px;
    }


        .album-header h1[b-uwsqsmqf5t] {
            font-size: 42px;
            letter-spacing: -2px;
        }


    .album-description[b-uwsqsmqf5t] {
        font-size: 10px;
        line-height: 1.7;
    }


    .album-info[b-uwsqsmqf5t] {
        gap: 12px;
        flex-wrap: wrap;
    }


    /* Галерея */

    .album-gallery[b-uwsqsmqf5t] {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 180px;
        gap: 5px;
    }


    .album-photo-large[b-uwsqsmqf5t] {
        grid-column: span 2;
        grid-row: span 2;
    }


    .photo-number[b-uwsqsmqf5t] {
        opacity: 1;
        transform: none;
        left: 8px;
        bottom: 7px;
        font-size: 6px;
    }


    .album-photo[b-uwsqsmqf5t]::after {
        opacity: 1;
    }


    /* Footer */

    .album-footer[b-uwsqsmqf5t] {
        margin-top: 65px;
        padding: 20px 0;
    }


        .album-footer h2[b-uwsqsmqf5t] {
            font-size: 25px;
        }


    /* Lightbox */

    .album-lightbox[b-uwsqsmqf5t] {
        padding: 15px;
    }


    .lightbox-close[b-uwsqsmqf5t] {
        top: 15px;
        right: 15px;
    }


    .lightbox-prev[b-uwsqsmqf5t] {
        left: 10px;
    }


    .lightbox-next[b-uwsqsmqf5t] {
        right: 10px;
    }


    .lightbox-content[b-uwsqsmqf5t] {
        max-width: calc(100vw - 40px);
    }


        .lightbox-content img[b-uwsqsmqf5t] {
            max-height: 75vh;
        }
}
/* /Pages/AlbumLife.cshtml.rz.scp.css */
/* CSS for Album view */
/* =========================================================
   ROCKHONEST
   ALBUM
   ========================================================= */

.album-page[b-xq3xegfzkm] {
    width: min(1100px, calc(100% - 40px));
    margin: 0 auto;
    padding: 60px 0 120px;
    color: #d0d0d0;
}


/* =========================================================
   HEADER
   ========================================================= */

.album-header[b-xq3xegfzkm] {
    position: relative;
    max-width: 700px;
    padding-left: 24px;
    margin-bottom: 70px;
}


    .album-header[b-xq3xegfzkm]::before {
        content: "";
        position: absolute;
        left: 0;
        top: 4px;
        bottom: 4px;
        width: 2px;
        background: linear-gradient( to bottom, transparent, #8f0000 20%, #8f0000 80%, transparent );
    }


/* Назад */

.album-back[b-xq3xegfzkm] {
    margin-bottom: 35px;
}


    .album-back a[b-xq3xegfzkm] {
        color: #555;
        text-decoration: none;
        font-size: 8px;
        letter-spacing: 2px;
        transition: color .2s ease;
    }


        .album-back a:hover[b-xq3xegfzkm] {
            color: #aaa;
        }


/* Label */

.album-meta[b-xq3xegfzkm] {
    margin-bottom: 12px;
    color: #8f0000;
    font-size: 8px;
    letter-spacing: 4px;
    font-weight: 700;
}


.album-header h1[b-xq3xegfzkm] {
    margin: 0;
    color: #ddd;
    font-size: clamp(40px, 7vw, 72px);
    line-height: 1;
    font-weight: 300;
    letter-spacing: -3px;
}


.album-description[b-xq3xegfzkm] {
    max-width: 560px;
    margin: 25px 0 25px;
    color: #555;
    font-size: 11px;
    line-height: 1.8;
}


/* Информация */

.album-info[b-xq3xegfzkm] {
    display: flex;
    gap: 25px;
    color: #3f3f3f;
    font-size: 7px;
    letter-spacing: 2px;
}


/* =========================================================
   GALLERY
   ========================================================= */

.album-gallery[b-xq3xegfzkm] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 280px;
    gap: 8px;
}


/* Фото */

.album-photo[b-xq3xegfzkm] {
    position: relative;
    overflow: hidden;
    background: #080808;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,.04);
    transition: border-color .3s ease;
}


    .album-photo:hover[b-xq3xegfzkm] {
        border-color: rgba(143,0,0,.35);
    }


    .album-photo img[b-xq3xegfzkm] {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        filter: grayscale(15%) brightness(.78);
        transform: scale(1);
        transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .4s ease;
    }


    .album-photo:hover img[b-xq3xegfzkm] {
        transform: scale(1.05);
        filter: grayscale(0%) brightness(.95);
    }


/* =========================================================
   BIG PHOTO
   ========================================================= */

.album-photo-large[b-xq3xegfzkm] {
    grid-column: span 2;
    grid-row: span 2;
}


/* Затемнение */

.album-photo[b-xq3xegfzkm]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient( to top, rgba(0,0,0,.65), transparent 35% );
    opacity: 0;
    transition: opacity .3s ease;
}


.album-photo:hover[b-xq3xegfzkm]::after {
    opacity: 1;
}


/* Номер */

.photo-number[b-xq3xegfzkm] {
    position: absolute;
    left: 12px;
    bottom: 10px;
    z-index: 2;
    color: #aaa;
    font-size: 7px;
    letter-spacing: 2px;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity .3s ease, transform .3s ease;
}


.album-photo:hover .photo-number[b-xq3xegfzkm] {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   FOOTER
   ========================================================= */

.album-footer[b-xq3xegfzkm] {
    display: flex;
    gap: 25px;
    margin-top: 100px;
    padding: 40px 0;
}


.album-footer-line[b-xq3xegfzkm] {
    width: 2px;
    min-width: 2px;
    background: linear-gradient( to bottom, #8f0000, transparent );
}


.album-footer span[b-xq3xegfzkm] {
    color: #8f0000;
    font-size: 7px;
    letter-spacing: 3px;
}


.album-footer h2[b-xq3xegfzkm] {
    max-width: 500px;
    margin: 15px 0 20px;
    color: #aaa;
    font-size: 30px;
    font-weight: 300;
    line-height: 1.25;
}


.album-footer p[b-xq3xegfzkm] {
    max-width: 500px;
    margin: 0;
    color: #4d4d4d;
    font-size: 10px;
    line-height: 1.8;
}


/* =========================================================
   LIGHTBOX
   ========================================================= */

.album-lightbox[b-xq3xegfzkm] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    background: rgba(0,0,0,.94);
    backdrop-filter: blur(15px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}


    .album-lightbox.active[b-xq3xegfzkm] {
        opacity: 1;
        pointer-events: auto;
    }


.lightbox-content[b-xq3xegfzkm] {
    max-width: min(90vw, 1100px);
    max-height: 90vh;
    text-align: center;
}


    .lightbox-content img[b-xq3xegfzkm] {
        max-width: 100%;
        max-height: 82vh;
        display: block;
        object-fit: contain;
        box-shadow: 0 20px 80px rgba(0,0,0,.6);
    }


.lightbox-counter[b-xq3xegfzkm] {
    margin-top: 12px;
    color: #555;
    font-size: 8px;
    letter-spacing: 3px;
}


/* Кнопки */

.lightbox-close[b-xq3xegfzkm],
.lightbox-prev[b-xq3xegfzkm],
.lightbox-next[b-xq3xegfzkm] {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 0 !important;
    color: #666 !important;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}


    .lightbox-close:hover[b-xq3xegfzkm],
    .lightbox-prev:hover[b-xq3xegfzkm],
    .lightbox-next:hover[b-xq3xegfzkm] {
        color: #ddd !important;
        border-color: rgba(143,0,0,.5) !important;
        background: rgba(143,0,0,.08) !important;
    }


.lightbox-close[b-xq3xegfzkm] {
    top: 25px;
    right: 25px;
    font-size: 22px;
}


.lightbox-prev[b-xq3xegfzkm] {
    left: 25px;
    top: 50%;
    transform: translateY(-50%);
}


.lightbox-next[b-xq3xegfzkm] {
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .album-page[b-xq3xegfzkm] {
        width: calc(100% - 24px);
        padding: 40px 0 80px;
    }


    .album-header[b-xq3xegfzkm] {
        padding-left: 17px;
        margin-bottom: 45px;
    }


        .album-header h1[b-xq3xegfzkm] {
            font-size: 42px;
            letter-spacing: -2px;
        }


    .album-description[b-xq3xegfzkm] {
        font-size: 10px;
        line-height: 1.7;
    }


    .album-info[b-xq3xegfzkm] {
        gap: 12px;
        flex-wrap: wrap;
    }


    /* Галерея */

    .album-gallery[b-xq3xegfzkm] {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 180px;
        gap: 5px;
    }


    .album-photo-large[b-xq3xegfzkm] {
        grid-column: span 2;
        grid-row: span 2;
    }


    .photo-number[b-xq3xegfzkm] {
        opacity: 1;
        transform: none;
        left: 8px;
        bottom: 7px;
        font-size: 6px;
    }


    .album-photo[b-xq3xegfzkm]::after {
        opacity: 1;
    }


    /* Footer */

    .album-footer[b-xq3xegfzkm] {
        margin-top: 65px;
        padding: 20px 0;
    }


        .album-footer h2[b-xq3xegfzkm] {
            font-size: 25px;
        }


    /* Lightbox */

    .album-lightbox[b-xq3xegfzkm] {
        padding: 15px;
    }


    .lightbox-close[b-xq3xegfzkm] {
        top: 15px;
        right: 15px;
    }


    .lightbox-prev[b-xq3xegfzkm] {
        left: 10px;
    }


    .lightbox-next[b-xq3xegfzkm] {
        right: 10px;
    }


    .lightbox-content[b-xq3xegfzkm] {
        max-width: calc(100vw - 40px);
    }


        .lightbox-content img[b-xq3xegfzkm] {
            max-height: 75vh;
        }
}
/* /Pages/AlbumTravel.cshtml.rz.scp.css */
/* CSS for Album view */
/* =========================================================
   ROCKHONEST
   ALBUM
   ========================================================= */

.album-page[b-9jwmauoylc] {
    width: min(1100px, calc(100% - 40px));
    margin: 0 auto;
    padding: 60px 0 120px;
    color: #d0d0d0;
}


/* =========================================================
   HEADER
   ========================================================= */

.album-header[b-9jwmauoylc] {
    position: relative;
    max-width: 700px;
    padding-left: 24px;
    margin-bottom: 70px;
}


    .album-header[b-9jwmauoylc]::before {
        content: "";
        position: absolute;
        left: 0;
        top: 4px;
        bottom: 4px;
        width: 2px;
        background: linear-gradient( to bottom, transparent, #8f0000 20%, #8f0000 80%, transparent );
    }


/* Назад */

.album-back[b-9jwmauoylc] {
    margin-bottom: 35px;
}


    .album-back a[b-9jwmauoylc] {
        color: #555;
        text-decoration: none;
        font-size: 8px;
        letter-spacing: 2px;
        transition: color .2s ease;
    }


        .album-back a:hover[b-9jwmauoylc] {
            color: #aaa;
        }


/* Label */

.album-meta[b-9jwmauoylc] {
    margin-bottom: 12px;
    color: #8f0000;
    font-size: 8px;
    letter-spacing: 4px;
    font-weight: 700;
}


.album-header h1[b-9jwmauoylc] {
    margin: 0;
    color: #ddd;
    font-size: clamp(40px, 7vw, 72px);
    line-height: 1;
    font-weight: 300;
    letter-spacing: -3px;
}


.album-description[b-9jwmauoylc] {
    max-width: 560px;
    margin: 25px 0 25px;
    color: #555;
    font-size: 11px;
    line-height: 1.8;
}


/* Информация */

.album-info[b-9jwmauoylc] {
    display: flex;
    gap: 25px;
    color: #3f3f3f;
    font-size: 7px;
    letter-spacing: 2px;
}


/* =========================================================
   GALLERY
   ========================================================= */

.album-gallery[b-9jwmauoylc] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 280px;
    gap: 8px;
}


/* Фото */

.album-photo[b-9jwmauoylc] {
    position: relative;
    overflow: hidden;
    background: #080808;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,.04);
    transition: border-color .3s ease;
}


    .album-photo:hover[b-9jwmauoylc] {
        border-color: rgba(143,0,0,.35);
    }


    .album-photo img[b-9jwmauoylc] {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        filter: grayscale(15%) brightness(.78);
        transform: scale(1);
        transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .4s ease;
    }


    .album-photo:hover img[b-9jwmauoylc] {
        transform: scale(1.05);
        filter: grayscale(0%) brightness(.95);
    }


/* =========================================================
   BIG PHOTO
   ========================================================= */

.album-photo-large[b-9jwmauoylc] {
    grid-column: span 2;
    grid-row: span 2;
}


/* Затемнение */

.album-photo[b-9jwmauoylc]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient( to top, rgba(0,0,0,.65), transparent 35% );
    opacity: 0;
    transition: opacity .3s ease;
}


.album-photo:hover[b-9jwmauoylc]::after {
    opacity: 1;
}


/* Номер */

.photo-number[b-9jwmauoylc] {
    position: absolute;
    left: 12px;
    bottom: 10px;
    z-index: 2;
    color: #aaa;
    font-size: 7px;
    letter-spacing: 2px;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity .3s ease, transform .3s ease;
}


.album-photo:hover .photo-number[b-9jwmauoylc] {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   FOOTER
   ========================================================= */

.album-footer[b-9jwmauoylc] {
    display: flex;
    gap: 25px;
    margin-top: 100px;
    padding: 40px 0;
}


.album-footer-line[b-9jwmauoylc] {
    width: 2px;
    min-width: 2px;
    background: linear-gradient( to bottom, #8f0000, transparent );
}


.album-footer span[b-9jwmauoylc] {
    color: #8f0000;
    font-size: 7px;
    letter-spacing: 3px;
}


.album-footer h2[b-9jwmauoylc] {
    max-width: 500px;
    margin: 15px 0 20px;
    color: #aaa;
    font-size: 30px;
    font-weight: 300;
    line-height: 1.25;
}


.album-footer p[b-9jwmauoylc] {
    max-width: 500px;
    margin: 0;
    color: #4d4d4d;
    font-size: 10px;
    line-height: 1.8;
}


/* =========================================================
   LIGHTBOX
   ========================================================= */

.album-lightbox[b-9jwmauoylc] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    background: rgba(0,0,0,.94);
    backdrop-filter: blur(15px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}


    .album-lightbox.active[b-9jwmauoylc] {
        opacity: 1;
        pointer-events: auto;
    }


.lightbox-content[b-9jwmauoylc] {
    max-width: min(90vw, 1100px);
    max-height: 90vh;
    text-align: center;
}


    .lightbox-content img[b-9jwmauoylc] {
        max-width: 100%;
        max-height: 82vh;
        display: block;
        object-fit: contain;
        box-shadow: 0 20px 80px rgba(0,0,0,.6);
    }


.lightbox-counter[b-9jwmauoylc] {
    margin-top: 12px;
    color: #555;
    font-size: 8px;
    letter-spacing: 3px;
}


/* Кнопки */

.lightbox-close[b-9jwmauoylc],
.lightbox-prev[b-9jwmauoylc],
.lightbox-next[b-9jwmauoylc] {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 0 !important;
    color: #666 !important;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}


    .lightbox-close:hover[b-9jwmauoylc],
    .lightbox-prev:hover[b-9jwmauoylc],
    .lightbox-next:hover[b-9jwmauoylc] {
        color: #ddd !important;
        border-color: rgba(143,0,0,.5) !important;
        background: rgba(143,0,0,.08) !important;
    }


.lightbox-close[b-9jwmauoylc] {
    top: 25px;
    right: 25px;
    font-size: 22px;
}


.lightbox-prev[b-9jwmauoylc] {
    left: 25px;
    top: 50%;
    transform: translateY(-50%);
}


.lightbox-next[b-9jwmauoylc] {
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .album-page[b-9jwmauoylc] {
        width: calc(100% - 24px);
        padding: 40px 0 80px;
    }


    .album-header[b-9jwmauoylc] {
        padding-left: 17px;
        margin-bottom: 45px;
    }


        .album-header h1[b-9jwmauoylc] {
            font-size: 42px;
            letter-spacing: -2px;
        }


    .album-description[b-9jwmauoylc] {
        font-size: 10px;
        line-height: 1.7;
    }


    .album-info[b-9jwmauoylc] {
        gap: 12px;
        flex-wrap: wrap;
    }


    /* Галерея */

    .album-gallery[b-9jwmauoylc] {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 180px;
        gap: 5px;
    }


    .album-photo-large[b-9jwmauoylc] {
        grid-column: span 2;
        grid-row: span 2;
    }


    .photo-number[b-9jwmauoylc] {
        opacity: 1;
        transform: none;
        left: 8px;
        bottom: 7px;
        font-size: 6px;
    }


    .album-photo[b-9jwmauoylc]::after {
        opacity: 1;
    }


    /* Footer */

    .album-footer[b-9jwmauoylc] {
        margin-top: 65px;
        padding: 20px 0;
    }


        .album-footer h2[b-9jwmauoylc] {
            font-size: 25px;
        }


    /* Lightbox */

    .album-lightbox[b-9jwmauoylc] {
        padding: 15px;
    }


    .lightbox-close[b-9jwmauoylc] {
        top: 15px;
        right: 15px;
    }


    .lightbox-prev[b-9jwmauoylc] {
        left: 10px;
    }


    .lightbox-next[b-9jwmauoylc] {
        right: 10px;
    }


    .lightbox-content[b-9jwmauoylc] {
        max-width: calc(100vw - 40px);
    }


        .lightbox-content img[b-9jwmauoylc] {
            max-height: 75vh;
        }
}
/* /Pages/Index.cshtml.rz.scp.css */
/* CSS for Index view */
.main-text[b-7djaijnnf7] {
    text-align: center;
    font-size: 50px;
}

.muted-main[b-7djaijnnf7] {
    text-align: center;
    color: grey;
    margin-top: 15px;
}

.main-title[b-7djaijnnf7] {
    margin-top: 24px;
    margin-bottom: 24px;
}



/* =========================================
   PHOTO SECTION
========================================= */

.photo-container[b-7djaijnnf7] {
    width: 100%;
    max-width: 800px;
    margin: 80px auto;
    padding: 0 25px;
}


/* =========================================
   TITLE
========================================= */

.photo-title[b-7djaijnnf7] {
    margin-bottom: 50px;
}

    .photo-title span[b-7djaijnnf7] {
        display: block;
        color: #8f0000;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 3px;
    }

    .photo-title h2[b-7djaijnnf7] {
        margin: 5px 0 0;
        color: #ddd;
        font-size: 28px;
        font-weight: 500;
        letter-spacing: 2px;
    }


/* =========================================
   GRID
========================================= */

.albums-grid[b-7djaijnnf7] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}


/* =========================================
   ALBUM CARD
========================================= */

.album-card[b-7djaijnnf7] {
    min-width: 0;
    color: #fff;
    cursor: pointer;
}


/* =========================================
   IMAGES AREA
========================================= */

.album-images[b-7djaijnnf7] {
    position: relative;
    width: 100%;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* =========================================
   IMAGE
========================================= */

.album-image[b-7djaijnnf7] {
    position: absolute;
    width: 190px;
    height: 250px;
    overflow: hidden;
    background: #080808;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 2px;
    transition: transform .55s cubic-bezier(.2,.8,.2,1), filter .45s ease, box-shadow .45s ease;
}


    /* =========================================
   MEDIA
========================================= */

    .album-image img[b-7djaijnnf7],
    .album-image video[b-7djaijnnf7] {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


    /* =========================================
   DARK OVERLAY
========================================= */

    .album-image[b-7djaijnnf7]::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient( 180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.35) );
    }


/* =========================================
   LEFT
========================================= */

.image-left[b-7djaijnnf7] {
    z-index: 2;
    transform: rotate(-6deg) translateX(-3px);
    filter: brightness(.65);
}


/* =========================================
   MAIN
========================================= */

.image-main[b-7djaijnnf7] {
    z-index: 3;
    transform: rotate(0);
    box-shadow: 0 15px 35px rgba(0,0,0,.4);
}


/* =========================================
   RIGHT
========================================= */

.image-right[b-7djaijnnf7] {
    z-index: 1;
    transform: rotate(6deg) translateX(3px);
    filter: brightness(.55);
}


/* =========================================
   HOVER
========================================= */

.album-card:hover .image-main[b-7djaijnnf7] {
    transform: translateY(-8px);
    box-shadow: 0 20px 45px rgba(0,0,0,.65);
}


.album-card:hover .image-left[b-7djaijnnf7] {
    transform: rotate(-15deg) translateX(-65px) translateY(7px);
    filter: brightness(.82);
}


.album-card:hover .image-right[b-7djaijnnf7] {
    transform: rotate(15deg) translateX(65px) translateY(7px);
    filter: brightness(.72);
}


/* =========================================
   RED ACCENT
========================================= */

.album-card:hover .image-main[b-7djaijnnf7]::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    z-index: 5;
    background: #8f0000;
}


/* =========================================
   ALBUM INFO
========================================= */

.album-info[b-7djaijnnf7] {
    padding: 0 4px;
    margin-top: 5px;
}


/* =========================================
   META
========================================= */

.album-meta[b-7djaijnnf7] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #4d4d4d;
}

    .album-meta span:first-child[b-7djaijnnf7] {
        color: #8f0000;
    }


/* =========================================
   TITLE
========================================= */

.album-info h3[b-7djaijnnf7] {
    margin: 0;
    color: #d5d5d5;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
}


/* =========================================
   DESCRIPTION
========================================= */

.album-info p[b-7djaijnnf7] {
    margin: 4px 0 0;
    color: #555;
    font-size: 10px;
    line-height: 1.5;
}

@media (max-width: 900px) {

    .albums-grid[b-7djaijnnf7] {
        grid-template-columns: repeat(2, 1fr);
        gap: 45px 20px;
    }

    .album-image[b-7djaijnnf7] {
        width: 170px;
        height: 230px;
    }

    .album-images[b-7djaijnnf7] {
        height: 280px;
    }

    .album-card:hover .image-left[b-7djaijnnf7] {
        transform: rotate(-14deg) translateX(-55px) translateY(6px);
    }

    .album-card:hover .image-right[b-7djaijnnf7] {
        transform: rotate(14deg) translateX(55px) translateY(6px);
    }
}

@media (max-width: 600px) {

    .photo-container[b-7djaijnnf7] {
        margin: 50px auto;
        padding: 0 18px;
    }


    .photo-title[b-7djaijnnf7] {
        margin-bottom: 35px;
    }


        .photo-title h2[b-7djaijnnf7] {
            font-size: 23px;
        }


    .albums-grid[b-7djaijnnf7] {
        grid-template-columns: 1fr;
        gap: 55px;
    }


    .album-card[b-7djaijnnf7] {
        width: 100%;
        max-width: 270px;
        margin: 0 auto;
    }


    .album-images[b-7djaijnnf7] {
        width: 270px;
        height: 285px;
    }


    .album-image[b-7djaijnnf7] {
        width: 185px;
        height: 235px;
    }


    /* Раскрытие по классу open */

    .album-card.open .image-main[b-7djaijnnf7] {
        transform: translateY(-7px);
    }


    .album-card.open .image-left[b-7djaijnnf7] {
        transform: rotate(-14deg) translateX(-55px) translateY(6px);
        filter: brightness(.82);
    }


    .album-card.open .image-right[b-7djaijnnf7] {
        transform: rotate(14deg) translateX(55px) translateY(6px);
        filter: brightness(.72);
    }


    .album-info h3[b-7djaijnnf7] {
        font-size: 15px;
    }
}

.music-container[b-7djaijnnf7] {
    width: 100%;
    max-width: 850px;
    margin: 50px auto;
}


/* =========================
   TITLE
========================= */

.music-title[b-7djaijnnf7] {
    margin-bottom: 25px;
}

    .music-title span[b-7djaijnnf7] {
        color: #8f0000;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 3px;
    }

    .music-title h2[b-7djaijnnf7] {
        margin-top: 3px;
        color: #eee;
        font-size: 24px;
        letter-spacing: 2px;
    }


/* =========================
   TRACK
========================= */

.track[b-7djaijnnf7] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 55px;
    padding: 8px 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    transition: background 0.2s ease;
}

    .track:hover[b-7djaijnnf7] {
        background: rgba(255, 255, 255, 0.025);
    }


/* =========================
   PLAY
========================= */

.track-play[b-7djaijnnf7] {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #777;
    font-size: 11px;
    cursor: pointer;
    transition: color 0.2s ease;
}

    .track-play:hover[b-7djaijnnf7] {
        color: #c00000;
    }

.track.active .track-play[b-7djaijnnf7] {
    color: #b00000;
}


/* =========================
   MAIN
========================= */

.track-main[b-7djaijnnf7] {
    flex: 1;
    min-width: 0;
}


/* =========================
   TOP LINE
========================= */

.track-top[b-7djaijnnf7] {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 25px;
}

.track-number[b-7djaijnnf7] {
    color: #444;
    font-size: 9px;
    min-width: 20px;
}

.track-name[b-7djaijnnf7] {
    color: #ddd;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.track-artist[b-7djaijnnf7] {
    color: #666;
    font-size: 11px;
}

.track-duration[b-7djaijnnf7] {
    margin-left: auto;
    color: #555;
    font-size: 10px;
}


/* =========================
   PROGRESS
========================= */

.track-progress[b-7djaijnnf7] {
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: opacity 0.2s ease, height 0.2s ease;
}


/* Показываем только активному */

.track.active .track-progress[b-7djaijnnf7] {
    height: 18px;
    opacity: 1;
}

.track-current-time[b-7djaijnnf7],
.track-total-time[b-7djaijnnf7] {
    color: #555;
    font-size: 8px;
    min-width: 30px;
}

.track-total-time[b-7djaijnnf7] {
    text-align: right;
}


/* =========================
   RANGE
========================= */

.track-range[b-7djaijnnf7] {
    flex: 1;
    height: 2px;
    margin: 0;
    appearance: none;
    background: #333;
    outline: none;
    cursor: pointer;
}


    /* Chrome */

    .track-range[b-7djaijnnf7]::-webkit-slider-thumb {
        appearance: none;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #a00000;
        cursor: pointer;
    }


    /* Firefox */

    .track-range[b-7djaijnnf7]::-moz-range-thumb {
        width: 7px;
        height: 7px;
        border: 0;
        border-radius: 50%;
        background: #a00000;
        cursor: pointer;
    }


/* =========================
   MOBILE
========================= */

@media (max-width: 600px) {

    .music-container[b-7djaijnnf7] {
        margin: 35px auto;
    }

    .track[b-7djaijnnf7] {
        min-height: 50px;
        gap: 8px;
    }

    .track-top[b-7djaijnnf7] {
        gap: 7px;
    }

    .track-number[b-7djaijnnf7] {
        min-width: 17px;
    }

    .track-name[b-7djaijnnf7] {
        font-size: 12px;
    }

    .track-artist[b-7djaijnnf7] {
        display: none;
    }

    .track-duration[b-7djaijnnf7] {
        font-size: 9px;
    }

    .track-play[b-7djaijnnf7] {
        width: 25px;
        height: 25px;
    }
}
/* /Pages/mini-game.cshtml.rz.scp.css */
.games-wrapper[b-t3tnm9xauk] {
    position: relative;
    width: 100%;
    min-height: 700px;
    overflow: hidden;
}

.games-screen[b-t3tnm9xauk],
.game-screen[b-t3tnm9xauk] {
    display: none;
    width: 100%;
    min-height: 700px;
    padding: 70px 25px;
}

    .games-screen.active[b-t3tnm9xauk],
    .game-screen.active[b-t3tnm9xauk] {
        display: block;
    }


/* =========================================
   TITLE
========================================= */

.games-title[b-t3tnm9xauk],
.setup-content[b-t3tnm9xauk],
.host-content[b-t3tnm9xauk] {
    max-width: 850px;
    margin: 0 auto;
}

    .games-title span[b-t3tnm9xauk],
    .setup-label[b-t3tnm9xauk] {
        color: #8f0000;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 3px;
    }

    .games-title h1[b-t3tnm9xauk],
    .setup-content h2[b-t3tnm9xauk],
    .host-content h2[b-t3tnm9xauk] {
        margin: 8px 0;
        color: #ddd;
        font-size: 34px;
        font-weight: 500;
        letter-spacing: 2px;
    }

    .games-title p[b-t3tnm9xauk] {
        color: #555;
        font-size: 10px;
    }


/* =========================================
   GAME CARDS
========================================= */

.game-card-container[b-t3tnm9xauk] {
    max-width: 850px;
    margin: 60px auto 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.game-card[b-t3tnm9xauk] {
    position: relative;
    min-height: 170px;
    padding: 25px;
    text-align: left;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(5,5,5,.5);
    color: #ddd;
    cursor: pointer;
    transition: .3s ease;
}

    .game-card:hover[b-t3tnm9xauk] {
        border-color: #8f0000;
        transform: translateY(-4px);
    }

.game-number[b-t3tnm9xauk] {
    color: #8f0000;
    font-size: 9px;
    letter-spacing: 2px;
}

.game-info[b-t3tnm9xauk] {
    margin-top: 45px;
}

.game-name[b-t3tnm9xauk] {
    font-size: 20px;
    letter-spacing: 1px;
}

.game-description[b-t3tnm9xauk] {
    margin-top: 6px;
    color: #555;
    font-size: 10px;
}

.game-arrow[b-t3tnm9xauk] {
    position: absolute;
    right: 22px;
    bottom: 20px;
    color: #555;
    font-size: 20px;
}


/* =========================================
   BACK
========================================= */

.back-button[b-t3tnm9xauk] {
    display: block;
    max-width: 850px;
    margin: 0 auto 50px;
    padding: 0;
    border: 0;
    background: none;
    color: #555;
    font-size: 9px;
    letter-spacing: 2px;
    cursor: pointer;
}

    .back-button:hover[b-t3tnm9xauk] {
        color: #8f0000;
    }


/* =========================================
   COUNTER
========================================= */

.players-control[b-t3tnm9xauk] {
    max-width: 850px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 45px;
    padding: 18px 0;
    border-top: 1px solid rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.08);
}

    .players-control span[b-t3tnm9xauk] {
        display: block;
        color: #ccc;
        font-size: 12px;
    }

    .players-control small[b-t3tnm9xauk] {
        color: #444;
        font-size: 9px;
    }

.counter[b-t3tnm9xauk] {
    display: flex;
    align-items: center;
    gap: 15px;
}

    .counter button[b-t3tnm9xauk] {
        width: 30px;
        height: 30px;
        border: 1px solid rgba(255,255,255,.1);
        background: transparent;
        color: #777;
        cursor: pointer;
    }

        .counter button:hover[b-t3tnm9xauk] {
            color: white;
            border-color: #8f0000;
        }

    .counter span[b-t3tnm9xauk] {
        min-width: 25px;
        text-align: center;
        color: #ddd;
    }


/* =========================================
   PLAYER INPUTS
========================================= */

.player-inputs[b-t3tnm9xauk] {
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}


.player-input[b-t3tnm9xauk] {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 15px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: linear-gradient( 90deg, rgba(255,255,255,.035), rgba(255,255,255,.012) );
    backdrop-filter: blur(8px);
    transition: border-color .25s ease, background .25s ease, transform .25s ease;
}

    .player-input > span[b-t3tnm9xauk] {
        width: 25px;
        color: #8f0000;
        font-size: 9px;
    }

    .player-input input[b-t3tnm9xauk] {
        width: 100%;
        padding: 15px 0;
        border: 0;
        outline: 0;
        background: transparent;
        color: #ddd;
        font-family: inherit;
    }

        .player-input input[b-t3tnm9xauk]::placeholder {
            color: #444;
        }

    .player-input:hover[b-t3tnm9xauk] {
        border-color: rgba(143, 0, 0, .35);
        background: linear-gradient( 90deg, rgba(143,0,0,.07), rgba(255,255,255,.015) );
        transform: translateX(3px);
    }


    .player-input:focus-within[b-t3tnm9xauk] {
        border-color: rgba(143, 0, 0, .65);
        background: rgba(143, 0, 0, .06);
        box-shadow: inset 2px 0 0 #8f0000;
    }


    .player-input > span[b-t3tnm9xauk] {
        width: 35px;
        color: #8f0000;
        font-size: 8px;
        font-weight: 700;
        letter-spacing: 1px;
    }


    .player-input input[b-t3tnm9xauk] {
        flex: 1;
        width: 100%;
        height: 52px;
        padding: 0;
        border: 0;
        outline: 0;
        background: transparent;
        color: #ddd;
        font-family: inherit;
        font-size: 12px;
    }


        .player-input input[b-t3tnm9xauk]::placeholder {
            color: #4b4b4b;
            transition: color .2s ease;
        }


        .player-input input:focus[b-t3tnm9xauk]::placeholder {
            color: #666;
        }
/* =========================================
   ROLES
========================================= */

.roles-header[b-t3tnm9xauk] {
    margin-top: 45px;
}

    .roles-header span[b-t3tnm9xauk] {
        display: block;
        color: #8f0000;
        font-size: 9px;
        letter-spacing: 3px;
    }

    .roles-header small[b-t3tnm9xauk] {
        color: #444;
        font-size: 9px;
    }

.role-item[b-t3tnm9xauk] {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 10px;
}

.role-name[b-t3tnm9xauk] {
    flex: 1;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.08);
    outline: 0;
    background: rgba(255,255,255,.02);
    color: #ddd;
}

.role-item label[b-t3tnm9xauk] {
    color: #666;
    font-size: 9px;
    white-space: nowrap;
}

.role-item button[b-t3tnm9xauk] {
    width: 30px;
    height: 30px;
    border: 0;
    background: transparent;
    color: #555;
    font-size: 20px;
    cursor: pointer;
}

    .role-item button:hover[b-t3tnm9xauk] {
        color: #8f0000;
    }

.add-role[b-t3tnm9xauk] {
    margin-top: 20px;
    padding: 10px 0;
    border: 0;
    background: transparent;
    color: #555;
    font-size: 9px;
    letter-spacing: 2px;
    cursor: pointer;
}

    .add-role:hover[b-t3tnm9xauk] {
        color: #8f0000;
    }


/* =========================================
   START
========================================= */

.start-button[b-t3tnm9xauk] {
    width: 100%;
    margin-top: 35px;
    padding: 17px;
    border: 1px solid rgba(143,0,0,.5);
    background: rgba(143,0,0,.08);
    color: #aaa;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    cursor: pointer;
}

    .start-button:hover[b-t3tnm9xauk] {
        background: rgba(143,0,0,.18);
        color: white;
    }


/* =========================================
   REVEAL
========================================= */

.reveal-content[b-t3tnm9xauk] {
    max-width: 600px;
    margin: 100px auto;
    text-align: center;
}

.reveal-label[b-t3tnm9xauk] {
    color: #8f0000;
    font-size: 9px;
    letter-spacing: 3px;
}

.reveal-content h2[b-t3tnm9xauk] {
    margin-top: 10px;
    color: #ddd;
    font-size: 32px;
    font-weight: 400;
}

.reveal-button[b-t3tnm9xauk],
.pass-button[b-t3tnm9xauk] {
    margin-top: 50px;
    padding: 16px 35px;
    border: 1px solid rgba(255,255,255,.1);
    background: transparent;
    color: #777;
    font-size: 9px;
    letter-spacing: 2px;
    cursor: pointer;
}

    .reveal-button:hover[b-t3tnm9xauk],
    .pass-button:hover[b-t3tnm9xauk] {
        color: white;
        border-color: #8f0000;
    }

.secret[b-t3tnm9xauk] {
    display: none;
    margin-top: 45px;
}

    .secret.visible[b-t3tnm9xauk] {
        display: block;
    }

.secret-role[b-t3tnm9xauk] {
    color: #ddd;
    font-size: 28px;
    letter-spacing: 2px;
}

.secret-location[b-t3tnm9xauk] {
    margin-top: 10px;
    color: #8f0000;
    font-size: 18px;
}

.pass-button[b-t3tnm9xauk] {
    display: none;
}


/* =========================================
   HOST
========================================= */

.host-players[b-t3tnm9xauk] {
    margin-top: 45px;
}

.host-player[b-t3tnm9xauk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.host-player-main[b-t3tnm9xauk] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .host-player-main strong[b-t3tnm9xauk] {
        color: #ddd;
        font-size: 13px;
    }

    .host-player-main span[b-t3tnm9xauk] {
        color: #555;
        font-size: 9px;
    }

.host-player-state[b-t3tnm9xauk] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .host-player-state span[b-t3tnm9xauk] {
        font-size: 8px;
        letter-spacing: 1px;
    }

.alive[b-t3tnm9xauk] {
    color: #777;
}

.dead[b-t3tnm9xauk] {
    color: #8f0000;
}

.healed[b-t3tnm9xauk] {
    color: #aaa;
}

.host-player-state button[b-t3tnm9xauk] {
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,.08);
    background: transparent;
    color: #555;
    font-size: 8px;
    cursor: pointer;
}

    .host-player-state button:hover[b-t3tnm9xauk] {
        color: white;
        border-color: #8f0000;
    }


/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {

    .games-screen[b-t3tnm9xauk],
    .game-screen[b-t3tnm9xauk] {
        min-height: 100vh;
        padding: 45px 18px 70px;
    }


    .games-title h1[b-t3tnm9xauk],
    .setup-content h2[b-t3tnm9xauk],
    .host-content h2[b-t3tnm9xauk] {
        font-size: 27px;
    }


    .game-card-container[b-t3tnm9xauk] {
        grid-template-columns: 1fr;
        margin-top: 40px;
    }


    .game-card[b-t3tnm9xauk] {
        min-height: 150px;
    }


    .role-item[b-t3tnm9xauk] {
        gap: 8px;
    }


        .role-item label[b-t3tnm9xauk] {
            font-size: 8px;
        }


    .host-player[b-t3tnm9xauk] {
        align-items: flex-start;
        flex-direction: column;
    }


    .host-player-state[b-t3tnm9xauk] {
        flex-wrap: wrap;
    }
}

.games-title[b-t3tnm9xauk] {
    position: relative;
    padding: 25px 28px;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(8,8,8,.42);
    backdrop-filter: blur(12px);
    box-shadow: 0 15px 40px rgba(0,0,0,.18);
    overflow: hidden;
}


    .games-title[b-t3tnm9xauk]::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 2px;
        background: linear-gradient( to bottom, transparent, #8f0000, transparent );
        opacity: .8;
    }


    .games-title[b-t3tnm9xauk]::after {
        content: "";
        position: absolute;
        width: 180px;
        height: 180px;
        right: -90px;
        top: -90px;
        border-radius: 50%;
        background: rgba(143,0,0,.08);
        filter: blur(35px);
        pointer-events: none;
    }

.game-card[b-t3tnm9xauk] {
    position: relative;
    min-height: 145px;
    padding: 24px;
    text-align: left;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(8,8,8,.38);
    backdrop-filter: blur(10px);
    color: #ddd;
    cursor: pointer;
    overflow: hidden;
    transition: transform .3s ease, border-color .3s ease, background .3s ease;
}


    .game-card[b-t3tnm9xauk]::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 1px;
        background: #8f0000;
        transform: scaleY(0);
        transition: transform .3s ease;
    }


    .game-card:hover[b-t3tnm9xauk] {
        transform: translateY(-3px);
        border-color: rgba(143,0,0,.4);
        background: rgba(15,5,5,.45);
    }


        .game-card:hover[b-t3tnm9xauk]::before {
            transform: scaleY(1);
        }


.game-number[b-t3tnm9xauk] {
    color: #8f0000;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 3px;
}


.game-info[b-t3tnm9xauk] {
    margin-top: 35px;
}


.game-name[b-t3tnm9xauk] {
    color: #ddd;
    font-size: 18px;
    letter-spacing: 1px;
}


.game-description[b-t3tnm9xauk] {
    max-width: 300px;
    margin-top: 6px;
    color: #555;
    font-size: 9px;
    line-height: 1.6;
}


.game-arrow[b-t3tnm9xauk] {
    position: absolute;
    right: 20px;
    bottom: 18px;
    color: #555;
    font-size: 18px;
    transition: transform .3s ease, color .3s ease;
}


.game-card:hover .game-arrow[b-t3tnm9xauk] {
    color: #8f0000;
    transform: translateX(5px);
}

.host-players[b-t3tnm9xauk] {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}


.host-player[b-t3tnm9xauk] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 68px;
    padding: 12px 16px;
    border: 1px solid rgba(255,255,255,.06);
    background: rgba(8,8,8,.42);
    backdrop-filter: blur(10px);
    transition: border-color .25s ease, background .25s ease;
}


    .host-player:hover[b-t3tnm9xauk] {
        border-color: rgba(143,0,0,.3);
        background: rgba(20,5,5,.42);
    }


.host-player-main[b-t3tnm9xauk] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}


    .host-player-main strong[b-t3tnm9xauk] {
        color: #ddd;
        font-size: 12px;
        font-weight: 500;
    }


    .host-player-main span[b-t3tnm9xauk] {
        color: #555;
        font-size: 8px;
        letter-spacing: 1px;
        text-transform: uppercase;
    }


.host-player-state[b-t3tnm9xauk] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
}


.player-status[b-t3tnm9xauk] {
    padding: 5px 8px;
    border: 1px solid rgba(255,255,255,.06);
    background: rgba(255,255,255,.025);
    font-size: 7px;
    letter-spacing: 1px;
}


    .player-status.alive[b-t3tnm9xauk] {
        color: #777;
    }


    .player-status.dead[b-t3tnm9xauk] {
        color: #8f0000;
        border-color: rgba(143,0,0,.25);
        background: rgba(143,0,0,.06);
    }


    .player-status.healed[b-t3tnm9xauk] {
        color: #aaa;
        border-color: rgba(255,255,255,.1);
    }


.host-player-state button[b-t3tnm9xauk] {
    padding: 6px 9px;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.02);
    color: #555;
    font-family: inherit;
    font-size: 7px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: .2s ease;
}


    .host-player-state button:hover[b-t3tnm9xauk] {
        color: #ddd;
        border-color: rgba(143,0,0,.45);
        background: rgba(143,0,0,.08);
    }

.setup-content[b-t3tnm9xauk] {
    position: relative;
    padding: 28px;
    border: 1px solid rgba(255,255,255,.06);
    background: rgba(5,5,5,.38);
    backdrop-filter: blur(12px);
}


    .setup-content[b-t3tnm9xauk]::after {
        content: "";
        position: absolute;
        right: -100px;
        top: -100px;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        background: rgba(143,0,0,.06);
        filter: blur(45px);
        pointer-events: none;
    }

@media (max-width: 700px) {

    .games-screen[b-t3tnm9xauk],
    .game-screen[b-t3tnm9xauk] {
        padding: 30px 14px 60px;
    }


    .games-title[b-t3tnm9xauk],
    .setup-content[b-t3tnm9xauk],
    .host-content[b-t3tnm9xauk] {
        padding: 20px;
    }


        .games-title h1[b-t3tnm9xauk],
        .setup-content h2[b-t3tnm9xauk],
        .host-content h2[b-t3tnm9xauk] {
            font-size: 24px;
        }


    .game-card-container[b-t3tnm9xauk] {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-top: 25px;
    }


    .game-card[b-t3tnm9xauk] {
        min-height: 125px;
        padding: 20px;
    }


    .game-info[b-t3tnm9xauk] {
        margin-top: 25px;
    }


    .player-input[b-t3tnm9xauk] {
        min-height: 48px;
    }


        .player-input input[b-t3tnm9xauk] {
            height: 48px;
        }


    .host-player[b-t3tnm9xauk] {
        align-items: flex-start;
        flex-direction: column;
        padding: 15px;
    }


    .host-player-state[b-t3tnm9xauk] {
        width: 100%;
        justify-content: flex-start;
    }


        .host-player-state button[b-t3tnm9xauk] {
            padding: 7px 10px;
        }


    .setup-content[b-t3tnm9xauk] {
        overflow: hidden;
    }
}

/* /Pages/Shared/_Layout.cshtml.rz.scp.css */
/* Please see documentation at https://learn.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */
/* /Pages/VideoAlbum.cshtml.rz.scp.css */
/* CSS for VideoAlbum view */
/* =========================================================
   ROCKHONEST
   VIDEO ALBUM
   ========================================================= */

.video-album-page[b-1lwpdpb5xh] {
    width: min(1100px, calc(100% - 40px));
    margin: 0 auto;
    padding: 60px 0 120px;
    color: #d0d0d0;
}


/* =========================================================
   HEADER
   ========================================================= */

.video-album-header[b-1lwpdpb5xh] {
    position: relative;
    max-width: 700px;
    padding-left: 24px;
    margin-bottom: 70px;
}


    .video-album-header[b-1lwpdpb5xh]::before {
        content: "";
        position: absolute;
        left: 0;
        top: 4px;
        bottom: 4px;
        width: 2px;
        background: linear-gradient( to bottom, transparent, #8f0000 20%, #8f0000 80%, transparent );
    }


.video-album-back[b-1lwpdpb5xh] {
    margin-bottom: 35px;
}


    .video-album-back a[b-1lwpdpb5xh] {
        color: #555;
        text-decoration: none;
        font-size: 8px;
        letter-spacing: 2px;
        transition: color .2s ease;
    }


        .video-album-back a:hover[b-1lwpdpb5xh] {
            color: #aaa;
        }


.video-album-meta[b-1lwpdpb5xh] {
    margin-bottom: 12px;
    color: #8f0000;
    font-size: 8px;
    letter-spacing: 4px;
    font-weight: 700;
}


.video-album-header h1[b-1lwpdpb5xh] {
    margin: 0;
    color: #ddd;
    font-size: clamp(40px, 7vw, 72px);
    line-height: 1;
    font-weight: 300;
    letter-spacing: -3px;
}


.video-album-header p[b-1lwpdpb5xh] {
    max-width: 560px;
    margin: 25px 0;
    color: #555;
    font-size: 11px;
    line-height: 1.8;
}


.video-album-info[b-1lwpdpb5xh] {
    display: flex;
    gap: 25px;
    color: #3f3f3f;
    font-size: 7px;
    letter-spacing: 2px;
}


/* =========================================================
   GRID
   ========================================================= */

.video-album-grid[b-1lwpdpb5xh] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}


/* =========================================================
   CARD
   ========================================================= */

.video-album-card[b-1lwpdpb5xh] {
    min-width: 0;
    background: rgba(255,255,255,.015);
    border: 1px solid rgba(255,255,255,.045);
    cursor: pointer;
    transition: border-color .3s ease, background .3s ease;
}


    .video-album-card:hover[b-1lwpdpb5xh] {
        background: rgba(255,255,255,.025);
        border-color: rgba(143,0,0,.35);
    }


/* Первое видео большое */

.video-card-large[b-1lwpdpb5xh] {
    grid-column: span 2;
    grid-row: span 2;
}


/* =========================================================
   PREVIEW
   ========================================================= */

.video-preview[b-1lwpdpb5xh] {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #050505;
}


.video-card-large .video-preview[b-1lwpdpb5xh] {
    aspect-ratio: 16 / 9;
}


.video-preview img[b-1lwpdpb5xh] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    filter: grayscale(25%) brightness(.65);
    transform: scale(1);
    transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .4s ease;
}


.video-album-card:hover
.video-preview img[b-1lwpdpb5xh] {
    transform: scale(1.05);
    filter: grayscale(0%) brightness(.85);
}


/* =========================================================
   OVERLAY
   ========================================================= */

.video-overlay[b-1lwpdpb5xh] {
    position: absolute;
    inset: 0;
    background: linear-gradient( to top, rgba(0,0,0,.75), transparent 55% );
}


/* =========================================================
   PLAY BUTTON
   ========================================================= */

.video-play[b-1lwpdpb5xh] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    padding: 0 0 0 3px;
    color: #aaa;
    background: rgba(0,0,0,.45);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 50%;
    font-size: 14px;
    cursor: pointer;
    transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}


.video-album-card:hover
.video-play[b-1lwpdpb5xh] {
    color: #fff;
    background: rgba(143,0,0,.5);
    border-color: rgba(143,0,0,.7);
    transform: translate(-50%, -50%) scale(1.08);
}


/* =========================================================
   NUMBER
   ========================================================= */

.video-number[b-1lwpdpb5xh] {
    position: absolute;
    left: 12px;
    bottom: 10px;
    z-index: 2;
    color: #aaa;
    font-size: 7px;
    letter-spacing: 2px;
}


/* =========================================================
   DATE
   ========================================================= */

.video-duration[b-1lwpdpb5xh] {
    position: absolute;
    right: 12px;
    bottom: 10px;
    z-index: 2;
    color: #777;
    font-size: 7px;
    letter-spacing: 2px;
}


/* =========================================================
   INFO
   ========================================================= */

.video-card-info[b-1lwpdpb5xh] {
    padding: 15px 17px 18px;
}


.video-card-label[b-1lwpdpb5xh] {
    margin-bottom: 8px;
    color: #8f0000;
    font-size: 6px;
    letter-spacing: 3px;
}


.video-card-info h2[b-1lwpdpb5xh] {
    margin: 0 0 7px;
    color: #aaa;
    font-size: 17px;
    font-weight: 400;
}


.video-card-info p[b-1lwpdpb5xh] {
    margin: 0;
    color: #4d4d4d;
    font-size: 9px;
    line-height: 1.7;
}


/* =========================================================
   FOOTER
   ========================================================= */

.video-album-footer[b-1lwpdpb5xh] {
    display: flex;
    gap: 25px;
    margin-top: 100px;
    padding: 40px 0;
}


.video-footer-line[b-1lwpdpb5xh] {
    width: 2px;
    min-width: 2px;
    background: linear-gradient( to bottom, #8f0000, transparent );
}


.video-album-footer span[b-1lwpdpb5xh] {
    color: #8f0000;
    font-size: 7px;
    letter-spacing: 3px;
}


.video-album-footer h2[b-1lwpdpb5xh] {
    max-width: 500px;
    margin: 15px 0 20px;
    color: #aaa;
    font-size: 30px;
    font-weight: 300;
    line-height: 1.25;
}


.video-album-footer p[b-1lwpdpb5xh] {
    max-width: 500px;
    margin: 0;
    color: #4d4d4d;
    font-size: 10px;
    line-height: 1.8;
}


/* =========================================================
   LIGHTBOX
   ========================================================= */

.video-lightbox[b-1lwpdpb5xh] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    background: rgba(0,0,0,.94);
    backdrop-filter: blur(15px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}


    .video-lightbox.active[b-1lwpdpb5xh] {
        opacity: 1;
        pointer-events: auto;
    }


/* =========================================================
   VIDEO
   ========================================================= */

.video-player-container[b-1lwpdpb5xh] {
    width: min(1000px, 90vw);
    text-align: center;
}


    .video-player-container video[b-1lwpdpb5xh] {
        width: 100%;
        max-height: 80vh;
        display: block;
        background: #000;
        box-shadow: 0 20px 80px rgba(0,0,0,.7);
    }


.video-lightbox-counter[b-1lwpdpb5xh] {
    margin-top: 12px;
    color: #555;
    font-size: 8px;
    letter-spacing: 3px;
}


/* =========================================================
   LIGHTBOX BUTTONS
   ========================================================= */

.video-lightbox-close[b-1lwpdpb5xh],
.video-lightbox-prev[b-1lwpdpb5xh],
.video-lightbox-next[b-1lwpdpb5xh] {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    color: #666 !important;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 0 !important;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}


    .video-lightbox-close:hover[b-1lwpdpb5xh],
    .video-lightbox-prev:hover[b-1lwpdpb5xh],
    .video-lightbox-next:hover[b-1lwpdpb5xh] {
        color: #ddd !important;
        border-color: rgba(143,0,0,.5) !important;
        background: rgba(143,0,0,.08) !important;
    }


.video-lightbox-close[b-1lwpdpb5xh] {
    top: 25px;
    right: 25px;
    font-size: 22px;
}


.video-lightbox-prev[b-1lwpdpb5xh] {
    left: 25px;
    top: 50%;
    transform: translateY(-50%);
}


.video-lightbox-next[b-1lwpdpb5xh] {
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .video-album-page[b-1lwpdpb5xh] {
        width: calc(100% - 24px);
        padding: 40px 0 80px;
    }


    .video-album-header[b-1lwpdpb5xh] {
        padding-left: 17px;
        margin-bottom: 45px;
    }


        .video-album-header h1[b-1lwpdpb5xh] {
            font-size: 42px;
            letter-spacing: -2px;
        }


        .video-album-header p[b-1lwpdpb5xh] {
            font-size: 10px;
        }


    .video-album-info[b-1lwpdpb5xh] {
        gap: 12px;
        flex-wrap: wrap;
    }


    /* На телефоне обычная сетка */

    .video-album-grid[b-1lwpdpb5xh] {
        grid-template-columns: 1fr;
        gap: 7px;
    }


    .video-card-large[b-1lwpdpb5xh] {
        grid-column: span 1;
        grid-row: span 1;
    }


        .video-card-large .video-preview[b-1lwpdpb5xh] {
            aspect-ratio: 16 / 9;
        }


    .video-card-info[b-1lwpdpb5xh] {
        padding: 13px 14px 16px;
    }


        .video-card-info h2[b-1lwpdpb5xh] {
            font-size: 15px;
        }


        .video-card-info p[b-1lwpdpb5xh] {
            font-size: 9px;
        }


    .video-play[b-1lwpdpb5xh] {
        width: 46px;
        height: 46px;
    }


    /* Footer */

    .video-album-footer[b-1lwpdpb5xh] {
        margin-top: 65px;
        padding: 20px 0;
    }


        .video-album-footer h2[b-1lwpdpb5xh] {
            font-size: 25px;
        }


    /* Lightbox */

    .video-lightbox[b-1lwpdpb5xh] {
        padding: 15px;
    }


    .video-player-container[b-1lwpdpb5xh] {
        width: calc(100vw - 30px);
    }


        .video-player-container video[b-1lwpdpb5xh] {
            max-height: 70vh;
        }


    .video-lightbox-close[b-1lwpdpb5xh] {
        top: 15px;
        right: 15px;
    }


    .video-lightbox-prev[b-1lwpdpb5xh] {
        left: 8px;
    }


    .video-lightbox-next[b-1lwpdpb5xh] {
        right: 8px;
    }
}
/* /Pages/Works.cshtml.rz.scp.css */
/* CSS for Works view */
/* =========================================================
   ROCKHONEST
   WORKS PAGE
   ========================================================= */

.works-page[b-tkxf6lse28] {
    width: min(1050px, calc(100% - 40px));
    margin: 0 auto;
    padding: 90px 0 120px;
    color: #d8d8d8;
}


/* =========================================================
   HEADER
   ========================================================= */

.works-header[b-tkxf6lse28] {
    position: relative;
    max-width: 700px;
    padding-left: 25px;
    margin-bottom: 25px;
}


    .works-header[b-tkxf6lse28]::before {
        content: "";
        position: absolute;
        left: 0;
        top: 5px;
        bottom: 5px;
        width: 2px;
        background: linear-gradient( to bottom, transparent, #8f0000 20%, #8f0000 80%, transparent );
    }


.works-label[b-tkxf6lse28] {
    margin-bottom: 20px;
    color: #8f0000;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 4px;
}


.works-header h1[b-tkxf6lse28] {
    margin: 0;
    color: #ddd;
    font-size: clamp(38px, 6vw, 70px);
    font-weight: 300;
    letter-spacing: -2px;
}


.works-header p[b-tkxf6lse28] {
    max-width: 550px;
    margin: 22px 0 0;
    color: #555;
    font-size: 11px;
    line-height: 1.8;
}


/* =========================================================
   SECTION
   ========================================================= */

.works-section[b-tkxf6lse28] {
    margin-bottom: 25px;
}


.section-heading[b-tkxf6lse28] {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 35px;
}


    .section-heading > span[b-tkxf6lse28] {
        padding-top: 5px;
        color: #8f0000;
        font-size: 8px;
        letter-spacing: 2px;
    }


    .section-heading small[b-tkxf6lse28] {
        color: #444;
        font-size: 7px;
        letter-spacing: 3px;
    }


    .section-heading h2[b-tkxf6lse28] {
        margin: 4px 0 0;
        color: #ccc;
        font-size: 25px;
        font-weight: 400;
    }


/* =========================================================
   VIDEO
   ========================================================= */

.video-list[b-tkxf6lse28] {
    display: flex;
    flex-direction: column;
    gap: 55px;
}


.work-video[b-tkxf6lse28] {
    position: relative;
    padding: 12px;
    background: rgba(7, 7, 7, .48);
    border: 1px solid rgba(255,255,255,.06);
    backdrop-filter: blur(12px);
    transition: border-color .3s ease, transform .3s ease;
}


    .work-video:hover[b-tkxf6lse28] {
        border-color: rgba(143,0,0,.3);
        transform: translateY(-2px);
    }


.video-wrapper[b-tkxf6lse28] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #050505;
}


    .video-wrapper iframe[b-tkxf6lse28] {
        width: 100%;
        height: 100%;
        display: block;
        border: 0;
    }


/* =========================================================
   VIDEO INFO
   ========================================================= */

.video-info[b-tkxf6lse28] {
    display: flex;
    gap: 20px;
    padding: 20px 10px 10px;
}


.work-number[b-tkxf6lse28] {
    color: #8f0000;
    font-size: 8px;
    letter-spacing: 2px;
}


.work-content[b-tkxf6lse28] {
    max-width: 650px;
}


    .work-content h3[b-tkxf6lse28] {
        margin: 0 0 7px;
        color: #ccc;
        font-size: 15px;
        font-weight: 400;
    }


    .work-content p[b-tkxf6lse28] {
        margin: 0;
        color: #555;
        font-size: 10px;
        line-height: 1.7;
    }


/* =========================================================
   MUSIC
   ========================================================= */

.works-music[b-tkxf6lse28] {
    display: flex;
    flex-direction: column;
}


.work-track[b-tkxf6lse28] {
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 58px;
    padding: 8px 12px;
    border-top: 1px solid rgba(255,255,255,.05);
    transition: background .2s ease;
}


    .work-track:last-child[b-tkxf6lse28] {
        border-bottom: 1px solid rgba(255,255,255,.05);
    }


    .work-track:hover[b-tkxf6lse28] {
        background: rgba(143,0,0,.035);
    }


.track-number[b-tkxf6lse28] {
    flex: 0 0 25px;
    color: #8f0000;
    font-size: 8px;
}


.track-main[b-tkxf6lse28] {
    flex: 1;
    min-width: 0;
}


.track-title[b-tkxf6lse28] {
    display: flex;
    align-items: center;
    gap: 10px;
}


    .track-title strong[b-tkxf6lse28] {
        color: #aaa;
        font-size: 10px;
        font-weight: 400;
    }


    .track-title span[b-tkxf6lse28] {
        color: #444;
        font-size: 8px;
    }


.track-progress[b-tkxf6lse28] {
    margin-top: 7px;
    cursor: pointer;
}


.track-progress-line[b-tkxf6lse28] {
    width: 100%;
    height: 2px;
    background: rgba(255,255,255,.07);
    overflow: hidden;
}


.track-progress-value[b-tkxf6lse28] {
    width: 0;
    height: 100%;
    background: #8f0000;
}


.track-time[b-tkxf6lse28] {
    flex: 0 0 35px;
    color: #444;
    font-size: 8px;
    text-align: right;
}


.track-play[b-tkxf6lse28] {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 50% !important;
    color: #666 !important;
    font-size: 8px;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}


    .track-play:hover[b-tkxf6lse28] {
        color: #ddd !important;
        border-color: rgba(143,0,0,.6) !important;
        background: rgba(143,0,0,.08) !important;
    }


.work-track audio[b-tkxf6lse28] {
    display: none;
}


/* =========================================================
   ABOUT
   ========================================================= */

.works-about[b-tkxf6lse28] {
    position: relative;
    display: flex;
    gap: 30px;
    padding: 50px 0 20px;
}


.works-about-line[b-tkxf6lse28] {
    flex: 0 0 2px;
    background: linear-gradient( to bottom, #8f0000, transparent );
}


.works-about-content[b-tkxf6lse28] {
    max-width: 650px;
}


    .works-about-content > span[b-tkxf6lse28] {
        color: #8f0000;
        font-size: 7px;
        letter-spacing: 3px;
    }


    .works-about-content h2[b-tkxf6lse28] {
        margin: 15px 0 25px;
        color: #bbb;
        font-size: 30px;
        font-weight: 300;
        line-height: 1.25;
    }


    .works-about-content p[b-tkxf6lse28] {
        max-width: 580px;
        margin-bottom: 15px;
        color: #555;
        font-size: 10px;
        line-height: 1.9;
    }


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .works-page[b-tkxf6lse28] {
        width: calc(100% - 28px);
        padding: 55px 0 80px;
    }


    .works-header[b-tkxf6lse28] {
        margin-bottom: 65px;
        padding-left: 18px;
    }


        .works-header h1[b-tkxf6lse28] {
            font-size: 40px;
        }


        .works-header p[b-tkxf6lse28] {
            font-size: 10px;
        }


    .works-section[b-tkxf6lse28] {
        margin-bottom: 70px;
    }


    .section-heading[b-tkxf6lse28] {
        margin-bottom: 22px;
    }


        .section-heading h2[b-tkxf6lse28] {
            font-size: 22px;
        }


    .work-video[b-tkxf6lse28] {
        padding: 7px;
    }


    .video-info[b-tkxf6lse28] {
        gap: 12px;
        padding: 15px 5px 8px;
    }


    .work-content h3[b-tkxf6lse28] {
        font-size: 13px;
    }


    .work-content p[b-tkxf6lse28] {
        font-size: 9px;
        line-height: 1.6;
    }


    .work-track[b-tkxf6lse28] {
        gap: 9px;
        padding: 8px 5px;
    }


    .track-number[b-tkxf6lse28] {
        flex-basis: 20px;
    }


    .track-title[b-tkxf6lse28] {
        display: block;
    }


        .track-title span[b-tkxf6lse28] {
            display: block;
            margin-top: 3px;
        }


    .track-time[b-tkxf6lse28] {
        display: none;
    }


    .track-play[b-tkxf6lse28] {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
    }


    .works-about[b-tkxf6lse28] {
        padding-top: 30px;
    }


    .works-about-content h2[b-tkxf6lse28] {
        font-size: 25px;
    }
}