/* LinuxQuest Zone Color Themes */

/* Zone 0: Classic Terminal Green */
.zone-0 {
  --zone-color: #00ff41;
  --zone-color-rgb: 0, 255, 65;
  --zone-glow: rgba(0, 255, 65, 0.4);
}
.zone-0.zone-node { border-color: #00ff41; }
.zone-0.zone-node.active { box-shadow: 0 0 20px rgba(0, 255, 65, 0.4); animation: node-pulse-green 2s ease-in-out infinite; }
.zone-0.zone-node .zone-node-name { color: #00ff41; }
.zone-0.encounter-card { border-color: rgba(0, 255, 65, 0.4); }
.zone-0.encounter-card:hover:not(.encounter-locked) { border-color: #00ff41; box-shadow: 0 0 20px rgba(0, 255, 65, 0.25); }
.zone-0 .challenge-type-badge { color: #00ff41; border-color: #00ff41 !important; }
.zone-0 .btn-primary { background: #00ff41; border-color: #00ff41; box-shadow: 0 0 12px rgba(0, 255, 65, 0.4); color: #000; }
.zone-0 .btn-primary:hover { background: #33ff66; border-color: #33ff66; }
.zone-0 .xp-fill { background: linear-gradient(90deg, #00cc33, #00ff41); box-shadow: 0 0 8px rgba(0, 255, 65, 0.5); }
.zone-0 .challenge-narrative { border-left-color: #00ff41; background: rgba(0, 255, 65, 0.05); }
.zone-0 .code-block { border-color: rgba(0, 255, 65, 0.3); }

/* Zone 1: File Blue */
.zone-1 {
  --zone-color: #89b4fa;
  --zone-color-rgb: 137, 180, 250;
  --zone-glow: rgba(137, 180, 250, 0.4);
}
.zone-1.zone-node { border-color: #89b4fa; }
.zone-1.zone-node.active { box-shadow: 0 0 20px rgba(137, 180, 250, 0.4); animation: node-pulse-blue 2s ease-in-out infinite; }
.zone-1.zone-node .zone-node-name { color: #89b4fa; }
.zone-1.encounter-card { border-color: rgba(137, 180, 250, 0.4); }
.zone-1.encounter-card:hover:not(.encounter-locked) { border-color: #89b4fa; box-shadow: 0 0 20px rgba(137, 180, 250, 0.25); }
.zone-1 .challenge-type-badge { color: #89b4fa; border-color: #89b4fa !important; }
.zone-1 .btn-primary { background: #89b4fa; border-color: #89b4fa; box-shadow: 0 0 12px rgba(137, 180, 250, 0.4); color: #000; }
.zone-1 .btn-primary:hover { background: #abe4ff; border-color: #abe4ff; }
.zone-1 .xp-fill { background: linear-gradient(90deg, #5a8cc9, #89b4fa); box-shadow: 0 0 8px rgba(137, 180, 250, 0.5); }
.zone-1 .challenge-narrative { border-left-color: #89b4fa; background: rgba(137, 180, 250, 0.05); }
.zone-1 .code-block { border-color: rgba(137, 180, 250, 0.3); }

/* Zone 2: Shell Purple */
.zone-2 {
  --zone-color: #cba6f7;
  --zone-color-rgb: 203, 166, 247;
  --zone-glow: rgba(203, 166, 247, 0.4);
}
.zone-2.zone-node { border-color: #cba6f7; }
.zone-2.zone-node.active { box-shadow: 0 0 20px rgba(203, 166, 247, 0.4); animation: node-pulse-purple 2s ease-in-out infinite; }
.zone-2.zone-node .zone-node-name { color: #cba6f7; }
.zone-2.encounter-card { border-color: rgba(203, 166, 247, 0.4); }
.zone-2.encounter-card:hover:not(.encounter-locked) { border-color: #cba6f7; box-shadow: 0 0 20px rgba(203, 166, 247, 0.25); }
.zone-2 .challenge-type-badge { color: #cba6f7; border-color: #cba6f7 !important; }
.zone-2 .btn-primary { background: #cba6f7; border-color: #cba6f7; box-shadow: 0 0 12px rgba(203, 166, 247, 0.4); color: #000; }
.zone-2 .btn-primary:hover { background: #e0c4ff; border-color: #e0c4ff; }
.zone-2 .xp-fill { background: linear-gradient(90deg, #9e75c2, #cba6f7); box-shadow: 0 0 8px rgba(203, 166, 247, 0.5); }
.zone-2 .challenge-narrative { border-left-color: #cba6f7; background: rgba(203, 166, 247, 0.05); }
.zone-2 .code-block { border-color: rgba(203, 166, 247, 0.3); }

/* Zone 3: Access Red/Pink */
.zone-3 {
  --zone-color: #f38ba8;
  --zone-color-rgb: 243, 139, 168;
  --zone-glow: rgba(243, 139, 168, 0.4);
}
.zone-3.zone-node { border-color: #f38ba8; }
.zone-3.zone-node.active { box-shadow: 0 0 20px rgba(243, 139, 168, 0.4); animation: node-pulse-pink 2s ease-in-out infinite; }
.zone-3.zone-node .zone-node-name { color: #f38ba8; }
.zone-3.encounter-card { border-color: rgba(243, 139, 168, 0.4); }
.zone-3.encounter-card:hover:not(.encounter-locked) { border-color: #f38ba8; box-shadow: 0 0 20px rgba(243, 139, 168, 0.25); }
.zone-3 .challenge-type-badge { color: #f38ba8; border-color: #f38ba8 !important; }
.zone-3 .btn-primary { background: #f38ba8; border-color: #f38ba8; box-shadow: 0 0 12px rgba(243, 139, 168, 0.4); color: #000; }
.zone-3 .btn-primary:hover { background: #f5a9be; border-color: #f5a9be; }
.zone-3 .xp-fill { background: linear-gradient(90deg, #c26e86, #f38ba8); box-shadow: 0 0 8px rgba(243, 139, 168, 0.5); }
.zone-3 .challenge-narrative { border-left-color: #f38ba8; background: rgba(243, 139, 168, 0.05); }
.zone-3 .code-block { border-color: rgba(243, 139, 168, 0.3); }

/* Zone 4: Text Orange */
.zone-4 {
  --zone-color: #fab387;
  --zone-color-rgb: 250, 179, 135;
  --zone-glow: rgba(250, 179, 135, 0.4);
}
.zone-4.zone-node { border-color: #fab387; }
.zone-4.zone-node.active { box-shadow: 0 0 20px rgba(250, 179, 135, 0.4); animation: node-pulse-orange 2s ease-in-out infinite; }
.zone-4.zone-node .zone-node-name { color: #fab387; }
.zone-4.encounter-card { border-color: rgba(250, 179, 135, 0.4); }
.zone-4.encounter-card:hover:not(.encounter-locked) { border-color: #fab387; box-shadow: 0 0 20px rgba(250, 179, 135, 0.25); }
.zone-4 .challenge-type-badge { color: #fab387; border-color: #fab387 !important; }
.zone-4 .btn-primary { background: #fab387; border-color: #fab387; box-shadow: 0 0 12px rgba(250, 179, 135, 0.4); color: #000; }
.zone-4 .btn-primary:hover { background: #fcc9a6; border-color: #fcc9a6; }
.zone-4 .xp-fill { background: linear-gradient(90deg, #c8886b, #fab387); box-shadow: 0 0 8px rgba(250, 179, 135, 0.5); }
.zone-4 .challenge-narrative { border-left-color: #fab387; background: rgba(250, 179, 135, 0.05); }
.zone-4 .code-block { border-color: rgba(250, 179, 135, 0.3); }

/* Zone 5: Process Mint */
.zone-5 {
  --zone-color: #a6e3a1;
  --zone-color-rgb: 166, 227, 161;
  --zone-glow: rgba(166, 227, 161, 0.4);
}
.zone-5.zone-node { border-color: #a6e3a1; }
.zone-5.zone-node.active { box-shadow: 0 0 20px rgba(166, 227, 161, 0.4); animation: node-pulse-mint 2s ease-in-out infinite; }
.zone-5.zone-node .zone-node-name { color: #a6e3a1; }
.zone-5.encounter-card { border-color: rgba(166, 227, 161, 0.4); }
.zone-5.encounter-card:hover:not(.encounter-locked) { border-color: #a6e3a1; box-shadow: 0 0 20px rgba(166, 227, 161, 0.25); }
.zone-5 .challenge-type-badge { color: #a6e3a1; border-color: #a6e3a1 !important; }
.zone-5 .btn-primary { background: #a6e3a1; border-color: #a6e3a1; box-shadow: 0 0 12px rgba(166, 227, 161, 0.4); color: #000; }
.zone-5 .btn-primary:hover { background: #c5ebb9; border-color: #c5ebb9; }
.zone-5 .xp-fill { background: linear-gradient(90deg, #7fb380, #a6e3a1); box-shadow: 0 0 8px rgba(166, 227, 161, 0.5); }
.zone-5 .challenge-narrative { border-left-color: #a6e3a1; background: rgba(166, 227, 161, 0.05); }
.zone-5 .code-block { border-color: rgba(166, 227, 161, 0.3); }

/* Zone 6: Script Gold */
.zone-6 {
  --zone-color: #f9e2af;
  --zone-color-rgb: 249, 226, 175;
  --zone-glow: rgba(249, 226, 175, 0.4);
}
.zone-6.zone-node { border-color: #f9e2af; }
.zone-6.zone-node.active { box-shadow: 0 0 20px rgba(249, 226, 175, 0.4); animation: node-pulse-gold 2s ease-in-out infinite; }
.zone-6.zone-node .zone-node-name { color: #f9e2af; }
.zone-6.encounter-card { border-color: rgba(249, 226, 175, 0.4); }
.zone-6.encounter-card:hover:not(.encounter-locked) { border-color: #f9e2af; box-shadow: 0 0 20px rgba(249, 226, 175, 0.25); }
.zone-6 .challenge-type-badge { color: #f9e2af; border-color: #f9e2af !important; }
.zone-6 .btn-primary { background: #f9e2af; border-color: #f9e2af; box-shadow: 0 0 12px rgba(249, 226, 175, 0.4); color: #000; }
.zone-6 .btn-primary:hover { background: #fcecc4; border-color: #fcecc4; }
.zone-6 .xp-fill { background: linear-gradient(90deg, #ccb387, #f9e2af); box-shadow: 0 0 8px rgba(249, 226, 175, 0.5); }
.zone-6 .challenge-narrative { border-left-color: #f9e2af; background: rgba(249, 226, 175, 0.05); }
.zone-6 .code-block { border-color: rgba(249, 226, 175, 0.3); }

/* Zone 7: Scheduler Cyan */
.zone-7 {
  --zone-color: #89dceb;
  --zone-color-rgb: 137, 220, 235;
  --zone-glow: rgba(137, 220, 235, 0.4);
}
.zone-7.zone-node { border-color: #89dceb; }
.zone-7.zone-node.active { box-shadow: 0 0 20px rgba(137, 220, 235, 0.4); animation: node-pulse-cyan 2s ease-in-out infinite; }
.zone-7.zone-node .zone-node-name { color: #89dceb; }
.zone-7.encounter-card { border-color: rgba(137, 220, 235, 0.4); }
.zone-7.encounter-card:hover:not(.encounter-locked) { border-color: #89dceb; box-shadow: 0 0 20px rgba(137, 220, 235, 0.25); }
.zone-7 .challenge-type-badge { color: #89dceb; border-color: #89dceb !important; }
.zone-7 .btn-primary { background: #89dceb; border-color: #89dceb; box-shadow: 0 0 12px rgba(137, 220, 235, 0.4); color: #000; }
.zone-7 .btn-primary:hover { background: #a9e4f0; border-color: #a9e4f0; }
.zone-7 .xp-fill { background: linear-gradient(90deg, #5aaec2, #89dceb); box-shadow: 0 0 8px rgba(137, 220, 235, 0.5); }
.zone-7 .challenge-narrative { border-left-color: #89dceb; background: rgba(137, 220, 235, 0.05); }
.zone-7 .code-block { border-color: rgba(137, 220, 235, 0.3); }

/* Zone 8: System Lavender */
.zone-8 {
  --zone-color: #b4befe;
  --zone-color-rgb: 180, 190, 254;
  --zone-glow: rgba(180, 190, 254, 0.4);
}
.zone-8.zone-node { border-color: #b4befe; }
.zone-8.zone-node.active { box-shadow: 0 0 20px rgba(180, 190, 254, 0.4); animation: node-pulse-lavender 2s ease-in-out infinite; }
.zone-8.zone-node .zone-node-name { color: #b4befe; }
.zone-8.encounter-card { border-color: rgba(180, 190, 254, 0.4); }
.zone-8.encounter-card:hover:not(.encounter-locked) { border-color: #b4befe; box-shadow: 0 0 20px rgba(180, 190, 254, 0.25); }
.zone-8 .challenge-type-badge { color: #b4befe; border-color: #b4befe !important; }
.zone-8 .btn-primary { background: #b4befe; border-color: #b4befe; box-shadow: 0 0 12px rgba(180, 190, 254, 0.4); color: #000; }
.zone-8 .btn-primary:hover { background: #cdd1ff; border-color: #cdd1ff; }
.zone-8 .xp-fill { background: linear-gradient(90deg, #8a96cc, #b4befe); box-shadow: 0 0 8px rgba(180, 190, 254, 0.5); }
.zone-8 .challenge-narrative { border-left-color: #b4befe; background: rgba(180, 190, 254, 0.05); }
.zone-8 .code-block { border-color: rgba(180, 190, 254, 0.3); }

/* Zone 9: Deep System Boss Red */
.zone-9 {
  --zone-color: #ff6c6b;
  --zone-color-rgb: 255, 108, 107;
  --zone-glow: rgba(255, 108, 107, 0.4);
}
.zone-9.zone-node { border-color: #ff6c6b; }
.zone-9.zone-node.active { box-shadow: 0 0 20px rgba(255, 108, 107, 0.4); animation: node-pulse-red 2s ease-in-out infinite; }
.zone-9.zone-node .zone-node-name { color: #ff6c6b; }
.zone-9.encounter-card { border-color: rgba(255, 108, 107, 0.4); }
.zone-9.encounter-card:hover:not(.encounter-locked) { border-color: #ff6c6b; box-shadow: 0 0 20px rgba(255, 108, 107, 0.25); }
.zone-9 .challenge-type-badge { color: #ff6c6b; border-color: #ff6c6b !important; }
.zone-9 .btn-primary { background: #ff6c6b; border-color: #ff6c6b; box-shadow: 0 0 12px rgba(255, 108, 107, 0.4); color: #000; }
.zone-9 .btn-primary:hover { background: #ff8a89; border-color: #ff8a89; }
.zone-9 .xp-fill { background: linear-gradient(90deg, #cc5656, #ff6c6b); box-shadow: 0 0 8px rgba(255, 108, 107, 0.5); }
.zone-9 .challenge-narrative { border-left-color: #ff6c6b; background: rgba(255, 108, 107, 0.05); }
.zone-9 .code-block { border-color: rgba(255, 108, 107, 0.3); }

/* Pulse Animations */
@keyframes node-pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 255, 65, 0.4); }
  50% { box-shadow: 0 0 0 10px rgba(0, 255, 65, 0); }
}

@keyframes node-pulse-blue {
  0%, 100% { box-shadow: 0 0 0 0 rgba(137, 180, 250, 0.4); }
  50% { box-shadow: 0 0 0 10px rgba(137, 180, 250, 0); }
}

@keyframes node-pulse-purple {
  0%, 100% { box-shadow: 0 0 0 0 rgba(203, 166, 247, 0.4); }
  50% { box-shadow: 0 0 0 10px rgba(203, 166, 247, 0); }
}

@keyframes node-pulse-pink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(243, 139, 168, 0.4); }
  50% { box-shadow: 0 0 0 10px rgba(243, 139, 168, 0); }
}

@keyframes node-pulse-orange {
  0%, 100% { box-shadow: 0 0 0 0 rgba(250, 179, 135, 0.4); }
  50% { box-shadow: 0 0 0 10px rgba(250, 179, 135, 0); }
}

@keyframes node-pulse-mint {
  0%, 100% { box-shadow: 0 0 0 0 rgba(166, 227, 161, 0.4); }
  50% { box-shadow: 0 0 0 10px rgba(166, 227, 161, 0); }
}

@keyframes node-pulse-gold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(249, 226, 175, 0.4); }
  50% { box-shadow: 0 0 0 10px rgba(249, 226, 175, 0); }
}

@keyframes node-pulse-cyan {
  0%, 100% { box-shadow: 0 0 0 0 rgba(137, 220, 235, 0.4); }
  50% { box-shadow: 0 0 0 10px rgba(137, 220, 235, 0); }
}

@keyframes node-pulse-lavender {
  0%, 100% { box-shadow: 0 0 0 0 rgba(180, 190, 254, 0.4); }
  50% { box-shadow: 0 0 0 10px rgba(180, 190, 254, 0); }
}

@keyframes node-pulse-red {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 108, 107, 0.4); }
  50% { box-shadow: 0 0 0 10px rgba(255, 108, 107, 0); }
}

/* Global Zone Connector and UI Styles */
.zone-connector.done { background: #00ff41; }
#screen-zone-select .zone-select-name { color: var(--zone-color, #00ff41); }
.encounter-boss { border-width: 2px; }