/* Ghost Engine. The look is "Supercar on carbon" (Frederik's pick from the design lab, 18 Oct 2026, "A2c"), like a
   Ferrari / Lamborghini / Porsche digital cluster: near-black, sharp rectangles (no cut corners), thin white neon
   lines, red only for the revs, the redline, START and what's chosen, crisp dials without blur. Dark only.
   Background (#scene in index.html): carbon fibre that fades to black behind the dials, a slow light sheen, a red trim
   line and a red glow from below that follow the revs (--rev, set by fx.js). Motion: fx.js + the keyframes below.
   Written for the Tesla browser (older Chromium): no flex gap, no aspect-ratio, no :has(), no inset shorthand. */
:root {
  --font: 'Titillium Web', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --bg: #040405;
  --panel: rgba(15, 16, 19, .78); --panel-2: rgba(24, 26, 30, .92); --panel-solid: #0b0c0e; --deep: #08090b;
  --sheet: rgba(9, 10, 12, .96); --line: rgba(255, 255, 255, .13);
  --steel: #a9afb8; --text: #e6e9ee; --text-hi: #ffffff; --dim: #616770; --on-glow: #050506; --ok-bg: rgba(40, 120, 70, .3);
  /* Neon lines and outlines (white), each with a halo (-soft) and an inner glow (-faint) */
  --neon: rgba(242, 245, 250, .85); --neon-dim: rgba(242, 245, 250, .22); --neon-soft: rgba(242, 245, 250, .28); --neon-faint: rgba(242, 245, 250, .06);
  /* Red: START, stop, the redline and what's chosen */
  --accent: #ff2a2a; --accent-text: #ff4b4b; --accent-soft: rgba(255, 42, 42, .55); --accent-faint: rgba(255, 42, 42, .14);
  --tick: #1b1e22; --tick-red: #3b1213; --tick-on: #ffffff;
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); 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;
}
button { font: inherit; color: inherit; cursor: pointer; border-radius: 0; }
[hidden] { display: none !important; }
.ico { width: 24px; height: 24px; display: block; }

