:root{font-family:Arial,'Hiragino Kaku Gothic ProN',sans-serif;color:#eee;background:#0c0e11;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,.button,select,a{font:inherit}button,.button,select{background:#20242a;border:1px solid #3b4048;color:#eee;padding:12px 16px;border-radius:4px;cursor:pointer}button:disabled{opacity:.4;cursor:wait}a{color:inherit;text-decoration:none}small,.eyebrow{font-size:10px;letter-spacing:2px;color:#a1a4ac}header{display:flex;align-items:center;gap:20px;padding:28px 5%;border-bottom:1px solid #303238}header a{margin-left:auto;font-size:13px;border-bottom:1px solid #a9b58b;padding:10px}h1{font-size:23px;margin:7px 0}em{font-style:normal;color:#b6bd9b;font-size:.65em}.mark{border:1px solid #778365;padding:12px;font-size:24px;font-weight:900}.mark span{color:#9dab7e}.desk{padding:48px 7%;display:grid;grid-template-columns:1fr 340px;gap:70px;background:radial-gradient(ellipse at 40% 20%,#242a24,transparent 70%)}h2{font-size:42px;line-height:1.4;letter-spacing:-1px;margin:22px 0}.muted{color:#969ca4;font-size:12px;line-height:1.9}.stats{display:flex;gap:55px;margin:36px 0;color:#9299a1;font-size:11px}.stats b{display:block;color:#f1f2e9;font-size:36px;margin-bottom:6px}.primary{background:#c7d2a5;color:#151b10;border:0;font-weight:700;padding:20px}#draw{width:100%;max-width:520px;text-align:left;font-size:16px}#draw span{float:right}#status{font-size:13px;color:#c9d4ae;min-height:20px}.settings{display:flex;gap:20px;align-items:center;margin:24px 0;font-size:12px}select{padding:8px}.monitor{background:#08090b;padding:15px;border:1px solid #363b37;border-radius:6px}.monitor .eyebrow{font-size:8px;margin-bottom:12px}.monitor span{float:right;color:#a8bd88}iframe{width:100%;aspect-ratio:9/16;border:0;display:block}.workspace{display:grid;grid-template-columns:1fr 1fr;gap:45px;padding:25px 5% 60px}.sectionhead{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #333;padding-bottom:15px}h3{font-size:17px}#saved{color:#a9b78b;font-size:11px}.row{display:flex;align-items:center;gap:12px;padding:15px 0;border-bottom:1px solid #282c32}.row img{width:43px;height:43px;object-fit:cover;border-radius:50%}.row .info{flex:1;font-size:13px}.row small{display:block;letter-spacing:0;margin-top:6px}.row button{font-size:11px;padding:8px}.used{opacity:.45}.history{padding:22px 0;border-bottom:1px solid #333}.history small{display:block;margin-bottom:10px}.history strong{font-size:16px}.history em{margin:0 10px}.tools{display:flex;flex-wrap:wrap;gap:10px;margin-top:25px;font-size:11px}.danger{color:#ed9b91}footer{border-top:1px solid #333;padding:22px 5%;color:#777f89;font-size:9px;letter-spacing:2px}footer span{float:right}dialog{max-width:620px;width:95%;background:#171b20;color:#eee;border:1px solid #525c49;padding:28px}dialog::backdrop{background:#000c}dialog h2{font-size:25px}dialog label{display:block;font-size:12px}input:not([type=checkbox]){display:block;width:100%;padding:12px;background:#0e1114;color:white;border:1px solid #444;margin:10px 0}dialog img{width:110px;height:110px;object-fit:cover}.members{display:flex;gap:20px}.members label{width:50%}dialog p{font-size:11px;color:#a0a4a8}#broadcast{height:100vh;background:#030509;overflow:hidden;display:flex;justify-content:center}#broadcast[hidden],#admin[hidden]{display:none}#stage{height:100vh;aspect-ratio:9/16;position:relative;overflow:hidden;background:radial-gradient(ellipse at 0 30%,#671b17,transparent 55%),radial-gradient(ellipse at 100% 80%,#123767,transparent 60%),#08090d;container-type:inline-size}.grain{position:absolute;inset:0;background:repeating-linear-gradient(115deg,transparent 0 17px,#ffffff03 18px 19px);pointer-events:none}.stagehead{position:absolute;top:3%;left:7%;right:7%;border-bottom:1px solid #ffffff40;padding-bottom:3%;display:flex;flex-direction:column;gap:8px}.stagehead span{font-weight:900;font-size:5cqw;letter-spacing:-.2cqw}.stagehead b{font-size:3cqw;color:#c6c5ad}.stagehead small{font-size:1.7cqw}#phase{position:absolute;top:13%;left:7%;color:#c7bca6;font-size:2cqw;letter-spacing:.5cqw}.teamcard{position:absolute;left:6%;width:88%;height:29%;border:1px solid #ffffff70;transform:skewY(-4deg);box-shadow:0 0 35px #0009;background:#16191e;overflow:hidden}.red{top:18%;--accent:#ff6651}.blue{top:57%;--accent:#58afff}.portrait{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.portrait.a{clip-path:polygon(0 0,75% 0,25% 100%,0 100%);object-position:25% center}.portrait.b{clip-path:polygon(75% 0,100% 0,100% 100%,25% 100%);object-position:75% center}.cut{position:absolute;width:2px;height:160%;background:white;box-shadow:0 0 12px 4px var(--accent);left:50%;top:-30%;transform:rotate(42deg)}.cardshade{position:absolute;inset:0;background:linear-gradient(0deg,#050608ed,transparent 55%)}.names{position:absolute;bottom:7%;left:6%;right:6%;display:flex;justify-content:space-between;gap:10px;font-size:4cqw;font-weight:900;text-shadow:0 2px 8px #000;transform:skewY(4deg)}.names span{max-width:49%;overflow-wrap:anywhere}.tag{position:absolute;top:5%;left:5%;font-size:2.1cqw;letter-spacing:.3cqw;background:#090c10b8;padding:5px 10px;border-left:3px solid var(--accent);max-width:90%}.placeholder{height:100%;display:grid;place-items:center;font-size:4cqw;color:#ffffff40;letter-spacing:1cqw}#versus{position:absolute;top:46%;height:12%;left:0;width:100%;display:flex;align-items:center;justify-content:center;gap:20px;z-index:3}#versus strong{font-size:19cqw;line-height:1;font-style:italic;font-weight:1000;color:#eeeadd;text-shadow:4px 4px #6e5e3f,0 0 30px #cba77c66;transform:skew(-12deg)}#versus i{height:1px;width:17%;background:#c7ac77}.stagefoot{position:absolute;bottom:4%;left:7%;right:7%;display:flex;flex-direction:column;gap:10px;font-size:2cqw;letter-spacing:.3cqw}.stagefoot b{font-size:1.6cqw;color:#a3a6ad}#flash{position:absolute;inset:0;pointer-events:none;z-index:9}#slash{position:absolute;inset:-30%;pointer-events:none;z-index:8}.impact #flash{animation:flash .65s ease-out}.impact{animation:shake .45s}.impact #slash{animation:slash .5s ease-out}.shuffling{filter:contrast(1.2) saturate(.7)}.blackout #flash{background:#000}.vs-pop #versus strong{animation:pop .55s cubic-bezier(.1,.7,.2,1)}@keyframes flash{0%{background:#fff}20%{background:#ffffff70}100%{background:transparent}}@keyframes shake{10%,50%{transform:translate(5px,-4px)}30%,70%{transform:translate(-5px,3px)}}@keyframes slash{0%{background:linear-gradient(130deg,transparent 48%,#fff 50%,transparent 52%);transform:translateX(-80%)}100%{transform:translateX(80%)}}@keyframes pop{from{transform:scale(4) skew(-12deg);opacity:0}to{transform:scale(1) skew(-12deg)}}@media(max-width:800px){.desk{grid-template-columns:1fr;padding:30px 6%;gap:25px}.monitor{max-width:320px;margin:auto;width:100%}.workspace{grid-template-columns:1fr}h2{font-size:32px}header{gap:10px}header a{font-size:10px}h1{font-size:16px}.settings{flex-wrap:wrap}}

/* Full-bleed arena — every team occupies the edge of the 9:16 canvas. */
#stage{isolation:isolate;background:#07090e;width:min(100vw,56.25vh);flex-shrink:0}
.teamcard{left:0;width:100%;height:64%;border:0;transform:none;box-shadow:none;transition:clip-path .65s cubic-bezier(.16,1,.3,1),height .65s,top .65s;z-index:1;background:#11151c;--split-top:70%;--split-bottom:30%}
.teamcard.red{top:0;clip-path:polygon(0 0,100% 0,100% 61%,0 100%);background:radial-gradient(ellipse at 20% 25%,#b7471d,#1c0d0c 75%);--accent:#ff9b37}
.teamcard.blue{top:39%;height:61%;clip-path:polygon(0 41%,100% 0,100% 100%,0 100%);background:radial-gradient(ellipse at 80% 75%,#135d9b,#080e20 75%);--accent:#39bfff}
.portrait{overflow:hidden;container-type:size}
.portrait.a{clip-path:polygon(0 0,var(--split-top) 0,var(--split-bottom) 100%,0 100%)}
.portrait.b{clip-path:polygon(var(--split-top) 0,100% 0,100% 100%,var(--split-bottom) 100%)}
.portrait.framing-fill{background-color:var(--portrait-background,#11151c)}
/* Keep the original image intact at every zoom. The diagonal mask handles clipping. */
.portrait img{
 position:absolute;display:block;
 width:calc(max(70cqw,100cqh * var(--portrait-ratio,1)) * var(--portrait-scale,1.035));
 height:auto;top:var(--portrait-y,45%);left:calc(var(--portrait-x,50%) * .7);
 translate:calc(var(--portrait-pan-x,0px) - var(--portrait-x,50%)) calc(var(--portrait-pan-y,0px) - var(--portrait-y,45%));
 transform-origin:var(--portrait-x,50%) var(--portrait-y,45%);
}
.portrait.b img{left:calc(30% + var(--portrait-x,50%) * .7)}
.cardshade{background:linear-gradient(90deg,#09090d55,transparent 30%,transparent 70%,#09090d66),linear-gradient(0deg,#02050c 0%,transparent 30%,transparent 70%,#02050c99);box-shadow:inset 0 0 14cqw #0008;pointer-events:none}
.red .cardshade{background:linear-gradient(0deg,#170a08 0%,transparent 33%,transparent 65%,#160803bb),linear-gradient(100deg,#ff591d22,transparent 75%)}
.blue .cardshade{background:linear-gradient(0deg,#020713dd 0%,transparent 35%,#02071355),linear-gradient(280deg,#168cff22,transparent 75%)}
.cut{inset:0;width:auto;height:auto;transform:none;box-shadow:none;background:none;opacity:.8;filter:drop-shadow(0 0 .8cqw var(--accent));pointer-events:none}
.cut::before{
 content:"";position:absolute;inset:0;background:white;
 clip-path:polygon(calc(var(--split-top) - .12cqw) 0,calc(var(--split-top) + .12cqw) 0,
  calc(var(--split-bottom) + .12cqw) 100%,calc(var(--split-bottom) - .12cqw) 100%);
}
.names{transform:none;font-size:4.6cqw;bottom:auto;left:6%;right:6%;gap:2cqw;z-index:3;text-shadow:0 2px 4px #000,0 0 15px #000;line-height:1.2}
.names span{padding:1.4cqw 2cqw;background:linear-gradient(90deg,#08090de8,#08090d55);border-left:.5cqw solid var(--accent);max-width:48%}
.red .names{top:52%}.blue .names{top:72%}
.tag{top:auto;bottom:auto;font-size:2.4cqw;letter-spacing:.25cqw;background:#08090dbb;padding:1.4cqw 2cqw;left:6%;z-index:3;border-left:.5cqw solid var(--accent)}
.red .tag{top:45%}.blue .tag{top:65%}
.stagehead{z-index:6;top:3%;left:5%;right:5%;border:0;padding:0;text-shadow:0 2px 10px #000;gap:1cqw}.stagehead span{font-size:5.6cqw}.stagehead small{font-size:1.6cqw;color:#d8cabb}
#phase{z-index:6;top:10%;left:5%;font-size:1.8cqw;letter-spacing:.4cqw;color:#fff9}
#versus{top:44.5%;height:14%;z-index:6;filter:drop-shadow(0 0 3cqw #000)}
#versus strong{font-size:27cqw;color:#fff4d9;text-shadow:0 .8cqw #69503c,0 0 6cqw #ffb35c70;transform:rotate(-13deg) skew(-12deg)}
#versus i{display:none}
.stagefoot{z-index:6;bottom:3%;left:5%;right:5%;font-size:2cqw;text-shadow:0 2px 8px #000}.stagefoot b{display:none}
.arena-edge{position:absolute;inset:1.2%;z-index:7;border:1px solid #e6d0a43a;pointer-events:none;clip-path:polygon(0 0,23% 0,23% .3%,77% .3%,77% 0,100% 0,100% 100%,77% 100%,77% 99.7%,23% 99.7%,23% 100%,0 100%);box-shadow:inset 0 0 3cqw #ffffff0a}
.energy-seam{position:absolute;inset:0;z-index:4;pointer-events:none;filter:drop-shadow(0 0 1cqw #ff4b1c)}
.energy-seam svg{width:100%;height:100%;overflow:visible}.energy-seam path{fill:none;stroke:url(#energy)}.seam-glow{stroke-width:25;filter:url(#glow);opacity:.8}.seam-core{stroke-width:3;filter:drop-shadow(0 0 5px white)}
.atmosphere{position:absolute;inset:-10%;z-index:3;pointer-events:none;background:radial-gradient(ellipse at 0 34%,#ff6b192d,transparent 44%),radial-gradient(ellipse at 100% 83%,#057eff42,transparent 48%);mix-blend-mode:screen;animation:smoke-drift 8s ease-in-out infinite alternate}
.grain{z-index:5;opacity:.4;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.22' d='M0 0h160v160H0z'/%3E%3C/svg%3E");mix-blend-mode:soft-light}
.embers{position:absolute;inset:0;z-index:5;overflow:hidden;pointer-events:none}.ember{position:absolute;width:.35cqw;height:1.5cqw;background:#ffe0a5;box-shadow:0 0 1cqw #ff6319;transform:rotate(25deg);animation:ember-fly var(--duration) linear infinite;animation-delay:var(--delay);opacity:0}.ember.cold{background:#b3eaff;box-shadow:0 0 1.5cqw #008cff}
.shuffle-frame{position:absolute;inset:0}.shuffling .names{opacity:.8}.locked .portrait img{animation:lock-in .7s cubic-bezier(.16,1,.3,1)}
#stage[data-mode=intro] #versus,#stage:is([data-mode=first],[data-mode=first-locked]) #versus{opacity:0}
#stage[data-mode=intro] .energy-seam,#stage:is([data-mode=first],[data-mode=first-locked]) .energy-seam{opacity:0}
#stage:is([data-mode=first],[data-mode=first-locked]) .red{height:100%;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);z-index:2}
#stage:is([data-mode=first],[data-mode=first-locked]) .red .tag{top:75%}#stage:is([data-mode=first],[data-mode=first-locked]) .red .names{top:80%}
#stage:is([data-mode=first],[data-mode=first-locked]) .blue{opacity:0}
#stage[data-mode=second] .blue .portrait{filter:brightness(1.12)}
#stage[data-mode=final] .energy-seam{animation:seam-breathe 3s ease-in-out infinite alternate}
#stage[data-mode=versus] #versus strong{animation:arena-vs .6s cubic-bezier(.16,1,.3,1)}
@keyframes smoke-drift{to{transform:translate(4%, -3%) scale(1.12);opacity:.65}}
@keyframes ember-fly{0%{transform:translate(0,4cqw) rotate(30deg);opacity:0}15%,75%{opacity:.9}100%{transform:translate(16cqw,-65cqw) rotate(40deg);opacity:0}}
@keyframes lock-in{0%{transform:scale(1.237);filter:brightness(2)}100%{transform:scale(1);filter:brightness(1)}}
@keyframes seam-breathe{to{filter:drop-shadow(0 0 2cqw #ff5b24);opacity:.75}}
@keyframes arena-vs{from{transform:rotate(-13deg) skew(-12deg) scale(4);opacity:0}to{transform:rotate(-13deg) skew(-12deg) scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.embers,.atmosphere{animation:none}.ember{display:none}}
.energy-seam .seam-core{stroke-width:5}.energy-seam .seam-glow{stroke-width:36}.impact .energy-seam{filter:drop-shadow(0 0 4cqw #ff682b)}
#replay{font-size:12px;background:transparent;border-color:#687351;color:#c7d2a5}

/* Both draws fill the full portrait frame; empty stages stay pure black. */
#stage{background:#000}
#stage[data-mode=second] .blue{top:0;height:100%;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);z-index:2}
#stage[data-mode=second] .blue .tag{top:75%}
#stage[data-mode=second] .blue .names{top:80%}
#stage[data-mode=second] .red{opacity:0}
#stage[data-mode=second] #versus,#stage[data-mode=second] .energy-seam{opacity:0}
.teamcard:has(.placeholder){background:#000;box-shadow:none}
.placeholder{visibility:hidden}
#stage:has(.placeholder) .atmosphere,#stage:has(.placeholder) .grain,#stage:has(.placeholder) .embers,#stage:has(.placeholder) .energy-seam{visibility:hidden}
#stage[data-mode=waiting] > *,#stage[data-mode=intro] > *{visibility:hidden}
#stage[data-mode=intro] #flash,#stage[data-mode=intro] #slash{visibility:visible}
#broadcast{background:#000}

/* TV power-off and dedicated, isolated preview */
#crt-mask{display:none;position:absolute;inset:0;z-index:20;pointer-events:none;overflow:hidden}
.crt-off #crt-mask{display:block}
#crt-mask:before,#crt-mask:after{content:"";position:absolute;left:0;right:0;height:50.1%;background:#000;animation:crt-close .48s linear both}
#crt-mask:before{top:0;transform-origin:top}
#crt-mask:after{bottom:0;transform-origin:bottom}
#crt-mask i{position:absolute;z-index:1;top:50%;left:0;right:0;height:max(2px,.35cqw);background:#e6fbff;box-shadow:0 0 2cqw 1cqw #7ecbff;animation:crt-line .48s ease-in both}
@keyframes crt-close{0%{transform:scaleY(0)}44%,100%{transform:scaleY(1)}}
@keyframes crt-line{0%,34%{opacity:0;transform:scaleX(1)}44%{opacity:1;transform:scaleX(1)}65%{opacity:1;transform:scaleX(.025)}73%,100%{opacity:0;transform:scaleX(0)}}
@media(prefers-reduced-motion:reduce){.crt-off #crt-mask{background:#000}.crt-off #crt-mask>*{display:none}.crt-off #crt-mask:before,.crt-off #crt-mask:after{animation:none}}
.effect-settings{margin-top:16px;padding:12px;border:1px solid #393e44;border-radius:6px;max-width:520px}
.effect-settings summary{cursor:pointer;font-weight:700}.effect-settings label{display:block;margin:10px 0;font-size:13px}
.effect-settings select,.bracket-settings select{max-width:100%}
.effect-settings button,#view-bracket{margin:6px 0}
#view-bracket[aria-pressed=true]{border-color:#c7d2a5;color:#c7d2a5}
#effect-dialog{width:min(94vw,510px);padding:14px}
.effect-top{display:flex;justify-content:space-between;align-items:center}
#effect-frame{display:block;width:auto;height:min(65vh,720px);aspect-ratio:9/16;margin:auto;background:#000}
.bracket-settings{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:8px 12px;margin-top:16px;max-width:520px}
.bracket-settings h3{grid-column:1/-1;margin:0;font-size:14px}
#winner-controls{display:grid;gap:6px;margin-top:10px}
#winner-controls label{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;font-size:12px}

/* Broadcast brackets share the draw screen's dark palette and red / blue sides. */
#stage[hidden],#bracket-stage[hidden]{display:none}
#bracket-stage{
 position:relative;container-type:inline-size;width:min(100vw,56.25vh);height:100vh;
 flex-shrink:0;display:flex;flex-direction:column;overflow:hidden;color:#fff;
 padding:min(5vw,2.8vh);
 background:radial-gradient(ellipse at 0 52%,#2b0e18 0%,transparent 55%),
 radial-gradient(ellipse at 100% 67%,#0b2237 0%,transparent 55%),#090b11
}
#bracket-stage::before{
 content:"";position:absolute;inset:2%;border:1px solid #dbe8ff25;
 clip-path:polygon(0 0,12% 0,12% 1%,88% 1%,88% 0,100% 0,100% 100%,0 100%);
 pointer-events:none
}
.bracket-heading{display:block;padding:0 0 4cqw;border-bottom:1px solid #cad8f04d}
.bracket-heading span{font-size:3.6cqw;font-weight:800;color:#b8c5dc}
.bracket-heading h1{font-size:8cqw;line-height:1.05;margin:1.6cqw 0 0}
.bracket-block{display:flex;align-items:center;justify-content:space-between;gap:2cqw;margin:4cqw 0 0}
.bracket-block strong{font-size:6cqw;line-height:1}
.bracket-block span{font-size:3.5cqw;color:#c7d3e7;border:1px solid #536078;padding:1.2cqw 2.3cqw}
.bracket-fixtures{display:grid;align-content:center;gap:6cqw;flex:1;min-height:0}
.bracket-fixture{
 border:1px solid #8c9bb856;background:#0a0e18d9;
 box-shadow:0 12px 35px #0005;padding:2.5cqw
}
.bracket-fixture-title{display:flex;justify-content:space-between;align-items:center;padding:0 0 2cqw}
.bracket-fixture-title strong{font-size:4.3cqw}
.bracket-fixture-title span{color:#c7d3e7;font-size:3.2cqw}
.bracket-duel{display:grid;grid-template-columns:minmax(0,1fr) 6cqw minmax(0,1fr);align-items:center}
.bracket-duel.bye{grid-template-columns:minmax(0,.5fr);justify-content:center}
.bracket-vs{font-size:3.5cqw;font-weight:900;color:#d1d8e6;text-align:center}
.bracket-team{
 position:relative;min-width:0;height:55cqw;border:1px solid var(--team-accent);
 background:#151b27
}
.bracket-team.side-a{--team-accent:#b45568}
.bracket-team.side-b{--team-accent:#5688ba}
.bracket-team.won{border-color:#e7cb84;box-shadow:0 0 2cqw #e7cb8466}
.bracket-team.eliminated{opacity:.6}
.bracket-portraits{
 display:grid;grid-template-columns:27cqw;grid-template-rows:repeat(2,minmax(0,1fr));
 justify-content:center;gap:1px;height:100%;
 background:linear-gradient(135deg,color-mix(in srgb,var(--team-accent) 25%,#10141e),#0b0e17)
}
.bracket-unknown{height:100%;display:grid;place-items:center;color:#aebbd0;font-size:3.5cqw}
.bracket-winner{
 position:absolute;right:0;bottom:0;padding:.6cqw 1.5cqw;
 background:#e7cb84;color:#151016;font-size:2.8cqw;font-weight:900;pointer-events:none
}
.bracket-progress{display:flex;align-items:center;justify-content:center;gap:1.7cqw;padding:2cqw 0;color:#b9c7e0}
.bracket-progress i{width:5cqw;height:.6cqw;background:#3c4660}
.bracket-progress i.current{background:#d7e5ff}
.bracket-progress span{font-size:3cqw;margin-left:1cqw}
.bracket-settings>label{display:grid;gap:5px;font-size:12px}
.bracket-settings select{width:100%}

/* Two black panels open outward along the diagonal through the center. */
#diagonal-reveal{
 display:none;position:absolute;inset:0;width:100%;height:100%;
 z-index:21;pointer-events:none;overflow:hidden;
}
.special-reveal #diagonal-reveal{display:block}
.reveal-left,.reveal-right{fill:#000;transform-box:view-box}
.special-reveal .reveal-left{animation:diagonal-left 1.8s cubic-bezier(.45,0,.25,1) both}
.special-reveal .reveal-right{animation:diagonal-right 1.8s cubic-bezier(.45,0,.25,1) both}
@keyframes diagonal-left{to{transform:translateX(-100%)}}
@keyframes diagonal-right{to{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){.special-reveal #diagonal-reveal{display:none}}

#stage:not(.is-effect-test) #phase,
#stage:not(.is-effect-test) .stagefoot{display:none}

.tree-icon{
 display:block;min-width:0;width:100%;height:100%;padding:0;border:0;
 background:transparent;cursor:pointer;line-height:0
}
.tree-icon img{display:block;width:100%;height:100%;aspect-ratio:1;object-fit:cover}
.tree-icon:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.tree-tooltip{
 position:absolute;z-index:3;transform:translate(-50%,calc(-100% - 6px));
 max-width:calc(100% - 12px);padding:1.2cqw 2cqw;
 border-radius:3px;background:#090d18;color:#fff;border:1px solid #b9c7e0;pointer-events:none;
 font-size:3.3cqw;line-height:1.25;text-align:center;overflow-wrap:anywhere
}

#opening-art{
 display:none;position:absolute;inset:0;width:100%;height:100%;
 object-fit:cover;object-position:center;z-index:10
}
#stage[data-mode=waiting] #opening-art{display:block;visibility:visible}

/* Clickable tournament in the operator panel. */
.workspace>div{min-width:0}
.registration-shortfall{display:inline-block;margin-left:.45em;padding:.25em .55em;border:1px solid #697052;border-radius:4px;color:#d1dcb0;font-size:.72em;font-weight:600;white-space:nowrap}
#framing-dialog{max-width:730px}
#framing-dialog h2{margin:0}
.framing-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.framing-layout select{width:100%;margin:6px 0 10px}
.framing-preview{position:relative;isolation:isolate;container-type:inline-size;width:min(100%,260px);aspect-ratio:225/256;margin:auto;background:#000;overflow:hidden}
.framing-preview[data-layout=bottom]{aspect-ratio:225/244}
.framing-preview[data-layout=shuffle]{width:min(100%,185px);aspect-ratio:9/16}
.framing-preview>.teamcard{inset:0;width:100%;height:100%;transition:none}
.framing-preview[data-layout=shuffle]>.teamcard{clip-path:none}
.framing-preview[data-layout=shuffle] .tag{top:75%}
.framing-preview[data-layout=shuffle] .names{top:80%}
#framing-controls fieldset{min-width:0;margin:0 0 10px;border:1px solid #49515e}
#framing-controls legend{font-size:13px;overflow-wrap:anywhere}
#framing-controls label{display:grid;grid-template-columns:3.5em minmax(0,1fr);align-items:center;gap:7px;margin:6px 0}
#framing-controls .framing-zoom{grid-template-columns:3.5em minmax(0,1fr) 3em}
#framing-controls output{text-align:right;font-variant-numeric:tabular-nums}
#framing-controls input[type=range]{width:100%;margin:0;accent-color:#c7d2a5}
#framing-controls .framing-background{display:flex;align-items:center;gap:8px;margin:6px 0;font-size:12px}
#framing-controls .framing-background label{display:block;margin:0}
#framing-controls input[type=color]{width:30px;height:24px;padding:0;margin:0;cursor:pointer}
#framing-controls [data-auto-background]{padding:3px 7px;font-size:11px}
#framing-controls [data-auto-background][aria-pressed=true]{border-color:#c7d2a5;color:#c7d2a5}
@media(max-width:500px){.framing-layout{grid-template-columns:1fr}.framing-preview{width:min(100%,150px)}.framing-preview[data-layout=shuffle]{width:min(100%,120px)}}
.registration-icon{display:inline-flex;flex:none;border-radius:4px}
.registration-icon:is(:hover,:focus-visible){outline:2px solid #c7d2a5;outline-offset:2px}
.pending-registration{margin-top:20px}
.pending-registration summary{cursor:pointer;padding:10px 0;color:#d1dcb0;font-weight:700}
#pending-partner-control[hidden]{display:none}
.admin-bracket{padding:25px 5%;border-top:1px solid #333}
.admin-bracket h2{margin:0;font-size:22px}
.tournament-link{display:inline-block;margin:8px 0;color:#c7d2a5;text-underline-offset:4px}
.winner-block{color:#c7d2a5}
.winner-scroll{overflow:auto;border:1px solid #3b4555;background:#10151f;padding:16px}
.winner-tree{display:flex;gap:var(--column-gap);position:relative}
.winner-tree>svg{position:absolute;top:42px;left:0;width:100%;height:calc(100% - 42px);fill:none;stroke:#56657d;stroke-width:1.5;pointer-events:none}
.winner-tree .resolved{stroke:#d9c792;stroke-width:2.4}
.winner-column{flex:0 0 var(--column-width);position:relative;z-index:1}
.winner-column h4{height:42px;margin:0;color:#dce6f7;font-size:13px}
.winner-grid{display:grid;grid-template-rows:repeat(var(--tree-rows),var(--row-height))}
.winner-match{display:flex;align-items:center;min-height:0}
.winner-match>div{width:100%;background:#111827;border:1px solid #53627c;border-radius:5px;padding:8px}
.winner-match small{letter-spacing:0;font-size:11px;display:block;margin-bottom:5px}
.winner-team{display:flex;align-items:center;gap:7px;width:100%;padding:6px;background:#202a3b;border:1px solid #49566c;text-align:left;min-height:48px}
.winner-team+.winner-team{margin-top:5px}
.winner-team:not(:disabled):hover{border-color:#fff;background:#2e3c50}
.winner-team.picked{border-color:#e8cb84;background:#3b3320;color:#fff5d6}
.winner-team:disabled{opacity:.6;cursor:default}
.winner-team.picked:disabled{opacity:1}
.winner-photos{display:flex;flex:none;gap:2px;width:86px}
.winner-photos img{width:42px;height:42px;object-fit:cover}
.winner-photos .visual-empty{font-size:10px}
.winner-copy{font-size:10px;overflow-wrap:anywhere}
.winner-label{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.winner-copy b{display:block;color:#f4d88e;font-size:11px}
/* The broadcast tree grows sideways and leaves the lower third for live comments. */
#bracket-stage .bracket-heading{padding-bottom:3cqw}
#bracket-stage .bracket-block{margin-top:3cqw;margin-bottom:5cqw}
.broadcast-tree{overflow:visible;padding:2cqw;border:1px solid #3b4555;background:#10151fcc}
.broadcast-tree .winner-tree{width:100%!important;gap:6cqw}
.broadcast-tree .winner-column{flex:1 1 0;min-width:0}
.broadcast-tree .winner-column h4{height:7cqw;font-size:3.2cqw}
.broadcast-tree .winner-grid{grid-template-rows:repeat(var(--tree-rows),42cqw)}
.broadcast-tree .winner-tree>svg{top:7cqw;height:calc(100% - 7cqw);stroke-width:1.5}
.broadcast-tree .winner-match>div{padding:1cqw;border-radius:3px}
.broadcast-tree .winner-match small{font-size:2.7cqw;margin:0 0 .8cqw}
.broadcast-tree .winner-team{padding:.3cqw;min-height:0;gap:0}
.broadcast-tree .winner-team+.winner-team{margin-top:1cqw}
.broadcast-tree .winner-photos{width:100%;display:flex;justify-content:center;gap:1px;height:15.5cqw}
.broadcast-tree .winner-photos .tree-icon{width:50%;height:100%;max-width:18cqw}
.broadcast-tree .winner-copy{display:none}
.broadcast-tree .winner-photos .visual-empty{font-size:2.7cqw;margin:auto;padding:0;text-align:center}
.broadcast-tree .winner-team[disabled]{opacity:1}
.broadcast-tree .winner-team.picked{border-color:#e8cb84;background:#3b3320}
#bracket-stage .bracket-progress{justify-content:flex-end;padding:2cqw 0;margin:0}
.broadcast-tree .winner-column:last-child .winner-match:last-child .winner-team:has(.visual-empty){opacity:.7}
.broadcast-tree .winner-photos img{display:block;width:100%;height:100%;object-fit:cover}

/* Four-team blocks leave the lower third free for comments. */
#bracket-stage .bracket-heading{padding-bottom:2cqw}
#bracket-stage .bracket-heading h1{font-size:6.5cqw;margin-top:1cqw}
#bracket-stage .bracket-block{margin-top:2cqw;margin-bottom:3cqw}
#bracket-stage .bracket-block strong{font-size:5cqw}
.broadcast-tree .winner-tree{gap:4cqw}
.broadcast-tree .winner-grid{grid-template-rows:repeat(var(--tree-rows),40cqw)}
.broadcast-tree .winner-column h4{height:5cqw;font-size:3cqw}
.broadcast-tree .winner-tree>svg{top:5cqw;height:calc(100% - 5cqw)}
.broadcast-tree .winner-team{gap:.8cqw}
.broadcast-tree .winner-photos{flex:0 0 54%;width:54%;height:14cqw;align-items:center}
.broadcast-tree .winner-photos .tree-icon{height:auto;aspect-ratio:1;width:50%;max-width:14cqw}
.broadcast-tree .winner-copy{display:block;font-size:2.8cqw;line-height:1.2;min-width:0}
.broadcast-tree .winner-copy b{display:none}
.broadcast-tree .winner-team:not(:has(.tree-icon)) .winner-copy{display:none}
.broadcast-tree .winner-match>div{padding:.4cqw}
.broadcast-tree .winner-match small{font-size:2.6cqw;margin-bottom:.2cqw}
.broadcast-tree .winner-team+.winner-team{margin-top:.4cqw}