/* Settings Screen - Cyberpunk Theme */
#settings {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50;
}

/* Animated background with cyberpunk grid */
.settings-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a0030 0%, #0a0015 100%);
    overflow: hidden;
}

/* Grid lines overlay */
.settings-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 39px,
            rgba(0, 255, 255, 0.15) 39px,
            rgba(0, 255, 255, 0.15) 40px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 39px,
            rgba(0, 255, 255, 0.15) 39px,
            rgba(0, 255, 255, 0.15) 40px
        );
    background-size: 100% 100%;
    pointer-events: none;
    animation: gridScroll 8s linear infinite;
}

@keyframes gridScroll {
    0% { background-position: 0 0; }
    100% { background-position: 40px 40px; }
}

/* Scanlines effect */
.settings-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 255, 255, 0.02) 0px,
        rgba(0, 255, 255, 0.02) 2px,
        transparent 2px,
        transparent 4px
    );
    pointer-events: none;
}

/* Particles canvas */
#settings-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Settings content container */
.settings-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: calc(80px * var(--ui-scale));
    gap: calc(30px * var(--ui-scale));
}

/* Title with neon glow and glitch effect */
.settings-title {
    position: relative;
    margin: 0;
    margin-bottom: calc(20px * var(--ui-scale));
}

.settings-title .title-main {
    display: block;
    font-family: monospace;
    font-size: calc(48px * var(--ui-scale));
    font-weight: bold;
    color: #00ffff;
    text-shadow: 
        0 0 10px #00ffff,
        0 0 20px #00ffff,
        0 0 30px #00ffff;
    animation: neonPulse 2s ease-in-out infinite;
}

.settings-title .title-glitch {
    position: absolute;
    top: -2px;
    left: 3px;
    font-family: monospace;
    font-size: calc(48px * var(--ui-scale));
    font-weight: bold;
    color: #ff0099;
    opacity: 0.3;
    pointer-events: none;
}

@keyframes neonPulse {
    0%, 100% { 
        text-shadow: 
            0 0 10px #00ffff,
            0 0 20px #00ffff,
            0 0 30px #00ffff;
    }
    50% { 
        text-shadow: 
            0 0 20px #00ffff,
            0 0 30px #00ffff,
            0 0 40px #00ffff,
            0 0 50px #00ffff;
    }
}

/* Tabs Navigation */
.settings-tabs {
    display: flex;
    gap: calc(10px * var(--ui-scale));
    margin-bottom: calc(10px * var(--ui-scale));
}

.tab-btn {
    padding: calc(12px * var(--ui-scale)) calc(25px * var(--ui-scale));
    font-family: monospace;
    font-size: calc(16px * var(--ui-scale));
    font-weight: bold;
    color: rgba(0, 255, 255, 0.5);
    background: rgba(10, 0, 32, 0.6);
    border: calc(2px * var(--ui-scale)) solid rgba(0, 255, 255, 0.3);
    border-radius: calc(6px * var(--ui-scale));
    cursor: pointer;
    transition: all 0.3s ease;
}

.tab-btn:hover {
    color: #00ffff;
    border-color: #00ffff;
    background: rgba(0, 255, 255, 0.1);
    transform: translateY(calc(-2px * var(--ui-scale)));
}

.tab-btn.active {
    color: #00ffff;
    border-color: #00ffff;
    background: rgba(0, 255, 255, 0.2);
    text-shadow: 0 0 calc(10px * var(--ui-scale)) #00ffff;
    box-shadow: 0 0 calc(15px * var(--ui-scale)) rgba(0, 255, 255, 0.5);
}

