/* ==========================================
   Hero-style 3D tiles for periodic-table elements
   (category colors preserved)
   ========================================== */

/* --- Category color tokens --- */
.alkali-metal {
    --el-color: #ff6b6b;
    --el-color-dark: #e85555;
    --el-color-light: #ffd0d0;
    --el-hover-glow: rgba(255, 107, 107, 0.65);
}

.alkaline-earth {
    --el-color: #feca57;
    --el-color-dark: #e0b44e;
    --el-color-light: #ffe9a8;
    --el-hover-glow: rgba(254, 202, 87, 0.65);
}

.transition-metal {
    --el-color: #48dbfb;
    --el-color-dark: #38c4e5;
    --el-color-light: #b8f0ff;
    --el-hover-glow: rgba(72, 219, 251, 0.65);
}

.post-transition {
    --el-color: #1dd1a1;
    --el-color-dark: #18bc92;
    --el-color-light: #9af5dc;
    --el-hover-glow: rgba(29, 209, 161, 0.65);
}

.metalloid {
    --el-color: #5f27cd;
    --el-color-dark: #5223b8;
    --el-color-light: #c4a8f5;
    --el-hover-glow: rgba(95, 39, 205, 0.65);
}

.nonmetal {
    --el-color: #ff9ff3;
    --el-color-dark: #e88fdb;
    --el-color-light: #ffd4fa;
    --el-hover-glow: rgba(255, 159, 243, 0.65);
}

.halogen {
    --el-color: #54a0ff;
    --el-color-dark: #4890e8;
    --el-color-light: #b8d4ff;
    --el-hover-glow: rgba(84, 160, 255, 0.65);
}

.noble-gas {
    --el-color: #c8d6e5;
    --el-color-dark: #aab8c2;
    --el-color-light: #eef3f8;
    --el-hover-glow: rgba(200, 214, 229, 0.75);
}

.lanthanide {
    --el-color: #ff9f43;
    --el-color-dark: #e88f3c;
    --el-color-light: #ffd9a8;
    --el-hover-glow: rgba(255, 159, 67, 0.65);
}

.actinide {
    --el-color: #ee5a24;
    --el-color-dark: #d65120;
    --el-color-light: #ffc4a8;
    --el-hover-glow: rgba(238, 90, 36, 0.65);
}

/* --- Shared 3D surface --- */
.element:not(.empty):not(.la-marker):not(.ac-marker),
.timeline-symbol,
.element-symbol-badge,
.legend-color {
    background: none !important;
    position: relative;
    border: none;
    box-sizing: border-box;
}

.element:not(.empty):not(.la-marker):not(.ac-marker)::after,
.timeline-symbol::after,
.element-symbol-badge::after,
.legend-color::after {
    content: "";
    position: absolute;
    z-index: 0;
    width: calc(100% + 0.3em);
    height: calc(100% + 0.3em);
    top: -0.15em;
    left: -0.15em;
    border-radius: inherit;
    background: linear-gradient(-135deg, rgba(5, 5, 5, 0.5), transparent 20%, transparent 100%);
    filter: blur(0.0125em);
    opacity: 0.25;
    mix-blend-mode: multiply;
    pointer-events: none;
}

.element:not(.empty):not(.la-marker):not(.ac-marker)::before,
.timeline-symbol::before,
.element-symbol-badge::before,
.legend-color::before {
    content: "";
    position: absolute;
    inset: 0.035em;
    border-radius: inherit;
    background-image: linear-gradient(135deg, var(--el-color), var(--el-color-dark));
    z-index: 1;
    box-shadow:
        0 0.05em 0.05em -0.01em rgba(5, 5, 5, 1),
        0 0.01em 0.01em -0.01em rgba(5, 5, 5, 0.5),
        0.15em 0.3em 0.1em -0.01em rgba(5, 5, 5, 0.25),
        -0.05em -0.05em 0.05em 0 inset rgba(5, 5, 5, 0.25),
        0 0 0.05em 0.2em inset rgba(255, 255, 255, 0.25),
        0.025em 0.05em 0.1em 0 inset rgba(255, 255, 255, 1),
        0.12em 0.12em 0.12em inset rgba(255, 255, 255, 0.25),
        -0.075em -0.25em 0.25em 0.1em inset rgba(5, 5, 5, 0.25);
    pointer-events: none;
}

/* .number 使用 absolute 左上角定位，見 elements.css */
.element:not(.empty):not(.la-marker):not(.ac-marker) .element-body,
.element:not(.empty):not(.la-marker):not(.ac-marker) .symbol,
.element:not(.empty):not(.la-marker):not(.ac-marker) .name,
.element:not(.empty):not(.la-marker):not(.ac-marker) .element-speak-hint,
.timeline-symbol-text,
.badge-label {
    position: relative;
    z-index: 4;
}

/* Noble gas tile text — detailed shadows in elements.css */
.timeline-symbol.noble-gas,
.element-symbol-badge.noble-gas {
    color: #1a1a2e;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.45);
}

/* Periodic table cell tweaks */
.element:not(.empty):not(.la-marker):not(.ac-marker) {
    border-radius: 12px;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.25s ease;
    overflow: visible;
}

.element:not(.empty):not(.la-marker):not(.ac-marker):has(.element-led-ring) {
    overflow: visible;
}

.element:not(.empty):not(.la-marker):not(.ac-marker)::before {
    transition: filter 0.25s ease, background-position 0.4s ease;
}

.element .element-speak-hint {
    position: absolute;
    bottom: 3px;
    right: 3px;
    font-size: 0.7rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 5;
    line-height: 1;
    pointer-events: none;
}

.element:active:not(.empty):not(.la-marker):not(.ac-marker) {
    transform: scale(0.95);
}

/* Legend swatches */
.legend-color {
    border-radius: 6px;
}

.legend-color::after,
.legend-color::before {
    border-radius: inherit;
}

/* Timeline badges */
.timeline-symbol {
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.timeline-symbol-text {
    color: #fff;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.timeline-symbol.noble-gas .timeline-symbol-text {
    color: #1a1a2e;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.45);
}

/* Modal symbol badge */
.element-symbol-badge {
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.badge-label {
    color: #fff;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.element-symbol-badge.noble-gas .badge-label {
    color: #1a1a2e;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.45);
}

/* Exam / filter states */
.element.exam-blank::before {
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06));
}

.element.exam-blank .symbol {
    color: #ff6b6b;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.element.dimmed::before {
    filter: grayscale(0.35) brightness(0.7);
}

/* LED marquee on hover — see element-led-ring.css */

.element:not(.empty):not(.la-marker):not(.ac-marker):is(:hover, .el-hovered) .element-speak-hint {
    opacity: 0.85;
}

@media (hover: hover) {
    .timeline-symbol:hover {
        transform: translateY(-2px);
        box-shadow: 0 0 14px var(--el-hover-glow), 0 0 24px var(--el-hover-glow);
    }

    .timeline-symbol:hover::before {
        filter: brightness(1.15) saturate(1.2);
    }
}