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

html {
    font-size: 16px; /* Base font size for rem units */
}

html, body {
    height: 100%;
    overflow-x: hidden; /* Prevent horizontal scroll */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0d0d0d 100%);
    color: white;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure body takes full viewport height */
    position: relative;
    transition: all 1s ease;
}

body.light-on {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 50%, #3d566e 100%);
}

/* Hallway perspective effect */
.hallway {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.02) 48%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.02) 52%, transparent 100%),
        linear-gradient(0deg, transparent 0%, rgba(255,255,255,0.01) 48%, rgba(255,255,255,0.03) 50%, rgba(255,255,255,0.01) 52%, transparent 100%);
    pointer-events: none;
    opacity: 0.3;
    transition: opacity 1s ease;
}

body.light-on .hallway {
    opacity: 0.6;
}

/* Modern Light bulb container */
.light-container {
    position: relative; /* No longer absolute */
    z-index: 1; /* Lowered z-index */
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2rem; /* Add space below the bulb */
    flex-shrink: 0; /* Prevent the container from shrinking */
}

/* Chain/cord - Better connection to bulb base */
.chain {
    position: relative; 
    top: 0; 
    left: auto; 
    transform: none; 
    width: 0.25rem; /* 4px */
    height: clamp(3rem, 15vh, 8rem); /* Reduced height to prevent overflow */
    background: linear-gradient(to bottom, #666 0%, #444 50%, #333 100%);
    opacity: 0.9;
    border-radius: 0.125rem; /* 2px */
    box-shadow:
        0 0 0.3125rem rgba(0,0,0,0.3), /* 5px */
        inset 0.0625rem 0 0.125rem rgba(255,255,255,0.1); /* 1px, 2px */
}

.chain::after {
    content: '';
    position: absolute;
    bottom: -0.3125rem; /* -5px */
    left: 50%;
    transform: translateX(-50%);
    width: 0.5rem; /* 8px */
    height: 0.5rem; /* 8px */
    background: #555;
    border-radius: 50%;
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.3); /* 2px, 4px */
}

/* Modern Light bulb - Hanging upside down */
.lightbulb {
    width: 6.25rem; /* 100px */
    height: 8.75rem; /* 140px */
    position: relative;
    margin: 0 auto;
    transition: all 0.6s ease;
    filter: drop-shadow(0 0 1.25rem rgba(0,0,0,0.5)); /* 20px */
    margin-top: -0.3125rem; /* -5px */
}

.lightbulb.on {
    filter: drop-shadow(0 0 2.5rem rgba(255, 235, 59, 0.6)); /* 40px */
}