/* Settings Panels Container */
/* Settings Panels Container */
/* NOTE: Using 'max-height' with 'flex-shrink: 0' due to nested flex structure:
   - settings-content (flex parent with height: 100%)
   - settings-tabs (takes space)
   - settings-panels (this element)
     - settings-panel (flex child that can expand)
   
   Problem: With 'max-height' alone, the nested flex child (settings-panel) ignores 
   parent's max-height constraint and expands beyond screen.
   
   Solution: Add 'flex-shrink: 0' to prevent flexbox from ignoring max-height.
   
   Alternative: Use fixed 'height: calc(300px * var(--ui-scale))' instead of max-height
   if flex-shrink doesn't work in your case.
*/
.settings-panels {
    width: calc(600px * var(--ui-scale));
    height: calc(300px * var(--ui-scale));
    overflow-y: auto;
    flex-shrink: 0; /* CRITICAL: Prevents flexbox from ignoring max-height */
    background: rgba(10, 0, 32, 0.8);
    border: calc(3px * var(--ui-scale)) solid #00ffff;
    border-radius: calc(12px * var(--ui-scale));
    padding: calc(30px * var(--ui-scale));
    box-shadow: 
        0 0 calc(20px * var(--ui-scale)) rgba(0, 255, 255, 0.3),
        inset 0 0 calc(30px * var(--ui-scale)) rgba(0, 255, 255, 0.05);
}

.settings-panel {
    display: none;
    flex-direction: column;
    gap: calc(25px * var(--ui-scale));
}

.settings-panel.active {
    display: flex;
}

/* Setting Row */
.setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(15px * var(--ui-scale));
    background: rgba(0, 255, 255, 0.05);
    border: calc(1px * var(--ui-scale)) solid rgba(0, 255, 255, 0.2);
    border-radius: calc(6px * var(--ui-scale));
    transition: all 0.3s ease;
}

.setting-row:hover {
    background: rgba(0, 255, 255, 0.1);
    border-color: rgba(0, 255, 255, 0.4);
}

.setting-label {
    font-family: monospace;
    font-size: calc(16px * var(--ui-scale));
    color: #00ffff;
    font-weight: bold;
    text-shadow: 0 0 calc(5px * var(--ui-scale)) #00ffff;
}

/* Slider Container */
.slider-container {
    display: flex;
    align-items: center;
    gap: calc(15px * var(--ui-scale));
}

.setting-slider {
    width: calc(200px * var(--ui-scale));
    height: calc(6px * var(--ui-scale));
    -webkit-appearance: none;
    appearance: none;
    background: rgba(0, 255, 255, 0.2);
    outline: none;
    border-radius: calc(3px * var(--ui-scale));
    border: calc(1px * var(--ui-scale)) solid rgba(0, 255, 255, 0.3);
}

.setting-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: calc(20px * var(--ui-scale));
    height: calc(20px * var(--ui-scale));
    background: #00ffff;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0 0 calc(10px * var(--ui-scale)) rgba(0, 255, 255, 0.8);
    transition: all 0.2s ease;
}

.setting-slider::-webkit-slider-thumb:hover {
    background: #ff00ff;
    box-shadow: 0 0 calc(15px * var(--ui-scale)) rgba(255, 0, 255, 0.8);
    transform: scale(1.2);
}

.setting-slider::-moz-range-thumb {
    width: calc(20px * var(--ui-scale));
    height: calc(20px * var(--ui-scale));
    background: #00ffff;
    cursor: pointer;
    border-radius: 50%;
    border: none;
    box-shadow: 0 0 calc(10px * var(--ui-scale)) rgba(0, 255, 255, 0.8);
    transition: all 0.2s ease;
}

.setting-slider::-moz-range-thumb:hover {
    background: #ff00ff;
    box-shadow: 0 0 calc(15px * var(--ui-scale)) rgba(255, 0, 255, 0.8);
    transform: scale(1.2);
}

.slider-value {
    font-family: monospace;
    font-size: calc(16px * var(--ui-scale));
    color: #ffffff;
    min-width: calc(50px * var(--ui-scale));
    text-align: right;
}

