.ps-menu {
  list-style: none;
}
img.center-img {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
  position: static !important;
}


@media (max-width: 768px) {
  .ps-menu {
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    width: 220px;
    background: #000;
    padding: 15px;
    z-index: 9999; /* 👈 BARDZO WAŻNE */
  }

  .ps-menu.active {
    display: block;
  }
}

/* TŁO + FONT */
body {
  background: radial-gradient(circle, #0b0f1a, #000);
  color: #00eaff;
  font-family: 'Segoe UI', sans-serif;
}

/* HEADER */
.ps-header {
  background: linear-gradient(180deg, #05080f, #000);
  border-bottom: 2px solid #00eaff;
}

/* NAV */
.ps-nav {
  display: flex;
  align-items: center;
  padding: 15px 20px;
}

/* LOGO */
.ps-logo {
  font-size: 22px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 0 0 5px #00eaff;
}

/* MENU */
.ps-menu {
  list-style: none;
  display: flex;
  gap: 30px;
  margin-left: auto;
}

/* LINKI */
.ps-menu a {
  color: #7df9ff;
  text-decoration: none;
  padding: 6px 12px;
  position: relative;
  transition: 0.3s;
}

/* PASEK PODŚWIETLENIA (PS2 STYLE) */
.ps-menu a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 234, 255, 0.15);
  opacity: 0;
  transform: scaleX(0.8);
  transition: 0.3s;
}

/* HOVER / FOCUS */
.ps-menu a:hover::before,
.ps-menu a.active::before {
  opacity: 1;
  transform: scaleX(1);
}

.ps-menu a:hover,
.ps-menu a.active {
  color: #fff;
  text-shadow: 0 0 8px #00eaff;
}

/* HAMBURGER */
.hamburger {
  display: none;
  font-size: 28px;
  margin-left: 20px;
  cursor: pointer;
  color: #00eaff;
}

/* MOBILE */
@media (max-width: 768px) {
  .ps-menu {
    position: absolute;
    top: 70px;
    right: 0;
    background: #000;
    flex-direction: column;
    width: 220px;
    padding: 15px;
    display: none;
    border-left: 2px solid #00eaff;
  }

  .ps-menu.active {
    display: flex;
  }

  .hamburger {
    display: block;
  }
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 20px;
  margin-left: auto;
}


.navbar {
  display: flex;
  align-items: center;
}

.logo {
  font-size: 24px;
  font-weight: bold;
}

.nav-links {
  margin-left: auto;
  display: flex;
  gap: 20px;
}

.nav-links a:hover {
  color: #00ffcc;
  text-shadow: 0 0 15px #00ffcc, 0 0 30px #00ffcc;
}

body::before {
  content:"";
  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  background: repeating-linear-gradient(0deg, #0f0f0f 0px, #111 2px);
  z-index:-1;
  animation: gridMove 5s linear infinite;
}

@keyframes gridMove {
  0% { background-position-y:0; }
  100% { background-position-y:100px; }
}

.scorpion-character {
  filter: drop-shadow(0 12px 6px rgba(0,0,0,0.9));
  position:absolute;
  z-index: 1000;
  left: 39%;               /* domyślnie centrum */
  transform: translateX(-50%);
  top: -40px;             /* ⬆️ reguluje wysokość nad napisem */
  width: 120px;            /* ⬇️ zmień, żeby był większy/mniejszy */
  image-rendering: pixelated; /* zachowuje retro look */
  animation: scorpionIdle 2s ease-in-out infinite;
  pointer-events: none;
}
.hero:hover .scorpion-character {
  animation: scorpionJump 0.6s ease;
}

@keyframes scorpionJump {
  0% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-25px); }
  100% { transform: translateX(-50%) translateY(0); }
}


.hero {
  position: relative;
  margin-top: 80px;
}

/* NAPIS RGB – masz już */
.rgb-text {
  font-size: 64px;
  margin-bottom: 40px;
}

/* CRASH */
.crash-character {
  filter: drop-shadow(0 12px 6px rgba(0,0,0,0.6));
  position:absolute;
  z-index: 1000;
  right: 37%; 
  transform: translateX(-50%);
  top: -140px;          /* ⬆️ IM MNIEJ, TYM WYŻEJ */
  width: 120px;         /* ⬇️ MNIEJSZY CRASH */
  image-rendering: pixelated;
  animation: crashIdle 2s ease-in-out infinite;
  pointer-events: none;
}
.hero {
  position: relative;
  text-align: center;
  margin-top: 80px;
  height: 200px; /* wysokość dla animacji */
}
@media (max-width:768px){
  .scorpion-character {
    width: 60px;
    top: -40px;      /* podnieś na telefonie */
    left: 10%;         /* dostosuj pozycję */
    transform: translateX(-50%);
  }
}
@media (max-width: 768px) {
  .crash-character {
    width: 60px;        /* mniejszy Crash na telefonie */
    top: -80px;         /* podniesiony nad napis */
  }
}



}

