/* Tablet and smaller screens */
@media (max-width: 1024px) {
    .container {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 15px;
    }
    
    .right-panel {
        height: auto;
        min-height: 60vh;
    }
    
    .header h1 {
        font-size: 24px;
    }
    
    .section {
        padding: 10px;
    }
    
    .buffs-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .equipment-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .equipment-compact-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }
    
    .equipment-compact-item {
        padding: 6px;
    }
    
    .equipment-compact-icon {
        font-size: 24px;
    }
    
    .equipment-compact-label {
        font-size: 11px;
    }

    .builds-bar {
        width: auto;
        margin: 0 15px;
        flex-wrap: wrap;
    }

    .builds-select {
        flex: 1;
        min-width: 0;
    }

    .builds-actions {
        width: 100%;
        justify-content: center;
    }

    .builds-btn {
        flex: 1;
    }

    .main-tabs {
        max-width: none;
        margin: 8px 15px;
    }

    .compare-container {
        padding: 15px;
    }

    .compare-controls {
        width: auto;
        margin: 0 15px 15px;
    }

    .compare-results {
        flex-direction: column;
    }

    .compare-column {
        width: 100%;
    }
}

/* Mobile phones */
@media (max-width: 768px) {
    .character-grid {
        grid-template-columns: 1fr;
    }

    .character-level-box {
        grid-row: auto;
    }

    body {
        font-size: 14px;
    }
    
    .container {
        padding: 10px;
        gap: 10px;
    }
    
    .panel, .right-panel {
        padding: 15px;
        border-radius: 8px;
    }
    
    .header {
        padding: 15px;
        margin-bottom: 15px;
    }
    
    .header h1 {
        font-size: 20px;
    }
    
    .header p {
        font-size: 12px;
    }
    
    .section {
        margin-bottom: 12px;
        padding: 10px;
    }
    
    .section h2 {
        font-size: 16px;
        margin-bottom: 12px;
    }
    
    /* Current Stats responsive */
    .current-stats {
        flex-wrap: wrap;
        gap: 4px;
        padding: 8px;
    }
    
    .stat-row {
        padding: 8px 10px;
        font-size: 13px;
    }
    
    .stat-row .stat-icon {
        font-size: 14px;
    }
    
    /* Skills section mobile */
    .skill-bonus {
        font-size: 13px;
        padding: 2px 4px;
    }
    
    .skill-item {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 6px 10px;
        margin-bottom: 3px;
    }
    
    .skill-label {
        flex: 1;
        min-width: 0;
        font-size: 14px;
    }
    
    .skill-icon {
        font-size: 18px;
    }
    
    .skill-controls {
        flex-shrink: 0;
        gap: 8px;
    }
    
    .skill-btn {
        width: 34px;
        height: 34px;
        font-size: 18px;
    }
    
    .skill-value {
        min-width: 30px;
        font-size: 15px;
    }
    
    .skill-input {
        width: 90px;
        padding: 10px;
        font-size: 16px;
    }
    
    /* Equipment section mobile - make it more usable */
    .equipment-grid {
        grid-template-columns: 1fr;
    }
    
    .equipment-item {
        padding: 10px;
    }
    
    .equipment-item label {
        font-size: 14px;
    }
    
    .equipment-input {
        padding: 10px;
        font-size: 16px;
    }
    
    .equipment-subsection h3 {
        font-size: 15px;
        margin-bottom: 10px;
    }
    
    /* Equipment compact grid - make it 2 columns on mobile for better usability */
    .equipment-compact-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    .equipment-compact-item {
        padding: 8px;
        min-height: 80px;
    }
    
    .equipment-compact-icon {
        font-size: 28px;
        margin-bottom: 4px;
    }
    
    .equipment-compact-label {
        font-size: 12px;
        margin-bottom: 4px;
    }
    
    .equipment-header {
        padding: 6px;
        margin-bottom: 4px;
    }
    
    .equipment-stats-box {
        padding: 6px;
        gap: 4px;
    }
    
    .equipment-stat {
        gap: 4px;
    }
    
    .stat-label {
        font-size: 11px;
    }
    
    .equipment-compact-input {
        width: 75px;
        font-size: 14px;
        padding: 6px 8px;
        height: 34px;
    }
    
    .equipment-compact-input-no-suffix {
        width: 75px;
        padding: 6px;
        font-size: 14px;
        height: 34px;
    }
    
    .stat-icon {
        font-size: 12px;
    }
    
    .input-suffix {
        font-size: 11px;
        right: 6px;
    }
    
    .equipment-cost-box {
        padding: 4px 6px;
        margin-top: 4px;
    }
    
    /* Political Bonuses - mobile */
    .bonus-columns {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 0;
    }
    
    .bonus-item-toggle {
        padding: 6px 8px;
    }
    
    .bonus-name,
    .bonus-percent {
        font-size: 12px;
    }
    
    .bonus-dropdown-row {
        padding: 6px 8px;
    }
    
    .bonus-dropdown-label {
        font-size: 12px;
    }
    
    .bonus-select {
        font-size: 12px;
        padding: 3px 6px;
    }
    
    .battle-type-tab {
        padding: 6px 8px;
        font-size: 12px;
    }
    
    .total-bonus-label {
        font-size: 13px;
    }
    
    .total-bonus-value {
        font-size: 16px;
    }
    
    .bonus-input {
        width: 90px;
        padding: 8px 25px 8px 8px;
        font-size: 15px;
        height: 38px;
    }
    
    /* Buffs section mobile */
    .buffs-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    .buff-item {
        padding: 6px;
        min-height: 80px;
    }
    
    .buff-header {
        padding: 8px;
        margin-bottom: 4px;
    }
    
    .buff-label {
        font-size: 12px;
    }
    
    .buff-stats-box {
        padding: 8px;
    }
    
    .buff-value {
        font-size: 13px;
    }
    
    .buff-cost-box {
        padding: 4px 6px;
        margin-top: 4px;
    }
    
    .buff-input {
        width: 90px;
        padding: 8px;
        font-size: 15px;
        height: 38px;
    }
    
    /* Simulation controls mobile */
    .simulation-controls {
        padding: 15px;
        margin-bottom: 15px;
    }
    
    .controls-layout {
        flex-direction: column;
        gap: 15px;
    }
    
    .controls-left {
        width: 100%;
    }
    
    .controls-right {
        width: 100%;
    }
    
    .control-compact-item {
        padding: 12px;
    }
    
    .control-header {
        padding: 10px;
        margin-bottom: 8px;
    }
    
    .control-label {
        font-size: 13px;
    }
    
    .control-stats-box {
        padding: 10px;
        gap: 10px;
    }
    
    .radio-compact label {
        font-size: 13px;
        padding: 8px 12px;
    }
    
    .control-input {
        padding: 10px;
        font-size: 16px;
    }
    
    .control-input-inline {
        padding: 10px;
        font-size: 16px;
        min-height: 44px;
    }
    
    .radio-group {
        flex-direction: column;
        gap: 10px;
    }
    
    .battles-input {
        width: 100%;
        max-width: 150px;
        padding: 12px;
        font-size: 16px;
    }
    
    .simulate-btn {
        padding: 15px 20px;
        font-size: 16px;
        width: 100%;
    }
    
    /* Results section mobile */
    .results {
        padding: 15px;
        min-height: 50vh;
    }
    
    .results h3 {
        font-size: 16px;
        margin-bottom: 12px;
    }
    
    .results-content {
        font-size: 12px;
        line-height: 1.4;
    }
    
    .damage-summary {
        padding: 8px 10px;
        margin-bottom: 10px;
        font-size: 14px;
    }
    
    .summary-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .summary-card {
        padding: 0;
    }
    
    .summary-card-header {
        font-size: 13px;
        padding: 10px 12px;
    }
    
    .summary-icon {
        font-size: 16px;
    }
    
    .summary-card-body {
        padding: 12px;
    }
    
    .summary-stat-main .stat-label {
        font-size: 12px;
    }
    
    .summary-stat-main .stat-value-large {
        font-size: 20px;
    }
    
    .summary-stat .stat-label {
        font-size: 11px;
    }
    
    .summary-stat .stat-value {
        font-size: 14px;
    }
    
    .cost-row {
        padding: 6px 0;
    }
    
    .cost-row .cost-label,
    .cost-row .cost-value {
        font-size: 12px;
    }
    
    .hit-log {
        font-size: 11px;
        padding: 8px;
        max-height: 300px;
    }
    
    /* Scrollbar for mobile */
    .hit-log::-webkit-scrollbar {
        width: 6px;
    }
    
    /* Reset button */
    .reset-skills {
        padding: 10px 15px;
        font-size: 14px;
    }

    .builds-bar {
        width: auto;
        margin: 0 10px;
        padding: 10px;
        flex-wrap: wrap;
    }

    .builds-actions {
        width: 100%;
    }

    .builds-select {
        flex: 1;
        min-width: 0;
        font-size: 12px;
    }

    .builds-btn {
        flex: 1;
        padding: 6px 10px;
        font-size: 11px;
    }

    .main-tabs {
        margin: 8px 10px;
    }

    .compare-container {
        padding: 10px;
    }

    .compare-controls {
        width: auto;
        margin: 0 10px 10px;
    }
}

