/* --- Global Styles & Variables --- */
:root {
    --primary-color: #3498db; /* Blue */
    --secondary-color: #2ecc71; /* Green */
    --accent-color: #f1c40f; /* Yellow */
    --background-color: #ecf0f1; /* Light Gray */
    --text-color: #2c3e50; /* Dark Blue/Gray */
    --container-bg: #ffffff; /* White */
    --correct-color: #27ae60; /* Darker Green */
    --incorrect-color: #c0392b; /* Red */
    --border-radius: 8px;
    --box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    --transition-speed: 0.3s;
}

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

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

h1, h2, h3 {
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 0.8em;
    color: var(--primary-color);
}

h1 {
    font-size: 2.2rem;
    text-align: center;
}

h2 {
    font-size: 1.8rem;
    border-bottom: 2px solid var(--secondary-color);
    padding-bottom: 0.3em;
    margin-bottom: 1em;
}

h3 {
     font-size: 1.4rem;
     margin-bottom: 1em;
}

p {
    margin-bottom: 1em;
}

/* --- Header & Footer --- */
.app-header {
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    color: var(--container-bg);
    padding: 1.5rem 1rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.app-header h1 {
    color: var(--container-bg);
    margin-bottom: 0.5rem;
}

.app-header nav {
    margin-top: 1rem;
}

.app-footer {
    background-color: var(--text-color);
    color: var(--background-color);
    text-align: center;
    padding: 1rem;
    margin-top: auto; /* Pushes footer to the bottom */
    font-size: 0.9em;
}

/* --- Main Container & Screens --- */
#app-container {
    flex-grow: 1; /* Allows main content to fill space */
    max-width: 900px;
    margin: 2rem auto;
    padding: 1.5rem;
    width: 95%;
}

.screen {
    display: none; /* Hide screens by default */
    background-color: var(--container-bg);
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    animation: fadeIn var(--transition-speed) ease-in-out;
}

.screen.active {
    display: block; /* Show active screen */
}

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

/* --- Buttons --- */
.nav-button,
.action-button,
.nav-control-btn {
    background-color: var(--primary-color);
    color: var(--container-bg);
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    margin: 0.5rem;
    transition: background-color var(--transition-speed), transform var(--transition-speed);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.nav-button:hover,
.action-button:hover,
.nav-control-btn:hover {
    background-color: #2980b9; /* Darker blue */
    transform: translateY(-2px);
}

.nav-button:focus,
.action-button:focus,
.nav-control-btn:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* Style for active navigation button (Study/Quiz) */
.nav-button.active {
     background-color: var(--secondary-color);
     /* Make active nav button look different from category buttons */
     border-radius: var(--border-radius); /* Keep original radius */
     background: var(--secondary-color); /* Solid color, no gradient */
}
.nav-button.active:hover {
    background-color: #27ae60; /* Slightly darker green */
}


.nav-control-btn {
    background-color: var(--secondary-color);
}
.nav-control-btn:hover {
     background-color: #229954; /* Darker Green */
}
.nav-control-btn:disabled {
    background-color: #bdc3c7; /* Gray */
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Style for the "Back to Categories" button */
.secondary-nav-button {
    background-color: #7f8c8d; /* Gray color */
    font-size: 0.9em;
    padding: 0.6rem 1rem;
    margin-bottom: 1.5rem; /* Space below the back button */
}

.secondary-nav-button:hover {
     background-color: #626f70; /* Darker gray */
}


/* --- Study Category Selection --- */
#study-category-selection {
    text-align: center;
    margin-bottom: 2rem; /* Add space below category selection */
}

/* Ensure container allows wrapping and centering */
.category-button-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 1.5rem; /* Row and column gap */
    margin-top: 1.5rem;
    padding: 0 1rem; /* Add some horizontal padding */
}

.category-button {
    background: linear-gradient(135deg, var(--secondary-color), #27ae60); /* Gradient background */
    color: var(--container-bg);
    border: none;
    padding: 0.9rem 1.8rem; /* Slightly larger padding */
    border-radius: 30px; /* More rounded */
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; /* Smooth transitions */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); /* Base shadow */
    flex-grow: 1; /* Allow buttons to grow */
    min-width: 150px; /* Minimum width */
    text-align: center;
}

