/* Ghost Engine (formerly Motorlyd). Cybertruck-inspired: chamfered corners, thin light lines, big flat numbers.
   Dark theme: near-black and steel greys with white light lines. Light theme: brushed steel with black lines.
   Every colour is a variable so the themes only swap variables (html[data-theme]).
   Written for the Tesla browser (older Chromium): no flex gap, no aspect-ratio, no :has(), no inset shorthand. */
:root {
  --bg: #08090a; --bg-image: none;
  --panel: #101214; --panel-2: #16191c; --deep: #0c0e10; --sheet: #121417; --tile: rgba(16, 18, 20, .92);
  --line: #2b3035; --steel: #9aa3ad; --text: #e9edf2; --dim: #5d656e; --glow: #f4f8ff; --on-glow: #08090a;
  --red: #ff3b30; --tick: #262b30; --tick-red: #43201e; --bar-line: rgba(244, 248, 255, .55); --ok-bg: #1f3a2a;
  --font: 'Chakra Petch', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
html[data-theme="light"] {
  --bg: #c7ccd1;
  --bg-image: linear-gradient(100deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .25) 70%, rgba(0, 0, 0, .04)),
              repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0, rgba(255, 255, 255, .06) 1px, rgba(0, 0, 0, .03) 2px, rgba(0, 0, 0, 0) 3px);
  --panel: #b7bdc3; --panel-2: #aab1b8; --deep: #d6dade; --sheet: #c0c6cb; --tile: rgba(214, 218, 222, .92);
  --line: #8d959d; --steel: #3c434a; --text: #0d0f11; --dim: #5a626a; --glow: #0d0f11; --on-glow: #e9edf2;
  --red: #c9231a; --tick: #a3aab1; --tick-red: #c49a96; --bar-line: rgba(13, 15, 17, .45); --ok-bg: #9cc4a8;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); background-image: var(--bg-image); color: var(--text); font: 18px/1.35 var(--font);
  display: flex; flex-direction: column; min-height: 100%; overflow: hidden;
  -webkit-user-select: none; user-select: none; transition: background-color .6s, color .6s;
}
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }
.ico { width: 24px; height: 24px; display: block; }

/* Chamfered panels */
.chip, .icon-btn, .sheet, .toast, .toast-inner, .row-btn, .stop-btn, .lang-btn, .seg, .test, .gas, .engine-tile {
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}

/* Top bar with a thin light line under it */
.bar { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; z-index: 3; }
.bar::after {
  content: ''; position: absolute; left: 24px; right: 24px; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--bar-line) 20%, var(--bar-line) 80%, transparent);
}
.logo { display: flex; align-items: center; color: var(--text); }
.logo .mark { width: 34px; height: 34px; margin-right: 12px; }
.logo .word { font-weight: 700; font-size: 22px; letter-spacing: 6px; }
.bar-right { display: flex; align-items: center; }
/* Language picker in the top bar */
.lang { display: flex; margin-left: 10px; }
.lang-btn { width: 52px; height: 48px; margin-left: 4px; border: 0; background: var(--panel); color: var(--dim); font-size: 15px; font-weight: 700; letter-spacing: 1px; }
.lang-btn[aria-checked="true"] { background: var(--panel-2); color: var(--text); box-shadow: inset 0 -2px 0 var(--glow); }
.icon-btn { width: 48px; height: 48px; margin-left: 10px; border: 0; background: var(--panel-2); display: flex; align-items: center; justify-content: center; }

