.broadcast-header {
  position: absolute;
  left: var(--header-x);
  top: var(--header-y);
  width: var(--header-width);
  height: var(--header-height);
  display: grid;
  grid-template-columns: 214px 170px minmax(238px,1fr) 162px 128px;
  align-items: stretch;
  border: 2px solid var(--border-medium);
  border-radius: var(--radius-large);
  background: linear-gradient(180deg, rgba(16,29,63,.96), rgba(6,12,29,.96));
  box-shadow: var(--shadow-cyan), inset 0 1px 0 rgba(255,255,255,.05);
  overflow: hidden;
}
.broadcast-header::before {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(39,230,255,.9), rgba(101,92,255,.9), transparent);
}
.broadcast-header > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 18px 16px;
  border-right: 1px solid rgba(150,217,255,.15);
}
.broadcast-header > div:last-child { border-right: 0; }
.header-logo-zone { padding: 18px 20px !important; }
.header-logo { width: 176px; height: auto; }
.header-kicker, .status-label {
  color: var(--color-muted);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.header-value {
  color: var(--color-white);
  font-size: 27px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}
.header-value-wide { font-size: 29px; letter-spacing: .03em; }
.header-live-zone { flex-direction: row !important; gap: 12px !important; }
.live-dot {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--color-red);
  box-shadow: 0 0 14px rgba(255,79,92,.78);
  animation: live-breathe 2s ease-in-out infinite;
}
@keyframes live-breathe { 0%,100% { opacity:.72; } 50% { opacity:1; } }
.host-camera-frame {
  display: none !important;
  position: absolute;
  left: var(--camera-x);
  top: var(--camera-y);
  width: var(--camera-size);
  height: var(--camera-size);
  border: 3px solid rgba(39,230,255,.84);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(8,18,41,.98), rgba(2,6,17,.98));
  box-shadow: var(--shadow-cyan), inset 0 0 30px rgba(39,230,255,.05);
  overflow: hidden;
}
.host-camera-frame::before {
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 50% 30%, rgba(39,230,255,.11), transparent 55%);
}
.camera-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px;
  color: var(--color-muted);
  font-size: 17px;
  font-weight: 850;
  letter-spacing: .08em;
  line-height: 1.2;
  text-align: center;
}
.camera-icon { width: 54px; height: 54px; fill: none; stroke: var(--color-cyan); stroke-width: 3; opacity:.86; }
.camera-corner { position:absolute; width:22px; height:22px; z-index:2; }
.camera-corner-tl { left:10px; top:10px; border-left:3px solid var(--color-cyan); border-top:3px solid var(--color-cyan); }
.camera-corner-tr { right:10px; top:10px; border-right:3px solid var(--color-cyan); border-top:3px solid var(--color-cyan); }
.camera-corner-bl { left:10px; bottom:10px; border-left:3px solid var(--color-cyan); border-bottom:3px solid var(--color-cyan); }
.camera-corner-br { right:10px; bottom:10px; border-right:3px solid var(--color-cyan); border-bottom:3px solid var(--color-cyan); }
.host-support-panel {
  position: absolute;
  left: var(--support-x);
  top: var(--support-y);
  width: var(--support-width);
  height: var(--support-height);
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px 34px;
  border: 2px solid var(--border-medium);
  border-radius: var(--radius-large);
  background: linear-gradient(100deg, rgba(8,17,39,.97), rgba(13,26,57,.94));
  box-shadow: var(--shadow-cyan), inset 0 1px 0 rgba(255,255,255,.04);
  overflow: hidden;
}
.support-accent {
  width: 7px;
  height: 106px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--color-cyan), var(--color-blue));
  box-shadow: 0 0 20px rgba(39,230,255,.42);
}
.support-copy { min-width: 0; flex: 1; }
.support-heading { color: var(--color-cyan); font-size: 24px; font-weight: 850; letter-spacing:.11em; text-transform:uppercase; }
.support-message {
  margin-top: 10px;
  width: 100%;
  max-width: 100%;
  color: var(--color-white);
  font-size: 38px;
  font-weight: 900;
  line-height: 1.08;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  overflow: hidden;
  text-overflow: unset;
}
.status-rail {
  position:absolute;
  left:var(--rail-x);
  top:var(--rail-y);
  width:var(--rail-width);
  height:var(--rail-height);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:2px solid var(--border-medium);
  border-radius:var(--radius-large);
  background:linear-gradient(180deg, rgba(13,26,56,.95), rgba(5,11,27,.97));
  box-shadow:var(--shadow-cyan), inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
}
.status-cell {
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:18px 14px;
  border-right:1px solid rgba(150,217,255,.14);
}
.status-cell:last-child { border-right:0; }
.status-value { display:block; width:100%; min-width:0; color:var(--color-white); font-size:29px; font-weight:900; line-height:1; text-align:center; white-space:nowrap; overflow:hidden; }

