/* Menggunakan font Inter sebagai default */
body, html {
    font-family: 'Inter', sans-serif;
    background-color: #111827; /* bg-gray-900 */
    color: #d1d5db; /* text-gray-300 */
    /* (DIUBAH) Overflow diatur per halaman */
    overflow-x: hidden; 
    height: 100%;
}

/* Khusus untuk index.html, sembunyikan overflow */
#home {
    overflow: hidden;
}

/* (DIUBAH) Sembunyikan body di awal untuk mencegah FOUC (Flash of Unstyled Content) */
body.hidden-on-load {
    opacity: 0;
    visibility: hidden;
    /* (PERBAIKAN UTAMA) 
      - Transisi opacity ditunda 0.3s (menunggu overlay fade out)
      - Transisi visibility juga ditunda 0.3s
    */
    transition: opacity 0.3s ease-in-out 0.3s, visibility 0s 0.3s;
}

/* (DIUBAH) Kelas untuk menampilkan body setelah siap */
body.loaded {
    opacity: 1;
    visibility: visible;
}

/* Efek latar belakang gradien halus di hero section */
.hero-bg {
    background: radial-gradient(circle at 50% 50%, rgba(31, 41, 55, 0.5), #111827 70%);
    position: relative;
    overflow: hidden; /* Untuk scanlines */
}

/* Font game untuk judul */
.font-game {
    font-family: 'Press Start 2P', cursive;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Efek glow untuk teks */
.text-glow, .nav-link.active {
    color: #a3e635;
    text-shadow: 0 0 10px #a3e635, 0 0 20px #a3e635; /* lime-400 */
}

/* Animasi kursor berkedip */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
.blinking-cursor {
    animation: blink 1s step-end infinite;
    color: #a3e635; /* lime-400 */
}

/* Animasi tombol berdenyut */
@keyframes pulse-glow {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 15px #a3e635, 0 0 25px #a3e635;
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 25px #a3e635, 0 0 40px #a3e635;
    }
}
.pulse-button {
    animation: pulse-glow 2s infinite;
}

/* Efek Scanlines */
.hero-bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(
        rgba(31, 41, 55, 0.1) 1px, 
        transparent 1px
    );
    background-size: 100% 3px;
    opacity: 0.3;
    pointer-events: none;
    z-index: 1;
}

/* Styling untuk Parallax Layer */
.parallax-layer {
    will-change: transform;
    position: absolute;
    z-index: 2; /* Di atas scanlines, di bawah konten */
}

/* Styling untuk Modal Proyek */
.modal {
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal-content {
    transition: transform 0.3s ease;
}
/* Fix untuk pixel art agar tidak blur saat di-scaling */
.pixel-art {
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-crisp-edges;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* (DIUBAH) Gaya Avatar JRPG Classic - Dibuat lebih pixelated */
.jrpg-avatar-container {
    position: relative;
    width: 176px; /* Ukuran dasar */
    height: 176px;
    margin: auto;
    margin-bottom: 2rem;
    transform: scale(1);
    /* (DIUBAH) Transisi disederhanakan */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer; 
    z-index: 10;
    
    /* (BARU) Bingkai luar - style pixel art */
    background-color: #3f3f46; /* (zinc-700) Warna bingkai utama */
    padding: 4px; /* Ruang untuk bingkai dalam */
    border-radius: 2px; /* Sedikit rounded, tapi masih kotak */
    
    /* (BARU) Efek bevel pixel art (terang di atas/kiri, gelap di bawah/kanan) */
    border-top: 2px solid #71717a; /* (zinc-500) Bevel terang */
    border-left: 2px solid #71717a; /* (zinc-500) Bevel terang */
    border-bottom: 2px solid #27272a; /* (zinc-800) Bevel gelap */
    border-right: 2px solid #27272a; /* (zinc-800) Bevel gelap */
    
    /* (BARU) Drop shadow pixelated */
    box-shadow: 0 4px 0 #18181b; /* (zinc-900) */
}

.jrpg-avatar-container:hover {
    /* (DIUBAH) Efek hover JRPG, sedikit terangkat */
    transform: scale(1.05) translateY(-2px);
    /* (DIUBAH) Ganti drop shadow saat hover */
    box-shadow: 0 6px 0 #18181b; 
}

/* (DIUBAH) Gaya gambar avatar itu sendiri */
.jrpg-avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    
    /* (DIUBAH) Bingkai dalam (menggantikan border lime/emerald) */
    /* Ini adalah bingkai di sekeliling gambar, di dalam padding container */
    /* (PERUBAHAN) Diubah ke warna hijau agar serasi dengan tema */
    border: 2px solid #365314; /* (lime-900) Garis batas dalam (hijau) */
    
    /* (DIUBAH) Efek bevel inset untuk gambar (menggantikan shadow lama) */
    box-shadow: 
        inset 0 0 0 2px #65a30d; /* (lime-700) Garis dalam kedua (hijau) */
    
    /* (DIUBAH) Hapus transisi lama */
    transition: all 0.1s ease-in-out; 
    border-radius: 1px; /* Sedikit rounded di dalam */
}

.jrpg-avatar-container:hover .jrpg-avatar-image {
    /* (DIUBAH) Ganti warna border dalam saat hover agar serasi dengan lime */
    /* (PERUBAHAN) Dibuat lebih cerah dan bersinar */
    border-color: #a3e635; /* (lime-400) */
    box-shadow: 
        inset 0 0 0 2px #a3e635, /* (lime-400) */
        inset 0 0 10px #a3e635; /* (BARU) Efek glow neon */
}

/* (DIUBAH) Styling untuk Page/Layar Game */
.game-section {
    /* (DIUBAH) Transisi tidak lagi diperlukan */
    /* (DIUBAH) Padding responsif */
    padding-top: 4rem; /* py-16 */
    padding-bottom: 4rem; /* py-16 */
    min-height: calc(100vh - 160px); /* Kalkulasi tinggi layar dikurangi header & footer */
    /* (DIHAPUS) overflow-y: auto; Dihapus karena 'main' yang akan scroll */
}
@media (min-width: 768px) { /* md: */
    .game-section {
        padding-top: 6rem; /* md:py-24 */
        padding-bottom: 6rem; /* md:py-24 */
    }
}


/* Wrapper untuk area game utama */
#mainGameArea {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

main { /* (DIUBAH) Menggantikan #pageContentContainer */
    flex-grow: 1; /* Ambil sisa ruang */
    position: relative; 
    overflow-y: auto; /* (PERBAIKAN UTAMA) Diubah dari 'hidden' menjadi 'auto' */
}

/* (DIUBAH) EFEK TRANSISI HALAMAN */
.page-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000000; /* Hitam pekat ala RPG */
    z-index: 9999;
    opacity: 1; /* Mulai dalam keadaan terlihat (hitam) */
    pointer-events: none; /* Tidak bisa diklik */
    /* (DIUBAH) Durasi total fade-out overlay adalah 0.5s */
    transition: opacity 0.5s ease-in-out; 
}

