/* Public King Cinema web shell — loaded last to keep every public route app-like. */
:root {
    --kc-app-bg: #07070d;
    --kc-app-surface: #111119;
    --kc-app-surface-2: #171722;
    --kc-app-line: rgba(255, 255, 255, .09);
    --kc-app-text: #f8fafc;
    --kc-app-muted: #9ca3af;
    --kc-app-blue: #3b82f6;
    --kc-app-red: #e50914;
    --kc-bottom-nav-height: 68px;
}

.material-symbols-rounded {
    font-family: "Material Symbols Rounded" !important;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "liga";
}

body.kc-app-web:not(.admin-body) .material-symbols-rounded {
    font-family: "Material Symbols Rounded" !important;
    font-weight: 400 !important;
    font-style: normal !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    font-feature-settings: "liga" !important;
}

html,
body.kc-app-web:not(.admin-body) {
    width: 100%;
    min-height: 100%;
    margin: 0 !important;
    overflow-x: clip;
}

body.kc-app-web:not(.admin-body):not(.home-store-light) {
    color: var(--kc-app-text) !important;
    background: var(--kc-app-bg) !important;
}

body.kc-app-web:not(.admin-body) #main-content {
    width: 100% !important;
    max-width: none !important;
    min-height: 100dvh;
    margin: 0 !important;
    padding: 0 0 calc(var(--kc-bottom-nav-height) + env(safe-area-inset-bottom, 0px)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.kc-app-web.reels-active #main-content {
    padding-bottom: 0 !important;
}

/* Bottom navigation mirrors the Flutter app: full width, dark and flat. */
#bottom-navigation-bar {
    position: fixed !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 9000 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--kc-app-line) !important;
    border-radius: 0 !important;
    background: rgba(19, 19, 26, .98) !important;
    box-shadow: 0 -10px 32px rgba(0, 0, 0, .34) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

#bottom-navigation-bar .kc-bottom-nav-inner {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
    width: min(100%, 760px) !important;
    height: calc(var(--kc-bottom-nav-height) + env(safe-area-inset-bottom, 0px));
    margin: 0 auto !important;
    padding: 0 4px env(safe-area-inset-bottom, 0px) !important;
}

#bottom-navigation-bar .nav-btn,
#bottom-navigation-bar .nav-btn-center {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 7px 2px 5px !important;
    color: rgba(255, 255, 255, .56) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    text-decoration: none !important;
    transition: color .18s ease, background .18s ease !important;
}

#bottom-navigation-bar .nav-btn > svg {
    width: 25px !important;
    height: 25px !important;
    flex: 0 0 auto;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.9 !important;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#bottom-navigation-bar .nav-btn b {
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

#bottom-navigation-bar .nav-btn:hover,
#bottom-navigation-bar .nav-btn.is-active,
#bottom-navigation-bar .nav-btn.active {
    color: #60a5fa !important;
    background: rgba(59, 130, 246, .06) !important;
}

#bottom-navigation-bar .nav-indicator {
    position: absolute !important;
    top: 0 !important;
    right: 50% !important;
    display: block !important;
    width: 30px !important;
    height: 3px !important;
    margin: 0 !important;
    border-radius: 0 0 6px 6px !important;
    opacity: 0 !important;
    background: var(--kc-app-blue) !important;
    transform: translateX(50%) !important;
}

#bottom-navigation-bar .nav-btn.is-active .nav-indicator,
#bottom-navigation-bar .nav-btn.active .nav-indicator {
    opacity: 1 !important;
}

body.reels-active #bottom-navigation-bar {
    transform: translateY(110%) !important;
}

/* Library shell and its app-style horizontal category rail. */
.kc-public-library {
    min-height: 100dvh;
    width: 100%;
    color: var(--kc-app-text);
    background: linear-gradient(180deg, #090910 0, var(--kc-app-bg) 360px);
    box-sizing: border-box !important;
    max-width: 100% !important;
    overflow-x: clip !important;
}

.kc-public-library-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 24px clamp(14px, 3vw, 42px) 20px;
    border-bottom: 1px solid var(--kc-app-line);
    background: radial-gradient(circle at 90% -30%, rgba(229, 9, 20, .18), transparent 34%), #090910;
    box-sizing: border-box !important;
    max-width: 100% !important;
    overflow: hidden;
}

.kc-public-library-title {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 14px;
    flex: 1 1 auto;
    overflow: hidden;
}

