/* Crimson broadcast overlay — fixed 1920×1080 canvas (Figma Frame 13 / 14) */



*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }



:root {

  --canvas-w: 1920px;

  --canvas-h: 1080px;

  --crimson: #D71D25;

  --ink: #010000;

  --shift-x: 0px;

  --bar-lift-y: -1px;

  /* Player photo: bleed above frame; clip window ends at name-plate top */
  --photo-clip-top-bleed: 120px;
  --photo-clip-side-bleed: 30%;
  --photo-visible-height: calc(936px - 742px + 100px);

}



html {

  width: var(--canvas-w);

  height: var(--canvas-h);

  min-width: var(--canvas-w);

  max-width: var(--canvas-w);

  min-height: var(--canvas-h);

  max-height: var(--canvas-h);

  overflow: hidden;

}



body.overlay-canvas-1080p {

  width: var(--canvas-w);

  height: var(--canvas-h);

  min-width: var(--canvas-w);

  max-width: var(--canvas-w);

  min-height: var(--canvas-h);

  max-height: var(--canvas-h);

  overflow: hidden;

  background: transparent;

  font-family: 'Inter', sans-serif;

  position: relative;

}



/* Site brand — top center (same row as auction identity chip) */

.overlay-site-brand {

  position: absolute;

  top: 40px;

  left: 50%;

  transform: translateX(-50%);

  z-index: 101;

  pointer-events: none;

  user-select: none;

}



.overlay-site-brand-logo {

  height: 72px;

  width: auto;

  max-width: min(520px, 42vw);

  display: block;

  object-fit: contain;

  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));

}



.wrap {

  position: absolute;

  left: 0;

  top: 0;

  width: var(--canvas-w);

  height: var(--canvas-h);

  overflow: hidden;

}



.grad-text {

  background: linear-gradient(184.1deg, #fff 29.16%, rgba(255, 255, 255, 0.8) 75.88%);

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;

}



.grad-text-muted {

  background: linear-gradient(184.1deg, #fff 29.16%, rgba(255, 255, 255, 0.65) 75.88%);

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;

}



/* ── Live bar root (full canvas coordinate space) ── */

#liveBar {

  position: absolute;

  left: 0;

  top: 0;

  width: var(--canvas-w);

  height: var(--canvas-h);

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1);

  z-index: 100;

}



#liveBar.bar-visible { opacity: 1; pointer-events: auto; }



/* ── Player bar enter / exit (new lot transitions) ── */

#liveBar.bar-enter .fig-layer {

  animation: lb2BarLayerIn 0.72s cubic-bezier(0.16, 1, 0.3, 1) backwards;

}



#liveBar.bar-enter .fig-photo-wrap {

  animation: lb2PhotoIn 0.85s cubic-bezier(0.16, 1, 0.3, 1) backwards;

}



#liveBar.bar-exit {

  opacity: 0;

  transition: opacity 0.52s cubic-bezier(0.4, 0, 0.2, 1);

}



#liveBar.bar-exit .fig-layer {

  transition: left 0.52s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s ease, transform 0.52s ease;

  opacity: 0;

  transform: translateY(14px);

}



@keyframes lb2BarLayerIn {

  from {

    opacity: 0;

    transform: translateY(22px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



@keyframes lb2PhotoIn {

  from {

    opacity: 0;

    transform: scale(0.92) translateY(16px);

  }

  to {

    opacity: 1;

    transform: scale(1) translateY(0);

  }

}



.fig-layer {

  position: absolute;

  transition:

    left 0.62s cubic-bezier(0.16, 1, 0.3, 1),

    opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),

    transform 0.62s cubic-bezier(0.16, 1, 0.3, 1);

}



#liveBar.mode-sold { --shift-x: -271px; }

#liveBar.mode-bid-team { --shift-x: -271px; }



/* Bid panel — smooth amount updates */

#currentBidStat.bid-updated .panel-amt {

  animation: lb2BidAmtPulse 0.55s cubic-bezier(0.16, 1, 0.3, 1);

}



#basePriceStat.price-reveal .panel-amt {

  animation: lb2PriceReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1);

}



