body {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: white;
    user-select: none; /* ป้องกันการคลุมดำตัวหนังสือ */
}

.game-container {
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.title {
    margin-top: 0;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.score-board {
    font-size: 24px;
    margin-bottom: 15px;
    position: relative;
    height: 40px;
}

.combo-text {
    font-size: 18px;
    color: #ffd700;
    font-weight: bold;
    height: 20px;
    opacity: 0;
    transition: opacity 0.3s;
}

.combo-active {
    opacity: 1;
    animation: bounce 0.5s infinite alternate;
}

/* --- กระดานเกม --- */
.grid {
    /* ปรับขนาดกระดานเล็กน้อยเพื่อให้พอดีกับลูกแก้วขนาดใหม่ */
    width: 576px; /* 72px * 8 columns */
    height: 576px;
    display: flex;
    flex-wrap: wrap;
    /* เปลี่ยนพื้นหลังกระดานให้ดูเหมือนถาดใส่ขนม */
    background-color: rgba(255, 255, 255, 0.15);
    border: 8px solid rgba(255, 255, 255, 0.6);
    border-radius: 15px;
    margin: 0 auto;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.3);
    padding: 4px; /* เพิ่มช่องว่างขอบนิดหน่อย */
}

.marble {
    width: 72px;
    height: 72px;
    box-sizing: border-box;
    cursor: grab;
    display: flex;
    justify-content: center;
    align-items: center;
    /* เพิ่ม perspective เพื่อให้การหมุนดูมีมิติ (ถ้ามี) */
    perspective: 500px;
}

/* --- สีลูกแก้วสไตล์ลูกกวาด (Candy Style) --- */
.marble-shape {
    width: 62px; /* เพิ่มขนาดให้เต็มช่องมากขึ้น */
    height: 62px;
    border-radius: 50%;
    position: relative;
    /* เงาภายนอกให้ดูลอยออกมา และเงาภายในที่ขอบล่างสร้างความลึก */
    box-shadow: 
        3px 5px 8px rgba(0,0,0,0.4), /* เงาตกกระทบพื้น */
        inset 0 -5px 10px rgba(0,0,0,0.2); /* เงาขอบล่าง */
    transition: transform 0.2s, filter 0.2s;
    /* เร่งสีให้สดและสว่างขึ้น */
    filter: saturate(1.3) brightness(1.1);
}

/* สร้างแสงสะท้อนสีขาวที่มุมบนซ้าย (Highlight) */
.marble-shape::after {
    content: '';
    position: absolute;
    top: 6%;
    left: 8%;
    width: 35%;
    height: 25%;
    border-radius: 50%;
    /* ไล่สีขาวแบบโปร่งใส */
    background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 100%);
    filter: blur(1px); /* เบลอขอบแสงนิดหน่อยให้ดูนุ่มนวล */
    transform: rotate(-25deg);
    pointer-events: none; /* เพื่อไม่ให้บังการคลิก */
}

/* เอฟเฟกต์ตอนคลิก */
.marble:active .marble-shape {
    transform: scale(0.95); /* ย่อลงนิดหน่อยเหมือนถูกกด */
    filter: brightness(0.9);
}

/* --- จานสีลูกกวาดรสผลไม้ (Fruit Candy Palette) --- */

/* รสสตรอว์เบอร์รี/เชอร์รี่ (แดงสดฉ่ำ) */
.red .marble-shape { 
    background: radial-gradient(circle at 40% 40%, #ff4d4d 10%, #e60000 50%, #990000 100%);
}

/* รสบลูราสป์เบอร์รี (ฟ้าสดใส) */
.blue .marble-shape { 
    background: radial-gradient(circle at 40% 40%, #4facfe 10%, #00c3ff 50%, #005bea 100%);
}

/* รสแอปเปิ้ลเขียว/มะนาว (เขียวสว่าง) */
.green .marble-shape { 
    background: radial-gradient(circle at 40% 40%, #43e97b 10%, #00f260 50%, #057516 100%);
}

/* รสเลมอน (เหลืองทองใส) */
.yellow .marble-shape { 
    background: radial-gradient(circle at 40% 40%, #fff200 10%, #ffd700 50%, #ffa500 100%);
}

/* รสองุ่น (ม่วงเข้ม) */
.purple .marble-shape { 
    background: radial-gradient(circle at 40% 40%, #e0c3fc 10%, #a86af9 50%, #6a00f4 100%);
}

/* รสส้ม (ส้มจี๊ดจ๊าด) */
.orange .marble-shape { 
    background: radial-gradient(circle at 40% 40%, #ffcf71 10%, #ff9a44 50%, #fc6076 100%);
}


/* --- Item: ระเบิดลูกกวาดสีดำ (Black Licorice Bomb) --- */
.bomb .marble-shape {
    /* พื้นหลังสีดำเข้ม ไล่แสงสีทอง */
    background: radial-gradient(circle at 30% 30%, #555, #1a1a1a);
    border: 3px solid #ffd700; /* ขอบทอง */
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6), inset 0 -5px 15px rgba(0,0,0,0.8);
    position: relative;
    animation: pulse 1.2s infinite ease-in-out;
    filter: saturate(1); /* ไม่ต้องเร่งสีสำหรับระเบิด */
}
/* ปรับไอคอนระเบิดให้ชัดขึ้น */
.bomb .marble-shape::after {
    content: '💣';
    font-size: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    top: 0; left: 0;
    background: none; /* ลบ highlight แบบลูกกวาดออก */
    filter: none;
    transform: none;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* --- Item: ระเบิด --- */
.bomb .marble-shape {
    background: radial-gradient(circle at 30% 30%, #333, #000);
    border: 2px solid gold;
    box-shadow: 0 0 15px gold;
    position: relative;
    animation: pulse 1s infinite;
}
.bomb .marble-shape::after {
    content: '💣';
    font-size: 30px;
    display: block;
    line-height: 55px;
}

/* --- Animations --- */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes bounce {
    from { transform: translateY(0); }
    to { transform: translateY(-5px); }
}

@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.shake-anim {
    animation: shake 0.5s;
}

.instructions {
    margin-top: 20px;
    font-size: 0.9em;
    color: #ddd;
}

/* ... (Code เดิม) ... */

/* เพิ่ม Animation ตอนโดนระเบิดสีทำลาย */
.shockwave .marble-shape {
    animation: shockwave-anim 0.3s ease-out forwards;
}

@keyframes shockwave-anim {
    0% { transform: scale(1); filter: brightness(1.2); }
    50% { transform: scale(1.4); filter: brightness(3) drop-shadow(0 0 10px white); opacity: 1; }
    100% { transform: scale(0); opacity: 0; }
}

/* เพิ่มให้ระเบิดดูขลังขึ้น */
.bomb .marble-shape {
    /* เพิ่มประกายสีรุ้งให้รู้ว่ากินได้ทุกสี */
    background: radial-gradient(circle at 30% 30%, #333, #000);
    border: 3px solid transparent;
    background-clip: padding-box;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.8), inset 0 0 10px #000;
}
.bomb .marble-shape::before {
    /* ขอบสีรุ้งหมุนๆ */
    content: '';
    position: absolute;
    top: -5px; bottom: -5px; left: -5px; right: -5px;
    background: linear-gradient(45deg, red, yellow, green, blue, purple);
    border-radius: 50%;
    z-index: -1;
    animation: spin-rainbow 2s linear infinite;
}

@keyframes spin-rainbow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}