/* eNL — 1v1 knockout "Bracket view" (see bracketview.js).
   Colours come from the site's theme tokens, so the Neon Night theme works
   with no extra rules. Fonts reuse Teko (display) + Manrope (body). */

.bv-host{
  position:relative;
  /* The bracket is wider than the site's 1080px column, so let it use almost
     the whole window while staying centred on the column. */
  --bv-w:min(calc(100vw - 48px), 1680px);
  width:var(--bv-w);
  margin-left:calc((100% - var(--bv-w)) / 2);
}
@media (max-width:640px){ .bv-host{ --bv-w:100%; margin-left:0; } }

/* ---- toolbar ---- */
.bv-bar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:10px 18px; margin:0 0 10px;
}
.bv-legend{ display:flex; flex-wrap:wrap; gap:6px 16px; font-size:.76rem; color:var(--muted); }
.bv-legend span{ display:inline-flex; align-items:center; gap:8px; }
.bv-key{ display:inline-block; width:24px; height:0; border-top:2px dashed rgba(var(--text-rgb),.45); }
.bv-key.is-played{ border-top:3px solid var(--gold); box-shadow:0 0 6px rgba(var(--gold-rgb),.55); }
.bv-key.is-ready{ width:16px; height:10px; border:1.5px solid var(--pitch); border-radius:3px; }
.bv-tools{ display:flex; gap:6px; align-items:center; }
.bv-btn{
  min-height:36px; padding:6px 14px; cursor:pointer;
  font:inherit; font-size:.8rem; font-weight:700; color:inherit;
  background:rgba(var(--text-rgb),.05); border:1px solid var(--line); border-radius:999px;
  transition:border-color .15s, background .15s;
}
.bv-btn:hover{ border-color:var(--gold); }
.bv-btn[hidden]{ display:none; }
.bv-btn-sq{ min-width:36px; padding:6px 0; font-size:1.05rem; line-height:1; }

/* ---- scroll area + stage ---- */
.bv-scroll{
  position:relative; overflow-x:auto; overflow-y:hidden; cursor:grab;
  padding:0 12px; box-sizing:border-box;
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
  -webkit-overflow-scrolling:touch;
}
.bv-scroll.is-panning{ cursor:grabbing; user-select:none; }
.bv-scroll:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.bv-sizer{ position:relative; margin:0 auto; }
/* edge fades: shown only on the sides that still have bracket to scroll to */
.bv-frame{ position:relative; border-radius:14px; }
.bv-frame::before, .bv-frame::after{
  content:""; position:absolute; top:1px; bottom:1px; width:44px; z-index:2; pointer-events:none;
  opacity:0; transition:opacity .2s;
}
.bv-frame::before{ left:1px; border-radius:13px 0 0 13px; background:linear-gradient(90deg, var(--panel), transparent); }
.bv-frame::after{ right:1px; border-radius:0 13px 13px 0; background:linear-gradient(270deg, var(--panel), transparent); }
.bv-frame.can-left::before, .bv-frame.can-right::after{ opacity:1; }
.bv-stage{
  position:absolute; left:0; top:0; transform-origin:0 0;
  /* mown-lawn stripes: the bracket is a pitch seen from above */
  background:repeating-linear-gradient(90deg, rgba(var(--pitch-rgb),.07) 0 128px, transparent 128px 256px);
}
.bv-svg{ position:absolute; left:0; top:0; pointer-events:none; overflow:visible; }

/* pitch markings */
.bv-marks line, .bv-marks circle{ fill:none; stroke:rgba(var(--text-rgb),.09); stroke-width:2; }
.bv-marks .bv-spot{ fill:rgba(var(--text-rgb),.12); stroke:none; }