.kc-public-library-title > img {
    width: 58px;
    height: 58px;
    flex: 0 0 auto;
    border-radius: 16px;
    object-fit: cover;
    background: #111;
    box-shadow: 0 12px 30px rgba(229, 9, 20, .2);
}

.kc-public-library-title span {
    color: #ef4444;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
}

.kc-public-library-title h1 {
    margin: 1px 0 2px;
    color: #fff;
    font-size: clamp(25px, 4vw, 38px);
    font-weight: 950;
    line-height: 1.15;
}

.kc-public-library-title p {
    margin: 0;
    color: var(--kc-app-muted);
    font-size: 13px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.kc-library-open-app {
    min-height: 44px;
    flex: 0 0 auto;
    padding: 0 19px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
    color: #fff;
    background: var(--kc-app-red);
    font-size: 13px;
    font-weight: 900;
    box-shadow: 0 12px 30px rgba(229, 9, 20, .25);
}

.kc-library-tabs {
    position: sticky;
    top: 0;
    z-index: 35;
    display: flex;
    gap: 10px;
    width: 100%;
    padding: 12px clamp(12px, 3vw, 40px);
    overflow-x: auto;
    border-bottom: 1px solid var(--kc-app-line);
    background: rgba(8, 8, 13, .94);
    scrollbar-width: none;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-sizing: border-box !important;
    max-width: 100% !important;
}

.kc-library-tabs::-webkit-scrollbar { display: none; }

.kc-library-tabs .kc-library-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: max-content;
    min-height: 43px;
    padding: 0 15px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 14px;
    color: rgba(255, 255, 255, .68);
    background: rgba(255, 255, 255, .045);
    font-size: 13px;
    font-weight: 900;
    transition: .18s ease;
}

.kc-library-tabs .kc-library-tab-mark {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--kc-tab-tone);
    box-shadow: 0 0 14px color-mix(in srgb, var(--kc-tab-tone) 55%, transparent);
}

.kc-library-tabs .kc-library-tab.is-active {
    color: #fff;
    border-color: color-mix(in srgb, var(--kc-tab-tone) 65%, white 10%);
    background: color-mix(in srgb, var(--kc-tab-tone) 24%, #111119 76%);
    box-shadow: inset 0 -2px 0 var(--kc-tab-tone), 0 8px 22px color-mix(in srgb, var(--kc-tab-tone) 18%, transparent);
}

.kc-library-content {
    width: 100%;
    min-height: 65dvh;
    padding: 0 0 24px;
}

/* Content/category pages own only their inner spacing; no outer cards or gutters. */
.kc-library-content > .kc-category-page,
.kc-category-page,
.kc-all-page,
.football-page,
.kc-discover-page-shell {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.kc-category-page .kc-category-hero {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
}

.kc-category-page .kc-category-sections,
.kc-all-page {
    padding-right: clamp(12px, 3vw, 42px) !important;
    padding-left: clamp(12px, 3vw, 42px) !important;
}

.kc-content-row {
    width: 100% !important;
    max-width: none !important;
}

/* Discover stays dark and its YouTube-like feed can use the available desktop width. */
body.kc-route-discover .kc-discover-page-shell,
body.kc-route-watch .kc-discover-page-shell {
    color: #fff !important;
    background: var(--kc-app-bg) !important;
}

body.kc-route-discover #discover-content-container {
    width: 100% !important;
    max-width: 1320px !important;
}

body.kc-route-discover .kc-discover-page-shell > .sticky > div,
body.kc-route-discover #discover-tabs-container {
    max-width: 1320px !important;
}

body.kc-route-discover .kc-discover-topbar {
    color: #fff !important;
    border-color: rgba(255, 255, 255, .09) !important;
    background: rgba(7, 7, 12, .97) !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .32) !important;
}

body.kc-route-discover .kc-discover-feed,
body.kc-route-discover .kc-discover-feed > *,
body.kc-route-discover .kc-discover-feed > .grid {
    color: #f8fafc !important;
    background: #07070e !important;
}

body.kc-route-discover .kc-discover-feed-card {
    color: #f8fafc !important;
    border-color: rgba(255, 255, 255, .09) !important;
    background: #111116 !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .3) !important;
}

body.kc-route-discover .kc-discover-feed-card h3,
body.kc-route-discover .kc-discover-feed-card h3 a {
    color: #fff !important;
}

