body {
  font-family: 'Segoe UI', Arial, sans-serif;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  color: #f3f3f3;
  background: #181818;
  transition: background 0.5s;
  position: relative;
}

/* Tła dla motywów */
body.default-bg {
  background: #181818 url('https://bing.com/th/id/BCO.748874cd-d287-43a2-a234-9b63951a356c.png') no-repeat center center fixed;
  background-size: cover;
}
body.default-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: inherit;
  filter: blur(6px) brightness(0.5);
}

body.matrix-bg {
  background: #000 url('https://bing.com/th/id/BCO.0f88ffcb-267c-4fcf-baa1-9597a04e7554.png') no-repeat center center fixed;
  background-size: cover;
}
body.matrix-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: inherit;
  filter: blur(4px) brightness(0.7);
}

body.candy-bg {
  background: #fff0f5 url('https://bing.com/th/id/BCO.1a69329b-ea30-4c01-9b5e-a7fe5aeb951d.png') no-repeat center center fixed;
  background-size: cover;
}
body.candy-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: inherit;
  filter: blur(4px) brightness(0.9);
}

body.neo-bg {
  background: #12121a url('https://bing.com/th/id/BCO.918fb377-4326-4b5b-87ef-ac0e1ad483e0.png') no-repeat center center fixed;
  background-size: cover;
}
body.neo-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: inherit;
  filter: blur(5px) brightness(0.7);
}

/* Kontener */
.container {
  max-width: 420px;
  margin: 40px auto 0 auto;
  background: rgba(30,30,30,0.92);
  border-radius: 18px;
  padding: 28px 18px 18px 18px;
  box-shadow: 0 8px 32px #000a;
  text-align: center;
  backdrop-filter: blur(2px);
  transition: background 0.4s;
}



.container {
  max-width: 1100px; /* szerokie, ale wyśrodkowane */
  margin: 40px auto 0 auto;
  background: rgba(30,30,30,0.92);
  border-radius: 18px;
  padding: 28px 18px 18px 18px;
  box-shadow: 0 8px 32px #000a;
  text-align: center;
  backdrop-filter: blur(2px);
  transition: background 0.4s;
  position: relative;
  z-index: 1;
}

/* Nowy wrapper na generatory, rozciąga na całą szerokość */
.generators-row {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: none;
  z-index: 0;
  margin-top: 32px;
  margin-bottom: 24px;
  display: flex;
  justify-content: center;
}

.generators {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 2vw;
  box-sizing: border-box;
}

.generator {
  flex: 1 1 220px;
  min-width: 220px;
  max-width: 320px;
  background: rgba(40,40,40,0.95);
  border-radius: 16px;
  padding: 18px 16px;
  box-shadow: 0 2px 8px #0001;
  margin: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Responsywność */
@media (max-width: 1200px) {
  .container {
    max-width: 98vw;
    padding: 10px 2vw 10px 2vw;
  }
  .generators {
    gap: 12px;
    max-width: 100vw;
    padding: 0 1vw;
  }
  .generator {
    min-width: 180px;
    max-width: 100vw;
  }
}
@media (max-width: 900px) {
  .generators-row {
    margin-left: 0;
    margin-right: 0;
    left: 0;
    width: 100vw;
  }
  .generators {
    flex-direction: column;
    gap: 8px;
    max-width: 100vw;
    padding: 0 1vw;
  }
  .generator {
    min-width: 0;
    max-width: 100vw;
  }
}

h1 {
  margin-bottom: 18px;
  font-size: 2.2em;
  letter-spacing: 2px;
  font-weight: 700;
  text-shadow: 0 2px 8px #000a;
}

#coins, #prestige {
  font-weight: bold;
  margin-bottom: 10px;
  font-size: 1.2em;
}

.shop-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 18px;
}

.save-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 18px;
}

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

.generator {
  background: rgba(40,40,40,0.95);
  margin: 10px 0;
  padding: 12px 10px;
  border-radius: 10px;
  min-width: 160px;
  flex: 1 1 160px;
  box-shadow: 0 2px 8px #0005;
  transition: background 0.4s;
}

.shop-item {
  border-bottom: 1px solid #444;
  padding: 10px 0;
}
.shop-item:last-child {
  border-bottom: none;
}

