/* styles.css */



body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
    /* cursor: url('cursor50.png'), auto;  */

    user-select: none; /* Standard syntax */
    -ms-user-select: none; /* Internet Explorer/Edge */
    -webkit-user-select: none; /* Chrome, Safari */
    -moz-user-select: none; /* Firefox */
}


body {
    overflow: hidden;
}

body {
    cursor: none; /* Hide the default cursor */
    /* cursor: url('cursor50.png'), auto; */
}


document {
    /* cursor: url('cursor50.png'), auto;  Show the custom cursor */
}


.cursor-default, .cursor-default * {
    cursor: url('cursor50.png'), auto; /* Show the custom cursor */
}



.cursor-valentines {
    cursor: url('ValentinesBow.cur'), url('ValentinesBow64.png'), url('ValentinesBow48.png'), url('ValentinesBow48.png'), url('ValentinesBow16.png'), url('ValentinesBow.cur'), url('cursor50.png'), auto; /* Show the custom cursor, preferably valentines, if it's okay for the browser */
}

.cursor-grabbing {
    cursor: url('cursor64hand.png'), grabbing; /* Closed hand cursor while dragging */
}

button, a {
    cursor: url('cursor50.png'), auto;
}


.custom-cursor {
    position: absolute;
    width: 40px; /* Size of the custom cursor */
    height: 40px; /* Size of the custom cursor */
    background-image: url('64px-Human-brain-vector.svg.png'); /* Image of the custom cursor */
    background-size: contain; /* Scale the image to fit the div */
    background-repeat: no-repeat; /* Prevent image from repeating */
    background-color: transparent; /* Ensure no background color */
    pointer-events: none; /* Prevent interference with mouse events */
    z-index: 10070;
    display: none; /* hidden at first */
}

.custom-cursor-notbrain {
    position: absolute;
    width: 50px; /* Size of the custom cursor */
    height: 50px; /* Size of the custom cursor */
    background-color: red; /* Color or image of the custom cursor */
    border-radius: 50%; /* Make it circular */
    pointer-events: none; /* Prevent interference with mouse events */
    z-index: 10070;
}


.moleculename {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 45px; 
    color: purple;
    font-size: 20px; 
    font-weight: bold;
    user-select: none;
}


.dot {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px; /* Size of the dot */
    height: 50px; /* Size of the dot */
    border-radius: 50%;
    /* border: 4px solid purple; */
    color: purple;
    font-size: 24px; /* Size of the number */
    font-weight: bold;
    user-select: none;
    transition: border-radius 0.5s ease; /* Add transition */
}


.dot-heart {
    background-image: url('heart.png'); /* Add the giftwrap image */
    background-size: cover; /* Ensure the image covers the entire dot */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Avoid tiling */
    border: none;
    width: 60px; /* Size of the dot */
    height: 60px; /* Size of the dot */
}

.dot-boardelement {
    width: 30px; /* Size of the dot */
    height: 30px; /* Size of the dot */
    border-radius: 50%;
    border: 4px solid purple;
    transition: border-radius 0.5s ease; /* Add transition */
}

/* Alternative dot styles */
.dot-neutral {
    background-color: white;
}

.dot-found {
    background-color: #FFFFFF;
    
}

.dot-offended {
    background-color: red;
}

.dot-gift {
    background-image: url('giftwrap.png'); /* Add the giftwrap image */
    background-size: cover; /* Ensure the image covers the entire dot */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Avoid tiling */
}

.dot-zombie {
    border-radius: 0%; /* Change to square */
    width: 50px; /* Set a width */
    height: 50px; /* Set a height */
    display: flex; /* Optional: use flexbox if you need to center text or other elements */
    background-image: url('zombie_wifflegif.gif');
    background-size: cover; /* Make the background image cover the entire element */
    color: transparent; /* Make text transparent (if any) */
    border: 0px;
    z-index: 9999;
}


.dot-grinch {
    width: 50px; /* Set a width */
    height: 50px; /* Set a height */
    display: flex; /* Optional: use flexbox if you need to center text or other elements */
    background-image: url('grinch.png'); /* Grinch pic made by chatgpt */
    background-size: cover; /* Make the background image cover the entire element */
    color: transparent; /* Make text transparent (if any) */
    border: 0px;
    z-index: 1100; /* Same as custom cursor */
}

.dot-findme {
    background-color:  rgb(255, 250, 205); /* Light yellow background to be shown as 'hint' */
}

