#guideOverlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  backdrop-filter: blur(5px);
  background: rgba(0,0,0,0.5);
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#guideOverlay.visible {
  opacity: 1;
}

#guideBackdrop {
  position: absolute;
  width: 100%; height: 100%;
  top: 0; left: 0;
}

#guideWindow {
  position: relative;
  background: #222;
  color: #fff;
  border-radius: 12px;
  padding: 30px;
  max-width: 800px; /* zwiększona szerokość */
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 0 25px rgba(0,0,0,0.5);
  text-align: left;
}

/* Stylizacja scrollbar dla WebKit (Chrome, Safari) */
#guideWindow::-webkit-scrollbar {
  width: 12px;
}

#guideWindow::-webkit-scrollbar-track {
  background: #111;
  border-radius: 10px;
}

#guideWindow::-webkit-scrollbar-thumb {
  background: #00ffc8;
  border-radius: 10px;
  border: 3px solid #111;
}

#guideWindow::-webkit-scrollbar-thumb:hover {
  background: #00ccaa;
}

/* Stylizacja scrollbar dla Firefox */
#guideWindow {
  scrollbar-width: thin;
  scrollbar-color: #00ffc8 #111;
}

#guideWindow h2 {
  font-size: 26px;
  color: #00ffc8;
  margin-bottom: 20px;
  text-align: center;
}


#guideContent p {
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 1.5;
}

#guideWindow button {
  margin: 20px auto 0; /* góra 20px, auto po bokach (środek poziomy), dół 0 */
  display: block;      /* aby margin auto zadziałało na poziomym centrowaniu */
  padding: 12px 0;     /* większa wysokość przycisku */
  width: 100%;         /* szeroki na 100% szerokości kontenera */
  max-width: 300px;    /* opcjonalnie max szerokość */
  font-size: 16px;     /* trochę większy font */
  background: #00ffc8;
  color: #000;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
}

#guideWindow button:hover {
  background: #00ccaa;
}

.modeTitle {
  font-size: 48px; /* 3 razy większe od normalnego tekstu (zakładając, że normalny ~16px) */
  font-weight: bold;
  color: #00ffc8;
  margin-bottom: 15px;
  text-align: center;
  text-shadow: 0 0 8px #00ffc8aa;
}





/*END GUIDE*/



/*CREDITS*/
#creditsOverlay {
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(5px);
  background: rgba(0, 0, 0, 0.5);
  z-index: 99999;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#creditsOverlay.visible {
  opacity: 1;
}

#creditsWindow {
  background: #222;
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
  padding: 30px;
  width: 500px;
  max-width: 90%;
  text-align: center;
  transform: scale(0.95);
  transition: transform 0.3s ease;
}

#creditsOverlay.visible #creditsWindow {
  transform: scale(1);
}

#creditsWindow h2 {
  font-size: 26px;
  color: #00ffc8;
  margin-bottom: 15px;
}

#creditsWindow p {
  font-size: 16px;
  line-height: 1.6;
}

.creditsMeta p {
  margin-top: 10px;
  font-size: 14px;
  color: #aaa;
}

#creditsWindow button {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 14px;
  background: #00ffc8;
  color: #000;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease;
}

#creditsWindow button:hover {
  background: #00ccaa;
}


@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Pacifico&display=swap');


/* Overlay (tło modalne) */
.overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(5px);
  display: none;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 99999;
}

.overlay.visible {
  opacity: 1;
  display: flex;
}

/* Okno modalne */
.window {
  background: #222;
  color: #fff;
  border-radius: 12px;
  padding: 30px 40px 30px 40px;
  max-width: 800px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 0 25px rgba(0,0,0,0.5);
  text-align: center; /* wyśrodkowanie tekstu */
  position: relative;
}

/* Ikona crown nad tytułem */
.crown {
  width: 50px;          /* połowa standardowej 100px */
  margin: 0 auto 20px auto; /* centrowanie i większy odstęp pod ikoną */
  display: block;
}

/* Tytuł */
.rules-title {
    font-size: 50px;
    font-family: 'Pacifico', cursive;
    color: #ffffff;
    text-shadow: 0 0 20px #b36bff, 0 0 40px #ff00ff;
    animation: glow 2s infinite alternate;
    margin-bottom: 30px; /* odstęp pod tytułem */
}

/* Pojedyncza reguła */
.rule {
    background: rgba(30, 30, 30, 0.8);
    margin: 20px auto;
    padding: 20px;
    border-radius: 10px;
    width: 100%;
    max-width: 800px;
    box-shadow: 0 0 10px rgba(163, 71, 255, 0.6);
    transition: transform 0.3s ease-in-out;
    text-align: center; /* wyśrodkowany tekst w regule */
}

.rule:hover {
    transform: scale(1.05);
}

.rule-header {
    font-size: 24px;
    color: #fff;
    text-shadow: 0 0 5px #fff, 0 0 10px #b36bff;
    margin-bottom: 10px;
}

.rule-text {
    font-size: 18px;
    color: #b36bff;
    text-shadow: 0 0 15px #b36bff, 0 0 30px #fff;
}

/* Przycisk Close */
.close-button {
    margin-top: 20px;
    display: block;
    width: 100%;
    padding: 12px;
    font-size: 16px;
    background: #b36bff;
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    user-select: none;
    text-align: center;
    font-weight: bold;
    box-shadow: 0 0 10px #b36bff;
    transition: 0.3s ease-in-out;
}

.close-button:hover {
    background: #d18fff;
    box-shadow: 0 0 15px #fff, 0 0 25px #b36bff;
}

/* Animacja glow */
@keyframes glow {
    0% { text-shadow: 0 0 15px #b36bff, 0 0 25px #fff; }
    100% { text-shadow: 0 0 20px #fff, 0 0 35px #b36bff; }
}

/* Scrollbar - styl fioletowy */
.window::-webkit-scrollbar {
    width: 10px;
}

.window::-webkit-scrollbar-track {
    background: #1a1a1a;
    border-radius: 10px;
}

.window::-webkit-scrollbar-thumb {
    background: #b36bff;
    border-radius: 10px;
    box-shadow: 0 0 5px #b36bff;
}

.window::-webkit-scrollbar-thumb:hover {
    background: #d18fff;
}

/* Firefox */
.window {
  scrollbar-width: thin;
  scrollbar-color: #b36bff #1a1a1a;
}



/*CHANGE LOG*/
#changelogContent ul {
  padding-left: 20px;
  margin-top: 10px;
  margin-bottom: 20px;
  color: #b36bff;
  text-shadow: 0 0 10px #b36bff;
  font-size: 18px;
}

#changelogContent li {
  margin-bottom: 8px;
  line-height: 1.4;
}
.changelog-note {
  font-style: italic;
  color: #888;
  margin-bottom: 15px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-left: 3px solid #ffa500;
  border-radius: 6px;
}
.changelog-full-btn {
  margin-top: 20px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  background: #2f3136;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: block;
  margin-left: auto;
  margin-right: auto;
  transition: background 0.2s;
}
.changelog-full-btn:hover {
  background: #404249;
}




/*privacy*/
.windowHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid #444;
}

.closeBtn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #fff;
  transition: color 0.2s;
}

.closeBtn:hover {
  color: #f55;
}