/* Mengimpor font super lucu dari Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@700;900&display=swap');

:root {
    --bg-gradient: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

/* --- PENGATURAN BACKGROUND DINAMIS --- */
body {
    /* Warna default (Menu Utama) */
    --bg-color-1: #ffdeeb;
    --bg-color-2: #cde4ff;

    margin: 0;
    font-family: 'Fredoka One', 'Nunito', 'Comic Sans MS', cursive; 
    
    /* Background gradient lembut bercahaya */
    background: linear-gradient(-45deg, var(--bg-color-1), var(--bg-color-2), #fff6fa, #f0f7ff);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    min-height: 100vh;
    transition: background 0.5s ease; 
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* --- DAFTAR WARNA BACKGROUND TIAP TEMA --- */
.tema-menu { --bg-color-1: #ffdeeb; --bg-color-2: #cde4ff; }
.tema-warna { --bg-color-1: #FFD6A5; --bg-color-2: #9BF6FF; }
.tema-hewan { --bg-color-1: #d4fc79; --bg-color-2: #96e6a1; }
.tema-bentuk { --bg-color-1: #e0c3fc; --bg-color-2: #8ec5fc; }
.tema-tubuh { --bg-color-1: #ffe259; --bg-color-2: #ffa751; }
.tema-kendaraan { --bg-color-1: #a1c4fd; --bg-color-2: #c2e9fb; }
.tema-buah { --bg-color-1: #ff9a9e; --bg-color-2: #fecfef; }
.tema-aktivitas { --bg-color-1: #89f7fe; --bg-color-2: #66a6ff; }
.tema-emosi { --bg-color-1: #fbc2eb; --bg-color-2: #a6c1ee; }
.tema-angka { --bg-color-1: #ffb3ba; --bg-color-2: #ffdfba; }
.tema-huruf { --bg-color-1: #baffc9; --bg-color-2: #bae1ff; }

/* Header yang lebih Playful */
header {
    background: rgba(255, 255, 255, 0.9);
    padding: 15px 20px;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border-bottom: 4px solid #fff;
    border-radius: 0 0 30px 30px; /* Melengkung di bawah */
    margin-bottom: 20px;
}

#main-title {
    flex-grow: 1;
    text-align: center;
    font-size: 2rem;
    margin: 0;
    color: #FF6B6B;
    text-shadow: 2px 2px 0px #FFE66D; /* Efek teks timbul */
    letter-spacing: 2px;
}

#btn-kembali {
    font-size: 2rem;
    background: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    box-shadow: 0 4px 0 #CBD5E0;
    transition: all 0.1s;
    display: flex;
    justify-content: center;
    align-items: center;
}

#btn-kembali:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 #CBD5E0;
}

.hidden { display: none !important; }

/* Grid Area */
.grid-container {
    display: flex;
    flex-wrap: wrap; /* Mengizinkan kartu turun ke baris bawah jika penuh */
    justify-content: center; /* KUNCI UTAMA: Menengahkan semua kartu! */
    gap: 25px; /* Jarak antar kartu */
    padding: 20px 20px 50px 20px;
    max-width: 900px;
    margin: 0 auto; /* Menengahkan container di layar besar */
}

/* KARTU 3D CHUNKY (MAINAN FISIK) */
.card {
    width: 155px; /* Diperbesar agar lega */
    height: 155px; /* Dibuat rasio kotak penuh */
    border-radius: 30px; 
    padding: 15px;
    text-align: center;
    border: 6px solid rgba(255, 255, 255, 0.5); 
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; /* Pisahkan gambar dan judul */
}

.card:active {
    transform: translateY(8px) scale(0.95); 
}

/* Gambar memenuhi layar tanpa batas lingkaran */
.card .emoji-container, .card img {
    width: 110px;
    height: 110px;
    font-size: 6.5rem;
    object-fit: contain; 
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    border-radius: 0;
    margin-bottom: 5px;
    box-shadow: none;
    border: none;
    backdrop-filter: none;
    padding: 0;
    transition: transform 0.3s;
    filter: drop-shadow(0px 8px 6px rgba(0,0,0,0.25)); /* Efek 3D mengambang */
}

.card:hover .emoji-container, .card:hover img {
    transform: scale(1.15) rotate(5deg);
}

.card p {
    font-size: 1.4rem;
    margin: 0;
    color: white;
    letter-spacing: 1px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.4); /* Tulisan tebal lebih jelas dibaca */
    font-weight: 900;
}
/* Style khusus untuk foto asli (hewan, dsb) */
.card img.foto-asli {
    width: 130px;
    height: 105px;
    background-color: white;
    object-fit: cover; /* Cover memastikan bidang terisi tanpa terdistorsi */
    object-position: center;
    border-radius: 14px;
    border: 3px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    filter: none; /* Hilangkan drop-shadow bawaan 3D */
    margin-bottom: 5px;
    margin-top: -5px;
}

/* Tambahan styling untuk kotak khusus yang isinya cuma warna */
.warna-full {
    justify-content: center !important;
}
.warna-full p {
    font-size: 1.8rem;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.4);
}

/* PALET WARNA CERIA UNTUK KARTU (Diterapkan lewat JS) */
.bg-merah { background-color: #FF3333; box-shadow: 0 8px 0 #CC0000; }
.bg-kuning { background-color: #fbff02; box-shadow: 0 8px 0 #CCAA52; }
.bg-hijau { background-color: #02b930; box-shadow: 0 8px 0 #05AA7F; }
.bg-biru { background-color: #0c6cf3; box-shadow: 0 8px 0 #0055CC; }
.bg-ungu { background-color: #6a39c4; box-shadow: 0 8px 0 #8E7DAF; }
.bg-pink { background-color: #f72a7c; box-shadow: 0 8px 0 #CC85A1; }
.bg-oranye { background-color: #FF9F1C; box-shadow: 0 8px 0 #CC7F16; }

/* Tambahan untuk tema warna spesifik */
.bg-cokelat { background-color: #744a3b; box-shadow: 0 8px 0 #5D4037; }
.bg-hitam { background-color: #020202; box-shadow: 0 8px 0 #212121; }
.bg-putih { background-color: #FFFFFF; box-shadow: 0 8px 0 #E0E0E0; }
.bg-abu { background-color: #9E9E9E; box-shadow: 0 8px 0 #757575; }
.bg-emas { background-color: #FFD700; box-shadow: 0 8px 0 #B8860B; }
.bg-perak { background-color: #C0C0C0; box-shadow: 0 8px 0 #A9A9A9; }
.bg-nila { background-color: #4B0082; box-shadow: 0 8px 0 #3b0066; }
.bg-krem { background-color: #FFFDD0; box-shadow: 0 8px 0 #E6E4BA; }

/* Mengakali warna teks pada background cerah agar terbaca */
.bg-putih p, .bg-krem p, .bg-kuning p { 
    color: #444; 
    text-shadow: 1px 1px 2px rgba(255,255,255,0.8); 
}

/* --- TAMBAHAN EFEK SUPER RAME --- */

/* 1. Animasi Kartu Muncul Membal */
@keyframes popIn {
    0% { transform: scale(0); opacity: 0; }
    80% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* 2. Kartu Dibuat Sengaja Miring Selang-Seling (Playful Tilt) */
.card {
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.card:nth-child(odd) {
    transform: rotate(-3deg); /* Kartu ganjil miring kiri */
}

.card:nth-child(even) {
    transform: rotate(3deg); /* Kartu genap miring kanan */
}

/* 3. Efek saat ditekan atau disentuh agar kembali lurus */
.card:active {
    transform: translateY(8px) scale(0.95) rotate(0deg) !important;
}

/* Khusus jika dibuka di Komputer/Laptop (Hover) */
@media (hover: hover) {
    .card:hover {
        transform: translateY(-5px) scale(1.05) rotate(0deg);
        z-index: 10;
        box-shadow: 0 12px 0px rgba(0,0,0,0.1);
    }
}

/* --- ANIMASI KONFETI --- */
.konfeti {
    position: fixed;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    pointer-events: none;
    z-index: 1000;
    animation: meledak 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes meledak {
    0% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
    100% { transform: translate(var(--x), var(--y)) scale(0) rotate(360deg); opacity: 0; }
}