/* Custom Checkbox */
.setting-checkbox {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.setting-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkbox-custom {
    width: calc(50px * var(--ui-scale));
    height: calc(28px * var(--ui-scale));
    background: rgba(0, 255, 255, 0.2);
    border: calc(2px * var(--ui-scale)) solid rgba(0, 255, 255, 0.4);
    border-radius: calc(14px * var(--ui-scale));
    position: relative;
    transition: all 0.3s ease;
}

.checkbox-custom::after {
    content: '';
    position: absolute;
    top: calc(2px * var(--ui-scale));
    left: calc(2px * var(--ui-scale));
    width: calc(20px * var(--ui-scale));
    height: calc(20px * var(--ui-scale));
    background: #666666;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 0 calc(5px * var(--ui-scale)) rgba(0, 0, 0, 0.5);
}

.setting-checkbox input[type="checkbox"]:checked + .checkbox-custom {
    background: rgba(0, 255, 255, 0.3);
    border-color: #00ffff;
    box-shadow: 0 0 calc(10px * var(--ui-scale)) rgba(0, 255, 255, 0.5);
}

.setting-checkbox input[type="checkbox"]:checked + .checkbox-custom::after {
    left: calc(24px * var(--ui-scale));
    background: #00ffff;
    box-shadow: 0 0 calc(10px * var(--ui-scale)) rgba(0, 255, 255, 0.8);
}

.setting-checkbox:hover .checkbox-custom {
    border-color: #ff00ff;
}

/* Language Grid */
.language-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(15px * var(--ui-scale));
}

.language-btn {
    padding: calc(15px * var(--ui-scale)) calc(20px * var(--ui-scale));
    font-family: monospace;
    font-size: calc(16px * var(--ui-scale));
    font-weight: bold;
    color: rgba(0, 255, 255, 0.6);
    background: rgba(10, 0, 32, 0.6);
    border: calc(2px * var(--ui-scale)) solid rgba(0, 255, 255, 0.3);
    border-radius: calc(6px * var(--ui-scale));
    cursor: pointer;
    transition: all 0.3s ease;
}

.language-btn:hover {
    color: #00ffff;
    border-color: #00ffff;
    background: rgba(0, 255, 255, 0.15);
    transform: scale(1.05);
}

.language-btn.active {
    color: #00ffff;
    border-color: #00ffff;
    background: rgba(0, 255, 255, 0.25);
    text-shadow: 0 0 calc(10px * var(--ui-scale)) #00ffff;
    box-shadow: 0 0 calc(15px * var(--ui-scale)) rgba(0, 255, 255, 0.5);
}

/* Graphics Quality Grid */
.graphics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(10px * var(--ui-scale));
}

.graphics-btn {
    padding: calc(12px * var(--ui-scale)) calc(15px * var(--ui-scale));
    font-family: monospace;
    font-size: calc(14px * var(--ui-scale));
    font-weight: bold;
    color: rgba(0, 255, 255, 0.6);
    background: rgba(10, 0, 32, 0.6);
    border: calc(2px * var(--ui-scale)) solid rgba(0, 255, 255, 0.3);
    border-radius: calc(6px * var(--ui-scale));
    cursor: pointer;
    transition: all 0.3s ease;
}

.graphics-btn:hover {
    color: #00ffff;
    border-color: #00ffff;
    background: rgba(0, 255, 255, 0.15);
    transform: scale(1.05);
}

.graphics-btn.active {
    color: #00ffff;
    border-color: #00ffff;
    background: rgba(0, 255, 255, 0.25);
    text-shadow: 0 0 calc(10px * var(--ui-scale)) #00ffff;
    box-shadow: 0 0 calc(15px * var(--ui-scale)) rgba(0, 255, 255, 0.5);
}

.graphics-btn[data-quality="LOW"] {
    color: rgba(255, 100, 100, 0.8);
    border-color: rgba(255, 100, 100, 0.4);
}

.graphics-btn[data-quality="LOW"]:hover {
    color: #ff6666;
    border-color: #ff6666;
    background: rgba(255, 100, 100, 0.15);
}

.graphics-btn[data-quality="LOW"].active {
    color: #ff6666;
    border-color: #ff6666;
    background: rgba(255, 100, 100, 0.25);
    text-shadow: 0 0 calc(10px * var(--ui-scale)) #ff6666;
    box-shadow: 0 0 calc(15px * var(--ui-scale)) rgba(255, 100, 100, 0.5);
}

.graphics-btn[data-quality="HIGH"] {
    color: rgba(100, 255, 100, 0.8);
    border-color: rgba(100, 255, 100, 0.4);
}

.graphics-btn[data-quality="HIGH"]:hover {
    color: #66ff66;
    border-color: #66ff66;
    background: rgba(100, 255, 100, 0.15);
}

