/* ============================================
   MOBILE OPTIMIZATIONS
   ============================================ */

@media (max-width: 768px) {

    /* Reduce blur effects for better performance */
    .glass-nav,
    .modal>div,
    .brew-pill,
    .tile {
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
    }

    /* Center brand logo on mobile */
    .brand-logo {
        top: 15px;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        font-size: 2.5rem;
        letter-spacing: 2px;
        /* Disable animations on mobile for performance */
        animation: none !important;
    }

    /* Disable 3D transforms on mobile */
    .brand-logo,
    .tile {
        transform-style: flat !important;
        perspective: none !important;
    }

    /* Reduce navigation size */
    .glass-nav {
        top: 70px;
        padding: 8px 20px;
        gap: 16px;
    }

    .nav-btn {
        padding: 10px;
    }

    .nav-btn .material-symbols-rounded {
        font-size: 20px;
    }

    /* Adjust heading spacing for mobile */
    h1 {
        margin-top: 8rem;
        margin-bottom: 2rem;
        font-size: clamp(1.5rem, 6vw, 2.5rem);
    }

    /* Reduce pill spacing */
    .brew-pill:first-child {
        margin-top: 1rem;
    }

    .brew-pill {
        margin-bottom: 16px;
    }

    /* Simplify modal on mobile */
    .modal>div {
        width: 95%;
        max-height: 90vh;
        padding: 32px 24px 40px;
    }

    .modal h2 {
        font-size: 1.5rem;
    }

    /* Disable magnetic effects on mobile */
    .tile:hover {
        transform: translateY(-4px) !important;
    }

    /* Reduce tile grid gap */
    .tile-grid {
        gap: 16px;
        padding: 0 16px;
    }

    /* Disable hover effects that cause lag */
    .brew-pill,
    .action-btn,
    .nav-btn {
        transition: none !important;
    }

    /* Simplify detail items */
    .detail-item {
        padding: 10px;
    }

    /* Make FAB smaller */
    .fab {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
    }

    /* Reduce scroll animation / Spline complexity */
    #canvas3d {
        display: none;
    }

    .v-container {
        min-height: 50vh;
        background: linear-gradient(180deg,
                rgba(20, 12, 8, 0.9) 0%,
                rgba(20, 12, 8, 0.5) 100%);
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    .brand-logo {
        font-size: 2rem;
        top: 12px;
    }

    .glass-nav {
        top: 60px;
        padding: 6px 16px;
        gap: 12px;
    }

    h1 {
        margin-top: 7rem;
    }

    .tile-grid {
        grid-template-columns: 1fr;
    }

    .detail-grid {
        grid-template-columns: 1fr;
    }

    .skill-btn {
        padding: 12px;
        min-width: 60px;
    }

    .skill-btn .skill-text {
        display: none;
    }
}

/* === Troubleshooting Responsive Layout === */
@media (max-width: 768px) {

    div.trouble-desktop-table,
    .trouble-desktop-table,
    .trouble-desktop-table table {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        z-index: -1 !important;
    }

    .trouble-mobile-pills {
        display: flex !important;
        flex-direction: column;
        gap: 12px;
        margin-top: 20px;
    }
}