/* Bulb base (screw part) - Now at the top */
.bulb-base {
    width: 5rem; /* 80px */
    height: 1.5625rem; /* 25px */
    background: linear-gradient(180deg, #666 0%, #444 50%, #333 100%);
    margin: 0 auto;
    position: relative;
    border-radius: 0.5rem 0.5rem 0 0; /* 8px */
    transition: all 0.6s ease;
    border: 0.0625rem solid rgba(255,255,255,0.1); /* 1px */
}

.lightbulb.on .bulb-base {
    background: linear-gradient(180deg, #777 0%, #555 50%, #444 100%);
}

/* Bulb neck (transition part) */
.bulb-body {
    width: 5.3125rem; /* 85px */
    height: 1.5625rem; /* 25px */
    background: linear-gradient(180deg, #333 0%, #2a2a2a 100%);
    margin: 0 auto;
    position: relative;
    transition: all 0.6s ease;
    border-left: 0.0625rem solid rgba(255,255,255,0.1); /* 1px */
    border-right: 0.0625rem solid rgba(255,255,255,0.1); /* 1px */
}

.lightbulb.on .bulb-body {
    background: linear-gradient(180deg, #ffd93d 0%, #fff9c4 100%);
    border-color: rgba(255,235,59,0.3);
    box-shadow: 
        0 0 0.9375rem rgba(255, 235, 59, 0.3), /* 15px */
        inset 0 0 0.625rem rgba(255,255,255,0.1); /* 10px */
}

/* Bulb main body (rounded glass part) - Now at the bottom */
.bulb-top {
    width: 6.25rem; /* 100px */
    height: 5.625rem; /* 90px */
    background: linear-gradient(180deg, #2a2a2a 0%, #404040 30%, #3a3a3a 70%, #2a2a2a 100%);
    border-radius: 0 0 3.125rem 3.125rem; /* 50px */
    position: relative;
    transition: all 0.6s ease;
    border: 0.0625rem solid rgba(255,255,255,0.1); /* 1px */
    border-top: none;
    margin: 0 auto;
    /* Glass reflection effect */
    background-image: 
        linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 35%, rgba(255,255,255,0.15) 40%, transparent 45%),
        linear-gradient(-45deg, transparent 60%, rgba(255,255,255,0.05) 65%, transparent 70%);
}

.lightbulb.on .bulb-top {
    background: linear-gradient(180deg, #fff9c4 0%, #f5e56b 30%, #ffd93d 70%, #ffcc02 100%);
    border-color: rgba(255,235,59,0.3);
    box-shadow: 
        0 0 2.5rem rgba(255, 235, 59, 0.5), /* 40px */
        inset 0 0 1.875rem rgba(255,255,255,0.3), /* 30px */
        inset 0 0.625rem 1.25rem rgba(255,255,255,0.2); /* 10px, 20px */
    /* Enhanced glass reflection when on */
    background-image: 
        linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.4) 35%, rgba(255,255,255,0.6) 40%, transparent 45%),
        linear-gradient(-45deg, transparent 60%, rgba(255,255,255,0.2) 65%, transparent 70%);
}

/* Modern filaments - Adjusted for upside down bulb */
.filament {
    position: absolute;
    top: 1.25rem; /* 20px */
    left: 50%;
    transform: translateX(-50%);
    width: 0.125rem; /* 2px */
    height: 2.8125rem; /* 45px */
    background: rgba(255,255,255,0.15);
    border-radius: 0.0625rem; /* 1px */
    opacity: 0;
    transition: all 0.4s ease;
}

.filament::before {
    content: '';
    position: absolute;
    top: 0.9375rem; /* 15px */
    left: -0.625rem; /* -10px */
    width: 1.375rem; /* 22px */
    height: 0.0625rem; /* 1px */
    background: inherit;
    border-radius: 0.0625rem; /* 1px */
}

.filament::after {
    content: '';
    position: absolute;
    top: 1.875rem; /* 30px */
    left: -0.625rem; /* -10px */
    width: 1.375rem; /* 22px */
    height: 0.0625rem; /* 1px */
    background: inherit;
    border-radius: 0.0625rem; /* 1px */
}

.filament-2 {
    top: 1.5625rem; /* 25px */
    left: 30%;
    height: 2.1875rem; /* 35px */
    transform: rotate(20deg);
}

.filament-3 {
    top: 1.5625rem; /* 25px */
    left: 70%;
    height: 2.1875rem; /* 35px */
    transform: rotate(-20deg);
}

.lightbulb.on .filament {
    opacity: 1;
    background: rgba(255,160,0,0.9);
    box-shadow: 0 0 0.5rem rgba(255,160,0,0.6); /* 8px */
}

.lightbulb.on .filament::before,
.lightbulb.on .filament::after {
    background: rgba(255,160,0,0.8);
    box-shadow: 0 0 0.25rem rgba(255,160,0,0.4); /* 4px */
}

/* Screw threads - Now at the top */
.thread {
    position: absolute;
    width: 90%;
    height: 0.125rem; /* 2px */
    background: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.4) 50%, transparent 100%);
    border-radius: 0.0625rem; /* 1px */
    left: 5%;
}

.thread:nth-child(1) { top: 0.25rem; } /* 4px */
.thread:nth-child(2) { top: 0.5625rem; } /* 9px */
.thread:nth-child(3) { top: 0.875rem; } /* 14px */
.thread:nth-child(4) { top: 1.1875rem; } /* 19px */



/* Main content */
.center-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    text-align: center;
    flex: 1 0 auto; /* Allow this container to grow and fill available space */
    padding: 2rem 1rem;
    width: 100%;
}

h1 {
    font-size: clamp(1.8rem, 5vw, 2.8rem); /* Fluid typography */
    margin-bottom: 1rem;
    text-shadow: 0.125rem 0.125rem 0.5rem rgba(0,0,0,0.7); /* 2px, 2px, 8px */
    opacity: 0.9;
    transition: all 0.6s ease;
    font-weight: 300;
    letter-spacing: 0.0625rem; /* 1px */
}

body.light-on h1 {
    opacity: 1;
    text-shadow: 0.125rem 0.125rem 0.75rem rgba(0,0,0,0.4); /* 2px, 2px, 12px */
    color: #ecf0f1;
}

/* Status text */
.status-text {
    font-size: 1.1rem; /* Reduced from 1.3rem */
    margin-bottom: 1.5rem;
    opacity: 0.7;
    transition: all 0.4s ease;
    font-weight: 300;
}

body.light-on .status-text {
    opacity: 1;
    color: #ecf0f1;
}

/* Enhanced Switch button */
.switch-container {
    position: relative;
    margin-top: 1rem;
}

.switch {
    position: relative;
    display: inline-block;
    width: 8.75rem; /* 140px */
    height: 4.375rem; /* 70px */
    margin-bottom: 1.25rem; /* 20px */
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #2c3e50, #34495e);
    transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 2.1875rem; /* 35px */
    box-shadow:
        0 0.375rem 1.25rem rgba(0,0,0,0.4), /* 6px, 20px */
        inset 0 0.125rem 0.375rem rgba(255,255,255,0.1), /* 2px, 6px */
        inset 0 -0.125rem 0.375rem rgba(0,0,0,0.2); /* -2px, 6px */
    border: 0.125rem solid rgba(255,255,255,0.1); /* 2px */
}

