/* ==========================================================================
   MOBILE APP SHELL — dhushor.dev
   Loaded AFTER style.css / certificates.css / video.css on every page.
   Turns the site into an app-like experience on phones & small tablets
   (<= 899px): floating liquid-glass top bar, floating liquid-glass bottom
   tab bar, a morphing menu sheet, and app-style cards. Desktop is untouched:
   the shell elements are display:none above 899px.
   ========================================================================== */

/* ---------- Shell elements are invisible on desktop ---------- */
.m-topbar,
.m-tabbar,
.m-backdrop,
.m-sheet {
    display: none;
}

@media (max-width: 899px) {

    /* ======================================================================
       1. GLOBAL APP FRAME
       ====================================================================== */
    :root {
        --edge: 18px;
        /* every page already pads content by --nav-h; give it the safe area too */
        --nav-h: calc(76px + env(safe-area-inset-top, 0px));
        --m-tab-space: calc(102px + env(safe-area-inset-bottom, 0px));
    }

    html {
        scroll-padding-top: var(--nav-h);
        -webkit-text-size-adjust: 100%;
    }

    body {
        padding-bottom: var(--m-tab-space);
        -webkit-tap-highlight-color: transparent;
        animation: mPageIn 0.45s ease both;
    }

    @keyframes mPageIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    /* Retire the desktop chrome on phones — the app shell replaces it */
    nav[aria-label="Main navigation"],
    .theme-toggle,
    .theme-indicator,
    .mobile-nav-overlay,
    .mobile-nav-sidebar,
    .particles,
    .video-particles,
    .scroll-hint {
        display: none !important;
    }

    .scroll-progress {
        top: 0;
    }

    .container {
        padding-left: var(--edge);
        padding-right: var(--edge);
    }

    .section {
        padding: 2.4rem 0;
        scroll-margin-top: var(--nav-h);
    }

    .section>.container>h2,
    h2.reveal {
        font-size: clamp(1.85rem, 8.4vw, 2.4rem) !important;
        margin-bottom: 1.3rem !important;
    }

    .projects-hint {
        font-size: 0.74rem;
    }

    footer {
        padding: 1.6rem 0 0.4rem;
    }

    /* Inputs at 16px stop iOS from zooming the page on focus */
    input,
    textarea,
    select {
        font-size: 16px !important;
    }

    /* ======================================================================
       2. TOP BAR  (brand pill · theme · menu) — floating liquid glass
       ====================================================================== */
    .m-topbar {
        display: flex;
        position: fixed;
        z-index: 1300;
        top: calc(env(safe-area-inset-top, 0px) + 10px);
        left: 12px;
        right: 12px;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        pointer-events: none;
    }

    .m-topbar>* {
        pointer-events: auto;
    }

    /* shared glass surface */
    .m-glass {
        position: relative;
        background: var(--m-glass-bg);
        border: 1px solid var(--m-glass-border);
        -webkit-backdrop-filter: blur(24px) saturate(200%) brightness(1.06);
        backdrop-filter: blur(24px) saturate(200%) brightness(1.06);
        box-shadow: var(--m-glass-shadow);
        isolation: isolate;
    }

    /* bright specular rim, like light catching the edge of real glass */
    .m-glass::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        background: var(--m-rim);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
        pointer-events: none;
        z-index: 2;
    }

    .m-brand {
        height: 46px;
        padding: 0 18px 0 15px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        gap: 9px;
        font-family: var(--font-mono);
        font-weight: 600;
        font-size: 0.95rem;
        letter-spacing: -0.01em;
        color: var(--paper);
        text-decoration: none;
        transition: transform 0.25s var(--ease);
    }

    .m-brand:active {
        transform: scale(0.96);
    }

    .m-brand-dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--signal);
        box-shadow: 0 0 12px var(--signal);
    }

    .m-top-actions {
        display: flex;
        gap: 10px;
    }

    .m-glass-btn {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--paper);
        font-size: 1.02rem;
        cursor: pointer;
        padding: 0;
        transition: transform 0.25s var(--ease);
    }

    .m-glass-btn:active {
        transform: scale(0.9);
    }

    .m-theme i {
        transition: transform 0.5s var(--ease);
    }

    .m-theme:active i {
        transform: rotate(40deg) scale(0.9);
    }

    html:not(.light-mode) .m-theme i {
        color: var(--iris);
    }

    html.light-mode .m-theme i {
        color: var(--signal);
    }

    /* hamburger → X */
    .m-burger {
        position: relative;
        width: 18px;
        height: 12px;
        display: block;
    }

    .m-burger i {
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
        transition: transform 0.4s var(--ease), opacity 0.25s ease, top 0.4s var(--ease);
    }

    .m-burger i:nth-child(1) {
        top: 0;
    }

    .m-burger i:nth-child(2) {
        top: 5px;
        width: 70%;
    }

    .m-burger i:nth-child(3) {
        top: 10px;
    }

    .m-menu-btn[aria-expanded="true"] .m-burger i:nth-child(1) {
        top: 5px;
        transform: rotate(45deg);
    }

    .m-menu-btn[aria-expanded="true"] .m-burger i:nth-child(2) {
        opacity: 0;
    }

    .m-menu-btn[aria-expanded="true"] .m-burger i:nth-child(3) {
        top: 5px;
        transform: rotate(-45deg);
    }

    /* ======================================================================
       3. BOTTOM TAB BAR — floating liquid glass with a sliding "lens"
       ====================================================================== */
    .m-tabbar {
        display: block;
        position: fixed;
        z-index: 1300;
        left: 14px;
        right: 14px;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
        height: 70px;
        padding: 6px;
        border-radius: 36px;
        transition: transform 0.4s var(--ease), opacity 0.3s ease;
    }

    /* hide while typing so the on-screen keyboard never fights it */
    body.m-kb .m-tabbar {
        transform: translateY(140%);
        opacity: 0;
        pointer-events: none;
    }

    .m-tabs {
        position: relative;
        height: 100%;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
    }

    .m-lens {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 20%;
        border-radius: 30px;
        background: var(--m-lens);
        border: 1px solid var(--m-lens-border);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 14px rgba(0, 0, 0, 0.18);
        transform: translateX(calc(var(--i, 0) * 100%));
        transition: transform 0.55s cubic-bezier(0.34, 1.32, 0.5, 1), opacity 0.25s ease;
        pointer-events: none;
    }

    .m-tabbar[data-active="-1"] .m-lens {
        opacity: 0;
    }

    .m-tab {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        color: var(--paper-dim);
        font-family: var(--font-body);
        font-size: 0.64rem;
        font-weight: 600;
        letter-spacing: 0.01em;
        text-decoration: none;
        background: none;
        border: 0;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: color 0.3s ease;
    }

    .m-tab i {
        font-size: 1.14rem;
        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .m-tab.is-active {
        color: var(--signal);
    }

    .m-tab.is-active i {
        transform: translateY(-1px) scale(1.1);
    }

    .m-tab:active i {
        transform: scale(0.82);
    }

    /* ======================================================================
       4. MENU SHEET — the top bar "expands" into an app-grid
       ====================================================================== */
    .m-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1350;
        background: rgba(6, 5, 10, 0.5);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.35s ease, visibility 0.35s;
    }

    .m-backdrop.is-open {
        opacity: 1;
        visibility: visible;
    }

    .m-sheet {
        display: block;
        position: fixed;
        z-index: 1400;
        top: calc(env(safe-area-inset-top, 0px) + 10px);
        left: 12px;
        right: 12px;
        max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px);
        overflow-y: auto;
        overscroll-behavior: contain;
        border-radius: 34px;
        padding: 10px 14px 18px;
        /* extra tint so page content never bleeds through the open sheet */
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04) 60%, rgba(255, 255, 255, 0.08)), var(--m-sheet-tint);
        transform-origin: 92% 0;
        transform: scale(0.82) translateY(-14px);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.5s cubic-bezier(0.34, 1.3, 0.5, 1), opacity 0.3s ease, visibility 0.5s;
    }

    .m-sheet.is-open {
        transform: none;
        opacity: 1;
        visibility: visible;
    }

    .m-sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 46px;
        padding-bottom: 8px;
    }

    .m-sheet-head .m-brand {
        padding-left: 4px;
    }

    .m-sheet-label {
        font-family: var(--font-mono);
        font-size: 0.68rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--paper-faint);
        margin: 10px 4px 10px;
    }

    .m-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px 4px;
    }

    .m-tile {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 7px;
        padding: 10px 2px 8px;
        border-radius: 20px;
        color: var(--paper);
        text-decoration: none;
        font-size: 0.74rem;
        font-weight: 600;
        -webkit-tap-highlight-color: transparent;
        transition: transform 0.25s var(--ease), background 0.25s ease;
        opacity: 0;
        transform: translateY(10px) scale(0.92);
    }

    .m-sheet.is-open .m-tile {
        opacity: 1;
        transform: none;
        transition: opacity 0.4s ease calc(var(--d, 0) * 35ms + 120ms), transform 0.5s cubic-bezier(0.34, 1.4, 0.5, 1) calc(var(--d, 0) * 35ms + 120ms), background 0.25s ease;
    }

    .m-tile:active {
        transform: scale(0.92) !important;
        background: rgba(255, 255, 255, 0.08);
    }

    .m-tile-icon {
        width: 54px;
        height: 54px;
        border-radius: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
        color: #fff;
        background: linear-gradient(150deg, var(--c1), var(--c2));
        box-shadow: 0 8px 18px -6px var(--c1), inset 0 1px 0 rgba(255, 255, 255, 0.45);
    }

    .m-tile.is-current .m-tile-icon {
        outline: 2px solid var(--signal);
        outline-offset: 2px;
    }

    .m-sheet-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid var(--m-glass-border);
    }

    .m-social {
        display: flex;
        gap: 8px;
    }

    .m-social a {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--paper);
        background: var(--lg-dot-bg);
        border: 1px solid var(--lg-dot-border);
        text-decoration: none;
        font-size: 1rem;
        transition: transform 0.25s var(--ease);
    }

    .m-social a:active {
        transform: scale(0.88);
    }

    .m-seg {
        display: inline-flex;
        padding: 3px;
        border-radius: 999px;
        background: var(--lg-input-bg);
        border: 1px solid var(--lg-input-border);
    }

    .m-seg button {
        border: 0;
        background: transparent;
        color: var(--paper-dim);
        font-family: var(--font-body);
        font-size: 0.72rem;
        font-weight: 600;
        padding: 8px 13px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
        transition: background 0.3s ease, color 0.3s ease;
    }

    .m-seg button.is-on {
        background: var(--signal);
        color: #fff;
    }

    /* the sheet replaces the top bar while open */
    html.m-lock .m-topbar {
        opacity: 0;
        pointer-events: none;
    }

    html.m-lock,
    html.m-lock body {
        overflow: hidden !important;
    }

    /* ======================================================================
       5. HOME PAGE — app-style screens
       ====================================================================== */
    .marquee-strip {
        font-size: 0.78rem;
    }

    /* Work experience — stacked glass cards */
    .experience-list {
        gap: 12px;
    }

    .experience-item {
        grid-template-columns: 1fr;
        gap: 0.8rem;
        padding: 1.25rem;
        border: 1px solid var(--m-glass-border);
        border-radius: 28px;
        background: var(--m-glass-bg);
        box-shadow: var(--m-glass-shadow);
        -webkit-backdrop-filter: blur(20px) saturate(170%);
        backdrop-filter: blur(20px) saturate(170%);
    }

    .experience-media {
        min-height: 170px;
        border-radius: 20px;
    }

    /* Achievements */
    .achievements-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .achievement-card {
        padding: 1.3rem;
        border-radius: 26px;
    }

    /* Skills */
    .skill-tile {
        border-radius: 20px;
    }

    /* Languages */
    .languages-layout {
        gap: 1.2rem;
    }

    .languages-track {
        gap: 12px;
    }

    .lang-card {
        border-radius: 28px;
    }

    /* More to explore */
    .teaser-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .teaser-card {
        border-radius: 28px;
    }

    /* Contact */
    .contact-liquid {
        border-radius: 30px;
        padding: 1.4rem 1.2rem 1.6rem;
    }

    /* ======================================================================
       6. CERTIFICATES & VIDEOS PAGES
       ====================================================================== */
    .certificates-hero {
        padding-top: calc(var(--nav-h) + 6px) !important;
    }

    .view-controls {
        display: flex;
        gap: 8px;
        justify-content: center;
    }

    /* modals respect the notch / home indicator */
    .modal-content {
        max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px);
    }

    .close-modal {
        top: calc(env(safe-area-inset-top, 0px) + 10px);
    }
}