/* The instrument cluster */
.cluster {
  flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 8px 24px 96px;   /* bottom set by fitCluster() */
  transition: opacity 1.4s ease, filter 1.4s ease;
}
.cluster-svg { width: 100%; height: 100%; max-width: 1180px; font-family: var(--font); }   /* scales to fit both ways */
.cluster text { text-anchor: middle; fill: var(--text); font-family: var(--font); }
.cluster .tick { fill: var(--tick); }
.cluster .tick.red { fill: var(--tick-red); }
.cluster .tick.on { fill: var(--glow); }
.cluster .tick.on.red { fill: var(--red); }
.cluster .scale { fill: var(--dim); font-size: 22px; font-weight: 600; }
.cluster .big { font-size: 64px; font-weight: 700; }
.cluster .xl { font-size: 92px; }
.cluster .xxl { font-size: 150px; font-weight: 700; letter-spacing: -2px; }
.cluster .mid { font-size: 40px; font-weight: 700; }
.cluster .unit { fill: var(--steel); font-size: 18px; letter-spacing: 5px; }
.cluster .label { fill: var(--dim); font-size: 14px; letter-spacing: 4px; }
.cluster .gear { font-size: 60px; font-weight: 700; }
.cluster .badge { fill: var(--panel); stroke: var(--glow); stroke-width: 2; }
.cluster .engine-pick { cursor: pointer; }
.cluster .engine-pick text { fill: var(--steel); font-size: 19px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; }
.cluster .engine-pick path { stroke: var(--steel); }
.cluster .engine-pick:active text { fill: var(--text); }
.cluster .note { fill: var(--dim); font-size: 17px; letter-spacing: 1px; transition: opacity .8s; }
.cluster .note.waiting { opacity: 0; }   /* hidden while the volume toast says the same */

/* Start screen: the cluster dimmed behind the engine list and a start button */
body.off .cluster { opacity: .13; filter: grayscale(1); }
.start {
  position: absolute; left: 0; right: 0; bottom: 0; top: 70px; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: opacity .5s ease;
}
body.on .start { opacity: 0; pointer-events: none; }

/* Engine list: a grid of tiles (start screen and the switch-engine panel) */
.engine-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 12px; width: 100%; max-width: 1000px; padding: 0 24px; }
.engine-tile { min-height: 104px; padding: 14px 18px; border: 0; background: var(--tile); text-align: left; color: var(--text); }
.engine-tile[aria-checked="true"] { background: var(--panel-2); box-shadow: inset 0 0 0 2px var(--glow); }
.engine-tile .spec { display: block; color: var(--steel); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; }
.engine-tile .name { display: block; font-size: 24px; font-weight: 700; letter-spacing: 1px; margin: 2px 0 2px; }
.engine-tile .desc { display: block; color: var(--steel); font-size: 14px; line-height: 1.3; }
.engine-tile .cars { display: block; color: var(--dim); font-size: 13px; line-height: 1.3; margin-top: 5px; }

.start-btn {
  position: relative; margin-top: 26px; width: 340px; height: 90px; border: 0; background: var(--glow);
  clip-path: polygon(28px 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 28px 100%, 0 50%);
}
.start-btn::before {
  content: ''; position: absolute; top: 2px; left: 2px; right: 2px; bottom: 2px; background: var(--deep);
  clip-path: polygon(27px 0, calc(100% - 27px) 0, 100% 50%, calc(100% - 27px) 100%, 27px 100%, 0 50%);
}
.start-btn span { position: relative; font-size: 30px; font-weight: 700; letter-spacing: 12px; padding-left: 12px; }
.start-btn:active::before { background: var(--panel-2); }
.start-btn:disabled span { opacity: .5; }
.start-hint { color: var(--dim); font-size: 15px; letter-spacing: 2px; text-transform: uppercase; margin: 14px 0 0; }

/* "A product by Frederik Rømming" at the bottom of the start screen */
.made-by { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; margin: 0; }
.made-by a { color: var(--dim); font-size: 14px; letter-spacing: 2px; text-decoration: underline; text-underline-offset: 4px; padding: 10px 14px; }
.made-by a:active { color: var(--text); }

/* Bottom dock: stop engine above hold-to-rev, same size. Hold-to-rev keeps its slot while driving (invisible),
   and the toast floats above the dock, so nothing else moves when either comes or goes. */
