/* 3-Match GAME AREA (bottom grid) */
#bottom-grid {
    position: relative;
    background: #f5f7fa;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(120, 150, 200, 0.08);
    /* Optionally uncomment for separation: border: 2px solid #cddcf6; */
    /*overflow: hidden;*/
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(7, 1fr);
    gap: 0.2em;
    width: min(80vw, 35vh);
    aspect-ratio: 6 / 7;
    max-width: 420px;
    margin: 0 auto;
}

.match-cell {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    box-shadow: 0 1px 5px rgba(120,140,180,0.08);
    border: 1.5px solid #e7e7ee;
    cursor: pointer;
    transition: outline 0.12s, filter 0.12s;
    outline: none;
    position: relative;
}

.match-cell.selected {
    outline: 3px solid #333;
    z-index: 2;
}

.match-block {
    width: 95%;
    height: 95%;
    margin: 2.5%;
    border-radius: 6px;
    transition: filter 0.16s;
    box-shadow: 0 1px 3px rgba(120,120,130,0.12);
    border: 1px black solid;
}

.match-block.red      { background: #e04a4a; }
.match-block.green    { background: #45d872; }
.match-block.blue     { background: #4a83e0; }
.match-block.yellow   { background: #ffe27a; }
.match-block.magenta  { background: #e66aff; }


.match-block.clearing { filter: brightness(1.8) saturate(1.3) blur(1.5px); }

@media (max-width: 600px) {
    #bottom-grid {
        width: min(99vw, 40vh);
        max-width: 100vw;
    }
}

.particle-fly {
    position: fixed;
    pointer-events: none;
    border-radius: 50%;
    z-index: 9999;
    box-shadow: 0 2px 8px rgba(140,140,160,0.18);
    border: 1.5px solid #000;
    transition:
        transform 0.65s cubic-bezier(.58,1.3,.29,1),
        opacity 0.25s linear;
}
.particle-fly.red      { background: #e04a4a; }
.particle-fly.green    { background: #45d872; }
.particle-fly.blue     { background: #4a83e0; }
.particle-fly.yellow   { background: #ffe27a; }
.particle-fly.magenta  { background: #e66aff; }