/* --- Core Variables --- */
:root {
    --primary: #FF4757;
    --secondary: #2F3542;
    --success: #2ed573;
    --warning: #ffa502;
}

/* --- Screen Logic --- */
.screen {
    display: none;
    height: 100vh; width: 100%;
    flex-direction: column;
    align-items: center; justify-content: center;
    position: fixed; top: 0; left: 0;
    z-index: 1; pointer-events: none;
}

.screen.active {
    display: flex !important;
    z-index: 10; pointer-events: auto;
    animation: fadeInSlide 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes fadeInSlide {
    0% { opacity: 0; transform: translateY(15px) scale(0.98); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- [NEW] Countdown Overlay Animation (สำหรับเลข 3-2-1) --- */
#countdown-text {
    display: inline-block;
    animation: zoomInOut 1s ease-in-out infinite;
}

@keyframes zoomInOut {
    0% { transform: scale(0.3); opacity: 0; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* --- Card System (Fixed & Shared Structure) --- */
.card {
    width: 100%; 
    aspect-ratio: 3 / 4; /* ล็อคสัดส่วนการ์ดให้เท่ากันเป๊ะทุกใบ */
    perspective: 1000px;
    cursor: pointer;
    touch-action: manipulation;
}

/* ปรับขนาดเล็กพิเศษสำหรับจอมือถือเล็กมาก */
@media (max-width: 400px) {
    .card { min-width: 65px; }
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.card.flipped .card-inner { 
    transform: rotateY(180deg); 
}

.card-back, .card-front {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: white;
    border: 2px solid #ddd;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* รูปหลังการ์ด (ใช้ object-fit: cover เพื่อให้ภาพสุ่มเต็มใบสวยๆ) */
.card-back img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* รูปหน้าการ์ด (คำศัพท์) */
.card-front {
    transform: rotateY(180deg);
}

.card-front img {
    width: 85%;
    height: 85%;
    object-fit: contain; /* โชว์รูปคำศัพท์ครบถ้วนไม่โดนตัดขอบ */
}

/* --- Special States --- */
.matched {
    animation: success-glow 0.8s ease-out forwards;
    pointer-events: none;
}

@keyframes success-glow {
    0% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.1); filter: brightness(1.2) drop-shadow(0 0 15px var(--success)); }
    100% { transform: scale(1); filter: grayscale(100%) opacity(0.5); }
}

.wrong { 
    animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both; 
}

@keyframes shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}

/* --- Custom Styled Buttons --- */
.btn-main {
    background: var(--primary); color: white; font-size: 1.5rem;
    padding: 12px 40px; border-radius: 20px; font-weight: bold;
    border-bottom: 5px solid #b33939 !important;
    box-shadow: 0 10px 20px rgba(255, 71, 87, 0.2);
    transition: all 0.1s;
}

.btn-main:hover { transform: translateY(2px); }
.btn-main:active { 
    transform: translateY(4px) !important;
    border-bottom-width: 0px !important;
    box-shadow: 0 2px 5px rgba(255, 71, 87, 0.2);
}

.btn-play-sound {
    width: 100%; max-width: 300px; background: #1e90ff; color: white;
    font-size: 1.1rem; padding: 12px; border-radius: 15px;
    border-bottom: 5px solid #0984e3; font-weight: bold;
}

/* --- Animations & Utilities --- */
@keyframes popIn { 
    0% { transform: scale(0.5); opacity: 0; } 
    100% { transform: scale(1); opacity: 1; } 
}

.animate-popIn { animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

/* Modal Settings */
.modal.active {
    display: flex !important;
}

/* Scoreboard Scrollbar */
#score-list::-webkit-scrollbar { width: 6px; }
#score-list::-webkit-scrollbar-thumb { background: #cbd5e0; border-radius: 10px; }

/* ตัวเลขเวลากะพริบตอนใกล้หมดเวลา */
.timer-warning {
    color: #FF4757 !important;
    animation: pulse-red 0.5s infinite alternate;
}

@keyframes pulse-red {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(1.2); opacity: 0.8; }
}