/* =====================================================================
   V39 targeted fix: old-style giveaway roulette, compact header tools,
   clean round logo, stable profile name, search aligned over nav,
   sticky mini footer, and light performance layer. Loaded last.
   ===================================================================== */

/* ---------- Header: compact, stable, search exactly above nav ---------- */
.header,
body .header {
    position: sticky !important;
    top: 0 !important;
    z-index: 9000 !important;
    overflow: visible !important;
}

.header .header-inner,
.header-inner {
    width: 100% !important;
    max-width: 1580px !important;
    min-height: 92px !important;
    margin: 0 auto !important;
    padding: 8px 24px 7px !important;
    display: grid !important;
    grid-template-columns: minmax(285px, 330px) minmax(440px, 680px) minmax(250px, auto) !important;
    grid-template-rows: 42px 32px !important;
    grid-template-areas:
        "brand search user"
        "brand nav user" !important;
    gap: 5px 18px !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

.header .header-brand,
.header-brand {
    grid-area: brand !important;
    align-self: center !important;
    justify-self: start !important;
    min-width: 0 !important;
    max-width: 330px !important;
    overflow: visible !important;
}

.header .logo,
.logo,
h1.logo {
    width: auto !important;
    max-width: 330px !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 11px !important;
    overflow: visible !important;
    line-height: 1 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

.header .logo-live-link,
.logo-live-link {
    position: relative !important;
    flex: 0 0 52px !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    overflow: visible !important;
    transform: none !important;
    text-decoration: none !important;
}

.header .logo-live-link .logo-avatar,
.header .logo-avatar,
.logo-avatar,
.logo > img {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
    flex: 0 0 52px !important;
    aspect-ratio: 1 / 1 !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 50% !important;
    clip-path: circle(50% at 50% 50%) !important;
    overflow: hidden !important;
    border: 2px solid var(--pub-line, rgba(255,255,255,.2)) !important;
    box-shadow: 3px 3px 0 rgba(0,0,0,.35) !important;
    transform: none !important;
}

.header .logo-live-dot,
.logo-live-dot {
    position: absolute !important;
    right: 1px !important;
    bottom: 3px !important;
    width: 13px !important;
    height: 13px !important;
    border-radius: 50% !important;
    z-index: 3 !important;
}

/* remove the crooked strip between logo icon and text */
.header .industrial-logo-signal,
.industrial-logo-signal {
    display: none !important;
}

.header .industrial-logo,
.industrial-logo {
    min-width: 0 !important;
    max-width: 245px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    overflow: hidden !important;
    text-decoration: none !important;
    transform: none !important;
}

.header .industrial-logo-copy,
.industrial-logo-copy {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    overflow: hidden !important;
}

.header .industrial-logo-name,
.header .industrial-logo-text,
.industrial-logo-name,
.industrial-logo-text {
    max-width: 100% !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 1.46rem !important;
    line-height: .95 !important;
    letter-spacing: -0.045em !important;
}

.header .industrial-logo-subtitle,
.industrial-logo-subtitle {
    max-width: 100% !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: .73rem !important;
    line-height: 1 !important;
    letter-spacing: .14em !important;
}

.header .header-center,
.header-center {
    grid-area: search !important;
    width: 100% !important;
    max-width: 680px !important;
    min-width: 0 !important;
    justify-self: stretch !important;
    align-self: end !important;
    transform: none !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 9200 !important;
    overflow: visible !important;
}

.header .search-section,
.header-center .search-section,
.search-section {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
}

.header .search-section input,
.header .search-section input[type="search"],
.header-center .search-section input,
.header-center .search-section input[type="search"] {
    height: 100% !important;
    min-height: 0 !important;
    width: 100% !important;
}

.header .header-nav,
.header-inner > .header-nav,
.header #mainNavigation,
#mainNavigation {
    grid-area: nav !important;
    width: 100% !important;
    max-width: 680px !important;
    min-width: 0 !important;
    justify-self: stretch !important;
    align-self: start !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 2px !important;
    overflow: visible !important;
    transform: none !important;
    border-radius: 0 !important;
}

.header .nav-tab,
.nav-tab {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 30px !important;
    height: 30px !important;
    padding: 5px 8px !important;
    justify-content: center !important;
    border-radius: 0 !important;
    white-space: nowrap !important;
}

.header .header-right,
.header-right {
    grid-area: user !important;
    justify-self: end !important;
    align-self: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 450px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    overflow: visible !important;
    transform: none !important;
    z-index: 9100 !important;
}

.header #userArea,
#userArea,
.header .header-user-panel,
.header-user-panel {
    width: auto !important;
    min-width: 0 !important;
    max-width: 450px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    overflow: visible !important;
    flex-wrap: nowrap !important;
    transform: none !important;
}

.header .header-profile,
.header-profile {
    flex: 0 1 235px !important;
    min-width: 176px !important;
    max-width: 235px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 3px 7px 3px 3px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    color: var(--pub-text, #f2f0e9) !important;
    -webkit-text-fill-color: var(--pub-text, #f2f0e9) !important;
    border-radius: 0 !important;
    transform: none !important;
}

.header .header-profile .feed-card-avatar,
.header .header-profile img,
.header-profile .feed-card-avatar,
.header-profile img {
    flex: 0 0 30px !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

.header .header-profile-name,
.header-profile-name {
    flex: 1 1 auto !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-width: 74px !important;
    max-width: 142px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: var(--pub-text, #f2f0e9) !important;
    -webkit-text-fill-color: var(--pub-text, #f2f0e9) !important;
    font-size: .9rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.header .header-actions-group,
.header-actions-group {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    padding: 0 !important;
}

.header .header-admin-btn,
.header-admin-btn {
    flex: 0 0 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    overflow: hidden !important;
    border-radius: 0 !important;
}

.header .header-admin-btn span,
.header-admin-btn span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
}

.header .header-icon-btn,
.header .header-theme-btn,
.header .theme-btn,
.header-icon-btn,
.header-theme-btn,
.theme-btn {
    flex: 0 0 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.header .user-role-badges--compact,
.header-profile .user-role-badges--compact {
    flex: 0 0 auto !important;
    max-width: 28px !important;
    overflow: hidden !important;
}

.header #globalSearchResults.global-search-results,
#globalSearchResults.global-search-results {
    top: calc(100% + 7px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-height: min(66vh, 540px) !important;
    z-index: 2147483500 !important;
    border-radius: 0 !important;
}

/* ---------- Giveaway winner reel: stable old-style case opening ---------- */
.giveaway-case-modal,
#giveawayDrawModalContent {
    max-width: min(980px, calc(100vw - 24px)) !important;
    overflow: hidden !important;
}

.giveaway-case-stage {
    position: relative !important;
    padding: 24px 0 !important;
    overflow: hidden !important;
    contain: layout paint !important;
    border-radius: 0 !important;
}

.giveaway-case-stage::before,
.giveaway-case-stage::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    z-index: 4 !important;
    width: min(120px, 18vw) !important;
    pointer-events: none !important;
}
.giveaway-case-stage::before {
    left: 0 !important;
    background: linear-gradient(90deg, rgba(0,0,0,.66), transparent) !important;
}
.giveaway-case-stage::after {
    right: 0 !important;
    background: linear-gradient(270deg, rgba(0,0,0,.66), transparent) !important;
}
body.light .giveaway-case-stage::before {
    background: linear-gradient(90deg, rgba(244,241,232,.94), transparent) !important;
}
body.light .giveaway-case-stage::after {
    background: linear-gradient(270deg, rgba(244,241,232,.94), transparent) !important;
}

.giveaway-case-pointer {
    z-index: 8 !important;
    width: 3px !important;
    transform: translateX(-50%) !important;
}

.giveaway-case-viewport {
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
    transform: translateZ(0) !important;
}

.giveaway-case-reel {
    display: flex !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: max-content !important;
    padding: 0 calc(50% - 70px) !important;
    will-change: transform !important;
    transform: translate3d(0,0,0) !important;
    backface-visibility: hidden !important;
}

.giveaway-case-reel--preview {
    animation: v39CasePreviewRoll 1.05s linear infinite !important;
}

@keyframes v39CasePreviewRoll {
    from { transform: translate3d(0,0,0); }
    to { transform: translate3d(-304px,0,0); }
}

.giveaway-case-card {
    flex: 0 0 140px !important;
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
    min-height: 148px !important;
    display: grid !important;
    justify-items: center !important;
    align-content: center !important;
    gap: 8px !important;
    padding: 13px 9px 11px !important;
    border-radius: 0 !important;
    transform: none !important;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}

.giveaway-case-card:hover {
    transform: none !important;
}

.giveaway-case-card.is-target {
    border-color: var(--pub-accent, #d4251d) !important;
}

.giveaway-case-card.is-winner {
    transform: translateY(-7px) scale(1.045) !important;
    border-color: var(--pub-accent, #d4251d) !important;
    box-shadow: 0 0 0 2px var(--pub-accent, #d4251d), 0 20px 46px rgba(212,37,29,.34) !important;
}

.giveaway-case-avatar,
.giveaway-case-winner-avatar {
    border-radius: 50% !important;
    overflow: hidden !important;
}

.giveaway-case-avatar img,
.giveaway-case-winner-avatar img {
    border-radius: 50% !important;
    object-fit: cover !important;
}

/* ---------- Mini footer: no dead disappearing at bottom ---------- */
.site-mini-footer {
    position: fixed !important;
    left: 50% !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    z-index: 6500 !important;
    width: min(680px, calc(100vw - 24px)) !important;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translate3d(-50%, 16px, 0) !important;
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease !important;
    will-change: opacity, transform !important;
}

.site-mini-footer.is-visible,
body.v39-footer-visible .site-mini-footer,
body.site-mini-footer-force .site-mini-footer {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(-50%, 0, 0) !important;
}

.site-mini-footer-inner,
.site-mini-footer-links a,
.site-mini-footer-links button,
.site-mini-footer-mark {
    border-radius: 0 !important;
}

/* ---------- Performance lite layer: keep site alive without heavy memory churn ---------- */
body.v39-performance-lite::before {
    display: none !important;
}

body.v39-performance-lite .vfx-ripple {
    animation-duration: .18s !important;
}

body.v39-paused *,
body.v39-paused *::before,
body.v39-paused *::after {
    animation-play-state: paused !important;
}

body.v39-performance-lite :is(.video-card,.feed-card,.community-post-card,.donate-card,.giveaway-card,.winner-card,.modal-content) {
    content-visibility: auto;
    contain-intrinsic-size: 320px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
    }
}

@media (max-width: 1180px) {
    .header .header-inner,
    .header-inner {
        grid-template-columns: minmax(230px, 1fr) minmax(320px, 1.35fr) minmax(210px, auto) !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        gap: 5px 12px !important;
    }
    .header .industrial-logo-name,
    .header .industrial-logo-text { font-size: 1.25rem !important; }
    .header .industrial-logo-subtitle { display: none !important; }
    .header .header-profile { min-width: 150px !important; max-width: 200px !important; }
    .header .header-profile-name { max-width: 112px !important; }
}

@media (max-width: 900px) {
    .header .header-inner,
    .header-inner {
        min-height: 126px !important;
        grid-template-columns: minmax(220px, 1fr) minmax(220px, auto) !important;
        grid-template-rows: 46px 38px 32px !important;
        grid-template-areas:
            "brand user"
            "search search"
            "nav nav" !important;
    }
    .header .header-center,
    .header-center,
    .header .header-nav,
    #mainNavigation {
        max-width: 100% !important;
    }
}

@media (max-width: 680px) {
    .header .header-inner,
    .header-inner {
        min-height: 0 !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto auto !important;
        grid-template-areas:
            "brand"
            "user"
            "search"
            "nav" !important;
        padding: 9px 10px 10px !important;
        gap: 8px !important;
    }
    .header .header-brand,
    .header-brand,
    .header .header-right,
    .header-right,
    .header .header-center,
    .header-center,
    .header .header-nav,
    #mainNavigation {
        width: 100% !important;
        max-width: 100% !important;
        justify-self: stretch !important;
    }
    .header .header-brand,
    .header-brand,
    .header .header-right,
    .header-right,
    #userArea,
    .header-user-panel {
        justify-content: center !important;
    }
    .header .logo-live-link,
    .logo-live-link,
    .header .logo-live-link .logo-avatar,
    .header .logo-avatar,
    .logo-avatar {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        max-width: 46px !important;
        max-height: 46px !important;
    }
    .header .industrial-logo-name,
    .header .industrial-logo-text { font-size: 1.12rem !important; }
    .header .header-nav,
    #mainNavigation { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 6px !important; }
    .header .nav-tab { height: 32px !important; }
    .giveaway-case-card {
        flex-basis: 118px !important;
        width: 118px !important;
        min-width: 118px !important;
        max-width: 118px !important;
    }
    .giveaway-case-reel { padding: 0 calc(50% - 59px) !important; }
}