.category-button:hover {
    filter: brightness(1.1); /* Brighter on hover */
    transform: translateY(-3px); /* Lift effect */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Enhanced shadow */
}

.category-button:focus {
    outline: 3px solid var(--accent-color); /* Clearer focus outline */
    outline-offset: 3px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.category-button:active {
    transform: translateY(-1px); /* Slight press effect */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}


/* --- Options & Feedback --- */
.options-container {
    display: grid;
    grid-template-columns: 1fr; /* Default to single column */
    gap: 0.8rem;
    margin-bottom: 1.5rem;
}

/* On larger screens, use two columns */
@media (min-width: 600px) {
    .options-container {
        grid-template-columns: 1fr 1fr;
    }
}

.option {
    background-color: var(--background-color);
    border: 2px solid transparent;
    padding: 1rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: border-color var(--transition-speed), background-color var(--transition-speed);
    text-align: center;
    position: relative; /* For pseudo-elements if needed */
}

.option:hover {
    border-color: var(--primary-color);
}

.option.selected {
    background-color: #dbeeff; /* Light blue for selection */
    border-color: var(--primary-color);
    font-weight: 500;
}

/* Study Mode Feedback */
.option.correct {
    background-color: #d9f7e6;
    border-color: var(--correct-color);
    color: var(--correct-color);
    font-weight: bold;
}

.option.incorrect {
    background-color: #fadbdb;
    border-color: var(--incorrect-color);
    color: var(--incorrect-color);
}

/* Disable pointer events after selection in study mode */
.study-content .options-container.answered .option {
    pointer-events: none;
}

.feedback {
    margin-top: 1rem;
    font-weight: bold;
    min-height: 1.5em; /* Reserve space */
}

.feedback.correct {
    color: var(--correct-color);
}

.feedback.incorrect {
    color: var(--incorrect-color);
}

.explanation {
    background-color: #f8f9f9;
    border-left: 4px solid var(--accent-color);
    padding: 1rem;
    margin-top: 1.5rem;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    animation: fadeIn 0.5s ease;
}

/* --- Study & Quiz Specific --- */
.category {
    font-size: 0.9em;
    color: #7f8c8d; /* Gray */
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.navigation-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    border-top: 1px solid #dfe6e9;
    padding-top: 1.5rem;
}

#study-progress, #quiz-progress-text {
    font-weight: 500;
    color: var(--text-color);
}

/* --- Quiz Progress Bar --- */
.quiz-progress-bar {
    width: 100%;
    background-color: var(--background-color);
    border-radius: var(--border-radius);
    margin-bottom: 1.5rem;
    overflow: hidden; /* Ensure inner bar stays within bounds */
    position: relative; /* For text overlay */
    height: 30px; /* Adjust height as needed */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

#quiz-progress-inner {
    height: 100%;
    width: 0%; /* Starts at 0 */
    background: linear-gradient(90deg, var(--secondary-color), var(--primary-color));
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    transition: width var(--transition-speed) ease-out;
    display: flex;
    align-items: center;
    justify-content: center;
}
#quiz-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--text-color); /* Contrast against gradient */
    font-weight: bold;
    font-size: 0.9em;
     text-shadow: 1px 1px 2px rgba(0,0,0,0.2); /* Make text readable */
}


/* --- Results Screen --- */
#score-display {
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
    text-align: center;
    color: var(--primary-color);
}
#results-details { /* Optional: for showing correct/incorrect answers */
    margin-top: 1rem;
    max-height: 300px; /* Limit height and allow scrolling if needed */
    overflow-y: auto;
    border-top: 1px solid #eee;
    padding-top: 1rem;
}
.result-item {
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    border-radius: 4px;
}
.result-item.correct {
    background-color: #e8f8f0;
    border-left: 3px solid var(--correct-color);
}
.result-item.incorrect {
     background-color: #fdeded;
     border-left: 3px solid var(--incorrect-color);
}
.result-item span {
    font-weight: bold;
}