.slider:before {
    position: absolute;
    content: "";
    height: 3.375rem; /* 54px */
    width: 3.375rem; /* 54px */
    left: 0.5rem; /* 8px */
    bottom: 0.5rem; /* 8px */
    background: linear-gradient(135deg, #ecf0f1, #bdc3c7);
    transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
    box-shadow:
        0 0.25rem 0.75rem rgba(0,0,0,0.4), /* 4px, 12px */
        inset 0 0.125rem 0.25rem rgba(255,255,255,0.3); /* 2px, 4px */
}

input:checked + .slider {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    box-shadow: 
        0 0.375rem 1.5625rem rgba(243, 156, 18, 0.5), /* 6px, 25px */
        inset 0 0.125rem 0.375rem rgba(255,255,255,0.2), /* 2px, 6px */
        inset 0 -0.125rem 0.375rem rgba(0,0,0,0.1); /* -2px, 6px */
    border-color: rgba(255,235,59,0.3);
}

input:checked + .slider:before {
    transform: translateX(4.375rem); /* 70px */
    background: linear-gradient(135deg, #fff, #f1c40f);
    box-shadow:
        0 0.25rem 0.9375rem rgba(241, 196, 15, 0.6), /* 4px, 15px */
        inset 0 0.125rem 0.25rem rgba(255,255,255,0.4); /* 2px, 4px */
}

/* Hover effects */
.slider:hover {
    transform: translateY(-0.125rem); /* -2px */
    box-shadow:
        0 0.5rem 1.5625rem rgba(0,0,0,0.5), /* 8px, 25px */
        inset 0 0.125rem 0.375rem rgba(255,255,255,0.1), /* 2px, 6px */
        inset 0 -0.125rem 0.375rem rgba(0,0,0,0.2); /* -2px, 6px */
}

input:checked + .slider:hover {
    box-shadow:
        0 0.5rem 1.875rem rgba(243, 156, 18, 0.6), /* 8px, 30px */
        inset 0 0.125rem 0.375rem rgba(255,255,255,0.2), /* 2px, 6px */
        inset 0 -0.125rem 0.375rem rgba(0,0,0,0.1); /* -2px, 6px */
}

        /* Modern Footer Styles */
        .footer {
            position: relative; /* Changed from fixed */
            padding: 1.5rem 1rem;
            text-align: center;
            font-size: 0.875rem;
            line-height: 1.6;
            backdrop-filter: blur(10px);
            background: rgba(255, 255, 255, 0.05);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            z-index: 100;
            transition: all 0.3s ease;
            width: 100%;
            flex-shrink: 0; /* Prevent footer from shrinking */
        }

        .footer:hover {
            background: rgba(255, 255, 255, 0.08);
        }

        .footer-content {
            max-width: 75rem; /* 1200px */
            margin: 0 auto;
        }

        .footer-brand {
            font-weight: 600;
            font-size: 0.9rem;
            margin-bottom: 0.75rem;
            color: rgba(255, 255, 255, 0.9);
        }

        .footer-brand strong {
            color: white;
        }

        /* Add version styling */
        .footer-version {
            font-size: 0.8em;
            color: rgba(255,255,255,0.6);
            font-weight: 400;
            margin-left: 0.5em;
            letter-spacing: 0.03em;
            vertical-align: middle;
        }

        .footer-links {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .footer-links a {
            display: inline-flex;
            align-items: center;
            padding: 0.4rem 0.8rem;
            text-decoration: none;
            color: rgba(255, 255, 255, 0.8);
            border-radius: 0.375rem; /* 6px */
            transition: all 0.2s ease;
            font-weight: 500;
            position: relative;
        }

        .footer-links a:hover {
            color: white;
            background: rgba(255, 255, 255, 0.1);
            transform: translateY(-0.0625rem); /* -1px */
        }

        .footer-divider {
            color: rgba(255, 255, 255, 0.3);
            margin: 0 0.2rem;
            font-weight: 300;
        }

/* ===== MOBILE-FIRST RESPONSIVE STYLES ===== */

/* Base styles are mobile by default. */

/* Footer adjustments for mobile */
.footer-links {
    flex-direction: column; /* Stack links vertically on mobile */
    gap: 0.75rem;
}

.footer-divider {
    display: none; /* Hide dividers on mobile */
}

/* Tablet and larger screens */
@media (min-width: 48em) { /* 768px */
    .footer-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .footer-brand {
        margin-bottom: 0;
    }

    .footer-links {
        flex-direction: row; /* Horizontal links on larger screens */
        gap: 0.5rem;
    }

    .footer-divider {
        display: inline; /* Show dividers again */
    }
}




/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear 0.25s, opacity 0.3s ease;
    backdrop-filter: blur(3px);
}

.modal-overlay.active {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}

.modal {
    background: linear-gradient(145deg, rgb(45, 45, 55), rgb(25, 25, 35));
    border-radius: 16px;
    width: 90%;
    max-width: 30rem; /* 480px */
    box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.25), /* 10px, 30px */
                0 0.0625rem 0.5rem rgba(0, 0, 0, 0.1), /* 1px, 8px */
                0 0 0 0.0625rem rgba(255, 255, 255, 0.1) inset; /* 1px */
    overflow: hidden;
    transform: translateY(1.25rem) scale(0.95); /* 20px */
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    border: 0.0625rem solid rgba(255, 255, 255, 0.08); /* 1px */
}

.modal-overlay.active .modal {
    transform: translateY(0) scale(1);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem; /* 20px, 24px */
    position: relative;
}

.modal-header:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 4%;
    right: 4%;
    height: 0.0625rem; /* 1px */
    background: linear-gradient(to right,
                transparent,
                rgba(255, 255, 255, 0.2) 20%,
                rgba(255, 255, 255, 0.2) 80%,
                transparent);
}

