:root{font-family:Arial,Helvetica,sans-serif;color-scheme:dark;--gold:#ffad38;--goldlight:#ffdb8f;--white:#f8fbff;--navy:#06121e}
*{box-sizing:border-box}html,body{height:100%;width:100%;margin:0;overflow:hidden;background:transparent!important}body{color:var(--white)}.stage{height:100%;width:100%;overflow:hidden;position:relative;background:transparent!important}.brand{font-weight:950;letter-spacing:.035em;white-space:nowrap}.brand span,.highlight-x{color:var(--gold)}.brand small{font-size:.40em;vertical-align:middle;letter-spacing:.17em;color:#d2dfec;margin-left:.75em;font-weight:600}.on-air-dot{width:9px;height:9px;display:inline-block;flex:none;border-radius:50%;background:#ffbc61;box-shadow:0 0 0 4px #ffa73723,0 0 20px #ffab43;animation:pulse 2.5s infinite}
/* All three boards remain mounted; opacity + transform provide broadcast-safe transitions. */
.standby-board,.battle-board,.winner-board{position:absolute;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .38s ease,transform .44s cubic-bezier(.18,.77,.2,1),visibility 0s linear .44s;filter:drop-shadow(0 14px 22px #000a)}
.stage--standby .standby-board,.stage--battle .battle-board,.stage--winner .battle-board{opacity:1;visibility:visible;transition-delay:0s}
.stage.is-leaving .battle-board,.stage.is-leaving .winner-board{opacity:0;transform:translateY(44px);transition:opacity .24s ease,transform .24s ease}
.standby-board{left:3.3%;bottom:5%;height:97px;min-width:560px;max-width:66%;display:flex;align-items:center;gap:0;border:1px solid #ffffff21;border-radius:10px;overflow:hidden;background:linear-gradient(109deg,#0c2236ef,#071725ed 88%);transform:translateY(30px)}
.stage--standby .standby-board{transform:translateY(0)}.standby-gold{width:7px;align-self:stretch;background:var(--gold);box-shadow:0 0 18px #ffae5a70}.standby-logo{height:74px;width:84px;margin:10px 12px;display:none;align-items:center;justify-content:center}.standby-logo.has-image{display:flex}.standby-logo img{max-width:100%;max-height:100%;object-fit:contain}.standby-body{padding:0 22px;min-width:0;flex:1}.standby-body .brand{font-size:clamp(19px,1.8vw,32px);line-height:1.08}.standby-event{font-size:clamp(12px,1vw,18px);max-width:100%;margin-top:8px;color:#c4d5e4;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.standby-next{align-self:stretch;min-width:143px;display:flex;justify-content:center;align-items:center;gap:11px;padding:10px 17px;font-size:13px;letter-spacing:.12em;font-weight:900;background:#081928ad;border-left:1px solid #ffffff1b;color:var(--goldlight)}
.battle-board{left:3.3%;right:3.3%;bottom:5%;height:auto;min-height:204px;transform:translateY(55px);border-radius:12px;overflow:hidden;background:#0a1b2ad9;border:1px solid #ffffff24}.stage--battle .battle-board,.stage--winner .battle-board{transform:translateY(0)}
.battle-header{height:49px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-top:5px solid var(--gold);background:linear-gradient(90deg,#061321f5,#193b50eb);gap:20px}.battle-brand{display:flex;align-items:center;gap:25px;min-width:0}.battle-brand .brand{font-size:clamp(17px,1.55vw,31px)}.live-pill{display:flex;align-items:center;gap:9px;font-weight:850;letter-spacing:.15em;font-size:clamp(11px,.73vw,16px);color:#e5f0fb}.battle-event{font-size:clamp(12px,.9vw,18px);font-weight:700;max-width:45%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#d1dfeb}
.battle-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(76px,6vw,115px) minmax(0,1fr);height:clamp(140px,12vw,220px)}.driver{display:flex;align-items:center;min-width:0;position:relative;gap:clamp(12px,1.3vw,24px);padding:10px clamp(14px,1.65vw,35px);background:linear-gradient(104deg,#153248fa,#0b2032f5)}.driver--chase{justify-content:flex-end;background:linear-gradient(268deg,#153248fa,#0b2032f5)}.driver:before{position:absolute;content:"";top:0;bottom:0;width:3px;background:linear-gradient(transparent,var(--gold),transparent);opacity:.8}.driver--lead:before{left:0}.driver--chase:before{right:0}
.portrait,.winner-portrait{flex:0 0 auto;position:relative;background:#25394b;border:2px solid #ffb750;border-radius:7px;overflow:hidden}.portrait{width:clamp(90px,9vw,173px);height:clamp(115px,10.6vw,205px)}.portrait img,.winner-portrait img{display:none;height:100%;width:100%;object-fit:cover;object-position:center 23%}.driver-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}.driver-copy--right{text-align:right}.driver-role{font-size:clamp(12px,1.05vw,22px);font-weight:900;letter-spacing:.18em;color:var(--gold)}.driver-name{font-size:clamp(19px,2.12vw,44px);font-weight:950;line-height:1.08;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.driver-note{font-size:clamp(10px,.85vw,17px);color:#b7cddd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.driver-number{flex:0 0 auto;align-self:center;font-size:clamp(32px,3.15vw,66px);font-weight:1000;letter-spacing:-.04em;color:#fff}.battle-versus{display:flex;align-items:center;justify-content:center;color:#0a1520;font-size:clamp(31px,2.5vw,54px);font-weight:1000;letter-spacing:-.09em;background:linear-gradient(155deg,#ffd58a,#ffa92c)}.battle-versus span{transform:rotate(-7deg)}.battle-bottom{height:25px;background:#081724ee;display:flex;align-items:center;justify-content:space-between;padding:0 19px;border-top:1px solid #ffffff1d;font-size:clamp(10px,.72vw,15px);font-weight:800;letter-spacing:.14em;color:#8ba5bc}
.stage--battle:not(.is-leaving) .driver--lead{animation:lead-arrive .7s cubic-bezier(.13,.82,.19,1) both}.stage--battle:not(.is-leaving) .driver--chase{animation:chase-arrive .7s cubic-bezier(.13,.82,.19,1) both}.stage--battle.is-swapping .driver--lead{animation:lead-swap-out .26s ease-in forwards}.stage--battle.is-swapping .driver--chase{animation:chase-swap-out .26s ease-in forwards}.stage--battle.swap-in .driver--lead{animation:lead-arrive .65s cubic-bezier(.15,.89,.24,1) both}.stage--battle.swap-in .driver--chase{animation:chase-arrive .65s cubic-bezier(.15,.89,.24,1) both}
.winner-board{left:16%;right:16%;bottom:8%;transform:translateY(60px) scale(.96)}.stage--winner .winner-board{transform:translateY(0) scale(1)}.winner-frame{position:relative;overflow:hidden;background:linear-gradient(110deg,#061726fa,#0a283afb 60%,#082032f9);border:2px solid #eebd59;border-radius:16px;box-shadow:0 0 36px #fbb6482f,0 15px 50px #0008}.winner-frame:before{position:absolute;content:"";width:180px;height:145%;transform:rotate(27deg);top:-20%;left:-35%;background:linear-gradient(90deg,transparent,#fff5c129,transparent);animation:goldSweep 1.15s ease-out .12s both}.winner-top{height:43px;background:linear-gradient(95deg,#ffc35c,#ffdf9c);display:flex;justify-content:space-between;align-items:center;gap:20px;padding:0 23px;color:#0f2737;font-size:clamp(12px,.86vw,18px);font-weight:900;letter-spacing:.11em}.winner-top span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:65%;text-align:right}.winner-contents{display:flex;align-items:center;gap:28px;min-height:260px;padding:23px 36px}.winner-portrait{height:clamp(155px,13vw,248px);width:clamp(132px,11vw,218px);border-width:3px;border-color:#ffd084;box-shadow:0 0 20px #ffb64b33}.winner-text{flex:1;min-width:0}.winner-title{color:var(--gold);letter-spacing:.20em;font-size:clamp(22px,2.2vw,46px);font-weight:1000;text-shadow:0 0 18px #ffac4459;margin-bottom:14px}.winner-star{font-size:.65em}.winner-name{font-weight:1000;font-size:clamp(25px,3.05vw,62px);line-height:1.05;text-wrap:balance;max-width:100%;overflow-wrap:anywhere}.winner-subline{color:#bbd3e6;margin-top:14px;font-size:clamp(11px,1vw,21px);font-weight:600}.winner-no{font-size:clamp(54px,6vw,125px);font-weight:1000;color:var(--goldlight);line-height:1;letter-spacing:-.07em;white-space:nowrap}.winner-footer{height:35px;border-top:1px solid #ffffff28;background:#081623eb;display:flex;justify-content:space-between;align-items:center;padding:0 24px;font-size:12px;letter-spacing:.14em;font-weight:900;color:#aac4d8}.stage--winner:not(.is-leaving) .winner-portrait{animation:winnerPop .8s cubic-bezier(.11,.89,.22,1) both}.stage--winner:not(.is-leaving) .winner-title{animation:winnerTitle .85s cubic-bezier(.1,.7,.2,1) both}
@keyframes lead-arrive{from{opacity:0;transform:translateX(-55px)}to{opacity:1;transform:translateX(0)}}@keyframes chase-arrive{from{opacity:0;transform:translateX(55px)}to{opacity:1;transform:translateX(0)}}@keyframes lead-swap-out{to{opacity:0;transform:translateX(135px)}}@keyframes chase-swap-out{to{opacity:0;transform:translateX(-135px)}}@keyframes winnerPop{0%{opacity:0;transform:scale(.76)}65%{transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}@keyframes winnerTitle{from{opacity:0;letter-spacing:.35em;transform:translateY(15px)}to{opacity:1;letter-spacing:.20em;transform:translateY(0)}}@keyframes goldSweep{0%{left:-36%}100%{left:135%}}@keyframes pulse{0%,100%{opacity:.95}50%{opacity:.46}}
@media(max-width:900px){.standby-board{min-width:0;width:75%;max-width:none;height:72px}.standby-body{padding:0 11px}.standby-body .brand{font-size:18px}.standby-next{font-size:9px;min-width:90px}.standby-logo{height:55px;width:55px;margin:7px}.battle-header{height:35px}.battle-grid{grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr);height:105px}.driver{padding:6px;gap:5px}.portrait{height:90px;width:62px}.driver-name{font-size:13px}.driver-role{font-size:9px;letter-spacing:.03em}.driver-number{font-size:20px}.driver-note{font-size:8px}.battle-brand .brand{font-size:16px}.live-pill{font-size:8px}.battle-event{font-size:9px}.battle-versus{font-size:24px}.battle-bottom{height:20px;font-size:7px}.winner-board{left:6%;right:6%}.winner-contents{gap:11px;min-height:130px;padding:10px}.winner-portrait{height:100px;width:80px}.winner-title{font-size:17px}.winner-name{font-size:17px}.winner-no{font-size:27px}.winner-subline{font-size:9px}.winner-top{font-size:9px;height:25px}.winner-footer{height:22px;font-size:8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
/* One card for Battle and Winner */

.driver-number-wrap {
  position: static;
  flex: 0 0 auto;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.driver-number-wrap .driver-number {
  align-self: auto;
}

/* Gold Winner Ribbon */

.winner-badge {
  position: absolute;
  top: 10px;
  right: 0;
  left: auto;
  transform: none;

  padding: 8px 17px 8px 26px;

  background: linear-gradient(
    110deg,
    #ffe3a3 0%,
    #ffbd54 45%,
    #ed941f 100%
  );

  color: #081724;
  font-size: clamp(11px, .95vw, 18px);
  font-weight: 950;
  letter-spacing: .14em;
  line-height: 1.2;
  white-space: nowrap;

  clip-path: polygon(
    12px 0,
    100% 0,
    100% 100%,
    12px 100%,
    0 50%
  );

  opacity: 0;
  visibility: hidden;
  z-index: 3;
}

/* Place the ribbon on the Chase side */

#chaseCard .winner-badge {
  right: auto;
  left: 0;

  padding: 8px 26px 8px 17px;

  clip-path: polygon(
    0 0,
    calc(100% - 12px) 0,
    100% 50%,
    calc(100% - 12px) 100%,
    0 100%
  );
}

/* Show WINNER only for the selected competitor */

.stage--winner.winner-lead #leadCard .winner-badge,
.stage--winner.winner-chase #chaseCard .winner-badge {
  opacity: 1;
  visibility: visible;
  animation: winnerRibbonIn .6s ease-out both;
}

@keyframes winnerRibbonIn {
  0% {
    opacity: 0;
    transform: translateY(-12px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Highlight winning side */

.stage--winner.winner-lead #leadCard,
.stage--winner.winner-chase #chaseCard {
  box-shadow: inset 0 0 0 2px var(--gold);
}

/* Dim losing side */

.stage--winner.winner-lead #chaseCard,
.stage--winner.winner-chase #leadCard {
  opacity: .40;
  filter: grayscale(.65);
}

/* Change VS to RESULT without changing column width */

.stage--winner .battle-versus {
  font-size: clamp(12px, 1vw, 20px);
  letter-spacing: .04em;
}

.stage--winner .battle-versus span {
  transform: none;
}

/* Solo competitor support in Battle and Winner modes */

.stage--battle.solo-lead .battle-grid,
.stage--battle.solo-chase .battle-grid,
.stage--winner.solo-lead .battle-grid,
.stage--winner.solo-chase .battle-grid {
  grid-template-columns: minmax(0, 1fr);
}

.stage--battle.solo-lead #chaseCard,
.stage--battle.solo-chase #leadCard,
.stage--winner.solo-lead #chaseCard,
.stage--winner.solo-chase #leadCard,
.stage--battle.solo-lead .battle-versus,
.stage--battle.solo-chase .battle-versus,
.stage--winner.solo-lead .battle-versus,
.stage--winner.solo-chase .battle-versus {
  display: none;
}

/* Drift Tandem - 5-Minute Rule Used */

.driver-copy .five-minute-rule-used {
  align-self: flex-start;
  max-width: 100%;
  display: inline-flex;

  border: 1px solid #ff4545;
border-radius: 4px;

background: #2b1820;
color: #ff4545;

  font-size: clamp(9px, .7vw, 13px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .045em;

  padding: 3px 8px;
  white-space: nowrap;
}

/* Chase: align to the right */

.driver-copy--right .five-minute-rule-used {
  align-self: flex-end;
}

/* Hide when the competitor has not used the rule */

.driver-copy .five-minute-rule-used[hidden] {
  display: none !important;
}

/* Keep the display fully transparent when no graphics are published */
.stage--standby .standby-board {
  display: none !important;
}