/* --- Global & Tema Kerajaan (Coklat) --- */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap'); /* Font bergaya pixel art */

body {
    font-family: 'Press Start 2P', cursive;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #3a2a1a; /* Latar belakang coklat sangat gelap */
    color: #f7e7d0; /* Warna teks krem/parchment */
    margin-top: 20px;
    text-shadow: 2px 2px #2b1e11; /* Shadow coklat lebih gelap */
}

h1 {
    color: #ffd700; /* Emas (Tetap) */
    text-shadow: 4px 4px #2b1e11, 0 0 10px #ffea00; /* Shadow lebih kuat */
    letter-spacing: 2px;
    font-size: 2em;
    margin-bottom: 20px;
}

#game-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
    background-color: #5c402a; /* Latar belakang container coklat medium */
    padding: 20px;
    border-radius: 8px;
    border: 3px solid #8c6f5a; /* Border coklat muda */
    box-shadow: 8px 8px #2b1e11; /* Efek 3D */
}

/* --- Papan Permainan --- */
#game-board {
    display: grid;
    grid-template-columns: repeat(12, 60px);
    grid-template-rows: repeat(12, 60px);
    border: 2px solid #8c6f5a; /* Border papan */
    background-color: #5c402a; /* Latar belakang cadangan */
    box-shadow: 4px 4px #2b1e11; /* Efek 3D untuk papan */
    position: relative;
    image-rendering: pixelated;
}

.square {
    width: 60px;
    height: 60px;
    box-sizing: border-box;
    border: 1px solid #ffffff1a; /* Garis grid halus */
    background-size: cover;
    image-rendering: pixelated;
}

/* * CATATAN: Path aset masih sama. 
 * Jika Anda punya aset papan baru (misal: 'wood_light.png'), ganti path di bawah.
 * Jika tidak, warna 'background-color' akan menjadi cadangan.
*/
.square.light {
    background-color: #c8a97e; /* Cadangan: Kayu/Parchment Cerah */
    background-image: url('assets/board_light.png'); 
}
.square.dark {
    background-color: #8c6f5a; /* Cadangan: Kayu/Tanah Gelap */
    background-image: url('assets/board_dark.png'); 
}

/* --- Style Bidak (Pixel Art) --- */
/* (Tidak berubah, masih menggunakan aset dari folder /assets/) */
.piece {
    width: 60px;
    height: 60px;
    box-sizing: border-box;
    
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0; /* Sembunyikan teks di dalam bidak, kita pakai gambar */
    
    position: absolute;  
    cursor: pointer;
    transition: top 0.4s ease-out, left 0.4s ease-out, filter 0.5s ease;
    
    background-size: contain; /* Pastikan gambar bidak pas */
    background-repeat: no-repeat;
    background-position: center;
    image-rendering: pixelated; /* Penting untuk pixel art */

    /* Hapus border-radius, box-shadow lama */
    border: none; 
    box-shadow: none;
    
    z-index: 5;
}

.piece:hover {
    transform: translate(0, -3px) scale(1.1);
    z-index: 10;
}

/* Aset Bidak (Tetap sama) */
.piece.player1.king { background-image: url('assets/player1_king.png'); }
.piece.player1.defense { background-image: url('assets/player1_defense.png'); }
.piece.player1.melee { background-image: url('assets/player1_melee.png'); }
.piece.player1.ranged { background-image: url('assets/player1_ranged.png'); }
.piece.player2.king { background-image: url('assets/player2_king.png'); }
.piece.player2.defense { background-image: url('assets/player2_defense.png'); }
.piece.player2.melee { background-image: url('assets/player2_melee.png'); }
.piece.player2.ranged { background-image: url('assets/player2_ranged.png'); }


.piece.selected {
    transform: translate(0, -5px) scale(1.2);
    box-shadow: 0 0 10px 5px rgba(255, 215, 0, 0.7); /* Glow emas (Tetap) */
    z-index: 20;
}

/* --- Bilah HP (Pixel Art Style) --- */
/* (Tidak berubah) */
.hp-bar-container {
  position: absolute;
  bottom: -8px; /* Tetap di bawah bidak */
  left: 2px;  /* Jarak dari kiri */
  width: 56px;  /* PERBARUI: (Sebelumnya 31px) Dibuat 56px agar pas di bidak 60px */
  height: 4px; /* Tetap */
  background-color: #333;
  border: 1px solid #111;
  border-radius: 0px;
  overflow: hidden;
  box-shadow: 1px 1px #000;
  image-rendering: pixelated;
}
.hp-bar-current {
    height: 100%;
    width: 100%;
    background-color: #00ff00;
    transition: width 0.2s linear;
    image-rendering: pixelated;
}
.hp-bar-current.full { background-color: #00ff00; }
.hp-bar-current.medium { background-color: #ffff00; }
.hp-bar-current.low { background-color: #ff0000; }

/* --- Panel UI (Kerajaan & Pixel Art Coklat) --- */
#ui-panel {
    width: 250px;
    padding: 20px;
    background-color: #6b4f3a; /* Coklat medium-gelap */
    color: #f7e7d0; /* Teks krem */
    border-radius: 8px;
    border: 2px solid #ffd700; /* Border emas (Tetap) */
    box-shadow: 4px 4px #2b1e11; /* Shadow gelap */
    text-align: center;
}

#game-info {
    border-bottom: 2px solid #ffd700; /* Garis bawah emas (Tetap) */
    padding-bottom: 15px;
    margin-bottom: 15px;
}

#game-info h2 {
    font-size: 1.2em;
    color: #e6e6a9; /* Teks agak kekuningan (Tetap) */
}

