/* PERMATA757 | Royal Sapphire Navigation Frame V3
 * Memakai markup Laravel AKTIF dari INFINITY.tar(3).gz.
 * Berlaku hanya saat tema royal-sapphire-gold dipilih.
 * Tidak mengubah link, JS, urutan, form, ukuran game, atau isi menu.
 * Dimuat SETELAH css/permata757-royal-ui-v2.css.
 */
:root {
    --p757-nav-frame: rgba(69, 155, 255, .88);
    --p757-nav-divider: rgba(102, 170, 255, .29);
    --p757-nav-glow: rgba(39, 117, 255, .32);
}

/* SATU frame menu kategori. Selector desktop dan HP sesuai Blade terkini. */
body.is-chaosapiv2 nav.app-menu.app-menu--d,
body.is-chaosapi .home nav.app-menu.app-menu--shadow-end {
    position: relative;
    border: 1px solid var(--p757-nav-frame) !important;
    border-radius: 13px !important;
    background: linear-gradient(180deg, rgba(7, 25, 65, .84), rgba(3, 13, 39, .88)) !important;
    box-shadow: inset 0 0 0 1px rgba(133, 196, 255, .24),
                0 0 7px var(--p757-nav-glow),
                0 0 15px rgba(45, 120, 246, .18) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Fisik menu tetap SATU baris yang bisa digeser pada HP. */
body.is-chaosapiv2 nav.app-menu.app-menu--d > ul,
body.is-chaosapi .home nav.app-menu.app-menu--shadow-end > ul {
    display: flex !important;
    align-items: stretch !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
}
body.is-chaosapiv2 nav.app-menu.app-menu--d > ul > li.app-menu__item,
body.is-chaosapi .home nav.app-menu.app-menu--shadow-end > ul > li.app-menu__item {
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}
/* Hilangkan frame kecil milik tema V1: tinggal satu batas luar dan divider. */
body.is-chaosapiv2 nav.app-menu.app-menu--d > ul > li.app-menu__item > a,
body.is-chaosapi .home nav.app-menu.app-menu--shadow-end > ul > li.app-menu__item > a {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
}
/* Separator antarkategori, bukan border di masing-masing box. */
body.is-chaosapiv2 nav.app-menu.app-menu--d > ul > li.app-menu__item + li.app-menu__item::before,
body.is-chaosapi .home nav.app-menu.app-menu--shadow-end > ul > li.app-menu__item + li.app-menu__item::before {
    content: "";
    position: absolute;
    top: 14%;
    bottom: 14%;
    left: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--p757-nav-divider) 24%, rgba(126, 189, 255, .50) 50%, var(--p757-nav-divider) 76%, transparent);
    pointer-events: none;
    z-index: 1;
}
/* Highlight TANPA membuat kotak baru. */
body.is-chaosapiv2 nav.app-menu.app-menu--d .app-menu__item > a.app-link--active,
body.is-chaosapi .home nav.app-menu.app-menu--shadow-end .app-menu__item > a.app-link--active {
    background-color: rgba(30, 91, 212, .16) !important;
}
@media (hover: hover) and (pointer: fine) {
    body.is-chaosapiv2 nav.app-menu.app-menu--d .app-menu__item > a:hover,
    body.is-chaosapi .home nav.app-menu.app-menu--shadow-end .app-menu__item > a:hover {
        background-color: rgba(31, 113, 237, .23) !important;
        box-shadow: none !important;
    }
}
/* Desktop: kolom seimbang dan tak keluar frame. */
@media (min-width: 1024px) {
    body.is-chaosapiv2 nav.app-menu.app-menu--d > ul > li.app-menu__item {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }
    body.is-chaosapiv2 nav.app-menu.app-menu--d > ul > li.app-menu__item > a {
        width: 100% !important;
        min-width: 0 !important;
        padding-inline: 2px !important;
    }
    body.is-chaosapiv2 nav.app-menu.app-menu--d > ul > li.app-menu__item > a > span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
/* Mobile: tetap lima kategori terlihat, yang lain boleh digeser. */
@media (max-width: 1023.98px) {
    body.is-chaosapi .home nav.app-menu.app-menu--shadow-end {
        left: 0 !important;
        width: 100% !important;
    }
    body.is-chaosapi .home nav.app-menu.app-menu--shadow-end > ul {
        justify-content: flex-start !important;
        overflow-x: auto !important;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }
    body.is-chaosapi .home nav.app-menu.app-menu--shadow-end > ul > li.app-menu__item {
        flex: 0 0 20% !important;
        min-width: 0 !important;
    }
    body.is-chaosapi .home nav.app-menu.app-menu--shadow-end > ul > li.app-menu__item > a {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* Urutan/menu teks beranda: PIL TERPISAH dan berjarak, bukan satu batang. */
body.is-chaosapiv2 nav.app-breadcrumbs.home--full-width.app-breadcrumbs--d > ul,
body.is-chaosapi .app-header__extra nav.app-breadcrumbs > ul {
    gap: 5px !important;
    align-items: center !important;
    box-sizing: border-box;
}
body.is-chaosapiv2 nav.app-breadcrumbs.home--full-width.app-breadcrumbs--d .nav-item:not(.nav-item--fill),
body.is-chaosapi .app-header__extra nav.app-breadcrumbs .nav-item:not(.nav-item--fill) {
    flex: 0 0 auto !important;
    height: auto !important;
}
body.is-chaosapiv2 nav.app-breadcrumbs.home--full-width.app-breadcrumbs--d .nav-item:not(.nav-item--fill) > a,
body.is-chaosapi .app-header__extra nav.app-breadcrumbs .nav-item:not(.nav-item--fill) > a {
    min-height: 28px;
    padding: 4px 10px !important;
    border: 1px solid rgba(100, 169, 255, .38) !important;
    border-radius: 9px !important;
    background: linear-gradient(180deg, rgba(21, 65, 145, .65), rgba(4, 20, 57, .70)) !important;
    color: #f4f8ff;
    box-shadow: inset 0 0 0 1px rgba(35, 95, 180, .15),
                0 0 7px rgba(45, 121, 248, .15) !important;
    box-sizing: border-box;
}
body.is-chaosapiv2 nav.app-breadcrumbs.home--full-width.app-breadcrumbs--d .nav-item > a.app-link--active,
body.is-chaosapi .app-header__extra nav.app-breadcrumbs .nav-item > a.app-link--active {
    border-color: rgba(240, 198, 100, .75) !important;
    color: #ffe08b !important;
    box-shadow: 0 0 7px rgba(239, 188, 77, .17) !important;
}
@media (hover:hover) and (pointer:fine) {
    body.is-chaosapiv2 nav.app-breadcrumbs.home--full-width.app-breadcrumbs--d .nav-item > a:hover,
    body.is-chaosapi .app-header__extra nav.app-breadcrumbs .nav-item > a:hover {
        border-color: rgba(148, 208, 255, .82) !important;
        box-shadow: 0 0 11px rgba(44, 119, 245, .29) !important;
    }
}
/* Frame yang mengelilingi grup pill desktop, tanpa menggabungkan itemnya. */
body.is-chaosapiv2 nav.app-breadcrumbs.home--full-width.app-breadcrumbs--d {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    padding: 3px 5px;
    border-radius: 13px;
    border: 1px solid rgba(74, 154, 255, .32);
    box-shadow: 0 0 10px rgba(39, 122, 255, .17);
    box-sizing: border-box;
}
/* HP: jangan menghalangi menu hamburger pada header. */
@media (max-width: 1023.98px) {
    body.is-chaosapi .app-header__extra nav.app-breadcrumbs > ul {
        gap: 4px !important;
    }
    body.is-chaosapi .app-header__extra nav.app-breadcrumbs .nav-item:not(.nav-item--fill) > a {
        min-height: 29px;
        padding: 3px 9px !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    body.is-chaosapiv2 nav.app-menu .app-menu__item > a,
    body.is-chaosapi nav.app-menu .app-menu__item > a,
    body.is-chaosapiv2 nav.app-breadcrumbs .nav-item > a,
    body.is-chaosapi nav.app-breadcrumbs .nav-item > a {
        transition: none !important;
    }
}