.bracket-wrapper{
    overflow-x:auto;
    padding:10px 0;
}

.bracket{
    position:relative;
    min-width:1400px;
    height:auto;
    padding-bottom:40px; /* biar ada napas dikit */
}

.column{ position:absolute; top:0; }

.col-quarter{ left:0; }
.col-semi{ left:320px; }
.col-final{ left:640px; }
.col-third{ left:960px; }

/* ================= CARD ================= */
.match{
    position:absolute;
    width:230px;
    background:#fff;
    border-radius:16px;
    padding:12px;
    border:1px solid #e5e7eb;
    transition:all .25s ease;
}

/* hover */
.match-link.is-clickable:hover .match{
    transform:translateY(-6px) scale(1.03);
    box-shadow:0 15px 35px rgba(0,0,0,0.15);
}

/* disable */
.match-link.is-disabled{
    cursor:progress;
    pointer-events:none;
}

/* team */
.team{
    display:flex;
    align-items:center;
    gap:8px;
    padding:6px 0;
    font-size:14px;
}

.team img{
    width:22px;
    height:22px;
    border-radius:4px;
    object-fit:cover;
}

.score{
    margin-left:auto;
    font-weight:bold;
}

/* winner */
.winner{
    color:#16a34a;
    font-weight:600;
}

/* placeholder */
.placeholder{
    opacity:.6;
}

/* round title */
.round-title{
    text-align:center;
    margin-bottom:10px;
    font-weight:700;
    font-size:12px;
    letter-spacing:1px;
    color:#6b7280;
}

/* lines */
svg{
    position:absolute;
    width:100%;
    height:100%;
    pointer-events:none;
}

line{
    stroke:#cbd5e1;
    stroke-width:2;
}
.match {
    transition: all 0.25s ease;
    cursor: pointer;
}

.match:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    z-index: 2;
}