@media (max-width: 1899px) {
    .calculator-wrapper {
        max-width: 1100px;
        margin: 0 auto;
    }
}

@media (max-width: 1799px) {
    .palworld-header h1 {
        font-size: 2.6rem;
    }
}

@media (max-width: 1699px) {
    .calculator-wrapper {
        padding: 2rem;
    }
}

@media (max-width: 1599px) {
    :root { --global-font-size-html: 17px; }
    body .container { max-width: 1400px; }
}

@media (max-width: 1499px) {
    :root { --global-font-size-html: 16px; }
    body .container { max-width: 1300px; }
    .selector-card { padding: 1.2rem; }
}

@media (max-width: 1399px) {
    :root { --global-font-size-html: 15px; }
    body .container { max-width: 1200px; }
}

@media (max-width: 1299px) {
    :root { --global-font-size-html: 14px; }
    body .container { max-width: 1100px; }
    .combos-table th, .combos-table td { padding: 10px 8px; }
}

@media (max-width: 1199px) {
    :root { --global-font-size-html: 13px; }
    body .container { max-width: 1000px; }
}

@media (max-width: 1099px) {
    :root { --global-font-size-html: 12px; }
    body .container { max-width: 950px; }
}

@media (max-width: 1024px) {
    :root { --global-font-size-html: 11px; }
    body .container { max-width: initial; }
    .tab-btn { padding: 10px 18px; }
}

@media (max-width: 768px) {
    :root { --global-font-size-html: 14px; }

    body .flex-row { flex-direction: column !important; }
    body .flex-row .col-1,
    body .flex-row .col-2,
    body .flex-row .col-3,
    body .flex-row .col-4,
    body .flex-row .col-5,
    body .flex-row .col-6,
    body .flex-row .col-7,
    body .flex-row .col-8,
    body .flex-row .col-9,
    body .flex-row .col-10,
    body .flex-row .col-11,
    body .flex-row .col-12 { 
        flex: 0 0 100% !important; 
        width: 100% !important; 
        padding: 10px 0 !important;
    }

    .breeder-heart {
        transform: rotate(90deg);
        margin: 1.5rem 0;
    }
    
    .calc-tabs {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .tab-btn {
        width: 100%;
        text-align: center;
    }
    
    .combos-table thead {
        display: none;
    }
    
    .combos-table, .combos-table tbody, .combos-table tr, .combos-table td {
        display: block;
        width: 100%;
    }
    
    .combos-table tr {
        margin-bottom: 1.2rem;
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 6px;
        padding: 10px;
    }
    
    .combos-table td {
        text-align: center;
        border-bottom: none;
        padding: 6px;
    }
    
    .table-plus {
        transform: rotate(90deg);
        display: inline-block;
        margin: 4px 0;
    }
}