/* Bracket screen look for the bracket builder (site preview, live view, PNG and the downloaded file).
   brk/view.js sets the colour and font variables on #stage from the layout picked in the Look box:
   --acc accent, --acc-ink text on the accent, --ink text, --mut muted text, --pan box fill, --pan2 score fill,
   --ln lines, --font, --wt weight, --tt upper or none, --fst italic or normal, --rad corner size. */
.bv{position:relative;overflow:hidden;font-family:var(--font);color:var(--ink);font-style:var(--fst);text-transform:var(--tt)}
.bv-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.bv[data-bg=none] .bv-bg{display:none}
.bv-bg::after{content:"";position:absolute;inset:0;background:var(--shade)}
.bv-hd{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:26px;text-align:center}
.bv-hd .logo{flex:none;object-fit:contain}
.bv-hd .tt{min-width:0;max-width:100%}
.bv-hd b{display:block;font-weight:var(--wt);letter-spacing:.06em;line-height:1.05;white-space:nowrap;overflow:hidden;text-shadow:var(--tsh)}
.bv-hd small{display:block;margin-top:10px;font-weight:var(--wt);letter-spacing:.16em;color:var(--mut);white-space:nowrap;overflow:hidden;text-shadow:var(--tsh)}
.bv-hd i{display:block;height:4px;width:120px;margin:12px auto 0;background:var(--acc);border-radius:2px}
.bv .brk{position:absolute}

.brk .lines{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.brk .ln{fill:none;stroke:var(--ln);stroke-width:3}
.brk .ln.on{stroke:var(--acc);stroke-width:4}
.brk .rh{position:absolute;text-align:center}
.brk .rh b{display:block;font-weight:var(--wt);font-size:24px;line-height:28px;letter-spacing:.1em;white-space:nowrap;overflow:hidden;text-shadow:var(--tsh)}
.brk .rh small{display:block;font-weight:var(--wt);font-size:16px;line-height:20px;letter-spacing:.14em;color:var(--mut);white-space:nowrap;overflow:hidden}
.brk .m{position:absolute;display:flex;flex-direction:column;gap:3px}
.brk .t{display:flex;align-items:center;gap:10px;box-sizing:border-box;background:var(--pan);border-radius:var(--rad2);box-shadow:var(--bsh);overflow:hidden}
.brk .t .sd{flex:none;width:1.7em;align-self:stretch;display:flex;align-items:center;justify-content:center;background:var(--acc);color:var(--acc-ink);font-size:.62em;font-weight:var(--wt);font-style:normal}
.brk .badge{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:6px;background:var(--pan2);color:var(--ink);font-style:normal;overflow:hidden}
.brk .badge b{font-weight:var(--wt);letter-spacing:.02em}
.brk .badge img{position:absolute;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px);object-fit:contain}
.brk .badge.has-logo{background:transparent}
.brk .badge.has-logo b{display:none}
.brk .t .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;font-weight:var(--wt);letter-spacing:.01em}
.brk .t .sc{flex:none;width:1.9em;align-self:stretch;display:flex;align-items:center;justify-content:center;font-weight:var(--wt);background:var(--pan2);font-style:normal}
.brk .t.win .sc{background:var(--acc);color:var(--acc-ink)}
.brk .t.lose .nm,.brk .t.lose .sc{color:var(--mut)}
.brk .t.lose .nm{opacity:.8}
.brk .t.tbd .nm{color:var(--mut)}
.brk .m.live .t{box-shadow:var(--bsh),inset 0 0 0 3px var(--acc)}
.brk .lv{position:absolute;right:0;top:-30px;height:26px;line-height:28px;padding:0 12px;border-radius:4px;background:var(--acc);color:var(--acc-ink);font-weight:var(--wt);font-style:normal;font-size:17px;letter-spacing:.14em}
.brk .m .no{position:absolute;left:-36px;top:50%;width:28px;height:28px;margin-top:-14px;display:flex;align-items:center;justify-content:center;border-radius:6px;font-weight:var(--wt);font-style:normal;font-size:15px;color:var(--mut);background:var(--pan)}
.brk .m .no.rev{left:auto;right:-36px}
.brk .champ{position:absolute;box-sizing:border-box;padding:12px 16px 16px;text-align:center;background:var(--pan);border-radius:var(--rad);box-shadow:var(--bsh),inset 0 0 0 3px var(--acc)}
.brk .champ small{display:inline-block;padding:0 16px;height:32px;line-height:34px;border-radius:4px;background:var(--acc);color:var(--acc-ink);font-weight:var(--wt);font-style:normal;font-size:19px;letter-spacing:.18em}
.brk .champ .cn{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:10px}
.brk .champ b.cnm{min-width:0;white-space:nowrap;overflow:hidden;font-weight:var(--wt)}
.brk .champ:not(.has) b.cnm{color:var(--mut)}
.brk .bk{position:absolute;box-sizing:border-box;padding:0 14px;border-radius:var(--rad2);background:var(--acc);color:var(--acc-ink);white-space:nowrap;overflow:hidden}
.brk .bk b{font-weight:var(--wt);font-size:21px;letter-spacing:.14em}
.brk .grp{position:absolute;box-sizing:border-box;padding-bottom:10px;background:var(--pan);border-radius:var(--rad);box-shadow:var(--bsh);overflow:hidden}
.brk .gh{display:flex;align-items:center;padding:0 24px;background:var(--acc);color:var(--acc-ink)}
.brk .gh b{font-weight:var(--wt);font-size:30px;letter-spacing:.12em;white-space:nowrap;overflow:hidden}
.brk .gr{display:flex;align-items:center;gap:14px;padding:0 20px;box-sizing:border-box;border-bottom:1px solid var(--ln)}
.brk .gr.ch{font-size:17px;font-weight:var(--wt);letter-spacing:.14em;color:var(--mut)}
.brk .gr .rk{flex:none;width:1.6em;text-align:center;font-weight:var(--wt)}
.brk .gr .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;font-weight:var(--wt)}
.brk .gr .w,.brk .gr .l,.brk .gr .dd{flex:none;width:2.4em;text-align:center;font-weight:var(--wt)}
.brk .gr.adv{background:var(--accsoft)}
.brk .gr.adv .rk{color:var(--acc)}
.brk .gr.cut{border-bottom:3px solid var(--acc)}

