/* Base Color Palette Styles */
.color-palette {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 0.0625rem;
    max-width: 8rem;
    margin: 0.0625rem auto 0.25rem auto;
    padding: 0.125rem;
}

/* Large Desktop (1440px and above) */
@media (min-width: 1441px) {
    .color-palette {
        max-width: 37.5rem;
        gap: 1.25rem;
        padding: 1.5625rem;
    }
    
    .color-option {
        font-size: 1.3rem;
    }
}

/* Standard Desktop (1366px - 1440px) */
@media (max-width: 1440px) and (min-width: 1025px) {
    body {
        font-size: 15px;
    }
    
    .color-palette {
        max-width: 7rem;
        gap: 0.0625rem;
        padding: 0.125rem;
        margin: 0.0625rem auto 0.1875rem auto;
    }
    
    .color-option {
        font-size: 1rem;
    }
}

/* Small Desktop/Large Tablet (1024px - 1365px) */
@media (max-width: 1365px) and (min-width: 769px) {
    body {
        font-size: 14px;
    }
    
    .color-palette {
        max-width: 26.25rem;
        gap: 0.625rem;
        padding: 0.9375rem;
    }
    
    .color-option {
        font-size: 1rem;
    }
}

/* Tablet (768px - 1023px) */
@media (max-width: 1023px) and (min-width: 769px) {
    .color-palette {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 0.5rem;
        padding: 0.75rem;
        max-width: 23.75rem;
    }
    
    .color-option {
        font-size: 0.95rem;
    }
}

/* Mobile Landscape (480px - 768px) */
@media (max-width: 768px) and (min-width: 481px) {
    .color-palette {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: 0.5rem;
        padding: 0.625rem;
        max-width: 21.875rem;
    }
    
    .color-option {
        font-size: 0.9rem;
        padding: 0.4rem;
    }
}

/* Mobile Portrait (320px - 479px) */
@media (max-width: 480px) {
    body {
        font-size: 12px;
    }
    
    .color-palette {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: 0.375rem;
        padding: 0.5rem;
        max-width: 17.5rem;
        margin: 0.9375rem auto;
    }
    
    .color-option {
        font-size: 0.8rem;
        padding: 0.3rem;
    }
}

/* Small Mobile (up to 375px) */
@media (max-width: 375px) {
    body {
        font-size: 11px;
    }
    
    .color-palette {
        max-width: 16.25rem;
        gap: 0.3125rem;
        padding: 0.375rem;
    }
    
    .color-option {
        font-size: 0.75rem;
        padding: 0.2rem;
    }
}

.color-option {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    border-radius: 10px;
    cursor: pointer;
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    font-size: 1.1rem;
}

.color-option:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.color-option[data-color="red"] {
    background-color: #ff4444;
}

.color-option[data-color="blue"] {
    background-color: #2196f3;
}

.color-option[data-color="green"] {
    background-color: #4caf50;
}

.color-option[data-color="yellow"] {
    background-color: #ffeb3b;
    color: #333;
    text-shadow: 1px 1px 2px rgba(255,255,255,0.7);
}

.color-option[data-color="purple"] {
    background-color: #9c27b0;
}

.color-option[data-color="orange"] {
    background-color: #ff9800;
}