:root{--red:#ef3340;--green:#35d07f;--white:#f7f9fb;--muted:#9aa7b5;--ink:#080c11;--panel:rgba(10,15,21,.96);--display:"Barlow Condensed",sans-serif;--body:Inter,sans-serif}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:transparent;font-family:var(--body)}body.preview-mode{background:radial-gradient(circle at 50% 30%,#26394c,#101820 55%,#05080b)}body.preview-mode:before{content:"BROADCAST PREVIEW · TRANSPARENT IN OBS / VMIX";position:absolute;top:35px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.28);font:700 18px var(--body);letter-spacing:.18em}.broadcast-stage{position:relative;width:100vw;height:100vh;color:var(--white)}.lower-third{position:absolute;left:4.2vw;right:4.2vw;bottom:5.2vh;filter:drop-shadow(0 18px 28px rgba(0,0,0,.48));transform-origin:center bottom;animation:lower-in .7s cubic-bezier(.2,.85,.2,1) both}@keyframes lower-in{from{opacity:0;transform:translateY(70px)}to{opacity:1;transform:translateY(0)}}.event-ribbon{height:82px;display:grid;grid-template-columns:285px minmax(0,1fr) auto 125px;align-items:center;background:linear-gradient(90deg,rgba(7,11,16,.98),rgba(17,25,34,.97));border-bottom:3px solid var(--red);clip-path:polygon(0 0,98.8% 0,100% 100%,0 100%)}.broadcast-brand{align-self:stretch;display:flex;align-items:center;gap:14px;padding:9px 24px;background:linear-gradient(110deg,#05080c,#18232e)}.broadcast-brand img{width:88px;height:60px;object-fit:contain}.broadcast-brand span{display:flex;flex-direction:column}.broadcast-brand strong{font:800 25px/1 var(--display);letter-spacing:.03em}.broadcast-brand small{margin-top:5px;color:var(--red);font-size:9px;font-weight:800;letter-spacing:.18em}.event-identity{min-width:0;padding:0 26px}.event-identity small{display:block;color:var(--red);font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.event-identity h1{overflow:hidden;margin:5px 0 0;font:700 31px/1 var(--display);text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase}.broadcast-meta{text-align:right;padding:0 25px}.broadcast-meta span{display:block;color:#d3dae1;font-size:11px;font-weight:700;letter-spacing:.08em}.broadcast-meta time{display:block;margin-top:7px;color:var(--muted);font-size:10px}.on-air{height:100%;display:flex;align-items:center;justify-content:center;gap:9px;background:var(--red);font-size:11px;font-weight:800;letter-spacing:.12em}.on-air i{width:9px;height:9px;border-radius:50%;background:white;box-shadow:0 0 12px white}.broadcast-stage[data-state=online] .on-air i{animation:pulse 1.5s infinite}.broadcast-stage[data-state=offline] .on-air{background:#687482}@keyframes pulse{50%{opacity:.3}}.result-bar{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:130px;background:var(--panel);border-bottom:1px solid rgba(255,255,255,.13)}.broadcast-lane{position:relative;display:grid;grid-template-columns:65px minmax(190px,1fr) 115px 135px 115px;align-items:center;min-width:0;padding-right:20px;overflow:hidden}.broadcast-lane+.broadcast-lane{padding-right:0;padding-left:20px;border-left:1px solid rgba(255,255,255,.14)}.broadcast-lane:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.04),transparent);transform:translateX(-110%)}.result-change .broadcast-lane:after{animation:sweep .9s .2s ease-out}@keyframes sweep{to{transform:translateX(110%)}}.lane-marker{align-self:stretch;display:grid;place-items:center;background:rgba(255,255,255,.055);border-left:6px solid #526170}.lane-marker span{font:800 13px var(--body);letter-spacing:.14em;transform:rotate(-90deg)}.broadcast-lane.right .lane-marker{order:5;border-left:0;border-right:6px solid #526170}.racer{min-width:0;padding:0 22px}.broadcast-lane.right .racer{text-align:right}.racer strong{display:block;overflow:hidden;font:700 clamp(25px,2vw,39px)/1 var(--display);text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase}.racer span{display:block;margin-top:7px;color:var(--muted);font-size:10px;font-weight:600;text-transform:uppercase}.broadcast-metric{padding:11px 13px;border-left:1px solid rgba(255,255,255,.1);text-align:center}.broadcast-lane.right .broadcast-metric{border-left:0;border-right:1px solid rgba(255,255,255,.1)}.broadcast-metric small{display:block;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.1em}.broadcast-metric b{display:block;margin-top:8px;font:700 clamp(24px,1.8vw,35px)/1 var(--display)}.winner-mark{position:absolute;right:13px;top:0;padding:5px 12px;background:var(--green);color:#06120c;font-size:9px;font-weight:900;letter-spacing:.12em;opacity:0;transform:translateY(-100%);transition:.35s}.broadcast-lane.right .winner-mark{right:auto;left:13px}.broadcast-lane.winner{background:linear-gradient(90deg,rgba(53,208,127,.14),transparent 68%)}.broadcast-lane.right.winner{background:linear-gradient(270deg,rgba(53,208,127,.14),transparent 68%)}.broadcast-lane.winner .lane-marker{border-color:var(--green)}.broadcast-lane.winner .winner-mark{opacity:1;transform:translateY(0)}.versus{position:absolute;z-index:3;left:50%;top:50%;display:grid;place-items:center;width:50px;height:50px;border:3px solid var(--red);border-radius:50%;background:#090e14;transform:translate(-50%,-50%)}.versus span{font:800 17px var(--display)}.next-ribbon{height:39px;display:flex;align-items:center;gap:20px;padding:0 20px;background:linear-gradient(90deg,var(--red),#a51724 32%,#121a23 32%);font-size:10px;font-weight:700;letter-spacing:.07em}.next-ribbon strong{width:130px;font-size:11px;letter-spacing:.14em}.next-ribbon span{max-width:29%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.next-ribbon i{width:4px;height:4px;border-radius:50%;background:var(--red)}.next-ribbon em{margin-left:auto;color:var(--muted);font-style:normal}.hide-next .next-ribbon{display:none!important}.compact-mode .lower-third{left:10vw;right:10vw}.compact-mode .event-ribbon{height:65px;grid-template-columns:230px 1fr auto 105px}.compact-mode .result-bar{min-height:105px}.compact-mode .broadcast-brand img{width:68px;height:48px}.compact-mode .broadcast-brand strong{font-size:21px}.compact-mode .broadcast-lane{grid-template-columns:50px minmax(150px,1fr) 90px 110px 90px}.compact-mode .racer strong{font-size:28px}@media(max-aspect-ratio:4/3){.lower-third{left:2.5vw;right:2.5vw}.event-ribbon{grid-template-columns:230px minmax(0,1fr) 110px}.on-air{display:none}.broadcast-lane{grid-template-columns:50px minmax(120px,1fr) 85px 100px}.speed{display:none}.broadcast-lane.right .lane-marker{order:4}.broadcast-brand strong{font-size:21px}.event-identity h1{font-size:25px}}

@media(max-width:1400px){.event-ribbon{grid-template-columns:285px minmax(0,1fr) 220px 125px}.broadcast-lane{grid-template-columns:52px minmax(120px,1fr) 92px 105px;padding-right:10px}.broadcast-lane+.broadcast-lane{padding-left:10px}.broadcast-lane .speed{display:none}.broadcast-lane.right .lane-marker{order:4}.broadcast-lane.right .racer{text-align:left}.racer{padding:0 15px}.racer strong{font-size:24px}.broadcast-metric{padding:9px}.broadcast-metric b{font-size:26px}.next-ribbon span{max-width:24%}}

/* Mirror the right lane without placing its racer in the narrow marker column. */
.broadcast-lane.right{grid-template-columns:115px 135px 115px minmax(190px,1fr) 65px}.broadcast-lane.right .reaction{order:1}.broadcast-lane.right .elapsed{order:2}.broadcast-lane.right .speed{order:3}.broadcast-lane.right .racer{order:4;text-align:right}.broadcast-lane.right .lane-marker{order:5}.compact-mode .broadcast-lane.right{grid-template-columns:90px 110px 90px minmax(150px,1fr) 50px}
@media(max-width:1400px){.broadcast-lane.right{grid-template-columns:92px 105px minmax(120px,1fr) 52px}.broadcast-lane.right .reaction{order:1}.broadcast-lane.right .elapsed{order:2}.broadcast-lane.right .racer{order:3;text-align:right}.broadcast-lane.right .lane-marker{order:4}}
@media(max-aspect-ratio:4/3){.broadcast-lane.right{grid-template-columns:85px 100px minmax(120px,1fr) 50px}.broadcast-lane.right .racer{order:3}.broadcast-lane.right .lane-marker{order:4}}

/* Reserve a real center column for VS so it never covers either reaction time. */
.result-bar{grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr)}.versus{position:relative;left:auto;top:auto;place-self:center;transform:none}.broadcast-lane.right{grid-column:3}
@media(max-width:1400px){.result-bar{grid-template-columns:minmax(0,1fr) 58px minmax(0,1fr)}.versus{width:46px;height:46px}}