.square {
    border-radius: 0%; /* Change to square */
}
/* Atom (dot) colors */
.dot.atom-H {
    background-color: #F0F0F0;
}
/* Hydrogen */
.dot.atom-C {
    background-color: #444444;
}
/* Carbon */
.dot.atom-O {
    background-color: #FF4C4C;
}
/* Oxygen */
.dot.atom-N {
    background-color: #4C6CFF;
}
/* Nitrogen */
.dot.atom-S {
    background-color: #FFD84C;
}
/* Sulfur */
.dot.atom-P {
    background-color: #FF9933;
}
/* Phosphorus */
.dot.atom-Cl {
    background-color: #33FF33;
}
/* Chlorine */
.dot.atom-F {
    background-color: #66FFCC;
}
/* Fluorine */
.dot.atom-Fe {
    background-color: #B87333;
}
/* Iron */
.dot.atom-Ca {
    background-color: #CCCCFF;
}
/* Calcium */
.dot.atom-Na {
    background-color: #AB5CF2; /* vivid violet-blue */
}
/* Sodium */

/* Level 1 atoms as standalone molecules */
.molecule-H {
    border: 4px solid #999999;
}
/* Hydrogen */
.molecule-C {
    border: 4px solid #333333;
}
/* Carbon */
.molecule-N {
    border: 4px solid #0044CC;
}
/* Nitrogen */
.molecule-O {
    border: 4px solid #CC0000;
}
/* Oxygen */
.molecule-Na {
    border: 4px solid #0077B6;
}
/* Sodium */
.molecule-Cl {
    border: 4px solid #228B22;
}
/* Chlorine */
.molecule-S {
    border: 4px solid #D4AF37;
}
/* Sulfur */
.molecule-Ca {
    border: 4px solid #8A2BE2;
}
/* Calcium */

/* Level 2 */
.molecule-H2 {
    border: 4px solid #AAAAAA;
}

.molecule-O2 {
    border: 4px solid #FF6666;
}

.molecule-N2 {
    border: 4px solid #3366FF;
}

.molecule-NaCl {
    border: 4px solid #20B2AA;
}

/* Level 3 */
.molecule-CO2 {
    border: 4px solid #2F4F4F;
}

.molecule-H2O {
    border: 4px solid #1E90FF;
}

.molecule-O3 {
    border: 4px solid #8B0000;
}

/* Level 4 */
.molecule-NH3 {
    border: 4px solid #4169E1;
}

.molecule-H2O2 {
    border: 4px solid #FF4500;
}

.molecule-C2H2 {
    border: 4px solid #8B4513;
}

/* Level 5 */
.molecule-CH4 {
    border: 4px solid #32CD32;
}

.molecule-CaCO3 {
    border: 4px solid #6A5ACD;
}

/* Level 6 */
.molecule-H2CO3 {
    border: 4px solid #556B2F;
}

/* Level 7 */
.molecule-C2H4O {
    border: 4px solid #DA70D6;
}

.molecule-CH3NO2 {
    border: 4px solid #DC143C;
}

.molecule-H2SO4 {
    border: 4px solid #FFA500;
}

/* Level 8 */
.molecule-C2H6 {
    border: 4px solid #00CED1;
}

.molecule-C3H4O {
    border: 4px solid #9932CC;
}

.molecule-C2H4O2 {
    border: 4px solid #FF1493;
}

.molecule-CH4N2O {
    border: 4px solid #4682B4;
}

/* Level 9 */
.molecule-GlycolicAcid {
    border: 4px solid #FF6347;
}
/* C2H4O2 variant */
.molecule-C3H6 {
    border: 4px solid #FFD700;
}

.molecule-C2H6O {
    border: 4px solid #ADFF2F;
}

.molecule-CH4N2O2 {
    border: 4px solid #FF00FF;
}

.molecule-C2H4O3 {
    border: 4px solid #4682B4;
}

/* Level 10 */
.molecule-C3H3NO2 {
    border: 4px solid #B22222;
}

.molecule-C2H6O2 {
    border: 4px solid #00FA9A;
}

.molecule-C2H4N2O2 {
    border: 4px solid #00008B;
}

/* Level 13 */
.molecule-C3H4N2O {
    border: 4px solid #FF8C00;
}

/* Level 24 */
.molecule-C6H12O6 {
    border: 4px solid #2E8B57;
}

/* Fluoride molecules */
.molecule-F {
    border: 4px solid #90E0EF;
}
/* Fluorine: A light blue/cyan, representing the pale yellow gas. */

.molecule-HF {
    border: 4px solid #B1B1B1;
}
/* Hydrogen fluoride: Neutral gray, to distinguish the acid. */

.molecule-F2 {
    border: 4px solid #03A9F4;
}
/* Fluorine gas: Vivid cyan/blue, echoing its highly reactive nature. */

.molecule-CF2 {
    border: 4px solid #28C4D8;
}
/* Difluorocarbene: Blue-green, signifying both carbon and fluorine content. */

.molecule-CF4 {
    border: 4px solid #1DE9B6;
}
/* Carbon tetrafluoride: Greenish-teal, for fluorinated carbon compounds. */

.molecule-SF6 {
    border: 4px solid #00C49A;
}
/* Sulfur hexafluoride: Deep green/teal, as used for its insulation properties. */

/* One added for each level */

.molecule-CO {
    border: 4px solid #616161;
}
/* Carbon monoxide: neutral gray, colorless nature and toxicity */