.dock {
  position: fixed; left: 0; right: 0; bottom: 20px; z-index: 4;
  display: flex; flex-direction: column; align-items: center; pointer-events: none;
}
.dock > * { pointer-events: auto; }
.stop-btn {
  width: 360px; height: 64px; margin-top: 10px; border: 0; background: var(--panel-2); color: var(--red);
}
.stop-btn, .gas { font-size: 16px; font-weight: 700; letter-spacing: 5px; text-transform: uppercase; }
.gas {
  width: 360px; height: 64px; margin-top: 10px;
  border: 0; background: var(--panel-2); color: var(--steel);
  touch-action: none; -webkit-touch-callout: none;
}
.gas.held { background: var(--glow); color: var(--on-glow); }
.gas.off { visibility: hidden; pointer-events: none; }

/* Volume toast after start: floats above the dock */
.toast {
  position: absolute; left: 50%; bottom: 100%; width: 640px; margin: 0 0 4px -320px;
  padding: 1px; background: var(--glow); transition: opacity .8s, transform .8s;
}
.toast-inner { display: flex; align-items: center; padding: 16px 22px; background: var(--deep); text-align: left; }
.toast .ico { width: 34px; height: 34px; flex: none; margin-right: 16px; color: var(--glow); }
.toast strong { display: block; font-size: 20px; letter-spacing: .5px; }
.toast span { display: block; color: var(--steel); font-size: 15px; }
.toast.fade { opacity: 0; transform: translateY(12px); }

/* Menu and the switch-engine panel */
.sheet {
  position: fixed; top: 76px; right: 24px; width: 440px; max-height: calc(100% - 100px); overflow-y: auto; z-index: 6;
  background: var(--sheet); padding: 18px 22px 22px;
}
/* The engine dialog: centred on the screen over everything, with the rest dimmed behind it */
.sheet.wide {
  left: 50%; top: 50%; right: auto; width: 1040px; max-width: calc(100% - 32px); max-height: calc(100% - 32px);
  transform: translate(-50%, -50%);
}
.backdrop { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 5; background: rgba(0, 0, 0, .6); }
html[data-theme="light"] .backdrop { background: rgba(60, 66, 72, .45); }
.sheet.wide .engine-grid { padding: 0; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sheet-head h2 { margin: 0; font-size: 16px; letter-spacing: 4px; text-transform: uppercase; color: var(--steel); }
.row, .row-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 64px; margin: 8px 0; padding: 10px 16px; background: var(--panel-2); border: 0; text-align: left; }
.row.col { flex-direction: column; align-items: stretch; }
.row small { display: block; color: var(--dim); font-size: 13px; }
.row input[type=checkbox] { width: 28px; height: 28px; accent-color: var(--glow); }
.row-value { color: var(--steel); font-size: 15px; }
.row-btn .row-value { display: flex; align-items: center; }
.row-btn .row-value .ico { width: 18px; height: 18px; margin-left: 8px; }
.seg-group { display: flex; margin: 10px -4px 2px; }
.seg { flex: 1; min-height: 48px; margin: 0 4px; border: 0; background: var(--panel); color: var(--steel); font-size: 15px; font-weight: 600; }
.seg[aria-checked="true"] { background: var(--glow); color: var(--on-glow); }
#soundCheck { margin-top: 10px; color: var(--steel); font-size: 15px; }
#soundCheck summary { cursor: pointer; padding: 10px 0; }
.tests { display: flex; flex-wrap: wrap; margin: 8px -4px; }
.test { flex: 1 1 180px; min-height: 52px; margin: 4px; border: 0; background: var(--panel-2); font-size: 15px; }
.test.done { background: var(--ok-bg); }
.diag, .debug { font: 13px/1.5 Menlo, Consolas, monospace; color: var(--dim); margin-top: 8px; white-space: pre-wrap; }

/* Loading screen (intro.js): every time the app opens. Rev-counter ring around the ghost (Frederik's pick, B); the tap
   on "Tryk for at tænde" starts the engine and the ring follows its revs (class "on" per tick, set from app.js) */