@keyframes lb2BidAmtPulse {

  0%   { transform: scale(1); filter: brightness(1); }

  35%  { transform: scale(1.06); filter: brightness(1.35); }

  100% { transform: scale(1); filter: brightness(1); }

}



@keyframes lb2PriceReveal {

  from { opacity: 0; transform: translateY(6px) scale(0.94); }

  to   { opacity: 1; transform: translateY(0) scale(1); }

}



/* Photo backdrop (307×224) — Figma left:807 top:790 */

.fig-photo-bg {

  left: calc(807px + var(--shift-x));

  top: calc(790px + var(--bar-lift-y));

  width: 307px;

  height: 224px;

  pointer-events: none;

  z-index: 1;

}



.fig-photo-bg-art {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: fill;

  display: block;

  pointer-events: none;

}



/* Player photo (203×177) — Figma left:856 top:774 */

.fig-photo-wrap {

  left: calc(828px + var(--shift-x));

  top: calc(742px + var(--bar-lift-y));

  width: 258px;

  height: 224px;

  z-index: 4;

}



#badgeRing {

  position: relative;

  z-index: 1;

  width: 258px;

  height: 300px;

  overflow: hidden;

  border-radius: 4px;

  margin-top: -60px;

}



.player-photo-clip {

  width: 100%;

  height: 100%;

  overflow: hidden;

  position: relative;

}



#badgeRing.has-transparent-photo {

  background: transparent;

  height: auto;

  overflow: visible;

  z-index: 4;

  -webkit-clip-path: inset(
    calc(-1 * var(--photo-clip-top-bleed))
    calc(-1 * var(--photo-clip-side-bleed))
    0
    calc(-1 * var(--photo-clip-side-bleed))
  );

  clip-path: inset(
    calc(-1 * var(--photo-clip-top-bleed))
    calc(-1 * var(--photo-clip-side-bleed))
    0
    calc(-1 * var(--photo-clip-side-bleed))
  );

}



#badgeRing.has-transparent-photo .player-photo-clip {

  width: calc(100% + (2 * var(--photo-clip-side-bleed)));

  max-width: none;

  margin-left: calc(-1 * var(--photo-clip-side-bleed));

  height: var(--photo-visible-height);

  overflow: hidden;

  isolation: isolate;

}



#playerImage {

  width: 100%;

  height: 100%;

  object-fit: contain;

  object-position: center 32%;

  display: block;

  transform: scale(1.0) translateY(3%);

  transform-origin: center bottom;

  opacity: 1;

  transition: opacity 0.18s ease-out;

}



#playerImage.photo-loading {

  opacity: 0;

}



#playerImage.photo-ready {

  opacity: 1;

}



#badgeRing.has-transparent-photo #playerImage {

  object-fit: contain;

  object-position: center top;

  transform: scale(1.2) translateY(-18%);

  transform-origin: center top;

  will-change: transform;

}



/* Name plate — Figma left:838.7 top:936 241×55.5 */

.fig-name-plate {

  left: calc(838.7px + var(--shift-x));

  top: calc(936px + var(--bar-lift-y));

  width: 241px;

  height: 55.5px;

  z-index: 8;

  isolation: isolate;

}



.name-plate-frame {

  position: absolute;

  left: -1.5px;

  top: -1px;

  width: 244px;

  height: 58px;

  background: var(--crimson);

  clip-path: polygon(8% 0, 92% 0, 100% 55%, 50% 100%, 0 55%);

  z-index: 0;

}



.name-plate-bg {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: fill;

  z-index: 1;

  pointer-events: none;

}



.name-plate-content {

  position: relative;

  z-index: 3;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  height: 100%;

  padding: 2px 8px;

}



.corner-img,

.corner-line {

  position: absolute;

  pointer-events: none;

  z-index: 2;

}



.corner-bl { left: -26px; bottom: 0; width: 26px; height: 36px; }

.corner-br { right: -26px; bottom: 0; width: 26px; height: 36px; }

.corner-ll { left: -26px; bottom: -2px; width: 26.5px; height: 2px; }

.corner-lr { right: -26px; bottom: -2px; width: 26.5px; height: 2px; transform: scaleX(-1); }



