body {
        background: url('../images/background.png') center center/cover no-repeat fixed;
        height: 100vh;
        overflow-x: hidden;
        user-select: none;
        font-family: 'Sarabun', sans-serif;
    }

    #popcat {
        width: 50vw;
        max-width: 500px;
        transition: transform 0.15s ease;
        cursor: pointer;
    }

    #counter {
        font-size: clamp(1rem, 4vw, 1.6rem);
        padding: 0.8rem 2rem;
        transition: transform 0.2s ease;
    }

    #mode {
        font-size: clamp(1rem, 3vw, 1.3rem);
    }

    .counter-bounce {
        animation: counterBounce 0.3s ease;
    }

    @keyframes counterBounce {
        0% {
            transform: translateY(0);
        }

        30% {
            transform: translateY(-10px) scale(1.2);
        }

        60% {
            transform: translateY(0) scale(1);
        }

        100% {
            transform: translateY(0);
        }
    }

    .rounded-top-4 {
        border-radius: var(--bs-border-radius-xl) !important;
        margin-bottom: 1rem;
    }

    @media (max-width: 576px) {
        .custom-header {
            flex-direction: unset;
            margin-top: 0rem;
            width: 100%;
            justify-content: center;
        }

        .header-text {
            margin-top: 4rem !important;
        }

        #popcat {
            width: 130vw !important;
            max-width: 500px !important;
            transition: transform 0.15s ease;
            cursor: pointer;
        }
    }

    img {
        -webkit-user-drag: none;
        -webkit-touch-callout: none;
        touch-action: manipulation;
    }

    .popcat-img {
        width: 250px;
        cursor: pointer;
        transition: transform 0.1s ease-in-out;
        user-select: none;
        touch-action: manipulation;
        /* สำคัญมากในมือถือ */
    }

    #popcat {
        touch-action: manipulation;
        user-select: none;
    }

    /* พื้นที่แสดงพลุแบบโปร่งใส */
    #fireworks-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        pointer-events: none;
        background: transparent;
    }

    canvas#fireworks {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    body {
        overflow-x: hidden;
    }

    /* ปุ่ม toggle ด้านขวาแบบ vertical bar */
    #toggleBtn {
        position: fixed;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        width: 50px;
        height: 120px;
        background-color: #d186d6;
        border: none;
        border-radius: 10px 0 0 10px;
        cursor: pointer;
        z-index: 1050;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.3s, transform 0.2s;
    }

    #toggleBtn:hover {
        background-color: #b159b0;
        transform: translateY(-50%) scale(1.05);
    }

    #toggleBtn i {
        font-size: 2rem;
        /* ขนาดลูกศร */
        color: white;
    }

    /* panel ซ่อนอยู่ด้านซ้าย */
    #sidePanel {
        position: fixed;
        top: 0;
        left: -300px;
        width: 300px;
        height: 100%;
        background-color: #fff;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);
        transition: left 0.3s ease;
        z-index: 1060;
        padding: 20px;
        overflow-y: auto;
    }

    #sidePanel.open {
        left: 0;
    }

    .app-item {
        display: flex;
        align-items: center;
        padding: 10px 5px;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.2s;
    }

    .app-item:hover {
        background-color: #e2e6ea;
    }

    .app-item img {
        width: 30px;
        height: 30px;
        margin-right: 10px;
    }

    /* backdrop ด้านหลัง */
    #backdrop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: none;
        z-index: 1055;
    }

    #backdrop.show {
        display: block;
    }

    .modal {
        z-index: 2000;
        /* สูงกว่า sidebar */
    }

    .sidebar {
        z-index: 1000;
        /* ต่ำกว่า modal */
    }

    .app-item img {
        width: 45px;
        /* กำหนดความกว้าง */
        height: 45px;
        /* กำหนดความสูง */
        object-fit: cover;
        /* ตัดขอบส่วนเกินให้พอดี */
        display: block;
    }