/* Background: behind everything, the content above it */
.scene { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.scene > div { position: absolute; }
.scene-carbon {
  left: 0; top: 0; right: 0; bottom: 0; opacity: .42;
  background:
    linear-gradient(27deg, #0d0d0e 5px, rgba(0, 0, 0, 0) 5px) 0 5px,
    linear-gradient(207deg, #0d0d0e 5px, rgba(0, 0, 0, 0) 5px) 10px 0,
    linear-gradient(27deg, #19191b 5px, rgba(0, 0, 0, 0) 5px) 0 10px,
    linear-gradient(207deg, #19191b 5px, rgba(0, 0, 0, 0) 5px) 10px 5px,
    linear-gradient(90deg, #121214 10px, rgba(0, 0, 0, 0) 10px),
    linear-gradient(#141416 25%, #101012 25%, #101012 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 75%, #1b1b1d 75%, #1b1b1d);
  background-color: #0b0b0c; background-size: 20px 20px;
  /* the weave only at the edges: plain black in the middle, behind the dials */
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 45%, rgba(0, 0, 0, 0) 35%, #000 90%);
  mask-image: radial-gradient(ellipse 62% 58% at 50% 45%, rgba(0, 0, 0, 0) 35%, #000 90%);
}
.scene-sheen {
  left: 0; top: -50%; width: 45vw; height: 200%; will-change: transform;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .03) 50%, rgba(255, 255, 255, 0));
  animation: scene-sheen 16s ease-in-out infinite;
}
@keyframes scene-sheen { 0% { transform: translateX(-70vw) rotate(18deg); } 65%, 100% { transform: translateX(170vw) rotate(18deg); } }
.scene-trim {
  left: 0; right: 0; bottom: 16%; height: 2px;
  background: linear-gradient(90deg, rgba(255, 42, 42, 0), #ff2a2a 20%, #ff2a2a 80%, rgba(255, 42, 42, 0));
  box-shadow: 0 0 12px 1px rgba(255, 42, 42, .3); opacity: calc(.12 + var(--rev, 0) * .5);
}
.scene-floor {
  left: 0; right: 0; bottom: 0; height: 55%;
  background: radial-gradient(ellipse 70% 100% at 50% 100%, rgba(255, 25, 25, .32), rgba(255, 25, 25, 0) 70%);
  opacity: calc(.06 + var(--rev, 0) * .4);
}
.scene-vignette { left: 0; top: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .85)); }
html.moving .scene-sheen { opacity: .5; }   /* calmer while driving (fx.js also slows it down) */

/* Top bar: no line under it (Frederik, 18 Oct), a softly glowing logo */
.bar { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; z-index: 3; }
.logo { display: flex; align-items: center; min-width: 0; color: var(--text-hi); text-shadow: 0 0 14px var(--neon-soft); }
.logo .mark { width: 34px; height: 34px; margin-right: 12px; filter: drop-shadow(0 0 6px var(--neon-soft)); }
.logo .word { font-weight: 600; font-size: 22px; letter-spacing: 6px; white-space: nowrap; }
.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; color: var(--dim); font-size: 15px; font-weight: 700; letter-spacing: 1px; }
.icon-btn { width: 48px; height: 48px; margin-left: 10px; display: flex; align-items: center; justify-content: center; }

/* Neon boxes: a thin line around every control; red and glowing when chosen or pressed */
.lang-btn, .icon-btn, .seg, .test, .row, .row-btn, .engine-tile, .engine-btn, .stop-btn, .gas {
  border: 1px solid var(--line); background-color: var(--panel);
  transition: border-color .25s, box-shadow .25s, background-color .25s, color .25s;
}
.lang-btn[aria-checked="true"], .seg[aria-checked="true"], .engine-tile[aria-checked="true"] {
  border-color: var(--accent); background-color: var(--panel-2); color: var(--text-hi);
  box-shadow: 0 0 16px var(--accent-soft), inset 0 0 18px var(--accent-faint);
}
.lang-btn:active, .icon-btn:active, .seg:active, .engine-tile:active, .engine-btn:active, .test:active {
  border-color: var(--accent); box-shadow: 0 0 22px var(--accent-soft), inset 0 0 22px var(--accent-soft);
}
@media (hover: hover) {
  .engine-tile:hover, .seg:hover, .icon-btn:hover, .lang-btn:hover, .engine-btn:hover { border-color: var(--neon); box-shadow: 0 0 12px var(--neon-faint); }
}

/* The instrument cluster: crisp, no blur (Frederik, 18 Oct) */
.cluster {
  position: relative; z-index: 1;
  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;
}
.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-hi); font-family: var(--font); }
.cluster .tick { fill: var(--tick); }
.cluster .tick.red { fill: var(--tick-red); }
.cluster .tick.on { fill: var(--tick-on); }
.cluster .tick.on.red { fill: var(--accent); }
.cluster .scale { fill: var(--dim); font-size: 22px; font-weight: 600; }
.cluster .big { font-size: 64px; font-weight: 600; }
.cluster .xl { font-size: 92px; }
.cluster .xxl { font-size: 150px; font-weight: 600; letter-spacing: -2px; }
.cluster .mid { font-size: 40px; font-weight: 600; }
.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-solid); stroke: var(--neon); 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(--accent); }
.cluster .engine-pick:active text { fill: var(--text-hi); }
.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 */
/* A gear change: the gear box flashes red (fx.js adds .shift) */
.cluster.shift .badge { animation: shift-flash .42s ease-out; }
.cluster.shift .gear { animation: shift-text .42s ease-out; }
@keyframes shift-flash { from { fill: var(--accent); } to { fill: var(--panel-solid); } }
@keyframes shift-text { from { fill: var(--on-glow); } to { fill: var(--text-hi); } }
/* At the limiter the red ticks strobe (fx.js adds html.limit) */
html.limit .cluster .tick.on.red { animation: limit-strobe .14s steps(2, end) infinite; }
@keyframes limit-strobe { 50% { opacity: .2; } }
/* START: the dials power up from dark; an engine switch dims them for a moment (fx.js) */
html.fx-start .cluster-svg { animation: dials-power .9s ease-out; }
@keyframes dials-power { from { opacity: .15; } to { opacity: 1; } }
html.fx-switch .cluster-svg { animation: dials-dip .9s ease-in-out; }
@keyframes dials-dip { 0%, 100% { opacity: 1; } 35% { opacity: .25; } }

/* Start screen: the cluster dimmed behind the engine list and a start button */
body.off .cluster { opacity: .16; }
.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; text-align: left; color: var(--text); }
.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; color: var(--text-hi); }
.engine-tile[aria-checked="true"] .name { text-shadow: 0 0 12px var(--accent-soft); }
.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: a red neon rectangle that breathes (the halo is a separate layer, so only its opacity animates) */
.start-btn {
  position: relative; margin-top: 26px; width: 340px; height: 90px;
  background: rgba(0, 0, 0, .35); border: 2px solid var(--accent); color: var(--text-hi);
  box-shadow: 0 0 22px var(--accent-soft), inset 0 0 24px var(--accent-faint);
}
.start-btn::after {
  content: ''; position: absolute; left: -2px; top: -2px; right: -2px; bottom: -2px; pointer-events: none;
  box-shadow: 0 0 38px 8px var(--accent-soft); opacity: .3; animation: breathe 2.6s ease-in-out infinite;
}
@keyframes breathe { 50% { opacity: 1; } }
.start-btn span { position: relative; font-size: 30px; font-weight: 700; letter-spacing: 12px; padding-left: 12px; text-shadow: 0 0 16px var(--accent-soft); }
.start-btn:active { background: var(--accent-faint); }
.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" under START, in the flow (it floated at the bottom and START covered it in the car,
   Frederik 18 Oct) */
