/* The live broadcast page: full-bleed server-rendered picture with the timing tower, camera controls,
   driver card and map floating over it, F1-broadcast style. Builds on race.css. */
body.ui-live #app { grid-template-rows: var(--hdr) 1fr; }
body.ui-live main { grid-template-columns: minmax(0, 1fr); }
body.ui-live #stage { background: #000; }
body.ui-live #stagevid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
body.ui-live .vign { background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 78%, rgba(0,0,0,.4) 100%); }

/* the tower floats top-left over the picture */
body.ui-live #tower { position: absolute; left: 14px; top: 14px; width: var(--tower); max-height: calc(100% - 28px);
  display: flex; flex-direction: column; border-radius: 5px; overflow: hidden; border: 1px solid rgba(255,255,255,.08);
  background: rgba(8, 11, 16, .84); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
body.ui-live #rows { flex: 0 0 auto; }
body.ui-live .trow, body.ui-live .trow:nth-child(even) { background: transparent; }
body.ui-live .trow:hover { background: rgba(255,255,255,.06); }
body.ui-live .trow.sel { background: rgba(255,255,255,.1); }
body.ui-live .towerfoot { background: transparent; }

/* camera controls top-right */
body.ui-live .stagetop { left: auto; right: 14px; top: 14px; width: auto; flex-direction: column; align-items: flex-end; gap: 8px; }
body.ui-live .viewbtns button { background: rgba(8, 11, 16, .84); backdrop-filter: blur(8px); }
body.ui-live .viewbtns button.on { background: var(--fg); }
body.ui-live .following { background: rgba(8, 11, 16, .84); padding: 5px 9px; border-radius: 3px; backdrop-filter: blur(8px); }
.camchip { position: absolute; right: 14px; top: 84px; display: flex; align-items: center; gap: 8px; padding: 5px 10px 5px 7px;
  border-radius: 3px; background: rgba(8, 11, 16, .84); font-size: 10px; letter-spacing: .16em; font-weight: 700; color: var(--fg);
  backdrop-filter: blur(8px); }
.camchip[hidden] { display: none; }
.camchip i { width: 5px; align-self: stretch; border-radius: 2px; background: var(--hot); }
.camchip.busy i { background: var(--red); }

/* driver card bottom-left, map bottom-right */
body.ui-live .fcard { position: absolute; left: 14px; bottom: 14px; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center;
  gap: 14px; padding: 8px 14px 8px 12px; border-left: 4px solid var(--hot); border-radius: 4px; min-width: 330px;
  background: rgba(8, 11, 16, .84); backdrop-filter: blur(8px); }
body.ui-live .fcard .fno { font-family: var(--num); font-size: 30px; font-weight: 700; line-height: 1; }
body.ui-live .fcard .fname { font-size: 16px; font-weight: 900; letter-spacing: .02em; text-transform: uppercase; line-height: 1.1; }
body.ui-live .fcard .fteam { font-size: 10px; letter-spacing: .14em; color: var(--dim); text-transform: uppercase; margin-top: 2px; }
body.ui-live .fcard .ftel { display: flex; align-items: baseline; gap: 5px; font-family: var(--num); }
body.ui-live .fcard .ftel b { font-size: 26px; font-weight: 500; }
body.ui-live .fcard .ftel span { font-size: 9px; letter-spacing: .16em; color: var(--dim); }
body.ui-live .fcard .fpos { display: flex; align-items: baseline; gap: 6px; }
body.ui-live .fcard .fpos span { font-size: 9px; letter-spacing: .16em; color: var(--dim); }
body.ui-live .fcard .fpos b { font-family: var(--num); font-size: 22px; font-weight: 700; color: var(--hot); }
body.ui-live #mapbox { background: rgba(8, 11, 16, .84); backdrop-filter: blur(8px); border-radius: 5px; right: 14px; bottom: 14px; }

/* the click-to-start gate (mobile autoplay) and the feed quality chip */
.gate { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; background: rgba(0,0,0,.66); z-index: 5; }
.gate[hidden] { display: none; }
.gate button { font: 900 20px/1 var(--ui); letter-spacing: .12em; padding: 16px 30px; border-radius: 4px; border: 0; background: var(--hot); color: #10131a; cursor: pointer; }
.gate span { font-size: 11px; letter-spacing: .2em; color: var(--dim); text-transform: uppercase; text-align: center; }
.feedq { font-family: var(--num); font-size: 10.5px; color: var(--dim); letter-spacing: .04em; white-space: nowrap; }
.feedq.bad { color: var(--red); }

@media (max-width: 900px) {
  body.ui-live { --tower: 232px; }
  body.ui-live .session .tbar, body.ui-live .session .sn { display: none; }
  body.ui-live .towerhead .c-last, body.ui-live .towerhead .c-best, body.ui-live .trow .c-last, body.ui-live .trow .c-best { display: none; }
  body.ui-live .towerhead, body.ui-live .trow { grid-template-columns: 20px 3px 24px 1fr 56px; }
  body.ui-live .fcard { min-width: 0; gap: 10px; padding: 6px 10px; }
  body.ui-live #mapbox { display: none; }
  body.ui-live .viewbtns button { padding: 6px 7px; }
}

/* FLY1 wordmark in the header */
body.ui-live .brand { gap: 14px; }
body.ui-live .brand .logo { height: 34px; width: auto; display: block; font-family: var(--ui); }