.side-panel {
  position: fixed;
  top: 60px;
  right: 5vw;
  width: 340px;
  min-height: 300px;
  background: rgba(30,30,30,0.98);
  color: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 24px #000a;
  padding: 24px 18px 18px 18px;
  z-index: 100;
  display: none;
  transition: opacity 0.2s, right 0.3s;
  max-height: 80vh;
  overflow-y: auto;
}

@media (max-width: 900px) {
  .container {
    max-width: 98vw;
    margin: 10px auto 0 auto;
    padding: 10px 2vw 10px 2vw;
  }
  .side-panel {
    left: 0;
    right: 0;
    width: 100vw;
    top: unset;
    bottom: 0;
    border-radius: 16px 16px 0 0;
    min-height: 180px;
    max-height: 60vh;
    padding: 18px 8px 8px 8px;
  }
  .generators {
    flex-direction: column;
    gap: 6px;
  }
}

/* Przycisk główny */
.click-button {
  width: 100%;
  padding: 18px;
  margin: 12px 0 18px 0;
  font-size: 1.3em;
  font-weight: bold;
  cursor: pointer;
  border: none;
  border-radius: 8px;
  background: linear-gradient(90deg, #ffb347, #ffcc33);
  color: #222;
  box-shadow: 0 2px 8px #0004;
  transition: background 0.3s, color 0.3s;
}
.click-button:hover {
  background: linear-gradient(90deg, #ffd700, #ffb347);
  color: #000;
}

/* Przycisk sklepów i prestiżu */
.shop-button, .prestige-button, .save-button, .upgrade {
  flex: 1 1 120px;
  padding: 12px;
  margin: 4px 0;
  font-size: 1.05em;
  cursor: pointer;
  border: none;
  border-radius: 7px;
  background: linear-gradient(90deg, #3498db, #6dd5fa);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 8px #0002;
  transition: background 0.3s, color 0.3s;
}
.shop-button:hover, .prestige-button:hover, .save-button:hover, .upgrade:hover {
  background: linear-gradient(90deg, #6dd5fa, #3498db);
  color: #fff;
}

/* Float text */
.floatText {
  position: fixed;
  font-weight: bold;
  color: #ffe066;
  pointer-events: none;
  user-select: none;
  animation: floatUp 1s cubic-bezier(.4,1.6,.6,1) forwards;
  font-size: 1.4em;
  text-shadow: 1px 1px 8px #000, 0 0 8px #ffe066;
  z-index: 1000;
  left: 50%;
  transform: translateX(-50%);
}
@keyframes floatUp {
  0% { opacity: 1; transform: translate(-50%, 0) scale(1.2);}
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -60px) scale(0.8);}
}

/* Zadania */
#taskList {
  margin-top: 10px;
  text-align: left;
  font-size: 1.1em;
}
#taskList div {
  margin-bottom: 6px;
}

/* --- Motywy kosmetyczne --- */

