/* Root variables for light and dark modes with enhanced VIP feel */
:root {
    --bg-primary: #f4f7fa; /* Softer light background for premium look */
    --bg-secondary: #ffffff;
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --border-color: #dee2e6;
    --shadow-light: rgba(0, 0, 0, 0.08);
    --shadow-dark: rgba(0, 0, 0, 0.15);
    --accent-color: #007bff; /* Professional blue accent */
    --hover-accent: #0056b3;
    --table-bg: #f8f9fa;
    --info-bg: #f8f9fa;
    --category-bg: #ffffff;
    --transition-speed: 0.4s; /* Slightly slower for smoother transitions */
    --glow-color: rgba(0, 123, 255, 0.5); /* VIP glow */
    --heavy-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); /* Heavier shadows */
    --heavy-glow: 0 0 40px rgba(0, 123, 255, 0.7); /* Heavier glow */
}

/* Dark mode with premium dark theme */
body.dark-mode {
    --bg-primary: #0d1117; /* Deep dark for VIP */
    --bg-secondary: #212529;
    --text-primary: #e9ecef;
    --text-secondary: #adb5bd;
    --border-color: #495057;
    --shadow-light: rgba(0, 0, 0, 0.3);
    --shadow-dark: rgba(0, 0, 0, 0.5);
    --accent-color: #0d6efd;
    --hover-accent: #0a58ca;
    --table-bg: #1c2128;
    --info-bg: #1c2128;
    --category-bg: #2c3035;
    --glow-color: rgba(13, 110, 253, 0.6);
    --heavy-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    --heavy-glow: 0 0 40px rgba(13, 110, 253, 0.8);
}

.subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
    transition: color var(--transition-speed) ease;
    font-family:
        "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; /* Professional font */
}

.main-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bg-primary);
    transition: background var(--transition-speed) ease;
    padding: 20px;
    box-sizing: border-box;
}

.table-container {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
    transform-origin: top center;
    animation: fadeIn 1.2s ease-in-out;
    width: 100%;
    max-width: 1600px;
    margin: auto;
    overflow: visible; /* No overflow, allow scaling */
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.periodic-table {
    display: grid;
    grid-template-columns: repeat(18, 1fr);
    grid-gap: 5px; /* Slightly larger gap for premium spacing */
    padding: 25px;
    background: var(--table-bg);
    border-radius: 16px; /* Softer corners */
    box-shadow: 0 12px 32px var(--shadow-dark);
    max-width: 100%;
    margin: auto;
    animation: tableAppear 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Professional easing */
    transition:
        background var(--transition-speed) ease,
        box-shadow var(--transition-speed) ease;
}

@keyframes tableAppear {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.element {
    background: var(--bg-secondary);
    border-radius: 6px; /* Rounded for VIP */
    padding: 10px 5px;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-speed) cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Professional bounce-free easing */
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 75px;
    min-width: 75px;
    box-shadow: 0 3px 6px var(--shadow-light);
    border: 1px solid var(--border-color);
    position: relative;
    opacity: 0;
    animation: elementStaggerFade 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94)
        forwards; /* Smooth professional animation */
    transition:
        background var(--transition-speed) ease,
        border var(--transition-speed) ease,
        box-shadow var(--transition-speed) ease,
        transform var(--transition-speed) ease;
}

/* Staggered animation for elements */
.element:nth-child(n) {
    animation-delay: calc(0.05s * var(--order)); /* More refined stagger */
    --order: 0; /* Set via JS or inline if needed */
}

@keyframes elementStaggerFade {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 0.85;
        transform: translateY(0);
    }
}

.element:hover {
    transform: scale(1.2); /* Heavier scale, no rotate for professional look */
    box-shadow:
        var(--heavy-shadow), var(--heavy-glow); /* Very heavy glow and shadow */
    z-index: 30;
    opacity: 1;
    border-color: var(--accent-color);
    animation: hoverPulse 1s infinite alternate
        cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smoother pulse */
}

@keyframes hoverPulse {
    from {
        box-shadow: var(--heavy-shadow), var(--heavy-glow);
    }
    to {
        box-shadow:
            0 24px 72px var(--shadow-dark),
            0 0 50px var(--glow-color);
    }
}

