/* Modernized jQuery Bracket | FIX: Removed borders that break JS math */
div.jQBracket {
    font-family: 'Rajdhani', 'Jura', 'Segoe UI', Roboto, sans-serif;
    font-size: 15px; /* Slightly larger text */
    position: relative;
    color: #e0e0e0;
}

div.jQBracket .tools { position: absolute; top: 0; color: #fff; }
div.jQBracket .tools span { 
    cursor: pointer; margin: 5px; display: block; text-align: center; 
    width: 18px; height: 18px; 
    background-color: rgba(255, 255, 255, 0.1); 
    transition: background-color 0.2s ease;
}
div.jQBracket .tools span:hover { background-color: rgba(0, 255, 102, 0.5); }

/* --- CORE LAYOUT (Do not edit these) --- */
div.jQBracket .finals { float: right; right: 0; clear: right; position: relative; }
div.jQBracket .bracket { float: right; clear: left; }
div.jQBracket .loserBracket { float: right; clear: left; position: relative; }
div.jQBracket .round { position: relative; float: left; }
div.jQBracket .match { position: relative; }
div.jQBracket .editable { cursor: pointer; }
div.jQBracket .teamContainer { z-index: 1; position: relative; float: left; }

/* --- TEAM STYLING --- */
div.jQBracket .team {
    position: relative;
    z-index: 1;
    float: left;
    background-color: rgba(20, 25, 30, 0.85); /* Dark Glass */
    /* Use inset box-shadow instead of border so it doesn't change element width/height */
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    color: #e0e0e0;
    cursor: default;
    clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}

div.jQBracket .team:first-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15); /* Required for JS measurement */
}

div.jQBracket .team input {
    font-size: 14px; padding: 0; width: 100%; border: 0; margin: 0; outline: 0;
    background: transparent; color: #fff;
}

div.jQBracket .team div.label {
    padding: 0 12px;           /* More side padding */
    position: absolute; 
    height: 38px;              /* THE THICKNESS */
    line-height: 38px;         /* Centers text vertically */
    white-space: nowrap; 
    overflow: hidden; 
    box-sizing: border-box;
}

div.jQBracket .team div.label[disabled] { cursor: default; }

div.jQBracket .team div.score {
    float: right; 
    padding: 0;                /* Remove padding to center number better */
    width: 40px;               /* Matches the scoreWidth in JS */
    height: 38px;              /* MUST MATCH label height */
    line-height: 38px;         /* Centers score vertically */
    background-color: rgba(0, 255, 102, 0.05); 
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center; 
    box-sizing: border-box; 
}

div.jQBracket .team div.score input { text-align: center; }
div.jQBracket .team div.score[disabled] { color: rgba(255, 255, 255, 0.3); }

