@inventure71/paddockjs 0.1.0

package/src/styles.css

@@ -0,0 +1,1818 @@
+@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@85,500;100,700;110,900&family=IBM+Plex+Mono:wght@500;600;700&display=swap');
+
+.f1-sim-component {
+  color-scheme: dark;
+  --surface: #08090b;
+  --surface-raised: #111318;
+  --surface-panel: #171a20;
+  --line: rgba(255, 255, 255, 0.13);
+  --line-strong: rgba(255, 255, 255, 0.28);
+  --text: #f4f7fb;
+  --muted: #8d97a7;
+  --red: var(--paddock-accent-color, #e10600);
+  --green: var(--paddock-green-color, #14c784);
+  --yellow: var(--paddock-yellow-color, #ffd166);
+  --blue: #39a7ff;
+  --track: #262a31;
+  --track-edge: #f4f7fb;
+  --font-display: 'Archivo', sans-serif;
+  --font-mono: 'IBM Plex Mono', monospace;
+  --timing-columns: 1.9rem 2.1rem minmax(4.6rem, 1fr) 4.55rem 1.6rem;
+  --paddock-entry-count: 10;
+  --timing-board-max-width: var(--paddock-timing-tower-max-width, 390px);
+  --timing-board-min-height: calc(10.8rem + (var(--paddock-entry-count) * 2.25rem));
+  margin: 0;
+  min-height: 100%;
+  background: var(--surface);
+  color: var(--text);
+  font-family: var(--font-display);
+}
+
+.f1-sim-component,
+.f1-sim-component * {
+  box-sizing: border-box;
+}
+
+.f1-sim-component [hidden] {
+  display: none !important;
+}
+
+.f1-sim-component button,
+.f1-sim-component a {
+  font: inherit;
+}
+
+.sim-shell {
+  min-height: 100svh;
+  padding: clamp(0.85rem, 2vw, 1.4rem);
+  background: #000;
+}
+
+.sim-workspace {
+  min-height: calc(100svh - clamp(1.7rem, 4vw, 2.8rem));
+  display: flex;
+  flex-direction: column;
+  gap: 0.9rem;
+}
+
+.sim-topbar {
+  position: relative;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 1rem;
+  min-height: 72px;
+  border-bottom: 2px solid rgba(225, 6, 0, 0.76);
+  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.24);
+}
+
+.sim-backlink,
+.sim-control {
+  border: 1px solid var(--line-strong);
+  color: var(--text);
+  background: rgba(255, 255, 255, 0.05);
+  text-decoration: none;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-size: 0.76rem;
+  font-weight: 800;
+  padding: 0.75rem 0.9rem;
+  cursor: pointer;
+}
+
+.sim-backlink:hover,
+.sim-control:hover {
+  border-color: var(--text);
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.sim-control--safety.is-active {
+  color: #0a0b0d;
+  background: var(--yellow);
+  border-color: var(--yellow);
+}
+
+.camera-controls button.is-active {
+  color: #08090b;
+  background: var(--text);
+  border-color: var(--text);
+}
+
+.sim-title-block {
+  min-width: 0;
+}
+
+.sim-kicker {
+  margin: 0 0 0.2rem;
+  color: var(--red);
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+}
+
+.f1-sim-component h1 {
+  margin: 0;
+  font-size: clamp(1.8rem, 4vw, 4.6rem);
+  line-height: 0.88;
+  text-transform: uppercase;
+  letter-spacing: 0;
+}
+
+.sim-controls {
+  display: flex;
+  gap: 0.6rem;
+  justify-content: flex-end;
+}
+
+.sim-external-camera-controls {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.sim-grid {
+  flex: 1;
+  min-height: 0;
+  position: relative;
+  display: grid;
+  grid-template-columns: minmax(255px, 0.78fr) minmax(500px, 3fr) minmax(270px, 0.9fr);
+  gap: 0.9rem;
+}
+
+.sim-shell--left-tower-overlay .sim-grid,
+.sim-shell--left-tower-overlay.sim-grid {
+  --timing-board-width: max(255px, calc((100cqw - 1.8rem) * 0.78 / 4.68));
+  --race-data-safe-left: calc(2rem + var(--timing-board-width));
+  --race-data-right-gutter: 1rem;
+  --race-data-available-width: calc(100% - var(--race-data-safe-left) - var(--race-data-right-gutter));
+  container-type: inline-size;
+  position: relative;
+  grid-template-columns: minmax(620px, 1fr) minmax(270px, 0.9fr);
+}
+
+.sim-shell--left-tower-overlay .sim-canvas-panel {
+  grid-column: 1;
+}
+
+.sim-canvas-panel--with-timing-tower {
+  --timing-board-width: min(var(--timing-board-max-width), max(255px, calc((100cqw - 1.8rem) * 0.78 / 4.68)));
+  --race-data-safe-left: calc(2rem + var(--timing-board-width));
+  --race-data-right-gutter: 1rem;
+  --race-data-available-width: calc(100% - var(--race-data-safe-left) - var(--race-data-right-gutter));
+  container-type: inline-size;
+}
+
+.sim-shell--left-tower-overlay.sim-shell--timing-expand-race-view .sim-canvas-panel {
+  min-height: max(var(--paddock-race-view-min-height, 620px), var(--timing-board-min-height));
+}
+
+.sim-canvas-panel--with-timing-tower.sim-canvas-panel--timing-expand-race-view {
+  min-height: max(var(--paddock-race-view-min-height, 620px), var(--timing-board-min-height));
+}
+
+.sim-shell--left-tower-overlay .sim-timing {
+  position: absolute;
+  z-index: 5;
+  top: 1rem;
+  bottom: 1rem;
+  left: 1rem;
+  width: var(--timing-board-width);
+  min-height: 0;
+  background: transparent;
+  border: 0;
+  border-radius: 1.25rem;
+  clip-path: inset(0 round 1.25rem);
+  pointer-events: auto;
+}
+
+.sim-canvas-panel--with-timing-tower > .sim-timing {
+  position: absolute;
+  z-index: 5;
+  top: 1rem;
+  bottom: 1rem;
+  left: 1rem;
+  width: var(--timing-board-width);
+  max-width: var(--timing-board-width);
+  min-height: 0;
+  background: transparent;
+  border: 0;
+  border-radius: 1.25rem;
+  clip-path: inset(0 round 1.25rem);
+  pointer-events: auto;
+}
+
+.sim-shell--left-tower-overlay.sim-shell--timing-scroll .sim-timing {
+  overflow: hidden;
+}
+
+.sim-canvas-panel--timing-scroll .sim-timing {
+  overflow: hidden;
+}
+
+.sim-shell--left-tower-overlay .sim-canvas-panel > .camera-controls {
+  left: calc(2rem + var(--timing-board-width));
+  max-width: calc(100% - (2rem + var(--timing-board-width)) - 1rem);
+}
+
+.sim-canvas-panel--with-timing-tower > .camera-controls {
+  left: calc(2rem + var(--timing-board-width));
+  max-width: calc(100% - (2rem + var(--timing-board-width)) - 1rem);
+}
+
+.sim-shell--left-tower-overlay .start-lights {
+  left: calc((2rem + var(--timing-board-width)) + (100% - (2rem + var(--timing-board-width))) / 2);
+}
+
+.sim-canvas-panel--with-timing-tower > .start-lights {
+  left: calc((2rem + var(--timing-board-width)) + (100% - (2rem + var(--timing-board-width))) / 2);
+}
+
+.sim-shell--left-tower-overlay .race-data-panel {
+  z-index: 8;
+  grid-template-columns: clamp(4.6rem, 7.5cqw, 7rem) minmax(0, 1fr) auto;
+}
+
+.sim-canvas-panel--with-timing-tower .race-data-panel {
+  z-index: 8;
+  grid-template-columns: clamp(4.6rem, 7.5cqw, 7rem) minmax(0, 1fr) auto;
+}
+
+@container (min-width: 980px) {
+  .sim-shell--left-tower-overlay .race-data-panel--auto,
+  .sim-canvas-panel--with-timing-tower .race-data-panel--auto {
+    --race-data-banner-left: calc(var(--race-data-safe-left) + (var(--race-data-available-width) / 2));
+    --race-data-banner-width: min(860px, calc(var(--race-data-available-width) - 0.5rem));
+    --race-data-banner-translate-x: -50%;
+  }
+}
+
+.sim-shell--left-tower-overlay .race-data-copy {
+  padding-inline: 0.45rem 0.8rem;
+}
+
+.sim-canvas-panel--with-timing-tower .race-data-copy {
+  padding-inline: 0.45rem 0.8rem;
+}
+
+.sim-shell--left-tower-overlay .race-data-number {
+  padding-inline: 0.45rem;
+  font-size: clamp(3.2rem, 6cqw, 5.3rem);
+}
+
+.sim-canvas-panel--with-timing-tower .race-data-number {
+  padding-inline: 0.45rem;
+  font-size: clamp(3.2rem, 6cqw, 5.3rem);
+}
+
+.sim-shell--left-tower-overlay .race-data-link {
+  min-width: clamp(104px, 10cqw, 140px);
+  margin-right: 0.55rem;
+  padding-inline: 0.75rem;
+  font-size: 0.64rem;
+}
+
+.sim-canvas-panel--with-timing-tower .race-data-link {
+  min-width: clamp(104px, 10cqw, 140px);
+  margin-right: 0.55rem;
+  padding-inline: 0.75rem;
+  font-size: 0.64rem;
+}
+
+.sim-timing,
+.sim-telemetry,
+.sim-canvas-panel {
+  min-height: 0;
+  background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
+  border: 1px solid var(--line);
+}
+
+.sim-timing,
+.sim-telemetry {
+  position: relative;
+  padding: 0.9rem;
+  overflow: hidden;
+}
+
+.sim-timing.broadcast-tower {
+  position: relative;
+  width: min(100%, var(--timing-board-max-width));
+  max-width: var(--timing-board-max-width);
+  height: 100%;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  overflow: hidden;
+}
+
+.sim-shell--left-tower-overlay .sim-timing.broadcast-tower,
+.sim-canvas-panel--with-timing-tower > .sim-timing.broadcast-tower {
+  position: absolute;
+  width: var(--timing-board-width);
+  max-width: var(--timing-board-width);
+  height: auto;
+}
+
+.broadcast-tower-frame {
+  position: relative;
+  height: 100%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 0.65rem 0.5rem 0.75rem;
+  overflow: hidden;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)),
+    linear-gradient(160deg, rgba(26, 44, 74, 0.9) 0%, rgba(15, 31, 53, 0.94) 42%, rgba(10, 21, 39, 0.98) 100%);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 1.25rem;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.18),
+    inset 0 -24px 42px rgba(0, 0, 0, 0.34),
+    0 24px 70px rgba(0, 0, 0, 0.42);
+}
+
+.broadcast-tower-frame::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background:
+    linear-gradient(90deg, rgba(255, 255, 255, 0.12), transparent 18%, transparent 82%, rgba(225, 6, 0, 0.18)),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 18%);
+  mix-blend-mode: screen;
+  opacity: 0.7;
+}
+
+.broadcast-brand,
+.broadcast-lap,
+.broadcast-safety-banner,
+.broadcast-column-head,
+.timing-list {
+  position: relative;
+  z-index: 1;
+}
+
+.broadcast-brand {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 52px;
+  padding: 0.35rem 0.55rem 0.55rem;
+  color: #f7f8fb;
+  text-transform: uppercase;
+}
+
+.broadcast-f1-logo {
+  display: block;
+  width: 6.9rem;
+  max-width: 74%;
+  height: auto;
+  object-fit: contain;
+}
+
+.broadcast-lap {
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  gap: 0.36rem;
+  padding: 0.58rem 0.5rem 0.7rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.14);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(0, 0, 0, 0.2));
+  color: rgba(244, 247, 251, 0.88);
+  font-family: var(--font-display);
+  font-size: 0.96rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.broadcast-lap strong {
+  color: #fff;
+  font-size: 1.62rem;
+  font-weight: 900;
+  letter-spacing: -0.04em;
+}
+
+.broadcast-safety-banner {
+  display: grid;
+  grid-template-columns: 3.4rem minmax(0, 1fr);
+  align-items: center;
+  margin: 0;
+  background: #e0ce00;
+  color: #0a0b0d;
+  text-transform: uppercase;
+}
+
+.broadcast-safety-banner[hidden] {
+  display: none;
+}
+
+.broadcast-safety-banner span {
+  display: grid;
+  place-items: center;
+  min-height: 2.65rem;
+  border-right: 2px solid rgba(0, 0, 0, 0.28);
+  font-family: var(--font-display);
+  font-size: 1rem;
+  font-weight: 900;
+  letter-spacing: -0.06em;
+}
+
+.broadcast-safety-banner strong {
+  padding: 0 0.65rem;
+  font-size: 1.1rem;
+  font-weight: 900;
+  line-height: 0.9;
+}
+
+.broadcast-gap-mode {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.35rem;
+  padding: 0.45rem 0.2rem 0.2rem;
+}
+
+.broadcast-gap-mode button {
+  min-width: 0;
+  min-height: 1.75rem;
+  color: rgba(244, 247, 251, 0.58);
+  background: rgba(255, 255, 255, 0.055);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  font-family: var(--font-mono);
+  font-size: 0.6rem;
+  font-weight: 900;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  cursor: pointer;
+}
+
+.broadcast-gap-mode button.is-active,
+.broadcast-gap-mode button[aria-pressed='true'] {
+  color: #08090b;
+  background: #f5f6f8;
+  border-color: #f5f6f8;
+}
+
+.broadcast-column-head {
+  display: grid;
+  grid-template-columns: var(--timing-columns);
+  gap: 0;
+  padding: 0.42rem 0 0.35rem;
+  color: rgba(244, 247, 251, 0.44);
+  font-family: var(--font-mono);
+  font-size: 0.52rem;
+  font-weight: 800;
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+}
+
+.broadcast-column-head span:nth-child(1),
+.broadcast-column-head span:nth-child(2),
+.broadcast-column-head span:nth-child(5) {
+  text-align: center;
+}
+
+.broadcast-column-head span:nth-child(1),
+.timing-position {
+  grid-column: 1;
+}
+
+.broadcast-column-head span:nth-child(2),
+.timing-icon {
+  grid-column: 2;
+}
+
+.broadcast-column-head span:nth-child(3),
+.timing-name {
+  grid-column: 3;
+}
+
+.broadcast-column-head span:nth-child(4),
+.timing-gap {
+  grid-column: 4;
+}
+
+.broadcast-column-head span:nth-child(5),
+.timing-tire {
+  grid-column: 5;
+}
+
+.broadcast-column-head span:nth-child(3) {
+  padding-inline: 0.45rem;
+}
+
+.broadcast-column-head span:nth-child(4) {
+  padding-right: 0.25rem;
+  text-align: right;
+}
+
+.timing-header,
+.telemetry-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--line);
+  text-transform: uppercase;
+}
+
+.timing-header span,
+.telemetry-header span {
+  color: var(--muted);
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+  letter-spacing: 0.12em;
+}
+
+.timing-header strong {
+  color: var(--green);
+  font-family: var(--font-mono);
+  font-size: 0.74rem;
+}
+
+.timing-list {
+  flex: 1 1 auto;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  grid-auto-rows: minmax(33px, max-content);
+  align-content: start;
+  justify-content: stretch;
+  gap: 1px;
+  min-height: 0;
+  overflow: auto;
+  scrollbar-width: thin;
+}
+
+.sim-shell--left-tower-overlay .timing-list {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.sim-shell--left-tower-overlay .broadcast-column-head,
+.sim-shell--left-tower-overlay .timing-row {
+  grid-template-columns: 1.7rem 1.8rem minmax(0, 1fr) minmax(2.7rem, 3.45rem) 1.25rem;
+}
+
+.sim-shell--left-tower-overlay .broadcast-column-head {
+  overflow: hidden;
+}
+
+.sim-shell--left-tower-overlay .broadcast-column-head span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.timing-row {
+  display: grid;
+  grid-template-columns: var(--timing-columns);
+  gap: 0;
+  align-items: center;
+  width: 100%;
+  min-height: 33px;
+  padding: 0;
+  border: 0;
+  color: var(--text);
+  background:
+    linear-gradient(90deg, color-mix(in srgb, var(--driver-color, var(--red)) 10%, transparent), transparent 42%),
+    rgba(10, 12, 17, 0.78);
+  cursor: pointer;
+}
+
+.broadcast-column-head,
+.timing-row {
+  min-width: 0;
+}
+
+.sim-shell--left-tower-overlay .timing-row {
+  min-width: 0;
+}
+
+.timing-row:hover {
+  background:
+    linear-gradient(90deg, color-mix(in srgb, var(--driver-color, var(--red)) 22%, transparent), transparent 52%),
+    rgba(28, 31, 38, 0.86);
+}
+
+.timing-row.is-selected {
+  color: #08090b;
+  outline: 0;
+  background: #f5f6f8;
+  box-shadow:
+    inset 4px 0 0 var(--driver-color, var(--red)),
+    0 0 0 1px rgba(255, 255, 255, 0.68);
+}
+
+.timing-position,
+.timing-icon,
+.timing-tire,
+.timing-gap {
+  font-family: var(--font-mono);
+  font-weight: 700;
+}
+
+.timing-position {
+  align-self: stretch;
+  display: grid;
+  place-items: center;
+  color: #f5f6f8;
+  background: rgba(2, 3, 7, 0.72);
+  font-size: 0.78rem;
+}
+
+.timing-row:first-child .timing-position {
+  background: var(--red);
+}
+
+.timing-row.is-selected .timing-position {
+  color: #fff;
+  background: var(--red);
+}
+
+.timing-icon {
+  display: grid;
+  place-items: center;
+  justify-self: center;
+  width: 1.3rem;
+  height: 1.3rem;
+  color: #08090b;
+  background: var(--driver-color, var(--red));
+  border-radius: 0.24rem;
+  font-size: 0.48rem;
+  letter-spacing: -0.04em;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32);
+}
+
+.timing-team-icon {
+  background: var(--team-color, var(--driver-color, var(--red)));
+}
+
+.timing-name {
+  min-width: 0;
+  display: block;
+  overflow: hidden;
+  padding-inline: 0.45rem;
+  font-size: 0.76rem;
+  font-weight: 900;
+  letter-spacing: 0.015em;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-transform: uppercase;
+}
+
+.timing-gap {
+  color: rgba(244, 247, 251, 0.76);
+  font-size: 0.66rem;
+  padding-right: 0.25rem;
+  text-align: right;
+}
+
+.timing-row.is-selected .timing-gap {
+  color: #08090b;
+}
+
+.timing-tire {
+  justify-self: center;
+  color: #f3e35f;
+  font-size: 0.72rem;
+  text-align: center;
+}
+
+.timing-tire--s {
+  color: #ff3b30;
+}
+
+.timing-tire--m {
+  color: #f3e35f;
+}
+
+.timing-tire--h {
+  color: #e9eef5;
+}
+
+.timing-row.is-selected .timing-tire--h,
+.timing-row.is-selected .timing-tire--m,
+.timing-row.is-selected .timing-tire--s {
+  color: #08090b;
+}
+
+.sim-canvas-panel {
+  position: relative;
+  min-height: var(--paddock-race-view-min-height, 620px);
+  overflow: hidden;
+  box-shadow:
+    inset 0 0 90px rgba(0, 0, 0, 0.42),
+    0 24px 70px rgba(0, 0, 0, 0.32);
+}
+
+.track-canvas {
+  position: absolute;
+  inset: 0;
+}
+
+.track-canvas canvas {
+  width: 100% !important;
+  height: 100% !important;
+  display: block;
+}
+
+.camera-controls {
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+  max-width: calc(100% - 2rem);
+  padding: 0.35rem;
+  background: rgba(8, 9, 11, 0.72);
+  border: 1px solid var(--line);
+  backdrop-filter: blur(14px);
+}
+
+.camera-controls--external {
+  position: relative;
+  max-width: 100%;
+  justify-content: flex-end;
+  background: rgba(8, 9, 11, 0.84);
+}
+
+.camera-controls button {
+  border: 1px solid rgba(255, 255, 255, 0.22);
+  color: var(--text);
+  background: rgba(255, 255, 255, 0.06);
+  font-family: var(--font-mono);
+  font-size: 0.66rem;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  padding: 0.48rem 0.58rem;
+  cursor: pointer;
+}
+
+.camera-controls button:hover {
+  border-color: var(--text);
+}
+
+.fps-counter {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  z-index: 3;
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.4rem;
+  padding: 0.38rem 0.55rem;
+  color: rgba(244, 247, 251, 0.88);
+  background: rgba(8, 9, 11, 0.68);
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  font-family: var(--font-mono);
+  font-size: 0.62rem;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  pointer-events: none;
+  backdrop-filter: blur(10px);
+}
+
+.fps-counter strong {
+  color: #fff;
+  font-size: 0.74rem;
+}
+
+.race-finish-panel {
+  position: absolute;
+  z-index: 9;
+  left: 50%;
+  bottom: 1.25rem;
+  width: min(620px, calc(100% - 2rem));
+  transform: translateX(-50%);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 0.6rem 1rem;
+  padding: 0.9rem 1rem;
+  color: var(--text);
+  background:
+    linear-gradient(90deg, color-mix(in srgb, var(--driver-color, var(--red)) 28%, transparent), transparent 52%),
+    rgba(8, 9, 11, 0.9);
+  border: 1px solid color-mix(in srgb, var(--driver-color, var(--red)) 58%, rgba(255, 255, 255, 0.18));
+  border-left: 6px solid var(--driver-color, var(--red));
+  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
+  backdrop-filter: blur(14px);
+  text-transform: uppercase;
+}
+
+.race-finish-panel span {
+  color: var(--muted);
+  font-family: var(--font-mono);
+  font-size: 0.66rem;
+  font-weight: 800;
+  letter-spacing: 0.12em;
+}
+
+.race-finish-panel > strong {
+  grid-column: 1;
+  font-size: clamp(1.45rem, 3vw, 2.4rem);
+  font-weight: 900;
+  line-height: 0.92;
+}
+
+.race-finish-panel ol {
+  grid-column: 2;
+  grid-row: 1 / span 2;
+  display: grid;
+  gap: 0.18rem;
+  min-width: 7.5rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.race-finish-panel li {
+  display: grid;
+  grid-template-columns: 2.2rem minmax(0, 1fr);
+  gap: 0.45rem;
+  align-items: center;
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+}
+
+.race-finish-panel li strong {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.standalone-control {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.start-lights {
+  position: absolute;
+  top: 4.15rem;
+  left: 50%;
+  z-index: 4;
+  transform: translateX(-50%);
+  display: grid;
+  gap: 0.36rem;
+  justify-items: center;
+  padding: 0.58rem 0.72rem 0.68rem;
+  color: #f7f8fb;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent),
+    rgba(4, 5, 8, 0.82);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.36);
+  font-family: var(--font-mono);
+  text-transform: uppercase;
+  backdrop-filter: blur(14px);
+}
+
+.start-lights[hidden] {
+  display: none;
+}
+
+.start-lights__label {
+  color: rgba(244, 247, 251, 0.78);
+  font-size: 0.62rem;
+  font-weight: 900;
+  letter-spacing: 0.16em;
+}
+
+.start-lights__gantry {
+  display: grid;
+  grid-template-columns: repeat(5, 1.35rem);
+  gap: 0.34rem;
+}
+
+.start-lights__gantry span {
+  width: 1.35rem;
+  height: 1.35rem;
+  border-radius: 50%;
+  background: #15171d;
+  border: 2px solid rgba(255, 255, 255, 0.18);
+  box-shadow:
+    inset 0 0 12px rgba(0, 0, 0, 0.88),
+    0 0 0 rgba(225, 6, 0, 0);
+  transition: background 80ms linear, box-shadow 80ms linear, border-color 80ms linear;
+}
+
+.start-lights__gantry span.is-lit {
+  background: #e10600;
+  border-color: rgba(255, 210, 210, 0.86);
+  box-shadow:
+    inset 0 0 8px rgba(255, 255, 255, 0.18),
+    0 0 18px rgba(225, 6, 0, 0.72);
+}
+
+.start-lights.is-lights-out .start-lights__label {
+  color: #fff;
+}
+
+.start-lights.is-lights-out .start-lights__gantry span {
+  background: #08090b;
+  border-color: rgba(255, 255, 255, 0.12);
+  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.9);
+}
+
+.paddock-loading {
+  position: absolute;
+  inset: 0;
+  z-index: 30;
+  display: grid;
+  place-content: center;
+  justify-items: center;
+  gap: 0.52rem;
+  color: rgba(244, 247, 251, 0.82);
+  background:
+    radial-gradient(circle at 50% 42%, rgba(225, 6, 0, 0.2), transparent 34%),
+    rgba(4, 5, 8, 0.78);
+  font-family: var(--font-mono);
+  font-size: 0.62rem;
+  font-weight: 900;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  pointer-events: none;
+  backdrop-filter: blur(10px);
+}
+
+.paddock-loading__lights {
+  display: grid;
+  grid-template-columns: repeat(5, 1rem);
+  gap: 0.28rem;
+}
+
+.paddock-loading__lights span {
+  width: 1rem;
+  height: 1rem;
+  border-radius: 50%;
+  background: #15171d;
+  border: 2px solid rgba(255, 255, 255, 0.16);
+  box-shadow:
+    inset 0 0 10px rgba(0, 0, 0, 0.88),
+    0 0 0 rgba(225, 6, 0, 0);
+  animation: paddock-loading-pulse 900ms ease-in-out infinite;
+}
+
+.paddock-loading__lights span:nth-child(2) {
+  animation-delay: 90ms;
+}
+
+.paddock-loading__lights span:nth-child(3) {
+  animation-delay: 180ms;
+}
+
+.paddock-loading__lights span:nth-child(4) {
+  animation-delay: 270ms;
+}
+
+.paddock-loading__lights span:nth-child(5) {
+  animation-delay: 360ms;
+}
+
+.paddock-loading__label {
+  text-shadow: 0 0 16px rgba(225, 6, 0, 0.48);
+}
+
+[data-paddock-component].is-loaded > .paddock-loading {
+  opacity: 0;
+}
+
+@keyframes paddock-loading-pulse {
+  0%,
+  100% {
+    background: #15171d;
+    border-color: rgba(255, 255, 255, 0.16);
+    box-shadow:
+      inset 0 0 10px rgba(0, 0, 0, 0.88),
+      0 0 0 rgba(225, 6, 0, 0);
+  }
+
+  45%,
+  62% {
+    background: #e10600;
+    border-color: rgba(255, 220, 220, 0.88);
+    box-shadow:
+      inset 0 0 8px rgba(255, 255, 255, 0.18),
+      0 0 18px rgba(225, 6, 0, 0.72);
+  }
+}
+
+.race-data-panel {
+  --race-data-banner-left: 50%;
+  --race-data-banner-width: min(1080px, calc(100% - 1.5rem));
+  --race-data-banner-translate-x: -50%;
+  position: absolute;
+  left: var(--race-data-banner-left);
+  bottom: 1.2rem;
+  transform: translateX(var(--race-data-banner-translate-x));
+  z-index: 8;
+  display: grid;
+  grid-template-columns: clamp(6.5rem, 12vw, 9.6rem) minmax(280px, 1fr) auto;
+  align-items: center;
+  width: var(--race-data-banner-width);
+  min-height: 104px;
+  color: var(--text);
+  background:
+    linear-gradient(104deg, rgba(10, 13, 22, 0.98) 0 58%, rgba(33, 39, 51, 0.9) 58.2% 68%, rgba(8, 10, 16, 0.98) 68.2% 100%),
+    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 82px);
+  border-left: 6px solid var(--driver-color, var(--red));
+  border-bottom: 3px solid var(--driver-color, var(--red));
+  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
+  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.42), inset 0 1px rgba(255, 255, 255, 0.12);
+  overflow: hidden;
+  transition: opacity 180ms ease, transform 180ms ease, width 180ms ease, min-height 180ms ease, background-color 180ms ease;
+}
+
+.race-data-panel.is-hidden {
+  opacity: 0;
+  pointer-events: none;
+  transform: translate(var(--race-data-banner-translate-x), 18px);
+}
+
+.race-data-panel--custom {
+  --race-data-banner-left: 50%;
+  --race-data-banner-width: min(1080px, calc(100% - 1.5rem));
+  --race-data-banner-translate-x: -50%;
+}
+
+.race-data-panel::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(90deg, color-mix(in srgb, var(--driver-color, var(--red)) 70%, transparent) 0, transparent 42%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 42%);
+  opacity: 0.2;
+  pointer-events: none;
+}
+
+.race-data-panel::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: min(42%, 430px);
+  height: 4px;
+  background: linear-gradient(90deg, var(--driver-color, var(--red)), transparent);
+  pointer-events: none;
+}
+
+.race-data-copy,
+.race-data-number,
+.race-data-link {
+  position: relative;
+  z-index: 1;
+}
+
+.race-data-copy {
+  grid-column: 2;
+  grid-row: 1;
+  min-width: 0;
+  padding: 0.92rem 1.45rem 0.98rem 0.55rem;
+}
+
+.race-data-kicker {
+  display: block;
+  margin-bottom: 0.22rem;
+  color: var(--driver-color, var(--red));
+  font-family: var(--font-mono);
+  font-size: 0.66rem;
+  font-weight: 800;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.race-data-copy strong {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: clamp(1.85rem, 3.5vw, 2.9rem);
+  line-height: 0.92;
+  text-transform: uppercase;
+  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45), 0 0 24px color-mix(in srgb, var(--driver-color, var(--red)) 28%, transparent);
+}
+
+.race-data-subtitle {
+  display: block;
+  margin-top: 0.28rem;
+  color: rgba(244, 247, 251, 0.72);
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.race-data-number {
+  grid-column: 1;
+  grid-row: 1;
+  display: grid;
+  place-items: center;
+  justify-self: stretch;
+  min-width: 0;
+  height: 100%;
+  padding-inline: 1rem;
+  color: rgba(244, 247, 251, 0.2);
+  font-family: var(--font-display);
+  font-size: clamp(4.1rem, 9vw, 6.6rem);
+  font-style: italic;
+  font-weight: 900;
+  letter-spacing: -0.14em;
+  line-height: 0.8;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+  -webkit-text-stroke: 1px rgba(244, 247, 251, 0.54);
+  transition: opacity 160ms ease, transform 160ms ease;
+}
+
+.race-data-panel.is-project-mode .race-data-number {
+  transform: translateX(-8px);
+}
+
+.race-data-panel.is-radio-mode {
+  grid-template-columns: minmax(280px, 1fr);
+}
+
+.race-data-panel.is-radio-mode .race-data-copy {
+  grid-column: 1;
+  padding-left: 1.45rem;
+}
+
+.race-data-panel.is-radio-mode .race-data-copy strong {
+  color: #f8fafc;
+  font-size: clamp(1.6rem, 3.2vw, 2.35rem);
+}
+
+.race-data-panel[data-idle-mode="quote"] .race-data-copy {
+  padding-top: 0.8rem;
+  padding-bottom: 0.88rem;
+}
+
+.race-data-panel[data-idle-mode="quote"] .race-data-copy strong {
+  color: rgba(244, 247, 251, 0.78);
+  font-size: clamp(0.95rem, 1.55vw, 1.2rem);
+  letter-spacing: 0.05em;
+  line-height: 1;
+}
+
+.race-data-panel[data-idle-mode="quote"] .race-data-subtitle {
+  max-width: 100%;
+  margin-top: 0.34rem;
+  color: #fff;
+  font-family: var(--font-display);
+  font-size: clamp(1.35rem, 2.9vw, 2.25rem);
+  font-weight: 900;
+  letter-spacing: -0.02em;
+  line-height: 1;
+  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.52), 0 0 22px color-mix(in srgb, var(--driver-color, var(--red)) 30%, transparent);
+}
+
+.race-data-panel.is-radio-mode .race-data-number {
+  display: none;
+}
+
+.race-data-panel.is-radio-mode .race-data-link {
+  display: none;
+}
+
+.race-data-link {
+  grid-column: 3;
+  grid-row: 1;
+  display: grid;
+  place-items: center;
+  align-self: center;
+  min-width: clamp(132px, 13vw, 176px);
+  min-height: 3.1rem;
+  margin-right: 0.85rem;
+  padding: 0 1.05rem;
+  color: #f6f8fb;
+  background: color-mix(in srgb, var(--driver-color, var(--red)) 88%, #111318);
+  border: 1px solid color-mix(in srgb, var(--driver-color, var(--red)) 72%, #ffffff);
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+  font-weight: 900;
+  letter-spacing: 0.08em;
+  text-align: center;
+  text-decoration: none;
+  text-transform: uppercase;
+}
+
+.race-data-link:hover {
+  color: #fff;
+  filter: brightness(1.12);
+}
+
+.telemetry-grid dt {
+  display: block;
+  margin-bottom: 0.22rem;
+  color: var(--muted);
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.telemetry-grid dd {
+  margin: 0;
+  font-family: var(--font-mono);
+  font-size: clamp(0.86rem, 1.6vw, 1.15rem);
+}
+
+.telemetry-header {
+  align-items: flex-start;
+}
+
+.telemetry-header strong {
+  min-width: 0;
+  text-align: right;
+  font-size: 0.92rem;
+  text-transform: uppercase;
+}
+
+.telemetry-grid {
+  margin: 1rem 0 0;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1px;
+  background: var(--line);
+}
+
+.telemetry-grid > div {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.82rem 0.7rem;
+  background: var(--surface-panel);
+}
+
+.telemetry-grid dd {
+  color: var(--text);
+  text-align: right;
+}
+
+.car-overview {
+  position: relative;
+  margin-top: 1rem;
+  padding-top: 0.85rem;
+  border-top: 1px solid var(--line);
+}
+
+.car-overview-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-bottom: 0.8rem;
+  text-transform: uppercase;
+}
+
+.car-overview-header span {
+  color: var(--muted);
+  font-family: var(--font-mono);
+  font-size: 0.64rem;
+  font-weight: 800;
+  letter-spacing: 0.12em;
+}
+
+.car-overview-header strong {
+  color: var(--driver-color, var(--red));
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+  letter-spacing: 0.08em;
+}
+
+.car-overview-toggle {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.35rem;
+  margin-bottom: 0.7rem;
+}
+
+.car-overview-toggle button {
+  min-width: 0;
+  min-height: 2.15rem;
+  color: var(--muted);
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+  font-weight: 900;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  background: rgba(255, 255, 255, 0.055);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  cursor: pointer;
+}
+
+.car-overview-toggle button.is-active,
+.car-overview-toggle button[aria-pressed='true'] {
+  color: #fff;
+  background: color-mix(in srgb, var(--driver-color, var(--red)) 30%, rgba(255, 255, 255, 0.075));
+  border-color: color-mix(in srgb, var(--driver-color, var(--red)) 72%, rgba(255, 255, 255, 0.18));
+}
+
+.car-overview-diagram {
+  --arrow-line: color-mix(in srgb, var(--driver-color, var(--red)) 72%, rgba(255, 255, 255, 0.36));
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-rows: auto auto 5.7rem auto auto;
+  gap: 0.5rem 0.5rem;
+  min-height: 15.25rem;
+  padding: 0.82rem 0.62rem;
+  overflow: hidden;
+  background:
+    radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--driver-color, var(--red)) 24%, transparent) 0 18%, transparent 42%),
+    linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012));
+  border: 1px solid rgba(255, 255, 255, 0.12);
+}
+
+.car-overview-diagram::before {
+  content: '';
+  position: absolute;
+  inset: 0.55rem;
+  pointer-events: none;
+  background:
+    linear-gradient(var(--arrow-line), var(--arrow-line)) 50% 18% / 1px 22% no-repeat,
+    linear-gradient(var(--arrow-line), var(--arrow-line)) 50% 61% / 1px 17% no-repeat,
+    linear-gradient(90deg, var(--arrow-line), var(--arrow-line)) 25% 48% / 24% 1px no-repeat,
+    linear-gradient(90deg, var(--arrow-line), var(--arrow-line)) 75% 48% / 24% 1px no-repeat;
+  opacity: 0.62;
+}
+
+.car-overview-diagram::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: repeating-linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0.04) 0 1px,
+    transparent 1px 36px
+  );
+  opacity: 0.44;
+}
+
+.car-overview-car {
+  position: relative;
+  z-index: 1;
+  grid-column: 1 / -1;
+  grid-row: 3;
+  align-self: center;
+  justify-self: center;
+  display: grid;
+  place-items: center;
+  width: 5.15rem;
+  height: 3.15rem;
+  color: #08090b;
+  transform: skewX(-10deg);
+}
+
+.car-overview-car::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(90deg, rgba(255, 255, 255, 0.74), transparent 44%),
+    var(--driver-color, var(--red));
+  clip-path: polygon(12% 7%, 82% 7%, 100% 50%, 82% 93%, 12% 93%, 0 50%);
+  opacity: 0.28;
+  box-shadow:
+    inset 0 0 0 2px rgba(255, 255, 255, 0.34),
+    0 0 28px color-mix(in srgb, var(--driver-color, var(--red)) 44%, transparent);
+}
+
+.car-overview-car::after {
+  content: '';
+  position: absolute;
+  inset: 0.58rem 0.86rem;
+  border-top: 3px solid rgba(8, 9, 11, 0.74);
+  border-bottom: 3px solid rgba(8, 9, 11, 0.74);
+  transform: skewX(10deg);
+  z-index: 1;
+  opacity: 0.34;
+}
+
+.car-overview-car-image {
+  position: absolute;
+  z-index: 2;
+  inset: 0.25rem 0.2rem;
+  width: calc(100% - 0.4rem);
+  height: calc(100% - 0.5rem);
+  object-fit: contain;
+  filter:
+    drop-shadow(0 0 10px color-mix(in srgb, var(--driver-color, var(--red)) 72%, transparent))
+    saturate(1.15)
+    brightness(1.08);
+  transform: skewX(10deg);
+}
+
+.car-overview-icon,
+.car-overview-number,
+.car-overview-core-stat {
+  position: relative;
+  z-index: 3;
+  transform: skewX(10deg);
+  font-family: var(--font-mono);
+  font-weight: 900;
+}
+
+.car-overview-icon {
+  font-size: 0.86rem;
+  letter-spacing: -0.07em;
+}
+
+.car-overview-number {
+  position: absolute;
+  right: 0.42rem;
+  bottom: 0.18rem;
+  color: rgba(244, 247, 251, 0.68);
+  font-size: 0.54rem;
+}
+
+.car-overview-core-stat {
+  position: absolute;
+  left: 50%;
+  bottom: -1.05rem;
+  color: color-mix(in srgb, var(--driver-color, var(--red)) 62%, #ffffff);
+  font-size: 0.58rem;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  transform: translateX(-50%) skewX(10deg);
+}
+
+.car-overview-cell {
+  position: relative;
+  z-index: 1;
+  min-width: 0;
+  padding: 0.5rem 0.48rem;
+  background: rgba(8, 9, 11, 0.76);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--driver-color, var(--red)) 78%, transparent);
+}
+
+.car-overview-cell::after {
+  content: '';
+  position: absolute;
+  width: 0.42rem;
+  height: 0.42rem;
+  background: var(--arrow-line);
+  transform: rotate(45deg);
+}
+
+.car-overview-cell--slot-1 {
+  grid-column: 1;
+  grid-row: 1;
+  justify-self: stretch;
+  width: auto;
+}
+
+.car-overview-cell--slot-1::after,
+.car-overview-cell--slot-2::after {
+  right: 50%;
+  bottom: -0.25rem;
+  transform: translateX(50%) rotate(45deg);
+}
+
+.car-overview-cell--slot-2 {
+  grid-column: 2;
+  grid-row: 1;
+  justify-self: stretch;
+  width: auto;
+}
+
+.car-overview-cell--slot-3 {
+  grid-column: 1;
+  grid-row: 2;
+  justify-self: stretch;
+  width: auto;
+}
+
+.car-overview-cell--slot-4 {
+  grid-column: 2;
+  grid-row: 2;
+  justify-self: stretch;
+  width: auto;
+}
+
+.car-overview-cell--slot-3::after,
+.car-overview-cell--slot-4::after {
+  top: 50%;
+  transform: translateY(-50%) rotate(45deg);
+}
+
+.car-overview-cell--slot-3::after {
+  right: -0.25rem;
+}
+
+.car-overview-cell--slot-4::after {
+  left: -0.25rem;
+}
+
+.car-overview-cell--slot-5,
+.car-overview-cell--slot-6 {
+  grid-row: 4;
+}
+
+.car-overview-cell--slot-5 {
+  grid-column: 1;
+}
+
+.car-overview-cell--slot-6 {
+  grid-column: 2;
+}
+
+.car-overview-cell--slot-5::after,
+.car-overview-cell--slot-6::after {
+  right: 50%;
+  top: -0.25rem;
+  transform: translateX(50%) rotate(45deg);
+}
+
+.car-overview-cell--slot-7 {
+  grid-column: 1 / -1;
+  grid-row: 5;
+  justify-self: stretch;
+  display: grid;
+  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
+  align-items: end;
+  gap: 0.5rem;
+  width: auto;
+}
+
+.car-overview-cell--slot-7::after {
+  left: 50%;
+  top: -0.25rem;
+  transform: translateX(-50%) rotate(45deg);
+}
+
+.car-overview-cell--slot-7 > span {
+  margin-bottom: 0;
+}
+
+.car-overview-cell--slot-7 strong {
+  text-align: right;
+}
+
+.car-overview-cell > span {
+  display: block;
+  margin-bottom: 0.18rem;
+  color: var(--muted);
+  font-family: var(--font-mono);
+  font-size: 0.56rem;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.car-overview-cell strong {
+  display: block;
+  overflow: hidden;
+  color: #fff;
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  font-weight: 900;
+  letter-spacing: -0.03em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.car-overview-cell strong span {
+  display: inline;
+  margin: 0;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  text-transform: none;
+}
+
+@media (max-width: 1120px) {
+  .sim-grid,
+  .sim-shell--left-tower-overlay .sim-grid,
+  .sim-shell--left-tower-overlay.sim-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .sim-canvas-panel,
+  .sim-shell--left-tower-overlay .sim-canvas-panel {
+    min-height: 62svh;
+    grid-column: auto;
+    order: -1;
+  }
+
+  .sim-shell--left-tower-overlay.sim-shell--timing-expand-race-view .sim-canvas-panel {
+    min-height: 62svh;
+  }
+
+  .sim-shell--left-tower-overlay .sim-timing {
+    position: static;
+    width: auto;
+    max-width: 390px;
+    clip-path: none;
+  }
+
+  .sim-shell--left-tower-overlay .sim-canvas-panel > .camera-controls {
+    left: 1rem;
+    max-width: calc(100% - 2rem);
+  }
+
+  .sim-shell--left-tower-overlay .start-lights {
+    left: 50%;
+  }
+
+  .sim-shell--left-tower-overlay .race-data-panel {
+    --race-data-banner-left: 50%;
+    --race-data-banner-width: min(1080px, calc(100% - 1.5rem));
+    left: 50%;
+  }
+
+  .sim-timing,
+  .sim-telemetry {
+    min-height: auto;
+  }
+
+  .sim-telemetry {
+    display: grid;
+    grid-template-columns: minmax(0, 0.9fr) minmax(280px, 1.1fr);
+    gap: 1rem;
+  }
+
+  .telemetry-header {
+    grid-column: 1 / -1;
+  }
+
+  .telemetry-grid {
+    margin-top: 0;
+  }
+
+  .car-overview {
+    margin-top: 0;
+    padding-top: 0;
+    border-top: 0;
+  }
+}
+
+@media (max-width: 760px) {
+  .sim-shell {
+    padding: 0.75rem;
+  }
+
+  .sim-grid,
+  .sim-shell--left-tower-overlay .sim-grid,
+  .sim-shell--left-tower-overlay.sim-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .sim-shell--left-tower-overlay .sim-timing,
+  .sim-canvas-panel--with-timing-tower > .sim-timing {
+    width: min(72vw, var(--timing-board-max-width));
+  }
+
+  .sim-topbar {
+    grid-template-columns: 1fr;
+    align-items: stretch;
+  }
+
+  .sim-controls,
+  .sim-backlink {
+    justify-content: stretch;
+  }
+
+  .sim-controls {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .sim-control,
+  .sim-backlink {
+    text-align: center;
+  }
+
+  .sim-canvas-panel {
+    min-height: 58svh;
+  }
+
+  .camera-controls {
+    max-width: calc(100% - 5.4rem);
+  }
+
+  .race-data-panel {
+    left: 50%;
+    bottom: 0.75rem;
+    grid-template-columns: minmax(0, 1fr) auto;
+    width: calc(100% - 1.5rem);
+    min-height: 88px;
+  }
+
+  .race-data-panel.is-radio-mode {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .race-data-copy {
+    grid-column: 2;
+    padding: 0.78rem 0.95rem 0.85rem;
+  }
+
+  .race-data-panel.is-radio-mode .race-data-copy {
+    grid-column: 1;
+    padding-left: 0.95rem;
+  }
+
+  .race-data-number {
+    grid-column: 1;
+    min-width: 4.8rem;
+    height: auto;
+    font-size: 3.4rem;
+  }
+
+  .race-data-link {
+    grid-column: 1 / -1;
+    margin: 0;
+    min-height: 48px;
+  }
+
+  .sim-telemetry {
+    display: block;
+  }
+
+  .telemetry-grid {
+    margin-top: 1rem;
+  }
+
+  .car-overview {
+    margin-top: 1rem;
+    padding-top: 0.85rem;
+    border-top: 1px solid var(--line);
+  }
+
+  .car-overview-diagram {
+    grid-template-columns: 1fr;
+    grid-template-rows: repeat(2, auto) 5.3rem repeat(4, auto);
+  }
+
+  .car-overview-diagram::before {
+    background:
+      linear-gradient(var(--arrow-line), var(--arrow-line)) 50% 18% / 1px 16% no-repeat,
+      linear-gradient(var(--arrow-line), var(--arrow-line)) 50% 82% / 1px 16% no-repeat;
+  }
+
+  .car-overview-cell,
+  .car-overview-car {
+    grid-column: 1;
+    justify-self: stretch;
+    width: auto;
+  }
+
+  .car-overview-cell--slot-1 {
+    grid-row: 1;
+  }
+
+  .car-overview-cell--slot-2 {
+    grid-row: 2;
+  }
+
+  .car-overview-car {
+    grid-row: 3;
+    justify-self: center;
+  }
+
+  .car-overview-cell--slot-3 {
+    grid-row: 4;
+  }
+
+  .car-overview-cell--slot-4 {
+    grid-row: 5;
+  }
+
+  .car-overview-cell--slot-5 {
+    grid-row: 6;
+  }
+
+  .car-overview-cell--slot-6 {
+    grid-row: 7;
+  }
+
+  .car-overview-cell--slot-7 {
+    grid-row: 8;
+    display: block;
+  }
+
+  .car-overview-cell--slot-7 strong {
+    text-align: left;
+  }
+
+  .car-overview-cell::after {
+    display: none;
+  }
+}