.name-chevrons {

  position: absolute;

  top: 31px;

  display: flex;

  gap: 1.8px;

  z-index: 2;

  pointer-events: none;

}



.name-chevrons img {

  width: 4px;

  height: 9px;

  display: block;

}



.name-chevrons-l { left: 26px; }

.name-chevrons-r { right: 26px; transform: scaleX(-1); }



#playerFirstName {

  font-family: 'Oswald', sans-serif;

  font-size: 18px;

  font-weight: 400;

  line-height: 1.1;

  letter-spacing: 0.02em;

  text-transform: uppercase;

}



#playerDisplayName {

  font-family: 'Oswald', sans-serif;

  font-size: 30px;

  font-weight: 700;

  line-height: 1.05;

  letter-spacing: 0.01em;

  text-transform: uppercase;

}



#playerName {

  position: absolute;

  width: 1px;

  height: 1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

}



#playerRole {

  position: absolute;

  width: 1px;

  height: 1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

}



/* Side panels */

.fig-panel {

  position: absolute;

  z-index: 3;

  height: 73px;

  overflow: visible;

}



.panel-shape {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: fill;

  pointer-events: none;

  z-index: 0;

}



.panel-wing {

  position: absolute;

  top: -8px;

  width: 232px;

  height: 88px;

  object-fit: fill;

  pointer-events: none;

  z-index: -1;

}



.panel-wing-l {

  left: -15px;

}



.panel-wing-r {

  right: -15px;

}



.fig-panel::before {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 1;
  opacity: 0.42;
  transform: rotateY(180deg);
}

/* Base price — left panel: dark near wing, crimson toward center */
.fig-panel-base::before {
  inset: 2px 14px 2px 8px;
  background: linear-gradient(92deg, var(--ink) 8%, var(--crimson) 96%);
  clip-path: polygon(20% 0, 100% 0, 84% 100%, 0 100%);
}

/* Current bid — right panel: mirrored fill toward center */
.fig-panel-bid::before {
  inset: 2px 8px 2px 14px;
  background: linear-gradient(268deg, var(--ink) 8%, var(--crimson) 96%);
  clip-path: polygon(0 0, 80% 0, 100% 100%, 16% 100%);
}



/* Base price — left */

.fig-panel-base {

  left: calc(601px + var(--shift-x));

  top: calc(904px + var(--bar-lift-y));

  width: 206px;

}



.fig-panel-bid {

  left: calc(1110.65px + var(--shift-x));

  top: calc(904.48px + var(--bar-lift-y));

  width: 206.5px;

}



.panel-divider {

  position: relative;

  width: 151px;

  height: 2px;

  object-fit: fill;

  pointer-events: none;

  flex-shrink: 0;

  margin: 3px 0 0;

}



.panel-divider-flip {

  transform: rotate(180deg);

}



.panel-inner {

  position: absolute;

  inset: 0;

  z-index: 2;

  height: 73px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  padding: 4px 10px;

  gap: 0;

}



.panel-tag {

  font-family: 'Oswald', sans-serif;

  font-size: 20px;

  font-weight: 400;

  line-height: 1.2;

  text-transform: uppercase;

}



.panel-amt {

  font-family: 'Inter', sans-serif;

  font-size: 32px;

  font-weight: 700;

  line-height: 1.1;

  display: inline-flex;

  align-items: baseline;

  gap: 5px;

  margin-top: 6px;

}



.panel-amt-currency {

  flex-shrink: 0;

}



#basePriceStat.price-hidden .panel-amt,

#currentBidStat.bid-hidden .panel-amt { visibility: hidden; }



/* Stats rail — Figma left:566 top:1005 788×44 */

.fig-stats-rail {

  left: calc(566px + var(--shift-x));

  top: calc(1005px + var(--bar-lift-y));

  width: 788px;

  height: 44px;

  z-index: 2;

}



.stats-rail-frame {

  position: absolute;

  left: -2px;

  top: -1px;

  width: 791.5px;

  height: 46px;

  background: var(--crimson);

  clip-path: polygon(1.4% 0, 98.6% 0, 100% 58%, 50% 100%, 0 58%);

  z-index: 0;

}