#turn-display {
    color: #fff;
    font-size: 1.1em;
}

#action-panel {
    margin-top: 20px;
    text-align: center;
}

#action-panel h3 {
    margin-top: 0;
    color: #ffd700; /* Warna emas (Tetap) */
    text-shadow: 2px 2px #2b1e11;
    font-size: 1em;
}
#action-panel p {
    font-size: 1em;
    margin-top: 5px;
    margin-bottom: 15px;
}

/* --- Tombol UI (Pixel Art Style Coklat/Tan) --- */
.ui-button {
    display: block;
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    font-size: 0.9em;
    font-family: 'Press Start 2P', cursive;
    font-weight: bold;
    color: #3a1a00; /* Teks coklat sangat gelap (Tetap) */
    background-color: #d4b483; /* Tombol warna tan/pasir */
    border: 2px outset #e4c493; /* Border 3D tan cerah */
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.1s linear;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 2px 2px #2b1e11; /* Efek shadow pixel */
    image-rendering: pixelated;
}

.ui-button:hover {
    background-color: #e4c493; /* Warna hover tan cerah */
    border: 2px outset #f4d4a3;
    box-shadow: 3px 3px #2b1e11;
    transform: translate(-1px, -1px);
}

.ui-button:active {
    background-color: #c4a473; /* Warna aktif tan gelap */
    border: 2px inset #b49463; /* Efek 'tertekan' */
    transform: translate(1px, 1px);
    box-shadow: 1px 1px #2b1e11;
}

.ui-button:disabled {
    background-color: #777;
    color: #aaa;
    cursor: not-allowed;
    border: 2px outset #999;
    box-shadow: 1px 1px #000;
    transform: none;
}

/* Tombol Akhiri Giliran (Tetap Merah - untuk UX) */
#global-end-turn-btn {
    background-color: #d1222e;
    color: #ffffff;
    border: 2px outset #ff4757;
    box-shadow: 2px 2px #2b1e11;
}
#global-end-turn-btn:hover {
    background-color: #ff4757;
    border: 2px outset #ff6b81;
    box-shadow: 3px 3px #2b1e11;
}
#global-end-turn-btn:active {
    background-color: #a31b25;
    border: 2px inset #991a22;
}

.hidden {
    display: none !important;
}

/* --- EFEK SOROTAN (Tetap Hijau/Merah - untuk UX) --- */
.highlight-move {
    position: relative;
    cursor: cell;
}
.highlight-move::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 255, 0, 0.4);
    animation: pixel-pulse-green 1s infinite alternate;
    pointer-events: none;
    image-rendering: pixelated;
}

.highlight-attack {
    position: relative;
    cursor: crosshair;
}
.highlight-attack::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 0, 0, 0.4);
    animation: pixel-pulse-red 1s infinite alternate;
    pointer-events: none;
    image-rendering: pixelated;
}

@keyframes pixel-pulse-green {
  0% { opacity: 0.4; }
  100% { opacity: 0.8; }
}

@keyframes pixel-pulse-red {
  0% { opacity: 0.4; }
  100% { opacity: 0.8; }
}

/* --- BARU: Panel Detail Kiri --- */
#detail-panel {
    width: 220px; /* Lebar panel baru */
    padding: 20px;
    background-color: #6b4f3a; /* Tema coklat */
    color: #f7e7d0; /* Teks krem */
    border-radius: 8px;
    border: 2px solid #ffd700; /* Border emas */
    box-shadow: 4px 4px #2b1e11; /* Shadow gelap */
    text-align: center;
    image-rendering: pixelated;
}

#detail-panel h2 {
    font-size: 1.2em;
    color: #ffd700;
    text-shadow: 2px 2px #2b1e11;
    margin-top: 0;
    margin-bottom: 15px;
}

#detail-panel h3 {
    font-size: 1.1em;
    color: #ffffff;
    margin-top: 10px;
    margin-bottom: 5px;
    text-transform: uppercase; /* KING, DEFENSE, etc */
}

