.vlr-bracket-wrapper * {
  box-sizing: content-box;
}

.bracket-container {
  display: inline-flex !important;
  min-width: 100%;
  width: max-content !important;
  padding-bottom: 24px;
  padding-right: 300px !important;
  /* Extensive padding to guarantee last column is scrollable */
  position: relative;
}

/* Force-remove any scraping-inherited masks or fades */
/* Brute-force remove any masking effects */
.wf-card,
.drag-box,
.drag,
.event-brackets-container,
.vlr-bracket-wrapper {
  mask-image: none !important;
  -webkit-mask-image: none !important;
  overflow: visible;
  /* Let children breathe inside the scroll wrapper */
}

.vlr-bracket-wrapper {
  overflow-x: auto !important;
  overflow-y: hidden;
  position: relative;
  z-index: 1;
}

.drag-box::after,
.drag-box::before,
.event-brackets-container::after,
.event-brackets-container::before {
  display: none !important;
  content: none !important;
}

.bracket-col {
  margin-right: 56px;
}

.bracket-col.mod-placeholder {
  width: 144px;
}

.bracket-col-label {
  margin-bottom: 15px;
  color: color-mix(in oklab, var(--color-base-content) 80%, transparent);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.bracket-col-label.mod-spacing {
  margin-top: 45px;
}

.bracket-col-label.mod-spacing.mod-3 {
  margin-top: 140px;
}

.bracket-col-label.mod-spacing.mod-4 {
  margin-top: 350px;
}

.bracket-col-label.mod-spacing.mod-5 {
  margin-top: 780px;
}

.bracket-row {
  position: relative;
}

.bracket-item-num {
  position: absolute;
  top: 30px;
  left: -14px;
  font-size: 9px;
}

.bracket-item {
  right: 0;
  font-size: 11px;
  font-weight: 400;
  display: block;
  margin-bottom: 31px;
  position: relative;
  border: 2px solid color-mix(in oklab, var(--color-base-content) 25%, transparent);
  background-color: var(--color-base-100);
  border-radius: 4px;
  z-index: 1;
}

.bracket-item img {
  width: 20px;
  height: 20px;
  margin: 0 5px;
  image-rendering: -webkit-optimize-contrast;
}

a.bracket-item {
  color: color-mix(in oklab, var(--color-base-content) 90%, transparent);
}

a.bracket-item:hover {
  border: 2px solid color-mix(in oklab, var(--color-base-content) 40%, transparent);
}

a.bracket-item.mod-live {
  border: 2px solid var(--color-error);
}

a.bracket-item.mod-live:hover {
  border: 2px solid color-mix(in oklab, var(--color-error) 80%, transparent);
}

.bracket-item.mod-last {
  margin-bottom: 0 !important;
}

.bracket-item.mod-single .bracket-item-team,
.bracket-item.mod-single-2 .bracket-item-team {
  border: 0;
}

.bracket-item.mod-single-2 {
  margin-top: 15px;
}

.bracket-item.mod-empty {
  border: 2px solid transparent;
  height: 70px;
}

.bracket-item-team {
  display: flex;
  justify-content: space-between;
  width: 140px;
  border-top: 1px solid color-mix(in oklab, var(--color-base-content) 25%, transparent);
}

.bracket-item-team.mod-winner {
  background: color-mix(in oklab, var(--color-success) 15%, transparent);
  font-weight: 700;
}

.bracket-item-team.mod-first {
  border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 25%, transparent);
  border-top: 0;
}

.bracket-item-team-name {
  height: 32px;
  display: flex;
  align-items: center;
}

.bracket-item-team-name span {
  width: 75px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 5px 0;
}

.bracket-item-team-name.mod-bye {
  padding-left: 30px;
  color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
  font-weight: 400;
  font-style: italic;
}

.bracket-item-team-name .flag {
  margin-right: 4px;
  vertical-align: -1px;
}

.bracket-item-team-name.mod-ph {
  font-weight: 400;
  font-style: italic;
}

