body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 20px;
    color: #333;
    touch-action: none;
    overflow: hidden;
}

#game-container {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15), inset 0 0 0 1px rgba(255,255,255,0.5);
    text-align: center;
}

.header {
    display: flex; justify-content: space-between;
    margin-bottom: 15px; font-size: 18px; font-weight: 800;
    transition: color 0.3s;
}

#board-container { position: relative; }

#board {
    display: grid;
    grid-template-columns: repeat(8, 45px);
    grid-template-rows: repeat(8, 45px);
    gap: 2px;
    background-color: rgba(187, 173, 160, 0.8);
    padding: 5px;
    border-radius: 12px;
    user-select: none;
    box-shadow: inset 0 5px 15px rgba(0,0,0,0.1);
}

.cell {
    width: 45px; height: 45px;
    background-color: #cdc1b4;
    border-radius: 8px;
    display: flex; justify-content: center; align-items: center;
    font-size: 30px;
    cursor: pointer;
    position: relative;
    /* Hiệu ứng chuyển động mượt */
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), 
                filter 0.2s ease, box-shadow 0.2s ease;
    will-change: transform;
}

/* LIQUID GLASS APPLE EFFECT KHI CHẠM */
.cell:active {
    transform: scale(0.8);
    filter: brightness(1.15) contrast(1.2) saturate(1.3);
    box-shadow: inset 0 0 15px rgba(255,255,255,0.8), 0 5px 10px rgba(0,0,0,0.2);
    border-radius: 15px; /* Bo cong nhiều hơn khi nén */
    z-index: 5;
}

/* --- CHƯỚNG NGẠI VẬT --- */
.glass::before {
    content: ""; position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(173,216,230,0.5) 100%);
    border: 2px solid rgba(255,255,255,0.9);
    border-radius: 8px; pointer-events: none; z-index: 10;
    box-shadow: inset 0 0 8px rgba(255,255,255,0.8);
}
.box {
    background-color: #d4a373 !important; border: 2px solid #8b5a2b;
    cursor: not-allowed; font-size: 25px; filter: none !important;
}
.stone {
    background-color: #666 !important; border: 2px solid #333;
    border-radius: 10px; cursor: not-allowed; font-size: 25px;
    box-shadow: inset 0 -5px 10px rgba(0,0,0,0.5); filter: none !important;
}
.stone:active { transform: scale(1) !important; filter: none !important; }

/* Kẹo Nổ & Cầu Vồng */
.bomb-candy {
    box-shadow: inset 0 0 20px rgba(255, 0, 0, 0.9);
    border: 2px solid #ff4d4d; animation: pulse 0.8s infinite alternate;
}
.color-bomb {
    background-color: #222 !important; border-radius: 50%;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.9);
    animation: spin 3s linear infinite; font-size: 25px;
}

/* FIX LỖI COMBO CHE BÀN CỜ */
#combo-display {
    position: absolute;
    top: 25%; left: 50%; /* Nâng cao lên */
    transform: translate(-50%, -50%) scale(0);
    font-size: 40px; font-weight: 900; font-style: italic;
    color: rgba(255, 255, 255, 0.95);
    -webkit-text-stroke: 1.5px #ff4d4d;
    text-shadow: 0 5px 15px rgba(0,0,0,0.4);
    padding: 5px 20px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.5);
    pointer-events: none; /* KHÔNG CẢN TRỞ CLICK/VUỐT */
    z-index: 100;
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s;
}
#combo-display.combo-show {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

/* VẬT PHẨM */
.boosters { display: flex; justify-content: space-between; margin-top: 15px; gap: 5px; }
.booster-btn {
    background: #fff; border: 2px solid #ccc; border-radius: 10px;
    padding: 8px 5px; font-weight: bold; cursor: pointer;
    position: relative; transition: 0.2s; flex: 1; font-size: 13px;
}
.booster-btn.active-booster {
    border-color: #ff4d4d; background: #ffe6e6; transform: scale(1.05);
    box-shadow: 0 0 10px rgba(255, 77, 77, 0.5);
}
.badge {
    position: absolute; top: -8px; right: -8px;
    background: #ff4d4d; color: white; border-radius: 50%;
    padding: 2px 6px; font-size: 12px;
}

.reset-btn {
    margin-top: 15px; width: 100%; padding: 12px; border-radius: 10px;
    border: none; background: #555; color: white; font-weight: bold; cursor: pointer;
}
#message { margin-top: 10px; font-size: 16px; font-weight: bold; height: 24px; color: #d32f2f;}

@keyframes pulse { 0% { transform: scale(0.95); } 100% { transform: scale(1.05); } }
@keyframes spin { 100% { transform: rotate(360deg); } }