/* (BARU) Kelas untuk fade out (saat halaman selesai dimuat) */
.page-transition-overlay.fade-out {
    opacity: 0;
}

/* (BARU) Kelas untuk fade in (saat halaman akan ditinggalkan) */
.page-transition-overlay.fade-in {
    opacity: 1;
    pointer-events: auto; /* Halangi klik saat transisi keluar */
}

/* (BARU) Responsif untuk Avatar & Hero Text di index.html */
@media (max-width: 640px) { /* sm: */
    .jrpg-avatar-container {
        width: 144px; /* Kecilkan di mobile */
        height: 144px;
        margin-bottom: 1.5rem;
    }
    /* Kecilkan juga font hero di mobile */
    #home h1, #home h2 {
        font-size: 2.25rem; /* 36px */
        line-height: 2.5rem;
    }
    #home p {
        font-size: 1rem; /* 16px */
        line-height: 1.75rem;
        margin-bottom: 3rem;
    }
    #home .pulse-button {
        font-size: 0.875rem; /* 14px */
        padding: 0.75rem 1.5rem;
    }
}

/* --- (BARU) Navigasi Tembak --- */

/* Sembunyikan kursor default di area game (bukan di index) */
#mainGameArea {
    /* (DIUBAH) Tambahkan cursor: none */
    cursor: none;
}

/* Kursor crosshair kustom */
#crosshair {
    position: fixed;
    width: 24px;
    height: 24px;
    border: 2px solid #a3e635; /* lime-400 */
    border-radius: 50%;
    z-index: 10000;
    pointer-events: none; /* Klik tembus */
    transform: translate(-50%, -50%); /* Pusatkan di kursor */
    transition: transform 0.05s ease-out; /* Gerakan halus */
    box-shadow: 0 0 12px #a3e635;
    background: rgba(163, 230, 53, 0.1);
}
/* Crosshair '+' di dalam */
#crosshair::before,
#crosshair::after {
    content: '';
    position: absolute;
    background-color: #a3e635; /* lime-400 */
    box-shadow: 0 0 5px #a3e635;
}
#crosshair::before { /* Garis vertikal */
    width: 2px;
    height: 8px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
#crosshair::after { /* Garis horizontal */
    width: 8px;
    height: 2px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
/* Sembunyikan crosshair saat di luar jendela */
body:not(:hover) #crosshair {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Target Navigasi */
.nav-target {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9000;
    padding: 1rem;
    background-color: rgba(163, 230, 53, 0.1); /* lime-400/10 */
    border: 2px solid #a3e635; /* lime-400 */
    border-radius: 8px;
    color: #a3e635; /* lime-400 */
    cursor: none; /* Tetap tersembunyi */
    transition: all 0.2s ease;
    box-shadow: 0 0 15px rgba(163, 230, 53, 0.3);
    image-rendering: pixelated; /* Jaga ikon tetap pixelated */
}
.nav-target-prev {
    left: 2rem;
}
.nav-target-next {
    right: 2rem;
}

/* Kelas 'sighted' ditambahkan oleh JS saat crosshair di atas target */
.nav-target.sighted {
    background-color: rgba(163, 230, 53, 0.3); /* lime-400/30 */
    transform: translateY(-50%) scale(1.15);
    box-shadow: 0 0 30px rgba(163, 230, 53, 0.8);
    color: #fff;
}




/* Responsif untuk target di mobile */
@media (max-width: 768px) {
    .nav-target {
        padding: 0.75rem;
        /* Pindahkan ke bawah agar tidak menutupi konten mobile */
        top: auto;
        bottom: 1.5rem; 
        transform: translateY(0);
    }
    .nav-target-prev {
        left: 1.5rem;
    }
    .nav-target-next {
        right: 1.5rem;
    }
    /* Sembunyikan crosshair di mobile (mengandalkan sentuhan) */
    #crosshair {
        display: none; 
    }
    /* Tampilkan kursor/input sentuh normal di mobile */
    #mainGameArea {
        cursor: auto; 
    }
}