/* style.css */
body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    font-family: sans-serif;
    background-color: #263238; /* Dark Blue Grey */
    color: white;
    margin: 0;
    padding-top: 10px;
    overflow: hidden;
    perspective: 1200px; /* Tingkatkan perspektif */
}

.game-wrapper {
    position: relative;
    margin-bottom: 15px; /* Jarak ke UI bawah */
}

canvas {
    border: 3px solid #78909c; /* Blue Grey Border */
    background-color: #eceff1; /* Light Blue Grey BG */
    display: block;
    /* Efek Rotasi Miring Y-axis */
    transform: rotateY(20deg); /* Lebih miring */
    box-shadow: 15px 10px 30px rgba(0, 0, 0, 0.6);
    cursor: default;
}

.status {
    display: flex;
    justify-content: space-between;
    width: 90%;
    max-width: 600px;
    margin: 10px 0 5px 0; /* Kurangi margin bawah */
    padding: 0 10px;
    box-sizing: border-box;
}
.status-player, .status-enemy { width: 48%; text-align: center; }
.status-enemy { text-align: right;}
.hp-bar { width: 100%; max-width: 180px; height: 16px; background-color: #e0e0e0; border: 1px solid #aaa; border-radius: 5px; overflow: hidden; margin: 3px 0; display: inline-block; }
.status-enemy .hp-bar { margin-left: auto; }
.hp-fill { height: 100%; background-color: #66bb6a; width: 100%; transition: width 0.3s ease-out; border-radius: 3px 0 0 3px; } /* Player Green */
.hp-fill.enemy { background-color: #ef5350; } /* Enemy Red */
.status-weapon { font-size: 0.85em; color: #cfd8dc; margin-top: 2px; }


/* --- Weapon Selection --- */
.weapon-select {
     margin-bottom: 15px;
     text-align: center;
}
.weapon-select span { margin-right: 10px; font-weight: bold;}
.weapon-button {
     padding: 8px 15px;
     font-size: 0.9em;
     margin: 0 5px;
     cursor: pointer;
     border: 1px solid #90a4ae;
     border-radius: 5px;
     background-color: #546e7a;
     color: white;
     transition: background-color 0.2s, border-color 0.2s;
}
.weapon-button:hover {
     background-color: #78909c;
}
.weapon-button.active {
     background-color: #ffb74d; /* Oranye untuk aktif */
     color: #333;
     border-color: #ffa726;
     font-weight: bold;
}

/* --- Controls --- */
.controls {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;
}
.move-buttons { display: flex; margin-right: 30px; }
.control-button { padding: 15px 20px; font-size: 1.5em; margin: 0 8px; cursor: pointer; border: none; border-radius: 50%; background-color: #455a64; color: white; box-shadow: 0 4px 8px rgba(0,0,0,0.3); transition: background-color 0.2s, transform 0.1s; }
.control-button:active { background-color: #607d8b; transform: scale(0.95); }
.control-button:disabled { background-color: #9e9e9e; cursor: not-allowed; opacity: 0.6; }
#attackButton { background-color: #d84315; border-radius: 10px; padding: 20px 30px; font-weight: bold; } /* Deep Orange */
#attackButton:active { background-color: #ff5722; }


/* --- Game Over Screen --- */
.game-over { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0, 0.75); display: none; flex-direction: column; justify-content: center; align-items: center; z-index: 1000; color: white; text-align: center; }
#gameOverMessage { font-size: 2em; color: #ffc107; font-weight: bold; text-shadow: 2px 2px 4px black; margin-bottom: 20px;}
#playAgainButton { padding: 15px 30px; font-size: 1.2em; background-color: #039be5; color: white; border: none; border-radius: 8px; cursor: pointer; transition: background-color 0.3s; } /* Light Blue */
#playAgainButton:hover { background-color: #29b6f6; }