/* ═══════════════════════════════════════════════════════════════
   BrainiaClub — unified pop-ups
   One look for every modal / dialog on the site (home, tournaments,
   live lobby, game, multiplayer, settings, custom quiz):
     • the same dimmed, blurred backdrop
     • the same neumorphic card with the brand navy→gold top edge
     • the same title / text / icon / close-button styling
     • three button roles: primary (navy), secondary (soft), danger (red)
   Loaded last on every page so it wins over page styles.
   ═══════════════════════════════════════════════════════════════ */
:root {
    --pp-bg:        #e3e8ef;
    --pp-text:      #2f3542;
    --pp-muted:     #6b7385;
    --pp-title:     #1B325E;
    --pp-accent:    #1B325E;
    --pp-accent-2:  #2B4470;
    --pp-gold:      #f5b042;
    --pp-danger:    #e5484d;
    --pp-danger-2:  #c93a3f;
    --pp-backdrop:  rgba(17, 27, 48, 0.46);
    --pp-edge:      linear-gradient(90deg, #1B325E, #5b7fc4 55%, #f5b042);
    --pp-border:    rgba(255, 255, 255, 0.6);
    --pp-shadow:    0 30px 70px rgba(17, 27, 48, 0.26), 10px 10px 24px rgba(163, 177, 198, 0.5), -10px -10px 24px rgba(255, 255, 255, 0.7);
    --pp-raise:     5px 5px 12px #c1c8d1, -5px -5px 12px #ffffff;
    --pp-inset:     inset 4px 4px 9px #c1c8d1, inset -4px -4px 9px #ffffff;
    --pp-radius:    24px;
}
html.dark-mode, html.dark, body.dark-mode, body.dark {
    --pp-bg:        #1f2233;
    --pp-text:      #eef2fb;
    --pp-muted:     #9aa3b8;
    --pp-title:     #e6edfb;
    --pp-accent:    #3B5A92;
    --pp-accent-2:  #2B4470;
    --pp-backdrop:  rgba(4, 7, 14, 0.66);
    --pp-border:    rgba(255, 255, 255, 0.06);
    --pp-shadow:    0 30px 70px rgba(0, 0, 0, 0.55), 8px 8px 18px #12131f, -8px -8px 18px #2b2e45;
    --pp-raise:     5px 5px 12px #12131f, -5px -5px 12px #2b2e45;
    --pp-inset:     inset 4px 4px 9px #12131f, inset -4px -4px 9px #2b2e45;
}

/* ── Backdrops ─────────────────────────────────────────────── */
html body .modal-overlay,
html body .detail-modal-backdrop,
html body .points-modal-backdrop,
html body .lobby-leave-backdrop,
html body .settings-modal-overlay,
html body .overlay-base,
html body .mpq-confirm,
html body .cq-success-overlay,
html body .pov {
    background: var(--pp-backdrop) !important;
    -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
    backdrop-filter: blur(10px) saturate(120%) !important;
}

/* ── Cards ─────────────────────────────────────────────────── */
html body .modal-container,
html body .detail-modal,
html body .points-modal,
html body .lobby-leave-modal,
html body .settings-modal-container,
html body .modal-box,
html body .mpq-confirm__box,
html body .mpq-notice-panel,
html body .pbox {
    background: var(--pp-edge) top / 100% 4px no-repeat, var(--pp-bg) !important;
    color: var(--pp-text);
    border: 1px solid var(--pp-border) !important;
    border-radius: var(--pp-radius) !important;
    box-shadow: var(--pp-shadow) !important;
}
html body .modal-box { scrollbar-color: var(--pp-accent) transparent; }

/* ── Titles + text ─────────────────────────────────────────── */
html body .modal-container .modal-header h2,
html body .detail-title,
html body .points-modal-title,
html body .lobby-leave-modal h2,
html body .settings-modal-container h2,
html body .settings-modal-container h3,
html body .modal-box .matchmaking-title,
html body .mpq-confirm__title,
html body .mpq-notice-panel h2,
html body .pbox h2 {
    color: var(--pp-title) !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    -webkit-text-fill-color: currentColor;
    background: none !important;
}
html body .pbox h2 { font-size: clamp(1.35rem, 3.2vw, 1.7rem) !important; }
html body .points-modal-sub,
html body .lobby-leave-modal p,
html body .delete-modal-desc,
html body .mpq-confirm__msg,
html body .modal-box .matchmaking-subtitle,
html body .pbox p {
    color: var(--pp-muted) !important;
    opacity: 1 !important;
}

/* ── Icon badges ───────────────────────────────────────────── */
html body .points-modal-icon,
html body .lobby-leave-icon,
html body .delete-modal-icon,
html body .upgrade-modal-icon,
html body .mpq-confirm__icon,
html body .mpq-notice-icon,
html body .gm2-exit-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--pp-bg) !important;
    box-shadow: var(--pp-inset) !important;
    display: flex; align-items: center; justify-content: center;
    margin-left: auto; margin-right: auto;
    font-size: 1.5rem;
}
html body .points-modal-icon,
html body .upgrade-modal-icon { color: var(--pp-gold) !important; }
html body .delete-modal-icon.goodbye i { color: var(--pp-accent) !important; }

/* ── Close buttons ─────────────────────────────────────────── */
html body .close-modal,
html body .detail-close,
html body .points-modal-close,
html body .settings-modal-close {
    width: 38px !important; height: 38px !important;
    border-radius: 50% !important;
    border: none !important;
    background: var(--pp-bg) !important;
    box-shadow: var(--pp-raise) !important;
    color: var(--pp-text) !important;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: box-shadow .2s ease, color .2s ease;
}
html body .close-modal:hover,
html body .detail-close:hover,
html body .points-modal-close:hover,
html body .settings-modal-close:hover { box-shadow: var(--pp-inset) !important; color: var(--pp-danger) !important; }

