:root {
    --bg-color: #1a1a2e;
    --table-bg: #232339;
    --tile-bg: #2c2c44;
    --tile-border: #3e3e5a;
    --text-color: #e0e0e0;
    --text-light: #b0b0b0;
    --accent-color: #6c63ff;

    /* Category Colors from your JSON */
    --diatomic-nonmetal: #ccffcc;
    --noble-gas: #c0ffff;
    --alkali-metal: #ff6666;
    --alkaline-earth-metal: #ffdead;
    --metalloid: #cccc99;
    --polyatomic-nonmetal: #e6e6fa;
    --lanthanide: #ffbfff;
    --actinide: #ff99cc;
    --transition-metal: #99ccff;
    --post-transition-metal: #cccccc;
    /* For categories like "unknown, probably transition metal", we'll use a general unknown style */
    --unknown: #e8e8e8; /* For elements with unknown/complex properties */
}

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

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
}

header {
    text-align: center;
    margin-bottom: 20px;
}

header h1 {
    color: var(--accent-color);
    font-weight: 500;
}

.legend-container {
    margin-bottom: 20px;
    width: 100%;
    max-width: 1200px;
}

.legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    background-color: var(--table-bg);
    border-radius: 8px;
}

.legend-item {
    display: flex;
    align-items: center;
    font-size: 0.8em;
    padding: 5px 8px;
    border-radius: 4px;
    color: var(--text-color); /* Ensure legend text is visible */
}
.legend-item span {
    color: var(--text-color); /* Override potential color inheritance from tile styles */
}


.legend-color-box {
    width: 15px;
    height: 15px;
    margin-right: 5px;
    border: 1px solid var(--tile-border);
}

.periodic-table-container {
    overflow-x: auto; /* Allows horizontal scrolling for the table on small screens */
    width: 100%;
    display: flex;
    justify-content: center;
    padding-bottom: 20px; /* Space for scrollbar if needed */
}

.periodic-table {
    display: grid;
    grid-template-columns: repeat(18, minmax(55px, 1fr)); /* Adjusted for better fit */
    grid-template-rows: repeat(10, minmax(55px, 1fr));    /* Adjusted for better fit */
    gap: 4px;
    padding: 10px;
    background-color: var(--table-bg);
    border-radius: 8px;
    width: fit-content; /* Shrink to content */
    max-width: 100%;
    /* min-width: 1000px; /* Ensure table has reasonable min width - can be adjusted */
}

.element-tile {
    border: 1px solid var(--tile-border);
    border-radius: 4px;
    padding: 5px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    font-size: 0.7em;
    position: relative; /* For positioning atomic number */
    min-height: 55px; /* Ensure consistent tile height */
}

.element-tile:hover {
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(108, 99, 255, 0.5);
    z-index: 10;
}

.element-tile .atomic-number {
    position: absolute;
    top: 3px;
    left: 3px;
    font-size: 0.8em;
    color: var(--text-light);
}

.element-tile .symbol {
    font-size: 1.5em;
    font-weight: bold;
    margin: 2px 0;
}

.element-tile .name {
    font-size: 0.8em;
    word-break: break-word;
    color: var(--text-light);
    line-height: 1.1; /* Adjust for small names */
}

