/* Fonty hostowane U NAS, nie z serwerów Google.
   Ładowanie krojów z fonts.googleapis.com wysyła adres IP KAŻDEGO odwiedzającego do Google, zanim
   ktokolwiek cokolwiek kliknie - to najczęściej wykorzystywany pretekst do wezwań do zapłaty w UE
   (wyrok LG München I, 3 O 17493/20) i jedyna taka zależność, jaką mieliśmy. Pliki .woff2 leżą w
   public/fonts (nazwy zawierają skrót treści, więc można je cache'ować bezterminowo).
   Regeneracja: docs/AUDYT_RODO.md. */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/outfit-729911.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/outfit-a37bd6.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/outfit-729911.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/outfit-a37bd6.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/outfit-729911.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/outfit-a37bd6.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/outfit-729911.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/outfit-a37bd6.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/outfit-729911.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/outfit-a37bd6.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-390b90.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-d40474.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-a656ac.woff2) format("woff2");
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-9f07a5.woff2) format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-0583c3.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-ba6801.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-1fab01.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-390b90.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-d40474.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-a656ac.woff2) format("woff2");
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-9f07a5.woff2) format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-0583c3.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-ba6801.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-1fab01.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-390b90.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-d40474.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-a656ac.woff2) format("woff2");
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-9f07a5.woff2) format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-0583c3.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-ba6801.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-1fab01.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-390b90.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-d40474.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-a656ac.woff2) format("woff2");
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-9f07a5.woff2) format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-0583c3.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-ba6801.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-1fab01.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-570a2b.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-71e69e.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-3644d5.woff2) format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-c010f9.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-9ea68c.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-530d03.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jetbrains-570a2b.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jetbrains-71e69e.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jetbrains-3644d5.woff2) format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jetbrains-c010f9.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jetbrains-9ea68c.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jetbrains-530d03.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/jetbrains-570a2b.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/jetbrains-71e69e.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/jetbrains-3644d5.woff2) format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/jetbrains-c010f9.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/jetbrains-9ea68c.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/jetbrains-530d03.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ==========================================================================
   RoadVibe - design tokens i style globalne (spójne z prototypem v2)
   Layout RWD: mobile = jedna kolumna + dolny pasek; desktop = sidebar + pełna szerokość.
   Ikony: SVG ze sprite'a (_icon_sprite), kolor przez currentColor.
   ========================================================================== */
@property --whoosh-shift {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
:root {
  --navrail-w:56px;
  --navrail-w-open:214px;
  --asphalt:#15171C;
  --asphalt-2:#1C1F26;
  --asphalt-3:#262A33;
  --asphalt-4:#30343F;
  --cream:#F7F4EE;
  --cream-dim:#9BA0AB;
  --cream-dimmer:#6B707B;
  --coral:#FF6B5C;
  --amber:#FFB84D;
  --lane:#F5C84C;
  --teal:#2A9D9D;
  --green:#4ECB71;
  --red:#FF5C5C;
  --line:rgba(247,244,238,0.10);
  --line-soft:rgba(247,244,238,0.05);
  --r-sm:10px;
  --r-md:16px;
  --r-lg:22px;
  --sidenav-w:240px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
}

/* Gesty przeglądarki vs. dotykanie sceny: dziecko łapiące zwierzaki/bańki przeciąga palcem po
   ekranie, a przeglądarka traktowała to jako gest STRONY - pull-to-refresh przeładowywał trasę,
   a poziomy overscroll cofał do poprzedniej strony. `contain` zatrzymuje łańcuch przewijania na
   dokumencie (Chrome Android; Safari od iOS 16).
   UWAGA: gestu krawędziowego systemu (swipe-back od lewej krawędzi w iOS Safari, gest wstecz w
   Androidzie 10+) NIE DA SIĘ wyłączyć ze strony - to chrome przeglądarki/OS. Ucieczką jest tylko
   instalacja jako PWA (display: standalone). */
html, body {
  overscroll-behavior: contain;
}

body {
  background: var(--asphalt);
  color: var(--cream);
  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.font-display {
  font-family: "Outfit", sans-serif;
}

.font-mono {
  font-family: "JetBrains Mono", monospace;
}

::selection {
  background: var(--lane);
  color: var(--asphalt);
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--lane);
  outline-offset: 2px;
}

/* --- ikony SVG --- */
.icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

.icon-lg {
  width: 28px;
  height: 28px;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn .icon {
  width: 18px;
  height: 18px;
}

/* ==========================================================================
   Layout / powłoka aplikacji (RWD)
   ========================================================================== */
.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: var(--asphalt);
  position: relative;
}

.app-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Dolny zapas musi minąć NIE TYLKO nawigację, ale i pigułkę „Zgłoś uwagę" (fixed, bottom: nav+84px)
   - inaczej ostatni element strony (np. pager historii tras) jest fizycznie nieklikalny na telefonie. */
.screen-pad {
  padding: 18px 22px calc(env(safe-area-inset-bottom, 0px) + 132px);
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
}

@media (min-width: 900px) {
  .app-shell {
    flex-direction: row;
  }
  .screen-pad {
    padding: 34px 48px 40px;
  }
}
/* --- typografia --- */
.h-title {
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: 27px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.h-sub {
  font-size: 14px;
  color: var(--cream-dim);
  line-height: 1.5;
  margin-top: 6px;
}

.eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lane);
  display: flex;
  align-items: center;
  gap: 6px;
}

.eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(78, 203, 113, 0.14);
  animation: eyebrow-pulse 1.8s ease-out infinite;
  flex-shrink: 0;
}

@keyframes eyebrow-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(78, 203, 113, 0.35);
  }
  100% {
    box-shadow: 0 0 0 6px rgba(78, 203, 113, 0);
  }
}
.section-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cream-dimmer);
  margin: 4px 0 10px;
}

/* równy oddech między sekcjami: nagłówek sekcji, który następuje po innej treści (karta,
   lista, formularz), dostaje większy odstęp górny - pierwszy na stronie zostaje przy 4px */
* + .section-label {
  margin-top: 26px;
}

/* gradientowy tekst nagłówków w akcentowej palecie drogi */
.text-grad-road {
  background: linear-gradient(115deg, var(--lane), var(--amber), var(--coral));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  width: fit-content;
}

/* --- przyciski --- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 15px;
  padding: 15px 20px;
  border-radius: 14px;
  width: 100%;
  transition: transform 0.15s, opacity 0.15s, box-shadow 0.15s;
}

.btn:active {
  transform: scale(0.975);
}

.btn-primary {
  background: linear-gradient(135deg, var(--lane), var(--amber));
  color: var(--asphalt);
  box-shadow: 0 10px 22px -12px rgba(245, 200, 76, 0.55);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -10px rgba(245, 200, 76, 0.65);
}

.btn-dark {
  background: var(--asphalt-3);
  color: var(--cream);
  border: 1px solid var(--line);
}

.btn-ghost {
  background: transparent;
  color: var(--cream-dim);
  border: 1px solid var(--line);
}

.btn-danger {
  background: transparent;
  color: var(--red);
  border: 1px solid rgba(255, 92, 92, 0.3);
}

.btn:disabled {
  opacity: 0.4;
  pointer-events: none;
}

.btn-sm {
  padding: 10px 14px;
  font-size: 13px;
  border-radius: 11px;
  width: auto;
}

.btn-sm.icon-btn .icon {
  width: 16px;
  height: 16px;
}

/* --- karty / inputy --- */
.card {
  background: var(--asphalt-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px;
  box-shadow: 0 20px 40px -34px rgba(0, 0, 0, 0.7);
}

.field {
  margin-bottom: 14px;
}

.field label {
  display: block;
  font-size: 12px;
  color: var(--cream-dim);
  margin-bottom: 7px;
  font-weight: 500;
}

.input {
  width: 100%;
  background: var(--asphalt-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  color: var(--cream);
  font-size: 15px;
  transition: border-color 0.15s;
}

.input:focus {
  outline: none;
  border-color: var(--lane);
}

.input::placeholder {
  color: var(--cream-dimmer);
}

/* --- topbar --- */
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0 16px;
}

.topbar .back-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--asphalt-2);
  border: 1px solid var(--line);
  color: var(--cream);
}

.topbar .back-btn .icon {
  width: 20px;
  height: 20px;
}

.topbar .tb-title {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 18px;
}

/* ==========================================================================
   Nawigacja - dolny pasek (mobile) / sidebar (desktop)
   ========================================================================== */
.appnav {
  z-index: 40;
}

.appnav-brand {
  display: none;
}

.appnav-links {
  display: flex;
}

/* mobile: dolny pasek */
/* MOBILE: zwijany pasek przy LEWEJ krawędzi zamiast dolnego paska (aplikacja i panel).
   Dolny pasek miał twardy limit pozycji - przy ośmiu jego min-content urósł powyżej szerokości
   telefonu, Chrome poszerzył layout viewport i przyklejona nawigacja przestawała łapać
   kliknięcia. Pionowa lista tego limitu nie ma, a zwinięta zajmuje tyle, co ikona.
   Rozwinięcie NAKŁADA się na treść (nie przesuwa jej), więc otwarcie menu nigdy nie zmienia
   szerokości dokumentu. */
@media (max-width: 899px) {
  .appnav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--navrail-w);
    height: 100dvh;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 7px calc(10px + env(safe-area-inset-bottom));
    background: rgba(21, 23, 28, 0.96);
    backdrop-filter: blur(16px);
    border-right: 1px solid var(--line-soft);
    transition: width 0.22s cubic-bezier(0.2, 0.75, 0.25, 1);
    overflow: hidden;
  }
  .appnav.is-open {
    width: var(--navrail-w-open);
    box-shadow: 18px 0 40px rgba(0, 0, 0, 0.45);
  }
  .appnav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .appnav .navbtn {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    padding: 11px 10px;
  }
  /* Etykieta znika WIZUALNIE, ale zostaje w drzewie - nazwa dostępna odnośnika jest ta sama w
     obu stanach (aria-label w partialu). */
  .appnav .nlbl {
    font-size: 13px;
    white-space: nowrap;
    opacity: 0;
    width: 0;
    overflow: hidden;
    transition: opacity 0.16s ease;
  }
  .appnav.is-open .nlbl {
    opacity: 1;
    width: auto;
  }
  /* Treść zaczyna się za ZWINIĘTYM paskiem i przy rozwijaniu nie przesuwa się ani o piksel. */
  .has-rail .app-main {
    padding-left: var(--navrail-w);
  }
  .has-rail .screen-pad {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
  }
}
/* desktop: lewy sidebar */
@media (min-width: 900px) {
  .appnav {
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100dvh;
    width: var(--sidenav-w);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 24px 16px;
    background: var(--asphalt-2);
    border-right: 1px solid var(--line);
  }
  .appnav-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 6px 12px 20px;
  }
  .appnav-logo {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--coral), var(--amber));
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .appnav-logo .icon {
    width: 22px;
    height: 22px;
    color: #fff;
  }
  .appnav-word {
    font-family: "Outfit", sans-serif;
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -0.02em;
  }
  .appnav-links {
    flex-direction: column;
    gap: 4px;
  }
}
.navbtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 14px;
  border-radius: 12px;
  color: var(--cream-dimmer);
  transition: color 0.2s, background 0.2s, transform 0.25s cubic-bezier(0.2, 0.75, 0.25, 1);
}

.navbtn .nico {
  width: 22px;
  height: 22px;
  transition: transform 0.3s cubic-bezier(0.2, 0.85, 0.25, 1), filter 0.25s, color 0.2s;
}

.navbtn .nlbl {
  font-size: 10px;
  font-weight: 600;
  transition: transform 0.25s ease, letter-spacing 0.25s ease;
}

.navbtn.active {
  color: var(--lane);
}

.navbtn:hover, .navbtn:focus-visible {
  transform: translateY(-2px);
}

.navbtn:hover .nico, .navbtn:focus-visible .nico {
  transform: translateY(-2px) scale(1.1) rotate(-4deg);
  filter: drop-shadow(0 3px 5px rgba(245, 200, 76, 0.22));
}

.navbtn:hover .nlbl, .navbtn:focus-visible .nlbl {
  transform: translateY(1px);
  letter-spacing: 0.02em;
}

.navbtn.active .nico {
  animation: navIconSettle 0.52s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

.navbtn:nth-child(5):hover .nico {
  transform: translateY(-2px) scale(1.1) rotate(5deg);
}

.navbtn:last-child:hover .nico {
  transform: translateY(-2px) scale(1.08) rotate(18deg);
}

@keyframes navIconSettle {
  0% {
    transform: translateY(4px) scale(0.82);
    opacity: 0.45;
  }
  58% {
    transform: translateY(-2px) scale(1.12);
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
@media (min-width: 900px) {
  .navbtn {
    flex-direction: row;
    justify-content: flex-start;
    gap: 13px;
    width: 100%;
    padding: 12px 14px;
  }
  .navbtn .nico {
    width: 20px;
    height: 20px;
  }
  .navbtn .nlbl {
    font-size: 14px;
    font-weight: 600;
  }
  .navbtn:hover, .navbtn:focus-visible {
    background: var(--asphalt-3);
    color: var(--cream);
    transform: translateX(3px);
  }
  .navbtn.active {
    background: rgba(245, 200, 76, 0.12);
    color: var(--lane);
  }
}
@media (prefers-reduced-motion: reduce) {
  .navbtn, .navbtn .nico, .navbtn .nlbl {
    animation: none !important;
    transition: none !important;
  }
}
/* Menu backoffice (adminnav zastępuje appnav na /admin/*) - akcent coral zamiast lane,
   żeby było od razu widać, że to panel administratora, nie zwykła aplikacja. */
.adminnav .appnav-logo {
  background: linear-gradient(135deg, var(--coral), #B33A2E);
}

.adminnav .navbtn.active {
  color: var(--coral);
}

@media (min-width: 900px) {
  .adminnav .navbtn.active {
    background: rgba(255, 107, 92, 0.14);
    color: var(--coral);
  }
}
/* Panel administratora używa tego samego paska co aplikacja (reguły wyżej) - różni go akcent
   kolorystyczny i to, że pozycji jest więcej. */
.navrail-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--cream);
  cursor: pointer;
  font-family: "Outfit", sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
}

.navrail-toggle:hover {
  background: rgba(247, 244, 238, 0.08);
}

.navrail-burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
}

.navrail-burger span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--lane);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.navrail-burger span:nth-child(2) {
  width: 70%;
}

.appnav.is-open .navrail-burger span:nth-child(2) {
  opacity: 0.35;
}

.adminnav .navrail-burger span {
  background: var(--coral);
}

@media (max-width: 899px) {
  .navrail-toggle .nlbl {
    opacity: 0;
    width: 0;
    overflow: hidden;
  }
  .appnav.is-open .navrail-toggle .nlbl {
    opacity: 1;
    width: auto;
  }
}
/* Desktop: pasek jest kolumną układu, więc zwinięcie tylko ją zwęża. */
@media (min-width: 900px) {
  .appnav {
    width: var(--navrail-w-open);
    transition: width 0.22s cubic-bezier(0.2, 0.75, 0.25, 1), padding 0.22s cubic-bezier(0.2, 0.75, 0.25, 1);
    overflow: hidden;
  }
  .appnav:not(.is-open) {
    width: var(--navrail-w);
    padding-left: 8px;
    padding-right: 8px;
  }
  .appnav:not(.is-open) .nlbl, .appnav:not(.is-open) .appnav-word {
    opacity: 0;
    width: 0;
    overflow: hidden;
  }
  .appnav .navbtn {
    padding: 11px 10px;
    gap: 12px;
  }
  /* Desktop icons are 20px, so the burger has to be 20px too - otherwise the toggle and the
     items below it sit on two different vertical axes (1px apart, but visible on a 56px rail). */
  .appnav .navrail-burger {
    width: 20px;
    height: 20px;
  }
}
/* COLLAPSED RAIL: the icon is the whole content of a row, so it may neither shrink nor stay
   glued to the left edge.
   1. `flex:0 0 auto` - `.nico` is an svg carrying only `width`, and a flex item shrinks by
      default. With a 56px rail, 16px column padding and 10px row padding only 4px were left for
      the icon: icons disappeared and just the active pill background showed (report 2026-08-04).
   2. Centering - a zero-width label does NOT remove the `gap`, so a collapsed row still carried
      12px of gap plus side padding, offsetting the icon to the left of the burger above it. */
.appnav .navbtn .nico, .appnav .navrail-burger {
  flex: 0 0 auto;
}

.appnav:not(.is-open) .navbtn,
.appnav:not(.is-open) .navrail-toggle {
  justify-content: center;
  gap: 0;
  padding-left: 0;
  padding-right: 0;
}

/* --- toast --- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 84px;
  transform: translateX(-50%) translateY(20px);
  background: var(--asphalt-4);
  border: 1px solid var(--line);
  color: var(--cream);
  padding: 11px 18px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  z-index: 80;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.6);
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (min-width: 900px) {
  .toast {
    bottom: 28px;
  }
}
.wishlist-success-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(13, 17, 23, 0.48);
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.wishlist-success-backdrop.show {
  opacity: 1;
}

.wishlist-success {
  width: min(460px, 100%);
  padding: 30px 26px;
  border-radius: 22px;
  text-align: center;
  color: var(--cream);
  background: linear-gradient(145deg, var(--asphalt-2), var(--asphalt-3));
  border: 1px solid rgba(245, 200, 76, 0.55);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.5), 0 0 50px rgba(245, 200, 76, 0.12);
}

.wishlist-success-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--asphalt);
  background: var(--lane);
  box-shadow: 0 0 0 8px rgba(245, 200, 76, 0.12);
}

.wishlist-success-icon .icon {
  width: 30px;
  height: 30px;
}

.wishlist-success strong {
  display: block;
  font: 700 24px/1.15 "Outfit", sans-serif;
}

.wishlist-success p {
  margin: 10px auto 0;
  max-width: 390px;
  color: var(--cream-dim);
  line-height: 1.55;
}

/* --- login / brand --- */
.logo-badge {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--coral), var(--amber));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  box-shadow: 0 12px 30px -8px rgba(255, 107, 92, 0.5);
}

.logo-badge .icon {
  width: 34px;
  height: 34px;
  color: #fff;
}

.brand-big {
  font-family: "Outfit", sans-serif;
  font-weight: 800;
  font-size: 40px;
  letter-spacing: -0.03em;
  line-height: 1;
}

.brand-tag {
  font-size: 15px;
  color: var(--cream-dim);
  margin: 10px 0 38px;
  line-height: 1.5;
}

.auth-card {
  width: 100%;
  max-width: 420px;
}

/* --- landing page (publiczna) --- */
.landing {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 32px 22px 24px;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.hero {
  text-align: center;
  padding: 36px 0 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-title {
  font-family: "Outfit", sans-serif;
  font-weight: 800;
  font-size: 46px;
  letter-spacing: -0.03em;
  line-height: 1;
}

.hero-tag {
  font-size: 17px;
  color: var(--cream-dim);
  max-width: 560px;
  margin: 14px 0 26px;
  line-height: 1.55;
}

.hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 8px;
}

@media (min-width: 640px) {
  .feature-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 980px) {
  .feature-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.feature-card {
  background: var(--asphalt-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px;
}

.feature-ico {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--coral), var(--amber));
  color: #fff;
  margin-bottom: 12px;
}

.feature-ico .icon {
  width: 24px;
  height: 24px;
}

.landing-footer {
  margin-top: auto;
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--cream-dimmer);
}

.landing-footer a {
  color: var(--cream-dim);
}

/* landing: topbar z kotwicami (sticky od tabletu wzwyż) */
.landing {
  padding-top: 0;
}

.landing-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
}

.lt-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: 17px;
}

.lt-brand .icon {
  width: 20px;
  height: 20px;
  color: var(--coral);
}

.lt-links {
  display: none;
  gap: 18px;
  margin-left: auto;
}

.lt-links a {
  color: var(--cream-dim);
  font-size: 14px;
}

.lt-links a:hover {
  color: var(--cream);
}

.lt-cta {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.btn.btn-topbar {
  width: auto;
  padding: 8px 14px;
  font-size: 13px;
}

@media (min-width: 640px) {
  .landing-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--asphalt);
  }
  .lt-links {
    display: flex;
  }
  .lt-cta {
    margin-left: 0;
  }
}
/* landing: żywa sygnatura w hero (osadzony TripProgress) */
.hero {
  padding-top: 24px;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 16px;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--asphalt-2);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cream-dim);
}

.hero-eyebrow .icon {
  width: 15px;
  height: 15px;
  color: var(--coral);
}

.hero-tag b {
  color: var(--cream);
  font-weight: 700;
}

.hero-demo {
  margin-top: 4px;
}

.hero-demo .road-stage {
  border: 1px solid var(--line);
}

.demo-caption {
  text-align: center;
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--cream-dimmer);
}

/* landing: blok „bólu rodzica" (Koncept A) */
.parent-band {
  background: var(--asphalt-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 34px 22px;
  margin-top: 26px;
}

.parent-band .h-sub {
  color: var(--cream-dim);
  line-height: 1.55;
}

/* landing: pasek liczb społeczności */
.stat-strip {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  padding: 26px 0 8px;
  text-align: center;
}

.stat-strip b {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-weight: 500;
  font-size: 20px;
  color: var(--lane);
}

.stat-strip span {
  font-size: 12px;
  color: var(--cream-dim);
}

/* landing: sekcje z kotwicami + kroki + cennik + CTA */
.landing-label {
  margin-top: 26px;
}

.step-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 640px) {
  .step-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.step-card {
  background: var(--asphalt-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px;
}

.step-card .h-sub {
  margin: 6px 0 0;
}

.step-no {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--coral);
  color: #4A1B0C;
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 10px;
}

.price-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 640px) {
  .price-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.price-card {
  position: relative;
  background: var(--asphalt-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.price-card.premium {
  border: 2px solid var(--coral);
}

.price-amount {
  font-family: "Outfit", sans-serif;
  font-weight: 800;
  font-size: 28px;
  margin: 4px 0 8px;
}

.price-amount span {
  font-size: 13px;
  color: var(--cream-dim);
  font-weight: 400;
}

.price-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--coral);
  color: #4A1B0C;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
}

.price-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.price-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--cream-dim);
  padding: 4px 0;
}

.price-list .icon {
  width: 15px;
  height: 15px;
  color: var(--teal);
  flex: 0 0 auto;
}

.price-card.premium .price-list .icon {
  color: var(--coral);
}

.price-card .btn {
  margin-top: auto;
}

.cta-band {
  text-align: center;
  padding: 40px 0 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* landing: kinetyczna opowieść produktu */
.landing {
  position: relative;
  max-width: 1180px;
  overflow: hidden;
  isolation: isolate;
}

.landing::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  background-image: linear-gradient(rgba(247, 244, 238, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(247, 244, 238, 0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, #000, transparent 38%);
}

.landing::after {
  content: "";
  position: absolute;
  z-index: -2;
  top: 180px;
  left: 46%;
  width: 540px;
  height: 900px;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 25%, rgba(245, 200, 76, 0.04) 48%, transparent 70%);
  transform: skewX(-16deg);
  animation: landing-beam 12s ease-in-out infinite alternate;
}

.landing-glow {
  position: absolute;
  z-index: -1;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.16;
  pointer-events: none;
}

.landing-glow-one {
  top: 20px;
  right: -260px;
  background: var(--coral);
  animation: landing-float 10s ease-in-out infinite;
}

.landing-glow-two {
  top: 720px;
  left: -340px;
  background: var(--teal);
  animation: landing-float 13s ease-in-out -4s infinite reverse;
}

.landing-cursor-car {
  --steer:0deg;
  --body-roll:0deg;
  --body-pitch:0deg;
  --body-lift:0px;
  position: fixed;
  z-index: 1001;
  left: 0;
  top: 0;
  width: 88px;
  height: 108px;
  pointer-events: none;
  visibility: hidden;
  will-change: transform;
  perspective: 180px;
  transform-style: preserve-3d;
}

.landing-cursor-car.is-chasing {
  visibility: visible;
  pointer-events: none;
}

.cursor-car-rig {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.cursor-car-webgl {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: 88px;
  height: 108px;
  pointer-events: none;
  filter: drop-shadow(0 7px 4px rgba(0, 0, 0, 0.28));
}

.cursor-car-hitbox {
  position: absolute;
  z-index: 7;
  left: 17px;
  top: 16px;
  width: 54px;
  height: 76px;
  border-radius: 42%;
  pointer-events: none;
}

.landing-cursor-car.is-chasing .cursor-car-hitbox {
  pointer-events: auto;
  cursor: pointer;
}

.cursor-car-webgl.is-webgl-ready ~ .cursor-car-model, .cursor-car-webgl.is-webgl-ready ~ .cursor-wheel {
  display: none;
}

.landing-cursor-car.has-webgl .cursor-car-shadow {
  display: none;
}

/* CSS-only fallback trail (below): never got a .has-webgl hiding rule like the shadow/model
   above it, so it kept firing its opacity/translateY animation on every .is-accelerating even
   in 3D mode - a light blurred bar near the bottom of the rig, most noticeable now that
   accelerating happens far more often at the higher chase speed. */
.landing-cursor-car.has-webgl .cursor-car-trail {
  display: none;
}

.landing-cursor-car.is-bumped .cursor-car-rig {
  animation: cursor-car-bump 0.42s cubic-bezier(0.2, 0.75, 0.3, 1);
}

.cursor-car-model {
  position: absolute;
  z-index: 2;
  inset: 12px 16px;
  transform-style: preserve-3d;
  transform: translateZ(calc(5px + var(--body-lift))) rotateX(var(--body-pitch)) rotateY(var(--body-roll));
  transition: transform 0.09s linear;
}

.cursor-car-shadow {
  position: absolute;
  z-index: -2;
  inset: 13px 2px 0 8px;
  border-radius: 48%;
  background: rgba(0, 0, 0, 0.42);
  filter: blur(5px);
  transform: translate(4px, 5px) scale(0.94);
}

.cursor-car-underbody {
  position: absolute;
  inset: 3px 2px;
  border-radius: 10px 10px 8px 8px;
  background: #15171c;
  transform: translateZ(-4px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
}

.cursor-car-body {
  position: absolute;
  inset: 2px 1px;
  border-radius: 12px 12px 8px 8px;
  transform-style: preserve-3d;
  background: linear-gradient(90deg, #8d211e 0, #e34b3f 16%, #ff776a 42%, #c1322c 76%, #781b1a);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42), inset 5px 0 8px rgba(255, 255, 255, 0.12), 0 2px 3px rgba(0, 0, 0, 0.45);
}

.cursor-car-hood, .cursor-car-trunk {
  position: absolute;
  left: 5px;
  right: 5px;
  border-radius: 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.34);
  background: linear-gradient(90deg, rgba(103, 20, 19, 0.15), rgba(255, 141, 126, 0.4), rgba(105, 20, 20, 0.24));
}

.cursor-car-hood {
  top: 3px;
  height: 14px;
  transform: translateZ(2px) rotateX(-5deg);
}

.cursor-car-trunk {
  bottom: 3px;
  height: 11px;
  transform: translateZ(1px) rotateX(5deg);
}

.cursor-car-side {
  position: absolute;
  top: 8px;
  bottom: 7px;
  width: 5px;
  background: linear-gradient(#e65045, #7e1c1b);
  transform-origin: center;
}

.cursor-car-side-left {
  left: -2px;
  transform: rotateY(-72deg) translateZ(1px);
}

.cursor-car-side-right {
  right: -2px;
  transform: rotateY(72deg) translateZ(1px);
}

.cursor-car-bumper {
  position: absolute;
  left: 6px;
  right: 6px;
  height: 3px;
  border-radius: 4px;
  background: linear-gradient(90deg, #555b64, #e1e5e8, #555b64);
}

.cursor-car-bumper-front {
  top: -1px;
  transform: translateZ(1px);
}

.cursor-car-bumper-rear {
  bottom: -1px;
  transform: translateZ(1px);
}

.cursor-car-cabin {
  position: absolute;
  z-index: 2;
  left: 6px;
  right: 6px;
  top: 16px;
  height: 28px;
  border-radius: 8px 8px 6px 6px;
  transform: translateZ(5px);
  transform-style: preserve-3d;
  background: linear-gradient(90deg, #711b1b, #d94238 20%, #e95d50 52%, #781c1c);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.38), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.cursor-car-roof {
  position: absolute;
  inset: 6px 4px;
  border-radius: 4px;
  background: linear-gradient(120deg, #d8463c, #ff8172 42%, #93231f);
  transform: translateZ(4px);
  box-shadow: inset 2px 1px 2px rgba(255, 255, 255, 0.35);
}

.cursor-car-glass {
  position: absolute;
  background: linear-gradient(145deg, #9bd1dc 0, #31505a 50%, #14272e 100%);
  border: 1px solid rgba(197, 233, 239, 0.38);
  box-shadow: inset 2px 1px 2px rgba(255, 255, 255, 0.22);
}

.cursor-car-windscreen {
  left: 4px;
  right: 4px;
  top: 1px;
  height: 7px;
  border-radius: 5px 5px 2px 2px;
  transform: rotateX(35deg) translateZ(1px);
  transform-origin: bottom;
}

.cursor-car-rear-window {
  left: 4px;
  right: 4px;
  bottom: 1px;
  height: 6px;
  border-radius: 2px 2px 4px 4px;
  transform: rotateX(-35deg) translateZ(1px);
  transform-origin: top;
}

.cursor-car-window-left, .cursor-car-window-right {
  top: 8px;
  bottom: 7px;
  width: 5px;
}

.cursor-car-window-left {
  left: 1px;
  transform: rotateY(-48deg) translateZ(2px);
}

.cursor-car-window-right {
  right: 1px;
  transform: rotateY(48deg) translateZ(2px);
}

.cursor-wheel {
  position: absolute;
  z-index: 1;
  width: 6px;
  height: 14px;
  border-radius: 3px;
  background: repeating-linear-gradient(0deg, #08090b 0 2px, #30343b 2px 3px);
  box-shadow: inset 0 0 0 1px #111317, 0 1px 2px rgba(0, 0, 0, 0.65);
  transform-origin: 50% 50%;
  transition: transform 0.08s linear;
}

.cursor-wheel-fl {
  left: 1px;
  top: 11px;
  transform: rotate(var(--steer));
}

.cursor-wheel-fr {
  right: 1px;
  top: 11px;
  transform: rotate(var(--steer));
}

.cursor-wheel-rl {
  left: 1px;
  bottom: 10px;
}

.cursor-wheel-rr {
  right: 1px;
  bottom: 10px;
}

.cursor-headlight, .cursor-tail-light {
  position: absolute;
  z-index: 4;
  width: 7px;
  height: 3px;
  border-radius: 50%;
}

.cursor-headlight {
  top: 0;
  background: #fff6b0;
  opacity: 0.68;
  box-shadow: 0 -3px 7px rgba(255, 241, 132, 0.58);
}

.cursor-headlight-left {
  left: 4px;
}

.cursor-headlight-right {
  right: 4px;
}

.cursor-tail-light {
  bottom: 1px;
  background: #ff302d;
  box-shadow: 0 2px 4px rgba(255, 48, 45, 0.48);
}

.cursor-tail-light-left {
  left: 4px;
}

.cursor-tail-light-right {
  right: 4px;
}

.landing-cursor-car.is-angry .cursor-car-rig {
  animation: cursor-angry-shudder 0.46s ease-in-out 1;
}

.landing-cursor-car.is-fleeing .cursor-car-rig {
  animation: cursor-flee-jolt 0.28s ease-in-out infinite alternate;
}

.landing-cursor-car.is-angry .cursor-car-model {
  filter: saturate(1.35) brightness(0.92);
}

.landing-cursor-car.is-angry .cursor-headlight {
  background: #ff9b52;
  box-shadow: 0 -3px 7px rgba(255, 76, 35, 0.7);
}

.landing-cursor-car.is-angry .cursor-headlight-left {
  transform: rotate(-18deg);
}

.landing-cursor-car.is-angry .cursor-headlight-right {
  transform: rotate(18deg);
}

.landing-cursor-car.blink-three .cursor-headlight {
  animation: cursor-headlight-blink 0.38s steps(1, end) 3;
}

.landing-cursor-car.blink-two .cursor-headlight {
  animation: cursor-headlight-blink 0.38s steps(1, end) 2;
}

.cursor-car-trail {
  position: absolute;
  z-index: -2;
  left: 28px;
  right: 28px;
  top: 82px;
  height: 28px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(220, 230, 235, 0.22), transparent);
  filter: blur(4px);
  transform: translateY(8px);
}

.landing-cursor-car.is-accelerating .cursor-car-trail {
  opacity: 1;
  animation: cursor-fog-pulse 0.35s ease-in-out infinite alternate;
}

.cursor-track-canvas {
  position: fixed;
  z-index: 1000;
  inset: 0;
  width: 100vw;
  height: 100vh;
  overflow: visible;
  pointer-events: none;
}

.cursor-track-line {
  stroke: rgba(9, 10, 12, 0.72);
  stroke-width: 2.4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.cursor-tire-mark {
  position: fixed;
  z-index: 1000;
  width: 27px;
  height: 48px;
  pointer-events: none;
  opacity: calc(0.42 * var(--mark-strength));
  transform-origin: 50% 0;
  background: linear-gradient(90deg, transparent 0 3px, #08090b 3px 6px, transparent 6px 21px, #08090b 21px 24px, transparent 24px);
  mask-image: linear-gradient(to bottom, #000 0 65%, transparent);
  animation: cursor-mark-fade 1.4s ease-out forwards;
}

.cursor-accel-fog {
  position: fixed;
  z-index: 1000;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(222, 229, 232, 0.22);
  filter: blur(5px);
  animation: cursor-fog-leave 0.76s ease-out forwards;
}

.landing-topbar {
  min-height: 72px;
  border-bottom: 1px solid transparent;
}

.lt-brand {
  font-size: 20px;
  letter-spacing: -0.03em;
}

.lt-brand .icon {
  color: var(--lane);
  filter: drop-shadow(0 0 10px rgba(245, 200, 76, 0.35));
}

.landing-topbar .btn {
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.landing-topbar .btn:hover {
  transform: translateY(-2px);
  border-color: rgba(245, 200, 76, 0.45);
}

.hero {
  position: relative;
  min-height: 540px;
  padding: 76px 0 58px;
  text-align: left;
  align-items: flex-start;
  justify-content: center;
}

.hero-copy {
  position: relative;
  z-index: 2;
  width: min(680px, 70%);
}

.hero-eyebrow {
  background: rgba(28, 31, 38, 0.65);
  backdrop-filter: blur(12px);
  border-color: rgba(245, 200, 76, 0.2);
  color: var(--cream);
}

.hero-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 5px rgba(78, 203, 113, 0.12);
  animation: landing-pulse 1.8s ease-out infinite;
}

.hero-title {
  max-width: 760px;
  font-size: clamp(48px, 7vw, 86px);
  line-height: 0.94;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.hero-title span {
  color: var(--lane);
  background: linear-gradient(115deg, var(--lane), var(--amber), var(--coral));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-tag {
  max-width: 610px;
  margin: 22px 0 28px;
  font-size: 18px;
}

.hero-cta {
  justify-content: flex-start;
}

.hero-cta .btn {
  width: auto;
  padding-inline: 24px;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.hero-cta .btn:hover {
  transform: translateY(-3px);
}

.hero-cta .btn-primary:hover {
  box-shadow: 0 14px 34px -12px rgba(245, 200, 76, 0.65);
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 22px;
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--cream-dimmer);
}

.hero-proof span:first-child {
  color: var(--green);
}

.hero-journey {
  position: absolute;
  right: 0;
  top: 90px;
  width: 390px;
  height: 360px;
  overflow: hidden;
  border-radius: 30px;
  opacity: 0.92;
  background: linear-gradient(180deg, rgba(80, 47, 52, 0.28), rgba(21, 23, 28, 0.06) 58%);
  mask-image: linear-gradient(90deg, transparent, #000 16%);
}

.journey-sun {
  position: absolute;
  right: 65px;
  top: 40px;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--amber);
  opacity: 0.75;
  box-shadow: 0 0 70px 20px rgba(255, 184, 77, 0.18);
}

.journey-cloud {
  position: absolute;
  left: -90px;
  width: 72px;
  height: 8px;
  border-radius: 50%;
  background: rgba(247, 244, 238, 0.09);
  filter: blur(2px);
  animation: journey-cloud 12s linear infinite;
}

.journey-cloud::after {
  content: "";
  position: absolute;
  width: 34px;
  height: 16px;
  left: 20px;
  bottom: 0;
  border-radius: 50% 50% 20% 20%;
  background: inherit;
}

.journey-cloud-a {
  top: 76px;
}

.journey-cloud-b {
  top: 118px;
  animation-duration: 16s;
  animation-delay: -7s;
  scale: 0.7;
}

.journey-horizon {
  position: absolute;
  left: 0;
  right: 0;
  top: 174px;
  height: 80px;
  background: linear-gradient(150deg, transparent 12%, rgba(42, 157, 157, 0.12) 12% 31%, transparent 31%), linear-gradient(210deg, transparent 18%, rgba(247, 244, 238, 0.05) 18% 40%, transparent 40%);
}

.journey-road {
  position: absolute;
  left: 82px;
  bottom: -55px;
  width: 270px;
  height: 245px;
  background: linear-gradient(90deg, transparent, #30343f 22% 78%, transparent);
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
}

.journey-lane {
  position: absolute;
  left: 194px;
  top: 190px;
  width: 5px;
  height: 180px;
  background: repeating-linear-gradient(#f5c84c 0 13px, transparent 13px 27px);
  transform: perspective(160px) rotateX(34deg);
  transform-origin: top;
  opacity: 0.75;
}

.journey-car {
  position: absolute;
  z-index: 2;
  left: 162px;
  bottom: 46px;
  display: grid;
  place-items: center;
  color: var(--coral);
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.5));
  animation: journey-drive 3.2s ease-in-out infinite;
  transform-origin: 50% 100%;
}

.journey-car .icon {
  width: 74px;
  height: 52px;
}

.journey-car i {
  position: absolute;
  bottom: 1px;
  width: 64px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.58);
  filter: blur(2px);
}

.journey-sign {
  position: absolute;
  z-index: 3;
  right: 24px;
  top: 143px;
  padding: 8px 14px;
  border: 2px solid var(--cream);
  border-radius: 8px;
  background: #23655f;
  color: #fff;
  font: 800 12px "Outfit", sans-serif;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
}

.journey-sign::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 3px;
  height: 46px;
  background: #858a91;
}

.journey-sign small {
  display: block;
  font: 500 8px "JetBrains Mono", monospace;
  opacity: 0.75;
}

.hero-demo {
  position: relative;
  width: calc(100% + 32px);
  margin: 0 -16px;
  border: 1px solid rgba(247, 244, 238, 0.14);
  border-radius: 24px;
  background: #0e1014;
  padding: 38px 10px 10px;
  box-shadow: 0 45px 100px -42px rgba(0, 0, 0, 0.9), 0 0 0 8px rgba(255, 255, 255, 0.018);
  overflow: hidden;
}

.demo-window-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  color: var(--cream-dimmer);
}

.demo-window-bar span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--coral);
}

.demo-window-bar span:nth-child(2) {
  background: var(--lane);
}

.demo-window-bar span:nth-child(3) {
  background: var(--green);
}

.demo-window-bar b {
  margin-left: auto;
  font: 500 9px "JetBrains Mono", monospace;
  letter-spacing: 0.12em;
}

.demo-switcher {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px 8px 14px;
  background: #0e1014;
}

.demo-switcher button {
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--cream-dimmer);
  text-align: left;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}

.demo-switcher button:hover {
  transform: translateY(-2px);
  color: var(--cream);
}

.demo-switcher button.active {
  color: var(--asphalt);
  background: var(--lane);
  border-color: var(--lane);
}

.demo-switcher span, .demo-switcher small {
  display: block;
}

.demo-switcher span {
  font: 700 13px "Outfit", sans-serif;
}

.demo-switcher small {
  margin-top: 2px;
  font-size: 9px;
  opacity: 0.7;
}

.hero-demo .road-stage {
  --road-edge:130px;
  border: 0;
  border-radius: 16px;
}

.hero-demo .road-sky {
  height: clamp(300px, 42vw, 470px);
}

.hero-demo .road-base {
  height: 130px;
}

.hero-demo .grass {
  bottom: 130px;
  height: 20px;
}

.hero-demo .parallax-hills {
  bottom: 130px;
}

.hero-demo .roadside-landmarks {
  bottom: 130px;
}

.hero-demo .roadside-trees {
  bottom: 130px;
}

.hero-demo .road-foreground {
  bottom: 130px;
}

.hero-demo .fog-bands {
  bottom: 100px;
}

.hero-demo .fireflies {
  bottom: 130px;
}

.hero-demo .rainbow-arc {
  bottom: 130px;
}

.hero-demo .road-posts {
  bottom: 122px;
  height: 24px;
}

.hero-demo .city-sign {
  bottom: 130px;
}

.hero-demo .car-unit {
  bottom: 28px;
  width: clamp(165px, 18vw, 210px);
}

.hero-demo .car-unit > .car-svg-wrap {
  width: 100%;
}

.hero-demo .crew-dot {
  width: clamp(17px, 1.8vw, 21px) !important;
}

.hero-demo .car-crew.behind .crew-cutout {
  transform: translate(-50%, -12%);
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.5));
}

.hero-demo .car-crew.front .crew-cutout {
  transform: translate(-50%, -40%);
}

.hero-demo .convoy-unit {
  width: clamp(165px, 18vw, 210px);
  bottom: 112px;
}

.hero-demo .convoy-unit .crew-dot {
  width: clamp(14px, 1.5vw, 18px) !important;
}

.demo-caption {
  margin: 15px 0 7px;
}

.road-ticker {
  width: calc(100% + 44px);
  margin: 42px -22px 20px;
  overflow: hidden;
  transform: rotate(-1.3deg);
  background: var(--lane);
  color: var(--asphalt);
}

.road-ticker div {
  display: flex;
  align-items: center;
  gap: 28px;
  width: max-content;
  padding: 10px 0;
  animation: ticker-drive 24s linear infinite;
  font: 800 12px "Outfit", sans-serif;
  letter-spacing: 0.08em;
}

.road-ticker div::after {
  content: "ANIMOWANA TRASA ◆ WSPÓLNA PRZYGODA ◆ PRAWDZIWY POSTĘP ◆ MNIEJ PYTAŃ ◆ WIĘCEJ FRAJDY ◆";
  word-spacing: 24px;
}

.road-ticker i {
  font-style: normal;
  font-size: 8px;
}

/* landing: waitlist conversion layer - shared signup form (hero / band / final / dock) */
.wishlist-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
  max-width: 430px;
}

.wishlist-form .input {
  flex: 1;
  min-width: 220px;
  background: rgba(21, 23, 28, 0.75);
}

.wishlist-form .btn {
  width: auto;
  padding-inline: 22px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.wishlist-form .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -12px rgba(245, 200, 76, 0.65);
}

.wishlist-note {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--cream-dimmer);
}

.hero-signup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.hero-signup .wishlist-form {
  max-width: 470px;
}

.hero-signup .wishlist-form .input {
  padding-block: 13px;
}

.hero-demo-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  color: var(--cream-dim);
  font-size: 13px;
  font-weight: 600;
}

.hero-demo-link:hover {
  color: var(--cream);
}

.hero-demo-link .icon {
  width: 15px;
  height: 15px;
}

.lt-login {
  align-self: center;
  margin-right: 4px;
  color: var(--cream-dim);
  font-size: 13px;
}

.lt-login:hover {
  color: var(--cream);
}

/* landing: waitlist band as a toll gate - the barrier lifts once the e-mail is valid */
.wishlist-band {
  position: relative;
  margin-top: 54px;
  padding: 132px 28px 40px;
  border: 1px solid rgba(245, 200, 76, 0.22);
  border-radius: 28px;
  overflow: hidden;
  background: radial-gradient(circle at 80% 20%, rgba(245, 200, 76, 0.12), transparent 38%), var(--asphalt-2);
  transition: border-color 0.5s, box-shadow 0.5s;
}

.wishlist-band.is-open {
  border-color: rgba(245, 200, 76, 0.5);
  box-shadow: 0 0 60px -18px rgba(245, 200, 76, 0.4);
}

.wishlist-title {
  font-size: clamp(28px, 3.4vw, 40px);
  max-width: 660px;
}

.wishlist-sub {
  max-width: 540px;
  margin: 12px 0 20px;
}

.wishlist-band .wishlist-form {
  justify-content: center;
}

/* One coherent barrier: hinge post on the left, the arm rests on a second post that
   carries the exit sign, and a soft ground line anchors both - nothing floats. */
.wishlist-gate {
  position: absolute;
  left: 50%;
  top: 26px;
  width: min(430px, 82%);
  height: 96px;
  transform: translateX(-50%);
}

.wishlist-gate::after {
  content: "";
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: -4px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(247, 244, 238, 0.16) 18%, rgba(247, 244, 238, 0.16) 82%, transparent);
}

.gate-sign {
  position: absolute;
  right: 0;
  bottom: 56px;
  padding: 7px 13px;
  border: 2px solid var(--cream);
  border-radius: 8px;
  background: #23655f;
  color: #fff;
  font: 800 12px "Outfit", sans-serif;
  letter-spacing: 0.04em;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
}

.gate-sign small {
  display: block;
  font: 600 8px "JetBrains Mono", monospace;
  opacity: 0.8;
}

.gate-post {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 10px;
  height: 64px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(#4a4f58, #2c3037);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.gate-post-right {
  left: auto;
  right: 48px;
  height: 46px;
}

.gate-arm {
  position: absolute;
  left: 8px;
  bottom: 44px;
  width: calc(100% - 60px);
  height: 12px;
  border-radius: 7px;
  transform-origin: 6px 50%;
  background: repeating-linear-gradient(90deg, var(--coral) 0 26px, var(--cream) 26px 52px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
  transition: transform 0.65s cubic-bezier(0.3, 1.4, 0.4, 1);
}

.wishlist-band.is-open .gate-arm {
  transform: rotate(-58deg);
}

.wishlist-band .stat-strip {
  width: 100%;
  margin: 28px 0 0;
  padding: 24px 0 0;
  border-block: 0;
  border-top: 1px solid var(--line);
}

/* landing: sticky signup dock - slides in when no other signup form is on screen */
.wishlist-dock {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(620px, 100vw - 24px);
  padding: 12px 16px;
  border: 1px solid rgba(245, 200, 76, 0.32);
  border-radius: 18px;
  background: rgba(15, 17, 22, 0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.8);
  transform: translate(-50%, calc(100% + 26px));
  visibility: hidden;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.25, 1), visibility 0.4s;
}

.wishlist-dock.is-visible {
  transform: translate(-50%, 0);
  visibility: visible;
}

.dock-copy {
  flex: none;
}

.dock-copy b {
  display: block;
  font: 700 13px "Outfit", sans-serif;
}

.dock-copy small {
  display: block;
  margin-top: 2px;
  color: var(--cream-dimmer);
  font-size: 10px;
}

.wishlist-dock .wishlist-form {
  flex: 1;
  max-width: none;
  flex-wrap: nowrap;
}

.wishlist-dock .wishlist-form .input {
  min-width: 0;
}

@media (max-width: 560px) {
  .wishlist-dock {
    gap: 10px;
  }
  .dock-copy small {
    display: none;
  }
}
/* landing: final CTA hosts a real form instead of an anchor jump */
.final-cta-title {
  font-size: 26px;
}

.final-cta .wishlist-form {
  position: relative;
  z-index: 1;
  justify-content: center;
  margin-top: 16px;
}

.final-cta .wishlist-form .input {
  background: rgba(21, 23, 28, 0.88);
  border-color: transparent;
  color: var(--cream);
}

.stat-strip {
  margin: 28px 0;
  padding: 30px;
  border-block: 1px solid var(--line);
}

.stat-strip b {
  font-size: 30px;
  color: var(--cream);
  letter-spacing: -0.06em;
}

.stat-strip span {
  margin-top: 5px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.parent-band {
  position: relative;
  overflow: hidden;
  min-height: 260px;
  justify-content: center;
  background: linear-gradient(125deg, rgba(255, 107, 92, 0.14), transparent 48%), var(--asphalt-2);
}

.parent-quote {
  position: absolute;
  left: 26px;
  top: -45px;
  font: 800 190px "Outfit", sans-serif;
  color: rgba(245, 200, 76, 0.08);
}

.landing-section {
  padding-top: 64px;
  scroll-margin-top: 76px;
}

.landing-label {
  margin-bottom: 18px;
  color: var(--lane);
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.12em;
}

.collection-story {
  position: relative;
}

.collection-story::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 110px -80px 20px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(42, 157, 157, 0.11), transparent 68%);
  filter: blur(22px);
  pointer-events: none;
}

.collection-story-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: 44px;
  align-items: end;
}

.collection-story-heading .landing-label {
  display: block;
  margin: 0 0 15px;
}

.collection-story-heading .hero-title {
  max-width: 700px;
  font-size: clamp(32px, 4.6vw, 54px);
}

.collection-story-heading > .h-sub {
  margin-bottom: 6px;
  line-height: 1.75;
}

.landing-find-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 30px;
}

.landing-find-card {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 132px;
  padding: 20px;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--tier, #f5c84c) 24%, var(--line));
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.035), rgba(17, 19, 24, 0.72));
  box-shadow: 0 18px 40px -32px #000;
}

.landing-find-card:nth-child(1) {
  --tier:#c78348;
}

.landing-find-card:nth-child(2) {
  --tier:#f5c84c;
}

.landing-find-card:nth-child(3) {
  --tier:#73e4ef;
}

.landing-find-medallion {
  flex: 0 0 80px;
  display: grid;
  place-items: center;
  min-height: 84px;
  perspective: 420px;
}

.landing-find-medallion .wildlife-badge-emblem {
  width: 72px;
  height: 72px;
  flex-basis: 72px;
}

.landing-find-card h3, .landing-badge-copy h3 {
  margin: 0;
  color: var(--cream);
  font-family: var(--font-display, "Outfit", sans-serif);
  font-size: 17px;
}

.landing-find-card p, .landing-badge-copy p {
  margin: 6px 0 0;
  color: var(--cream-dim);
  font-size: 12px;
  line-height: 1.55;
}

.landing-badge-journey {
  display: grid;
  grid-template-columns: minmax(220px, 0.58fr) minmax(0, 1.42fr);
  gap: 30px;
  align-items: center;
  margin-top: 14px;
  padding: 26px 28px 28px;
  border: 1px solid rgba(245, 200, 76, 0.22);
  border-radius: 24px;
  background: linear-gradient(120deg, rgba(245, 200, 76, 0.07), rgba(19, 22, 27, 0.88) 43%, rgba(115, 228, 239, 0.055));
}

.landing-badge-copy .experience-kicker {
  display: block;
  margin-bottom: 7px;
  color: var(--lane);
}

.landing-tier-road {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(84px, 1fr));
  gap: 12px;
  align-items: start;
  padding-top: 7px;
}

.landing-tier-road::before {
  content: "";
  position: absolute;
  left: 9%;
  right: 9%;
  top: 43px;
  height: 2px;
  background: linear-gradient(90deg, #c78348, #c9d0d8, #f5c84c, #73e4ef);
  opacity: 0.52;
}

.landing-tier-stop {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 5px;
  text-align: center;
}

.landing-tier-stop .wildlife-badge-emblem {
  width: 72px;
  height: 72px;
  flex-basis: 72px;
  background: var(--tier);
}

.landing-tier-stop > b {
  margin-top: 4px;
  color: var(--tier);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.landing-tier-stop > small {
  color: var(--cream-dimmer);
  font-size: 9px;
}

.collection-story-note {
  margin: 14px 0 0;
  color: var(--cream-dimmer);
  font-size: 11px;
  text-align: center;
}

.step-card, .feature-card, .price-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.step-card:hover, .feature-card:hover, .price-card:hover {
  transform: translateY(-7px);
  border-color: rgba(245, 200, 76, 0.32);
  box-shadow: 0 24px 50px -34px #000;
}

.step-card {
  min-height: 190px;
  padding: 24px;
}

.step-no {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--asphalt);
  background: var(--lane);
}

.feature-card {
  min-height: 220px;
  padding: 24px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.025), transparent), var(--asphalt-2);
}

.feature-card::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  right: -70px;
  bottom: -70px;
  border: 1px solid rgba(245, 200, 76, 0.15);
  border-radius: 50%;
  transition: transform 0.4s;
}

.feature-card:hover::after {
  transform: scale(1.8);
}

.feature-ico {
  background: rgba(245, 200, 76, 0.1);
  color: var(--lane);
  border: 1px solid rgba(245, 200, 76, 0.16);
}

/* Zaproszenie do Pomocy na landingu - sama instrukcja mieszka na /help. */
.help-teaser {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.025), transparent), var(--asphalt-2);
}

.help-teaser .hero-title {
  font-size: clamp(26px, 3.4vw, 38px);
  margin-bottom: 8px;
}

.help-teaser .h-sub {
  max-width: 560px;
  margin: 0;
}

.help-teaser .btn {
  width: auto;
  white-space: nowrap;
}

/* Emoji reakcji obserwatorów - te same, które lecą na scenie (ObserverChannel::REACTIONS). */
.landing-reaction-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.landing-reaction-row span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 17px;
  border-radius: 50%;
  background: rgba(247, 244, 238, 0.06);
  border: 1px solid var(--line);
}

.price-card {
  min-height: 300px;
  padding: 28px;
}

.price-card.premium {
  background: radial-gradient(circle at 100% 0, rgba(255, 107, 92, 0.16), transparent 40%), var(--asphalt-2);
  box-shadow: 0 25px 60px -42px rgba(255, 107, 92, 0.8);
}

.showcase-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 24px;
}

.showcase-intro .hero-title {
  max-width: 720px;
  font-size: clamp(36px, 5vw, 64px);
}

.showcase-intro .h-sub {
  max-width: 390px;
  margin: 0 0 7px;
}

.experience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.experience-card {
  position: relative;
  min-height: 390px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--asphalt-2);
}

.experience-card:first-child {
  grid-row: span 2;
  min-height: 794px;
}

.experience-copy {
  position: relative;
  z-index: 4;
  padding: 28px;
}

.experience-copy h3 {
  margin: 7px 0 8px;
  font: 700 26px/1.05 "Outfit", sans-serif;
  letter-spacing: -0.025em;
}

.experience-copy p {
  max-width: 430px;
  margin: 0;
  color: var(--cream-dim);
  font-size: 13px;
  line-height: 1.55;
}

.experience-kicker {
  font: 600 10px "JetBrains Mono", monospace;
  color: var(--lane);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.custom-vehicle-demo {
  position: absolute;
  inset: 195px 24px 24px;
  border-radius: 20px;
  background: radial-gradient(circle at 50% 35%, rgba(42, 157, 157, 0.18), transparent 42%), linear-gradient(#20252e 0 67%, #17201d 67%);
  overflow: hidden;
}

.custom-vehicle-demo::before {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 80px;
  height: 150px;
  background: #343944;
  transform: skewY(-5deg);
  border-block: 2px solid rgba(255, 255, 255, 0.08);
}

.custom-car {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 110px;
  width: 82%;
  color: var(--coral);
  transform: translateX(-50%);
  filter: drop-shadow(0 15px 12px rgba(0, 0, 0, 0.5));
  animation: custom-car-color 8s steps(1) infinite;
}

.custom-car .icon {
  width: 100%;
  height: auto;
}

.custom-avatar {
  position: absolute;
  z-index: 1;
  bottom: 258px;
  width: 54px;
}

.custom-avatar img {
  display: block;
  width: 100%;
}

.custom-avatar-a {
  left: 46%;
}

.custom-avatar-b {
  left: 62%;
}

.custom-swatch {
  position: absolute;
  z-index: 4;
  bottom: 24px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 4px solid #252a33;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.swatch-coral {
  left: calc(50% - 58px);
  background: var(--coral);
}

.swatch-teal {
  left: calc(50% - 17px);
  background: var(--teal);
}

.swatch-amber {
  left: calc(50% + 24px);
  background: var(--amber);
}

.live-world-demo {
  position: absolute;
  inset: 170px 20px 20px;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(#405d86, #e7a675 64%, #334d43 64%);
  animation: world-sky 12s ease-in-out infinite alternate;
}

.world-sun, .world-moon {
  position: absolute;
  width: 45px;
  height: 45px;
  right: 42px;
  top: 28px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 34px rgba(255, 184, 77, 0.48);
  animation: world-celestial 12s ease-in-out infinite alternate;
}

.world-moon {
  opacity: 0;
  background: #eef1dc;
  box-shadow: 0 0 28px rgba(238, 241, 220, 0.35);
  animation-name: world-moon;
}

.world-cloud {
  position: absolute;
  z-index: 2;
  left: -70px;
  width: 74px;
  height: 15px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.72);
  animation: world-cloud 9s linear infinite;
}

.world-cloud::before {
  content: "";
  position: absolute;
  left: 18px;
  bottom: 4px;
  width: 32px;
  height: 23px;
  border-radius: 50%;
  background: inherit;
}

.world-cloud-one {
  top: 48px;
}

.world-cloud-two {
  top: 85px;
  animation-duration: 13s;
  animation-delay: -6s;
  scale: 0.7;
}

.world-rain {
  position: absolute;
  z-index: 3;
  inset: 0;
  opacity: 0;
  background: repeating-linear-gradient(105deg, transparent 0 18px, rgba(210, 232, 255, 0.38) 19px 21px, transparent 22px 35px);
  animation: world-rain 12s ease-in-out infinite alternate;
}

.world-horizon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 48px;
  height: 40px;
  background: linear-gradient(145deg, transparent 15%, #263b36 16% 44%, transparent 45%), linear-gradient(215deg, transparent 20%, #20342f 21% 55%, transparent 56%);
}

.world-road {
  position: absolute;
  left: 25%;
  right: 25%;
  bottom: -15px;
  height: 85px;
  background: #30343d;
  clip-path: polygon(43% 0, 57% 0, 100% 100%, 0 100%);
}

.world-time, .world-weather {
  position: absolute;
  z-index: 4;
  bottom: 12px;
  padding: 5px 8px;
  border-radius: 8px;
  color: #fff;
  background: rgba(13, 15, 19, 0.65);
  backdrop-filter: blur(6px);
  font: 600 9px "JetBrains Mono", monospace;
}

.world-time {
  left: 12px;
}

.world-weather {
  right: 12px;
}

.crew-showcase {
  position: absolute;
  inset: 175px 20px 20px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  padding-top: 18px;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(245, 200, 76, 0.08), rgba(42, 157, 157, 0.1));
}

.crew-showcase span {
  width: 66px;
  margin-left: -10px;
  transform: translateY(calc(var(--crew-index) * 5px));
  filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.35));
}

.crew-showcase span:first-child {
  margin-left: 0;
}

.crew-showcase img {
  display: block;
  width: 100%;
}

.crew-showcase i {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 42px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--lane), transparent);
}

.crew-showcase b {
  position: absolute;
  bottom: 14px;
  font: 600 10px "JetBrains Mono", monospace;
  color: var(--cream-dim);
}

.landing-experience {
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 10px;
  background: #111318;
  box-shadow: 0 36px 90px -55px #000;
}

.experience-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 2px 2px 12px;
}

.experience-tabs button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid transparent;
  border-radius: 14px;
  color: var(--cream-dimmer);
  text-align: left;
  transition: 0.2s ease;
}

.experience-tabs button:hover {
  color: var(--cream);
  background: rgba(255, 255, 255, 0.025);
}

.experience-tabs button.active {
  color: var(--cream);
  border-color: rgba(245, 200, 76, 0.3);
  background: rgba(245, 200, 76, 0.07);
}

.experience-tabs i {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--asphalt);
  background: var(--cream-dimmer);
  font: 700 11px "JetBrains Mono", monospace;
  font-style: normal;
}

.experience-tabs button.active i {
  background: var(--lane);
}

.experience-tabs span, .experience-tabs small {
  display: block;
}

.experience-tabs span {
  font: 700 13px "Outfit", sans-serif;
}

.experience-tabs small {
  margin-top: 2px;
  font: 400 9px "Inter", sans-serif;
  opacity: 0.65;
}

.experience-screen {
  min-height: 585px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  background: radial-gradient(circle at 90% 0, rgba(42, 157, 157, 0.07), transparent 38%), #191c22;
}

.experience-lab {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(480px, 1.28fr);
  gap: 26px;
  min-height: 585px;
  padding: 36px;
  align-content: center;
}

.lab-copy {
  align-self: start;
}

.lab-copy h3 {
  margin: 10px 0 12px;
  font: 750 clamp(30px, 3.2vw, 46px)/0.98 "Outfit", sans-serif;
  letter-spacing: -0.045em;
}

.lab-copy p {
  color: var(--cream-dim);
  font-size: 14px;
  line-height: 1.6;
}

.garage-lab-stage {
  position: relative;
  grid-column: 2;
  grid-row: 1/span 4;
  min-height: 500px;
  overflow: hidden;
  border-radius: 20px;
  background: radial-gradient(circle at 50% 35%, rgba(42, 157, 157, 0.2), transparent 45%), linear-gradient(#202b35 0 64%, #18231f 64%);
}

.garage-lab-stage::after {
  content: "";
  position: absolute;
  left: -12%;
  right: -12%;
  bottom: 66px;
  height: 180px;
  background: #343944;
  border-block: 1px solid rgba(255, 255, 255, 0.1);
  transform: skewY(-4deg);
}

.garage-lab-car {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 118px;
  width: 78%;
  height: auto;
  color: var(--lab-car);
  transform: translateX(-50%);
  filter: drop-shadow(0 18px 13px rgba(0, 0, 0, 0.5));
}

.garage-lab-crew {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 291px;
  display: flex;
  align-items: end;
  justify-content: center;
  width: 64%;
  transform: translateX(-50%);
}

.garage-lab-crew img {
  width: 60px;
  margin-left: -9px;
  transform: translateY(calc(var(--avatar-index) * 4px));
  filter: drop-shadow(0 6px 5px rgba(0, 0, 0, 0.4));
}

.garage-lab-crew img:first-child {
  margin-left: 0;
}

.garage-lab-road {
  position: absolute;
  z-index: 4;
  left: 15%;
  right: 15%;
  bottom: 30px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--lane), transparent);
}

.lab-control-row {
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: center;
  gap: 10px;
}

.lab-control-row > span, .world-time-control > span {
  font: 600 9px "JetBrains Mono", monospace;
  color: var(--cream-dimmer);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.lab-control-row > div {
  display: flex;
  gap: 6px;
}

.lab-control-row button {
  display: grid;
  place-items: center;
  width: 48px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--cream-dimmer);
  background: var(--asphalt-3);
}

.lab-control-row button.active {
  color: var(--lane);
  border-color: var(--lane);
  box-shadow: 0 0 0 2px rgba(245, 200, 76, 0.1);
}

.lab-control-row button .icon {
  width: 38px;
  height: 24px;
}

.lab-control-row button.lab-color {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.crew-control button {
  width: 38px;
  height: 38px;
  padding: 2px;
  border-radius: 50%;
  overflow: hidden;
}

.crew-control img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.world-lab {
  grid-template-rows: auto auto auto;
}

.world-lab-stage {
  position: relative;
  grid-column: 2;
  grid-row: 1/span 3;
  min-height: 500px;
  overflow: hidden;
  border-radius: 20px;
  transition: background 1s;
  background: linear-gradient(#4d83b4, #efbc7f 67%, #395b49 67%);
}

.world-lab-stage.sunset {
  background: linear-gradient(#4d486e, #e67f68 67%, #324d42 67%);
}

.world-lab-stage.night {
  background: linear-gradient(#111b37, #293357 67%, #203a32 67%);
}

.lab-celestial {
  position: absolute;
  right: 12%;
  top: 10%;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--amber);
  color: #f5f0cf;
  display: grid;
  place-items: center;
  font-size: 55px;
  box-shadow: 0 0 60px rgba(255, 184, 77, 0.35);
}

.night .lab-celestial {
  background: transparent;
  box-shadow: none;
}

.lab-cloud {
  position: absolute;
  z-index: 2;
  left: -90px;
  width: 90px;
  height: 15px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.7);
  animation: world-cloud 12s linear infinite;
}

.lab-cloud::after {
  content: "";
  position: absolute;
  left: 25px;
  bottom: 5px;
  width: 38px;
  height: 25px;
  border-radius: 50%;
  background: inherit;
}

.lab-cloud.cloud-a {
  top: 21%;
}

.lab-cloud.cloud-b {
  top: 34%;
  scale: 0.65;
  animation-duration: 17s;
  animation-delay: -9s;
}

.weather-sun .lab-cloud {
  opacity: 0.25;
}

.weather-cloud .lab-cloud, .weather-rain .lab-cloud {
  opacity: 0.85;
  filter: brightness(0.7);
}

.lab-rain {
  position: absolute;
  z-index: 5;
  inset: 0;
  opacity: 0;
  background: repeating-linear-gradient(105deg, transparent 0 19px, rgba(202, 226, 255, 0.5) 20px 22px, transparent 23px 37px);
  animation: rain-fall 0.5s linear infinite;
}

.weather-rain .lab-rain {
  opacity: 0.8;
}

.lab-mountains {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 74px;
  height: 110px;
  background: linear-gradient(145deg, transparent 10%, #263f37 11% 42%, transparent 43%), linear-gradient(215deg, transparent 17%, #20362f 18% 55%, transparent 56%);
}

.lab-world-road {
  position: absolute;
  left: 25%;
  right: 25%;
  bottom: -35px;
  height: 180px;
  background: #30343e;
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
}

.lab-world-car {
  position: absolute;
  z-index: 4;
  left: 47%;
  bottom: 82px;
  width: 110px;
  color: var(--coral);
  filter: drop-shadow(0 8px 5px rgba(0, 0, 0, 0.5));
  animation: lab-car-drive 2.4s ease-in-out infinite;
}

.lab-world-car .icon {
  width: 100%;
  height: auto;
}

.lab-time, .lab-condition {
  position: absolute;
  z-index: 7;
  bottom: 16px;
  padding: 7px 10px;
  border-radius: 9px;
  background: rgba(11, 13, 17, 0.72);
  color: #fff;
  backdrop-filter: blur(8px);
  font: 600 10px "JetBrains Mono", monospace;
}

.lab-time {
  left: 16px;
}

.lab-condition {
  right: 16px;
}

.world-time-control {
  display: grid;
  gap: 8px;
}

.world-time-control input {
  width: 100%;
  accent-color: var(--lane);
}

.weather-control {
  display: flex;
  gap: 7px;
}

.weather-control button {
  flex: 1;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--cream-dimmer);
  font-size: 10px;
}

.weather-control button.active {
  color: var(--asphalt);
  background: var(--lane);
  border-color: var(--lane);
}

.together-lab {
  grid-template-rows: auto auto;
}

.convoy-lab-stage {
  position: relative;
  grid-column: 2;
  grid-row: 1/span 2;
  min-height: 500px;
  padding: 130px 66px 40px 30px;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(#243443 0 48%, #1e3b31 48% 54%, #30343e 54%);
}

.convoy-lab-stage::after {
  content: "";
  position: absolute;
  inset: 54% 0 0;
  opacity: 0.35;
  background: repeating-linear-gradient(90deg, transparent 0 35px, #fff 36px 60px, transparent 61px 92px);
  background-size: 92px 3px;
  background-repeat: repeat-x;
  background-position: 0 52%;
}

.convoy-lane {
  position: relative;
  z-index: 2;
  height: 6px;
  margin: 0 0 128px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.12);
}

.convoy-lane.friend {
  margin-bottom: 0;
}

.convoy-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: var(--lane);
  transition: width 0.09s linear;
}

.convoy-lane.friend .convoy-fill {
  background: var(--teal);
}

.convoy-car {
  position: absolute;
  bottom: -23px;
  width: 112px;
  color: var(--coral);
  transform: translateX(-100%);
  transition: left 0.09s linear;
}

.convoy-lane.friend .convoy-car {
  color: var(--teal);
}

.convoy-car > span {
  position: absolute;
  z-index: -1;
  left: 26%;
  bottom: 43px;
  display: flex;
}

.convoy-car img {
  width: 28px;
  margin-left: -6px;
}

.convoy-car .icon {
  width: 100%;
  height: auto;
}

.convoy-destination {
  position: absolute;
  z-index: 4;
  right: 14px;
  top: 46%;
  display: grid;
  justify-items: center;
  gap: 5px;
  color: var(--lane);
}

.convoy-destination .icon {
  width: 28px;
  height: 28px;
}

.convoy-destination span {
  writing-mode: vertical-rl;
  font: 700 8px "JetBrains Mono", monospace;
  letter-spacing: 0.1em;
}

.observer-panel {
  align-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
}

.observer-pulse {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--green);
  background: rgba(78, 203, 113, 0.1);
  animation: observer-pulse 2s ease-out infinite;
}

.observer-pulse .icon {
  width: 20px;
  height: 20px;
}

.observer-panel div {
  min-width: 0;
  flex: 1;
}

.observer-panel b, .observer-panel small {
  display: block;
}

.observer-panel b {
  font-size: 11px;
}

.observer-panel small {
  margin-top: 3px;
  color: var(--cream-dimmer);
  font-size: 8px;
}

.observer-panel button {
  flex: none;
  padding: 7px 9px;
  border-radius: 8px;
  color: var(--asphalt);
  background: var(--lane);
  font-size: 9px;
  font-weight: 700;
}

.real-custom-preview {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 22px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: #111318;
}

.custom-flow-copy {
  padding: 34px 24px;
}

.custom-flow-copy h3 {
  margin: 10px 0 12px;
  font: 750 clamp(34px, 4vw, 52px)/0.98 "Outfit", sans-serif;
  letter-spacing: -0.045em;
}

.custom-flow-copy > p {
  color: var(--cream-dim);
  font-size: 14px;
  line-height: 1.6;
}

.custom-flow-copy ol {
  display: grid;
  gap: 8px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.custom-flow-copy li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--cream-dimmer);
}

.custom-flow-copy li.active {
  color: var(--cream);
  border-color: rgba(245, 200, 76, 0.42);
  background: rgba(245, 200, 76, 0.05);
}

.custom-flow-copy li b {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--asphalt-4);
  font-size: 10px;
}

.custom-flow-copy li.done b, .custom-flow-copy li.active b {
  color: var(--asphalt);
  background: var(--lane);
}

.custom-flow-copy li span, .custom-flow-copy li small {
  display: block;
}

.custom-flow-copy li span {
  font-size: 11px;
  font-weight: 700;
}

.custom-flow-copy li small {
  margin-top: 2px;
  color: var(--cream-dimmer);
  font-size: 8px;
  font-weight: 400;
}

.custom-fit-preview {
  position: relative;
  padding: 20px;
  border-radius: 20px;
  background: var(--asphalt-2);
}

.fit-preview-label {
  display: block;
  font: 700 14px "Outfit", sans-serif;
}

.fit-preview-direction {
  position: absolute;
  z-index: 7;
  right: 30px;
  top: 78px;
  padding: 5px 9px;
  border-radius: 99px;
  color: var(--asphalt);
  background: var(--amber);
  font-size: 8px;
  font-weight: 700;
}

.fit-preview-stage {
  position: relative;
  height: 430px;
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: radial-gradient(circle at 50% 32%, rgba(42, 157, 157, 0.12), transparent 42%), #242932;
}

.fit-preview-car {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 48%;
  width: 78%;
  color: var(--coral);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 15px 10px rgba(0, 0, 0, 0.45));
}

.fit-preview-car .icon {
  width: 100%;
  height: auto;
}

.fit-preview-avatar {
  position: absolute;
  width: 48px;
  transform: translate(-50%, -50%);
  cursor: grab;
}

.fit-preview-avatar img {
  display: block;
  width: 100%;
}

.fit-preview-avatar.behind {
  z-index: 2;
}

.fit-preview-avatar.front {
  z-index: 4;
}

.fit-preview-avatar::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 2px solid var(--lane);
  border-radius: 50%;
}

.fit-preview-avatar.avatar-one {
  left: 48%;
  top: 35%;
}

.fit-preview-avatar.avatar-two {
  left: 61%;
  top: 35%;
}

.fit-preview-avatar.avatar-three {
  left: 67%;
  top: 55%;
  width: 42px;
}

.fit-preview-wheel {
  position: absolute;
  z-index: 6;
  top: 61%;
  width: 92px;
  height: 92px;
  border: 3px solid var(--teal);
  border-radius: 50%;
  background: rgba(42, 157, 157, 0.14);
  transform: translate(-50%, -50%);
}

.fit-preview-wheel.wheel-left {
  left: 32%;
}

.fit-preview-wheel.wheel-right {
  left: 70%;
}

.fit-preview-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.fit-preview-actions > span {
  flex: 1;
  color: var(--cream-dimmer);
  font-size: 9px;
}

.fit-preview-actions > span i {
  display: block;
  height: 3px;
  margin-top: 7px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--coral) 55%, var(--line) 55%);
}

.fit-preview-actions button, .fit-preview-actions b {
  padding: 9px 11px;
  border-radius: 9px;
  font-size: 9px;
}

.fit-preview-actions button {
  color: var(--cream-dim);
  border: 1px solid var(--line);
}

.fit-preview-actions b {
  color: var(--asphalt);
  background: var(--lane);
}

.environment-section {
  padding-top: 100px;
}

.environment-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 34px;
  margin-bottom: 24px;
}

.environment-heading .hero-title {
  max-width: 750px;
  font-size: clamp(42px, 6vw, 72px);
}

.environment-heading .h-sub {
  max-width: 390px;
  margin-bottom: 8px;
}

.environment-window {
  position: relative;
  overflow: hidden;
  padding-top: 42px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: #0e1014;
  box-shadow: 0 38px 90px -52px #000;
}

.environment-status {
  position: absolute;
  z-index: 10;
  inset: 0 0 auto;
  height: 42px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  color: var(--cream-dimmer);
  font: 500 8px "JetBrains Mono", monospace;
  letter-spacing: 0.06em;
}

.environment-status span {
  color: var(--green);
}

.environment-status span i {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 5px rgba(78, 203, 113, 0.1);
}

.environment-status b {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
}

.environment-status .icon {
  width: 22px;
  height: 13px;
}

.environment-window .road-stage {
  border: 0;
  border-radius: 0;
}

.environment-window .road-sky {
  height: clamp(340px, 48vw, 560px);
}

.environment-note {
  margin: 12px 0 0;
  color: var(--cream-dimmer);
  text-align: center;
  font-size: 10px;
}

.final-cta {
  position: relative;
  margin-top: 80px;
  padding: 70px 20px;
  border-radius: 28px;
  background: linear-gradient(115deg, var(--lane), var(--amber));
  color: var(--asphalt);
  overflow: hidden;
}

.final-cta::before, .final-cta::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  border: 2px dashed rgba(21, 23, 28, 0.18);
  border-radius: 50%;
}

.final-cta::before {
  left: -70px;
  top: -90px;
}

.final-cta::after {
  right: -55px;
  bottom: -110px;
}

.final-cta .btn-primary {
  background: var(--asphalt);
  color: var(--cream);
  z-index: 1;
}

.landing-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.landing-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@keyframes landing-float {
  50% {
    transform: translate3d(-30px, 35px, 0) scale(1.08);
  }
}
@keyframes landing-pulse {
  70% {
    box-shadow: 0 0 0 10px rgba(78, 203, 113, 0);
  }
}
@keyframes journey-drive {
  50% {
    transform: translateX(1px) rotate(-0.35deg);
  }
}
@keyframes journey-cloud {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(560px);
  }
}
@keyframes landing-beam {
  to {
    transform: translateX(-180px) skewX(-16deg);
    opacity: 0.35;
  }
}
@keyframes ticker-drive {
  to {
    transform: translateX(-50%);
  }
}
@keyframes cursor-mark-fade {
  to {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--mark-angle, 0deg)) scale(0.7);
  }
}
@keyframes cursor-fog-leave {
  to {
    opacity: 0;
    transform: translate(var(--fog-x), var(--fog-y)) scale(2.1);
  }
}
@keyframes cursor-car-bump {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  28% {
    transform: translateY(7px) scale(1.08, 0.84);
  }
  58% {
    transform: translateY(-5px) scale(0.96, 1.08);
  }
}
@keyframes cursor-headlight-blink {
  0%, 48% {
    opacity: 1;
    box-shadow: 0 -5px 10px 3px rgba(255, 241, 132, 0.9);
  }
  49%, 100% {
    opacity: 0.18;
    box-shadow: none;
  }
}
@keyframes cursor-angry-shudder {
  0%, 100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-2px) rotate(-2deg);
  }
  40% {
    transform: translateX(2px) rotate(2deg);
  }
  60% {
    transform: translateX(-1px) rotate(-1deg);
  }
  80% {
    transform: translateX(1px) rotate(1deg);
  }
}
@keyframes cursor-flee-jolt {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-2px);
  }
}
@keyframes cursor-fog-pulse {
  to {
    transform: translateY(13px) scale(1.25);
  }
}
@keyframes custom-car-color {
  0%, 32% {
    color: var(--coral);
  }
  33%, 65% {
    color: var(--teal);
  }
  66%, 100% {
    color: var(--amber);
  }
}
@keyframes world-sky {
  70%, 100% {
    background: linear-gradient(#18233d, #ad5e68 64%, #263d37 64%);
  }
}
@keyframes world-celestial {
  70%, 100% {
    opacity: 0;
    transform: translate(-120px, 45px);
  }
}
@keyframes world-moon {
  0%, 55% {
    opacity: 0;
    transform: translate(40px, 30px);
  }
  75%, 100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes world-cloud {
  to {
    transform: translateX(560px);
  }
}
@keyframes world-rain {
  0%, 55% {
    opacity: 0;
  }
  75%, 100% {
    opacity: 1;
  }
}
@keyframes rain-fall {
  to {
    background-position: 0 35px;
  }
}
@keyframes lab-car-drive {
  50% {
    transform: translateY(-2px) rotate(-0.5deg);
  }
}
@keyframes observer-pulse {
  65% {
    box-shadow: 0 0 0 12px rgba(78, 203, 113, 0);
  }
}
@media (max-width: 760px) {
  .landing {
    overflow: hidden;
  }
  .hero {
    min-height: 610px;
    padding-top: 55px;
  }
  .hero-copy {
    width: 100%;
  }
  .hero-title {
    font-size: 52px;
  }
  .hero-tag {
    font-size: 16px;
    max-width: 90%;
  }
  .hero-journey {
    right: -135px;
    top: 305px;
    opacity: 0.42;
    transform: scale(0.78);
  }
  .hero-demo {
    width: calc(100% + 24px);
    margin-inline: -12px;
  }
  .hero-demo .road-stage {
    --road-edge:105px;
  }
  .hero-demo .road-sky {
    height: 270px;
  }
  .hero-demo .road-base {
    height: 105px;
  }
  .demo-switcher {
    gap: 5px;
    padding-inline: 2px;
  }
  .demo-switcher button {
    padding: 9px 7px;
    text-align: center;
  }
  .demo-switcher span {
    font-size: 11px;
  }
  .demo-switcher small {
    display: none;
  }
  .hero-demo .grass {
    bottom: 105px;
  }
  .hero-demo .parallax-hills {
    bottom: 105px;
  }
  .hero-demo .roadside-landmarks {
    bottom: 105px;
  }
  .hero-demo .roadside-trees {
    bottom: 105px;
    height: 150px;
  }
  .hero-demo .road-foreground {
    bottom: 105px;
    height: 66px;
  }
  .hero-demo .fog-bands {
    bottom: 80px;
  }
  .hero-demo .fireflies {
    bottom: 105px;
  }
  .hero-demo .rainbow-arc {
    bottom: 105px;
  }
  .hero-demo .road-posts {
    bottom: 98px;
  }
  .hero-demo .city-sign {
    bottom: 105px;
  }
  .hero-demo .car-unit {
    width: 180px;
    bottom: 20px;
  }
  .hero-demo .convoy-unit {
    width: 180px;
    bottom: 94px;
  }
  .hero-proof {
    gap: 10px;
  }
  .stat-strip {
    gap: 24px;
  }
  .stat-strip b {
    font-size: 24px;
  }
  .showcase-intro {
    display: block;
  }
  .showcase-intro .h-sub {
    margin-top: 14px;
  }
  .experience-grid {
    grid-template-columns: 1fr;
  }
  .experience-card:first-child {
    grid-row: auto;
    min-height: 600px;
  }
  .experience-card {
    min-height: 390px;
  }
  .custom-vehicle-demo {
    top: 185px;
  }
  .experience-tabs {
    grid-template-columns: 1fr;
  }
  .experience-tabs button {
    padding: 10px 12px;
  }
  .experience-tabs small {
    display: none;
  }
  .experience-screen {
    min-height: 720px;
  }
  .experience-lab {
    display: flex;
    flex-direction: column;
    min-height: 720px;
    padding: 22px;
    gap: 14px;
  }
  .lab-copy h3 {
    font-size: 32px;
  }
  .garage-lab-stage, .world-lab-stage, .convoy-lab-stage {
    order: 2;
    width: 100%;
    min-height: 350px;
  }
  .garage-lab-stage {
    min-height: 370px;
  }
  .garage-lab-crew {
    bottom: 218px;
  }
  .garage-lab-car {
    bottom: 85px;
  }
  .garage-lab-stage::after {
    bottom: 50px;
    height: 130px;
  }
  .garage-lab-road {
    bottom: 18px;
  }
  .lab-control-row, .world-time-control, .weather-control, .observer-panel {
    order: 3;
  }
  .convoy-lab-stage {
    min-height: 390px;
    padding: 95px 48px 30px 20px;
  }
  .convoy-lane {
    margin-bottom: 105px;
  }
  .real-custom-preview {
    grid-template-columns: 1fr;
  }
  .custom-flow-copy {
    padding: 24px 16px 8px;
  }
  .custom-fit-preview {
    padding: 14px;
  }
  .fit-preview-stage {
    height: 330px;
  }
  .fit-preview-wheel {
    width: 68px;
    height: 68px;
  }
  .fit-preview-actions {
    flex-wrap: wrap;
  }
  .fit-preview-actions > span {
    flex-basis: 100%;
  }
  .collection-story-heading {
    display: block;
  }
  .collection-story-heading > .h-sub {
    margin-top: 15px;
  }
  .landing-find-grid {
    grid-template-columns: 1fr;
  }
  .landing-find-card {
    min-height: 112px;
  }
  .landing-badge-journey {
    grid-template-columns: 1fr;
    padding: 22px 16px 24px;
  }
  .landing-tier-road {
    gap: 5px;
  }
  .landing-tier-stop .wildlife-badge-emblem {
    width: 62px;
    height: 62px;
    flex-basis: 62px;
  }
  .landing-tier-road::before {
    top: 38px;
  }
  .landing-tier-stop > small {
    font-size: 7px;
  }
  .environment-heading {
    display: block;
  }
  .environment-heading .h-sub {
    margin-top: 14px;
  }
  .environment-status {
    gap: 8px;
    padding-inline: 10px;
  }
  .environment-status b {
    font-size: 6.5px;
  }
  .environment-window .road-sky {
    height: 330px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .landing * {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .landing-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
@media (pointer: coarse) {
  .landing-cursor-car {
    display: none;
  }
}
/* historia tras: badge statusu (PL) */
.trip-status {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  white-space: nowrap;
  background: var(--asphalt-3);
  color: var(--cream-dim);
}

.trip-status-active {
  background: rgba(42, 157, 157, 0.18);
  color: var(--teal);
}

.trip-status-completed {
  background: rgba(78, 203, 113, 0.15);
  color: #4ECB71;
}

.trip-status-cancelled {
  background: rgba(255, 107, 92, 0.14);
  color: var(--coral);
}

.trip-collectibles {
  width: 100%;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.trip-collectibles-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  color: var(--cream);
  font-size: 12px;
  font-weight: 600;
}

.trip-collectibles-summary::-webkit-details-marker {
  display: none;
}

.trip-collectibles-summary::after {
  content: "+";
  flex-shrink: 0;
  color: var(--lane);
  font-size: 18px;
  line-height: 1;
  transition: transform 0.15s ease;
}

.trip-collectibles[open] .trip-collectibles-summary::after {
  transform: rotate(45deg);
}

.trip-collectibles-counts {
  margin-left: auto;
  color: var(--cream-dim);
  font-size: 10px;
  font-weight: 500;
}

.trip-collectibles-list {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.trip-collectible-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--asphalt-3);
}

.trip-collectible-identity {
  min-width: 0;
}

.trip-collectible-identity strong {
  display: block;
  overflow: hidden;
  color: var(--cream);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trip-collectible-identity span {
  display: block;
  margin-top: 2px;
  color: var(--cream-dim);
  font-size: 10px;
}

.trip-collectible-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--cream-dim);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  white-space: nowrap;
}

.trip-collectible-meta span {
  min-width: 62px;
  color: var(--lane);
  text-align: right;
}

@media (max-width: 520px) {
  .trip-collectibles-summary {
    align-items: flex-start;
  }
  .trip-collectibles-counts {
    text-align: right;
  }
  .trip-collectible-item {
    align-items: start;
  }
  .trip-collectible-meta {
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
  }
}
/* --- dokumenty (regulamin / prywatność) --- */
.doc {
  max-width: 760px;
}

.doc h2 {
  font-family: "Outfit", sans-serif;
  font-size: 18px;
  font-weight: 700;
  margin: 20px 0 6px;
}

.doc p {
  font-size: 14px;
  color: var(--cream-dim);
  line-height: 1.6;
}

/* Strona Pomocy (/help): krok = tytuł, tekst i ZRZUT Z APLIKACJI. Obrazek dostaje ramkę i tło
   sceny, żeby ciemny zrzut nie zlewał się ze stroną, a `max-width` trzyma go w kolumnie tekstu -
   kadry są w 2x, więc bez tego rozpychałyby układ (i min-content strony, patrz .admin-row). */
.help-page {
  max-width: 820px;
  margin: 0 auto;
}

.help-intro {
  margin: 8px 0 20px;
}

.help-toc {
  display: grid;
  gap: 6px;
  margin-bottom: 26px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--asphalt-2);
}

.help-toc a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--cream-dim);
  text-decoration: none;
}

.help-toc a:hover {
  color: var(--cream);
}

.help-toc a span {
  display: grid;
  place-items: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--asphalt-3);
  border: 1px solid var(--line);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--lane);
}

.help-step {
  scroll-margin-top: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line-soft);
}

.help-step:last-of-type {
  border-bottom: none;
}

.help-step-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.help-step-no {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--lane);
  color: var(--asphalt);
  font-weight: 700;
  font-size: 13px;
  font-family: "JetBrains Mono", monospace;
}

.help-step h2 {
  font-family: "Outfit", sans-serif;
  font-size: 19px;
  font-weight: 700;
  margin: 0;
}

.help-step p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--cream-dim);
  margin: 0 0 10px;
}

.help-shot {
  margin: 14px 0 0;
}

.help-shot img {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--asphalt-2);
}

/* Kadry sceny są panoramiczne - im pełna szerokość kolumny, inaczej auto robi się mikroskopijne. */
.help-step#scena .help-shot img, .help-step#minigry .help-shot img {
  max-width: 100%;
}

.help-shot figcaption {
  margin-top: 6px;
  font-size: 12px;
  color: var(--cream-dimmer);
}

.help-foot {
  margin-top: 26px;
}

.divider-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--cream-dimmer);
  font-size: 12px;
}

.divider-or::before, .divider-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* --- vehicle / garage --- */
.garage-grid {
  display: grid;
  grid-template-columns: 1fr;
}

.vehicle-card {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px;
  border-radius: 14px;
  background: var(--asphalt-2);
  border: 1px solid var(--line);
  margin-bottom: 11px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.vehicle-card:hover {
  transform: translateY(-2px);
  border-color: rgba(245, 200, 76, 0.35);
}

.vehicle-card.active {
  border-color: var(--lane);
  box-shadow: 0 0 0 1px var(--lane), 0 10px 24px -14px rgba(245, 200, 76, 0.4);
}

.vehicle-thumb {
  width: 52px;
  height: 40px;
  border-radius: 9px;
  background: var(--asphalt-3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--cream);
}

.vehicle-thumb .icon {
  width: 32px;
  height: 22px;
}

.vehicle-thumb {
  overflow: hidden;
}

.vehicle-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --- graficzny garaż: miejsca parkingowe z zaparkowanymi autami / wolne miejsca --- */
.garage {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--asphalt-2);
  box-shadow: 0 24px 46px -34px rgba(0, 0, 0, 0.75);
}

.garage-roof {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--cream-dim);
  background: repeating-linear-gradient(90deg, var(--asphalt-3) 0 16px, var(--asphalt-4) 16px 32px);
  border-bottom: 3px solid var(--lane);
  position: relative;
}

.garage-roof::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 3px;
  background: linear-gradient(90deg, var(--coral), var(--amber), var(--lane), var(--teal));
  opacity: 0.7;
}

.garage-count {
  color: var(--lane);
  font-weight: 700;
}

.garage-floor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--asphalt-3);
}

@media (min-width: 900px) {
  .garage-floor {
    grid-template-columns: repeat(3, 1fr);
  }
}
.garage-bay {
  position: relative;
  min-height: 156px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 18px 12px 46px;
  text-align: center;
  border-right: 2px dashed rgba(245, 200, 76, 0.22);
  border-bottom: 2px dashed rgba(245, 200, 76, 0.1);
}

.garage-bay.filled {
  cursor: pointer;
  transition: background 0.15s;
}

.garage-bay.filled:hover {
  background: var(--asphalt-2);
}

.garage-bay.filled:hover .bay-car-img,
.garage-bay.filled:hover .bay-car-icon {
  transform: translateY(-3px) scale(1.03);
}

.bay-car-img, .bay-car-icon {
  transition: transform 0.2s ease;
}

.garage-bay.active {
  background: rgba(245, 200, 76, 0.08);
  box-shadow: inset 0 0 0 2px var(--lane), 0 0 22px -4px rgba(245, 200, 76, 0.35);
  animation: bay-glow 2.6s ease-in-out infinite;
}

@keyframes bay-glow {
  0%, 100% {
    box-shadow: inset 0 0 0 2px var(--lane), 0 0 22px -4px rgba(245, 200, 76, 0.35);
  }
  50% {
    box-shadow: inset 0 0 0 2px var(--lane), 0 0 30px -2px rgba(245, 200, 76, 0.55);
  }
}
.bay-car {
  width: 100%;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bay-car-img {
  max-width: 96%;
  max-height: 66px;
  object-fit: contain;
  filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.5));
}

.bay-car-icon {
  width: 78px;
  height: 48px;
  color: var(--cream);
}

.bay-name {
  font-weight: 600;
  font-size: 14px;
}

.bay-sub {
  font-size: 11px;
  color: var(--cream-dim);
}

.garage-bay .v-active-chip {
  position: absolute;
  top: 8px;
  left: 8px;
  margin: 0;
}

.bay-actions {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  display: flex;
  gap: 6px;
  justify-content: center;
}

.garage-bay.empty {
  cursor: pointer;
  color: var(--cream-dimmer);
  background: transparent;
}

.garage-bay.empty:hover {
  color: var(--lane);
  background: rgba(245, 200, 76, 0.04);
}

.garage-bay.empty:hover .bay-plus {
  transform: rotate(90deg);
  border-color: var(--lane);
}

.bay-plus {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px dashed currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  transition: transform 0.25s ease, border-color 0.2s;
}

.bay-plus .icon {
  width: 18px;
  height: 18px;
}

.bay-empty-label {
  font-size: 12px;
}

.vehicle-card.archived {
  opacity: 0.72;
}

.v-name {
  font-size: 14px;
  font-weight: 600;
}

.v-sub {
  font-size: 11px;
  color: var(--cream-dim);
  margin-top: 2px;
}

.v-active-chip {
  font-size: 9px;
  padding: 4px 9px;
  border-radius: 99px;
  background: var(--lane);
  color: var(--asphalt);
  font-weight: 700;
}

.vehicle-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.vehicle-actions .icon-btn .icon {
  width: 16px;
  height: 16px;
}

/* --- znajomi --- */
.friend-search {
  display: flex;
  gap: 10px;
  align-items: center;
}

.friend-search .input {
  flex: 1;
}

/* --- awatary pasażerów (zdjęcie lub inicjał) --- */
.avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: inline-flex;
}

.avatar-initial {
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
}

.avatar-sm {
  width: 30px;
  height: 30px;
}

.avatar-sm.avatar-initial {
  font-size: 12px;
}

/* --- dobór pasażerów na plannerze --- */
.passenger-pick {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}

.pick-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 11px;
  background: var(--asphalt-2);
  border: 1px solid var(--line);
  cursor: pointer;
}

.pick-row input[type=checkbox] {
  width: 18px;
  height: 18px;
  accent-color: var(--lane);
  flex-shrink: 0;
}

/* --- kreator podróży (TripWizard) --- */
.wizard {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-bottom: 16px;
  background: linear-gradient(160deg, var(--asphalt-2), var(--asphalt-3));
}

.wizard::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--coral), var(--amber), var(--lane), var(--teal));
}

.wizard::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -70px;
  right: -70px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.16;
  pointer-events: none;
  background: var(--lane);
}

.wizard-steps {
  position: relative;
  display: flex;
  gap: 4px;
  padding-top: 2px;
}

.wizard-steps-line {
  position: absolute;
  top: 15px;
  left: 24px;
  right: 24px;
  height: 2px;
  background: var(--line);
  z-index: 0;
  overflow: hidden;
  border-radius: 2px;
}

.wizard-steps-line-fill {
  height: 100%;
  width: var(--wstep-progress, 0%);
  background: linear-gradient(90deg, var(--coral), var(--amber), var(--lane));
  transition: width 0.35s ease;
}

.wstep {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  color: var(--cream-dimmer);
}

.wstep .wstep-lbl {
  line-height: 1.2;
}

.wstep .wstep-no {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--asphalt-3);
  border: 2px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}

.wstep.active {
  color: var(--cream);
}

.wstep.active .wstep-no {
  background: var(--lane);
  color: var(--asphalt);
  border-color: var(--lane);
  box-shadow: 0 0 0 5px rgba(245, 200, 76, 0.16);
  transform: scale(1.08);
}

.wstep.done {
  color: var(--cream-dim);
}

.wstep.done .wstep-no {
  background: var(--green);
  color: var(--asphalt);
  border-color: var(--green);
}

/* --- mini "trasa" łącząca punkt startowy i cel (kropki + przerywana linia) --- */
.route-field {
  position: relative;
  padding-left: 20px;
}

.route-field::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 3px;
  top: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--asphalt-2);
}

.route-field-start::before {
  background: var(--coral);
}

.route-field-end::before {
  background: var(--lane);
}

.route-field-start::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 14px;
  bottom: -14px;
  width: 2px;
  background: repeating-linear-gradient(180deg, var(--line) 0 4px, transparent 4px 8px);
}

.seat-stage {
  position: relative;
  padding: 32px 14px 14px;
  border-radius: 24px;
  margin-bottom: 2px;
  background: linear-gradient(180deg, rgba(245, 200, 76, 0.07), transparent 45%), var(--asphalt-3);
  border: 1px solid var(--line);
  overflow: hidden;
}

.seat-stage::before {
  content: "PRZÓD";
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  font: 700 10px "JetBrains Mono", monospace;
  letter-spacing: 0.12em;
  color: var(--cream-dimmer);
}

.seat-stage::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 64%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--lane), transparent);
  opacity: 0.55;
}

.seat-stage .wheel-mark {
  position: absolute;
  width: 10px;
  height: 24px;
  border-radius: 5px;
  background: #0a0b0d;
  box-shadow: 0 0 0 2px var(--asphalt-4), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.seat-stage .wm-fl {
  top: 26px;
  left: -3px;
}

.seat-stage .wm-fr {
  top: 26px;
  right: -3px;
}

.seat-stage .wm-rl {
  bottom: 12px;
  left: -3px;
}

.seat-stage .wm-rr {
  bottom: 12px;
  right: -3px;
}

.seat-stage-moto {
  border-radius: 30px;
}

.seat-stage-moto .seat-grid {
  grid-template-columns: 1fr 1fr;
  max-width: 220px;
  margin: 0 auto;
}

.seat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

.seat-grid .seat:nth-child(1),
.seat-grid .seat:nth-child(2) {
  grid-column: span 3;
}

.seat-grid .seat:nth-child(3),
.seat-grid .seat:nth-child(4),
.seat-grid .seat:nth-child(5) {
  grid-column: span 2;
}

.seat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 84px;
  border-radius: 12px;
  background: var(--asphalt-3);
  border: 1px dashed var(--line);
  color: var(--cream-dim);
  font-size: 11px;
  text-align: center;
  padding: 8px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s, background 0.15s;
}

.seat:hover:not(.driver-seat) {
  transform: translateY(-2px);
  border-color: rgba(245, 200, 76, 0.4);
}

.seat.filled {
  border-style: solid;
  background: var(--asphalt-4);
}

.seat.driver-seat {
  border-color: var(--lane);
  cursor: default;
  background: linear-gradient(160deg, rgba(245, 200, 76, 0.16), var(--asphalt-3));
}

.seat.picking {
  border-color: var(--lane);
  box-shadow: 0 0 0 2px rgba(245, 200, 76, 0.3);
}

.seat .s-av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.seat .s-empty {
  background: var(--asphalt-4);
  color: var(--cream-dim);
}

.seat .s-empty .icon {
  width: 16px;
  height: 16px;
}

.model-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.model-opt {
  height: 48px;
  border-radius: 11px;
  background: var(--asphalt-3);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream-dim);
  transition: border-color 0.15s, color 0.15s;
}

.model-opt .icon {
  width: 34px;
  height: 22px;
}

.model-opt img {
  width: 72px;
  height: 42px;
  object-fit: contain;
  transition: filter 0.2s, transform 0.2s;
}

.model-opt.selected img {
  transform: scale(1.06);
}

.model-opt.selected {
  border-color: var(--lane);
  color: var(--lane);
}

.vehicle-color-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 2px 0 16px;
}

.vehicle-color {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--vehicle-color);
  border: 3px solid var(--asphalt-2);
  box-shadow: 0 0 0 1px var(--line);
  transition: transform 0.15s, box-shadow 0.15s;
}

.vehicle-color.selected {
  transform: scale(1.12);
  box-shadow: 0 0 0 2px var(--lane);
}

.vehicle-source-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.vehicle-source {
  min-height: 134px;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-align: center;
  color: var(--cream);
  background: var(--asphalt-3);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.vehicle-source.selected {
  border-color: var(--lane);
  box-shadow: 0 0 0 2px rgba(245, 200, 76, 0.15);
}

.vehicle-source .icon {
  width: 34px;
  height: 34px;
  color: var(--lane);
}

.vehicle-source span {
  color: var(--cream-dim);
  font-size: 11px;
  line-height: 1.35;
}

/* Zdjęcie jest rekomendacją, nie równorzędną opcją - stąd wstążka i mocniejsza ramka. */
.vehicle-source {
  position: relative;
}

.vehicle-source.is-recommended {
  border-color: rgba(42, 157, 157, 0.55);
  background: linear-gradient(180deg, rgba(42, 157, 157, 0.16), var(--asphalt-3));
}

.vehicle-source .src-badge {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 9px;
  border-radius: 99px;
  background: var(--teal);
  color: #08201f;
  white-space: nowrap;
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* „Jakie zdjęcie?" pokazane, nie opisane - trzy kadry: dobry, pod kątem, ucięty. */
.photo-guide {
  margin: 0 0 12px;
}

.photo-guide-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.photo-guide-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 6px 9px;
  border-radius: 12px;
  background: var(--asphalt-3);
  border: 1px solid var(--line);
  text-align: center;
}

.photo-guide-card.is-ok {
  border-color: rgba(42, 157, 157, 0.5);
}

.photo-guide-card.is-bad {
  opacity: 0.72;
}

.photo-guide-art {
  display: block;
  width: 100%;
}

.photo-guide-art svg {
  width: 100%;
  height: auto;
  display: block;
}

.photo-guide-card.is-bad .photo-guide-art svg {
  filter: grayscale(0.55);
}

.photo-guide-mark {
  position: absolute;
  top: 5px;
  right: 6px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.photo-guide-card.is-ok .photo-guide-mark {
  color: var(--teal);
}

.photo-guide-card.is-bad .photo-guide-mark {
  color: var(--coral);
}

.photo-guide-card b {
  font-family: "Outfit", sans-serif;
  font-size: 11.5px;
  color: var(--cream);
}

.photo-guide-card span {
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--cream-dimmer);
}

.photo-guide-tips {
  margin: 10px 0 0;
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--cream-dim);
}

.photo-hint {
  margin: 6px 0 0;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--cream);
  background: rgba(255, 184, 77, 0.12);
  border: 1px solid rgba(255, 184, 77, 0.4);
}

/* Podgląd „tak pojedzie w trasie" - miniaturowa scena zamiast gołego <img>. */
.wiz-road-preview {
  position: relative;
  margin: 10px 0 4px;
  height: 132px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.wiz-road-sky {
  position: absolute;
  inset: 0 0 42px 0;
  background: linear-gradient(180deg, #6fb7de, #bfe0ef);
}

.wiz-road-sun {
  position: absolute;
  right: 16px;
  top: 12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #FFB84D;
  box-shadow: 0 0 16px rgba(255, 184, 77, 0.65);
}

.wiz-road-grass {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 40px;
  height: 12px;
  background: #3f7a46;
}

.wiz-road-asphalt {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42px;
  background: #33373f;
  border-top: 3px solid #4d525c;
}

.wiz-road-dashes {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  height: 4px;
  background: repeating-linear-gradient(90deg, #F7F4EE 0 22px, transparent 22px 44px);
  opacity: 0.85;
}

.wiz-road-car {
  position: relative;
  z-index: 2;
  max-width: 74%;
  max-height: 96px;
  margin-bottom: 12px;
  object-fit: contain;
  filter: drop-shadow(0 7px 8px rgba(0, 0, 0, 0.45));
}

.wiz-road-car.is-tall {
  max-height: 80px;
}

/* Zaproszenie do zdjęcia na karcie auta w garażu. */
.bay-photo-nudge {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 99px;
  border: 1px dashed rgba(42, 157, 157, 0.6);
  background: rgba(42, 157, 157, 0.12);
  color: var(--cream);
  font-size: 10.5px;
  line-height: 1.2;
  cursor: pointer;
}

.bay-photo-nudge .icon {
  width: 13px;
  height: 13px;
  color: var(--teal);
}

/* Pierwsza trasa: sylwetki pod nagłówkiem, żeby od razu było widać, o czym mowa. */
.first-trip-models {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}

.first-trip-models img {
  width: 74px;
  height: auto;
  border-radius: 10px;
}

.vehicle-card-add {
  text-decoration: none;
  border-style: dashed;
}

/* --- zdjęcie auta + edytor dopasowania (VehicleFit) --- */
.vehicle-photo-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 8px;
}

.vehicle-photo-thumb {
  width: 96px;
  height: 60px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--asphalt-3);
  border: 1px solid var(--line);
  flex-shrink: 0;
}

.vehicle-photo-thumb.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream-dim);
}

.vehicle-photo-thumb.empty .icon {
  width: 46px;
  height: 30px;
}

.btn label, label.btn {
  cursor: pointer;
}

/* kreator dodawania pojazdu (wizard) */
.wiz-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.wiz-step-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--asphalt);
  background: var(--lane);
  border-radius: 99px;
  padding: 3px 10px;
  white-space: nowrap;
}

.wiz-preview {
  position: relative;
  margin: 4px 0 4px;
  border-radius: 12px;
  background: var(--asphalt-3);
  border: 1px solid var(--line);
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wiz-preview-img {
  max-width: 70%;
  max-height: 96px;
}

.wiz-nav {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-top: 16px;
}

/* wskaźnik kierunku jazdy (na scenie dopasowania i w podglądzie kreatora) - auto jedzie w prawo */
.fit-dir-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  font-size: 11px;
  font-weight: 700;
  color: var(--asphalt);
  background: var(--amber);
  border-radius: 99px;
  padding: 4px 10px;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.vehicle-fit {
  margin-top: 12px;
}

.fit-stage {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  border: 1px solid var(--line);
  background: var(--asphalt-3);
}

/* min-height: scena edytora dziedziczy wysokość po zdjęciu - zdegenerowany plik (uszkodzony
   albo ekstremalnie szeroki wycinek po ML na białym aucie) zapadał ją do paska ~25px i uchwyty
   były nieosiągalne. Rozciągnięcie (fill) do min. 180px zachowuje mapowanie uchwytów 1:1
   (współrzędne to ułamki RAMKI zdjęcia), a edytor zostaje używalny. */
.fit-photo {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  min-height: 140px;
  object-fit: fill;
  pointer-events: none;
}

/* zdegenerowane zdjęcie (JS wykrywa błąd ładowania / ekstremalne proporcje): scena dostaje
   stałą wysokość, a obrazek mieści się w niej bez dyktowania jej rozmiaru */
.fit-stage-degraded {
  height: 260px;
}

.fit-stage-degraded .fit-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}

/* liczba miejsc w aucie (kierowca + do 4 pasażerów) - sterowana przez użytkownika */
.fit-seat-count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--asphalt-3);
  border: 1px solid var(--line);
}

.fit-seat-count > span {
  font-size: 13px;
  font-weight: 600;
}

.fit-seat-count > span small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--cream-dim);
  margin-top: 2px;
}

.fit-count-ctrl {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.fit-count-ctrl button {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--asphalt-2);
  color: var(--cream);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, transform 0.1s;
}

.fit-count-ctrl button:hover:not(:disabled) {
  border-color: var(--lane);
}

.fit-count-ctrl button:active:not(:disabled) {
  transform: scale(0.94);
}

.fit-count-ctrl button:disabled {
  opacity: 0.4;
  cursor: default;
}

.fit-count-ctrl b {
  min-width: 22px;
  text-align: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 16px;
}

/* podgląd wyciętego tła: szachownica, by widać było przezroczystość */
.fit-stage.fit-preview {
  background-color: #2b2f36;
  background-image: linear-gradient(45deg, #3a3f4a 25%, transparent 25%, transparent 75%, #3a3f4a 75%), linear-gradient(45deg, #3a3f4a 25%, transparent 25%, transparent 75%, #3a3f4a 75%);
  background-size: 18px 18px;
  background-position: 0 0, 9px 9px;
}

.fit-wheel {
  position: absolute;
  transform: translate(-50%, -50%);
  height: 0;
  border-radius: 50%;
  z-index: 9;
  border: 3px solid var(--teal);
  background: rgba(42, 157, 157, 0.18);
  cursor: grab;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(255, 255, 255, 0.32);
}

.fit-wheel:active {
  cursor: grabbing;
}

/* Kropka-głowa (kierowca/pasażer) w edytorze dopasowania - jedna na miejsce, przeciągana
   niezależnie (zastąpiło pojedynczą ramkę "okna" - patrz VehicleFit.jsx). */
.fit-seat {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  z-index: 8;
  border: 2px solid var(--lane);
  background: rgba(245, 200, 76, 0.28);
  cursor: grab;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fit-stage-dummies .fit-photo {
  z-index: 3;
}

.fit-seat-preview {
  position: absolute;
  width: 16%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}

.fit-seat-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fit-seat-preview.fit-seat-behind {
  z-index: 1;
}

.fit-seat-preview.fit-seat-front {
  z-index: 5;
}

.fit-stage-dummies .fit-seat-handle {
  z-index: 8;
  width: 24px;
  height: 24px;
  border-color: #fff;
  background: rgba(20, 24, 30, 0.76);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
}

.fit-stage-dummies .fit-wheel {
  z-index: 9;
}

.fit-dummy-face {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 37%, #382820 0 7%, transparent 8%), radial-gradient(circle at 50% 55%, #f2c7a5 0 48%, transparent 49%), linear-gradient(135deg, #5f3b2c 0 48%, #2d211d 49%);
}

.fit-dummy-face.dummy-1 {
  filter: hue-rotate(25deg);
}

.fit-dummy-face.dummy-2 {
  filter: hue-rotate(175deg);
}

.fit-dummy-face.dummy-3 {
  filter: hue-rotate(300deg);
}

.fit-seat-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 6px;
  margin-top: 10px;
}

.fit-seat-legend > div {
  display: grid;
  grid-template-columns: 20px 28px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--asphalt-3);
}

.fit-seat-legend b {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: var(--asphalt);
  background: var(--lane);
  font-size: 10px;
}

.fit-seat-legend img, .fit-seat-legend .fit-dummy-face {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 50%;
}

.fit-seat-legend span {
  min-width: 0;
  color: var(--cream);
  font-size: 10px;
  line-height: 1.15;
}

.fit-seat-legend small {
  display: block;
  margin-top: 2px;
  color: var(--cream-dimmer);
  font-size: 8px;
}

.fit-seat:active {
  cursor: grabbing;
}

.fit-seat-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--asphalt);
  pointer-events: none;
}

.fit-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.fit-range {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--cream-dim);
}

.fit-range input[type=range] {
  flex: 1;
  max-width: 60%;
  accent-color: var(--coral);
}

/* Wycinanie tła (serwis ML): baner "w toku"/błąd nad edytorem + delikatne przyciemnienie
   zdjęcia, żeby było jasne, że wynik jeszcze się liczy (użytkownik i tak może dopasowywać
   koła/okno w tle - to NIE blokuje edycji, tylko "Zapisz dopasowanie" czeka na wynik). */
.fit-cutout-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--cream-dim);
  background: var(--asphalt-3);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
}

.fit-cutout-banner-error {
  color: var(--coral);
  border-color: rgba(255, 107, 92, 0.4);
}

.fit-cutout-spinner {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(245, 200, 76, 0.25);
  border-top-color: var(--lane);
  animation: fitSpin 0.8s linear infinite;
}

.fit-photo-processing {
  opacity: 0.55;
  filter: saturate(0.7);
  transition: opacity 0.3s, filter 0.3s;
}

@keyframes fitSpin {
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 520px) {
  .vehicle-source-picker {
    grid-template-columns: 1fr;
  }
}
/* --- planner: wizard wyśrodkowany, pod nim pełnoszerokościowa historia tras --- */
/* `.screen-pad` is a column flex container - auto side-margins on a flex item disable stretch
   (the item shrinks to content width instead of filling the cross axis), so without explicit
   `width:100%` this collapsed to the width of its narrowest child regardless of `max-width`. */
.planner-center {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto 8px;
}

@media (min-width: 900px) {
  .garage-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .garage-grid .vehicle-card {
    margin-bottom: 0;
  }
}
/* --- nagłówek strony z poświatą (planner + garaż/statystyki/ranking/znajomi/profil) ---
   Poświata = radial-gradienty gasnące DO PRZEZROCZYSTOŚCI wewnątrz boksu - bez blur-blobów,
   bo przycięte overflow:hidden zostawiały twarde krawędzie (a bez clippingu desynchronizowały
   fixed bottom-nav na mobile-chromium). FULL-BLEED: ujemne marginesy kompensują padding
   .screen-pad (wzór jak .road-stage-full), więc tło sięga krawędzi strony, nie boksu treści. */
.planner-hero, .page-hero {
  position: relative;
  isolation: isolate;
  margin: -18px -22px 16px;
  padding: 18px 22px 14px;
  background: radial-gradient(75% 150% at 8% 0%, rgba(255, 107, 92, 0.13), transparent 68%), radial-gradient(65% 130% at 92% 0%, rgba(42, 157, 157, 0.12), transparent 66%);
}

@media (min-width: 900px) {
  .planner-hero, .page-hero {
    margin: -34px -48px 20px;
    padding: 34px 48px 18px;
  }
}
.planner-road-rule {
  width: 64px;
  height: 3px;
  margin-top: 10px;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, var(--lane) 0 10px, transparent 10px 18px);
  opacity: 0.5;
}

.banner-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  flex-shrink: 0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.5);
}

.banner-ico-sm {
  width: 26px;
  height: 26px;
  border-radius: 8px;
}

.banner-ico-sm .icon {
  width: 15px;
  height: 15px;
}

.grad-coral {
  background: linear-gradient(135deg, var(--coral), var(--amber));
}

.grad-teal {
  background: linear-gradient(135deg, var(--teal), var(--lane));
}

.grad-lane {
  background: linear-gradient(135deg, var(--lane), var(--green));
}

.card.accent-coral, .vehicle-card.accent-coral {
  border-left: 3px solid var(--coral);
  background: linear-gradient(90deg, rgba(255, 107, 92, 0.08), var(--asphalt-2) 34%);
}

.card.accent-teal, .vehicle-card.accent-teal {
  border-left: 3px solid var(--teal);
  background: linear-gradient(90deg, rgba(42, 157, 157, 0.08), var(--asphalt-2) 34%);
}

.card.accent-lane, .vehicle-card.accent-lane {
  border-left: 3px solid var(--lane);
  background: linear-gradient(90deg, rgba(245, 200, 76, 0.08), var(--asphalt-2) 34%);
}

.card.accent-red, .vehicle-card.accent-red {
  border-left: 3px solid var(--red);
  background: linear-gradient(90deg, rgba(255, 92, 92, 0.07), var(--asphalt-2) 34%);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

/* --- odznaka/awatar okrągły z gradientem (znajomi/ranking) --- */
.icon-badge-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.55);
}

.icon-badge-circle .icon {
  width: 22px;
  height: 22px;
}

/* --- stats --- */
.stat-big-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  margin-bottom: 16px;
}

.stat-box {
  background: var(--asphalt-2);
  border: 1px solid var(--line);
  border-top: 3px solid var(--line);
  border-radius: 14px;
  padding: 15px;
  transition: transform 0.15s, border-color 0.15s;
}

.stat-box:hover {
  transform: translateY(-2px);
}

.stat-box .sb-ico {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-box .sb-ico .icon {
  width: 15px;
  height: 15px;
}

.stat-box .sb-val {
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: 24px;
}

.stat-box .sb-lbl {
  font-size: 11px;
  color: var(--cream-dim);
  margin-top: 3px;
}

.stat-box-coral {
  border-top-color: var(--coral);
}

.stat-box-coral .sb-ico {
  background: rgba(255, 107, 92, 0.14);
  color: var(--coral);
}

.stat-box-teal {
  border-top-color: var(--teal);
}

.stat-box-teal .sb-ico {
  background: rgba(42, 157, 157, 0.16);
  color: var(--teal);
}

.stat-box-lane {
  border-top-color: var(--lane);
}

.stat-box-lane .sb-ico {
  background: rgba(245, 200, 76, 0.14);
  color: var(--lane);
}

.stat-box-amber {
  border-top-color: var(--amber);
}

.stat-box-amber .sb-ico {
  background: rgba(255, 184, 77, 0.16);
  color: var(--amber);
}

.mini-progress {
  height: 6px;
  border-radius: 99px;
  background: var(--asphalt-3);
  overflow: hidden;
}

.mini-progress-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--lane), var(--green));
  transition: width 0.5s ease;
}

/* --- kokpit kierowcy (stats): licznik-odometr + zegary --- */
.dash-cluster {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 20px;
  padding: 20px 16px 16px;
  margin-bottom: 20px;
  border: 1px solid var(--line);
  background: linear-gradient(165deg, var(--asphalt-2), var(--asphalt-3));
  box-shadow: 0 26px 50px -34px rgba(0, 0, 0, 0.85);
}

.dash-cluster::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--coral), var(--amber), var(--lane), var(--teal));
}

.dash-cluster::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  height: 200px;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.14;
  background: var(--lane);
  pointer-events: none;
}

.dash-odo {
  background: transparent;
  border: 0;
  border-top: 0;
  padding: 0 0 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dash-odo:hover {
  transform: none;
}

.odometer {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}

.odo-digit {
  width: 36px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 29px;
  color: var(--cream);
  background: linear-gradient(180deg, #0A0B0E, #1B1E25 48%, #0A0B0E);
  border: 1px solid var(--asphalt-4);
  border-radius: 8px;
  box-shadow: inset 0 10px 12px -9px rgba(0, 0, 0, 0.95), inset 0 -10px 12px -9px rgba(0, 0, 0, 0.95), 0 2px 6px -2px rgba(0, 0, 0, 0.6);
}

.odo-digit.odo-zero {
  color: var(--cream-dimmer);
}

.odo-digit:last-of-type {
  color: var(--lane);
  border-color: rgba(245, 200, 76, 0.45);
}

.odo-unit {
  margin-left: 8px;
  font-family: "JetBrains Mono", monospace;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--cream-dim);
  text-transform: uppercase;
}

.dash-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 11px;
}

.dash-row .stat-box {
  background: rgba(10, 11, 14, 0.45);
}

/* Trip summary's stat trio: the shared 11px .sb-lbl reads as an afterthought under a big
   number - bump size/weight/contrast so the label (what the number MEANS) stays legible
   without out-competing the value. Scoped here (not on .sb-lbl itself) since stats.html.erb
   reuses the same classes for its secondary row and wasn't the one flagged as hard to read. */
[data-test=summary-stats] .sb-lbl {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin-top: 6px;
}

@media (max-width: 420px) {
  .odo-digit {
    width: 30px;
    height: 46px;
    font-size: 24px;
  }
  .dash-row .sb-val {
    font-size: 19px;
  }
}
/* pasek postępu odznak = droga, po której jedzie auto do mety */
.badge-road {
  position: relative;
  height: 30px;
  border-radius: 9px;
  margin-bottom: 20px;
  background: linear-gradient(180deg, #23262e, #1B1E24);
  border: 1px solid var(--line);
}

.badge-road::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 50%;
  height: 3px;
  transform: translateY(-50%);
  border-radius: 2px;
  opacity: 0.45;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0 14px, transparent 14px 26px);
}

.badge-road-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--pct, 0%);
  border-radius: 9px 0 0 9px;
  background: linear-gradient(90deg, rgba(78, 203, 113, 0.28), rgba(78, 203, 113, 0.1));
  transition: width 0.5s ease;
}

.badge-road-flag {
  position: absolute;
  top: 50%;
  right: 7px;
  transform: translateY(-50%);
  color: var(--cream-dim);
}

.badge-road-flag .icon {
  width: 15px;
  height: 15px;
}

.badge-road-car {
  position: absolute;
  top: 50%;
  left: clamp(26px, var(--pct, 0%), 100% - 30px);
  transform: translate(-50%, -56%);
  color: var(--lane);
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.65));
  transition: left 0.5s ease;
}

.badge-road-car .icon {
  width: 42px;
  height: 25px;
}

.statline {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 11px 8px;
  margin: 0 -8px;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 10px;
  transition: background 0.15s;
}

.statline:hover {
  background: rgba(245, 200, 76, 0.05);
}

.statline:last-child {
  border-bottom: none;
}

.statline .sl-lbl {
  font-size: 13px;
  color: var(--cream-dim);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.statline .sl-lbl .icon {
  width: 16px;
  height: 16px;
  color: var(--green);
}

.statline .sl-val {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  font-weight: 600;
  color: var(--green);
}

@media (min-width: 700px) {
  .stat-big-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* --- odznaki (status zdobyte/niezdobyte + opis) --- */
.badge-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 700px) {
  .badge-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.badge-card {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px;
  border-radius: 14px;
  background: var(--asphalt-2);
  border: 1px solid var(--line);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.badge-card.locked {
  opacity: 0.55;
}

.badge-card.earned {
  border-color: rgba(245, 200, 76, 0.25);
}

.badge-card.earned:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 26px -18px rgba(255, 184, 77, 0.5);
}

.badge-ico {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--asphalt-3);
  color: var(--cream-dimmer);
}

.badge-card.earned .badge-ico {
  background: linear-gradient(135deg, var(--coral), var(--amber));
  color: #fff;
  box-shadow: 0 6px 14px -6px rgba(255, 107, 92, 0.5);
}

.badge-ico .icon {
  width: 22px;
  height: 22px;
}

.badge-meta {
  flex: 1;
  min-width: 0;
}

.badge-title {
  font-size: 14px;
  font-weight: 600;
}

.badge-desc {
  font-size: 11px;
  color: var(--cream-dim);
  margin-top: 2px;
  line-height: 1.4;
}

.badge-status {
  font-size: 9px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 99px;
  flex-shrink: 0;
  background: var(--asphalt-3);
  color: var(--cream-dimmer);
}

.badge-card.earned .badge-status {
  background: var(--lane);
  color: var(--asphalt);
}

.badge-holders {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  font-size: 11px;
  color: var(--cream-dimmer);
}

.badge-holders .icon {
  width: 12px;
  height: 12px;
}

.wildlife-badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}

.wildlife-badge {
  --tier:#666;
  display: flex;
  gap: 13px;
  align-items: center;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--tier) 38%, var(--line));
  perspective: 420px;
  border-radius: 15px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--tier) 13%, var(--asphalt-2)), var(--asphalt-2));
}

.wildlife-badge-emblem {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  border-radius: 50%;
  border: 3px solid var(--tier);
  background: radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--tier) 55%, white), var(--tier));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tier) 14%, transparent);
  color: #17191c;
  font: 800 24px "Outfit", sans-serif;
}

.badge-emblem-svg {
  position: relative;
  isolation: isolate;
  overflow: visible;
  background: var(--tier);
  border-width: 2px;
  transform-style: preserve-3d;
  transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.38s ease;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--tier) 48%, white), 0 6px 0 color-mix(in srgb, var(--tier) 52%, #17191d), 0 9px 12px rgba(0, 0, 0, 0.42), 0 0 0 3px color-mix(in srgb, var(--tier) 18%, transparent), inset -5px -7px 10px rgba(0, 0, 0, 0.28), inset 5px 6px 9px rgba(255, 255, 255, 0.34);
}

.wildlife-badge:hover .badge-emblem-svg {
  transform: rotateX(5deg) rotateY(-7deg) translateY(-3px);
  filter: saturate(1.08);
}

.badge-emblem-svg::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 4px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  pointer-events: none;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.28) 2%, transparent 34%, transparent 67%, rgba(0, 0, 0, 0.16));
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.3), inset -1px -1px 1px rgba(0, 0, 0, 0.28);
}

.badge-emblem-svg::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: repeating-conic-gradient(from 12deg, rgba(255, 255, 255, 0.08) 0 7deg, transparent 7deg 18deg);
  -webkit-mask: radial-gradient(circle, transparent 0 65%, #000 67%);
  mask: radial-gradient(circle, transparent 0 65%, #000 67%);
}

.badge-glyph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  color: #17191c;
}

.badge-glyph .icon {
  position: absolute;
  width: 35px;
  height: 35px;
}

.badge-glyph-highlight {
  color: rgba(255, 255, 255, 0.48);
  transform: translate(-0.8px, -1px);
}

.badge-glyph-ink {
  color: #20242a;
  filter: drop-shadow(0 1.5px 1px rgba(0, 0, 0, 0.24));
}

.badge-glyph-current {
  z-index: 1;
  background: radial-gradient(circle at 27% 20%, rgba(255, 255, 255, 0.74), transparent 25%), linear-gradient(125deg, color-mix(in srgb, var(--tier) 70%, white), var(--tier) 43%, color-mix(in srgb, var(--tier) 72%, #20242a) 72%, color-mix(in srgb, var(--tier) 62%, white));
  background-size: 165% 165%;
}

.badge-glyph-next {
  z-index: 2;
  background: radial-gradient(circle at 27% 20%, rgba(255, 255, 255, 0.76), transparent 25%), linear-gradient(125deg, color-mix(in srgb, var(--next-tier) 70%, white), var(--next-tier) 43%, color-mix(in srgb, var(--next-tier) 72%, #20242a) 72%, color-mix(in srgb, var(--next-tier) 62%, white));
  background-size: 165% 165%;
  clip-path: inset(calc(100% - var(--badge-progress, 0%)) 0 0 0);
  transition: clip-path 0.45s ease;
}

.badge-artwork-react {
  position: absolute;
  z-index: 3;
  inset: 9px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
}

.badge-artwork-react > div {
  display: contents;
}

.badge-scene-art, .badge-collection-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.badge-scene-art svg, .badge-collection-art > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.badge-collection-art > svg {
  width: 118%;
  height: 118%;
  transform: translate(0, 5%);
}

.badge-collection-art > svg, .badge-collection-art > svg * {
  animation: none !important;
  transition: none !important;
}

.badge-collection-art .scene-shadow {
  display: none;
}

.badge-family-overall > svg {
  width: 122%;
  height: 122%;
  transform: translate(8%, 8%);
}

.badge-family-overall > b {
  position: absolute;
  right: 1px;
  top: 4px;
  color: #293036;
  font: 900 10px/1 sans-serif;
  letter-spacing: -1px;
}

.badge-art-deer > svg {
  width: 165%;
  height: 165%;
  transform: translate(21%, 17%);
}

.badge-art-boar > svg {
  width: 160%;
  height: 160%;
  transform: translate(23%, 8%);
}

.badge-art-moose > svg {
  width: 162%;
  height: 162%;
  transform: translate(22%, 15%);
}

.badge-art-bison > svg {
  width: 152%;
  height: 152%;
  transform: translate(20%, 9%);
}

.badge-art-fox > svg {
  width: 138%;
  height: 138%;
  transform: translate(14%, 10%);
}

.badge-art-hare > svg {
  width: 108%;
  height: 108%;
  transform: translate(1%, 1%);
}

.badge-art-hedgehog > svg {
  width: 136%;
  height: 136%;
  transform: translate(17%, 9%) scaleX(-1);
}

.badge-art-stork > svg, .badge-art-crane > svg {
  width: 126%;
  height: 126%;
  transform: translate(-8%, 5%);
}

.badge-art-owl > svg {
  width: 118%;
  height: 118%;
  transform: translate(-5%, 8%);
}

.badge-sky {
  fill: #90c8e8;
}

.badge-hill-far {
  fill: #9fb997;
}

.badge-hill-near {
  fill: #4d8557;
}

.badge-road-art {
  fill: #414850;
}

.badge-lane-art, .badge-lanes {
  fill: none;
  stroke: #f7f4ee;
  stroke-width: 2;
  stroke-linecap: round;
}

.badge-sun-art {
  fill: #ffbd4b;
}

.badge-rays-art {
  fill: none;
  stroke: #ffbd4b;
  stroke-width: 2;
  stroke-linecap: round;
}

.badge-cloud-art {
  fill: #f7f4ee;
}

.badge-rain-art {
  fill: none;
  stroke: #68a9d2;
  stroke-width: 2;
  stroke-linecap: round;
}

.badge-ground-art {
  fill: #59915a;
}

.badge-tree-art {
  fill: #31713b;
}

.badge-cup-art {
  fill: #f3eee4;
  stroke: #7c5540;
  stroke-width: 1.5;
}

.badge-steam-art {
  fill: none;
  stroke: #f3eee4;
  stroke-width: 2;
  stroke-linecap: round;
}

.badge-flag-art {
  fill: #ff6b5c;
  stroke: #51342e;
  stroke-width: 1.2;
}

.badge-road-bg {
  fill: #414850;
}

.badge-car-one {
  fill: #ff6b5c;
}

.badge-car-two {
  fill: #2a9d9d;
}

.badge-car-one circle, .badge-car-two circle {
  fill: #20242a;
  stroke: #d8dde1;
  stroke-width: 1;
}

.badge-night-sky {
  fill: #273247;
}

.badge-moon-art {
  fill: #e8e1b2;
}

.badge-night-hill {
  fill: #284d3d;
}

.badge-star-art {
  fill: #f7e799;
}

.badge-owl-art {
  fill: #9b704c;
}

.badge-owl-eye-art {
  fill: #f5c84c;
  stroke: #20242a;
  stroke-width: 1;
}

.next-bronze {
  --next-tier:#c78348;
}

.next-silver {
  --next-tier:#c9d0d8;
}

.next-gold {
  --next-tier:#f5c84c;
}

.next-diamond {
  --next-tier:#73e4ef;
}

.next-unranked {
  --next-tier:#696a6d;
}

.badge-family-heart {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: -8px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #24282d;
  color: #ff8198;
  font: 800 10px/1 sans-serif;
  box-shadow: 0 0 0 2px var(--tier), 0 2px 4px rgba(0, 0, 0, 0.5);
  transform: translateX(-50%);
}

.badge-tier-stars {
  position: absolute;
  z-index: 6;
  top: -9px;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  border: 1px solid color-mix(in srgb, var(--tier) 82%, white);
  border-radius: 10px;
  background: linear-gradient(180deg, #353b42, #171a1e);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.18), 0 2px 5px rgba(0, 0, 0, 0.52);
  transform: translateX(-50%);
  pointer-events: none;
}

.badge-tier-stars i {
  display: block;
  color: color-mix(in srgb, var(--tier) 58%, #fff8dc);
  font: 900 9px/1 sans-serif;
  text-shadow: 0 1px 1px #000, 0 0 3px color-mix(in srgb, var(--tier) 65%, transparent);
}

.tier-bronze .badge-tier-stars {
  min-width: 18px;
  padding: 0;
}

.tier-silver .badge-tier-stars i {
  font-size: 8px;
}

.tier-gold .badge-tier-stars i {
  font-size: 7px;
}

.tier-diamond .badge-tier-stars {
  gap: 3px;
  border-color: #a9f6ff;
  background: linear-gradient(180deg, #28454d, #131d22);
}

.tier-diamond .badge-tier-stars i {
  color: #c8fbff;
  font-size: 8px;
}

.tier-bronze .badge-emblem-svg::before {
  background: radial-gradient(circle at 28% 22%, rgba(255, 218, 169, 0.5), transparent 27%), linear-gradient(145deg, rgba(255, 255, 255, 0.18), transparent 38%, rgba(67, 35, 18, 0.18));
  animation: badgeBronzeLight 5.8s ease-in-out infinite;
}

.tier-silver .badge-emblem-svg::before {
  background: linear-gradient(108deg, transparent 18%, rgba(255, 255, 255, 0.05) 34%, rgba(255, 255, 255, 0.82) 47%, rgba(194, 224, 247, 0.2) 55%, transparent 70%), linear-gradient(145deg, rgba(255, 255, 255, 0.2), transparent 42%, rgba(35, 45, 55, 0.12));
  background-size: 240% 100%, 100% 100%;
  animation: badgeSilverLight 4.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.tier-gold .badge-emblem-svg::before {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 2%, rgba(255, 229, 124, 0.52) 3% 7%, transparent 14%), linear-gradient(112deg, transparent 20%, rgba(255, 244, 184, 0.08) 35%, rgba(255, 255, 255, 0.72) 48%, rgba(255, 211, 65, 0.2) 58%, transparent 72%), linear-gradient(145deg, rgba(255, 250, 213, 0.22), transparent 45%, rgba(83, 57, 6, 0.14));
  background-size: 100% 100%, 250% 100%, 100% 100%;
  animation: badgeGoldLight 3.5s ease-in-out infinite;
}

.tier-diamond .badge-emblem-svg::before {
  background: linear-gradient(112deg, transparent 22%, rgba(126, 245, 255, 0.12) 34%, rgba(255, 255, 255, 0.88) 44%, rgba(207, 145, 255, 0.48) 49%, rgba(112, 236, 255, 0.28) 55%, transparent 68%), linear-gradient(145deg, rgba(255, 255, 255, 0.25), transparent 40%, rgba(43, 93, 116, 0.13));
  background-size: 260% 100%, 100% 100%;
  animation: badgeDiamondLight 3.1s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}

.tier-bronze .badge-glyph {
  animation: badgeMaterialDrift 9s ease-in-out infinite alternate;
}

.tier-silver .badge-glyph {
  animation: badgeMaterialDrift 6.5s ease-in-out infinite alternate;
}

.tier-gold .badge-glyph {
  animation: badgeMaterialDrift 4.6s ease-in-out infinite alternate;
}

.tier-diamond .badge-glyph {
  animation: badgeMaterialDrift 3.4s ease-in-out infinite alternate;
}

.tier-bronze .badge-emblem-svg::after {
  animation: badgeRimTurn 15s linear infinite;
}

.tier-silver .badge-emblem-svg::after {
  animation: badgeRimTurn 10s linear infinite;
}

.tier-gold .badge-emblem-svg {
  box-shadow: 0 1px 0 #fff0a5, 0 6px 0 #82661d, 0 10px 14px rgba(0, 0, 0, 0.43), 0 0 0 3px rgba(245, 200, 76, 0.2), 0 0 12px rgba(245, 200, 76, 0.2), inset -5px -7px 10px rgba(0, 0, 0, 0.23), inset 5px 6px 10px rgba(255, 255, 255, 0.4);
}

.tier-gold .badge-emblem-svg::after {
  animation: badgeRimTurn 6s linear infinite;
}

.tier-diamond .badge-emblem-svg {
  box-shadow: 0 1px 0 #d8fcff, 0 6px 0 #28727a, 0 10px 14px rgba(0, 0, 0, 0.42), 0 0 0 3px rgba(115, 228, 239, 0.2), 0 0 11px rgba(115, 228, 239, 0.2), inset -5px -7px 10px rgba(0, 0, 0, 0.2), inset 5px 6px 10px rgba(255, 255, 255, 0.43);
}

.badge-emblem-svg:hover .badge-tier-stars {
  animation: badgeCrownLift 0.75s ease-in-out both;
}

.tier-bronze .badge-emblem-svg:hover::after {
  animation: badgeRimTurn 2.4s linear infinite;
}

.tier-silver .badge-emblem-svg:hover::after {
  animation: badgeRimTurn 1.55s linear infinite;
}

.tier-gold .badge-emblem-svg:hover::after {
  animation: badgeRimTurn 1.15s linear infinite;
}

.tier-diamond .badge-emblem-svg::after {
  animation: badgeDiamondPrism 5.2s ease-in-out infinite;
}

@keyframes badgeCrownLift {
  45% {
    transform: translate(-50%, -3px) scale(1.06);
    filter: brightness(1.22);
  }
}
@keyframes badgeRimTurn {
  to {
    transform: rotate(360deg);
  }
}
@keyframes badgeMaterialDrift {
  to {
    background-position: 72% 78%, 100% 58%;
  }
}
@keyframes badgeBronzeLight {
  0%, 100% {
    opacity: 0.5;
    filter: sepia(0.12) brightness(0.94);
  }
  45% {
    opacity: 0.88;
    filter: sepia(0.25) brightness(1.12);
  }
  62% {
    opacity: 0.62;
  }
}
@keyframes badgeSilverLight {
  0%, 18% {
    background-position: 145% 0, 0 0;
    opacity: 0.42;
  }
  58% {
    background-position: -45% 0, 0 0;
    opacity: 0.85;
  }
  72%, 100% {
    background-position: -45% 0, 0 0;
    opacity: 0.46;
  }
}
@keyframes badgeGoldLight {
  0%, 12% {
    background-position: 18% 72%, 145% 0, 0 0;
    opacity: 0.48;
  }
  48% {
    background-position: 78% 22%, -35% 0, 0 0;
    opacity: 0.9;
  }
  59% {
    background-position: 66% 28%, -35% 0, 0 0;
    opacity: 0.66;
  }
  100% {
    background-position: 18% 72%, -35% 0, 0 0;
    opacity: 0.48;
  }
}
@keyframes badgeDiamondLight {
  0%, 10% {
    background-position: 150% 0, 0 0;
    opacity: 0.52;
  }
  52% {
    background-position: -45% 0, 0 0;
    opacity: 0.96;
  }
  68%, 100% {
    background-position: -45% 0, 0 0;
    opacity: 0.54;
  }
}
@keyframes badgeDiamondPrism {
  0%, 72%, 100% {
    filter: hue-rotate(0) brightness(1);
  }
  82% {
    filter: hue-rotate(28deg) brightness(1.38);
  }
  92% {
    filter: hue-rotate(-18deg) brightness(1.08);
  }
}
.wildlife-badge-copy {
  flex: 1;
  min-width: 0;
}

.wildlife-tier {
  color: var(--tier);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.wildlife-count {
  margin-top: 3px;
  font-size: 12px;
}

.wildlife-count strong {
  font-size: 17px;
}

.wildlife-next {
  color: var(--cream-dimmer);
  font-size: 10px;
}

.wildlife-meter {
  height: 5px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 5px;
  background: var(--asphalt-4);
}

.wildlife-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--tier);
}

.badge-friends {
  margin-top: 3px;
  color: var(--cream-dim);
  font-size: 10px;
  line-height: 1.35;
}

.tier-unranked {
  --tier:#696a6d;
  opacity: 0.72;
}

.tier-bronze {
  --tier:#c78348;
}

.tier-silver {
  --tier:#c9d0d8;
}

.tier-gold {
  --tier:#f5c84c;
}

.tier-diamond {
  --tier:#73e4ef;
}

/* --- panel administratora ---
   Table grid (min-width + overflow-x scroll) is desktop-only. Below 700px a fixed-width grid
   row inside a horizontally-scrollable container fights Chromium's scrollIntoView (it can't
   satisfy "button visible" both vertically AND horizontally at once, so it oscillates the
   horizontal scroll position forever) - breaks real mobile taps AND made this untestable by
   Playwright (row.getByRole(...).click() never stabilized, ~10s of retries hitting whatever
   else happened to be under the oscillating coordinates). Mobile instead wraps each row as
   flex (no horizontal scroll possible even in principle) and hides the column-header row
   (labels-next-to-value already present in each cell via .plan-chip/.admin-muted). */
.admin-table {
  padding: 0;
  overflow-x: auto;
}

.admin-row {
  display: grid;
  grid-template-columns: 1.2fr 2fr 0.9fr 0.8fr 0.7fr 1.1fr;
  gap: 10px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
}

@media (min-width: 700px) {
  .admin-row {
    min-width: 560px;
  }
}
@media (max-width: 699px) {
  /* overflow-x STAYS auto (not visible!) even here - it's the safety net. flex-wrap below
     handles the normal case, but if some nested flex group still doesn't fit (e.g.
     .wishlist-action without its own wrap - the real bug this masked: escaped overflow
     made the whole PAGE horizontally scrollable, not just this table, which is what
     actually broke Playwright's click here, not the row grid itself), `auto` contains
     the overflow inside the table instead of letting it push the document width around. */
  .admin-row.admin-head {
    display: none;
  }
  .admin-row {
    display: flex;
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .admin-row .admin-muted {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
}
.admin-row:last-child {
  border-bottom: none;
}

.admin-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cream-dimmer);
  font-weight: 600;
}

.admin-muted {
  color: var(--cream-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Admin signature simulator (/admin/simulator): control strips + scene + event log */
.sim-lab {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sim-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
}

.sim-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sim-group-label {
  font-family: var(--font-display, Outfit);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream-dim);
  min-width: 86px;
}

.sim-btn {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(247, 244, 238, 0.18);
  background: rgba(247, 244, 238, 0.06);
  color: var(--cream);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.sim-btn:hover {
  background: rgba(247, 244, 238, 0.12);
}

.sim-btn.active {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

.sim-btn-primary {
  background: var(--coral);
  border-color: var(--coral);
  color: #fff;
}

.sim-btn-primary:hover {
  background: #ff7f72;
}

.sim-collectibles {
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: start;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(247, 244, 238, 0.1);
}

.sim-collectible-groups {
  display: grid;
  gap: 9px;
}

.sim-collectible-group {
  display: grid;
  grid-template-columns: 70px 1fr;
  align-items: start;
  gap: 8px;
}

.sim-collectible-group > small {
  padding-top: 8px;
  color: var(--cream-dim);
  font-size: 10px;
}

.sim-collectible-group > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sim-collectible-pair {
  display: inline-flex;
}

.sim-collectible-pair .sim-collectible-btn:first-child {
  border-radius: 999px 0 0 999px;
}

.sim-collectible-pair .sim-collectible-btn:last-child {
  min-width: 30px;
  margin-left: -1px;
  padding-inline: 8px;
  border-radius: 0 999px 999px 0;
}

.sim-collectible-btn {
  padding: 6px 11px;
  font-size: 11px;
}

.sim-collectible-btn.lucky {
  color: #ffe789;
  border-color: rgba(245, 200, 76, 0.55);
  box-shadow: inset 0 0 12px rgba(245, 200, 76, 0.08);
}

.sim-stage {
  padding: 0;
  overflow: hidden;
}

.sim-log {
  padding: 12px 16px;
}

.sim-log-head {
  font-family: var(--font-display, Outfit);
  font-weight: 600;
  cursor: pointer;
}

.sim-log[open] .sim-log-head {
  margin-bottom: 8px;
}

.sim-log-head small {
  display: block;
  font-weight: 400;
  color: var(--cream-dim);
  margin-top: 2px;
}

.sim-log ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 300px;
  overflow-y: auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  line-height: 1.7;
}

.sim-log-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.sim-log-row time {
  color: var(--cream-dim);
  flex: none;
}

.sim-log-row b {
  flex: none;
  min-width: 44px;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.06em;
}

.sim-log-akcja b {
  color: var(--amber);
}

.sim-log-stan b {
  color: var(--teal);
}

.sim-log-net b {
  color: var(--coral);
}

.sim-log-info b {
  color: var(--cream-dim);
}

.sim-log-row span {
  overflow-wrap: anywhere;
}

.sim-badge-catalog {
  padding: 16px;
}

.sim-badge-title {
  margin-bottom: 14px;
  font-family: var(--font-display, Outfit);
  font-size: 18px;
  font-weight: 700;
}

.sim-badge-title small {
  display: block;
  margin-top: 2px;
  color: var(--cream-dim);
  font: 400 11px var(--font-body, sans-serif);
}

.sim-badge-family {
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.sim-badge-progress-examples {
  margin: 4px 0 12px;
  padding: 12px;
  border: 1px solid rgba(115, 228, 239, 0.2);
  border-radius: 12px;
  background: rgba(115, 228, 239, 0.035);
}

.sim-material-progress {
  margin-top: 2px;
  color: var(--cream-dimmer);
  font-size: 9px;
  text-transform: uppercase;
}

.sim-badge-family-name {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
}

.sim-badge-tiers {
  display: grid;
  grid-template-columns: repeat(4, minmax(145px, 1fr));
  gap: 8px;
}

.sim-badge-card {
  min-width: 0;
  padding: 9px;
}

.sim-badge-card .wildlife-badge-emblem {
  width: 64px;
  height: 64px;
  flex-basis: 64px;
}

.sim-badge-card .wildlife-count strong {
  font-size: 14px;
}

@media (max-width: 760px) {
  .sim-badge-tiers {
    grid-template-columns: repeat(2, minmax(130px, 1fr));
  }
}
@media (max-width: 720px) {
  .sim-collectibles {
    grid-template-columns: 1fr;
  }
  .sim-collectible-group {
    grid-template-columns: 1fr;
    gap: 3px;
  }
  .sim-collectible-group > small {
    padding-top: 0;
  }
}
.plan-chip {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 99px;
}

.plan-premium {
  background: var(--lane);
  color: var(--asphalt);
}

.plan-free {
  background: var(--asphalt-3);
  color: var(--cream-dim);
}

.admin-link {
  color: var(--lane);
  font-weight: 600;
}

.admin-link:hover {
  text-decoration: underline;
}

/* lista oczekujących: własna siatka (4 kolumny) - .admin-row ma 5 pod tabelę użytkowników */
.wishlist-row {
  grid-template-columns: 2fr 1.1fr 1fr 1.2fr;
}

.wishlist-action {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.wishlist-action form {
  margin: 0;
}

/* chip statusu płatności (backoffice) */
.tx-chip {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 99px;
  white-space: nowrap;
}

.tx-ok {
  background: rgba(78, 203, 113, 0.18);
  color: #4ECB71;
}

.tx-pending {
  background: rgba(245, 200, 76, 0.18);
  color: var(--lane);
}

.tx-fail {
  background: rgba(255, 107, 92, 0.18);
  color: var(--coral);
}

.tx-refund {
  background: var(--asphalt-3);
  color: var(--cream-dim);
}

/* --- plany / subskrypcje --- */
.plans-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 680px) {
  .plans-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.plan-card {
  display: flex;
  flex-direction: column;
}

.plan-name {
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: 18px;
}

.plan-price {
  font-family: "Outfit", sans-serif;
  font-weight: 800;
  font-size: 30px;
  margin: 6px 0 14px;
}

.plan-price span {
  font-size: 14px;
  font-weight: 600;
  color: var(--cream-dim);
}

.plan-feats {
  list-style: none;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.plan-feats li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--cream-dim);
}

.plan-feats li .icon {
  width: 15px;
  height: 15px;
  color: var(--green);
  flex-shrink: 0;
}

.plan-card .btn {
  margin-top: auto;
}

/* --- znajomi: dekoracyjny konwój (1 auto = 1 znajomy, maks 5) nad listą --- */
.convoy-strip {
  position: relative;
  height: 34px;
  border-radius: 9px;
  margin-bottom: 12px;
  background: linear-gradient(180deg, #23262e, #1B1E24);
  border: 1px solid var(--line);
  overflow: hidden;
}

.convoy-strip::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 50%;
  height: 3px;
  transform: translateY(-50%);
  border-radius: 2px;
  opacity: 0.4;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0 14px, transparent 14px 26px);
}

.convoy-strip-car {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -54%);
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6));
}

.convoy-strip-car .icon {
  width: 40px;
  height: 24px;
}

/* --- profil jako „prawo jazdy" kierowcy RoadVibe --- */
.card.license-card {
  padding: 0;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255, 107, 92, 0.07), var(--asphalt-2) 52%);
}

.license-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(255, 107, 92, 0.16), rgba(245, 200, 76, 0.1) 45%, rgba(42, 157, 157, 0.13));
}

.license-eu {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  flex-shrink: 0;
  background: var(--teal);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.02em;
}

.license-eu::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px dotted rgba(255, 255, 255, 0.75);
  border-radius: 50%;
}

.license-titles {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.license-title-main {
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
}

.license-title-sub {
  font-family: "JetBrains Mono", monospace;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream-dim);
}

.license-stripe {
  width: 38px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
  opacity: 0.8;
  background: repeating-linear-gradient(90deg, var(--lane) 0 6px, transparent 6px 10px);
}

.license-body {
  display: flex;
  gap: 18px;
  padding: 18px 16px;
}

.license-photo-form {
  flex-shrink: 0;
  align-self: flex-start;
}

.license-photo {
  position: relative;
  border-radius: 50%;
  padding: 3px;
  display: inline-flex;
}

.license-photo.ring-premium {
  background: linear-gradient(135deg, var(--lane), var(--amber));
}

.license-photo.ring-free {
  background: linear-gradient(135deg, var(--teal), var(--lane));
}

.avatar-xl {
  width: 96px;
  height: 96px;
  font-size: 34px;
}

.photo-edit-btn {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--lane), var(--amber));
  color: var(--asphalt);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px -3px rgba(0, 0, 0, 0.65), 0 0 0 3px var(--asphalt-2);
  transition: transform 0.15s, box-shadow 0.15s;
}

.photo-edit-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 14px -4px rgba(245, 200, 76, 0.6), 0 0 0 3px var(--asphalt-2);
}

.photo-edit-btn .icon {
  width: 17px;
  height: 17px;
}

.photo-edit-btn input[type=file] {
  display: none;
}

.license-fields {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lf-label {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin-bottom: 2px;
}

.lf-value {
  font-size: 16px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.lf-mono {
  font-family: "JetBrains Mono", monospace;
  font-weight: 500;
  font-size: 15px;
}

.license-foot {
  padding: 12px 16px 14px;
  border-top: 1px dashed var(--line);
}

/* --- integracje (profil) --- */
.integration-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.integration-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.integration-ico {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  flex-shrink: 0;
  background: var(--asphalt-3);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.2s;
}

.integration-ico.grad-lane {
  color: #fff;
  box-shadow: 0 6px 14px -6px rgba(245, 200, 76, 0.5);
}

.integration-ico .icon {
  width: 22px;
  height: 22px;
}

/* --- ekran podróży (pełnoekranowy) + Now Playing --- */
.trip-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 18px 22px 40px;
  width: 100%;
}

@media (min-width: 900px) {
  .trip-screen {
    padding: 28px 48px 48px;
  }
}
.trip-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0 16px;
}

.trip-topbar .tb-title {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 18px;
}

.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* topbar podróży = nakładka NA scenie (lewy górny róg nieba, obok pigułki pogody po prawej) -
   nie zajmuje wysokości, więc sygnatura sięga górnej krawędzi ekranu */
.trip-screen {
  position: relative;
}

.trip-topbar-overlay {
  position: absolute;
  top: 8px;
  left: 12px;
  right: 120px;
  z-index: 8;
  padding: 0;
  pointer-events: none;
}

.trip-topbar-overlay .topbar-right {
  margin-left: 0;
  pointer-events: auto;
}

.now-playing {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 340px;
  font-size: 12px;
  color: var(--cream-dim);
  background: var(--asphalt-2);
  border: 1px solid var(--line);
  padding: 6px 12px;
  border-radius: 99px;
}

/* obserwujący (właściciel widzi kto i ilu śledzi trasę) */
.observers {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--asphalt-2);
  border: 1px solid var(--line);
  padding: 5px 10px 5px 8px;
  border-radius: 99px;
}

.observers .obs-eye .icon {
  width: 15px;
  height: 15px;
  color: var(--teal);
}

.obs-avatars {
  display: flex;
}

.obs-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-left: -7px;
  border: 2px solid var(--asphalt-2);
  background: var(--teal);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.obs-dot:first-child {
  margin-left: 0;
}

.obs-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--cream);
  font-family: "JetBrains Mono", monospace;
}

.now-playing .np-ico .icon {
  width: 15px;
  height: 15px;
  color: var(--green);
}

.np-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.np-text b {
  color: var(--cream);
}

.trip-panel {
  margin-top: 20px;
  max-width: 720px;
}

.details-toggle {
  display: none;
}

/* --road-edge = height of the road surface the scenery baseline sits on. The DEFAULT must be
   declared BEFORE every stage variant: all of them (.road-stage-full below, the mobile media
   override near the end of this file) redeclare it at the same 0,1,0 specificity, so source
   order decides. When the default lived in the main .road-stage block further down, it silently
   beat .road-stage-full's 210px and dropped the atmosphere/wind-stream layers onto the asphalt
   (the white-gray band on the road, fixed 2026-07-24). */
.road-stage {
  --road-edge:88px;
}

/* pełnoekranowa scena: edge-to-edge (kompensacja paddingu .trip-screen) + wyższa droga */
.road-stage-full {
  --road-edge:210px;
  --trip-car-width:clamp(190px, 42vw, 560px);
  --trip-car-bottom:48px;
  /* środek lewego/tylnego koła jest ~25% od lewej krawędzi auta, czyli 75% jego
     szerokości za przodem wyrównanym do krawędzi postępu */
  --trip-rear-wheel-offset:clamp(143px, 31.5vw, 420px);
  border-radius: 0;
  border-left: none;
  border-right: none;
  margin-left: -22px;
  margin-right: -22px;
}

.road-stage-full .road-sky {
  height: 52vh;
  min-height: 360px;
}

.road-stage-full .road-base {
  height: 210px;
}

.road-stage-full .lane-line {
  bottom: 46px;
  height: 7px;
}

.road-stage-full .grass {
  bottom: 210px;
  height: 26px;
}

.road-stage-full .roadside-trees {
  bottom: 210px;
  height: 214px;
}

.road-stage-full .parallax-hills {
  bottom: 210px;
}

.road-stage-full .roadside-landmarks {
  bottom: 210px;
  height: 116px;
}

.road-stage-full .road-foreground {
  bottom: 210px;
  height: 78px;
}

.road-stage-full .fog-bands {
  bottom: 180px;
}

.road-stage-full .fireflies {
  bottom: 210px;
}

.road-stage-full .rainbow-arc {
  bottom: 210px;
}

.road-stage-full .hills-far {
  height: 100px;
}

.road-stage-full .hills-mid {
  height: 64px;
}

.road-stage-full .road-posts {
  bottom: 200px;
  height: 28px;
}

/* rozmiar auta responsywny (vw) - DUŻY na desktopie (~pół szerokości sceny), w całości widoczny na mobile;
   car-unit ma JAWNĄ szerokość, więc SVG/zdjęcie width:100% i nakładka załogi (inset:0) działają. */
.road-stage-full .car-unit {
  bottom: var(--trip-car-bottom);
  width: var(--trip-car-width);
}

.road-stage-full .car-svg-wrap {
  width: 100%;
}

.road-stage-full .crew-dot {
  font-size: 15px;
  border-width: 3px;
}

@media (min-width: 900px) {
  .road-stage-full {
    margin-left: -48px;
    margin-right: -48px;
  }
  .road-stage-full .road-sky {
    height: 58vh;
    max-height: 640px;
  }
}
/* główne ekrany na desktopie: komfortowa maksymalna szerokość treści tekstowej */
@media (min-width: 900px) {
  .h-title {
    font-size: 32px;
  }
  .auth-card {
    max-width: 440px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}
/* ==========================================================================
   Road stage (sygnatura) - style komponentu React TripProgress
   Ikony auta/pogody/mety to SVG; animacja i paleta jak w prototypie.
   ========================================================================== */
.trip-stage-wrap {
  width: 100%;
}

@media (min-width: 900px) {
  .trip-stage-wrap {
    max-width: 860px;
  }
}
.trip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 10px;
  flex-wrap: wrap;
}

.trip-route {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.trip-route .pt {
  display: flex;
  align-items: center;
  gap: 5px;
}

.dot-a {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--teal);
}

.dot-b {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--coral);
}

.weather-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-family: "JetBrains Mono", monospace;
  background: var(--asphalt-2);
  border: 1px solid var(--line);
  padding: 5px 11px;
  border-radius: 99px;
  color: var(--cream-dim);
}

.weather-pill .icon {
  width: 15px;
  height: 15px;
}

/* pogoda w prawym górnym rogu NIEBA (półprzezroczysta, nad chmurami) */
.weather-pill.sky-pill {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 6;
  background: rgba(20, 24, 31, 0.5);
  border-color: rgba(255, 255, 255, 0.22);
  color: #f3efe7;
  backdrop-filter: blur(2px);
}

/* Przyciski tripa: cofanie jest nakładką w lewym górnym rogu, pozostałe akcje tworzą
   wyłącznie administratorski pasek testowy przy dolnej krawędzi sceny. */
.ro-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--asphalt-3);
  color: var(--cream);
  cursor: pointer;
  padding: 0;
}

.ro-btn .icon {
  width: 17px;
  height: 17px;
}

.ro-btn:hover {
  background: var(--asphalt-4);
}

.ro-btn.ro-danger {
  color: var(--coral);
  border-color: rgba(255, 107, 97, 0.45);
}

.ro-btn.ro-active {
  color: var(--asphalt);
  background: var(--teal);
  border-color: var(--teal);
}

.ro-actions {
  display: flex;
  gap: 6px;
  flex: none;
}

.trip-back-overlay {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 12;
  background: rgba(20, 24, 31, 0.72);
  border-color: rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(3px);
}

.trip-distance-overlay {
  position: absolute;
  top: 9px;
  left: 50%;
  z-index: 12;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 96px;
  padding: 5px 13px;
  border-radius: 11px;
  background: rgba(20, 24, 31, 0.64);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--cream);
  backdrop-filter: blur(3px);
  pointer-events: none;
  line-height: 1.05;
}

.trip-distance-overlay span {
  font-family: "JetBrains Mono", monospace;
  font-size: 8px;
  letter-spacing: 0.08em;
  color: var(--cream-dim);
}

.trip-distance-overlay b {
  margin-top: 3px;
  font-family: "Outfit", sans-serif;
  font-size: 17px;
  color: var(--lane);
}

/* "amount left": kept as the compact secondary line (traveled km stays the big number), but the
   REMAINING value is now clearly legible - a small "jeszcze" label + a readable cream number -
   instead of the old 8px dimmer whisper (owner request 2026-07-27). */
.trip-distance-overlay em {
  margin-top: 3px;
  font-style: normal;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.02em;
  color: var(--cream-dim);
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.trip-distance-overlay em span {
  font-size: 12px;
  font-weight: 600;
  color: var(--cream);
  letter-spacing: 0;
}

.trip-admin-controls {
  position: absolute;
  left: 50%;
  bottom: 10px;
  z-index: 12;
  transform: translateX(-50%);
  padding: 7px;
  border-radius: 13px;
  background: rgba(20, 24, 31, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(4px);
}

/* Observer reactions: a bar of emoji the observer taps; each tap floats an emoji up the scene for
   every viewer AND the driver (ObserverChannel). The driver's page renders the float layer but not
   the bar. */
.reaction-bar {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 22;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(20, 24, 31, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
  max-width: calc(100% - 24px);
}

.reaction-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}

.reaction-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-2px) scale(1.08);
}

.reaction-btn:active {
  transform: scale(0.94);
}

.reaction-float-layer {
  position: absolute;
  inset: 0;
  z-index: 21;
  pointer-events: none;
  overflow: hidden;
}

.reaction-float {
  position: absolute;
  bottom: 64px;
  font-size: 30px;
  line-height: 1;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45));
  animation: reactionFloat 2.6s ease-out forwards;
}

@keyframes reactionFloat {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.4);
  }
  15% {
    opacity: 1;
    transform: translateY(-14px) scale(1.1);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-150px) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .reaction-float {
    animation-duration: 1.6s;
  }
}
/* One-button observer-link share (share_controller.js): native share sheet, else copy + confirm. */
.share-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.share-btn.copied {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

.share-btn .icon {
  width: 16px;
  height: 16px;
}

.gps-hint {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 6;
  max-width: 90%;
  text-align: center;
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(21, 23, 28, 0.82);
  color: var(--cream);
  font-size: 12px;
  line-height: 1.35;
  border: 1px solid var(--line);
}

.road-stage {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--asphalt-3);
  /* pan-y, NIE none: pod sceną są dalsze treści (szczegóły trasy, karta CTA obserwatora), więc
     całkowite zablokowanie dotyku uwięziłoby stronę. To wystarcza, by poziomy swipe po scenie nie
     nawigował wstecz, a szybkie stukanie w zwierzaka nie odpalało zoomu podwójnym stuknięciem. */
  touch-action: pan-y;
}

.road-sky {
  position: relative;
  height: 180px;
}

/* warstwy nieba (deszcz/zachód/noc) nad stałą bazą dnia - crossfade przez opacity */
.sky-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 2s ease;
  pointer-events: none;
}

@media (min-width: 900px) {
  .road-sky {
    height: 230px;
  }
}
.sky-day {
  background: linear-gradient(180deg, #7cb8e8 0%, #a9d4f0 55%, #cde8f5 100%);
}

.sky-sunset {
  background: linear-gradient(180deg, #3a2540 0%, #6b3a4a 35%, #c4664f 65%, #e8a04d 100%);
}

.sky-night {
  background: linear-gradient(180deg, #0d1230 0%, #1a2150 55%, #2a3470 100%);
}

.sky-rain {
  background: linear-gradient(180deg, #4a5560 0%, #5d6770 55%, #717a85 100%);
}

/* dawn: cooler violet top into pink-gold at the horizon (sunset stays the warmer red-orange) */
.sky-sunrise {
  background: linear-gradient(180deg, #2e2c50 0%, #6d4a6e 35%, #d9838a 65%, #f5c08a 100%);
}

/* dramatic-weather set (decisions 103/absorbed): cloudy keeps a day-blue base (just dimmer -
   the sun stays visible), overcast/fog/snow/storm read progressively "worse" than rain. */
.sky-cloudy {
  background: linear-gradient(180deg, #6ea3cc 0%, #93bfdd 55%, #c6dfec 100%);
}

.sky-overcast {
  background: linear-gradient(180deg, #8f98a3 0%, #a3abb5 55%, #b8bfc7 100%);
}

.sky-fog {
  background: linear-gradient(180deg, #b9c0c8 0%, #c9cfd5 55%, #dde1e5 100%);
}

.sky-snow {
  background: linear-gradient(180deg, #7f96ab 0%, #a3b8ca 55%, #d3e1ec 100%);
}

.sky-storm {
  background: linear-gradient(180deg, #232538 0%, #33344a 55%, #45445c 100%);
}

/* lightning: irregular multi-flash opacity loop, purely decorative - above the sky/clouds,
   below the precipitation layer (z4). */
.storm-flash {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: #eef3ff;
  opacity: 0;
  animation: lightningFlash 7s linear infinite;
}

@keyframes lightningFlash {
  0%, 100% {
    opacity: 0;
  }
  1.5% {
    opacity: 0.55;
  }
  2.2% {
    opacity: 0.05;
  }
  3.4% {
    opacity: 0.4;
  }
  4% {
    opacity: 0;
  }
  46% {
    opacity: 0;
  }
  46.6% {
    opacity: 0.3;
  }
  47.1% {
    opacity: 0;
  }
}
/* fog: three blurred, softly drifting bands hugging the horizon - decorative fixed-speed CSS
   drift (cloudDrift precedent), NOT tied to --road-phase: fog hangs in the air, it does not
   scroll with the ground. Always mounted + opacity-crossfaded like every other sky effect. */
.fog-bands {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 60px;
  height: 45%;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 2s ease;
}

.fog-band {
  position: absolute;
  left: -10%;
  width: 120%;
  border-radius: 50%;
  filter: blur(6px);
  background: rgba(255, 255, 255, 0.4);
}

.fog-band-1 {
  top: 10%;
  height: 26px;
  opacity: 0.4;
  animation: fogDrift 26s ease-in-out infinite alternate;
}

.fog-band-2 {
  top: 45%;
  height: 34px;
  opacity: 0.5;
  animation: fogDrift 34s ease-in-out infinite alternate-reverse;
}

.fog-band-3 {
  top: 75%;
  height: 22px;
  opacity: 0.35;
  animation: fogDrift 44s ease-in-out infinite alternate;
}

@keyframes fogDrift {
  from {
    transform: translateX(-6%);
  }
  to {
    transform: translateX(6%);
  }
}
/* Rainbow: a soft spectrum ring whose 2:1 box and bottom-centered radial gradient already draw
   exactly the upper half of a circle - no clipping mask is needed (a former 50% mask cut the
   arc horizontally halfway down). Appears when the sky just cleared from rain/storm into
   something sunny (see lib/sky_transitions.mjs), always mounted and opacity-crossfaded like
   every other sky effect. z-index:0 keeps it behind hills and roadside scenery.
   FIXED-PX bottom (matching the grass/hills baseline, not a % of the whole scene) so the two
   legs of the arc actually reach the ground instead of floating mid-sky - owner report. */
.rainbow-arc {
  position: absolute;
  left: 2%;
  bottom: 88px;
  width: 56%;
  aspect-ratio: 2/1;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2.5s ease;
  background: radial-gradient(circle at 50% 100%, transparent 52%, rgba(255, 90, 90, 0.35) 54%, rgba(255, 184, 77, 0.35) 57%, rgba(245, 200, 76, 0.32) 60%, rgba(78, 203, 113, 0.3) 63%, rgba(90, 140, 255, 0.3) 66%, rgba(150, 90, 220, 0.28) 68%, transparent 70%);
}

/* Starfield: two static dot tiles (base + a DIFFERENT dot subset that twinkles) plus one
   shooting star, all zero-JS. Opacity-crossfaded like every other sky effect, so it stays in
   sync with the night sky and reacts instantly to a simulator-forced night. */
.starfield {
  position: absolute;
  inset: 0 0 40% 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 2s ease;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 160'%3E%3Ccircle cx='14' cy='20' r='1' fill='%23fff'/%3E%3Ccircle cx='46' cy='54' r='1.2' fill='%23fff' opacity='.8'/%3E%3Ccircle cx='80' cy='12' r='.8' fill='%23fff' opacity='.7'/%3E%3Ccircle cx='112' cy='40' r='1' fill='%23fff'/%3E%3Ccircle cx='150' cy='22' r='1.3' fill='%23fff' opacity='.85'/%3E%3Ccircle cx='190' cy='60' r='.9' fill='%23fff' opacity='.65'/%3E%3Ccircle cx='30' cy='90' r='.9' fill='%23fff' opacity='.7'/%3E%3Ccircle cx='96' cy='84' r='1.1' fill='%23fff' opacity='.75'/%3E%3Ccircle cx='168' cy='96' r='1' fill='%23fff' opacity='.8'/%3E%3Ccircle cx='206' cy='110' r='.8' fill='%23fff' opacity='.6'/%3E%3C/svg%3E") repeat;
  background-size: 220px 160px;
}

.starfield-twinkle {
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 160'%3E%3Ccircle cx='60' cy='30' r='1.1' fill='%23fff'/%3E%3Ccircle cx='128' cy='16' r='.9' fill='%23fff'/%3E%3Ccircle cx='4' cy='60' r='1' fill='%23fff'/%3E%3Ccircle cx='176' cy='44' r='1.2' fill='%23fff'/%3E%3Ccircle cx='62' cy='100' r='.8' fill='%23fff'/%3E%3Ccircle cx='140' cy='70' r='1' fill='%23fff'/%3E%3Ccircle cx='20' cy='120' r='1.1' fill='%23fff'/%3E%3Ccircle cx='200' cy='130' r='.9' fill='%23fff'/%3E%3C/svg%3E") repeat;
  background-size: 220px 160px;
  animation: starTwinkle 4.5s ease-in-out infinite alternate;
}

@keyframes starTwinkle {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}
.shooting-star {
  position: absolute;
  top: 8%;
  left: -4%;
  width: 44px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), transparent);
  animation: shootingStar 27s linear infinite;
}

@keyframes shootingStar {
  0%, 92% {
    opacity: 0;
    transform: translate(0, 0) rotate(28deg);
  }
  92.5% {
    opacity: 1;
  }
  96% {
    opacity: 0;
    transform: translate(140vw, 66vh) rotate(28deg);
  }
  100% {
    opacity: 0;
  }
}
/* Słońce/księżyc: pozycja (left/top) ORAZ rozmiar liczone w JS z łuku pół-elipsy i ZMIERZONEJ
   wysokości widocznego nieba (scena − jezdnia) - skalują się z każdym ekranem. transform centruje. */
/* Explicit z-index:0 (was implicit "auto") so the sun/moon is GUARANTEED to sit behind every
   parallax layer with z-index:1 or higher (hills-farthest, hills-far/mid, roadside scenery) -
   verified this already occludes correctly at low sun/moon positions overlapping the mountain
   band, but leaving it on "auto" left the ordering to a subtler CSS rule (positioned descendant
   with z-index:auto ranks with the "0" group, painted in document order) that's easy to
   accidentally break by reordering the JSX. Explicit z-index:0 makes the invariant self-evident. */
.celestial {
  position: absolute;
  z-index: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 1s;
}

.sun-el {
  background: radial-gradient(circle, #ffe19a, #ffb84d 70%);
  box-shadow: 0 0 44px 12px rgba(255, 184, 77, 0.4);
}

/* summer: rotating rays around the sun disc - decorative FIXED-speed rotation, independent of
   road speed (same rationale as cloudDrift); ring shape cut out of a conic fan by a mask */
.sun-el::after {
  content: "";
  position: absolute;
  inset: -45%;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 2s ease;
  pointer-events: none;
  background: repeating-conic-gradient(rgba(255, 200, 90, 0.35) 0 8deg, transparent 8deg 30deg);
  -webkit-mask-image: radial-gradient(circle, transparent 38%, #000 45%, transparent 72%);
  mask-image: radial-gradient(circle, transparent 38%, #000 45%, transparent 72%);
  animation: sunRays 26s linear infinite;
}

.season-summer .sun-el::after {
  opacity: 1;
}

@keyframes sunRays {
  to {
    transform: rotate(360deg);
  }
}
.moon-el {
  background: radial-gradient(circle, #f0f0ff, #c8c8e0 70%);
  box-shadow: 0 0 30px 6px rgba(200, 200, 255, 0.3);
}

/* chmury-cumulusy (symbol i-cloud): dryf + płynne ściemnianie (deszcz/noc) i płynne
   pojawianie ławicy zachmurzenia (opacity z inline style) */
.cloud-svg {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  transition: opacity 2.2s ease, filter 2.2s ease;
  animation: cloudDrift linear infinite;
} /* chmury dryfują ZAWSZE - pauza auta nie zatrzymuje pogody */
.cloud-svg.cloud-dark {
  filter: brightness(0.55) saturate(0.55);
}

.cloud-svg.cloud-night {
  filter: brightness(0.72) saturate(0.8);
}

/* Far clouds: a third depth tier, LOW enough in the sky to actually pass behind the mountain
   band - z-index BELOW .hills-farthest's (1), so it wins regardless of DOM order; muted
   opacity + a touch of blur reads as atmospheric distance, same idea as the hazy lightest-color
   trick used for the farthest hills themselves. */
.cloud-svg.cloud-far {
  z-index: 0;
  opacity: 0.55;
  filter: blur(0.5px);
}

.cloud-svg.cloud-far.cloud-dark {
  filter: blur(0.5px) brightness(0.5) saturate(0.5);
}

.cloud-svg.cloud-far.cloud-night {
  filter: blur(0.5px) brightness(0.65) saturate(0.75);
}

/* deszcz: prawdziwe krople (osobne elementy .drop) spadające pionowo */
.rain {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 4;
}

.drop {
  position: absolute;
  top: -14%;
  width: 2.5px;
  height: 18px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(180deg, rgba(226, 238, 252, 0.15), rgba(226, 238, 252, 0.95));
  box-shadow: 0 0 2px rgba(226, 238, 252, 0.5);
  animation-name: rainDrop;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes rainDrop {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  100% {
    transform: translateY(120vh);
    opacity: 0;
  }
}
.road-stage-full .drop {
  height: 26px;
  width: 3px;
}

/* winter: the same particle slots fall as snowflakes (round, slower, gentle horizontal sway) */
.drop.flake {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  top: -6%;
  background: rgba(240, 246, 255, 0.95);
  box-shadow: 0 0 3px rgba(255, 255, 255, 0.6);
  animation-name: snowFall;
  animation-timing-function: ease-in-out;
}

@keyframes snowFall {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    transform: translate(9px, 60vh);
  }
  92% {
    opacity: 1;
  }
  100% {
    transform: translate(-4px, 120vh);
    opacity: 0;
  }
}
.road-stage-full .drop.flake {
  width: 7px;
  height: 7px;
}

.snow-ambient .drop.flake {
  width: 4px;
  height: 4px;
  box-shadow: none;
  background: rgba(240, 246, 255, 0.7);
}

/* autumn: leaves drifting on the wind - small rotated lobes in three warm tones */
.leaves {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 4;
}

.leaf {
  position: absolute;
  top: -8%;
  width: 9px;
  height: 6px;
  border-radius: 60% 40% 55% 45%;
  animation-name: leafFall;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.leaf-0 {
  background: #e07b39;
}

.leaf-1 {
  background: #c65f2e;
}

.leaf-2 {
  background: #d98e2b;
}

@keyframes leafFall {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  30% {
    transform: translate(-22px, 32vh) rotate(120deg);
  }
  60% {
    transform: translate(18px, 68vh) rotate(240deg);
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translate(-12px, 118vh) rotate(340deg);
    opacity: 0;
  }
}
.road-stage-full .leaf {
  width: 11px;
  height: 7px;
}

/* Autumn gusts: same leaf spans, a DIFFERENT long-period keyframe that stays put ~85% of the
   time then bursts into a fast horizontal sweep - reads as an occasional gust of wind, no JS
   timer needed. Placed lower (top:30%) so the burst crosses mid-scene, not the sky. */
.leaf.gust {
  top: 30%;
  animation-name: leafGust;
  animation-duration: 13s;
  animation-timing-function: ease-in;
}

@keyframes leafGust {
  0%, 84% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0;
  }
  86% {
    opacity: 1;
  }
  92% {
    transform: translate(-70vw, 18px) rotate(200deg);
  }
  100% {
    transform: translate(-120vw, 40px) rotate(340deg);
    opacity: 0;
  }
}
/* Bird flocks: occasional daytime silhouettes crossing the sky, same long-drift idea as
   cloudDrift (whole sky width, resets off-screen so it never "pops"), PLUS a wing flap. A real
   wingbeat (~0.3-0.5s) and the 38s cross-sky drift are wildly different frequencies, and two
   CSS animations on the SAME element/property don't compose (the later one simply overrides
   the transform at every frame) - so drift lives on this OUTER wrapper (translateX) and the
   flap lives on the INNER icon (scaleY), which combine naturally since nested elements' own
   transforms don't conflict with their ancestor's. */
.bird-flock {
  position: absolute;
  inset: 0 0 55% 0;
  z-index: 1;
  pointer-events: none;
  transition: opacity 2s ease;
}

.flock-bird-wrap {
  position: absolute;
  left: 0;
  width: 18px;
  height: 9px;
  animation: flockDrift 38s linear infinite;
}

.flock-bird {
  display: block;
  width: 100%;
  height: 100%;
  color: #2b2f36;
  animation: birdFlap 0.38s ease-in-out infinite alternate;
}

@keyframes flockDrift {
  from {
    transform: translateX(-10vw);
  }
  to {
    transform: translateX(110vw);
  }
}
@keyframes birdFlap {
  from {
    transform: scaleY(1);
  }
  to {
    transform: scaleY(0.45);
  }
}
/* Fireflies (summer nights only): a handful of glowing dots wandering just above the grass. */
.fireflies {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 88px;
  height: 60px;
  z-index: 3;
  pointer-events: none;
}

.firefly {
  position: absolute;
  bottom: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #e8ff8a;
  box-shadow: 0 0 6px 2px rgba(232, 255, 138, 0.85);
  animation-name: fireflyWander;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes fireflyWander {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  15% {
    opacity: 0.9;
  }
  35% {
    transform: translate(18px, -22px);
    opacity: 0.3;
  }
  55% {
    transform: translate(-14px, -40px);
    opacity: 0.9;
  }
  75% {
    transform: translate(10px, -16px);
    opacity: 0.4;
  }
  100% {
    transform: translate(-6px, -4px);
    opacity: 0;
  }
}
/* Parallax hills behind the grass: monochrome ridge silhouettes used as MASKS, painted via
   background-color (a plain color crossfades smoothly -> free season/night tinting without
   per-variant tiles). Scrolled by the slower --road-phase-far/--road-phase-mid vars from the
   rAF loop; each mask tile width EQUALS its layer's phase cycle (480/528px - divisor
   invariant, see motion_speed.mjs), so the wrap is exactly one pattern period. The tile seams
   sit in ridge valleys, so the repeat reads as natural terrain. */
.parallax-hills {
  position: absolute;
  left: -10%;
  width: 120%;
  z-index: 1;
  pointer-events: none;
  transition: background-color 2s ease, filter 2.2s ease;
}

.cinematic-atmosphere {
  position: absolute;
  left: -12%;
  width: 124%;
  bottom: var(--road-edge);
  pointer-events: none;
  transition: filter 2.2s ease, opacity 2s ease;
}

.atmosphere-far {
  z-index: 0;
  height: 180px;
  opacity: 0.32;
  background: linear-gradient(180deg, transparent 5%, rgba(229, 239, 236, 0.09) 42%, rgba(235, 241, 232, 0.42) 100%);
  transform: translateX(var(--haze-far-shift, 0px));
  animation: atmosphereBreathe 11s ease-in-out infinite alternate;
}

.atmosphere-mid {
  z-index: 1;
  height: 112px;
  opacity: 0.25;
  background: linear-gradient(180deg, transparent, rgba(215, 231, 219, 0.32));
  transform: translateX(var(--haze-mid-shift, 0px));
  animation: atmosphereBreathe 8s -3s ease-in-out infinite alternate;
}

.atmosphere-near {
  z-index: 1;
  height: 64px;
  opacity: 0.14;
  background: linear-gradient(180deg, transparent, rgba(238, 242, 224, 0.28));
  transform: translateX(var(--haze-near-shift, 0px));
}

.road-stage.weather-fog .cinematic-atmosphere {
  opacity: 0.62;
  filter: saturate(0.62);
}

.road-stage.weather-rain .cinematic-atmosphere, .road-stage.weather-storm .cinematic-atmosphere {
  opacity: 0.38;
  filter: saturate(0.7) hue-rotate(8deg);
}

.road-stage.weather-night .cinematic-atmosphere {
  opacity: 0.2;
  filter: hue-rotate(28deg) brightness(0.58);
}

@keyframes atmosphereBreathe {
  to {
    opacity: 0.42;
    filter: brightness(1.06);
  }
}
/* A broad world-space light volume moves from the accumulated road phase. It illuminates the
   environment as one surface; collectibles do not receive an independent parallax transform. */
.cinematic-light-field {
  position: absolute;
  z-index: 3;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: var(--cinematic-light-opacity, 0.08);
  mix-blend-mode: screen;
}

.cinematic-light-field::before {
  content: "";
  position: absolute;
  top: -28%;
  left: 50%;
  width: 240px;
  height: 150%;
  background: linear-gradient(102deg, transparent 18%, rgba(255, 246, 190, 0.04) 37%, rgba(255, 251, 222, 0.34) 50%, rgba(255, 226, 151, 0.08) 62%, transparent 80%);
  filter: blur(7px);
  transform: translateX(var(--cinematic-light-x, 0px)) skewX(-13deg);
}

.cinematic-light-field i {
  position: absolute;
  top: 7%;
  left: 50%;
  width: 4px;
  height: 52%;
  border-radius: 50%;
  background: linear-gradient(rgba(255, 255, 255, 0.55), transparent);
  filter: blur(2px);
  transform: translateX(calc(var(--cinematic-light-x, 0px) + 52px)) rotate(13deg);
}

.cinematic-light-field i:last-child {
  height: 38%;
  opacity: 0.55;
  transform: translateX(calc(var(--cinematic-light-x, 0px) - 46px)) rotate(9deg);
}

.light-night, .light-storm, .light-overcast {
  opacity: 0.025;
}

.light-sunrise, .light-sunset {
  opacity: 0.3;
  filter: sepia(0.34) saturate(1.35);
}

.light-rain, .light-cloudy {
  opacity: 0.09;
}

/* One gust travels through depth: air streak, distant tree crowns, bushes, then a bright bend
   through the foreground grass. The delays make it spatial rather than a synchronized wobble. */
.cinematic-wind-stream {
  position: absolute;
  z-index: 2;
  left: -20%;
  right: -20%;
  bottom: calc(var(--road-edge) + 26px);
  height: 80px;
  pointer-events: none;
  overflow: hidden;
}

.cinematic-wind-stream i {
  position: absolute;
  left: -28%;
  top: var(--gust-y, 35%);
  width: 24%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(235, 247, 236, 0.46), transparent);
  opacity: 0;
  transform: skewX(-22deg);
  animation: cinematicWindStreak 13s ease-in-out infinite;
}

.cinematic-wind-stream i:nth-child(2) {
  --gust-y:52%;
  animation-delay: 0.14s;
  width: 18%;
}

.cinematic-wind-stream i:nth-child(3) {
  --gust-y:68%;
  animation-delay: 0.28s;
  width: 21%;
}

.cinematic-wind-stream i:nth-child(4) {
  --gust-y:26%;
  animation-delay: 0.4s;
  width: 14%;
}

.trees-tile {
  transform-origin: bottom;
  animation: cinematicTreeGust 13s 0.12s ease-in-out infinite;
}

.foreground-tile {
  transform-origin: bottom;
  animation: cinematicBushGust 13s 0.38s ease-in-out infinite;
}

.grass-gust {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform-origin: bottom;
  background: linear-gradient(95deg, transparent 18%, rgba(209, 242, 174, 0.11) 42%, transparent 66%);
  background-size: 220% 100%;
  animation: cinematicGrassGust 13s 0.62s ease-in-out infinite;
  pointer-events: none;
}

@keyframes cinematicWindStreak {
  0%, 67%, 100% {
    left: -28%;
    opacity: 0;
  }
  70% {
    opacity: 0.75;
  }
  78% {
    left: 108%;
    opacity: 0.48;
  }
  81% {
    opacity: 0;
  }
}
@keyframes cinematicTreeGust {
  0%, 67%, 84%, 100% {
    transform: skewX(0);
  }
  72% {
    transform: skewX(-4deg);
  }
  77% {
    transform: skewX(2deg);
  }
}
@keyframes cinematicBushGust {
  0%, 69%, 85%, 100% {
    transform: skewX(0);
  }
  74% {
    transform: skewX(-6deg) scaleX(1.02);
  }
  79% {
    transform: skewX(2.5deg);
  }
}
@keyframes cinematicGrassGust {
  0%, 70%, 86%, 100% {
    opacity: 0;
    background-position: 120% 0;
    transform: skewX(0);
  }
  75% {
    opacity: 0.32;
    transform: skewX(-8deg);
  }
  82% {
    opacity: 0.12;
    background-position: -120% 0;
    transform: skewX(3deg);
  }
}
/* OPAQUE on purpose: the haze is baked into LIGHTER far colors instead of opacity - a
   translucent ridge let the sun/moon glow bleed through the terrain (owner report), and an
   opaque one gives the natural "sun sets behind the hills" occlusion for free. */
.hills-far {
  bottom: 88px;
  height: 70px;
  background-color: var(--hills-far-color, #6b9273);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 70' preserveAspectRatio='none'%3E%3Cpath d='M0 70 V48 Q60 22 130 34 Q200 44 270 26 Q330 12 390 30 Q440 42 480 48 V70 Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 70' preserveAspectRatio='none'%3E%3Cpath d='M0 70 V48 Q60 22 130 34 Q200 44 270 26 Q330 12 390 30 Q440 42 480 48 V70 Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: 480px 100%;
  mask-size: 480px 100%;
  -webkit-mask-position: calc(var(--road-phase-far, 0px) + var(--scenery-shift, 0px)) bottom;
  mask-position: calc(var(--road-phase-far, 0px) + var(--scenery-shift, 0px)) bottom;
}

.hills-mid {
  bottom: 88px;
  height: 46px;
  background-color: var(--hills-mid-color, #3a6e30);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 528 46' preserveAspectRatio='none'%3E%3Cpath d='M0 46 V32 Q80 12 160 24 Q240 34 320 16 Q400 4 470 26 Q505 36 528 32 V46 Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 528 46' preserveAspectRatio='none'%3E%3Cpath d='M0 46 V32 Q80 12 160 24 Q240 34 320 16 Q400 4 470 26 Q505 36 528 32 V46 Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: 528px 100%;
  mask-size: 528px 100%;
  -webkit-mask-position: calc(var(--road-phase-mid, 0px) + var(--scenery-shift, 0px)) bottom;
  mask-position: calc(var(--road-phase-mid, 0px) + var(--scenery-shift, 0px)) bottom;
}

/* Farthest layer: a barely-drifting jagged mountain skyline, painted in the LIGHTEST per-season
   color (haze by color, same opaque technique as the two ridges above) so it reads as
   background depth. Own phase var/cycle (640px = its mask tile width). */
.hills-farthest {
  bottom: 88px;
  height: 92px;
  background-color: var(--hills-farthest-color, #b9cbc0);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 92' preserveAspectRatio='none'%3E%3Cpath d='M0 92 L0 70 L80 20 L160 55 L240 15 L320 58 L400 25 L480 50 L560 18 L640 65 L640 92 Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 92' preserveAspectRatio='none'%3E%3Cpath d='M0 92 L0 70 L80 20 L160 55 L240 15 L320 58 L400 25 L480 50 L560 18 L640 65 L640 92 Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: 640px 100%;
  mask-size: 640px 100%;
  -webkit-mask-position: calc(var(--road-phase-farthest, 0px) + var(--scenery-shift, 0px)) bottom;
  mask-position: calc(var(--road-phase-farthest, 0px) + var(--scenery-shift, 0px)) bottom;
}

/* Winter snow caps: masks paint a single flat color, so a two-tone peak needs a SEPARATE thin
   layer riding the SAME phase var - a small triangular mask right at each peak tip, shown only
   in winter (opacity crossfade, matching every other seasonal reveal in this file). */
.hills-caps {
  bottom: 88px;
  height: 92px;
  background-color: #f6fafc;
  opacity: 0;
  transition: opacity 2s ease, filter 2.2s ease;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 92' preserveAspectRatio='none'%3E%3Cpath d='M58 38 L80 20 L102 38 Z M218 33 L240 15 L262 33 Z M378 43 L400 25 L422 43 Z M538 36 L560 18 L582 36 Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 92' preserveAspectRatio='none'%3E%3Cpath d='M58 38 L80 20 L102 38 Z M218 33 L240 15 L262 33 Z M378 43 L400 25 L422 43 Z M538 36 L560 18 L582 36 Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: 640px 100%;
  mask-size: 640px 100%;
  -webkit-mask-position: calc(var(--road-phase-farthest, 0px) + var(--scenery-shift, 0px)) bottom;
  mask-position: calc(var(--road-phase-farthest, 0px) + var(--scenery-shift, 0px)) bottom;
}

.road-stage.season-winter .hills-caps {
  opacity: 1;
}

/* Landmarks: a SPARSE plain of silhouettes (windmill / water tower / church spire) standing on
   the far plain - same rate as .hills-far but its OWN phase var/cycle (1440px), because that
   width does not divide 480 (see LANDMARKS_PHASE_CYCLE_PX in motion_speed.mjs). A neutral
   desaturated palette (background-image can't read the season CSS vars, so no per-season
   recolor) but TWO tones per building (dark body + a lighter highlight face/roof) for a bit of
   dimension; sceneryTone's filter still tints the whole layer at night/rain/golden-hour like
   every other layer. FULLY OPAQUE (was opacity:.85, which read as flimsy/washed-out against
   the hills - owner report) - solid buildings, not ghosts. */
.roadside-landmarks {
  position: absolute;
  left: -10%;
  width: 120%;
  bottom: 88px;
  height: 78px;
  z-index: 1;
  pointer-events: none;
  transition: filter 2.2s ease;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 78'%3E%3Cpath d='M204 78 L206 24 L214 24 L216 78 Z' fill='%233d4640'/%3E%3Cpath d='M204 24 Q210 15 216 24 Z' fill='%232e3530'/%3E%3Cpath d='M210 20 L197 7 L204 5 Z' fill='%236b7570'/%3E%3Cpath d='M210 20 L223 7 L216 5 Z' fill='%233d4640'/%3E%3Cpath d='M210 20 L197 33 L204 35 Z' fill='%233d4640'/%3E%3Cpath d='M210 20 L223 33 L216 35 Z' fill='%236b7570'/%3E%3Ccircle cx='210' cy='20' r='5' fill='%232e3530'/%3E%3Cpath d='M736 16 L760 3 L784 16 Z' fill='%233d4640'/%3E%3Ccircle cx='760' cy='4' r='2.4' fill='%232e3530'/%3E%3Cellipse cx='760' cy='31' rx='24' ry='15' fill='%233d4640'/%3E%3Cellipse cx='752' cy='25' rx='11' ry='7' fill='%236b7570' opacity='.55'/%3E%3Cpath d='M743 44 L736 78 M777 44 L784 78 M750 45 L746 78 M770 45 L774 78 M744 60 L776 60' stroke='%233d4640' stroke-width='3' stroke-linecap='round'/%3E%3Crect x='1166' y='50' width='28' height='30' fill='%233d4640'/%3E%3Crect x='1176' y='60' width='8' height='14' rx='3' fill='%236b7570' opacity='.6'/%3E%3Cpath d='M1166 50 L1180 12 L1194 50 Z' fill='%233d4640'/%3E%3Cpath d='M1180 12 L1194 50 L1187 50 L1180 22 Z' fill='%236b7570' opacity='.5'/%3E%3Cpath d='M1180 12 L1180 2 M1174 6 L1186 6' stroke='%232e3530' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") calc(var(--road-phase-landmarks, 0px) + var(--scenery-shift, 0px)) bottom repeat-x;
  background-size: 1440px 100%;
}

/* ground scenery tone under rain/night - mirrors .cloud-dark/.cloud-night */
.scenery-dark {
  filter: brightness(0.6) saturate(0.6);
}

.scenery-night {
  filter: brightness(0.55) saturate(0.8);
}

/* golden hour: a warm sunrise/sunset tint on the same filter transition every scenery layer
   already has (grass/trees/hills), lowest-precedence tone - see sceneryTone in TripProgress.jsx */
.scenery-golden {
  filter: sepia(0.28) saturate(1.2) brightness(1.04) hue-rotate(-8deg);
}

/* Season palette for the parallax hills - background-color crossfades over the layers'
   2s transition when the season-* class on .road-stage changes. */
.road-stage.season-spring {
  --hills-far-color:#79ad80;
  --hills-mid-color:#468a4b;
  --hills-farthest-color:#b9cfc0;
}

.road-stage.season-summer {
  --hills-far-color:#6b9273;
  --hills-mid-color:#3a6e30;
  --hills-farthest-color:#b9cbc0;
}

.road-stage.season-autumn {
  --hills-far-color:#bd8a55;
  --hills-mid-color:#8a5a2b;
  --hills-farthest-color:#d4c2a8;
}

.road-stage.season-winter {
  --hills-far-color:#d8e2ea;
  --hills-mid-color:#b3c4d1;
  --hills-farthest-color:#e8eef4;
}

/* Roadside trees: a SPARSE background tile sharing --road-phase, so they scroll in lockstep
   with grass/posts. Tile period 1056px = the full phase cycle (divisor invariant), one tile =
   2 trees at asymmetric x (~180 and ~700) so the rhythm reads "occasional", not metronomic.
   Grass is a later sibling at the same z-index, so it overlaps the trunk bases (planted look).
   SIZING: the tile is 1056px wide at every breakpoint (background-size), so the only way to make
   a tree taller is to draw it bigger inside a taller viewBox - the height below just gives the
   drawing room. viewBox is '0 -150 1056 214' (ground line y=64, crowns reach ~-131) and the SVGs
   carry preserveAspectRatio='xMidYMax': uniform scale (no squashing) ANCHORED TO THE BOTTOM, so a
   box shorter or taller than the 214 aspect height shrinks the trees or leaves sky above them -
   it never lifts them off the ground line the way the default xMidYMid centering would. */
.roadside-trees {
  position: absolute;
  left: -10%;
  width: 120%;
  bottom: 88px;
  height: 182px;
  z-index: 2;
  pointer-events: none;
  transition: filter 2.2s ease;
}

@keyframes treeScroll {
  to {
    background-position: -1056px bottom;
  }
}
/* Season variants: ALL FOUR are always-mounted tile overlays crossfaded by inline opacity
   (the .sky-layer pattern). Unlike grass, the base class carries NO summer background - a
   bare-branch winter overlay could not cover a canopy painted underneath. Same trunks,
   different crowns: spring = light green + blossoms, summer = deep green, autumn =
   orange/red, winter = bare branches. */
.trees-tile {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 2s ease;
  background-repeat: repeat-x;
  background-size: 1056px 100%;
  background-position: calc(var(--road-phase, 0px) + var(--scenery-shift, 0px)) bottom;
}

.trees-summer {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%20-150%201056%20214'%20preserveAspectRatio%3D'xMidYMax'%3E%3Cg%20transform%3D'translate(180%2064)%20scale(1.7)%20translate(-180%20-64)'%3E%3Cellipse%20cx%3D'180'%20cy%3D'63'%20rx%3D'34'%20ry%3D'4'%20fill%3D'%23000000'%20opacity%3D'0.13'%2F%3E%3Cpath%20d%3D'M173.0%2064.0%20C174.0%2042.0%20176.0%2032.0%20177.0%2022.0%20L183.0%2022.0%20C184.0%2032.0%20186.0%2042.0%20187.0%2064.0%20Z'%20fill%3D'%235b3d26'%2F%3E%3Cpath%20d%3D'M175.5%2062.0%20C176.5%2042.0%20177.5%2032.0%20178.5%2023.0%20L179.5%2023.0%20C178.5%2033.0%20177.5%2044.0%20176.5%2062.0%20Z'%20fill%3D'%237a5636'%2F%3E%3Cpath%20d%3D'M180.0%2030.0%20L167.0%206.0%20M180.0%2026.0%20L180.0%20-4.0%20M180.0%2030.0%20L194.0%204.0'%20stroke%3D'%235b3d26'%20stroke-width%3D'2.6'%20stroke-linecap%3D'round'%20fill%3D'none'%2F%3E%3Ccircle%20cx%3D'154.0'%20cy%3D'-2.0'%20r%3D'21.0'%20fill%3D'%231f6b33'%2F%3E%3Ccircle%20cx%3D'206.0'%20cy%3D'-2.0'%20r%3D'21.0'%20fill%3D'%231f6b33'%2F%3E%3Ccircle%20cx%3D'150.0'%20cy%3D'-13.0'%20r%3D'16.0'%20fill%3D'%231f6b33'%2F%3E%3Ccircle%20cx%3D'211.0'%20cy%3D'-13.0'%20r%3D'16.0'%20fill%3D'%231f6b33'%2F%3E%3Ccircle%20cx%3D'167.0'%20cy%3D'-20.0'%20r%3D'23.0'%20fill%3D'%231f6b33'%2F%3E%3Ccircle%20cx%3D'193.0'%20cy%3D'-20.0'%20r%3D'23.0'%20fill%3D'%231f6b33'%2F%3E%3Ccircle%20cx%3D'180.0'%20cy%3D'-2.0'%20r%3D'25.0'%20fill%3D'%231f6b33'%2F%3E%3Ccircle%20cx%3D'180.0'%20cy%3D'-32.0'%20r%3D'19.0'%20fill%3D'%231f6b33'%2F%3E%3Ccircle%20cx%3D'163.0'%20cy%3D'-31.0'%20r%3D'14.0'%20fill%3D'%231f6b33'%2F%3E%3Ccircle%20cx%3D'197.0'%20cy%3D'-31.0'%20r%3D'14.0'%20fill%3D'%231f6b33'%2F%3E%3Ccircle%20cx%3D'156.0'%20cy%3D'-24.0'%20r%3D'13.0'%20fill%3D'%231f6b33'%2F%3E%3Ccircle%20cx%3D'204.0'%20cy%3D'-24.0'%20r%3D'13.0'%20fill%3D'%231f6b33'%2F%3E%3Ccircle%20cx%3D'162.0'%20cy%3D'-8.0'%20r%3D'15.0'%20fill%3D'%232e8b42'%2F%3E%3Ccircle%20cx%3D'195.0'%20cy%3D'-10.0'%20r%3D'15.0'%20fill%3D'%232e8b42'%2F%3E%3Ccircle%20cx%3D'178.0'%20cy%3D'-26.0'%20r%3D'16.0'%20fill%3D'%232e8b42'%2F%3E%3Ccircle%20cx%3D'201.0'%20cy%3D'0.0'%20r%3D'11.0'%20fill%3D'%232e8b42'%2F%3E%3Ccircle%20cx%3D'156.0'%20cy%3D'0.0'%20r%3D'11.0'%20fill%3D'%232e8b42'%2F%3E%3Ccircle%20cx%3D'185.0'%20cy%3D'-14.0'%20r%3D'13.0'%20fill%3D'%232e8b42'%2F%3E%3Ccircle%20cx%3D'170.0'%20cy%3D'-4.0'%20r%3D'12.0'%20fill%3D'%232e8b42'%2F%3E%3Ccircle%20cx%3D'192.0'%20cy%3D'-30.0'%20r%3D'10.0'%20fill%3D'%232e8b42'%2F%3E%3Ccircle%20cx%3D'162.0'%20cy%3D'-24.0'%20r%3D'11.0'%20fill%3D'%2354b25c'%2F%3E%3Ccircle%20cx%3D'175.0'%20cy%3D'-33.0'%20r%3D'9.0'%20fill%3D'%2354b25c'%2F%3E%3Ccircle%20cx%3D'153.0'%20cy%3D'-12.0'%20r%3D'8.0'%20fill%3D'%2354b25c'%2F%3E%3Ccircle%20cx%3D'183.0'%20cy%3D'-22.0'%20r%3D'9.0'%20fill%3D'%2354b25c'%2F%3E%3Ccircle%20cx%3D'168.0'%20cy%3D'-16.0'%20r%3D'7.0'%20fill%3D'%2354b25c'%2F%3E%3Ccircle%20cx%3D'160.0'%20cy%3D'-30.0'%20r%3D'4.0'%20fill%3D'%2354b25c'%2F%3E%3Ccircle%20cx%3D'164.0'%20cy%3D'-26.0'%20r%3D'2.2'%20fill%3D'%237cc884'%2F%3E%3Ccircle%20cx%3D'188.0'%20cy%3D'-20.0'%20r%3D'2.0'%20fill%3D'%237cc884'%2F%3E%3C%2Fg%3E%3Cg%20transform%3D'translate(700%2064)%20scale(1.7)%20translate(-700%20-64)'%3E%3Cellipse%20cx%3D'700'%20cy%3D'63'%20rx%3D'31'%20ry%3D'4'%20fill%3D'%23000000'%20opacity%3D'0.13'%2F%3E%3Cpath%20d%3D'M693.7%2064.0%20C694.6%2044.2%20696.4%2035.2%20697.3%2026.2%20L702.7%2026.2%20C703.6%2035.2%20705.4%2044.2%20706.3%2064.0%20Z'%20fill%3D'%235b3d26'%2F%3E%3Cpath%20d%3D'M696.0%2062.2%20C696.9%2044.2%20697.8%2035.2%20698.6%2027.1%20L699.5%2027.1%20C698.6%2036.1%20697.8%2046.0%20696.9%2062.2%20Z'%20fill%3D'%237a5636'%2F%3E%3Cpath%20d%3D'M700.0%2033.4%20L688.3%2011.8%20M700.0%2029.8%20L700.0%202.8%20M700.0%2033.4%20L712.6%2010.0'%20stroke%3D'%235b3d26'%20stroke-width%3D'2.3'%20stroke-linecap%3D'round'%20fill%3D'none'%2F%3E%3Ccircle%20cx%3D'676.6'%20cy%3D'4.6'%20r%3D'18.9'%20fill%3D'%231f6b33'%2F%3E%3Ccircle%20cx%3D'723.4'%20cy%3D'4.6'%20r%3D'18.9'%20fill%3D'%231f6b33'%2F%3E%3Ccircle%20cx%3D'673.0'%20cy%3D'-5.3'%20r%3D'14.4'%20fill%3D'%231f6b33'%2F%3E%3Ccircle%20cx%3D'727.9'%20cy%3D'-5.3'%20r%3D'14.4'%20fill%3D'%231f6b33'%2F%3E%3Ccircle%20cx%3D'688.3'%20cy%3D'-11.6'%20r%3D'20.7'%20fill%3D'%231f6b33'%2F%3E%3Ccircle%20cx%3D'711.7'%20cy%3D'-11.6'%20r%3D'20.7'%20fill%3D'%231f6b33'%2F%3E%3Ccircle%20cx%3D'700.0'%20cy%3D'4.6'%20r%3D'22.5'%20fill%3D'%231f6b33'%2F%3E%3Ccircle%20cx%3D'700.0'%20cy%3D'-22.4'%20r%3D'17.1'%20fill%3D'%231f6b33'%2F%3E%3Ccircle%20cx%3D'684.7'%20cy%3D'-21.5'%20r%3D'12.6'%20fill%3D'%231f6b33'%2F%3E%3Ccircle%20cx%3D'715.3'%20cy%3D'-21.5'%20r%3D'12.6'%20fill%3D'%231f6b33'%2F%3E%3Ccircle%20cx%3D'678.4'%20cy%3D'-15.2'%20r%3D'11.7'%20fill%3D'%231f6b33'%2F%3E%3Ccircle%20cx%3D'721.6'%20cy%3D'-15.2'%20r%3D'11.7'%20fill%3D'%231f6b33'%2F%3E%3Ccircle%20cx%3D'683.8'%20cy%3D'-0.8'%20r%3D'13.5'%20fill%3D'%232e8b42'%2F%3E%3Ccircle%20cx%3D'713.5'%20cy%3D'-2.6'%20r%3D'13.5'%20fill%3D'%232e8b42'%2F%3E%3Ccircle%20cx%3D'698.2'%20cy%3D'-17.0'%20r%3D'14.4'%20fill%3D'%232e8b42'%2F%3E%3Ccircle%20cx%3D'718.9'%20cy%3D'6.4'%20r%3D'9.9'%20fill%3D'%232e8b42'%2F%3E%3Ccircle%20cx%3D'678.4'%20cy%3D'6.4'%20r%3D'9.9'%20fill%3D'%232e8b42'%2F%3E%3Ccircle%20cx%3D'704.5'%20cy%3D'-6.2'%20r%3D'11.7'%20fill%3D'%232e8b42'%2F%3E%3Ccircle%20cx%3D'691.0'%20cy%3D'2.8'%20r%3D'10.8'%20fill%3D'%232e8b42'%2F%3E%3Ccircle%20cx%3D'710.8'%20cy%3D'-20.6'%20r%3D'9.0'%20fill%3D'%232e8b42'%2F%3E%3Ccircle%20cx%3D'683.8'%20cy%3D'-15.2'%20r%3D'9.9'%20fill%3D'%2354b25c'%2F%3E%3Ccircle%20cx%3D'695.5'%20cy%3D'-23.3'%20r%3D'8.1'%20fill%3D'%2354b25c'%2F%3E%3Ccircle%20cx%3D'675.7'%20cy%3D'-4.4'%20r%3D'7.2'%20fill%3D'%2354b25c'%2F%3E%3Ccircle%20cx%3D'702.7'%20cy%3D'-13.4'%20r%3D'8.1'%20fill%3D'%2354b25c'%2F%3E%3Ccircle%20cx%3D'689.2'%20cy%3D'-8.0'%20r%3D'6.3'%20fill%3D'%2354b25c'%2F%3E%3Ccircle%20cx%3D'682.0'%20cy%3D'-20.6'%20r%3D'3.6'%20fill%3D'%2354b25c'%2F%3E%3Ccircle%20cx%3D'685.6'%20cy%3D'-17.0'%20r%3D'2.0'%20fill%3D'%237cc884'%2F%3E%3Ccircle%20cx%3D'707.2'%20cy%3D'-11.6'%20r%3D'1.8'%20fill%3D'%237cc884'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

.trees-spring {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%20-150%201056%20214'%20preserveAspectRatio%3D'xMidYMax'%3E%3Cg%20transform%3D'translate(180%2064)%20scale(1.7)%20translate(-180%20-64)'%3E%3Cellipse%20cx%3D'180'%20cy%3D'63'%20rx%3D'34'%20ry%3D'4'%20fill%3D'%23000000'%20opacity%3D'0.13'%2F%3E%3Cpath%20d%3D'M173.0%2064.0%20C174.0%2042.0%20176.0%2032.0%20177.0%2022.0%20L183.0%2022.0%20C184.0%2032.0%20186.0%2042.0%20187.0%2064.0%20Z'%20fill%3D'%235b3d26'%2F%3E%3Cpath%20d%3D'M175.5%2062.0%20C176.5%2042.0%20177.5%2032.0%20178.5%2023.0%20L179.5%2023.0%20C178.5%2033.0%20177.5%2044.0%20176.5%2062.0%20Z'%20fill%3D'%237a5636'%2F%3E%3Cpath%20d%3D'M180.0%2030.0%20L167.0%206.0%20M180.0%2026.0%20L180.0%20-4.0%20M180.0%2030.0%20L194.0%204.0'%20stroke%3D'%235b3d26'%20stroke-width%3D'2.6'%20stroke-linecap%3D'round'%20fill%3D'none'%2F%3E%3Ccircle%20cx%3D'154.0'%20cy%3D'-2.0'%20r%3D'21.0'%20fill%3D'%234f9a56'%2F%3E%3Ccircle%20cx%3D'206.0'%20cy%3D'-2.0'%20r%3D'21.0'%20fill%3D'%234f9a56'%2F%3E%3Ccircle%20cx%3D'150.0'%20cy%3D'-13.0'%20r%3D'16.0'%20fill%3D'%234f9a56'%2F%3E%3Ccircle%20cx%3D'211.0'%20cy%3D'-13.0'%20r%3D'16.0'%20fill%3D'%234f9a56'%2F%3E%3Ccircle%20cx%3D'167.0'%20cy%3D'-20.0'%20r%3D'23.0'%20fill%3D'%234f9a56'%2F%3E%3Ccircle%20cx%3D'193.0'%20cy%3D'-20.0'%20r%3D'23.0'%20fill%3D'%234f9a56'%2F%3E%3Ccircle%20cx%3D'180.0'%20cy%3D'-2.0'%20r%3D'25.0'%20fill%3D'%234f9a56'%2F%3E%3Ccircle%20cx%3D'180.0'%20cy%3D'-32.0'%20r%3D'19.0'%20fill%3D'%234f9a56'%2F%3E%3Ccircle%20cx%3D'163.0'%20cy%3D'-31.0'%20r%3D'14.0'%20fill%3D'%234f9a56'%2F%3E%3Ccircle%20cx%3D'197.0'%20cy%3D'-31.0'%20r%3D'14.0'%20fill%3D'%234f9a56'%2F%3E%3Ccircle%20cx%3D'156.0'%20cy%3D'-24.0'%20r%3D'13.0'%20fill%3D'%234f9a56'%2F%3E%3Ccircle%20cx%3D'204.0'%20cy%3D'-24.0'%20r%3D'13.0'%20fill%3D'%234f9a56'%2F%3E%3Ccircle%20cx%3D'162.0'%20cy%3D'-8.0'%20r%3D'15.0'%20fill%3D'%236fb972'%2F%3E%3Ccircle%20cx%3D'195.0'%20cy%3D'-10.0'%20r%3D'15.0'%20fill%3D'%236fb972'%2F%3E%3Ccircle%20cx%3D'178.0'%20cy%3D'-26.0'%20r%3D'16.0'%20fill%3D'%236fb972'%2F%3E%3Ccircle%20cx%3D'201.0'%20cy%3D'0.0'%20r%3D'11.0'%20fill%3D'%236fb972'%2F%3E%3Ccircle%20cx%3D'156.0'%20cy%3D'0.0'%20r%3D'11.0'%20fill%3D'%236fb972'%2F%3E%3Ccircle%20cx%3D'185.0'%20cy%3D'-14.0'%20r%3D'13.0'%20fill%3D'%236fb972'%2F%3E%3Ccircle%20cx%3D'170.0'%20cy%3D'-4.0'%20r%3D'12.0'%20fill%3D'%236fb972'%2F%3E%3Ccircle%20cx%3D'192.0'%20cy%3D'-30.0'%20r%3D'10.0'%20fill%3D'%236fb972'%2F%3E%3Ccircle%20cx%3D'162.0'%20cy%3D'-24.0'%20r%3D'11.0'%20fill%3D'%2399d29b'%2F%3E%3Ccircle%20cx%3D'175.0'%20cy%3D'-33.0'%20r%3D'9.0'%20fill%3D'%2399d29b'%2F%3E%3Ccircle%20cx%3D'153.0'%20cy%3D'-12.0'%20r%3D'8.0'%20fill%3D'%2399d29b'%2F%3E%3Ccircle%20cx%3D'183.0'%20cy%3D'-22.0'%20r%3D'9.0'%20fill%3D'%2399d29b'%2F%3E%3Ccircle%20cx%3D'168.0'%20cy%3D'-16.0'%20r%3D'7.0'%20fill%3D'%2399d29b'%2F%3E%3Ccircle%20cx%3D'160.0'%20cy%3D'-30.0'%20r%3D'4.0'%20fill%3D'%2399d29b'%2F%3E%3Ccircle%20cx%3D'160.0'%20cy%3D'-20.0'%20r%3D'2.4'%20fill%3D'%23f8bbd0'%2F%3E%3Ccircle%20cx%3D'174.0'%20cy%3D'-30.0'%20r%3D'2.2'%20fill%3D'%23ffffff'%2F%3E%3Ccircle%20cx%3D'190.0'%20cy%3D'-16.0'%20r%3D'2.2'%20fill%3D'%23f8bbd0'%2F%3E%3Ccircle%20cx%3D'198.0'%20cy%3D'-6.0'%20r%3D'2.0'%20fill%3D'%23fce4ec'%2F%3E%3Ccircle%20cx%3D'156.0'%20cy%3D'-10.0'%20r%3D'2.0'%20fill%3D'%23ffffff'%2F%3E%3C%2Fg%3E%3Cg%20transform%3D'translate(700%2064)%20scale(1.7)%20translate(-700%20-64)'%3E%3Cellipse%20cx%3D'700'%20cy%3D'63'%20rx%3D'31'%20ry%3D'4'%20fill%3D'%23000000'%20opacity%3D'0.13'%2F%3E%3Cpath%20d%3D'M693.7%2064.0%20C694.6%2044.2%20696.4%2035.2%20697.3%2026.2%20L702.7%2026.2%20C703.6%2035.2%20705.4%2044.2%20706.3%2064.0%20Z'%20fill%3D'%235b3d26'%2F%3E%3Cpath%20d%3D'M696.0%2062.2%20C696.9%2044.2%20697.8%2035.2%20698.6%2027.1%20L699.5%2027.1%20C698.6%2036.1%20697.8%2046.0%20696.9%2062.2%20Z'%20fill%3D'%237a5636'%2F%3E%3Cpath%20d%3D'M700.0%2033.4%20L688.3%2011.8%20M700.0%2029.8%20L700.0%202.8%20M700.0%2033.4%20L712.6%2010.0'%20stroke%3D'%235b3d26'%20stroke-width%3D'2.3'%20stroke-linecap%3D'round'%20fill%3D'none'%2F%3E%3Ccircle%20cx%3D'676.6'%20cy%3D'4.6'%20r%3D'18.9'%20fill%3D'%234f9a56'%2F%3E%3Ccircle%20cx%3D'723.4'%20cy%3D'4.6'%20r%3D'18.9'%20fill%3D'%234f9a56'%2F%3E%3Ccircle%20cx%3D'673.0'%20cy%3D'-5.3'%20r%3D'14.4'%20fill%3D'%234f9a56'%2F%3E%3Ccircle%20cx%3D'727.9'%20cy%3D'-5.3'%20r%3D'14.4'%20fill%3D'%234f9a56'%2F%3E%3Ccircle%20cx%3D'688.3'%20cy%3D'-11.6'%20r%3D'20.7'%20fill%3D'%234f9a56'%2F%3E%3Ccircle%20cx%3D'711.7'%20cy%3D'-11.6'%20r%3D'20.7'%20fill%3D'%234f9a56'%2F%3E%3Ccircle%20cx%3D'700.0'%20cy%3D'4.6'%20r%3D'22.5'%20fill%3D'%234f9a56'%2F%3E%3Ccircle%20cx%3D'700.0'%20cy%3D'-22.4'%20r%3D'17.1'%20fill%3D'%234f9a56'%2F%3E%3Ccircle%20cx%3D'684.7'%20cy%3D'-21.5'%20r%3D'12.6'%20fill%3D'%234f9a56'%2F%3E%3Ccircle%20cx%3D'715.3'%20cy%3D'-21.5'%20r%3D'12.6'%20fill%3D'%234f9a56'%2F%3E%3Ccircle%20cx%3D'678.4'%20cy%3D'-15.2'%20r%3D'11.7'%20fill%3D'%234f9a56'%2F%3E%3Ccircle%20cx%3D'721.6'%20cy%3D'-15.2'%20r%3D'11.7'%20fill%3D'%234f9a56'%2F%3E%3Ccircle%20cx%3D'683.8'%20cy%3D'-0.8'%20r%3D'13.5'%20fill%3D'%236fb972'%2F%3E%3Ccircle%20cx%3D'713.5'%20cy%3D'-2.6'%20r%3D'13.5'%20fill%3D'%236fb972'%2F%3E%3Ccircle%20cx%3D'698.2'%20cy%3D'-17.0'%20r%3D'14.4'%20fill%3D'%236fb972'%2F%3E%3Ccircle%20cx%3D'718.9'%20cy%3D'6.4'%20r%3D'9.9'%20fill%3D'%236fb972'%2F%3E%3Ccircle%20cx%3D'678.4'%20cy%3D'6.4'%20r%3D'9.9'%20fill%3D'%236fb972'%2F%3E%3Ccircle%20cx%3D'704.5'%20cy%3D'-6.2'%20r%3D'11.7'%20fill%3D'%236fb972'%2F%3E%3Ccircle%20cx%3D'691.0'%20cy%3D'2.8'%20r%3D'10.8'%20fill%3D'%236fb972'%2F%3E%3Ccircle%20cx%3D'710.8'%20cy%3D'-20.6'%20r%3D'9.0'%20fill%3D'%236fb972'%2F%3E%3Ccircle%20cx%3D'683.8'%20cy%3D'-15.2'%20r%3D'9.9'%20fill%3D'%2399d29b'%2F%3E%3Ccircle%20cx%3D'695.5'%20cy%3D'-23.3'%20r%3D'8.1'%20fill%3D'%2399d29b'%2F%3E%3Ccircle%20cx%3D'675.7'%20cy%3D'-4.4'%20r%3D'7.2'%20fill%3D'%2399d29b'%2F%3E%3Ccircle%20cx%3D'702.7'%20cy%3D'-13.4'%20r%3D'8.1'%20fill%3D'%2399d29b'%2F%3E%3Ccircle%20cx%3D'689.2'%20cy%3D'-8.0'%20r%3D'6.3'%20fill%3D'%2399d29b'%2F%3E%3Ccircle%20cx%3D'682.0'%20cy%3D'-20.6'%20r%3D'3.6'%20fill%3D'%2399d29b'%2F%3E%3Ccircle%20cx%3D'682.0'%20cy%3D'-11.6'%20r%3D'2.2'%20fill%3D'%23f8bbd0'%2F%3E%3Ccircle%20cx%3D'694.6'%20cy%3D'-20.6'%20r%3D'2.0'%20fill%3D'%23ffffff'%2F%3E%3Ccircle%20cx%3D'709.0'%20cy%3D'-8.0'%20r%3D'2.0'%20fill%3D'%23f8bbd0'%2F%3E%3Ccircle%20cx%3D'716.2'%20cy%3D'1.0'%20r%3D'1.8'%20fill%3D'%23fce4ec'%2F%3E%3Ccircle%20cx%3D'678.4'%20cy%3D'-2.6'%20r%3D'1.8'%20fill%3D'%23ffffff'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

.trees-autumn {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%20-150%201056%20214'%20preserveAspectRatio%3D'xMidYMax'%3E%3Cg%20transform%3D'translate(180%2064)%20scale(1.7)%20translate(-180%20-64)'%3E%3Cellipse%20cx%3D'180'%20cy%3D'63'%20rx%3D'34'%20ry%3D'4'%20fill%3D'%23000000'%20opacity%3D'0.13'%2F%3E%3Cpath%20d%3D'M173.0%2064.0%20C174.0%2042.0%20176.0%2032.0%20177.0%2022.0%20L183.0%2022.0%20C184.0%2032.0%20186.0%2042.0%20187.0%2064.0%20Z'%20fill%3D'%235b3d26'%2F%3E%3Cpath%20d%3D'M175.5%2062.0%20C176.5%2042.0%20177.5%2032.0%20178.5%2023.0%20L179.5%2023.0%20C178.5%2033.0%20177.5%2044.0%20176.5%2062.0%20Z'%20fill%3D'%237a5636'%2F%3E%3Cpath%20d%3D'M180.0%2030.0%20L167.0%206.0%20M180.0%2026.0%20L180.0%20-4.0%20M180.0%2030.0%20L194.0%204.0'%20stroke%3D'%235b3d26'%20stroke-width%3D'2.6'%20stroke-linecap%3D'round'%20fill%3D'none'%2F%3E%3Ccircle%20cx%3D'154.0'%20cy%3D'-2.0'%20r%3D'21.0'%20fill%3D'%239c4a1e'%2F%3E%3Ccircle%20cx%3D'206.0'%20cy%3D'-2.0'%20r%3D'21.0'%20fill%3D'%239c4a1e'%2F%3E%3Ccircle%20cx%3D'150.0'%20cy%3D'-13.0'%20r%3D'16.0'%20fill%3D'%239c4a1e'%2F%3E%3Ccircle%20cx%3D'211.0'%20cy%3D'-13.0'%20r%3D'16.0'%20fill%3D'%239c4a1e'%2F%3E%3Ccircle%20cx%3D'167.0'%20cy%3D'-20.0'%20r%3D'23.0'%20fill%3D'%239c4a1e'%2F%3E%3Ccircle%20cx%3D'193.0'%20cy%3D'-20.0'%20r%3D'23.0'%20fill%3D'%239c4a1e'%2F%3E%3Ccircle%20cx%3D'180.0'%20cy%3D'-2.0'%20r%3D'25.0'%20fill%3D'%239c4a1e'%2F%3E%3Ccircle%20cx%3D'180.0'%20cy%3D'-32.0'%20r%3D'19.0'%20fill%3D'%239c4a1e'%2F%3E%3Ccircle%20cx%3D'163.0'%20cy%3D'-31.0'%20r%3D'14.0'%20fill%3D'%239c4a1e'%2F%3E%3Ccircle%20cx%3D'197.0'%20cy%3D'-31.0'%20r%3D'14.0'%20fill%3D'%239c4a1e'%2F%3E%3Ccircle%20cx%3D'156.0'%20cy%3D'-24.0'%20r%3D'13.0'%20fill%3D'%239c4a1e'%2F%3E%3Ccircle%20cx%3D'204.0'%20cy%3D'-24.0'%20r%3D'13.0'%20fill%3D'%239c4a1e'%2F%3E%3Ccircle%20cx%3D'162.0'%20cy%3D'-8.0'%20r%3D'15.0'%20fill%3D'%23c9662a'%2F%3E%3Ccircle%20cx%3D'195.0'%20cy%3D'-10.0'%20r%3D'15.0'%20fill%3D'%23c9662a'%2F%3E%3Ccircle%20cx%3D'178.0'%20cy%3D'-26.0'%20r%3D'16.0'%20fill%3D'%23c9662a'%2F%3E%3Ccircle%20cx%3D'201.0'%20cy%3D'0.0'%20r%3D'11.0'%20fill%3D'%23c9662a'%2F%3E%3Ccircle%20cx%3D'156.0'%20cy%3D'0.0'%20r%3D'11.0'%20fill%3D'%23c9662a'%2F%3E%3Ccircle%20cx%3D'185.0'%20cy%3D'-14.0'%20r%3D'13.0'%20fill%3D'%23c9662a'%2F%3E%3Ccircle%20cx%3D'170.0'%20cy%3D'-4.0'%20r%3D'12.0'%20fill%3D'%23c9662a'%2F%3E%3Ccircle%20cx%3D'192.0'%20cy%3D'-30.0'%20r%3D'10.0'%20fill%3D'%23c9662a'%2F%3E%3Ccircle%20cx%3D'162.0'%20cy%3D'-24.0'%20r%3D'11.0'%20fill%3D'%23e6a244'%2F%3E%3Ccircle%20cx%3D'175.0'%20cy%3D'-33.0'%20r%3D'9.0'%20fill%3D'%23e6a244'%2F%3E%3Ccircle%20cx%3D'153.0'%20cy%3D'-12.0'%20r%3D'8.0'%20fill%3D'%23e6a244'%2F%3E%3Ccircle%20cx%3D'183.0'%20cy%3D'-22.0'%20r%3D'9.0'%20fill%3D'%23e6a244'%2F%3E%3Ccircle%20cx%3D'168.0'%20cy%3D'-16.0'%20r%3D'7.0'%20fill%3D'%23e6a244'%2F%3E%3Ccircle%20cx%3D'160.0'%20cy%3D'-30.0'%20r%3D'4.0'%20fill%3D'%23e6a244'%2F%3E%3Ccircle%20cx%3D'162.0'%20cy%3D'-8.0'%20r%3D'2.6'%20fill%3D'%23b23b1e'%2F%3E%3Ccircle%20cx%3D'194.0'%20cy%3D'-22.0'%20r%3D'2.4'%20fill%3D'%238f2f18'%2F%3E%3Ccircle%20cx%3D'182.0'%20cy%3D'-30.0'%20r%3D'2.2'%20fill%3D'%23f0c15a'%2F%3E%3C%2Fg%3E%3Cg%20transform%3D'translate(700%2064)%20scale(1.7)%20translate(-700%20-64)'%3E%3Cellipse%20cx%3D'700'%20cy%3D'63'%20rx%3D'31'%20ry%3D'4'%20fill%3D'%23000000'%20opacity%3D'0.13'%2F%3E%3Cpath%20d%3D'M693.7%2064.0%20C694.6%2044.2%20696.4%2035.2%20697.3%2026.2%20L702.7%2026.2%20C703.6%2035.2%20705.4%2044.2%20706.3%2064.0%20Z'%20fill%3D'%235b3d26'%2F%3E%3Cpath%20d%3D'M696.0%2062.2%20C696.9%2044.2%20697.8%2035.2%20698.6%2027.1%20L699.5%2027.1%20C698.6%2036.1%20697.8%2046.0%20696.9%2062.2%20Z'%20fill%3D'%237a5636'%2F%3E%3Cpath%20d%3D'M700.0%2033.4%20L688.3%2011.8%20M700.0%2029.8%20L700.0%202.8%20M700.0%2033.4%20L712.6%2010.0'%20stroke%3D'%235b3d26'%20stroke-width%3D'2.3'%20stroke-linecap%3D'round'%20fill%3D'none'%2F%3E%3Ccircle%20cx%3D'676.6'%20cy%3D'4.6'%20r%3D'18.9'%20fill%3D'%239c4a1e'%2F%3E%3Ccircle%20cx%3D'723.4'%20cy%3D'4.6'%20r%3D'18.9'%20fill%3D'%239c4a1e'%2F%3E%3Ccircle%20cx%3D'673.0'%20cy%3D'-5.3'%20r%3D'14.4'%20fill%3D'%239c4a1e'%2F%3E%3Ccircle%20cx%3D'727.9'%20cy%3D'-5.3'%20r%3D'14.4'%20fill%3D'%239c4a1e'%2F%3E%3Ccircle%20cx%3D'688.3'%20cy%3D'-11.6'%20r%3D'20.7'%20fill%3D'%239c4a1e'%2F%3E%3Ccircle%20cx%3D'711.7'%20cy%3D'-11.6'%20r%3D'20.7'%20fill%3D'%239c4a1e'%2F%3E%3Ccircle%20cx%3D'700.0'%20cy%3D'4.6'%20r%3D'22.5'%20fill%3D'%239c4a1e'%2F%3E%3Ccircle%20cx%3D'700.0'%20cy%3D'-22.4'%20r%3D'17.1'%20fill%3D'%239c4a1e'%2F%3E%3Ccircle%20cx%3D'684.7'%20cy%3D'-21.5'%20r%3D'12.6'%20fill%3D'%239c4a1e'%2F%3E%3Ccircle%20cx%3D'715.3'%20cy%3D'-21.5'%20r%3D'12.6'%20fill%3D'%239c4a1e'%2F%3E%3Ccircle%20cx%3D'678.4'%20cy%3D'-15.2'%20r%3D'11.7'%20fill%3D'%239c4a1e'%2F%3E%3Ccircle%20cx%3D'721.6'%20cy%3D'-15.2'%20r%3D'11.7'%20fill%3D'%239c4a1e'%2F%3E%3Ccircle%20cx%3D'683.8'%20cy%3D'-0.8'%20r%3D'13.5'%20fill%3D'%23c9662a'%2F%3E%3Ccircle%20cx%3D'713.5'%20cy%3D'-2.6'%20r%3D'13.5'%20fill%3D'%23c9662a'%2F%3E%3Ccircle%20cx%3D'698.2'%20cy%3D'-17.0'%20r%3D'14.4'%20fill%3D'%23c9662a'%2F%3E%3Ccircle%20cx%3D'718.9'%20cy%3D'6.4'%20r%3D'9.9'%20fill%3D'%23c9662a'%2F%3E%3Ccircle%20cx%3D'678.4'%20cy%3D'6.4'%20r%3D'9.9'%20fill%3D'%23c9662a'%2F%3E%3Ccircle%20cx%3D'704.5'%20cy%3D'-6.2'%20r%3D'11.7'%20fill%3D'%23c9662a'%2F%3E%3Ccircle%20cx%3D'691.0'%20cy%3D'2.8'%20r%3D'10.8'%20fill%3D'%23c9662a'%2F%3E%3Ccircle%20cx%3D'710.8'%20cy%3D'-20.6'%20r%3D'9.0'%20fill%3D'%23c9662a'%2F%3E%3Ccircle%20cx%3D'683.8'%20cy%3D'-15.2'%20r%3D'9.9'%20fill%3D'%23e6a244'%2F%3E%3Ccircle%20cx%3D'695.5'%20cy%3D'-23.3'%20r%3D'8.1'%20fill%3D'%23e6a244'%2F%3E%3Ccircle%20cx%3D'675.7'%20cy%3D'-4.4'%20r%3D'7.2'%20fill%3D'%23e6a244'%2F%3E%3Ccircle%20cx%3D'702.7'%20cy%3D'-13.4'%20r%3D'8.1'%20fill%3D'%23e6a244'%2F%3E%3Ccircle%20cx%3D'689.2'%20cy%3D'-8.0'%20r%3D'6.3'%20fill%3D'%23e6a244'%2F%3E%3Ccircle%20cx%3D'682.0'%20cy%3D'-20.6'%20r%3D'3.6'%20fill%3D'%23e6a244'%2F%3E%3Ccircle%20cx%3D'683.8'%20cy%3D'-0.8'%20r%3D'2.3'%20fill%3D'%23b23b1e'%2F%3E%3Ccircle%20cx%3D'712.6'%20cy%3D'-13.4'%20r%3D'2.2'%20fill%3D'%238f2f18'%2F%3E%3Ccircle%20cx%3D'701.8'%20cy%3D'-20.6'%20r%3D'2.0'%20fill%3D'%23f0c15a'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

.trees-winter {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%20-150%201056%20214'%20preserveAspectRatio%3D'xMidYMax'%3E%3Cg%20transform%3D'translate(180%2064)%20scale(1.7)%20translate(-180%20-64)'%3E%3Cellipse%20cx%3D'180'%20cy%3D'63'%20rx%3D'26'%20ry%3D'3.5'%20fill%3D'%23000000'%20opacity%3D'0.10'%2F%3E%3Cpath%20d%3D'M174.0%2064.0%20C175.0%2040.0%20177.0%2026.0%20177.5%2014.0%20L182.5%2014.0%20C183.0%2026.0%20185.0%2040.0%20186.0%2064.0%20Z'%20fill%3D'%235d4027'%2F%3E%3Cpath%20d%3D'M180.0%2018.0%20L164.0%20-8.0%20L154.0%20-22.0%20M164.0%20-8.0%20L170.0%20-26.0%20M180.0%2016.0%20L180.0%20-30.0%20L172.0%20-44.0%20M180.0%20-30.0%20L189.0%20-46.0%20M180.0%2018.0%20L197.0%20-6.0%20L207.0%20-20.0%20M197.0%20-6.0%20L192.0%20-26.0'%20stroke%3D'%235d4027'%20stroke-width%3D'2.6'%20stroke-linecap%3D'round'%20fill%3D'none'%2F%3E%3Cellipse%20cx%3D'160.0'%20cy%3D'-16.0'%20rx%3D'4.5'%20ry%3D'2.7'%20fill%3D'%23eef4f8'%2F%3E%3Cellipse%20cx%3D'176.0'%20cy%3D'-37.0'%20rx%3D'4.0'%20ry%3D'2.4'%20fill%3D'%23eef4f8'%2F%3E%3Cellipse%20cx%3D'193.0'%20cy%3D'-15.0'%20rx%3D'4.0'%20ry%3D'2.4'%20fill%3D'%23eef4f8'%2F%3E%3Cellipse%20cx%3D'180.0'%20cy%3D'-2.0'%20rx%3D'5.0'%20ry%3D'3.0'%20fill%3D'%23eef4f8'%2F%3E%3Cellipse%20cx%3D'154.0'%20cy%3D'-22.0'%20rx%3D'3.0'%20ry%3D'1.8'%20fill%3D'%23eef4f8'%2F%3E%3Cellipse%20cx%3D'207.0'%20cy%3D'-20.0'%20rx%3D'3.0'%20ry%3D'1.8'%20fill%3D'%23eef4f8'%2F%3E%3Cellipse%20cx%3D'189.0'%20cy%3D'-46.0'%20rx%3D'2.6'%20ry%3D'1.6'%20fill%3D'%23eef4f8'%2F%3E%3Cellipse%20cx%3D'172.0'%20cy%3D'-44.0'%20rx%3D'2.6'%20ry%3D'1.6'%20fill%3D'%23eef4f8'%2F%3E%3C%2Fg%3E%3Cg%20transform%3D'translate(700%2064)%20scale(1.7)%20translate(-700%20-64)'%3E%3Cellipse%20cx%3D'700'%20cy%3D'63'%20rx%3D'23'%20ry%3D'3.5'%20fill%3D'%23000000'%20opacity%3D'0.10'%2F%3E%3Cpath%20d%3D'M694.6%2064.0%20C695.5%2042.4%20697.3%2029.8%20697.8%2019.0%20L702.2%2019.0%20C702.7%2029.8%20704.5%2042.4%20705.4%2064.0%20Z'%20fill%3D'%235d4027'%2F%3E%3Cpath%20d%3D'M700.0%2022.6%20L685.6%20-0.8%20L676.6%20-13.4%20M685.6%20-0.8%20L691.0%20-17.0%20M700.0%2020.8%20L700.0%20-20.6%20L692.8%20-33.2%20M700.0%20-20.6%20L708.1%20-35.0%20M700.0%2022.6%20L715.3%201.0%20L724.3%20-11.6%20M715.3%201.0%20L710.8%20-17.0'%20stroke%3D'%235d4027'%20stroke-width%3D'2.3'%20stroke-linecap%3D'round'%20fill%3D'none'%2F%3E%3Cellipse%20cx%3D'682.0'%20cy%3D'-8.0'%20rx%3D'4.0'%20ry%3D'2.4'%20fill%3D'%23eef4f8'%2F%3E%3Cellipse%20cx%3D'696.4'%20cy%3D'-26.9'%20rx%3D'3.6'%20ry%3D'2.2'%20fill%3D'%23eef4f8'%2F%3E%3Cellipse%20cx%3D'711.7'%20cy%3D'-7.1'%20rx%3D'3.6'%20ry%3D'2.2'%20fill%3D'%23eef4f8'%2F%3E%3Cellipse%20cx%3D'700.0'%20cy%3D'4.6'%20rx%3D'4.5'%20ry%3D'2.7'%20fill%3D'%23eef4f8'%2F%3E%3Cellipse%20cx%3D'676.6'%20cy%3D'-13.4'%20rx%3D'2.7'%20ry%3D'1.6'%20fill%3D'%23eef4f8'%2F%3E%3Cellipse%20cx%3D'724.3'%20cy%3D'-11.6'%20rx%3D'2.7'%20ry%3D'1.6'%20fill%3D'%23eef4f8'%2F%3E%3Cellipse%20cx%3D'708.1'%20cy%3D'-35.0'%20rx%3D'2.3'%20ry%3D'1.4'%20fill%3D'%23eef4f8'%2F%3E%3Cellipse%20cx%3D'692.8'%20cy%3D'-33.2'%20rx%3D'2.3'%20ry%3D'1.4'%20fill%3D'%23eef4f8'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

/* Pobocze (trawa) tuż nad jezdnią: wygięte ŹDŹBŁA (kafel SVG powtarzany w poziomie),
   w trzech odcieniach zieleni, z pełną „darnią" u dołu - nie zębatka/„góry". */
.grass {
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 88px;
  height: 18px;
  z-index: 2;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 30'%3E%3Cpath d='M2 30 Q3 16 7 5 Q7 18 8 30 Z' fill='%2343a047'/%3E%3Cpath d='M8 30 Q7 18 3 10 Q9 16 12 30 Z' fill='%232e7d32'/%3E%3Cpath d='M13 30 Q14 14 19 2 Q18 17 19 30 Z' fill='%234caf50'/%3E%3Cpath d='M20 30 Q22 18 27 9 Q24 20 25 30 Z' fill='%23388e3c'/%3E%3Cpath d='M27 30 Q27 15 24 7 Q31 14 32 30 Z' fill='%2343a047'/%3E%3Cpath d='M33 30 Q34 13 38 3 Q38 17 39 30 Z' fill='%232e7d32'/%3E%3Cpath d='M40 30 Q42 17 47 8 Q44 19 45 30 Z' fill='%234caf50'/%3E%3Cpath d='M46 30 Q46 14 43 6 Q51 13 52 30 Z' fill='%23388e3c'/%3E%3Cpath d='M53 30 Q54 12 58 1 Q58 16 59 30 Z' fill='%2343a047'/%3E%3Cpath d='M60 30 Q62 18 66 10 Q63 20 65 30 Z' fill='%232e7d32'/%3E%3Cpath d='M66 30 Q66 15 63 8 Q71 14 72 30 Z' fill='%234caf50'/%3E%3Cpath d='M72 30 Q74 14 78 4 Q77 18 78 30 Z' fill='%23388e3c'/%3E%3C/svg%3E") calc(var(--road-phase, 0px) + var(--road-pattern-offset, 0px) + var(--whoosh-shift, 0px)) bottom repeat-x;
  /* Explicit 44px tile width (was auto 100% = height-dependent): the pattern period must
     divide ROAD_PHASE_CYCLE_PX (divisor invariant, see motion_speed.mjs) so the mod wrap
     never teleports it, and it stays identical across hero/mobile/fullscreen heights. */
  background-size: 44px 100%;
}

@keyframes grassScroll {
  from {
    --whoosh-shift:0px;
  }
  to {
    --whoosh-shift:-44px;
  }
}
/* Wind sway: grass/trees are background TILES, individual blades can't move - a subtle whole-
   strip skewX (bottom-anchored, so it pivots from the ground) reads as wind instead. Declared
   AFTER the base rules above so it doesn't fight their `background`/`background-position`
   (different property, no conflict either way). Known interplay: `.grass.whoosh` (below) sets
   the `animation` SHORTHAND on the same `.grass` element with higher specificity, so it wins
   outright during the ~1.8s intro whoosh (sway pauses, grassScroll takes over) - accepted, the
   whoosh is brief and the ground rush reads fine without sway. `.roadside-trees.whoosh` only
   targets its `.trees-tile` children, not the container, so tree sway keeps running through a
   whoosh - also fine, the two animate different properties there. */
.grass {
  transform-origin: bottom center;
  animation: grassWind 3.8s ease-in-out infinite;
}

.roadside-trees {
  transform-origin: bottom center;
  animation: treeWind 5.8s ease-in-out infinite;
}

@keyframes grassWind {
  0%, 100% {
    transform: skewX(0.4deg) scaleX(1);
  }
  32% {
    transform: skewX(-3deg) scaleX(1.009);
  }
  68% {
    transform: skewX(1.8deg) scaleX(0.995);
  }
}
@keyframes treeWind {
  0%, 100% {
    transform: skewX(0.2deg);
  }
  42% {
    transform: skewX(-2deg);
  }
  72% {
    transform: skewX(1.2deg);
  }
}
.road-stage.weather-rain .grass:not(.whoosh) {
  animation-name: grassWindRain;
  animation-duration: 2.7s;
}

.road-stage.weather-rain .roadside-trees:not(.whoosh) {
  animation-name: treeWindRain;
  animation-duration: 3.8s;
}

@keyframes grassWindRain {
  0%, 100% {
    transform: skewX(1deg);
  }
  38% {
    transform: skewX(-3deg);
  }
  62% {
    transform: skewX(-1deg);
  }
}
@keyframes treeWindRain {
  0%, 100% {
    transform: skewX(0.7deg);
  }
  44% {
    transform: skewX(-2deg);
  }
  70% {
    transform: skewX(-0.4deg);
  }
}
/* storm: faster, wider sway - `:not(.whoosh)` guarantees the intro's ground-rush always wins
   over storm sway regardless of selector specificity (three classes here would otherwise
   outrank .grass.whoosh's two and hijack the shared `animation` property mid-intro). */
.road-stage.weather-storm .grass:not(.whoosh), .road-stage.weather-storm .roadside-trees:not(.whoosh) {
  animation-name: windSwayStorm;
  animation-duration: 1.65s;
  animation-timing-function: cubic-bezier(0.45, 0.02, 0.3, 1);
}

.road-stage.weather-storm .roadside-trees:not(.whoosh) {
  animation-duration: 2.15s;
}

@keyframes windSwayStorm {
  0%, 100% {
    transform: skewX(1.5deg);
  }
  18% {
    transform: skewX(-5deg);
  }
  28% {
    transform: skewX(-2.8deg);
  }
  57% {
    transform: skewX(3.8deg);
  }
  72% {
    transform: skewX(-4.2deg);
  }
}
/* Season variants of the roadside grass: summer stays on the .grass base (shared with
   TripReplay), spring/autumn/winter are overlays crossfaded by inline opacity. Same blade
   shapes, different palettes: spring = fresh green + wildflowers, autumn = olive/brown +
   fallen leaves at the base, winter = pale frosted tufts + snow drifts. */
.grass-tile {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 2s ease;
  background-repeat: repeat-x;
  background-size: 44px 100%;
  background-position: calc(var(--road-phase, 0px) + var(--road-pattern-offset, 0px) + var(--whoosh-shift, 0px)) bottom;
}

.grass-spring {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 30'%3E%3Cpath d='M2 30 Q3 16 7 5 Q7 18 8 30 Z' fill='%2366bb6a'/%3E%3Cpath d='M8 30 Q7 18 3 10 Q9 16 12 30 Z' fill='%234caf50'/%3E%3Cpath d='M13 30 Q14 14 19 2 Q18 17 19 30 Z' fill='%2381c784'/%3E%3Cpath d='M20 30 Q22 18 27 9 Q24 20 25 30 Z' fill='%2343a047'/%3E%3Cpath d='M27 30 Q27 15 24 7 Q31 14 32 30 Z' fill='%2366bb6a'/%3E%3Cpath d='M33 30 Q34 13 38 3 Q38 17 39 30 Z' fill='%234caf50'/%3E%3Cpath d='M40 30 Q42 17 47 8 Q44 19 45 30 Z' fill='%2381c784'/%3E%3Cpath d='M46 30 Q46 14 43 6 Q51 13 52 30 Z' fill='%2343a047'/%3E%3Cpath d='M53 30 Q54 12 58 1 Q58 16 59 30 Z' fill='%2366bb6a'/%3E%3Cpath d='M60 30 Q62 18 66 10 Q63 20 65 30 Z' fill='%234caf50'/%3E%3Cpath d='M66 30 Q66 15 63 8 Q71 14 72 30 Z' fill='%2381c784'/%3E%3Cpath d='M72 30 Q74 14 78 4 Q77 18 78 30 Z' fill='%2343a047'/%3E%3Cpath d='M10 24 L10 13 M37 25 L37 11 M63 24 L63 12' stroke='%23388e3c' stroke-width='1.2' fill='none'/%3E%3Ccircle cx='10' cy='11' r='3' fill='%23FF6B5C'/%3E%3Ccircle cx='10' cy='11' r='1.1' fill='%23FFE08A'/%3E%3Ccircle cx='37' cy='9' r='2.8' fill='%23F7F4EE'/%3E%3Ccircle cx='37' cy='9' r='1.1' fill='%23FFB84D'/%3E%3Ccircle cx='63' cy='10' r='3' fill='%23FFB84D'/%3E%3Ccircle cx='63' cy='10' r='1.1' fill='%23c65f2e'/%3E%3C/svg%3E");
}

.grass-autumn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 30'%3E%3Cpath d='M2 30 Q3 16 7 5 Q7 18 8 30 Z' fill='%23a68a3d'/%3E%3Cpath d='M8 30 Q7 18 3 10 Q9 16 12 30 Z' fill='%23967f31'/%3E%3Cpath d='M13 30 Q14 14 19 2 Q18 17 19 30 Z' fill='%23b5985a'/%3E%3Cpath d='M20 30 Q22 18 27 9 Q24 20 25 30 Z' fill='%23857637'/%3E%3Cpath d='M27 30 Q27 15 24 7 Q31 14 32 30 Z' fill='%23a68a3d'/%3E%3Cpath d='M33 30 Q34 13 38 3 Q38 17 39 30 Z' fill='%23967f31'/%3E%3Cpath d='M40 30 Q42 17 47 8 Q44 19 45 30 Z' fill='%23b5985a'/%3E%3Cpath d='M46 30 Q46 14 43 6 Q51 13 52 30 Z' fill='%23857637'/%3E%3Cpath d='M53 30 Q54 12 58 1 Q58 16 59 30 Z' fill='%23a68a3d'/%3E%3Cpath d='M60 30 Q62 18 66 10 Q63 20 65 30 Z' fill='%23967f31'/%3E%3Cpath d='M66 30 Q66 15 63 8 Q71 14 72 30 Z' fill='%23b5985a'/%3E%3Cpath d='M72 30 Q74 14 78 4 Q77 18 78 30 Z' fill='%23857637'/%3E%3Cellipse cx='14' cy='27' rx='4.5' ry='2.1' fill='%23e07b39' transform='rotate(-18 14 27)'/%3E%3Cellipse cx='42' cy='28' rx='4' ry='1.9' fill='%23d98e2b' transform='rotate(24 42 28)'/%3E%3Cellipse cx='66' cy='27.5' rx='4.2' ry='2' fill='%23c65f2e' transform='rotate(-10 66 27.5)'/%3E%3C/svg%3E");
}

.grass-winter {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 30'%3E%3Cpath d='M2 30 Q3 16 7 5 Q7 18 8 30 Z' fill='%23b8c4bd'/%3E%3Cpath d='M8 30 Q7 18 3 10 Q9 16 12 30 Z' fill='%23a7b5ae'/%3E%3Cpath d='M13 30 Q14 14 19 2 Q18 17 19 30 Z' fill='%23cfd8d3'/%3E%3Cpath d='M20 30 Q22 18 27 9 Q24 20 25 30 Z' fill='%239aa8a1'/%3E%3Cpath d='M27 30 Q27 15 24 7 Q31 14 32 30 Z' fill='%23b8c4bd'/%3E%3Cpath d='M33 30 Q34 13 38 3 Q38 17 39 30 Z' fill='%23a7b5ae'/%3E%3Cpath d='M40 30 Q42 17 47 8 Q44 19 45 30 Z' fill='%23cfd8d3'/%3E%3Cpath d='M46 30 Q46 14 43 6 Q51 13 52 30 Z' fill='%239aa8a1'/%3E%3Cpath d='M53 30 Q54 12 58 1 Q58 16 59 30 Z' fill='%23b8c4bd'/%3E%3Cpath d='M60 30 Q62 18 66 10 Q63 20 65 30 Z' fill='%23a7b5ae'/%3E%3Cpath d='M66 30 Q66 15 63 8 Q71 14 72 30 Z' fill='%23cfd8d3'/%3E%3Cpath d='M72 30 Q74 14 78 4 Q77 18 78 30 Z' fill='%239aa8a1'/%3E%3Cellipse cx='12' cy='28.5' rx='7' ry='2.8' fill='%23eef4f8'/%3E%3Cellipse cx='42' cy='29' rx='9' ry='3' fill='%23e6eef4'/%3E%3Cellipse cx='68' cy='28.5' rx='6' ry='2.6' fill='%23f2f7fa'/%3E%3C/svg%3E");
}

.road-base {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 88px;
  background: #33373f;
  border-top: 3px solid #4d525c;
  overflow: hidden;
}

.road-base::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.06) 0 2px, transparent 2px 7px);
}

/* Wet-road sheen: while it's raining/storming, and lingering for a while after (see
   lib/sky_transitions.mjs) - first DOM child of .road-base so the lane fills paint over it. */
.road-wet {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 3s ease;
  background: linear-gradient(180deg, rgba(150, 190, 230, 0.1), rgba(190, 220, 250, 0.16) 30%, rgba(120, 150, 190, 0.08));
}

.road-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(42, 157, 157, 0.28), rgba(78, 203, 113, 0.42));
  border-right: 2px solid rgba(78, 203, 113, 0.95);
  transition: opacity 0.28s ease;
}

.road-progress.intro-hidden {
  opacity: 0;
}

.road-progress.intro-visible {
  opacity: 1;
}

/* pasy: białe; przewijanie NIE jest animacją CSS - pętla rAF (TripProgress) akumuluje
   przejechane piksele w --road-phase i podbija background-position. Zmiana animation-duration
   w locie NIE zachowuje fazy animacji (pozycja = elapsed/duration ⇒ każda zmiana czasu trwania
   teleportuje wzór - droga „cofała się"/skakała przy każdym rozpędzaniu), dlatego faza MUSI
   być liczona w JS, a CSS tylko ją renderuje. */
/* width:120% + left:-10%: wzór wychodzi poza obie krawędzie (przycięte przez overflow:hidden),
   więc słupki/pasy nie „pojawiają się" nagle przy prawej krawędzi sceny. */
.lane-line {
  position: absolute;
  bottom: 22px;
  left: -10%;
  width: 120%;
  height: 5px;
  background-position: calc(var(--road-phase, 0px) + var(--road-pattern-offset, 0px) + var(--whoosh-shift, 0px)) 0;
  /* A bounded 66px tile is intentional. Chromium could leave a missing repetition when an
     unbounded repeating-linear-gradient was repainted every frame inside the camera layer;
     the hole vanished only when ROAD_PHASE_CYCLE_PX wrapped and invalidated the raster. */
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0 36px, transparent 36px 66px);
  background-repeat: repeat-x;
  background-size: 66px 100%;
}

/* The whoosh sweep is RELATIVE - a registered custom property that each consumer ADDS to its own
   base - never an absolute background-position. With an absolute target the intro road extensions,
   which carry a per-side --road-pattern-offset, animated from that offset all the way to the same
   -66/-88px: six times the distance in the same time, so their lanes and posts raced out of
   alignment with the main road during the whoosh (measured 743px apart, fixed 2026-07-29). */
@keyframes laneScroll {
  from {
    --whoosh-shift:0px;
  }
  to {
    --whoosh-shift:-66px;
  }
}
/* słupki drogowe (białe z czerwonym paskiem) na poboczu; przewijają się jak pasy */
/* słupki drogowe (biało-czerwone) przy krawędzi jezdni; ta sama prędkość co pasy (120 px/s
   przy prędkości średniej), więc dzielą --road-phase z .lane-line (okresy 88px, 66px i 44px
   trawy dzielą cykl ROAD_PHASE_CYCLE_PX, o który JS robi modulo). */
.road-posts {
  position: absolute;
  left: -10%;
  width: 120%;
  bottom: 82px;
  height: 20px;
  z-index: 2;
  pointer-events: none;
  background-image: linear-gradient(90deg, transparent 0 78px, #eef0f4 78px 82px, transparent 82px 88px);
  background-repeat: repeat-x;
  background-size: 88px 100%;
  background-position: calc(var(--road-phase, 0px) + var(--road-pattern-offset, 0px) + var(--whoosh-shift, 0px)) 0;
}

.road-posts::after {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 100%;
  height: 5px;
  background-image: linear-gradient(90deg, transparent 0 78px, #d3382e 78px 82px, transparent 82px 88px);
  background-repeat: repeat-x;
  background-size: 88px 100%;
  background-position: calc(var(--road-phase, 0px) + var(--road-pattern-offset, 0px) + var(--whoosh-shift, 0px)) 0;
}

@keyframes postScroll {
  from {
    --whoosh-shift:0px;
  }
  to {
    --whoosh-shift:-88px;
  }
}
/* Roadside bushes: same shoulder/speed/layer as .roadside-trees - shares --road-phase (owner
   feedback: an earlier faster-than-road "foreground" version read as loose debris sweeping the
   driving lanes rather than roadside scenery), same z-index:2 so a LATER sibling (grass) paints
   over the bush bases exactly like it already does for tree trunks, and rendered BEFORE
   GrassStrip in the JSX for that reason. SAME bottom:88px shoulder reference as .roadside-trees
   - entirely above the road line, never dipping into the asphalt. Season-reactive, same
   always-mounted crossfade pattern as the trees tile. The redrawn bushes use layered organic
   foliage, visible branch structure, highlights, and season details. Sparse tile (~90% empty) - a bush passes
   roughly every 7s at average speed. Its 1320px period divides ROAD_PHASE_CYCLE_PX, so the
   shared phase wrap remains invisible instead of replacing the bushes mid-drive.
   SIZING: unlike the trees these tiles stretch (preserveAspectRatio='none'), so the box height IS
   the vertical scale - the viewBox is 1320x74 and a 56px box squashed every bush to 0.76 of its
   drawn height, which is why they read as flat. Keep the height at ~74px (1:1) wherever there is
   room; anything visibly lower flattens them again. */
.road-foreground {
  position: absolute;
  left: -10%;
  width: 120%;
  bottom: 88px;
  height: 74px;
  z-index: 2;
  pointer-events: none;
}

.foreground-tile {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 2s ease, filter 2.2s ease;
  background-repeat: repeat-x;
  background-size: 1320px 100%;
  background-position: calc(var(--road-phase, 0px) + var(--scenery-shift, 0px)) bottom;
}

@keyframes foregroundScroll {
  to {
    background-position: -1320px bottom;
  }
}
.foreground-summer {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%20-46%201320%2074'%20preserveAspectRatio%3D'none'%3E%3Cg%20transform%3D'translate(306%2028)%20scale(1.2)'%3E%3Cellipse%20cx%3D'0'%20cy%3D'-1'%20rx%3D'38'%20ry%3D'4'%20fill%3D'%23000'%20opacity%3D'.16'%2F%3E%3Cpath%20d%3D'M-42-5C-45-17-37-27-25-27c0-11%2011-17%2021-12%208-11%2024-8%2028%204%2012-1%2020%209%2016%2020%2010%206%206%2018-6%2021-19%206-57%205-76-11Z'%20fill%3D'%23234d2d'%2F%3E%3Cpath%20d%3D'M-2%200C-3-12-12-21-25-31M-7-4C0-18%2011-25%2025-35M5-5C4-18-1-27-8-37M14-3c2-10%209-17%2018-22M-19-3c-2-9-8-14-16-18'%20fill%3D'none'%20stroke%3D'%235b3d26'%20stroke-width%3D'2.2'%20stroke-linecap%3D'round'%20opacity%3D'.78'%2F%3E%3Cellipse%20cx%3D'-23'%20cy%3D'-18'%20rx%3D'18'%20ry%3D'14'%20fill%3D'%23397746'%2F%3E%3Cellipse%20cx%3D'-5'%20cy%3D'-28'%20rx%3D'19'%20ry%3D'16'%20fill%3D'%23397746'%2F%3E%3Cellipse%20cx%3D'19'%20cy%3D'-23'%20rx%3D'18'%20ry%3D'15'%20fill%3D'%23397746'%2F%3E%3Cellipse%20cx%3D'32'%20cy%3D'-12'%20rx%3D'11'%20ry%3D'10'%20fill%3D'%23234d2d'%2F%3E%3Cellipse%20cx%3D'-31'%20cy%3D'-11'%20rx%3D'12'%20ry%3D'10'%20fill%3D'%23234d2d'%2F%3E%3Cellipse%20cx%3D'-14'%20cy%3D'-32'%20rx%3D'10'%20ry%3D'7'%20fill%3D'%2362a967'%2F%3E%3Cellipse%20cx%3D'10'%20cy%3D'-33'%20rx%3D'11'%20ry%3D'7'%20fill%3D'%2362a967'%2F%3E%3Cellipse%20cx%3D'26'%20cy%3D'-23'%20rx%3D'8'%20ry%3D'6'%20fill%3D'%2362a967'%2F%3E%3Cellipse%20cx%3D'-26'%20cy%3D'-24'%20rx%3D'8'%20ry%3D'6'%20fill%3D'%2362a967'%2F%3E%3Cpath%20d%3D'M-31-14q8-5%2015%201M-11-19q9-6%2017%200M12-14q8-6%2015-1'%20fill%3D'none'%20stroke%3D'%238acb83'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20opacity%3D'.68'%2F%3E%3Cg%20fill%3D'%23a7db96'%3E%3Ccircle%20cx%3D'-20'%20cy%3D'-30'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'3'%20cy%3D'-36'%20r%3D'1.8'%2F%3E%3Ccircle%20cx%3D'20'%20cy%3D'-27'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'-30'%20cy%3D'-18'%20r%3D'1.7'%2F%3E%3Ccircle%20cx%3D'11'%20cy%3D'-17'%20r%3D'1.6'%2F%3E%3Ccircle%20cx%3D'29'%20cy%3D'-15'%20r%3D'1.7'%2F%3E%3C%2Fg%3E%3Cg%20fill%3D'%23b7e3a6'%3E%3Ccircle%20cx%3D'-19'%20cy%3D'-27'%20r%3D'1.6'%2F%3E%3Ccircle%20cx%3D'5'%20cy%3D'-31'%20r%3D'1.4'%2F%3E%3Ccircle%20cx%3D'24'%20cy%3D'-22'%20r%3D'1.5'%2F%3E%3Ccircle%20cx%3D'-5'%20cy%3D'-14'%20r%3D'1.3'%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20transform%3D'translate(956%2028)%20scale(1.08)'%3E%3Cellipse%20cx%3D'0'%20cy%3D'-1'%20rx%3D'38'%20ry%3D'4'%20fill%3D'%23000'%20opacity%3D'.16'%2F%3E%3Cpath%20d%3D'M-42-5C-45-17-37-27-25-27c0-11%2011-17%2021-12%208-11%2024-8%2028%204%2012-1%2020%209%2016%2020%2010%206%206%2018-6%2021-19%206-57%205-76-11Z'%20fill%3D'%23234d2d'%2F%3E%3Cpath%20d%3D'M-2%200C-3-12-12-21-25-31M-7-4C0-18%2011-25%2025-35M5-5C4-18-1-27-8-37M14-3c2-10%209-17%2018-22M-19-3c-2-9-8-14-16-18'%20fill%3D'none'%20stroke%3D'%235b3d26'%20stroke-width%3D'2.2'%20stroke-linecap%3D'round'%20opacity%3D'.78'%2F%3E%3Cellipse%20cx%3D'-23'%20cy%3D'-18'%20rx%3D'18'%20ry%3D'14'%20fill%3D'%23397746'%2F%3E%3Cellipse%20cx%3D'-5'%20cy%3D'-28'%20rx%3D'19'%20ry%3D'16'%20fill%3D'%23397746'%2F%3E%3Cellipse%20cx%3D'19'%20cy%3D'-23'%20rx%3D'18'%20ry%3D'15'%20fill%3D'%23397746'%2F%3E%3Cellipse%20cx%3D'32'%20cy%3D'-12'%20rx%3D'11'%20ry%3D'10'%20fill%3D'%23234d2d'%2F%3E%3Cellipse%20cx%3D'-31'%20cy%3D'-11'%20rx%3D'12'%20ry%3D'10'%20fill%3D'%23234d2d'%2F%3E%3Cellipse%20cx%3D'-14'%20cy%3D'-32'%20rx%3D'10'%20ry%3D'7'%20fill%3D'%2362a967'%2F%3E%3Cellipse%20cx%3D'10'%20cy%3D'-33'%20rx%3D'11'%20ry%3D'7'%20fill%3D'%2362a967'%2F%3E%3Cellipse%20cx%3D'26'%20cy%3D'-23'%20rx%3D'8'%20ry%3D'6'%20fill%3D'%2362a967'%2F%3E%3Cellipse%20cx%3D'-26'%20cy%3D'-24'%20rx%3D'8'%20ry%3D'6'%20fill%3D'%2362a967'%2F%3E%3Cpath%20d%3D'M-31-14q8-5%2015%201M-11-19q9-6%2017%200M12-14q8-6%2015-1'%20fill%3D'none'%20stroke%3D'%238acb83'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20opacity%3D'.68'%2F%3E%3Cg%20fill%3D'%23a7db96'%3E%3Ccircle%20cx%3D'-20'%20cy%3D'-30'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'3'%20cy%3D'-36'%20r%3D'1.8'%2F%3E%3Ccircle%20cx%3D'20'%20cy%3D'-27'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'-30'%20cy%3D'-18'%20r%3D'1.7'%2F%3E%3Ccircle%20cx%3D'11'%20cy%3D'-17'%20r%3D'1.6'%2F%3E%3Ccircle%20cx%3D'29'%20cy%3D'-15'%20r%3D'1.7'%2F%3E%3C%2Fg%3E%3Cg%20fill%3D'%23b7e3a6'%3E%3Ccircle%20cx%3D'-19'%20cy%3D'-27'%20r%3D'1.6'%2F%3E%3Ccircle%20cx%3D'5'%20cy%3D'-31'%20r%3D'1.4'%2F%3E%3Ccircle%20cx%3D'24'%20cy%3D'-22'%20r%3D'1.5'%2F%3E%3Ccircle%20cx%3D'-5'%20cy%3D'-14'%20r%3D'1.3'%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

.foreground-spring {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%20-46%201320%2074'%20preserveAspectRatio%3D'none'%3E%3Cg%20transform%3D'translate(306%2028)%20scale(1.2)'%3E%3Cellipse%20cx%3D'0'%20cy%3D'-1'%20rx%3D'38'%20ry%3D'4'%20fill%3D'%23000'%20opacity%3D'.16'%2F%3E%3Cpath%20d%3D'M-42-5C-45-17-37-27-25-27c0-11%2011-17%2021-12%208-11%2024-8%2028%204%2012-1%2020%209%2016%2020%2010%206%206%2018-6%2021-19%206-57%205-76-11Z'%20fill%3D'%23477f4d'%2F%3E%3Cpath%20d%3D'M-2%200C-3-12-12-21-25-31M-7-4C0-18%2011-25%2025-35M5-5C4-18-1-27-8-37M14-3c2-10%209-17%2018-22M-19-3c-2-9-8-14-16-18'%20fill%3D'none'%20stroke%3D'%23674531'%20stroke-width%3D'2.2'%20stroke-linecap%3D'round'%20opacity%3D'.78'%2F%3E%3Cellipse%20cx%3D'-23'%20cy%3D'-18'%20rx%3D'18'%20ry%3D'14'%20fill%3D'%236cab67'%2F%3E%3Cellipse%20cx%3D'-5'%20cy%3D'-28'%20rx%3D'19'%20ry%3D'16'%20fill%3D'%236cab67'%2F%3E%3Cellipse%20cx%3D'19'%20cy%3D'-23'%20rx%3D'18'%20ry%3D'15'%20fill%3D'%236cab67'%2F%3E%3Cellipse%20cx%3D'32'%20cy%3D'-12'%20rx%3D'11'%20ry%3D'10'%20fill%3D'%23477f4d'%2F%3E%3Cellipse%20cx%3D'-31'%20cy%3D'-11'%20rx%3D'12'%20ry%3D'10'%20fill%3D'%23477f4d'%2F%3E%3Cellipse%20cx%3D'-14'%20cy%3D'-32'%20rx%3D'10'%20ry%3D'7'%20fill%3D'%239bd18d'%2F%3E%3Cellipse%20cx%3D'10'%20cy%3D'-33'%20rx%3D'11'%20ry%3D'7'%20fill%3D'%239bd18d'%2F%3E%3Cellipse%20cx%3D'26'%20cy%3D'-23'%20rx%3D'8'%20ry%3D'6'%20fill%3D'%239bd18d'%2F%3E%3Cellipse%20cx%3D'-26'%20cy%3D'-24'%20rx%3D'8'%20ry%3D'6'%20fill%3D'%239bd18d'%2F%3E%3Cpath%20d%3D'M-31-14q8-5%2015%201M-11-19q9-6%2017%200M12-14q8-6%2015-1'%20fill%3D'none'%20stroke%3D'%23c2e7aa'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20opacity%3D'.68'%2F%3E%3Cg%20fill%3D'%23f8bbd0'%3E%3Ccircle%20cx%3D'-20'%20cy%3D'-30'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'3'%20cy%3D'-36'%20r%3D'1.8'%2F%3E%3Ccircle%20cx%3D'20'%20cy%3D'-27'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'-30'%20cy%3D'-18'%20r%3D'1.7'%2F%3E%3Ccircle%20cx%3D'11'%20cy%3D'-17'%20r%3D'1.6'%2F%3E%3Ccircle%20cx%3D'29'%20cy%3D'-15'%20r%3D'1.7'%2F%3E%3C%2Fg%3E%3Cg%20transform%3D'translate(-19%20-27)'%3E%3Ccircle%20cx%3D'-2'%20cy%3D'0'%20r%3D'1.5'%20fill%3D'%23f8bbd0'%2F%3E%3Ccircle%20cx%3D'2'%20cy%3D'0'%20r%3D'1.5'%20fill%3D'%23f8bbd0'%2F%3E%3Ccircle%20cx%3D'0'%20cy%3D'-2'%20r%3D'1.5'%20fill%3D'%23f8bbd0'%2F%3E%3Ccircle%20cx%3D'0'%20cy%3D'2'%20r%3D'1.5'%20fill%3D'%23f8bbd0'%2F%3E%3Ccircle%20r%3D'1'%20fill%3D'%23fff4a8'%2F%3E%3C%2Fg%3E%3Cg%20transform%3D'translate(4%20-32)'%3E%3Ccircle%20cx%3D'-2'%20cy%3D'0'%20r%3D'1.5'%20fill%3D'%23fce4ec'%2F%3E%3Ccircle%20cx%3D'2'%20cy%3D'0'%20r%3D'1.5'%20fill%3D'%23fce4ec'%2F%3E%3Ccircle%20cx%3D'0'%20cy%3D'-2'%20r%3D'1.5'%20fill%3D'%23fce4ec'%2F%3E%3Ccircle%20cx%3D'0'%20cy%3D'2'%20r%3D'1.5'%20fill%3D'%23fce4ec'%2F%3E%3Ccircle%20r%3D'1'%20fill%3D'%23f5c84c'%2F%3E%3C%2Fg%3E%3Cg%20transform%3D'translate(24%20-23)'%3E%3Ccircle%20cx%3D'-2'%20cy%3D'0'%20r%3D'1.5'%20fill%3D'%23f8bbd0'%2F%3E%3Ccircle%20cx%3D'2'%20cy%3D'0'%20r%3D'1.5'%20fill%3D'%23f8bbd0'%2F%3E%3Ccircle%20cx%3D'0'%20cy%3D'-2'%20r%3D'1.5'%20fill%3D'%23f8bbd0'%2F%3E%3Ccircle%20cx%3D'0'%20cy%3D'2'%20r%3D'1.5'%20fill%3D'%23f8bbd0'%2F%3E%3Ccircle%20r%3D'1'%20fill%3D'%23fff4a8'%2F%3E%3C%2Fg%3E%3Cg%20transform%3D'translate(-4%20-15)'%3E%3Ccircle%20cx%3D'-2'%20cy%3D'0'%20r%3D'1.5'%20fill%3D'%23fff0f5'%2F%3E%3Ccircle%20cx%3D'2'%20cy%3D'0'%20r%3D'1.5'%20fill%3D'%23fff0f5'%2F%3E%3Ccircle%20cx%3D'0'%20cy%3D'-2'%20r%3D'1.5'%20fill%3D'%23fff0f5'%2F%3E%3Ccircle%20cx%3D'0'%20cy%3D'2'%20r%3D'1.5'%20fill%3D'%23fff0f5'%2F%3E%3Ccircle%20r%3D'1'%20fill%3D'%23f5c84c'%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20transform%3D'translate(956%2028)%20scale(1.08)'%3E%3Cellipse%20cx%3D'0'%20cy%3D'-1'%20rx%3D'38'%20ry%3D'4'%20fill%3D'%23000'%20opacity%3D'.16'%2F%3E%3Cpath%20d%3D'M-42-5C-45-17-37-27-25-27c0-11%2011-17%2021-12%208-11%2024-8%2028%204%2012-1%2020%209%2016%2020%2010%206%206%2018-6%2021-19%206-57%205-76-11Z'%20fill%3D'%23477f4d'%2F%3E%3Cpath%20d%3D'M-2%200C-3-12-12-21-25-31M-7-4C0-18%2011-25%2025-35M5-5C4-18-1-27-8-37M14-3c2-10%209-17%2018-22M-19-3c-2-9-8-14-16-18'%20fill%3D'none'%20stroke%3D'%23674531'%20stroke-width%3D'2.2'%20stroke-linecap%3D'round'%20opacity%3D'.78'%2F%3E%3Cellipse%20cx%3D'-23'%20cy%3D'-18'%20rx%3D'18'%20ry%3D'14'%20fill%3D'%236cab67'%2F%3E%3Cellipse%20cx%3D'-5'%20cy%3D'-28'%20rx%3D'19'%20ry%3D'16'%20fill%3D'%236cab67'%2F%3E%3Cellipse%20cx%3D'19'%20cy%3D'-23'%20rx%3D'18'%20ry%3D'15'%20fill%3D'%236cab67'%2F%3E%3Cellipse%20cx%3D'32'%20cy%3D'-12'%20rx%3D'11'%20ry%3D'10'%20fill%3D'%23477f4d'%2F%3E%3Cellipse%20cx%3D'-31'%20cy%3D'-11'%20rx%3D'12'%20ry%3D'10'%20fill%3D'%23477f4d'%2F%3E%3Cellipse%20cx%3D'-14'%20cy%3D'-32'%20rx%3D'10'%20ry%3D'7'%20fill%3D'%239bd18d'%2F%3E%3Cellipse%20cx%3D'10'%20cy%3D'-33'%20rx%3D'11'%20ry%3D'7'%20fill%3D'%239bd18d'%2F%3E%3Cellipse%20cx%3D'26'%20cy%3D'-23'%20rx%3D'8'%20ry%3D'6'%20fill%3D'%239bd18d'%2F%3E%3Cellipse%20cx%3D'-26'%20cy%3D'-24'%20rx%3D'8'%20ry%3D'6'%20fill%3D'%239bd18d'%2F%3E%3Cpath%20d%3D'M-31-14q8-5%2015%201M-11-19q9-6%2017%200M12-14q8-6%2015-1'%20fill%3D'none'%20stroke%3D'%23c2e7aa'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20opacity%3D'.68'%2F%3E%3Cg%20fill%3D'%23f8bbd0'%3E%3Ccircle%20cx%3D'-20'%20cy%3D'-30'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'3'%20cy%3D'-36'%20r%3D'1.8'%2F%3E%3Ccircle%20cx%3D'20'%20cy%3D'-27'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'-30'%20cy%3D'-18'%20r%3D'1.7'%2F%3E%3Ccircle%20cx%3D'11'%20cy%3D'-17'%20r%3D'1.6'%2F%3E%3Ccircle%20cx%3D'29'%20cy%3D'-15'%20r%3D'1.7'%2F%3E%3C%2Fg%3E%3Cg%20transform%3D'translate(-19%20-27)'%3E%3Ccircle%20cx%3D'-2'%20cy%3D'0'%20r%3D'1.5'%20fill%3D'%23f8bbd0'%2F%3E%3Ccircle%20cx%3D'2'%20cy%3D'0'%20r%3D'1.5'%20fill%3D'%23f8bbd0'%2F%3E%3Ccircle%20cx%3D'0'%20cy%3D'-2'%20r%3D'1.5'%20fill%3D'%23f8bbd0'%2F%3E%3Ccircle%20cx%3D'0'%20cy%3D'2'%20r%3D'1.5'%20fill%3D'%23f8bbd0'%2F%3E%3Ccircle%20r%3D'1'%20fill%3D'%23fff4a8'%2F%3E%3C%2Fg%3E%3Cg%20transform%3D'translate(4%20-32)'%3E%3Ccircle%20cx%3D'-2'%20cy%3D'0'%20r%3D'1.5'%20fill%3D'%23fce4ec'%2F%3E%3Ccircle%20cx%3D'2'%20cy%3D'0'%20r%3D'1.5'%20fill%3D'%23fce4ec'%2F%3E%3Ccircle%20cx%3D'0'%20cy%3D'-2'%20r%3D'1.5'%20fill%3D'%23fce4ec'%2F%3E%3Ccircle%20cx%3D'0'%20cy%3D'2'%20r%3D'1.5'%20fill%3D'%23fce4ec'%2F%3E%3Ccircle%20r%3D'1'%20fill%3D'%23f5c84c'%2F%3E%3C%2Fg%3E%3Cg%20transform%3D'translate(24%20-23)'%3E%3Ccircle%20cx%3D'-2'%20cy%3D'0'%20r%3D'1.5'%20fill%3D'%23f8bbd0'%2F%3E%3Ccircle%20cx%3D'2'%20cy%3D'0'%20r%3D'1.5'%20fill%3D'%23f8bbd0'%2F%3E%3Ccircle%20cx%3D'0'%20cy%3D'-2'%20r%3D'1.5'%20fill%3D'%23f8bbd0'%2F%3E%3Ccircle%20cx%3D'0'%20cy%3D'2'%20r%3D'1.5'%20fill%3D'%23f8bbd0'%2F%3E%3Ccircle%20r%3D'1'%20fill%3D'%23fff4a8'%2F%3E%3C%2Fg%3E%3Cg%20transform%3D'translate(-4%20-15)'%3E%3Ccircle%20cx%3D'-2'%20cy%3D'0'%20r%3D'1.5'%20fill%3D'%23fff0f5'%2F%3E%3Ccircle%20cx%3D'2'%20cy%3D'0'%20r%3D'1.5'%20fill%3D'%23fff0f5'%2F%3E%3Ccircle%20cx%3D'0'%20cy%3D'-2'%20r%3D'1.5'%20fill%3D'%23fff0f5'%2F%3E%3Ccircle%20cx%3D'0'%20cy%3D'2'%20r%3D'1.5'%20fill%3D'%23fff0f5'%2F%3E%3Ccircle%20r%3D'1'%20fill%3D'%23f5c84c'%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

.foreground-autumn {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%20-46%201320%2074'%20preserveAspectRatio%3D'none'%3E%3Cg%20transform%3D'translate(306%2028)%20scale(1.2)'%3E%3Cellipse%20cx%3D'0'%20cy%3D'-1'%20rx%3D'38'%20ry%3D'4'%20fill%3D'%23000'%20opacity%3D'.16'%2F%3E%3Cpath%20d%3D'M-42-5C-45-17-37-27-25-27c0-11%2011-17%2021-12%208-11%2024-8%2028%204%2012-1%2020%209%2016%2020%2010%206%206%2018-6%2021-19%206-57%205-76-11Z'%20fill%3D'%2375451f'%2F%3E%3Cpath%20d%3D'M-2%200C-3-12-12-21-25-31M-7-4C0-18%2011-25%2025-35M5-5C4-18-1-27-8-37M14-3c2-10%209-17%2018-22M-19-3c-2-9-8-14-16-18'%20fill%3D'none'%20stroke%3D'%23654029'%20stroke-width%3D'2.2'%20stroke-linecap%3D'round'%20opacity%3D'.78'%2F%3E%3Cellipse%20cx%3D'-23'%20cy%3D'-18'%20rx%3D'18'%20ry%3D'14'%20fill%3D'%23a4622e'%2F%3E%3Cellipse%20cx%3D'-5'%20cy%3D'-28'%20rx%3D'19'%20ry%3D'16'%20fill%3D'%23a4622e'%2F%3E%3Cellipse%20cx%3D'19'%20cy%3D'-23'%20rx%3D'18'%20ry%3D'15'%20fill%3D'%23a4622e'%2F%3E%3Cellipse%20cx%3D'32'%20cy%3D'-12'%20rx%3D'11'%20ry%3D'10'%20fill%3D'%2375451f'%2F%3E%3Cellipse%20cx%3D'-31'%20cy%3D'-11'%20rx%3D'12'%20ry%3D'10'%20fill%3D'%2375451f'%2F%3E%3Cellipse%20cx%3D'-14'%20cy%3D'-32'%20rx%3D'10'%20ry%3D'7'%20fill%3D'%23d48a3f'%2F%3E%3Cellipse%20cx%3D'10'%20cy%3D'-33'%20rx%3D'11'%20ry%3D'7'%20fill%3D'%23d48a3f'%2F%3E%3Cellipse%20cx%3D'26'%20cy%3D'-23'%20rx%3D'8'%20ry%3D'6'%20fill%3D'%23d48a3f'%2F%3E%3Cellipse%20cx%3D'-26'%20cy%3D'-24'%20rx%3D'8'%20ry%3D'6'%20fill%3D'%23d48a3f'%2F%3E%3Cpath%20d%3D'M-31-14q8-5%2015%201M-11-19q9-6%2017%200M12-14q8-6%2015-1'%20fill%3D'none'%20stroke%3D'%23efb75b'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20opacity%3D'.68'%2F%3E%3Cg%20fill%3D'%23b43e26'%3E%3Ccircle%20cx%3D'-20'%20cy%3D'-30'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'3'%20cy%3D'-36'%20r%3D'1.8'%2F%3E%3Ccircle%20cx%3D'20'%20cy%3D'-27'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'-30'%20cy%3D'-18'%20r%3D'1.7'%2F%3E%3Ccircle%20cx%3D'11'%20cy%3D'-17'%20r%3D'1.6'%2F%3E%3Ccircle%20cx%3D'29'%20cy%3D'-15'%20r%3D'1.7'%2F%3E%3C%2Fg%3E%3Cg%20fill%3D'%23c43f27'%3E%3Ccircle%20cx%3D'-18'%20cy%3D'-25'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'8'%20cy%3D'-28'%20r%3D'1.8'%2F%3E%3Ccircle%20cx%3D'25'%20cy%3D'-19'%20r%3D'1.7'%2F%3E%3C%2Fg%3E%3Cg%20fill%3D'%23f0c15a'%3E%3Cellipse%20cx%3D'-33'%20cy%3D'-5'%20rx%3D'3.5'%20ry%3D'1.5'%20transform%3D'rotate(-18%20-33%20-5)'%2F%3E%3Cellipse%20cx%3D'16'%20cy%3D'-7'%20rx%3D'3.2'%20ry%3D'1.4'%20transform%3D'rotate(18%2016%20-7)'%2F%3E%3Cellipse%20cx%3D'34'%20cy%3D'-2'%20rx%3D'3'%20ry%3D'1.4'%20transform%3D'rotate(-10%2034%20-2)'%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20transform%3D'translate(956%2028)%20scale(1.08)'%3E%3Cellipse%20cx%3D'0'%20cy%3D'-1'%20rx%3D'38'%20ry%3D'4'%20fill%3D'%23000'%20opacity%3D'.16'%2F%3E%3Cpath%20d%3D'M-42-5C-45-17-37-27-25-27c0-11%2011-17%2021-12%208-11%2024-8%2028%204%2012-1%2020%209%2016%2020%2010%206%206%2018-6%2021-19%206-57%205-76-11Z'%20fill%3D'%2375451f'%2F%3E%3Cpath%20d%3D'M-2%200C-3-12-12-21-25-31M-7-4C0-18%2011-25%2025-35M5-5C4-18-1-27-8-37M14-3c2-10%209-17%2018-22M-19-3c-2-9-8-14-16-18'%20fill%3D'none'%20stroke%3D'%23654029'%20stroke-width%3D'2.2'%20stroke-linecap%3D'round'%20opacity%3D'.78'%2F%3E%3Cellipse%20cx%3D'-23'%20cy%3D'-18'%20rx%3D'18'%20ry%3D'14'%20fill%3D'%23a4622e'%2F%3E%3Cellipse%20cx%3D'-5'%20cy%3D'-28'%20rx%3D'19'%20ry%3D'16'%20fill%3D'%23a4622e'%2F%3E%3Cellipse%20cx%3D'19'%20cy%3D'-23'%20rx%3D'18'%20ry%3D'15'%20fill%3D'%23a4622e'%2F%3E%3Cellipse%20cx%3D'32'%20cy%3D'-12'%20rx%3D'11'%20ry%3D'10'%20fill%3D'%2375451f'%2F%3E%3Cellipse%20cx%3D'-31'%20cy%3D'-11'%20rx%3D'12'%20ry%3D'10'%20fill%3D'%2375451f'%2F%3E%3Cellipse%20cx%3D'-14'%20cy%3D'-32'%20rx%3D'10'%20ry%3D'7'%20fill%3D'%23d48a3f'%2F%3E%3Cellipse%20cx%3D'10'%20cy%3D'-33'%20rx%3D'11'%20ry%3D'7'%20fill%3D'%23d48a3f'%2F%3E%3Cellipse%20cx%3D'26'%20cy%3D'-23'%20rx%3D'8'%20ry%3D'6'%20fill%3D'%23d48a3f'%2F%3E%3Cellipse%20cx%3D'-26'%20cy%3D'-24'%20rx%3D'8'%20ry%3D'6'%20fill%3D'%23d48a3f'%2F%3E%3Cpath%20d%3D'M-31-14q8-5%2015%201M-11-19q9-6%2017%200M12-14q8-6%2015-1'%20fill%3D'none'%20stroke%3D'%23efb75b'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20opacity%3D'.68'%2F%3E%3Cg%20fill%3D'%23b43e26'%3E%3Ccircle%20cx%3D'-20'%20cy%3D'-30'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'3'%20cy%3D'-36'%20r%3D'1.8'%2F%3E%3Ccircle%20cx%3D'20'%20cy%3D'-27'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'-30'%20cy%3D'-18'%20r%3D'1.7'%2F%3E%3Ccircle%20cx%3D'11'%20cy%3D'-17'%20r%3D'1.6'%2F%3E%3Ccircle%20cx%3D'29'%20cy%3D'-15'%20r%3D'1.7'%2F%3E%3C%2Fg%3E%3Cg%20fill%3D'%23c43f27'%3E%3Ccircle%20cx%3D'-18'%20cy%3D'-25'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'8'%20cy%3D'-28'%20r%3D'1.8'%2F%3E%3Ccircle%20cx%3D'25'%20cy%3D'-19'%20r%3D'1.7'%2F%3E%3C%2Fg%3E%3Cg%20fill%3D'%23f0c15a'%3E%3Cellipse%20cx%3D'-33'%20cy%3D'-5'%20rx%3D'3.5'%20ry%3D'1.5'%20transform%3D'rotate(-18%20-33%20-5)'%2F%3E%3Cellipse%20cx%3D'16'%20cy%3D'-7'%20rx%3D'3.2'%20ry%3D'1.4'%20transform%3D'rotate(18%2016%20-7)'%2F%3E%3Cellipse%20cx%3D'34'%20cy%3D'-2'%20rx%3D'3'%20ry%3D'1.4'%20transform%3D'rotate(-10%2034%20-2)'%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

.foreground-winter {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%20-46%201320%2074'%20preserveAspectRatio%3D'none'%3E%3Cg%20transform%3D'translate(306%2028)%20scale(1.2)'%3E%3Cellipse%20cx%3D'0'%20cy%3D'-1'%20rx%3D'38'%20ry%3D'4'%20fill%3D'%23000'%20opacity%3D'.16'%2F%3E%3Cpath%20d%3D'M-42-5C-45-17-37-27-25-27c0-11%2011-17%2021-12%208-11%2024-8%2028%204%2012-1%2020%209%2016%2020%2010%206%206%2018-6%2021-19%206-57%205-76-11Z'%20fill%3D'%2359645f'%2F%3E%3Cpath%20d%3D'M-2%200C-3-12-12-21-25-31M-7-4C0-18%2011-25%2025-35M5-5C4-18-1-27-8-37M14-3c2-10%209-17%2018-22M-19-3c-2-9-8-14-16-18'%20fill%3D'none'%20stroke%3D'%235f4b3d'%20stroke-width%3D'2.2'%20stroke-linecap%3D'round'%20opacity%3D'.78'%2F%3E%3Cellipse%20cx%3D'-23'%20cy%3D'-18'%20rx%3D'18'%20ry%3D'14'%20fill%3D'%237c8a84'%2F%3E%3Cellipse%20cx%3D'-5'%20cy%3D'-28'%20rx%3D'19'%20ry%3D'16'%20fill%3D'%237c8a84'%2F%3E%3Cellipse%20cx%3D'19'%20cy%3D'-23'%20rx%3D'18'%20ry%3D'15'%20fill%3D'%237c8a84'%2F%3E%3Cellipse%20cx%3D'32'%20cy%3D'-12'%20rx%3D'11'%20ry%3D'10'%20fill%3D'%2359645f'%2F%3E%3Cellipse%20cx%3D'-31'%20cy%3D'-11'%20rx%3D'12'%20ry%3D'10'%20fill%3D'%2359645f'%2F%3E%3Cellipse%20cx%3D'-14'%20cy%3D'-32'%20rx%3D'10'%20ry%3D'7'%20fill%3D'%23aebbb6'%2F%3E%3Cellipse%20cx%3D'10'%20cy%3D'-33'%20rx%3D'11'%20ry%3D'7'%20fill%3D'%23aebbb6'%2F%3E%3Cellipse%20cx%3D'26'%20cy%3D'-23'%20rx%3D'8'%20ry%3D'6'%20fill%3D'%23aebbb6'%2F%3E%3Cellipse%20cx%3D'-26'%20cy%3D'-24'%20rx%3D'8'%20ry%3D'6'%20fill%3D'%23aebbb6'%2F%3E%3Cpath%20d%3D'M-31-14q8-5%2015%201M-11-19q9-6%2017%200M12-14q8-6%2015-1'%20fill%3D'none'%20stroke%3D'%23d5dfdc'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20opacity%3D'.68'%2F%3E%3Cg%20fill%3D'%23eef4f8'%3E%3Ccircle%20cx%3D'-20'%20cy%3D'-30'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'3'%20cy%3D'-36'%20r%3D'1.8'%2F%3E%3Ccircle%20cx%3D'20'%20cy%3D'-27'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'-30'%20cy%3D'-18'%20r%3D'1.7'%2F%3E%3Ccircle%20cx%3D'11'%20cy%3D'-17'%20r%3D'1.6'%2F%3E%3Ccircle%20cx%3D'29'%20cy%3D'-15'%20r%3D'1.7'%2F%3E%3C%2Fg%3E%3Cg%20fill%3D'%23eef4f8'%3E%3Cpath%20d%3D'M-31-18q8-6%2016%200-8%203-16%200Z'%2F%3E%3Cpath%20d%3D'M-8-29q10-7%2020%200-10%203-20%200Z'%2F%3E%3Cpath%20d%3D'M15-20q9-6%2018%200-9%203-18%200Z'%2F%3E%3Cellipse%20cx%3D'-19'%20cy%3D'-7'%20rx%3D'6'%20ry%3D'2'%2F%3E%3Cellipse%20cx%3D'22'%20cy%3D'-5'%20rx%3D'5'%20ry%3D'1.8'%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20transform%3D'translate(956%2028)%20scale(1.08)'%3E%3Cellipse%20cx%3D'0'%20cy%3D'-1'%20rx%3D'38'%20ry%3D'4'%20fill%3D'%23000'%20opacity%3D'.16'%2F%3E%3Cpath%20d%3D'M-42-5C-45-17-37-27-25-27c0-11%2011-17%2021-12%208-11%2024-8%2028%204%2012-1%2020%209%2016%2020%2010%206%206%2018-6%2021-19%206-57%205-76-11Z'%20fill%3D'%2359645f'%2F%3E%3Cpath%20d%3D'M-2%200C-3-12-12-21-25-31M-7-4C0-18%2011-25%2025-35M5-5C4-18-1-27-8-37M14-3c2-10%209-17%2018-22M-19-3c-2-9-8-14-16-18'%20fill%3D'none'%20stroke%3D'%235f4b3d'%20stroke-width%3D'2.2'%20stroke-linecap%3D'round'%20opacity%3D'.78'%2F%3E%3Cellipse%20cx%3D'-23'%20cy%3D'-18'%20rx%3D'18'%20ry%3D'14'%20fill%3D'%237c8a84'%2F%3E%3Cellipse%20cx%3D'-5'%20cy%3D'-28'%20rx%3D'19'%20ry%3D'16'%20fill%3D'%237c8a84'%2F%3E%3Cellipse%20cx%3D'19'%20cy%3D'-23'%20rx%3D'18'%20ry%3D'15'%20fill%3D'%237c8a84'%2F%3E%3Cellipse%20cx%3D'32'%20cy%3D'-12'%20rx%3D'11'%20ry%3D'10'%20fill%3D'%2359645f'%2F%3E%3Cellipse%20cx%3D'-31'%20cy%3D'-11'%20rx%3D'12'%20ry%3D'10'%20fill%3D'%2359645f'%2F%3E%3Cellipse%20cx%3D'-14'%20cy%3D'-32'%20rx%3D'10'%20ry%3D'7'%20fill%3D'%23aebbb6'%2F%3E%3Cellipse%20cx%3D'10'%20cy%3D'-33'%20rx%3D'11'%20ry%3D'7'%20fill%3D'%23aebbb6'%2F%3E%3Cellipse%20cx%3D'26'%20cy%3D'-23'%20rx%3D'8'%20ry%3D'6'%20fill%3D'%23aebbb6'%2F%3E%3Cellipse%20cx%3D'-26'%20cy%3D'-24'%20rx%3D'8'%20ry%3D'6'%20fill%3D'%23aebbb6'%2F%3E%3Cpath%20d%3D'M-31-14q8-5%2015%201M-11-19q9-6%2017%200M12-14q8-6%2015-1'%20fill%3D'none'%20stroke%3D'%23d5dfdc'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20opacity%3D'.68'%2F%3E%3Cg%20fill%3D'%23eef4f8'%3E%3Ccircle%20cx%3D'-20'%20cy%3D'-30'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'3'%20cy%3D'-36'%20r%3D'1.8'%2F%3E%3Ccircle%20cx%3D'20'%20cy%3D'-27'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'-30'%20cy%3D'-18'%20r%3D'1.7'%2F%3E%3Ccircle%20cx%3D'11'%20cy%3D'-17'%20r%3D'1.6'%2F%3E%3Ccircle%20cx%3D'29'%20cy%3D'-15'%20r%3D'1.7'%2F%3E%3C%2Fg%3E%3Cg%20fill%3D'%23eef4f8'%3E%3Cpath%20d%3D'M-31-18q8-6%2016%200-8%203-16%200Z'%2F%3E%3Cpath%20d%3D'M-8-29q10-7%2020%200-10%203-20%200Z'%2F%3E%3Cpath%20d%3D'M15-20q9-6%2018%200-9%203-18%200Z'%2F%3E%3Cellipse%20cx%3D'-19'%20cy%3D'-7'%20rx%3D'6'%20ry%3D'2'%2F%3E%3Cellipse%20cx%3D'22'%20cy%3D'-5'%20rx%3D'5'%20ry%3D'1.8'%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

/* Znaki drogowe miejscowości (zielona tablica E-17a na dwóch słupkach):
   start = miejscowość początkowa przy linii startu, koniec = docelowa na końcu drogi (zamiast mety). */
.city-sign {
  position: absolute;
  bottom: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
}

/* The origin sign stands on the 0 km line - the point the car's front occupies before the trip
   moves - so the covered fill grows from the sign onwards, mirroring the destination sign on the
   100% line. TripProgress feeds --start-sign-left from the same constants that place the car;
   TripReplay maps progress linearly from the very left edge, so it keeps the 1% fallback. */
.city-sign.start {
  left: var(--start-sign-left, 1%);
}

.city-sign.end {
  right: 1%;
}

.cs-board {
  background: #0e7a3c;
  color: #fff;
  font-weight: 700;
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  line-height: 1;
  padding: 5px 10px;
  border-radius: 4px;
  border: 2px solid #f2f4f0;
  box-shadow: inset 0 0 0 1.5px #0b6330, 0 2px 4px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.4px;
}

.cs-posts {
  display: flex;
  gap: 9px;
  height: 24px;
}

.cs-posts i {
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, #d8dbe0, #7d828b);
}

.road-stage-full .city-sign {
  bottom: 210px;
}

.road-stage-full .cs-board {
  font-size: 15px;
  padding: 7px 14px;
  border-width: 2.5px;
}

.road-stage-full .cs-posts {
  height: 46px;
  gap: 14px;
}

.road-stage-full .cs-posts i {
  width: 4px;
}

/* --- powtórka trasy (TripReplay, strona podsumowania) - mały, samodzielny scen, NIE sygnatura;
   dzieli klasy .road-stage/.road-sky/.grass/.city-sign z TripProgress dla spójnego wyglądu, ale
   bez animacji przewijania tła (statyczna droga, jedzie tylko auto) i bez logiki GPS/konwoju.
   Auto renderuje TERAZ realne zdjęcie pojazdu + głowy załogi (współdzielone helpery z
   TripProgress, patrz vehicle_crew.jsx) zamiast generycznej ikony - jak .car-unit, .replay-car
   nie ustawia własnej szerokości (dopasowuje się do .car-photo-wrap/.car-svg-wrap poniżej), więc
   .car-crew (inset:0) trafia dokładnie w tę samą ramkę. --- */
.replay-stage {
  margin-bottom: 10px;
}

/* `left` is the replay's completed percentage, so the vehicle's FRONT/right edge—not its
   midpoint—must touch the edge of .road-progress. This also lets it arrive fully on-screen. */
.replay-car {
  position: absolute;
  bottom: 14px;
  z-index: 4;
  transform: translateX(-100%);
  pointer-events: none;
}

.replay-car .car-svg-wrap, .replay-car .car-photo-wrap {
  width: 96px;
}

.replay-car.driving {
  animation: replayCarBob 0.45s ease-in-out infinite;
}

.replay-car.driving .svg-wheel::before {
  transform: rotate(var(--wheel-angle, 0deg));
}

.replay-car .photo-wheel-img {
  transform: translate(-50%, -50%) rotate(var(--photo-wheel-angle, 0deg));
}

.replay-cloud {
  left: 0;
  width: 72px;
  height: 36px;
}

.replay-celestial {
  left: 22%;
  top: 26%;
  width: 42px;
  height: 42px;
}

@keyframes replayCarBob {
  0%, 100% {
    transform: translateX(-100%) translateY(0);
  }
  50% {
    transform: translateX(-100%) translateY(-2px);
  }
}
/* Rare, clickable wildlife encounters. They occupy the shoulder/sky, never the driving lane;
   a soft halo and label make the affordance discoverable without turning it into game HUD. */
.wildlife-sighting {
  position: absolute;
  z-index: 3;
  left: calc(100% + 24px);
  transform: translateX(calc(var(--encounter-road-phase, 0px) + var(--encounter-start-phase, 0px)));
  --ground-clip:8px;
  bottom: 80px;
  width: 109px;
  height: 90px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f7f4ee;
  cursor: pointer;
  /* Cel stukania: przeciągnięcie ZACZĘTE na zwierzaku ma zostać połknięte w całości, a długie
     przytrzymanie nie ma otwierać menu zaznaczania/kopiowania nad sceną. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.3));
  will-change: transform;
}

/* z-index:3 (above the roadside trees/bushes/grass at 2), never below: a collectible has to stay
   visible and tappable for its whole pass across the scene. A `.behind-scenery` variant used to
   drop some encounters to z-index:1 for depth - a tree could then swallow one whole, so it is gone
   (see TripProgress.jsx). */
.wildlife-deer, .wildlife-fox, .wildlife-hare, .wildlife-hedgehog, .wildlife-boar,
.wildlife-moose, .wildlife-bison, .wildlife-stork, .wildlife-crane {
  transform: translateX(calc(var(--encounter-road-phase, 0px) + var(--encounter-start-phase, 0px) + var(--animal-self-phase, 0px)));
}

.wildlife-sighting svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transition: filter 0.18s ease;
}

.encounter-art {
  position: absolute;
  inset: 0;
  display: block;
  animation: encounterReveal 1.15s cubic-bezier(0.18, 0.8, 0.24, 1) both;
}

.wildlife-stork .encounter-art, .wildlife-crane .encounter-art {
  animation-name: flyingEncounterReveal;
}

.wildlife-family {
  animation: familyGather 1.35s cubic-bezier(0.2, 0.78, 0.2, 1) both;
}

.entrance-fox .fox-head, .entrance-fox .fox-ear {
  transform-box: fill-box;
  transform-origin: right bottom;
  animation: foxLookBack 2.4s ease-in-out 1;
}

.entrance-deer .animal-neck {
  transform-box: fill-box;
  transform-origin: right bottom;
  animation: deerHeadRaise 2.2s ease-out 1;
}

.entrance-owl .owl-eye {
  animation: owlDiscoveryBlink 1.8s ease-in-out 1;
}

.entrance-stork, .entrance-crane {
  transform-origin: center;
  animation: birdDiscoveryBank 1.8s ease-out 1;
}

.encounter-spotlight {
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 4px;
  width: 145%;
  height: 105%;
  transform: translateX(-50%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 72%, rgba(255, 238, 164, 0.32), rgba(255, 238, 164, 0.08) 42%, transparent 70%);
  animation: encounterSpotlight 1.6s ease-out both;
}

.encounter-spotlight::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 8%;
  bottom: 2px;
  height: 10px;
  border-radius: 50%;
  background: repeating-linear-gradient(82deg, transparent 0 8px, rgba(196, 238, 131, 0.38) 9px 11px, transparent 12px 16px);
  transform-origin: bottom;
  animation: encounterGrassPart 1.25s ease-out both;
}

.encounter-particles {
  position: absolute;
  z-index: 4;
  inset: -8px;
  overflow: visible;
  pointer-events: none;
}

.encounter-particles i {
  position: absolute;
  left: 50%;
  top: 55%;
  opacity: 0;
  animation: contextParticle 2.2s ease-out var(--particle-delay) 1;
}

.wildlife-sighting:not(.encounter-revealed) .encounter-art,
.wildlife-sighting:not(.encounter-revealed) .wildlife-family,
.wildlife-sighting:not(.encounter-revealed) .encounter-spotlight,
.wildlife-sighting:not(.encounter-revealed) .encounter-spotlight::after,
.wildlife-sighting:not(.encounter-revealed) .encounter-particles i,
.wildlife-sighting:not(.encounter-revealed) .fox-head,
.wildlife-sighting:not(.encounter-revealed) .fox-ear,
.wildlife-sighting:not(.encounter-revealed) .animal-neck {
  animation-play-state: paused;
}

.wildlife-sighting:not(.encounter-revealed) .entrance-stork,
.wildlife-sighting:not(.encounter-revealed) .entrance-crane,
.wildlife-sighting:not(.encounter-revealed) .entrance-owl .owl-eye {
  animation-play-state: paused;
}

.particles-track i {
  width: 7px;
  height: 5px;
  border: 2px solid rgba(96, 67, 44, 0.62);
  border-radius: 55% 45% 60% 40%;
  transform: rotate(-18deg);
}

.particles-feather i {
  width: 4px;
  height: 11px;
  border-radius: 100% 0 100% 0;
  background: rgba(247, 244, 238, 0.82);
  box-shadow: inset -1px 0 rgba(85, 94, 98, 0.45);
}

.particles-pollen i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #f1a9c6;
  box-shadow: 0 0 5px rgba(241, 169, 198, 0.72);
}

.particles-spark i {
  width: 7px;
  height: 7px;
  background: #fff0a1;
  clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%);
  box-shadow: 0 0 7px #ffd84f;
}

.wildlife-sighting.lucky .encounter-spotlight {
  background: radial-gradient(ellipse at 50% 72%, rgba(255, 223, 92, 0.5), rgba(255, 205, 62, 0.13) 46%, transparent 72%);
}

@keyframes encounterReveal {
  0% {
    opacity: 0;
    transform: translateY(11px) scale(0.94);
  }
  45% {
    opacity: 1;
    transform: translateY(-2px) scale(1.015);
  }
  100% {
    transform: none;
  }
}
@keyframes flyingEncounterReveal {
  0% {
    opacity: 0;
    transform: translate(18px, -13px) rotate(7deg) scale(0.92);
  }
  62% {
    opacity: 1;
    transform: translate(-2px, 2px) rotate(-2deg);
  }
  100% {
    transform: none;
  }
}
@keyframes familyGather {
  0% {
    column-gap: 0;
    transform: scale(0.92);
  }
  55% {
    column-gap: 3px;
  }
  100% {
    column-gap: 7px;
    transform: none;
  }
}
@keyframes foxLookBack {
  0%, 24% {
    transform: rotate(0);
  }
  38%, 58% {
    transform: rotate(-9deg) translateY(-1px);
  }
  76%, 100% {
    transform: none;
  }
}
@keyframes deerHeadRaise {
  0% {
    transform: rotate(7deg) translateY(3px);
  }
  48% {
    transform: rotate(-5deg) translateY(-2px);
  }
  100% {
    transform: none;
  }
}
@keyframes owlDiscoveryBlink {
  0%, 14%, 22%, 31%, 100% {
    transform: scaleY(1);
  }
  18%, 27% {
    transform: scaleY(0.06);
  }
}
@keyframes birdDiscoveryBank {
  0% {
    transform: rotate(8deg) translateY(-5px);
  }
  55% {
    transform: rotate(-4deg) translateY(3px);
  }
  100% {
    transform: none;
  }
}
@keyframes encounterSpotlight {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.55);
  }
  28% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scale(1.08);
  }
}
@keyframes encounterGrassPart {
  0% {
    opacity: 0;
    transform: scaleX(0.4) skewX(0);
  }
  32% {
    opacity: 1;
    transform: scaleX(1.1) skewX(-14deg);
  }
  100% {
    opacity: 0;
    transform: scaleX(1) skewX(5deg);
  }
}
@keyframes contextParticle {
  0% {
    opacity: 0;
    transform: translate(var(--particle-start-x), var(--particle-start-y)) rotate(-35deg) scale(0.6);
  }
  18% {
    opacity: 0.9;
  }
  55% {
    opacity: 0.72;
  }
  100% {
    opacity: 0;
    transform: translate(var(--particle-end-x), var(--particle-end-y)) rotate(150deg) scale(0.72);
  }
}
.wildlife-deer svg, .wildlife-fox svg, .wildlife-hare svg, .wildlife-boar svg, .wildlife-moose svg, .wildlife-bison svg {
  transform-origin: center bottom;
  animation: groundBodyMotion 1.9s ease-in-out infinite;
}

.wildlife-hedgehog svg {
  transform: scaleX(-1);
  transform-origin: center bottom;
  animation: hedgehogBodyMotion 1.7s ease-in-out infinite;
}

.wildlife-sighting:not(.wildlife-stork):not(.wildlife-crane) svg {
  clip-path: inset(0 0 var(--ground-clip) 0);
}

.wildlife-sighting:not(.wildlife-stork):not(.wildlife-crane) .scene-shadow {
  display: none;
}

.wildlife-sighting:hover svg, .wildlife-sighting:focus-visible svg {
  filter: brightness(1.08) saturate(1.08);
}

.wildlife-sighting:focus-visible {
  outline: 2px solid #f5c84c;
  outline-offset: 5px;
  border-radius: 12px;
}

.wildlife-stork, .wildlife-crane {
  bottom: calc(88px + 18%);
  width: 106px;
}

.wildlife-hare {
  width: 83px;
  height: 73px;
}

.wildlife-owl {
  width: 68px;
  height: 66px;
}

.wildlife-hedgehog {
  width: 73px;
  height: 61px;
}

.wildlife-autumn_mushroom {
  width: 64px;
  height: 61px;
}

.wildlife-deer {
  width: 97px;
  height: 83px;
}

.wildlife-fox {
  width: 76px;
  height: 66px;
}

.wildlife-spring_blossom {
  width: 61px;
  height: 61px;
}

.wildlife-summer_sunflower {
  width: 57px;
  height: 61px;
}

.wildlife-sighting.encounter-landmark {
  width: 139px;
  height: 116px;
}

.wildlife-sighting.family {
  width: clamp(378px, 56vw, 508px);
  height: 109px;
}

.wildlife-family {
  --family-adult-width:97px;
  --family-adult-height:83px;
  --family-young-width:54px;
  --family-young-height:47px;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  column-gap: 7px;
  pointer-events: none;
}

.wildlife-sighting.family:not(.wildlife-stork):not(.wildlife-crane) .wildlife-family {
  /* One mask for the complete formation: member transforms and staggered rows can never leak
     through the verge. Negative horizontal insets preserve the trailing edge of wide families. */
  clip-path: inset(0 -110px var(--ground-clip) -10px);
}

.wildlife-family .family-member {
  position: relative;
  flex: 0 0 var(--family-adult-width);
  width: var(--family-adult-width);
  height: var(--family-adult-height);
  transform-origin: center bottom;
  transform: translate(var(--family-lag, 0), calc(var(--family-row) * 2px));
}

.wildlife-family .family-adult:nth-child(2) {
  transform: translate(var(--family-lag, 0), 1px) scale(0.86);
}

.wildlife-family .family-young {
  flex-basis: var(--family-young-width);
  width: var(--family-young-width);
  height: var(--family-young-height);
  transform: translate(var(--family-lag, 0), calc(var(--family-row) * 3px));
}

.wildlife-family .family-young:nth-child(odd) {
  transform: translate(var(--family-lag, 0), calc(var(--family-row) * 3px)) scale(0.92);
}

.wildlife-family .family-young:nth-child(even) {
  transform: translate(var(--family-lag, 0), calc(var(--family-row) * 3px)) scale(1.04);
}

.wildlife-family .family-member:nth-child(2) svg,
.wildlife-family .family-member:nth-child(2) svg * {
  animation-delay: -0.31s;
}

.wildlife-family .family-member:nth-child(3) svg,
.wildlife-family .family-member:nth-child(3) svg * {
  animation-delay: -0.67s;
}

.wildlife-family .family-member:nth-child(4) svg,
.wildlife-family .family-member:nth-child(4) svg * {
  animation-delay: -1.03s;
}

.wildlife-family .family-member:nth-child(5) svg,
.wildlife-family .family-member:nth-child(5) svg * {
  animation-delay: -1.41s;
}

.wildlife-family .family-member:nth-child(6) svg,
.wildlife-family .family-member:nth-child(6) svg * {
  animation-delay: -1.79s;
}

.wildlife-sighting.family.wildlife-hedgehog .wildlife-family {
  --family-adult-width:73px;
  --family-adult-height:61px;
  --family-young-width:41px;
  --family-young-height:35px;
}

.wildlife-sighting.family.wildlife-fox .wildlife-family {
  --family-adult-width:76px;
  --family-adult-height:66px;
  --family-young-width:42px;
  --family-young-height:38px;
}

.wildlife-sighting.family.wildlife-hare .wildlife-family {
  --family-adult-width:83px;
  --family-adult-height:73px;
  --family-young-width:46px;
  --family-young-height:41px;
}

.wildlife-sighting.family.wildlife-stork .wildlife-family,
.wildlife-sighting.family.wildlife-crane .wildlife-family {
  --family-adult-width:106px;
  --family-adult-height:80px;
  --family-young-width:60px;
  --family-young-height:45px;
}

/* Znalezisko, które złapał KTOŚ INNY (obserwator albo kierowca): obwódka + na chwilę nick tego,
   kto był szybszy. Nie znika i nie blokuje - każdy zbiera niezależnie, więc to informacja, nie
   zamknięta furtka (decyzja właściciela 2026-07-28). */
.encounter-claim-ring {
  position: absolute;
  z-index: 5;
  inset: -9px -7px -4px -7px;
  border-radius: 14px;
  border: 2px dashed var(--teal);
  box-shadow: 0 0 12px rgba(42, 157, 157, 0.45);
  pointer-events: none;
  animation: claimRingIn 0.5s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

.encounter-claim-name {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  padding: 2px 8px;
  border-radius: 99px;
  white-space: nowrap;
  background: rgba(20, 24, 31, 0.86);
  border: 1px solid rgba(42, 157, 157, 0.6);
  color: var(--cream);
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  font-weight: 600;
  animation: claimNameFloat 2.6s ease-out both;
}

@keyframes claimRingIn {
  0% {
    opacity: 0;
    transform: scale(0.82);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes claimNameFloat {
  0% {
    opacity: 0;
    transform: translate(-50%, 6px);
  }
  14% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  76% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -9px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .encounter-claim-ring, .encounter-claim-name {
    animation: none;
  }
}
/* Podsumowanie zbiorów obserwatora na ekranie końca trasy. */
.finish-haul {
  margin: 12px 0 2px;
  padding: 10px 12px;
  border-radius: 14px;
  text-align: center;
  background: rgba(42, 157, 157, 0.14);
  border: 1px solid rgba(42, 157, 157, 0.45);
}

.finish-haul-count {
  font-family: "Outfit", sans-serif;
  font-size: 14px;
  color: var(--cream);
}

.finish-haul-count b {
  font-size: 20px;
  color: var(--lane);
}

.finish-haul-species {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  margin-top: 7px;
}

.finish-haul-species span {
  padding: 2px 8px;
  border-radius: 99px;
  background: rgba(247, 244, 238, 0.1);
  font-size: 11px;
  color: var(--cream-dim);
}

.wildlife-sighting.lucky {
  filter: drop-shadow(0 0 9px #f5c84c) drop-shadow(0 5px 8px rgba(0, 0, 0, 0.3));
}

.wildlife-sighting.collected {
  filter: drop-shadow(0 0 7px rgba(255, 116, 137, 0.72)) drop-shadow(0 5px 8px rgba(0, 0, 0, 0.3));
}

.lucky-sparks {
  position: absolute;
  inset: -6px;
  overflow: visible;
  pointer-events: none;
}

.lucky-sparks i {
  position: absolute;
  color: #fff0a1;
  font-style: normal;
  line-height: 1;
  opacity: 0.28;
  filter: drop-shadow(0 0 3px rgba(255, 218, 82, 0.75));
  animation: luckyTwinkle 2.8s ease-in-out infinite;
}

.lucky-sparks i:nth-child(1) {
  left: 8%;
  top: 19%;
  font-size: 11px;
  animation-delay: -0.4s;
}

.lucky-sparks i:nth-child(2) {
  left: 31%;
  top: -2%;
  font-size: 8px;
  animation-delay: -1.8s;
}

.lucky-sparks i:nth-child(3) {
  right: 8%;
  top: 16%;
  font-size: 13px;
  animation-delay: -1.1s;
}

.lucky-sparks i:nth-child(4) {
  right: 1%;
  top: 52%;
  font-size: 8px;
  animation-delay: -2.3s;
}

.lucky-sparks i:nth-child(5) {
  left: 20%;
  top: 62%;
  font-size: 9px;
  animation-delay: -2.7s;
}

.wildlife-stork svg, .wildlife-crane svg {
  animation: birdSoar 3.8s ease-in-out infinite alternate;
}

.bird-flight-body {
  transform-box: fill-box;
  transform-origin: center;
  animation: flightBody 3.2s ease-in-out infinite alternate;
}

.bird-wing {
  transform-box: fill-box;
  transform-origin: 12% 78%;
  animation: wingBeat 2.45s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

.flight-legs {
  transform-box: fill-box;
  transform-origin: left top;
  animation: flightLegs 3.4s ease-in-out infinite alternate;
}

.animal-legs, .hare-legs, .moose-legs {
  transform-box: fill-box;
  transform-origin: center top;
  animation: animalGait 1.8s ease-in-out infinite alternate;
}

.walk-leg {
  transform-box: fill-box;
  transform-origin: center top;
  animation: walkStep 1.9s ease-in-out infinite alternate;
}

.walk-leg-b {
  animation-direction: alternate-reverse;
}

.hedgehog-feet {
  transform-box: fill-box;
  transform-origin: center;
  animation: hedgehogStep 1.65s ease-in-out infinite alternate;
}

.fox-tail {
  transform-box: fill-box;
  transform-origin: left center;
  animation: tailSway 1.35s ease-in-out infinite alternate;
}

.boar-ear, .moose-ear, .moose-beard, .bison-beard {
  transform-box: fill-box;
  transform-origin: center top;
  animation: detailMotion 2s ease-in-out infinite alternate;
}

.fox-ear, .hare-ear {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: earListen 2.8s ease-in-out infinite;
}

.owl-eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: owlEyeBlink 3.8s ease-in-out infinite;
}

.encounter-hearts {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.encounter-hearts i {
  position: absolute;
  left: 50%;
  top: 38%;
  color: #ff7489;
  font-size: 22px;
  font-style: normal;
  opacity: 0;
  text-shadow: 0 1px 4px rgba(81, 18, 31, 0.55);
  animation: encounterHeart 1.55s ease-out infinite;
}

.encounter-hearts i:nth-child(2) {
  margin-left: 16px;
  animation-delay: 0.32s;
}

.encounter-hearts i:nth-child(3) {
  margin-left: -22px;
  animation-delay: 0.67s;
}

.encounter-hearts i:nth-child(4) {
  margin-left: 7px;
  animation-delay: 1.02s;
}

.family-member-hearts {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.family-member-hearts i {
  position: absolute;
  left: 34%;
  top: 30%;
  color: #ff7489;
  font-size: 17px;
  font-style: normal;
  opacity: 0;
  text-shadow: 0 1px 4px rgba(81, 18, 31, 0.55);
  animation: encounterHeart 1.65s ease-out infinite;
  animation-delay: var(--family-heart-delay);
}

.family-member-hearts i:nth-child(2) {
  left: 68%;
  top: 43%;
  font-size: 13px;
  animation-delay: var(--family-heart-delay-late);
}

.family-young .family-member-hearts i {
  font-size: 13px;
}

.family-young .family-member-hearts i:nth-child(2) {
  font-size: 10px;
}

.scene-shadow {
  fill: #000;
  opacity: 0.18;
}

.discovery-stone {
  fill: #8f897f;
}

.stone-light {
  fill: #b9b2a7;
}

.stone-lines {
  fill: none;
  stroke: #716b63;
  stroke-width: 2;
  opacity: 0.75;
}

.discovery-light {
  fill: #f7f4ee;
}

.roof-dark {
  fill: #554b46;
}

.lighthouse-body {
  fill: #f1eee6;
}

.lighthouse-stripe {
  fill: #d45b50;
}

.beacon-glow {
  fill: #ffe598;
  opacity: 0.55;
}

.windmill-body {
  fill: #d8c69e;
}

.windmill-blades {
  fill: #6d5140;
  transform-origin: 59px 39px;
  animation: windmillTurn 5s linear infinite;
}

.hub {
  fill: #3c342f;
}

.wood-wall {
  fill: #8b5b39;
}

.wood-roof {
  fill: #49392f;
}

.wood-lines {
  fill: none;
  stroke: #6f442d;
  stroke-width: 2;
}

.discovery-sun {
  fill: #f5c84c;
}

.seasonal-stem {
  fill: none;
  stroke: #3f7c46;
  stroke-width: 5;
  stroke-linecap: round;
}

.blossom {
  fill: #f3a8bd;
}

.blossom-core {
  fill: #ffd46c;
}

.leaf-fill, .seasonal-leaf {
  fill: #4d9a55;
}

.sunflower-petals {
  fill: #f5c84c;
}

.sunflower-core {
  fill: #6f4a27;
}

.spring-flower-pink {
  fill: #f3a8bd;
}

.spring-flower-white {
  fill: #f7f1e8;
}

.spring-flower-violet {
  fill: #9d86d8;
}

.spring-core-orange {
  fill: #ef9d45;
}

.spring-core-light {
  fill: #f5d86e;
}

.sunflower-seed-ring {
  fill: none;
  stroke: #9b7137;
  stroke-width: 2;
  stroke-dasharray: 2 2;
}

.variant-petal {
  fill: var(--flower-color, #f3a8bd);
}

.variant-flower-core {
  fill: #f3c950;
}

.variant-flower-line {
  fill: none;
  stroke: rgba(86, 55, 58, 0.5);
  stroke-width: 1.4;
  stroke-linecap: round;
}

.variant-stem {
  stroke-width: 3;
}

.variant-mushroom-stem {
  fill: #e5d0aa;
}

.variant-mushroom-cap {
  fill: var(--mushroom-color, #c8563e);
}

.variant-mushroom-spots {
  fill: #f5e3c9;
}

.variant-mushroom-gills {
  fill: none;
  stroke: rgba(88, 58, 43, 0.65);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.seasonal-leaf {
  transform-box: fill-box;
  transform-origin: right center;
  animation: seasonalLeafSway 3.6s ease-in-out infinite alternate;
}

.seasonal-leaf.leaf-b {
  transform-origin: left center;
  animation-direction: alternate-reverse;
}

.mushroom-stem {
  fill: #e8d5b5;
}

.mushroom-cap {
  fill: #c8563e;
}

.mushroom-spots {
  fill: #f4dfc5;
}

.mushroom-cap-red {
  fill: #c8563e;
}

.mushroom-cap-gold {
  fill: #d99a39;
}

.mushroom-cap-brown {
  fill: #8d5b3f;
}

.mushroom-stem-small {
  fill: #ead6ae;
}

.mushroom-stem-tall {
  fill: #d9c49f;
}

.mushroom-gills {
  fill: none;
  stroke: #78503d;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.snow-patch {
  fill: #eef4f8;
  opacity: 0.9;
}

.tracks {
  fill: #71818a;
  opacity: 0.75;
}

.bird-wing-back {
  fill: #ebe9e1;
}

.bird-body {
  fill: #f6f3ec;
}

.bird-wing-front {
  fill: #2f3337;
}

.bird-neck {
  fill: none;
  stroke: #f6f3ec;
  stroke-width: 8;
  stroke-linecap: round;
}

.bird-beak {
  fill: #d65449;
}

.bird-legs {
  fill: none;
  stroke: #c84e45;
  stroke-width: 2.5;
  stroke-linecap: round;
}

.owl-body {
  fill: #65503d;
}

.stork-tail, .stork-saddle {
  fill: #242a2d;
}

.stork-wing {
  fill: #252b2e;
}

.stork-neck {
  fill: #f6f3ec;
}

.stork-beak {
  fill: #df5847;
}

.stork-flight-feathers {
  fill: none;
  stroke: #e1e3df;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.crane-body {
  fill: #9fa6a5;
}

.crane-tail, .crane-wing-dark {
  fill: #343b3e;
}

.crane-wing {
  fill: #596164;
}

.crane-feathers {
  fill: none;
  stroke: #c3c8c6;
  stroke-width: 1.7;
  stroke-linecap: round;
}

.crane-neck {
  fill: #929a99;
}

.crane-crown {
  fill: #b83e38;
}

.crane-beak {
  fill: #4b4235;
}

.crane-legs, .crane-foot {
  fill: none;
  stroke: #4f5050;
  stroke-width: 2.3;
  stroke-linecap: round;
}

.owl-chest {
  fill: #a98967;
}

.owl-eye-ring {
  fill: #d9bf8d;
}

.owl-eye {
  fill: #17191b;
  stroke: #f0c85a;
  stroke-width: 2;
}

.owl-beak {
  fill: #d7a33f;
}

.feather-lines {
  fill: none;
  stroke: #594431;
  stroke-width: 3;
}

.hedgehog-spines {
  fill: #443b34;
}

.hedgehog-face {
  fill: #b89470;
}

.wildlife-eye, .wildlife-nose {
  fill: #17191b;
}

.detail-line {
  fill: none;
  stroke: #6d5140;
  stroke-width: 2;
}

.hedgehog-underfur {
  fill: #6b5848;
}

.hedgehog-spine-light {
  fill: none;
  stroke: #88725e;
  stroke-width: 2;
  stroke-linecap: round;
}

.hedgehog-cheek {
  fill: #c6a17c;
}

.hedgehog-ear {
  fill: #8e6c54;
  stroke: #4e4036;
  stroke-width: 1.5;
}

.hedgehog-foot {
  fill: #59483b;
}

.deer-coat {
  fill: #98643d;
}

.animal-muzzle {
  fill: #c99a6c;
}

.antlers, .deer-spots {
  fill: none;
  stroke: #4b3528;
  stroke-width: 3;
  stroke-linecap: round;
}

.deer-spots {
  stroke: #e0b482;
  stroke-width: 4;
}

.fox-coat {
  fill: #c95f34;
}

.fox-tail {
  fill: #bd532e;
}

.fox-tip, .fox-chest {
  fill: #eee4d7;
}

.fox-ear {
  fill: #743c2c;
}

.hare-body, .hare-head, .hare-ear, .hare-legs {
  fill: #9a8069;
}

.ear-inner {
  fill: none;
  stroke: #d2aa9d;
  stroke-width: 4;
  stroke-linecap: round;
}

.hare-tail {
  fill: #eee8df;
}

.boar-bristles {
  fill: #3f3731;
}

.boar-body {
  fill: #665044;
}

.boar-snout {
  fill: #7d6254;
}

.boar-nose {
  fill: #302925;
}

.boar-tusk {
  fill: #f0e1c6;
}

.moose-body, .moose-neck {
  fill: #77523a;
}

.moose-head {
  fill: #8a6448;
}

.boar-shoulder {
  fill: #58463d;
}

.boar-coat-lines, .bison-coat-lines {
  fill: none;
  stroke: rgba(32, 25, 22, 0.38);
  stroke-width: 1.8;
  stroke-linecap: round;
}

.boar-nostril {
  fill: #b08a78;
}

.boar-ear {
  fill: #594239;
}

.moose-rump {
  fill: #694731;
}

.moose-muzzle {
  fill: #956e50;
}

.moose-ear {
  fill: #6b4935;
}

.moose-antlers {
  fill: none;
  stroke: #5b4030;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.moose-legs {
  fill: #694630;
}

.moose-beard {
  fill: #3b3029;
}

.bison-body {
  fill: #5a4031;
}

.bison-hump {
  fill: #6a4935;
}

.bison-head {
  fill: #51372b;
}

.bison-wool {
  fill: #332b27;
}

.bison-horns {
  fill: none;
  stroke: #e3d4b7;
  stroke-width: 5;
  stroke-linecap: round;
}

.bison-mane {
  fill: #3b2e27;
}

.bison-rump {
  fill: #634633;
}

.bison-beard {
  fill: #2d2723;
}

.animal-highlight {
  fill: none;
  stroke: rgba(255, 232, 202, 0.48);
  stroke-width: 2.2;
  stroke-linecap: round;
}

.animal-shade {
  fill: rgba(54, 34, 25, 0.24);
}

.animal-underbelly {
  fill: rgba(246, 220, 188, 0.38);
}

.animal-joint {
  fill: rgba(45, 31, 25, 0.34);
}

.animal-hoof {
  fill: #302923;
}

.animal-ear-inner {
  fill: none;
  stroke: #dca88d;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.animal-face-mark {
  fill: none;
  stroke: rgba(255, 231, 204, 0.7);
  stroke-width: 2;
  stroke-linecap: round;
}

.animal-whiskers {
  fill: none;
  stroke: #44352d;
  stroke-width: 1.2;
  stroke-linecap: round;
}

.fur-detail {
  fill: none;
  stroke: rgba(38, 29, 24, 0.38);
  stroke-width: 1.7;
  stroke-linecap: round;
}

.bird-feather-detail {
  fill: none;
  stroke: rgba(55, 60, 62, 0.48);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.bird-eye {
  fill: #17191b;
  stroke: #f4d36d;
  stroke-width: 1;
}

.bird-foot {
  fill: none;
  stroke: #c84e45;
  stroke-width: 2;
  stroke-linecap: round;
}

@keyframes windmillTurn {
  to {
    transform: rotate(360deg);
  }
}
@keyframes animalGait {
  0%, 100% {
    transform: skewX(-6deg) translateX(-1px);
  }
  50% {
    transform: skewX(6deg) translateX(2px);
  }
}
@keyframes walkStep {
  to {
    transform: rotate(8deg) translate(2px, -1px);
  }
}
@keyframes hedgehogStep {
  to {
    transform: translateX(2px) scaleY(0.94);
  }
}
@keyframes groundBodyMotion {
  0%, 100% {
    transform: translateY(0) rotate(var(--animal-body-counter-lean, -0.15deg));
  }
  50% {
    transform: translateY(calc(var(--animal-body-lift, 0.5px) * -1)) rotate(var(--animal-body-lean, 0.4deg));
  }
}
@keyframes hedgehogBodyMotion {
  0%, 100% {
    transform: scaleX(-1) translateY(0) rotate(var(--animal-body-counter-lean, -0.15deg));
  }
  50% {
    transform: scaleX(-1) translateY(calc(var(--animal-body-lift, 0.5px) * -1)) rotate(var(--animal-body-lean, 0.4deg));
  }
}
@keyframes seasonalLeafSway {
  to {
    transform: rotate(5deg) scaleX(0.97);
  }
}
@keyframes tailSway {
  to {
    transform: rotate(5deg);
  }
}
@keyframes detailMotion {
  to {
    transform: rotate(var(--animal-detail-swing, 3deg));
  }
}
@keyframes earListen {
  0%, 82%, 100% {
    transform: rotate(0);
  }
  88% {
    transform: rotate(-5deg);
  }
  94% {
    transform: rotate(3deg);
  }
}
@keyframes birdSoar {
  to {
    transform: translateY(-7px) rotate(1deg);
  }
}
@keyframes flightBody {
  to {
    transform: rotate(-1.8deg);
  }
}
@keyframes wingBeat {
  0%, 100% {
    transform: rotate(-9deg) scaleY(1);
  }
  45% {
    transform: rotate(16deg) scaleY(0.5) translateY(6px);
  }
  68% {
    transform: rotate(5deg) scaleY(0.72) translateY(2px);
  }
}
@keyframes flightLegs {
  to {
    transform: rotate(3deg);
  }
}
@keyframes owlEyeBlink {
  0%, 46%, 50%, 100% {
    transform: scaleY(1);
  }
  48% {
    transform: scaleY(0.08);
  }
}
@keyframes luckyTwinkle {
  0%, 100% {
    opacity: 0.2;
    transform: scale(0.72);
  }
  48% {
    opacity: 1;
    transform: scale(1.12);
  }
  64% {
    opacity: 0.55;
    transform: scale(0.9);
  }
}
@keyframes encounterHeart {
  0% {
    opacity: 0;
    transform: translate(-50%, 4px) scale(0.55) rotate(-6deg);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -6px) scale(1.35) rotate(-2deg);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + 7px), -48px) scale(1.1) rotate(8deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .badge-emblem-svg, .badge-emblem-svg::after, .badge-tier-stars {
    animation: none !important;
    transition: none !important;
  }
  .wildlife-sighting, .wildlife-sighting svg, .lucky-sparks i,
  .animal-legs, .hare-legs, .moose-legs, .walk-leg, .hedgehog-feet, .bird-flight-body, .bird-wing,
  .flight-legs, .fox-tail, .boar-ear, .moose-ear, .moose-beard, .bison-beard,
  .fox-ear, .hare-ear, .owl-eye, .seasonal-leaf, .encounter-hearts i, .family-member-hearts i {
    animation: none !important;
    transition: none !important;
  }
  .encounter-art, .wildlife-family, .encounter-spotlight, .encounter-spotlight::after,
  .encounter-particles i, .collection-badge-medallion::after {
    animation: none !important;
    transition: none !important;
  }
  .encounter-particles, .encounter-spotlight {
    display: none !important;
  }
  .collection-badge-toast {
    animation: none !important;
    transform: translateX(-50%);
  }
}
.wildlife-notice {
  position: absolute;
  z-index: 20;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 90%;
  padding: 9px 14px;
  border: 1px solid rgba(245, 200, 76, 0.55);
  border-radius: 18px;
  background: rgba(15, 28, 24, 0.9);
  color: #f7f4ee;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  font-size: 12px;
  white-space: nowrap;
}

.collection-badge-toast {
  position: absolute;
  z-index: 32;
  top: 14px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 210px;
  padding: 9px 14px 9px 9px;
  border: 1px solid rgba(245, 200, 76, 0.7);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(27, 31, 36, 0.97), rgba(42, 47, 52, 0.96));
  color: #f7f4ee;
  box-shadow: 0 15px 42px rgba(0, 0, 0, 0.42), 0 0 22px rgba(245, 200, 76, 0.12);
  animation: collectionBadgeDrop 3.35s cubic-bezier(0.2, 0.78, 0.25, 1) both;
  pointer-events: none;
}

.collection-badge-medallion {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  overflow: hidden;
  border: 3px solid #f5c84c;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #fff0a3, #c78348 68%);
  box-shadow: 0 0 0 3px rgba(245, 200, 76, 0.15);
}

.collection-badge-medallion::after {
  content: "";
  position: absolute;
  inset: -35%;
  background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, 0.7) 49%, transparent 60%);
  animation: badgeShine 1.35s ease-in-out 0.2s infinite;
}

.collection-badge-medallion svg {
  width: 46px;
  height: 42px;
}

.collection-badge-medallion > i {
  position: absolute;
  z-index: 2;
  right: 2px;
  top: 1px;
  color: #fff3a8;
  font-style: normal;
}

.collection-badge-toast > div:last-child {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  column-gap: 6px;
}

.collection-badge-toast small {
  grid-column: 1/-1;
  color: var(--cream-dim);
  font-size: 10px;
  font-weight: 700;
}

.collection-badge-toast strong {
  color: #f5c84c;
  font: 800 25px/1 "Outfit", sans-serif;
}

.collection-badge-toast span {
  color: var(--cream-dimmer);
  font-size: 10px;
}

.collection-badge-toast.lucky {
  border-color: #fff0a1;
  box-shadow: 0 15px 42px rgba(0, 0, 0, 0.42), 0 0 28px rgba(255, 224, 96, 0.32);
}

.collection-badge-toast.first-discovery {
  min-width: 250px;
  border-color: #73e4ef;
  background: linear-gradient(135deg, rgba(22, 35, 39, 0.98), rgba(35, 53, 57, 0.97));
  box-shadow: 0 16px 46px rgba(0, 0, 0, 0.46), 0 0 30px rgba(115, 228, 239, 0.24);
}

.collection-badge-toast em {
  grid-column: 1/-1;
  margin-bottom: 1px;
  color: #73e4ef;
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.collectible-feedback-controls {
  position: absolute;
  z-index: 21;
  top: 14px;
  right: 14px;
  display: flex;
  gap: 4px;
}

.collectible-feedback-controls button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9px;
  background: rgba(24, 31, 34, 0.62);
  color: rgba(247, 244, 238, 0.42);
  font: 800 16px/1 sans-serif;
  cursor: pointer;
  backdrop-filter: blur(5px);
}

.collectible-feedback-controls button.active {
  border-color: rgba(115, 228, 239, 0.5);
  color: #73e4ef;
  background: rgba(30, 59, 61, 0.78);
}

.collectible-feedback-controls .icon {
  width: 14px;
  height: 14px;
}

@keyframes collectionBadgeDrop {
  0% {
    opacity: 0;
    transform: translate(-50%, -130%);
  }
  13%, 82% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -130%);
  }
}
@keyframes badgeShine {
  from {
    transform: translateX(-75%);
  }
  to {
    transform: translateX(75%);
  }
}
.road-stage-full .wildlife-sighting {
  --ground-clip:9px;
  bottom: 201px;
  width: 149px;
  height: 123px;
}

.road-stage-full .wildlife-sighting.family {
  width: clamp(425px, 61vw, 614px);
  height: 132px;
}

.road-stage-full .wildlife-stork, .road-stage-full .wildlife-crane {
  bottom: calc(210px + 22%);
  width: 118px;
}

.road-stage-full .wildlife-hare {
  width: 92px;
  height: 82px;
}

.road-stage-full .wildlife-owl {
  width: 76px;
  height: 74px;
}

.road-stage-full .wildlife-hedgehog {
  width: 80px;
  height: 68px;
}

.road-stage-full .wildlife-autumn_mushroom {
  width: 68px;
  height: 66px;
}

.road-stage-full .wildlife-deer {
  width: 108px;
  height: 92px;
}

.road-stage-full .wildlife-fox {
  width: 82px;
  height: 72px;
}

.road-stage-full .wildlife-spring_blossom {
  width: 66px;
  height: 66px;
}

.road-stage-full .wildlife-summer_sunflower {
  width: 62px;
  height: 66px;
}

.replay-again {
  margin-top: 10px;
}

.replay-wildlife-sign {
  position: absolute;
  z-index: 3;
  bottom: 88px;
  width: 32px;
  transform: translateX(-50%);
  pointer-events: none;
}

/* The board carries only the collected/missed glyph, never the encounter art - full-size
   art (multi-member families in particular) overflowed these 32px boards and covered the
   replay scene when a trip had many sightings (owner decision 2026-07-26). */
.replay-wildlife-board {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 2px solid #f7f4ee;
  border-radius: 50%;
  background: #276c51;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  color: #f7f4ee;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.replay-wildlife-sign > i {
  display: block;
  width: 3px;
  height: 18px;
  margin: auto;
  background: #ddd;
}

.replay-wildlife-sign.missed {
  filter: grayscale(1);
  opacity: 0.38;
}

.replay-wildlife-sign.collected {
  filter: saturate(1.2);
}

.replay-wildlife-sign.lucky .replay-wildlife-board {
  border-color: #f5c84c;
  box-shadow: 0 0 10px #f5c84c;
}

.replay-wildlife-sign.family .replay-wildlife-board {
  border-color: #ff91a5;
}

.replay-family {
  position: absolute;
  right: -5px;
  top: -7px;
  color: #ff91a5;
  font-size: 10px;
}

.replay-lucky {
  position: absolute;
  z-index: 2;
  top: -6px;
  right: -5px;
  color: #fff2a8;
  font-size: 13px;
}

/* Znak MOP (postój) - ta sama rodzina wizualna co city-sign (tablica + słupki), w niebieskiej
   kolorystyce polskich znaków MOP zamiast zielonej tablicy miejscowości. */
.mop-sign {
  position: absolute;
  bottom: 88px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
  transition: transform 0.2s ease;
}

.mop-sign.active {
  transform: translateX(-50%) scale(1.14);
}

.mop-board {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: #0d5aa7;
  border: 2px solid #f2f4f0;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1.5px #0a4685, 0 2px 4px rgba(0, 0, 0, 0.35);
  color: #fff;
}

.mop-board .icon {
  width: 15px;
  height: 15px;
}

.mop-sign.active .mop-board {
  box-shadow: inset 0 0 0 1.5px #0a4685, 0 0 0 4px rgba(13, 90, 167, 0.35), 0 2px 4px rgba(0, 0, 0, 0.35);
}

.mop-posts {
  display: flex;
  gap: 6px;
  height: 20px;
  margin-top: 1px;
}

.mop-posts i {
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, #d8dbe0, #7d828b);
}

.mop-tooltip {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 3px 8px;
  border-radius: 7px;
  background: rgba(20, 24, 31, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--cream);
  font-size: 10px;
  font-weight: 600;
}

/* Engine/suspension shake: --car-bob-y is driven from JS every frame (see the rAF loop in
   TripProgress.jsx) - amplitude is a function of MY car's CURRENT speed, so the shake eases out
   smoothly with braking and stops completely at a standstill (zero, not a guess via toggling the
   .driving class like before). */
.car-unit {
  position: absolute;
  bottom: 12px;
  left: 3%;
  z-index: 5;
  will-change: left, transform;
  transform: translateY(var(--car-bob-y, 0px));
  transform-origin: 12% 100%;
}

/* Night/storm/fog driving lights: a real element (not a pseudo on SvgCar/the photo, which
   differ in markup) sized to the .car-unit content box - one rule covers both car render
   modes. Front (right side, car faces right) = warm headlight cone; rear (left) = red glow. */
.car-lights {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity 2s ease;
}

.car-lights::before {
  content: "";
  position: absolute;
  right: -42%;
  bottom: 18%;
  width: 46%;
  height: 34%;
  background: linear-gradient(90deg, rgba(255, 240, 190, 0.55), transparent 80%);
  clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 60%);
}

.car-lights::after {
  content: "";
  position: absolute;
  left: -4%;
  bottom: 26%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 80, 70, 0.9), transparent 70%);
}

@keyframes carBob {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}
/* Catchup (catches up to the current percentage after reopening, see introPhase in
   TripProgress.jsx): front slightly lifted like under acceleration - the car's front is on the
   RIGHT, so a slight NEGATIVE rotation lifts the right edge. The animation ALWAYS wins over the
   base `transform` (even one built from a CSS var) regardless of stylesheet order - no
   specificity trick needed here. */
.car-unit-catchup.driving {
  animation: carCatchupBob 0.45s ease-in-out infinite;
}

@keyframes carCatchupBob {
  0%, 100% {
    transform: translateY(0) rotate(-2.5deg);
  }
  50% {
    transform: translateY(-4px) rotate(-3.5deg);
  }
}
/* aspect-ratio 2/1: zewnętrzny <svg> nie ma viewBox (jest na <symbol>), więc bez tego dostałby
   domyślne 150px wys. i .car-unit byłby kwadratem - przez co % pozycje twarzy nie trafiałyby w okna. */
.car-svg-wrap {
  position: relative;
  z-index: 2;
  width: 120px;
  aspect-ratio: 2/1;
  display: block;
}

.car-svg {
  width: 100%;
  aspect-ratio: 2/1;
  height: auto;
  display: block;
  filter: drop-shadow(0 7px 8px rgba(0, 0, 0, 0.5));
}

/* kręcące się koła (U2): nakładka na statyczne koła sprite'a - opona+piasta z gradientu,
   spoke (::before, conic) wiruje przy .driving; pozycje 1:1 z viewBox 160×80. */
.svg-wheel {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  background: radial-gradient(circle, #9BA0AB 0 13%, #3a3f4a 13% 42%, #15171C 42% 100%);
}

.svg-wheel::before {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: conic-gradient(#5a606c 0 8deg, transparent 8deg 82deg, #5a606c 82deg 98deg, transparent 98deg 172deg, #5a606c 172deg 188deg, transparent 188deg 262deg, #5a606c 262deg 278deg, transparent 278deg 352deg, #5a606c 352deg 360deg);
  /* obrót MOJEGO auta z JS (--wheel-angle, faza ciągła przy każdej prędkości);
     auta konwoju nadpisują to niżej klasyczną animacją o STAŁYM czasie trwania */
  transform: rotate(var(--wheel-angle, 0deg));
}

@keyframes wheelSpin {
  to {
    transform: rotate(360deg);
  }
}
/* strumień chmur (U1): wlatują zza prawej krawędzi, wylatują za lewą - reset pętli poza kadrem */
@keyframes cloudDrift {
  from {
    transform: translateX(calc(118vw + var(--cloud-world-offset, 0vw)));
  }
  to {
    transform: translateX(calc(-52vw + var(--cloud-world-offset, 0vw)));
  }
}
/* Załoga = głowy załogi WOKÓŁ auta (nie w oknach): kierowca + tylni ZA autem (behind, niżej z-index),
   przedni pasażer PRZED autem (front, wyżej z-index). Pozycje (left/top/width w %) liczy placeOccupants(). */
.car-crew {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.car-crew.behind {
  z-index: 1;
} /* pod nadwoziem - auto zasłania dół głowy, wystaje nad dach */
.car-crew.front {
  z-index: 4;
} /* nad nadwoziem - przedni pasażer przed autem */
.crew-dot {
  position: absolute;
  transform: translate(-50%, -50%);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--coral);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* zdjęcia ludzi bez obramowania (tylko inicjał-chip ma border) */
.crew-dot.crew-photo {
  object-fit: cover;
  border: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Auto-ZDJĘCIE na sygnaturze: fotka pojazdu + koła kręcące się w wykrytych pozycjach + twarze w oknie. */
.car-photo-wrap {
  position: relative;
  z-index: 2;
  width: 150px;
  display: block;
  filter: drop-shadow(0 7px 8px rgba(0, 0, 0, 0.5));
}

.road-stage-full .car-photo-wrap {
  width: 100%;
}

.car-photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

/* REALNE koła wycięte ze zdjęcia (okrągły crop), obracane nad statycznym kołem fotki */
.photo-wheel-img {
  position: absolute;
  z-index: 3;
  aspect-ratio: 1;
  border-radius: 50%;
  display: block;
  transform: translate(-50%, -50%) rotate(var(--photo-wheel-angle, 0deg));
}

@keyframes photoWheelSpin {
  from {
    transform: translate(-50%, -50%) rotate(0);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
/* twarze nad zdjęciem: rozmiar z szerokości → zostają kołami (centrowanie z bazowego .crew-dot) */
.crew-dot.in-photo {
  height: auto;
}

/* Wycinek głowy (U6): przezroczysty PNG bez kolistego kadru/obwódki - sylwetka głowy z ML.
   Zachowuje własne proporcje (aspect-ratio:auto), delikatny cień odrywa głowę od nieba. */
.crew-dot.crew-cutout {
  aspect-ratio: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
  overflow: visible;
  box-shadow: none;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}

.road-stage-full .crew-dot.crew-cutout {
  border-width: 0;
}

/* Auta uczestników wspólnej podróży: TA SAMA wielkość co moje auto, pas wyżej („dalej"),
   z imieniem nad dachem. Płynny ruch daje ekstrapolacja postępu w JS (memberPct), nie CSS. */
/* transform:none overrides the base --car-bob-y from .car-unit (driven by MY speed, same reason
   as the wheels below) - the convoy car falls back to the old fixed-duration carBob instead of
   shaking with MY speed. */
.convoy-unit {
  width: 150px;
  z-index: 4;
  bottom: 52px;
  transform: none;
}

.convoy-unit.driving {
  animation: carBob 0.45s ease-in-out infinite;
}

.road-stage-full .convoy-unit {
  width: clamp(190px, 42vw, 560px);
  bottom: 150px;
}

.convoy-unit .car-photo-wrap, .convoy-unit .car-svg-wrap {
  width: 100%;
}

/* Koła aut KONWOJU: nie dziedziczą fazy z JS (--wheel-angle kręci się z MOJĄ prędkością,
   a uczestnik może stać/pauzować) - klasyczna animacja o STAŁYM czasie trwania, gated .driving.
   Te reguły MUSZĄ być PO bazowych .svg-wheel/.photo-wheel-img (kaskada). */
.convoy-unit .svg-wheel::before {
  transform: none;
}

.convoy-unit.driving .svg-wheel::before {
  animation: wheelSpin 0.45s linear infinite;
}

.convoy-unit .photo-wheel-img {
  transform: translate(-50%, -50%);
}

.convoy-unit .photo-wheel-img.driving {
  animation: photoWheelSpin 0.5s linear infinite;
}

.convoy-tag {
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 9px;
  border-radius: 99px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: "JetBrains Mono", monospace;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  z-index: 5;
}

/* pas uczestnika na drodze: wypełnienie w jego kolorze (szerokość liczona z memberPct jak auto) */
.road-progress.lane-remote {
  border-right-style: solid;
}

/* pauza uczestnika: przygaszone auto + pulsujący znacznik ⏸ przy imieniu */
.convoy-unit.paused-car {
  opacity: 0.85;
}

.convoy-tag.paused {
  animation: pausePulse 1.4s ease-in-out infinite;
}

@keyframes pausePulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
/* META uczestnika: machająca flaga nad autem (zamiast znacznika pauzy) */
.finish-cheer {
  position: absolute;
  top: -52px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  color: var(--lane);
}

.finish-cheer .icon {
  width: 24px;
  height: 24px;
  transform-origin: bottom left;
  animation: flagWave 0.9s ease-in-out infinite;
}

@keyframes flagWave {
  0%, 100% {
    transform: rotate(-8deg);
  }
  50% {
    transform: rotate(16deg) translateY(-2px);
  }
}
/* Intro "wjazd na trasę": .road-camera przejmuje DOKŁADNIE box .road-sky (position:absolute +
   inset:0) - transform na niej staje się containing blockiem dla WSZYSTKICH position:absolute
   dzieci (niebo/droga/auto/znaki), więc scale+translateX wizualnie "zooma kamerę" bez zmiany
   ANI jednej istniejącej reguły pozycjonowania. .road-stage ma już overflow:hidden, więc
   powiększona treść przycina się do sceny (jak prawdziwy kadr kamery), nic nie wystaje poza kartę.
   Gdy transform nie jest ustawiony (poza intro) - zero wpływu na dotychczasowy wygląd. */
.road-camera {
  position: absolute;
  inset: 0;
}

/* Simulator accelerators are supplied only by AdminSignatureLab and remounted with a nonce. */
.cinematic-preview-light .cinematic-light-field {
  animation: lightPreview 3.5s ease-in-out both;
}

.cinematic-preview-gust .cinematic-wind-stream i {
  animation: gustPreview 2.8s ease-in-out both;
}

.cinematic-preview-gust .trees-tile {
  animation: treePreview 2.8s 0.12s ease-in-out both;
}

.cinematic-preview-gust .foreground-tile {
  animation: bushPreview 2.8s 0.28s ease-in-out both;
}

@keyframes lightPreview {
  0%, 100% {
    opacity: 0.04;
  }
  45%, 65% {
    opacity: 0.42;
  }
}
@keyframes gustPreview {
  0% {
    left: -28%;
    opacity: 0;
  }
  18% {
    opacity: 0.8;
  }
  82% {
    left: 108%;
    opacity: 0.46;
  }
  100% {
    left: 108%;
    opacity: 0;
  }
}
@keyframes treePreview {
  0%, 100% {
    transform: skewX(0);
  }
  42% {
    transform: skewX(-5deg);
  }
  68% {
    transform: skewX(2deg);
  }
}
@keyframes bushPreview {
  0%, 100% {
    transform: skewX(0);
  }
  46% {
    transform: skewX(-7deg) scaleX(1.02);
  }
  72% {
    transform: skewX(2deg);
  }
}
/* Endpoint close-ups pan a 1.75x camera beyond the route's original left/right bounds. Extend
   every environmental plane across that wider world so weather, hills, trees and bushes do not
   stop at an invisible 100% seam. Repeating backgrounds retain their world phase; particle
   containers distribute their drops/leaves over the full span. The road itself is continued by
   .intro-road-extension below. */
.road-camera:not(.intro-done) > :is(.sky-layer, .storm-flash, .fog-bands, .starfield,
.rain, .leaves, .bird-flock, .fireflies, .parallax-hills, .roadside-landmarks,
.roadside-trees, .road-foreground) {
  left: -120%;
  right: -120%;
  width: auto;
}

/* ...and because background/mask-position is measured from the element's OWN box, that wider box
   moves every world-phase pattern by the same 1.1 camera widths. Without compensating for it, the
   moment the intro ended (box back to left:-10%) hills, trees, bushes and landmarks all jumped
   sideways at once - the "whole scene re-renders after the catch-up" report. --camera-width comes
   from TripProgress (the measured, unscaled camera width). */
.road-camera:not(.intro-done) {
  --scenery-shift:calc(var(--camera-width,0px) * 1.1);
}

.road-camera:not(.intro-done) > :is(.cinematic-atmosphere, .cinematic-wind-stream, .cinematic-light-field) {
  opacity: 0 !important;
}

/* Dodatkowy fragment świata po obu stronach właściwej trasy. Jest renderowany tylko podczas
   intro i kontynuuje horyzont, pobocze, słupki oraz jezdnię za skrajnym znakiem.
   z-index:2 (same level as the main grass): the extension renders FIRST inside the camera, so
   at z-index:0 every non-day .sky-layer (z:0 but later in DOM) and the parallax hills (z:1)
   painted OVER it - during both endpoint close-ups the road past the seam showed up as a flat
   sky-gradient slab instead of asphalt (fixed 2026-07-24). At 2 it clears the sky and hills but
   stays under city signs (3), convoy cars (4) and the car unit (5). */
.intro-road-extension {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120%;
  z-index: 2;
  overflow: hidden;
}

/* BEZ własnego nieba: klasa sky-* dawała przedłużeniu ten sam gradient co .road-sky, ale
   przedłużenie żyje WEWNĄTRZ skalowanej kamery - gradient rozciągał się na wyższy box i przy
   szwie miał inny odcień (pionowa linia). Niebo pod spodem (.road-sky, nieskalowane, na całą
   szerokość sceny) i tak wszystko pokrywa - przedłużenie dostarcza tylko trawę/słupki/jezdnię. */
.road-camera .intro-road-extension {
  background: none;
}

.intro-road-extension.start {
  right: calc(100% - 8px);
}

.intro-road-extension.end {
  left: calc(100% - 8px);
}

.intro-road-extension .grass, .intro-road-extension .road-posts, .intro-road-extension .road-base {
  z-index: 2;
}

/* Szew scena↔przedłużenie: każde przedłużenie ma lokalny układ współrzędnych,
   dlatego TripProgress podaje mu --road-pattern-offset wyliczony z szerokości kamery. Pasy i
   słupki są dzięki temu zakotwiczone w tym samym układzie świata co główna droga; nie
   potrzebują maski, która wcześniej tworzyła wędrującą, powiększoną przerwę. */
.intro-road-extension .lane-line,
.intro-road-extension .road-posts {
  left: 0;
  width: 100%;
}

/* Trawa nie dzieli pudełka z jezdnią (grass: left:0, jezdnia: left:-10%), więc dostaje własną
   kotwicę - inaczej źdźbła po obu stronach szwu były przesunięte o 0.1 szerokości kamery. */
.intro-road-extension .grass,
.intro-road-extension .grass-tile {
  --road-pattern-offset:var(--grass-pattern-offset,0px);
}

/* NIE przesuwamy tu już pudełka głównej drogi. Wcześniej pasy i słupki dostawały na czas intro
   left:0/width:100% zamiast domyślnego left:-10%/width:120% - a że background-position liczy się
   względem WŁASNEGO pudełka, w momencie `intro-done` cały wzór przeskakiwał o 0.1 szerokości
   kamery. Punkt odniesienia dla przedłużeń daje teraz roadExtensionPatternOffset (1.1x), więc szew
   trzyma się bez ruszania sceny (2026-07-29). */
/* Rasteryzacja powtarzanej trawy pod scale() kamery zostawia kropkowaną linię wzdłuż GÓRNEJ
   krawędzi boxa (dotyczy i przedłużeń, i GŁÓWNEJ trawy w powiększonych fazach intro) -
   3px zanik maską ucina artefakt, źdźbła bez zmian. Po intro (brak scale) maska zbędna. */
.intro-road-extension .grass,
.road-camera:not(.intro-done) > .grass {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 3px);
  mask-image: linear-gradient(180deg, transparent 0, #000 3px);
}

.intro-birds {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.bird-svg {
  position: absolute;
  left: -10%;
  width: 26px;
  height: 13px;
  color: rgba(21, 23, 28, 0.55);
  animation: birdFly 1.3s ease-in forwards;
}

/* wing flap folded into the SAME keyframe as the flight arc (translateY) - a `<use>`-based
   icon can't have its own path 'd' animated, so the flap is a scaleY squash/stretch layered
   onto the existing transform at each stop; ~4 flap cycles over the short 1.3s flight. */
@keyframes birdFly {
  0% {
    left: -10%;
    transform: translateY(0) scaleY(1);
  }
  12% {
    transform: translateY(-3px) scaleY(0.55);
  }
  25% {
    transform: translateY(-8px) scaleY(1);
  }
  37% {
    transform: translateY(-4px) scaleY(0.55);
  }
  50% {
    transform: translateY(-8px) scaleY(1);
  }
  62% {
    transform: translateY(-3px) scaleY(0.55);
  }
  75% {
    transform: translateY(0) scaleY(1);
  }
  87% {
    transform: translateY(1px) scaleY(0.55);
  }
  100% {
    left: 105%;
    transform: translateY(2px) scaleY(1);
  }
}
/* Dym za autem podczas "catchup" (koła kręcą się z klasą .driving już istniejącą) - kilka
   pufów odpalanych z opóźnieniem, znikających w górę-w-tył (auto jedzie w prawo). */
.intro-smoke {
  position: absolute;
  right: 94%;
  bottom: 23%;
  width: 1px;
  height: 1px;
  z-index: 0;
  opacity: var(--effect-intensity);
  transition: opacity 0.12s linear;
}

/* Winter exhaust: same visual/keyframe as the intro's catch-up smoke, positioned the same way
   (rear of the car - front is on the right, see the driving-lights comment above), smaller and
   fainter puffs so it reads as cold-air exhaust rather than a burnout. */
.exhaust-puffs {
  position: absolute;
  right: 94%;
  bottom: 18%;
  width: 1px;
  height: 1px;
  z-index: 0;
  opacity: 0.75;
}

.exhaust-puffs .smoke-puff {
  animation-duration: 1.5s;
}

.smoke-puff {
  position: absolute;
  right: 0;
  bottom: 0;
  width: calc(18px * var(--puff-size));
  height: calc(18px * var(--puff-size));
  border-radius: 50%;
  background: radial-gradient(circle at 65% 65%, rgba(245, 245, 245, 0.72), rgba(170, 176, 184, 0.36) 62%, transparent 72%);
  animation: smokePuff 1.25s ease-out infinite;
}

@keyframes smokePuff {
  0% {
    opacity: 0.9;
    transform: translate(-8px, 0) scale(0.35);
  }
  100% {
    opacity: 0;
    transform: translate(-58px, -28px) scale(2);
  }
}
/* Burnout trail: dwa ślady opon i małe języki ognia. Rozmiar/opacność każdego segmentu liczy
   renderer z odległości od auta i wieku całej fazy, więc ogień maleje za pojazdem i gaśnie po
   dogonieniu celu. Kolejne pakiety efektów mogą użyć innego markup/configu bez zmiany ruchu. */
.catchup-trail {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.tire-track-strip {
  position: absolute;
  right: calc(var(--car-right) + var(--trip-rear-wheel-offset));
  bottom: calc(var(--trip-car-bottom) + 1px);
  min-width: 3px;
  height: 19px;
  opacity: var(--trail-opacity);
  mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.34) 9%, rgba(0, 0, 0, 0.82) 28%, #000 72%);
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.34));
}

.tire-track-strip .tread {
  position: absolute;
  border-radius: 5px;
  background: linear-gradient(rgba(8, 9, 12, 0.8), rgba(18, 19, 22, 0.72));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04);
}

.tire-track-strip .tread::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(112deg, transparent 0 7px, rgba(82, 84, 88, 0.48) 7px 10px, transparent 10px 15px);
}

/* Perspektywa jezdni: bliższy ślad jest grubszy i biegnie odrobinę szerzej; dalszy jest
   cieńszy, jaśniejszy i zwęża się ku najstarszej (lewej) części. */
.tire-track-strip .tread-near {
  left: -1.5%;
  bottom: 0;
  width: 101.5%;
  height: 7px;
}

.tire-track-strip .tread-far {
  left: 4%;
  bottom: 13px;
  width: 96%;
  height: 4px;
  opacity: 0.67;
  clip-path: polygon(3% 32%, 100% 0, 100% 100%, 0 82%);
}

.track-flame {
  position: absolute;
  z-index: 2;
  left: var(--flame-left);
  bottom: var(--flame-bottom);
  width: 26px;
  height: 22px;
  opacity: var(--flame-opacity);
  transform: translateX(-50%) scale(var(--flame-scale));
  transform-origin: center bottom;
}

.track-flame > span {
  position: absolute;
  inset: 0;
  border-radius: 65% 35% 58% 42%;
  transform-origin: center bottom;
  background: radial-gradient(ellipse at 52% 92%, #fffbd0 0 10%, #ffd34d 22%, #ff8a27 45%, #e83d22 65%, transparent 72%);
  filter: drop-shadow(0 0 5px rgba(255, 92, 25, 0.86));
  mix-blend-mode: screen;
  animation: trailFlame 0.2s var(--flame-delay) ease-in-out infinite alternate;
}

.track-flame > span::before, .track-flame > span::after {
  content: "";
  position: absolute;
  bottom: 2px;
  width: 11px;
  height: 18px;
  border-radius: 70% 30% 55% 45%;
  background: inherit;
}

.track-flame > span::before {
  left: 2px;
  transform: rotate(-12deg);
}

.track-flame > span::after {
  right: 1px;
  transform: rotate(13deg) scale(0.82);
}

@keyframes trailFlame {
  from {
    transform: scaleY(0.72) skewX(-5deg);
  }
  to {
    transform: scaleY(1.08) skewX(6deg);
  }
}
/* Auto niewidoczne przed fazą "enter" (kamera jeszcze zoomowana na start, ale auto ma dopiero
   wjechać), potem wsuwa się z lewej - .car-unit ma już `right`/`left:auto` inline, transform
   tu się nie gryzie z tym pozycjonowaniem (nakłada się na już wyliczoną pozycję). */
.car-unit-hidden {
  opacity: 0;
}

.car-unit-enter {
  animation: carSlideIn 1.2s ease-out forwards;
} /* = timeout fazy "enter" w JSX */
@keyframes carSlideIn {
  from {
    transform: translateX(-260%);
    opacity: 1;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
/* "Whoosh": podczas szybkiego panu kamery do startu, pasy/słupki/trawa przewijają się dużo
   szybciej niż normalna jazda - sprzedaje wrażenie przyspieszonego podjazdu do początku trasy. */
/* Whoosh (kinowe intro): STAŁY, szybki czas trwania - animacja startuje od zera na czas fazy,
   więc nie ma problemu przeskoku fazy; po whoosh wraca statyczne background-position z --road-phase. */
.lane-line.whoosh {
  animation: laneScroll 0.12s linear infinite;
}

.road-posts.whoosh, .road-posts.whoosh::after {
  animation: postScroll 0.16s linear infinite;
}

/* same ground speed as lanes/posts: 44px/.08s = 66px/.12s = 88px/.16s = 1056px/1.92s = 550 px/s */
.grass.whoosh, .grass.whoosh .grass-tile {
  animation: grassScroll 0.08s linear infinite;
}

.roadside-trees.whoosh .trees-tile {
  animation: treeScroll 1.92s linear infinite;
}

/* foreground rides its own 1.5x-road rate: 1320px/1.6s = 825 px/s = 550 x 1.5, matching the
   whoosh ground-speed family above at this layer's depth ratio. The farthest mountains and
   landmarks get NO whoosh - same "distant background stays put during the pan" exemption the
   two nearer ridges already had before this slice (they never had a whoosh keyframe either). */
/* same ground speed as grass/trees/posts (550 px/s): 1320px/2.4s, not the old 1.5x-road rate */
.road-foreground.whoosh .foreground-tile {
  animation: foregroundScroll 2.4s linear infinite;
}

/* Realny postój wykryty z GPS (Trip#long_stop?) - celowo INNY wygląd niż pauza (⏸), żeby
   nie sugerować ręcznej akcji. Krótkie zatrzymania (korek/światła) nie dostają żadnego znacznika. */
.rest-stop-badge {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 99px;
  background: var(--amber);
  color: var(--asphalt);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  font-family: "JetBrains Mono", monospace;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.rest-stop-badge .icon {
  width: 13px;
  height: 13px;
}

/* Przeliczanie trasy po zjeździe (LocationIngest → rerouting): auto stoi w miejscu, ale jazda
   trwa - znacznik pulsuje, żeby zasygnalizować pracę w tle (nie stan, w którym coś utknęło). */
.rerouting-badge {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 99px;
  background: var(--teal);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  font-family: "JetBrains Mono", monospace;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  animation: reroutePulse 1.4s ease-in-out infinite;
}

.rerouting-badge .icon {
  width: 13px;
  height: 13px;
}

@keyframes reroutePulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.65;
  }
}
/* zaplanowana trasa: termin */
.planned-when {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  color: var(--lane);
}

.planned-when .icon {
  width: 15px;
  height: 15px;
}

/* ranking (U12) */
.metric-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.metric-tab {
  padding: 8px 14px;
  border-radius: 99px;
  background: var(--asphalt-2);
  border: 1px solid var(--line);
  color: var(--cream-dim);
  font-size: 13px;
  font-weight: 600;
  transition: transform 0.15s, box-shadow 0.15s;
}

.metric-tab:hover {
  transform: translateY(-1px);
}

.metric-tab.active {
  background: linear-gradient(135deg, var(--coral), var(--amber));
  border-color: transparent;
  color: #4A1B0C;
  box-shadow: 0 8px 16px -10px rgba(255, 107, 92, 0.55);
}

.lb-me {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  border-radius: 10px;
  transition: background 0.15s;
}

.lb-row:hover {
  background: rgba(247, 244, 238, 0.03);
}

.lb-row.me {
  background: rgba(245, 200, 76, 0.08);
}

.lb-rank {
  min-width: 34px;
  text-align: center;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  color: var(--cream-dim);
}

.lb-rank-badge {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 13px;
  background: var(--asphalt-3);
  color: var(--cream-dim);
}

.lb-rank-badge .icon {
  width: 16px;
  height: 16px;
}

.lb-me .lb-rank-badge {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, var(--lane), var(--amber));
  color: #fff;
  box-shadow: 0 6px 14px -6px rgba(245, 200, 76, 0.55);
}

.lb-me .lb-rank-badge .icon {
  width: 19px;
  height: 19px;
}

.lb-rank-badge.top1 {
  background: linear-gradient(135deg, var(--lane), #FFE8A3);
  color: #4A3B0C;
  box-shadow: 0 0 0 3px rgba(245, 200, 76, 0.18), 0 6px 14px -6px rgba(245, 200, 76, 0.6);
}

.lb-rank-badge.top2 {
  background: linear-gradient(135deg, #C9C5BC, #EDEAE3);
  color: #3A3936;
  box-shadow: 0 0 0 3px rgba(201, 197, 188, 0.16), 0 6px 14px -6px rgba(201, 197, 188, 0.5);
}

.lb-rank-badge.top3 {
  background: linear-gradient(135deg, var(--amber), #FFD9A0);
  color: #4A2E0C;
  box-shadow: 0 0 0 3px rgba(255, 184, 77, 0.16), 0 6px 14px -6px rgba(255, 184, 77, 0.55);
}

.lb-nick {
  flex: 1;
  min-width: 0;
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-val {
  font-family: "JetBrains Mono", monospace;
  color: var(--lane);
  font-weight: 500;
}

/* podium dla top 3 - platformy jak na mecie wyścigu */
.podium {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin: 18px 0 14px;
  padding-bottom: 0;
  border-bottom: 2px solid var(--line);
}

.podium-spot {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.podium-spot .lb-rank-badge {
  width: 36px;
  height: 36px;
  font-size: 15px;
  margin-bottom: 2px;
}

.podium-nick {
  max-width: 100%;
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.podium-val {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--lane);
}

.podium-block {
  width: 100%;
  margin-top: 7px;
  border-radius: 12px 12px 0 0;
  position: relative;
  background: linear-gradient(180deg, var(--asphalt-3), var(--asphalt-2));
  border: 1px solid var(--line);
  border-bottom: none;
}

.podium-block::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 12px 12px 0 0;
  opacity: 0.75;
}

.podium-spot.p1 .podium-block {
  height: 84px;
  background: linear-gradient(180deg, rgba(245, 200, 76, 0.14), var(--asphalt-2));
  border-color: rgba(245, 200, 76, 0.3);
}

.podium-spot.p1 .podium-block::after {
  background: var(--lane);
}

.podium-spot.p2 .podium-block {
  height: 58px;
  background: linear-gradient(180deg, rgba(201, 197, 188, 0.1), var(--asphalt-2));
  border-color: rgba(201, 197, 188, 0.28);
}

.podium-spot.p2 .podium-block::after {
  background: #C9C5BC;
}

.podium-spot.p3 .podium-block {
  height: 42px;
  background: linear-gradient(180deg, rgba(255, 184, 77, 0.1), var(--asphalt-2));
  border-color: rgba(255, 184, 77, 0.26);
}

.podium-spot.p3 .podium-block::after {
  background: var(--amber);
}

.podium-spot.me .podium-nick {
  color: var(--lane);
}

/* META (U9): overlay z konfeti + kartą po dojechaniu do celu */
.finish-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(16, 18, 22, 0.34);
}

.finish-card {
  position: relative;
  z-index: 2;
  background: var(--asphalt-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 22px 26px;
  text-align: center;
  max-width: 340px;
  box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.55);
}

.finish-emoji {
  font-size: 42px;
  line-height: 1;
}

.finish-title {
  font-family: "Outfit", sans-serif;
  font-weight: 800;
  font-size: 20px;
  margin-top: 8px;
}

.finish-sub {
  font-size: 13px;
  color: var(--cream-dim);
  margin-top: 4px;
}

.finish-card-with-recap {
  width: min(620px, 100vw - 28px);
  max-width: 620px;
  max-height: calc(100% - 28px);
  overflow-y: auto;
  padding: 20px 22px;
}

.finish-recap {
  margin-top: 14px;
  text-align: left;
}

.finish-recap-heading {
  margin: 10px 0 7px;
  color: var(--cream-dim);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.finish-collectibles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.finish-collectible-card {
  --finish-delay:0ms;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--asphalt-3);
  opacity: 0;
  transform: translateY(10px) scale(0.97);
  animation: finishCollectibleReveal 0.48s var(--finish-delay) cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.finish-collectible-medallion {
  position: relative;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 5px;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.15), var(--asphalt-4) 70%);
}

.finish-collectible-medallion svg {
  width: 100%;
  height: 100%;
}

.finish-collectible-medallion > span {
  position: absolute;
  right: -1px;
  bottom: -1px;
  min-width: 24px;
  padding: 3px 5px;
  border-radius: 10px;
  background: var(--lane);
  color: var(--asphalt);
  font: 800 9px "JetBrains Mono", monospace;
  text-align: center;
}

.tier-bronze .finish-collectible-medallion {
  border-color: #c88958;
  box-shadow: 0 0 14px rgba(200, 137, 88, 0.22);
}

.tier-silver .finish-collectible-medallion {
  border-color: #c9d2dc;
  box-shadow: 0 0 14px rgba(201, 210, 220, 0.24);
}

.tier-gold .finish-collectible-medallion {
  border-color: var(--lane);
  box-shadow: 0 0 16px rgba(245, 200, 76, 0.28);
}

.tier-diamond .finish-collectible-medallion {
  border-color: #73e4ef;
  box-shadow: 0 0 18px rgba(115, 228, 239, 0.32);
}

.finish-collectible-copy {
  min-width: 0;
  flex: 1;
}

.finish-collectible-copy > strong {
  display: block;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finish-collectible-copy > small {
  display: block;
  margin-top: 1px;
  color: var(--cream-dim);
  font-size: 9px;
}

.finish-progress-track {
  height: 6px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 5px;
  background: var(--asphalt);
}

.finish-progress-track i {
  display: block;
  height: 100%;
  width: var(--progress-before);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), var(--lane));
  animation: finishProgressGrow 0.9s calc(var(--finish-delay) + 240ms) ease-out forwards;
}

.finish-progress-values {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  font: 500 8px "JetBrains Mono", monospace;
  color: var(--cream-dim);
}

.finish-progress-values b {
  color: var(--lane);
  font-weight: 700;
}

.finish-earned {
  margin-top: 10px;
}

.finish-earned-badge {
  --finish-delay:0ms;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px solid rgba(245, 200, 76, 0.38);
  border-radius: 11px;
  background: rgba(245, 200, 76, 0.08);
  opacity: 0;
  transform: translateY(10px) scale(0.97);
  animation: finishCollectibleReveal 0.48s var(--finish-delay) cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.finish-earned-badge > span {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--lane);
  color: var(--asphalt);
}

.finish-earned-badge .icon {
  width: 18px;
  height: 18px;
}

.finish-earned-badge div {
  min-width: 0;
}

.finish-earned-badge strong, .finish-earned-badge small {
  display: block;
}

.finish-earned-badge strong {
  font-size: 11px;
}

.finish-earned-badge small {
  margin-top: 2px;
  overflow: hidden;
  color: var(--cream-dim);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finish-recap-loading, .finish-recap-empty {
  margin-top: 13px;
  padding: 10px;
  border-radius: 10px;
  background: var(--asphalt-3);
  color: var(--cream-dim);
  font-size: 11px;
}

.finish-recap-loading {
  animation: finishLoadingPulse 1.1s ease-in-out infinite alternate;
}

.finish-recap-refresh {
  margin-top: 7px;
  color: var(--cream-dimmer);
  font-size: 9px;
  text-align: center;
}

@keyframes finishCollectibleReveal {
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes finishProgressGrow {
  from {
    width: var(--progress-before);
  }
  to {
    width: var(--progress-after);
  }
}
@keyframes finishLoadingPulse {
  to {
    color: var(--cream);
    background: var(--asphalt-4);
  }
}
@media (max-width: 560px) {
  .finish-card-with-recap {
    padding: 16px 14px;
  }
  .finish-card-with-recap .finish-emoji {
    font-size: 32px;
  }
  .finish-collectibles {
    grid-template-columns: 1fr;
  }
}
.confetti {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.confetti-piece {
  position: absolute;
  top: -12px;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  opacity: 0.95;
  animation-name: confettiFall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes confettiFall {
  0% {
    transform: translateY(-12px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(360px) rotate(540deg);
    opacity: 0.9;
  }
}
/* seating chart (komponent React SeatingChart) */
.seat-chart {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 16px;
  background: var(--asphalt-2);
  border-radius: 16px;
  border: 1px solid var(--line);
  position: relative;
}

.seat-chart::before {
  content: "PRZÓD";
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-family: "JetBrains Mono", monospace;
  color: var(--cream-dimmer);
  background: var(--asphalt);
  padding: 0 8px;
}

.seat {
  aspect-ratio: 1.3;
  border-radius: 11px;
  background: var(--asphalt-3);
  border: 1px dashed var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 10px;
  color: var(--cream-dim);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s;
  padding: 6px;
}

.seat.filled {
  border-style: solid;
}

.seat.driver-seat {
  border-color: var(--lane);
}

.seat .s-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--asphalt-4);
}

.seat .s-av .icon {
  width: 15px;
  height: 15px;
}

.seat.filled .s-av {
  background: linear-gradient(135deg, var(--coral), var(--amber));
}

/* ==========================================================================
   RESPONSYWNOŚĆ SYGNATURY - te bloki MUSZĄ być na KOŃCU arkusza (ta sama
   specyficzność co reguły bazowe .road-stage-full/.convoy-unit ⇒ wygrywa
   późniejszy; wcześniejsze położenie psuło np. pozycję aut konwoju).
   ========================================================================== */
/* Mobile (pion LUB niski poziomy ekran): sygnatura DOSŁOWNIE na cały ekran (bez tytułu,
   paddingów i paska pod spodem). Admin rozwija szczegóły przyciskiem testowym; zwykły
   użytkownik przewija do panelu umieszczonego pod sceną. */
@media (max-width: 899px), (max-height: 600px) {
  .details-toggle {
    display: flex;
  }
  .trip-screen.trip-screen-admin .trip-panel {
    display: none;
  }
  .trip-screen.trip-screen-admin .trip-panel.open {
    display: block;
    padding: 0 14px 14px;
  }
  /* Bez administratorskiego przycisku testowego szczegóły pozostają dostępne po przewinięciu
     pod pełnoekranową scenę. */
  .trip-screen:not(.trip-screen-admin) .trip-panel {
    display: block;
    padding: 0 14px 14px;
  }
  .trip-screen {
    padding: 0;
  }
  .trip-screen .road-stage-full {
    margin: 0;
    border: none;
    border-radius: 0;
  }
  .road-stage-full .road-sky {
    height: 100dvh;
    min-height: 280px;
    max-height: none;
  }
}
/* Telefon PIONOWO: droga i pasma krajobrazu zajmują większą, proporcjonalną część sceny.
   Pełna wysokość viewportu zostaje, więc słońce, księżyc, chmury i pogoda nadal mają
   dużo miejsca, ale niebo nie dominuje już nad trasą. */
@media (max-width: 899px) and (min-height: 541px) {
  .road-stage-full {
    --road-edge:clamp(230px,32dvh,300px);
    --trip-car-bottom:56px;
  }
  .road-stage-full .road-base {
    height: var(--road-edge);
  }
  .road-stage-full .lane-line {
    bottom: 56px;
    height: 8px;
  }
  .road-stage-full .grass {
    bottom: var(--road-edge);
    height: 30px;
  }
  .road-stage-full .roadside-trees {
    bottom: var(--road-edge);
    height: 214px;
  }
  .road-stage-full .parallax-hills {
    bottom: var(--road-edge);
  }
  .road-stage-full .roadside-landmarks {
    bottom: var(--road-edge);
    height: 140px;
  }
  .road-stage-full .road-foreground {
    bottom: var(--road-edge);
    height: 70px;
  }
  .road-stage-full .fog-bands {
    bottom: calc(var(--road-edge) - 30px);
  }
  .road-stage-full .fireflies {
    bottom: var(--road-edge);
  }
  .road-stage-full .rainbow-arc {
    bottom: var(--road-edge);
  }
  .road-stage-full .hills-farthest, .road-stage-full .hills-caps {
    height: 148px;
  }
  .road-stage-full .hills-far {
    height: 125px;
  }
  .road-stage-full .hills-mid {
    height: 82px;
  }
  .road-stage-full .road-posts {
    bottom: calc(var(--road-edge) - 10px);
    height: 32px;
  }
  .road-stage-full .city-sign {
    bottom: var(--road-edge);
  }
  .road-stage-full .wildlife-sighting {
    bottom: calc(var(--road-edge) - 9px);
  }
  .road-stage-full .wildlife-stork, .road-stage-full .wildlife-crane {
    bottom: calc(var(--road-edge) + 22%);
  }
  .road-stage-full .convoy-unit {
    bottom: calc(var(--road-edge) - 70px);
  }
}
/* Telefon POZIOMO (mało wysokości): kompaktowa scena - niższa jezdnia, mniejsze auta i znaki */
@media (max-height: 540px) {
  .road-stage-full {
    --road-edge:110px;
    --trip-car-width:clamp(130px, 24vw, 230px);
    --trip-car-bottom:20px;
    --trip-rear-wheel-offset:clamp(98px, 18vw, 173px);
  }
  .road-stage-full .road-sky {
    height: 100dvh;
    min-height: 170px;
    max-height: none;
  }
  .road-stage-full .road-base {
    height: 110px;
  }
  .road-stage-full .lane-line {
    bottom: 24px;
    height: 5px;
  }
  .road-stage-full .grass {
    bottom: 110px;
    height: 15px;
  }
  .road-stage-full .roadside-trees {
    bottom: 110px;
    height: 160px;
  }
  .road-stage-full .parallax-hills {
    bottom: 110px;
  }
  .road-stage-full .roadside-landmarks {
    bottom: 110px;
    height: 68px;
  }
  .road-stage-full .road-foreground {
    bottom: 110px;
    height: 58px;
  }
  .road-stage-full .fog-bands {
    bottom: 90px;
  }
  .road-stage-full .fireflies {
    bottom: 110px;
  }
  .road-stage-full .rainbow-arc {
    bottom: 110px;
  }
  .road-stage-full .hills-far {
    height: 56px;
  }
  .road-stage-full .hills-mid {
    height: 36px;
  }
  .road-stage-full .road-posts {
    bottom: 104px;
    height: 18px;
  }
  .road-stage-full .wildlife-sighting {
    --ground-clip:7px;
    bottom: 103px;
    width: 97px;
    height: 83px;
  }
  .road-stage-full .wildlife-sighting.family {
    width: clamp(366px, 68vw, 508px);
    height: 90px;
  }
  .road-stage-full .wildlife-stork, .road-stage-full .wildlife-crane {
    bottom: 45%;
    width: 97px;
  }
  .road-stage-full .wildlife-hare {
    width: 71px;
    height: 64px;
  }
  .road-stage-full .wildlife-owl {
    width: 59px;
    height: 57px;
  }
  .road-stage-full .wildlife-hedgehog {
    width: 61px;
    height: 52px;
  }
  .road-stage-full .wildlife-autumn_mushroom {
    width: 53px;
    height: 52px;
  }
  .road-stage-full .wildlife-deer {
    width: 85px;
    height: 73px;
  }
  .road-stage-full .wildlife-fox {
    width: 64px;
    height: 57px;
  }
  .road-stage-full .wildlife-spring_blossom {
    width: 51px;
    height: 52px;
  }
  .road-stage-full .wildlife-summer_sunflower {
    width: 47px;
    height: 52px;
  }
  .road-stage-full .city-sign {
    bottom: 110px;
  }
  .road-stage-full .cs-board {
    font-size: 12px;
    padding: 5px 10px;
  }
  .road-stage-full .cs-posts {
    height: 26px;
    gap: 10px;
  }
  .road-stage-full .car-unit {
    bottom: var(--trip-car-bottom);
    width: var(--trip-car-width);
  }
  .road-stage-full .convoy-unit {
    bottom: 74px;
    width: clamp(130px, 24vw, 230px);
  }
  .ro-btn {
    width: 30px;
    height: 30px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cinematic-atmosphere {
    animation: none !important;
    transform: none !important;
  }
  .cinematic-wind-stream, .cinematic-light-field {
    display: none !important;
  }
}
@media (max-width: 480px) {
  .ro-btn {
    width: 31px;
    height: 31px;
    border-radius: 9px;
  }
  .ro-actions {
    gap: 5px;
  }
  .trip-distance-overlay {
    top: 8px;
    padding: 5px 10px;
  }
}
/* ===== MINIGRY (platforma + Bubble Pop) =====
   Wszystko montuje się wewnątrz .road-stage (overflow:hidden przycina do sceny) i POZA
   .road-camera - kamera jest transform containing blockiem, więc intro przycięłoby i przesunęło
   overlay (ta sama zasada co .weather-pill i .reaction-float-layer).
   Zarezerwowane pasmo z-index: 40-49 (istniejące: finish-overlay 20, reaction-* 21/22,
   collection-badge-toast 32). Bez nowych kolorów - tylko istniejące tokeny palety. */
/* Pole gry. pointer-events tylko dla tych, którzy dołączyli - dzięki temu scena zostaje
   „oglądalna" dla kierowcy/widza, a jego dotknięcia trafiają do sceny, nie do gry. */
.minigame-field {
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  overflow: hidden;
}

/* Gdy gramy, pole POŁYKA gest w całości: przeciąganie palcem po bańkach nie może zamienić się w
   przewijanie strony, pull-to-refresh ani gest „wstecz" (patrz reguły przy html,body i
   .road-stage). Widz ma pointer-events:none, więc jego dotknięcia i tak trafiają do sceny. */
.minigame-field.is-playing {
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Bańka: mydlana błona, nie kolorowe kółko. Kolor jedzie CIĄGŁYM gradientem życia
   (--bubble-rgb liczone co klatkę w JS), więc nie ma skoków między tokenami palety. */
.minigame-bubble {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 50%;
  cursor: pointer;
  will-change: transform;
  --bubble-rgb:42,157,157;
  --danger:0;
}

/* Warstwa błony - to ona drga i pulsuje, bo `transform` przycisku trzyma pozycję. */
.minigame-bubble-skin {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--bubble-rgb), calc(0.55 + var(--danger) * 0.45));
  background: radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 38%), radial-gradient(circle at 72% 74%, rgba(var(--bubble-rgb), 0.3), rgba(var(--bubble-rgb), 0) 52%), radial-gradient(circle at 50% 50%, rgba(var(--bubble-rgb), 0.12), rgba(var(--bubble-rgb), 0.26) 76%, rgba(var(--bubble-rgb), 0.05) 100%);
  box-shadow: 0 0 calc(10px + var(--danger) * 14px) rgba(var(--bubble-rgb), calc(0.28 + var(--danger) * 0.4)), inset 0 0 16px rgba(255, 255, 255, 0.22);
  /* Amplituda drgania rośnie PŁYNNIE z --danger (0 -> 1 w ostatnim skrawku życia), więc bańka
     „nerwowo drży" tuż przed pęknięciem zamiast włączać efekt skokowo. */
  animation: minigameJitter 0.28s ease-in-out infinite;
  transform: scale(calc(1 + var(--danger) * 0.06));
}

/* Tęczowy połysk mydlanej błony - wolno obraca się wokół bańki. */
.minigame-bubble-shine {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  mix-blend-mode: screen;
  opacity: calc(0.35 + var(--danger) * 0.25);
  background: conic-gradient(from 0deg, rgba(255, 107, 92, 0), rgba(255, 184, 77, 0.35), rgba(42, 157, 157, 0.35), rgba(147, 197, 253, 0.3), rgba(255, 107, 92, 0));
  animation: minigameShine 4.5s linear infinite;
}

.minigame-bubble.is-golden {
  --bubble-rgb:245,200,76;
}

.minigame-bubble.is-golden .minigame-bubble-skin {
  border-width: 2.5px;
  box-shadow: 0 0 24px rgba(245, 200, 76, 0.55), inset 0 0 18px rgba(255, 255, 255, 0.35);
}

.minigame-bubble.is-golden .minigame-bubble-shine {
  opacity: 0.7;
  animation-duration: 2.2s;
}

.minigame-field.is-playing .minigame-bubble:active .minigame-bubble-skin {
  transform: scale(0.88);
  filter: brightness(1.3);
}

/* Drganie skalowane amplitudą: przy --danger:0 przesunięcia są zerowe, więc animacja jest
   niewidoczna i nie trzeba jej włączać/wyłączać klasą. */
@keyframes minigameJitter {
  0%, 100% {
    translate: 0 0;
  }
  25% {
    translate: calc(var(--danger) * -1.6px) calc(var(--danger) * 1.1px);
  }
  50% {
    translate: calc(var(--danger) * 1.4px) calc(var(--danger) * -1.3px);
  }
  75% {
    translate: calc(var(--danger) * 1.1px) calc(var(--danger) * 1.5px);
  }
}
@keyframes minigameShine {
  to {
    rotate: 360deg;
  }
}
/* Pęknięcie + nick zwycięzcy odlatujący od bańki. Przegrany widzi, KTO go ubiegł. */
.minigame-burst {
  position: absolute;
  z-index: 41;
  pointer-events: none;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  animation: minigameBurst 0.9s ease-out forwards;
}

.minigame-burst::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--burst-size, 60px);
  height: var(--burst-size, 60px);
  margin: calc(var(--burst-size, 60px) / -2) 0 0 calc(var(--burst-size, 60px) / -2);
  border-radius: 50%;
  border: 2px solid rgba(247, 244, 238, 0.7);
  animation: minigameRing 0.5s ease-out forwards;
}

/* Druga, wolniejsza fala - błona rozrywa się, a nie po prostu znika. */
.minigame-burst::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--burst-size, 60px);
  height: var(--burst-size, 60px);
  margin: calc(var(--burst-size, 60px) / -2) 0 0 calc(var(--burst-size, 60px) / -2);
  border-radius: 50%;
  border: 1px solid rgba(var(--burst-rgb, 247, 244, 238), 0.5);
  animation: minigameRing 0.72s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

.minigame-droplets {
  position: absolute;
  top: 50%;
  left: 50%;
  pointer-events: none;
}

.minigame-droplets i {
  position: absolute;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: rgba(var(--burst-rgb, 247, 244, 238), 0.9);
  animation: minigameDroplet 0.6s ease-out forwards;
  animation-delay: var(--droplet-delay, 0s);
}

@keyframes minigameDroplet {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--droplet-x, 0), var(--droplet-y, 0)) scale(0.4);
  }
}
.minigame-burst-name {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: var(--cream);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.minigame-burst-points {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  color: var(--lane);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.minigame-burst.is-golden .minigame-burst-points {
  color: var(--lane);
  font-size: 16px;
}

@keyframes minigameBurst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -58%) scale(1.05);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -120%) scale(1);
  }
}
@keyframes minigameRing {
  0% {
    opacity: 0.85;
    transform: scale(0.5);
  }
  100% {
    opacity: 0;
    transform: scale(1.7);
  }
}
/* „Obróć telefon" na podglądzie cudzej trasy. WIDOCZNOŚĆ jest czysto CSS-owa: pokazujemy tylko na
   telefonie trzymanym PIONOWO, więc obrót chowa podpowiedź bez żadnego JS (kontroler odpowiada
   wyłącznie za zamknięcie). Baner, nie zasłona - scena pod spodem ma zostać widoczna. */
/* Zgłaszanie uwag przez testerów. Pigułka siedzi nad dolną nawigacją i NIE zasłania sceny -
   dlatego z prawej i nisko, a panel otwiera się nad nią. Widoczna też na stronach publicznych,
   bo najcenniejsze uwagi przychodzą od kogoś, kto widzi aplikację pierwszy raz. */
.feedback-widget {
  position: fixed;
  right: 12px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 84px);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.feedback-fab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(20, 24, 31, 0.88);
  border: 1px solid rgba(247, 244, 238, 0.24);
  backdrop-filter: blur(5px);
  color: var(--cream);
  font-family: "Outfit", sans-serif;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.feedback-fab .icon {
  width: 15px;
  height: 15px;
  color: var(--lane);
}

.feedback-fab:hover {
  border-color: var(--lane);
}

.feedback-panel {
  width: min(320px, 100vw - 24px);
  padding: 12px;
  border-radius: 16px;
  background: rgba(20, 24, 31, 0.97);
  border: 1px solid rgba(247, 244, 238, 0.2);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.feedback-panel[hidden] {
  display: none;
}

/* Panel jest teraz dłuższy (podpowiedzi + e-mail), a na niskim telefonie musi się przewijać W SOBIE,
   nie rozpychać strony - inaczej wraca problem z odklejaną nawigacją (patrz .admin-row). */
.feedback-panel {
  max-height: calc(100vh - 150px);
  overflow-y: auto;
}

.feedback-form {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.feedback-form[hidden], .feedback-thanks[hidden] {
  display: none;
}

.feedback-hint {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--cream-dimmer);
}

.feedback-thanks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  text-align: center;
  font-family: "Outfit", sans-serif;
  color: var(--cream);
}

.feedback-thanks p {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  line-height: 1.45;
  color: var(--cream-dim);
}

.feedback-thanks-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(42, 157, 157, 0.18);
  border: 1px solid var(--teal);
  color: var(--teal);
}

.feedback-thanks-mark .icon {
  width: 18px;
  height: 18px;
}

.feedback-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: "Outfit", sans-serif;
  font-size: 14px;
  color: var(--cream);
}

.feedback-close {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(247, 244, 238, 0.12);
  color: var(--cream);
  font-size: 16px;
  line-height: 1;
}

.feedback-kinds {
  display: flex;
  gap: 6px;
}

.feedback-kind-btn {
  flex: 1;
  padding: 6px 0;
  border-radius: 999px;
  cursor: pointer;
  font-size: 11.5px;
  background: var(--asphalt-3);
  border: 1px solid var(--line);
  color: var(--cream-dim);
}

.feedback-kind-btn.is-active {
  background: var(--lane);
  border-color: var(--lane);
  color: var(--asphalt);
  font-weight: 700;
}

.feedback-text {
  resize: vertical;
  min-height: 74px;
  font-size: 12.5px;
  line-height: 1.45;
}

.feedback-email {
  font-size: 12.5px;
}

.feedback-panel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.feedback-status {
  font-size: 11.5px;
  color: var(--cream-dim);
}

/* Na pełnoekranowej scenie dolna nawigacja znika - pigułka może zejść niżej. */
.trip-screen ~ .feedback-widget, body:has(.road-stage-full) .feedback-widget {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
}

/* Skrzynka zgłoszeń w panelu admina. */
/* „Nigdy nie wszedł" to jedyny stan na liście, z którym admin ma co zrobić - dlatego jako jedyny
   jest wyróżniony kolorem, a nie kolejnym szarym tekstem. */
.admin-never {
  color: var(--coral);
  font-weight: 600;
}

.admin-activity {
  display: grid;
  gap: 6px;
  margin-top: 4px;
}

.admin-activity .statline span:last-child {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
}

.feedback-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.feedback-filters .chip {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  text-decoration: none;
  background: var(--asphalt-3);
  border: 1px solid var(--line);
  color: var(--cream-dim);
}

.feedback-filters .chip.is-active {
  background: var(--lane);
  border-color: var(--lane);
  color: var(--asphalt);
  font-weight: 700;
}

.feedback-card {
  margin-bottom: 10px;
  border-left: 3px solid var(--line);
}

.feedback-card.status-new {
  border-left-color: var(--coral);
}

.feedback-card.status-in_progress {
  border-left-color: var(--amber);
}

.feedback-card.status-done {
  border-left-color: var(--teal);
  opacity: 0.72;
}

.feedback-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--cream-dim);
}

.feedback-kind {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: var(--asphalt);
}

.feedback-kind.kind-bug {
  background: var(--coral);
}

.feedback-kind.kind-idea {
  background: var(--amber);
}

.feedback-kind.kind-other {
  background: var(--cream-dim);
}

.feedback-who {
  color: var(--cream);
  font-weight: 600;
}

.feedback-when {
  margin-left: auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
}

.feedback-message {
  margin: 0 0 8px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--cream);
}

.feedback-context {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}

.feedback-context span {
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--asphalt-3);
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  color: var(--cream-dimmer);
}

.feedback-errors {
  margin-bottom: 8px;
  font-size: 11.5px;
  color: var(--cream-dim);
}

.feedback-errors code {
  display: block;
  margin-top: 4px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255, 107, 92, 0.12);
  color: #ffb1a6;
  font-size: 10.5px;
  word-break: break-word;
}

.feedback-actions {
  display: flex;
  gap: 6px;
}

.feedback-actions input[type=submit] {
  width: auto;
}

/* Widoczne ostrzeżenie w dokumentach prawnych, gdy brakuje danych administratora. Ma kłuć w oczy -
   brak oznaczenia administratora to naruszenie art. 13 RODO, a nie kosmetyka. */
.doc-warning {
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #ffb1a6;
  background: rgba(255, 107, 92, 0.12);
  border: 1px solid rgba(255, 107, 92, 0.5);
}

.doc-warning code {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
}

.rotate-hint {
  display: none;
}

@media (orientation: portrait) and (max-width: 899px) {
  .rotate-hint {
    position: relative;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    padding: 10px 12px;
    border-radius: 14px;
    color: var(--cream);
    background: linear-gradient(180deg, rgba(42, 157, 157, 0.28), rgba(20, 24, 31, 0.86));
    border: 1px solid rgba(247, 244, 238, 0.22);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.32);
  }
  .rotate-hint.is-dismissed {
    display: none;
  }
}
.rotate-hint-icon {
  display: flex;
  color: var(--lane);
  animation: rotateHintNudge 2.6s ease-in-out infinite;
}

.rotate-hint-icon .icon {
  width: 26px;
  height: 26px;
}

.rotate-hint-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.rotate-hint-copy b {
  font-family: "Outfit", sans-serif;
  font-size: 13px;
}

.rotate-hint-copy span {
  font-size: 11.5px;
  color: var(--cream-dim);
}

.rotate-hint-close {
  margin-left: auto;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border: 0;
  border-radius: 50%;
  background: rgba(247, 244, 238, 0.12);
  color: var(--cream);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

@keyframes rotateHintNudge {
  0%, 62%, 100% {
    transform: rotate(0);
  }
  74% {
    transform: rotate(-82deg);
  }
  88% {
    transform: rotate(-82deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .rotate-hint-icon {
    animation: none;
  }
}
/* Round clock drawn as a border around the WHOLE scene - the perimeter drains clockwise. Painted
   in real pixels (see MinigameTimerFrame.jsx) so the stroke is equally thick on the short and the
   long sides, and pathLength normalises the perimeter so it empties at a constant speed. Sits above
   the playfield (z-index 40) and below the HUD (44), always pointer-events:none so bubbles right at
   the edge stay tappable. */
.minigame-timer-frame {
  position: absolute;
  inset: 0;
  z-index: 43;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
}

.minigame-timer-frame svg {
  display: block;
}

.minigame-timer-frame rect {
  fill: none;
  stroke-width: 5;
  stroke-linecap: butt;
}

.minigame-timer-track {
  stroke: rgba(20, 24, 31, 0.42);
}

.minigame-timer-run {
  stroke: var(--lane);
  filter: drop-shadow(0 0 4px rgba(245, 200, 76, 0.55));
  transition: stroke-dashoffset 0.3s linear, stroke 0.4s ease;
}

/* Last 10 s: alarm colour from the palette + a pulse (disabled under reduced motion). */
.minigame-timer-frame.is-urgent .minigame-timer-run {
  stroke: var(--coral);
  filter: drop-shadow(0 0 6px rgba(255, 107, 92, 0.65));
  animation: minigameTimerPulse 1s ease-in-out infinite;
}

@keyframes minigameTimerPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}
@media (prefers-reduced-motion: reduce) {
  .minigame-timer-frame.is-urgent .minigame-timer-run {
    animation: none;
  }
  .minigame-timer-run {
    transition: none;
  }
}
/* HUD - kompaktowa tabela wyników. Widzą ją też widzowie: wyścig nicków to sedno gry na scenie. */
.minigame-hud {
  position: absolute;
  top: 44px;
  right: 10px;
  z-index: 44;
  min-width: 132px;
  max-width: 44%;
  padding: 7px 9px;
  border-radius: 12px;
  background: rgba(20, 24, 31, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
  pointer-events: none;
}

.minigame-hud-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.minigame-hud-title {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 11px;
  color: var(--cream);
}

.minigame-hud-clock {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--lane);
}

.minigame-hud-bar {
  height: 3px;
  margin: 5px 0 6px;
  border-radius: 2px;
  background: rgba(247, 244, 238, 0.14);
  overflow: hidden;
}

.minigame-hud-bar i {
  display: block;
  height: 100%;
  background: var(--lane);
  transform-origin: left center;
}

.minigame-hud-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.minigame-hud-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--cream-dim);
}

.minigame-hud-row.is-you {
  color: var(--cream);
}

.minigame-hud-row.is-you .minigame-hud-score {
  color: var(--lane);
}

.minigame-hud-rank {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: var(--cream-dimmer);
  width: 11px;
}

.minigame-hud-nick {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.minigame-hud-score {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
}

.minigame-hud-note {
  font-size: 10px;
  color: var(--cream-dimmer);
}

/* The HUD itself is pointer-events:none (it must never eat a tap meant for a bubble), so the only
   interactive thing in it turns them back on for itself. */
.minigame-hud-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 5px;
}

.minigame-hud-join {
  pointer-events: auto;
  padding: 3px 9px;
  border-radius: 999px;
  cursor: pointer;
  background: var(--lane);
  border: 0;
  color: var(--asphalt);
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 11px;
}

/* Pigułka gry side - jedyne, co widzi ktoś, kto nie gra. */
.minigame-pill {
  position: absolute;
  left: 12px;
  bottom: 14px;
  z-index: 44;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(20, 24, 31, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
  color: var(--cream);
  font-size: 12px;
  cursor: pointer;
}

.minigame-pill-title {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
}

.minigame-pill-count {
  color: var(--cream-dim);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
}

.minigame-pill-cta {
  color: var(--lane);
  font-weight: 600;
}

/* Why an action did nothing. Sits under the launcher, never over the road's centre. */
.minigame-notice {
  position: absolute;
  left: 10px;
  top: 78px;
  z-index: 46;
  margin: 0;
  max-width: calc(100% - 20px);
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(20, 24, 31, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
  color: var(--cream);
  font-size: 12px;
  pointer-events: none;
}

.minigame-launcher {
  position: absolute;
  left: 10px;
  top: 44px;
  z-index: 44;
  display: flex;
  align-items: center;
  gap: 5px;
}

.minigame-launcher-hide {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 15px;
  line-height: 1;
  background: rgba(20, 24, 31, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--cream-dim);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

.minigame-launcher-hide:hover {
  color: var(--cream);
}

.minigame-launcher-btn, .minigame-restore {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(20, 24, 31, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
  color: var(--cream);
  font-size: 12px;
  cursor: pointer;
}

.minigame-restore {
  position: absolute;
  left: 10px;
  top: 44px;
  z-index: 44;
  opacity: 0.55;
}

.minigame-restore:hover {
  opacity: 1;
}

.minigame-launcher-menu {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  min-width: 180px;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(20, 24, 31, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.minigame-launcher-menu button {
  padding: 9px 11px;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--cream);
  font-size: 12px;
}

.minigame-launcher-menu button + button {
  border-top: 1px solid var(--line-soft);
}

.minigame-launcher-menu button:hover {
  background: rgba(247, 244, 238, 0.07);
}

/* Pasek głosowania siada NAD paskiem reakcji (bottom:14px), żeby oba pozostały klikalne. */
.minigame-vote-bar {
  position: absolute;
  left: 50%;
  bottom: 64px;
  z-index: 45;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: calc(100% - 24px);
  padding: 6px 8px 6px 12px;
  border-radius: 999px;
  background: rgba(20, 24, 31, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
  color: var(--cream);
  font-size: 12px;
}

.minigame-vote-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.minigame-vote-count {
  font-family: "JetBrains Mono", monospace;
  color: var(--lane);
}

.minigame-vote-btn {
  width: auto;
  padding: 5px 12px;
  font-size: 12px;
}

/* Lobby siada W ROGU, przy przycisku startu - nie na środku sceny. Odliczanie do dołączenia nie
   jest modalem: droga ma zostać widoczna, a decyzja „gram / nie gram" ma być obok miejsca, w
   którym grę się odpaliło. */
.minigame-lobby {
  position: absolute;
  left: 10px;
  top: 44px;
  z-index: 46;
  width: min(212px, 100% - 20px);
  padding: 9px 11px;
  border-radius: 14px;
  background: rgba(20, 24, 31, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(5px);
}

.minigame-lobby-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.minigame-lobby-count {
  font-family: "JetBrains Mono", monospace;
  font-size: 26px;
  color: var(--lane);
  line-height: 1;
}

.minigame-lobby-title {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--cream);
}

.minigame-lobby-players {
  margin: 5px 0 8px;
  font-size: 11px;
  color: var(--cream-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.minigame-lobby-btn {
  width: 100%;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  font-family: "Inter", sans-serif;
  background: var(--lane);
  color: var(--asphalt);
  cursor: pointer;
  border: 0;
}

.minigame-lobby-btn.is-ghost {
  background: transparent;
  color: var(--cream);
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-weight: 700;
}

.minigame-lobby-card, .minigame-results-card, .minigame-nickname-card {
  width: min(340px, 100% - 32px);
  padding: 16px 18px;
  border-radius: 16px;
  text-align: center;
  background: rgba(20, 24, 31, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}

.minigame-results {
  position: absolute;
  inset: 0;
  z-index: 47;
  display: grid;
  place-items: center;
  background: rgba(16, 18, 22, 0.34);
}

.minigame-results-card {
  max-height: calc(100% - 28px);
  overflow: auto;
}

.minigame-results-title {
  font-family: "Outfit", sans-serif;
  font-size: 20px;
  margin: 2px 0 8px;
}

.minigame-podium {
  margin: 10px 0 12px;
}

.minigame-results-rows {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}

.minigame-results-rows li {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  color: var(--cream-dim);
}

.minigame-results-rows li.is-you {
  color: var(--cream);
}

.minigame-results-rank {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--cream-dimmer);
}

.minigame-results-nick {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.minigame-results-stats {
  grid-column: 2;
  font-size: 10px;
  color: var(--cream-dimmer);
}

.minigame-results-score {
  grid-row: 1;
  grid-column: 3;
  font-family: "JetBrains Mono", monospace;
  color: var(--lane);
}

.minigame-medal {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 13px;
  margin: 0 0 8px;
  color: var(--lane);
}

.minigame-awards {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  color: var(--amber);
}

.minigame-claim-nudge {
  font-size: 11px;
  color: var(--cream-dim);
  margin: 0 0 12px;
}

.minigame-nickname {
  position: absolute;
  inset: 0;
  z-index: 48;
  display: grid;
  place-items: center;
  background: rgba(16, 18, 22, 0.44);
}

.minigame-nickname-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.minigame-nickname-card label {
  font-size: 13px;
  color: var(--cream);
}

.minigame-nickname-card input {
  width: 100%;
  padding: 9px 11px;
  border-radius: 10px;
  font-size: 14px;
  background: var(--asphalt-3);
  border: 1px solid var(--line);
  color: var(--cream);
}

.minigame-nickname-actions {
  display: flex;
  gap: 8px;
}

.minigame-nickname-actions .btn {
  width: auto;
  flex: 1;
}

@media (max-width: 480px) {
  .minigame-hud {
    top: 40px;
    right: 8px;
    min-width: 118px;
    padding: 6px 8px;
  }
  .minigame-launcher, .minigame-restore, .minigame-lobby {
    top: 40px;
    left: 8px;
  }
  .minigame-lobby {
    width: min(196px, 100% - 16px);
  }
}
/* Redukcja ruchu: bańki i tak są renderowane nieruchomo (patrz BubblePopStage) - wyłączamy też
   drganie i animację pęknięcia, zostawiając samą informację o wyniku. */
@media (prefers-reduced-motion: reduce) {
  .minigame-bubble-skin {
    animation: none;
  }
  .minigame-bubble-shine {
    animation: none;
    opacity: 0.25;
  }
  .minigame-burst {
    animation-duration: 0.4s;
  }
  .minigame-burst::before, .minigame-burst::after {
    animation: none;
    opacity: 0;
  }
  .minigame-droplets {
    display: none;
  }
}
/* Zakładka „Ruch" w panelu admina - statystyki odwiedzin liczone u siebie (PageView).
   Wykresy są zwykłym flexem z paskami, bez biblioteki: strona nie może ciągnąć niczego z CDN
   (patrz self-hosting fontów), a słupki i tak potrzebują tylko wysokości w procentach. */
.traffic-filters {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.traffic-ranges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.range-btn {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  text-decoration: none;
  background: var(--asphalt-3);
  border: 1px solid var(--line);
  color: var(--cream-dim);
}

.range-btn.is-active {
  background: var(--lane);
  border-color: var(--lane);
  color: var(--asphalt);
  font-weight: 700;
}

/* Pola MUSZĄ móc się zwężać (min-width:0 + flex-basis), inaczej rząd filtrów ma min-content
   szerszy od telefonu, a wtedy fixed-owa nawigacja odkleja się od ekranu - patrz komentarz
   przy .admin-row. */
.traffic-selects {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.traffic-selects .input {
  flex: 1 1 140px;
  min-width: 0;
  width: auto;
  padding: 8px 10px;
  font-size: 12.5px;
}

.traffic-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--cream-dim);
}

/* Wartości są WYPISANE nad słupkami (nie w title=""), bo na telefonie nie ma czym najechać.
   Cena: kolumna musi zmieścić liczbę, więc jest szersza, a wykres przewija się w poziomie -
   przewijanie MUSI zostać zamknięte w .traffic-chart (max-width:100%), inaczej min-content strony
   robi się szerszy od telefonu i odkleja się fixed-owa nawigacja (patrz .admin-row). */
.traffic-chart {
  display: flex;
  align-items: stretch;
  gap: 2px;
  height: 150px;
  overflow-x: auto;
  max-width: 100%;
  padding-bottom: 2px;
}

.traffic-chart-hours {
  height: 118px;
}

.tc-col {
  flex: 1 0 26px;
  min-width: 26px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 3px;
}

/* Tor słupka bierze CAŁĄ resztę wysokości, więc height:X% na słupku to naprawdę udział w maksimum,
   a liczba i podpis nie zjadają skali (i nic nie wystaje poza wykres). */
.tc-track {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: flex-end;
}

.tc-bar {
  width: 100%;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--lane), rgba(245, 200, 76, 0.35));
}

.tc-bar-alt {
  background: linear-gradient(180deg, var(--teal), rgba(42, 157, 157, 0.3));
}

.tc-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  line-height: 1;
  color: var(--cream-dim);
  white-space: nowrap;
  height: 11px;
}

.tc-num.is-zero {
  color: var(--cream-dimmer);
  opacity: 0.45;
}

.tc-lbl {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  color: var(--cream-dimmer);
  white-space: nowrap;
  height: 11px;
}

.breakdown-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto;
  gap: 8px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12.5px;
}

.breakdown-row:last-child {
  border-bottom: none;
}

.bd-lbl {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bd-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--asphalt-3);
  overflow: hidden;
}

.bd-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--lane);
}

.bd-val {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  white-space: nowrap;
}

.traffic-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12.5px;
}

.traffic-row:last-child {
  border-bottom: none;
}

.tr-when {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--cream-dimmer);
}

.tr-path {
  flex: 1 1 120px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--cream);
}

.tr-meta {
  flex: 1 1 100%;
  font-size: 11px;
}

.traffic-chip {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  background: var(--asphalt-3);
  border: 1px solid var(--line);
  color: var(--cream-dim);
}

.traffic-chip.is-user {
  background: rgba(42, 157, 157, 0.16);
  border-color: var(--teal);
  color: var(--cream);
}

a.traffic-chip {
  text-decoration: none;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-two-col {
  display: grid;
  gap: 0;
}

@media (min-width: 900px) {
  .admin-two-col {
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
  }
}
/* Licznik przy pozycji nawigacji panelu (otwarte uwagi). Ma być widoczny, ale nie może poszerzyć
   pozycji - inaczej pasek nawigacji przestaje się mieścić na telefonie (patrz .admin-row). */
.navbtn {
  position: relative;
}

.nav-count {
  position: absolute;
  top: 2px;
  right: calc(50% - 20px);
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--coral);
  color: #fff;
  font: 700 10px/16px "Outfit", sans-serif;
  text-align: center;
  pointer-events: none;
}

/* W pionowym pasku panelu wiersz jest poziomy, więc licznik siada na jego końcu (a zwinięty -
   tuż przy ikonie), zamiast wisieć nad nią jak w dolnym pasku. */
.adminnav .nav-count {
  position: static;
  margin-left: auto;
  flex: 0 0 auto;
}

/* Collapsed rail: the icon IS the item, so the counter has to shrink into its top-right corner.
   At the full size it covered the pencil almost completely and the item read as a bare badge. */
.adminnav:not(.is-open) .nav-count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  font-size: 9px;
  line-height: 14px;
}