.made-by { margin: 14px 0 0; text-align: center; }
.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-color: var(--accent); color: var(--accent-text); text-shadow: 0 0 10px var(--accent-soft);
  box-shadow: 0 0 14px var(--accent-faint), inset 0 0 14px var(--accent-faint);
}
.stop-btn, .gas { font-size: 16px; font-weight: 700; letter-spacing: 5px; text-transform: uppercase; }
.gas {
  width: 360px; height: 64px; margin-top: 10px; color: var(--steel);
  touch-action: none; -webkit-touch-callout: none;
}
.gas.held { border-color: var(--accent); background-color: var(--accent); color: var(--on-glow); box-shadow: 0 0 30px var(--accent-soft); }
.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; transition: opacity .8s, transform .8s; }
.toast-inner {
  display: flex; align-items: center; padding: 16px 22px; text-align: left;
  border: 1px solid var(--neon); background: var(--panel-solid);
  box-shadow: 0 0 22px var(--neon-soft), inset 0 0 18px var(--neon-faint);
}
.toast .ico { width: 34px; height: 34px; flex: none; margin-right: 16px; color: var(--accent); filter: drop-shadow(0 0 6px var(--accent-soft)); }
.toast strong { display: block; font-size: 20px; letter-spacing: .5px; color: var(--text-hi); }
.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;
  border: 1px solid var(--neon-dim); box-shadow: 0 0 40px var(--neon-faint), 0 20px 60px rgba(0, 0, 0, .6);
}
/* 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, .72); }
.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(--text-hi); text-shadow: 0 0 12px var(--neon-soft); }
.row, .row-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 64px; margin: 8px 0; padding: 10px 16px; 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(--accent); }
.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; color: var(--steel); font-size: 15px; font-weight: 600; }
.seg[aria-checked="true"] { text-shadow: 0 0 10px var(--accent-soft); }
#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; font-size: 15px; }
.test.done { border-color: var(--neon); background-color: 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; 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). The background shows
   through it, with the app behind it hidden (html.intro-on, set by intro.js until it starts fading out). */
.intro {
  position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 20; background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity .6s;
}
html.intro-on .intro { background: rgba(2, 2, 3, .45); }
html.intro-on .bar, html.intro-on .start, html.intro-on #cluster, html.intro-on .dock { visibility: hidden; }
.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(--tick-on); }
.intro line.red.on { stroke: var(--accent); }
.intro.ignited .fill { animation: none; opacity: 1; }
.intro-go {
  margin-top: 30px; min-width: 300px; min-height: 64px; padding: 0 28px; border: 2px solid var(--accent); background: transparent;
  color: var(--text-hi); font: inherit; font-size: 16px; font-weight: 700; letter-spacing: 5px; text-transform: uppercase; opacity: 0;
  text-shadow: 0 0 12px var(--accent-soft);
  animation: intro-fade .6s 1.4s forwards, go-pulse 1.8s 2s ease-in-out infinite;
}
@keyframes go-pulse {
  0%, 100% { box-shadow: 0 0 12px var(--accent-faint), inset 0 0 10px var(--accent-faint); }
  50% { box-shadow: 0 0 30px var(--accent-soft), inset 0 0 22px var(--accent-soft); }
}
.intro.ignited .intro-go { animation: none; opacity: 0; transition: opacity .3s; pointer-events: none; }
@keyframes tick-on { to { stroke: var(--tick-on); } }
@keyframes tick-off { to { stroke: var(--tick); } }
.intro .fill { color: var(--text-hi); opacity: 0; animation: intro-fade .6s .3s forwards; }
@keyframes intro-fade { to { opacity: 1; } }
/* Centred and on one line: it starts out wider than a phone screen while the letters close up */
.intro-word { margin-top: 18px; font-weight: 600; font-size: 26px; letter-spacing: 12px; padding-left: 12px; opacity: 0;
  color: var(--text-hi); text-shadow: 0 0 18px var(--neon-soft); text-align: center; white-space: nowrap;
  animation: intro-word 1s .9s ease-out forwards; }