/* Matrix */
body.matrix, body.matrix-bg {
  color: #0f0;
  font-family: 'Courier New', Courier, monospace;
}
body.matrix-bg .container, body.matrix .container {
  background: rgba(0, 16, 0, 0.95);
  box-shadow: 0 0 20px #00ff00;
}
body.matrix-bg .generator, body.matrix .generator {
  background: rgba(0, 32, 0, 0.95);
}
body.matrix-bg .side-panel, body.matrix .side-panel {
  background: rgba(0, 32, 0, 0.98);
}
body.matrix-bg .click-button, body.matrix .click-button {
  background: linear-gradient(90deg, #0f0, #222);
  color: #000;
}
body.matrix-bg .shop-button, body.matrix-bg .prestige-button, body.matrix-bg .save-button, body.matrix-bg .upgrade,
body.matrix .shop-button, body.matrix .prestige-button, body.matrix .save-button, body.matrix .upgrade {
  background: linear-gradient(90deg, #0f0, #333);
  color: #000;
}
body.matrix-bg .shop-button:hover, body.matrix-bg .prestige-button:hover, body.matrix-bg .save-button:hover, body.matrix-bg .upgrade:hover,
body.matrix .shop-button:hover, body.matrix .prestige-button:hover, body.matrix .save-button:hover, body.matrix .upgrade:hover {
  background: linear-gradient(90deg, #333, #0f0);
  color: #0f0;
}

/* Candy */
body.candy, body.candy-bg {
  color: #5a2a27;
  font-family: 'Comic Sans MS', cursive, sans-serif;
}
body.candy-bg .container, body.candy .container {
  background: rgba(255, 240, 245, 0.95);
  box-shadow: 0 0 15px #ff6f91;
}
body.candy-bg .generator, body.candy .generator {
  background: rgba(255, 200, 220, 0.95);
}
body.candy-bg .side-panel, body.candy .side-panel {
  background: rgba(255, 200, 220, 0.98);
}
body.candy-bg .click-button, body.candy .click-button {
  background: linear-gradient(90deg, #ff9a9e, #fad0c4);
  color: #5a2a27;
}
body.candy-bg .shop-button, body.candy-bg .prestige-button, body.candy-bg .save-button, body.candy-bg .upgrade,
body.candy .shop-button, body.candy .prestige-button, body.candy .save-button, body.candy .upgrade {
  background: linear-gradient(90deg, #ff6f91, #ffb347);
  color: #fff;
}
body.candy-bg .shop-button:hover, body.candy-bg .prestige-button:hover, body.candy-bg .save-button:hover, body.candy-bg .upgrade:hover,
body.candy .shop-button:hover, body.candy .prestige-button:hover, body.candy .save-button:hover, body.candy .upgrade:hover {
  background: linear-gradient(90deg, #ffb347, #ff6f91);
  color: #fff;
}

/* Neo */
body.neo, body.neo-bg {
  color: #c0c0ff;
  font-family: 'Segoe UI', Arial, sans-serif;
}
body.neo-bg .container, body.neo .container {
  background: rgba(18, 18, 26, 0.96);
  box-shadow: 0 0 10px #6666ff;
}
body.neo-bg .generator, body.neo .generator {
  background: rgba(34, 34, 51, 0.95);
}
body.neo-bg .side-panel, body.neo .side-panel {
  background: rgba(34, 34, 51, 0.98);
}
body.neo-bg .click-button, body.neo .click-button {
  background: linear-gradient(90deg, #6dd5fa, #2980b9);
  color: #fff;
}
body.neo-bg .shop-button, body.neo-bg .prestige-button, body.neo-bg .save-button, body.neo-bg .upgrade,
body.neo .shop-button, body.neo .prestige-button, body.neo .save-button, body.neo .upgrade {
  background: linear-gradient(90deg, #2980b9, #6dd5fa);
  color: #fff;
}
body.neo-bg .shop-button:hover, body.neo-bg .prestige-button:hover, body.neo-bg .save-button:hover, body.neo-bg .upgrade:hover,
body.neo .shop-button:hover, body.neo .prestige-button:hover, body.neo .save-button:hover, body.neo .upgrade:hover {
  background: linear-gradient(90deg, #6dd5fa, #2980b9);
  color: #fff;
}

/* ...istniejący kod... */

/* Styl Arriego */
body.arriego-bg {
  background: #e15fed url('https://bing.com/th/id/BCO.f4ae0f2d-c495-4560-8ca1-ef68d40f13ca.png') no-repeat center center fixed;
  background-size: cover;
}
body.arriego-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: inherit;
  filter: blur(6px) brightness(0.7);
}
body.arriego-bg .container,
body.arriego-bg .side-panel,
body.arriego-bg .tasks-panel {
  background: rgba(225, 95, 237, 0.93) !important;
  color: #fff !important;
  border-radius: 18px;
  box-shadow: 0 4px 24px #b13ad6;
}
body.arriego-bg h1,
body.arriego-bg h2 {
  color: #fff !important;
  text-shadow: 0 2px 8px #b13ad6;
}
body.arriego-bg .buy-btn {
  background: linear-gradient(90deg, #e15fed, #b13ad6);
  color: #fff;
}
body.arriego-bg .buy-btn:active {
  background: linear-gradient(90deg, #b13ad6, #e15fed);
}
body.arriego-bg .shop-button,
body.arriego-bg .prestige-button,
body.arriego-bg .save-button {
  background: #b13ad6 !important;
  color: #fff !important;
  border: none;
}
body.arriego-bg .shop-button:active,
body.arriego-bg .prestige-button:active,
body.arriego-bg .save-button:active {
  background: #e15fed !important;
}
body.arriego-bg .click-button {
  background: linear-gradient(90deg, #e15fed, #b13ad6);
  color: #fff;
}
body.arriego-bg .click-button:hover {
  background: linear-gradient(90deg, #b13ad6, #e15fed);
  color: #fff;
}

/* Styl panelu ustawień */
#settingsPanel {
  background: rgba(30,30,30,0.98);
  color: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 24px #000a;
  padding: 24px 18px 18px 18px;
  max-width: 400px;
  min-width: 260px;
}
#settingsPanel h2 {
  margin-top: 0;
  margin-bottom: 18px;
  font-size: 1.25em;
  letter-spacing: 1px;
  text-align: center;
}
#settingsPanel .sound-setting {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1em;
}
#settingsPanel label {
  flex: 1;
  font-weight: 500;
}

/* Styl suwaków (input[type=range]) */
#settingsPanel input[type="range"] {
  -webkit-appearance: none;
  width: 110px;
  height: 6px;
  border-radius: 6px;
  background: #444;
  outline: none;
  transition: background 0.3s;
  margin-right: 8px;
}
#settingsPanel input[type="range"]:hover {
  background: #666;
}
#settingsPanel input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #6dd5fa;
  border: 2px solid #2980b9;
  cursor: pointer;
  transition: background 0.3s, border 0.3s;
}
#settingsPanel input[type="range"]:hover::-webkit-slider-thumb {
  background: #2980b9;
  border: 2px solid #6dd5fa;
}
#settingsPanel input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #6dd5fa;
  border: 2px solid #2980b9;
  cursor: pointer;
  transition: background 0.3s, border 0.3s;
}
#settingsPanel input[type="range"]:hover::-moz-range-thumb {
  background: #2980b9;
  border: 2px solid #6dd5fa;
}
#settingsPanel input[type="range"]::-ms-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #6dd5fa;
  border: 2px solid #2980b9;
  cursor: pointer;
  transition: background 0.3s, border 0.3s;
}
#settingsPanel input[type="range"]:hover::-ms-thumb {
  background: #2980b9;
  border: 2px solid #6dd5fa;
}
#settingsPanel input[type="range"]:focus {
  outline: none;
  box-shadow: 0 0 0 2px #6dd5fa55;
}
#settingsPanel input[type="range"]::-ms-fill-lower {
  background: #444;
  border-radius: 6px;
}
#settingsPanel input[type="range"]::-ms-fill-upper {
  background: #444;
  border-radius: 6px;
}
#settingsPanel input[type="range"]:focus::-ms-fill-lower {
  background: #666;
}
#settingsPanel input[type="range"]:focus::-ms-fill-upper {
  background: #666;
}
#settingsPanel input[type="checkbox"] {
  transform: scale(1.2);
  accent-color: #6dd5fa;
  margin-left: 4px;
}

