.bracket {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 60px;
    margin-top: 40px;
    font-family: "Vazir", sans-serif;
}
.round {
    display: flex;
    flex-direction: column;
    position: relative;
}
.round-1 .match {
    width: 160px;
    height: 50px;
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    position: relative;
}
/* راند دوم: جایگاه بین مسابقات راند اول */
.round-2 {
    margin-top: 35px; /* جابجایی عمودی برای قرارگیری بین مسابقات راند اول */
}
.round-2 .match {
    width: 160px;
    height: 50px;
    background: #d9eaff;
    border: 1px solid #3399ff;
    border-radius: 6px;
    margin-bottom: 90px; /* فاصله بیشتر برای جایگذاری بین مسابقات راند اول */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    position: relative;
}
/* راند سوم: جایگاه بین مسابقات راند دوم */
.round-3 {
    margin-top: 105px; /* جابجایی بیشتر برای قرارگیری بین مسابقات راند دوم */
}
.round-3 .match {
    width: 160px;
    height: 50px;
    background: #b3d1ff;
    border: 1px solid #0066cc;
    border-radius: 6px;
    margin-bottom: 230px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    position: relative;
}
/* فینال */
.round-4 {
    margin-top: 242px;
}
.round-4 .match {
    margin-bottom: 510px;
    width: 160px;
    height: 50px;
    background: #80b3ff;
    border: 1px solid #004080;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    position: relative;
}


.round-5 {
    margin-top: 518px;
}
.round-5 .match {
    margin-bottom: 1070px;
    width: 160px;
    height: 50px;
    background: #80b3ff;
    border: 1px solid #004080;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    position: relative;
}


.round-6 {
    margin-top: 1062px;
}
.round-6 .match {
    margin-bottom: 2190px;
    width: 160px;
    height: 50px;
    background: #80b3ff;
    border: 1px solid #004080;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    position: relative;
}


.round-7 {
    margin-top: 2183px;
}
.round-7 .match {
    margin-bottom: 4429px;
    width: 160px;
    height: 50px;
    background: #80b3ff;
    border: 1px solid #004080;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    position: relative;
}


.round-8 {
    margin-top: 4421px;
}
.round-8 .match {
    margin-bottom: 8908px;
    width: 160px;
    height: 50px;
    background: #80b3ff;
    border: 1px solid #004080;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    position: relative;
}


.round-9 {
    margin-top: 8836px;
}
.round-9 .match {
    width: 300px;
    height: 100px;
    font-size: xx-large;

    margin-bottom: 510px;

    background: #80b3ff;
    border: 1px solid #004080;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;
}


/* خطوط افقی از وسط کادر به سمت راند بعدی */
.match::before {
    margin-right: 244px;
    content: "";
    position: absolute;
    top: 50%;
    width: 88px;
    height: 2px;
    background: #333 ;
    transform: translateY(-50%);
    z-index: 1;
}
.lastmatch{
    background: goldenrod !important;
    color: lightyellow;
}

/* فقط برای match های داخل round-9 */
.lastmatch::before {
    background: transparent !important;
}
/* خطوط افقی در راند اول به سمت راست */
.round-1 .match::after {
    right: -30px;
}
/* خطوط افقی در راند دوم به سمت راست */
.round-2 .match::after {
    right: -30px;
}
/* خطوط افقی در راند سوم به سمت راست */
.round-3 .match::after {
    right: -30px;
}
/* راند چهارم (فینال) خطوط ندارد */
.round-4 .match::after {
    right: -30px;
}
.round-5 .match::after {
    right: -30px;
}
.round-6 .match::after {
    right: -30px;
}
.round-7 .match::after {
    right: -30px;
}
.round-8 .match::after {
    right: -30px;
}
.round-9 .match::after {
    right: -30px;
}

/* خطوط عمودی اتصال بین دو خط افقی */
/* برای هر راند بعدی، خطوط عمودی بین دو مسابقه راند قبلی */
.connector-vertical {
    position: absolute;
    width: 2px;
    background: #333;
    left: -30px; /* در سمت چپ خطوط افقی */
    z-index: 0;
}
/* راند دوم: خطوط عمودی 40px */
.round-2 .connector-vertical {
    height: 40px;
    top: 50px; /* پایین خط افقی مسابقه اول */
}
/* راند سوم: خطوط عمودی 80px */
.round-3 .connector-vertical {
    height: 80px;
    top: 100px;
}

/* موقعیت خطوط عمودی در راند دوم */
.round-2 .match-group:nth-child(odd) .connector-vertical {
    top: 50px;
}
.round-2 .match-group:nth-child(even) .connector-vertical {
    top: 0;
}
/* موقعیت خطوط عمودی در راند سوم */
.round-3 .match-group:nth-child(odd) .connector-vertical {
    top: 100px;
}
.round-3 .match-group:nth-child(even) .connector-vertical {
    top: 0;
}
.bracket {
    overflow-x: auto;
    max-width: 100%;
    height: 100%;
    padding-bottom: 20px;
    box-sizing: border-box;
}

.ak-result-circle
{
    color: white; /* White text for contrast */
    border-radius: 50%; /* Makes it a perfect circle */
    width: 24px; /* Adjust size as needed */
    height: 24px; /* Adjust size as needed */
    display: flex; /* For centering the number */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Modern, clean font */
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */

}