/* =========================================
        RESET & STYLE UTAMA
    ========================================= */
    * { 
        box-sizing: border-box; 
        scrollbar-width: none !important; 
    }
    ::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
    html, body {
        margin: 0;
        padding: 15px;
        background-color: #0f1115;
        font-family: 'Poppins', sans-serif;
        color: #e5e7eb;
        -ms-overflow-style: none !important; 
    }
    .pome-game-portal { font-family: 'Poppins', sans-serif; color: #e5e7eb; width: 100%; max-width: 1200px; margin: 0 auto; }

    .active-player-container { display: none; }
    .game-fullscreen-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #000; z-index: 99999; }
    
    .fullscreen-iframe-wrapper {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        background: #000; z-index: 1; 
        transition: transform 0.4s ease, width 0.4s ease, height 0.4s ease, top 0.4s ease, left 0.4s ease;
    }
    .fullscreen-iframe-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
    .fullscreen-iframe-wrapper.is-rotated-left {
        top: 50%; left: 50%; width: 100vh !important; height: 100vw !important;
        transform: translate(-50%, -50%) rotate(-90deg);
    }
    .fullscreen-iframe-wrapper.is-rotated-right {
        top: 50%; left: 50%; width: 100vh !important; height: 100vw !important;
        transform: translate(-50%, -50%) rotate(90deg);
    }
    .fullscreen-top-bar {
        position: absolute; top: 0; left: 0; width: 100%;
        display: flex; justify-content: space-between; align-items: center;
        padding: 15px 25px; box-sizing: border-box; z-index: 10; 
        background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, transparent 100%);
        pointer-events: none; 
        transition: transform 0.5s ease-in-out;
        transform: translateY(0);
    }
    .fullscreen-top-bar.is-hidden { transform: translateY(-100%); }
    
    /* TOMBOL JANGKAR (BISA DIGESER - MENTOK ATAS) - GLASSMORPHISM SYNC */
    .btn-show-header {
        position: absolute; 
        top: 0; 
        left: calc(50% - 40px); 
        width: 80px; 
        height: 28px; 
        background: rgba(0, 0, 0, 0.35); /* 👈 SAMA: Hitam transparan 35% */
        backdrop-filter: blur(5px); /* Efek Kaca */
        -webkit-backdrop-filter: blur(5px);
        color: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.2); /* 👈 SAMA: Tepi putih transparan 20% (Pantulan cahaya) */
        border-radius: 14px; 
        display: flex; 
        align-items: center; 
        justify-content: center;
        font-size: 14px; 
        letter-spacing: 2px;
        cursor: grab; 
        z-index: 15;
        transition: opacity 0.4s ease, background 0.2s, border-color 0.2s; 
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5); /* 👈 SAMA: Shadow dipertegas agar tahan di latar game cerah */
        opacity: 0; 
        pointer-events: none;
        touch-action: none; 
        user-select: none;
    }
    
    .btn-show-header:active { 
        cursor: grabbing; 
        background: rgba(162, 0, 255, 0.6); /* Sedikit redup saat ditahan agar elegan */
        border-color: rgba(162, 0, 255, 0.8);
        box-shadow: 0 4px 8px rgba(162, 0, 255, 0.4);
    }
    
    .btn-show-header.is-visible { 
        opacity: 1; 
        pointer-events: auto; 
    }
    
    .fullscreen-game-title {
        color: #ffffff; font-size: 18px; font-weight: 600; white-space: nowrap;
        overflow: hidden; text-overflow: ellipsis; max-width: 80%;
        text-shadow: 0 2px 4px rgba(0,0,0,0.8); pointer-events: auto;
    }
    .btn-rotate-game, .btn-close-game {
        color: #fff; border: none; padding: 8px 16px; border-radius: 20px;
        font-size: 13px; font-weight: 600; cursor: pointer; display: flex;
        align-items: center; gap: 6px; transition: 0.3s; font-family: 'Poppins', sans-serif;
        pointer-events: auto;
    }
    .btn-rotate-game { background: #A200FF; box-shadow: 0 4px 15px rgba(162, 0, 255, 0.4); }
    .btn-rotate-game:hover { background: #8700D6; transform: scale(1.05); }
    .btn-close-game { background: #ff3e3e; box-shadow: 0 4px 15px rgba(255, 62, 62, 0.4); }
    .btn-close-game:hover { background: #ff1f1f; transform: scale(1.05); }

    /* =========================================
       WRAPPER STICKY BAR
    ========================================= */
    .sticky-header-wrapper {
        position: sticky; top: 0; z-index: 100; background-color: #0f1115;
        padding-top: 5px; padding-bottom: 10px; margin-top: -15px; 
        box-shadow: 0 10px 20px -10px rgba(0,0,0,0.9);
    }

    /* =========================================
       SISTEM GRID RESPONSIVE KONTROL HEADER
    ========================================= */
    /* 📱 TAMPILAN HP (2 Baris) - Baris 1: Portal & Search. Baris 2: Dropdowns */
    .game-controls { display: flex; flex-direction: column; gap: 10px; width: 100%; }

    /* BARIS 1 (Perhitungan Pasti agar Full Layar) */
    .controls-row-1 {
        display: flex; align-items: center;
        width: 100%; height: 38px; position: relative;
    }
    .controls-row-2 { display: flex; gap: 8px; width: 100%; }
    
    .portal-switcher-btn { 
        margin: 0; height: 38px; display: flex; align-items: center; justify-content: center;
        background: linear-gradient(135deg, #9D00FF, #D900FF); color: white;
        border-radius: 20px; border: none; font-weight: bold; cursor: pointer;
        font-size: 13px; box-shadow: 0 4px 10px rgba(157, 0, 255, 0.3); white-space: nowrap; font-family: inherit;
        
        /* 🚀 KUNCI: Hitung otomatis 100% lebar dikurangi ruang ikon pencarian */
        width: calc(100% - 48px); 
        transition: opacity 0.3s ease;
        opacity: 1;
    }
    .portal-switcher-btn.is-gm { background: linear-gradient(135deg, #00E5FF, #0088FF); box-shadow: 0 4px 10px rgba(0, 229, 255, 0.3); }
    
    .portal-switcher-btn.hide-for-search {
        opacity: 0; pointer-events: none;
    }

    /* KOTAK PENCARIAN (Melayang di atas tombol Portal) */
    .game-searchbox-container { 
        position: absolute; right: 0; top: 0; height: 38px; z-index: 5;
        /* Ukuran menyusut selebar ikon */
        width: 38px; 
        transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .game-searchbox-container.is-expanded { 
        /* Meluas 100% menutupi tombol portal yang memudar */
        width: 100%; 
    }
    
    .game-search { position: relative; width: 100%; height: 100%; }
    .game-search input {
      width: 100%; height: 38px; padding: 0 40px 0 15px; 
      border-radius: 25px; border: 1px solid rgba(255,255,255,0.1); 
      background: rgba(255,255,255,0.05); color: #ffffff; 
      font-size: 13px; font-family: inherit; outline: none; box-sizing: border-box;
      opacity: 0; pointer-events: none; transition: opacity 0.3s;
    }
    .game-search input:focus { border-color: #00E5FF; }
    .game-searchbox-container.is-expanded input { opacity: 1; pointer-events: auto; background: rgba(255,255,255,0.08); }

    .btn-search-icon {
        position: absolute; right: 0; top: 0; 
        background: rgba(255, 255, 255, 0.15); /* Transparan Kaca */
        backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); /* Efek Blur */
        border: 1px solid rgba(255, 255, 255, 0.2); /* Bingkai Halus */
        color: #ffffff; border-radius: 50%; 
        width: 38px; height: 38px; cursor: pointer; display: flex; align-items: center; justify-content: center; 
        transition: 0.3s; padding: 0; z-index: 10; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }
    .btn-search-icon:hover { background: rgba(255, 255, 255, 0.25); }
    
    .game-searchbox-container.is-expanded .btn-search-icon {
        background: transparent; border: none; backdrop-filter: none; -webkit-backdrop-filter: none; color: #00E5FF; box-shadow: none; pointer-events: auto; z-index: 10;
    }

    .btn-clear-icon {
        position: absolute; right: 35px; top: 50%; transform: translateY(-50%); 
        background: transparent; color: #a1a1aa; border: none; font-size: 14px; 
        cursor: pointer; display: none; padding: 5px; transition: color 0.3s; z-index: 3;
    }

    /* 💻 TAMPILAN DESKTOP / PC (1 Baris Semuanya) */
    @media (min-width: 875px) {
        .game-controls { flex-direction: row; }
        .controls-row-1 { width: auto; flex: 1; display: flex; position: static; gap: 15px; }
        
        .portal-switcher-btn { width: auto; padding: 0 15px; } 
        .portal-switcher-btn.hide-for-search { opacity: 1; pointer-events: auto; }
        
        .controls-row-2 { width: auto; }
        
        .game-searchbox-container { position: relative; width: 100% !important; flex: 1; }
        .game-search input { opacity: 1; pointer-events: auto; padding-right: 70px; background: rgba(255,255,255,0.05); }
        .btn-search-icon { 
            width: 30px; height: 30px; right: 4px; top: 4px; pointer-events: auto; 
            background: rgba(255, 255, 255, 0.15); border: none; box-shadow: none;
        }
        .btn-search-icon:hover { background: rgba(255, 255, 255, 0.25); }
        .game-searchbox-container.is-expanded .btn-search-icon { 
            background: rgba(255, 255, 255, 0.15); color: #ffffff; border: none; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
        }
    }

    /* 🚀 PENGATURAN KOTAK FILTER AGAR PAS (FIT) DI LAYAR HP */
    #filter-gp, #filter-gm, #filter-y8, #filter-pg {
        display: flex; 
        gap: 8px; 
        width: 100%;
    }

    .game-search input {
      width: 100%; height: 38px; padding: 0 70px 0 15px; 
      border-radius: 25px; border: 1px solid rgba(255,255,255,0.1); 
      background: rgba(255,255,255,0.05); color: #ffffff; 
      font-size: 13px; font-family: inherit; outline: none; 
      transition: border-color 0.3s; box-sizing: border-box;
    }
    .game-search input:focus { border-color: #00E5FF; }

    /* =========================================
       🚀 CUSTOM DROPDOWN (PENGGANTI SELECT)
    ========================================= */
    .custom-dropdown { position: relative; flex: 1 1 0; min-width: 0; }
    
    .custom-dropdown-selected {
        height: 38px; padding: 0 25px 0 12px; background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px;
        color: #e5e7eb; font-family: 'Poppins', sans-serif; font-size: 12px;
        cursor: pointer; display: flex; align-items: center; transition: 0.3s;
        box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        background-image: url("data:image/svg+xml;utf8,<svg fill='%23e5e7eb' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
        background-repeat: no-repeat; background-position: right 8px center;
    }
    
    @media (min-width: 875px) {
        .custom-dropdown-selected { font-size: 13px; }
        .custom-dropdown { flex: 0 0 auto; min-width: 140px; }
    }
    
    .custom-dropdown.is-active .custom-dropdown-selected, .custom-dropdown-selected:hover {
        border-color: #00E5FF; background-color: rgba(0, 229, 255, 0.1);
    }
    .custom-dropdown.is-active .custom-dropdown-selected {
        background-image: url("data:image/svg+xml;utf8,<svg fill='%2300E5FF' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 14l5-5 5 5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
        color: #00E5FF;
    }
    
    .custom-dropdown-options {
        position: absolute; top: calc(100% + 5px); left: 0; width: max-content; min-width: 100%;
        background: #1c1f27; border: 1px solid rgba(0, 229, 255, 0.3); border-radius: 12px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.8); z-index: 99; display: none; 
        flex-direction: column; max-height: 85vh; overflow-y: auto; padding: 5px 0;
    }
    .custom-dropdown.is-active .custom-dropdown-options { display: flex; }
    
    .custom-dropdown-item {
        padding: 10px 15px; color: #e5e7eb; font-size: 13px; cursor: pointer; transition: 0.2s;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .custom-dropdown-item:last-child { border-bottom: none; }
    .custom-dropdown-item:hover, .custom-dropdown-item.is-selected { background: rgba(0, 229, 255, 0.15); color: #00E5FF; padding-left: 20px; font-weight: 500; }
    
    /* Scrollbar Cantik untuk Dropdown */
    .custom-dropdown-options::-webkit-scrollbar { display: block !important; width: 5px !important; }
    .custom-dropdown-options::-webkit-scrollbar-thumb { background: #A200FF; border-radius: 10px; }
    .custom-dropdown-options::-webkit-scrollbar-track { background: transparent; }

    .game-grid { display: grid; gap: 15px; margin-top: 10px; }
    
    /* PENGATURAN THUMBNAIL RESPONSIVE */
    #grid-gm, #grid-y8 { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
    #grid-gp, #grid-pg { grid-template-columns: repeat(auto-fill, minmax(213px, 1fr)); }
    @media (min-width: 768px) {
        #grid-gm, #grid-y8 { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
        #grid-gp, #grid-pg { grid-template-columns: repeat(auto-fill, minmax(249px, 1fr)); }
    }
    
    /* Tambahkan warna gradasi baru untuk Y8 */
    .portal-switcher-btn.is-y8 { background: linear-gradient(135deg, #FF0055, #FF5500); box-shadow: 0 4px 10px rgba(255, 0, 85, 0.3); }
    
    /* Warna gradasi Hijau Neon khusus untuk Portal 4 (Playgama) */
    .portal-switcher-btn.is-pg { background: linear-gradient(135deg, #00E676, #00A040); box-shadow: 0 4px 10px rgba(0, 230, 118, 0.3); }

    .game-card { cursor: pointer; border-radius: 12px; overflow: hidden; position: relative; background: #000; transition: transform 0.3s, box-shadow 0.3s; }
    .game-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(162, 0, 255, 0.4); }
    
    .game-card img { width: 100%; display: block; opacity: 0.9; transition: opacity 0.3s; }
    #grid-gp .game-card img, #grid-pg .game-card img { aspect-ratio: 16 / 9; object-fit: fill; } 
    #grid-gm .game-card img, #grid-y8 .game-card img { aspect-ratio: 1 / 1; object-fit: cover; }
    
    .game-card:hover img { opacity: 1; }
    .game-title-overlay {
      position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
      color: #fff; font-size: 11px; text-align: center; padding: 15px 5px 8px; box-sizing: border-box; font-weight: 500;
    }
    
    .video-preview-container {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        background: #000; z-index: 2; opacity: 0; 
        transition: opacity 0.3s ease; pointer-events: none; 
    }
    .video-preview-container video { width: 100%; height: 100%; object-fit: cover; }
    
    .video-fallback-msg {
        position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
        background: rgba(0, 0, 0, 0.75); color: #ffffff; padding: 8px 12px;
        border-radius: 8px; font-size: 11px; font-weight: 500; text-align: center;
        width: 85%; box-sizing: border-box; backdrop-filter: blur(2px);
        border: 1px solid rgba(255,255,255,0.1); pointer-events: none; 
    }

    .game-info-box {
      background: #1c1f27; border-radius: 15px; padding: 20px; margin-top: 25px; margin-bottom: 30px;
      font-size: 14px; line-height: 1.6; box-shadow: 0 5px 15px rgba(0,0,0,0.6);
      border: 1px solid rgba(255,255,255,0.08); color: #e5e7eb; display: none; 
    }
    .info-section-title { font-weight: 600; color: #ffffff; margin-bottom: 5px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
    .game-tags-wrapper { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; padding-top: 15px; border-top: 1px dashed #2a2e39; }
    .badge-category { background: linear-gradient(135deg, #A200FF 0%, #00E5FF 100%); color: #fff; padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 600; text-transform: uppercase; }
    .badge-tag { background: #222630; color: #d1d5db; padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 500; transition: 0.3s; }
    .badge-tag:hover { background: #00E5FF; color: #000; }

    .auto-load-indicator { text-align: center; padding: 40px 0; display: none; }
    .auto-load-indicator p { color: #00E5FF; font-weight: 600; font-size: 14px; margin-top: 10px; }
    .mini-spinner {
        width: 35px; height: 35px; border: 4px solid rgba(255,255,255,0.1); 
        border-top: 4px solid #A200FF; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto;
    }
    @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
    
    /* =========================================
       LAYER BACKDROP DROPDOWN
    ========================================= */
    .dropdown-backdrop {
        position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
        background: rgba(0, 0, 0, 0.6); /* Membuat latar belakang agak gelap/redup */
        /*backdrop-filter: blur(2px); /* Menambahkan efek blur ala iOS/Android modern */
        z-index: 90; /* Berada di atas game, tapi di bawah Header(100) */
        display: none; 
    }
    .dropdown-backdrop.is-active { display: block; }
    
    /* =========================================
       STYLE FITUR RIWAYAT & FAVORIT
    ========================================= */
    /* Tombol Hati di Kartu Game */
    .btn-card-fav {
        position: absolute; top: 8px; right: 8px;
        background: rgba(0,0,0,0.4); border: none; border-radius: 50%;
        width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
        font-size: 16px; cursor: pointer; z-index: 10;
        backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
        transition: transform 0.3s, background 0.3s;
    }
    .btn-card-fav:hover { transform: scale(1.15); background: rgba(0,0,0,0.8); }
    .btn-card-fav.is-fav { color: #ff3e3e; }
    .btn-card-fav:not(.is-fav) { color: #ffffff; opacity: 0.8; }
    
    /* Tombol X (Hapus 1 per 1) di Riwayat */
    .btn-card-remove {
        position: absolute; top: 8px; left: 8px;
        background: rgba(255, 62, 62, 0.7); border: none; border-radius: 50%;
        width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
        font-size: 11px; color: white; cursor: pointer; z-index: 10;
        transition: 0.3s; backdrop-filter: blur(2px);
    }
    .btn-card-remove:hover { transform: scale(1.1); background: #ff1f1f; }
    
    /* Tombol Hati di Top Bar Main Game */
    .btn-top-fav {
        background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.2);
        padding: 8px 15px; border-radius: 20px; font-size: 13px; font-weight: 600; font-family: 'Poppins', sans-serif;
        cursor: pointer; transition: 0.3s; color: white; display: flex; align-items: center; gap: 6px;
        pointer-events: auto;
    }
    .btn-top-fav:hover { transform: scale(1.05); }
    .btn-top-fav.is-fav { background: rgba(255, 62, 62, 0.15); border-color: rgba(255, 62, 62, 0.5); color: #ffebf0; }
    #btn-clear-all:hover { background: #ff3e3e !important; color: white !important; }
    
    /* Menyamakan bentuk poster campuran di grid Riwayat/Favorit */
    #grid-history, #grid-fav { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    @media (min-width: 768px) { #grid-history, #grid-fav { grid-template-columns: repeat(auto-fill, minmax(213px, 1fr)); } }
    #grid-history .game-card img, #grid-fav .game-card img { aspect-ratio: 16 / 9; object-fit: cover; }