.molecule-NO2 {
    border: 4px solid #B22222;
}
/* Nitrogen dioxide: deep reddish-brown for its characteristic gas color */

.molecule-N2O {
    border: 4px solid #76C7C0;
}
/* Nitrous oxide: light teal, representing its "laughing gas" and clean clinical use */

.molecule-C2H2F2 {
    border: 4px solid #00BCD4;
}
/* 1,2-Difluoroethene: bright blue-cyan, for fluorocarbon species */

.molecule-C2H2Cl2 {
    border: 4px solid #BDB76B;
}
/* 1,2-Dichloroethene: khaki gold, for organochlorine compounds */

.molecule-C2H3Cl3 {
    border: 4px solid #CED23A;
}
/* 1,1,1-Trichloroethane: yellow-green for its chlorine content and environmental impact */

.molecule-C2H4Cl2 {
    border: 4px solid #A2FF86;
}
/* 1,2-Dichloroethane: light green, frequently used in plastics and PVC */

.molecule-C3H7Cl {
    border: 4px solid #8BC34A;
}
/* 1-Chloropropane: chartreuse, for small haloalkanes */

.molecule-C3H6O2 {
    border: 4px solid #FF7043;
}
/* Propionic acid: orange-red, distinguishing short carboxylic acids */

.molecule-C5H10O5 {
    border: 4px solid #FDD835;
}
/* Ribose: bright yellow, highlighting its importance in biochemistry and RNA */

.molecule-C8H8O8 {
    border: 4px solid #9C27B0;
}
/* Octanedioic (Suberic) acid: purple, for dicarboxylic acids and plastics chemicals */


/* Alternative dot styles end */

/* Multiplayer player name (no Exp bar in Molecules) — top of the right label column */
#player-exp-wrap {
    position: fixed;
    right: 10px;
    top: 10px;
    width: 130px;
    z-index: 3;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px;
    border-radius: 5px;
}
#playerNameAndLevelLabel {
    margin: 0;
    text-align: left;
    line-height: 1.25;
}
#playerNameAndLevelLabel:empty {
    display: none;
}
#player-exp-wrap:has(#playerNameAndLevelLabel:empty) {
    display: none;
}

#modeDiv, #levelDiv, #timeDiv, #targetTimeDiv1, #targetTimeDiv2 {
    position: fixed;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px;
    border-radius: 5px;
    width: 130px;
    z-index: 1;
}

#modeDiv, #levelDiv {
    text-align: left;
} 

#modeDiv {
    top: 10px;
}

#levelDiv {
    top: 60px;
}

#timeDiv, #targetTimeDiv1, #targetTimeDiv2 {
    text-align: right;
}

#timeDiv {
    top: 100px;
}

#targetTimeDiv1 {
    top: 140px;
}

#targetTimeDiv2 {
    top: 180px;
}

#labels-container.has-player-label #modeDiv {
    top: 55px;
}
#labels-container.has-player-label #levelDiv {
    top: 105px;
}
#labels-container.has-player-label #timeDiv {
    top: 145px;
}
#labels-container.has-player-label #targetTimeDiv1 {
    top: 185px;
}
#labels-container.has-player-label #targetTimeDiv2 {
    top: 225px;
}

#middle-container {
    position: fixed;
    left: 220px;
    right: 190px;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center; /* Horizontally center */
    align-items: center; /* Vertically center */
    text-align: center; /* Center text inside child elements */
}

#instructions-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: center;
    gap: 10px; /* Adjust the value as needed */
}



#instructions-container, #level-completion, #game-completion {
    margin-bottom: 20px; /* Adjust the spacing as needed */
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 10000;
}




.congrats-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    padding: 20px;
}

#level-completion, #game-completion {
    display: none;
    gap: 3px; /* Increase spacing between checkbox and button container */
}

    #level-completion label {
        padding: 5px;
        margin-bottom: 10px; /* Additional spacing below the checkbox */
    }



.button-container {
    display: flex;
    flex-direction: row;
    justify-content: center; /*  center horizontally */
    align-items: center; /*  center vertically (optional) */
    gap: 20px;
    margin-top: 15px;
}


/* Hide the default checkbox */
.checkbox-container input[type="checkbox"] {
    display: none;
}