/* --- MATCH STATES --- */
div.jQBracket .team.np, div.jQBracket .team.na, div.jQBracket .team.bye { background-color: rgba(40, 45, 50, 0.4); color: #666; }

div.jQBracket .team.win { color: #fff; font-weight: 600; }
div.jQBracket .team.win div.score { 
    color: #00ff66; background-color: rgba(0, 255, 102, 0.15); font-weight: bold;
}
div.jQBracket .team.lose { background-color: rgba(10, 15, 20, 0.5); color: #777; }
div.jQBracket .team.lose div.score { color: #777; background-color: rgba(0, 0, 0, 0.2); }

div.jQBracket .team.highlightWinner { background-color: rgba(0, 255, 102, 0.2); color: #fff; }
div.jQBracket .team.highlightLoser { background-color: rgba(255, 255, 255, 0.1); color: #ccc; }
div.jQBracket .team.highlight { background-color: rgba(0, 255, 102, 0.4); color: #fff; }

/* --- CONNECTORS (The Lines) --- */
div.jQBracket .connector {
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-left-style: none; position: absolute; z-index: 1;
}
div.jQBracket .connector div.connector {
    border: 0; border-bottom: 2px solid rgba(255, 255, 255, 0.15);
    height: 0; position: absolute;
}
div.jQBracket .connector.highlightWinner, div.jQBracket .connector div.connector.highlightWinner,
div.jQBracket .connector.highlight, div.jQBracket .connector div.connector.highlight {
    border-color: #00ff66; box-shadow: 0 0 8px rgba(0, 255, 102, 0.4);
}
div.jQBracket .connector.highlightLoser, div.jQBracket .connector div.connector.highlightLoser {
    border-color: rgba(255, 255, 255, 0.4);
}
div.jQBracket .np .connector, div.jQBracket .np .connector div.connector { border-color: rgba(255, 255, 255, 0.05); }

/* --- BUBBLES --- */
div.jQBracket .bubble {
    height: 24px;
    line-height: 24px;
    top: 7px; /* Adjusts the small "Winner" bubble to stay centered on the taller box */
}
div.jQBracket .bubble:after {
    content: ""; position: absolute; top: 6px; left: -5px; width: 0; height: 0;
    border-top: 5px solid transparent; border-bottom: 5px solid transparent;
    border-right: 5px solid rgba(20, 25, 30, 0.8);
}
div.jQBracket .win .bubble { background-color: #00ff66; color: #000; box-shadow: 0 0 10px rgba(0, 255, 102, 0.3); }
div.jQBracket .win .bubble:after { border-right-color: #00ff66; }
div.jQBracket .lose .bubble { background-color: rgba(255, 255, 255, 0.2); color: #fff; }
div.jQBracket .lose .bubble:after { border-right-color: rgba(255, 255, 255, 0.2); }

/* --- RIGHT-TO-LEFT LAYOUT --- */
div.jQBracket.rl .finals { float: left; left: 0; clear: left; }
div.jQBracket.rl .bracket { float: left; clear: right; }
div.jQBracket.rl .loserBracket { float: left; clear: right; }
div.jQBracket.rl .round { margin-right: 0; float: right; }
div.jQBracket.rl .team { float: right; }
div.jQBracket.rl .team div.label { right: 0; }
div.jQBracket.rl .team div.score { float: left; border-left: none; border-right: 1px solid rgba(255,255,255,0.05); }
div.jQBracket.rl .teamContainer { float: right; }
div.jQBracket.rl .connector { border-left-style: solid; border-right-style: none; border-width: 2px; }
div.jQBracket.rl .connector.highlightWinner, div.jQBracket.rl .connector div.connector.highlightWinner,
div.jQBracket.rl .connector.highlight, div.jQBracket.rl .connector div.connector.highlight { border-color: #00ff66; }
div.jQBracket.rl .connector.highlightLoser, div.jQBracket.rl .connector div.connector.highlightLoser { border-color: rgba(255, 255, 255, 0.4); }
div.jQBracket.rl .bubble { left: -35px; }
div.jQBracket.rl .bubble:after { left: auto; right: -5px; border-left: 5px solid transparent; border-right: 0; }
div.jQBracket.rl .highlightWinner .bubble:after { border-left-color: #00ff66; }
div.jQBracket.rl .highlightLoser .bubble:after { border-left-color: rgba(255, 255, 255, 0.2); }

  .season-toolbar {
    display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
    margin:10px auto 14px;padding:6px
  }
  .season-toolbar .mini-select {
    appearance:none;background:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.03));
    border:1px solid rgba(255,255,255,0.08);
    border-radius:999px;padding:8px 12px;color:#e6eef0;font-weight:600
  }
  .season-toggle{display:inline-flex;border:1px solid rgba(255,255,255,0.08);border-radius:999px;overflow:hidden}
  .season-btn{padding:8px 12px;background:transparent;color:#cfe1da;font-weight:700;border:0}
  .season-btn.active{background:linear-gradient(180deg,rgba(255,255,255,0.10),rgba(255,255,255,0.06));color:#fff}
  .season-btn:not(.active):hover{background:rgba(255,255,255,0.04)}