/* Extreme Toolbar Chaos - Enhanced Retro Styling */

@import url('https://fonts.googleapis.com/css2?family=Tahoma:wght@400;700&family=MS+Sans+Serif:wght@400;700&display=swap');

body {
    font-family: 'Tahoma', 'MS Sans Serif', sans-serif;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

.ie-window {
    box-shadow: 
        inset 2px 2px 0 rgba(255,255,255,0.8),
        inset -2px -2px 0 rgba(0,0,0,0.3),
        4px 4px 20px rgba(0,0,0,0.5);
    border-radius: 0;
}

.retro-font {
    font-family: 'Courier New', monospace;
    color: #ff0000;
    text-shadow: 3px 3px 0px #000000, -1px -1px 0px #ffffff;
    font-weight: bold;
}

.blink {
    animation: extremeBlink 0.8s infinite;
}

@keyframes extremeBlink {
    0%, 40% { opacity: 1; transform: scale(1); }
    41%, 60% { opacity: 0.3; transform: scale(1.05); }
    61%, 100% { opacity: 1; transform: scale(1); }
}

/* Enhanced CRT Monitor effect */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 2px,
            rgba(0, 255, 0, 0.03) 2px,
            rgba(0, 255, 0, 0.03) 4px
        ),
        radial-gradient(circle, transparent 50%, rgba(0,0,0,0.1) 100%);
    pointer-events: none;
    z-index: 1000;
    animation: flicker 0.15s infinite linear alternate;
}

@keyframes flicker {
    0% { opacity: 1; }
    100% { opacity: 0.98; }
}

