/* ============================================================================
   HEADER ATAS - SATU BARIS (logo + tombol)          file: assets/css/header-atas.css   (v3: nama pemain tampil di HP)
   Dipakai oleh: index.php, kategori.php, library/header-pemain.php, akun.php
   Tujuan: tombol MASUK/DAFTAR (kalau belum masuk) atau nama+saldo+DEPOSIT/
           AKUN SAYA/LOGOUT (kalau sudah masuk) duduk SEBARIS dengan logo.
           Dulu mereka di baris terpisah DI ATAS logo -> header 3 baris/~200px.
   ============================================================================ */
#main-site-header {
    position: fixed; top: 0; left: 0; width: 100%; z-index: 9999;
    display: flex; flex-direction: column;
}
#main-site-header .hp-atas {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; height: 62px; padding: 0 16px; box-sizing: border-box;
    background: linear-gradient(90deg, #1c1338 0%, #17102f 60%, #150e2b 100%);
    border-bottom: 1px solid rgba(145, 158, 248, 0.18);
}
#main-site-header .hp-logo { display: flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
#main-site-header .hp-logo img {
    height: 38px; width: auto; display: block; object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.35));
}
#main-site-header .hp-kanan {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 8px; flex-wrap: nowrap; min-width: 0;
}
#main-site-header .hp-info {
    display: flex; align-items: center; gap: 5px; white-space: nowrap;
    font-size: 12px; font-weight: 700; color: #ffffff;
}
#main-site-header .hp-info i { color: #919ef8; }
#main-site-header .hp-info.hp-saldo,
#main-site-header .hp-info.hp-saldo i { color: #e4ff23; }
#main-site-header .hp-t {
    display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
    padding: 7px 14px; font-size: 11px; font-weight: 800; line-height: 1;
    text-transform: uppercase; text-decoration: none; border-radius: 5px;
    letter-spacing: .3px; box-sizing: border-box;
}
#main-site-header .hp-t:hover { filter: brightness(1.15); }
#main-site-header .hp-utama { background: #e4ff23; color: #14112b; border: 1px solid #f2ff7a; box-shadow: 0 0 10px rgba(228, 255, 35, 0.3); }
#main-site-header .hp-garis { background: transparent; color: #919ef8; border: 1px solid #919ef8; }
#main-site-header .hp-bahaya { background: transparent; color: #ff4d4d; border: 1px solid #ff4d4d; }

/* tinggi cadangan penahan isi halaman; angka aslinya diisi skrip tiap halaman */
.hp-spacer, .header-pemain-spacer { height: 158px; }

/* nama pemain: tampil utuh, kalau kepanjangan dipotong titik-titik */
#main-site-header .hp-nama-teks {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: 700; max-width: 180px;
}

/* BARIS NAMA + SALDO
   - desktop : menempel di kiri tombol (satu baris seperti semula)
   - HP/tablet: turun jadi BARIS KEDUA di bawah logo + DEPOSIT/AKUN/LOGOUT  */
#main-site-header .hp-baris2 {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 8px; flex: 1 1 auto; min-width: 0; order: 1;
}
#main-site-header .hp-kanan { order: 2; }

/* tablet / layar sedang */
@media (max-width: 900px) {
    #main-site-header .hp-atas {
        height: auto; padding: 0 12px; gap: 8px;
        flex-wrap: wrap; row-gap: 0; align-items: center;
    }
    /* baris pertama (logo + tombol) dijaga tingginya supaya tidak mepet */
    #main-site-header .hp-logo { order: 0; min-height: 52px; }
    #main-site-header .hp-kanan { order: 2; flex: 0 0 auto; gap: 6px; min-height: 52px; }
    #main-site-header .hp-logo img { height: 32px; }
    #main-site-header .hp-info { font-size: 11px; }
    #main-site-header .hp-nama { flex: 0 1 auto; min-width: 0; max-width: none; }
    #main-site-header .hp-nama .hp-nama-teks { max-width: 150px; }
    #main-site-header .hp-t { padding: 6px 10px; font-size: 10.5px; flex: 0 0 auto; }
    /* baris kedua: melintang penuh, isinya ke tengah */
    #main-site-header .hp-baris2 {
        order: 3; flex: 1 0 100%; justify-content: center; gap: 12px;
        margin: 0 -12px; padding: 6px 12px 7px;
        border-top: 1px solid rgba(145, 158, 248, 0.16);
        background: rgba(255, 255, 255, 0.03);
    }
}

/* HP */
@media (max-width: 520px) {
    #main-site-header .hp-atas { padding: 0 10px; gap: 6px; }
    #main-site-header .hp-logo { min-height: 46px; }
    #main-site-header .hp-kanan { min-height: 46px; }
    #main-site-header .hp-logo img { height: 26px; }
    #main-site-header .hp-kanan { gap: 5px; }
    #main-site-header .hp-saya { display: none; }
    #main-site-header .hp-t { padding: 6px 9px; font-size: 10px; border-radius: 4px; letter-spacing: 0; }
    #main-site-header .hp-info { font-size: 11px; gap: 5px; }
    #main-site-header .hp-info i { display: inline-block; }   /* ikon tampil lagi, tempatnya lega */
    #main-site-header .hp-baris2 { margin: 0 -10px; padding: 6px 10px 7px; gap: 14px; }
    #main-site-header .hp-nama .hp-nama-teks { max-width: 130px; }
}