body {
    font-family: 'Quicksand', sans-serif;
    touch-action: manipulation;
    background-color: #fdfaf4; /* bg-yellow-50 */
    color: #3f3c3a; /* text-gray-800 */
}

/* Game Styles */
.pit {
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
    position: relative;
}
.pit.mandarin {
    box-shadow: inset 0 4px 8px rgba(0,0,0,0.3);
}
.pit.active-turn:hover {
    transform: translateY(-5px) scale(1.05);
    cursor: pointer;
    border-color: #f59e0b; /* border-yellow-500 */
}
.stone {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: #a16207; /* amber-700 */
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    transition: all 0.2s ease-in-out;
}
/* Updated highlight animation for nav and player turns */
.highlight {
    animation: pulse-text 1.5s infinite;
}
@keyframes pulse-text {
    0%, 100% { 
        text-shadow: 0 0 5px rgba(251, 191, 36, 0.7);
        color: #fef08a; /* yellow-200 */
    }
    50% { 
        text-shadow: 0 0 20px rgba(251, 191, 36, 0);
        color: white;
    }
}
.sowing-stone { animation: pop 0.3s ease-out; }
@keyframes pop {
    0% { transform: scale(0.5); opacity: 0; }
    70% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
.sow-highlight { background-color: #fef3c7 !important; border-color: #fcd34d !important; }
.pit-selected { border-color: #3b82f6 !important; transform: translateY(-5px) scale(1.05); }
.board-flipped { transform: rotate(180deg); }
.board-flipped .pit,
.board-flipped .player-info,
.board-flipped #status { transform: rotate(-180deg); }
.modal-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: 40; }
.modal-content { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 50; }

/* Article & Content Styles */
.content-section {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}
.content-section h1 {
    font-size: 2.25rem; /* text-4xl */
    font-weight: 700; /* font-bold */
    color: #92400e; /* text-yellow-800 */
    margin-bottom: 2rem;
}
.content-section h2 {
    font-size: 1.75rem; /* text-2xl */
    font-weight: 700; /* font-bold */
    color: #92400e; /* text-yellow-800 */
    margin-bottom: 1rem;
}
.content-section h3 {
    font-size: 1.5rem; /* text-xl */
    font-weight: 700; /* font-bold */
    color: #b45309; /* text-yellow-700 */
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}
.content-section p, .content-section li {
    font-size: 1.125rem; /* text-lg */
    line-height: 1.7;
    margin-bottom: 1.25rem;
    color: #4b5563; /* text-gray-600 */
}
.content-section ul {
    list-style-type: disc;
    padding-left: 2rem;
}
.content-section a {
    color: #d97706; /* text-yellow-600 */
    text-decoration: underline;
}
.content-section a:hover {
    color: #92400e; /* text-yellow-800 */
}

/* Add a class to style content that comes from Firestore */
.firestore-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.pit {
            transition: all 0.3s ease;
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
            position: relative;
        }
        .pit.mandarin {
            box-shadow: inset 0 4px 8px rgba(0,0,0,0.3);
        }
        .pit.active-turn:hover {
            transform: translateY(-5px) scale(1.05);
            cursor: pointer;
            border-color: #f59e0b; /* amber-500 */
        }
        .stone {
            width: 1rem;
            height: 1rem;
            border-radius: 50%;
            background-color: #a16207; /* yellow-700 */
            box-shadow: 0 1px 3px rgba(0,0,0,0.5);
            transition: all 0.2s ease-in-out;
        }
        
        /* NÂNG CẤP: Hiệu ứng viền nhấp nháy cho lượt chơi */
        .player-info-box {
            transition: all 0.3s ease;
            border: 2px solid transparent; /* Viền trong suốt mặc định */
        }
        .highlight {
            animation: pulse-border 2s infinite;
        }
        @keyframes pulse-border {
            0% {
                box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7); /* amber-500 with 70% opacity */
            }
            70% {
                box-shadow: 0 0 0 10px rgba(245, 158, 11, 0); /* transparent */
            }
            100% {
                box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); /* transparent */
            }
        }
        
        .sowing-stone { animation: pop 0.3s ease-out; }
        @keyframes pop {
            0% { transform: scale(0.5); opacity: 0; }
            70% { transform: scale(1.2); opacity: 1; }
            100% { transform: scale(1); opacity: 1; }
        }
        .sow-highlight { background-color: #fef3c7 !important; border-color: #fcd34d !important; }
        .pit-selected { border-color: #3b82f6 !important; transform: translateY(-5px) scale(1.05); }
        .board-flipped { transform: rotate(180deg); }
        .board-flipped .player-info,
        .board-flipped #status { transform: rotate(-180deg); }
        .modal-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: 90; }
        .modal-content { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 100; }