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

body {
  font-family: 'Courier New', Courier, monospace;
  background: #080c14;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: 13px;
  color: #a0c8e8;
}

#root { display: flex; flex-direction: column; height: 100vh; }

/* ── Header ── */
header {
  background: #060a12;
  color: #a0c8e8;
  padding: 0 1rem;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 1rem;
  border-bottom: 1px solid #00e5cc;
  box-shadow: 0 0 24px rgba(0,229,204,0.12);
}

.hdr-left { display: flex; align-items: center; gap: 0.6rem; }

.brand {
  font-size: 1.25rem;
  font-weight: 700;
  color: #00e5cc;
  letter-spacing: 3px;
  text-shadow: 0 0 10px rgba(0,229,204,0.9), 0 0 24px rgba(0,229,204,0.4);
}

.link-badge {
  font-size: 0.68rem;
  background: #0a1828;
  color: #5aafd4;
  border: 1px solid #1a4060;
  padding: 2px 7px;
  border-radius: 2px;
  letter-spacing: 0.5px;
}

#engineSel, #fuelSel {
  background: #0a1220;
  color: #a0c8e8;
  border: 1px solid #1a3a5a;
  padding: 4px 8px;
  border-radius: 2px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  outline: none;
}
#engineSel:focus, #fuelSel:focus {
  border-color: #00e5cc;
  box-shadow: 0 0 6px rgba(0,229,204,0.35);
}
#engineSel option, #fuelSel option { background: #0a1220; }

.hdr-center { display: flex; gap: 0.5rem; }

.hdr-center button {
  background: #071828;
  color: #00e5cc;
  border: 1px solid #00a090;
  padding: 7px 16px;
  border-radius: 2px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all 0.1s;
}
.hdr-center button:hover {
  background: rgba(0,229,204,0.08);
  border-color: #00e5cc;
  box-shadow: 0 0 14px rgba(0,229,204,0.35), inset 0 0 8px rgba(0,229,204,0.05);
}
#btnOptimise {
  color: #ffc800;
  border-color: #806400;
  background: #141000;
}
#btnOptimise:hover {
  background: rgba(255,200,0,0.1);
  border-color: #ffc800;
  box-shadow: 0 0 14px rgba(255,200,0,0.4);
}
#btnReset {
  color: #b060ff;
  border-color: #6030a0;
  background: #0e0a1e;
}
#btnReset:hover {
  background: rgba(140,60,220,0.1);
  border-color: #a060ff;
  box-shadow: 0 0 14px rgba(140,60,220,0.4);
}