.element.active {
    transform: scale(1.2);
    box-shadow: var(--heavy-shadow), var(--heavy-glow);
    z-index: 30;
    border: 2px solid var(--accent-color);
    opacity: 1;
    animation: activeGlow 1.5s infinite alternate
        cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Longer, smoother */
}

@keyframes activeGlow {
    from {
        border-color: var(--accent-color);
        box-shadow: var(--heavy-shadow), var(--heavy-glow);
    }
    to {
        border-color: var(--hover-accent);
        box-shadow:
            0 24px 72px var(--shadow-dark),
            0 0 50px var(--glow-color);
    }
}

.element-number {
    font-size: 0.85rem;
    color: var(--text-secondary);
    position: absolute;
    top: 5px;
    left: 7px;
    transition: color var(--transition-speed) ease;
}

.element-symbol {
    font-size: 1.7rem;
    font-weight: 600; /* Bolder for professional */
    margin: 10px 0 3px 0;
    color: var(--text-primary);
    transition:
        color var(--transition-speed) ease,
        transform var(--transition-speed) ease;
    text-shadow: 0 1px 2px var(--shadow-light); /* Add text shadow for heaviness */
}

.element:hover .element-symbol {
    color: var(--accent-color);
    transform: scale(1.15); /* Heavier symbol pop */
}

.element-name {
    font-size: 0.6rem !important;
    color: var(--text-secondary);
    margin-bottom: 5px;
    transition: color var(--transition-speed) ease;
    text-shadow: 0 1px 1px var(--shadow-light);
}
.element-weight {
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: none; /* Toggle via JS */
    transition: color var(--transition-speed) ease;
}

.spacer {
    background: transparent;
    border: none;
    box-shadow: none;
}

.lanthanides-spacer {
    grid-column: 3 / span 15;
    height: 25px;
    background: transparent;
}