@keyframes intro-word { from { opacity: 0; letter-spacing: 26px; } to { opacity: 1; letter-spacing: 12px; } }
@keyframes intro-word-sm { from { opacity: 0; letter-spacing: 13px; } to { opacity: 1; letter-spacing: 7px; } }
.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); } }

/* Engine dialog: a red line of light flashes across the middle as it opens with a short scale and fade, then the
   tiles drop in one by one */
.sheet.wide.enter { animation-name: panel-in; animation-duration: .5s; }
.sheet.wide.leave { animation-name: panel-out; animation-duration: .28s; }
@keyframes panel-in {
  from { opacity: 0; transform: translate(var(--tx), -50%) scale(.96); }
  to { opacity: 1; transform: translate(var(--tx), -50%); }
}
@keyframes panel-out { to { opacity: 0; transform: translate(var(--tx), -50%) scale(.97); } }
.sheet.wide::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--accent);
  box-shadow: 0 0 16px 4px var(--accent-soft); opacity: 0; pointer-events: none;
}
.sheet.wide.enter::after { animation: panel-line .5s ease-out both; }
.sheet.wide.leave::after { animation: panel-line .32s ease-in reverse both; }
@keyframes panel-line { 0% { opacity: 1; left: 50%; right: 50%; } 40% { opacity: 1; left: 0; right: 0; } 100% { opacity: 0; left: 0; right: 0; } }
.sheet.wide.enter .engine-tile { animation: tile-drop .4s cubic-bezier(.2, .8, .2, 1) .2s both; }
.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 tile-drop { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
  body { font-size: 16px; }
  .bar { padding: 10px 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; animation-name: intro-word-sm; }
  .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; color: var(--accent); filter: drop-shadow(0 0 4px var(--accent-soft)); }

/* 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); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  box-shadow: -6px 0 18px -6px var(--accent-soft);
}
.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-hi); 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 { margin-top: 10px; }   /* time under date (Frederik) */
.remind-fields label { display: block; margin-top: 10px; }
.remind-fields span { display: block; margin-bottom: 4px; color: var(--dim); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; }
.remind-fields input {
  /* A fixed height with padding and line height: with appearance none, iPhone puts the value at the top otherwise */
  display: block; width: 100%; min-width: 0; max-width: 100%; height: 52px; padding: 13px 12px; line-height: 24px; border-radius: 0;
  background: var(--deep); border: 1px solid var(--line); border-bottom: 2px solid var(--neon); box-shadow: 0 6px 14px -8px var(--neon-soft);
  color: var(--text); font: inherit; font-size: 18px; text-align: left; color-scheme: dark;
  -webkit-appearance: none; appearance: none;   /* iPhone gives date/time fields their own minimum width otherwise */
}
.remind-fields input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 16px var(--accent-soft); }
.remind-fields input::-webkit-date-and-time-value { margin: 0; line-height: 24px; text-align: left; }
.remind-actions { display: flex; flex-direction: column; margin-top: 16px; }
.remind-save, .remind-sheet.android .remind-alt {
  display: flex; align-items: center; justify-content: center; min-height: 60px;
  background: rgba(0, 0, 0, .3); border: 2px solid var(--accent); color: var(--text-hi);
  font-size: 15px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-decoration: none;
  box-shadow: 0 0 20px var(--accent-soft), inset 0 0 18px var(--accent-faint); text-shadow: 0 0 12px var(--accent-soft);
}
.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; }
.remind-sheet.android .remind-save { background: var(--panel); border: 1px solid var(--line); box-shadow: none; text-shadow: none; 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); border-left: 3px solid var(--neon); }
.remind-status.bad { color: var(--accent-text); }
.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%);
  animation: fade-in .6s both;
}
.fav-tip-inner {
  display: flex; align-items: center; min-height: 46px; padding: 2px 2px 2px 14px;
  border: 1px solid var(--neon); background: var(--panel-solid);
  box-shadow: 0 0 22px var(--neon-soft), inset 0 0 18px var(--neon-faint);
}
.fav-tip .ico { flex: none; width: 20px; height: 20px; margin-right: 10px; color: var(--accent); filter: drop-shadow(0 0 6px var(--accent-soft)); }
.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; border: 0; background: transparent; }
.fav-tip .icon-btn .ico { margin: 0; color: var(--steel); filter: none; }
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 the one-big-dial layout (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;
  color: var(--text); text-align: left;
  border-left: 3px solid var(--accent); box-shadow: -6px 0 18px -6px var(--accent-soft), inset 0 0 18px var(--neon-faint);
}
.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; color: var(--text-hi); }
.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-color: 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)); }

