/* Custom Gaming & HTMX Styles */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');

html {
    background-color: #020503; /* Matrix deep black */
}

body {
    font-family: 'Inter', sans-serif;
    color: #e2e8f0;
    background-color: transparent !important;
}

.font-mono-nick {
    font-family: 'JetBrains Mono', monospace;
}

/* HTMX Transition animations */
.htmx-swapping {
    opacity: 0;
    transition: opacity 250ms ease-out;
}

.htmx-settling {
    opacity: 1;
    transition: opacity 250ms ease-in;
}

/* Custom Matrix Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #020704;
}
::-webkit-scrollbar-thumb {
    background: #064e3b;
    border-radius: 4px;
    border: 1px solid rgba(34, 197, 94, 0.2);
}
::-webkit-scrollbar-thumb:hover {
    background: #22c55e;
    box-shadow: 0 0 10px #22c55e;
}

/* Matrix Neon Glow effects */
.glow-matrix {
    box-shadow: 0 0 25px -4px rgba(34, 197, 94, 0.35);
}

.glow-matrix-lg {
    box-shadow: 0 0 40px -5px rgba(34, 197, 94, 0.45);
}

.text-matrix-glow {
    text-shadow: 0 0 12px rgba(34, 197, 94, 0.75), 0 0 25px rgba(16, 185, 129, 0.4);
}

.border-matrix-glow {
    box-shadow: inset 0 0 15px rgba(34, 197, 94, 0.15), 0 0 15px rgba(34, 197, 94, 0.2);
}

/* Gradient border box (Matrix Edition) */
.gradient-border-box {
    position: relative;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.5), rgba(16, 185, 129, 0.15), rgba(34, 197, 94, 0.4));
    padding: 1.5px;
    border-radius: 1.25rem;
}

.gradient-border-inner {
    background: rgba(3, 12, 6, 0.94);
    backdrop-filter: blur(12px);
    border-radius: calc(1.25rem - 1.5px);
}

/* Rating Badge Hover */
.rating-pill {
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.rating-pill:hover {
    transform: translateY(-2px) scale(1.08);
}

/* Copy button ripple */
.copied-pop {
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
    0% { transform: scale(0.85); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* ================= RED PILL CYBERPUNK THEME 💊 ================= */
.theme-red-pill {
    --matrix-accent: #ef4444;
}

.theme-red-pill html {
    background-color: #080203 !important;
}

.theme-red-pill body {
    background-color: transparent !important;
}

.theme-red-pill #matrix-vignette {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(20, 2, 6, 0.85), rgba(0, 0, 0, 0.95)) !important;
}

.theme-red-pill .text-matrix-glow {
    text-shadow: 0 0 12px rgba(239, 68, 68, 0.85), 0 0 25px rgba(244, 63, 94, 0.45) !important;
    color: #fca5a5 !important;
}

.theme-red-pill .glow-matrix {
    box-shadow: 0 0 25px -4px rgba(239, 68, 68, 0.45) !important;
}

.theme-red-pill .glow-matrix-lg {
    box-shadow: 0 0 40px -5px rgba(239, 68, 68, 0.55) !important;
}

.theme-red-pill ::-webkit-scrollbar-thumb {
    background: #991b1b !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

.theme-red-pill ::-webkit-scrollbar-thumb:hover {
    background: #ef4444 !important;
    box-shadow: 0 0 10px #ef4444 !important;
}

/* Dynamic Red Pill border & background accents */
.theme-red-pill .border-emerald-500\/30,
.theme-red-pill .border-emerald-900\/60,
.theme-red-pill .border-emerald-950\/80 {
    border-color: rgba(239, 68, 68, 0.35) !important;
}

.theme-red-pill .bg-emerald-500 {
    background-color: #ef4444 !important;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.4) !important;
}

.theme-red-pill .bg-emerald-500\/10,
.theme-red-pill .bg-emerald-500\/15 {
    background-color: rgba(239, 68, 68, 0.15) !important;
}

.theme-red-pill .text-emerald-400,
.theme-red-pill .text-emerald-300 {
    color: #fca5a5 !important;
}

.theme-red-pill .text-emerald-500\/70,
.theme-red-pill .text-emerald-400\/60,
.theme-red-pill .text-emerald-400\/50 {
    color: rgba(252, 165, 165, 0.65) !important;
}

/* Glitch Flash Screen Animation */
@keyframes glitchFlashAnim {
    0% { opacity: 0.85; transform: translate(0); filter: hue-rotate(90deg); }
    20% { opacity: 0.95; transform: translate(-3px, 2px); filter: invert(0.2); }
    40% { opacity: 0.75; transform: translate(3px, -2px); filter: hue-rotate(180deg); }
    60% { opacity: 0.95; transform: translate(-2px, -1px); filter: invert(0.3); }
    80% { opacity: 0.65; transform: translate(2px, 1px); }
    100% { opacity: 0; transform: translate(0); }
}

.glitch-flash-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    pointer-events-none;
    background: repeating-linear-gradient(
        0deg,
        rgba(239, 68, 68, 0.25) 0px,
        rgba(239, 68, 68, 0.25) 2px,
        transparent 2px,
        transparent 4px
    );
    animation: glitchFlashAnim 0.35s ease-out forwards;
}

/* ================= Interactive Secret Book Icon Glow States 📖 ================= */
#secret-book-btn {
    user-select: none;
    -webkit-user-select: none;
    background: transparent;
    border: none;
    padding: 0;
}

#secret-book-icon {
    display: inline-block;
    filter: drop-shadow(0 0 10px rgba(34, 197, 94, 0.45));
    transition: filter 0.25s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Hover: Subtle Crimson Red Halo Glow */
#secret-book-btn:hover #secret-book-icon {
    filter: drop-shadow(0 0 16px rgba(239, 68, 68, 0.9)) drop-shadow(0 0 28px rgba(244, 63, 94, 0.5));
    transform: scale(1.14);
}

