/* ==========================================================
   FIGHTER PROFILE
   ========================================================== */

.recent-fight-card {
    background: #1b1b1b;
    border: 1px solid #303030;
    border-radius: 14px;
    padding: 22px;
    margin-bottom: 24px;
    transition: all .25s ease;
}

.recent-fight-card:hover {
    transform: translateY(-3px);
    border-color: #c8102e;
    box-shadow: 0 10px 25px rgba(0,0,0,.35);
}

.recent-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    gap: 20px;
}

.recent-header h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
}

.recent-header a {
    color: white;
    text-decoration: none;
    transition: color .2s ease;
}

.recent-header a:hover {
    color: #ff455f;
}

.fight-result {
    padding: 8px 16px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .5px;
    white-space: nowrap;
}

.fight-result.win {
    background: rgba(0,180,0,.15);
    color: #56ff79;
}

.fight-result.loss {
    background: rgba(220,0,0,.15);
    color: #ff6868;
}

.fight-result.draw {
    background: rgba(255,170,0,.18);
    color: #ffd04d;
}

/* ==========================================================
   FIGHT META
   ========================================================== */

.fight-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px,1fr));
    gap: 16px;
    margin: 20px 0;
}

.fight-meta div {
    background: #242424;
    border-radius: 10px;
    padding: 14px;
    text-align: center;
}

/* ==========================================================
   STAT GRID
   ========================================================== */

.fight-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(140px,1fr));
    gap: 16px;
    margin-top: 18px;
}

.stat-box {
    background: #242424;
    border-radius: 12px;
    padding: 18px;
    text-align: center;
    border: 1px solid #333;
    transition: all .2s ease;
}

.stat-box:hover {
    border-color: #c8102e;
    transform: translateY(-2px);
}

.stat-box strong {
    display: block;
    margin-bottom: 10px;
    color: #dddddd;
}

/* ==========================================================
   FIGHT LAB RATINGS
   ========================================================== */

.grade-a-plus,
.grade-a,
.grade-b-plus,
.grade-b,
.grade-c-plus,
.grade-c,
.grade-d,
.grade-f {

    display: inline-block;

    min-width: 60px;

    padding: 8px 14px;

    border-radius: 999px;

    font-weight: 700;

    text-align: center;

    font-size: 16px;
}

.grade-a-plus,
.grade-a {
    background: #0b7d2b;
    color: white;
}

.grade-b-plus,
.grade-b {
    background: #1976d2;
    color: white;
}

.grade-c-plus,
.grade-c {
    background: #d48806;
    color: white;
}

.grade-d,
.grade-f {
    background: #b71c1c;
    color: white;
}

/* ==========================================================
   UPCOMING FIGHT
   ========================================================== */

.prediction-card {
    background: linear-gradient(
        135deg,
        #202020,
        #2b2b2b
    );

    border-radius: 14px;

    padding: 24px;

    text-align: center;

    margin-top: 20px;
}

.prediction-card h2 {

    color: #ff455f;

    margin-bottom: 18px;

    font-size: 32px;
}

/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width:768px){

    .recent-header{

        flex-direction:column;

        align-items:flex-start;

    }

    .fight-meta{

        grid-template-columns:repeat(2,1fr);

    }

    .fight-stats-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

/* ==========================================
   Fight Preview Prediction
   ========================================== */

.prediction-header{

    text-align:center;

    margin-bottom:20px;

}

.prediction-header h1{

    font-size:34px;

    margin-bottom:8px;

}

.prediction-bar{

    display:flex;

    overflow:hidden;

    border-radius:999px;

    background:#333;

    height:34px;

    margin:20px 0;

}

.prediction-left{

    background:#198754;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:bold;

}

.prediction-right{

    background:#c8102e;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:bold;

}

.prediction-labels{

    display:flex;

    justify-content:space-between;

    margin-top:10px;

}

.confidence-box{

    text-align:center;

    font-size:22px;

    font-weight:bold;

    padding:14px;

    border:1px solid #333;

    border-radius:10px;

    margin-top:20px;

}

/* ==========================================
   Fight Preview Header
========================================== */

.fight-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:60px;

    padding:10px 20px;

}

.fighter-header-card{

    flex:1;

    text-align:center;

}

.fighter-preview-photo{

    width:165px;

    height:165px;

    border-radius:50%;

    object-fit:cover;

    object-position:center 15%;

    border:4px solid #d71920;

    box-shadow:0 0 18px rgba(215,25,32,.35);

    margin-bottom:10px;

}

.fight-header-vs{

    width:120px;

    text-align:center;

    display:flex;

    justify-content:center;

    align-items:center;

    height:200px;

}

.fight-header-vs h1{

    font-size:48px;

    color:#d71920;

    margin:0;

    letter-spacing:4px;

    font-weight:800;

}

.fighter-header-card h2{

    margin:6px 0 2px 0;

    font-size:26px;

    font-weight:700;

}

.fighter-header-card p{

    margin:0;

    color:#bdbdbd;

    font-size:18px;

    font-weight:600;

}

.fighter-record{

    margin:2px 0;

    font-size:18px;

    font-weight:700;

    color:#ffffff;

}

.fighter-division{

    margin:2px 0 0 0;

    font-size:15px;

    color:#bbbbbb;

    text-transform:uppercase;

    letter-spacing:1px;

}

.fight-header-event{

    color:#d71920;

    font-size:16px;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:8px;

    text-transform:uppercase;

}

.fight-header-date{

    color:#aaaaaa;

    font-size:14px;

    margin-top:8px;

}

.fight-header-title{

    color:#d71920;

    font-size:16px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:8px;

}

.fight-header-subtitle{

    color:#9b9b9b;

    font-size:13px;

    letter-spacing:1px;

    margin-top:8px;

}