/* กำหนดฟอนต์ Prompt ให้กับทั้ง Body */
body {
    font-family: 'Prompt', sans-serif;
    padding-top: 4rem; /* Adjusted for fixed Navbar height */
}
button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
}

/* Custom styles for mobile menu transition */
.mobile-menu {
    transform: translateY(-100%);
    transition: transform 0.3s ease-out;
    top: 4rem; /* Should match body's padding-top or navbar height */
}
.mobile-menu.open {
    transform: translateY(0);
}

/* Styles for Bingo Game */
/* Bingo Table Cells */
#bingo-grid td {
    width: 100%; /* Make width responsive */
    padding-top: 100%; /* Keep aspect ratio 1:1 */
    position: relative; /* For centering content */
    text-align: center;
    vertical-align: middle;
    border: 1px solid #e0e0e0;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease-out;
    user-select: none;
    font-size: 0.7rem; /* Default font size for smallest screens */
    font-weight: 500;
    background-color: #fff; /* Default background */
    color: #333; /* Default text color */
    overflow: hidden; /* Ensure content doesn't spill */
}

/* เพิ่มส่วนนี้ เพื่อให้ span ไม่บัง background ของ td */
#bingo-grid td span {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.1rem;
    background-color: transparent; /* **สำคัญมาก: ทำให้พื้นหลังของ span โปร่งใส** */
    color: inherit; /* ให้ span ใช้สีข้อความของ td */
    transition: color 0.3s ease; /* Transition for text color */
}

#bingo-grid td:hover {
    background-color: #f0f0f0;
    transform: scale(0.98);
}

/* Bingo cell when marked - Use !important and set color for both td and span */
.bingo {
    background-color: #EF6262!important; /* Light Blue for selected - THIS WILL STAY */
    color: #fff !important; /* White text for contrast (for td if no span) */
    font-weight: 600;
    animation: bounceIn 0.3s ease-out;
}

/* IMPORTANT: This targets the span *inside* a bingo-marked td */
/* This is crucial to make the text color change */
.bingo span {
    color: #fff !important; /* Force text inside span to be white when bingo */
}


/* Optional: Different color for actual Bingo line/pattern */
.bingo-line { 
    background-color: #EF6262 !important; /* Red for Bingo line */
    color: #fff !important;
    animation: pulse 0.8s infinite alternate; 
}

/* Make sure text in bingo-line cells is also white */
.bingo-line span {
    color: #fff !important;
}


@keyframes bounceIn {
    0% { transform: scale(0.9); opacity: 0; }
    50% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); }
}

@keyframes pulse {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(1.02); opacity: 0.9; }
}


/* Scratch text style */
.scratch-text {
    color: #f1b022; /* Scratch orange */
    font-weight: 700;
}

/* Responsive adjustments for Bingo cells */
@media (min-width: 320px) { 
    #bingo-grid td {
        font-size: 0.75rem;
    }
}

@media (min-width: 480px) { 
    #bingo-grid td {
        font-size: 0.85rem;
        padding: 0.2rem;
    }
}

@media (min-width: 640px) { 
    #bingo-grid td {
        font-size: 0.95rem;
        padding: 0.25rem;
    }
}

@media (min-width: 768px) { 
    #bingo-grid td {
        font-size: 1rem;
        padding: 0.3rem;
    }
}

@media (min-width: 1024px) { 
    #bingo-grid td {
        font-size: 1.1rem;
        padding: 0.4rem;
    }
}

@media (min-width: 1280px) { 
    #bingo-grid td {
        font-size: 1.2rem;
        padding: 0.5rem;
    }
}