/* connectors: dashed = not played, solid gold = advanced */
.bv-link{
  fill:none; stroke:rgba(var(--text-rgb),.3); stroke-width:1.5; stroke-dasharray:5 5;
  transition:opacity .18s, stroke .18s;
}
.bv-link.is-played{
  stroke:var(--gold); stroke-width:2.5; stroke-dasharray:none;
  filter:drop-shadow(0 0 3px rgba(var(--gold-rgb),.5));
}

/* ---- round headings ---- */
.bv-head{
  position:absolute; top:16px; display:flex; align-items:baseline; justify-content:space-between;
  padding:0 2px 6px; border-bottom:1px solid var(--line);
}
.bv-head b{ font-family:'Teko',sans-serif; font-weight:500; font-size:1.45rem; line-height:1; letter-spacing:.03em; }
.bv-head span{ font-size:.8rem; font-weight:700; color:var(--muted); }

/* ---- match cards ---- */
.bv-card{
  position:absolute; border-radius:9px;
  background:var(--panel-2); border:1px solid var(--line);
  box-shadow:var(--shadow-card);
  transition:opacity .18s, border-color .18s, box-shadow .18s;
}
.bv-rows{ display:flex; flex-direction:column; height:100%; border-radius:8px; overflow:hidden; }
.bv-row{
  flex:1 1 0; min-height:0; min-width:0; display:flex; align-items:center; gap:8px;
  padding:0 8px 0 11px; margin:0; border:0; border-radius:0; text-align:left;
  font:inherit; color:inherit; background:none; cursor:pointer;
  -webkit-appearance:none; appearance:none;
}
.bv-row + .bv-row{ border-top:1px solid var(--line); }
.bv-row:focus-visible{ outline:2px solid var(--gold); outline-offset:-2px; }
.bv-dot{ flex:0 0 auto; width:7px; height:7px; border-radius:50%; }
.bv-name{
  flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:.88rem; font-weight:700;
}
.bv-score{
  flex:0 0 auto; min-width:26px; height:22px; padding:0 5px; display:grid; place-items:center;
  font-family:'Teko',sans-serif; font-weight:500; font-size:1.3rem; line-height:1;
  border-radius:5px; background:rgba(var(--text-rgb),.07); color:var(--muted);
}
.bv-score:empty{ background:none; }
.bv-score sup{ font-family:'Manrope',sans-serif; font-size:.55rem; font-weight:800; margin-left:2px; opacity:.8; }

/* winner / loser */
.bv-row.is-win{
  background:linear-gradient(90deg, rgba(var(--gold-rgb),.2), rgba(var(--gold-rgb),.04));
  box-shadow:inset 3px 0 0 var(--gold);
}
.bv-row.is-win .bv-name{ font-weight:800; }
.bv-row.is-win .bv-score{ background:var(--gold); color:var(--on-gold); }
.bv-row.is-win .bv-score:empty{ background:none; }
.bv-row.is-lose .bv-name{ color:var(--muted); font-weight:600; }
.bv-row.is-lose .bv-dot{ opacity:.45; }

/* empty / bye slots */
.bv-row.is-empty{ cursor:default; }
.bv-row.is-empty .bv-name{ font-size:.72rem; font-weight:600; font-style:italic; color:var(--muted); opacity:.75; }
.bv-row.is-bye{ background:repeating-linear-gradient(135deg, rgba(var(--text-rgb),.06) 0 4px, transparent 4px 9px); }

/* card states */
.bv-card.is-wait{ background:rgba(var(--text-rgb),.025); border-style:dashed; box-shadow:none; }
.bv-card.is-done{ border-color:rgba(var(--gold-rgb),.38); }
.bv-card.is-ready{
  border-color:var(--pitch);
  box-shadow:0 0 0 1px rgba(var(--pitch-rgb),.4), var(--shadow-card);
}
.bv-card.is-mine{
  outline:2px solid var(--gold); outline-offset:2px;
  box-shadow:0 0 22px rgba(var(--gold-rgb),.28), var(--shadow-card);
}