.bracket-item-team-name.mod-ph i {
  display: none;
}

.bracket-item-team-score {
  flex: 0 0 32px;
  height: 32px;
  justify-content: center;
  border-left: 1px solid color-mix(in oklab, var(--color-base-content) 25%, transparent);
  align-items: center;
  display: flex;
}

.bracket-item-status {
  position: absolute;
  bottom: -22px;
  left: 0;
  font-size: 11px;
  padding-left: 8px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 15px;
  line-height: 15px;
}

.bracket-item-status span {
  position: relative;
  display: block;
}

.bracket-item-status span:before {
  content: "-";
  position: absolute;
  left: -8px;
}

.bracket-item-status i {
  margin-right: 4px;
  font-size: 14px;
  vertical-align: 3px;
}

.bracket-item-status i.mod-live {
  color: var(--color-error);
}

.bracket-item-status.mod-note {
  padding-left: 0px;
}

.bracket-item-status.mod-note div {
  margin: 0 auto;
  font-style: italic;
}

.bracket-item-line {
  position: absolute;
  width: 30px;
  height: 31px;
  right: -30px;
  top: 32px;
  border: 2px solid color-mix(in oklab, var(--color-base-content) 25%, transparent);
  border-left: 0;
  border-bottom: 0;
  border-radius: 0 3px 0 0;
}

.bracket-item-line:after {
  content: "";
  position: absolute;
  bottom: -4px;
  height: 4px;
  right: -30px;
  width: 30px;
  border: 2px solid color-mix(in oklab, var(--color-base-content) 25%, transparent);
  border-top: 0;
  border-right: 0;
  border-radius: 0 0 0 3px;
}

.bracket-item-line.mod-up {
  border-top: 0;
  border-bottom: 2px solid color-mix(in oklab, var(--color-base-content) 25%, transparent);
  top: 3px;
  border-radius: 0 0 3px 0;
}

.bracket-item-line.mod-up:after {
  top: -4px;
  border-top: 2px solid color-mix(in oklab, var(--color-base-content) 25%, transparent);
  border-bottom: 0;
  border-radius: 3px 0 0 0;
}

.bracket-item-line.mod-straight {
  top: 32px;
  width: 60px;
  border-radius: 0;
  right: -60px;
  height: 2px !important;
}

.bracket-item-line.mod-straight:after {
  display: none;
}

.bracket-item-spacing.mod-single {
  height: 35px;
}

.bracket-container.mod-upper .bracket-col.mod-offset-1 {
  padding-top: 17px;
}

.bracket-container.mod-upper .bracket-col.mod-offset-2 {
  padding-top: 34px;
}

.bracket-container.mod-upper .bracket-col.mod-1.mod-single {
  padding-top: 17px;
}

.bracket-container.mod-upper .bracket-col.mod-1.mod-single .bracket-item {
  margin-bottom: 65px;
}

.bracket-container.mod-upper .bracket-col.mod-2 {
  padding-top: 50px;
}

.bracket-container.mod-upper .bracket-col.mod-2 .bracket-item {
  margin-bottom: 132px;
}

.bracket-container.mod-upper .bracket-col.mod-2 .bracket-item-line {
  height: 83px;
}

.bracket-container.mod-upper .bracket-col.mod-2 .bracket-item-line.mod-up {
  top: -49px;
}

.bracket-container.mod-upper .bracket-col.mod-2.mod-single {
  padding-top: 67px;
}

.bracket-container.mod-upper .bracket-col.mod-2.mod-single .bracket-item {
  margin-bottom: 166px;
}

.bracket-container.mod-upper .bracket-col.mod-final .bracket-item {
  margin-bottom: 0;
}

.bracket-container.mod-upper .bracket-col.mod-3 {
  padding-top: 150px;
}

.bracket-container.mod-upper .bracket-col.mod-3 .bracket-item {
  margin-bottom: 334px;
}

.bracket-container.mod-upper .bracket-col.mod-3 .bracket-item-line {
  height: 185px;
}

