/* ---------------------------------------
   GLOBAL LAYOUT
--------------------------------------- */
h2 {
    font-size: 1.2rem;
    margin: 0;
    margin-bottom: 8px;
    color: #eee;
}


/* ---------------------------------------
   HEADLINE
--------------------------------------- */
.fight-headline-box {
    background: rgba(30, 30, 30, 0.7);
    padding: 10px;
    border-radius: 12px;
    text-align: center;
    margin-bottom: 10px;
}

.fighter-name {
    font-size: 1.4rem;
    font-weight: 700;
    color: #eee;
}

.fighter-name a {
    text-decoration: none;
}

.fighter-name a:hover {
    color: #969696;
    text-decoration: underline;
}

.vs-badge {
    display: inline-block;
    margin: 10px 0;
    padding: 4px 16px;
    background: #eee;
    color: rgba(30, 30, 30, 1);
    font-weight: 700;
    border-radius: 12px;
    font-size: 1rem;
}


/* ---------------------------------------
   TAGS
--------------------------------------- */
.fight-tags-box {
    display: grid;
    gap: 10px;
    margin-bottom: 10px;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.tag {
    padding: 6px 12px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.85rem;
    text-align: center;
}

.tag-white { background: #eee; color: #000; }
.tag-red { background: #1a1a1a; color: #eee; }
.tag-gold { background: #BF8F00; color: #eee; }


/* ---------------------------------------
   FIGHTER IMAGES + VS
--------------------------------------- */
.fivs-container {
    display: grid;
    background: rgba(30, 30, 30, 0.7);
    align-items: center;
    text-align: center;
    padding: 18px;
    border-radius: 12px;
    margin-bottom: 10px;
    gap: 10px;
}

.fighter {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fighter img {
    width: 180px;
    height: 260px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 10px;
}

.image-comparison {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.image-row {
    display: grid;
    grid-template-columns: 1fr 120px 1fr;
    align-items: center;
    font-size: 1rem;
    padding: 6px 0;
}

.image-label {
    font-size: 1.2rem;
    font-weight: 800;
    color: #eee;
    justify-self: center;
}

.left-value {
    display: flex;
    justify-content: flex-end;
}

.right-value {
    display: flex;
    justify-content: flex-start;
}


/* ---------------------------------------
   TALE OF THE TAPE
--------------------------------------- */
.tott-container {
    display: grid;
    background: rgba(30, 30, 30, 0.7);
    align-items: center;
    text-align: center;
    padding: 18px;
    border-radius: 12px;
    margin-bottom: 10px;
    gap: 10px;
}


.stats-comparison {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stats-comparison h2 {
    color: #969696;
}

.stat-row {
    display: grid;
    grid-template-columns: 1fr 120px 1fr;
    align-items: center;
    font-size: 1rem;
    padding: 6px 0;
    border-bottom: 1px solid rgba(60, 60, 60, 1);
}

.stat-row:hover {
    background: #444;
    border-radius: 12px;
}

.stat-row:last-child {
    border-bottom: none;
}

.label {
    font-size: 1rem;
    font-weight: 800;
    color: #eee;
    justify-self: center;
}

.left-value {
    font-weight: 600;
    color: #eee;
    text-align: right;
    padding: 10px;
}

.left-value .flag {
    width: 18px;
    height: 12px;
    object-fit: cover;
    border-radius: 2px;
    vertical-align: middle;
    justify-self: right;
}

.right-value {
    font-weight: 600;
    color: #eee;
    text-align: left;
    padding: 10px;
}

.right-value .flag {
    width: 18px;
    height: 12px;
    object-fit: cover;
    border-radius: 2px;
    vertical-align: middle;
    justify-self: left;
}


/* ---------------------------------------
   RESULT BOX
--------------------------------------- */
.result-container {
    display: grid;
    background: rgba(30, 30, 30, 0.7);
    align-items: center;
    text-align: center;
    padding: 18px;
    border-radius: 12px;
    margin-bottom: 10px;
    gap: 10px;
}

.result-comparison {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.result-comparison h2 {
    color: #969696;
}

.result-row {
    display: grid;
    grid-template-columns: 1fr 120px 1fr;
    align-items: center;
    font-size: 1rem;
    padding: 6px 0;
}

.result-label {
    font-weight: 600;
    color: #eee;
    justify-self: center;
}

.left-result,
.right-result {
    font-weight: 600;
    color: #eee;
    text-align: center;
    padding: 10px;
}

.result-win {
    background: #009041;
    color: #eee;
    border-radius: 12px;
}

.result-loss {
    background: #980000;
    color: #eee;
    border-radius: 12px;
}

.result-draw {
    background: #0064c2;
    color: #eee;
    border-radius: 12px;
}

.result-nc {
    background: #515151;
    color: #eee;
    border-radius: 12px;
}

.result-vs {
    background: #d78c00;
    color: #eee;
    border-radius: 12px;
}


/* ---------------------------------------
   JUDGES
--------------------------------------- */
.judges-container {
    display: grid;
    background: rgba(30, 30, 30, 0.7);
    align-items: center;
    text-align: center;
    padding: 18px;
    border-radius: 12px;
    margin-bottom: 10px;
    gap: 10px;
}

.judges-container h2 {
    color: #969696;
}

.judge-row {
    display: grid;
    align-items: center;
    font-size: 1rem;
    font-weight: 600;
    padding: 6px 0;
}

.judge-row:hover {
    background: #444;
    border-radius: 12px;
}

.judge-row .score {
    font-size: 0.9rem;
    font-weight: 500;
    color: #969696;
}


/* ---------------------------------------
   STADIUM
--------------------------------------- */
.arena-container {
    display: grid;
    background: rgba(30, 30, 30, 0.7);
    align-items: center;
    text-align: center;
    padding: 18px;
    border-radius: 12px;
    margin-bottom: 10px;
    gap: 10px;
}

.arena-container h2 {
    color: #969696;
}

.arena-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 600;
    padding: 6px 0;
    gap: 4px;
}

.arena-row a {
    text-decoration: none;
}

.arena-row a:hover {
    color: #969696;
    text-decoration: underline;
}

.arena-row:hover {
    background: #444;
    border-radius: 12px;
}

.arena-row .location {
    font-size: 0.9rem;
    font-weight: 500;
    color: #969696;
    display: flex;
    align-items: center;
    text-align: center;
    gap: 6px;
}

.arena-flag {
    width: 18px;
    height: 12px;
    object-fit: cover;
    border-radius: 2px;
}


/* ---------------------------------------
   EVENT INFO
--------------------------------------- */
.event-info-box {
    background: rgba(30, 30, 30, 0.7);
    padding: 16px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.95rem;
}


/* ---------------------------------------
   VIDEO CONTAINER
--------------------------------------- */
.video-container {
    display: grid;
    background: rgba(30, 30, 30, 0.7);
    align-items: center;
    text-align: center;
    padding: 18px;
    border-radius: 12px;
    margin-bottom: 10px;
    gap: 10px;
}

.video-container h2 {
    color: #969696;
}

.video-section {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding-top: 56.25%;
    border-radius: 12px;
    overflow: hidden;
}

.video-section iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}



/* ---------------------------------------
   RESPONSIVE
--------------------------------------- */
@media (max-width: 900px) {

    .fight-tags-box {
        grid-template-columns: repeat(2, 1fr);
    }

    .tale-container {
        flex-direction: column;
        align-items: center;
    }

    .tape-center .label {
        width: auto;
    }

    .tape-row .value {
        text-align: center !important;
    }

    .tape-left .value,
    .tape-right .value {
        text-align: center !important;
    }

    .fighter h2 {
        font-size: 0.8rem;
    }

    .image-label {
        font-size: 0.8rem;
    }

    .fighter img {
        width: 100px;
        height: 140px;
    }

    .video-wrapper {
    max-width: 100%;
    }
}