/* ==================== MOBILE STYLES ==================== */

/* Touch actions for all interactive elements */
@media (max-width: 768px) {
    button,
    a,
    .tab-btn,
    .collapsible-toggle,
    .social-icon {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
    }

    /* Remove tap highlight delay */
    * {
        -webkit-tap-highlight-color: transparent;
    }
}

/* Tablet & Mobile */
@media (max-width: 768px) {
    body {
        max-width: 100%;
        width: 100vw;
        margin: 0;
        padding: 0;
    }

    /* Make profile non-clickable on mobile */
    .profile {
        cursor: default;
        pointer-events: none;
    }

    header {
        text-align: center;
    }

    .theme-switch {
        top: 10px;
        left: 10px;
        transform: none;
    }

    main {
        padding: 10px;
    }

    .resume-container {
        width: 100%;
        max-width: none;
        padding: 10px;
        justify-content: center;
        text-align: center;
    }

    .left-column, .right-column {
        width: 100%;
        margin-bottom: 15px;
    }

    .profile-img {
        width: 220px;
        height: 220px;
    }

    .social-links {
        justify-content: center;
    }

    .card {
        width: 100%;
    }

    h1 { font-size: 30px; }
    .name { font-size: 25px; }

    .tabs-header {
        flex-direction: column;
    }

    .tab-btn {
        min-width: 100%;
    }

    /* Hide project images on mobile */
    .project-image {
        display: none;
    }

    /* Hide eyes on mobile */
    .eyes-container {
        display: none !important;
    }

    /* Hide lasers on mobile */
    .lasers-svg {
        display: none !important;
    }

    /* Hide laser effects on mobile */
    .laser-burn-point,
    .heat-distortion,
    .smoke-particle {
        display: none !important;
    }

    /* Center project cards on mobile */
    .project-header {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        text-align: center;
    }

    .project-title-group {
        align-items: center;
    }

    .project-description {
        text-align: center;
    }

    .project-tech {
        justify-content: center;
    }

    .project-features {
        grid-template-columns: 1fr;
    }

    .project-features li {
        justify-content: center;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    h1 { font-size: 24px; }
    .profile-img { width: 200px; height: 200px; }
    h2, h3 { font-size: 1.2em; }
    .skills-list li, .experience-list li { font-size: 0.9em; }
    .social-icon { font-size: 1em; }

    .featured-skill {
        padding: 14px 16px;
    }

    .featured-skill .skill-icon {
        width: 45px;
        height: 45px;
        font-size: 22px;
    }

    .featured-skill .skill-name {
        font-size: 1em;
    }

    .project-card {
        padding: 18px;
    }

    .project-header {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        text-align: center;
    }

    .project-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .project-title {
        font-size: 1.1em;
    }

    .project-title-group {
        align-items: center;
    }

    .project-image {
        height: 150px;
    }

    .project-features {
        grid-template-columns: 1fr;
    }

    .project-features li {
        justify-content: center;
    }

    .tech-tag {
        font-size: 0.65em;
        padding: 4px 8px;
    }

    .project-description {
        text-align: center;
    }

    .project-tech {
        justify-content: center;
    }

    .contact-info p {
        font-size: 0.85em;
    }
}