/* CSS ini HANYA berlaku untuk game TKJ Typer */

/* Layar Awal (Spesifik) */
#start-screen h1, #level-select-screen h2 {
    color: var(--accent-color);
    margin-top: 0;
}
#name-input {
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem;
    padding: 10px 15px;
    width: 80%;
    border-radius: 8px;
    border: 2px solid var(--grid-border);
    background-color: #444;
    color: var(--text-color);
    margin-top: 10px;
}
#submit-button {
     background-color: var(--score-color);
}
.button-secondary {
    background-color: #555 !important;
    color: var(--text-color) !important;
}

/* Layar Pilih Level */
.level-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 30px 0;
}
.level-options .button {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 0;
}
.level-options .button strong {
    font-size: 1.3rem;
}
.level-options .button span {
    font-size: 0.9rem;
    font-weight: 400;
}


/* Layar Game */
#hud {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 20px;
}
#wpm { color: var(--accent-color); }
#accuracy { color: var(--score-color); }

/* Area Mengetik */
.typing-area {
    padding: 20px 0;
}

#text-display-container {
    background-color: #111;
    border: 2px solid var(--grid-border);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    height: 150px; /* Tinggi tetap */
    overflow-y: auto; /* Bisa di-scroll jika panjang */
    text-align: left;
}

#text-display {
    font-size: 1.5rem;
    line-height: 2.2rem;
    font-family: 'Courier New', Courier, monospace;
    
    /* Ini membuat kata-kata jadi rapi */
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Jarak antar kata */
}

/* Styling untuk setiap kata (span) */
#text-display span {
    padding: 2px 0;
    transition: background-color 0.1s;
}

/* Kata yang sedang aktif */
#text-display span.current {
    background-color: var(--grid-border);
    border-radius: 4px;
}

/* Kata yang sudah diketik benar */
#text-display span.correct {
    color: var(--plus-color); /* Hijau mint */
}

/* Kata yang diketik salah */
#text-display span.incorrect {
    color: var(--minus-color); /* Merah */
    text-decoration: wavy underline;
}


#typing-input {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.5rem;
    padding: 15px;
    width: 90%;
    max-width: 90%;
    border-radius: 8px;
    border: 3px solid var(--grid-border);
    background-color: #333;
    color: var(--text-color);
    text-align: left; /* Ubah ke kiri */
    transition: all 0.1s ease-out;
}
#typing-input:focus {
    outline: none;
    border-color: var(--accent-color);
}

/* Layar Akhir (Skor) */
#final-score-title {
    font-size: 2.5rem;
    color: var(--score-color);
}
#end-screen .promo-text {
    font-size: 1.1rem;
    margin-top: 20px;
    margin-bottom: 10px;
}
#end-screen .promo-text a {
    text-decoration: none;
    color: var(--accent-color);
    font-weight: 700;
}

/* Grid untuk statistik WPM/Akurasi */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    background-color: #333;
    padding: 20px;
    border-radius: 10px;
    margin-top: 20px;
    font-size: 1.2rem;
}
.stats-grid div:nth-child(odd) { /* Label (WPM, Akurasi) */
    text-align: right;
    font-weight: 700;
    color: #ccc;
}
.stats-grid div:nth-child(even) { /* Nilai (0, 100%) */
    text-align: left;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--score-color);
}