/* ---- Engine sound: /engine/ page and the home-page block ----
   Sized for the car screen: every control is a big touch target (64 px and more). */

.eng-page { padding: 34px 0 10px; overflow: hidden; }
.eng-head { text-align: center; margin-bottom: 6px; }
.eng-head h1 { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.1; margin-bottom: 8px; }
.eng-head p { color: var(--dim); font-size: 17px; }

/* ---- the wheel ---- */
.eng-wheel-wrap { position: relative; max-width: 1500px; margin: 0 auto; }
.eng-wheel { --cw: min(500px, 80vw); position: relative; height: calc(var(--cw) * 0.46 + 216px); perspective: 1500px; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  outline: none; cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); }
.eng-wheel.dragging { cursor: grabbing; }
.eng-wheel:focus-visible .eng-card.is-center .eng-art::before { content: ''; position: absolute; inset: -6px; border-radius: 22px; outline: 2px solid rgba(255, 255, 255, 0.5); }
.eng-card { position: absolute; left: 50%; top: 10px; width: var(--cw); margin-left: calc(var(--cw) / -2);
  text-align: center; will-change: transform, opacity, filter; backface-visibility: hidden; }
.eng-art { position: relative; aspect-ratio: 1000 / 460; }
.eng-art::after { content: ''; position: absolute; left: 8%; right: 8%; bottom: -2px; height: 18%; z-index: -1; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(224, 24, 46, 0.42), rgba(224, 24, 46, 0) 70%); filter: blur(6px); }
.eng-art img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none;
  filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.55)); }
