/* ========================================
   Bilah atas setiap halaman permainan - sengaja ringkas:
     [logo + Menu]  [permainan yang sedang dibuka]  ...............  [Bank Soal]
   Semua permainan dipilih dari slide ke-2 halaman pembuka (index.html#menu), jadi
   tombol "Menu" di kiri membawa pengguna kembali ke sana. Tab Bank Soal - tempat
   mengelola soal, bukan permainan - selalu berada di pojok kanan.
   ======================================== */

.app-tabs {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.app-tabs-list {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
}

.app-tab {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border-radius: 10px;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-secondary);
    transition: var(--transition-fast);
    border: 1px solid transparent;
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-tab.active {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    box-shadow: var(--shadow-glow);
}

a.app-tab:hover:not(.active) {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    border-color: var(--border-light);
}

a.app-tab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---------- Tombol Menu: logo kecil + kata "Menu" (kembali ke daftar permainan) ---------- */

.app-tab--menu {
    gap: 9px;
    padding: 5px 16px 5px 11px;
    flex: 0 0 auto;
    color: var(--text-primary);
    border-color: var(--border-light);
    background: rgba(255, 255, 255, 0.05);
}

.app-tab-logo {
    display: block;
    height: 24px;
    width: auto;
    flex: 0 0 auto;
}

/* ---------- Tab Bank Soal: terpisah di pojok kanan ---------- */

.app-tab--bank {
    flex: 0 0 auto;
    gap: 6px;                                  /* jarak ikon 📚 dan teks (spasi di dalam span biasa runtuh pada flex) */
    background: rgba(22, 17, 38, 0.92);
    border-color: var(--border-light);
}

a.app-tab--bank:hover:not(.active) {
    background: rgba(48, 38, 82, 0.96);
}

@media (max-width: 640px) {
    .app-tabs { padding: 8px 12px; gap: 8px; }
    .app-tabs-list { gap: 8px; }
    .app-tab { padding: 7px 12px; font-size: 13px; }
    .app-tab--menu { padding: 4px 12px 4px 9px; }
}

/* Layar HP kecil: tab Bank Soal cukup berupa ikon supaya nama permainan punya ruang lebih lega */
@media (max-width: 520px) {
    .app-tab--bank .app-tab-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .app-tab--bank { padding: 7px 11px; font-size: 15px; }
}