/* Enhanced color classes with premium metallic gradients and heavier effects */
.nonmetal {
    background: linear-gradient(135deg, #e8f5e8 0%, #d4edda 50%, #c3e6cb 100%);
    border-left: 5px solid #34a853; /* Thicker border for VIP */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); /* Inner shadow for depth */
    transition:
        background var(--transition-speed) ease,
        box-shadow var(--transition-speed) ease;
}

.nonmetal:hover {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 50%, #b2dfdb 100%);
    box-shadow: inset 0 0 15px rgba(52, 168, 83, 0.4); /* Heavier inner glow */
}

.noble-gas {
    background: linear-gradient(135deg, #fce8e6 0%, #f8d7da 50%, #f4c7c3 100%);
    border-left: 5px solid #ea4335;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    transition:
        background var(--transition-speed) ease,
        box-shadow var(--transition-speed) ease;
}

.noble-gas:hover {
    background: linear-gradient(135deg, #f8d7da 0%, #f4c7c3 50%, #f0b7ac 100%);
    box-shadow: inset 0 0 15px rgba(234, 67, 53, 0.4);
}

.alkali-metal {
    background: linear-gradient(135deg, #fef7e0 0%, #fff3c2 50%, #ffefa3 100%);
    border-left: 5px solid #fbbc04;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    transition:
        background var(--transition-speed) ease,
        box-shadow var(--transition-speed) ease;
}

.alkali-metal:hover {
    background: linear-gradient(135deg, #fff3c2 0%, #ffefa3 50%, #ffeb84 100%);
    box-shadow: inset 0 0 15px rgba(251, 188, 4, 0.4);
}

.alkaline-earth {
    background: linear-gradient(135deg, #ffeccc 0%, #ffd699 50%, #ffc366 100%);
    border-left: 5px solid #ff6d01;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    transition:
        background var(--transition-speed) ease,
        box-shadow var(--transition-speed) ease;
}

.alkaline-earth:hover {
    background: linear-gradient(135deg, #ffd699 0%, #ffc366 50%, #ffb033 100%);
    box-shadow: inset 0 0 15px rgba(255, 109, 1, 0.4);
}

.metalloid {
    background: linear-gradient(135deg, #f3e8fd 0%, #e2d7f7 50%, #d1c6f1 100%);
    border-left: 5px solid #9334e6;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    transition:
        background var(--transition-speed) ease,
        box-shadow var(--transition-speed) ease;
}

.metalloid:hover {
    background: linear-gradient(135deg, #e2d7f7 0%, #d1c6f1 50%, #c0b5eb 100%);
    box-shadow: inset 0 0 15px rgba(147, 52, 230, 0.4);
}

.post-transition {
    background: linear-gradient(135deg, #e8f0fe 0%, #d6e3ff 50%, #c4d6ff 100%);
    border-left: 5px solid #4285f4;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    transition:
        background var(--transition-speed) ease,
        box-shadow var(--transition-speed) ease;
}

.post-transition:hover {
    background: linear-gradient(135deg, #d6e3ff 0%, #c4d6ff 50%, #b2c9ff 100%);
    box-shadow: inset 0 0 15px rgba(66, 133, 244, 0.4);
}

.transition-metal {
    background: linear-gradient(135deg, #e6f4ea 0%, #d4edda 50%, #c3e6cb 100%);
    border-left: 5px solid #34a853;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    transition:
        background var(--transition-speed) ease,
        box-shadow var(--transition-speed) ease;
}

.transition-metal:hover {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 50%, #b2dfdb 100%);
    box-shadow: inset 0 0 15px rgba(52, 168, 83, 0.4);
}

.lanthanide {
    background: linear-gradient(135deg, #f1f8e9 0%, #e3f2d3 50%, #d5ecbe 100%);
    border-left: 5px solid #7cb342;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    transition:
        background var(--transition-speed) ease,
        box-shadow var(--transition-speed) ease;
}

.lanthanide:hover {
    background: linear-gradient(135deg, #e3f2d3 0%, #d5ecbe 50%, #c7e6a9 100%);
    box-shadow: inset 0 0 15px rgba(124, 179, 66, 0.4);
}

.actinide {
    background: linear-gradient(135deg, #e8eaf6 0%, #d7d9f2 50%, #c6c8ed 100%);
    border-left: 5px solid #3f51b5;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    transition:
        background var(--transition-speed) ease,
        box-shadow var(--transition-speed) ease;
}

.actinide:hover {
    background: linear-gradient(135deg, #d7d9f2 0%, #c6c8ed 50%, #b5b7e8 100%);
    box-shadow: inset 0 0 15px rgba(63, 81, 181, 0.4);
}

.halogen {
    background: linear-gradient(135deg, #e0f2f1 0%, #c8e6e5 50%, #b0dad9 100%);
    border-left: 5px solid #009688;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    transition:
        background var(--transition-speed) ease,
        box-shadow var(--transition-speed) ease;
}

.halogen:hover {
    background: linear-gradient(135deg, #c8e6e5 0%, #b0dad9 50%, #98cfcd 100%);
    box-shadow: inset 0 0 15px rgba(0, 150, 136, 0.4);
}

.unknown {
    background: linear-gradient(135deg, #f1f3f4 0%, #e2e6ea 50%, #d3dae0 100%);
    border-left: 5px solid #5f6368;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    transition:
        background var(--transition-speed) ease,
        box-shadow var(--transition-speed) ease;
}

.unknown:hover {
    background: linear-gradient(135deg, #e2e6ea 0%, #d3dae0 50%, #c4ced6 100%);
    box-shadow: inset 0 0 15px rgba(95, 99, 104, 0.4);
}

/* Information Section Styles with premium enhancements */
.info-section {
    margin-top: 50px;
    padding: 30px;
    background: var(--info-bg);
    border-radius: 16px;
    box-shadow: 0 8px 28px var(--shadow-dark);
    max-width: 1400px;
    margin-left: auto;
    margin-bottom: 50px;
    margin-right: auto;
    animation: infoFade 1.2s ease-in-out;
    transition:
        background var(--transition-speed) ease,
        box-shadow var(--transition-speed) ease;
}

@keyframes infoFade {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.info-title {
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: 25px;
    color: var(--text-primary);
    text-align: center;
    transition: color var(--transition-speed) ease;
    letter-spacing: 0.5px; /* Professional spacing */
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 25px;
}

.category-item {
    padding: 15px 20px;
    border-radius: 10px;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--category-bg);
    box-shadow: 0 3px 6px var(--shadow-light);
    transition:
        transform var(--transition-speed) ease,
        background var(--transition-speed) ease,
        box-shadow var(--transition-speed) ease;
    color: var(--text-primary);
}

.category-item:hover {
    transform: translateY(-8px); /* Heavier lift */
    box-shadow: 0 6px 18px var(--shadow-dark);
}

.category-item span {
    color: var(--text-primary);
    transition: color var(--transition-speed) ease;
    font-weight: 500;
}

.category-color {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 2px solid var(--border-color);
    transition:
        border var(--transition-speed) ease,
        transform var(--transition-speed) ease;
}

.category-item:hover .category-color {
    transform: scale(1.1); /* Color pop on hover */
}

/* Enhanced Fully Responsive Design - Scale down without overflow */
@media (max-width: 1600px) {
    .table-container {
        transform: scale(0.95);
    }
}

@media (max-width: 1400px) {
    .table-container {
        transform: scale(0.9);
    }

    .periodic-table {
        grid-gap: 4px;
        padding: 20px;
    }
}

@media (max-width: 1200px) {
    .table-container {
        transform: scale(0.85);
    }

    .periodic-table {
        grid-template-columns: repeat(
            18,
            minmax(50px, 1fr)
        ); /* Adjust min-width */
        grid-gap: 3px;
    }

    .element {
        min-height: 60px;
        min-width: 50px;
    }
}

@media (max-width: 992px) {
    .table-container {
        transform: scale(0.8);
    }

    .periodic-table {
        grid-gap: 2px;
        padding: 15px;
        grid-template-columns: repeat(18, minmax(45px, 1fr));
    }

    .element-symbol {
        font-size: 1.4rem;
    }

    .element-name {
        font-size: 0.65rem;
    }

    .info-section {
        max-width: 90%;
        padding: 25px;
    }
}

@media (max-width: 768px) {
    .main-content {
        padding: 15px;
    }

    .table-container {
        transform: scale(0.7);
        width: 100%;
        overflow: visible; /* No overflow */
    }

    .periodic-table {
        width: 100%;
        grid-template-columns: repeat(
            18,
            minmax(35px, 1fr)
        ); /* Scale columns */
        grid-gap: 2px;
        padding: 10px;
    }

    .element {
        min-height: 45px;
        min-width: 35px;
        padding: 4px 2px;
    }

    .element-symbol {
        font-size: 1.1rem;
    }

    .element-name {
        font-size: 0.55rem;
    }

    .info-section {
        padding: 20px;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .info-title {
        font-size: 1.8rem;
    }

    .categories-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 15px;
    }
}

@media (max-width: 576px) {
    .main-content {
        padding: 10px;
    }

    .table-container {
        transform: scale(0.6);
    }

    .periodic-table {
        grid-template-columns: repeat(18, minmax(30px, 1fr));
        grid-gap: 1px;
    }

    .subtitle {
        font-size: 1rem;
        max-width: 90%;
    }

    .info-title {
        font-size: 1.6rem;
    }

    .categories-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .category-item {
        justify-content: flex-start;
        padding: 12px 15px;
    }

    .element {
        min-height: 40px;
        min-width: 30px;
    }

    .element-symbol {
        font-size: 1rem;
    }

    .element-name {
        font-size: 0.5rem;
    }
}

@media (max-width: 480px) {
    .table-container {
        transform: scale(0.55);
    }

    .periodic-table {
        grid-template-columns: repeat(18, minmax(25px, 1fr));
    }

    .element-symbol {
        font-size: 0.9rem;
    }

    .element-name {
        font-size: 0.45rem;
        display: block;
    }

    .element-number {
        font-size: 0.6rem;
    }
}

@media (max-width: 360px) {
    .table-container {
        transform: scale(0.5);
    }

    .periodic-table {
        grid-template-columns: repeat(18, minmax(20px, 1fr));
        grid-gap: 1px;
    }

    .info-section {
        padding: 15px;
    }

    .category-item {
        font-size: 0.9rem;
    }

    .element {
        min-height: 30px;
        min-width: 20px;
        padding: 2px 1px;
    }

    .element-symbol {
        font-size: 0.8rem;
    }

    .element-name {
        display: none; /* Hide on tiniest screens */
    }
}