.stats-rail-bg {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: fill;

  z-index: 1;

  pointer-events: none;

}



.stats-rail-inner {

  position: relative;

  z-index: 2;

  height: 44px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0 22px;

  gap: 16px;

  width: 100%;

}



.stats-rail-main {

  flex: 1 1 auto;

  display: flex;

  align-items: center;

  justify-content: space-evenly;

  min-width: 0;

  gap: 0;

}



.stat-group {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  min-width: 0;

  flex: 1 1 0;

}



.stat-group.is-empty { display: none; }

.stat-divider.is-hidden { display: none; }

.stat-group-brand {

  flex: 0 0 auto;

  margin-left: 0;

}



.stat-icon {

  width: 19px;

  height: 19px;

  flex-shrink: 0;

  object-fit: contain;

  display: block;

}



.fig-stats-rail .grad-text-muted {

  font-family: 'Oswald', sans-serif;

  font-size: 17px;

  font-weight: 400;

  line-height: 1.2;

  text-transform: uppercase;

  white-space: nowrap;

}



.stat-divider {

  width: 1px;

  height: 35px;

  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 50%, rgba(255, 255, 255, 0) 100%);

  transform: rotate(-159deg);

  flex-shrink: 0;

  flex: 0 0 auto;

}



/* Effects layer — full 1920×1080 */

#effectsLayer {

  position: absolute;

  left: 0;

  top: 0;

  width: var(--canvas-w);

  height: var(--canvas-h);

  pointer-events: none;

  z-index: 200;

}



#fireworksCanvas {

  position: absolute;

  left: 0;

  top: 0;

  width: 1920px;

  height: 1080px;

  z-index: 250;

  pointer-events: none;

  opacity: 0;

  transition: opacity 0.3s ease;

}



#fireworksCanvas.fw-active { opacity: 1; }



#identityCard {

  position: absolute;

  left: 40px;

  top: 40px;

  transform: translateX(-16px);

  opacity: 0;

  display: flex;

  align-items: center;

  gap: 14px;

  background: rgba(1, 0, 0, 0.72);

  border: 1px solid var(--crimson);

  border-radius: 999px;

  padding: 8px 18px;

  pointer-events: none;

  transition: opacity 0.4s ease, transform 0.4s ease;

  z-index: 101;

  max-width: none;

  margin: 0;

  box-shadow: none;

}



#identityCard.card-visible {

  opacity: 1;

  transform: translateX(0);

}



.auction-identity {

  display: flex;

  align-items: center;

  gap: 10px;

}



#auctionLogo {

  width: 28px;

  height: 28px;

  border-radius: 6px;

  object-fit: contain;

  display: none;

}



.auction-name {

  font-size: 15px;

  font-weight: 700;

  color: #fff;

  white-space: nowrap;

}



#teamPurses { display: none; }



/* ── Player intro: full-screen 50/50 split before bottom bar ── */

/* Player intro — index.html spotlight slide + crimson panel blend */

.player-intro {

  position: absolute;

  inset: 0;

  z-index: 60;

  display: none;

  align-items: stretch;

  width: 100%;

  height: 100%;

  pointer-events: none;

  transform: translateY(100%);

  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);

}



#liveBar.player-intro-active .player-intro {

  display: flex;

}



#liveBar.player-intro-active .fig-layer {

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

}



.player-intro-half {

  height: 100%;

  min-width: 0;

  overflow: hidden;

}



.player-intro-photo-wrap {

  position: relative;

  width: 55%;

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  background: var(--ink);

  overflow: hidden;

}



/* Blurred cover fill behind contain photo (fills letterbox gaps) */

.player-intro-photo-bg {

  position: absolute;

  inset: -8%;

  z-index: 0;

  width: 116%;

  height: 116%;

  object-fit: cover;

  object-position: center center;

  display: block;

  filter: blur(32px) saturate(1.15) brightness(0.72);

  transform: scale(1.06);

  opacity: 0;

  transition: opacity 0.35s ease-out;

  pointer-events: none;

}



.player-intro-photo-bg.photo-ready {

  opacity: 1;

}



/* index.html: photo fades into right panel color */