.intro {
  position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 20; background: var(--bg); background-image: var(--bg-image);
  display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity .6s;
}
.intro.out { opacity: 0; }
.intro-mark { width: 220px; height: 220px; overflow: visible; }
.intro line { stroke: var(--tick); stroke-width: 2.2; animation: tick-on .08s forwards, tick-off .12s forwards; }
.intro line.red { stroke: var(--tick-red); }
.intro.ignited line { animation: none; }
.intro line.on { stroke: var(--glow); }
.intro line.red.on { stroke: #ff3b30; }
.intro.ignited .fill { animation: none; opacity: 1; }
.intro-go { margin-top: 30px; min-width: 300px; min-height: 64px; padding: 0 28px; border: 1px solid var(--glow); background: transparent;
  color: var(--text); font: inherit; font-size: 16px; font-weight: 700; letter-spacing: 5px; text-transform: uppercase; opacity: 0;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);
  animation: intro-fade .6s 1.4s forwards, go-pulse 1.6s 2s ease-in-out infinite; }
@keyframes go-pulse { 0%, 100% { background: transparent; } 50% { background: rgba(244, 248, 255, .12); } }
.intro.ignited .intro-go { animation: none; opacity: 0; transition: opacity .3s; pointer-events: none; }
@keyframes tick-on { to { stroke: var(--glow); } }
@keyframes tick-off { to { stroke: var(--tick); } }
.intro .fill { color: var(--text); opacity: 0; animation: intro-fade .6s .3s forwards; }
@keyframes intro-fade { to { opacity: 1; } }
.intro-word { margin-top: 18px; font-weight: 700; font-size: 26px; letter-spacing: 12px; padding-left: 12px; opacity: 0;
  animation: intro-word 1s .9s ease-out forwards; }
@keyframes intro-word { from { opacity: 0; letter-spacing: 26px; } to { opacity: 1; letter-spacing: 12px; } }
.intro-tag { margin-top: 10px; color: var(--steel); font-size: 14px; letter-spacing: 5px; text-transform: uppercase; opacity: 0;
  animation: intro-fade .8s 1.3s forwards; }

