/* Basic Reset and Body Styling */
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column; /* Changed to column to stack top ad */
    justify-content: flex-start; /* Align content from top */
    align-items: center;
    /* Deep cosmic background with subtle movement */
    background: linear-gradient(180deg, #05001a 0%, #10003a 50%, #05001a 100%);
    background-size: 100% 200%; /* Make gradient larger than viewport */
    animation: gradientShift 15s ease infinite alternate; /* Gentle animation */
    color: #e0e0e0;
    font-family: 'Roboto', sans-serif;
    overflow-x: hidden; /* Prevent horizontal scroll */
    perspective: 1000px; /* For 3D effects if desired later */
}

@keyframes gradientShift {
    from { background-position: 0% 0%; }
    to { background-position: 0% 100%; }
}

/* Enhance Scrollbar for Thematic Consistency */
body::-webkit-scrollbar {
    width: 10px;
}
body::-webkit-scrollbar-track {
    background: #1a0a3a; /* Dark track */
}
body::-webkit-scrollbar-thumb {
    background-color: #6a3a9a; /* Purple thumb */
    border-radius: 6px;
    border: 2px solid #1a0a3a;
}
body::-webkit-scrollbar-thumb:hover {
    background-color: #8a5ac0;
}

/* Ad Zone Styles */
.ad-zone {
    background: rgba(10, 5, 20, 0.7); /* Darker, subtle ad background */
    border: 1px solid rgba(0, 255, 255, 0.1);
    color: rgba(0, 255, 255, 0.5); /* Muted cyan text */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.9em;
    text-align: center;
    box-shadow: inset 0 0 10px rgba(0, 255, 255, 0.1);
    border-radius: 8px;
    margin: 10px; /* Space around ads */
    flex-shrink: 0; /* Prevent shrinking */
}

.top-ad {
    width: 95%;
    max-width: 1200px;
    height: 90px; /* Standard leaderboard size */
}

/* Main layout container now just centers the celestial container */
.main-layout-container {
    display: flex;
    width: 95%;
    max-width: 1200px; /* Match celestial-container max-width */
    flex-grow: 1;
    justify-content: center; /* Center the main content horizontally */
    align-items: flex-start; /* Align content to the top */
    margin: 0 auto; /* Center the container itself */
}

/* Removed .left-ad, .right-ad styles as they are no longer needed */


.celestial-container {
    background: rgba(40, 15, 60, 0.5); /* Semi-transparent dark purple */
    border: 1px solid rgba(90, 60, 130, 0.3); /* Subtle border */
    border-radius: 20px; /* More rounded corners */
    padding: 40px 30px; /* Generous padding */
    /* Multi-layer box shadow for depth and glow */
    box-shadow:
        0 0 60px rgba(0, 255, 255, 0.3), /* Outer cyan glow */
        0 0 30px rgba(150, 50, 200, 0.4), /* Mid purple glow */
        inset 0 0 30px rgba(90, 40, 120, 0.4); /* Inner dark glow */
    text-align: center;
    max-width: 900px; /* Main content width */
    width: 100%; /* Take full width within its flex container */
    margin: 0; /* Removed horizontal margin as main-layout-container handles centering */
    backdrop-filter: blur(15px); /* Stronger frosted glass */
    -webkit-backdrop-filter: blur(15px); /* Safari support */
    animation: fadeInScaleRotate 1.5s ease-out; /* More complex animation on load */
    transform-style: preserve-3d; /* Needed for potential 3D children */
}

@keyframes fadeInScaleRotate {
    from { opacity: 0; transform: scale(0.9) rotateX(10deg); }
    to { opacity: 1; transform: scale(1) rotateX(0deg); }
}


header h1 {
    color: #00ffff; /* Bright cyan */
    text-shadow: 0 0 20px #00ffff, 0 0 30px rgba(0, 255, 255, 0.6), 0 0 40px rgba(0, 255, 255, 0.4); /* Intense glow */
    font-family: 'Orbitron', sans-serif;
    font-size: 3.5em; /* Larger title */
    margin-bottom: 10px;
    animation: pulseGlow 4s infinite alternate ease-in-out; /* Smoother pulsing glow */
}