/* Matrix motyw */
body.matrix-bg #settingsPanel {
  background: rgba(0, 16, 0, 0.98);
  color: #0f0;
  box-shadow: 0 0 20px #00ff00;
}
body.matrix-bg #settingsPanel input[type="range"] {
  background: #0a2a0a;
}
body.matrix-bg #settingsPanel input[type="range"]::-webkit-slider-thumb,
body.matrix-bg #settingsPanel input[type="range"]::-moz-range-thumb,
body.matrix-bg #settingsPanel input[type="range"]::-ms-thumb {
  background: #0f0;
  border: 2px solid #185a9d;
}
body.matrix-bg #settingsPanel input[type="range"]:hover::-webkit-slider-thumb,
body.matrix-bg #settingsPanel input[type="range"]:hover::-moz-range-thumb,
body.matrix-bg #settingsPanel input[type="range"]:hover::-ms-thumb {
  background: #185a9d;
  border: 2px solid #0f0;
}
body.matrix-bg #settingsPanel input[type="checkbox"] {
  accent-color: #0f0;
}

/* Candy motyw */
body.candy-bg #settingsPanel {
  background: rgba(255, 200, 220, 0.98);
  color: #5a2a27;
  box-shadow: 0 0 15px #ff6f91;
}
body.candy-bg #settingsPanel input[type="range"] {
  background: #ffb6c1;
}
body.candy-bg #settingsPanel input[type="range"]::-webkit-slider-thumb,
body.candy-bg #settingsPanel input[type="range"]::-moz-range-thumb,
body.candy-bg #settingsPanel input[type="range"]::-ms-thumb {
  background: #ff6f91;
  border: 2px solid #ffb347;
}
body.candy-bg #settingsPanel input[type="range"]:hover::-webkit-slider-thumb,
body.candy-bg #settingsPanel input[type="range"]:hover::-moz-range-thumb,
body.candy-bg #settingsPanel input[type="range"]:hover::-ms-thumb {
  background: #ffb347;
  border: 2px solid #ff6f91;
}
body.candy-bg #settingsPanel input[type="checkbox"] {
  accent-color: #ff6f91;
}