/* cards: Challonge like, rounded and stacked */
.brk[data-look=cards] .m{gap:1px}
.brk[data-look=cards] .m .t:first-child{border-radius:10px 10px 0 0}
.brk[data-look=cards] .m:not(.sres) .t:nth-child(2),.brk[data-look=cards] .m.sres .t:last-child{border-radius:0 0 10px 10px}
.brk[data-look=cards] .t .sd{align-self:center;height:1.6em;width:1.6em;margin-left:8px;border-radius:7px;background:var(--pan2);color:var(--mut)}
/* outline: see through boxes with a line round them */
.brk[data-look=outline] .t,.brk[data-look=outline] .grp,.brk[data-look=outline] .champ{background:var(--panthin);box-shadow:inset 0 0 0 2px var(--ln)}
.brk[data-look=outline] .t .sc{background:transparent}
.brk[data-look=outline] .t.win .sc{background:var(--acc)}
.brk[data-look=outline] .m.live .t{box-shadow:inset 0 0 0 3px var(--acc)}
.brk[data-look=outline] .champ{box-shadow:inset 0 0 0 3px var(--acc)}
.brk[data-look=outline] .bk{background:var(--panthin);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ln)}
/* minimal: just text on a line */
.brk[data-look=minimal] .t{background:none;box-shadow:none;border-radius:0;border-bottom:3px solid var(--ln);text-shadow:var(--tsh)}
.brk[data-look=minimal] .t.win{border-bottom-color:var(--acc)}
.brk[data-look=minimal] .t .sd{background:none;color:var(--mut)}
.brk[data-look=minimal] .t .sc{background:none}
.brk[data-look=minimal] .t.win .sc{background:none;color:var(--acc)}
.brk[data-look=minimal] .m.live .t{box-shadow:none;border-bottom-color:var(--acc)}
.brk[data-look=minimal] .grp,.brk[data-look=minimal] .champ{background:none;box-shadow:none;text-shadow:var(--tsh)}
.brk[data-look=minimal] .gh{background:none;color:var(--ink);border-bottom:4px solid var(--acc)}
.brk[data-look=minimal] .champ{box-shadow:inset 0 -4px 0 var(--acc)}
.brk[data-look=minimal] .bk{background:none;color:var(--ink);box-shadow:inset 0 -3px 0 var(--acc);border-radius:0;text-shadow:var(--tsh)}
.brk .t.tbd .sd{visibility:hidden}