/* Small mobile phones */
@media (max-width: 480px) {
    .container {
        padding: 8px;
        gap: 8px;
    }
    
    .panel, .right-panel {
        padding: 12px;
    }
    
    .header {
        padding: 12px;
        margin-bottom: 12px;
    }
    
    .header h1 {
        font-size: 18px;
    }
    
    .header p {
        font-size: 11px;
    }
    
    .section {
        padding: 8px;
        margin-bottom: 10px;
    }
    
    .section h2 {
        font-size: 15px;
        margin-bottom: 10px;
    }
    
    .equipment-subsection h3 {
        font-size: 14px;
    }
    
    /* Smaller buttons and controls */
    .skill-item {
        padding: 5px 8px;
        margin-bottom: 2px;
    }
    
    .skill-btn {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }
    
    .skill-value {
        min-width: 26px;
        font-size: 14px;
    }
    
    .skill-bonus {
        font-size: 12px;
    }
    
    .skill-input {
        width: 80px;
        padding: 8px;
    }
    
    /* Equipment compact - still 2 columns but smaller */
    .equipment-compact-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    
    .equipment-compact-item {
        padding: 6px;
        min-height: 75px;
    }
    
    .equipment-compact-icon {
        font-size: 26px;
    }
    
    .equipment-compact-label {
        font-size: 11px;
    }
    
    .equipment-compact-input,
    .equipment-compact-input-no-suffix {
        width: 70px;
        font-size: 13px;
        height: 32px;
        padding: 5px 6px;
    }
    
    /* Buffs */
    .buffs-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    
    .buff-item {
        padding: 5px;
        min-height: 75px;
    }
    
    .buff-header {
        padding: 6px;
    }
    
    .buff-label {
        font-size: 11px;
    }
    
    .buff-value {
        font-size: 12px;
    }
    
    .buff-stats-box {
        padding: 6px;
    }
    
    /* Political Bonuses - small mobile */
    .bonus-columns {
        gap: 8px;
    }
    
    .bonus-name,
    .bonus-percent {
        font-size: 11px;
    }
    
    .bonus-dropdown-label {
        font-size: 11px;
    }
    
    .bonus-select {
        font-size: 11px;
    }
    
    .battle-type-tab {
        padding: 6px 4px;
        font-size: 11px;
    }
    
    .bonus-input {
        width: 85px;
        padding: 7px 22px 7px 7px;
        font-size: 14px;
        height: 36px;
    }
    
    /* Controls */
    .control-compact-item {
        padding: 10px;
    }
    
    .control-header {
        padding: 8px;
    }
    
    .radio-compact label {
        font-size: 12px;
        padding: 6px 10px;
    }
    
    /* Results */
    .results {
        padding: 12px;
        min-height: 40vh;
    }
    
    .results h3 {
        font-size: 15px;
    }
    
    .summary-card-header {
        font-size: 12px;
        padding: 8px 10px;
    }
    
    .summary-card-body {
        padding: 10px;
    }
    
    .summary-stat-main .stat-value-large {
        font-size: 18px;
    }
    
    .hit-log {
        font-size: 10px;
        max-height: 250px;
    }
    
    .hit-log::-webkit-scrollbar {
        width: 4px;
    }

    .builds-bar {
        width: auto;
        margin: 0 8px;
        padding: 8px;
        flex-wrap: wrap;
    }

    .builds-actions {
        width: 100%;
    }

    .builds-select {
        flex: 1;
        min-width: 0;
    }

    .builds-btn {
        flex: 1;
    }

    .main-tabs {
        margin: 8px 8px;
    }

    .compare-container {
        padding: 8px;
    }

    .compare-controls {
        width: auto;
        margin: 0 8px 8px;
    }
}

