/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    height: 10px;
    width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: #111111;
    border-radius: 8px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #333333;
    border-radius: 8px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #4d4d4d;
}

/* Bracket Layout */
.bracket-col {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 220px;
    flex-shrink: 0;
}

.match-pair {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: relative;
    flex: 1;
}

/* 
  With gap-12 between columns, gap is 3rem (48px).
  We want lines to connect seamlessly.
*/

/* 1. Horizontal line going out of individual match to the right (halfway to next col) */
.match-pair:not(.final-pair) .match::after {
    content: "";
    position: absolute;
    right: -1.5rem;   /* 1.5rem out */
    top: 50%;
    width: 1.5rem;
    height: 2px;
    background-color: #4d4d4d;
    z-index: 1;
}

/* 2. Vertical line connecting top and bottom match at halfway point */
.match-pair:not(.final-pair):not(.single-match-pair)::after {
    content: "";
    position: absolute;
    right: -1.5rem; /* Placed exactly at the end of the match line */
    top: 25%;     /* Relative to pair which flexes to distribute matches */
    bottom: 25%;
    width: 2px;
    background-color: #4d4d4d;
    z-index: 1;
}

/* 3. Horizontal line from middle of vertical line to next round */
.match-pair:not(.final-pair)::before {
    content: "";
    position: absolute;
    right: -3rem;   /* Complete the second half */
    top: 50%;
    width: 1.5rem;
    height: 2px;
    background-color: #4d4d4d;
    z-index: 1;
}

/* --- Center Layout Tweaks --- */
.center-final-match {
    justify-content: center !important;
}

/* --- Right Side Bracket Connectors (Mirrored) --- */
.right-side-bracket .match-pair:not(.final-pair) .match::after {
    right: auto;
    left: -1.5rem;
}

.right-side-bracket .match-pair:not(.final-pair):not(.single-match-pair)::after {
    right: auto;
    left: -1.5rem;
}

.right-side-bracket .match-pair:not(.final-pair)::before {
    right: auto;
    left: -3rem;
}

/* 4. Horizontal line entering a match from left */
.bracket-col:not(.col-0) .match::before {
    content: "";
    position: absolute;
    left: -1.5rem;  /* Wait, line 3 provides this! Let's ensure no double line */
    /* Line 3 spans from right -1.5 to -3 of the PREVIOUS col. 
       -3rem relative to previous col is exactly 0 relative to CURRENT col.
       So we actually don't NEED line 4 if line 3 reaches it perfectly. 
       But let's keep it clean: line 3 could just connect. Let's just draw it anyway for safety,
       or better yet, remove it to avoid overlap conflicts with flexbox gaps. */
    /* Wait, the gap-12 is on the container! So flexbox does the spacing. 
       If flexbox creates exact 3rem gap, line 3 of previous col will seamlessly touch the left edge of current col matches. 
       BUT line 3 is anchored to the middle of the PAIR. The match in the next round is exactly at the middle of the PAIR!
       So YES, they connect directly! We don't need left lines entering the match. */
}

/* Overriding top/bottom for spacing of the vertical line */
/* Depending on player count and round, top/bottom % might need tweak, but 25% is perfect for equal flex distribution */
/* Actually, match pair top/bottom logic works best when .match is centered in its half */

.match {
    position: relative;
    z-index: 10;
    margin: 1rem 0;
}

/* To ensure 25% height aligns perfectly with match centers:
   The pair flexes equally. The first child's center is exactly at 25% of the pair's height.
   The second child's center is exactly at 75% of the pair's height. 
   This math is flawless! */

/* Modal Animations */
@keyframes modalFadeIn {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.animate-modal {
    animation: modalFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Utility to hide scrollbar but keep functionality for lists */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}