/* Import fonts directly in CSS as backup - FONT FIX */
@import url('https://fonts.googleapis.com/css2?family=Sedgwick+Ave+Display&family=Pirata+One&family=Rajdhani:wght@300;400;600&family=Share+Tech+Mono&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 50%, #0a0a0a 100%);
    color: #2c4162;
    font-family: 'Rajdhani', sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    padding-bottom: 120px; /* Space for footer visitor info */
}

/* Scanlines effect */
.scanlines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.02;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(139, 69, 19, 0.1) 2px,
        rgba(139, 69, 19, 0.1) 4px
    );
    animation: scanlineMove 0.1s linear infinite;
}

@keyframes scanlineMove {
    0% { transform: translateY(0); }
    100% { transform: translateY(4px); }
}

/* Matrix-style code rain - BRIGHTNESS FIX */
.matrix-rain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    opacity: 0.8; /* CHANGED from 0.3 to 0.8 - much brighter */
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    color: #00d9ff; /* CHANGED from #2c4162 to bright cyan */
    overflow: hidden;
    pointer-events: none; /* Ensure it doesn't interfere with clicks */
}

.matrix-column {
    position: absolute;
    top: -100%;
    white-space: nowrap;
    animation: matrixFall linear infinite;
}

@keyframes matrixFall {
    0% { transform: translateY(-100vh); }
    100% { transform: translateY(100vh); }
}

/* Circuit Horse Background Element */
.circuit-horse {
    position: fixed;
    top: 20%;
    right: -10%;
    width: 500px;
    height: 400px;
    opacity: 0.03;
    z-index: -1;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 400'><path d='M100 200 Q150 150 200 180 L250 160 Q300 140 350 170 L380 200 Q400 220 420 200 L450 220 Q430 260 400 240 L370 270 Q340 300 310 270 L280 290 Q250 320 220 290 L190 310 Q160 340 130 310 L100 280 Q80 250 100 280 Z M180 180 Q200 160 220 180 M280 190 Q300 170 320 190 M350 210 Q370 190 380 210' stroke='%238b4513' stroke-width='2' fill='none'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    animation: circuitHorseGlow 4s ease-in-out infinite alternate;
}

@keyframes circuitHorseGlow {
    0% { opacity: 0.03; transform: translateX(0); }
    100% { opacity: 0.08; transform: translateX(-20px); }
}

/* Animated Circuit Background */
.circuit-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.05;
    background-image: 
        linear-gradient(90deg, #8b4513 1px, transparent 1px),
        linear-gradient(180deg, #8b4513 1px, transparent 1px);
    background-size: 50px 50px;
    animation: circuitFlow 20s linear infinite;
}

@keyframes circuitFlow {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 50px); }
}

/* Glowing particles */
.particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #8b4513;
    border-radius: 50%;
    animation: float 6s ease-in-out infinite;
    box-shadow: 0 0 10px #8b4513;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 1; }
    50% { transform: translateY(-20px) rotate(180deg); opacity: 0.5; }
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
    position: relative;
    z-index: 1;
}

.logo-section {
    text-align: center;
    margin-bottom: 3rem;
}

