/* ═══════════════════════════════════════════════════════════════
   BrainiaClub — Level picker pop-up (homepage #levelModal)
   • Frosted-glass, more transparent card and tiles
   • Levels sit in a centred 5 × 5 board (25 per page) that scales
     with the screen, so it stays in the middle on every device
   • Centred on phones too (no more bottom sheet)
   Loaded after popups.css — scoped to #levelModal only.
   ═══════════════════════════════════════════════════════════════ */
html body #levelModal {
    --lm-card:    rgba(255, 255, 255, 0.30);
    --lm-border:  rgba(255, 255, 255, 0.55);
    --lm-tile:    rgba(255, 255, 255, 0.36);
    --lm-tile-b:  rgba(255, 255, 255, 0.60);
    --lm-tile-h:  rgba(91, 130, 201, 0.30);
    --lm-shadow:  0 24px 60px rgba(17, 27, 48, 0.22);
    --lm-text:    #1B325E;
    background: rgba(17, 27, 48, 0.24) !important;
    -webkit-backdrop-filter: blur(8px) saturate(130%) !important;
    backdrop-filter: blur(8px) saturate(130%) !important;
    align-items: center;
    justify-content: center;
    padding: 12px;
}
html.dark-mode body #levelModal,
html body.dark-mode #levelModal,
html.dark body #levelModal,
html body.dark #levelModal {
    --lm-card:    rgba(24, 28, 46, 0.42);
    --lm-border:  rgba(255, 255, 255, 0.10);
    --lm-tile:    rgba(255, 255, 255, 0.06);
    --lm-tile-b:  rgba(255, 255, 255, 0.10);
    --lm-tile-h:  rgba(91, 130, 201, 0.32);
    --lm-shadow:  0 24px 60px rgba(0, 0, 0, 0.45);
    --lm-text:    #e6edfb;
    background: rgba(4, 7, 14, 0.42) !important;
}

/* ── Card ─────────────────────────────────────────────────────── */
html body #levelModal .modal-container {
    width: min(640px, 100%);
    max-width: none;
    max-height: min(92vh, 780px);
    max-height: min(92dvh, 780px);
    margin: 0;
    display: flex;
    flex-direction: column;
    padding: clamp(16px, 3.6vw, 30px) clamp(14px, 3.6vw, 32px);
    background: var(--pp-edge) top / 100% 4px no-repeat, var(--lm-card) !important;
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid var(--lm-border) !important;
    border-radius: 28px !important;
    box-shadow: var(--lm-shadow) !important;
}

/* ── Header ───────────────────────────────────────────────────── */
html body #levelModal .modal-header {
    margin-bottom: clamp(10px, 2.4vw, 18px);
    padding-bottom: clamp(8px, 2vw, 14px);
}
html body #levelModal .modal-topic-icon {
    width: clamp(40px, 9vw, 54px);
    height: clamp(40px, 9vw, 54px);
    font-size: clamp(1.15rem, 3.6vw, 1.6rem);
    background: var(--lm-tile);
    border: 1px solid var(--lm-tile-b);
    box-shadow: none;
}
html body #levelModal .modal-topic-title {
    font-size: clamp(1.1rem, 3.8vw, 1.5rem);
    color: var(--lm-text);
}
html body #levelModal .close-modal {
    background: var(--lm-tile) !important;
    border: 1px solid var(--lm-tile-b) !important;
    box-shadow: none !important;
    flex-shrink: 0;
}

/* ── Level board: 5 columns, centred, square tiles ─────────────── */
html body #levelModal .levels-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(8px, 2.2vw, 16px);
    /* As wide as fits — but never taller than the screen allows */
    width: min(100%, max(250px, min(520px, calc(92dvh - 220px))));
    margin: clamp(8px, 2vw, 18px) auto;
    padding: 0;
}
html body #levelModal .level-tile {
    aspect-ratio: 1 / 1;
    padding: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: clamp(12px, 3vw, 18px);
    background: var(--lm-tile);
    border: 1px solid var(--lm-tile-b);
    box-shadow: 0 6px 16px rgba(17, 27, 48, 0.10);
    color: var(--lm-text);
}
html body #levelModal .level-tile:hover {
    background: var(--lm-tile-h);
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 10px 22px rgba(17, 27, 48, 0.18);
    transform: translateY(-3px);
}
html body #levelModal .level-tile.locked { opacity: 0.55; }
html body #levelModal .level-tile.locked:hover {
    background: var(--lm-tile);
    border-color: var(--lm-tile-b);
    box-shadow: 0 6px 16px rgba(17, 27, 48, 0.10);
    transform: none;
}
html body #levelModal .level-number {
    width: 54%;
    height: auto;
    aspect-ratio: 46 / 42;
    margin: 0;
}
html body #levelModal .level-number-val {
    font-size: clamp(0.68rem, 2.4vw, 0.95rem);
}
html body #levelModal .level-lock-icon {
    position: absolute;
    right: 10%;
    bottom: 9%;
    margin: 0;
    font-size: clamp(0.5rem, 1.6vw, 0.66rem);
}

/* ── Pagination ───────────────────────────────────────────────── */
html body #levelModal .level-pagination {
    margin-top: auto;
    padding-top: clamp(4px, 1.5vw, 10px);
    gap: clamp(0.7rem, 3vw, 1.4rem);
}
html body #levelModal .page-nav-btn,
html body #levelModal .page-indicator {
    background: var(--lm-tile);
    border: 1px solid var(--lm-tile-b);
    box-shadow: none;
    color: var(--lm-text);
}
html body #levelModal .page-nav-btn {
    width: clamp(36px, 8vw, 44px);
    height: clamp(36px, 8vw, 44px);
    font-size: clamp(0.9rem, 2.6vw, 1.15rem);
}
html body #levelModal .page-nav-btn:hover:not(:disabled) { background: var(--lm-tile-h); }
html body #levelModal .page-indicator { font-size: clamp(0.78rem, 2.4vw, 0.95rem); }

/* Phones: keep the pop-up centred (it used to slide up from the bottom) */
@media (max-width: 480px) {
    html body #levelModal { align-items: center; padding: 10px; }
    html body #levelModal .modal-container {
        width: 100%;
        border-radius: 22px !important;
    }
}
/* Short landscape screens: tighter header so the board stays visible */
@media (max-height: 500px) {
    html body #levelModal .modal-container { padding: 12px 18px; }
    html body #levelModal .modal-header { margin-bottom: 6px; padding-bottom: 6px; }
    html body #levelModal .levels-grid { width: min(100%, max(220px, calc(100dvh - 150px))); gap: 6px; margin: 6px auto; }
    html body #levelModal .modal-topic-icon { width: 34px; height: 34px; font-size: 1rem; border-radius: 10px; }
    html body #levelModal .modal-topic-title { font-size: 1.05rem; }
    html body #levelModal .close-modal { width: 32px !important; height: 32px !important; }
    html body #levelModal .page-nav-btn { width: 32px; height: 32px; font-size: 0.85rem; }
    html body #levelModal .page-indicator { padding: 0.3rem 0.9rem; }
}
@media (prefers-reduced-motion: reduce) {
    html body #levelModal .level-tile:hover { transform: none; }
}