/* ============================================================
   TABBAR.CSS — Barre d'onglets mobile (utils/navbar.html).
   Sous 720 px : Accueil, Calls, Bonus Hunt, Tournois fixés en bas, à portée
   de pouce, + l'onglet « Menu » (panneau : Arcade, autres pages et compte).
   --luv-bottom-bar = sa hauteur (zone de sécurité de l'iPhone comprise) :
   les éléments fixés en bas (chatbot, bandeau live, mini-lecteur, promo
   tournoi, toasts) s'en servent pour se poser au-dessus.
   ============================================================ */
.luv-tabbar { display: none; }

@media (max-width: 720px) {
    body.theme-luv {
        --luv-bottom-bar: calc(60px + env(safe-area-inset-bottom, 0px));
        padding-bottom: var(--luv-bottom-bar);
    }
    .luv-tabbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1090;                       /* sous la navbar (1100) et les modales (2000) */
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        height: var(--luv-bottom-bar);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: rgba(7, 11, 21, 0.88);
        border-top: 1px solid var(--luv-line, rgba(255, 255, 255, 0.08));
        backdrop-filter: blur(18px) saturate(140%);
        -webkit-backdrop-filter: blur(18px) saturate(140%);
    }
    .luv-tab {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-width: 0;
        color: var(--luv-text-mute, #8a95ab);
        font-family: var(--luv-font-body, system-ui, sans-serif);
        font-size: 11px;
        font-weight: 700;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        transition: color 0.15s ease, transform 0.12s ease;
    }
    button.luv-tab {                         /* onglet « Menu » : bouton sans habillage natif */
        appearance: none;
        -webkit-appearance: none;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
    }
    .luv-tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .luv-tab-ic { width: 22px; height: 22px; }
    .luv-tab-avatar {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        object-fit: cover;
        box-shadow: 0 0 0 1.5px currentColor;
    }
    .luv-tab:active { transform: scale(0.94); }
    .luv-tab.is-active,
    .luv-tab[aria-expanded="true"] { color: var(--luv-orange, #ffb800); }
    .luv-tab.is-active::before {
        content: "";
        position: absolute;
        top: 0;
        left: 30%;
        right: 30%;
        height: 2px;
        border-radius: 0 0 2px 2px;
        background: var(--luv-orange, #ffb800);
        box-shadow: 0 0 10px var(--luv-orange, #ffb800);
    }
    .no-hwaccel .luv-tabbar {
        background: rgba(7, 11, 21, 0.97);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* ── Barre du haut allégée sur mobile ──────────────────────────
   Les pages (Arcade comprise) et le compte passent par la barre d'onglets et son
   onglet « Menu » : en haut ne restent que le logo et le solde LP (ou « Connexion »). */
.nav-m-balance { display: none; }
@media (max-width: 720px) {
    .navbar .btn-nav-arcade,
    .navbar .hamburger,
    .navbar .nav-user-dropdown,
    .navbar .navbar-menu { display: none !important; }
    .navbar .nav-m-balance {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        height: 36px;
        padding: 0 13px 0 9px;
        border-radius: 999px;
        border: 1px solid rgba(255, 184, 0, 0.35);
        background: rgba(255, 184, 0, 0.08);
        color: var(--luv-text, #f3f6fb);
        font-family: var(--luv-font-body, system-ui, sans-serif);
        font-size: 13.5px;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
        text-decoration: none;
        white-space: nowrap;
    }
    .navbar .nav-m-balance img { width: 18px; height: 18px; }
}

/* ── Panneau « Menu » (onglet du bas) ─────────────────────────── */
.luv-sheet { display: none; }
@media (max-width: 720px) {
    html.luv-sheet-lock { overflow: hidden; }
    /* Chatbot et promo tournoi passent au-dessus de tout (z-index 9xxx) : effacés pendant l'ouverture */
    html.luv-sheet-lock .lr-chatbot,
    html.luv-sheet-lock .tpromo { visibility: hidden; }
    .luv-sheet:not([hidden]) {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1080;                       /* sous la barre d'onglets : l'onglet Menu reste cliquable */
    }
    .luv-sheet-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(2, 4, 10, 0.6);
        opacity: 0;
        transition: opacity 0.22s ease;
    }
    .luv-sheet-panel {
        position: absolute;
        left: 0;
        right: 0;
        bottom: var(--luv-bottom-bar);
        max-height: min(78vh, 620px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 8px 16px 18px;
        border-radius: 20px 20px 0 0;
        background: rgba(10, 15, 28, 0.97);
        border: 1px solid var(--luv-line, rgba(255, 255, 255, 0.08));
        border-bottom: 0;
        box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.5);
        transform: translateY(105%);
        transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .luv-sheet.is-open .luv-sheet-backdrop { opacity: 1; }
    .luv-sheet.is-open .luv-sheet-panel { transform: none; }
    .luv-sheet-grip {
        width: 38px;
        height: 4px;
        margin: 4px auto 14px;
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.18);
    }
    .luv-sheet-user {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 14px;
    }
    .luv-sheet-user > img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--luv-orange, #ffb800); }
    .luv-sheet-user b { display: block; color: var(--luv-text, #fff); font-size: 15.5px; }
    .luv-sheet-user span { display: inline-flex; align-items: center; gap: 5px; color: var(--luv-orange, #ffb800); font-size: 13.5px; font-weight: 800; }
    .luv-sheet-login {
        display: flex;
        justify-content: center;
        margin-bottom: 14px;
        padding: 13px;
        border-radius: 12px;
        background: var(--luv-orange, #ffb800);
        color: #1a0a00;
        font: 800 14px var(--luv-font-body, system-ui, sans-serif);
        text-decoration: none;
    }
    .luv-sheet-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .luv-sheet-grid a {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 14px 12px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--luv-line, rgba(255, 255, 255, 0.08));
        color: var(--luv-text, #fff);
        font: 700 13.5px var(--luv-font-body, system-ui, sans-serif);
        text-decoration: none;
    }
    .luv-sheet-grid a.is-active { border-color: rgba(255, 184, 0, 0.5); color: var(--luv-orange, #ffb800); }
    .luv-sheet-ic { width: 20px; height: 20px; color: var(--luv-orange, #ffb800); flex: 0 0 auto; }
    .luv-sheet-list {
        display: grid;
        margin-top: 14px;
        border-top: 1px solid var(--luv-line, rgba(255, 255, 255, 0.08));
    }
    .luv-sheet-list a {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 13px 4px;
        border-bottom: 1px solid var(--luv-line, rgba(255, 255, 255, 0.06));
        color: var(--luv-text, #fff);
        font: 700 14px var(--luv-font-body, system-ui, sans-serif);
        text-decoration: none;
    }
    .luv-sheet-list a.is-active { color: var(--luv-orange, #ffb800); }
    .luv-sheet-list .luv-sheet-logout, .luv-sheet-list .luv-sheet-logout .luv-sheet-ic { color: #f87171; }
    .luv-sheet-foot {
        display: flex;
        justify-content: center;
        gap: 18px;
        margin-top: 14px;
    }
    .luv-sheet-foot a { color: var(--luv-text-mute, #8a95ab); font-size: 12.5px; text-decoration: none; }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
    .luv-sheet-panel, .luv-sheet-backdrop { transition: none; }
}