/* @license GPL-2.0-or-later https://www.drupal.org/licensing/faq */
.builder-layout{display:grid;grid-template-columns:1fr 2fr;gap:25px;margin-top:20px;}.atoms-palette{background:rgba(0,0,0,0.3);border-radius:15px;padding:20px;border:1px solid rgba(136,192,208,0.3);}.atoms-palette h3{color:#88c0d0;font-size:1.2rem;margin-bottom:15px;}.atom-list{display:flex;flex-direction:column;gap:15px;}.atom-item{display:flex;align-items:center;gap:10px;padding:10px;background:rgba(255,255,255,0.05);border-radius:10px;cursor:grab;transition:all 0.3s ease;border:2px solid transparent;touch-action:none;}.atom-item:hover{background:rgba(255,255,255,0.1);transform:translateX(5px);}.atom-item:active{cursor:grabbing;}.atom-preview{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:1.2rem;color:white;text-shadow:0 0 5px rgba(0,0,0,0.5);flex-shrink:0;}.atom-info{flex:1;}.atom-name{font-weight:bold;color:#e0e0e0;}.atom-symbol{font-size:0.85rem;color:#a0a0a0;}.atoms-palette-mobile{display:none;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:15px;padding:15px;background:rgba(0,0,0,0.3);border-radius:15px;border:1px solid rgba(136,192,208,0.3);}.atom-item-mobile{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:1.3rem;color:white;text-shadow:0 0 5px rgba(0,0,0,0.5);cursor:pointer;transition:all 0.3s ease;border:2px solid rgba(255,255,255,0.2);touch-action:none;}.atom-item-mobile:active{transform:scale(0.95);}.workspace{background:rgba(0,0,0,0.4);border-radius:15px;padding:20px;border:2px dashed rgba(136,192,208,0.3);min-height:400px;position:relative;}.workspace-title{color:#88c0d0;font-size:1.2rem;margin-bottom:15px;text-align:center;}.drop-zone{position:relative;min-height:300px;background:rgba(255,255,255,0.02);border-radius:10px;display:flex;align-items:center;justify-content:center;touch-action:none;}.drop-hint{color:#666;font-size:1.1rem;text-align:center;pointer-events:none;}#bondsCanvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1;min-height:200px;}.molecule-atom{position:absolute;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:1.1rem;color:white;cursor:move;box-shadow:0 4px 15px rgba(0,0,0,0.4);transition:transform 0.2s ease;user-select:none;z-index:2;touch-action:none;}.molecule-atom:hover{transform:scale(1.1);z-index:10;}.molecule-atom.dragging{opacity:0.7;cursor:grabbing;transform:scale(1.15);}.molecule-atom.saturated{box-shadow:0 0 15px rgba(255,215,0,0.6);}.trash-zone{position:absolute;bottom:10px;right:10px;width:50px;height:50px;background:rgba(220,50,50,0.2);border:2px dashed rgba(220,50,50,0.5);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;transition:all 0.3s ease;z-index:100;cursor:pointer;user-select:none;}.trash-zone:hover{background:rgba(220,50,50,0.4);transform:scale(1.08);border-color:rgba(220,50,50,0.8);}.trash-zone.active{background:rgba(220,50,50,0.6);border-color:#dc3545;transform:scale(1.15);border-style:solid;}.formula-display{margin-top:20px;padding:15px;background:rgba(136,192,208,0.1);border-radius:10px;border:1px solid rgba(136,192,208,0.3);text-align:center;}.formula-label{color:#88c0d0;font-size:0.9rem;margin-bottom:5px;}.formula-input{width:100%;padding:12px;font-size:1.2rem;background:rgba(0,0,0,0.4);border:2px solid rgba(136,192,208,0.4);border-radius:8px;color:#e0e0e0;text-align:center;font-family:'Courier New',monospace;font-weight:bold;margin-top:10px;transition:all 0.3s ease;}.formula-input:focus{outline:none;border-color:#88c0d0;background:rgba(0,0,0,0.6);box-shadow:0 0 15px rgba(136,192,208,0.3);}.formula-input::placeholder{color:#666;font-weight:normal;}.formula-display .action-button{width:100%;margin-top:10px;}.formula-result{font-size:1.3rem;font-weight:bold;color:#e0e0e0;font-family:'Courier New',monospace;margin-top:15px;min-height:30px;padding:8px;border-radius:8px;transition:all 0.3s ease;}.formula-result.correct{background:rgba(163,190,140,0.2);border:2px solid #a3be8c;color:#a3be8c;}.formula-result.incorrect{background:rgba(191,97,106,0.2);border:2px solid #bf616a;color:#bf616a;}.formula-result.revealed{background:rgba(136,192,208,0.2);border:2px solid #88c0d0;color:#88c0d0;}.molecule-name{font-size:1rem;color:#a3be8c;margin-top:8px;font-style:italic;}.predefined-molecules{margin-top:20px;padding:15px;background:rgba(0,0,0,0.3);border-radius:10px;max-height:300px;overflow-y:auto;}.predefined-title{color:#88c0d0;font-size:1rem;margin-bottom:10px;}.molecule-buttons{display:flex;gap:8px;flex-wrap:wrap;}.molecule-btn{background:rgba(136,192,208,0.2);border:1px solid rgba(136,192,208,0.4);color:#e0e0e0;padding:6px 12px;border-radius:8px;cursor:pointer;transition:all 0.3s ease;font-size:0.85rem;}.molecule-btn:hover{background:rgba(136,192,208,0.3);transform:translateY(-2px);}@media (max-width:768px){.builder-layout{grid-template-columns:1fr;gap:15px;}.animation-container{padding:15px;}h2{font-size:1.5rem;}.atoms-palette{display:none;}.atoms-palette-mobile{display:flex;}.workspace{padding:15px;min-height:350px;}.workspace-title{font-size:1rem;margin-bottom:10px;}.drop-zone{min-height:280px;}.drop-hint{font-size:0.95rem;padding:0 20px;}.molecule-atom{width:50px;height:50px;font-size:1rem;}.trash-zone{width:45px;height:45px;font-size:1.3rem;}.formula-input{font-size:1.1rem;padding:10px;}.formula-result{font-size:1.1rem;}.action-button{padding:10px 16px;font-size:0.85rem;}}@media (max-width:480px){.animation-container{padding:10px;margin:15px auto;}h2{font-size:1.3rem;margin-bottom:15px;}.atom-item-mobile{width:55px;height:55px;font-size:1.2rem;}.workspace{padding:10px;min-height:320px;}.drop-zone{min-height:250px;}.molecule-atom{width:45px;height:45px;font-size:0.9rem;}.trash-zone{width:40px;height:40px;font-size:1.2rem;}}.atom-viewer{position:relative;width:100%;height:500px;background:radial-gradient(circle,rgba(20,20,40,0.8),rgba(10,10,20,0.9));border-radius:15px;overflow:hidden;border:2px solid rgba(136,192,208,0.3);}.nucleus{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;background:radial-gradient(circle,#ff6b6b,#ee5a5a);border-radius:50%;box-shadow:0 0 40px rgba(255,107,107,0.8),inset 0 0 20px rgba(255,255,255,0.3);display:flex;align-items:center;justify-content:center;font-weight:bold;color:white;font-size:0.9rem;z-index:10;animation:pulse 2s infinite;}@keyframes pulse{0%,100%{transform:translate(-50%,-50%) scale(1);}50%{transform:translate(-50%,-50%) scale(1.05);}}.electron{position:absolute;width:20px;height:20px;background:radial-gradient(circle,#4dabf7,#228be6);border-radius:50%;box-shadow:0 0 20px rgba(77,171,247,0.8);left:50%;top:50%;transform:translate(-50%,-50%);transform-origin:center center;pointer-events:none;}.info-panel{margin-top:25px;display:flex;gap:15px;justify-content:center;align-items:stretch;flex-wrap:wrap;width:100%;}.info-box{background:rgba(136,192,208,0.1);padding:12px 18px;border-radius:10px;border:1px solid rgba(136,192,208,0.3);text-align:center;flex:1;}.info-label{font-size:0.85rem;color:#a0a0a0;margin-bottom:5px;}.info-value{font-size:1.4rem;font-weight:bold;color:#e0e0e0;}.info-value.positive{color:#ff6b6b;}.info-value.negative{color:#4dabf7;}.info-value.neutral{color:#a3be8c;}.balance-box{background:rgba(163,190,140,0.1);border:2px solid rgba(163,190,140,0.3);padding:12px 18px;border-radius:10px;text-align:center;flex:1.5;min-width:200px;}.balance-title{font-size:1.1rem;font-weight:bold;color:#a3be8c;}@media (max-width:768px){.animation-container{padding:15px;}h2{font-size:1.5rem;}.atom-viewer{height:400px;}.nucleus{width:50px;height:50px;font-size:0.8rem;}.electron{width:16px;height:16px;}.info-panel{flex-direction:column;}.info-box,.balance-box{min-width:100%;}}@media (max-width:480px){.atom-viewer{height:350px;}.info-value{font-size:1.2rem;}.balance-title{font-size:1rem;}}
.launch-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at center,rgba(14,14,26,0.95) 0%,rgba(0,0,0,0.98) 100%);display:flex;justify-content:center;align-items:center;z-index:1000;transition:all 0.5s cubic-bezier(0.4,0,0.2,1);border-radius:1.5rem;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.1);}.launch-overlay.hidden{opacity:0;pointer-events:none;transform:scale(0.95);}.launch-button{font-size:1.2rem;padding:1rem 2rem;border:2px solid var(--current-color,var(--color-accent));background:rgba(255,255,255,0.1);color:var(--color-text);cursor:pointer;border-radius:0.5rem;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);font-weight:bold;font-family:'Arial',sans-serif;backdrop-filter:blur(4px);box-shadow:0 4px 15px rgba(0,0,0,0.3);position:relative;overflow:hidden;}.launch-button::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transition:left 0.6s ease;}.launch-button:hover{background:rgba(255,255,255,0.2);border-color:var(--color-accent);transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,0,0,0.4);}.launch-button:hover::before{left:100%;}.launch-button:active{transform:translateY(0);box-shadow:0 4px 15px rgba(0,0,0,0.3);}.launch-overlay .launch-button{border-color:var(--current-color);color:var(--current-color);}@keyframes pulse{0%,100%{box-shadow:0 4px 15px rgba(0,0,0,0.3);}50%{box-shadow:0 4px 25px var(--current-color,var(--color-accent));}}.launch-button{animation:pulse 2s ease-in-out infinite;}.launch-button:hover{animation:none;}.animation-container:has(.launch-overlay:not(.hidden)) .electron,.animation-container:has(.launch-overlay:not(.hidden)) .nucleus{animation-play-state:paused !important;-webkit-animation-play-state:paused !important;}.animation-container:has(.launch-overlay[style*="display: block"],.launch-overlay[style*="opacity: 1"]) .electron,.animation-container:has(.launch-overlay[style*="display: block"],.launch-overlay[style*="opacity: 1"]) .nucleus{animation-play-state:paused !important;-webkit-animation-play-state:paused !important;}.launch-overlay:not(.hidden) ~ *{pointer-events:none;opacity:0.3;transition:opacity 0.3s ease;}.animation-active *{pointer-events:auto !important;opacity:1 !important;}@media (max-width:768px){.launch-button{font-size:1rem;padding:0.8rem 1.5rem;}}