/* ── Buttons: shared shape ─────────────────────────────────── */
html body :is(.modal-container, .detail-modal, .points-modal, .lobby-leave-modal, .settings-modal-container, .modal-box, .mpq-confirm__box, .mpq-notice-panel, .pbox)
    :is(.neumorphic-btn, .mpq-btn, .agbtn, .detail-action-btn, .points-confirm-btn, .points-upgrade-btn) {
    border-radius: 14px !important;
    font-family: 'Poppins', sans-serif;
    font-weight: 600 !important;
    border: none !important;
    transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}

/* primary */
html body :is(.modal-container, .detail-modal, .points-modal, .lobby-leave-modal, .settings-modal-container, .modal-box, .mpq-confirm__box, .mpq-notice-panel, .pbox)
    :is(.neumorphic-btn.primary, .neumorphic-btn.success, .mpq-btn--primary, .agbtn:not(.agbtn-ghost):not(.agbtn-danger), .points-confirm-btn, .detail-action-btn:not(:disabled), .plan-cta:not(.gold)) {
    background: linear-gradient(135deg, var(--pp-accent), var(--pp-accent-2)) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(27, 50, 94, 0.3) !important;
}
/* secondary */
html body :is(.modal-container, .detail-modal, .points-modal, .lobby-leave-modal, .settings-modal-container, .modal-box, .mpq-confirm__box, .mpq-notice-panel, .pbox)
    :is(.neumorphic-btn.btn-outline, .neumorphic-btn.lobby-leave-cancel, .mpq-btn:not(.mpq-btn--primary):not(.mpq-btn--danger):not(.mpq-btn--ok), .agbtn-ghost, .points-cancel-btn, .modal-buttons .neumorphic-btn:not(.primary):not(.danger):not(.gold)) {
    background: var(--pp-bg) !important;
    color: var(--pp-text) !important;
    box-shadow: var(--pp-raise) !important;
}
/* danger */
html body :is(.modal-container, .detail-modal, .points-modal, .lobby-leave-modal, .settings-modal-container, .modal-box, .mpq-confirm__box, .mpq-notice-panel, .pbox)
    :is(.neumorphic-btn.danger, .neumorphic-btn.lobby-leave-confirm, .mpq-btn--danger, .agbtn-danger) {
    background: linear-gradient(135deg, var(--pp-danger), var(--pp-danger-2)) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(229, 72, 77, 0.28) !important;
}
/* gold (upgrade / premium) */
html body :is(.points-modal, .settings-modal-container, .modal-box) :is(.plan-cta.gold, .points-upgrade-btn) {
    background: linear-gradient(135deg, #ffd27a, var(--pp-gold)) !important;
    color: #1a1a1a !important;
    box-shadow: 0 8px 18px rgba(245, 176, 66, 0.32) !important;
}
html body :is(.modal-container, .detail-modal, .points-modal, .lobby-leave-modal, .settings-modal-container, .modal-box, .mpq-confirm__box, .mpq-notice-panel, .pbox)
    :is(.neumorphic-btn, .mpq-btn, .agbtn, .points-confirm-btn):hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.05);
}
html body :is(.modal-container, .detail-modal, .points-modal, .lobby-leave-modal, .settings-modal-container, .modal-box, .mpq-confirm__box, .mpq-notice-panel, .pbox)
    :is(.neumorphic-btn, .mpq-btn, .agbtn, .points-confirm-btn):focus-visible {
    outline: 2px solid #5b7fc4 !important;
    outline-offset: 3px;
}

/* ── Inner panels (info rows, meta tiles) ──────────────────── */
html body .points-modal-balance,
html body .detail-meta-item {
    background: var(--pp-bg) !important;
    box-shadow: var(--pp-inset) !important;
    border: none !important;
}

/* ── Multiplayer "Create private room" header: brand navy, not purple ── */
html body .room-config-head {
    background: linear-gradient(135deg, #1B325E 0%, #2B4470 70%, #3B5A92 100%) !important;
    color: #fff;
}
html body .room-config-head .matchmaking-title { color: #fff !important; }
html body .room-config-head .matchmaking-subtitle { color: rgba(255, 255, 255, 0.78) !important; }
html body .modal-box .source-btn.is-picked,
html body .modal-box .topic-chip.selected,
html body .modal-box .topic-chip.is-picked {
    background: linear-gradient(135deg, var(--pp-accent), var(--pp-accent-2)) !important;
    color: #fff !important;
}

@media (max-width: 640px) {
    html body .modal-container,
    html body .detail-modal,
    html body .points-modal,
    html body .lobby-leave-modal,
    html body .settings-modal-container,
    html body .modal-box,
    html body .mpq-confirm__box,
    html body .pbox { border-radius: 20px !important; }
}

/* Live-lobby "game has started" celebration — same card + backdrop, softer glow */
html body .lobby-launch-backdrop {
    background: var(--pp-backdrop) !important;
    -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
    backdrop-filter: blur(10px) saturate(120%) !important;
}
html body .lobby-launch-modal {
    background: var(--pp-edge) top / 100% 4px no-repeat, var(--pp-bg) !important;
    border: 1px solid var(--pp-border) !important;
    border-radius: var(--pp-radius) !important;
    box-shadow: var(--pp-shadow) !important;
}
html body .lobby-launch-glow {
    background:
        radial-gradient(circle at 30% 20%, rgba(245, 176, 66, 0.28), transparent 45%),
        radial-gradient(circle at 75% 80%, rgba(91, 127, 196, 0.22), transparent 50%) !important;
}