/*!
 * Periodic Table Explorer v1.0
 * Copyright (c) 2025 Science4Fun.info
 * Licensed exclusively for use on Science4Fun.info
 * Unauthorized copying, distribution, or use is prohibited
 * Contact: abdulwahabmalik@ymail.com for licensing inquiries
 */
:root{--card:#ffffff;--accent:#0b6e99;--muted:#6b7280;--gap:6px;--cell-size:45px}.controls{display:flex;gap:8px;align-items:center;justify-content:center;padding:12px;flex-wrap:wrap;background:linear-gradient(135deg,#f9fafb,#eef2f3);border-radius:14px;box-shadow:0 4px 15px rgba(0,0,0,0.1);width:90%;max-width:700px;margin:10px auto}.controls input,.controls select{padding:8px;border-radius:8px;border:1px solid #cbd5e1;min-width:100px;transition:all 0.25s ease;box-shadow:0 2px 5px rgba(0,0,0,0.05)}#search{flex:1;min-width:100px;padding:10px 14px;font-size:15px;background-color:#ffffff}#search::placeholder{color:#94a3b8;font-style:italic}#search:focus{outline:none;border-color:var(--accent);box-shadow:0 0 6px rgba(11,110,153,0.4);transform:scale(1.02)}#categoryFilter{padding:10px 14px;font-size:15px;color:var(--accent);cursor:pointer;background-color:#ffffff}#categoryFilter:hover{border-color:var(--accent);background-color:#f0f9ff}#categoryFilter:focus{outline:none;border-color:var(--accent);box-shadow:0 0 6px rgba(11,110,153,0.4)}.controls button{background:linear-gradient(135deg,var(--accent) 0%,#059669 100%);color:white;border:none;padding:10px 16px;border-radius:10px;cursor:pointer;font-weight:600;font-size:14px;transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275);position:relative;overflow:hidden;box-shadow:0 4px 15px rgba(11,110,153,0.3);border:1px solid rgba(255,255,255,0.1);min-width:80px}.controls 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}.controls button:hover{background:linear-gradient(135deg,#059669 0%,var(--accent) 100%);transform:translateY(-3px) scale(1.05);box-shadow:0 8px 25px rgba(11,110,153,0.4)}.controls button:hover::before{left:100%}.controls button:active{transform:translateY(-1px) scale(1.02);box-shadow:0 4px 12px rgba(11,110,153,0.5);transition:all 0.1s ease}.table-wrap{position:relative;display:flex;justify-content:flex-start;align-items:flex-start;padding:40px 40px 12px;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;scroll-padding-left:0;scroll-snap-type:x mandatory;min-height:calc(var(--cell-size) * 13.33)}.periodic-grid{display:grid;grid-template-columns:repeat(18,var(--cell-size));grid-template-rows:repeat(10,var(--cell-size));gap:var(--gap);min-width:calc(18 * var(--cell-size)+17 * var(--gap));height:auto;margin:0 auto}.column-labels{position:absolute;top:0;left:0;width:100%;pointer-events:none}.column-label{position:absolute;transform:translate(-50%,-120%);background:linear-gradient(135deg,#0077cc,#29a3d9);color:#ffffff;font-size:11px;font-weight:700;border-radius:6px;padding:3px 6px;text-align:center;min-width:18px;opacity:0.95;box-shadow:0 2px 5px rgba(0,0,0,0.25);z-index:-100;user-select:none}.row-labels{position:absolute;top:0;left:0;width:100%;pointer-events:none}.row-label{position:absolute;transform:translate(-110%,-50%);background:linear-gradient(135deg,#e06600,#e69939);color:#ffffff;font-size:11px;font-weight:700;border-radius:6px;padding:3px 6px;text-align:center;min-width:18px;opacity:0.95;box-shadow:0 2px 5px rgba(0,0,0,0.25);z-index:-100;user-select:none}.element{background:var(--card);border-radius:8px;border:2px solid rgba(7,54,66,0.05);box-shadow:0 4px 10px rgba(2,6,23,0.04);padding:1px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;text-align:center;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease;overflow:visible;box-sizing:border-box;position:relative}.element *{max-width:100%;overflow-wrap:break-word}.element:focus{outline:3px solid #bfeafd}.element:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 8px 16px rgba(0,0,0,0.12)}.symbol{font-size:calc(var(--cell-size) * 0.35);font-weight:900;line-height:1}.number{font-size:calc(var(--cell-size) * 0.18);color:var(--muted);align-self:flex-start;width:100%;text-align:left;padding-left:4px}.name{font-size:calc(var(--cell-size) * 0.20);color:var(--accent);margin-top:2px;max-width:95%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.mass{font-size:11px;color:var(--muted)}.short-desc{font-size:11px;color:#0b513f;margin-top:6px}.element-mini-icon{font-size:calc(var(--cell-size) * 0.25);position:absolute;bottom:2px;right:2px;opacity:0.7}.legend{padding:12px;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.legend .item{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:8px;background:rgba(255,255,255,0.6);border:1px solid #e6eef6}.color-box{width:18px;height:18px;border-radius:4px;border:1px solid rgba(0,0,0,0.08)}.tooltip{position:absolute;bottom:110%;left:50%;transform:translateX(-50%) scale(0.8);background:linear-gradient(135deg,#f3fbff 25%,#e8f7fd 100%);color:#073642;padding:8px 10px;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.15);font-size:12px;line-height:1.3;width:max-content;max-width:160px;text-align:center;opacity:0;visibility:hidden;transition:all 0.25s ease;pointer-events:none;z-index:10}.tooltip::after{content:"";position:absolute;top:100%;left:50%;margin-left:-6px;border-width:6px;border-style:solid;border-color:#e8f7fd transparent transparent transparent}.element:hover .tooltip{opacity:1;visibility:visible;transform:translateX(-50%) scale(1)}@media (hover:none) and (pointer:coarse){.element:hover .tooltip{display:none !important;opacity:0 !important;visibility:hidden !important}}.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(2,6,23,0.35);z-index:1000;padding:20px}.modal[aria-hidden="false"]{display:flex}.modal-content{background:white;padding:18px;border-radius:10px;max-width:560px;width:92%;position:relative;margin:20px;box-shadow:0 20px 40px rgba(0,0,0,0.3);max-height:calc(100vh - 40px);overflow-y:auto}.close{position:absolute;right:12px;top:12px;border:none;background:#f1f5f9;font-size:20px;cursor:pointer;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:1001;transition:all 0.3s ease;color:#da0000;font-weight:bold;box-shadow:0 2px 8px rgba(0,0,0,0.1)}.close:hover{background:#e2e8f0;transform:scale(1.1);color:#475569;box-shadow:0 4px 12px rgba(0,0,0,0.15)}.close:active{transform:scale(0.95)}.close:focus{outline:3px solid var(--accent);outline-offset:2px}.modal[aria-hidden="false"] .modal-content:not(.achievements-modal){animation:popIn 0.25s ease}@keyframes popIn{from{transform:scale(0.9);opacity:0}to{transform:scale(1);opacity:1}}.achievements-modal{max-width:800px;max-height:90vh;animation:slideDown 0.3s ease}@keyframes slideDown{from{transform:translateY(-50px);opacity:0}to{transform:translateY(0);opacity:1}}.element-header{display:flex;gap:20px;align-items:anchor-center;margin-bottom:20px;padding:16px;background:linear-gradient(135deg,#f8fafc 0%,#e8f7fd 100%);border-radius:12px;border:2px solid #e2e8f0}.element-visual{flex-shrink:0;text-align:center;position:relative}.element-icon{flex-shrink:0;position:relative;font-size:80px;text-align:center;width:120px;height:120px;display:flex;align-items:center;justify-content:center;background:white;border-radius:50%;border:3px solid var(--accent);box-shadow:0 8px 20px rgba(11,110,153,0.2)}.element-basic-info{flex:1}.element-title{margin:0 0 12px 0;color:var(--accent);font-size:28px}.element-basic-info p{margin:6px 0;font-size:16px}.element-description{display:flex;gap:20px;align-items:anchor-center;padding:16px;background:#f8fafc;border-radius:8px;border-left:4px solid var(--accent);margin:16px 0}.visual-controls{display:flex;gap:8px;justify-content:center;margin:20px 0;padding:12px;background:#f1f5f9;border-radius:8px}.visual-btn{padding:8px 16px;border:2px solid #cbd5e1;background:white;border-radius:6px;cursor:pointer;font-size:14px;transition:all 0.3s ease}.visual-btn.active{background:var(--accent);color:white;border-color:var(--accent)}.visual-btn:hover:not(.active){border-color:var(--accent);background:#f0f9ff}.atomic-model{min-height:200px}.atomic-model-visual{position:relative;width:200px;height:200px;margin:0 auto}.nucleus{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;background:linear-gradient(135deg,#dc2626,#ef4444);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(220,38,38,0.4);z-index:10}.nucleus-core{width:20px;height:20px;background:#991b1b;border-radius:50%}.nucleus-info{position:absolute;top:-25px;left:50%;transform:translateX(-50%);font-size:10px;color:#dc2626;font-weight:bold;white-space:nowrap}.electron-shell{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:2px dashed var(--accent);border-radius:50%;opacity:0.7;animation-name:rotateShell;animation-timing-function:linear;animation-iteration-count:infinite}.electron-holder{position:absolute;top:50%;left:50%;transform-origin:0 0;width:0;height:0}@keyframes rotateShell{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}.shell-1{width:40px;height:40px}.shell-2{width:65px;height:65px}.shell-3{width:90px;height:90px}.shell-4{width:115px;height:115px}.shell-5{width:140px;height:140px}.shell-6{width:165px;height:165px}.shell-7{width:190px;height:190px}.electron{position:absolute;top:50%;left:50%;width:8px;height:8px;background:var(--accent);border-radius:50%}.shell-label{font-size:12px;color:var(--accent);text-align:center;white-space:nowrap;pointer-events:none}@keyframes counterRotate{from{transform:rotate(0deg) translate(25px) rotate(0deg)}to{transform:rotate(360deg) translate(25px) rotate(-360deg)}}.quiz-banner{padding:12px;text-align:center;background:#fff9e6;border-radius:8px;margin:10px auto;max-width:720px;width:90%;box-shadow:0 4px 10px rgba(0,0,0,0.1);transition:all 0.3s ease;border:1px solid rgba(255,204,0,0.3)}.quiz-header{text-align:center;margin-bottom:16px;border-bottom:2px solid #e8f7fd;padding-bottom:12px}.quiz-progress{background:#e8f7fd;padding:8px 12px;border-radius:20px;font-size:14px;font-weight:600;color:var(--accent);margin:8px 0}.quiz-question{font-size:18px;text-align:center;margin:20px 0;padding:16px;background:#f8fafc;border-radius:8px;border-left:4px solid var(--accent);animation:bounceIn 0.6s ease-out}.quiz-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}.quiz-option{padding:12px 16px;background:white;border:2px solid #e2e8f0;border-radius:8px;cursor:pointer;font-size:16px;transition:all 0.2s ease;min-height:50px;display:flex;align-items:center;justify-content:center;text-align:center}.quiz-option:hover:not(:disabled){background:#f1f5f9;border-color:var(--accent);transform:translateY(-2px)}.quiz-option:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(11,110,153,0.1)}.quiz-option:disabled{cursor:not-allowed;opacity:0.8}.quiz-option.correct{background:#a7f3d0 !important;border-color:#059669 !important;transform:scale(1.02);box-shadow:0 4px 12px rgba(5,150,105,0.3)}.quiz-option.wrong{background:#fecaca !important;border-color:#dc2626 !important;animation:shake 0.5s ease-in-out}.feedback{padding:12px;border-radius:8px;text-align:center;animation:fadeIn 0.5s ease-in}.correct-feedback{background:#ecfdf5;border:2px solid #a7f3d0}.wrong-feedback{background:#fef2f2;border:2px solid #fecaca}@keyframes bounceIn{0%{transform:scale(0.8);opacity:0}60%{transform:scale(1.05);opacity:1}100%{transform:scale(1);opacity:1}}@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.end-screen{text-align:center;padding:20px}.end-emoji{font-size:64px;margin-bottom:16px;animation:bounceIn 1s ease-out}.score-display{font-size:24px;margin:20px 0;color:var(--accent)}.score-number{font-size:32px;font-weight:bold;color:#059669}.score-total{font-weight:bold}.percentage{font-size:20px;color:var(--muted);margin-bottom:20px}.end-message{font-size:18px;color:#374151;margin:20px 0;padding:16px;background:#f8fafc;border-radius:12px;border-left:4px solid var(--accent)}.end-buttons{display:flex;gap:12px;justify-content:center;margin-top:24px}.play-again-btn{background:#059669;color:white;border:none;padding:12px 24px;border-radius:8px;font-size:16px;cursor:pointer;transition:all 0.3s ease}.play-again-btn:hover{background:#047857;transform:translateY(-2px)}.close-btn{background:var(--muted);color:white;border:none;padding:12px 24px;border-radius:8px;font-size:16px;cursor:pointer;transition:all 0.3s ease}.close-btn:hover{background:#4b5563;transform:translateY(-2px)}.achievement-notification{position:fixed;top:20px;right:20px;z-index:1000;animation:slideInRight 0.5s ease-out}.achievement-popup{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;padding:16px;border-radius:12px;box-shadow:0 8px 25px rgba(0,0,0,0.3);display:flex;align-items:center;gap:12px;max-width:400px;position:relative}.achievement-popup.multiple{background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%)}.achievement-icon{font-size:40px;flex-shrink:0}.achievement-content h3{margin:0 0 4px 0;font-size:18px;color:#ffffff;font-weight:bold}.achievement-content h4{margin:0 0 4px 0;font-size:16px;color:#ffffff;font-weight:bold}.achievement-content p{margin:0;font-size:14px;color:#ffffff;opacity:0.9}.close-notification{background:none;border:none;color:white;font-size:20px;cursor:pointer;position:absolute;top:8px;right:8px;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.achievement-list{display:flex;flex-direction:column;gap:6px}.achievement-item{display:flex;align-items:center;gap:8px;font-size:14px}.achievement-mini-icon{font-size:16px}@keyframes slideInRight{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}.achievements-header{text-align:center;margin-bottom:24px;padding-bottom:16px;border-bottom:2px solid #e2e8f0;position:sticky;top:0;background:white;z-index:10;padding-top:8px;margin-top:-8px}.progress-summary{display:flex;align-items:center;gap:12px;justify-content:center;margin-top:12px}.progress-bar{width:200px;height:12px;background:#e2e8f0;border-radius:6px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),#059669);border-radius:6px;transition:width 0.5s ease}.progress-text{font-size:14px;color:var(--muted);font-weight:600}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:20px 0}.stat-card{background:#f8fafc;padding:16px;border-radius:8px;text-align:center;border:2px solid #e2e8f0}.stat-number{font-size:20px;font-weight:bold;color:var(--accent);margin-bottom:4px}.stat-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px}.achievements-categories{display:flex;flex-direction:column;gap:20px;max-height:40vh;overflow-y:auto;padding-right:8px}.achievement-category h3{margin:0 0 12px 0;color:var(--accent);font-size:18px;display:flex;align-items:center;gap:8px}.achievements-list{display:flex;flex-direction:column;gap:8px}.achievement{display:flex;align-items:center;gap:12px;padding:12px;border-radius:8px;border:2px solid #e2e8f0;transition:all 0.3s ease}.achievement.unlocked{background:linear-gradient(135deg,#ecfdf5,#f0f9ff);border-color:#a7f3d0}.achievement.locked{background:#f8fafc;opacity:0.7}.achievement-info{flex:1}.achievement-info h4{margin:0 0 4px 0;font-size:16px;color:#1f2937}.achievement-info p{margin:0;font-size:14px;color:var(--muted)}.progress{font-size:12px;color:var(--accent);margin-top:4px;font-weight:600}.achievement-status{font-size:20px;flex-shrink:0}.achievements-actions{text-align:center;margin-top:0;padding-top:16px;border-top:2px solid #e2e8f0}.reset-btn{background:linear-gradient(135deg,#dc2626 0%,#b91c1c 100%);color:white;border:2px solid transparent;padding:8px 10px;border-radius:12px;cursor:pointer;font-weight:900;font-size:14px;transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275);position:relative;overflow:hidden;box-shadow:0 4px 15px rgba(220,38,38,0.3);min-width:120px;display:inline-flex;align-items:center;justify-content:center;gap:8px;margin:0}.reset-btn::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}.reset-btn:hover{background:linear-gradient(135deg,#b91c1c 0%,#991b1b 100%);transform:translateY(-3px) scale(1.05);box-shadow:0 8px 25px rgba(220,38,38,0.4);border-color:#fecaca}.reset-btn:hover::before{left:100%}.reset-btn:active{transform:translateY(-1px) scale(1.02);box-shadow:0 4px 12px rgba(220,38,38,0.5);transition:all 0.1s ease}.reset-btn:focus{outline:3px solid rgba(220,38,38,0.3);outline-offset:2px}.reset-btn::after{content:'⚠️';font-size:18px;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;transition:transform 0.3s ease}.reset-btn:hover::after{transform:scale(1.2) rotate(10deg)}.reset-btn.loading{pointer-events:none;position:relative;color:transparent}.reset-btn.loading::after{content:'';position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border:2px solid transparent;border-top:2px solid white;border-radius:50%;animation:spin 1s linear infinite}.reset-btn.success{background:linear-gradient(135deg,#059669 0%,#047857 100%);box-shadow:0 4px 15px rgba(5,150,105,0.3);animation:successPulse 0.6s ease}.reset-btn.success::after{content:'✅';animation:bounceIn 0.5s ease}@keyframes successPulse{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}.achievements-categories::-webkit-scrollbar{width:12px}.achievements-categories::-webkit-scrollbar-track{background:#f1f5f9;border-radius:3px}.achievements-categories::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.achievements-categories::-webkit-scrollbar-thumb:hover{background:#94a3b8}.table-buttons{padding:10px 8px 0;position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:0;pointer-events:none}.table-buttons-container{display:flex;flex-direction:column;align-items:center;background:linear-gradient(135deg,rgba(255,255,255,0.95) 0%,rgba(248,250,252,0.95) 100%);border-radius:16px;padding:12px 16px;min-width:220px;gap:8px;border:2px solid rgba(11,110,153,0.15);box-shadow:0 12px 40px rgba(0,0,0,0.15);backdrop-filter:blur(12px);pointer-events:auto;animation:floatIn 0.8s ease-out,gentleFloat 2s ease-in-out infinite}@keyframes floatIn{from{opacity:0;transform:translateY(-20px) scale(0.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes gentleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}.table-main-btn{background:linear-gradient(135deg,var(--accent),#059669);color:white;border:none;border-radius:12px;cursor:pointer;font-weight:600;display:flex;align-items:center;padding:12px 16px;font-size:16px;min-width:180px;gap:8px;transition:all 0.3s ease;box-shadow:0 6px 20px rgba(11,110,153,0.3);justify-content:center}.table-main-btn:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 10px 30px rgba(11,110,153,0.4);background:linear-gradient(135deg,#059669,var(--accent))}.table-main-btn:active{transform:translateY(-1px) scale(1.02)}.table-secondary-btn{background:linear-gradient(135deg,var(--muted),#4b5563);color:white;border:none;border-radius:10px;cursor:pointer;font-weight:500;display:flex;align-items:center;padding:10px 14px;font-size:14px;min-width:160px;gap:8px;transition:all 0.3s ease;box-shadow:0 4px 15px rgba(107,114,128,0.3);justify-content:center}.table-secondary-btn:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 8px 25px rgba(107,114,128,0.4);background:linear-gradient(135deg,#4b5563,var(--muted))}.btn-icon{display:flex;font-size:20px;width:24px;align-items:center;justify-content:center}.btn-text{white-space:nowrap}.table-main-btn:focus,.table-secondary-btn:focus{outline:3px solid rgba(11,110,153,0.5);outline-offset:2px}#nextQuestion{background:linear-gradient(135deg,#ffffff 0%,#f8fafc 100%);color:var(--accent);border:2px solid var(--accent);padding:12px 24px;border-radius:12px;cursor:pointer;font-weight:600;font-size:16px;transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275);position:relative;overflow:hidden;box-shadow:0 4px 15px rgba(11,110,153,0.2);min-width:140px;display:none;align-items:center;justify-content:center;gap:8px;margin:0}#nextQuestion::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(11,110,153,0.1),transparent);transition:left 0.6s ease}#nextQuestion:hover{background:linear-gradient(135deg,#f0f9ff 0%,#e0f2fe 100%);transform:translateY(-3px) scale(1.05);box-shadow:0 8px 25px rgba(11,110,153,0.3);border-color:#059669;color:#059669}#nextQuestion:hover::before{left:100%}#nextQuestion:active{transform:translateY(-1px) scale(1.02);transition:all 0.1s ease}#nextQuestion:focus{outline:3px solid rgba(11,110,153,0.3);outline-offset:2px}#nextQuestion.show{display:flex !important}#closeQuiz{background:linear-gradient(135deg,var(--muted) 0%,#4b5563 100%);color:white;border:2px solid transparent;padding:12px 24px;border-radius:12px;cursor:pointer;font-weight:600;font-size:16px;transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275);position:relative;overflow:hidden;box-shadow:0 4px 15px rgba(107,114,128,0.3);min-width:120px;display:flex;align-items:center;justify-content:center;gap:8px;margin:0}#closeQuiz::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);transition:left 0.6s ease}#closeQuiz:hover{background:linear-gradient(135deg,#4b5563 0%,#374151 100%);transform:translateY(-3px) scale(1.05);box-shadow:0 8px 25px rgba(107,114,128,0.4);border-color:#9ca3af}#closeQuiz:hover::before{left:100%}#closeQuiz:active{transform:translateY(-1px) scale(1.02);transition:all 0.1s ease}#closeQuiz:focus{outline:3px solid rgba(107,114,128,0.5);outline-offset:2px}.quiz-actions-container{display:flex;gap:12px;justify-content:center;align-items:center;margin-top:20px;padding:16px;background:rgba(248,250,252,0.8);border-radius:12px;border:1px solid rgba(226,232,240,0.8)}#nextQuestion.countdown-active{animation:countdownPulse 1s ease-in-out infinite;position:relative;overflow:hidden}#nextQuestion.countdown-active::after{content:'';position:absolute;bottom:0;left:0;height:3px;background:linear-gradient(90deg,var(--accent),#059669);animation:countdownBar 3s linear;border-radius:0 0 10px 10px}@keyframes countdownBar{from{width:100%}to{width:0%}}@keyframes countdownPulse{0%,100%{transform:scale(1);box-shadow:0 4px 15px rgba(11,110,153,0.3)}50%{transform:scale(1.03);box-shadow:0 6px 20px rgba(11,110,153,0.4)}}#nextQuestion.success{background:linear-gradient(135deg,#ecfdf5 0%,#d1fae5 100%);border-color:#10b981;color:#065f46;animation:successGlow 0.6s ease}@keyframes successGlow{0%{box-shadow:0 0 0 0 rgba(16,185,129,0.7)}50%{box-shadow:0 0 0 10px rgba(16,185,129,0.3)}100%{box-shadow:0 4px 15px rgba(16,185,129,0.2)}}.quiz-btn-icon{font-size:18px;display:flex;align-items:center;justify-content:center;width:20px}#nextQuestion.loading{pointer-events:none;position:relative;color:transparent}#nextQuestion.loading::after{content:'';position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border:2px solid transparent;border-top:2px solid var(--accent);border-radius:50%;animation:spin 1s linear infinite}#closeQuiz.loading{pointer-events:none;position:relative;color:transparent}#closeQuiz.loading::after{content:'';position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border:2px solid transparent;border-top:2px solid white;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:translate(-50%,-50%) rotate(0deg)}100%{transform:translate(-50%,-50%) rotate(360deg)}}#nextQuestion span,#closeQuiz span{transition:transform 0.3s ease}#nextQuestion:hover span,#closeQuiz:hover span{transform:translateX(2px)}@media (max-width:1366px){:root{--cell-size:45px}}@media (max-width:900px){:root{--cell-size:40px}}@media (min-width:768px){.achievements-modal{max-width:700px}.stats-grid{gap:10px}.stat-card{padding:12px}.achievement{padding:10px;gap:10px}.achievement-icon{font-size:20px;width:36px}.achievement-info h4{font-size:15px}.achievement-info p{font-size:13px}.achievements-categories{gap:16px}.achievement-category h3{font-size:16px;margin-bottom:10px}}@media (max-width:720px){:root{--cell-size:35px}.element-icon{font-size:60px;width:100px;height:100px;margin:0 auto}.element-basic-info h2{font-size:24px}.atomic-model-visual{position:relative;width:100%;height:100%;display:flex;justify-content:center;align-items:center}.atomic-model-wrapper{display:flex;justify-content:center;align-items:center;width:200px;height:200px;max-width:200px;max-height:200px;margin:0 auto;position:relative}.achievement-popup{max-width:300px;padding:12px}.achievement-icon{font-size:32px}.achievement{padding:10px}.achievement-info h4{font-size:14px}.achievement-info p{font-size:12px}.table-buttons{top:-2px;left:60%}}@media (max-width:560px){:root{--cell-size:30px}.table-buttons{top:-5px;left:65%}.table-buttons-container{min-width:160px;padding:10px 7px}.table-main-btn{min-width:160px;padding:10px 12px;font-size:14px}.table-secondary-btn{min-width:140px;padding:8px 10px;font-size:14px}.element-basic-info h2{font-size:16px}.element-basic-info p{font-size:14px}.reset-btn:hover{transform:translateY(-2px) scale(1.02)}.stat-card{padding:4px}.stat-number{font-size:18px}.stat-label{font-size:10px}.controls{align-items:stretch;padding:10px}.controls input,.controls select,.controls button{width:30%;min-width:0}.controls button{padding:10px}.legend{padding:8px;gap:6px}.element{border-radius:6px;padding-top:6px;padding-bottom:6px}.modal-content{width:90%;max-width:600px;height:auto;margin:auto;background:#fff;border-radius:12px}.achievements-modal{max-height:95vh}.quiz-options{grid-template-columns:1fr;gap:8px}.quiz-option{min-height:44px;padding:10px 12px;font-size:14px}.quiz-question{font-size:16px;padding:12px}.quiz-progress{font-size:12px;padding:6px 10px}.end-emoji{font-size:48px}.score-display{font-size:20px}.score-number{font-size:28px}.end-buttons{flex-direction:column}.play-again-btn,.close-btn{width:100%}.close{width:32px;height:32px;font-size:18px;right:8px;top:8px}input,select,textarea{font-size:16px}.element-mini-icon{display:none}.quiz-actions-container{flex-direction:column;gap:10px;padding:12px}#nextQuestion,#closeQuiz{padding:14px 20px;font-size:15px;min-width:100%;width:100%}#nextQuestion:hover,#closeQuiz:hover{transform:translateY(-2px) scale(1.02)}}@media (max-width:480px){.element-header{flex-direction:column}.element-description{flex-direction:column}.element-icon{font-size:50px;width:80px;height:80px}.visual-controls{flex-direction:column}.atomic-model-visual{position:relative;width:auto;height:auto;display:flex;justify-content:center;align-items:center}.achievement-notification{top:10px;right:10px;left:10px}.achievement-popup{max-width:none}.progress-bar{width:150px}}@media (max-width:400px){.table-buttons{padding:10px 8px 0;left:70%}}@media (max-width:360px){:root{--cell-size:25px}.table-buttons-container{min-width:125px}.table-main-btn{min-width:125px;padding:5px 5px}.table-secondary-btn{min-width:125px;font-size:11px;padding:5px 5px}.modal-content{padding:10px}.close{width:28px;height:28px;font-size:16px}.reset-btn::after{font-size:16px;width:18px;height:18px}#nextQuestion,#closeQuiz{padding:12px 16px;font-size:14px}.quiz-actions-container{padding:10px;margin-top:16px}.quiz-btn-icon{font-size:16px;width:18px}}