/* --- Loader --- */
.loader {
    font-size: 1.2em;
    text-align: center;
    padding: 2rem;
    color: var(--primary-color);
}
/* Basic spinner */
.loader::before {
    content: '';
    display: inline-block;
    width: 25px;
    height: 25px;
    border: 3px solid rgba(52, 152, 219, 0.3);
    border-radius: 50%;
    border-top-color: var(--primary-color);
    animation: spin 1s ease-in-out infinite;
    margin-right: 10px;
    vertical-align: middle;
}

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

.error-text {
    color: var(--incorrect-color);
    font-weight: bold;
    text-align: center;
}

/* ================== FAB Styles ================== */
.fab {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 60px;
    height: 60px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 50%;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
    font-size: 24px; /* Adjust if using text instead of SVG */
    display: flex; /* For centering icon */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000; /* Ensure it's above other content */
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.fab:hover {
    background-color: #2980b9; /* Darker blue */
    transform: scale(1.1);
}

.fab:focus {
    outline: 3px solid var(--accent-color);
    outline-offset: 2px;
}

.fab svg {
    width: 28px; /* Adjust size of SVG icon */
    height: 28px;
    fill: white;
}

/* ================== Modal Styles ================== */
.modal {
    /* display: none; /* Managed by JS */
    position: fixed; /* Stay in place */
    z-index: 1001; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.6); /* Black w/ opacity */
    animation: fadeInModal 0.4s ease-out;
}

@keyframes fadeInModal {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto; /* 5% from the top and centered */
    padding: 25px 30px;
    border: 1px solid #888;
    width: 85%; /* Could be more flexible */
    /*max-width: 800px; /* Max width */
    border-radius: var(--border-radius);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    position: relative;
    animation: slideInModal 0.4s ease-out;
}

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


/* The Close Button */
.close-modal-btn {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 32px;
    font-weight: bold;
    line-height: 1;
}

.close-modal-btn:hover,
.close-modal-btn:focus {
    color: #333;
    text-decoration: none;
    cursor: pointer;
}

/* Modal Tabs */
.modal-tabs {
    overflow: hidden;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
    display: flex; /* Use flexbox for tabs */
    flex-wrap: wrap; /* Allow wrapping on small screens */
    gap: 5px; /* Spacing between tab buttons */
}

.modal-tabs button.tab-link {
    background-color: inherit;
    /* float: left; /* No longer needed with flex */
    border: none;
    outline: none;
    cursor: pointer;
    padding: 12px 18px;
    transition: 0.3s;
    font-size: 1rem;
    border-radius: 5px 5px 0 0; /* Rounded top corners */
    border-bottom: 3px solid transparent; /* For active indicator */
    margin-bottom: -1px; /* Overlap border-bottom */
}

.modal-tabs button.tab-link:hover {
    background-color: #ddd;
}

.modal-tabs button.tab-link.active {
    background-color: #f1f1f1;
    border-bottom: 3px solid var(--primary-color);
    font-weight: bold;
}

/* Tab Content */
.tab-content {
    display: none; /* Hidden by default */
    padding: 10px 0;
    animation: fadeEffect 0.6s; /* Fade in tabs */
    max-height: 60vh; /* Limit height and allow scrolling */
    overflow-y: auto; /* Add vertical scrollbar if content exceeds max-height */
}

.tab-content.active {
    display: block;
}

@keyframes fadeEffect {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Specific Tab Content Styling */
#tab-periodic img { /* Styling for the example image */
    display: block;
    margin: 10px auto;
    max-width: 100%;
    height: auto;
    border: 1px solid #eee;
}
/* Add styles for SVG if you embed one */
#periodic-table-container svg {
     max-width: 100%;
     height: auto;
     display: block;
     margin: 10px auto;
}


#tab-formulas ul, #tab-sigfigs ol, #tab-sigfigs ul, #tab-constants ul {
    padding-left: 25px;
    margin-top: 0.5em;
    list-style: disc; /* Default list style */
}
#tab-formulas li, #tab-sigfigs li, #tab-constants li {
     margin-bottom: 0.6em;
     line-height: 1.5;
}
#tab-sigfigs ol {
     list-style: decimal; /* Use numbers for ordered list */
}
#tab-sigfigs ol li {
    margin-bottom: 0.4em;
}
#tab-sigfigs strong {
    display: inline-block;
    margin-top: 1em;
    margin-bottom: 0.3em;
}
#tab-constants ul {
     margin-bottom: 1em; /* Space between sections */
}
#tab-constants strong {
     display: block;
     margin-bottom: 0.5em;
     font-size: 1.1em;
}