.header-live-zone {
  flex-direction: column !important;
  gap: 7px !important;
}
.header-live-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.header-live-label {
  color: var(--color-white);
  font-size: 23px;
  font-weight: 900;
  line-height: 1;
}
.header-timer {
  color: var(--color-gold);
  font-size: 32px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: -0.03em;
  text-shadow: 0 0 18px rgba(255, 212, 91, 0.22);
}
.header-timer[hidden] { display: none; }

/* Constrain long category labels to their dedicated header cell so the text-fit engine can measure them accurately. */
.header-category-zone {
  overflow: hidden;
}

.header-category-zone .header-value {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}


/* v2.0.17 — logo-only top header to avoid duplicating the bottom status rail */
.broadcast-header-logo-only {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 28px;
}

.broadcast-header-logo-only::before {
  left: 36px;
  right: 36px;
}

.broadcast-header-logo-only > div {
  border-right: 0;
  padding: 0;
}

.header-brand-shell {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
}

.header-brand-shell::before {
  content: "";
  position: absolute;
  inset: 14px 18px;
  border-radius: 22px;
  background: radial-gradient(circle at 50% 35%, rgba(39,230,255,.12), transparent 58%);
  pointer-events: none;
}

.header-logo-hero {
  position: relative;
  display: block;
  width: 94%;
  height: 82%;
  max-width: 900px;
  max-height: 116px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 0 24px rgba(39,230,255,.18));
}

.header-meta-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* v2.2.1 — keep the wide header wordmark centered and fully contained at every phase. */
.broadcast-header-logo-only .header-brand-shell {
  overflow: hidden;
}


/* v2.5.0 — shared animated countdown ring for every timed broadcast game. */
.status-countdown-display{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
}
.status-countdown-ring{
  display:none;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  transform:rotate(-90deg);
  filter:drop-shadow(0 0 9px rgba(69,255,151,.28));
}
.status-countdown-track,
.status-countdown-progress,
.status-countdown-orbit{
  fill:none;
  vector-effect:non-scaling-stroke;
}
.status-countdown-track{
  stroke:rgba(121,255,185,.13);
  stroke-width:7;
}
.status-countdown-progress{
  stroke:#53f99d;
  stroke-width:7;
  stroke-linecap:round;
  stroke-dasharray:100;
  stroke-dashoffset:0;
  transition:stroke .18s linear,filter .18s linear;
  filter:drop-shadow(0 0 5px rgba(83,249,157,.68));
}
.status-countdown-orbit{
  stroke:#9dffca;
  stroke-width:3;
  stroke-linecap:round;
  stroke-dasharray:10 90;
  transform-origin:50% 50%;
  animation:status-countdown-orbit 2.8s linear infinite;
  opacity:.88;
}
.status-cell.is-countdown{
  gap:4px;
  padding:8px 10px;
}
.status-cell.is-countdown .status-label{
  font-size:17px;
}
.status-cell.is-countdown .status-countdown-display{
  width:82px;
  height:82px;
  flex:0 0 82px;
  border-radius:50%;
}
.status-cell.is-countdown .status-countdown-ring{
  display:block;
}
.status-cell.is-countdown .status-countdown-value{
  position:relative;
  z-index:2;
  display:block;
  width:62px;
  color:#effff5;
  font-size:27px;
  font-weight:950;
  letter-spacing:-.04em;
  text-shadow:0 0 12px rgba(83,249,157,.44);
}
.status-countdown-display.countdown-warning .status-countdown-progress{
  stroke:#ffd857;
  filter:drop-shadow(0 0 7px rgba(255,216,87,.78));
}
.status-countdown-display.countdown-warning .status-countdown-orbit{
  stroke:#ffe58a;
  animation-duration:1.05s;
}
.status-countdown-display.countdown-warning .status-countdown-value{
  color:#fff3bd;
  text-shadow:0 0 13px rgba(255,216,87,.58);
}
.status-countdown-display.countdown-critical,
.status-countdown-display.countdown-complete{
  animation:status-countdown-critical-pulse .52s ease-in-out infinite;
}
.status-countdown-display.countdown-critical .status-countdown-progress,
.status-countdown-display.countdown-complete .status-countdown-progress{
  stroke:#ff5368;
  filter:drop-shadow(0 0 9px rgba(255,83,104,.86));
}
.status-countdown-display.countdown-critical .status-countdown-orbit{
  stroke:#ff8796;
  animation-duration:.58s;
}
.status-countdown-display.countdown-complete .status-countdown-orbit{
  display:none;
}
.status-countdown-display.countdown-critical .status-countdown-value,
.status-countdown-display.countdown-complete .status-countdown-value{
  color:#fff0f2;
  text-shadow:0 0 16px rgba(255,83,104,.76);
}
@keyframes status-countdown-orbit{
  to{transform:rotate(360deg)}
}
@keyframes status-countdown-critical-pulse{
  0%,100%{transform:scale(1);filter:brightness(1)}
  50%{transform:scale(1.08);filter:brightness(1.28)}
}
@media (prefers-reduced-motion:reduce){
  .status-countdown-orbit,
  .status-countdown-display.countdown-critical,
  .status-countdown-display.countdown-complete{
    animation:none!important;
  }
}
.reduce-particles .status-countdown-orbit{
  animation:none!important;
  opacity:.55;
}


