/* Mobile-specific styles */
@media screen and (max-width: 768px) {
    /* Navigation adjustments */
    .nav-container {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--color-background);
        border-top: 1px solid var(--color-border);
        z-index: 1000;
        padding: 0.5rem;
        height: auto;
        display: flex;
        justify-content: center;
    }

    .nav-links {
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 0;
        width: 100%;
        max-width: 600px;
    }

    .nav-links a {
        padding: 0.5rem;
        font-size: 0.9rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
        text-decoration: none;
    }

    .nav-links a i {
        font-size: 1.2rem;
    }

    /* Add padding to main content to account for fixed nav */
    .container {
        padding-bottom: 4rem;
    }

    /* Base font size adjustments */
    body {
        font-size: 14px;
    }

    h1 {
        font-size: 1.8em;
    }

    h2 {
        font-size: 1.5em;
    }

    h3 {
        font-size: 1.3em;
    }

    h4 {
        font-size: 1.1em;
    }

    /* Unit page specific adjustments */
    .unit-header-container {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .unit-illustration {
        max-width: 100%;
        transform: scale(1);
    }

    .unit-illustration-container {
        padding: 1rem;
    }

    .unit-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .unit-card-header {
        padding: 1rem;
    }

    .ranking-section {
        margin: 1rem 0;
        padding: 0.75rem;
    }

    .ranking-values {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .skill-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .ee-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .revolution-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .investment-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .rankings-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .requirements-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .iw-alternatives {
        flex-direction: column;
        gap: 1rem;
    }

    .iw-option {
        width: 100%;
    }

    .iw-option img {
        width: 100%;
        max-width: 220px;
    }

    /* Counter section adjustments */
    .counter-questions {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .combinations-container {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .counter-units {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    /* Team building adjustments */
    .teambuilding-questions {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .synergies-container {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .teams-container {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .team-row {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }

    /* Card padding adjustments */
    .skill-card, .revolution-card, .ee-card, .investment-content > div, .revolution-pvp {
        padding: 1rem;
        margin-bottom: 1rem;
    }

    /* Info icon tooltip adjustments */
    .info-icon .tooltip-text {
        max-width: 250px;
        font-size: 12px;
    }

    /* Revolution icons adjustments */
    .revolution-icons {
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: center;
    }

    .revolution-icon {
        width: 60px;
    }

    .revolution-icon-circle {
        width: 60px;
        height: 60px;
    }

    /* Investment tabs adjustments */
    .investment-tabs {
        display: flex;
        gap: 0.5rem;
        overflow-x: auto;
        padding: 0.5rem 0;
    }

    .investment-tab {
        font-size: 0.9rem;
        padding: 0.5rem;
        white-space: nowrap;
    }

    /* Back button adjustments */
    .back-button-wrapper {
        margin: 1rem 0;
    }

    .back-button {
        width: 100%;
        justify-content: center;
    }

    /* Text size adjustments for all content sections */
    .skill-card p,
    .revolution-card p,
    .ee-card p,
    .revolution-pvp p,
    .investment-content p,
    .counter-question p,
    .teambuilding-question p,
    .synergy-explanation,
    .team-explanation,
    .additional-info p,
    .combination-explanation p,
    .iw-notes p,
    .revolution-substat,
    .subnode-list li,
    .ranking-value p,
    .explanation-text p {
        font-size: 0.9rem;
        line-height: 1.4;
    }

    /* Revolution section specific adjustments */
    .revolution-card h3,
    .revolution-pvp h3 {
        font-size: 1.1em;
    }

    .revolution-card p,
    .revolution-pvp p {
        font-size: 0.9rem;
    }

    /* Section title adjustments */
    .section-title {
        font-size: 1.2em !important;
    }

    .subsection-title {
        font-size: 1.1em !important;
    }

    /* Collapsible button adjustments */
    .collapsible {
        font-size: 1.1em;
    }
} 