/* ---------- Hourglass bracket ---------- */
.hg-scroll { overflow: auto; -webkit-overflow-scrolling: touch; }
.hg { position: relative; display: flex; align-items: stretch; justify-content: center; margin: 0 auto; width: max-content; min-width: 100%; }
.hg-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.hg-lines path { fill: none; stroke: rgba(184, 149, 86, .45); stroke-width: 1.5; }
.hg-lines path.won { stroke: var(--brace); stroke-width: 2.5; filter: drop-shadow(0 0 4px rgba(224, 71, 74, .55)); }

.hg-side { display: flex; gap: var(--hg-gap, 34px); }
.hg-col { display: flex; flex-direction: column; width: var(--hg-w, 186px); }
.hg-head {
  font-family: var(--f-caps); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--oro-chiaro); text-align: center; padding: 0 0 10px; line-height: 1.35;
}
.hg:not(.v) .hg-head { min-height: 44px; }
.hg-head small { display: block; color: var(--brace); letter-spacing: .15em; margin-top: 2px; }
.hg-cells { flex: 1; display: flex; flex-direction: column; }
.hg-cell { flex: 1; display: flex; align-items: center; justify-content: center; padding: 5px 0; min-height: var(--hg-cell, 64px); }

.hg-center { display: flex; flex-direction: column; align-items: center; justify-content: center; width: var(--hg-center-w, 250px); margin: 0 var(--hg-gap, 34px); gap: 16px; }
.hg-champ { text-align: center; padding: 14px 18px 16px; width: 100%; }
.hg-champ .label { font-family: var(--f-caps); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--carminio); }
.hg-champ .name { font-family: var(--f-brush); font-size: 30px; line-height: 1.05; margin-top: 6px; transform: skewX(-6deg); filter: url(#dw-rough); }
.hg-champ .name.tbd { font-family: var(--f-body); font-style: italic; font-size: 20px; opacity: .6; filter: none; transform: none; }
.hg-champ svg { width: 34px; height: 34px; color: var(--carminio); }
/* 2nd and 3rd place under the champion, third-place match under the final */
.hg-places { display: flex; justify-content: center; gap: 14px; margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(120, 90, 45, .4); }
.hg-place { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-family: var(--f-body); font-weight: 600; font-size: 15px; }
.hg-place b { font-family: var(--f-caps); font-size: 12px; letter-spacing: .1em; color: var(--carminio); }
.hg-place span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 95px; }
.hg-place .tbd { font-style: italic; opacity: .6; font-weight: 500; }
.hg-third { margin-top: 6px; }
.hg-third .hg-head { min-height: 0 !important; }

/* vertical orientation (true hourglass): sides become rows, final in the middle row */
.hg.v { flex-direction: column; width: max-content; }
.hg.v .hg-side { flex-direction: column; gap: 22px; }
.hg.v .hg-col { width: auto; }
.hg.v .hg-head { text-align: left; position: sticky; left: 0; align-self: flex-start; padding: 0 4px 6px; }
.hg.v .hg-head small { display: inline; margin-left: 10px; }
.hg.v .hg-cells { flex-direction: row; }
.hg.v .hg-cell { padding: 0 5px; width: var(--hg-w, 138px); flex: none; min-height: 0; }
.hg.v .hg-cells { justify-content: space-around; }
.hg.v .mc { font-size: 14px; }
.hg.v .mc-row .avatar { display: none; }
.hg.v .hg-center { width: 240px; margin: 28px auto; }

/* ---------- match card ---------- */
.mc {
  position: relative; width: 100%;
  font-family: var(--f-body); font-size: 15px;
  background: linear-gradient(180deg, rgba(36, 26, 22, .92), rgba(18, 12, 10, .94));
  border: 1px solid rgba(184, 149, 86, .45);
  color: var(--pergamena);
}
.mc-row { display: flex; align-items: center; gap: 7px; padding: 4px 8px; min-height: 27px; }
.mc-row + .mc-row { border-top: 1px solid rgba(184, 149, 86, .22); }
.mc-row .avatar { --s: 20px; border-width: 1px; box-shadow: none; }
.mc-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.mc-seed { font-family: var(--f-caps); font-size: 10px; color: var(--oro); width: 16px; text-align: right; opacity: .8; }
.mc-score { font-family: var(--f-caps); font-weight: 700; min-width: 16px; text-align: center; }
.mc-row.win { background: linear-gradient(90deg, rgba(142, 27, 27, .75), rgba(142, 27, 27, .25)); }
.mc-row.win .mc-score { color: var(--oro-chiaro); }
.mc-row.lose { opacity: .45; }
.mc-row.lose .mc-name { text-decoration: line-through; text-decoration-color: rgba(224, 71, 74, .7); }
.mc-row .empty { font-style: italic; opacity: .5; font-weight: 500; }
.mc-row .pending { font-family: var(--f-caps); color: var(--oro); letter-spacing: .2em; }
.hg.tight .mc { font-size: 13.5px; }
.hg.tight .mc-row { gap: 5px; padding: 3px 6px; }
.hg.tight .mc-row .avatar { display: none; }
.mc.bye { opacity: .55; }
.mc.bye .mc-row.win { background: none; }
.mc-tag {
  position: absolute; top: -9px; right: 8px;
  font-family: var(--f-caps); font-size: 9px; letter-spacing: .2em;
  background: var(--lacca); border: 1px solid rgba(184, 149, 86, .5); padding: 1px 6px; color: var(--oro-chiaro);
}
.mc.live { border-color: var(--brace); box-shadow: 0 0 0 1px var(--brace), 0 0 22px rgba(224, 71, 74, .45); }
.mc.live .mc-tag { background: var(--carminio); border-color: var(--brace); color: #fff; }
.mc.final { font-size: 18px; }
.mc.final .mc-row { min-height: 38px; padding: 6px 12px; }
.mc.final .mc-row .avatar { --s: 28px; }
.mc.fresh .mc-row:not(.empty-row) { animation: ink-in .9s ease-out; }
@keyframes ink-in { from { background: rgba(224, 71, 74, .6); } }

.mc-guild { font-family: var(--f-caps); font-size: 9px; letter-spacing: .08em; color: var(--oro); border: 1px solid rgba(184, 149, 86, .45); padding: 0 3px; line-height: 1.4; flex: none; max-width: 42px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hg.tight .mc-guild, .hg.v .mc-guild { display: none; }
.mc.dead { opacity: .3; }

/* compact bracket: preliminary round holds only the real matches, next to the match they feed */
.hg-cell.pre { flex-direction: column; gap: 6px; }
.hg.pre2 .hg-col.r0 .hg-cell, .hg.pre2 .hg-col.r1 .hg-cell { min-height: calc(var(--hg-cell, 64px) * 1.75); }
.hg.v .hg-cell.pre { flex-direction: row; gap: 5px; }
.hg.v.pre2 .hg-col.r0 .hg-cell, .hg.v.pre2 .hg-col.r1 .hg-cell { min-height: 0; }
.hg.v .hg-cell.pre.two { width: calc(var(--hg-w, 138px) * 2); }