@keyframes pulseGlow {
    from { text-shadow: 0 0 15px #00ffff, 0 0 20px rgba(0, 255, 255, 0.5); }
    to { text-shadow: 0 0 25px #00ffff, 0 0 35px rgba(0, 255, 255, 0.7); }
}

.subtitle {
    color: #c0b0e0; /* Lighter muted purple */
    font-size: 1.3em;
    margin-top: 0;
    margin-bottom: 30px;
    font-weight: 400;
}

.data-note {
    font-size: 0.9em;
    color: #a0a0a0;
    margin-top: -20px; /* Pull it closer to the subtitle */
    margin-bottom: 40px;
    font-style: italic;
}

/* Search Input Styles */
.search-input {
    width: calc(100% - 40px); /* Adjust for padding */
    padding: 12px 20px;
    margin-bottom: 30px; /* Space below the search box */
    border: 1px solid rgba(0, 255, 255, 0.3); /* Cyan border */
    border-radius: 8px;
    background-color: rgba(20, 5, 30, 0.7); /* Darker, semi-transparent background */
    color: #00ffff; /* Cyan text */
    font-family: 'Orbitron', sans-serif;
    font-size: 1.1em;
    outline: none; /* Remove default outline */
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.4); /* Cyan glow */
    transition: all 0.3s ease-in-out;
    text-align: center; /* Center placeholder text */
}

.search-input::placeholder {
    color: rgba(0, 255, 255, 0.6); /* Lighter cyan placeholder */
    opacity: 0.8;
}

.search-input:focus {
    border-color: #00ffff; /* Brighter border on focus */
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.7), inset 0 0 10px rgba(0, 255, 255, 0.3); /* Stronger glow on focus */
    background-color: rgba(30, 10, 40, 0.8); /* Slightly more opaque */
}

/* Table Header Styles */
.table-header {
    display: grid;
    /* Define 5 columns for Rank, Name, Time, Weather, Population */
    grid-template-columns: 0.5fr 1.5fr 1fr 1.5fr 1.5fr; /* Proportional widths */
    gap: 10px;
    padding: 15px 20px;
    background: rgba(80, 50, 110, 0.3); /* Slightly brighter header background */
    border-radius: 10px;
    margin-bottom: 15px;
    font-family: 'Orbitron', sans-serif;
    color: #00ffff; /* Cyan for headers */
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
    font-size: 1.1em;
    font-weight: bold;
    border: 1px solid rgba(0, 255, 255, 0.2);
}

.table-header span {
    text-align: center; /* Center header text */
    padding: 5px;
}

/* Main list container */
#city-clocks-list {
    display: flex;
    flex-direction: column; /* Stack rows vertically */
    gap: 10px; /* Space between rows */
    padding: 0;
    list-style: none;
}

/* Individual City Row Styles */
.city-row {
    display: grid;
    /* Match column widths with the header */
    grid-template-columns: 0.5fr 1.5fr 1fr 1.5fr 1.5fr;
    gap: 10px;
    align-items: center;
    background: rgba(60, 40, 80, 0.3); /* Semi-transparent background */
    border: 1px solid rgba(110, 80, 150, 0.2);
    border-radius: 8px;
    padding: 12px 20px;
    box-shadow: 0 0 8px rgba(120, 70, 180, 0.2);
    transition: all 0.4s ease-in-out;
}

.city-row:hover {
    background: rgba(70, 50, 90, 0.4);
    border-color: rgba(130, 100, 170, 0.4);
    box-shadow: 0 0 15px rgba(150, 80, 220, 0.4), 0 0 10px rgba(0, 255, 255, 0.2);
    transform: scale(1.005); /* Slight enlargement on hover */
}

/* Column specific styles - All Center Aligned */
.city-rank {
    font-size: 1.1em;
    font-weight: bold;
    color: #ffc300; /* Amber for rank */
    text-align: center; /* Center align */
    text-shadow: 0 0 5px rgba(255, 195, 0, 0.5);
}

