.s8-bracket-scroll{width:100%;overflow-x:auto;overflow-y:hidden;padding:4px 2px 18px;scrollbar-color:var(--s8-orange) #eee;scrollbar-width:thin}
.s8-bracket.s8-bracket-dynamic{display:grid;grid-template-columns:repeat(var(--s8-rounds),minmax(250px,1fr));align-items:stretch;gap:54px;width:100%;margin-top:24px}
.s8-bracket-stage{display:flex;min-width:0;flex-direction:column;gap:14px}
.s8-bracket-stage>h3{margin:0;padding:0 2px 10px;border-bottom:2px solid var(--s8-ink);font-size:18px;line-height:1.25}
.s8-stage-matches{position:relative;display:flex;min-height:100%;flex:1;flex-direction:column;justify-content:space-around;gap:22px;padding:8px 0}
.s8-bracket-stage:not(:last-child)[data-matches="4"] .s8-stage-matches:before,.s8-bracket-stage:not(:last-child)[data-matches="4"] .s8-stage-matches:after,.s8-bracket-stage:not(:last-child)[data-matches="2"] .s8-stage-matches:before{position:absolute;right:-32px;width:1px;border-right:2px solid #bdb5aa;content:""}
.s8-bracket-stage:not(:last-child)[data-matches="4"] .s8-stage-matches:before{top:12.5%;height:25%}
.s8-bracket-stage:not(:last-child)[data-matches="4"] .s8-stage-matches:after{top:62.5%;height:25%}
.s8-bracket-stage:not(:last-child)[data-matches="2"] .s8-stage-matches:before{top:25%;height:50%}
.s8-bracket-match{position:relative;margin:0;padding:12px;border:1px solid #ded8cf;border-left:4px solid var(--s8-orange);border-radius:7px;background:#f7f3ed;box-shadow:0 4px 14px rgba(24,22,18,.06)}
.s8-bracket-match.is-complete{border-left-color:#178a72}
.s8-bracket-stage:not(:last-child) .s8-bracket-match:after{position:absolute;top:50%;right:-32px;width:32px;border-top:2px solid #bdb5aa;content:""}
.s8-bracket-stage:not(:first-child) .s8-bracket-match:before{position:absolute;top:50%;left:-28px;width:28px;border-top:2px solid #bdb5aa;content:""}
.s8-bracket-match>small{margin:0 0 8px;color:#786f64;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.s8-bracket-match>div:not(.s8-match-action){grid-template-columns:minmax(0,1fr) 48px;gap:8px;padding:8px 9px}
.s8-bracket-match strong{min-width:0;overflow:hidden;font-size:13px;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
.s8-bracket-match input[type=number]{width:48px;height:38px;padding:4px;font-size:17px}
.s8-match-action{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-top:10px;padding-top:10px;border-top:1px solid #ded8cf;background:transparent!important}
.s8-match-action .button{min-height:38px;padding:7px 12px;line-height:1.15;white-space:normal}
.s8-match-action small{color:#746b60;font-size:11px;line-height:1.25;text-align:right}
.s8-match-action small.is-error{color:#b42318;font-weight:700}
.s8-match-action .button[disabled]{opacity:.45;cursor:not-allowed}
.s8-bracket-match.is-bye{border-color:#d6a447;background:#fff9ec}.s8-bracket-match.is-bye [data-team-slot] strong{color:#8a5b00}.s8-bracket-match.is-bye .s8-match-action small{color:#8a5b00;font-weight:800}.s8-bracket-match.is-bye .button[disabled]{border-color:#d6a447!important;background:#d6a447!important;color:#fff!important;opacity:1}
.s8-result-message {
  margin: 18px 0;
  padding: 13px 16px;
  border-left: 4px solid;
  border-radius: 4px;
  font-weight: 700;
}
.s8-result-message.is-success {
  border-color: #178a72;
  background: #edf8f4;
  color: #116b59;
}
.s8-result-message.is-error {
  border-color: #b42318;
  background: #fff1f0;
  color: #8f1d14;
}
@media (max-width: 600px) {
  .s8-bracket-scroll{margin-right:-14px;padding-right:14px}
  .s8-bracket.s8-bracket-dynamic{grid-template-columns:repeat(var(--s8-rounds),260px);gap:44px;width:max-content;min-width:100%}
  .s8-bracket-stage:not(:last-child) .s8-bracket-match:after{right:-27px;width:27px}
  .s8-bracket-stage:not(:first-child) .s8-bracket-match:before{left:-23px;width:23px}
  .s8-bracket-stage:not(:last-child)[data-matches="4"] .s8-stage-matches:before,.s8-bracket-stage:not(:last-child)[data-matches="4"] .s8-stage-matches:after,.s8-bracket-stage:not(:last-child)[data-matches="2"] .s8-stage-matches:before{right:-27px}
  .s8-match-action{align-items:stretch;flex-direction:column}
  .s8-match-action .button{width:100%}
  .s8-match-action small{text-align:left}
}