/* @license GPL-2.0-or-later https://www.drupal.org/licensing/faq */
.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;}}
.action-button{width:auto;}.reaction-animation{background:rgba(255,255,255,0.05);border-radius:20px;padding:25px;backdrop-filter:blur(10px);border:1px solid rgba(136,192,208,0.3);}.viewer{background:radial-gradient(circle,rgba(20,20,40,0.8),rgba(10,10,20,0.9));border-radius:15px;border:2px solid rgba(136,192,208,0.3);}.zone-label{font-size:0.9rem;font-weight:bold;color:var(--current-color);text-transform:uppercase;}.arrow{font-size:3rem;color:var(--current-color);animation:pulse-arrow 2s infinite;}.arrow.reacting{animation:pulse-fast 0.5s infinite;color:#ff6b6b;}@keyframes pulse-arrow{0%,100%{opacity:0.5;transform:scale(1);}50%{opacity:1;transform:scale(1.1);}}@keyframes pulse-fast{0%,100%{opacity:0.7;transform:scale(1);}50%{opacity:1;transform:scale(1.2);}}.atom-common{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.75rem;font-weight:bold;color:white;box-shadow:0 0 10px rgba(0,0,0,0.5);}.atom-C{background:radial-gradient(circle,#555,#222);}.atom-H{background:radial-gradient(circle,#fff,#ddd);color:#333;}.atom-O{background:radial-gradient(circle,#ff4444,#cc0000);}.reaction-level1 .viewer{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;padding:40px 20px;min-height:100px;}.reaction-level1 .zone{display:flex;flex-direction:column;align-items:center;gap:15px;}.reaction-level1 .zone-label{margin-bottom:10px;}.reaction-level1 .reactant-shape{width:30px;height:30px;background:#a3be8c;border-radius:50%;box-shadow:0 0 20px rgba(163,190,140,0.6);transition:all 0.8s ease;}.reaction-level1 .product-shape{width:30px;height:30px;background:#ff6b6b;border-radius:50%;box-shadow:0 0 20px rgba(255,107,107,0.6);opacity:0;transform:scale(0);transition:all 0.8s ease;}.reaction-level1 .product-shape.visible{opacity:1;transform:scale(1);}.reaction-level1 .message{text-align:center;color:var(--current-color);font-size:1rem;margin-top:15px;min-height:25px;}.reaction-level1 .controls{display:flex;gap:15px;justify-content:center;margin-top:20px;flex-wrap:wrap;}.reaction-level3 .equation-display{text-align:center;font-size:1.4rem;font-weight:bold;color:var(--current-color);margin-bottom:20px;padding:15px;background:rgba(0,0,0,0.3);border-radius:15px;font-family:'Courier New',monospace;}.reaction-level3 .viewer{position:relative;width:100%;height:500px;overflow:hidden;}.reaction-level3 .zone{position:absolute;top:0;bottom:130px;display:flex;gap:30px;padding:50px 25px 20px;justify-content:center;}.reaction-level3 .zone-left{left:0;width:45%;border-right:2px dashed rgba(136,192,208,0.2);}.reaction-level3 .zone-right{right:0;width:45%;border-left:2px dashed rgba(136,192,208,0.2);}.reaction-level3 .zone-label{position:absolute;top:15px;left:50%;transform:translateX(-50%);}.reaction-level3 .column{flex:1;display:flex;flex-direction:column;gap:12px;align-items:center;max-width:100px;}.reaction-level3 .column-header{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:10px;}.reaction-level3 .column-label{font-size:0.8rem;color:#a0a0a0;font-weight:bold;}.reaction-level3 .column-controls{display:flex;gap:8px;}.reaction-level3 .btn-column{background:linear-gradient(135deg,var(--current-color) -100%,transparent 80%);padding:6px;border-radius:6px;color:white;font-weight:bold;cursor:pointer;transition:all 0.3s ease;border:solid 1px var(--current-color);font-size:1rem;width:32px;height:32px;}.reaction-level3 .btn-column:hover:not(:disabled){transform:scale(1.1);filter:brightness(1.3);}.reaction-level3 .btn-column:disabled{opacity:0.3;cursor:not-allowed;}.reaction-level3 .arrow-zone{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:10%;z-index:10;display:flex;flex-direction:column;align-items:center;gap:8px;}.reaction-level3 .arrow-button{background:rgba(0,0,0,0.4);border:2px solid var(--current-color);border-radius:50%;width:80px;height:80px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s ease;position:relative;}.reaction-level3 .arrow-button:hover:not(:disabled){background:rgba(0,0,0,0.6);transform:scale(1.1);box-shadow:0 0 20px rgba(235,203,139,0.5);}.reaction-level3 .arrow-button:disabled{opacity:0.5;cursor:not-allowed;}.reaction-level3 .arrow{font-size:2.5rem;}.reaction-level3 .arrow-hint{position:absolute;bottom:-22px;font-size:0.65rem;color:rgba(255,255,255,0.25);text-align:center;white-space:nowrap;pointer-events:none;}.reaction-level3 .reset-button{position:absolute;bottom:140px;right:15px;background:rgba(0,0,0,0.4);border:2px solid rgba(136,192,208,0.3);border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s ease;font-size:1.2rem;z-index:10;}.reaction-level3 .reset-button:hover{background:rgba(0,0,0,0.6);border-color:var(--current-color);transform:rotate(180deg);}.reaction-level3 .molecule{transition:all 0.3s ease;flex-shrink:0;}.reaction-level3 .molecule-ch4{width:65px;height:65px;position:relative;}.reaction-level3 .molecule-ch4 .atom-C{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;}.reaction-level3 .molecule-ch4 .atom-H:nth-child(2){position:absolute;left:50%;top:2px;transform:translateX(-50%);}.reaction-level3 .molecule-ch4 .atom-H:nth-child(3){position:absolute;left:8px;bottom:18px;}.reaction-level3 .molecule-ch4 .atom-H:nth-child(4){position:absolute;right:8px;bottom:18px;}.reaction-level3 .molecule-ch4 .atom-H:nth-child(5){position:absolute;left:50%;bottom:0;transform:translateX(-50%);}.reaction-level3 .molecule-simple{display:flex;gap:3px;align-items:center;}.reaction-level3 .bond{width:10px;height:3px;background:var(--current-color);border-radius:2px;}.reaction-level3 .atoms-counter{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,0.5);backdrop-filter:blur(5px);padding:15px 20px;border-top:1px solid rgba(136,192,208,0.2);}.reaction-level3 .atoms-counter-title{text-align:center;color:var(--current-color);font-size:0.8rem;font-weight:bold;margin-bottom:10px;}.reaction-level3 .atoms-grid{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;max-width:700px;margin:0 auto;align-items:center;}.reaction-level3 .atoms-row-label{color:var(--current-color);font-size:0.8rem;font-weight:bold;text-transform:uppercase;min-width:60px;}.reaction-level3 .atoms-row-data{display:flex;gap:25px;}.reaction-level3 .atoms-section{display:flex;align-items:center;gap:12px;}.reaction-level3 .atoms-section-title{color:#a0a0a0;font-size:0.75rem;font-weight:bold;min-width:70px;}.reaction-level3 .atoms-list{display:flex;gap:12px;}.reaction-level3 .atom-count{display:flex;align-items:center;gap:4px;}.reaction-level3 .atom-count-label{font-size:0.75rem;color:#a0a0a0;font-weight:bold;}.reaction-level3 .atom-count-value{font-size:1rem;font-weight:bold;color:#e0e0e0;}.reaction-level3 .status-message{text-align:center;margin-top:15px;font-size:1rem;color:var(--current-color);font-weight:bold;}.reaction-level4 .scenario-selector{background:rgba(0,0,0,0.3);padding:20px;border-radius:15px;margin-bottom:20px;}.reaction-level4 .scenario-title{text-align:center;color:var(--current-color);font-weight:bold;margin-bottom:15px;}.reaction-level4 .scenario-buttons{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}.reaction-level4 .scenario-btn{background:rgba(136,192,208,0.2);border:2px solid rgba(136,192,208,0.4);color:#e0e0e0;padding:10px 20px;border-radius:8px;cursor:pointer;transition:all 0.3s ease;font-size:0.9rem;}.reaction-level4 .scenario-btn:hover{background:rgba(136,192,208,0.3);transform:translateY(-2px);}.reaction-level4 .scenario-btn.active{background:rgba(136,192,208,0.4);border-color:var(--current-color);}.reaction-level4 .equation{text-align:center;font-size:1.2rem;font-family:'Courier New',monospace;color:var(--current-color);margin-bottom:20px;}.reaction-level4 .viewer{padding:30px;min-height:300px;}.reaction-level4 .molecules-display{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:15px;margin-bottom:20px;}.reaction-level4 .molecule-box{text-align:center;}.reaction-level4 .molecule-label{font-size:0.8rem;color:#a0a0a0;margin-bottom:8px;}.reaction-level4 .molecule-icon{width:60px;height:60px;margin:0 auto 8px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:bold;color:white;transition:all 0.3s ease;}.reaction-level4 .molecule-display{width:80px;height:80px;margin:0 auto 8px;position:relative;display:flex;align-items:center;justify-content:center;}.reaction-level4 .molecule-ch4-visual{width:65px;height:65px;position:relative;}.reaction-level4 .molecule-ch4-visual .atom-C{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;}.reaction-level4 .molecule-ch4-visual .atom-H:nth-child(2){position:absolute;left:50%;top:2px;transform:translateX(-50%);}.reaction-level4 .molecule-ch4-visual .atom-H:nth-child(3){position:absolute;left:8px;bottom:18px;}.reaction-level4 .molecule-ch4-visual .atom-H:nth-child(4){position:absolute;right:8px;bottom:18px;}.reaction-level4 .molecule-ch4-visual .atom-H:nth-child(5){position:absolute;left:50%;bottom:0;transform:translateX(-50%);}.reaction-level4 .molecule-simple-visual{display:flex;gap:3px;align-items:center;}.reaction-level4 .bond{width:10px;height:3px;background:var(--current-color);border-radius:2px;}.reaction-level4 .molecule-icon.consumed{opacity:0.3;transform:scale(0.8);}.reaction-level4 .molecule-count{font-size:1.2rem;font-weight:bold;color:#e0e0e0;}.reaction-level4 .reaction-counter{text-align:center;margin:20px 0;padding:15px;background:rgba(136,192,208,0.1);border-radius:10px;}.reaction-level4 .counter-label{color:#a0a0a0;font-size:0.9rem;}.reaction-level4 .counter-value{color:var(--current-color);font-size:1.5rem;font-weight:bold;}.reaction-level4 .limiting-message{text-align:center;padding:15px;background:rgba(255,107,107,0.2);border:2px solid rgba(255,107,107,0.5);border-radius:10px;color:#ff6b6b;font-weight:bold;margin-top:15px;display:none;}.reaction-level4 .limiting-message.visible{display:block;}.reaction-level4 .controls{display:flex;gap:15px;justify-content:center;margin-top:20px;flex-wrap:wrap;}@media (max-width:768px){.reaction-level1 .viewer{grid-template-columns:1fr;gap:30px;padding:30px 15px;}.reaction-level1 .arrow{transform:rotate(90deg);font-size:2.5rem;}.reaction-level3 .viewer{height:450px;}.reaction-level3 .zone{gap:20px;padding:45px 15px 140px;}.reaction-level3 .column{max-width:70px;gap:10px;}.reaction-level3 .btn-column{width:28px;height:28px;font-size:0.9rem;}.reaction-level3 .molecule-ch4{width:55px;height:55px;}.reaction-level3 .atom-common{width:24px;height:24px;font-size:0.65rem;}.reaction-level3 .arrow-button{width:60px;height:60px;}.reaction-level3 .arrow{font-size:2rem;}.reaction-level3 .arrow-hint{font-size:0.6rem;bottom:-20px;}.reaction-level3 .atoms-grid{grid-template-columns:1fr;gap:6px;}.reaction-level3 .atoms-row-label{min-width:auto;}.reaction-level3 .atoms-row-data{flex-direction:column;gap:8px;}.reaction-level4 .molecules-display{grid-template-columns:repeat(2,1fr);}}@media (max-width:480px){.reaction-level3 .equation-display{font-size:1.1rem;padding:12px;}.reaction-level3 .column{max-width:60px;gap:8px;}.reaction-level3 .molecule-ch4{width:50px;height:50px;}.reaction-level3 .atom-common{width:22px;height:22px;font-size:0.6rem;}}