/* Click 1 (Stage 1): Brighter Red Charge */
.book-charge-1 #secret-book-icon {
    filter: drop-shadow(0 0 24px rgba(239, 68, 68, 1)) drop-shadow(0 0 45px rgba(244, 63, 94, 0.7)) !important;
    transform: scale(1.22) !important;
}

/* Click 2 (Stage 2): Intense Pulsing Overload Glow + Shiver */
@keyframes bookOverloadAnim {
    0%, 100% { transform: scale(1.3) rotate(0deg); }
    25% { transform: scale(1.3) rotate(-5deg); }
    75% { transform: scale(1.3) rotate(5deg); }
}

.book-charge-2 #secret-book-icon {
    filter: drop-shadow(0 0 35px rgba(255, 30, 70, 1)) drop-shadow(0 0 65px rgba(239, 68, 68, 0.95)) !important;
    animation: bookOverloadAnim 0.12s infinite linear !important;
}

/* Red Pill Mode Active Glow */
.theme-red-pill #secret-book-icon {
    filter: drop-shadow(0 0 25px rgba(239, 68, 68, 1)) drop-shadow(0 0 50px rgba(255, 0, 60, 0.75)) !important;
}

/* ================= Matrix Falling Nicks Streams (Zero-Ghosting Overlay) ================= */
.matrix-falling-nick {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.15;
    pointer-events: none;
    user-select: none;
    opacity: 0.8; /* 20% dimmer */
    will-change: transform;
    animation: matrixNickFall linear forwards;
}

@keyframes matrixNickFall {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(calc(100vh + 100%));
    }
}

.matrix-falling-nick .nick-char {
    color: #e2ffe8;
    text-shadow: 0 0 6px rgba(0, 255, 102, 0.7), 0 0 12px rgba(0, 255, 102, 0.35);
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.matrix-falling-nick .nick-space {
    height: 14px;
}

/* Red Pill Mode */
.theme-red-pill .matrix-falling-nick .nick-char {
    color: #ffe4e6;
    text-shadow: 0 0 6px rgba(255, 0, 60, 0.75), 0 0 12px rgba(255, 0, 60, 0.4);
}

/* ================= Header Live Search & Dropdown ================= */
#header-search-dropdown,
#mobile-search-dropdown {
    background: rgba(3, 12, 5, 0.97);
    border-color: rgba(34, 197, 94, 0.35);
    box-shadow: 0 10px 35px -5px rgba(0, 0, 0, 0.9), 0 0 20px -5px rgba(34, 197, 94, 0.25);
}

