/* Shared CTF visualization styles */

/* CTF Grid */
.ctf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
    gap: 6px;
    margin-bottom: 2rem;
}

.ctf-cell {
    width: 32px;
    height: 32px;
    border-radius: 3px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, opacity 0.3s;
}

.ctf-cell:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.ctf-cell.dimmed {
    opacity: 0.15;
    filter: grayscale(0.5);
}

.ctf-cell.dimmed:hover {
    opacity: 0.3;
    transform: scale(1.05);
}

/* Legend */
.ctf-legend {
    background: #252525;
    padding: 1rem;
    border-radius: 6px;
    color: #b0b0b0;
    font-size: 0.85rem;
}

.legend-items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.legend-color {
    width: 20px;
    height: 20px;
    border-radius: 2px;
}

.legend-gradient {
    width: 100px;
    height: 20px;
    background: linear-gradient(to right,
        #0de07d 0%,
        #1bbc71 5%,
        #25a469 10%,
        #2d9162 15%,
        #33825d 20%,
        #387659 25%,
        #3d6b55 30%,
        #416152 35%,
        #44594f 40%,
        #47514c 45%,
        #4a4a4a 50%,
        #4a4a4a 100%
    );
    border-radius: 2px;
    cursor: pointer;
    position: relative;
}

.legend-label {
    font-weight: 500;
    color: #d0d0d0;
}

/* CTF Cell Tooltip */
.ctf-tooltip {
    position: fixed;
    background: #2a2a2a;
    border: 1px solid #404040;
    border-radius: 6px;
    padding: 0.75rem;
    color: #e0e0e0;
    font-size: 0.875rem;
    pointer-events: none;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    min-width: 200px;
    display: none;
}

.tooltip-visible {
    display: block;
}

.tooltip-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #fff;
}

.tooltip-details {
    color: #b0b0b0;
    font-size: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.tooltip-details strong {
    color: #d0d0d0;
}

/* Gradient Tooltip */
.gradient-tooltip {
    position: fixed;
    background: #2a2a2a;
    border: 1px solid #404040;
    border-radius: 6px;
    padding: 0.75rem;
    color: #e0e0e0;
    font-size: 0.875rem;
    pointer-events: none;
    z-index: 1001;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    min-width: 180px;
    display: none;
}

.gradient-tooltip.visible {
    display: block;
}

.gradient-tooltip .color-swatch {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    margin-bottom: 0.5rem;
    border: 1px solid #404040;
}