.eng-card.is-locked .eng-art img { filter: blur(7px) brightness(0.62) saturate(0.55); }
.eng-card.is-locked .eng-art::after { opacity: 0.35; }
.eng-badge { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px;
  border-radius: 999px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.eng-badge.free { background: var(--red); color: #fff; }
.eng-badge.sub { background: rgba(10, 12, 16, 0.78); color: #eef1f5; border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.eng-body { padding-top: 10px; }
.eng-body h3 { font-family: var(--display); font-size: clamp(21px, 2.2vw, 27px); font-weight: 700; line-height: 1.15; margin-bottom: 6px; }
.eng-line { color: var(--dim); font-size: 15.5px; line-height: 1.4; max-width: 440px; margin: 0 auto; }
.eng-rec { margin-top: 4px; font-size: 13.5px; color: var(--faint); }
.eng-actions { display: flex; gap: 12px; justify-content: center; margin-top: 16px; transition: opacity 0.2s ease; }
.eng-card:not(.is-center) .eng-actions { opacity: 0; pointer-events: none; }
.eng-demo, .eng-go, .eng-sub { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; min-width: 150px;
  padding: 0 24px; border-radius: 16px; font: 700 18px/1 var(--font); cursor: pointer; text-decoration: none;
  transition: background 0.15s ease, transform 0.12s ease-out, border-color 0.15s ease; }
.eng-demo { overflow: hidden; color: var(--text); background: rgba(255, 255, 255, 0.08); border: 1px solid var(--line-strong); }
.eng-demo:hover { background: rgba(255, 255, 255, 0.13); }
.eng-demo .i-stop { display: none; }
.eng-demo.playing .i-play { display: none; }
.eng-demo.playing .i-stop { display: block; }
.eng-demo.playing { border-color: rgba(224, 24, 46, 0.7); }
.eng-demo.loading .i-stop { opacity: 0.5; }
.eng-prog { position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: var(--red); transform-origin: left; transform: scaleX(var(--p, 0)); }
.eng-go { color: #fff; background: var(--red); border: 1px solid var(--red); }
.eng-go:hover { background: var(--red-press); }
.eng-sub { color: #eef1f5; background: transparent; border: 1px dashed rgba(255, 255, 255, 0.32); }
.eng-sub:hover { border-color: rgba(255, 255, 255, 0.6); }
.eng-demo:active, .eng-go:active, .eng-sub:active { transform: scale(0.97); }

.eng-arrow { position: absolute; top: 34%; z-index: 300; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: var(--text); background: rgba(18, 21, 28, 0.86); border: 1px solid var(--line-strong); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  transition: background 0.15s ease, transform 0.12s ease-out; }
.eng-arrow[data-dir="-1"] { left: max(12px, calc(50% - 560px)); }
.eng-arrow[data-dir="1"] { right: max(12px, calc(50% - 560px)); }
.eng-arrow:hover { background: #1f2430; }
.eng-arrow:active { transform: scale(0.94); }
.eng-wheel-foot { display: flex; justify-content: center; align-items: center; gap: 18px; flex-wrap: wrap; padding: 4px 0 6px; text-align: center; }
.eng-count { font-family: var(--display); font-size: 15px; color: var(--dim); font-variant-numeric: tabular-nums; }
.eng-subnote { color: var(--dim); font-size: 15.5px; }
.eng-subnote a { color: #ff6b78; font-weight: 700; text-decoration: none; margin-left: 4px; }
.eng-subnote a:hover { text-decoration: underline; }

/* ---- launch panel (the cockpit) ----
   Landscape screens (the car browser, a laptop): the whole panel fits one screen under the
   site header - gauges, the car with its arrows, drive mode, throttle and Start in one view.
   --cab = the panel height; everything inside scales from it. */
.eng-launch { --hdr: 67px; padding: 22px 0 26px; scroll-margin-top: var(--hdr); }
.eng-launch.is-first { padding-top: 12px; }
.eng-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.eng-panel { --cab: 640px; position: relative; display: flex; flex-direction: column; gap: 12px; border-radius: 26px; padding: 18px 22px 12px;
  background: linear-gradient(180deg, #10131a, #0b0d12); border: 1px solid var(--line); box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45); }
.eng-cockpit { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; }
.eng-gauges { display: flex; align-items: center; gap: 22px; }
.eng-tach { position: relative; width: clamp(180px, calc(var(--cab) * 0.52), 360px); flex: none; }
.eng-tach svg { display: block; width: 100%; height: auto; overflow: visible; }
.tach-bg, .tach-red, .tach-val { fill: none; stroke-width: 12; stroke-linecap: round; }
.tach-bg { stroke: rgba(255, 255, 255, 0.07); }
.tach-red { stroke: rgba(224, 24, 46, 0.45); stroke-linecap: butt; }
.tach-val { stroke: #f3f5f8; stroke-dasharray: 0 200; }
.eng-panel[data-state="gps"] .tach-val, .eng-panel[data-state="test"] .tach-val { stroke: #ff4253; }
.tach-tick { stroke: rgba(255, 255, 255, 0.45); stroke-width: 2; }
.tach-tick.red { stroke: #ff4253; }
.tach-num { fill: var(--dim); font: 600 11px var(--font); text-anchor: middle; }
.tach-needle { stroke: #fff; stroke-width: 3; stroke-linecap: round; } /* rotated by its transform attribute (around 100,100) */
.tach-hub { fill: #e0182e; }
.tach-read { position: absolute; left: 0; right: 0; bottom: 6%; text-align: center; }
.tach-read b { display: block; font-family: var(--display); font-size: clamp(22px, calc(var(--cab) * 0.05), 30px); line-height: 1; font-variant-numeric: tabular-nums; }
.tach-read span { color: var(--dim); font-size: 13px; }
.eng-read { display: flex; flex-direction: column; gap: clamp(8px, calc(var(--cab) * 0.03), 18px); min-width: 120px; }
.eng-read div { display: flex; flex-direction: column; }
/* room for three digits from the start: 99 -> 100 km/h must not push the car picture */
.eng-read { flex: none; }
.eng-read b { min-width: 3ch; }
.eng-read b { font-family: var(--display); font-size: clamp(40px, calc(var(--cab) * 0.12), 76px); line-height: 1; font-variant-numeric: tabular-nums; }
.eng-read span { color: var(--dim); font-size: 14px; margin-top: 4px; }

.eng-now { min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.eng-now-head span { display: block; color: var(--dim); font-size: 14px; }
.eng-now-head b { display: block; font-family: var(--display); font-size: clamp(20px, calc(var(--cab) * 0.042), 30px); line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eng-now-car { position: relative; flex: 0 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; }
.eng-now-car::after { content: ''; position: absolute; left: 18%; right: 18%; bottom: 4%; height: 16%; z-index: 0; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(224, 24, 46, 0.5), rgba(224, 24, 46, 0) 70%); filter: blur(8px); transition: opacity 0.3s ease; opacity: 0.55; }
.eng-panel[data-state="test"] .eng-now-car::after, .eng-panel[data-state="gps"] .eng-now-car::after { opacity: 1; }
.eng-now-car img { position: relative; z-index: 1; flex: 0 1 auto; width: 100%; min-width: 0; max-width: 720px;
  max-height: calc(var(--cab) * 0.44); height: auto; aspect-ratio: 1000 / 460; object-fit: contain;
  filter: drop-shadow(0 20px 22px rgba(0, 0, 0, 0.6)); user-select: none; -webkit-user-drag: none; }
.eng-now-car img.swap { animation: engSwap 0.32s cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes engSwap { from { opacity: 0; transform: translateX(18px) scale(0.97); filter: blur(4px); } to { opacity: 1; transform: none; } }
.eng-now-arrow { position: relative; z-index: 2; flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: var(--text); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line-strong); transition: background 0.15s ease, transform 0.12s ease-out; }
.eng-now-arrow:hover { background: rgba(255, 255, 255, 0.12); }
.eng-now-arrow:active { transform: scale(0.94); }
.eng-status { min-height: 24px; margin-top: 4px; font-size: 15.5px; color: var(--dim); }
.eng-status.ok { color: #6fdc9b; }
.eng-status.warn { color: #ffc56b; }
.eng-status.err { color: #ff7d88; }

/* full screen toggle (top right corner of the panel) */
.eng-full { position: absolute; top: 10px; right: 10px; z-index: 3; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; cursor: pointer;
  color: var(--dim); background: transparent; border: 1px solid transparent; transition: color 0.15s ease, background 0.15s ease, transform 0.12s ease-out; }
.eng-full:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); border-color: var(--line); }
.eng-full:active { transform: scale(0.94); }
.eng-full .i-off, .eng-full.is-on .i-on { display: none; }
.eng-full.is-on .i-off { display: block; }

/* bottom row: drive mode | throttle + neutral | start / stop */
.eng-ctl { --ch: clamp(76px, calc(var(--cab) * 0.17), 112px); flex: none; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.eng-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; height: var(--ch); border-radius: 20px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); }
.eng-mode { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-width: 0; border: 0; border-radius: 16px;
  background: transparent; color: var(--dim); cursor: pointer; font: inherit; transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease-out, box-shadow 0.18s ease; }
.eng-mode b { font-family: var(--display); font-size: clamp(14px, min(calc(var(--cab) * 0.032), 1.3vw), 20px); line-height: 1.1; white-space: nowrap; }
.eng-mode:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.eng-mode:active { transform: scale(0.97); }
.eng-mode:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.eng-mode[aria-checked="true"] { color: #fff; background: #262b36; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.eng-mode.m-sport[aria-checked="true"] { background: linear-gradient(180deg, #ef2238, #c7122a); box-shadow: 0 8px 24px rgba(224, 24, 46, 0.35); }
.eng-mode-bars { display: flex; align-items: flex-end; gap: 4px; height: 16px; }
.eng-mode-bars em { width: 6px; border-radius: 2px; background: rgba(255, 255, 255, 0.18); }
.eng-mode-bars em:nth-child(1) { height: 6px; }
.eng-mode-bars em:nth-child(2) { height: 11px; }
.eng-mode-bars em:nth-child(3) { height: 16px; }
.eng-mode-bars em.on { background: currentColor; }
.eng-panel.no-gears .eng-modes { opacity: 0.4; }

.eng-test, .eng-drive { display: flex; gap: 10px; min-width: 0; }
.eng-pedal, .eng-start, .eng-stop { display: flex; align-items: center; gap: 16px; flex: 1 1 auto; min-width: 0; height: var(--ch); padding: 0 20px; border-radius: 20px;
  cursor: pointer; text-align: left; color: var(--text); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.eng-pedal b, .eng-start b, .eng-stop b { display: block; font-family: var(--display); font-size: clamp(20px, calc(var(--cab) * 0.042), 27px); line-height: 1.1; }
.eng-pedal small, .eng-start small { display: block; margin-top: 4px; font-size: 14px; color: var(--dim); font-weight: 500; line-height: 1.25; }
.eng-pedal span, .eng-start span { min-width: 0; }
.eng-pedal { border: 1px solid var(--line-strong); background: linear-gradient(180deg, #1b1f28, #12151c); touch-action: none;
  transition: transform 0.08s ease-out, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; }
.eng-pedal svg { width: calc(var(--ch) * 0.38); height: calc(var(--ch) * 0.58); flex: none; transition: transform 0.08s ease-out; }
.eng-pedal svg rect { fill: #262b36; stroke: rgba(255, 255, 255, 0.35); stroke-width: 2; }
.eng-pedal svg path { stroke: rgba(255, 255, 255, 0.28); stroke-width: 3; stroke-linecap: round; }
.eng-pedal.down { transform: scale(0.985); border-color: rgba(224, 24, 46, 0.85); background: linear-gradient(180deg, #2a1015, #170a0d); box-shadow: inset 0 0 50px rgba(224, 24, 46, 0.28); }
.eng-pedal.down svg { transform: perspective(200px) rotateX(18deg); }
.eng-pedal[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
.eng-start { border: 1px solid var(--red); background: linear-gradient(180deg, #ef2238, #c7122a); box-shadow: 0 16px 40px rgba(224, 24, 46, 0.3);
  transition: transform 0.12s ease-out, filter 0.15s ease; }
.eng-start small { color: rgba(255, 255, 255, 0.82); }
.eng-start:hover { filter: brightness(1.06); }
.eng-stop { border: 1px solid rgba(224, 24, 46, 0.7); background: #160b0e; transition: transform 0.12s ease-out, background 0.15s ease; }
.eng-stop:hover { background: #22101a; }
.eng-start:active, .eng-stop:active { transform: scale(0.98); }
/* test on the spot: Start (go to GPS) and Engine off share the cell */
.eng-panel[data-state="test"] .eng-start small { display: none; }
.eng-panel[data-state="test"] .eng-stop { flex: 0 0 auto; padding: 0 18px; }
.eng-panel[data-state="test"] .eng-stop span { display: none; }
.eng-start svg, .eng-stop svg { flex: none; }
/* neutral: a compact switch tile next to the throttle */
.eng-switch { flex: none; width: calc(var(--ch) * 0.95); height: var(--ch); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border-radius: 20px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); font-size: 13.5px; color: var(--dim); cursor: pointer; user-select: none; }
.eng-switch em { font-style: normal; white-space: nowrap; }
.eng-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.eng-switch span { position: relative; width: 52px; height: 30px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); transition: background 0.15s ease; flex: none; }
.eng-switch span::after { content: ''; position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform 0.18s cubic-bezier(0.23, 1, 0.32, 1); }
.eng-switch input:checked + span { background: var(--red); }
.eng-switch input:checked + span::after { transform: translateX(22px); }
.eng-switch input:checked ~ em { color: var(--text); }
.eng-switch input:focus-visible + span { outline: 2px solid #fff; outline-offset: 3px; }
.eng-terms { flex: none; font-size: 12.5px; color: var(--faint); line-height: 1.4; text-align: center; }
.eng-terms a, .eng-tm a { color: var(--dim); text-decoration: underline; }
.eng-tm { margin: 8px auto 40px; font-size: 12.5px; line-height: 1.55; color: var(--faint); max-width: 1000px; text-align: center; }

/* landscape: the cockpit is exactly one screen tall */
@media (min-width: 760px) and (min-aspect-ratio: 4/5) {   /* landscape and the nearly square car browser */
  .eng-panel { --cab: calc(100vh - var(--hdr) - 34px); height: var(--cab); min-height: 400px; max-height: 760px; }
  @supports (height: 100dvh) { .eng-panel { --cab: calc(100dvh - var(--hdr) - 34px); } }
  .eng-launch { padding: 12px 0 22px; }
}
/* the site's mark inside the panel: shown in full screen (the header is gone), so a filmed
   screen still says where the sound comes from */
.eng-brand { position: absolute; top: 14px; left: 16px; z-index: 3; display: none; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.eng-brand-t { display: flex; flex-direction: column; line-height: 1.1; }
.eng-brand-t b { font-family: var(--display); font-size: 17px; }
.eng-brand-t small { font-size: 12.5px; color: var(--dim); }
html.eng-fs .eng-brand { display: inline-flex; }
/* full screen: only the cockpit, edge to edge */
html.eng-fs .site-head, html.eng-fs .eng-page, html.eng-fs .eng-tm, html.eng-fs footer { display: none !important; }
html.eng-fs .eng-launch { padding: 0; }
html.eng-fs .eng-launch .wrap { max-width: none; padding: 0; }
html.eng-fs .eng-panel { --cab: calc(100vh - 50px); height: 100vh; max-height: none; border-radius: 0; border: 0; padding-top: 62px; }

/* [hidden] must win over the button display rules */
.eng-panel [hidden], .eng-dlg [hidden], .eng-gpshint[hidden] { display: none !important; }

/* ---- dialogs ---- */
.eng-dlg { margin: auto; max-width: 520px; width: calc(100% - 32px); padding: 30px; border-radius: 22px; border: 1px solid var(--line-strong);
  background: #12151c; color: var(--text); box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7); }
.eng-dlg form { position: relative; }
.eng-dlg::backdrop { background: rgba(4, 5, 8, 0.72); backdrop-filter: blur(4px); }
.eng-dlg h3 { font-family: var(--display); font-size: 23px; margin: 0 40px 12px 0; line-height: 1.2; }
.eng-dlg p { color: var(--dim); font-size: 16.5px; margin-bottom: 24px; }
.eng-dlg-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.eng-dlg-btns .btn { flex: 1 1 180px; min-height: 64px; font-size: 18px; justify-content: center; }
.eng-dlg-x { position: absolute; top: -12px; right: -12px; width: 52px; height: 52px; border-radius: 50%; border: 0; background: transparent; color: var(--dim);
  font-size: 32px; line-height: 1; cursor: pointer; }
.eng-dlg-x:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.eng-dlg[open] { animation: engDlg 0.2s cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes engDlg { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }

/* ---- Tesla: the browser asks for the location in a pop-up at the top left (under the site
   settings icon of the address bar). The hint sits to the right of it and points at it. ---- */
.eng-gpshint { position: fixed; top: 8px; left: clamp(12px, 30vw, 360px); z-index: 2000; display: flex; flex-direction: column; align-items: flex-start; pointer-events: none;
  animation: engHintIn 0.3s cubic-bezier(0.23, 1, 0.32, 1); }
.eng-gpshint-arrow { width: 120px; height: 90px; color: #ff4253; margin-left: -18px; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
  animation: engHintNudge 1.4s ease-in-out infinite; }
.eng-gpshint-box { position: relative; pointer-events: auto; max-width: 380px; margin-top: -6px; padding: 18px 56px 18px 20px; border-radius: 18px;
  background: #1a0b0f; border: 2px solid #ff4253; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); }
.eng-gpshint-box b { display: block; font-family: var(--display); font-size: 21px; margin-bottom: 6px; }
.eng-gpshint-box span { display: block; font-size: 16.5px; line-height: 1.4; color: #f1d7da; }
.eng-gpshint-x { position: absolute; top: 4px; right: 4px; width: 52px; height: 52px; border: 0; border-radius: 50%; background: transparent; color: #f1d7da;
  font-size: 30px; line-height: 1; cursor: pointer; }
.eng-gpshint-x:hover { background: rgba(255, 255, 255, 0.08); }
@keyframes engHintIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes engHintNudge { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-6px, -6px); } }

/* ---- home page block: same drum, frozen ---- */
.eng-home { padding: 64px 0 40px; overflow: hidden; }
.eng-home .section-h { margin-bottom: 14px; }
.eng-home-row { display: flex; align-items: flex-end; justify-content: center; margin: 0 auto; max-width: 1240px; text-decoration: none; color: inherit;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%); }
.eng-home-row figure { position: relative; flex: none; margin: 0 -3%; }
.eng-home-row img { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 460; object-fit: contain; filter: drop-shadow(0 16px 16px rgba(0, 0, 0, 0.55)); }
.eng-home-row .c0 { width: 38%; z-index: 3; }
.eng-home-row .c1 { width: 25%; z-index: 2; opacity: 0.7; }
.eng-home-row .c1 img { filter: blur(3px) brightness(0.7); }
.eng-home-row .c2 { width: 17%; z-index: 1; opacity: 0.45; }
.eng-home-row .c2 img { filter: blur(6px) brightness(0.6); }
.eng-home-row .c0::after { content: ''; position: absolute; left: 10%; right: 10%; bottom: -2%; height: 18%; z-index: -1; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(224, 24, 46, 0.5), rgba(224, 24, 46, 0) 70%); filter: blur(8px); }
.eng-home-cta { display: flex; justify-content: center; margin-top: 22px; }

/* medium screens (the car browser is about 800-1100 px wide and nearly square): the controls
   take two rows (modes across the full width, then throttle | Start), the car arrows sit over
   the picture's empty edges so the car gets the whole column, and type follows the narrower
   of width and height */
@media (min-width: 760.02px) and (max-width: 1099px) {
  .eng-panel { gap: 10px; padding: 16px 18px 10px; }
  .eng-cockpit { gap: 14px; }
  .eng-gauges { gap: 14px; }
  /* speed and gear in a row under the tach: the car keeps the width */
  .eng-gauges { flex-direction: column; gap: 4px; }
  .eng-tach { width: clamp(160px, min(calc(var(--cab) * 0.4), 32vw), 300px); }
  .eng-read { flex-direction: row; justify-content: center; gap: 22px; min-width: 0; }
  .eng-read div { align-items: center; }
  .eng-read b { font-size: clamp(32px, min(calc(var(--cab) * 0.08), 5.6vw), 54px); }
  .eng-read b { text-align: center; }
  .eng-read span { margin-top: 2px; }
  .eng-now-car { margin: 4px 0 0; }
  .eng-now-car img { max-width: 100%; max-height: calc(var(--cab) * 0.42); }
  .eng-now-arrow { position: absolute; top: 50%; z-index: 2; width: 56px; height: 56px; margin-top: -28px; background: rgba(18, 21, 28, 0.82); }
  #nowPrev { left: 0; }
  #nowNext { right: 0; }
  .eng-ctl { --ch: clamp(62px, min(calc(var(--cab) * 0.12), 9vw), 84px); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .eng-modes { grid-column: 1 / -1; }
  .eng-mode { flex-direction: row; gap: 10px; }
  .eng-mode b { font-size: clamp(16px, min(calc(var(--cab) * 0.032), 2.3vw), 21px); }
  .eng-pedal, .eng-start, .eng-stop { gap: 12px; padding: 0 16px; }
  .eng-pedal b, .eng-start b, .eng-stop b { font-size: clamp(18px, min(calc(var(--cab) * 0.036), 2.6vw), 24px); }
  .eng-pedal small, .eng-start small { font-size: 13px; margin-top: 2px; }
  .eng-pedal svg { width: calc(var(--ch) * 0.34); height: calc(var(--ch) * 0.56); }
  .eng-switch { width: calc(var(--ch) * 1.25); gap: 6px; }
}
/* the hint lines under Throttle and Start stay on one line or are cut, never break the box */
.eng-pedal small, .eng-start small { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@media (max-width: 760px) {
  .eng-page { padding-top: 22px; }
  .eng-wheel { height: calc(var(--cw) * 0.46 + 240px); }
  .eng-arrow { width: 60px; height: 60px; top: 24%; }
  .eng-panel { padding: 16px; border-radius: 20px; }
  .eng-cockpit { grid-template-columns: 1fr; }
  .eng-gauges { gap: 16px; justify-content: center; }
  .eng-tach { width: min(210px, 52vw); }
  .eng-read { min-width: 0; }
  .eng-read b { font-size: clamp(34px, 12vw, 54px); }
  .eng-now-car img { max-height: none; }
  .eng-ctl { --ch: 96px; grid-template-columns: 1fr; }
  .eng-full { display: none; }
  html.eng-fs .eng-full { display: grid; }   /* entered on a wide screen, then turned: the way out stays */
  .eng-now-arrow { width: 52px; height: 52px; }
  .eng-home-row .c2 { display: none; }
  .eng-home-row .c0 { width: 64%; }
  .eng-home-row .c1 { width: 38%; }
}
@media (prefers-reduced-motion: reduce) {
  .eng-pedal, .eng-pedal svg, .eng-actions { transition: none; }
  .eng-dlg[open], .eng-now-car img.swap, .eng-gpshint, .eng-gpshint-arrow { animation: none; }
}