/* Neo motyw */
body.neo-bg #settingsPanel {
  background: rgba(34, 34, 51, 0.98);
  color: #c0c0ff;
  box-shadow: 0 0 10px #6666ff;
}
body.neo-bg #settingsPanel input[type="range"] {
  background: #333366;
}
body.neo-bg #settingsPanel input[type="range"]::-webkit-slider-thumb,
body.neo-bg #settingsPanel input[type="range"]::-moz-range-thumb,
body.neo-bg #settingsPanel input[type="range"]::-ms-thumb {
  background: #6dd5fa;
  border: 2px solid #ffff1c;
}
body.neo-bg #settingsPanel input[type="range"]:hover::-webkit-slider-thumb,
body.neo-bg #settingsPanel input[type="range"]:hover::-moz-range-thumb,
body.neo-bg #settingsPanel input[type="range"]:hover::-ms-thumb {
  background: #ffff1c;
  border: 2px solid #6dd5fa;
}
body.neo-bg #settingsPanel input[type="checkbox"] {
  accent-color: #6dd5fa;
}

/* Arriego motyw */
body.arriego-bg #settingsPanel {
  background: rgba(225, 95, 237, 0.93) !important;
  color: #fff !important;
  box-shadow: 0 4px 24px #b13ad6;
}
body.arriego-bg #settingsPanel input[type="range"] {
  background: #b13ad6;
}
body.arriego-bg #settingsPanel input[type="range"]::-webkit-slider-thumb,
body.arriego-bg #settingsPanel input[type="range"]::-moz-range-thumb,
body.arriego-bg #settingsPanel input[type="range"]::-ms-thumb {
  background: #fff;
  border: 2px solid #e15fed;
}
body.arriego-bg #settingsPanel input[type="range"]:hover::-webkit-slider-thumb,
body.arriego-bg #settingsPanel input[type="range"]:hover::-moz-range-thumb,
body.arriego-bg #settingsPanel input[type="range"]:hover::-ms-thumb {
  background: #e15fed;
  border: 2px solid #fff;
}
body.arriego-bg #settingsPanel input[type="checkbox"] {
  accent-color: #e15fed;
}




/* ...Twój kod z poprzedniego pliku, nie zmieniaj sekcji motywów... */

