:root{--bg-dark-base: #06070a;--bg-dark-glass: rgba(12, 14, 24, .65);--bg-card-glass: rgba(20, 24, 40, .45);--bg-card-hover: rgba(30, 36, 62, .7);--border-glass: rgba(255, 255, 255, .08);--border-glass-active: rgba(255, 255, 255, .25);--text-primary: #f0f3fc;--text-secondary: #a0a8c0;--text-muted: #626a84;--color-glow-blue: #00d2ff;--color-glow-cyan: #00f5d4;--color-glow-purple: #9d4edd;--color-glow-pink: #ff007f;--color-glow-amber: #ff9f1c;--cat-alkali: #ff5e62;--cat-alkaline: #ff9966;--cat-transition: #4ca1af;--cat-lanthanide: #c77dff;--cat-actinide: #e0aaff;--cat-post-transition: #48cae4;--cat-metalloid: #06d6a0;--cat-nonmetal: #ffd166;--cat-noble: #b5179e;--cat-halogen: #f72585;--cat-unknown: #6c757d;--state-solid: #00b4d8;--state-liquid: #ffb703;--state-gas: #ff006e;--state-unknown: #8d99ae;--font-heading: "Space Grotesk", sans-serif;--font-body: "Outfit", sans-serif;--glow-strength: 0 0 12px;--shadow-premium: 0 20px 50px rgba(0, 0, 0, .6)}*{margin:0;padding:0;box-sizing:border-box}body{background-color:var(--bg-dark-base);color:var(--text-primary);font-family:var(--font-body);min-height:100vh;overflow-x:hidden;position:relative;-webkit-font-smoothing:antialiased}#bg-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;pointer-events:none}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#0003}::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.app-container{display:flex;flex-direction:column;height:100vh;width:100vw;padding:1.5rem;gap:1.2rem;z-index:10;position:relative}.app-header{display:flex;align-items:center;justify-content:space-between;background:var(--bg-dark-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-glass);padding:.8rem 1.5rem;border-radius:16px;box-shadow:0 8px 32px #0000005e;position:relative;z-index:100}.header-branding{display:flex;flex-direction:column}.header-logo{display:flex;align-items:center;gap:.6rem}.header-logo i{font-size:1.8rem;background:linear-gradient(135deg,var(--color-glow-blue),var(--color-glow-cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.logo-spin{animation:spin-atomic 12s linear infinite}@keyframes spin-atomic{to{transform:rotate(360deg)}}.header-logo h1{font-family:var(--font-heading);font-size:1.6rem;font-weight:700;letter-spacing:-.5px}.header-logo h1 span{font-weight:300;background:linear-gradient(90deg,#00d2ff,#9d4edd);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.header-tagline{font-size:.8rem;color:var(--text-secondary);letter-spacing:.5px;margin-top:2px}.search-container{position:relative;width:320px}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:.95rem;transition:color .3s}.search-clear-btn{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:.95rem;cursor:pointer;transition:all .25s;z-index:10}.search-clear-btn:hover{color:var(--color-glow-pink);transform:translateY(-50%) scale(1.15)}.search-clear-btn.hidden{display:none}#search-input{width:100%;background:#0006;border:1px solid var(--border-glass);border-radius:24px;padding:.65rem 2.4rem;color:var(--text-primary);font-family:var(--font-body);font-size:.9rem;transition:all .3s cubic-bezier(.4,0,.2,1)}#search-input:focus{outline:none;border-color:var(--color-glow-blue);box-shadow:0 0 15px #00d2ff40;background:#0009}#search-input:focus+.search-icon{color:var(--color-glow-blue)}.search-suggestions{position:absolute;top:calc(100% + 8px);left:0;width:100%;background:#0c0f1cf2;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-glass-active);border-radius:12px;z-index:1000;max-height:250px;overflow-y:auto;box-shadow:var(--shadow-premium)}.search-suggestions.hidden{display:none}.suggestion-item{padding:.6rem 1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition:background .25s;font-size:.85rem;border-bottom:1px solid rgba(255,255,255,.03)}.suggestion-item:last-child{border-bottom:none}.suggestion-item:hover{background:#ffffff14}.suggestion-symbol{font-weight:700;color:var(--color-glow-cyan)}.header-controls{display:flex;gap:.8rem}.control-btn{background:#ffffff0d;border:1px solid var(--border-glass);color:var(--text-primary);cursor:pointer;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;transition:all .3s cubic-bezier(.4,0,.2,1)}.control-btn:hover{background:#ffffff1f;border-color:var(--border-glass-active);transform:translateY(-2px);box-shadow:0 4px 10px #0003}.control-btn.active{background:var(--color-glow-blue);border-color:var(--color-glow-blue);color:var(--bg-dark-base);box-shadow:0 0 15px #00d2ff80}.action-btn{width:auto!important;border-radius:20px!important;padding:0 1.2rem;font-weight:500;gap:.4rem}.action-btn.pulse{animation:button-pulse 2s infinite}@keyframes button-pulse{0%{box-shadow:0 0 #00d2ff80}70%{box-shadow:0 0 0 10px #00d2ff00}to{box-shadow:0 0 #00d2ff00}}.dashboard-bar{display:flex;align-items:center;justify-content:space-between;background:var(--bg-dark-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-glass);padding:.8rem 1.5rem;border-radius:16px;flex-wrap:wrap;gap:1.2rem;position:relative;z-index:50}.bar-label{font-size:.75rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);font-weight:600}.visual-modes-group{display:flex;align-items:center;gap:.8rem}.toggle-buttons{display:flex;background:#0006;border:1px solid var(--border-glass);border-radius:20px;padding:2px}.mode-btn{background:transparent;border:none;color:var(--text-secondary);padding:.5rem 1rem;border-radius:18px;cursor:pointer;font-family:var(--font-body);font-size:.8rem;font-weight:500;display:flex;align-items:center;gap:.4rem;transition:all .3s}.mode-btn:hover{color:var(--text-primary)}.mode-btn.active{background:#ffffff14;color:var(--color-glow-cyan);box-shadow:0 2px 10px #0003}.thermo-slider-group{display:flex;align-items:center;gap:1rem;flex-grow:1;max-width:280px}.thermo-labels{display:flex;flex-direction:column;min-width:110px}.temp-value{font-size:.9rem;font-weight:700;color:var(--color-glow-amber);margin-top:2px}.slider-wrapper{flex-grow:1}#temp-slider{width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--state-solid) 0%,var(--state-liquid) 40%,var(--state-gas) 80%,#901a1e 100%);outline:none;cursor:pointer}#temp-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--text-primary);border:2px solid var(--bg-dark-base);box-shadow:0 0 10px #ffffff80;transition:transform .1s}#temp-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.thermo-states-legend{display:flex;gap:.6rem;font-size:.7rem}.state-legend-item{display:flex;align-items:center;gap:4px;color:var(--text-secondary)}.state-legend-item.solid i{color:var(--state-solid)}.state-legend-item.liquid i{color:var(--state-liquid)}.state-legend-item.gas i{color:var(--state-gas)}.state-legend-item.synthetic i{color:var(--state-synthetic)}.clickable-state{cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);padding:.35rem .7rem;border-radius:8px;background:#ffffff05;border:1px solid rgba(255,255,255,.05);-webkit-user-select:none;user-select:none}.clickable-state:hover{color:var(--text-primary);background:#ffffff14;border-color:#ffffff26;transform:translateY(-1.5px)}.clickable-state:active{transform:translateY(.5px)}.clickable-state.active.solid{background:#00b4d81f;border-color:var(--state-solid);color:var(--text-primary);box-shadow:0 0 12px #00b4d859;font-weight:700}.clickable-state.active.liquid{background:#ffb7031f;border-color:var(--state-liquid);color:var(--text-primary);box-shadow:0 0 12px #ffb70359;font-weight:700}.clickable-state.active.gas{background:#ff006e1f;border-color:var(--state-gas);color:var(--text-primary);box-shadow:0 0 12px #ff006e59;font-weight:700}.clickable-state.active.synthetic{background:#8d99ae1f;border-color:var(--state-unknown);color:var(--text-primary);box-shadow:0 0 12px #8d99ae59;font-weight:700}.heatmap-group{display:flex;align-items:center;gap:.6rem}.heatmap-dropdown{background:#0006;border:1px solid var(--border-glass);color:var(--text-primary);border-radius:12px;padding:.5rem 1rem;font-family:var(--font-body);font-size:.8rem;cursor:pointer;outline:none;transition:all .3s}.heatmap-dropdown:focus{border-color:var(--color-glow-blue);box-shadow:0 0 8px #00d2ff33}.main-viewport{flex-grow:1;position:relative;min-height:0}.viewport-content{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;pointer-events:none;transform:scale(.98);transition:all .5s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}.viewport-content.active{opacity:1;pointer-events:auto;transform:scale(1)}.periodic-grid-container{display:grid;grid-template-columns:repeat(18,1fr);grid-template-rows:repeat(10,1fr);gap:5px;flex-grow:1;min-height:0;perspective:1000px}.element-card{background:var(--bg-card-glass);border:1px solid var(--border-glass);border-radius:8px;padding:4px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none;overflow:hidden;transform-style:preserve-3d;transition:all .35s cubic-bezier(.25,.8,.25,1)}.element-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;border:1px solid transparent;pointer-events:none;z-index:2;transition:all .35s}.card-number{font-size:.65rem;font-weight:700;color:var(--text-muted)}.card-symbol{font-size:1.1rem;font-weight:900;text-align:center;font-family:var(--font-heading);margin:0;letter-spacing:-.5px;text-shadow:0 0 5px rgba(255,255,255,.1)}.card-name{font-size:.58rem;text-align:center;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;letter-spacing:.2px;transition:color .25s}.element-card:hover .card-name{color:var(--text-primary)}.element-card:hover{background:var(--bg-card-hover);transform:translateZ(15px) scale(1.08);z-index:50;border-color:#fff3;box-shadow:0 10px 25px #00000080,var(--shadow-glow)}.element-card[data-number="57"],.element-card[data-number="89"]{grid-column-start:3}.element-card.faded{opacity:.15;filter:grayscale(.85);pointer-events:none}.element-card.highlighted{animation:glow-pulse 1.5s ease-in-out infinite alternate;z-index:10}@keyframes glow-pulse{0%{border-color:var(--border-glass-active);box-shadow:0 0 5px var(--glow-color)}to{border-color:var(--glow-color);box-shadow:0 0 20px var(--glow-color)}}.element-card.state-solid{border-bottom:2px solid var(--state-solid)}.element-card.state-liquid{border-bottom:2px solid var(--state-liquid)}.element-card.state-gas{border-bottom:2px solid var(--state-gas)}.element-card.state-synthetic{border-bottom:2px solid var(--state-synthetic)}.element-card.solid-freeze:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgba(0,180,216,.05) 0%,transparent 100%);pointer-events:none;z-index:1}.element-card.liquid-melt:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,transparent 60%,rgba(255,183,3,.08) 100%);pointer-events:none;z-index:1}.element-card.gas-cloud:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle,rgba(255,0,110,.05) 0%,transparent 70%);pointer-events:none;z-index:1}.cat-alkali-metal{--glow-color: var(--cat-alkali);color:var(--cat-alkali)}.cat-alkaline-earth-metal{--glow-color: var(--cat-alkaline);color:var(--cat-alkaline)}.cat-transition-metal{--glow-color: var(--cat-transition);color:var(--cat-transition)}.cat-lanthanide{--glow-color: var(--cat-lanthanide);color:var(--cat-lanthanide)}.cat-actinide{--glow-color: var(--cat-actinide);color:var(--cat-actinide)}.cat-post-transition-metal{--glow-color: var(--cat-post-transition);color:var(--cat-post-transition)}.cat-metalloid{--glow-color: var(--cat-metalloid);color:var(--cat-metalloid)}.cat-reactive-nonmetal{--glow-color: var(--cat-nonmetal);color:var(--cat-nonmetal)}.cat-noble-gas{--glow-color: var(--cat-noble);color:var(--cat-noble)}.cat-halogen{--glow-color: var(--cat-halogen);color:var(--cat-halogen)}.cat-unknown{--glow-color: var(--cat-unknown);color:var(--cat-unknown)}.groups-legend{display:flex;justify-content:center;flex-wrap:wrap;gap:.6rem;margin-top:1rem;background:var(--bg-dark-glass);border:1px solid var(--border-glass);border-radius:12px;padding:.6rem 1rem}.legend-chip{font-size:.7rem;font-weight:500;padding:.3rem .6rem;border-radius:6px;cursor:pointer;background:#ffffff08;border:1px solid var(--border-glass);transition:all .25s;color:var(--text-secondary)}.legend-chip:hover{color:var(--text-primary);background:#ffffff14}.legend-chip.active{background:var(--glow-color);color:var(--bg-dark-base);box-shadow:0 0 10px var(--glow-color);border-color:var(--glow-color);font-weight:700}.canvas-3d-wrapper{flex-grow:1;position:relative;background:var(--bg-dark-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-glass);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}#orbit-3d-canvas{width:100%;height:100%;flex-grow:1;cursor:grab}#orbit-3d-canvas:active{cursor:grabbing}.canvas-3d-instructions{position:absolute;bottom:12px;left:50%;transform:translate(-50%);background:#000000b3;border:1px solid var(--border-glass);border-radius:20px;padding:.5rem 1.2rem;font-size:.75rem;color:var(--text-secondary);display:flex;align-items:center;gap:6px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none}.list-container{background:var(--bg-dark-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-glass);border-radius:16px;padding:1.5rem;height:100%;display:flex;flex-direction:column;gap:1rem}.list-filters-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.list-filters-header h2{font-family:var(--font-heading);font-size:1.25rem;font-weight:700}.compare-action-btn{background:var(--bg-card-glass);border:1px solid var(--border-glass-active);color:var(--text-primary);padding:.5rem 1.2rem;border-radius:20px;cursor:pointer;font-family:var(--font-body);font-size:.8rem;display:flex;align-items:center;gap:.4rem;font-weight:500;transition:all .3s}.compare-action-btn:hover{background:#ffffff14}.compare-action-btn.pulse{background:var(--color-glow-blue);border-color:var(--color-glow-blue);color:var(--bg-dark-base);font-weight:700}.compare-action-btn.hidden{display:none}.table-scroll-container{flex-grow:1;overflow-y:auto;border-radius:8px;border:1px solid rgba(255,255,255,.04)}.analytics-table{width:100%;border-collapse:collapse;font-size:.85rem;text-align:left}.analytics-table th,.analytics-table td{padding:.8rem 1rem;border-bottom:1px solid rgba(255,255,255,.04)}.analytics-table th{background:#0006;font-family:var(--font-heading);color:var(--text-secondary);font-weight:600;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .25s,color .25s}.analytics-table th:hover{background:#ffffff0a;color:var(--text-primary)}.analytics-table th.active-sort{color:var(--color-glow-blue);font-weight:700}.analytics-table tbody tr{cursor:pointer;transition:background .25s}.analytics-table tbody tr:hover{background:#ffffff08}.analytics-table tbody tr.compare-selected{background:#00d2ff14}.table-symbol-badge{font-weight:800;font-size:.9rem;padding:.2rem .5rem;border-radius:4px;display:inline-block;min-width:32px;text-align:center}.compare-checkbox{cursor:pointer;width:16px;height:16px;accent-color:var(--color-glow-blue)}.details-panel{position:fixed;top:1.5rem;right:1.5rem;bottom:1.5rem;width:460px;background:#0a0c16f2;backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);border:1px solid rgba(255,255,255,.08);border-radius:20px;z-index:100;transform:translate(110%);transition:transform .55s cubic-bezier(.25,1,.5,1);box-shadow:-10px 10px 40px #000000b3;display:flex;flex-direction:column;color:var(--text-primary)}.details-panel.closed{transform:translate(110%)}.details-panel:not(.closed){transform:translate(0)}.close-panel-btn{position:absolute;top:20px;right:20px;background:#ffffff0d;border:1px solid rgba(255,255,255,.08);color:var(--text-primary);width:32px;height:32px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s;z-index:110}.close-panel-btn:hover{background:#ffffff26;transform:rotate(90deg)}.panel-scroll-content{flex-grow:1;overflow-y:auto;padding:2.2rem;display:flex;flex-direction:column;gap:1.4rem}.element-header-modern{display:flex;flex-direction:column;gap:.4rem;margin-top:.5rem}.element-header-modern h1{font-family:Outfit,sans-serif;font-size:2.1rem;font-weight:500;color:var(--text-primary);letter-spacing:-.5px}.element-header-modern h1 sup{font-size:1.1rem;font-weight:700;color:var(--text-secondary);vertical-align:super;margin-left:2px}.detail-category-modern{display:flex;align-items:center;font-size:.9rem;font-weight:500;color:var(--text-secondary)}.category-bullet{width:12px;height:12px;border-radius:50%;display:inline-block;margin-right:8px}.bohr-model-modern{display:flex;flex-direction:column;align-items:center;width:100%}.bohr-header-modern{display:flex;justify-content:flex-end;width:100%}.bohr-control-btn{background:#ffffff0d;border:1px solid rgba(255,255,255,.08);color:var(--text-primary);padding:.25rem .65rem;border-radius:14px;font-size:.72rem;cursor:pointer;font-family:var(--font-body);font-weight:500;transition:all .25s}.bohr-control-btn:hover{background:#ffffff1f}.bohr-canvas-container-modern{position:relative;width:100%;display:flex;justify-content:center;background:transparent}.bohr-canvas-container-modern canvas{max-width:100%;background:transparent}.bohr-caption{font-size:.8rem;color:var(--text-muted);margin-top:4px;text-align:center}.summary-text-modern{font-size:.95rem;line-height:1.6;color:var(--text-secondary);text-align:left}.summary-text-modern strong{font-weight:700;color:var(--text-primary)}.properties-list-modern{display:flex;flex-direction:column;gap:.75rem;padding-top:.5rem;border-top:1px solid rgba(255,255,255,.06)}.prop-item{font-size:.92rem;color:var(--text-primary);line-height:1.4;display:flex}.prop-label{font-weight:600;color:var(--text-secondary);margin-right:6px}.prop-value{font-weight:400;color:var(--text-primary)}.details-actions-modern{margin-top:auto;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;gap:.7rem}.action-btn-modern{font-family:var(--font-body);font-weight:600;font-size:.9rem;padding:.75rem;border-radius:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;text-decoration:none;transition:all .3s cubic-bezier(.25,.8,.25,1);width:100%;box-sizing:border-box}.action-btn-modern.primary{background-color:var(--glow-color);color:var(--bg-dark-base);border:none;box-shadow:0 0 15px var(--glow-color);font-weight:700}.action-btn-modern.primary:hover{background-color:#fff;color:#000;box-shadow:0 0 25px var(--glow-color);transform:translateY(-2px)}.action-btn-modern.secondary{background-color:#ffffff05;color:var(--text-primary);border:1px solid rgba(255,255,255,.1)}.action-btn-modern.secondary:hover{background-color:#ffffff14;border-color:var(--border-glass-active);transform:translateY(-2px)}.compare-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#020306d9;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:2rem;transition:opacity .4s}.compare-overlay.hidden{opacity:0;pointer-events:none}.compare-modal{background:#0c0e19f2;border:1px solid var(--border-glass-active);border-radius:24px;width:1000px;max-width:90%;max-height:90%;display:flex;flex-direction:column;box-shadow:var(--shadow-premium);overflow:hidden}.compare-modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 2rem;border-bottom:1px solid rgba(255,255,255,.05)}.compare-modal-header h2{font-family:var(--font-heading);font-size:1.35rem;font-weight:700}.close-modal-btn{background:transparent;border:none;color:var(--text-secondary);font-size:1.3rem;cursor:pointer;transition:color .3s}.close-modal-btn:hover{color:var(--text-primary)}.compare-grid-layout{display:grid;grid-template-columns:1fr 180px 1fr;flex-grow:1;overflow-y:auto;padding:2rem;gap:1rem}.compare-column{display:flex;flex-direction:column;gap:1.2rem}.compare-element-card{border-radius:16px;padding:1.5rem;background:#ffffff05;border:1px solid var(--border-glass);position:relative;display:flex;flex-direction:column;align-items:center}.compare-element-card .symbol{font-family:var(--font-heading);font-size:4rem;font-weight:900;text-shadow:0 0 15px var(--glow-color)}.compare-element-card .name{font-family:var(--font-heading);font-size:1.8rem;font-weight:700;margin-top:.5rem}.compare-element-card .number{position:absolute;top:15px;left:15px;font-size:1.2rem;font-weight:900;opacity:.5}.compare-element-card .category{font-size:.75rem;text-transform:uppercase;letter-spacing:1px;font-weight:700;background:#ffffff0d;padding:.25rem .8rem;border-radius:6px;margin-top:.4rem}.compare-data-values{display:flex;flex-direction:column;gap:1rem;padding:1rem 0}.compare-val-row{font-size:1rem;font-weight:700;text-align:center;height:38px;display:flex;align-items:center;justify-content:center}.compare-col-left .compare-val-row{color:var(--color-glow-blue)}.compare-col-right .compare-val-row{color:var(--color-glow-pink)}.compare-metrics-column{display:flex;flex-direction:column;align-items:center;gap:1rem;padding-top:1.5rem}.vs-badge{background:linear-gradient(135deg,var(--color-glow-blue),var(--color-glow-pink));color:var(--bg-dark-base);font-family:var(--font-heading);font-weight:900;font-size:1.2rem;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:7.5rem}.metric-label-spacer{font-size:.75rem;font-weight:700;text-transform:uppercase;color:var(--text-muted);letter-spacing:.5px;height:38px;display:flex;align-items:center;justify-content:center;text-align:center}.game-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#020306d9;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:1200;display:flex;align-items:center;justify-content:center;padding:2rem;transition:opacity .4s}.game-overlay.hidden{opacity:0;pointer-events:none}.game-modal{background:#0e101bf2;border:1px solid var(--border-glass-active);border-radius:24px;width:600px;max-width:95%;display:flex;flex-direction:column;box-shadow:var(--shadow-premium);overflow:hidden}.game-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 2rem;border-bottom:1px solid rgba(255,255,255,.05);position:relative}.game-score-board{display:flex;gap:1.5rem;font-weight:700;font-size:.9rem}.text-gold{color:gold}.text-green{color:var(--cat-metalloid)}.close-game-btn{background:transparent;border:none;color:var(--text-secondary);font-size:1.3rem;cursor:pointer;transition:color .3s}.close-game-btn:hover{color:var(--text-primary)}.game-content-container{padding:2rem;min-height:350px;display:flex;flex-direction:column;justify-content:center}.game-screen{display:none;flex-direction:column;align-items:center;text-align:center;gap:1.5rem;width:100%}.game-screen.active{display:flex}.game-welcome-icon{font-size:4rem;background:linear-gradient(135deg,gold,#ff8c00);-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:bounce-trophy 2s infinite alternate}@keyframes bounce-trophy{0%{transform:translateY(0)}to{transform:translateY(-10px)}}.game-start-screen p{color:var(--text-secondary);font-size:.9rem;line-height:1.6;max-width:400px}.game-action-btn{background:linear-gradient(135deg,var(--color-glow-blue),var(--color-glow-cyan));color:var(--bg-dark-base);border:none;border-radius:25px;padding:.8rem 2.5rem;font-family:var(--font-body);font-weight:700;cursor:pointer;font-size:1rem;display:flex;align-items:center;gap:.5rem;box-shadow:0 5px 15px #00d2ff66;transition:all .3s}.game-action-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #00d2ff99}.progress-bar-container{width:100%;height:6px;background:#ffffff0d;border-radius:3px;overflow:hidden}.progress-bar{height:100%;width:100%;background:linear-gradient(90deg,var(--color-glow-blue),var(--color-glow-cyan));transition:width .1s linear}.question-container h4{font-family:var(--font-heading);font-size:1.25rem;font-weight:700;line-height:1.4}.options-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}.option-btn{background:#ffffff08;border:1px solid var(--border-glass);border-radius:12px;padding:1rem;color:var(--text-primary);font-family:var(--font-body);font-weight:600;cursor:pointer;font-size:.9rem;transition:all .25s;text-align:center}.option-btn:hover{background:#ffffff14;border-color:var(--border-glass-active)}.option-btn.correct{background:#06d6a040!important;border-color:#06d6a0!important;color:#06d6a0!important;box-shadow:0 0 15px #06d6a033}.option-btn.incorrect{background:#f7258540!important;border-color:#f72585!important;color:#f72585!important;box-shadow:0 0 15px #f7258533}.final-score-text{font-size:1.15rem}.final-score-text strong{color:var(--color-glow-cyan);font-size:1.5rem}.rank-text{color:var(--text-secondary);font-size:.95rem;font-style:italic}@media (max-width: 1300px){.periodic-grid-container{transform:scale(.9);transform-origin:top center}}@media (max-width: 1100px){.periodic-grid-container{transform:scale(.78)}.app-header{flex-direction:column;gap:1rem}.search-container{width:100%}.dashboard-bar{flex-direction:column;align-items:stretch}.thermo-slider-group{max-width:none}}@media (max-width: 800px){.periodic-grid-container{transform:scale(.55)}.groups-legend{display:none}.details-panel{width:calc(100vw - 3rem)}.compare-grid-layout{grid-template-columns:1fr}.vs-badge,.compare-metrics-column{display:none}}