/* Small phones */
@media (max-width: 360px) {
    .m-brand {
        font-size: 0.86rem;
        padding: 0 14px 0 12px;
    }

    .m-tab {
        font-size: 0.58rem;
    }

    .m-tile-icon {
        width: 48px;
        height: 48px;
    }
}

/* Reduced motion: keep the layout, drop the flourish */
@media (prefers-reduced-motion: reduce) {

    .m-lens,
    .m-sheet,
    .m-tile,
    .m-tab i,
    .m-burger i,
    body {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* Browsers without backdrop-filter get a more opaque glass so text stays legible */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

    .m-glass,
    .m-sheet,
    .m-tabbar {
        background: var(--panel);
    }
}


/* ==========================================================================
   SWIPE CAROUSELS (mobile) — About beats, Achievements, Languages, Explore.
   mobile.js adds .m-swipe to the row, .m-slide to each card, and a dots bar.
   ========================================================================== */
.m-dots-wrap {
    display: none;
}

@media (max-width: 899px) {
    .m-swipe {
        --sw: min(86vw, 380px);
        position: relative;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch;
        gap: 12px !important;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: calc((100vw - var(--sw)) / 2);
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        margin-left: calc(-1 * var(--edge)) !important;
        margin-right: calc(-1 * var(--edge)) !important;
        padding: 6px calc((100vw - var(--sw)) / 2) 18px !important;
        grid-template-columns: none !important;
    }

    .m-swipe::-webkit-scrollbar {
        display: none;
    }

    .m-swipe>.m-slide {
        flex: 0 0 var(--sw) !important;
        width: var(--sw) !important;
        min-height: 0 !important;
        margin: 0 !important;
        scroll-snap-align: center;
        scroll-snap-stop: always;
        transform: none !important;
        filter: none !important;
        opacity: 0.55 !important;
        scale: 0.95;
        transition: opacity 0.4s ease, scale 0.55s var(--ease) !important;
    }

    .m-swipe>.m-slide.is-snap {
        opacity: 1 !important;
        scale: 1;
    }

    .m-dots-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin: -4px 0 4px;
    }

    /* Card-stack decks (Achievements etc.): the back cards peek out below the
       top card, so the swipe hint + dots sit lower to clear them */
    .m-stack+.m-dots-wrap {
        margin: 26px 0 10px;
    }

    /* the pile fans out to the right: the cards peeking out on that side show
       the top card can be pulled away - no "swipe" label needed */
    .m-stack {
        margin-right: auto !important;
        left: -9px;
    }

    /* Keep the fixed glass bars on their own compositor layers and make sure
       nothing flying out of a stack can ever widen the page, otherwise the
       bars can blink while a card is flicked away */
    .m-topbar,
    .m-tabbar,
    .theme-toggle {
        will-change: transform;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    html,
    body {
        overflow-x: clip;
    }

    /* dots: the active one stretches toward the next card like a little arrow trail */
    .m-stack+.m-dots-wrap .m-dots button.is-on {
        width: 28px;
    }

    .m-swipe-hint {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: var(--font-mono);
        font-size: 0.64rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--paper-faint);
        transition: opacity 0.5s ease, max-width 0.5s ease;
        max-width: 90px;
        overflow: hidden;
        white-space: nowrap;
    }

    .m-swipe-hint i {
        animation: mNudge 1.6s ease-in-out infinite;
        color: var(--signal);
    }

    .m-dots-wrap.is-used .m-swipe-hint {
        opacity: 0;
        max-width: 0;
    }

    @keyframes mNudge {
        50% {
            transform: translateX(-4px);
        }
    }

    .m-dots {
        display: flex;
        gap: 7px;
        align-items: center;
    }

    .m-dots button {
        width: 7px;
        height: 7px;
        padding: 0;
        border: 0;
        border-radius: 7px;
        background: var(--hairline-strong);
        cursor: pointer;
        transition: width 0.45s var(--ease), background 0.3s ease;
    }

    .m-dots button.is-on {
        width: 24px;
        background: var(--signal);
    }

    /* About: the portrait stays on top; the four beats swipe underneath */


    /* the language photo / aside stays put above its swipe row */
    .languages-track.m-swipe>.lang-card {
        height: auto;
    }

    /* ======================================================================
       MENU SHEET — extra motion: circular reveal from the burger, light
       sweep, springy icons, staggered label/footer
       ====================================================================== */
    .m-sheet {
        overflow-x: hidden;
        touch-action: pan-y;
        clip-path: circle(0px at calc(100% - 34px) 34px);
        transition: transform 0.55s cubic-bezier(0.34, 1.3, 0.5, 1), opacity 0.3s ease, visibility 0.6s, clip-path 0.65s cubic-bezier(0.65, 0, 0.2, 1);
    }

    .m-sheet.is-open {
        clip-path: circle(170% at calc(100% - 34px) 34px);
    }

    .m-sheet::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: -60%;
        width: 40%;
        background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.22), transparent);
        transform: skewX(-18deg);
        opacity: 0;
        pointer-events: none;
        z-index: 2;
    }

    .m-sheet.is-open::after {
        animation: mSheen 1.2s ease 0.25s both;
    }

    @keyframes mSheen {
        from {
            left: -60%;
            opacity: 0.9;
        }

        to {
            left: 130%;
            opacity: 0;
        }
    }

    .m-tile-icon {
        position: relative;
        transform: scale(0.5) rotate(-16deg);
        transition: transform 0.6s cubic-bezier(0.34, 1.8, 0.5, 1) calc(var(--d, 0) * 35ms + 220ms);
    }

    .m-sheet.is-open .m-tile-icon {
        transform: none;
    }

    .m-tile:active .m-tile-icon {
        transform: scale(0.9) rotate(-6deg);
        transition-delay: 0s;
    }

    .m-tile.is-current .m-tile-icon {
        outline: 0;
    }

    .m-tile.is-current .m-tile-icon::after {
        content: '';
        position: absolute;
        inset: -3px;
        border-radius: inherit;
        border: 2px solid var(--signal);
        animation: mRing 2s ease-out infinite;
    }

    @keyframes mRing {
        from {
            transform: scale(0.96);
            opacity: 0.9;
        }

        to {
            transform: scale(1.28);
            opacity: 0;
        }
    }

    .m-sheet-label,
    .m-sheet-foot {
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.4s ease, transform 0.5s var(--ease);
    }

    .m-sheet.is-open .m-sheet-label {
        opacity: 1;
        transform: none;
        transition-delay: 0.25s;
    }

    .m-sheet.is-open .m-sheet-foot {
        opacity: 1;
        transform: none;
        transition-delay: 0.6s;
    }

    .m-sheet.is-open .m-sheet-head .m-brand-dot {
        animation: mDot 1.8s ease-in-out infinite;
    }

    @keyframes mDot {
        50% {
            transform: scale(1.5);
            box-shadow: 0 0 18px var(--signal);
        }
    }
}

