:root{ --win:var(--accent); --lose:#5b6685; --nav-h:clamp(50px,6vw,75px); }
.starfield,.starfield-layer-2{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none}
body{overflow-x:hidden}
/* style.css makes .masthead position:fixed but gives it no backdrop and leaves no room for it —
   the other pages patch that in their own <style> block, and this page had nothing. Same
   treatment here, plus the control bar sticks below the nav instead of under it.
   --nav-h matches .nav's min-height in style.css. */
.masthead{background:rgba(5,5,16,.9);backdrop-filter:blur(8px)}
.page{padding-top:var(--nav-h)}
.bx-head{position:sticky;top:var(--nav-h);z-index:50;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:1rem;padding:.8rem clamp(1rem,4vw,2.5rem);
  background:rgba(8,9,22,.82);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.bx-brand{font-family:var(--font-display);font-weight:500;letter-spacing:.02em;
  font-size:clamp(1rem,2.4vw,1.5rem);color:var(--ink)}
.controls{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
.controls label{color:var(--ink-muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}
.controls select,.controls button{font-family:var(--font-body);font-size:.82rem;color:var(--ink);
  background:var(--surface);border:1px solid var(--rule);border-radius:8px;padding:.4rem .65rem;cursor:pointer;transition:.15s}
.controls select:hover,.controls button:hover{border-color:var(--accent)}
.controls button.primary{border-color:var(--accent);color:var(--accent)}
.controls button.primary.active{background:var(--accent);color:#04121a}
.controls button:disabled{opacity:.4;cursor:not-allowed}
.controls input[type=range]{accent-color:var(--accent);width:130px}
.round-tag{font-family:var(--font-mono);color:var(--accent);font-size:.8rem;min-width:5rem;text-align:center}
.bx-main{padding:1.4rem clamp(.4rem,1.5vw,1.2rem) 3rem}
.bx-banner{margin:0 auto 1.2rem;max-width:640px;text-align:center;font-family:var(--font-mono);
  font-size:.85rem;letter-spacing:.03em;color:var(--accent);background:rgba(0,240,255,.06);
  border:1px solid var(--rule);border-radius:10px;padding:.65rem 1rem}
.bracket{position:relative;display:flex;align-items:stretch;gap:clamp(.25rem,.7vw,.7rem);width:100%}
/* elbow connectors, drawn from the live card positions after every render (see drawLines) */
.bx-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
.bx-lines path{fill:none;stroke:var(--rule);stroke-width:1;stroke-linejoin:round}
.bx-lines path.adv{stroke:var(--accent);opacity:.5}      /* this pairing has already advanced someone */
.bx-lines path.tbd{opacity:.35;stroke-dasharray:3 3}     /* feeds a round that hasn't been announced */
.col{position:relative;z-index:1;flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:space-around;gap:.4rem;transition:flex-grow .35s ease}
.col.off{flex-grow:.72}
.col.on{flex-grow:1.32}
/* the round being announced sizes itself to its longest name and sits brighter than the rest */
.col.focus{flex:0 0 auto;width:max-content;max-width:min(17rem,26vw)}
.col.focus .slot .nm,.col.focus .slot .inst{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  overflow-wrap:normal;word-break:normal}
.col.focus .col-head{color:var(--accent)}
.col.focus .match{background:#121737;border-color:#2c4f70;box-shadow:0 0 20px -9px var(--accent)}
.col.compact{opacity:.75}
.col-head{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-muted);text-align:center;margin-bottom:.3rem;height:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.center-col{justify-content:center;flex:1.15 1 0}
.center-col.on{flex-grow:1.6}
.center-col.off{flex-grow:1.05}
.center-col.focus{flex:0 0 auto;width:max-content;min-width:9rem;max-width:min(17rem,26vw)}
.match{background:var(--surface);border:1px solid var(--rule);border-radius:9px;overflow:hidden;transition:opacity .3s,border-color .2s}
.match.tbd{opacity:.55;border-style:dashed}   /* future rounds: visible, clearly not filled in yet */
.match.populated{border-color:var(--rule)}          /* pairings shown, winner not yet decided */
.match.done{border-color:#1b3a55;box-shadow:0 0 12px -6px var(--accent)}
.slot{display:flex;align-items:center;gap:.35rem;padding:.32rem .45rem;font-size:clamp(.62rem,.85vw,.78rem);
  border-bottom:1px solid var(--rule);line-height:1.25}
.slot:last-child{border-bottom:none}
.slot .who{flex:1;min-width:0;display:flex;flex-direction:column;gap:.05rem}
.slot .nm{white-space:normal;overflow-wrap:anywhere;word-break:break-word}
.slot .inst{font-family:var(--font-mono);font-size:.56rem;color:var(--ink-muted);white-space:normal;overflow-wrap:anywhere}
/* off-focus rounds stay one line per mediator; the rest of the name lives in the hover card */
.col.compact .slot .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  overflow-wrap:normal;word-break:normal}
.col.compact .slot .inst{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}
.slot .sc{font-family:var(--font-mono);font-size:.62rem;color:var(--ink-muted);flex:none}
.slot.win{color:var(--win);font-weight:600}
.slot.win .sc{color:var(--accent)}
.slot.lose{color:var(--lose)}
.champ{margin-top:.7rem;text-align:center}
.champ .trophy{font-size:1.5rem;filter:drop-shadow(0 0 8px rgba(0,240,255,.6))}
.champ .lbl{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)}
.champ .nm{font-family:var(--font-display);color:var(--accent);font-size:.9rem;margin-top:.2rem;
  text-shadow:0 0 18px rgba(0,240,255,.5);word-break:break-word}
.champ .inst{font-family:var(--font-mono);font-size:.6rem;color:var(--ink-muted);margin-top:.15rem}
.champ.tbd .nm{color:var(--lose);text-shadow:none}
/* --- qualifying banners: narrow columns hugging the outside of round 1 --- */
/* a banner is a round-1 slot with its name ghosted out (kept, at zero width, so the banner
   is exactly as tall as the mediator it sits beside) plus the rectangle drawn on top */
.col.qual-col{position:relative;box-sizing:border-box;flex:0 0 auto;
  width:clamp(40px,3.1vw,50px);min-width:0;max-width:none}
.col.qual-col.l{padding-left:1rem;margin-right:calc(6px - clamp(.25rem,.7vw,.7rem))}
.col.qual-col.r{padding-right:1rem;margin-left:calc(6px - clamp(.25rem,.7vw,.7rem))}
.col.qual-col .col-head{letter-spacing:0}
.col.qual-col .match{background:none;border-color:transparent;box-shadow:none;overflow:visible}
.col.qual-col .slot{position:relative;padding-left:0;padding-right:0;border-bottom-color:transparent}
/* the column's own caption, set upright down the outer edge so the words fit a ~2rem column */
.qual-label{position:absolute;top:1.2rem;bottom:0;display:flex;align-items:center;justify-content:center;
  writing-mode:vertical-rl;text-orientation:upright;font-family:var(--font-mono);font-size:.55rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);pointer-events:none}
.col.qual-col.l .qual-label{left:0}
.col.qual-col.r .qual-label{right:0}
.qslot .who{visibility:hidden;width:0;min-width:0;overflow:hidden}
.qslot .qrect{position:absolute;inset:.16rem .1rem;border-radius:3px;display:flex;
  align-items:center;justify-content:center;font-family:var(--font-mono);font-size:.5rem;
  color:var(--ink-muted);background:linear-gradient(180deg,#16315c,#0e1c38);border:1px solid #2c4f70}
/* short rule tying each banner to its mediator's row in the round-1 card */
.qslot::after{content:"";position:absolute;top:50%;height:1px;width:9px;background:var(--rule)}
.qual-col.l .qslot::after{right:-8px}
.qual-col.r .qslot::after{left:-8px}
.qslot[data-qi]{cursor:help}
.qslot[data-qi]:hover .qrect{border-color:var(--accent);color:var(--accent);box-shadow:0 0 11px -3px var(--accent)}
.qslot[data-qi]:hover::after{background:var(--accent)}
.qslot.no-data .qrect{background:none;border-style:dashed;border-color:var(--rule);opacity:.45}
.qslot.no-data::after{opacity:.45}
.bx-tip .q-name{font-weight:600;text-align:center;overflow-wrap:anywhere}
.bx-tip .q-inst{font-family:var(--font-mono);font-size:.56rem;color:var(--ink-muted);
  text-align:center;overflow-wrap:anywhere}
.bx-tip .q-seed{font-family:var(--font-mono);font-size:.58rem;color:var(--accent);text-align:center;margin-top:.2rem}
.bx-tip .q-row{display:flex;align-items:baseline;justify-content:space-between;gap:.9rem;
  margin-top:.24rem;font-size:.66rem}
.bx-tip .q-row .k{color:var(--ink-muted)}
.bx-tip .q-row .v{font-family:var(--font-mono)}
/* the composite that set the seed, marked off from the parts it is made of */
.bx-tip .q-row.lead{margin-top:.1rem;padding-bottom:.3rem;border-bottom:1px solid var(--rule)}
.bx-tip .q-row.lead .k,.bx-tip .q-row.lead .v{color:var(--accent);font-weight:600}
/* --- intro + section head + gift-card row --- */
.hero-title.page-title{text-align:center;margin:.2rem auto 0; max-width:30ch; padding:1em;}
.hero-subtitle-bracket{padding:0.2em; font-family: "Orbitron", sans-serif; color: var(--accent); font-size: clamp(2rem, 3.8vw, 2.8rem);font-weight: 500; letter-spacing: .04em;}
.bx-intro{max-width:680px;margin:.5rem auto 1.1rem;text-align:center;color:var(--ink-muted);line-height:1.65}
.bx-banner.bx-link{max-width:640px}
.bx-banner.bx-link a{color:var(--accent);text-decoration:none;font-family:var(--font-mono);font-size:.82rem}
.bx-banner.bx-link a:hover{color:var(--accent-deep)}
.bx-section-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem;margin:1.8rem 0 .9rem}
.bx-section-head h2{margin:0}
.gift-section{margin-top:2.4rem}
.gift-section h2{text-align:center;margin:0}
.gift-note{text-align:center;color:var(--ink-muted);font-size:.8rem;margin:.35rem 0 1.1rem}
.gifts{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}
.gift{flex:1 1 0;min-width:130px;max-width:210px;background:var(--surface);border:1px solid var(--rule);
  border-radius:11px;padding:.7rem .6rem;text-align:center}
.gift.tbd{opacity:.4;border-style:dashed}
.gift .r{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
.gift .nm{margin-top:.35rem;color:var(--accent);font-weight:600;font-size:.9rem;word-break:break-word}
.gift.tbd .nm{color:var(--lose)}
.gift .inst{margin-top:.15rem;font-family:var(--font-mono);font-size:.58rem;color:var(--ink-muted)}
.gift .sub{margin-top:.35rem;font-size:.58rem;color:var(--ink-muted)}
.gift.qual{border-color:#3a2a55}                    /* qualifying draw = open to all entrants */
.gift.qual .r,.gift.qual .nm{color:var(--accent-deep)}
/* --- hover card on a matchup --- */
.match[data-r],.match[data-tbd]{cursor:help}
.match[data-r]:hover{border-color:var(--accent)}
.match[data-tbd]:hover{opacity:.8;border-color:var(--ink-muted)}
.bx-tip{position:absolute;z-index:200;width:max-content;max-width:min(285px,88vw);
  background:rgba(8,9,22,.97);border:1px solid var(--rule);border-radius:11px;
  padding:.7rem .8rem;box-shadow:0 14px 34px -12px #000;
  font-size:.72rem;line-height:1.45;color:var(--ink)}
.bx-tip[hidden]{display:none}
.bx-tip.note-only{max-width:min(210px,80vw)}   /* a single sentence doesn't need the full width */
.bx-tip::after{content:"";position:absolute;left:0;right:0;height:12px}  /* hover bridge to the card */
.bx-tip.below::after{top:-12px}
.bx-tip.above::after{bottom:-12px}
.bx-tip a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(0,240,255,.35)}
.bx-tip a:hover{color:var(--accent-deep);border-bottom-color:currentColor}
.bx-tip .t-head{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-muted);margin-bottom:.5rem;text-align:center}
/* the two mediators sit left and right; every number below keeps that side */
.bx-tip .t-top{display:grid;grid-template-columns:1fr auto 1fr;gap:.5rem;align-items:start}
.bx-tip .t-side{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.bx-tip .t-side.r{text-align:right}
.bx-tip .t-seed{font-family:var(--font-mono);font-size:.58rem;color:var(--ink-muted)}
.bx-tip .t-nm{font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.bx-tip .t-inst{font-family:var(--font-mono);font-size:.56rem;color:var(--ink-muted);overflow-wrap:anywhere}
.bx-tip .t-side.win .t-nm,.bx-tip .t-side.win .t-seed{color:var(--win)}
.bx-tip .t-side.lose .t-nm,.bx-tip .t-side.lose .t-seed,.bx-tip .t-side.lose .t-inst{color:var(--lose)}
.bx-tip .t-mid{font-family:var(--font-mono);font-size:.58rem;color:var(--ink-muted);padding-top:.55rem}
.bx-tip .t-score{display:flex;align-items:baseline;justify-content:center;gap:.5rem;
  font-family:var(--font-mono);font-size:1.6rem;line-height:1;margin:.7rem 0 .2rem}
.bx-tip .t-score .n.win{color:var(--win);text-shadow:0 0 16px rgba(0,240,255,.35)}
.bx-tip .t-score .n.lose{color:var(--lose)}
.bx-tip .t-score .d{font-size:1rem;color:var(--ink-muted)}
.bx-tip .t-sub{text-align:center;font-family:var(--font-mono);font-size:.56rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-muted)}
.bx-tip .t-sec{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-muted);margin:.75rem 0 .35rem;padding-top:.55rem;border-top:1px solid var(--rule);text-align:center}
.bx-tip .t-dim{display:grid;grid-template-columns:2rem 1fr 2rem;align-items:baseline;gap:.4rem;margin-top:.2rem}
.bx-tip .t-dim .n{font-family:var(--font-mono);font-size:.85rem;color:var(--ink-muted)}
.bx-tip .t-dim .n.hi{color:var(--ink);font-weight:700}
.bx-tip .t-dim .n.r{text-align:right}
.bx-tip .t-dim .lbl{text-align:center;font-size:.64rem;color:var(--ink-muted);line-height:1.25}
.bx-tip .t-dim .lbl i{display:block;font-family:var(--font-mono);font-style:normal;font-size:.52rem;opacity:.7}
.bx-tip .t-note{margin-top:.7rem;padding-top:.55rem;border-top:1px solid var(--rule);
  font-size:.64rem;color:var(--ink-muted);text-align:center}
.bx-tip .t-convos{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;align-items:start;
  margin-top:.7rem;padding-top:.55rem;border-top:1px solid var(--rule)}
.bx-tip .t-convos.one{grid-template-columns:1fr;text-align:center}   /* qualifying card: one mediator */
.bx-tip .t-convo{font-size:.62rem;line-height:1.3;overflow-wrap:anywhere}
.bx-tip .t-convo.r{text-align:right}
.bx-tip a.t-convo::after{content:" \2197";border-bottom:none}
.bx-tip .t-convo.soon{color:var(--lose);border-bottom:1px dashed var(--rule)}