body.kc-route-discover .kc-discover-feed-card [class*="text-white/45"],
body.kc-route-discover .kc-discover-feed-card [class*="text-gray-"] {
    color: #9ca3af !important;
}

body.kc-route-discover .discover-tab-btn {
    color: rgba(255, 255, 255, .72) !important;
    border: 1px solid rgba(255, 255, 255, .09) !important;
    background: rgba(255, 255, 255, .06) !important;
}

body.kc-route-discover .discover-tab-btn.active {
    color: #fff !important;
    border-color: rgba(239, 68, 68, .72) !important;
    background: #e50914 !important;
}

body.kc-app-web.kc-route-discover:not(.admin-body) .kc-discover-feed-card > div.flex.items-start,
body.kc-app-web.kc-route-discover:not(.admin-body) .kc-discover-feed-card > div[class*="flex"][class*="items-start"] {
    color: #f8fafc !important;
    background: #111116 !important;
}

body.kc-app-web.kc-route-discover:not(.admin-body) .kc-discover-feed-card > div.flex.items-start h3,
body.kc-app-web.kc-route-discover:not(.admin-body) .kc-discover-feed-card > div.flex.items-start a {
    color: #fff !important;
}

body.kc-app-web.kc-route-discover:not(.admin-body) .discover-tab-btn.active {
    color: #fff !important;
    border-color: #ff3038 !important;
    background: #e50914 !important;
}

/* Details fill the screen; the readable copy remains padded, like the app. */
body.kc-route-watch #main-content > *,
body.kc-route-details #main-content > * {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

body.kc-route-watch #main-content .max-w-7xl,
body.kc-route-details #main-content .max-w-7xl {
    width: 100% !important;
    max-width: 1480px !important;
}

/* Preserve the download landing as the only intentionally light route. */
body.home-store-light #main-content {
    background: #fff;
}

@media (max-width: 640px) {
    :root { --kc-bottom-nav-height: 64px; }

    .kc-public-library-head {
        align-items: flex-start;
        padding: 17px 14px 15px;
    }

    .kc-public-library-title > img {
        width: 46px;
        height: 46px;
        border-radius: 13px;
    }

    .kc-public-library-title p {
        max-width: 220px;
        font-size: 11px;
        line-height: 1.55;
    }

    .kc-library-open-app {
        min-height: 40px;
        padding: 0 13px;
        border-radius: 12px;
        font-size: 11px;
    }

    .kc-library-tabs {
        gap: 8px;
        padding: 10px 11px;
    }

    .kc-library-tabs .kc-library-tab {
        min-height: 40px;
        padding: 0 12px;
        border-radius: 12px;
        font-size: 12px;
    }

    .kc-category-page .kc-category-sections,
    .kc-all-page {
        padding-right: 11px !important;
        padding-left: 11px !important;
    }
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .kc-library-tabs .kc-library-tab.is-active {
        border-color: var(--kc-tab-tone);
        background: #1b1b25;
    }
}

/* Override the legacy floating dock with the flat app navigation. */
body.kc-app-web:not(.admin-body) #bottom-navigation-bar,
body.kc-app-web.home-store-light:not(.admin-body) #bottom-navigation-bar,
body.kc-app-web.netflix-theme:not(.admin-body) #bottom-navigation-bar {
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    height: calc(var(--kc-bottom-nav-height) + env(safe-area-inset-bottom, 0px)) !important;
    padding: 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--kc-app-line) !important;
    border-radius: 0 !important;
    background: rgba(19, 19, 26, .98) !important;
    box-shadow: 0 -10px 32px rgba(0, 0, 0, .34) !important;
    pointer-events: auto !important;
}

body.kc-app-web:not(.admin-body) #bottom-navigation-bar > .kc-bottom-nav-inner,
body.kc-app-web.home-store-light:not(.admin-body) #bottom-navigation-bar > .kc-bottom-nav-inner,
body.kc-app-web.netflix-theme:not(.admin-body) #bottom-navigation-bar > .kc-bottom-nav-inner {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: min(100%, 760px) !important;
    max-width: 760px !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 4px env(safe-area-inset-bottom, 0px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.kc-app-web:not(.admin-body) #bottom-navigation-bar .nav-btn {
    height: 100% !important;
    min-height: 0 !important;
    padding: 7px 2px 5px !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: rgba(255, 255, 255, .56) !important;
    background: transparent !important;
}