/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.2rem; }

    #app-container {
        width: 100%;
        margin: 1rem 0;
        padding: 1rem;
        border-radius: 0;
    }
    .screen {
        padding: 1.5rem;
        border-radius: 0;
        box-shadow: none;
    }
    .app-header {
        padding: 1rem;
    }
    .app-header nav {
        margin-top: 0.5rem;
    }
    .nav-button, .action-button, .nav-control-btn {
        padding: 0.7rem 1.2rem;
        font-size: 0.9rem;
    }

     /* Modal Responsiveness */
    .modal-content {
        width: 95%;
        margin: 10% auto;
        padding: 20px;
    }
    .modal-tabs button.tab-link {
        padding: 10px 14px;
        font-size: 0.9rem;
    }
     .tab-content {
        max-height: 70vh; /* Adjust height for mobile */
    }
}

@media (max-width: 480px) {
     .app-header nav {
         display: flex;
         justify-content: center;
     }
     .navigation-controls {
        flex-direction: column;
        gap: 1rem;
    }
     .nav-control-btn {
         width: 100%;
     }
     #study-progress {
         order: -1; /* Move progress text to top in column layout */
         margin-bottom: 0.5rem;
     }
      .quiz-progress-bar {
         height: 25px;
     }
     #quiz-progress-text {
         font-size: 0.8em;
     }

     /* FAB Responsiveness */
      .fab {
         width: 50px;
         height: 50px;
         bottom: 15px;
         right: 15px;
     }
     .fab svg {
         width: 24px;
         height: 24px;
     }

      /* Modal Responsiveness */
     .modal-content {
         margin: 15% auto; /* More margin needed sometimes */
         padding: 15px;
     }
      .modal-tabs button.tab-link {
         padding: 8px 10px; /* Smaller tabs */
         font-size: 0.85rem;
      }
      h2 { font-size: 1.4rem; } /* Reduce modal heading */
      h3 { font-size: 1.1rem; }
}

/* In css/style.css */

/* ================== FAB Styles ================== */
.fab {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 60px;
    height: 60px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 50%;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
    font-size: 24px; /* Adjust if using text instead of SVG */
    display: flex; /* For centering icon */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000; /* Ensure it's above other content */
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.fab:hover {
    background-color: #2980b9; /* Darker blue */
    transform: scale(1.1);
}

.fab:focus {
    outline: 3px solid var(--accent-color);
    outline-offset: 2px;
}

.fab svg {
    width: 28px; /* Adjust size of SVG icon */
    height: 28px;
    fill: white;
}

/* ================== Modal Styles ================== */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1001; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.6); /* Black w/ opacity */
    animation: fadeInModal 0.4s ease-out;
}

@keyframes fadeInModal {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto; /* 5% from the top and centered */
    padding: 25px 30px;
    border: 1px solid #888;
    width: 85%; /* Could be more flexible */
    /*max-width: 800px; /* Max width */
    border-radius: var(--border-radius);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    position: relative;
    animation: slideInModal 0.4s ease-out;
}

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


/* The Close Button */
.close-modal-btn {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 32px;
    font-weight: bold;
    line-height: 1;
}

.close-modal-btn:hover,
.close-modal-btn:focus {
    color: #333;
    text-decoration: none;
    cursor: pointer;
}

/* Modal Tabs */
.modal-tabs {
    overflow: hidden;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
    display: flex; /* Use flexbox for tabs */
    flex-wrap: wrap; /* Allow wrapping on small screens */
    gap: 5px; /* Spacing between tab buttons */
}

.modal-tabs button.tab-link {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 12px 18px;
    transition: 0.3s;
    font-size: 1rem;
    border-radius: 5px 5px 0 0; /* Rounded top corners */
    border-bottom: 3px solid transparent; /* For active indicator */
    margin-bottom: -1px; /* Overlap border-bottom */
}

.modal-tabs button.tab-link:hover {
    background-color: #ddd;
}

.modal-tabs button.tab-link.active {
    background-color: #f1f1f1;
    border-bottom: 3px solid var(--primary-color);
    font-weight: bold;
}

