#history{
display:flex;
flex-direction:column;
gap:10px;
}

#history .history-card{
position:relative;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:14px 18px;
border-radius:16px;
background:#151124;
border:1px solid rgba(56,189,248,.15);
border-left:4px solid #38bdf8;
transition:.2s;
}

#history .history-card:hover{
border-color:rgba(56,189,248,.4);
transform:translateY(-1px);
}

#history .history-loss{
border-left-color:#fb7185;
}

#history .history-draw{
border-left-color:#94a3b8;
}

#history .history-left{
min-width:0;
flex:1;
}

#history .history-top{
display:flex;
align-items:center;
gap:10px;
}

#history .history-badge{
font-size:11px;
font-weight:800;
padding:3px 9px;
border-radius:999px;
text-transform:uppercase;
letter-spacing:.04em;
background:rgba(56,189,248,.12);
color:#38bdf8;
}

#history .history-win .history-badge{
background:rgba(34,211,238,.14);
color:#22d3ee;
}

#history .history-loss .history-badge{
background:rgba(244,63,94,.12);
color:#fb7185;
}

#history .history-draw .history-badge{
background:rgba(148,163,184,.12);
color:#94a3b8;
}

#history .history-opponent{
font-size:15px;
font-weight:700;
color:#fff;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

#history .history-opponent .history-you{
color:#94a3b8;
font-weight:600;
}

#history .history-meta{
font-size:11px;
color:#64748b;
margin-top:3px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

#history .history-right{
text-align:right;
flex-shrink:0;
}

#history .history-elo-change{
font-size:18px;
font-weight:800;
}

#history .history-plus{
color:#22d3ee;
}

#history .history-minus{
color:#fb7185;
}

#history .history-neutral{
color:#94a3b8;
}

#history .history-elo-track{
font-size:11px;
color:#64748b;
margin-top:2px;
white-space:nowrap;
}

@media(max-width:640px){

#history .history-card{
flex-wrap:wrap;
}

#history .history-right{
width:100%;
text-align:left;
margin-top:4px;
}

}