/* ===========================
   New Year Episode 19 Decorations
   Vector discovered New Year's and went decoration-crazy!
   Gold, Black, Silver, Champagne theme
   =========================== */

/* Only apply to episode 19 */
.episode-post.episode-19-newyear {
    position: relative;
    overflow: visible;
}

/* Gold and Black Striped Borders on Dialogue Boxes */
.episode-post.episode-19-newyear .character-dialogue::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 4px solid transparent;
    border-image: repeating-linear-gradient(
        45deg,
        #d4af37 0px,
        #d4af37 8px,
        #000000 8px,
        #000000 16px,
        #c0c0c0 16px,
        #c0c0c0 24px,
        #d4af37 24px,
        #d4af37 32px
    ) 4;
    pointer-events: none;
    z-index: 2;
    border-radius: inherit;
    transform: none;
    opacity: 1;
    mix-blend-mode: normal;
}

/* Sparkling Confetti Effect */
.episode-post.episode-19-newyear .character-dialogue::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    background: 
        radial-gradient(circle at 10% 20%, rgba(212, 175, 55, 0.8) 2px, transparent 2px),
        radial-gradient(circle at 30% 50%, rgba(192, 192, 192, 0.6) 1.5px, transparent 1.5px),
        radial-gradient(circle at 50% 80%, rgba(212, 175, 55, 0.7) 2px, transparent 2px),
        radial-gradient(circle at 70% 30%, rgba(245, 222, 179, 0.5) 1.5px, transparent 1.5px),
        radial-gradient(circle at 90% 60%, rgba(212, 175, 55, 0.8) 2px, transparent 2px);
    background-size: 100% 100%;
    opacity: 0;
    animation: sparkle 3s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes sparkle {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

/* Gold Confetti Streamers at Top */
.episode-post.episode-19-newyear .post-header::before {
    content: '';
    position: absolute;
    top: -50px;
    left: 0;
    right: 0;
    height: 70px;
    pointer-events: none;
    z-index: 10;
    /* Wavy gold streamers */
    background-image: 
        linear-gradient(90deg, transparent 0%, #d4af37 20%, transparent 40%, #d4af37 60%, transparent 80%, #d4af37 100%);
    background-size: 100% 3px;
    background-position: 0% 15px;
    background-repeat: no-repeat;
    opacity: 0.7;
}

/* Champagne Confetti/Stars Falling */
.episode-post.episode-19-newyear .post-header::after {
    content: '';
    position: absolute;
    top: -50px;
    left: 0;
    right: 0;
    height: 70px;
    pointer-events: none;
    z-index: 11;
    background-image: 
        /* Gold stars and confetti */
        radial-gradient(ellipse 4px 8px at 5% 30px, #d4af37 0%, #d4af37 90%, transparent 90%),
        radial-gradient(ellipse 4px 8px at 15% 35px, #c0c0c0 0%, #c0c0c0 90%, transparent 90%),
        radial-gradient(ellipse 4px 8px at 25% 32px, #d4af37 0%, #d4af37 90%, transparent 90%),
        radial-gradient(ellipse 4px 8px at 35% 38px, #f5deb3 0%, #f5deb3 90%, transparent 90%),
        radial-gradient(ellipse 4px 8px at 45% 33px, #d4af37 0%, #d4af37 90%, transparent 90%),
        radial-gradient(ellipse 4px 8px at 55% 36px, #c0c0c0 0%, #c0c0c0 90%, transparent 90%),
        radial-gradient(ellipse 4px 8px at 65% 31px, #d4af37 0%, #d4af37 90%, transparent 90%),
        radial-gradient(ellipse 4px 8px at 75% 37px, #f5deb3 0%, #f5deb3 90%, transparent 90%),
        radial-gradient(ellipse 4px 8px at 85% 34px, #d4af37 0%, #d4af37 90%, transparent 90%),
        radial-gradient(ellipse 4px 8px at 95% 32px, #c0c0c0 0%, #c0c0c0 90%, transparent 90%);
    background-size: 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%;
    background-position: 0% 0%, 10% 0%, 20% 0%, 30% 0%, 40% 0%, 50% 0%, 60% 0%, 70% 0%, 80% 0%, 90% 0%;
    background-repeat: no-repeat;
    animation: confetti-fall 3s ease-in-out infinite;
}

@keyframes confetti-fall {
    0%, 100% { 
        opacity: 1;
        transform: translateY(0);
    }
    50% { 
        opacity: 0.7;
        transform: translateY(5px);
    }
}

/* Make post-header relative for positioning */
.episode-post.episode-19-newyear .post-header {
    position: relative;
    padding-top: 50px;
}

/* Gold and Black border for UNAUTHORIZED ACCESS box */
.episode-post.episode-19-newyear .post-hijacking-notice {
    border: 3px solid transparent;
    border-image: repeating-linear-gradient(
        45deg,
        #d4af37 0px,
        #d4af37 10px,
        #000000 10px,
        #000000 20px,
        #c0c0c0 20px,
        #c0c0c0 30px,
        #d4af37 30px,
        #d4af37 40px
    ) 3;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(192, 192, 192, 0.1) 100%);
    position: relative;
    padding: 1rem;
    margin-bottom: 2rem;
}

.episode-post.episode-19-newyear .post-hijacking-notice {
    text-align: center;
}

.episode-post.episode-19-newyear .post-hijacking-notice strong {
    color: #d4af37;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.8), 0 0 20px rgba(212, 175, 55, 0.5);
    font-size: 1.1em;
}

/* Falling Confetti Effect - Gold, Silver, Black, Champagne - Individual particles falling */
.episode-post.episode-19-newyear::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
    /* Individual confetti particles positioned across width, falling down */
    background-image: 
        /* Gold particles - scattered across */
        radial-gradient(circle at 5% 0%, rgba(212, 175, 55, 0.7) 2px, transparent 2px),
        radial-gradient(circle at 12% 0%, rgba(212, 175, 55, 0.6) 1.5px, transparent 1.5px),
        radial-gradient(circle at 18% 0%, rgba(212, 175, 55, 0.7) 2px, transparent 2px),
        radial-gradient(circle at 25% 0%, rgba(212, 175, 55, 0.5) 1px, transparent 1px),
        radial-gradient(circle at 32% 0%, rgba(212, 175, 55, 0.7) 1.8px, transparent 1.8px),
        radial-gradient(circle at 38% 0%, rgba(212, 175, 55, 0.6) 1.5px, transparent 1.5px),
        radial-gradient(circle at 45% 0%, rgba(212, 175, 55, 0.7) 2px, transparent 2px),
        radial-gradient(circle at 52% 0%, rgba(212, 175, 55, 0.5) 1px, transparent 1px),
        radial-gradient(circle at 58% 0%, rgba(212, 175, 55, 0.7) 1.8px, transparent 1.8px),
        radial-gradient(circle at 65% 0%, rgba(212, 175, 55, 0.6) 1.5px, transparent 1.5px),
        radial-gradient(circle at 72% 0%, rgba(212, 175, 55, 0.7) 2px, transparent 2px),
        radial-gradient(circle at 78% 0%, rgba(212, 175, 55, 0.5) 1px, transparent 1px),
        radial-gradient(circle at 85% 0%, rgba(212, 175, 55, 0.7) 1.8px, transparent 1.8px),
        radial-gradient(circle at 92% 0%, rgba(212, 175, 55, 0.6) 1.5px, transparent 1.5px),
        radial-gradient(circle at 98% 0%, rgba(212, 175, 55, 0.7) 2px, transparent 2px),
        /* Silver particles */
        radial-gradient(circle at 8% 0%, rgba(192, 192, 192, 0.5) 1.5px, transparent 1.5px),
        radial-gradient(circle at 15% 0%, rgba(192, 192, 192, 0.4) 1px, transparent 1px),
        radial-gradient(circle at 22% 0%, rgba(192, 192, 192, 0.5) 1.8px, transparent 1.8px),
        radial-gradient(circle at 28% 0%, rgba(192, 192, 192, 0.4) 1px, transparent 1px),
        radial-gradient(circle at 35% 0%, rgba(192, 192, 192, 0.5) 1.5px, transparent 1.5px),
        radial-gradient(circle at 42% 0%, rgba(192, 192, 192, 0.4) 1px, transparent 1px),
        radial-gradient(circle at 48% 0%, rgba(192, 192, 192, 0.5) 1.8px, transparent 1.8px),
        radial-gradient(circle at 55% 0%, rgba(192, 192, 192, 0.4) 1px, transparent 1px),
        radial-gradient(circle at 62% 0%, rgba(192, 192, 192, 0.5) 1.5px, transparent 1.5px),
        radial-gradient(circle at 68% 0%, rgba(192, 192, 192, 0.4) 1px, transparent 1px),
        radial-gradient(circle at 75% 0%, rgba(192, 192, 192, 0.5) 1.8px, transparent 1.8px),
        radial-gradient(circle at 82% 0%, rgba(192, 192, 192, 0.4) 1px, transparent 1px),
        radial-gradient(circle at 88% 0%, rgba(192, 192, 192, 0.5) 1.5px, transparent 1.5px),
        radial-gradient(circle at 95% 0%, rgba(192, 192, 192, 0.4) 1px, transparent 1px),
        /* Champagne particles */
        radial-gradient(circle at 3% 0%, rgba(245, 222, 179, 0.6) 1.8px, transparent 1.8px),
        radial-gradient(circle at 10% 0%, rgba(245, 222, 179, 0.5) 1px, transparent 1px),
        radial-gradient(circle at 17% 0%, rgba(245, 222, 179, 0.6) 1.5px, transparent 1.5px),
        radial-gradient(circle at 23% 0%, rgba(245, 222, 179, 0.5) 1px, transparent 1px),
        radial-gradient(circle at 30% 0%, rgba(245, 222, 179, 0.6) 1.8px, transparent 1.8px),
        radial-gradient(circle at 37% 0%, rgba(245, 222, 179, 0.5) 1px, transparent 1px),
        radial-gradient(circle at 43% 0%, rgba(245, 222, 179, 0.6) 1.5px, transparent 1.5px),
        radial-gradient(circle at 50% 0%, rgba(245, 222, 179, 0.5) 1px, transparent 1px),
        radial-gradient(circle at 57% 0%, rgba(245, 222, 179, 0.6) 1.8px, transparent 1.8px),
        radial-gradient(circle at 63% 0%, rgba(245, 222, 179, 0.5) 1px, transparent 1px),
        radial-gradient(circle at 70% 0%, rgba(245, 222, 179, 0.6) 1.5px, transparent 1.5px),
        radial-gradient(circle at 77% 0%, rgba(245, 222, 179, 0.5) 1px, transparent 1px),
        radial-gradient(circle at 83% 0%, rgba(245, 222, 179, 0.6) 1.8px, transparent 1.8px),
        radial-gradient(circle at 90% 0%, rgba(245, 222, 179, 0.5) 1px, transparent 1px),
        radial-gradient(circle at 97% 0%, rgba(245, 222, 179, 0.6) 1.5px, transparent 1.5px);
    background-size: 100% 500%;
    background-position: 0% -100%;
    background-repeat: no-repeat;
    animation: confetti-fall-down 20s linear infinite;
    opacity: 0.6;
}

/* Second layer of confetti with different speed - subtle accent layer */
.episode-post.episode-19-newyear::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
    /* Lighter second layer for depth - fewer particles */
    background-image: 
        radial-gradient(circle at 7% 0%, rgba(212, 175, 55, 0.5) 1.5px, transparent 1.5px),
        radial-gradient(circle at 14% 0%, rgba(192, 192, 192, 0.4) 1px, transparent 1px),
        radial-gradient(circle at 21% 0%, rgba(245, 222, 179, 0.5) 1.2px, transparent 1.2px),
        radial-gradient(circle at 27% 0%, rgba(212, 175, 55, 0.4) 1px, transparent 1px),
        radial-gradient(circle at 34% 0%, rgba(192, 192, 192, 0.5) 1.5px, transparent 1.5px),
        radial-gradient(circle at 41% 0%, rgba(245, 222, 179, 0.4) 1px, transparent 1px),
        radial-gradient(circle at 47% 0%, rgba(212, 175, 55, 0.5) 1.2px, transparent 1.2px),
        radial-gradient(circle at 54% 0%, rgba(192, 192, 192, 0.4) 1px, transparent 1px),
        radial-gradient(circle at 61% 0%, rgba(245, 222, 179, 0.5) 1.5px, transparent 1.5px),
        radial-gradient(circle at 67% 0%, rgba(212, 175, 55, 0.4) 1px, transparent 1px),
        radial-gradient(circle at 74% 0%, rgba(192, 192, 192, 0.5) 1.2px, transparent 1.2px),
        radial-gradient(circle at 81% 0%, rgba(245, 222, 179, 0.4) 1px, transparent 1px),
        radial-gradient(circle at 87% 0%, rgba(212, 175, 55, 0.5) 1.5px, transparent 1.5px),
        radial-gradient(circle at 94% 0%, rgba(192, 192, 192, 0.4) 1px, transparent 1px);
    background-size: 100% 600%;
    background-position: 0% -100%;
    background-repeat: no-repeat;
    animation: confetti-fall-down-slow 25s linear infinite;
    opacity: 0.4;
}

@keyframes confetti-fall-down {
    0% {
        background-position: 0% -100%;
    }
    100% {
        background-position: 0% 400%;
    }
}

@keyframes confetti-fall-down-slow {
    0% {
        background-position: 0% -100%;
    }
    100% {
        background-position: 0% 500%;
    }
}

/* Gold and Black Striped Container */
.episode-post.episode-19-newyear .container-narrow {
    background: repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 2px,
        rgba(212, 175, 55, 0.05) 2px,
        rgba(212, 175, 55, 0.05) 4px,
        transparent 4px,
        transparent 6px,
        rgba(0, 0, 0, 0.05) 6px,
        rgba(0, 0, 0, 0.05) 8px
    );
    border-left: 4px solid #d4af37;
    border-right: 4px solid #d4af37;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    position: relative;
}

/* Gold sparkle effect on hover */
.episode-post.episode-19-newyear .character-dialogue:hover {
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.6),
                0 0 40px rgba(212, 175, 55, 0.4);
    transition: box-shadow 0.3s ease;
}

/* Make sure content is above confetti */
.episode-post.episode-19-newyear .post-content {
    position: relative;
    z-index: 2;
}

.episode-post.episode-19-newyear .post-header {
    position: relative;
    z-index: 2;
}

/* New Year's Sidebar Styling - targets sidebar when episode 19 is present */
body:has(.episode-19-newyear) .character-sidebar {
    background: 
        linear-gradient(
            135deg,
            rgba(15, 15, 15, 0.97) 0%,
            rgba(30, 30, 30, 0.97) 100%
        ),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(212, 175, 55, 0.05) 2px,
            rgba(212, 175, 55, 0.05) 4px,
            transparent 4px,
            transparent 6px,
            rgba(0, 0, 0, 0.05) 6px,
            rgba(0, 0, 0, 0.05) 8px
        );
    
    border: 2px solid #d4af37 !important;
    border-top: 2px solid #d4af37 !important;
    border-right: 2px solid #d4af37 !important;
    border-bottom: 2px solid #d4af37 !important;
    border-left: 2px solid #d4af37 !important;
    border-color: #d4af37 !important;
    box-shadow: 
        4px 4px 0 rgba(0, 0, 0, 0.5),
        0 0 30px rgba(212, 175, 55, 0.6),
        inset 0 0 30px rgba(212, 175, 55, 0.1);
}

body:has(.episode-19-newyear) .character-sidebar .sidebar-header h3 {
    color: #d4af37;
    text-shadow: 
        0 0 10px rgba(212, 175, 55, 0.8),
        2px 0 5px rgba(212, 175, 55, 0.4),
        -2px 0 5px rgba(192, 192, 192, 0.3);
}

body:has(.episode-19-newyear) .character-sidebar .sidebar-section {
    border-bottom-color: rgba(212, 175, 55, 0.3);
}

body:has(.episode-19-newyear) .character-sidebar .sidebar-section h4 {
    color: #d4af37;
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.6);
}

body:has(.episode-19-newyear) .character-sidebar .character-status-item {
    background: rgba(212, 175, 55, 0.1) !important;
    border-left: 3px solid #d4af37 !important;
    border-image: none !important;
}

/* Override the inline border-left color for character status items - force gold border */
/* This needs to override inline styles, so we use !important with high specificity */
body:has(.episode-19-newyear) .character-sidebar .character-status-item {
    border-left: 3px solid #d4af37 !important;
    border-left-color: #d4af37 !important;
}

/* Additional specificity to catch all variations */
body:has(.episode-19-newyear) .sidebar-content .character-list .character-status-item {
    border-left: 3px solid #d4af37 !important;
}

body:has(.episode-19-newyear) .character-sidebar .stat-value {
    color: #d4af37;
    text-shadow: 0 0 5px rgba(212, 175, 55, 0.6);
}

body:has(.episode-19-newyear) .character-sidebar .feature-list li {
    border-left-color: rgba(212, 175, 55, 0.4);
}

body:has(.episode-19-newyear) .character-sidebar .feature-list li:hover {
    border-left-color: #d4af37;
    color: #d4af37;
}

body:has(.episode-19-newyear) .character-sidebar .construction-notice {
    color: #d4af37;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.8);
}

/* Confetti particles on sidebar */
body:has(.episode-19-newyear) .character-sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 10% 15%, rgba(212, 175, 55, 0.4) 1px, transparent 1px),
        radial-gradient(circle at 30% 35%, rgba(192, 192, 192, 0.3) 0.8px, transparent 0.8px),
        radial-gradient(circle at 50% 55%, rgba(245, 222, 179, 0.4) 1px, transparent 1px),
        radial-gradient(circle at 70% 75%, rgba(212, 175, 55, 0.3) 0.8px, transparent 0.8px),
        radial-gradient(circle at 90% 25%, rgba(192, 192, 192, 0.4) 1px, transparent 1px);
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.6;
    animation: sidebar-confetti 4s ease-in-out infinite;
}

@keyframes sidebar-confetti {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.8; }
}

/* Gold sparkle border effect */
body:has(.episode-19-newyear) .character-sidebar::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border: 2px solid transparent;
    border-image: repeating-linear-gradient(
        45deg,
        #d4af37 0px,
        #d4af37 4px,
        #000000 4px,
        #000000 8px,
        #c0c0c0 8px,
        #c0c0c0 12px
    ) 2;
    border-radius: 6px;
    pointer-events: none;
    z-index: -1;
    opacity: 0.7;
    animation: sidebar-border-sparkle 3s ease-in-out infinite;
}

@keyframes sidebar-border-sparkle {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* Gold scrollbar for sidebar */
body:has(.episode-19-newyear) .character-sidebar::-webkit-scrollbar {
    width: 12px;
}

body:has(.episode-19-newyear) .character-sidebar::-webkit-scrollbar-track {
    background: rgba(15, 15, 15, 0.5);
    border-radius: 6px;
}

body:has(.episode-19-newyear) .character-sidebar::-webkit-scrollbar-thumb {
    background: #d4af37;
    border-radius: 6px;
    border: 2px solid rgba(15, 15, 15, 0.3);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
}

body:has(.episode-19-newyear) .character-sidebar::-webkit-scrollbar-thumb:hover {
    background: #f4d03f;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.8);
}

/* Firefox scrollbar */
body:has(.episode-19-newyear) .character-sidebar {
    scrollbar-width: thin;
    scrollbar-color: #d4af37 rgba(15, 15, 15, 0.5);
}

/* Responsive: Tone down on mobile */
@media (max-width: 768px) {
    .episode-post.episode-19-newyear .character-dialogue {
        border-width: 2px;
    }
    
    .episode-post.episode-19-newyear::before {
        opacity: 0.4;
    }
    
    .episode-post.episode-19-newyear .post-header::before {
        height: 50px;
        top: -35px;
    }
    
    .episode-post.episode-19-newyear .post-header::after {
        height: 50px;
        top: -35px;
    }
    
    .episode-post.episode-19-newyear .post-header {
        padding-top: 40px;
    }
    
    .episode-post.episode-19-newyear .container-narrow {
        border-left-width: 2px;
        border-right-width: 2px;
    }
}