/* FONT FIX - Make sure graffiti fonts load */
.logo-text {
    font-family: 'Sedgwick Ave Display', cursive, Arial, sans-serif; /* Added fallbacks */
    font-size: 4.5rem;
    font-weight: 400; /* Changed from 900 to 400 for Sedgwick */
    background: linear-gradient(45deg, #2c4162, #4a6fa5, #2c4162);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 3s ease-in-out infinite;
    text-shadow: 
        3px 3px 0px #8b4513,
        6px 6px 0px #654321,
        9px 9px 0px #2c4162,
        12px 12px 15px rgba(0, 0, 0, 0.8);
    margin-bottom: 1rem;
    letter-spacing: 3px;
    text-transform: uppercase;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.subtitle {
    font-family: 'Sedgwick Ave Display', cursive, Arial, sans-serif; /* CHANGED to graffiti font */
    font-size: 1.4rem;
    color: #8b4513;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 2rem;
    font-weight: 400;
    text-shadow: 
        2px 2px 0px #2c4162,
        4px 4px 0px #654321,
        6px 6px 8px rgba(0, 0, 0, 0.6); /* REDUCED shadow for readability */
    animation: subtitleGlow 2s ease-in-out infinite alternate;
}

@keyframes subtitleGlow {
    0% { text-shadow: 
        2px 2px 0px #2c4162,
        4px 4px 0px #654321,
        6px 6px 8px rgba(0, 0, 0, 0.6),
        0 0 5px rgba(139, 69, 19, 0.5); }
    100% { text-shadow: 
        2px 2px 0px #2c4162,
        4px 4px 0px #654321,
        6px 6px 8px rgba(0, 0, 0, 0.6),
        0 0 15px rgba(139, 69, 19, 0.8); } /* REDUCED glow intensity */
}

.wake-up-text {
    font-family: 'Share Tech Mono', monospace;
    font-size: 1rem;
    color: #2c4162;
    opacity: 0;
    animation: typewriter 4s steps(20) forwards, blink 1s infinite;
    margin-bottom: 2rem;
    text-align: center;
}

@keyframes typewriter {
    0% { opacity: 1; width: 0; }
    100% { opacity: 1; width: 100%; }
}

@keyframes blink {
    0%, 50% { border-right: 2px solid #2c4162; }
    51%, 100% { border-right: 2px solid transparent; }
}

.auth-container {
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid rgba(139, 69, 19, 0.6);
    border-radius: 15px;
    padding: 3rem;
    backdrop-filter: blur(10px);
    box-shadow: 
        0 0 50px rgba(139, 69, 19, 0.3),
        inset 0 0 20px rgba(44, 65, 98, 0.1);
    text-align: center;
    max-width: 700px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.auth-container::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #8b4513, transparent, #8b4513);
    z-index: -1;
    border-radius: 15px;
    animation: borderGlow 2s linear infinite;
}

@keyframes borderGlow {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}

.status-message {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    color: #ffffff;
    text-shadow: 0 0 10px rgba(44, 65, 98, 0.5);
}

/* Matrix Pills */
.pills-container {
    display: flex;
    gap: 3rem;
    margin: 2rem 0;
    justify-content: center;
}

.pill {
    width: 80px;
    height: 30px;
    border-radius: 15px;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    animation: pillFloat 3s ease-in-out infinite;
}

.pill:nth-child(2) {
    animation-delay: 1.5s;
}

@keyframes pillFloat {
    0%, 100% { transform: translateY(0px) rotateX(0deg); }
    50% { transform: translateY(-10px) rotateX(15deg); }
}

.red-pill {
    background: linear-gradient(145deg, #ff1744, #d50000);
    border: 2px solid #ff5722;
}

.red-pill:hover {
    box-shadow: 0 0 30px rgba(255, 23, 68, 0.8);
    transform: scale(1.1);
}

.blue-pill {
    background: linear-gradient(145deg, #2196f3, #0d47a1);
    border: 2px solid #03a9f4;
}

.blue-pill:hover {
    box-shadow: 0 0 30px rgba(33, 150, 243, 0.8);
    transform: scale(1.1);
}

/* Safe Lock Animation - Realistic Combination Lock */
.safe-container {
    position: relative;
    margin: 2rem auto;
    width: 220px;
    height: 220px;
}

.safe-body {
    width: 220px;
    height: 220px;
    background: linear-gradient(145deg, #3a3a3a, #1a1a1a);
    border-radius: 50%;
    border: 6px solid #555;
    position: relative;
    box-shadow: 
        0 0 40px rgba(0, 0, 0, 0.8),
        inset 0 0 30px rgba(255, 255, 255, 0.1),
        inset 0 0 60px rgba(0, 0, 0, 0.5);
}

.safe-dial {
    width: 180px;
    height: 180px;
    background: radial-gradient(circle at 30% 30%, #4a4a4a, #2a2a2a, #000);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 4px solid #8b4513;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 
        inset 0 0 20px rgba(0, 0, 0, 0.7),
        0 4px 8px rgba(0, 0, 0, 0.3);
}

.safe-dial::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, #8b4513, #654321);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}

.safe-dial:hover {
    box-shadow: 
        inset 0 0 20px rgba(0, 0, 0, 0.7),
        0 4px 8px rgba(0, 0, 0, 0.3),
        0 0 30px rgba(139, 69, 19, 0.6);
}

.dial-pointer {
    width: 3px;
    height: 70px;
    background: linear-gradient(to bottom, #8b4513, #654321);
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    transform-origin: bottom center;
    border-radius: 2px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

.dial-numbers {
    position: absolute;
    width: 100%;
    height: 100%;
    font-family: 'Orbitron', monospace;
    font-weight: 700;
    color: #8b4513;
    font-size: 16px;
}

.dial-number {
    position: absolute;
    text-shadow: 0 0 2px rgba(139, 69, 19, 0.8);
    font-size: 14px; /* Slightly smaller for better spacing */
}

/* Position numbers around the dial like a REAL combination lock */
.dial-number:nth-child(1) { top: 5%; left: 50%; transform: translate(-50%, -50%); } /* 0 - top */
.dial-number:nth-child(2) { top: 15%; right: 20%; transform: translate(50%, -50%); } /* 1 */
.dial-number:nth-child(3) { top: 35%; right: 8%; transform: translate(50%, -50%); } /* 2 */
.dial-number:nth-child(4) { top: 55%; right: 8%; transform: translate(50%, -50%); } /* 3 */
.dial-number:nth-child(5) { top: 75%; right: 20%; transform: translate(50%, -50%); } /* 4 */
.dial-number:nth-child(6) { bottom: 5%; left: 55%; transform: translate(-50%, 50%); } /* 5 */
.dial-number:nth-child(7) { bottom: 5%; left: 45%; transform: translate(-50%, 50%); } /* 6 - bottom */
.dial-number:nth-child(8) { top: 75%; left: 20%; transform: translate(-50%, -50%); } /* 7 */
.dial-number:nth-child(9) { top: 55%; left: 8%; transform: translate(-50%, -50%); } /* 8 */
.dial-number:nth-child(10) { top: 35%; left: 8%; transform: translate(-50%, -50%); } /* 9 */
.dial-number:nth-child(11) { top: 15%; left: 20%; transform: translate(-50%, -50%); } /* Back to top */
.dial-number:nth-child(12) { top: 25%; left: 15%; transform: translate(-50%, -50%); } /* Extra position */

.spinning {
    animation: dialSpin 3s ease-in-out;
}

@keyframes dialSpin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    15% { transform: translate(-50%, -50%) rotate(216deg); } /* 8 */
    30% { transform: translate(-50%, -50%) rotate(432deg); } /* 2 */
    45% { transform: translate(-50%, -50%) rotate(648deg); } /* 7 */
    60% { transform: translate(-50%, -50%) rotate(864deg); } /* 6 */
    75% { transform: translate(-50%, -50%) rotate(1080deg); } /* 7 */
    100% { transform: translate(-50%, -50%) rotate(1080deg); }
}

/* Terminal Interface - Classic Green on Black */
.terminal-container {
    display: none;
    width: 100%;
    max-width: 800px;
    margin: 2rem auto;
    background: #000000;
    border: 2px solid #00ff00;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(0, 255, 0, 0.4);
}

.terminal-header {
    background: linear-gradient(90deg, #001100, #000000);
    padding: 0.5rem 1rem;
    color: #00ff00;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.9rem;
    border-bottom: 1px solid #00ff00;
}

.terminal-body {
    padding: 1rem;
    height: 400px;
    overflow-y: auto;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.9rem;
    color: #00ff00;
    background: #000000;
    line-height: 1.4;
}

.terminal-line {
    margin-bottom: 0.2rem;
    white-space: pre-wrap;
    display: flex;
    align-items: center;
}

.terminal-line.input-line {
    margin-bottom: 0;
}

.terminal-prompt {
    color: #00ff00;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.terminal-input {
    background: transparent;
    border: none;
    color: #00ff00;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.9rem;
    outline: none;
    flex: 1;
    caret-color: #00ff00;
}

.terminal-input::placeholder {
    color: rgba(0, 255, 0, 0.5);
}

/* White Rabbit */
.white-rabbit {
    position: fixed;
    width: 40px;
    height: 30px;
    font-size: 24px;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.rabbit-visible {
    opacity: 1;
}

@keyframes rabbitHop {
    0%, 100% { transform: translateY(0) scaleY(1); }
    50% { transform: translateY(-8px) scaleY(0.8); }
}

.rabbit-hopping {
    animation: rabbitHop 0.3s ease-in-out infinite;
}

/* Carrot */
.carrot {
    position: fixed;
    width: 20px;
    height: 20px;
    font-size: 16px;
    cursor: pointer;
    z-index: 1000;
    opacity: 0.7;
    transition: all 0.3s ease;
    filter: drop-shadow(0 0 5px rgba(139, 69, 19, 0.5));
    display: none;
}

.carrot:hover {
    opacity: 1;
    transform: scale(1.2);
    filter: drop-shadow(0 0 15px rgba(139, 69, 19, 0.8));
}

.carrot.held {
    opacity: 1;
    transform: scale(1.3);
    filter: drop-shadow(0 0 20px rgba(139, 69, 19, 1));
    animation: carrotPulse 0.5s ease-in-out infinite alternate;
}

@keyframes carrotPulse {
    0% { filter: drop-shadow(0 0 20px rgba(139, 69, 19, 1)); }
    100% { filter: drop-shadow(0 0 30px rgba(139, 69, 19, 1)) drop-shadow(0 0 40px rgba(255, 165, 0, 0.5)); }
}

/* Achievement notification */
.achievement {
    position: fixed;
    top: 20px;
    right: 20px;
    background: linear-gradient(45deg, #2c4162, #4a6fa5);
    border: 2px solid #8b4513;
    border-radius: 10px;
    padding: 1rem 1.5rem;
    color: #ffffff;
    font-family: 'Orbitron', monospace;
    font-weight: 600;
    z-index: 10000;
    transform: translateX(400px);
    transition: transform 0.5s ease;
    box-shadow: 0 0 30px rgba(139, 69, 19, 0.6);
    display: none;
}

.achievement.show {
    transform: translateX(0);
    display: block;
}

.achievement-title {
    font-size: 0.9rem;
    color: #8b4513;
    margin-bottom: 0.5rem;
}

.achievement-desc {
    font-size: 0.8rem;
    color: #ffffff;
}

/* Dashboard Buttons */
.dashboard-btn {
    background: linear-gradient(45deg, #1a1a1a, #2a2a2a);
    border: 2px solid #8b4513;
    color: #2c4162;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-family: 'Orbitron', monospace;
    font-weight: 600;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
    min-width: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0.5rem;
}

.dashboard-btn:hover:not(:disabled) {
    background: linear-gradient(45deg, #2a2a2a, #3a3a3a);
    box-shadow: 0 0 30px rgba(139, 69, 19, 0.6);
    transform: scale(1.05);
}

.ai-btn {
    background: linear-gradient(45deg, #0a0a0a, #1a1a1a);
    border-color: #2c4162;
    color: #8b4513;
}

.ai-btn:hover {
    background: linear-gradient(45deg, #1a1a1a, #2a2a2a);
    box-shadow: 0 0 30px rgba(44, 65, 98, 0.6);
}

.coming-soon-btn {
    background: linear-gradient(45deg, #0a0a0a, #1a1a1a);
    border-color: #333;
    color: #666;
    cursor: not-allowed;
    opacity: 0.6;
}

.coming-soon {
    position: absolute;
    top: -8px;
    right: -5px;
    background: #8b4513;
    color: #fff;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 0.6rem;
    font-weight: 700;
}

#dashboardButtons {
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}

.auth-status {
    margin-top: 1.5rem;
    font-weight: 600;
    text-shadow: 0 0 10px currentColor;
}

/* Rick Roll Frame */
.rickroll-frame {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 800px;
    height: 60%;
    z-index: 9999;
    border: 3px solid #ff0040;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 0 50px rgba(255, 0, 64, 0.8);
}

.rickroll-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #ff0040;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 5px;
    z-index: 10000;
}

/* VISITOR INFO LAYOUT FIX - Full Width Footer Banner */
.visitor-info {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.9);
    border-top: 2px solid rgba(139, 69, 19, 0.3);
    padding: 1rem 2rem;
    font-size: 0.8rem;
    color: #2c4162;
    backdrop-filter: blur(10px);
    z-index: 1000; /* High z-index so nothing can overlap it */
}

.visitor-info h4 {
    color: #8b4513;
    margin-bottom: 0.5rem;
    font-family: 'Share Tech Mono', monospace;
    text-align: center;
    font-size: 1rem;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.info-item {
    padding: 0.5rem;
    border: 1px solid rgba(139, 69, 19, 0.2);
    border-radius: 5px;
    background: rgba(139, 69, 19, 0.05);
}

.info-label {
    font-weight: 600;
    color: #8b4513;
    margin-bottom: 0.2rem;
}

.info-value {
    word-break: break-all;
    color: #2c4162;
}

/* Loading animation */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #2a2a2a;
    border-radius: 50%;
    border-top-color: #8b4513;
    animation: spin 1s ease-in-out infinite;
    margin-left: 10px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Konami Code Message */
.konami-message {
    display: none;
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(44, 65, 98, 0.9);
    color: #fff;
    padding: 1rem 2rem;
    border-radius: 10px;
    font-family: 'Orbitron', monospace;
    font-weight: 700;
    z-index: 9999;
    animation: fadeInOut 3s forwards;
}

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

/* Screen glitch effect */
.screen-glitch {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;
    opacity: 0;
}

.screen-glitch.active {
    opacity: 1;
    animation: glitch 0.3s ease-in-out;
}

@keyframes glitch {
    0%, 100% { transform: translate(0); filter: hue-rotate(0deg); }
    20% { transform: translate(-2px, 2px); filter: hue-rotate(90deg); }
    40% { transform: translate(-2px, -2px); filter: hue-rotate(180deg); }
    60% { transform: translate(2px, 2px); filter: hue-rotate(270deg); }
    80% { transform: translate(2px, -2px); filter: hue-rotate(360deg); }
}

/* Responsive design */
@media (max-width: 768px) {
    .logo-text {
        font-size: 2.5rem;
    }
    
    .auth-container {
        padding: 2rem;
        margin: 1rem;
    }

    .pills-container {
        gap: 2rem;
    }

    .safe-container {
        width: 150px;
        height: 150px;
    }

    .safe-body {
        width: 150px;
        height: 150px;
    }

    .safe-dial {
        width: 120px;
        height: 120px;
    }

    .visitor-info {
        padding: 1rem;
    }

    .info-grid {
        grid-template-columns: 1fr;
    }
}