@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 short, wide screen like the car's (its browser is shorter than the screen): a more compact start screen so the
   tiles, START, the hint and the made-by line all fit */
@media (min-width: 761px) and (max-height: 760px) {
  .engine-grid { grid-gap: 10px; }
  .engine-tile { min-height: 0; padding: 10px 16px; }
  .engine-tile .name { font-size: 21px; }
  .engine-tile .desc { font-size: 13px; line-height: 1.25; }
  .engine-tile .cars { font-size: 12px; margin-top: 3px; }
  .start-btn { margin-top: 18px; height: 74px; width: 300px; }
  .start-btn span { font-size: 26px; }
  .start-hint { margin-top: 10px; font-size: 13px; }
  .made-by { margin-top: 6px; }
}

/* 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; }
}

/* Narrow phones (iPhone mini/SE to standard): the name wrapped in Safari */
@media (max-width: 400px) {
  .logo .word { font-size: 14px; letter-spacing: 2px; }
  .logo .mark { width: 26px; height: 26px; margin-right: 7px; }
  .lang-btn { margin-left: 2px; }   /* keep the 44 px touch size, tighten the gaps instead */
  .icon-btn { margin-left: 6px; }
}

/* Too slow for the effects (fx.js measures; ?lite forces it): no background motion, a still halo on START */
html.fx-lite .scene * { animation: none !important; }
html.fx-lite .start-btn::after { animation: none; opacity: .6; }

/* Safety notice before the first use (safety.js). A: a screen over everything; B: on the loading screen */
.safety {
  position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(4, 4, 5, .94); animation: fade-in .4s both; transition: opacity .4s;
}
.safety.out { opacity: 0; }
.safety-box {
  width: 100%; max-width: 540px; max-height: 100%; overflow-y: auto; padding: 24px 26px 26px;
  background: var(--panel-solid); border: 1px solid var(--neon-dim); box-shadow: 0 0 40px var(--neon-faint), 0 20px 60px rgba(0, 0, 0, .6);
}
.safety-box h2, .intro-notice h2 { margin: 0 0 12px; font-size: 16px; letter-spacing: 4px; text-transform: uppercase; color: var(--text-hi); text-shadow: 0 0 12px var(--neon-soft); }
.safety-list { list-style: none; margin: 0; padding: 0; text-align: left; }
.safety-list li { display: flex; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); font-size: 16px; color: var(--text); }
.safety-list li:first-child { border-top: 0; }
.safety-list .n {
  flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0 14px 0 0;
  border: 1px solid var(--accent); color: var(--text-hi); font-size: 14px; font-weight: 700; box-shadow: 0 0 10px var(--accent-faint);
}
.safety-list li > span:last-child { flex: 1; padding-top: 3px; }
.safety-small { margin: 12px 0 0; color: var(--dim); font-size: 13px; text-align: left; }
.safety-ok {
  display: block; width: 100%; min-height: 60px; margin-top: 18px; background: rgba(0, 0, 0, .3); border: 2px solid var(--accent); color: var(--text-hi);
  font-size: 15px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
  box-shadow: 0 0 20px var(--accent-soft), inset 0 0 18px var(--accent-faint); text-shadow: 0 0 12px var(--accent-soft);
}
.safety-ok:active { background: var(--accent-faint); }
/* B: the notice sits between the tagline and the button; the ring shrinks to make room */
.intro-notice { width: 100%; max-width: 480px; margin: 18px 0 0; padding: 14px 18px; background: rgba(11, 12, 14, .85); border: 1px solid var(--line);
  opacity: 0; animation: intro-fade .6s 1.2s forwards; }
.intro.has-notice .intro-mark { width: 150px; height: 150px; }
.intro.has-notice .intro-go { margin-top: 18px; }
@media (max-width: 760px) {
  .intro-notice { margin: 14px 16px 0; width: auto; }
  .intro.has-notice .intro-mark { width: 120px; height: 120px; }
  .safety-list li { font-size: 15px; }
}
@media (max-height: 760px) and (min-width: 761px) {
  .intro.has-notice .intro-mark { width: 110px; height: 110px; }
  .intro.has-notice .intro-word { margin-top: 8px; }
  .intro-notice { margin-top: 10px; padding: 10px 16px; }
  .intro-notice .safety-list li { padding: 6px 0; font-size: 15px; }
}
@media (max-height: 500px) {
  .intro.has-notice .intro-mark, .intro.has-notice .intro-tag { display: none; }
  .intro-notice .safety-small { display: none; }
}