/* Mengimpor font Poppins dari Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

/* Reset CSS untuk semua elemen */
*{
    margin: 0;          /* Menghapus margin default */
    padding: 0;         /* Menghapus padding default */
    font-family: 'Poppins', sans-serif; /* Mengatur font default */
}

/* Style untuk body halaman */
body{
    display: flex;              /* Menggunakan flexbox untuk layout */
    padding: 0 10px;           /* Padding kiri dan kanan */
    align-items: center;       /* Memusatkan item secara vertikal */
    justify-content: center;   /* Memusatkan item secara horizontal */
    min-height: 100vh;         /* Minimal tinggi viewport */
    background: #5372F0;       /* Warna background biru */
}

/* Container utama untuk konten game */
.container{
    width: 440px;               /* Lebar fixed container */
    border-radius: 7px;         /* Sudut membulat */
    background: #fff;           /* Background putih */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08); /* Bayangan untuk efek depth */
}

/* Style untuk judul h2 dalam container */
.container h2{
    font-size: 25px;           /* Ukuran font */
    font-weight: 500;          /* Ketebalan font medium */
    padding: 16px 25px;        /* Padding atas-bawah dan kiri-kanan */
    border-bottom: 1px solid #ccc; /* Garis bawah abu-abu */
}

/* Container untuk konten utama game */
.container .content{
    margin: 25px 20px 35px;    /* Margin: atas, kiri-kanan, bawah */
}

/* Style untuk area menampilkan kata yang diacak */
.content .word{
    user-select: none;         /* Mencegah user men-select text */
    font-size: 33px;           /* Ukuran font besar */
    font-weight: 500;          /* Ketebalan font medium */
    text-align: center;        /* Teks rata tengah */
    letter-spacing: 24px;      /* Jarak antar huruf yang lebar */
    margin-right: -24px;       /* Kompensasi untuk letter-spacing */
    text-transform: uppercase; /* Mengubah semua huruf menjadi kapital */
}

/* Container untuk detail game (petunjuk dan waktu) */
.content .details{
    margin: 25px 0 20px;       /* Margin: atas, kiri-kanan, bawah */
}

/* Style untuk paragraf dalam details */
.details p{
    font-size: 18px;           /* Ukuran font */
    margin-bottom: 10px;       /* Jarak bawah antar paragraf */
}

/* Style untuk teks bold dalam details */
.details p b{
    font-weight: 500;          /* Ketebalan font medium */
}

/* Style untuk input field tebakan kata */
.content input{
    width: 100%;               /* Lebar penuh container */
    height: 60px;              /* Tinggi input */
    outline: none;             /* Menghapus outline default */
    padding: 0 16px;           /* Padding kiri-kanan */
    font-size: 18px;           /* Ukuran font */
    border-radius: 5px;        /* Sudut membulat */
    border: 1px solid #bfbfbf; /* Border abu-abu tipis */
    box-sizing: border-box;    /* Agar padding tidak menambah lebar */
}

/* Style saat input field dalam state focus */
.content input:focus{
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08); /* Bayangan saat focus */
}

/* Style untuk placeholder saat input focus */
.content input:focus::placeholder{
    color: #aaa;               /* Warna placeholder lebih terang */
}

/* Container untuk tombol-tombol game */
.content .buttons{
    display: flex;              /* Menggunakan flexbox untuk layout tombol */
    margin-top: 20px;          /* Jarak atas dari elemen sebelumnya */
    justify-content: space-between; /* Menyebarkan tombol secara merata */
}

/* Style dasar untuk semua tombol */
.buttons button{
    border: none;              /* Menghapus border default */
    outline: none;             /* Menghapus outline default */
    color: #fff;               /* Warna teks putih */
    cursor: pointer;           /* Mengubah kursor menjadi pointer */
    padding: 15px 0;           /* Padding atas-bawah */
    font-size: 17px;           /* Ukuran font */
    border-radius: 5px;        /* Sudut membulat */
    width: calc(100% / 2 - 8px); /* Lebar tombol (setengah container dikurangi gap) */
    transition: all 0.3s ease; /* Animasi transisi untuk semua property */
}

/* Style saat tombol ditekan (active state) */
.buttons button:active{
    transform: scale(0.97);    /* Efek mengecil sedikit saat ditekan */
}

/* Style khusus untuk tombol refresh/Perbarui Kata */
.buttons .refresh-word{
    background: #6C757D;       /* Warna background abu-abu */
}

/* Style hover untuk tombol refresh */
.buttons .refresh-word:hover{
    background: #5f666d;       /* Warna background lebih gelap saat hover */
}

/* Style khusus untuk tombol check/Cek Kata */
.buttons .check-word{
    background: #5372F0;       /* Warna background biru */
}

/* Style hover untuk tombol check */
.buttons .check-word:hover{
    background: #2c52ed;       /* Warna background lebih gelap saat hover */
}

/* Media query untuk perangkat dengan lebar maksimal 470px (mobile) */
@media screen and (max-width: 470px) {
    /* Penyesuaian judul untuk mobile */
    .container h2{
        font-size: 22px;       /* Ukuran font sedikit lebih kecil */
        padding: 13px 20px;    /* Padding lebih kecil */
    }
    
    /* Penyesuaian area kata untuk mobile */
    .content .word{
        font-size: 30px;       /* Ukuran font lebih kecil */
        letter-spacing: 20px;  /* Jarak huruf lebih kecil */
        margin-right: -20px;   /* Kompensasi letter-spacing yang disesuaikan */
    }
    
    /* Penyesuaian konten utama untuk mobile */
    .container .content{
        margin:  20px 20px 30px; /* Margin lebih kecil */
    }
    
    /* Penyesuaian detail untuk mobile */
    .details p{
        font-size: 16px;       /* Ukuran font lebih kecil */
        margin-bottom: 8px;    /* Jarak bawah lebih kecil */
    }
    
    /* Penyesuaian input field untuk mobile */
    .content input{
        height: 55px;          /* Tinggi lebih kecil */
        font-size: 17px;       /* Ukuran font lebih kecil */
    }
    
    /* Penyesuaian tombol untuk mobile */
    .buttons button{
        padding: 14px 0;       /* Padding lebih kecil */
        font-size: 16px;       /* Ukuran font lebih kecil */
        width: calc(100% / 2 - 7px); /* Lebar disesuaikan dengan gap lebih kecil */
    }
}