/* Custom checkbox container style */
.checkbox-container {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: purple; 
}

    /* Custom checkbox (checkmark) style */
    .checkbox-container .checkmark {
        width: 20px;
        height: 20px;
        background-color: white; /* Purple background to match the button */
        border: solid purple; /* Purple checkmark to match currentTheme */
        border-radius: 5px; /* Match the button's rounded corners */
        margin-right: 10px;
        position: relative;
        transition: background-color 0.3s ease; /* Smooth transition to match button */
    }

    /* Checked state style */
    .checkbox-container input[type="checkbox"]:checked + .checkmark {
        background-color: white; /* White background when checked */
        border: 1px solid purple; /* Purple border when checked to match button's style */
    }

    /* Add a purple checkmark when checked */
    .checkbox-container .checkmark::after {
        content: "";
        position: absolute;
        top: 3px;
        left: 6px;
        width: 6px;
        height: 12px;
        border: solid purple; /* Purple checkmark to match theme */
        border-width: 0 3px 3px 0;
        transform: rotate(45deg);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .checkbox-container input[type="checkbox"]:checked + .checkmark::after {
        opacity: 1;
    }


/* Hide the default radio button */
.radiobutton-container input[type="radio"] {
    display: none;
}



/* Custom radiobutton container style */
.radiobutton-container {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: purple; /* Matches the checkbox text color */
    margin-bottom: 5px; /* Spacing between radio buttons */
}

    /* Custom radio button (checkmark) style */
    .radiobutton-container .checkmark {
        width: 20px;
        height: 20px;
        background-color: white; /* Matches checkbox background */
        border: solid purple; /* Purple border to match theme */
        border-radius: 50%; /* Circular shape for radio buttons */
        margin-right: 10px;
        position: relative;
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }

    /* Selected state style */
    .radiobutton-container input[type="radio"]:checked + .checkmark {
        background-color: white; /* Background remains white */
        border: 1px solid purple; /* Solid purple border for selection */
        box-shadow: 0 0 0 3px rgba(128, 0, 128, 0.3); /* Glow effect */
    }

    /* Add a dot when selected */
    .radiobutton-container .checkmark::after {
        content: "";
        position: absolute;
        top: 6px;
        left: 6px;
        width: 8px;
        height: 8px;
        background-color: purple; /* Dot color matches the theme */
        border-radius: 50%; /* Circular dot */
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .radiobutton-container input[type="radio"]:checked + .checkmark::after {
        opacity: 1;
    }

/*
@media (max-width: 600px) {
    #instructions-container, #level-completion {
        flex-direction: column;
        align-items: stretch;
        padding: 10px;
        margin-bottom: 10px;
    }

    .button-container {
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

    .radiobutton-container, .checkbox-container {
        font-size: 14px;
        width: 100%;
    }

    #instructions-container > * {
        width: 100%;
        min-width: 0;
    }
}
        */

#labels-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* wrap to next line if too tight */
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
}




/* Menu buttons section */

#menuButton, #settingsButton, #hintButton, #highScoreButton, #restartButton, #languageButton, #modeButton, #teacherModeButton, #playerButton, #retry-button, #restart-button, #next-level-button {
    background-color: purple;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    transition: background-color 0.3s ease;
    z-index: 200;
    width: 120px;
    text-align: center;
}

#menuButton, #settingsButton, #playerButton, #hintButton, #highScoreButton, #restartButton, #languageButton, #modeButton, #teacherModeButton {
    position: fixed;
    right: 20px;
}

#hintButton, #restartButton, #languageButton, #modeButton, #settingsButton, #highScoreButton, #teacherModeButton, #playerButton {
    display: none; /* hidden until menu button clicked */
}


#hintButton {
    bottom: 340px;
}

#settingsButton {
    bottom: 300px;
}

#teacherModeButton {
    bottom: 260px;
}

#highScoreButton {
    bottom: 220px;
}


#languageButton, #languageOptions {
    bottom: 180px;
}

#playerButton, #playerOptions {
    bottom: 140px;
}

#modeButton, #modeOptions {
    bottom: 100px;
}

#restartButton, #restartOptions {
    bottom: 60px;
}

#menuButton {
    bottom: 20px;
}

/* Dropdown menu styling */
.dropdown {
    display: none;
    position: fixed;
    right: calc(20px + 120px + 8px);
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
    z-index: 250;
    min-width: 140px;
}

    .dropdown button {
        display: block;
        background-color: white;
        border: none;
        width: 100%;
        background-color: white;
        color: purple;
        padding: 10px 20px;
        border-radius: 5px;
        font-size: 16px;
    }

        .dropdown button:hover {
            background-color: purple;
            color: white;
        }

/* Action buttons section end */

/* Styling for the redo notice */
#redoNotice {
    font-size: 16px; /* Slightly larger font size */
    font-weight: bold; /* Bold text */
    color: darkred; /* Dark red color for emphasis */
    margin-top: 20px; /* Space above the notice */
}



/* Styling for higscore */

.congrats {
    display: none;
    cursor: url('cursor50.png'), pointer;
    display: none; /* hidden until needed */
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Dim background */
    z-index: 200;
}

.highscore-box {
    display: none;
    cursor: url('cursor50.png'), pointer;
    z-index: 200;
    background-color: #fff;
    border: 4px solid purple;
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    animation: bounce 1.2s ease-in-out infinite alternate;
}

    .highscore-box h1 {
        color: #ff5722;
        font-size: 2rem;
        margin-bottom: 10px;
    }

    .highscore-box p {
        font-size: 1.2rem;
        color: #333;
        margin-bottom: 20px;
    }