.graphics-btn[data-quality="HIGH"].active {
    color: #66ff66;
    border-color: #66ff66;
    background: rgba(100, 255, 100, 0.25);
    text-shadow: 0 0 calc(10px * var(--ui-scale)) #66ff66;
    box-shadow: 0 0 calc(15px * var(--ui-scale)) rgba(100, 255, 100, 0.5);
}

/* Back Button */
.settings-back-btn {
    margin-top: calc(20px * var(--ui-scale));
    width: calc(200px * var(--ui-scale));
    height: calc(50px * var(--ui-scale));
    font-family: monospace;
    font-size: calc(18px * var(--ui-scale));
    font-weight: bold;
    color: #ff00ff;
    background: rgba(10, 0, 32, 0.8);
    border: calc(3px * var(--ui-scale)) solid #ff00ff;
    border-radius: calc(8px * var(--ui-scale));
    cursor: pointer;
    transition: all 0.3s ease;
    text-shadow: 0 0 calc(5px * var(--ui-scale)) #ff00ff;
    box-shadow: 
        0 0 calc(10px * var(--ui-scale)) rgba(255, 0, 255, 0.3),
        inset 0 0 calc(20px * var(--ui-scale)) rgba(255, 0, 255, 0.1);
}

.settings-back-btn:hover {
    background: rgba(255, 0, 255, 0.2);
    transform: scale(1.05);
    box-shadow: 
        0 0 calc(20px * var(--ui-scale)) rgba(255, 0, 255, 0.5),
        inset 0 0 calc(30px * var(--ui-scale)) rgba(255, 0, 255, 0.2);
}

.settings-back-btn:active {
    transform: scale(0.98);
}

/* === DIFFICULTY (analogicznie do GRAPHICS) === */
.difficulty-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: calc(10px * var(--ui-scale));
}

.difficulty-btn {
    padding: calc(12px * var(--ui-scale)) calc(15px * var(--ui-scale));
    font-family: monospace;
    font-size: calc(14px * var(--ui-scale));
    font-weight: bold;
    color: rgba(0, 255, 255, 0.6);
    background: rgba(10, 0, 32, 0.6);
    border: calc(2px * var(--ui-scale)) solid rgba(0, 255, 255, 0.3);
    border-radius: calc(6px * var(--ui-scale));
    cursor: pointer;
    transition: all 0.2s ease;
    text-shadow: 0 0 calc(5px * var(--ui-scale)) rgba(0, 255, 255, 0.3);
    box-shadow: 0 0 calc(10px * var(--ui-scale)) rgba(0, 255, 255, 0.2);
}

.difficulty-btn:hover {
    color: #00ffff;
    border-color: #00ffff;
    background: rgba(0, 255, 255, 0.1);
    box-shadow: 0 0 calc(15px * var(--ui-scale)) rgba(0, 255, 255, 0.4);
}

.difficulty-btn.active {
    color: #00ffff;
    border-color: #00ffff;
    background: rgba(0, 255, 255, 0.2);
    text-shadow: 0 0 calc(10px * var(--ui-scale)) #00ffff;
    box-shadow: 0 0 calc(15px * var(--ui-scale)) rgba(0, 255, 255, 0.5);
}

/* — kolory per tryb (jak LOW/HIGH w grafice) — */
.difficulty-btn[data-difficulty="RELAX"] {
    color: rgba(102, 204, 255, 0.85);
    border-color: rgba(102, 204, 255, 0.45);
}
.difficulty-btn[data-difficulty="RELAX"]:hover {
    color: #66ccff;
    border-color: #66ccff;
    background: rgba(102, 204, 255, 0.15);
}
.difficulty-btn[data-difficulty="RELAX"].active {
    color: #66ccff;
    border-color: #66ccff;
    background: rgba(102, 204, 255, 0.25);
    text-shadow: 0 0 calc(10px * var(--ui-scale)) #66ccff;
    box-shadow: 0 0 calc(15px * var(--ui-scale)) rgba(102, 204, 255, 0.5);
}