/* Tab Content */
.tab-content {
    display: none; /* Hidden by default */
    padding: 10px 0;
    animation: fadeEffect 0.6s; /* Fade in tabs */
    max-height: 60vh; /* Limit height and allow scrolling */
    overflow-y: auto; /* Add vertical scrollbar if content exceeds max-height */
}

.tab-content.active {
    display: block;
}

@keyframes fadeEffect {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Specific Tab Content Styling */
#tab-periodic img {
    display: block;
    margin: 10px auto;
    max-width: 100%;
    height: auto;
    border: 1px solid #eee;
}

#tab-formulas ul, #tab-sigfigs ol, #tab-sigfigs ul, #tab-constants ul {
    padding-left: 25px;
    margin-top: 0.5em;
}
#tab-formulas li, #tab-sigfigs li, #tab-constants li {
     margin-bottom: 0.6em;
     line-height: 1.5;
}
#tab-sigfigs ol li {
    margin-bottom: 0.4em;
}
#tab-sigfigs strong {
    display: inline-block;
    margin-top: 1em;
    margin-bottom: 0.3em;
}

/* Modal Responsiveness */
@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        margin: 10% auto;
        padding: 20px;
    }
    .modal-tabs button.tab-link {
        padding: 10px 14px;
        font-size: 0.9rem;
    }
     .tab-content {
        max-height: 70vh; /* Adjust height for mobile */
    }
}
@media (max-width: 480px) {
     .fab {
         width: 50px;
         height: 50px;
         bottom: 15px;
         right: 15px;
     }
     .fab svg {
         width: 24px;
         height: 24px;
     }
     .modal-content {
         margin: 15% auto; /* More margin needed sometimes */
         padding: 15px;
     }
}

/* Add these styles to the end of style.css */

/* ================== Periodic Table Styles ================== */
#periodic-table-container {
    width: 100%;
    margin-top: 15px;
    overflow-x: auto; /* Allow horizontal scroll on small screens */
    padding-bottom: 10px; /* Space for scrollbar */
}

#periodic-table-grid {
    display: grid;
    grid-template-columns: repeat(18, minmax(45px, 1fr)); /* 18 columns, flexible width */
    grid-template-rows: repeat(10, minmax(45px, auto)); /* 7 main rows + 1 gap + 2 lanthanide/actinide rows */
    gap: 3px;
    position: relative; /* For positioning labels maybe */
    min-width: 850px; /* Prevent excessive squashing, forces scroll */
    padding-left: 30px; /* Space for period labels */
    padding-top: 30px; /* Space for group labels */
}

#periodic-table-labels { /* Container for labels, might not be needed if positioning directly */
    position: relative; /* Or absolute within container? */
}

.group-label, .period-label {
    position: absolute;
    font-size: 0.75em;
    font-weight: bold;
    color: #555;
    text-align: center;
}

/* Position Group Labels (Example for Group 1 and 18) */
.group-label[data-group="1"] { grid-column: 1; grid-row: 1; top: -20px; left: 0; transform: translateX(50%); }
.group-label[data-group="2"] { grid-column: 2; grid-row: 1; top: -20px; left: 0; transform: translateX(50%); }
/* ... Add styles or generate positions for all 18 group labels via JS ... */
.group-label[data-group="18"] { grid-column: 18; grid-row: 1; top: -20px; right: 0; transform: translateX(-50%); }

/* Position Period Labels (Example for Period 1 and 7) */
.period-label[data-period="1"] { grid-row: 1; grid-column: 1; top: 0; left: -25px; transform: translateY(50%); }
.period-label[data-period="2"] { grid-row: 2; grid-column: 1; top: 0; left: -25px; transform: translateY(50%); }
/* ... Add styles or generate positions for all 7 period labels via JS ... */
.period-label[data-period="7"] { grid-row: 7; grid-column: 1; top: 0; left: -25px; transform: translateY(50%); }
/* We might need to adjust grid-template-rows/columns in #periodic-table-grid to include label rows/columns */


