:root {
    --bg-green-main: #7aef8e;
    --bg-green-sheet: #63c978;
    --bg-dark-card: #3a3b3a;
    --bg-dark-green: #486a54;
    --nav-bg: #2d7a42; /* Warna papan tombol bawah lebih gelap dari sheet matches */
    --text-black: #111;
    --text-white: #fff;
    --win-green: #73f089;
    --loss-red: #ff5c5c;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Plus Jakarta Sans', sans-serif; -webkit-tap-highlight-color: transparent; }

body { background-color: #f0f0f0; display: flex; justify-content: center; min-height: 100vh; overflow-x: hidden; }

/* Trik agar tampilan PC menyerupai layar HP ideal */
.app-container {
    width: 100%;
    max-width: 420px;
    background-color: var(--bg-green-main);
    height: 100dvh; /* Paksa penuh 100% layar HP aktual */
    overscroll-behavior-y: none;
    position: relative;
    box-shadow: 0 0 40px rgba(0,0,0,0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Navigasi Bawah (Pil Transparan) */
.bottom-nav {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
    height: 70px;
    background: var(--nav-bg);
    backdrop-filter: blur(10px);
    border-radius: 40px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 1000;
    padding: 0 20px;
}

/* Bentuk default semua menu bawah */
.nav-item { 
    color: var(--text-white); 
    font-size: 24px; 
    cursor: pointer; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    width: 50px; 
    height: 50px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    border-radius: 50%;
}

/* Saat menu Pesan / Profil Sedang Aktif (Naik & Hijau Hitam) */
.nav-item.active:not(.nav-center) {
    background-color: var(--bg-green-main);
    color: var(--text-black);
    transform: translateY(-15px); /* Sedikit terangkat */
    box-shadow: 0 10px 15px rgba(0,0,0,0.2);
}

.nav-center { position: relative; }

/* Bentuk Dasar Tombol Ratu (Crown) */
.crown-btn {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    position: absolute;
    top: -45px; /* Posisi tetap di atas papan */
    left: -32.5px;
    transition: all 0.4s ease;
}

/* KONDISI 1: Saat Home AKTIF */
.nav-center.active .crown-btn {
    background-color: var(--bg-green-main); /* Punya lingkaran hijau */
    color: var(--text-black); /* Ratu Hitam */
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    animation: none;
}

/* KONDISI 2: Saat Home TIDAK AKTIF (Orang di menu lain) */
.nav-center:not(.active) .crown-btn {
    background-color: transparent; /* Lingkaran Hijau Hilang */
    color: var(--text-white); /* Ratu Putih */
    box-shadow: none;
    animation: panggil-kembali 2s infinite ease-in-out; /* Animasi memanggil */
}

/* Animasi untuk memaksa/menarik perhatian user kembali ke menu Home */
@keyframes panggil-kembali {
    0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
    50% { transform: scale(1.15) translateY(-5px); filter: drop-shadow(0 10px 15px rgba(255,255,255,0.6)); }
    100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
}

#app-mount { flex: 1; display: flex; flex-direction: column; overflow-y: auto; padding-bottom: 90px; }