:root {
  --panel: rgba(255, 255, 255, 0.84);
  --panel-solid: #ffffff;
  --text: #1d232b;
  --muted: #586170;
  --line: rgba(29, 35, 43, 0.14);
  --signal: #ffc233;
  --signal-ink: #1d232b;
  --page: #a9cbe8;
  --btn: rgba(255, 255, 255, 0.72);
  color-scheme: light;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --panel: rgba(20, 24, 30, 0.8);
    --panel-solid: #161b22;
    --text: #eef1f4;
    --muted: #a8b0bb;
    --line: rgba(255, 255, 255, 0.14);
    --page: #1b2633;
    --btn: rgba(20, 24, 30, 0.66);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --panel: rgba(20, 24, 30, 0.8);
  --panel-solid: #161b22;
  --text: #eef1f4;
  --muted: #a8b0bb;
  --line: rgba(255, 255, 255, 0.14);
  --page: #1b2633;
  --btn: rgba(20, 24, 30, 0.66);
  color-scheme: dark;
}
html { scroll-padding-top: env(safe-area-inset-top, 0px); }
html, body { height: 100%; margin: 0; overflow: hidden; }
body {
  background: var(--page);
  color: var(--text);
  font-family: "Barlow", "Helvetica Neue", Arial, sans-serif;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}
canvas#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.num { font-family: "Saira Condensed", "Arial Narrow", "Roboto Condensed", sans-serif; font-weight: 700; font-variant-numeric: tabular-nums; }

.hud { position: fixed; pointer-events: none; }
.panel { background: var(--panel); border-radius: 10px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

#times { top: calc(12px + env(safe-area-inset-top, 0px)); left: calc(12px + env(safe-area-inset-left, 0px)); padding: 8px 14px 10px; min-width: 150px; }
#lapTime { font-size: 40px; line-height: 1; letter-spacing: 0.01em; }
.row { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--muted); margin-top: 4px; }
.row b { font-family: "Saira Condensed", "Arial Narrow", sans-serif; font-weight: 600; color: var(--text); font-size: 17px; font-variant-numeric: tabular-nums; }

#mapWrap { top: calc(12px + env(safe-area-inset-top, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); padding: 6px; display: flex; flex-direction: column; gap: 6px; align-items: stretch; pointer-events: auto; }
#minimap { width: 132px; height: 132px; border-radius: 6px; display: block; }
.small-btn { font: 600 14px "Barlow", Arial, sans-serif; color: var(--text); background: transparent; border: 1px solid var(--line); border-radius: 7px; padding: 6px 8px; cursor: pointer; }
.small-btn:focus-visible, .start-btn:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }

#speedo { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); padding: 6px 18px 8px; text-align: center; }
#speed { font-size: 52px; line-height: 0.95; }
#speedUnit { font-size: 13px; color: var(--muted); margin-left: 3px; }
#cpInfo { font-size: 14px; color: var(--muted); margin-top: 2px; white-space: nowrap; }

#toast { top: calc(18px + env(safe-area-inset-top, 0px)); left: 50%; transform: translate(-50%, -8px); padding: 9px 16px; font-size: 16px; font-weight: 600; opacity: 0; transition: opacity 0.25s, transform 0.25s; max-width: min(460px, 52vw); text-align: center; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.best { background: var(--signal); color: var(--signal-ink); }

#count { inset: 0; display: flex; align-items: center; justify-content: center; font-size: min(28vw, 220px); color: #fff; text-shadow: 0 4px 24px rgba(0, 0, 0, 0.35); opacity: 0; }
#count.show { opacity: 1; }

#osmCredit { font-size: 10px; line-height: 1.2; color: var(--muted); text-align: center; text-decoration: none; max-width: 132px; }

#touch { position: fixed; inset: auto 0 0 0; display: none; justify-content: space-between; padding: 0 calc(14px + env(safe-area-inset-right, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) calc(14px + env(safe-area-inset-left, 0px)); pointer-events: none; }
body.touch #touch { display: flex; }
.pad { display: flex; gap: 12px; pointer-events: auto; }
.tbtn { width: 76px; height: 76px; border-radius: 16px; border: 1px solid var(--line); background: var(--btn); color: var(--text); font: 700 18px "Saira Condensed", "Arial Narrow", sans-serif; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); touch-action: none; }
.tbtn.on { background: var(--signal); color: var(--signal-ink); }
.tbtn svg { width: 30px; height: 30px; fill: currentColor; }
body.touch #speedo { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
/* Große Bildschirme: größere Übersichtskarte */
@media (min-width: 1000px) and (min-height: 640px) {
  #minimap { width: 200px; height: 200px; }
  #osmCredit { max-width: 200px; font-size: 11px; }
}
@media (min-width: 1500px) and (min-height: 860px) {
  #minimap { width: 250px; height: 250px; }
  #osmCredit { max-width: 250px; }
}
@media (max-width: 640px) {
  #lapTime { font-size: 32px; }
  #minimap { width: 100px; height: 100px; }
  #osmCredit { max-width: 100px; }
  .tbtn { width: 64px; height: 64px; }
  #speed { font-size: 40px; }
}
@media (max-height: 480px) {
  #times { padding: 6px 10px 7px; min-width: 120px; }
  #lapTime { font-size: 26px; }
  .row { font-size: 12px; margin-top: 2px; }
  .row b { font-size: 14px; }
  #minimap { width: 88px; height: 88px; }
  #osmCredit { max-width: 88px; font-size: 9px; }
  .small-btn { font-size: 12px; padding: 4px 6px; }
  #speedo { padding: 4px 14px 6px; }
  #speed { font-size: 34px; }
  #cpInfo { font-size: 12px; }
  .tbtn { width: 62px; height: 62px; }
}
@media (prefers-reduced-motion: reduce) { #toast { transition: none; } }