.bracket-container.mod-upper .bracket-col.mod-3 .bracket-item-line.mod-up {
  top: -151px;
}

.bracket-container.mod-upper .bracket-col.mod-3.mod-single {
  padding-top: 167px;
}

.bracket-container.mod-upper .bracket-col.mod-3.mod-single .bracket-item {
  margin-bottom: 368px;
}

.bracket-container.mod-upper .bracket-col.mod-4 {
  padding-top: 351px;
}

.bracket-container.mod-upper .bracket-col.mod-4 .bracket-item {
  margin-bottom: 738px;
}

.bracket-container.mod-upper .bracket-col.mod-4 .bracket-item-line {
  height: 384px;
}

.bracket-container.mod-upper .bracket-col.mod-4 .bracket-item-line.mod-up {
  top: -354px;
}

.bracket-container.mod-upper .bracket-col.mod-4.mod-single {
  padding-top: 368px;
}

.bracket-container.mod-upper .bracket-col.mod-4.mod-single .bracket-item {
  margin-bottom: 772px;
}

.bracket-container.mod-upper .bracket-col.mod-5 {
  padding-top: 755px;
}

.bracket-container.mod-upper .bracket-col.mod-5 .bracket-item {
  margin-bottom: 1544px;
}

.bracket-container.mod-upper .bracket-col.mod-5 .bracket-item-line {
  height: 790px;
}

.bracket-container.mod-upper .bracket-col.mod-5 .bracket-item-line.mod-up {
  top: -752px;
}

.bracket-container.mod-upper .bracket-col.mod-5.mod-single {
  padding-top: 776px;
}

.bracket-container.mod-upper .bracket-col.mod-6 {
  padding-top: 1565px;
}

.bracket-container.mod-upper .bracket-col.mod-6 .bracket-item {
  margin-bottom: 3158px;
}

.bracket-container.mod-upper .bracket-col.mod-6 .bracket-item-line {
  height: 790px;
}

.bracket-container.mod-upper .bracket-col.mod-6 .bracket-item-line.mod-up {
  top: -752px;
}

.bracket-container.mod-upper .bracket-col.mod-6.mod-single {
  padding-top: 1582px;
}

.bracket-container.mod-upper .bracket-col.mod-6.mod-single .bracket-item {
  margin-bottom: 3192px;
}

.bracket-col.mod-0-5x {
  margin-top: 15px;
}

.bracket-col.mod-1x {
  margin-top: 49px;
}

.bracket-col.mod-1-5x {
  margin-top: 82px;
}

.bracket-col.mod-2x {
  margin-top: 98px;
}

.bracket-col.mod-2-5x {
  margin-top: 120px;
}

.bracket-col.mod-2-8x {
  margin-top: 132px;
}

.bracket-col.mod-3x {
  margin-top: 151px;
}

.bracket-col.mod-3-1x {
  margin-top: 163px;
}

.bracket-col.mod-4x {
  margin-top: 196px;
}

.bracket-col.mod-4s .bracket-item {
  margin-bottom: 133px;
}

.bracket-container.mod-lower .bracket-col.mod-1 {
  padding-top: 49px;
}

.bracket-container.mod-lower .bracket-col.mod-1.mod-single {
  padding-top: 66px;
}

.bracket-container.mod-lower .bracket-col.mod-2 {
  padding-top: 0;
}

.bracket-container.mod-lower .bracket-col.mod-2 .bracket-item {
  margin-bottom: 32px;
}

.bracket-container.mod-lower .bracket-col.mod-2.mod-single {
  padding-top: 18px;
}

.bracket-container.mod-lower .bracket-col.mod-2.mod-single .bracket-item {
  margin-bottom: 65px;
}

.bracket-container.mod-lower .bracket-col.mod-3 {
  padding-top: 50px;
}

.bracket-container.mod-lower .bracket-col.mod-3 .bracket-item {
  margin-bottom: 132px;
}

