/* Pengaturan Dasar */
body { font-family: 'Segoe UI', sans-serif; line-height: 1.6; margin: 0; padding: 0; background-color: #f4f4f4; color: #333; text-align: center; }
header, footer { background: #333; color: #fff; padding: 1rem 15px; position: relative; }
.back-button { position: absolute; top: 50%; left: 15px; transform: translateY(-50%); background-color: #555; color: white; padding: 8px 12px; text-decoration: none; border-radius: 5px; transition: background-color 0.2s; }
.back-button:hover { background-color: #777; }

/* Kontainer Materi dan Tombol */
.materi-container { padding: 15px; max-width: 900px; margin: 20px auto; text-align: left; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.1); border-radius: 8px; }
#materi-level h2 { color: #0056b3; border-bottom: 2px solid #eef; padding-bottom: 5px; font-size: 1.5rem; }
.rumus-box { background: #eef; border-left: 5px solid #007BFF; padding: 15px; margin: 20px 0; border-radius: 5px; overflow-x: auto; }
.cta-button { background-color: #28a745; color: white; padding: 12px 25px; font-size: 1.1rem; text-decoration: none; border-radius: 8px; border: none; cursor: pointer; display: inline-block; margin-top: 20px; }
.cta-button:hover { background-color: #218838; }
.reset-link { color: #888; text-decoration: none; }
.hidden { display: none !important; }

/* Tabel Materi */
.styled-table { border-collapse: collapse; margin: 25px 0; font-size: 0.9em; width: 100%; box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); display: block; overflow-x: auto; }
.styled-table thead tr { background-color: #009879; color: #ffffff; text-align: center; }
.styled-table th, .styled-table td { padding: 12px 15px; white-space: nowrap; }
.styled-table tbody tr { border-bottom: 1px solid #dddddd; }

/* Area Game */
#game-area { padding: 10px; }
#game-area h2 { color: #333; }
.game-wrapper { display: flex; margin: auto; max-width: 900px; justify-content: center; align-items: flex-start; flex-direction: row; gap: 20px; }
#gameCanvas { background: url('https://www.transparenttextures.com/patterns/stardust.png'), #001f3f; border: 3px solid #333; border-radius: 8px; width: 100%; max-width: 600px; height: auto; aspect-ratio: 600 / 500; }
.game-ui { background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); width: 100%; max-width: 280px; text-align: left; box-sizing: border-box; }

/* === PERBAIKAN FINAL HEALTH BAR === */
.hp-bar-container { width: 100%; margin-bottom: 15px; text-align: left; }
.hp-label { font-size: 0.8rem; font-weight: bold; color: #555; display: block; margin-bottom: 4px; }
.hp-bar-outer { width: 100%; background-color: #e9ecef; border-radius: 5px; padding: 3px; border: 1px solid #c5c5c5; box-sizing: border-box; }
.hp-bar {
    min-height: 18px; /* Memberi tinggi minimal agar selalu render */
    background-color: #28a745;
    border-radius: 3px;
    width: 100%;
    transition: width 0.5s ease-in-out;
}
.hp-bar.enemy { background-color: #dc3545; }
/* === AKHIR PERBAIKAN === */

/* UI Game lainnya */
#question-box { background-color: #f8f9fa; border: 1px solid #dee2e6; padding: 15px; margin: 15px 0; border-radius: 5px; min-height: 60px; }
#answer-input { width: calc(100% - 22px); padding: 10px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px; }
#shoot-btn { width: 100%; padding: 12px; background-color: #d9534f; color: white; font-weight: bold; border: none; border-radius: 4px; cursor: pointer; }
#shoot-btn:disabled { background-color: #ccc; cursor: not-allowed; }
#feedback-text { font-weight: bold; min-height: 20px; }
.correct { color: green; }
.incorrect { color: red; }
#result-area h2 { color: #0056b3; }

/* RESPONSIVE DESIGN */
@media (max-width: 960px) {
    .game-wrapper { flex-direction: column; align-items: center; }
    .game-ui { max-width: 600px; }
}
@media (max-width: 768px) {
    .hero h1 { font-size: 2.2rem; }
    #materi-level h2 { font-size: 1.3rem; }
    body { font-size: 16px; }
    .cta-button { padding: 10px 20px; font-size: 1rem; }
}