/* Motyw Szlachta */
body.szlachta-bg {
  background: #fffbe6 url('https://bing.com/th/id/BCO.b664ffa1-61a7-468e-a52a-9f46c20a0292.png') no-repeat center center fixed;
  background-size: cover;
}
body.szlachta-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: inherit;
  filter: blur(6px) brightness(0.8);
}
body.szlachta-bg .container,
body.szlachta-bg .side-panel,
body.szlachta-bg .tasks-panel {
  background: rgba(255, 245, 200, 0.93) !important;
  color: #7c5e2a !important;
  border-radius: 18px;
  box-shadow: 0 4px 24px #e6c77c;
}
body.szlachta-bg h1,
body.szlachta-bg h2 {
  color: #7c5e2a !important;
  text-shadow: 0 2px 8px #e6c77c;
}
body.szlachta-bg .buy-btn {
  background: linear-gradient(90deg, #ffe082, #bfa046);
  color: #7c5e2a;
}
body.szlachta-bg .buy-btn:active {
  background: linear-gradient(90deg, #bfa046, #ffe082);
}
body.szlachta-bg .shop-button,
body.szlachta-bg .prestige-button,
body.szlachta-bg .save-button {
  background: #bfa046 !important;
  color: #fff !important;
  border: none;
}
body.szlachta-bg .shop-button:active,
body.szlachta-bg .prestige-button:active,
body.szlachta-bg .save-button:active {
  background: #ffe082 !important;
}
body.szlachta-bg .click-button {
  background: linear-gradient(90deg, #ffe082, #bfa046);
  color: #7c5e2a;
}
body.szlachta-bg .click-button:hover {
  background: linear-gradient(90deg, #bfa046, #ffe082);
  color: #7c5e2a;
}

.shop-item.locked {
  position: relative;
  filter: grayscale(0.5) brightness(0.85); /* MNIEJSZE rozmycie, lepsza czytelność */
  pointer-events: none;
  user-select: none;
  opacity: 0.85;
}

.locked-overlay {
  position: absolute;
  inset: 0;
  background: rgba(30,30,30,0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffe066;
  font-size: 1.15em;
  border-radius: 8px;
  z-index: 2;
  text-shadow: 0 2px 8px #000, 0 0 4px #bfa52f;
  border: 2px solid #ffe066;
  box-sizing: border-box;
  padding: 8px;
}

.lock-emoji {
  font-size: 2em;
  margin-bottom: 0.2em;
  filter: drop-shadow(0 0 6px #bfa52f);
}

.locked-text {
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  padding: 0 10px;
  line-height: 1.3;
}

/* Poprawka dla generatorów */
.locked-gen {
  filter: grayscale(0.5) brightness(0.85);
  opacity: 0.85;
  pointer-events: none;
  position: relative;
  box-shadow: 0 0 16px #000b, 0 0 0 4px #bfa52f99;
  border: 2px dashed #bfa52f;
  transition: filter 0.3s, opacity 0.3s;
}
.locked-gen .locked-overlay {
  /* dziedziczy z powyższego */
}

.tasks-panel {
  display: none;
  position: fixed;
  top: 60px;
  right: 5vw;
  width: 340px;
  min-height: 200px;
  background: rgba(30,30,30,0.98);
  color: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 24px #000a;
  padding: 24px 18px 18px 18px;
  z-index: 100;
  max-height: 80vh;
  overflow-y: auto;
}

.tasks-panel h2 {
  margin-top: 0;
  margin-bottom: 18px;
  font-size: 1.25em;
  letter-spacing: 1px;
  text-align: center;
}

#taskList {
  margin-top: 10px;
  text-align: left;
  font-size: 1.1em;
  padding: 0;
}

#taskList .task {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(40,40,40,0.85);
  border-radius: 7px;
  margin-bottom: 8px;
  padding: 8px 12px;
  font-size: 1em;
  box-shadow: 0 1px 4px #0002;
}

#taskList .done {
  color: #6f6;
  font-weight: bold;
  font-size: 1.2em;
}

#taskList .notdone {
  color: #f66;
  font-weight: bold;
  font-size: 1.2em;
}

/* Dodaj na końcu pliku */

#helpBtn {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 2000;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #ffe066 60%, #444 100%);
  color: #222;
  font-size: 1.6em;
  font-weight: bold;
  box-shadow: 0 2px 8px #0006;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
#helpBtn:hover {
  background: linear-gradient(135deg, #fffbe6 60%, #ffe066 100%);
  color: #bfa52f;
}

.help-panel {
  display: none;
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 320px;
  max-width: 96vw;
  background: rgba(30,30,30,0.98);
  color: #ffe066;
  border-radius: 18px;
  box-shadow: 0 4px 24px #000a;
  padding: 24px 18px 18px 18px;
  z-index: 3000;
  max-height: 80vh;
  overflow-y: auto;
  font-size: 1.1em;
}
.help-panel h2 {
  margin-top: 0;
  color: #ffe066;
  text-align: center;
}
.help-panel .help-content ul {
  margin: 0 0 10px 18px;
  padding: 0;
}
.help-panel .close-x {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: none;
  color: #ffe066;
  font-size: 1.3em;
  cursor: pointer;
}

/* Motywy dla helpBtn i help-panel */
body.matrix-bg #helpBtn, body.matrix-bg .help-panel {
  background: linear-gradient(135deg, #0f0 60%, #222 100%) !important;
  color: rgb(4, 80, 4) !important;
}
body.matrix-bg #helpBtn:hover { background: linear-gradient(135deg, #222 60%, #0f0 100%) !important; color: #0f0 !important; }
body.matrix-bg .help-panel { color: #0f0 !important; border: 2px solid #0f0; }

body.candy-bg #helpBtn, body.candy-bg .help-panel {
  background: linear-gradient(135deg, #ffb6e6 60%, #fff 100%) !important;
  color: #e6007a !important;
}
body.candy-bg #helpBtn:hover { background: linear-gradient(135deg, #fff 60%, #ffb6e6 100%) !important; color: #e6007a !important; }
body.candy-bg .help-panel { color: #e6007a !important; border: 2px solid #e6007a; }

body.neo-bg #helpBtn, body.neo-bg .help-panel {
  background: linear-gradient(135deg, #0ff 60%, #222 100%) !important;
  color: #0ff !important;
}
body.neo-bg #helpBtn:hover { background: linear-gradient(135deg, #222 60%, #0ff 100%) !important; color: #0ff !important; }
body.neo-bg .help-panel { color: #0ff !important; border: 2px solid #0ff; }

body.arriego-bg #helpBtn, body.arriego-bg .help-panel {
  background: linear-gradient(135deg, #f9d423 60%, #ff4e50 100%) !important;
  color: #ff4e50 !important;
}
body.arriego-bg #helpBtn:hover { background: linear-gradient(135deg, #ff4e50 60%, #f9d423 100%) !important; color: #f9d423 !important; }
body.arriego-bg .help-panel { color: #ff4e50 !important; border: 2px solid #f9d423; }

body.szlachta-bg #helpBtn, body.szlachta-bg .help-panel {
  background: linear-gradient(135deg, #fffbe6 60%, #ffd700 100%) !important;
  color: #bfa52f !important;
}
body.szlachta-bg #helpBtn:hover { background: linear-gradient(135deg, #ffd700 60%, #fffbe6 100%) !important; color: #bfa52f !important; }
body.szlachta-bg .help-panel { color: #bfa52f !important; border: 2px solid #bfa52f; }

/* ...istniejący kod... */

/* Przycisk Discorda obok Pomocy */
#discordBtn {
  position: fixed;
  top: 16px;
  left: 66px; /* tuż obok #helpBtn */
  z-index: 2000;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #5865F2 60%, #404eed 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 4px 16px #5865f277, 0 2px 8px #0006;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
  outline: none;
}
#discordBtn img, #discordBtn svg {
  width: 28px;
  height: 28px;
  display: block;
  filter: drop-shadow(0 0 2px #2228);
  transition: filter 0.2s;
}
#discordBtn:hover, #discordBtn:focus {
  background: linear-gradient(135deg, #404eed 60%, #5865F2 100%);
  box-shadow: 0 6px 24px #5865f2bb, 0 2px 8px #0008;
  transform: scale(1.08);
}
#discordBtn:hover img, #discordBtn:focus img,
#discordBtn:hover svg, #discordBtn:focus svg {
  filter: drop-shadow(0 0 6px #5865f2cc);
}

/* Panel Discorda - wyśrodkowany, nad całą grą */
#discordPanel, .discord-panel {
  display: none;
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 320px;
  max-width: 96vw;
  background: rgba(30,30,30,0.98);
  color: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 24px #000a;
  padding: 24px 18px 18px 18px;
  z-index: 4000; /* wyżej niż .container i help-panel */
  max-height: 80vh;
  overflow-y: auto;
  font-size: 1.1em;
  text-align: center;
}
.discord-panel.active, #discordPanel.active {
  display: block !important;
}

.discord-join-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 0;
  margin: 18px 0 0 0;
  font-size: 1.18em;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(135deg, #5865F2 60%, #404eed 100%);
  border: none;
  border-radius: 12px;
  box-shadow: 0 2px 12px #5865f299, 0 1px 4px #0004;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}
.discord-join-btn img {
  width: 28px;
  height: 28px;
  display: block;
  filter: drop-shadow(0 0 2px #2228);
  transition: filter 0.2s;
}
.discord-join-btn:hover, .discord-join-btn:focus {
  background: linear-gradient(135deg, #404eed 60%, #5865F2 100%);
  box-shadow: 0 6px 24px #5865f2bb, 0 2px 8px #0008;
  transform: scale(1.04);
  color: #fff;
  text-decoration: none;
}
.discord-join-btn:hover img, .discord-join-btn:focus img {
  filter: drop-shadow(0 0 8px #5865f2cc);
}

/* Responsywność dla Discorda */
@media (max-width: 600px) {
  #discordBtn {
    left: 60px;
    width: 38px;
    height: 38px;
  }
  #discordBtn img, #discordBtn svg {
    width: 22px;
    height: 22px;
  }
  #discordPanel, .discord-panel {
    min-width: 90vw;
    padding: 12px 4vw 12px 4vw;
    font-size: 1em;
  }
}

/* ...istniejący kod... */