/* Category specific styling */
/* These classes will be generated by JS from category names */
.diatomic-nonmetal { background-color: var(--diatomic-nonmetal); color: #333; }
.polyatomic-nonmetal { background-color: var(--polyatomic-nonmetal); color: #333; }
.noble-gas { background-color: var(--noble-gas); color: #333; }
.alkali-metal { background-color: var(--alkali-metal); color: #333; }
.alkaline-earth-metal { background-color: var(--alkaline-earth-metal); color: #333; }
.metalloid { background-color: var(--metalloid); color: #333; }
.lanthanide { background-color: var(--lanthanide); color: #333; }
.actinide { background-color: var(--actinide); color: #333; }
.transition-metal { background-color: var(--transition-metal); color: #333; }
.post-transition-metal { background-color: var(--post-transition-metal); color: #333; }
.unknown { background-color: var(--unknown); color: #333; } /* For elements with unknown properties */


/* Modal Styling */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.7);
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-content {
    background-color: var(--table-bg);
    margin: auto;
    padding: 25px;
    border: 1px solid var(--tile-border);
    border-radius: 10px;
    width: 90%;
    max-width: 700px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    position: relative;
    animation: fadeInModal 0.3s ease-out;
}

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

.close-button {
    color: var(--text-light);
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-button:hover,
.close-button:focus {
    color: var(--accent-color);
}

.modal-header {
    text-align: center;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--tile-border);
    padding-bottom: 10px;
}

.modal-header h2 {
    color: var(--accent-color);
    font-size: 1.8em;
}

.modal-header p {
    font-size: 0.9em;
    color: var(--text-light);
}

.modal-body {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 20px;
    margin-bottom: 15px;
}

.modal-left, .modal-right {
    flex: 1;
    min-width: 250px; /* Ensure content doesn't get too squeezed */
}

.modal-left p, .modal-right p {
    margin-bottom: 8px;
    font-size: 0.95em;
}

.modal-left p strong, .modal-right p strong {
    color: var(--text-color);
    font-weight: 500;
}
.modal-left span, .modal-right span, #modalElectronConfiguration {
    color: var(--text-light);
}

.config-text {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em !important;
    word-break: break-all;
}


.bohr-model-img {
    width: 150px;
    height: 150px;
    object-fit: contain;
    background-color: #f0f0f0; /* Light background for SVG/PNG visibility */
    border-radius: 50%;
    padding: 5px;
    margin: 0 auto 15px auto;
    display: block;
    border: 2px solid var(--accent-color);
}

.modal-summary {
    margin-top: 15px;
    border-top: 1px solid var(--tile-border);
    padding-top: 15px;
}

.modal-summary h3 {
    margin-bottom: 5px;
    color: var(--text-color);
    font-weight: 500;
}
.modal-summary p {
    font-size: 0.9em;
    color: var(--text-light);
    max-height: 150px; /* Limit summary height */
    overflow-y: auto; /* Add scroll for long summaries */
}


.modal-footer {
    text-align: center;
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px solid var(--tile-border);
}

.modal-footer a {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}
.modal-footer a:hover {
    color: var(--text-color);
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .periodic-table {
        grid-template-columns: repeat(18, minmax(50px, 1fr));
        grid-template-rows: repeat(10, minmax(50px, 1fr));
    }
}
@media (max-width: 992px) {
    .periodic-table {
        grid-template-columns: repeat(18, minmax(45px, 1fr));
        grid-template-rows: repeat(10, minmax(45px, 1fr));
    }
     .element-tile .symbol { font-size: 1.3em; }
    .element-tile .name, .element-tile .atomic-number { font-size: 0.7em; }
}


@media (max-width: 768px) {
    .periodic-table {
        grid-template-columns: repeat(9, minmax(40px, 1fr)); /* Adjust for very small screens if needed */
        grid-template-rows: auto; /* Let rows adapt */
        /* Note: This simple change might break the visual structure for a standard periodic table.
           A more complex responsive strategy (e.g., list view) would be needed for extreme narrowness.
           For now, relying on horizontal scroll provided by periodic-table-container.
        */
        min-width: 800px; /* Force a min-width to keep some structure before scroll */
    }


    .modal-content {
        width: 95%;
        padding: 15px;
    }
    .modal-header h2 { font-size: 1.5em; }
    .bohr-model-img { width: 120px; height: 120px;}
}

@media (max-width: 480px) {
    body { padding: 10px; }
    header h1 { font-size: 1.5em; }
    .legend-item { font-size: 0.7em; }
    .modal-body { flex-direction: column; } /* Stack left and right sections */
}