#highscoreForm {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#playerName {
    cursor: text;
    width: 80%;
    padding: 10px;
    font-size: 1rem;
    border: 2px solid #ff5722;
    border-radius: 10px;
    margin-bottom: 15px;
    text-align: center;
    color: purple;
}

#saveScoreButton {
    background-color: #ff5722;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 1.2rem;
    border-radius: 10px;
    cursor: url('cursor50.png'), pointer;
    transition: background-color 0.3s ease;
}

    #saveButton:hover {
        background-color: #e64a19;
    }

/* Fun bounce animation to make it more playful */
@keyframes bounce {
    from {  transform: translateY(0);  }
    to {    transform: translateY(-10px);   }
}

/* Make new record result bar border glow */
@keyframes celebrateGlow {
    from   {   box-shadow: 0 0 10px 2px gold, 0 0 20px 4px orange;  }
    to {   box-shadow: 0 0 20px 8px gold, 0 0 40px 16px orange;     }
}






/* Black overlay covering the entire screen */
.leaderboard-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Transparent dark background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    visibility: hidden; /* Hidden by default */
    opacity: 0;
    transition: visibility 0s, opacity 0.5s ease-in-out;
}

    /* Active state for the overlay */
    .leaderboard-overlay.active {
        visibility: visible;
        opacity: 1;
    }

/* Leaderboard container */
.leaderboard-container {
    display: none; /* Hidden by default */
    position: relative; /* Relative to the overlay */
    z-index: 1001; /* Above the overlay */
    justify-content: center;
    align-items: center;
    pointer-events: auto; /* Enable interaction within the container */
    animation: fadeIn 0.5s ease-in-out; /* Optional fade-in animation */
}

    /* Active state for the leaderboard */
    .leaderboard-container.active {
        display: flex; /* Make the leaderboard visible */
    }


/* Leaderboard box */
.leaderboard-box {
    display: none; /* Hidden by default */
    background-color: #fff;
    border: 4px solid purple;
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    animation: bounce 1.2s ease-in-out infinite alternate;
    width: 90%;
    max-width: 800px;
    cursor: url('cursor50.png'), pointer;
}




    .leaderboard-box h1 {
        color: #ff5722;
        font-size: 2rem;
        margin-bottom: 20px;
    }

.leaderboard-scrollable {
    cursor: url('cursor50.png'), pointer;
    max-height: 300px; /* Set max height for scroll area */
    overflow-y: auto; /* Enable vertical scrolling */
    border-top: 2px solid purple;
    border-bottom: 2px solid purple;
}

.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
}

    .leaderboard-table th, .leaderboard-table td {
        padding: 12px 15px;
        border: 2px solid purple;
        text-align: center;
        color: purple;
        font-size: 1.2rem;
    }

    .leaderboard-table th {
        background-color: #ff5722;
        color: #fff;
        font-weight: bold;
        position: sticky; /* Keeps header at the top */
        top: 0;
    }

    .leaderboard-table tbody tr:nth-child(odd) {
        background-color: #f0e9e1;
    }

    .leaderboard-table tbody tr:nth-child(even) {
        background-color: #ffefd5;
    }

#backButton {
    background-color: #ff5722;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 1.2rem;
    border-radius: 10px;
    cursor: url('cursor50.png'), pointer;
    transition: background-color 0.3s ease;
    margin-top: 20px;
}

    #backButton:hover {
        background-color: #e64a19;
    }

/* Teacher Mode Password Prompt Styles */
.password-prompt-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1002;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.5s ease-in-out;
}

.password-prompt-overlay.active {
    visibility: visible;
    opacity: 1;
}

.password-prompt-container {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1003;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
    animation: fadeIn 0.5s ease-in-out;
}

.password-prompt-container.active {
    display: flex;
}

.password-prompt-box {
    display: none;
    background-color: #fff;
    border: 4px solid purple;
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 400px;
    cursor: url('cursor50.png'), pointer;
    flex-direction: column;
}

.password-prompt-container.active .password-prompt-box {
    display: flex;
}

.password-prompt-box h1 {
    color: #ff5722;
    font-size: 1.8rem;
    margin-bottom: 20px;
}

.password-prompt-box input[type="password"] {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border: 2px solid purple;
    border-radius: 8px;
    font-size: 1rem;
    box-sizing: border-box;
}

.password-prompt-box input[type="password"]:focus {
    outline: none;
    border-color: #ff5722;
}

.password-error {
    color: #ff5722;
    font-size: 0.9rem;
    margin: 10px 0;
    min-height: 20px;
}

.password-prompt-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}

.password-prompt-actions button {
    background-color: #ff5722;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 1rem;
    border-radius: 8px;
    cursor: url('cursor50.png'), pointer;
    transition: background-color 0.3s ease;
}

.password-prompt-actions button:hover {
    background-color: #e64a19;
}

.password-prompt-actions button:last-child {
    background-color: #6c757d;
}