.city-name {
    font-size: 1.25em;
    font-weight: 700;
    color: #ffffff;
    text-align: center; /* Center align */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.city-time {
    font-size: 1.8em;
    font-family: 'Orbitron', sans-serif;
    color: #00ff00; /* Classic digital green */
    text-shadow: 0 0 10px #00ff00, 0 0 15px rgba(0, 255, 0, 0.7);
    text-align: center; /* Center align */
    white-space: nowrap;
}

.city-weather {
    font-size: 1.1em;
    color: #00bfff; /* Sky blue for weather */
    text-shadow: 0 0 8px rgba(0, 191, 255, 0.5);
    text-align: center; /* Center align */
    display: flex;
    align-items: center;
    justify-content: center; /* Center content within flexbox */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.city-weather i {
    margin-right: 8px;
    color: #00ffff;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
    animation: iconFadeIn 0.8s ease-out;
}

.city-population {
    font-size: 1.1em;
    color: #e0e0e0; /* Muted white for population */
    text-align: center; /* Center align */
    font-family: 'Orbitron', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Loading/Error State Styles */
.city-weather .loading,
.city-weather .error {
    font-size: 0.9em;
    color: #ffc300; /* Amber for loading/error */
    text-shadow: none; /* Remove glow for these states */
}

.city-weather .error {
    color: #ff5733; /* Reddish for error */
}


/* Responsive adjustments */
/* No side ads, so main-layout-container will always be centered */
@media (min-width: 1200px) {
    /* No specific rules needed here for ads as side ads are removed */
}

@media (max-width: 992px) {
    .table-header,
    .city-row {
        grid-template-columns: 0.5fr 1.5fr 1fr 1.5fr 1.3fr; /* Adjust column widths */
        padding: 10px 15px;
        font-size: 0.95em;
    }

    .city-name {
        font-size: 1.15em;
    }
    .city-time {
        font-size: 1.6em;
    }
    .city-weather {
        font-size: 1em;
    }
    .city-population {
        font-size: 1em;
    }
}

@media (max-width: 768px) {
    .celestial-container {
        padding: 30px 15px;
        margin: 20px auto; /* Re-center with margin for smaller screens */
    }

    .main-layout-container {
        flex-direction: column; /* Stack main content and ads vertically */
        align-items: center;
        margin: 0; /* Remove horizontal margin */
    }

    /* Removed .left-ad, .right-ad display rules as they are removed from HTML */

    h1 {
        font-size: 2.5em;
    }

    .subtitle {
        font-size: 1.1em;
        margin-bottom: 25px;
    }

    .data-note {
        margin-bottom: 30px;
    }

    .search-input {
        width: calc(100% - 20px); /* Adjust for smaller padding */
        padding: 10px 10px;
        font-size: 1em;
    }

    /* Stack columns on smaller screens */
    .table-header {
        display: none; /* Hide header on small screens for stacked layout */
    }

    .city-row {
        grid-template-columns: 1fr; /* Single column layout */
        flex-direction: column; /* Stack elements vertically */
        align-items: flex-start; /* Align items to the start */
        padding: 15px;
        gap: 5px; /* Smaller gap when stacked */
    }

    .city-rank,
    .city-name,
    .city-time,
    .city-weather,
    .city-population {
        text-align: left; /* Align all text left */
        white-space: normal; /* Allow text wrapping */
        overflow: visible; /* Allow overflow */
        text-overflow: clip; /* No ellipsis when stacked */
        width: 100%; /* Take full width */
    }

    .city-rank {
        font-size: 1em; /* Adjust font size */
        margin-bottom: 5px;
    }

    .city-name {
        font-size: 1.2em; /* Keep name prominent */
        margin-bottom: 5px;
    }

    .city-time {
        font-size: 1.5em; /* Slightly smaller time font */
        margin-bottom: 5px;
    }

    .city-weather {
        font-size: 1em;
        justify-content: flex-start; /* Align weather to the left */
        margin-bottom: 5px;
    }

    .city-population {
        font-size: 1em;
    }

    .city-weather i {
        margin-right: 5px;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 2em;
    }

    .subtitle {
        font-size: 1em;
    }

    .city-name {
        font-size: 1.1em;
    }

    .city-time {
        font-size: 1.3em;
    }

    .city-weather {
        font-size: 0.9em;
    }

    .city-population {
        font-size: 0.9em;
    }
}