body { background-color: #121212; color: #e0e0e0; font-family: sans-serif; margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; }
#game-container { text-align: center; display: flex; flex-direction: column; align-items: center; max-height: 100vh; padding: 10px; box-sizing: border-box; }

/* --- COMPACT HEADER LAYOUT --- */
header { 
    margin-bottom: 15px; 
    position: relative; 
    width: 100%; 
    max-width: 1475px; 
}

.header-top { 
    display: flex; 
    justify-content: flex-end; /* Pushes the buttons to the far right */
    align-items: center; 
    margin-bottom: 10px; 
    padding: 0 10px; 
    position: relative; /* Acts as an anchor for the centered title */
}

h1 { 
    margin: 0; 
    font-size: 2.2rem; 
    color: #3498db; 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); /* Locks it perfectly in the dead center */
}

.header-buttons { 
    display: flex; 
    gap: 10px; 
    margin: 0; 
}

#undo-btn { background: #3498db; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; font-weight: bold; transition: background 0.2s; }
#undo-btn:hover { background: #2980b9; }
#clear-chamber-btn { background: #ff4757; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; font-weight: bold; transition: background 0.2s; }
#clear-chamber-btn:hover { background: #ff6b81; }

/* Message Board Styling */
.message-board { background: #2c3e50; color: #ecf0f1; border: 2px solid #34495e; border-radius: 6px; padding: 10px 20px; font-weight: bold; font-size: 1rem; min-height: 24px; transition: all 0.3s ease; display: inline-block; width: 80%; }
.message-board.error { background: #c0392b; border-color: #e74c3c; }
.message-board.hint { background: #27ae60; border-color: #2ecc71; }

.main-layout { display: flex; gap: 15px; justify-content: center; width: 100%; }

#challenge-area, #reservoir-area, #storage-area { 
    position: relative; 
    z-index: 1; 
    width: 200px; 
    height: 600px; 
    background: #1e1e1e; 
    border: 3px solid #444; 
    border-radius: 8px; 
    padding: 10px; 
    display: flex; 
    flex-direction: column; 
    overflow-y: auto; 
}

h3 { margin-top: 0; margin-bottom: 15px; }

/* Reservoir Slots - Tightened to 100px to perfectly kill the scrollbar! */
.reservoir-slot { 
    min-height: 100px; 
    padding-bottom: 18px; 
    box-sizing: border-box; 
    border: 2px dashed #444; 
    border-radius: 8px; 
    position: relative; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin-bottom: 8px; 
    flex-shrink: 0; 
}

/* Reservoir Text Labels - Tucked closer to the bottom edge */
.reservoir-slot p { 
    position: absolute; 
    bottom: 2px; 
    font-size: 11px; 
    color: #777; 
    pointer-events: none; 
    text-align: center; 
    width: 100%; 
    line-height: 1.2; 
    margin: 0; 
}

/* Corner Atom Counter Badge - Tucked closer to the top edge */
.atom-counter {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 22px;
    height: 22px;
    border: 2px solid #555;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: bold;
    color: #e0e0e0;
    background: #222;
    pointer-events: none;
    z-index: 10;
}
.atom-counter.empty {
    color: #ff4757;
    border-color: #ff4757;
}

#chamber { 
    width: 800px; 
    height: 600px; 
    background: #000; 
    border: 3px solid #333; 
    border-radius: 8px; 
    position: relative; 
    box-shadow: inset 0 0 50px #111; 
    overflow: visible; 
    z-index: 10; 
    flex-shrink: 0;
}

/* Atom & Shell Styling */
.atom { width: 80px; height: 80px; position: absolute; transform-origin: center; pointer-events: none; z-index: auto; }
.ring-outer { width: 74px; height: 74px; border: 1px solid rgba(0, 255, 255, 0.2); border-radius: 50%; position: absolute; top: 2px; left: 2px; z-index: 1; pointer-events: auto; cursor: grab; }
.nucleus { width: 26px; height: 26px; border-radius: 50%; position: absolute; top: 27px; left: 27px; display: flex; align-items: center; justify-content: center; color: white; font-size: 13px; font-weight: bold; z-index: 4; pointer-events: auto; cursor: grab; }

.nucleus.h { background: #ff4757; box-shadow: 0 0 10px #ff4757; }
.nucleus.c { background: #7f8c8d; box-shadow: 0 0 10px #7f8c8d; }
.nucleus.n { background: #9b59b6; box-shadow: 0 0 10px #9b59b6; }
.nucleus.o { background: #3498db; box-shadow: 0 0 10px #3498db; }
.nucleus.f { background: #2ecc71; box-shadow: 0 0 10px #2ecc71; }
/* --- STAGE 2 ATOM COLORS --- */
.nucleus.s { background: #f1c40f; box-shadow: 0 0 10px #f1c40f; color: black; } /* Yellow */
.nucleus.p { background: #e67e22; box-shadow: 0 0 10px #e67e22; } /* Orange */
.nucleus.cl { background: #27ae60; box-shadow: 0 0 10px #27ae60; } /* Dark Green */

.electron { width: 6px; height: 6px; background: #1e90ff; border-radius: 50%; position: absolute; box-shadow: 0 0 5px #1e90ff; transition: opacity 0.2s; z-index: 5; pointer-events: none; }

/* --- INVERSE ELECTRON SCALING (Keeps electrons identical in size!) --- */
.atom[data-type="H"] .electron { transform: scale(1.72); }
.atom[data-type="C"] .electron { transform: scale(1.00); }
.atom[data-type="N"] .electron { transform: scale(1.09); }
.atom[data-type="O"] .electron { transform: scale(1.19); }
.atom[data-type="F"] .electron { transform: scale(1.32); }
.atom[data-type="S"] .electron { transform: scale(1.05); }
.atom[data-type="P"] .electron { transform: scale(1.00); }
.atom[data-type="Cl"] .electron { transform: scale(1.15); }

/* Dynamic Bonds */
.bond-line { position: absolute; z-index: 3; border-radius: 2px; transform-origin: 0% 50%; cursor: pointer; transition: height 0.2s ease, background 0.2s ease, border 0.2s ease, box-shadow 0.2s ease, padding 0.2s ease; pointer-events: auto; }
.bond-line:hover { filter: drop-shadow(0 0 5px #fff); }

.bond-line.order-1 { height: 4px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 0 10px rgba(255,255,255,0.5); }
.bond-line.order-2 { height: 4px; background: transparent; border-top: 4px solid rgba(255, 255, 255, 0.9); border-bottom: 4px solid rgba(255, 255, 255, 0.9); box-shadow: 0 0 10px rgba(255,255,255,0.3); }
.bond-line.order-3 { height: 4px; background: rgba(255, 255, 255, 0.9); border-top: 4px solid rgba(255, 255, 255, 0.9); border-bottom: 4px solid rgba(255, 255, 255, 0.9); background-clip: content-box; padding: 4px 0; box-shadow: 0 0 10px rgba(255,255,255,0.3); }

/* Storage Rows */
.storage-row { background: #2a2a2a; padding: 10px; border-radius: 6px; margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; border: 1px solid #444; flex-shrink: 0; }
.molecule-formula { font-weight: bold; color: #2ed573; font-size: 1.2rem; }

.challenge-btn { background: #2a2a2a; color: #e0e0e0; border: 1px solid #444; border-radius: 6px; padding: 10px; margin-bottom: 8px; cursor: pointer; text-align: left; width: 100%; transition: background 0.2s; box-sizing: border-box; flex-shrink: 0; }
.challenge-btn:hover { background: #3a3a3a; border-color: #2ed573; }
.challenge-btn strong { color: #2ed573; font-size: 1.1rem; display: block; margin-bottom: 2px; }
.challenge-btn small { color: #aaa; font-size: 0.8rem; }

/* --- STAGE 2 BOSS BUTTONS --- */
.challenge-btn.boss-challenge { border-color: #f39c12; border-width: 2px; }
.challenge-btn.boss-challenge strong { color: #f39c12; }

/* --- ACTIVE TARGET GLOW --- */
.challenge-btn.active-target {
    border-color: #f1c40f;
    background: rgba(241, 196, 15, 0.15);
    box-shadow: 0 0 10px rgba(241, 196, 15, 0.5);
}
.challenge-btn.active-target strong {
    text-shadow: 0 0 5px rgba(241, 196, 15, 0.5);
    color: #f1c40f;
}

/* --- COMPLETED CHALLENGE GLOW --- */
.challenge-btn.completed {
    border-color: #2ed573;
    background: rgba(46, 204, 113, 0.1);
    box-shadow: 0 0 10px rgba(46, 204, 113, 0.5);
}
.challenge-btn.completed strong {
    text-shadow: 0 0 5px rgba(46, 204, 113, 0.5);
}

.atom.stable .ring-outer { border-color: rgba(46, 204, 113, 0.9); box-shadow: 0 0 15px rgba(46, 204, 113, 0.6); transition: all 0.3s ease; }
.atom.error .ring-outer { border-color: rgba(255, 71, 87, 0.9); box-shadow: 0 0 15px rgba(255, 71, 87, 0.6); background-color: rgba(255, 71, 87, 0.2); transition: all 0.1s ease; }
.snap-back { transition: top 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), left 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; }

#trash-can { position: absolute; bottom: 15px; right: 15px; background: rgba(255, 71, 87, 0.1); border: 2px dashed rgba(255, 71, 87, 0.6); color: rgba(255, 71, 87, 0.8); padding: 10px 15px; border-radius: 6px; font-weight: bold; z-index: 1; pointer-events: none; }

/* --- SCORE DISPLAY --- */
#score-display {
    background: linear-gradient(135deg, #1a3324, #0f1c14);
    border: 2px solid #2ed573;
    color: #7bed9f;
    padding: 15px 10px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: bold;
    letter-spacing: 1.5px;
    margin-bottom: 15px;
    text-align: center;
    box-shadow: 0 0 15px rgba(46, 204, 113, 0.4), inset 0 0 10px rgba(0, 0, 0, 0.5);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#score-display strong {
    font-size: 2.8rem;
    color: #ffffff;
    margin-top: 5px;
    margin-left: 0;
    text-shadow: 0 0 15px rgba(46, 204, 113, 0.8);
    line-height: 1;
}

/* --- INSTRUCTIONS FOOTER BAR --- */
#instructions-bar {
    margin-top: 15px;
    background: #1e1e1e;
    border: 1px solid #444;
    border-radius: 6px;
    padding: 10px 20px;
    color: #aaa;
    font-size: 0.95rem;
    width: 100%;
    max-width: 1475px; 
    box-sizing: border-box;
}
#instructions-bar strong { color: #e0e0e0; }

/* --- FUNCTIONAL GROUP SCANNER --- */
#functional-scanner {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 15px;
    width: 100%;
    max-width: 1475px; 
}
.fg-badge {
    background: #1a1a1a;
    color: #444;
    border: 2px solid #333;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.95rem;
    transition: all 0.4s ease;
    box-shadow: inset 0 0 5px #000;
}

/* Neon Activations */
.fg-badge.active-hydrocarbon { color: #fff; border-color: #f1c40f; background: rgba(241, 196, 15, 0.2); box-shadow: 0 0 12px #f1c40f; text-shadow: 0 0 5px #f1c40f; }
.fg-badge.active-alcohol { color: #fff; border-color: #3498db; background: rgba(52, 152, 219, 0.2); box-shadow: 0 0 12px #3498db; text-shadow: 0 0 5px #3498db; }
.fg-badge.active-carboxylic { color: #fff; border-color: #e74c3c; background: rgba(231, 76, 60, 0.2); box-shadow: 0 0 12px #e74c3c; text-shadow: 0 0 5px #e74c3c; }
.fg-badge.active-ester { color: #fff; border-color: #e67e22; background: rgba(230, 126, 34, 0.2); box-shadow: 0 0 12px #e67e22; text-shadow: 0 0 5px #e67e22; }
.fg-badge.active-aldehyde { color: #fff; border-color: #2ecc71; background: rgba(46, 204, 113, 0.2); box-shadow: 0 0 12px #2ecc71; text-shadow: 0 0 5px #2ecc71; }
.fg-badge.active-ketone { color: #fff; border-color: #9b59b6; background: rgba(155, 89, 182, 0.2); box-shadow: 0 0 12px #9b59b6; text-shadow: 0 0 5px #9b59b6; }
.fg-badge.active-amine { color: #fff; border-color: #00cec9; background: rgba(0, 206, 201, 0.2); box-shadow: 0 0 12px #00cec9; text-shadow: 0 0 5px #00cec9; }
.fg-badge.active-amide { color: #fff; border-color: #fd79a8; background: rgba(253, 121, 168, 0.2); box-shadow: 0 0 12px #fd79a8; text-shadow: 0 0 5px #fd79a8; }
.fg-badge.active-ether { color: #fff; border-color: #1abc9c; background: rgba(26, 188, 156, 0.2); box-shadow: 0 0 12px #1abc9c; text-shadow: 0 0 5px #1abc9c; }
.fg-badge.active-haloalkane { color: #fff; border-color: #27ae60; background: rgba(39, 174, 96, 0.2); box-shadow: 0 0 12px #27ae60; text-shadow: 0 0 5px #27ae60; }
.fg-badge.active-thiol { color: #fff; border-color: #f1c40f; background: rgba(241, 196, 15, 0.2); box-shadow: 0 0 12px #f1c40f; text-shadow: 0 0 5px #f1c40f; }

/* --- EXPORT BUTTON --- */
#export-btn {
    background: #9b59b6; 
    color: white;
    border: none;
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    margin-top: auto; 
    width: 100%;
    transition: background 0.2s;
    flex-shrink: 0;
    font-size: 1rem;
}
#export-btn:hover { background: #8e44ad; }

/* --- SAVE & LOAD BUTTONS --- */
.save-load-btn { 
    background: #27ae60; 
    color: white; 
    border: none; 
    padding: 8px 16px; 
    border-radius: 4px; 
    cursor: pointer; 
    font-weight: bold; 
    transition: background 0.2s; 
}
.save-load-btn:hover { background: #2ecc71; }

/* --- UNIVERSAL PANEL SCROLL FIX --- */
#challenge-area, #reservoir-area, #storage-area {
    overflow: hidden; /* Stops the outer boxes from scrolling */
}

#challenge-list, #reservoir-list, #molecule-list {
    overflow-y: auto; /* Tells ONLY the lists to scroll */
    flex-grow: 1;     /* Forces the lists to fill the remaining middle space */
    padding-right: 5px; /* Adds a little breathing room for the scrollbar */
    margin-bottom: 5px; 
}

/* --- MOLECULE INFO MODAL STYLES --- */
.storage-row {
    cursor: pointer; /* Changes the mouse to a pointing finger on hover */
    transition: transform 0.2s, border-color 0.2s;
}
.storage-row:hover {
    transform: scale(1.02);
    border-color: #3498db;
}

.modal-overlay {
    position: absolute;
    top: 50%;
    right: 240px; /* Pushes it just to the left of the Storage panel */
    transform: translateY(-50%); /* Keeps it vertically centered */
    z-index: 1000;
}

.modal-content {
    background: rgba(30, 30, 30, 0.95); /* A tiny bit transparent */
    border: 3px solid #3498db;
    border-radius: 12px;
    padding: 25px;
    width: 400px;
    max-width: 90vw;
    position: relative;
    text-align: left;
    /* Added a much stronger shadow so it pops off the screen naturally */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.9), 0 0 20px rgba(52, 152, 219, 0.4);
    backdrop-filter: blur(5px); /* Adds a modern frosted glass effect to the background */
}

.close-btn {
    position: absolute;
    top: 15px; right: 15px;
    background: transparent;
    border: none;
    color: #ff4757;
    font-size: 1.2rem;
    cursor: pointer;
    font-weight: bold;
}
.close-btn:hover { color: #ff6b81; }

.wiki-link {
    display: inline-block;
    margin-top: 15px;
    color: #3498db;
    text-decoration: none;
    font-weight: bold;
    padding: 8px 12px;
    border: 1px solid #3498db;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
}
.wiki-link:hover {
    background: #3498db;
    color: #121212;
}

.modal-img {
    width: 70px;
    height: 70px;
    object-fit: contain; /* Keeps the aspect ratio perfectly intact */
    background: #fff; /* Gives transparent PNGs a clean white backdrop */
    border: 2px solid #2ed573;
    border-radius: 8px;
    padding: 5px;
    display: none; /* Hidden by default if we don't have an image for it yet */
}