.difficulty-btn[data-difficulty="EASY"] {
    color: rgba(102, 255, 204, 0.85);
    border-color: rgba(102, 255, 204, 0.45);
}
.difficulty-btn[data-difficulty="EASY"]:hover {
    color: #66ffcc;
    border-color: #66ffcc;
    background: rgba(102, 255, 204, 0.15);
}
.difficulty-btn[data-difficulty="EASY"].active {
    color: #66ffcc;
    border-color: #66ffcc;
    background: rgba(102, 255, 204, 0.25);
    text-shadow: 0 0 calc(10px * var(--ui-scale)) #66ffcc;
    box-shadow: 0 0 calc(15px * var(--ui-scale)) rgba(102, 255, 204, 0.5);
}

.difficulty-btn[data-difficulty="NORMAL"] {
    color: rgba(0, 255, 255, 0.85);
    border-color: rgba(0, 255, 255, 0.45);
}
.difficulty-btn[data-difficulty="NORMAL"]:hover {
    color: #00ffff;
    border-color: #00ffff;
    background: rgba(0, 255, 255, 0.15);
}
.difficulty-btn[data-difficulty="NORMAL"].active {
    color: #00ffff;
    border-color: #00ffff;
    background: rgba(0, 255, 255, 0.25);
    text-shadow: 0 0 calc(10px * var(--ui-scale)) #00ffff;
    box-shadow: 0 0 calc(15px * var(--ui-scale)) rgba(0, 255, 255, 0.5);
}

.difficulty-btn[data-difficulty="HARD"] {
    color: rgba(255, 102, 102, 0.85);
    border-color: rgba(255, 102, 102, 0.45);
}
.difficulty-btn[data-difficulty="HARD"]:hover {
    color: #ff6666;
    border-color: #ff6666;
    background: rgba(255, 102, 102, 0.15);
}
.difficulty-btn[data-difficulty="HARD"].active {
    color: #ff6666;
    border-color: #ff6666;
    background: rgba(255, 102, 102, 0.25);
    text-shadow: 0 0 calc(10px * var(--ui-scale)) #ff6666;
    box-shadow: 0 0 calc(15px * var(--ui-scale)) rgba(255, 102, 102, 0.5);
}

/* blokada trudności – overlay z komunikatem */
.difficulty-grid.locked {
  position: relative;
  filter: grayscale(1) opacity(0.85);
}

/* półprzezroczysta warstwa nad przyciskami */
.difficulty-grid.locked::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(4, 10, 30, 0.65);
  border-radius: calc(8px * var(--ui-scale));
  pointer-events: none;
}

/* widoczny komunikat z neonem – tekst z data-lockmsg (tłumaczony) */
.difficulty-grid.locked::after {
  content: attr(data-lockmsg);
  position: absolute;
  right: calc(8px * var(--ui-scale));
  top: 50%;
  transform: translateY(-50%);
  padding: calc(6px * var(--ui-scale)) calc(10px * var(--ui-scale));
  font-size: calc(12px * var(--ui-scale));
  font-weight: 700;
  color: #00ffff;
  background: rgba(0, 20, 40, 0.8);
  border: calc(2px * var(--ui-scale)) solid rgba(0, 255, 255, 0.6);
  border-radius: calc(6px * var(--ui-scale));
  text-shadow: 0 0 calc(8px * var(--ui-scale)) #00ffff;
  box-shadow: 0 0 calc(12px * var(--ui-scale)) rgba(0, 255, 255, 0.35);
  pointer-events: none;
  z-index: 2;
}

/* na węższych ekranach – komunikat wyśrodkuj */
@media (max-width: 900px) {
  .difficulty-grid.locked::after {
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    text-align: center;
  }
}

.difficulty-btn.disabled {
  opacity: 0.25;
  cursor: not-allowed;
}
/* .difficulty-grid już jest display:grid — position:relative NIE psuje układu dzieci */
.difficulty-grid { position: relative; }

/* notka dokładnie na środku kratki */
.difficulty-lock-note{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	max-width: 90%;
	text-align: center;
	z-index: 2;
	pointer-events: none;
	font-family: monospace;
	color: #00ffff;
	font-size: calc(12px * var(--ui-scale));
	background-color: rgba(0,0,0,0.9);
	padding:5px;
	border-radius:5px;
	border: 1px solid #00ffff;
	
}