.password-prompt-actions button:last-child:hover {
    background-color: #5a6268;
}

/* Teacher Mode Styles */
.teacher-mode-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.5s ease-in-out;
}

.teacher-mode-overlay.active {
    visibility: visible;
    opacity: 1;
}

.teacher-mode-container {
    display: none;
    position: relative;
    z-index: 1001;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
    animation: fadeIn 0.5s ease-in-out;
}

.teacher-mode-container.active {
    display: flex;
}

.teacher-mode-box {
    display: none;
    background-color: #fff;
    border: 4px solid purple;
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 900px;
    max-height: 80vh;
    cursor: url('cursor50.png'), pointer;
    flex-direction: column;
}

.teacher-mode-container.active .teacher-mode-box {
    display: flex;
}

.teacher-mode-box h1 {
    color: #ff5722;
    font-size: 2rem;
    margin-bottom: 20px;
}

/* Molecule Fact Sheet Styles */
.fact-overlay {
    position: fixed;
    bottom: 80px; /* Moved lower so atom dots don't get stuck below */
    left: 20px;
    z-index: 2000;
    pointer-events: none; /* Allow clicks to pass through */
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.3s ease-in-out;
}

.fact-overlay.active {
    visibility: visible;
    opacity: 1;
}

.fact-box {
    pointer-events: auto; /* Allow interaction with the box itself */
    background-color: #fff;
    border: 4px solid purple;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    width: 320px; /* Fixed width so buttons don't move between cards */
    display: flex;
    flex-direction: column;
    animation: slideInFromBottomLeft 0.4s ease-out;
    cursor: url('cursor50.png'), pointer;
}

.fact-box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.fact-box-title {
    font-size: 1.6rem;
    color: #ff5722;
    margin: 0;
}

.fact-box-formula {
    font-size: 1.2rem;
    color: purple;
    font-weight: bold;
    margin-bottom: 10px;
}

.fact-box-text {
    font-size: 1rem;
    color: #333;
    line-height: 1.4;
    margin-bottom: 15px;
}

.fact-close-btn {
    background-color: purple;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: 0.95rem;
    cursor: url('cursor50.png'), pointer;
    align-self: flex-end;
    transition: background-color 0.3s ease;
}

.fact-close-btn:hover {
    background-color: #6a1b9a;
}

.fact-box-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.fact-nav-btn {
    background-color: purple;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: url('cursor50.png'), pointer;
    transition: background-color 0.3s ease;
    min-width: 45px;
    line-height: 1;
    display: none; /* Hidden by default, shown only during cycling */
}

.fact-nav-btn:hover {
    background-color: #6a1b9a;
}

.fact-nav-btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
    opacity: 0.5;
}

.fact-nav-btn:disabled:hover {
    background-color: #ccc;
}

.teacher-mode-scrollable {
    cursor: url('cursor50.png'), pointer;
    max-height: 400px;
    overflow-y: auto;
    border-top: 2px solid purple;
    border-bottom: 2px solid purple;
    margin-bottom: 20px;
    padding: 10px;
}

.molecule-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin: 5px 0;
    border: 2px solid purple;
    border-radius: 8px;
    background-color: #f9f9f9;
}

.molecule-item:hover {
    background-color: #f0f0f0;
}

.molecule-info {
    flex: 1;
    text-align: left;
    color: purple;
    font-size: 1rem;
}

.molecule-info strong {
    color: #ff5722;
}

.molecule-actions {
    display: flex;
    gap: 10px;
}

.molecule-actions button {
    padding: 5px 15px;
    font-size: 0.9rem;
    border: 2px solid purple;
    border-radius: 5px;
    background-color: #fff;
    color: purple;
    cursor: url('cursor50.png'), pointer;
    transition: background-color 0.3s ease;
}

.molecule-actions button:hover {
    background-color: purple;
    color: white;
}

.molecule-actions button.delete-btn {
    background-color: #ff5722;
    color: white;
    border-color: #ff5722;
}

.molecule-actions button.delete-btn:hover {
    background-color: #e64a19;
}

.teacher-mode-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
}

.teacher-mode-actions button {
    padding: 10px 20px;
    font-size: 1rem;
    border: 2px solid purple;
    border-radius: 8px;
    background-color: #fff;
    color: purple;
    cursor: url('cursor50.png'), pointer;
    transition: background-color 0.3s ease;
}

.teacher-mode-actions button:hover {
    background-color: purple;
    color: white;
}

.teacher-mode-settings {
    width: 100%;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 2px solid purple;
}

.password-protection-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: url('cursor50.png'), pointer;
    font-size: 1rem;
    color: purple;
    user-select: none;
}

.password-protection-toggle input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: url('cursor50.png'), pointer;
    accent-color: purple;
}

.password-protection-toggle span {
    font-weight: 500;
}

.add-molecule-form {
    display: none;
    padding: 20px;
    border: 2px solid purple;
    border-radius: 8px;
    margin: 20px 0;
    background-color: #f9f9f9;
}

