/* ======================================= */
/* 0. GLOBAL WRAPPER & CENTERING (Desktop Base) */
/* ======================================= */

/* Wrapper utama untuk membatasi lebar keseluruhan konten dan menengahkan secara horizontal */
.generator-wrapper {
    /* Lebar maksimum konten keseluruhan 500px pada desktop */
    width: 100%; 
    margin: 0 auto; 
    box-sizing: border-box; /* Memastikan padding tidak menambah lebar total */
}

.generator-container {
    width: 100%;
}

/* ======================================= */
/* 1. FORM INPUT DAN BUTTON */
/* ======================================= */

.line-form {
    text-align: center; 
}

.form-input {
    width: 100%; /* Selalu 100% dari parent form pada mobile */
    padding: 12px 5px;
    border: 2px solid #ced4da;
    border-radius: 5px;
    font-size: 1.1em;
    font-weight: normal;
    color: #dc3545;
    text-align: center;
    display: block; 
    box-sizing: border-box; 
}

.button-group {
    text-align: center;
}

.btn-process, .btn-reset {
    /* Mengubah tombol menjadi blok pada layar sempit */
    display: block; 
    width: 100%;
    
    border: none;
    padding: 10px 25px;
    font-size: 1.05em;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-bottom: 10px; /* Jarak antara tombol pada mobile */
    box-sizing: border-box;
}

/* Warna Tombol */
.btn-process {
    background-color: #1a73e8;
    color: white;
}
.btn-process:hover {
    background-color: #0c5cb2;
}
.btn-reset {
    background-color: #dc3545;
    color: white;
}
.btn-reset:hover {
    background-color: #c82333;
}


/* ======================================= */
/* 2. GRID ANGKA 00-99 */
/* ======================================= */

..grid-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto 30px auto; 
    border: 1px solid #dee2e6;
    border-radius: 5px;
    overflow: hidden;
}

.grid-table td {
    /* Gaya Default (tidak ditandai/kosong) */
    border: 1px solid #e9ecef !important;
    text-align: center;
    font-size: 10px; 
    padding: 4px 1px; 
    font-weight: 600;
    line-height: 1.2;
    background-color: #000; /* PENTING: Latar belakang putih/netral */
    color: #495057;
    transition: background-color 0.2s;
}

/* Kelas khusus untuk angka yang terpilih */
.sponz {
    background-color: #4CAF50 !important; /* Hijau yang menonjol */
    color: white !important;
    font-weight: 800;
}
.sponz1 {
    background-color: #FF9800 !important; 
    color: white !important;
    font-weight: 800;
}

/* ======================================= */
/* 3. TABEL HASIL (RANGKING) */
/* ======================================= */

.result-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px auto 0 auto; 
    border: 1px solid #dee2e6;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.result-table th, .result-table td {
    padding: 8px; /* Padding lebih kecil untuk mobile */
    border: 1px solid #dee2e6;
    vertical-align: middle;
    text-align: center;
}

.table-header {
    background-color: #1a73e8; 
    color: white;
    font-size: 1.1em;
    padding: 12px;
    height: 30px;
}
.table-header h3 {
    margin: 0;
    font-size: 1em;
}

.rank-col {
    width: 35%; /* Dibuat sedikit lebih lebar agar tulisan 'Rangking' muat */
    font-weight: bold;
    background-color: #e6f0ff; 
    border-right: 3px solid #1a73e8 !important;
    text-align: center !important;
}

.angka-result {
font-size: 14px !important;
  word-break: break-word;
  line-height: 1.6 !important;
}

/* Label Rangking & Count tetap */
.rank-label-1 { color: #1a73e8; }
.rank-label-2 { color: #4CAF50; }
.rank-label-3 { color: #FF9800; }
.rank-label-4 { color: #795548; }

.count-label-1, .count-label-2, .count-label-3, .count-label-4 {
    margin-left: 0; /* Hapus margin pada mobile agar lebih rapat */
    font-style: italic;
    display: block; /* Agar angka total berada di baris baru */
    font-size: 0.9em;
}

/* ======================================= */
/* 4. MEDIA QUERIES (Responsivitas) */
/* ======================================= */

/* Perubahan untuk Layar Desktop (Min-width: 768px) */
@media (min-width: 768px) {
    
    /* Tombol kembali sejajar horizontal pada desktop */
    .btn-process, .btn-reset {
        display: inline-block;
        width: auto;
        margin: 0 10px;
    }
    
    /* Kolom Angka Hasil kembali ke tata letak aslinya */
    .angka-result {
        text-align: left;
        font-size: 15px;
        line-height: 1.8;
    }

    /* Padding dan font dikembalikan ke ukuran desktop */
    .grid-table td {
        font-size: 12px;
        padding: 6px 3px;
    }
    
    /* Label Count kembali ke satu baris dengan angka */
    .count-label-1, .count-label-2, .count-label-3, .count-label-4 {
        margin-left: 10px;
        display: inline; 
        font-size: 1em;
    }
}