/* Very small screens (iPhone SE, etc.) */
@media (max-width: 375px) {
    .header h1 {
        font-size: 16px;
    }
    
    .section h2 {
        font-size: 14px;
    }
    
    .equipment-compact-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    
    .equipment-compact-item {
        padding: 5px;
        min-height: 70px;
    }
    
    .equipment-compact-icon {
        font-size: 22px;
    }
    
    .equipment-compact-label {
        font-size: 10px;
    }
    
    .equipment-compact-input,
    .equipment-compact-input-no-suffix {
        width: 65px;
        font-size: 12px;
        height: 30px;
        padding: 4px 5px;
    }
    
    .stat-icon {
        font-size: 11px;
    }
    
    .buffs-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }
    
    .buff-item {
        min-height: 70px;
    }
    
    .skill-item {
        padding: 4px 8px;
        margin-bottom: 2px;
    }
    
    .skill-btn {
        width: 30px;
        height: 30px;
        font-size: 15px;
    }
    
    .skill-value {
        min-width: 24px;
        font-size: 13px;
    }
    
    .bonus-input {
        width: 80px;
        padding: 7px 20px 7px 7px;
        font-size: 13px;
        height: 34px;
    }
}

/* Landscape orientation on mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .container {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    
    .right-panel {
        height: 90vh;
        overflow-y: auto;
    }
    
    .panel {
        max-height: 90vh;
        overflow-y: auto;
    }
    
    .results {
        min-height: auto;
    }
    
    .buffs-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .equipment-compact-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .bonus-columns {
        grid-template-columns: 1fr auto;
        gap: 16px;
    }
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
    /* Ensure all interactive elements are at least 44x44px (Apple's recommendation) */
    .buff-item {
        min-height: 44px;
    }
    
    .simulate-btn {
        min-height: 48px;
    }
    
    .skill-btn {
        min-width: 44px;
        min-height: 44px;
    }
    
    .radio-compact label {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .control-input,
    .skill-input,
    .equipment-input,
    .battles-input,
    .equipment-compact-input,
    .equipment-compact-input-no-suffix,
    .bonus-input {
        min-height: 44px;
        font-size: 16px; /* Prevent zoom on iOS */
    }
    
    .equipment-compact-item {
        min-height: 44px;
    }
    
    .bonus-item-toggle {
        min-height: 36px;
        display: flex;
        align-items: center;
    }
    
    .bonus-select {
        min-height: 32px;
        font-size: 13px;
    }

    .builds-select {
        min-height: 44px;
        font-size: 16px;
    }

    .builds-btn {
        min-height: 44px;
        font-size: 14px;
    }
    
    .bonus-dropdown-row {
        min-height: 36px;
    }
    
    .battle-type-tab {
        min-height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* High DPI screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .panel, .right-panel {
        border-width: 0.5px;
    }
    
    .section {
        border-width: 0.5px;
    }
    
    .buff-item,
    .equipment-compact-item,
    .bonus-item-toggle,
    .bonus-dropdown-row {
        border-width: 0.5px;
    }
}

/* Prevent horizontal scrolling on mobile */
@media (max-width: 768px) {
    body {
        overflow-x: hidden;
    }
    
    .container {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    .panel,
    .right-panel {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }
    
    .section {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }
    
    /* Ensure grids don't overflow */
    .equipment-compact-grid,
    .buffs-grid,
    .bonus-columns {
        width: 100%;
        max-width: 100%;
    }
}