.add-molecule-form.active {
    display: block;
}

.add-molecule-form input,
.add-molecule-form textarea {
    width: 100%;
    padding: 8px;
    margin: 5px 0;
    border: 2px solid purple;
    border-radius: 5px;
    font-size: 1rem;
    box-sizing: border-box;
}

.add-molecule-form input[type="color"] {
    width: 60px;
    height: 40px;
    padding: 2px;
    cursor: url('cursor50.png'), pointer;
    border: 2px solid purple;
    border-radius: 5px;
}

.add-molecule-form label {
    display: block;
    margin-top: 10px;
    color: purple;
    font-weight: bold;
    text-align: left;
}

.add-molecule-form .required-atoms-input {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.add-molecule-form .atom-input-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.add-molecule-form .atom-input-row input {
    flex: 1;
}

.add-molecule-form .atom-input-row select.atom-symbol {
    flex: 2;
    min-width: 150px;
    padding: 8px;
    border: 2px solid purple;
    border-radius: 5px;
    font-size: 1rem;
    box-sizing: border-box;
}

.add-molecule-form .atom-input-row input.atom-count {
    flex: 0.5;
    max-width: 80px;
    padding: 8px;
    border: 2px solid purple;
    border-radius: 5px;
    font-size: 1rem;
    box-sizing: border-box;
}

.level-section {
    margin: 20px 0;
    padding: 15px;
    border: 2px solid #ff5722;
    border-radius: 8px;
    background-color: #fff;
}

.level-section h2 {
    color: #ff5722;
    margin-bottom: 10px;
    font-size: 1.5rem;
}

#controlsContainer {
    cursor: url('cursor50.png'), pointer;
    display: flex;
    align-items: center; /* Vertically align items */
    justify-content: flex-start; /* Align items to the left */
    gap: 10px; /* Add space between musicControls and voiceSelector */
    margin-top: 10px;
}


#music-container {
    cursor: url('cursor50.png'), pointer;
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Align both boxes vertically */
    position: absolute;
    bottom: 5px;
    left: 5px;
    gap: 15px; /* Space between creditBox and musicControls */
    z-index: 100;
}

#creditBox, #musicControls, #voiceSelector {
    cursor: url('cursor50.png'), pointer;
    background-color: rgba(0, 0, 0, 0.5); /* Subtle dark background */
    color: #ddd; /* Light gray text for contrast */
    font-family: 'Arial', sans-serif;
    font-size: 10px;
    border-radius: 4px;
    padding: 5px 8px;
    opacity: 0.7; /* Slight transparency */
    display: flex; /* Ensure child alignment within boxes */
    align-items: center; /* Vertically center the content */
    min-height: 22px; /* Consistent height for all boxes */
}



#musicControls {
    cursor: url('cursor50.png'), pointer;
    gap: 5px; /* Add space between controls */
}

    #musicControls a {
        width: 10px; /* Set a fixed width for the button */
        font-size: 14px; /* Slightly larger for symbols */
        color: #aaa; /* Light gray for controls */
        text-decoration: none;
        cursor: pointer; /* Hand cursor */
        margin: 0; /* Remove default margin */
        padding: 0 6px; /* Add padding for better clickability */
    }

        #musicControls a:hover {
            color: #fff; /* Brighten on hover */
        }



    #musicControls label {
        color: #ddd;
        font-size: 1rem;
    }


#volumeControl {
    cursor: url('cursor50.png'), pointer;
    width: 100px;
    cursor: pointer;
    -webkit-appearance: none;
    background: #d1c0f0; /* Light purple background */
    border-radius: 5px;
}

    #volumeControl::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        background: #8e24aa; /* Dark purple thumb */
        border-radius: 50%;
        cursor: pointer;
    }

    #volumeControl::-moz-range-thumb {
        width: 20px;
        height: 20px;
        background: #8e24aa; /* Dark purple thumb */
        border-radius: 50%;
        cursor: pointer;
    }



#voiceSelector {
    display: flex;
    margin-left: 0; /* Remove redundant margin */
    gap: 5px; /* Space between label and dropdown */
}

    #voiceSelector label {
        margin-right: 5px;
    }

#voiceDropdown {
    background-color: #222;
    color: #ddd;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 2px 5px;
    font-size: 10px;
}




