/* Dark mode styles */
body.dark-mode {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

body.dark-mode .container {
    background: rgba(45, 55, 72, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode header {
    background: linear-gradient(135deg, #4c51bf 0%, #553c9a 50%, #805ad5 100%);
}

body.dark-mode .disclaimer {
    color: #a0aec0;
}

body.dark-mode .element-selection,
body.dark-mode .monster-result {
    color: #e2e8f0;
    background: transparent;
}

body.dark-mode .element-selection h2 {
    color: #e2e8f0;
}

body.dark-mode .element-btn {
    background: linear-gradient(145deg, #2d3748, #4a5568);
    border-color: #4a5568;
    color: #e2e8f0;
}

body.dark-mode .element-btn:hover {
    border-color: #667eea;
    box-shadow: 0 15px 35px rgba(102, 126, 234, 0.25);
}

body.dark-mode .selected-elements {
    background: linear-gradient(145deg, #2d3748, #4a5568);
    border-color: #4a5568;
}

body.dark-mode .selected-elements p {
    color: #cbd5e0;
}

body.dark-mode .monster-info,
body.dark-mode .monster-description,
body.dark-mode .monster-image-container,
body.dark-mode .egg-container,
body.dark-mode .regenerate-container {
    background: linear-gradient(145deg, #2d3748, #4a5568);
    border-color: #4a5568;
}

body.dark-mode .monster-info h2 {
    color: #e2e8f0;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.dark-mode .monster-description h3 {
    color: #e2e8f0;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.dark-mode .monster-description h4 {
    color: #cbd5e0;
}

body.dark-mode .monster-description p,
body.dark-mode .egg-description {
    color: #a0aec0;
}

body.dark-mode .grid-size {
    background: linear-gradient(145deg, #4a5568, #2d3748);
    color: #cbd5e0;
}

body.dark-mode .egg-container h4 {
    color: #cbd5e0;
}

body.dark-mode .sound-info,
body.dark-mode .sound-pattern {
    background: linear-gradient(145deg, #1a202c, #2d3748);
    border-color: #4a5568;
}

body.dark-mode .tab-btn {
    background: linear-gradient(145deg, #2d3748, #4a5568);
    color: #e2e8f0;
    border-color: #667eea;
}

body.dark-mode .custom-inputs {
    background: linear-gradient(145deg, #2d3748, #4a5568);
    border-color: #4a5568;
}

body.dark-mode .custom-inputs h3 {
    color: #e2e8f0;
}

body.dark-mode .input-group label {
    color: #e2e8f0;
}

body.dark-mode .input-group input,
body.dark-mode .input-group textarea {
    background: linear-gradient(145deg, #1a202c, #2d3748);
    border-color: #4a5568;
    color: #e2e8f0;
}

body.dark-mode .input-group input:focus,
body.dark-mode .input-group textarea:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

body.dark-mode .input-group input::placeholder,
body.dark-mode .input-group textarea::placeholder {
    color: #718096;
}

body.dark-mode .search-input {
    background: linear-gradient(145deg, #2d3748, #4a5568);
    border-color: #4a5568;
    color: #e2e8f0;
}

body.dark-mode .search-input:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2), 0 8px 25px rgba(0, 0, 0, 0.25);
}

body.dark-mode .search-input::placeholder {
    color: #718096;
}

body.dark-mode .search-icon {
    color: #718096;
}

body.dark-mode .random-element-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

body.dark-mode .random-element-btn:hover {
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.5);
}

body.dark-mode .clear-elements-btn {
    background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
    box-shadow: 0 6px 20px rgba(229, 62, 62, 0.4);
}

body.dark-mode .clear-elements-btn:hover {
    box-shadow: 0 10px 25px rgba(229, 62, 62, 0.5);
}

body.dark-mode .bottom-actions {
    background: rgba(45, 55, 72, 0.1);
}

body.dark-mode .options-content,
body.dark-mode .saved-monsters-content,
body.dark-mode .view-saved-monster-content {
    background: linear-gradient(145deg, #2d3748, #4a5568);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .options-header,
body.dark-mode .saved-monsters-header,
body.dark-mode .view-saved-monster-header {
    border-bottom-color: #4a5568;
}

body.dark-mode .options-header h3,
body.dark-mode .saved-monsters-header h3 {
    color: #e2e8f0;
}

body.dark-mode .view-saved-monster-header h3 {
    color: #e2e8f0;
}

body.dark-mode .close-btn {
    color: #a0aec0;
}

body.dark-mode .close-btn:hover {
    color: #e2e8f0;
}

body.dark-mode .toggle-label {
    color: #e2e8f0;
}

body.dark-mode .option-description {
    color: #a0aec0;
}

body.dark-mode .saved-monster-card {
    background: linear-gradient(145deg, #4a5568, #2d3748);
    border-color: #4a5568;
}

body.dark-mode .saved-monster-card:hover {
    border-color: #667eea;
}

body.dark-mode .saved-monster-name {
    color: #e2e8f0;
}

body.dark-mode .saved-monster-elements {
    color: #a0aec0;
}

body.dark-mode .no-saved-monsters {
    color: #a0aec0;
}

body.dark-mode .no-saved-monsters p {
    color: #a0aec0;
}

body.dark-mode .view-saved-monster-info,
body.dark-mode .view-saved-monster-description {
    background: linear-gradient(145deg, #4a5568, #2d3748);
    border-color: #4a5568;
}

body.dark-mode .view-saved-monster-description h3,
body.dark-mode .view-saved-monster-description h4 {
    color: #e2e8f0;
}

body.dark-mode .view-saved-monster-description p {
    color: #a0aec0;
}

body.dark-mode .monster-gender {
    background: linear-gradient(145deg, #4a5568, #2d3748);
    color: #cbd5e0;
}

body.dark-mode .islands-content,
body.dark-mode .island-view-content,
body.dark-mode .breeding-content {
    background: linear-gradient(145deg, #2d3748, #4a5568);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .islands-header,
body.dark-mode .island-view-header,
body.dark-mode .breeding-header {
    border-bottom-color: #4a5568;
}

body.dark-mode .islands-header h3,
body.dark-mode .island-view-header h3,
body.dark-mode .breeding-header h3 {
    color: #e2e8f0;
}

body.dark-mode .island-card,
body.dark-mode .island-monster-card {
    background: linear-gradient(145deg, #4a5568, #2d3748);
    border-color: #4a5568;
}

body.dark-mode .island-card:hover,
body.dark-mode .island-monster-card:hover {
    border-color: #4299e1;
}

body.dark-mode .island-name,
body.dark-mode .island-monster-name {
    color: #e2e8f0;
}

body.dark-mode .island-monsters,
body.dark-mode .island-size,
body.dark-mode .island-monster-elements {
    color: #a0aec0;
}

body.dark-mode .no-islands,
body.dark-mode .empty-island-message {
    color: #a0aec0;
    background: linear-gradient(145deg, #2d3748, #1a202c);
    border-color: #4a5568;
}

body.dark-mode .island-info {
    background: linear-gradient(145deg, #4a5568, #2d3748);
    border-color: #4a5568;
}

body.dark-mode .island-stats {
    color: #cbd5e0;
}

body.dark-mode .island-monsters h4 {
    color: #e2e8f0;
}

body.dark-mode .breeding-body p {
    color: #cbd5e0;
}

body.dark-mode .parent-selection label {
    color: #e2e8f0;
}

body.dark-mode .parent-selection select {
    background: linear-gradient(145deg, #1a202c, #2d3748);
    border-color: #4a5568;
    color: #e2e8f0;
}

body.dark-mode .parent-selection select:focus {
    border-color: #667eea;
}

body.dark-mode .sound-controls-section {
    background: linear-gradient(145deg, #1a202c, #2d3748);
    border-color: #4a5568;
}

/* Dark mode element-specific colors */
body.dark-mode .element-btn[data-element="Air"] { background: linear-gradient(145deg, #0d47a1, #01579b); color: #e3f2fd; border-color: #0288d1; }
body.dark-mode .element-btn[data-element="Plant"] { background: linear-gradient(145deg, #1b5e20, #2e7d32); color: #e8f5e8; border-color: #4caf50; }
body.dark-mode .element-btn[data-element="Earth"] { background: linear-gradient(145deg, #3e2723, #5d4037); color: #efebe9; border-color: #8d6e63; }
body.dark-mode .element-btn[data-element="Water"] { background: linear-gradient(145deg, #0d47a1, #1565c0); color: #e3f2fd; border-color: #2196f3; }
body.dark-mode .element-btn[data-element="Cold"] { background: linear-gradient(145deg, #424242, #616161); color: #ffffff; border-color: #9e9e9e; }
body.dark-mode .element-btn[data-element="Fire"] { background: linear-gradient(145deg, #b71c1c, #d32f2f); color: #ffebee; border-color: #f44336; }
body.dark-mode .element-btn[data-element="Psychic"] { background: linear-gradient(145deg, #4a148c, #6a1b9a); color: #f3e5f5; border-color: #9c27b0; }
body.dark-mode .element-btn[data-element="Bone"] { background: linear-gradient(145deg, #212121, #424242); color: #fafafa; border-color: #9e9e9e; }
body.dark-mode .element-btn[data-element="Light"] { background: linear-gradient(145deg, #f57f17, #ff8f00); color: #fffde7; border-color: #ffeb3b; }
body.dark-mode .element-btn[data-element="Faerie"] { background: linear-gradient(145deg, #880e4f, #ad1457); color: #fce4ec; border-color: #e91e63; }
body.dark-mode .element-btn[data-element="Plasma"] { background: linear-gradient(145deg, #4527a0, #512da8); color: #ede7f6; border-color: #673ab7; }
body.dark-mode .element-btn[data-element="Shadow"] { background: linear-gradient(145deg, #000000, #424242); color: #ffffff; border-color: #212121; }
body.dark-mode .element-btn[data-element="Mech"] { background: linear-gradient(145deg, #263238, #37474f); color: #eceff1; border-color: #607d8b; }
body.dark-mode .element-btn[data-element="Crystal"] { background: linear-gradient(145deg, #00695c, #00796b); color: #e0f7fa; border-color: #26a69a; }
body.dark-mode .element-btn[data-element="Poison"] { background: linear-gradient(145deg, #1b5e20, #388e3c); color: #f1f8e9; border-color: #8bc34a; }
body.dark-mode .element-btn[data-element="Control"] { background: linear-gradient(145deg, #e65100, #f57c00); color: #fff3e0; border-color: #ff9800; }
body.dark-mode .element-btn[data-element="Hoax"] { background: linear-gradient(145deg, #827717, #9e9d24); color: #f9fbe7; border-color: #cddc39; }
body.dark-mode .element-btn[data-element="Primordial Plant"] { background: linear-gradient(145deg, #3e2723, #5d4037); color: #efebe9; border-color: #8d6e63; }
body.dark-mode .element-btn[data-element="Primordial Air"] { background: linear-gradient(145deg, #212121, #424242); color: #f5f5f5; border-color: #616161; }
body.dark-mode .element-btn[data-element="Electricity"] { background: linear-gradient(145deg, #0d47a1, #1565c0); color: #e3f2fd; border-color: #2196f3; }
body.dark-mode .element-btn[data-element="Legendary"] { background: linear-gradient(145deg, #f57c00, #ff8f00); color: #fff9c4; border-color: #ffb300; }
body.dark-mode .element-btn[data-element="Gold"] { background: linear-gradient(145deg, #e65100, #f57c00); color: #fff8e1; border-color: #ff8f00; }
body.dark-mode .element-btn[data-element="Spooktacle"] { background: linear-gradient(145deg, #bf360c, #d84315); color: #ffecb3; border-color: #ff5722; }
body.dark-mode .element-btn[data-element="Festival of Yay"] { background: linear-gradient(145deg, #1b5e20, #2e7d32); color: #e8f5e8; border-color: #4caf50; }
body.dark-mode .element-btn[data-element="Season of Love"] { background: linear-gradient(145deg, #880e4f, #ad1457); color: #fce4ec; border-color: #e91e63; }
body.dark-mode .element-btn[data-element="Eggs-Travaganza"] { background: linear-gradient(145deg, #e65100, #f57c00); color: #fff3e0; border-color: #ff9800; }
body.dark-mode .element-btn[data-element="Summersong"] { background: linear-gradient(145deg, #e65100, #f57c00); color: #fff8e1; border-color: #ffc107; }
body.dark-mode .element-btn[data-element="Feast-Ember"] { background: linear-gradient(145deg, #3e2723, #5d4037); color: #d7ccc8; border-color: #6d4c41; }
body.dark-mode .element-btn[data-element="Beat Hereafter"] { background: linear-gradient(145deg, #000000, #424242); color: #ffffff; border-color: #212121; }
body.dark-mode .element-btn[data-element="Echoes of Eco"] { background: linear-gradient(145deg, #1b5e20, #2e7d32); color: #e8f5e8; border-color: #4caf50; }
body.dark-mode .element-btn[data-element="Anniversary Month"] { background: linear-gradient(145deg, #880e4f, #ad1457); color: #fce4ec; border-color: #e91e63; }
body.dark-mode .element-btn[data-element="Crescendo Moon"] { background: linear-gradient(145deg, #d84315, #f4511e); color: #ffebee; border-color: #ff5722; }
body.dark-mode .element-btn[data-element="SkyPainting"] { background: linear-gradient(145deg, #01579b, #0277bd); color: #e1f5fe; border-color: #03a9f4; }
body.dark-mode .element-btn[data-element="Life-Formula"] { background: linear-gradient(145deg, #004d40, #00695c); color: #e0f2f1; border-color: #009688; }
body.dark-mode .element-btn[data-element="Cloverspell"] { background: linear-gradient(145deg, #1b5e20, #2e7d32); color: #e8f5e8; border-color: #4caf50; }
body.dark-mode .element-btn[data-element="MindBoggle"] { background: linear-gradient(145deg, #283593, #303f9f); color: #e8eaf6; border-color: #3f51b5; }
body.dark-mode .element-btn[data-element="Perplexplore"] { background: linear-gradient(145deg, #3e2723, #5d4037); color: #efebe9; border-color: #8d6e63; }
body.dark-mode .element-btn[data-element="Dream"] { background: linear-gradient(145deg, #4a148c, #6a1b9a); color: #f3e5f5; border-color: #9c27b0; }
body.dark-mode .element-btn[data-element="Mythical"] { background: linear-gradient(145deg, #283593, #303f9f); color: #e8eaf6; border-color: #3f51b5; }
body.dark-mode .element-btn[data-element="Celestial"] { background: linear-gradient(145deg, #f57c00, #ff8f00); color: #fff8e1; border-color: #ffb300; }
body.dark-mode .element-btn[data-element="Dipster"] { background: linear-gradient(145deg, #3e2723, #5d4037); color: #efebe9; border-color: #8d6e63; }
body.dark-mode .element-btn[data-element="Titansoul"] { background: linear-gradient(145deg, #4a148c, #6a1b9a); color: #f3e5f5; border-color: #9c27b0; }
body.dark-mode .element-btn[data-element="Candy"] { background: linear-gradient(145deg, #880e4f, #ad1457); color: #fce4ec; border-color: #e91e63; }
body.dark-mode .element-btn[data-element="Organ"] { background: linear-gradient(145deg, #b71c1c, #d32f2f); color: #ffebee; border-color: #f44336; }
body.dark-mode .element-btn[data-element="Knottshurr"] { background: linear-gradient(145deg, #3e2723, #5d4037); color: #efebe9; border-color: #8d6e63; }
body.dark-mode .element-btn[data-element="Undead"] { background: linear-gradient(145deg, #000000, #424242); color: #ffffff; border-color: #212121; }
body.dark-mode .element-btn[data-element="Nightmare"] { background: linear-gradient(145deg, #000000, #424242); color: #ffffff; border-color: #212121; }
body.dark-mode .element-btn[data-element="Gamma Water"] { background: linear-gradient(145deg, #1b5e20, #2e7d32); color: #e8f5e8; border-color: #76ff03; }
body.dark-mode .element-btn[data-element="Art"] { background: linear-gradient(145deg, #e65100, #f57c00); color: #fff3e0; border-color: #ff9800; }
body.dark-mode .element-btn[data-element="Explosive"] { background: linear-gradient(145deg, #b71c1c, #d32f2f); color: #ffebee; border-color: #f44336; }
body.dark-mode .element-btn[data-element="Aesthetic"] { background: linear-gradient(145deg, #4a148c, #6a1b9a); color: #f3e5f5; border-color: #9c27b0; }
body.dark-mode .element-btn[data-element="Aether"] { background: linear-gradient(145deg, #4527a0, #512da8); color: #ede7f6; border-color: #673ab7; }
body.dark-mode .element-btn[data-element="Dark"] { background: linear-gradient(145deg, #000000, #424242); color: #ffffff; border-color: #212121; }
body.dark-mode .element-btn[data-element="Runic"] { background: linear-gradient(145deg, #004d40, #00695c); color: #e0f2f1; border-color: #00695c; }
body.dark-mode .element-btn[data-element="Thief"] { background: linear-gradient(145deg, #3e2723, #5d4037); color: #efebe9; border-color: #8d6e63; }
body.dark-mode .element-btn[data-element="Mushroom"] { background: linear-gradient(145deg, #e65100, #f57c00); color: #fff3e0; border-color: #ff9800; }
body.dark-mode .element-btn[data-element="Plague"] { background: linear-gradient(145deg, #1b5e20, #388e3c); color: #f1f8e9; border-color: #8bc34a; }
body.dark-mode .element-btn[data-element="Card"] { background: linear-gradient(145deg, #880e4f, #ad1457); color: #fce4ec; border-color: #e91e63; }
body.dark-mode .element-btn[data-element="Emotion"] { background: linear-gradient(145deg, #283593, #303f9f); color: #e8eaf6; border-color: #3f51b5; }
body.dark-mode .element-btn[data-element="Gaming"] { background: linear-gradient(145deg, #263238, #37474f); color: #eceff1; border-color: #607d8b; }
body.dark-mode .element-btn[data-element="Magic"] { background: linear-gradient(145deg, #4a148c, #6a1b9a); color: #f3e5f5; border-color: #9c27b0; }
body.dark-mode .element-btn[data-element="Paper"] { background: linear-gradient(145deg, #ffffff, #ffffff); color: #424242; border-color: #9e9e9e; }
body.dark-mode .element-btn[data-element="Time"] { background: linear-gradient(145deg, #e65100, #f57c00); color: #fff8e1; border-color: #ff8f00; }
body.dark-mode .element-btn[data-element="Alchemy"] { background: linear-gradient(145deg, #1b5e20, #2e7d32); color: #e8f5e8; border-color: #4caf50; }
body.dark-mode .element-btn[data-element="Beast"] { background: linear-gradient(145deg, #3e2723, #5d4037); color: #efebe9; border-color: #8d6e63; }
body.dark-mode .element-btn[data-element="Fruit"] { background: linear-gradient(145deg, #b71c1c, #d32f2f); color: #ffebee; border-color: #f44336; }
body.dark-mode .element-btn[data-element="Honey"] { background: linear-gradient(145deg, #e65100, #f57c00); color: #fff8e1; border-color: #ffc107; }
body.dark-mode .element-btn[data-element="Ink"] { background: linear-gradient(145deg, #000000, #424242); color: #ffffff; border-color: #212121; }
body.dark-mode .element-btn[data-element="Void"] { background: linear-gradient(145deg, #000000, #1a1a1a); color: #ffffff; border-color: #424242; }
body.dark-mode .element-btn[data-element="Luminous"] { background: linear-gradient(145deg, #00695c, #00796b); color: #e0f7fa; border-color: #26a69a; }
body.dark-mode .element-btn[data-element="Sand"] { background: linear-gradient(145deg, #e65100, #f57c00); color: #fff8e1; border-color: #ffc107; }
body.dark-mode .element-btn[data-element="Stellar"] { background: linear-gradient(145deg, #4527a0, #512da8); color: #ede7f6; border-color: #673ab7; }
body.dark-mode .element-btn[data-element="Zodiac"] { background: linear-gradient(145deg, #4a148c, #6a1b9a); color: #f3e5f5; border-color: #9c27b0; }
body.dark-mode .element-btn[data-element="Coke"] { background: linear-gradient(145deg, #b71c1c, #d32f2f); color: #ffebee; border-color: #f44336; }
body.dark-mode .element-btn[data-element="Rubber"] { background: linear-gradient(145deg, #e65100, #f57c00); color: #fff8e1; border-color: #ffc107; }
body.dark-mode .element-btn[data-element="Hypno"] { background: linear-gradient(145deg, #880e4f, #ad1457); color: #fce4ec; border-color: #e91e63; }
body.dark-mode .element-btn[data-element="Chaos"] { background: linear-gradient(145deg, #4a148c, #6a1b9a); color: #f3e5f5; border-color: #9c27b0; }
body.dark-mode .element-btn[data-element="Vampire"] { background: linear-gradient(145deg, #b71c1c, #d32f2f); color: #ffebee; border-color: #f44336; }
body.dark-mode .element-btn[data-element="Error"] { background: linear-gradient(145deg, #000000, #424242); color: #ffffff; border-color: #212121; }
body.dark-mode .element-btn[data-element="Block"] { background: linear-gradient(145deg, #616161, #757575); color: #fafafa; border-color: #e0e0e0; }
body.dark-mode .element-btn[data-element="Demon"] { background: linear-gradient(145deg, #b71c1c, #d32f2f); color: #ffebee; border-color: #f44336; }
body.dark-mode .element-btn[data-element="Depths"] { background: linear-gradient(145deg, #1a1a3f, #2d2d5f); color: #ffffff; border-color: #4c4f9d; }
body.dark-mode .element-btn[data-element="Signal"] { background: linear-gradient(145deg, #1b5e20, #2e7d32); color: #e8f5e8; border-color: #76ff03; }
body.dark-mode .element-btn[data-element="Warp"] { background: linear-gradient(145deg, #4a148c, #6a1b9a); color: #f3e5f5; border-color: #9c27b0; }
body.dark-mode .element-btn[data-element="Knight"] { background: linear-gradient(145deg, #263238, #37474f); color: #eceff1; border-color: #607d8b; }
body.dark-mode .element-btn[data-element="Salesman"] { background: linear-gradient(145deg, #1b5e20, #2e7d32); color: #e8f5e8; border-color: #4caf50; }
body.dark-mode .element-btn[data-element="Gameshow Host"] { background: linear-gradient(145deg, #4a148c, #6a1b9a); color: #f3e5f5; border-color: #9c27b0; }
body.dark-mode .element-btn[data-element="Roaring Knight"] { background: linear-gradient(145deg, #000000, #424242); color: #ffffff; border-color: #212121; }
body.dark-mode .element-btn[data-element="Star"] { background: linear-gradient(145deg, #e65100, #ff8f00); color: #fff9c4; border-color: #ffb300; }
body.dark-mode .element-btn[data-element="Eclipse"] { background: linear-gradient(145deg, #bf360c, #d84315); color: #ffecb3; border-color: #ff5722; }
body.dark-mode .element-btn[data-element="Coral"] { background: linear-gradient(145deg, #e65100, #ffce3d); color: #fff8e1; border-color: #ffce3d; }
body.dark-mode .element-btn[data-element="Overgrown"] { background: linear-gradient(145deg, #1b5e20, #2e7d32); color: #e8f5e8; border-color: #4caf50; }
body.dark-mode .element-btn[data-element="Vehicle"] { background: linear-gradient(145deg, #b71c1c, #d32f2f); color: #ffebee; border-color: #f44336; }
body.dark-mode .element-btn[data-element="Balloon"] { background: linear-gradient(145deg, #b71c1c, #d32f2f); color: #ffebee; border-color: #f44336; }
body.dark-mode .element-btn[data-element="Chocolate"] { background: linear-gradient(145deg, #3e2723, #5d4037); color: #efebe9; border-color: #8d6e63; }
body.dark-mode .element-btn[data-element="Dairy"] { background: linear-gradient(145deg, #f5f5f5, #ffffff); color: #424242; border-color: #e0e0e0; }
body.dark-mode .element-btn[data-element="Draconic"] { background: linear-gradient(145deg, #00695c, #00796b); color: #e0f7fa; border-color: #26a69a; }
body.dark-mode .element-btn[data-element="FNaF"] { background: linear-gradient(145deg, #3e2723, #5d4037); color: #efebe9; border-color: #8d6e63; }
body.dark-mode .element-btn[data-element="Sus"] { background: linear-gradient(145deg, #b71c1c, #d32f2f); color: #ffebee; border-color: #f44336; }
body.dark-mode .element-btn[data-element="Raw Beef"] { background: linear-gradient(145deg, #ffb6c1, #ff91a4); color: #8b0000; border-color: #ff91a4; }
body.dark-mode .element-btn[data-element="Rot"] { background: linear-gradient(145deg, #3e2723, #5d4037); color: #efebe9; border-color: #8d6e63; }
body.dark-mode .element-btn[data-element="Radio"] { background: linear-gradient(145deg, #3e2723, #5d4037); color: #efebe9; border-color: #8d6e63; }
body.dark-mode .element-btn[data-element="Rude"] { background: linear-gradient(145deg, #880e4f, #ad1457); color: #fce4ec; border-color: #e91e63; }
body.dark-mode .element-btn[data-element="Ice Cream"] { background: linear-gradient(145deg, #ff71ab, #ff91c1); color: #8b0040; border-color: #ff71ab; }
body.dark-mode .element-btn[data-element="Magnet"] { background: linear-gradient(145deg, #b71c1c, #d32f2f); color: #ffebee; border-color: #f44336; }
body.dark-mode .element-btn[data-element="Lantern"] { background: linear-gradient(145deg, #cc6600, #e67300); color: #fffaf0; border-color: #ffb366; }
body.dark-mode .element-btn[data-element="Shatter"] { background: linear-gradient(145deg, #1e3a8a, #2563eb); color: #f0f8ff; border-color: #60a5fa; }
body.dark-mode .element-btn[data-element="Spiral"] { background: linear-gradient(145deg, #be185d, #db2777); color: #fdf2f8; border-color: #ec4899; }
body.dark-mode .element-btn[data-element="Tale"] { background: linear-gradient(145deg, #7f1d1d, #991b1b); color: #fef2f2; border-color: #ef4444; }
body.dark-mode .element-btn[data-element="Thread"] { background: linear-gradient(145deg, #581c87, #6b21a8); color: #f3e8ff; border-color: #a855f7; }
body.dark-mode .element-btn[data-element="Wendy's"] { background: linear-gradient(145deg, #b71c1c, #d32f2f); color: #ffebee; border-color: #f44336; }
body.dark-mode .element-btn[data-element="Mirror"] { background: linear-gradient(145deg, #4a148c, #6a1b9a); color: #f3e5f5; border-color: #9c27b0; }
body.dark-mode .element-btn[data-element="Chalk"] { background: linear-gradient(145deg, #f5f5f5, #ffffff); color: #424242; border-color: #e0e0e0; }
body.dark-mode .element-btn[data-element="Fog"] { background: linear-gradient(145deg, #212121, #424242); color: #ffffff; border-color: #616161; }
body.dark-mode .element-btn[data-element="Marble"] { background: linear-gradient(145deg, #e0e0e0, #f5f5f5); color: #424242; border-color: #bdbdbd; }