/* SUBTITLE */
.subtitle {
  margin-top: 20px;
  font-size: 18px;
  opacity: 0.9;
}

.navbar {
  background: #0b0b0b;
  border-bottom: 2px solid #00ffcc;
  box-shadow: 0 0 15px #00ffcc;
}

.nav-links a {
  color: #e0e0e0;
  transition: 0.3s;
}

.nav-links a:hover {
  color: #00ffcc;
  text-shadow: 0 0 8px #00ffcc;
}

/* RESET */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Tahoma, sans-serif;
}

/* TŁO STRONY */
body {
  background: radial-gradient(circle at top, #111 0%, #000 70%);
  color: #e0e0e0;
  min-height: 100vh;
}

/* KONTENER */
.container {
  max-width: 1100px;
  margin: auto;
  padding: 30px 20px;
  text-align: left;
}

/* NAGŁÓWKI */
h1, h2, h3 {
  color: #00ffcc;
  text-shadow: 0 0 8px #00ffcc;
  margin-bottom: 15px;
}

/* PARAGRAFY */
p {
  line-height: 1.6;
  margin-bottom: 10px;
}

.rgb-text {
  font-size: 48px;
  font-weight: bold;
  text-transform: uppercase;

  background: linear-gradient(
    90deg,
    red,
    orange,
    yellow,
    green,
    cyan,
    blue,
    violet,
    red
  );

  background-size: 400% 400%; /* 🔥 TO JEST KLUCZ */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: rgbMove 3s linear infinite;
}

@keyframes rgbMove {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}



        body {
            background-color: #111;
            color: #eee;
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        header {
            background-color: #222;
            text-align: center;
            padding: 30px 10px;
            border-bottom: 3px solid #444;
        }
        header h1 {
            font-size: 48px;
            color: #00ff80;
            text-shadow: 0 0 10px #00ff80;
        }
        .container {
            max-width: 900px;
            margin: auto;
            padding: 20px;
        }
        h2 {
            color: #00d4ff;
            text-shadow: 0 0 6px #00d4ff;
        }
        p {
            line-height: 1.6;
        }
        .logo {
            width: 300px;
            display: block;
            margin: 20px auto;
        }
        .discord-btn {
            display: inline-block;
            margin-top: 20px;
            padding: 15px 25px;
            background-color: #5865F2;
            color: white;
            text-decoration: none;
            font-size: 20px;
            border-radius: 10px;
            transition: 0.3s;
        }
        .discord-btn:hover {
            background-color: #4752C4;
        }
        footer {
            text-align: center;
            padding: 20px;
            margin-top: 30px;
            color: #777;
            border-top: 1px solid #333;
        }
/* ===== WERSJA MOBILNA ===== */
@media (max-width: 768px) {

    header h1 {
        font-size: 32px;
    }

    .container {
        padding: 15px;
    }

    h2 {
        font-size: 22px;
    }

    p, li {
        font-size: 16px;
    }

    .discord-btn, .back-btn {
        width: 100%;
        text-align: center;
        font-size: 18px;
        padding: 14px;
    }

    nav a {
        display: block;
        margin: 10px 0;
        font-size: 18px;
    }

    img {
        max-width: 100%;
        height: auto;
    }
}

    /* ===== NAVBAR ===== */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #222;
    padding: 15px 20px;
}

.logo-nav {
    color: #00ff80;
    font-size: 22px;
    font-weight: bold;
}

.nav-links a {
    color: #eee;
    text-decoration: none;
    margin-left: 20px;
    font-size: 18px;
}

.nav-links a:hover {
    color: #00d4ff;
}

/* ===== HAMBURGER ===== */
.hamburger {
    display: none;
    font-size: 28px;
    cursor: pointer;
    color: white;
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
    .hamburger {
        display: block;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: #222;
        position:absolute;
        z-index: 10000;
        top: 65px;
        left: 0;
    }

    .nav-links a {
        padding: 15px;
        border-top: 1px solid #333;
        margin: 0;
    }

    .nav-links.show {
        display: flex;
    }
}
.accordion-btn{
background:#0f0f0f;
color:#00ffcc;
cursor:pointer;
padding:16px;
width:100%;
border:none;
text-align:left;
font-size:18px;
border-left:4px solid #00ffcc;
transition:0.3s;
margin-top:5px;
}

.accordion-btn:hover{
background:#1a1a1a;
box-shadow:0 0 10px #00ffcc;
}
.panel{
display:none;
background:#1c1c1c;
padding:15px;
border-left:4px solid #00ffcc;
margin-bottom:5px;
}
.accordion-btn::after{
content:"▼";
float:right;
transition:0.3s;
}

.accordion-btn.active::after{
transform:rotate(180deg);
}
details{
background:#111;
border:1px solid #00ffcc;
border-radius:8px;
margin-bottom:10px;
padding:10px;
}

summary{
cursor:pointer;
font-size:18px;
font-weight:bold;
color:#00ffcc;
list-style:none;
}

summary:hover{
text-shadow:0 0 8px #00ffcc;
}

details p{
margin-top:10px;
color:#ddd;
}
summary::after{
content:"▼";
float:right;
transition:0.3s;
}

details[open] summary::after{
transform:rotate(180deg);
}
.trivia{
display:flex;
flex-wrap:wrap;
gap:15px;
justify-content:center;
margin-top:20px;
}

.trivia-item{
background:#1c1c1c;
border:2px solid #00ff80;
border-radius:10px;
padding:15px;
width:250px;
transition:0.3s;
}

.trivia-item:hover{
transform:translateY(-5px);
box-shadow:0 0 15px #00ff80;
}

.trivia-item h3{
color:#00ff80;
margin-bottom:5px;
}

.trivia-item p{
font-size:14px;
line-height:1.4;
color:#ddd;
}
.faq-btn{
background:#111;
color:#00ffcc;
cursor:pointer;
padding:14px 18px;
width:100%;
border:none;
text-align:left;
font-size:16px;
border-left:4px solid #00ffcc;
margin-top:5px;
transition:0.3s;
}

.faq-btn:hover{
background:#1a1a1a;
box-shadow:0 0 10px #00ffcc;
}

.faq-panel{
display:none;
background:#1c1c1c;
padding:10px 15px;
border-left:4px solid #00ffcc;
margin-bottom:5px;
}
.back-btn{
display:inline-block;
padding:10px 18px;
background:#111;
color:#00ffcc;
text-decoration:none;
font-weight:bold;
border-left:4px solid #00ffcc;
border-radius:6px;
transition:0.3s;
margin:15px 0;
}

.back-btn:hover{
background:#1a1a1a;
box-shadow:0 0 10px #00ffcc;
}

.search::placeholder {
  color: #888;
}

.ps-menu {
  list-style: none;
}
img.center-img {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
  position: static !important;
}


@media (max-width: 768px) {
  .ps-menu {
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    width: 220px;
    background: #000;
    padding: 15px;
    z-index: 9999; /* 👈 BARDZO WAŻNE */
  }

  .ps-menu.active {
    display: block;
  }
}

/* TŁO + FONT */
body {
  background: radial-gradient(circle, #0b0f1a, #000);
  color: #00eaff;
  font-family: 'Segoe UI', sans-serif;
}

/* HEADER */
.ps-header {
  background: linear-gradient(180deg, #05080f, #000);
  border-bottom: 2px solid #00eaff;
}

/* NAV */
.ps-nav {
  display: flex;
  align-items: center;
  padding: 15px 20px;
}

/* LOGO */
.ps-logo {
  font-size: 22px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 0 0 5px #00eaff;
}

/* MENU */
.ps-menu {
  list-style: none;
  display: flex;
  gap: 30px;
  margin-left: auto;
}

/* LINKI */
.ps-menu a {
  color: #7df9ff;
  text-decoration: none;
  padding: 6px 12px;
  position: relative;
  transition: 0.3s;
}

/* PASEK PODŚWIETLENIA (PS2 STYLE) */
.ps-menu a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 234, 255, 0.15);
  opacity: 0;
  transform: scaleX(0.8);
  transition: 0.3s;
}

/* HOVER / FOCUS */
.ps-menu a:hover::before,
.ps-menu a.active::before {
  opacity: 1;
  transform: scaleX(1);
}

.ps-menu a:hover,
.ps-menu a.active {
  color: #fff;
  text-shadow: 0 0 8px #00eaff;
}

/* HAMBURGER */
.hamburger {
  display: none;
  font-size: 28px;
  margin-left: 20px;
  cursor: pointer;
  color: #00eaff;
}

/* MOBILE */
@media (max-width: 768px) {
  .ps-menu {
    position: absolute;
    top: 70px;
    right: 0;
    background: #000;
    flex-direction: column;
    width: 220px;
    padding: 15px;
    display: none;
    border-left: 2px solid #00eaff;
  }

  .ps-menu.active {
    display: flex;
  }

  .hamburger {
    display: block;
  }
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 20px;
  margin-left: auto;
}


.navbar {
  display: flex;
  align-items: center;
}

.logo {
  font-size: 24px;
  font-weight: bold;
}

.nav-links {
  margin-left: auto;
  display: flex;
  gap: 20px;
}

.nav-links a:hover {
  color: #00ffcc;
  text-shadow: 0 0 15px #00ffcc, 0 0 30px #00ffcc;
}

body::before {
  content:"";
  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  background: repeating-linear-gradient(0deg, #0f0f0f 0px, #111 2px);
  z-index:-1;
  animation: gridMove 5s linear infinite;
}

@keyframes gridMove {
  0% { background-position-y:0; }
  100% { background-position-y:100px; }
}

.scorpion-character {
  filter: drop-shadow(0 12px 6px rgba(0,0,0,0.9));
  position:absolute;
  z-index: 1000;
  left: 39%;               /* domyślnie centrum */
  transform: translateX(-50%);
  top: -40px;             /* ⬆️ reguluje wysokość nad napisem */
  width: 120px;            /* ⬇️ zmień, żeby był większy/mniejszy */
  image-rendering: pixelated; /* zachowuje retro look */
  animation: scorpionIdle 2s ease-in-out infinite;
  pointer-events: none;
}
.hero:hover .scorpion-character {
  animation: scorpionJump 0.6s ease;
}

@keyframes scorpionJump {
  0% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-25px); }
  100% { transform: translateX(-50%) translateY(0); }
}