.element-cell {
    border: 1px solid #aaa;
    padding: 2px;
    text-align: center;
    font-size: 0.65rem; /* Small font needed */
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    position: relative; /* Needed if using absolute positioning inside */
    overflow: hidden; /* Prevent content spillover */
    line-height: 1.2;
    min-height: 45px; /* Ensure consistent height */
}

.element-cell:hover {
    transform: scale(1.1);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    z-index: 10; /* Bring to front on hover */
    border-color: #333;
}

.element-cell .atomic-number {
    font-size: 0.8em; /* Smaller than symbol */
    text-align: left;
    padding-left: 2px;
    position: absolute;
    top: 2px;
    left: 2px;
    color: #333;
}

.element-cell .symbol {
    font-size: 1.2em; /* Larger symbol */
    font-weight: bold;
    display: block; /* Ensure it takes block space */
    margin-top: 8px; /* Adjust spacing */
}

.element-cell .atomic-mass {
    font-size: 0.7em;
    margin-top: auto; /* Push to bottom */
    padding-bottom: 1px;
    color: #444;
}

/* --- Color Coding --- */
.element-cell[data-category="nonmetal"]              { background-color: #a0ffa0; }
.element-cell[data-category="noble-gas"]             { background-color: #c0ffff; }
.element-cell[data-category="alkali-metal"]          { background-color: #ff6666; }
.element-cell[data-category="alkaline-earth-metal"]  { background-color: #ffdead; }
.element-cell[data-category="metalloid"]             { background-color: #cccc99; }
.element-cell[data-category="halogen"]               { background-color: #ffffa0; }
.element-cell[data-category="post-transition-metal"] { background-color: #dcdcdc; } /* slightly darker grey */
.element-cell[data-category="transition-metal"]      { background-color: #ffc0cb; }
.element-cell[data-category="lanthanide"]            { background-color: #ffbfff; }
.element-cell[data-category="actinide"]              { background-color: #e6a0e6; }
.element-cell[data-category="unknown"]               { background-color: #e8e8e8; }

/* --- Legend --- */
#periodic-table-legend {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 15px;
    padding: 10px;
    font-size: 0.8em;
}

.legend-item {
    display: flex;
    align-items: center;
}

.legend-color-box {
    width: 15px;
    height: 15px;
    margin-right: 5px;
    border: 1px solid #ccc;
    display: inline-block; /* Or flex item */
}

/* --- Tooltip --- */
#element-tooltip {
    /* position, z-index, display defined inline/via JS */
    border: 1px solid #333;
    background-color: #ffffff;
    padding: 8px 12px;
    border-radius: 5px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    font-size: 0.9em;
    max-width: 200px;
    pointer-events: none; /* Prevent tooltip from interfering with clicks */
    line-height: 1.4;
}
#element-tooltip h4 { /* Style for tooltip heading */
    margin: 0 0 5px 0;
    font-size: 1.1em;
    color: var(--primary-color);
    border-bottom: 1px solid #eee;
    padding-bottom: 3px;
}
#element-tooltip p {
    margin: 3px 0;
}
#element-tooltip span { /* For category display maybe */
    text-transform: capitalize;
}

/* Adjust Table responsiveness */
@media (max-width: 900px) { /* Adjust breakpoint as needed */
     #periodic-table-grid {
        grid-template-columns: repeat(18, minmax(40px, 1fr));
        gap: 2px;
        min-width: 750px;
     }
     .element-cell { font-size: 0.6rem; min-height: 40px; }
     .element-cell .symbol { font-size: 1.1em; margin-top: 6px; }
     .element-cell .atomic-number { font-size: 0.75em; }
     .element-cell .atomic-mass { font-size: 0.65em; }
}
@media (max-width: 600px) {
     #periodic-table-grid {
        grid-template-columns: repeat(18, minmax(35px, 1fr));
        gap: 1px;
        min-width: 650px;
        padding-left: 20px; /* Less space for labels */
        padding-top: 20px;
     }
      .element-cell { font-size: 0.55rem; min-height: 35px;}
      .element-cell .symbol { font-size: 1em; margin-top: 4px;}
      .element-cell .atomic-number { display: none; } /* Hide number on smallest screens */
      .element-cell .atomic-mass { display: none; } /* Hide mass on smallest screens */
      #periodic-table-legend { font-size: 0.7em; }
      .period-label { left: -18px; }
}