.periodic-table-container{background-color:var(--bs-black);min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto Condensed,Arial Narrow,sans-serif}.periodic-table-grid-wrapper{width:100%;max-width:1400px;margin:0 auto;box-sizing:border-box}.periodic-table-grid{display:grid;grid-template-columns:repeat(18,1fr);grid-template-rows:repeat(10,1fr);gap:2px;width:100%;aspect-ratio:18 / 10;grid-auto-flow:dense;position:relative}.element-card{padding:.25rem;cursor:pointer;transition:all .2s ease;transform:scale(1);z-index:1;display:flex;flex-direction:column;min-width:0;min-height:0;container-type:size;position:relative;background-image:linear-gradient(135deg,transparent 0%,transparent 60%,rgba(0,0,0,.3) 100%)}.element-card:hover{transform:scale(1);z-index:1000}.element-card-content{display:flex;flex-direction:column;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden}.element-header{display:flex;justify-content:space-between;align-items:start;line-height:1;font-size:20cqw}.element-atomic-number{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.element-atomic-mass{font-size:15cqw;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.element-body{flex-grow:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0}.element-symbol{font-weight:700;line-height:1;font-size:30cqw;max-width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.element-property-value{text-align:center;margin-top:.25rem;line-height:1;font-size:15cqw;max-width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.element-name{text-align:center;line-height:1;font-size:15cqw;max-width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.element-hover-popup{position:fixed;padding:2px;top:50%;left:50%;z-index:2000;box-shadow:0 0 30px #ffffffb3;width:60px;height:60px;display:flex;flex-direction:column;pointer-events:none;background-image:linear-gradient(135deg,transparent 0%,transparent 60%,rgba(0,0,0,.3) 100%)}.element-hover-popup .element-header,.element-hover-popup .element-atomic-mass{font-size:6px}.element-hover-popup .element-symbol{font-size:18px}.element-hover-popup .element-property-value,.element-hover-popup .element-name{font-size:6px}.gradient-bar{background:linear-gradient(to right,#1414c8,#1478b4,#14b414,#b4b414,#c86414,#c81414);height:60px;cursor:pointer;position:relative}.gradient-bar-overlay{position:absolute;top:0;bottom:0;background-color:#ffffff4d;border-left:2px solid var(--bs-warning);border-right:2px solid var(--bs-warning);pointer-events:none}.gradient-bar-hover-value{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--bs-black);color:var(--bs-white);padding:.25rem .5rem;border:1px solid var(--bs-light);font-size:14px}.legend-color-box{width:30px;height:30px;flex-shrink:0;background-image:linear-gradient(135deg,transparent 0%,transparent 60%,rgba(0,0,0,.3) 100%)}.property-dropdown{width:220px}.element-modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:#000000d9;z-index:2000}.element-modal-content{max-width:600px;width:90%;max-height:90vh;overflow-y:auto}.element-modal-header-box{min-width:150px}@media (max-width: 576px){.element-card{border:none!important}.element-symbol{font-weight:700;line-height:1;font-size:60cqw;max-width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.element-atomic-mass{display:none;font-size:0cqw;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.element-hover-popup{transform:translate(-50%,-50%) scale(3)}}@media (min-width: 577px) and (max-width: 767px){.element-hover-popup{transform:translate(-50%,-50%) scale(3)}}@media (min-width: 768px){.element-hover-popup{transform:translate(-50%,-50%) scale(4)}}