@media (prefers-reduced-motion: reduce) {

    .m-sheet::after,
    .m-tile.is-current .m-tile-icon::after,
    .m-swipe-hint i,
    .m-sheet.is-open .m-sheet-head .m-brand-dot {
        animation: none;
    }

    .m-swipe>.m-slide {
        transition: none !important;
    }
}


/* Footer text: one line on phones */
@media (max-width: 899px) {
    footer .container {
        padding: 0.9rem 0.8rem;
    }

    footer p {
        flex-wrap: nowrap;
        white-space: nowrap;
        gap: 0.4rem;
        font-size: clamp(0.54rem, 2.7vw, 0.7rem);
        letter-spacing: 0;
    }

    footer p::before {
        width: 6px;
        height: 6px;
    }
}


/* ==========================================================================
   CARD STACKS (phones) — Achievements, Languages, More to explore.
   mobile.js adds .m-stack to the row and .m-card to each card.
   ========================================================================== */
@media (max-width: 899px) {
    .m-stack {
        position: relative;
        display: block !important;
        width: min(86vw, 380px);
        margin: 0 auto !important;
        padding: 0 !important;
        overflow: visible;
        grid-template-columns: none !important;
        touch-action: pan-y;
        -webkit-user-select: none;
        user-select: none;
    }

    .m-stack>.m-card {
        position: absolute !important;
        left: 0;
        right: 0;
        top: 0;
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        overflow: hidden;
        transform-origin: 50% 100%;
        cursor: grab;
        /* back cards must not show the ones behind them through the glass */
        background: var(--card-accent-bg, none), linear-gradient(155deg, var(--panel-2), var(--ink-2)) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.38);
    }

    .m-stack>.m-card:active {
        cursor: grabbing;
    }

    .m-stack>.m-card img {
        -webkit-user-drag: none;
        pointer-events: none;
    }
}