/* open-in-round-list button */
.bv-open{
  position:absolute; top:-9px; right:-9px; width:22px; height:22px; padding:0;
  display:grid; place-items:center; cursor:pointer; opacity:0;
  color:var(--muted); background:var(--panel); border:1px solid var(--line); border-radius:50%;
  transition:opacity .15s, color .15s, border-color .15s;
}
.bv-open::after{ content:""; position:absolute; inset:-9px; }
.bv-card:hover .bv-open, .bv-card:focus-within .bv-open, .bv-open:focus-visible{ opacity:1; }
.bv-open:hover{ color:var(--gold); border-color:var(--gold); }
@media (hover:none){ .bv-open{ opacity:.9; } }

/* ---- the final, trophy medallion, champion plate ---- */
.bv-card.is-final .bv-name{ font-size:.95rem; }
.bv-card.is-final .bv-score{ min-width:30px; height:26px; font-size:1.4rem; }
.bv-card.is-final .bv-row{ padding-left:14px; }

.bv-medal{
  position:absolute; width:150px; height:150px; border-radius:50%;
  display:grid; place-items:center;
  background:radial-gradient(circle at 50% 45%, rgba(var(--gold-rgb),.16), rgba(var(--bg-rgb),0) 70%);
}
/* gold trophy cup with the Enation League logo as a sticker; muted until a champion is crowned */
.bv-medal .bv-trophy{
  display:block; overflow:visible; pointer-events:none; user-select:none;
  opacity:.55; filter:grayscale(.65) brightness(.8) drop-shadow(0 4px 8px rgba(0,0,0,.5));
  transition:opacity .4s, filter .4s;
}
.bv-medal.is-crowned{ background:radial-gradient(circle at 50% 45%, rgba(var(--gold-rgb),.34), rgba(var(--bg-rgb),0) 72%); }
.bv-medal.is-crowned .bv-trophy{
  opacity:1; filter:drop-shadow(0 0 14px rgba(var(--gold-rgb),.55)) drop-shadow(0 4px 8px rgba(0,0,0,.5));
}

.bv-champ{ position:absolute; text-align:center; line-height:1.1; }
.bv-champ span{ display:block; font-size:.74rem; font-weight:700; color:var(--muted); }
.bv-champ em{ display:block; margin-top:4px; font-size:.78rem; font-style:italic; color:var(--muted); opacity:.8; }
.bv-champ strong{
  display:block; margin-top:2px; font-family:'Teko',sans-serif; font-weight:500;
  font-size:2rem; letter-spacing:.02em; color:var(--gold);
  text-shadow:0 0 18px rgba(var(--gold-rgb),.45);
}

/* ---- follow-a-player trace ---- */
.bv-stage.is-tracing .bv-card:not(.is-on){ opacity:.3; }
.bv-stage.is-tracing .bv-link:not(.is-on){ opacity:.14; }
.bv-link.is-on{
  stroke:var(--gold); stroke-width:3.5; stroke-dasharray:none;
  filter:drop-shadow(0 0 5px rgba(var(--gold-rgb),.8));
}
.bv-card.is-on{ border-color:var(--gold); }
.bv-row.is-pid .bv-name{ color:var(--gold); }

/* ---- hint + flash ---- */
.bv-hint{ margin:10px 2px 0; font-size:.76rem; color:var(--muted); }

@keyframes bv-flash{
  0%,100%{ box-shadow:0 0 22px rgba(var(--gold-rgb),.28), var(--shadow-card); }
  50%{ box-shadow:0 0 0 6px rgba(var(--gold-rgb),.35), 0 0 34px rgba(var(--gold-rgb),.6); }
}
.bv-card.is-flash{ animation:bv-flash .9s ease-in-out 2; }

@media (prefers-reduced-motion:reduce){
  .bv-card, .bv-link, .bv-open{ transition:none; }
  .bv-card.is-flash{ animation:none; }
}
@media (max-width:640px){
  .bv-legend{ font-size:.72rem; gap:4px 12px; }
}