/* Bubble Wrap game specific styles moved from root style.css */

.bubble-wrap-arena {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 12px;
    padding: 1.5rem;
    max-width: 680px;
    width: 100%;
    margin: 0 auto;
}

.bubble {
    aspect-ratio: 1;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    background: radial-gradient(circle at 30% 30%, rgba(0, 242, 254, 0.4) 0%, rgba(0, 100, 200, 0.3) 60%, rgba(0, 30, 80, 0.6) 100%);
    box-shadow: 
        inset 0 3px 6px rgba(255, 255, 255, 0.4),
        0 4px 8px rgba(0, 0, 0, 0.4),
        0 0 10px rgba(0, 242, 254, 0.15);
    border: 1px solid rgba(0, 242, 254, 0.25);
    transition: transform 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.bubble:hover {
    transform: scale(1.08);
    background: radial-gradient(circle at 30% 30%, rgba(0, 242, 254, 0.6) 0%, rgba(0, 120, 240, 0.4) 60%, rgba(0, 40, 120, 0.7) 100%);
    box-shadow: 
        inset 0 4px 8px rgba(255, 255, 255, 0.5),
        0 6px 12px rgba(0, 0, 0, 0.5),
        0 0 15px rgba(0, 242, 254, 0.3);
}

.bubble.popped {
    background: rgba(10, 15, 28, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
    box-shadow: 
        inset 0 2px 5px rgba(0, 0, 0, 0.9),
        0 1px 1px rgba(255, 255, 255, 0.02) !important;
    transform: scale(0.95);
    cursor: default;
}

.bubble.popped::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 60%;
    border-radius: 50%;
    border: 1.5px dashed rgba(255, 255, 255, 0.08);
}