.modal-title {
    margin: 0;
    font-size: 1.25rem; /* 20px */
    font-weight: 600;
    color: white;
    letter-spacing: -0.01em;
}

.modal-close {
    background: none;
    border: none;
    width: 2rem; /* 32px */
    height: 2rem; /* 32px */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem; /* 24px */
    cursor: pointer;
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.2s ease;
}

.modal-close:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: white;
}

.modal-content {
    padding: 1.5rem; /* 24px */
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
}

.modal-content p {
    margin-bottom: 1rem; /* 16px */
    font-size: 0.9375rem; /* 15px */
}

.modal-content ul {
    margin-bottom: 1rem; /* 16px */
    padding-left: 1.5rem; /* 24px */
}

.modal-content li {
    margin-bottom: 0.625rem; /* 10px */
    font-size: 0.875rem; /* 14px */
    color: rgba(255, 255, 255, 0.85);
}

.modal-note {
    background-color: rgba(139, 95, 191, 0.15);
    border-left: 0.1875rem solid #8b5fbf; /* 3px */
    padding: 0.75rem 0.9375rem; /* 12px, 15px */
    margin-top: 0.9375rem; /* 15px */
    border-radius: 0.375rem; /* 6px */
    font-size: 0.875rem; /* 14px */
}

.modal-footer {
    padding: 1rem 1.5rem 1.25rem; /* 16px, 24px, 20px */
    display: flex;
    justify-content: flex-end;
}

.modal-btn {
    padding: 0.625rem 1.25rem; /* 10px, 20px */
    background: linear-gradient(to bottom right, #4a7bff, #2e5cd8);
    color: white;
    border: none;
    border-radius: 2.5rem; /* 40px */
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9375rem; /* 15px */
    letter-spacing: 0.02em;
    transition: all 0.3s ease;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1); /* 4px, 8px */
}

.modal-btn:hover {
    transform: translateY(-0.125rem); /* -2px */
    box-shadow: 0 0.375rem 0.75rem rgba(0, 0, 0, 0.2); /* 6px, 12px */
}

.modal-btn:active {
    transform: translateY(0.0625rem); /* 1px */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1); /* 2px, 4px */
}


/* ===== FLEX CONTAINER FOR TITLE & INFO ICON ===== */
.title-with-info {
    display: flex; 
    align-items: center; 
    justify-content: center;
    gap: 0.625rem; /* 10px */
    margin-bottom: 1rem; /* Reduced from 2rem */
    flex-wrap: wrap;
    text-align: center;
}

.title-with-info h1 {
    font-size: clamp(1.8rem, 5vw, 2.8rem);
    font-weight: 300;
    letter-spacing: 0.0625rem; /* 1px */
    line-height: 1.2;
    margin: 0;
    white-space: nowrap;
    text-shadow: 0.125rem 0.125rem 0.5rem rgba(0,0,0,0.7); /* 2px, 2px, 8px */
    opacity: 0.9;
    transition: all 0.6s ease;
}

.info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8b5fbf;
    cursor: pointer;
    transition: transform 0.3s ease;
    padding: 0.3125rem; /* 5px */
    border-radius: 50%;
    box-sizing: content-box;
}

.info-icon svg {
    width: clamp(18px, 3vw, 26px);
    height: clamp(18px, 3vw, 26px);
    display: block; 
}

.info-icon:hover {
    background: rgba(139, 95, 191, 0.3);
    border-color: rgba(139, 95, 191, 0.5); 
    transform: scale(1.1);
}