body.kc-app-web:not(.admin-body) #bottom-navigation-bar .nav-btn:hover,
body.kc-app-web:not(.admin-body) #bottom-navigation-bar .nav-btn.is-active,
body.kc-app-web:not(.admin-body) #bottom-navigation-bar .nav-btn.active {
    color: #60a5fa !important;
    border: 0 !important;
    background: rgba(59, 130, 246, .06) !important;
}

body.kc-app-web:not(.admin-body) #bottom-navigation-bar .nav-btn.is-active svg,
body.kc-app-web:not(.admin-body) #bottom-navigation-bar .nav-btn.active svg {
    color: #60a5fa !important;
}

body.kc-app-web:not(.admin-body) #bottom-navigation-bar .nav-indicator {
    display: block !important;
    opacity: 0 !important;
    background: var(--kc-app-blue) !important;
}

body.kc-app-web:not(.admin-body) #bottom-navigation-bar .nav-btn.is-active .nav-indicator,
body.kc-app-web:not(.admin-body) #bottom-navigation-bar .nav-btn.active .nav-indicator {
    opacity: 1 !important;
}

body.reels-active.kc-app-web:not(.admin-body) #bottom-navigation-bar {
    transform: translateY(110%) !important;
}

body.kc-app-web:not(.admin-body) .kc-library-tabs .kc-library-tab {
    min-height: 43px !important;
    padding: 0 15px !important;
    border: 1px solid rgba(255, 255, 255, .09) !important;
    border-radius: 14px !important;
    color: rgba(255, 255, 255, .72) !important;
    background: rgba(255, 255, 255, .045) !important;
}

body.kc-app-web:not(.admin-body) .kc-library-tabs .kc-library-tab.is-active {
    color: #fff !important;
    border-color: var(--kc-tab-tone) !important;
    background: color-mix(in srgb, var(--kc-tab-tone) 24%, #111119 76%) !important;
    box-shadow: inset 0 -2px 0 var(--kc-tab-tone), 0 8px 22px color-mix(in srgb, var(--kc-tab-tone) 18%, transparent) !important;
}

/* Discover video details: dark YouTube-style player and readable metadata. */
body.kc-route-watch .kc-discover-watch-layout,
body.kc-route-details .kc-discover-watch-layout,
body.kc-route-watch .kc-discover-watch-info,
body.kc-route-details .kc-discover-watch-info,
body.kc-route-watch #suggested-videos-container,
body.kc-route-details #suggested-videos-container {
    color: #f8fafc !important;
    background: #07070e !important;
}

body.kc-route-watch .kc-discover-watch-info > h1,
body.kc-route-details .kc-discover-watch-info > h1,
body.kc-route-watch .kc-discover-publisher-row a,
body.kc-route-details .kc-discover-publisher-row a {
    color: #fff !important;
}

body.kc-route-watch .kc-discover-publisher-row p,
body.kc-route-details .kc-discover-publisher-row p {
    color: #9ca3af !important;
}

body.kc-route-watch .kc-discover-description-card,
body.kc-route-details .kc-discover-description-card,
body.kc-route-watch .kc-discover-comments-card,
body.kc-route-details .kc-discover-comments-card {
    color: #f8fafc !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    background: #15151f !important;
}

body.kc-route-watch .kc-discover-description-card:hover,
body.kc-route-details .kc-discover-description-card:hover,
body.kc-route-watch .kc-discover-comments-card:hover,
body.kc-route-details .kc-discover-comments-card:hover {
    background: #1b1b27 !important;
}

body.kc-route-watch .kc-discover-description-card *,
body.kc-route-details .kc-discover-description-card *,
body.kc-route-watch .kc-discover-comments-card h3,
body.kc-route-details .kc-discover-comments-card h3 {
    color: #f8fafc !important;
}

body.kc-route-watch .kc-discover-comments-card p,
body.kc-route-details .kc-discover-comments-card p,
body.kc-route-watch .kc-discover-comments-card span,
body.kc-route-details .kc-discover-comments-card span {
    color: #a7a7b4 !important;
}

@media (max-width: 640px) {
    body.kc-app-web:not(.admin-body) .kc-library-tabs .kc-library-tab {
        min-height: 40px !important;
        padding: 0 12px !important;
        border-radius: 12px !important;
    }
}