/* ================================================
   OmGly — Desktop Layout
   Dois cards flutuantes centralizados (≥ 960px)
   Mobile: wrappers são display:contents
   ================================================ */

#dtHeader,
#dtDiscoverPanel { display: none; }

#dtCards,
#dtLeft,
#dtRight { display: contents; }

/* ═══════════════════════════════════════════════
   DESKTOP  ≥ 960px
═══════════════════════════════════════════════ */
@media (min-width: 960px) {

    /* ── Cancela o frame de celular de app.css ──── */
    html {
        display: block !important;
        height: 100vh !important;
        overflow: hidden !important;
        background: #0e0e14 !important;
    }

    body.app-page {
        width: 100% !important;
        height: 100vh !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transform: none !important;
        flex-shrink: 1 !important;
    }

    /* Remove notch e home indicator */
    body.app-page::before,
    body.app-page::after { display: none !important; }

    /* Reverte paddings que o frame de celular adicionou */
    .top-bar            { padding-top: 0 !important; }
    .page-header,
    .searching-header   { padding-top: 16px !important; }
    .chat-header        { padding-top: 12px !important; }
    .bottom-nav         { border-radius: 0 !important; }

    /* ── Página ─────────────────────────────────── */
    body.app-page {
        display: flex;
        flex-direction: column;
        height: 100vh;
        overflow: hidden;
        background: #0e0e14;
    }

    /* ── Header fixo topo ───────────────────────── */
    #dtHeader {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
        height: 52px;
        padding: 0 20px;
        background: transparent;
        gap: 12px;
        position: relative;
        z-index: 300;
    }

    /* Logo */
    .dt-logo {
        display: flex; align-items: center; gap: 9px; flex-shrink: 0;
    }
    .dt-logo-text {
        font-size: 1.1rem; font-weight: 900;
        background: linear-gradient(135deg, #f07030, #ff8f50);
        -webkit-background-clip: text; -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* Botões centro */
    .dt-header-center {
        display: flex; align-items: center; gap: 8px;
        flex: 1; justify-content: flex-start; padding-left: 8px;
    }

    .dt-free-btn {
        display: flex; align-items: center; gap: 6px;
        background: rgba(245,166,35,.16);
        border: 1px solid rgba(245,166,35,.30);
        color: #f5a623;
        font-size: .78rem; font-weight: 700;
        padding: 6px 14px; border-radius: 50px;
        transition: background .15s;
    }
    .dt-free-btn:hover { background: rgba(245,166,35,.28); }

    .dt-mode-btn {
        display: flex; align-items: center; gap: 6px;
        background: rgba(255,255,255,.08);
        color: rgba(255,255,255,.6);
        font-size: .78rem; font-weight: 600;
        padding: 6px 14px; border-radius: 50px;
        transition: background .15s, color .15s;
    }
    .dt-mode-btn:hover { background: rgba(255,255,255,.14); color: #fff; }

    /* Ícones direita */
    .dt-header-right {
        display: flex; align-items: center; gap: 4px; flex-shrink: 0;
    }

    #dtCoinBtn {
        display: flex; align-items: center; gap: 6px;
        background: rgba(245,166,35,.15);
        color: #f5a623;
        font-size: .86rem; font-weight: 800;
        padding: 6px 14px; border-radius: 50px;
        transition: background .15s;
        margin-right: 4px;
        border: none;
    }
    #dtCoinBtn:hover { background: rgba(245,166,35,.26); }

    .dt-icon-btn {
        position: relative;
        display: flex; align-items: center; justify-content: center;
        width: 42px; height: 42px;
        border-radius: 12px;
        color: rgba(255,255,255,.4);
        transition: color .15s, background .15s;
    }
    .dt-icon-btn:hover { color: rgba(255,255,255,.85); background: rgba(255,255,255,.08); }
    .dt-icon-btn.active { color: #f07030; }

    .dt-badge {
        position: absolute; top: 6px; right: 5px;
        min-width: 15px; height: 15px;
        background: #e53935; border-radius: 50%;
        font-size: .56rem; font-weight: 800; color: #fff;
        display: flex; align-items: center; justify-content: center;
        padding: 0 3px;
        border: 2px solid #0e0e14;
    }

    /* ── Cards container (centrado) ─────────────── */
    #dtCards {
        display: flex !important;
        flex: 1;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        padding: 12px 32px 24px;
        gap: 0;
    }

    /* ── Card esquerdo — área de vídeo ──────────── */
    #dtLeft {
        display: block !important;
        position: relative;
        flex-shrink: 0;
        overflow: hidden;
        background: #000;
        border-radius: 18px 0 0 18px;
        width: clamp(320px, 38vw, 480px);
        height: clamp(400px, calc(100vh - 110px), 620px);
    }

    /* Screens dentro do card esquerdo */
    #dtLeft .screen {
        position: absolute !important;
        inset: 0 !important;
        bottom: 0 !important;
    }

    /* Discover: fundo escuro no desktop */
    #dtLeft #screenDiscover {
        background: #060608 !important;
    }
    /* Oculta elementos mobile-only dentro do card esquerdo */
    #dtLeft .top-bar          { display: none !important; }
    #dtLeft .discover-bottom  { display: none !important; }

    /* Searching / MatchFound ficam no card esquerdo */
    #dtLeft #screenSearching,
    #dtLeft #screenMatchFound { background: #060608 !important; }

    /* ── Card direito — controles ───────────────── */
    #dtRight {
        display: block !important;
        position: relative;
        flex-shrink: 0;
        overflow: hidden;
        background: #16161f;
        border-radius: 0 18px 18px 0;
        width: clamp(280px, 28vw, 380px);
        height: clamp(400px, calc(100vh - 110px), 620px);
        border-left: 1px solid rgba(255,255,255,.07);
    }

    /* Screens dentro do card direito */
    #dtRight .screen {
        position: absolute !important;
        inset: 0 !important;
        bottom: 0 !important;
        overflow-y: auto;
    }

    /* Ajustes visuais no card direito */
    #dtRight .page-header  { padding-top: 16px; }
    #dtRight .chat-header  { padding-top: 12px; }
    #dtRight #screenProfile { overflow-y: auto; }
    #dtRight .coin-badge   { display: none !important; }

    /* ── Painel padrão (discover idle) ─────────── */
    #dtDiscoverPanel {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 26px;
        height: 100%;
        padding: 28px 24px;
        text-align: center;
    }

    .dt-brand img    { border-radius: 14px; margin-bottom: 10px; box-shadow: 0 8px 28px rgba(240,112,48,.25); }
    .dt-brand-name   { font-size: 1.6rem; font-weight: 900; color: #fff; margin-bottom: 5px; letter-spacing: -.02em; }
    .dt-brand-sub    { font-size: .84rem; color: rgba(255,255,255,.35); }

    .dt-discover-actions {
        display: flex; flex-direction: column;
        align-items: stretch; gap: 10px; width: 100%;
    }

    .dt-filter-pill {
        display: flex; align-items: center; justify-content: center; gap: 9px;
        padding: 12px 18px;
        border: 1.5px solid rgba(255,255,255,.13);
        border-radius: 50px;
        color: rgba(255,255,255,.72);
        font-size: .88rem; font-weight: 600;
        background: rgba(255,255,255,.05);
        transition: background .15s, border-color .15s;
    }
    .dt-filter-pill:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.22); }

    .dt-start-btn {
        padding: 14px 18px;
        background: #f5a623;
        color: #1a0800;
        font-size: .95rem; font-weight: 800;
        border-radius: 13px;
        transition: background .15s, transform .12s;
        box-shadow: 0 4px 18px rgba(245,166,35,.36);
    }
    .dt-start-btn:hover  { background: #e8971a; transform: translateY(-1px); }
    .dt-start-btn:active { transform: scale(.97); }

    /* ── Theater Mode ───────────────────────────── */
    body.dt-theater #dtRight { display: none !important; }
    body.dt-theater #dtLeft  {
        width: clamp(640px, 78vw, 1000px) !important;
        border-radius: 18px !important;
    }

    /* ── Oculta nav mobile ──────────────────────── */
    .bottom-nav { display: none !important; }

    /* ── Modais centralizados no desktop ────────── */
    .app-confirm-overlay,
    .modal-overlay,
    .bottom-sheet-overlay { background: rgba(0,0,0,.65) !important; }

    .app-confirm-sheet,
    .perm-modal,
    .payment-modal {
        position: fixed !important;
        top: 50% !important; left: 50% !important;
        transform: translate(-50%, -50%) !important;
        bottom: auto !important;
        max-width: 460px; width: calc(100% - 40px);
        border-radius: 20px !important;
    }

    /* Bottom sheets viram modais centrados */
    .bottom-sheet {
        position: fixed !important;
        top: 50% !important; left: 50% !important;
        transform: translate(-50%, -50%) !important;
        bottom: auto !important;
        max-width: 440px; width: calc(100% - 40px);
        border-radius: 20px !important;
        max-height: 85vh;
        overflow-y: auto;
    }
    .bottom-sheet.sheet-open {
        transform: translate(-50%, -50%) !important;
    }

    /* Country picker */
    .country-picker {
        position: fixed !important;
        top: 50% !important; left: 50% !important;
        transform: translate(-50%, -50%) !important;
        bottom: auto !important;
        max-width: 440px; width: calc(100% - 40px);
        border-radius: 20px !important;
        max-height: 80vh;
    }
    .country-picker.cp-open {
        transform: translate(-50%, -50%) !important;
    }
}