.bracket-container.mod-lower .bracket-col.mod-3.mod-single {
  padding-top: 67px;
}

.bracket-container.mod-lower .bracket-col.mod-4 .bracket-item {
  margin-bottom: 133px;
}

.bracket-container.mod-lower .bracket-col.mod-4 .bracket-item-line {
  height: 82px;
}

.bracket-container.mod-lower .bracket-col.mod-4 .bracket-item-line.mod-up {
  top: -48px;
}

.bracket-container.mod-lower .bracket-col.mod-4.mod-single {
  padding-top: 18px;
}

.bracket-container.mod-lower .bracket-col.mod-4.mod-single .bracket-item {
  margin-bottom: 166px;
}

.bracket-container.mod-lower .bracket-col.mod-5 {
  padding-top: 103px;
}

.bracket-container.mod-lower .bracket-col.mod-5 .bracket-item {
  margin-bottom: 334px;
}

.bracket-container.mod-lower .bracket-col.mod-5 .bracket-item-line {
  height: 34px;
}

.bracket-container.mod-lower .bracket-col.mod-5 .bracket-item-line.mod-up {
  top: 0px;
}

.bracket-container.mod-lower .bracket-col.mod-5.mod-single {
  padding-top: 18px;
}

.bracket-container.mod-lower .bracket-col.mod-5.mod-single .bracket-item {
  margin-bottom: 368px;
}

.bracket-container.mod-lower .bracket-col.mod-6 {
  padding-top: 52px;
}

.bracket-container.mod-lower .bracket-col.mod-6 .bracket-item {
  margin-bottom: 335px;
}

.bracket-container.mod-lower .bracket-col.mod-6 .bracket-item-line {
  height: 184px;
}

.bracket-container.mod-lower .bracket-col.mod-6 .bracket-item-line.mod-up {
  top: -150px;
}

.bracket-container.mod-lower .bracket-col.mod-6.mod-single {
  padding-top: 70px;
}

.bracket-container.mod-lower .bracket-col.mod-6.mod-single .bracket-item {
  margin-bottom: 368px;
}

.bracket-container.mod-lower .bracket-col.mod-7 {
  padding-top: 256px;
}

.bracket-container.mod-lower .bracket-col.mod-7.mod-single {
  padding-top: 274px;
}

.bracket-container.mod-lower .bracket-col.mod-8 {
  padding-top: 206px;
}

.bracket-container.mod-lower .bracket-col.mod-8.mod-single {
  padding-top: 224px;
}

.bracket-container.mod-compact .bracket-col {
  margin-right: 23px;
}

.bracket-container.mod-compact .bracket-item-line {
  width: 13px;
  right: -13px;
}

.bracket-container.mod-compact .bracket-item-line:after {
  right: -15px;
  width: 15px;
}

.vlr-bracket-wrapper {
  overflow-x: auto !important;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

.event-brackets-container {
  position: relative;
  margin-bottom: 25px;
  overflow: visible !important;
}

/* Explicitly destroy the VLR blue glow masks and ensure containers expand to bracket size */
.wf-card.mod-bracket,
.drag-box,
.drag,
.event-brackets-container {
  width: max-content !important;
  min-width: 100% !important;
}

/* Explicitly destroy the VLR blue glow masks */
.event-brackets-container::after,
.event-brackets-container::before,
.drag-box::after,
.drag-box::before,
.vlr-bracket-wrapper::after,
.vlr-bracket-wrapper::before {
  display: none !important;
  content: none !important;
  background: none !important;
  mask-image: none !important;
}

/* Custom scrollbar for better visibility */
.vlr-bracket-wrapper::-webkit-scrollbar {
  height: 8px;
}

.vlr-bracket-wrapper::-webkit-scrollbar-track {
  background: var(--color-base-200);
  border-radius: 4px;
}

.vlr-bracket-wrapper::-webkit-scrollbar-thumb {
  background: var(--color-base-content);
  opacity: 0.2;
  border-radius: 4px;
}

.vlr-bracket-wrapper::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}