.hero {
  position: relative;
  margin-top: 80px;
}

/* NAPIS RGB – masz już */
.rgb-text {
  font-size: 64px;
  margin-bottom: 40px;
}

/* CRASH */
.crash-character {
  filter: drop-shadow(0 12px 6px rgba(0,0,0,0.6));
  position:absolute;
  z-index: 1000;
  right: 37%; 
  transform: translateX(-50%);
  top: -140px;          /* ⬆️ IM MNIEJ, TYM WYŻEJ */
  width: 120px;         /* ⬇️ MNIEJSZY CRASH */
  image-rendering: pixelated;
  animation: crashIdle 2s ease-in-out infinite;
  pointer-events: none;
}
.hero {
  position: relative;
  margin-top: 80px;
  height: 200px; /* wysokość dla animacji */
}
@media (max-width:768px){
  .scorpion-character {
    width: 60px;
    top: -40px;      /* podnieś na telefonie */
    left: 10%;         /* dostosuj pozycję */
    transform: translateX(-50%);
  }
}
@media (max-width: 768px) {
  .crash-character {
    width: 60px;        /* mniejszy Crash na telefonie */
    top: -80px;         /* podniesiony nad napis */
  }
}



}

/* SUBTITLE */
.subtitle {
  margin-top: 20px;
  font-size: 18px;
  opacity: 0.9;
}

