@font-face {
      font-family: 'Nasa';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      /* wydajność , wyświetla tekst podczas ładowania */
      src: url('https://projektika.org/fonts/NasalizationRg-Regular.woff2') format('woff2'),
          /* Nowoczesne przeglądarki */
          url('https://projektika.org/fonts/NasalizationRg-Regular.woff') format('woff');
      /* Starsze przeglądarki */
  }

  #launch-screen__title {
      font-family: 'Nasa', sans-serif;
      letter-spacing: 3px;
      text-shadow: 0 0 55px rgba(74, 255, 24, 0.764), -1px 0px 11px rgba(255, 255, 255, 0);
  }

  #start-btn {
      font-size: 1.5rem;
      letter-spacing: 3px;
      overflow: hidden;
      -webkit-box-shadow: 0 20px 50px rgba(47, 173, 12, 0.5);
      box-shadow: 0 20px 50px rgba(47, 173, 12, 0.5);
  }

  .stopMusic {
      font-weight: 500;
      color: rgb(255, 0, 0);
      background-color: #8e8e8e !important;
  }

  .btn-outline-success {
      border-color: #09ff00;
  }


  @keyframes jumping {
      0% {
          transform: scale(2);
      }

      100% {
          transform: scale(1);
      }
  }

  @keyframes dotReveal {
      to {
          opacity: 1;
      }
  }

  @keyframes line {
      0% {
          stroke-dashoffset: 100%;
      }

      100% {
          stroke-dashoffset: 0%;
      }
  }

  body {
      margin: 0;
      padding: 0;
  }

  #game-container {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
      /*box-sizing: border-box;*/
      background-color: #000;
      touch-action: none;
      overflow: hidden;
  }

  #mainContainer {
      background: #000;
      background-color: #000;
       overflow: hidden;
  }

  /* Slot na canvas galaktyki  */
  #bg-canvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 3;
  }

  #rotating-bg {
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: #000;
      overflow: hidden;
      background-image: url('https://projektika.org/gamesImg/pathFinder/galaxy1-square.webp');
      background-position: 50% 50%;
      animation: bgRotate 400s linear infinite;
      transform-origin: center center;
      z-index: 0;
      opacity: 0.5;
  }

  @keyframes bgRotate {
      from {
          transform: rotate(0deg);
      }

      to {
          transform: rotate(360deg);
      }
  }

  #pointer-data {
      font-family: 'Nasa', sans-serif;
      font-size: .8rem;
      color: #09ff00b1;
      z-index: 20000;
      position: absolute;
      top: 1%;
      left: 2%;
      width: 50%;
      height: 2%;
      pointer-events: none;
  }

  #pointer-hud {
      font-family: 'Nasa', sans-serif;
      font-size: 1.2rem;
      color: #09ff00b1;
      z-index: 20000;
      position: absolute;
      top: 5.2%;
      left: 2%;
      width: 50%;
      height: 2%;
      pointer-events: none;
      align-items: center;
  }

  #level-hud{
      font-family: 'Nasa', sans-serif;
      font-size: 1.2rem;
      color: #09ff00b1;
      z-index: 20000;
      position: absolute;
      top: 2.5%;
      left: 2%;
      width: 50%;
      height: 2%;
      pointer-events: none;
      align-items: center;
  }



  /***********************
    croshair
    ***********************/
  /* Wspólne style dla linii */
  .crosshair {
      position: absolute;
      background-color: rgba(72, 255, 0, 0.411);
      /* Kolor linii */
      pointer-events: none;
      /* Linie nie blokują kliknięć */
      z-index: 19;
      transition: opacity 250ms ease-in;
  }

  /* Linia pozioma */
  .hl {
      width: 100%;
      height: 1px;
      top: 0;
      left: 0;
      margin: 0%;
      padding: 0%;
  }

  /* Linia pionowa */
  .vt {
      height: 100%;
      width: 1px;
      top: 0;
      left: 0;
      margin: 0%;
      padding: 0%;
  }

  #app {
      position: relative;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 20;
      pointer-events: none;
      cursor: url('https://projektika.org/gamesImg/pathFinder/celownik.svg') 16 16, crosshair;
      /* przepuszcza klik na dzieci */
      overflow: hidden;
  }

  svg,
  #score,
  #launch-screen {
      pointer-events: auto;
  }

  #svg circle[data-id] {
      transition: opacity 0.4s ease-out, transform 0.4s ease-out;
      transform-origin: center;
  }

  #svg circle.blown-away {
      opacity: 0;
      transform: scale(0.1) translate(var(--dx, 0px), var(--dy, 0px));
  }


  #game-container svg {
      box-sizing: border-box;
      height: 100%;
      width: 100%;
      padding: 0;
      margin: 0;
      overflow: hidden;
      position: relative;
      z-index: 1;
  }

  .centerDiv {
      display: flex;
      justify-content: center;
      /* Poziom */
      align-items: center;
  }

  /* ── Gwiazdy-sprite pod punktami ── */
  .star-sprite {
      position: absolute;
      z-index: 0;
      pointer-events: none;
      transform: translate(-50%, -50%);
      /*background-image: url('https://projektika.org/gamesImg/pathFinder/gwiazdyPathfinder350x50.webp');*/
      background-size: auto;
      background-repeat: no-repeat;
      transform-origin: center center;
  }



  /* ── Etykieta odległości ── */
  #ruler-label {
      position: absolute;
      z-index: 20;
      pointer-events: none;
      color: rgba(241, 196, 15, 1.0);
      font-family: 'Space Mono', monospace;
      font-size: 1.2rem;
      /*0.95em;*/
      font-weight: bold;
      background: rgba(0, 0, 0, 0.55);
      padding: 2px 7px;
      border-radius: 4px;
      border: 1px solid rgba(255, 216, 59, 0.8);
      white-space: nowrap;
      display: none;
      transform: translate(-50%, -130%);
      -webkit-box-shadow: 0 0px 50px rgba(241, 252, 29, 0.5);
      box-shadow: 0 0px 50px rgba(247, 255, 24, 0.5);
  }

  .dot {
      z-index: 10;
      stroke-width: 1;
      stroke: rgba(255, 255, 255, 0.5);
      /*black;*/
      width: 15px;
      height: 15px;
      fill: rgba(241, 196, 15, 0);
      -moz-transform-origin: center;
      -webkit-transform-origin: center;
      transform-origin: center;
      transition: all 0.6s cubic-bezier(0.175, 0.885, 0.320, 1.275);
  }

  .dot--starting {
      stroke: rgb(86, 243, 29);
      stroke-width: 3;
      stroke-miterlimit: outside;
      animation: jumping 0.5s ease-in-out alternate infinite;
  }

  .dot:not(.dot--starting) {
      opacity: 0;
      animation: dotReveal 1s linear;
      animation-fill-mode: forwards;
  }

  #svg .dot:hover {
      transform: scale(2);
  }

  #svg .dot[data-selected=true] {
      opacity: 1;
      /* fill: rgba(46, 204, 113, 1.0);*/
      stroke-width: 2;
      stroke: rgb(42, 214, 217);
      animation: jumping 1s ease-in-out alternate infinite;
      animation-delay: 0;
  }

  #svg .dot[data-visited=true] {
      /*fill: rgba(46, 204, 113, 1.0);*/
      stroke-width: 2;
      stroke: rgb(42, 214, 217);
      animation: jumping 1s ease-in-out alternate infinite;
      animation-delay: 0;
      opacity: 1;
  }

  .line {
      z-index: 10;
      stroke: rgb(36, 153, 85);
      stroke-width: 3;
      stroke-dasharray: 5 16;
      animation: line 10s linear infinite;
  }

  @media (max-width:480px) {
      #preline {
          display: block;
      }
  }

  #score {
      position: absolute;
      z-index: 0;
      top: 1%;
      right: 2%;
      text-align: right;
      font-family: 'Nasa', sans-serif;
      /*transform: translate(-50%, -50%);*/
      font-size: 3rem;
      color: rgba(46, 204, 113, 0.3);
  }

  .btnStar {
      background: transparent;
      cursor: pointer;
      color: rgb(232, 232, 232) !important;
      font-weight: bold;
      padding: 15px 60px;
      border-radius: 6px;
      border: 3px solid rgba(241, 196, 15, 1.0);
      transition: all 0.3s ease-out;
  }

  .btnStar:hover {
      background: rgba(241, 196, 15, 1.0);
      color: black;
  }

  .btnQty {
      font-weight: 400 !important;
  }

  #launch-screen {
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      visibility: hidden;
      position: absolute;
      z-index: 10;
      /*background-image: url('https://projektika.org/gamesImg/pathFinder/background.webp');*/
      background-image: linear-gradient(45deg, black, rgba(46, 204, 113, 0.2));
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      opacity: 0;
      transition: all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1.275);
  }

  #launch-screen.is-visible {
      opacity: 1;
      visibility: visible;
  }

  #launch-screen-content {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: bottom;
      justify-content: center;
      border-radius: 6px;
      padding: 30px;
      transform: scale(0.8);
      transition: all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1.275);
      -webkit-box-shadow: 0 20px 50px rgba(47, 173, 12, 0.5);
      box-shadow: 0 20px 50px rgba(47, 173, 12, 0.5);
      margin-top: 15%;
      /*background-image: linear-gradient(45deg, black, rgba(17, 76, 42, 0.2));*/
      /*border: 1px solid rgba(131, 238, 92, 0.9);*/
  }

  #launch-screen.is-visible #launch-screen-content {
      transform: scale(1);
  }

  #launch-screen-content h2 {
      position: relative;
      /*font-family: 'Bungee Outline', cursive;*/
      color: rgba(46, 204, 113, 1.0);
      font-size: 4rem;
      margin: 0 0 0.4em 0;
  }

  #launch-screen-content p {
      font-family: 'Space Mono', monospace;
      color: #ccc;
      font-size: 1em;
      margin: 0 0 2em 0;
  }

  #launch-screen-content .krolik {
      position: absolute;
      top: -12rem;
      right: 2rem;
      max-width: 300px;
  }

  #launch-screen-content .krolik img {
      width: 100%;
      height: 100%;
      object-fit: fill;
  }

  .flipH {
      -moz-transform: scaleX(-1);
      -o-transform: scaleX(-1);
      -webkit-transform: scaleX(-1);
      transform: scaleX(-1);
      filter: FlipH;
      -ms-filter: "FlipH";
  }

  #end-screen {
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      visibility: hidden;
      position: absolute;

      background-image: url('https://projektika.org/gamesImg/pathFinder/endScreenBG.webp');
      /*background-image: linear-gradient(45deg, black, rgba(46, 204, 113, 0.2));*/
      bottom: 0;
      left: 0;
      right: 0;
      opacity: 0;
      transition: all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1.275);
  }

  #end-screen.is-visible {
      opacity: 1;
      visibility: visible;
  }

  #end-screen-content {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: bottom;
      justify-content: center;
      border-radius: 6px;
      padding: 30px;
      transform: scale(0.8);
      transition: all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1.275);
      -webkit-box-shadow: 0 20px 50px rgba(47, 173, 12, 0.5);
      box-shadow: 0 20px 50px rgba(47, 173, 12, 0.5);
      /*background-image: linear-gradient(45deg, black, rgba(17, 76, 42, 0.2));*/
      /*border: 1px solid rgba(131, 238, 92, 0.9);*/
  }

  #end-screen.is-visible #end-screen-content {
      transform: scale(1);
  }

  #end-screen-content h2 {
      position: relative;
      /*font-family: 'Bungee Outline', cursive;*/
      color: rgba(46, 204, 113, 1.0);
      font-size: 4rem;
      margin: 0 0 0.4em 0;
  }

  #end-screen-content p {
      font-family: 'Space Mono', monospace;
      color: #ccc;
      font-size: 1em;
      margin: 0 0 3em 0;
  }


  #lastScore {
      display: none;
  }

  #lastScore.is-visible {
      display: block;
  }

  #lastScore__number {
      color: rgba(231, 76, 60, 1.0);
  }

  #finalPath {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 5000;
  }

  #myLine {
      stroke: #22f11b;
      pointer-events: none;
  }

  .header-title {
      font-size: 2.2rem;
      color: rgb(18, 55, 21);
      text-align: center;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  }

  .settings {
      position: relative;
      display: block;
  }

  @media (max-width: 768px) {
      .header-title {
          font-size: 1.2rem;
          margin-bottom: 0.5rem !important;
      }

      #launch-screen-content h2 {
          font-size: 2.5em;
      }

      #start-btn {
          font-size: 1rem;
      }
  }


  .game-over {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.8);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1000;
  }

  .game-over-content {
      background: white;
      color: #333;
      padding: 20px;
      border-radius: 20px;
      text-align: center;
      width: 100%;
      max-width: 600px;
      font-size: 1.2rem;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  }

  .game-over h2 {
      font-size: 2rem;
      margin-bottom: 20px;
      color: #667eea;
  }


  .subdivide {
      border: none;
      border-top: 3px double #169611;
      color: #0d7f27;
      overflow: visible;
      text-align: center;
      height: 5px;
  }

  .subdivide::after {
      background: white;
      content: "☼";
      padding: 0 4px;
      position: relative;
      top: -13px;
  }


  /* Stylowanie ścieżki (tracka) */
  .custom-range::-webkit-slider-runnable-track {
      background: #51a446;
      /* jasny szary */
      height: 8px;
      border-radius: 5px;
  }

  .custom-range::-moz-range-track {
      background: #51a446;
      height: 8px;
      border-radius: 5px;
  }

  .custom-range::-ms-track {
      background: #51a446;
      height: 8px;
      border-radius: 5px;
      border-color: transparent;
      color: transparent;
  }

  /* Stylowanie wypełnionej części (opcjonalnie) */
  .custom-range::-webkit-slider-thumb {
      appearance: none;
      width: 20px;
      height: 20px;
      background: #0d6efd;
      cursor: pointer;
      border-radius: 50%;
      margin-top: -6px;
      /* wycentrowanie */
  }

  .custom-range::-moz-range-thumb {
      width: 20px;
      height: 20px;
      background: #0d6efd;
      cursor: pointer;
      border-radius: 50%;
      border: none;
  }

  .custom-range::-ms-thumb {
      width: 20px;
      height: 20px;
      background: #0d6efd;
      cursor: pointer;
      border-radius: 50%;
  }