/* v2.5.2 — modest timer-size increase for phone readability. */
.status-cell.is-countdown .status-countdown-display{
  width:90px;
  height:90px;
  flex-basis:90px;
}
.status-cell.is-countdown .status-countdown-value{
  width:68px;
  font-size:30px;
}


/* v2.5.4 — explicit Web Audio recovery after hard refresh or OBS source reload. */
.audio-unlock-overlay{
  position:absolute;
  inset:0;
  z-index:990;
  display:grid;
  place-items:center;
  background:rgba(2,7,20,.72);
  backdrop-filter:blur(10px);
}
.audio-unlock-overlay[hidden]{display:none!important}
.audio-unlock-card{
  width:760px;
  padding:44px 52px;
  border:2px solid rgba(255,208,82,.72);
  border-radius:30px;
  background:linear-gradient(145deg,rgba(19,29,61,.98),rgba(5,10,26,.99));
  box-shadow:0 34px 90px rgba(0,0,0,.52),0 0 42px rgba(255,197,67,.16);
  text-align:center;
}
.audio-unlock-kicker{font-size:23px;font-weight:900;letter-spacing:.18em;color:#ffe18a}
.audio-unlock-title{margin-top:10px;font-size:58px;font-weight:950;letter-spacing:.035em;color:#fff4c9}
.audio-unlock-copy{margin:18px auto 26px;max-width:620px;font-size:27px;line-height:1.25;color:#f5f8ff}
.audio-unlock-button{
  min-width:520px;
  min-height:78px;
  padding:18px 30px;
  border:0;
  border-radius:18px;
  background:linear-gradient(135deg,#63f5aa,#4ddcff);
  color:#031621;
  font:950 27px/1.1 inherit;
  letter-spacing:.055em;
  cursor:pointer;
  box-shadow:0 16px 40px rgba(79,226,214,.28);
}
.audio-unlock-button:focus-visible{outline:5px solid #fff;outline-offset:6px}
.audio-unlock-button:disabled{opacity:.55;cursor:wait}
.audio-unlock-help{margin-top:20px;font-size:19px;line-height:1.35;color:rgba(255,255,255,.68)}


/* v3.1.12 — remove host-camera placeholder and use the entire support row. */
.host-camera-frame { display:none !important; }
.host-support-panel { left:var(--scene-x) !important; width:var(--scene-width) !important; }
.support-copy { min-width:0; width:100%; flex:1 1 auto; }
.support-message { min-height:42px; max-height:84px; white-space:normal; overflow-wrap:anywhere; }