.welcome-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Transparent dark background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    visibility: hidden; /* Hidden by default */
    opacity: 0;
    transition: visibility 0s, opacity 0.5s ease-in-out;
    pointer-events: none;
}

    .welcome-overlay.active {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

.welcome-message {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: #fff;
    padding: 20px;
    padding-right: 44px;
    border-radius: 10px;
    text-align: center;
    max-width: 500px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    border: 10px solid #28a745;
}

    .welcome-message h1 {
        margin: 0 0 10px;
        font-size: 24px;
    }

    .welcome-message p {
        margin: 10px 0 20px;
        font-size: 16px;
    }

    .welcome-message button {
        background-color: #28a745;
        color: #fff;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
        font-size: 16px;
    }

        .welcome-message button:hover {
            background-color: #218838;
        }

    .welcome-message .instructions-close-btn {
        position: absolute;
        top: 6px;
        right: 6px;
        width: 28px;
        height: 28px;
        padding: 0;
        border: none;
        border-radius: 6px;
        background: #f0f0f0;
        color: #333;
        font-size: 1.4rem;
        line-height: 1;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .welcome-message .instructions-close-btn:hover {
        background: #e0e0e0;
        color: #333;
    }

.player-select-spacious {
    padding: 15px;
    gap: 15px;
    max-width: 360px;
    min-width: 260px;
}

.player-select-spacious h1 {
    margin: 0 0 6px;
    font-size: 1.1rem;
}

.player-select-spacious p {
    margin: 0 0 8px;
    font-size: 0.95rem;
}

.player-select-spacious select,
.player-select-spacious input[type="text"],
.player-select-spacious button {
    padding: 8px 12px;
    font-size: 1rem;
    margin: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.player-select-spacious button {
    margin-top: 0;
}

.rating-prompt-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10050;
    pointer-events: auto;
}

.rating-prompt-box {
    background: #fff;
    border-radius: 12px;
    padding: 24px 28px;
    max-width: 420px;
    margin: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    border: 8px solid #28a745;
    text-align: center;
}

.rating-prompt-title {
    margin: 0 0 12px;
    font-size: 1.25rem;
}

.rating-prompt-box p {
    margin: 0 0 16px;
    font-size: 1rem;
    line-height: 1.4;
}

.rating-prompt-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}

.rating-prompt-btn {
    background-color: #28a745;
    color: #fff;
    border: none;
    padding: 10px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
}

.rating-prompt-btn:hover {
    background-color: #218838;
}



/* Welcome “Go Play” region — aligned with Crazy Numbers #wmSelectGame */
#wmSelectGame {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 15px;
    margin-top: 20px;
    border-radius: 10px;
    padding: 15px;
}

    #wmSelectGame .game-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        width: 100%;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }

    #wmSelectGame .game-grid.game-grid-justplay {
        margin-top: 0;
        grid-template-columns: repeat(2, 1fr);
    }

    #wmSelectGame .game-grid.game-grid-justplay .wm-justplay-wide {
        grid-column: span 2;
    }

#wmSelectGame button {
    width: 100%;
    padding: 12px 10px;
    font-size: 1.1em;
    border-radius: 10px;
}

#wmSelectDifficulty {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 15px;
    margin-top: 20px;
}

    #wmSelectDifficulty button {
        width: 100%;
        max-width: 300px;
    }

#chartsContainer {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Space between charts */
    width: 100%; /* Full width of container */
    margin: auto;
}

.chartContainer {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Space between elements in a chart */
    width: 300px;
    margin: auto;
}

    .chartContainer h3 {
        font-size: 18px;
        text-align: center;
        margin: 0;
    }

/* Molecule Fact Sheet Styles - Non-blocking */
.fact-overlay {
    position: fixed;
    bottom: 80px; /* Moved lower so atom dots don't get stuck below */
    left: 20px;
    z-index: 2000;
    pointer-events: none; /* Allow clicks to pass through */
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.3s ease-in-out;
}

.fact-overlay.active {
    visibility: visible;
    opacity: 1;
}

.fact-box {
    pointer-events: auto; /* Allow interaction with the box itself */
    background-color: #fff;
    border: 4px solid purple;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    width: 320px; /* Fixed width so buttons don't move between cards */
    display: flex;
    flex-direction: column;
    animation: slideInFromBottomLeft 0.4s ease-out;
    cursor: url('cursor50.png'), pointer;
}

@keyframes slideInFromBottomLeft {
    from {
        transform: translate(-100%, 100%);
        opacity: 0;
    }
    to {
        transform: translate(0, 0);
        opacity: 1;
    }
}

.fact-box-header {
    margin-bottom: 10px;
}

.fact-box-title {
    color: #ff5722;
    font-size: 1.5rem;
    margin: 0 0 5px 0;
    font-weight: bold;
}

.fact-box-formula {
    font-size: 1.8rem;
    font-weight: bold;
    color: purple;
    margin: 10px 0;
    text-align: center;
    padding: 8px;
    background-color: #f9f9f9;
    border-radius: 8px;
}

.fact-box-text {
    font-size: 1rem;
    color: #333;
    line-height: 1.5;
    margin: 15px 0;
    text-align: left;
}

.fact-close-btn {
    background-color: purple;
    color: #fff;
    border: none;
    padding: 8px 16px;
    font-size: 0.9rem;
    border-radius: 8px;
    cursor: url('cursor50.png'), pointer;
    transition: background-color 0.3s ease;
    width: 100%;
    margin-top: 10px;
}

.fact-close-btn:hover {
    background-color: #6a1b9a;
}