/* Pixelated styling for maximum authenticity */
button, input, div {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* Authentic Windows XP/98 gradients */
.bg-gradient-to-r {
    background: linear-gradient(to right, #0078d4, #106ebe, #004578);
}

/* Enhanced toolbar colors with corruption effects */
.bg-purple-600 { 
    background: linear-gradient(to bottom, #7c3aed, #5b21b6) !important; 
    border-bottom: 2px solid #4c1d95;
}
.bg-blue-500 { 
    background: linear-gradient(to bottom, #3b82f6, #1d4ed8) !important;
    border-bottom: 2px solid #1e3a8a;
}
.bg-red-500 { 
    background: linear-gradient(to bottom, #ef4444, #dc2626) !important;
    border-bottom: 2px solid #b91c1c;
}
.bg-blue-400 { 
    background: linear-gradient(to bottom, #60a5fa, #3b82f6) !important;
    border-bottom: 2px solid #1d4ed8;
}
.bg-yellow-500 { 
    background: linear-gradient(to bottom, #eab308, #ca8a04) !important;
    border-bottom: 2px solid #a16207;
}
.bg-cyan-500 { 
    background: linear-gradient(to bottom, #06b6d4, #0891b2) !important;
    border-bottom: 2px solid #0e7490;
}
.bg-orange-500 { 
    background: linear-gradient(to bottom, #f97316, #ea580c) !important;
    border-bottom: 2px solid #c2410c;
}
.bg-green-500 { 
    background: linear-gradient(to bottom, #22c55e, #16a34a) !important;
    border-bottom: 2px solid #15803d;
}
.bg-pink-500 { 
    background: linear-gradient(to bottom, #ec4899, #db2777) !important;
    border-bottom: 2px solid #be185d;
}
.bg-indigo-500 { 
    background: linear-gradient(to bottom, #6366f1, #4f46e5) !important;
    border-bottom: 2px solid #4338ca;
}

/* Additional chaos colors */
.bg-purple-800 { 
    background: linear-gradient(to bottom, #6b21a8, #581c87) !important;
    border-bottom: 2px solid #4c1d95;
}
.bg-blue-300 { 
    background: linear-gradient(to bottom, #93c5fd, #60a5fa) !important;
    border-bottom: 2px solid #3b82f6;
}
.bg-orange-600 { 
    background: linear-gradient(to bottom, #ea580c, #dc2626) !important;
    border-bottom: 2px solid #c2410c;
}

/* Enhanced scrollbar styling */
::-webkit-scrollbar {
    width: 20px;
    background: #f1f1f1;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border: 2px inset #dfdfdf;
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #dfdfdf, #c1c1c1, #a1a1a1);
    border: 2px outset #dfdfdf;
    border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #c1c1c1, #a1a1a1, #818181);
}

::-webkit-scrollbar-corner {
    background: #f1f1f1;
    border: 2px inset #dfdfdf;
}

/* Achievement popup enhanced styling */
@keyframes extremeSlideIn {
    0% {
        transform: translateX(100%) rotate(10deg) scale(0.8);
        opacity: 0;
    }
    50% {
        transform: translateX(-10%) rotate(-2deg) scale(1.1);
        opacity: 1;
    }
    100% {
        transform: translateX(0) rotate(0deg) scale(1);
        opacity: 1;
    }
}

.animate-bounce {
    animation: extremeSlideIn 0.8s ease-out, extremePulse 2s ease-in-out infinite;
}

@keyframes extremePulse {
    0%, 100% { 
        transform: scale(1); 
        box-shadow: 0 0 10px rgba(255,255,0,0.5);
    }
    50% { 
        transform: scale(1.05); 
        box-shadow: 0 0 20px rgba(255,255,0,0.8);
    }
}

/* Extreme button effects */
button:active {
    transform: translateY(2px) scale(0.98);
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
    filter: brightness(0.9);
}

button:hover {
    filter: brightness(1.1) saturate(1.2);
}

/* Under construction enhanced effects */
@keyframes extremeConstruction {
    0% { transform: rotate(-3deg) scale(1); color: #ff6600; }
    25% { transform: rotate(1deg) scale(1.02); color: #ff0066; }
    50% { transform: rotate(3deg) scale(1); color: #6600ff; }
    75% { transform: rotate(-1deg) scale(0.98); color: #00ff66; }
    100% { transform: rotate(-3deg) scale(1); color: #ff6600; }
}

h1 {
    animation: extremeConstruction 3s ease-in-out infinite;
    text-shadow: 
        3px 3px 6px rgba(0,0,0,0.8),
        -1px -1px 2px rgba(255,255,255,0.5),
        0 0 10px currentColor;
    font-weight: bold;
}

/* Popup window styling */
.popup-window {
    box-shadow: 
        inset 1px 1px 0 rgba(255,255,255,0.8),
        inset -1px -1px 0 rgba(0,0,0,0.2),
        3px 3px 10px rgba(0,0,0,0.4);
    border: 2px outset #dfdfdf;
}

/* System corruption visual effects */
@keyframes dataCorruption {
    0% { filter: brightness(1) saturate(1) hue-rotate(0deg); }
    25% { filter: brightness(1.2) saturate(1.5) hue-rotate(90deg); }
    50% { filter: brightness(0.8) saturate(2) hue-rotate(180deg); }
    75% { filter: brightness(1.1) saturate(1.3) hue-rotate(270deg); }
    100% { filter: brightness(1) saturate(1) hue-rotate(360deg); }
}

.corrupted {
    animation: dataCorruption 2s ease-in-out infinite;
}

/* Window strain effects */
@keyframes windowStrain {
    0% { transform: skew(0deg, 0deg); }
    50% { transform: skew(0.5deg, 0.25deg); }
    100% { transform: skew(0deg, 0deg); }
}

.strained {
    animation: windowStrain 0.5s ease-in-out infinite;
}

/* Fake system font for maximum authenticity */
.system-font {
    font-family: 'MS Sans Serif', 'Tahoma', sans-serif;
    font-size: 11px;
    font-weight: normal;
}

/* Extreme chaos mode effects */
@keyframes chaosMode {
    0% { 
        transform: rotate(0deg) scale(1); 
        filter: hue-rotate(0deg) brightness(1);
    }
    25% { 
        transform: rotate(0.5deg) scale(1.01); 
        filter: hue-rotate(90deg) brightness(1.2);
    }
    50% { 
        transform: rotate(-0.5deg) scale(0.99); 
        filter: hue-rotate(180deg) brightness(0.8);
    }
    75% { 
        transform: rotate(0.3deg) scale(1.01); 
        filter: hue-rotate(270deg) brightness(1.1);
    }
    100% { 
        transform: rotate(0deg) scale(1); 
        filter: hue-rotate(360deg) brightness(1);
    }
}

.chaos-mode {
    animation: chaosMode 3s ease-in-out infinite;
}

/* BSOD styling for maximum authenticity */
.bsod {
    background: #000080;
    color: #ffffff;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.4;
    padding: 20px;
    white-space: pre-wrap;
}

/* Enhanced gradient backgrounds for phases */
.phase-1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.phase-2 { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.phase-3 { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.phase-4 { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
.phase-5 { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); animation: chaosMode 1s infinite; }

/* Memory leak visual effect */
@keyframes memoryLeak {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

.memory-leak {
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(255,0,0,0.1) 10px,
        rgba(255,0,0,0.1) 20px
    );
    animation: memoryLeak 2s linear infinite;
}