.navbar {
  background: #0b0b0b;
  border-bottom: 2px solid #00ffcc;
  box-shadow: 0 0 15px #00ffcc;
}

.nav-links a {
  color: #e0e0e0;
  transition: 0.3s;
}

.nav-links a:hover {
  color: #00ffcc;
  text-shadow: 0 0 8px #00ffcc;
}

/* RESET */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Tahoma, sans-serif;
}

/* TŁO STRONY */
body {
  background: radial-gradient(circle at top, #111 0%, #000 70%);
  color: #e0e0e0;
  min-height: 100vh;
}

/* KONTENER */
.container {
  max-width: 1100px;
  margin: auto;
  padding: 30px 20px;
}

/* NAGŁÓWKI */
h1, h2, h3 {
  color: #00ffcc;
  text-shadow: 0 0 8px #00ffcc;
  margin-bottom: 15px;
}

/* PARAGRAFY */
p {
  line-height: 1.6;
  margin-bottom: 10px;
}

.rgb-text {
  font-size: 48px;
  font-weight: bold;
  text-transform: uppercase;

  background: linear-gradient(
    90deg,
    red,
    orange,
    yellow,
    green,
    cyan,
    blue,
    violet,
    red
  );

  background-size: 400% 400%; /* 🔥 TO JEST KLUCZ */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: rgbMove 3s linear infinite;
}

@keyframes rgbMove {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}



        body {
            background-color: #111;
            color: #eee;
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        header {
            background-color: #222;
            padding: 30px 10px;
            border-bottom: 3px solid #444;
        }
        header h1 {
            font-size: 48px;
            color: #00ff80;
            text-shadow: 0 0 10px #00ff80;
        }
        .container {
            max-width: 900px;
            margin: auto;
            padding: 20px;
        }
        h2 {
            color: #00d4ff;
            text-shadow: 0 0 6px #00d4ff;
        }
        p {
            line-height: 1.6;
        }
        .logo {
            width: 300px;
            display: block;
            margin: 20px auto;
        }
        .discord-btn {
            display: inline-block;
            margin-bottom: 40px;
            padding: 15px 25px;
            background-color: #5865F2;
            color: white;
            text-decoration: none;
            font-size: 20px;
            border-radius: 10px;
            transition: 0.3s;
            position: relative;
        }
        .discord-btn:hover {
            background-color: #4752C4;
        }
        footer {
            text-align: center;
            padding: 20px;
            margin-top: 30px;
            color: #777;
            border-top: 1px solid #333;
        }
/* ===== WERSJA MOBILNA ===== */
@media (max-width: 768px) {

    header h1 {
        font-size: 32px;
    }

    .container {
        padding: 15px;
    }

    h2 {
        font-size: 22px;
    }

    p, li {
        font-size: 16px;
    }

    .discord-btn, .back-btn {
        width: 100%;
        text-align: center;
        font-size: 18px;
        padding: 14px;
    }

    nav a {
        display: block;
        margin: 10px 0;
        font-size: 18px;
    }

    img {
        max-width: 100%;
        height: auto;
    }
}

    /* ===== NAVBAR ===== */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #222;
    padding: 15px 20px;
}

.logo-nav {
    color: #00ff80;
    font-size: 22px;
    font-weight: bold;
}

.nav-links a {
    color: #eee;
    text-decoration: none;
    margin-left: 20px;
    font-size: 18px;
}

.nav-links a:hover {
    color: #00d4ff;
}

/* ===== HAMBURGER ===== */
.hamburger {
    display: none;
    font-size: 28px;
    cursor: pointer;
    color: white;
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
    .hamburger {
        display: block;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: #222;
        position:absolute;
        z-index: 10000;
        top: 65px;
        left: 0;
    }

    .nav-links a {
        padding: 15px;
        border-top: 1px solid #333;
        margin: 0;
    }

    .nav-links.show {
        display: flex;
    }
}
.homebrew-item{
background:#1c1c1c;
border:2px solid #00ff80;
border-radius:10px;
padding:15px;
margin:0;
width:300px;
transition:0.3s;
}

.homebrew-item:hover{
box-shadow:0 0 10px #00ff80;
transform:translateY(-3px);
}

.homebrew-item h3{
color:#00ff80;
margin-bottom:5px;
}

.download-btn{
display:inline-block;
margin-top:10px;
background:#00ff80;
color:black;
padding:8px 18px;
text-decoration:none;
border-radius:6px;
font-weight:bold;
transition:0.3s;
}

.download-btn:hover{
background:#00cc66;
box-shadow:0 0 10px #00ff80;
}
.homebrew-list{
display:grid;
grid-template-columns:repeat(auto-fill, 260px);
gap:20px;
justify-content:flex-start;
margin-top:20px;
}

.homebrew-card{
background:#1c1c1c;
border:2px solid #00ff80;
border-radius:10px;
padding:15px;
transition:0.3s;
}

.homebrew-card:hover{
box-shadow:0 0 12px #00ff80;
transform:translateY(-3px);
}

.console{
font-size:14px;
color:#00ff80;
font-weight:bold;
}

.homebrew-card h3{
margin:5px 0;
}

.download-btn{
display:inline-block;
margin-top:10px;
background:#00ff80;
color:black;
padding:8px 15px;
text-decoration:none;
border-radius:6px;
font-weight:bold;
transition:0.3s;
}

.download-btn:hover{
background:#00cc66;
box-shadow:0 0 8px #00ff80;
}
.search-container{
margin:20px 0;
text-align:left;
}

#searchInput{
width:300px;
padding:10px;
border-radius:8px;
border:2px solid #00ff80;
background:#111;
color:white;
font-size:14px;
outline:none;
transition:0.3s;
}

#searchInput:focus{
box-shadow:0 0 8px #00ff80;
}

#searchInput::placeholder{
color:#aaa;
}