:root {
  color-scheme: dark;
  --bg: #121416;
  --panel: #1a1e21;
  --panel2: #20252a;
  --line: #30363c;
  --text: #f1f3f5;
  --muted: #9aa4ad;
  --accent: #f0c54f;
  --green: #75d18a;
  --red: #ef6c67;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; }
button, select, input { font: inherit; }
button { cursor: pointer; }

.app { max-width: 1680px; margin: 0 auto; padding: 14px; }
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 18px;
  border-bottom: 1px solid var(--line);
  padding: 4px 2px 12px;
  margin-bottom: 12px;
}
.topbar h1 { margin: 0; font-size: clamp(18px, 2.3vw, 28px); letter-spacing: .12em; }
.sub { color: var(--muted); font-size: 12px; margin-top: 3px; }
.race-meta { display: flex; gap: 18px; color: var(--muted); font: 700 12px ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }
#statusText { color: var(--accent); }

.layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 12px; }
.race-panel { min-width: 0; }
#gameCanvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9.5;
  background: #24492d;
  border: 1px solid var(--line);
}

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 0;
}
.controls button, .strategy button {
  border: 1px solid #3a4249;
  background: #252b30;
  color: var(--text);
  border-radius: 4px;
  padding: 8px 11px;
  min-height: 36px;
}
.controls button:hover, .strategy button:hover { background: #30373d; }
.controls button.active, .strategy button.active { border-color: var(--accent); background: #3a3320; color: #ffe49a; }
.series-group { display: flex; flex-wrap: wrap; gap: 4px; margin-left: 8px; }
.series-group .series.active { border-color: var(--accent); background: #3a3320; color: #ffe49a; }
.speed-group { display: flex; gap: 4px; margin-left: auto; }
.check { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 6px; }

.sidebar { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.panel { border: 1px solid var(--line); background: var(--panel); }
.panel-title { padding: 9px 11px; font: 800 12px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; color: var(--muted); border-bottom: 1px solid var(--line); }
.standings { max-height: 470px; overflow-y: auto; }
.row {
  display: grid;
  grid-template-columns: 28px 12px minmax(0, 1fr) 62px 44px 48px;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 5px 9px;
  border-bottom: 1px solid #242a2f;
  font-size: 12px;
}
.row:last-child { border-bottom: 0; }
.row.player { background: #262419; }
.pos { font: 800 12px ui-monospace, monospace; color: #dfe5e8; }
.dot { width: 9px; height: 9px; border-radius: 2px; }
.name { min-width: 0; overflow: hidden; display: flex; flex-direction: column; line-height: 1.05; }
.driver-name-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.last-lap { margin-top: 3px; color: #89939a; font: 700 9px ui-monospace, monospace; white-space: nowrap; }
.gap, .tire { text-align: right; font: 700 11px ui-monospace, monospace; color: var(--muted); }
.tire.soft { color: #ff7d7d; }
.tire.medium { color: #ffd86c; }
.tire.hard { color: #e9edf0; }

.driver-card { padding: 10px; border-bottom: 1px solid var(--line); }
.driver-card:last-child { border-bottom: 0; }
.driver-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 8px; }
.driver-name { font-weight: 800; font-size: 13px; }
.driver-stats { color: var(--muted); font: 700 11px ui-monospace, monospace; }
.rating-section-label {
  color: #aeb7bd;
  font: 800 9px ui-monospace, monospace;
  letter-spacing: .11em;
  margin: 8px 0 4px;
}
.driver-attributes,
.vehicle-attributes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: 0 0 10px;
}
.driver-attributes > div,
.vehicle-attributes > div {
  min-width: 0;
  border: 1px solid #2d3439;
  background: #171b1e;
  border-radius: 3px;
  padding: 5px 6px;
}
.vehicle-attributes > div { background: #151b1c; }
.driver-attributes span,
.vehicle-attributes span {
  display: block;
  color: var(--muted);
  font-size: 8px;
  letter-spacing: .035em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.driver-attributes strong,
.vehicle-attributes strong {
  display: block;
  margin-top: 1px;
  font: 800 13px ui-monospace, monospace;
  color: #edf1f3;
}
.strategy { margin-top: 7px; }
.strategy-label { display: block; color: var(--muted); font-size: 10px; letter-spacing: .08em; margin-bottom: 4px; }
.strategy-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.strategy button { min-height: 31px; padding: 5px; font-size: 11px; }

@media (max-width: 1050px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { display: grid; grid-template-columns: 1fr 1fr; }
  .standings { max-height: 360px; }
}
@media (max-width: 700px) {
  .app { padding: 8px; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .race-meta { gap: 10px; flex-wrap: wrap; }
  .sidebar { grid-template-columns: 1fr; }
  .series-group, .speed-group { margin-left: 0; }
  .row { grid-template-columns: 24px 10px minmax(0, 1fr) 52px 40px 44px; padding-left: 6px; padding-right: 6px; }
  .driver-attributes, .vehicle-attributes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.track-upload {
  position: relative;
  overflow: hidden;
  border: 1px solid #3a4249;
  background: #252b30;
  color: var(--text);
  border-radius: 4px;
  padding: 8px 11px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-size: 12px;
}
.track-upload:hover { background: #30373d; }
.track-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.track-import-note {
  border: 1px solid var(--line);
  border-top: 0;
  background: #161a1d;
  padding: 7px 10px;
  color: var(--muted);
  font: 700 10px ui-monospace, SFMono-Regular, Menlo, monospace;
  line-height: 1.5;
}
.track-import-note strong { color: #d9dfe3; }
#trackImportStatus { margin-left: 10px; color: var(--accent); }
#trackImportStatus.error { color: var(--red); }
#trackImportStatus.success { color: var(--green); }

.laps-control {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #c9d0d5;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.laps-control input {
  width: 66px;
  min-height: 36px;
  box-sizing: border-box;
  border: 1px solid #4b535a;
  border-radius: 6px;
  background: #15191c;
  color: #f1f3f4;
  padding: 6px 8px;
  font: 700 14px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.strategy button:disabled { cursor: not-allowed; opacity: .42; background: #1c2024; color: #7d858b; border-color: #30363b; }
.pit-strategy { border-top: 1px solid rgba(255,255,255,.06); padding-top: 7px; }
.pit-buttons button.active { border-color: var(--accent); background: #3a3320; color: #ffe49a; }
.pit-status { margin-top: 5px; min-height: 14px; color: var(--muted); font-size: 10px; line-height: 1.35; }


.race-control-state {
  padding: 12px;
  text-align: center;
  font: 900 13px ui-monospace, monospace;
  letter-spacing: .08em;
  border-bottom: 1px solid var(--line);
}
.race-control-state.green { color: #84e39a; background: #15281a; }
.race-control-state.vsc { color: #ffd969; background: #302a14; }
.race-control-state.safety-car { color: #101214; background: #e2c544; }
.race-control-state.red { color: #fff; background: #9f2f2f; }
.race-control-tests { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:7px; }
.race-control-tests button { border:1px solid #3a4249; background:#252b30; color:#dce2e5; border-radius:4px; min-height:28px; font-size:9px; }
.race-control-tests button.wide { grid-column:1 / -1; }
.fuel { text-align:right; font:700 10px ui-monospace, monospace; color:#83d7a0; }
.fuel-laps-estimate {
  display:block;
  margin-top:1px;
  color:#8f9ba1;
  font:800 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing:.02em;
  white-space:nowrap;
}
.fuel-laps-estimate.short { color:#ff5a5f; }

/* Push is the red driver-risk control; Attack is the gold engine/fuel control. */
.strategy-buttons button[data-value="push"] { color:#ff5a5f; }
.strategy-buttons button[data-value="attack"] { color:#ff9f43; }
.strategy-buttons button[data-value="push"].active { border-color:#d63f45; background:#321719; color:#ff7a7e; }
.strategy-buttons button[data-value="attack"].active { border-color:#d97720; background:#33210f; color:#ffbd73; }
.strategy-risk { margin-top:5px; color:var(--muted); font:700 10px ui-monospace, monospace; }
.strategy-risk strong { color:#efc36a; }

.fastest-lap-row { box-shadow: inset 3px 0 0 #b46cff; }
.fastest-lap-badge {
  margin-left: 5px;
  color: #d5a2ff;
  font: 800 8px ui-monospace, monospace;
  white-space: nowrap;
}
.focus-great { color: #7ee6a8; }
.focus-poor { color: #ffc56f; }
.focus-out { color: #ff8585; }
.focus-normal { color: #a9b1b7; }

.track-control {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #c9d0d5;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.track-control select {
  min-height: 36px;
  min-width: 150px;
  border: 1px solid #4b535a;
  border-radius: 6px;
  background: #15191c;
  color: #f1f3f4;
  padding: 6px 30px 6px 9px;
  font: 700 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  cursor: pointer;
}
.track-control select:focus { outline: 1px solid var(--accent); outline-offset: 1px; }

@media (max-width: 700px) {
  .track-control { width: 100%; }
  .track-control select { flex: 1; min-width: 0; }
}

/* Drifting discipline */
.race-control-state.drift {
  color: #9be9ff;
  background: #13252c;
}
.drift-row {
  grid-template-columns: 28px 12px minmax(0, 1fr) 64px;
}
.drift-row .drift-score {
  text-align: right;
  color: #f4d66d;
  font: 900 14px ui-monospace, SFMono-Regular, Menlo, monospace;
}
.drift-winner {
  box-shadow: inset 3px 0 0 #75d18a;
  background: #17251d;
}
.drift-live-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin-top: 7px;
}
.drift-live-metrics span {
  border: 1px solid #2d3439;
  border-radius: 3px;
  background: #151a1d;
  padding: 6px 5px;
  text-align: center;
  color: #bfc8ce;
  font: 800 9px ui-monospace, SFMono-Regular, Menlo, monospace;
}
.drift-driver-card .pit-status {
  margin-top: 8px;
  color: #9be9ff;
  font-weight: 800;
  letter-spacing: .035em;
}

@media (max-width: 700px) {
  .drift-row { grid-template-columns: 24px 10px minmax(0, 1fr) 54px; }
  .drift-live-metrics { grid-template-columns: 1fr; }
}

/* Rally discipline */
.race-control-state.rally {
  color: #9eeef2;
  background: #1f2820;
}
.rally-row {
  grid-template-columns: 28px 12px minmax(0, 1fr) 74px 52px 44px;
}
.rally-row .rally-time {
  color: #f3d980;
  font-weight: 900;
}
.rally-row .rally-progress {
  color: #9eeef2;
}
.rally-row .rally-penalty {
  color: #a9d7a8;
}
.rally-winner {
  box-shadow: inset 3px 0 0 #75d18a;
  background: #17251d;
}
.rally-live-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin-top: 7px;
}
.rally-live-metrics span {
  border: 1px solid #34372f;
  border-radius: 3px;
  background: #191b17;
  padding: 6px 5px;
  text-align: center;
  color: #d1d0bc;
  font: 800 9px ui-monospace, SFMono-Regular, Menlo, monospace;
}
.rally-driver-card .pit-status {
  margin-top: 8px;
  color: #d6c88d;
  font-weight: 800;
  letter-spacing: .035em;
}

@media (max-width: 700px) {
  .rally-row { grid-template-columns: 24px 10px minmax(0, 1fr) 64px 44px 40px; }
  .rally-live-metrics { grid-template-columns: 1fr; }
}

/* App section navigation */
.brand-block { min-width: 210px; }
.app-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  background: #171b1e;
  border-radius: 6px;
}
.app-tab {
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  padding: 6px 12px;
  font: 800 11px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.app-tab:hover { color: var(--text); background: #22282d; }
.app-tab.active { color: #ffe49a; border-color: #665a33; background: #332d1e; }
.app-view[hidden] { display: none !important; }

/* Track editor */
.track-editor-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 12px;
  align-items: start;
}
.editor-preview-panel { min-width: 0; }
.editor-preview-head {
  min-height: 46px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.editor-preview-head > div:first-child { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#editorPreviewTitle {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font: 900 13px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .07em;
}
#editorPreviewMeta { color: var(--muted); font: 700 10px ui-monospace, SFMono-Regular, Menlo, monospace; }
.editor-preview-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 22px;
  padding: 3px 7px;
  border: 1px solid #343b41;
  border-radius: 999px;
  background: #171b1e;
  color: #cbd2d6;
  font: 800 9px ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.legend-chip::before { content: ""; width: 13px; height: 4px; border-radius: 4px; background: currentColor; }
.legend-chip.road { color: #e9ecef; }
.legend-chip.race-line { color: #ff5555; }
.legend-chip.start-line { color: #54ed68; }
.legend-chip.pit-line { color: #ff9a2e; }
.editor-canvas-shell {
  width: 100%;
  border: 1px solid var(--line);
  border-top: 0;
  background: #fff;
  overflow: hidden;
}
#trackEditorCanvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1280 / 760;
  background: #fff;
  touch-action: none;
  cursor: crosshair;
}
.editor-map-note {
  border: 1px solid var(--line);
  border-top: 0;
  background: #161a1d;
  padding: 8px 10px;
  color: var(--muted);
  font: 700 10px ui-monospace, SFMono-Regular, Menlo, monospace;
  line-height: 1.5;
}
.editor-map-note strong { color: #dce2e5; }
.editor-sidebar { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.editor-panel-body { padding: 10px; }
.editor-field,
.editor-range-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #c9d0d5;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.editor-field input[type="text"],
.editor-field input[type="number"] {
  width: 100%;
  min-height: 38px;
  border: 1px solid #454d54;
  border-radius: 5px;
  background: #15191c;
  color: var(--text);
  padding: 7px 9px;
  font-size: 13px;
  text-transform: none;
  letter-spacing: normal;
}
.editor-field input[type="text"]:focus,
.editor-field input[type="number"]:focus { outline: 1px solid var(--accent); outline-offset: 1px; }
.editor-button-grid { display: grid; gap: 5px; margin-top: 8px; }
.editor-button-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.editor-button-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.editor-panel button,
.editor-file-button {
  min-height: 36px;
  border: 1px solid #3a4249;
  border-radius: 4px;
  background: #252b30;
  color: var(--text);
  padding: 7px 9px;
  font-size: 11px;
  font-weight: 750;
}
.editor-panel button:hover,
.editor-file-button:hover { background: #30373d; }
.editor-panel button:disabled { opacity: .42; cursor: not-allowed; }
.editor-file-button {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
  cursor: pointer;
}
.editor-file-button input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.editor-tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.editor-tool {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
}
.editor-tool.active { border-color: var(--accent); background: #3a3320; color: #ffe49a; }
.tool-swatch { width: 18px; height: 7px; border-radius: 4px; flex: 0 0 auto; }
.tool-swatch.road { background: #070707; border: 1px solid #777; }
.tool-swatch.racing { background: #f00; }
.tool-swatch.best { background: #00b879; }
.tool-swatch.normal { background: #ffd21f; border: 1px solid #7a6710; }
.tool-swatch.worst { background: #ff2e2e; }
.tool-swatch.escape { background: #ff7900; border: 1px dashed #9a4a00; }
.tool-swatch.pit { background: #ff7900; }
.tool-swatch.start { background: #00e629; }
.editor-help {
  min-height: 34px;
  margin: 9px 0 7px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.editor-switch-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  color: #c3cbd0;
  font-size: 11px;
  font-weight: 700;
}
.editor-range-row + .editor-range-row { margin-top: 10px; }
.editor-range-row span { display: flex; justify-content: space-between; gap: 8px; }
.editor-range-row strong { color: #f0d481; font: 800 11px ui-monospace, monospace; }
.editor-range-row input[type="range"] { width: 100%; accent-color: var(--accent); }
.editor-selection {
  min-height: 31px;
  padding: 7px 8px;
  border: 1px solid #30373c;
  border-radius: 4px;
  background: #15191c;
  color: var(--muted);
  font: 700 10px ui-monospace, SFMono-Regular, Menlo, monospace;
}
.editor-validation {
  border-left: 3px solid #b78b3f;
  background: #211d15;
  padding: 8px 9px;
  color: #dcc995;
  font-size: 11px;
  line-height: 1.5;
}
.editor-validation.valid { border-left-color: var(--green); background: #16221a; color: #aee7bb; }
.editor-validation.error { border-left-color: var(--red); background: #281819; color: #f0afac; }
.editor-primary {
  width: 100%;
  border-color: #7c6930 !important;
  background: #3a3320 !important;
  color: #ffe49a !important;
  font-weight: 900 !important;
}
.editor-export-panel #editorDownloadBtn { width: 100%; margin-top: 6px; }
.editor-status {
  min-height: 16px;
  margin-top: 8px;
  color: var(--muted);
  font: 700 10px ui-monospace, SFMono-Regular, Menlo, monospace;
  line-height: 1.4;
}
.editor-status.success { color: var(--green); }
.editor-status.error { color: var(--red); }

@media (max-width: 1180px) {
  .topbar { align-items: center; flex-wrap: wrap; }
  .app-tabs { order: 3; width: 100%; }
  .app-tab { flex: 1; }
  .track-editor-layout { grid-template-columns: 1fr; }
  .editor-sidebar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editor-export-panel { grid-column: span 2; }
}
@media (max-width: 700px) {
  .brand-block { min-width: 0; }
  .editor-preview-head { align-items: flex-start; flex-direction: column; }
  .editor-preview-badges { justify-content: flex-start; }
  .editor-sidebar { grid-template-columns: 1fr; }
  .editor-export-panel { grid-column: auto; }
  .editor-tool-grid { grid-template-columns: 1fr; }
  .editor-size-grid { grid-template-columns: 1fr; }
  .editor-button-grid.three { grid-template-columns: 1fr; }
}

/* True Track Editor split view: rendered result on the left, interactive geometry editor on the right. */
.track-editor-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.editor-render-pane,
.editor-work-pane { min-width: 0; }
.editor-pane-head {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.editor-pane-head > div:first-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.editor-pane-kicker {
  color: var(--accent);
  font: 900 9px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .14em;
}
.editor-pane-head strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font: 900 13px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .07em;
}
.editor-pane-head > div:first-child > span:last-child,
#editorPreviewMeta {
  color: var(--muted);
  font: 700 10px ui-monospace, SFMono-Regular, Menlo, monospace;
}
#trackPreviewCanvas,
#trackEditorCanvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1280 / 760;
}
#trackPreviewCanvas {
  background: #15191b;
  cursor: default;
}
#trackEditorCanvas {
  background: #f7f8f9;
  touch-action: none;
  cursor: crosshair;
}
.preview-shell,
.work-shell {
  border: 1px solid var(--line);
  border-top: 0;
  overflow: hidden;
}
.work-shell {
  background: #f7f8f9;
  box-shadow: inset 0 0 0 1px #dde2e5;
}
.editor-work-head .editor-quick-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 5px;
}
.editor-quick-actions button {
  min-height: 32px;
  border: 1px solid #3a4249;
  border-radius: 4px;
  background: #252b30;
  color: var(--text);
  padding: 6px 10px;
  font-size: 10px;
  font-weight: 800;
}
.editor-quick-actions button:disabled { opacity: .42; cursor: not-allowed; }
.editor-controls-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
  align-items: start;
}
.editor-controls-grid .editor-panel { margin: 0; min-width: 0; }
.editor-track-panel,
.editor-layer-panel { min-height: 206px; }
.editor-geometry-panel,
.editor-points-panel { min-height: 158px; }
.editor-validation-panel,
.editor-export-panel { min-height: 128px; }
.editor-point-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }


.editor-canvas-size-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  color: #dce2e5;
  font: 800 10px ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.editor-canvas-size-head strong { color: #f0d481; font-size: 11px; }
.editor-size-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 7px; }
.editor-canvas-actions { margin-top: 7px; }
.editor-grow-track { width: 100%; margin-top: 6px; }
.editor-canvas-help { margin: 7px 0 12px; }
.editor-canvas-help strong { color: #f0d481; }

/* Older sidebar/layout selectors are intentionally superseded by the split workbench. */
#trackEditorView .track-editor-layout,
#trackEditorView .editor-sidebar { display: none; }

@media (max-width: 1120px) {
  .track-editor-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .editor-pane-head { align-items: flex-start; flex-direction: column; }
  .editor-preview-badges { justify-content: flex-start; }
  .editor-work-head .editor-quick-actions { width: 100%; }
  .editor-quick-actions button { flex: 1; }
  .editor-controls-grid { grid-template-columns: 1fr; }
  .editor-track-panel,
  .editor-layer-panel,
  .editor-geometry-panel,
  .editor-points-panel,
  .editor-validation-panel,
  .editor-export-panel { min-height: 0; }
}
@media (max-width: 760px) {
  .track-editor-split { grid-template-columns: 1fr; }
  .editor-controls-grid { grid-template-columns: 1fr; }
}

.legend-chip.game-render { border-color: #6a737a; color: #dbe2e6; }
.legend-chip.discipline { border-color: #d0a91f; color: #f4d851; }

/* Track editor: racing line is a permanent child of the road geometry. */
.editor-fixed-constraint {
  cursor: default;
  user-select: none;
}
.editor-fixed-constraint .constraint-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff1f1f;
  display: inline-block;
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.18);
}

/* Track features + cached map library */
.tool-swatch.drs { background: #00b8ff; }
.editor-field select {
  width: 100%;
  min-height: 38px;
  border: 1px solid #454d54;
  border-radius: 5px;
  background: #15191c;
  color: var(--text);
  padding: 7px 9px;
  font-size: 13px;
  text-transform: none;
  letter-spacing: normal;
}
.editor-field select:focus { outline: 1px solid var(--accent); outline-offset: 1px; }
.editor-feature-note {
  color: #c9d0d5;
  font-size: 11px;
  line-height: 1.5;
  margin-bottom: 9px;
}
.editor-feature-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 5px 0 7px;
  color: #c9d0d5;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.editor-feature-head button { min-height: 30px; padding: 4px 8px; }
.editor-feature-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.editor-feature-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid #30373c;
  border-radius: 4px;
  background: #15191c;
  padding: 6px 7px;
  color: #bfefff;
  font: 700 10px ui-monospace, SFMono-Regular, Menlo, monospace;
}
.editor-feature-row button {
  min-width: 30px;
  min-height: 28px;
  padding: 0;
  font-size: 16px;
}
.editor-empty-feature {
  display: block;
  border: 1px dashed #394047;
  border-radius: 4px;
  padding: 7px;
  color: var(--muted);
  font: 700 10px ui-monospace, SFMono-Regular, Menlo, monospace;
}
.editor-library-panel .editor-primary { margin-bottom: 8px; }
.editor-features-panel,
.editor-library-panel { min-height: 170px; }

.empty-state {
  padding: 18px 14px;
  color: #9ca7ae;
  font: 700 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  line-height: 1.5;
  text-align: center;
  border: 1px dashed #394149;
  background: rgba(255,255,255,.02);
}


/* Debug inspector — authored racecraft/map diagnostics */
.debug-inspector-panel { border-color: #3d464d; }
.debug-summary { padding: 9px 10px 8px; border-bottom: 1px solid #30373c; }
.debug-line-legend { display:flex; flex-wrap:wrap; gap:6px 10px; margin-bottom:8px; color:#d7dde1; font:800 9px ui-monospace, SFMono-Regular, Menlo, monospace; }
.debug-line-legend span { display:inline-flex; align-items:center; gap:5px; }
.debug-line-legend i { display:inline-block; width:18px; height:3px; border-radius:3px; }
.debug-track-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 10px; color:#9ea9b0; font:700 9px ui-monospace, SFMono-Regular, Menlo, monospace; }
.debug-track-grid span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.debug-track-grid strong { color:#edf1f3; }
.debug-track-grid strong.ok { color:#58df8d; }
.debug-track-grid strong.bad { color:#ff5068; }
.debug-warning,.debug-empty { color:#ffbd4a; padding:4px 0 8px; font:800 10px ui-monospace, SFMono-Regular, Menlo, monospace; }
.debug-cars { max-height:440px; overflow:auto; }
.debug-car-row { padding:8px 10px; border-bottom:1px solid #2b3237; background:rgba(255,255,255,.012); }
.debug-car-row:last-child { border-bottom:0; }
.debug-car-head { display:flex; align-items:center; justify-content:space-between; gap:8px; color:#f1f4f5; font:900 10px ui-monospace, SFMono-Regular, Menlo, monospace; }
.debug-car-head span { display:flex; align-items:center; min-width:0; gap:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.debug-car-head b { width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
.debug-car-meta { margin-top:4px; color:#aeb8be; font:700 9px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap:anywhere; }
.debug-busy-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:3px; margin-top:5px; }
.debug-busy-grid span { padding:2px 3px; border:1px solid #344047; border-radius:3px; color:#67db91; text-align:center; font:800 8px ui-monospace, SFMono-Regular, Menlo, monospace; }
.debug-busy-grid span.busy { color:#ff5a68; border-color:#5b343a; background:rgba(255,70,85,.06); }
.debug-busy-grid span.free { color:#67db91; }
@media (max-width: 900px) { .debug-cars { max-height:320px; } }

/* Drift Top 32 bracket */
.drift-bracket-match {
  border-bottom: 1px solid #2b3135;
  padding: 7px 8px;
  background: #121618;
}
.drift-bracket-match.current {
  background: #172329;
  box-shadow: inset 3px 0 0 #9be9ff;
}
.drift-match-head {
  display:flex; justify-content:space-between; gap:8px; margin-bottom:4px;
  color:#8f9aa1; font:800 9px ui-monospace,SFMono-Regular,Menlo,monospace;
}
.drift-match-head strong { color:#9be9ff; }
.drift-match-driver {
  display:grid; grid-template-columns:22px 9px minmax(0,1fr) 42px; align-items:center; gap:6px;
  min-height:32px; color:#d9dfe2;
}
.drift-match-driver.winner { color:#9ee7ac; }
.drift-match-driver .seed { color:#89949a; font:900 10px ui-monospace,monospace; text-align:right; }
.drift-match-driver .dot { width:8px; height:8px; border-radius:50%; }
.drift-match-driver .name { min-width:0; font:800 11px ui-sans-serif,system-ui; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.drift-match-driver .name small { display:block; color:#78848b; font:700 8px ui-monospace,monospace; overflow:hidden; text-overflow:ellipsis; }
.drift-match-driver b { text-align:right; color:inherit; font:900 11px ui-monospace,monospace; }

/* Drift-specific clip-zone authoring markers */
.tool-swatch.drift-inner { background:#35d6ff; border:1px solid #0f6d82; }
.tool-swatch.drift-outer { background:#ff70c8; border:1px solid #8f2f6c; }
.editor-drift-zone-badge { font-weight:900; letter-spacing:.03em; }
.editor-drift-zone-badge.inner { color:#6fe7ff; }
.editor-drift-zone-badge.outer { color:#ff8fd2; }


/* Vibe Track Editor · piece builder */
.editor-piece-panel{grid-column:span 2}
.editor-piece-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.editor-piece-grid button{min-height:42px;font-size:11px;font-weight:800}
.editor-piece-status-row{display:flex;align-items:center;justify-content:space-between;padding:9px 10px;border:1px solid rgba(255,255,255,.09);border-radius:8px;background:rgba(0,0,0,.18);margin-bottom:10px}
.editor-piece-status-row strong{color:#ffb44a;letter-spacing:.08em}
.editor-piece-status-row strong.closed{color:#53dc86}
.editor-piece-transform-row,.editor-piece-close-row{margin-top:8px}
.editor-piece-start-grid{align-items:end;margin-bottom:6px}
.editor-piece-start-grid>button{min-height:44px}
.editor-start-help{margin-top:4px;margin-bottom:10px}

.editor-piece-panel button:disabled{opacity:.38;cursor:not-allowed}
@media(max-width:980px){.editor-piece-panel{grid-column:auto}.editor-piece-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Vibe Track Editor · reorganized workflow UI */
.vte-shell { display: flex; flex-direction: column; gap: 12px; }
.vte-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, .9fr) minmax(240px, .65fr) minmax(380px, 1.45fr);
  gap: 12px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--line);
  background: #181c1f;
}
.vte-title-block { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.vte-title-block > strong { font-size: 18px; letter-spacing: .06em; }
.vte-title-block > span:last-child { color: var(--muted); font-size: 11px; }
.vte-name-field { display: flex; flex-direction: column; gap: 5px; color: #aeb8be; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.vte-name-field input {
  min-height: 40px;
  width: 100%;
  border: 1px solid #485159;
  border-radius: 6px;
  background: #111518;
  color: var(--text);
  padding: 8px 10px;
  font-size: 14px;
  text-transform: none;
  letter-spacing: normal;
}
.vte-name-field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.vte-toolbar-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.vte-button,
.vte-toolbar .editor-file-button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #414950;
  border-radius: 6px;
  background: #242a2e;
  color: #eef2f4;
  padding: 7px 11px;
  font-size: 11px;
  font-weight: 800;
}
.vte-button:hover,
.vte-toolbar .editor-file-button:hover { background: #30373c; }
.vte-button:disabled { opacity: .42; cursor: not-allowed; }

.vte-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(330px, .72fr);
  gap: 12px;
  align-items: start;
}
.vte-canvas-pane,
.vte-command-pane { min-width: 0; }
.vte-canvas-head {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-bottom: 0;
  background: #1a1e21;
  padding: 10px 12px;
}
.vte-canvas-head > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.vte-canvas-head strong { font-size: 13px; letter-spacing: .05em; }
.vte-eyebrow { color: #89959d; font: 800 9px ui-monospace, monospace; letter-spacing: .11em; }
.vte-status-chip { margin: 0; min-width: 190px; padding: 8px 10px; }
.vte-editor-canvas-shell { border-top: 1px solid var(--line); }
.vte-editor-canvas-shell canvas { width: 100%; height: auto; display: block; }
.vte-canvas-feedback {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-top: 0;
  background: #161a1d;
}
.vte-tool-help {
  grid-column: 1 / -1;
  min-height: 35px;
  display: flex;
  align-items: center;
  border-left: 3px solid var(--accent);
  background: #20201a;
  color: #e8ddbd;
  padding: 7px 9px;
  font-size: 11px;
  line-height: 1.4;
}
.vte-canvas-feedback .editor-status { margin: 0; min-height: 44px; padding: 8px 9px; border: 1px solid #30373c; border-radius: 5px; background: #111518; }
.vte-canvas-feedback .editor-validation { margin: 0; min-height: 44px; padding: 8px 9px; }

.vte-command-pane { display: flex; flex-direction: column; gap: 10px; }
.vte-card {
  border: 1px solid var(--line);
  background: #1a1e21;
}
.vte-card-title {
  border-bottom: 1px solid var(--line);
  padding: 9px 11px;
  color: #a9b3ba;
  font: 900 11px ui-monospace, monospace;
  letter-spacing: .1em;
}
.vte-step {
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr);
  gap: 9px;
  padding: 11px;
  border-bottom: 1px solid #2c3237;
}
.vte-step:last-child { border-bottom: 0; }
.vte-step-number {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #59636a;
  background: #22282c;
  color: #dce2e5;
  font: 900 12px ui-monospace, monospace;
}
.vte-step.current .vte-step-number { border-color: var(--accent); background: #443918; color: #ffe49a; }
.vte-step.complete .vte-step-number { border-color: #4f9e67; background: #17301f; color: #8ce0a5; }
.vte-step.locked { opacity: .62; }
.vte-step-content { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.vte-step-content > strong { font-size: 12px; color: #f0f3f4; }
.vte-step-content > span { color: #929da4; font-size: 10px; line-height: 1.35; }
.vte-action,
.vte-feature-buttons button,
.vte-piece-edit-row button,
.vte-piece-grid button {
  border: 1px solid #414a51;
  border-radius: 6px;
  background: #252b30;
  color: #eef2f4;
  min-height: 40px;
  padding: 7px 9px;
  font-size: 11px;
  font-weight: 850;
}
.vte-action:hover,
.vte-feature-buttons button:hover,
.vte-piece-edit-row button:hover,
.vte-piece-grid button:hover { background: #30383e; }
.vte-action:disabled,
.vte-feature-buttons button:disabled,
.vte-piece-edit-row button:disabled,
.vte-piece-grid button:disabled { opacity: .34; cursor: not-allowed; }
.vte-action-primary { border-color: #b39137; background: #3b321d; color: #ffe7a3; }
.vte-action-primary:hover { background: #4a3e20; }
.vte-action-start {
  min-height: 50px;
  border: 2px solid #00d54f;
  background: #12331e;
  color: #9af7bb;
  font-size: 12px;
  letter-spacing: .035em;
}
.vte-action-start:hover { background: #184528; }
.vte-action-start.active { box-shadow: inset 0 0 0 2px rgba(0,229,91,.16); background: #1d4d2d; color: #c8ffd9; }
.vte-action-race { border-color: #41875a; background: #183421; color: #b8f3c9; min-height: 46px; }
.vte-action-secondary { background: #20262a; }
.vte-inline-field { margin-top: 1px; }
.vte-piece-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.vte-piece-grid button { text-align: left; min-height: 42px; }
.vte-piece-edit-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.vte-piece-edit-row button { min-height: 36px; padding: 5px 4px; font-size: 9px; }
.vte-piece-edit-row .danger { border-color: #6a3e3e; color: #f0b2af; }
.vte-race-start-step { background: rgba(0, 200, 72, .035); }

.vte-feature-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 10px; }
.vte-feature-buttons button { display: inline-flex; align-items: center; justify-content: flex-start; gap: 7px; }
.vte-feature-buttons button.active { border-color: var(--accent); background: #3a3320; color: #ffe49a; }
.vte-feature-summary { padding: 0 10px 10px; }
.vte-finish-card { padding-bottom: 10px; }
.vte-finish-card .vte-card-title { margin-bottom: 10px; }
.vte-finish-card .vte-action { width: calc(100% - 20px); margin: 0 10px 7px; }

.vte-details {
  border: 1px solid var(--line);
  background: #171b1e;
}
.vte-details > summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 14px;
  color: #dce2e5;
  font: 900 11px ui-monospace, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.vte-details > summary::-webkit-details-marker { display: none; }
.vte-details > summary::before { content: "＋"; display: inline-block; width: 22px; color: var(--accent); }
.vte-details[open] > summary::before { content: "−"; }
.vte-details[open] > summary { border-bottom: 1px solid var(--line); }
.vte-advanced-grid { display: grid; grid-template-columns: 1.1fr 1fr .8fr; gap: 10px; padding: 10px; }
.vte-preview-details .editor-render-pane { padding: 10px; }
.vte-preview-details .editor-pane-head { border: 1px solid var(--line); }
.vte-preview-details .preview-shell { border-top: 0; }
.vte-preview-details canvas { width: 100%; height: auto; display: block; }

@media (max-width: 1240px) {
  .vte-toolbar { grid-template-columns: 1fr 1fr; }
  .vte-toolbar-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .vte-workspace { grid-template-columns: minmax(0, 1.4fr) minmax(320px, .8fr); }
  .vte-advanced-grid { grid-template-columns: 1fr 1fr; }
  .vte-library-panel { grid-column: 1 / -1; }
}
@media (max-width: 920px) {
  .vte-toolbar { grid-template-columns: 1fr; }
  .vte-toolbar-actions { grid-column: auto; }
  .vte-workspace { grid-template-columns: 1fr; }
  .vte-command-pane { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .vte-build-card { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .vte-command-pane, .vte-advanced-grid { grid-template-columns: 1fr; }
  .vte-piece-edit-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vte-feature-buttons { grid-template-columns: 1fr; }
  .vte-canvas-feedback { grid-template-columns: 1fr; }
  .vte-tool-help { grid-column: auto; }
  .vte-toolbar-actions > * { flex: 1 1 130px; }
  .vte-status-chip { min-width: 0; }
}

/* --- Optional Vibe Firebase account + cloud map library ------------------- */
.vibe-account-btn {
  border: 1px solid #4b5660;
  background: #20262b;
  color: #e9eef1;
  border-radius: 6px;
  padding: 8px 12px;
  min-height: 36px;
  font-weight: 800;
  white-space: nowrap;
}
.vibe-account-btn:hover { background: #2a3238; }
.vibe-account-btn.signed-in { border-color: #4d8a61; background: #1b3022; color: #c7f1d2; }
.vibe-account-panel {
  position: absolute;
  z-index: 50;
  top: 70px;
  right: 16px;
  width: min(390px, calc(100% - 32px));
  border: 1px solid #3b454c;
  border-radius: 8px;
  background: #171b1e;
  box-shadow: 0 16px 46px rgba(0,0,0,.48);
  padding: 12px;
}
.vibe-account-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding-bottom: 10px; border-bottom: 1px solid #2e353a; }
.vibe-account-head div { display: flex; flex-direction: column; gap: 2px; }
.vibe-account-head span { color: #8d99a1; font: 800 9px ui-monospace, monospace; letter-spacing: .12em; }
.vibe-account-head strong { font-size: 17px; letter-spacing: .06em; }
.vibe-account-head button { border: 0; background: transparent; color: #aab3b9; font-size: 25px; line-height: 1; padding: 0 4px; }
#vibeAccountSignedOut { display: grid; gap: 9px; padding-top: 11px; }
#vibeAccountSignedOut p { margin: 0 0 2px; color: #aab3b9; font-size: 12px; line-height: 1.45; }
#vibeAccountSignedOut label { display: grid; gap: 5px; color: #9da7ad; font-size: 11px; font-weight: 700; }
#vibeAccountSignedOut input {
  width: 100%; min-height: 38px; border: 1px solid #3b444b; background: #101315; color: #f4f6f7;
  border-radius: 5px; padding: 8px 10px;
}
.vibe-account-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.vibe-account-actions button, #vibeSignOutBtn {
  border: 1px solid #3d474e; background: #252c31; color: #edf1f3; border-radius: 5px; min-height: 38px; padding: 7px 10px; font-weight: 800;
}
.vibe-account-actions .primary { border-color: #8d7533; background: #3d321c; color: #ffe6a0; }
.link-button { border: 0; background: transparent; color: #c7ad63; text-align: left; padding: 3px 0; font-size: 11px; }
#vibeAccountSignedIn { padding-top: 12px; display: grid; gap: 10px; }
#vibeAccountSignedIn[hidden] { display: none; }
.vibe-account-user { display: grid; gap: 3px; padding: 10px; border: 1px solid #2f393f; border-radius: 5px; background: #111517; }
.vibe-account-user span { color: #8f9aa1; font-size: 10px; }
.vibe-account-user strong { overflow-wrap: anywhere; }
.vibe-account-status { min-height: 16px; margin-top: 9px; color: #9ea8ae; font-size: 11px; }
.vibe-account-status.success { color: #86d69c; }
.vibe-account-status.error { color: #f08b86; }

.race-cloud-library {
  border: 1px solid var(--line);
  border-top: 0;
  background: #171c1f;
  padding: 10px;
}
.race-cloud-head { display: flex; justify-content: space-between; gap: 15px; align-items: center; margin-bottom: 8px; }
.race-cloud-head > div { display: flex; gap: 8px; align-items: baseline; }
.cloud-kicker { color: #7f8c94; font: 800 9px ui-monospace, monospace; letter-spacing: .1em; }
.race-cloud-head > span { color: #909ba2; font-size: 11px; text-align: right; }
.race-cloud-controls { display: grid; grid-template-columns: minmax(220px, 1fr) auto auto; gap: 7px; align-items: end; }
.race-cloud-controls label { display: grid; gap: 4px; color: #909ba2; font-size: 10px; font-weight: 700; }
.race-cloud-controls select { min-width: 0; width: 100%; min-height: 37px; border: 1px solid #39434a; border-radius: 4px; background: #111517; color: #edf1f3; padding: 6px 8px; }
.race-cloud-controls button { min-height: 37px; border: 1px solid #3d474e; border-radius: 4px; background: #252c31; color: #edf1f3; padding: 6px 10px; font-weight: 800; }
.race-cloud-controls button.primary { border-color: #4b875f; background: #1c3925; color: #c2f1cf; }
.race-cloud-controls button:disabled, .race-cloud-controls select:disabled { opacity: .48; cursor: not-allowed; }
.shared-map-meta { margin-top: 7px; color: #87939a; font-size: 10px; line-height: 1.4; }

.vte-save-section-label { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 1px 10px 7px; }
.vte-save-section-label span { font: 900 10px ui-monospace, monospace; letter-spacing: .12em; color: #c7d0d5; }
.vte-save-section-label em { font-style: normal; color: #829099; font-size: 9px; }
.vte-cloud-divider { height: 1px; background: #313a40; margin: 8px 10px 10px; }
.vte-action-cloud { border-color: #4b6e86; background: #1b2c37; color: #c7e8fa; }
.vte-action-share { border-color: #665c3d; background: #29251a; color: #e9dcae; }
.vte-action-share.shared { border-color: #4b875f; background: #1b3824; color: #c6f3d2; }
.vte-cloud-map-field { margin: 8px 10px 7px; }
.vte-cloud-map-field select { width: 100%; }
.vte-cloud-privacy { margin: 8px 10px 3px; padding: 8px; border: 1px solid #2f3940; border-radius: 4px; background: #14191c; color: #8f9ba2; font-size: 10px; line-height: 1.45; }

@media (max-width: 850px) {
  .vibe-account-panel { top: 122px; right: 10px; }
  .race-cloud-head { align-items: flex-start; flex-direction: column; gap: 4px; }
  .race-cloud-head > span { text-align: left; }
  .race-cloud-controls { grid-template-columns: 1fr 1fr; }
  .race-cloud-controls label { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .race-cloud-controls { grid-template-columns: 1fr; }
  .race-cloud-controls label { grid-column: auto; }
  .vibe-account-actions { grid-template-columns: 1fr; }
}
.app { position: relative; }

/* Racing-line editing is a first-class Vibe Track Editor control, not an advanced hidden option. */
.vte-racing-lines-card {
  border-color: rgba(255, 206, 73, .34);
}
.vte-racing-lines-card .vte-card-title {
  color: #ffd866;
}
.vte-racing-line-tools {
  margin-top: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.vte-racing-line-tools .editor-tool {
  min-height: 46px;
  font-weight: 800;
}
.vte-racing-line-tools .editor-tool[data-editor-tool="road"] {
  grid-column: 1 / -1;
}

/* Track selection is a visual map browser instead of a dropdown. */
.track-preset-compat { display: none !important; }
.track-map-library {
  border: 1px solid var(--line);
  border-top: 0;
  background: #151a1d;
  padding: 11px 12px 12px;
}
.track-map-library-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 9px;
}
.track-map-library-head > div { display: flex; align-items: baseline; gap: 9px; }
.track-map-kicker { color: #7f8c94; font: 900 9px ui-monospace, monospace; letter-spacing: .12em; }
.track-map-library-head strong { color: #edf1f3; font: 900 12px ui-monospace, monospace; letter-spacing: .07em; }
.track-map-library-head > span { color: #88949b; font-size: 10px; text-align: right; }
.track-map-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 9px;
}
.track-map-card {
  min-width: 0;
  display: grid;
  grid-template-rows: 104px auto;
  padding: 0;
  overflow: hidden;
  text-align: left;
  border: 1px solid #344047;
  border-radius: 7px;
  background: #111618;
  color: #edf1f3;
  cursor: pointer;
}
.track-map-card.active {
  border-color: #b4963e;
  box-shadow: inset 0 0 0 1px rgba(255,210,89,.22);
  background: #181a17;
}
.track-card-preview {
  display: grid;
  place-items: center;
  min-width: 0;
  background: #183f27;
  border-bottom: 1px solid #2f393f;
  overflow: hidden;
}
.track-card-preview-svg { width: 100%; height: 100%; display: block; }
.track-card-preview-border { fill: none; stroke: #e0e4e5; stroke-width: 11; stroke-linejoin: round; stroke-linecap: round; }
.track-card-preview-road { fill: none; stroke: #474d51; stroke-width: 7; stroke-linejoin: round; stroke-linecap: round; }
.track-card-preview-start { stroke: #39e16f; stroke-width: 2.4; }
.track-card-body { display: grid; gap: 5px; padding: 8px 9px 9px; min-width: 0; }
.track-card-source { color: #7d8a92; font: 900 8px ui-monospace, monospace; letter-spacing: .11em; }
.track-card-name { display: block; color: #f2f4f5; font-size: 13px; line-height: 1.15; overflow-wrap: anywhere; }
.track-map-card.active .track-card-name::after { content: "  · ACTIVE"; color: #f2d16b; font: 900 8px ui-monospace, monospace; letter-spacing: .07em; }
.track-card-features { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.track-feature {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 6px;
  border: 1px solid #354047;
  border-radius: 999px;
  background: #1a2023;
  color: #aeb7bc;
  font: 800 8px ui-monospace, monospace;
  white-space: nowrap;
}
.track-feature.drs { border-color: #446b59; color: #97ddb5; }
.track-feature.drift { border-color: #6d5033; color: #ffc17c; }
.track-feature.pit { border-color: #4d5e69; color: #b9d0dc; }
.track-feature.oval { border-color: #6d5d35; color: #ead482; }
.track-map-empty {
  grid-column: 1 / -1;
  padding: 18px;
  border: 1px dashed #354047;
  border-radius: 6px;
  color: #89959c;
  text-align: center;
  font-size: 11px;
}
@media (hover:hover) and (pointer:fine) {
  .track-map-card:hover { border-color: #66747c; background: #171d20; }
  .track-map-card.active:hover { border-color: #c4a64b; }
}
@media (max-width: 700px) {
  .track-map-library-head { align-items: flex-start; flex-direction: column; gap: 3px; }
  .track-map-library-head > span { text-align: left; }
  .track-map-grid { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); }
  .track-map-card { grid-template-rows: 90px auto; }
}

/* Shared map card browser */
.cloud-compat-select { display: none !important; }
.shared-map-library { display: grid; gap: 10px; }
.shared-map-grid { min-height: 132px; }
.shared-map-card { position: relative; }
.shared-map-card.selected {
  border-color: #6fc3df;
  box-shadow: inset 0 0 0 1px rgba(111,195,223,.22);
  background: #151d20;
}
.shared-map-card.selected .track-card-name::after {
  content: "  · SELECTED";
  color: #8edcf3;
  font: 900 8px ui-monospace, monospace;
  letter-spacing: .07em;
}
.shared-map-library-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 2px;
}
.shared-map-library-footer .shared-map-meta {
  min-width: 220px;
  flex: 1 1 360px;
}
.shared-map-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
}
.shared-map-pager {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.shared-map-pager button,
.shared-map-actions > button {
  min-height: 36px;
}
#sharedMapPageLabel {
  min-width: 64px;
  text-align: center;
  color: #aab5bb;
  font: 900 9px ui-monospace, monospace;
  letter-spacing: .06em;
}
.shared-map-card-updated {
  color: #7f8b92;
  font: 800 8px ui-monospace, monospace;
  letter-spacing: .04em;
}
@media (max-width: 700px) {
  .shared-map-library-footer { align-items: stretch; }
  .shared-map-actions { justify-content: flex-start; width: 100%; }
}

/* ================================================================
   2026 RESPONSIVE UI OVERHAUL
   Desktop cockpit · tablet workbench · true mobile race view
   Simulation/gameplay code is intentionally untouched.
   ================================================================ */

:root {
  --ui-radius: 12px;
  --ui-radius-sm: 8px;
  --ui-surface: #171b1f;
  --ui-surface-raised: #1d2227;
  --ui-surface-soft: #121619;
  --ui-line: #323a41;
  --ui-line-soft: #272e34;
  --ui-gold: #f0c54f;
  --ui-cyan: #8fdff4;
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
button, input, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.app {
  width: 100%;
  max-width: 1920px;
  padding: clamp(10px, 1.2vw, 20px);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  align-items: center;
  min-height: 66px;
  margin-bottom: 14px;
  padding: 9px 10px;
  border: 1px solid rgba(86, 98, 108, .42);
  border-radius: var(--ui-radius);
  background: rgba(18, 21, 24, .94);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.topbar h1 { font-size: clamp(18px, 1.7vw, 27px); line-height: 1; }
.brand-block { flex: 0 1 310px; min-width: 190px; }
.sub { margin-top: 5px; font-size: 11px; }
.app-tabs { flex: 0 0 auto; border-radius: 9px; background: #121619; }
.app-tab { min-height: 40px; border-radius: 7px; padding: 7px 14px; }
.race-meta {
  min-width: 0;
  flex: 1 1 auto;
  justify-content: flex-end;
  gap: 7px;
  white-space: normal;
}
.race-meta > span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid #303840;
  border-radius: 999px;
  background: #12171a;
  color: #aeb8be;
  font-size: 10px;
  white-space: nowrap;
}
.race-meta #statusText { border-color: #5e5230; background: #282315; color: #f0cf6b; }
.vibe-account-btn { min-height: 40px !important; border-radius: 8px !important; }

.layout {
  grid-template-columns: minmax(0, 1fr) clamp(330px, 22vw, 390px);
  gap: 14px;
  align-items: start;
}
.race-panel { min-width: 0; }
.race-stage-shell {
  position: relative;
  overflow: hidden;
  border: 1px solid #394249;
  border-radius: var(--ui-radius) var(--ui-radius) 0 0;
  background: #0b0e10;
  box-shadow: 0 14px 36px rgba(0,0,0,.24);
}
#gameCanvas {
  border: 0;
  background: #24492d;
}
.race-stage-badge {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: calc(100% - 24px);
  padding: 6px 9px;
  border: 1px solid rgba(211, 221, 226, .24);
  border-radius: 999px;
  background: rgba(10, 13, 15, .78);
  backdrop-filter: blur(7px);
  color: #f2f4f5;
  pointer-events: none;
}
.race-stage-badge span { color: #7fd89a; font: 900 8px ui-monospace, monospace; letter-spacing: .12em; }
.race-stage-badge strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 900 9px ui-monospace, monospace; letter-spacing: .06em; }

.controls {
  gap: 7px;
  padding: 9px;
  border-color: #394249;
  background: linear-gradient(180deg, #1d2226, #181c20);
  box-shadow: 0 9px 28px rgba(0,0,0,.12);
}
.controls > button { min-height: 40px; border-radius: 7px; font-weight: 800; }
#startBtn { border-color: #4d8b60; background: #1a3924; color: #baf4ca; }
#startBtn:not(:disabled):hover { background: #21482d; }
#pauseBtn { border-color: #5b6269; }
#restartBtn { color: #c9d0d4; }
.series-group {
  flex: 1 1 520px;
  margin-left: 4px;
  gap: 5px;
}
.series-group .series {
  flex: 1 1 auto;
  min-width: max-content;
  border-radius: 999px;
  padding-inline: 12px;
}
.speed-group {
  flex: 0 0 auto;
  gap: 0;
  overflow: hidden;
  margin-left: auto;
  border: 1px solid #3a4249;
  border-radius: 8px;
}
.speed-group .speed { min-width: 42px; border: 0; border-right: 1px solid #3a4249; border-radius: 0; }
.speed-group .speed:last-child { border-right: 0; }
.laps-control {
  min-height: 40px;
  padding: 4px 6px 4px 10px;
  border: 1px solid #394249;
  border-radius: 8px;
  background: #14191c;
}
.laps-control input { min-height: 31px; border-radius: 5px; }
.check { min-height: 40px; padding: 0 5px; }

.sidebar { gap: 10px; position: sticky; top: 92px; }
.panel {
  overflow: hidden;
  border-color: var(--ui-line);
  border-radius: var(--ui-radius-sm);
  background: linear-gradient(180deg, #1b2024, #181c20);
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
}
.panel-title {
  padding: 9px 11px;
  border-color: var(--ui-line-soft);
  background: #151a1d;
  color: #9ba7ae;
  font-size: 10px;
}
.race-control-state { font-size: 12px; }
.race-control-tests button { min-height: 34px; border-radius: 6px; }
.standings { max-height: min(52vh, 560px); }
.row {
  min-height: 41px;
  padding: 6px 9px;
  border-bottom-color: #252c31;
  transition: background .12s ease;
}
.row.player { background: #2a2719; box-shadow: inset 3px 0 0 #c9a947; }
.driver-card { padding: 11px; }
.driver-attributes > div, .vehicle-attributes > div { border-radius: 6px; }
.strategy button { min-height: 36px; border-radius: 6px; }

.track-map-library,
.race-cloud-library {
  margin-top: 12px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: linear-gradient(180deg, #171c20, #13171a);
  padding: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.11);
}
.track-map-library { border-top: 1px solid var(--ui-line); }
.track-map-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.track-map-card {
  grid-template-rows: 116px auto;
  border-radius: 10px;
  border-color: #364149;
  background: #111619;
}
.track-card-body { padding: 9px 10px 10px; }
.track-card-name { font-size: 14px; }
.track-feature { min-height: 22px; padding-inline: 7px; }
.track-import-note {
  margin-top: 10px;
  border: 1px solid #303840;
  border-radius: 8px;
  background: #13171a;
}

.mobile-sheet-head,
.mobile-race-dock,
.mobile-drawer-backdrop { display: none; }

/* Editor polish at large and medium sizes. */
.vte-shell { gap: 14px; }
.vte-toolbar {
  position: sticky;
  top: 92px;
  z-index: 30;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: rgba(24, 29, 33, .96);
  box-shadow: 0 10px 28px rgba(0,0,0,.16);
  backdrop-filter: blur(12px);
}
.vte-workspace { gap: 14px; }
.vte-canvas-pane,
.vte-card,
.vte-details { border-radius: var(--ui-radius); overflow: hidden; }
.vte-canvas-head { border-radius: var(--ui-radius) var(--ui-radius) 0 0; }
.vte-card, .vte-details { border-color: var(--ui-line); background: #171c20; }
.vte-command-pane { gap: 12px; }
.vte-action,
.vte-feature-buttons button,
.vte-piece-edit-row button,
.vte-piece-grid button { min-height: 42px; border-radius: 7px; }

/* Large laptop / small desktop. */
@media (max-width: 1380px) {
  .app { padding: 10px; }
  .topbar { gap: 10px; }
  .brand-block { flex-basis: 250px; }
  .sub { display: none; }
  .layout { grid-template-columns: minmax(0, 1fr) 330px; gap: 10px; }
  .series-group { flex-basis: 100%; order: 10; margin-left: 0; }
  .standings { max-height: 420px; }
  .track-map-grid { grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); }
}

/* Tablet: game first, management panels below in a clean two-column workbench. */
@media (max-width: 1080px) {
  .topbar { position: relative; top: auto; flex-wrap: wrap; }
  .brand-block { flex: 1 1 260px; }
  .app-tabs { order: 2; }
  .race-meta { order: 3; flex: 1 1 100%; justify-content: flex-start; overflow-x: auto; padding-bottom: 1px; }
  .vibe-account-btn { margin-left: auto; }
  .layout { grid-template-columns: 1fr; }
  .sidebar {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .race-control-panel, .debug-inspector-panel { grid-column: 1 / -1; }
  .standings { max-height: 390px; }
  .vte-toolbar { position: relative; top: auto; }
  .track-map-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

/* Mobile portrait + general phone/tablet compact UI. */
@media (max-width: 900px) {
  html, body { min-height: 100%; }
  .app {
    max-width: none;
    padding: 0 0 calc(64px + env(safe-area-inset-bottom, 0px));
  }
  .topbar {
    position: sticky;
    top: 0;
    z-index: 80;
    min-height: 52px;
    margin: 0;
    padding: calc(7px + env(safe-area-inset-top, 0px)) 8px 7px;
    gap: 6px;
    border-width: 0 0 1px;
    border-radius: 0;
    background: rgba(15, 18, 20, .97);
  }
  .brand-block { flex: 1 1 auto; min-width: 0; }
  .topbar h1 { font-size: clamp(13px, 4vw, 17px); letter-spacing: .09em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sub { display: none; }
  .app-tabs { order: 0; gap: 2px; padding: 2px; border-radius: 7px; }
  .app-tab { min-height: 34px; padding: 5px 8px; font-size: 8px; letter-spacing: .035em; }
  .vibe-account-btn {
    flex: 0 0 auto;
    width: 38px;
    min-height: 36px !important;
    overflow: hidden;
    white-space: nowrap;
    text-indent: -999px;
    position: relative;
    padding: 0 !important;
  }
  .vibe-account-btn::after { content: "☁"; position: absolute; inset: 0; display: grid; place-items: center; text-indent: 0; font-size: 17px; }
  .race-meta {
    order: 5;
    flex: 1 1 100%;
    gap: 5px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 2px 0 0;
  }
  .race-meta::-webkit-scrollbar { display: none; }
  .race-meta > span { flex: 0 0 auto; min-height: 25px; padding: 3px 7px; font-size: 8px; }

  #raceManagerView { min-height: calc(100dvh - 52px); }
  .layout { display: block; }
  .race-panel { width: 100%; }
  .race-stage-shell {
    border-width: 0 0 1px;
    border-radius: 0;
    box-shadow: none;
  }
  .race-stage-badge { left: 8px; top: 8px; padding: 4px 7px; }
  #gameCanvas { width: 100%; max-width: 100%; }

  .controls {
    position: relative;
    z-index: 5;
    padding: 7px;
    gap: 5px;
    border-width: 0 0 1px;
    background: #171c20;
    box-shadow: none;
  }
  .controls > button { flex: 1 1 calc(33.333% - 4px); min-height: 42px; padding: 6px 8px; }
  .series-group {
    order: 20;
    flex: 1 1 100%;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 5px;
    padding: 2px 0;
    scrollbar-width: none;
  }
  .series-group::-webkit-scrollbar { display: none; }
  .series-group .series { flex: 0 0 auto; min-height: 38px; padding-inline: 13px; }
  .laps-control { order: 30; flex: 1 1 auto; min-height: 38px; }
  .speed-group { order: 31; margin-left: 0; }
  .speed-group .speed { min-height: 38px; min-width: 40px; }
  .check { order: 32; }

  .track-map-library,
  .race-cloud-library,
  .track-import-note { margin-left: 8px; margin-right: 8px; }
  .track-map-library,
  .race-cloud-library { border-radius: 10px; }
  .track-map-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .track-map-card { grid-template-rows: 86px auto; border-radius: 8px; }
  .track-card-name { font-size: 12px; }
  .track-feature { min-height: 19px; font-size: 7px; }

  /* Existing desktop sidebar becomes a slide-up management sheet. */
  .sidebar {
    display: block;
    position: fixed;
    z-index: 110;
    left: 0;
    right: 0;
    bottom: calc(58px + env(safe-area-inset-bottom, 0px));
    top: auto;
    max-height: min(72dvh, 650px);
    overflow-y: auto;
    padding: 0 8px 8px;
    background: #111518;
    border-top: 1px solid #3b444b;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -20px 44px rgba(0,0,0,.48);
    transform: translateY(calc(100% + 90px));
    opacity: 0;
    pointer-events: none;
    transition: transform .22s ease, opacity .18s ease;
  }
  .sidebar.mobile-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .sidebar > .panel { display: none; margin: 0; border-radius: 9px; }
  .sidebar > .panel.mobile-panel-target { display: block; }
  .mobile-sheet-head {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 2px 8px;
    background: #111518;
  }
  .mobile-sheet-head > div { display: flex; flex-direction: column; gap: 1px; }
  .mobile-sheet-head span { color: #7e8a91; font: 900 8px ui-monospace, monospace; letter-spacing: .13em; }
  .mobile-sheet-head strong { font: 900 12px ui-monospace, monospace; letter-spacing: .07em; }
  .mobile-sheet-head button {
    width: 40px;
    height: 40px;
    border: 1px solid #3b444b;
    border-radius: 50%;
    background: #20262a;
    color: #eef2f3;
    font-size: 22px;
  }
  .mobile-drawer-backdrop {
    display: block;
    position: fixed;
    z-index: 100;
    inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(2px);
  }
  .mobile-drawer-backdrop[hidden] { display: none; }
  .mobile-race-dock {
    position: fixed;
    z-index: 120;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    min-height: calc(58px + env(safe-area-inset-bottom, 0px));
    padding: 4px 4px env(safe-area-inset-bottom, 0px);
    border-top: 1px solid #364047;
    background: rgba(16, 20, 23, .97);
    backdrop-filter: blur(14px);
    box-shadow: 0 -9px 24px rgba(0,0,0,.24);
  }
  .mobile-race-dock button {
    min-width: 0;
    min-height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #89959c;
    font-size: 8px;
    font-weight: 800;
  }
  .mobile-race-dock button.active { background: #292516; color: #f0d16f; }
  .mobile-race-dock .dock-icon { font-size: 17px; line-height: 1; }
  .standings { max-height: none; overflow-y: visible; }
  .row { min-height: 44px; }
  .driver-attributes, .vehicle-attributes { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Mobile editor stays fully usable rather than inheriting desktop widths. */
  #trackEditorView { padding: 8px; }
  .vte-toolbar { position: relative; top: auto; grid-template-columns: 1fr; padding: 9px; }
  .vte-title-block > strong { font-size: 15px; }
  .vte-toolbar-actions {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .vte-toolbar-actions::-webkit-scrollbar { display: none; }
  .vte-toolbar-actions > * { flex: 0 0 auto; min-height: 42px; }
  .vte-workspace { grid-template-columns: 1fr; }
  .vte-command-pane { display: grid; grid-template-columns: 1fr; }
  .vte-piece-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vte-feature-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vte-advanced-grid { grid-template-columns: 1fr; }
  .vte-canvas-head { gap: 7px; padding: 8px; }
  .vte-status-chip { min-width: 0; }
  .vibe-account-panel { left: 8px; right: 8px; top: 62px; width: auto; max-width: none; }
}

@media (max-width: 520px) {
  .topbar { flex-wrap: wrap; }
  .app-tabs { order: 2; flex: 1 1 auto; }
  .app-tab { flex: 1 1 50%; }
  .race-meta { order: 4; }
  .controls > button { font-size: 12px; }
  .track-map-grid { grid-template-columns: 1fr 1fr; }
  .track-card-body { padding: 7px; }
  .shared-map-actions { width: 100%; }
  .shared-map-pager { width: 100%; justify-content: space-between; }
  .shared-map-pager button { flex: 1; }
  .vte-feature-buttons { grid-template-columns: 1fr; }
}

/* True phone landscape race cockpit. The track consumes the screen; management
   lives in the dock / slide sheet instead of shrinking beside it. */
@media (max-width: 900px) and (orientation: landscape) {
  body.race-view-active:not(.mobile-library-mode) { overflow: hidden; }
  body.race-view-active:not(.mobile-library-mode) .app {
    height: 100dvh;
    padding: 0;
    overflow: hidden;
  }
  body.race-view-active:not(.mobile-library-mode) .topbar {
    position: absolute;
    z-index: 85;
    top: env(safe-area-inset-top, 0px);
    left: env(safe-area-inset-left, 0px);
    right: env(safe-area-inset-right, 0px);
    min-height: 40px;
    padding: 4px 7px;
    border: 0;
    background: linear-gradient(180deg, rgba(8,11,13,.88), rgba(8,11,13,.52), transparent);
    backdrop-filter: none;
    pointer-events: none;
  }
  body.race-view-active:not(.mobile-library-mode) .topbar > * { pointer-events: auto; }
  body.race-view-active:not(.mobile-library-mode) .brand-block,
  body.race-view-active:not(.mobile-library-mode) .app-tabs { display: none; }
  body.race-view-active:not(.mobile-library-mode) .race-meta {
    flex: 1 1 auto;
    padding: 0;
  }
  body.race-view-active:not(.mobile-library-mode) .race-meta > span { background: rgba(12,16,18,.76); }
  body.race-view-active:not(.mobile-library-mode) .vibe-account-btn { display: none; }
  body.race-view-active:not(.mobile-library-mode) #raceManagerView,
  body.race-view-active:not(.mobile-library-mode) .layout,
  body.race-view-active:not(.mobile-library-mode) .race-panel {
    width: 100%;
    height: 100dvh;
    min-height: 0;
  }
  body.race-view-active:not(.mobile-library-mode) .race-panel {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    background: #090c0e;
  }
  body.race-view-active:not(.mobile-library-mode) .race-stage-shell {
    min-height: 0;
    display: grid;
    place-items: center;
    border: 0;
    background: #090c0e;
  }
  body.race-view-active:not(.mobile-library-mode) #gameCanvas {
    width: 100%;
    height: 100%;
    max-height: calc(100dvh - 108px - env(safe-area-inset-bottom, 0px));
    object-fit: contain;
    aspect-ratio: auto !important;
    background: #0a0d0f;
  }
  body.race-view-active:not(.mobile-library-mode) .race-stage-badge { top: 46px; left: calc(8px + env(safe-area-inset-left, 0px)); }
  body.race-view-active:not(.mobile-library-mode) .controls {
    min-height: 50px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 5px calc(5px + env(safe-area-inset-right, 0px)) 5px calc(5px + env(safe-area-inset-left, 0px));
    border: 0;
    border-top: 1px solid #303940;
    scrollbar-width: none;
  }
  body.race-view-active:not(.mobile-library-mode) .controls::-webkit-scrollbar { display: none; }
  body.race-view-active:not(.mobile-library-mode) .controls > button { flex: 0 0 auto; min-height: 39px; min-width: 72px; }
  body.race-view-active:not(.mobile-library-mode) .series-group {
    order: 0;
    flex: 0 0 auto;
    overflow: visible;
    padding: 0;
  }
  body.race-view-active:not(.mobile-library-mode) .series-group .series { min-height: 39px; }
  body.race-view-active:not(.mobile-library-mode) .laps-control,
  body.race-view-active:not(.mobile-library-mode) .check { display: none !important; }
  body.race-view-active:not(.mobile-library-mode) .speed-group { order: 0; flex: 0 0 auto; }
  body.race-view-active:not(.mobile-library-mode) .track-map-library,
  body.race-view-active:not(.mobile-library-mode) .track-import-note,
  body.race-view-active:not(.mobile-library-mode) .race-cloud-library { display: none; }
  body.race-view-active:not(.mobile-library-mode) .mobile-race-dock {
    left: auto;
    width: min(390px, 54vw);
    border: 1px solid #344048;
    border-bottom: 0;
    border-radius: 12px 0 0 0;
    background: rgba(14,18,21,.94);
  }
  body.race-view-active:not(.mobile-library-mode) .sidebar {
    left: auto;
    width: min(430px, 52vw);
    max-height: calc(100dvh - 62px);
    border-left: 1px solid #3b444b;
    border-radius: 14px 0 0 0;
  }
  body.race-view-active.mobile-library-mode { overflow: auto; }
}

/* Pseudo-fullscreen fallback for browsers that reject requestFullscreen(). */
@media (max-width: 900px) {
  body.mobile-pseudo-fullscreen.race-view-active { background: #090c0e; }
  body.mobile-pseudo-fullscreen.race-view-active .topbar { display: none; }
  body.mobile-pseudo-fullscreen.race-view-active #raceManagerView { min-height: 100dvh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; }
}

/* ================================================================
   VIBE RACING MANAGER — COCKPIT UI 2.0
   Deliberately structural/visual: simulation behavior is untouched.
   ================================================================ */
:root {
  --cockpit-bg: #090c0f;
  --cockpit-panel: #12171b;
  --cockpit-panel-2: #171d22;
  --cockpit-panel-3: #0e1316;
  --cockpit-border: #2b353c;
  --cockpit-border-strong: #3c4952;
  --cockpit-text: #f4f7f8;
  --cockpit-muted: #87939b;
  --cockpit-gold: #f0c54f;
  --cockpit-green: #6ee78f;
  --cockpit-cyan: #77d7ee;
  --cockpit-red: #ff6c69;
}

body {
  background:
    radial-gradient(circle at 50% -20%, rgba(70, 91, 104, .16), transparent 36%),
    linear-gradient(180deg, #0a0e11 0%, #090c0f 58%, #07090b 100%);
}

.app {
  max-width: 2200px;
  padding: 0 18px 28px;
}

/* Header becomes a thin application rail instead of a giant boxed header. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 90;
  min-height: 58px;
  margin: 0 -18px 14px;
  padding: 8px 18px;
  border: 0;
  border-bottom: 1px solid #263038;
  border-radius: 0;
  background: rgba(8, 11, 14, .96);
  box-shadow: 0 12px 32px rgba(0,0,0,.28);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.brand-block { flex: 0 0 290px; }
.topbar h1 {
  font-size: 18px;
  letter-spacing: .16em;
  color: #fff;
}
.sub {
  display: block;
  margin-top: 4px;
  color: #65717a;
  font: 700 9px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.app-tabs {
  padding: 3px;
  border: 1px solid #29333a;
  border-radius: 999px;
  background: #0d1215;
}
.app-tab {
  min-height: 36px;
  border: 0;
  border-radius: 999px;
  padding: 7px 16px;
  color: #75828a;
  background: transparent;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}
.app-tab.active {
  background: #252117;
  color: #f7d56f;
  box-shadow: inset 0 0 0 1px #66562b;
}
.vibe-account-btn {
  min-height: 38px !important;
  padding: 7px 13px !important;
  border-radius: 999px !important;
  background: #11181b !important;
  border-color: #334149 !important;
}

/* Main desktop cockpit: dominant track and a true timing tower. */
.layout {
  grid-template-columns: minmax(0, 1fr) clamp(315px, 21vw, 370px);
  gap: 16px;
  align-items: start;
}
.race-panel { min-width: 0; }
.race-stage-shell {
  position: relative;
  overflow: hidden;
  border: 1px solid #3a4851;
  border-radius: 16px;
  background: #05080a;
  box-shadow:
    0 22px 60px rgba(0,0,0,.38),
    inset 0 0 0 1px rgba(255,255,255,.025);
}
.race-stage-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.16), transparent 12%, transparent 82%, rgba(0,0,0,.14));
}
#gameCanvas {
  width: 100%;
  height: auto;
  aspect-ratio: 1280 / 760;
  border: 0;
}
.race-stage-badge {
  left: 16px;
  top: 16px;
  padding: 7px 10px;
  border: 1px solid rgba(123, 219, 153, .4);
  border-radius: 7px;
  background: rgba(8, 13, 15, .86);
  box-shadow: 0 8px 20px rgba(0,0,0,.24);
}
.race-stage-badge span { color: var(--cockpit-green); }
.race-stage-badge strong { font-size: 10px; }
.race-stage-corner {
  position: absolute;
  right: 16px;
  bottom: 14px;
  z-index: 3;
  color: rgba(235,241,244,.47);
  font: 900 8px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .15em;
  pointer-events: none;
}

/* Live HUD lives ON the race feed. */
.race-meta {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  display: grid !important;
  grid-template-columns: repeat(3, auto);
  gap: 5px;
  justify-content: center;
  min-width: 0;
}
.race-meta > span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border: 1px solid rgba(109, 126, 136, .45);
  border-radius: 6px;
  background: rgba(7, 11, 14, .88);
  box-shadow: 0 8px 20px rgba(0,0,0,.24);
  backdrop-filter: blur(8px);
  color: #c0c9ce;
  font: 900 10px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .055em;
  white-space: nowrap;
}
.race-meta #statusText {
  border-color: rgba(240, 197, 79, .55);
  background: rgba(39, 34, 18, .9);
  color: #f6d76f;
}

/* Command deck under the track. */
.controls {
  margin-top: 10px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid #303b43;
  border-radius: 13px;
  background: linear-gradient(180deg, #161c20, #11161a);
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}
.race-actions {
  display: grid;
  grid-template-columns: 1.55fr 1fr 1fr;
  gap: 5px;
  min-width: 260px;
}
.race-actions button {
  min-height: 44px;
  border-radius: 8px;
  border: 1px solid #38444c;
  background: #20272c;
  color: #dfe5e8;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
}
#startBtn {
  background: linear-gradient(180deg, #224a2e, #173720) !important;
  border-color: #4a8d5c !important;
  color: #c8f8d2 !important;
}
#pauseBtn { background: #20272c; }
#restartBtn { color: #9aa6ad; }
.series-group {
  display: grid;
  grid-template-columns: repeat(6, minmax(72px, 1fr));
  gap: 4px;
  margin: 0;
  min-width: 0;
}
.series-group .series {
  min-width: 0;
  min-height: 42px;
  padding: 5px 7px;
  border-radius: 7px;
  border-color: #303a41;
  background: #0f1417;
  color: #7e8b92;
  font-size: 9px;
  font-weight: 900;
  line-height: 1.1;
  white-space: normal;
}
.series-group .series.active {
  border-color: #806d36;
  background: #2b2516;
  color: #f4d26a;
  box-shadow: inset 0 0 0 1px rgba(240,197,79,.12);
}
.laps-control {
  min-height: 44px;
  padding: 4px 5px 4px 9px;
  border-color: #303b43;
  border-radius: 8px;
  background: #0e1316;
  font-size: 9px;
}
.laps-control input { width: 58px; min-height: 32px; }
.speed-group {
  min-height: 44px;
  border-color: #303b43;
  border-radius: 8px;
  background: #0e1316;
}
.speed-group .speed {
  min-width: 38px;
  min-height: 42px;
  background: transparent;
  color: #7f8b92;
  font-size: 10px;
}
.speed-group .speed.active { background: #2a2518; color: #f2cf68; }
.check {
  min-height: 44px;
  padding: 0 7px;
  border: 1px solid #303b43;
  border-radius: 8px;
  background: #0e1316;
  font-size: 10px;
}

/* Timing tower. */
.sidebar {
  position: sticky;
  top: 74px;
  gap: 10px;
}
.panel {
  border: 1px solid #2d3941;
  border-radius: 11px;
  background: #11171a;
  box-shadow: 0 14px 32px rgba(0,0,0,.18);
}
.panel-title {
  position: relative;
  min-height: 36px;
  display: flex;
  align-items: center;
  padding: 8px 11px 8px 16px;
  border-bottom: 1px solid #29333a;
  background: #0c1114;
  color: #9aa7ae;
  font-size: 10px;
  letter-spacing: .12em;
}
.panel-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 3px;
  background: #56636b;
}
.race-control-panel .panel-title::before { background: var(--cockpit-green); }
.standings-panel .panel-title::before { background: var(--cockpit-cyan); }
.team-panel .panel-title::before { background: var(--cockpit-gold); }
.race-control-state {
  padding: 14px 12px;
  border-bottom-color: #263038;
  font-size: 13px;
  letter-spacing: .12em;
}
.race-control-tests { gap: 6px; padding: 8px; }
.race-control-tests button {
  min-height: 38px;
  border-radius: 7px;
  background: #171e22;
  border-color: #303c44;
  color: #aab5bb;
}
.standings { max-height: min(60vh, 650px); }
.row {
  min-height: 46px;
  grid-template-columns: 26px 10px minmax(0,1fr) 58px 43px 45px;
  padding: 6px 9px;
  border-bottom: 1px solid #20292f;
  background: transparent;
}
.row:nth-child(even) { background: rgba(255,255,255,.012); }
.row.player {
  background: linear-gradient(90deg, rgba(240,197,79,.16), rgba(240,197,79,.035));
  box-shadow: inset 3px 0 0 #e3bd4c;
}
.pos { color: #75838b; }
.driver-name-line { font-weight: 900; }
.last-lap { color: #647079; }
.driver-card { background: #12181c; }
.driver-attributes > div,
.vehicle-attributes > div {
  border-color: #2a353c;
  background: #0d1215;
}
.strategy button { background: #171e22; border-color: #303c44; }

/* Libraries read as a separate garage/library area, not part of the race controls. */
.track-map-library,
.race-cloud-library {
  margin-top: 18px;
  padding: 15px;
  border: 1px solid #29353d;
  border-radius: 14px;
  background: #0d1215;
  box-shadow: none;
}
.track-map-library-head,
.race-cloud-head {
  align-items: end;
  margin-bottom: 12px;
}
.track-map-library-head strong,
.race-cloud-head strong {
  font-size: 16px;
  letter-spacing: .08em;
}
.track-map-grid {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}
.track-map-card {
  grid-template-rows: 132px auto;
  border: 1px solid #2f3b43;
  border-radius: 12px;
  background: #12181b;
  overflow: hidden;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
@media (hover:hover) and (pointer:fine) {
  .track-map-card:hover { transform: translateY(-2px); border-color: #596871; background: #151c20; }
}
.track-map-card.active,
.track-map-card.selected { border-color: #b0933e; box-shadow: inset 0 0 0 1px rgba(240,197,79,.16); }
.track-card-body { padding: 11px; }
.track-card-name { font-size: 15px; }
.track-feature { border-radius: 999px; background: #0b1013; }
.track-import-note {
  margin-top: 8px;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #59656d;
  font-size: 8px;
}

/* Large desktop uses more of the display. */
@media (min-width: 1500px) {
  .app { padding-left: 24px; padding-right: 24px; }
  .topbar { margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; }
  .layout { grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; }
  .race-stage-shell { max-height: calc(100vh - 155px); }
  #gameCanvas { max-height: calc(100vh - 155px); object-fit: contain; }
}

/* Laptop: command deck becomes two rows before the track ever feels cramped. */
@media (max-width: 1280px) and (min-width: 901px) {
  .app { padding-left: 10px; padding-right: 10px; }
  .topbar { margin-left: -10px; margin-right: -10px; padding-left: 10px; padding-right: 10px; }
  .layout { grid-template-columns: minmax(0, 1fr) 315px; gap: 10px; }
  .brand-block { flex-basis: 235px; }
  .sub { display: none; }
  .controls { grid-template-columns: auto minmax(0,1fr) auto auto; }
  .race-actions { min-width: 225px; }
  .series-group { grid-column: 1 / -1; grid-row: 2; }
  .check { grid-column: auto; }
  .track-map-grid { grid-template-columns: repeat(auto-fill, minmax(195px,1fr)); }
}

/* Tablet: track is the hero, timing tower becomes a two-column pit wall below. */
@media (max-width: 900px) and (min-width: 641px) {
  .app { padding: 0 10px 76px; }
  .topbar { margin: 0 -10px 10px; padding-left: 10px; padding-right: 10px; }
  .layout { display: block; }
  .race-stage-shell { border-radius: 12px; }
  .controls {
    grid-template-columns: 1fr auto;
    gap: 7px;
  }
  .race-actions { min-width: 0; }
  .series-group { grid-column: 1 / -1; grid-template-columns: repeat(3,1fr); }
  .laps-control, .speed-group, .check { grid-row: 3; }
  .sidebar {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
  }
  .race-control-panel { grid-column: 1 / -1; }
  .track-map-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* Phone portrait is a dedicated race app, not a shrunk desktop site. */
@media (max-width: 640px) {
  html, body { background: #070a0c; }
  body.race-view-active { overflow-x: hidden; }
  .app { padding: 0 0 calc(66px + env(safe-area-inset-bottom,0px)); }
  .topbar {
    min-height: 48px;
    margin: 0;
    padding: calc(6px + env(safe-area-inset-top,0px)) 8px 6px;
    background: #080c0e;
  }
  .brand-block { flex: 1 1 auto; min-width: 0; }
  .topbar h1 { font-size: 13px; letter-spacing: .11em; }
  .sub { display: none; }
  .app-tabs { order: 3; flex: 1 1 100%; margin-top: 2px; }
  .app-tab { flex: 1 1 50%; min-height: 30px; padding: 4px 6px; font-size: 7px; }
  .vibe-account-btn { width: 37px; min-width: 37px; padding: 0 !important; text-indent: -9999px; position: relative; }
  .vibe-account-btn::after { content:"☁"; position:absolute; inset:0; display:grid; place-items:center; text-indent:0; font-size:15px; }

  .layout { display: block; }
  .race-stage-shell {
    border-width: 0 0 1px;
    border-radius: 0;
    box-shadow: none;
  }
  .race-stage-badge { top: 7px; left: 7px; padding: 4px 6px; }
  .race-stage-corner { display: none; }
  .race-meta {
    top: 6px;
    left: auto;
    right: 6px;
    transform: none;
    grid-template-columns: repeat(2, auto);
    gap: 3px;
  }
  .race-meta > span { min-height: 24px; padding: 3px 6px; font-size: 7px; border-radius: 5px; }
  .race-meta #weatherText { display: none; }

  .controls {
    margin: 0;
    padding: 7px;
    border-width: 0 0 1px;
    border-radius: 0;
    grid-template-columns: 1fr auto;
    gap: 6px;
    background: #0d1215;
  }
  .race-actions { min-width: 0; grid-template-columns: 1.35fr 1fr 1fr; }
  .race-actions button { min-height: 42px; font-size: 10px; }
  .series-group {
    grid-column: 1 / -1;
    display: flex;
    overflow-x: auto;
    grid-template-columns: none;
    gap: 5px;
    scrollbar-width: none;
  }
  .series-group::-webkit-scrollbar { display:none; }
  .series-group .series { flex: 0 0 auto; min-height: 38px; min-width: 78px; }
  .laps-control { min-height: 38px; font-size: 8px; }
  .speed-group { min-height: 38px; }
  .speed-group .speed { min-height: 36px; min-width: 36px; }
  .check { display: none; }

  .track-map-library,
  .race-cloud-library { margin: 12px 8px 0; padding: 10px; border-radius: 11px; }
  .track-map-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
  .track-map-card { grid-template-rows: 84px auto; border-radius: 9px; }
  .track-card-body { padding: 7px; }
  .track-card-name { font-size: 11px; }
  .track-feature { min-height: 18px; font-size: 7px; }
  .track-import-note { margin: 6px 8px; }

  /* The mobile management drawer looks like a telemetry sheet. */
  .sidebar {
    z-index: 130;
    left: 6px;
    right: 6px;
    bottom: calc(62px + env(safe-area-inset-bottom,0px));
    max-height: 72dvh;
    padding: 0 7px 7px;
    border: 1px solid #344149;
    border-radius: 16px;
    background: #0d1215;
  }
  .mobile-sheet-head { background: #0d1215; }
  .mobile-race-dock {
    min-height: calc(62px + env(safe-area-inset-bottom,0px));
    background: rgba(8,12,14,.98);
    border-top-color: #2a343b;
  }
  .mobile-race-dock button { min-height: 54px; border-radius: 9px; }
  .mobile-race-dock button.active { background: #262115; color: #f1ce67; }
}

/* True mobile landscape cockpit: race feed owns the entire screen. */
@media (max-width: 900px) and (orientation: landscape) {
  body.race-view-active:not(.mobile-library-mode) .topbar { display: none; }
  body.race-view-active:not(.mobile-library-mode) .app,
  body.race-view-active:not(.mobile-library-mode) #raceManagerView,
  body.race-view-active:not(.mobile-library-mode) .layout,
  body.race-view-active:not(.mobile-library-mode) .race-panel {
    width: 100%;
    height: 100dvh;
    min-height: 0;
    padding: 0;
    margin: 0;
  }
  body.race-view-active:not(.mobile-library-mode) .race-panel {
    display: grid;
    grid-template-rows: minmax(0,1fr) 48px;
  }
  body.race-view-active:not(.mobile-library-mode) .race-stage-shell {
    border: 0;
    border-radius: 0;
    min-height: 0;
    display: grid;
    place-items: center;
  }
  body.race-view-active:not(.mobile-library-mode) #gameCanvas {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
    aspect-ratio: auto;
  }
  body.race-view-active:not(.mobile-library-mode) .race-meta { top: 6px; }
  body.race-view-active:not(.mobile-library-mode) .controls {
    height: 48px;
    margin: 0;
    padding: 4px 390px 4px 5px;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    border: 0;
    border-top: 1px solid #263038;
    background: rgba(8,12,14,.98);
  }
  body.race-view-active:not(.mobile-library-mode) .race-actions {
    display: flex;
    min-width: auto;
    gap: 4px;
  }
  body.race-view-active:not(.mobile-library-mode) .race-actions button,
  body.race-view-active:not(.mobile-library-mode) .series-group .series {
    min-height: 38px;
  }
  body.race-view-active:not(.mobile-library-mode) .series-group { display:flex; flex:0 0 auto; overflow:visible; }
  body.race-view-active:not(.mobile-library-mode) .laps-control,
  body.race-view-active:not(.mobile-library-mode) .speed-group,
  body.race-view-active:not(.mobile-library-mode) .check { display:none; }
  body.race-view-active:not(.mobile-library-mode) .mobile-race-dock {
    width: 380px;
    height: 48px;
    min-height: 48px;
    grid-template-columns: repeat(6,1fr);
    border-radius: 12px 0 0 0;
  }
  body.race-view-active:not(.mobile-library-mode) .mobile-race-dock button {
    min-height: 44px;
    flex-direction: row;
    gap: 4px;
    font-size: 7px;
  }
  body.race-view-active:not(.mobile-library-mode) .mobile-race-dock .dock-icon { font-size: 13px; }
  body.race-view-active:not(.mobile-library-mode) .race-stage-badge { top: 6px; left: 6px; }
  body.race-view-active:not(.mobile-library-mode) .race-stage-corner { bottom: 8px; }
}

/* Discipline rail is deliberately separate from the command deck. */
.race-stage-area {
  display: grid;
  grid-template-columns: 104px minmax(0,1fr);
  gap: 10px;
  align-items: stretch;
}
.discipline-rail {
  min-width: 0;
  padding: 9px 7px;
  border: 1px solid #2d3941;
  border-radius: 14px;
  background: linear-gradient(180deg, #11171a, #0b1013);
  box-shadow: 0 16px 38px rgba(0,0,0,.22);
}
.discipline-rail-label {
  display: block;
  margin: 2px 4px 8px;
  color: #5f6d75;
  font: 900 7px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .17em;
  text-align: center;
}
.discipline-rail .series-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin: 0;
}
.discipline-rail .series {
  min-width: 0;
  min-height: 62px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 3px;
  padding: 8px 9px;
  border: 1px solid #283239;
  border-radius: 9px;
  background: #0d1215;
  color: #79868e;
  text-align: left;
}
.discipline-rail .series span {
  color: #56636b;
  font: 900 7px ui-monospace, monospace;
  letter-spacing: .13em;
}
.discipline-rail .series strong {
  font-size: 10px;
  line-height: 1.05;
}
.discipline-rail .series.active {
  border-color: #89753c;
  background: linear-gradient(135deg, #302917, #201c12);
  color: #f5d369;
  box-shadow: inset 3px 0 0 #edc64f;
}
.discipline-rail .series.active span { color: #bca04e; }

/* With discipline selection moved out, the command bar is calmer. */
.controls {
  grid-template-columns: auto auto auto auto;
  justify-content: start;
}
.race-actions { min-width: 290px; }
.laps-control { margin-left: auto; }

@media (max-width: 1280px) and (min-width: 901px) {
  .race-stage-area { grid-template-columns: 88px minmax(0,1fr); gap: 8px; }
  .discipline-rail { padding: 7px 5px; }
  .discipline-rail .series { min-height: 54px; padding: 6px 7px; }
  .discipline-rail .series strong { font-size: 9px; }
  .controls { grid-template-columns: auto auto auto auto; }
  .race-actions { min-width: 235px; }
}

@media (max-width: 900px) {
  .race-stage-area { display: flex; flex-direction: column; gap: 0; }
  .race-stage-shell { order: 1; }
  .discipline-rail {
    order: 2;
    padding: 6px 7px;
    border-width: 0 0 1px;
    border-radius: 0;
    box-shadow: none;
    background: #0b1013;
  }
  .discipline-rail-label { display: none; }
  .discipline-rail .series-group {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .discipline-rail .series-group::-webkit-scrollbar { display:none; }
  .discipline-rail .series {
    flex: 0 0 88px;
    min-height: 42px;
    padding: 5px 7px;
    align-items: center;
    border-radius: 7px;
    text-align: center;
  }
  .discipline-rail .series span { display:none; }
  .discipline-rail .series strong { font-size: 9px; }
  .controls { grid-template-columns: 1fr auto; }
  .laps-control { margin-left: 0; }
}

@media (max-width: 900px) and (orientation: landscape) {
  body.race-view-active:not(.mobile-library-mode) .race-stage-area {
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-columns: 74px minmax(0,1fr);
    grid-template-rows: 1fr;
    gap: 0;
  }
  body.race-view-active:not(.mobile-library-mode) .discipline-rail {
    order: 1;
    display: block;
    min-height: 0;
    padding: 5px;
    border: 0;
    border-right: 1px solid #273138;
    background: rgba(7,11,13,.97);
    overflow-y: auto;
  }
  body.race-view-active:not(.mobile-library-mode) .discipline-rail .series-group {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    overflow: visible;
  }
  body.race-view-active:not(.mobile-library-mode) .discipline-rail .series {
    min-height: 42px;
    width: 100%;
    padding: 4px;
  }
  body.race-view-active:not(.mobile-library-mode) .race-stage-shell { order: 2; }
}

/* ========================================================================== 
   COCKPIT UI V3 · timing tower + discipline → map workflow
   ========================================================================== */

/* The desktop is now one cockpit column. Live timing belongs beside the feed;
   strategy and map selection live below it. */
.layout {
  display: block;
  grid-template-columns: none;
  max-width: none;
}
.race-panel { width: 100%; }

.race-stage-area {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  overflow: visible;
}

/* Compact timing tower: position / driver / race timing only. */
.timing-tower {
  width: 238px;
  min-width: 238px;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 14px;
  transition: width .22s ease, min-width .22s ease, box-shadow .22s ease;
}
.timing-tower.expanded {
  width: 430px;
  min-width: 430px;
  box-shadow: 0 20px 50px rgba(0,0,0,.34);
}
.timing-panel-title {
  justify-content: space-between;
  gap: 8px;
  flex: 0 0 auto;
}
.timing-panel-title > span:first-child { min-width: 0; }
.timing-panel-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
}
.timing-expand-btn,
.timing-mobile-close {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid #344149;
  border-radius: 7px;
  background: #151c20;
  color: #aebac0;
  font: 900 19px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.timing-expand-btn span {
  display: block;
  transform: translateX(1px);
  transition: transform .2s ease;
}
.timing-tower.expanded .timing-expand-btn span {
  transform: rotate(180deg) translateX(-1px);
}
.timing-expand-btn:hover { color: #f5d36a; border-color: #716238; }
.timing-mobile-close { display: none; font-size: 16px; }

.timing-tower .standings {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
}
.timing-tower .row {
  min-height: 43px;
  grid-template-columns: 22px 8px minmax(0, 1fr) 57px;
  gap: 6px;
  padding: 6px 8px;
}
.timing-tower .row .name {
  min-width: 0;
  overflow: hidden;
}
.timing-tower .driver-name-line {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.timing-tower .row .last-lap,
.timing-tower .row .tire,
.timing-tower .row .fuel {
  display: none;
}
.timing-tower .row .gap {
  text-align: right;
  white-space: nowrap;
  font-size: 10px;
}

/* Expanded timing reveals the telemetry that was intentionally hidden in the
   compact view. */
.timing-tower.expanded .row {
  grid-template-columns: 24px 9px minmax(0, 1fr) 60px 48px 56px;
  gap: 7px;
  padding-left: 9px;
  padding-right: 9px;
}
.timing-tower.expanded .row .last-lap { display: block; }
.timing-tower.expanded .row .tire,
.timing-tower.expanded .row .fuel { display: block; }

/* Rally uses the same compact/expanded principle. */
.timing-tower .rally-row .rally-progress,
.timing-tower .rally-row .rally-penalty { display: none; }
.timing-tower.expanded .rally-row .rally-progress,
.timing-tower.expanded .rally-row .rally-penalty { display: block; }

/* Drift's bracket rows are already purpose-built; simply give them breathing
   room when the tower is opened. */
.timing-tower .drift-bracket-match { min-width: 0; }
.timing-tower:not(.expanded) .drift-match-driver .name small { display: none; }

/* Below the race feed: map workflow on the left, strategy desk on the right. */
.race-lower-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(315px, 24vw, 390px);
  gap: 16px;
  align-items: start;
  margin-top: 18px;
}
.library-column { min-width: 0; }
.race-desk-column.sidebar {
  position: sticky;
  top: 74px;
  display: grid;
  gap: 10px;
  min-width: 0;
}
.race-desk-column .team-panel { order: 2; }
.race-desk-column .race-control-panel { order: 1; }
.race-desk-column .debug-inspector-panel { order: 3; }

/* Step 1 — discipline. */
.discipline-picker {
  padding: 14px;
  border: 1px solid #2d3941;
  border-radius: 14px;
  background: #0d1215;
}
.discipline-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 11px;
}
.discipline-picker-head > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.discipline-picker-head > div > span:last-child {
  display: grid;
  gap: 2px;
}
.discipline-picker-head small {
  color: #76848c;
  font: 900 7px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .14em;
}
.discipline-picker-head strong {
  color: #eef2f4;
  font: 900 15px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .07em;
}
.discipline-picker-head > span:last-child {
  color: #738087;
  font-size: 9px;
  text-align: right;
}
.discipline-step,
.library-step {
  width: 30px;
  height: 30px;
  min-width: 30px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #756431;
  border-radius: 999px;
  background: #2a2416;
  color: #f2cf66;
  font: 900 11px ui-monospace, SFMono-Regular, Menlo, monospace;
}
.library-step {
  width: 22px;
  height: 22px;
  min-width: 22px;
  margin-right: 4px;
  font-size: 8px;
  vertical-align: middle;
}
.discipline-picker .series-group {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}
.discipline-picker .series {
  min-width: 0;
  min-height: 62px;
  padding: 9px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 3px;
  border: 1px solid #2e3940;
  border-radius: 9px;
  background: #11171a;
  color: #88959c;
  text-align: left;
}
.discipline-picker .series > span {
  color: #5e6b73;
  font: 900 7px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .13em;
}
.discipline-picker .series > strong { font-size: 10px; line-height: 1.05; }
.discipline-picker .series.active {
  border-color: #91793b;
  background: linear-gradient(135deg, #302917, #211c12);
  color: #f6d36b;
  box-shadow: inset 3px 0 0 #ecc54e;
}
.discipline-picker .series.active > span { color: #c0a652; }

/* Step 2 — maps directly follows discipline selection. */
.library-column .track-map-library { margin-top: 10px; }
.library-column .race-cloud-library { margin-top: 14px; }

/* The command deck no longer needs to account for a discipline rail. */
.controls {
  grid-template-columns: auto auto auto auto;
  justify-content: start;
}
.race-actions { min-width: 290px; }
.laps-control { margin-left: auto; }

/* Medium desktop / laptop. */
@media (max-width: 1280px) and (min-width: 901px) {
  .timing-tower { width: 218px; min-width: 218px; }
  .timing-tower.expanded { width: 370px; min-width: 370px; }
  .race-lower-grid { grid-template-columns: minmax(0, 1fr) 315px; gap: 10px; }
  .discipline-picker .series-group { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .discipline-picker .series { min-height: 50px; }
  .race-actions { min-width: 235px; }
}

/* Tablet and phone: timing returns to the existing bottom-sheet interaction;
   the lower workflow becomes a single stack. */
@media (max-width: 900px) {
  .race-stage-area { display: block; }
  .timing-tower { display: none; width: auto; min-width: 0; height: auto !important; }
  .timing-tower.mobile-panel-target {
    position: fixed;
    z-index: 132;
    left: 8px;
    right: 8px;
    bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    display: flex;
    max-height: min(72dvh, 680px);
    border: 1px solid #39464e;
    border-radius: 15px;
    background: #0d1215;
    box-shadow: 0 24px 70px rgba(0,0,0,.58);
  }
  .timing-tower.mobile-panel-target .standings { overflow-y: auto; }
  .timing-mobile-close { display: grid; }
  .timing-tower.expanded { width: auto; min-width: 0; }
  .timing-tower.expanded .row {
    grid-template-columns: 24px 9px minmax(0, 1fr) 56px 45px 46px;
  }

  .race-lower-grid { display: block; margin-top: 10px; }
  .discipline-picker {
    margin: 10px 8px 0;
    padding: 10px;
    border-radius: 11px;
  }
  .discipline-picker-head { align-items: flex-start; margin-bottom: 8px; }
  .discipline-picker-head > span:last-child { display: none; }
  .discipline-picker .series-group {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .discipline-picker .series-group::-webkit-scrollbar { display: none; }
  .discipline-picker .series {
    flex: 0 0 96px;
    min-height: 48px;
    align-items: center;
    text-align: center;
  }
  .discipline-picker .series > span { display: none; }

  /* Race desk keeps using the existing mobile drawer. */
  .race-desk-column.sidebar { position: fixed; display: block; }

  body.race-view-active:not(.mobile-library-mode) .discipline-picker,
  body.race-view-active:not(.mobile-library-mode) .track-map-library,
  body.race-view-active:not(.mobile-library-mode) .track-import-note,
  body.race-view-active:not(.mobile-library-mode) .race-cloud-library {
    display: none;
  }
  body.race-view-active.mobile-library-mode .discipline-picker,
  body.race-view-active.mobile-library-mode .track-map-library,
  body.race-view-active.mobile-library-mode .track-import-note,
  body.race-view-active.mobile-library-mode .race-cloud-library {
    display: block;
  }
}

@media (max-width: 640px) {
  .discipline-picker-head strong { font-size: 12px; }
  .discipline-step { width: 27px; height: 27px; min-width: 27px; }
  .timing-tower.mobile-panel-target {
    left: 6px;
    right: 6px;
    bottom: calc(66px + env(safe-area-inset-bottom,0px));
  }
  .timing-tower .row { min-height: 42px; }
}

/* Landscape mobile must keep the race feed full-screen; live timing appears only
   when explicitly requested from the dock. */
@media (max-width: 900px) and (orientation: landscape) {
  body.race-view-active:not(.mobile-library-mode) .race-stage-area {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
  }
  body.race-view-active:not(.mobile-library-mode) .race-stage-shell {
    width: 100%;
    height: 100%;
  }
  body.race-view-active:not(.mobile-library-mode) .discipline-picker { display: none; }
  .timing-tower.mobile-panel-target {
    left: auto;
    right: 6px;
    top: 6px;
    bottom: 54px;
    width: min(430px, 48vw);
    max-height: none;
  }
}

/* ========================================================================== 
   COCKPIT UI V3.1 · corrected three-column race desk
   LEFT timing · CENTER race feed · RIGHT race control/team
   ========================================================================== */
@media (min-width: 901px) {
  .race-stage-area {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) clamp(300px, 21vw, 350px);
    gap: 10px;
    align-items: start;
    overflow: visible;
  }

  .timing-tower {
    grid-column: 1;
    grid-row: 1;
    width: 220px;
    min-width: 220px;
    margin: 0;
    position: relative;
    z-index: 8;
    align-self: stretch;
    max-height: min(650px, calc(100vh - 150px));
    transition: width .22s ease, min-width .22s ease, box-shadow .22s ease;
  }

  /* Expansion intentionally grows to the RIGHT over the race feed. The grid
     column remains compact, so opening telemetry does not push the track. */
  .timing-tower.expanded {
    width: 430px;
    min-width: 430px;
    z-index: 20;
    box-shadow: 18px 20px 50px rgba(0,0,0,.52);
  }

  .race-stage-shell {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    width: 100%;
    align-self: start;
  }

  .race-desk-column.sidebar {
    grid-column: 3;
    grid-row: 1;
    position: sticky;
    top: 74px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    min-width: 0;
    margin: 0;
    align-self: start;
  }

  .race-desk-column .race-control-panel { order: 1; }
  .race-desk-column .team-panel { order: 2; }
  .race-desk-column .debug-inspector-panel { order: 3; }

  /* Discipline and maps are a separate second-stage workflow BELOW the race. */
  .race-lower-grid {
    display: block;
    margin-top: 18px;
  }
  .library-column { width: 100%; min-width: 0; }
}

/* Smaller desktop/laptop keeps the exact same left/center/right hierarchy,
   just with narrower support columns. */
@media (max-width: 1280px) and (min-width: 901px) {
  .race-stage-area {
    grid-template-columns: 190px minmax(0, 1fr) 285px;
    gap: 8px;
  }
  .timing-tower {
    width: 190px;
    min-width: 190px;
  }
  .timing-tower.expanded {
    width: 370px;
    min-width: 370px;
  }
  .timing-tower .row {
    grid-template-columns: 20px 7px minmax(0,1fr) 52px;
    gap: 5px;
    padding-left: 6px;
    padding-right: 6px;
  }
  .timing-tower.expanded .row {
    grid-template-columns: 22px 8px minmax(0,1fr) 56px 43px 44px;
  }
}

/* Tablet/mobile keep the existing sheet/dock behavior. The desktop sidebar
   placement above must not leak into the mobile drawer. */
@media (max-width: 900px) {
  .race-stage-area { display: block; }
  .race-desk-column.sidebar {
    position: fixed;
    display: block;
    grid-template-columns: none;
    margin: 0;
  }
}

/* ==========================================================================\n   TEAM PIT WALL — quick race controls + ratings modal\n   The in-race team panel is decision-first: PUSH / ATTACK / PIT remain visible.\n   Static driver and car ratings live in a modal instead of consuming pit-wall space.\n   ========================================================================== */
.team-panel .driver-card {
  padding: 10px;
}
.team-driver-head {
  align-items: flex-start;
  margin-bottom: 9px;
}
.team-driver-identity {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.team-driver-identity .driver-stats {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.team-details-btn {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 6px 9px;
  border-radius: 7px;
  border: 1px solid #38454d;
  background: #0d1316;
  color: #aeb9bf;
  font: 900 9px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.team-details-btn:hover { border-color: #667780; color: #f1f4f5; }

.team-quick-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 4px 0 9px;
}
.team-quick-btn {
  min-width: 0;
  min-height: 62px;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 1px;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid #39464e;
  background: #11181c;
  text-align: left;
}
.team-quick-btn span {
  color: #77858d;
  font: 900 8px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
}
.team-quick-btn strong {
  color: #eef2f4;
  font: 1000 16px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .06em;
}
.team-quick-btn small {
  color: #75828a;
  font-size: 8px;
  line-height: 1.15;
}
.team-quick-btn.quick-push {
  border-color: #5f2b2e;
  background: linear-gradient(180deg, #211416, #151416);
}
.team-quick-btn.quick-attack {
  border-color: #68421f;
  background: linear-gradient(180deg, #21180f, #131612);
}
.team-quick-btn.quick-push strong { color: #ff5a5f; }
.team-quick-btn.quick-attack strong { color: #ff9f43; }
.team-quick-btn.active {
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px currentColor, 0 5px 16px rgba(0,0,0,.18);
}
.team-quick-btn.quick-push.active { border-color: #d63f45; background: #321719; }
.team-quick-btn.quick-attack.active { border-color: #d97720; background: #33210f; }

.team-primary-pit {
  margin: 0;
  padding: 9px;
  border: 1px solid #334149;
  border-radius: 9px;
  background: #0d1316;
}
.team-primary-pit .strategy-label {
  margin-bottom: 6px;
  color: #d7dfe3;
  font-weight: 900;
}
.team-primary-pit .pit-buttons button {
  min-height: 40px;
  font-weight: 900;
}
.team-primary-pit .pit-status {
  margin-top: 6px;
  font-size: 9px;
}
.team-secondary-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 8px;
}
.team-compact-strategy { margin: 0; }
.team-compact-strategy .strategy-buttons {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.team-compact-strategy button {
  min-height: 28px;
  padding: 4px;
  font-size: 9px;
}
.team-strategy-risk {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid #253039;
  color: #75828a;
  font-size: 9px;
}

.team-details-dialog {
  width: min(620px, calc(100vw - 32px));
  max-height: min(720px, calc(100vh - 42px));
  margin: auto;
  padding: 0;
  border: 1px solid #3a4850;
  border-radius: 14px;
  background: #0c1114;
  color: #e8edef;
  box-shadow: 0 28px 80px rgba(0,0,0,.55);
}
.team-details-dialog::backdrop { background: rgba(3,6,8,.76); backdrop-filter: blur(3px); }
.team-details-shell { min-width: 0; }
.team-details-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 14px;
  border-bottom: 1px solid #2a353b;
  background: #11181c;
}
.team-details-head > div { min-width: 0; display: grid; gap: 2px; }
.team-details-head span {
  color: #73818a;
  font: 900 8px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .14em;
}
.team-details-head strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 1000 13px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .06em;
}
.team-details-head button {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid #3a4850;
  background: #171f23;
  color: #e9edef;
  font-size: 22px;
  line-height: 1;
}
.team-details-body {
  display: grid;
  gap: 14px;
  padding: 14px;
  overflow: auto;
}
.team-details-section {
  min-width: 0;
  padding: 11px;
  border: 1px solid #29353c;
  border-radius: 10px;
  background: #10161a;
}
.team-details-section-title {
  margin-bottom: 8px;
  color: #a7b3b9;
  font: 900 9px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
}
.team-details-rating-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.team-details-rating-grid > div {
  min-width: 0;
  padding: 8px;
  border: 1px solid #2c383f;
  border-radius: 7px;
  background: #0b1013;
}
.team-details-rating-grid span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #718089;
  font-size: 8px;
}
.team-details-rating-grid strong {
  display: block;
  margin-top: 2px;
  color: #eef2f4;
  font: 1000 16px ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (max-width: 700px) {
  .team-quick-btn { min-height: 68px; }
  .team-primary-pit .pit-buttons button { min-height: 44px; }
  .team-details-rating-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-details-dialog { width: calc(100vw - 18px); max-height: calc(100vh - 24px); }
}

/* ==========================================================================\n   TEAM PIT WALL V2 — compact two-driver race controls\n   Keep both player drivers visible simultaneously. Only immediate race actions\n   stay on-card; ratings remain in the Driver / Car dialog.\n   ========================================================================== */
.team-panel #driverControls {
  display: grid;
  gap: 6px;
  padding: 6px;
}
.team-panel .driver-card {
  padding: 7px 8px;
  border: 1px solid #28343a;
  border-radius: 8px;
  background: #101619;
}
.team-panel .driver-card + .driver-card { margin-top: 0; }
.team-panel .team-driver-head {
  min-height: 28px;
  margin: 0 0 5px;
  gap: 6px;
  align-items: center;
}
.team-panel .team-driver-identity {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.team-panel .team-driver-identity .driver-name {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
}
.team-panel .team-driver-identity .driver-stats {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 8px;
  color: #7e8b92;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.team-panel .team-details-btn {
  min-height: 25px;
  padding: 3px 7px;
  border-radius: 5px;
  font-size: 7px;
  white-space: nowrap;
}
.team-panel .team-quick-actions-compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin: 0 0 5px;
}
.team-panel .team-quick-actions-compact .team-quick-btn {
  min-height: 34px;
  height: 34px;
  padding: 4px 8px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.team-panel .team-quick-actions-compact .team-quick-btn strong {
  font-size: 11px;
  line-height: 1;
}
.team-panel .team-primary-pit-compact {
  margin: 0;
  padding: 5px 6px 4px;
  border-radius: 6px;
}
.team-panel .team-pit-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 5px;
  align-items: center;
}
.team-panel .team-primary-pit-compact .strategy-label {
  margin: 0;
  font-size: 8px;
  letter-spacing: .12em;
}
.team-panel .team-primary-pit-compact .pit-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}
.team-panel .team-primary-pit-compact .pit-buttons button {
  min-height: 27px;
  height: 27px;
  padding: 2px 4px;
  font-size: 8px;
  border-radius: 5px;
}
.team-panel .team-primary-pit-compact .pit-status {
  min-height: 0;
  margin: 3px 0 0 35px;
  font-size: 7px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.team-panel .team-secondary-controls,
.team-panel .team-strategy-risk {
  display: none !important;
}

@media (max-width: 700px) {
  .team-panel #driverControls { gap: 7px; padding: 7px; }
  .team-panel .driver-card { padding: 8px; }
  .team-panel .team-quick-actions-compact .team-quick-btn { min-height: 38px; height: 38px; }
  .team-panel .team-primary-pit-compact .pit-buttons button { min-height: 32px; height: 32px; }
}

/* ==========================================================================\n   TEAM PIT WALL V3 — narrow-column, two-driver cockpit\n   Nothing in the live cards is allowed to overflow the strategy column.\n   ========================================================================== */
.team-panel,
.team-panel #driverControls,
.team-panel .driver-card,
.team-panel .team-driver-head,
.team-panel .team-driver-identity,
.team-panel .team-quick-actions-compact,
.team-panel .team-primary-pit-compact,
.team-panel .team-pit-row,
.team-panel .team-primary-pit-compact .pit-buttons {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}
.team-panel { overflow: hidden; }
.team-panel #driverControls {
  width: 100%;
  padding: 5px;
  gap: 5px;
}
.team-panel .driver-card {
  width: 100%;
  overflow: hidden;
  padding: 6px;
}
.team-panel .team-driver-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px;
  min-height: 24px;
  margin-bottom: 4px;
}
.team-panel .team-driver-identity {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  overflow: hidden;
}
.team-panel .team-driver-identity .driver-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  line-height: 1;
}
.team-panel .team-live-state {
  min-width: 0;
  color: #89969d;
  font: 800 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .02em;
  white-space: nowrap;
}
.team-panel .team-details-btn {
  width: auto;
  min-width: 45px;
  min-height: 23px;
  height: 23px;
  padding: 2px 5px;
  font-size: 6.5px;
  letter-spacing: .04em;
}
.team-panel .team-quick-actions-compact {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin: 0 0 4px;
}
.team-panel .team-quick-actions-compact .team-quick-btn {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  height: 30px;
  padding: 2px 4px;
}
.team-panel .team-quick-actions-compact .team-quick-btn strong {
  font-size: 9px;
}
.team-panel .team-primary-pit-compact {
  width: 100%;
  padding: 4px 5px 3px;
}
.team-panel .team-pit-row {
  width: 100%;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 4px;
}
.team-panel .team-primary-pit-compact .strategy-label {
  font-size: 7px;
  letter-spacing: .08em;
}
.team-panel .team-primary-pit-compact .pit-buttons {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  overflow: hidden;
}
.team-panel .team-primary-pit-compact .pit-buttons button {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 24px;
  height: 24px;
  padding: 1px 2px;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
  font-size: 7px;
}
.team-panel .team-primary-pit-compact .pit-status {
  margin: 3px 0 0 26px;
  max-width: calc(100% - 26px);
  font-size: 6.5px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 700px) {
  .team-panel #driverControls { padding: 5px; gap: 5px; }
  .team-panel .driver-card { padding: 6px; }
  .team-panel .team-quick-actions-compact .team-quick-btn { min-height: 34px; height: 34px; }
  .team-panel .team-primary-pit-compact .pit-buttons button { min-height: 28px; height: 28px; font-size: 7.5px; }
}

/* ========================================================================
   VIBE TRACK EDITOR · COCKPIT UI V2
   Responsive three-zone editor: Build | Canvas | Tune/Save
   ======================================================================== */
#trackEditorView {
  --vte-rail: 286px;
  --vte-tools: 318px;
  --vte-gap: 12px;
}

.vte-shell-v2 { gap: 12px; }
.vte-toolbar-v2 {
  position: sticky;
  top: 8px;
  z-index: 40;
  grid-template-columns: minmax(220px, .78fr) minmax(260px, .72fr) minmax(420px, 1.5fr);
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  border-color: #364047;
  background: rgba(18, 22, 25, .96);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 28px rgba(0,0,0,.20);
}
.vte-toolbar-v2 .vte-title-block > strong { font-size: 17px; }
.vte-toolbar-v2 .vte-title-block > span:last-child { max-width: 410px; line-height: 1.3; }
.vte-name-field-v2 input { min-height: 38px; background: #0f1316; }
.vte-toolbar-actions-v2 { align-items: center; }
.vte-history-actions { display: inline-flex; gap: 6px; }
.vte-icon-button { min-width: 66px; }

.vte-workspace-v2 {
  display: grid;
  grid-template-columns: var(--vte-rail) minmax(0, 1fr) var(--vte-tools);
  grid-template-areas: "build canvas tools";
  gap: var(--vte-gap);
  align-items: start;
}
.vte-build-pane { grid-area: build; }
.vte-canvas-pane-v2 { grid-area: canvas; min-width: 0; }
.vte-tools-pane { grid-area: tools; }

.vte-workspace-v2 > .vte-command-pane {
  position: sticky;
  top: 88px;
  max-height: calc(100vh - 104px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding-right: 2px;
}
.vte-workspace-v2 > .vte-command-pane::-webkit-scrollbar { width: 7px; }
.vte-workspace-v2 > .vte-command-pane::-webkit-scrollbar-thumb { background: #3a4349; border-radius: 9px; }
.vte-workspace-v2 > .vte-command-pane::-webkit-scrollbar-track { background: transparent; }

.vte-canvas-pane-v2 {
  border: 1px solid #354048;
  border-radius: 10px;
  overflow: hidden;
  background: #151a1d;
  box-shadow: 0 12px 34px rgba(0,0,0,.18);
}
.vte-canvas-head-v2 {
  min-height: 52px;
  border: 0;
  border-bottom: 1px solid #354048;
  background: #171c20;
  padding: 8px 10px;
}
.vte-canvas-head-v2 .vte-status-chip {
  min-width: 150px;
  margin: 0;
  padding: 6px 8px;
  background: #101417;
}
.vte-editor-canvas-shell { border: 0; background: #f5f5f2; }
.vte-editor-canvas-shell canvas { max-height: calc(100vh - 210px); object-fit: contain; }
.vte-canvas-feedback-v2 {
  grid-template-columns: minmax(0, 1.35fr) minmax(160px, .65fr);
  gap: 6px;
  padding: 6px;
  border: 0;
  border-top: 1px solid #354048;
  background: #121619;
}
.vte-canvas-feedback-v2 .vte-tool-help {
  grid-column: 1 / -1;
  min-height: 31px;
  padding: 5px 8px;
  font-size: 10px;
}
.vte-canvas-feedback-v2 .editor-status,
.vte-canvas-feedback-v2 .editor-validation {
  min-height: 34px;
  padding: 6px 8px;
  font-size: 10px;
}

.vte-workspace-v2 .vte-card {
  border-color: #354048;
  background: #171c20;
  border-radius: 9px;
  overflow: hidden;
}
.vte-workspace-v2 .vte-card-title {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: #14191c;
  color: #c3ccd1;
}
.vte-mobile-close { display: none; }

.vte-build-card .vte-step {
  grid-template-columns: 27px minmax(0, 1fr);
  gap: 8px;
  padding: 9px;
}
.vte-build-card .vte-step-number {
  width: 27px;
  height: 27px;
  font-size: 10px;
}
.vte-build-card .vte-step-content { gap: 6px; }
.vte-build-card .vte-step-content > strong { font-size: 11px; }
.vte-build-card .vte-step-content > span { font-size: 9px; }
.vte-build-card .vte-action,
.vte-build-card .vte-piece-grid button { min-height: 36px; font-size: 10px; }
.vte-piece-grid { grid-template-columns: 1fr 1fr; gap: 5px; }
.vte-piece-grid button { padding: 6px 7px; }
.vte-piece-options { gap: 6px; }
.vte-piece-edit-row { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 5px; }
.vte-piece-edit-row button { min-height: 32px; font-size: 8px; }
.vte-piece-edit-row button:last-child { grid-column: 1 / -1; }
.vte-step-button-row { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,.8fr); gap: 5px; }
.vte-build-card .vte-action-start { min-height: 42px; font-size: 10px; }

.vte-tools-pane { display: flex; flex-direction: column; gap: 10px; }
.vte-compact-intro {
  padding: 8px 10px 0;
  color: #8f9aa1;
  font-size: 9px;
  line-height: 1.35;
}
.vte-racing-line-tools {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  padding: 8px 10px 5px;
}
.vte-racing-line-tools .editor-tool {
  min-height: 34px;
  padding: 5px 7px;
  font-size: 9px;
}
.vte-racing-line-tools .editor-tool[data-editor-tool="road"] { grid-column: 1 / -1; }
.vte-selection-compact { margin: 0 10px 5px; min-height: 28px; padding: 5px 7px; font-size: 9px; }
.vte-point-actions-compact { margin: 0 10px 6px; gap: 4px; }
.vte-point-actions-compact button { min-height: 30px; padding: 4px 5px; font-size: 8px; }
.vte-soft-edit-note { margin: 0 10px 9px; min-height: 26px; padding: 5px 7px; font-size: 8px; }

.vte-feature-buttons { padding: 8px 10px; gap: 5px; }
.vte-feature-buttons button { min-height: 34px; padding: 5px 7px; font-size: 9px; }
.vte-feature-summary-v2 { padding: 0 10px 8px; }
.vte-feature-summary-v2 .editor-feature-head { min-height: 26px; font-size: 9px; }
.vte-feature-summary-v2 .editor-feature-list { max-height: 92px; overflow-y: auto; }

.vte-finish-card-v2 { padding-bottom: 8px; }
.vte-finish-card-v2 .vte-card-title { margin-bottom: 8px; }
.vte-save-primary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 10px 6px; }
.vte-finish-card-v2 .vte-save-primary-grid .vte-action,
.vte-finish-card-v2 .vte-download-action {
  width: auto;
  margin: 0;
  min-height: 38px;
  font-size: 9px;
}
.vte-finish-card-v2 .vte-download-action { display: flex; width: calc(100% - 20px); margin: 0 10px 8px; }
.vte-cloud-save-details { margin: 0 10px; border: 1px solid #303940; border-radius: 7px; background: #12171a; overflow: hidden; }
.vte-cloud-save-details > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  font-size: 9px;
  font-weight: 850;
}
.vte-cloud-save-details > summary::-webkit-details-marker { display: none; }
.vte-cloud-save-details > summary em { color: #7f8b92; font-size: 8px; font-style: normal; text-align: right; }
.vte-cloud-save-details[open] > summary { border-bottom: 1px solid #303940; }
.vte-cloud-save-body { display: grid; gap: 6px; padding: 8px; }
.vte-cloud-save-body .vte-action,
.vte-cloud-save-body .vte-cloud-map-field { width: 100%; margin: 0; }
.vte-cloud-save-body .vte-cloud-privacy { margin: 0; }

.vte-lower-tools { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; }
.vte-lower-tools > .vte-details { min-width: 0; }
.vte-advanced-grid-v2 { grid-template-columns: minmax(0,1.2fr) minmax(260px,.8fr); }

.vte-mobile-dock,
.vte-mobile-backdrop { display: none; }

/* Medium desktop / laptop: keep the canvas dominant and stack both tool rails
   in one narrower column. */
@media (max-width: 1320px) and (min-width: 901px) {
  #trackEditorView { --vte-tools: 330px; }
  .vte-toolbar-v2 { grid-template-columns: minmax(200px,.8fr) minmax(240px,.8fr) 1fr; }
  .vte-workspace-v2 {
    grid-template-columns: minmax(0, 1fr) var(--vte-tools);
    grid-template-areas:
      "canvas build"
      "canvas tools";
    align-items: start;
  }
  .vte-workspace-v2 > .vte-command-pane {
    position: static;
    max-height: none;
    overflow: visible;
  }
  .vte-canvas-pane-v2 {
    position: sticky;
    top: 88px;
  }
  .vte-tools-pane { margin-top: -2px; }
  .vte-piece-edit-row { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .vte-piece-edit-row button:last-child { grid-column: auto; }
  .vte-lower-tools { grid-template-columns: 1fr; }
}

/* Tablet: canvas first. The four tool groups become a compact two-column
   workbench underneath it. */
@media (max-width: 900px) and (min-width: 701px) {
  #trackEditorView { padding: 8px; }
  .vte-toolbar-v2 {
    position: relative;
    top: auto;
    grid-template-columns: minmax(0,1fr) minmax(260px,.8fr);
    gap: 8px;
  }
  .vte-toolbar-actions-v2 { grid-column: 1 / -1; justify-content: flex-start; }
  .vte-workspace-v2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "canvas canvas"
      "build tools";
    gap: 10px;
  }
  .vte-workspace-v2 > .vte-command-pane { position: static; max-height: none; overflow: visible; }
  .vte-tools-pane { align-self: start; }
  .vte-canvas-pane-v2 { position: static; }
  .vte-editor-canvas-shell canvas { max-height: none; }
  .vte-lower-tools { grid-template-columns: 1fr; }
  .vte-advanced-grid-v2 { grid-template-columns: 1fr 1fr; }
}

/* Phone / narrow mobile: canvas is the page. Editing tools become slide-up
   sheets opened from the dedicated editor dock. */
@media (max-width: 700px) {
  body.editor-view-active { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
  body.editor-mobile-sheet-open { overflow: hidden; }
  #trackEditorView { padding: 6px 6px calc(62px + env(safe-area-inset-bottom,0px)); }
  .vte-shell-v2 { gap: 7px; }
  .vte-toolbar-v2 {
    position: sticky;
    top: 0;
    z-index: 70;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 6px;
    padding: 7px;
    border-radius: 8px;
  }
  .vte-toolbar-v2 .vte-title-block > strong { font-size: 13px; }
  .vte-toolbar-v2 .vte-title-block > span:last-child { display: none; }
  .vte-name-field-v2 { grid-column: 1 / -1; font-size: 8px; }
  .vte-name-field-v2 input { min-height: 36px; font-size: 13px; }
  .vte-toolbar-actions-v2 {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 5px;
    padding-bottom: 1px;
    scrollbar-width: none;
  }
  .vte-toolbar-actions-v2::-webkit-scrollbar { display: none; }
  .vte-toolbar-actions-v2 > *, .vte-history-actions { flex: 0 0 auto; }
  .vte-toolbar-actions-v2 .vte-button { min-height: 36px; padding: 5px 9px; font-size: 9px; }
  .vte-icon-button { min-width: 42px; }
  .vte-icon-button span { display: none; }

  .vte-workspace-v2 { display: block; }
  .vte-canvas-pane-v2 { width: 100%; }
  .vte-canvas-head-v2 { min-height: 44px; padding: 6px 7px; }
  .vte-canvas-head-v2 .vte-eyebrow { display: none; }
  .vte-canvas-head-v2 strong { font-size: 11px; }
  .vte-canvas-head-v2 .vte-status-chip { min-width: 118px; padding: 5px 6px; font-size: 8px; }
  .vte-editor-canvas-shell { overflow: hidden; }
  .vte-editor-canvas-shell canvas { width: 100%; height: auto; max-height: none; }
  .vte-canvas-feedback-v2 { grid-template-columns: 1fr; padding: 5px; }
  .vte-canvas-feedback-v2 .vte-tool-help { grid-column: auto; min-height: 29px; }
  .vte-canvas-feedback-v2 .editor-status,
  .vte-canvas-feedback-v2 .editor-validation { min-height: 30px; }

  .vte-build-pane,
  .vte-tools-pane { display: contents !important; }
  [data-editor-mobile-panel] {
    display: block;
    position: fixed;
    z-index: 151;
    left: 6px;
    right: 6px;
    bottom: calc(58px + env(safe-area-inset-bottom, 0px));
    max-height: min(74dvh, 690px);
    overflow-y: auto !important;
    overscroll-behavior: contain;
    border-radius: 13px 13px 0 0 !important;
    box-shadow: 0 -18px 48px rgba(0,0,0,.52);
    transform: translateY(calc(100% + 90px));
    opacity: 0;
    pointer-events: none;
    transition: transform .20s ease, opacity .16s ease;
  }
  [data-editor-mobile-panel].vte-mobile-panel-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  [data-editor-mobile-panel] > .vte-card-title {
    position: sticky;
    top: 0;
    z-index: 3;
    min-height: 44px;
    background: #151a1e;
  }
  .vte-mobile-close {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid #3d474e;
    border-radius: 50%;
    background: #22292e;
    color: #eef2f4;
    font-size: 19px;
    line-height: 1;
  }

  .vte-mobile-backdrop {
    position: fixed;
    z-index: 145;
    inset: 0;
    display: block;
    background: rgba(0,0,0,.56);
    backdrop-filter: blur(2px);
  }
  .vte-mobile-backdrop[hidden] { display: none; }
  .vte-mobile-dock {
    position: fixed;
    z-index: 160;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    grid-template-columns: repeat(5, minmax(0,1fr));
    min-height: calc(58px + env(safe-area-inset-bottom, 0px));
    padding: 4px 4px env(safe-area-inset-bottom, 0px);
    border-top: 1px solid #384249;
    background: rgba(15,19,22,.98);
    backdrop-filter: blur(14px);
    box-shadow: 0 -9px 28px rgba(0,0,0,.3);
  }
  body.editor-view-active .vte-mobile-dock { display: grid; }
  .vte-mobile-dock button {
    min-width: 0;
    min-height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #8e9aa1;
  }
  .vte-mobile-dock button > span { font: 900 16px ui-monospace, monospace; line-height: 1; }
  .vte-mobile-dock button > b { font-size: 8px; font-weight: 850; }
  .vte-mobile-dock button.active { background: #342e1b; color: #f1d36d; }

  .vte-lower-tools { display: block; }
  .vte-lower-tools > .vte-details { margin-top: 7px; }
  .vte-advanced-grid-v2 { grid-template-columns: 1fr; }
  .vte-details > summary { min-height: 44px; padding: 11px; }
  .vte-preview-details .editor-render-pane { padding: 6px; }

  .vte-piece-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .vte-piece-edit-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .vte-piece-edit-row button:last-child { grid-column: 1 / -1; }
  .vte-racing-line-tools { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .vte-feature-buttons { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .vte-save-primary-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 430px) {
  .vte-toolbar-v2 .vte-title-block { min-width: 0; }
  .vte-toolbar-v2 .vte-title-block > strong { font-size: 12px; }
  .vte-piece-grid button,
  .vte-feature-buttons button,
  .vte-racing-line-tools .editor-tool { font-size: 9px; }
  .vte-save-primary-grid { grid-template-columns: 1fr; }
  .vte-step-button-row { grid-template-columns: 1fr; }
}

/* Landscape phones: maximize the editable canvas, keep the tool dock overlaid. */
@media (max-width: 900px) and (orientation: landscape) {
  body.editor-view-active #trackEditorView { padding: 4px 4px calc(54px + env(safe-area-inset-bottom,0px)); }
  body.editor-view-active .vte-toolbar-v2 {
    position: relative;
    grid-template-columns: minmax(160px,.55fr) minmax(200px,.65fr) minmax(0,1fr);
    padding: 5px 6px;
  }
  body.editor-view-active .vte-toolbar-v2 .vte-title-block > span:last-child { display: none; }
  body.editor-view-active .vte-name-field-v2 { grid-column: auto; }
  body.editor-view-active .vte-toolbar-actions-v2 { grid-column: auto; overflow-x: auto; }
  body.editor-view-active .vte-toolbar-actions-v2 .vte-button { min-height: 32px; }
  body.editor-view-active .vte-canvas-head-v2 { min-height: 38px; }
  body.editor-view-active .vte-canvas-feedback-v2 { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); }
  body.editor-view-active .vte-canvas-feedback-v2 .vte-tool-help { grid-column: 1 / -1; }
  body.editor-view-active .vte-mobile-dock { min-height: calc(52px + env(safe-area-inset-bottom,0px)); }
  body.editor-view-active [data-editor-mobile-panel] { bottom: calc(52px + env(safe-area-inset-bottom,0px)); max-height: 78dvh; }
}

/* ========================================================================
   VIBE TRACK EDITOR · WORKFLOW REARRANGEMENT
   Preview left · Start/Finish right · button-first piece builder
   ======================================================================== */
.vte-build-mobile-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.vte-preview-card { flex: 0 0 auto; }
.vte-left-preview-pane {
  padding: 7px;
  background: #111619;
}
.vte-left-preview-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  min-height: 0;
  padding: 0 0 6px;
  border: 0;
  background: transparent;
}
.vte-left-preview-head > div:first-child {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.vte-left-preview-head .editor-pane-kicker { font-size: 7px; }
.vte-left-preview-head strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
}
.vte-left-preview-head #editorPreviewMeta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #829097;
  font-size: 7px;
}
.vte-left-preview-head .editor-preview-badges { gap: 3px; }
.vte-left-preview-head .legend-chip { padding: 3px 5px; font-size: 7px; }
.vte-left-preview-shell {
  border: 1px solid #354048;
  border-radius: 6px;
  overflow: hidden;
  background: #0c1113;
}
.vte-left-preview-shell canvas {
  width: 100%;
  height: auto;
  display: block;
}

.vte-start-finish-card {
  flex: 0 0 auto;
  transition: border-color .16s ease, opacity .16s ease, background .16s ease;
}
.vte-start-finish-card.locked { opacity: .55; }
.vte-start-finish-card.current {
  border-color: #8e7627;
  box-shadow: inset 3px 0 0 #d6ae2e;
}
.vte-start-finish-card.complete {
  border-color: #356c48;
  box-shadow: inset 3px 0 0 #54b978;
}
.vte-start-finish-body {
  display: grid;
  gap: 8px;
  padding: 9px 10px 10px;
}
.vte-start-finish-body > span {
  color: #929da4;
  font-size: 9px;
  line-height: 1.35;
}
.vte-start-finish-body .vte-action-start {
  width: 100%;
  min-height: 42px;
  margin: 0;
}

.vte-piece-control-group {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid #303a40;
  border-radius: 7px;
  background: #12171a;
}
.vte-piece-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.vte-piece-group-title > span {
  color: #d4dadd;
  font: 850 8px/1.1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .08em;
}
.vte-piece-group-title > small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #7f8b92;
  font: 750 7px/1.1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.vte-size-button-row,
.vte-piece-nav-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 5px;
}
.vte-size-button-row button {
  min-height: 38px;
  border-color: #586268;
  background: #252d32;
  font-weight: 850;
}
.vte-piece-shape-group .vte-piece-grid { margin: 0; }
.vte-piece-adjust-group { gap: 5px; }
.vte-piece-nav-row button,
.vte-piece-edit-row-clean button {
  min-height: 31px;
  font-size: 8px;
}
.vte-piece-edit-row-clean { margin: 0; }

/* Only Advanced Settings remains below the main work area now. */
.vte-lower-tools { grid-template-columns: minmax(0,1fr); }

@media (max-width: 900px) and (min-width: 701px) {
  .vte-left-preview-pane { padding: 6px; }
  .vte-preview-card .vte-card-title { min-height: 34px; }
}

@media (max-width: 700px) {
  .vte-build-mobile-group {
    gap: 7px;
    padding: 7px;
    background: #101518;
  }
  .vte-build-mobile-group > .vte-card { flex: 0 0 auto; }
  .vte-preview-card { order: 0; }
  .vte-build-card { order: 1; }
  .vte-left-preview-shell canvas { max-height: 180px; object-fit: contain; }
  .vte-start-finish-card {
    width: 100%;
    margin-top: 7px;
  }
  .vte-start-finish-card .vte-card-title { min-height: 38px; }
  .vte-start-finish-body {
    grid-template-columns: minmax(0,1fr) minmax(150px,.75fr);
    align-items: center;
    gap: 7px;
    padding: 7px;
  }
  .vte-start-finish-body > span { font-size: 8px; }
  .vte-start-finish-body .vte-action-start { min-height: 38px; }
  .vte-piece-control-group { padding: 7px; }
}

@media (max-width: 430px) {
  .vte-start-finish-body { grid-template-columns: 1fr; }
  .vte-left-preview-shell canvas { max-height: 150px; }
}

/* ========================================================================
   VIBE TRACK EDITOR · FULL-CONTENT CARD FIX
   Side rails scroll; individual cards never shrink or clip their contents.
   ======================================================================== */
@media (min-width: 901px) {
  /* The sticky command rails own the scrolling. Their children must keep
     their natural content height instead of flex-shrinking to the viewport. */
  .vte-workspace-v2 > .vte-command-pane {
    min-height: 0;
  }
  .vte-workspace-v2 > .vte-command-pane > *,
  .vte-tools-pane > .vte-card,
  .vte-build-mobile-group > .vte-card {
    flex: 0 0 auto;
    min-height: max-content;
  }

  /* A card is a visual group, not a clipping viewport. */
  .vte-workspace-v2 .vte-card {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  /* Lists inside Race Features should contribute to the card's natural
     height. The outer tools rail will scroll when the full group is tall. */
  .vte-feature-summary-v2 .editor-feature-list {
    max-height: none;
    overflow: visible;
  }
}

/* Keep rounded headers/bodies clean without using card-level clipping. */
.vte-workspace-v2 .vte-card-title {
  border-radius: 8px 8px 0 0;
}
.vte-workspace-v2 .vte-card > :last-child {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* Tablet already lays the tool groups below the canvas; make sure those
   cards also always size to their complete contents. */
@media (max-width: 900px) and (min-width: 701px) {
  .vte-workspace-v2 .vte-card,
  .vte-build-mobile-group > .vte-card,
  .vte-tools-pane > .vte-card {
    height: auto;
    max-height: none;
    overflow: visible;
    min-height: max-content;
  }
  .vte-feature-summary-v2 .editor-feature-list {
    max-height: none;
    overflow: visible;
  }
}

/* On mobile the sheet itself is the scroll container. Do not create little
   nested scroll areas or clip a card inside the sheet. */
@media (max-width: 700px) {
  [data-editor-mobile-panel] > .vte-card,
  .vte-build-mobile-group > .vte-card,
  .vte-workspace-v2 .vte-card {
    flex: 0 0 auto;
    height: auto;
    max-height: none;
    overflow: visible;
  }
  .vte-feature-summary-v2 .editor-feature-list {
    max-height: none;
    overflow: visible;
  }
}

/* Scientific automatic racing-line generator. */
.vte-auto-lines {
  margin: 8px 10px 1px;
  padding: 7px;
  border: 1px solid rgba(255, 216, 102, .24);
  border-radius: 7px;
  background: rgba(255, 205, 66, .035);
}
.vte-action-auto-lines {
  width: 100%;
  min-height: 38px;
  border-color: #8f7428;
  background: #312a17;
  color: #ffe39a;
  font: 900 9px ui-monospace, monospace;
  letter-spacing: .055em;
}
.vte-action-auto-lines:hover { background: #42371b; }
.vte-action-auto-lines.solving { border-color: #3d8096; background: #16313a; color: #b9ecff; }
.vte-auto-lines-status {
  margin-top: 6px;
  color: #89969d;
  font: 700 8px/1.35 ui-monospace, monospace;
}
.vte-auto-lines-status.ready { color: #99d9aa; }
.vte-auto-lines-status.warning { color: #e7c56b; }
@media (max-width: 760px) {
  .vte-action-auto-lines { min-height: 44px; font-size: 10px; }
  .vte-auto-lines-status { font-size: 9px; }
}
/* Rallycross hill-jump authoring marker */
.tool-swatch.hill-jump{background:#c99a58;border-color:#f0c785;box-shadow:inset 0 0 0 1px rgba(70,42,18,.45)}
.track-feature.jump { border-color:#6f5537; color:#e9c07b; }

/* ========================================================================== 
   MOBILE LANDSCAPE SPACING PASS · 2026-09-09
   Keep every existing control/content item, but reclaim vertical race-feed space.
   Camera fitting is intentionally untouched in this pass.
   ========================================================================== */
@media (max-width: 900px) and (orientation: landscape) {
  body.race-view-active:not(.mobile-library-mode) .race-panel {
    grid-template-rows: minmax(0, 1fr) 36px;
  }

  /* Compact the live HUD without changing what it displays. */
  body.race-view-active:not(.mobile-library-mode) .race-meta {
    top: 4px;
    gap: 3px;
  }
  body.race-view-active:not(.mobile-library-mode) .race-meta > span {
    min-height: 26px;
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 8px;
    letter-spacing: .045em;
    box-shadow: 0 4px 12px rgba(0,0,0,.20);
  }
  body.race-view-active:not(.mobile-library-mode) .race-stage-badge {
    top: 4px;
    left: calc(5px + env(safe-area-inset-left, 0px));
    padding: 3px 6px;
    border-radius: 5px;
    box-shadow: 0 4px 12px rgba(0,0,0,.20);
  }
  body.race-view-active:not(.mobile-library-mode) .race-stage-badge span {
    font-size: 6px;
  }
  body.race-view-active:not(.mobile-library-mode) .race-stage-badge strong {
    font-size: 8px;
  }
  body.race-view-active:not(.mobile-library-mode) .race-stage-corner {
    right: calc(7px + env(safe-area-inset-right, 0px));
    bottom: 5px;
    font-size: 6px;
  }

  /* One slim command strip across the bottom. */
  body.race-view-active:not(.mobile-library-mode) .controls {
    height: 36px;
    min-height: 36px;
    padding: 3px calc(336px + env(safe-area-inset-right, 0px)) 3px calc(4px + env(safe-area-inset-left, 0px));
    gap: 3px;
    border-top-width: 1px;
  }
  body.race-view-active:not(.mobile-library-mode) .race-actions {
    gap: 3px;
  }
  body.race-view-active:not(.mobile-library-mode) .race-actions button,
  body.race-view-active:not(.mobile-library-mode) .series-group .series {
    min-height: 30px;
    height: 30px;
    padding-top: 2px;
    padding-bottom: 2px;
    border-radius: 6px;
    font-size: 8px;
  }
  body.race-view-active:not(.mobile-library-mode) .race-actions button {
    min-width: 62px;
    padding-left: 8px;
    padding-right: 8px;
  }

  /* Shorter phone-navigation dock, still six full touch targets. */
  body.race-view-active:not(.mobile-library-mode) .mobile-race-dock {
    width: 330px;
    height: 36px;
    min-height: 36px;
    padding: 2px calc(3px + env(safe-area-inset-right, 0px)) 2px 3px;
    border-radius: 9px 0 0 0;
  }
  body.race-view-active:not(.mobile-library-mode) .mobile-race-dock button {
    min-height: 32px;
    height: 32px;
    padding: 1px 3px;
    gap: 2px;
    border-radius: 5px;
    font-size: 6px;
    line-height: 1;
  }
  body.race-view-active:not(.mobile-library-mode) .mobile-race-dock .dock-icon {
    font-size: 11px;
  }

  /* Match slide-up panels to the reclaimed dock height. */
  body.race-view-active:not(.mobile-library-mode) .sidebar.mobile-open,
  body.race-view-active:not(.mobile-library-mode) .timing-tower.mobile-panel-target {
    bottom: calc(42px + env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - 50px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }
}


/* Race-start lights are cockpit UI, not track/map geometry. */
.start-lights-ui {
  position: absolute;
  z-index: 24;
  top: 54px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid #3a4145;
  border-radius: 8px;
  background: rgba(10,13,15,.92);
  box-shadow: 0 7px 20px rgba(0,0,0,.36);
  pointer-events: none;
}
.start-lights-ui[hidden] { display: none !important; }
.start-lights-ui .start-light {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #343a3e;
  border: 2px solid #111416;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.start-lights-ui .start-light.on {
  background: #e93636;
  box-shadow: 0 0 10px rgba(233,54,54,.55), inset 0 0 0 1px rgba(255,255,255,.12);
}

@media (max-width: 900px) {
  .start-lights-ui {
    top: 42px;
    gap: 5px;
    padding: 4px 7px;
    border-radius: 6px;
  }
  .start-lights-ui .start-light {
    width: 11px;
    height: 11px;
    border-width: 1px;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  body.race-view-active:not(.mobile-library-mode) .start-lights-ui {
    top: 36px;
    gap: 4px;
    padding: 3px 6px;
  }
  body.race-view-active:not(.mobile-library-mode) .start-lights-ui .start-light {
    width: 9px;
    height: 9px;
  }
}

/* ==========================================================================\n   DRIVER STRESS — PUSH driving-strategy risk\n   Sits above the driver's name so the cost of sustained PUSH is always visible.\n   ========================================================================== */
.driver-stress-meter {
  display: grid;
  grid-template-columns: auto minmax(42px, 1fr) 30px;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin: 0 0 5px;
  color: #8f9ba1;
  font: 900 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
}
.driver-stress-track {
  position: relative;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid #334149;
  background: #0b1013;
}
.driver-stress-track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #6f9a65;
  transition: width .16s linear, background .16s linear;
}
.driver-stress-meter > strong {
  text-align: right;
  color: #aab5ba;
  font-size: 7px;
}
.driver-stress-meter[data-level="medium"] .driver-stress-track i { background: #c4a34a; }
.driver-stress-meter[data-level="high"] .driver-stress-track i { background: #d47a45; }
.driver-stress-meter[data-level="danger"] .driver-stress-track i { background: #d85151; }
.driver-stress-meter[data-level="danger"] > strong { color: #ff7777; }


/* LIVE TIMING STRATEGY ICONS — visible for every non-Drift driver. */
.live-strategy-icons {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 5px;
  vertical-align: middle;
  flex: 0 0 auto;
}
.live-strategy-icon {
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid #4a555b;
  background: #11181c;
  font: 900 10px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Emoji", sans-serif;
  box-sizing: border-box;
}
.live-strategy-icon.attack {
  color: #ff9f43;
  border-color: #8a5524;
  box-shadow: inset 0 0 0 1px rgba(255,159,67,.10);
}
.live-strategy-icon.push {
  color: #ff5a5f;
  border-color: #8d3337;
  box-shadow: inset 0 0 0 1px rgba(255,90,95,.10);
}
.live-strategy-icon.hybrid {
  color: #7fc7a4;
  border-color: #477863;
  box-shadow: inset 0 0 0 1px rgba(127,199,164,.10);
}
.live-strategy-icon.drs {
  color: #6ec6ff;
  border-color: #356b8c;
  box-shadow: inset 0 0 0 1px rgba(110,198,255,.10);
}
.timing-tower .driver-name-line {
  display: flex;
  align-items: center;
  min-width: 0;
}
.timing-tower .driver-name-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.timing-tower .driver-name-line .fastest-lap-badge {
  flex: 0 0 auto;
}
.timing-tower:not(.expanded) .live-strategy-icon {
  width: 14px;
  height: 14px;
  font-size: 9px;
}

/* ========================================================================== 
   DESKTOP SESSION FLOW · v1.2.39
   Desktop uses the same setup → race-control separation in a normal browser
   window and in fullscreen. Historical selector names are kept for stability.
   ========================================================================== */
.desktop-flow-strip { display: none; }

@media (min-width: 901px) {
  body.desktop-fullscreen-split.race-view-active {
    min-height: 100vh;
    overflow-x: hidden;
    background: #080c0e;
  }

  body.desktop-fullscreen-split.race-view-active .app {
    max-width: none;
    min-height: 100vh;
  }

  body.desktop-fullscreen-split.race-view-active .topbar {
    min-height: 54px;
    padding-top: 7px;
    padding-bottom: 7px;
  }

  body.desktop-fullscreen-split.race-view-active .desktop-flow-strip {
    min-height: 58px;
    margin: 0 0 10px;
    padding: 9px 12px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid #29343b;
    border-radius: 12px;
    background: linear-gradient(180deg, #11171a, #0c1114);
    box-shadow: 0 10px 28px rgba(0,0,0,.2);
  }

  body.desktop-fullscreen-split.desktop-flow-setup .desktop-setup-strip { display: flex; }
  body.desktop-fullscreen-split.desktop-flow-race .desktop-race-strip { display: flex; }

  .desktop-flow-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
  }
  .desktop-flow-copy-right { text-align: right; margin-left: auto; }
  .desktop-flow-kicker {
    color: #867338;
    font: 900 8px ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .16em;
  }
  .desktop-flow-copy strong {
    color: #f1f4f5;
    font: 900 14px ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .07em;
  }
  .desktop-flow-copy small {
    max-width: min(62vw, 900px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #77858d;
    font: 800 9px ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .035em;
  }

  .desktop-flow-primary,
  .desktop-flow-back {
    min-height: 38px;
    border: 1px solid #4a565d;
    border-radius: 8px;
    padding: 8px 14px;
    background: #171e22;
    color: #d9e0e3;
    font: 900 10px ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .07em;
  }
  .desktop-flow-primary {
    border-color: #8a7134;
    background: linear-gradient(135deg, #3b3018, #241f13);
    color: #f4d26b;
  }
  .desktop-flow-primary:hover:not(:disabled) { background: #46391c; }
  .desktop-flow-primary:disabled {
    opacity: .38;
    cursor: not-allowed;
    filter: saturate(.4);
  }
  .desktop-flow-back:hover { border-color: #756638; color: #f2d172; }

  /* SETUP SCREEN ---------------------------------------------------------- */
  body.desktop-fullscreen-split.desktop-flow-setup #raceManagerView .race-stage-area,
  body.desktop-fullscreen-split.desktop-flow-setup #raceManagerView .controls {
    display: none !important;
  }

  body.desktop-fullscreen-split.desktop-flow-setup #raceManagerView .race-lower-grid {
    display: block !important;
    margin: 0;
    min-height: calc(100vh - 142px);
    padding: 6px 3vw 28px;
  }

  body.desktop-fullscreen-split.desktop-flow-setup #raceManagerView .library-column {
    width: min(1500px, 100%);
    margin: 0 auto;
  }

  body.desktop-fullscreen-split.desktop-flow-setup .discipline-picker {
    padding: 18px;
    border-radius: 16px;
  }
  body.desktop-fullscreen-split.desktop-flow-setup .discipline-picker .series-group {
    grid-template-columns: repeat(6, minmax(0,1fr));
    gap: 10px;
  }
  body.desktop-fullscreen-split.desktop-flow-setup .discipline-picker .series {
    min-height: 74px;
  }
  body.desktop-fullscreen-split.desktop-flow-setup .track-map-library {
    margin-top: 14px;
    border-radius: 16px;
  }
  /* The long editor explanation is useful in the normal page, but interrupts
     the choose-discipline → choose-track setup flow. */
  body.desktop-fullscreen-split.desktop-flow-setup .track-import-note { display: none; }

  /* RACE CONTROL SCREEN --------------------------------------------------- */
  body.desktop-fullscreen-split.desktop-flow-race #raceManagerView .race-lower-grid {
    display: none !important;
  }
  body.desktop-fullscreen-split.desktop-flow-race #raceManagerView .race-panel {
    padding-bottom: 0;
  }
  body.desktop-fullscreen-split.desktop-flow-race #raceManagerView .race-stage-area {
    height: var(--desktop-race-stage-height, calc(100dvh - 196px));
    min-height: 0;
    grid-template-columns: clamp(190px, 15vw, 235px) minmax(0,1fr) clamp(285px, 21vw, 360px);
    align-items: stretch;
  }
  /* In desktop race control, side panels should size to their content
     instead of stretching to match the stage canvas height. */
  body.desktop-fullscreen-split.desktop-flow-race .timing-tower {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0;
    position: relative;
    top: auto;
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }
  body.desktop-fullscreen-split.desktop-flow-race .race-desk-column.sidebar {
    height: auto !important;
    max-height: 100% !important;
    position: relative;
    top: auto;
    align-self: start;
  }
  body.desktop-fullscreen-split.desktop-flow-race .timing-tower .standings {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
  }
  body.desktop-fullscreen-split.desktop-flow-race .race-desk-column.sidebar {
    overflow: visible;
  }
  body.desktop-fullscreen-split.desktop-flow-race .race-stage-shell {
    align-self: stretch;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    display: grid;
    place-items: center;
  }
  body.desktop-fullscreen-split.desktop-flow-race #gameCanvas {
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  /* Desktop race-control command deck becomes the dedicated bottom race bar. */
  body.desktop-fullscreen-split.desktop-flow-race #raceManagerView .controls {
    position: fixed;
    z-index: 90;
    left: 12px;
    right: 12px;
    bottom: 10px;
    width: auto;
    margin: 0;
    min-height: 52px;
    border: 1px solid #354149;
    border-radius: 12px;
    background: rgba(12,17,20,.97);
    box-shadow: 0 -12px 34px rgba(0,0,0,.38);
    backdrop-filter: blur(12px);
  }
}


/* v1.1.6 · Live timing is race timing only; resource-life estimates live on Your Team HUD. */
.timing-gap-mode-btn {
  min-height: 28px;
  height: 28px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #344149;
  border-radius: 7px;
  background: #151c20;
  color: #aebac0;
  font: 900 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .055em;
}
.timing-gap-mode-btn:hover { color: #f5d36a; border-color: #716238; }
.timing-gap-mode-btn[aria-pressed="true"] { color: #f5d36a; border-color: #716238; background: #292313; }

.timing-tower .circuit-timing-row,
.timing-tower.expanded .circuit-timing-row {
  grid-template-columns: 22px 8px minmax(0, 1fr) 64px;
}
.timing-tower.expanded .circuit-timing-row {
  grid-template-columns: 24px 9px minmax(0, 1fr) 68px;
}

.team-resource-life {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin: 6px 0 7px;
}
.team-resource-life span {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 7px;
  border: 1px solid #2d3439;
  border-radius: 4px;
  background: #151a1d;
  padding: 5px 7px;
  color: #7f8b92;
  font: 800 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .055em;
}
.team-resource-life strong {
  color: #dce5e9;
  font-size: 10px;
  white-space: nowrap;
}
.team-resource-life strong.short { color: #ff6e72; }


/* v1.2.2 · shared-map cleanup + explicit desktop fullscreen control */
.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}
.desktop-fullscreen-btn {
  min-height: 38px;
  padding: 7px 12px;
  border: 1px solid #344149;
  border-radius: 999px;
  background: #11181b;
  color: #aebac0;
  font: 900 9px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .07em;
  white-space: nowrap;
}
.desktop-fullscreen-btn:hover,
.desktop-fullscreen-btn.active {
  border-color: #756638;
  background: #252117;
  color: #f7d56f;
}
@media (min-width: 901px) {
  .topbar {
    display: grid;
    grid-template-columns: minmax(250px, 1fr) auto minmax(250px, 1fr);
    align-items: center;
  }
  .brand-block { justify-self: start; }
  .app-tabs { justify-self: center; }
  .topbar-actions { justify-self: end; margin-left: 0; }
}
@media (max-width: 900px) {
  .desktop-fullscreen-btn { display: none; }
}


/* My Team · Auto Driving -------------------------------------------------- */
.team-auto-driving-row {
  padding: 7px 9px;
  border-bottom: 1px solid var(--line);
  background: #11171a;
}
.team-auto-driving-row[hidden] { display: none !important; }
.team-auto-driving-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  cursor: pointer;
  user-select: none;
}
.team-auto-driving-toggle input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #f0c54f;
  flex: 0 0 auto;
}
.team-auto-driving-copy { min-width: 0; display: grid; gap: 1px; }
.team-auto-driving-copy strong {
  color: #dfe5e8;
  font: 900 9px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .09em;
}
.team-auto-driving-copy small {
  color: #78858c;
  font: 700 8px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.team-auto-driving-row.active { background: #211e12; box-shadow: inset 3px 0 0 #d8b64f; }
.team-auto-driving-row.active .team-auto-driving-copy strong { color: #f4d26b; }
.team-panel .driver-card.auto-driving .team-quick-btn:disabled,
.team-panel .driver-card.auto-driving .strategy-buttons button:disabled { opacity: .46; cursor: not-allowed; }
.team-panel .driver-card.auto-driving .team-live-state { color: #f0c54f; }



/* v1.2.23 · public Vibe usernames */
.vibe-username-box { display:grid; gap:6px; margin:9px 0; padding:10px; border:1px solid #2f393f; border-radius:5px; background:#111517; }
.vibe-username-box > label { color:#b7c0c5; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.vibe-username-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; }
.vibe-username-row input { min-width:0; }
.vibe-username-row button { min-width:70px; }
.vibe-username-box small { color:#7f8b92; font-size:10px; line-height:1.35; }
.vibe-username-box.needs-username { border-color:#8d7533; box-shadow:0 0 0 1px rgba(141,117,51,.25) inset; }
@media (max-width:560px) { .vibe-username-row { grid-template-columns:1fr; } }

/* v1.2.31 · clearer live timing + live focus faces ----------------------- */
.team-panel .team-driver-name {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.team-panel .team-driver-color { flex: 0 0 auto; }
.team-panel .team-driver-name-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.team-focus-face {
  flex: 0 0 auto;
  min-width: 23px;
  height: 18px;
  padding: 0 3px;
  display: inline-grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 999px;
  font: 1000 11px/1 Arial, Helvetica, sans-serif;
  letter-spacing: -1px;
  box-sizing: border-box;
}
.team-focus-face[data-focus="out"] {
  color: #ff666b;
  background: rgba(190, 44, 50, .16);
}
.team-focus-face[data-focus="great"] {
  color: #56e58a;
  background: rgba(38, 166, 91, .16);
}
.team-focus-face[data-focus="normal"] {
  color: #65baff;
  background: rgba(39, 124, 191, .16);
}

/* Compact: P# | colored car-number block | driver | gap. */
.timing-tower .circuit-timing-row,
.timing-tower.expanded .circuit-timing-row {
  grid-template-columns: 29px 30px minmax(0, 1fr) 64px;
  gap: 6px;
}
.timing-tower .circuit-timing-row .pos {
  color: #d7dfe3;
  font: 1000 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: left;
  white-space: nowrap;
}
.timing-car-number {
  width: 30px;
  height: 22px;
  display: grid;
  place-items: center;
  justify-self: center;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,.24);
  background: var(--timing-car-color, #52616a);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.8);
  font: 1000 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.14);
}

/* Expanded: add the current compound without merging it into car identity. */
.timing-tower.expanded .circuit-timing-row {
  grid-template-columns: 30px 32px minmax(0, 1fr) 54px 68px;
  gap: 7px;
}
.timing-tower.expanded .timing-tire {
  display: grid;
  place-items: center;
  min-width: 0;
  height: 20px;
  padding: 0 4px;
  border-radius: 4px;
  border: 1px solid #3d474c;
  background: #171d20;
  color: #cbd4d8;
  font: 1000 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
}
.timing-tower.expanded .timing-tire-soft { color: #ff7378; border-color: #71373a; background: #251719; }
.timing-tower.expanded .timing-tire-medium { color: #f2d45d; border-color: #73652e; background: #252215; }
.timing-tower.expanded .timing-tire-hard { color: #eef3f5; border-color: #606b70; background: #202629; }
.timing-tower.expanded .timing-tire-wet { color: #6faef8; border-color: #355d8a; background: #152130; }
.timing-tower.expanded .timing-tire-intermediate,
.timing-tower.expanded .timing-tire-inter { color: #62db8c; border-color: #33714a; background: #15251a; }

@media (max-width: 900px) {
  .timing-tower .circuit-timing-row,
  .timing-tower.expanded .circuit-timing-row {
    grid-template-columns: 30px 32px minmax(0, 1fr) 60px;
  }
  .timing-tower.expanded .circuit-timing-row {
    grid-template-columns: 30px 32px minmax(0, 1fr) 52px 62px;
  }
}

/* v1.2.31 · balanced side panels + cleaner timing tower ------------------ */
@media (min-width: 901px) {
  .race-stage-area {
    grid-template-columns: 285px minmax(0, 1fr) 285px;
    gap: 10px;
  }
  .timing-tower {
    width: 285px;
    min-width: 285px;
  }
  .race-desk-column.sidebar {
    width: 285px;
  }
}

@media (max-width: 1280px) and (min-width: 901px) {
  .race-stage-area {
    grid-template-columns: 250px minmax(0, 1fr) 250px;
    gap: 8px;
  }
  .timing-tower {
    width: 250px;
    min-width: 250px;
  }
  .race-desk-column.sidebar {
    width: 250px;
  }
}

body.desktop-fullscreen-split.desktop-flow-race #raceManagerView .race-stage-area {
  grid-template-columns: clamp(250px, 19vw, 305px) minmax(0,1fr) clamp(250px, 19vw, 305px);
}

.timing-tower .driver-name-text {
  font-size: 11px;
  font-weight: 800;
}

.timing-tower .circuit-timing-row,
.timing-tower.expanded .circuit-timing-row {
  grid-template-columns: 29px 24px minmax(0, 1fr) 64px;
  gap: 6px;
}

.timing-car-number {
  width: 24px;
  height: 18px;
  border-radius: 4px;
  color: #07090a;
  text-shadow: none;
  font: 1000 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.timing-tower.expanded .circuit-timing-row {
  grid-template-columns: 29px 24px minmax(0, 1fr) 58px 72px;
  gap: 7px;
}

.timing-tower.expanded .timing-tire {
  display: block;
  min-width: 0;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font: 900 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: left;
  white-space: nowrap;
}
.timing-tower.expanded .timing-tire-soft { color: #ff7378; }
.timing-tower.expanded .timing-tire-medium { color: #f2d45d; }
.timing-tower.expanded .timing-tire-hard { color: #eef3f5; }
.timing-tower.expanded .timing-tire-wet { color: #6faef8; }
.timing-tower.expanded .timing-tire-intermediate,
.timing-tower.expanded .timing-tire-inter { color: #62db8c; }

@media (max-width: 900px) {
  .timing-tower .circuit-timing-row,
  .timing-tower.expanded .circuit-timing-row {
    grid-template-columns: 29px 24px minmax(0, 1fr) 60px;
  }
  .timing-tower.expanded .circuit-timing-row {
    grid-template-columns: 29px 24px minmax(0, 1fr) 56px 68px;
  }
}

/* v1.2.31 · setup-library simplification --------------------------------- */
.combined-track-library {
  display: grid;
  gap: 12px;
}

.combined-track-library .track-map-library-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 0;
}
.combined-track-library .track-map-library-head > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.combined-track-library .track-map-head-copy {
  display: grid;
  gap: 2px;
}
.combined-track-library .track-map-head-copy small {
  color: #76848c;
  font: 900 7px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .14em;
}
.combined-track-library .track-map-head-copy strong {
  color: #eef2f4;
  font: 900 15px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .07em;
}
.combined-track-library .track-map-library-head > span {
  color: #738087;
  font-size: 9px;
  text-align: right;
}
.combined-track-library .track-map-kicker { display: none; }

.map-library-subsection,
.embedded-shared-library {
  display: grid;
  gap: 10px;
}
.map-library-subhead {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding-top: 2px;
}
.map-library-subhead > div,
.map-library-subhead:not(.shared-subhead) {
  min-width: 0;
}
.map-library-subhead small {
  display: block;
  color: #7d8a92;
  font: 900 8px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .14em;
}
.map-library-subhead strong {
  display: block;
  color: #dfe5e8;
  font: 900 12px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
}
.map-library-subhead > span {
  color: #88949b;
  font-size: 10px;
  text-align: right;
}
.combined-track-library .track-import-note {
  margin: 0;
  border-radius: 10px;
}
.embedded-shared-library {
  border-top: 1px solid #273138;
  padding-top: 12px;
}
.embedded-shared-library .cloud-compat-select { display: none !important; }
.embedded-shared-library.shared-map-library {
  margin-top: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.embedded-shared-library .shared-map-library-footer {
  padding-top: 0;
}

@media (max-width: 900px) {
  .combined-track-library .track-map-library-head,
  .map-library-subhead {
    align-items: flex-start;
    flex-direction: column;
  }
  .combined-track-library .track-map-library-head > span,
  .map-library-subhead > span {
    text-align: left;
  }
}

/* v1.2.31 · map-card load overlay ---------------------------------------- */
.track-map-card { position: relative; }
.track-map-card.selected {
  border-color: #6fc3df;
  box-shadow: inset 0 0 0 1px rgba(111,195,223,.22);
  background: #151d20;
}
.track-map-card.active.selected {
  border-color: #c8b164;
  box-shadow: inset 0 0 0 1px rgba(255,210,89,.24), 0 0 0 1px rgba(111,195,223,.18);
}
.track-card-preview { position: relative; }
.track-card-load-overlay {
  position: absolute;
  inset: auto 10px 10px auto;
  z-index: 2;
  min-width: 72px;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(240,197,79,.72);
  border-radius: 999px;
  background: rgba(10, 14, 16, .88);
  color: #f0c54f;
  font: 900 10px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
}
.track-card-load-overlay:hover {
  background: rgba(18, 24, 27, .96);
  border-color: rgba(250,210,92,.9);
}
.track-card-load-overlay:active { transform: translateY(1px); }
.track-map-card.selected .track-card-name::after {
  content: "  · SELECTED";
  color: #8edcf3;
  font: 900 8px ui-monospace, monospace;
  letter-spacing: .07em;
}
.track-map-card.active .track-card-name::after {
  content: "  · ACTIVE";
  color: #f2d16b;
  font: 900 8px ui-monospace, monospace;
  letter-spacing: .07em;
}
.track-map-card.active.selected .track-card-name::after {
  content: "  · ACTIVE · SELECTED";
  color: #dce7ec;
}
.shared-map-card.selected .track-card-name::after {
  content: "  · SELECTED";
  color: #8edcf3;
  font: 900 8px ui-monospace, monospace;
  letter-spacing: .07em;
}


/* v1.2.33 · desktop race viewport balance ---------------------------------
   The cockpit is measured between the upper Race Control strip and the fixed
   lower command bar. Timing and race feed share that exact vertical envelope. */
@media (min-width: 901px) {
  body.desktop-fullscreen-split.desktop-flow-race #raceManagerView .race-stage-area {
    height: var(--desktop-race-stage-height, calc(100dvh - 196px));
    min-height: 0;
    align-items: stretch;
  }
  body.desktop-fullscreen-split.desktop-flow-race .timing-tower {
    height: 100% !important;
    max-height: 100% !important;
    align-self: stretch;
  }
  body.desktop-fullscreen-split.desktop-flow-race .timing-tower .standings {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
  }
  body.desktop-fullscreen-split.desktop-flow-race .race-stage-shell {
    height: 100%;
    max-height: 100%;
    align-self: stretch;
  }
  body.desktop-fullscreen-split.desktop-flow-race #gameCanvas {
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
  }
}

/* v1.2.39 · full-viewport desktop setup + cockpit --------------------------
   Desktop Race Manager now consumes the full available viewport in BOTH
   directions. Keep only the app's small edge gutter; do not center/cap the
   setup library or cockpit inside a narrower content column. */
@media (min-width: 901px) {
  body.desktop-fullscreen-split #raceManagerView,
  body.desktop-fullscreen-split #raceManagerView > .layout,
  body.desktop-fullscreen-split #raceManagerView .race-panel {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-inline: 0;
  }

  /* SETUP: fill from the flow strip to the bottom and edge-to-edge inside the
     app gutter. The track library grows into the remaining vertical space. */
  body.desktop-fullscreen-split.desktop-flow-setup #raceManagerView .race-lower-grid {
    width: 100%;
    max-width: none;
    min-height: calc(100dvh - 136px);
    padding: 0 0 10px;
  }
  body.desktop-fullscreen-split.desktop-flow-setup #raceManagerView .library-column {
    width: 100%;
    max-width: none;
    min-height: calc(100dvh - 146px);
    margin: 0;
    display: flex;
    flex-direction: column;
  }
  body.desktop-fullscreen-split.desktop-flow-setup #raceManagerView .track-map-library {
    width: 100%;
    max-width: none;
    flex: 1 1 auto;
    align-content: start;
  }
  body.desktop-fullscreen-split.desktop-flow-setup #raceManagerView .track-map-grid,
  body.desktop-fullscreen-split.desktop-flow-setup #raceManagerView .shared-map-grid {
    width: 100%;
    max-width: none;
  }

  /* COCKPIT: all three columns span the complete available width. */
  body.desktop-fullscreen-split.desktop-flow-race #raceManagerView .race-stage-area {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-inline: 0;
  }
  body.desktop-fullscreen-split.desktop-flow-race .race-stage-shell {
    width: 100%;
    max-width: none;
    min-width: 0;
  }
  body.desktop-fullscreen-split.desktop-flow-race #gameCanvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
  }
  body.desktop-fullscreen-split.desktop-flow-race .timing-tower,
  body.desktop-fullscreen-split.desktop-flow-race .race-desk-column.sidebar {
    max-height: 100%;
  }
}

/* v1.2.39 · desktop cockpit horizontal fill -------------------------------
   The prior full-viewport pass widened the LEFT grid track to as much as
   305px while the compact timing tower itself remained roughly 220-250px.
   That created a visible dead strip between Live Timing and the race feed.
   Keep the grid track and the compact tower on the same width so every pixel
   reclaimed from the timing side belongs to the center race feed. */
@media (min-width: 901px) {
  body.desktop-fullscreen-split.desktop-flow-race #raceManagerView .race-stage-area {
    grid-template-columns:
      clamp(220px, 15vw, 250px)
      minmax(0, 1fr)
      clamp(250px, 19vw, 305px);
    column-gap: 10px;
  }

  body.desktop-fullscreen-split.desktop-flow-race .timing-tower:not(.expanded) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  /* Keep the setup surface genuinely uncapped as well. */
  body.desktop-fullscreen-split.desktop-flow-setup #raceManagerView .race-lower-grid,
  body.desktop-fullscreen-split.desktop-flow-setup #raceManagerView .library-column,
  body.desktop-fullscreen-split.desktop-flow-setup #raceManagerView .track-map-library {
    width: 100%;
    max-width: none;
    min-width: 0;
  }
}


/* v1.2.39 · Formula track-evolution identifier mirrors the LIVE badge on the opposite corner. */
.track-evolution-badge {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 2;
  display: none;
  align-items: center;
  gap: 7px;
  max-width: calc(100% - 24px);
  padding: 6px 9px;
  border: 1px solid rgba(211, 221, 226, .24);
  border-radius: 999px;
  background: rgba(10, 13, 15, .78);
  backdrop-filter: blur(7px);
  color: #f2f4f5;
  pointer-events: none;
}
.track-evolution-badge.active { display: flex; }
.track-evolution-badge span { color: #d9c56c; font: 900 8px ui-monospace, monospace; letter-spacing: .12em; }
.track-evolution-badge strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 900 9px ui-monospace, monospace; letter-spacing: .06em; }
@media (max-width: 760px) {
  .track-evolution-badge { right: 6px; top: 6px; padding: 4px 6px; }
  .track-evolution-badge span { display:none; }
}


/* v1.2.43 · Live Timing focus color + per-driver lap timing ---------------- */
.timing-tower .driver-name-text { transition: color .12s ease, text-shadow .12s ease; }
.timing-tower .driver-name-text.timing-focus-normal { color: #65baff; text-shadow: none; }
.timing-tower .driver-name-text.timing-focus-great { color: #56e58a; text-shadow: 0 0 7px rgba(86,229,138,.42); }
.timing-tower .driver-name-text.timing-focus-poor { color: #ffc56f; text-shadow: 0 0 6px rgba(255,197,111,.30); }
.timing-tower .driver-name-text.timing-focus-out { color: #ff666b; text-shadow: 0 0 7px rgba(255,102,107,.42); }

.timing-tower .timing-lap-times {
  gap: 8px;
  align-items: center;
  min-width: 0;
  margin-top: 3px;
  font: 800 8px/1.15 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #909ba1;
  white-space: nowrap;
}
.timing-tower.expanded .timing-lap-times {
  display: flex;
}
.timing-tower .timing-best-lap { color: #b8c1c6; }
.timing-tower .timing-best-lap.session-fastest {
  color: #d5a2ff;
  font-weight: 1000;
}
.timing-tower .fastest-lap-row {
  box-shadow: inset 3px 0 0 #b46cff;
}
.timing-tower .fastest-lap-badge {
  flex: 0 0 auto;
  padding: 1px 4px;
  border: 1px solid rgba(180,108,255,.42);
  border-radius: 4px;
  background: rgba(180,108,255,.10);
  color: #d5a2ff;
  font: 1000 7px/1.25 ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* v1.2.44 · timing columns + team HUD cleanup ----------------------------- */
/* Focus is already communicated by the Live Timing driver-name color. The
   team strategy cards no longer duplicate it with face/avatar pills. */
.team-panel .team-focus-face { display: none !important; }

/* Compact tower remains position / car / driver / gap. Last and best become
   real fixed columns only when the timing tower is expanded. */
.timing-tower .timing-lap-col {
  display: none;
  min-width: 0;
  align-self: center;
  justify-items: end;
  gap: 2px;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}
.timing-tower .timing-lap-col span {
  color: #66737a;
  font-size: 6px;
  font-weight: 1000;
  line-height: 1;
  letter-spacing: .08em;
}
.timing-tower .timing-lap-col strong {
  color: #c1c9cd;
  font-size: 8px;
  font-weight: 900;
  line-height: 1.05;
}
.timing-tower.expanded .timing-lap-col { display: grid; }

/* The fastest lap has exactly one visual treatment: a small purple star next
   to the driver's name. No row stripe and no FL pill. */
.timing-fastest-star {
  flex: 0 0 auto;
  margin-left: 2px;
  color: #cf8dff;
  font: 1000 10px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Symbol", sans-serif;
  text-shadow: 0 0 7px rgba(180,108,255,.38);
}
.timing-tower .fastest-lap-row { box-shadow: none; }
.timing-tower .fastest-lap-badge { display: none !important; }
.timing-tower .timing-best-lap.session-fastest { color: inherit; }

@media (min-width: 1281px) {
  .timing-tower.expanded {
    width: 480px;
    min-width: 480px;
  }
  .timing-tower.expanded .circuit-timing-row {
    grid-template-columns: 29px 24px minmax(92px, 1fr) 58px 58px 45px 66px;
    gap: 7px;
  }
}

@media (max-width: 1280px) and (min-width: 901px) {
  .timing-tower.expanded {
    width: 430px;
    min-width: 430px;
  }
  .timing-tower.expanded .circuit-timing-row {
    grid-template-columns: 24px 24px minmax(74px, 1fr) 54px 54px 40px 60px;
    gap: 6px;
  }
  .timing-tower .timing-lap-col strong { font-size: 7.5px; }
}

@media (max-width: 900px) {
  .timing-tower.expanded .circuit-timing-row {
    grid-template-columns: 27px 24px minmax(72px, 1fr) 54px 54px 42px 58px;
    gap: 5px;
  }
}


/* v1.2.46 · centered expanded timing cells ------------------------------- */
/* Keep the driver identity left-aligned for scanability, but center every
   numeric/status item inside its own expanded Live Timing grid column. */
.timing-tower.expanded .circuit-timing-row > .pos,
.timing-tower.expanded .circuit-timing-row > .timing-car-number,
.timing-tower.expanded .circuit-timing-row > .timing-lap-col,
.timing-tower.expanded .circuit-timing-row > .timing-tire,
.timing-tower.expanded .circuit-timing-row > .gap {
  justify-self: center;
  text-align: center;
}
.timing-tower.expanded .timing-lap-col {
  justify-items: center;
}

/* ========================================================================== */
/* VIBE TEAM EDITOR · v1.2.74                                                 */
/* ========================================================================== */
.team-editor-layout {
  display:grid;
  grid-template-columns:320px minmax(0,1fr);
  gap:12px;
  min-height:720px;
}
.team-editor-sidebar,
.team-editor-workspace { display:flex; flex-direction:column; gap:12px; min-width:0; }
.team-editor-intro p,
.team-editor-storage-panel p,
.team-editor-model-copy,
.team-editor-character,
.team-editor-hint,
.team-editor-lock-note {
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
  margin:0;
}
.team-editor-intro p,
.team-editor-storage-panel p { padding:11px; }
.team-editor-field { display:flex; flex-direction:column; gap:6px; color:#b9c1c7; font:800 10px ui-monospace,monospace; letter-spacing:.07em; }
.team-editor-field input,
.team-editor-field select,
.team-editor-intro select {
  width:100%; border:1px solid #394149; background:#151a1e; color:var(--text); border-radius:4px; min-height:38px; padding:8px 9px;
}
.team-editor-intro .team-editor-field { padding:0 11px 11px; }
.team-model-badge { margin:0 11px 11px; padding:9px 10px; border:1px solid #394149; background:#151a1e; display:flex; flex-direction:column; gap:2px; }
.team-model-badge span { color:#7f8a92; font:800 9px ui-monospace,monospace; letter-spacing:.1em; }
.team-model-badge strong { color:#f0c54f; font:900 12px ui-monospace,monospace; letter-spacing:.06em; }
.team-editor-team-list { display:flex; flex-direction:column; gap:5px; padding:8px; max-height:550px; overflow:auto; }
.team-editor-team-card { width:100%; display:grid; grid-template-columns:42px minmax(0,1fr); gap:9px; align-items:center; text-align:left; border:1px solid #30373d; background:#171c20; color:var(--text); border-radius:4px; padding:7px; }
.team-editor-team-card:hover { background:#20272c; }
.team-editor-team-card.active { border-color:#d9b64b; background:#292516; box-shadow:inset 3px 0 0 #f0c54f; }
.team-editor-team-card > span:last-child { min-width:0; display:flex; flex-direction:column; gap:2px; }
.team-editor-team-card strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.team-editor-team-card small { color:#89949c; font:700 9px ui-monospace,monospace; letter-spacing:.05em; }
.team-editor-team-swatch { width:38px; height:29px; border:1px solid rgba(255,255,255,.17); background:linear-gradient(120deg,var(--team-primary) 0 55%,var(--team-secondary) 55% 82%,var(--team-accent) 82%); }
.team-editor-storage-panel button { margin:0 11px 11px; width:calc(100% - 22px); border:1px solid #414950; background:#252c31; color:var(--text); padding:9px; border-radius:4px; }
.team-editor-preview-panel { overflow:hidden; }
.team-editor-preview-head { display:flex; justify-content:space-between; gap:20px; align-items:end; padding:12px 14px; border-bottom:1px solid var(--line); }
.team-editor-preview-head > div:first-child { display:flex; flex-direction:column; gap:3px; }
.team-editor-preview-head span { color:#8f9aa2; font:800 10px ui-monospace,monospace; letter-spacing:.1em; }
.team-editor-preview-head strong { font-size:22px; letter-spacing:.07em; }
.team-editor-preview-note { max-width:520px; text-align:right; color:#89949c; font-size:11px; line-height:1.4; }
#teamEditorPreviewCanvas { display:block; width:100%; height:auto; aspect-ratio:10/3; background:#0b0f12; }
.team-editor-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
.team-editor-identity-panel,
.team-editor-performance-panel { min-height:310px; }
.team-editor-form-grid { display:grid; grid-template-columns:2fr 1fr; gap:9px; padding:12px 12px 8px; }
.team-editor-colors { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:0 12px 10px; }
.team-editor-colors label { display:grid; grid-template-columns:minmax(0,1fr) 48px; align-items:center; gap:8px; border:1px solid #30373d; background:#151a1e; color:#aeb8bf; padding:7px 8px; font:800 9px ui-monospace,monospace; }
.team-editor-colors input[type="color"] { width:48px; height:30px; padding:0; border:0; background:transparent; }
.team-editor-identity-panel .team-editor-hint { padding:0 12px 12px; }
#teamEditorSaveBtn { margin:0 12px 10px; border:1px solid #8d7832; background:#3a331e; color:#ffe69a; font-weight:900; padding:10px 12px; border-radius:4px; }
#teamEditorStatus { margin:0 12px 12px; }
#teamEditorPerformance { padding:12px; display:flex; flex-direction:column; gap:10px; }
.team-editor-character { color:#c5cbd0; }
.team-editor-stat-list,
.team-editor-driver-stats { display:flex; flex-direction:column; gap:5px; }
.team-editor-stat { display:grid; grid-template-columns:88px minmax(50px,1fr) 28px; gap:7px; align-items:center; }
.team-editor-stat > span { color:#9ba5ad; font:800 8px ui-monospace,monospace; letter-spacing:.05em; }
.team-editor-stat > div { height:5px; background:#252c31; overflow:hidden; border-radius:4px; }
.team-editor-stat > div i { display:block; height:100%; background:linear-gradient(90deg,#8ba6b9,#f0c54f); }
.team-editor-stat > strong { text-align:right; color:#dce2e6; font:800 9px ui-monospace,monospace; }
.team-editor-lock-note { border:1px solid #343b41; background:#151a1e; padding:8px 9px; }
.team-editor-drivers-panel > .team-editor-hint { padding:10px 12px 0; }
.team-editor-driver-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:12px; }
.team-editor-driver-card { border:1px solid #30373d; background:#151a1e; padding:10px; }
.team-editor-driver-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:9px; }
.team-editor-driver-head span { color:#8f9aa2; font:800 9px ui-monospace,monospace; letter-spacing:.09em; }
.team-editor-driver-head strong { color:#f0c54f; font:900 11px ui-monospace,monospace; }
.team-editor-driver-stats { margin-top:10px; }

@media (max-width: 1050px) {
  .team-editor-layout { grid-template-columns:260px minmax(0,1fr); }
  .team-editor-grid { grid-template-columns:1fr; }
  .team-editor-preview-note { display:none; }
}
@media (max-width: 760px) {
  .team-editor-layout { grid-template-columns:1fr; }
  .team-editor-team-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); max-height:none; }
  .team-editor-driver-grid { grid-template-columns:1fr; }
  .team-editor-form-grid { grid-template-columns:1fr; }
  .team-editor-colors { grid-template-columns:1fr; }
  .team-editor-preview-head strong { font-size:17px; }
}
@media (max-width: 760px) {
  .app-tab { flex:1 1 30%; }
}

/* ========================================================================== */
/* VIBE TEAM EDITOR · v1.2.76 player-team + livery presets                   */
/* ========================================================================== */
.team-editor-side-hint { color:#7f8a92; font-size:10px; line-height:1.45; padding:9px 11px 2px; margin:0; }
.team-editor-team-card.npc { cursor:default; opacity:.78; }
.team-editor-team-card.npc:hover { background:#171c20; }
.team-editor-team-card .team-editor-role { margin-left:auto; align-self:center; color:#6f7980; font:900 8px ui-monospace,monospace; letter-spacing:.08em; border:1px solid #343b41; padding:2px 5px; }
.team-editor-team-card.player .team-editor-role { color:#f0c54f; border-color:#6e5e2c; background:#292516; }
.team-editor-team-card { grid-template-columns:42px minmax(0,1fr) auto; }
.team-editor-livery-tools { margin:0 12px 11px; display:grid; grid-template-columns:minmax(180px,1fr) minmax(210px,1fr); gap:9px; align-items:end; }
.team-editor-livery-tools select { width:100%; border:1px solid #394149; background:#151a1e; color:var(--text); border-radius:4px; min-height:38px; padding:8px 9px; }
.team-editor-range-field { display:grid; grid-template-columns:auto minmax(100px,1fr) 42px; gap:8px; align-items:center; min-height:38px; border:1px solid #30373d; background:#151a1e; padding:6px 8px; color:#aeb8bf; font:800 9px ui-monospace,monospace; }
.team-editor-range-field input { width:100%; }
.team-editor-range-field strong { color:#f0c54f; text-align:right; }
.team-editor-check { grid-column:1/-1; display:flex; gap:8px; align-items:center; color:#aeb8bf; font:800 9px ui-monospace,monospace; letter-spacing:.04em; }
.team-editor-check input { accent-color:#d5b249; }
.team-editor-preset-strip { display:flex; flex-wrap:wrap; gap:5px; margin-top:3px; }
.team-editor-preset-chip { border:1px solid #30373d; background:#171c20; padding:3px 6px; font:800 8px ui-monospace,monospace; color:#98a2a9; }
@media (max-width:760px){ .team-editor-livery-tools{grid-template-columns:1fr;} .team-editor-check{grid-column:auto;} }

/* ==========================================================================\n   INDY HYBRID BATTERY — live Team View energy state\n   Mirrors the compact Driver Stress meter so charge, regen and deployment are\n   readable without opening the debug panel. Indy only.\n   ========================================================================== */
.indy-hybrid-meter {
  display: grid;
  grid-template-columns: 72px minmax(42px, 1fr) 30px;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin: -1px 0 6px;
  color: #8faab3;
  font: 900 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
}
.indy-hybrid-track {
  position: relative;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid #334149;
  background: #0b1013;
}
.indy-hybrid-track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #4f8fa5;
  box-shadow: 0 0 7px rgba(79,143,165,.28);
  transition: width .12s linear, background .12s linear, box-shadow .12s linear;
}
.indy-hybrid-meter > strong {
  text-align: right;
  color: #afc2c9;
  font-size: 7px;
}
.indy-hybrid-meter[data-state="charging"] { color: #7fc7a4; }
.indy-hybrid-meter[data-state="charging"] .indy-hybrid-track i {
  background: #60b987;
  box-shadow: 0 0 8px rgba(96,185,135,.52);
}
.indy-hybrid-meter[data-state="ready"] { color: #d9b86c; }
.indy-hybrid-meter[data-state="ready"] .indy-hybrid-track i {
  background: #b8934e;
  box-shadow: 0 0 7px rgba(184,147,78,.38);
}
.indy-hybrid-meter[data-state="deploy"] { color: #e5b85d; }
.indy-hybrid-meter[data-state="deploy"] .indy-hybrid-track i {
  background: #df9f42;
  box-shadow: 0 0 9px rgba(223,159,66,.56);
}
.indy-hybrid-meter[data-state="low"] { color: #dc7a67; }
.indy-hybrid-meter[data-state="low"] .indy-hybrid-track i { background: #bd6254; }
.indy-hybrid-meter[data-state="low"] > strong { color: #ef9989; }

/* ========================================================================== 
   MOBILE LANDSCAPE COCKPIT REWORK · v1.2.93
   Phone landscape mirrors the desktop two-screen setup -> race flow, but uses
   ultra-compact timing / team rails so the adaptive full-track race feed owns
   the majority of the screen.
   ========================================================================== */
@media (max-width: 900px) and (orientation: landscape) {
  /* Session shell --------------------------------------------------------- */
  body.mobile-landscape-session.race-view-active {
    width: 100%;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    background: #070a0c;
  }
  body.mobile-landscape-session.race-view-active .app {
    width: 100%;
    max-width: none;
    height: 100dvh;
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }
  /* The global product tabs/brand are deliberately absent in the race-manager
     landscape workflow. The small session strips below become the only chrome. */
  body.mobile-landscape-session.race-view-active .topbar,
  body.mobile-landscape-session.race-view-active .mobile-race-dock,
  body.mobile-landscape-session.race-view-active .mobile-drawer-backdrop {
    display: none !important;
  }
  body.mobile-landscape-session.race-view-active #raceManagerView,
  body.mobile-landscape-session.race-view-active #raceManagerView > .layout,
  body.mobile-landscape-session.race-view-active #raceManagerView .race-panel {
    width: 100%;
    max-width: none;
    height: 100dvh;
    min-height: 0;
    margin: 0;
    padding: 0;
  }

  /* SETUP SCREEN ---------------------------------------------------------- */
  body.mobile-landscape-session.desktop-flow-setup .desktop-setup-strip {
    display: none !important;
  }
  body.mobile-landscape-session.desktop-flow-setup .desktop-race-strip,
  body.mobile-landscape-session.desktop-flow-setup #raceManagerView .race-stage-area,
  body.mobile-landscape-session.desktop-flow-setup #raceManagerView .controls,
  body.mobile-landscape-session.desktop-flow-setup #raceManagerView .race-desk-column.sidebar {
    display: none !important;
  }
  body.mobile-landscape-session.desktop-flow-setup #raceManagerView .race-lower-grid {
    display: block !important;
    width: 100%;
    height: 100dvh;
    min-height: 0;
    margin: 0;
    padding: calc(5px + env(safe-area-inset-top,0px)) calc(7px + env(safe-area-inset-right,0px)) calc(5px + env(safe-area-inset-bottom,0px)) calc(7px + env(safe-area-inset-left,0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #090d0f;
  }
  body.mobile-landscape-session.desktop-flow-setup #raceManagerView .library-column {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    min-width: 0;
    margin: 0;
  }
  body.mobile-landscape-session.desktop-flow-setup .discipline-picker {
    display: block !important;
    margin: 0;
    padding: 6px;
    border-radius: 8px;
    border-color: #29343a;
  }
  body.mobile-landscape-session.desktop-flow-setup .discipline-picker-head {
    min-height: 22px;
    margin: 0 0 4px;
    align-items: center;
  }
  body.mobile-landscape-session.desktop-flow-setup .discipline-picker-head > div {
    gap: 6px;
  }
  body.mobile-landscape-session.desktop-flow-setup .discipline-step {
    width: 20px;
    height: 20px;
    min-width: 20px;
    font-size: 7px;
  }
  body.mobile-landscape-session.desktop-flow-setup .discipline-picker-head small { font-size: 5.5px; }
  body.mobile-landscape-session.desktop-flow-setup .discipline-picker-head strong { font-size: 9px; }
  body.mobile-landscape-session.desktop-flow-setup .discipline-picker .series-group {
    display: grid;
    grid-template-columns: repeat(6, minmax(0,1fr));
    gap: 4px;
    overflow: visible;
    padding: 0;
  }
  body.mobile-landscape-session.desktop-flow-setup .discipline-picker .series {
    min-width: 0;
    min-height: 36px;
    height: 36px;
    padding: 4px 5px;
    border-radius: 6px;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  body.mobile-landscape-session.desktop-flow-setup .discipline-picker .series > span { display: none; }
  body.mobile-landscape-session.desktop-flow-setup .discipline-picker .series > strong { font-size: 7.5px; }

  body.mobile-landscape-session.desktop-flow-setup .track-map-library,
  body.mobile-landscape-session.desktop-flow-setup .race-cloud-library {
    display: grid !important;
    margin: 0;
    padding: 7px;
    border-radius: 8px;
  }
  body.mobile-landscape-session.desktop-flow-setup .track-map-library-head {
    min-height: 24px;
    margin: 0;
    gap: 8px;
  }
  body.mobile-landscape-session.desktop-flow-setup .track-map-library-head strong,
  body.mobile-landscape-session.desktop-flow-setup .map-library-subhead strong { font-size: 9px; }
  body.mobile-landscape-session.desktop-flow-setup .track-map-library-head small,
  body.mobile-landscape-session.desktop-flow-setup .map-library-subhead small,
  body.mobile-landscape-session.desktop-flow-setup #trackMapLibraryStatus,
  body.mobile-landscape-session.desktop-flow-setup #sharedMapsStatus { font-size: 6.5px; }
  body.mobile-landscape-session.desktop-flow-setup .track-map-grid,
  body.mobile-landscape-session.desktop-flow-setup .shared-map-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 5px;
  }
  body.mobile-landscape-session.desktop-flow-setup .track-map-card {
    grid-template-rows: 64px auto;
    border-radius: 6px;
  }
  body.mobile-landscape-session.desktop-flow-setup .track-card-body { padding: 5px 6px 6px; }
  body.mobile-landscape-session.desktop-flow-setup .track-card-name { font-size: 9px; }
  body.mobile-landscape-session.desktop-flow-setup .track-feature { min-height: 16px; font-size: 5.5px; }
  body.mobile-landscape-session.desktop-flow-setup .track-import-note { display: none !important; }

  /* RACE SCREEN TOP STRIP ------------------------------------------------- */
  body.mobile-landscape-session.desktop-flow-race .desktop-setup-strip { display: none !important; }
  body.mobile-landscape-session.desktop-flow-race .desktop-race-strip {
    position: fixed;
    z-index: 180;
    top: 0;
    left: 0;
    right: 0;
    display: flex !important;
    align-items: center;
    min-height: 26px;
    height: 26px;
    margin: 0;
    padding: env(safe-area-inset-top,0px) calc(4px + env(safe-area-inset-right,0px)) 0 calc(4px + env(safe-area-inset-left,0px));
    gap: 5px;
    border: 0;
    border-bottom: 1px solid #263038;
    border-radius: 0;
    background: rgba(7,11,13,.97);
    box-shadow: none;
    backdrop-filter: blur(7px);
  }
  body.mobile-landscape-session.desktop-flow-race .desktop-flow-back {
    min-height: 20px;
    height: 20px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 6px;
    letter-spacing: .02em;
  }
  body.mobile-landscape-session.desktop-flow-race .desktop-flow-copy-right {
    margin: 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    text-align: left;
  }
  body.mobile-landscape-session.desktop-flow-race .desktop-flow-kicker { display: none; }
  body.mobile-landscape-session.desktop-flow-race .desktop-flow-copy strong {
    max-width: 36vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 7px;
    letter-spacing: .035em;
  }
  body.mobile-landscape-session.desktop-flow-race .desktop-flow-copy small { display: none; }

  /* Put status + lap into that same narrow upper band. */
  body.mobile-landscape-session.desktop-flow-race .race-meta {
    position: fixed !important;
    z-index: 185;
    top: env(safe-area-inset-top,0px);
    right: calc(4px + env(safe-area-inset-right,0px));
    left: auto;
    width: auto;
    height: 25px;
    padding: 2px 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    pointer-events: none;
  }
  body.mobile-landscape-session.desktop-flow-race .race-meta > span {
    min-height: 18px;
    height: 18px;
    padding: 1px 5px;
    border-radius: 4px;
    border-color: #303a40;
    background: #11171a;
    box-shadow: none;
    font-size: 6px;
    letter-spacing: .02em;
  }
  body.mobile-landscape-session.desktop-flow-race .race-meta #weatherText { display: none; }

  /* RACE SCREEN MAIN COCKPIT --------------------------------------------- */
  body.mobile-landscape-session.desktop-flow-race #raceManagerView .race-lower-grid { display: none !important; }
  body.mobile-landscape-session.desktop-flow-race #raceManagerView .race-panel {
    height: 100dvh;
    display: grid;
    grid-template-rows: minmax(0,1fr) 30px;
    padding-top: calc(26px + env(safe-area-inset-top,0px));
    padding-bottom: env(safe-area-inset-bottom,0px);
    background: #080c0e;
  }
  body.mobile-landscape-session.desktop-flow-race #raceManagerView .race-stage-area {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: grid !important;
    grid-template-columns: clamp(128px, 18vw, 154px) minmax(0,1fr) clamp(148px, 21vw, 180px);
    grid-template-rows: minmax(0,1fr);
    gap: 3px;
    align-items: stretch;
    overflow: hidden;
    padding: 3px calc(3px + env(safe-area-inset-right,0px)) 3px calc(3px + env(safe-area-inset-left,0px));
  }

  /* Live timing is always present and intentionally tiny: P#, colored car #,
     driver, and race timing only. */
  body.mobile-landscape-session.desktop-flow-race .timing-tower {
    order: 1;
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0;
    border: 1px solid #253039;
    border-radius: 5px;
    background: #0b1013;
    box-shadow: none;
    overflow: hidden;
  }
  body.mobile-landscape-session.desktop-flow-race .timing-panel-title { display: none !important; }
  body.mobile-landscape-session.desktop-flow-race .timing-tower .standings {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: hidden;
    overflow-x: hidden;
  }
  body.mobile-landscape-session.desktop-flow-race .timing-tower .row,
  body.mobile-landscape-session.desktop-flow-race .timing-tower .circuit-timing-row,
  body.mobile-landscape-session.desktop-flow-race .timing-tower.expanded .circuit-timing-row {
    min-height: 19px;
    height: 19px;
    padding: 1px 3px;
    grid-template-columns: 21px 19px minmax(0,1fr) 36px !important;
    gap: 2px;
    border-bottom-color: #1e272c;
  }
  body.mobile-landscape-session.desktop-flow-race .timing-tower .circuit-timing-row .pos {
    font-size: 7px;
    text-align: left;
  }
  body.mobile-landscape-session.desktop-flow-race .timing-car-number {
    width: 19px;
    height: 14px;
    border-radius: 3px;
    font-size: 6.5px;
  }
  body.mobile-landscape-session.desktop-flow-race .timing-tower .driver-name-text {
    font-size: 7px;
    line-height: 1;
  }
  body.mobile-landscape-session.desktop-flow-race .timing-tower .gap {
    font-size: 6.5px;
    text-align: right;
    overflow: hidden;
    text-overflow: clip;
  }
  body.mobile-landscape-session.desktop-flow-race .timing-tower .timing-lap-col,
  body.mobile-landscape-session.desktop-flow-race .timing-tower .timing-tire,
  body.mobile-landscape-session.desktop-flow-race .timing-tower .last-lap,
  body.mobile-landscape-session.desktop-flow-race .timing-tower .live-strategy-icons,
  body.mobile-landscape-session.desktop-flow-race .timing-tower .timing-fastest-star {
    display: none !important;
  }

  /* Center feed: adaptive camera now fits the whole authored circuit here. */
  body.mobile-landscape-session.desktop-flow-race .race-stage-shell {
    order: 2;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-height: none;
    display: grid;
    place-items: stretch;
    border: 1px solid #253039;
    border-radius: 5px;
    background: #244d2d;
    overflow: hidden;
  }
  body.mobile-landscape-session.desktop-flow-race #gameCanvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: fill;
    background: #244d2d;
  }
  body.mobile-landscape-session.desktop-flow-race .race-stage-badge,
  body.mobile-landscape-session.desktop-flow-race .track-evolution-badge,
  body.mobile-landscape-session.desktop-flow-race .race-stage-corner {
    display: none !important;
  }
  body.mobile-landscape-session.desktop-flow-race .start-lights-ui {
    top: 6px;
    gap: 3px;
    padding: 2px 4px;
  }
  body.mobile-landscape-session.desktop-flow-race .start-lights-ui .start-light {
    width: 8px;
    height: 8px;
  }

  /* Right pit wall: permanently visible, but stripped to immediate decisions. */
  body.mobile-landscape-session.desktop-flow-race .race-desk-column.sidebar {
    order: 3;
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-template-rows: auto minmax(0,1fr);
    gap: 3px;
    width: auto !important;
    min-width: 0;
    max-width: none !important;
    height: 100% !important;
    max-height: 100% !important;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  body.mobile-landscape-session.desktop-flow-race .mobile-sheet-head { display: none !important; }
  body.mobile-landscape-session.desktop-flow-race .race-desk-column.sidebar > .panel {
    display: block !important;
    min-width: 0;
    margin: 0;
    border-radius: 5px;
    box-shadow: none;
  }
  body.mobile-landscape-session.desktop-flow-race .debug-inspector-panel { display: none !important; }
  body.mobile-landscape-session.desktop-flow-race .race-control-panel {
    min-height: 20px;
    border-color: #2b363d;
  }
  body.mobile-landscape-session.desktop-flow-race .race-control-panel .panel-title,
  body.mobile-landscape-session.desktop-flow-race .race-control-tests { display: none !important; }
  body.mobile-landscape-session.desktop-flow-race .race-control-state {
    min-height: 20px;
    padding: 4px 5px;
    font-size: 7px;
    line-height: 1;
    border: 0;
  }
  body.mobile-landscape-session.desktop-flow-race .team-panel {
    min-height: 0;
    overflow: hidden;
    border-color: #2b363d;
  }
  body.mobile-landscape-session.desktop-flow-race .team-panel > .panel-title {
    min-height: 16px;
    padding: 3px 5px;
    font-size: 6.5px;
  }
  body.mobile-landscape-session.desktop-flow-race .team-auto-driving-row {
    min-height: 17px;
    padding: 2px 4px;
  }
  body.mobile-landscape-session.desktop-flow-race .team-auto-driving-copy strong { font-size: 6.5px; }
  body.mobile-landscape-session.desktop-flow-race .team-auto-driving-copy small { display: none; }
  body.mobile-landscape-session.desktop-flow-race .team-auto-driving-toggle input {
    width: 12px;
    height: 12px;
  }
  body.mobile-landscape-session.desktop-flow-race .team-panel #driverControls {
    gap: 3px;
    padding: 3px;
  }
  body.mobile-landscape-session.desktop-flow-race .team-panel .driver-card {
    padding: 3px 4px;
    border-radius: 5px;
  }
  body.mobile-landscape-session.desktop-flow-race .driver-stress-meter,
  body.mobile-landscape-session.desktop-flow-race .indy-hybrid-meter {
    grid-template-columns: auto minmax(28px,1fr) 23px;
    gap: 3px;
    margin-bottom: 2px;
    font-size: 5.5px;
    letter-spacing: .02em;
  }
  body.mobile-landscape-session.desktop-flow-race .driver-stress-track,
  body.mobile-landscape-session.desktop-flow-race .indy-hybrid-track { height: 3px; }
  body.mobile-landscape-session.desktop-flow-race .driver-stress-meter > strong,
  body.mobile-landscape-session.desktop-flow-race .indy-hybrid-meter > strong { font-size: 5.5px; }
  body.mobile-landscape-session.desktop-flow-race .team-panel .team-driver-head {
    min-height: 16px;
    margin-bottom: 2px;
    gap: 3px;
  }
  body.mobile-landscape-session.desktop-flow-race .team-panel .team-driver-identity {
    grid-template-columns: minmax(0,1fr) auto;
    gap: 3px;
  }
  body.mobile-landscape-session.desktop-flow-race .team-panel .team-driver-identity .driver-name { font-size: 7px; }
  body.mobile-landscape-session.desktop-flow-race .team-panel .team-live-state { font-size: 5.5px; }
  body.mobile-landscape-session.desktop-flow-race .team-panel .team-details-btn { display: none; }
  body.mobile-landscape-session.desktop-flow-race .team-resource-life {
    min-height: 12px;
    margin: 0 0 2px;
    gap: 3px;
    padding: 1px 3px;
  }
  body.mobile-landscape-session.desktop-flow-race .team-resource-life span,
  body.mobile-landscape-session.desktop-flow-race .team-resource-life strong { font-size: 5.5px; }
  body.mobile-landscape-session.desktop-flow-race .team-panel .team-quick-actions-compact {
    gap: 3px;
    margin-bottom: 2px;
  }
  body.mobile-landscape-session.desktop-flow-race .team-panel .team-quick-actions-compact .team-quick-btn {
    min-height: 22px;
    height: 22px;
    padding: 1px 3px;
    border-radius: 4px;
  }
  body.mobile-landscape-session.desktop-flow-race .team-panel .team-quick-actions-compact .team-quick-btn strong { font-size: 7px; }
  body.mobile-landscape-session.desktop-flow-race .team-panel .team-primary-pit-compact {
    padding: 2px 3px;
    border-radius: 4px;
  }
  body.mobile-landscape-session.desktop-flow-race .team-panel .team-pit-row {
    grid-template-columns: 18px minmax(0,1fr);
    gap: 2px;
  }
  body.mobile-landscape-session.desktop-flow-race .team-panel .team-primary-pit-compact .strategy-label { font-size: 5.5px; }
  body.mobile-landscape-session.desktop-flow-race .team-panel .team-primary-pit-compact .pit-buttons { gap: 2px; }
  body.mobile-landscape-session.desktop-flow-race .team-panel .team-primary-pit-compact .pit-buttons button {
    min-height: 19px;
    height: 19px;
    padding: 0 1px;
    border-radius: 3px;
    font-size: 5.5px;
  }
  body.mobile-landscape-session.desktop-flow-race .team-panel .team-primary-pit-compact .pit-status {
    margin: 2px 0 0 20px;
    max-width: calc(100% - 20px);
    font-size: 5px;
  }

  /* SMALL BOTTOM COMMAND STRIP ------------------------------------------- */
  body.mobile-landscape-session.desktop-flow-race #raceManagerView .controls {
    position: relative !important;
    inset: auto !important;
    z-index: 20;
    width: 100%;
    min-height: 30px;
    height: 30px;
    margin: 0;
    padding: 3px calc(4px + env(safe-area-inset-right,0px)) 3px calc(4px + env(safe-area-inset-left,0px));
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 3px;
    overflow: hidden;
    border: 0;
    border-top: 1px solid #283238;
    border-radius: 0;
    background: #0c1114;
    box-shadow: none;
  }
  body.mobile-landscape-session.desktop-flow-race .race-actions {
    display: flex;
    gap: 3px;
    min-width: 0;
  }
  body.mobile-landscape-session.desktop-flow-race .race-actions button {
    min-width: 48px;
    min-height: 24px;
    height: 24px;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 6.5px;
  }
  body.mobile-landscape-session.desktop-flow-race .laps-control {
    display: flex !important;
    min-height: 24px;
    height: 24px;
    margin-left: auto;
    padding: 1px 3px 1px 5px;
    gap: 3px;
    border-radius: 4px;
    font-size: 6px;
    white-space: nowrap;
  }
  body.mobile-landscape-session.desktop-flow-race .laps-control input {
    width: 39px;
    min-height: 19px;
    height: 19px;
    padding: 1px 3px;
    font-size: 7px;
  }
  body.mobile-landscape-session.desktop-flow-race .speed-group {
    display: flex !important;
    height: 24px;
    margin: 0;
    border-radius: 4px;
  }
  body.mobile-landscape-session.desktop-flow-race .speed-group .speed {
    min-width: 27px;
    min-height: 22px;
    height: 22px;
    padding: 0 3px;
    font-size: 6.5px;
  }
  body.mobile-landscape-session.desktop-flow-race .check { display: none !important; }

  /* A modal remains usable if Driver Details is opened by keyboard/accessibility. */
  body.mobile-landscape-session .team-details-dialog {
    width: min(620px, calc(100vw - 16px));
    max-height: calc(100dvh - 14px);
  }
}

/* Extremely short landscape phones get even narrower rails so the track remains
   the dominant visual surface. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 380px) {
  body.mobile-landscape-session.desktop-flow-race #raceManagerView .race-stage-area {
    grid-template-columns: clamp(116px, 17vw, 140px) minmax(0,1fr) clamp(136px, 20vw, 164px);
  }
  body.mobile-landscape-session.desktop-flow-race .timing-tower .row,
  body.mobile-landscape-session.desktop-flow-race .timing-tower .circuit-timing-row,
  body.mobile-landscape-session.desktop-flow-race .timing-tower.expanded .circuit-timing-row {
    min-height: 17px;
    height: 17px;
  }
  body.mobile-landscape-session.desktop-flow-race .team-panel > .panel-title,
  body.mobile-landscape-session.desktop-flow-race .team-auto-driving-row { display: none !important; }
}

/* ========================================================================== */
/* VIBE TEAM EDITOR · v1.2.108 consistent build             */
/* ========================================================================== */
.team-editor-driver-selection-summary {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  padding:10px 12px 4px;
}
.team-editor-driver-selection-summary > div {
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
  border:1px solid #343d43;
  background:#11171a;
  padding:9px 10px;
}
.team-editor-driver-selection-summary span,
.team-editor-active-driver-title {
  color:#7f8d95;
  font:900 8px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.1em;
}
.team-editor-driver-selection-summary strong {
  color:#f3d46c;
  font:900 13px ui-monospace,SFMono-Regular,Menlo,monospace;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.team-editor-driver-selection-summary small {
  color:#87939a;
  font-size:10px;
  line-height:1.35;
}
.team-editor-driver-pool {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  padding:10px 12px 12px;
}
.team-editor-pick-card {
  min-width:0;
  border:1px solid #303940;
  background:linear-gradient(180deg,#171e22,#11171a);
  padding:8px;
  transition:border-color .12s ease, background .12s ease, transform .12s ease;
}
.team-editor-pick-card.solo-selected {
  border-color:#d8b84d;
  background:linear-gradient(180deg,#292516,#17170f);
  box-shadow:inset 0 3px 0 #f0c54f;
}
.team-editor-pick-card.multiplayer-selected:not(.solo-selected) {
  border-color:#5c869a;
  box-shadow:inset 0 2px 0 #79a8bc;
}
.team-editor-pick-card-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:5px;
  color:#77858d;
  font:900 8px ui-monospace,SFMono-Regular,Menlo,monospace;
}
.team-editor-pick-card-top strong { color:#f0c54f; font-size:9px; }
.team-editor-pick-name {
  min-width:0;
  color:#edf1f3;
  font:900 11px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-bottom:7px;
}
.team-editor-pick-stats {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:4px;
  margin-bottom:8px;
}
.team-editor-pick-stats span {
  display:flex;
  flex-direction:column;
  gap:1px;
  border:1px solid #293137;
  background:#0c1114;
  padding:4px;
  color:#73818a;
  font:800 6px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.03em;
  overflow:hidden;
}
.team-editor-pick-stats b { color:#dfe5e8; font-size:9px; }
.team-editor-pick-actions {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
}
.team-editor-pick-actions button {
  min-height:30px;
  border:1px solid #3b464d;
  background:#20282d;
  color:#aeb8bf;
  font:900 7px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.04em;
  border-radius:3px;
  cursor:pointer;
}
.team-editor-pick-actions button[aria-pressed="true"] {
  border-color:#a98e31;
  background:#3a3218;
  color:#ffe27c;
}
.team-editor-active-driver-title {
  padding:10px 12px 0;
  border-top:1px solid #283138;
}
.team-editor-driver-card.solo-slot {
  border-color:#8b7630;
  box-shadow:inset 3px 0 0 #e3bd44;
}

@media (hover:hover) and (pointer:fine) {
  .team-editor-pick-card:hover { border-color:#55636c; transform:translateY(-1px); }
  .team-editor-pick-actions button:hover { background:#2a343a; color:#eef2f4; }
}
@media (max-width:1180px) {
  .team-editor-driver-pool { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:900px) {
  .team-editor-driver-pool { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px) {
  .team-editor-driver-selection-summary { grid-template-columns:1fr; }
  .team-editor-driver-pool { grid-template-columns:1fr; }
}

/* ========================================================================== */
/* VIBE TEAM EDITOR · v1.2.108 car-specific driver selector                  */
/* ========================================================================== */
.team-editor-driver-current-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 10px;
  padding:10px;
  border:1px solid #2f383e;
  background:#0d1316;
}
.team-editor-driver-current-row > div {
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.team-editor-driver-current-row small {
  color:#718089;
  font:900 7px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.11em;
}
.team-editor-driver-current-row b {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#f1f4f5;
  font:900 13px ui-monospace,SFMono-Regular,Menlo,monospace;
}
.team-editor-change-driver {
  flex:0 0 auto;
  min-height:36px;
  padding:0 14px;
  border:1px solid #8e792c;
  background:#322b14;
  color:#ffe16d;
  border-radius:3px;
  cursor:pointer;
  font:900 8px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.07em;
}
.team-editor-driver-card {
  border-color:#354047;
  background:linear-gradient(180deg,#151c20,#0f1518);
}

body.team-driver-modal-open { overflow:hidden; }
.team-driver-modal[hidden] { display:none !important; }
.team-driver-modal {
  position:fixed;
  inset:0;
  z-index:5000;
  display:grid;
  place-items:center;
  padding:28px;
  background:rgba(2,6,8,.84);
  backdrop-filter:blur(5px);
}
.team-driver-modal-panel {
  width:min(1120px,96vw);
  max-height:min(820px,88vh);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid #3a464d;
  background:#0c1114;
  box-shadow:0 18px 70px rgba(0,0,0,.6);
}
.team-driver-modal-header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:16px 18px;
  border-bottom:1px solid #2c353a;
  background:linear-gradient(180deg,#151c20,#101619);
}
.team-driver-modal-header > div {
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.team-driver-modal-header span {
  color:#75838b;
  font:900 8px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.12em;
}
.team-driver-modal-header strong {
  color:#f4d95f;
  font:900 17px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.04em;
}
.team-driver-modal-header small {
  color:#8c999f;
  font-size:11px;
  line-height:1.4;
}
.team-driver-modal-header button {
  width:40px;
  height:40px;
  flex:0 0 40px;
  border:1px solid #3a454b;
  background:#171f23;
  color:#d9e0e3;
  border-radius:4px;
  cursor:pointer;
  font-size:24px;
  line-height:1;
}
.team-driver-modal-grid {
  overflow:auto;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  padding:14px;
}
.team-driver-choice {
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:11px;
  border:1px solid #313b41;
  background:linear-gradient(180deg,#151c20,#101619);
}
.team-driver-choice.current {
  border-color:#d1ad2f;
  box-shadow:inset 0 3px 0 #f2cf3e;
  background:linear-gradient(180deg,#282415,#17150d);
}
.team-driver-choice.assigned-other:not(.current) {
  border-color:#547f90;
  box-shadow:inset 0 3px 0 #6da3b8;
}
.team-driver-choice-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  color:#6f7e86;
  font:900 7px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.08em;
}
.team-driver-choice.current .team-driver-choice-top strong { color:#f2d25d; }
.team-driver-choice.assigned-other .team-driver-choice-top strong { color:#83bfd4; }
.team-driver-choice-top strong { color:#93a0a6; }
.team-driver-choice-name {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#eef2f4;
  font:900 12px ui-monospace,SFMono-Regular,Menlo,monospace;
}
.team-driver-choice-points {
  color:#c6a840;
  font:900 9px ui-monospace,SFMono-Regular,Menlo,monospace;
}
.team-driver-choice-stats {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:5px;
}
.team-driver-choice-stats span {
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:5px;
  border:1px solid #283137;
  background:#0a0f12;
  color:#6f7d85;
  font:800 6px ui-monospace,SFMono-Regular,Menlo,monospace;
  overflow:hidden;
}
.team-driver-choice-stats b {
  color:#dce3e6;
  font-size:9px;
}
.team-driver-choice > button {
  min-height:36px;
  margin-top:auto;
  border:1px solid #3b474e;
  background:#20292e;
  color:#cbd4d8;
  border-radius:3px;
  cursor:pointer;
  font:900 7px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.05em;
}
.team-driver-choice > button:disabled {
  cursor:default;
  border-color:#8d7626;
  background:#332c15;
  color:#f4d75b;
}
@media (hover:hover) and (pointer:fine) {
  .team-editor-change-driver:hover { background:#423817; }
  .team-driver-modal-header button:hover { background:#242e33; }
  .team-driver-choice > button:not(:disabled):hover { border-color:#6a7d87; background:#2b363c; color:#fff; }
}
@media (max-width:980px) {
  .team-driver-modal-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:720px) {
  .team-driver-modal { padding:12px; }
  .team-driver-modal-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .team-editor-driver-current-row { align-items:stretch; flex-direction:column; }
  .team-editor-change-driver { width:100%; }
}
@media (max-width:460px) {
  .team-driver-modal-grid { grid-template-columns:1fr; }
}

/* v1.2.108 · keep every rotating slogan perfectly centered under the app title. */
.brand-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.brand-block #appTitle,
.brand-block #appSubtitle {
  text-align: center;
}

/* Live debug tuner: shared braking-zone steering look-ahead multiplier. */
.brake-lookahead-tuner {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  border: 1px solid #303b43;
  border-radius: 8px;
  background: #0e1316;
  color: #8f9ba2;
  font: 800 9px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .04em;
  white-space: nowrap;
}
.brake-lookahead-tuner[hidden] { display: none !important; }
.brake-lookahead-tuner input[type="range"] {
  width: 132px;
  accent-color: var(--accent);
  cursor: ew-resize;
}
.brake-lookahead-tuner output {
  min-width: 78px;
  color: #ffe179;
  text-align: right;
  font-size: 10px;
}
@media (max-width: 900px) {
  .brake-lookahead-tuner { min-height: 40px; padding: 0 6px; }
  .brake-lookahead-tuner input[type="range"] { width: 96px; }
}
@media (max-width: 640px) {
  body.race-view-active:not(.mobile-library-mode) .brake-lookahead-tuner { display: none !important; }
}

/* Keep the live tuner immediately to the right of Debug on desktop/laptop. */
@media (min-width: 901px) {
  .controls { grid-template-columns: auto auto auto auto auto; }
}