/* Linime shared navigation. Keep search, account and player hooks intact. */
:root {
    --linime-blue: #83c3ff;
    --linime-ink: #090c12;
    --linime-line: rgba(255, 255, 255, .11);
    --yz-nav-height: 72px;
}
.sidebar-backdrop:not(.active) { pointer-events: none; }
.linime-brand { display: inline-flex; align-items: center; gap: .625rem; flex-shrink: 0; text-decoration: none; }
.navbar .navbar-brand, .home-route .navbar .navbar-brand,
.footer .navbar-brand, .sidebar-header .sidebar-brand { width: auto; height: 48px; }
.linime-brand .lanime-brand-logo { width: 44px; height: 44px; object-fit: contain; filter: none; }
.linime-wordmark { color: #f5f7fa; font-family: 'Space Grotesk', Inter, sans-serif; font-size: 1.625rem; font-weight: 700; line-height: 1; letter-spacing: -.07em; white-space: nowrap; text-transform: none; }
.linime-domain { color: var(--linime-blue); font-size: .8em; letter-spacing: -.04em; }
.navbar, body:not(.home-route):not(.landing-route) .navbar {
    height: var(--yz-nav-height); border-bottom: 1px solid var(--linime-line);
    background: rgba(7, 10, 16, .92);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .12);
}
.home-route .navbar { background: rgba(7, 10, 16, .8); }
#navbar { isolation: isolate; transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease; }
/* Preserve the original scroll animation independently of the nav surface. */
#navbar .linime-wordmark {
    display: inline-block; max-width: 8rem; overflow: hidden;
    opacity: 1; transform: translateY(0) scale(1); transform-origin: left center;
    transition: max-width 340ms ease, margin-left 340ms ease,
        opacity 180ms ease, transform 420ms cubic-bezier(.2, .9, .3, 1.2);
}
#navbar.is-scroll-down .linime-wordmark {
    max-width: 0; margin-left: -.625rem; opacity: 0;
    transform: translateY(7px) scale(.82);
}
#navbar.is-scroll-up .linime-wordmark { animation: linime-logo-reveal 560ms cubic-bezier(.2, .8, .3, 1) both; }
#navbar:focus-within .linime-wordmark {
    max-width: 8rem; margin-left: 0; opacity: 1; transform: none; animation: none;
}
@keyframes linime-logo-reveal {
    0% { opacity: 0; transform: translateY(12px) scale(.8); }
    55% { opacity: 1; transform: translateY(-3px) scale(1.08); }
    80% { transform: translateY(1px) scale(.98); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
#navbar::before {
    content: ''; position: absolute; z-index: -1; inset: 0 0 -32px; pointer-events: none;
    background: linear-gradient(to bottom, rgba(3, 7, 13, .65), rgba(3, 7, 13, .28) 60%, transparent);
    opacity: 0; transition: opacity 200ms ease;
}
#navbar.is-at-top { background: transparent; border-bottom-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
#navbar.is-at-top::before { opacity: 1; }
#navbar.is-at-top .quick-nav { background: transparent; border-color: transparent; }
#navbar.is-at-top .quick-nav-link { color: #d7e0ec; text-shadow: 0 1px 6px rgba(0, 0, 0, .55); }
#navbar.is-at-top .quick-nav-link.active { background: transparent; border-color: transparent; color: #fff; box-shadow: none; }
#navbar.is-at-top .quick-nav-link.active::after {
    content: ''; display: block; position: absolute; bottom: 4px; left: calc(50% - 8px);
    width: 16px; height: 2px; border-radius: 2px; background: var(--linime-blue);
}
#navbar.is-at-top .header-search-form:not(:focus-within) { background: transparent; border-color: transparent; box-shadow: none; }
#navbar.is-at-top .header-search-form { --header-search-muted: #d7e0ec; }
#navbar.is-at-top .header-search-form:focus-within { background: rgba(9, 14, 22, .94); border-color: var(--linime-blue); }
#navbar.is-at-top :is(.sidebar-toggle, .mobile-search-toggle, .nav-icon-button, .user-avatar-btn, .btn-signin, .pwa-nav-install) { background: transparent; border-color: transparent; box-shadow: none; }
#navbar.is-at-top .avatar-ring { border-color: transparent; box-shadow: none; }
#navbar.is-at-top :is(.quick-nav-link, .sidebar-toggle, .mobile-search-toggle, .nav-icon-button, .user-avatar-btn, .btn-signin, .pwa-nav-install):hover { background: rgba(131, 195, 255, .09); color: #fff; }
.navbar .navbar-container { padding-inline: clamp(1rem, 2vw, 2rem); gap: 1.25rem; }
.navbar .navbar-left { flex: 0 0 auto; gap: .75rem; }
.navbar .quick-nav { display: flex; gap: .125rem; padding: .25rem; border: 1px solid var(--linime-line); border-radius: 12px; background: rgba(255, 255, 255, .025); }
.navbar .quick-nav-link, .home-route .navbar .quick-nav-link {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: .625rem .75rem;
    border: 1px solid transparent; border-radius: 8px;
    background: transparent; color: #afb8c7;
    font-size: .8125rem; font-weight: 600; line-height: 1;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.navbar .quick-nav-link:hover, .home-route .navbar .quick-nav-link:hover { background: rgba(255, 255, 255, .065); border-color: transparent; color: #fff; }
.navbar .quick-nav-link.active, .home-route .navbar .quick-nav-link.active { background: #edf3fa; border-color: #edf3fa; color: #101927; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.navbar .header-search--desktop { flex: 1 1 16rem; min-width: 12rem; max-width: 25rem; }
.header-search, .header-search-overlay { --header-search-focus: var(--linime-blue); --header-search-muted: #a8b4c5; }
.header-search-form { min-height: 44px; border-radius: 10px; background: rgba(255, 255, 255, .045); border-color: var(--linime-line); }
.header-search-form:focus-within { box-shadow: 0 0 0 3px rgba(131, 195, 255, .12); }
.header-search-input { font-size: .8125rem; }
.navbar .user-menu { flex: 0 0 auto; gap: .5rem; }
.navbar :is(.sidebar-toggle, .mobile-search-toggle, .nav-icon-button, .user-avatar-btn, .btn-signin), .home-route .navbar .btn-signin {
    width: 44px; height: 44px; flex-shrink: 0; border-color: var(--linime-line); border-radius: 12px;
    background: rgba(255, 255, 255, .035); box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
.navbar :is(.sidebar-toggle, .mobile-search-toggle, .nav-icon-button, .user-avatar-btn, .btn-signin):hover { border-color: rgba(131, 195, 255, .35); background: rgba(131, 195, 255, .07); transform: none; }
.navbar .user-avatar-btn { border-radius: 50%; }
:is(.navbar, .sidebar, .footer) :is(a, button, input):focus-visible { outline: 2px solid var(--linime-blue); outline-offset: 3px; }
.sidebar { background: #0b1018; border-right-color: var(--linime-line); }
.sidebar-header { padding-block: 1rem; border-color: var(--linime-line); }
.sidebar-nav { padding: .75rem; }
.sidebar .sidebar-link { min-height: 46px; margin-block: .125rem; border-radius: 9px; color: #b1bdce; }
.sidebar .sidebar-link:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.sidebar .sidebar-link.active { color: #edf6ff; background: rgba(131, 195, 255, .09); border-left-color: var(--linime-blue); }
.sidebar .sidebar-link.active::before { display: none; }
.sidebar .sidebar-link.active svg { color: var(--linime-blue); }
.footer { border-top: 1px solid var(--linime-line); background: #080b10; }
.footer .linime-brand .lanime-brand-logo { width: 52px; height: 52px; }
.footer .navbar-brand { height: 56px; }
.footer .linime-wordmark { font-size: 1.875rem; }
.footer .footer-brand p { max-width: 31rem; font-size: .875rem; line-height: 1.8; color: #a6b1c1; }
.footer .footer-title { font-size: .9375rem; letter-spacing: -.015em; }
.footer .footer-links a { font-size: .875rem; color: #a6b1c1; }
.footer .footer-links a:hover { color: var(--linime-blue); }
@media (max-width: 1240px) and (min-width: 1121px) {
    .navbar .navbar-container { gap: .75rem; padding-inline: 1rem; }
    .navbar .quick-nav-link, .home-route .navbar .quick-nav-link { padding-inline: .625rem; }
    .navbar .linime-wordmark { font-size: 1.5rem; }
}
@media (max-width: 1120px) {
    :root { --yz-nav-height: 64px; }
    .navbar .quick-nav, .home-route .navbar .quick-nav,
    .navbar .search-container, .navbar .header-search--desktop { display: none; }
    .navbar .sidebar-toggle, .home-route .navbar .sidebar-toggle,
    .navbar .user-menu > .mobile-search-toggle,
    .home-route .navbar .user-menu > .mobile-search-toggle { display: grid; }
    .navbar .navbar-container { gap: .75rem; padding-inline: 1rem; }
    .navbar .user-menu { margin-left: auto; }
}
@media (max-width: 480px) {
    .navbar .navbar-container { gap: .5rem; padding-inline: .75rem; }
    .navbar .navbar-left { gap: .5rem; }
    .navbar .linime-brand { gap: .375rem; }
    #navbar.is-scroll-down .linime-wordmark { margin-left: -.375rem; }
    #navbar:focus-within .linime-wordmark { margin-left: 0; }
    .navbar .linime-brand .lanime-brand-logo { width: 36px; height: 40px; }
    .navbar .linime-wordmark { font-size: 1.25rem; }
    .navbar .linime-domain { display: none; }
    .navbar .user-menu { gap: .375rem; }
    .header-search-panel { border-radius: 12px; }
}
@media (max-width: 360px) {
    .navbar .navbar-container { padding-inline: .625rem; gap: .375rem; }
    #navbar .linime-wordmark { display: none; }
    #navbar .linime-brand { gap: 0; }
    #navbar .pwa-nav-install { width: 44px; padding: 0; justify-content: center; }
    #navbar .pwa-nav-install span { display: none; }
    .navbar :is(.sidebar-toggle, .mobile-search-toggle, .nav-icon-button, .user-avatar-btn, .btn-signin), .home-route .navbar .btn-signin { border-radius: 10px; }
    .navbar .linime-brand .lanime-brand-logo { width: 30px; height: 36px; }
    .navbar .linime-wordmark { font-size: 1.125rem; }
}
@media (prefers-reduced-motion: reduce) {
    .navbar :is(a, button), .sidebar .sidebar-link { transition: none; }
    #navbar, #navbar::before, #navbar .linime-wordmark { transition: none; }
    #navbar.is-scroll-up .linime-wordmark { animation: none; }
}