.search-result-item {
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.search-result-item:hover,
.search-result-item.selected {
    background-color: rgba(6, 78, 59, 0.45) !important;
}

.search-result-item.selected .font-mono-nick,
.search-result-item:hover .font-mono-nick {
    color: #86efac !important;
}

.search-highlight {
    background-color: rgba(34, 197, 94, 0.25);
    color: #a7f3d0;
    border-radius: 2px;
    padding: 0 1px;
}

/* Custom mini scrollbar for search results */
#header-search-results::-webkit-scrollbar,
#mobile-search-results::-webkit-scrollbar {
    width: 6px;
}
#header-search-results::-webkit-scrollbar-track,
#mobile-search-results::-webkit-scrollbar-track {
    background: rgba(1, 6, 2, 0.8);
}
#header-search-results::-webkit-scrollbar-thumb,
#mobile-search-results::-webkit-scrollbar-thumb {
    background: #064e3b;
    border-radius: 3px;
}

/* Red Pill Mode Search Overrides */
.theme-red-pill #header-search-container input,
.theme-red-pill #mobile-search-bar input {
    background-color: rgba(18, 3, 5, 0.95) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
    color: #fca5a5 !important;
}

.theme-red-pill #header-search-container input:focus,
.theme-red-pill #mobile-search-bar input:focus {
    border-color: rgba(239, 68, 68, 0.85) !important;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.3) !important;
}

.theme-red-pill #header-search-dropdown,
.theme-red-pill #mobile-search-dropdown {
    background: rgba(18, 3, 5, 0.98) !important;
    border-color: rgba(239, 68, 68, 0.45) !important;
    box-shadow: 0 10px 35px -5px rgba(0, 0, 0, 0.95), 0 0 25px -5px rgba(239, 68, 68, 0.3) !important;
}

.theme-red-pill #header-search-footer,
.theme-red-pill #mobile-search-footer {
    background-color: rgba(10, 1, 3, 0.95) !important;
    border-color: rgba(239, 68, 68, 0.25) !important;
    color: rgba(252, 165, 165, 0.6) !important;
}

.theme-red-pill .search-result-item:hover,
.theme-red-pill .search-result-item.selected {
    background-color: rgba(153, 27, 27, 0.4) !important;
}

.theme-red-pill .search-result-item.selected .font-mono-nick,
.theme-red-pill .search-result-item:hover .font-mono-nick {
    color: #fca5a5 !important;
}

.theme-red-pill .search-copy-btn {
    background-color: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
    color: #fca5a5 !important;
}

.theme-red-pill .search-copy-btn:hover {
    background-color: rgba(239, 68, 68, 0.35) !important;
    color: #ffffff !important;
    border-color: rgba(239, 68, 68, 0.7) !important;
}

.theme-red-pill .search-highlight {
    background-color: rgba(239, 68, 68, 0.35) !important;
    color: #ffffff !important;
}

.theme-red-pill #header-search-icon,
.theme-red-pill #mobile-search-icon {
    color: rgba(239, 68, 68, 0.7) !important;
}

.theme-red-pill #header-search-clear,
.theme-red-pill #mobile-search-clear {
    color: rgba(239, 68, 68, 0.8) !important;
}

.theme-red-pill #header-search-results::-webkit-scrollbar-thumb,
.theme-red-pill #mobile-search-results::-webkit-scrollbar-thumb {
    background: #991b1b !important;
}

/* Stats CTA Center Card Red Pill styling */
.theme-red-pill #stats-cta-card {
    background-color: rgba(18, 3, 5, 0.95) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.9), 0 0 20px -5px rgba(239, 68, 68, 0.25) !important;
}

.theme-red-pill #stats-cta-count {
    color: #fca5a5 !important;
    text-shadow: 0 0 15px rgba(239, 68, 68, 0.85), 0 0 25px rgba(244, 63, 94, 0.45) !important;
}

.theme-red-pill #stats-cta-btn {
    background: linear-gradient(to right, #ef4444, #dc2626) !important;
    box-shadow: 0 10px 20px -5px rgba(239, 68, 68, 0.45) !important;
}

.theme-red-pill #stats-cta-btn:hover {
    background: linear-gradient(to right, #f87171, #ef4444) !important;
}

/* Symmetrical 3-Column Hero Grid (Column 2 is dead-center, aligned with 1st place Podium) */
@media (min-width: 1024px) {
    .hero-3col-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    }
}

#stats-cta-card {
    min-width: 250px;
}