@media (max-width: 1700px) {
    .brawler-grid{
        grid-template-columns: repeat(3, 1fr);
    }
    .battle-log-player-friendly img,
    .battle-log-player-enemy img {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
    }
    .battle-log-friendly-info a,
    .battle-log-enemy-info a{
        font-size: var(--font-sm) !important;
    }
    .battle-log-friendly-info p,
    .battle-log-enemy-info p{
        font-size: var(--font-xs) !important;
    }
}

@media (max-width: 1200px) {
    .left-right-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .left-right-grid > div:nth-child(2) .card {
        flex: unset; 
    }
    .card {
        height: 600px;
    }
    .brawler-grid{
        grid-template-columns: repeat(4, 1fr);
    }
    .battle-log-friendly-info a,
    .battle-log-enemy-info a{
        font-size: var(--font-base) !important;
    }
    .battle-log-friendly-info p,
    .battle-log-enemy-info p{
        font-size: var(--font-sm) !important;
    }
}

@media (max-width: 850px) {
    .brawler-grid{
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 630px) {
    .battle-log-main {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 5px;
    }
    .map-image {
        width: 30%;
        margin: 10px 0;
    }
    .mode-icon {
        position: absolute;
        top: 10px;
    }
    .truncate {
        display: flex-end;     
        max-width: 100%;          
        white-space: nowrap;     
        overflow: hidden;          
        text-overflow: ellipsis;     
        vertical-align: bottom;   
    }
    .battle-log-player-friendly,
    .battle-log-player-enemy {
        width: 100% !important;
    }

}

@media (max-width: 450px) {
    .brawler-grid{
        grid-template-columns: repeat(2, 1fr);
    }
    .stat-icon{
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
    }
}