.player-intro-photo-wrap::after {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 2;

  pointer-events: none;

  background: linear-gradient(to right, transparent 55%, var(--ink) 100%);

}



#playerIntroImage {

  position: relative;

  z-index: 1;

  width: 100%;

  height: 100%;

  object-fit: contain;

  object-position: center center;

  display: block;

  opacity: 0;

  transform: scale(1.08);

  transition: opacity 0.35s ease-out, transform 3s ease-out;

}



#playerIntroImage.photo-ready {

  opacity: 1;

}



#liveBar.player-intro-enter #playerIntroImage.photo-ready {

  transform: scale(1);

}



.player-intro-details-wrap {

  position: relative;

  width: 45%;

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: flex-start;

  padding: 7vw 6vw 7vw 4vw;

  background: linear-gradient(90.81deg, var(--ink) 0.65%, var(--crimson) 99.3%);

}



.player-intro-details {

  position: relative;

  z-index: 1;

  width: 100%;

  min-width: 0;

  display: flex;

  flex-direction: column;

  gap: clamp(24px, 3vh, 48px);

}



.player-intro-first {

  font-family: 'Oswald', sans-serif;

  font-size: clamp(38px, 3.2vw, 52px);

  font-weight: 400;

  line-height: 1.1;

  letter-spacing: 0.04em;

  text-transform: uppercase;

  opacity: 0;

  transform: translateY(20px);

  transition: opacity 0.4s ease, transform 0.4s ease;

}



.player-intro-name {

  font-family: 'Oswald', sans-serif;

  font-size: clamp(68px, 7.2vw, 120px);

  font-weight: 700;

  line-height: 1.05;

  letter-spacing: 0.02em;

  text-transform: uppercase;

  overflow-wrap: anywhere;

  word-break: break-word;

  opacity: 0;

  transform: translateY(28px);

  transition: opacity 0.5s ease, transform 0.5s ease;

}



.player-intro-role {

  font-family: 'Inter', sans-serif;

  font-size: clamp(30px, 2.6vw, 40px);

  font-weight: 600;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  opacity: 0;

  transform: translateY(20px);

  transition: opacity 0.4s ease, transform 0.4s ease;

}



.player-intro-price {

  display: flex;

  flex-direction: column;

  gap: 6px;

  margin-top: 8px;

  opacity: 0;

  transform: translateY(20px);

  transition: opacity 0.4s ease, transform 0.4s ease;

}



.player-intro-price.is-empty {

  display: none;

}



.player-intro-price-label {

  font-size: clamp(18px, 1.6vw, 26px);

  font-weight: 700;

  letter-spacing: 0.16em;

  text-transform: uppercase;

}



.player-intro-price-amt {

  font-family: 'Inter', sans-serif;

  font-size: clamp(56px, 5.2vw, 84px);

  font-weight: 700;

  line-height: 1.1;

}



.player-intro-price-amt::before {

  content: '₹';

  margin-right: 4px;

}



.player-intro-stats {

  font-size: clamp(22px, 1.9vw, 30px);

  font-weight: 600;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  line-height: 1.45;

  overflow-wrap: anywhere;

  opacity: 0;

  transform: translateY(20px);

  transition: opacity 0.4s ease, transform 0.4s ease;

}



/* index.html spotlight: slide up in, slide up out */

#liveBar.player-intro-enter .player-intro {

  transform: translateY(0);

}



#liveBar.player-intro-exit .player-intro {

  transform: translateY(-100%);

  transition: transform 0.55s cubic-bezier(0.7, 0, 0.84, 0);

}



#liveBar.player-intro-enter .player-intro-first {

  opacity: 1;

  transform: none;

  transition-delay: 0.4s;

}



#liveBar.player-intro-enter .player-intro-name {

  opacity: 1;

  transform: none;

  transition-delay: 0.5s;

}



#liveBar.player-intro-enter .player-intro-role {

  opacity: 1;

  transform: none;

  transition-delay: 0.6s;

}



#liveBar.player-intro-enter .player-intro-price {

  opacity: 1;

  transform: none;

  transition-delay: 0.65s;

}



#liveBar.player-intro-enter .player-intro-stats {

  opacity: 1;

  transform: none;

  transition-delay: 0.7s;

}