/* Menu: slides in from the right (Frederik's pick). See app.js openPanel/closePanel */
.sheet, .backdrop { animation-duration: .38s; animation-fill-mode: both; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
.sheet.wide { --tx: -50%; }
.backdrop.enter { animation-name: fade-in; } .backdrop.leave { animation-name: fade-out; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
#menu.enter { animation-name: slide-in; }
#menu.leave { animation-name: slide-out; }
@keyframes slide-in { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes slide-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(40px); } }
.sheet.wide.enter .engine-tile { animation-duration: .4s; animation-fill-mode: both; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }

/* Engine dialog: a garage door (Frederik's pick). Splits open from a line of light in the middle, the tiles drop in
   one by one; shuts the same way */
.sheet.wide.enter { animation-name: garage-in; animation-duration: .45s; }
.sheet.wide.leave { animation-name: garage-out; animation-duration: .32s; }
.sheet.wide::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--glow);
  box-shadow: 0 0 14px 3px var(--glow); opacity: 0; pointer-events: none;
}
.sheet.wide.enter::after { animation: garage-line .5s ease-out both; }
.sheet.wide.leave::after { animation: garage-line .32s ease-in reverse both; }
.sheet.wide.enter .engine-tile { animation-name: garage-tile; animation-delay: .2s; }
.sheet.wide.enter .engine-tile:nth-child(2) { animation-delay: .26s; }
.sheet.wide.enter .engine-tile:nth-child(3) { animation-delay: .32s; }
.sheet.wide.enter .engine-tile:nth-child(4) { animation-delay: .38s; }
.sheet.wide.enter .engine-tile:nth-child(5) { animation-delay: .44s; }
.sheet.wide.enter .engine-tile:nth-child(6) { animation-delay: .50s; }
@keyframes garage-in { from { clip-path: inset(50% 0 50% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes garage-out { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(50% 0 50% 0); } }
@keyframes garage-line { 0% { opacity: 1; left: 50%; right: 50%; } 40% { opacity: 1; left: 0; right: 0; } 100% { opacity: 0; left: 0; right: 0; } }
@keyframes garage-tile { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
  body { font-size: 16px; }
  .bar { padding: 10px 14px; }
  .bar::after { left: 14px; right: 14px; }
  .logo .word { font-size: 17px; letter-spacing: 4px; }
  .lang-btn { width: 44px; height: 44px; font-size: 13px; }
  .icon-btn { width: 44px; height: 44px; }
  .engine-grid { grid-template-columns: repeat(2, 1fr); grid-gap: 8px; padding: 0 12px; }
  .engine-tile { min-height: 84px; padding: 10px 12px; }
  .engine-tile .name { font-size: 18px; }
  .engine-tile .desc { display: none; }
  .start-btn { width: 280px; height: 80px; }
  .gas, .stop-btn { width: 300px; }
  .toast { width: 340px; margin-left: -170px; }
  .toast-inner { padding: 12px 14px; }
  .toast strong { font-size: 17px; }
  .sheet { left: 12px; right: 12px; width: auto; top: 64px; }
  .sheet.wide { left: 12px; right: 12px; top: 50%; width: auto; max-width: none; transform: translateY(-50%); --tx: 0; }
  .intro-word { font-size: 20px; letter-spacing: 7px; padding-left: 7px; }
  .logo .word { font-size: 15px; letter-spacing: 3px; }
  .logo .mark { width: 28px; height: 28px; margin-right: 8px; }
  .engine-tile .cars { font-size: 11px; }
}

/* Outside the car (remind.js): "Påmind mig næste gang jeg er i min bil", a banner along the top of the start
   screen (Frederik's pick), hidden while the engine runs */
body.on .remind { display: none; }
.remind .ico { flex: none; }
.remind .chev { width: 20px; height: 20px; }

/* Right under the top bar on every screen size; the start screen's content moves down to make room (has-remind) */
.remind { position: absolute; top: 10px; left: 24px; right: 24px; z-index: 1; animation: fade-in .6s both; }
.start.has-remind { padding-top: 64px; }
.remind-banner-inner {
  display: flex; align-items: center; max-width: 1000px; margin: 0 auto; padding: 0 0 0 18px; min-height: 48px;
  background: var(--panel-2); border-left: 3px solid var(--glow);
}
.remind-banner-text { color: var(--steel); font-size: 14px; margin-right: 12px; }
.remind-link { display: flex; align-items: center; margin-left: auto; padding: 8px 14px 8px 4px; border: 0; background: none; color: var(--text); font-size: 14px; font-weight: 700; letter-spacing: .5px; text-align: left; }

/* The dialog: centred over everything */
.remind-sheet {
  left: 50%; top: 50%; right: auto; width: 540px; max-width: calc(100% - 24px); max-height: calc(100% - 24px);
  transform: translate(-50%, -50%); -webkit-user-select: text; user-select: text;
}
.remind-sheet.enter { animation-name: remind-in; }
.remind-sheet.leave { animation-name: remind-out; animation-duration: .25s; }
@keyframes remind-in { from { opacity: 0; transform: translate(-50%, -46%); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes remind-out { from { opacity: 1; transform: translate(-50%, -50%); } to { opacity: 0; transform: translate(-50%, -46%); } }
.remind-lead { margin: 4px 0 12px; color: var(--steel); font-size: 15px; }
.remind-fields { display: flex; margin: 10px -4px 0; }
.remind-fields label { flex: 1; margin: 0 4px; }
.remind-fields span { display: block; margin-bottom: 4px; color: var(--dim); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; }
.remind-fields input {
  width: 100%; min-height: 52px; padding: 0 12px; border: 0; border-bottom: 2px solid var(--glow); background: var(--deep); color: var(--text);
  font: inherit; font-size: 18px; color-scheme: dark;
}
html[data-theme="light"] .remind-fields input { color-scheme: light; }
.remind-actions { display: flex; flex-direction: column; margin-top: 16px; }
.remind-save {
  display: flex; align-items: center; justify-content: center; min-height: 60px; border: 0; background: var(--glow); color: var(--on-glow);
  font-size: 15px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}
.remind-save .ico { margin-right: 12px; }
.remind-alt { margin-top: 6px; padding: 10px; border: 0; background: none; color: var(--steel); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
/* Android: Google Calendar first (Android can't open a calendar file in Google Calendar by itself) */
.remind-sheet.android .remind-actions { flex-direction: column-reverse; }
.remind-sheet.android .remind-alt { margin: 6px 0 0; padding: 0; min-height: 60px; background: var(--glow); color: var(--on-glow); font-weight: 700; text-decoration: none;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px); }
.remind-sheet.android .remind-save { background: var(--panel-2); color: var(--text); }
.remind-status { min-height: 0; margin: 8px 0 0; font-size: 15px; }
.remind-status:empty { margin: 0; }
.remind-status.ok { color: var(--text); padding: 10px 14px; background: var(--ok-bg); }
.remind-status.bad { color: var(--red); }
.remind-how-link {
  display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 14px; padding: 12px 0 4px; border: 0; border-top: 1px solid var(--line);
  background: none; color: var(--steel); font-size: 13px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; text-align: left;
}
.remind-how-link .ico { width: 18px; height: 18px; margin-left: 6px; transition: transform .25s; }
.remind-how-link[aria-expanded="true"] .ico { transform: rotate(180deg); }
.remind-how { animation: fade-in .3s both; }
.remind-how ol { margin: 0; padding-left: 20px; color: var(--text); font-size: 14px; }
.remind-how li { margin: 6px 0; padding-left: 4px; }
.remind-small { margin: 10px 0 0; color: var(--dim); font-size: 12px; }

/* Bookmark tip in the car, the first few times: in the top bar between the logo and the language picker, where
   the car's wide screen has room (on the start screen it would cover the engine tiles) */
.fav-tip {
  position: absolute; left: 50%; top: 14px; z-index: 4; width: 600px; max-width: calc(100% - 640px); transform: translateX(-50%); padding: 1px;
  background: var(--glow);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  animation: fade-in .6s both;
}
.fav-tip-inner {
  display: flex; align-items: center; min-height: 46px; padding: 2px 2px 2px 14px; background: var(--deep);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}
.fav-tip .ico { flex: none; width: 20px; height: 20px; margin-right: 10px; color: var(--glow); }
.fav-tip span { flex: 1; font-size: 14px; line-height: 1.2; }
.fav-tip .icon-btn { flex: none; width: 40px; height: 40px; margin-left: 6px; background: transparent; }
.fav-tip .icon-btn .ico { margin: 0; color: var(--steel); }
body.on .fav-tip { display: none; }

@media (max-width: 760px) {
  .remind { left: 12px; right: 12px; top: 4px; }
  .remind-banner-inner { flex-wrap: wrap; padding: 6px 0 6px 12px; }
  .remind-banner-text { display: none; }
  .remind-link { margin-left: 0; flex: 1; }
  .fav-tip { top: 64px; left: 12px; right: 12px; width: auto; max-width: none; transform: none; }
}

/* --- Phones (Frederik, 17 Oct 2026). The engine grid collapses into a button that opens the engine dialog, the
   dialog becomes a list, upright phones get stacked dials (gauges.js), and sideways phones a compact layout.
   Safe areas keep everything clear of the notch and the home bar. */
.engine-btn { display: none; }
.engine-btn {
  align-items: center; width: 100%; max-width: 420px; min-height: 76px; padding: 12px 16px 12px 18px; border: 0;
  background: var(--tile); color: var(--text); text-align: left; box-shadow: inset 3px 0 0 var(--glow);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}
.engine-btn-text { flex: 1; min-width: 0; }
.engine-btn .spec { display: block; color: var(--steel); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.engine-btn .name { display: block; font-size: 24px; font-weight: 700; letter-spacing: 1px; }
.engine-btn-change { display: flex; align-items: center; flex: none; margin-left: 10px; color: var(--steel); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.engine-btn-change .ico { width: 24px; height: 24px; }
.engine-btn:active { background: var(--panel-2); }

/* Until app.js has put the loading screen up, show nothing (the top bar's left-aligned name flashed first) */
html.booting .bar, html.booting .start, html.booting #cluster, html.booting .dock { visibility: hidden; }

button, a, input { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* Safe areas (viewport-fit=cover): the notch on top/sides, the home bar at the bottom */
.bar { padding-top: calc(14px + env(safe-area-inset-top, 0px)); padding-left: calc(24px + env(safe-area-inset-left, 0px)); padding-right: calc(24px + env(safe-area-inset-right, 0px)); }
.dock { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
.made-by { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }

@media (max-width: 760px), (max-height: 500px) {
  #startGrid { display: none; }
  .engine-btn { display: flex; }
  .start { padding: 0 16px; }
  .start-btn { margin-top: 22px; }
  .start-hint { font-size: 13px; letter-spacing: 1px; text-align: center; }
  .made-by a { font-size: 13px; }
}

@media (max-width: 760px) {
  .bar { padding-top: calc(10px + env(safe-area-inset-top, 0px)); padding-left: calc(14px + env(safe-area-inset-left, 0px)); padding-right: calc(14px + env(safe-area-inset-right, 0px)); }
  .start { top: calc(64px + env(safe-area-inset-top, 0px)); }
  /* Engine dialog as a one-column list with the descriptions back */
  .sheet.wide { max-height: calc(100% - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
  .sheet.wide .engine-grid { grid-template-columns: 1fr; grid-gap: 8px; }
  .sheet.wide .engine-tile { min-height: 0; padding: 12px 14px; }
  .sheet.wide .engine-tile .desc { display: block; font-size: 13px; }
  .sheet.wide .engine-tile .cars { font-size: 12px; }
  .cluster { padding-left: 12px; padding-right: 12px; }
  .gas, .stop-btn { width: calc(100% - 32px); max-width: 360px; }
  .toast { width: auto; left: 16px; right: 16px; margin: 0 0 4px; }
  .toast span { font-size: 14px; }
  /* Loading screen */
  .intro-mark { width: 200px; height: 200px; }
  .intro-go { min-width: 260px; }
  .remind-sheet .sheet-head h2 { font-size: 14px; letter-spacing: 3px; }
}

/* A phone held sideways: short and wide, like a small car screen */
@media (max-height: 500px) {
  .bar { padding-top: calc(6px + env(safe-area-inset-top, 0px)); padding-bottom: 6px; }
  .lang-btn, .icon-btn { width: 44px; height: 44px; }
  .start { top: 58px; flex-direction: row; flex-wrap: wrap; align-content: center; }
  .start.has-remind { padding-top: 54px; }
  .remind { top: 4px; }
  .engine-btn { max-width: 340px; min-height: 72px; margin: 0 12px; }
  .start-btn { width: 220px; height: 72px; margin: 0 12px; }
  .start-btn span { font-size: 24px; letter-spacing: 9px; padding-left: 9px; }
  .start-hint { flex: 0 0 100%; margin-top: 10px; }
  .made-by { display: none; }
  /* Stop and hold-to-rev side by side so the dials keep their height */
  .dock { flex-direction: row; justify-content: center; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .stop-btn, .gas { width: 220px; height: 52px; margin: 0 6px; }
  .toast { width: 460px; left: 50%; right: auto; margin: 0 0 6px -230px; }
  .toast-inner { padding: 10px 16px; }
  .toast span { display: none; }   /* title only, so it covers less of the dials */
  .cluster { padding-top: 0; }
  .sheet { top: 8px; max-height: calc(100% - 16px); }
  .sheet.wide .engine-grid { grid-template-columns: repeat(2, 1fr); }
  .intro-mark { width: 130px; height: 130px; }
  .intro-word { margin-top: 8px; }
  .intro-go { margin-top: 14px; min-height: 52px; }
}