.score-lbl {
  font-size: 0.62rem;
  color: #6aaad0;
  display: block;
  text-align: right;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.score-val {
  font-size: 1.6rem;
  font-weight: 700;
  color: #00e5cc;
  line-height: 1;
  text-shadow: 0 0 14px rgba(0,229,204,0.8);
}

/* ── Tabs ── */
.tabs {
  background: #060a12;
  border-bottom: 1px solid #0f2030;
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  padding: 0 0.5rem;
}

.tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 18px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  color: #5a90b8;
  cursor: pointer;
  margin-bottom: -1px;
  transition: color 0.1s;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.tab:hover { color: #00e5cc; background: rgba(0,229,204,0.04); }
.tab.active {
  color: #00e5cc;
  border-bottom-color: #00e5cc;
  background: rgba(0,229,204,0.07);
  text-shadow: 0 0 8px rgba(0,229,204,0.6);
}

.tab-hint { margin-left: auto; font-size: 10px; color: #4e88a8; padding: 0 0.5rem; }

/* ── Workspace ── */
.workspace { display: flex; flex: 1; overflow: hidden; }

/* ── Map Section ── */
.map-section {
  display: flex;
  flex-direction: column;
  flex: 0 0 62%;
  overflow: hidden;
  background: #080c14;
  border-right: 1px solid #0f1e30;
}

.map-wrap {
  flex: 1;
  overflow: auto;
  padding: 10px;
  background: #060a10;
  cursor: crosshair;
}

/* scrollbar cyberpunk */
.map-wrap::-webkit-scrollbar { width: 6px; height: 6px; }
.map-wrap::-webkit-scrollbar-track { background: #060a10; }
.map-wrap::-webkit-scrollbar-thumb { background: #1a3050; border-radius: 2px; }
.map-wrap::-webkit-scrollbar-thumb:hover { background: #00a080; }

.map-table {
  border-collapse: collapse;
  font-size: 11px;
  width: max-content;
}

.map-table th, .map-table td {
  border: 1px solid #0d1e2e;
  text-align: center;
  min-width: 46px;
  height: 30px;
  padding: 0 2px;
  user-select: none;
}

.map-table thead th {
  background: #050d18;
  color: #4a92b0;
  font-weight: 700;
  font-size: 10px;
  position: sticky;
  top: 0;
  z-index: 2;
  letter-spacing: 0.5px;
  border-color: #0d1e2e;
}

.corner-th {
  position: sticky !important;
  left: 0;
  z-index: 3 !important;
  background: #040b14 !important;
  color: #3a7090 !important;
  font-size: 9px;
  min-width: 52px !important;
  line-height: 1.2;
}

.load-label {
  background: #050d18 !important;
  font-weight: 700;
  color: #4a92b0;
  font-size: 10px;
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 52px !important;
  border-color: #0d1e2e !important;
}

.map-cell {
  cursor: crosshair;
  font-size: 11px;
  font-weight: 700;
  color: #c8e4f8;
  transition: outline 0.04s;
}
.map-cell:hover {
  outline: 2px solid rgba(0,229,204,0.7);
  outline-offset: -2px;
  position: relative;
  z-index: 1;
  color: #ffffff;
}
.map-cell.selected {
  outline: 2px solid #ff8c00 !important;
  outline-offset: -2px;
  position: relative;
  z-index: 2;
  color: #ffffff;
  box-shadow: inset 0 0 0 100px rgba(255,140,0,0.14), 0 0 8px rgba(255,140,0,0.3);
}
.map-cell.knock {
  outline: 2px solid #ff2060 !important;
  color: #ff6090 !important;
  box-shadow: inset 0 0 0 100px rgba(255,0,60,0.18), 0 0 8px rgba(255,32,96,0.5) !important;
}
.map-cell.dyno-hover {
  box-shadow: inset 0 0 0 100px rgba(0,229,204,0.18);
  position: relative;
  z-index: 1;
}

/* ── Cell Edit Bar ── */
.cell-bar {
  border-top: 1px solid #0f1e30;
  background: #060a12;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
  min-height: 50px;
  flex-wrap: wrap;
  box-shadow: 0 -1px 12px rgba(0,229,204,0.06);
}

#cellDesc {
  color: #5e98b8;
  font-size: 11px;
  flex: 1;
  min-width: 200px;
  letter-spacing: 0.3px;
}

.cell-edit { display: flex; align-items: center; gap: 8px; }

.adj-btn {
  background: #071828;
  color: #00e5cc;
  border: 1px solid #1a4060;
  width: 28px;
  height: 28px;
  border-radius: 2px;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.1s;
}
.adj-btn:hover {
  border-color: #00e5cc;
  background: rgba(0,229,204,0.08);
  box-shadow: 0 0 10px rgba(0,229,204,0.4);
  color: #ffffff;
}

.cell-val {
  font-size: 1.1rem;
  font-weight: 700;
  color: #00e5cc;
  min-width: 64px;
  text-align: center;
  text-shadow: 0 0 8px rgba(0,229,204,0.6);
}

#valSlider { width: 110px; accent-color: #00e5cc; cursor: pointer; }
.adj-hint { font-size: 10px; color: #4e88a8; }

/* ── Sim-row highlight in map ── */
.map-cell.sim-row {
  box-shadow: inset 0 0 0 100px rgba(0,160,255,0.08);
}
.load-label.sim-row-label {
  color: #00c8ff !important;
  text-shadow: 0 0 6px rgba(0,200,255,0.5);
}

/* ── Load-row slider ── */
.load-row-ctrl {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 3px 2px;
}
.load-row-lbl {
  font-size: 10px;
  font-weight: 700;
  color: #4a92b0;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}
#loadRowSlider {
  flex: 1;
  accent-color: #00c8ff;
  cursor: pointer;
  max-width: 180px;
}
.load-row-val {
  font-size: 11px;
  font-weight: 700;
  color: #00c8ff;
  min-width: 36px;
  text-align: right;
  text-shadow: 0 0 6px rgba(0,200,255,0.5);
}

/* ── Dyno Section ── */
.dyno-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 10px;
  background: #060a12;
  overflow: hidden;
  gap: 8px;
  min-width: 0;
}

.dyno-stats {
  background: #050d18;
  border: 1px solid #0f1e30;
  border-radius: 2px;
  padding: 7px 12px;
  font-size: 11px;
  color: #5292b0;
  flex-shrink: 0;
  line-height: 1.5;
  letter-spacing: 0.2px;
}
.dyno-stats strong { color: #00e5cc; text-shadow: 0 0 6px rgba(0,229,204,0.5); }

#dynoAnimCanvas {
  flex-shrink: 0;
  height: 110px;
  width: 100%;
  display: block;
  border-radius: 2px;
  background: #030810;
  border-bottom: 1px solid #091828;
}

#dynoCanvas {
  flex: 3;
  width: 100%;
  min-height: 0;
  display: block;
  border-radius: 2px;
}

#effCanvas {
  flex: 2;
  width: 100%;
  min-height: 0;
  display: block;
  border-radius: 2px;
  border-top: 1px solid #0a1828;
}

.knock-banner {
  background: #130010;
  border: 1px solid #ff2060;
  color: #ff4080;
  padding: 7px 12px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 2px;
  text-align: center;
  flex-shrink: 0;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  box-shadow: 0 0 16px rgba(255,32,96,0.3), inset 0 0 12px rgba(255,0,60,0.05);
  text-shadow: 0 0 8px rgba(255,64,128,0.7);
}

/* ── Disabled tab ── */
.tab.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Boost table (1D) ── */
.boost-wrap {
  flex: 1;
  overflow: auto;
  padding: 10px;
  background: #060a10;
  cursor: crosshair;
}
.boost-na-msg {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  font-size: 11px;
  color: #4e88a8;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ── Parameters panel ── */
.params-panel {
  flex: 1;
  overflow: auto;
  padding: 12px 16px;
  background: #060a10;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  align-content: start;
}
.param-card {
  background: #060e1a;
  border: 1px solid #0f2030;
  border-radius: 2px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.param-label {
  font-size: 9px;
  font-weight: 700;
  color: #4e88a8;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.param-val {
  font-size: 1.1rem;
  font-weight: 700;
  color: #00e5cc;
  text-shadow: 0 0 8px rgba(0,229,204,0.5);
  line-height: 1;
}
.param-unit {
  font-size: 10px;
  color: #4e88a8;
}
.param-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.param-slider {
  flex: 1;
  accent-color: #00e5cc;
  cursor: pointer;
}
.param-toggle {
  background: #071828;
  color: #5a90b8;
  border: 1px solid #1a4060;
  padding: 4px 10px;
  border-radius: 2px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all 0.1s;
}
.param-toggle.on {
  color: #00e5cc;
  border-color: #00a090;
  background: rgba(0,229,204,0.08);
  box-shadow: 0 0 8px rgba(0,229,204,0.25);
}
.param-section-hdr {
  grid-column: 1 / -1;
  font-size: 9px;
  font-weight: 700;
  color: #4e88a8;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 4px 0 2px;
  border-bottom: 1px solid #0f2030;
}

/* ── Forced Induction controls ── */
.hdr-divider {
  color: #1a3050;
  font-size: 18px;
  padding: 0 2px;
  flex-shrink: 0;
}

.fi-ctrl {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

#fiTypeSel {
  background: #0e0d1a;
  color: #ff8c00;
  border: 1px solid #6a3800;
  padding: 4px 8px;
  border-radius: 2px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  outline: none;
}
#fiTypeSel:focus { border-color: #ff8c00; box-shadow: 0 0 6px rgba(255,140,0,0.35); }
#fiTypeSel option { background: #0e0d1a; }

.fi-psi-ctrl {
  display: flex;
  align-items: center;
  gap: 5px;
}

#boostPsiSlider {
  width: 80px;
  accent-color: #ff8c00;
  cursor: pointer;
}

.fi-psi-val {
  font-size: 11px;
  font-weight: 700;
  color: #ff8c00;
  min-width: 44px;
  text-align: right;
  text-shadow: 0 0 8px rgba(255,140,0,0.6);
  letter-spacing: 0.5px;
}

/* ── Top Speed panel ── */
.topspeed-panel {
  flex: 1;
  overflow: auto;
  padding: 12px 16px;
  background: #060a10;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  align-content: start;
}

#topspeedCanvas {
  flex: 1;
  width: 100%;
  min-height: 0;
  display: block;
  border-radius: 2px;
  background: #030810;
}

/* ── Tooltip ── */
#tooltip {
  position: fixed;
  z-index: 9999;
  background: rgba(4, 10, 24, 0.97);
  border: 1px solid rgba(0, 229, 204, 0.45);
  color: #8ab8d8;
  font-family: 'Courier New', Courier, monospace;
  font-size: 10px;
  padding: 6px 10px;
  border-radius: 2px;
  max-width: 260px;
  pointer-events: none;
  display: none;
  line-height: 1.5;
  letter-spacing: 0.3px;
  box-shadow: 0 0 18px rgba(0,229,204,0.12), 0 2px 8px rgba(0,0,0,0.6);
}