/* @license GPL-2.0-or-later https://www.drupal.org/licensing/faq */
.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%);min-width:70px;min-height:70px;padding:10px;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;flex-direction:column;align-items:center;justify-content:center;font-weight:bold;color:white;z-index:10;}.element-symbol{font-size:1.3rem;margin-bottom:2px;}.proton-count{font-size:0.85rem;opacity:0.9;}.electron{position:absolute;width:22px;height:22px;background:radial-gradient(circle,#4dabf7,#228be6);border-radius:50%;box-shadow:0 0 20px rgba(77,171,247,0.8);transform:translate(-50%,-50%);pointer-events:none;display:flex;align-items:center;justify-content:center;color:white;font-size:0.7rem;font-weight:bold;}.controls-panel{margin-top:25px;background:rgba(0,0,0,0.3);padding:20px;border-radius:15px;border:1px solid rgba(136,192,208,0.3);}.control-row{display:flex;gap:20px;margin-bottom:20px;align-items:center;flex-wrap:wrap;justify-content:center;}.control-group{flex:1;min-width:200px;display:flex;flex-direction:column;align-items:center;}.control-label{color:#88c0d0;font-weight:bold;margin-bottom:10px;display:block;font-size:0.95rem;text-align:center;}.button-group{display:flex;align-items:center;gap:12px;justify-content:center;}.btn{background:linear-gradient(135deg,#88c0d0 -100%,transparent 80%);padding:8px 16px;border-radius:8px;color:white;font-weight:bold;cursor:pointer;transition:all 0.3s ease;border:solid 1px #88c0d0;font-size:1.1rem;min-width:40px;}.btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 15px rgba(0,0,0,0.4);filter:brightness(1.5);}.btn:disabled{opacity:0.3;cursor:not-allowed;}.count-display{font-size:1.2rem;font-weight:bold;min-width:35px;text-align:center;}.count-display.proton-color{color:#ff6b6b;}.count-display.electron-color{color:#4dabf7;}.info-panel{margin-top:20px;display:flex;gap:15px;justify-content:center;align-items:stretch;flex-wrap:wrap;}.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;min-width:150px;}.info-label{font-size:0.85rem;color:#a0a0a0;margin-bottom:5px;}.info-value{font-size:1.4rem;font-weight:bold;color:#e0e0e0;}.info-value.neutral{color:#a3be8c;}.info-value.positive{color:#ff6b6b;}.info-value.negative{color:#4dabf7;}.symbol-display{background:rgba(136,192,208,0.15);padding:20px;border-radius:10px;border:2px solid rgba(136,192,208,0.4);text-align:center;margin-top:20px;}.symbol-label{font-size:0.9rem;color:#a0a0a0;margin-bottom:10px;}.symbol-formula{font-size:2.5rem;font-weight:bold;color:#88c0d0;font-family:'Courier New',monospace;}.symbol-name{font-size:1rem;color:#c0c0c0;margin-top:8px;font-style:italic;}@media (max-width:768px){.animation-container{padding:15px;}h2{font-size:1.5rem;}.atom-viewer{height:400px;}.nucleus{min-width:60px;min-height:60px;}.element-symbol{font-size:1.1rem;}.electron{width:18px;height:18px;}.control-row{flex-direction:column;gap:15px;}.control-group{width:100%;}.info-panel{flex-direction:column;}.symbol-formula{font-size:2rem;}}@media (max-width:480px){.atom-viewer{height:350px;}.symbol-formula{font-size:1.7rem;}}
.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;}}