.start-screen{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:1rem 0}.start-hero{text-align:center}.start-bottles-svg{width:320px;height:130px}.bottle{animation:bottleBob 2s ease-in-out infinite}.bottle-1{animation-delay:0s}.bottle-2{animation-delay:.3s}.bottle-3{animation-delay:.6s}@keyframes bottleBob{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.start-subtitle{color:#d4956a;font-size:1.05rem;max-width:400px;margin:.5rem auto 0;line-height:1.5}.chapter-cards{display:flex;flex-direction:column;gap:.8rem;width:100%;max-width:480px}.chapter-card{display:flex;align-items:center;gap:1rem;padding:1rem 1.2rem;background:var(--card-bg);border:2px solid rgba(194,122,58,.2);border-radius:12px;cursor:pointer;transition:all .2s;text-align:left;color:var(--card-text);position:relative}.chapter-card:hover:not(:disabled){border-color:#c27a3a;box-shadow:0 4px 16px #c27a3a33;transform:translateY(-2px)}.chapter-locked{opacity:.5;cursor:not-allowed}.chapter-locked:hover{transform:none!important;box-shadow:none!important;border-color:#c27a3a33!important}.chapter-letter{font-size:1.5rem;font-weight:700;color:#c27a3a;min-width:2rem;text-align:center}.chapter-info{display:flex;flex-direction:column;gap:.15rem;flex:1}.chapter-title{font-weight:600;font-size:1rem;color:var(--card-text)}.chapter-subtitle{font-size:.75rem;color:#c27a3a;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.chapter-desc{font-size:.85rem;color:var(--card-text-secondary);line-height:1.4}.chapter-badge{position:absolute;top:.5rem;right:.8rem;font-size:.7rem;color:#a0aec0;background:#edf2f7;padding:.15rem .5rem;border-radius:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.game-start-btn{display:flex;align-items:center;gap:1rem;padding:1rem 1.2rem;background:#6a9cd414;border:2px solid rgba(106,140,194,.25);border-radius:12px;cursor:pointer;transition:all .2s;color:var(--card-text);font-size:1rem;font-family:var(--font-family);text-align:left;width:100%;max-width:480px}.game-start-btn:hover{border-color:#6a8cc2;box-shadow:0 4px 16px #6a8cc233;transform:translateY(-2px)}.game-start-icon{font-size:1.5rem;min-width:2rem;text-align:center}.game-start-text{font-weight:600;font-size:1rem}.difficulty-section{width:100%;max-width:520px;display:flex;flex-direction:column;align-items:center;gap:1rem}.start-back-link{align-self:flex-start;background:var(--card-bg);border:2px solid rgba(194,122,58,.3);border-radius:10px;color:#c27a3a;cursor:pointer;font-size:.95rem;font-weight:600;font-family:var(--font-family);padding:.5rem 1rem;transition:all .2s}.start-back-link:hover{border-color:#c27a3a;box-shadow:0 2px 8px #c27a3a26;transform:translateY(-1px)}.difficulty-heading{color:var(--text-primary);font-size:1.1rem;font-weight:500}.difficulty-cards{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;width:100%}.difficulty-card{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:1.2rem 1rem;background:var(--card-bg);border:2px solid rgba(194,122,58,.15);border-radius:12px;cursor:pointer;transition:all .2s;flex:1;min-width:140px;max-width:170px;color:var(--card-text)}.difficulty-card:hover{border-color:#c27a3a;box-shadow:0 4px 12px #c27a3a26;transform:translateY(-2px)}.difficulty-emoji{font-size:2rem}.difficulty-name{font-weight:600;color:var(--card-text);font-size:1rem}.difficulty-desc{font-size:.8rem;color:var(--card-text-secondary);text-align:center}.difficulty-points{font-size:.8rem;color:#c27a3a;font-weight:600;margin-top:.2rem}.start-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100;padding:1rem;animation:fadeIn .2s ease-out}.start-info-card{background:#fff;border-radius:16px;padding:1.5rem;max-width:380px;width:100%;box-shadow:0 8px 32px #0000004d;animation:slideUp .25s ease-out;color:var(--card-text)}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.start-info-header{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}.start-info-header h3{font-size:1.2rem;color:var(--card-text);margin:0}.start-info-emoji{font-size:2.5rem}.start-info-leo{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}.start-info-list{list-style:none;padding:0;margin:0 0 1.2rem;display:flex;flex-direction:column;gap:.5rem}.start-info-list li{font-size:.9rem;color:var(--card-text-secondary);line-height:1.4;padding-left:1.4rem;position:relative}.start-info-list li:before{content:"🔸";position:absolute;left:0;font-size:.7rem}.start-info-text{font-size:.95rem;color:var(--card-text-secondary);line-height:1.5;margin-bottom:.8rem}.start-info-hint{font-size:.85rem;color:#c27a3a;background:#fdf2e9;padding:.6rem .8rem;border-radius:8px;line-height:1.4;margin-bottom:1.2rem}.start-info-btn{width:100%;padding:.7rem;font-size:1.05rem}@media (max-width: 500px){.chapter-card{padding:.8rem 1rem}.chapter-letter{font-size:1.3rem;min-width:1.8rem}.difficulty-cards{flex-direction:column;align-items:center}.difficulty-card{max-width:280px;width:100%;flex-direction:row;gap:.8rem;padding:1rem}.difficulty-emoji{font-size:1.5rem}.difficulty-desc{text-align:left}}.substance-bottle{display:flex;flex-direction:column;align-items:center;gap:.3rem;background:var(--card-bg);border:2px solid var(--border-color);border-radius:10px;padding:.5rem;cursor:pointer;transition:all .2s}.substance-bottle:hover:not(.disabled){border-color:var(--primary-light);box-shadow:0 2px 8px #0000001a;transform:translateY(-2px)}.substance-bottle.disabled{cursor:not-allowed;opacity:.6}.substance-bottle.completed{border-color:var(--success-color);background:#f0fff4}.bottle-svg{width:50px;height:75px}.bottle-name{font-size:.8rem;color:var(--text-secondary);font-weight:500}.redox-scale{display:flex;flex-direction:column;align-items:center;gap:.4rem;width:100%;max-width:220px}.scale-header{font-size:.85rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.scale-track{position:relative;display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:.5rem 0;width:100%}.scale-line{position:absolute;top:1.8rem;bottom:1.8rem;left:50%;width:3px;background:linear-gradient(to bottom,#ef4444,#f59e0b,#22c55e);border-radius:2px;transform:translate(-50%);z-index:0;opacity:.3}.scale-arrow{font-size:.7rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em;z-index:1}.scale-arrow-top{color:#ef4444}.scale-arrow-bottom{color:#22c55e}.scale-item{display:flex;align-items:center;gap:.5rem;z-index:1;padding:.15rem .5rem;border-radius:20px;background:var(--card-bg);transition:transform .3s ease,box-shadow .3s ease}.scale-item--new{animation:scaleItemPop .5s ease-out;box-shadow:0 0 0 2px var(--accent-color),0 2px 8px #7c3aed33}@keyframes scaleItemPop{0%{transform:scale(.8);opacity:0}60%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}.scale-circle{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;flex-shrink:0;border:2px solid rgba(0,0,0,.15)}.scale-name{font-size:.85rem;color:#1e293b;font-weight:500;white-space:nowrap}.scale-type-badge{font-size:.6rem;background:#e0e7ff;color:#4338ca;padding:.1rem .3rem;border-radius:4px;font-weight:600}.substance-selector{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:1rem 0}.selector-info{text-align:center}.selector-info h2{font-size:1.2rem;color:var(--text-primary);margin-bottom:.3rem}.selector-hint{color:var(--text-secondary);font-size:.95rem}.selector-progress{color:var(--success-color);font-size:.85rem;font-weight:600;margin-top:.3rem}.element-groups{display:flex;gap:3rem;align-items:flex-start;flex-wrap:wrap;justify-content:center}.element-group{display:flex;flex-direction:column;align-items:center;gap:.8rem}.group-label{font-size:.9rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;font-weight:600}.bottle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}.selection-plus{font-size:2rem;color:var(--accent-color);font-weight:700;align-self:center;margin-top:1.5rem}.selector-block-msg{color:var(--accent-color);font-size:.95rem;font-weight:500;text-align:center;background:#fffbeb;border:1px solid #fbbf24;border-radius:8px;padding:.5rem 1rem;animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.bottle-wrap{display:flex;flex-direction:column;align-items:center;gap:.1rem}.bottle-progress{font-size:.7rem;color:var(--text-secondary);font-weight:500}.selector-cta{color:var(--primary-light);font-size:1rem;font-weight:500;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.selector-redox-section{display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:1rem;background:var(--card-bg);border:1px solid var(--border-color);border-radius:12px;width:100%;max-width:280px}.selector-game-btn{font-size:.85rem}@media (max-width: 500px){.element-groups{flex-direction:column;align-items:center;gap:1.5rem}.selection-plus{margin-top:0}.bottle-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width: 360px){.bottle-grid{grid-template-columns:repeat(2,1fr)}}.schema-phase{display:flex;flex-direction:column;align-items:center;gap:1.2rem;padding:1rem 0}.schema-title{font-size:1.1rem;color:var(--text-primary)}.word-equation{display:flex;align-items:center;gap:.6rem;font-size:1.3rem;padding:1rem 1.5rem;background:var(--card-bg);border:2px solid var(--border-color);border-radius:12px;flex-wrap:wrap;justify-content:center}.word-educt{font-weight:600;color:var(--primary-color)}.word-plus{color:var(--text-secondary);font-size:1.1rem}.word-arrow{color:var(--accent-color);font-size:1.5rem}.word-product{font-weight:700;color:var(--accent-color);font-size:1.5rem;animation:pulse 1.5s ease-in-out infinite}.schema-question{color:var(--text-secondary);font-size:1rem}.schema-form{display:flex;gap:.5rem;width:100%;max-width:400px}.schema-input{flex:1;padding:.7rem 1rem;border:2px solid var(--border-color);border-radius:8px;font-size:1.1rem;font-family:var(--font-family);outline:none;transition:border-color .2s}.schema-input:focus{border-color:var(--primary-light)}.schema-submit{white-space:nowrap}.schema-form--redox{flex-direction:column;align-items:stretch;gap:.8rem}.schema-form--redox .schema-submit{align-self:center}.schema-field{display:flex;flex-direction:column;gap:.3rem}.schema-label{font-size:.85rem;font-weight:600;color:var(--text-secondary)}.schema-reveal{font-size:.95rem;color:var(--primary-color);background:#ebf8ff;padding:.5rem 1rem;border-radius:8px}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.pw-wrap{width:100%;max-width:640px;margin:0 auto}.pw-svg{width:100%;height:auto;border:2px solid var(--border-color);border-radius:12px;background:var(--card-bg);touch-action:none;-webkit-user-select:none;user-select:none}.pw-svg.pw-readonly{border-color:var(--border-color);opacity:.92;touch-action:auto}.particle-feedback{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:8px;font-size:.9rem}.particle-feedback.success{background:#f0fff4;color:#276749;border:1px solid #c6f6d5}.particle-feedback.warning{background:#fffbeb;color:#92400e;border:1px solid #fef3c7}.particle-feedback.hint{background:#ebf8ff;color:#2b6cb0;border:1px solid #bee3f8}.feedback-emoji{font-size:1.3rem;flex-shrink:0}.particle-phase{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:.5rem 0}.particle-title{font-size:1.1rem;color:var(--text-primary)}.particle-instruction{color:var(--text-secondary);font-size:.9rem;text-align:center}.particle-check-btn{margin-top:.5rem;padding:.7rem 2rem;font-size:1.05rem}.particle-hint-text{color:var(--text-secondary);font-size:.85rem;text-align:center;font-style:italic}.naming-info-box{display:flex;align-items:flex-start;gap:.6rem;background:#eff6ff;border:1px solid #93c5fd;border-radius:10px;padding:.8rem 1rem;max-width:480px;animation:fadeInUp .4s ease-out}.naming-info-icon{font-size:1.3rem;flex-shrink:0}.naming-info-text{font-size:.9rem;color:#1e3a5f;line-height:1.5}@keyframes fadeInUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.equation-display{display:flex;align-items:baseline;flex-wrap:wrap;gap:0;padding:.8rem 1rem;background:#fff;border:2px solid #4299e1;border-radius:10px;min-height:52px;font-family:Times New Roman,serif;font-size:1.5rem;cursor:text;box-shadow:0 0 0 3px #4299e133;width:100%;max-width:500px;color:var(--card-text)}.equation-display.empty{align-items:center}.equation-placeholder{color:var(--text-secondary);font-family:var(--font-family);font-size:1rem;font-style:italic}.eq-token{transition:all .15s}.eq-token-clickable{cursor:pointer;border-radius:3px;padding:0 1px}.eq-token-clickable:hover{background:#4299e11a}.eq-gap{width:6px;min-height:1.8em;cursor:text;display:inline-flex;align-items:center;justify-content:center;position:relative;border-radius:2px;transition:background .15s}.eq-gap:hover{background:#4299e11f;width:10px}.eq-gap--active{width:2px}.eq-gap--hidden{width:0;min-height:0;padding:0}.eq-coeff{font-size:1.3rem;color:#dd6b20;font-weight:700;margin-right:.15rem}.eq-element{color:var(--card-text);font-weight:500}.eq-subscript{font-size:.85rem;color:#2c5282;font-weight:600}.eq-plus{color:var(--card-text-secondary);margin:0 .2rem;font-family:var(--font-family)}.eq-arrow{color:#dd6b20;margin:0 .3rem;font-size:1.3rem}.eq-cursor{color:var(--primary-color);animation:blink 1s step-end infinite;font-weight:200;font-size:1.3rem;margin:0 -1px}@keyframes blink{50%{opacity:0}}.equation-keyboard{display:flex;flex-direction:column;gap:.4rem;padding:.6rem;background:#ffffffd9;border-radius:10px;width:100%;max-width:500px;color:var(--card-text)}.key-input-row{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}.key-group{display:flex;flex-direction:column;align-items:center;gap:.15rem}.key-group-label{font-size:.6rem;text-transform:uppercase;color:var(--card-text-secondary);letter-spacing:.04em}.key-row{display:flex;gap:.25rem}.key-action-row{display:flex;gap:.3rem;border-top:1px solid var(--border-color);padding-top:.4rem}.key-btn{padding:.4rem .6rem;border:1px solid rgba(0,0,0,.12);border-radius:6px;background:#fff;cursor:pointer;font-size:1rem;font-family:Times New Roman,serif;transition:all .15s;display:flex;align-items:center;justify-content:center;min-width:38px;min-height:38px;color:var(--card-text)}.key-btn:hover{background:#e2e8f0;border-color:var(--primary-light)}.key-btn:active{transform:scale(.95)}.key-element{font-weight:600;color:var(--card-text);font-size:1.1rem;min-width:42px}.key-coeff{color:#dd6b20;font-weight:700}.key-subscript{font-size:.95rem}.key-subscript sub{color:#2c5282;font-weight:600;font-size:.85rem}.key-operator{font-size:1.1rem;color:var(--card-text-secondary);font-family:var(--font-family)}.key-arrow{color:#dd6b20}.key-delete{font-family:var(--font-family);font-size:.9rem;color:var(--card-text-secondary)}.key-clear{font-family:var(--font-family);font-size:.8rem;color:#e53e3e}.key-check{font-family:var(--font-family);font-size:.9rem;background:#2c5282;color:#fff;border-color:#2c5282;flex:1}.key-check:hover{background:#4299e1}@media (max-width: 400px){.key-btn{min-width:34px;min-height:34px;padding:.3rem .45rem;font-size:.9rem}}.compact-particle-eq{display:flex;justify-content:center;width:100%}.compact-particle-svg{height:36px;width:auto}.equation-phase{display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:.3rem 0}.equation-reference{width:100%;max-width:500px;background:#ffffffe0;border:1px solid rgba(0,0,0,.1);border-radius:10px;padding:.5rem .8rem;display:flex;flex-direction:column;align-items:center;gap:.4rem}.equation-word-line{text-align:center}.equation-word-eq{font-size:.95rem;color:#2c5282;font-weight:600}.equation-title{font-size:1rem;color:var(--text-primary);margin:0}.equation-solution{background:#ffffffe6;border:1px solid rgba(72,187,120,.4);border-radius:8px;padding:.5rem 1rem;text-align:center}.equation-solution p:first-child{font-size:.85rem;color:var(--card-text-secondary)}.equation-answer{font-size:1.3rem;font-family:Times New Roman,serif;color:#2c5282;font-weight:600;margin-top:.2rem}.equation-hint-molecular{font-size:.85rem;color:var(--card-text-secondary);background:#ffffffd9;padding:.4rem .8rem;border-radius:6px;text-align:center}.charged-equation{display:flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:wrap;font-size:1.6rem;font-family:Times New Roman,serif;padding:1.2rem 1.2rem .8rem;background:#ffffffe6;border:2px solid var(--border-color);border-radius:12px;width:100%;max-width:620px}.charged-eq-term{display:inline-flex;align-items:baseline;gap:.05rem}.charged-eq-coeff{font-weight:700;font-size:1.05em;color:#4a5568;margin-right:.25rem;position:relative;z-index:2}.charged-eq-element{display:inline-flex;align-items:baseline;position:relative;margin-top:.7em}.charged-eq-symbol{font-weight:600;color:#2c5282}.charged-eq-symbol--clickable{cursor:pointer;padding:.15rem .35rem;border-radius:6px;transition:background .15s;border:1px dashed rgba(44,82,130,.3)}.charged-eq-symbol--clickable:hover{background:#2c52821a}.charged-eq-symbol--clickable:active{background:#2c528233}.charged-eq-sub{font-size:.7em;vertical-align:sub;color:#4a5568}.charged-eq-charge{font-size:.7em;font-weight:700;min-width:.8em;text-align:center;position:absolute;top:-.85em;left:50%;transform:translate(-50%);white-space:nowrap;z-index:1;background:#ffffffe6;padding:0 .1em;border-radius:2px}.charged-eq-charge--correct{color:#38a169}.charged-eq-charge--wrong{color:#e53e3e}.charged-eq-charge--pending{color:#a0aec0}.charged-eq-charge--neutral{color:#718096}.charged-eq-plus{color:#718096;font-size:1.3rem;margin:0 .2rem}.charged-eq-arrow{color:#c27a3a;font-size:1.5rem;margin:0 .35rem}.charged-eq-arrows-container{width:100%;max-width:620px;margin-top:.5rem}.electron-arrow-label{font-size:.75rem;font-weight:600}.electron-arrow-label--oxidation{fill:#e53e3e}.electron-arrow-label--reduction{fill:#3182ce}.charges-phase{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:.5rem 0}.charges-title{font-size:1.1rem;color:var(--text-primary);text-align:center}.charges-instruction{font-size:.95rem;color:var(--text-secondary);text-align:center;max-width:440px}.charge-picker-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000004d;display:flex;align-items:center;justify-content:center;z-index:100}.charge-picker{background:var(--card-bg);border-radius:12px;padding:1.2rem;box-shadow:0 8px 30px #0003;display:flex;flex-direction:column;align-items:center;gap:.8rem;min-width:240px}.charge-picker h3{margin:0;font-size:1.1rem;color:var(--text-primary)}.charge-picker-buttons{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center}.charge-picker-btn{padding:.6rem 1rem;border:2px solid var(--border-color);border-radius:8px;background:#fff;font-size:1.1rem;font-weight:600;font-family:Times New Roman,serif;cursor:pointer;transition:all .15s;min-width:44px;min-height:44px}.charge-picker-btn:hover{border-color:var(--primary-color);background:#ebf8ff}.charge-picker-btn--selected{border-color:var(--primary-color);background:var(--primary-color);color:#fff}.charges-help-box{background:#ebf8ff;border:1px solid rgba(44,82,130,.2);border-radius:10px;padding:.6rem 1rem;font-size:.9rem;color:#2c5282;max-width:440px;width:100%;text-align:center}.charges-help-toggle{background:none;border:1px solid rgba(44,82,130,.3);border-radius:8px;padding:.4rem .8rem;font-size:.85rem;color:#2c5282;cursor:pointer;font-family:var(--font-family);transition:all .15s}.charges-help-toggle:hover{background:#ebf8ff}.charges-submit{margin-top:.3rem}.electron-phase{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:.5rem 0}.electron-title{font-size:1.1rem;color:var(--text-primary);text-align:center}.electron-question{font-size:1rem;color:var(--text-secondary);text-align:center;max-width:440px}.electron-question strong{color:var(--text-primary)}.electron-element-buttons{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}.electron-element-btn{padding:.7rem 1.2rem;border:2px solid var(--border-color);border-radius:10px;background:#fff;font-size:1.1rem;font-weight:600;font-family:var(--font-family);cursor:pointer;transition:all .15s;min-width:44px;min-height:44px}.electron-element-btn:hover{border-color:var(--primary-color);background:#ebf8ff}.electron-element-btn--selected{border-color:var(--primary-color);background:var(--primary-color);color:#fff}.electron-number-buttons{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center}.electron-number-btn{width:48px;height:48px;border:2px solid var(--border-color);border-radius:10px;background:#fff;font-size:1.2rem;font-weight:600;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;font-family:var(--font-family)}.electron-number-btn:hover{border-color:var(--primary-color);background:#ebf8ff}.electron-number-btn--selected{border-color:var(--primary-color);background:var(--primary-color);color:#fff}.electron-step-indicator{display:flex;gap:.3rem;align-items:center}.electron-step-dot{width:10px;height:10px;border-radius:50%;background:var(--border-color)}.electron-step-dot--done{background:#38a169}.electron-step-dot--active{background:var(--primary-color);box-shadow:0 0 0 3px #2c528233}.electron-summary{width:100%;max-width:500px;display:flex;flex-direction:column;gap:.4rem}.electron-summary-section{border-radius:10px;padding:.5rem .8rem}.electron-summary--oxidation{background:#e53e3e0f;border:1px solid rgba(229,62,62,.2)}.electron-summary--reduction{background:#3182ce0f;border:1px solid rgba(49,130,206,.2)}.electron-summary-header{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.2rem}.electron-summary--oxidation .electron-summary-header{color:#c53030}.electron-summary--reduction .electron-summary-header{color:#2b6cb0}.electron-summary-line{display:flex;align-items:center;gap:.4rem;font-size:.92rem;color:var(--text-primary);padding:.1rem 0}.electron-summary-total{font-size:.95rem}.electron-check{color:#38a169;font-weight:700;flex-shrink:0}.electron-balance{text-align:center;font-size:.95rem;font-weight:700;color:#38a169;background:#48bb781a;border:1px solid rgba(72,187,120,.3);border-radius:8px;padding:.5rem .8rem}.electron-submit{margin-top:.3rem}.completion-screen{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1.5rem 0}.completion-emoji{font-size:3rem;animation:bounce .5s ease-out}.completion-title{font-size:1.5rem;color:var(--success-color)}.completion-card{background:var(--card-bg);border:2px solid var(--success-color);border-radius:12px;padding:1.2rem;width:100%;max-width:400px;display:flex;flex-direction:column;gap:.8rem}.completion-equation{text-align:center;padding:.5rem;background:#f0fff4;border-radius:8px}.completion-formula{font-family:Times New Roman,serif;font-size:1.4rem;color:var(--primary-color);font-weight:600}.completion-phases{display:flex;flex-direction:column;gap:.3rem}.completion-phase-item{display:flex;align-items:center;gap:.4rem;font-size:.9rem;color:var(--text-secondary)}.phase-check{color:var(--success-color);font-weight:700}.completion-points{display:flex;align-items:baseline;gap:.5rem;justify-content:center;padding-top:.5rem;border-top:1px solid var(--border-color)}.points-label{font-size:.9rem;color:var(--text-secondary)}.points-value{font-size:2rem;font-weight:700;color:var(--accent-color)}.points-bonus{font-size:.8rem;color:var(--text-secondary)}.completion-actions{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}.completion-next{font-size:1.05rem;padding:.7rem 1.5rem}.completion-hint-note{font-size:.8rem;color:var(--accent-color);text-align:center;font-style:italic}.completion-redox-section{display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:.8rem;background:var(--card-bg);border:1px solid var(--border-color);border-radius:12px;width:100%;max-width:400px}.completion-game-btn{font-size:.85rem}.completion-progress{font-size:.85rem;color:var(--text-secondary)}.anno-game{display:flex;flex-direction:column;align-items:center;gap:.8rem;padding:1rem 0;width:100%;max-width:400px;margin:0 auto}.anno-close{align-self:flex-start;background:none;border:none;color:var(--text-secondary);font-size:.9rem;cursor:pointer;padding:.3rem .5rem}.anno-close:hover{color:var(--primary-color)}.anno-title{font-size:1.3rem;color:var(--primary-color);text-align:center}.anno-intro{font-size:.9rem;color:var(--text-secondary);text-align:center;line-height:1.4}.anno-mode-buttons{display:flex;flex-direction:column;gap:.5rem;width:100%;max-width:280px}.anno-hint{font-size:.8rem;color:var(--text-secondary);text-align:center;font-style:italic}.anno-progress{font-size:.8rem;color:var(--text-secondary);text-align:center}.anno-current-card{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.8rem 1.2rem;background:var(--card-bg);border:2px solid var(--accent-color);border-radius:12px;box-shadow:0 2px 12px #7c3aed26;animation:cardAppear .3s ease-out}@keyframes cardAppear{0%{transform:scale(.8) translateY(-10px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}.anno-card-label{font-size:.75rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.03em}.anno-card-circle{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:700;border:3px solid var(--accent-color)}.anno-card-name{font-size:.95rem;font-weight:600;color:var(--text-primary)}.anno-scale{display:flex;flex-direction:column;align-items:center;width:100%;gap:0}.anno-scale-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:.2rem 0}.anno-scale-label--top{color:#ef4444}.anno-scale-label--bottom{color:#22c55e}.anno-drop-zone{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;border:2px dashed var(--border-color);border-radius:8px;background:#7c3aed0a;cursor:pointer;transition:all .15s ease;margin:.15rem 0}.anno-drop-zone:not(:disabled):hover,.anno-drop-zone:not(:disabled):active{border-color:var(--accent-color);background:#7c3aed1a;transform:scale(1.02)}.anno-drop-zone:disabled{cursor:default;opacity:.5}.anno-drop-zone--wrong{border-color:#ef4444!important;background:#ef44441f!important;animation:shakeZone .4s ease}.anno-drop-zone--correct{border-color:#22c55e!important;background:#22c55e1f!important}@keyframes shakeZone{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.anno-drop-label{font-size:.7rem;color:var(--text-secondary);text-align:center;padding:0 .5rem}.anno-placed{display:flex;align-items:center;gap:.5rem;padding:.25rem .8rem;justify-content:center}.anno-placed--correct{animation:placedCorrect .5s ease-out}.anno-placed--wrong{animation:placedWrong .5s ease-out}@keyframes placedCorrect{0%{transform:scale(.5);opacity:0}50%{transform:scale(1.15)}to{transform:scale(1);opacity:1}}@keyframes placedWrong{0%{transform:scale(.5);opacity:0}30%{transform:scale(1.1)}60%{background:#ef444426;border-radius:20px}to{transform:scale(1);opacity:1}}.anno-placed-circle{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;border:2px solid rgba(0,0,0,.15);flex-shrink:0}.anno-placed--correct .anno-placed-circle{border-color:#22c55e;box-shadow:0 0 0 3px #22c55e4d}.anno-placed--wrong .anno-placed-circle{border-color:#ef4444;box-shadow:0 0 0 3px #ef44444d}.anno-placed-name{font-size:.85rem;color:var(--text-primary);font-weight:500}.anno-result-emoji{font-size:3rem;animation:bounce .5s ease-out}@keyframes bounce{0%{transform:scale(0)}60%{transform:scale(1.2)}to{transform:scale(1)}}.anno-score-text{font-size:1.1rem;color:var(--text-primary);font-weight:600}.anno-final-scale{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.8rem;background:var(--card-bg);border:2px solid var(--success-color);border-radius:12px;width:100%;max-width:220px}.anno-end-buttons{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}.progress-bar{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.5rem}.progress-reaction-name{font-size:.85rem;color:var(--text-secondary);text-align:center;text-shadow:0 1px 3px rgba(0,0,0,.2)}.progress-steps{display:flex;align-items:center;justify-content:center;gap:.3rem}.progress-step{display:flex;align-items:center;gap:.3rem}.progress-step:not(:last-child):after{content:"—";color:var(--border-color);margin:0 .2rem}.progress-step.done:after{color:var(--success-color)}.step-dot{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:600;flex-shrink:0}.progress-step.done .step-dot{background:var(--success-color);color:#fff}.progress-step.active .step-dot{background:var(--primary-color);color:#fff;box-shadow:0 0 0 3px #4299e14d}.progress-step.pending .step-dot{background:var(--border-color);color:var(--text-secondary)}.step-label{font-size:.75rem;color:var(--text-secondary)}.progress-step.active .step-label{color:var(--primary-color);font-weight:600}.progress-step.done .step-label{color:var(--success-color)}.step-dot--clickable{cursor:pointer;transition:transform .15s,box-shadow .15s}.step-dot--clickable:hover{transform:scale(1.15);box-shadow:0 0 0 3px #48bb784d}@media (max-width: 500px){.step-label{display:none}.progress-steps{gap:.5rem}}.feedback-overlay{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;align-items:flex-start;justify-content:center;padding-top:15vh;z-index:100;animation:fadeIn .2s}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.feedback-overlay.feedback-success{background:#48bb781a;pointer-events:none}.feedback-overlay.feedback-error{background:#00000026}.feedback-overlay.feedback-hint{background:#0000001a}.feedback-content{background:var(--card-bg);border-radius:12px;padding:1.2rem 1.5rem;display:flex;align-items:center;gap:.8rem;box-shadow:0 8px 24px #00000026;max-width:420px;pointer-events:all;animation:slideDown .3s ease-out}@keyframes slideDown{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}.feedback-icon{font-size:1.5rem;flex-shrink:0;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center}.feedback-success .feedback-icon{background:#c6f6d5;color:#276749}.feedback-error .feedback-icon{background:#fed7d7;color:#9b2c2c}.feedback-hint .feedback-icon{background:#fefcbf}.feedback-message{font-size:.95rem;color:var(--card-text);line-height:1.4;flex:1}.feedback-close{background:var(--bg-color);border:1px solid var(--border-color);border-radius:6px;padding:.3rem .7rem;cursor:pointer;font-size:.85rem;color:var(--card-text-secondary);flex-shrink:0}.feedback-close:hover{background:var(--border-color)}.rg-app{max-width:800px;margin:0 auto;padding:1rem;flex:1;display:flex;flex-direction:column;position:relative}.rg-header{display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:1rem}.rg-title{font-size:1.7rem;color:#d4956a}.rg-back-btn{position:absolute;right:calc(100% + .5rem);z-index:1;background:var(--card-bg);border:2px solid rgba(194,122,58,.3);border-radius:10px;padding:.5rem 1rem;font-size:.95rem;font-weight:600;color:#c27a3a;cursor:pointer;transition:all .2s;font-family:var(--font-family);white-space:nowrap}.rg-back-btn:hover{border-color:#c27a3a;box-shadow:0 2px 8px #c27a3a26;transform:translateY(-1px)}.rg-main{flex:1;display:flex;flex-direction:column}.rg-mascot{position:fixed;top:45%;left:6%;transform:translateY(-70%);z-index:10;pointer-events:none}.rg-mascot-img{width:180px;height:180px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.12));opacity:.9}.rg-mascot-img.spinning{animation:leoSpin 2s ease-in-out}@keyframes leoSpin{0%{transform:rotateY(0)}to{transform:rotateY(720deg)}}@media (max-width: 700px){.rg-mascot{position:static;transform:none;text-align:center;margin-bottom:.5rem}.rg-mascot-img{width:80px;height:80px}.rg-back-btn{position:static;margin-right:auto}.rg-header{gap:.5rem}}@media (max-width: 600px){.rg-app{padding:.5rem}.rg-title{font-size:1.2rem}}.app-container{min-height:100vh;display:flex;flex-direction:column}.app-footer{text-align:center;padding:.5rem;color:var(--text-secondary);margin-top:auto}.footer-links{display:flex;justify-content:center;gap:1rem;margin-top:.25rem}.footer-links a{color:var(--text-secondary);text-decoration:none;font-size:.75rem}.footer-links a:hover{text-decoration:underline}:root{--primary-color: #c27a3a;--primary-light: #a8622a;--accent-color: #d4956a;--success-color: #68d391;--error-color: #fc8181;--warning-color: #fefcbf;--bg-color: rgba(245, 237, 228, .15);--card-bg: rgba(255, 255, 255, .92);--text-primary: #f5ebe0;--text-secondary: #c9b9a8;--border-color: rgba(212, 149, 106, .3);--card-text: #2d3748;--card-text-secondary: #718096;--font-family: "Segoe UI", system-ui, -apple-system, sans-serif;--color-cu: #c97d36;--color-fe: #a0aec0;--color-zn: #68abd4;--color-mg: #c6f6d5;--color-s: #fefcbf;--color-o: #fed7d7;--phase-active: var(--primary-color);--phase-done: var(--success-color);--phase-pending: var(--border-color)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-family);background:linear-gradient(135deg,#3b2314,#5c3a1e,#2d1b0e);min-height:100vh;color:var(--text-primary);line-height:1.6}.chem-formula{font-family:Times New Roman,serif;font-size:1.1em}.chem-formula sub{font-size:.75em}.btn{padding:.6rem 1.2rem;border:none;border-radius:8px;font-size:1rem;cursor:pointer;transition:all .2s;font-family:var(--font-family)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--primary-color);color:#fff}.btn-primary:hover:not(:disabled){background:var(--primary-light)}.btn-secondary{background:var(--card-bg);color:var(--primary-color);border:1px solid var(--border-color)}.btn-secondary:hover:not(:disabled){background:var(--bg-color)}.btn-success{background:var(--success-color);color:#fff}.btn-success:hover:not(:disabled){background:#38a169}.btn-accent{background:var(--accent-color);color:#fff}.btn-accent:hover:not(:disabled){background:#b87333}@media (pointer: coarse){.btn,button{min-height:44px;min-width:44px;padding:.8rem 1.5rem}input[type=text],input[type=number]{min-height:44px;font-size:1.1rem}}