#detail-panel p {
    font-size: 1em;
    color: #e6e6a9; /* Teks agak kekuningan */
    margin: 8px 0;
    text-align: left; /* Ratakan kiri untuk statistik */
    padding-left: 20px;
}

#detail-panel hr {
    border: none;
    height: 2px;
    background-color: #ffd700;
    margin: 10px 0;
}

/* Kontainer untuk gambar potret */
#detail-image-container {
    width: 100%;
    padding-bottom: 100%; /* Membuat kotak aspek 1:1 */
    position: relative;
    background-color: #3a2a1a; /* Latar belakang gelap */
    border: 2px solid #8c6f5a;
    border-radius: 4px;
    overflow: hidden; /* Sembunyikan jika gambar terlalu besar */
    box-shadow: inset 2px 2px #2b1e11;
}

/* Gambar potretnya sendiri */
#detail-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover; /* Gunakan 'cover' agar memenuhi kotak */
    background-position: center;
    background-repeat: no-repeat;
    image-rendering: pixelated; /* Jaga agar tetap pixelated! */
}

.inactive-piece {
    /* Buat bidak jadi 70% abu-abu dan 60% transparan.
      Ini akan membuat bidak yang aktif terlihat 'pop-out'!
    */
    filter: grayscale(70%) opacity(60%);
    
    /* Animasi transisi yang halus saat giliran berganti */
    transition: filter 0.5s ease;
}

/* Kita juga bisa buat bidak non-aktif tidak bisa di-hover */
.inactive-piece:hover {
    transform: none; /* Hapus efek 'terangkat' */
}

.screen-overlay {
    position: fixed; /* Menutupi seluruh layar */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #3a2a1a; /* Latar coklat */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100; /* Tampil di atas segalanya */
}

.menu-box {
    width: 450px;
    padding: 30px;
    background-color: #5c402a; /* Coklat medium */
    border: 3px solid #ffd700; /* Border emas */
    border-radius: 8px;
    box-shadow: 8px 8px #2b1e11;
    text-align: center;
}

.menu-box h1 {
    margin-top: 0;
    font-size: 2em;
}

.menu-box h2 {
    color: #ffd700;
    text-shadow: 2px 2px #2b1e11;
    margin-top: 0;
}

.menu-box p {
    font-size: 1.1em;
    color: #f7e7d0;
}

.menu-box .ui-button {
    margin: 10px auto;
    width: 80%; /* Tombol tidak 100% */
}

.player-status {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 20px;
    background-color: #3a2a1a80;
    border-radius: 4px;
    margin: 15px 0;
}

.player-status span {
    font-size: 1.1em;
    color: #f7e7d0;
    margin: 5px 0;
}

.player-status .connected {
    color: #00ff00; /* Hijau */
    text-shadow: 0 0 5px #00ff00;
}

.error-text {
    color: #ff4757;
    font-weight: bold;
}

/* --- BARU: Tombol Volume --- */
.volume-control {
    position: fixed; /* Selalu tampil di layar */
    bottom: 10px;
    left: 10px;
    background-color: #5c402a;
    padding: 5px 10px;
    border-radius: 8px;
    border: 2px solid #ffd700;
    z-index: 101;
    color: #f7e7d0;
    font-size: 0.8em;
}

.ui-button-small {
    padding: 3px 8px;
    font-size: 0.8em;
    font-family: 'Press Start 2P', cursive;
    color: #3a1a00;
    background-color: #d4b483;
    border: 2px outset #e4c493;
    cursor: pointer;
}
.ui-button-small:active {
    border: 2px inset #b49463;
}

/* --- BARU: Gaya Layar Pemenang --- */
#winner-screen {
    z-index: 110; /* Pastikan ini tampil di atas segalanya */
}

#winner-title {
    color: #ffd700; /* Emas */
    text-shadow: 4px 4px #2b1e11;
    font-size: 1.8em;
}

/* --- BARU: Efek Terkena Serangan --- */
.is-hit {
    /* Menjalankan animasi 'take-hit-flash' selama 0.4 detik */
    animation: take-hit-flash 0.4s ease-out;
    /* Paksa z-index tinggi agar flash terlihat jelas */
    z-index: 20 !important;
}

@keyframes take-hit-flash {
  0%, 100% {
    /* Kembali ke filter normal (akan mewarisi .inactive-piece jika ada) */
    filter: inherit;
    transform: scale(1); /* Kembali ke ukuran normal */
  }
  50% {
    /* Flash merah terang DAN sedikit menciut (efek 'flinch')
      Ini tidak akan merusak .inactive-piece atau .selected
    */
    filter: grayscale(0) opacity(1) brightness(1.7) drop-shadow(0 0 8px red);
    transform: scale(0.9); /* Sedikit menciut */
  }
}